@import url("../res/base.css");
h1,h2,h3,h4,h5{font-weight:lighter;}
p{line-height:2;}
.ad{width:100%; height:434px; background:url("byby_02.jpg") no-repeat 50% 50%; background-size:auto 100%; display: block;}

section{width:100%; padding:4em 0.5em;}
section>div{margin:0 auto; width:100%; max-width:1200px;}
h1,h2{padding-bottom:1em; color:#005bab; font-size:2rem; line-height:1; text-align: center}
h1:after,h2:after{margin:1em auto 0 auto; width:1em; height:2px; content:""; background-color:#005bab; display: block;}
h1{font-size:2rem;}
h1:after{margin-left:auto; margin-right:auto;}

.p1{font-size:1.2rem; text-align:center; color:#266ab2;}
.p1 p+p{margin-top:1em;}
.p1 p span{color:#cab166;}
.p1 img{margin:1em auto 0 auto; width:100%; max-width:589px;}
.p1 img+div{margin-top:2em; padding:2em 4em; width:100%; max-width:1200px; color:#005bab; background-color:#edf4f9; border-radius:1em; position:relative;}
.p1 img+div:before, .p1 img+div:after{font:6em Arial; position:absolute;}
.p1 img+div:before{content:"“"; left:0.2em; top:0;}
.p1 img+div:after{content:"”"; right:0.2em; bottom:-0.6em;}
.p1 img+div p{text-indent:2em;}
.p1 img+div p+p{margin-top:1em}

.reason{background:50% 50% no-repeat; background-size:auto 100%;}
.reason>div:nth-of-type(1){display: flex; justify-content: space-between; flex-wrap: wrap;}
.reason>div:nth-of-type(1) div{margin-top:2em; padding:3em 2em 2em 2em; width:47%; border:#005bab 2px solid; border-radius:1em; display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction:row; align-content:flex-start; position:relative; }
.reason>div:nth-of-type(1) div h3{padding:0 1em; font-size:1.5rem; font-weight:bold; line-height:1; color:#005bab; background-color:#fff; position:absolute; left: 50%; top:0; transform: translate(-50%,-50%);}
.reason>div:nth-of-type(1) div a{width:32%; padding:1em 0.5em; text-align: center; color:#005bab; background-color:#fff; border:#f1f1f1 1px solid; box-shadow: 0 0 5px #eee inset; display:flex; justify-content: center; align-items: center;}
.reason>div:nth-of-type(1) div a:nth-of-type(n+4){margin-top:1em;}
.reason>div:nth-of-type(1) div a:hover{background-color:#005bab; color:#fff;}

.p2{min-height:653px; background-image: url("byby_04.jpg");}
.p3{margin-top:2em; min-height:556px; background-image: url("byby_05.jpg"); background-position: 50% 100%;}
.p3 .cbtn{padding-top:2em;}

.p4{ background: url("byby_06.jpg") no-repeat 50% 50%; background-size: 100% 100%;}
.p4 header{margin:0 auto; width:100%; max-width:1200px; text-align: center; color:#fff;}
.p4 h2{color:#fff; }
.p4 h2:after{background-color:#fff; }
.p4>div{margin-top:2em;}
.p4>div>p{text-align: center; color:#fff;}
.p4 dl{margin-top:2em; width:100%; overflow: hidden;}
.p4 dl dd{width:100%; overflow: hidden; background-color:#fff; color: #005bab;}
.p4 dl dd img{float:left; display:inline; width:50%;}
.p4 dl dd div{float:left; display:inline; padding:2em; width:50%;}
.p4 h3{padding-bottom:1em; font-size:1.2rem; }
.p4 h3:after{margin-top:1em; width:1em; height:2px; content:""; background-color:#005bab; display:block;}
.p4 ul{margin-top:2em; width:100%; display: flex; justify-content: space-around; align-items: center;}
.p4 li{width:122px; height:122px; display:flex; justify-content:center; align-items: center; position:relative; border-radius:100%; flex-shrink:0;}
.p4 li:after{width:50%; height:50%; content:""; border:#fff 5px solid; position:absolute; display:none;}
.p4 li i{width:79px; height: 79px; background:url("icon.png") no-repeat; flex-shrink: 0;}
.p4 li:nth-of-type(1) i{background-position:0 0;}
.p4 li:nth-of-type(2) i{background-position:-79px 0;}
.p4 li:nth-of-type(3) i{background-position:-158px 0;}
.p4 li:nth-of-type(4) i{background-position:-237px 0;}
.p4 li:nth-of-type(5) i{background-position:-316px 0;}
.p4 li:nth-of-type(6) i{background-position:-395px 0;}
.p4 li:nth-of-type(4n+1):after{border-right:0; border-bottom:0; border-radius:100% 0 0 0;  left: 0; top:0; transform:translate(-5px,-5px);}
.p4 li:nth-of-type(4n+2):after{border-left:0; border-bottom:0; border-radius:0 100%  0 0;  right: 0; top:0; transform:translate(5px,-5px);}
.p4 li:nth-of-type(4n+3):after{border-left:0; border-top:0; border-radius:0 0 100% 0;  right: 0; bottom:0; transform:translate(5px,5px);}
.p4 li:nth-of-type(4n+4):after{border-right:0; border-top:0; border-radius:0 0 0 100%;  left: 0; bottom:0; transform:translate(-5px,5px);}
.p4 li.c{ border:#fff 1px solid;}
.p4 li.c:after{display:block;}

.p5 div{display:table; line-height:2;}
.p5 div dl{display:flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.p5 div dd{width:50%;}
.p5 h3,.p5 ul{padding-left:2rem;}
.p5 ul{margin-top:1em;}
.p5 h3{font-size:1.5rem; color:#005bab;}
.p5 img{width:100%; display: block;}
.p5 i{margin-right:0.5em; color:#005bab}

.p6{min-height:780px; background: url("byby_15.jpg") 50% 50% no-repeat; background-size:auto 100%;}
.p6 h2{color:#fff;}
.p6 h2:after{background-color:#fff;}
.p6 ul{width:100%; display: flex; justify-content: space-between;}
.p6 li{padding:1em 0.5em; width:49.9%; font-size:1.2rem; text-align: center; background-color:#fff; border-radius:0.5em 0 0 0.5em;}
.p6 li+li{ border-radius: 0 0.5em 0.5em 0;}
.p6 li.c{background-color:#cab166; color:#fff; position:relative;}
.p6 li.c:after{content:""; border-top:#cab166 8px solid; border-left:transparent 8px solid;  border-right:transparent 8px solid; position:absolute; left: 50%; bottom:1px; transform: translate(-50%,100%); display: block;}
.p6 li i{margin-right:0.5em;}
.p6>div div{margin-top:2em;}
.p6 dl{width:100%; overflow: hidden;}
.p6 dd{float:left; display:inline-block; padding:2em 2.5em; width:32.6%; min-height:22em; background-color:#fff; border-radius:0.5em; text-align: center; counter-increment:tech 1;}
.p6 dd+dd{margin-left:1%;}
.p6 dd:before{margin:1rem auto 0 auto; font:2.5rem/1 Impact; color:#cab166; content: "0"counter(tech); display: block;}
.p6 h3{margin:1rem auto 0 auto; color:#cab166; display: block;}
.p6 p{margin-top:1em;}
.p6 .cbtn{padding-top:2em;}
.p6 .cbtn a{box-shadow:none;}

.doctor{padding-bottom: 2em; overflow: hidden;}
.doctor>div:nth-of-type(1){width:100%; overflow: hidden;}
.doctor>div:nth-of-type(1) a{float:left; display: inline; margin:1em 0 0 2%; padding-bottom:0.5em; width:32%; text-align:center; border:#ddd 1px solid; background-color:#f1f1f1; }
.doctor>div:nth-of-type(1) a:nth-child(3n-2){margin-left:0; clear:left;}
.doctor>div:nth-of-type(1) a img{max-width:100%;}
.doctor>div:nth-of-type(1) a div{line-height:2; display:block;}
.doctor>div:nth-of-type(1) a p{font-size:0.8rem;}

.p7{background-color:#f7f7f7;}
.p7>div{display:flex; justify-content: space-between; align-content: space-between;}
.p7>div a{width:30%; display: flex; flex-direction: column;}
.p7>div a div{width:100%; height:17em; display: flex; justify-content: center; align-items: center; background-color: #fff;}
.p7>div a img{max-width:100%; max-height:100%; display: block;}
.p7>div a  strong{font-weight:lighter; font-size:1.2rem; color:#005bab;}
.p7>div a>*{display: block;}
.p7>div a>*+*{margin-top:1em;}

.p8{background: url("byby_16.jpg") 50% 50% no-repeat; background-size:auto 100%;}
.p8 h2{color:#fff;}
.p8 h2:after{background-color:#fff;}
.p8>div:nth-of-type(1){display: flex; justify-content: space-between; align-items:center; flex-wrap: wrap;}
.p8>div:nth-of-type(1) a{margin-top:1em; padding:1em 2em; width:49%; color:#666; background-color: #fff; border-radius:0.5em; display: flex; justify-content: space-between; align-items:center;}
.p8>div:nth-of-type(1) a:hover{color:#a3a0e6;}
.p8>div:nth-of-type(1) a:before{margin-right:0.5em; width:1.8em; height:1.8em; content:"问"; text-align: center; line-height:1.8; color:#fff; background-color:#a3a0e6; border-radius:100%; flex-shrink:0;}
.p8>div:nth-of-type(1) a span{flex-grow:1;}
.p8>div:nth-of-type(1) a i{font-size:1.5rem; color:#ddd;}
.p8>div:nth-of-type(1) a:hover i{color:#a3a0e6;}
.p8 .cbtn{padding-top:3em;}
.p8 .cbtn a{box-shadow:none;}

@media screen and (max-width:1200px){
	.ad{height:44.1vw;}
	.reason{padding:2em 0.5em;}
	.reason>div:nth-of-type(1) div{padding:2em 1em 1em 1em}
	.reason>div:nth-of-type(1) div{width:49%}
	.p4{background-size:auto 100%;}
	.p4 dl dd img{width:47vw; height:25vw;}
	.p4 dl dd div{padding:0.5em; width:47vw; }
	.p4 dl dd div p{line-height:1.3; font-size:0.8rem;}
	.p4 li{width:14vw; height:14vw;}
	.p4 li i{transform:scale(0.8)}
	.p6{min-height:0;}
	.p6 dd{padding:1em;}
	.p7>div a div{height:22vw;}
}

@media screen and (max-width:800px){
	.p5 div{display:table; line-height:1.5;}
	.p6 dd{padding:0.5em; font-size:0.8rem;}
	.doctor{padding-left:0.5em; padding-right:0.5em;}	
	.doctor>div:nth-of-type(1) a{margin-top:2em; width:48%;}
	.doctor>div:nth-of-type(1) a:nth-of-type(2n){margin-left:4%;clear: none}
	.doctor>div:nth-of-type(1) a:nth-of-type(2n-1){margin-left:0; clear:left;}
	.p7>div a  strong{font-size:1rem;}
	.p7>div a p{font-size:0.8rem;}
	.p8>div:nth-of-type(1) a{padding:1em; font-size:0.8rem;}
}

@media screen and (max-width:640px){
	h2{font-size:1.5rem;}
	.p1{font-size:0.9rem;}
	.reason>div:nth-of-type(1) div{width:100%;}
	.p4 dl dd img,.p4 dl dd div{width:100%;}
	.p4 dl dd img{width:100%;height:50vw}
	.p4 dl dd div p{line-height:2;}
	.p4 li i{transform:scale(0.5)}
	.p5 div dl+dl{flex-direction: column-reverse;}
	.p5 div dd{margin-top:1em;width:100%;}
	.p6 dd{width:100%; min-height:0;}
	.p6 dd:before, .p6 h3{display: inline-block; vertical-align: middle}
	.p6 dd:before{font-size:1rem;}
	.p6 dd+dd{margin:1em 0 0 0;}
	.p7>div{flex-wrap: wrap;}	
	.p7>div a{width:100%;}
	.p7>div a div{height:60vw;}
	.p7>div a+a{margin-top:2em;}
	.p8>div:nth-of-type(1) a{width:100%;}
}