@charset "utf-8";
#main { margin-bottom:5rem }

/* SUB VISUAL */ 
#visual , .visual__title__box , .visual__name__box { width:100% ; box-sizing:border-box }
.visual__title__box { height:35rem ; position:relative ; overflow:hidden }
.visual__title__box::before , .visual__title__box::after {
    width:100% ; height:100% ; display:block ; content:"" ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%);
}
 
.visual__btns , .visual__btn { width:2rem ; height:2rem }
.visual__btns { position:absolute ; right:1rem ; bottom:1rem ; z-index:7 }
.visual__btn  { 
    display:block ; overflow:hidden ; border-radius:100% ; opacity:0.5 ; transition:0.3s all ;
    font-size:0 ; color:transparent ;
    background:url(../img/icon_PP.png) no-repeat left top rgba(0,0,0,0.5) ; background-size:auto 2rem ; 
}
.visual__btn:hover , .visual__btn:focus { opacity:1 ; background-color:rgba(0,0,0,0.7) ;}
.visual__btn.play  { display:none ; background-position:right top }
#visual.paused .visual__title__box::before { animation-play-state:paused }

#visual.paused .visual__btn.play { display:block }
#visual.paused .visual__btn.stop { display:none }

.visual__title__box::before { 
    background:no-repeat center ; background-size:cover ; z-index:4 ;
    background:no-repeat center ; background-size:cover ;
    transform:translate(-50%,-50%) scale(1.2) ; 
    animation-name:visual_ani ;
    animation-delay:0.5s ;
    animation-duration:60s ;
    animation-iteration-count:infinite  
}

@keyframes visual_ani { 
    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) }   
}

.visual__title__box::after { background-color:rgba(0,0,0,0.5) ; z-index:5 }

.visual__title__box::before  { background-image:url(../img_sub/visual_MB.jpg) }

#SS11 .visual__title__box::before  { background-image:url(../img_sub/visual_11_MB.jpg) }
#SS12 .visual__title__box::before  { background-image:url(../img_sub/visual_12_MB.jpg) }
#SS13 .visual__title__box::before  { background-image:url(../img_sub/visual_13_MB.jpg) }
#SS14 .visual__title__box::before  { background-image:url(../img_sub/visual_14_MB.jpg) }
#SS15 .visual__title__box::before  { background-image:url(../img_sub/visual_15_MB.jpg) }
#SS16 .visual__title__box::before  { background-image:url(../img_sub/visual_16_MB.jpg) }

#SS21 .visual__title__box::before  { background-image:url(../img_sub/visual_21_MB.jpg) }
#SS22 .visual__title__box::before  { background-image:url(../img_sub/visual_22_MB.jpg) }
#SS23 .visual__title__box::before  { background-image:url(../img_sub/visual_23_MB.jpg) }
#SS24 .visual__title__box::before  { background-image:url(../img_sub/visual_24_MB.jpg) }
#SS25 .visual__title__box::before  { background-image:url(../img_sub/visual_25_MB.jpg) }
#SS26 .visual__title__box::before  { background-image:url(../img_sub/visual_26_MB.jpg) }

#SS31 .visual__title__box::before  { background-image:url(../img_sub/visual_31_MB.jpg) }
#SS32 .visual__title__box::before  { background-image:url(../img_sub/visual_32_MB.jpg) }
#SS33 .visual__title__box::before  { background-image:url(../img_sub/visual_33_MB.jpg) }
#SS34 .visual__title__box::before  { background-image:url(../img_sub/visual_34_MB.jpg) }
#SS35 .visual__title__box::before  { background-image:url(../img_sub/visual_35_MB.jpg) }
#SS36 .visual__title__box::before  { background-image:url(../img_sub/visual_36_MB.jpg) }

#SS41 .visual__title__box::before  { background-image:url(../img_sub/visual_41_MB.jpg) }
#SS42 .visual__title__box::before  { background-image:url(../img_sub/visual_42_MB.jpg) }
#SS43 .visual__title__box::before  { background-image:url(../img_sub/visual_43_MB.jpg) }
#SS44 .visual__title__box::before  { background-image:url(../img_sub/visual_44_MB.jpg) }
#SS45 .visual__title__box::before  { background-image:url(../img_sub/visual_45_MB.jpg) }
#SS46 .visual__title__box::before  { background-image:url(../img_sub/visual_46_MB.jpg) }

