@charset "utf-8"; 
/* MOBILE */

body { background:linear-gradient(to bottom , #313131 0 , #313131 20rem , #ffffff 20rem , #ffffff 100% ) }



/* visual */
#visual { margin-bottom:5rem } 
.visual__container { position:relative ; overflow:hidden }
.visual__container , .visual__img { width:100% ; height:30rem }
.visual__img { background:url(../img_sub/SW_visual_mobile.jpg) no-repeat center ; background-size:cover }

.visual1 .visual__img { background-image:url(../img_sub/SW_visual10_mobile.jpg) }
.visual2 .visual__img { background-image:url(../img_sub/SW_visual20_mobile.jpg) }
.visual3 .visual__img { background-image:url(../img_sub/SW_visual30_mobile.jpg) }
.visual4 .visual__img { background-image:url(../img_sub/SW_visual40_mobile.jpg) }
.visual5 .visual__img { background-image:url(../img_sub/SW_visual50_mobile.jpg) }
.visual6 .visual__img { background-image:url(../img_sub/SW_visual60_mobile.jpg) }
.visual7 .visual__img { background-image:url(../img_sub/SW_visual70_mobile.jpg) }

.visual__img span , .visual__txt { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.01) }
.visual__img span { 
    display:block ; width:100% ; height:100% ;   
    background:#000000 ; opacity:0.25 ;
}
.visual__txt { width:90% }
.visual__tag , .visual__title { 
    display:block ;
    font-family:"GongGothicMedium",sans-serif ;
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; text-align:center ;
}
.visual__tag   { font-size:2rem ; line-height:2.8rem ; margin-bottom:1.5rem }
.visual__title { font-size:4rem ; line-height:5rem }
.visual__title::after { 
    display:inline-block ; content:"." ;;
    font-family:inherit ; font-weight:inherit ; line-height:inherit ; text-shadow:inherit ;
    color:#ff9828
}



/* breadcrumbs */
.breadcrumbs { width:100% ; padding:0.7rem 1rem ; border-bottom:solid 1px rgba(0,0,0,0.1) }
.bread__list { font-size:0 ; text-align:left }
.bread__deep { display:inline-block ; padding-right:2rem ; position: relative } 
.bread__deep::after {
    display:block ; content:"" ; width:0.6rem ; height:0.6rem ;
    border:solid 1px rgba(0,0,0,0.3) ; border-left:none ; border-bottom:none ; 
    position:absolute ; right:0.5rem ; top:50% ; transform:translate(-50%,-50%) rotate(45deg) ;
}
.bread__deep:last-child:after { display:none }
.bread__link  { 
    display:block ;
    font-size:1.4rem ; line-height:2.4rem ; padding-bottom:0.2rem }
a.bread__link { transition:0.3s all }
a.bread__link:hover , a.bread__link:focus { color:#111111 }



/* container */
#container { width:96% ; margin:0 auto }
.SW__p , .note__item { font-size:1.8rem ; line-height: 3.4rem ; letter-spacing:-0.05rem ; text-align:justify } 
.SW__p { margin-bottom:2.5rem }
.SW__p:last-child { margin-bottom:0 }
.SW__p a:hover , .SW__p a:focus , .note__item a:hover , .note__item a:focus { text-decoration:underline }
.SW__box { border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.6rem ; padding:1rem 3rem }



/* page info */
.page__info { width:96% ; max-width:60rem ; margin:0 auto ; padding-top:8rem }
.page__item.home { display:none } 
.page__item { margin-bottom:0.5rem }
.page__link , .PN__tag::before { transition:0.3s all }
.page__link , .TH__header { font-size:1.8rem ; line-height:3rem ; padding:1rem 1rem 1rem 5rem ; border-radius:0.6rem }
.page__link {
    display:block ; overflow:hidden ;
    position:relative ; background-color:#ffffff ;
    border:solid 1px rgba(0,0,0,0.1)
}
.page__link:hover , .page__link:focus { 
    color:#111111 ;
    border-color:rgba(0,0,0,0.2) ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3) }
.page__jump { margin-bottom:0.5rem }
.PN__tag , .PN__tag::after { position:absolute ; top:50% ; transform:translateY(-50%) }
.PN__tag {
    width:4rem ; height:4rem ; left:0 ;
    font-size:0 ; color:transparent ; 
}
.PN__tag::before , .PN__tag::after { display:block ; content:""  }
.PN__tag::after {
    width:1px ; height:3rem ; right:0 ;
    background-color:#000000 ; opacity:0.1 ;   
}
.PN__tag::before { 
    width:0.8rem ; height:0.8rem ; opacity:0.6 ;
    border:solid 1px #000000 ; border-bottom:0 ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%)
} 
.page__link:hover .PN__tag::before , .page__link:focus .PN__tag::before { opacity:1 }

.prev .PN__tag::before { 
    border-right:none ; transform:translate(-50%,-50%) rotate(-45deg) ;
    left:60%
} 
.next .PN__tag::before {
    border-left:none ; transform:translate(-50%,-50%) rotate(45deg) ;
    left:50%
}
.prev .page__link:hover .PN__tag::before , .prev .page__link:focus .PN__tag::before { transform:translate(-50%,-50%) rotate(-45deg) scale(1.1) }
.next .page__link:hover .PN__tag::before , .next .page__link:focus .PN__tag::before { transform:translate(-50%,-50%) rotate(45deg) scale(1.1) }

.this__history , .TH__header { position:relative }
.TH__header    { 
    padding-left:2rem ; padding-right:5rem ;
    background-color:#313131 ; border:solid 1px rgba(0,0,0,0) ;
    color:#ffffff
}
.open .TH__header { 
    background-color: #ffffff; border-color:rgba(0,0,0,0.2)  ;
    color:#111111
}
.TH_header__title { font-size:inherit ; color:inherit ; font-weight:inherit ; line-height:inherit }
.TH__list__open , .TH__list__close {
    position:absolute ; left:0 ; top:0 ; 
    display:block ; overflow:hidden  ; width:100% ; height:100% ;
    font-size:0 ; color:transparent
}
.TH__header , .TH__list__open , .TH__list__open::after , .TH__list__close , .TH__list__close::after  { transition:0.3s all }
.TH__list__open::after , .TH__list__close::after { 
    display:block ; content:"" ; width:0.8rem ; height:0.8rem ; 
    position:absolute ; right:2rem ; top:45% ; transform:translate(-50%,-50%) rotate(45deg) ;
    border:solid 0.2rem #ffffff ; border-top:none ; border-left:none ; opacity:0.8 ;
}
.TH__list__close::after { 
    transform:translate(-50%,-50%) rotate(225deg) ; top:55% ;
    border-color:#111111 ;
}
.TH__list__close , .open .TH__list__open { display:none }
.open .TH__list__close { display:block }
 
.TH__list__open:hover::after , .TH__list__open:focus::after { transform:translate(-50%,-50%) rotate(45deg) scale(1.1) ; opacity:1 ; }
.TH__header:hover { background-color:#111111 }
.open .TH__list__box , .TH__item > a { transition:0.3s all }

.TH__list__box {
    display:block ; width:100vw ; height:0 ; overflow:hidden ; opacity:0 ;
    position:fixed ; left:0 ; top:0 ; z-index:100 ;
    background-color:rgba(0,0,0,0.6);
}
.open .TH__list__box { height:100vh ; overflow:auto ; opacity:1  }
.TH__list__inner     {  
    width:90% ; max-width:50rem ;  display:none ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    background-color: #ffffff; border-radius:1rem ;
    padding:3rem ;
}
.open .TH__list__inner { display:block } 
.TH__list { border-top:solid 0.2rem #ff9828 ; height:36.2rem ; overflow:auto ; margin-bottom:1rem ; } 
.TH__item > a { 
    display:block ; padding:0.8rem 0.2rem ;
    font-size:1.8rem ; line-height:2.8rem ;
    border-bottom:solid 0.1rem rgba(0,0,0,0.1) ; 
} 
.TH__item > a:hover , .TH__item > a:focus { color:#111111 ; border-color:rgba(0,0,0,0.3) }

.TH__box__close { 
    font-size:0 ; color:transparent ; display:block ; overflow:hidden ;
    width:2rem ; height:2rem ; position:relative ; margin:auto }
.TH__box__close > b , .TH__box__close > b::before , .TH__box__close > b::after { display:block ; position:absolute ; left:50% ; top:50% }
.TH__box__close > b { 
    transition:0.3s all ; opacity:0.7 ;
    width:100% ; height:100% ; transform:translate(-50%,-50%) }
.TH__box__close > b::before , .TH__box__close > b::after { content:"" ; width:100% ; height:0.2rem ; background-color:#111111}
.TH__box__close > b::before { transform:translate(-50%,-50%) rotate(45deg) }
.TH__box__close > b::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.TH__box__close:hover > b , .TH__box__close:focus > b { opacity:1 ; transform:translate(-50%,-50%) rotate(90deg) scale(1.1) }



/* article */
.article__header { margin-bottom:5rem ; text-align:center }
.article__titile , .article__name { word-break:keep-all }
.article__titile { 
    font-size:3.4rem ; line-height:4.4rem ; font-family:"GongGothicMedium",sans-serif ; color:#111111 ;
    margin-bottom:2rem ;
}
.article__name { 
    display:inline-block ; border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.6rem ;
    font-size:2rem ; line-height:2.8rem ; font-weight:500 ;
    padding:1rem 2.5rem ;
}
.article__tag {
    display:block ; text-align:center ; margin-bottom:1.5rem ;
    font-size:2.2rem ; line-height:2.8rem ; font-weight:600 ; 
}

.SW__sec { margin-bottom:8rem }
.SW__sec__line { padding-bottom:6rem ; margin-bottom:6rem ; border-bottom:dashed 1px rgba(0,0,0,0.15) } 
.SW__sub__sec { margin-bottom:6rem }
.SW__sec:last-child , .SW__sub__sec:last-child , .note:last-child  , .SW__sec__line:last-child { margin-bottom:0 }
.SW__sec__line:last-child , .SW__sec__line:last-of-type { padding-bottom:0 ; border:none }
.SW__lead { font-size:1.8rem ; line-height:3.4rem ; font-weight:500 ; text-align:justify ; margin-bottom:3rem ; }
.SW__lead > span { 
    font-family:inherit ; font-size:inherit ; color:inherit ; font-weight:inherit ; text-align:inherit ;
    display:inline ; border-bottom:solid 1px rgba(0,0,0,0.1) ; padding-bottom:0.3rem ;
}

.SW__sec__title { 
    margin-bottom:2rem ;
    font-size:3rem ; line-height:3.4rem ; font-family:"GongGothicMedium",sans-serif ; color:#111111 }
.SW__sub__title {
    margin-bottom:1rem ;
    font-size:2.2rem ; line-height:4rem ; font-weight:600 ;
}
.SW__sub__title::after {  
    display:inline-block ; content:"" ; width:0.4rem ; height:0.4rem ; background-color:#ff9828 ;
    position:relative ; bottom:1.4rem ; margin-left:0.4rem ;
}

.SW__box__title {  font-size:2rem ; line-height:3rem ; font-weight:600 ; margin-bottom:1rem }
.SW__box__title > b {
    display:inline-block ; overflow:hidden ; border-radius:0.4rem ;
    background-color:#111111 ; padding:0.3rem 0.8rem  ;
    position:relative ; top:0.2rem ;
    font-size:1.4rem ; line-height:1.8rem ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
}



/* note */
.note { 
    border:solid 1px rgba(0,0,0,0.1) ; background-color:#f7f7f7 ;
    border-radius:0.6rem ; padding:2rem ; margin-bottom:4rem }
.note__title {
    font-size:2rem ; line-height:3rem ; font-weight:600 ; 
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
    padding-bottom:1rem ; 
}
.note__item { 
    padding:1rem 0.1rem ; line-height:2.8rem ;
    border-bottom:dashed 1px rgba(0,0,0,0.1) }
.note__item:last-child { border:none } 
.note__item > b { font-weight:600 }

.note__sup .note__item { position:relative ; padding-left:2rem }
.note__sup .note__item > .sup { position:absolute ; left:0 ; top:0.7rem }

.note.hidden { padding:1rem 2rem }
.note.hidden .note__title { 
    padding:0 ; margin:0 ; overflow:hidden ; width:0 ; height:0 ;
    font-size:0 ; color:transparent
}
.sup { font-size:1.4rem ; line-height:inherit ; position:relative ; bottom:0.4rem }
.note .sup { bottom:0.2rem ; font-weight:500 }



/* back button */
.back__btn__container { text-align:center }
.back__btn , .back__btn::before , .back__btn b { transition:0.3s all }
.back__btn { 
    display:inline-block ; overflow:hidden ; position:relative ; 
    font-size:2rem ; line-height:3rem ; font-weight:600 ;
    padding:1rem 2.8rem  1rem 6.5rem;
}
.back__btn:hover , .back__btn:focus { border-radius:0.6rem ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
.back__btn::before {
    display:block ; content:"" ; width:100% ; height:0.2rem ; 
    background-color:#313131 ;
    position:absolute ; left:0 ; bottom:0 ; z-index:-1 ;
}
.back__btn:hover::before , .back__btn:focus::before { height:100% }
.back__btn b {
    display:block ; width:3rem ; height:3rem ; opacity:0.5 ;
    position:absolute ; left:2.5rem ; top:50% ; transform:translateY(-50%) rotate(180deg) ;
    background:url(../img/icon_sprite.png) no-repeat -26rem -6rem ; background-size:auto 10rem ;
}
.back__btn:hover b , .back__btn:focus b {
    opacity:1 ; background-position:-26rem -1rem ;
}

 

/* image */
.img , .img img , .gallery , .gallery__inner , .gallery__img img { width:100% }
.img , .imgs , .gallery { margin:0 auto 4rem ; font-size:0 }  
.img:last-child , .imgs:last-child { margin-bottom:0  }
.img , .gallery   { padding-top:1.5rem }
.img              { max-width:55rem }
.img img , .img__line , .img__line::after { border-radius:0.6rem }
.img__line        { position:relative ; font-size:0 }
.img__line::after {
    display:block ; content:"" ; width:100% ; height:100% ; box-sizing:border-box ;
    border:solid 1px rgba(0,0,0,0.1);
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.img__caption , .img__caption__bar  , .img__caption__underline { 
    padding-top:0.7rem ; display:block ; width:100% ; 
    font-size:1.6rem ; line-height:2rem ;
}
.img__caption > b , .table__caption > b { 
    display:inline-block ; background-color:#313131 ; padding:0.2rem 0.7rem ; border-radius:0.4rem ;
    font-size:1.2rem ; line-height:1.8rem ; color:#ffffff ; font-weight:500 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    position:relative ; top:-0.1rem ; margin-right:0.1rem
}

.imgs .img { margin-bottom:3rem }
.imgs .img:last-child { margin-bottom:0 }

.img__caption__bar { position:relative ; padding-left:1rem }
.img__caption__bar::before {
    display:block ; overflow:hidden ; content:"" ;
    width:1px ; height:1.4rem ; background-color:#000000 ; opacity:0.2 ;
    position:absolute ; left:0 ; top:1rem
}
.img__caption__underline { 
    text-align:center ; padding:1rem 0.2rem ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
} 

.gallery__inner { font-size:0 ; text-align:center }
.gallery__img , .gallery__img::before , .gallery__img img { border-radius:0.6rem }
.gallery__img   { 
    width:98% ; margin:0.3rem 1% ; position:relative ;
    display:inline-block ;  
}
.gallery__img::before {
    display:block ; content:"" ; width:100% ; height:100% ; box-sizing:border-box ;
    border:solid 1px rgba(0,0,0,0.1) ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) 
} 
.gallery .img__caption  { text-align:center }

.photo__box , .photos { text-align:center ; font-size:0 }
.photo__box { padding-top:3rem ; margin-bottom:4rem } 
.photos { margin:0 auto 0.5rem }
.photo__box:last-child , .photos:last-child { margin-bottom:0 }
.photos img { width:99% ; border-radius:0.6rem ; margin:0 0.5% 0.5rem }
.photos.col2 img { max-width:59rem }
.photos.col3 img { max-width:39rem }
.photos:last-of-type , .photos:last-of-type img:last-child ,
.photos.col2:last-child , .photos.col3:last-child { margin-bottom:0 }



/* Aaccordion */ 
.acc__guide {
    display:block ;
    margin-bottom:1.5rem ; font-size:1.6rem ; line-height:2.8rem }

.acc__item , .acc__btn::before , .acc__title , .acc__body , .acc__body::before { transition:0.3s all }
 
.acc__item { 
    background-color:#ffffff ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ; margin-bottom:0.5rem }

.acc__item.open , .acc__item.open:hover , .acc__item:hover { box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3) }
.acc__item.open , .acc__item.open:hover { border-color:#ff9828 } 
.acc__item:hover      { border-color:rgba(0,0,0,0.2) }     
.acc__item:last-child { margin-bottom:0 }

.acc__header { position:relative }
.acc__title  {
    font-size:2.2rem ; line-height:3rem ; font-family:"GongGothicMedium",sans-serif ;
    padding:1rem 4rem 1rem 1rem
}
.acc__item:hover .acc__title , .open .acc__title { color:#000000 }
.acc__btn    {
    display:block ; width:100% ; height:100% ; 
    position:absolute ; left:0 ; top:0 ;
    font-size:0 ; color:transparent
}
.acc__btn::before {
    display:block ; content:"" ; width:0.8rem ; height:0.8rem ;
    border:solid 0.2rem #ff9828 ; border-top:none ; border-left:none ;
    position:absolute ; right:1rem ; top:45% ; transform:translate(-50%,-50%) rotate(45deg);
}
 
.acc__btn.accClose::before  { 
    top:55% ; border-color:#444444 ;
    transform:translate(-50%,-50%) rotate(225deg); 
}
.acc__btn.accOpen:hover::before , .acc__btn.accOpen:focus::before   { transform:translate(-50%,-50%) rotate(45deg) scale(1.1) }
.acc__btn.accClose:hover::before , .acc__btn.accClose:focus::before { transform:translate(-50%,-50%) rotate(225deg) scale(1.1) }
 
.acc__btn.accClose , .acc__body__inner , .open .acc__btn.accOpen { display:none }
.open .acc__btn.accClose , .open .acc__body__inner      { display:block }

.acc__body { overflow:hidden ; padding:0 2rem ; position:relative }
.open .acc__body  { padding:2rem }
.acc__body::before {  
    display:block ; content:"" ; width:0 ; height:1px ; background-color:#000000 ; opacity:0 ;
    position:absolute ; left:50% ; top:0 ; transform:translateX(-50%) ;
}
.open .acc__body::before { opacity:0.1 ; width:98% }

.acc__index { margin-bottom:5rem }
.acc__index__item {
    border-radius:0.4rem ; overflow:hidden ;
    font-size:1.8rem ; line-height:3rem ; font-weight:500 ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    border:solid 1px rgba(0,0,0,0.1) ; margin-bottom:0.3rem ;
    background-color:#313131 ; padding:0.5rem 1.5rem ;
}
.acc__footer { border-top:dashed 1px rgba(0,0,0,0.1) ; margin-top:2rem ; padding-top:2rem }
.acc__end__btn , .acc__end__btn::before , .acc__end__btn::after { transition:0.3s all }
.acc__end__btn { 
    display:block ; overflow:hidden ; opacity:0.5 ; 
    width:2rem ; height:2rem ; margin:auto ; position:relative ;
    font-size:0 ; color:transparent
}
.acc__end__btn:hover , .acc__end__btn:focus { opacity:1 } 
.acc__end__btn::before , .acc__end__btn::after { 
    display:block ; content:"" ; width:100% ; height:1px ; background-color:#000000 ;
    position:absolute ; left:50% ; top:50% ;
}
.acc__end__btn::before { transform:translate(-50%,-50%) rotate(45deg) }
.acc__end__btn::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.acc__end__btn:hover::before , .acc__end__btn:focus::before { transform:translate(-50%,-50%) rotate(135deg) }
.acc__end__btn:hover::after , .acc__end__btn:focus::after   { transform:translate(-50%,-50%) rotate(45deg) }



/* rw table */ 
.rw__table , .rw__table table { width:100% }
.rw__table table { 
    border:0 ; border-spacing:0 ; border-collapse:collapse ;
    border-top:solid 0.2rem #f78f1e ;
}

.rw__table thead { display:none }
.rw__table tbody , .rw__table tr { display:block }
.rw__table tr { 
    padding:1.5rem 0.2rem 1rem ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
}
.rw__table tr:hover { background-color:#f7f7f7 ; transition:0.3s all }
.rw__table td {
    display:inline-block ; margin-right:4rem ; margin-bottom:0.5rem ;
    font-size:1.8rem ; line-height:2.5rem ;
}
.rw__table td::before {
    display:inline-block ; border-radius:0.4rem ; padding:0.2rem 0.5rem 0.2rem ; margin-right:0.5rem ;
    font-size:1.4rem ; line-height:1.8rem ; color:#ffffff ;
    background-color:#313131 ; position:relative ; top:-0.2rem
} 

.rw__table tfoot { 
    display:block ; border-top:solid 1px rgba(0,0,0,0.1) ; margin-top:0.2rem ;
    background:#f7f7f7 }
.rw__table tfoot td { font-weight:500 ; color:#111111 }  
 


/* qna */ 
.qna__q , .qna__a { position:relative ; padding-left:3.7rem }
.qna__q {
    font-size:2.2rem ; line-height:3rem ; font-weight:600 ; color:#111111 ;
    margin-bottom:1rem ; letter-spacing:-0.1rem ; word-break:keep-all ;
}  
.qna__icon__q , .qna__a::before {
    font-size:0 ; color:transparent ;
    width:3rem ; height:3rem ; display:block ; overflow:hidden ; border-radius:100% ;
    background:url(../img_sub/icon_qna.png) no-repeat 0 0 ; background-size:3rem auto ;
    position:absolute ; left:0 ; top:0
}
.qna__icon__q   { background-color:#ff9828 ; background-position:left top }
.qna__a::before { 
    content:"답변." ; top:0.2rem ;
    background-color:#d6d6d6 ; background-position:left bottom ;
}



/* mov */ 
.SW__mov , .SW__mov iframe { width:100% }
.SW__mov { margin:0 auto 6rem }
.SW__mov iframe { overflow:hidden ; border-radius:0.6rem } 



/* tab */
.tab__container { margin-bottom:5rem }
.tab__home { display:none }
.tab__item , .tab__link { transition:0.3s all ; border-radius:0.4rem }
.tab__item { margin-bottom:0.5rem }
.tab__item:hover { box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3) ; }
.tab__link { 
    display:block ; overflow:hidden ; width:100% ; height:100% ; padding:0.9rem 1.5rem ;
    font-size:1.8rem ; line-height:3rem ; word-break:keep-all ;
    background-color:#ffffff ; border:solid 1px rgba(0,0,0,0.1) ;
}
.tab__link::before {
    content:"" ; display:inline-block ;
    width:0.4rem ; height:0.4rem ; background-color:#ff9828 ;
    position:relative ; bottom:1.1rem ; margin-right:0.3rem
}
.tab__link:hover , .tab__link:focus {
    border-color:rgba(0,0,0,0.2) ; 
    color:#000000
}
.tab__link.now , .tab__link.now:hover , .tab__link.now:focus {  
    background-color:#313131 ; border-color:#313131 ;
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
} 


/* PC */
@media screen and (min-width:1024px){ 

    body { background:#ffffff} 
    body::before {
        display:block ; content:"" ; width:100% ; height:40rem;
        position:absolute ; left:0 ; top:0 ; z-index:-1 ;  
        background:url(../img/bg_txt.png) no-repeat right top #313131 ;
    } 



    /* visual */
    #visual { 
        width:96% ; max-width:150rem ; margin:0 auto 7rem ;
        height:50rem ; position:relative ;
    }  
    .visual__container , .breadcrumbs { border-radius:1.4rem ; overflow:hidden ; position:absolute ; left:0 }
    .visual__container { height:auto ; top:0 ; z-index:5 }
    .visual__container , .visual__img { height:45rem }
    .visual__img       { background-image:url(../img_sub/SW_visual.jpg) }

    .visual1 .visual__img { background-image:url(../img_sub/SW_visual10.jpg) }
    .visual2 .visual__img { background-image:url(../img_sub/SW_visual20.jpg) }
    .visual3 .visual__img { background-image:url(../img_sub/SW_visual30.jpg) }
    .visual4 .visual__img { background-image:url(../img_sub/SW_visual40.jpg) }
    .visual5 .visual__img { background-image:url(../img_sub/SW_visual50.jpg) }
    .visual6 .visual__img { background-image:url(../img_sub/SW_visual60.jpg) }
    .visual7 .visual__img { background-image:url(../img_sub/SW_visual70.jpg) }
 
    .visual__img span  { overflow:hidden ; opacity:0.4 }
    .visual__img span:last-child { width:57rem ; height:57rem ; border-radius:100% ; opacity:0.2 }
    .visual__tag   { font-size:2.4rem ; line-height:3rem ; margin-bottom:3rem }
    .visual__title { font-size:5rem ; line-height:5.8rem }



    /* breadcrumbs */
    .breadcrumbs { 
        border-radius:0 0 1.4rem 1.4rem ; z-index:4 ; border:none ;
        bottom:0 ; padding:5rem 0 0 ; 
        background:linear-gradient(to right , #ff9828 0 , #ff9828 10rem , #313131 10rem , #313131 100% )
     }
    .bread__list { width:100% ; border:none }   
    .bread__list::after { display:block ; content:"" ; clear:both } 
    .bread__deep { float:left ; display:block ; padding:0 ; margin:0 }
    .bread__deep:after , .bread__deep:last-child:after {
        display:block ; border:0 ; width:1px ; height:100% ; 
        position:absolute ; right:0 ; top:0 ; transform:none ;
        background-color:#ffffff ; opacity:0.15 ;
    }
    .bread__link { 
        font-size:1.6rem ; line-height:2.8rem ; color:#ffffff ;  
        padding:1rem 3rem 1.2rem }
    a.bread__link { color:rgba(255,255,255,0.8) }
    a.bread__link:hover , a.bread__link:focus { color:#ffffff ; background-color:rgba(0,0,0,0.3) }
    .deep0 .bread__link , .deep0 .bread__link:hover , .deep0 .bread__link:focus { background-color:#ff9828 }
    .deep0 .bread__link { color:#313131 ; text-shadow:none } 
    .deep0 .bread__link:hover , .deep0 .bread__link:focus { color:#000000 }
    .bread__deep .bread__link::before { 
        font-size:0 ; color:transparent ;
        display:block ; overflow:hidden ; width:0 ; height:0 ; position:absolute ; 
    }
    .bread__deep:nth-child(1) .bread__link::before { content:"1단계: " }
    .bread__deep:nth-child(2) .bread__link::before { content:"2단계: " }
    .bread__deep:nth-child(3) .bread__link::before { content:"3단계: " }
    .bread__deep:last-child .bread__link::before   { content:"현재 위치:" }
 
    .deep0 .bread__link::before { 
        display:inline-block ; content:"" ; width:2rem ; height:2rem ;
        background:url(../img_sub/icon_home.png) no-repeat left top ; background-size:auto 2rem ;
        position:relative ; top:0.4rem ; margin-right:0.5rem ; opacity:0.7 ;
        transition:0.3s all ;
    } 
    .deep0 .bread__link:hover::before , .deep0 .bread__link:focus::before { opacity:1 ; transform:scale(1.1) }



    /* container */
    #container { margin-bottom:10rem ; max-width:120rem }
    .SW__box   { width:auto ; display:inline-block }



    /* page info */
    .page__info { width:96% ; max-width:140rem ; padding:0 ; margin-bottom:5rem ; position:relative }
    .page__info::before , .page__info::after , .page__jump::after , .home .page__home__item::before { display:block ; content:"" }
    .page__info::before { 
        width:100% ; height:0.5rem ; 
        background:url(../img_sub/net_line.gif) repeat-x 0 0  ;
        position:absolute ; left:0 ; top:50% ; z-index:-1 ; transform:translateY(-50%) ;
    }
    .page__info::after , .page__jump::after { clear:both }
    .page__jump , .this__history { margin:0 ; padding:0 }
    .page__jump    { width:70% ; max-width:88rem ; float:left ; padding-left:6.5rem ; position:relative } 
    .this__history { width:29% ; max-width:30rem ; float:right }
    .page__item.home , .home .page__home__item { width:6rem ; height:6rem ; display:block }
    .page__item.home { position:absolute ; left:0 ; top:0 }
    .home .page__home__item { 
        overflow:hidden ; border-radius:0.6rem ;
        font-size:0 ; color:transparent ;  
        background-color:#ff9828 ; transition:0.3s all ;
    } 
    .home .page__home__item:hover , .home .page__home__item:focus { background-color:#111111 }
    .home .page__home__item::before { 
        width:4rem ; height:4rem ;
        position:absolute ; left:50% ;top:50% ; transform:translate(-50%,-50%) ;
        background:url(../img_sub/icon_home.png) no-repeat right top ; background-size:auto 4rem ;
    }

    .page__item.prev , .page__item.next { width:49.7% ; margin:0 }
    .page__item.prev { float:left }
    .page__item.next { float:right }
    .page__link , .TH__header { padding-top:1.4rem ; padding-bottom:1.4rem }
    .page__link { word-wrap: break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis }
    .next .page__link { padding-left:1rem; padding-right:5rem ; text-align:right }
    .next .PN__tag    { left:auto ; right:0}
    .next .PN__tag::after { left:0 ; right:auto }
 
    .TH__list__box , .TH__list__inner { padding:0 ; margin:0 }
    .TH__list__box  { 
        width:100% ; height:0 ; background:none ;
        position:absolute ; left:0 ; top:auto ; bottom:6.5rem ; z-index:100 ;
    }
    .open .TH__list__box { height:50rem ; overflow:hidden }
    .TH__list__inner { width:100% ; background-color:rgba(0,0,0,0.8 ) ; padding:2rem }
    .open .TH__list__inner { position:absolute ; left:0 ; bottom:0 ; top:auto ; transform:none }
    .TH__item > a { color:rgba(255,255,255,0.8) ; border-color:rgba(255,255,255,0.1) }
    .TH__item > a:hover , .TH__item > a:focus { color:#ffffff ; border-color:#ff9828 }
    .TH__box__close > b::before , .TH__box__close > b::after { background-color:#ffffff ; height:1px }

    #SW81 .page__jump , #SW82 .page__jump , #SW83 .page__jump , #SW84 .page__jump , #SW85 .page__jump ,
    #SW86 .page__jump { width:100% ; max-width:none }




    /* article */
    .article__header { position:relative ; padding-bottom:8rem }
    .article__header::after { 
        display:block ; content:"" ; width:0.2rem ; height:4rem ; background-color:#ff9828 ;
        position:absolute ; left:50% ; bottom:0 ; transform:translateX(-50%) ;
    }
    .article__titile , .article__name { display:block ; margin:0 }
    .article__titile { font-size:4rem ; line-height:5rem } 
    .article__name   { padding:3rem 0 0 ; border:none ; border-radius:0 }



    /* note */
    .note { padding:1.2rem 4rem 1.2rem 16rem ; position:relative }
    .note.hidden { padding:1.2rem 4rem }
    .note__title { 
        padding:0 ; border:none ;
        font-size:2.2rem ; position:absolute ; left:4rem ; top:2rem }
    .note__item { border-bottom:solid 1px rgba(0,0,0,0.07) }    




    /* image */
    .img.left , .img.right { padding-top:0.7rem }
    .img.left    { float:left ; margin:0 5rem 0.5rem 0 }
    .img.right   { float:right ; margin:0 0 0.5rem 5rem }

    .imgs        { width:100% }
    .imgs::after { display:block ; content:"" ; clear:both }
    .imgs.col2 .img   { margin:0 ; width:49.28% ; max-width:69rem }
    .imgs.col2 .img:first-child { float:left }
    .imgs.col2 .img:last-child  { float:right }

    .imgs.col3 .img { margin:0 ; width:32.14%; max-width:45rem ; float:left }
    .imgs.col3 .img:first-child { margin-right:1.78% }
    .imgs.col3 .img:last-child  { float:right ; margin:0 }

    .imgs.col4 .img { margin:0 1.66rem 0 0 ; width:23.75% ; max-width:28.5rem ; float:left }
    .imgs.col4 .img:last-child , .imgs.col4 .img:nth-last-child(2) { margin-right:0 }
    .imgs.col4 .img:last-child { float:right }
 
    .gallery__inner , .gallery__inner::before  { overflow:hidden ; border-radius:0.6rem }
    .gallery__inner { position:relative } 
    .gallery__inner::after , .photos.col2::after , .photos.col3::after { display:block ; content:"" ; clear:both }
    .gallery__img , .gallery__img img { border-radius:0 }
    .gallery__img { display:block ; float:left ; width:50% ; margin:0 ;  ; position:static } 
    .gallery__img::before    { display:none }
    .gallery .img__caption   { text-align:left }
 
    .gallery__inner::before {
        display:block ; content:"" ;
        width:100% ; height:100% ; box-sizing:border-box ;
        border:solid 1px rgba(0,0,0,0.1) ;
        position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) 
    } 

    .photos { margin-bottom:2rem }
    .photos:last-of-type { margin-bottom:0 }
    .photos img { margin:0 ; width:100% }
    .photos.col2 img , .photos.col3 img { float:left ; margin:0 }
    .photos.col2 img { width:49.1666% }
    .photos.col3 img { width:32.5% }
    .photos.col3 img:first-child { margin-right:1.25% }
    .photos.col2 img:last-child , .photos.col3 img:last-child{ float:right }
 
      
 

    /* Aaccordion */ 
    .acc__title {
        font-size:2.4rem ; 
        padding:1.5rem 5rem 1.3rem 2.5rem
    }
    .acc__btn::before { right:2rem }

    .acc__index__item { font-size:2rem ; padding:0.8rem 2.5rem 0.8rem }
    .acc__body { padding:0 4rem }
    .open .acc__body  { padding:3rem 4rem }
    .open .acc__body::before { width:96% }



    /* rw table */
    .rw__table table { border:none }
    .rw__table thead { display:table-header-group }
    .rw__table tbody { display:table-row-group }
    .rw__table tfoot { display:table-footer-group ; border:0 ; background:none } 
    .rw__table tr    { display:table-row ; border:none ; padding:0 }
    .rw__table tr:hover { background:none }
    .rw__table td , .rw__table th { vertical-align:middle ; word-break:keep-all ; padding:1.5rem 1rem 1.7rem }
    .rw__table td    { display:table-cell ; margin:0 }
    .rw__table td::before { display:none }
    .rw__table thead th {
        font-size:1.6rem ; line-height:1.8rem ; text-align:center ; font-weight:500 ;
        border-top:solid 1px #e5e5e5 ; border-bottom:solid 0.2rem #f78f1e ;
        position:relative 
    }
    .rw__table thead th::after {
        display:block ; content:"" ; width:1px ; height:1rem ; 
        background-color:rgba(0,0,0,0.1) ;
        position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
    }
    .rw__table thead th:last-child:after { display:none }
    .rw__table td {
        text-align:center ; transition:0.3s all ;
        border:solid 1px #e5e5e5 ; border-top:none ; border-left:none ;
    }
    .rw__table td:last-child { border-right:none } 
    .rw__table tfoot td ,
    .rw__table tbody tr:hover td { background-color:#f7f7f7 }
    .rw__table tfoot tr:hover td { border-color:rgba(0,0,0,0.2) } 



    /* MOV */ 
    .SW__mov iframe { height:60rem } 
    

    
    /* tab */
    .tab__container { margin-bottom:7rem }
    .tab__list { 
        position:relative ; padding-left:5.5rem ; margin:0 ;
        display:flex ; flex-wrap:wrap ; justify-content:space-between ; align-items:stretch ;
    } 
    .col2 .tab__item { width:49.8% } 
    .col3 .tab__item { width:33% } 
    .col4 .tab__item { width:24.9% }  
    .tab__link { padding-left:1rem ; padding-right:1rem ; text-align:center }

    .tab__home , .tab__home__link , .tab__home__icon { display:block ; width:5rem ; height:5rem }
    .tab__home { position:absolute ; left:0 ; top:0 }
    .tab__home__link { 
        overflow:hidden ; border-radius:0.6rem ;
        font-size:0 ; color:transparent ; background-color:#313131 }
    .tab__home__link:hover , .tab__home__link:focus { background-color:#ff9828 } 

    .tab__home__link ,
    .tab__home__icon , .tab__home__icon b , .tab__home__icon span ,
    .tab__home__icon span::before , .tab__home__icon span::after { transition:0.3s all }
    .tab__home__icon b , .tab__home__icon span { display:block ; position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
    .tab__home__icon b    { display:block ; width:100% ; height:100% ; position:relative }
    .tab__home__icon span ,  .tab__home__icon span::before , .tab__home__icon span::after { height:0.2rem }
    .tab__home__icon span { width:50% ;  padding-left:0.4rem }
    .tab__home__icon span:nth-child(1) { top:35% }
    .tab__home__icon span:nth-child(2) { top:50% }
    .tab__home__icon span:nth-child(3) { top:65% }
    .tab__home__icon span::before , .tab__home__icon span::after { display:block ; content:"" ; background-color:#ffffff }  
    .tab__home__icon span::before { width:0.2rem ; position:absolute ; left:0 ; top:0 }
    .tab__home__icon span::after  { width:100% }

    .tab__home__link:hover .tab__home__icon b , .tab__home__link:focus .tab__home__icon b { transform:translate(-50%,-50%) rotate(180deg) }
    .tab__home__link:hover .tab__home__icon span::before , .tab__home__link:focus .tab__home__icon span::before ,
    .tab__home__link:hover .tab__home__icon span::after , .tab__home__link:focus .tab__home__icon span::after { background-color:#111111 } 
 
}   
 




/* PRINT */
@media print {   
}   
 
 