/* === === === === === === === === === === === === === === === === === === Source === === === */

.COVER-BACKGROUND {
    background-image: url(../../official/background.jpg);
}

.MASH-BLOCK .BG-COVER {
    background-image: url(../../official/cover.jpg);
}

.BG-COVER.IMAGES-HOMES {
    background-image: url(../../official/block/homes.jpg);
}
.BG-COVER.IMAGES-HOTEL {
    background-image: url(../../official/block/hotel.jpg);
}

.BOOTSTRAP-FLOAT .IMAGES-01 {
    background-image: url(../../official/block/01.jpg);
}
.BOOTSTRAP-FLOAT .IMAGES-02 {
    background-image: url(../../official/block/02.jpg);
}
.BOOTSTRAP-FLOAT .IMAGES-03 {
    background-image: url(../../official/block/03.jpg);
}
.BOOTSTRAP-FLOAT .IMAGES-04 {
    background-image: url(../../official/block/04.jpg);
}
.BOOTSTRAP-FLOAT .IMAGES-05 {
    background-image: url(../../official/block/05.jpg);
}
.BOOTSTRAP-FLOAT .IMAGES-06 {
    background-image: url(../../official/block/06.jpg);
}

#MASSEUSE.BG-COVER {
    background-image: url(../../official/stand.jpg);
}
#MASSEUSE.BG-COVER.MAX-WIDTH {
    border-radius: 12px;
    background-image: url(../../official/magazine.jpg);
}

.WAVES-CONTENT.BG-COVER {
    background-image: url(../../official/form.jpg);
}

FONTS.WEBKIT {
    background-attachment: fixed;
    background-image: url(../../official/webkit.jpg);
}



input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}






#NOTEBOOK, #MASSEUSE, #MASSEUSE.BG-COVER {
    display: none;
}

.COVER-BACKGROUND .SUMMARY.WIDTH-VW {
    z-index: 2;

    background: none;
    background-color: white;
}

.COVER-BACKGROUND .SUMMARY.WIDTH-VW a {
    color: black;
}
.COVER-BACKGROUND .SUMMARY.WIDTH-VW a.TEXT-BUTTON:hover {
    color: white;
}

.COVER-BACKGROUND .SUMMARY.WIDTH-VW a.BOLDS {
    font-weight: 700;
}

.COLOR-BACKGROUND.WIDTH2.TRANSPARENT {
    z-index: 0;

    top: 0;
    position: fixed;

    padding-top: 93px;
    padding-bottom: 0;

    border-bottom: 1px solid transparent;
    background-color: white;
}

FONTS.WEBKIT.LINE-HEIGHT {
    line-height: 20vw;
}

.POSITION-BOTTOM .RELATIVES {
    z-index: 1;
    position: relative;
}

.POSITION-BOTTOM .BACKGROUNDS {
    padding-bottom: 51px;
    background-color: white;
}

.POSITION-BOTTOM .RELATIVES.BOTTOM-AUTO {
    margin-top: 93px;

    padding-top: 20vw;
    padding-bottom: 0;
}
.POSITION-BOTTOM .RELATIVES.BOTTOM-AUTO > div {
    padding-top: 21px;
    padding-bottom: 21px;

    background-color: white;
}

.POSITION-BOTTOM .RELATIVES.BOTTOM-AUTO img {
    display: block;
    max-width: 767px;
}

CENTER marquee {
    max-width: 1199px;
}

.COLOR-BACKGROUND > div.MASH-BLOCK,
.IMITATE-FLOAT {
    max-width: 767px;
}

.COLOR-BACKGROUND.WHITE-BORDER-NONE {
    border-bottom: none;

    /* === === === === === === === === ===
    background-color: white;
    === === === === === === === === === */
}
.COVER-BACKGROUND > div {
    background-color: rgba(0, 0, 0, .215);
}

.IMITATE-FLOAT .MIDDLE span {
    font-size: 18px;
}

br {
    clear: both;
    display: block;
}

BARCODE, .BARCODE {
    font-size: 300%;
    font-family: 'Libre Barcode 39 Text', 'Noto Serif TC';

    /* === === === === === === === === ===
    font-family: 'Libre Barcode 39', 'Noto Serif TC';
    === === === === === === === === === */
}



.POSITION-SCROLL .FONT {
    font-weight: 600;
}

.FOOTER-MENU .REMOVE-PADDING a.LINK-BUTTON {
    color: white;
}



/* === === === === === === === === ===
.COLOR-BACKGROUND {
    color: white;
    background-color: black;
}

.FOOTER-MENU.BLACK-BACKGROUND {
    background-color: #512B81;
}



body {
    text-transform: inherit;
}

=== === === === === === === === === */

body {
    text-transform: inherit;
}

#SET-OFF {
    display: block;
    margin-top: -30px;
}

a.COLOR-CONVERSION {
    text-align: center;
}

LOGO {
    width: 100%;

    padding-top: 0;

    color: white;
    background-image: none;
    background-color: black;

    text-align: center;
}
LOGO.WHITE-BLOCK {
    padding-top: 24px;
    background-color: white;
}
LOGO blocks:hover middle {
    background-color: transparent;
}

LOGO DIVS {
    padding-top: 0;
    padding-bottom: 0;
}



HIDE, .HIDE, hide, .hide {
    display: block;

    width: 0px;
    height: 0px;

    font-size: 0px;

    color: transparent;
}

.POSITION-SCROLL p.HIDE,
.POSITION-SCROLL p.hide {
    font-size: 0;
}

