@charset "utf-8";
/*
* title:博爱曙光植发科香港竞价PC端品质页
* Author:luochou
* Date:2024.4.07
*/
.new-header,.container{width:100%;margin:0 auto;}
.bgColor{background-color: #f1fcff;}
.container{background-color:#fff;}
.container img{max-width:100%;display:block;}
.bannerWAP{display:none;}
.banner{width:100%;height:600px;background:url(/style/images/quality/banner_02.jpg?v=1) no-repeat center top;overflow:hidden;}
.banner a{height:600px;display:block;}
.item{width:1200px;margin:0 auto;}
.container .tit{position: relative; height: 72px;}
.container .tit .txt{position: absolute; left: 0; top:0;width: 100%;line-height: 42px;text-align: center;font-size: 42px;color: #e4f4f9;text-transform: uppercase;font-family: Arial;}
.container .tit h2{position: relative;color: #22b1a9; font-size: 32px; text-align: center; line-height:72px;}
.container .tit h2 b{color: #ff7600; font-weight: bold;}
/*f1Box*/
.f1Box{padding-top:80px;}
.f1Box .tit{height: auto; padding-bottom: 50px;}
.f1Box .tit h2{line-height: 52px;}
.f1Box .tit h2 b{padding-right: 10px;}
.f1Box .tit p{color: #777; font-size: 22px; line-height: 40px; text-align: center;}
.f1Box .tit p i{padding: 0 8px;}
.f1Form{padding: 30px 160px 48px; background-color: #e9e9e9;}
.f1Form h3{padding-bottom: 30px; color: #ff8a00; font-size: 42px; text-align: center; line-height: 60px;}
.f1Form dl{position: relative; height: 62px; margin-bottom: 26px; background-color: #fff;}
.f1Form dl dt{position: absolute; left: 20px; top:0; color: #3e3e3e; font-size: 28px; line-height: 62px;}
.f1Form dl dd{padding:0 20px 0 160px;}
.f1Form dl dd input,.f1Form dl dd select{width: 100%; height: 62px; display: block; border:none; outline: none;box-sizing: border-box; color: #666; font-size: 28px; line-height: 62px;background-color:#fff;}
.f1Form .submit{width: 220px; height: 48px; margin:20px auto 0; display: block; background-color: #ff8a00;border-radius:10px; border:none; color:#fff;font-size:30px; font-weight: bold; line-height:48px;text-align:center;background-image: -webkit-linear-gradient(to right, #ff8a00,#ff7200);background-image: linear-gradient(to right, #ff8a00,#ff7200);}
/*f2Box*/
.f2Box{padding:80px 0 120px;}
.f2Box ul{padding:40px 27px 10px; overflow: hidden;}
.f2Box li{float: left; width: 382px; padding-bottom: 50px;}
.f2Box li .icon{width: 100px; height: 100px; margin: 0 auto 30px; display: block;}
.f2Box li.i1 .icon{background:url(/style/images/quality/icon_01.png) no-repeat;}
.f2Box li.i2 .icon{background:url(/style/images/quality/icon_02.png) no-repeat;}
.f2Box li.i3 .icon{background:url(/style/images/quality/icon_03.png) no-repeat;}
.f2Box li.i4 .icon{background:url(/style/images/quality/icon_04.png) no-repeat;}
.f2Box li.i5 .icon{background:url(/style/images/quality/icon_05.png) no-repeat;}
.f2Box li.i6 .icon{background:url(/style/images/quality/icon_06.png) no-repeat;}
.f2Box li.i7 .icon{background:url(/style/images/quality/icon_07.png) no-repeat;}
.f2Box li.i8 .icon{background:url(/style/images/quality/icon_08.png) no-repeat;}
.f2Box li.i9 .icon{background:url(/style/images/quality/icon_09.png) no-repeat;}
.f2Box li p{width: 260px; height: 56px; margin: 0 auto; background-color: #22aba9; border-radius: 6px; color: #fff; font-size: 28px; line-height: 56px; text-align: center;}
.f2Box .btn{width:312px;height:48px;margin:0 auto;display:block;background-color:#ff8a00;border-radius:10px;color:#fff;font-size:30px; font-weight: bold; line-height:48px;text-align:center;background-image: -webkit-linear-gradient(to right, #ff8a00,#ff7200);background-image: linear-gradient(to right, #ff8a00,#ff7200);}
/*f3Box*/
.f3Box{padding:80px 0 120px;}
.f3Con{height: 398px; padding:40px 0 60px;}
.f3Con dl{float: left; width: 276px; height: 398px; margin-right: 32px; background-color: #fff; border-radius: 12px; box-shadow: 0 2px 4px rgba(177,208,216,.35);}
.f3Con dl.mr0{margin-right: 0}
.f3Con dt{position: relative; padding: 42px 0 6px;}
.f3Con dt span{position: relative; width: 160px; height: 160px; margin: 0 auto; display: block; border-radius: 50%; background-color: #67c6c7; border:5px solid #ccecec;}
.f3Con dt span i{position: absolute; top:20px; left: 50%; margin-left: -45px; width: 90px; height: 90px;}
.f3Con dt .icon1 i{background:url(/style/images/quality/icon_10.png) no-repeat;}
.f3Con dt .icon2 i{background:url(/style/images/quality/icon_11.png) no-repeat;}
.f3Con dt .icon3 i{background:url(/style/images/quality/icon_12.png) no-repeat;}
.f3Con dt .icon4 i{background:url(/style/images/quality/icon_13.png) no-repeat;}
.f3Con dt h3{position: absolute; bottom: 0; left: 50%; margin-left: -71px; width: 142px; height: 40px; background-color: #ff8a00; border-radius: 20px; color: #fff; font-size: 28px; line-height: 40px; text-align: center;}
.f3Con dd{padding: 40px 38px 0;}
.f3Con dd p{color: #3b3b3b; font-size: 20px; line-height: 36px;}
.f3Con dd p b{display: block; font-weight: bold;}
.f3Con dd h3{color: #01a0a1; font-size: 20px; line-height: 36px;}
.f3Box .btn{width: 312px; height: 48px; margin:40px auto 0; display: block; background-color:#ff8a00;border-radius:10px;color:#fff;font-size:30px; font-weight: bold; line-height:48px;text-align:center;background-image: -webkit-linear-gradient(to right, #ff8a00,#ff7200);background-image: linear-gradient(to right, #ff8a00,#ff7200);}
/*f4Box*/
.f4Box{padding:100px 0 95px;}
.f4Box ul{overflow: hidden; padding-top: 40px;}
.f4Box li{float:left;width:385px;height:231px;margin-bottom:25px; margin-right: 22px;}
.f4Box li.mr0{margin-right: 0}
.f4Box li img{width:385px;height:231px; display: block;}
/*f5Box*/
.f5Box{padding:100px 0 120px;}
.f5Tab{width: 952px; margin:34px auto 0; overflow:hidden;}
.f5Tab span{float:left;width:50%;height:41px;text-align:center;line-height:41px;font-size:20px;color:#fff;background-color:#ff8e3a;display:block;}
.f5Tab span.active{background-color:#22a8a9;}
.f5Box .imgBox{width: 952px; margin: 0 auto; box-shadow:rgba(0,0,0,.2) 0 0 10px;}
.f5Box .imgBox img{width:952px;height:295px;}

@keyframes pulse{
	0%{transform:scale(0.9)}
	50%{transform:scale(1)}
	100%{transform:scale(0.9)}
}
@-webkit-keyframes pulse{
	0%{-webkit-transform:scale(0.9)}
	50%{-webkit-transform:scale(1)}
	100%{-webkit-transform:scale(0.9)}
}
@media only screen and (max-width:750px){
	.new-header,.container{min-width:320px;width:100%;max-width:750px;margin:0 auto;}
	.container{background-color:#fff;padding-bottom:0;}
	.container img{max-width:100%;display:block;}
	.item{width:auto;}	
	.banner{display:none;}
	.bannerWAP{display:block;}
	.container .tit{height:auto;}
	.container .tit .txt{line-height: .42rem;font-size: .42rem;}
	.container .tit h2{font-size: .46rem;line-height:.72rem;}
	/*f1Box*/
	.f1Box{padding-top:.4rem;}
	.f1Box .tit{padding-bottom: .2rem;}
	.f1Box .tit h2{line-height: .52rem;}
	.f1Box .tit h2 b{padding-right: .1rem;}
	.f1Box .tit p{font-size: .28rem; line-height: .4rem;}
	.f1Box .tit p i{padding: 0 .08rem;}
	.f1Form{padding: .3rem .3rem .48rem;}
	.f1Form h3{padding-bottom: .3rem;font-size: .42rem;line-height: .6rem;}
	.f1Form dl{height: .82rem; margin-bottom: .26rem;}
	.f1Form dl dt{left: .2rem;font-size: .32rem; line-height: .82rem;}
	.f1Form dl dd{padding:0 .2rem 0 1.8rem;}
	.f1Form dl dd input,.f1Form dl dd select{height: .82rem; font-size: .32rem; line-height: .62rem; display: flex;display: -webkit-flex;align-items: center;}
	.f1Form .submit{width: 3.2rem; height: .68rem; margin:.2rem auto 0;border-radius:.1rem; font-size:.36rem; line-height: .4rem; display: flex;display: -webkit-flex;align-items: center;justify-content: center;}
	/*f2Box*/
	.f2Box{padding:.8rem 0 1.2rem;}
	.f2Box ul{padding:.4rem .3rem .1rem;display:flex;display:-webkit-flex;justify-content:space-between;flex-wrap:wrap;}
	.f2Box li{float: none; width: 31%; padding-bottom: .5rem;}
	.f2Box li .icon{width: 1rem; height: 1rem; margin: 0 auto .3rem;}
	.f2Box li.i1 .icon{background:url(/style/images/quality/icon_01.png) no-repeat;background-size: 100% 100%;}
	.f2Box li.i2 .icon{background:url(/style/images/quality/icon_02.png) no-repeat;background-size: 100% 100%;}
	.f2Box li.i3 .icon{background:url(/style/images/quality/icon_03.png) no-repeat;background-size: 100% 100%;}
	.f2Box li.i4 .icon{background:url(/style/images/quality/icon_04.png) no-repeat;background-size: 100% 100%;}
	.f2Box li.i5 .icon{background:url(/style/images/quality/icon_05.png) no-repeat;background-size: 100% 100%;}
	.f2Box li.i6 .icon{background:url(/style/images/quality/icon_06.png) no-repeat;background-size: 100% 100%;}
	.f2Box li.i7 .icon{background:url(/style/images/quality/icon_07.png) no-repeat;background-size: 100% 100%;}
	.f2Box li.i8 .icon{background:url(/style/images/quality/icon_08.png) no-repeat;background-size: 100% 100%;}
	.f2Box li.i9 .icon{background:url(/style/images/quality/icon_09.png) no-repeat;background-size: 100% 100%;}
	.f2Box li p{width: 100%; height: .6rem;border-radius: .06rem;font-size: .28rem; line-height: .6rem;}
	.f2Box .btn{width: 4rem; height: .68rem;border-radius:.1rem; font-size:.36rem; line-height: .4rem; display: flex;display: -webkit-flex;align-items: center;justify-content: center;}
	/*f3Box*/
	.f3Box{padding:.8rem .2rem 1.2rem;}
	.f3Con{height: auto; padding:.4rem 0 .6rem;display:flex;display:-webkit-flex;justify-content:space-between;flex-wrap:wrap;}
	.f3Con dl{float: none; width:48%; height: 4.2rem; margin-right: 0; margin-bottom: .2rem; border-radius: .12rem; box-shadow: 0 2px 4px rgba(177,208,216,.35);}
	.f3Con dt{padding: .42rem 0 .06rem;}
	.f3Con dt span{width: 1.6rem; height: 1.6rem;border:.05rem solid #ccecec;}
	.f3Con dt span i{top:.2rem; margin-left: -.45rem; width: .9rem; height: .9rem;}
	.f3Con dt .icon1 i{background:url(/style/images/quality/icon_10.png) no-repeat;background-size: 100% 100%;}
	.f3Con dt .icon2 i{background:url(/style/images/quality/icon_11.png) no-repeat;background-size: 100% 100%;}
	.f3Con dt .icon3 i{background:url(/style/images/quality/icon_12.png) no-repeat;background-size: 100% 100%;}
	.f3Con dt .icon4 i{background:url(/style/images/quality/icon_13.png) no-repeat;background-size: 100% 100%;}
	.f3Con dt h3{margin-left: -.71rem; width: 1.42rem; height: .4rem;border-radius: .2rem;font-size: .28rem; line-height: .4rem;}
	.f3Con dd{padding: .4rem .2rem 0 .4rem;}
	.f3Con dd p{font-size: .28rem; line-height: .42rem;}
	.f3Con dd h3{font-size: .28rem; line-height: .42rem;}
	.f3Box .btn{width: 4rem; height: .68rem;border-radius:.1rem; font-size:.36rem; line-height: .4rem; display: flex;display: -webkit-flex;align-items: center;justify-content: center;margin:0 auto;}
	/*f4Box*/
	.f4Box{padding:1rem .2rem .95rem;}
	.f4Box ul{padding-top: .4rem;display:flex;display:-webkit-flex;justify-content:space-between;flex-wrap:wrap;}
	.f4Box li{float:none;width:31%;height:auto;margin-bottom:.25rem; margin-right: 0;}
	.f4Box li img{width:100%;height:auto;}
	/*f5Box*/
	.f5Box{padding:1rem .2rem 1.2rem;}
	.f5Box .tit h2{font-size: .36rem;}
	.f5Tab{width: 100%; margin:.34rem auto 0;}
	.f5Tab span{float:left;width:50%;height:.6rem;line-height:.6rem;font-size:.28rem;}
	.f5Box .imgBox{width: 100%;}
	.f5Box .imgBox img{width:100%;height:auto; display: block;}
}