@import url(common.css);
@import url(popup.css);

.main-common-title {
    margin: 100px 0 60px;
    text-align: center;
}
.main-common-title h1 {
    font-size: 2.75rem;
    line-height: 64px;
}
.main-common-title h1 br {
    display: none;
}
.main-common-title p {
    margin-top: 5px;
    font-size: 1.125rem;
    line-height: 160%;
}

/* main slide */
.sec-main-slide {
    padding: 60px 0 80px;
    background: #E20714;
}
.main-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main-title-tbox p {
    color: #fff;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 64px;
}
.main-title-tbox p:last-child {
    font-size: 1.125rem;
    line-height: 26px;
}
.main-btn {
    padding: 15px 35px;
    color: #fff;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 26px;
    border: 2px solid #FFFFFF;
    border-radius: 10px;
}
.main-btn:hover {
    color: #E20714;
    background: #fff;
}

.main-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    padding: 30px 0;
    color: #fff;
    background: #222222;
    border-radius: 20px;
}
.main-time-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.main-time .txt {
    line-height: 43px;
    font-weight: 700;
    font-size: 1.875rem;
}
.main-time span:not(:first-child) {
    font-size: 1.125rem;
    line-height: 26px;
}
.main-time span strong {
    font-size: 2.25rem;
    line-height: 44px;
    font-family: 'Montserrat';
}

.main-swiper {
    overflow: visible;
}
.sec-main-slide .swiper-wrapper {
    /* overflow: hidden; */
}
.main-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    height: 300px;
    background: #FFFFFF;
    border-radius: 20px;
}
.main-slide-left {
    text-align: center;
}
.main-slide-left span {
    display: block;
    margin-top: 10px;
    font-size: 1.375rem;
    line-height: 32px;
}
.main-slide-left span strong {
    color: #E20714;
    font-weight: 700;
}
.main-slide-left .img-box img {
    max-width: 360px;
    max-height: 180px;
}
.main-slide-right .img-tbox {
    display: flex;
    align-items: center;
    line-height: 43px;
    font-size: 1.875rem;
    font-weight: 700;
}
.main-slide-right .img-tbox img {
    vertical-align: middle;
}
.main-slide-right strong {
    display: block;
    margin: 5px 0;
    color: #E20714;
    font-size: 1.375rem;
    line-height: 32px;
}
.main-slide-right .txt {
    word-break: keep-all;
    line-height: 26px;
    font-size: 1.125rem;
}
.main-slide-box {
    display: flex;
    align-items: center;
    margin-top: 30px;
    gap: 5px;
}
.main-slide-box span {
    padding: 8.5px 16px;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
}
.main-slide-box span:first-child {
    position: relative;
    padding-left: 30px;
    background: #222;
}
.main-slide-box span:first-child::after {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    width: 12px;
    height: 20px;
    transform: translateY(-50%);
    background: url(../img/icon-fast.svg) no-repeat center center / contain;
}
.main-slide-box span:last-child {
    background: #E20714;
}
.main-swiper-etc {
    z-index: 100;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.main-swiper-etc .swiper-button-prev {
    left: -40px;
    transform:scaleX(-1);
}
.main-swiper-etc .swiper-button-next {
    right: -40px;
}
.main-swiper-etc .swiper-button-prev,
.main-swiper-etc .swiper-button-next {
    opacity: 1;
    width: 25px;
    height: 50px;
    background: url(../img/icon-arrow-white.svg) no-repeat center center / contain;
}
.main-swiper-etc .swiper-button-prev::after,
.main-swiper-etc .swiper-button-next::after {
    display: none;
}
.main-swiper-etc .swiper-pagination {
    bottom: -190px;
}
.main-swiper-etc .swiper-pagination .swiper-pagination-bullet{
    opacity: 1;
    width: 18px;
    height: 18px;
    background: #FF4F59;
}
.main-swiper-etc .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #fff;
}

