@charset "utf-8";  
/* Mobile */

body.navOpen { overflow:hidden }



/* Header */
#header , .header__container { width:100% ; min-height:6rem }
#header {  
    background-color:#ffffff ;
    position:fixed ; left:0 ; top:0 ; z-index:95 ;
}
#header::before {
    display:block ; content:"" ; 
    width:100% ; height:1px ; background-color:rgba(0,0,0,0.1) ;
    position:absolute ; left:0 ; bottom:0 ;
}
.header__container { position:relative }

#header_history_open , #header_history_popup { display:none }
 
.header__left {
    width:17.5rem ; height:4rem ; 
    position:absolute ; left:1rem ; top:1rem
} 
.header__left::after , .header__left::after { display:block ; content:"" ; clear:both }
#logo , #logo_link { display:block }
#logo { width:9.7rem ; height:4rem ; float:left }
#logo_link { 
    width:100% ; height:100% ; font-size:0 ; color:transparent ; overflow:hidden ;
    background:url(../img/sprite.png) no-repeat 0 0 ;
    background-size:auto 12rem ;
}
#header_history { display:block ; width:7.5rem ; float:right }
#open_date {
    display:block ; padding-top:1.3rem ;
    font-size:1.8rem ; line-height:2rem ; font-family:'Dohyun',sans-serif ; color:#666666 ;
    letter-spacing:-0.05rem ; text-align:right ; 
}

#btn_nav_open , #btn_nav_open > span { transition:0.3s all }
#btn_nav_open {
    width:6rem ; height:6rem ;
    position:absolute ; top:0 ; right:0 ;
    background-color:#6ec22e ;
} 
#btn_nav_open > span { 
    display:block ; overflow:hidden ; width:2.4rem ; height:0.3rem ; border-radius:1rem ;
    background-color:#ffffff ;
    font-size:0 ; color:transparent ; 
    position:absolute ; left:50% ; transform:translate(-50%,-50%) ;
}
#btn_nav_open > span:nth-child(1) , #btn_nav_open:hover > span:nth-child(3) { top:38% }
#btn_nav_open > span:nth-child(2) { top:50% }
#btn_nav_open > span:nth-child(3) , #btn_nav_open:hover > span:nth-child(1) { top:62% }
#btn_nav_open:hover > span:nth-child(2) { transform:translate(-50%,-50%) rotate(180deg) }

.navOpen #btn_nav_open > span:nth-child(2) { opacity:0 }
.navOpen #btn_nav_open > span:nth-child(1) , 
.navOpen #btn_nav_open > span:nth-child(3) { left:50% ; top:50% ; width:2.8rem }
.navOpen #btn_nav_open > span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg) } 
.navOpen #btn_nav_open > span:nth-child(3) { transform:translate(-50%,-50%) rotate(-45deg) } 
.navOpen #btn_nav_open:hover > span:nth-child(1) { transform:translate(-50%,-50%) rotate(135deg) } 
.navOpen #btn_nav_open:hover > span:nth-child(3) { transform:translate(-50%,-50%) rotate(45deg) } 



/* Navigation */
#nav , .nav__container { display:block ; width:100% ; height:100% }
#nav {
    padding-top:6rem ;
    position:fixed ; left:-101% ; top:0 ; z-index:94 ;
    background-color:#ffffff ; 
}
.navOpen #nav { left:0 ; transition:0.3s all } 
.nav__container { overflow:auto ; display:none }
.navOpen .nav__container { display:block }
#month_theme {
    display:block ; width:100% ; padding:1.9rem 0.5rem 1.3rem ;
    font-size:2.4rem ; line-height:3rem ; font-family:'Dohyun',sans-serif ;
    color:#ffffff ; letter-spacing:-0.1rem ; text-align:center ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
    background-color:#111111 ;
}

#all_close { display:none }

#header_sns {
    text-align:center ; font-size:0 ;
    padding:1.5rem 0 ; margin-bottom:1rem ;
}
.header__sns__item {
    display:inline-block ; width:6rem ; height:6rem ;
    margin:0.1rem 0.2rem
}
.header__sns__link , .header__sns__link::before , .header__sns__link::after { 
    transition:0.3s all ;
    display:block ; width:100% ; height:100% ; border-radius:100% }
