@charset "utf-8";   

body.navOpen { overflow:hidden }



/* Header */
#header , .header__container { width:100% ; min-height:5rem } 
#header , #nav , #btn_nav_close { position:fixed ; left:0 ; top:0 }
#header { background-color:#ffffff ; z-index:95 }
#header::after {
    display:block ; content:"" ; width:100% ; height:1px ;
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; left:0 ; bottom:0 ; 
}
.header__container { position:relative }
#logo , #logo > a { display:block ; width:10rem ; height:3.5rem }
#logo , #btn_nav_open , #tnb_list { position:absolute ; top:50% ; transform:translateY(-50%) }
#logo { left:5rem ; transform:translateY(-50%) scale(0.8) }
#logo > a {
    font-size:0 ; color:transparent ; overflow:hidden ;
    background:url(../img/logo.png) no-repeat left top ; background-size:10rem auto ;
}
 
#header , #btn_nav_open , #btn_nav_open > span { transition:0.3s all } 
#btn_nav_open {
    display:block ; overflow:hidden ; text-indent:-99rem ; width:5rem ; height:5rem ;
    left:0 
}
#btn_nav_open > span {  
    display:block ; width:3rem ; height:0.2rem ;
    background-color:#111111 ; border-radius:1rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
#btn_nav_open > span:nth-child(1) , #btn_nav_open:hover > span:nth-child(3) { top:35% }
#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 { background-color:#ff6600 } 
.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% ; left:50% ; width:2.4rem }
.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) { top:50% ; left:50% ; width:3rem }
.navOpen #btn_nav_open:hover > span:nth-child(1) { transform:translate(-50%,-50%) rotate(135deg) }
.navOpen #btn_nav_open:hover > span:nth-child(3) { transform:translate(-50%,-50%) rotate(45deg) }

#tnb_list  { display:block ; right:1rem }
#tnb_list::after { display:block ; content:"" ; clear:both }
.tnb__item { float:left ; margin-right:1.5rem ; padding-right:1.5rem ; position:relative }
.tnb__item::after {
    display:block ; content:"" ; width:1px ; height:1rem ; 
    background-color:rgba(0,0,0,0.15) ;
    position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
}
.tnb__item:last-child { margin-right:0 ; padding-right:0 }
.tnb__item:last-child::after { display:none }
.tnb__link { 
    display:block ; font-size:1.2rem ; line-height:100% ; padding-bottom:0.2rem ;
    transition:0.3s all ;
}
.tnb__link:hover { color:#111111 }



/* Nav */
#nav , #btn_nav_close { width:100% ; height:100vh }
#nav { z-index:94 ; padding-top:5rem ; left:-101% ; background-color:#ffffff }
.navOpen #nav { left:0 }
.nav__container { width:100% ; height:100% ; overflow:auto }
#btn_nav_close  {
    display:block ; overflow:hidden ; width:0 ;
    z-index:93 ; background-color:#000000 ; opacity:0 ;
    font-size:0 ; color:transparent ; 
    
}
.navOpen #btn_nav_close { width:100% ; opacity:0.5 }

#nav_list  { width:96% ; max-width:60rem ; margin:0 auto 5rem ; padding-top:1rem } 
.nav__link , .nav__sub__link { display:block ; position:relative ; line-height:120% ; text-align:center }
.navOpen #nav , .nav__link , .nav__sub__link , .nav__link::after , .nav__sub__link::after { transition:0.3s all }
.nav__link { 
    font-size:2rem ; font-weight:600 ; letter-spacing:-0.1rem ;
    padding:1.5rem 0 ; border-bottom:solid 1px rgba(0,0,0,0.3) ;
}
.nav__sub__link {
    padding:1.2rem 0 ;
    font-size:1.6rem ; border-bottom:solid 1px rgba(0,0,0,0.1) ;
}
.nav__link::after , .nav__sub__link::after { 
    display:block ; content:"" ; width:0 ;
    position:absolute ; left:50% ; bottom:-1px ; transform:translateX(-50%) ;
}
.nav__link::after  { height:0.2rem ; background-color:#ff6600 }
.nav__sub__link::after { height:0.1rem ; background-color:rgba(0,0,0,0.3) }
.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% }

.nav__sub { margin-bottom:1rem ; padding:0 1.5rem }
 


 
@media screen and (min-width:1024px){ 
    
    /* Header */
    #header , .header__container { min-height:8rem } 
    #header { background:none }
    .sticky #header , .navOpen #header { background-color:#ffffff }
    .sticky #header  { box-shadow:0 0 0.3rem rgba(0,0,0,0.1) }
    .navOpen #header { box-shadow:none }
    #header::after   { opacity:0 }
    .navOpen #header::after   { opacity:1 }

    #logo     { left:7rem ; transform:translateY(-50%) scale(1) }
    #logo > a { background-position:left bottom }
    .sticky #logo > a , .navOpen #logo > a { background-position:left top }
    #btn_nav_open > span { background-color:#ffffff }
    .sticky #btn_nav_open > span { background-color:#111111 } 
    .navOpen #btn_nav_open > span { background-color:#ff6600 } 
    #btn_nav_open { left:0.5rem }

    #tnb_list  { right:2rem }
    .tnb__link { color:rgba(255,255,255,0.8) ; text-shadow:0 0 0.3rem rgba(0,0,0,0.1) }
    .sticky .tnb__link , .navOpen .tnb__link { color:#444444 }
    .sticky .tnb__link:hover , .navOpen .tnb__link:hover { color:#000000 }
    .sticky .tnb__item::after , .navOpen .tnb__item::after { background-color:rgba(0,0,0,0.1) ; }
    .tnb__link:hover  { color:#ffffff } 
    .tnb__item::after { background-color:rgba(255,255,255,0.15) }



    /* Nav */
    #nav { padding-top:8rem ; max-width:50rem } 
    #nav_list { width:90% }
    .nav__link , .nav__sub__link { text-align:left ; padding-left:0.2rem }
    .nav__sub { padding-right:0 ; padding-left:1rem }
    .nav__link::after , .nav__sub__link::after { left:0 ; transform:none }
 
}
  




@media print {  }