@charset "utf-8";
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	html{font-size: 30px;}
}
@media only screen and (min-width: 415px) and (max-width: 768px) {
	html{font-size: 24px;}
}
@media only screen and (min-width: 376px) and (max-width: 414px) {
	html{font-size: 15.525px;}
}
@media only screen and (min-width: 321px) and (max-width: 375px) {
	html{font-size: 14px;}
}
@media only screen and (max-width: 320px) {
	html{font-size: 12px;}
}

img{vertical-align: middle;}
section:before,section:after{content: '';display: block;clear: both;overflow: hidden;}
.wrap{padding-left: 4%;padding-right: 4%;}

.sect_nb{background: url(../img/website/nbanner.png) top center no-repeat;background-size: 100% auto;position: relative;z-index: 2}
.nbanner{padding: 65.6% 0 0 0;text-align: center;color: #fff;position: relative;}
.nbanner p{font-size: 2rem;line-height: 3rem;font-weight: bold;position: absolute;top: 10%;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.nbanner img{max-width: 40%;position: absolute;top: 32%;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.nbanner span{font-size: 1rem;line-height: 1.6rem;position: absolute;display: inline-block;width: 90%;top: 52%;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.nbanner span:after{content: '';position: absolute;left: 50%;top: 110%; width: 10%;height: 3px;background-color: #fff;-webkit-transform: translateX(-50%);transform: translateX(-50%);}

/*问题*/
.sect_ques{background: url(../img/website/bg-1.jpg) top center no-repeat;background-size: 100% auto;margin-top: -12%;}
.quest{padding: 20% 4% 0;text-align: center;}
.quest-form p{font-size: 1.2rem;line-height: 1.6rem;font-weight: bold;text-align: center;color: #3366cc;padding: 2% 0;}
.quest-form .radio-box{display: block;margin-left: auto;margin-right: auto;text-align: center;padding: 2% 0;}
.quest-form .bb{border-bottom: #ccc 1px solid;}
.quest-form .radio-box .radio{background: url(../img/website/radio_bk.png) no-repeat; background-size:2rem 4rem;display: inline-block;line-height: 2rem;height: 2rem;text-indent:2.6rem;margin:0 1rem;font-size: 1rem;color: #333;}
.quest-form .radio-box .checked{background-position: 0 -2rem;}
.quest-form .radio-box input[type='radio'] {display:none;}
.quest-form .button-box{text-align: center;padding: 2% 0 5%;}
.quest-form .button-box .submit{display: inline-block;padding: 0 20% 0 10%;background: url(../img/website/icon-quest.jpg) left center;position: relative;border-radius: 1rem;}
.quest-form .button-box .submit input{padding: 0;margin: 0;border: 0;background: none;font-size: 1.2rem;line-height: 2rem;color: #fff;}
.jiantou:after{content: '';display: block;position: absolute;top: 50%;right: 10%;width: 18px;height: 6px;background: url(../img/website/ndot_hover.png) no-repeat;-webkit-transform: translateY(-50%);transform: translateY(-50%);}

/*手机站*/
.sect_wap{background: url(../img/website/bg-2.png) top center no-repeat;background-size: 100% auto;}
.wap{padding-top: 15%;}
.wap-icon{text-align: left;}
.wap-icon img{max-width: 90%;}
.wap-text{padding-left: 20%;}
.text strong{font-size: 2.4rem;line-height: 3.2rem;color: #f7f7f7;text-transform: uppercase;font-family: 'Arial'}
.text p{font-size: 1.2rem;line-height: 3.2rem;color: #333333;padding: .2rem 0;vertical-align: bottom;}
.text p span{font-size: 1.6rem;font-weight: bold;}
.text big{font-size: 1rem;line-height: 1.4rem;font-weight: bold;}
.text big.blue{color: #0079b6}
.text big.orang{color: #f0831e;}
.text small{font-size: 1rem;line-height: 1.4rem;display: block;color: #333;}
.text a.more{display: inline-block;font-size: 1.2rem;line-height: 2.4rem;font-weight: bold;color: #fff;background: url(../img/website/icon-quest.jpg) left center;position: relative;border-radius: 1.2rem;padding: 0 15% 0 10%;margin: 5% 0;}

/*营销型网站*/
.sect_mark{background: url(../img/website/bg-3.png) top center no-repeat;background-size: 100% auto;}
.mark{padding-top: 11%;}
.mark-img{position: relative;z-index: 5;margin-left: 15%;padding-bottom: 8%;}
.mark-icon{position: absolute;width: 10rem;height: 3rem;background-size: 1.5rem 1.5rem;-webkit-transform: skewY(336deg);-ms-transform: skewY(336deg);-o-transform: skewY(336deg);transform: skewY(336deg);font-size: 1.2rem;line-height: 3rem;color: rgba(255,255,255,0.6);text-indent: 3rem;background-repeat: no-repeat;background-position: 20px 50%;box-shadow: 0 0 1rem rgba(0,0,0,0.2);border-radius: 8px;-webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;-ms-transform-origin: 0 0;-o-transform-origin: 0 0;transform-origin: 0 0;}
.mark-icon-02{left: -4rem;top: 7rem;background-color: #ff9b53;background-image: url(../img/website/mark2.png);z-index: -1}
.mark-icon-03{left: 8rem;top: 4rem;background-color: #7c82dd;background-image: url(../img/website/mark3.png);z-index: 8}
.mark-icon-04{left: -1.5rem;top: 13rem;background-color: #45e771;background-image: url(../img/website/mark4.png);z-index: 8}

/*品牌型网站*/
.sect_brand{background: url(../img/website/bg-4.jpg) bottom center no-repeat;background-size: 100% auto;}
.brand{padding-top: 72%;position: relative;}
.brand-txt{position: absolute;background-color: rgba(92,128,255,0.9);width: 80%;padding: 8% 5%;top: 0;left: 10%;z-index: 9999;}
.text2 strong{font-size: 2.4rem;line-height: 3.2rem;color: #fff;text-transform: uppercase;font-family: 'Arial'}
.text2 p{font-size: 1.2rem;line-height: 3.2rem;color: #fff;padding: .2rem 0;vertical-align: bottom;}
.text2 p span{font-size: 1.6rem;font-weight: bold;}
.text2 big{font-size: 1rem;line-height: 1.4rem;font-weight: bold;color: #fff}
.text2 small{font-size: 1rem;line-height: 1.4rem;display: block;color: #fff;}
.text2 a.more{display: inline-block;font-size: 1.2rem;line-height: 2.4rem;font-weight: bold;color: #fff;background: #ffcb00;position: relative;border-radius: 1.2rem;padding: 0 15% 0 10%;margin: 5% 0;}
.brand-container {  width: 100%;  height: 500px;left: 0;z-index: 10;padding: 50px 0;}
.brand-slide {  background-position: center;  background-size: cover; width: 40%;}


@media only screen and (min-width: 376px) and (max-width: 414px) {
	.brand{padding-top: 91%;}
	.brand-container{height: 318px;}
}
@media only screen and (min-width: 321px) and (max-width: 375px) {
	.brand{padding-top: 91%;}
	.brand-container{height: 286px;padding: 40px 0;}
}
@media only screen and (max-width: 320px) {
	.brand{padding-top: 96%;}
	.brand-container{height: 216px;padding: 30px 0;}
}

/*响应式*/
.sect_respos{background: url(../img/website/bg-5.jpg) top center no-repeat;background-size: 100% auto;}
.respos{position: relative;padding-top: 100%;}
.respos-icon{position: absolute;z-index: 5;background-repeat: no-repeat;background-size: 100% auto;background-position: top;}
.respos-icon-1{width: 20%;height: 0;left: 4%;top: 14rem;background-image: url(../img/website/respos-icon-1.png);padding-top: 31%;}
.respos-icon-2{width: 70%;height: 0;left: 28%;top: 6rem;background-image: url(../img/website/respos-icon-2.png);padding-top: 80%;}
.respos-icon-3{width: 10%;height: 0;left: 80%;top: 7rem;background-image: url(../img/website/respos-icon-3.png);padding-top: 30%;}

/*企业型*/
.sect_enter{background: url(../img/website/bg-6.jpg) center no-repeat;background-size: 100% auto;}
.enter{position: relative;padding-top: 90%;padding-bottom: 10%;}
.enter-icon{position: absolute;z-index: 5;background-repeat: no-repeat;background-size: 100% auto;background-position: top;}
.enter-icon-1{width: 20%;height: 0;left: 10%;top: 6rem;background-image: url(../img/website/enter-1.png);padding-top: 36%;}
.enter-icon-2{width: 90%;height: 0;left: 10%;top: 6rem;background-image: url(../img/website/enter-2.png);padding-top: 90%;}
@media only screen and (max-width: 414px) {
	.enter{padding-top: 110%;}
}
/*优势*/
.sect_ys{}
.title{text-align: center;}
.title strong{font-size: 2rem;line-height: 3rem;position: relative;text-transform: uppercase;}
.title strong:after{content: '';position: absolute;width: 40px;height: 3px;left: 50%;bottom: -5px;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);}
.title p{font-size: 1.2rem;line-height: 2rem;font-weight: bold;padding: 0;margin:0;-webkit-margin-before: 0;-webkit-margin-after: 0;}
.title span{font-size: 1rem;line-height: 2rem;}
.title1 strong{color: #c3c3c3;}
.title1 strong:after{background-color: #2a2a2a;}
.title1 p{color: #2a2a2a;}
.title1 span{color: #656565;}
.ys-container{padding: 10% 20% 5% 20%;position: relative;}
.ys-container .swiper-slide{background-repeat: repeat-x;border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.4)}
.ys-slide1{background-image: url(../img/website/youshi-bg1.jpg);}
.ys-slide2{background-image: url(../img/website/youshi-bg2.jpg);}
.ys-slide3{background-image: url(../img/website/youshi-bg3.jpg);}
.youshi-pic{height: 235px;border-radius: 10px;background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.youshi-pic1{background-image: url(../img/website/pic-youshi1.png);}
.youshi-pic2{background-image: url(../img/website/pic-youshi2.png);}
.youshi-pic3{background-image: url(../img/website/pic-youshi3.png);}
.ys-container strong{font-size: 1.2rem;color: #fff;}
.youshi-txt{height: 200px;color: #fff;}
.youshi-txt span{display: block;}

@media only screen and (min-width: 376px) and (max-width: 414px) {
	.youshi-pic{height: 125px;}
	.youshi-txt{height: 135px;}
	.ys-container strong{font-size: 1rem;color: #fff;}

}
@media only screen and (min-width: 321px) and (max-width: 375px) {
	.youshi-pic{height: 110px;}
	.youshi-txt{height: 125px;}
	.ys-container strong{font-size: 1rem;color: #fff;}

}
@media only screen and (max-width: 320px) {
	.youshi-pic{height: 90px;}
	.youshi-txt{height: 100px;}
	.ys-container strong{font-size: 1rem;color: #fff;}
}

/*增值*/
.sect_value{background: url(../img/website/bg-7.png) top center no-repeat;background-size: 100% auto;margin-top: -50px;}
.value{padding-top: 15%;}
.title2 strong,.title2 p,.title2 span{color: #fff;}
.title2 strong:after{background-color: #fff;}
.value .row{padding-top: 10%;}
.value-box{text-align: center;padding-bottom: 30px;}
.value-box img{max-width: 60%;}
.value-box p{font-size: .8rem;line-height: 1.4rem;color: #fff;}



.title2 strong,.title2 p,.title2 span{color: #fff;}
.title2 strong:after{background-color: #fff;}


.gost-center{text-align: center;}
.gost-center:before{content: '';display: inline-block;width: 0%;height: 100%;vertical-align: middle;}
.gost-center p{display: inline-block;vertical-align: middle;}


.fadeInUp {animation: fadeInUp 1s forwards;}
.fadeInLeft {animation: fadeInLeft 1s forwards;}

@keyframes fadeInUp{
	0% {    opacity: 0;    transform: translate3d(0,100%,0);}
	100% {    opacity: 1;    transform: none;}	
}
@keyframes fadeInLeft{
	0% {    opacity: 0;    transform: translate3d(-100%,0,0);}
	100% {    opacity: 1;    transform: none;}	
}