@charset 'utf-8';



:root {
    --color-ver1:#e0f6ff;
    --color-ver2:#99cde4;
    --color-ver3:#459FC5;
    --color-ver4:#408CBC;
    --color-ver5:#174561;
}


.page-indicator {  position:fixed;  top: 50%; right: 5vw; transform: translateY(-50%);  z-index: 10;}
.page-indicator ul { position: relative;  list-style: none; padding: 2.5rem 0;  margin: 0;  display: flex; flex-direction: column;  align-items: flex-end;}
.page-indicator li {  display: flex; align-items: center;  margin: 25px 0; z-index: 2; }
.page-indicator .indicator { display: flex; align-items: center;  text-decoration: none;  color: #fff;  font-size: 0.8rem;}
.page-indicator .indicator.active .label {color: #8eeaff;}
.page-indicator .indicator.active .dot {background: radial-gradient(#8eeaff 30% ,#fff 40%);}
.page-indicator .label {white-space: nowrap; margin-right: 12px; color: #fff; transition: color 0.3s; font-weight: 600;}
.page-indicator .dot { width: 12px;  height: 12px;  background: #fff; border-radius: 50%;  transition: background 0.3s;  margin: 0 12px;}
.page-indicator .dot-line-bg {  position: absolute;  right: 0;  top: 0; bottom: 0;  width: 36px;  background: rgba(255, 255, 255, 0.3);  border-radius: 25px;  z-index: 0;  display: flex;  flex-direction: column; align-items: center;   padding: 15px 0; }
.page-indicator .vertical-line { flex: 1;  width: 2px; background: #fff; }
.page-indicator .arrow {display: inline-flex; color: #fff;}
.page-indicator .arrow.up {}
.page-indicator .arrow.down {}

body.theme-dark .page-indicator .indicator {color: #fff;}
body.theme-dark .page-indicator .indicator.active .label { color: #8eeaff;}
body.theme-dark .page-indicator .dot { background: #fff;}
body.theme-dark .page-indicator .dot-line-bg { background: rgba(255,255,255,0.3);}
body.theme-dark .page-indicator .vertical-line { background: #fff;}
body.theme-dark .page-indicator .arrow { color: #fff;}

body.theme-light .page-indicator {}
body.theme-light .page-indicator .indicator { }
body.theme-light .page-indicator .indicator.active .label { }
body.theme-light .page-indicator .label { color: #868686; }
body.theme-light .page-indicator .dot {}
body.theme-light .page-indicator .dot-line-bg { background: rgba(0, 0, 0, 0.2); }
body.theme-light .page-indicator .vertical-line {}
body.theme-light .page-indicator .arrow {}





/*main*/

/*main fixed button*/
.mainTopBtn {position: fixed; top:110px; right: 5vw; z-index: 5; border:1px solid #fff; border-radius: 250px; box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.3); padding: 0.5rem 1rem; }
.mainTopBtn .topBtn {width: 100%; height: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 10px;}
.mainTopBtn .topBtn .textArea {font-size: 0.7rem; line-height: 1.2; font-weight: 600;  color: #fff;}
.mainTopBtn .topBtn .icon {font-size: 0.7rem; color: #fff;}
.mainTopBtn .topBtn .icon img {}
.mainTopBtn.light {  border: 1px solid var(--color-ver5);  color: var(--color-ver5);}
.mainTopBtn.light .topBtn .textArea,
.mainTopBtn.light .topBtn .icon {  color: var(--color-ver5);}
.mainTopBtn.dark {border: 1px solid #fff;}
.mainTopBtn.dark .topBtn .textArea,
.mainTopBtn.dark .topBtn .icon {  color: #fff;}

.mainTopBtn:hover {background-color: var(--color-ver5); border: none;}
.mainTopBtn:hover .topBtn .textArea {color: #fff;}
.mainTopBtn:hover .topBtn .icon {color: #fff;}
.mainTopBtn.light:hover {background-color: var(--color-ver5); border: none;}
.mainTopBtn.light:hover .topBtn .textArea {color: #fff;}
.mainTopBtn.light:hover .topBtn .icon {color: #fff;}
.mainTopBtn.dark:hover {background-color:#fff; border: none;}
.mainTopBtn.dark:hover .topBtn .textArea {color: var(--color-ver5);}
.mainTopBtn.dark:hover .topBtn .icon {color: var(--color-ver5)}


#mainWrap {width: 100%; position: relative;}
#mainWrap .mainSection { width: 100%; position: relative; display: flex; align-items: center;  justify-content: center; flex-direction: column; padding: 5rem 0;}

.pagination-indicator { position: fixed; top: 50%; right: 2rem; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.5rem; z-index:10;     align-items: flex-end;}
.pagination-item { display: flex;  flex-direction: row;  align-items: center;  gap: 0.5rem;  font-size: 0.9rem;  cursor: pointer; transition: color 0.3s;}
.pagination-item .label {display: none;}
.pagination-item .dot { width: 14px; height: 14px;  border: 1px solid #ccc;  border-radius: 50%; transition: 0.1s;}
.pagination-item.active {font-weight: bold;}
.pagination-item.active .label {display: inline-block; font-size: 14px;}
.pagination-item.active .dot { background:radial-gradient(#1d1d1d 30%,#fff 50%); border:none;}

#section1 {margin: 0 auto;overflow: hidden; width: 100vw; height: 100vh;   position: relative; }
#section1 .bg-blur { position: absolute; top: 0; left: 0;  width: 100%;  height: 100%;  z-index: 0;  background-size: cover;  background-position: center;  filter: blur(10px) brightness(0.3);  transition: background-image 0.5s ease-in-out; width: 100%;  mask-image: url('../images/main/maskImg.png'); mask-repeat: no-repeat;  mask-size: cover; flex-shrink: 0; overflow: hidden;}
#section1 .mainVisualWrap {width: 100%; max-width: 1440px; height: 100%;}
#section1 .mainVisualWrap .mainSwiper { width: 100%; height: 100%; overflow: hidden; z-index: 1; position: relative;}
#section1 .mainVisualWrap .mainSwiper .swiper-slide {overflow: hidden; display: flex; justify-content: center; align-items: center; gap: 3rem; flex-flow: row wrap; border-radius: 1rem; }
#section1 .mainVisualWrap .mainSwiper .swiper-slide .imgArea {border-radius: 1rem; overflow: hidden; width: 55%; aspect-ratio: 3 / 2;}
#section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea {flex: 1; padding-bottom: 10rem;}
#section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea .mainTitle {color: #8EEAFF; margin-bottom: 1.5rem; font-size: 2.5rem;}
#section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea .mainText {color: #fff; font-size: 1.15rem; line-height: 1.5;}
#section1 .mainVisualWrap .mainSwiper .swiper-slide img { display: block; width: 100%; height: 100%;  object-fit: cover; position: relative; }

#section1 .mainVisualWrap .mainSwiper .indiWrap {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 1rem; position: absolute; bottom:calc( ( 100% - 528px ) / 1.2 );  right: 230px; z-index: 2;}
#section1 .mainVisualWrap .mainSwiper .indiWrap .custom-pagination-indicator {  display: flex;  flex-flow: row nowrap;  align-items: center; justify-content: center;  gap: 5px;  width: 100%;  z-index: 1; }
#section1 .mainVisualWrap .mainSwiper .indiWrap .custom-pagination-indicator .current-slide,
#section1 .mainVisualWrap .mainSwiper .indiWrap .custom-pagination-indicator .total-slide { font-size: 0.85rem; font-weight: 600;  color: #fff;  min-width: 1rem; text-align: center; }
#section1 .mainVisualWrap .mainSwiper .indiWrap .custom-pagination-indicator .progress-bar { flex: 1;  background: rgba(255,255,255,0.3);  height: 3px; border-radius: 3px; position: relative; overflow: hidden; min-width: 200px;}
#section1 .mainVisualWrap .mainSwiper .indiWrap .custom-pagination-indicator .progress-fill { background: #ffffff;  height: 100%; width: 0%; transition: width 0.5s ease; }
#section1 .mainVisualWrap .mainSwiper .indiWrap .swiperBtn {color: #fff; display: inline-flex;}
#section1 .mainVisualWrap .mainSwiper .indiWrap .swiper-button-next { }
#section1 .mainVisualWrap .mainSwiper .indiWrap .swiper-button-prev { }
#section1 .mainVisualWrap .mainSwiper .indiWrap .swiper-button-next, #section1 .mainVisualWrap .mainSwiper .indiWrap .swiper-button-prev {position: unset; width: auto; height: auto; font-size: 1rem;margin-top: 0;  max-width: 15px; font-weight: 600;}
#section1 .mainVisualWrap .mainSwiper .indiWrap .swiper-button-next::after,
#section1 .mainVisualWrap .mainSwiper .indiWrap .swiper-button-prev::after { display: none;  }
#section1 .mainVisualWrap .mainSwiper .indiWrap .custom-btnWrap {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 1rem;    min-width: 100px;}
#section1 .mainVisualWrap .mainSwiper .indiWrap .custom-btnWrap .playBtn {width: 26px; height: 26px; border-radius: 13px; border: 1px solid #fff; font-size: 0.8rem; align-items: center; justify-content: center;}
#section1 .mainVisualWrap .mainSwiper .indiWrap .custom-btnWrap .custom-swiper-pause { color: #fff; display: inline-block; }
#section1 .mainVisualWrap .mainSwiper .indiWrap .custom-btnWrap .custom-swiper-play { color: #fff; display: none; }


#section2.mainSection {padding-top: 0 ;}
#section2 {width: 100%; margin: 0 auto; background: url('../images/main/main_section2_bg.png') bottom center / cover no-repeat; overflow: hidden;}
#section2 .contArea {max-width: 1440px; width: 100%; display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; gap: 2rem; }
#section2 .contArea .contBox {flex: 1;}
#section2 .contArea .contBox.width50 {width: calc( ( 100% - 2rem ) / 2 );}
#section2 .contArea .contBox .titleArea {width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 0.5rem; color: #1d1d1d; margin-bottom: 1.5rem;}
#section2 .contArea .contBox .titleArea .title {}
#section2 .contArea .contBox .titleArea .icon {display: inline-block; font-size: 1.3rem; transition: 0.2s ease-in-out; color: #ccc;}
#section2 .contArea .contBox .titleArea .icon:hover {transform: rotate(45deg); cursor: pointer; color: var(--color-ver3);}
#section2 .contArea .contBox .contents {width: 100%;}
#section2 .contArea .contBox .contents .notiSwiper {width: 100%;}
#section2 .contArea .contBox .contents .notiSwiper .swiper-slide {width: 100%; border: 2px solid var(--color-ver3); background-color: #fff; border-radius: 1rem 1rem 0 0 ; overflow: hidden; min-height: 300px; padding: 2rem; }
#section2 .contArea .contBox .contents .notiSwiper .swiper-slide .notiTitle {display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem;}
#section2 .contArea .contBox .contents .notiSwiper .swiper-slide .notiTitle .date {width: fit-content; aspect-ratio: 1; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; font-size: 1rem; background-color: var(--color-ver1); border-radius: 5px; color: var(--color-ver3); padding: 1rem;}
#section2 .contArea .contBox .contents .notiSwiper .swiper-slide .notiTitle .date .big {font-size: 1.5em; font-weight: 700;}
#section2 .contArea .contBox .contents .notiSwiper .swiper-slide .notiTitle .date .small {font-size: 0.8em;}
#section2 .contArea .contBox .contents .notiSwiper .swiper-slide .notiTitle .title {flex: 1; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
#section2 .contArea .contBox .contents .notiSwiper .swiper-slide .notiText {font-size: 1rem; color: #1d1d1d; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: #494949; text-align: justify;}
#section2 .contArea .contBox .contents .notiSwiper .indiWrap { width: 100%; background-color: var(--color-ver3); color: #fff; padding: 1rem; font-size: 0.8rem; border-radius: 0 0 1rem 1rem;}
#section2 .contArea .contBox .contents .notiSwiper .indiWrap .custom-btnWrap {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 0.5rem; color: #fff;}
#section2 .contArea .contBox .contents .notiSwiper .indiWrap .custom-btnWrap .playBtn {color: #fff; font-size: 0.6rem; width: 24px; height: 24px; border-radius: 12px; border: 1px solid #fff; display: flex; flex-flow: column wrap; align-items: center; justify-content: center;}
#section2 .contArea .contBox .contents .notiSwiper .indiWrap .custom-btnWrap .notiSwiper-pause {display: inline-flex;}
#section2 .contArea .contBox .contents .notiSwiper .indiWrap .custom-btnWrap .notiSwiper-play {display: none;}
#section2 .contArea .contBox .contents .notiSwiper .indiWrap .custom-btnWrap .slidePage {}
#section2 .contArea .contBox .contents .notiSwiper .indiWrap .custom-btnWrap .nowSlide::after {content: ''; border-right: 1px solid #e4e4e4; font-size: 0.7rem; padding-left: 0.5rem;}
#section2 .contArea .contBox .contents .notiSwiper .indiWrap .custom-btnWrap .nowSlide {font-weight: 600;}
#section2 .contArea .contBox .contents .notiSwiper .indiWrap .custom-btnWrap .totalSlide {}
#section2 .contArea .contBox .contents .notiSwiper .indiWrap .custom-btnWrap .swiperBtn {cursor: pointer;}

#section2 .contArea .contBox .contents .newsArea {width: 100%; min-height: 356px;max-height: 360px; height: 100%; border-radius: 1rem; overflow: hidden; position: relative;}
#section2 .contArea .contBox .contents .newsArea .imgArea {width: 100%; height: 100%;  object-fit: cover; object-position: center; text-align: center;  position: relative;}
#section2 .contArea .contBox .contents .newsArea .imgArea img {width: 100%;height: 100%;  object-fit: cover; object-position: center; display: block;     min-height: 360px;}
#section2 .contArea .contBox .contents .newsArea .textArea { width: 100%; height: 100%;  background: linear-gradient(0deg, black, transparent);  position: absolute;  top: 0;  z-index: 1; color: #fff; overflow: hidden; display: flex; flex-flow: row wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 1.7rem; font-size: 1rem;}
#section2 .contArea .contBox .contents .newsArea .textArea .left {flex: 1;}
#section2 .contArea .contBox .contents .newsArea .textArea .left .title {margin-bottom: 1rem; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis; line-height: 1.4;}
#section2 .contArea .contBox .contents .newsArea .textArea .left .date {font-size: 0.9em;}
#section2 .contArea .contBox .contents .newsArea .textArea .right {width: fit-content; font-size: 0.9em; cursor: pointer;}
#section2 .contArea .contBox .contents .newsArea .textArea .right .icon {display: inline-block; transition: 0.2s ease-in-out;}
#section2 .contArea .contBox .contents .newsArea .textArea .right:hover {font-weight: 600;}
#section2 .contArea .contBox .contents .newsArea .textArea .right:hover .icon {transform: translateX(10px);}


#section3 {width: 100%; margin: 0 auto; }
#section3 .contArea {max-width: 1440px; width: 100%; display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; gap: 2rem; }
#section3 .contArea .contBox {flex: 1;}
#section3 .contArea .contBox.width30 {width: 30%; flex: unset;}
#section3 .contArea .contBox .titleArea {width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 0.5rem; color: #1d1d1d; margin-bottom: 1.5rem;}
#section3 .contArea .contBox .titleArea .title {}
#section3 .contArea .contBox .titleArea .icon {display: inline-block; font-size: 1.3rem; transition: 0.2s ease-in-out; color: #ccc;}
#section3 .contArea .contBox .titleArea .icon:hover {transform: rotate(45deg); cursor: pointer; color: var(--color-ver3);}
#section3 .contArea .contBox .contents {width: 100%;}

#section3 .faqWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; gap: 1rem; position: relative; z-index: 2;}
#section3 .faqWrap .decoImg {position: absolute; right: 0; top: -11vh; z-index: 1; width: fit-content;}
#section3 .faqWrap .faqBox {width: calc( ( 100% - 1rem ) / 2 ); flex: unset; background-color: #fff; border-radius: 1rem; overflow: hidden; position: relative; box-shadow: 0 0 10px rgba(0,0,0,0.1); padding: 1rem 1.5rem;     display: flex; flex-flow: column wrap; align-items: flex-end; justify-content: space-between; min-height: 127px; position: relative; z-index: 2;}
#section3 .faqWrap .faqBox .title {display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; font-weight: 500; text-align: left; width: 100%;}
#section3 .faqWrap .faqBox .title .icon {width: fit-content;}
#section3 .faqWrap .faqBox .title .icon img {max-width: 18px; max-height: 18px; display:inline-flex;}
#section3 .faqWrap .faqBox .title .text { display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis; flex: 1; font-weight: 600;}
#section3 .faqWrap .faqBox .faqBtn {display: inline-flex; align-items: center; justify-content: center; flex-flow: row nowrap; gap: 5px; background-color: #408CBC; color: #fff; padding: 0.3rem 1rem; border-radius: 1rem; font-size: 0.9rem; width: fit-content; font-weight: 600;}
#section3 .faqWrap .faqBox .faqBtn .icon {display: inline-flex; transition: 0.2s ease-in-out; }
#section3 .faqWrap .faqBox .faqBtn:hover {}
#section3 .faqWrap .faqBox .faqBtn:hover .icon {transform: translateX(10px);}

#section3 .contBox.width30 {background: linear-gradient(#208EA7, #157291);  border-radius: 1rem;}
#section3 .contBox.width30 .titleArea {display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; padding: 1.5rem; color: #fff; margin-bottom: 0;}
#section3 .contBox.width30 .titleArea .icon {color: #fff;}
#section3 .contBox.width30 .titleArea .icon:hover {color: #fff;}
#section3 .contBox.width30 .contents {max-width: 96%; margin: 0 auto;}
#section3 .contBox.width30 .contents .noteArea {width: 100%;  background-color: #fff; border-radius: 1rem; min-height: 240px; padding: 1.5rem; display: flex; flex-flow: column wrap; align-items: center; justify-content: space-between;}
#section3 .contBox.width30 .contents .noteArea .group {display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;}
#section3 .contBox.width30 .contents .noteArea .group .left {display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start;}
.group .univ {font-size: 0.8rem; padding: 2px 10px; border-radius: 3px; margin-right: 10px; width: fit-content; font-weight: 600;}
.group .univ:last-child {margin-right: 0;}
.group .univ01 {background-color: #CDE3D8; color: #05713E;}
.group .univ02 {background-color: #B2D3EE; color: #00325B;}
.group .univ03 {background-color: #dacde3; color: #710548;}
.group .notice01 {border: 1px solid #c70a0a; color: #c70a0a;}
.group .notice02 {border: 1px solid #414141; color: #414141;}
.group .notice03 {border: 1px solid #0ac768; color: #0ac768;}
#section3 .contBox.width30 .contents .noteArea .bottom {display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; gap: 0.5rem;font-size: 0.85rem; width: 100%;}
#section3 .contBox.width30 .contents .noteArea .bottom .decoBox {background-color: #408CBC; color: #fff; padding: 2px 10px; border-radius: 1rem; font-weight: 600;}
#section3 .contBox.width30 .contents .noteArea .bottom .date {font-weight: 500;} 

#mainWrap #section4.mainSection {padding: 0;}
#section4 {width: 100%; background: linear-gradient(0deg, #7AC1EF, #4B8FE8); }
#section4 .contArea {max-width: 1440px; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; gap: 2rem; }
#section4 .contArea .left {font-weight: 500; color: #fff;line-height: 1.5;}
#section4 .contArea .left .blue {color: #7BE7FF;}
#section4 .contArea .left .bold {font-weight: 700;}
#section4 .contArea .right {color: #fff; border: 1px solid #fff; padding: 1rem; font-weight: 500;}
#section4 .contArea .right:hover {background-color: #fff; color: #4B8FE8;}
#section4 .contArea .right .bold {font-weight: 700;}
#section4 .contArea .right .icon {display: inline-block; margin-left: 0.5rem;}

.bannerWrap {width: 100%; margin: 0 auto; display: flex; justify-content: center;}
.bannerWrap .bannerWidth {width: 100%; max-width: 1440px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between;}
.bannerWrap .bannerWidth .bannerTitle {width: fit-content; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; font-size: 1rem; margin-right: 3rem;}
.bannerWrap .bannerWidth .bannerTitle p {}
.bannerWrap .bannerWidth .bannerTitle .title {font-weight: 700; margin-right: 1rem;}
.bannerWrap .bannerWidth .bannerTitle .btn {margin-right: 0.5rem; font-size: 1.3em; color: #aeaeae; cursor: pointer;}
.bannerWrap .bannerWidth .bannerTitle .bannerPlay {display: none;}
.bannerWrap .bannerWidth .bannerTitle .btn:last-child {margin-right: 0;}
.bannerWrap .bannerWidth .bannerSwiper {flex: 1; position: relative; margin: 0.7rem 0; overflow: hidden;}
.bannerWrap .bannerWidth .bannerSwiper .swiper-wrapper {transition-timing-function: linear !important; position: relative;}
.bannerWrap .bannerWidth .bannerSwiper .swiper-slide {width: auto; padding: 5px 0; border: 1px solid #eaeaea; text-align: center;}
.bannerWrap .bannerWidth .bannerSwiper .swiper-slide:hover {background-color: rgba(0,0,0,0.1);}
.bannerWrap .bannerWidth .bannerSwiper .swiper-slide img {max-width: 140px; max-height: 31px; min-height: 31px;}






/* media query */

@media only screen and (max-width: 1760px) {
    .mainTopBtn {right: 2.5vw;}
    .page-indicator { right: 2.5vw; }
}

@media only screen and (max-width: 1600px){

}

@media only screen and (max-width: 1440px){

    #section1 .mainVisualWrap {max-width: 95%; }
    #section1 .mainVisualWrap .mainSwiper .indiWrap {bottom: calc((100% - 528px) / 1.5);  right: 10%;}
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .imgArea {width: 60%;}
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea .mainTitle {font-size: 2rem; font-weight: 800;}
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea .mainText {font-size: 1rem;}

    #section2 .contArea {max-width: 95%; }
    #section3 .contArea {max-width: 95%; }
    #section4 .contArea {max-width: 95%; }

    .bannerWrap .bannerWidth {max-width: 95vw;}


    #mainWrap .mainSection#section2 {padding-top: 0;}

}

@media only screen and (max-width: 1280px){
    .page-indicator {display: none;}
    #mainWrap #section1.mainSection {padding: 7rem 0;}
    #section1 {height: fit-content; }
    #section1 .mainVisualWrap .mainSwiper .indiWrap {bottom: 2vh; right: 8vw}
    #section1 .mainVisualWrap .mainSwiper .indiWrap .custom-pagination-indicator .progress-bar {min-width: 150px;}
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea {padding-bottom: 5rem;}

    #section2 .contArea .contBox .titleArea {margin-bottom: 1rem;}
    #section2 .contArea .contBox .titleArea .title {font-size: 1.3rem;}
    #section2 .contArea .contBox .contents .notiSwiper .swiper-slide .notiTitle .title {font-size: 1.15rem;}
    #section2 .contArea .contBox .contents .newsArea .textArea .left .title {font-size: 1.15rem;}
    #section2 .contArea .contBox .contents .newsArea { min-height: 364px;}
    #section2 .contArea .contBox .contents .newsArea .imgArea {}

    
    #section3 .contArea {flex-flow: column wrap;}
    #section3 .contArea .contBox.width30 {width: 100%; padding:0 0.5rem 0.5rem 0.5rem;}
    #section3 .contBox.width30 .titleArea {padding: 1.5rem 0.5rem;}
    #section3 .contBox.width30 .contents {max-width: 100%;}
    #section3 .contBox.width30 .contents .noteArea {min-height: 150px; align-items: center;}
    #section3 .contBox.width30 .contents .noteArea .bottom {justify-content: center;}
    #section3 .contArea .contBox .titleArea .title {font-size: 1.3rem;}
    
    #section4 .contArea .left {font-size: 1.3rem; word-break: keep-all;}
    #section4 .contArea .right {padding: 0.7rem; font-size: 0.95rem; word-break: keep-all; text-align: center;}
    #section4 .contArea .right .bold {display: block;}
    #section4 .contArea .imgArea img {}

}



@media only screen and (max-width: 1024px){
    .mainTopBtn {top: 100px;}

    #section1 .mainVisualWrap .mainSwiper .swiper-slide {flex-flow: column wrap; align-items: center; position: relative;}
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .imgArea {width: 100%;}
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea {position:absolute; bottom: 0; width: 100%; height: 100%; background: linear-gradient(0deg, black, transparent); border-radius: 1rem; padding-bottom: 0;         display: flex; flex-flow: column wrap;  align-items: flex-start; justify-content: flex-end; padding:1.5rem;}
    #section1 .mainVisualWrap .mainSwiper .indiWrap {bottom: 2vh;  right: 2vw;}

}





@media only screen and (max-width: 768px){
    .mainTopBtn {top: 90px;}
    .mainTopBtn .topBtn .icon img {max-width: 30px;}
    .pagination-indicator {display: none;}
    #mainWrap #section1.mainSection {  padding: 5rem 0; }
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea .mainTitle {font-size: 1.5rem; margin-bottom: 1rem;}
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea .mainText {font-size: 0.9rem;}

    #section2 .contArea {flex-flow: column wrap;}
    #section2 .contArea .contBox.width50 {width: 100%;}
    #section2 .contArea .contBox .contents .notiSwiper .swiper-slide {border-radius: 0.5rem 0.5rem 0 0; padding: 1.5rem;}
    #section2 .contArea .contBox .contents .notiSwiper .swiper-slide .notiTitle .title {word-break: keep-all;}
    #section2 .contArea .contBox .contents .newsArea .textArea {padding: 1.5rem;}
    #section2 .contArea .contBox .contents .notiSwiper .indiWrap {border-radius: 0 0 0.5rem 0.5rem;}
    #section2 .contArea .contBox .contents .newsArea {border-radius: 0.5rem;}

    #section3 .faqWrap .faqBox .title .text {font-size: 0.9rem;}
    #section3 .faqWrap .faqBox .faqBtn {font-size: 0.8rem;}
    #section3 .faqWrap .faqBox {border-radius: 0.5rem;}
    #section3 .contBox.width30 {border-radius: 0.5rem;}
    #section3 .contBox.width30 .contents .noteArea {padding: 1rem; border-radius: 0.5rem;}

    #section4 .contArea .left {font-size: 1.1rem; padding: 1rem 0;}
    #section4 .contArea .right {font-size: 0.85rem;}
    #section4 .contArea .imgArea img {max-width: 240px; width: 100%;}

    .bannerWrap .bannerWidth {flex-flow: column wrap; justify-content: center; margin-top: 1rem;}
    .bannerWrap .bannerWidth .bannerSwiper { width: 100%;}
    .bannerWrap .bannerWidth .bannerTitle {margin-right: 0;}
}




@media only screen and (max-width: 550px){
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea {padding-bottom: 4rem;}
    #section1 .mainVisualWrap .mainSwiper .indiWrap .custom-pagination-indicator .progress-bar {min-width: 100px;}
    #section1 .mainVisualWrap .mainSwiper .indiWrap {right: unset; left: 1.5rem;}

    #section2 .contArea .contBox .contents .notiSwiper .swiper-slide .notiTitle .title {font-size: 1rem;}
    #section2 .contArea .contBox .contents .notiSwiper .swiper-slide .notiText {font-size: 0.85rem;}
    #section2 .contArea .contBox .contents .notiSwiper .swiper-slide {min-height: 250px;}
    #section2 .contArea .contBox .contents .newsArea {  min-height: 285px;  }
    #section2 .contArea .contBox .contents .newsArea .textArea .left .title {font-size: 1rem; margin-bottom: 0.5rem;}
    #section2 .contArea .contBox .contents .newsArea .textArea .left .date {font-size: 0.8rem;}
    #section2 .contArea .contBox .contents .newsArea .imgArea {}
    #section2 .contArea .contBox .contents .newsArea .textArea .right {font-size: 0.8rem;}

    #section3 .faqWrap .faqBox {width: 100%;min-height: 100px;}
    #section3 .contBox.width30 .contents .noteArea .title {font-size: 1.05rem;}
    #section3 .contBox.width30 .contents .noteArea .top {margin-bottom: 1rem;}

    #section4 .contArea .imgArea {display: none;}
    #section4 .contArea {flex-flow: column wrap; gap: 0;}
    #section4 .contArea .left {text-align: center;}
    #section4 .contArea .right {margin-bottom: 1rem;}

    .bannerWrap .bannerWidth .bannerSwiper .swiper-slide img {max-width: 110px;}
    
    
}

@media only screen and (max-width: 425px){
    .mainTopBtn {width: 60px; height: 60px; border-radius: 35px;}
    .mainTopBtn .topBtn .textArea {display: none;}
    #section1 .mainVisualWrap .mainSwiper .swiper-slide {border-radius: 0.5rem;}
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .imgArea {aspect-ratio: unset ;width: max-content;  max-height: 55vh;border-radius: 0.5rem;}
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea  {border-radius: 0.5rem;}
    #section1 .mainVisualWrap .mainSwiper .swiper-slide .textArea .mainTitle {font-size: 1.2rem;}

    #section3 .contBox.width30 .contents .noteArea .group {gap: 0.5rem;}

    .bannerWrap .bannerWidth .bannerTitle {margin-right: 1rem;}
    .bannerWrap .bannerWidth .bannerTitle .title {font-size: 0.85rem; }
    .bannerWrap .bannerWidth .bannerSwiper .swiper-slide {padding: 5px; margin-right: 0.8rem;}
    .bannerWrap .bannerWidth .bannerSwiper .swiper-slide img { max-width: 90px; max-height: 20px;}
}


@media only screen and (max-width: 375px){
    #section1 .mainVisualWrap .mainSwiper .indiWrap .custom-pagination-indicator .progress-bar {min-width: 80px;}
}