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

/* body */
.bg { 
    display:block ; width:100% ; height:10rem ;
    background-color:#313131 ;
    position:absolute ; left:0 ; top:0 ; z-index:-1 }


/* main */
#main { margin-bottom:8rem }



/* visual */
.visual { margin:0 auto 5rem }
.visual , .visual__container , .visual__img { width:100% }
.visual__container , .visual__img { position:relative }
.visual__img { 
    height:45rem ; overflow:hidden ; 
    background:url(../img_sub/visual_MB.jpg) no-repeat center ; background-size:cover }  
.visual__img::before {
    display:block ; content:"" ; width:100% ; height:100% ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.01) ;
    background:linear-gradient(to bottom ,
        rgba(0,0,0,0.1) 0% ,
        rgba(0,0,0,0.1) 40% ,
        rgba(0,0,0,0.6) 60% ,
        rgba(0,0,0,0.6) 100% );   
}

#visual11 .visual__img { background-image:url(../img_sub/visual11_MB.jpg) }
#visual12 .visual__img { background-image:url(../img_sub/visual12_MB.jpg) }
#visual13 .visual__img { background-image:url(../img_sub/visual13_MB.jpg) }
#visual14 .visual__img { background-image:url(../img_sub/visual14_MB.jpg) }
#visual15 .visual__img { background-image:url(../img_sub/visual15_MB.jpg) }

#visual21 .visual__img { background-image:url(../img_sub/visual21_MB.jpg) }
#visual22 .visual__img { background-image:url(../img_sub/visual22_MB.jpg) }
#visual23 .visual__img { background-image:url(../img_sub/visual23_MB.jpg) }
#visual24 .visual__img { background-image:url(../img_sub/visual24_MB.jpg) }
#visual25 .visual__img { background-image:url(../img_sub/visual25_MB.jpg) }

#visual31 .visual__img { background-image:url(../img_sub/visual31_MB.jpg) }
#visual32 .visual__img { background-image:url(../img_sub/visual32_MB.jpg) }
#visual33 .visual__img { background-image:url(../img_sub/visual33_MB.jpg) }
#visual34 .visual__img { background-image:url(../img_sub/visual34_MB.jpg) }
#visual35 .visual__img { background-image:url(../img_sub/visual35_MB.jpg) }

#visual41 .visual__img { background-image:url(../img_sub/visual41_MB.jpg) }
#visual42 .visual__img { background-image:url(../img_sub/visual42_MB.jpg) }
#visual43 .visual__img { background-image:url(../img_sub/visual43_MB.jpg) }
#visual44 .visual__img { background-image:url(../img_sub/visual44_MB.jpg) }
#visual45 .visual__img { background-image:url(../img_sub/visual45_MB.jpg) }

#visual51 .visual__img { background-image:url(../img_sub/visual51_MB.jpg) }
#visual52 .visual__img { background-image:url(../img_sub/visual52_MB.jpg) }
#visual53 .visual__img { background-image:url(../img_sub/visual53_MB.jpg) }
#visual54 .visual__img { background-image:url(../img_sub/visual54_MB.jpg) }
#visual55 .visual__img { background-image:url(../img_sub/visual55_MB.jpg) }

#visual84 .visual__img { background-image:url(../img_sub/visual_event_MB.jpg) }

.visual__box { 
    width:90% ; text-align:center ;
    position:absolute ; left:50% ; bottom:4rem ; transform:translateX(-50%) ;
}

.breadcrumbs { margin-bottom:2rem }
.BC__list { font-size:0 ; text-align:center }
.BC__item { display:inline-block ; padding-right:2.5rem ; margin-bottom:0.5rem ; position:relative }
.BC__item:last-child { padding-right:0 }
.BC__item::after {
    display:block ; content:"" ; width:0.6rem ; height:0.6rem ; opacity:0.5 ;
    border:solid 0.1rem #ffffff ; border-bottom:none ; border-left:none ;
    position:absolute ; right:0.8rem ; top:50% ; transform:translate(-50%,-50%) rotate(45deg) ;
}
.BC__item:last-child::after { display:none }