.ANIMATE-LEFT-MIN inline icon {
    color: white;
    background-color: #333;
}
.ANIMATE-LEFT-MIN inline middle {
    font-weight: 600;
}



.FORM-BLOCK.PADDING-NONE button {
    padding-left: 15px;
    letter-spacing: 3px;
}

/* === === === === === === === === ===
.FORM-BLOCK.PADDING-NONE button {
    padding-left: 15px;
    letter-spacing: 3px;

    color: white;
    border-color: #ff007b;
    background-color: #ff007b;
}
.FORM-BLOCK.PADDING-NONE button:hover {
    color: black;
    border-color: white;
    background-color: white;
}
=== === === === === === === === === */

.POSITION-SCROLL a.ICON-BUTTON.BOLD {
    color: white;
    font-weight: 600;
}

@media screen and (max-width: 767px) {
    .RADIUS-XL-CONTENT {
        background-image: url(official/block/radius.jpg);
    }



    .COLOR-BACKGROUND > div {
        padding-top: 0;
        padding-bottom: 0;
    }

    .POSITION-SCROLL .FONT-BOTTOM {
        padding-top: 12px;
    }
    .POSITION-SCROLL a.ICON-BUTTON.RADIUS-NONE {
        width: 50px;
    }



    .COLOR-BACKGROUND.WIDTH2.TRANSPARENT {
        padding-top: 69px;
    }
    .POSITION-BOTTOM .RELATIVES.BOTTOM-AUTO {
        margin-top: 69px;
    }
}

@media screen and (max-width: 500px) {
    #NOTEBOOK, #MASSEUSE, #MASSEUSE.BG-COVER {
        display: none;
    }

    .NAVIGATION ul li.LOGO a,
    .ANIMATE-LEFT-MIN
    .NAVIGATION ul li.LOGO a {
        display: table-cell;
        font-size: 39px;
    }

    LOGO.WHITE-BLOCK {
        padding-top: 12px;
    }

    LOGO blocks {
        margin-top: -75px;
    }
    LOGO blocks middle {
        height: 75px;
    }

    .FORM-BLOCK input, .FORM-BLOCK button {
        height: 39px;
        padding: 6px 12px;
    }

    .FORM-BLOCK.PADDING-NONE button {
        font-size: 15px;
    }
}

@media screen and (max-width: 360px) {
    .COLOR-CONVERSION.MIDDLE-SIZE MIDDLE {
        height: calc(215px - 48px);
        max-height: 215px;
    }
    .COLOR-CONVERSION.MIDDLE-SIZE img {
        max-width: 65px;
        border-radius: 65px;
    }
}

@media screen and (max-width: 280px) {
    LOGO.WHITE-BLOCK {
        padding-top: 0;
    }
}



/* === === === === === === === === === Background CSS === === === */
.COVER-BACKGROUND .SUMMARY.WIDTH-VW {
    background-color: transparent;
}

.COVER-BACKGROUND .SUMMARY.WIDTH-VW,
.COVER-BACKGROUND .SUMMARY.WIDTH-VW a {
    color: white;
}

/* === === === === === === === === ===

.COVER-BACKGROUND .SUMMARY.WIDTH-VW {
    background-color: #dacbe6; black;
}

.COVER-BACKGROUND .SUMMARY.WIDTH-VW,
.COVER-BACKGROUND .SUMMARY.WIDTH-VW a {
    color: black; white;
}

=== === === === === === === === === */



LOGO.LARGE-TXT-BLOCK {
    background-color: black;
}



