@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_case.jpg) 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: 120px;}
.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;}
.list-item{padding-bottom: 80px;}
.list-item h2{position: relative; height: 68px; padding-left: 40px; color: #373634; font-size: 28px; line-height: 68px;}
.list-item h2 i{position: absolute; left: 0; top:50%; margin-top: -14px; width: 33px; height: 27px; background:url(/style/images/quality/bar.png) no-repeat;}
.list-item dl{padding-bottom:35px;overflow:hidden;}
.list-item dl dt{float:left;}
.list-item dl dt,.list-item dl dt img{width:745px;height:435px;}
.list-item dl dd{float:right;width:440px;height:435px;background-color:#e3f8f8;}
.list-item dl dd h3{line-height:50px;font-size:40px;color:#22a8a9;border-bottom:#22a8a9 solid 1px;margin:0 63px 25px;position:relative;padding:80px 0 40px;}
.list-item dl dd h3 span{text-align:center;display:block;}
.list-item dl dd h3 span em{font-weight:bold;color:#ff7300;}
.list-item dl dd h3 i{width:37px;height:7px;background-color:#22a8a9;display:block;position:absolute;left:50%;margin-left:-18px;bottom:-4px;}
.list-item dl dd p{padding-left: 96px; line-height:49px;font-size:28px;color:#585858;}
.list-item .share{position: relative; height: 160px; padding: 0 90px 0 210px; background-color: #e3f8f8; border-radius: 80px 0 0 80px; overflow: hidden;}
.list-item .share img{position: absolute; top:0; left: 0; width: 160px; height: 160px; border-radius: 50%;}
.list-item .share h3{padding-top: 15px; color: #ff7300; font-size: 30px; font-weight: normal; line-height: 48px;}
.list-item .share p{color: #008385; font-size: 24px; line-height: 34px;}
.list-item .btn{width: 440px; height: 48px; margin:60px auto 0; display: block; background-color: #ff8a00;border-radius:24px; border:none; color:#fff;font-size:24px; 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);animation: pulse 1s .2s ease infinite;-webkit-animation: pulse 1s .2s ease infinite;}
/*f2Box*/
.f2Box{padding-top:50px;}
.f2Box .tit{height: auto; padding-bottom: 50px;}
.f2Box .tit h2{line-height: 52px;}
.f2Box .tit h2 b{padding-right: 10px;}
.f2Box .tit p{color: #777; font-size: 22px; line-height: 40px; text-align: center;}
.f2Box .tit p i{padding: 0 8px;}
.f2Form{padding: 30px 160px 48px; background-color: #e9e9e9;}
.f2Form h3{padding-bottom: 30px; color: #ff8a00; font-size: 42px; text-align: center; line-height: 60px;}
.f2Form dl{position: relative; height: 62px; margin-bottom: 26px; background-color: #fff;}
.f2Form dl dt{position: absolute; left: 20px; top:0; color: #3e3e3e; font-size: 28px; line-height: 62px;}
.f2Form dl dd{padding:0 20px 0 160px;}
.f2Form dl dd input,.f2Form 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;}
.f2Form .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);}
/*f3Box*/
.f3Box{padding:100px 0 95px;}
.f3Box ul{overflow: hidden; padding-top: 40px;}
.f3Box li{float:left;width:385px;height:231px;margin-bottom:25px; margin-right: 22px; transition:all .3s;}
.f3Box li.mr0{margin-right: 0}
.f3Box li:hover{transform: translateY(-10px);-webkit-transform: translateY(-10px); cursor: pointer;}
.f3Box li img{width:385px;height:231px; display: block;}
/*f4Box*/
.f4Box{padding:100px 0 120px;}
.f4Tab{width: 952px; margin:34px auto 0; overflow:hidden;}
.f4Tab span{float:left;width:50%;height:41px;text-align:center;line-height:41px;font-size:20px;color:#fff;background-color:#ff8e3a;display:block;}
.f4Tab span.active{background-color:#22a8a9;}
.f4Box .imgBox{width: 952px; margin: 0 auto; box-shadow:rgba(0,0,0,.2) 0 0 10px;}
.f4Box .imgBox img{width:952px;height:295px;}

@keyframes pulse{
	0%{transform:scale(0.98)}
	50%{transform:scale(1)}
	100%{transform:scale(0.98)}
}
@-webkit-keyframes pulse{
	0%{-webkit-transform:scale(0.98)}
	50%{-webkit-transform:scale(1)}
	100%{-webkit-transform:scale(0.98)}
}
@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: .72rem;}
	.container .tit .txt{line-height: .42rem;font-size: .42rem;}
	.container .tit h2{font-size: .46rem;line-height:.72rem;}
	/*f1Box*/
	.f1Box{padding-top: 1.2rem;}
	.f1Box .tit{height: auto; padding-bottom: .5rem;}
	.f1Box .tit h2{line-height: .52rem;}
	.f1Box .tit p{color: #777; font-size: 22px; line-height: 40px; text-align: center;}
	.list-item{padding:0 .2rem .8rem;}
	.list-item h2{height: .8rem; padding-left: .4rem; font-size: .36rem; line-height: .8rem;}
	.list-item h2 i{margin-top: -.1rem; width: .33rem; height: .27rem; background:url(/style/images/quality/bar.png) no-repeat; background-size: 100% 100%;}
	.list-item dl{padding-bottom:.35rem; display:flex;display:-webkit-flex;justify-content:space-between;}
	.list-item dl dt{float:none;}
	.list-item dl dt,.list-item dl dt img{width:3.5rem;height:auto;}
	.list-item dl dd{float:none;width:3.5rem;height:auto;}
	.list-item dl dd h3{line-height:.32rem;font-size:.28rem;margin:0 .3rem .1rem;padding:.1rem 0;}
	.list-item dl dd h3 i{width:.37rem;height:.07rem;margin-left:-.18rem;bottom:-.04rem;}
	.list-item dl dd p{padding-left: 0; line-height:.32rem;font-size:.24rem; text-align: center;}
	.list-item .share{height: 1.6rem; padding: 0 .2rem 0 1.8rem; border-radius: .8rem 0 0 .8rem;display:flex;display:-webkit-flex;flex-direction: column;justify-content:center;}
	.list-item .share img{width: 1.6rem; height: 1.6rem;}
	.list-item .share h3{padding-top:0 !important;font-size: .28rem;line-height: 1.4;}
	.list-item .share p{font-size: .24rem; line-height: 1.4;}
	.list-item .btn{width: 4.4rem; height: .68rem; margin:.6rem auto 0;border-radius:.34rem;font-size:.36rem;line-height: .4rem; display: flex;display: -webkit-flex;align-items: center;justify-content: center;}
	/*f2Box*/
	.f2Box{padding-top:.8rem;}
	.f2Box .tit{padding-bottom: .5rem;height: auto;}
	.f2Box .tit h2{line-height: .52rem;}
	.f2Box .tit h2 b{padding-right: .1rem;}
	.f2Box .tit p{font-size: .28rem; line-height: .4rem;}
	.f2Box .tit p i{padding: 0 .08rem;}
	.f2Form{padding: .3rem .3rem .48rem;}
	.f2Form h3{padding-bottom: .3rem;font-size: .42rem;line-height: .6rem;}
	.f2Form dl{height: .82rem; margin-bottom: .26rem;}
	.f2Form dl dt{left: .2rem;font-size: .32rem; line-height: .82rem;}
	.f2Form dl dd{padding:0 .2rem 0 1.8rem;}
	.f2Form dl dd input,.f2Form dl dd select{height: .82rem; font-size: .32rem; line-height: .62rem; display: flex;display: -webkit-flex;align-items: center;}
	.f2Form .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;}
	/*f3Box*/
	.f3Box{padding:1rem .2rem .95rem;}
	.f3Box ul{padding-top: .4rem;display:flex;display:-webkit-flex;justify-content:space-between;flex-wrap:wrap;}
	.f3Box li{float:none;width:31%;height:auto;margin-bottom:.25rem; margin-right: 0;}
	.f3Box li img{width:100%;height:auto;}
	/*f4Box*/
	.f4Box{padding:1rem .2rem 1.2rem;}
	.f4Box .tit h2{font-size: .36rem;}
	.f4Tab{width: 100%; margin:.34rem auto 0;}
	.f4Tab span{float:left;width:50%;height:.6rem;line-height:.6rem;font-size:.28rem;}
	.f4Box .imgBox{width: 100%;}
	.f4Box .imgBox img{width:100%;height:auto; display: block;}
}