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



/* Header */ 
#header , .header__container { width:100% ; min-height:6rem }
#header { 
    background-color:#ffffff ; transition:0.3s all ;
    position:fixed ; left:0 ; top:0 ; z-index:95 }
#header::after {
    display:block ; content:"" ; width:100% ; height:1px ;
    background-color:#000000 ; opacity:0.1 ;
    position:absolute ; left:0 ; bottom:0 ;
}    
.header__container { position:relative }
 
.sticky #header { background-color:#ffffff ; box-shadow:0 0 0.3rem rgba(0,0,0,0.2) }

#WS_logo , #WS_logo > a { display:block ; width:12.8rem ; height:4rem ; font-size:0 ; color:transparent }
#WS_logo > a { background:url(../img/logo.png) no-repeat left top ; background-size:auto 8rem }
#WS_logo , #WS_date , #btn_search , #btn_navOpen { position:absolute ; top:50% ; transform:translateY(-50%) }
#WS_logo  { left:0.5rem }
#WS_date  { 
    display:block ; left:14rem ; width:7rem ;
    font-size:1.4rem ; line-height:1.4rem ; color:#222222 ; font-weight:600 ;
    word-break:keep-all ; letter-spacing:-0.05rem ;
}

#btn_search , #btn_search > span , #btn_navOpen {
    display:block ; width:5rem ; height:5rem ;
    font-size:0 ; color:transparent ;
}
#btn_search  { right:5.1rem }
#btn_navOpen { right:0 }

#btn_search , #btn_search > span , #btn_search > span::before , #btn_search > span::after ,
#btn_navOpen , #btn_navOpen span { transition:0.3s all }


#btn_search > span , #btn_search > span::before , #btn_search > span::after { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
#btn_search > span::before , #btn_search > span::after { display:block ; content:"" ; box-sizing:border-box }
#btn_search > span::before {
    width:2.1rem ; height:2.1rem ;
    border:solid 0.3rem #111111 ; border-radius:100% ;
}
#btn_search > span::after { 
    width:0.3rem ; height:0.8rem ; border-radius:1rem ;
    background-color:#111111 ;
    left:69% ; top:69% ; transform:translate(-50%,-50%) rotate(-45deg)
}

.schOpen #btn_search > span::before { 
    width:2.8rem ; height:2.8rem ;
    border:0 ; background-color:#389ddb ;
}
.schOpen #btn_search > span::after {
    width:1.8rem ; height:0.4rem ; border-radius:1rem ;
    border:0 ; background-color:#ffffff ;
    left:50% ; top:50% ; transform:translate(-50%,-50%) rotate(0deg)
} 

#btn_navOpen span { 
    display:block ; width:3rem ; height:0.3rem ; border-radius:1rem ; 
    background-color:#111111 ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%)  
}
#btn_navOpen span:nth-child(1) , #btn_navOpen:hover span:nth-child(3) { top:32% } 
#btn_navOpen span:nth-child(3) , #btn_navOpen:hover span:nth-child(1) { top:68% } 
#btn_navOpen:hover span:nth-child(2) { transform:translate(-50%,-50%) rotate(180deg) } 

#btn_search:hover > span { transform:translate(-50%,-50%) scale(1.1) }
 
.navOpen #btn_navOpen span:nth-child(2) { opacity:0 }
.navOpen #btn_navOpen span:nth-child(1) , .navOpen #btn_navOpen span:nth-child(3) { 
    top:50% ; left:50% ; border-radius:1rem ;
    background-color:#389ddb ;
}
.navOpen #btn_navOpen span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg) }
.navOpen #btn_navOpen span:nth-child(3) { transform:translate(-50%,-50%) rotate(-45deg) }
.navOpen #btn_navOpen:hover span:nth-child(1)  { transform:translate(-50%,-50%) rotate(135deg) }
.navOpen #btn_navOpen:hover  span:nth-child(3) { transform:translate(-50%,-50%) rotate(45deg) }



