@charset "uft-8";

html,body{height:100%;}

/* 글씨들 아래에서 위로 올라오는 효과 */
.ani{opacity:0; transition:0.6s;}
.divide_bg{background-color:rgba(0,0,0,0.1);}

.small{transform:scale(0.8); opacity:0; transition:0.5s; transform-origin:50% 50%;}
.big{transform:scale(1); opacity:1; transition:0.5s; transform-origin:50% 50%;}

/** 스토리 1 - 동영상 **/
.story_1_wrap{height:100%; 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;}
.story_1_logo{display:block; width:50%; max-width:260px; margin:0 auto;}
.story_1_area{width:100%; max-width:900px; margin:0 auto; padding-top:50px;}
.story_1_area .video_wrap{margin:25px auto;}

.story_1_text{text-align:center; line-height:1.3; font-size:24px;}
.story_1_text_2{display:block; font-size:1.5em;}

@media all and (min-width:480px){
    .story_1_text_2{display:inline;}
}
@media all and (min-width:640px) and (orientation: landscape){
    .story_1_wrap{height:auto;}
    .story_1_area{padding:80px 0 50px 0;}
    .story_1_area .video_wrap{margin:25px auto; width:80%; padding-top:45%;}
}
@media all and (min-width:640px){
    .story_1_area .video_wrap{margin:35px auto;}
    .story_1_text{font-size:30px;}
}
@media all and (min-width:768px){
    
}
@media all and (min-width: 1024px){
    .story_1_text{font-size:36px;}
    .story_1_area .video_wrap{width:100%; padding-top:56.25%;}
}
@media all and (min-width: 1280px){
    .story_1_area{padding-top:90px;}
}
@media all and (min-width: 1440px){
    .story_1_area{padding-top:110px;}
}
@media all and (min-width: 1680px){
    .story_1_wrap{height:100%;}
    .story_1_area{padding:120px 0 0 0;}
    .story_1_area .video_wrap{margin:35px auto 25px auto;}
}

/** 스토리 2 - 구역 소개 **/
.story_2_wrap{height:100%; 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;}
.story_2_area{width:100%; max-width:1096px; margin:0 auto; position:relative; opacity:0; padding-top:50px;}

@media all and (min-width:480px){

}
@media all and (min-width:640px) and (orientation: landscape){
    .story_2_area{width:60%; padding:30px 0 0 0;}
}
@media all and (min-width:640px){

}
@media all and (min-width:768px){
    
}
@media all and (min-width: 1024px){
    .story_2_area{width:80%;}
}
@media all and (min-width: 1280px){
    .story_2_wrap{}
    .story_2_area{width:75%;}
}
@media all and (min-width: 1440px){

}
@media all and (min-width: 1680px){
    .story_2_wrap{}
    .story_2_area{width:1096px; padding:80px 0 0 0;}
}

