@charset "utf-8";   

/* Background */
#main_bg , #visual { width:100vw ; height:100vh ; display:block }
#main_bg { 
    overflow:hidden ;
    position:fixed ; left:0 ; top:0 ; z-index:-1 ;
}
#main_bg::before , #main_bg::after { display:block ; content:"" ; position:absolute }
#main_bg::before {
    width:100% ; height:100% ; 
    background:url(../img/main_visual.jpg) no-repeat center ; background-size:cover ;
    left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.2) ; 
    transition:0.3s all ;
    animation-name:main_visual ; animation-delay:0.5s ; animation-duration:30s ;
    animation-iteration-count:infinite ;   
}

@keyframes main_visual { 
    0%   { transform:translate(-50%,-50%) scale(1.2) }   
    45%  { transform:translate(-50%,-50%) scale(1) }       
    50%  { transform:translate(-50%,-50%) scale(1) }    
    95%  { transform:translate(-50%,-50%) scale(1.2) } 
    100% { transform:translate(-50%,-50%) scale(1.2) }   
}

.visualStop #main_bg::before {  
    transform:translate(-50%,-50%) scale(1) ;
    animation-name:none
} 
 
#main_bg::after {  
    left:0 ; top:0 ; width:100% ; height:20rem ; transition:0.3s all ;
    background:linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 20%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%); 
}
.sticky #main_bg::after { opacity:0 }



/* Visual */
#visual { width:100% ; overflow:hidden ; min-height:60rem ; position:relative ; z-index:80 ; background-color:rgba(0,0,0,0.1) }
#visual_PP , .visual__PP__item , .visual__PP__btn , .visual__PP__btn::after {
    font-size:0 ; color:transparent ; display:block ; width:2rem ; height:2rem ; 
} 
.visual__PP__btn , .visual__PP__btn::after { transition:0.3s all }
#visual_PP { position:absolute ; right:1rem ; bottom:1rem }
.visual__PP__btn { border-radius:100% ; background-color:rgba(0,0,0,0.5) ; border-radius:100% ; overflow:hidden } 
.visual__PP__btn::after {
    content:"" ; background:url(../img/icon_PP.png) no-repeat ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    opacity:0.8 ;
}

.visual__PP__item.play { display:none }
.visual__PP__item.play .visual__PP__btn::after { background-position:top right }
.visual__PP__item.stop .visual__PP__btn::after { background-position:top left }
.visual__PP__btn:hover { background-color:#f1592a }
.visual__PP__btn:hover::after { opacity:1 }

.visualStop .visual__PP__item.play { display:block }
.visualStop .visual__PP__item.stop { display:none }

#visual_box {  
    opacity:0 ;
    animation: ani_visualBox1 0.7s forwards;
}
#vl_title , #vl_txt , #vl_vol_date {  
    opacity:0 ; position:relative ; top:2rem ; 
    animation: ani_visualBox2 0.7s forwards;
}
@keyframes ani_visualBox1 { to { opacity:1 ; top:50% } }
@keyframes ani_visualBox2 { to { opacity:1 ; top:0 } }
#visual_box   { animation-delay: 0.7s; }
#vl_title     { animation-delay: 1.1s; }
#vl_txt       { animation-delay: 1.4s; }
#vl_vol_date  { animation-delay: 1.5s; }

#visual_box { 
    width:30rem ; padding:6rem 0 ; overflow:hidden ; border-radius:0.4rem ;
    position:absolute ; left:50% ; top:50% ; z-index:81 ; transform:translate(-50%,-50%) scale(0.7) ;
    background-color:rgba(29,47,111,0.9) ; transition:0.3s all ; 
}
#vl_title , #vl_txt , #vl_vol , #vl_date {
    text-shadow:0 0 0.3rem rgba(0,0,0,0.1) ;
    color:#ffffff ; line-height:100% ; font-family:'GamtanRoad Dotum',sans-serif }
#vl_title b , #vl_title span {
    font-family:inherit ; line-height:inherit ; color:inherit ;
    text-shadow:inherit ; font-weight:inherit ; letter-spacing:inherit
}
#vl_title   { font-size:8rem ; letter-spacing:-0.8rem ; font-weight:100 ; text-align:center ; margin-bottom:1rem }
#vl_title b { display:block ; font-weight:800 ; letter-spacing:-0.4rem }
#vl_title span { 
    transform:scaleX(40%) ; margin:0 ; letter-spacing:-1rem ;
    position:relative ; left:-0.1rem ; display:inline-block ;
}
#vl_txt , #vl_vol_date { display:block ; width:23rem ; margin:auto }
#vl_txt { 
    background-color:#ffffff ; padding:0.7rem 0.2rem 0.5rem ; margin-bottom:1rem ;
    font-size:2rem ; color:#1d2f6f ; font-weight:800 ; text-align:center ;
    border-radius:0.2rem ; letter-spacing:0 ;
}

