@charset "utf-8";

section:not(.main-visual) {padding: 100px 0;}

.tit-area {display: flex; justify-content: space-between; align-items: center; padding-bottom: 48px;}
.main-tit {font-size: var(--font-48); font-weight: 700; padding-bottom: 48px;}
.tit-area .main-tit {padding-bottom: 0;}

.main-visual {position: relative;}
.main-visual .swiper .swiper-slide {position: relative; height: 47vw; background-position: center; background-size: cover; background-repeat: no-repeat;}
.main-visual .swiper .swiper-slide::before {position: absolute; width: 100%; height: 100%; background-color: #000; opacity: 0.6; top: 0; left: 0; display: block; content: ''; z-index: 3}
.main-visual .swiper .swiper-slide::after {position: absolute; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(45,81,234,1) 99%); opacity: 0.25; top: 0; left: 0; display: block; content: ''; z-index: 5;}
.main-visual .swiper .swiper-slide:nth-of-type(1) {background-image: url(../img/main/main_banner-1.jpg);}
.main-visual .swiper .swiper-slide:nth-of-type(2) {background-image: url(../img/main/main_banner-2.jpg);}
.main-visual .swiper .swiper-slide:nth-of-type(3) {background-image: url(../img/main/main_banner-3.jpg);}
.main-visual .swiper .swiper-slide:nth-of-type(4) {background-image: url(../img/main/main_banner-4.jpg);}
/*.main-visual .swiper .swiper-slide-active {animation: bgZoomFade 3s ease forwards;}*/

