@charset "utf-8";

/* font-family:'Noto Serif KR',serif ; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');

 

/* Visual */
#visual { 
    width:100% ; height:100vh ; min-height:70rem ; max-height:100rem ;
    padding-top:5rem ; margin:0 auto 
}
 #visual_img::before , #visual_img::after { display:block ; overflow:hidden ; width:100% ; height:100% }
#visual_img { 
    display:block ; overflow:hidden ; width:100vw ; height:100vh ;  
    position:fixed ; left:0 ; top:0 ; z-index:-1 ;
}
        
#visual_img::before , #visual_img::after { 
    position:absolute ; left:50% ; top:50% ;  
    content:"" ;
} 
#visual_img::before { 
    background:url(../img/main_visual_mb.jpg) no-repeat center ; background-size:cover ;
    transform:translate(-50%,-50%) scale(1.2) ; 
    animation-name:main_visual ;
    animation-delay:0.5s ;
    animation-duration:30s ;
    animation-iteration-count:infinite ; 
}
@keyframes main_visual { 
    0%   { transform:translate(-50%,-50%) scale(1.2) }   
    45%  { transform:translate(-50%,-50%) scale(1) }       
    50%  { transform:translate(-50%,-50%) scale(1) }    
    95%  { transform:translate(-50%,-50%) scale(1.2) } 
    100% { transform:translate(-50%,-50%) scale(1.2) }   
}
.stop #visual_img::before {
    transform:translate(-50%,-50%) scale(1) ;
    animation-name:none
} 
#visual_img::after  { 
    transform:translate(-50%,-50%) scale(1.01) ;
    background-color:#000000 ; opacity:0.3 ; 
} 
.visual__title { width:17rem ; position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ; z-index:5 }
.visual__title__date , .visual__title__vol , .visual__title__name { 
    display:block ;
    text-align:center ; font-family:'Paperozi',sans-serif ; line-height:100% 
}
.visual__title__date , .visual__title__vol { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
.visual__title__date { font-size:2rem ; font-weight:300 ; margin-bottom:0.2rem }
.visual__title__vol  { font-size:3.6rem ; font-weight:700 ; margin-bottom:1rem }
.visual__title__name {
    font-weight:900 ; font-size:18rem ; color:transparent ;
    -webkit-text-stroke: 2px #ffffff ; opacity:0.8 ;
    margin-bottom:4rem ;
} 

#main_nav_open , #main_nav_open::before { 
    transition:0.3s all ;
    border-radius:0.4rem ; display:block ; box-sizing:border-box }
#main_nav_open {
    display:block ; position:relative ; 
    padding:1.2rem 2.5rem 1.2rem ; margin:auto ;
    font-size:1.6rem ; line-height:120% ; color:#ffffff ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.5) ;
    background-color:rgba(0,0,0,0.2) ;
}
#main_nav_open::before {
    content:"" ; width:100% ; height:100% ; 
    border:solid 1px rgba(0,0,0,0.1) ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}

#main_nav_open:hover { background-color:rgba(0,0,0,0.8) }
#main_nav_open:hover::before { opacity:0 }

.visual__PP , .visual__PP::before , .visual__PP::after { 
    display:block ; width:2rem ; height:2rem ;
    border-radius:100% ; box-sizing:border-box ;
    transition:0.3s all ;
}
.visual__PP , #visual_scroll { position:absolute ; z-index:10 }
.visual__PP { 
    right:1rem ; bottom:1rem ;  ;
    font-size:0 ; color:transparent ; background-color:rgba(0,0,0,0) 
}
.visual__PP:hover { background-color:rgba(0,0,0,0.3) }
.visual__PP::before , .visual__PP::after {
    content:"" ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) 
}
.visual__PP::after  { border:solid 1px #ffffff ; opacity:0.1 }
.visual__PP:hover::after { opacity:0 } 
.visual__PP::before      { background:url(../img/icon_PP.png) no-repeat left top ; opacity:0.5 }
.visual__PP.play::before { background-position:right top }
.visual__PP:hover::before , .visual__PP:focus::before { opacity:1 } 
 
.visual__PP.play { display:none } 
.visual__PP.stop { display:block } 
.stop .visual__PP.play { display:block } 
.stop .visual__PP.stop { display:none } 


#visual_scroll { 
    width:5rem ; height:10rem ; overflow:hidden ;
    left:50% ; bottom:0 ; transform:translateX(-50%) ;
    transition:0.3s all
} 

