@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:960px; margin:0 auto; box-sizing: border-box;}

body{ background-color:#012847;}
.outerWrap{ width:100%; box-sizing:border-box;}
div{ width:100%; box-sizing:border-box;}

/*==banner==*/
.outerWrap{width:100%; box-sizing:border-box;}
.outerWrap{ float:left;}
.outerWrap img{ display:block; width:100%; margin:0 auto;}
.outerWrap{ background-image:none;}

/*introWrap*/
.introWrap{width:100%; box-sizing:border-box; background:url(../images/bg01.jpg) no-repeat left 250px, url(../images/bg02.jpg) no-repeat right 1300px, url(../images/bg03.jpg) no-repeat left 2650px;}
.introWrap .wrap{}
.introWrap .wrap .titleBox{ text-align:center; border-bottom:1px #915f33 solid; padding:30px 0;}
.introWrap .wrap .titleBox img{ display: inline-block; width:82px;}

.introWrap .wrap .conBox{width:100%; box-sizing:border-box; padding:6px 0 30px;}
.introWrap .wrap .col-1{ border-bottom:1px #915f33 solid;}

.introWrap .wrap .conBox .itemBox{ width:100%; box-sizing:border-box; margin-top:24px;}
.introWrap .wrap .conBox .itemBox .leftBox{ float:left; width:50%; box-sizing:border-box; padding-right:12px;}
.introWrap .wrap .conBox .itemBox .rightBox{ float:left; width:50%; box-sizing:border-box; padding-left:12px;}

.introWrap .wrap .conBox .itemBox .txtBox{ width:100%; box-sizing:border-box; margin-top:160px;}
.introWrap .wrap .conBox .itemBox .h-fixed{ height:334px; /*h494-160*/}
.introWrap .wrap .conBox .itemBox .txtBox h3.title01{ width:400px; margin-bottom:20px;}
.introWrap .wrap .conBox .itemBox .txtBox h3.title02{ width:400px; margin-bottom:20px;}
.introWrap .wrap .conBox .itemBox .txtBox h3 img{ display:block; width:100%;}
.introWrap .wrap .conBox .itemBox .txtBox p{ font-size:14px; color:#222; line-height:2;}
.introWrap .wrap .conBox .itemBox .imgBox{ width:100%; box-sizing:border-box;}
.introWrap .wrap .conBox .itemBox .imgBox img{ display:block; width:100%;}
.introWrap .wrap .conBox .itemBox .m24{ margin-top:24px;}


/*==spaceWrap==*/
.spaceWrap{width:100%; box-sizing:border-box; background:#f0f0f0; padding-bottom:70px;}
.spaceWrap .wrap .titleBox{ text-align:center; border-bottom:1px #915f33 solid; padding:30px 0;}
.spaceWrap .wrap .titleBox img{ display: inline-block; width:82px;}
.spaceWrap .wrap .titleBox h2{ width:285px; margin:15px auto 0;}
.spaceWrap .wrap .titleBox h2 img{ display:block; width:100%;}

.spaceWrap .conBox{width:100%; box-sizing:border-box; text-align:center;}
.spaceWrap .conBox b{ display:block; padding:20px 0; font-size:14px; line-height:2;}
.spaceWrap .conBox b.mobile{ display:none;}

.spaceWrap .conBox .linkBox{width:100%; box-sizing:border-box; margin:0 -3px; }
.spaceWrap .conBox .linkBox .col-Box{ float:left; width:33.33%; box-sizing:border-box; padding:0 3px;}


.spaceWrap .conBox .linkBox a{ /*float:left;*/ display:block; width:100%; /*width:33.33%;*/}
.spaceWrap .conBox .linkBox a .itemBox{ position:relative; transition:all 0.4s ease; }
.spaceWrap .conBox .linkBox a .itemBox:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); text-align:center; opacity:0; transition:all 0.4s ease;}
.spaceWrap .conBox .linkBox a .itemBox .inner{ position:absolute; left:50%; top:50%; -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
.spaceWrap .conBox .linkBox a .itemBox .inner img{ display:block; margin:0 auto; opacity:0; transition:all 0.4s ease;}
.spaceWrap .conBox .linkBox a .itemBox:hover:before{ opacity:1;}
.spaceWrap .conBox .linkBox a .itemBox:hover .inner img{ opacity:1;}

.spaceWrap .conBox .linkBox a .itemBox .imgBox{ }
.spaceWrap .conBox .linkBox a .mt6{ margin-top:6px;}
/*.spaceWrap .conBox .linkBox a .h-fix{ height:599px; overflow:hidden;}*/
.spaceWrap .conBox .linkBox a .itemBox .imgBox img{ display:block; width:100%;}

.spaceWrap .conBox .linkBox a .itemBox .leftBox{ float:left; width:50%; box-sizing:border-box; padding-right:3px;}
.spaceWrap .conBox .linkBox a .itemBox .rightBox{ float:right; width:50%; box-sizing:border-box; padding-left:3px;}
.spaceWrap .conBox .linkBox a .itemBox .topBox{}
.spaceWrap .conBox .linkBox a .itemBox .bottomBox{}


/*==cenBN_Wrap==*/
.cenBN_Wrap{width:100%; box-sizing:border-box; background:url(../images/bg04.jpg) no-repeat; background-size:cover;}
.cenBN_Wrap .wrap{ padding:90px 0 140px; text-align:center;}

.cenBN_Wrap .wrap .iconBox{ width:177px; height:112px; margin:0 auto;}
.cenBN_Wrap .wrap .iconBox img{ display:block; width:100%;}
.cenBN_Wrap .wrap p{ display:block; color:#fff; font-size:16px; padding:15px 0;}


/*==aboutWrap==*/
.aboutWrap{width:100%; box-sizing:border-box;}
.aboutWrap .wrap{ padding:70px 0 0;}

.aboutWrap .wrap .conBox{}
.aboutWrap .wrap .conBox .itemBox{ float:left; width:50%; padding-right:60px; box-sizing:border-box;} 
.aboutWrap .wrap .conBox .pad0{ padding-right:0;}
.aboutWrap .wrap h4{ display:inline-block; font-size:24px; color:#915f33; position:relative; margin-bottom:40px;}
.aboutWrap .wrap h4.about{ width:127px;}
.aboutWrap .wrap h4.promise{ width:111px; position:relative; left:-20px;}
.aboutWrap .wrap h4.works{ width:91px; padding-left:10px;}

.aboutWrap .wrap h4:after{ content:""; position:absolute; left:0; bottom:-20px; width:100%; height:1px; background:#915f33;}
.aboutWrap .wrap h4 img{ display:block; width:100%;}
.aboutWrap .wrap .conBox .itemBox p{ font-size:14px; font-weight:bold; color:#222; text-align:justify; line-height:2;}
.aboutWrap .wrap .conBox .itemBox ul li{ width:100%; box-sizing:border-box; position:relative;}
.aboutWrap .wrap .conBox .itemBox ul li:before{ content:"●"; position:absolute; left:-18px; top:0px; color:#915f33; font-size:24px;}


.aboutWrap .wrap .numBox{ padding:30px 0; border:1px #915f33 solid; border-width:1px 0; margin-top:70px;}
.aboutWrap .wrap .numBox ul li{ float:left; width:33.33%; box-sizing:border-box; border-right:1px #915f33 solid; text-align:center;}
.aboutWrap .wrap .numBox ul li:last-child{ border-right:0;}
.aboutWrap .wrap .numBox ul li p{ font-size:15px; color:#222; font-weight:bold; padding:10px 0;}
.aboutWrap .wrap .numBox ul li p b{ font-size:40px; color:#b71c25; padding:0 6px;}


.aboutWrap .wrap .workBox{ margin-top:50px;}
.aboutWrap .wrap .workBox h4{ margin-bottom:30px;}
.aboutWrap .wrap .workBox h4:after{ display:none;}
.aboutWrap .wrap .workBox ul{}
.aboutWrap .wrap .workBox ul li{ float:left; width:33.33%; box-sizing:border-box; padding:0 12px;}
.aboutWrap .wrap .workBox ul li .itemBox{}
.aboutWrap .wrap .workBox ul li .itemBox .imgBox{ position:relative;}
.aboutWrap .wrap .workBox ul li .itemBox .imgBox img{ display:block; width:100%;}
.aboutWrap .wrap .workBox ul li .itemBox .imgBox span{ position:absolute; right:5px; bottom:0; font-size:46px; color:#fff; font-weight:bold; letter-spacing:2px;}
.aboutWrap .wrap .workBox ul li .itemBox .txtBox{ background:#915f33; padding:45px 0; text-align:center;}
.aboutWrap .wrap .workBox ul li .itemBox .txtBox h5{ display:inline-block; font-size:26px; color:#fff; margin-bottom:40px; position:relative;} 
.aboutWrap .wrap .workBox ul li .itemBox .txtBox h5:after{ content:""; position:absolute; left:0; bottom:-20px; width:100%; height:1px; background:#fff;}
.aboutWrap .wrap .workBox ul li .itemBox .txtBox p{ font-size:13px; color:#fff; line-height:1.8;}


/*==contactWrap==*/
.contactWrap{width:100%; box-sizing:border-box; background:url(../images/bg_contact.jpg) no-repeat left bottom; background-size:cover;}
.contactWrap .wrap{ padding:100px 0 90px; text-align:center;}
.contactWrap .wrap .logoBox{ text-align:center;}
.contactWrap .wrap .conBox{ margin-top:50px;}

.contactWrap .wrap .conBox .leftBox{ float:left; width:50%; box-sizing:border-box;}
.contactWrap .wrap .conBox .mapBox{ border:1px #cacaca solid; margin-bottom:20px;}
.contactWrap .wrap .conBox .mapBox ifame{ width:100%; box-sizing:border-box;}
.contactWrap .wrap .conBox .btnBox{ margin-bottom:20px;}
.contactWrap .wrap .conBox .btnBox a{ display:block; background:#915f33; padding:15px 0; text-align:center; font-size:24px; color:#fff; line-height:50px; transition:all 0.4s ease;}
.contactWrap .wrap .conBox .btnBox a:hover{ opacity:0.9;}
.contactWrap .wrap .conBox .btnBox a img{ display:block; width:100%;}
.contactWrap .wrap .conBox .btnBox a.google{ padding:10px 90px;}
.contactWrap .wrap .conBox .btnBox a.tel{ padding:12px 30px;}
.contactWrap .wrap .conBox .btnBox a.fb{ padding:12px 35px;}

.contactWrap .wrap .conBox .btnSUBMIT{ margin-bottom:20px;}
.contactWrap .wrap .conBox .btnSUBMIT a{ display:inline-block; color:#fff; font-size:14px; background:#915f33; border-radius:6px; padding:15px 30px; transition:all 0.4s ease;}
.contactWrap .wrap .conBox .btnSUBMIT a:hover{ opacity:0.9;}
.contactWrap .wrap .conBox .btnSUBMIT a img{ display:block; width:100%;}




.contactWrap .wrap .conBox .rightBox{ float:left; width:50%; box-sizing:border-box; padding-left:25px;}
.contactWrap .wrap .conBox .rightBox .reserveBox{}
.contactWrap .wrap .conBox .rightBox .reserveBox h5{ font-size:30px; color:#915f33; margin:40px 0 20px 0;}
.contactWrap .wrap .conBox .rightBox .reserveBox .conBox{ margin-top:0;}
.contactWrap .wrap .conBox .rightBox .reserveBox .conBox .itemBox{ margin-bottom:15px;}
.contactWrap .wrap .conBox .rightBox .reserveBox .conBox .itemBox input{ width:100%; height:60px; line-height:60px;}
.contactWrap .wrap .conBox .rightBox .reserveBox .conBox .w50 input{ float:left; width:calc(50% - 12px);}
.contactWrap .wrap .conBox .rightBox .reserveBox .conBox .w50 input.phone{ float:right;}
.contactWrap .wrap .conBox .rightBox .reserveBox .conBox .checkBox{ text-align:right;}
.contactWrap .wrap .conBox .rightBox .reserveBox .conBox .checkBox p{ display:inline; font-size:13px;}

.contactWrap input, select, textarea{ border:1px #cacaca solid; box-sizing:border-box; padding:8px 20px; font-size:15px; letter-spacing:1px; font-family:"微軟正黑體" ,Verdana, Geneva, sans-serif; color:#333; -webkit-appearance: none;}
.contactWrap input.check{  -webkit-appearance:checkbox;}
/* 通用 */
::-webkit-input-placeholder { color:#aaa; }
::-moz-placeholder { color:#aaa; } /* firefox 19+ */
:-ms-input-placeholder { color:#aaa } /* ie */
input:-moz-placeholder { color:#aaa; }



/*==footer==*/
footer{ width:100%; box-sizing:border-box;}
footer .txtBox{ padding:60px 0 50px; background:#1a264c; text-align:center;}
footer .txtBox ul{}
footer .txtBox ul li{ float:left; width:33.33%; padding:0 20px; box-sizing:border-box;}
footer .txtBox ul li p{ display:block; font-size:15px; line-height:2; color:#fff; text-align:left;}

footer .copyright{ padding:20px 0; background:#915f33; text-align:center;}
footer .copyright p{ font-size:14px; color:#fff;}







/*==手機板選單==*/
.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:#1a264c; 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:#fff; line-height: 50px;	text-align:center;	background:#1a264c; cursor:pointer; transition:all 0.4s ease;}
.m_menu .controlBox a.main i{ line-height:50px;}
.m_menu .controlBox .m_logo{float:left; width:94px; padding:7px 0;}	
.m_menu .controlBox .m_logo img{ display:block; width:100%;	}

.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:#008993; 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:#915f33; 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{ opacity:0.8;}

.hideBox .copyBox{ width:100%; box-sizing:border-box; padding:0 15px; margin-top:20px;}
.hideBox .copyBox b{ display:block; text-align:center; font-size:16px; color:#915f33;}
.hideBox .copyBox u{ display:block; text-align:center; text-decoration:none; font-size:12px; color:#888; padding-top:10px; line-height:1.5;}



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

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

.bannerWrap{}

.introWrap .wrap .conBox .itemBox .txtBox{ padding-left:50px;}
.introWrap .wrap .conBox .itemBox .h-fixed{ height:359px; /*519-160*/}
.aboutWrap .wrap{ padding:70px 20px 0;}

.contactWrap .wrap .conBox{ padding:0 20px;}
}


@media (max-width:980px){
.introWrap .wrap .conBox .itemBox .txtBox h3.title01{ width:100%;}
.introWrap .wrap .conBox .itemBox .txtBox h3.title02{ width:100%;}

.introWrap .wrap .conBox .itemBox .h-fixed{ height:328px;}	

}

@media (max-width:768px){
.introWrap .wrap .conBox .itemBox .txtBox{ padding-left:20px;}
.introWrap .wrap .conBox .itemBox .txtBox{ margin-top:100px;}
.introWrap .wrap .conBox .itemBox .h-fixed{ height:284px;}
.aboutWrap .wrap{ padding:70px 10px 0;}
.aboutWrap .wrap .workBox ul li{ padding:0 5px;}
.contactWrap .wrap .conBox{ padding:0 10px;}

.spaceWrap .conBox b{ padding:20px 10px;}
.spaceWrap .conBox .linkBox a .itemBox .inner img{ width:50%;}
}


@media (max-width:640px){
.introWrap .wrap { padding:0 20px;}
.introWrap .wrap .conBox .itemBox .txtBox{ margin-top:80px;}
.introWrap .wrap .conBox .itemBox .h-fixed{ height:237px;}

.introWrap .wrap .conBox .itemBox .leftBox{ float:none; width:100%; padding-right:0;}
.introWrap .wrap .conBox .itemBox .rightBox{float:none; width:100%; padding-left:0; margin-top:20px;}

.introWrap .wrap .conBox .itemBox .txtBox{ margin-top:0; padding:60px 20px;}
.introWrap .wrap .conBox .itemBox .txtBox p{ text-align:center;}
.introWrap .wrap .conBox .itemBox{ margin-top:20px;}
.introWrap .wrap .conBox .itemBox .imgBox{}

.introWrap .wrap .conBox .itemBox .h-fixed{ height:auto;}
.introWrap .wrap .conBox .itemBox .txtBox h3.title01{ width:80%; margin:0 auto 30px;}
.introWrap .wrap .conBox .itemBox .txtBox h3.title02{ width:80%; margin:0 auto 30px;}

.aboutWrap .wrap{ padding:70px 20px 0;}
.aboutWrap .wrap h4{ display: inline-block;}
.aboutWrap .wrap .conBox .itemBox{ float:left; width:100%; padding:0 0 50px 0; text-align:center;}
.aboutWrap .wrap .conBox .itemBox ul li{ padding-left:20px;}
.aboutWrap .wrap .conBox .itemBox ul li:before{ left:0;}

.aboutWrap .wrap .numBox{ margin-top:20px; padding:50px 0;}
.aboutWrap .wrap .numBox ul li{ float:none; width:100%; border-right:0;}


.aboutWrap .wrap .workBox{ text-align:center;}
.aboutWrap .wrap .workBox ul li{ float:none; width:100%; margin-bottom:20px; padding:0;}
.contactWrap .wrap .conBox .leftBox{ float:none; width:100%;}
.contactWrap .wrap .conBox .rightBox{ float:none; width:100%; padding-left:0;}

.spaceWrap{ padding-bottom:40px;}
.spaceWrap .wrap .titleBox{ border-bottom:0; padding:30px 0 0;}
.spaceWrap .conBox .linkBox .col-Box{ float:none; width:100%; margin-top:6px;}
.spaceWrap .conBox .linkBox{ margin:0; padding:0 20px;}

.spaceWrap .conBox b.pc{ display:none;}
.spaceWrap .conBox b.mobile{ display:block;}


.cenBN_Wrap .wrap{ padding:70px 0 100px;}

.contactWrap .wrap .conBox{ padding:0 20px;}
.contactWrap .wrap .conBox .reserveBox .conBox{ padding:0;}

footer .txtBox ul li{ float:none; width:100%;}
footer .txtBox ul li b{ text-align:center;}
}

@media (max-width:480px){
.outerWrap{ height:100vh; background-image: inherit; background-size: contain; background-repeat:no-repeat;}	
.outerWrap img{ display:none;}
}


@media (max-width:420px){

.introWrap .wrap .conBox .itemBox .txtBox{ padding:40px 20px;}	

.contactWrap .wrap .logoBox{ width:60%; margin:0 auto;}
.contactWrap .wrap .logoBox img{ display:block; width:100%;}
.contactWrap .wrap .conBox{ margin-top:30px;}
}

@media (max-width:375px){
.introWrap .wrap{ padding:0 10px;}	
.introWrap .wrap .conBox .itemBox{ margin-top:10px;}
.introWrap .wrap .conBox .itemBox .rightBox{ margin-top:10px;}
.spaceWrap .conBox .linkBox{ padding: 0 10px;}

.cenBN_Wrap .wrap{ padding:50px 0 60px;}
.cenBN_Wrap .wrap b{ padding:15px 10px;}
.aboutWrap .wrap{ padding:50px 10px 0;}
.aboutWrap .wrap .workBox ul li{ margin-bottom:10px;}

.contactWrap .wrap{ padding:70px 0 50px;}
.contactWrap .wrap .conBox{ padding:0 10px;}
.contactWrap .wrap .conBox .btnBox a.google{ padding:10px 50px;}
.contactWrap .wrap .conBox .btnBox{ margin-bottom:12px;}

.contactWrap .wrap .conBox .rightBox .reserveBox .conBox .itemBox{ margin-bottom:10px;}
.contactWrap .wrap .conBox .rightBox .reserveBox .conBox .w50 input{ width:calc(50% - 5px);}
}