#vl_vol_date::after { display:block ; content:"" ; clear:both } 
#vl_vol , #vl_date  { font-size:3.2rem ; letter-spacing:-0.15rem }
#vl_vol  { font-weight:800 ; float:left ; text-align:left } 
#vl_date { font-weight:400 ; float:right ; text-align:right }

#visual_btn_scroll , #visual_btn_scroll > b , #visual_btn_scroll > b::after {
    display:block ; overflow:hidden ; width:5rem ; 
    transition:0.3s all ;
} 
#visual_btn_scroll , #visual_btn_scroll > b::after { position:absolute ; left:50% }
#visual_btn_scroll > b , #visual_btn_scroll > b::after { height:5rem ; border-radius:100% }
#visual_btn_scroll {
    bottom:1rem ; transform:translateX(-50%) ;
    font-size:1rem ; line-height:100% ; color:rgba(255,255,255,0.8) ; font-weight:500 ; text-align:center ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
}
#visual_btn_scroll:hover { color:#ffffff } 
.sticky #visual_btn_scroll { bottom:-9rem ; opacity:0 }
#visual_btn_scroll > b { position:relative ; background-color:rgba(0,0,0,0.2) ; overflow:hidden ; margin-bottom:0.7rem }
#visual_btn_scroll > b::after {
    content:"" ; opacity:0.7 ; transition:0.2s all ;
    top:50% ; transform:translate(-50%,-50%) ; 
    background:url(../img/icon_mouse.png) no-repeat center ; background-size:cover ;  
}
#visual_btn_scroll:hover > b , #visual_btn_scroll:focus > b { background-color:rgba(0,0,0,0.6) }
#visual_btn_scroll:hover > b::after , #visual_btn_scroll:focus > b::after { opacity:1 }




/* Contents */
#contents       { padding:8rem 0 ; background-color:rgba(0,0,0,0.6) ; transition:0.5s all }
#contents:hover { background-color:rgba(0,0,0,0.7) } 
.ctns__list     { width:90% ; max-width:60rem ; margin:auto }
.ctns__link , .ctns__link::after , .ctns__link > b { transition:0.3s all }
.ctns__link     { 
    display:block ; padding:2rem 0.5rem ; border-bottom:dashed 1px rgba(255,255,255,0.2) ;
    font-size:0 ; position:relative ;
} 
.ctns__link br { display:none }
.ctns__item:last-child .ctns__link { border-color:rgba(0,0,0,0) }
.ctns__link::after {
    display:block ; content:"" ; width:0; height:1px ; 
    background-color:#f1592a ;
    position:absolute ; left:0 ; bottom:-1px ;
}
.ctns__link:hover::after { width:100% }
.ctns__link > span , .ctns__link > b , .ctns__link > strong { word-break:keep-all ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
.ctns__link > span , .ctns__link > b { 
    font-size:1.4rem ; line-height:110% ; font-weight:500 ; display:inline-block ;
    margin-bottom:0.5rem ;
} 
.ctns__link > b { opacity:0.7 } 
.ctns__link:hover > b { opacity:1 } 
.ctns__link > strong  {
    display:block ; font-size:1.8rem ; line-height:140% ;
    font-weight:500 ;
}
.ctns__link > span { color:#f1592a ; margin-right:0.5rem } 
.ctns__link > b , .ctns__link > strong { color:#ffffff } 






@media screen and (min-width:1024px){ 
 
    /* Visual */
    #visual_box { transform:translate(-50%,-50%) scale(1) } 
    #visual_btn_scroll { bottom:1.5rem }



    /* Contents */
    #contents   { padding:10rem 0 } 
    .ctns__list {
        position:relative ;
        width:96% ; max-width:120rem ; margin:auto ; 
        display:flex ; flex-wrap:wrap } 
    .ctns__list::after {
        display:block ; content:"" ; width:1px ; height:94% ; 
        background-color:#ffffff ; opacity:0.2 ;
        position:absolute ; left:50% ; top:50% ; transform:translateY(-50%) ;
    }    
    .ctns__item { width:50% ; padding-right:5rem }
    .ctns__item:first-child { margin-right:20% }
    .ctns__item:nth-child(3) , .ctns__item:nth-child(5) { float:right ; padding-left:5rem ; padding-right:0 }
    .ctns__link { border:none ; padding:2.5rem 0 ; height:100% }
    .ctns__link br { display:block }
    .ctns__link::after { bottom:0 }
    .ctns__link > span , .ctns__link > b { font-size:1.6rem }
    .ctns__link > strong { font-size:2.2rem ; font-weight:400 ; letter-spacing:-0.05rem }  
} 
    




@media print { }