.main-cate > ul {display: flex; column-gap: 20px;}
.main-cate > ul li {display: flex; height: 600px; overflow: hidden; transition: all .5s ease;}
.main-cate > ul li .cate_li {flex: 1; position: relative; display: flex; overflow: hidden; border-radius: var(--round);}
.main-cate > ul li .cate_li > img {position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; object-fit: cover;}
.main-cate > ul li:hover {flex-shrink: 0;}
.main-cate > ul li .cate_li .btn-circle {position: absolute; z-index: 100; right: 32px; bottom:50px; opacity: 1; transition: opacity .4s;}
.main-cate > ul li .cate_li .cate-info {flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 50px; color: #fff; transition: background .5s, height .3s;;}
.main-cate > ul li .cate_li .cate-info::before {position: absolute; width: 100%; height: 100%; background-color: #000; opacity: 0.4; top: 0; left: 0; display: block; content: ''; z-index: 3}
.main-cate > ul li .cate_li .cate-info::after {position: absolute; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(45,81,234,1) 99%); opacity: 0.25; top: 0; left: 0; display: block; content: ''; z-index: 5;}
.main-cate > ul li .cate_li .cate-info .cate-tit {display: block; position: relative; z-index: 100; top: 0; left: 32px; font-size: var(--font-42); transform: rotate(90deg); transition: width .3s; transform-origin: top left;}
.main-cate > ul li .cate_li .cate-info-bottom .cate-text {width: 600px; opacity: 0; position: relative; z-index: 100; transition: opacity .4s; letter-spacing: -.5px; line-height: 1.6; font-size: var(--font-18);}
.main-cate > ul li .cate_li .cate-info-bottom .btn-default {opacity: 0; position: relative; z-index: 100; margin-top: 60px;}
.main-cate > ul li .cate_li .cate-info-bottom .btn-default-w:hover {background-color: #fff; }
.main-cate > ul li .cate_li .cate-info-bottom .btn-default-w:hover span {color: var(--primary);}
.main-cate > ul li .cate_li .cate-info-bottom .btn-default-w:hover svg path {fill: var(--primary);}

.main-cate > ul li:hover .cate_li .cate-info::before,
.main-cate > ul li:hover .cate_li .cate-info::after {display: none;}
.main-cate > ul li:hover .cate_li .cate-info {width: 800px; background: rgba(25,152,223,.85); z-index: 10;}
.main-cate > ul li:hover .cate_li .btn-circle {opacity: 0;}
.main-cate > ul li:hover .cate_li .cate-info-bottom .cate-text,
.main-cate > ul li:hover .cate_li .cate-info-bottom .btn-default {opacity: 1; }
.main-cate > ul li:hover .cate_li .cate-info .cate-tit {transform: rotate(0); top: 0!important; left: 0!important;}



.main-visual .main-info {position: absolute; top: 50%; left: 0; transform: translate(0, -50%); z-index: 10;}
.main-visual .main-info h2 {font-size: var(--font-64); padding-bottom: 40px;}
.main-visual .main-info p {font-size: var(--font-20); color: var(--text_w); font-weight: 500;}
.main-visual .main-info .main-pagination-area {position: relative; display: flex; margin-top: 80px; align-items: center;}
.main-visual .main-info .main-pagination-area .circle {position: relative; width: 42px; height: 42px; margin-right: 40px;}
.main-visual .main-info .main-pagination-area .autoplay-progress {position: absolute;right: 0;bottom: 0;z-index: 10;width: 42px;height: 42px;display: flex;align-items: center;justify-content: center;font-weight: bold;color: var(--text_w);}
.main-visual .main-info .main-pagination-area .autoplay-progress svg {--progress: 0;position: absolute;left: 0;top: 0px;z-index: 10; width: 100%; height: 100%; stroke-width: 3px; stroke: var(--text_w);fill: none; stroke-dashoffset: calc(125.6px * (1 - var(--progress)));stroke-dasharray: 125.6;transform: rotate(-90deg);}
.main-visual .main-info .main-pagination-area .autoplay-progress span {font-size: var(--font-15); font-family: "Nunito Sans", sans-serif;}
.main-visual .main-info .main-pagination-area .swiper-button-next,
.main-visual .main-info .main-pagination-area .swiper-button-prev {position: revert; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin-top: 0;}
.main-visual .main-info .main-pagination-area .swiper-pagination {position: revert;}
.main-visual .main-info .main-pagination-area .swiper-button-prev:after,
.main-visual .main-info .main-pagination-area .swiper-rtl .swiper-button-next:after,
.main-visual .main-info .main-pagination-area .swiper-button-next:after,
.main-visual .main-info .main-pagination-area .swiper-rtl .swiper-button-prev:after {content: '';}
.main-visual .main-info .main-pagination-area .swiper-pagination-fraction {width: auto; display: flex; column-gap: 20px; align-items: center; color: var(--text_w); font-size: var(--font-18); padding: 0 30px;}
.main-visual .main-info .main-pagination-area .swiper-pagination-fraction span {font-family: "Nunito Sans", sans-serif;}

.main-notice .inner > ul {display: flex; flex-direction: column;}
.main-notice .inner > ul li {border-bottom: 1px solid var(--line);}
.main-notice .inner > ul li:nth-of-type(1) {border-top: 1px solid var(--bg);}
.main-notice .inner > ul li a {width: 100%; display: flex; align-items: center; padding: 20px 30px; column-gap: 40px;}
.main-notice .inner > ul li a .lt_info {width: 100%; padding: 0;}
.main-notice .inner > ul li a .lt_info .lt_info_t {display: flex; align-items: flex-start; column-gap: 4px;}
.main-notice .inner > ul li a .lt_info .lt_title {font-size: var(--font-23); font-weight: 600; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.main-notice .inner > ul li a .lt_info .lt_thumb {color: var(--text2); font-size: var(--font-17); display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.main-notice .inner > ul li a:hover {background-color: var(--bg3);}
.main-notice .inner > ul li a .date-area {width: 85px; display: flex; flex-direction: column; align-items: center; row-gap: 4px;}
.main-notice .inner > ul li a .date-area .lt_day {font-size: 60px; font-weight: 700; color: var(--primary); font-family: "Nunito Sans", sans-serif;}
.main-notice .inner > ul li a .date-area .lt_date_bottom {display: flex; align-items: center; font-weight: 600;}
.main-notice .inner > ul li a .date-area .lt_date_bottom .lt_year,
.main-notice .inner > ul li a .date-area .lt_date_bottom .lt_month {font-weight: 600; font-family: "Nunito Sans", sans-serif;}


.main-company .inner {position: relative; background-image: url(../img/main/company.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: var(--round);}
.main-company .inner::before {position: absolute; width: 100%; height: 100%; background-color: #000; opacity: 0.6; top: 0; left: 0; display: block; content: ''; z-index: 3; border-radius: var(--round);}
.main-company .inner::after {position: absolute; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(45,81,234,1) 99%); opacity: 0.25; top: 0; left: 0; display: block; content: ''; z-index: 5; border-radius: var(--round);}
.main-company .com-info {position: relative; z-index: 10; padding: 42px 80px; border-radius: var(--round);}
.main-company .com-info p {font-size: var(--font-15); color: var(--text_w);}
.main-company .com-info h4 {font-size: var(--font-28); font-weight: 700; line-height: 1.4; color: var(--text_w); padding-top: 28px; padding-bottom: 26px;}

section.main-community {background-color: var(--secondary3); padding: 120px 0; margin-top: 60px;}
.main-community .swiper-wrapper .swiper-slide {width: 448px;}
.main-community .swiper-wrapper .swiper-slide:nth-of-type(1) {margin-left: 7vw;}
.main-community .swiper-wrapper .swiper-slide a {width: 100%; background-color: var(--text_w); border-radius: var(--round); overflow: hidden; }
.main-community .swiper-wrapper .swiper-slide a .img-wrap {height: 320px; overflow: hidden;}
.main-community .swiper-wrapper .swiper-slide a .img-wrap .img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; transform: scale(1); transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;}
.main-community .swiper-wrapper .swiper-slide a .lt_info {padding: 30px;}
.main-community .swiper-wrapper .swiper-slide a .lt_info_t {display: flex; padding-bottom: 30px;}
.main-community .swiper-wrapper .swiper-slide a .lt_info .lt_title {font-size: var(--font-24); font-weight: 600;}
.main-community .swiper-wrapper .swiper-slide a .lt_info .lt_date {font-size: var(--font-18); color: var(--text3); }
.main-community .swiper-wrapper .swiper-slide a:hover .img-wrap .img {transform: scale(1.1);}
.main-community .swiper-wrapper .swiper-slide a:hover {background-color: var(--primary); transition: all 0.3s;}
.main-community .swiper-wrapper .swiper-slide a:hover .lt_title,
.main-community .swiper-wrapper .swiper-slide a:hover .lt_date {color: var(--text_w); transition: all 0.3s;}

section.main-quick {padding: 120px 0; background-color: var(--bg3);}
.main-quick ul {display: flex; column-gap: 30px;}
.main-quick ul li {width: calc(100% / 3);}
.main-quick ul li a {position: relative; column-gap: 20px; width: 100%; height: 100%; padding: 50px 105px 50px 40px; border-radius: var(--round-l); background-color: var(--text_w); border: 1px solid transparent;}
.main-quick ul li a .info h4 {font-weight: 700; font-size: var(--font-32); padding-bottom: 24px;}
.main-quick ul li a .info p {font-size: var(--font-18); color: var(--text2); word-break: keep-all; line-height: 1.3;}
.main-quick ul li a .btn-circle {position: absolute; right: 40px; bottom: 50px;}

/* .main-quick ul li:hover a {background-color: var(--primary); transition: all 0.3s;}
.main-quick ul li:hover a .info h4,
.main-quick ul li:hover a .info p {color: var(--text_w);}
.main-quick ul li:hover a .btn-circle {background-color: var(--text_w); transition: all 0.3s;}
.main-quick ul li:hover a .btn-circle svg path {fill: var(--primary);}*/

.main-quick ul li:hover a {border: 1px solid var(--primary); transition: all 0.3s;}
.main-quick ul li:hover a .btn-circle {background-color: var(--primary); transition: all 0.3s;}
.main-quick ul li:hover a .btn-circle svg path {fill: var(--text_w);}


.pic_lt ul {margin: 0;}

/* 반응형 */
@media screen and (max-width: 1600px) {
    .main-visual .swiper .swiper-slide {height: 56vw;}
}
@media screen and (max-width: 1440px) {
    .main-community .swiper-wrapper .swiper-slide:nth-of-type(1) {margin-left: 20px;}
    .main-visual .swiper .swiper-slide {height: 64vw;}
}
@media screen and (max-width: 1200px) {

    .main-visual .main-info h2 {padding-top: 6vw; padding-bottom: 3vw;}
    .main-visual .main-info .main-pagination-area {margin-top: 6vw;}
    .main-company .com-info {padding: 40px;}
}
@media screen and (max-width: 1024px) {
    
    .main-visual .main-info h2 {font-size: 7vw; line-height: 7.5vw;}

    .main-cate > ul li:hover .cate_li .cate-info {width: 600px;}
    .main-cate > ul li .cate_li .cate-info-bottom .cate-text {width: 480px;}

    .main-quick ul {flex-direction: column; row-gap: 20px;}
    .main-quick ul li {width: 100%;}
    
}
@media screen and (max-width: 768px) {

    section:not(.main-visual),
    section.main-quick,
    section.main-community {padding: 80px 0;}

    .tit-area {padding-bottom: 40px;}

    .main-visual .swiper .swiper-slide {height: 80vw;}

    .main-cate > ul {flex-direction: column; row-gap: 20px;}
    .main-cate > ul li {height: 120px; transition: height .4s; cursor: pointer;}
    .main-cate > ul li.open {height: auto;}
    .main-cate > ul li .cate_li {border-radius: 20px;}
    .main-cate > ul li .cate_li .cate-info {padding: 30px;}
    .main-cate > ul li .cate_li .cate-info .cate-tit,
    .main-cate > ul li:hover .cate_li .cate-info .cate-tit {left: 0; top: 50% !important; transform: translateY(-50%) !important; font-size: 36px;}
    .main-cate > ul li .cate_li .cate-info-bottom .cate-text {width: 100%;}
    .main-cate > ul li .cate_li .cate-info-bottom .btn-default {margin-top: 40px;}
    .main-cate > ul li .cate_li .btn-circle {bottom: auto; top: 50%; transform: translateY(-50%);}

    .main-cate > ul li:hover .cate_li .cate-info::before,
    .main-cate > ul li:hover .cate_li .cate-info::after {display: block;}
    .main-cate > ul li:hover .cate_li .cate-info {background: transparent;}
    .main-cate > ul li:hover .cate_li .btn-circle {opacity: 1;}
    .main-cate > ul li:hover  .cate_li .cate-info-bottom .cate-text,
    .main-cate > ul li:hover  .cate_li .cate-info-bottom .btn-default {opacity: 0;}

    .main-cate > ul li.open .cate_li .cate-info::before,
    .main-cate > ul li.open .cate_li .cate-info::after {display: none;}
    .main-cate > ul li.open .cate_li .cate-info {width: 100%; background: rgba(25,152,223,.85); z-index: 10; row-gap: 60px;}
    .main-cate > ul li.open .cate_li .btn-circle {opacity: 0;}
    .main-cate > ul li.open .cate_li .cate-info-bottom .cate-text,
    .main-cate > ul li.open .cate_li .cate-info-bottom .btn-default {opacity: 1; }
    .main-cate > ul li.open .cate_li .cate-info .cate-tit {transform: rotate(0) !important; top: 0!important; left: 0!important;}

    .main-notice .inner > ul li a {column-gap: 24px; padding: 20px 12px;}
    .main-notice .inner > ul li a .date-area {width: 60px;}
    .main-notice .inner > ul li a .date-area .lt_day {font-size: 40px;}
    .main-notice .inner > ul li a .date-area .lt_date_bottom {font-size: 12px;}
    .main-notice .inner > ul li a .arrow svg {width: 32px; height: 32px;}
    .main-notice .inner > ul li a .lt_info .lt_title {font-size: 18px;}

    .main-community .swiper {width: calc(100% - 40px);}
    .main-community .swiper-wrapper .swiper-slide:nth-of-type(1) {margin-left: 0;}

    .main-quick ul li a {padding: 40px 95px 40px 32px;}
    .main-quick ul li a .info h4 {padding-bottom: 16px;}
    .main-quick ul li a .btn-circle {bottom: 40px; right: 32px;}
}
@media screen and (max-width: 600px) {
    .main-visual .main-info h2 {font-size: 8vw; line-height: 8.5vw;}
    .main-visual .main-info p {font-size: 3vw;}
    .main-visual .main-info .main-pagination-area .swiper-pagination-fraction {padding: 0 4vw; font-size: 3.4vw; column-gap: 3vw;}
    .main-visual .main-info .main-pagination-area .circle,
    .main-visual .main-info .main-pagination-area .autoplay-progress {width: 8vw; height: 8vw;}
    .main-visual .main-info .main-pagination-area .swiper-button-next,
    .main-visual .main-info .main-pagination-area .swiper-button-prev {width: 3vw; height: 3vw;}
    .main-visual .main-info .main-pagination-area .autoplay-progress span {font-size: 3vw;}
}
@media screen and (max-width: 500px) {

    .main-visual .main-info h2 {padding-top: 10vw; font-size: 10vw; line-height: 9.5vw;}
    .main-visual .main-info p {font-size: 4vw;}
    .main-visual .main-info .main-pagination-area .swiper-pagination-fraction {padding: 0 5vw; font-size: 4vw; column-gap: 4vw;}
    .main-visual .main-info .main-pagination-area .circle,
    .main-visual .main-info .main-pagination-area .autoplay-progress {width: 8vw; height: 8vw;}
    .main-visual .main-info .main-pagination-area .swiper-button-next,
    .main-visual .main-info .main-pagination-area .swiper-button-prev {width: 4vw; height: 4vw;}
    .main-visual .main-info .main-pagination-area .autoplay-progress span {font-size: 3.2vw;}
    .main-visual .swiper .swiper-slide {height: 100vw;}

    .main-cate > ul {row-gap: 10px;}
    .main-cate > ul li {height: 100px;}
    .main-cate > ul li .cate_li {border-radius: 16px;}
    .main-cate > ul li .cate_li .cate-info .cate-tit,
    .main-cate > ul li .cate_li .cate-info-bottom .cate-text {word-break: keep-all;}
    .main-cate > ul li .cate_li .cate-info-bottom .cate-text br {display: none;}
    .main-cate > ul li.open .cate_li .cate-info {row-gap: 40px;}
    .main-cate > ul li .cate_li .cate-info .cate-tit,
    .main-cate > ul li:hover .cate_li .cate-info .cate-tit {font-size: 32px;}
    .main-cate > ul li .cate_li .cate-info-bottom .btn-default {margin-top: 30px;}

    .main-company .com-info {padding: 30px;}
    .main-company .com-info h4 br {display: none;}

    .main-notice .inner > ul li a {padding: 20px 10px;}
    .main-notice .inner > ul li a .arrow {display: none;}

    section.main-community {margin-top: 20px;}
    .main-community .swiper-wrapper .swiper-slide a .img-wrap {height: 65vw;}


}
@media screen and (max-width: 340px) {

    .main-tit {font-size: 36px;}
    .tit-area {padding-bottom: 30px;}

    .main-company .com-info h4 {font-size: 20px; padding-top: 20px; padding-bottom: 18px;}
    .main-company .com-info .btn-default {width: 100%;}

    .main-quick ul li a {padding: 30px 70px 30px 28px;}
    .main-quick ul li a .info h4 {font-size: 24px; padding-bottom: 12px;}
    .main-quick ul li a .info p {font-size: 15px;}
}