/* Navigation */
#nav {
    display:block ; width:100% ; height:100vh ; padding-top:6rem ;
    position:fixed ; left:-100.5% ; top:0 ; z-index:90 ;
    background-color:#ffffff ;
}
.navOpen #nav   { left:0 }
.nav__container { 
    width:100% ; height:100% ; margin:auto ; overflow:auto ;
    position:relative 
}

.nav__container , .nav__left { display:none }
.navOpen .nav__container     { display:block }

.nav__link , .nav__link dt , .nav__link dd , .nav__link dd::after ,
.navOpen #nav  { transition:0.3s all }
.nav__link     { display:block }
.nav__link dt , .nav__link dd { word-break:keep-all ; padding:0 2% }
.nav__link dt  { 
    font-size:1.4rem ; line-height:1.8rem ; font-weight:600 ; color:#389ddb ; 
    padding-top:1.5rem ; padding-bottom:0.2rem ;
}
.nav__link dd  { 
    position:relative ;
    font-size:2rem ; line-height:2.6rem ; letter-spacing:-0.1rem ;
    padding-bottom:1.5rem ; border-bottom:solid 1px rgba(0,0,0,0.1)
} 

.nav__link dd::after {
    display:block ; content:"" ; width:0; height:0.1rem ;
    background-color:#389ddb ;
    position:absolute ; left:0 ; bottom:-1px ;  
}
.nav__link.current dd::after , 
.nav__link:hover dd::after { width:100% }
.nav__link.current dd ,
.nav__link:hover dd { color:#111111 ; font-weight:600 }

.btn__close , .btn__close::before , .btn__close::after { transition:0.3s all }
.btn__close {
    display:block ; width:2rem ; height:2rem ; margin:auto ; 
    font-size:0 ; color:transparent ;
    position:relative ; opacity:0.4 ;
} 
.btn__close:hover { opacity:0.8 }
.btn__close::before , .btn__close::after {
    display:block ; content:"" ; width:1.6rem ; height:1px ;
    background-color:#111111 ; 
    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:1.8rem }
.btn__close:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
.btn__close:hover::after  { transform:translate(-50%,-50%) rotate(45deg) }
#btn_navClose { margin-bottom:2rem }  
#nav_list     { margin-bottom:4rem } 
#utility_nav    { font-size:0 ; text-align:center ; margin-bottom:3rem }
#utility_nav li { display:inline-block ; margin:0 0.5rem 1rem }
#utility_nav a  {
    display:block ; padding:0.5rem 2rem 0.7rem ;
    font-size:1.6rem ; line-height:2.8rem ;
    position:relative ; background-color:#ffffff 
}
#utility_nav a , #utility_nav a::after { 
    transition:0.3s all ;
    display:block ; border-radius:0.4rem ; box-sizing:border-box }
#utility_nav a::after {
    content:"" ;
    width:100% ; height:100% ; border:solid 1px rgba(0,0,0,0.1) ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
#utility_nav a:hover { color:#111111 ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.2) }
#utility_nav a:hover::after { border-color:rgba(0,0,0,0.2) } 

#utility_nav a.event { background-color:#111111 ; color:#ffffff }
#utility_nav a.event:hover { background-color:#389ddb ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) } 



/* Search */
#search { 
    width:100% ; background-color:rgba(0,0,0,0.7) ;
    position:fixed ; left:-100.5% ; top:6rem ; z-index:88 ;
}
.schOpen #search { left:0 ; transition:0.3s all }
.search__container {
    display:none; padding:5rem 0 ;
    width:90% ; max-width:50rem ; margin:auto ;
}
.schOpen .search__container { display:block }
#search_form { display:block ; text-align:center ; font-size:0 ; margin-bottom:1.5rem }
#s_word , #search_btn_submit  { 
    width:100% ; border:none ;
    font-size:1.8rem ; line-height:3rem ; 
    padding:0.8rem 1.5rem 1rem ; border-radius:0.4rem }
#s_word { background-color:#ffffff ; margin-bottom:0.5rem ; }
#search_btn_submit {
    background-color:#389ddb ; color:#ffffff ; text-align:center ; font-weight:500 ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; transition:0.3s all ;
}
#search_btn_submit:hover { background-color:#ffde00 ; color:#222222 ; text-shadow:none }
#btn_searchClose::before , #btn_searchClose::after { background-color:#ffffff }



