@charset "utf-8";  

body.navOpen { overflow:hidden }



/* Header */
#header , .header__container { width:100% ; min-height:5rem } 
#header , #nav { 
    left:0 ; top:0 ;
    background-color:#ffffff 
}
#header { z-index:95 ; position:fixed }
#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 ;
}
.header__container { position:relative }

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

#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 }

#logo > a , #btn_nav_open , #btn_search_open , #btn_search_open > span , .btn__close { 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 }

#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% }
#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 }



/* Navigation */
#nav { height:100vh ; padding-top:5rem } 
#nav , #as_form { position:fixed ; width:100% ;  z-index:94 ; left:-101% } 
.navOpen #nav , .asOpen #as_form { left:0 ; transition:0.3s all }
.nav__container { width:100% ; height:100% ; overflow:auto ; display:none }
.navOpen .nav__container { display:block }

#nav_list  { margin-bottom:2rem }
.nav__link { 
    display:block ; padding:1.5rem 1rem ; position:relative ; 
    font-size:2rem ; line-height:140% ; font-weight:600 ; text-align:center ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
}
.nav__link > span , .nav__link:hover > span { 
    display:block ; width:100% ; padding:0 0.5rem ;
    font-size:inherit ; line-height:inherit; font-weight:inherit ; text-align:inherit ;
}
.nav__link::after { 
    display:block ; overflow:hidden ; content:"" ; width:0 ; height:0.2rem ; 
    background-color:#ff6600 ; opacity:0 ;
    position:absolute ; left:50% ; bottom:-1px ;
    transition:0.3s all ;
}
.nav__link:hover { color:#000000 } 
.nav__item:hover .nav__link::after , .nav__link.now::after { width:100% ; left:0 ; opacity:1 }
#tnb_list  { font-size:0 ; text-align:center ; margin-bottom:4rem }
.tnb__link { 
    display:inline-block ; padding:0.7rem 1.5rem ; margin:0.2rem 0.3rem ;
    font-size:1.4rem ; line-height:120% ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
}
.navOpen #nav , .tnb__link , .btn__close , .btn__close::before , .btn__close::after ,
.nav__link , .nav__link:hover::after , .nav__link > span { transition:0.3s all }

.tnb__link.logout { display:none }

.tnb__link:hover { background-color:#444444 ; border-color:#444444 ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.1) }

#btn_nav_close { margin:0 auto 1rem }
.btn__close    { 
    display:block ; width:2rem ; height:2rem ; 
    position:relative ; opacity:0.3 ;
}
.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) }

.nav__sub { 
    border-bottom:solid 1px rgba(0,0,0,0.1) ; padding:1rem 0 2rem ;
    font-size:0 ; text-align:center ;
} 
.nav__sub__item { display:inline-block ; margin:0.3rem }
.nav__sub__link , .nav__sub__link::after { transition:0.3s all }
.nav__sub__link , .nav__sub__link::after { border-radius:0.4rem ; box-sizing:border-box ; display:block }
.nav__sub__link { 
    position:relative;
    font-size:1.6rem ; line-height:140% ; padding:0.5rem 1.5rem 0.7rem }
.nav__sub__link::after {
    content:"" ; width:100% ; height:100% ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    border:solid 1px rgba(0,0,0,0.1)
}
.nav__sub__link.now , .nav__sub__link:hover {  background-color:#f7f7f7 ; color:#111111 }
.nav__sub__link:hover { box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.05) }
.nav__sub__link:hover::after { border-color:rgba(0,0,0,0.2) }



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



