@charset "utf-8";

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

/* 타블렛 가로 */
@media all and (max-width:1599px) {
	.inner {	width:90%; }
}
@media all and (max-width:1399px) {
	.s-inner {	width:90%; }
}
@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; }
}

:root{
    --color1:#036d4a;
    --color2:#7ab449;
}


/*Header*/
#header { position:fixed; width:100%; height:100px; box-sizing:border-box; z-index:300;  margin: 0 auto; background:#FFF; display:flex; justify-content:space-between;align-items: center; }
#header .hd_bx { line-height:100px;  }
#header .hd_mbx { display: none; }
#header p.mo_t{display: none;}

#header #logo { font-size:0; padding-left:60px; z-index:103; position:relative}
#header #logo a { width:187px; height:51px;}
#header #logo a.logo { display: block; background:url("/images/common/logo.png?v=1") no-repeat left center; background-size:100% auto; }


.menuToggle { position: relative; right:0; top:0; width:80px; height:80px; cursor:pointer; z-index:101; }
.menuToggle span { display:block;  height:2px; border-radius:3px;   position:absolute; top: 50%; left:50%; margin-left: -16px; transition:all 0.5s; background:#222}
.menuToggle span.t { margin-top: -11px; width:27px;}
.menuToggle span.m { margin-top:-1px; width: 27px; }
.menuToggle span.b { margin-top: 9px; width:27px; }

#header.mo_on .menuToggle span.t {transform: rotate(45deg);  margin-top: 0;}
#header.mo_on .menuToggle span.m {width:0;}
#header.mo_on .menuToggle span.b {transform: rotate(-45deg); width:27px;  margin-top: 0;} 

#header.mo_on .menuToggle span { background:#FFF} 




#gnb_pc {margin: 0 auto; }
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative;}
#gnb_pc > ul > li > div {display:block; font-size:2rem; text-transform:uppercase; line-height:100px; position:relative; width: auto; padding: 0 35px; cursor: pointer;letter-spacing:0; }
#gnb_pc > ul > li > div  a { color:#222;  font-weight: bold; }
#gnb_pc > ul > li > div  a:hover {color: var(--color1);}
#gnb_pc > ul > li > ul { display: none; padding:15px 0; width:180px; background: var(--color1); position: absolute; top: 100px; left: 50%; margin-left: -90px; }
#gnb_pc > ul > li > ul > li > a {display:block; width:100%;padding:10px; color:#fff;box-sizing: border-box; font-size: 1.6rem;}
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}
#gnb_pc > ul > li:hover > div {}
#gnb_pc > ul > li > ul > li > a:hover {text-decoration:underline}

#gnb_pc > ul > li > ul > li > ul {display:none}


#header.mo_on #logo a.logo { background:url("/images/common/logo.png?v=1") no-repeat left center; background-size:100% auto; }

#gnb_mo { position:fixed; top:0; right:0; width:100%; height:100%; max-width:500px; padding: 80px 0; background:rgba(5,5,5, 0.90); 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:2.0rem;  border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box; padding:10px 1.5em; 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:nth-child(1) > div:after,
#gnb_mo > ul > li:nth-child(2) > div:after,
#gnb_mo > ul > li:nth-child(4) > div:after{display: none;}
#gnb_mo > ul > li:nth-child(1) > div:before,
#gnb_mo > ul > li:nth-child(2) > div:before,
#gnb_mo > ul > li:nth-child(4) > div:before{display: none;}
#gnb_mo > ul > li > div > a { color:#fff; display: block; width: 100%; height: 100%;}
#gnb_mo > ul > li > ul { display:none; }
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1.8rem; color:#4b4b4b;padding:0 2em; 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: var(--color1); }
#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); }

#header .l_num{display: flex; align-items: center; gap: 2rem; background: linear-gradient(to right, var(--color1), var(--color2)); height: 100%; color: #fff; padding: 0 2.5rem;}
#header .l_num p{font-size: 1.6rem;}
#header .l_num h4{font-size: 2rem;}


