@charset "utf-8";
main {
    padding: 0px 16px;
    background-color: #FFFAF5;
    text-align: center;
}
/* main-visual */
.main-visual {
    padding: 128px 0;
}
.main-visual__wrapper {
    margin: auto;
    /* max-width: 1000px; */
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: center;
}
.main-visual__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}
.main-visual__text-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.main-visual__title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.main-visual__item__lists__wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    gap: 8px;
    width: 100%;
    overflow: hidden;
}
.main-visual__item__lists {
    height: 37.6%;
}
.main-visual__item__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.main-visual__item {
    width: 100%;
    height: 100%;
}
.main-visual__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.main-visual__item__left, .main-visual__item__right {
    height: 100%;
}
/* popular */
.popular {
    padding: 0 0 64px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}
.popular__copy__text-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.popular__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.popular__copy__text-area {
    display: flex;
}
/* blog-items */
.blog__item__lists {
    margin: auto;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.blog__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.blog__item__wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.blog__item__inner {
    position: relative;
    max-width: 1000px;
}
.blog__item__icon img{
    width: 100%;
    height: 100%;
}
.blog__item__icon {
    transition: .4s ease-out;
}
.blog__item__icon:hover {
    opacity: 80%;
    transition: .4s ease-out;
}
.blog__item__tag {
    display: flex;
    border-radius: 4px;
    background-color:#FFFAF5;
    position: absolute;
    top: 8px;
    left: 8px;
}
.ja__h4 {
    text-align: initial;
}
.blog__item__tag-title {
    padding: 8px;
    display: flex;
    border-right: solid 1px #E5E1DC;
}
.blog__item__tag-date {
    padding: 8px;
    display: flex;
}
/* destination */
.destination {
    padding: 64px 0;
}
.destination__container {
    margin: auto;
    max-width: 1000px;
}
.destination__wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.destination__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.destination__item__icon {
    transition: .4s ease-out;
}
.destination__item__icon:hover {
    opacity: 80%;
    transition: .4s ease-out;
}
/* tab-swiper */
.slide__tabs {
    overflow-x: scroll; 
}
.slick-list {
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar { 
        display: none;
    }
}
.slick-track {
    width: max-content !important;
    transform: none !important;
}

.slide__tabs__wrap {
    overflow-x: scroll; 
}
.slide__tabs {
    width: 100%;
    display: flex;
    border-top: 1px solid#093F86;
    border-bottom: 1px solid#093F86;
    overflow-x: scroll;
    width: max-content;

}
.tab {
    width: 166px;
    padding: 8px 32px;
}
.destination__tab-active {
    background-color: #093F86;
}
.destination__tab-default {
    background-color: #FFFAF5;
    border-right: 1px solid #093F86;
}
/* destination-list */
.destination__lists__wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.destination__copy {
    text-align: initial;
}
.destination__lists__inner {
    display: grid;
    grid-template-columns: repeat(1,100%);
    gap: 16px; 
}
.destination__item {
    position: relative;
}
.en__h5 {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 999;
}
.load-more {
    width: 100%;
}
/* recent */
.section-post {
    padding: 64px 0;
}
.section-post__container {
    margin: auto;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.section-post__wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.section-post__inner {
    display: flex;
    justify-content: center;
}
.pc__view-all {
    display: none;
    margin: initial;
    height: fit-content;
}
.se__view-all {
    width: 100%;
}
/* moments */
.moments {
    padding: 64px 0 128px;
}
.moments__container {
    margin: auto;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.moments__wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.moments__inner {
    display: flex;
    justify-content: center;
}
.moments__text-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.moments__h2 {
    width: max-content;
}
.pc__moments__text-area {
    display: none;
}
.moments__item__lists {
    display: grid;
    grid-template-columns: repeat(2,49.2%);
    gap: 8px 8px; 
}
@media screen and (min-width:768px) {
    /* main */
    main {
        padding: 0px 32px;
    }
    /* main-visual */
    .main-visual {
        padding: 128px 0;
    }
    .main-visual__wrapper {
        max-width: 1000px;
        gap: 64px;
    }
    .main-visual__inner {
        gap: 32px;
    }
    .main-visual__text-area {
        gap: 24px;
    }
    .main-visual__title {
        gap: 16px;
    }
    .main-visual__item__lists__wrapper {
        gap: 16px;
        max-height: 480px;
    }
    .main-visual__item__inner {
        gap: 16px;
    }
    /* popular */
    .popular {
        padding: 0 0 128px;
        gap: 128px;
    }
    .popular__copy__text-area {
        gap: 16px;
    }
    .blog__item__lists {
        gap: 16px;
        flex-direction: initial;
    }
    /* destination */
    .destination {
        padding: 128px 0;
    }
    .destination__lists__inner {
        grid-template-columns: repeat(3,32.8%);
        gap: 8px 8px; 
    }
    .load-more {
        width: 32.8%;
    }
    /* recents */
    .section-post {
        padding: 128px 0;
    }
    .section-post__text-area {
        text-align: initial;
    }
    .section-post__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .pc__view-all {
        display: flex;
        margin: initial;
        height: fit-content;
    }
    .se__view-all {
        display: none;
    }
    /* moments */
    .moments {
        padding: 128px 0 160px;
    }
    .moments__wrapper {
        flex-direction: initial;
        gap: 128px;
    }
    .moments__inner {
        height: fit-content;
        padding: 8px 0 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: initial;
    }
    .pc__moments__text-area {
        display: flex;
        text-align: initial;
    }
    .se__moments__text-area {
        display: none;
    }
    .btn-under-line {
        margin: initial;
    }
}