@charset "utf-8";
@import url('/design/common/css/Pretendard.css');
@font-face {
    font-family:'Giants';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Regular.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
}
@font-face {
    font-family:'HakgyoansimGaeulsopung';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimGaeulsopungL.woff2') format('woff2');
    font-weight:700;
    font-style:normal;
}
  
/*var*/
:root {
    --hcenter:translateY(calc(-50% + 0.5px));
    --wcenter:translateX(calc(-50% + 0.5px));
    --center:translate(calc(-50% + 0.5px), calc(-50% + 0.5px)) ;
    --blue:#165cc6;
    --yellow:#fed454;
    --g_txt:#787878;
    --b_blue:#ebf3ff;
    --gia:'Giants', sans-serif;
    --hak:'HakgyoansimGaeulsopung', sans-serif;
    --sprite:url('/design/job/img/sprite.png') no-repeat;
}   
/*common*/
::-webkit-scrollbar {width:18px;}
::-webkit-scrollbar-thumb {border:5px  solid #fff; border-radius:20px; background:#999;}
::-webkit-scrollbar-track {background:#fff; border-radius:20px;}

body, input, button, textarea, select { font-family:'Pretendard', sans-serif; font-weight:400; font-size:18rem; color:#222; line-height:1.7; letter-spacing:-0.2px;}
input, button, textarea, select { background:#fff; border-radius:0; vertical-align:middle; border:1px solid #ddd;}
button, input[type="submit"] { cursor:pointer; }
a { color:#222; }
@media all and (max-width:1240px) {
    html {font-size:0.95px;}
}
@media all and (max-width:768px) {
    html {font-size:0.9px;}
}

.wrap { max-width:1400px; width:94%; margin:0 auto; }

#container { position:relative; }
#container::before,
#container::after,
.cont1::before {content:''; position:absolute; background:var(--sprite); z-index:-1;}
#container::before { background-position:0 -171px; left:0; top:-130px; width:435px; height:685px; }
#container::after { background-position:-435px -171px; right:0; top:200rem; width:195rem; height:530rem; }
.cont1::before,
.sub_top::before { width:174px; height:267px; left:0; top:0; background-position:-630px -349px; }
@media all and (max-width:1600px){
    .cont1::before,
    .sub_top::before { display:none; }
}

/*header*/
header .wrap {display:flex; justify-content:space-between; align-items:center; height:100rem; }
header h1 a { position:relative; display:block; font-size:23rem; font-family:var(--gia); font-weight:400; padding-left:85rem; }
header h1 a::before { content:''; position:absolute; left:0; top:50%; width:70px; height:32px; background:var(--sprite) -154px -107px; transform:var(--hcenter); }
header h1 a span { color:var(--blue); }
header .right { display:flex; align-items:center; }
header .right a { display:flex; align-items:center; font-size:17rem; padding:4rem 20rem; }
header .right a::after { content:''; display:block; background:var(--sprite) -15px -1px; margin-left:10rem; width:14px; height:14px; }
header .right a:not(.sitemap)::after { width:13px; height:13px; background-position:-1px -1px; }
header .right a.sitemap { background:var(--blue); color:#fff; border-radius:20rem; }
@media all and (max-width:1200px){
    header h1 a {line-height:1.3; font-size:18rem;}
    header h1 a span { display:block; font-size:22rem; }
}
@media all and (max-width:1023px){
    header .right a.sitemap {display:none;}
}
@media all and (max-width:480px){
    header h1 a { padding-left:75rem; letter-spacing:-1rem; }
    header h1 a::before { transform:var(--hcenter) scale(0.8); left:-5rem; }
    header .right a:not(.sitemap) {display:none;}
    header .right a.sitemap { font-size:16rem; padding:4rem 15rem;}
    header .right a::after {margin-left:5rem; }
}

/*pc navi*/
#pc_nav .depth1 {display:flex;}
#pc_nav .depth1 > li { position:relative;}
#pc_nav .depth1 > li > a { display:block; font-size:23rem; padding:20rem 25rem; font-weight:600; }
#pc_nav .depth1 > li > a.on { font-weight:700; color:var(--blue); }
#pc_nav .depth1 ul { display:none; position:absolute; width:200rem; padding:20rem 0; box-shadow:10rem 10rem 15rem rgba(0,0,0,0.2); border-radius:10rem; z-index:2; }
#pc_nav .depth2 { top:70rem; left:50%; transform:var(--wcenter); background:var(--b_blue); }
#pc_nav .depth2 > li {position:relative; }
#pc_nav .depth2 > li > a { display:block; height:50rem; padding:10rem 20rem; position:relative;}
#pc_nav .depth2 > li > a::before {position:absolute; content:""; background:transparent; border-right:2px solid #242c38; border-bottom:2px solid #242c38; width:4rem; height:4rem; right:20rem; top:50%; transform:rotate(-45deg) var(--hcenter);}
#pc_nav .depth2 > li > a.non::before {display:none;}
#pc_nav .depth2 span {display:inline-block; position:relative;}
#pc_nav .depth2 span::before {position:absolute; content:""; height:5px; width:0; bottom:3rem; left:50%; transform:var(--hcenter); transition:0.3s; background:#abb9ce; opacity:0; z-index:-1;}
#pc_nav .depth2 a:hover {font-weight:700;}
#pc_nav .depth2 a:hover span::before {opacity:1; left:0; width:100%;}
#pc_nav .depth3 { top:15rem; left:200rem; background:#242c38; }
#pc_nav .depth3 > li > a { display:block; color:#fff; font-size:16rem; padding:8rem 25rem;}
#pc_nav .depth3 span::before { background:#5c6b81; }
@media all and (max-width:1023px){
    #pc_nav { display:none; }
}

/*mobile navi*/
#m_nav_open { display:none;}
@media all and (max-width:1023px){
    #m_nav_open {display:flex;}
}
#m_nav { display:none; position:fixed; right:0; top:0; width:100%; height:100%; z-index:100;}
#m_nav::before { content:""; position:absolute; background:rgba(0,0,0,0.5); transition:all 0.3s cubic-bezier(0.43, 0.03, 0.21, 1); width:100%; height:100%; z-index:-1; }
#m_nav .m_nav_wrap { position:absolute; right:-375rem; width:100%; max-width:377rem; height:100%; background:#fff; transition:all 0.85s 0.3s cubic-bezier(0.43, 0.03, 0.21, 1); z-index:100; }
#m_nav .depth1 { position:relative; height:100%; padding:60rem 15rem 30rem; }
#m_nav .depth1::before { position:absolute; content:""; top:0; left:0; width:142rem; height:100%; background:#f5f5f5; z-index:-1; }
#m_nav .depth1 > li > a { display:inline-block; width:134rem; line-height:1.4; padding:7rem 14rem; margin-bottom:10rem; }
#m_nav .depth1 > li > a.on { background:var(--blue); color:#fff; font-weight:700; border-radius:10rem 50rem 50rem 10rem; box-shadow:3px 3px 16px rgba(0, 0, 0, 0.2);}
#m_nav .depth2 { display:none; position:absolute; top:0; left:142rem; width:calc(100% - 142rem); padding:50rem 30rem;}
#m_nav a.on+.depth2 { display:block; }
#m_nav .depth2 > li { padding:10rem 0; border-bottom:1px solid #ddd; }
#m_nav .depth2 > li > a { position:relative; display:block;}
#m_nav .depth2 > li > a::before, 
#m_nav .depth2 > li > a::after { content:''; position:absolute; right:0; top:50%; width:10px; height:2px; background:#aaa; border-radius:2rem; transform:var(--hcenter); }
#m_nav .depth2 > li > a::after { width:2px; height:10px; right:4px; }
#m_nav .depth2 > li > a.non::before { display:none; }
#m_nav .depth2 > li > a.non::after { width:5px; height:5px; border-top:2px solid #aaa; border-right:2px solid #aaa; background:transparent; transform:rotate(45deg) var(--hcenter); }
#m_nav .depth2 > li > a.on { font-weight:700; }
#m_nav .depth2 > li > a.on::before { background:#333; }
#m_nav .depth2 > li > a.on::after { display:none; }
#m_nav .depth3 { display:none; margin-top:10rem; }
#m_nav .depth3 li { margin:7rem 0; }
#m_nav .depth3 li a { position:relative; display:block; color:#666; font-size:16rem; padding-left:20rem;}
#m_nav .depth3 li a.on { display:block; font-weight:700; }
#m_nav .depth3 li a::before { content:''; position:absolute; width:5rem; height:5rem; left:0; top:10rem; border-radius:50rem; background:#a8a8a8; }
#m_nav .depth3 li a.on::before { background:#3f4e63;}
#m_nav .depth3 li a span { position:relative; display:inline-block;}
#m_nav .depth3 li a span::before { content:""; position:absolute; border-bottom:1px solid #666; width:100%; height:1px; left:0; bottom:1px; opacity:0; }
#m_nav .depth3 li a.on span::before {opacity:1;}
/*닫기*/
#m_nav .close {display:block; position:absolute; width:20rem; height:20rem; text-indent:-9999rem; top:30rem; right:20rem;}
#m_nav .close::before, .close::after { content:''; position:absolute; top:0; left:0; width:21rem; height:3rem; background:#222; transform:rotate(45deg);}
#m_nav .close::after {transform:rotate(-45deg);}

/*footer*/
footer { background:var(--blue); color:#fff; padding:40rem 0; }
footer .link { display:flex; align-items:center; }
footer .link li { position:relative; margin:5rem 0 5rem 60rem; }
footer .link li::after { content:''; position:absolute; left:-35rem; top:12rem; width:5rem; height:5rem; border-radius:50%; background:#fff; opacity:0.8; }
footer .link a { display:inline-block; color:#fff;}
footer .link a.point {font-weight:600; border-bottom:1px solid #fff; }
footer .address {margin:20rem 0 10rem; }
footer .address p { display:inline-block; margin-right:30rem; }
footer .address p strong { margin-right:10rem; }
footer .copy {font-size:16rem; opacity:0.7; }
@media all and (min-width:551px){
    footer .link li:first-of-type { margin-left:0; }
    footer .link li:first-of-type::after { display:none; }
}
@media all and (max-width:550px){
    footer .link { display:block; }
    footer .link li { margin-left:25rem; }
    footer .link li::after { left:-20rem; }
}

/*상단으로가기*/
.go_top {display:block; position:fixed; bottom:25rem; right:70rem; width:60rem; height:60rem; padding:26rem 0 0; background:#14438b; color:#fff; font-size:13rem; letter-spacing:1rem; text-align:center; border-radius:50%; opacity:0; transition:all 0.5s; font-weight:600; z-index:100;}
.go_top:before {content:''; position:absolute; left:50%; top:15rem; width:5rem; height:5rem; margin-left:-1rem; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(-45deg) translate(-50%, 0);}
@media all and (max-width:1890px){
	.go_top{right:35rem;}
}