@charset "utf-8";  
/* Mobile */
 
/* visual */ 
#visual { margin-bottom:4rem }
.visual__container , .visual__img  { width:100% ; height:40rem ; position:relative } 
.visual__container { overflow:hidden }
.visual__img > span , .visual__img::after {
    display:block ; width:100% ; height:100% ; 
    background-repeat:no-repeat ; background-position:center ; background-size:cover ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ; 
}
.visual__img::after { 
    content:"" ;
    background:rgba(0,0,0,0.5) ;
    background:linear-gradient(to bottom, rgba(0,0,0,0) 0% , rgba(0,0,0,0) 10% , rgba(0,0,0,0.5) 60% , rgba(0,0,0,0.6) 100%); 
}

.visual__txt { 
    width:100% ; padding:0 2rem ; text-align:center ;
    position:absolute ; left:50% ; bottom:10% ; transform:translateX(-50%) }
.visual__tag , .visual__title  { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
.visual__tag { 
    display:inline-block ; background-color:#54db37 ; padding:0.4rem 1.5rem ; border-radius:3rem ;
    font-size:1.4rem ; line-height:1.8rem ; font-weight:600 ; 
    margin:0 auto 1rem }
 
.visual__title {
    font-size:3.2rem ; line-height:4.4rem ; font-family:'Dohyun',sans-serif ;
    border-bottom:solid 1px rgba(255,255,255,0) ; word-break:keep-all ;
}   
.visual__title > span { 
    color:#ffffff ; font-weight:300 ; 
    text-shadow:inherit ; letter-spacing:inherit ;
}

#breadcrumb { border-bottom:solid 1px rgba(0,0,0,0.1) }
.bc__list   { font-size:0 ; text-align:left ; padding:0.5rem 2rem }
.bc__item   { 
    font-size:1.6rem ; line-height:2.8rem ; display:inline-block ; 
    position:relative ; padding:0 3rem 0.2rem 0
} 
.bc__item a { font-size:inherit ; line-height:inherit ; color:inherit ; font-weight:inherit }
.bc__item a:hover { color:#111111 }
.bc__item:last-child { padding-right:0 }
.bc__item::after {
    display:block ; content:"" ;  width:0.6rem ; height:0.6rem ;
     border:solid 1px rgba(0,0,0,0.5) ; border-left:none ; border-bottom:none ;
    position:absolute ; right:1.2rem ; top:50% ; transform:translate(-50%,-50%) rotate(45deg) ;
} 
.bc__item:last-child:after { display:none }



/* section */
.sec { width:94% ; margin:0 auto 10rem }
.sec__sub { margin-bottom:6rem }

.lead__p , .p   { margin-bottom:3rem ; text-align:justify } 
.lead__p > span { 
    font-size:2rem ; line-height:3.8rem ; font-weight:500 ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ; padding-bottom:0.2rem ;
}
.p , .data__list li , .table__wide th , .table__wide td , .table__rw th , .table__rw td { font-size:1.8rem ; line-height:3.2rem }
.p > b , .data__list li > b { font-weight:600 } 
.p > a:hover , .data__list li > a:hover , .table__rw td > a:hover , .table__wide td > a:hover { text-decoration:underline }
 
.sec__title , .sec__sub__title { word-break:keep-all }
.sec__title { 
    font-size:3.2rem ; line-height:4.4rem ; font-weight:bold ; color:#111111 ;
    margin-bottom:1.5rem ; letter-spacing:-0.05rem ;
}
.sec__sub__title {
    font-size:2.2rem ; line-height:3.4rem ; font-weight:600 ; color:#111111 ;
    margin-bottom:1rem ; padding-left:1rem  ; position:relative ;
}
.sec__sub__title::before { 
    width:0.3rem ; height:1.8rem ; display:block ; content:"" ;
    position:absolute ; left:0 ; top:1rem ;
    background-color:#54db37 ;
}

.data__list { margin-bottom:3rem }
.data__list li { 
    margin-bottom:0.5rem ; position:relative ;
    padding-left:1rem ;
}
.data__list.m20 li { margin-bottom:2rem }
.data__list li::before {
    display:block ; content:"" ; width:0.4rem ; height:0.4rem ;
    background-color:rgba(0,0,0,0.3) ;
    position:absolute ; left:0 ; top:1.5rem
}
.data__list.nodot li { padding-left:0 } 
.data__list.nodot li::before { display:none }

.sec:last-child , .sec__sub:last-child , .lead__p:last-child  , .p:last-child ,
.data__list:last-child , .data__list li:last-child , .data__list.m20 li:last-child  { margin-bottom:0 }

mark , .mark { background-color:#fff799 ; color:#111111 ; border-radius:0.2rem ; padding:0 0.2rem }



/* img */
.img , .img__outline , .img img , .imgs { width:100% }
.img { max-width:63rem ; margin:0 auto 3rem }
.img__outline { position:relative }
.img__outline::after , .img img { border-radius:0.6rem }
.img__outline::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%) ;
}
.img img { overflow:hidden }

.imgs { font-size:0 ; text-align:center ; margin-bottom:3rem }

.img:last-child , .imgs:last-child  { margin-bottom:0 }

.img__caption { font-size:1.6rem ; line-height:2.8rem ; text-align:left ; word-break:keep-all ; padding-top:0.5rem }
.img__caption > b , .table__caption > b {
    display:inline-block ; padding:0.2rem 0.8rem 0.4rem ; border-radius:0.4rem ;
    font-size:1.2rem ; line-height:1.6rem ; color:#ffffff ; 
    background-color:#444444 ; position:relative ; top:0.3rem
}



/* table+wide  */
.table__wide , .table__wide table { width:100% }
.table__wide { overflow:auto ; margin-bottom:4rem }
.table__wide:last-child { margin-bottom:0 }
.table__wide table { 
    min-width:100rem ;
    border:0 ; border-spacing:0 ; border-collapse:collapse
}
.table__wide th , .table__wide td { 
    text-align:center ; line-height:2.8rem ;
    padding:0.5rem 0.5rem 0.7rem ; word-break:keep-all ;
}
.table__wide thead th {
    font-size:1.6rem ; line-height:2.4rem ;
    background-color:#1663aa ; border:solid 1px #124f88 ;
    color:#ffffff ; font-weight:400 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
}
.table__wide td { border:solid 1px #d7d7d7 } 
.table__caption {
    text-align:left ; font-size:1.8rem ; line-height:2.8rem ; font-weight:600 ; color:#111111 ;
    margin-bottom:1rem ;
}
.table__caption > b { top:0.4rem }

.table__wide .point td , .table__wide .point th {
    border-color:#bcbcbc ; border-top:solid 1px #bcbcbc ;
    background-color:#f7f7f7 ;
    font-weight:500 ; color:#111111 ;
} 
 



/* table+Responsive  */
#table2 th:nth-child(1)::before , #table2 td:nth-child(1)::before { content:"제목1" } 
#table2 th:nth-child(2)::before , #table2 td:nth-child(2)::before { content:"제목2" } 
#table2 th:nth-child(3)::before , #table2 td:nth-child(3)::before { content:"제목3" } 

.table__rw , .table__rw table { width:100% }
.table__rw colgroup , .table__rw thead { display:none }
.table__rw .table__caption ,
.table__rw table , .table__rw tbody , .table__rw tfoot , .table__rw tr { display:block }
.table__rw tr { border-bottom:solid 1px #d7d7d7 ; padding:0.5rem 0.5rem 0.7rem }
.table__rw tbody tr:first-child { border-top:solid 1px #d7d7d7 } 
.table__rw th , .table__rw td   { display:inline-block ; margin-right:4rem ; word-break:keep-all }
.table__rw th:last-child , .table__rw td:last-child { margin-right:0 }
.table__rw th::before , .table__rw td::before {
    display:inline-block ; font-size:1.4rem ; line-height:1.6rem ; font-weight:500 ;
    border:solid 1px rgba(0,0,0,0.1) ; margin-right:0.5rem ;
    background-color:#f7f7f7 ; position:relative ; top:-0.1rem ; 
    padding:0.2rem 0.6rem 0.4rem ; border-radius:0.4rem ;
}
.table__rw .point { background-color:#f7f7f7 }
.table__rw .point td , .table__rw .point th { font-weight:500 ; color:#111111 }
.table__rw .point td::before , .table__rw .point th::before {
    background-color:#444444 ; color:#ffffff ; font-weight:300 ;
    border-color:#444444 ;
} 



/* note */
.note { 
    width:100% ; border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.8rem ; 
    margin-bottom:4rem ; padding:1rem 1.5rem ;
}
.note:last-child { margin-bottom:0 }
.note__title { 
    font-size:2rem ; line-height:2.8rem ; font-weight:600 ; color:#111111 ; 
    padding-bottom:1rem ; border-bottom:dashed 1px rgba(0,0,0,0.15) ;
    margin-bottom:1rem ;
}
.ref { 
    font-size:70% ; font-weight:inherit ; color:inherit ; 
    position:relative ; top:-0.2rem ;
    margin-left:1px ;
} 
.ref:hover { text-decoration:none } 



/* Article history nav */
#article_nav { width:94% ; margin:0 auto 6rem }
.an__pn , .an__history { width:100% }
.an__pn__item { margin-bottom:0.5rem }
.an__pn { margin-bottom:1rem }
.an__pn__link , .an__pn__link::after { border-radius:0.4rem }
.an__pn__link , .an__pn__link > span { display:block ; width:100% }

.an__pn__link , .an__pn__link::after , .an__pn__icon > span { transition:0.3s all }

.an__pn__link { 
    position:relative ; background-color:#ffffff ;
    padding:1rem 1rem 1.2rem 6rem ; 
} 
.an__pn__link:hover { color:#111111 ; box-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; }
.an__pn__link > span {
    font-size:1.8rem ; line-height:2.8rem ; 
    word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis
}
.an__pn__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%) ; 
}  
.an__pn__link:hover::after { border-color:rgba(0,0,0,0.2) }
 
.an__pn__icon , .an__pn__icon > span { 
    display:block ; width:5rem ; height:5rem ;
    font-size:0 ; color:transparent ;
    position:absolute ;
}

.an__pn__icon { left:0 ; top:50% ; transform:translateY(-50%) }
.an__pn__icon::after , .an__pn__icon > span::before , .an__pn__icon > span::after { display:block ; content:"" ; position:absolute }
.an__pn__icon::after {
    width:1px ; height:60% ; background-color:rgba(0,0,0,0.1) ;
    right:0 ; top:50% ;transform:translateY(-50%)
}
.an__pn__icon > span , .an__pn__icon > span::after , .an__pn__icon > span::before { 
    overflow:hidden ;
    left:50% ; top:50% ; transform:translate(-50%,-50%) }
.an__pn__icon > span { opacity:0.5 }
.an__pn__icon > span::before { 
    width:1rem ; height:1rem ; border:solid 1px #111111 ; border-top:none ; border-right:none ;
    transform:translate(-50%,-50%) rotate(45deg) ; left:46%  
}
.an__pn__icon > span::after { width:1.6rem ; height:1px ; background-color:#111111 ; border-radius:1rem }
.prev .an__pn__icon > span  { transform:translate(-50%,-50%) scale(0.9) }
.next .an__pn__icon > span  { transform:translate(-50%,-50%) scale(0.9) rotate(180deg) }
 
.prev:hover .an__pn__icon > span , .next:hover .an__pn__icon > span { opacity:1 }
.prev:hover .an__pn__icon > span  { transform:translate(-50%,-50%) scale(1) }
.next:hover .an__pn__icon > span  { transform:translate(-50%,-50%) scale(1) rotate(180deg) }

.an__history.open .an__his__pop , .an__his__open , .an__his__open::after { transition:0.3s all } 
.an__history , .an__his__open { display:block ; width:100% ; position:relative }
.an__his__open { 
    font-size:1.8rem ; line-height:2.8rem ; color:#ffffff ; text-align:left ; font-weight:500 ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    padding:1rem 4rem 1.2rem 2rem ; border-radius:0.4rem ;
    background-color:#1663aa ; 
}
.an__history.open .an__his__open { background-color:#111111 } 
.an__his__open::after {
    display:block ; content:"" ; width:0.8rem ; height:0.8rem ; opacity:0.8 ;
    border:solid 1px #ffffff ; border-top:none ; border-left:none ;
    position:absolute ; right:1.5rem ; top:45% ; transform:translate(-50%,-50%) rotate(45deg) ;
}
.an__history.open .an__his__open::after { top:55% ; transform:translate(-50%,-50%) rotate(225deg) ; }
.an__his__open:hover::after {
    transform:translate(-50%,-50%) rotate(45deg) scale(1.2) ;
    opacity:1 ; 
}

.an__his__pop {
    position:fixed ; right:-101vw ; top:0 ; z-index:99 ;
    width:100vw ; height:100vh ; 
    background-color:rgba(0,0,0,0.6) ;
}
.an__history.open .an__his__pop { right:0 }
.an__his__container {
    display:none ;
    width:80vw ; height:80vh ; max-width:30rem ; max-height:32rem ;
    overflow:hidden ; border-radius:0.6rem ; padding-top:4rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.an__history.open .an__his__container { display:block }

.an__his__title {
    display:block ; width:100% ; background-color:#1663aa ; padding:0.8rem 1.5rem 1rem ;
    font-size:1.8rem ; line-height:2.8rem ; color:#ffffff ; font-weight:600 ; text-align:left ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    position:absolute ; left:0 ; top:0
}
.an__his__box {
    display:block ; overflow:auto ; width:100% ; height:100% ; 
    background-color:#ffffff ;
}
.an__his__list { padding-top:0.5rem }
.an__his__link , .an__noData { 
    font-size:1.6rem ; line-height:2.6rem ; word-break:keep-all ; 
    padding:0.8rem 1.5rem 1rem ; border-bottom:solid 1px rgba(0,0,0,0.1) 
}
.an__his__link { display:block ; transition:0.3s all } 
.an__his__link:hover { color:#111111 ; border-color:rgba(0,0,0,0.4) }

#an__his__close { position:absolute ; right:1rem ; top:1.3rem ; opacity:1 }
#an__his__close::before , #an__his__close::after { background-color:#ffffff }
 






@media screen and (min-width:1024px){ 
 
    /* visual */
    #visual { margin-bottom:5rem ; position:relative }
    .visual__container , .visual__img { height:70rem }
    .visual__img::after {
        background:linear-gradient(to bottom, rgba(0,0,0,0.5) 0% , rgba(0,0,0,0.5) 10% , rgba(0,0,0,0.7) 60% , rgba(0,0,0,0.8) 100%); 
    }
    .visual__txt , .bc__list { width:90% ; max-width:128rem ; margin:auto}
    .visual__txt { text-align:left ; padding:0 ; bottom:9rem }
    .visual__title { font-size:5rem ; line-height:7rem } 

    .bc__item:last-child:after { display:block }  
    #breadcrumb { 
        width:100% ; background-color:rgba(0,0,0,0.5) ; position:absolute ; left:0 ; bottom:0 ;
        border-top:solid 1px rgba(255,255,255,0.15) ;
    }
    .bc__list , .bc__item { padding:0}
    .bc__list::after { display:block ; content:"" ; clear:both }
    .bc__item { display:block ; float:left ; margin:0  }
    .bc__item.home::before , .bc__item::after {  border:none ; width:1px ; height:100% ; background-color:rgba(255,255,255,0.15) ; top:0 }
    .bc__item::after { right:0 ; transform:none }
    .bc__item.home::before {
        display:block ; content:"" ;
        position:absolute ; left:0
    }
 
    .bc__item:last-child::after { display:block }
    .bc__item.home , .bc__item.home > a , .bc__item.home > a::before { display:block ; width:5rem ; height:5rem }
    .bc__item.home > a , .bc__item.home > a::before , .bc__item.depth > a { transition:0.3s all }
    .bc__item.home > a { position:relative ; overflow:hidden ; font-size:0 ; color:transparent }
    .bc__item.home > a::before {
        position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
        background:url(../img_sub/icon_home.png) no-repeat center ; background-size:cover ;
        opacity:0.5 ; content:"" ;
    }
    .bc__item.home > a:hover , .bc__item.depth > a:hover { background-color:rgba(0,0,0,0.6) }
    .bc__item.home > a:hover::before  { opacity:1 }
    .bc__item.depth > a , .bc__item.now { 
        display:block ; font-size:1.6rem ; line-height:2.8rem ; 
        padding:1rem 2rem 1.2rem ; color:rgba(255,255,255,0.7) ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2)  ;
    }

/* 
#visual { margin-bottom:4rem }
.visual__container , .visual__img  { width:100% ; height:40rem ; position:relative } 
.visual__container { overflow:hidden }
.visual__img > span , .visual__img::after {
    display:block ; width:100% ; height:100% ; 
    background-repeat:no-repeat ; background-position:center ; background-size:cover ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ; 
}
.visual__img::after { 
    content:"" ;
    background:rgba(0,0,0,0.5) ;
    background:linear-gradient(to bottom, rgba(0,0,0,0) 0% , rgba(0,0,0,0) 10% , rgba(0,0,0,0.5) 60% , rgba(0,0,0,0.6) 100%); 
}

.visual__txt { 
    width:100% ; padding:0 2rem ; text-align:center ;
    position:absolute ; left:50% ; bottom:10% ; transform:translateX(-50%) }
.visual__tag , .visual__title  { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
.visual__tag { 
    display:inline-block ; background-color:#54db37 ; padding:0.4rem 1.5rem ; border-radius:3rem ;
    font-size:1.4rem ; line-height:1.8rem ; font-weight:600 ; 
    margin:0 auto 1rem }
 
.visual__title {
    font-size:3.2rem ; line-height:4.4rem ; font-family:'Dohyun',sans-serif ;
    border-bottom:solid 1px rgba(255,255,255,0) ; word-break:keep-all ;
}   
.visual__title > span { 
    color:#ffffff ; font-weight:300 ; 
    text-shadow:inherit ; letter-spacing:inherit ;
}

#breadcrumb { border-bottom:solid 1px rgba(0,0,0,0.1) }
.bc__list   { font-size:0 ; text-align:left ; padding:0.5rem 2rem }
.bc__item   { 
    font-size:1.6rem ; line-height:2.8rem ; display:inline-block ; 
    position:relative ; padding:0 3rem 0.2rem 0
} 
.bc__item a { font-size:inherit ; line-height:inherit ; color:inherit ; font-weight:inherit }
.bc__item a:hover { color:#111111 }
.bc__item:last-child { padding-right:0 }
.bc__item::after {
    display:block ; content:"" ;  width:0.6rem ; height:0.6rem ;
     border:solid 1px rgba(0,0,0,0.5) ; border-left:none ; border-bottom:none ;
    position:absolute ; right:1.2rem ; top:50% ; transform:translate(-50%,-50%) rotate(45deg) ;
} 
.bc__item:last-child:after { display:none }

*/


    /* section */
    .sec , #article_nav { width:98% ; max-width:128rem }



    /* img */
    .imgs::after { display:block ; content:"" ; clear:both }
    .imgs .img { margin:0 ; width:49.2187% }
    .imgs .img:first-child , .img.left { float:left }
    .imgs .img:last-child , .img.right { float:right }

    .img.left  { margin:0.7rem 4rem 0.3rem 0 } 
    .img.right { margin:0.7rem 0 0.3rem 4rem } 


    
    /* table+Responsive  */
    .table__rw th::before { display:block }
    .table__rw td::before { display:none }
    .table__rw table    { display:table } 
    .table__rw colgroup { display:table-column-group}
    .table__rw thead    { display:table-header-group }
    .table__rw tbody    { display:table-row-group }
    .table__rw tfoot    { display:table-row-group }
    .table__rw tr       { display:table-row }
    .table__rw td , .table__rw th { display:table-cell }
    .table__rw .table__caption    { display:table-caption}
 

    .table__rw table { width:100% ; border-spacing:0 ; border-collapse:collapse }
    .table__rw th , .table__rw td { 
        font-size:1.8rem ; line-height:2.8rem  ; text-align:center ;
        padding:0.5rem 0.5rem 0.7rem ; 
    }
    .table__rw thead th {
        font-size:1.6rem ; line-height:2.4rem ;
        background-color:#1663aa ; border:solid 1px #124f88 ;
        color:#ffffff ; font-weight:400 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    }

    .table__rw thead th::before { 
        display:inline ; background:none ; border-radius:0 ; border:none ; 
        color:#ffffff ; font-weight:400 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
        font-size:1.6rem ; line-height:2.4rem ;
    }
    .table__rw tr { border:0 ; padding:0 }
    .table__rw td { border:solid 1px #d7d7d7 }
    .table__rw tr.point { background:none }

    .table__rw .point td , .table__wide .point th {
        border-color:#bcbcbc ; border-top:solid 1px #bcbcbc ;
        background-color:#f7f7f7 ;
        font-weight:500 ; color:#111111 ;
    } 


    
    /* note */
    .note { padding:1.5rem 3rem ; background-color:#f7f7f7 ; border-color:#cccccc }


    
    /* footer */
    .footer__nav::before { display:none } 



    /* Article history nav */
    #article_nav { position:relative }
    #article_nav::before {
        display:block ; content:"" ; width:100% ; height:1px ;
        background-color:#111111 ; opacity:0.1 ;
        position:absolute ; left:0 ; top:50% ; z-index:-1 ;
    }
    #article_nav::after , .an__pn::after { display:block ; content:"" ; clear:both }
    .an__pn       { width:74% ;  margin:0  }
    .an__pn.wide  { width:100% }
    .an__history  { width:23% }
    .an__pn__item { display:block ; width:49.7% ; margin:0 }
    .an__pn__item:first-child , .an__pn     { float:left }
    .an__pn__item:last-child , .an__history { float:right }

    .an__pn__link  { padding:1.5rem 1rem 1.7rem 7.5rem }
    .an__pn__link.next  { padding-left:1rem ; padding-right:7.5rem ; text-align:right }
    .an__pn__icon  { width:6rem ; height:6rem } 
    .an__pn__link.next .an__pn__icon { left:auto ; right:0 } 
    .an__pn__link.next .an__pn__icon::after { left:0 ; right:auto } 
    .an__his__open { padding:1.5rem 4rem 1.7rem 2.5rem }

    .an__his__pop , .an__his__container { width:100% ; }
    .an__his__pop {
        position:absolute ; right:0 ; top:auto ; bottom:6.5rem ;
        background:none ; height:0 ; overflow:hidden ;
    }
    .an__history.open .an__his__pop { height:32rem }

    .an__his__container { display:block ; height:100% ; border:solid 1px #d7d7d7 } 
    .an__his__list { width:86% ; margin:auto }
    .an__his__link { padding:0.8rem 0.2rem 1rem }
        
  
} 
    
@media print { 
     
}