@charset "utf-8";  
/* Mobile */
body.navOpen , body.searchOpen { overflow:hidden }



/* Header */
#header , .header__container { width:100% }
#header { 
    display:block ;  
    position:fixed ; left:0 ; top:0 ; z-index:95 ;
    background-color:#ffffff ;
} 
#header::after {
    display:block ; content:"" ; width:100% ; height:1px ; 
    background-color:#111111 ; opacity:0.1 ;
    position:absolute ; left:0 ; bottom:0 ;
} 
.header__container { position:relative ; min-height:5rem } 
#logo , #logo > a , .header__date { display:block ; font-size:0 ; color:transparent }  
#logo , .header__date { position:absolute }
#logo { width:9.6rem ; height:4rem ; left:0 ; top:0.5rem } 
#logo > a , .header__date { background:url(../img/sprite.png) no-repeat }
#logo > a { width:100% ; height:100% ; background-position:left top ; background-size:auto 8rem }
.header__date { 
    width:5rem ; height:2rem ; top:1.5rem ; left:10rem ;
    font-size:0 ; color:transparent ;
    background-position:-42rem -6rem ; background-size:auto 10rem 
}

.header__sns { display:none } 


#btn_nav_open , #btn_search_open {
    display:block ; overflow:hidden ; width:5rem ; height:5rem ;
    position:absolute ; top:0 ;
    font-size:0 ; color:transparent
} 
#btn_search_open { right:5rem }
#btn_nav_open { right:0rem }

#btn_nav_open , #btn_nav_open > b , #btn_nav_open span ,
#btn_search_open , #btn_search_open > b , #btn_search_open span  { transition:all 0.3s }

#btn_nav_open > b , #btn_search_open > b { width:100% ; height:100% }
#btn_nav_open > b , #btn_search_open > b , #btn_nav_open span , #btn_search_open span { 
    display:block ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) 
}
#btn_nav_open span { 
    width:60% ; height:0.3rem ; overflow:hidden ; border-radius:1rem ;
    background-color:#111111 ;
} 
#btn_nav_open span:nth-child(1) , #btn_nav_open:hover span:nth-child(3) { top:30% }
#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:70% }
#btn_nav_open:hover span:nth-child(2) { transform:translate(-50%,-50%) rotate(180deg) }

.navOpen #btn_nav_open { background-color:#1663aa }
.navOpen #btn_nav_open span { background-color:#ffffff }

.navOpen #btn_nav_open span:nth-child(1) ,
.navOpen #btn_nav_open span:nth-child(2) , 
.navOpen #btn_nav_open span:nth-child(3) ,
.navOpen #btn_nav_open:hover span:nth-child(1) , 
.navOpen #btn_nav_open:hover span:nth-child(3) { left:50% ; top:50% } 
.navOpen #btn_nav_open span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg) }
.navOpen #btn_nav_open span:nth-child(2) { opacity:0 } 
.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) }

#btn_search_open span:nth-child(1)  {  
    width:46% ; height:46% ; border:solid 0.3rem #111111 ;
    border-radius:100% ; top:45% ; left:45%
}
#btn_search_open span:nth-child(2) {
    width:20% ; height:0.3rem ; border-radius:1rem ;
    background-color:#111111 ; top:67% ; left:67% ; transform:translate(-50%,-50%) rotate(45deg) ;
}
#btn_search_open:hover > b { transform:translate(-50%,-50%) scale(1.1) }

.searchOpen #btn_search_open { background-color:#1663aa }
.searchOpen #btn_search_open span:nth-child(1) { border-color:#ffffff }
.searchOpen #btn_search_open span:nth-child(2) { background-color:#ffffff }



/* Navigation */
#nav , #allSearch_form { 
    width:100% ; height:100vh ; 
    position:fixed ; left:-101% ; top:0 ; z-index:92 ;}
#nav { 
    background-color:#ffffff;
    padding:5rem 0 0 0 ;
}
.navOpen #nav , .searchOpen #allSearch_form { left:0 ; transition:0.5s all } 

