@import url("../res/base.css");
@import url("../res/innerPublic.css");
body{line-height:2;}
body>header+a{height:434px; background-image:url("empryo_02.jpg"); background-size:auto 100%;}
section{padding:4em 0.5em;}
section header{text-align:center;}
section h2{color:#005bac;}
section h2:before,section h2:after{width:1em; height:2px; content:""; background-color:#005bac; display:inline-block; vertical-align:middle;}
section h2:before{margin-right:1em;}
section h2:after{margin-left:1em;}
h1,h2,h3,h4{font-weight:lighter;}

.cbtn{padding:3em 0;}

.synopsis{margin:0 auto; padding:4em 0; width:100%; max-width:1200px; display:flex; justify-content: space-between; flex-wrap:wrap; align-items:center;}
.synopsis header{width:100%; max-width:600px; text-align:left;}
.synopsis img, .synopsis video{margin-top:1em; width:100%; max-width:400px;}
.synopsis h1{padding-bottom:1em; color:#005bac;}
.synopsis h1:after{margin-top:1em; width:1em; height:2px; content:""; display: block; background-color: #005bac}
.synopsis .cbtn{text-align:left;}

.pro{width:100%; min-height:740px; color:#fff; background:url("embryo_p2.jpg") no-repeat 50% 50%; background-size:auto 100%;}
.pro h2{color:#fff;}
.pro h2:before{background-color:#fff;}
.pro h2:after{background-color:#fff;}
.pro>div:nth-of-type(1){margin:0 auto; width:100%; max-width:1200px;}
.pro>div:nth-of-type(1){margin:2em auto 0 auto; width:100%; max-width:1200px; color:#333; position:relative; overflow: hidden; counter-reset: count 0}
.pro>div:nth-of-type(1):before{width:336px; height:336px; content:""; background: url(empryo_3.jpg) 50% 100%; background-size:100% auto; border-radius:50%; border:#4c95d1 15px solid; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); display:block;}
.pro ul{padding:1em; width:100%; min-height:5em; max-width:390px; display:inline-block; overflow: hidden;}
.pro ul li{padding:1em; width:100%; min-height:5em; line-height:1.5; background-color:#fff; position:relative; counter-increment:count 1;}
.pro ul li+li{margin-top:2em; }
.pro ul li:after{width:2em; height:2em; text-align: center; line-height:2; color:#fff; display:block; background-color:#00a0e9; position:absolute; bottom:0; border-radius:50%; content:counter(count)}
.pro ul:nth-of-type(1){float:left;}
.pro ul:nth-of-type(2){float:right;}
.pro ul:nth-of-type(1) li:after{right:0; transform: translate(50%,50%)}
.pro ul:nth-of-type(2) li:after{left:0; transform: translate(-50%,50%)}
.pro .cbtn a{box-shadow:none;}

.advantage{line-height:2;}

.advantage>div{margin:0 auto; padding:2em 0; width:100%; max-width:1200px; display: flex; justify-content: space-between; align-items:center; flex-wrap:wrap;}
.advantage>div div{width:100%; max-width:400px; overflow: hidden;}
.advantage img{width:100%; max-width:600px;}
.advantage dl{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.advantage dl+dl{margin-top:2em;}
.advantage dt{width:100%; background-color: lightgray; display:block;}
.advantage dt strong{padding:0.2em 1em; line-height:2; background-color:#33a1e7; position: relative; display: inline-block}
.advantage dt strong:after{border-left:#33a1e7 1.5em solid; border-top:lightgray 2.4em solid; content:""; display:inline-block; vertical-align:middle; position:absolute; right:0px; top:0; transform:translate(100%,0)}
.advantage dd, .advantage dd.fa{width:50%; line-height:2; display:inline-block; }
.advantage dd{margin-top:1em;}
.advantage dd.fa:before{margin-right:1em; color:#33a1e7;}
.advantage dd:nth-of-type(n+3){margin-top:0;}

.device{background-color:#f7f7f7; line-height:2;}
.device dl{margin:0 auto; width:100%; max-width:1200px; display:flex; justify-content:space-between; flex-wrap: wrap;}
.device dd{margin-top:4em; width:22%; text-align: center;}
.device dd img{width:100%; display: block;}

.core{background-color: #f7f7f7}
.core ul{margin:0  auto; width:100%; max-width:1200px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.core li{margin-top:2em; width:48%; display:flex; justify-content:flex-start;}
.core div{padding-left:1em; width:65%; flex-shrink:0;}
.core img{width:100%; display: block;}
.core h3{color:#005bac}

@media screen and (max-width:1200px){
	body>header+a{height:40vw;}
	.pro>div{padding:1em 0.5em;}	
	.pro>div:before{margin:0 auto; position:static; transform:translate(0,0)}	
	.advantage>div div{max-width:35vw;}
	.advantage img{max-width:60vw;}
	.synopsis .cbtn{text-align: center;}
	
}
@media screen and (max-width:1024px){	
	.synopsis{padding:4em 0.5em;}
	.synopsis header,.synopsis video{max-width:45vw;}
}
@media screen and (max-width:829px)
{	
	.pro ul{max-width:45vw;}
	.advantage>div div, .advantage img{max-width:calc(100vw - 16px);}
	.advantage img{margin-top:2em;}	
}
@media screen and (max-width:640px)
{
	section{padding:2em 0.5em;}
	.pro>div:nth-of-type(1):before{display:none;}
	.pro ul{max-width:95vw;}
	.synopsis header,.synopsis video{max-width:95vw;}
	.pro ul li:after{left:0; right: auto; top:0; bottom:auto; transform: translate(-50%,-50%)}	
	.pro ul:nth-of-type(1) li:after{left:0; right: auto;  transform: translate(-50%,-50%)}
	.pro ul:nth-of-type(2) li:after{transform: translate(-50%,-50%)}
	.pro ul{margin:0 auto;width:100%; display: block;}
	.pro ul:nth-of-type(1){float:none;}
	.pro ul:nth-of-type(2){float:none;}
	.device dd{margin-top:1em; width:44%; font-size:0.8rem;}
	.core li{width:100%;}
	.core div{width:60%; font-size:0.8rem;}
}