@charset "utf-8";
@import url(../../../fonts/pretendard/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:#fff;color:#000;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}


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

/* 751px ~ 1000px: 화면 너비에 비례해 축소 */
@media (min-width: 751px) and (max-width: 1000px) {
  body {
    /* 24px / 1000px = 0.024 → 100vw에 비례 */
    --font-size: calc(100vw * 24 / 1000); /* = 2.4vw */
  }
}

/* 3. 749px 이하 : 375:13 비율 */
@media (max-width: 750px) {
  body { 
		--font-size: calc(10 * 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:#000; letter-spacing:-.06em; }
input{font-size:1em;}
iframe#hiddenframe {display:none;width:0;height:0}
label,button{cursor:pointer}
 input, button, select, textarea { outline: none;}
strong{font-weight:700}
b{font-weight:800}
.iconfont{font-size:1em;}
a{color:#000;text-decoration:none}
a:hover, a:focus{color:#295184;text-decoration:none}


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

.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{max-width:900px; margin:0 auto; position:relative; zoom:1; padding-inline:50px;}
@media (max-width: 750px) {
.wrap{ padding-inline:5vw;  }
  }

 h1{display: none;}
 h2{font-size:1.8em; line-height: 1.4; font-weight: 700; }
 h3{font-size:1.5em;  }
 h5{font-size:1.16em;  }
 h6{font-size:1.1em;  }
 .fw300{font-weight: 300;}
 .fw400{font-weight: 400;}
 .fw500{font-weight: 500;}
 .fw600{font-weight: 600;}
 .fw700{font-weight: 700;}
 .fw800{font-weight: 800;}
 .fw900{font-weight: 900;}
 .h-1{height:.1em}
 .h-2{height:.2em}
 .h-3{height:.3em}
 .h-4{height:.4em}
 .h-5{height:.5em}
 .h-6{height:.6em}
 .h-7{height:.7em}
 .h-8{height:.8em}
 .h-9{height:.9em}
 .h1{height:1em}
 .h1{height:1em}
 .h1{height:1em}
 .h2{height:2em}
 .h3{height:3em}
 .h4{height:4em}
 .h5{height:5em}

 .cfr{color:#bd0000;}
 .cfw{color:#FFF;}
 .tc{text-align: center;}
 .tl{text-align: left;}
 .tr{text-align: right;}
 section{position: relative; max-width: 1920px; margin:auto; overflow: hidden;}
 .vc{display: flex; justify-content: center;  flex-direction: column; }
 .center{position:absolute; left:50%; top: 50%; transform: translate(-50%, -50%); }
.pd3{padding-block:3em}
 
.bg-img {
  background-image: var(--bg-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}



img.bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.visual{position: relative; height:100vh;   }
.visual article{width: 100%;}
.visual h6{margin-top: 1em;}

.ma1 dl{margin-top: 2em; width: fit-content; margin-inline: auto;}
.ma1 dl dd{background-color: #fff; border-radius: 2em; padding:.6em 1.5em; margin-top: .3em;}
 .ma2 figure{margin-block:2em}
 .ma2 h5 b{color: #67452b;}
 .ma5{overflow: hidden;}
 .ma5 dl{display:grid; grid-template-columns: 70% 30%;  }
 .ma5 dl:nth-child(1) dt{ position:relative;}
 .ma5 dl:nth-child(1) dd{ position:relative}
 .ma5 dl:nth-child(1) dt:before{position:absolute; width: 100vw; height:1px; top:50%; right:100%; background-color: #000; content:"";}
 .ma5 dl:nth-child(1) dd:before{position:absolute; height: 100vw; width: 1px; left:50%; top:100%; background-color: #000; content:"";}
 i.bar{display: block; width: 1px; height:2em; background-color: #000; margin:.5em auto;}

.ma8 dl{display: grid; grid-template-columns: repeat(2,1fr); gap: 1em;}
.ma9 dl{display: flex; justify-content: center; gap: .5em; margin:1em}
.ma9 dl dd{width: 3.5em; aspect-ratio: 1; border-radius: 50%; background-color: #67452B; color: #FFF; font-size: 1.45em; font-weight: 700; display: flex;justify-content: center; align-items: center; flex-direction: column;}

.dlw{display: flex;   gap: 1.6em;}
.dlw dt{width: 14.5em;}
.dlw dd{flex: 1;}
.dlw.dtr dt{ order:2}
dl.tab{display: flex; justify-content: center; gap: .5em; }
dl.tab dd{background-color: #FFF; flex: 1; border-radius: 1rem; border:1px solid #AEAEAE; box-shadow:0 .1em .1em rgba(0,0,0,.3); height:4em; display: flex; justify-content: center; flex-direction: column; font-weight: 600; width: 10em;}  

.uls_1{margin-top: 1em;  }
.uls_1 li{ position:relative; text-align: left ; padding-left: 2em;}
.uls_1 li:before{ position:absolute; left:0; top:50%; transform: translateY(-50%); content:""; width: 1em; height: 1em; background:url(./img/ul_icon.png) center no-repeat;}

.md3 img{width: 18em;}
.md11{background-color: #F2F2F2; overflow: hidden;}
.md11 .big_text{ font-size: 4.6em; line-height: 1; color: #EBEBEB; position:absolute; left:0; right:0; top: -.3em; font-weight: 700;}
.md11 dl{position: relative; margin:1em auto; width: fit-content;}
.md11 dl dd{padding:.5em 1.5em; background-color: #FFF; border-radius: 2em; margin-top: .3em; display: flex;}
.md11 dl dd strong{ width: 3.5em; display: flex; justify-content: space-between; margin-right: 1em;}

.md11 .root_daum_roughmap{width: 25em; max-width: 100%; margin: 0 auto;height:18em; font-size: 1em;}
.md11 .root_daum_roughmap .wrap_map{width: 100%; height:100%;}

.quick_menu{position: fixed; top: 50%; right:2em; transform: translateY(-50%); z-index: 999; border-radius: 1em; overflow: hidden; text-align: center; box-shadow: 0 .1em .1em rgba(0,0,0,.3);}
.quick_menu a{display: block; padding:1em 0; font-size: .76em; width: 6.8em; }
.quick_menu a:nth-child(1){background-color: #3A4135; color: #FFF;  }
.quick_menu a:nth-child(2){background-color: #FFED00; color: #432017;  }
.quick_menu a:nth-child(3){background-color: #FFFFFF; color: #000;  }
.quick_menu a:nth-child(4){background-color: #FFFFFF; color: #000; border-top: 1px solid #B7B7AD; }
.quick_menu a p{margin-top: .5em;}
.quick_menu a img{width: 2.4em;}
@media (max-width: 750px) {
.quick_menu{position: sticky; top: auto; left:0; right:0; bottom:0; display: flex; transform: translateY(0);  border-radius:0; }
.quick_menu a{width: 25%; font-size: 1em;}

.quick_menu a:nth-child(4){ border-top: 0; border-left:1px solid #B7B7AD; }

}

/* 방향별 초기 상태 */
.reveal {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0s);
}
.from-bottom { transform: translateY(60px); }
.from-top    { transform: translateY(-60px); }
.from-left   { transform: translateX(-80px); }
.from-right  { transform: translateX(80px); }
.reveal.show { opacity: 1; transform: translate3d(0,0,0) scale(1); }