@charset "utf-8";

/* main */
body , .sticky #header , #nav { background-color:#313131 } 
#main { padding-top:5rem  }



/* header */
#header  {
    width:100% ; min-height:5rem ;
    position:fixed ; left:0 ; top:0 ; z-index:90 ;
}
.sticky #header { box-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
 
#btn_navOpen > b , #btn_navOpen span { 
    display:block ; overflow:hidden ; font-size:0 ; color:transparent ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ; 
}

.sticky #header , #btn_navOpen > b , #btn_navOpen span ,
#btn_navOpen span:nth-child(1)::before , #btn_navOpen span:nth-child(1)::after { transition:0.3s all } 
#btn_navOpen , #btn_searchOpen , #btn_searchOpen > b { width:5rem ; height:5rem ; position:absolute ; top:0 } 
#btn_navOpen      { left:0 ; top:50% ; transform:translateY(-50%) } 
#btn_navOpen > b  { width:3rem ; height:3rem  }
#btn_navOpen span , #btn_navOpen span:nth-child(1)::before  { background-color:#ffffff }
#btn_navOpen span { width:2.8rem ; height:0.2rem ; border-radius:1rem }
#btn_navOpen span:nth-child(1) , #btn_navOpen:hover span:nth-child(3) , #btn_navOpen:focus span:nth-child(3) { top:23% }
#btn_navOpen span:nth-child(2) { top:50% }
#btn_navOpen span:nth-child(3) , #btn_navOpen:hover span:nth-child(1) , #btn_navOpen:focus span:nth-child(1) { top:77% }
#btn_navOpen span:nth-child(1) , #btn_navOpen:hover span:nth-child(1) , #btn_navOpen:focus span:nth-child(1) { background:none }

.navOpen #btn_navOpen span:nth-child(1) ,
.navOpen #btn_navOpen span:nth-child(2) ,
.navOpen #btn_navOpen span:nth-child(3) { top:50% }
.navOpen #btn_navOpen span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg) }
.navOpen #btn_navOpen span:nth-child(2) { opacity:0 }
.navOpen #btn_navOpen span:nth-child(3) { transform:translate(-50%,-50%) rotate(-45deg) }

#btn_navOpen span:nth-child(1)::before , #btn_navOpen span:nth-child(1)::after { 
    display:block ; content:"" ; overflow:hidden ; 
    border-radius:1rem ; height:100% ; 
    position:absolute ; top:0
}
#btn_navOpen span:nth-child(1)::before { width:2.2rem ; left:0 }
#btn_navOpen span:nth-child(1)::after  { width:0.2rem ; right:0 ; background-color:#ff9828 }
 
#btn_navOpen:hover span , #btn_navOpen:focus span { background-color:#ff9828 } 
#btn_navOpen:hover span:nth-child(2) , #btn_navOpen:focus span:nth-child(2) { transform:translate(-50%,-50%) rotate(180deg) } 
#btn_navOpen:hover span:nth-child(1)::before , #btn_navOpen:focus span:nth-child(1)::before { width:0 }
#btn_navOpen:hover span:nth-child(1)::after , #btn_navOpen:focus span:nth-child(1)::after   { width:100% } 

.logo__history , .vol__history { height:2.4rem }
.logo__history { 
    width:25rem ;  
    position:absolute ; right:1rem ; top:50% ; transform:translateY(-50%) ;
}
#logo , #logo > a {
    display:block ; overflow:hidden ; font-size:0 ; color:transparent ;
    width:18.6rem ; height:2.1rem ; 
} 
#logo     { margin-top:0.1rem ; float:left } 
#logo > a { background:url(../img/logo.png) no-repeat 0 0 ; background-size:33.9rem auto }
#VH__btn__open , .VH__body , .VH__now , .nav__item__writer , .nav__inner , .logo__SNUeng { display:none }
.vol__history {
    width:6rem ; border-radius:0.4rem ;
    background-color:#ff9828 ; float:right
}
.vol__history::after { display:block ; content:"" ; clear:both }
.VH__vol { 
    font-size:1.6rem ; line-height:2rem ; color:#313131 ; text-align:center ; font-weight:500 ;
    padding-top:0.3rem ; 
}



