/*
140828
oki_rwd.css



*/
@charset "UTF-8";

/*setting*/
*,body {font-family: Arial, Helvetica, sans-serif,"微軟正黑體","Microsoft JhengHei","Heiti TC"}


a {
 color:#000000;
 text-decoration:none;
}
a:hover,a:active{
 color:#ff9900; 
 text-decoration:none;
}

.pointer { cursor:pointer }

/*default link */
/*default link hover*/


*[class^=oki_],*[class^=oki_] a {
 color:#333333; 
}/*default text color*/



.oki_tab .tab[class~=active] , .oki_navibar li[class~=active] a {
 color:#006699; 
}/*active text color*/

.oki_navibar li[class~=active] , .oki_navibar li:hover,.oki_pagination li[class~=active],.oki_pagination li:hover   {
 background-color:#efefef; 
}/*active zone bg*/



.oki_def_bg , .oki_tab li[class~=active],.oki_navibar li[class~=bold]:hover,.oki_tag ,.oki_label {
 background-color:#fafafa;
}/*default bg :: on oki ui items not body background  */


.oki_def_border ,.oki_tab,.oki_tab li,.oki_border,.oki_tag,.oki_navibar , .oki_pagination[class~=border] li{
 border-color:#888888;
}/*default border*/


.oki_rev_bg , .oki_label ,.oki_button {
 background-color:#666666;
}/*default reverse bg*/

.oki_rev_border  {
 border-color:#FFFFFF
}/*default reverse border*/


.primary {
  color:#006699
}/*primary fontcolor*/

.primary_bg {
  color:#ffffff
  background-color:#006699;
}/*promary bg*/

.primary_border {
  color:#006699;
  border-color:#006699;
}/*promary border*/



/*Pane*/
.oki_pane {
 width:100%;
 display:table; 
}


.relbox {
position:relative;
}

.absbox {
position:absolute;
}

/*Block 12 column grid*/
.oki_row {
  width:100%;
  display:table; 
  margin-top:5px;
}

.oki_col12 {
  width:99.9%;
  display:table-cell;

}


.oki_col10 {
  width:83.3%;
  display:table-cell;

}

.oki_col8 {
  width:66.6%;
  display:table-cell;

}

.oki_col6 {
  width:49.9%;
  display:table-cell;

}

.oki_col4 {
  width:33.3%;
  display:table-cell; 

}

.oki_col3 {
  width:24.9%;
  display:table-cell; 

}

.oki_col2 {
  width:16.6%;
  display:table-cell; 

}

.oki_col1 {
  width:8.3%;
  display:table-cell; 
}

.oki_row {
 border:0px #cccccc solid;
}

.oki_row div[class*=oki_col] {
 border:0px #cccccc solid;
 padding:5px;
 vertical-align:top;
}

/*Title*/
h1,.h1 {font-size:22pt;font-weight:bold;margin:5px 0px 5px 0px;clear:both}
h2,.h2 {font-size:20pt;font-weight:bold;margin:5px 0px 5px 0px;clear:both}
h3,.h3 {font-size:18pt;font-weight:bold;margin:5px 0px 5px 0px;clear:both}
h4,.h4 {font-size:16pt;font-weight:bold;margin:5px 0px 5px 0px;clear:both}
h5,.h5 {font-size:14pt;font-weight:bold;margin:5px 0px 5px 0px;clear:both}
h6,.h6 {font-size:12pt;font-weight:bold;margin:5px 0px 5px 0px;clear:both}


/*text*/
b,.bold {
  font-weight:bold
}

.text-primary {
  color:#006699;
}

.text-info {
  color:#006699
}
.text-error {
  color:#ff3300
}
.text-ok {
  color:#009900
}
.text-warming {
  color:#999999
}

.big{ font-size:16pt }

.middle { font-size:13pt }

.small { font-size:8pt }


/*Labels*/
.oki_label {
  padding:3px 6px 3px 6px;
  color:#ffffff;
  min-width:30px;
  min-height:10px;
  display:inline-block;
  text-align:center;
  opacity:0.8;
  margin-right:3px;
}

.oki_label[class~=primary] {
  background-color:#006699;
}
.oki_label[class~=info] {
  background-color:#0099ff;
}
.oki_label[class~=error] {
  background-color:#ff3300;
}
.oki_label[class~=ok] {
  background-color:#009900;
}
.oki_label[class~=warming] {
  background-color:#CCAA33;
}


/*borders*/
.oki_border {
  padding:3px 6px 3px 6px;
  min-width:30px;
  min-height:10px;
  display:inline-block;
  text-align:center;
  border-width:1px;
  border-style:solid;
  margin-right:3px;
}

