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

/* BG Image */
#bgImg { display:none } 



/* Main */
#main { padding-top:6rem ; margin-bottom:8rem }



/* Visual */
#visual , .visual__img , .visual__img::after { display:block ; width:100%}
#visual { overflow:hidden ; margin-bottom:6rem ; position:relative ; height:40rem }
.visual__img , .visual__img::after { 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    height:100%
} 
.visual__img { background:url(../img_sub/visual.jpg) no-repeat center ; background-size:cover }

#K11 .visual__img { background-image:url(../img_sub/visual11.jpg) }
#K12 .visual__img { background-image:url(../img_sub/visual12.jpg) }
#K13 .visual__img { background-image:url(../img_sub/visual13.jpg) }
#K14 .visual__img { background-image:url(../img_sub/visual14.jpg) }
#K15 .visual__img { background-image:url(../img_sub/visual15.jpg) }

#K21 .visual__img { background-image:url(../img_sub/visual21.jpg) }
#K22 .visual__img { background-image:url(../img_sub/visual22.jpg) }
#K23 .visual__img { background-image:url(../img_sub/visual23.jpg) }
#K24 .visual__img { background-image:url(../img_sub/visual24.jpg) }
#K25 .visual__img { background-image:url(../img_sub/visual25.jpg) }

#K31 .visual__img { background-image:url(../img_sub/visual31.jpg) }
#K32 .visual__img { background-image:url(../img_sub/visual32.jpg) }
#K33 .visual__img { background-image:url(../img_sub/visual33.jpg) }
#K34 .visual__img { background-image:url(../img_sub/visual34.jpg) }
#K35 .visual__img { background-image:url(../img_sub/visual35.jpg) }

#K41 .visual__img { background-image:url(../img_sub/visual41.jpg) }
#K42 .visual__img { background-image:url(../img_sub/visual42.jpg) }
#K43 .visual__img { background-image:url(../img_sub/visual43.jpg) }
#K44 .visual__img { background-image:url(../img_sub/visual44.jpg) }
#K45 .visual__img { background-image:url(../img_sub/visual45.jpg) }


.visual__img::after { 
    content:"" ; 
    background:linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.7) 60%,rgba(0,0,0,0.7) 100%);
}
.visual__container {
    width:96% ; max-width:128rem ; 
    position:absolute ; left:50% ; bottom:3rem ; transform:translateX(-50%) ;
}
#breadcrumb { margin-bottom:1.5rem }
#breadcrumb ul { font-size:0 ; text-align:left }
#breadcrumb li { 
    display:inline-block ; color:#00c6ff ;
    margin-right:1.5rem ;
}
#breadcrumb li:last-child { margin-right:0 }
#breadcrumb a , #breadcrumb b { 
    display:block ; padding-bottom:0.3rem ; 
    font-size:1.4rem ; line-height:2rem ; color:inherit ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.1) ;
    border-bottom:solid 0.2rem #00c6ff
}
#breadcrumb a { transition:0.3s all }
#breadcrumb a:hover { color:#ffffff ; border-color:#ffffff }
#breadcrumb b { font-weight:bold ; color:inherit }

.visual__title , .visual__name { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.1) }
.visual__title {
    font-size:3rem ; line-height:4rem ; 
    word-break:keep-all ; font-weight:300 ; letter-spacing:-0.05rem ;
}
.visual__title > b  { 
    font-weight:600 ; 
    color:inherit ; text-shadow:inherit ; word-break:inherit ; letter-spacing:inherit }
.visual__title > br { display:none }
.visual__name {
    padding-top:2rem ; opacity:0.8 ; font-weight:300 ;
    font-size:1.4rem ; line-height:2.2rem ; word-break:keep-all  ;
}



/* Section */
.sec { width:96% ; max-width:128rem ; margin:0 auto 9rem } 
.sub__sec { width:100% ; margin-bottom:8rem }
.sub__sec .sub__sec { margin-bottom:6rem } 
.dot__line { 
    padding-bottom:8rem ; margin-bottom:8rem ;
    border-bottom:dashed 1px rgba(0, 0, 0, 0.2) } 

