/* ============================================================================================================================== */
/* ======================================================= custom common 코드 ==================================================== */
/* ============================================================================================================================== */

.zoom-wrap {overflow: hidden; position: relative;}
.zoom {transform: scale(1.12); transition: transform 0.8s ease-in-out; width: 100%;}
.zoom.active {transform: scale(1); transition: transform 2.4s ease-in-out;}

.bg-animation {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.progress-ring-circle {transition: 2.4s stroke-dashoffset; transform: rotate(-90deg); transform-origin: 50% 50%;}

.pc-layout {display: block;}
.mobile-layout {display: none;}

.fade {opacity: 1; transition: opacity 0.5s;}
.fade.out {opacity: 0.6; transition: opacity 3s; /* 페이드 효과 시간 조정 */}

.point {position: relative; overflow: hidden; padding: 2px 6px; font-weight: bold; transition: color 0.7s cubic-bezier(0.88, 0.01, 0.18, 1.12); z-index: 1; text-shadow: none;}
.point::before {content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: #10b7d0; /* 배경 색상 */ transition: width 0.7s cubic-bezier(0.88, 0.01, 0.18, 1.12); z-index: -1;}
.point.active {color: #fff;}
.point.active::before {width: 100%;}

.underline {position: relative; overflow: hidden;}
.underline::after {content: ''; position: absolute; width: 0; height: 2px; background-color: black; bottom: -6px; left: 0; transition: width 0.8s cubic-bezier(0.88, 0.01, 0.18, 1.12);}
.underline.visible::after {width: 100%;}

.btn-hover {position: relative; transition: all 0.5s ease-in-out; overflow: hidden;}
.btn-hover::before {position: absolute; content: ''; left: 0; top: 0; width: 0; height: 100%; transition: all 0.5s ease-in-out; z-index: -1;}
.btn-hover:hover::before {width: 100%;}

.video-wrap {position: relative; width: 100%; height: calc(var(--vh, 1vh) * 100); overflow: hidden;}
.video-wrap .main-video, .video-wrap .bg-video {position: absolute; top: 0; left: 50%; transform: translateX(-50%);	min-width: auto; min-height: auto; width: 100%; height: 100%; z-index: 1;}
.video-wrap .bg-video {z-index: 0; opacity: 0.3; min-width: 100%; min-height: 100%; width: auto; height: auto;}


/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {
.video-wrap {height: 100%;}
.video-wrap .main-video {position: static; display: block; transform: none;}
.video-wrap .bg-video {display: none;}
}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.video-wrap .main-video {object-fit: fill;}
}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {

}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {

}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {

}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.underline::after {height: 1px; bottom: -3px;}
}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:480px) {
.pc-layout {display: none !important;}
.mobile-layout {display: block !important;}
}


/* ============================================================================================================================== */
/* ======================================================= custom common 코드 ==================================================== */
/* ============================================================================================================================== */



/* ===================================================================================================================== */
/* ======================================================= sub1 코드 ==================================================== */
/* ===================================================================================================================== */

