@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{ font-family: Arial, Helvetica, sans-serif, "微軟正黑體";}
.outerWrap{ width:100%;}


/*==header==*/
header{ width:100%; background:#F7F7F7; box-sizing:border-box;}
header .wrap{ padding:15px 0;}
header h1{ float:left; width:350px; box-sizing:border-box; }
header h1 a{ display:block; width:375px; height:80px; background:url(../images/logo.png) no-repeat; text-indent:-9999px;}

header nav.menu{float:right; width:calc(100% - 350px); height:80px; box-sizing:border-box; text-align:right;}
header nav.menu ul{ margin-top:50px; text-align:right; box-sizing:border-box; padding-right:30px;}
header nav.menu ul li{ font-family:微軟正黑體; display:inline-block; box-sizing:border-box; padding-left:30px;}
header nav.menu ul li a{ display:block; font-size:19px; text-align:center; color:#9797A5; box-sizing:border-box; padding:0 5px 8px;}
header nav.menu ul li a:hover{ color:#FB7087; transition:all 0.4s ease; font-weight:bold; text-decoration:underline;}
header nav.menu ul li a:after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#FB7087; transition:all 0.4s ease;}
header nav.menu ul li a:hover:after{ width:100%;}


header nav.menu .searchBox{ position:absolute; right:30px; top:15px;}
header nav.menu .searchBox input{ width:200px; background:#fff; border:0; padding:2px 10px; color:#333; font-size:14px; font-family:"微軟正黑體"; box-sizing: border-box;}
/* 通用 */
::-webkit-input-placeholder { color:#888; }
::-moz-placeholder { color:#888; } /* firefox 19+ */
:-ms-input-placeholder { color:#888; } /* ie */
input:-moz-placeholder { color:#888; }

header nav.menu .searchBox .search{  display:inline-block; background:#fff; margin-right:10px; padding-right:5px;}
header nav.menu .searchBox .search a{ display:inline-block;}

header nav.menu  .mapBox{text-decoration:none; display:inline-block; float:right;}
header nav.menu  .mapBox a{ display:inline-block; font-size:15px; color:#757584;}
header nav.menu  .mapBox a:hover{ font-weight:bold;}



/*==footer==*/
#footer{ width:100%; background:#FADEE6; box-sizing:border-box; font-family:微軟正黑體;}
#footer .wrap{ padding:35px 0; text-align:center;}
#footer{
	clear:both;
	color:#DF4C84;
	text-align:center;
	background-color: #FADEE6;
	padding:5em 0;
	line-height: 2;
	margin-top: 20px;
	}
#footer h3{
	font-size: 13px;
	margin: 30px 0;
	}
#footer h4{ font-size:17px; font-weight:bold;}

footer .copy_m{ display:none; width:100%; text-align:center; padding:10px 0;}
footer .copy_m p{font-size:14px; color:#DF4C84; line-height:1.8;}


/*==手機板選單==*/
.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:#F7F7F7; 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:#f92649; 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:180px; padding-top:5px;}

.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:#FB7087; padding:10px 0; border-bottom:1px #eee dotted;}
.m_menu ul.nav li .submenu a>b{ display:block; font-size:12px; font-weight:normal; color:#888;}

.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:#f92649; color:#fff; border-radius:50%; transition:all 0.4s ease;}
.m_menu .m_funBox a.youtube i{ font-size:24px;}
.m_menu .m_funBox a i{ line-height:35px;}
.m_menu .m_funBox a:hover{  background:#FF2626;}


/*==內頁共用==*/
.bannerWrap img{ width:100%;}
.insideWrap{ width:100%; box-sizing:border-box; padding:0 0 80px 0;}
.insideWrap .ins_bn{ width:100%; height:600px; background-image:url(../images/0510_banner.jpg); background-position:center center; background-repeat:no-repeat;}
.breadcrumb{ width:100%; box-sizing:border-box; padding:20px 0 0; text-align:right;}
.breadcrumb p{ font-size:15px; color:#ff7575;}
.breadcrumb p a{ display:inline-block; font-size:15px; color:#ff7575; transition:all 0.4s ease;}
.breadcrumb p a:hover{color:#C36;}
.breadcrumb p span{ padding:0 10px;}

.ins_titleBox{ width:100%; text-align:center; padding:10px 0 20px;}
.ins_titleBox h2{ font-size:25px; color:#f00078; padding-bottom:10px;}
.ins_titleBox b{font-size:21px; color:#ff7575;}

.ins_navBox{ width:100%; text-align:center; padding:10px 0 20px;}
.ins_navBox ul{ display:inline-block;}
.ins_navBox ul li{ float:left; padding:0 15px;}
.ins_navBox ul li a{ display:block; font-size:16px; color:#001750; font-weight:bold; padding:0 5px; transition:all 0.4s ease;}
.ins_navBox ul li a:hover{ color:#f65356;}
.ins_navBox ul li a.active{color:#f65356; position:relative;}
.ins_navBox ul li a.active:before{ content:""; position:absolute; left:0; bottom:-10px; width:100%; height:2px; background:#f65356;}
.ins_navBox ul li a.active:after{ content:""; position:absolute; left:50%; bottom:-20px; width:0; height:0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #f65356 transparent transparent transparent; margin-left:-10px;}

.contentWrap{ width:90%; padding:40px 0 0 0;}

.interWrap .wrap .TitleBox h3{margin:0 auto; text-align:center; font-size:25px; color:#FF7373; font-family:Arial, Helvetica, sans-serif; font-family:微軟正黑體;}
.interWrap .wrap .TitleBox img{ margin-bottom:20px; text-align:center; width:100%;}
.insideWrap .wrap .TitleBox{margin-top:10px;}
.insideWrap .wrap .TitleBox h3{margin:0 auto; text-align:center; font-size:25px; color:#FF7373; font-family:Arial, Helvetica, sans-serif; font-family:微軟正黑體;}
.insideWrap .wrap .TitleBox img{ margin-bottom:20px; text-align:center; width:100%;}

/*goTop*/
.goTop{ position:fixed; right:2%; bottom:5%; z-index:99; }
.goTop a{ display:block; width:40px; height:40px; line-height:40px; border-radius:50%; transition:all 0.4s ease; background:#FB7087; color:#fff; text-align:center; position:relative;}
.goTop a i{ color:#fff; font-size:20px; position:absolute; left:50%; top:50%; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.goTop a:hover{ opacity:0.7;}

/*==頁碼==*/
.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:#777; font-size:15px; padding:0 5px; transition:all 0.4s ease;}
.pageBox ul li a:hover{ color:#fa875b;}
.pageBox ul li a.active{ color:#fa875b;}
.pageBox ul li a.function{ font-size:12px; background:#FB7087; color:#fff; border-radius:2px; padding:3px 5px;text-transform:uppercase;}
.pageBox ul li a.function:hover{ background:#FF2626;}


/*手機板次選單*/
.subNavWrap{ width:100%; box-sizing:border-box; padding:0 20px;}
.subNav{ display:none; width:100%; cursor:pointer; position:relative; box-sizing:border-box;}
.subNav a.main{ display:block; font-size:15px; color:#fff; background:#4e557f; padding:10px 20px; border-radius:4px 4px 0 0; position: relative;}
.subNav a.main b{ color:#fff; letter-spacing:2px;}
.subNav a.main i{ display:block; color:#fff; font-size:15px; position:absolute; right:10px; top:50%; margin-top:-6px;}
.subNav ul{ display:none; width:100%; background:#fff; border:1px #ddd solid; position:absolute; left:0; top:100%; z-index:99; box-sizing:border-box; padding:5px 0; border-bottom:2px #ddd solid;}
.subNav ul li a{ display:block; font-size:15px; color:#666; padding:5px 20px; border-top:1px #ddd solid; transition:all 0.4s ease;}
.subNav ul li a.active{color:#f65356; font-weight:bold;}
.subNav ul li a:hover.active{color:#f65356; padding:5px 20px;}
.subNav ul li:first-child a{ border-top:0;}
.subNav ul li a:hover{color:#4e557f; padding:5px 25px;}

@media (max-width:1200px){
.wrap{ width:100%;}
}

@media (max-width:1090px){
header nav.menu ul li{ padding-left:20px;}	
}

@media (max-width:1034px){
.wrap{ width:100%;}
header{ display:none;}
.m_menu{display:block;}

footer .wrap{ padding:35px 0 35px 20px;}
footer .wrap .navBox{ margin-left:80px;}

.breadcrumb{ padding-right:20px;}
.insideWrap .ins_bn{ margin-top:50px;}
}


@media (max-width:980px){
footer .wrap .navBox{ margin-left:50px;}	
}

@media (max-width:768px){
footer .wrap .inforBox{ display:none;}
footer .wrap .logoBox{ width:50%;}
footer .wrap .navBox{ width:50%; margin:40px 0 0 0; padding-left:40px; box-sizing:border-box;}
footer .wrap .navBox ul li{ float:left; width:50%; box-sizing:border-box; padding:5px 0px;}
footer .copy_m{ display:block;}

.ins_navBox{ display:none;}
.subNav{ display: block;}
.ins_titleBox{ padding:10px 0 15px;}
}


@media (max-width:640px){

}

@media (max-width:480px){
footer { background:#FFF;}
footer .wrap{ display:none;}
footer .copy_m{ padding:20px 0;}


.breadcrumb{ display:none;}
.ins_titleBox{ padding:20px 0 10px;}	

.insideWrap .ins_bn{ height:100px;}
.subNavWrap{ padding:0 15px;}
}

@media (max-width:420px){
footer .copy_m p{ font-size:13px;}
}

@media (max-width:375px){
.ins_titleBox h2{ font-size:24px;}
.subNavWrap{ padding:0 10px;}
}