@charset "utf-8";

/* layout */
.inner {	width: 100%; max-width:1280px;	position:relative;	margin-left:auto;	margin-right:auto;  }
.s-inner {	width:100%; max-width:1480px;	position:relative;	margin-left:auto;	margin-right:auto; }
.w-inner {	width: 100%; max-width:1780px;	position:relative;	margin-left:auto;	margin-right:auto;  }
#wrap { /* overflow-x: hidden; */ /*scroll-behavior:smooth;*/ }

/* 타블렛 가로 */

@media all and (max-width:1800px) {
	.w-inner {	width:95%; }
}
@media all and (max-width:1500px) {
	.s-inner {	width:95%; }
}
@media all and (max-width:1300px) {
    .inner {	width:95%; }
}
@media all and (max-width:1280px) {
	html { font-size: 60% !important; }
}
@media all and (max-width:976px) {
	html { font-size: 60% !important; }
}
@media all and (max-width:768px) {
	html { font-size: 0.55rem !important; }
}
@media all and (max-width:480px) {
	html { font-size: 2.2vw !important; }
}

/*Header*/
#header { position:fixed; width:100%;  z-index:150; padding: 0;display: flex; align-items: flex-start; justify-content: space-between; transition: .4s;}
#header.scroll {background: rgba(0,0,0,0.6);}
#header.on {background: rgba(0,0,0,0.6);}
#header .inner {display: flex; align-items: center; justify-content: space-between;}
#header #logo {  z-index:999; font-size:0;}
#header #logo img { display: inline-block; vertical-align:middle; max-width: 100%;  }
#header #logo img.off{padding-left: 3px}
#header #logo img.on{ display:none; }
/*
#header.on #logo img.off{ display:none; }
#header.scroll #logo img.off{ display:none; }
#header.scroll #logo img.on{ display:inline-block; }
#header.on #logo img.on{ display:inline-block; }
*/
#header .hd_bx { line-height:100px;  }
#header .hd_mbx { display: none; }


#gnb_pc { position:relative; text-align:  center; }
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative; }
#gnb_pc > ul > li > div > a { display:block; font-size:1.8rem; position:relative; width: auto; padding: 0 20px; cursor: pointer; font-weight: 700; color:#fff;  }
#gnb_pc > ul > li > div:hover a { color:#0286d1 !important;   }


#gnb_mo { position:fixed; top:0; right:0; width:100%; height:100%; max-width:380px; padding: 90px 0; background: rgba(40,40,40, 0.95); overflow-y:scroll; -ms-overflow-style:none; z-index: 100; text-align: left; transition: all 0.4s ease; -webkit-transform: translateX(100%) rotate(0); -moz-transform: translateX(100%) rotate(0); -ms-transform: translateX(100%) rotate(0); -o-transform: translateX(100%) rotate(0); transform: translateX(100%) rotate(0); }
#gnb_mo > ul { border-top: 1px solid rgba(255,255,255,0.1); line-height:3.5em;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:1.75rem;  border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box; position:relative; cursor: pointer; }
/* #gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:1em; top:50%; margin-top:-1px;}
#gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:calc(1em + 5px); top:50%; margin-top:-6px; transition:all 0.5s;} */
#gnb_mo > ul > li > div > a { color:#fff; display: block; width: 100%; padding: 0.5em 1.5em;}
#gnb_mo > ul > li > ul { display:none; }
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1em; color:#4b4b4b;padding:0 1.5em; font-weight: 500; border-bottom:1px solid #e1e1e1; background:#fff; box-sizing:border-box; line-height:3.5em;}

#gnb_mo > ul > li > div.on { background: #0286d1 }
#gnb_mo > ul > li > div.on:before {transform:rotate(90deg)}

#header.mo_on #gnb_mo {display:block;}
#gnb_mo.m_menuOn {	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	transform: translateX(0) rotate(0); }


