@charset "utf-8";
/*
* title:博爱曙光口腔科列表页
* Author:luochou
* Date:2024.3.19
*/
.new-header,.container{width:100%;margin:0 auto;}
.container{background-color:#f5f5f5;}
.container img{max-width:100%;display:block;}
.banner{width:100%;height:400px;overflow:hidden; background: url(/style/images/bapz/banner.jpg) no-repeat center top;}
.bannerWAP{display:none;}
.item{width:1200px;margin:0 auto;}

.module{padding:0 0 60px;}
.sidebar{position: relative; float: left; width: 280px;}
.content{float: right; width: 880px;}


.brand-left{position: relative;z-index: 2;width: 240px;margin:-100px 0 0 0;}
.sidebar_menu{margin-top: -100px; background: #fff; border-bottom: none;}
.sidebar_menu h2{height: 100px; background-color: rgba(34,168,169,.8); text-align: center;}
.sidebar_menu h2 span{line-height:40px;font-size:32px;color:#fff;font-weight:normal;padding-top:14px;display:block;}
.sidebar_menu h2 small{line-height:32px;font-size:20px;display:block;font-family: Arial, Helvetica, sans-serif;}
.sidebar_menu ul{border: 1px solid #e3e3e3; border-top: none; border-bottom: none;}
.sidebar_menu li{height: 60px;letter-spacing: 2px;border-bottom: 1px solid #e3e3e3;}
.sidebar_menu li a{display: block;height: 60px;text-align: center;overflow: hidden; line-height: 60px;font-size: 20px;color: #545454; border-left:3px solid #fff; border-left: 3px solid transparent; transition: background ease .3s,color ease .3s,border ease .3s;}
.sidebar_menu li a::after{display: inline-block;content: ''; width: 8px;height:18px;margin: 21px 0 0 18px;font-size:0;line-height:0;vertical-align:top;background: url(/style/images/bapz/arrow.png) left top no-repeat; transition: all .3s;}
.sidebar_menu li.on a,.sidebar_menu li a:hover{padding: 0;color: #4cbbb4;background: #eee;border-left: 3px solid #4cbbb4;}
.sidebar_menu li.on a::after,
.sidebar_menu li a:hover::after{background-position: left bottom;}
/* main_title */
.main_title{padding: 30px 0; overflow: hidden;}
.main_title h2{float: left; color: #333; font-size: 28px; font-weight: normal; line-height: 30px;}
.main_title .adr{float: right; color: #666; font-size: 16px; line-height: 30px;}
.main_title .adr a{color: #666;}
.main_title .adr a:hover{color: #22a8a9;}
.main_body{padding-top: 40px;}
.introduce{position: relative; padding: 50px 40px 30px; background-color: #fff; border: 1px solid #4cbbb4;}
.introduce h3{position: absolute; top:-30px; left: 50%; margin-left: -250px; width: 500px; height: 60px; background-color: #4cbbb4; color: #fff; font-size: 24px; line-height: 60px; text-align: center; font-weight: normal;}
.introduce p{padding-bottom: 12px; color: #333; font-size: 16px; line-height: 30px; text-indent: 2em; text-align: justify;}
.introduce::before,.introduce::after{position: absolute;top:50px;content: ''; width: 5px;background-color: #4cbbb4;}
.introduce::after{right:-3px;height:220px;}
.introduce::before{left: -3px;height: 60px;}
/*brand-slogan*/
.brand-slogan{padding: 50px 0 80px;}
.brand-slogan ul{padding-top: 10px;}
.brand-slogan li{float: left; width: 220px;transition: all linear .3s;}
.brand-slogan li:hover{transform: translateY(-10px);}
.brand-slogan li i{width: 160px; height: 160px; display: block; margin: 0 auto;}
.brand-slogan li .i1{background: url(/style/images/bapz/brand/qs1.png) no-repeat;}
.brand-slogan li .i2{background: url(/style/images/bapz/brand/qs2.png) no-repeat;}
.brand-slogan li .i3{background: url(/style/images/bapz/brand/qs3.png) no-repeat;}
.brand-slogan li .i4{background: url(/style/images/bapz/brand/qs4.png) no-repeat;}
.brand-slogan li h3{width: 4em;height: 50px; margin:0 auto; line-height: 50px; font-size: 24px;font-weight: normal; border-bottom: 2px solid #4cbbb4;}
.brand-slogan li p{padding: 10px 24px; color: #525252; font-size: 16px;text-align: center;line-height: 25px;}
/* brand-leader */
.brand-leader{position: relative; padding: 50px 40px 30px; margin-bottom: 60px; background-color: #fff; border: 1px solid #4cbbb4;}
.brand-leader h3{position: absolute; top:-30px; left: 50%; margin-left: -250px; width: 500px; height: 60px; background-color: #4cbbb4; color: #fff; font-size: 24px; line-height: 60px; text-align: center; font-weight: normal;}
.brand-leader p{padding-bottom: 12px; color: #333; font-size: 16px; line-height: 30px; text-indent: 2em; text-align: justify;}
.brand-leader::before,.brand-leader::after{position: absolute;top:50px;content: ''; width: 5px;background-color: #4cbbb4;}
.brand-leader::after{right:-3px;height:120px;}
.brand-leader::before{left: -3px;height: 60px;}
/* brand-jm-focus */
.brand-jm-focus{padding: 20px 20px 30px; margin-bottom: 80px; background-color: #fff; border-radius: 12px;}
.brand-jm-focus .bd{position:relative;width: 840px; height: 568px;overflow: hidden;}
.brand-jm-focus .bd li{width: 840px; height: 568px;overflow: hidden;}
.brand-jm-focus .bd .item{float: left;width: 410px;margin: 0 20px 20px 0;}
.brand-jm-focus .bd .nomar{margin-right: 0;}
.brand-jm-focus .bd .item img{width: 410px;height: 220px;}
.brand-jm-focus .bd .item p{height: 30px; padding-top: 14px; line-height: 30px;overflow: hidden;text-align: center;font-size: 16px;color: #666;}
.brand-jm-focus .hd{text-align: center;font-size: 0;line-height: 0;margin: 13px 0 0 0;}
.brand-jm-focus .hd li{display: inline-block;width: 12px;height: 12px;margin: 0 5px;overflow:hidden; border-radius: 6px; text-indent: -9999px;background: #4cbbb4; *display: inline; *zoom: 1; cursor: pointer;}
.brand-jm-focus .hd li.on{width: 52px;transition: all linear .2s;}
/* brand-quality */
.brand-quality{position: relative; padding: 50px 40px 30px; margin-bottom: 60px; background-color: #fff; border: 1px solid #4cbbb4;}
.brand-quality h3{position: absolute; top:-30px; left: 50%; margin-left: -200px; width: 400px; height: 60px; background-color: #4cbbb4; color: #fff; font-size: 24px; line-height: 60px; text-align: center; font-weight: normal;}
.brand-quality p{padding-bottom: 12px; color: #333; font-size: 16px; line-height: 30px; text-indent: 2em; text-align: justify;}
.brand-quality::before,.brand-quality::after{position: absolute;top:50px;content: ''; width: 5px;background-color: #4cbbb4;}
.brand-quality::after{right:-3px;height:120px;}
.brand-quality::before{left: -3px;height: 60px;}
.brand-quality-img{padding-bottom:30px;}

@media only screen and (max-width: 750px){
	.new-header,.container{min-width:320px;width:100%;max-width:750px;margin:0 auto;}
	.container{padding-bottom:0;}
	.container img{max-width:100%;display:block;}
	.item{width:auto;}

	.banner{display:none;}
	.bannerWAP{display: block;}
	.module{padding-bottom:0;}
	.sidebar{display:none;}
	.content{float: none; width: 100%;}
	/* main_title */
	.main_title{padding: .3rem .2rem;display: flex;display: -webkit-flex;flex-direction: column-reverse;}
	.main_title h2{float: none; padding-top: .24rem; font-size: .48rem; line-height: 1.6;}
	.main_title .adr{float: none; font-size: .28rem; line-height: 1.4;}
	/* introduce */
	.main_body{padding-top: .4rem;}
	.introduce{padding: .5rem .28rem .3rem; margin:0 .2rem;}
	.introduce h3{top:-.3rem; margin-left: -2.5rem; width: 5rem; height: .6rem; font-size: .32rem; line-height: .6rem;}
	.introduce p{padding-bottom: .12rem; font-size: .28rem; line-height: 1.6;}
	.introduce::before,.introduce::after{top:.5rem;width: .05rem;}
	.introduce::after{right:-.03rem;height:2.2rem;}
	.introduce::before{left: -.03rem;height:.6rem;}
	/*brand-slogan*/
	.brand-slogan{padding: .5rem 0 .8rem;}
	.brand-slogan ul{padding-top: .1rem; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between;}
	.brand-slogan li{float: none; width: 48%; margin-bottom: .2rem;}
	.brand-slogan li i{width: 1.6rem; height: 1.6rem;}
	.brand-slogan li .i1{background: url(/style/images/bapz/brand/qs1.png) no-repeat;background-size: 100% 100%;}
	.brand-slogan li .i2{background: url(/style/images/bapz/brand/qs2.png) no-repeat;background-size: 100% 100%;}
	.brand-slogan li .i3{background: url(/style/images/bapz/brand/qs3.png) no-repeat;background-size: 100% 100%;}
	.brand-slogan li .i4{background: url(/style/images/bapz/brand/qs4.png) no-repeat;background-size: 100% 100%;}
	.brand-slogan li h3{width: 4em;height: .6rem; line-height: .6rem; font-size: .36rem;}
	.brand-slogan li p{padding: .1rem .24rem; font-size: .3rem;line-height: 1.6;}
	/* brand-leader */
	.brand-leader{padding: .5rem .28rem .3rem; margin:0 .2rem .6rem;}
	.brand-leader h3{top:-.3rem;margin-left: -2.5rem; width: 5rem; height: .6rem;font-size: .32rem; line-height: .6rem;}
	.brand-leader p{padding-bottom: .12rem;font-size: .28rem; line-height: 1.6;}
	.brand-leader::before,.brand-leader::after{top:.5rem;width: .05rem;}
	.brand-leader::after{right:-.03rem;height:1.2rem;}
	.brand-leader::before{left: -.03rem;height: .6rem;}
	/* brand-jm-focus */
	.brand-jm-focus{padding: .2rem .2rem .3rem; margin:0 .2rem .8rem; border-radius: .12rem;}
	.brand-jm-focus .bd{width: 6.7rem; height: 6.2rem;}
	.brand-jm-focus .bd li{width: 6.7rem; height: 6.2rem; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between;}
	.brand-jm-focus .bd .item{float: none;width: 48%;margin: 0 0 .2rem 0;}
	.brand-jm-focus .bd .nomar{margin-right: 0;}
	.brand-jm-focus .bd .item img{width: 100%;height: auto;}
	.brand-jm-focus .bd .item p{height: auto; padding: .14rem .2rem 0; line-height: .4rem;font-size: .28rem;}
	.brand-jm-focus .hd{margin: .13rem 0 0 0;}
	.brand-jm-focus .hd li{width: .24rem;height: .24rem;margin: 0 .1rem;border-radius: .12rem;}
	.brand-jm-focus .hd li.on{width: 1rem;}
	/* brand-quality */
	.brand-quality{padding: .5rem .2rem .3rem; margin:0 .2rem .6rem;}
	.brand-quality h3{top:-.3rem; margin-left: -2rem; width: 4rem; height: .6rem;font-size: .32rem; line-height: .6rem; }
	.brand-quality p{padding-bottom: .12rem;font-size: .28rem; line-height: 1.6;}
	.brand-quality::before,.brand-quality::after{top:.5rem;width: .05rem;}
	.brand-quality::after{right:-.03rem;height:1.2rem;}
	.brand-quality::before{left: -.03rem;height: .6rem;}
	.brand-quality-img{padding:0 .2rem .3rem;}
	
}