@charset "utf-8";
/* CSS Document */

@import url(reset.css);
@import url(fontawesome/css/font-awesome.min.css);

.clearfix:after {content: "."; display: block; clear: both; visibility: hidden;	line-height: 0;	height: 0;}
h1, h2, h3, h4, h5, h6, p, b, i, a, u, strong{ font-family: Arial, Helvetica, sans-serif, "微軟正黑體"; letter-spacing:1px;}

/*.wrap{ width:1200px; margin:0 auto; box-sizing: border-box;}*/
.wrap{ width:1200px;margin:0 auto; box-sizing: border-box;}

body{}
.outerWrap{ width:100%;  background-image:url(../images/bg.jpg); background-repeat:repeat;}

/*==內頁共用==*/
.insideWrap{ width:100%; box-sizing:border-box; padding:30px 0; background-image:url(../images/ins_bg.jpg); background-repeat:no-repeat; background-position:top center;}
.insideWrap .titleWrap{ width:100%; box-sizing:border-box;}
.insideWrap .titleWrap .breadBox{ float: right;}
.insideWrap .titleWrap .breadBox p{ font-size:14px; color:#464652;}
.insideWrap .titleWrap .breadBox p a{ display:inline-block; color:#00238C; transition:all 0.4s ease;}
.insideWrap .titleWrap .breadBox p a i{ padding-right:2px;}
.insideWrap .titleWrap .breadBox p a:hover{ color:#464652;}
.insideWrap .titleWrap .breadBox p span{ padding:0 7px;}
.insideWrap .titleWrap .titleBox{ width:100%; text-align: center;}

/*.insideWrap .titleWrap .titleBox{ width:100%; height:165px; position:relative;}
.insideWrap .titleWrap .titleBox h2{ position:absolute; right:115px; top:50%; -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%); font-size:30px; color:#fff; font-weight:normal; text-align:right;text-shadow: 1px 1px rgba(0,0,0,0.2),2px 2px rgba(0,0,0,0.2),3px 3px rgba(0,0,0,0.2);font-family:Georgia, "Times New Roman", Times, serif;}
.insideWrap .titleWrap .titleBox h2 b{ display:block; font-size:18px; font-weight:normal; letter-spacing:3px;}*/


/*==header==*/
header{ width:100%; background-color:#fff; box-sizing:border-box; border-bottom: 5px solid #00238C;}
header .wrap{ padding:15px 0;}
header h1{ float:left; width:300px; box-sizing:border-box; }
header h1 a{ display:block; width:450px; height:50px;margin:10px 0 0 30px; background:url(../images/logo.jpg) no-repeat; text-indent:-9999px;}

header nav.menu{float:right; width:900px; box-sizing:border-box; padding:15px 0 0 80px;}
header nav.menu ul li{ float:left; box-sizing:border-box; padding:0 20px;}
header nav.menu ul li a{ display:block; font-size:21px; text-align:center; color:#2C2C2C; box-sizing:border-box; padding:0 5px 10px; position:relative;}
header nav.menu ul li a:hover{ font-weight:bold; transition:all 0.4s ease;}
header nav.menu ul li a:after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#ffba14; transition:all 0.4s ease;}
header nav.menu ul li a:hover:after{ width:100%;}
header nav.menu ul li a>b{ display:block; font-size:14px; font-weight:normal; color:#aaa; font-family:Georgia, "Times New Roman", Times, serif; opacity:0; transition:all 0.4s ease; padding-bottom:4px;}
header nav.menu ul li a:hover b{ opacity:1;}

header .linkBox{ position: absolute; right:10px; top:8px;}
header .linkBox ul li{ float:left; border-right:1px #646473 solid;}
header .linkBox ul li:last-child{ border:none;}
header .linkBox ul li a{ display:block; color:#646473; font-size:14px; padding:3px 10px; transition:all 0.4s ease;}
header .linkBox ul li a:hover{ opacity:0.8;}

/*==SEARCH==*/
.searchWrap{ width:100%;}
.searchWrap .wrap{width:100%; padding:0 25px; box-sizing: border-box; }
.searchWrap .searchBar{ width:100%;}
.searchWrap .searchBar .inputBox{ float:left; width:75%; box-sizing: border-box; border-radius:5px 0 0 5px; border:1px #22ac38 solid;}
.searchWrap input{font-family: Arial, Helvetica, sans-serif, "微軟正黑體"; letter-spacing:1px; color:#666; font-size:15px; border:none; padding:2px 10px; width:100%;}

.searchWrap .searchBar a.searchBtn{ float:left; width:25%; text-align:center; color:#fff; box-sizing: border-box; background:#22ac38;border-radius:0 5px 5px 0; padding:2px 0; transition:all 0.4s ease;}
.searchWrap .searchBar a.searchBtn:hover{ background:#4ebb60;}


/*==頁碼==*/
.pageBox{ width:100%; margin:50px auto 50px 0; text-align:center;}
.pageBox ul{ display:inline-block; margin-bottom:50px;}
.pageBox ul li{ float:left; padding:0 2px; box-sizing: border-box;}
.pageBox a{ display:inline-block; color:#666; font-size:15px; padding:0 5px; transition:all 0.4s ease;}
.pageBox a:hover{ color:#f18a00;}
.pageBox a.active{ color:#ff3e00;}
.pageBox a.function{ font-size:12px; background:#ff3e00; color:#fff; border-radius:2px; padding:3px 5px;text-transform:uppercase;}
.pageBox a.function:hover{ background:#f18a00;}



/*==footer==*/
.btLin{ width:100%; background-color: #00238C; box-sizing:border-box;height:2px;}
footer{ width:100%; background-color: #fff; box-sizing:border-box;}
footer .wrap h4{ float:left; width:100%; text-align:center; margin:10px 0;}
footer .wrap  p{ color:#2C2C2C; font-size:14px; text-align:center;}
footer .wrap  p a.mail{ text-decoration:none; color:#2C2C2C;}

/*==手機板選單==*/
.m_menu{display:none; width:100%; box-shadow:0 2px 5px rgba(126, 126, 126, 0.68);	position:fixed;	top:0; left:0; z-index:9999;}
.mask{display:none;	background:rgba(0,0,0,0.6);	position:fixed;	width:100%;	height:100%; padding-bottom:60px; top:0; left:0; z-index:10;}
.m_menu .controlBox{ background:#fff; position:relative; z-index:99; border-bottom: 5px solid #00238C;}
.m_menu .controlBox a.main{	display: block;	float: left; margin-right:5px; width: 50px; height: 50px;	font-size: 20px; color:#333; line-height: 50px;	text-align:center;	background:#fff; cursor:pointer; transition:all 0.4s ease;}
.m_menu .controlBox a.main i{ line-height:50px;}
.m_menu .controlBox .m_logo{float:left;}	
.m_menu .controlBox .m_logo img{ display:block;	width:100%;margin-top:10px;}

.m_menu .hideBox{/*手機menu內容*/	background:#fbfbfb; width:230px; padding:50px 0;overflow-y:auto; -webkit-overflow-scrolling:touch; position:fixed; left:-230px;	top:0;	bottom:0; z-index:11; transition:all 0.4s ease;	box-sizing:border-box;}
.m_menu .hideBox.show{left:0;}

.m_menu ul.nav{}
.m_menu ul.nav li{ border-top:1px #ddd solid;}
.m_menu ul.nav li a{ display:block; font-size:15px; color:#222; text-align:center; position:relative; padding:15px 0;}
.m_menu ul.nav li a i{ display:block; position:absolute; right:20px; top:50%; margin-top:-7px;}
.m_menu ul.nav li .submenu{ display:none;}
.m_menu ul.nav li .submenu a{ font-size:14px; color:#00238C; padding:10px 0; border-bottom:1px #eee dotted;}

.m_menu .m_funBox{ width:100%; text-align:center; box-sizing:border-box; margin-top:50px;}
.m_menu .m_funBox a{ display:inline-block; width:35px; height:35px; line-height:35px; text-align:center; font-size:18px; background:#666; color:#fff; border-radius:50%; transition:all 0.4s ease;}
.m_menu .m_funBox a i{ line-height:35px;}
.m_menu .m_funBox a:hover{  background:#777;}



@media (max-width:1175px){
.wrap{ width:100%;}
/*header .wrap{ padding:30px 20px;}*/
header h1{ width:300px;}
header h1 a{ width:300px;background:url(../images/logo_300.jpg) no-repeat; text-indent:-9999px;}
header nav.menu{ width:600px; padding:15px 0 0 50px; }
header nav.menu ul li{ padding:0 15px;}

/*.insideWrap{ padding:15px 0 0 0 !important;}*/

footer .wrap .leftBox{ float:none; width:100%; text-align:center;margin-top:10px;padding-left: 10px;}
footer .wrap .rightBox{ float:none;width:100%; text-align:center;}
footer .wrap .rightBox .rightMenu{ float:none;width:100%; text-align:center;margin-left: 0px;}
footer .wrap .rightBox .rightList{ display:none;}

}
/*goTop*/
.goTop{ position:fixed; right:40px; bottom:40px;  z-index:999;}
.goTop a{ display:block; width:48px; height:48px; border-radius:50%; background:url(../images/icon_up.png) #8a8a8a no-repeat 0px 0px; text-indent:-9999px; transition:all 0.4s ease; }
.goTop a:hover{ background:url(../images/icon_up.png) #111 no-repeat 0px 0px; }

@media (max-width:980px){
header nav.menu{ width:420px; padding:15px 0 0 20px; }
header nav.menu ul li{ padding:0 10px;}	

}

@media (max-width:768px){
header{ display:none;}
.m_menu{display:block;}
.bannerWrap{ margin-top:50px;}
/*.insideWrap{ margin-top:50px;}*/
footer .wrap .leftBox{ float:none; width:100%; text-align:center;margin-top:10px;}
footer .wrap .rightBox{ float:none;width:100%; text-align:center;}
footer .wrap .rightBox .rightMenu{ float:none;width:100%; text-align:center;margin-left: 0px;}
footer .wrap .rightBox .rightList{ display:none;}

#prodlist {display:none;}

}


@media (max-width:640px){
.insideWrap .titleWrap .breadBox{ display:none;}
}

@media (max-width:480px){
.insideWrap{ padding:0 !important;}
.insideWrap .titleWrap .breadBox{ display:none;}
.insideWrap{ margin-top:50px;}
/*.insideWrap .titleWrap .titleBox h2{ width:100%; font-size:36px; text-align:center; left:50%; right:inherit; -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); z-index:10;}
.insideWrap .titleWrap .titleBox:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:1;}*/
.pageBox{ padding-bottom:20px;}

footer .wrap{ padding:20px 0;}
footer .wrap p{ line-height:1.4;} 
footer .wrap p br{ display:block;}	
footer .wrap .bottom2{ width:90%;}
footer .wrap .bottom2 a{ text-align:center; color:#333;}
footer .wrap .leftBox{ float:none; width:100%;}
footer .wrap .rightBox{ float:none;width:100%;}
footer .wrap .rightBox .rightMenu{ float:none;width:100%;}
footer .wrap .rightBox .rightList{ float:none;width:100%;}
footer .wrap .leftBox .btLogo {width:80%;}
}

@media (max-width:420px){
.m_menu .controlBox .m_logo img{ display:block;	width:280px;margin-top:10px;}
footer .wrap .leftBox .btLogo {width:60%;}
footer .wrap .rightBox .rightMenu h2{ color:#fff;font-size: 12px;}
}

@media (max-width:391px){
.m_menu .controlBox .m_logo img{ display:block;	width:280px;margin-top:10px;}
}

@media (max-width:375px){
footer .wrap p{ font-size:12px;}
footer .btLogo {width:90%;}
.m_menu .controlBox .m_logo img{ display:block;	width:240px;margin-top:10px;}
}