.sticky #visual_scroll { height:0 ; opacity:0 }

#visual_scroll > b , #visual_scroll > span { display:block }
#visual_scroll > span , #visual_scroll > span::before , #visual_scroll > span::after { 
    display:block ; width:5rem ; height:5rem ; border-radius:100% ;
    box-sizing:border-box ; transition:0.3s all ;
}
#visual_scroll > span::before , #visual_scroll > span::after { 
    content:"" ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
#visual_scroll > span { 
    background-color:rgba(0,0,0,0.05) ; position:relative ;
    font-size:0 ; color:transparent ; text-indent:-99rem 
}
#visual_scroll:hover > span { background-color:rgba(0,0,0,0.3) }
#visual_scroll > span::before { 
    opacity:0.7 ;
    background:url(../img/main_splite.png) no-repeat right top ; background-size:auto 6rem }
#visual_scroll:hover > span::before { opacity:1 }     
#visual_scroll > span::after  { border:solid 1px rgba(255,255,255,0.1) }
#visual_scroll:hover > span::after { opacity:0 }

#visual_scroll > b {
    font-size:1.1rem ; line-height:100% ; color:#ffffff ; 
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; text-align:center ;
    font-weight:300 ; opacity:0.5 ; padding-top:0.4rem ; letter-spacing:0.1rem ;
}
#visual_scroll:hover > b { opacity:1 }
#visual_scroll::after {
    display:block ; content:"" ; width:1px ; height:2.5rem ; 
    background-color:#ffffff ; opacity:0.1  ;
    position:absolute ; left:50% ; bottom:0 ;
}
 
.visual__TOC { display:none }



/* Main */
#ctn , #etc { padding:8rem 0 }
#ctn { background-color:rgba(0,0,0,0.7) }
#etc { background-color:#ffffff }



/* Contents */
.ctn__sub { margin-bottom:4rem }
.ctn__sub:last-child { margin-bottom:0 }
.ctn_title {
    font-size:2.8rem ; line-height:110% ; font-weight:800 ; color:#ffffff ; letter-spacing:0.05rem ;
    font-family:'Paperozi',sans-serif ; text-align:center ; margin-bottom:1.5rem ;
    word-break:keep-all ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
}

.issue__list , .culture__list { 
    width:100% ; margin:auto ; 
    display:flex ; justify-content:center ; flex-wrap:wrap ; align-content:stretch
    
}
.issue__item , .culture__item { width:32% ; min-width:28rem ; max-width:34rem ; margin:0 0.9% 2rem }

.issue__link , .issue__img , .issue__link::after , 
.culture__img , .culture__link { border-radius:0.6rem }
.issue__link { 
    display:block ; height:100% ; position:relative ;
    background-color:#ffffff ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0) ;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 100%);  
} 
.issue__link:hover { box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3) }
.issue__img  { display:block ; width:100% ; height:20rem ; overflow:hidden ; position:relative }
.issue__link::after , .issue__img::before , .culture__link::after , .culture__img::before  { 
    display:block ; content: "" ; width:100% ; height:100% ; box-sizing:border-box ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) 
}
.issue__img::before , .culture__img::before { transform:translate(-50%,-50%) scale(1.01)}
.issue__link::after , .culture__link::after { border:solid 1px rgba(0,0,0,0.1) }
.issue__img::before , .culture__img::before { background:no-repeat center ; background-size:cover }
.issue__link:hover .issue__img::before ,
.culture__link:hover .culture__img::before  { transform:translate(-50%,-50%) scale(1.1) } 

#issue11 .issue__img::before { background-image:url(../img/main_thum11.jpg) }
#issue12 .issue__img::before { background-image:url(../img/main_thum12.jpg) }
#issue13 .issue__img::before { background-image:url(../img/main_thum13.jpg) }
#issue14 .issue__img::before { background-image:url(../img/main_thum14.jpg) }
#issue15 .issue__img::before { background-image:url(../img/main_thum15.jpg) }

#issue21 .issue__img::before { background-image:url(../img/main_thum21.jpg) }
#issue22 .issue__img::before { background-image:url(../img/main_thum22.jpg) }
#issue23 .issue__img::before { background-image:url(../img/main_thum23.jpg) }
#issue24 .issue__img::before { background-image:url(../img/main_thum24.jpg) }
#issue25 .issue__img::before { background-image:url(../img/main_thum25.jpg) }

