@charset "utf-8";
a.btn_more{display:inline-block; padding:18rem 70rem 18rem 35rem; background:#c5a56e url(../img/layout/icon_btn.svg) no-repeat right 35rem center; background-size:14rem; border-radius:30rem; color:#fff; font-size:15rem}
a.btn_more:hover{background-color:#654423;}

/* pop layer */
#popLayerBg { position:fixed; z-index:99; width:100%; height:100%; background:#000; opacity:0.8; filter:alpha(opacity=80); display:none }
.pop_layer { z-index:100; display:none; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); background:#fff; border-radius:0; box-shadow:0 0 5px rgba(0,0,0,0.6); }
.pop_layer > header { background:#576f8d; height:46px; border-radius:0; }
.pop_layer > header h2 { text-align:center; font-family:nanumsquare; font-size:18px; font-weight:500; color:#fff; line-height:42px; }
.pop_layer .btn_close { position:absolute; top:12px; right:12px; display:block; font-size:20rem; text-align:center; width:20rem; height:20rem; line-height:20px; text-indent:-9000px; background:url(../img/btn_close.png) no-repeat; background-size:100% }
.pop_layer > header + .con { padding:30rem; padding-bottom:40rem }
.pop_layer .btn_add i { font-size:19rem }
.pop_layer .btn_area { text-align:center; margin:30rem 0 0 0 }
.pop_layer .btn_area .btn { min-width:150rem }

.wrap {width:1400rem; margin:0 auto; position:relative }

#header {background:#fff; height: 130rem;position:fixed;top:0;lefT:0;width:100%;z-index:100;color:#fff;transition:all .3s;display: flex;align-items: flex-start;justify-content: space-between;}
#header h1 {z-index:51; position:absolute; left:0; top:40rem; font-size:0; text-align:center;}
#header h1 a {width: 353rem;height: 46rem;background-size:100%;background-image: url(../img/layout/logo.png);display: block;}
#header .gnb {position: relative;margin:0 auto;/* text-align:right; */float: right;margin-right:260rem; }
#header .gnb:before{content:'';position:absolute;left:0;top:0;display:block;}
#header .gnb > ul{display:inline-block; margin-top:55rem}

#header .gnb .depth1 {margin: 0 5rem;position:relative;min-width:130rem;display: inline-block; text-align:center;}
#header .gnb .depth1:nth-child(3) .depth2 li:nth-child(3) {display:none;}
#header .gnb .depth1:nth-child(3) .depth2 li:nth-child(4) {display:none;}
#header .gnb .depth1:nth-child(3) .depth2 li:nth-child(5) {display:none;}
#header .gnb .depth1:nth-child(3) .depth2 li:nth-child(6) {display:none;}
#header .gnb .depth1:nth-child(3) .depth2 li:nth-child(7) {display:none;}
#header .gnb .depth1:nth-child(3) .depth2 li:nth-child(8) {display:none;}
#header .gnb .depth1:nth-child(3) .depth2 li:nth-child(9) {display:none;}
#header .gnb .depth1 > a {color:#000;display:inline-block;letter-spacing:-.5px;font-size: 20rem;font-weight:600;font-family:'Pretendard';}
#header .gnb .depth1 ul {padding-top:0;transition:all .3s;height:0;overflow:hidden;width: 100%;position: absolute;left: 0;top: 53rem;}
#header .gnb .depth1 ul li{text-align:center;}
#header .gnb .depth1 .depth2 {padding-top:10rem; }
#header .gnb .depth2 li > a {display:inline-block;font-weight:500;font-size:15rem;line-height:1.4;padding:7rem 0;letter-spacing:-1px;font-family:'Pretendard';color: #84878b;word-break: keep-all;}
#header .btn_user { float:right; margin:35rem 0 0 0; display:block; font-size:19px }

#header .right_box{position:absolute; right:0rem; top:50rem; display:flex;gap:20px; }
#header .right_box ul {z-index:10; margin-top:7rem;}
.search-container {  width: 200rem;  display: block;  margin: 0 auto;}
.search-container input {border:0; border-radius:0; }
input#search-bar {  margin: 0 auto;  width: 100%;  height: 45px;  padding: 0 20px;  font-size: 15rem;  border-bottom: 1px solid #000;  outline: none;}
input#search-bar:focus {  border: 0px solid #008ABF;  transition: 0.35s ease;  color: #008ABF;}
input#search-bar:focus::-webkit-input-placeholder {  transition: opacity 0.45s ease;  opacity: 0;}
input#search-bar:focus::-moz-placeholder {  transition: opacity 0.45s ease;  opacity: 0;}
input#search-bar:focus:-ms-placeholder {  transition: opacity 0.45s ease;  opacity: 0;}

.search-container i {  position: relative;  float: right;  font-weight:100; font-size:30rem; width: 75px;  height: 75px;  top: -40px;  right: -45px;}

#header .user {position:absolute; right:0rem; top:5rem; z-index:10; }
#header .user ul {display: flex; align-items: center;    justify-content: center; }
#header .user li {cursor:pointer;  padding:5rem 10rem; font-weight:600; color:#494949; font-size:13rem; }

#header .gnb .depth1 > a:before {background:#004ea2;margin-top: 50rem;content:"";height:3px;left:0px; position: absolute;width:0%;transition:0.3s;}
#header .gnb .depth1:hover > a:before { width:100%; }

#header.down {height: 380rem; }
#header.down a {}
#header.down .gnb .depth1 > a {  }
#header.down .gnb .depth1 ul { height:100%; overflow:visible  }
#header.down .gnb .depth1:hover .depth2 {padding-top:10rem; background:#f7f7f7; height:270rem; }
#header.down .gnb .depth2 li > a:hover { color:#000; }

#header.on { }
#header.on a {}
#header.down .gnb .depth2 li > a{color:#84878b;}
.header-login{position:absolute; right:0; top:-6rem; display:flex; align-items:center;}
.header-login a{color:#fff; white-space:nowrap;}
.header-inner.wrap{}
.header-login li:nth-child(1) a{color:#248689;}
.header-login  a{display:block; padding:8rem 14rem; background:#fff; font-weight:500; font-size:15rem; text-align:center; min-width:82rem;}
.header-login li:nth-child(2) a{background:#15686c;}

/* footer */
#footer { padding:50rem 0; margin:0rem 0 0 0; background:#111; font-size:16rem; color:#fff;}
#footer b{display:block; margin-bottom:25rem; color:#fff;}
#footer h1 { float:left; margin-right:40rem; }
#footer h1 a { text-indent:-9000px; font-size:0; width:353rem; height:46rem; background-image:url(../img/layout/foot_logo.png); display:block; overflow:hidden; background-size:100% }
#footer nav { position:absolute; right:0; top:0 }
#footer nav li { float:left; margin:0 0 0 17px; }
#footer .list_info li{line-height:2; float:left; margin-right:30rem; opacity:0.3; }
#footer .list_info li:nth-child(4n){clear:both;}
#footer dl{line-height:2;}
#footer dt, #footer dd { display:inline-block }
#footer dd { margin:0 15rem 0 0rem }
#footer .copyright {font-weight:300; margin:0rem 0 0 0; color:#a8a8a8; opacity:0.3;}
#footer #top_btn { border:0; background:rgba(0,0,0,0.5); font-size:30rem; color:#fff; right:30px; bottom:30px }
#footer #top_btn:hover { background:rgba(0,0,0,1) }
#footer #top_btn i { vertical-align:2rem }



#footer dl{line-height:2;}
#footer dt, #footer dd { display:inline-block }
#footer dd { margin:0 15rem 0 0rem }
#footer .copyright {font-weight:300; margin:30rem 0 0 0; color:#fff; }
#footer #top_btn { border:0; background:rgba(0,0,0,0.5); font-size:30rem; color:#fff; right:30px; bottom:30px }
#footer #top_btn:hover { background:rgba(0,0,0,1) }
#footer #top_btn i { vertical-align:2rem }



@media (min-width:2000px){

}


@media (max-width:1480px){
	.wrap{width:100%; padding:0 30rem;}
	
	#header h1{left:30rem}
	
}


@media (max-width:1023px) {
	#header { height:80rem }
	#header::before{height:80rem}
	#header.down { height:0 }
	#header h1 {left:5rem;top: 0;}
	#header h1 a{width:185rem; height:25rem; margin:20rem 0;}
	#header .right_box{display:none;}
	.header-login{right:65rem; top:20rem}
	#header .btn_user { position:absolute; right:70rem; top:25rem; font-size:22rem; z-index:8; float:none; margin:0 }
	#header .btn_gnb { position:absolute; right:20rem; top:25rem; font-size:22rem; z-index:15; color:#000;}
	#header .btn_gnb.on { color:#000; transform:rotate(-90deg) }
	#header .btn_gnb.on .fa-bars:before{content: "\f00d";}
	#header .gnb { position:fixed; width:100%; background:#fff; height:100%; top:0; right:-100%; margin:0; float:none; z-index:9; transition:all .3s }
	#header .gnb.on {z-index:11; right:0;}
	#header .gnb > ul{display:block; margin-top:80rem; padding-top:40rem; border-top:1rem solid #ddd;}
	#header .gnb:before{display:none;}
	#header.down .gnb a { color: #000 }
	#header.down .gnb .depth1 > a { margin-bottom:0 }
	#header.down .gnb .depth1:hover > a { color:#000 }
	#header .gnb.on .depth1 ul {display:none;height: auto;position: static; padding:20rem; background:#fff; border-top:1rem solid #fff;  transition: none;}
	#header .gnb.on .depth1 ul li a{display:block; padding:0 0 14rem 0; color:#000; text-align:left;}
	#header .gnb.on .depth1 ul li:last-child a{padding-bottom:0}

	#header .gnb .depth1 > a:before { display:none }
	#header .gnb .depth1 {float:none;margin-bottom:20rem;text-align: left;display: block;}
	#header .gnb .depth1 > a {display:block; height:auto; padding-bottom:12rem; line-height:1; color:#000; }

	#header .user  {margin-right:50rem; margin-top:0rem; top:25rem;}
	#header .user a {font-size:13rem; }
	#header .user.on a { color:rgba(0,0,0,0.7) }

	#header.on { background:#fff }
	#header.on .gnb a { color:#000; font-size:20rem; }
	#header.on .gnb .depth1 ul li a{font-size:17rem;}

	#footer nav {display:none; }
	#footer h1 { margin-bottom:30rem;}
	#footer h1 a { width:253rem; height:36rem; }
}


@media (max-width:860px){	
	#header .gnb .depth1 {margin-bottom:10rem}
	#footer {padding:50rem 0; margin:0 10rem;}
	#footer .ft1 {flex-direction: column;}
	#footer .ft1 .ft_top {position: absolute;top: 15px;right: 0px;}
	#footer .ft1 .ft_top .top_btn {width: 50rem;}
	#header .user li { padding:5rem 5rem;  font-size:11rem; }
}



@media (max-width:540px) {

	#header .gnb{width:100%}
	#header .btn_gnb{top:21rem}
	
	.header-login{top:25rem; right:49rem}
	.header-login a{min-width:55rem;padding: 6rem 10rem;font-size:13rem;}
	
	a.btn_more{padding: 10rem 55rem 10rem 25rem; background: #c5a56e url(../img/layout/icon_btn.svg) no-repeat right 25rem center; background-size:12rem; font-size:12rem}

	#footer{font-size:14rem}
}




/* all_menu */
.all_menu{position:fixed; width:100%; left:0; top:-100%; height:100%; background:#fff; z-index:999; overflow-y:auto; transition:all .5s;}
.all_menu.on {top:0;}
.all_menu .top_box{position:relative; height:155px;}
.all_menu .logo{position:absolute; left:70px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);}
.all_menu .logo a{display:inline-block;}
.all_menu .right_box{position:absolute; right:70px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);}
.all_menu .right_box ul{font-size:0; letter-spacing:-4px;}
.all_menu .right_box ul li{display:inline-block; vertical-align:middle; position:relative;}
.all_menu .right_box ul li + li{margin-left:20px;}
.all_menu .right_box ul li:nth-of-type(1):before{content:''; position:absolute; right:-10px; top:7px; width:1px; height:10px; background:#e6e6e6}
.all_menu .right_box ul li:nth-of-type(3){margin-left:30px}
.all_menu .right_box ul li a{display:block; font-size:14px; font-weight:300; letter-spacing:-0.025em; color:#888888;}
.all_menu .gnb{overflow:hidden;}
.all_menu .gnb .inner {max-width:1400rem; margin:0 auto;}
.all_menu .gnb .inner > ul {position:relative ; z-index:10;}
.all_menu .gnb .inner > ul > li{padding:25px 0; font-size:0; letter-spacing:-4px; position:relative; z-index:10;}
.all_menu .gnb .inner > ul > li > a{display:inline-block; vertical-align:middle; width:250px; font-size:25px; font-weight:700; letter-spacing:-0.025em; color:#222222;}
.all_menu .gnb ul.depth2{display:inline-block; vertical-align:middle; width:calc(100% - 300px); font-size:0; letter-spacing:-4px;}
.all_menu .gnb ul.depth2 li{display:inline-block; vertical-align:top; padding:5px 0; margin-right:60px;}
.all_menu .gnb ul.depth2 li:last-of-type{margin-right:0;}
.all_menu .gnb ul.depth2 li a{display:block; font-size:18rem; font-weight:400; letter-spacing:-0.05em; color:#222222;}

.all_menu .gnb .inner > ul > li.on:before{content:''; position:absolute; left:-100%; width:10000%; top:0; height:100%; background:#f8f8f8; z-index:-1;}
.all_menu .gnb .inner > ul > li.on > a{color:#002967;}
.all_menu .gnb .inner > ul > li.on ul li:hover a{color:#222222;}
.all_menu .gnb .inner > ul > li.off ul li a{color:#888888;}

@media all and (max-width:1400px){
	.all_menu{display:none !important;}
	
}


