@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: 2rem; /* 20px */
}

/* 2. 750px ~ 1279px : 1280:20 비율 */
@media (min-width: 751px) and (max-width: 1279px) {
  body {
		--font-size: calc(20 * 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;}



/*헤더*/
#header{ position:fixed; left:0; right:0;padding:0 2rem; top:0; border-bottom: 1px solid rgba(255,255,255,.5); z-index:20;  height:16rem; display: flex; justify-content: space-between; align-items: center; transition: all .3s ease;}
#header h1{}
#header h1 img{height:10rem;  transition: all .3s ease;}

#header.small{height:10rem;background-color: var(--primary);}
#header.small h1 img{height:6rem}

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

/*상단메뉴*/
#topMenu{}
#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:1.1em; font-weight:600; line-height:5rem; height:5rem; padding:0 1em; color:#FFF;}
#topMenu dd:hover > a{color:var(--primary-light)}

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


/*메인비주얼*/
#main_visual{position:relative; z-index:1;  overflow:hidden; }
#main_visual ul{position:relative; z-index:1;}
#main_visual li{position:relative; width:100%;  max-height:100vh;}
#main_visual li img{width: 100%; height:100%; object-fit: cover;   object-position: center center; }
#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;}

.cfP{color: var(--primary);}
.cfS{color: var(--success);}
.fmL{font-family: 'InkLiquid';}
.fmT{font-family: 'Taenada';}
h4.title{font-size: 2em; line-height:130%;}
h4.title small{font-size: .7em; line-height:130%; display: block;}
h4.title::after{display: block; width: 1em; height:.1em; margin:.4em auto; background-color: #C7C7C7; content: "";}
h4.title.nobar::after{display:none}
h4.title.nobar{margin-bottom: .5em;}
h4.title big{font-size:1.4em; line-height:130%; display: block;}
h4.title + p{font-size:1.2em; line-height:130%;}
 

.jump_menu{position:relative;  top:-10rem}

ol.numb{counter-reset:sign-num;}
ol.numb li{padding-left:5em; margin:.2em 0; position:relative}
ol.numb li:before{position:absolute; left:0; counter-increment:sign-num; content:counter(sign-num); text-align:center;  text-align:center; width:4em; background-color: var(--primary); color:#FFF; font-weight:700; border-radius:2em}

#ma{padding:4em 0; text-align: center;}
#ma h4{font-size: 2em; line-height:2em;}
#ma p{font-size: 1.4em; line-height:1.3em;}
#ma dl{display: flex;  margin-top:2em; justify-content: center; flex-wrap: wrap;}
#ma dl dd{width:15em; margin-top:2em; border-left:1px solid #5A5A5A;}
#ma dl dd:first-child{border-left: 0;}
#ma dl dd {
  flex: 0 0 33.33%;
  box-sizing: border-box;
}

#ma dl dd:nth-child(n+3) {
  flex: 0 0 25%;
}
#ma dl dd:nth-child(4) {
  border-left: 0;
}

#mb{background:url(/img/mb_bg.jpg) center no-repeat;}
#mb > dl{display: flex; justify-content: center; gap: 2em;}
#mb > dl > dt{padding-top:4em}
#mb > dl > dd{ display: flex; justify-content: center; flex-direction: column;}
#mb > dl > dd h6{font-size: .9em; letter-spacing: .5em;}
#mb > dl > dd h4{font-size:3.75em; line-height: 1.3em; margin:.5em 0}
#mb > dl > dd dl{display: flex; gap: 1em;}
#mb > dl > dd dl ul{font-size: 1.5em;line-height: 140%; font-weight: 500;}
#mb > dl > dd dl ul ul{font-size:.8em; line-height: 140%; padding-left:1em;}

#mc{padding:4em 0; background:#F4F4F4; text-align: center;}
#mcSlide{position: relative;width: var(--wrap-width); margin: 2em auto 0;  }
#mcSlide section{position: relative; overflow: hidden;}
#mc dl dd{background-color:var(--primary); color:#FFF;}
#mc dl dd figure img{width: 100%;}
#mc dl dd article{padding:.6em 0; }
#mc dl dd article h6{font-size:1.1em; font-weight:700; color:var(--success); }
#mc dl dd article h6 small{font-size:.8em; color:#FFF;}
#mc dl dd article p{font-size:.9em; line-height:1.3em;}
#mcSlide .controll{position:absolute; top: 50%; left: 0; right:0;}
#mcSlide .controll button{position:absolute; top:-1em; width: 2em; height:2em; background-color: var(--primary); color: #FFF; border: 0;}
#mcSlide .controll button.prev{left:-3em; transform: scaleX(-1);}
#mcSlide .controll button.next{right:-3em}

#md{padding:4em 0; background: url(../img/md_bg.jpg) center no-repeat; text-align: center;}
#md dl{margin-top:2em; display: flex; gap: .2rem; justify-content: center; }
#md dl dd{display: grid; background:#CCCCCC; border-radius:.5em; overflow: hidden;}
#md dl dd p{font-size:.9em; line-height:130%; padding:.5em 0}

#me{padding:4em 0; background-color: #F5F5F5;}
#me dl{display: flex; justify-content: center; align-items: center; gap: 2em;}
#me dl dt{order: 2;}
#me dl dd{width: 55rem;}
#me dl dd ol{font-size: 1.15em; margin:2em 0}
#me dl dd h6{font-size: 1.5em;}

#mf{padding:4em 0; background:url(../img/mf_bg.jpg) center no-repeat;}
#mf dl{display: flex; justify-content: center; align-items: center; gap: 2em;}
#mf dl dd{width: 55rem;}
#mf dl dd ol{font-size: 1.15em; margin:2em 0}
#mf dl dd h6{font-size: 1.5em; white-space: nowrap;}

#mg{padding:4em 0; background-color: #F5F5F5;}
#mg dl{display: flex; justify-content: center; align-items: center; gap: 2em;}
#mg dl dt{order: 2;}
#mg dl dd{width: 55rem; white-space: nowrap;}
#mg dl dd ol{font-size: 1.15em; margin:2em 0; }
#mg dl dd h6{font-size: 1.5em;}

#mh{padding:4em 0; background:url(../img/mh_bg.jpg) center no-repeat;}
#mh dl{display: flex; justify-content: center; align-items: center; gap: 2em;}
#mh dl dd{width: 55rem;white-space: nowrap;}
#mh dl dd ol{font-size: 1.15em; margin:2em 0}
#mh dl dd h6{font-size: 1.5em; }

#mi{padding:3em 0; background: #E9E9E9 url(../img/mi_img.png) center 90% no-repeat; text-align: center; }
#mi h6{ font-size: 1.35em; line-height:130%;}
#mi h4{ font-size: 2.75em; line-height:130%;}
#mi p{ font-size: 1.4em; line-height:130%; margin-top: 1em;}

#mj{padding:4em 0; background:url(../img/mj_bg.jpg) center no-repeat; text-align: center; color: #FFF;} 
#mj dl{display:flex; gap: 1em; margin-top:2em; justify-content: center;}
#mj dl p{margin-top:.5em;}

#mk{position:relative; padding:4em 0; background:url(../img/mk_bg.jpg) center no-repeat; color: #FFF;} 
#mk > dl{display: flex; justify-content: center;}
#mk > dl > dt{order:2}
#mk > dl > dd{ padding-left:2em; }
#mk > dl > dd .title{}
#mk > dl > dd .cfP{color:#a1acff }
#mk > dl > dd > dl{display: grid;text-align: center; grid-template-columns: 12em 14em;}
#mk > dl > dd > dl dd{margin-top:2em;}
#mk > dl > dd > dl dd:nth-child(2n) {border-left:1px solid #FFF;}
#mk > dl > dd > dl dd h5{font-size:1.3em; font-weight: 700; margin:.6em 0; line-height:120%;}
#mk > dl > dd > dl dd p{ line-height:130%;}
#mk .logo{position:absolute; right:2em; bottom:2em;}

#ml{padding:4em 0 0 0; text-align: center; background-color: #F7F7F7;}
.bijiao{margin:4em 0; display: flex; justify-content: center; gap: 3em;}
.bijiao dd{display: grid; grid-template-rows: 4em auto 1fr; border-radius: 1em; overflow: hidden;  background:#FFF; }
.bijiao dd .cfP{color:#a1acff}
.bijiao dd h5{ font-size: 1.5em; font-weight: 700; display: flex; justify-content: center; flex-direction: column;}
.bijiao dd figure{ }
.bijiao dd ul{display: flex; justify-content: space-between; flex-direction: column;}
.bijiao dd ul li{border-top: 1px solid #CACACA; padding:.5em 0; flex-grow:1;  display: flex; justify-content: center; flex-direction: column;}
.bijiao dd ul li:first-child{border-top:0}
.bijiao dd:nth-child(2){background-color: #03062B; color:#FFF; transform: scale(1.15); box-shadow: 0 0 .4em rgba(0,0,0,.3);}
.bijiao dd:nth-child(2) ul li{border-top: 1px solid #606279; }

.suming{background-color: #343654; color:#FFF; display: flex; justify-content: center; font-size:1.25em; font-weight: 700;  padding:1.5em 0}
.suming dd{width: 23em;}
.suming dd.cfP{color:#a1acff}

#mm{padding:4em 0; text-align: center; background: url(../img/mm_bg.jpg) center no-repeat;}
#mm dl{width: 22em; margin:2em auto 0; font-size: 1.5em; line-height: 1.3em; display: flex; justify-content: center; flex-wrap: wrap; gap: 1em;}
#mm dl dd{ }
#mm dl dd strong{display: block;  font-size:1.3em; line-height:2em; background-color: var(--primary);color:#FFF}
#mm dl dd p{display: block; height:3em; background-color: var(--primary-dark); color:#FFF; display: grid; place-items: center }

#mn{padding:4em 0; text-align: center; background-color: #F3F3F3; }
#mn .dls1{margin-top:2em; display: flex; justify-content: center; gap: 2em;}
#mn .dls1 dd{display: grid; place-items: center; }
#mn .dls1 dd ul li{background-color: var(--primary); color:#FFF; padding:.4em 1.5em; border-radius: 2em; margin:1em 0; position:relative; }
#mn .dls1 dd ul li:after{position:absolute; border-style:solid; border-color:transparent; border-top-color:var(--primary); left:1em; top:100%; border-width: .5em .4em 0 .4em; content:""; transform: skew(-60deg);}
#mn .bijiao dd:nth-child(2){background-color:var(--primary)}
#mn .bijiao dd:nth-child(2) h5{color:var(--success)}
#mn .bijiao dd:nth-child(2) ul li{border-color: rgba(255,255,255,.5);}

#mo{position: relative; padding:4em 0; background: url(../img/mo_bg.jpg) center no-repeat; }
#mo figure{position: absolute; top:1em; right:-2em;}
#mo article{position: relative; width: var(--wrap-width); margin:0 auto; }
#mo article h3{font-size: 2em; margin-top:1em; line-height:2em;}
#mo article dl{display: grid; grid-template-columns: repeat(2,1fr); gap: .5em; text-align: center; width: 80%;}
#mo article dl dd{background-color: var(--primary); color:#FFF; padding:.3em .6em; color: #FFF; border-radius: .3em;}

#mp{background-color: #F5FAFB; padding:4em 0; text-align: center;}
#mp dl{display: flex; justify-content: center; gap: 1em;}
#mp dl strong{color: var(--primary); display: block; line-height:1em; margin-top:1em; font-size:1.25em;}
#mp dl h6{font-weight: 700; font-size: .9em; margin-top: 1em;}
#mp dl p{font-size: .8em; margin-top: 1em; line-height:130%;}

#mq{padding:4em 0; text-align: center; background: url(../img/mq_bg.jpg) center no-repeat; color:#FFF;}
#mq h3{font-size:2em; line-height:1em; margin-top:.8em;}
#mq dl{display:flex; justify-content: center; width: var(--wrap-width); gap: .5em; flex-wrap: wrap; margin:2em auto 0}
#mq dl dd{background-color: var(--primary); color:#FFF; padding:.3em .6em; color: #FFF; border-radius: .3em; flex-grow: 1; width: 40%; }

#mq2{background-color: #F5FAFB; padding:4em 0; text-align: center;}
#mq2 dl{display: flex; justify-content: center; gap: 1em;}
#mq2 dl strong{color: var(--primary); display: block; line-height:1em; margin-top:1em; font-size:1.25em;}
#mq2 dl h6{font-weight: 700; font-size: .9em; margin-top: 1em;}
#mq2 dl p{font-size: .8em; margin-top: 1em; line-height:130%;}

#mr{display: flex; justify-content: center; }
#mr figure{position: relative; max-height: 29em; width: 45%;}
#mr figure img {width: 100%; height:100%; object-fit: cover; -webkit-mask-image: linear-gradient(to left, transparent, black 30%);mask-image: linear-gradient(to left, transparent, black 30%);}
#mr article{padding:4em 0; width: 55%;}
#mr article h3{font-size: 2em; margin-top:1em; line-height:2em;}
#mr article dl{display: grid;   grid-template-columns: repeat(auto-fit, minmax(10em, 20em)); max-width: calc(20em * 2 + .5em); gap: .5em; text-align: center; }
#mr article dl dd{background-color: var(--primary); color:#FFF; padding:.3em .6em; color: #FFF; border-radius: .3em;}

@media (max-width:1500px){
  #mr figure{position: relative; max-height: 100%; }
}
#ms{background-color: #F5FAFB; padding:4em 0; text-align: center;}
#ms dl{display: flex; justify-content: center; gap: 1em;}
#ms dl strong{color: var(--primary); display: block; line-height:1em; margin-top:1em; font-size:1.25em;}
#ms dl h6{font-weight: 700; font-size: .9em; margin-top: 1em;}
#ms dl p{font-size: .8em; margin-top: 1em; line-height:130%;}

#mt{padding: 4em 0; background: url(../img/mt_bg.jpg) center no-repeat; font-size: 1.3em;}
#mt article{max-width: 130rem; margin:0 auto}
/* #mt dl{margin-top:2em; display: grid; grid-template-columns: repeat(2,1fr); gap: 1em;}
#mt dl dd{background-color: #FFF; display: grid; grid-template-columns: 10em 1fr; text-align: center; box-shadow: 0 .1em .05em rgba(0,0,0,.3);}
#mt dl dd label{background-color: var(--primary); color:#FFF; font-family: 'InkLiquid'; font-size: 1.75em; padding:.5em}
#mt dl dd span{padding:.5em;  display: grid; place-items: center; }
#mt dl dd:nth-child(4n + 2) label,
#mt dl dd:nth-child(4n + 3) label{background-color: var(--primary-dark);} */

#mt dl{display: flex; text-align: center; margin:4em 0}
#mt dl dd p{font-size: 1.5em;}
#mt dl dd strong{font-size: 2.5em; display: block; line-height:1em;}
#mt dl dt{display: flex; justify-content: center; flex-direction: column; font-size: 2.5em; padding:0 1em}
#mt dl dd:last-child{transform: scale(1.5); padding-left:2em}
#mt dl dd:last-child strong{transform: scale(1.5); margin-top:.2em  }
#mt h6{background-color: var(--primary); color: #FFF; padding:.4em 1em; width: fit-content; font-size:1.3em;}
#mt h6 span{color: var(--success);}


#mu{padding: 4em 0; background: url(../img/mu_bg.jpg) center no-repeat; color: #FFF; text-align: center;}
#mu h6{font-size:1.5em; margin:1em 0}
#mu ul{display: inline-block;}
#mu ul li{position: relative; padding-left:1.5em; font-size:1.25em; text-align: left; margin:.4em 0; }
#mu ul li:before{position:absolute; left:0; width:1em; height:1em; margin-top:.2em; line-height:1em; background-color: #FFF; border-radius: 50%; content:"!"; text-align: center; color: var(--primary);}
#mu h5{background-color: #FFF; color:var(--text-primary); width: fit-content; font-size:1.25em; padding:.3em .4em; margin:1em auto 0}

#mu2{padding:3em 0; background: url(../img/mu_bg2.jpg) center no-repeat; text-align: center;}
#mu2 dl{display: flex; justify-content: center; gap: 1em;}
#mu2 dl p{font-size: 1.5em; margin-top:.5em}

#mv{padding:4em 0; background: url(../img/mv_bg.jpg) center no-repeat; text-align: center;}
#mv dl{display: flex; justify-content: center; gap: 1em; margin-top: 2em;}
#mv dl dd{background-color: var(--primary-light); }
#mv dl dd h6{padding:.4em; background-color: var(--primary); color:#FFF; font-weight: 700; font-size: 1.5em;}
#mv dl dd p{padding:.5em; font-size: .9em; line-height:1.3em;}
#mv h5{font-size: 2em; line-height: 1em; margin-top: 1em;}

#mw{background-color: #F6F6F6;}
#my{background-color: #F6F6F6;}
.mwxy{padding:4em 0; text-align: center;}
.mwxy h5{font-size: 2em; margin-top:1.5em; line-height:1em;font-weight: 700;}
.mwxy .dls1{display: flex; justify-content: center; margin-top:2em;}
.mwxy .dls1 dt{position: relative;  height: 31rem; width: 45%; text-align: right;}
.mwxy .dls1 dt figure{background-position: right center; width: 100%; height: 100%; background-repeat: no-repeat;}
.mwxy .dls1 dd{text-align: left; width: 55%; padding-left: 3em; display: flex; justify-content: center; flex-direction: column;}
.mwxy .dls1 dd h5{margin-top: 0;}
.mwxy .dls1 dd p{margin-top: 1em;}
.mwxy .dls2{display: flex; justify-content: center; gap: 1em; margin-top:2em;}
.mwxy .dls2 dd{width: 20em; }
.mwxy .dls2 dd strong{font-size: 1.5em; color: var(--primary); display: block;}
.mwxy .dls2 dd p{background-color: var(--primary); color:#FFF; padding:.8em; border-radius: 3em; margin-top:.6em;}
.mwxy .dls3{display: flex; justify-content: center; gap: .5em; margin-top:3em;}
.mwxy .dls3 dd{width: 10em; background-color: #FFF; position: relative; box-shadow: 0 .1em .1em rgba(0,0,0,.3); padding:2em 0 1em}
.mwxy .dls3 dd b{position: absolute; top: 0; left:50%; width: 2em; height:2em; line-height: 2em; background-color: var(--primary); color: #FFF; transform: translate(-50%,-50%); border-radius: 50%; font-size:1.25em;}
.mwxy .dls3 dd small{font-size: .8em;}
.mwxy .dls4{display: flex; justify-content: center; gap:3em; margin-top:2em;}
.mwxy .dls4 > dt{display: flex; justify-content: center; flex-direction: column;}
.mwxy .dls4 > dt{display: flex; justify-content: center; flex-direction: column;}
.mwxy .dls4 > dd{width: 30em;}
.mwxy .dls4 > dd > dl{display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5em; text-align: left;}
.mwxy .dls4 > dd > dl > dd b{font-size: 2em; color: var(--primary); display: block; line-height: 1em; font-weight: 700;}
.mwxy .dls4 > dd > dl > dd h6{font-size:1.5em; line-height: 1em; margin-top:.6em; font-weight: 700;}
.mwxy .dls4 > dd > dl > dd p{ margin-top:.6em;}

.mwxy .dls3 dd.sc_scale:nth-child(1){animation-range: entry 10% cover 30vh;}
.mwxy .dls3 dd.sc_scale:nth-child(2){animation-range: entry 20% cover 40vh;}
.mwxy .dls3 dd.sc_scale:nth-child(3){animation-range: entry 30% cover 50vh;}
.mwxy .dls3 dd.sc_scale:nth-child(4){animation-range: entry 40% cover 60vh;}
.mwxy .dls3 dd.sc_scale:nth-child(5){animation-range: entry 50% cover 70vh;}


#mz{display: flex; justify-content: center; background: url(../img/mz_bg.jpg) center no-repeat;}
#mz figure{position: relative; height: 64rem; width: 45%; background-position: right center; background-repeat: no-repeat;}
#mz article{display: flex; justify-content: center; flex-direction: column; padding-left:3em; }
#mz article dl{margin-top:2em;}
#mz article dl dd{display: grid; grid-template-columns: 7em 1fr;}
#mz article dl dd label{ border-right:1px solid var(--primary); padding:.5em 0}
#mz article dl dd label strong{display: block; font-size: 1.75em; line-height: 1em; color: var(--c); }
#mz article dl dd div {padding-left:2em; display: flex; justify-content: center; flex-direction: column;}
#mz article dl dd p strong{color: var(--c); }

#mz1{padding:4em 0; text-align: center; background: url(../img/mz1_bg.jpg) center bottom no-repeat;}
#mz1 header{position: relative; text-align: left; width: var(--wrap-width); margin:0 auto}
#mz1 header figure{position: absolute; right:0; top:50%; transform: translateY(-50%);}
#mz1 h5{margin-top:3em; position: relative;}
#mz1 h5:before{width: 25em; top:50%; left:50%; position: absolute; transform: translate(-50%,-50%); height:2px; background-color: var(--primary); content:""; }
#mz1 h5 strong{position:relative; display: inline-block; background-color: var(--primary); color:#FFF; font-size:2em; border-radius: 3em; padding:.3em 1em;}
#mz1 dl{margin-top: 2em; display: flex; justify-content: center; gap: 2em;}

#mz2{padding: 4em 0; text-align: center; background-color:#F5F5F5; }
#mz2 .dls1{display: flex; justify-content: center; gap: 2em;}
#mz2 .dls1 dd{display: flex; justify-content: center; flex-direction: column; text-align: left;}
#mz2 .dls2{display: flex; justify-content: center; gap: 1em; margin-top:2em;}
#mz2 .dls2 dd{ }
#mz2 .dls2 dd b{display: block; width: 2em; height:2em; line-height: 2em; background-color: var(--primary); color: #FFF; border-radius: 50%;margin:0 auto; font-size:1.5em}
#mz2 .dls2 dd figure{background-color: #FFF; width: 11em; font-size:1.3em; font-weight:600; padding:1em 0; margin-top:1em;}
#mz2 .dls2 dd figure p{margin-top:.6em}

#mz3 .pt1{position:relative; padding:4em 0; width: var(--wrap-width); margin:0 auto;}
#mz3 .pt1 .full_width_bg{background: url(../img/mz3_bg.jpg) center no-repeat;}
#mz3 .pt1 p{margin-top:1em;}
#mz3 .pt2{padding-top:3em; background-color: #F5F5F5; text-align: center;}
#mz3 .pt3{padding:4em 0; width: var(--wrap-width); margin:0 auto; position: relative; text-align: center;}
#mz3 .pt3 .full_width_bg{background-color: #F8F8F8;  }
#mz3 .pt3 dl{display: flex; gap: 3em; text-align: left; margin-top:.5em; position: relative; margin-left:10%}
#mz3 .pt3 dl dt{width: 30rem;}
#mz3 .pt3 dl dd{display: flex; justify-content: center; flex-direction: column;}
#mz3 .pt3 dl dd h5{font-weight: 700; line-height:100%;font-size: 1.5em;}
#mz3 .pt3 dl dd p{margin-top: 1em;}

#mz4{padding:4em 0; text-align: center; background: url(../img/mz4_bg.jpg) center no-repeat;}
#mz4 .dls1{display: flex; margin:0 auto; justify-content: center;}
#mz4 .dls1 dt{order:2; margin-left: 3em;}
#mz4 .dls1 dd{text-align: left;  }

#mz4 .dls2{display: flex; width: var(--wrap-small); margin:0 auto; justify-content: center; gap: .4em;}
#mz4 .dls2 dd{background-color: var(--primary); color: #FFF; border-radius: 1em; overflow: hidden;;}
#mz4 .dls2 dd p{height:4em; display: flex; justify-content: center; flex-direction: column;}

#mz5{padding:4em 0; text-align: center; background-color: #F3F3F3;}
#mz5 dl{margin-top:2em; display: flex; justify-content: center; gap: 1em;}
#mz5 dl dd{background-color: #FFF; border-radius: 1em; overflow: hidden;;}
#mz5 dl dd h6{position:relative; z-index:2; color:#FFF; background-color: var(--primary); font-size:1.9em; font-weight: 700; padding:.6em; margin-top:-.5em; border-radius: .5em .5em 0 0;}
#mz5 dl dd p{padding:1.5em 0; font-size: 1.4em;  line-height:1.4em}

#mz6{text-align: center;}
#mz6 header{background:url(../img/mz6_bg.jpg) center no-repeat; padding:3em; color: #FFF;}
#mz6 section{padding:4em 0}
#mz6 section dl{margin-top: 2em; display: flex; justify-content: center; gap:2em}
#mz6 section dl dd{position: relative; border-radius: .3em; overflow: hidden; box-shadow: 0 .1em .4em rgba(0,0,0,.15);}
#mz6 section dl dd b{position:absolute; font-size:1.75em; font-weight: 700; width: 2em; height:2em; line-height: 2em; left:50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: var(--primary); color: #FFF;}
#mz6 section dl dd h6{font-weight: 700; color: var(--primary); line-height:1em; margin-top:1.5em; font-size: 1.5em;}
#mz6 section dl dd p{padding:1em}

#mz7{position: relative; padding:4em 0; width: var(--wrap-width); margin:0 auto; font-size:1.3em}
#mz7 .full_width_bg{background: url(../img/mz7_bg.jpg) center no-repeat;}
#mz7 dl{display: flex; text-align: center; margin:3em 0}
#mz7 dl dd p{font-size: 1.5em;}
#mz7 dl dd strong{font-size: 2.5em; display: block; line-height:1em;}
#mz7 dl dt{display: flex; justify-content: center; flex-direction: column; font-size: 2.5em; padding:0 1em}
#mz7 dl dd:last-child{transform: scale(1.5); padding-left:2em}
#mz7 dl dd:last-child strong{transform: scale(1.5); margin-top:.2em  }

#mz7 ul{margin-top:1em}
#mz7 ul li{display: grid; grid-template-columns: 6em 1fr; font-size: 1em; line-height: 2em; gap: 1em; margin-top:.7em}
#mz7 ul li label{color: #FFF; background-color: var(--primary); border-radius: 3em; font-weight: 700; text-align: center;}
#mz7 ul li span{display: flex;justify-content: center; flex-direction: column;}


#mz8{position: relative; padding:4em 0; width: var(--wrap-width); margin:0 auto}
#mz8 .full_width_bg{background: url(../img/mz8_bg.jpg) center no-repeat;}
#mz8 h5{ font-size: 2em; line-height:2em; margin-top:1em;}
#mz8 dl{display: flex; gap: 1em; text-align: center;}
#mz8 dl dd{position:relative; border-radius: .6em; overflow: hidden; background-color: var(--primary); color: #FFF;}
#mz8 dl dd p{padding:.5em}
#mz8 h6{font-size: 1.2em; margin-top:1em;}


#mz9{position: relative; padding:6em 0; width: var(--wrap-width); margin:0 auto}
#mz9 .full_width_bg{background: url(../img/mz9_bg.jpg) center no-repeat;}
#mz9 h5{ font-size: 1.5em; line-height:2em; }
#mz9 dl{display: flex; gap: 1em; margin-top:1em}
#mz9 dl dt{background-color: var(--primary); color: #FFF; padding:.2em 1em; border-radius: .2em;}

#mz10 dl{display: flex; justify-content: center; }
#mz10 dl dt{width: 50%; text-align: right;}
#mz10 dl dt figure{background-position: center; background-size: cover; height:100%;}
#mz10 dl dd{width: 50%; display: flex; justify-content: center; flex-direction: column; padding:3em; background-color: #F5F5F5;}
#mz10 dl dd h4{ font-size: 1.8em; font-weight: 700;line-height: 1em;}
#mz10 dl dd p{margin-top:1em; }
#mz10 dl dd ul{margin-top: 1em; display: flex; flex-wrap: wrap; gap: .5em;}
#mz10 dl dd ul li{padding:.3em; background-color: var(--primary); color: #FFF; border-radius: 2em;}
#mz10 dl.dtr dt{order:2;}

#mz11 header{height:38rem; text-align: center; background: url(../img/mz11_bg.jpg) center no-repeat; color:#FFF; display: flex; justify-content: center; flex-direction: column;}
#mz11 header dl{margin-top:1.5em; font-size:.85em; display: flex; justify-content: center; gap:.4em}
#mz11 header dl dd{background-color: #FFF; color: var(--text-primary); padding:.2em .5em;}
#mz11 header h6{margin-top:1em;}
#mz11 section{padding:4em 0;background:#F5F5F5; }
#mz11 section .dlc{display: flex; justify-content: center; }
#mz11 section .dlc dd{font-size:1.15em; text-align: center; color:#FFF; display: flex; justify-content: center; flex-direction: column; width: 11em; height:11em; border-radius: 50%;}
#mz11 section .dlc dd:nth-child(1){background-image: url(../img/mz11_c_img1.png);}
#mz11 section .dlc dd:nth-child(2){background-image: url(../img/mz11_c_img2.png); margin-top:2.5em;}
#mz11 section .dlc dd:nth-child(3){background-image: url(../img/mz11_c_img3.png);}
#mz11 section .dlc dd:nth-child(4){background-image: url(../img/mz11_c_img4.png); margin-top:2.5em;}

#mz11 section .dls{width: var(--wrap-width); margin: 1em auto; display: flex; gap: 2em; margin-top: 2em;}
#mz11 section .dls dt{ width: 45rem;}
#mz11 section .dls dd{font-size: .9em; display: flex; justify-content: center; flex-direction: column;}
#mz11 section .dls dd h4{font-size:1.8em;}
#mz11 section .dls dd ul{margin-top: 1em; display: flex; flex-wrap: wrap; gap: .5em;}
#mz11 section .dls dd ul li{padding:.1em .6em; background-color: var(--primary); color: #FFF; border-radius: 2em;}

#mz12{padding:4em 0; text-align: center; }
#mz12 .dls{display: flex; justify-content: center;}
#mz12 .dls dt{order:2; margin-left: 2em;}
#mz12 .dls dd{display: flex; justify-content: center; flex-direction: column; text-align: right;}
#mz12 figure{margin-top: 2em;}
#mz12 h5{font-weight: 700; margin-top:2em; font-size: 1.25em;}
#mz12 h6{font-size: 1.8em; line-height: 1em; margin-top:1em;}
#mz12 .dls2{display: flex; justify-content: center; gap: .4em; margin-top: 1em;}
#mz12 .dls2 dd{background-color: var(--primary-light); padding:.4em 1em}

#mz13{padding:7em 0; background:url(../img/mz13_bg.jpg) center no-repeat;}
#mz13 article{position:relative; width: var(--wrap-width);padding:3em 0; z-index:1; margin:0 auto}
#mz13 article:before{position:absolute; background-color:#F1F1F1; width: 100vw; right:0; top: 0; bottom: 0; content:""; z-index: -1; border-radius: 0 2em 2em 0;}
#mz13 article figure{position: absolute; right:0; top: 50%; transform: translateY(-50%);}
#mz13 article dl{display: flex; gap: .3em; margin-top: 2em;}
#mz13 article dl dd{background-color: #FFF; border-radius: 3em; box-shadow: 0 .3em .3em rgba(0,0,0,.5); padding:.2em 1em}

#mz14{position:relative; padding:4em 0; text-align: center; background-color: #F8F8F8;}
#mz14 h4{font-size: 1.75em;}
#mz14 h4 span{font-size: 1.28em;}
#mz14 figure{margin-top:2em;}
#mz14 h5{margin-top:3em;}
#mz14 dl{display: flex; justify-content: center; align-items: center; gap: 2em; margin-top:2em}
#mz14 dl h6{color:var(--primary); font-size:.9em}
#mz14 dl strong{display: block; width: fit-content; padding:.2em 1em; border-radius: 2em; background-color: var(--primary); color:#FFF;margin:.6em auto;}
#mz14 dl p{font-weight:600; }
#mz14 .logo{position:absolute; right:2em; bottom:2em;}


#mz15{padding: 4em 0; text-align: center; background-color: #F2F2F2;}
#mz15 dl{margin-top:2em; display: flex; justify-content: center;}
#mz15 dl dd{width: 15em; }
#mz15 dl dd p{font-size: .9em; margin-top:.7em;}
#mz15 dl dd strong{font-size: 1.1em;;}
#mz15 dl dd + dd{border-left:1px solid #999}

#mz16{padding:4em 0; text-align: center; }
#mz16 section{position: relative; margin-top: 2em;width: var(--wrap-width);   margin: 2em auto;}
#mz16 aside{  width: var(--wrap-width); overflow: hidden; margin: 0 auto; margin-top:.5em;}
#mz16 aside dd{position: relative}
#mz16 aside dd div{padding-top: 65%; background-size: cover; background-position: center;}
#mz16 aside dd.swiper-slide:after{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); content:"";}
#mz16 aside dd.swiper-slide-thumb-active:after{ background:rgba(0,0,0,0);   }

#mz16 .controll{position:absolute; top: 50%; left: 0; right:0; z-index: 2;}
#mz16 .controll button{position:absolute; top:-1em; width: 2em; height:2em; background-color:transparent; color: #000; border: 0; font-size:1.5em; border-radius: 50%;}
#mz16 .controll button.prev{left:-2.5em; transform: scaleX(-1);}
#mz16 .controll button.next{right:-2.5em}



#mz17 dl{display: grid; grid-template-columns: repeat(2,1fr);}
#mz17 dl dt{order:2; position: relative;}
#mz17 dl dt .root_daum_roughmap{position: absolute; top: 0; left: 0; width: 100%; height:100%;}
#mz17 dl dt .root_daum_roughmap .wrap_map{width: 100%; height:100%;}
#mz17 dl dd{padding:3em; background-color: #2B2B2B; color:#FFF; font-size:1.5vw; line-height:140%;}
#mz17 dl dd h4{font-size:2em; line-height:1em; font-weight: 700; color: var(--primary);}
#mz17 dl dd ul{font-size:1.1em; }
#mz17 dl dd ul li{margin-top:1em;}
#mz17 dl dd ul li i{margin-right: .5em;}
#mz17 dl dd ul li strong{ font-size: 1.5em;}
#mz17 dl dd h6{color:var(--primary); font-weight: 700; margin-top:1.5em; font-size: 2em; line-height:1em;}
#mz17 dl dd ol{ line-height:2.2em; margin-top:.5em}
#mz17 dl dd ol li{display: flex;}
#mz17 dl dd ol li+ li{border-top:1px dashed #FFF;}
#mz17 dl dd ol li label{display: flex; justify-content: space-between; width: 5em; margin-right:1.5em}
#mz17 dl dd > p{margin-top:1em}


#footer{position:relative; padding:3rem 0; background-color:var(--primary); color: #FFF;}
#footer dl{display: flex; justify-content: center;}
#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{font-size:1.2rem; line-height:140%; display: grid; grid-template-columns: 15em 1fr;}
#footer dl dd span{white-space: nowrap; padding-right:2em}

#quickBtns{position:fixed; top:50%; right:2rem; width:10rem; z-index:10; text-align:center; transform: translateY(-50%);}
#quickBtns dt{padding:1rem .5rem; background:rgba(255,255,255,.5); border-radius: 5rem;}
#quickBtns dt a{display:block;    padding:1rem 0;  color:var(--text-primary); font-size: .8em;}
#quickBtns dt a i{display:block; }
#quickBtns dt a + a{ border-top:1px solid rgba(255,255,255,1); }
#quickBtns dt a p{line-height: 1em;}