@charset "utf-8";
@import url(../fonts/Roboto/style.css);
@import url(../fonts/scoredream/style.css);
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
 i.fa{font-style:normal !important;}

mark {background-color:var(--bg-primary); font-style:italic;font-weight:bold;}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
hr {display:block;height:0; border:0;border-top:0; margin:0;padding:0;}
input, select {vertical-align:middle;resize:none}
caption, th, td {font-weight:normal}
table caption {visibility:hidden;width:0;height:0;overflow:hidden}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal}
img {border:0;vertical-align:middle; max-width:100%}
legend {display:none}

.gratxt{ background-image:-webkit-linear-gradient(0deg,var(--primary),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.full_width_bg{position:absolute; top:0; bottom: 0; z-index:-1; left:50%; background-position: center; background-repeat:no-repeat;}
.full_wrap{position:relative; left:50%;}


/* 4. html 루트 크기는 10px 고정 */
html {
  font-size: 10px;
}
/* 1. CSS 사용자 지정 속성(변수) 선언 */
body{
  /* 기본값(1280px 이상) */
  --font-size: 2.2rem; /* 20px */
}

/* 2. 750px ~ 1279px : 1280:20 비율 */
@media (min-width: 751px) and (max-width: 1225px) {
  body {
		--font-size: calc(22 * 100vw / 1226 );
  }
}

/* 3. 749px 이하 : 375:13 비율 */
@media (max-width: 750px) {
  body { 
		--font-size: calc(13 * 100vw / 375 ); /* 13 ÷ 375 */
  }
}


body, select,input,textarea,button {font-size:var(--font-size);  line-height:1.5; font-family: "Pretendard","맑은 고딕","Nanum Gothic","Microsoft Yahei","Gulim", "dotum",Helvetica, sans-serif; color:var(--text-primary); letter-spacing:-.06em; }
 input, button, select, textarea, input::placeholder, .iconfont{font-size:inherit; outline: none;}
iframe#hiddenframe {display:none;width:0;height:0}
button{cursor:pointer; border:0}
strong{font-weight:700}
b{font-weight:800}
a{color:var(--text-primary); text-decoration:none}
a:hover, a:focus{color:var(--primary);text-decoration:none}



*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 

input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus { 
border: 1px solid var(--border-secondary) !important;
}
.placeholdersjs { color: #aaa !important; }

@media (min-width:751px){
.nop{display:none; position:absolute; width:0; height:0; overflow:hidden;}
}
.clear{display:block; float:none; clear:both; border:0; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}
.wrap{width:1280px; margin:0 auto; position:relative; zoom:1;}

@media (max-width:1280px){
.wrap{width:auto; margin:0 2vw; }
}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;left:0; right:0; height:0;}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:fixed; background:#fff; border-radius:1rem; overflow:hidden; box-shadow:.1em .1em .5em rgba(0,0,0,.3)}
.hd_pops.mobile {display:none;}
.hd_pops_con {}
.hd_pops_footer {padding:.5em;background:#000;background:var(--primary);color:#fff;display:flex; justify-content:space-between}
.hd_pops_footer button {margin-right:0;padding:0 1em;border:0;background:none;color:#fff; font-size:.9em;}


/*헤더*/
#header{position:fixed; top: 0; left:0;  right:0; z-index:20;   border-bottom:1px solid var(--bg-primary); background-color: rgba(255,255,255,0);}
#header .wrap{height:11rem;}

#header h1{position:absolute; left:0; top: 50%; transform: translateY(-50%);}
#header h1 img.w{display: block;}
#header h1 img.c{display: none;}
#header h1 img{height: 5rem;}



#btnMobileCall{display:none;}
#btnMobileMenu{display:none}

/*상단메뉴*/
#topMenu{font-size:.9em; float:right}
#topMenu > dl{ display: -webkit-flex; display: flex;justify-content:end; }
#topMenu > dl > dd{position:relative; }
#topMenu > dl > dd > a{position:relative; text-align:center; z-index:2; font-weight:600;  height:11rem; padding:0 2em;  display: flex; justify-content: center; flex-direction: column; color: var(--text-anti-primary); transition: all .3s ease;}
#topMenu > dl > dd ul { height: 0; position:absolute; top:100%; left:0; right:0;  overflow: hidden; transition: height padding .3s ease;padding: 0; border-right: 1px solid var(--border-secondary); }
#topMenu:hover > dl > dd ul {height:calc(30em  - 11rem); display: block;  text-align: center;padding:1em 0;  }
#topMenu dl dd:first-child > ul{ border-left: 1px solid var(--border-secondary); }
#topMenu > dl > dd:hover ul:before{position:absolute; top:0; left:0; right:0; border-top: 3px solid var(--primary); z-index: 2;   content:""}
#topMenu:hover > dl > dd > a{padding:0 3em; color: var(--text-primary);}
#topMenu .full_width_bg{background-color: #fff;height:0em; opacity: 0; bottom:auto; transition: all .3s ease; z-index:-1;}
#topMenu:hover .full_width_bg{height:30em;opacity: 1;}
#topMenu dl dd li{font-size:.9em;}
#topMenu dl dd li a{padding:.5em 0; display: block; color: #6f6f6f;}

#topMenu:hover .full_width_bg:before{ position:absolute; left:0; right:0; bottom:0; top: 11rem; border-top: 1px solid var(--border-secondary); border-bottom:1px solid  var(--border-secondary); content:""}
#topMenu:hover + h1 img.w{display: none;}
#topMenu:hover + h1 img.c{display: block;}


/* #allMenu{position:absolute;  top: 0; background-color: #FFF;  text-align:center;visibility: hidden;opacity: 0; transition: all .3s ease; top: -2em; z-index:3;}
#allMenu dl{ display: -webkit-flex; display: flex;justify-content:center; }
#allMenu dl:before{ position:absolute; left:0; right:0; top: 11rem; height:1px; background-color: var(--border-secondary); content:""}
#allMenu dl dd > a{ position:relative; z-index:2; font-weight:600;  height:11rem; padding:0 3em;  display: flex; justify-content: center; flex-direction: column; }
#allMenu dl dd > ul{ border-right: 1px solid var(--border-secondary); height: calc(100% - 11rem); padding:1em 0; position: relative;}
#allMenu dl dd:first-child > ul{ border-left: 1px solid var(--border-secondary); }
#allMenu dl dd li a{padding:.5em 0; display: block; color: #6f6f6f;}
#allMenu dl dd:hover ul{border-top: 3px solid var(--primary); z-index: 2; margin-top:-2px}
#topMenu:hover #allMenu{visibility: visible;opacity: 1; top: 0;} */


#header.fixed{background-color: rgba(255,255,255,1);}
#header.fixed h1 img.w{display: none;}
#header.fixed h1 img.c{display: block;}
#header.fixed #topMenu > dl > dd > a{color: var(--text-primary);}

/**/

#mobileMenu{display:none;}


/*메인비주얼*/
#main_visual{position:relative; z-index:1;  overflow:hidden; }
#main_visual ul{position:relative; z-index:1;}
#main_visual li{position:relative;background-position:center center;  width:100%;  background-repeat:no-repeat; height:90rem;  }
#main_visual .swiper-pagination{position:absolute; z-index:10; bottom:1em; width:100%; }
#main_visual .swiper-pagination-bullet{position:relative; width:.5em; height:.5em;margin:0 .1em;  background:var(--bg-primary); opacity:1; border-radius:1em; transition: all 0.3s ease; }
#main_visual .swiper-pagination-bullet-active{width:3em;}
#main_visual .controll{position:absolute; top:50%; z-index:3; padding:0;height:0; left:0; right:0;  display:none}
#main_visual .controll a{position:absolute; top:-1em; width:2em; height:2em; line-height:2em; text-align:center; font-size:2em; padding:0; margin:0; background:rgba(0,0,0,.6); border:0; cursor:pointer; color:var(--bg-primary); border-radius:2em; text-shadow: 0 0 .2em rgba(0,0,0,.5)}
#main_visual .controll .swiper_prev{left:0; transform:rotateY(180deg)}
#main_visual .controll .swiper_next{right:0;}

#ma{padding:5em 0; text-align: center;}
#ma h3{font-size: 2.36em; font-weight: 600; color: var(--primary);;}
#ma h6{font-size: 1.1em}
#ma dl{display: flex; justify-content: space-around; gap: 1em; flex-wrap: wrap; margin-top:2em;}
#ma dl dd{border: 1px solid #C7D8E4; border-radius: 1em; width: 28rem; background-color: #FFF; 
box-shadow:
 inset -.6em -.6em 1em 0px hsl(from var(--primary) h s l / .2),
 .5em .5em 1em hsl(from var(--primary) h s l / .2);
}
#ma dl dd p{font-size:1.1em; height:3em; display: flex; justify-content: center; flex-direction: column; position: relative; margin-top:-.5em}
#ma dl dd a{display: block; padding:.4em 0 1em;}

#mb{padding:5em 0; color:#FFF;}
#mb dl{display: flex; justify-content: space-between; }
#mb dt h3{font-size: 2.52em; font-weight: 600; line-height: 1.4;}
#mb dt p{margin-top: 1em;}
#mb dt a{display: block; width: fit-content; border:1px solid #FFF; border-radius: 2em; margin-top:2em; color: #FFF; font-size:.9em; padding:.2em 1em}
#mb dt a i{margin-left: 0.5em;}
#mb dd {display: flex; justify-content: center; flex-direction: column;}
#mb dd  figure{border-radius: .5em; overflow: hidden; position: relative;}

#mc{padding:5em 0; text-align: center;}
#mc header h3{font-size: 2.52em; color: var(--primary); font-weight: 600;}
#mc header h6{font-size: 1.1em; }
#mc dl{margin-top: 2em; display: flex; justify-content: space-around; flex-wrap: wrap;}
#mc dl dd{ width: 16.425em;margin-top: 2em; }
#mc dl dd figure{position: relative; border-radius: 1em; overflow: hidden;}
#mc dl dd article{padding:1em 0}
#mc dl dd article h6{ font-size:1.17em; font-weight: 700;}
#mc dl dd article p{margin-top: 1em;}

#md{padding:5em 0; color:#FFF;}
#md h3{font-size: 2.52em; font-weight: 600; line-height: 1.4;}
#md p{margin-top: 1em;}
#md a{display: block; width: fit-content; border:1px solid #FFF; border-radius: 2em; margin-top:2em; color: #FFF; font-size:.9em; padding:.2em 1em}
#md a i{margin-left: 0.5em;}


#me{padding:5em 0;}
#me dl{display: flex; justify-content: space-between; }
#me dt h3{font-size: 2.52em; font-weight: 600; line-height: 1.4; color: var(--primary);}
#me dt p{margin-top: 1em;}
#me dt a{display: block; width: fit-content; border:1px solid var(--primary); border-radius: 2em; margin-top:2em; color: var(--primary); font-size:.9em; padding:.2em 1em}
#me dt a i{margin-left: 0.5em;}
#me dd {display: flex; justify-content: center; flex-direction: column;}
#me dd  figure{border-radius: .5em; overflow: hidden; position: relative; box-shadow: 1em 1em 1.8em rgba(0,0,0,.3);}


#tail_location dl{display: flex; }
#tail_location dl dt{width: 50%; padding:3em 0}
#tail_location dl dt h3{color: var(--primary); font-weight: 600; font-size:2.52em; line-height: 1.4;}
#tail_location dl dt h6{margin-top: 1em; font-weight: 700; font-size:1.5em;}
#tail_location dl dt h6 i{color: var(--primary); transform: scale(1.5); display: inline-block; font-weight: normal; margin-right:1em;}
#tail_location dl dt div{padding-left:3em; margin-top:.5em; font-size:1.18em}
#tail_location dl dt div b{font-size:2em}
#tail_location dl dt div ul li{display: flex;  margin-bottom:.6em;}
#tail_location dl dt div ul li label{display: flex; justify-content: space-between; width: 4em; margin-right:1em;; }
#tail_location dl dt div ul li strong{font-size:1.2em;}
#tail_location dl dd{position:relative; width: 50%;}
#tail_location dl dd .root_daum_roughmap{position:absolute; top: 0; bottom: 0;left:0; height:100%; width: 49vw;}
#tail_location dl dd .root_daum_roughmap .wrap_map{width: 100%; height:100%;}

#footer{background-color: var(--primary); color: var(--text-anti-primary); padding:3em; text-align: center; font-size: .8em;}
#footer span{white-space: nowrap; margin:0 .5em}

#fixedQna{position: sticky; left:0; right:0; bottom:0; background-color: #000; z-index:22; padding:1em; font-size:.9em }
#fixedQna dl{display: flex; gap: 1em; color:#FFF; justify-content: center;}
#fixedQna dl dd{line-height: 2.35em;}
#fixedQna dl dd.logo img{height: 2em;}
#fixedQna dl dd:has(select){width: 5em;}
#fixedQna dl dd select{width: 100%; height: 2.35em}
#fixedQna dl dd .frm_input{height: 2.35em}

#fixedQna dl dd:has(input[name='wr_name']){width: 10em; display: flex;}
#fixedQna dl dd:has(input[name='wr_name']) label{width: 3em; }
#fixedQna dl dd:has(input[name='wr_name']) input{width: calc(100% - 3em);}

#fixedQna dl dd:has(input[name='wr_tel']){width: 11em; display: flex;}
#fixedQna dl dd:has(input[name='wr_tel']) label{width: 4em; }
#fixedQna dl dd:has(input[name='wr_tel']) input{width: calc(100% - 4em);}
#fixedQna dl dd:has(button){width: 6em; margin-left:4em}
#fixedQna dl dd button{width: 100%; border-radius:3em; background:#FF7F00; color:#FFF; border:0;height:2.35em}

#fixedQna .selec_chk:checked + label{color: #FF7F00;}

#btn_kakao{position:fixed; left:50%; bottom:.5em;z-index:23; width: 3em; margin-left:18em}