@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url("btn.css");

body{
	font-size:14px; 
	font-family: Roboto, Helvetica Neue, Arial, "微軟正黑體";
	line-height:22px; 
	color:#666;
	}
b{
	font-weight:400; 
	}	
a {
	color:#099dda;
	}
a:hover, a:active{
	outline:0 none; 
	color:#00c6ff;
	}
.cleanfix{
	clean:both;
	}
	
hr{border:none; border-top:1px dotted #ccc; margin:50px 0 0 0; padding:0;}		

/*上方欄位=========================================================================================================================================*/
.header{
	position:absolute; 
	position:fixed; 
	z-index:99999;
	top:0; 
	width:100%; 
	height:38px; 
	min-width:350px; 
	box-sizing:border-box; -moz-box-sizing:border-box; 
	line-height:38px; 
	font-size:16px; 
	color:#e6e6e6;
	background:#333333; 	
	}
.header p{
	float:left;  
	padding-left:10px;
	font-family:'微軟正黑體', Segoe UI Semibold, Helvetica, Verdana, Arial, sans-serif;
	}
.header .logo{
	float:left; 
	left:0; 
	display:inline-block; 
	background:url(../images/ico-logo.png) no-repeat left; 
	height:38px; 
	width:259px; 
	margin:0 40px 0 10px;
	}	
.header .lang{
	float:right; 
	position:absolute; 
	right:25px; 
	top:0px; 
	margin:0;
	padding:0;
	font-size:14px; 
	color:#ccc;	
	}
.header .lang li{
	float:left; 
	margin:0 5px;
	}
	
.header .lang a{
	display:inline-block; 
	color:#fff; 
	padding:0 5px; 
	text-decoration:none;
	filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; rgba(0, 0, 0, 0.5);
	}
.header .lang a:hover{
	filter:alpha(opacity=100); -moz-opacity:1; opacity: 1; rgba(0, 0, 0, 1);
	}

.header .lang a.focus{
	border-top:5px solid #099dda;
	line-height:28px; 
	cursor:default;
	filter:alpha(opacity=100); -moz-opacity:1; opacity: 1; rgba(0, 0, 0, 1);
	}
.header .lang a.focus:hover{
	filter:alpha(opacity=100); -moz-opacity:1; opacity: 1; rgba(0, 0, 0, 1);
	}
.header .lang i{
	float:left;
	width:25px;
	height:38px;	
	background:url(../images/icon-head.png) no-repeat left 5px; 
	margin:0;
	padding:0;
	}
.header .lang a.focus i{
	background:url(../images/icon-head.png) no-repeat left 0px; 
	}		
.header .lang i.lang01{
	background-position:left -29px;
	}		
.header .lang a.focus i.lang01{
	background-position:left -34px;
	}	
	
.header .menu-ico{
	display:none;
	float:left; 
	width:38px; 
	height:38px; 
	padding:0 6px;
	border-right:1px solid #000; 
	background:url(../images/ico.png) no-repeat left -350px;
	cursor:pointer; 
	}	
/*下方欄位=========================================================================================================================================*/
.gotop{
	position:absolute; 
	position:fixed; 
	display:none; 
	right:3px; 
	top:68%; 
	width:38px; 
	height:38px; 
	z-index:9999; 
	cursor:pointer; 
	text-indent:-9999px;  
	background:url(../images/ico.png) no-repeat left -400px;
	}
.gotop:hover{
	background-position:-38px -400px;
	}	

.footer{

	width:100%;
	text-align:center; 
	color:#999; 
	padding:7px 0;
	z-index:999999;
	font-size:13px;
	}

/*中段=========================================================================================================================================*/
.wrapper{
	position:relative; 
	width:100%; 
	height:100%; 
	margin-top:38px; 
	*padding-top:38px;
	overflow: hidden;
	}

/*左欄==============================================================================================================================================*/
.nav{
	position:relative;
	position:absolute; 
	left:0; 
	width:275px; 
	height:100%; 
	padding:0 14px 0 0;
	background:#555555; 
	z-index:999;
	}
.nav h1{
	position:relative; 
	display:block;
	padding:30px 0 10px 30px;
	color:#cccccc; 
	font-size:18px; 
	font-weight:normal;
	text-transform:uppercase; 
	border-bottom:1px solid #3c3c3c; 
	}
.nav .saide{
	position:absolute; 
	right:0; 
	width:14px; 
	height:100%; 
	z-index:9999; 
	cursor:pointer; 
	background:#fff; 
	*display:none;
	}
.nav .saide i{
	position:fixed;
	display:block; 
	margin-top:0; 
	padding:32px 0;  *padding:23px 0;
	width:14px;
	background:url(../images/ico.png) no-repeat #666;
	}
.nav .saide i:hover{
	background:url(../images/ico.png) no-repeat #888;
	}	
.nav .saide i.icobar-left{
	background-position:left -176px;
	}
.nav .saide i.icobar-right{
	background-position:-25px -176px;
	}
.content{position:relative; position:fixed; top:38px; padding:0; margin:0; width:275px; max-height:600px; overflow:auto; overflow-x:hidden;}

/*選單=============================================================================================================================================*/
.nav ul{position:relative; width:275px; font-size:16px; border-bottom:1px solid #707070; padding:0; overflow:hidden;}
.nav ul li{position:relative; line-height:28px; border-top:1px solid #707070; border-bottom:1px solid #3c3c3c; color:#00c6ff; margin:0; padding:4px 0; font-weight:bold;}
.nav ul li a{display:block; color:#00c6ff; text-decoration:none; padding-left:30px; margin:0;}
.nav ul li a:hover{color:#00b0e3; background-color:#666;}
.nav ul li a:hover[href="#"]{color:#00c6ff; cursor:default;}

.nav li ul{position:relative; border:none; padding:0; font-size:15px; overflow:hidden;}
.nav li ul li{border:none; padding:0; line-height:22px;  font-weight:normal; color:#fff;}
.nav li ul ul{position:relative; font-size:13px;}
.nav li ul ul ul{position:relative;}
.nav li ul li a{font-weight:normal; color:#fff; padding:3px 0; padding-left:30px;  *display:inline-block; *width:100%;}
.nav li ul li a:hover{color:#fff;}
.nav li ul li a:hover[href="#"]{color:#fff; cursor:default;}
.nav li ul li li{position:relative;}
.nav li ul li li a{padding-left:42px;}
.nav li ul li li li a{padding-left:54px;}
.nav li ul li li li li a{padding-left:66px;}
.nav li li span{font-size:13px;}
.nav li li li span{filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; rgba(0, 0, 0, 0.5);}

/*選單icon-關*/
.nav li i{
	position:absolute; 
	display:inline-block; 
	width:16px; 
	height:26px;
	left:8px; 
	z-index:999;
	background:url(../images/ico.png) no-repeat left 7px; *background-position:left 2px; 
	}
.nav li i:hover{
	background-position:right 7px; *background-position:right 2px; 
	}
.nav li li i{
	left:12px; 
	background-position:left -93px; 
	}
.nav li li i:hover{
	background-position:-88px -93px; 
	}
.nav li li li i{
	left:24px; 
	}
.nav li li li li i{
	left:36px;
	}


/*選單icon-開*/
.nav li i.ico-plus{
	background-position:left -43px; *background-position:left -48px; 
	}
.nav li i.ico-plus:hover{
	background-position:right -43px; *background-position:right -48px; 
	}
.nav li li i.ico-plus{
	background-position:left -143px; 
	}
.nav li li i.ico-plus:hover{
	background-position:-88px -143px; 
	}

.nav li a:hover[href="#"]{background:none;}

.nav li a.TitleTarget, .nav li a.TitleTarget:hover{background-color:#099dda; color:#fff;}

.download{
	margin:0 0 15px 0; 
	padding:30px 0px 20px 50px; 
	line-height:15px; 
	font-size:15px; 
	vertical-align:middle; 
	background:url(../images/ico.png) no-repeat 10px -280px;
	}
.download a{
	color:#00c6ff;
	}
.download a:hover{
	color:#ccc;
	}

/*右欄主內容=========================================================================================================================================*/
.article{
	position:relative; 
	width:auto; 
	padding:32px 32px 10px 32px; 
	margin-left:289px; 
	background-color:#fff;
	}
.article .section{
	font-size:24px; 
	line-height:26px; 
	text-align:right;
	}
.article .box-top{
	position:absolute; 
	right:40px; 
	top:20px;
	}
.article .box{
	position:relative; 
	border-top:1px solid #ccc;  
	margin:20px 0 10px 0; 
	padding:20px 0;
	}
iframe{
	padding:0; 
	margin:0; 
	width:100%; 
	height:100%; 
	overflow:hidden; 
	min-height:500px;
	}
	
/*Iframe內容=========================================================================================================================================*/
/*麵包削------*/
.iframe-info .breadcrumb{
	position:relative; 
	left:0; 
/*	top:-45px; */
	font-size:11px; 
	line-height:16px; 
	list-style:none;
	overflow:hidden; 
	z-index:99; 
	}
.iframe-info .breadcrumb:after{
	content:''; 
	display:block; 
	clear:both;
	}
.iframe-info .breadcrumb li{
	float:left; 
	color:#999; 
	padding:0 10px 0 15px; 
	background:url(../images/ico.png) no-repeat left -244px;
	list-style:none; 
	font-size:11px; 
	margin-left:0; 
	list-style:none; 
	margin:0;
	}
.iframe-info .breadcrumb li:first-child{
	background:none; 
	padding:0 10px 0 0;
	}
.iframe-info .breadcrumb li:last-child{
	color:#666;
	}
.iframe-info .breadcrumb li a{
	color:#999; 
	text-decoration:none;
	}
.iframe-info .breadcrumb li a:hover{
	color:#2db2ea;  
	text-decoration:none;
	}
.iframe-info h1{
	margin-bottom: 30px;
	font-size:28px; 
	color:#333; 
	border-bottom:1px solid #ccc; 
	line-height:32px; 
	font-weight:normal;
	}
.iframe-info h1 span{
	position:relative; 
	display:inline-block; 
	border-bottom:3px solid #099dda; 
	padding:0 0 5px 0; 
	z-index:99; 
	bottom:-2px;
	}	
.iframe-info h1 span b{
	font-weight:bold;
	}	
/*code*/
.iframe-info .code{
	position:relative;
	width:auto;
	padding:20px;
	margin:40px 0 10px;
	color:#666;
	font-size:14px;
	border:1px #ddd solid;
	background-color:#f5f5f5;
	border-radius:6px;
	line-height:17px;
	}
.iframe-info .code b{
	color:#000;
	font-weight:bold;
	}
.iframe-info .code .gray{
	color:#aaa;
	}
.iframe-info .code h1{
	position:relative; 
	top:0;
	margin-bottom:15px;
	font-size:20px; 
	color:#333; 
	border-bottom:none; 
	line-height:20px;
	}	
	
/*圖片------*/
.iframe-info img{vertical-align:middle; max-width:100%; margin:5px 0 20px 0;}
.iframe-info img.border{ border:1px solid #ddd;}
.iframe-info p img, .iframe-info li img{margin:0 3px;}	
			
/*文字定義------*/
.iframe-info p{font-size:15px; padding:6px 0; color:#444;}
.iframe-info p b{font-size:16px; color:#000;}

/*清單------*/
.iframe-info ul, .iframe-info ol{position:relative; margin:5px 0;}
.iframe-info li{position:relative; list-style:disc; margin:0 0 0 25px; font-size:14px; color:#555; padding:2px 0;}
.iframe-info ol li{list-style-type:decimal;}
.iframe-info li b{font-weight:bold; color:#000; font-size:15px;}

.iframe-info ul.mini-pad li{margin:5px 0 5px 25px;}
.iframe-info ul.small-pad li{margin:10px 0 10px 25px;}
.iframe-info ul.medium-pad li{margin:20px 0 20px 25px;}
.iframe-info ul.large-pad li{margin:30px 0 30px 25px;}

.iframe-info ul.no-style li{list-style:none; margin-left:5px;}

/*圖片清單------*/
.iframe-info ul.example{overflow:hidden; margin:15px 0; padding:0;}
.iframe-info ul.example li{float:left; list-style:none; margin:0; padding:3px 11px 10px 0;}
.iframe-info ul.example li img{margin:0; padding:0;}
.iframe-info ul.example li .wrong{background:url(../images/ico-wrong.gif) no-repeat 3px; padding-left:28px; clear:both; color:#ff0000; line-height:22px;}

/*多欄樣式------*/
.iframe-info [class^="layout-col-"], .iframe-info [class*="layout-col-"]{position:relative; overflow:hidden; margin:15px 0; padding:0;}
.iframe-info [class^="layout-col-"] img, .iframe-info [class*="layout-col-"] img{margin:0; padding:0;}
.iframe-info [class^="layout-col-"] > li, .iframe-info [class*="layout-col-"] > li{float:left; list-style:none; margin:0; padding:3px 30px 30px 0; box-sizing:border-box; -moz-box-sizing:border-box;}

.iframe-info ul.layout-col-2 > li{min-width:400px; width:67%;}
.iframe-info ul.layout-col-3 > li{min-width:300px; width:33%;}
.iframe-info ul.layout-col-4 > li{min-width:200px; width:25%;}

/*捲軸-----*/
.iframe-info .QAdetail > li{color:#099dda;}
.iframe-info .QAdetail > li span{display:inline-block; position:relative; font-size:16px; margin:30px 0 0 0; font-weight:normal; background:#099dda; color:#fff; padding:2px 5px; border-radius:3px;}
.iframe-info .QAdetail ul, .iframe-info ol.QAdetail ol{padding-left:25px; box-sizing:border-box; -moz-box-sizing:border-box;}
.iframe-info .QAdetail ol li{list-style-type:decimal; margin-left:12px;}
.iframe-info .QAdetail ul li{list-style-type:disc; margin-left:12px;}
.iframe-info .QAdetail ol li li{list-style-type:lower-latin;}
.iframe-info .QAdetail ol li li li{list-style-type:lower-roman;}
.iframe-info .QAdetail li li{color:#777;}
.iframe-info .QAdetail li li li{color:#999; font-size:14px;}

/*表格------*/
.iframe-info .sop-table{width:100%; border:1px solid #ccc;}
.iframe-info .sop-table th, .iframe-info .sop-table td{border:1px solid #ccc; color:#333; padding:6px 15px; background-color:#ddd; vertical-align:middle;}
.iframe-info .sop-table td{color:#666; background:none;}
.iframe-info .sop-table .bgcolor{background:#f6f6f6;}


/*標籤與標題------*/
h2, h3, h4, h5, h6{position:relative; padding:0; margin:30px 0 5px 0; font-weight:bold;}
.tabs{padding:2px 5px; border-radius:3px; font-weight:normal; color:#fff;  background:#099dda;}
h2{font-size:20px; color:#099dda;}
h3{font-size:18px; color:#000;}
h4{font-size:16px; color:#222;}
h5{font-size:15px; color:#333; margin:25px 0 10px 0;}
h6{font-size:14px; color:#444; margin:25px 0 5px 0;}

.iframe-info p{font-size:15px; padding:6px 0; color:#444;}
.iframe-info p b{font-size:16px; color:#000;}


/*顏色主題-綠*/
.colortheme-green .iframe-info h1 span{border-bottom:3px solid #39b54a;}
.colortheme-green h2, 
.colortheme-green .iframe-info .point{color:#39b54a;}
.nav li.colortheme-green a.TitleTarget, 
.colortheme-green .iframe-info .point-bg, 
.colortheme-green .tabs{background-color:#39b54a;}

/*顏色主題-黃*/
.colortheme-yellow .iframe-info h1 span{border-bottom:3px solid #f39b00;}
.colortheme-yellow h2, 
.colortheme-yellow .iframe-info .point{color:#f39b00;}
.nav li.colortheme-yellow a.TitleTarget, 
.colortheme-yellow .iframe-info .point-bg, 
.colortheme-yellow .tabs{background-color:#f39b00;}


/*顏色主題-紅*/
.colortheme-red .iframe-info h1 span{border-bottom:3px solid #b03542;}
.colortheme-red h2, 
.colortheme-red .iframe-info .point{color:#b03542;}
.nav li.colortheme-red a.TitleTarget, 
.colortheme-red .iframe-info .point-bg,
.colortheme-red .tabs{background-color:#b03542;}

/*顏色主題-紫*/
.colortheme-purple .iframe-info h1 span{border-bottom:3px solid #8b4887;}
.colortheme-purple h2, 
.colortheme-purple .iframe-info .point{color:#8b4887;}
.nav li.colortheme-purple a.TitleTarget, 
.colortheme-purple .iframe-info .point-bg,
.colortheme-purple .tabs{background-color:#8b4887;}

/*顏色主題-橘*/
.colortheme-orange .iframe-info h1 span{border-bottom:3px solid #ff623f;}
.colortheme-orange h2, 
.colortheme-orange .iframe-info .point{color:#ff623f;}
.nav li.colortheme-orange a.TitleTarget, 
.colortheme-orange .iframe-info .point-bg, 
.colortheme-orange .tabs{background-color:#ff623f;}

/*顏色主題-灰*/
.colortheme-gray .iframe-info h1 span{border-bottom:3px solid #7a7a7a;}
.colortheme-gray h2, 
.colortheme-gray .iframe-info .point{color:#7a7a7a;}
.nav li.colortheme-gray a.TitleTarget, 
.colortheme-gray .iframe-info .point-bg, 
.colortheme-gray .tabs{background-color:#7a7a7a;}

/*顏色主題-洋紅*/
.colortheme-pink .iframe-info h1 span{border-bottom:3px solid #F2539B;}
.colortheme-pink h2, 
.colortheme-pink .iframe-info .point{color:#F2539B;}
.nav li.colortheme-pink a.TitleTarget, 
.colortheme-pink .iframe-info .point-bg, 
.colortheme-pink .tabs{background-color:#F2539B;}


/*樣式------*/
.iframe-info .point{color:#099dda;} 
.iframe-info .blue{color:#099dda;}
.iframe-info .green{color:#39b54a;}
.iframe-info .yellow{color:#f39b00;}
.iframe-info .red{color:#b03542;}
.iframe-info .purple{color:#8b4887;}
.iframe-info .orange{color:#ff623f;}
.iframe-info .gray{color:#888;}
.iframe-info .white{color:#fff;}
.iframe-info .red-light{color:#d80000;}

.iframe-info .point-bg{background-color:#099dda; color:#fff;} 
.iframe-info .blue-bg{background-color:#099dda; color:#fff;}
.iframe-info .green-bg{background-color:#39b54a; color:#fff;}
.iframe-info .yellow-bg{background-color:#f39b00; color:#fff;}
.iframe-info .red-bg{background-color:#b03542; color:#fff;}
.iframe-info .purple-bg{background-color:#8b4887; color:#fff;}
.iframe-info .orange-bg{background-color:#ff623f; color:#fff;}
.iframe-info .gray-bg{background-color:#888; color:#fff;}
.iframe-info .red-light-bg{background-color:#d80000; color:#fff;}

.iframe-info .border{border:1px solid #ddd;}
.iframe-info .font-line{text-decoration:underline;}
.iframe-info .border-ra40{border-radius:40px; padding:0 5px;}
.iframe-info .font-s11{font-size:11px;}
.iframe-info .font-s12{font-size:12px;}
.iframe-info .font-s13{font-size:13px;}
.iframe-info .font-s14{font-size:14px;}
.iframe-info .font-s15{font-size:15px;}
.iframe-info .font-s16{font-size:16px;}
.iframe-info .font-s18{font-size:18px;}


.headline{background: url(../images/headline-bg.png) 0 50% repeat-x; display: block; margin: 30px 0 10px 0;}
.headline2{background: url(../images/headline-bg.png) 0 50% repeat-x; display: block; margin: 60px 0 10px 0;}
.headline h3, .headline2 h3 {background-color: #fff; display: inline; padding: 0 10px 0 0;}
.w85{ width:85%;}
.w65{ width:65%;}
.w50{ width:50%;}
.iframe-info .row{margin: 60px auto;}
span.c01{ color:#DF26A8;}
span.c02{ color:#27AAE1;}
span.c03{ color:#DF5D27;}
span.c04{ color:#82AD0B;}
span.c05{ color:#662D91;}
span.c06{ color:#4D4D4D;}
span.gray{ color:#505151;}

.iframe-info .row { margin: 0px auto;}
.iframe-info .margintop30 { margin: 30px auto;}
.iframe-info img.margintop30, .iframe-info p.margintop30{margin-top:30px;}
.margintop60{margin-top:60px;}
.row+.row{margin-top:30px;}
.iframe-info .sop-table td.noPadding{ text-align:center;}
.iframe-info .sop-table td.noPadding img{ margin:0}
#tableRows{margin-top:30px;}
.nav ul li a.green{color:#39B54A; font-weight: bold;}
.nav ul li a.green:hover[href="#"]{color:#39B54A; cursor:default;}
.nav ul li a.blue{color:#00c6ff; font-weight: bold;}
.nav ul li a.pink{color:#F2539B; font-weight: bold;}
.nav ul li a.pink:hover[href="#"]{color:#F2539B; cursor:default;}
.iframe-info ul.txtC li { margin-bottom: 10px;}
.iframe-info ul.margintop30{ margin:30px 0 0 0;}
div.summary{ margin-bottom:60px;}
.logoBg{ float:right;position: relative;top: 30px;right: 30px;}
h4.frist{margin:0 0 5px 0;}

.iframe-info p.mainInfo{font-size:15px; padding:6px 0; color:#444; line-height:26px;white-space: pre-wrap;}
#e-form .list{margin-bottom:20px;}
.list li{ list-style-type:none;}
.list li>span{ width:250px; background-color:#fde9b4; display:inline-block; padding:0 6px; margin-bottom:6px;}

/*layout-table*/
.main-info-table{ padding-top:10px;}
.layout-table {
  display: table;
  margin: 0px;
  padding: 0px;
  font-size: 12px;
  width: 100%;
  border: 1px solid #aaa;
}

.layout-row {
  display: table-row;
}


.layout-row > span {
  list-style: none;
  display: table-cell;
  border-bottom: 1px solid #ccc;
  padding: 2px 6px;
  height: 60px;
  vertical-align: middle;


}

.layout-row > span:first-child{
	background: #ddd;
	width: 60px;
	text-align: center;
	border-right: 1px solid #aaa;
}
.layout-row > span:first-child img{
	width: 50px;
	height: auto;
}

/*RWD*/
@media screen and (max-width: 768px) {
.article .box-top{display:none;}
}
@media screen and (max-width: 640px) {
.header p{display:none;}
.logoBg{display: none;}
}

@media screen and (max-width: 450px) {
.header p{display:none;}
.iframe-info p + ol{ margin-left:0;}
.header .lang{right:5px;}
/*arty add*/
.layout-table{width: 100%;}
.layout-row > span {float: left;width: 100%;height:auto;padding:0;text-align: center;padding-top: 10px;}
.layout-row > span > ul {text-align: left;}
.layout-row > span:first-child{width: 100%;height:auto;line-height: 10px;padding-bottom: 10px;}
.layout-row > span:first-child img{width: 40px;padding-bottom: 10px;}
.iframe-info ul.layout-col-2 > li{min-width:250px;width: 100%;}
.iframe-info [class^="layout-col-"] > li, .iframe-info [class*="layout-col-"] > li{padding: 0 10px;}
article{padding: 10px;}
.list li>span{width: 200px;}
}