/* welcome */
.sec-main-welcome {
    background: linear-gradient(180deg, #FFFDFD 0%, #FFE5E5 100%);
}
.item-box {
    display: flex;
    align-items: center;
    gap: 40px;
}
.item {
    width: 33%;
    text-align: center;
    border-radius: 20px;
    margin-bottom: 120px;
}
.welcome-item {
    padding: 80px 0;
    background: #fff;
    box-shadow: 10px 10px 20px rgba(78, 19, 19, 0.3);
    transition: 0.3s;
}
.welcome-item:hover {
    /* transform: translateY(-30px); */
}
.welcome-item-tbox span {
    display: block;
    margin-bottom: 10px;
    color: #E20714;
    font-weight: 700;
    line-height: 26px;
    font-size: 1.125rem;
}
.welcome-item-tbox strong {
    font-size: 1.625rem;
    line-height: 130%;
}
.welcome-item-tbox p {
    margin: 10px 0;
    line-height: 140%;
    word-break: keep-all;
}

/* first */
.first-item {
    padding: 60px 0;
    background: #FFF4F1;
}
.first-item-txt {
    margin-top: 35px;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 130%;
}
.first-item .img-box img {
    transition: 0.3s;
}
.first-item:hover .img-box img {
    transform: rotate(30deg);
}

/* banner */
.bnr-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 15px 0;
    background: #4148C1;
}
.bnr-box-txt strong {
    color: #fff;
    font-size: 1.625rem;
    line-height: 130%;
}
.bnr-box-txt p {
    position: relative;
    margin-top: 11px;
    padding-left: 22px;
    color: #F7F7FF;
}
.bnr-box-txt p::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 17px;
    height: 30px;
    transform: translateY(-50%);
    background: url(../img/icon-fast.svg) no-repeat center center / contain;
}

/* event */
.event-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 0;
    gap: 150px;
    background: #FFF4F1;
}
.event-bnr-txt strong {
    font-size: 1.125rem;
    line-height: 130%;
    color: #E20714;
}
.event-bnr-txt p.txt {
    margin: 10px 0;
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 130%;
}
.event-bnr-txt p.txt br:first-child {
    display: none;
}
.event-bnr-txt span {
    display: block;
    line-height: 130%;
    word-break: keep-all;
}
.event-bnr-link {
    position: relative;
    display: inline-block;
    margin-top: 60px;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 130%;
}
.event-bnr-link::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -20px;
    width: 8px;
    height: 12px;
    transform: translateY(-50%);
    background: url(../img/icon-arrow-black.svg) no-repeat center center / contain;
}

/* ask */
.sec-main-ask {
    margin-bottom: 120px;
}
.ask-item {
    display: block;
    margin-bottom: 10px;
    padding: 23.5px 120px;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 35px;
    background: #F5F5F3;
    border-radius: 20px;
}

/* 반응형 */
@media all and (max-width:1400px) {
    .sec-main-slide {
        padding-left: 50px;
        padding-right: 50px;
    }
    .item-box,
    .ask-item-box {
        margin: 0 50px;
    }
}