/* nav */
#nav {
    width:100% ; height:100vh ; padding-top:5rem ;  
    position:fixed ; left:-101% ; top:0 ; z-index:89 ; 
} 
.navOpen #nav { left:0 }
.navOpen .nav__inner { display:block }
#nav::before {
    display:block ; content:"" ; width:100% ; height:0.1rem ; background-color:#ffffff ;
    position:absolute ; left:0 ; top:5rem ; 
    opacity:0.2 ; 
}  
.nav__inner { width:100% ; height:100% ; overflow:auto }
.nav__item__link {
    display:block ; padding:1.5rem 1rem 1.5rem 4.5rem ; 
    font-size:1.6rem ; line-height:2.4rem ; color:#ffffff ;
    border-bottom:solid 1px rgba(255,255,255,0.1) ;
    position:relative;
}

.nav__item__num , .nav__item__title { 
    color:#ffffff ; font-size:1.6rem ; line-height:2.4rem ;
    float:left ; 
} 
.nav__item__num { 
    display:block ; overflow:hidden ; border-radius:100% ; margin-right:0.5rem ; padding-top:0.1rem ;
    width:2.4rem ; height:2.4rem ; background-color:#ffffff ;
    font-size:1.6rem ; line-height:2.2rem  ; color:#313131 ; font-weight:bold ; text-align:center ;
    letter-spacing:-0.1rem ;
    position:absolute ; left:1.5rem ; top:1.5rem
} 
.nav__item__link::after { display:block ; content:"" ; clear:both } 
.nav__item__title , .nav__item__writer { font-size:1.8rem ; color:rgba(255,255,255,0.7) ; word-break:keep-all }

.navOpen #nav ,
.nav__item__link , .nav__item__num , .nav__item__title , .nav__item__link::before , .nav__item__writer ,
.btn__close , .btn__close::before , .btn__close::after { transition:0.3s all }
.nav__item__link { position:relative }
.nav__item__link::before {
    display:block ; content:"" ; width:0 ; height:0.1rem ; 
    background-color: #ff9828 ;
    position:absolute ; left:0 ; bottom:-0.1rem ;
}

