@charset "UTF-8";

.visual {position: relative;}
.visual-swiper {position: relative; width: 100%;}
.ul-visual {width: 100%; height: 100%;}
.ul-visual>.item {width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat;}
.visual .slogan-area {font-family: 'Gmarket Sans'; color: #000;}
.visual .slogan-area.white {color: #fff;}
.visual .slogan-area.darkgray {color: var(--darkgray);}
.visual .slogan-area .slogan {font-weight: 700; font-size: 3.125rem;}
.visual .slogan-area .slogan-txt {font-weight: 300; font-size: 1.375rem; line-height: 1.5; white-space: pre-line;}
.swiper-pagination-bullet {width: 10px; height: 10px; background: transparent; border: 1px solid #fff; opacity: 1;}
.swiper-pagination-bullet.white {border: 1px solid #fff;}
.swiper-pagination-bullet.darkblue {border: 1px solid #131857;}
.swiper-pagination-bullet-active {background: #fff;}
.swiper-pagination-bullet-active.white {background: #fff;}
.swiper-pagination-bullet-active.darkblue {background: #131857;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 24px;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 3px;}

section:nth-child(odd) {background-color: #fff;}
section:nth-child(even):not(.visual) {background-color: #DAEBF6;}

section:not(.visual) .title1 {line-height: 1; display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 14px;}

.section1 .ul-board {display: grid; grid-template-columns: repeat(2, 1fr);}
.section1 .ul-board .thumb {position: relative; display: block; width: 100%; height: 300px; border-radius: 10px 10px 0 0; overflow: hidden;}
.section1 .ul-board .thumb img {display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; object-fit: cover;}
.section1 .ul-board .thumb .title2 {position: absolute; bottom: 0; width: 100%; padding: 16px 20px; background: rgba(0, 0, 0, .77); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.section2 .ul-board {display: grid; grid-template-columns: repeat(4, 1fr);}
.section2 .ul-board .item {background: #fff; border-radius: 10px 10px 0 0; overflow: hidden; box-shadow: 0 0 14px var(--shadow);}
.section2 .ul-board .thumb {position: relative; display: block; width: 100%; padding-bottom: calc(100% - 12px); border: 6px solid #fff; border-radius: 10px 10px 0 0; overflow: hidden;}
.section2 .ul-board .thumb img {display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; object-fit: cover;}
.section2 .ul-board .tit {padding: 9px 26px 15px; font-weight: 500; font-size: 1.125rem; color: var(--darkgray); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.section3 .ul-board {display: grid; grid-template-columns: repeat(3, 1fr);}
.section3 .ul-board .item {background: #fff;}
.section3 .ul-board .thumb {position: relative; display: block; width: 100%; padding-bottom: 73.4375%; border-radius: 10px; overflow: hidden; box-shadow: 0 0 14px var(--shadow);}
.section3 .ul-board .thumb img {display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; object-fit: cover;}
.section3 .ul-board .tit {padding: 20px 26px 0; font-weight: 500; font-size: 1.125rem; color: var(--darkgray); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.press {padding: 80px 0;}
.press .ul-board .item {display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; column-gap: 50px; flex-wrap: wrap;}
.press .ul-board .item::after {display: block; content: ''; width: 100%; height: 1px; background: #999999; margin: 10px 0;}
.press .ul-board .item:last-child::after {margin-bottom: 0;}
.press .ul-board .tit {width: calc(100% - 140px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.press .ul-board .date {width: 90px;}

.contact {background: url('../img/main/bg_contactus.jpg') no-repeat; background-size: cover; padding: 80px 0;}
.contact .title1 {color: #fff;}
#map {width: 100%; height: 300px; margin-bottom: 24px;}
.ul-info {display: grid; grid-template-columns: repeat(4, 1fr);}
.ul-info .title2 {color: #fff; margin-bottom: 10px;}
.ul-info .text2 {color: #eee;}
.btn-move {width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; background: var(--highlight); color: #fff; border-radius: 999px; margin: 0 auto;}

.partner {position: relative;}
.swiper-partner {height: 190px;}
.swiper-partner .swiper-slide {display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.swiper-prev, .swiper-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%);}
.swiper-prev {left: -60px;}
.swiper-next {right: -60px;}
.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){
    .title1 .btn-plus {margin-left: 14px;}

    .press .ul-board .tit {margin-right: 50px;}
}



@media screen and (max-width:1200px){
    .ul-visual>.item {padding-left: 36px; padding-right: 36px;}

    section:not(.visual) {padding-left: 36px; padding-right: 36px;}

    .section1 .ul-board .thumb {height: auto; padding-bottom: 51.020408%;}
}

@media screen and (min-width:993px){
    .visual-swiper {height: 540px;}
    .ul-visual>.item {padding-top: 150px;}
    .visual1 {background-color: #fff; background-image: url('../img/main/visual1.jpg');}
    .visual2 {background-color: #fff; background-image: url('../img/main/visual2.jpg');}
    .visual3 {background-color: #fff; background-image: url('../img/main/visual3.jpg');}
    .visual .slogan-area .slogan {margin-bottom: 24px;}

    section:not(.visual) {padding-top: 100px; padding-bottom: 100px;}

    .section1 .ul-board, .section2 .ul-board, .section3 .ul-board {gap: 24px;}
    
    .ul-info {gap: 24px;}

    .btn-move {padding: 24px 100px; margin-top: 100px;}
}

@media screen and (max-width:992px){
    .visual-swiper {height: auto; padding-bottom: 100%;}
    .ul-visual {position: absolute;}
    .ul-visual>.item {padding-top: 70px; background-position: center bottom;}
    .visual1 {background-color: #fff; background-image: url('../img/main/visual1_m@4x.jpg');}
    .visual2 {background-color: #fff; background-image: url('../img/main/visual2_m@4x.jpg');}
    .visual3 {background-color: #fff; background-image: url('../img/main/visual3_m@4x.jpg');}
    .visual .slogan-area .slogan {margin-bottom: 20px;}

    section:not(.visual) {padding-top: 70px; padding-bottom: 70px;}

    .section1 .ul-board, .section2 .ul-board, .section3 .ul-board {gap: 16px;}

    .section3 .ul-board .tit {padding: 18px 22px 0;}

    .ul-info {gap: 16px;}

    .btn-move {padding: 20px 70px; margin-top: 70px;}
}

@media screen and (max-width:768px){
    .ul-visual>.item {padding-left: 32px; padding-right: 32px;}

    section:not(.visual) {padding-left: 32px; padding-right: 32px;}

    .section2 .ul-board {grid-template-columns: repeat(2, 1fr);}

    .section3 .ul-board {grid-template-columns: unset;}

    .ul-info {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width:480px){
    .visual-swiper {padding-bottom: 150%;}
    .ul-visual>.item {padding-top: 62px; padding-left: 16px; padding-right: 16px;}
    .visual .slogan-area {text-align: center;}
    .visual .slogan-area .slogan {margin-bottom: 16px;}

    section:not(.visual) {padding-top: 60px; padding-bottom: 60px; padding-left: 16px; padding-right: 16px;}
    section:not(.visual) .title1 {gap: 8px;}

    .section1 .ul-board, .section2 .ul-board, .section3 .ul-board {gap: 12px;}

    .section1 .ul-board {grid-template-columns: 1fr; gap: 20px;}
    .section1 .ul-board .thumb .title2 {padding: 8px 10px;}

    .section2 .ul-board .tit {padding: 4px 12px 10px;}

    .press .ul-board .item {column-gap: 30px;}
    .press .ul-board .tit {width: calc(100% - 98px);}
    .press .ul-board .date {width: 68px;}

    #map {height: 200px; margin-bottom: 22px;}
    .ul-info {grid-template-columns: unset; gap: 26px;}
    .btn-move {padding: 20px 60px; margin-top: 60px;}



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

        .press .ul-board .tit {margin-right: 30px;}
    }
}