@charset "uft-8";

/* .main_body{ position: relative; background-position: center; background-repeat: no-repeat; background-size: cover;} */
html, body{height:100%;}

/** 모션 그래픽 **/
.motion_wrap{width:100%; height:100%; overflow:hidden; position:absolute; left:0; top:0;}
.motion_video{z-index:; width:100%; position:absolute; left:50%; transform:translateX(-50%);}
@media screen and (max-aspect-ratio:1920/970){
   .motion_video.pc{width:auto; height:100%;}
}
@media screen and (max-aspect-ratio:1080/1920){
   .motion_video.m{width:auto; height:100%;}
}

.motion_wrap.m{display:block;}
.motion_wrap.pc{display:none;}

.motion_video.m{top:0;}

@media all and (orientation:landscape){
    .motion_wrap.m{display:none;}
    .motion_wrap.pc{display:block;}
}
@media all and (min-width:640px){
    .motion_video.m{top:-10%;}
}
@media all and (min-width:1920px){
    .motion_video.pc{position:static; width:1920px; margin:0 auto; transform:translateX(0); display:block;}
}

/* 메인 */
.main_area{height:100%; display:none;}

.main_bottom{position:absolute; bottom:4%; left:5%; right:5%; z-index:1000;}
.main_pagin_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
.main_pagin_area{height:30px; width:24%; padding-top:19px; display:block;}
.main_paging_bg{height:2px; width:100%; background-color:rgba(255,255,255,0.4); border-radius:4px;}
.main_paging_bar{display:block; height:2px; background-color:rgba(255,255,255,1); border-radius:4px; transition:0.1s;}

.main_title_wrap{position:absolute; z-index:90; color:#fff; max-width:1920px; width:100%; bottom:110px;}
.main_title{font-size:38px; padding-bottom:22px; position:relative; text-align:center;}
.main_title_area{position:relative; transition:0.8s; transition-delay:0.5s; top:150px; opacity:0;}
.main_more{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:120px; height:38px; color: #fff; border: 1px solid #fff; border-radius:5px; transition:all 0.3s; background-color:rgba(255,255,255,0.2); margin:0 auto; position:relative;}
.main_more:hover{color:#000; background:rgba(255,255,255,0.7);}

.main_title_area.ani{top:0; opacity:1;}

@media all and (min-width:480px){
    .main_title_wrap{bottom:130px;}
}
@media all and (min-width:640px){
    .main_title_wrap{bottom:150px;}
    .main_title{font-size:48px; padding-bottom:30px;}
}
@media all and (min-width:1280px){
    .main_title{font-size:52px; padding-bottom:30px;}
    .main_more{width:140px; height:42px; font-size:18px;}
}
@media all and (min-width:1680px){
    .main_title{font-size:60px; padding-bottom:35px;}
    .main_more{width:160px; height:50px; font-size:20px;}
}
@media all and (orientation:landscape){
    .main_title_wrap{padding:15% 0 0 5%; bottom:auto;}
    .main_title{text-align:left;}
    .main_more{margin:0;}
}
@media all and (orientation:landscape) and (min-width:1280px){
    .main_title_wrap{padding:12% 0 0 5%;}
}

/* bgm */
.main_bgm_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; color:#fff; font-size:12px; font-weight:300; margin-bottom:10px;}
.main_bgm{opacity:0.9; margin-right:10px; cursor:pointer;}

@media all and (min-width:1024px){
    .main_bgm_wrap{margin-bottom:15px;}
}

/* 버튼 */
.btn_wrap.intro{ position: absolute; left: 0; width: 100%; bottom:35px;}
.btn_more{ display: block; width: 130px; height: 40px; line-height: 40px; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 300; text-align: center; color: #fff; border: 1px solid #fff; border-radius: 5px; transition: all 0.3s; margin:0 auto; background-color:rgba(255,255,255,0.1);}
.btn_more:hover{ font-weight: 500; color: #000; background:rgba(255,255,255,0.7);}
.btn_more.active{ font-weight: 500; color: #000; background:rgba(255,255,255,0.7);}

@media all and (min-width:640px){
    .btn_wrap{ bottom: 5%;}
    .btn_more{ width: 100px; height: 30px; line-height: 30px;}
}
@media all and (min-width:768px){
    .btn_more{ width: 110px; height: 35px; line-height: 35px;}
}
@media all and (min-width:960px){
    .btn_more{ width: 120px; height: 40px; line-height: 40px;}
}
@media all and (min-width:1024px){
    .btn_more{ width: 130px;}
}
@media all and (min-width:1280px){
    .btn_more{ width: 150px; height: 44px; line-height: 44px;}
}
@media all and (min-width:1440px){
    .btn_more{ width: 170px; height: 48px; line-height: 48px; font-size: 18px;}
}