﻿@charset "utf-8";

/*header*/

/*other*/
@media screen and (max-width: 1650px){
	.cus_main .section4 .imgs .cir{width: 130px; height: 130px; top: -50px;}
	.cus_main .section4 .imgs .it:nth-of-type(1) .cir{left: -170px;}
	.cus_main .section4 .imgs .it:nth-of-type(1) .cir:before{left: 130px;}
	.cus_main .section4 .imgs .it:nth-of-type(2) .cir{left: 85px;}
	.cus_main .section4 .imgs .it:nth-of-type(2) .cir:before{right: 130px; width: 55px;}
	.cus_main .section4 .imgs .it:nth-of-type(3) .cir{left: 130px;}
	.cus_main .section4 .imgs .it:nth-of-type(3) .cir:before{right: 130px; width: 100px;}
	.common_section3 .item{margin-bottom: 30px;}
	.big_title h3{font-size: 34px;}
	.big_title p{font-size: 16px; line-height: 26px;}
	.center_title{padding: 30px;}
	.center_title h3{font-size: 28px;}
	.center_title p{margin-top: 10px; line-height: 26px;}
	.cus_main .section2 .left .txt{margin-top: 8vh;}
	.cus_main .section2 .left img{width: 30%;}
	.cus_main .section3 .right .txt{margin-bottom: 8vh;}
	.cus_main .section4 .txt_block .txt h3{font-size: 28px;}
	.cus_main .section4 .txt_block .txt p{font-size: 16px; line-height: 26px; margin-top: 30px;}
	.cus_main .section4 .txt_block .btns{margin-top: 5vh;}
	.cus_main .section4 .imgs{width: 20vw;}
	.cus_main .section4 .control{width: 30vw;}
	.cus_main .section4 .control .num p{font-size: 14px;}
	.cus_main .section4 .control .num span{font-size: 40px;}
	.intro_main .section3 .block h3{font-size: 28px;}
	.intro_main .section3 .block p{font-size: 16px; line-height: 26px;}
	.intro_main .section3 .txt_block{width: 30vw;}
	.intro_main .section3 .desk{width: 38vw;}
	.cs_title h3{font-size: 28px;}
	.recruit_main .section3 .txt_block .item h3{font-size: 28px; margin: 30px 0;}
	.recruit_main .section3 .txt_block .item p{font-size: 14px; line-height: 20px;}
	.recruit_main .section3 .txt_block .item a{width: 120px; line-height: 30px; margin-top: 15px;}
	.recruit_main .section3 .num{bottom: 5%;}
	.index_main .section2 .lamp{top: -22%;}
	.index_main .section3 .right h3{font-size: 28px;}
	.index_main .section3 .right p{line-height: 26px;}
	.index_main .section3 .img_block{margin: 3vh auto; width: 24vw;}
	.index_main .section4 .left h3{font-size: 28px;}
	.index_main .section4 .left p{line-height: 26px;}
	.index_main .section4 .left .img_block{width: 40vw; margin-top: 5vh;}
	.index_main .section5 .left .slogin{font-size: 20px; line-height: 30px;}
	.index_main .section5 .left h3{font-size: 28px;}
	.index_main .section5 .left p{line-height: 26px;}
	.index_main .section5 .big_slick .txt{top: 4vw;}
	.index_main .section5 .big_slick .txt h3{font-size: 20px;}
	.index_main .section5 .big_slick .txt p{line-height: 26px; margin: 10px 0 30px; font-size: 14px;}
	.index_main .section6 .left .top h3{font-size: 28px;}
	.index_main .section6 .left .top p{line-height: 26px;}
	.index_main .section6 .left .bot p{margin-top: 15px;}
	.index_main .section6 .center .box{margin-top: 20px;}
}
@media screen and (max-width: 1500px){
	.big_title h3{font-size: 28px;}
	.cus_main .section1 .left{padding-right: 3vw;}
	.big_title .mouse{margin-top: 60px;}
	.center_title h3{font-size: 24px;}
	.center_title p{font-size: 14px; line-height: 22px;}
	.cus_main .section4 .txt_block .txt h3{font-size: 24px;}
	.cus_main .section4 .txt_block .txt p{font-size: 14px; line-height: 22px;}
	.intro_main .section2 .left_img{width: 90%; margin: 0 auto;}
	.intro_main .section3 .block h3{font-size: 24px;}
	.common_section3 .item{margin-bottom: 20px;}
	.cs_title h3{font-size: 24px;}
	.recruit_main .section3 .txt_block .item h3{font-size: 24px; margin: 20px 0;}
	.index_main .section3 .right h3{font-size: 24px;}
	.index_main .section4 .left h3{font-size: 24px;}
	.index_main .section5 .left .slogin{font-size: 18px; line-height: 26px;}
	.index_main .section5 .left h3{font-size: 24px;}
	.index_main .section6 .left .top h3{font-size: 24px;}
	.index_main .section6 .left .bot p{font-size: 14px;}
	.index_main .section2 .desk{width: 50vw; width: -5vw;}
	.index_main .section2 .lamp{width: 15vw;}
	.index_main .section4 .left .img_block{width: 36vw;}
}
@media screen and (max-width: 1200px){
	.big_title h3{font-size: 22px;}
	.big_title .mouse{margin-top: 40px;}
	.big_title p{margin-top: 20px;}
	.cs_title h3{font-size: 20px;}
	.center_title h3{font-size: 20px;}
	.cus_main .section4 .txt_block .txt h3{font-size: 20px;}
	.intro_main .section3 .block h3{font-size: 20px;}
	.common_section3 .item p{line-height: 20px; font-size: 12px;}
	.common_section3 .item{margin-bottom: 15px;}
	.common_section3 .item span{font-size: 20px; line-height: 30px;}
	.recruit_main .section3 .txt_block{padding: 20px;}
	.recruit_main .section3 .txt_block .mail{font-size: 12px;}
	.recruit_main .section3 .txt_block .item h3{font-size: 18px; margin: 10px 0;}
	.recruit_main .section3 .txt_block .item p{line-height: 20px;}
	.recruit_main .section3 .txt_block .item a{margin-top: 10px; width: 100px; font-size: 12px; border-width: 1px;}
	.recruit_main .section3 .txt_block .items{margin-top: 10%;}
	.index_main .section3 .right h3{font-size: 20px;}
	.index_main .section4 .left h3{font-size: 20px;}
	.index_main .section5 .left .slogin{font-size: 16px;}
	.index_main .section5 .left h3{font-size: 20px;}
	.index_main .section6 .left .top h3{font-size: 20px;}
	.index_main .section6 .left .bot p{margin-top: 10px;}
}

