@charset "UTF-8";

.main-visual-box{position:relative;}
.main-visual-box .main-visual-inner-box{position:relative;overflow:hidden;}
.main-visual-box .main-visual-inner-box:before{content:'';position:absolute;top:0;left:0;width:100%;height:calc(100% - 55px);background:#0d3f7a;}
.main-visual-box .swiper-slide:after{content:'';display:block;clear:both;}
.main-visual-box .swiper-slide .vi-img-box{float:right;position:relative;margin:0 -226px 0 0;width:67.7%;height:665px;overflow:hidden;}
.main-visual-box .swiper-slide .vi-img-box:after{content:'';position:absolute;top:0;left:0;width:50%;height:50%;background-color:rgba(13,63,122,0.8);}
.main-visual-box .swiper-slide .vi-img-box.type-video video{position:absolute;top:50%;left:50%;z-index:-100;width:auto;height:auto;min-width:100%;min-height:100%;transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);}
.main-visual-box .swiper-slide-active .vi-img-box{margin:0 !important;height:720px;}
.main-visual-box .swiper-slide-active .vi-img-box:before{content:'';position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:url(/_res/yu/english/img/main/bg-main-vi-dim.png) no-repeat 0 0/cover;}
.main-visual-box .swiper-slide-active .vi-img-box:after{display:none;}
.main-visual-box .swiper-slide .vi-txt-box{display:none;position:absolute;top:0;left:50%;padding:105px 0 0 66px;width:100%;z-index:20;max-width:1700px;box-sizing:border-box;transform:translateX(-50%);-ms-transform:translateX(-50%);}
.main-visual-box .swiper-slide-active .vi-txt-box{display:block;}
.main-visual-box .swiper-slide-prev .vi-img-box{position:relative;}
.main-visual-box .swiper-slide-next .vi-img-box{position:relative;}
.main-visual-box .swiper-slide-prev .vi-img-box:before{content:'';display:block;position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background-color:rgba(13,63,122,0.8);}
.main-visual-box .swiper-slide-next .vi-img-box:before{content:'';display:block;position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background-color:rgba(13,63,122,0.8);}
.main-visual-box .swiper-slide .vi-txt-box p{position:relative;left:100px;opacity:0;}
.main-visual-box .swiper-slide.on .vi-txt-box p{left:0;opacity:1;}
.main-visual-box .swiper-slide .vi-txt-box .txt01{padding:0 0 18px 0;font-weight:200;font-size:1.875rem;color:#fff;line-height:2.188rem;transition:all .8s;}
.main-visual-box .swiper-slide .vi-txt-box .txt02{font-weight:500;font-size:3.75rem;color:#fff;line-height:5.125rem;transition:all 1.2s;}
.main-visual-box .control-wrap{position:absolute;left:50%;bottom:225px;z-index:10;padding:0 0 0 66px;width:100%;max-width:1700px;box-sizing:border-box;transform:translateX(-50%);-ms-transform:translateX(-50%);}
.main-visual-box .control-wrap > div, 
.main-visual-box .control-wrap > a{display:inline-block;width:auto;vertical-align:middle;}
.main-visual-box .control-wrap .main-vi-navigation{width:44px;height:44px;border:1px solid #fff;border-radius:44px;box-sizing:border-box;}
.main-visual-box .control-wrap .main-vi-prev{background:url(/_res/yu/english/img/main/bg-main-vi-prev.png) no-repeat 50% 50%;}
.main-visual-box .control-wrap .main-vi-next{background:url(/_res/yu/english/img/main/bg-main-vi-next.png) no-repeat 50% 50%;}
.main-visual-box .control-wrap .main-vi-pagination{padding:0 18px;font-weight:200;font-size:1.625rem;color:#fff;line-height:1;}
.main-visual-box .control-wrap .main-vi-autoplay{display:inline-block;margin:0 0 0 20px;}
.main-visual-box .control-wrap .main-vi-autoplay a{display:none;width:44px;height:44px;border-radius:44px;}
.main-visual-box .control-wrap .main-vi-autoplay .pause{background:#fff url(/_res/yu/english/img/main/bg-main-vi-pause.png) no-repeat 50% 50%;}
.main-visual-box .control-wrap .main-vi-autoplay .play{background:#fff url(/_res/yu/english/img/main/bg-main-vi-play.png) no-repeat 50% 50%;}
.main-visual-box .control-wrap .main-vi-autoplay.pause .pause{display:block;}
.main-visual-box .control-wrap .main-vi-autoplay.play .play{display:block;}

.main-bg-video{position:absolute;left:50%;top:50%;min-width:100%;min-height:100%;width:auto;height:auto ;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);}

.side-menu-wrap{position:absolute;left:50%;bottom:100px;z-index:20;width:100%;max-width:1700px;transform:translateX(-50%);-ms-transform:translateX(-50%);}
.side-menu-wrap .popup-btn-box{position:absolute;bottom:0;right:30px;}
.side-menu-wrap .popup-btn-box .ani{display:block;position:relative;z-index:10;width:94px;height:93px;}
.side-menu-wrap .popup-btn-box .ani .bg{height:100%;background:url(/_res/yu/english/img/main/bg-sidemenu.png) no-repeat center / contain;animation:ani 30s linear infinite;}
.side-menu-wrap .popup-btn-box .ani span{position:absolute;top:50%;left:50%;width:100%;color:#fff;line-height:1;text-align:center;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);}
.side-menu-wrap .popup-btn-box .ani span.popup-num{top:2px;left:auto;right:10px;transform:none;padding:6px 0;width:25px;height:25px;background:#d6e7f4;color:#0d3f7a;border-radius:50%;box-sizing:border-box;}
.side-menu-wrap .popup-btn-box ul{position:absolute;top:18px;right:15px;}
.side-menu-wrap .popup-btn-box ul li{position:absolute;top:0;right:0;width:60px;height:60px;background:#fff;border-radius:50%;transform:translateY(0);-ms-transform:translateY(0);transition:.5s;}
.side-menu-wrap .popup-btn-box.active ul li:nth-of-type(1){transform:translateY(-300px);-ms-transform:translateY(-300px);}
.side-menu-wrap .popup-btn-box.active ul li:nth-of-type(2){transform:translateY(-230px);-ms-transform:translateY(-230px);}
.side-menu-wrap .popup-btn-box.active ul li:nth-of-type(3){transform:translateY(-160px);-ms-transform:translateY(-160px);}
.side-menu-wrap .popup-btn-box.active ul li:nth-of-type(4){transform:translateY(-90px);-ms-transform:translateY(-90px);}
.side-menu-wrap .popup-btn-box ul li a{display:block;height:100%;padding:18px 0;color:#111;line-height:1.563rem;text-align:center;box-sizing:border-box;}
.main-visual-box .main-vi-popup-wrap{display:none;position:absolute;top:0;left:0;z-index:30;width:100%;height:100%;background:rgba(0,0,0,0.8);}
.main-visual-box .main-vi-popup-wrap.active{display:block;}
.main-visual-box .main-vi-popup-wrap .main-vi-popup-box{position:absolute;top:50%;left:50%;width:100%;max-width:950px;transform:translate(-50%, -50%);}
.main-visual-box .main-vi-popup-wrap .main-vi-popup-box .popup-title{padding:0 0 35px;font-size:2rem;line-height:2.5rem;color:#fff;text-align:center;}
.main-vi-popup-swiper{z-index:20;margin:0 100px;padding:0 0 40px;}
.main-vi-popup-swiper.center .swiper-wrapper{justify-content:center;}
.main-vi-popup-swiper .main-tit{margin:0 0 20px;height:3.875rem;font-size:1.5rem;line-height:2rem;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;overflow:hidden;word-wrap:break-word;}
.main-vi-popup-swiper .sub-tit{padding:20px 0 0;font-size:1.125rem;line-height:1.625rem;}
.main-vi-popup-swiper .popup-content-box{display:block;padding:30px;min-height:197px;box-sizing:border-box;}
.main-vi-popup-swiper .type01{background:#0d3f7a;color:#fff;}
.main-vi-popup-swiper .type01 .sub-tit{border-top:1px solid #fff;}
.main-vi-popup-swiper .type02{background:#ff9c00;color:#333;}
.main-vi-popup-swiper .type02 .sub-tit{border-top:1px solid #333;}
.main-vi-popup-box .popup-control-wrap{position:absolute;top:50%;left:50%;bottom:auto;padding:0;width:100%;transform:translate(-50%, -50%);}
.main-vi-popup-box .popup-control-wrap .main-vi-popup-pagination{width:60px;height:60px;border:1px solid #fff;border-radius:50%;cursor:pointer;}
.main-vi-popup-box .popup-control-wrap .main-vi-popup-pagination:after{content:'';display:block;clear:both;}
.main-vi-popup-box .popup-control-wrap .main-vi-popup-prev{float:left;margin:0 0 0 20px;background:url(/_res/yu/english/img/main/ico-popup-prev.png) no-repeat center center;}
.main-vi-popup-box .popup-control-wrap .main-vi-popup-next{float:right;margin:0 20px 0 0;background:url(/_res/yu/english/img/main/ico-popup-next.png) no-repeat center center;}
.popup-status-box{text-align:center;}
.popup-status-box li{display:inline-block;margin:0 18px 0 0;background:#000000;border-radius:50px;font-size:1.125rem;line-height:1.625rem;color:#fff;}
.popup-status-box li:last-of-type{margin:0;}
.popup-status-box li a{display:block;padding:10px 57px 10px 30px;background:url(/_res/yu/english/img/main/ico-popup-close.png) no-repeat right 30px center;}
.popup-status-box li.popup-status{padding:10px 30px;}
.popup-status-box li.popup-status span{color:#ba0000;}

@keyframes ani{
	0%{transform:rotate(0);}
	50%{transform:rotate(180deg);}
	100%{transform:rotate(360deg);}
}

@media screen and (min-width:641px) {
	.main-vi-popup-swiper.center .swiper-wrapper .swiper-slide{margin-right:0 !important;}
}

@media screen and (max-width:1024px) {
	.main-visual-box .swiper-slide .vi-img-box{width:75%;height:600px;}
	.main-visual-box .swiper-slide-active .vi-img-box{height:656px;}
	.main-visual-box .swiper-slide .vi-img-box{margin:0 -74px 0 0;}
	.main-visual-box .swiper-slide .vi-txt-box{padding:67px 0 0 105px;}
	.main-visual-box .swiper-slide .vi-txt-box .txt02{font-size:3.75rem;line-height:5rem;}
	.main-visual-box .control-wrap{padding:0 105px;}	

	.side-menu-wrap{bottom:76px;right:36px;}
	.main-visual-box .main-vi-popup-wrap .main-vi-popup-box{max-width:100%;width:100%;}

}

@media screen and (max-width:640px) {
	.main-visual-box .main-visual-inner-box{padding:0;}
	.main-visual-box .main-visual-inner-box:before{height:calc(100% - 45px);}
	.main-visual-box .swiper-slide .vi-img-box{margin:0;width:100%;height:453px;}
	.main-visual-box .swiper-slide .vi-txt-box{padding:50px 0 0;}
	.main-visual-box .swiper-slide .vi-txt-box .txt01{display:none;}
	.main-visual-box .swiper-slide .vi-txt-box .txt02{font-size:2.143rem;line-height:2.857rem;}
	.main-visual-box .control-wrap{bottom:195px;padding:0 18px;}

	.main-bg-video{z-index:-10;}

	.side-menu-wrap{bottom:30px;}

	.side-menu-wrap .popup-btn-box .ani span.popup-num{font-size:1.143rem;}
	.side-menu-wrap .popup-btn-box .ani span{font-size:1.143rem;}
	.main-vi-popup-swiper{margin:0 80px;padding:0 0 20px;}
	.main-vi-popup-swiper .popup-content-box{padding:20px;min-height:auto;}
	.main-vi-popup-swiper .main-tit{margin:0 0 15px;height:auto;}
	.main-vi-popup-swiper .sub-tit{padding:15px 0 0;}
	.main-visual-box .main-vi-popup-wrap{height:60vh;}
	.main-visual-box .main-vi-popup-wrap .main-vi-popup-box .popup-title{padding:0 20px 20px;}
	.main-vi-popup-box .popup-control-wrap .main-vi-popup-pagination{width:40px;height:40px;background-size:10px;}
	.popup-status-box li{margin:0 10px 5px 0;}
	.popup-status-box li.popup-status{padding:8px 20px 6px 20px;}
	.popup-status-box li a{padding:8px 50px 6px 20px;background:url(/_res/yu/english/img/main/ico-popup-close.png) no-repeat right 20px center;}
}

@media screen and (max-width:480px) {	
	.main-visual-box .main-visual-inner-box:before{height:calc(100% - 28px);}
	.main-visual-box .swiper-slide .vi-img-box{height:277px;}
	.main-visual-box .swiper-slide .vi-txt-box{padding:30px 10px 0;}
	.main-visual-box .swiper-slide .vi-txt-box .txt02{font-size:2rem;line-height:2.571rem;}

	.main-visual-box .control-wrap{bottom:16px;padding:0 18px;}
	.main-visual-box .control-wrap{bottom:98px;}
	.main-visual-box .control-wrap .main-vi-navigation{width:23px;height:23px;}
	.main-visual-box .control-wrap .main-vi-prev{background-size:29%;}
	.main-visual-box .control-wrap .main-vi-next{background-size:29%;}
	.main-visual-box .control-wrap .main-vi-pagination{font-size:1.25rem;}
	.main-visual-box .control-wrap .main-vi-autoplay{margin:0 0 0 10px;}
	.main-visual-box .control-wrap .main-vi-autoplay a{width:23px;height:23px;}
	.main-visual-box .control-wrap .main-vi-autoplay .pause{background-size:29%;}
	.main-visual-box .control-wrap .main-vi-autoplay .play{background-size:29%;}
	
	.main-visual-box .main-vi-popup-wrap{height:100vh;}
	.main-visual-box .main-vi-popup-wrap .main-vi-popup-box{top:30px;transform:translateX(-50%);-ms-transform:translateX(-50%);}
	
	.side-menu-wrap{bottom:15px;right:18px;}
	.side-menu-wrap .popup-btn-box .ani{width:70px;height:70px;}
	.side-menu-wrap .popup-btn-box .ani span{font-size:0.643rem;}
	.side-menu-wrap > div ul li{width:40px;height:40px;}
	.side-menu-wrap > div.active ul li:nth-of-type(1){transform:translateY(-200px);-ms-transform:translateY(-200px);}
	.side-menu-wrap > div.active ul li:nth-of-type(2){transform:translateY(-155px);-ms-transform:translateY(-155px);}
	.side-menu-wrap > div.active ul li:nth-of-type(3){transform:translateY(-110px);-ms-transform:translateY(-110px);}
	.side-menu-wrap > div.active ul li:nth-of-type(4){transform:translateY(-65px);-ms-transform:translateY(-65px);}
	.side-menu-wrap > div ul li a{padding:9px 0;font-size:0.643rem;}
}
@media screen and (max-width:420px){
	.main-visual-box .swiper-slide .vi-txt-box .txt02{font-size:1.375rem;line-height:2rem;}
	
	.main-visual-box .main-vi-popup-wrap .main-vi-popup-box .popup-title{font-size:1.357rem;line-height:2rem;}
	.main-vi-popup-swiper .main-tit{font-size:1.143rem;line-height: 1.571rem;}
	.main-vi-popup-swiper .type01 .sub-tit{font-size:0.9286rem;line-height:1.429rem;}
	.main-vi-popup-swiper .type02 .sub-tit{font-size:0.9286rem;line-height:1.429rem;}
	.popup-status-box li{font-size:0.9286rem;line-height:1.143rem;}
	.popup-status-box li a{padding:8px 32px 6px 20px;background:url(/_res/yu/english/img/main/ico-popup-close.png) no-repeat right 16px center;background-size:10px;}
}