@charset "utf-8";   

body.navOpen { overflow:hidden }



/* Header */ 
#header , .header__container { width:100% ; min-height:5rem } 
#header { 
    position:fixed ; left:0 ; top:0 ; z-index:95 ;
    background-color:#ffffff ;
}
.header__container { position:relative ; margin:auto }
#header::before    {
    display:block ; content:"" ; width:100% ; height:1px ; 
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; left:0 ; bottom:0 ; z-index:99 ;
}

#logo , #logo > a { display:block ; width:10rem ; height:3.5rem }
#logo { position:absolute ; left:0.5rem ; top:50% ; transform:translateY(-50%)  }
#logo > a { 
    background:url(../img/logo.png) no-repeat 0 0  ; background-size:10rem auto ;
    font-size:0 ; color:transparent ; overflow:hidden 
}
 
#btn_nav_open , #btn_search_open { 
    display:block ; width:5rem ; height:5rem ;
    position:absolute ; top:0 ;  
}
#btn_nav_open    { right:0rem }
#btn_search_open { right:5.1rem ; font-size:0 ; color:transparent }

#btn_nav_open > span { 
    display:block ; width:3rem ; height:0.2rem ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    background-color:#000000 ;
}
#btn_nav_open > span:nth-child(1) , #btn_nav_open:hover > span:nth-child(3) { top:35% }
#btn_nav_open > span:nth-child(2) { top:50% }
#btn_nav_open > span:nth-child(3) , #btn_nav_open:hover > span:nth-child(1) { top:65% }
#btn_nav_open:hover > span:nth-child(2) { transform:translate(-50%,-50%) rotate(180deg) }

.navOpen #btn_nav_open > span:nth-child(2) { opacity:0 } 
.navOpen #btn_nav_open > span:nth-child(1) , .navOpen #btn_nav_open > span:nth-child(3) { top:50% ; width:2.6rem }
.navOpen #btn_nav_open > span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg) }
.navOpen #btn_nav_open > span:nth-child(3) { transform:translate(-50%,-50%) rotate(-45deg)}

.navOpen #btn_nav_open:hover > span:nth-child(1) , .navOpen #btn_nav_open:hover > span:nth-child(3) { width:3rem } 
 
#btn_search_open > span { width:100% ; height:100% ; font-size:0 ; color:transparent ; overflow:hidden }
#btn_search_open:hover > span { transform:translate(-50%,-50%) scale(1.1) } 
#btn_search_open > span , #btn_search_open > span::before , #btn_search_open > span::after { 
    display:block ;
    position:absolute ; left:50% ; top:50% ; 
    transform:translate(-50%,-50%) ;
} 
#btn_search_open > span::before , #btn_search_open > span::after { content:"" }
#btn_search_open > span::before { 
    width:1.8rem ; height:1.8rem ; border-radius:100% ;
    box-sizing:border-box ; border:solid 0.2rem #000000 
}
#btn_search_open > span::after { 
    width:0.8rem ; height:0.2rem ; border-radius:1rem ;
    background-color:#000000 ;
    transform:translate(-50%,-50%) rotate(45deg) ; left:68% ; top:68%
}

.asOpen #btn_search_open { background-color:#111111 }
.asOpen #btn_search_open > span::before { border-color:#ffffff }
.asOpen #btn_search_open > span::after  { background-color:#ffffff }

#btn_nav_open > span , #btn_search_open > span ,
#btn_search_open > span::before , #btn_search_open > span::after { transition:0.3s all }



/* Nav */
#nav , #as_form { width:100% ; position:fixed ; top:0 ; z-index:94 ; left:-101% }
#nav { 
    height:100vh ; padding-top:5rem ; 
    background-color:#ffffff ;
}
.navOpen #nav , .asOpen #as_form { left:0 ; transition:0.3s all }
.nav__container { width:100% ; height:100% ; overflow:auto }
#tnb_list , .nav__link , .nav__sub__link { border-bottom:solid 1px rgba(0,0,0,0.1) }
#tnb_list  { font-size:0 ; text-align:center ; padding:1.4rem 0 }
.tnb__link {
    display:inline-block ; padding:0.8rem 1.5rem ; margin:0.2rem ;
    font-size:1.4rem ; line-height:100% ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    transition:0.3s all ;
}
.tnb__link.logout { display:none }
.tnb__link:hover  { 
    background-color:#111111 ; border-color:#111111 ;
    color:#ffffff
}