.header__sns__link {
    position:relative ;
    font-size:0 ; color:transparent ;  
    background-color:#ffffff  
}
.header__sns__link::before , .header__sns__link::after {
    content:"" ; box-sizing:border-box ;
    transform:translate(-50%,-50%) ; 
    position:absolute ; left:50% ; top:50% ; 
}
.header__sns__link::before {  
    background:url(../img/sprite.png) no-repeat ;
    background-size:auto 12rem ; opacity:0.6 ;
}
.header__sns__link.copy::before { background-position:-26rem -6rem }
.header__sns__link.FB::before { background-position:-32rem -6rem }
.header__sns__link.NB::before { background-position:-38rem -6rem }
.header__sns__link::after {
    border:solid 1px rgba(0,0,0,0.1) ;
    box-sizing:border-box ;
}

.header__sns__link:hover { background-color:#f7f7f7 }
.header__sns__link:hover::before { opacity:1 }
.header__sns__link:hover::after  { border-color:rgba(0,0,0,0.2) }
 
.nav__list__link , .nav__list__link::after , .nav__sub__link , .nav__sub__link::after { transition:0.3s all }
.nav__list__link { 
    display:block ; padding:1rem 0.5rem 1.4rem ; position:relative ;
    font-size:2.2rem ; line-height:2.8rem ; text-align:center ; font-weight:800 ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
}
.nav__list__item:hover .nav__list__link , .nav__list__link.current { color:#111111 }
.nav__list__link::after { 
    display:block ; overflow:hidden ; content:"" ; 
    width:0 ; height:0.3rem ; background-color:#6ec22e;
    position:absolute ; left:50% ; bottom:-0.1rem ; transform:translateX(-50%) ;
}
.nav__list__item:hover .nav__list__link::after , .nav__list__link.current::after { width:100% }

.nav__sub__list {
    font-size:0 ; text-align:center ; padding:1rem 0 2rem ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
}
.nav__sub__item { display:inline-block }
.nav__sub__link {
    display:block ; padding:0.5rem 1.2rem 0.7rem ;
    font-size:1.6rem ; line-height:2.4rem ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    margin:0.5rem
}
.nav__sub__link:hover , .nav__sub__link.current {
    color:#111111 ; 
    background-color:#f7f7f7 ; border-color:rgba(0,0,0,0.15) ;
}

.btn__close , .btn__close::before , .btn__close::after { transition:0.3s all }
.btn__close {
    display:block ; overflow:hidden ; width:2rem ; height:2rem ;
    margin:auto ; position:relative ; opacity:0.4 ;
    font-size:0 ; color:transparent
}
.btn__close::before , .btn__close::after {
    display:block ; content:"" ; width:1.5rem ; height:0.1rem ; 
    background-color:#111111;
    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 { opacity:1 }
.btn__close:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
.btn__close:hover::after  { transform:translate(-50%,-50%) rotate(45deg) }
.btn__close:hover::before , .btn__close:hover::after { width:1.7rem }
 
#btn_nav_close { margin-bottom:2rem }



/* Footer */
#footer { 
    display:block ; width:100% ; position:relative ; 
    background-color:#ffffff ;
    padding:5rem 0 ;
} 
#footer::before {
    display:block ; content:"" ; width:100% ; height:1px ;
    background-color:#111111 ; opacity:0.1 ; 
    position:absolute ; left:0 ; top:0
}
.footer__btns , .footer__app__btns , .footer__list ,  .footer__list__item , .footer__infor { font-size:0 ; text-align:center }
.footer__btns { margin-bottom:4rem }
.footer__app__btns , .footer__list , .footer__app__btn , .footer__list__item , .footer__logo { display:inline-block } 
.footer__app__btn ,  .footer__list__item { margin:0.2rem 0.5rem }
.footer__app__btn , .footer__list__link { 
    font-size:1.4rem ; line-height:2rem ; padding:1rem 2rem ; 
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    background-color:#ffffff ;
} 
.footer__app__btn { background-color:#111111 ; color:#ffffff }
.footer__app__btn:hover { 
    background-color:#6ec22e ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    border-color:rgba(0,0,0,0)
}

.footer__list__link , .footer__list__link::before , .footer__app__btn , .footer__list__link { transition:0.3s all }
.footer__list__link { display:block ; position:relative ; padding-left:5.2rem }
.footer__list__link::before {
    display:inline-block ; content:"" ; width:3rem ; height:3rem ;
    background:url(../img/sprite.png) no-repeat 0 0 ; background-size:auto 6rem ;
    position:absolute ; left:2rem ; top:50% ; transform:translateY(-50%)  ; opacity:0.3 
}

.footer__list__link:hover { border-color:rgba(0,0,0,0.2) ; color:#111111 ; background-color:rgba(0,0,0,0.03) } 
.footer__list__link:hover::before { opacity:0.6 } 
 
.footer__list__item:nth-child(1) .footer__list__link::before { background-position:-7rem 0 }
.footer__list__item:nth-child(2) .footer__list__link::before { background-position:-10rem 0 } 
 
.footer__logo {
    width:20rem ; height:4rem ; margin-bottom:1.5rem ;
    background:url(../img/sprite.png) no-repeat 0 -6rem ; background-size:auto 12rem ;
    font-size:0 ; color:transparent
}

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

.footer__infor__list > li:last-child { margin-right:0 ; padding-right:0 }
.footer__infor__list > li:last-child::after { display:none } 



/* Aside */
#aside , #btn__top { width:5rem }
#aside  { position:fixed ; right:-8rem ; bottom:0.5rem ; z-index:80 }
.sticky #aside { right:0.5rem }
#aside ,  .top__icon , .top__icon::before , .top__icon::after { transition:0.3s all }

#btn__top { 
    display:block ;
    height:5rem ; border-radius:100% ; position:relative ; 
    font-size:0 ; color:transparent ;
    background-color:#012d6b ;
}  

.sticky #btn__top { display:block }
.top__icon  , .top__icon::before , .top__icon::after {
    display:block ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%)
}
.top__icon { width:4rem ; height:4rem ; display:block ; transform:translate(-50%,-50%) scale(0.9) }
.top__icon::before , .top__icon::after { content:"" ; box-sizing:border-box }
.top__icon::before {
    width:1.2rem ; height:1.2rem ; border:solid 0.2rem #ffffff ; border-right:none ; border-bottom:none ;
    transform:translate(-50%,-50%) rotate(45deg)
}
.top__icon::after {
    width:0.2rem ; height:1.4rem ; border-radius:1rem ;
    background-color:#ffffff ; 
    top:52%
}

#btn__top:hover { background-color:#111111 }
#btn__top:hover .top__icon { transform:translate(-50%,-50%) scale(1.1)} 
  
 



@media screen and (min-width:1024px){ 
 
    /* Header */
    #header , .header__container , .nav__container { height:0 ; min-height:auto }
    #header { background:none } 
    #header::before { top:12rem ; opacity:0 ; background-color:#000000 }
    .navOpen #header::before , .sticky #header::before { opacity:0.1  }
    .header__container , .nav__container { width:96% ; max-width:128rem ; margin:auto }
    .header__left { 
        width:26rem ; height:6rem ; 
        left:0 ; top:3rem ; position:absolute ;
        border:solid 1px rgba(255,255,255,0.1) ; background-color:#ffffff ;
        box-sizing:border-box ; border-radius:3rem ; 
    }
    #logo , #header_history { float:none ; position:absolute  ; top:50% ; transform:translateY(-50%)  }
    #logo { left:2.5rem}
    #header_history { width:11rem ; right:2rem }
    #open_date { 
        padding-top:0.5rem ; text-align:left ;
        font-size:2rem ; line-height:3rem ;
    }
    #header_history_open {
        display:block ; width:100% ; height:100% ; 
        font-size:0 ; color:transparent ;
        position:absolute ; left:0 ; top:0
    }
    #header_history_open::after {
        display:block ; content:"" ; width:0.6rem ; height:0.6rem ;
        border:solid 1px #111111 ; border-top:none ; border-left:none ;
        position:absolute ; right:0.5rem ; top:50% ; transform:translateY(-50%) rotate(45deg) ;
        opacity:0.5 ;
    }
    .openHistory #header_history_open::after {
        transform:translateY(-50%) rotate(225deg) ;
        opacity:1 ; top:60%
    }
    .header__left , #open_date , #header_history_open::after , .openHistory #header_history_popup { transition:0.3s all }
    
    #header_history_popup { 
        display:block ; overflow:hidden ; width:16rem ; height:0 ; padding:0 2rem ;
        border-radius:0.4rem ;
        position:absolute ; right:0 ; top:5rem ; z-index:96 ; 
    } 
    .openHistory #header_history_popup { 
        height:auto ; border:solid 0.1rem rgba(0,0,0,0.1) ;
        padding:1.5rem 2rem ; background-color:#ffffff ; 
        overflow:inherit ;  
    }
    .header__history__list { display:none }
    .openHistory .header__history__list { display:block }

    .header__history__list { margin-bottom:1rem }
    .header__history__list > li > a , .header__history__list > li > a::before , #btn_nav_open { transition:0.3s all }
    .header__history__list > li > a {
        display:block ; padding:0.3rem 0.2rem 0.5rem 0.2rem ;
        font-size:1.6rem ; line-height:2.4rem ;
        border-bottom:solid 1px rgba(0,0,0,0.1) ;
        position:relative ;
    } 
    .header__history__list > li > a::before {
        display:block ; content:"" ; position:absolute ; left:0 ; bottom:-1px ;
        width:0% ; height:1px ; background-color:#1586be ; 
    }
    .header__history__list > li > a:hover { color:#111111 }
    .header__history__list > li > a:hover::before { width:100% }

    #btn_nav_open { 
        border-radius:100% ;  
        position:absolute ; right:auto ; top:3rem ; left:26.5rem
    }
    .navOpen #btn_nav_open { left:auto ; right:19.5rem }



    /* Navigation */
    #nav { padding:0 ; left:0 ; background:none ; min-height:12rem ; height:auto  }
    .navOpen #nav , .sticky #nav ,  .navOpen .nav__container { transition:0.3s all }
    .navOpen #nav , .sticky #nav { background-color:#ffffff ; box-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
    .navOpen #nav , .navOpen .nav__container { height:36rem }

    .nav__container { overflow:inherit ; display:block ; position:relative }
    #month_theme , #nav_list { width:calc(100% - 51rem ) ; padding:0 ; margin:0 }
    #month_theme {  
        position:absolute ; top:4.3rem ; left:32.5rem ; 
        font-size:3.6rem ; line-height:4rem ; color:#ffffff ; 
        text-shadow:0 0 0.3rem rgba(0,0,0,0.15) ;
        background:none ; border:none ; transition:0.3s all ;
        word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis
    }
    .sticky #month_theme  { text-shadow:none ; color:#111111 } 
    .navOpen #month_theme { width:0 ; overflow:hidden } 
    .sticky .header__left , .navOpen .header__left  { border-color:rgba(0,0,0,0.1) }

    #header_sns { 
        width:19rem ; padding:0 ; margin:0 ;
        right:0rem ; top:3rem ; position:absolute ; 
    }
    #header_sns::after { display:block ; content:"" ; clear:both }
    .header__sns__item { display:block ; margin:0 0.5rem 0 0 ; float:left }
    .header__sns__item:last-child { margin-right:0 }
    .header__sns__link , .header__sns__link:hover { background-color:rgba(255,255,255,0) }
    .header__sns__link::after { border-color:rgba(255,255,255,0.1) }
    .header__sns__link:hover::after { border-color:rgba(255,255,255,0.3) } 
    .header__sns__link:hover::before { opacity:1 ; } 

    .header__sns__link.copy::before ,
    .sticky .header__sns__link.copy:hover::before , 
    .navOpen .header__sns__link.copy:hover::before { background-position:-26rem 0rem }
    .header__sns__link.FB::before , 
    .sticky .header__sns__link.FB:hover::before , 
    .navOpen .header__sns__link.FB:hover::before   { background-position:-32rem 0rem }
    .header__sns__link.NB::before ,
    .sticky .header__sns__link.NB:hover::before , 
    .navOpen .header__sns__link.NB:hover::before   { background-position:-38rem 0rem }

    .sticky .header__sns__link.copy::before , .navOpen .header__sns__link.copy::before { background-position:-26rem -6rem }
    .sticky .header__sns__link.FB::before , .navOpen .header__sns__link.FB::before { background-position:-32rem -6rem }
    .sticky .header__sns__link.NB::before , .navOpen .header__sns__link.NB::before { background-position:-38rem -6rem }
    .sticky .header__sns__link::after , .navOpen .header__sns__link::after { border-color:rgba(0,0,0,0.1) }

    .sticky .header__sns__link:hover , .navOpen .header__sns__link:hover { background-color:#111111 }
    .sticky .header__sns__link:hover::after , .navOpen .header__sns__link:hover::after { border-color:rgba(0,0,0,0) }
 
    #nav_list {
        position:absolute ; left:26rem ; top:-12rem ;
        display:flex  ; padding:0 2rem ;
    }  
    .navOpen #nav_list  { top:0 ; transition:0.3s all }
    
    .nav__list__item:nth-child(1) { flex-grow:9 }
    .nav__list__item:nth-child(2) { flex-grow:7.5 }
    .nav__list__item:nth-child(3) { flex-grow:10 }
    .nav__list__item:nth-child(4) { flex-grow:6 }

    .nav__list__item , .nav__sub__item , .nav__sub__list , .nav__list__link , .nav__sub__link { padding:0 ; border:0 ; margin:0 }
    .nav__list__item , .nav__sub__item { background:none }
    .nav__list__link {
        font-size:1.8rem ; line-height:2rem ;
        padding:5rem 0.2rem ; color:#444444 ;
    }
    .nav__sub__list { padding:0 0.2rem ; height:0 ; overflow:hidden } 
    .navOpen .nav__sub__list { 
        transition:0.3s all ;
        padding:0.5rem 0.2rem 1rem ; height:auto ; overflow:inherit } 
    .nav__sub__item , .nav__sub__link { display:block ; width:100% }
    .nav__sub__link { 
        border-radius:0 ; background:none ;
        font-size:1.6rem ; line-height:2rem ; padding:1.5rem 0 ;
        border-bottom:solid 1px rgba(0,0,0,0) ;
    } 
        
    .nav__list__item:hover .nav__sub__link  { border-color:rgba(0,0,0,0.05) }
    .nav__list__item:hover .nav__sub__link:hover , .nav__sub__link.current , 
    .nav__list__item .nav__sub__link.current , 
    .nav__sub__link:hover.current { background:none ; border-color:rgba(0,0,0,0.2) }
 
    #btn_nav_close { 
        position:absolute ; left:50% ; bottom:1rem ; transform:translateX(-50%) ;
        margin:0 ; opacity:0.2 ;
    }

    #all_close { 
        overflow:hidden ;  width:100% ; height:0 ;
        position:fixed ; left:0 ; top:0 ; z-index:90 ;
        background-color:rgba(0,0,0,0.6) ;
    }

    .navOpen #all_close { display:block ; height:100% }

    .nav__list__link.current::after { width:0 }
    .navOpen .nav__list__link.current::after { opacity:1 ; width:100% }

    
    
    /* Footer */
    .footer__container { width:96% ; max-width:128rem ; position:relative ; margin:auto }
    .footer__btns { position:absolute ; right:0 ; top:0 ; width:60rem ; text-align:right } 
    .footer__btns::after { display:block ; content:"" ; clear:both } 
    .footer__app__btns , .footer__list { margin:0 ; padding:0 }
    .footer__app__btns { display:inline-block ; margin-right:2rem }
    .footer__list { float:right ; display:block   }
    
    .footer__app__btn ,  .footer__list__item { margin:0 }
    .footer__app__btn { margin:0 0.1rem }
 
    .footer__logo { display:block ; margin:0 ; margin-bottom:2rem }
    .footer__infor , .footer__list { text-align:left }
    .footer__infor__list  { margin-bottom:0 }
    .footer__infor__list > li:first-child { 
        padding:0 ; padding-right:1.5rem ; margin-right:1.5rem ;
        display:inline-block ;
    }
    .footer__infor__list > li:first-child::after { display:block }

    .footer__list__item:nth-child(1) { position:relative }
    .footer__list__item:nth-child(1)::after {
        display:block ; content:"" ; width:1px ; height:100% ; 
        background-color:#000000 ; opacity:0.1 ;
        position:absolute ; right:0 ; top:0
    }

    .footer__list__item:nth-child(1) .footer__list__link { border-radius:0.4rem 0 0 0.4rem ; border-right:none }
    .footer__list__item:nth-child(2) .footer__list__link { border-radius:0 0.4rem 0.4rem 0 ; border-left:none }



    /* Aside */
    #aside  { bottom:1rem }
    .sticky #aside { right:1rem }
   
} 
    
@media print { }