@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_price.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: 80px;}
.f1Box .tit h2 b{padding-right: 10px;}
.f1Table{padding: 32px 0 50px;}
.f1Table table,.f1Table table tr,.f1Table table tr th,.f1Table table tr td{border:1px solid #eaeaea; border-collapse: collapse;}
.f1Table table{width: 100%;}
.f1Table table tr th{width: 400px; padding: 10px 0; background-color: #01a0a1; color: #e4f4f9; font-size: 32px; }
.f1Table table tr td{padding: 10px 0; color: #777; font-size: 24px; text-align: center;}
.f1Box .btn{width: 260px; height: 48px; margin:0 auto; display: block; background-color: #ff8a00;border-radius:12px; 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:90px;}
.f2Box .tit h2 b{padding-right: 10px;}
.f2Table{padding: 32px 0 50px;}
.f2Table table,.f2Table table tr,.f2Table table tr th,.f2Table table tr td{border:1px solid #eaeaea; border-collapse: collapse;}
.f2Table table{width: 100%;}
.f2Table table tr th{width: 400px; padding: 10px 0; background-color: #01a0a1; color: #e4f4f9; font-size: 32px; }
.f2Table table tr td{padding: 10px 0; color: #777; font-size: 24px; text-align: center;}
.f2Box .btn{width: 260px; height: 48px; margin:0 auto 80px; display: block; background-color: #ff8a00;border-radius:12px; 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 .imgBox{width: 1192px; margin: 0 auto;}
.f2Box .imgBox img{width: 100%; display: block;}
/*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: .8rem .2rem 0;}
	.f1Box .tit h2 b{padding-right: .1rem;}
	.f1Table{padding: .32rem 0 .5rem;}
	.f1Table table tr th{width: 33.33%; padding: .18rem 0; font-size: .34rem;}
	.f1Table table tr td{padding: .16rem 0;font-size: .28rem;}
	.f1Box .btn{width: 3.2rem; height: .68rem;border-radius:.12rem;font-size:.36rem;line-height: .4rem; display: flex;display: -webkit-flex;align-items: center;justify-content: center;}
	/*f2Box*/
	.f2Box{padding:.9rem .2rem 0;}
	.f2Box .tit h2 b{padding-right: .1rem;}
	.f2Table{padding: .32rem 0 .5rem;}
	.f2Table table tr th{width: 33.33%; padding: .18rem 0; font-size: .34rem;}
	.f2Table table tr td{padding: .16rem 0;font-size: .28rem;}
	.f2Box .btn{width: 3.2rem; height: .68rem; margin: 0 auto .8rem; border-radius:.12rem;font-size:.36rem;line-height: .4rem; display: flex;display: -webkit-flex;align-items: center;justify-content: center;}
	.f2Box .imgBox{width: 100%;}
	/*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;}
}