@charset "utf-8";

.main {overflow: hidden;}
.mo {display: none;}
section {padding-bottom: 160px;}
.section-header {margin-top: 140px;}
.section-header h3 {position: relative; font-size: 48px; font-weight: 600; color: #000; line-height: 1; display: inline-block; padding-right: 15px;}
.section-header h3::after {position: absolute; content: ''; width: 6px; height: 6px; background-color: #004ea2; top: 3px; right: 0;}
.section-header p {font-size: 18px; line-height: 28px; color: #333; font-weight: 400; margin-top: 35px;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 720px; position: relative; }
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease;}
.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.jpg);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.jpg);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.jpg);} 
.m-visual .visual .swiper-wrapper .slide04 .backdrop {background-image: url(../images/main/m-visual04.jpg);} 
.m-visual .visual .swiper-wrapper .slide05 .backdrop {background-image: url(../images/main/m-visual05.jpg);} 
.m-visual .visual .swiper-wrapper .slide06 .backdrop {background-image: url(../images/main/m-visual06.jpg);} 
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1.1);}
.m-visual .visual .swiper-wrapper .swiper-slide .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {position: absolute; top: 290px; left: 0; font-size: 65px; line-height: 80px; color: #fff; font-weight: 600;  width: 100%; opacity: 0; transition: all 1.2s ease .5s; text-align: center;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 220px; left: 0; font-size: 26px; line-height: 40px; color: #fff; font-weight: 400; width: 100%; opacity: 0; transition: all 1.2s ease .1s; text-align: center;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 330px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 260px; opacity: .8;}

.controls {position: absolute; display: flex; align-items: center; bottom: 60px; left: 50%; transform: translateX(-50%); width: 280px; height: 15px; z-index: 5;}
.controls .bar-area {width: 215px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-right: 32px;}
.controls .bar-area .visual-pagination {width: 63px; color: #fff; font-size: 14px; font-weight: 400;}
.swiper-pagination-current {padding-right: 8px;}
.swiper-pagination-total {padding-left: 8px;}
.controls .bar-area .progress-box {position: relative; max-width: 120px; width: 100%; height: 2px;}
.controls .bar-area .progress-box .autoplay-progress {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255,255,255, .4);}
.controls .bar-area .progress-box .autoplay-progress svg {--progress:0; position: absolute; left: 0; top: 0; width: 100%; stroke-width: 2px; stroke: #fff; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100;}
@keyframes gbar {
	0%{width: 0;}
	100% {width: 100%;}
}

.controls .btns {width: 8px; height: 12px; background: url() 50% 50% no-repeat; background-size: auto;}
.controls .btns.visual-prev {background-image: url(../images/main/ico_prev.png); margin-right: 18px;}
.controls .btns.visual-next {background-image: url(../images/main/ico_next.png);} 

.scroll {position: absolute; z-index: 1; bottom: 60px; right: 92px; width: 12px; height: 123px; background: url(../images/main/scroll.png) 50% 50% no-repeat;background-size: auto; animation: bounce 1.3s ease infinite;}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
  
    40% {
      transform: translateY(-10px);
    }
  
    60% {
      transform: translateY(-5px);
    }
}

/* sec2 - sec3 */
.cnt-wrap {width: 100%; margin-top: 55px;}
.tab {margin-bottom: 40px;}
.tab ul {width: auto; display: flex; gap: 8px;}
.tab ul li {max-width: 150px; width: 100%;}
.tab ul li a {display: block; width: 100%; line-height: 55px; text-align: center; font-size: 18px; font-weight: 500; color: #999; background-color: #f5f5f5; border-radius: 30px;}
.tab ul li.active a{background-color: #004ea2; color: #fff;}
.cnt-wrap .cnt {width: 100%;}
.cnt-wrap .cnt > .swiper {width: 100%; height: 240px;}
.cnt-wrap .cnt > .swiper .swiper-slide {height: 100%;}
.cnt-wrap .cnt > .swiper .swiper-slide .txt-box {display: block; border: 1px solid #ddd; border-radius: 10px; padding: 40px 40px 0; height: 100%; transition: all .2s linear;}
.cnt-wrap .cnt > .swiper .swiper-slide .txt-box:hover {border-color: #004ea2;}
.cnt-wrap .cnt > .swiper .swiper-slide .txt-box dl {color: #e8e8e8; transition: all .2s linear;}
.cnt-wrap .cnt > .swiper .swiper-slide .txt-box:hover dl {color: #004ea2;}
.cnt-wrap .cnt > .swiper .swiper-slide .txt-box dl dt {font-size: 43px; font-weight: 700;}
.cnt-wrap .cnt > .swiper .swiper-slide .txt-box dl dd {font-size: 14px; font-weight: 600;}
.cnt-wrap .cnt > .swiper .swiper-slide .txt-box h5 {font-size: 20px; height: 60px; color: #333; font-weight: 700; line-height: 30px; display: -webkit-box; word-wrap: break-word;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-top: 25px; word-break: break-all;}
.cnt-wrap .cnt > .swiper .swiper-slide .txt-box p {font-size: 16px; line-height: 26px; color: #666; margin-top: 15px; display: -webkit-box; word-wrap: break-word;  -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-break: break-all;}
.cnt-wrap .cnt {height: 0; visibility: hidden; position: relative; overflow: hidden;}
.cnt-wrap .cnt.show {height: auto; visibility: visible; overflow: visible;}

.cnt-btns {position: absolute; top: -100px; right: 0; width: 196px; height: 60px; display: flex; gap: 8px; z-index: 2;}
.cnt-btns .cnt-btn {width: 33.3333%; height: 100%; border-radius: 50%; background: url() 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.cnt-btns .cnt-btn.cnt-prev {background-image: url(../images/main/ico_prev2.png); border: 1px solid #ddd;}
.cnt-btns .cnt-btn.cnt-next {background-image: url(../images/main/ico_next2.png); border: 1px solid #ddd;}
.cnt-btns .cnt-btn.cnt-more {background-image: url(../images/main/ico_plus.png); background-color: #f5f5f5;}
.cnt-btns .cnt-btn.cnt-prev:hover {background-image: url(../images/main/ico_prev2_on.png); border-color: #004ea2;}
.cnt-btns .cnt-btn.cnt-next:hover {background-image: url(../images/main/ico_next2_on.png); border-color: #004ea2;}
.cnt-btns .cnt-btn.cnt-more:hover {background-image: url(../images/main/ico_plus_on.png); background-color: #004ea2;}

.sec3 {background-color: #f5f5f5; padding-top: 140px;}
.sec3 .section-header {margin-top: 0;}
.sec3 .tab ul li a {border:1px solid #ddd; color: #999;}
.sec3 .tab ul li.active a {color: #fff; border-color: #004ea2;}
.sec3 .cnt-wrap .cnt > .swiper {background-color: #fff; height: 240px; border-radius: 10px; overflow: hidden;}
.sec3 .cnt-wrap .cnt > .swiper .swiper-slide {padding: 55px 0 70px;}
.sec3 .cnt-wrap .cnt > .swiper .swiper-slide .txt-box {padding: 0; border: 0; padding: 0 50px; border-right: 1px solid #ddd; border-radius: 0;}
.sec3 .cnt-wrap .cnt > .swiper .swiper-slide:nth-of-type(4n) .txt-box {border-right: 0;}
.sec3 .cnt-wrap .cnt > .swiper .swiper-slide .txt-box h5 {transition: all .2s linear; position: relative; margin-top: 0;}
.sec3 .cnt-wrap .cnt > .swiper .swiper-slide:hover .txt-box h5 {color: #004ea2; font-weight: 700; text-decoration: underline;}
.sec3 .cnt-wrap .cnt > .swiper .swiper-slide:hover .txt-box h5::before {opacity: 1;}
.sec3 .cnt-wrap .cnt > .swiper .swiper-slide .txt-box p {margin-top: 20px;}
.cnt-wrap .cnt > .swiper .swiper-slide .txt-box span {display: block; font-size: 14px; font-weight: 500; color: #999; margin-top: 30px; padding-left: 18px; background: url(../images/main/ico_clock.png) 0% 50% no-repeat; background-size: auto;}

.sec3 .cnt-btns .cnt-btn.cnt-more {background-image: url(../images/main/ico_plus_on.png); background-color: #004ea2;}
.sec3 .cnt-btns .cnt-btn.cnt-more:hover {background-image: url(../images/main/ico_plus_on2.png); background-color: transparent; border: 1px solid #004ea2;}

/* sec4 */
.sec4 {padding-bottom: 0;}
.sec4 .section-header {position: relative; padding-bottom: 15px;}
.sec4 .section-header p {max-width: 1200px; width: 100%;}
.sec4 .section-header a.more {position: absolute; bottom: 0; right: 0; width: 60px; height: 60px; border-radius: 50%; background: url(../images/main/ico_plus.png) 50% 50% no-repeat; background-color: #f5f5f5; transition: all .2s linear;}
.sec4 .section-header a.more:hover {background-image: url(../images/main/ico_plus_on.png); background-color: #004ea2;}
.sec4 .intro {width: 100%; margin-top: 40px;}
.sec4 .intro ul {width: calc(100% + 40px); display: flex; margin: 0 -20px;}
.sec4 .intro ul li {width: 20%; padding: 0 20px;}
.sec4 .intro ul li a {display: block; width: 100%;}
.sec4 .intro ul li a .img {width: 100%; overflow: hidden; border-radius: 10px;}
.sec4 .intro ul li a .img img {display: block; max-width: 100%; margin: 0 auto; transition: all .3s linear;}
.sec4 .intro ul li a:hover .img img {transform: scale(1.1);}
.sec4 .intro ul li a .txt {padding: 30px 0; text-align: center; font-size: 22px; color: #333; font-weight: 500; border-bottom: 1px solid #ddd; transition: all .2s linear;}
.sec4 .intro ul li a:hover .txt {color: #004ea2; font-weight: 700; border-color: #004ea2;}

.sec4 .schedule-wrap {width: 100%; margin-top: 70px; display: flex; gap: 40px; min-height: 395px; height: 100%;}
.sec4 .schedule-wrap .calendar {max-width: 850px; width: 100%; border-radius: 10px; overflow: hidden;}
.sec4 .schedule-wrap .calendar .cal-tit {width: 100%; display: flex; align-items: center;}
.sec4 .schedule-wrap .calendar .cal-tit .year-month {max-width: 730px; width: 100%; font-size: 22px; font-weight: 600; color: #fff; background-color: #2d2f39; line-height: 70px; text-align: center;}
.sec4 .schedule-wrap .calendar .cal-btn {max-width: 120px; width: 100%; display: flex; height: 70px; align-items: center;}
.sec4 .schedule-wrap .calendar .cal-btn a {display: block; width: 50%; height: 100%; background: url() 50% 50% no-repeat; background-size: auto; background-color: #00a051;}
.sec4 .schedule-wrap .calendar .cal-btn a.prev-month {background-image: url(../images/main/ico_prev.png);}
.sec4 .schedule-wrap .calendar .cal-btn a.next-month {background-image: url(../images/main/ico_next.png);}
.sec4 .schedule-wrap .calendar .cal-btn a ~ a {border-left: 1px solid rgba(255,255,255, .2);}
.sec4 .schedule-wrap .calendar .cal-btn a img {display: block; margin: 0 auto;}
.sec4 .schedule-wrap .calendar .table-wrap {width: 100%; border: 1px solid #ddd; border-radius: 0 0 10px 10px;}
.sec4 .schedule-wrap .calendar table {width: 100%; table-layout: fixed;}
.sec4 .schedule-wrap .calendar table thead th {/* line-height: 40px; */ padding-top: 16px;}
.sec4 .schedule-wrap .calendar table thead th ~ th {border-left: 1px solid #ddd;}
.sec4 .schedule-wrap .calendar table thead th p {max-width: 70px; width: 100%; line-height: 26px; text-align: center; font-size: 14px; font-weight: 500; color: #2d2f39; background-color: #f5f5f5; margin: 0 auto; border-radius: 5px;}
.sec4 .schedule-wrap .calendar table thead th.sun p {background-color: #fde9e5; color: #ea2404;}
.sec4 .schedule-wrap .calendar table thead th.sat p {background-color: #e5edf6; color: #004ea2;}
.sec4 .schedule-wrap .calendar table tbody td a {display: block; line-height: 56px; text-align: center; font-size: 18px; font-weight: 500; color: #2d2f39; transition: all .2s linear;}
.sec4 .schedule-wrap .calendar table tbody td:hover a {text-decoration: underline; background-color: #e5edf6;}
.sec4 .schedule-wrap .calendar table tbody td ~ td {border-left: 1px solid #ddd;}
.sec4 .schedule-wrap .calendar table tbody td.date-sat a {color: #004ea2;}
.sec4 .schedule-wrap .calendar table tbody td.date-sun a {color: #ea2404;}
.sec4 .schedule-wrap .calendar table tbody tr {border-bottom: 1px dashed #ddd;}
.sec4 .schedule-wrap .calendar table tbody tr:last-child {border-bottom: 0;}

.sec4 .schedule-wrap .schedule {max-width: 550px; width: 100%; border-radius: 10px; overflow: hidden; height: 100%;}
.sec4 .schedule-wrap .schedule .tit {width: 100%; font-size: 22px; color: #fff; font-weight: 600; background-color: #004ea2; line-height: 70px; text-align: center;}
.sec4 .schedule-wrap .schedule .sch-list {width: 100%; padding: 40px 50px 0; min-height: 325px; height: 100%; background-color: #f5f5f5;}
.sec4 .schedule-wrap .schedule .sch-list li {width: 100%; display: flex; align-items: center; line-height: 26px;}
.sec4 .schedule-wrap .schedule .sch-list li ~ li {margin-top: 13px;}
.sec4 .schedule-wrap .schedule .sch-list li small {display: block; font-size: 14px; font-weight: 600; text-align: center; max-width: 70px; width: 100%; border-radius: 5px; background-color: #2d2f39; color: #fff;}
.sec4 .schedule-wrap .schedule .sch-list li a {display: block; font-size: 18px; color: #666; /* max-width: 380px; */ width: 100%; padding-left: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: all .2s linear;}
.sec4 .schedule-wrap .schedule .sch-list li a:hover {color: #004ea2;}

/* sec5 */
.sec5 .section-header p {max-width: 1200px; width: 100%;}
.sec5 .gall-slide {width: 100%; margin-top: 55px; position: relative;}
.sec5 .gall-slide .gallery .gall-item a {width: 100%; display: block;}
.sec5 .gall-slide .gallery .gall-item a .pic {position:relative; height:0; padding-bottom:70.18%; overflow:hidden; border: 1px solid #ddd; border-radius: 10px; transition: all .2s linear;}
.sec5 .gall-slide .gallery .gall-item a .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover;}
.sec5 .gall-slide .gallery .gall-item a .txt {margin-top: 35px; padding: 0 20px;}
.sec5 .gall-slide .gallery .gall-item a .txt h5 {font-size: 20px; font-weight: 600; color: #333; line-height: 30px; transition: all .2s linear;display: -webkit-box; word-wrap: break-word;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-break: break-all; letter-spacing: -.6px;}
.sec5 .gall-slide .gallery .gall-item a .txt span {display: block; max-width: 100px; width: 100%; margin-left: auto; font-size: 14px; font-weight: 500; color: #999; margin-top: 35px; padding-left: 18px; background: url(../images/main/ico_clock.png) 0% 50% no-repeat; background-size: auto;}
.sec5 .gall-slide .gallery .gall-item a:hover .pic {border-color: #004ea2;}
.sec5 .gall-slide .gallery .gall-item a:hover .txt h5 {color: #004ea2; text-decoration: underline;}

/* sec6 */
.sec6 {padding: 0;}
.sec6 .banner {width: 100%; display: flex;}
.sec6 .banner li {width: 33.3333%; height: 480px;}
.sec6 .banner li a {position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: url() 50% 50% no-repeat; background-size: cover; z-index: 1;}
.sec6 .banner li:nth-of-type(1) a {background-image: url(../images/main/img_sec601.jpg);}
.sec6 .banner li:nth-of-type(2) a {background-image: url(../images/main/img_sec602.jpg);}
.sec6 .banner li:nth-of-type(3) a {background-image: url(../images/main/img_sec603.jpg);}
.sec6 .banner li a h5 {font-size: 36px; font-weight: 600; color: #fff; transition: all .2s linear;}
.sec6 .banner li a:hover h5 {opacity: 0;}
.sec6 .banner li a dl {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,78,162, .5); opacity: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2; transition: all .2s linear;}
.sec6 .banner li a:hover dl {opacity: 1;}
.sec6 .banner li a dl dt {max-width: 71px; width: 100%;}
.sec6 .banner li a dl dt img {max-width: 100%; display: block; margin: 0 auto;}
.sec6 .banner li a dl dd {font-size: 36px; font-weight: 600; color: #fff; padding-top: 35px;}