#issue31 .issue__img::before { background-image:url(../img/main_thum31.jpg) }
#issue32 .issue__img::before { background-image:url(../img/main_thum32.jpg) }
#issue33 .issue__img::before { background-image:url(../img/main_thum33.jpg) }
#issue34 .issue__img::before { background-image:url(../img/main_thum34.jpg) }
#issue35 .issue__img::before { background-image:url(../img/main_thum35.jpg) }
 
.issue__tag {  
    display:inline-block ; padding:0.3rem 1rem 0.5rem ;
    font-size:1.2rem ; line-height:1.8rem ; color:#ffffff ; font-weight:500 ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    background-color:#900123 ; border-radius:0.4rem ;
    position:absolute ; left:50% ; top:20rem ; transform:translate(-50%,-50%) ;
}
.issue__link:hover .issue__tag { background-color:#111111 }
.issue__title , .culture__title { 
    font-size:1.8rem ; line-height:2.4rem ; text-align:center ; word-break:keep-all ; letter-spacing:0 }
.issue__title {
    display:block ; padding:2.5rem 1.5rem 1.5rem ; letter-spacing:-0.1rem ;
    font-weight:500 ;  
}
.issue__title > span {
    font-family:inherit ; color:inherit ; line-height:inherit ; letter-spacing:inherit ;
    font-size:inherit ; font-weight:inherit ; word-break:inherit ;
    border-bottom:solid 1px rgba(0,0,0,0) ;
}
.issue__link:hover .issue__title { color:#111111 }
.issue__link:hover .issue__title > span { border-color:rgba(0,0,0,0.3) }

.issue__link br , .culture_link br , #style_title br { display:none }

.issue__link , .issue__img::before , .issue__tag , .issue__title , .issue__title > span ,
.culture_link , .culture__img::before , .culture__title  { transition:0.3s all }
 
.culture__link { 
    display:block ; width:100% ; height:20rem ; position:relative ;
    box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0) ;
}
.culture__link:hover  { box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3) }
.culture__link::after { content:"" ; border-color:rgba(0,0,0,0.05) }
.culture__img , .culture__img::before { display:block ; width:100% ; height:100% }
.culture__img { position:relative ; overflow:hidden } 
 
#culture41 .culture__img::before { background-image:url(../img/main_thum41.jpg) }
#culture42 .culture__img::before { background-image:url(../img/main_thum42.jpg) }
#culture43 .culture__img::before { background-image:url(../img/main_thum43.jpg) }
#culture44 .culture__img::before { background-image:url(../img/main_thum44.jpg) }
#culture45 .culture__img::before { background-image:url(../img/main_thum45.jpg) }
#culture46 .culture__img::before { background-image:url(../img/main_thum46.jpg) }
#culture47 .culture__img::before { background-image:url(../img/main_thum47.jpg) }
#culture48 .culture__img::before { background-image:url(../img/main_thum48.jpg) }
#culture49 .culture__img::before { background-image:url(../img/main_thum49.jpg) }

.culture__title {
    display:block ; width:100%  ; padding:1rem 1rem 1.2rem ; word-break:keep-all ;
    font-size:1.8rem ; line-height:2.8rem ; color:#ffffff ; font-weight:400 ; text-align:center ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; background-color:rgba(0,0,0,0.5) ; 
    word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis ;
    position:absolute ; left:0 ; bottom:0 ; border-radius:0 0 0.5rem 0.5rem ;
}
.culture__link:hover .culture__title { background-color:rgba(0,0,0,0.8) }



