/* CSS Document */
@import url(font-awesome/css/font-awesome.min.css);

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family: Arial, sans-serif; background:url(../images/demo-bg.gif) repeat-x #2e2e2e;}
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; 
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s; }
a:hover { text-decoration:none; }

* { margin:0; padding:0; list-style:none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

.content-Box { max-width:1000px; margin:0 auto; text-align:left; position:relative; clear:both;}

.after-0:after { clear:both; display:block; content:""; height:0; text-indent:-99999px;}
.after-5:after { clear:both; display:block; content:""; height:5px; text-indent:-99999px;}
.after-10:after { clear:both; display:block; content:""; height:10px; text-indent:-99999px;}
.after-15:after { clear:both; display:block; content:""; height:15px; text-indent:-99999px;}
.after-20:after { clear:both; display:block; content:""; height:20px; text-indent:-99999px;}

.slider a:before { content:""; display:block; position:absolute; width:100%; height:100%; z-index:1;}


#content { }
nav { position:absolute; width:100%; top:238px; z-index:2;}
.menuzord-menu > li:first-child { position:absolute; z-index:999; top:-203px; right:0px; padding:0; width:387px; height:42px;}
.top-right-link { text-align:right; padding:13px 20px 0 0;}
.top-right-link a { display:inline-block; vertical-align:top; padding-left:20px; font-size:12px; color:#fff;}
.top-right-link a:hover { opacity:0.7;}

.banner { line-height:0;}

.main-content-box { background:url(../images/cht_bg02.gif) repeat-y; display:flex; flex-direction:row; flex-wrap:no-wrap; padding-bottom:30px;}
aside { width:208px;}
#main { width:calc(100% - 208px); color:#7c7c7c; font-size:13px; line-height:22px;}
.aside-bg { background:url(../images/cht_smubg.gif) repeat-y top left;}
.aside-title { background:url(../images/cht_smubar.gif) no-repeat; height:39px; padding:10px 0 0 20px; color:#fff; font-weight:bold; font-size:18px;}
.side_classLink { }
.side_classLink ul { padding-top:20px;}
.side_classLink ul li { }
.side_classLink ul li > a{ background:url(../images/cht_dot.gif) no-repeat 20px 4px; padding-bottom:10px; color:#807f7f; font-size:14px; display:block; padding-left:35px; padding-right:30px;}
.side_classLink ul li > a:hover, .side_classLink ul li > a.current { color:#807f7f; text-decoration:underline;}
.side_classLink ul li.current02{ display:none; }
.m_classLink{ display:none;}
.left-info { padding-top:30px; padding-right:10px;}
.left-info-data { margin-bottom:20px; position:relative; background:url(../images/icon01.png) no-repeat 14px 6px; padding:0 10px 8px 34px; color:#4e5591; font-size:13px; font-family:"Times New Roman", serif}
.left-info-data span { font-size:17px; font-family:"微軟正黑體";}
.left-info-data:after { content:""; display:block; position:absolute; bottom:0; left:10px; width:calc(100% - 20px); height:1px;
background: linear-gradient(180deg, #dadcee 0%, #bfc2e6 20px, #bfc2e6 70px, #dadcee 100%);
background: -moz-linear-gradient(180deg, #dadcee 0%, #bfc2e6 20px, #bfc2e6 70px, #dadcee 100%);
background: -webkit-linear-gradient(180deg, #dadcee 0%, #bfc2e6 20px, #bfc2e6 70px, #dadcee 100%);
background: -o-linear-gradient(180deg, #dadcee 0%, #bfc2e6 20px, #bfc2e6 70px, #dadcee 100%);}
.left-info-data a { color:#4e5591;}

h1 { background:url(../images/h1bg.gif) no-repeat; height:39px; font-size:17px; color:#1b246a; padding:10px 0 0 10px;}
.path { text-align:right; padding-bottom:30px; padding-top:10px; padding-right:20px;}
.path li { display:inline-block; vertical-align:top; color:#838383; font-size:12px;}
.path li a { color:#838383;}
.path li a:hover { color:#99a0d8; text-decoration:underline;}
.path li:after { content:">"; display:inline-block; vertical-align:top; padding:0 2px;}
.path li:last-child:after { display:none;}

.main-content { padding:0 20px 0 10px;}
.txt01 { color:#5e69c5;}
.txt02 { color:#0000ff; font-size:16px; font-weight:bold;}

.products-list { display:flex; flex-direction:row; flex-wrap:no-wrap; background:url(../images/cht_pdicon.gif) no-repeat bottom left; padding-top:20px; padding-bottom:10px;}
.products-list > div:first-child { width:233px;}
.products-list > div:first-child img:hover { opacity:0.7;}
.products-list > div:last-child { width:calc(100% - 233px); padding-left:25px;}
.products-list > div:last-child span { color:#5e69c5; display:block; padding-bottom:10px;}

#page { text-align:center; padding-top:10px; text-align:center;}
#page a { display:inline-block; vertical-align:top; font-size:13px; color:#666; padding:0 2px 4px 2px;}
#page a:hover, #page a.current { text-decoration:underline;}

.title01 { display:flex; flex-direction:row; flex-wrap:no-wrap; align-items:center; padding-bottom:10px;}
.title01 > div:first-child { width:51px;}
.title01 > div:last-child { color:#0000ff; font-weight:bold; font-size:14px; padding-left:10px; width:calc(100% - 51px);}

.edit_certificate{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom: 20px;}
.edit_certificate div{ width: calc( 100%/4 - 8px ); position: relative; margin-right: 10px; }
.edit_certificate h4{ text-align: center; margin-top: 10px; }
.edit_certificate div:last-child{ margin-right: 0px; }

/* NEWS */
.news_list{
	float: left;
	width:100%;
	margin-top:20px;
	padding-bottom:10px;
	border-bottom:1px dashed #CCC;
	}	
.news_list_pic{
	float:left;
	margin-right:10px;
	}
.news_list_pic img{	
	border:1px solid #CCC;
	}
.news_list_right{
	float:left;
	}	
.news_list_date{
	float: left;
	margin-right: 5px;
	}
.news_list_date a{
	color:#0157d9;
	font-weight:bold;
	}	
.news_list_subject{
	float: left;
    }	
.news_list_text{
	clear: both;
	float: left;
	margin-top:5px;
	line-height: 22px;
	}

@media only screen and (max-width: 980px) {
nav { order:1; background:none; position:absolute; top:13px; z-index:10; left:0; width:100%;}
.showhide:before { content:"MENU"; display:block; position:absolute; right:17px; bottom:-20px; text-align:right; font-size:12px; color:#fff; width:50px;}
.menuzord-menu > li:nth-of-type(1) { top:auto; right:auto; background:none !important; text-align:left; border-right-width:0; border-bottom:solid 1px rgba(255,255,255,.1);}
.top-right-link { text-align:left; padding-left:10px;}
.top-right-link a { padding-left:0; padding-right:20px;}
.banner { order:2;}
.edit_certificate div{ width: calc(50% - 10px); }
}

@media only screen and (max-width: 768px) {
.main-content-box { flex-direction:column;}
aside { width:100%;}
#main { width:100%;}
.side_classLink, .aside-title, .left-info { display:none;}
.m_classLink{ display:block; position:relative; border-bottom:1px solid #D6D6D6;}
.m_classLink a.main{ display:block; font-size:18px; position:relative; padding: 12px 10px 14px 10px; color:#fff; text-align:left; cursor:pointer; background:rgba(0,0,0,.9);}
.m_classLink a.main i{ display:block; font-size:20px; position:absolute; right:20px; top:50%; margin-top:-11px; color:#fff; font-style:normal; font-family:FontAwesome;}
.m_classLink ul{ display:none; width:100%;  position:absolute; z-index:5; background:#fafafa; border-width:0; border-color:#000; border-style:solid; }
.m_classLink ul li { display:block; margin:0 0; padding:0;}
.m_classLink ul li > a{ background:url(../images/cht_dot.gif) no-repeat 10px 4px; margin:15px 0; color:#807f7f; font-size:16px; display:block; padding-left:25px; padding-right:30px;}
.m_classLink ul li > a:hover, .m_classLink ul li > a.current { color:#807f7f; text-decoration:underline;}
.m_classLink ul li.current02{ display:none; }

.path { text-align:left; padding:10px 10px 30px 10px;}
.main-content { padding-right:10px;}
}
@media only screen and (max-width: 640px) {
	.edit_certificate div{ width: 100%; margin-right: 0px; }
}
@media only screen and (max-width: 570px) {
.products-list { flex-direction:column;}
.products-list > div { width:100% !important;}
.products-list > div:first-child { text-align:center;}
.products-list > div:last-child { padding-left:0px; padding-top:5px;}
}

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

}

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

}