/*
============================================================
PC MAIN COMMON
============================================================
*/
.main-page {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    color: var(--color-title);
    background: var(--color-white);
    overflow: hidden;
}

.main-page .sec {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    background: var(--color-white);
    overflow: hidden;
}

.main-page .sec-inner {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1280px;
}

.main-page .tt-wrap {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
}

.main-page .tt-wrap.flex {
    display: flex;
}

.main-page .tt {
    display: block;
    position: relative;
    margin: 0 0 12px;
    padding: 0;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--color-gray-900);
    letter-spacing: 0;
    word-break: keep-all;
}

.main-page .sub-tt {
    display: block;
    position: relative;
    margin: 0 0 10px;
    padding: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    color: inherit;
    letter-spacing: 0;
    word-break: keep-all;
}

.main-page .desc {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-gray-600);
    word-break: keep-all;
}

.main-page .add-txt {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    color: inherit;
    letter-spacing: 0;
    word-break: keep-all;
}

.main-page .list-item {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

.main-page .item {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.main-page .item-img {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.main-page .item-link {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    color: inherit;
}

.main-page .item-link.absol {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 2;
    cursor: pointer;
}

.main-page .empty-box {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 40px 20px;
    width: 100%;
    min-height: 150px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    word-break: keep-all;
}

/*
============================================================
PC MAIN VISUAL
============================================================
*/
.main-page .visual-sec {
    height: 715px;
    color: var(--color-white);
    background: var(--color-black);
}

.visual-sec.is-empty {
    display: flex;
    align-items: center;
    height: 715px;
    color: var(--color-white);
    background: var(--color-black);
}

.visual-sec.is-empty:before {
    display: none;
}

.main-page .sec.is-empty:not(.visual-sec) .empty-box {
    min-height: 120px;
    color: var(--color-gray-700);
    background: var(--color-gray-100);
    border: 1px solid var(--color-border);
    border-radius: 0;
}

.main-page .sec.banner-sec.is-empty .empty-box {
    min-height: 200px;
}

.main-page .sec.product-sec.is-empty .empty-box {
    min-height: 374px;
}

.main-page .sec.event-sec.is-empty .empty-box {
    min-height: 220px;
}

.visual-sec.is-empty .sec-inner {
    display: block;
    height: auto;
    padding: 0;
    z-index: 1;
}

.visual-sec.is-empty .empty-box {
    min-height: 120px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 0;
}

.visual-sec .main-visual-swiper,
.visual-sec .swiper-wrapper {
    height: 100%;
}

.visual-sec .main-visual-swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.visual-sec .item {
    position: relative;
    width: 100%;
    height: 100%;
}

.visual-sec .item-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1;
}

.visual-sec .sec-inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 130px 0 0;
    z-index: 3;
    pointer-events: none;
}

.visual-sec .visual-content {
    position: relative;
    width: 520px;
    z-index: 5;
}

.visual-sec .visual-content p {
    margin: 0;
}

.visual-sec .visual-content .img-wrap {
    width: 67px;
    height: 67px;
    margin: 0 0 20px;
}

.visual-sec .visual-content .img-wrap img {
    display: block;
    width: 67px;
    height: 67px;
    object-fit: contain;
}

.visual-sec .visual-content .sub-tt {
    margin: 0 0 18px;
    color: var(--color-white);
    font-family: var(--font-eng);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.visual-sec .visual-content .tt {
    margin: 0 0 22px;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.18;
    color: var(--color-white);
    word-break: keep-all;
}

.visual-sec .visual-content .tt strong {
    font-weight: 900;
}

.visual-sec .visual-content .desc {
    width: 430px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.75;
    word-break: keep-all;
}

.visual-sec .visual-content .content_copy {
    display: none;
}

.visual-sec .paging-wrap {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 42px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    z-index: 5;
}

.visual-sec .dot,
.visual-sec .swiper-pagination-bullet {
    display: block;
    margin: 0;
    padding: 0;
    width: 15px;
    height: 15px;
    background: var(--color-white);
    border: 0;
    border-radius: 50%;
    opacity: 1;
}

.visual-sec .dot.is-active,
.visual-sec .swiper-pagination-bullet-active {
    width: 48px;
    background: var(--primary);
    border-radius: var(--radius-pill);
}

.visual-sec .no-js-paging {
    display: none;
}

/*
============================================================
PC MAIN BANNER
============================================================
*/
.main-page .banner-sec {
    padding: 50px 0 48px;
}

.banner-sec .list-item {
    justify-content: space-between;
}

.banner-sec .item {
    width: calc(50% - 15px);
    height: 200px;
    color: var(--color-white);
    background: var(--color-black);
    border-radius: 20px;
}

.banner-sec .item-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 0;
}

.banner-sec .tt-wrap {
    padding: 28px 40px 34px;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.banner-sec .tt {
    font-size: 32px;
    color: var(--color-white);
}

.banner-sec .banner-content {
    margin: 0;
    color: var(--color-white);
}

.banner-sec .banner-content p {
    margin: 0;
}

.banner-sec .banner-content .sub-tt {
    margin: 0 0 11px;
    color: var(--color-white);
    font-family: var(--font-eng);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.banner-sec .banner-content .tt {
    margin: 0;
    color: var(--color-white);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.18;
}

.banner-sec .add-txt {
    position: absolute;
    left: 40px;
    bottom: 28px;
    margin: 0;
    color: var(--color-white);
    pointer-events: auto;
}

/*
============================================================
PC MAIN PRODUCT
============================================================
*/
.main-page .product-sec {
    padding: 0 0 63px;
}

.product-sec .sec-tt-wrap {
    margin: 0 0 26px;
}

.product-sec .list-item {
    justify-content: space-between;
}

.product-sec .item {
    width: calc(25% - 18px);
}

.product-sec .item-img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px;
    aspect-ratio: 1 / 1;
    background: var(--color-gray-200);
    border-radius: 8px;
}

.product-sec .item-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-sec .item .tt {
    margin: 0 0 6px;
    font-size: 17px;
    font-family: var(--font-eng);
}

.product-sec .item .desc {
    margin: 0;
    font-size: 13px;
    text-align: center;
}

/*
============================================================
PC MAIN EVENT
============================================================
*/
.main-page .event-sec {
    padding: 0 0 49px;
}

.event-sec .item {
    width: 100%;
    height: 220px;
    color: var(--color-white);
    background: var(--primary);
    border-radius: 20px;
}

.event-sec .item-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 0;
}

.event-sec .tt-wrap {
    padding: 28px 42px 36px;
    z-index: 3;
    pointer-events: none;
}

.event-sec .event-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px;
    padding: 0 22px;
    height: 38px;
    color: var(--color-white);
    background: var(--primary);
    border-radius: var(--radius-pill);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.event-sec .event-content {
    margin: 0;
    color: var(--color-white);
}

.event-sec .event-content p {
    margin: 0;
}

.event-sec .event-content .tt {
    margin: 0 0 10px;
    color: var(--color-white);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.12;
}

.event-sec .event-content .tt strong {
    font-weight: 900;
}

.event-sec .event-content .sub-tt {
    margin: 0;
    color: var(--color-white);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
}

.event-sec .add-txt {
    position: absolute;
    right: 42px;
    bottom: 40px;
    margin: 0;
    color: var(--color-white);
    pointer-events: auto;
}

/*
============================================================
PC MAIN COMMUNITY
============================================================
*/
.main-page .community-sec {
    padding: 0 0 96px;
}

.community-sec .list-item {
    justify-content: space-between;
}

.community-sec .item {
    width: calc(50% - 35px);
}

.community-sec .tt-wrap {
    gap: 0;
    margin: 0 0 18px;
    padding: 0;
    border-bottom: 0;
}

.community-sec .tt-wrap:after {
    content: "";
    order: 2;
    flex: 1 1 auto;
    height: 2px;
    margin: 0 18px;
    background: var(--color-gray-900);
}

.community-sec .tt {
    order: 1;
    flex: 0 0 auto;
    font-size: 24px;
}

.community-sec .tt-wrap > .add-txt {
    order: 3;
    flex: 0 0 auto;
}

.community-sec .sub-list-item {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

.community-sec .sub-item {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
}

.community-sec .sub-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    width: 100%;
}

.community-sec .sub-item .sub-tt {
    margin: 0;
    width: calc(100% - 100px);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-sec .sub-item .add-txt {
    width: 80px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-gray-500);
    text-align: right;
}

/*
============================================================
PC MAIN BREAKPOINT 1480
============================================================
*/
@media (max-width: 1480px) {
    .main-page .sec-inner {
        max-width: 1200px;
    }
}

/*
============================================================
PC MAIN BREAKPOINT 1280
============================================================
*/
@media (max-width: 1280px) {
    .main-page .sec-inner {
        max-width: 1100px;
    }

    .visual-sec .tt {
        font-size: 46px;
    }
}

/*
============================================================
PC MAIN BREAKPOINT 1024
============================================================
*/
@media (max-width: 1024px) {
    .main-page .sec-inner {
        max-width: 960px;
    }
}