@media all and (max-width:1699px){
#header #logo { padding-left:30px }  
#gnb_pc > ul > li > div {padding: 0 30px;}
}
@media all and (max-width:1599px){
    #t-loca {display:none}
}
@media all and (max-width:1399px){
    #gnb_pc > ul > li > div {padding: 0 25px;}
    #gnb_pc > ul > li > ul { padding:10px 0; width:150px; margin-left: -75px;}
}
@media all and (max-width:1280px){
    #header { height:80px; text-align: center}
    #header .hd_bx { line-height:80px; }
    #gnb_pc > ul > li > div{font-size: 1.8rem;}
    #header .l_num{padding: 0 2rem; text-align: left;}
    #header .l_num img{width: 3rem;}
    #header .l_num p{font-size: 1.4rem;}
    #header .l_num h4{font-size: 1.8rem;}
    #header #logo a { width:120px; height:42px;}
}
@media all and (max-width:976px){
    #header .hd_mbx { display: block; }
    #gnb_pc {display:none;}
    #gnb_mo { text-align: left; }
    #header { height:calc(70px + 2.7rem); flex-wrap: wrap;}
    .menuToggle { width:70px; height:70px }
    #gnb_mo { padding: calc(70px + 2.7rem) 0; }	
    #header .l_num{display: none;}
    #header p.mo_t{display: block;text-align: center; width: 100%; background: linear-gradient(to right, var(--color1), var(--color2)); color: #fff;font-size: 1.4rem;font-weight: bold; height: 2.7rem; line-height: 2.7rem;}
}
@media all and (max-width:767px) {
    #header { height:calc(60px + 2.7rem); }
    #header #logo { padding-left:20px }
    .menuToggle { width:60px; height:60px }
    #gnb_mo { max-width: 100%; padding: calc(60px + 2.7rem) 0; }
    #header.mo_on #logo a.logo { background:url("/images/common/logo_w.png") no-repeat left center; background-size:100% auto; }
    #header #logo a {width:12.5rem;}

}
@media all and (max-width:480px) {
    #header #logo { padding-left:10px;}
}


/* footer */
#footer {padding: 6rem 0 18rem; border-top: 1px solid rgba(0,0,0,0.1);}
#footer .top{display: flex; gap: 2rem;justify-content: space-between; font-size: 1.8rem; border-bottom: 1px solid #ddd; padding-bottom: 4rem; margin-bottom: 4rem; flex-wrap: wrap;}
#footer .top .lt{width: 80rem;}
#footer .top .lt ul{display: flex;flex-wrap: wrap;gap: 0.5rem 3rem;}
#footer .top .lt ul li{display: flex;gap: 1rem; align-items: center; color: #222;}
#footer .top .lt ul li span{font-weight: bold;}
#footer .top .rt ul{font-weight: bold; gap: 3rem; display: flex;}
#footer .top .rt ul a{color: #222;}
#footer .bot .exp p{font-size: 2rem; color: #222; line-height: 3rem;}
#footer .bot .exp p.red{color: #e10b0b; margin-bottom:3rem;}
#footer .bot > p{text-align: right; font-size: 1.6rem; color: #222; opacity: 0.5; margin-top: 2rem;}


@media all and (max-width:1280px) {
    #footer {padding: 6rem 0 20rem; }
}
@media all and (max-width:976px) {
    #footer {padding: 5rem 0 27rem; }
    #footer .top .lt{width: 100%;}
}
@media all and (max-width:768px) {
    #footer {padding: 5rem 0 30rem; }
    #footer .top .rt ul{gap: 2rem;}
}
@media all and (max-width:480px) {
    #footer {padding: 5rem 0 20rem; }
    #footer .bot .exp p{font-size: 1.9rem;}
}