@media screen and (max-width: 992px){
	.m_footer{padding: 15vw 30px; background: #2a2a2a;}
	.m_footer h3{font-size: 18px; color: #999; padding-bottom: 15px; border-bottom: 1px solid #3d3d3d;}
	.m_footer h3:before{content: ''; width: 3px; height: 3px; background: #c39c62; display: inline-block; vertical-align: middle; margin-right: 10px;}
	.m_footer .p_block{margin: 6vw 0;}
	.m_footer p{font-size: 15px; color: #999999; line-height: 24px; margin: 10px 0; padding-left: 20px; position: relative;}
	.m_footer p:before{content: ''; width: 14px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 5px; left: 0;}
	.m_footer p:nth-of-type(1):before{background-image: url(../images/index/icon1.png);}
	.m_footer p:nth-of-type(2):before{background-image: url(../images/index/icon2.png);}
	.m_footer p:nth-of-type(3):before{background-image: url(../images/index/icon3.png);}
	.m_footer p:nth-of-type(4):before{background-image: url(../images/index/icon4.png);}
	.m_footer p:nth-of-type(5):before{background-image: url(../images/index/icon5.png);}
	.m_footer a{display: block; line-height: 40px; text-align: center; background: #232323; font-size: 15px; color: #666;}
	.m_footer .copy{font-size: 14px; color: #666; line-height: 22px; padding-top: 10vw; border-top: 1px solid #3d3d3d; margin-top: 10vw;}

	/*index*/
	@keyframes lines_go{
		0%{width: 0;}
		100%{width: 100%;}
	}
	.m_index{padding-top: 60px;}
	.m_index .sec1{background-position: center; background-repeat: no-repeat; background-size: cover; height: calc(100vh - 60px); position: relative;}
	.m_index .sec1 .txt{position: absolute; top: 22%; left: 30px; right: 30px;}
	.m_index .sec1 .txt span{display: block; width: 50px; height: 3px; background: #c39c62;}
	.m_index .sec1 .txt h3{font-size: 30px; color: #fff; margin: 10vw 0; line-height: 36px;}
	.m_index .sec1 .txt p{font-size: 16px; color: #fff; line-height: 24px;}
	.m_index .sec2{position: relative; height: calc(100vh - 60px); background: url(../images/bg1.jpg);}
	.m_index .sec2 .lamp{position: absolute; top: 0; right: 0; width: 30%;}
	.m_index .sec2 img{width: 100%; display: block;}
	.m_index .sec2 .desk{position: absolute; right: 0; bottom: 0; width: 80%;}
	.m_index .sec2 .txt{position: absolute; left: 30px; right: 30px; top: 40%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center;}
	.m_index .sec2 .txt img{width: 40px; height: 40px; margin: 0 auto;}
	.m_index .sec2 .txt h3{font-size: 26px; color: #333; margin: 10vw 0; line-height: 32px;}
	.m_index .sec2 .txt p{font-size: 16px; color: #666; line-height: 24px;}
	.m_index .sec2 .txt a{display: block; width: 120px; line-height: 40px; background: #313131; font-size: 16px; color: #fff; margin: 40px auto 0;}
	.m_index .sec3{background-position: center; background-repeat: no-repeat; background-size: cover; height: calc(100vh - 60px); position: relative;}
	.m_index .sec3 .txt{position: absolute; left: 30px; right: 30px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center;}
	.m_index .sec3 .txt img{width: 40px; height: 40px; margin: 0 auto;}
	.m_index .sec3 .txt h3{font-size: 26px; color: #fff; margin: 10vw 0; line-height: 32px;}
	.m_index .sec3 .txt p{font-size: 16px; color: #999; line-height: 24px;}
	.m_index .sec3 .txt a{display: block; width: 120px; line-height: 40px; background: #1b1b1b; font-size: 16px; color: #fff; margin: 40px auto 0;}
	.m_index .sec4{position: relative; height: calc(100vh - 60px); background: #fff;}
	.m_index .sec4 .txt{position: absolute; left: 30px; right: 30px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center;}
	.m_index .sec4 .txt span{display: block; width: 50px; height: 3px; background: #c39c62; margin: 0 auto;}
	.m_index .sec4 .txt h3{font-size: 26px; color: #333333; margin-top: 20px; line-height: 32px;}
	.m_index .sec4 .txt p{font-size: 16px; color: #999; line-height: 24px; margin: 10vw 0;}
	.m_index .sec4 .txt a{display: block; width: 120px; line-height: 40px; background: #1b1b1b; font-size: 16px; color: #fff; margin: 40px auto 0;}
	.m_index .sec4 .txt .img_block{width: 100%; position: relative; margin-top: 20vw;}
	.m_index .sec4 .txt .img_block img{width: 100%; display: block; position: relative; z-index: 2;}
	.m_index .sec4 .txt .img_block:before{content: ''; width: 55vw; height: 55vw; border-radius: 50%; background: #f2f2f2; position: absolute; top: 40%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 1;}
	.m_index .sec5{background: #f7f7f7; padding: 15vw 30px;}
	.m_index .sec5 .slogin{font-size: 16px; color: #333; line-height: 24px; text-align: center;}
	.m_index .sec5 span{display: block; width: 50px; height: 3px; background: #c39c62; margin: 3vw auto 0;}
	.m_index .sec5 h3{font-size: 26px; color: #333; margin: 10vw 0; line-height: 32px; text-align: center;}
	.m_index .sec5 p{font-size: 16px; color: #666; line-height: 24px; text-align: center;}
	.m_index .sec5 .slick{margin-top: 10vw;}
	.m_index .sec5 .slick img{width: 100%; display: block;}
	.m_index .sec5 .slick .desc{font-size: 18px; color: #333; line-height: 30px; margin-top: 20px;}
	.m_index .sec5 .line{margin: 10vw -30px; height: 5px; background: #dcdcdc; position: relative;}
	.m_index .sec5 .line i{position: absolute; left: 0; top: 0; height: 5px; background: #c39c62;}
	.m_index .sec5 .line.ani i{-webkit-animation: lines_go 5s linear 1 forwards; animation: lines_go 5s linear 1 forwards;}

	/*introduction*/
	.m_intro{padding-top: 60px;}
	.m_intro .sec1{height: calc(100vh - 60px); position: relative; background-position: center; background-repeat: no-repeat; background-size: cover;}
	.m_intro .sec1 .txt{position: absolute; top: 22%; left: 30px; right: 30px;}
	.m_intro .sec1 .txt span{display: block; width: 50px; height: 3px; background: #c39c62;}
	.m_intro .sec1 .txt h3{font-size: 30px; color: #fff; margin: 10vw 0; line-height: 36px;}
	.m_intro .sec1 .txt p{font-size: 16px; color: #bababa; line-height: 24px;}
	.m_intro .sec2{padding-top: 15vw; background: url(../images/bg1.jpg); overflow: hidden;}
	.m_intro .sec2 h3{font-size: 26px; line-height: 32px; color: #333; padding: 25px 0; position: relative; text-align: center;}
	.m_intro .sec2 h3:before,
	.m_intro .sec2 h3:after{content: ''; width: 40%; left: 30%; height: 2px; background: #dddddd; position: absolute;}
	.m_intro .sec2 h3:before{top: 0;}
	.m_intro .sec2 h3:after{bottom: 0;}
	.m_intro .sec2 p{font-size: 16px; line-height: 24px; color: #666666; margin: 12vw 0; text-align: center;}
	.m_intro .sec2 img{display: block; margin: 0 auto; width: 72%;}
	.m_intro .sec3{background: #f7f7f7; padding: 20vw 30px 86vw; position: relative;}
	.m_intro .sec3 h3{font-size: 26px; line-height: 32px; color: #333; position: relative; position: relative; z-index: 2;}
	.m_intro .sec3 p{font-size: 16px; color: #666; line-height: 24px; margin-top: 10vw; position: relative; z-index: 2;}
	.m_intro .sec3 img.logo{position: absolute; right: 0; bottom: 0; width: 80vw; z-index: 1;}
	.m_intro .sec3 img.img{position: absolute; right: 0; bottom: 0; width: 76vw; z-index: 1;}

	/*recruit*/
	.m_recruit{padding-top: 60px;}
	.m_recruit .sec1{height: calc(100vh - 60px); position: relative; background-position: center; background-repeat: no-repeat; background-size: cover;}
	.m_recruit .sec1 .txt{position: absolute; top: 22%; left: 30px; right: 30px;}
	.m_recruit .sec1 .txt span{display: block; width: 50px; height: 3px; background: #c39c62;}
	.m_recruit .sec1 .txt h3{font-size: 30px; color: #fff; margin: 10vw 0; line-height: 36px;}
	.m_recruit .sec1 .txt p{font-size: 16px; color: #e6e6e6; line-height: 24px;}
	.m_recruit .sec2{height: calc(100vh - 60px); padding: 30vw 30px 0; background-position: center; background-repeat: no-repeat; background-size: cover;}
	.m_recruit .sec2 h3{font-size: 26px; line-height: 32px; color: #fff; padding: 25px 0; position: relative; text-align: center;}
	.m_recruit .sec2 h3:before,
	.m_recruit .sec2 h3:after{content: ''; width: 40%; left: 30%; height: 2px; background: #fff; position: absolute;}
	.m_recruit .sec2 h3:before{top: 0;}
	.m_recruit .sec2 h3:after{bottom: 0;}
	.m_recruit .sec2 p{font-size: 16px; line-height: 24px; color: #999999; margin-top: 10vw; text-align: center;}
	.m_recruit .sec3{background: #f7f7f7; padding: 15vw 30px;}
	.m_recruit .sec3 span{display: block; width: 50px; height: 3px; background: #c39c62;}
	.m_recruit .sec3 h3{font-size: 26px; line-height: 32px; color: #333; margin: 5vw 0;}
	.m_recruit .sec3 p{font-size: 16px; color: #666; line-height: 24px;}
	.m_recruit .sec3 .item{padding: 8vw 0; border-bottom: 1px solid #dddddd;}
	.m_recruit .sec3 .item .zhiwei{font-size: 22px; color: #333;}
	.m_recruit .sec3 .item .desc{font-size: 16px; color: #666; line-height: 24px; margin-top: 15px;}
	.m_recruit .sec3 .item a{display: block; width: 120px; line-height: 32px; border: 2px solid #c39c62; color: #333; text-align: center; font-size: 14px; margin-top: 15px;}

	/*customized*/
	.m_cus{padding-top: 60px;}
	.m_cus .sec1{height: calc(100vh - 60px); position: relative; background-position: center; background-repeat: no-repeat; background-size: cover;}
	.m_cus .sec1 .txt{position: absolute; top: 22%; left: 30px; right: 30px;}
	.m_cus .sec1 .txt span{display: block; width: 50px; height: 3px; background: #c39c62;}
	.m_cus .sec1 .txt h3{font-size: 30px; color: #fff; margin: 10vw 0; line-height: 36px;}
	.m_cus .sec1 .txt p{font-size: 16px; color: #e6e6e6; line-height: 24px;}
	.m_cus .sec2{background: url(../images/bg1.jpg); padding: 15vw 30px;}
	.m_cus .sec2 h3{font-size: 26px; line-height: 32px; color: #333; padding: 25px 0; position: relative; text-align: center;}
	.m_cus .sec2 h3:before,
	.m_cus .sec2 h3:after{content: ''; width: 40%; left: 30%; height: 2px; background: #dddddd; position: absolute;}
	.m_cus .sec2 h3:before{top: 0;}
	.m_cus .sec2 h3:after{bottom: 0;}
	.m_cus .sec2 p{font-size: 16px; line-height: 24px; color: #999999; margin-top: 10vw; text-align: center;}
	.m_cus .sec2 img{display: block; width: 80%; margin: 10vw auto 0;}
	.m_cus .sec3{background: #f7f7f7;}
	.m_cus .sec3 img{width: 40%;}
	.m_cus .sec5{background: #f7f7f7;}
	.m_cus .sec5 img{width: calc(100% + 60px); margin: 15vw -30px 0;}
	.m_cus .sec4 .slick img{width: 70%;}
	.m_cus .sec4 .slick:before{content: ''; width: 65vw; height: 65vw; background: #f5f5f5; border-radius: 50%; position: absolute; top: 20%; left: 0; right: 0; margin: 0 auto;}
	.m_cus .sec4 .item{position: relative; z-index: 2;}
	.m_cus .sec4 .s_slick{margin-top: 10vw;}
	.m_cus .sec4 .co{padding: 12px 0;}
	.m_cus .sec4 .color{width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; position: relative;}
	.m_cus .sec4 .color:before{content: ''; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; border-radius: 50%; border: 1px solid #f1f1f1;}
	.m_cus .sec4 .slick-current .color:after{content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; border-radius: 50%; border: 2px dotted #dddddd;}
}