@charset "UTF-8";

.visual {position: relative;}
.swiper-visual {position: relative; width: 100%;}
.swiper-visual .swiper-pagination-bullet {width: 10px; height: 10px; background: transparent; border: 1px solid #fff;}
.swiper-visual .swiper-pagination-bullet-active {background: #fff;}
.ul-visual {width: 100%; height: 100%;}
.visual1 {width: 100%; height: 100%; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background-color: #fff; background-repeat: no-repeat; background-size: cover; background-position: right center;}
.visual1 .inner {max-width: 1475px; position: relative; z-index: 2;}
.visual1 .img-area {margin: 0 auto;}
.visual1 .img-area img {display: block; width: 100%; height: 100%; object-fit: contain;}
.visual .title-area {color: var(--dark);}
/* .visual .title-area .tit {font-family: "Gmarket Sans", sans-serif; font-weight: 700; font-size: 3.125rem; line-height: 1.4;} */
.visual .title-area .tit {font-family: "Gmarket Sans", sans-serif; font-weight: 700; font-size: 2.75rem; line-height: 1.4;}
.visual .title-area .tit>span {font-weight: 300; letter-spacing: -0.018em;}
.visual .title-area .tit .tint {color: #3553e7;}
.visual .title-area .txt {font-weight: 300; font-size: 1.375rem; margin-top: 1.875rem;}

.link-banner {padding: 100px 0;}
.link-banner .ul-board {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;}
.link-banner .ul-board .thumb {position: relative; display: block; width: 100%; height: 180px; padding: 34px 30px 20px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, .12);}
.link-banner .ul-board .thumb::after {content: ''; width: 100%; height: 100%; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65);}
.link-banner .ul-board .thumb img {width: 100%; height: 100%; display: block; object-fit: cover; position: absolute; inset: 0;}
.link-banner .ul-board .thumb .txt {position: relative; font-weight: 400; font-size: 1rem; color: #fff; z-index: 1; margin-bottom: 10px;}
.link-banner .ul-board .thumb .title2 {position: relative; color: #fff; z-index: 1;}
.link-banner .ul-board .thumb .btn-more {position: absolute; bottom: 20px; left: 30px; z-index: 1;}

.link-banner .ul-board .thumb img {transition: filter .2s linear;}
.link-banner .ul-board .thumb:hover img {filter: blur(3px);}
.link-banner .ul-board .thumb .btn-more i {transition: transform .2s linear;}
.link-banner .ul-board .thumb:hover .btn-more i {transform: translateX(10px);}

.cs {padding-bottom: 100px;}
.cs .ul-board {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.cs .ul-board .item {background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, .12);}
.cs .ul-board .item .circle {width: 140px; height: 140px; background: #fff; border: var(--border-solid); border-radius: 50%; margin: 0 auto; margin-bottom: 14px;}
.cs .ul-board .item .circle img {display: block; width: 100%; height: 100%; object-fit: cover;}
.cs .ul-board .box {height: 100%; padding: 30px; display: block;}
.cs .ul-board .box>img {width: 50px; height: 50px; object-fit: contain; display: block; margin-bottom: 14px;}
.cs .ul-board .title2 {display: block; margin-bottom: 10px;}
.cs .ul-board .txt {white-space: pre-line; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--primary);}

.archive {padding: 100px 0; background: var(--magnolia);}
.archive-area {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.archive .title1 {max-width: max-content; display: -webkit-flex; display: flex; justify-content: start; align-items: center; column-gap: 14px;}
.archive .title1:hover .btn-plus {transform: rotate(180deg);}
.archive .text2 {margin-top: 14px;}
.ul-archive {grid-column: 2 / span 2; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; gap: 24px;}
.ul-archive .empty {grid-column: 1 / span 2; text-align: center;}
.ul-archive img {display: block; width: 100%; height: 100%; object-fit: cover;}
.ul-archive .thumb {position: relative; display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, .12);}
.ul-archive .dim {position: absolute; right: 0; bottom: -50px; left: 0; padding: 13px 24px; background: rgba(255, 255, 255, .8); font-weight: 700; font-size: 1.25rem; color: var(--darkgray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .5s, bottom .5s;}
.ul-archive .thumb:hover .dim {bottom: 0; opacity: 1;}

.notice {padding: 100px 0;}
.notice .box {background: #fff; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, .12);}
.notice .cate {padding: 16px 30px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; column-gap: 50px; flex-wrap: wrap; border-bottom: var(--border-solid); font-weight: 500; font-size: 1.25rem; color: var(--darkgray);}
.notice .cate:hover .btn-plus {transform: rotate(180deg);}
.notice .ul-board .item {display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; column-gap: 50px; flex-wrap: wrap; padding: 9px 30px;}
.notice .ul-board .item:first-child {padding-top: 21px;}
.notice .ul-board .item:last-child {padding-bottom: 21px;}
.notice .ul-board .subject {width: calc(100% - 140px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.notice .ul-board .date {width: 90px;}

.partner {position: relative; border-top: var(--border-solid);}
.swiper-partner {height: 190px;}
.swiper-partner .swiper-slide {display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.partner-prev, .partner-next {display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 1.875rem; color: #E2E2E2; position: absolute; top: 50%; transform: translateY(-50%); font-family: "Font Awesome 6 Free"; font-weight: 900;}
.partner-prev {left: -60px;}
.partner-prev::before {content: '\f053';}
.partner-next {right: -60px;}
.partner-next::before {content: '\f054';}
.swiper-partner a {display: block; width: 100%; max-width: 300px; height: 80px;}
.swiper-partner a img {display: block; width: 100%; height: 100%; object-fit: cover;}





/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    .link-banner .ul-board .item {margin-right: 24px;}
    .link-banner .ul-board .item:nth-child(3n) {margin-right: 0;}
    .cs .ul-board .item {margin-right: 24px;}
    .cs .ul-board .item:nth-child(3n) {margin-right: 0;}
    .archive .btn-plus {margin-left: 14px;}
    .notice .cate .btn-plus {margin-left: 50px;}
    .notice .ul-board .tit {margin-right: 50px;}
}



@media screen and (max-width:1200px){
    .visual .title-area .tit, .visual .title-area .txt {padding: 0 50px;}
    .visual1 {background-position: 85% center;}
    .visual2 {background-position: 72% center;}

    .link-banner, .archive, .notice {padding: 100px 50px;}

    .cs {padding-left: var(--inner-padding-l); padding-right: var(--inner-padding-r);}
}

@media screen and (min-width:993px){
    .swiper-visual {height: 520px;}
}

@media screen and (max-width:992px){
    .swiper-visual {height: 390px;}

    .link-banner, .archive, .notice {padding: 75px 50px;}
    .link-banner .ul-board .thumb {padding: 26px 24px 15px;}

    .cs {padding-bottom: 75px;}
    .cs .ul-board .box {padding: 24px;}

    .ul-archive {grid-auto-rows: 200px;}
    .archive .title1 {column-gap: 10px;}
    .archive .text2 {margin-top: 10px;}

    .notice .ul-board .tit {width: calc(100% - 130px);}
    .notice .ul-board .date {width: 80px;}



    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0){
        .archive .btn-plus {margin-left: 10px;}
    }
}

@media screen and (max-width:768px){
    .visual .title-area .tit, .visual .title-area .txt {padding: 0 40px;}

    .link-banner, .archive, .notice {padding: 50px 40px;}
    .link-banner .ul-board {grid-template-columns: unset;}
    .link-banner .ul-board .thumb {padding: 24px 20px 13px;}
    .link-banner .ul-board .thumb .btn-more {bottom: 13px; left: 20px;}

    .cs {padding-bottom: 50px; padding-left: 40px; padding-right: 40px;}
    .cs .ul-board {grid-template-columns: unset;}
    .cs .ul-board .box {padding: 20px;}
    .cs .ul-board .item .circle {width: 100px; height: 100px;}

    .archive-area {grid-template-columns: 1fr}
    .ul-archive {grid-column: unset;}
}

@media screen and (max-width:480px){
    .swiper-visual {height: 330px;}
    .visual1 .visual-bg video {object-position: center bottom;}
    .visual1 {background-position: 64% center;}
    .visual2 {background-position: 66% center;}
    .visual .title-area .tit, .visual .title-area .txt {padding: 0 12px; padding-right: 40%;}

    .link-banner, .archive, .notice {padding: 40px 12px;}
    .link-banner .ul-board {gap: 10px;}
    .link-banner .ul-board .thumb {height: 120px; padding: 20px 18px 10px;}
    .link-banner .ul-board .thumb .txt {margin-bottom: 6px;}
    .link-banner .ul-board .thumb .btn-more {bottom: 10px; left: 16px;}

    .cs {padding-bottom: 40px; padding-left: 12px; padding-right: 12px;}
    .cs .ul-board {gap: 10px;}
    .cs .ul-board .box {padding: 18px;}
    .cs .ul-board .item .circle {width: 70px; height: 70px; margin-bottom: 11px;}

    .archive-area {gap: 10px;}
    .ul-archive {gap: 10px; grid-auto-rows: 140px;}
    .archive .title1 {column-gap: 8px;}
    .archive .text2 {margin-top: 8px;}

    .notice .cate {padding: 13px 18px; column-gap: 30px;}
    .notice .ul-board .item {column-gap: 30px; padding: 6px 18px;}
    .notice .ul-board .item:first-child {padding-top: 12px;}
    .notice .ul-board .item:last-child {padding-bottom: 12px;}
    .notice .ul-board .tit {width: calc(100% - 98px);}
    .notice .ul-board .date {width: 68px;}

    .swiper-partner {height: 140px;}



    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0){
        .link-banner .ul-board .item {margin-right: 0; margin-bottom: 10px;}
        .link-banner .ul-board .item:last-child {margin-bottom: 0;}
        .cs .ul-board .item {margin-right: 0; margin-bottom: 10px;}
        .cs .ul-board .item:last-child {margin-bottom: 0;}
        .archive .btn-plus {margin-left: 10px;}
        .notice .cate .btn-plus {margin-left: 30px;}
        .notice .ul-board .tit {margin-right: 30px;}
    }
}