#SS51 .visual__title__box::before  { background-image:url(../img_sub/visual_51_MB.jpg) }
#SS52 .visual__title__box::before  { background-image:url(../img_sub/visual_52_MB.jpg) }
#SS53 .visual__title__box::before  { background-image:url(../img_sub/visual_53_MB.jpg) }
#SS54 .visual__title__box::before  { background-image:url(../img_sub/visual_54_MB.jpg) }
#SS55 .visual__title__box::before  { background-image:url(../img_sub/visual_55_MB.jpg) }
#SS56 .visual__title__box::before  { background-image:url(../img_sub/visual_56_MB.jpg) }

.visual__title__inner , .visual__name__inner { width:90% ; margin:auto ; text-align:center }
.visual__title__inner { position:absolute ; left:50% ; bottom:4rem ; transform:translateX(-50%) ; z-index:6 }
.visual__tag {
    display:inline-block ; overflow:hidden ; padding:0 1.5rem 0.2rem ; border-radius:2rem ;
    font-size:1.6rem ; line-height:2.4rem ; font-weight:500 ; color:#ffffff ; 
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    background:linear-gradient(30deg,#f78f1e,#f75b1e) ;
    margin-bottom:1.5rem ; 
}

#SS21 .visual__tag , #SS22 .visual__tag , #SS23 .visual__tag , #SS24 .visual__tag ,
#SS25 .visual__tag , #SS26 .visual__tag { background:linear-gradient(30deg,#2d52ad,#412cb9) } 

#SS31 .visual__tag , #SS32 .visual__tag , #SS33 .visual__tag , #SS34 .visual__tag , #SS35 .visual__tag , #SS36 .visual__tag ,
#SS41 .visual__tag , #SS42 .visual__tag , #SS43 .visual__tag , #SS44 .visual__tag , 
#SS45 .visual__tag , #SS46 .visual__tag { background:linear-gradient(30deg,#9cdc24,#93c13d) }

#SS51 .visual__tag , #SS52 .visual__tag , #SS53 .visual__tag , #SS54 .visual__tag , 
#SS55 .visual__tag , #SS56 .visual__tag { background:linear-gradient(30deg,#00aeef,#0cafec) }

.visual__title {
    font-size:3rem ; line-height:4rem ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    font-family:'Nanum Myeongjo',serif ; word-break:keep-all ; font-weight:500 ; letter-spacing:-0.1rem ; 
}
.visual__title br { display:none }

.visual__name__box { 
    padding:1rem 0 1.2rem ;
    background:url(../img/main_bg_net.png) repeat center #227956 ;
    background-color:linear-gradient(30deg,#0e5e47,#227956,#0e5e47) ;
}
.visual__writer , .visual__editor {
    display:inline-block ; margin:0rem 2rem ;
    font-size:1.8rem ; line-height:2.8rem ; color:#ffffff ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
}
 


/* BREADCRUMB */
.breadcrumb , .breadcrumb__inner { width:100% ; box-sizing:border-box }  
.breadcrumb { border-bottom:solid 1px rgba(0,0,0,0.1) ; margin-bottom:7rem  }
.breadcrumb__inner { padding:1rem ; font-size:0 ; overflow:hidden } 
.breadcrumb__item {
    display:inline-block ; position:relative ; 
    font-size:1.4rem ; line-height:1.8rem  ;
    padding-right:0 2rem 0.2rem 0 ; margin-right:2rem ; 
} 
.breadcrumb__item:last-child { color:#111111 ; font-weight:500 }
.breadcrumb__item:last-child { margin-right:0 ; padding-right:0 }
.breadcrumb__item::after {
    display:block ; content:"" ; width:0.5rem ; height:0.5rem ;
    border:solid 1px rgba(0,0,0,0.5) ; border-left:none ; border-bottom:none ;
    position:absolute ; right:-1.2rem ; top:50% ; transform:translateY(-50%) rotate(45deg) ;
} 
.breadcrumb__item:last-child:after { display:none }

.breadcrumb__item.depth1 , .breadcrumb__item.depth1::before {  display:block ; width:2rem ; height:2rem  }
.breadcrumb__item.depth1 { 
    float:left ;
    font-size:0 ; color:transparent ; line-height:0 ;
} 
.breadcrumb__item.depth1::before {
    content:"" ; opacity:0.6 ;
    background:url(../img/icon_home.png) no-repeat center ; background-size:cover ;
}



/* SECTION */
.SS__section , .SS__sub { box-sizing:border-box ; margin:auto }
.SS__section { 
    width:98% ; max-width:120rem ; 
    margin-bottom:8rem ; padding:0 2rem }
.SS__section:last-child { margin-bottom:0 } 

.SS__p {
    font-size:1.8rem ; line-height:3.4rem ; letter-spacing:-0.05rem ; text-align:justify ;
    margin-bottom:2.5rem ; 
}
.SS__p:last-child { margin-bottom:0 }

.SS__sub { margin-bottom:6rem } 
.SS__sub:last-child { margin-bottom:0 }
.SS__sub.dot { padding-bottom:6rem ; border-bottom:dashed 1px rgba(0,0,0,0.15) }
.SS__sub.dot:last-child { margin-bottom:0 ; padding-bottom:0 ; ; border-bottom:none }

.SS__p a { font-size:inherit ; line-height:inherit ; font-weight:inherit ; color:inherit ; word-break:inherit }
.SS__p a:hover , .SS__p a:focus { text-decoration:underline }
  
.SS_lead , .SS_lead span { text-align:justify }
.SS_lead span { 
    font-size:2rem ; line-height:4rem ; font-family:'Noto Serif KR',serif ;  
    border-bottom:solid 1px rgba(0,0,0,0.1) ; padding-bottom:0.2rem ; 
    letter-spacing:-0.05rem ;
}
.SS_lead { margin-bottom:4rem }
.SS_lead:last-child { margin-bottom:0 }




/* TITLE */
.SS__title__h3 { margin-bottom:2rem }
.SS__title__h3 > b { 
    display:inline-block ; position:relative ; padding-right:1.5rem ;
    font-size:2.8rem ; line-height:3.6rem ; font-weight:700 ; color:#111111 ; letter-spacing:-0.15rem ;
}
.SS__title__h3 > b::after {
    display:block ; content:"" ; width:0.7rem ; height:0.7rem ; 
    border:solid 0.4rem #f78b1e ; border-left:none ; border-bottom:none ;
    position:absolute ; right:0 ; top:0.2rem
}

.SS__title__h4 {
    font-size:2.2rem ; line-height:2.8rem ; font-weight:700 ; color:#111111 ;
    margin-bottom:1.5rem ;
}
.SS__title__h4 > b {
    display:inline-block ; overflow:hidden ; padding:0.1rem 0.7rem 0.3rem ; border-radius:0.4rem ;
    font-size:1.6rem ; line-height:2.2rem ; font-weight:500 ; color:#ffffff ; 
    background-color:#111111 ; margin-right:0.5rem ;
    position:relative ; top:0.2rem
}



/* IMG */
.SS__img , .SS__img img , .SS__imgs  { width:100% ; box-sizing:border-box }
.SS__img , .SS__imgs { margin:0 auto 4rem }
.SS__img:last-child  { margin-bottom:0 }
.SS__img img { border-radius:0.6rem ; overflow:hidden } 
.SS__img.line img , .SS__img.box img { border:solid 1px rgba(0,0,0,0.1) }

.SS__img__caption , .SS__bar__caption , .SS__center__caption { 
    display:block ; padding-top:0.8rem ;
    font-size:1.8rem ; line-height:2.6rem ; word-break:keep-all ;
} 
.SS__img__caption a:hover , .SS__bar__caption a:hover { text-decoration:underline }
.SS__img__caption > b {
    display:inline-block ; margin:0.2rem 0.2rem 0 0 ;
    font-size:1.4rem ; line-height:1.8rem ; color:#ffffff ; font-weight:500 ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; 
    background:linear-gradient(30deg,#f78f1e,#f75b1e) ; padding:0.2rem 1rem 0.4rem ; border-radius:0.4rem ; 
}

#SS21 .SS__img__caption > b , #SS22 .SS__img__caption > b , #SS23 .SS__img__caption > b ,
#SS24 .SS__img__caption > b , #SS25 .SS__img__caption > b , #SS26 .SS__img__caption > b { background:linear-gradient(30deg,#2d52ad,#412cb9) }

#SS31 .SS__img__caption > b , #SS32 .SS__img__caption > b , #SS33 .SS__img__caption > b ,
#SS34 .SS__img__caption > b , #SS35 .SS__img__caption > b , #SS36 .SS__img__caption > b ,
#SS41 .SS__img__caption > b , #SS42 .SS__img__caption > b , #SS43 .SS__img__caption > b ,
#SS44 .SS__img__caption > b , #SS45 .SS__img__caption > b , #SS46 .SS__img__caption > b { background:linear-gradient(30deg,#9cdc24,#93c13d) }

#SS51 .SS__img__caption > b , #SS52 .SS__img__caption > b , #SS53 .SS__img__caption > b ,
#SS54 .SS__img__caption > b , #SS55 .SS__img__caption > b , #SS56 .SS__img__caption > b { background:linear-gradient(30deg,#00aeef,#0cafec) }


.SS__bar__caption { position:relative ; padding-left:0.8rem }
.SS__bar__caption::before {
    width:0.2rem ; height:1.4rem ; display:block ; content:"" ;
    background-color:rgba(0,0,0,0.2) ;
    position:absolute ; left:0 ; top:1.5rem
}
.SS__center__caption { text-align:center ; width:100% ; overflow:hidden ; box-sizing:border-box }

.SS__imgs { overflow:hidden }
.SS__img.left , .SS__img.right { max-width:59rem ; margin:0 auto 0.5rem }
.SS__imgs .SS__bar__caption { padding-left:0 ; text-align:center }
.SS__imgs .SS__bar__caption::before { display:none } 
.SS__imgs > .SS__bar__caption { padding-top:0.3rem }
.SS__img.left .SS__bar__caption { margin-bottom:3rem }
.SS__img.left { margin-bottom:3rem }



/* NOTE */
.note , .note__title , .note__list { width:100% ; box-sizing:border-box }
.note { 
    border:solid 1px rgba(0,0,0,0.1) ; overflow:hidden ; border-radius:0.6rem ;
    border-top:solid 0.3rem #f78f1e ; 
    padding:1.5rem ; margin-bottom:3rem   
}  
.note:last-child { margin-bottom:0 }
.note__title { 
    font-size:2rem ; line-height:2.4rem ; color:#111111 ; font-weight:600 ;
    border-bottom:dashed 1px rgba(0,0,0,0.15) ; padding-bottom:1rem ; margin-bottom:1rem ;
}
.SS__sup { font-size:70% ; line-height:3rem ; color:inherit ; font-weight:inherit ; word-break:inherit }
.note__list li { margin-bottom:1rem }
.note__list li:last-child { margin-bottom:0 } 
.note__list.dot li { position:relative ; padding-left:1rem } 
.note__list.dot li::before { 
    width:0.3rem ; height:0.3rem ; display:block ; content:"" ;
    background-color:#000000 ; opacity:0.2 ;
    position:absolute ; left:0 ; top:1.7rem
}
 


/* QnA*/
.qa__sub { margin-bottom:8rem }
.qa__sub:last-child { margin-bottom:0 }
.qa__q , .qa__a { padding-left:3rem ; position:relative }
.qa__icon__Q , .qa__icon__A , .qa__icon__Q > span , .qa__icon__A > span { 
    width:2.4rem ; height:2.4rem ; display:block ; overflow:hidden ;
    position:absolute ;
}
.qa__icon__Q , .qa__icon__A { 
    left:0 ;
    border-radius:0.4rem ; box-sizing:border-box ; background-color:#cccccc }
.qa__icon__Q > span , .qa__icon__A > span { 
    font-style:italic ;
    font-size:2.2rem ; line-height:2.2rem ; font-weight:700 ; color:#ffffff ; text-align:right ;
    right:-0.1rem ; bottom:0 ;
}  
.qa__q { 
    font-size:2.2rem ; line-height:3rem ; font-weight:700 ; color:#111111 ;
    word-break:keep-all ; margin-bottom:1rem ;
}
.qa__icon__Q { top:0.3rem ; background-color:#f78f1e }
.qa__icon__A { top:0.6rem }



/* PREV+NEXT */
.etc__box , .PN__box , .PN__item , .PN__link { width:100% ; box-sizing:border-box }
.etc__box { padding:0 2rem ; margin-bottom:6rem }
.PN__item { margin-bottom:0.5rem ; position:relative }
.PN__link { 
    display:block ; padding:1rem 1rem 1.2rem 6rem ; box-sizing:border-box ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:5rem ;
}
.PN__link:hover , .PN__link:focus { border-color:rgba(0,0,0,0.3)}
.PN__link span { 
    display:block ;
    font-size:1.8rem ; line-height:2.6rem ; font-weight:600 ; 
    word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis
}
.PN__link b , .PN__link b::before , .PN__link span , .PN__link { transition:0.3s all }
.PN__link b {
    width:5rem ; height:5rem ; display:block ; overflow:hidden ;
    border-radius:100% ; background-color:#f78f1e ;
    font-size:0 ; color:transparent ; 
    position:absolute ; left:0 ; top:0
}
.PN__link:hover b , .PN__link:focus b { background-color:#111111 }
.PN__link b::before {
    display:block ; content:"" ; width:1rem ; height:1rem ;
    position:absolute ; top:50% ; transform:translate(-50%,-50%) rotate(45deg) ;
    border:solid 0.2rem #ffffff
} 
.PN__link:hover b::before , .PN__link:focus b::before { transform:translate(-50%,-50%) rotate(45deg) scale(1.2) }
.prev .PN__link b::before { left:55% ; border-top:none ; border-right:none }
.next .PN__link b::before { left:45% ; border-bottom:none ; border-left:none } 
.PN__link:hover span , .PN__link:focus span { color:#111111 }





/* PC **********/
@media all and (min-width:1100px){
    
    /* SUB VISUAL */ 
    #visual { 
        margin:auto ; padding-top:7rem ;
        width:98% ; max-width:140rem ; position:relative }
    .visual__title__box , .visual__name__box { height:40rem ; overflow:hidden }
    .visual__title__box { 
        border-radius:20rem ;
        position:absolute ; left:50% ; top:0 ; transform:translateX(-50%) }

    .visual__title__box::after { background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 100%) }

    .visual__name__box    { border-radius:13rem 13rem 20rem 20rem }
    .visual__title__inner { bottom:4rem }
    .visual__tag   { margin-bottom:2rem }
    .visual__title { font-size:5rem ; line-height:6.4rem ; letter-spacing:-0.3rem }
    .visual__title br { display:block }

    .visual__title__box::before  { background-image:url(../img_sub/visual.jpg) }

    #SS11 .visual__title__box::before  { background-image:url(../img_sub/visual_11.jpg) }
    #SS12 .visual__title__box::before  { background-image:url(../img_sub/visual_12.jpg) }
    #SS13 .visual__title__box::before  { background-image:url(../img_sub/visual_13.jpg) }
    #SS14 .visual__title__box::before  { background-image:url(../img_sub/visual_14.jpg) }
    #SS15 .visual__title__box::before  { background-image:url(../img_sub/visual_15.jpg) }
    #SS16 .visual__title__box::before  { background-image:url(../img_sub/visual_16.jpg) }
    
    #SS21 .visual__title__box::before  { background-image:url(../img_sub/visual_21.jpg) }
    #SS22 .visual__title__box::before  { background-image:url(../img_sub/visual_22.jpg) }
    #SS23 .visual__title__box::before  { background-image:url(../img_sub/visual_23.jpg) }
    #SS24 .visual__title__box::before  { background-image:url(../img_sub/visual_24.jpg) }
    #SS25 .visual__title__box::before  { background-image:url(../img_sub/visual_25.jpg) }
    #SS26 .visual__title__box::before  { background-image:url(../img_sub/visual_26.jpg) }
    
    #SS31 .visual__title__box::before  { background-image:url(../img_sub/visual_31.jpg) }
    #SS32 .visual__title__box::before  { background-image:url(../img_sub/visual_32.jpg) }
    #SS33 .visual__title__box::before  { background-image:url(../img_sub/visual_33.jpg) }
    #SS34 .visual__title__box::before  { background-image:url(../img_sub/visual_34.jpg) }
    #SS35 .visual__title__box::before  { background-image:url(../img_sub/visual_35.jpg) }
    #SS36 .visual__title__box::before  { background-image:url(../img_sub/visual_36.jpg) }
    
    #SS41 .visual__title__box::before  { background-image:url(../img_sub/visual_41.jpg) }
    #SS42 .visual__title__box::before  { background-image:url(../img_sub/visual_42.jpg) }
    #SS43 .visual__title__box::before  { background-image:url(../img_sub/visual_43.jpg) }
    #SS44 .visual__title__box::before  { background-image:url(../img_sub/visual_44.jpg) }
    #SS45 .visual__title__box::before  { background-image:url(../img_sub/visual_45.jpg) }
    #SS46 .visual__title__box::before  { background-image:url(../img_sub/visual_46.jpg) }
    
    #SS51 .visual__title__box::before  { background-image:url(../img_sub/visual_51.jpg) }
    #SS52 .visual__title__box::before  { background-image:url(../img_sub/visual_52.jpg) }
    #SS53 .visual__title__box::before  { background-image:url(../img_sub/visual_53.jpg) }
    #SS54 .visual__title__box::before  { background-image:url(../img_sub/visual_54.jpg) }
    #SS55 .visual__title__box::before  { background-image:url(../img_sub/visual_55.jpg) }
    #SS56 .visual__title__box::before  { background-image:url(../img_sub/visual_56.jpg) }

    .visual__icon { 
        display:block ; position:absolute ; left:50% ; top:57rem ; transform:translate(-50%,-50%) ;
        width:23rem ; height:28rem ; margin-left:-70rem ; 
        background:url(../img/main_icon_apple.png) no-repeat center ; background-size:cover ; 
    } 

    #SS21 .visual__icon , #SS22 .visual__icon , #SS23 .visual__icon , 
    #SS24 .visual__icon , #SS25 .visual__icon , #SS26 .visual__icon {
        width:17rem ; height:16rem ; background-image:url(../img/main_icon_light.png) ;
        top:59rem ; margin-left:-67rem ;
    } 

    #SS31 .visual__icon , #SS32 .visual__icon , #SS33 .visual__icon , 
    #SS34 .visual__icon , #SS35 .visual__icon , #SS36 .visual__icon ,
    #SS41 .visual__icon , #SS42 .visual__icon , #SS43 .visual__icon , 
    #SS44 .visual__icon , #SS45 .visual__icon , #SS46 .visual__icon {
        width:22rem ; height:25rem ; background-image:url(../img/main_icon_cup.png) ;
        top:60rem ; margin-left:-67rem ;
    } 
 
    #SS51 .visual__icon , #SS52 .visual__icon , #SS53 .visual__icon , 
    #SS54 .visual__icon , #SS55 .visual__icon , #SS56 .visual__icon {
        width:17rem ; height:26rem ; background-image:url(../img/main_icon_roket2.png) ;
        top:60rem ; margin-left:-67rem ;
    } 
 


    .visual__name__inner { 
        width:90% ; overflow:hidden ;
        position:absolute ; left:50% ; bottom:2.4rem ; transform:translateX(-50%) }
    .visual__writer , .visual__editor { 
        width:50% ; float:left ; box-sizing:border-box ;
        font-size:2rem ; margin:0 ; padding:0 
    } 
    .visual__writer { padding-right:3rem ; text-align:right } 
    .visual__editor { padding-left:3rem ; text-align:left } 

    .visual__btns { 
        position:absolute ; right:13% ; bottom:1rem ; z-index:7 ; 
    }

 

    /* BREADCRUMB */
    .breadcrumb { border:none }
    .breadcrumb__inner { padding:1.5rem 0 1.7rem ; margin:auto ; max-width:100rem }
    .breadcrumb__item { font-size:1.6rem }
    .breadcrumb__item::after { width:0.6rem ; height:0.6rem ; top:54% }
 
 

    /* IMG */
    .SS__img.left , .SS__img.right { margin:0 ; max-width:49.16% }
    .SS__img.left  { float:left }
    .SS__img.right { float:right }
    .SS__imgs .SS__bar__caption { padding-left:0.8rem ; text-align:left }
    .SS__imgs .SS__bar__caption::before { display:block }
    .SS__imgs > .SS__bar__caption { width:100% ; float:left }
    .SS__imgs > .SS__bar__caption::before { top:1rem }
    .SS__img.left .SS__bar__caption { margin-bottom:0 }
    .SS__center__caption {  padding:1rem 0.5rem 1.2rem ; border-bottom:solid 1px rgba(0,0,0,0.1) }
     
 

    /* SECTION */
    .SS__section { padding:0 }



    /* TITLE */
    .SS__title__h3 > b { font-size:3.2rem ; line-height:4rem ; padding-right:1.8rem }
    .SS__title__h3 > b::after { width:0.9rem ; height:0.9rem ; top:0 }
    
    #SS21 .SS__title__h3 > b::after , #SS22 .SS__title__h3 > b::after , #SS23 .SS__title__h3 > b::after , 
    #SS24 .SS__title__h3 > b::after , #SS25 .SS__title__h3 > b::after , #SS26 .SS__title__h3 > b::after { border-color:#2d52ad }

    #SS31 .SS__title__h3 > b::after , #SS32 .SS__title__h3 > b::after , #SS33 .SS__title__h3 > b::after , 
    #SS34 .SS__title__h3 > b::after , #SS35 .SS__title__h3 > b::after , #SS36 .SS__title__h3 > b::after ,
    #SS41 .SS__title__h3 > b::after , #SS42 .SS__title__h3 > b::after , #SS43 .SS__title__h3 > b::after , 
    #SS44 .SS__title__h3 > b::after , #SS45 .SS__title__h3 > b::after , #SS46 .SS__title__h3 > b::after { border-color:#9cdc24 }

    #SS51 .SS__title__h3 > b::after , #SS52 .SS__title__h3 > b::after , #SS53 .SS__title__h3 > b::after , 
    #SS54 .SS__title__h3 > b::after , #SS55 .SS__title__h3 > b::after , #SS56 .SS__title__h3 > b::after { border-color:#00aeef }
 


    /* NOTE */
    .note , .note__title { width:100% ; box-sizing:border-box }
    .note { padding:1.5rem 3rem } 
    .note__title { 
        font-size:2rem ; line-height:2.4rem ; color:#111111 ; font-weight:600 ;
        border-bottom:dashed 1px rgba(0,0,0,0.15) ; padding-bottom:1rem ; margin-bottom:1rem ;
    }
    .SS__sup { font-size:70% }
    .acc_btn::before { right:2rem }
    .note li , .note .SS__p { text-align:left ; word-break:keep-all }
    .note .SS__p a { word-break:break-all }


    /* PREV+NEXT */
    .etc__box { padding:0 ; max-width:120rem ; margin:0 auto 6rem }
    .etc__box::after { display:block ; content:"" ; clear:both } 
    .PN__item { margin:0 ; float:left ; width:50% ; box-sizing:border-box }
    .PN__link { padding:1.5rem 2rem 1.7rem}
    .prev .PN__link { border-radius:5rem 0 0 5rem ; border-right:none ; padding-left:7rem ; text-align:left }
    .next .PN__link { border-radius:0 5rem 5rem 0 ; border-left:none ; padding-right:7rem ; text-align:right }
    .PN__link b { width:6rem ; height:6rem }
    .next .PN__link b { left:auto ; right:0 }
    .PN__item.prev::after {
        display:block ; content:"" ; width:1px; height:2rem ;
        background-color:rgba(0,0,0,0.1) ; 
        position:absolute ; right:0 ; top:50% ; transform:translate(-50%,-50%) ;
    }
    .PN__link:hover , .PN__link:focus { border-color:rgba(0,0,0,0.1)}
 
 
}