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

/*==banner==*/
.bannerWrap{ width:100%; box-sizing:border-box; position:relative; background:url(../images/bg.jpg) repeat;}
.bannerWrap:after{ content:""; position:absolute; left:0; bottom:-20px; width:100%; height:125px; background:url(../images/banner_hide.png) no-repeat; z-index:10; background-size:cover;}
.bannerWrap ul{ position:relative; z-index:5;}
.bannerWrap img{ width:100%;}

.wrap h2{ display:inline-block; font-size:40px; color:#222; font-weight:normal; letter-spacing:4px;}
.wrap h2>b{ font-size:24px; color:#c77855; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; padding-left:15px; letter-spacing:2px;}


/*==Specialty==*/
.specWrap{ width:100%; background:url(../images/bg.jpg) repeat; box-sizing:border-box; position:relative;} 
.specWrap:after{ content:""; position:absolute; right:80px; bottom:0; width:170px; height:110px; background:url(../images/img_bg01.png) no-repeat;}
.specWrap .wrap{ padding:30px 0 80px 0; text-align:center;}
.specWrap .specBox{ margin-top:45px;}
.specWrap .specBox ul{ margin:0; overflow:hidden;}
.specWrap .specBox ul li{ float:left; width:25%; box-sizing:border-box; padding:0 25px;}
.specWrap .specBox ul li .itemBox{ width:100%; box-sizing:border-box;}
.specWrap .specBox ul li .itemBox .iconBox{ width:250px; height:250px; background:#606060; border-radius:50%; position:relative;}
.specWrap .specBox ul li .itemBox .iconBox .icon{position:absolute; left:50%; top:50%; -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); transition:all 0.2s ease;}
.specWrap .specBox ul li .itemBox .iconBox:hover .icon{ top:45%;}
.specWrap .specBox ul li .itemBox .txtBox{ margin-top:20px;}
.specWrap .specBox ul li .itemBox .txtBox h3{ font-size:24px; color:#333;}
.specWrap .specBox ul li .itemBox .txtBox p{ font-size:14px; color:#666; margin-top:10px; text-align:left;}


/*==Case==*/
.caseWrap{ width:100%; background:url(../images/bg_black.jpg) repeat; box-sizing:border-box; position:relative;} 
.caseWrap:after{ content:""; position:absolute; left:100px; bottom:0; width:130px; height:130px; background:url(../images/img_bg02.png) no-repeat;}
.caseWrap .wrap{ padding:80px 0 50px 0; text-align:center;}
.caseWrap h2{ color:#fff;}
.caseWrap .caseBox{ margin-top:45px;}
.caseWrap .caseBox .itemBox{ float:left; width:33.33%; box-sizing:border-box; padding:0 15px;}
.caseWrap .caseBox .itemBox .imgBox a{ display:block; width:100%;}
.caseWrap .caseBox .itemBox .imgBox img{ display:block; width:100%;}
.caseWrap .caseBox .itemBox .txtBox{ width:100%; padding:30px 5px; box-sizing:border-box;}
.caseWrap .caseBox .itemBox .txtBox h3{ font-size:30px; color:#fff; font-weight:normal; text-align:left; height:40px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.caseWrap .caseBox .itemBox .txtBox p{ font-size:15px; color:#fff; text-align:left; line-height:1.5; text-align:justify; word-wrap: break-word; padding-top:15px; height:115px; overflow:hidden; text-overflow:ellipsis; /*white-space:nowrap;*/}
.caseWrap .caseBox .itemBox .txtBox a.more{ display: inline-block; font-size:12px; border-radius:30px; padding:12px 35px; background:#ffba14; color:#fff; text-align:center; margin-top:30px; transition:all 0.4s ease;}
.caseWrap .caseBox .itemBox .txtBox a.more:hover{ background:#faa500;}
/*.caseWrap .caseBox .itemBox .txtBox a.more:after{ content:""; position:absolute; left:0; top:0; width:0%; height:100%;background:#faa500;border-radius:30px; z-index:10;}
.caseWrap .caseBox .itemBox .txtBox a.more:hover:after{ width:100%;}*/


/*case arrow*/
.caseWrap .slick-prev{ width:40px; height:73px; left:-50px; top:40%;}
.caseWrap .slick-next{ width:40px; height:73px; right:-50px; top:40%;}
.caseWrap .slick-prev:before{ display:block; content:"" !important; width:40px; height:73px; background:url(../images/icon_arrow_left.png) no-repeat;}
.caseWrap .slick-next:before{ display:block; content:"" !important; width:40px; height:73px;background:url(../images/icon_arrow_right.png) no-repeat;}


/*==about==*/
.aboutWrap{ width:100%; background:url(../images/bg.jpg) repeat; box-sizing:border-box; position:relative;} 
.aboutWrap:after{ content:""; position:absolute; right:100px; bottom:0; width:200px; height:99px; background:url(../images/img_bg03.png) no-repeat;}
.aboutWrap .wrap{ padding:100px 100px;}
.aboutWrap .wrap .photoBox{ float:left; width:35%; box-sizing:border-box; background:#fff; padding:10px;}
.aboutWrap .wrap .photoBox img{ display:block; width:100%;}
.aboutWrap .wrap .aboutBox{ float:left; width:65%; box-sizing:border-box; padding: 20px 0 0 100px;}
.aboutWrap .wrap .aboutBox h2{ letter-spacing:2px;}
.aboutWrap .wrap .aboutBox .txtBox{ margin-top:30px;}
.aboutWrap .wrap .aboutBox .txtBox p{ font-size:16px; line-height:1.6; padding-bottom:10px;}
.aboutWrap a.more{ display: inline-block; font-size:12px; border-radius:30px; padding:12px 50px; background:#ffba14; color:#fff; text-align:center; margin-top:30px; transition:all 0.4s ease;}
.aboutWrap a.more:hover{ background:#faa500;}

/*==information==*/
.inforWrap{ width:100%; background:url(../images/bg_black.jpg) repeat; box-sizing:border-box; position:relative;} 
.inforWrap:after{ content:""; position:absolute; left:0px; bottom:0; width:180px; height:150px; background:url(../images/img_bg04.png) no-repeat;}
.inforWrap .wrap{ padding:90px 100px;}
.inforWrap .wrap .inforBox{ float:left; width:65%; box-sizing:border-box;}
.inforWrap .wrap .inforBox h2 img{ display:block;}
.inforWrap .wrap .inforBox .txtBox{ margin-top:30px;}
.inforWrap .wrap .inforBox .txtBox p{ font-size:14px; color:#fff; padding-bottom:10px;}
.inforWrap .wrap .inforBox .txtBox p i{ font-style:normal; padding-right:10px; margin-right:14px; border-right:1px #666 solid;}
.inforWrap .wrap .inforBox .txtBox p a{ display:inline-block; color:#fff; transition:all 0.4s ease;}
.inforWrap .wrap .inforBox .txtBox p a:hover{ color:#faa500;}

.inforWrap .wrap .fbBox{ float:left; width:35%; box-sizing:border-box;}



@media (max-width:1280px){
.bannerWrap:after{ background-size:contain; bottom:-40px;}

.caseWrap .wrap{ width:100%;}
.caseWrap:after{ left:0;}
.caseWrap .slick-prev{ left:10px;}
.caseWrap .slick-next{ right:10px;}

.specWrap:after{ right:0;}
.inforWrap:after{ left:0;}
.inforWrap .wrap .inforBox{ padding-left:150px;}
}

@media (max-width:1200px){
.specWrap .specBox ul li .itemBox .iconBox{ width:200px; height:200px;}	
}

@media (max-width:1034px){
.bannerWrap:after{ height:79px;}
.specWrap .specBox ul li .itemBox .iconBox{ width:200px; height:200px;}
.specWrap .wrap{ padding:30px 30px 80px;}
.specWrap .specBox ul{ margin:0;}

.caseWrap .wrap{ width:90%;}
.caseWrap .caseBox .itemBox .txtBox h3{ font-size:26px; height:35px;}
.caseWrap .caseBox .itemBox .txtBox p{ height:90px;}

.aboutWrap:after{ right:0;}
.inforWrap .wrap .inforBox{ padding-left:80px;}
.aboutWrap .wrap .aboutBox{ padding-top:0;}
}


@media (max-width:980px){

.caseWrap .wrap{ width:88%;}
.caseWrap .caseBox .itemBox .txtBox h3{ font-size:22px; height:30px; }
.caseWrap .caseBox .itemBox .txtBox p{ font-size:14px; height:86px;}
}


@media (max-width:768px){
.specWrap .specBox ul li{ width:50%; padding:0 25px 35px;}
.specWrap .specBox ul li .itemBox .iconBox{ margin:0 auto;}
.specWrap .specBox ul li .itemBox .txtBox p{ height:60px; overflow:hidden; text-overflow:ellipsis;}

.caseWrap .wrap{ width:86%;}
.aboutWrap .wrap{ padding:60px 100px;}
.aboutWrap .wrap .photoBox{ float:none; width:60%; margin:0 auto;}
.aboutWrap .wrap .aboutBox{ float:none; width:80%; padding:20px 0 0 0; text-align:center; margin:0 auto;}
.aboutWrap .wrap .aboutBox .txtBox p{ text-align:left; padding-left:60px;}

.inforWrap:after{ display:none;}
.inforWrap .wrap{ padding:60px 50px;}
.inforWrap .wrap .inforBox{ float:none; width:100%; padding-left:0;}
.inforWrap .wrap .fbBox{ display:none; float:none; width:100%;}
}


@media (max-width:640px){
.caseWrap .slick-prev{ left:-40px;}
.caseWrap .slick-next{ right:-40px;}
.aboutWrap .wrap .aboutBox{ width:100%;} 
}

@media (max-width:480px){
.bannerWrap:after{ height:40px; bottom:-18px;}

.specWrap .wrap{ padding:30px 10px 80px;}
.specWrap .specBox{ margin-top:20px;}
.specWrap .specBox ul li{ padding:0 10px 20px;}

.caseWrap .wrap{ width:80%; margin:0 auto; padding:60px 0 50px;}

.aboutWrap .wrap{ padding:60px 50px;}
.aboutWrap .wrap .photoBox{ width:100%;}
.aboutWrap .wrap .aboutBox h2{ font-size:34px; letter-spacing:1px;}
.aboutWrap .wrap .aboutBox .txtBox p{ padding-left:10px;}

}

@media (max-width:420px){
.wrap h2{ font-size:36px; letter-spacing:3px;}
.specWrap .specBox ul li .itemBox .iconBox{ width:180px; height:180px;}

.aboutWrap:after{ width:100px; height:50px; background-size:cover;}
.aboutWrap .wrap .aboutBox h2>b{ display:block;}

.caseWrap .caseBox{ margin-top:30px;}

.inforWrap .wrap{ padding:40px 50px;}
}

@media (max-width:375px){
.wrap h2{ font-size:30px; letter-spacing:1px;}
.wrap h2>b{ font-size:18px; padding-left:8px;}

.specWrap .specBox ul li{ padding:0 5px 20px;}
.specWrap .specBox ul li .itemBox .iconBox{ width:150px; height:150px;}
.specWrap .specBox ul li .itemBox .iconBox .icon img{ width:100%;}
.specWrap .specBox ul li .itemBox .txtBox{ margin-top:10px;}
.specWrap .specBox ul li .itemBox .txtBox h3{ font-size:20px;}
.specWrap .specBox ul li .itemBox .txtBox p{ margin-top:5px; font-size:13px; line-height:1.4; height:55px;}

.caseWrap .wrap{ width:75%;}
.aboutWrap .wrap{ padding:50px 20px;}
.aboutWrap .wrap .aboutBox .txtBox p{ font-size:14px;}
.aboutWrap a.more{ margin-top:15px;}
}

@media (max-width:320px){
.specWrap .wrap{ padding:30px 10px 50px;}
.specWrap .specBox ul li .itemBox .iconBox{ width:130px; height:130px;}
.specWrap:after{ width:85px; height:55px; background-size:cover;}

.caseWrap .wrap{ padding:40px 0 20px;}
.caseWrap:after{ width:65px; height:65px; background-size:cover;}

.inforWrap .wrap{ padding:30px 20px;}
.inforWrap .wrap .inforBox .txtBox{ margin-top:15px;}

}