@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_Th.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_Rg.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_Bd.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_XBd.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_He.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "DB_Helvethaica_X";
    src: url("../font/DB-Helvethaica-X-Med.woff") format("truetype");
    font-weight: 800;
    /* Bold */
    font-style: normal;
}

.font-LINESeedSansTH {
    font-family: "LINESeedSansTH", sans-serif;
}

.font-DB_Helvethaica_X {
    font-family: "DB_Helvethaica_X", sans-serif;
}

.ci-primary {
    color: #40d9ff;
}

.ci-primary-800 {
    color: #519bff;
}

.ci-danger {
    color: #c33e15;
}

.mainLayout {
    position: relative;
    width: 100%;
    max-width: 991px;
    min-height: 100dvh;
    margin: 0 auto;
}

.buttonBackMainLayout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    z-index: 3;
    top: 60px;
    left: 0px;
}

.buttonBack {
    width: 150px;
    height: 50px;
    transition: all .5s;
}

.buttonBack:hover {
    filter: drop-shadow(1px 1px 10px #b90000e3);
}

.text-stroke-bold {
    color: white;
    text-shadow:
        -2px -2px 0 black,
        2px -2px 0 black,
        -2px 2px 0 black,
        2px 2px 0 black,
        0px 2px 0 black,
        2px 0px 0 black,
        -2px 0px 0 black,
        0px -2px 0 black;
}

/* Banner  */
.bannerMainLayout {
    position: relative;
    width: 100%;
    min-height: 140dvh;
    padding: 130px 50px 50px;

    background: url("../images/bg/01.png");
    background-position: center;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #fff;
}

.bannerFooterC {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 18px;
    font-weight: 600;
}

.bannerLogoLayout {
    width: 100%;
    max-width: 200px;
}

.bannerTitleLayout {
    width: 100%;
    max-width: 650px;
}

.bannerDateLayout {
    position: relative;
    width: 720px;
    height: 62px;
    padding: 10px 20px;

    background: url("../images/banner/datelayout.png");
    background-position: center;
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bannerDateLayout span {
    font-size: 16px;
    font-weight: 600;
    font-family: "LINESeedSansTH";
}

/* Section 02  */
.sectionContent02MainLayout {
    width: 100%;
    min-height: 400px;
    padding: 20px;

    background: url("../images/bg/02.png");
    background-position: center;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 18px;
    font-weight: 500;
    font-family: "LINESeedSansTH";
}

.content02TitleLayout {
    width: 100%;
    max-width: 700px;
}

/* Section 03  */
.sectionContent03MainLayout {
    position: relative;
    width: 100%;
    min-height: 1190px;
    padding: 50px 20px 140px 20px;

    background: url("../images/bg/03.png");
    background-position: center;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    color: #fff;
    font-size: 18px;
    font-weight: 500;
    font-family: "LINESeedSansTH";
}

.content03Title {
    width: 100%;
    max-width: 500px;
}

.content03DetailMainLayout {
    width: 850px;
    height: 400px;

    background: url("../images/section_03/layout.png");
    background-position: center;
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: end;
    flex-direction: column;
    padding: 120px 55px 80px;
}

.content03DetailNote {
    padding: 10px 50px;
    background: #000;
}

.content03Character {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 690px;
}

/* Collaboration_package  */
.collabPackMainLayout {
    width: 100%;
    min-height: 100dvh;
    padding: 50px;

    background: url("../images/collaboration_package/bg.png");
    background-position: top;
    background-size: cover;

    color: #fff;
}

.collabPackTitle {
    width: 100%;
    max-width: 500px;
}

/* TABLE  */
.tableMainLayout {
    width: 100%;
    min-height: 400px;
    background: #071e4d;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.tableMainLayout.danger {
    background: #4a0200;
}

.tableHeaderMainLayout {
    width: 100%;
    min-height: 45px;

    background: #47a6ff;
    color: #000;
    font-family: "LINESeedSansTH";
    font-size: 18px;
    font-weight: 600;

    display: flex;
    align-items: stretch;
    justify-content: center;
    text-align: center;
}

.tableHeaderMainLayout.danger {
    background: #8c120f;
    color: #fff;
}

.tableHeaderFrist {
    width: 200px;
    min-width: 200px;
    padding: 5px 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.tableHeaderSecond {
    width: 100%;
    padding: 5px 10px;
    border-right: 1px solid #000;
    border-left: 1px solid #000;

    display: flex;
    align-items: center;
    justify-content: center;
}

.tableHeaderSecond.danger {
    border-right: 1px solid #af0000;
    border-left: 1px solid #af0000;
}

.tableHeaderThird {
    width: 200px;
    min-width: 200px;
    padding: 5px 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.tableContentMainLayout {
    position: relative;
    width: 100%;
    min-height: 250px;
    border-bottom: 1px solid #000;

    color: #fff;
    font-family: "DB_Helvethaica_X", sans-serif;

    font-size: 22px;
    line-height: 20px;
    font-weight: 600;

    display: flex;
    align-items: stretch;
    justify-content: center;
    text-align: center;
}

.tableContentMainLayout.danger {
    border-bottom: 1px solid #af0000;
}

.tableContentMainLayout.third {
    min-height: 150px;
}

.tableContentFrist {
    width: 200px;
    min-width: 200px;
    min-height: 250px;
    padding: 10px 25px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tableContentFrist.danger {
    background: #c63623;
}

.tableContentFrist.second {
    justify-content: center;
    background: #0e2960;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
}

.tableContentFrist.third {
    min-height: 150px;
    justify-content: center;
    background: #1d5433;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
}


.tableContentSecond {
    position: relative;
    width: 100%;
    min-height: 250px;
    padding: 40px 25px;

    border-right: 1px solid #000;
    border-left: 1px solid #000;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    text-align: start;
    gap: 20px;
}

.tableContentSecond.danger {
    background: #4a0200;
    border-right: 1px solid #af0000;
    border-left: 1px solid #af0000;
}

.tableContentSecond.second {
    justify-content: center;
    background: #000d28;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
}

.tableContentSecond.third {
    min-height: 150px;
    justify-content: center;
    background: #062713;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
}

.tableContentThird {
    width: 200px;
    min-width: 200px;
    min-height: 250px;
    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tableContentThird.danger {
    background: #4a0200;
}

.tableContentThird.third {
    justify-content: start;
    padding: 0px;
    min-height: 150px;
    background: #062713;
    border-right: 1px solid transparent;
    border-left: 1px solid #1d5433;
}

.tableContentThird_content {
    width: 100%;
    height: 100%;
    background: #000d28;
    color: #40d9ff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    font-family: "LINESeedSansTH", sans-serif;
}

.tableContentThird_content.danger {
    background: #4a0200;
    color: #fff;
}

.tableContentFristItem {
    width: 90px;
}

.tableContentFristItem_02 {
    width: 70px;
}

/* CollaborationCostume  */
.collaborationCostumeMainLayout {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    padding: 50px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #620600;
}

.collabCostumeTitleLayout {
    position: absolute;
    top: 20px;
    z-index: 3;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

}

.collabCostumeTitle {
    width: 100%;
    max-width: 580px;
}

.collabCostumeTopic {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 650px;
}

.collabCostumeItems {
    position: absolute;
    z-index: 3;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 244px;
    height: 245px;
    overflow: hidden;
}

.collabCostumeItems02 {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 130px;

    transform: translateY(-123%);
    width: 135px;
    height: 121px;
}

.collabCostumeTopic img#bg {
    width: 100%;
    height: 100%;
    object-fit: cover;

    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 95%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 12%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 95%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 12%, black 90%, transparent 100%);

    -webkit-mask-composite: intersect;
    mask-composite: intersect;
}

.collabCostumeTitle img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 0%, black 100%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 15%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 0%, black 100%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 15%, black 80%, transparent 100%);

    -webkit-mask-composite: intersect;
    mask-composite: intersect;
}

.collabCostumeDetail_header {
    width: 100%;
    height: 50px;
    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #c33e15e0;

    font-family: "LINESeedSansTH", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

.collabCostumeDetail_content {
    width: 100%;
    min-height: 150px;
    padding: 50px 80px;

    background: #000000b9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: #fff;
    font-family: "DB_Helvethaica_X", sans-serif;
    font-size: 22px;
    line-height: 22px;
}

.collabCostumeDetail_item {
    width: 170px;
    min-width: 170px;
    min-height: 200px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.collabCostumeDetail_itemImg {
    width: 100%;
    height: 200px;
    border: 4px solid #c33e15;
}

.collabCostumeDetail_itemImgText {
    width: 100%;
    height: 40px;
    padding: 5px;
    background: #c33e15;

    font-family: "LINESeedSansTH", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
    color: #000;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Section 04  */
.sectionContent04MainLayout {
    position: relative;
    width: 100%;
    min-height: 1190px;
    padding: 50px;

    background: url("../images/bg/04.png");
    background-position: top;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;

    color: #fff;
    font-size: 18px;
    font-weight: 500;
    font-family: "LINESeedSansTH";
}

.content04Title {
    width: 100%;
    max-width: 500px;
}

.content04MainLayout {
    width: 100%;
    min-height: 300px;
    padding: 50px;
    border: 1px solid #268aff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: #fff;
    font-size: 18px;
    font-weight: 500;
    font-family: "LINESeedSansTH";
}

.content04MainLayout.first {
    background: url("../images/section_04/bg_01.png");
    background-position: center;
    background-size: cover;
}

.content04MainLayout.second {
    background: url("../images/section_04/bg_02.png");
    background-position: center;
    background-size: cover;
}

.content04MainLayout.third {
    background: url("../images/section_04/bg_03.png");
    background-position: center;
    background-size: cover;
}

.content04MainLayout.fourth {
    background: url("../images/section_04/bg_03.png");
    background-position: center;
    background-size: cover;
}

.content04Img {
    width: 100%;
    max-width: 650px;
    height: 400px;

    border: 3px solid #268aff;
}

.content04Footer {
    width: 100%;
    max-width: 650px;
    height: 50px;
    border-radius: 50px;
    padding: 3px 5px;

    background: #fff;
    color: #000;

    display: flex;
    align-items: center;
    gap: 20px;

    font-size: 18px;
    font-weight: 700;
    font-family: "LINESeedSansTH";
}

.content04FooterTopic {
    width: 150px;
    height: 100%;
    border-radius: 50px;
    padding: 10px;

    background: #47a6ff;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* sectionContent05MainLayout  */
.sectionContent05MainLayout {
    position: relative;
    width: 100%;
    min-height: 1190px;
    padding: 50px;

    background: #000;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;

    color: #fff;
    font-size: 18px;
    font-weight: 500;
    font-family: "LINESeedSansTH";
}

.content05Header {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    overflow: hidden;

    width: 100%;
    height: 700px;
    background: linear-gradient(180deg, rgba(44, 129, 78, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.content05Header_object {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 700px;
    opacity: .2;
}

.content05Header_object02 {
    width: 100%;

    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;

    display: flex;
    align-items: start;
}

.content05Header_footer {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, rgba(44, 129, 78, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

.content05MainLayoutContent {
    position: relative;
    z-index: 5;

    width: 100%;
    min-height: 400px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.content05TopicMainLayout {
    width: 100%;
    max-width: 800px;
    padding: 20px;
    border-top: 1px solid #47ff91;

    background: #339159;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #fff;
    font-size: 18px;
    font-weight: 500;
    font-family: "LINESeedSansTH";
}

.content05TopicImg {
    width: 100%;
    height: 450px;
}

.content05MissionMainLayout {
    width: 100%;
    min-height: 400px;
    border: 1px solid #47ff919d;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #0c331b;
}

.content05Mission_topic {
    width: 100%;
    height: 55px;
    padding: 10px;

    background: #2e8852;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
}

.content05Mission_topic span {
    color: #fff;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    font-family: "LINESeedSansTH";

    text-shadow: 1px 1px 1px #000;
}

.content05Mission_detail {
    width: 100%;
    max-width: 650px;
    min-height: 400px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    text-align: center;

    color: #fff;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    font-family: "LINESeedSansTH";
}

.missionDetail_img {
    width: 100%;
    height: 350px;

    border: 3px solid #0b7c36;
}

.tableContentThirdTopic {
    background: #0b7c36;
    color: #fff;

    width: 100%;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-family: "DB_Helvethaica_X", sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.content05Mission_topic img {
    width: 30px;
}

/* <!-- Section 06  --> */
.sectionContent06MainLayout {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    padding: 50px;

    background: #8c120f;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;

    color: #fff;
    font-size: 18px;
    font-weight: 500;
    font-family: "LINESeedSansTH";
}

.content06Object {
    position: absolute;
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    z-index: 1;
}

.content06Title {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 650px;
}

.content06Character {
    position: absolute;
    z-index: 2;

    top: 50px;
    width: 100%;
}

.content06TopicLayout {
    position: relative;
    z-index: 3;

    width: 100%;
    min-height: 200px;
    padding-top: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}