/* Service */
#sec_service , .service__container { width:100% }
.service__container { text-align:center ; font-size:0 }
#servic_subscribe , #service_app , #service_event { 
    display:inline-block ; margin:0 0.2rem 1rem ; 
    width:96% ; min-width:30rem ; max-width:40rem ;
    text-align:left ;
}



/* Service + subscribe */
#servic_subscribe , .service__app__img , .event__bnr , .event__bnr::after { border-radius:0.6rem }
#servic_subscribe { 
    padding:1.7rem 1.5rem 1.7rem 10rem ;
    background:url(../img/bnr_apply_bg.jpg) no-repeat right center ; background-color:#c5c3ba ;
    background-size:auto 100% ; position:relative ;
}

#servic_subscribe h3 { 
    width:10rem ; position:absolute ; left:1.5rem ; top:2.7rem ;
    font-family:'Dohyun',sans-serif ; color:#3e2c23 ; font-size:2rem ; line-height:2.4rem }
#servic_subscribe p  { display:none }
#subscribe_name , #subscribe_email , #subscribe_submit {
    font-size:1.6rem ; line-height:2.8rem ; padding:0.7rem 1.5rem ;
    width:100% ; border-radius:0.4rem ;
}
#subscribe_name , #subscribe_email { background-color:#ffffff ; margin-bottom:0.5rem }
#subscribe_submit {
    background-color:#389ddb ;
    color:#ffffff ; font-weight:500 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    transition:0.3s all ;
}
#subscribe_submit:hover { background-color:#111111  }



/* Service + app */
#service_app , #service_event { height:17rem ; position:relative }
#service_app { overflow:hidden }
.service__app__img , .service__app__img::before , .service__app__img::after {
    width:100% ; height:100% ; display:block ; overflow:hidden ;
    transition:0.3s all ;
}
.service__app__img { position:relative }
.service__app__img::before , .service__app__img::after {
    content:"" ; position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.01) ;
}
.service__app__img::before { background:url(../img/bnr_app_bg.jpg) no-repeat center ; background-size:cover }
.service__app__img::after  { background-color:rgba(0,0,0,0.6) }

#service_app:hover .service__app__img::before { transform:translate(-50%,-50%) scale(1.1) }
#service_app:hover .service__app__img::before { background-color:rgba(0,0,0,0.7) }

.service__app__btn { 
    width:100% ; display:block ;  
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.service__app__container { display:block ; width:24rem ; margin:auto ; position:relative ; text-align:left }
.service__app__container::after { display:block ; content:"" ; clear:both }
.service__app__icon {
    display:block ; width:10rem ; height:10rem ; opacity:0.7 ;
    background:url(../img/icon_app.png) no-repeat 0 0 ; background-size:auto 10rem ;
    position:absolute ; left:0 ; top:50% ; transform:translate(-11rem,-50%) ;
    transition:0.3s all ;
}
.service__app__btn:hover .service__app__icon { transform:translate(-11rem,-50%) scale(1.05) ; opacity:1 }
#subscribeBtn .service__app__icon { background-position:-10rem 0}
#unsubscribeBtn .service__app__icon { background-position:right top}
.service__app__title , .service__app__txt , .service__app__eng { text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; display:block }
.service__app__title , .service__app__txt { float:left }
.service__app__title { 
    font-size:3.6rem ; line-height:4.4rem ; color:#f5e9d8 ; font-weight:300 ;
    letter-spacing:-0.25rem ; 
}
.service__app__title > span {
    font-size:inherit ; line-height:inherit ; color:inherit ; font-weight:500 ;
    margin-right:0.3rem ; letter-spacing:inherit ; text-shadow:inherit 
}
.service__app__txt , .service__app__eng { font-size:1.4rem ; line-height:1.8rem ; word-break:keep-all }
.service__app__txt { 
    color:#ffffff ;
    padding:0.7rem 0 0.5rem 2.5rem ; position:relative ;
}
.service__app__txt::before { 
    display:block ; content:"" ; width:1px ; height:120% ; 
    background-color:#ffffff ; opacity:0.1 ;
    position:absolute ; left:1.2rem ; top:50% ; transform:translateY(-50%) ;
}
.service__app__eng {
    color:#f5e9d8 ; font-weight:500 ;
    padding-left:0.6rem ;
}



/* Service + app */ 
.event__bnr , .event__bnr::after { display:block ; width:100% ; height:100% }  
.event__bnr { 
    background:url(../img/bnr_event.jpg) no-repeat center ;
    font-size:0 ; color:transparent ; position:relative
}
.event__bnr::after {
    content:"" ;  box-sizing:border-box ;
    border:solid 1px rgba(0,0,0,0.1) ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%);
}



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

