@charset "utf-8";
@import url('/design/common/css/Pretendard.css');
@media all and (max-width:1240px) {
    html {font-size:0.95px;}
}
@media all and (max-width:768px) {
    html {font-size:0.9px;}
}

/*var*/
:root {
    --hcenter: translate(0, -50%);
    --wcenter: translate(-50%, 0) ;
    --center: translate(-50%, -50%) ;
    --blue: #233482;
    --g_txt: #6a6a6a;
}

/*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;}

html { background:#fbfbfb; }
body, input, button, textarea, select { font-family:'Pretendard', sans-serif; font-weight:400; font-size:17rem; color:#323232; line-height:1.7; }
input, button, textarea, select { background:#fff; border-radius:0; vertical-align:middle; border:1px solid #ddd;}
button, input[type="submit"] { cursor:pointer; }
a { color:#323232; }

.wrap { max-width:1500px; width:96%; margin:0 auto; }

/*header*/
header {position:relative; margin:0 60rem; height:110rem; z-index:10; }
header::after {content:''; display:table; clear:both; }
header h1 { position:relative; float:left; padding-left:100rem; line-height:1.3; margin-top:30rem; }
header h1::before {content:''; position:absolute; left:0; top:50%; width:90rem; height:45rem; background:url('/design/facility/img/layout/logo.png') no-repeat 0 0/100% auto; transform:var(--hcenter); }
header h1 a {float:left;}
header h1 a:not(.site_name) { font-size:28rem;  }
header h1 a:not(.site_name) span { display:block; font-size:10rem; color:#a1a1a1; text-transform:uppercase; font-weight:400; letter-spacing:0.3rem; }
header h1 a.site_name { position:relative; font-size:22rem; padding:10rem 0 0 60rem; }
header h1 a.site_name::before { content:''; position:absolute; left:30rem; top:13rem; width:1px; height:22rem; background:#d6d6d6; }
header .right { display:flex; align-items:center; float:right; margin-top:35rem; }
header .right a { position:relative; display:block; float:left; }
header .right a::before {content:''; position:absolute; width:30rem; height:30rem; background:url('/design/facility/img/layout/header_icon.png') no-repeat 0 0/200% auto; }
header .right a.member { color:var(--g_txt); font-size:16rem; padding-right:35rem; }
header .right a.member::before { right:0; top:50%; transform:var(--hcenter); }
header .right a.sitemap { width:40rem; height:40rem; text-indent:-99999px; margin-left:10px; }
header .right a.sitemap::before { left:50%; top:50%; transform:var(--center); background-position:100% 0; }
@media all and (max-width:1620px){
    header { margin:0 auto; max-width:1500px; width:96%; }
}
@media all and (max-width:1200px){
    header .right a.sitemap {display:none;}
}
@media all and (max-width:480px){
    header h1 a:not(.site_name) { display:none; }
    header h1 a.site_name {padding-left:10rem;}
    header h1 a.site_name::before {display:none;}
    header .right a.member {text-indent:-99999px; }
}


#mnav_open {display:none;}
@media all and (max-width:1200px){
    #mnav_open {display:block;}
}

/*pc_navi*/
#pc_nav { position:absolute; left:50%; top:37rem; transition:0.4s; transform:translateX(-35%); z-index:10; }
#pc_nav .depth1 { display:flex; align-items:center; }
#pc_nav .depth1 > li { position:relative; text-align:center; }
#pc_nav .depth1 > li > a { display:block; font-size:22rem; padding:0 25rem; font-weight:600; white-space:nowrap; transition:0.3s; }
#pc_nav .depth2 { display:none; position:absolute; left:0; top:70rem; width:100%; text-align:left; padding:20rem; }
#pc_nav .depth2 a { display:inline-block; padding:4rem;  }
#pc_nav .depth2 a:hover { opacity:0.5; }
#pc_nav .depth3 { display:none; }

header.nav_on h1, header.nav_on .right {filter:blur(10px);}
header + .nav_bg { position:absolute; left:-60rem; top:0; width:calc(100% + 120rem); height:0; background:rgba(255,255,255,.5); backdrop-filter:blur(10px); box-shadow:0 0 20rem rgba(0,0,0,0.2); transition:0.2s; z-index:5; }
header.nav_on + .nav_bg { height:400rem; }
header.nav_on #pc_nav .depth1 > li::before {content:''; position:absolute; left:0; top:-37rem; width:100%; height:400rem; background:var(--blue); opacity:0; transition:0.5s; z-index:-1;}
header.nav_on #pc_nav .depth1 > li.on::before { opacity:1; }
header.nav_on #pc_nav .depth1 > li > a { padding:0 50rem; }
header.nav_on #pc_nav .depth2 {display:block;}
header.nav_on #pc_nav li.on a { color:#fff; }
@media all and (max-width:1620px){
    #pc_nav .depth1 > li > a { font-size:20rem; padding:0 20rem;  }
}
@media all and (max-width:1200px){
    #pc_nav { display:none; }
}

#m_nav { display: none; position: fixed; right: 0; top: 0; width: 100%; height: 100%; z-index: 100;}
#m_nav::before { position: absolute; content: ""; background: rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.43, 0.03, 0.21, 1); z-index: -1; width: 100%; height: 100%; }
#m_nav .m_nav_wrap {position: absolute; right: -375rem; width: 100%; max-width: 377rem; height: 100%; background: #fff; z-index: 100; transition: all 0.85s 0.3s cubic-bezier(0.43, 0.03, 0.21, 1); }
#m_nav .top { padding: 10rem 24rem; display: flex; align-items: center;  }
#m_nav .top a { position:relative; display:block;; font-weight:500; }
#m_nav .site_link {background: #333; padding: 13rem 0; text-align: center;}
#m_nav .site_link a {color: #fff; font-size: 16rem; padding: 0 18rem; position: relative;}
#m_nav .site_link a::before{ content: ""; position: absolute;  background: #fff; width: 1px; height: 9rem; right: 0; top: 50%; transform: translateY(-50%); }
#m_nav .site_link a:last-child::before{display: none;}
#m_nav .depth1{position: relative; height: 100%; padding: 20rem 16rem;}
#m_nav .depth1::before {position: absolute; content: ""; top: 0; left: 0; width: 142rem; height: 100%; background: #f5f5f5; z-index: -1;}
#m_nav .ul a span{margin-top: 50rem; margin-bottom: 5rem;}
#m_nav .depth1 > li > a{display: inline-block; width: 134rem; padding: 7rem 14rem; font-size: 16rem; font-weight: 500; 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: 20rem 30rem;}
#m_nav a.on + .depth2 {display: block;}
#m_nav .depth2 > li {margin: 17rem 0;}
#m_nav .depth2 > li > a{font-size: 16rem; font-weight: 400; position: relative; display: block;}
#m_nav .depth2 > li > a::before,
#m_nav .depth2 > li > a::after { content:''; position:absolute; right:0; top:50%; width:14px; height:3px; background:#aaa; border-radius:2rem; transform:var(--hcenter); }
#m_nav .depth2 > li > a::after { width:3px; height:14px; right:5px; }
#m_nav .depth2 > li > a.non::before,
#m_nav .depth2 > li > a.non::after {display: none;}
#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;}
#m_nav .depth3 li{margin: 7rem 0;}
#m_nav .depth3 li a{display: block; color: #666; font-size: 15rem; padding-left: 20rem; position: relative;}
#m_nav .depth3 li a.on, #m_nav .depth3 li a:hover{display: block; font-weight: 700;}
#m_nav .depth3 li a::before{position: absolute; content: ''; width: 5rem; height: 5rem; left: 0; top: 10rem; border-radius: 50rem; background: #a8a8a8;}
#m_nav .depth3 li a.on::before, #m_nav .depth3 li a:hover::before{position: absolute; content: ''; width: 5rem; height: 5rem; left: 0; top: 10rem; border-radius: 50rem; background: #3f4e63;}
#m_nav .depth3 li a span{display: inline-block; position: relative;}
#m_nav .depth3 li a span::before{position: absolute; content: ""; border-bottom: 1px solid #666; width: 100%; height: 1px; left: 0; bottom: 1px; opacity: 0;}

#m_nav .depth3 li a.on span::before, #m_nav .depth3 li a:hover span::before{opacity: 1;}

/*닫기*/
.close {display:block; position:absolute; width:20rem; height:20rem; text-indent:-9999rem; top: 24rem; right: 20rem;}
.close::before, .close::after { content:''; position:absolute; top:0; left:0; width:21rem; height:3rem; background:#222; transform:rotate(45deg);}
.close::after {transform:rotate(-45deg);}


/*footer*/
footer { background:#242c38; color:#fff; padding:50rem 0; }
footer .wrap {position:relative; }
footer .f_site > ul {display:flex;}
footer .f_site > ul > li {position:relative; width:calc((100% - (20rem*4))/5); margin-right:20rem;}
footer .f_site > ul > li:last-child{margin-right: 0;}
footer .f_site > ul > li > a {display:block; position:relative; padding:15rem 20rem; border-radius: 16rem; background:#1b232f; color:#fff; }
footer .f_site > ul > li > a:before,
footer .f_site .list > a:before {content:''; position:absolute; right:25rem; top:50%; width:8rem; height:8rem; border-top:3px solid #aaa; border-left:3px solid #aaa; transform:rotate(45deg) translateY(-50%);}
footer .f_site .list { display:none; position:absolute; bottom:0; left:0; width:100%; background:#fff; z-index:2; border-radius: 16rem; overflow: hidden; box-shadow: 0 7px 7px rgba(255, 255, 255, 0.08);}
footer .f_site .list > a {display:block; position:relative; padding:13rem 20rem; background:#1b232f; color:#fff; border-radius: 16rem 16rem 0 0;}
footer .f_site .list > a:before { top:47%; transform:translateY(-50%) rotate(225deg);}
footer .f_site .list ul {height:200rem; padding:10rem 25rem; overflow-y:scroll;}
footer .f_site .list ul li {position:relative; margin:5rem 0; padding-left:20rem;}
footer .f_site .list ul li:before {content:''; position:absolute; top:11rem; left:3rem; width:5rem; height:5rem; background:#d2d2d2; border-radius:50%;}
footer {position:relative;}
footer .f_link {margin:30rem 0 25rem;}
footer .f_link a {margin-right:20rem; color:#fff;}
footer .f_link a.privacy {color:#e2c60d; border-bottom:1px solid #e2c60d; font-weight:600;}
footer .f_info address {display:flex; margin-bottom:7rem;}
footer .f_info address p,
footer .f_info address div {margin-right:35rem;}
footer .f_info address div b {margin-right:10rem;}
footer .f_info a {color:#fff;}
footer .f_info small {font-size:15rem; color:#a3a3a3;}
@media all and (max-width:1023px){
    footer .f_site > ul > li > a{font-size: 16rem;}
    footer .f_link a {margin-right:10rem;}
    footer .f_info address {flex-wrap:wrap;}
    footer .f_info address p {width:100%;}
}
@media all and (max-width:905px){
    footer .f_site > ul{flex-wrap: wrap;}
    footer .f_site > ul > li{width: calc((100% - (10rem))/2); margin-bottom: 10rem;}
    footer .f_site > ul > li:nth-child(even){margin-right: 0;}
    footer .f_site > ul > li:nth-child(odd){margin-right: 10rem;}
    footer .f_site > ul > li > a {padding: 12rem 18rem;}
    footer .f_link a {margin-right:10rem;}
    footer .f_info address {flex-wrap:wrap;}
    footer .f_info address div {width:100%;}
    footer .f_info address p {width:100%;}
}
@media all and (max-width:340px){
    footer .f_site > ul > li {width:100%; margin-right: 0 !important;}
}

	/*상단으로가기*/
	.go_top {display:block; position:fixed; bottom:25rem; right:70rem; width:60rem; height:60rem; padding:26rem 0 0; background:#3b3c45; 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;}
    }