.menuToggle { position: relative; width:90px; height:90px; cursor:pointer; z-index:101; border-right: 1px solid rgba(255,255,255,0.1); }
.menuToggle span { display:block; width:30px; height:2px; background:#fff; position:absolute; top: 50%; left:50%; margin-left: -16px; transition:all 0.5s}
.menuToggle span.t { margin-top: -11px; }
.menuToggle span.m { margin-top:-1px; width: 20px; }
.menuToggle span.b { margin-top: 9px; }

.menuToggle.m_on span { background: #fff !important; }
.menuToggle.m_on span.t { transform:rotate(45deg); margin-top: 0;  }
.menuToggle.m_on span.m {width:0;}
.menuToggle.m_on span.b { transform:rotate(-45deg); margin-top: 0; }




@media all and (max-width:1699px) {
	#header .hd_bx { line-height:100px; }
}

@media all and (max-width:1480px) {
    #gnb_pc > ul > li > div > a { padding: 0 15px; }
}

@media all and (max-width:1399px) {

	#header { height:90px; padding:0; border-bottom: 1px solid rgba(255,255,255,0.1); }
	#header .hd_bx { line-height:90px; }

	#gnb_pc > ul > li > ul {top:90px}
    
	#gnb_mo { padding: 90px 0; }
}
@media all and (max-width:980px) {
    #header #logo {padding-left: 3%;}
    #header .hd_mbx { display: block; }
	#header #gnb_pc {display:none; }
}


@media all and (max-width:767px) {
	#header { height:80px; }
	#header .hd_bx { line-height:80px; }
    #header .hd_mbx { display: block; }
	#header #gnb_pc {display:none; }
	.menuToggle { width: 80px; height: 80px; }
	#gnb_mo { max-width: 100%; padding: 70px 0; }
    
	#header.on #logo img.on { display:inline-block; }
    #header.on #logo img.off { display:none; }
    
}
@media all and (max-width:580px) {

	#header { height:70px; }
	#header .hd_bx { line-height:70px; }
	.menuToggle { width: 70px; height: 70px; }
    
	#header #logo  {width:190px}
}
@media all and (max-width:480px) {
    #header #logo  {width:170px}
}


/* footer */
#footer {background: #212121; padding: 5rem 0 10rem;}
#footer .inner{display: flex; justify-content: space-between;}
#footer .info{width: 70rem;color: #fff;}
#footer .info ul{display: flex; flex-wrap: wrap;gap: 1rem 2rem;}
#footer .info ul li{font-size: 1.5rem; font-weight: 400;}
#footer .info ul li b{font-weight: 300; font-size: 0.875em;}
#footer .info ul li span{font-weight: 300;}
#footer .info p{font-size: 1.6rem; margin-top: 2.5rem; opacity: 0.5;}
#footer .link{display: flex;align-items: end;}
#footer .link img{width: 2.8rem;}

@media all and (max-width:1280px) {
    #footer {padding: 5rem 0 8rem;}
    #footer .info ul li{font-size: 1.4rem;}
    #footer .info p{font-size: 1.5rem;}
}
@media all and (max-width:768px) {
    #footer .inner{flex-wrap: wrap;gap: 3rem;}
    #footer .info{width: 100%;text-align: center;}
    #footer .info ul{justify-content: center;gap: 1rem 1.5rem;}
    #footer .info ul li:nth-child(3){width: 100%;}
    #footer .link{width: 100%; justify-content: center;}
    #footer .info ul li{font-size: 1.3rem;}
}


/* quick */
.quick_btn_box{display: flex; gap:10px; position: fixed; bottom: 10px; width: 94%; left: 50%; transform: translateX(-50%); z-index: 98; justify-content: center; display: none;}
.quick_btn_box .tel{width: 100%; text-align: center;}
.quick_btn_box .tel a{background: #000; border-radius: 6px; line-height: 48px; display: block; font-size: 16px; color: #fff; width: 100%; font-weight: 700;}
.quick_btn_box .form{cursor: pointer; background-color: #086e38; color: #fff; border-radius: 6px; line-height: 48px; font-size: 16px; width: 100%; text-align: center; font-weight: 700;}

#quick{background-color: #086e38; position: fixed; bottom: 0; left: 0; width: 100%; height: 88px; z-index: 99;}
#quick form{height: 100%; width: 100%;}
#quick form .inner{display: flex; align-items: center; justify-content: space-between; height: 100%;}
#quick form .inner .l_cont{display: flex; align-items: center; gap:27px;}
#quick form .inner .l_cont .img{}
#quick form .inner .l_cont .img img{max-width: 100%;}
#quick form .inner .l_cont .tel{}
#quick form .inner .l_cont .tel a{font-family: 'GmarketSans'; font-size: 32px; font-weight: 700; color: #fff;}
#quick form .inner .r_cont{display: flex; align-items: center;}
#quick form .inner .r_cont .input_box{display: flex; align-items: center; gap:10px;}
#quick form .inner .r_cont .input_box input{background-color: #fff; border-radius: 6px; padding: 0 20px; height: 50px; border: 0px; font-family: 'Pretendard', sans-serif; font-size: 15px; max-width: 172px;}
#quick form .inner .r_cont .agree{margin-left: 20px; display: flex; align-items: center}
#quick form .inner .r_cont .agree input{font-size: 14px; font-weight: 500; color: #222; position: relative; margin-right: 7px; height: 0; width: 0;}
#quick form .inner .r_cont .agree span{border: 1px solid #fff; border-radius: 100%; top: 0; left: 0; width: 16px; height: 16px; display: inline-block; margin-right: 5px; position: relative;}
#quick form .inner .r_cont .agree input:checked + label span{background-color: #fff;}
#quick form .inner .r_cont .agree input:checked + label span::after{content: '\2713'; position: absolute; left: 45%; top: 50%; transform: translate(-50%, -50%); color: #086e38; font-weight: 700; font-size: 14px;}
#quick form .inner .r_cont .agree label{font-size: 13px; color: #fff; cursor: pointer; display: flex; align-items: center;}
#quick form .inner .r_cont .agree label  a{color:#fff; font-weight: 700; text-underline-position: under; text-decoration: underline;}
#quick form .inner .r_cont .submit{margin-left: 30px; display: flex; justify-content: center; gap:10px;}
#quick form .inner .r_cont .submit button{font-size: 16px; font-weight: 700; color: #fff; height: 50px; padding: 0 25px; border-radius: 6px; background-color: #000;}
#quick form .inner .r_cont .submit div.close{display: none; font-size: 16px; font-weight: 700; color: #fff; line-height: 50px; padding: 0 25px; border-radius: 6px; background-color: #333; cursor: pointer;}

@media all and (max-width:1480px){
	#quick form .inner{justify-content: center; gap:30px;}
	#quick form .inner .l_cont .img img{max-width: 148px;}
	#quick form .inner .l_cont .tel a{font-size: 28px;}
	#quick form .inner .r_cont .input_box input{height: 46px; padding: 0 16px; max-width: 150px;}
	#quick form .inner .r_cont .agree{margin-left: 12px;}
	#quick form .inner .r_cont .submit{margin-left: 20px;}
}
@media all and (max-width:1280px){
	.quick_btn_box{display: flex;}
	#quick{height: auto; padding: 25px 0; bottom: -100%; transition: .4s;}
	#quick.on{bottom: 0;}
	#quick form .inner{flex-direction: column; gap:15px;}
	#quick form .inner .r_cont .input_box input{height: 44px; padding: 0 14px; max-width: 132px; font-size: 14px;}
	#quick form .inner .r_cont .submit button{font-size: 15px; height: 46px; padding: 0 20px;}
	#quick form .inner .r_cont .submit div.close{display: block;  line-height: 46px; padding: 0 20px; font-size: 15px;}
}
@media all and (max-width:768px){
	#quick form .inner{gap:20px;}
	#quick form .inner .l_cont .tel{display: none;}
	#quick form .inner .r_cont{flex-direction: column; gap:20px; width: 100%;}
	#quick form .inner .r_cont .input_box{width: 100%;}
	#quick form .inner .r_cont .input_box input{width: 100%; max-width: 100%;}
	#quick form .inner .r_cont .agree{margin-left: 0px;}
	#quick form .inner .r_cont .submit{margin-left: 0px;}
}
@media all and (max-width:500px){
	#quick form .inner .r_cont .input_box{flex-direction: column;}
}

.layer{position:fixed; display:none; left:0;top:0; z-index:3000000; width:100%;font-family: 'Pretendard'; height: 100%; background: rgba(0,0,0,0.6);}
.layer .close_btn{position:absolute; overflow: hidden; right:0; top:0;background:#434343;  border-radius:0 5px 0 5px; color: #fff;}
.layer .close_btn a{display: block;color: #fff;padding:14px 18px; font-size:20px; font-weight:bold;}
.layer .layer_wrap{position:relative;width:100%; max-width:700px; top:50%; margin:0 auto; border-radius:5px; background: #fff; text-align:left; letter-spacing:-0.5px; box-shadow:0 0 10px rgba(0,0,0,0.2); transform: translateY(-50%);}
.layer .layer_wrap .DB_info_detail{width:100%;  margin:18px auto; padding-bottom:16px; line-height:1.8rem; color: #333;font-size:1.4rem;}
.layer .layer_wrap .DB_info_detail h2{padding:17px 20px;border-bottom:1px solid #eee; font-size:18px; font-weight:bold;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap p{padding:8px;margin-bottom:12px; font-size:15px; line-height: 1.6em;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap{width:98%; height:360px; padding:8px 16px; overflow:auto; box-sizing:border-box;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dt{display:block; background: #eee;border-radius:3px; padding:7px 10px; font-weight: bold; font-size: 16px;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dd{margin-bottom:16px; padding:4px 12px; box-sizing:border-box; line-height: 1.6em; font-size: 15px;}

@media all and (max-width: 1080px){
    .layer .layer_wrap{width: 90%;}
	.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap p{font-size: 14px;}
	.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dt{font-size: 15px;}
	.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dd{font-size: 14px;}
}