LOGO.LARGE-TXT-BLOCK {
    background-image: url(official/blacks.jpg);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.POSITION-SCROLL:hover LOGO.LARGE-TXT-BLOCK {
    background-image: url(official/brand.jpg);

    animation-name: fadeIn;
    animation-duration: 1s;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 1s;
}

.POSITION-SCROLL:hover DIVS {
    background-color: rgba(0, 0, 0, .135);

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
}

/* === === === === === === === === ===

.BRANDS MIDDLE .PHOTO-FRAME {
    background-image: url(official/white.jpg);
}

=== === === === === === === === === */

.BRANDS {
    background-color: transparent;
}
.BRANDS MIDDLE .PHOTO-FRAME {
    background-image: none;
}



LOGO.LARGE-TXT-BLOCK,

.BRANDS,

.POSITION-SCROLL .POSITIONS,
.POSITION-SCROLL .POSITIONS a {
    color: white;
}

.POSITION-SCROLL .POSITIONS a {
    background-color: transparent;
}
.POSITION-SCROLL .POSITIONS a:hover {
    color: black;
    background-color: white;
}



.LARGE-TXT-BLOCK {
    text-shadow: 3px 4px 12px rgba(0, 0, 0, .5);
}



/* === === === === === === === === ===

FONTS.WEBKIT.LINE-HEIGHT {
    line-height: 156px;
}

LOGO FONTS,
DIVS FONTS {
    font-size: 108px;
    font-weight: 700;

    text-shadow: 3px 6px 15px rgba(0, 0, 0, .35);
}

DIVS FONTS,
DIVS FONTS::before {
    display: none;

    width: 100%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

DIVS FONTS::before {
    display: block;
    line-height: 1;
    content: "Absolutely";
}
DIVS FONTS::after {
    font-size: 54px;
    content: "Way To Improve Health Absolutely Harmless";
}

=== === === === === === === === === */

.BRANDS-FONT MIDDLE div.INHERIT h1,
.BRANDS-FONT MIDDLE div.INHERIT p {
    color: white; #555;
    text-shadow: 3px 6px 15px rgba(0, 0, 0, .35);
}

.BRANDS-FONT MIDDLE div.INHERIT h1 {
    margin: 0;
    font-size: 185px;
}
.BRANDS-FONT MIDDLE div.INHERIT p {
    padding-bottom: 18px;
    font-size: 18px;
}

.POSITION-SCROLL a.LARGE-CSS {
    display: block;

    width: 100%;
    max-width: 245px;

    height: 50px;
    display: table-cell;
    vertical-align: middle;

    border: 0;

    padding-left: 66px;
    letter-spacing: 6px;
    padding-right: 60px;

    font-size: 18px;
    text-align: center;
    text-shadow: 2px 4px 6px rgba(0, 0, 0, .5);

    color: white; #e6e6e6;
    background-color: rgba(246, 200, 227, .85);
}
.POSITION-SCROLL a.LARGE-CSS:hover {
    border-radius: 50px;

    color: white;
    background-color: #a47cb5; black;
}



.FOOTER-MENU.BLACK-BACKGROUND a.LINK-BUTTON.TRANSPARENT-NONE-PADDING.NEWLY-COLOR2,
.FOOTER-MENU.BLACK-BACKGROUND a.LINK-BUTTON.TRANSPARENT-NONE-PADDING.NEWLY-COLOR2:hover,
.FOOTER-MENU.BLACK-BACKGROUND p.NEWLY-COLOR2 {
    color: #ec93c7;
}

.COLOR-CONVERSION {
    background: linear-gradient(45deg, #8bbbba, #f6c8e3, #ec93c7, #fbe8e2, #a47cb5);
    background: -webkit-linear-gradient(45deg, #8bbbba, #f6c8e3, #ec93c7, #fbe8e2, #a47cb5);

    background-size: 600% 600%;

    animation: Animated-BG 30s ease infinite;
    -moz-animation: Animated-BG 30s ease infinite;
    -webkit-animation: Animated-BG 30s ease infinite;
}

@media screen and (max-width: 1199px) {
    .BRANDS-FONT MIDDLE div.INHERIT h1 {
        font-size: 13.5vw;
    }
}

@media screen and (max-width: 500px) {
    .BRANDS-FONT MIDDLE div.INHERIT h1 {
        font-size: 30px;
    }
    .BRANDS-FONT MIDDLE div.INHERIT p {
        font-size: 15px;
    }
}






/* === === === === === === === === === === === === === === === === === === Block：01 === === === */

.MENU-CONTAINER,
.MENU-CONTAINER > div,
.PRICE-LIST,
.PRICE-LIST > .INFO-FRAME,
.INFO-FRAME > .PRICE-TITLE,
.INFO-FRAME > .PRICE {
    margin: 0;
}

.MENU-CONTAINER,
.MENU-CONTAINER > div,
.PRICE-LIST,
.PRICE-LIST > .INFO-FRAME {
    border: 0;
    padding: 0;

    font: inherit;

    vertical-align: baseline;
}



.MENU-CONTAINER {
    max-width: 500px;
    padding-top: 12px;

    transition: background .3s,
                border .3s, border-radius .3s,
                transform var(--e-transform-transition-duration, .4s),
                box-shadow .3s;
}

.MENU-CONTAINER > div {
    display: flex;
    flex-wrap: wrap;

    margin-bottom: 12px;
}

.PRICE-LIST {
    position: relative;

    width: 100%;
    max-width: 100%;

    min-height: 1px;

    flex-grow: 1;
    flex-basis: 0;
}



.PRICE-LIST > .INFO-FRAME {
    display: flex;
    align-items: baseline;
}



.INFO-FRAME > .PRICE-TITLE,
.INFO-FRAME > .PRICE {                     
    font-size: 18px;
    font-weight: 600;
    line-height: 42px;
}

.INFO-FRAME > .PRICE-TITLE {
    word-wrap: break-word;
    -ms-word-wrap: break-word;
}

.INFO-FRAME > .SEPARATOR {
    position: relative;

    margin: 0 15px;
    height: 5px;

    color: rgba(0, 0, 0, .5);
    border-bottom: 1px dashed #000033;

    flex-grow: 1;
}

.INFO-FRAME > .PRICE {
    display: flex;

    color: #DDBC9B;
    align-items: baseline;
}






.MENU-CONTAINER > iframe {
    width: calc(100vw - 24px - 3px);
    max-width: 320px;

    height: calc(100vw * 1.75);
    max-height: 560px;

    border-radius: 9px;
}

.SPOTIFY {
    max-width: 384px;
    margin-bottom: 24px;

    padding-top: 24px;
    padding-bottom: 24px;

    padding-left: 12px;
    padding-right: 12px;

    border-radius: 9px;

    background-color: black;
}



/* === === === === === === === === === === === === === === === === === === Block：02 === === === */

.POSITION-SCROLL .ABSOLUTE {
    top: 93px;
    position: absolute;
}

.POSITION-SCROLL .ABSOLUTE .ANIMATE-LEFT-MIN {
    right: 0;
    width: 100%;

    animation-name: fadeInUp;
    animation-duration: 1.5s;
    -webkit-animation-name: fadeInUp;
    -webkit-animation-duration: 1.5s;

    box-shadow: none;
}

.POSITION-SCROLL .ABSOLUTE .ANIMATE-LEFT-MIN .HEIGHT-FIXED,
.POSITION-SCROLL .ABSOLUTE .ANIMATE-LEFT-MIN .HEIGHT-FIXED > div {
    height: calc(100vh - 93px);
}
.POSITION-SCROLL .ABSOLUTE .ANIMATE-LEFT-MIN .HEIGHT-FIXED > div {
    display: table-cell;
    vertical-align: middle;
}

.POSITION-SCROLL .ABSOLUTE a.COLOR-LINK,
.POSITION-SCROLL .ABSOLUTE a.COLOR-LINK:hover {
    display: block;

    width: 100%;

    padding-top: 0;
    padding-bottom: 12px;

    padding-left: 0;
    padding-right: 0;
    letter-spacing: 0;

    color: black;
    background-color: transparent;

    text-align: center;
}

.POSITION-SCROLL .ABSOLUTE a.COLOR-LINK {
    font-size: 18px;
}
.POSITION-SCROLL .ABSOLUTE a.COLOR-LINK:hover {
    font-size: 24px;

    padding-left: 3px;
    letter-spacing: 3px;
}

.POSITION-SCROLL .ABSOLUTE a.FA-CSS,
.POSITION-SCROLL .ABSOLUTE a.FA-CSS:hover { 
    width: 45px;
    height: 45px;
    border-radius: 45px;

    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    letter-spacing: 0;

    color: white;

    font-size: 18px;
    text-align: center;
}

.POSITION-SCROLL .ABSOLUTE a.FA-CSS {
    background-color: #666;
}
.POSITION-SCROLL .ABSOLUTE a.FA-CSS:hover {
    background-color: black;
}

@media screen and (max-width: 767px) {
    .POSITION-SCROLL .ABSOLUTE {
        top: 69px;
    }

    .POSITION-SCROLL .ABSOLUTE .ANIMATE-LEFT-MIN .HEIGHT-FIXED,
    .POSITION-SCROLL .ABSOLUTE .ANIMATE-LEFT-MIN .HEIGHT-FIXED > div {
        height: calc(100vh - 69px);
    }
}



/* === === === === === === === === === === === === === === === === === === Block：03 === === === */

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

    padding-top: 93px;
}
.BRANDS MIDDLE {
    height: calc(100vh - 93px);
}

.BRANDS MIDDLE .PHOTO-FRAME {
    width: 100vw;
    max-width: calc(500px - 48px);

    height: calc(100vh - 93px - 84px);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    /* === === === === === === === === ===
    background-attachment: fixed;
    === === === === === === === === === */
}

.BRANDS-FONT {
    top: 0;

    z-index: 3;
    position: absolute;

    width: 100%;
    padding-top: 93px;
}

.BRANDS-FONT MIDDLE {
    height: calc(100vh - 93px);
}
.BRANDS-FONT MIDDLE div {
    top: calc(calc(100vh - 20vw - 93px) / 2);
    left: 24px;
    right: 24px;

    position: fixed;

    width: 100%;
    max-width: calc(100% - 48px);

    padding-top: 93px;
}

.BRANDS-FONT MIDDLE div.INHERIT {
    top: inherit;
    bottom: 30px;
}

@media screen and (max-width: 767px) {
    .BRANDS {
        padding-top: 69px;
    }
    .BRANDS MIDDLE {
        height: calc(100vh - 69px);
    }

    .BRANDS-FONT {
        padding-top: 69px;
    }
    .BRANDS-FONT MIDDLE {
        height: calc(100vh - 69px);
    }
    .BRANDS-FONT MIDDLE div {
        top: calc(calc(100vh - 20vw - 69px) / 2);
        padding-top: 69px;
    }
}

@media screen and (max-width: 500px) {     
    .BRANDS MIDDLE .PHOTO-FRAME {
        max-width: calc(100vw - 24px);
        height: calc(100vh - 69px);
    }

    .BRANDS-FONT MIDDLE div {
        left: 12px;
        right: 12px;

        max-width: calc(100% - 24px);
    }
}

@media screen and (max-width: 280px) {     
    .BRANDS MIDDLE .PHOTO-FRAME {
        max-width: 100vw;
        height: calc(100vh - 69px);
    }
}



/* === === === === === === === === === === === === === === === === === === Block：04 === === === */

.POSITION-SCROLL .POSITIONS .ANIMATE-LEFT-MIN {
    right: 0;
    width: 100%;

    animation-name: fadeInDown;
    animation-duration: 1.5s;
    -webkit-animation-name: fadeInDown;
    -webkit-animation-duration: 1.5s;

    box-shadow: none;
}

.POSITION-SCROLL .POSITIONS .ANIMATE-LEFT-MIN .FIXED-STYLE {
    width: 100%;
    max-width: calc(100% - 24px - 3px);

    left: 12px;
    right: 15px;
    bottom: 12px;

    position: fixed;
}

.POSITION-SCROLL .POSITIONS .ANIMATE-LEFT-MIN .SCROLL-X {
    width: 100vw; calc(100vw - 24px);
}









.ANIMATE-LEFT-MIN.NEWLY-CSS {
    top: 93px;
}
.ANIMATE-LEFT-MIN.NEWLY-CSS .BG-WHITE {
    border-top: 0; solid 1px rgba(0, 0, 0, .15);
    background-color: white;
}

.ANIMATE-LEFT-MIN.NEWLY-CSS .HEIGHT-FIXED,
.ANIMATE-LEFT-MIN.NEWLY-CSS .HEIGHT-FIXED-SCROLL {
    height: calc(100vh - 93px);
    padding-bottom: 0;
}

.ANIMATE-LEFT-MIN.NEWLY-CSS .SCROLL-X {
    height: calc(100vh - 93px - 24px);
}



.ANIMATE-LEFT-MIN.UNLIMITED,
.ANIMATE-LEFT-MIN.NEWLY-CSS.UNLIMITED {
    top: 0;
}
.ANIMATE-LEFT-MIN.UNLIMITED .HEIGHT-FIXED,
.ANIMATE-LEFT-MIN.NEWLY-CSS.UNLIMITED .HEIGHT-FIXED,
.ANIMATE-LEFT-MIN.NEWLY-CSS.UNLIMITED .HEIGHT-FIXED-SCROLL,

.POSITION-SCROLL .ABSOLUTE
.ANIMATE-LEFT-MIN.UNLIMITED .HEIGHT-FIXED,

.POSITION-SCROLL .ABSOLUTE
.ANIMATE-LEFT-MIN.UNLIMITED .HEIGHT-FIXED > div {
    height: 100vh;
}
.ANIMATE-LEFT-MIN.NEWLY-CSS.UNLIMITED .SCROLL-X {
    height: calc(100vh - 24px);
}



.POSITION-SCROLL .POSITIONS div.BOTTOM-CSS {
    padding-bottom: 42px;
}

.POSITION-SCROLL .POSITIONS div.FIXEDS-CSS {
    width: 100%;
    max-width: 333px;

    right: 15px;
    bottom: 12px;
    position: fixed;
}



.POSITION-SCROLL .POSITIONS a.NEWLY-CSS,
.POSITION-SCROLL .POSITIONS a.NEWLY-CSS:hover {
    width: 50px;
    height: 50px;

    border-radius: 50px;

    display: table-cell;
    vertical-align: middle;



    padding-left: 0;
    padding-right: 0;
    letter-spacing: 0;

    text-align: center;
}

.POSITION-SCROLL .POSITIONS a.NEWLY-CSS {
    color: white;
    background-color: #333;
}

.POSITION-SCROLL .POSITIONS a.SMALL-CSS,
.POSITION-SCROLL .POSITIONS a.SMALL-CSS:hover { 
    padding-top: 9px;
    padding-bottom: 0;

    padding-left: 0;
    padding-right: 0;
    letter-spacing: 0;

    font-size: 75%;
    text-align: left;

    color: black;
    background-color: transparent;
}

.POSITION-SCROLL .POSITIONS a.SMALL-CSS:hover::before { 
    content: "\f068\00a0";

    font-weight: 900;
    font-family: "Font Awesome 6 Free";

    animation-name: fadeInLeft;
    animation-duration: 1.85s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@media screen and (max-width: 767px) {
    .ANIMATE-LEFT-MIN.NEWLY-CSS {
        top: 69px;
    }

    .ANIMATE-LEFT-MIN.NEWLY-CSS .HEIGHT-FIXED,
    .ANIMATE-LEFT-MIN.NEWLY-CSS .HEIGHT-FIXED-SCROLL {
        height: calc(100vh - 69px);
    }

    .ANIMATE-LEFT-MIN.NEWLY-CSS .SCROLL-X {
        height: calc(100vh - 69px - 24px);
    }
}

@media screen and (max-width: 500px) {
    .POSITION-SCROLL .POSITIONS div.FIXEDS-CSS {
        width: calc(100% - 24px - 3px);
        max-width: 100%;
    }
}



/* === === === === === === === === === === === === === === === === === === Block：05 === === === */

.POSITIONS {
    top: 93px;
    left: 24px;

    z-index: 3;
    position: fixed;

    width: auto;

    /* === === === === === === === === ===
    width: 100%;
    max-width: 320px;
    === === === === === === === === === */

    padding: 24px 0;
}

.POSITION-SCROLL .POSITIONS a {
    width: auto;
    height: auto;
    display: block;
    vertical-align: inherit;

    border: 0;

    font-size: 18px;
    text-align: left;

    padding-top: 9px;
    padding-bottom: 9px;

    padding-left: 0;
    letter-spacing: 3px;
}
.POSITION-SCROLL .POSITIONS a:hover {
    width: auto;
    max-width: auto;

    padding-left: 27px;
    padding-right: 24px;

    text-align: center;
}

#SET-OFF MIDDLE i {
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

@media screen and (max-width: 767px) {
    #OFF-767 {
        display: none;
    }



    .POSITIONS {
        top: 69px;
        padding: 12px 0;
    }

    .POSITION-SCROLL .POSITIONS a:hover {
        background-color: rgba(0, 0, 0, .65);
    }
}

@media screen and (max-width: 500px) {
    .POSITION-SCROLL .POSITIONS a {
        color: white;
    }
}

@media screen and (max-width: 280px) {
    .POSITIONS {
        left: 12px;
    }
}



@media screen and (max-height: 545px) {
    .POSITIONS {
        display: none;
    }
}



/* === === === === === === === === === === === === === === === === === === Block：06 === === === */

.RELATIVES .MARGIN-200 {
    margin-top: -200px;
}
.RELATIVES .MARGIN-200 MIDDLE {
    width: 100%;
    height: 200px;

    color: white;
    text-shadow: 3px 6px 12px rgba(0, 0, 0, .5);
}

.RELATIVES .MARGIN-200 MIDDLE h1,
.RELATIVES .MARGIN-200 MIDDLE p {
    margin-top: 0;
    padding: 0 12px;

    width: 100%;
    max-width: calc(100vw - 24px);

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}



.RELATIVES.MARGIN-51 {
    background-color: white;
}
.RELATIVES.MARGIN-51 MIDDLE {
    height: 51px;
}



/* === === === === === === === === === === === === === === === === === === Block：07 === === === */

.BACKGROUND-01 {
    background-color: white;
}

.SIZE-02 {
    width: 100%;
    height: auto;
}

.INDEX-03,
.INDEX-04 > div {
    padding-top: 93px;
}

.INDEX-03 {
    padding-bottom: 48px;

    padding-left: 24px;
    padding-right: 24px;
}

.INDEX-04 {
    right: 0;
    z-index: 1;

    position: fixed;

    background-image: url(official/background.gif);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.INDEX-04 > div {
    height: 100vh;
}



.COVER-BACKGROUND .SUMMARY.WIDTH-VW {
    background-color: black;
}



/* === Font Style === === === === === === === === === */

.INDEX-03 h1,
.INDEX-03 p {
    border: 0;

    width: 100%;
    max-width: 500px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.INDEX-03 p,
.INDEX-03 span {
    padding-left: 3px;
    letter-spacing: 3px;
}

.INDEX-03 h1 {
    margin-bottom: 0;

    font-size: 36px;

    padding-left: 6px;
    letter-spacing: 6px;
}
.INDEX-03 p {
    margin: 0;

    padding-top: 6px;
    padding-bottom: 12px;

    font-size: 18px;
}

.INDEX-03 span {
    display: block;
    padding-top: 48px;
    font-size: 15px;
}

DIVS FONTS, .FONTS-LARGE {
    font-size: 7.5vw;
    line-height: 10.5vw;

    font-weight: 700;
    text-shadow: 3px 9px 27px rgba(0, 0, 0, .35);
}
DIVS FONTS.LARGE-SIZE {
    font-size: 15vw;
    line-height: 19vw;
}

.FONTS-LARGE {
    margin: 0;
    color: white;
}

.FONTS-GRADIENT {
    background: -webkit-linear-gradient(top left, #3cc3b6 10%, #8e43e7 50%, #3a265f 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.GRADIENT-TIKTOK {
    background: -webkit-linear-gradient(45deg, #ff0050, #00f2ea);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* End === === === === === === === === === Font Style === */



.POSITION-SCROLL .INDEX-03 img {
    max-width: 767px;
    display: block;
}



.POSITION-SCROLL .INDEX-03 a {
    width: 225px;
    height: 45px;
    display: table-cell;
    vertical-align: middle;

    border: 0;

    color: white;
    background-color: rgba(0, 0, 0, .85);

    padding-left: 6px;
    letter-spacing: 6px;

    font-size: 18px;
    text-align: center;
}
.POSITION-SCROLL .INDEX-03 a:hover {
    color: white;
    background-color: rgba(107, 107, 107, .85);

    transition: all 1s;
}



.POSITION-SCROLL .INDEX-03 .RADIUS-ICONS PADDING {
    display: inline-block;
    padding: 24px 6px;
}

.POSITION-SCROLL .INDEX-03 .RADIUS-ICONS a {
    width: 50px;
    height: 50px;
    display: table-cell;
    vertical-align: middle;

    border: 0;
    border-radius: 50px;

    color: black;
    background-color: white;

    padding-left: 0;
    letter-spacing: 0;

    font-size: 21px;
    text-align: center;
    box-shadow: 3px 3px 9px rgba(0, 0, 0, .35);
}
.POSITION-SCROLL .INDEX-03 .RADIUS-ICONS a:hover {
    color: white;
    background-color: rgba(0, 0, 0, .85);

    box-shadow: none;
    transition: all 1s;
}

/* === === === === === === === === === *** *** *** === === === === === === === === === */

#HOT-NEWS {
    right: 24px;
    bottom: 24px;
    z-index: 3;
    position: fixed;

    max-width: 360px;

    border-radius: 12px;

    color: black;
    background: rgba(255, 255, 255, .75);

    text-align: center;

    box-shadow: 3px 6px 18px rgba(0, 0, 0, .5);



    animation-name: zoomIn;
    animation-duration: 1.6s;
    animation-fill-mode: both;

    -webkit-animation-name: zoomIn;
    -webkit-animation-duration: 1.6s;
    -webkit-animation-fill-mode: both;                  
}
#HOT-NEWS > div {
    padding: 18px 18px;
}

#HOT-NEWS .SIZE-1 {
    margin: 0;

    font-size: 39px;
    line-height: 1;
    text-align: center;
}
#HOT-NEWS .SIZE-2 {
    font-size: 18px;

    width: 100%;

    max-width: 500px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#HOT-NEWS .SIZE-3 {
    padding-top: 12px;
    padding-bottom: 12px;

    font-size: 15px;
}



#HOT-NEWS .VID-CSS, .POSITION-SCROLL #HOT-NEWS a {
    box-shadow: none;
}

#HOT-NEWS .VID-CSS {
    position: relative;

    height: 0;
    overflow: hidden;

    padding-top: 0;
    padding-bottom: 56.6%;

    /* === === === === === === === === ===
    padding-bottom: 56.6%; YouTube Size
    padding-bottom: 175%;  TikTok Size
    === === === === === === === === === */

    background: none;

    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}
#HOT-NEWS .VID-CSS.TIKTOK {
    padding-bottom: 175%;
}

