@charset "UTF-8";

/* 공통 */
body{overflow:visible}
.interative_wrap{position:relative}

/* 인터랙티브 콘텐츠 - 연혁 */
.int_history{min-height:100vh;background-image:url(../images/sub/interactive/int_bg_history.jpg);background-color:#12232F;background-attachment:fixed;color:#fff}
.int_history .section{min-height:100vh;position:relative;overflow:hidden}
.int_history .visual{height:100vh;padding:9.3rem 0 10.3rem;text-align:center}
.int_history .detail{overflow:visible}

.int_history .intro{position:absolute;left:0;top:22.142%;width:100%;max-width:126rem;display:flex;align-items:center;justify-content:center;margin:0 auto;z-index:1}
.int_history .intro .year{display:flex;align-items:center;font-family:"bookkmj", serif;font-size:12rem;position:absolute;top:0;line-height:1}
.int_history .intro .year.left{top:50%;left:50%;transform:translate(-50%, -50%)}
.int_history .intro .year.right{top:50%;right:50%;transform:translate(50%, -50%)}
.int_history .intro_text{opacity:0;position:relative;padding:0 15.3rem;margin:0 2.4rem;font-size:3.1rem;font-weight:300;line-height:1.4;letter-spacing:-.093rem}
.int_history .intro_text::before,
.int_history .intro_text::after{content:"";position:absolute;left:0;top:50%;width:11.1rem;border-bottom:1px solid #fff;opacity:.2}
.int_history .intro_text::after{left:auto;right:0}

.int_history .logo{position:absolute;top:9.6%;width:100%}

.marquee_wrap{opacity:0;position:absolute;left:0;top:47%;width:100%;overflow:hidden}
.marquee_img{display:flex;animation:scrolling 30s infinite linear}
.marquee_img > li{margin-right:2rem;box-shadow:.5rem .5rem 1rem 0 rgba(0,0,0,.1)}
.marquee_img img{max-width:inherit;width:24.0625vw}

@keyframes scrolling {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-120.3125vw - 10rem))}
}