@media all and (max-width:1024px) {
    .welcome-item {
        padding: 40px 10px;
    }
    .welcome-item-box {
        align-items: stretch;
        gap: 20px;
    }
    .welcome-item-box strong,
    .first-item-txt {
        font-size: 1.25rem;
    }
    .welcome-item .img-box img {
        width: 100%;
        max-width: 150px;
    }
    .event-banner {
        padding: 20px;
        gap: 30px;
    }
    .event-bnr-img img {
        width: 100%;
    }
    .event-bnr-txt p.txt {
        font-size: 1.5rem;
    }
    
}
@media all and (max-width:767px) {
    .sec-main-slide {
        padding: 60px 20px;
        overflow: hidden;
    }
    .main-title {
        flex-direction: column;
    }
    .main-title-tbox {
        text-align: center;
    }
    .main-title-tbox p:first-child {
        line-height: 43px;
        font-size: 1.875rem;
    }
    .main-btn {
        margin-top: 20px;
    }
    .main-time {
        gap: 3px;
        flex-direction: column;
        margin: 40px 0 20px;
        padding: 20px;
    }
    .main-time .txt {
        line-height: 32px;
        font-size: 1.375rem;
    }
    .main-time span strong {
        font-size: 1.875rem;
    }
    .main-swiper {
        position: static;
    }
    .main-swiper.swiper-css-mode>.swiper-wrapper {
        overflow: visible;
    }
    .sec-main-slide .swiper-wrapper {
        overflow: visible;
    }
    .main-slide {
        gap: 0;
        flex-direction: column;
        height: auto;
        padding: 30px 25px;
    }
    .main-slide-left .img-box img {
        width: 100%;
    }
    .main-slide-left span {
        position: absolute;
        margin-top: 0;
        right: 25px;
        font-size: 1.125rem;
    }
    .main-slide-right .logo img {
        max-width: 30px;
        padding-bottom: 3px;
    }
    .main-slide-right .img-tbox {
        line-height: 32px;
        font-size: 1.375rem;
    }
    .main-slide-right strong {
        margin: 10px 0 5px;
        padding-top: 10px;
        font-size: 1.125rem;
        border-top: 1px dashed #AAAAAA;
    }
    .main-slide-right .txt {
        line-height: 23px;
        font-size: 1rem;
    }
    .main-swiper-etc .swiper-button-prev, .main-swiper-etc .swiper-button-next {
        display: none;
    }
    .main-swiper-etc {
        position: static;
        transform: translateY(0);
    }
    .main-swiper-etc .swiper-pagination {
        bottom: -40px;
    }

    .main-common-title {
        margin: 60px auto 30px;
    }
    .main-common-title h1 {
        line-height: 43px;
        font-size: 1.875rem;
        word-break: keep-all;
    }
    .main-common-title h1 br {
        display: block;
    }
    .welcome-item-box {
        flex-direction: column;
        margin: 0 20px;
        gap: 0;
        padding-bottom: 60px;
    }
    .welcome-item.item {
        width: 100%;
        margin-bottom: 40px;
    }
    .welcome-item.item:last-child {
        margin-bottom: 0;
    }
    .first-item-box  {
        flex-direction: column;
        margin: 0 20px 60px;
    }
    .first-item {
        width: 100%;
        margin-bottom: 0;
        text-align: center;
        border-radius: 20px;
    }
    .first-item-txt {
        font-size: 1.625rem;
    }
    .bnr-box {
        flex-direction: column;
        padding: 100px 30px;
    }
    .bnr-box-txt {
        text-align: center;
    }
    .bnr-box-txt strong {
        font-size: 1.375rem;
    }
    .bnr-box-txt p {
        font-size: 1.125rem;
    }
    .event-banner {
        gap: 20px;
        flex-direction: column;
        padding: 60px 20px;
        text-align: center;
    }
    .event-bnr-txt strong {
        font-size: 1.25rem;
    }
    .event-bnr-txt p.txt {
        margin: 20px auto;
        font-size: 1.875rem;
    }
    .event-bnr-txt p.txt br:first-child {
        display: block;
    }
    .event-bnr-txt span {
        max-width: 230px;
        margin: 0 auto;
    }
    .event-bnr-link {
        margin-top: 30px;
    }
    .item-box, .ask-item-box {
        margin: 0 20px 60px;
    }
    .ask-item {
        padding: 30px 20px;
    }
}

@media all and (max-width:320px) {
    .sec-main-slide {
        padding: 50px 20px;
    }
    .main-title-tbox p:first-child {
        font-size: 1.25rem;
    }
    .main-title-tbox p:last-child {
        font-size: 1rem;
    }
    .main-time span strong {
        font-size: 1.125rem;
    }
    .main-slide {
        padding: 20px;
    }
    .main-slide-left span,
    .main-slide-right .img-tbox,
    .main-slide-right strong {
        font-size: 1rem;
    }
    .main-slide-right .txt {
        font-size: 0.875rem;
    }
    .bnr-box-txt strong {
        font-size: 1.125rem;
    }
    .bnr-box-txt p {
        font-size: 1rem;
    }
    .event-bnr-txt strong {
        font-size: 1.125rem;
    }
    .event-bnr-txt p.txt {
        font-size: 1.5rem;
    }
    .first-item {
        padding: 40px 0;
    }
    .first-item-txt {
        margin-top: 20px;
        font-size: 1.375rem;
    }
    .bnr-box {
        padding: 50px 30px;
    }
}