.nav__container  { width:100% ; height:100% ; overflow:auto ; display:none }  
.navOpen .nav__container { display:block }
.nav__img__title { 
    display:block ; width:100% ; padding:2rem 1rem ;
    background-color:#111111 ; 
    text-align:center ; font-size:0 ;
}
.nav__img__title , .nav__img__date > span { 
    font-size:1.8rem ; line-height:2.4rem ; color:#ffffff ; font-weight:500 ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
}
.nav__img__date > span { margin-left:1rem }

.nav__link , .nav__img__p { display:none }

.nav__sub__link , .nav__sub__link > b , .nav__sub__link::after , .nav__btn { transition:0.3s all }

.nav__sub__link { 
    display:block ; padding:1.5rem 1rem  ; position:relative ;
    font-size:1.8rem ; line-height:2.4rem ; word-break:keep-all ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
} 
.nav__sub__link > b {
    display:inline-block ; background-color:#444444 ;
    font-size:1.2rem ; line-height:1.8rem ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    padding:0.2rem 0.5rem 0.4rem ; border-radius:0.4rem ;
}
.nav__sub__link::after {
    display:block ; content:"" ; width:0 ; height:1px ;
    background-color:#1663aa ; 
    position:absolute ; left:0 ; bottom:-1px ;
}