.scroll_line{position:absolute;left:50%;transform:translateX(-50%);padding-bottom:9.2rem;bottom:0;font-size:1.5rem;font-weight:700}
.scroll_line .line{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:1px;height:8.1rem;background:rgba(255,255,255,.2)}
.scroll_line .line:before{content:"";position:absolute;left:0;top:0;background:#fff;width:100%;height:0;animation:scr_line 2.5s infinite}
@keyframes scr_line{
    100%{height:100%}
}

.int_tabmenu{position:sticky;left:0;top:0;width:100%;display:flex;background:#000;z-index:10}
.int_tabmenu > li{flex:1;border-right:1px solid rgba(255,255,255,.15)}
.int_tabmenu > li:last-child{border-right:0}
.int_tabmenu > li > a{display:flex;height:8.5rem;align-items:center;justify-content:center;padding:0 1rem;text-align:center;color:#fff;font-size:2.1rem;transition:all .3s}
.int_tabmenu > li > a:hover,
.int_tabmenu > li > a:focus{background:rgba(255,255,255,.1)}
.int_tabmenu > li.active > a{background:#ED1A3B}

.int_tab_cont .tab_content{display:none}
.int_tab_cont .tab_content.active{display:block}

.history_detail{padding:14.8rem 2rem}
.history_detail .title_area{font-family:"bookkmj", serif;text-align:center}
.history_detail .title_area .top_year{font-size:15rem;opacity:.08;letter-spacing:-.45rem;line-height:1}
.history_detail .title_area .top_title{font-size:5rem;letter-spacing:-.15rem}

#tab1 .history_detail{padding-bottom:40rem}

.history_lst_wrap{position:relative;margin-top:5rem;background:url(../images/sub/interactive/bg_history_content.png) center top .6rem no-repeat}
.history_list{position:relative;padding-top:13.2rem}
.history_list::before{content:"";position:absolute;left:50%;top:0;bottom:10rem;border-left:1px solid #ED1A3B}
.history_list::after{content:"";position:absolute;left:calc(50% - .5rem);top:0;width:1.1rem;height:1.1rem;border-radius:100%;background:#ED1A3B;box-shadow:0 0 0 .7rem rgba(237, 26, 59, 0.20);animation:dot_point 1.5s infinite}
.history_list > li{position:relative;width:50%;height:11.2rem;margin:0 auto 0 0;padding-right:3.3rem;text-align:right}
.history_list > li::before{content:"";position:absolute;right:-.4rem;top:1.3rem;width:.7rem;height:.7rem;border-radius:100%;background:#ED1A3B;transition:all .3s}
.history_list > li:nth-child(odd){margin:0 0 0 auto;padding-left:3.3rem;text-align:left}
.history_list > li:nth-child(odd)::before{right:auto;left:-.3rem}
.history_list > li .tit{display:block;margin-bottom:1.5rem;font-size:3rem;font-weight:700;letter-spacing:-.09rem;line-height:1}
.history_list > li .desc{font-size:2rem;line-height:1.4;letter-spacing:-.06rem}
.history_list > li.active::before{background:#fff;animation:scale .5s forwards}

.history_list > li .tit,
.history_list > li .desc{position:relative;left:-2rem;opacity:0;transition:all .2s}
.history_list > li:nth-child(odd) .tit,
.history_list > li:nth-child(odd) .desc{left:2rem}
.history_list > li.active .tit,
.history_list > li:nth-child(odd).active .tit{left:0;top:0;opacity:1}
.history_list > li.active .desc,
.history_list > li:nth-child(odd).active .desc{left:0;opacity:1;transition-delay:.15s}

@keyframes dot_point {
    0%{box-shadow:0 0 0 .6rem rgba(237, 26, 59, .20)}
    50%{box-shadow:0 0 0 1.1rem rgba(237, 26, 59, .20)}
    100%{box-shadow:0 0 0 .6rem rgba(237, 26, 59, .20)}
}
@keyframes scale{
    100%{transform:scale(1.4)}
}

.photo_box{position:absolute;top:0;opacity:0;filter:blur(30px);margin-top:5rem;transition:all .7s}
.photo_box img{box-shadow:1rem 1rem 1rem 0 rgba(0, 0, 0, .15);}
.photo_box figcaption{margin-top:1rem;text-align:center;opacity:.6}
.photo_box.t1{right:50%;transform:rotate(-12.642deg) translateX(-30rem)}
.photo_box.t2{left:50%;top:22.6rem;transform:rotate(15deg) translateX(33.8rem)}
.photo_box.t3{right:50%;top:83rem;transform:rotate(12.813deg) translateX(-12rem)}

.photo_box.t4{right:50%;top:5rem;transform:rotate(-11.501deg) translateX(-34rem)}
.photo_box.t5{left:50%;top:43.2rem;transform:rotate(16.62deg) translateX(33.5rem)}
.photo_box.t6{right:50%;top:83.3rem;transform:rotate(-15deg) translateX(-28.7rem)}

.photo_box.t7{right:50%;top:0;transform:rotate(3.499deg) translateX(-34.7rem)}
.photo_box.t8{left:50%;top:19.5rem;transform:rotate(-12.728deg) translateX(37.1rem)}
.photo_box.t9{right:50%;top:56rem;transform:rotate(-15deg) translateX(-31.4rem)}
.photo_box.t10{left:50%;top:65.7rem;transform:rotate(16.62deg) translateX(40.6rem)}
.photo_box.t11{right:50%;top:161.8rem;transform:rotate(-5.527deg) translateX(-34.8rem)}
.photo_box.t12{left:50%;top:193.6rem;transform:rotate(29.954deg) translateX(39.6rem)}

.photo_box.t13{right:50%;top:-18.2rem;transform:rotate(-15deg) translateX(-31.1rem)}
.photo_box.t14{left:50%;top:0;transform:rotate(-12.728deg) translateX(36.1rem)}
.photo_box.t15{right:50%;top:24rem;transform:rotate(12.086deg) translateX(-36rem)}
.photo_box.t16{left:50%;top:65.5rem;transform:rotate(9.578deg) translateX(41.6rem)}
.photo_box.t17{left:50%;top:60rem;transform:rotate(-12.728deg) translateX(35.4rem)}
.photo_box.t18{left:50%;top:130.2rem;transform:rotate(-7.828deg) translateX(37.1rem)}

.photo_box.active{opacity:1;filter:blur(0);margin-top:0}


/* 푸터 */
#int_footer{padding:5.8rem 0;background:#10202B;color:#fff}
#int_footer .inner{position:relative;display:flex;align-items:center;max-width:127.7rem;margin:0 auto}
#int_footer .footer_logo{width:14.9rem;margin-right:10.3rem}
#int_footer address{margin-bottom:1.3rem}
.tel_info > li{margin-top:.5rem}

.top_btn{display:block;position:absolute;right:0;top:50%;transform:translateY(-50%);width:5.2rem;height:5.2rem;line-height:5.2rem;overflow:hidden;background:#ED1A3B;text-align:center}
.top_btn::before{content:"\EA76";position:relative;display:inline-block;font-family:"remixicon";font-size:2.2rem;line-height:1}
.top_btn:hover::before,
.top_btn:focus::before{animation:v_move 1s infinite linear}
@keyframes v_move{
    0%{top:0}
    25%{top:-.3rem}
    50%{top:0}
    75%{top:.3rem}
    100%{top:0}
}

/* 상단 비주얼 효과 */
.int_history .logo{transform:scale(1.5);opacity:0;transition:all .5s .2s}
.active .int_history .logo{transform:scale(1);opacity:1}
.int_history .intro{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}
.scroll_line{bottom:-100%;transition:all 1.2s ease}
.active .scroll_line{bottom:0}

@media screen and (max-width:1280px){
    .int_history .intro .year{font-size:9.375vw}
    .int_history .intro_text{padding:0 10%}
    .int_history .intro_text::before, 
    .int_history .intro_text::after{width:13%}

    .photo_box{max-width:20rem}
    .photo_box.t1,
    .photo_box.t3,
    .photo_box.t4,
    .photo_box.t6,
    .photo_box.t7,
    .photo_box.t9,
    .photo_box.t13,
    .photo_box.t15{left:0;right:auto;transform:translate(0)}
    .photo_box.t2,
    .photo_box.t5,
    .photo_box.t8,
    .photo_box.t10,
    .photo_box.t12,
    .photo_box.t14,
    .photo_box.t16,
    .photo_box.t17,
    .photo_box.t18{left:auto;right:0;transform:translate(0)}
    .photo_box.t11{display:none}
    .photo_box.t12{top:207rem}
    .photo_box.t16{top:67.5rem}
    .photo_box.t18{top:137rem}

    #int_footer{padding:5.8rem 1rem}
}

@media screen and (max-width:960px){
    .int_history .intro_text{padding:0 9%}
}

@media screen and (max-width:850px){
    .photo_box{display:none}
    #tab1 .history_detail{padding-bottom:14.8rem}
}

@media screen and (max-width:768px){
    #int_footer .footer_logo{margin-right:5rem}
    .int_history .intro_text::before, 
    .int_history .intro_text::after{display:none}
    .footer_info{padding-right:6.2rem}
}

@media screen and (max-width:600px){
    .history_detail{padding:14.8rem 1rem 10rem}
    .int_history .intro{width:70%}
    .int_history .intro_text{width:100%;margin:0;padding:10rem 0 0;font-size:2.5rem}
    .int_history .intro .year.left:before{opacity:0;content:"";position:absolute;left:125%;width:0;height:1px;background:rgba(255,255,255,.5);transition:all .5s}
    .int_history .intro .year.left.after:before{opacity:1;width:70%}
    .int_history .intro .year.left,
    .int_history .intro .year.right{top:20%}
    .int_tabmenu > li > a{font-size:1.7rem;line-height:1.2}
    .history_list > li .desc{font-size:1.6rem}
    .marquee_img img{width:40vw}
    @keyframes scrolling {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-450vw - 10rem))}
    }

    #int_footer{padding:3rem 1rem}
    #int_footer .inner{flex-direction:column}
    #int_footer .footer_logo{margin:0 0 2rem}
    #int_footer .footer_info{padding-right:0}
    .top_btn{position:static;transform:none;margin-top:3rem}
}

@media screen and (max-width:470px){
    .int_tabmenu > li > a{word-break:break-all}
    .marquee_img img{width:90vw}
}

@media screen and (max-width:360px){
    .history_list > li .desc{font-size:1.4rem}
}