/** 스토리 3 - 캐릭터 소개 **/
.story_3_wrap{height:100%; display:flex; justify-content:center; align-items:center;}
.story_3_area{width:100%; max-width:1920px; margin:0 auto; position:relative;}
.story_3_top, .story_3_bottom{text-align:center;}
.story_3_top{color:#071b3e; font-size:25px; line-height:1.2;}
.story_3_top h2{font-size:38px; font-family:'Montserrat', sans-serif;}
.story_3_bottom{color:#fff; font-size:21px;}

@media all and (min-width:480px){

}
@media all and (min-width:640px) and (orientation:landscape){
    .story_3_wrap{}
    .story_3_area{width:60%; padding:40px 0 0 0;}
}
@media all and (min-width:640px){

}
@media all and (min-width:768px){
    .story_3_top{font-size:26px;}
    .story_3_top h2{font-size:40px;}
    .story_3_bottom{font-size:22px;}
}
@media all and (min-width:1024px){
    .story_3_area{width:100%;}
    .story_3_top{font-size:30px; line-height:1.1;}
    .story_3_top h2{font-size:54px;}
    .story_3_bottom{font-size:24px;}
}
@media all and (min-width:1280px){
    .story_3_top{font-size:35px;}
    .story_3_top h2{font-size:60px;}
    .story_3_bottom{font-size:30px;}
}
@media all and (min-width:1440px){

}
@media all and (min-width:1680px){
    .story_3_area{padding:70px 0 0 0;}
}

/** 스토리 4 - 티켓 **/
.story_4_wrap{height:100%; 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;}
.story_4_area{width:100%; max-width:700px; margin:0 auto; position:relative; padding:50px 3% 0 3%;}
.story_4_box li{margin:15px 0; padding-top:47.29%; position:relative; background:url(../images/ticket.png) no-repeat 50%; background-size:cover;}
.story_4_ticket_wrap{position:absolute; left:0; top:0; width:100%; height:100%; 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;}
.story_4_ticket_area{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:66%;}
.story_ticket_left{width:42%; max-width:181px;}
.story_ticket_right{width:48%; 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; max-width:200px;}
.story_ticket_right_inner{width:100%;}
.story_ticket_logo{width:100%;}
.story_ticket_btn{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:90%; height:36px; margin:10px auto 0 auto; background-color:#fff; color:#071b3e; border-radius:15px; font-weight:500; padding-bottom:2px; font-size:18px; transition:0.2s;}
.story_ticket_btn:hover{background-color:#7298f9; color:#fff;}

@media all and (min-width:640px){
    .story_4_area{padding:0; width:80%;}
    .story_4_box li{margin:25px 0;}
    .story_ticket_btn{width:160px; height:48px; font-size:22px; margin:20px auto 0 auto; border-radius:20px;}
}
@media all and (min-width:640px) and (orientation: landscape){
    .story_4_wrap{height:auto;}
    .story_4_area{width:75%; padding:80px 0 30px 0;}
    .story_4_box li{margin:20px 0;}
}
@media all and (min-width:768px){

}
@media all and (min-width: 1024px){
    .story_4_wrap{height:100%;}
    .story_4_area{width:45%; padding:50px 0 0 0;}
}
@media all and (min-width: 1280px){
    .story_4_area{padding:70px 0 0 0;}
}
@media all and (min-width: 1440px){

}
@media all and (min-width: 1680px){
    .story_4_area{padding:100px 0 0 0;}
    .story_4_box li{margin:30px 0;}
}

/** 스토리 5 - 후기 **/
.story_5_wrap{height:100%; 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;}
.story_5_mid{padding:50px 8.5% 0 8.5%; margin:0 auto;}
.story_5_area{width:100%; margin:0 auto; position:relative;}

.ballon_logo{display:block; width:50%; max-width:248px; margin:10px auto; transition:0.5s;}
.ballon_logo.ani{width:1%;}

.ballon{background-repeat:no-repeat; background-position:50%; background-size:cover; position:relative; margin:5px 0;}
.ballon_inner{position:absolute; top:0; bottom:0; 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; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; text-align:center; line-height:1.3;}
.ballon_source{padding-top:5px; font-size:0.8em;}
.ballon_inner div{width:100%;}

.ballon_1{background-image:url(../images/story_ballon_1.png); padding-top:38.2%;}
.ballon_2{background-image:url(../images/story_ballon_2.png); padding-top:38.4%;}
.ballon_3{background-image:url(../images/story_ballon_3.png); padding-top:38.2%;}
.ballon_4{background-image:url(../images/story_ballon_4.png); padding-top:38.3%;}

.ballon_1, .ballon_2, .ballon_3, .ballon_4{top:0; transition:0.5s;}
.ballon_1.ani, .ballon_2.ani, .ballon_3.ani, .ballon_4.ani{top:10px;}

.ballon_1 .ballon_inner{left:0; right:7.2%;}
.ballon_2 .ballon_inner{left:7.2%; right:0;}
.ballon_3 .ballon_inner{left:7.2%; right:0;}
.ballon_4 .ballon_inner{left:0; right:7.2%;}

@media all and (min-width:480px){
    .story_5_area{padding:50px 12% 0 12%;}
    .ballon_inner{font-size:19px;}
    .ballon_source{padding-top:10px;}
}

@media all and (min-width:640px){
    .story_5_mid{padding:70px 0 20px 0;}
    .story_5_area{width:100%; padding-top:59%;}
    .ballon_box{position:absolute; left:0; top:0; width:100%; height:100%; 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; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; text-align:center;}
    .ballon_logo{width:21%;}
    .ballon{position:absolute;}
    .ballon_1{left:0; top:0; width:50%; padding-top:19%;}
    .ballon_2{right:0; top:10%; width:42%; padding-top:16%;}
    .ballon_3{right:1%; bottom:0; top:auto; width:49%; padding-top:18.7%;}
    .ballon_4{left:0; bottom:9%; top:auto; width:42%; padding-top:16%;}    
    
    .ballon_inner{font-size:16px;}
}
@media all and (min-width:768px){
    .ballon_inner{font-size:19px;}    
}
@media all and (min-width: 1024px){
    .story_5_mid{padding:70px 0 20px 0; width:90%;}
    .ballon_inner{font-size:24px;}
    .ballon_source{font-size:0.75em; padding-top:15px;}
}
@media all and (min-width:1280px){
    .story_5_wrap{}
    .story_5_area{width:1196px; height:702px; padding:0;}
    .story_5_mid{padding:100px 0 30px 0; width:100%;}
    .ballon_logo{width:248px;}
    .ballon_inner{font-size:30px; letter-spacing:-1px;}
    .ballon_source{font-size:18px; padding-top:16px;}
}
@media all and (min-width: 1440px){

}
@media all and (min-width: 1680px){
    .story_5_wrap{height:100%;}
    .story_5_mid{padding:100px 0 0 0;}
    .ballon_1.ani{top:10%;}
    .ballon_2.ani{top:20%;}
    .ballon_3.ani{bottom:-10%; top:auto;}
    .ballon_4.ani{bottom:-1%; top:auto;}
}


/** 스토리 6/7 - 기대효과 **/
.story_6_area, .story_7_area{padding:80px 3% 30px 3%;}
.story_7_wrap{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; height:100%;}

.obw_effect{display:block; width:100%; margin:0 auto;}
.obw_effect.one{max-width:765px;}
.obw_effect.two{max-width:1030px;}

@media all and (min-width:640px) and (orientation: landscape){
    .story_7_wrap{height:auto;}
}
@media all and (min-width:1024px){
    .obw_effect{width:80%;}
}
@media all and (min-width:1280px){
    .story_6_area, .story_7_area{padding:110px 0 40px 0;}
}
@media all and (min-width:1680px){
    .story_6_area, .story_7_area{width:100%; padding:150px 0 100px 0;}
}