.nav__item__link:hover .nav__item__num , .nav__item__link.now .nav__item__num  , 
.nav__item__link:focus .nav__item__num { background-color:#ff9828 ; color:#313131 }
.nav__item__link:hover .nav__item__title , .nav__item__link:hover .nav__item__writer , 
.nav__item__link.now .nav__item__title , .nav__item__link.now .nav__item__writer , 
.nav__item__link:focus .nav__item__title , .nav__item__link:focus .nav__item__writer { opacity:1 ; color:#ffffff }
.nav__item__link:hover::before , .nav__item__link:focus::before , .nav__item__link.now::before { width:100% }

.btn__close { 
    display:block ; overflow:hidden ; width:2rem ; height:2rem ;
    margin:1rem auto ; position:relative ; opacity:0.5 ;
    font-size:0 ; color:transparent
}
.btn__close::before , .btn__close::after {
    width:1.8rem ; height:0.1rem ; display:block ; content:"" ;
    background-color:#ffffff ;
    position:absolute ; left:50% ; top:50% ;  
}
.btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
.btn__close::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.btn__close:hover , .btn__close:focus { opacity:1 }
.btn__close:hover::before , .btn__close:focus::before { transform:translate(-50%,-50%) rotate(135deg) }
.btn__close:hover::after , .btn__close:focus::after   { transform:translate(-50%,-50%) rotate(45deg) }



/* aside */
#aside { background-color:#ffffff ; width:100% ; padding:8rem 0 0 }
.aside__list { 
    width:32rem ; margin:auto ; overflow:hidden ;
    border:solid 1px rgba(0,0,0,0.1) ; border-bottom:none ;
    border-radius:0.8rem 0.8rem 0 0 ;
}
.aside__list::after { display:block ; content:"" ; clear:both }
.aside__item { width:25% ; height:8rem ; float:left ; position:relative  }
.aside__item::after {
    display:block ; content:"" ; width:1px ; height:2rem ;
    background-color:#000000 ; opacity:0.1 ; ; 
    position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
} 
.aside__item:first-child::after , .aside__item:last-child::after  { display:none }
.aside__link { 
    display:block ; width:7rem ; height:7rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    font-size:0 ; color:transparent
}
.aside__icon , .aside__icon::before { display:block ; overflow:hidden ; width:5rem ; height:5rem }
.aside__icon { position:absolute ; left:50% ; top:0 ; transform:translateX(-50%) } 
.aside__icon::before , .item4 .aside__icon { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%)  }
.aside__icon::before {
    content:"" ; opacity:0.7 ;
    background:url(../img/icon_sprite.png) no-repeat 0 0 ; background-size:auto 10rem  
}
.item1 .aside__icon::before { background-position:-25rem -5rem }
.item2 .aside__icon::before { background-position:-30rem -5rem }
.item3 .aside__icon::before { background-position:-35rem -5rem }
.item4 .aside__icon::before { background-position:-40rem 0rem ; opacity:1 } 

.item4 .aside__link { background-color:#313131 ; width:100% ; height:100% }
.item4 .aside__icon { margin:0 }
.aside__text { 
    display:block ; width:100% ; opacity:0.7 ;
    font-size:0.9rem ; line-height:1.6rem ; text-align:center ;
    position:absolute ; left:0 ; bottom:0 ;
}
.aside__icon::before , .aside__text , .item4 .aside__link { transition:0.3s all }
.aside__link:hover .aside__icon::before , .aside__link:focus .aside__icon::before { opacity:1 ; transform:translate(-50%,-50%) scale(0.9)  }
.aside__link:hover .aside__text , .aside__link:focus .aside__text { opacity:1 ; color:#111111}

.item4 .aside__link:hover , .item4 .aside__link:focus { background-color:#ff9828 }
.item4 .aside__link:hover .aside__icon::before , .item4 .aside__link:focus .aside__icon::before { background-position:-40rem -5rem  }



/* footer */
#footer , .footer__inner { position:relative }
#footer { 
    width:100% ; background-color:#ffffff ; box-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    padding:4rem 0 ; text-align:center ;
}
#footer::after { 
    display:block ; content:"" ; width:100% ; height:1px ; 
    background-color:#000000 ; opacity:0.1 ;
    position:absolute ; left:0 ; top:0
} 
.footer__inner { width:94% ; margin:auto } 

.footer__sns   { width:18rem ; margin:auto }
.footer__sns , .footer__info , .footer__family { font-size:0 ; margin-bottom:3rem } 
.footer__sns::after { display:block ; content:"" ; clear:both }
.footer__sns__item , .footer__sns__link { display:block ; width:5rem ; height:5rem }
.footer__sns__item  { float:left ; margin-right:1.5rem } 
.footer__sns__item:last-child { margin-right:0 }
.footer__sns__link  { 
    border-radius:100% ; position:relative ; background-color:#313131 ;
    font-size:0 ; color:transparent ; 
}
.footer__sns__link , .footer__sns__link::before , .footer__fami__link { transition:0.3s all }
.footer__sns__link::before {  
    display:block ; content:"" ; width:100% ; height:100% ; opacity:0.9 ;
    background:url(../img/icon_sprite.png) no-repeat 0 0 ; background-size:auto 10rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(0.9) ;
}
.item1 .footer__sns__link::before { background-position:0rem 0 }
.item2 .footer__sns__link::before { background-position:-5rem 0 }
.item3 .footer__sns__link::before { background-position:-10rem 0 }
.footer__sns__link:hover , .footer__sns__link:focus { background-color:#111111 }
.footer__sns__link:hover::before , .footer__sns__link:focus::before { opacity:1 ; transform:translate(-50%,-50%) scale(1) } 


.footer__info li , .footer__copy , .footer__sauce { font-size:1.6rem ; line-height:2.6rem ; word-break:keep-all }
.footer__info li { 
    display:inline-block ; margin-bottom:0.5rem ; position:relative ;
    padding:0 2rem ;
}
.footer__info li::after { 
    display:block ; content:"" ; width:1px ; height:1rem ; background-color:#000000 ; opacity:0.1 ;
    position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
}
.footer__info li:first-child { display:block ; padding:0 } 
.footer__info li:first-child::after ,
.footer__info li:last-child::after { display:none }

.footer__family { max-width:60rem ; margin-left:auto ; margin-right:auto }
.footer__fami__item , .footer__fami__link { display:block ; width:100% }
.footer__fami__item { margin-bottom:0.7rem } 
.footer__fami__link {
    font-size:1.4rem ; line-height:2.4rem ; color:#ffffff ;
    padding:0.7rem 0.5rem ; border-radius:0.6rem ;
    background-color:#313131 ;
}
.footer__fami__link:hover , .footer__fami__link:focus { background-color:#ff9828 ; color:#111111 }
.footer__copy { margin-bottom:1.5rem } 






/* PC */
@media all and (min-width:1024px){ 
  
    /* main */
    body { background-image:url(../img/bg_txt.png) ; background-repeat:no-repeat ; background-position:right top } 
    .header__container , .nav__list , .footer__inner { width:98% ; max-width:150rem ; margin:auto }
    #main { padding-top:10rem }

    
    /* header */
    #header , .header__container { min-height:10rem }
    .header__container { position:relative }
    #btn_navOpen , #btn_navOpen > b { width:5rem ; height:5rem }
    #btn_navOpen span { width:3.6rem ; height:0.4rem ; border-radius:1rem }
    #btn_navOpen span:nth-child(1)::before { width:3rem }
    #btn_navOpen span:nth-child(1)::after  { width:0.4rem }
    #btn_navOpen span:nth-child(1) , #btn_navOpen:hover span:nth-child(3) , #btn_navOpen:focus span:nth-child(3) { top:28% } 
    #btn_navOpen span:nth-child(3) , #btn_navOpen:hover span:nth-child(1) , #btn_navOpen:focus span:nth-child(1) { top:72% }

    .navOpen #btn_navOpen span:nth-child(1) ,
    .navOpen #btn_navOpen span:nth-child(2) ,
    .navOpen #btn_navOpen span:nth-child(3) { top:50% }
    .navOpen #btn_navOpen span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg) }
    .navOpen #btn_navOpen span:nth-child(2) { opacity:0 }
    .navOpen #btn_navOpen span:nth-child(3) { transform:translate(-50%,-50%) rotate(-45deg) }

 
    .logo__history , #logo , #logo > a ,  .vol__history , .VH__vol { height:5rem }
    .logo__history { 
        width:54rem ; 
        position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    } 
    #logo , #logo > a { width:29rem }
    #logo > a { background-size:53rem auto }

    .vol__history { width:24rem ; background:none ; position:relative }
    .VH__header , .VH__header::before { width:100% ; height:100% ; display:block ; border-radius:0.6rem }
    .VH__header       {  background-color:#313131 ; padding:0 2rem 0 8.5rem ; position:relative }
    .open .VH__header { background-color:#ffffff }
    .VH__header::before { 
        content:"" ; box-sizing:border-box ; z-index:91 ;
        border:solid 1px rgba(255,255,255,0.1) 
    }
    .VH__header:hover::before { border-color:rgba(255,255,255,0.2) }
    .VH__header::before , #VH__btn__open::before , .VH__item__link , .VH__body { transition:0.3s all }
    .VH__vol { 
        z-index:92 ; padding-top:1rem ; letter-spacing:-0.05rem ;
        width:7.5rem ; background-color:#ff9828 ; border-radius:0.6rem ;
        font-size:2rem ; line-height:3rem ; text-align:center ; color:#313131 ; font-weight:600 ;
    }
    .VH__header::before , .VH__vol { position:absolute ; left:0 ; top:0 }
    .VH__now { 
        display:block ; padding-top:1rem ;
        font-size:1.8rem ; line-height:3rem ; color:#ffffff ; font-weight:300 ;
    }
    .open .VH__now { color:#313131 }
    #VH__btn__open {  
        display:block ; width:100% ; height:5rem ; 
        font-size:0 ; color:transparent ; 
        position:absolute ; right:0 ; top:0 ; z-index:92 ;
    }
    #VH__btn__open::before {
        width:0.6rem ; height:0.6rem ; display:block ; content:"" ; opacity:0.5 ;
        border:solid 1px #ffffff ; border-left:none ; border-top:none ;
        position:absolute ; right:1rem ; top:45% ; transform:translate(-50%,-50%) rotate(45deg) ; 
    }
    .open #VH__btn__open::before { transform:translate(-50%,-50%) rotate(225deg) ; border-color:#111111 ; top:55% }
    #VH__btn__open:hover::before { opacity:1 }

    .VH__body { 
        width:100% ; border-radius:0.6rem ; display:block ; overflow:hidden ; padding:0rem 2rem ;
        background-color:rgba(0,0,0,0.8) ;
        position:absolute ; left:0 ; top:5.5rem ; opacity:0 ;
    }
    .VH__list { display:none }

    .open .VH__body { opacity:1 ; padding-top:1rem ; padding-bottom:1rem }
    .open .VH__list { display:block }

    .VH__item__link {
        display:block ; padding:0.5rem 0.2rem ;
        font-size:1.6rem ; line-height:2.8rem ; color:rgba(255,255,255,0.7) ;
        border-bottom:solid 1px rgba(255,255,255,0.15) ;
    }
    .VH__item__link:hover { border-color:rgba(255,255,255,0.4) ; color:#ffffff }
    .VH__item:last-child .VH__item__link { text-align:center }
    .VH__item__link > b { 
        display:inline-block ; width:6rem ; padding-right:0.5rem ;
        color:#ff9828 ; text-align:right ;
    } 

    .VH__list { margin-bottom:2rem }

    .logo__SNUeng {
        display:block ; width:24rem ; height:6rem ;
        position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
        font-size:0 ; color:transparent ;
        background:url(../img/logo.png) no-repeat right top ;
    }
    


    /* nav */
    #nav { padding-top:12rem }    
    #nav::before { display:none } 
    .nav__list   { border-top:solid 1px rgba(255,255,255,0.15) ; margin-bottom:2rem }
    .nav__item__link { position:relative ; padding:2rem 31rem 2rem 5rem }
    .nav__item__num  { 
        width:4rem ; height:4rem ; 
        font-size:2rem ; line-height:3.8rem ; 
        left:0.5rem ; top:1.5rem
    }
    .nav__item__title  { font-size:2rem ; line-height:2.8rem ; padding-right:3rem }
    .nav__item__writer {
        display:block ; width:30rem ; 
        position:absolute ; right:0 ; top:2.3rem ;
        font-size:1.6rem ; line-height:2.4rem ; color:rgba(255,255,255,0.7) 
    }
 
 

    /* aside */
    #aside , .aside__list { 
        width:7rem ; height:34rem ; padding:0 ; margin:0 ;
        border-radius:0.8rem 0 0 0.8rem ;
    }
    #aside { 
        position:fixed ; right:-8rem ; bottom:10% ; z-index:80 ;  
        box-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; background:none ;  
        transition:0.3s all ;
    }
    .sticky #aside { right:0 }
    .aside__list { 
        border:none ;
        background:linear-gradient(to bottom ,
            #ffffff 0 ,
            #ffffff 27rem ,
            #313131 27rem ,
            #313131 100% );  
    }
    .aside__item { width:100% ; height:9rem }
    .aside__item:last-child { height:7rem ; border-radius:0 }
    .aside__item::after     { width:3rem ; height:0.1rem ; left:50% ; top:0 ; transform:translateX(-50%) }
 
    

    /* footer */
    #footer        { padding:5rem 0 ; box-shadow:none } 
    .footer__inner::before { 
        display:block ; content:"" ; width:20rem ; height:5rem ; margin-bottom:3rem ;
        background:url(../img/icon_sprite.png) no-repeat right top ; background-size:auto 10rem ;
    }
    .footer__sns  { margin:0 ; position:absolute ; left:24rem ; top:0 }
    .footer__info , .footer__copy { width:90rem ; text-align:left }
    .footer__info { margin-bottom:1.5rem }
    .footer__info li { display:inline-block }
    .footer__info li:first-child  { display:block ; padding-right:0 }
    .footer__info li:nth-child(2) { padding-left:0 }
    
    
     
    .footer__family { 
        display:inline-block ; width:auto ; max-width:none ;
        position:absolute ; right:0 ; top:0.3rem ; margin:0 ;
        font-size:0 ;
    }
    .footer__fami__item { display:inline-block ; margin:0 ; width:auto ; position:relative }
    .footer__fami__item::after {
        display:block ; content:"" ; width:1px ; height:1rem ;
        background-color:#ffffff ; opacity:0.15 ;
        position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
    }
    .footer__fami__item:last-child:after { display:none }
    .footer__fami__link {
        padding:1rem 2rem ;
        border-radius:0 ;
    }
    .footer__fami__item:first-child .footer__fami__link { border-radius:0.6rem 0 0 0.6rem } 
    .footer__fami__item:last-child .footer__fami__link  { border-radius:0 0.6rem 0.6rem 0 } 
    .footer__copy { margin-bottom:0 }

    .footer__sauce {
        display:inline-block ; width:auto ;
        position:absolute ; right:0 ; bottom:0 ;
    }

}


/* PRINT */
@media print {   }