.banner_mainLayout {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 1280px;
    overflow: hidden;
    padding: 50px;

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

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

.banner_logo_roc {
    width: 180px;
}

.banner_logo_DW {
    width: 180px;
}

.banner_titleMain {
    width: 750px;
}

.text-bold-outline {
    color: #fff;
    text-shadow: -3px -3px 0 #362a20,
        3px -3px 0 #362a20,
        -3px 3px 0 #362a20,
        3px 3px 0 #362a20,
        0 0 10px #362a20;
    letter-spacing: 2px;
}

.banner_object_po {
    width: 700px;
}

/* Content  */
.content00_mainLayout {
    position: relative;
    z-index: 5;
    /* overflow: hidden; */

    width: 100%;
    /* min-height: 950px; */
    /* margin-bottom: 190px; */
    padding-bottom: 250px;

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

.content00_titleLayout {
    position: relative;
    z-index: 3;
    top: -50px;
    width: 100%;
    height: 250px;
    padding-bottom: 85px;

    background: url("../images/content/00/object_01.png");
    background-position: top;
    background-size: cover;

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

.content00_title {
    width: 650px;
}

.content00_titleLayout span {
    text-align: center;
    font-size: 14px;
    font-weight: 700px;
    color: #a8aec6;
}

.content00_goalLayout {
    position: absolute;
    top: 150px;

    top: 145px;
    width: 500px;
    height: 97px;
    padding: 10px;
    /* padding-bottom: 20px; */

    background: url("../images/content/00/object_02.png");
    background-position: top;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;


    color: #ffa185;
    text-shadow: 2px 2px 1px #842800;
    font-size: 38px;
    font-family: "DSN-SiRin", sans-serif;
}

.content00_object_01 {
    position: absolute;
    width: 150px;
    filter: drop-shadow(1px 1px 10px #000);
}

.content00_object_01.left {
    top: 130px;
    left: -50px;
}

.content00_object_01.right {
    top: 130px;
    right: -50px;
}

.content00_object_01Layout {
    position: absolute;
    z-index: 2;
    width: 100%;
    overflow: hidden;

    height: 500px;
}

.content00_LayoutImg {
    position: relative;
    z-index: 1;
    width: 100%;
}

.content00_layoutDes {
    position: absolute;
    bottom: 165px;
    z-index: 2;
    width: 700px;
    min-height: 100px;
    padding: 30px 20px;

    border: 1px solid #957c5e;
    background: #321b14f1;
    color: #fff;

    font-family: "DBHelvethaicaMonX", sans-serif;
    font-size: 20px;
    text-align: center;

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

.content_mainLayout {
    position: relative;
    width: 100%;
    min-height: 500px;
    padding: 30px;
    padding-bottom: 180px;

    display: flex;

    align-items: start;
    justify-content: center;
}

/* === content 01 ===  */
.content01_layout {
    position: relative;
    width: 800px;
    height: 1200px;
    padding: 50px 30px 50px 60px;

    background: url('../images/content/01/01_bg.png');
    background-position: center;
    background-size: cover;

    display: flex;
    flex-direction: column;
    filter: drop-shadow(3px 4px 5px #000000c4);
}

.content01_title {
    position: absolute;
    z-index: 2;
    top: -80px;
    width: 400px;
}

.content01_layoutcontent {
    width: 100%;
    /* width: 500px; */
    height: 380px;

    display: flex;
    align-items: center;
    gap: 30px;
}

.content01_npcTitleLayout {
    width: 300px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

.content01_character {
    width: 200px;
    min-width: 200px;
}

.content01_character_02 {
    width: 250px;
    min-width: 250px;
}

.content01_npcTitle {
    position: relative;
    font-family: "DBHelvethaicaMonX", sans-serif;
}

.content01_npcTitle img {
    position: relative;
    z-index: 2;
    width: 80px;
}

.content01_npcTitle_02 img {
    position: relative;
    z-index: 2;
    width: 140px;
}

.content_objectNpcTitle {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 32px;
    display: block;
    width: 10px;
    height: 10px;
    background: #f0e0c9;
    border-radius: 50%;
    box-shadow: 0px 0px 20px 30px #fff5dc;
}

.content01_npcTitleLayout h5 {
    line-height: 25px;
}


/* === content 02 ===  */
.content02_title {
    position: absolute;
    z-index: 2;
    top: -80px;
    width: 700px;
}

.content02_layout {
    position: relative;
    width: 700px;
    min-height: 1200px;
    padding: 80px 60px;

    background: url('../images/content/02/02_bg.png');
    background-position: top;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    filter: drop-shadow(3px 4px 5px #000000c4);
}

.content02_rewardImg {
    width: 220px;
}

.content02_layout>div h1 {
    line-height: 32px;
    letter-spacing: 1px;
}

.content02_desMainLayout {
    width: 100%;
    min-height: 150px;
    border: 1px solid #bc7150;
    background: #fff;
    box-shadow: 3px 3px 10px #000000b0;
}

.content02_desTitle {
    width: 100%;
    height: 50px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #37241d;
    background: #ffba88;
    border-bottom: 1px solid #bc7150;

    font-size: 35px;
    line-height: 35px;
    font-family: "DBHelvethaicaMonX", sans-serif;
}

.content02_desDetail {
    width: 100%;
    max-width: 600px;
    padding: 30px 50px;
    margin: 0 auto;

    font-family: "DBHelvethaicaMonX", sans-serif;
    color: #444444;
    font-size: 25px;
    line-height: 25px;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content02_tableReward {
    width: 100%;
    height: 100%;

    background: #fff5ed;
    border: 1px solid #bc7150;

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

.content02_tableImgLayout {
    width: 150px;
    min-width: 150px;
    height: 200px;
    padding: 5px 10px;

    background: #fff;
    border-right: 1px solid #bc7150;

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

    font-family: "DBHelvethaicaMonX", sans-serif;
    font-size: 20px;
    line-height: 19px;
    font-weight: 600;
    color: #855745;
}

.content02_tableImg {
    width: 70px;
}

.content02_tableDetailLayout {
    width: 100%;
    height: 100%;
    padding: 10px 20px 10px 0px;

    display: flex;
    flex-direction: column;
    gap: 15px;

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


.content02_costumeMainLayout {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px 21px;

    background: #624b38;
}

.content02_costumeSubLayout {
    width: 100%;
    height: 100%;
    padding: 50px 20px;

    background: #e6e3d6;
    border: 8px solid #efede5;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    overflow: hidden;
}

.content02_costumeObject01 {
    width: 620px;
    position: absolute;
    top: -15px;
    left: -20px;
}

.content02_costumeObject02 {
    width: 620px;
    position: absolute;
    bottom: -15px;
    left: -20px;
}

.costume_title {
    width: 600px;
    height: 75px;
    padding: 10px;

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


    font-family: "DSN-SiRin", sans-serif;
    color: #800203;
    font-size: 35px;
    line-height: 22px;
    letter-spacing: 1px;
    text-align: center;

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

.costume_title span {
    width: 250px;
}

.costume_itemImg {
    width: 250px;
}

.costume_detailLayout {
    width: 100%;
    max-width: 500px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
}

.costume_detailLayout #costumeTitle01 {
    font-family: "Akhand", sans-serif;
    font-weight: 900;
    font-size: 35px;
    line-height: 35px;

    display: flex;
    flex-direction: column;

    color: #9a3f12;
    background: linear-gradient(0deg,
            #9b3f12 20%,
            #ad4b15 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.costume_allImg {
    width: 115px;
    min-width: 115px;
}


/* === Content 3 ===  */
.content03_titleImg {
    width: 600px;
}

.content03_titleLayout {
    width: 350px;
    height: 47px;
    padding: 10px 20px;

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

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


    font-family: "Akhand", sans-serif;
    color: #fff;
    font-weight: 900;
    font-size: 35px;
    line-height: 35px;
}

.content03_desDetailLayout {
    position: relative;
    width: 100%;
    max-width: 750px;
    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.content03_object01 {
    width: 100px;
}

.content03_title {
    font-family: "DSN-SiRin", sans-serif;
    color: #ffedbc;
    font-size: 40px;
    line-height: 35px;
    text-align: center;

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

.content03_img {
    width: 100%;
    max-width: 800px;
}

.content03_tableMainLayout {
    border: 1px solid #cdac85;
    background: #fff;
    width: 700px;
    /* width: 100%; */
}

.table_contentMainLayout {
    width: 100%;
    display: flex;
    align-items: stretch;
    border: 1px solid #cdac85;

}

.table_topicLayout {
    width: 200px;
    min-width: 200px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    background: #f4ece2;
    color: #9a704d;
    font-family: "DBHelvethaicaMonX", sans-serif;
    font-size: 25px;
    line-height: 22px;
}

.table_topicLayout.primary {
    background: #9a704d;
    color: #fff;
}

.table_contentLayout {
    width: 100%;
    min-height: 20px;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid #cdac85;


    color: #444444;
    font-family: "DBHelvethaicaMonX", sans-serif;
    font-size: 25px;
    line-height: 25px;
}


.table_topicItem {
    width: 80px;
}


.tableItem_mainLayout {
    border: 1px solid #cdac85;
    background: #fff;
    width: 700px;
}

.tableItem_topicLayout {
    width: 150px;
    min-width: 150px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    background: #f4ece2;
    color: #9a704d;
    font-family: "DBHelvethaicaMonX", sans-serif;
    font-size: 25px;
    line-height: 22px;
}

.tableItem_topicLayout.primary {
    background: #9a704d;
    color: #fff;
}

.tableItem_topicLayout02 {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-family: "DBHelvethaicaMonX", sans-serif;
    font-size: 25px;
    line-height: 25px;
    color: #444444;
    border-left: 1px solid #cdac85;
    border-right: 1px solid #cdac85;
}

.tableItem_topicLayout02.primary {
    background: #9a704d;
    color: #fff;
    border-left: 1px solid #cdac85;
    border-right: 1px solid #cdac85;
}

.tableItem_itemImg {
    width: 100px;
}