#nav_list  { margin-bottom:3rem } 
.nav__link {
    display:block ; padding:1.5rem 1rem 1.7rem ;
    font-size:2.2rem ; line-height:120% ; font-weight:600  ; 
}
.nav__sub__link { display:block ; padding:1rem }
.nav__sub__link > b , .nav__sub__link > span { display:inline-block }
.nav__sub__link > b {
    padding:0.4rem 1rem 0.6rem ; border-radius:4rem ;
    font-size:1.2rem ; line-height:100% ; color:#ffffff ;
    background-color:#444444 ;
}
.nav__sub__link:hover > b { background-color:#111111 } 
.nav__sub__link > span { font-size:1.8rem ; line-height:120% }
.nav__link , .nav__sub__link , .nav__link::after , .nav__sub__link > b  { transition:0.3s all }
.nav__link , .nav__sub__link { position:relative }
.nav__link::after , .nav__sub__link::after {
    display:block ; content:"" ; width:0 ;
    position:absolute ; left:0 ; bottom:-1px ;
    
}
.nav__link::after { height:0.2rem ; background-color:#ff6600 }
.nav__sub__link::after { height:0.1rem ; background-color:rgba(0,0,0,0.2) ; transition:0.5s all }
.nav__item:hover .nav__link , .nav__sub__link:hover { color:#111111 }
.nav__item:hover .nav__link::after , .nav__sub__link:hover::after , .nav__link.now::after , .nav__sub__link.now::after { width:100% }

#btn_nav_close { margin:0 auto 1.5rem }
.btn__close , .btn__close::before , .btn__close::after { transition:0.3s all }
.btn__close    { 
    display:block ; overflow:hidden ; width:2rem ; height:2rem ; 
    position:relative ; opacity:0.3 ;
    font-size:0 ; color:transparent
}
.btn__close:hover { opacity:1 } 
.btn__close::before , .btn__close::after {
    display:block ; content:"" ; width:1.6rem ; height:1px ; 
    background-color:#000000 ;
    position:absolute ; left:50% ; top:50% ; 
}  
.btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
.btn__close::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.btn__close:hover::before , .btn__close:hover::after { width:2rem }
.btn__close:hover::before , .navOpen #btn_nav_open:hover > span:nth-child(1) { transform:translate(-50%,-50%) rotate(135deg) }
.btn__close:hover::after , .navOpen #btn_nav_open:hover > span:nth-child(3)  { transform:translate(-50%,-50%) rotate(45deg) }



/* All search */
#as_form { 
    display:block ; width:100% ; padding:5rem 0 4rem ; 
    background-color:rgba(0,0,0,0.6) ;
    top:5rem
}

.as__container , #as__box { position:relative }
.as__container { width:90% ; max-width:60rem ; margin:auto ; display:none }
.asOpen .as__container { display:block }
#as_word , #as_btn {
    width:100% ; padding:1rem ; border-radius:0.4rem ;
    font-size:1.8rem ; line-height:160% ;
}
.as__box { display:block ; width:100% ; margin-bottom:2rem }
#as_word { background-color:#ffffff ; margin-bottom:0.5rem }  
#as_btn  { 
    background-color:#ff6600 ; 
    color:#ffffff ; font-weight:500 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    transition:0.3s all
}
#btn_search_close { margin:auto }
#btn_search_close::before , #btn_search_close::after { background-color:#ffffff }
#as_btn:hover { background-color:#ff0066 }





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

    /* Header */ 
    #header , .header__container { min-height:8rem } 
    #header { background:none ; transition:0.3s all }
    .header__container , #tnb_list , #nav_list { width:96% ; max-width:120rem } 
    #header::before    { top:7.9rem ; background-color:rgba(255,255,255,0.07) }
    .sticky #header::before , .navOpen #header::before { background-color:rgba(0,0,0,0.1) }
    .sticky #header    { box-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
    .navOpen #header   { box-shadow:none }
    #logo > a { background-position:left  bottom }
    #logo     { top:4rem ; left:50% ; transform:translate(-50%,-50%) }

    #btn_nav_open ,  #btn_search_open { top:4rem ; transform:translateY(-50%) ; transition:0.3s all }
    #btn_nav_open    { left:0 }
    #btn_nav_open > span { background-color:#ffffff }
    #btn_search_open { right:0 ; border-radius:100% ; overflow:hidden }
 
    .sticky #header , .navOpen #header { background-color:#ffffff }
    .sticky #logo > a  , .navOpen #logo > a  { background-position:left top }

    .sticky #btn_nav_open > span , .navOpen #btn_nav_open > span { background-color:#111111 }

    .sticky #btn_search_open > span::before , .navOpen #btn_search_open > span::before { border-color:#111111 }
    .sticky #btn_search_open > span::after , .navOpen #btn_search_open > span::after { background-color:#111111 }
 
    #btn_search_open > span::before , .asOpen #btn_search_open > span::before { border-color:#ffffff }
    #btn_search_open > span::after , .asOpen #btn_search_open > span::after { background-color:#ffffff }



    /* Nav */
    #nav { padding-top:8rem }
    #tnb_list , #nav_list { margin:auto ; border:none }
    #tnb_list  { text-align:right }
    .tnb__link { margin:0 0 0 0.5rem }

    #nav_list  { position:relative ; margin-bottom:4rem }
    #nav_list::before , #nav_list::after { display:block ; content:"" } 
    #nav_list::before { 
        position:absolute ; left:50% ; top:0 ;
        width:1px ; height:96% ; background-color:rgba(0,0,0,0.1) ;
    }
    #nav_list::after { clear:both } 
    .nav__item { width:45% ; margin:0 0 3rem ; float:left }
    .nav__item:nth-child(2n) { float:right }

    .nav__link { padding:1.5rem 0.1rem }
     
    

    /* All search */
    #as_form { top:8rem }
    #btn_search_open { opacity:0.8 }
    #btn_search_open:hover { opacity:1 }
    #btn_search_open > span::before { border-color:#ffffff }
    #btn_search_open > span::after  { background-color:#ffffff }
 
    .as__box { text-align:center }
    #as_word { width:30rem ; margin:0 0.5rem 0 0 }
    #as_btn  { display:inline-block ; width:8rem ; margin:0 }

}
  




@media print {  }