@charset "utf-8";
@import url('/common/css/Pretendard/Pretendard.css');

body { font-size:18rem; font-family:'Pretendard'; color:#222; line-height:1.6; font-weight:300; }
a { color:#222; }
.wrap { max-width:1400rem; width:96%; margin:0 auto;}
@media all and (max-width:1200px){
  html {font-size:0.9px;}
}

/*header*/
#header::after {content:''; display:table; clear:both; }
#header .h1 { float:left; width:142rem; height:73rem; background:url('../img/layout/logo.png') no-repeat center/cover; text-indent:-9999999rem; margin-top:10rem; }
#header .r_btn { display:flex; align-items:center; float:right; height:100rem; }
#header .r_btn a { position:relative; display:block; float:left; font-size:16rem; text-transform:uppercase; padding:0 15rem; }
#header .r_btn a:first-of-type {padding-left:22rem}
#header .r_btn a:first-of-type::before {content:''; position:absolute; right:0; top:50%; width:1px; height:10rem; background:#ddd; transform:translate(0, -50%); }
#header .r_btn a:first-of-type::after {content:''; position:absolute; left:0; top:50%; width:16rem; height:17rem; background:url('../img/layout/login.png') no-repeat center/cover; transform:translate(0, -50%); }
#header .r_btn a:nth-of-type(2) {padding-right:0;}
@media all and (max-width:1023px){
  #header .r_btn a:first-of-type::before {display:none;}
  #header .r_btn a:nth-of-type(2) {display:none;}
}

#nav { display:flex; float:left; align-items:center; width:calc(100% - 322rem); height:100rem; }
#nav .depth1 { display:inline-block; margin:0 auto; }
#nav .depth1 > li { float:left; }
#nav .depth1 > li > a { display:block; float:left; font-size:23rem; padding:15rem 30rem; font-weight:600; }
#nav .depth2_wrap { visibility:hidden; position:absolute; left:0; top:100rem; width:100%; border-top:1px solid #eee; box-shadow:0 10rem 10rem rgba(0,0,0,0.1); background:#fff; z-index:10; }
#nav a.active+.depth2_wrap { visibility:visible; }
#nav .depth2_wrap .wrap {position:relative; overflow:hidden;}
#nav .depth2_wrap .wrap::before {content:''; position:absolute; left:0; top:0; width:350rem; height:100%; background:#f3f3f3; z-index:-1; }
#nav .depth_info { float:left; width:350rem; padding:30rem; }
#nav .depth_info dt { font-weight:800; font-size:30rem; }
#nav .depth_info dd { color:#666; font-size:16rem; margin-top:10rem;}
#nav .depth2 { float:left; width:calc(100% - 350rem); min-height:180rem; padding:30rem 0 30rem 30rem;}
#nav .depth2 a {display:block; float:left; width:22.75%; margin:0 0 20rem 3%; border:1px dashed #ddd; border-radius:10rem;padding:10rem 20rem; }
#nav .depth2 a:nth-of-type(4n+1) {margin-left:0; clear:both; }
#nav .depth2 a:hover { border:1px solid #b7c8e6; font-weight:600; background:#d4dcf4; }
@media all and (max-width:1023px){
  #nav {display:none;}
}
@media all and (min-width:1024px){
  #mnav_open {display:none !important;}
}
@media all and (max-width:1023px){
  #mnav_open {display:block !important;}
  #mnav_open { width:30rem; height:30rem; background:url('../img/layout/sitemap.png') no-repeat center/100% auto; text-indent:-9999rem; margin-left:10rem;  }
}

#mnav { display:block; position:fixed; left:0; top:0; width:100%; height:100%; z-index:-1; }
#mnav::before { content:''; position:absolute; left:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0); transition:0.5s; z-index:10; }
#mnav .scroll { position:absolute; top:0; right:-100%; min-width:355rem; width:calc(100% - 300rem); height:100%; background:#fff; overflow-y:auto; transition:0.5s; z-index:20; padding-top:0; }
#mnav.on { z-index:200;}
#mnav.on .scroll { right:0; }
#mnav.on::before { background:rgba(0,0,0,0.5); }
#mnav .mnav_top { background:#555; height:60rem; padding:0 20rem; }
#mnav .mnav_top a { color:#fff; text-transform:uppercase; line-height:60rem;}
#mnav .mnav_top a:last-of-type {position:relative; margin-left:40rem; }
#mnav .mnav_top a:last-of-type::before {content:''; position:absolute; left:-20rem; top:50%; width:1px; height:15rem; background:#fff; transform:translate(0, -50%); opacity:0.3; }
#mnav .depth_info { display:none; }
#mnav .depth1 > li { width:250rem; background:#d4dcf4; }
#mnav .depth1 > li > a {display:block; text-align:center; border-bottom:1px dashed #b7c8e6; font-size:18rem; font-weight:600; padding:9rem 0; }
#mnav .depth1 > li > a.on {background:#2253ae; color:#fff; }
#mnav .depth2 { display:none; position:absolute; right:0; top:60rem; width:calc(100% - 250rem); }
#mnav .depth2::before {content:''; position:absolute; left:-250rem; top:0; width:250rem; min-height:100vh; height:100%; background:#d4dcf4; z-index:-1; }
#mnav .depth1 > li > a.on+div .depth2 {display:block;}
#mnav .depth2 a { position:relative; display:block; border-bottom:1px solid #d9d9d9; padding:10rem 20rem; }
#mnav_close {position:absolute; right:15rem; top:15rem; width:40rem; height:40rem; text-indent:-99999rem; }
#mnav_close::before,
#mnav_close::after {content:''; position:absolute; left:50%; top:0; width:3px; height:30rem; background:#fff; transform:rotate(45deg);}
#mnav_close::after {transform:rotate(135deg);}
@media all and (max-width:1023px){
  #mnav .depth1 > li {width:180rem;}
  #mnav .depth2 {width:calc(100% - 180rem);}
}
@media all and (max-width:768px){
  #mnav .depth1 > li {width:130rem;}
  #mnav .depth2 {width:calc(100% - 130rem);}
  #header .h1 {  width:122rem; height:53rem; margin-bottom:10rem }
}


#footer .btn { background:#ededed; }
#footer .btn .wrap {overflow:hidden; padding:10rem 0; }
#footer .btn a {display:block; float:left; padding:5rem 0;}
#footer .btn a:last-of-type { position:relative; font-weight:700; margin-left:40rem; }
#footer .btn a:last-of-type::before {content:''; position:absolute; left:-20rem; top:11rem; width:1px; height:15rem; background:#000; opacity:0.2; }
#footer .address { padding:25rem 0 40rem; }
#footer .address p { display:inline-block; font-size:17rem; padding-right:30rem; }
#footer .copyright {display:block !important; font-size:14rem !important; color:#666; text-transform:uppercase; letter-spacing:1rem; margin-top:10rem; }