#HOT-NEWS video, #HOT-NEWS iframe {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}
#HOT-NEWS video {
    z-index: -1;
}
#HOT-NEWS iframe {
    z-index: 0;
}

.POSITION-SCROLL #HOT-NEWS a {
    width: 100vw;
    height: 45px;
    display: table-cell;
    vertical-align: middle;

    border: 0;
    padding-left: 0;
    letter-spacing: 0;

    color: white;
    background-color: black;

    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;

    font-size: 21px;
    font-weight: 700; 
    text-align: center;

    transition: all .5s;
}
.POSITION-SCROLL #HOT-NEWS a:hover {
    color: black;
    background-color: white;
}

/* === === === === === === === === === *** *** *** === === === === === === === === === */

.SCROLL-Y {
    width: calc(100vw - 24px);
    max-width: 1199px;

    height: calc(calc(100vw - 24px) * 1.75);
    max-height: calc(325px * 1.7765);

    color: black;
}

.SCROLL-Y .FULL-SIZE,
.SCROLL-Y .FULL-SIZE > div {
    clear: both;
}

.SCROLL-Y .FULL-SIZE {
    width: calc(325px * 6);
}



.SCROLL-Y .FULL-SIZE > div > div,
.SCROLL-Y .FULL-SIZE iframe,
.SCROLL-Y .FULL-SIZE blockquote {
    width: 100vw;
    max-width: 325px;

    height: 100vh;
    max-height: calc(calc(325px * 1.7765) - 6px - 6px);
}

