@import url("../res/base.css");
:root{--vi-blue:#005bab; --vi-red:#d10c47; --vi-pink:#dc629c}
.banner{margin:0 auto; width:100%; max-width:1903px;}
.banner img{width:100%; height: auto; display:block;}

section{padding:4em 1em; width:100%;}
section>*{margin:0 auto; width:100%; max-width:1000px}
section header{padding:0 3em; text-align: center; position: relative;}
section header p{margin:1em auto 0 auto; text-align: left;}
section h2{font-size:2.5em;}

section header:before,section header:after,section h2:before,section h2:after{width:1rem; height: 1rem; content: ""; position: absolute; border-radius: 50%;top:1.2rem;}
section header:before,section header:after{ background-color:var(--vi-blue);  z-index: 2; }
section header:before{ left:0;}
section header:after{right:0.5rem;}
section h2:before,section h2:after{background-color:var(--vi-red);   z-index: 3;}
section h2:before{left:0.5rem;}
section h2:after{right:0;}

.synopsis h2{color:var(--vi-red)}
.synopsis h2 span{font:normal 0.8em/1 "microsoftYahei"; color:#333;}

.synopsis>div{padding:10em 0; position:relative;}
.synopsis h3{margin:0 auto; padding:3em 0; width:9em; height: 9em; color:#375ebb; text-align: center; background-color:#d3dbed; border-radius:50%; position: relative; z-index: 4;}
.synopsis h3::before,.synopsis h3::after{content:""; border:#d3dbed 1px solid; border-radius:50%; position:absolute; left: 50%; top:50%; transform: translate(-50%,-50%);}
.synopsis h3::before{width:13em; height:13em; z-index:3;}
.synopsis h3::after{width:17em; height:17em; z-index:2;}
.synopsis h3 span{display:block;}

.synopsis dl{padding:1em; width:22em; height: 9.75em; color:white; display:flex; flex-direction: column; justify-content:center;  position:absolute; z-index: 10; }
.synopsis dl::before{width:2em; height:2em; text-align: center; content: "\f00c"; font:1em/2 Fontawesome; color: var(--vi-red); background-color: #e3cad7; position:absolute; border-radius: 50%;}
.synopsis dl::after{content: ""; display: block; position: absolute;}
.synopsis dt{font:bold 1.5em/1 "microsoftYahei";}
.synopsis dd{margin-top:1em;}

.synopsis dl:nth-of-type(1){border-radius:1em 1em 0 1em; left:0; top:3em; background-color: var(--vi-red);}
.synopsis dl:nth-of-type(2){border-radius:1em 1em 1em 0; right:0; top:3em;  background-color: var(--vi-blue);}
.synopsis dl:nth-of-type(3){border-radius:1em 0 1em 1em; left:0; bottom:3em;  background-color: var(--vi-blue);}
.synopsis dl:nth-of-type(4){border-radius:0 1em 1em 1em; right:0; bottom:3em;  background-color: var(--vi-red);}

.synopsis dl:nth-of-type(1)::before{right:-3em; bottom:-1.5em;}
.synopsis dl:nth-of-type(2)::before{left:-3em; bottom:-1.5em;}
.synopsis dl:nth-of-type(3)::before{right:-3em; top:-1.5em;}
.synopsis dl:nth-of-type(4)::before{left:-3em; top:-1.5em;}

.synopsis dl:nth-of-type(1)::after{border-left:var(--vi-red) 1em solid; border-top:transparent 1em solid; right:-1em; bottom: 0;}
.synopsis dl:nth-of-type(2)::after{border-right:var(--vi-blue) 1em solid; border-top:transparent 1em solid; left:-1em; bottom: 0;}
.synopsis dl:nth-of-type(3)::after{border-left:var(--vi-blue) 1em solid; border-bottom:transparent 1em solid; right:-1em; top: 0;}
.synopsis dl:nth-of-type(4)::after{border-right:var(--vi-red) 1em solid; border-bottom:transparent 1em solid; left:-1em; top: 0;}


.table header{max-width:600px;}
.table h2 span{color:var(--vi-red)}
.table ul{margin:1em 0 0 auto; width:78%; display: flex; justify-content: space-around;}
.table li{width:40%; line-height: 2; text-align: center; color:white; display:inline-block; border-radius: 0.5em; position: relative;}
.table li::after{content: ""; position:absolute; bottom:-1em; left:50%; transform: translateX(-50%); border-left:transparent 0.5em solid; border-right:transparent 0.5em solid; display: block;}
.table li:nth-of-type(1){background-color: #6aa2cb;}
.table li:nth-of-type(2){background-color: var(--vi-pink);}
.table li:nth-of-type(1)::after{border-top:#6aa2cb 1em solid}
.table li:nth-of-type(2)::after{border-top:var(--vi-pink) 1em solid}
.table dl{line-height: 1.2; text-align: center; display: flex; justify-content: space-around; align-content: center;}
.table dl:nth-of-type(1){margin-top:2em;}
.table dl:nth-of-type(1) dd{border-radius: 0.5em 0.5em 0 0;}
.table dl:nth-of-type(4) dd{border-radius: 0 0 0.5em 0.5em;}
.table dl+dl dd{border-top:var(--vi-blue) 2px dashed}
.table dt,.table dd{text-align: center;}
.table dt{padding:0.8em 1em; width:18%; font-weight: bold; color:white; background-color: var(--vi-pink); align-self: center;border-radius: 0.5em; position: relative;}
.table dt:after{content: ""; display: block; border-left:var(--vi-pink) 1em solid; border-top:transparent 0.5em solid; border-bottom:transparent 0.5em solid; position: absolute; right:-1em; top:50%; transform:translateY(-50%);}
.table dd{padding:1em 1em;width:36%; align-content: center;}
.table dd:nth-of-type(1){background-color:#eef6fd;}
.table dd:nth-of-type(2){background-color:#f8dbe4;}

.price{background-color:var(--vi-blue);}
.price header{color:white}
.price header:after{background-color: white;}
.price header:before{background-color: white;}
.price dd strong{font-size:1.1em; color:var(--vi-pink)}
.price dd span{font-weight: bolder; color:var(--vi-blue)}

.timepoint header{max-width:700px;}
.timepoint dd>div{padding:0.1em 0; width:100%; line-height:1.5; text-align:left; display: flex; justify-content: flex-start; align-items:flex-start;}
.timepoint dd>div p:first-child{flex-shrink:0;}
.timepoint dd em{margin-right:0.5em;padding:0.2em 0.5em; font:normal 1em/1.1 "microsoftYahei"; color:white; border-radius:0.2em; flex-shrink:0; display:block;}
.timepoint dd em+em{margin-top:0.1em;}
.timepoint dd strong{color:#333;}
.male{ background-color:#a1d4f9;}
.female{background-color:#f693b0;}

.crowd{background-color:#f4f4f4;}
.crowd header{max-width: 40em;}
.crowd>div{padding:5em 0; max-width:1903px; position:relative}
.crowd>div:before{margin:0 auto; padding:1em; width:210px; height:210px; content: ""; border:var(--vi-pink) 2px dashed; background:#f8dbe4 url(icon.png) no-repeat 50px 50px/auto 124px; background-origin: content-box; background-clip:content-box; border-radius: 50%; display: block;}
.crowd h2 span{color: var(--vi-red);}
.crowd dl{width:35%; position:absolute; top:40%;}
.crowd dl:nth-of-type(1){right:calc(50vw + 150px);}
.crowd dl:nth-of-type(2){padding-left:1em; left:calc(50vw + 150px);}

.crowd dt{padding-bottom:0.5em; font:bold 2em/1.2 "microsoftYahei"; color:var(--vi-red); border-bottom: #f8dbe4 2px dashed; position:relative}
.crowd dt::before{width:0.5em; height: 0.5em; content: ""; background-color: var(--vi-red); border:#f8dbe4 0.25em solid; display: block; border-radius:50%; position: absolute; bottom:-0.5em; z-index:3;}
.crowd dt::after{width:6rem; height:6rem; content: ""; background:#95c5e9 url(icon.png) no-repeat -6rem 0/auto 6rem; display: block; position:absolute; bottom:-3rem; border-radius:50%; z-index: 2;}

.crowd dl:nth-of-type(1) dt:before{right:-0.5em;}
.crowd dl:nth-of-type(2) dt:before{left:-0.5em;}
.crowd dl:nth-of-type(1) dt::after{right:-6rem;}
.crowd dl:nth-of-type(2) dt::after{left:-6rem; background-position-x:-12rem;}


.crowd dd{margin-top:1em;}



@media screen and (max-width:1740px) {
    .crowd dl{width:calc(50vw - 180px);}
}

@media screen and (max-width:1573px) {
    .crowd dl{top:30%}
}

@media screen and (max-width:1024px) {
    section{font-size:0.875em}
    section header:before,section header:after,section h2:before,section h2:after{width:0.875rem; height: 0.875rem; top:1.05rem;}
    section header:after{right:0.4375rem;}
    section h2::before{left:0.4375rem;}
}

@media screen and (max-width:808px) {
    section{font-size:0.725em}
    section header:before,section header:after,section h2:before,section h2:after{width:0.725rem; height: 0.725rem; top:0.87rem;}
    section header:after{right:0.3625rem;}
    section h2::before{left:0.3625rem;}
}

@media screen and (max-width:920px) {
    .crowd>div:before{margin-left:-125px; background-position-x: 90px;}
    .crowd dl{width:90vw;}
    .crowd dl dt,.crowd dl dd{padding-left:1rem;}
    .crowd dl:nth-of-type(1){left:6em; right: auto; top:3em; width:calc(100vw - 9em)}
    .crowd dl:nth-of-type(2){left:9em; right: auto; top:13em;  width:calc(100vw - 12em)}
    .crowd dl dt::after{width:3rem; height:3rem; background-size:auto 3rem; bottom:-1.5rem;}

    .crowd dl:nth-of-type(1) dt:before{left:-0.5em; right:auto}
    .crowd dl:nth-of-type(2) dt:before{left:-0.5em;}
    .crowd dl:nth-of-type(1) dt::after{left:-3rem; right:auto; background-position-x:-3rem;}
    .crowd dl:nth-of-type(2) dt::after{left:-3rem; background-position-x:-6rem;}
}

@media screen and (max-width:687px) {
    .synopsis>div{padding: 15em 0;}
    .synopsis dl{width:48%; height:auto; border-radius:1em;}
    .synopsis dl:nth-of-type(1){border-radius:1em; left:0; top:2em;}
    .synopsis dl:nth-of-type(2){border-radius:1em; right:0; top:1em;}
    .synopsis dl:nth-of-type(3){border-radius:1em; left:0; bottom:0em;}
    .synopsis dl:nth-of-type(4){border-radius:1em; right:0; bottom:2em;}

    .synopsis dl:nth-of-type(1)::before{right:4em; bottom:-3em;}
    .synopsis dl:nth-of-type(2)::before{left:4em; bottom:-3em;}
    .synopsis dl:nth-of-type(3)::before{right:4em; top:-4em;}
    .synopsis dl:nth-of-type(4)::before{left:4em; top:-3em;}

    .synopsis dl:nth-of-type(1)::after{border-top:var(--vi-red) 1em solid; border-left:transparent 1em solid; border-right:transparent 1em solid; right:4em; bottom: -1em;}
    .synopsis dl:nth-of-type(2)::after{border-top:var(--vi-blue) 1em solid; border-left:transparent 1em solid;  border-right:transparent 1em solid; left:4em; bottom: -1em;}
    .synopsis dl:nth-of-type(3)::after{border-bottom:var(--vi-blue) 1em solid; border-left:transparent 1em solid;  border-right:transparent 1em solid; right:4em; top: -1em;}
    .synopsis dl:nth-of-type(4)::after{border-bottom:var(--vi-red) 1em solid; border-left:transparent 1em solid;  border-right:transparent 1em solid; left:4em; top: -1em;}

    .crowd>div::before{margin-left:-150px;}
    .crowd dl:nth-of-type(1){left:6em;}
    .crowd dl:nth-of-type(2){left:9em;}
    .crowd dt{font-size:1.5em;}
}

@media screen and (max-width:500px) {
    section h2{font-size:2em;}
    section header:before,section header:after,section h2:before,section h2:after{width:0.5rem; height: 0.5rem; top:0.6rem;}
    section header:after{right:0.25rem;}
    section h2::before{left:0.25rem;}
}