.sec__title , .sec__sub__title , .sub__title__bar { font-weight:800; color:#111111; word-break:keep-all }
.sec__title , .sec__sub__title { font-size:2.8rem ; line-height:3.6rem }
.sec__title {
    border:solid 1px rgba(0, 0, 0, 0.1) ; border-radius:0.4rem ;
    background-color:#f7f7f7 ; padding:1.3rem 0.5rem 1.5rem ; margin-bottom:3rem ;
    text-align:center ; letter-spacing:-0.15rem ;
}
.sec__sub__title {  margin-bottom:1.5rem }
.sub__title__bar {
    font-size:2.2rem ; line-height:3rem ; font-weight:800 ;
    margin-bottom:1rem ; position:relative ; padding-left:1rem ;
}
.sub__title__bar::before {
    display:block ; content:"" ; width:0.3rem ; height:1.6rem ; border-radius:1rem ;
    background-color:#6ec22e ; 
    position:absolute ; left:0 ; top:0.9rem
}

.p , .data__list > li , .table th , .table td , .note__item { font-size:1.6rem ; line-height:3rem }
.p { text-align:justify ; margin-bottom:3rem } 
  
.p > a:hover , .note__item > a:hover , 
.table th > a:hover  , .table td > a:hover , .data__list > li > a:hover { text-decoration:underline }

.bold  { font-weight:bold }
.uLine { border-bottom:solid 1px rgba(0,0,0,0.2) }
.mark  { background-color:#fffab7 ; color:#111111 }

.lead__p { 
    font-size:2rem ; line-height:3.6rem ; font-weight:500 ; 
    text-align:justify ; margin-bottom:3.6rem }
.lead__p > b  { 
    font-size:inherit ; line-height:inherit ; font-weight:inherit ;
    text-align:inherit ; color:inherit ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ; padding-bottom:0.2rem ;
}

.sec:last-child , .sub__sec:last-child , .sub__sec .sub__sec:last-child ,
.dot__line:last-child , .p:last-child , .lead__p:last-child  { margin-bottom:0 } 



/* List */
.data__list { margin-bottom:3rem }
.data__list:last-child { margin-bottom:0 }
.data__list > li { 
    padding-left:1rem ; margin-bottom:0.5rem ;
    position:relative ; word-break:keep-all ; text-align:left }
.data__list > li:last-child { margin-bottom:0 }      
.data__list > li::after {
    display:block ; content:"" ; width:0.4rem ; height:0.4rem ;
    background-color:#000000 ; opacity:0.3 ;
    position:absolute ; left:0 ; top:1.3rem
} 
.data__list.bar > li::after { width:0.5rem ; height:0.2rem ; top:1.4rem }
 
.data__list.decimal { list-style-type:decimal }
.data__list.roman   { list-style-type:upper-roman }
.data__list.decimal > li  , .data__list.roman > li { padding-left:0 }
.data__list.decimal > li { margin-left:3rem }
.data__list.roman > li   { margin-left:3rem }
.data__list.decimal > li::after  , .data__list.roman > li::after { display:none }

.data__list.unstyle > li { padding-left:0 }
.data__list.unstyle > li::after { display:none }



/* Image */
.img , .img img , .outline { width:100% }
.img { margin:0 auto 4rem ; max-width:60rem }
.img img , .outline , .outline::after , .img__caption > b , .table__caption > b { border-radius:0.4rem }
.outline { position:relative }
.outline::after {
    display:block ; content:"" ; box-sizing:border-box ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    border:solid 1px rgba(0,0,0,0.1) 
}
.img:last-child { margin-bottom:0 }  
.img__caption , .table__text {
    padding-top:0.7rem ;
    font-size:1.6rem ; line-height:2.4rem ; word-break:keep-all ;
}
.img__caption > b , .table__caption > b {
    display:inline-block ; padding:0.2rem 1rem 0.4rem ; margin-right:0.2rem ;
    font-size:1.4rem ; line-height:2rem ; color:#ffffff ;  
    background-color:#444444 ;
}
 
.imgs { margin-top:4rem }
.imgs:first-child { margin-top:0 }



/* Table */
.table , .table table { width:100% }
.table { margin-bottom:4rem } 
.table:last-child { margin-bottom:0 }
.table__caption { 
    margin-bottom:1rem ; word-break:keep-all ;
    font-size:2rem ; line-height:2.8rem ; font-weight:800 ; color:#111111 ; text-align:left }
.table table { border:0 ; border-spacing:0 ; border-collapse:collapse }    
.table th , .table td { 
    line-height:2.6rem ; text-align:center ; vertical-align:middle ; word-break:keep-all ;
    border:solid 1px #e5e5e5 ; padding:0.8rem 0.3rem 1rem ;
}
.table thead th { 
    background-color:#083c78 ; border-color:#396393 ; 
    color:#ffffff ; font-size:1.4rem ; line-height:2rem ; font-weight:500 ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
} 
.td__left , .table th.td__left , .table td.td__left { text-align:left }
.td__right , .table th.td__right , .table td.td__right { text-align:right }
 
.table.scroll { overflow:auto }
.table.scroll table { width:102.4rem }

.resp .table__caption , .resp table , 
.resp tbody , .resp tr , .resp tfoot { display:block } 
.resp thead { display:none }
.resp tbody { border-top:solid 0.2rem #083c78 }
.resp tr , .resp th , .resp td  { text-align:left }
.resp th , .resp td { display:inline-block ; padding:0 ; margin:0 ; border:none }
.resp tr { padding:0.8rem 0.1rem 1rem ; border-bottom: solid 1px #e5e5e5 }
.resp tbody td , .resp tbody th { margin-right:3rem }
.resp tbody td:last-child , .resp tbody th:last-child { margin-right:0 }
.resp tbody td::before , .resp tbody th::before {
    display:inline-block ; content:"제목" ; padding:0.1rem 0.8rem 0.2rem ; border-radius:0.4rem ;
    font-size:1.2rem ; line-height:1.6rem ; color:#ffffff ; font-weight:400 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.1) ;
    background-color:#444444 ; margin-right:0.5rem ; 
} 

.resp th.td__left , .resp td.td__left ,
.resp th.td__right , .resp td.td__right { text-align:inherit }



/* Aritcle Nav */ 
#articel_nav {
    width:96% ; max-width:128rem ; padding-top:4rem  ; margin:0 auto 6rem ;
    position:relative ; 
}
#articel_nav::before {
    display:block ; content:"" ; width:100% ; height:0.5rem ; 
    position:absolute ; left:50% ; top:0 ; transform:translateX(-50%) ;
    background:url(../img_sub/net.gif) repeat 0 ;
    opacity:0.1 ;
}
.articel__PN__item , #article_archive_open { 
    position:relative ; padding:1rem 1rem 1.2rem 6rem ; margin-bottom:0.5rem ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem }
.articel__PN__item > b {
    display:block ; width:5rem ;
    font-size:1.2rem ; line-height:2rem ; text-align:center ;
    position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ; 
}
.articel__PN__item > b::after {
    display:block ; content:"" ; width:1px ; height:1.2rem ; 
    position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
    background-color:rgba(0,0,0,0.1) ;
}
.articel__PN__item > a , #article_archive_open , #article_archive_list a  { font-size:1.6rem ; line-height:2.8rem }
.articel__PN__item > a { word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis }
.articel__PN__item > a:hover { text-decoration:underline }
 


/* Article archive */
#article_archive , .articel__container , #article_archive_open { width:100% }
.articel__container { position:relative }
#articel_PN { margin-bottom:1.5rem }
#article_archive_open { 
    padding-left:2rem ; padding-right:4rem ; word-break:keep-all ;
    position:relative ; background-color:#012d6b ;
    color:#ffffff ; text-align:left ; font-weight:500 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.1) ;
} 
.archiveOpen #article_archive_open { background-color:#111111 }
#article_archive_open , .icon__more , .icon__more::before , .icon__more::after ,
#article_archive_list , #article_archive_list a , #article_archive_list a::after  { transition:0.3s all }

.icon__more {
    display:block ; width:2rem ; height:2rem ;
    position:absolute ; right:2rem ; top:50% ; transform:translateY(-50%) ; 
} 
#article_archive_open:hover .icon__more { transform:translateY(-50%) rotate(90deg) }

.archiveOpen .icon__more { transform:translateY(-50%) rotate(45deg) }
.archiveOpen #article_archive_open:hover .icon__more { transform:translateY(-50%) rotate(135deg) }

.icon__more::before , .icon__more::after {  
    display:block ; content:"" ; width:1.4rem ; height:0.2rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    background-color:#ffffff ; border-radius:1rem ;
} 
.icon__more::after { transform:translate(-50%,-50%) rotate(90deg) }

.archiveOpen .icon__more::before , .archiveOpen .icon__more::after { background-color:#6ec22e ; width:1.6rem }
 
#article_archive_list {
    display:block ; overflow:hidden ; width:100% ; height:0 ; padding:0 2rem ; 
    position:absolute ; right:0 ; bottom:6rem ;
    background-color:rgba(0,0,0,0.9) ; border-radius:0.4rem ;
}
#article_archive_list > ul { display:none ; margin-bottom:1rem }
 
#article_archive_list a { 
    display:block ; padding:0.5rem 0.1rem 0.7rem ;
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.1) ;
    border-bottom:solid 1px rgba(255,255,255,0.1) ;
    position:relative
}
#article_archive_list a::after {
    display:block ; content:"" ; width:0 ; height:1px ;
    background-color:#6ec22e ; 
    position:absolute ; left:0 ; bottom:-1px ;
}
#article_archive_list a:hover::after{ width:100% }
#article_archive_list a:hover {
    border-color:rgba(255,255,255,0.3) ;
} 
#article_archive_close::before , #article_archive_close::after { background-color:#ffffff }  
#article_archive_close { display:none } 

