@import url("../res/base.css");
h1,h2,h3,h4,h5{font-weight:lighter;}
h2{padding-bottom:1em; color:#005bab; font-size:2rem; line-height:1;}
h2:after{margin-top:1em; width:1em; height:2px; content:""; background-color:#005bab; display: block;}
section{width:100%; padding:4em 0.5em;}
section>header{text-align:center;}
section>header h2:after{margin-left:auto; margin-right:auto;}
section>header p{line-height:2}

section>div{margin:0 auto; width:100%; max-width:1200px;}
.ad{width:100%; height:434px; background:url("sgye_02.jpg") no-repeat 50% 50%; background-size:auto 100%; display:flex; justify-content: center; flex-direction: column; align-items:center;}
.ad>*{transform: translateX(50%);}
.ad>*+*{margin-top:0.5em;}
.ad h1{font-size:3rem; line-height:1; color:#005bab; text-shadow:#fff 1px 1px 10px;}
.ad span{font-size:1.2rem; line-height:2; color:#005bab; text-transform:uppercase; text-shadow:#fff 1px 1px 10px;}
.ad p{padding:0.5em 1em; font-size:1.5rem; letter-spacing:5px; background-color:#005bab; color:#fff; border-radius:2em;}


.p1>div{display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap} 
.p1>div>div{width:50%; max-width:600px;}
.p1>div .cbtn{text-align: left;}
.p1 p{line-height:2;}
.p1 img{width:50%; max-width:540px;}

.p2{min-height:850px; color:#fff; background: url("sgye_04.jpg") no-repeat 50% 50%; background-size:auto 100%;}
.p2 h2{margin:0 auto; width:100%; max-width:1200px; color:#fff;}
.p2 h2:after{display:none;}
.p2 ul{margin:2em auto 0 auto; width:100%; max-width:1200px; display: flex; justify-content:space-between; flex-wrap: wrap;}
.p2 li{padding:2em; width:31%; line-height:2; overflow:hidden; background-color: #fff; color:#333; border-radius:1em; display:flex; flex-direction: column; }
.p2 h3{margin-top:1em; min-height:6em; font-size:1.2rem; text-align: center; color:#005bab;}
.p2 h3 strong{margin:0 auto; display: block;}
.p2 i{margin:0 auto; width:79px; height:79px; display: flex; justify-content: center; align-items:center;}
.p2 i:before{width:79px; height:79px; content:""; flex-shrink:0; background:#005bab url(icon.png) no-repeat; border-radius:100%; display: block;}
.p2 li:nth-of-type(1) i:before{background-position:0 0;}
.p2 li:nth-of-type(2) i:before{background-position:-79px 0;}
.p2 li:nth-of-type(3) i:before{background-position:-158px 0;}
.p2 li div{margin-top:1em; padding-top:1em; min-height:6em; border-top:#ddd 1px solid; overflow: hidden;}
.p2 p{font-size:0.9rem;}
.p2 h3+p{min-height:8em;}
.p2 .special{color:#f00; font-size:1.2rem;}
.p2 .cbtn{margin-top:2em;}
.p2 .cbtn a{box-shadow:none;}

.p3{padding-bottom:1em; background:linear-gradient(#fff ,#f2f7fb);}
.p3>div{ background: url("sgye_03.png") no-repeat 100% 100%; background-size:auto 100%;}
.p3>div>div{width:60%;}
.p3 p{line-height:2;}
.p3 .cbtn{text-align:left}
.p3 ul{margin-top:2em; padding:1em 0 1em 1em; position:relative;}
.p3 ul:before{width:1px; height:100%; content:""; background: linear-gradient(#fff,#005bab,#fff); display:block; position:absolute; left:0; top:50%; transform: translateY(-50%);}
.p3 li+li{margin-top:1em;}
.p3 li strong{font-size:1.5rem; color:#005bab; font-weight: lighter; position:relative;}
.p3 li strong:before{width:0.3em; height:0.3em; background-color:#005bab; border-radius:50%; content: ""; display: block; position:absolute; left:-0.78em; top:50%; transform:translateY(-50%)}
.p3 .notice{margin-top:1em; font-size:1.2rem; color:#f00;}

.p4 section{margin:4em auto 0 auto; padding:3em 0 2em 0; width:100%; max-width:690px; text-align: center; border:#7fadd5 2px dashed; border-radius: 2em; position:relative;}
.p4 section header, .p4 section footer{ width:80%; text-align: center; background-color:#005bab;  position:absolute; border-radius:0.5em;}
.p4 section header{padding:1em; left:50%; top:0; font-size:1.2rem; transform:translate(-50%,-50%); color:#fff;}
.p4 section header span{color:#ffe79f;}
.p4 section footer{padding:0.5em;background-color:#e8f2fa; left:50%; bottom:0;  transform:translate(-50%,50%);}
.p4 section span{color:#ceae4f;}
.p4 section div{padding:0.5em; width:100%; font-size:0.9rem; border:#005bab 1px solid; border-radius:0.5em;}
.p4 section>div{width:80%;}
.p4 section>div strong{margin:0 auto; font-size:1.2rem; font-weight:lighter; display:block; color:#ceae4f;}
.p4 section>div+div{margin-top:5px;}
.p4 .fa{margin:0.5em auto 0 auto; font-size:1.5rem; color:#005bab; display: block; text-align: center;}
.p4 section+.fa{margin-top:1em;}
.p4 .fa+*{margin-top:1em;}
.p4 .fa+section{margin-top:3em;}
.p4 section header+.fa{margin-top:0;}
.p4 div.hasSub, .p4 .sub{border:0; padding:0;}
.p4 div.hasSub{ display:flex; justify-content: space-between;}
.p4 .sub{display:flex; justify-content:space-around; flex-direction: column; align-items: center;}
.p4 .sub+.sub{margin-left:1em;}
.p4 .sub div{border:0; background-color:#e8f2fa;}
.p4 .sub .fa{margin-top:0;}
.p4 .sub .fa+*{margin-top:0;}
.p4 i.longarrow{width:0; height:2em; font-size:1.5rem; line-height:1; border-left:#005bab 1px dashed; position:relative;}
.p4 i.longarrow:before{position:absolute; left:0; bottom:0; transform:translate(-50%,60%)}
.p4 .part2{padding-bottom:10em; position:relative;}
.p4 .part2 div.hasSub{position:absolute; left:50%; bottom:-3em; transform: translate(-50%,0)}
.p4 .part2+section{margin-top:5em;}
.p4 .sub .sub, .p4 .sub div.hasSub{background-color:#fff;}
.p4 .leaf{padding:0; line-height:1.2; min-height:2.5em; display: flex; justify-content: center; align-items:center;}
.p4 #bigSub>.sub:nth-of-type(1){width:40%;}
.p4 #bigSub>.sub+.sub{padding-left:1em; border-left:#005bab 1px solid; border-radius:0;}
.p4 .leaf .fa{margin:0 0.1em; font-size:1.2em; font-weight:lighter;}
.p4 .leaf .fa-check-circle-o{color:green;}
.p4 .leaf .fa-ban{color:darkred;}

.p5{background-color: #f2f7fb}
.p5>div:nth-of-type(1){margin-top:2em; display: flex; justify-content:space-between; flex-wrap: wrap;}
.p5 section{padding:0; width:48%; display: flex;  justify-content: space-between; flex-wrap:wrap; border-radius:1em; background-color:#fff; overflow: hidden; box-shadow:#ddd 3px 3px 10px;}
.p5 section ul{width:70%;padding:2em 3em; text-align:center; display:flex; justify-content: space-between; flex-wrap: wrap;}
.p5 section li{margin-top:0.5em; padding:0 1.5em; width:45%; height:3.625em; color:#fff; border-radius:0.5em; background-color:#7ba9e5; display: flex; justify-content: center; align-items: center;}
.p5 section header{width:25%; flex-shrink:0; color:#fff; background: url("sgye_06.jpg") no-repeat 0 0; background-size:100% 100%; flex-grow:1; position:relative;}
.p5 section header:before{width:100%; height:100%; content:""; display: block; background: linear-gradient(#005bab,transparent); position:absolute; left:0; top:0;}
.p5 section header h3{position:absolute; left:2rem; top:2rem; font-size:1.5rem;}
.p5 section header span{position:absolute; left:2rem; top:4rem;}
.p5 section+section{flex-direction: row-reverse}
.p5 section+section header{background-image: url("sgye_07.jpg")}
.p5 .cbtn{margin-top:3em;}

.p6{min-height:760px; background: url("sgye_09.jpg") no-repeat 50% 50%; background-size: auto 100%;}
.p6 h2{margin-top:1em; color:#fff;}
.p6 h2:after{background-color:#fff;}
.p6>div:nth-of-type(1){margin-top:2em; padding:2em 0; position:relative; overflow:hidden;}
.p6>div:nth-of-type(1):before,.p6 div:nth-of-type(1):after{width:310px; height:310px; content:""; border-radius:50%;position:absolute; left: 50%; top:50%; transform: translate(-50%,-50%); display: block;}
.p6>div:nth-of-type(1):after{ background:url("sgye_08.jpg") no-repeat 50% 50%; background-size:100% 100%;}
.p6>div:nth-of-type(1):before{border:#619dd1 15px solid; opacity:0.5}
.p6 ul{height:18em; display: flex; justify-content: space-between; align-items:flex-start; flex-direction: column; flex-wrap:wrap; counter-reset: tech; }
.p6 li{margin-top:2em; width:33%; min-height:4em; display: flex; justify-content:center; align-items: center; background-color:#fff; position:relative;}
.p6 li:before{width:1.5em; height:1.5em; text-align: center; line-height:1.5; content:counter(tech);counter-increment:tech; background-color: #00a0e9; color:#fff; border-radius:50%; position: absolute; right:0; bottom:0; transform:translate(50%,50%);}
.p6 li:nth-of-type(n+4){align-self:flex-end}
.p6 li:nth-of-type(1),.p6 li:nth-of-type(4){margin-top:0;}
.p6 li:nth-of-type(n+4):before{right:auto; left:0; transform:translate(-50%,50%)}
.p6 .cbtn{margin-top:2em;}
.p6 .cbtn a{box-shadow: none;}

.p7 dl{margin-top:1em; padding:0 0.5em; width:100%; line-height:2; background-color:#f4f7f9; border-radius:0.5em;}
.p7 dt, .p7 dd{margin:0 auto;width:100%; max-width:1100px; display:flex; justify-content: space-between;}
.p7 dt{padding:1em 0; align-items:center; font-size:1.2rem; cursor: pointer;}
.p7 dt i{color:#bbb;}
.p7 dd{align-items:flex-start; border-top:#d1d1d1 1px dashed; height:0px; color:#666; overflow: hidden; visibility: hidden;-webkit-transition:all 0.2s linear 0s; -moz-transition:all 0.2s linear 0s;  -o-transition:all 0.2s linear 0s; transition:all 0.2s linear 0s;}
.p7 dt:before,.p7 dd:before{margin-right:0.5em; width:1.8em; height:1.8em; font-size:1.1rem; color:#fff; text-align: center; line-height:1.8; border-radius:50%; background-color:#005bab; display:block; flex-shrink:0;}
.p7 dt:before{content:"问"}
.p7 dt span{flex-grow:1;}
.p7 dd:before{content:"答"; background-color:#cab166;}
.p7 dd div{flex-grow:1;}
.p7 dd div p{text-indent:2em;}

.p8{min-height: 820px;background: url("sgye_10.jpg") 50% 50% no-repeat; background-size: auto 100%;}
.p8 header{color:#fff;}
.p8 h2{color:#fff;}
.p8 h2:after{background-color:#fff;}
.p8 dl{width:100%;}
.p8 dd{padding:2em; width:100%; border-radius:1em; background-color: #fff; line-height:2;}
.p8 h3{font-size:1.5rem;}
.p8 h3 i{margin-right:1em; width:1.8em; height:1.8em; text-align: center; line-height:1.8; font-style: normal; color:#fff; background-color:#a3a0e6; border-radius:50%; display: inline-block; vertical-align:middle;}
.p8 dd>*+*{margin-top:1em;}
.p8 div{margin-top:3em;}
.p8 p{text-indent:2em;}
.p8 ul{margin:3em auto 0 auto; width:5em; display: flex; justify-content:space-around; }
.p8 li{width:2em; height: 3px; background-color:#fff; opacity:0.5;}
.p8 li.c{opacity:1;}
.p8 .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;}

@media screen and (max-width:1200px){
	.ad{height:50vw;}
	.p2 li{padding:1em 0.5em; width:32%;}
	.p2 .special{font-size:1rem;}
	.p5 section ul{padding:1em;}
	.p5 section header{min-height:18.75vw;}
	.p5 section header h3{left:1rem; top:1rem;}
	.p5 section header span{left:1rem; top:3rem;}
	.p6 h2{margin-top:0;}
	.p6>div:nth-of-type(1):before{top:0; transform: translate(-50%,0)}
	.p6 div:nth-of-type(1):after{top:0; transform: translate(-50%,15px)}
	.p6 ul{margin-top:350px;}
	.p6 li{padding:0 0.5em; width:45%;}
	
}
@media screen and (max-width:873px){
	.ad p{font-size:1rem}
	.p1 p{font-size:0.8rem;}
	.p3>div{background-size:45vw auto;}
	.p3>div>div{width:60vw;}
	.p5 section ul{padding:0.5em;}
	.p5 section li{padding:0.5em; height:3em; 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;}
}
@media screen and (max-width:640px){
	h2{font-size:1.5rem;}
	.ad h1{font-size:2rem;}
	.ad p{font-size:0.8rem; letter-spacing: 2px;}
	.ad>*{transform: translateX(28%);}
	.p1>div>div, .p1 img{width:100%;}
	.p1>div .cbtn{text-align: center;}
	.p2 ul{justify-content: center;}
	.p2 li{margin-top:1em; width:100%; max-width:414px;}	
	.p2 h3, .p2 h3+p, .p2 li div{min-height:0;}
	.p2 i{width:63.2px; height:63.2px;}
	.p2 i:before{transform:scale(0.8)}	
	.p3{background: linear-gradient(to bottom, #fff, #f2f7fb 99%)}
	.p3>div{background-position:50% 10%; background-size:80vw auto;}
	.p3>div>div{width:100%;}
	.p3>div h2+p{margin-top:110vw;}
	.p3 .cbtn{text-align:center;}	
	.p4 section{border-radius:1em;}
	.p4 section>header,.p4 section>footer,.p4 section>div{width:90%;}
	.p5 section{width:100%}
	.p5 section+section{margin-top:1em;}
	.p5 section header{min-height:37.5vw;}
	.p5 section ul{align-items: center;}	
	.p6>div:nth-of-type(1):before,.p6 div:nth-of-type(1):after{max-width:calc(100vw - 51px); max-height:calc(100vw - 51px)}
	.p6 ul{height:auto; align-items: center;}	
	.p6 li{margin-top:1em; width:95%;}
	.p6 li:nth-of-type(n+4){align-self:center}
	.p6 li:nth-of-type(4){margin-top:1em;}
	.p6 li:before,.p6 li:nth-of-type(n+4):before{left:0; top:0; right:auto; bottom:auto; transform: translate(-50%,-50%);}
	.p7 dt:before,.p7 dd:before{font-size:1rem;}
	.p7 dt span{font-size:1rem;}
	.p7 dd{font-size:0.8rem;}
	.p8 dd{padding:1em; font-size:0.8rem;}
	.p8 dd h3{font-size:1rem;}
}