.BC__link , .visual__title { text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; word-break:keep-all }
.BC__link { 
    font-size:1.6rem ; line-height:2rem  ; color:rgba(255,255,255,0.7) ;
    transition:0.3s all ;
}
b.BC__link , .BC__link:hover , .BC__link:focus { color:#ffffff }
.visual__title { font-family:"GongGothicMedium",sans-serif ; font-size:3.6rem ; line-height:4.4rem ; color:#ff9828 } 

.visual__info { font-size:0 ; text-align:center ; padding-top:1rem }
.visual__info__item { display:inline-block ; margin:0 1rem 1rem }
.visual__info__item:last-child { margin-right:0 }
.visual__info__txt , .visual__info__tag {  display:inline-block ; line-height:3rem }
.visual__info__txt {   
    font-size:1.8rem ;color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    background-color:#313131 ; padding:0.5rem 2.5rem ; 
    border-radius:0 3rem 3rem 0 ;
}
.visual__info__tag {
    color:#111111 ; font-size:1.6rem ;  border-radius:3rem ;
    background-color:#ff9828 ; padding:0.5rem 1.5rem ; font-weight:500 ;
    position:relative ; right:-1.8rem 
}

 

/* main container */
.main__container { width:94% ; max-width:140rem ; margin:0 auto }

.ss__sec  { margin-bottom:8rem }
.ss__sub  { margin-bottom:6rem ; }
.sub__sub { font-size:70% ; vertical-align:-10%}

.intro { font-size:1.8rem ; line-height:3.4rem ; font-weight:500 ; text-align:justify ; margin-bottom:2.5rem }
.intro > 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 ;
}

.ss__p , .note__item , .data__list > li { font-size:1.8rem ; line-height: 3.4rem ; letter-spacing:-0.05rem } 
.ss__p { margin-bottom:2.5rem ; text-align:justify } 
.ss__p a:hover , .SW__p a:focus , .note__item a:hover , .note__item a:focus { text-decoration:underline }
 
.p__box { border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.6rem ; padding:1rem 3rem }

.note__item a { word-break:break-all }
 
.ss__sec:last-child , .ss__sub:last-child  , .intro:last-child , .ss__p:last-child  { margin-bottom:0rem }
  
.ss__sec__title { margin-bottom:1.5rem }
.ss__sec__title > b {
    display:inline-block ; position:relative ; padding:0 4.3rem 0 0 ; word-break:keep-all ;
    font-family:"GongGothicMedium",sans-serif ; font-size:2.8rem ; line-height:4rem ; color:#111111 ; font-weight:300 ; 
}
.ss__sec__title > b::after {
    width:4rem ; height:4rem ; display:block ; content:"" ;
    position:absolute ; right:0 ; top:-0.8rem ; 
    background:url(../img_sub/sub_sprite.png) no-repeat 0 0  ; background-size:100% auto ;
}
#SS11 .ss__sec__title > b::after , #SS12 .ss__sec__title > b::after , #SS13 .ss__sec__title > b::after ,
#SS14 .ss__sec__title > b::after , #SS15 .ss__sec__title > b::after { background-position:0 0 }
#SS21 .ss__sec__title > b::after , #SS22 .ss__sec__title > b::after , #SS23 .ss__sec__title > b::after ,
#SS24 .ss__sec__title > b::after , #SS25 .ss__sec__title > b::after { background-position:0 -4rem }
#SS31 .ss__sec__title > b::after , #SS32 .ss__sec__title > b::after , #SS33 .ss__sec__title > b::after ,
#SS34 .ss__sec__title > b::after , #SS35 .ss__sec__title > b::after { background-position:0 -8rem }
#SS41 .ss__sec__title > b::after , #SS42 .ss__sec__title > b::after , #SS43 .ss__sec__title > b::after ,
#SS44 .ss__sec__title > b::after , #SS45 .ss__sec__title > b::after { background-position:0 -12rem }
#SS51 .ss__sec__title > b::after , #SS52 .ss__sec__title > b::after , #SS53 .ss__sec__title > b::after ,
#SS54 .ss__sec__title > b::after , #SS55 .ss__sec__title > b::after { background-position:0 -16rem }

.ss__sub__title {
    font-size:2.4rem ; line-height:4.2rem ; font-weight:600 ; color:#111111 ;
    margin-bottom:1rem ; letter-spacing:-0.1rem ;
}
#SS11 .ss__sub__title , #SS12 .ss__sub__title , #SS13 .ss__sub__title , 
#SS14 .ss__sub__title , #SS15 .ss__sub__title ,
#SS31 .ss__sub__title , #SS32 .ss__sub__title , #SS33 .ss__sub__title , 
#SS34 .ss__sub__title , #SS35 .ss__sub__title { color:#f8860b } 
#SS21 .ss__sub__title , #SS22 .ss__sub__title , #SS23 .ss__sub__title , 
#SS24 .ss__sub__title , #SS25 .ss__sub__title ,
#SS51 .ss__sub__title , #SS52 .ss__sub__title , #SS53 .ss__sub__title , 
#SS54 .ss__sub__title , #SS55 .ss__sub__title { color:#2172c4 }  
#SS41 .ss__sub__title , #SS42 .ss__sub__title , #SS43 .ss__sub__title , 
#SS44 .ss__sub__title , #SS45 .ss__sub__title { color:#ed496b } 



/* 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 }




/* rw table */ 
.table__caption { 
    text-align:left ; font-size:2rem ; line-height:3rem ; font-weight:600 ; color:#111111 ;
    margin-bottom:1rem ;
}
.table__caption > b { top:0.4rem }
.rw__table { padding-top:1.5rem ; margin-bottom:4rem }
.rw__table:last-child { margin-bottom:0 }
.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 }  



