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

/* Visual */ 
#visual , .visual__container , .visual__sliding , .visual__sliding__group , .visual__slide { width:100% }   
#visual  { margin-bottom:8rem }
.visual__sliding , .visual__slide { overflow:hidden }
.visual__sliding , .visual__container { position:relative }
.visual__sliding__group { height:30rem ; position:relative }
.visual__slide          { height:100% ; position:absolute ; left:0 ; top:0 ; z-index:5 }
  
#btn_slide_prev , #btn_slide_next , #btn_slide_prev::before , #btn_slide_next::before { transition:0.3s all }
#btn_slide_prev , #btn_slide_next { 
    display:block ; width:3rem ; height:3rem ;
    font-size:0 ; color:transparent ;
    position:absolute ; top:50% ; z-index:11  ; transform:translateY(-50%) ;
    background-color:rgba(0,0,0,0.2)
}
#btn_slide_prev:hover , #btn_slide_next:hover { background-color:rgba(0,0,0,0.6) }
#btn_slide_prev { left:0  ; border-radius:0 0.4rem 0.4rem 0 }
#btn_slide_next { right:0  ; border-radius:0.4rem 0 0 0.4rem }
#btn_slide_prev::before , #btn_slide_next::before {
    display:block ; content:"" ; width:0.8rem ;  height:0.8rem ;
    border:solid 0.1rem #ffffff ; opacity:0.5 ; 
    position:absolute ; top:50% ; transform:translate(-50%,-50%) ;
}
#btn_slide_prev::before { 
    left:55% ;
    transform:translate(-50%,-50%) rotate(-45deg) ; border-right:none ; border-bottom:none }
#btn_slide_next::before { 
    left:45% ;
    transform:translate(-50%,-50%) rotate(45deg) ; border-left:none ; border-bottom:none }
#btn_slide_prev:hover::before , #btn_slide_next:hover::before { opacity:1 }
#btn_slide_prev:hover::before { transform:translate(-50%,-50%) rotate(-45deg) scale(1.1) }
#btn_slide_next:hover::before { transform:translate(-50%,-50%) rotate(45deg) scale(1.1) }

.slide__pagination {
    display:block ; width:100% ; padding-top:1rem ; 
    font-size:0 ; text-align:center ;
}

