@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%}


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

/* 2. 750px ~ 1279px : 1280:20 비율 */
@media (min-width: 751px) and (max-width: 1279px) {
  body {
		--font-size: calc(16 * 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:160%; 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;}
.wrap:after {display:block;visibility:hidden;clear:both;content:""}

@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;}


#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:8rem;}
#header h1{float:left; padding:2rem 0; z-index:2;}
#header h1 img{height:4rem; }



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

/*상단메뉴*/
#topMenu{ float:right; margin-right:5em;}
#topMenu dl{ display: -webkit-flex; display: flex;justify-content:center}
#topMenu .full_width_bg{position:absolute; top:8rem; right:0;  height:0; background:var(--primary); content:""; transition: height 0.2s ease; transition-delay:300ms; }
#topMenu:hover .full_width_bg{ height:6rem;  transition-delay:10ms;  }
#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:8rem; height:8rem; padding:0 1em;}
#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;height: 0;opacity: 0;left: 50%;white-space: nowrap;overflow: hidden;transform: translateX(-50%);transition: all 0.5s ease;display: -webkit-flex;display: flex;justify-content: center; }
#topMenu dd:first-child ul {transform: translateX(0);left: 0; }
#topMenu dd:nth-child(2) ul {transform: translateX(0);left: 0; }
#topMenu dd:last-child ul {left: auto;right: 0;transform: translateX(0); }
#topMenu dd:hover ul {height: 6rem;opacity: 1; }
#topMenu dd ul a {display: block;padding: 0 1em;text-align: center;color: #FFFFFF; }
#topMenu dd ul li {position: relative;height: 6rem;line-height: 6rem; }
#topMenu dd ul li:before {position: absolute;top: 50%;margin-top: -.5em;height: 1em;width: 1px;left: 0;background: var(--border-primary);content: ""; }
#topMenu dd ul li:first-child:before {display: none; }

#mobileMenu{display:none;}

/*전체메뉴*/
#btnAllmenu{position:absolute; right:0; top:50%; width:4rem; height:4rem; background:none; font-size:2.5rem;  color:var(--primary); margin-top:-2rem; padding:0; line-height:4rem; border:0}
#allmenu{position:fixed;  left:0; top:0; right:0; bottom:100%; background:rgba(0,0,0,0); z-index:99; overflow:hidden; transition: background 0.5s ease;}
#allmenu.on{bottom:0; background:rgba(0,0,0,.5); }
#allmenu .btn_close{position:absolute; right:0;  top:0px; width:6rem; text-align:center; height:6rem; font-size:4rem;  line-height:6rem; transition: all 0.5s ease;}
#allmenu .btn_close:hover{transform:rotate(180deg);}

#allmenu section{position:absolute; opacity:0; right:0; top:0;padding: 50px; box-sizing:border-box; left:0; background:var(--bg-primary); transition: all 0.5s ease; }
#allmenu.on section{top:110px; opacity:1; transition-delay:200ms;  }


#allmenu dl{ display: -webkit-flex; display: flex; flex-wrap:wrap; }
#allmenu dl dd{width:18%; margin: 1%; }
#allmenu dl dd > a{position:relative; display:block;padding-left:10px;     font-size:1.2em;  border-bottom:1px solid var(--border-secondary); line-height:45px; }
#allmenu dl dd > ul{}
#allmenu dl dd > ul a{display:block;   padding:10px; font-size:.9em;  border-bottom:1px solid var(--border-primary); line-height:20px;}
#allmenu dl dd > ul a:hover{border-bottom-color:var(--border-secondary);  }
#allmenu dl dd > ul a:before{width:3px; height:3px; display:inline-block ;vertical-align:middle; background:var(--primary); content:""; margin-right:8px; }

#content{position: relative; text-align: center; }

#mc_10{padding:10em 0; position: relative; overflow: hidden; }
#mc_10 dl{width: 1280px; margin: 0 auto; display: flex}
#mc_10 dl dt{width: 50%; text-align: left; padding:4em 0 5em}
#mc_10 dl dd{position:relative; width: 50%;}
#mc_10 dl dd article{position:absolute; top: 0; left:0; width: 50vw; top:0;   overflow: hidden;}
#mc_10 .controll{ position:absolute; top:50%; left:0; right:0; z-index:3;}
#mc_10 .controll button{ background:transparent; position:absolute; top:-1em; width:2em; height:2em; font-size:3em;  background:#0066CC; border:0; color:#FFF;  border-radius: 50%}
#mc_10 .controll .swiper_prev{left:-1em; transform:rotateY(180deg); display: none;}
#mc_10 .controll .swiper_next{right:-1em;}




#mc_11{padding:10em 0; position: relative; overflow: hidden; background-color: #F7F7F7;}
#m11_slide{position:relative; max-width:1184px; margin:3em auto 0}
#m11_slide article{position:relative; overflow: hidden;}

#m11_slide .controll{ position:absolute; top:50%; left:0; right:0; z-index:3;}
#m11_slide .controll button{ background:transparent; position:absolute; top:-1em; width:2em; height:2em; font-size:2em;  background:#0066CC; border:0; color:#FFF;  border-radius: 0 1em 1em 0;}
#m11_slide .controll .swiper_prev{left:-1em; transform:rotateY(180deg)}
#m11_slide .controll .swiper_next{right:-1em;}




#mc_12{padding:10em 0; position: relative; overflow: hidden;}
#m12_slide{position:relative; max-width:837px; margin:5em auto 0}
#m12_slide article{position:relative; }
#m12_slide article .swiper-slide{ border-radius: 1em; overflow: hidden; transform: scale(.9); transition: all .3s ease;}
#m12_slide article .swiper-slide.swiper-slide-active{transform: scale(1);}

#m12_slide .controll{ position:absolute; top:50%; left:0; right:0; z-index:3;}
#m12_slide .controll button{ background:transparent; position:absolute; top:-1em; width:2em; height:2em; font-size:2em;  background:#fff; border:0; color:#000;  border-radius: 50%;}
#m12_slide .controll .swiper_prev{left:-1em; transform:rotateY(180deg)}
#m12_slide .controll .swiper_next{right:-1em;}

#content .root_daum_roughmap{width: 100%; height:870px;}
#content .root_daum_roughmap .wrap_map{width: 100%; height:100%;}