/* Style */
#style_slide , .slide__list { position:relative ; margin:auto }
#style_slide { width:30rem }
#style_title , .slide__list , .slide__page { width:24rem }
#style_title , .slide__page { position:absolute ; left:50% ; ; transform:translateX(-50%) ; z-index:30 }
#style_title { 
    display:block ; padding:0 0.2rem ; letter-spacing:-0.1rem ; word-break:keep-all ;
    font-size:2rem ; line-height:130% ; font-weight:600 ; color:#222222 ; text-align:center ;  
    top:2rem 
}
.slide__list { height:61rem ; z-index:10 }
.slide__item , .slide__link {
    display:block ; width:100% ; height:100% ;
    font-size:0 ; color:transparent
}
.slide__item { position:absolute ; left:0 ; top:0 ; opacity:0 ; z-index:4 }
.slide__item.current { opacity:1 ; z-index:5 } 
.slide__link { overflow:hidden ; border-radius:0.6rem ; background:no-repeat center ; background-size:cover }
#slide1 .slide__link { background-image:url(../img/main_style1.jpg) }
#slide2 .slide__link { background-image:url(../img/main_style2.jpg) }
#slide3 .slide__link { background-image:url(../img/main_style3.jpg) }
#slide4 .slide__link { background-image:url(../img/main_style4.jpg) }
#slide5 .slide__link { background-image:url(../img/main_style5.jpg) }
#slide6 .slide__link { background-image:url(../img/main_style6.jpg) }
#slide7 .slide__link { background-image:url(../img/main_style7.jpg) }
#slide8 .slide__link { background-image:url(../img/main_style8.jpg) }
#slide9 .slide__link { background-image:url(../img/main_style9.jpg) }

.slide__page { bottom:1rem ; text-align:center ; font-size:0 ; padding:0 3rem }
.slide__page__btn , .slide__btn , .slide__btn::before , .slide__PP__btn , .slide__PP__btn::before , .slide__PP__btn::after { transition:0.3s all }
.slide__page__btn , .slide__btn { overflow:hidden ; font-size:0 ; color:transparent ; text-indent:-99rem }
.slide__page__btn {
    display:inline-block ; width:0.8rem ; height:0.8rem ; border-radius:2rem ; margin:0.1rem 0.5rem ; 
    background-color:#111111 ; opacity:0.2 ; 
}
.slide__page__btn:hover   { opacity:0.6 }
.slide__page__btn.current { width:2.6rem ; opacity:0.6 }
 
.slide__btn { 
    display:block ; width:3rem ; height:3rem ; 
    position:absolute ; top:50% ; transform:translateY(-50%) ; 
}
.slide__btn.prev { left:0 }
.slide__btn.next { right:0 }

.slide__btn::before {
    display:block ; content:"" ; width:1rem ; height:1rem ;
    border:solid 1px #ffffff ; opacity:0.5 ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) rotate(45deg) ;
}
.slide__btn:hover::before , .slide__btn:focus::before { opacity:1 ; transform:translate(-50%,-50%) rotate(45deg) scale(1.2) }
.slide__btn.prev::before { border-top:none ; border-right:none } 
.slide__btn.next::before { border-bottom:none ; border-left:none } 

.slide__PP , .slide__PP__btn , .slide__PP__btn::before , .slide__PP__btn::after { display:block ; width:2rem ; height:2rem }
.slide__PP__btn , .slide__PP__btn::before , .slide__PP__btn::after { border-radius:100% }
.slide__PP { position:absolute ; right:3.5rem ; bottom:0.5rem ; z-index:31 }

.slide__PP__btn { 
    overflow:hidden ; font-size:0 ; color:transparent ; text-indent:-99rem ; 
    position:relative ; background-color:rgba(255,255,255,0) }
