@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;}
.h100 .full_width_bg{background-size:auto 100%; }

@media (max-width: 750px) {
.mcover .full_width_bg{background-size:cover; }
}
.full_wrap{position:relative; left:50%}


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

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

/* 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; font-size: .8em;}
#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;}


#hdTop{ height:4rem; position: sticky; border-bottom:1px solid var(--border-primary);}
#hdTop ul{display: flex; justify-content: flex-end; line-height: 4rem;}
#hdTop ul li{  position:relative; margin-left:1em; padding-left:1em;}
#hdTop ul li a{display:block; font-size:1.4rem; }
#hdTop ul li:before{position:absolute; top:50%; margin-top:-.5em; height:1em; width:1px; left:0; background:#ddd; content:"";}
#hdTop ul li:first-child:before{display:none;}

/*헤더*/
#header{ z-index:20;  height:12rem; display: flex; justify-content: center; align-items: center; gap:3.5em}
#header h1{order:2;}
#header h1 img{height:8rem;}
#header .hd_phone{position: relative; order:1; text-align: right; padding-left:2em}
#header .hd_phone i{position: absolute; left: 0; bottom: 0;}
#header .hd_phone span{display: block; color: #948d8d; font-size: 2rem;}
#header .hd_phone strong{display: block; font-size: 3rem; font-family: 'Aggravo';}
#header .btn_language{order:3; display: flex; gap: 1em;}
#header .btn_language img{width: 5rem;}



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

/*상단메뉴*/
#topMenu{ position: relative; z-index:21; border-top: 2px solid var(--border-primary);}
#topMenu dl{ display: -webkit-flex; display: flex;justify-content:center}
#topMenu dd{position:relative; }
#topMenu dd > a{position:relative; text-align:center; z-index:2; display:block; font-size:2rem; font-weight:600;  line-height:7rem; height:7rem; padding:0 2em;}
#topMenu dd:hover > a:before{position:absolute; left:50%; bottom:0; border:.3em solid transparent; border-bottom-color:var(--primary); content:""; transform: translateX(-50%);}
#topMenu dd:hover > a{color:var(--primary)}

#topMenu dd ul {position: absolute; z-index: 1; font-size: .7em;  opacity: 0;left:50%; min-width:100%; white-space: nowrap;overflow: hidden;transform: translateX(-50%);transition: all 0.5s ease; max-height: 0;  background-color: var(--primary); }

#topMenu dd:hover ul { opacity: 1; max-height: 20em;}
#topMenu dd ul a {display: block;padding: 0 1em;text-align: center;color: #FFFFFF; }
#topMenu dd ul a:hover {background-color: #FFFFFF; color: var(--primary);}
#topMenu dd ul li {position: relative; line-height: 4rem; }

#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:81rem;  }
#main_visual .swiper-pagination{position:absolute; z-index:10; bottom:1em; width:100%; }
#main_visual .swiper-pagination-bullet{position:relative; width:2rem; height:2rem;margin:0 .1em;  background:var(--bg-primary); opacity:1; border-radius:1em; transition: all 0.3s ease; }
#main_visual .swiper-pagination-bullet-active{background:var(--primary-light); }



#ma{position: relative; height: 81rem; display: flex; justify-content: center; align-items: center; flex-direction: column; background:url(../img/ma_bg.jpg) center no-repeat;}
#ma article{position: relative; width:1360px;  }
#ma article h5{ font-size: 1.6em;}
#ma article h3{ font-size: 3.84em; font-weight: 700;}
#ma article h3 span{color: var(--primary);}
#ma article h6{font-size: 1.32em;}
#ma article h6 span{display: block; width: fit-content; background-color: var(--primary); color: var(--text-anti-primary); padding:0 .5em}
#ma article ol{line-height: 2em; margin-top:1.5em;}
#ma article ol{padding:0 0 0 0; list-style-type: none; counter-reset:sign-num;}
#ma article ol li{padding-left:1em;}
#ma article ol > li:before{position:absolute; left:0; counter-increment:sign-num; content:counter(sign-num)'.'; overflow:hidden; font-weight: 700; color: var(--primary);}

#mb{padding:1em 0; text-align: center;}
#mb dl {display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 400px));justify-content: center;gap: 0;width: 100%;max-width: calc(400px * 4);margin: 0 auto;box-sizing: border-box;}
#mb dl dd {width: 100%;box-sizing: border-box;margin: 0;position:relative;}
#mb dl dd > img{width: 100%; height:100%; object-fit: cover;}
#mb dl dd a{position:absolute; inset: 0; color:#FFF;}
#mb dl dd a h4{font-weight: 700; font-size:1.6em;}
#mb dl dd a span{border:1px solid #FFF; width: 1.5em; height:1.5em; display: block; margin:.5em auto; line-height:1.5em;}