.footer__container { width:96% ; max-width:150rem ; margin:auto }
.footer__nav { padding:3rem 0 ; border-bottom:solid 1px rgba(0,0,0,0.1) }
.footer__copy { 
    padding:2.5rem 1rem ;
    font-size:1.6rem ; line-height:2.4rem ; text-align:center ; word-break:keep-all }
.footer__service { text-align:center ; font-size:0 ; margin-bottom:2rem }
.footer__service li { display:inline-block ; margin:0.3rem }
.footer__service__btn , .footer__service__btn::after { 
    transition:0.3s all ;
    border-radius:0.4rem ; box-sizing:border-box }
.footer__service__btn {
    display:block ; padding:0.5rem 2rem 0.7rem ;
    font-size:1.4rem ; line-height:2.8rem ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    position:relative ; background-color:#222222 ;
}
.footer__service__btn:hover { background-color:#389ddb ; }
.footer__service__btn::after {
    display:block ; content:"" ; width:100% ; height:100% ; 
    border:solid 1px rgba(0,0,0,0.1) ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.footer__service__btn.app { background-color:#ffffff ; color:#444444 ; text-shadow:none }
.footer__service__btn.app:hover { background-color:#eeeeee ; color:#111111 }
.footer__service__btn.app:hover::after { border-color:rgba(0,0,0,0.2) }

.footer__sns { 
    width:29rem ; margin:auto ; border:solid 1px rgba(0,0,0,0.1) ; border-radius:4rem ;
    font-size:0 ; text-align:center ;
} 
.footer__sns > li , .footer__sns__btn { width:5rem ; height:5rem ; display:block  ; position:relative }

.footer__sns > li { display:inline-block }
.footer__sns__btn { font-size:0 ; color:transparent }
 
.footer__sns > li::after , .footer__sns__btn::after { display:block ; content:"" ; position:absolute ; top:50% } 
.footer__sns > li::after { 
    right:0 ; transform:translateY(-50%); 
    width:1px ; height:1.2rem ; background-color:rgba(0,0,0,0.1) ;
} 
.footer__sns > li:last-child:after { display:none }
.footer__sns__btn , .footer__sns__btn::after { transition:0.3s all }
.footer__sns__btn::after {
    width:3rem ; height:3rem ; left:50% ; transform:translate(-50%,-50%) ;
    background:url(../img/icon_sns.png) no-repeat 0 0 ; background-size:auto 3rem ;
    opacity:0.6 ;
}
.footer__sns__btn:hover::after { opacity:1 ; transform:translate(-50%,-50%) scale(1.1) }

.footer__sns > li:nth-child(1) .footer__sns__btn::after { background-position:0 0 }
.footer__sns > li:nth-child(2) .footer__sns__btn::after { background-position:-3rem 0 }
.footer__sns > li:nth-child(3) .footer__sns__btn::after { background-position:-6rem 0 }
.footer__sns > li:nth-child(4) .footer__sns__btn::after { background-position:-9rem 0 }
.footer__sns > li:nth-child(5) .footer__sns__btn::after { background-position:-12rem 0 }



/* Aside */ 
#aside { position:fixed ; right:0.5rem ; bottom:0.5rem ; z-index:70 ; width:0.1rem ; height:0.1rem }
#aside , #top_btn ,  #top_btn::after { transition:0.3s all ; display:block }
#top_btn { 
    width:5rem ; height:5rem ;
    overflow:hidden ; border-radius:100% ; background-color:#222222 ;   
    position:absolute ; right:-8rem ; bottom:0 ; opacity:0 ;
    font-size:0 ; color:transparent ; text-indent:-99rem ;
} 
.sticky #top_btn , #top_btn:focus { right:0 ; opacity:1  }

#top_btn:hover { background-color:#389ddb }
#top_btn::after {
    content:"" ; width:1rem ; height:1rem ; 
    border:solid 0.2rem #ffffff ; border-right:none ; border-bottom:none ;
    position:absolute ; left:50% ; top:53% ; transform:translate(-50%,-50%) rotate(45deg) scale(0.8) ;
}
#top_btn:hover::after { transform:translate(-50%,-50%) rotate(45deg) scale(1) }

 



@media screen and (min-width:1024px){ 
    
    /* Header */ 
    #header , .header__container { min-height:8rem }
    .header__container { width:96% ; max-width:150rem ; margin:auto }
    #header { background:none } 
    #header::after  { background-color:#ffffff ; opacity:0.1 }

    #WS_logo , #WS_logo > a , .nav__logo { width:16rem ; height:5rem }
    #WS_logo > a , .nav__logo { background-size:auto 10rem }
    #WS_logo { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
    #WS_date , .nav__date {
        width:16rem ; padding-bottom:0.3rem ;
        font-size:1.8rem ; line-height:2.8rem ; color:#ffffff ; font-weight:600 ; 
        text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
        position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
    } 

    #btn_search > span::after , #btn_navOpen span { background-color:#ffffff }
    #btn_search > span::before { border-color:#ffffff } 

    .sticky #WS_date { color:#444444 ; text-shadow:none }
    .sticky  #btn_search > span::after , .sticky  #btn_navOpen span { background-color:#444444 }
    .sticky  #btn_search > span::before { border-color:#444444 }  
    .schOpen  #btn_search > span::after { background-color:#ffffff }



    /* Navigation */
    #nav { z-index:96 ; padding:0 }
    .nav__container { overflow:inherit }
    .nav__left , .nav__right { 
        display:block ; width:50% ; height:100vh ; margin:0 ; padding:0 ; 
        position:absolute ; top:0 }

    .nav__left  { left:0 }
    .nav__right { right:0 ; overflow:auto }
 
    .nav__img , .nav__img::after { display:block ; width:100% ; height:100% }
    .nav__img {  
        position:relative ; z-index:96 ;
        background:url(../img/nav_bg.jpg) no-repeat center ; background-size:cover ;
    }
    .nav__img::after {
        content:"" ; position:absolute ; left:0 ; top:0 ;
        background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.2) 60%,rgba(0,0,0,0.2) 100%);  
    }
    .nav__header , .nav__right__container , #utility_nav { width:98% ; max-width:75rem }
    .nav__header { 
        position:absolute ; top:0 ; right:0 ; z-index:97 ;
        height:8rem 
    }
    .nav__logo { 
        display:block ; font-size:0 ; color:transparent ;
        background-image:url(../img/logo.png) ; background-position:left top ; background-repeat:no-repeat ;
        position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
    }

    .nav__date { left:20rem } 
    .nav__right__container   { position:relative ; height:100% ; min-height:70rem } 
    #nav_list , #utility_nav { width:100% ; padding-left:5rem }
    #nav_list { padding-top:8rem }

    .nav__link { position:relative ; padding:1.2rem 0 1.2rem 14rem } 
    .nav__link dt , .nav__link dd { margin:0 ; padding:0 ; display:inline-block ; line-height:2.8rem }
    .nav__link dt { width:14rem ; font-size:2.2rem ; position:absolute ; left:0 ; top:1.2rem }
    .nav__link dd { font-size:1.8rem ; padding-bottom:0.5rem ; border:none }

    .nav__link dd::after { bottom:0 }

    #btn_navClose {
        width:5rem ; height:5rem ; border-radius:100% ; margin:0 ;
        position:absolute ; right:1.5rem ; top:1.5rem ;
        background-color:#222222 ; opacity:1 ;
    }
    #btn_navClose:hover { background-color:#389ddb }
    #btn_navClose::before , #btn_navClose::after { width:3rem ; height:0.3rem ; background-color:#ffffff ; border-radius:1rem }  
 
    #utility_nav { position:absolute ; left:0 ; bottom:4rem ; margin:0 }
    #utility_nav::after { display:block ; content:"" ; clear:both }
    #utility_nav li { display:block ; float:left ; margin:0 0.5rem 0.5rem 0 }
    #utility_nav li:last-child { float:right ; margin:0 0 0.5rem 0.5rem }



    /* Search */
    #search { top:0 ; padding-top:8rem }
    .search__container { max-width:60rem }
    #s_word , #search_btn_submit { margin:0 }
    #s_word { width:55% ; margin-right:0.5rem }
    #search_btn_submit { width:auto }



    /* Service */
    .service__container { width:96% ; margin:auto ; max-width:150rem }
    .service__container::after { display:block ; content:"" ; clear:both }
    #servic_subscribe , #service_app , #service_event { display:block ; margin:0 ; min-width:auto ; max-width:none }
    #servic_subscribe , #service_app { float:left }
    #servic_subscribe { width:46% ; margin-right:2% }
    #service_app   { width:23.3333% }  
    #service_event { float:right ; width:26.6666% }



    /* Service + subscribe */
    #servic_subscribe { height:17rem ; padding:4rem 5rem 0 }
    #servic_subscribe h3 { 
        position:static ; width:12rem ; margin-bottom:1rem ;
        font-size:2.6rem ; line-height:3.2rem ; letter-spacing:-0.1rem ;
    }
    #servic_subscribe p {
        display:block ; width:100%  ; padding:0.3rem 0.5rem 0.5rem 18rem ; 
        font-size:1.4rem ; line-height:1.8rem ; color:rgba(0,0,0,0.6) ;
        word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis ;
        position:absolute ; left:0 ;top:4rem
    }
    #servic_subscribe p::before {
        display:block ; content:"" ; width:1px ; height:1.6rem ;
        background-color:#111111 ; opacity:0.1 ;
        position:absolute ; left:16.5rem ; top:50% ; transform:translateY(-50%) ;
         
    }
    #subscribe_name , #subscribe_email , #subscribe_submit { padding:1rem 1.5rem 1.2rem ; margin:0 }
    #subscribe_name , #subscribe_email { margin-right:0.5rem }
    #subscribe_name   { width:20% }
    #subscribe_email  { width:50% }
    #subscribe_submit { width:19% ; padding-left:0.3rem ; padding-right:0.3rem }

 

    /* Footer */ 
    .footer__nav::after , .footer__service::after , .footer__sns::after { display:block ; content:"" ; clear:both } 
    .footer__service { width:40rem ; float:left ; margin-bottom:0 }
    .footer__sns { width:25rem ; border-radius:0 ; border:none ; float:right }
    .footer__service > li { margin:0 ; display:block ; float:left }
    .footer__service > li:first-child { margin-right:1rem }

    .footer__service__btn.subscribe::after , .footer__service__btn.archive::after { display:none }
    .footer__service__btn.subscribe { border-radius:0.4rem 0 0 0.4rem }
    .footer__service__btn.archive { border-radius:0 0.4rem 0.4rem 0 }

    .footer__service__btn.archive::before {
        display:block ; content:"" ; width:1px ; height:1.2rem ; 
        background-color:#ffffff ; opacity:0.2 ;
        position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
    }
    .footer__sns > li , .footer__sns__btn { width:4rem ; height:4rem }
    .footer__sns > li { margin:0 0 0 1rem ; display:block ; float:left }
    .footer__sns > li:last-child { margin-right:0 } 
    .footer__sns > li::after { display:none }
    .footer__copy { padding:3rem 0 5rem 0 ; text-align:left }



    /* Aside */ 
    #aside { right:1rem ; bottom:1rem }

} 
    
@media print { }