.about .basic-box h3 {margin-bottom: 10px; color: #00b3cd;}
.about .basic-box:not(:first-of-type) {padding-top: 40px; border-top: 1px solid #ccc;}

.map .root_daum_roughmap {width: 100%;}
.map .root_daum_roughmap .wrap_map {height: 500px;}
.map .root_daum_roughmap .wrap_controllers {display: none;}
.map .info {margin: 60px auto 0; font-family: 'NanumSquare',san-serif;}
.map .info .top {border-bottom: 1px solid #ccc; padding-bottom: 30px;}
.map .info .top h3 {white-space: pre-line; line-height: 1.3; font-weight: 300;}
.map .info .mid {padding: 30px 0 60px;}
.map .info .mid h6 {white-space: pre-line;}
.map .info .btm > ul {display: flex;}
.map .info .btm > ul > li {width: 50%;}
.map .info .btm > ul > li:first-child article {border-right: 1px solid #ccc;}
.map .info .btm > ul > li:last-child article {margin-left: 40px;}
.map .info .btm article {display: flex;}
.map .info .btm article > div:first-child {margin-right: 30px;}
.map .info .btm article > div:first-child h4 {font-weight: 700;}
.map .info .btm article > div:last-child {flex: 1;}
.map .info .btm article ul {display: flex; align-items: center; width: 100%; font-weight: 700;}
.map .info .btm article ul > li:last-child {width: 100%;}
.map .info .btm article ul > li:first-child {width: 160px; margin-right: 20px; text-align-last: justify;}
.map .info .btm > ul > li:last-child article > div:last-child {flex: none; display: inline-block; text-align: center;}
.map .info .btm > ul > li:last-child article > div:last-child h4 {display: inline-block; padding: 2px 32px; border-radius: 40px; border: 1px solid #ccc;}
.map .info .btm > ul > li:last-child article > div:last-child p {margin-top: 10px; font-weight: bold;}

.special-tit h3 {color: #00b3cd;}
.special-tit .bar {margin: 5px auto 10px; width: 1px; height: 50px; background: #c2c2c2;}

.info-special-area1 {color: #fff;}
.info-special-area1 .zoom {background: url(../img/custom/info_special_bg1.jpg) center/cover no-repeat;}
.info-special-area1 .middle-title h3 {position: relative;}
.info-special-area1 .middle-title h3::after {position: relative; content: ""; display: block; left: 50%; bottom: 0; transform: translate(-50%, 0); width: 100%; max-width: 800px; height: 3px; margin: 20px 0; background: linear-gradient(to right, transparent, #fff, transparent);}
.info-special-area1 .middle-title .img {margin-bottom: 15px;}

.info-special-area4 ul {display: flex; gap: 20px;}
.info-special-area4 ul > li {width: 25%; text-align: center;}
.info-special-area4 ul .txt p {margin-top: 20px; white-space: pre-line; line-height: 1.5;}

.info-special-area5 ul {display: flex; gap: 20px;}
.info-special-area5 ul > li {width: 33.33%; text-align: center;}
.info-special-area5 ul .txt h6 {margin-top: 15px; white-space: pre-line; font-family: 'NanumSquare',san-serif; font-weight: 500;}

.special01-area1.bg-gray {padding-top: 0;}
.special01-area1 .zoom {background: url(../img/custom/special01_bg1.jpg) center/cover no-repeat;}
.special01-area1 .middle-title h5 b {position: relative;}
.special01-area1 .middle-title h5 b::before {position: absolute; content: ''; left: 50%; top: -10px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #333;}
.special01-area1 ul.flex > li {width: 33.33%;}
.special01-area1 ul.flex > li > div {margin: 10px; text-align: center;}
.special01-area1 .txt {margin-top: 20px;}
.special01-area1 .txt h6 {padding: 8px; font-family: 'NanumSquare',san-serif; font-weight: 900; color: #fff; background: #333;}
.special01-area1 .txt p {display: flex; align-items: center; justify-content: center; height: 120px; font-weight: bold; background: #fff;}

.special01-area2.bg-gray {padding: 60px 0; margin-top: 240px; color: #fff; background: #10b7d0;}
.special01-area2 .tit {position: absolute; top: -190px;}
.special01-area2 .tit h2 {font-size: 80px; font-weight: bold; color: #eee;}
.special01-area2 .img {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.special01-area2 .img img {filter: drop-shadow(2px 4px 6px #727272);}

.special01-area3 .inner > ul {display: flex; justify-content: center; align-items: center; gap: 40px;}
.special01-area3 ul ul {display: flex; gap: 15px;}

.special01-area5 .img {transform: none; top: -100px;}

.special01-area6 > ul {display: flex; flex-wrap: wrap;}
.special01-area6 > ul > li {width: 50%;}
.special01-area6 > ul > li > div {padding: 80px 0; height: 100%;}
.special01-area6 .left {background: url(../img/custom/special01_bg2.jpg) center/cover no-repeat;}
.special01-area6 .left ul {display: flex; justify-content: center; gap: 15px;}
.special01-area6 .right {display: flex; align-items: center; justify-content: center; background: url(../img/custom/special01_bg3.jpg) center/cover no-repeat;}
.special01-area6 .right .middle-title {display: inline-block; color: #fff;}

.special02-area1.content {padding-top: 40px;}

.special02-area2 .zoom {background: url(../img/custom/special02_bg1.jpg) center/cover no-repeat;}
.special02-area2.bg-gray {padding: 60px 0;}
.special02-area2 ul {display: flex; align-items: center; justify-content: center;}
.special02-area2 ul .img {margin-right: 80px; filter: drop-shadow(2px 2px 12px #fff);}
.special02-area2 ul .txt {color: #fff;}
.special02-area2 ul .txt p {margin-top: 20px; white-space: pre-line;}

.special02-area3 ul.flex p {display: flex; align-items: center; justify-content: center; height: 80px; font-weight: 800; line-height: 1.5; color: #fff; background: #10b7d0;}
.special02-area3 ul.flex img {border: 1px solid #ccc; border-bottom: 0;}

.special02-area4.bg-gray {padding: 80px 0; background: #e6f2f4;}
.special02-area4 ul {display: flex; align-items: center; gap: 50px;}
.special02-area4 .txt {text-align: left;}
.special02-area4 .txt h6 {display: inline-block; padding: 2px 7px; background: #10b7d0; color: #fff;}
.special02-area4 .txt h3 {position: relative; padding-bottom: 20px;}
.special02-area4 .txt h3::before {position: absolute; content: ''; bottom: 0; left: 0; width: 60px; height: 3px; background: #10b7d0;}
.special02-area4 .img img {filter: drop-shadow(2px 4px 10px #929292);}

.special02-area5 .zoom {background: url(../img/custom/special02_bg2.jpg) center/cover no-repeat;}
.special02-area5 ul {display: flex; justify-content: center; gap: 30px;}
.special02-area5 ul > li {width: 33.33%;}
.special02-area5 .txt {padding: 5px 10px; text-align: center; background: #10b7d0; color: #fff;}
.special02-area5 .btm {padding: 30px 10px; border-left: 10px solid #cbcbcb; border-right: 10px solid #cbcbcb; background: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

.special02-area6 ul {display: flex; justify-content: space-between; gap: 20px;}
.special02-area6 ul > li > div {text-align: center;}
.special02-area6 .txt {margin-top: 20px;}
.special02-area6 .txt h6 {white-space: pre-line; font-family: 'NanumSquare',san-serif; font-weight: 900;}

.special02-area7.bg-gray {padding: 80px 0; background: #e6f2f4;}
.special02-area7 ul {display: flex; justify-content: center; gap: 30px;}
.special02-area7 ul > li {width: 20%;}
.special02-area7 ul > li > div {text-align: center;}
.special02-area7 .txt h6 {margin: 10px 0 5px; font-family: 'NanumSquare',san-serif; font-weight: 900;}

.special02-area8 ul {display: flex; justify-content: center; align-items: center; gap: 40px;}
.special02-area8 ul .middle-title {text-align: left;}

.special02-area9 ul {display: flex; justify-content: center; gap: 30px;}
.special02-area9 ul > li {width: 33.33%; text-align: center;}
.special02-area9 .txt .tit {padding: 5px 10px; background: #10b7d0; color: #fff;}
.special02-area9 .txt .sub {margin-top: 20px; white-space: pre-line;}

.special02-area10 ul {display: flex; justify-content: center; gap: 70px;}
.special02-area10 ul > li {width: 50%; text-align: center;}
.special02-area10 .txt .tit {padding: 5px 10px; background: #10b7d0; color: #fff;}
.special02-area10 ul > li:first-child .txt .tit {background: #b3b3b3;}
.special02-area10 .txt .sub {margin-top: 20px; white-space: pre-line;}

.special02-area11 .zoom {background: url(../img/custom/special02_bg3.jpg) center/cover no-repeat;}
.special02-area11 .circle-box > div > div {background: rgba(255,255,255,0.2) !important; border: 1px solid #aaa;}
.special02-area11 .circle-box p {bottom: 45%; color: #fff; font-weight: bold;}
.special02-area11 .circle-box p::before {position: absolute; content: attr(data-num); left: 50%; top: -50px; transform: translateX(-50%); font-size: 32px; color: #fff; font-weight: bold;}

.special02-area9 ul {display: flex; justify-content: center; gap: 30px;}
.special02-area9 ul > li {width: 33.33%; text-align: center;}
.special02-area9 .txt .tit {padding: 5px 10px; background: #10b7d0; color: #fff;}
.special02-area9 .txt .sub {margin-top: 20px; white-space: pre-line;}

.special03-area1 .zoom {background: url(../img/custom/special03_bg1.jpg) center/cover no-repeat;}
.special03-area1 ul {display: flex; justify-content: center; gap: 15px;}
.special03-area1 ul > li {width: 25%; text-align: center;}
.special03-area1 .txt .tit {padding: 5px 10px; background: #10b7d0; color: #fff;}
.special03-area1 .txt .sub {padding: 8px 10px; background: #f1f1f1;}

.special03-area2.bg-gray {background: #e6f2f4;}
.special03-area2 ul {display: flex; gap: 20px; flex-wrap: wrap;}
.special03-area2 ul > li {width: calc(33.33% - 14px); text-align: center;}
.special03-area2 .tit {padding: 8px 10px; background: #353535; color: #fff; font-family: 'NanumSquare',san-serif; font-weight: 900;}
.special03-area2 .txt {display: flex; align-items: center; justify-content: center; height: 130px; background: #01b3cd; color: #fff;}
.special03-area2 .txt p {white-space: pre-line;}

.special03-area3 ul {display: flex; align-items: stretch; justify-content: center; margin-top: 80px; gap: 40px;}
.special03-area3 ul > li {text-align: center;}
.special03-area3 ul > li:not(:nth-child(2)) {display: flex; flex-direction: column; justify-content: space-between; gap: 10px;}
.special03-area3 article .tit {width: 250px; padding: 8px 10px; background: #01b3cd; color: #fff; font-family: 'NanumSquare',san-serif; font-weight: 900;}
.special03-area3 article p {margin-top: 10px; white-space: pre-line;}

/*================================================================ 1920px 이상 ================================================================= */
@media screen and (min-width:1920px) {

}


/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.map .info .btm > ul {flex-direction: column;}
.map .info .btm > ul > li {width: 100%;}
.map .info .btm > ul > li:first-child article {border-right: 0; border-bottom: 1px solid #ccc; padding: 0 0 40px;}
.map .info .btm > ul > li:last-child article {margin: 40px 0 0;}

.special01-area6 > ul > li {width: 100%;}
.special01-area6 > ul > li > div {padding: 50px 0;}
}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {
.special01-area2 .tit {top: -180px;}
.special01-area2 .tit h2 {font-size: 72px;}
}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
.special02-area10 ul {gap: 30px;}
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.map .root_daum_roughmap .wrap_map {height: 400px;}
.map .info {margin: 40px auto 0;}
.map .info .mid {padding: 30px 0 40px;}
.map .info .btm > ul > li:first-child article {padding: 0 0 30px;}
.map .info .btm > ul > li:last-child article {margin: 30px 0 0;}
.map .info .btm article ul > li:first-child {width: 140px;}

.special-tit .bar {height: 30px; margin: 0 auto 5px;}

.info-special-area4 ul {flex-wrap: wrap; gap: 30px;}
.info-special-area4 ul > li {width: calc(50% - 15px);}

.special01-area2 .tit {top: -160px;}
.special01-area2 .tit h2 {font-size: 60px;}
.special01-area2 .img {position: static; transform: none; display: flex; justify-content: center; margin: 40px auto 0; padding: 30px; max-width: 400px; border-radius: 20px; background: #fff;}

.special01-area3 .inner > ul {flex-direction: column;}

.special02-area2 ul {flex-direction: column;}
.special02-area2 ul .img {margin: 0 0 40px 0;}

.special02-area3 ul.flex img {width: 100%;}

.special02-area4 ul {flex-direction: column; gap: 40px;}

.special02-area5 ul {flex-wrap: wrap; max-width: 350px; margin: 0 auto;}
.special02-area5 ul > li {width: 100%;}

.special02-area7 ul {flex-wrap: wrap;}
.special02-area7 ul > li {width: calc(33.33% - 20px);}

.special02-area8 ul {flex-direction: column; gap: 30px;}

.special03-area2 ul > li {width: calc(50% - 10px);}

.special03-area3 ul {flex-direction: column; margin-top: 40px;}
.special03-area3 ul > li:not(:nth-child(2)) {flex-direction: row;}
.special03-area3 article .tit {width: 200px;}
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.special01-area1 ul.flex {max-width: 400px; margin: 0 auto;}
.special01-area1 ul.flex > li {width: 100%;}
.special01-area1 .txt {border: 1px solid #333;}
}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:480px) {
.about .basic-box:not(:first-of-type) {padding-top: 30px; margin-top: 20px;}

.map .root_daum_roughmap .wrap_map {height: 300px;}
.map .info .btm article {flex-direction: column;}
.map .info .btm article > div:first-child {margin: 0 0 10px;}
.map .info .btm > ul > li:last-child article > div:first-child {display: none;}

.info-special-area1 .middle-title h3::after {margin: 15px 0;}
.info-special-area1 .middle-title img {max-width: 40px;}

.special01-area1 .img img {max-width: 250px;}
.special01-area1 .txt p {height: 80px;}

.special01-area2.bg-gray {padding: 40px 0; margin-top: 150px;}
.special01-area2 .tit {top: -130px;}
.special01-area2 .tit h2 {font-size: 52px;}
.special01-area2 .img img {max-width: 160px;}

.special01-area3 .inner > ul {gap: 20px;}

.special01-area5 .img img {max-width: 100%;}

.special02-area1.content {padding-top: 20px;}

.special02-area2 ul .img {margin: 0 0 20px 0;}

.special02-area3 ul.flex p {height: 65px;}

.special02-area4.bg-gray {padding: 50px 0;}
.special02-area4 ul {gap: 30px;}
.special02-area4 .txt h3 {padding-bottom: 10px;}
.special02-area4 .txt h3::before {height: 2px; width: 50px;}

.special02-area7.bg-gray {padding: 60px 0;}
.special02-area7 ul {gap: 20px;}
.special02-area7 ul > li {width: calc(33.33% - 14px);}

.special02-area9 ul {flex-direction: column;}
.special02-area9 ul > li {width: 100%; max-width: 280px; margin: 0 auto;}
.special02-area9 .txt .sub {margin-top: 10px;}

.special02-area10 ul {flex-direction: column;}
.special02-area10 ul > li {width: 100%; max-width: 280px; margin: 0 auto;}
.special02-area10 .txt .sub {margin-top: 10px;}

.special02-area11 .circle-box p {bottom: 40%;}

.special03-area1 ul {flex-wrap: wrap; }
.special03-area1 ul > li {width: calc(50% - 8px);}

.special03-area2 ul {gap: 10px;}
.special03-area2 .txt {height: 110px;}

.special03-area3 ul {gap: 20px;}
.special03-area3 article .tit {width: 180px;}
.special03-area3 .img img {max-width: 250px;}
}

/*================================================================ 380px 이하 ================================================================= */
@media screen and (max-width:380px) {
.info-special-area5 ul {flex-wrap: wrap;}
.info-special-area5 ul > li {width: 100%;}

.special03-area3 article .tit {width: 150px;}
}


/* ===================================================================================================================== */
/* ======================================================= sub1 코드 ==================================================== */
/* ===================================================================================================================== */