.nav__sub__link:hover        { color:#111111 }
.nav__sub__link:hover > b    { background-color:#1663aa }
.nav__sub__link:hover::after { width:100% }

.nav__list , .nav__btns { margin-bottom:2rem } 
.nav__btns { width:100% ; text-align:center ; font-size:0 }
.nav__btn  {
    display:inline-block ; margin:0.3rem ; padding:0.5rem 1rem 0.7rem ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    font-size:1.4rem ; line-height:2.4rem ;
}
.nav__btn.event , .nav__btn:hover { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) } 
.nav__btn.event { background-color:#39ab21 ; border-color:#39ab21 }
.nav__btn.event:hover , .nav__btn:hover { background-color:#444444 ; border-color:#444444 }

.btn__close , .btn__close::before , .btn__close::after { transition:0.3s all } 
.btn__close { 
    display:block ; width:2rem ; height:2rem ; margin:0 auto 2rem ;
    position:relative ; font-size:0 ; opacity:0.3 ;
}
.btn__close:hover { opacity:1 }
.btn__close::before , .btn__close::after {
    display:block ; content:"" ; width:90% ; height:1px ; 
    background-color:#111111 ; border-radius:1rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
.btn__close::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.btn__close:hover::before , .btn__close:hover::after { width:100% ; height:0.2rem }
.btn__close:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
.btn__close:hover::after  { transform:translate(-50%,-50%) rotate(45deg) }
 
 

/* Search */
#allSearch_form { 
    top:0 ; padding-top:5rem ;  
    display:block ; width:100% ; height:100vh ; margin:0 auto ;
    background-color:rgba(0,0,0,0.8) ;
}
.allSearch__container { 
    display:none ; width:96% ; padding:5rem 0 0.3rem ; margin:0 auto ;
    text-align:center ; font-size:0 ;
    position:relative 
}
.searchOpen .allSearch__container { display:block }
#as_kind , #as_Word , #allSearch_btn_submit {  
    width:90% ; max-width:60rem ; text-align:center ; 
    font-size:1.8rem ; line-height:3.4rem ; border-radius:0.4rem ;
    margin:0 0.2rem 0.5rem ;  
}
#as_kind , #as_Word { background-color:#ffffff }
#as_kind { padding:1.2rem 0.5rem 1.4rem }
#as_Word , #allSearch_btn_submit { padding:1rem 0.5rem 1.2rem }
#allSearch_btn_submit { 
    background-color:#1663aa ; margin-bottom:2rem ;
    color:#ffffff ; font-weight:500 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    transition:0.3s all ;
} 
#allSearch_btn_submit:hover { background-color:#39ab21 }
#allSearch_btn_close        { opacity:0.7 ; margin-bottom:0 }
#allSearch_btn_close::before , #allSearch_btn_close::after { background-color:#ffffff }



/* Main */
#main { width:100% ; margin:0 auto 8rem ; overflow:hidden ; padding-top:5rem }



/* Aside */
#aside { width:5rem ; position:fixed ; right:-6.1rem ; bottom:1rem ; z-index:90 }
.sticky #aside { right:0 } 
.aside__item , .aside__link::after , #goTop > span { display:block ; width:5rem ; height:5rem }
.aside__link , #goTop , .aside__item::before { display:block ; width:100% ; height:100% ; position:relative }
.aside__item { position:relative ; background-color:#ffffff }
.aside__item::before , .aside__link::after { box-sizing:border-box ; content:"" }
.aside__item::before ,  .aside__link::after , #goTop > span {
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.aside__item::before { border:solid 1px rgba(0,0,0,0.1) ; border-right:none ; border-bottom:none }
.aside__item:last-child::before { display:none } 
.aside__link , #goTop , #goTop > span { font-size:0 ; color:transparent } 
.aside__link::after , #goTop > span { background:url(../img/sprite.png) no-repeat ; background-size:auto 10rem }
#copyURL::after { background-position:-32rem 0 }
#subscribe::after { background-position:-32rem -5rem }
#lastIssue::after { background-position:-37rem 0 }
#goTop > span { background-position:-37rem -5rem }
#goTop { background-color:#222222 }
#aside , .aside__link , .aside__link::after , #goTop , #goTop > span { transition:0.3s all }

.aside__link::after { opacity:0.5 }
.aside__link:hover::after , #goTop:hover > span { opacity:1 ; transform:translate(-50%,-50%) scale(1.1) }
#goTop:hover { background-color:#1663aa } 



/* Footer */
#footer { width:100% ; background-color:#f7f7f7 ; padding:1rem 0 4rem ; border-top:solid 1px #d7d7d7 }
.footer__nav { width:100% ; margin:0 auto 3rem } 
.footer__nav__link , .alarm__btn , .alarm__btn::after , .footer__sns__link , .footer__sns__link::before { transition:0.3s all } 
.footer__container { padding:0 2rem }  
.footer__nav__list , .alarm__list , .footer__sns { text-align:center ; font-size:0 ; text-align:center ; padding:1rem 0 }
.footer__nav__item { display:inline-block ; padding:0.5rem 1.5rem 0.7rem  ; position:relative }
.footer__nav__item::after {
    display:block ; content:"" ; width:1px ; height:1rem ;
    background-color:#000000 ; opacity:0.1 ;
    position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
}
.footer__nav__item:first-child { padding-left:0 }
.footer__nav__item:last-child  { padding-right:0 }
.footer__nav__item:last-child::after { display:none }

.alarm__btn , .footer__address li , .footer__copy , .footer__nav__link  { 
    font-size:1.6rem ; line-height:2.8rem ; text-align:center ; 
    word-break:keep-all }
.alarm__btn { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
.footer__nav__link:hover { color:#111111 } 
.alarm__btn , .alarm__btn::after  { border-radius:0.4rem ; box-sizing:border-box }  
.alarm__btn  { 
    width:90% ; max-width:28rem  ; margin:0 1% 0.5rem ; 
    display:inline-block ; padding:0.8rem 0.5rem 1rem ; 
    position:relative ; background-color:#39ab21 ;
    font-weight:500 ;
}
.alarm__btn::after { 
    display:block ; content:"" ; width:100% ; height:100% ;
    border:solid 1px rgba(255,255,255,0.1) ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.alarm__btn:hover { background-color:#111111}
.alarm__btn:hover::after { border-color:#111111 }
#unsubscribe { display:none }

.footer__logo {
    display:block ; width:12rem ; height:4rem ; margin:0 auto 2rem ;
    font-size:0 ; color:transparent ; opacity:0.8 ;
    background:url(../img/sprite.png) no-repeat 0 -5.5rem ; background-size:auto 10rem ;
} 
.footer__address li { margin-bottom:0.5rem } 

.footer__copy { margin-bottom:4rem }
.footer__sns  { padding:0 }
.footer__sns__item { display:inline-block ; margin:0.5rem 1rem }
.footer__sns__link , .footer__sns__link::before { display:block ; width:5rem ; height:5rem ; border-radius:100% }
.footer__sns__link { 
    background-color:rgba(0,0,0,0.2) ; position:relative ;
    font-size:0 ; color:transparent
}
.footer__sns__link:hover   { background-color:rgba(0,0,0,0.8) }
.footer__sns__link::before {
    content:"" ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    background:url(../img/sprite.png) no-repeat ; background-size:auto 10rem ;
}
.footer__sns__link:hover::before  { opacity:1 }
.footer__sns__link.ins::before { background-position:-12rem 0 }
.footer__sns__link.fb::before  { background-position:-17rem 0 }
.footer__sns__link.yt::before  { background-position:-22rem 0 }

#installBtn , #unsubscribe { display:none }



@media screen and (min-width:1024px){ 
 
    /* Header */
    #header { background:none ; padding:0 3rem ; transition:0.3s all }
    .sticky #header , .navOpen #header { background-color:#ffffff }
    .sticky #header { box-shadow:0 0 0.3rem rgba(0,0,0,0.2) }

    #header::after { background-color:#ffffff }
    .sticky #header::after , .navOpen #header::after { background-color:#000000 }
    .header__container { min-height:8rem } 

    #logo { width:12rem ; height:5rem ; top:1.5rem }
    #logo > a , .header__date { background-size:auto 10rem }
    .header__date {
        width:13.5rem ; height:2rem ; 
        background-position:-42rem -8rem ;
        left:13.5rem ; top:3rem
    }
    .sticky .header__date , .navOpen .header__date { background-position:-42rem -6rem ; opacity:0.7 }
    #btn_nav_open , #btn_search_open   { top:1.5rem ; border-radius:0.6rem } 
    #btn_search_open span:nth-child(1) { border-color:#ffffff }
    #btn_nav_open span , #btn_search_open span:nth-child(2) { background-color:#ffffff }

    .sticky #btn_search_open span:nth-child(1) , .navOpen #btn_search_open span:nth-child(1)  { border-color:#111111 }
    .sticky #btn_nav_open span , .sticky #btn_search_open span:nth-child(2) ,
    .navOpen #btn_nav_open span , .navOpen #btn_search_open span:nth-child(2) { background-color:#111111 }

    .header__sns {
        display:block ; width:20rem ; 
        position:absolute ; right:20rem ; top:1.5rem ;
        font-size:0 ; text-align:center ;
    }
    .header__sns__item , .header__sns__link  { width:5rem ; height:5rem ; font-size:0 ; color:transparent }
    .header__sns__item { display:inline-block }
    .header__sns__link { 
        display:block ; background:url(../img/sprite.png) no-repeat ; background-size:auto 10rem ;
        margin:0 0.5rem ; opacity:0.5 ; transition:0.3s all ;
    }
    .header__sns__link:hover { opacity:1 }
    .header__sns__item:nth-child(1) .header__sns__link { background-position:-12rem 0 }
    .header__sns__item:nth-child(2) .header__sns__link { background-position:-17rem 0 }
    .header__sns__item:nth-child(3) .header__sns__link { background-position:-22rem 0 }

    .sticky .header__sns__item:nth-child(1) .header__sns__link ,
    .sticky .header__sns__item:nth-child(1) .header__sns__link { background-position:-12rem -5rem }
    .sticky .header__sns__item:nth-child(2) .header__sns__link ,
    .sticky .header__sns__item:nth-child(2) .header__sns__link  { background-position:-17rem -5rem }
    .sticky .header__sns__item:nth-child(3) .header__sns__link ,
    .sticky .header__sns__item:nth-child(3) .header__sns__link  { background-position:-22rem -5rem }

    .navOpen #btn_nav_open { background:none}
    .navOpen #btn_nav_open span { background-color:#39ab21  }



    /* Navigation */
    #nav { padding-top:8rem } 
    .nav__container { 
        overflow:inherit ; position:relative ; 
        background:url(../img/nav_bg.jpg) no-repeat left center ; background-size:cover ; 
    }
    .nav__img , .nav__box { position:absolute ; top:0 ; height:100% }
    .nav__img { width:35rem ; right:65rem ; background-color:rgba(0,0,0,0.7) }
    .nav__box { width:65rem ; right:0 ; background-color:#ffffff ; overflow:auto ; padding:0 4rem }

    .nav__img__title { display:none }
    .nav__img__p {
        display:block ; width:100% ;  padding:5rem 3rem 2rem 4rem ;
        font-family:'NotoSerifKR',serif ; font-weight:200 ; letter-spacing:-0.15rem ;
        font-size:3rem ; line-height:5rem ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; 
    }

    #btn_nav_close {
        position:absolute ; right:82.5rem ; bottom:1rem ; transform:translateX(-50%) ;
        margin:0
    }
    #btn_nav_close::before , #btn_nav_close::after { background-color:#ffffff }

    .nav__list { margin:0 auto 4rem }
    .nav__item { padding:4rem 0 4rem 10rem ; position:relative ; border-bottom:dashed 1px rgba(0,0,0,0.15) }
    .nav__item:last-child { border-bottom:none } 
    .nav__link , .nav__sub__link { display:block ; font-size:1.8rem ; line-height:2.4rem }
    .nav__link { 
        color:#1663aa ; font-weight:500 ;
        position:absolute ; left:0 ; top:4.5rem ;
    }
    .nav__sub__link > b { display:none }
    .nav__sub__link     { padding:0.5rem 0 0.7rem ; border:none }
    .nav__sub__link::after { bottom:0 }

    .nav__btns::after { display:block ; content:"" ; clear:both }
    .nav__btn { width:25% ; float:left ; margin:0 0 0 1% ; padding:0.8rem 0.5rem 1rem }
    .nav__btn.event { width:48% ; margin:0 } 


    /* Search */
    #btn_nav_open , #btn_search_open { border-radius:0.4rem }
    #allSearch_form { padding:0 ; padding-top:10rem }
    .allSearch__container { padding:5rem 0 3rem }
    #as_kind , #as_Word , #allSearch_btn_submit { width:auto ; max-width:none ; margin:0 0.2rem 1.5rem } 
    #as_kind , #as_Word { text-align:left } 
    #as_Word , #allSearch_btn_submit { padding-left:1.5rem ; padding-right:1.5rem }
    #as_kind { width:10rem ; padding:1.3rem 0.5rem 1.5rem }

    .searchOpen #btn_search_open span:nth-child(1) { border-color:#ffffff }
    .searchOpen #btn_search_open span:nth-child(2) { background-color:#ffffff }
    



    /* Main */
    #main { padding-top:0 ; margin-bottom:12rem }



    /* Aside */
    #aside { width:6rem }
    .aside__item { display:block ; width:6rem ; height:6rem }


    
    /* Footer */
    #footer { border:none ; padding-top:0 ; position:relative }
    
    #footer::before { 
        display:block ; content:"" ; width:100% ; height:1px ; background-color:rgba(0,0,0,0.1) ;
        position:absolute ; left:0 ; top:6rem ;
    }

    .footer__nav , .footer__container { width:90% ; max-width:128rem ; margin:auto ; position:relative  } 
    .footer__nav::after { display:block ; content:"" ; clear:both }

    .footer__nav__list , .alarm__list { width:49% ; margin:0 ; padding:0 } 
    .footer__nav__list { float:left ; text-align:left }
    .alarm__list       { float:right ; text-align:right }
    .footer__nav__item { padding:0 2rem }
    .footer__nav__link , .alarm__btn { padding:1.5rem 0 1.7rem ; display:block }

    .alarm__btn , .alarm__btn::after  { margin:0 ; border-radius:0 } 
    .alarm__btn { padding-left:3rem ; padding-right:3rem ; width:auto ; display:inline-block }
    .alarm__btn::after { 
        border:none ; width:1px ; box-sizing:border-box ;
        height:100% ; background-color:rgba(255,255,255,0.1) ;
        left:0 ; transform:translateY(-50%) ; 
    }
    .alarm__btn:last-child:after { 
        width:100% ; height:100% ; left:0 ; top:0 ; transform:none ;
        background:none ; border:solid 1px rgba(255,255,255,0.1) ;
        border-top:none ; border-bottom:none ;
    }

    .footer__container { position:relative ; padding:4rem 20rem 0 17rem }
    .footer__logo { position:absolute ; left:0 ; top:4rem } 
    .footer__address li { display:inline-block  }
    .footer__address li:first-child { display:block ; width:100% }
    .footer__address li , .footer__copy { letter-spacing:0 ; margin-right:4rem ; text-align:left }
    .footer__address li:first-child , .footer__address li:last-child { margin-right:0 }
    .footer__copy { margin:0 ; text-align:left }

    .footer__sns { width:20rem ; position:absolute ; right:0 ; top:4rem ; text-align:right } 
    .footer__sns__item { margin:0 0 0 1rem }
 
 

 
} 
    
@media print { 
     
}