@font-face {
    font-family: "Noto Sans TC";
    src: url("./font/NotoSansTC-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans TC";
    src: url("./font/NotoSansTC-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Serif TC";
    src: url("./font/NotoSerifTC-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Serif TC";
    src: url("./font/NotoSerifTC-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
a {
    text-decoration: none !important;
}

.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-white {
    box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.8);
}

.font-family-1 {
    font-family: "Noto Sans TC", sans-serif;
}

.font-family-2 {
    font-family: "Noto Serif TC", sans-serif;
}

.font-family-3 {
    font-family: "arial black", sans-serif;
}

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

.content-row {
    width: 960px;
    overflow: hidden;
    font-family: "Noto Sans TC", sans-serif;
    white-space: nowrap;
}

.custom-sale-prodcut-akkqt .content-row {
    transform-origin: top left;
}

.content-row .div_block {
    padding: 0;
}

.content-row p {
    margin: 0;
}

.overflow-hidden {
    overflow: hidden;
}

.font-weight-400 {
    font-weight: 400;
}

.font-weight-500 {
    font-weight: 500;
}

.font-weight-700 {
    font-weight: 700;
}

.text-blur {
    color: #000;
    filter: blur(5px);
}

.obj-position-top {
    object-position: top;
}

.obj-position-center {
    object-position: center;
}

.obj-position-bottom {
    object-position: bottom;
}

.obj-position-left {
    object-position: left;
}

.obj-position-right {
    object-position: right;
}

.obj-fit-contain {
    object-fit: contain;
}

.obj-fit-cover {
    object-fit: cover;
}

.absolute-align-center {
    top: 50%;
    transform: translateY(-50%);
}

.absolute-content-center {
    left: 50%;
    transform: translateX(-50%);
}

.vertical-align-super {
    vertical-align: super !important;
}

.list-style-type-none {
    list-style-type: none;
}

.hide_text h2,
.hide_text h3,
.hide_text p,
.hide_text a {
    opacity: 0;
}

video {
    position: relative;
    z-index: -1;
    margin-bottom: -4px;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: unset;
}

iframe {
    margin-bottom: -6px;
}

.custom-sale-prodcut-akkqt h1,
.custom-sale-prodcut-akkqt h2,
.custom-sale-prodcut-akkqt h3 {
    margin: 0;
    margin-bottom: 0 !important;
}

.d-contents {
    display: contents;
}

/* ========================================
   1. 變數與通用 class
   ======================================== */
/* --- 陰影變數 --- */
:root {
    --shadow-color-1: #85c29b;
    --shadow-color-2: #fff;
    --shadow-color-3: #2cb2aa;
    --shadow-color-4: #77d2ce;
    --shadow-style-1: 0px 0px 10px var(--shadow-color-1), 0 0 25px var(--shadow-color-1), 0 0 45px var(--shadow-color-1), 0 0 70px var(--shadow-color-1), 0 0 100px var(--shadow-color-1);
    --shadow-style-2: 0px 0px 4px var(--shadow-color-2), 0 0 8px var(--shadow-color-2), 0 0 15px var(--shadow-color-2), 0 0 22px var(--shadow-color-2), 0 0 30px var(--shadow-color-2);
    --shadow-style-3: 0px 0px 4px var(--shadow-color-3), 0 0 8px var(--shadow-color-3), 0 0 15px var(--shadow-color-3), 0 0 22px var(--shadow-color-3), 0 0 30px var(--shadow-color-3);
    --shadow-style-4: 0px 0px 4px var(--shadow-color-4), 0 0 8px var(--shadow-color-4), 0 0 15px var(--shadow-color-4), 0 0 22px var(--shadow-color-4), 0 0 30px var(--shadow-color-4);
}

.text-shadow-style-1 {
    text-shadow: var(--shadow-style-1);
}

.text-shadow-style-2 {
    text-shadow: var(--shadow-style-2);
}

.text-shadow-style-3 {
    text-shadow: var(--shadow-style-3);
}

.text-shadow-style-4 {
    text-shadow: var(--shadow-style-4);
}

.text-stroke-fff {
    -webkit-text-stroke: 3px #fff;
    paint-order: stroke fill;
}

.sec_1 .block-text-1 {
    top: 1%;
    font-size: 76px;
    color: #2a4a4a;
}

.sec_1 .block-text-2 {
    top: 10.1%;
    font-size: 62px;
    color: #fff;
}

.sec_1 .block-text-3 {
    top: 21%;
    left: 33%;
    font-size: 64px;
    color: #3e5b60;
}

.sec_1 .block-text-4 {
    top: 35%;
    left: 22%;
    font-size: 64px;
    color: #3e5b60;
}

.sec_1 .block-text-5 {
    top: 43%;
    left: 64.5%;
    font-size: 52px;
    color: #3e5b60;
    text-align: center;
    line-height: 38px;
}

.sec_1 .block-text-5 span {
    font-size: 30px;
}

.sec_2 .block-text-1 {
    top: 1%;
    font-size: 72px;
    letter-spacing: 2px;
}

.sec_2 .block-text-2 {
    font-size: 54px;
    top: 8.5%;
    letter-spacing: 2px;
}

.sec_2 .block-text-2 span {
    color: #1ca8a7;
}

.sec_2 .block-text-3 {
    top: 20%;
    left: 8%;
    color: #1da9a7;
    font-size: 47px;
}

.sec_2 .block-text-4 {
    top: 26%;
    left: 8%;
    font-size: 34px;
    line-height: 40px;
    color: #2e4e4d;
}

.sec_2 .block-text-5 {
    top: 47%;
    left: 69%;
    color: #1da9a7;
    font-size: 47px;
}

.sec_2 .block-text-6 {
    top: 53%;
    left: 59.5%;
    font-size: 34px;
    line-height: 40px;
    color: #2e4e4d;
}

.sec_2 .block-text-7 {
    top: 74%;
    left: 8%;
    color: #1da9a7;
    font-size: 47px;
}

.sec_2 .block-text-8 {
    top: 80%;
    left: 8%;
    font-size: 34px;
    line-height: 40px;
    color: #2e4e4d;
}

.sec_3 .block-text-1 {
    top: 1%;
    color: #23acaa;
    font-size: 75px;
}

.sec_3 .block-text-2 {
    top: 6%;
    color: #fff;
    font-size: 60px;
}

.sec_3 .block-text-3 {
    top: 12.3%;
    font-size: 54px;
    left: 3.9%;
    color: #fe6a00;
    letter-spacing: 18px;
}

.sec_3 .block-text-4 {
    top: 15.7%;
    font-size: 35px;
    left: 5.5%;
    color: #fff;
}

.sec_3 .block-text-5 {
    top: 18.3%;
    font-size: 34px;
    left: 7.3%;
    line-height: 40px;
    color: #442600;
}

.sec_3 .block-text-6 {
    top: 12.3%;
    font-size: 54px;
    left: 55%;
    color: #fe6a00;
    letter-spacing: 18px;
}

.sec_3 .block-text-7 {
    top: 15.7%;
    font-size: 35px;
    left: 57%;
    color: #fff;
}

.sec_3 .block-text-8 {
    top: 18.3%;
    font-size: 34px;
    left: 58.3%;
    line-height: 40px;
    color: #442600;
}

.sec_3 .block-text-9 {
    top: 37.5%;
    font-size: 54px;
    left: 3.9%;
    color: #fe6a00;
    letter-spacing: 18px;
}

.sec_3 .block-text-10 {
    top: 40.9%;
    font-size: 35px;
    left: 5.5%;
    color: #fff;
}

.sec_3 .block-text-11 {
    top: 43.5%;
    font-size: 34px;
    left: 7.3%;
    line-height: 40px;
    color: #442600;
}

.sec_3 .block-text-12 {
    top: 37.5%;
    font-size: 54px;
    left: 55%;
    color: #fe6a00;
    letter-spacing: 18px;
}

.sec_3 .block-text-13 {
    top: 41.2%;
    font-size: 35px;
    left: 57.3%;
    color: #fff;
    line-height: 41px;
}

.sec_3 .block-text-14 {
    top: 45.3%;
    font-size: 34px;
    left: 58.3%;
    line-height: 40px;
    color: #442600;
}

.sec_3 .block-text-15 {
    top: 51%;
    font-size: 75px;
    color: #22aba9;
}

.sec_3 .block-text-15 span {
    font-size: 105px;
}

.sec_3 .block-text-16 {
    top: 56.3%;
    font-size: 70px;
    color: #284a49;
}

.sec_3 .block-text-17 {
    top: 61.5%;
    font-size: 38px;
    line-height: 50px;
    text-align: center;
    color: #214445;
}

.sec_3 .block-text-18 {
    top: 73.5%;
    left: 8.5%;
    font-size: 30px;
    color: #008581;
}

.sec_3 .block-text-19 {
    top: 69%;
    left: 69%;
    font-size: 30px;
    color: #40a787;
}

.sec_3 .block-text-20 {
    top: 93.5%;
    left: 43%;
    font-size: 30px;
    color: #40a787;
}

.sec_3 .block-text-22 {
    top: 97.5%;
    left: 4%;
    color: #a5b1aa;
}

.sec_3 .block-text-21 {
    text-align: center;
    top: 78%;
    left: 34%;
    color: #fff;
    font-size: 115px;
    line-height: 140px;
}

.sec_4 .block-text-1 {
    font-size: 76px;
    color: #274948;
    top: 1.5%;
}

.sec_4 .block-text-2 {
    font-size: 80px;
    top: 8%;
    color: #24acaa;
}

.sec_4 .block-text-2 span {
    font-size: 110px;
}

.sec_4 .block-text-3 {
    top: 28%;
    left: 30%;
    color: #284948;
    font-size: 45px;
}

.sec_4 .block-text-4 {
    top: 34%;
    left: 30%;
    color: #5d5554;
    font-size: 36px;
    line-height: 40px;
    text-align: center;
}

.sec_4 .block-text-5 {
    top: 33%;
    left: 77%;
    color: #284948;
    font-size: 45px;
}

.sec_4 .block-text-6 {
    top: 39%;
    left: 76.7%;
    color: #5d5554;
    font-size: 36px;
    line-height: 40px;
    text-align: center;
}

.sec_4 .block-text-7 {
    top: 52.5%;
    left: 29%;
    color: #284948;
    font-size: 45px;
}

.sec_4 .block-text-8 {
    top: 58.6%;
    left: 27%;
    color: #5d5554;
    font-size: 36px;
    line-height: 40px;
    text-align: center;
}

.sec_4 .block-text-9 {
    top: 57.5%;
    left: 77%;
    color: #284948;
    font-size: 45px;
}

.sec_4 .block-text-10 {
    top: 63.8%;
    left: 76.7%;
    color: #5d5554;
    font-size: 36px;
    line-height: 40px;
    text-align: center;
}

.sec_4 .block-text-11 {
    top: 76.5%;
    left: 29%;
    color: #284948;
    font-size: 45px;
}

.sec_4 .block-text-12 {
    top: 82.6%;
    left: 29%;
    color: #5d5554;
    font-size: 36px;
    line-height: 40px;
    text-align: center;
}

.sec_4 .block-text-13 {
    top: 81.5%;
    left: 77%;
    color: #284948;
    font-size: 45px;
}

.sec_4 .block-text-14 {
    top: 87.8%;
    left: 74.5%;
    color: #5d5554;
    font-size: 36px;
    line-height: 40px;
    text-align: center;
}

.sec_5 .block-text-1 {
    top: 80%;
    color: #fff;
    font-size: 88px;
    left: 6%;
    letter-spacing: 5px;
    line-height: 120px;
}

.sec_6 .block-text-1 {
    font-size: 91px;
    letter-spacing: 4px;
    top: 1%;
    color: #294b4a;
}

.sec_6 .block-text-1 span {
    font-size: 150px;
    color: #ffc000;
}

.sec_6 .block-text-2 {
    top: 25%;
    font-size: 45px;
    line-height: 85px;
    color: #6a6a6a;
    text-align: center;
    letter-spacing: 10px;
}

.sec_6 .block-text-2 span:nth-child(1) {
    font-size: 54px;
    color: #355554;
}

.sec_6 .block-text-2 span:nth-child(3) {
    font-size: 54px;
    color: #355554;
}

.sec_7 .block-text-1 {
    text-align: center;
    font-size: 88px;
    letter-spacing: 9px;
    top: 6%;
    color: #e7af29;
    line-height: 95px;
}

.sec_7 .block-text-1 span {
    font-size: 135px;
}

.sec_7 .block-text-2 {
    top: 30.5%;
    text-align: center;
    font-size: 43px;
    letter-spacing: 6px;
    left: 49%;
    color: #6f6f6e;
}

.sec_7 .block-text-2 span {
    font-size: 55px;
    color: #264847;
}

.sec_8 .block-text-1 {
    font-size: 74px;
    top: 9%;
    color: #264847;
}

.sec_8 .block-text-2 {
    font-size: 74px;
    top: 17%;
    color: #1eaaa8;
}

.sec_8 .block-text-3 {
    top: 31.5%;
    left: 41.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-4 {
    top: 38%;
    left: 21.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-5 {
    top: 38%;
    left: 61.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-6 {
    top: 46.5%;
    left: 13.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-7 {
    top: 46.5%;
    left: 72.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-8 {
    top: 54.5%;
    left: 11.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-9 {
    top: 54.5%;
    left: 75.5%;
    font-size: 39px;
    color: #2b4c4c;
    letter-spacing: 12px;
}

.sec_8 .block-text-10 {
    top: 62%;
    left: 8.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-11 {
    top: 62%;
    left: 77.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-12 {
    top: 70%;
    left: 7.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-13 {
    top: 70%;
    left: 73.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-14 {
    top: 79%;
    left: 19.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-15 {
    top: 79%;
    left: 65.5%;
    font-size: 39px;
    color: #2b4c4c;
}

.sec_8 .block-text-16 {
    top: 90.5%;
    color: #fff;
    left: 30%;
    font-size: 49px;
    letter-spacing: 4px;
}

.sec_9 .block-text-1 {
    font-size: 65px;
    top: 3%;
    color: #294b4a;
}

.sec_9 .block-text-1 span {
    font-size: 86px;
}

.sec_9 .block-text-2 {
    top: 71%;
    left: 6.5%;
    font-size: 38px;
    color: #000000;
    line-height: 41px;
    text-align: center;
}

.sec_9 .block-text-3 {
    top: 71%;
    left: 38.4%;
    font-size: 38px;
    color: #000000;
    line-height: 41px;
    text-align: center;
}

.sec_9 .block-text-4 {
    top: 71%;
    left: 74%;
    font-size: 38px;
    color: #000000;
    line-height: 41px;
    text-align: center;
}

.sec_10 .block-text-1 {
    font-size: 65px;
    top: 3%;
    color: #294b4a;
}

.sec_10 .block-text-1 span {
    font-size: 86px;
}

.sec_10 .block-text-2 {
    top: 71%;
    left: 5.5%;
    font-size: 38px;
    color: #000000;
    line-height: 41px;
    text-align: center;
}

.sec_10 .block-text-3 {
    top: 71%;
    left: 41.8%;
    font-size: 38px;
    color: #000000;
    line-height: 41px;
    text-align: center;
}

.sec_10 .block-text-4 {
    top: 71%;
    left: 70.8%;
    font-size: 38px;
    color: #000000;
    line-height: 41px;
    text-align: center;
}

.sec_11 .block-text-1 {
    top: 2.5%;
    font-size: 85px;
    letter-spacing: 8px;
    color: #294b4a;
}

.sec_11 .block-text-1 span {
    font-size: 150px;
}

.sec_11 .block-text-2 {
    top: 19.6%;
    font-size: 47px;
    color: #fff;
    letter-spacing: 4px;
}

.sec_11 .block-text-3 {
    top: 41.5%;
    left: 58%;
    font-size: 46px;
    letter-spacing: 18px;
}

.sec_11 .block-text-4 {
    top: 47.5%;
    left: 13.5%;
    font-size: 46px;
    letter-spacing: 6px;
}

.sec_11 .block-text-5 {
    top: 60%;
    left: 73.5%;
    font-size: 46px;
    letter-spacing: 16px;
}

.sec_11 .block-text-6 {
    top: 76%;
    left: 19.5%;
    font-size: 46px;
    letter-spacing: 4px;
}

.sec_11 .block-text-7 {
    top: 80%;
    left: 64.5%;
    font-size: 46px;
    letter-spacing: 18px;
}

.sec_12 .block-text-1 {
    top: 3%;
    font-size: 66px;
    letter-spacing: 4px;
    left: 51%;
}

.sec_12 .block-text-2 {
    top: 12.5%;
    text-align: center;
    left: 10%;
    color: #fff;
    font-size: 43px;
    letter-spacing: 4px;
    line-height: 52px;
}

.sec_12 .block-text-4 {
    top: 50.2%;
    left: 8%;
    color: #fff;
    font-size: 37px;
    text-align: center;
    letter-spacing: 4px;
    line-height: 45px;
}

.sec_12 .block-text-6 {
    top: 58.3%;
    left: 19%;
    font-size: 37px;
}

.sec_12 .block-text-7 {
    top: 64%;
    left: 13%;
    font-size: 37px;
}

.sec_12 .block-text-8 {
    top: 73.5%;
    left: 14%;
    font-size: 37px;
}

.sec_12 .block-text-9 {
    color: #61615f;
    top: 77%;
    left: 9.5%;
    font-size: 30px;
    white-space: normal;
    width: 31%;
    text-align: center;
    line-height: 36px;
}

.sec_12 .block-text-10 {
    top: 91%;
    left: 13%;
    color: #fff;
    font-size: 43px;
    letter-spacing: 2px;
}

.sec_12 .block-text-11 {
    top: 12.5%;
    text-align: center;
    left: 58%;
    color: #fff;
    font-size: 43px;
    letter-spacing: 4px;
    line-height: 52px;
}

.sec_12 .block-text-13 {
    top: 50.2%;
    left: 65%;
    color: #fff;
    font-size: 37px;
    text-align: center;
    letter-spacing: 4px;
    line-height: 45px;
}

.sec_12 .block-text-15 {
    top: 58.3%;
    left: 65.5%;
    font-size: 37px;
}

.sec_12 .block-text-16 {
    top: 64%;
    left: 67.5%;
    font-size: 37px;
}

.sec_12 .block-text-17 {
    top: 69.5%;
    left: 65.5%;
    font-size: 37px;
}

.sec_12 .block-text-18 {
    color: #61615f;
    top: 73%;
    left: 60.5%;
    font-size: 30px;
    white-space: normal;
    width: 31%;
    text-align: center;
    line-height: 36px;
}

.sec_12 .block-text-19 {
    top: 91%;
    left: 64.5%;
    color: #fff;
    font-size: 43px;
    letter-spacing: 2px;
}