@charset "utf-8";
section:not(.main-visual):not(.main-cont) {padding: 75px 0;}

.main-visual {position: relative;}
.main-visual .swiper .swiper-slide {height: 47vw; background: url(../img/main/main_banner-1.jpg) no-repeat center center; background-size: cover;}
.main-visual .swiper .swiper-slide:nth-of-type(2) { background: url(../img/main/main_banner-2.jpg) no-repeat center center; background-size: cover;}
.main-visual .main-pagination-area {position: absolute; left: 50%; bottom: 170px; transform: translate(0, -50%); z-index: 1;}
.main-visual .main-pagination-area .swiper-pagination {position: revert; display: flex; column-gap: 20px;}
.main-visual .main-pagination-area .swiper-pagination .swiper-pagination-bullet {width: 15px !important; height: 15px !important; border-radius: 50% !important; background-color: var(--text_w); margin: 0 !important;}
.main-visual .main-pagination-area .swiper-pagination .swiper-pagination-bullet-active {width: 33px !important; padding-left: 18px !important; background-color: var(--primary) !important; transition: all 0.3s; border-radius: 24px !important;}

.main-tit {position: relative; display: inline-block; font-family: 'Taenada'; font-size: 32px; line-height: 60px;}
.main-tit::after {position: absolute; width: 90px; height: 3px; left: 50%; bottom: 0; transform: translate(-50%, 0); background-color: #C4FA2F; display: block; content: '';}

.main-cont {position: relative; z-index: 1; margin-top: -130px; display: flex; padding-bottom: 75px;}
.main-cont > div {width: 50%; height: 322px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 60px 70px 36px 70px;}
.main-cont > div h5 {font-size: 24px; color: #2B2B2B; padding-bottom: 14px;}
.main-cont > div p {color: #2B2B2B; font-weight: 500; word-break: keep-all; line-height: 23px;}
.main-cont > div .img-wrap {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
.main-cont > div .img-wrap::after {position: absolute; width: 100%; height: 322px; top: 0; left: 0; background-color: #C4FA2F; opacity: 0.7; display: block; content: '';}
.main-cont > .main-cont-r h5,
.main-cont > .main-cont-r p {color: #fff;}
.main-cont > .main-cont-r .img-wrap::after {background-color: #2B2B2B;}

.main-mid {position: relative;}
.main-mid .bg {position: absolute; background-color: #2B2B2B; top: 150px; left: 0;; width: 100%; height: 410px; display: block; z-index: -1;}
.main-mid .bg::before,
.main-mid .bg::after {position: absolute; width: 128px; height: 348px; background: url(../img/main/TOS-logo.svg) no-repeat center center; background-size: contain; display: block;; content: ''; opacity: 0.2;}
.main-mid .bg::before {left: 0; bottom: 127px;}
.main-mid .bg::after {right: 0; top: 135px}
.main-mid .swiper {width: 100%; height: 100%;}
.main-mid .inner {display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 34px;}
.main-mid .main-tit {margin-bottom: 8px;}
.main-mid .main-poster .swiper-slide {background-color: #fff; border-radius: 5px; box-shadow: 0 0 14px 2px rgba(130, 130, 130, 0.25);}
.main-mid .main-poster .swiper-slide .img-wrap {display: flex; justify-content: center; align-items: center;}
.main-mid .main-poster .swiper-slide .img-wrap img {width: auto; height: 100%;}

.main-sponsor {display: flex; flex-direction: column; row-gap: 41px; align-items: center; justify-content: center; margin-bottom: 75px;}
.main-sponsor .sponsor-slide-area {width: 100%; display: flex; overflow: hidden;}
.main-sponsor .sponsor-slide-area > * {flex: 0 0 100%;}
.main-sponsor .sponsor-slide-area .slide-group {display: flex;  justify-content: space-between; column-gap: 40px; will-change: transform; animation: scrolling 40s linear infinite;}
.main-sponsor .sponsor-slide-area .slide-group:nth-of-type(1) {padding-right: 40px;}
.main-sponsor .sponsor-slide-area .slide-group .sponsor-slide {width: 290px; height: 110px; display: flex; align-items: center; justify-content: center;}
.main-sponsor .sponsor-slide-area .slide-group .sponsor-slide img {cursor: pointer;}
.main-sponsor .sponsor-slide-area .slide-group .sponsor-slide img.hover {display: none;}
.main-sponsor .sponsor-slide-area .slide-group .sponsor-slide:hover img.hover {display: block;}
.main-sponsor .sponsor-slide-area .slide-group .sponsor-slide:hover img.black {display: none;}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.btn-default {display: flex; justify-content: center; align-items: center; column-gap: 12px; width: 176px; height: 42px;}
.btn-default > span {color: #000;}
.btn-default > svg path {fill: #000;}

.bg_black {background-color: #2B2B2B;}
.bg_black > span {color: #fff;}
.bg_black > svg path {fill: #fff;}
.bg_ygreen {background-color: #C4FA2F;}


/* 반응형 */
@media screen and (max-width: 1280px) {
    .main-cont > div {height: auto; overflow: hidden; row-gap: 30px;}

    .main-visual .main-pagination-area {bottom: 12vw;}
    .main-visual .main-pagination-area .swiper-pagination .swiper-pagination-bullet {width: 1.2vw !important; height: 1.2vw !important;}
}

@media screen and (max-width: 1024px) {
    .main-cont {flex-wrap: wrap; padding: 0; margin-top: 24px;}
    .main-cont > div { padding: 40px 50px;}

    .main-visual .main-pagination-area {bottom: 20px;}
    .main-visual .main-pagination-area .swiper-pagination .swiper-pagination-bullet {width: 10px !important; height: 10px !important;}
}

@media screen and (max-width: 768px) {
    .main-visual .swiper .swiper-slide {height: 54vw;}

    .main-cont > div {width: 100%;}
}

@media screen and (max-width: 600px) {
    section:not(.main-visual):not(.main-cont) {padding: 60px 0;}
    .main-sponsor {margin-bottom: 10px;}
}

@media screen and (max-width: 500px) {
    
    section:not(.main-visual):not(.main-cont) {padding: 30px 0;}

    .inner .main-tit {padding: 0;}
    .main-tit {width: 100%; font-size: 24px; padding: 0 20px; line-height: normal;}
    .main-tit::after {left: 20px; transform: none; bottom: -8px;}

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

    .main-cont > div {padding: 8vw 4vw;}

    .main-mid .bg {display: none;}
    .main-mid .swiper {box-shadow: 0 0 14px 2px rgba(130, 130, 130, 0.25); border-radius: 5px;}
    .main-mid .main-poster .swiper-slide {box-shadow: none; border-radius: 0;}
    .main-mid .inner .btn-default {display: none;}

    .main-sponsor {margin-bottom: 40px;}

}

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

    .main-cont > div {row-gap: 20px;}
    .main-cont > div h5 {font-size: 20px;}

    .btn-default {width: 130px; height: 40px;}
    .btn-default span {font-size: 15px;}
    .btn-default svg {width: 16px; height: auto;}

}