@charset "utf-8";
/* [S] section2  */
.wrap-visual {position: relative; padding:16rem 0; background: url(../images/bg-section2.png) no-repeat center / cover;}
.wrap-visual .frame {max-width:158rem; margin:0 auto; width:auto; display: flex;}
.wrap-visual .frame::after {content:''; display: block; clear:both;}
.wrap-visual .img {position: relative; left: -10rem; width:calc(100% - 70rem); opacity: 0;}
.wrap-visual .img .img-slider-box {position: relative;}
.wrap-visual .img .img-slider-box::before {content:''; width:100%; height:100%; position: absolute; left:4rem; top:4rem; border:0.1rem solid #00A5E3; border-radius:6rem 0 6rem 0}
.wrap-visual .img .slider { overflow:hidden; border-radius:0 10rem 0 10rem; position: relative;}
.wrap-visual .img li {padding-bottom:71.5%;}
.wrap-visual .img img {position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover;}
.wrap-visual .text {width: 70rem; padding-left:13.5rem; padding-top: 4rem; position: relative;}
.wrap-visual .text .slider {height:100%; position: relative;}
.wrap-visual .text li {display: flex; flex-direction: column;}
.wrap-visual .text .img-box {display: none;}
.wrap-visual .text .sj {position: relative; left: 10rem; font-family: sm; font-size: 5rem; line-height: 7rem; display: block; color:#000; opacity: 0;}
.wrap-visual .text .sj span {color:#009E96;}
.wrap-visual .text .sj .icon {position: relative;}
.wrap-visual .text .sj .icon::after {content:''; width:5rem; height: 5rem; background:url(../images/img-title-obj1.png) no-repeat center; position: absolute; left:100%;top:-3rem;}
.wrap-visual .text .sub-sj {position: relative; left: 10rem; font-family: sm; font-size: 3rem; color:#000; position: relative; margin-top: auto; opacity: 0;}
.wrap-visual .text .num {position: absolute; left:-3rem; bottom:0; font-size: 10rem; color:#D7DEED; line-height: 1; font-family: sb; z-index: -1;}
.wrap-visual .text .cn {position: relative; left: 10rem; color:#666; font-size: 1.8rem; font-family: pm; line-height: 3.5rem; margin-top: 1.8rem; opacity: 0;}
.wrap-visual .controls {font-size: 0; position: absolute; top:18rem; left: 10rem; z-index: 1; opacity: 0;}
.wrap-visual .controls button {width: 5.1rem; height:4.1rem; background-repeat:no-repeat; background-position:center; transition: all .5s ease; text-indent: -9999rem;}
.wrap-visual .controls .prev {background-image:url(../images/btn-prev.png); margin-right: 1.9rem; position: relative;}
.wrap-visual .controls .prev::before {content:''; width: 0.4rem; height:0.4rem; background:#b2b2b2; border-radius:50%; position: absolute; right:-1.9rem; top:50%; margin-top:-0.2rem;}
.wrap-visual .controls .prev:hover {background-image:url(../images/btn-prev-on.png);}
.wrap-visual .controls .next {background-image:url(../images/btn-next.png);margin-left: 1.5rem;}
.wrap-visual .controls .next:hover {background-image:url(../images/btn-next-on.png);}

@media screen and (max-width:1400px) {
    .wrap-visual .text .sj {font-size: 4.5rem;}
    .wrap-visual .text .sub-sj {margin-top:15rem}
}
@media screen and (max-width:1200px) {
    .wrap-visual {padding:10rem 0;}
    .wrap-visual .frame {flex-direction: column;}
    .wrap-visual .img { width: 69%; margin: 0 auto; display: none;}
    .wrap-visual .text {width:100%; padding-left: 0; margin-top:0; padding-top: 0;}
    .wrap-visual .text .img-box {position: relative; left: 10rem; display: block; margin-top: 5rem; margin-right: 4rem; position: relative; opacity: 0;}
    .wrap-visual .text .img-box::before {content:'';width:100%; height:100%; position: absolute; left:4rem; top:4rem; border:0.1rem solid #00A5E3; border-radius:6rem 0 6rem 0}
    .wrap-visual .text .img-box img {border-radius:0 10rem 0 10rem; width:100%; position: relative;}
    .wrap-visual .text .sj {font-size: 4.5rem; line-height: 1.5; height:13.5rem;}
    .wrap-visual .text .sub-sj {margin-top: 11.6rem; font-size: 3.2rem;}
    .wrap-visual .text .cn {line-height: 3rem;}
    .wrap-visual .text .num {font-size: 7rem; bottom:1.5rem; left:-2rem;}
    .wrap-visual .controls {top:7.5rem; left: auto !important; right:0; left:unset;}
}
@media screen and (max-width:768px) {
    .wrap-visual {padding:7.5rem 0 7.5rem 0;}
    .wrap-visual .img {width: 100%;}
    .wrap-visual .img .img-slider-box::before {left:3rem; top:3rem; display: none;}
    .wrap-visual .img .slider {border-radius:0 6rem 0 6rem;}
    .wrap-visual .text {margin-top: 0;}
    .wrap-visual .text .img-box {margin-top:7.5rem; margin-right: 2rem; }
    .wrap-visual .text .img-box::before {left:2rem; top:2rem; border-radius:4rem 0 4rem 0;}
    .wrap-visual .text .img-box img {border-radius:0 4rem 0 4rem;}
    .wrap-visual .text .sj {font-size: 3.5rem; line-height: 1.5; height:10.5rem;}
    .wrap-visual .text .sj .icon::after {width: 3.5rem; height: 3.5rem; background-size:cover; top:-2.5rem; left:unset; right:-3rem;}
    .wrap-visual .text .sub-sj {font-size: 2.4rem; margin-top: 8.6rem;}
    .wrap-visual .text .num {font-size: 5rem; left:-0.7rem;}
    .wrap-visual .text .cn {font-size: 1.6rem; line-height: 1.5; margin-top: 1rem;}
    .wrap-visual .controls {left: 0 !important; top:11.5rem;}
    .wrap-visual .controls button {width: 3.5rem; height:2.8rem; background-size:cover;} 
    .wrap-visual .controls .prev {margin-right: 1.3rem;}
    .wrap-visual .controls .prev::before {right:-1.3rem;}
    .wrap-visual .controls .next {margin-left: 1rem;}
}
/* [E] section2  */