/* Nav + Search close */
#all_close { display:none }





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

    body.navOpen { overflow:initial }
   

    /* Header */
    #header , .header__container , #nav_list { min-height:8rem } 
    #header { background-color:rgba(0,0,0,0.5) ; transition:0.3s all }
    .sticky #header , .navOpen #header { background-color:#ffffff }
    .navOpen #header { min-height:27rem ; box-shadow:0 0 0.3rem rgba(0,0,0,0.1) }
    #header::before  { 
        bottom:auto ; top:7.9rem ;
        background-color:rgba(255,255,255,0.05) } 
    .sticky #header::before , .navOpen #header::before { 
        background-color:rgba(0,0,0,0.1) ; 

    }
    .header__container , .nav__container { width:96% ; max-width:120rem ; margin:auto }

    #logo , #btn_nav_open { z-index:97 }
    #logo     { left:0 }
    #logo > a { background-position:left bottom }
    .sticky #logo > a , .navOpen #logo > a { background-position:left top }
    #btn_nav_open , #btn_nav_close { display:none } 
    .navOpen #btn_nav_close {
        display:block ; overflow:hidden ; margin:0 ; opacity:0 ; 
        position:absolute ; right:0 ; bottom:0 ;
        width:1px ; height:1px
    }
    #btn_search_open { right:0 ; top:50% ; transform:translateY(-50%) ; border-radius:100% }

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

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


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

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

    .as__box { text-align:center }
    #as_word { width:30rem ; margin:0 0.5rem 0 0 }
    #as_btn  { display:inline-block ; width:8rem ; margin:0 }


 
    /* Navigation */
    #nav , .navOpen #nav  {  
        position:fixed ; left:0 ; top:0 ; z-index:96 ;
        padding:0 ; margin:0 ; background:none ;
        height:0 ;  
    }
    .nav__container {  
        display:block ; position:relative ;
        padding:0 21rem 0 11rem ; overflow:initial ;
    }

    #tnb_list {
        width:15rem ; position:absolute ; right:5rem ; top:2.6rem ;
        text-align:left ; font-size:0 ; padding:0 ;
    }
    .tnb__link {  
        margin:0 0.5rem 0 0 ; padding:0.8rem 1.3rem ;
        font-size:1.2rem ; line-height:100% ; color:rgba(255,255,255,0.8) ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
        border-color:rgba(255,255,255,0.1) ;
    } 
    .tnb__link:hover    { background-color:#ffffff ; border-color:#ffffff ; color:#444444 ; text-shadow:none }
    .sticky .tnb__link , .navOpen .tnb__link { color:#444444 ; text-shadow:none ; border-color:rgba(0,0,0,0.1) ; background-color:none }
    .sticky .tnb__link:hover , .navOpen .tnb__link:hover { background-color:#111111 ; border-color:#111111 ; color:#ffffff }

    #nav_list , .nav__item { margin:0 ; padding:0 }
    #nav_list { 
        width:100% ; max-width:72rem ; margin:auto ;
        display:flex ; justify-content:space-between ; 
    }
    .nav__item { flex-grow:1 }
    .nav__link { font-size:1.8rem ; line-height:100% ; height:8rem }
    .nav__link { 
        color:rgba(255,255,255,0.8) ; font-size:1.8rem ; line-height:120% ; font-weight:400 ;
        text-shadow:0 0 0.3rem rgba(0,0,0,0.1) ; border:none 
    } 
    .nav__link:hover  { color:#ffffff }
    .nav__link > span {
        word-break:break-all ;
        position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ; 
        text-shadow:inherit ; color:inherit       
    }
    .nav__link::after { bottom:0 }
    .sticky .nav__link , .navOpen .nav__link { color:#444444 ; text-shadow:none }
    .sticky .nav__link:hover , .navOpen .nav__link:hover ,
    .nav__item:hover .nav__link { color:#111111 }

    .nav__item:hover .nav__link::after , .nav__link.now::after , .nav__sub__link { width:96% }
    .nav__sub { 
        transition:0.3s all ;
        overflow:hidden ; height:0 ; opacity:0 ;
        padding:0 ; border:none ; margin:auto 
    } 
    .navOpen .nav__sub { padding:0.5rem 0 1rem ; height:auto ; opacity:1 ; overflow:initial ; }
    .nav__sub__item , .nav__sub__link  { display:block ; padding:0 ; margin:0 }
    .nav__sub__link , .nav__sub__link::after { border-radius:0 }
    .nav__sub__link { 
        color:rgba(255,255,255,0.8) ; font-size:1.6rem ; line-height:120% ;
        text-shadow:0 0 0.3rem rgba(0,0,0,0.1) ; border-bottom:solid 1px rgba(0,0,0,0.0) ;
        margin:auto ; padding:1.2rem 0.5rem ; 
    }
    .nav__item:hover .nav__sub__link { border-color:rgba(0,0,0,0.1) }
    .nav__sub__link:hover , .nav__sub__link.now { color:#ffffff ; background:none ; box-shadow:none }
    .nav__sub__link::after {
        border:0 ; overflow:hidden  ; width:0 ; height:1px ; 
        top:auto ; left:50% ; bottom:-1px ; transform:translateX(-50%) ;
        background-color:#ff6600 ;
    }
    .nav__sub__link:hover::after , .nav__sub__link.now::after  { width:100% }

    .navOpen .nav__sub__link { color:#444444 ; text-shadow:none }



    /* Nav + Search close */
    #all_close { 
        display:none ; overflow:hidden ; width:100% ; height:0 ;
        position:fixed ; left:0 ; top:0 ; z-index:89 ;
        background-color:rgba(0,0,0,0.5) ;
        font-size:0 ; color:transparent ;
        transform:0.3s all ;
    }
    .navOpen #all_close { display:block ; height:100% }
 
} 
    




@media print {  }