.slide__page {
    display:inline-block ; width:1rem ; height:1rem ; border-radius:2rem ;
    background-color:rgba(0,0,0,0.2) ;
    margin:0.3rem 0.5rem ; transition:0.3s all ;
}
.slide__page.now , .slide__page:hover { background-color:#40be25 }
.slide__page.now { width:4rem }

.slide__control , .slide__control__btn , .slide__control__btn::before { 
    display:block ; width:2rem ; height:2rem ;
    font-size:0 ; color:transparent
}
.slide__control { position:absolute ; left:1rem ; top:1rem ; z-index:12 }
.slide__control__btn { 
    background:url(../img/icon_pause_play.png) no-repeat 0 0 rgba(0,0,0,0.1) ;
    position:relative ; opacity:0.6
}
.slide__control__btn , .slide__control__btn::before { border-radius:100% ; transition:0.3s all } 
.slide__control__btn.play  { background-position:right top ; display:none }
.slide__control__btn.pause { background-position:left top }

.stop .slide__control__btn.play  { display:block }
.stop .slide__control__btn.pause { display:none }

.slide__control__btn:hover { opacity:1 ; background-color:rgba(0,0,0,0.7)  }
.slide__control__btn:hover::before { opacity:0 }
 
.slide__control__btn::before { 
    content:"" ; box-sizing:border-box ;
    border:solid 0.1rem rgba(255,255,255,0.3)
}

.slide__img , .slide__img > span , .slide__img::after { display:block ; width:100% ; height:100% } 
.slide__img { position:relative ; overflow:hidden } 
.slide__img > span , .slide__img::after { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
.slide__img > span { background-repeat:no-repeat ; background-size:cover ; background-position:center }
.slide__img::after { content:"" ; background-color:#111111 ; opacity:0.5 }

.slide__box { 
    width:100% ; padding:0 4rem ; 
    position:absolute ; left:0 ; bottom:3rem ;
    text-align:center ;
}
.slide__box__link { display:block }
.slide__box__tag , .slide__box__title , .slide__box__text , .slide__box__more { 
    color:#ffffff ; 
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; word-break:keep-all 
}
.slide__box__tag { 
    display:inline-block ; padding:0.4rem 1.5rem ; margin-bottom:1.5rem ; border-radius:2rem ;
    font-size:1.2rem ; line-height:1.8rem ;  
    background-color:#111111 ; opacity:0.8 ;
}
.slide__box__tag , .slide__box__title , .slide__box__text , .slide__box__title > b , .slide__box__text > span , .slide__box__more { transition:0.3s all }
.slide__box__title { font-size:3rem ; line-height:4.4rem ; font-family:'Dohyun',sans-serif } 
.slide__box__title > br { display:none }
.slide__box__text  { display:none }
.slide__box__title > b , .slide__box__text > span {
    font-size:inherit ; line-height:inherit ; color:inherit ; font-weight:inherit ;
    font-family:inherit ; border-bottom:solid 1px rgba(255,255,255,0)
} 
.slide__box__link:hover .slide__box__tag { background-color:#40be25 ; opacity:1 }
.slide__box__link:hover .slide__box__title > b ,
.slide__box__link:hover .slide__box__text > span  { border-color:rgba(255,255,255,0.3) }
.slide__box__more { display:none }



/* Main */
.main__sec { width:100% ; margin:0 auto 8rem }
.main__sec:last-child { margin-bottom:0 }



/* Issue */
.sec__header { margin-bottom:4rem ; text-align:center ; width:100% }
.sec__title , .sec__guide { word-break:keep-all }
.sec__title  { 
    font-size:4rem ; line-height:5rem ; font-family:'Dohyun',sans-serif ; color:#111111 ;
    letter-spacing:-0.1rem ; margin-bottom:0.5rem ;
}
.sec__guide  { font-size:1.6rem ; line-height:2.4rem ; color:#595959 }
.issue__list { display:block ; width:100% ; text-align:center ; font-size:0 } 
.issue__item { 
    display:inline-block ; width:90% ; max-width:41rem ; margin:0 1% 3rem ;
    position:relative ; 
}
.issue__item:last-child { margin-bottom:0 }
.issue__link { width:100% ; display:block }
.issue__img > span , .issue__img::after , .issue__title > span { transition:0.3s all }
.issue__img , .issue__img > span , .issue__img::after { display:block ; width:100% ; height:22rem }
.issue__img  { overflow:hidden ; border-radius:0.8rem ; position:relative }
.issue__img > span , .issue__img::after { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
.issue__img > span { background-repeat:no-repeat ; background-position:center ; background-size:cover } 
.issue__img::after { content:"" ; box-sizing:border-box ; border:solid 1px rgba(0,0,0,0.07) } 
.issue__link:hover .issue__img > span { transform:translate(-50%,-50%) scale(1.1) }

.issue__tag {
    display:inline-block ; padding:0.4rem 1.4rem ; border-radius:3rem ;
    font-size:1.2rem ; line-height:2rem ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    background-color:#1663aa;
    position:absolute ; left:50% ; top:22rem ; transform:translate(-50%,-50%) ;
}
.item11 .issue__tag { background-color:#40be25 }
.issue__title {
    display:block ; padding:2rem 0.5rem 0 ;
    font-size:2.2rem ; line-height:3.2rem ; font-weight:600 ; color:#111111 ; 
    word-break:keep-all ; text-align:center 
}
.issue__title > span { 
    font-size:inherit ; line-height:inherit ; color:inherit ; font-weight:inherit ; word-break:inherit ;
    border-bottom:solid 1px rgba(0,0,0,0) ; padding-bottom:0.1rem ;
}
.issue__title br { display:none }
.issue__link:hover .issue__title > span { border-color:rgba(0,0,0,0.15) }



/* Column */
#sec_column { padding:6rem 0 3rem ; background-color:#f7f7f7 ; } 
.column__container { text-align:center ; font-size:0 } 
.column__item , .banner { display:inline-block ; margin:0 1% 3rem ; width:90% }
.column__link { display:block ; overflow:hidden ; border-radius:1rem }
.column__img , .column__img > span , .column__img::after { display:block ; width:100% ; height:24rem }

.column__item { max-width:35rem }
.column__link { 
    display:block ; overflow:hidden ; width:100% ; border-radius:1rem ;
    position:relative ; background-color:#ffffff ;
}
.column__img > span ,  .column__img::after , .column__title , .column__title > span { transition:0.3s all }
.column__img , .column__img > span ,  .column__img::after { display:block ; width:100% }
.column__img { position:relative ; height:20rem ; overflow:hidden }
.column__img > span ,  .column__img::after {
    height:100% ;  
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.column__img > span { background-repeat:no-repeat ; background-position:center ; background-size:cover }
.column__img::after {
    content:"" ; background-color:#111111 ;
    opacity:0.05
}
.column__link:hover .column__img > span { transform:translate(-50%,-50%) scale(1.1) }
.column__link:hover .column__img::after { opacity:0.3 }
.column__title {
    display:block ; padding:1.5rem 1rem ; word-break:keep-all ;
    font-size:2.2rem ; line-height:3rem ; font-weight:600 ; color:#111111 ;
}
.column__title br { display:none }
.column__title > span { 
    font-size:inherit ; line-height:inherit ; font-weight:inherit ; color:inherit ;
    word-break:inherit ; border-bottom:solid 1px rgba(0,0,0,0) ;
}
.column__link:hover .column__title > span { border-color:rgba(0,0,0,0.1) }

.banner , .banner::after { border-radius:1rem }
.banner { 
    position:relative ; height:30rem ;
    background:no-repeat center ;  
}
.banner::after {
    display:block ; content:"" ; box-sizing:border-box ;
    border:solid 1px rgba(0,0,0,0.05) ; width:100% ; height:100% ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
} 
.banner.event     { background-image:url(../img/banner_event.jpg) ; max-width:28rem }
.banner.subscribe { background-image:url(../img/banner_subscribe.jpg) ; max-width:24rem }

.issue__icon , .issue__icon::before { transition:0.3s all }
.column__tag {
    display:block ; width:9rem ; 
    position:absolute ; top:4rem ; left:50% ; transform:translateX(-50%) ;
    font-size:1.2rem ; line-height:1.8rem ; color:#ffffff ; text-align:center ; font-weight:600 ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
}
.issue__icon {
    width:9rem ; height:9rem ; display:block ; border-radius:100% ;
    position:relative ; margin-top:0.5rem ;
    background-color:#158fee ; opacity:0.9 ;
}
.issue__icon::before {
    display:block ; content:"" ; width:6rem ; height:6rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    background:url(../img/sprite.png) no-repeat ; background-size:auto 10rem ;
}
.item31 .issue__icon::before { background-position:-42rem 0 }
.item41 .issue__icon::before { background-position:-48rem 0 }

.column__link:hover .issue__icon { opacity:1 }



/* Archive */
#sec_archive , .archive__container { width:100% }
.archive__container { font-size:0 ; text-align:center }
.archive__link { width:48% ; max-width:24rem ; display:inline-block ; margin:0 0.5% 3rem ; position:relative }
.archive__link::after {
    display:block ; content:"" ; width:0 ; height:1px ; overflow:hidden ;
    background-color:#40be25 ; position:absolute ; left:50% ; bottom:0 ; transform:translateX(-50%) ; 
}
.archive__link:hover::after { width:100% }
.archive__link:last-child { display:none }
.archive__img , .archive__img::after { width:100% ; display:block ; border-radius:0.6rem ; box-sizing:border-box }  
.archive__img { 
    height:28rem ; position:relative ;
    background-repeat:no-repeat ; background-position:center ; background-size:cover ;
}
.archive__img::after {
    content:"" ; position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    border:solid 1px rgba(0,0,0,0.1) ; height:100%
}
.archive__link:hover .archive__img::after { border-color:#40be25 }
.archive__txt , .archive__link::after , .archive__img::after { transition:0.3s all }
.archive__txt {
    display:block ; padding:0.5rem ; border-bottom:solid 1px rgba(0,0,0,0.1);
    font-size:1.6rem ; line-height:2.8rem ; text-align:center ;
}
.archive__link:hover .archive__txt { color:#111111 }

.archive__more {
    display:block ; width:12rem ; margin:auto ; padding:0.5rem 0 ;
    font-size:1.4rem ; line-height:3rem ; text-align:center ;
    border:solid 1px rgba(0,0,0,0.07) ; border-radius:0.6rem ;
    transition:0.3s all ;
}
.archive__more:hover {
    background-color:#111111 ; border-color:#111111 ;
    color:#ffffff
}



@media screen and (min-width:1024px){ 
 

    /* Visual */ 
   .visual__sliding__group { height:100vh ; max-height:85rem }

    #btn_slide_prev , #btn_slide_next { width:5rem ; height:5rem ; border-radius:100% ; opacity:0 }
    #btn_slide_prev { left:-6rem }
    #btn_slide_next { right:-6rem }
    #visual:hover #btn_slide_prev , #visual:hover #btn_slide_next , 
    #btn_slide_prev:hover , #btn_slide_next:hover , #btn_slide_prev:focus , #btn_slide_next:focus ,
    .showBtn #btn_slide_prev , .showBtn #btn_slide_next { opacity:1 }
    #visual:hover #btn_slide_prev , #btn_slide_prev:hover , #btn_slide_prev:focus , .showBtn #btn_slide_prev { left:1rem }
    #visual:hover #btn_slide_next , #btn_slide_next:hover , #btn_slide_next:focus , .showBtn #btn_slide_next { right:1rem }
    #btn_slide_prev::before , #btn_slide_next::before { width:1rem ; height:1rem }
 
    .slide__pagination { 
        position:absolute ; right:5% ; bottom:6.5rem ; z-index:12 ;
        width:30rem ; text-align:right ;
    }
    .slide__page { margin:0 0 0 1rem ; background-color:rgba(255,255,255,0.2)  }
    .slide__page:hover { background-color:#ffffff }
    .slide__page.now , .slide__page.now:hover { background-color:#40be25 }

    .slide__control { left:auto ; top:auto ; right:2% ; bottom:6rem }

    .slide__box { 
        width:90% ; max-width:128rem ; 
        left:50% ; bottom:5rem ; transform:translateX(-50%) ;
        text-align:left ;
    }
    .slide__box__title { font-size:5rem ; line-height:7rem ; margin-bottom:2rem }
    .slide__box__title > br { display:block }
    .slide__box__text  { display:block ; font-size:1.8rem ; line-height:3.2rem ; margin-bottom:3rem }

    .slide__box__more {
        display:inline-block ; transition:0.3s all ;
        padding:1rem 2rem ; border-radius:0.4rem ; border:solid 1px rgba(255,255,255,0.2) ;
        font-size:1.4rem ; line-height:2rem ; opacity:0.8 ;
    }
    .slide__box__link:hover .slide__box__more {
        background-color:rgba(0,0,0,0.8) ; border-color:rgba(0,0,0,0.8) ;
        opacity:1 ;
    }




    /* Main */
    .main__sec { margin-bottom:10rem } 



    /* Issue */
    .issue__list , .column__container , .archive__container { width:90% ; max-width:128rem ; margin:auto }
    .issue__list::after , .column__container::after , .archive__container::after { display:block ; content:"" ; clear:both } 
    .issue__item { 
        margin:0 ; display:block ; 
        width:32.03125% ; float:left
    } 
    .issue__item:first-child { margin-right:1.9531% }
    .issue__item:last-child  { float:right }
    .issue__img , .issue__img > span , .issue__img::after { height:27rem }
    .issue__tag { top:27rem }



    /* Column */
    #sec_column { padding:8rem 0 ; background-color:rgba(0,0,0,0.8) ; position:relative } 
    #sec_column::before {
        display:block ; content:"" ; width:100% ; height:100% ;
        position:absolute ; left:0 ; top:0 ; z-index:-1 ;
        background:url(../img/column_bg.jpg) no-repeat center ; background-size:cover ;
        background-attachment:fixed
    }
    #sec_column .sec__title , #sec_column .sec__guide { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
    #sec_column .sec__guide { opacity:0.7 }
    .column__item , .banner { height:33rem ; margin:0 ; float:left }
    .column__item { width:27.3437% ; margin-right:1.5625% } 
    .column__link { 
        height:100% ;
        background:linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,#ffffff 20%,#ffffff 100%);  
    }
    .column__img  { height:24rem } 
    .column__title    { padding-bottom:0 }
    .banner.event     { max-width:21.875% }
    .banner.subscribe { float:right ; max-width:18.75% }

    .column__tag { top:6rem }



    /* Archive */
    .archive__link , .archive__link:last-child { display:block } 
    .archive__link { margin:0 1.5625% 0 0  ; width:18.75% ; float:left }
    .archive__link:last-child { float:right ; margin:0 }
    .archive__img  { height:32rem }
    .archive__more { margin-top:3rem }
     
 
} 
    
@media print { 
     
}