/* ============================================================================================================================== */
/* ======================================================= 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: #42b1a6; /* 배경 색상 */ 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; display: none;}
.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;}

.main-tit {text-align: center; margin-bottom: 40px;}
.main-tit.white > * {color: #fff;}
.main-tit p.sub {margin-bottom: 20px; letter-spacing: 0.3em; color: #c7c7c7; font-weight: 900;}
.main-tit p.txt	{margin-top: 20px; white-space: pre-line;}
.main-tit p.txt span {font-size: 1.1em;}
.main-tit h6 {font-family: 'NanumSquare',san-serif; font-weight: bold;}
.main-tit h5 {display: inline-block; margin: 10px 0 0; padding: 3px 10px; font-family: 'NanumSquare',san-serif; font-weight: 900;}
.main-tit h4 {font-family: 'NanumSquare',san-serif; font-weight: 900;}
.main-tit h3 {white-space: pre-line; line-height: 1.4; font-family: 'NanumSquare',san-serif; font-weight: 900;}
.main-tit .num::before {margin: 0 auto 15px; width: 60px; height: 60px; font-size: 30px; font-weight: bold; background: #42b1a6;}

.gnb-wrap {position: fixed !important;background: #44474e;padding: 0 !important; bottom: 0; width: 100%; z-index: 999;}
.gnb-wrap ul {display: flex; max-width: 1300px; margin: 0 auto; flex-wrap: wrap;}
.gnb-wrap ul > li {width: 16.66%;}
.gnb-wrap ul > li:hover a {background: #42b1a6;}
.gnb-wrap ul a {display: flex; align-items: center; justify-content: center; height: 55px; gap: 10px;}
.gnb-wrap ul a .img {display: flex;}
.gnb-wrap ul a p {color: #fff; font-weight: 900;}

.main-area2 article {border: 1px solid #e5e5e5;}
.main-area2 article ul.tab {display: flex; justify-content: center; width: 100%; flex-wrap: wrap; border-bottom: 1px solid #e5e5e5;}
.main-area2 article ul.tab > li {width: 16.666%; padding: 15px 10px; text-align: center; cursor: pointer;}
.main-area2 article ul.tab > li:not(:first-child) {border-left: 1px solid #e5e5e5;}
.main-area2 article ul.tab > li:hover {background: #eee;}
.main-area2 article ul.tab > li.on {color: #fff; background: #42b1a6 !important;}
.main-area2 article ul.tab > li p {font-weight: bold;}
.main-area2 article ul.box {background: #f9f9f9;}
.main-area2 article ul.box > li {position: absolute; opacity: 0; align-items: center; gap: 50px;}
.main-area2 article ul.box > li.on {position: relative; display: flex; opacity: 1; transition: opacity 0.3s ease-in;}
.main-area2 article ul.box > li > div {width: 50%;}
.main-area2 article ul.box h3 {position: relative; padding-left: 30px; font-family: 'NanumSquare',san-serif; font-weight: 800; color: #42b1a6;}
.main-area2 article ul.box h3::before {position: absolute; content: ''; left: 0; top: 48%; transform: translateY(-50%); width: 8px; height: 35px; background: #42b1a6;}
.main-area2 article ul.box p {margin-top: 30px; white-space: pre-line;}

.main-area3 .info-wrap > ul.flex {flex-wrap: nowrap; gap: 40px;}
.main-area3 .info-wrap > ul.flex > li > div {display: flex; flex-direction: column; gap: 25px;}
.main-area3 .info-wrap .tit h4 {font-family: 'NanumSquare',san-serif; font-weight: 800;}
.main-area3 .info-wrap article {display: flex; justify-content: center; flex-direction: column;}
.main-area3 .map-wrap .root_daum_roughmap {width: 100% !important;}
.main-area3 .map-wrap .root_daum_roughmap .wrap_controllers {display: none;}
.main-area3 .time {display:flex; flex-direction: column;}
.main-area3 .time > li:not(:first-child) {margin-top: 10px;}
.main-area3 .time > li > ul {display:flex; /* align-items:center; */ display: inline-flex; margin-bottom: 3px; padding: 2px 10px; text-align: left;}
.main-area3 .time > li:nth-child(2) > ul {position: relative; background: #42b1a6; color: #fff;}
.main-area3 .time > li:nth-child(2) > ul > li h6 {color: #fff;}
.main-area3 .time > li > ul > li:first-child {margin-right: 40px; width: 112px; text-align-last: justify; text-align: center; position: relative;}
.main-area3 .time > li > ul > li .night-icon {position: absolute; left: -30px; top: 50%; transform:translateY(-50%) rotate(-45deg);}
.main-area3 .time > li > ul > li h6 {color: #555; font-family: 'NanumSquare',san-serif; font-weight: 800; transform: skew(-0.1deg);}
.main-area3 .time > li > ul > li:last-child h6 {font-weight: 500;}
.main-area3 .notice p {font-weight: 700; color: #5d5d5d;}
.main-area3 .address ul {display: flex;}
.main-area3 .address ul > li p {font-weight: 700;}
.main-area3 .address ul > li:first-child {margin-right: 30px;}
.main-area3 .address ul > li:first-child p {padding: 5px 10px; width: 110px; border-radius: 40px; text-align: center; color: #fff; background: #42b1a6;}
.main-area3 .address ul > li:last-child {position: relative; display: flex; align-items: center;}
.main-area3 .address ul > li:last-child p {text-align: left;}
.main-area3 .call a {display: flex; align-items: center; gap: 20px;}
.main-area3 .call a h2 {font-weight: bold; font-family: "Noto Sans KR", sans-serif;}

.before-after-slide .slide-wrap {position: relative; max-width: 800px; margin: 0 auto;}
.before-after-slide .swiper-container {margin-top: 40px;}
.before-after-slide .swiper-wrapper {transition-timing-function: ease-out-cubic;}
.before-after-slide .swiper-slide {text-align: center; padding: 0 10px; overflow: hidden;}
.before-after-slide .swiper-button-prev,
.before-after-slide .swiper-button-next {top: 50%; transform: translateY(-50%); margin-top: 0; color: #333;}
.before-after-slide .swiper-button-prev::after,
.before-after-slide .swiper-button-next::after {font-size: 20px; z-index: 10;}
.before-after-slide .swiper-button-next {right: -50px;}
.before-after-slide .swiper-button-prev {left: -50px;}
.before-after-slide .swiper-button-prev::before,
.before-after-slide .swiper-button-next::before {position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 1px solid #333; background: #fff;}

.pc-tab-menu {position: relative;}
.pc-tab-menu::before {position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 1px; background: #e5e5e5;}
.pc-tab-menu ul {display: flex; border-right: 1px solid #e5e5e5;}
.pc-tab-menu ul > li {position: relative; flex: 1; text-align: center; border-left: 1px solid #e5e5e5; cursor: pointer;}
.pc-tab-menu ul > li.on::before,
.pc-tab-menu ul > li:hover::before {position: absolute; content: ''; left: 0; bottom: 0px; width: 100%; height: 3px; background: #42b1a6;}
.pc-tab-menu ul > li a {display: inline-block; padding: 12px 10px; font-size: 20px; font-weight: 500;}
.pc-tab-menu ul > li.on a,
.pc-tab-menu ul > li:hover a {color: #42b1a6; font-weight: 900;}


/*================================================================ 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;}

.main-area2 article ul.tab > li {width: 33.33%;}
.main-area2 article ul.tab > li:nth-child(4) {border-left: 0;}
.main-area2 article ul.tab > li:nth-child(n+4):nth-child(-n+6) {border-top: 1px solid #e5e5e5;}

.before-after-slide .slide-wrap {padding: 0 40px;}
.before-after-slide .swiper-button-next {right: 0;}
.before-after-slide .swiper-button-prev {left: 0;}
}

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

}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
.main-area3 .info-wrap > ul.flex {flex-wrap: wrap;}
.main-area3 .info-wrap > ul.flex > li {width: 100%;}
.main-area3 .info-wrap > ul.flex > li > div {text-align: center;}
.main-area3 .address {padding: 40px 0; max-width: 450px; margin: 0 auto;}
.main-area3 .call a {justify-content: center;}
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.main-tit .num::before {width: 50px; height: 50px; font-size: 26px;}

.gnb-wrap ul > li {width: 33.33%;}

.main-area2 article {max-width: 600px; margin: 0 auto;}
.main-area2 article ul.tab > li {width: 50%;}
.main-area2 article ul.tab > li:nth-child(3),
.main-area2 article ul.tab > li:nth-child(5) {border-left: 0;}
.main-area2 article ul.tab > li:nth-child(4) {border-left: 1px solid #e5e5e5;}
.main-area2 article ul.tab > li:nth-child(n+3):nth-child(-n+6) {border-top: 1px solid #e5e5e5;}
.main-area2 article ul.box > li {gap: 30px}
.main-area2 article ul.box > li.on {flex-direction: column; max-width: 600px; margin: 0 auto;}
.main-area2 article ul.box > li > div {width: 100%;}
.main-area2 article ul.box .txt {padding: 0 20px 40px;}
.main-area2 article ul.box p {margin-top: 20px;}

.before-after-slide .slide-wrap {padding: 0;}
.before-after-slide .swiper-button-prev,
.before-after-slide .swiper-button-next {top: auto; transform: none; bottom: -55px; width: calc(50% - 20px);}
.before-after-slide .swiper-button-next {right: 10px;}
.before-after-slide .swiper-button-prev {left: 10px;}
.before-after-slide .swiper-button-prev::before,
.before-after-slide .swiper-button-next::before {width: 100%;}
}

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

.main-tit {margin-bottom: 30px;}
.main-tit p.sub {letter-spacing: 0.3em;}
}

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

.main-tit {margin-bottom: 20px;}
.main-tit p.sub {margin-bottom: 10px;}
.main-tit p.txt {margin-top: 10px;}
.main-tit h5 {margin: 5px 0 0;}
.main-tit .num::before {font-size: 22px;}

.main-area2 article ul.tab > li {padding: 10px;}
.main-area2 article ul.box > li {gap: 20px;}
.main-area2 article ul.box .txt {padding: 10px 10px 40px;}
.main-area2 article ul.box h3 {padding-left: 20px;}

.main-area3 .info-wrap > ul.flex {gap: 20px;}
.main-area3 .map-wrap .root_daum_roughmap .wrap_map {height: 250px !important;}
.main-area3 .time > li > ul > li:first-child {margin-right: 20px; width: 80px;}
.main-area3 .time > li:nth-child(2) > ul::before {left: -35px; width: 25px; height: 25.5px;}
.main-area3 .time > li:nth-child(2) > ul::after {right: -30px; width: 22px; height: 27px;}
.main-area3 .address {padding: 0 0 25px; max-width: 320px;}
.main-area3 .address ul > li:first-child {margin-right: 15px;}
.main-area3 .address ul > li:first-child p {padding: 3px 10px; width: 80px;}
.main-area3 .address ul > li:last-child {top: 5px;}
.main-area3 .address ul > li p {font-size: 12px;}

.before-after-slide .swiper-container {margin-top: 20px;}
.before-after-slide .swiper-button-prev,
.before-after-slide .swiper-button-next {bottom: -45px; width: calc(50% - 15px);}
.before-after-slide .swiper-button-prev::after,
.before-after-slide .swiper-button-next::after {font-size: 15px;}
.before-after-slide .swiper-button-prev::before,
.before-after-slide .swiper-button-next::before {height: 30px;}
}

/* ===================== Mobile size : 380px ======================= */

@media screen and (max-width: 380px){
.main-tit p.sub {letter-spacing: 0.1em;}
}


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



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

.about-area1 article {position: relative; display: flex; align-items: center; padding: 30px; margin: 80px 0 0; width: 100%; height: 500px; background: url(../img/custom/about_01.jpg) center/cover no-repeat; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}
.about-area1 article::before {position: absolute; content: ''; left: -80px; top: -70px; width: 220px; height: 150px; z-index: -1; border: 15px solid #42b1a6;}
.about-area1 article .main-tit {max-width: 1000px; width: 100%; margin: 0 auto; text-align: left;}

.about-area2 article ul {display: flex;}
.about-area2 article ul > li {position: relative; width: 200px; height: 600px; flex-grow: 0; transition: flex-grow 0.3s ease-in, width 0.3s ease-in; cursor: pointer;}
.about-area2 article ul > li.on {flex-grow: 1;}
.about-area2 article ul > li .img {width: 100%; height: 100%; filter: brightness(0.15); transition: filter 0.3s ease-in, background-position-x 0.3s ease-in;}
.about-area2 article ul > li.on .img {filter: brightness(1); background-position-x: center !important; background-size: cover !important;}
.about-area2 article ul > li:nth-child(1) .img {background: url(../img/custom/about_02.jpg) no-repeat;}
.about-area2 article ul > li:nth-child(2) .img {background: url(../img/custom/about_03.jpg) center/cover no-repeat; background-position-x: -500px;}
.about-area2 article ul > li:nth-child(3) .img {background: url(../img/custom/about_04.jpg) no-repeat; background-position-x: -600px;}
.about-area2 article ul > li:hover .img{opacity: 0.7;}

.about-area2 article ul > li .txt {position: absolute; top: 50%; transform: translateY(-50%); font-family: 'NanumSquare',san-serif; opacity: 0; transition: opacity 0.3s ease-in;}
.about-area2 article ul > li.on .txt {opacity: 1;}
.about-area2 article ul > li .txt h5 {font-weight: 900;}
.about-area2 article ul > li .txt h3 {position: relative; padding-top: 20px; margin: 15px 0; font-weight: 900;}
.about-area2 article ul > li .txt h3::before {position: absolute; content: ''; top: 0; left: 0; width: 30px; height: 4px; background: #333;}
.about-area2 article ul > li .txt p {white-space: pre-line;}
.about-area2 article ul > li:nth-child(1) .txt {right: 150px;}
.about-area2 article ul > li:nth-child(2) .txt {left: 100px;}
.about-area2 article ul > li:nth-child(3) .txt {left: 100px;}

.about-area2 article ul > li .bg {position: absolute; top: 50px; left: 50%; transform: translateX(-50%); transition: opacity 0.3s ease-in;}
.about-area2 article ul > li.on .bg {opacity: 0;}
.about-area2 article ul > li .bg h3 {color: #fff; font-weight: bold; font-family: "Noto Sans KR", sans-serif; writing-mode: vertical-rl; letter-spacing: 0.1em;}

.thesis-area1 .zoom {background: url(../img/custom/thesis_bg1.jpg) center/cover no-repeat;}
.thesis-area1 ul {display: flex; flex-wrap: wrap; gap: 20px;}
.thesis-area1 ul > li {width: calc(33.33% - 14px);}

.map-area1 .root_daum_roughmap {width: 100% !important;}
.map-area1 .root_daum_roughmap .wrap_map {height: 400px !important;}
.map-area1 .root_daum_roughmap .wrap_controllers {display: none;}
.map-area1 article {position: relative;}
.map-area1 article .info {position: absolute; top: 50%; transform: translateY(-50%); right: 30px; display: flex; align-items: center; justify-content: center; width: 500px; height: 350px; border: 1px solid #8a8a8a; background: #fff; z-index: 10;}
.map-area1 article .info ul {display: flex; flex-direction: column; gap: 15px;}
.map-area1 article .info ul > li p {white-space: pre-line; font-weight: bold;}
.map-area1 article .info ul > li p:first-child {padding: 5px 10px; margin-bottom: 10px; width: 110px; border-radius: 40px; text-align: center; color: #fff; background: #42b1a6;}
.map-area1 article .info ul > li:last-child {display: flex; align-items: center; gap: 10px;}


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

}


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

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.map-area1 article .info{position: inherit;transform:none;width: 100%;right: auto;padding: 20px;}
}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {
.about-area2 article ul > li:nth-child(1) .txt {right: 50px;}
.about-area2 article ul > li:nth-child(2) .txt {left: 50px;}
.about-area2 article ul > li:nth-child(3) .txt {left: 50px;}
}

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

}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.about-area1 article::before {display: none;}
.about-area1 article {background: #fff;padding: 40px 20px; height: auto;margin:0;}
.about-area1 article .main-tit {filter: drop-shadow(2px 4px 6px #fff);}

.about-area2 article ul {flex-direction: column;}
.about-area2 article ul > li {height: 150px; width: 100%; transition: height 0.3s ease-in;}
.about-area2 article ul > li.on {height: 500px;}
.about-area2 article ul > li .img {background-position-x: center !important; background-size: cover !important;}
.about-area2 article ul > li .bg {width: 100%; text-align: center;}
.about-area2 article ul > li .bg h3 {writing-mode: initial;}

.thesis-area1 ul {gap: 10px;}
.thesis-area1 ul > li {width: calc(33.33% - 7px);}
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.about-area2 article ul > li.on {height: 400px;}

.map-area1 .root_daum_roughmap .wrap_map {height: 300px !important;}
}

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


.about-area2 article ul > li {height: 120px;}
.about-area2 article ul > li.on {height: 350px;}
.about-area2 article ul > li .txt h3 {padding-top: 15px; margin: 10px 0 5px;}
.about-area2 article ul > li:nth-child(1) .txt {right: 20px;}
.about-area2 article ul > li:nth-child(2) .txt {left: 20px;}
.about-area2 article ul > li:nth-child(3) .txt {left: 20px;}

.thesis-area1 ul {gap: 10px;}
.thesis-area1 ul > li {width: calc(50% - 5px);}
}

/*================================================================ 380px 이하 ================================================================= */
@media screen and (max-width:380px) {
.about-area1 article {background-position-x: -565px;}
}


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



/* ===================================================================================================================== */
/* ======================================================= sub2 코드 ==================================================== */
/* ===================================================================================================================== */

.sub21-area1 .zoom {background: url(../img/custom/sub21_bg1.jpg) center/cover no-repeat;}
.sub21-area1 ul {display: flex; align-items: center; gap: 30px; border-radius: 30px 0 30px 0; background: #f9f9f9; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.sub21-area1 ul > li {width: 50%;}
.sub21-area1 ul .img {text-align: center;}
.sub21-area1 ul .txt p.sub {letter-spacing: 0.1em; color: #42b1a6;}
.sub21-area1 ul .txt h5 {margin: 20px 0; font-family: 'NanumSquare',san-serif; font-weight: bold;}
.sub21-area1 ul .txt p {white-space: pre-line;}
.sub21-area2 article ul {display: flex; align-items: center; justify-content: space-between; gap: 30px;}
.sub21-area2 article ul:not(:first-child) {margin-top: 30px; padding-top: 30px; border-top: 2px dotted #a1a1a1;}
.sub21-area2 article .img {border: 1px solid #ccc;}
.sub21-area2 article .txt h5 {position: relative; padding-left: 50px; font-family: 'NanumSquare',san-serif; font-weight: 900;}
.sub21-area2 article .txt h5::before {position: absolute; content: attr(data-num); left: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #42b1a6; color: #fff; font-size: 20px; font-weight: 500; text-align: center;}
.sub21-area2 article .txt p {margin-top: 20px; white-space: pre-line;}

.sub22-area2 .zoom {background: url(../img/custom/sub22_bg1.jpg) center/cover no-repeat;}
.sub22-area2 .txt h3 {font-family: 'NanumSquare',san-serif;}
.sub22-area2 .txt p {position: relative; margin-top: 30px; padding-left: 50px; white-space: pre-line;}
.sub22-area2 .txt p::before {position: absolute; content: attr(data-num); left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #fff; border-radius: 50%; font-size: 18px; font-weight: bold; text-align: center;}
.sub22-area3 ul {display: flex; justify-content: center; gap: 40px;}
.sub22-area3 ul p {margin-top: 30px; font-weight: 900; text-align: center;}
.sub22-area4 .zoom {background: url(../img/custom/sub22_bg2.jpg) center/cover no-repeat;}
.sub22-area4 ul {display: flex; flex-direction: column; gap: 15px;}
.sub22-area4 ul > li {width: 100%; border: 1px solid #fff; padding: 20px; background: rgba(0, 0, 0, 0.3);}
.sub22-area4 ul > li p {position: relative; padding-left: 35px; color: #fff;}
.sub22-area4 ul > li p::before {position: absolute; content: ''; left: 0; top: 3px; width: 23px; height: 23px; background: url(../img/custom/sub22_05.png) center/cover no-repeat;}
.sub22-area4 ul > li p b {color: #69e3d9;}

.sub23-area1 ul {display: flex; justify-content: center; gap: 10px;}
.sub23-area1 ul .txt p {white-space: pre-line; text-align: center;}
.sub23-area1 ul .txt p.tit {margin: 20px 0 10px;}
.sub23-area2 .zoom {background: url(../img/custom/sub23_bg1.jpg) center/cover no-repeat;}
.sub23-area2 .mid-tit {max-width: 600px; margin: 20px auto; padding: 14px 10px; border-radius: 40px; text-align: center; background: #333;}
.sub23-area2 .mid-tit h5 {color: #fff; font-weight: bold;}
.sub23-area2 .slide-wrap {position: relative; max-width: 800px; margin: 0 auto;}
.sub23-area2 .swiper-container {margin-top: 40px;}
.sub23-area2 .swiper-wrapper {transition-timing-function: ease-out-cubic;}
.sub23-area2 .swiper-slide {text-align: center; padding: 0 10px; overflow: hidden;}
.sub23-area2 .swiper-button-prev,
.sub23-area2 .swiper-button-next {top: 50%; transform: translateY(-50%); margin-top: 0; color: #333;}
.sub23-area2 .swiper-button-prev::after,
.sub23-area2 .swiper-button-next::after {font-size: 20px; z-index: 10;}
.sub23-area2 .swiper-button-next {right: -50px;}
.sub23-area2 .swiper-button-prev {left: -50px;}
.sub23-area2 .swiper-button-prev::before,
.sub23-area2 .swiper-button-next::before {position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 1px solid #333; background: #fff;}


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

}


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

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.sub23-area2 .slide-wrap {padding: 0 40px;}
.sub23-area2 .swiper-button-next {right: 0;}
.sub23-area2 .swiper-button-prev {left: 0;}
}

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

}

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

}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.sub21-area1 ul {flex-direction: column; padding: 0 0 40px; max-width: 500px; margin: 0 auto;}
.sub21-area1 ul > li {width: 100%;}
.sub21-area1 ul .txt {text-align: center;}
.sub21-area1 ul .txt h5 {margin: 10px 0 15px;}
.sub21-area2 article ul {flex-direction: column-reverse; gap: 20px;}
.sub21-area2 article ul > li {max-width: 380px; margin: 0 auto; width: 100%;}

.sub22-area2.bg-gray {padding-bottom: 0;}
.sub22-area2 .zoom {background: #dee2e3 url(../img/custom/sub22_bg1m.jpg) bottom / 45% no-repeat;}
.sub22-area2 ul {display: flex; flex-direction: column; align-items: center;}
.sub22-area2 ul > li {height: 300px;}
.sub22-area2 .txt h3 {text-align: center;}

.sub23-area2 .slide-wrap {padding: 0;}
.sub23-area2 .swiper-button-prev,
.sub23-area2 .swiper-button-next {top: auto; transform: none; bottom: -55px; width: calc(50% - 20px);}
.sub23-area2 .swiper-button-next {right: 10px;}
.sub23-area2 .swiper-button-prev {left: 10px;}
.sub23-area2 .swiper-button-prev::before,
.sub23-area2 .swiper-button-next::before {width: 100%;}


}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.sub21-area2 .btm h5 {font-size: 20px;}
.sub22-area2 ul > li {height: 260px;}
}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:480px) {
.sub22-area2 ul > li {height: 230px;}
.sub22-area3 ul {flex-direction: column; gap: 15px;}
.sub22-area3 ul p {margin-top: 10px;}
.sub22-area4 ul > li p {padding-left: 25px;}
.sub22-area4 ul > li p::before {width: 18px; height: 18px;}

.sub23-area1 ul {flex-direction: column; gap: 40px;}
.sub23-area1 ul .txt p.tit {margin: 10px 0;}
.sub23-area2 .mid-tit {padding: 12px 10px; border-radius: 10px;}
.sub23-area2 .swiper-button-prev,
.sub23-area2 .swiper-button-next {bottom: -45px; width: calc(50% - 15px);}
.sub23-area2 .swiper-button-prev::after,
.sub23-area2 .swiper-button-next::after {font-size: 15px;}
.sub23-area2 .swiper-button-prev::before,
.sub23-area2 .swiper-button-next::before {height: 30px;}
}

/*================================================================ 380px 이하 ================================================================= */
@media screen and (max-width:380px) {
.sub22-area2.bg-gray {padding-top: 40px;}
.sub22-area2 ul > li {height: 220px;}
.sub22-area2 .txt p {margin-top: 20px; padding-left: 35px;}
.sub22-area2 .txt p::before {width: 30px; height: 30px; font-size: 14px;}
}


/* ===================================================================================================================== */
/* ======================================================= sub2 코드 ==================================================== */
/* ===================================================================================================================== */



/* ===================================================================================================================== */
/* ======================================================= sub3 코드 ==================================================== */
/* ===================================================================================================================== */

.sub31-area1 {color: #fff;}
.sub31-area1 .zoom {background: url(../img/custom/sub31_bg1.jpg) center/cover no-repeat;}
.sub31-area1 .middle-title h3 {font-style: italic;}
.sub31-area1 .middle-title h4 {color: #8dfff3;}
.sub31-area2 article {display: flex; justify-content: center;}
.sub31-area2 ul {display: flex; justify-content: center; gap: 10px; margin-top: 40px;}
.sub31-area2 ul p {margin-top: 15px; text-align: center;}
.sub31-area3 .zoom {background: url(../img/custom/sub31_bg2.jpg) center/cover no-repeat;}
.sub31-area3 .inner {display: flex; flex-direction: column; align-items: flex-end;}
.sub31-area3 article {max-width: 1100px; width: 100%;}
.sub31-area3 article .main-tit {text-align: left;}
.sub31-area3 article ul {display: flex; margin-top: 40px; gap: 30px;}
.sub31-area3 article ul h5 {width: 240px; font-family: 'NanumSquare',san-serif; font-weight: 800;}
.sub31-area3 article ul p {white-space: pre-line;}

.sub32-area1 .zoom {background: url(../img/custom/sub32_bg1.jpg) center/cover no-repeat;}
.sub32-area2 ul {display: flex; justify-content: center; gap: 10px;}
.sub32-area2 ul > li {text-align: center;}
.sub32-area2 ul p {margin-top: 15px;}
.sub32-area3.bg-gray {background: #ededed;}
.sub32-area3 ul {display: flex; flex-wrap: wrap; justify-content: center; max-width: 800px; margin: 80px auto 0; gap: 20px;}
.sub32-area3 ul > li {width: calc(50% - 10px);}
.sub32-area3 ul > li:nth-child(n+3):nth-child(-n+10) {margin-top: 50px;}
.sub32-area3 ul .txt {position: relative; display: flex; align-items: center; justify-content: center; max-width: 380px; width: 100%; height: 230px; background: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.sub32-area3 ul .txt::before {position: absolute; left: 50%; top: -25px; transform: translateX(-50%); content: attr(data-num); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; background: #42b1a6; color: #fff; font-size: 20px; font-weight: 500; text-align: center;}
.sub32-area3 ul .txt p {white-space: pre-line; text-align: center;} 

.sub33-area1 .zoom {background: url(../img/custom/sub33_bg1.jpg) center/cover no-repeat;}
.sub33-area2 ul {display: flex; justify-content: center; gap: 40px;}
.sub33-area2 ul > li {width: 50%; text-align: center;}
.sub33-area2 ul .tit {display: inline-block; width: 220px; padding: 10px 5px; border-radius: 40px; text-align: center; background: #333; color: #fff; font-family: 'NanumSquare',san-serif; font-weight: 800;}
.sub33-area2 ul .img {margin: 20px 0;}
.sub33-area2 ul p {white-space: pre-line; text-align: left;}
.sub33-area3 .img {margin: 60px 0 40px; text-align: center;}
.sub33-area3 article {position: relative; padding: 60px 15px; max-width: 1100px; width: 100%; margin: 0 auto; border-radius: 20px; background: #ededed;}
.sub33-area3 article::before {position: absolute; content: ''; right: 100px; bottom: 0; aspect-ratio: 581/146; width: 400px; background: url(../img/custom/sub33_05.png) center/cover no-repeat;}
.sub33-area3 article .middle-title {position: relative; z-index: 1;}

.sub34-area1 .zoom {background: url(../img/custom/sub34_bg1.jpg) center/cover no-repeat;}


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

}


/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {
.sub31-area3 .inner{width:50%;}
}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.sub31-area3 .inner{width:60%;}
}

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

}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
.sub33-area3 article::before {right: 0;}
.sub31-area3 .inner{width:80%;}
}


/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.sub31-area1 .middle-title:last-child {background: rgba(0, 0, 0, 0.5); padding: 20px 5px; border-radius: 10px;}


.sub32-area2 ul { flex-wrap: wrap; max-width: 600px; margin: 0 auto;}
.sub32-area2 ul > li {width: calc(50% - 5px);}

.sub33-area2 ul {display: block;}
.sub33-area2 ul li{width: 100%;}
.sub33-area2 ul li:last-child{margin-top: 30px;}
.sub33-area2 ul li br{display: none;}

.sub33-area3 article {padding: 60px 15px 100px;}
.sub33-area3 article::before {width: 300px;}

.sub33-area4 {margin-top: 100px;}

}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {
.sub33-area4 {margin-top: 80px;}
.sub31-area3 article ul {flex-direction: column; gap: 15px; margin-top: 20px;}

}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:480px) {
.sub31-area2 article .num-list .num {display: block;}
.sub31-area2 ul {flex-direction: column; max-width: 260px; margin: 30px auto 0; gap: 20px;}
.sub31-area2 ul p {margin-top: 10px;}
.sub31-area3.bg-gray {padding-bottom: 400px;}
.sub31-area3 .zoom {background: url(../img/custom/sub31_bg2m.jpg) center/cover no-repeat;}

.sub32-area2 ul p {margin-top: 10px;}
.sub32-area3 ul {margin: 50px auto 0;}
.sub32-area3 ul > li:nth-child(n+3):nth-child(-n+10) {margin-top: 30px;}
.sub32-area3 ul .txt {height: 190px;}

.sub33-area4 {margin-top: 40px;}
.sub33-area3 article {padding: 30px 10px 80px;}
.sub33-area3 article::before {width: 250px; bottom: 10px;}
}

/*================================================================ 380px 이하 ================================================================= */
@media screen and (max-width:380px) {
.sub31-area3.bg-gray {padding-bottom: 350px;}
}


/* ===================================================================================================================== */
/* ======================================================= sub3 코드 ==================================================== */
/* ===================================================================================================================== */




/* ===================================================================================================================== */
/* ======================================================= sub4 코드 ==================================================== */
/* ===================================================================================================================== */

.sub41-area1 .zoom {background: url(../img/custom/sub41_bg1.jpg) center/cover no-repeat;}
.sub41-area2 .zoom {background: url(../img/custom/sub41_bg2.jpg) center/cover no-repeat;}
.sub41-area2 ul {max-width: 1000px; margin: 0 auto;}
.sub41-area3 ul {display: flex; gap: 40px;background: #f9f9f9;}
.sub41-area3 ul > li {width: 50%; overflow: hidden;}
.sub41-area3 ul > li > .img {width: 100%; height: 570px; background: url(../img/custom/sub41_02.jpg) center/cover no-repeat;}
.sub41-area3 ul > li > .txt {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.sub41-area3 ul > li > .txt .main-tit {text-align: left; margin: 0;}
.sub41-area3 ul > li > .txt .main-tit a {display: inline-block; margin-top: 40px; width: 200px; padding: 10px; text-align: center; border: 1px solid #333; font-weight: 900;}

.sub42-area1 .zoom {background: url(../img/custom/sub42_bg1.jpg) center/cover no-repeat;}
.sub42-area2 ul {display: flex; align-items: center; justify-content: center; gap: 40px;}
.sub42-area2 ul .txt {display: flex; flex-direction: column; gap: 30px;}
.sub42-area2 ul .txt article h5 {font-family: 'NanumSquare',san-serif; font-weight: 800;}
.sub42-area2 ul .txt article p {margin: 10px 0 0 35px; white-space: pre-line;}
.sub42-area2 ul .txt .point {padding: 5px 20px;}
.sub42-area3 ul {max-width: 1100px;}
.sub42-area3 ul > li {width: calc(33.33% - 14px);}
.sub42-area3 ul > li:nth-child(3) {margin-top: 0 !important;}

.sub43-area1 .zoom {background: url(../img/custom/sub43_bg1.jpg) center/cover no-repeat;}
.sub43-area2 .zoom {background: url(../img/custom/sub43_bg2.jpg) center/cover no-repeat;}
.sub43-area2 article {display: flex; flex-direction: column; align-items: center; gap: 30px;}
.sub43-area2 article .tit {display: inline-block; width: 220px; padding: 10px 5px; border-radius: 40px; text-align: center; background: #333; color: #fff; font-family: 'NanumSquare',san-serif; font-weight: 800;}
.sub43-area2 ul {display: flex; align-items: center; gap: 40px; max-width: 1000px; margin: 60px auto 0;}
.sub43-area2 ul .txt h5 {font-family: 'NanumSquare',san-serif; font-weight: 800;}
.sub43-area2 ul .txt p {margin-top: 20px; white-space: pre-line;}

.sub44-area1 .zoom {background: url(../img/custom/sub44_bg1.jpg) center/cover no-repeat;}
.sub44-area2 article {display: flex; justify-content: center;}
.sub44-area2 article .num-list p {white-space: pre-line;}
.sub44-area3.bg-gray {background: #ededed;}


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

}


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

}

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

}

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

}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
.sub42-area2 ul {flex-direction: column;}
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.sub41-area3 ul {flex-direction: column;}
.sub41-area3 ul > li {width: 100%;}
.sub41-area3 ul > li > .img {height: 420px;}
.sub41-area3 ul > li > .txt {padding: 0 20px;}

.sub42-area3 ul > li {width: calc(50% - 10px);}
.sub42-area3 ul > li:nth-child(3) {margin-top: 50px !important;}

.sub43-area2 ul {flex-direction: column; gap: 20px;}
.sub43-area2 ul .img {width: 100%; padding: 30px; background: #c7d0d5;}
}

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

}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:480px) {
.sub41-area3 ul {gap: 30px;}
.sub41-area3 ul > li > .img {height: 300px;}
.sub41-area3 ul > li > .txt .main-tit a {margin-top: 20px; width: 160px;}

.sub42-area2 ul .txt article p {margin: 5px 0 0 25px;}
.sub42-area3 ul > li:nth-child(3) {margin-top: 30px !important;}

.sub43-area2 ul .txt p {margin-top: 10px;}
}

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

}


/* ===================================================================================================================== */
/* ======================================================= sub4 코드 ==================================================== */
/* ===================================================================================================================== */




/* ===================================================================================================================== */
/* ======================================================= sub5 코드 ==================================================== */
/* ===================================================================================================================== */

.sub51-area1 .zoom {background: url(../img/custom/sub51_bg1.jpg) center/cover no-repeat;}
.sub51-area2 .zoom {background: url(../img/custom/sub51_bg2.jpg) center/cover no-repeat;}
.sub51-area2 ul {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;}
.sub51-area2 ul > li {display: flex; align-items: center; justify-content: center; width: calc(25% - 8px); height: 95px; border-radius: 10px; text-align: center; background: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.sub51-area2 ul > li:nth-child(n+5):nth-child(-n+8) {background: #eff2f3;}
.sub51-area2 ul > li:nth-child(n+9):nth-child(-n+12) {background: #d9e2e5;}
.sub51-area2 ul h5 {white-space: pre-line; font-family: 'NanumSquare',san-serif; font-weight: 800; line-height: 0.8;}
.sub51-area2 ul h5 span {font-size: 15px;}


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

}


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

}

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

}

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

}

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

}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.sub51-area2 ul > li {width: calc(50% - 10px);}
}

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

}

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

}

/*================================================================ 380px 이하 ================================================================= */
@media screen and (max-width:380px) {
.sub51-area2 ul h5 {line-height: 1;}
}


/* ===================================================================================================================== */
/* ======================================================= sub5 코드 ==================================================== */
/* ===================================================================================================================== */



/* ===================================================================================================================== */
/* ======================================================= sub6 코드 ==================================================== */
/* ===================================================================================================================== */

.sub61-area1 .zoom {background: url(../img/custom/sub61_bg1.jpg) center/cover no-repeat;}
.sub61-area2 ul {display: flex; align-items: center; justify-content: center; gap: 60px;background: #f9f9f9;}
.sub61-area2 ul .txt p {white-space: pre-line;}
.sub61-area2 ul .txt h6 {margin-top: 30px; white-space: pre-line; color: #42b1a6; font-family: 'NanumSquare',san-serif; font-weight: 800;}
.sub61-area2 ul .img img {max-width: 500px;}

.sub62-area2 ul {display: flex; flex-direction: column; gap: 15px; max-width: 1000px; margin: 0 auto;}
.sub62-area2 ul > li {padding: 12px 10px; border-radius: 40px; text-align: center; background: #eaf8f7;}
.sub62-area2 ul > li:nth-child(even) {background: #f5f5f5;}
.sub62-area2 ul > li h6 {font-family: 'NanumSquare',san-serif; font-weight: 500;}
.sub62-area3 .zoom {background: url(../img/custom/sub62_bg1.jpg) center/cover no-repeat;}
.sub62-area3 article {max-width: 850px; width: 100%; margin: 0 auto; padding: 40px 10px; background: #fff; border-radius: 20px; text-align: center; font-style: italic; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.sub62-area3 article h4 {font-weight: bold; white-space: pre-line;}
.sub62-area3 article p {margin-top: 25px; 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) {

}

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

}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
.sub61-area2 ul {flex-direction: column-reverse; gap: 20px; max-width: 500px; margin: 0 auto; align-items: flex-start;}
}

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

}

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

}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:480px) {
.sub61-area2 ul .txt h6 {margin-top: 15px;}

.sub62-area2 ul {gap: 10px;}
.sub62-area2 ul > li {border-radius: 15px;}
.sub62-area3 article p {margin-top: 15px;}
}

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

}


/* ===================================================================================================================== */
/* ======================================================= sub6 코드 ==================================================== */
/* ===================================================================================================================== */