@charset "utf-8"; 

/*
 * --------------------------------------------------------------------------
 * descript : 레이아웃
 * --------------------------------------------------------------------------
 * version	: 2.0.0
 * author	: Yoodaekyung
 * update	: 2018.08.17
 * email	: eorud0818@naver.com
 * --------------------------------------------------------------------------
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700&family=Poppins:wght@300;600&display=swap');


html,
body {height:100%; font-size:20px; line-height:1.5; font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-weight:300; letter-spacing:-.5px;  word-break:keep-all;}
#wrap{min-width: 1200px; min-height:600px;  margin:0 auto; overflow: hidden;}
.wrap {width:1200px; margin:0 auto; }
.pc_no{display: none;}





@media all and (max-width:1200px) {
	#wrap, .wrap {width:100%; min-width:100%; }
}

@media all and (max-width:1024px) {
	html, 	body {font-size:18px;}
}

@media all and (max-width:640px) {
	html, 	body {font-size:16px;}
}



/** header **/
#header {position:fixed; top:0; left:0;width: 100%; line-height: 1; z-index:10; }
#header .wrap{position: relative; width: 1720px; height:4.5em; line-height:4.5em; margin: 0 auto; display: flex; justify-content: space-between;align-items: center;}
#header .logo{width:310px; float: left;}
#header .logo.on{display: none;}


#header .sub_nav_wrap > * {float: left;}
#header .sub_nav{padding: 20px 0;padding-right: 60px;}
#header .sub_nav > ul > li{position: relative; float: left; padding: 0 15px; border-left: 1px solid #ccc;}
#header .sub_nav > ul > li:first-child{padding-left: 0; border-left: 0;}
#header .sub_nav > ul > li > a {color: #fff;}
#header .sub_nav .sub_nav_depth{display: none; position: absolute;top: 30px; left: 50%; width: 120px; margin-left: -60px;}
#header .sub_nav .sub_nav_depth a{display: block; padding: 15px 20px; text-align: center; background-color: #fff;}
#header .sub_nav .sub_nav_depth a:hover{color: #5cbbb8;}

#header .btn_menu{position:relative; padding: 20px 0;}
#header .btn_menu .on{display: none;}

@media all and (max-width:1720px) {
	#header .wrap {width:100%; padding:0 1em;}
}

@media all and (max-width:640px) {
	#header .logo {width:80%;}
}


#gnb {width: calc(100% - 310px); }
#gnb .nav { text-align:right; }
#gnb .nav > li{ position: relative; display:inline-block; padding: 0 1em;}
#gnb .nav > li > a{position: relative; display: block;  font-size:1.1em; color: #fff;}
#gnb .nav > li.on:hover > a {font-weight:700;}
#gnb .nav > li  .sub{display:block; position: absolute; top:4em; left:-1em; width: 8em; padding: 30px 0 ; background: #fff;border-radius: .5em;box-shadow:5px 5px 20px rgba(0, 0, 0, .2); z-index:1; opacity:0; visibility:hidden; z-index:-999999; }
#gnb .nav > li  .sub li{width: 100%; text-align:left; line-height:1; }
#gnb .nav > li  .sub li a{display: block; padding:10px 20px; font-size: 0.9em; color: #222; }
#gnb .nav > li  .sub li a:hover{color: #333; font-weight:700;}

#gnb .nav > li.on .sub, #gnb .nav > li .sub.on {opacity:1; visibility:visible; z-index:1;}

#header .all-menu-btn {display: none;position: absolute;top: 5px;right: 10px;z-index: 100;}
#header .all-menu-btn a{position: relative;top: 0;left: 0;margin: 0 auto;display: block;padding: 10px;}
#header .all-menu-btn span{display: block;width: 28px;height: 3px;margin:7px 0; background-color: #fff;}

