@charset "utf-8";
/*
* title:博爱曙光植发科香港竞价PC端品牌
* Author:luochou
* Date:2024.4.29
*/
.new-header,.container{width:100%;margin:0 auto;}
.bgColor{background-color: #f7f7f7;}
.bgColor2{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/brand/banner.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:90px 0 120px;}
.f1Box ul{padding:60px 0 64px; overflow: hidden;}
.f1Box li{float: left; width: 262px; height: 334px; padding-top: 40px; background-color: #fcfcfc; margin-right: 50px;box-sizing: border-box; transition:all  .3s;}
.f1Box li.i4{margin-right: 0}
.f1Box li span{position: relative; width: 84px; height: 84px; margin: 0 auto; display: block; background-color: #dcf5f5; border-radius: 50%;}
.f1Box li span .icon{position: absolute; top:50%; left: 50%; background:url(/style/images/brand/f1Box_icon.png) no-repeat;transition:all  .3s;}
.f1Box li.i1 .icon{width: 49px; height: 39px; margin: -20px 0 0 -20px; background-position: 0 0;}
.f1Box li.i2 .icon{width: 46px; height: 44px; margin: -22px 0 0 -23px; background-position: -60px 0;}
.f1Box li.i3 .icon{width: 50px; height: 51px; margin: -25px 0 0 -25px; background-position: -120px 0;}
.f1Box li.i4 .icon{width: 42px; height: 42px; margin: -21px 0 0 -21px; background-position: -180px 0;}
.f1Box li h3{padding-top: 22px; color: #111; font-size: 28px; line-height: 54px; text-align: center;}
.f1Box li p{color: #555; font-size: 22px; line-height: 36px; text-align: center;}
.f1Box li:hover{background-color: #fff; box-shadow: 0 8px 29px rgba(24,98,99,.1); cursor: pointer;}
.f1Box li:hover span{background-color: #159496;}
.f1Box li.i1:hover .icon{background-position: 0 -60px;}
.f1Box li.i2:hover .icon{background-position: -60px -60px;}
.f1Box li.i3:hover .icon{background-position: -120px -60px;}
.f1Box li.i4:hover .icon{background-position: -180px -60px;}
.f1Box dl{position: relative; height: 514px; background-color: #fff;}
.f1Box dl dt{padding: 52px 640px 0 40px;}
.f1Box dl dt p{padding-bottom: 36px; color: #333; font-size: 22px; line-height: 38px; text-align: justify;}
.f1Box dl dd{position: absolute; top:46px; right: 32px; width: 556px;}
.f1Box dl dd img{float: left; width: 268px; height: 181px; display: block;}
.f1Box dl dd .img1{width: 556px; height: 227px; margin-bottom: 18px;}
.f1Box dl dd .img3{float: right;}
/*f2Box*/
.f2Box{padding:90px 0 26px;}
.f2Con{padding: 70px 10px 0;}
.f2Con dl{position: relative; height: 397px; margin-bottom: 74px; background-color: #f2f9f9;}
.f2Con dt{position: absolute; top:0; width: 590px; height: 397px;}
.f2Con .d1 dt,.f2Con .d3 dt{left: 0;}
.f2Con .d2 dt{right: 0;}
.f2Con dt img{position: relative; width: 590px; height: 397px; display: block;}
.f2Con dt .full{position: absolute; top:-10px; width: 476px; height: 320px; background-color: #159496;}
.f2Con .d1 dt .full,.f2Con .d3 dt .full{left: -10px;}
.f2Con .d2 dt .full{right: -10px;}
.f2Con .d1 dd,.f2Con .d3 dd{padding:58px 42px 0 640px;}
.f2Con .d2 dd{padding:58px 640px 0 46px;}
.f2Con .d3 dd{padding-top: 30px;}
.f2Con dd h3{color: #159496; font-size: 46px; font-weight: normal; line-height: 72px;}
.f2Con dd p{color: #333; font-size: 24px; line-height: 40px; text-align: justify;}
/*f3Box*/
.f3Bg{background:url(/style/images/brand/f3Bg.jpg) no-repeat center top;}
.f3Box{padding:78px 0 120px;}
.f3Box h2{padding-bottom: 56px; color: #ffd200; font-size: 32px; text-align: center; line-height: 66px;}
.f3Box h2 span{width: 305px; height: 35px; margin: 0 auto; display: block; border-radius: 8px; border: 1px solid #fff; color: #fff; font-size: 24px; font-weight: normal; line-height: 35px; text-align: center;}
.f3Box .imgBox{width: 1176px; margin: 0 auto; border: 10px solid #159496;}
.f3Box .imgBox img{width:1176px; height: 606px; 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.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: .72rem;}
	.container .tit .txt{line-height: .42rem;font-size: .42rem;}
	.container .tit h2{font-size: .46rem;line-height:.72rem;}
	/*f1Box*/
	.f1Box{padding:.9rem .2rem 1.2rem;}
	.f1Box ul{padding:.6rem 0 .64rem; display:flex;display:-webkit-flex;flex-wrap: wrap;justify-content:space-between;}
	.f1Box li{float: none; width: 48%; height: 3.34rem; padding-top: .4rem; background-color: #fff; margin-bottom: .2rem; margin-right: 0;}
	.f1Box li span{width: 1rem; height: 1rem;}
	.f1Box li span .icon{transform: translate(-50%, -50%); background:url(/style/images/brand/f1Box_icon.png) no-repeat; background-size: 2.4rem 1.2rem;}
	.f1Box li.i1 .icon{width: .49rem; height: .39rem; margin:0; background-position: 0 0;}
	.f1Box li.i2 .icon{width: .46rem; height: .44rem; margin:0; background-position: -.6rem 0;}
	.f1Box li.i3 .icon{width: .5rem; height: .51rem; margin:0; background-position: -1.2rem 0;}
	.f1Box li.i4 .icon{width: .42rem; height: .42rem; margin:0; background-position: -1.8rem 0;}
	.f1Box li h3{padding-top: .22rem;font-size: .32rem; line-height: .64rem;}
	.f1Box li p{font-size: .28rem; line-height: 1.4;}
	.f1Box dl{height: auto; background-color: #fff;}
	.f1Box dl dt{padding:.3rem .2rem 0;}
	.f1Box dl dt p{padding-bottom: .36rem;font-size: .28rem; line-height: 1.4;}
	.f1Box dl dd{position: relative; top:auto; right: auto; width: 100%; padding: .2rem .2rem .32rem;box-sizing: border-box;display:flex;display:-webkit-flex;flex-wrap: wrap;justify-content:space-between;}
	.f1Box dl dd img{float: none; width: 48%; height: auto;}
	.f1Box dl dd .img1{width: 100%; height: auto; margin-bottom: .2rem;}
	.f1Box dl dd .img3{float: none;}
	/*f2Box*/
	.f2Box{padding:.9rem .2rem .26rem;}
	.f2Con{padding: .7rem .1rem 0;}
	.f2Con dl{position: relative; height: auto; margin-bottom: .36rem;}
	.f2Con dt{position: relative; top:auto; width:100%; height: auto;}
	.f2Con .d1 dt,.f2Con .d3 dt{left: auto;}
	.f2Con .d2 dt{right: auto;}
	.f2Con dt img{width: 100%; height: auto;}
	.f2Con dt .full{top:-.1rem; width: 48%; height: 3.2rem;}
	.f2Con .d1 dt .full,.f2Con .d3 dt .full{left: -.1rem;}
	.f2Con .d2 dt .full{right: -.1rem;}
	.f2Con dd{padding:.32rem .28rem .32rem !important;}
	.f2Con dd h3{font-size: .32rem;line-height: 1.8;}
	.f2Con dd p{font-size: .28rem; line-height: 1.5;}
	/*f3Box*/
	.f3Bg{background:url(/style/images/brand/f3Bg.jpg) no-repeat center top; background-size: 100% 3.4rem;}
	.f3Box{padding:.78rem 0 1.2rem;}
	.f3Box h2{padding-bottom: .56rem; font-size: .38rem; line-height: 1.8;}
	.f3Box h2 span{width: 4rem; height: .42rem; border-radius: .08rem;font-size: .28rem;line-height: 1.5; line-height:.42rem;}
	.f3Box .imgBox{width: 90%; border: .1rem solid #159496;}
	.f3Box .imgBox 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;}
}