section, section *{ box-sizing:border-box; }
*{ box-sizing:border-box; }
section{ overflow:hidden; }
section:last-child{ padding-bottom:150px !important; }
.main-con{width: 100%; margin: 0 auto; padding: 0 4rem;}

/* scroll-wrap */
.scroll-wrap{position: fixed; right: 4rem; bottom: 3rem; z-index: 999; display: flex; align-items: center; transform: rotate(90deg); transform-origin: bottom right;}
.scroll-wrap > ul{display: flex;}
.scroll-wrap > ul > li{font-size: 18px;}
.scroll-wrap > ul > li > a{font-family: "TNR"; font-weight: 500; transition: .5s; letter-spacing: 1px; color: rgba(255, 255, 255, 1);}
.scroll-wrap > ul > li > a:hover{color: rgba(255, 255, 255, .6);}
.scroll-wrap > .line{width: 350px; background-color: rgba(255, 255, 255, 0.3); height: 1px; margin-left: 1rem; position: relative; overflow: hidden;}
.scroll-wrap > .line::before{content: ""; width: 350px; height: 2px; background-color: #fff; position: absolute; top: 0; left: -100%; animation: line 8s infinite ease-in-out;}

.number{font-family: "TNR"; font-size: 16px; color: #fff; position: fixed; bottom: 3rem; right: 6rem; z-index: 999; letter-spacing: 1px;}

@keyframes line{
	0%{left: -100%;}
	100%{left: 100%;}
}

/*sc01*/
#sc01{ height: 100vh; position: relative; overflow: hidden;}

.main-caption{width: 100%; padding: 0 4rem; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 99; color: #fff;text-align: center; display: flex; justify-content: center;}
.main-caption > img{max-width: 450px; width: 100%; display: inline-block;}

.sc01mw{ position:relative; z-index:1; overflow:hidden; background-color:#333; width: 100%; height: 100%;}
.sc01mw > .sc01_bdo{ position:absolute; z-index:1; top:50%; left:50%; min-width:100%; height:155%; transform:translate(-50%,-50%); }

.vimeo_player_wrapper{opacity: 1 !important;}

/* mouse-s */
.mouse-s{position: absolute; bottom: 2rem; left: 0; width: 100%; text-align: center; z-index: 8; color: #fff;}
.mouse-s > p{font-size: 18px;}
.mouse-s > span{display: block; font-size: 18px; transition: all 1s ease-in-out; animation: mousey 1.5s infinite;}

/* sc02 */
.sc02-wrap{width: 100%; display: flex;}
.sc02-box{width: 50%; display: flex; flex: 1 1 auto; position: relative; overflow: hidden;}
.sc02-box img{width: 100%; transition: 1.5s; transform: scale(1);}
.sc02-box:hover img{transform: scale(1.1);}
.sc02-box > h5{display: block; width: 100%; text-align: center; font-size: 18px; font-weight: 400; color: #fff; font-family: "TNR"; letter-spacing: 2px; position: absolute; bottom: 4rem; left: 0;}

.sc02-box.lt.ani{transform: translateX(-100px); opacity: 0; transition: 1.5s;}
.sc02-box.rt.ani{transform: translateX(100px); opacity: 0; transition: 1.5s;}
.sc02-box.ani.act{transform: translateX(0); opacity: 1;}

/* sc03 */
#sc03{padding: 150px 0 100px; background-color: #0A0C18;}

.sc03-wrap1{width: 100%; display: flex; justify-content: space-between; margin-bottom: 100px;}
.sc03-wrap1 > .sc03-box{width: 32%;}
.sc03-wrap1 > .sc03-txt{width: 65%;}

.sc03-wrap1 > .sc03-box.ani{transform: translateX(100px); opacity: 0; transition: 1.5s;}
.sc03-wrap1 > .sc03-box.ani.act{transform: translateX(0); opacity: 1;}

.sc03-img{width: 100%; display: flex;}
.sc03-img img{width: 100%;}

.sc03-caption{padding-right: 15px; margin-bottom: 3rem; color: #fff;}
.sc03-caption > h3{font-size: 18px; display: inline-block; padding: 1rem 3rem; border: 1px solid #ddd; position: relative; margin-bottom: 98px;}
.sc03-caption > h3::after{content: ""; width: 1px; height: 50px; background-color: rgba(255, 255, 255, 0.6); position: absolute; left: 50%; bottom: -100px; transform: translateX(-50%) rotate(30deg);}
.sc03-caption > p{font-size: 16px; margin-top: 3rem; line-height: 1.8;}

.sc03-wrap2{width: 100%; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px;}
.sc03-wrap2 > .sc03-txt{width: 32%;}
.sc03-wrap2 > .sc03-box{width: 65%;}

.sc03-wrap2 .sc03-caption{margin-bottom: 0;}
.sc03-wrap2 .sc03-caption > h3.ani{transform: translateX(100px); opacity: 0; transition: 1.5s;}
.sc03-wrap2 .sc03-caption > p.ani{transform: translateX(100px); opacity: 0; transition: 1.5s; transition-delay: .3s;}
.sc03-wrap2 .sc03-caption > h3.ani.act{transform: translateX(0); opacity: 1;}
.sc03-wrap2 .sc03-caption > p.ani.act{transform: translateX(0); opacity: 1;}

.sc03-img.last.ani{opacity: 0; transition: 1.5s;}
.sc03-img.last.ani.act{opacity: 1;}

/* sc04 */
.sc04Swiper{background-color: #0A0C18;}
.sc04-img{display: flex;}
.sc04-img img{width: 100%;}

@media(min-width:992px){
	.ms-img{display: block; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; background-color:#666; }
	.ms-img-m{display: none;}

	.ani.up.delay{
        transition: 1s opacity 0.2s, 1s transform 0.2s;
    }
    .ani.up.delay2{
        transition: 1s opacity 0.5s, 1s transform 0.5s;
    }
    .ani.up.delay3{
        transition: 1s opacity 0.8s, 1s transform 0.8s;
    }
}
@media(max-width:991px){
	.scroll-wrap{display: none;}
	.number{display: none;}

	.ms-img{display: none;}
	.ms-img-m{display: block; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; background-color:#666; }

	.main-caption{padding: 0 15px;}
	.main-caption > img{width: 80%;}

	.sc02-wrap{flex-direction: column;}
	.sc02-box{width: 100%;}

	#sc03{padding: 100px 0;}
	.sc03-wrap1{flex-direction: column; margin-bottom: 80px;}
	.sc03-wrap1 > .sc03-box{width: 100%;}
	.sc03-wrap1 > .sc03-txt{width: 100%;}
	.sc03-wrap2{flex-direction: column; margin-bottom: 0;}
	.sc03-wrap2 > .sc03-box{width: 100%;}
	.sc03-wrap2 > .sc03-txt{width: 100%;}
	.sc03-caption{padding: 0 15px; margin: 2rem 0;}
	.sc03-caption > h3{font-size: 16px; padding: 10px 2rem; margin-bottom: 74px;}
	.sc03-caption > h3::after{bottom: -78px;}
	.sc03-caption > p{font-size: 14px; margin-top: 1.5rem;}
	.sc03-wrap1 .sc03-caption{text-align: right;}
	.sc03-wrap2 .sc03-caption{margin: 2rem 0;}
	
}

/* animation */

.ani.up{
    transform: translateY(100px);
    opacity: 0;
    transition: 1.5s;
}

.ani.up.act{
    transform: translateY(0);
    opacity: 1;
}