@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");
@import url(https://cdn.jsdelivr.net/xeicon/1/xeicon.min.css);
@import url(https://cdn.jsdelivr.net/xeicon/2/xeicon.min.css);
@import url(css/blank.css);

*{margin:0; padding:0; box-sizing:border-box;letter-spacing:-0.1rem;color:inherit;}
html {font-size: 20px;}
img {border:0;vertical-align:top;}
a {border:0; text-decoration:none; color:inherit; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
ul, li {list-style:none;}
div {display:block;}
html {overflow-y:scroll;height:100%;min-width:320px}
body {height:100%;font-family: "Pretendard", "Pretendard Variable", sans-serif; color:#303030;}
.inner {width: 29rem; margin: auto;}
.inner2 {width: 30rem; margin: auto;}


.c_default {color:#303030 !important}
.c_lightgray {color:#c8c1b8 !important}
.c_gray {color:#808080 !important}
.c_red {color:#c70000 !important}
.c_white {color:#fff !important}
.color1 {color: #2199c9 !important;}
.color2 {color: #093b7a !important;}



h1,h2 {font-weight:300;line-height:1.2}
h1 {font-size:2.5rem;}
.sizeh1 {font-size: 2.5rem !important;}
h1.small {font-size: 2.2rem;}
h1.big {font-size: 2.8rem; }
h1.superbig {font-size: 3.5rem; letter-spacing:-0.02em; line-height: 1.1;}
.h1_giant {font-size: 5rem; letter-spacing:-0.03em;}
h2 {font-size:2rem}
h3 {font-size:1.5rem; font-weight:300; line-height:1.4;}
.sizeh3 {font-size:1.5rem; }
h4 {font-size:1.2rem; font-weight:500; line-height:1.45; word-break:keep-all;}
.sizeh4 {font-size: 1.2rem;}
h5 {font-size:1.1rem; font-weight: 400; line-height:1.6; word-break:keep-all;}
.sizeh5 {font-size: 1.1rem !important;}
p {font-size:1rem; line-height:1.7; color:inherit; word-break:keep-all; }
p.small {font-size:0.9rem; }
p.typeline {font-size:0.63rem; }
sub {font-size: small; }



.tight {letter-spacing: -0.2rem;}
.loose {letter-spacing: 0.4rem;}
.loose2 {letter-spacing: 0.2rem;}
b {letter-spacing: inherit; font-weight: 600;}
.bold {font-weight: 700 !important;}
.black {font-weight: 800 !important;}




span {color:inherit; letter-spacing: inherit;}

.float {float:left;}
.float_r {float:right}
.left {text-align:left !important}
.right {text-align:right !important}
.center {text-align:center !important}
.clearfix::after {content:""; clear:both; display: block;}
.inlineblock {display: inline-block;}

.relative {position: relative;}


.flex {display: flex;}
.col1 {flex: 1;}
.col2 {flex: 2;}
.col3 {flex: 3;}
.col4 {flex: 4;}
.col5 {flex: 5;}
.col6 {flex: 6;}
.flex_c_center {display: flex; flex-direction: column; justify-content: center;}


.bd_b {border-bottom:1px #e0e0e0 solid}
.bd_t {border-top:1px #e0e0e0 solid}



/* 컬럼 설정 */
.w05 {width: 5%;}
.w10 {width: 10%;}
.w15 {width: 15%;}
.w20 {width: 20%;}
.w22 {width: 22%;}
.w25 {width: 25%;}
.w30 {width: 30%;}
.w40 {width: 40%;}
.w50 {width: 50% !important;}
.w60 {width: 60%;}
.w75 {width: 75%;}
.w80 {width: 80%;}
.w85 {width: 85%;}
.w90 {width: 90%;}
.w100 {width: 100% !important;}







#wrap {width:640px; margin: 0px auto; background:#fff; position: relative;}

h1.logo {width: 12.15rem; height: 2.5rem; display: block; text-indent: -3333px; cursor: pointer; background: url(images/logo.png) center no-repeat; background-size: contain;}
h1.logo a {display: block;}

a.link {border-radius: 50px;  color: #fff; padding: 0.6rem 2.5rem; display: inline-block; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
a.link:hover {background-color: #555 !important;}

/* 공통상단 */
#header {width:100%; display: flex; position: absolute !important; z-index: 100000; justify-content: space-between; align-items: center; padding: 1.4rem 1.5rem;  -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
#header .logo {position: relative;}

#header .menu {background: url(images/menu.png) center no-repeat; background-size: contain; width: 1.4rem; height: 2.5rem; text-indent: -3333px; display: block;}




#quick {width: 100%; max-width: 32rem; height: 5rem; position: fixed; z-index: 1000; bottom: 0; background-image: url(images/quick.jpg); background-size: contain; box-shadow: 0 0 1rem rgb(0, 0, 0, 0.4);}
#quick li {width:calc(100%/6); height: 5rem; float: left; }
#quick li.q1 {background-position: 0 0;}
#quick li.q2 {background-position: 0 -5rem;}
#quick li.q3 {background-position: 0 -10rem;}
#quick li.q4 {background-position: 0 -15rem;}
#quick li.backtop {background-position: 0 -20rem;  height: 2.5rem;}
#quick li a {display: block; width: 100%; height: 100%; text-indent: -5000px;}



#consult {position: fixed; width: 100%; max-width: 32rem; height: 25rem; background-color: #e7f0f7; z-index: 100; bottom: -25rem; box-shadow: 0 0 1rem rgb(0, 0, 0, 0.4); -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
#consult.opened {bottom: 0;}
#consult .flex {flex-direction: column; justify-content: space-between; padding-top: 1.25rem;}
#consult .flex div {padding: 0 0.5rem;}
#consult input {width: 100%; height: 2rem; border: 1px #d0d0d0 solid; border-radius: 0.2rem; padding: 0 0.4rem; margin-bottom: 0.5rem; font-size: 0.8rem; letter-spacing: -0.08rem; font-family: inherit;}
#consult textarea {width: 100%; height: 4.5rem !important; border: 1px #d0d0d0 solid; border-radius: 0.2rem; padding: 0.4rem; font-size: 0.8rem; line-height: 1.6; letter-spacing: -0.08rem; word-break: keep-all; font-family: inherit;}
#consult input[type='checkbox'] {width: 0.9rem; height: 0.9rem; margin-right: 0.25rem; top: 0.05rem; position: relative;}
#consult input[name='phone_no1'],
#consult input[name='phone_no2'],
#consult input[name='phone_no3'] {width: 30%;}
#consult a.confirm {border-radius: 0.5rem; background-color: #333; width: 100%; height: 2.5rem; line-height: 2.5rem; font-size: 1.2rem; text-align: center; color: #fff; display: block; margin-top: 0.5rem;}


#privacy {position:fixed; width:28rem; height:6rem; bottom: 13.5rem; left: 50%; margin-left: -14rem; background-color: #fff; color: #333; z-index:1; display:none; overflow-y: scroll; border-radius: 0.5rem; padding: 0.5rem 1rem; box-shadow: 0px 0px 0.5rem rgba(0,0,0,0.2); text-align: justify;}
#privacy::-webkit-scrollbar {
    width: 20px;
  }
#privacy::-webkit-scrollbar-thumb {
    background-color: #202020;
    border-radius: 20px;
    background-clip: padding-box;
    border: 5px solid transparent;
  }
#privacy::-webkit-scrollbar-track {
    background-color: transparent;
  }
#privacy .close {position: absolute; top: 0.25rem; right: 0.25rem; background-color:#333; color:#fff; width:2rem; height:2rem; line-height:2rem; border-radius: 50%; text-align:center;}
#privacy p {font-size: 0.8rem !important;}




/* 공통 하단 */
#footer {width:100%; background-color: #1c3747; display: inline-block; position: relative; padding-bottom: 7rem;}
#footer .cs {width:100%; margin: 4rem 0; padding: 0 1.5rem;}
#footer .cs .info {width: 100%; color: #fff;}
#footer .cs .info > div {margin: 1.5rem 0; display: flex;}
#footer .cs .info > div > h5.bold {flex: 1;}
#footer .cs .info > div > h5,#footer .cs .info > div > h3 {flex: 3;}
#footer .cs .info > div > h5 span {width: 25%; display: inline-block;}
#footer .cs .info > div a.link {flex: 1; margin: 0 0.2rem; text-align: center; padding: 0.7rem 1rem; font-size: 1.3rem;}
#footer .cs .info > div a.link_tel {background-color: #2199c9;}
#footer .cs .info > div a.link_time {background-color: #005e98;}
#footer .cs .info > div a.link_location {background-color: #284b8b;}
#footer .cs .root_daum_roughmap {width: 100%; overflow: hidden;}
#footer .cs .root_daum_roughmap .wrap_controllers {display: none;}

#footer .footer {width: 100%; color: #fff; border-top: 1px rgb(255, 255, 255, 0.2) solid; padding-top: 3rem;  }
#footer .footer .txt {text-align: center;}
#footer .footer .txt span {margin-right: 1rem; font-size: 0.9rem; line-height: 1.6;}
#footer .footer .logo {margin: 0 auto 2rem;}

#footer #back-top {width: 5rem; height: 2rem; line-height: 2rem; text-align: center; background-color: #666; display: block; position: absolute; bottom: 0; left: 50%; margin-left: -2.5rem; z-index: 1; border-radius: 0.5rem 0.5rem 0 0;}
#footer #back-top:hover {background-color: #444; color: #fff;}








@media only screen and (max-width:640px) {
	html {font-size: 3.125vw;}

	#wrap {width:100%;}	   

    #footer .cs .root_daum_roughmap {zoom: 70%;}

}