#mc{padding:3em 0; background-color: var(--bg-secondary); text-align: center;}
#mc h4{font-weight: 700; font-size: 4rem; }
#mc h4 span{color: var(--primary);}
#mc .categorys{margin-top: 1em; display: flex; justify-content: center; }
#mc .categorys dd{padding:.5em 1em; border-bottom: 1px solid var(--border-secondary); cursor: pointer;}
#mc .categorys dd.on{font-weight: 700; color: var(--primary);;}
#mc article{position:relative; margin-top:2em; display: none;}
#mc article.on{display: block;}
#mc article dl{display: flex; justify-content: center; gap: 1em;}
#mc article dl dd{border-radius: 1em; overflow: hidden; position:relative; }
#mc article dl dd p{background-color: var(--primary);font-weight: 700; padding:.5em; color: var(--text-anti-primary);}
#mc article dl dd:first-child p{background-color: #565656;}
#mc article > p{font-size: .8em; margin:2em 0;}
#mc article a{display: block; background-color: var(--primary); color: var(--text-anti-primary); padding:.6em 5em; width: fit-content; margin:0 auto}

#tailLocation{position: relative; display: grid; grid-template-columns: 1fr 81rem;}
#tailLocation .to_naver_map{position: absolute; inset: 0; z-index: 2;}
#tailLocation .root_daum_roughmap{position: relative; height: 80rem; width: 100%;}
#tailLocation .root_daum_roughmap .wrap_map{height: 100%; width: 100%;}
#tailLocation > article{ position:relative; background-color:#34486f; color: var(--text-anti-primary); padding:3em; }
#tailLocation > article h4{font-size: 2em; font-weight: 700;}
#tailLocation > article ul{margin-top:1em;}
#tailLocation > article ul li{ margin-top:.6em; display: flex; gap:.5em}
#tailLocation > article ul li label{display: flex; justify-content: space-between; background-color: var(--text-anti-primary); color:var(--primary); border-radius: .6em; padding:0 .6em; width:4.5em; font-weight: 700;}
#tailLocation > article ul li em{background-color: #FEAB34; padding:0 .4em; color: var(--text-primary);}
#tailLocation > article ul li strong{font-size:1.6em; line-height:.7em}
#tailLocation > article p{margin-top: 1em;}




#footer{position:relative; padding:3rem 0; background-color:var(--primary); color: #FFF;}
#footer dl{}
#footer dl dt{padding-right:2em; margin-right:2em; border-right:1px solid var(--border-primary)}
#footer dl dt img{height:6rem;} 
#footer dl dd address{font-size:.8em; display: grid; grid-template-columns: repeat(2,1fr); }
#footer dl dd p{font-size:.8em;}
#footer dl dd span{white-space: nowrap; padding-right:10px}

#quickBtns{position:fixed; top:calc(120px + 72px); right:0; z-index:10; text-align:center; font-size: 13px; width: 83px;}
#quickBtns dt{padding:1rem 0; border-radius:0;background:var(--primary); }
#quickBtns dt a{display:block; padding:.6rem 0;  color:var(--bg-primary); }
#quickBtns dt a i{display:block; font-size:2.3em; line-height:1em;    }
#quickBtns dt a + a{ border-top:1px solid rgba(255,255,255,1); }
#quickBtns dd a{display:block;  background:#000; color:var(--text-anti-primary); display:block;padding:.3em 0}
#quickBtns dd a i{ line-height:1em; width:.6em; margin:0 auto; transform:scale(.7) rotate(-90deg);}
 
#quickBtns dd button{display:block; width: 100%;; border:0; background:#000; color:var(--text-anti-primary); padding:.7em 0; font-size:2em;}

 

/*전체메뉴*/
#allmenu{position:fixed; left:0; top:0; right:0; bottom:100%; background:rgba(0,0,0,0); z-index:99; overflow:hidden;  font-family: 'Pretendard'; font-size:.8em; display: grid; place-items: center;}
#allmenu.on{bottom:0;background:var(--text-primary); }
#allmenu.on .btn_close{position:fixed; right:1em;  top:1em; width:6rem; text-align:center; height:6rem; font-size:4rem;  line-height:6rem; transition: all 0.5s ease; color:var(--text-anti-primary)}
#allmenu.on .btn_close:hover{transform:rotate(180deg);}

#allmenu section{position:relative; margin-top:-5em; opacity:0; transition: all 0.5s ease; }
#allmenu.on section{ margin-top:0; opacity:1; transition-delay:200ms;  }
#allmenu dl{ display: grid; grid-template-columns: repeat(4,1fr); gap: 1em 2em;}
#allmenu dl dd{}
#allmenu dl dd > a{position:relative; display:block;padding-left:10px;font-size:1.5em;  border-bottom:1px solid rgba(255,255,255,.1);  line-height:2em; color:var(--text-anti-primary); font-weight:700}
#allmenu dl dd > ul{}
#allmenu dl dd > ul a{display:block;   padding:0 10px; font-size:.9em;  border-bottom:1px solid rgba(255,255,255,.1); line-height:2.8em; color:var(--text-anti-primary); transition: all .3s ease;}
#allmenu dl dd > ul a:hover{border-bottom-color:var(--border-secondary);  background-color: rgba(255,255,255,.1);}
#allmenu dl dd > ul a:before{width:3px; height:3px; display:inline-block ;vertical-align:middle; background:var(--text-anti-primary); opacity: .5;; content:""; margin-right:8px; }

#header.fixed > .full_width_bg{opacity: 1;}
#header.fixed #topMenu dd > a{color:var(--text-primary); }
#header.fixed #btnAllmenu{color:var(--text-primary); }