@charset 'utf-8';

/* default setting */
* {box-sizing: border-box; text-decoration: none; list-style: none; margin: 0; padding: 0; }
*::after, *::before {margin: 0 auto; padding: 0; box-sizing: border-box;}
html, body {font-family: 'pretendard'; font-size: 18px; color:#333; line-height: 1.3;font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; height: auto;-ms-overflow-style: none;  
  scrollbar-width: none;}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none;}
img {display: inline; border: 0;}
a {color: inherit; text-decoration: none;}
ol, ul, li {list-style: none;}
em {font-style: normal;}
strong, b {font-weight: 600;}
sub, sup {font-size: 0.7rem;}
fieldset {border: 0;}
button {font-family: 'pretendard'; font-size: 18px; line-height: 1; background: none; border: none;}
textarea {resize: none;}
table {border-collapse: collapse; border-spacing: 0;}
legend, caption {font-size: 0; line-height: 0; overflow: hidden; width: 0; height: 0; text-indent: -999999999px;}
input[type="text"] {box-sizing: border-box;}
img {max-width: 100%;}


/* input */
input[type="text"]{height: 1.7rem; border: 1px solid #757575; border-radius: 0.25rem;}
input:read-only{background: #ddd; border: 1px solid #bbb;}
input[type="checkbox"]:focus,input[type="radio"]:focus{outline:3px dotted #aaa;outline-offset:0}
select{height: 1.7rem; margin: 0 0 0 1rem; border-radius: 0.25rem;}



:root {
    --main-green:#1ca466;
    --main-navy:#00315a;

    --color-ver1:#e3ffe3;
    --color-ver2:#9ed5a1;
    --color-ver3:#62aa62;
    --color-ver4:#348034;
    --color-ver5:#175515;
}


/*main*/
#bodyWrap {width: 100%; position: relative;}
#mainWrap {width: 100%; height: 100%;}

/*main fixed button*/
.mainTopBtn {position: fixed; top:110px; right: calc( ( 100% - 1760px ) / 2 ); z-index: 5; border:1px solid #fff; border-radius: 2rem; box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.3); padding: 0.2rem 1.5rem; }
.mainTopBtn .topBtn {width: 100%; height: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 10px;}
.mainTopBtn .topBtn .text {text-align: justify;}
.mainTopBtn .topBtn .textArea {font-size: 0.9rem; line-height: 1.2; font-weight: 600;  color: #fff; display: block; }
.mainTopBtn .topBtn .textArea.spacing {letter-spacing: 0.4em;}
.mainTopBtn .topBtn .icon {font-size: 0.9rem; color: #fff;}
.mainTopBtn.light {  border: 1px solid var(--main-green);  color: var(--main-green);}
.mainTopBtn.light .topBtn .textArea,
.mainTopBtn.light .topBtn .icon {  color: var(--main-green);}
.mainTopBtn.dark {border: 1px solid #fff;}
.mainTopBtn.dark .topBtn .textArea,
.mainTopBtn.dark .topBtn .icon {  color: #fff;}

.mainTopBtn:hover {background-color: var(--main-green); border: none;}
.mainTopBtn:hover .topBtn .textArea {color: #fff;}
.mainTopBtn:hover .topBtn .icon {color: #fff;}
.mainTopBtn.light:hover {background-color: var(--main-green); 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(--main-green);}
.mainTopBtn.dark:hover .topBtn .icon {color: var(--main-green);}


#mainWrap .mainSection { width: 100vw;  height: 100vh; position: relative; display: flex; align-items: center;  justify-content: center; flex-direction: column;scroll-snap-align: start;}

.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-indicator.dark .pagination-item.active .label {color: #fff;}
.pagination-indicator.light .pagination-item.active .label {color: #1d1d1d;}
.pagination-item.active .label {display: inline-block; font-size: 14px;}
.pagination-item.active .dot { background:radial-gradient(#1d1d1d,#fff,#1d1d1d); border:none;}

#section1 {width: 100%; height: 100%; text-align: center; overflow: hidden;}
#section1 .mainVideo {background-color: #0d2231;}
#section1 .mainVideo video {object-fit: cover; width: 100vw; height: 100vh; object-position: center center;}
#section1 .mainVideo video.web {display: block;}
#section1 .mainVideo video.mobile {display: none;}
#section1 .mainVideo .mobileText {display: none;}



#section2 { background-image: url('../images/main/section2.jpg'); overflow: hidden;}
#section2 .mainVideo {background-color: #0c2231; }
#section2 .mainVideo video {object-fit: cover; width: 100vw; height: 100vh; object-position: center center;}
#section2 .mainVideo video.web {display: block;}
#section2 .mainVideo video.mobile {display: none;}

#inc03{position:relative;min-width:1300px;padding:130px 0 0 80px}
#inc03:before{position:absolute;left:0;top:0;content:'';z-index:-1;width:100%;height:calc(100% - 120px);background:var(--primary)}
#inc03 .tit_area{width:100%;max-width:var(--mainsize);margin:0 auto;font-weight:600;color:rgba(255,255,255,.8);text-align:right;background-color:var(--primary)}
#inc03 .tit_area h2{margin-bottom:20px;font-size:100px;font-weight:normal;line-height:1;color:rgba(255,255,255,.15);font-family:var(--e-font)}



#section3 {position: relative;  background-color: #E8EFF4; }
#section3 .titleArea {width: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; margin-bottom: 1rem; min-height: 51px;}
#section3 .titleArea .title {font-size: 1.5rem; color: #1d1d1d; font-weight: 700; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; gap: 5px; width: fit-content;}
#section3 .titleArea .plusArea {font-size: 0.9rem; width: auto; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
#section3 .titleArea .plusArea .text {font-weight: 500; margin-right: 1rem;}
#section3 .titleArea .plusArea .iconArea { position: relative; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
#section3 .titleArea .plusArea .iconArea .arrow {position: absolute; left: -8px; top: -1px; font-size: 1.2rem; transition:  0.2s ease-in;}
#section3 .titleArea .plusArea:hover .iconArea .arrow {left: 5px; }
#section3 .titleArea .plusArea .iconArea .circle {width: 30px; height: 30px; border-radius: 20px; border: 1px solid #1d1d1d;}
#section3 .notiArea {width: 100%; border: 1px solid #00325B; background-color: #fff; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; padding: 1.5rem 1rem; border-radius: 1rem; gap: 1rem; min-height: 133px;}
#section3 .notiArea .date {color: #00325B; width: 15%; text-align: center; border-right: 1px solid #ccc;}
#section3 .notiArea .date .day {font-size: 1.5rem; font-weight: 700;}
#section3 .notiArea .date .month {font-size: 0.9rem;}
#section3 .notiArea .notiCont {flex: 1;}
#section3 .notiArea .notiCont .title {font-weight: 600; margin-bottom: 0.5rem; font-size: 1.1rem; word-break: break-all; text-align: justify; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
#section3 .notiArea .notiCont .text {font-size: 0.9rem; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
#section3 .listWrap {width: 100%; min-height: 134px; max-height: 134px; overflow: hidden;}
#section3 .listWrap .list {width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; padding: 1.17rem; border-bottom: 1px solid #ccc; font-size: 1rem; cursor: pointer; gap: 1rem;}
#section3 .listWrap .list:hover {background-color: #DBEAF5;}
#section3 .listWrap .list .title {display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis; font-weight: 600;}
#section3 .listWrap .list .title.line2 {display: flex; flex-flow: column wrap; align-items: flex-start; justify-content: flex-start; gap: 0.5rem;}
#section3 .listWrap .list .title.line2 .decoArea {}
#section3 .listWrap .list .title.line2 .text {display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
#section3 .listWrap .list .date {font-weight: 500; color: #555;font-size: 0.9em; width: fit-content;}
#section3 .listWrap .list .date.line2 {text-align: center; font-weight: 600;min-width: 66px; display: flex; flex-flow: column wrap; align-items: center;  justify-content: center;  gap: 5px;  border-radius: 5px; background-color: #888888; aspect-ratio: 1; font-size: 0.8rem;}
#section3 .listWrap .list .date.line2 span {margin-right: 0; line-height: 1.3; color: #fff;}
#section3 .listWrap .list .date.line2.done {background-color: #727272;}
#section3 .listWrap .list .date.line2.ing {background-color:  #5f92ff;}
#section3 .listWrap .list .date.line2.pre {background-color:  #ff961d;}

#section3 .annoArea {width: 100%;  display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between;  background-color: #fff; padding: 1.5rem; border-radius: 1rem; min-height: 267px;}
#section3 .annoArea .left {width: 70%; cursor: pointer;}
#section3 .annoArea .left .annoTitle { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; width: 100%; font-size: 1.1rem; gap: 1rem; margin-bottom: 1rem;}
#section3 .annoArea .left .annoTitle .title {font-weight: 600;}
#section3 .annoArea .left .annoTitle .decoArea {display: flex; flex-flow: row nowrap; align-items: center; gap: 0.5rem;}
#section3 .annoArea .left .annoText {font-size: 0.9rem; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
#section3 .annoArea .annoDate {font-size: 0.8rem; margin-left: 10px; font-weight: 500;}
#section3 .decoBox {padding: 2px 10px; font-size: 0.8rem; text-align: center; border-radius: 4px; border: 1px solid #00315a; color: #00315a; font-weight: 600; text-align: center;}
#section3 .decoBox.noti {border: none; background-color:  #BD0D07; color: #fff;}
#section3 .decoBox.noti2 {border: none; background-color:  #208f5b; color: #fff;}
#section3 .decoBox.noti3 {border: none; background-color:  #535353; color: #fff;}
#section3 .decoBox.date {border: none; background-color:  #356684; color: #fff;}
#section3 .decoBox2 {line-height: 0.9;}
#section3 .decoBox2.red {color:  #BD0D07;}
#section3 .decoBox2.blue {color:  #208f5b;}
#section3 .decoBox2.grey {color:  #535353;}
#section3 .deco {display: inline-flex; align-items: center; justify-content: center; font-size: 15px; padding: 0.3rem 1rem 0.2rem; border-radius: 1rem; color: #fff; margin-right: 0.5rem;}
#section3 .deco.ver1 {background-color: var(--main-green);}
#section3 .deco.ver2 {background-color: var(--main-navy);}
#section3 .deco.ver3 {background-color: #afafaf;}
#section3 .annoArea .right {width: 20%; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end;}
#section3 .iconNoti {display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; width: 100%; font-size: 0.8rem;  gap: 1rem; margin-top: 0.5rem;}
#section3 .iconNoti .text {font-weight: 600;}
#section3 .iconNoti .text.red {color:#BD0D07;}
#section3 .iconNoti .text.blue {color:  #208f5b;}
#section3 .iconNoti .text.grey {color:  #535353;}
#section3 .iconNoti .decoBox2 {margin-right: 5px; font-weight: 500;}

#section3 .topWrap {width: 100%; max-width: 1440px; display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; gap: 2rem; margin: 1rem 0 3rem;}
#section3 .topWrap .leftWrap {flex: 1;}
#section3 .topWrap .rightWrap {width: 35%;}
#section3 .botWrap {max-width: 1440px; width: 100%;}
#section3 .botWrap .listWrap {max-height: 220px; min-height: 220px;}
#section3 .botWrap .listWrap .date span {margin-right: 0.5rem;}

#section3 .newsWrap {width: 100%; }
#section3 .newsWrap .imgArea {height: 295px; width: 100%; overflow: hidden; border-radius: 1rem; margin-bottom: 0.5rem;}
#section3 .newsWrap .imgArea img {    width: 100%;  height: 100%; object-fit: cover;}
#section3 .newsWrap .textArea {font-size: 1rem; border-left: 3px solid; border-image: linear-gradient(180deg, #12BC7F, #043BE1);  border-image-slice: 1; padding-left: 0.5rem;}
#section3 .newsWrap .textArea .title {font-weight: 600; font-size: 1.1em; line-height: 1.5;   display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}

#section3 .tab-menu {overflow: hidden; }
#section3 .tab-menu .tab {cursor: pointer; transition: 0.2s ease-in; color: #9b9b9b; display: flex; flex-flow: row wrap; align-items: center;    padding: 0.3rem 1rem; border-radius: 0.5rem 0.5rem 0 0; box-shadow: 3px -2px 6px rgba(0, 0, 0, 0.12); position: relative; bottom: -10px; font-size: 1.3rem; background-color: rgba(255,255,255,0.5); }
#section3 .tab-menu .tab:first-child {left: 0;}
/* #section3 .tab-menu .tab::after {content: ''; width: 6px; height: 6px; border-radius: 10px; background-color: #93B7D0; display: inline-flex; align-items: center;margin-left: 0.5rem;}
#section3 .tab-menu .tab:last-child::after {display: none;} */
#section3 .tab-menu .tab.active {font-weight: 800; color:  #5f92ff; background-color: transparent; border-bottom: none; bottom: 0; margin-top: 10px;}
#section3 .tab-content { display: none; }
#section3 .listWrap.heightPlus {max-height: 268px; min-height:268px;}
#section3 .tab-content.active {display: block;}

#section3 .tab-menu2 { overflow: hidden; }
#section3 .tab-menu2 .tab2 {cursor: pointer; transition: 0.2s ease-in-out; color: #9b9b9b; display: flex; flex-flow: row wrap; align-items: center;  padding: 0.3rem 1rem; border-radius: 0.5rem 0.5rem 0 0; box-shadow: 3px -2px 6px rgba(0, 0, 0, 0.12); position: relative; bottom: -10px; font-size: 1.3rem; background-color: rgba(255,255,255,0.5);}
#section3 .tab-menu2 .tab2:first-child {left: 0;}
#section3 .tab-menu2 .tab2.active {font-weight: 800; color:  #5f92ff; background-color: transparent; border-bottom: none; bottom: 0; margin-top: 10px;}
#section3 .tab-content2 { display: none; }
#section3 .tab-content2.active {display: block;}


#section4 {margin: 0 auto;overflow: hidden;}
#section4 .titleArea {width: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; margin-bottom: 3.5rem; max-width: 32.5%; position: relative; z-index: 1; color: #fff;}
#section4 .titleArea .title {font-size: 2rem; color: #fff; font-weight: 700; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; text-align: center;}
#section4 .titleArea .plusArea {font-size: 0.9rem; width: auto; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; position: absolute; right: 0;}
#section4 .titleArea .plusArea .text {font-weight: 500; margin-right: 1rem;}
#section3 .titleArea .plusArea .iconArea { position: relative;  display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
#section4 .titleArea .plusArea .iconArea .arrow {position: absolute; right: 16px; top: -1px; font-size: 1.2rem; transition:  0.2s ease-in;}
#section4 .titleArea .plusArea:hover .iconArea .arrow {right: 6.5px;}
#section4 .titleArea .plusArea .iconArea .circle {width: 30px; height: 30px; border-radius: 20px; border: 1px solid #fff;}
#section4 .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; }
#section4 .sec4Swiper { width: 100%; overflow: visible; z-index: 1; position: relative; padding: 0 1vw;}
#section4 .swiper-slide {border-radius: 1rem; overflow: hidden; text-align: center; background: #444;  display: flex; justify-content: center; align-items: center;  aspect-ratio: 1.5 / 1;  filter: brightness(50%);}
#section4 .swiper-slide.swiper-slide-next {filter: brightness(100%); position: relative; transition: 0.2s ease-in; transform: scale(1.2); z-index: 3;box-shadow: 1px 1px 6px 6px rgba(255,255,255,0.2);}
/* #section4 .swiper-slide.swiper-slide-next:hover {transform: scale(1.15); z-index: 3;} */
#section4 .swiper-slide.swiper-slide-next::after {content: '\f144';  font-family: 'Font Awesome 5 Free'; position: absolute; top: calc( ( 100% - 3rem ) / 2 );  right: calc( ( 100% - 3rem ) / 2 ); z-index: 2; color: #fff; font-size: 3.5rem; line-height: 0.9;} 
#section4 .swiper-slide img { display: block; width: 100%; height: 100%;  object-fit: cover; position: relative; }


#section5 {width: 100%; margin: 0 auto; background: url('../images/main/main_section5_bg.jpg') center center / cover no-repeat; overflow: hidden; }
#section5 .secWrap {max-width: 1440px; width: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 5rem;}
#section5 .secWrap .leftWrap {width: 30%; display: flex; flex-flow: column nowrap;  align-items: flex-start; justify-content: space-between;}
#section5 .secWrap .leftWrap .topArea {}
#section5 .secWrap .leftWrap .topArea .notiSmall {font-size: 1rem; color: #00325B; font-weight: 500; margin-bottom: 0.5rem;}
#section5 .secWrap .leftWrap .topArea .notiTitle {font-size: 1.7rem; color: #1d1d1d; margin-bottom: 2.5rem; word-break: keep-all; font-weight: 700;}
#section5 .secWrap .leftWrap .tab-menu {display: flex; flex-flow: column wrap; align-items: flex-start; justify-content: space-between; width: 100%; gap: 1rem; font-weight: 600; margin-bottom: 7rem;}
#section5 .secWrap .leftWrap .tab-menu .notiTab {cursor: pointer; transition: 0.3s; color: #93B7D0; display: flex; flex-flow: row wrap; align-items: center; color: #838383;}
#section5 .secWrap .leftWrap .tab-menu .notiTab.active {color: #00325B; font-weight: 800;}
#section5 .secWrap .leftWrap .tab-menu .notiTab:hover {color: #00325B;}
#section5 .secWrap .leftWrap .tab-menu .notiTab .title {margin-right: 1rem;}
#section5 .secWrap .leftWrap .tab-menu .notiTab .iconArea {display: none;}
#section5 .secWrap .leftWrap .tab-menu .notiTab.active .iconArea {display: flex; flex-flow: row nowrap; align-items: center; justify-self: center; position: relative;}
#section5 .secWrap .leftWrap .tab-menu .notiTab.active .iconArea .arrow {position: absolute; left: -10px; bottom: 0.5px; transition: 0.2s ease-in-out;}
#section5 .secWrap .leftWrap .tab-menu .notiTab:hover .iconArea .arrow {left: 0px;}
#section5 .secWrap .leftWrap .tab-menu .notiTab.active .iconArea .circle {width: 22px; height: 22px; border-radius: 12px; border: 1px solid #00325B;}
#section5 .secWrap .leftWrap .bottomArea { background: url('../images/main/section5_buttonBg.jpg') center left / cover no-repeat; overflow: hidden;  border-radius: 3rem; padding: 0.7rem 2rem ; color: #fff; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; font-size: 0.9rem; gap: 1rem;}
#section5 .secWrap .leftWrap .bottomArea .left {flex: 1;}
#section5 .secWrap .leftWrap .bottomArea .left .small {font-size: 0.9em; margin-bottom: 5px; color: #00B0C7; font-weight: 600;}
#section5 .secWrap .leftWrap .bottomArea .right {width: fit-content; font-size: 0.9em; color: #00325B; background-color: #fff; padding: 5px 10px; border-radius: 1rem; font-weight: 600;}
#section5 .secWrap .leftWrap .bottomArea .right .icon {margin-left: 10px;}

#section5 .secWrap .rightWrap {flex: 1;}
#section5 .secWrap .rightWrap .notiCont { display: none; flex-flow: row wrap; align-items: stretch; justify-content: space-between;  position: relative;}
#section5 .secWrap .rightWrap .notiCont.active {display: flex;}
#section5 .secWrap .rightWrap .notiCont > div {width: calc( ( 100% - 2rem ) / 2 ); display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: flex-start; gap: 2rem; }
#section5 .secWrap .rightWrap .notiCont .left {position: absolute; top: -20rem; left: 0; }
#section5 .boxArea {aspect-ratio: 1; width: 100%; min-width: 100%; position: relative; border-radius: 1rem; overflow: hidden; display: flex; flex-flow: column wrap; align-items: flex-start; justify-content: space-between; cursor: pointer; background-color: #ccc; position: relative;}
#section5 .notiCont .boxArea {position: relative;}
#section5 .notiCont .boxArea .imgArea {    width: 100%;  object-fit: cover;  height: 100%;  min-height: 100%;}
#section5 .notiCont .boxArea .imgArea img {height: 100%; width: 100%;object-fit: cover; object-position: center center;}
#section5 .notiCont .boxArea .textArea {display: none; transition: 0.2s ease-in-out;}
#section5 .notiCont .boxArea:hover .textArea {    width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute;  top: 0;  z-index: 1; color: #fff;  overflow: hidden;  display: flex; flex-flow: column wrap;  align-items:stretch; justify-content: space-between; gap: 2rem;  padding: 1.7rem; font-size: 1rem;}

#section5 .boxArea .top { line-height: 1.5; width: 100%; height: fit-content;}
#section5 .boxArea .top .title {font-size: 1.25rem; margin-bottom: 0.5rem; word-break: keep-all;display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
#section5 .boxArea .top .detail {text-align: justify; word-break: break-all; font-size: 0.9rem; display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
#section5 .boxArea .bottom {width: 100%; color: #fff; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; height: fit-content;}
#section5 .boxArea .bottom .date {font-size: 0.8rem;}
#section5 .boxArea .bottom .iconArea {position: relative;  display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; width: fit-content; min-width: 80px;}
#section5 .boxArea .bottom .iconArea .arrow {position: absolute; left: 29px; top: 6px; }
#section5 .boxArea .bottom .iconArea .circle {width: 40px; height: 40px; border-radius: 25px; border: 1px solid #fff;}


#section5 .secWrap .rightWrap .notiCont .right {position: absolute; bottom: -20rem; right: 0; }
#section5 .notiCont .boxArea.ver3:hover .textArea  {justify-content: center;}




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

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

    #section3 .topWrap {max-width: 95vw;}
    #section3 .botWrap {max-width: 95vw;}
    #section5 .secWrap {max-width: 95%;}

    
    #section3 .newsWrap .imgArea {max-height: 295px;}

    #section3 .topWrap {margin: 1rem 0 2rem;}
    #section3 .titleArea {min-height: 47px; margin-bottom: 0.5rem;}
    #section3 .tab-menu .tab {font-size: 1.15rem;}
    #section3 .tab-menu2 .tab2 {font-size: 1.15rem;}
    #section3 .notiArea {padding: 1rem;}

}

@media only screen and (max-width: 1280px){
    #section3 .titleArea { min-height: 46px; }
    #section3 .titleArea .plusArea {font-size: 0.8rem;}
    #section3 .titleArea .plusArea .text {margin-right: 0.8rem;}
    #section3 .titleArea .title {font-size: 1.3rem;}
    #section3 .notiArea {border-radius: 0.5rem;  min-height: 110px; padding: 1rem;}
    #section3 .notiArea .notiCont .title {font-size: 1rem; display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
    #section3 .notiArea .notiCont .text {font-size: 0.8rem;}
    #section3 .annoArea {border-radius: 0.5rem; padding: 1.2rem;}
    #section3 .annoArea .left .annoTitle {font-size: 1rem;}
    #section3 .listWrap .list {font-size: 0.9rem; padding: 0.9rem;}
    #section3 .listWrap .list .date {font-size: 0.9em;}
    #section3 .newsWrap .imgArea {border-radius: 0.5rem; max-height: fit-content; height: auto;}
    #section3 .listWrap.heightPlus {min-height: 220px; max-height: 220px;}
    #section3 .listWrap { min-height: 113px;  max-height: 113px;}
    #section3 .tab-menu .tab {font-size: 1.05rem;}
    #section3 .tab-menu2 .tab2 {font-size: 1.05rem;}

    #section4 .titleArea {margin-bottom: 2rem;}

    #section5 .notiCont .boxArea:hover .textArea  {justify-content: center!important;}

}



@media only screen and (max-width: 1024px){
    
    #mainWrap #section1.mainSection { background: linear-gradient(45deg, #051C3B, #000000);}
    #mainWrap #section2.mainSection {background: linear-gradient(45deg, #0d2935, #0d1b2d);}
    
    #section1 .mainVideo {position: relative;}
    #section1 .mainVideo video.web {display: none;}
    #section1 .mainVideo video.mobile {display: flex;width: 100%;}
    #section2 .mainVideo {position: relative;}
    #section2 .mainVideo video.web {display: none;}
    #section2 .mainVideo video.mobile {display: flex;width: 100%;}

    #section3 .topWrap {gap:1.5rem}
    #section3 .titleArea {min-height: 40px; }
    #section3 .titleArea .title {font-size: 1.1rem;}
    #section3 .leftWrap .listWrap {max-height: 94px; overflow: hidden; min-height: 94px;}
    #section3 .botWrap .listWrap {min-height: 186px;}
    #section3 .rightWrap .listWrap {max-height: 185px; overflow: hidden; min-height: 185px;}
    #section3 .listWrap .list { font-size: 0.85rem; padding: 0.7rem; }
    #section3 .listWrap .list .date {display: none;}
    #section3 .botWrap .listWrap .date {display: flex; min-width: 193px;}
    #section3 .annoArea {min-height: 100px;}
    #section3 .annoArea .left { width: fit-content; flex: 1;}
    #section3 .annoArea .left .annoTitle {font-size: 0.9rem; gap: 0.5rem;}
    #section3 .annoArea .left .annoText {font-size: 0.8rem;}
    #section3 .annoArea .annoDate {font-size: 0.7rem;}
    #section3 .decoBox {font-size: 0.7rem;}
    #section3 .newsWrap .textArea .title {font-size: 1em;}
    #section3 .newsWrap .imgArea { max-height: 165px;}
    #section3 .tab-menu .tab.active {margin-top: 5px;}
    #section3 .tab-menu2 .tab2.active {margin-top: 5px;}
    #section3 .tab-menu .tab {padding: 0.3rem 0.5rem; border-radius: 7px 7px 0 0; font-size: 0.9rem;}
    #section3 .tab-menu2 .tab2 {padding: 0.3rem 0.5rem; border-radius: 7px 7px 0 0; font-size: 0.9rem;}
    #section3 .notiArea { min-height: 94px;}
    #section3 .notiArea .notiCont .text {-webkit-line-clamp: 1;}

    #section4 .sec4Swiper {padding: 0 2.5vw;}
    #section4 .swiper-slide {border-radius: 0.5rem;}
    #section4 .swiper-slide.swiper-slide-next::after {top: calc( ( 100% - 33px ) / 2 );  right: calc( ( 100% - 33px ) / 2 ); font-size: 2rem; } 
    #section4 .titleArea {flex-flow: column wrap; align-items: center; justify-content: center; margin-bottom: 1.5rem;}
    #section4 .titleArea .plusArea {position: unset; top: 0; bottom: 0;}
    #section4 .titleArea .plusArea .iconArea {padding-bottom: 4px;}
    #section4 .titleArea .plusArea .iconArea .arrow {position: unset;}
    #section4 .titleArea .plusArea .iconArea .circle {display: none;}
    

    #section5 .boxArea .top .title {font-size: 1rem;}
    #section5 .boxArea .top .detail {font-size: 0.9rem;}
    #section5 .secWrap .leftWrap .bottomArea {flex-flow: column wrap; gap: 0.5rem; align-items: flex-start; border-radius: 1rem; padding: 1rem;}
    #section5 .secWrap .rightWrap .notiCont > div {gap: 1rem;}


}

@media only screen and (max-width: 768px){
    .pagination-indicator {display: none;}
    #mainWrap .mainSection {width: 100%; height: auto; padding: 5rem 0;}

    .mainTopBtn {top: 90px;}
    .mainTopBtn .topBtn {gap: 7px;}
    .mainTopBtn .topBtn .textArea {font-size: 0.7rem;}
    .mainTopBtn .topBtn .icon {font-size: 0.7rem;}

    #section1.mainSection {padding: 0;}
    #section2.mainSection {padding: 0;height: 100vh;}
    #section2 .mainVideo {width: 100%;height: auto;}
    #section2 .mainVideo video.mobile {height: auto;}
    #section5.mainSection {height: 100vh; padding: 0;}

    #section3 .topWrap {flex-flow: column wrap; gap: 2rem; margin-bottom: 2rem;}
    #section3 .topWrap .rightWrap {width: 100%;}
    #section3 .rightWrap .listWrap {max-height: 94px; overflow: hidden; min-height: 94px;}
    #section3 .listWrap .list .date {display: inline-block;}
    #section3 .annoArea {flex-flow: column wrap;}
    #section3 .annoArea .right {width: 100%; justify-content: flex-start; margin-top: 5px;}
    #section3 .newsWrap .imgArea {height: 250px; overflow: hidden; max-height: unset; min-height: unset;}
    #section3 .deco {font-size: 12px;}
    #section3 .listWrap .list .date.line2 {font-size: 0.7rem; min-width: 56px;}
    

    #section4 .swiper-slide {filter: brightness(100%);}
    #section4 .swiper-slide:hover {transform: scale(1.15); z-index: 3;}
    #section4 .swiper-slide::after {content: '\f144';  font-family: 'Font Awesome 5 Free'; position: absolute; top: calc( ( 100% - 33px ) / 2 );  right: calc( ( 100% - 33px ) / 2 ); z-index: 4; color: #fff; font-size: 2rem; line-height: 0.9;} 
    #section4 .titleArea {max-width: 70%;}
    #section4 .titleArea .title {font-size: 1.7rem;}
    #section4 .titleArea .plusArea {font-size: 0.8rem;}
    
    
    #section5 .secWrap {gap: 3rem;}
    #section5 .secWrap .leftWrap .topArea .notiSmall {font-size: 0.9rem;}
    #section5 .secWrap .leftWrap .topArea .notiTitle {font-size: 1.5rem;}
    #section5 .secWrap .leftWrap .tab-menu .notiTab .title {font-size: 0.9rem;}
    #section5 .secWrap .rightWrap .notiCont > div {  width: calc((100% - 1rem) / 2);}
    #section5 .secWrap .rightWrap .notiCont .left {top: -15rem;}
    #section5 .secWrap .rightWrap .notiCont .right {bottom: -15rem;}
    #section5 .boxArea {border-radius: 0.5rem;}
    #section5 .secWrap .leftWrap .bottomArea {border-radius: 0.5rem;}
    #section5 .secWrap .leftWrap .bottomArea .left {margin-bottom: 1rem;}

    
}

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

    #section2.mainSection {height: auto;}
    
    #section3 .leftWrap .listWrap {max-height: 76px; min-height: 76px;}
    #section3 .rightWrap .listWrap {max-height: 76px; min-height: 76px;}
    #section3 .listWrap .list {padding: 0.5rem; font-size: 0.8rem;}
    #section3 .listWrap .list .date {display: none;}
    #section3 .notiArea .date .day {font-size: 1rem;}
    #section3 .notiArea .date .month {font-size: 0.7rem;}
    #section3 .notiArea .notiCont .title {font-size: 0.9rem;}
    #section3 .notiArea .notiCont .text {font-size: 0.8rem;}
    #section3 .annoArea .left .annoTitle .title { display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
    #section3 .annoArea .left .annoTitle {gap: 5px; margin-bottom: 0.5rem;}
    #section3 .titleArea .title {font-size: 1.05rem;}
    #section3 .botWrap .listWrap {min-height: 175px;}
    #section3 .listWrap .list .date.line2 {font-size: 0.6rem; min-width: 48px;}
    
    #section4 .sec4Swiper {width: 95%;}
    #section4 .titleArea .title {font-size: 1.4rem;}
    #section4 .swiper-slide {filter: brightness(100%); }
    #section4 .swiper-slide.swiper-slide-next {transform: unset;}

    #section5 .secWrap {gap: 0; flex-flow: column wrap;}
    #section5 .secWrap .leftWrap {        position: absolute;  width: 100%;  top: 5vh;  max-width: 95vw;}
    #section5 .secWrap .leftWrap .topArea .notiTitle {margin-bottom: 0.8rem;}
    #section5 .secWrap .leftWrap .tab-menu {margin-bottom: 0;flex-flow: row nowrap; align-items: center; justify-content: space-between;}
    #section5 .secWrap .leftWrap .tab-menu .notiTab {width: 24%; text-align: center;}
    #section5 .secWrap .leftWrap .tab-menu .notiTab .title {margin-right: 0;         width: 100%;}
    #section5 .secWrap .leftWrap .tab-menu .notiTab .iconArea {display: none;}
    #section5 .secWrap .leftWrap .tab-menu .notiTab.active .iconArea {display: none;}
    #section5 .secWrap .leftWrap .bottomArea {position: absolute; right: 0;  bottom: -55vh; flex-flow: row wrap;  align-items: center;        width: 100%;}
    #section5 .secWrap .leftWrap .bottomArea .left {margin-bottom: 0;}
    #section5 .secWrap .rightWrap {width: 100%;        position: absolute; bottom: calc( ( 100vh - 236px ) / 2 ); top: unset;  max-width: 95vw;}
    #section5 .secWrap .rightWrap .notiCont .left {bottom: 0;        top: -12rem;}
    #section5 .secWrap .rightWrap .notiCont .right {bottom: 0;        top: -12rem;}
    #section5 .boxArea {max-height: 126px; overflow: hidden; }
    #section5 .boxArea .top .title {font-size: 0.8rem; margin-bottom: 0;}
    #section5 .boxArea .top .detail {display: none;}
    #section5 .secWrap .leftWrap .topArea { padding-top: 80px; }
    
}

@media only screen and (max-width: 375px){
    #section5 .secWrap .leftWrap .topArea { padding-top: 60px; }
    #section5 .secWrap .leftWrap .topArea .notiTitle {font-size: 1.2rem;}
    #section5 .secWrap .leftWrap .tab-menu .notiTab .title {font-size: 0.8rem;}
    #section5 .secWrap .leftWrap .bottomArea {bottom: -65vh;}
}