/* data list */
.data__list { margin-bottom:3rem } 
.data__list > li     { 
    margin-bottom:1rem ; position:relative ;
    padding-left:1rem ;
}
.data__list:last-child ,
.data__list > li:last-child { margin-bottom:0 }
.data__list > li > b  , .ss__bold  { font-weight:600 ; color:#333333}
.data__list > li::before { 
    display:block ; content:"" ; width:0.4rem ; height:0.4rem ;
    background-color:#111111 ; opacity:0.3 ;
    position:absolute ; left:0 ; top:1.5rem
}

.data__list.noDot > li { padding-left:0 }
.data__list.noDot > li::before {display:none }




/* note */
.note { 
    border:solid 1px rgba(0,0,0,0.1) ; background-color:#f7f7f7 ;
    border-radius:0.6rem ; padding:2rem ; margin-bottom:2rem }
.note:last-child { margin-bottom:0 }    
.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 ; text-align:left ;
    border-bottom:dashed 1px rgba(0,0,0,0.1) }
.note__item:last-child { border:none } 
.note__item > b { font-weight:600 }

.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 ; top:-0.3rem }
.note .sup { font-weight:600 }
.ss__sec__title > b .sup { top:-1rem ; font-size:60% ; font-weight:500 }



/* color */
.ss__color1 { color:#ff9828 }
.ss__color2 , .ss__color5 { color:#2aceff }
.ss__color3 { color:#ffe646 }
.ss__color4 { color:#ed496b } 

.ss__bg1 { background-color:#ff9828 }
.ss__bg2 , .ss__bg5 { background-color:#2aceff }
.ss__bg3 { background-color:#ffe646 }
.ss__bg4 { background-color:#ed496b } 



/* page info */
.page__info { width:96% ; margin:0 auto }
.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) ;
    word-wrap:break-word ; white-space:nowrap ; text-overflow:ellipsis 

}
.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) }



/* code */
.code { padding-top:1.5rem ; margin-bottom:4rem }
.code:last-child { margin-bottom:0 }
.code__inner , .code__inner::before { display:block ; overflow:hidden } 
.code__inner , .code__result { 
    padding:1.5rem 3rem ; border-radius:0.6rem ;
    font-size:1.8rem ; line-height:3rem  
}
.code__inner { 
    background-color:#1f1f1f ;
    color:#ffffff ; font-family:'Consolas',sans-serif  
} 

.code__caption { font-size:2rem ; line-height:2.8rem ; font-weight:500 ; color:#111111 ; margin-bottom:1rem }
.code__caption > b { 
    display:inline-block ; background-color:#3cb0e4 ; padding:0 0.8rem 0.2rem ; border-radius:0.4rem ;
    font-size:1.6rem ; line-height:2.4rem ; color:#ffffff ; font-weight:500 ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; position:relative ; top:0.1rem
}
.code__result { border:solid 1px rgba(0,0,0,0.1) ; margin-bottom:3rem }
.code__result > b { font-weight:500 }
.code__result:last-child { margin-bottom:0 }



/* 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 ;
}




/* PC */
@media all and (min-width:1024px){ 

    /* body */
    .bg , .bg__inner { overflow:hidden }
    .bg { height:83rem ; background:url(../img/bg_txt.png) no-repeat right top #313131 }
    .bg__inner {
        display:block ; width:100% ; height:50rem ; 
        position:absolute ; left:0 ; bottom:0 ; 
        -webkit-mask-image:url(../img/main_special_bg.svg);
        mask-image:url(../img/main_special_bg.svg);
        mask-repeat:no-repeat ; mask-size:100% auto }
    .bg__inner::before  {
        display:block ; content:"" ; width:100% ; height:100% ;
        position:absolute ; left:0 ; top:0 }
    .bg__inner::before  { background:url(../img_sub/sub_bg.jpg) repeat-x left bottom  #ffffff }
 


    /* visual */
    .visual { width:98% ; max-width:150rem ; margin:0 auto 7rem }
    .visual__container ,  .visual__img { height:66rem ; overflow:hidden }
    .visual__container { 
        position:relative ;
        -webkit-mask-image:url(../img_sub/sub_visual_mask.png);
        mask-image:url(../img_sub/sub_visual_mask.png);
        mask-repeat:no-repeat ; mask-size:100% 100% ; 
    }
    .visual__box , .BC__list , .visual__info { text-align:left }
    .visual__box {   
        width:65% ; padding:4rem 11% 6rem 14% ; margin:0 ;
        position:absolute ; left:0 ; bottom:0 ; transform:none ;
    }  
    .visual__box::before { 
        display:block ; content:"" ; width:100% ; height:100% ;
        position:absolute ; left:0 ; top:0 ; 
        background:url(../img_sub/sub_visual_mask.png) no-repeat right top ; opacity:0.5 ;
    }
    .BC__list      { width:80% }
    .BC__link      { font-size:1.8rem ; line-height:2.2rem }
    .visual__title { font-size:5rem ; line-height:6rem ; position:relative }  
    .visual__info  { padding-left:13% } 
 
    .visual__img   { background-image:url(../img_sub/visual_PC.jpg) }  

    #visual11 .visual__img { background-image:url(../img_sub/visual11_PC.jpg) }
    #visual12 .visual__img { background-image:url(../img_sub/visual12_PC.jpg) }
    #visual13 .visual__img { background-image:url(../img_sub/visual13_PC.jpg) }
    #visual14 .visual__img { background-image:url(../img_sub/visual14_PC.jpg) }
    #visual15 .visual__img { background-image:url(../img_sub/visual15_PC.jpg) }

    #visual21 .visual__img { background-image:url(../img_sub/visual21_PC.jpg) }
    #visual22 .visual__img { background-image:url(../img_sub/visual22_PC.jpg) }
    #visual23 .visual__img { background-image:url(../img_sub/visual23_PC.jpg) }
    #visual24 .visual__img { background-image:url(../img_sub/visual24_PC.jpg) }
    #visual25 .visual__img { background-image:url(../img_sub/visual25_PC.jpg) }

    #visual31 .visual__img { background-image:url(../img_sub/visual31_PC.jpg) }
    #visual32 .visual__img { background-image:url(../img_sub/visual32_PC.jpg) }
    #visual33 .visual__img { background-image:url(../img_sub/visual33_PC.jpg) }
    #visual34 .visual__img { background-image:url(../img_sub/visual34_PC.jpg) }
    #visual35 .visual__img { background-image:url(../img_sub/visual35_PC.jpg) }

    #visual41 .visual__img { background-image:url(../img_sub/visual41_PC.jpg) }
    #visual42 .visual__img { background-image:url(../img_sub/visual42_PC.jpg) }
    #visual43 .visual__img { background-image:url(../img_sub/visual43_PC.jpg) }
    #visual44 .visual__img { background-image:url(../img_sub/visual44_PC.jpg) }
    #visual45 .visual__img { background-image:url(../img_sub/visual45_PC.jpg) }

    #visual51 .visual__img { background-image:url(../img_sub/visual51_PC.jpg) }
    #visual52 .visual__img { background-image:url(../img_sub/visual52_PC.jpg) }
    #visual53 .visual__img { background-image:url(../img_sub/visual53_PC.jpg) }
    #visual54 .visual__img { background-image:url(../img_sub/visual54_PC.jpg) }
    #visual55 .visual__img { background-image:url(../img_sub/visual55_PC.jpg) }

    #visual84 .visual__img { background-image:url(../img_sub/visual_event_PC.jpg) }
    
 
    
    /* main */
    #main {  margin-bottom:8rem }


    /* main container */
    .main__container { width:98% }
    .p__box          { width:auto ; display:inline-block }
    .ss__sec__title > b  { font-size:3.2rem ; line-height:4.4rem }



    /* 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 }

    .gallery__inner , .gallery__inner::before  { overflow:hidden ; border-radius:0.6rem }
    .gallery__inner { position:relative } 
    .gallery__inner::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%) 
    } 


    /* 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) } 



    /* note */
    .note { padding:2rem 4rem 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:3rem }
    .note__item { border-bottom:solid 1px rgba(0,0,0,0.1) }    



    
    /* 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) ; word-break:keep-all }
    .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 }
 

    
    /* code */  
    .col2 .code__inner { column-count:2 ; column-gap:8rem ; position:relative }
    .col2 .code__inner::before {
        display:block ; content:"" ; width:1px ; height:80% ; background-color:#ffffff ; opacity:0.2 ;
        position:absolute ; left:50% ; top:50% ; transform:translateY(-50%) ;
    }
} 
 




/* PRINT */
@media print {   }