.oki_border[class~=primary] {
  color:#006699;
  border-color:#006699;
}

.oki_border[class~=info] {
  color:#0099ff;
  border-color:#0099ff;
}

.oki_border[class~=error] {
  color:#ff3300;
  border-color:#ff3300;
}
.oki_border[class~=ok] {
  color:#009900;
  border-color:#009900;
}
.oki_border[class~=warming] {
  color:#CCAA33;
  border-color:#CCAA33;
}


/*tags*/
.oki_tag {
  padding:3px 6px 3px 6px;
  min-width:30px;
  min-height:10px;
  display:inline-block;
  text-align:center;
  border-width:1px 1px 1px 5px;
  border-style:solid;
  margin:3px 3px 0px 0px;
}

.oki_tag[class~=primary] {
  color:#006699;
  border-color:#006699;
}

.oki_tag[class~=info] {
  color:#0099ff;
  border-color:#0099ff;
}

.oki_tag[class~=error] {
  color:#ff3300;
  border-color:#ff3300;
}
.oki_tag[class~=ok] {
  color:#009900;
  border-color:#009900;
}
.oki_tag[class~=warming] {
  color:#ccaa33;
  border-color:#ccaa33;
}


/*navibar*/
.oki_navibar {
 border-style:solid;
 border-width:1px;
 padding:0px 5px;
 margin:5px 0px;
 font-size:11pt;
}

.oki_navibar li {
 display:table-cell;
 padding:10px;
 margin:0px;
}



.oki_navibar li[class~=active] {
  font-weight:bold
}

.oki_navibar[class~=big] li { 
 padding:12px;
 font-size:16pt;	
}

.oki_navibar[class~=middle] li {
 padding:8px;
 font-size:14pt;	
}

.oki_navibar[class~=small] li {
 padding:5px;
 font-size:10pt;	
}
.oki_navibar .dropdown {
 display:none;
}




.oki_navibar a {
  text-decoration:none;
}




/*Tabs*/
.oki_tab {
  border-width:0px 0px 1px 0px;
  border-style:solid;
  margin:5px 0px 5px 0px;
  font-size:14pt;
}

.oki_tab  li{
  padding:10px;
  border-width:1px 1px 0px 1px;
  border-style:solid;
  display:inline-block;
  text-align:center;
  margin-bottom:-1px;
  margin-left:5px;
  cursor:pointer;  
} 

.oki_tab  li:hover{
  
}


.oki_tab  li[class~=active]{
  border-width:1px 1px 0px 1px;
  border-style:solid;
  font-weight:bold;
  margin-bottom:-1px;
} 

.oki_tab[class~=middle] li {
    padding:5px;  
  font-size:12pt;
}

.oki_tab[class~=small] li {
  margin-left:3px;
  padding:3px;
  font-size:10pt;
}


/*Buttons*/
a {padding:1px\0}/*ie8special*/

.oki_button {
  padding:6px 12px 6px 12px!important;
  color:#ffffff!important;
  min-width:30px;
  min-height:10px;
  display:inline-block;
  overflow:visible;
  text-align:center;
  font-size:14pt;
  margin-left:5px;
  cursor:pointer;
  opacity:0.75;  
}


.oki_button:hover{
  opacity:1;
}

.oki_button[class~=reverse] {
 border:solid 1px #999999;
 background-color:#FFFFFF;
 color:#666666;
}


.oki_button[class~=full]{
 display:table;
 padding:8px 0px!important;
} 

.oki_button[class~=primary] {
  background-color:#006699;
}

.oki_button[class~=orange] {
  background-color:#ff3300;
}

.oki_button[class~=submit] {
  background-color:#0099ff;
}
.oki_button[class~=cancel] {
  background-color:#FF3300;
}
.oki_button[class~=ok] {
  background-color:#009900;
}

.oki_button[class~=big] {
  font-size:18pt;
}

.oki_button[class~=middle] {
  font-size:12pt;
}
.oki_button[class~=small] {
  margin-left:3px;
  font-size:9pt;
}

/*page list style*/

.list_item {
 width:auto;	
 margin:10px;
 box-shadow:0px 0px 5px #333333;
 position:relative;
 overflow:hidden;
 padding-bottom:66%;
}

.list_item:hover .list_photo{
 transform:scale(1.1,1.1);
 -webkit-transform:scale(1.1,1.1);
}

.list_photo {
position:absolute;
z-index:1;
width:100%;
height:100%;	
 background-size:cover;
 background-position:center;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}


