@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;}

body{}
.outerWrap{ width:100%;}

/*==內頁共用==*/
.insideWrap{ width:100%; background:url(../images/bg.jpg) repeat; box-sizing:border-box; padding:80px 0;}
.insideWrap .titleWrap{ width:100%; box-sizing:border-box;}
.insideWrap .titleWrap .breadBox{ width:100%; padding:0 15px 15px; box-sizing:border-box;}
.insideWrap .titleWrap .breadBox p{ font-size:14px; color:#333;}
.insideWrap .titleWrap .breadBox p a{ display:inline-block; color:#333; transition:all 0.4s ease;}
.insideWrap .titleWrap .breadBox p a i{ padding-right:2px;}
.insideWrap .titleWrap .breadBox p a:hover{ color:#ffba14;}
.insideWrap .titleWrap .breadBox p span{ padding:0 7px;}
.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:#333; box-sizing:border-box;}
header .wrap{ border-bottom:1px #6f6f6f solid; padding:30px 0;}
header h1{ float:left; width:300px; box-sizing:border-box; }
header h1 a{ display:block; width:250px; height:70px; background:url(../images/logo.png) 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 30px;}
header nav.menu ul li a{ display:block; font-size:17px; text-align:center; color:#fff; box-sizing:border-box; padding:0 5px 10px; position:relative;}
header nav.menu ul li a:hover{ color:#aaa; 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;}



/*==footer==*/
footer{ width:100%; background:url(../images/bg.jpg) repeat; box-sizing:border-box;}
footer.black{ background:url(../images/bg_black.jpg) repeat;}
footer .wrap{ padding:35px 0; text-align:center;}
footer .wrap p{ font-size:14px; color:#666; letter-spacing:2px;}
footer .wrap p br{ display:none;}
footer.black .wrap p{ color:#bbb;}

/*==手機板選單==*/
.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;}
.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:160px; padding-top:1px;}

.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:#4c9900; 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;}


/*==socialBox==*/
.socialBox{ margin-top:40px;}
.socialBox .linkBox{ float:left; box-sizing:border-box; margin-right:15px;}
.socialBox .linkBox a{ display:block; text-align:center; transition:all 0.4s ease;}
.socialBox .linkBox a:hover{ opacity:0.8;}
.socialBox .linkBox a.fb{ color:#355089;}
.socialBox .linkBox a.fb i{ color:#355089; font-size:38px;}
.socialBox .linkBox a.fb b{ display:block; text-align:center; font-size:14px;}
.socialBox .linkBox a.youtube{ color:#555;}
.socialBox .linkBox a.youtube i{ color:#cc3737; font-size:38px;}
.socialBox .linkBox a.youtube b{ display:block; text-align:center; font-size:14px; letter-spacing:0;}


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


@media (max-width:1034px){
.wrap{ width:100%;}
header .wrap{ padding:30px 20px;}
header h1{ width:250px;}
header h1 a{ width:250px;}
header nav.menu{ width:700px; padding:15px 0 0 70px; }
header nav.menu ul li{ padding:0 15px;}

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


@media (max-width:980px){
header nav.menu{ width:600px; 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;}

.socialBox{ margin-top:20px;}
}


@media (max-width:640px){

}

@media (max-width:480px){
.insideWrap{ padding:0 !important;}
.insideWrap .titleWrap .breadBox{ display:none;}
.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;}

footer .wrap{ padding:20px 0;}
footer .wrap p{ line-height:1.4;} 
footer .wrap p br{ display:block;}	
}

@media (max-width:420px){

}

@media (max-width:375px){
footer .wrap p{ font-size:12px;}
}