#header .all-menu-btn.open span{width: 30px; opacity: 1;transform: rotate(45deg) translate(-7px, -7px) ;margin-bottom:0; background-color: #222;}
#header .all-menu-btn.open span:nth-last-child(2){transform: rotate(-45deg) translate(0px, 0px);}
#header .all-menu-btn.open span:nth-last-child(3){opacity: 0;}

#m-menu { display:none; width:100%;height: 100%; position:fixed; top: 0;right: 0; background:#fff; overflow: hidden; text-align: left;}
#m-menu.on {display:block;}
#m-menu .menu_logo {width:100%; padding:1.5em; border-bottom:1px solid #ddd;}
#m-menu .menu_logo a {display:inline-block;}
#m-menu .menu_logo img {width:75%;}

#m-menu .side_menu {padding:0 2em;}
#m-menu .box {border-bottom:1px solid #ddd;}
#m-menu .box .menu{width: 100%; padding:1em 0; cursor: pointer; font-weight:700; font-size:1.2em; line-height:2em; }
#m-menu .box .depth{display: none; z-index: 1;}
#m-menu .box.on .depth {display: block;}
#m-menu .box .depth ul{position: relative; background: #f8f8f8; z-index: 1;}
#m-menu .box .depth li a{display: block; line-height:1em; padding: 1em;  color: #333;}
#bg { width:100%; height:100%; position:fixed; top:0; bottom:0; background:#000; opacity:0.8; display:none; z-index:1000; }

@media all and (max-width:1024px) {
	#gnb {display:none;}
	#header .all-menu-btn {display:block;}
}



.scroll #header, #header.on{background-color: #fff;}
.scroll #header .logo.on, #header.on .logo.on{display: block;}
.scroll #header .logo.off, #header.on .logo.off{display: none;}
.scroll #gnb .nav > li > a, #header.on #gnb .nav > li > a, #header.on .sub_nav li a, .scroll #header .sub_nav li a, #header.on .lang_wrap li a, .scroll #header .lang_wrap li a{color: #000;}
.scroll #header .all-menu-btn span{background-color: #534d46;}

.quick {position:fixed; right:2em; bottom:2.5em; width:4em; height:4em;  font-size:1em; text-align:center;  color:#fff; font-weight:700; line-height:1; background:#e28e39;  padding:1em; border-radius:2em;}

/* footer */
footer{background-color:#534d46;}
footer .wrap{padding:4em 0;}
footer .logo, footer .info {float:left;width:50%;}
footer .logo  img{display:block; width:15em;}
footer .info{color: #b7b4b1; font-size:0.8em; text-align:right;}
footer .info a {color: #b7b4b1; }

footer .info span {margin-left:10px;}
footer .info em {font-style:norrmal;}
footer .info .copyright {margin-top:2em;}

@media all and (max-width:1200px) {
	footer .wrap{width:100%; padding:4em 1em;}
}

@media all and (max-width:1024px) {
	footer .logo  img{display:inline-block;  }
	footer .logo {margin-bottom:2em;}
	footer .logo, footer .info {float:none; width:100%; text-align:center;}
}


@media all and (max-width:768px) {
	footer .info span {display:block;}
}

/**********************************************************************
* Descript : 빠른상담 자세히보기 Dim 팝업 스타일
***********************************************************************/
.pop-private{display:none; position:fixed; left:0; top:0; z-index:9999; width:100%; height:100%; background:rgba(0,0,0,0.9);}
.pop-private .pop-inner{width:90%; max-width:640px; margin:50px auto 0 auto; background:#fff; border:5px solid #899499; border-radius:5px;}
.pop-private .pop-inner h3{text-align:center; padding:20px 0; background:#899499; color:#fff; font-size:17px; font-weight:700;}
.pop-private .pop-inner p{padding:15px; font-size:14px; line-height:24px; height:350px; overflow:auto;}
.pop-private .pop-inner p b{display:block; font-weight:700; color:#222;}
.pop-private .pop-inner button{display:block; width:100%; text-align:center; padding:10px 0; font-size:15px; cursor:pointer;}
/**********************************************************************/