.slide__PP__btn:hover , .slide__PP__btn:focus { background-color:#ffffff }    
.slide__PP__btn::before , .slide__PP__btn::after { 
    content:"" ; box-sizing:border-box ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
} 
.slide__PP__btn::before { background:url(../img/icon_PP.png) no-repeat center ; opacity:0.5 }
.slide__PP__btn::after  { border:solid 1px rgba(0,0,0,0.1) }
.slide__PP__btn.play::before  { background-position:right bottom }
.slide__PP__btn.pause::before { background-position:left bottom } 
.slide__PP__btn:hover::before , .slide__PP__btn:focus::before { opacity:1 }
.slide__PP__btn:hover::after  { opacity:0 }  
.slide__PP__btn.play , .play .slide__PP__btn.pause { display:none }
.play .slide__PP__btn.play { display:block }
 


/* Etc */
#coverStory { width:96% ; max-width:93rem ; margin:0 auto 3rem ; position:relative }
.cs__img { display:block ; width:100% ; height:38rem ; position:relative }
.cs__img::before , .cs__img::after {
    display:block ; overflow:hidden ; content:"" ; width:100% ; height:100% ; 
    box-sizing:border-box ; border-radius:0.6rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.cs__img::before { background:url(../img/main_coverstory.jpg) no-repeat center ; background-size:cover }
.cs__img::after  { border:solid 1px rgba(0,0,0,0.1) }
.cs__title { 
    position:absolute ; left:50% ; bottom:3rem  ; transform:translateX(-50%) ;
    width:100% ; text-align:center ; font-size:0 ;
}
.cs__logo > b , .cs__logo > span , .cs__txt span , .cs__txt b { color:rgba(0,0,0,0.8) }
.cs__logo > b , .cs__logo > span { 
    font-family:'Paperozi',sans-serif ; font-size:2.2rem ; line-height:100% ;
    display:inline-block ;
}
.cs__logo { font-size:0 ; text-align:inherit ; font-size:inherit ; margin-bottom:2rem }
.cs__logo > b { font-weight:900 ; margin-right:0.5rem }
.cs__logo > span { font-weight:400 }
.cs__txt { display:block ; width:24rem ; height:7.3rem ; position:relative ; margin:auto ; text-align:left }
.cs__txt span , .cs__txt b { 
    font-family:'Noto Serif KR',serif ; line-height:100% ; word-break:keep-all ;
    letter-spacing:-0.1rem ; display:inline-block ;
}
.cs__txt span { font-size:2rem ; padding-top:1rem }
.cs__txt span:first-child { margin-right:0.5rem }
.cs__txt b    { font-size:3.4rem ; letter-spacing:-0.15rem }
.cs__txt b:last-child {
    display:block ; text-align:right ;
    position:absolute ; right:0 ; bottom:0 ;
}

#fn_btns  { width:100% ; text-align:center ; font-size:0 ; margin-bottom:3rem }
.fn__item , .fn__link { width:25rem }
.fn__item { display:inline-block ; margin:0.5rem }
.fn__link , .fn__link::after      { border-radius:0.6rem }
.fn__link , .fn__title , .fn__txt { transition:0.3s all }
.fn__link {
    display:block ; padding:2rem 0.5rem 2rem 8.5rem ;
    position:relative ; background-color:#ffffff ;
}
.fn__link::after {
    display:block ; content:"" ; width:100% ; height:100% ; 
    border:solid 1px rgba(0,0,0,0.1) ; box-sizing:border-box ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.fn__title , .fn__txt { display:block ; width:100% ; word-break:keep-all ; text-align:left }
.fn__title { font-size:1.8rem ; line-height:100% ; color:#111111 ; font-weight:800 ; margin-bottom:0.7rem }
.fn__txt   { font-size:1.4rem ; line-height:130% ; letter-spacing:-0.05rem }

.fn__link:hover .fn__title ,
.fn__link:hover .fn__txt { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }

.fn__icon { 
    display:block ; width:6rem ; height:6rem ; border-radius:100% ; overflow:hidden ;
    position:absolute ; left:1.5rem ; top:2rem ; 
    background:url(../img/main_splite.png) no-repeat 0 0 ; background-size:auto 6rem ;
}

.icon1 .fn__icon { background-position:0 0 }
.icon2 .fn__icon { background-position:-6rem 0 }
.icon3 .fn__icon { background-position:-12rem 0 }
.icon4 .fn__icon { background-position:-18rem 0 }

.fn__link.icon1:hover { background-color:#025e8f }
.fn__link.icon2:hover { background-color:#9daf38 }
.fn__link.icon3:hover { background-color:#203449 }
.fn__link.icon4:hover { background-color:#025e8f }
 
 
#kumm_about {
    width:96% ; max-width:51rem  ; margin:auto ; font-weight:500 ; letter-spacing:-0.05rem ;
    font-size:1.8rem ; line-height:160% ; word-break:keep-all ; text-align:center ;
}
#kumm_about > b { font-weight:800 ; letter-spacing:inherit ; letter-spacing:inherit ; word-break:inherit }




/* PC */
@media all and (min-width:1100px){
 
    /* Visual */
    #visual { padding-top:0 }
    #visual_img::before { background-image:url(../img/main_visual_pc.jpg) }

    #visual_img { 
        position:fixed ; left:0 ; top:0 ; z-index:-1 ;
        width:100vw ; height:100vh }
    #visual_img::after {
        opacity:1 ;
        background:linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 10%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 100%); 
    }

    .visual__container { width:96% ; max-width:150rem }
    .visual__container , .visual__title { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }

    .visual__title { width:60rem ; z-index:5 }
    .visual__title__name { font-size:30rem ; text-align:center ; width:100% ; margin-bottom:3rem }

    #main_nav_open { padding:1.6rem 4rem ; }

    .visual__title__date , .visual__title__vol { 
        width:16rem ; text-align:left ; margin:0 ; 
        position:absolute ; right:0 ; bottom:auto ;
    } 
    .visual__title__date { font-size:2rem ; top:25.5rem }
    .visual__title__vol  { font-size:4rem ; top:21rem }

    .visual__TOC { display:block ; width:40% ; max-width:60rem ; position:relative }
    .visual__TOC__sub { margin-bottom:3rem }
    .visual__TOC__sub:last-child { margin-bottom:0 }
    .visual__TOC__title , .visual__TOC__list a { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
    .visual__TOC__title { 
        font-family:'Paperozi',sans-serif ; font-size:1.8rem ; line-height:100% ; font-weight:600 ;
        margin-bottom:0.5rem ;
    }
    .visual__TOC__list a , .visual__TOC__list a::after { transition:0.3s all }
    .visual__TOC__list a { 
        display:inline-block ; padding:0.4rem 0.1rem ;
        font-size:1.6rem ; line-height:2.4rem ; font-weight:300 ;
        position:relative ; opacity:0.9 ;
    }
    .visual__TOC__list a:hover { opacity:1 }
    .visual__TOC__list a::after {
        display:block ; overflow:hidden ; content:"" ; width:0 ; height:1px ;
        background-color:#ffffff ;
        position:absolute ; left:0 ; bottom:0 ;
    }
    .visual__TOC__list a:hover::after { width:100% } 
    .visual__TOC , #visual_scroll { z-index:10 }



    /* Main */
    #ctn , #etc { padding:10rem 0 }



    /* Contents */
    .ctn__container , .etc__container { width:96% ; max-width:150rem ; margin:auto ; position:relative }
    .ctn__container { padding:0 34rem 0 0 } 
    .ctn__sub { margin:0 }
    #issue.ctn__sub { margin-bottom:6.5rem }
    #style.ctn__sub , #style_slide { width:34rem }
    #style.ctn__sub { position:absolute ; right:0 ; top:0 }
    #style_title , .slide__list , .slide__page { width:28rem }

    .ctn_title { 
        font-size:3rem ; line-height:100% ; text-align:left ; font-weight:700 ;
        margin-bottom:1.5rem ; letter-spacing:0.05rem ;
    } 
    
    .issue__list , .culture__list { width:91.3793% ; justify-content:space-between ; margin:0 }
    .issue__item , .culture__item { width:32.0754% ; min-width:auto ; margin:0 }

    .issue__title { font-size:2rem ; line-height:150% ; text-align:left ; padding-left:2rem ; padding-right:2rem ; letter-spacing:-0.15rem }
    .issue__tag   { left:2rem ; transform:translate(0,-50%) }
 
    #style .ctn_title { padding-left:3rem }
    .issue__link br , .culture_link br , #style_title br { display:block }
 


    /* Etc */
    #coverStory { width:96% ; max-width:93rem ; margin:0 }
    .etc__container { padding:0 51rem 0 0 }
    #fn_btns , #kumm_about { position:absolute ; right:0 ; width:51rem ; padding:0 ; margin:0 }
    #fn_btns { top:0 }
    #fn_btns::after { display:block ; content:"" ; clear:both }
    #kumm_about { bottom:0 ; text-align:left }

    .fn__item { margin:0 1rem 1rem 0 }
    .fn__item:nth-child(2n) { margin-right:0 } 

    .cs__img { width:100% } 
    .cs__title { width:43rem ; height:9rem }
    .cs__logo , .cs__txt { position:absolute ; margin:0 ; padding:0 }
    .cs__logo { top:0.9rem ; left:0 }
    .cs__txt  { top:0 ; right:0 }
    .cs__logo::after {
        display:block ; content:"" ; width:1px ; height:2rem ;
        background-color:rgba(0,0,0,0.2) ; right:-1.5rem ;
        position:absolute ; top:55% ; transform:translateY(-50%)  ;
    }

    #kumm_about { line-height:180% }

 
}



/* PRINT */
@media print {}