.archiveOpen #article_archive_close ,
.archiveOpen #article_archive_list > ul { display:block }
.archiveOpen #article_archive_list { padding-top:2rem ; padding-bottom:2rem ; overflow:inherit ; height:auto }



/* Board list */
.board__guide { margin-bottom:1rem }
.board__table { width:100% ; border:0 } 
.board__table thead { display:none }
.board__table , .board__table tbody , .board__table tfoot , .board__table tr { display:block }
.board__table th , .board__table td { display:inline-block } 
.board__table th , .board__table td { font-size:1.6rem ; line-height:2.6rem ; background-color:#ffffff }
.board__table tr , .board__link { transition:0.3s all }
.board__table tr {
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ; 
    box-sizing:border-box ; padding:1rem 1.5rem ; margin-bottom:0.5rem ;
}
.board__table tr:hover { border-color:#1396cd ; background-color:#ffffff ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3) }
.board__table tr:last-child { margin-bottom:0 }

.b__num { 
    display:inline-block ; background-color:#111111 ; border-radius:0.4rem ; 
    color:#ffffff ; line-height:2.4rem  ; text-shadow:0 0 0.1rem rgba(0,0,0,0.2) ; font-weight:600 ; 
    background-color:#1396cd ; padding:0 0.6rem 0.2rem ; margin-right:0.3rem ;
}
.board__link { font-size:1.8rem ; font-weight:500 } 
.board__link:hover { text-decoration:underline } 
.board__table th.b__row , .board__table td.b__row { 
    display:block ; border-top:dashed 1px rgba(0,0,0,0.1) ;
    margin-top:0.7rem ; padding-top:0.75rem ;
} 
.board__table th br , .board__table td br { display:none }



/* QnA */
.qna__q , .qna__a { position:relative ; padding-left:5rem }
.qna__icon {
    display:block ; overflow:hidden ; width:4rem ; height:4rem ; border-radius:100% ;
    background:url(../img_sub/icon_QA.png) no-repeat left top ;
    position:absolute ; left:0 ; top:0 ;
    font-size:0 ; color:transparent
}
.qna__icon.q { background-color:#083c78 }
.qna__icon.a { background-color:#dddddd }

.qna__q { 
    font-size:2.4rem ; line-height:3.4rem ; font-weight:800 ; color:#111111 ;
    margin-bottom:1.5rem ; padding-top:0.3rem ; letter-spacing:-0.1rem ;
    word-break:keep-all ; text-align:left ;
}



/* Accordion */
.acc__item  , .acc__header { display:block ; width:100% }
.acc__item   { 
    border:solid 1px #d7d7d7 ; background-color:#ffffff ; 
    border-radius:0.4rem ; box-sizing:border-box ;
    margin-bottom:0.5rem ;
}
.acc__item:last-child { margin-bottom:0 } 
.acc__item.accOpne    { box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.2) ; border-color:#083c78 }

.acc__header { position:relative ; padding:1.2rem 4rem 1rem 5rem }
.accOpne .acc__header { background-color:#083c78 }
.acc__title  {
    font-size:2rem ; line-height:3rem ; font-weight:600 ; color:#111111 ; word-break:keep-all ;
    letter-spacing:-0.1rem ; display:inline ; 
    border-bottom:solid 1px rgba(0,0,0,0) ;
}
.accOpne .acc__title { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
.acc__header:hover .acc__title { border-color:rgba(0,0,0,0.2) } 
.accOpne .acc__header:hover .acc__title { border-color:rgba(0,0,0,0) } 
.acc__num {
    width:3rem ; height:3rem ; display:block ; border-radius:100% ;
    font-size:1.6rem ; line-height:2.8rem ; color:#ffffff ; text-align:center ; font-weight:600 ; 
    background-color:#222222 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    position:absolute ; left:1.5rem ; top:1.1rem
}
.accOpne .acc__num { background-color:#6ec22e ; text-shadow:none }

.acc__open {
    display:block ; width:100% ; height:100% ; 
    font-size:0 ; color:transparent ; 
    position:absolute ; left:0 ; top:0 
}
.acc__open > span , .acc__open > span::before , .acc__open > span::after { display:block ; position:absolute }
.acc__open > span { width:2rem ; height:2rem ; right:1.5rem ; top:1.7rem ; opacity:0.5 }
.acc__open:hover > span { transform:rotate(90deg) ; opacity:1 }
.acc__open > span::before , .acc__open > span::after {
    content:"" ; width:1.4rem ; height:0.2rem ;
    background-color:#111111 ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
} 
.acc__open > span::after { transform:translate(-50%,-50%) rotate(90deg) }

.accOpne .acc__open > span { opacity:1 }
.accOpne .acc__open > span::before , .accOpne  .acc__open > span::after { background-color:#6ec22e ; width:1.6rem } 
.accOpne .acc__open:hover > span::before { transform:translate(-50%,-50%) rotate(90deg) }
.accOpne  .acc__open > span::after { opacity:0 }
 
.acc__item , .acc__body , .acc__open > span , .acc__open > span::before , .acc__open > span::after ,
.acc__title , .acc__num , .acc__body::before { transition:0.3s all }

.acc__body { 
    display:block ; overflow:hidden ; padding:0 1.5rem ; height:0 ;
    position:relative 
}
.accOpne .acc__body { padding-top:4rem ; padding-bottom:6rem ; height:auto }

.acc__body__container , .acc__close { display:none }
.accOpne .acc__body__container , .accOpne .acc__close { display:block }
.acc__close { position:absolute ; left:50% ; bottom:1.5rem  ; transform:translateX(-50%) } 


.acc__body::before { 
    display:block ; content:"" ; width:100% ; height:1px ;
    background-color:rgba(0,0,0,0.1) ; 
    position:absolute ; left:50% ; top:0 ; transform:translateX(-50%) ;
}

.acc__sub { 
    border-bottom:dashed 1px rgba(0,0,0,0.1) ;
    padding-bottom:5rem ; margin-bottom:5rem ;
}
.acc__sub:last-child , .acc__sub .acc__sub { border:none ; padding-bottom:0 ; margin-bottom:0 }

.acc__sub .acc__sub { margin-bottom:4rem }
.acc__sub .acc__sub:last-child { margin-bottom:0 }

.acc__sub__title , .acc__title__h5 { font-weight:800 ; color:#111111 ; margin-bottom:1rem ; letter-spacing:-0.1rem }
.acc__sub__title { font-size:2.4rem ; line-height:3.4rem } 
.acc__title__h5  { font-size:2rem ; line-height:3rem ; color:#012d6b }



/* Button */ 
.book__btn , .book__btn > span { transition:0.3s all }
.book__btn {
    margin-top:0.5rem ; padding:0.8rem 0.2rem 1rem ;
    display:block ; background-color:#1396cd ; border-radius:0.4rem ;
    font-size:1.8rem ; line-height:3rem ; text-align:center ; color:#ffffff ; font-weight:600 ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2)  
}
.book__btn > span { 
    display:inline-block ; width:3rem ; height:3rem ; margin-right:0.8rem ; 
    background:url(../img/sprite_icon.png) no-repeat 0 0 ; background-size:auto 6rem ;
    position:relative ; top:0.1rem ; opacity:0.7 ;
}
.book__btn:hover { background-color:#012d6b ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.1) }
.book__btn:hover > span { opacity:1 }

.book__btn.copy { 
    background-color:#ffffff ; position:relative ;
    color:#444444 ; text-shadow:none ; font-weight:500 ;
}
.book__btn:hover.copy { color:#111111 ; background-color:#f7f7f7 } 
.book__btn.copy::after {
    display:block ; content:"" ; width:100% ; height:100% ; box-sizing:border-box ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    transition:0.3s all ;
}
.book__btn.copy:hover::after { border-color:rgba(0,0,0,0.3) }
.book__btn.copy > span { background-position:-3rem -3rem ; opacity:0.5 }
.book__btn.copy:hover > span { opacity:1 }

.book__btn.more > span { background-position:-6rem 0 }



/* Note */
.note { 
    border:solid 1px rgba(0,0,0,0.1) ; background-color:#f7f7f7 ; border-radius:0.4rem ;
    padding:1.5rem ;
}
.note__item { text-align:left ; word-break:keep-all ; margin-bottom:0.5rem }
.note__item:last-child { margin-bottom:0 } 
.note__num { 
    font-size:70% ; line-height:inherit ; color:inherit ; font-weight:inherit ; font-family:inherit ; 
    position:relative ; top:-0.3rem
}

.note__item { position:relative ; padding-left:1.5rem }
.note__item > .note__num { position:absolute ; left:0 }



/* Mobile only */
.mobile__only { display:block }
.mobile__container {
    border:solid 1px #d7d7d7 ; border-radius:0.4rem ; background-color:#f7f7f7 ;
    padding:1.5rem ;
}





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


    /* BG Image */
    #bgImg , #bgImg::after { 
        display:block ; width:100% ; height:48rem ; 
        left:0 ; top:0 
    } 
    #bgImg { 
        position:absolute ;  z-index:-1 ;
        background:url(../img/main_bg.jpg) no-repeat center ; background-size:cover ; background-attachment:fixed ;
    }
    #bgImg::after {
        content:"" ; position:absolute ;
        background-color:#111111 ; opacity:0.7 ;
    } 



    /* Main */
    #main { padding-top:12rem }
 


    /* Visual */
    #visual { width:96% ; max-width:128rem ; height:60rem ; margin:0 auto 8rem ; border-radius:1rem }
    .visual__img::after { display:none }
    .visual__container  { 
        width:auto ; padding:4rem 5rem ; min-width:50rem ;
        position:absolute ; left:0 ; bottom:0 ; transform:none ;
        background-color:rgba(0,0,0,0.7) ; border-radius:0 1rem 0 0 ;
    }

    #breadcrumb { margin-bottom:3rem } 
    #breadcrumb li { margin-right:2rem }
    #breadcrumb a , #breadcrumb b { font-size:2rem ; line-height:2.4rem ; padding-bottom:0.5rem }
    #breadcrumb a  { font-weight:300 }

    .visual__title { font-size:4.4rem ; line-height:5.8rem ; letter-spacing:-0.2rem }
    .visual__title br { display:block }
    .visual__name     { font-size:1.6rem ; padding-top:3rem }
    


    /* Section */
    .sec__title { padding:1.5rem 0.5rem 1.7rem }   
    .p , .data__list > li , .table th , .table td , .note__item { font-size:1.8rem ; line-height:3.4rem }

 

    /* Image */
    .imgs { margin-top:4rem }
    .imgs::after { display:block ; content:"" ; clear:both }
    .imgs .img    { margin:0 ; max-width:63.5rem ; width:49.6093% }
    .imgs .img:nth-child(1) { float:left }
    .imgs .img:nth-child(2) { float:right }

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



    /* List */      
    .data__list > li::after { top:1.6rem } 
    .table thead th { font-size:1.6rem ; line-height:2.8rem }
    .data__list.bar > li::after { top:1.6rem }



    /* Table */
    .table.scroll { overflow:inherit }
    .table.scroll table { width:100% }

    .resp table { display:table }
    .resp .table__caption { display:table-caption }
    .resp colgroup { display:table-column-group }
    .resp thead { display:table-header-group }
    .resp tbody { display:table-row-group }
    .resp tfoot { display:table-footer-group }
    .resp tr    { display:table-row ; border:0 ; padding:0 }
    .resp th , .resp td { 
        display:table-cell ; text-align:center ; line-height:2.6rem ; 
        border:solid 1px #e5e5e5 ; padding:0.8rem 0.3rem 1rem ;
    }
    .resp tbody td::before , .resp tbody th::before { display:none }

    .resp th.td__left , .resp td.td__left { text-align:left }
    .resp th.td__right , .resp td.td__right { text-align:right }

   

    /* Article archive */
    .articel__container::after , #articel_PN::after { display:block ; content:"" ; clear:both }
    #articel_PN , #article_archive { margin:0 }
    #articel_PN , .articel__PN__item:nth-child(1) { float:left }
    #article_archive , .articel__PN__item:nth-child(2) { float:right }
    #articel_PN { width:80% }
    #article_archive { width:18% }
    .articel__PN__item { margin:0 ; width:49.5327% }
    .articel__PN__item > a , #article_archive_open , #article_archive_list a  { font-size:1.8rem }
    .articel__PN__item > a { display:block ; word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis }
    .articel__PN__item , #article_archive_open { padding-top:1.5rem ; padding-bottom:1.7rem }
    #article_archive_list { max-width:50rem ; bottom:7rem ; }    
     

 
    /* Board list */
    .board__table { display:table ; border-spacing:0 ; border-collapse:collapse }
    .board__table caption  { display:table-caption }
    .board__table colgroup { display:table-column-group }
    .board__table thead    { display:table-header-group }
    .board__table tbody    { display:table-row-group }
    .board__table tfoot    { display:table-footer-group }
    .board__table tr       { display:table-row }
    
    
    .b__num , .board__table tr , .board__table tr:hover ,
    .board__table th.b__row , .board__table td.b__row { 
        border:none ; padding:0 ; margin:0 ; box-shadow:none ; 
        border-radius:0 ; background:none ;
    }

    .board__table th , .board__table td , 
    .board__table th.b__row , .board__table td.b__row { 
        display:table-cell ; vertical-align:middle ; text-align:center ;
        word-break:keep-all ; border:solid 1px #e5e5e5 ;
        padding:1rem 0.5rem 1.2rem ;
    }  
    .board__table tbody th , .board__table tbody td ,
    .board__table tfoot th , .board__table tfoot td ,
    .board__table th.b__row , .board__table td.b__row { border-top:none } 
    .board__table th , .board__table td { font-size:1.8rem } 
    .board__table th br , .board__table td br { display:block }

    .board__table thead th { 
        font-size:1.4rem ; font-weight:400 ; color:#111111 ; 
        background-color:#f7f7f7 ; border-color:#cecece }

    .b__num { 
        padding:0 ; display:inline ; 
        color:inherit ; line-height:inherit ; font-weight:inherit ; font-size:inherit }    
   
    .board__link { 
        display:block ; position:relative ; text-align:left ; padding-left:1.5rem ;
        font-size:2rem ; 
    }
    .board__link:hover   { text-decoration:none }
    .board__link::before {
        display:block ; content:"" ; width:0.5rem ; height:0.5rem ; 
        border:solid 0.2rem #111111 ; border-left:0 ; border-bottom:0 ; opacity:0.3 ;  
        position:absolute ; left:0.5rem ; top:1.3rem ; transform:translate(-50%,-50%) rotate(45deg) ;
    }

    .board__link::before ,
    .board__table tbody th , .board__table tbody td , .board__table tfoot th , .board__table tfoot td { transition:0.3s all }
    .board__table tbody tr:hover th , .board__table tbody tr:hover td ,
    .board__table tfoot tr:hover th , .board__table tfoot tr:hover td { border-bottom:solid 1px #1396cd }
    .board__link:hover::before { opacity:1 ; border-color:#1396cd } 


    /* Accordion */
    .acc__header { position:relative ; padding:1.3rem 5rem 1.5rem 5.5rem }
    .acc__title  { font-size:2.4rem ; line-height:3.4rem }
    .acc__num {top:1.6rem ; left:2rem }
    .acc__open > span { top:2.1rem }

    .acc__body { padding:0 3rem } 



    /* Button */ 

 

    /* Mobile only */
    .mobile__only { display:block ; overflow:hidden ; width:1px ; height:1px ; position:relative }
    .mobile__container {
        position:absolute ; left:1px ; top:1px ;
        opacity:0 ; 
    }


} 
    
@media print { }