@charset "utf-8";


/* header */
#template_header {width:100%; height:125px; position:fixed; left:0; top:0; z-index:300; transition:all 0.5s; transition-property:background, height;}
#template_header > div {display:flex; justify-content:space-between; align-items:center; height:100%;}

#template_logo {width:226px; height:43px; background:url(../images/logo.svg) no-repeat center center; background-size:contain; transition:all 0.5s; transition-property:background-image, margin-top}
#template_logo a {display:block; width:100%; height:100%;}

#template_gnb > ul {display:flex;}
#template_gnb > ul > li > a {display:block; font-size:1.25em; line-height:125px; font-weight:600; padding:0 30px; transition:all 0.5s; transition-property:color, line-height;}
#template_gnb > ul > li:last-child > a {padding-right:0;}

#menuToggle {display:none; width:50px; height:50px; background:#191919; position:fixed; right:0; top:0; z-index:210;}
#menuToggle span {display:block; width:20px; height:2px; background:#fff; position:absolute; left:50%; margin-left:-10px; transition:all 0.5s;}
#menuToggle span:nth-child(1) {top:50%; margin-top:-7px;}
#menuToggle span:nth-child(2) {top:50%; margin-top:-1px;}
#menuToggle span:nth-child(3) {bottom:50%; margin-bottom:-7px;}

.header_dim {display:block; width:100%; height:100%; position:fixed; left:0; top:0; background:rgba(25,25,25,0.5); z-index:190; opacity:0; visibility:hidden; transition:all 0.5s; transition-property:opacity, visibility;}

#template_header.on #menuToggle span:nth-child(1) {transform:translateY(6px) rotate(45deg)}
#template_header.on #menuToggle span:nth-child(2) {width:0;}
#template_header.on #menuToggle span:nth-child(3) {transform:translateY(-6px) rotate(-45deg)}

#template_header.scroll_on {background:#fff; box-shadow:0 0 10px rgba(25,25,25,0.1)}

@media screen and (min-width:1025px){
    #template_header.scroll_on {height:90px;}
    /*#template_header.scroll_on #template_logo {margin-top:17px;}*/
    #template_header.scroll_on #template_gnb > ul > li > a {color:#191919; line-height:90px;}
}

@media screen and (max-width:1220px){
    #template_gnb > ul > li > a {font-size:1em; padding:0 15px;}
}

@media screen and (max-width:1024px){
    #template_header {height:50px;}

    #template_logo {width:173px; height:33px;}

    #template_gnb {width:250px; height:100vh; background:#fff; padding-top:49px; position:fixed; right:-250px; top:0; z-index:200; transition:right 0.6s}
    #template_gnb > ul {display:block; border-top:1px solid #dcdcdc;}
    #template_gnb > ul > li > a {color:#191919; line-height:1.5em; padding:13px; border-bottom:1px solid #dcdcdc;}

    #menuToggle {display:block;}

    #template_header.on #template_gnb {right:0;}
    #template_header.on .header_dim {opacity:1; visibility:visible;}
}



/* footer */
#template_footer {width:100%; background:#191919; padding:50px 0; position:relative;}
#template_footer .info li {display:inline-block; font-size:1em; color:#dcdcdc; margin:0 15px 10px 0;}
#template_footer .info li strong {font-weight:700; margin-right:10px;}
#template_footer .copy {font-size:1em; color:#666; font-weight:700; margin-top:10px; text-transform:uppercase;}
#template_footer .go_top {display:block; width:50px; height:50px; background:#333; border-radius:50%; font-size:1em; color:#fff; position:absolute; right:30px; bottom:30px;}

@media screen and (max-width:1024px){
    #template_footer {padding:5% 0;}
    #template_footer .info br {display:none;}
    #template_footer .info li {margin:0 10px 7px 0;}
    #template_footer .info li strong {margin-right:5px;}
    #template_footer .go_top {width:40px; height:40px; font-size:0.875em; right:6%; bottom:20px;}
}

@media screen and (max-width:767px){
    #template_footer .go_top {width:35px; height:35px;}
}