@charset "utf-8";

@import url(reset.css);
@import url(color.css);
@import url(font.css);
@import url(sub.css);



html,
body { position: relative; height: 100%; } 

html { scroll-behavior: smooth; font-size: 62.5%; /* @media (width < 1024px) { font-size: 54.7%; } */}
body { font-size: 1rem; } 
@media (max-width: 1023px) { 
    html {font-size: 54.7%;}
}

header { position: relative; width: 100%; z-index: 100; }
.header_wrap { width: 100%; margin: 0 auto; padding:0 6.4rem; display: flex; align-items: center; justify-content: space-between; background-color: transparent;} 
.header_wrap h1 {  } 
.header_wrap h1 a { display: block; width: 20.5rem; height: 4.1rem; background: url(/images/common/h1_logo_black.png) center / 20.5rem no-repeat;} 
.header_wrap h1 a img {/*max-width: 100%;*/display:none}
.hambuger_btn {width: 5.6rem; height: 5.6rem; background: url(/images/common/hamburger.svg) center / 3.6rem no-repeat; } 
.gnb { font-size: 0; display: flex; align-items: center; justify-content: space-evenly;} 
.gnb > li { } 
.gnb > li > a { display: block; position: relative; padding: 0 4.2rem; line-height: 8.8rem; font-size: 2rem; font-weight: 500; color: var(--gray19); }
.gnb > li > a:before { content: ""; position: absolute; left: -100px; bottom: 0; width: 100%; height: .4rem; background: var(--secondary); transition: all .3s; opacity: 0;}
.gnb > li:hover > a:before,
.gnb > li > a:focus:before { left: 0; opacity: 1;} 
.gnb > li ul { display: none; position: absolute; z-index: 10; } 
.gnb > li ul li { float: left; } 
.gnb > li ul li a { display: block; padding: 0 1.6rem; line-height: 5.2rem; font-size: 1.6rem; color: var(--white); } 
.gnb > li ul li a:hover,
.gnb > li ul li a:focus { color: var(--secondary); } 
.gnb > li:last-child ul { margin-left: 3rem; } 
.dim { display: none; position: absolute; left: 0; right: 0; top: 88px; height: 52px; background: var(--primary); } 