.SCROLL-Y .FULL-SIZE > div > div {
    float: left;
    display: block;
}

.SCROLL-Y .FULL-SIZE iframe,
.SCROLL-Y .FULL-SIZE blockquote,
.SCROLL-Y .FULL-SIZE .IMAGE-CARD {
    border-radius: 12px;
}



.SCROLL-Y .FULL-SIZE .IMAGE-CARD {
    padding: 24px 12px;

    color: white;
    background-image: url(official/background.gif);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    text-shadow: 3px 3px 9px rgba(0, 0, 0, .35);
}

.SCROLL-Y .FULL-SIZE .TITLES,
.SCROLL-Y .FULL-SIZE p {
    margin: 0;
}

.SCROLL-Y .FULL-SIZE .TITLES {
    font-size: 27px;

    width: 100%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.SCROLL-Y .FULL-SIZE p {
    padding-top: 15px;
    font-size: 15px;
}



.tiktok-embed {
    margin: 0;
    border: 0;

    position: inherit;
    line-height: inherit;
}



/* === === === === === === === === === Scroll Y === === === */
.SCROLL-Y::-webkit-scrollbar {
    height: 6px;
    width: 100%; !important
}

.SCROLL-Y::-webkit-scrollbar-thumb,
.SCROLL-Y::-webkit-scrollbar-track {
    border-radius: 0; 12px;
}

/* === === === === === === === === === Scroll Y：軌道 === === === */
.SCROLL-Y::-webkit-scrollbar-track {
    background-color: #4a4a4a;
}

/* === === === === === === === === === Scroll Y：滑塊 === === === */
.SCROLL-Y::-webkit-scrollbar-thumb {
    background-color: #97a7e5;
}

/* === === === === === === === === === *** *** *** === === === === === === === === === */

.TWO-COLOURS DIALOGS.DIRECTION-LEFT {
    color: #222;
    background: #e4e4d0;
}
.TWO-COLOURS DIALOGS.DIRECTION-LEFT::before {
    border-right-color: #e4e4d0;
}
.TWO-COLOURS DIALOGS.DIRECTION-RIGHT {
    color: #222;
    background: #ffe5e5;
}
.TWO-COLOURS DIALOGS.DIRECTION-RIGHT::after {
    border-left-color: #ffe5e5;
}



.INDEX-03.CODE-20231211 .CLEAR {
    padding: 24px 0;
}

.INDEX-03.CODE-20231211 DIALOGS {
    padding: 9px;
}
.INDEX-03.CODE-20231211 DIALOGS MIDDLE p {
    width: 100%;
    max-width: calc(245px - 63px - 18px);
}

.INDEX-03.CODE-20231211 DIALOGS.DIRECTION-LEFT MIDDLE p,
.INDEX-03.CODE-20231211 DIALOGS.DIRECTION-RIGHT MIDDLE p {
    margin: 0;
    padding: 0 0 0 0;

    letter-spacing: 0;
}

.INDEX-03.CODE-20231211 DIALOGS.DIRECTION-LEFT MIDDLE p {
    padding-left: 12px;
    text-align: right;
}
.INDEX-03.CODE-20231211 DIALOGS.DIRECTION-RIGHT MIDDLE p {
    padding-right: 12px;
    text-align: left;
}

.INDEX-03.CODE-20231211 DIALOGS > p,
.INDEX-03.CODE-20231211 DIALOGS > p span {
    width: 100%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 15px;
    letter-spacing: 0;

    text-shadow: none;
}

.INDEX-03.CODE-20231211 DIALOGS > p {
    padding: 0 0 0 0;
}
.INDEX-03.CODE-20231211 DIALOGS > p span {
    padding-top: 0;
}

.INDEX-03.CODE-20231211 DIALOGS hr {
    border: 0;
    height: 1px;
    background: #ccc;
}

.INDEX-03.CODE-20231211 strong {
    width: auto;
    height: auto;

    font-size: 18px;
    font-weight: inherit;
}

.INDEX-03.CODE-20231211 .ADD-PADDING-TOP {
    padding-top: 24px;
    padding-bottom: 36px;
}



@media screen and (max-width: 991px) {
    DIVS FONTS, .FONTS-LARGE {
        font-size: 13vw;
        line-height: 15vw;
    }

    .INDEX-04 {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .INDEX-03,
    .INDEX-04 > div {
        padding-top: 69px;
    }

    .INDEX-03 {
        padding-bottom: 24px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .INDEX-03 h1 {
        font-size: 27px;
    }

    .INDEX-03 p {
        font-size: 18px;
    }
    .INDEX-03 span {
        font-size: 15px;
        padding-top: 24px;
    }

    .POSITION-SCROLL .INDEX-03 .RADIUS-ICONS PADDING {
        padding: 12px 6px;
    }

    .POSITION-SCROLL .INDEX-03 .RADIUS-ICONS a {
        width: 42px;
        height: 42px;
        border-radius: 42px;

        font-size: 18px;
    }

    /* === === === === === === *** *** *** === === === === === === */

    #HOT-NEWS {
        right: calc(calc(100vw - 360px) / 2);
    }
}

@media screen and (max-width: 360px) { 
    .SCROLL-Y {
        height: 100vh;
        max-height: calc(100vh - 24px);
    }

    .SCROLL-Y .FULL-SIZE {
        width: calc(
                   calc(100vw - 24px) * 6
               );

        height: 100vh;
        max-height: auto;
    }

    .SCROLL-Y .FULL-SIZE > div > div,
    .SCROLL-Y .FULL-SIZE iframe,
    .SCROLL-Y .FULL-SIZE blockquote {
        max-width: calc(100vw - 24px);
        max-height: calc(
                        calc(100vh - 24px) - 12px
                    );
    }
}



/* === === === === === === === === === === === === === === === === === === Block：08 === === === */

.VIDEO-BACKGROUND {
    background-color: white;
}

.VIDEO-BACKGROUND .HEIGHT {
    height: 100vh;
}
.VIDEO-BACKGROUND .HEIGHT > div {
    z-index: 1;
    position: relative;
}

.VIDEO-BACKGROUND .HEIGHT > div float {
    display: none;

    z-index: 1;
    position: relative;

    color: white;
}
.VIDEO-BACKGROUND .HEIGHT > div video {
    width: 100%;
    height: 100vh;

    animation-iteration-count: 0;
}

.VIDEO-BACKGROUND .HEIGHT > div middle {
    height: 100vh;

    padding-top: 93px;

    padding-left: 12px;
    padding-right: 12px;
}

.VIDEO-BACKGROUND .TITLES,
.VIDEO-BACKGROUND p {
    max-width: 360px;
}

.VIDEO-BACKGROUND .TITLES {
    font-size: 36px;
}
.VIDEO-BACKGROUND p {
    margin-bottom: 0;
    font-size: 18px;
}
.VIDEO-BACKGROUND span {
    font-size: 24px;
    font-weight: 600;
}

.POSITION-SCROLL .BUTTON-BLOCK {
    padding-top: 18px;
    padding-left: 6px;
}
.POSITION-SCROLL .BUTTON-BLOCK > BUTTONS {
    padding-right: 6px;
}
.POSITION-SCROLL .BUTTON-BLOCK > BUTTONS a.ICONS {
    width: 39px;
    height: 39px;
    border-radius: 39px;

    font-size: 18px;

    color: white;
    background-color: black;
}

@media screen and (max-width: 767px) {
    .obscure {
        display: none;
    }

    .VIDEO-BACKGROUND .HEIGHT > div float {
        display: block;
        text-shadow: 3px 9px 18px rgba(0, 0, 0, .35);
    }

    .VIDEO-BACKGROUND .TITLES {
        font-size: 27px;
    }
    .VIDEO-BACKGROUND p {
        font-size: 15px;
    }
    .VIDEO-BACKGROUND span {
        font-size: 18px;
    }

    .POSITION-SCROLL .BUTTON-BLOCK > BUTTONS a.ICONS {
        color: black;
        background-color: white;

        box-shadow: 3px 6px 9px rgba(0, 0, 0, .35);
    }
    .POSITION-SCROLL .BUTTON-BLOCK > BUTTONS a.ICONS:hover {
        color: white;
        background-color: #333;

        box-shadow: none;
    }
}

@media screen and (max-width: 320px) {
    .VIDEO-BACKGROUND .TITLES {
        font-size: 21px;
    }

    .VIDEO-BACKGROUND p {
        font-size: 12px;
    }

    .VIDEO-BACKGROUND span {
        font-size: 15px;
    }
}









/* === === === === === === === === === Body Black Background Style === === ===

.COLOR-BACKGROUND,
.COLOR-BACKGROUND.WIDTH2.TRANSPARENT,

.COVER-BACKGROUND .SUMMARY.WIDTH-VW,

.POSITION-BOTTOM .RELATIVES.BOTTOM-AUTO > div,

.RELATIVES.MARGIN-51,

LOGO.WHITE-BLOCK,
LOGO.LARGE-TXT-BLOCK {
    color: white;
    background-color: black;
}

.COVER-BACKGROUND .SUMMARY.WIDTH-VW a {
    color: white;
}

FONTS.WEBKIT {
    background-image: url(official/background.jpg);
}

.BG-STYLE a,
.S-BORDER a {
    border-bottom: 2px solid white;
}
.BG-STYLE a:hover,
.S-BORDER a:hover {
    border: 1px solid white;
    border-bottom: 1px solid white;
}

=== === === === === === === === === */