#floating_quick{ position:fixed; left:0; bottom:0; width:100%; z-index:999; background:linear-gradient(to right, #00895c, var(--color2));}
#floating_quick .inner{ display:flex; align-items:center; gap:3rem; height:12rem; justify-content: space-between;}
#floating_quick .txt{display: flex;gap: 0.5rem 2.5rem; align-items: end; margin-bottom: 1.5rem; flex-wrap: wrap;}
#floating_quick .txt h3{ font-size:3rem; color:#fff; line-height:1; font-weight: normal; font-family: 'ONE-Mobile-Title';}
#floating_quick .txt h3 span{color:#fcff18;}
#floating_quick .txt p{font-size:1.6rem;color:#fff;}
#floating_quick .form_wrap{ flex:1; display:flex; align-items:center; gap:1rem; }
#floating_quick input,
#floating_quick select{ width:20rem; height:4rem; border:0; border-radius:.6rem; background:#fff; padding:0 1.5rem; font-size:1.6rem; color:#222; font-family: 'Pretendard';}
#floating_quick input:focus,
#floating_quick select:focus{ outline:none; box-shadow:none; }
#floating_quick .agree{ display:flex; align-items:center; gap:.7rem; margin-left:.5rem; }
#floating_quick .agree input{ display:none; }
#floating_quick .agree label{ width:1.8rem; height:1.8rem; border:1px solid #fff; border-radius:50%; cursor:pointer; position:relative; flex-shrink:0; font-family: 'Pretendard';}
#floating_quick .agree label span::after{ content:'✓'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:1rem; color:#fff; opacity:0; }
#floating_quick .agree input:checked + label{background:var(--color1); border-color:var(--color1);}
#floating_quick .agree input:checked + label span::after{opacity:1;}
#floating_quick .agree p{ font-size:1.6rem; color:#fff; white-space:nowrap; }
#floating_quick .agree a{color:#fff;text-decoration:underline;}
#floating_quick .btn{ width: 30rem; height:9rem; border-radius:1rem; background:var(--color1); display:flex; flex-direction:column; justify-content:center; align-items:center; flex-shrink:0;  color: #fff;}
#floating_quick .btn > span{ font-size:2rem; color:#fff; }
#floating_quick .btn p{ font-size:3rem; font-weight: normal; font-family: 'ONE-Mobile-Title'; line-height: 4rem;}
#floating_quick .btn p span{color:#fcff18; }


#floating_quick .form_wrap > div{position:relative;}
#floating_quick .form_wrap select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:4rem; }
#floating_quick .form_wrap > div:has(select)::after{ content:'>'; position:absolute; right:1.8rem; top:50%; transform:translateY(-50%) rotate(90deg); font-family:'SUIT'; font-size:1.2rem; font-weight:700; color:#666; pointer-events:none; }
#floating_quick .select_wrap{position:relative;}

#floating_quick .select_wrap::after{ content:'>'; position:absolute; right:1.8rem; top:50%; transform:translateY(-50%) rotate(90deg); font-family:'SUIT'; font-size:1.2rem; font-weight:700; color:#666; pointer-events:none; }

@media(max-width:1480px){
    #floating_quick .inner{height:14rem;}
}
@media(max-width:1280px){
    #floating_quick .inner{height:100%; padding: 2rem 0;}
    #floating_quick .txt h3{ font-size:2.5rem;}
    #floating_quick .txt p{ font-size:1.5rem;}

    #floating_quick .form_wrap{flex-wrap: wrap;}
    #floating_quick .btn{width: 23rem;}
    #floating_quick .btn > span{font-size: 1.8rem;}
    #floating_quick .btn p{font-size: 2.5rem; line-height: 3rem;}
}
@media(max-width:976px){
    #floating_quick .inner{flex-wrap: wrap;gap: 2rem;}
    #floating_quick .lt{width: 100%;}
    #floating_quick .btn{width: 100%;}
    #floating_quick input, #floating_quick .form_wrap > div{width: calc(100%/3 - 2rem/3);}
    #floating_quick select{width: 100%;}
    #floating_quick .btn{flex-direction: inherit; gap: 1rem;height: 6rem;}
}
@media(max-width:480px){
    #floating_quick .inner{gap: 1rem;}
    #floating_quick .txt{margin-bottom: 1rem;}
    #floating_quick .txt h3{font-size: 2.2rem;}
    #floating_quick .txt p{font-size: 1.4rem;}
    #floating_quick input, #floating_quick select{font-size: 1.4rem;height: 3.5rem;padding: 0 1rem;}
    #floating_quick .agree p{font-size: 1.4rem;}
    #floating_quick .agree label{width: 1.5rem; height: 1.5rem;}
}