.list_item_title {
  position:absolute;
  z-index:12;
  bottom:0px;
  min-height:35px;
  color:#ffffff;
  width:100%;
  padding-top:8px;
  background-color:rgba(0,0,0,.8);
  text-align:center;
}

.list_pagebox{
 text-align:center;
}
.list_pagebtn {
  width:12px;
  height:12px;
  display:inline-block;
  background-color:#666666;
  border-radius:10px;
  cursor:pointer;
  margin:5px;
  box-shadow:inset 1px 1px 2px;
  -webkit-transition:background-color .3s;
  transition:background-color .3s;
}

.list_pagebtn:hover {
  background-color:#ff6600;	
}

.list_pagebtn[class~=active] {
  background-color:#FFFFCC;	
}

/*page detail style*/
.this_spic { margin-top:10px }
.this_spic img {width:50px;height:50px;margin-left:5px;margin-bottom:5px;box-shadow:0 0 3px #000000;cursor:pointer}


/*Pagination*/
.oki_pagination {
  display:table;
  margin:5px 0px;
}

.oki_pagination li{
  display:inline-block;
  margin-right:3px;
  font-size:11pt;
  text-align:center;
  height:20px;
  min-width:20px;
  line-height:20px;
  overflow:hidden;
  vertical-align:middle;
  cursor:pointer;
}

.oki_pagination[class~=border] li {
  border-style:solid;
  border-width:1px;
}

.oki_pagination[class~=big] li {
  margin-right:5px;	
  font-size:14pt;
  height:30px;
  min-width:30px;
  line-height:30px;
}

.oki_pagination[class~=middle] li {
  margin-right:5px;	
  font-size:13pt;
  height:24px;
  min-width:24px;
  line-height:24px;
}




/*Header*/
.full {width:99.9%;padding:5px 0px;margin:3px 0px;text-indent:8px}
.bottomline { border-width:0px 0px 1px 0px;border-radius:0px!important }
.bottomline2 { border-width:0px 0px 2px 0px;border-radius:0px!important }
.bottomline3 { border-width:0px 0px 3px 0px;border-radius:0px!important }
.bottomline4 { border-width:0px 0px 4px 0px;border-radius:0px!important }
.nobgcolor {background:''!important}

/*Grid*/
.oki_grid,.oki_grid tr,.oki_grid td {
 border-collapse:collapse;
 border-color:#cccccc; 
 border-style:solid;
}

.oki_grid {
  border-width:1px 0px 0px 0px;
}
.oki_grid tr { 
 border-width:0px 0px 1px 0px;
} 
.oki_grid tr:hover,.oki_grid tr:nth-child(even):hover { 
 background-color:#eaeaea;} 

.oki_grid tr:nth-child(even) { 
  background-color:#F2F2F2;
}
.oki_grid tr.header {
 border-width:0px 0px 2px 0px;
 font-weight:bold;
}
.oki_grid td { 
 padding:8px;
}

.oki_grid[class~=collapse] {
  border-width:1px;
}
.oki_grid[class~=collapse] tr { 
 border-width:1px;
} 
.oki_grid[class~=collapse]  td { 
 border-width:1px;
} 

/*box*/
.oki_msgbox {
  min-width:240px;
  max-width:420px;
  min-height:30px;
  padding:10px;
  opacity:.75;
  border-radius:5px;
  text-align:center; 
}

.oki_msgbox[class~=error] {
  background:#FF9999;
  color:#FFFFFF;
}

.oki_msgbox[class~=ok] {
  background:#99CC00;
  color:#FFFFFF;
}


/*divider*/
.oki_divider { 
 border-top:1px #666666 solid;
 min-height:5px;
 height:5px;
 margin:5px 0px 1px 0px;
}


/*in block align*/
.left {
 text-align:left;
}
.right {
 text-align:right;
}
.center {
 text-align:center;
}

/*float*/
.pull-left {
 float:left;
 
}
.pull-right {
 float:right;
}
/*clear*/
.clearfix:after {
	content: ".";
	display: block;
   	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}


/*form*/
input[type=text],input[type=password], textarea {  
   font-size:9pt;
    text-align:left;
	padding:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border:1px #cccccc solid;
    margin-top:5px;
    
      -webkit-transition: 0.3s ease-in-out all;
      -moz-transition: 0.3s ease-in-out all;
      -ms-transition: 0.3s ease-in-out all;
      -o-transition: 0.3s ease-in-out all;
      transition: 0.3s ease-in-out all;    
}


input[type=text],input[type=password],textarea {
    padding:5px;
	text-align:left;	
}



input[type=text]:focus,input[type=password]:focus, textarea:focus { 
border-color: rgba(0, 150, 255, 0.6); /* blue */
    outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(0, 150, 255, 0.6);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(0, 150, 255, 0.6);
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(0, 150, 255, 0.6);
}

input[class~=error]{
      border:1px #ff3300 solid;
}
input[class~=error]:focus{
    border-color: rgba(255, 50, 0, 0.6); /* red */
    outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(255, 50, 0, 0.6);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(255, 50, 0, 0.6);
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(255, 50, 0, 0.6);
}


.oki_form_group *{
 display:inline-block;
 vertical-align:top;
}

.oki_form_group .caption {
  font-size:9pt ;
  min-width:80px;
  text-align:right;
  margin:8px 5px 5px 5px;
}

.oki_form_group label {
 padding:3px 5px;
}



/*spec effect -------------------------------------------------------------------------------------------------------------------------------------*/


.round {   
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.round_top,.oki_tab li {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

.round_10, {/*.oki_button[class~=big]*/
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.round_5,.oki_button,.oki_border,.oki_navibar,.oki_pagination[class~=big] li {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.round_3,.oki_button[class~=small],.oki_label,.oki_pagination li {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.shadow,.oki_button {
    -webkit-box-shadow: 2px 2px 3px #333333; 
    -moz-box-shadow: 2px 2px 3px #333333; 
    box-shadow: 2px 2px 2px #333333;
}

.shadow_tag,.oki_tag {
    -webkit-box-shadow: 2px 2px 0px #aaaaaa; 
    -moz-box-shadow: 2px 2px 0px #aaaaaa; 
    box-shadow: 2px 2px 0px #aaaaaa;
}



.shadow_3 {
    -webkit-box-shadow: 0 0px 3px #999; 
    -moz-box-shadow: 0 0px 3px #999; 
    box-shadow: 0 0px 3px #999;
}

.shadow_5 {
    -webkit-box-shadow: 0 0px 5px #999; 
    -moz-box-shadow: 0 0px 5px #999; 
    box-shadow: 0 0px 5px #999;
}

/*ie 7 hack*/
*[class*=oki_],*[class*=oki_] a, .oki_tab li  {
 *display: inline;
}/*default text color*/

*[class~=oki_row],.oki_pagination,.oki_navibar,.oki_tab {
 *float: left;
 *width: 100%;
 *display:table;
}

*[class~=oki_row]:after,.oki_pagination:after,.oki_navibar:after,.oki_tab:after {
  *content: "";
  *display:table;
  *clear: both;
}

*[class*=oki_col],*[class~=oki_label],*[class~=oki_border],*[class~=oki_tag],.oki_navibar li,.oki_pagination li,.oki_tab li {
 *float:left;
}

*[class~=oki_col6]{
 *width:49%;
}

*[class~=oki_col4]{
 *width:32.3%;
}

*[class~=oki_col3]{
 *width:24%;
}

*[class~=oki_col2]{
 *width:15.63%;
}

*[class~=oki_col1]{
 *width:7.3%;
}

.oki_grid {
 *margin-bottom:10px;
}

.oki_grid td{
 *border-style:solid;
 *border-width:0px 0px 1px 0px;
}



/*no rwd*/

@media screen and (max-width: 768px) {

  .oki_row,.oki_pane,.oki_form_group{
   width:inherit;
   display:block;
   border:0px solid #cccccc;
  }

  .oki_row:after,.oki_pane:after,.oki_form_group:after {
	content: "";
	display:table;
	clear: both;
  }

  *[class*=oki_col],.oki_form_group *,.oki_button {     
     display:block;
     width:inherit;
     margin-bottom:5px;
  }

  input[class*=oki_col] {
	width:100%  
  }

  .oki_button {
    font-size:22pt!important;
    padding:10px!important;
	font-size:10pt!important;
  }
  .oki_button[class~=full] {
    display:block;
	float:none;
  }
  .oki_tab li {
    font-size:18pt!important;
    padding:8px!important;
    margin-left:0px!important;
  }

  .oki_form_group .caption {
     text-align:left;
     display:block;
     width:inherit;
  }

  .oki_form_group input{
     display:inline-block;     
  }

  .oki_form_group input[type=text],.oki_form_group input[type=password],.oki_form_group textarea{
     width:95%;
     font-size:14pt;
  }

  .oki_pagination li {
	margin-right:5px!important;	
	font-size:14pt!important;
	height:30px!important;
	min-width:30px!important;
	line-height:30px!important;
  }


}


*.hide { 
   display:none; 
}