.hambuger_wrap { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 101; padding: 0; background: rgba(0, 0, 0, .5); } 
.hambuger_wrap > div { background: linear-gradient(180deg, rgba(0,20,69,1) 21%, rgba(0,76,115,.9) 59%, rgba(0,172,193,0.3) 97%); padding: 10rem 10rem; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; transition: all .3s; } 
.hambuger_wrap .close { position: absolute; right: 6.4rem; top: 2rem; width: 5.6rem; height: 5.6rem; background: url(/images/common/btn_close.svg) center / 4.2rem no-repeat; } 
.hambuger_wrap .megamenu_title { text-align: center; font-size: 5rem; font-weight: 900; color: var(--white); margin-bottom: 10rem; } 
.hambuger_wrap .megamenu_title img{width:20rem}
/* .hambuger_wrap > div { background: var(--primary); padding: 7rem 10rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0 auto; max-width: 128rem; width: 90%; transition: all .3s; }  */
.hambuger_wrap nav { width: 100%; } 
.hambuger_wrap nav > ul { display: flex;; } 
.hambuger_wrap nav > ul > li { flex: 1; } 
.hambuger_wrap nav > ul > li ~ li { border-left: 1px solid #dbdbdb; } 
.hambuger_wrap nav > ul > li > a { display: block; text-align: center; font-size: 2.4rem; font-weight: 700; line-height: 1.2rem; color: var(--white); padding: 1rem;} 
/* .hambuger_wrap nav > ul > li > a:before { content: ""; display: inline-block; margin: 0 .5rem 0 0; width: 1.2rem; height: 1.2rem; background: no-repeat center; vertical-align: -0.25rem; } */
.hambuger_wrap nav > ul > li ul { padding: 3rem 0 0; } 
.hambuger_wrap nav > ul > li ul a { display: block; text-align: center; font-size: 1.6rem; color: rgba(255, 255, 255, .8); line-height: 1.6; padding: .5rem; } 
.hambuger_wrap nav > ul > li ul a span { position: relative; padding: 0 .5rem; } 
.hambuger_wrap nav > ul > li ul a span em { position: relative; z-index: 2; } 
.hambuger_wrap nav > ul > li ul a span:after { content: ""; position: absolute; left: 0; width: 0; bottom: -1px; border-bottom: .2rem solid var(--white); z-index: 1; transition: width .5s; } 
.hambuger_wrap nav > ul > li ul a:focus span:after,
.hambuger_wrap nav > ul > li ul a:hover span:after { width: 100%; } 

@media (max-width: 1280px) { 
    .header_wrap { padding: 0 1.6rem; }
}
@media (max-width: 1023px) { /* GNB */
    .header_wrap { height: 8rem; } 
    .header_wrap .logo { width: 17.5rem; height: auto; } 
    /* .header > div { width: 100%; box-sizing: border-box; }  */
    .header_wrap nav { display: none; } 
    .hambuger_wrap { overflow: auto; left: inherit; right: -100%; bottom: 0; padding: 0; width: 55%; background: var(--white); } 
    .hambuger_wrap.on { display: block; } 
    .hambuger_wrap > div { left: 0; top: 8rem; transform: unset; width: 100%; padding: 0; border-top: none; background: rgba(255, 255, 255, 1); } 
    .hambuger_wrap .megamenu_title { display: none; } 
    .hambuger_wrap .close { top: -6rem; right: 1.2rem; background: url(/images/common/btn_close_black.svg) center / 36px no-repeat; } 
    .hambuger_wrap nav { position: static; width: 100%; } 
    .hambuger_wrap nav > ul { display: block; border-top: 1px solid #ebebeb; } 
    .hambuger_wrap nav > ul > li { border-bottom: 1px solid #ebebeb; } 
    .hambuger_wrap nav > ul > li ~ li { border-left: none; } 
    .hambuger_wrap nav > ul > li > a { position: relative; text-align: left; line-height: 1.6; font-size: 2rem; font-weight: 500; color: var(--gray19); padding: 1.5rem; } 
    .hambuger_wrap nav > ul > li > a:before { margin: 0 .5rem 0 1.5rem; } 
    .hambuger_wrap nav > ul > li > a:after { content: url(/images/common/arrow_small_right.svg); position: absolute; right: 2rem; top: 50%; transform: translateY(-50%) rotate(90deg); font-size: 0; line-height: 1; transition: transform .4s; } 
    .hambuger_wrap nav > ul > li.on > a:after { transform: translateY(-50%) rotate(275deg); } 
    .hambuger_wrap nav > ul > li > div { display: none; } 
    .hambuger_wrap nav > ul > li ul { display: flex; flex-wrap: wrap; padding: 1.15rem 0; border-top: 1px solid #ebebeb; background: #f7f8f9; } 
    .hambuger_wrap nav > ul > li ul li { width: 100%; } 
    .hambuger_wrap nav > ul > li ul a { padding: 1rem 0 1rem 2.5rem; line-height: 1.3; text-align: left; color: var(--gray50); } 
    .hambuger_wrap nav > ul > li ul a span { padding: 0; } 
    .hambuger_wrap nav > ul > li ul a span:after { display: none; } 
    body.hidden { overflow: hidden; } 
   
    .hambuger_btn { width: 3.6rem; height: 3.6rem; background-size: 2.8rem; } 

    .dim { height: 100%; position: fixed; top: 0; bottom: 0; z-index: 100; background: rgba(0, 0, 0,.5);}
    
}



/* footer */
footer { background: var(--gray19); width: 100%; padding: 5rem 6.4rem; } 
.footer-wrap { max-width: 131.2rem;margin:0 auto }
.footer-wrap .logo_footer { margin-bottom: 3rem;}
.footer-wrap nav {  border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 3rem;}
.footer-wrap nav a { display: block; color: var(--grayf7);}
.copyright-wrap { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between;}
.copyright-wrap p { font-size: 1.4rem; color: var(--grayf7); line-height: 1.4;}

@media (max-width: 1023px) { 
    footer { padding: 5rem 1.6rem;}
    .copyright-wrap { flex-direction: column; align-items: flex-start; gap: 1rem;}
}