@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

@font-face {
    font-family: 'MYuenHK';
    src: url('../fonts/MYuenHK-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MYuenHK';
    src: url('../fonts/MYuenHK-Xbold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-brand: #003070;
    --color-violet: #5E366F;
    --color-violet-light: #AE95B9;
    --color-gold: #F4D2AF;
    --color-red: #C76C72;
    --color-black: #535353;
}

::selection {
    /* color: var(--color-violet); */
    /* background: var(--color-sky); */
}
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
*::-webkit-scrollbar-track {
    background: var(--color-violet-light);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--color-violet);
    border: 0
}

html {
    scroll-padding-top: 80px;
}
body {
    font-family: 'Noto Sans TC', sans-serif;
    background: linear-gradient(
        to bottom, 
        #b6a8d0 20%, 
        #eedeed 40%, 
        #cabbda 60%, 
        #decfe5 80%, 
        #f2e2ef 100%
    );
}
button {
    box-shadow: none !important;
}
a, a:hover {
    text-decoration: none;
    outline: none;
}
sup {
    position: relative;
    font-size: 50%;
    line-height: 0;
    vertical-align: super;
    top: 0;
}
sub {
    position: relative;
    font-size: 50%;
    line-height: 0;
    vertical-align: baseline;
}
.text-white {
    color: white;
}
.spacer {
    width: 100%;
    height: 50vmin;
}
.spacer.small {
    width: 100%;
    height: min(5vmin, 50px);
}
.nowrap {
    white-space: nowrap;
}
.small {
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0;
}


/*******************************
  Menu
*******************************/
header {
    position: relative;
    z-index: 59;
    width: 100%;
}
/* Normal */
#main-nav {
    padding: 0;
}
#main-nav > .wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    background: var(--color-brand);
    /* border-radius: 0 0 min(2vw, 20px) min(2vw, 20px); */
    /* padding: 15px 15px 15px 30px; */
    padding: 5px 15px 5px 30px;
    transition: 0.3s ease all;
}
#main-nav > .wrapper .logos {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 80%;
}
#main-nav > .wrapper .logos .logo1 {
    position: relative;
}
#main-nav > .wrapper .logos .logo1 img {
    width: 210px;
}
#main-nav > .wrapper .logos .logo2 img {
    width: 264px;
}
#main-nav li.nav-item {
    align-items: center;
    border-right: 1px solid white;
    padding: 0 10px;
}
#main-nav li.nav-item:last-child {
    border-right: 0;
}
#main-nav li.nav-item a {
    color: white;
    /* font-weight: 600; */
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 100%;
    letter-spacing: 0.1rem;
    text-align: center;
}
#main-nav .navbar-toggler {
    border: none;
}
#main-nav .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z'/%3E%3C/svg%3E");
}
#main-nav .offcanvas {
    width: 430px;
    padding: 15px;
    background-color: var(--color-violet);
}
/* Sticky */
#main-nav > .wrapper.sticky {
    /* padding: 10px 15px 10px 30px; */
}
/* #main-nav > .wrapper.sticky .logos {
    gap: 40px;
}
#main-nav > .wrapper.sticky .logos .logo1 {
    display: block;
}
#main-nav > .wrapper.sticky .logos .logo1:after {
    display: none;
}
#main-nav > .wrapper.sticky .logos .logo1 img {
    display: inline;
    max-width: 230px;
    width: 100%;
}
#main-nav > .wrapper.sticky .logos .logo2 img {
    max-width: 160px;
    width: 100%;
} */
/* Bootstrap dropdown nav */
#main-nav .dropdown-menu {
    border: none;
    /* border-radius: 0 0 10px 10px; */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
    background-color: white;
    min-width: 100% !important;
    left: 50%;
    transform: translateX(-50%);
}
#main-nav li.nav-item .dropdown-menu a {
    color: var(--color-violet);
    background-color: transparent;
    padding: 5px 20px !important;
}
#main-nav .dropdown-menu[data-bs-popper] {
    margin-left: 0;
}
#main-nav .dropdown-menu.dropend.show {
    animation: 0.5s fadeIn ease both;
}
#main-nav .dropdown-submenu {
    position: relative;
}
#main-nav .dropdown-submenu a {
    padding: 4px 16px;
}
#main-nav .dropdown-toggle {
    padding-right: 30px;
}
#main-nav .dropdown-toggle:after {
    display: none;
    content: "\f107";
    font-family: "FontAwesome";
    position: absolute;
    border: none;
    right: 10px;
    line-height: 0;
    transform: translateY(3px);
}
#main-nav .dropdown-toggle.show:after {
    content: "\f106";
}
/*
@media (hover: hover) {
    #main-nav .dropdown:hover>.dropdown-menu {
        display: block;
    }
    #main-nav li.dropdown-submenu:hover>.dropdown-menu {
        display: block;
        top: 0;
        left: 100%;
    }
    #main-nav .dropdown>.dropdown-toggle:active {
        pointer-events: none;
    }
    #main-nav .dropdown-submenu .dropdown-toggle:after {
        content: "\f105";
    font-family: "FontAwesome";
    }
}
@media (hover: none) {
    #main-nav .dropdown-menu {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #main-nav .dropdown-menu .dropdown-menu {
        padding: 0;
        box-shadow: none;
    }
} */



/*******************************
  Fixing
*******************************/
/* Custom swiper icon */
.swiper-button-prev:after {
    content: "\f104";
    font-family: "FontAwesome";
}
.swiper-button-next:after {
    content: "\f105";
    font-family: "FontAwesome";
}



/*******************************
  Main
*******************************/
main {
    /* font-family: 'MYuenHK', 'Noto Sans TC', sans-serif; */
    font-family: 'Noto Sans TC';
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.075rem;
}
main p {
    margin: 1rem 0;;
}
main img {
    max-width: 100%;
}
main section {
    font-size: 1.5rem;
    color: var(--color-violet);
    text-align: center;
    overflow: hidden;
}
main #home section {
    line-height: 38px;
    font-weight: 500;
    font-size: 1.56rem;
}
main h2 {
    font-size: 2.8rem;
    font-weight: bold;
}
main h2.header {
    display: inline-block;
    position: relative;
    padding: 0 1rem;
}
main h2.header:before {
    content: "";
    width: 120px;
    height: 2px;
    position: absolute;
    left: -120px;
    top: calc(50% - 1px);
    background: linear-gradient(90deg, rgba(218, 193, 120, 0) 0%, rgba(218, 193, 120, 1) 38%);
}
main h2.header:after {
    content: "";
    width: 120px;
    height: 2px;
    position: absolute;
    right: -120px;
    top: calc(50% - 1px);
    background: linear-gradient(90deg, rgba(218, 193, 120, 1) 62%, rgba(218, 193, 120, 0) 100%);
}
main h3 {
    font-size: 2.1rem;
    font-weight: 700;
}
main .btn {
    color: var(--color-violet);
    border-radius: 50px;
    width: auto;
    min-width: 150px;
    max-width: 100%;
    padding: 4px 16px;
    transition: 0.25s ease all;
    font-size: 1.5rem;
    position: relative;
    background-size: cover;
    background-position: left 5% center;
    background-repeat: no-repeat;
    background-image: url('../images/btn_bg_pattern.png');
}
main .btn:hover {
    background-position: right 5% center;
}
main .text-shadow {
    filter: drop-shadow(1px 1px 1px black);
}
main .box-shadow {
    box-shadow: 30px 30px 0 0 var(--color-gold);
}

main section.remarks .col-12 {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 10px;
    text-align: left;
    letter-spacing: 0;
}
main section.remarks span.signs {
    display: inline-block;
    min-width: 16px;
}
main section.remarks .remark-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: #5E366F;
    gap: 0 10px;
}
main section.remarks .remark-list > div {
    display: flex;
}

main section .video-container {
    border-radius: min(50px, 6vw);
    overflow: hidden;
    border: 5px solid rgba(111, 64, 131, 0.5);
}
main section .video-container .plyr {
    --plyr-color-main: var(--color-violet-light);
}
main section .video-container .plyr > button {
    --plyr-control-icon-size: 50px;
    --plyr-control-spacing: 15px;
    background: white;
}
main section .video-container .plyr > button svg {
    fill: #545454;
}
main section .video-container .plyr > button:hover svg {
    fill: white;
}

/* Popup message */
main #popupMsg .modal-content {
    position: relative;
    color: white;
    background: transparent;
    border: 0;
    /* overflow: hidden; */
    padding: 0;
}
main #popupMsg .modal-content:before {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;    
    z-index: 1;
    left: -8px;
    top: 16%;
    border-radius: 30px;
    background-color: var(--color-violet);
}
main #popupMsg .modal-content:after {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;    
    z-index: 1;
    right: -8px;
    bottom: 25%;
    border-radius: 30px;
    background-color: var(--color-violet);
}
main #popupMsg .modal-content .modal-body {
    color: var(--color-violet);
    background:  white;
    padding: 15px 30px 15px 30px;
    
    border-radius: 45px;
    border: 2px solid var(--color-violet);
}
main #popupMsg .modal-content .btn-close {
    position: absolute;
    width: 13px;
    height: 13px;
    top: 25px;
    right: 25px;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.962' height='22.962' viewBox='0 0 22.962 22.962'%3E%3Cg id='Group_2023' data-name='Group 2023' transform='translate(-1005.749 -1158.98)'%3E%3Cpath id='Path_8606' data-name='Path 8606' d='M0,0V22.472' transform='translate(1025.176 1162.515) rotate(45)' fill='none' stroke='%235e366f' stroke-linecap='round' stroke-width='5'/%3E%3Cpath id='Path_8607' data-name='Path 8607' d='M0,22.472V0' transform='translate(1025.176 1178.406) rotate(135)' fill='none' stroke='%235e366f' stroke-linecap='round' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E%0A");
    opacity: 1;
}
main #popupMsg .modal-content .title {
    /* font-size: 1.5rem; */
    margin: 15px 0;
}

main .golden-heading {
    position: relative;
}
main .golden-heading:before {
    content: "";
    width: 100%;
    height: 3px;
    position: absolute;
    z-index: -1;
    top: 40%;
    left: 0;
    background: linear-gradient(90deg, #F2DB8D 0%, #E5BE45 22.2%, #E3BE49 46.3%, #E5C764 72.4%, #F2D988 100%);
}
main .golden-heading h3 {
    font-weight: 300;
    padding: 10px 50px 20px;
    display: inline-flex;
    margin: 0;
    background: linear-gradient(90deg, #F2DB8D 0%, #E5BE45 22.2%, #E3BE49 46.3%, #E5C764 72.4%, #F2D988 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
}


/* Default content box */
main .content-box {
    --content-rounded: 60px;
    position: relative;
    background-color: white;
    border-radius: 0 60px 60px 60px;
}
main .content-box:after {
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-violet);
    border-radius: 0 var(--content-rounded) var(--content-rounded) var(--content-rounded);
    z-index: -1;
    position: absolute;
    top: 10px;
    left: 10px; 
}
main .content-box .title {
    display: inline-flex;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-50%);
    font-weight: 300;
    clip-path: inset(0% 0% -10px 0%);
}
main .content-box .title h3 {
    display: inline-block;
    font-weight: 300;
    line-height: 1;
    background-color: var(--color-violet);
    color: white;
    padding: 15px 30px 10px 20px;
    margin: 0;
    text-align: left;
    border-radius: 0 var(--content-rounded) var(--content-rounded) 0;
    transform: translateX(-100%);
    transition: 0.6s ease transform;
}
main .content-box .title:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 0 var(--content-rounded) var(--content-rounded) 0;
    z-index: -1;
    position: absolute;
    top: 8px;
    left: 0; 
    background: linear-gradient(90deg, #F2DB8D 0%, #E5BE45 22.2%, #E3BE49 46.3%, #E5C764 72.4%, #F2D988 100%);
    transform: translateX(-100%);
    transition: 0.6s ease transform;
}
main .content-box.aos-animate .title h3 {
    transform: translateX(0%);
}
main .content-box.aos-animate .title:after {
    transform: translateX(0%);
}
main .content-box .content {
    padding: 5% 4% 5% 6%;
    padding-top: max(10%, 70px);
}
main .content-box .content:before {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;    
    z-index: 1;
    left: 3px;
    top: 16%;
    border-radius: 30px;
    background-color: var(--color-violet);
}
main .content-box .content:after {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;    
    z-index: 1;
    right: -17px;
    bottom: 25%;
    border-radius: 30px;
    background-color: var(--color-violet);
}
main .content-box .content p {
    margin: 0;
}
@media only screen and (max-width: 991.98px) {
    main .content-box .content p {
        font-size: 2.8vw;
    }
}

/*************** Home ***************/
main #home {
    /* background: linear-gradient(to bottom, #b6a8d0 15%, #eedeed 20%, #cabbda 40%, #EFDFED 60%,#decfe5 80%, #f2e2ef 100%); */
    /* background-image: url('../images/home/e886fa443f9484055ddd18d4c89168e9e3104d79 (1).jpg'); */
    background-repeat: no-repeat;
    background-size: cover;
}
main #home .section-01 {
    position: relative;
    /* background-image: url('../images/home/bg-pattern-01.png'); */
    /* background-position: top -25vw right -20vw;
    background-size: 90vw auto;
    background-repeat: no-repeat; */
}
main #home .section-03 {
    position: relative;
    z-index: 1;
}
main #home .section-03 .split-area {
    position: relative;
    z-index: 0;
}
main #home .section-03 .split-scroll-wrapper {
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
    gap: 0;
    position: relative;
    z-index: 0;
}

main #home .section-03 .split-scroll-wrapper .panel-right img {
    width: 100%;
    height: 500px;
    aspect-ratio: 1 / 1.036;
    object-fit: cover;
    object-position: center top;
    display: block;
    margin: 0;
    padding: 0;
}
main #home .section-03 .split-scroll-wrapper .panel {
    position: relative;
    margin: 0;
    padding: 0;
}
main #home .section-03 .split-scroll-wrapper .panel.panel-left {
    background-color: var(--color-violet);
    height: 500px;
    width: 100%;
    border-radius: 50px 0 0 50px;
    overflow: hidden;
}
main #home .section-03 .split-scroll-wrapper .panel.panel-right {
    height: 500px;
    width: 100%;
    overflow: hidden;
}
main #home .section-03 .split-scroll-wrapper .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 50px 0 0 50px;
    height: 500px;
    aspect-ratio: 3.2 / 5;
}
main #home .section-03 .split-scroll-wrapper .slide {
    position: relative;
    width: 100%;
    height: 500px;
    aspect-ratio: 3.2 / 5;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
main #home .section-03 .split-scroll-wrapper .slide img {
    border-radius: 0 50px 50px 0;
    display: block;
    margin: 0;
    padding: 0;
}
main #home .section-03 .split-scroll-wrapper .content .desc {
    font-size: min(3vw, 20px);
    text-align: left;
}
main #home .section-03 .split-scroll-wrapper .content .desc:before {
    content: "";
    display: block;
    width: 120px;
    height: 2px;
    margin-bottom: 30px;
    background: white;
}
main #home .section-03 .mobile-split-wrapper {
    border-radius: min(50px, 6vw);
    margin-bottom: 70px;
    overflow: hidden;
    color: white;
    background: linear-gradient(
        to right,
        rgba(78, 33, 86, 1),
        rgba(122, 51, 121, 1)
      );
    border-radius: 50px; 
    border: 1px solid rgba(228, 183, 97, 1); 
    margin-bottom: 0;
    font-size: 3vw;
    line-height: 2;
}
main #home .section-03 .mobile-split-wrapper .panel-top img {
    object-fit: cover;
}
main #home .section-03 .mobile-split-wrapper .content .desc {
    /* font-size: 16px; */
    padding: 0 30px;
    text-align: left;
}
main #home .section-03 .mobile-split-wrapper .content .desc:before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-bottom: 20px;
    background: white;
}
main #home .section-03 .mobile-split-wrapper .content:first-child .desc:before {
    display: none;
}
main #home .section-04 {
    position: relative;
    background-image: linear-gradient(180deg, rgba(239, 223, 237, 0) 0%, #FAEFF8 30%, #FAEFF8 70%, rgba(239, 223, 237, 0) 100%);
}
main #home .section-04 .desktop-balls .animated-balls {
    position: relative;
    height: 450px;
}
main #home .section-04 .desktop-balls .animated-balls div img {
    transform: translateX(-50%);
}
main #home .section-04 .desktop-balls .animated-balls div:nth-child(1) {
    position: absolute;
    left: 40%;
    top: 275px;
}
main #home .section-04 .desktop-balls .animated-balls div:nth-child(2) {
    position: absolute;
    left: 55%;
    top: 320px;
}   
main #home .section-04 .desktop-balls .animated-balls div:nth-child(3) {
    position: absolute;
    left: 50%;
    top: 0;
}
main #home .section-04 .desktop-balls .animated-balls div:nth-child(4) {
    position: absolute;
    left: 31%;
    top: 50px;
}
main #home .section-04 .desktop-balls .animated-balls div:nth-child(5) {
    position: absolute;
    left: 67%;
    top: 80px;
}
main #home .section-04 .desktop-balls .animated-text {
    font-size: 20px;
    text-align: left;
    position: relative;
    top: -60px;
    margin-bottom: -130px;
    visibility: hidden;
    opacity: 0;
}
main #home .section-04 .mobile-balls .two-balls {
    position: relative;
}
main #home .section-04 .mobile-balls .two-balls img:nth-child(1) {
    position: relative;
    left: 50px;
}
main #home .section-04 .mobile-balls .two-balls img:nth-child(2) {
    position: absolute;
    left: 50%;
    transform: translate(-120px, 30px);
}
main #home .section-05 {
    position: relative;
}
main #home .section-05 .text-start {
    transform: translateX(-30%);
    transition: 0.75s ease-out transform 0.25s;
}
main #home .section-05 .text-end {
    transform: translateX(30%);
    transition: 0.75s ease-out transform 0.25s;
}
main #home .section-05 .aos-animate .text-start {
    transform: translateX(0%);
}
main #home .section-05 .aos-animate .text-end {
    transform: translateX(0%);
}
main #home .section-06 {
    display: grid;
    position: relative;
    /* background-image: linear-gradient(184deg, rgba(192,180,213,1) 0%, rgba(233,222,235,1) 35%, rgba(242,235,242,0) 100%); */
    background-position: top 0 right 0;
    background-size: cover;
    background-repeat: no-repeat;
}

main #home .section-06>div {
    /* background-image: url('../images/home/bg-pattern-04.png'); */
    background-position: top 0 left -4vw;
    background-size: 28vw auto;
    background-repeat: no-repeat;
}

main .product-showcase .product-shots {
    background-image: url('../images/home/product-shot-bg.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 50px;
}

main .product-showcase .product-shots img {
    width: auto;
}

@media only screen and (min-width: 768px) {
    main #home .product-showcase .product-shots {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 991.98px) {
    main #home .section-02 .split-scroll-wrapper .content .desc {
        margin: 0;
        padding: 5px 10px;
    }

    main #home .section-02 .split-scroll-wrapper .content .desc:before {
        margin-bottom: 10px;
    }

    main #home .product-showcase .product-shots {
        background-position: top center;
        background-size: 300px auto;
    }

    main #home .product-showcase .product-shots img {
        width: 180px;
    }
}

/*************** PHP ***************/
main #php {
    background-image: url(../images/php/bg-pattern-01.png), url(../images/php/bg-pattern-02.png), url(../images/php/bg-pattern-03.png), url(../images/php/bg-pattern-04.png), url(../images/php/bg-pattern-05.png);
    background-repeat: no-repeat;
    background-position: top 18% left 0, right -15% top 32%, left 2% top 60%, right 2% top 80%, left -15% bottom 3%;
    background-size: 20% auto, 30% auto, 20% auto, 15% auto, 25% auto;
}
main #php .section-02 .content-box {
    background-image: url(../images/php/chart-01-bg.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 33% auto;
}
main #php .section-02 .content-box .content {
    padding: 5% 8% 5% 12%;
    padding-top: max(10%, 70px);
}
main #php .section-02 .content-box .content:before {
    top: 25%;
}
main #php .section-02 .content-box .content:after {
    bottom: 25%;
}
main #php .section-02 .content-box .content svg {
    width: 100%;
}
main #php .section-02 .content-box .content svg #horizontal-golden-bar {
    transform: translateX(-50%);
    transition: 1.5s ease transform 0.2s;
}
main #php .section-02 .content-box.aos-animate .content svg #horizontal-golden-bar {
    transform: translateX(0);
}
main #php .section-03 .content-box .content svg {
    width: 100%;
}
main #php .section-03 .content-box .content svg #golden-tooltip {
    opacity: 0;
    transform: translateY(10%);
    transition: 1s ease transform 0.2s;
}
main #php .section-03 .content-box.aos-animate .content svg #golden-tooltip {
    opacity: 1;
    transform: translateX(0);
}
main #php .section-03 .content-box {
    background-image: url(../images/php/chart-02-bg.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: cover;
}
main #php .section-03 .content-box .content {
    padding: 5% 8% 5% 12%;
    padding-top: max(10%, 70px);
}
main #php .section-03 .content-box .content:before {
    top: 75%;
}
main #php .section-03 .content-box .content:after {
    bottom: 75%;
}
main #php .section-04 .content-box {

}
main #php .section-04 .content-box .content {
    /* padding: 5% 8% 5% 12%;
    padding-top: max(10%, 70px); */
}
main #php .section-04 .content-box .content:before {
    top: 70%;
}
main #php .section-04 .content-box .content:after {
    top: 30%;
}
@media only screen and (max-width: 991.98px) {
    main #php .section-02 .content-box .content {
        padding: 5% 5% 5% 9%;
        padding-top: max(10%, 70px);
    }
    main #php .section-03 .content-box .content {
        padding: 5% 5% 5% 9%;
        padding-top: max(10%, 70px);
    }
    main #php .section-04 .content-box .content p {
        font-size: inherit;
    }
}

/*************** LGG ***************/
main #lgg {
    background-image: url(../images/lgg/bg-pattern-01.png), url(../images/lgg/bg-pattern-02.png), url(../images/lgg/bg-pattern-03.png), url(../images/lgg/bg-pattern-04.png);
    background-repeat: no-repeat;
    background-position: top 18% left -18%, top 40% right 10%, left -15% top 57%, right 10% top 80%;
    background-size: 30% auto, 15% auto, 30% auto, 25% auto;
}
main #lgg .section-02 .content-box {
    background-image: linear-gradient(90deg, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 70%), url(../images/lgg/chart-01-bg.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100%;
}
main #lgg .section-02 .content-box .content {
    max-width: 55%;
}
main #lgg .section-02 .content-box .content:before {
    top: 65%;
}
main #lgg .section-02 .content-box .content:after {
    bottom: 65%;
}
main #lgg .section-03 .content-box .content {
    padding: 5% 10% 5% 10%;
    padding-top: max(10%, 70px);
}
main #lgg .section-03 .content-box .content:before {
    top: 35%;
}
main #lgg .section-03 .content-box .content:after {
    bottom: 35%;
}
main #lgg .section-03 .content-box .content svg {
    width: 100%;
    height: auto;
}
main #lgg .section-03 .content-box .content svg #golden_bar {
    transform: translateX(-120px);
    transition: 1.5s ease transform 0.2s;
}
main #lgg .section-03 .content-box.aos-animate .content svg #golden_bar {
    transform: translateX(0);
}
main #lgg .section-04 .content-box {
    background-image: linear-gradient(180deg, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 70%), url(../images/lgg/chart-03-bg.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 30% auto;
}
main #lgg .section-04 .content-box .content:before {
    top: 65%;
}
main #lgg .section-04 .content-box .content:after {
    bottom: 65%;
}
main #lgg .section-04 .content-box .content img {
    padding-left: 15%;
}
main #lgg .section-04 .content-box .content img {
    padding-left: 15%;
}
@media only screen and (max-width: 767.98px) {
    main #lgg .section-03 .content-box .content {
        padding: 5% 4% 5% 6%;
        padding-top: max(10%, 70px);
    }
}

/*************** HMO ***************/
main #hmo {
    background-image: url(../images/hmo/bg-pattern-01.png), url(../images/hmo/bg-pattern-02.png);
    background-repeat: no-repeat;
    background-position: top 55% right -15%, top 80% left -15%;
    background-size: 30% auto, 30% auto;
}
main #hmo .content-box .content .icon-ball {
    position: absolute;
    left: 0;
    top: 10%;
    width: min(200px, 20vh);
    transform: translateX(-80%);
}
main #hmo .section-01 {
    background-image: linear-gradient(180deg, #FAEFF8 0%, #FAEFF8 50%, rgba(239, 223, 237, 0) 100%);
}
main #hmo .section-02 .content-box {
    background-image: linear-gradient(90deg, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 70%), url(../images/hmo/chart-01-bg.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100%;
}
main #hmo .section-02 .content-box .content {
    max-width: 55%;
}
main #hmo .section-02 .content-box .content:before {
    top: 75%;
}
main #hmo .section-02 .content-box .content:after {
    bottom: 75%;
}
main #hmo .section-02 .content-box .content svg {
    width: 100%;
    height: auto;
}
main #hmo .section-02 .content-box .content svg #gold_bar {
    transform: translateY(30px);
    transition: 1.5s ease transform 0.2s;
}
main #hmo .section-02 .content-box.aos-animate .content svg #gold_bar {
    transform: translateY(0);
}
main #hmo .section-03 .content-box .content {
    padding: 5% 10% 5% 10%;
    padding-top: max(10%, 70px);
}
main #hmo .section-04 .content-box {
    background-image: linear-gradient(90deg, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 70%), url(../images/hmo/chart-03-bg.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100%;
}
main #hmo .section-04 .content-box .content {
    max-width: 55%;
}
main #hmo .section-04 .content-box .content:before {
    top: 75%;
}
main #hmo .section-04 .content-box .content:after {
    bottom: 75%;
}
main #hmo .section-04 .content-box .content svg {
    width: 100%;
    height: auto;
}
main #hmo .section-04 .content-box .content svg #golden_bar_01 {
    transform: translateY(60px);
    transition: 1.5s ease transform 0.2s;
}
main #hmo .section-04 .content-box .content svg #golden_bar_02 {
    transform: translateY(150px);
    transition: 1.5s ease transform 0.2s;
}
main #hmo .section-04 .content-box.aos-animate .content svg #golden_bar_01 {
    transform: translateY(0);
}
main #hmo .section-04 .content-box.aos-animate .content svg #golden_bar_02 {
    transform: translateY(0);
}
@media only screen and (max-width: 991.98px) {
    main #hmo .content-box {
        transform: scale(0.83) translateX(8%);
    }
    main #hmo .content-box .content .icon-ball {
        width: 120px;
    }
}
@media only screen and (max-width: 767.98px) {
    main #hmo .section-03 .content-box .content {
        padding: 5% 4% 5% 6%;
        padding-top: max(10%, 70px);
    }
}

/*************** Products ***************/
main #products {
    background-image: url(../images/products/bg-pattern-01.png), url(../images/products/bg-pattern-02.png), url(../images/products/bg-pattern-03.png);
    background-repeat: no-repeat;
    background-position: top 18% left -15%, top 40% right -5%, top 70% left -15%;
    background-size: 30% auto, 20% auto, 30% auto;
}
main #products .section-03 {
    background-image: url(../images/products/bg-promise.png), linear-gradient(10deg, #ECDCE9 20%, #CBBCD9 100%);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 100%;
}
@media only screen and (max-width: 767.98px) {
    main #products .section-03 {
        background-position: left -200px top, left top;
    }
    main #products .section-03 h2 {
        font-size: 18px;
    }
    main #products .section-03 p {
        font-size: 14px;
    }
}

/*************** Products Formula ***************/
main #products-formula {
    background-image: url(../images/products-formula/bg-pattern-01.png), url(../images/products-formula/bg-pattern-02.png), url(../images/products-formula/bg-pattern-03.png);
    background-repeat: no-repeat;
    background-position: top 33% left -15%, top 60% right -5%, top 90% left -15%;
    background-size: 30% auto, 20% auto, 30% auto;
}
main #products-formula .section-01 .tab-buttons-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
}
main #products-formula .section-01 .tab-buttons-wrapper button {
    font-size: 22px;
      font-weight: 600;
      color: white;
      padding: 8px 12px;
      border-radius: 24px;
      border: 2px solid transparent;
      background: var(--color-violet);
      opacity: 0.2;
}
main #products-formula .section-01 .tab-buttons-wrapper button.active {
    opacity: 1;
      background:
          linear-gradient(var(--color-violet), var(--color-violet)) padding-box,
          linear-gradient(
              90deg,
              #E3B55D 9.73%,
              #FFF2C4 29.87%,
              #FFF2C4 50%,
              #F5DC9F 60.07%,
              #EDCB82 70.13%,
              #E7BE6D 80.2%,
              #E4B761 90.27%,
              #E3B55D 100.33%
          ) border-box;
}
main #products-formula .section-01 [data-product-serial] .col-lg-4 img {
    padding-right: 8%;
}
@media only screen and (max-width: 767.98px) {
    main #products-formula .section-01 .tab-buttons-wrapper button {
        font-size: 14px;
        border-radius: 16px;
    }
    main #products-formula .section-01 p {
        font-size: 1.1rem;
    }
}



/*************** References and Notes ***************/
main #references-and-notes {
    /* background-image:  url(../images/hmo/bg-pattern-01.png), url(../images/hmo/bg-pattern-02.png), linear-gradient(180deg, #B6A8D0 0%, #EEDEED 30%); */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/home/e886fa443f9484055ddd18d4c89168e9e3104d79.jpg);
}
main #references-and-notes .container {
    margin-top: min(15vw, 190px);
    margin-bottom: 60px;
    min-height: min(61vh, 100vw);
}
main #references-and-notes .references {
    font-family: 'Noto Sans TC', sans-serif;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0 10px;
    font-size: 12px;
    text-align: left;
    letter-spacing: 0;
    color: var(--color-black);
}
main #references-and-notes .references > div {
    font-size: 12px;
    line-height: 1.5;
}
main #references-and-notes .references span.signs {
    display: inline-block;
    min-width: 16px;
}



/*******************************
  Footer
*******************************/
footer {
    color: white;
    background: var(--color-brand);
    padding: 30px 0 20px;
    font-weight: 300;
    letter-spacing: 0.075rem;
}
footer .sitemap .parent {
    font-size: 16px;
}
footer .sitemap {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    font-size: 14px;
}
footer .sitemap a {
    color: white;
    text-decoration: none;
}
footer .sitemap .submenu {
    width: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
	text-align: center;
}
footer .sitemap .submenu ul {
    list-style: none;
    padding: 3px 0;
    margin: 0;
}
footer .access {
    font-size: 13px;
}
footer .access a {
    color: white;
    text-decoration: none;
}
footer .social-icons {
    display: inline-flex;
    gap: 15px;
}
footer .copyright {
    font-size: 13px;
    letter-spacing: 0.02rem;
}
footer .sitemap .menu .px-3 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}
footer .container .row.mt-3{
    align-items: flex-end;
}
footer .sitemap .menu .ipad-space {
    display: none;
}
footer .sitemap .menu .pc-show {
    display: inline-block;
}
footer .sitemap .menu .pc-hide {
    display: none;
}
@media only screen and (max-width: 1199.98px) {
    footer {
        padding: 20px 0 20px;
    }
    footer .sitemap .parent {
        font-size: 16px;
    }
    footer .sitemap {
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        font-size: 13px;
        align-items: center;
    }
    footer .sitemap .menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    footer .sitemap .menu .px-3 {
        display: none;
    }
    footer .sitemap .submenu {
        align-items: center;
    }
    footer .sitemap .menu .ipad-space {
        display: block;
        margin-bottom: 5px;
    }
    footer .sitemap .menu .pc-show {
        display: none;
    }
    footer .sitemap .menu .pc-hide {
        display: block;
    }
    footer .access {
        text-align: center;
    }
    footer .sitemap img {
        width: 180px;
    }
    footer .social-icons {
        justify-content: center;
        width: 100%;
    }
    footer .copyright {
        font-size: 12px;
        text-align: center;
    }
    footer .container .row.mt-3 .social-icons{
        margin-bottom: 15px;
    }
}
/* Floating CTA */
.floating-box {
    position: fixed;
    right: 0;
    bottom: 30%;
    z-index: 1;
    background: transparent;
    width: 160px;
    transition: 0.5s ease-in-out all;
    display: block;
    transform: translateX(100%);
    pointer-events: none;
}
.floating-box.show {
    transform: translateX(0);
}
.floating-box .image {
    position: relative;
    overflow: hidden;
    /* border-radius: 35px 0 0 35px; */
}
.floating-box .image a {
    display: block;
    pointer-events: auto;
}
.floating-box .image img {
    width: 100%;
}
.floating-box div.btn-hide {
    text-align: right;
    padding: 5px;
}





/********** Desktop Only **********/
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1200px;   /* Change the maximum content width here */
    }
}


/********** XXXL Desktop **********/
@media only screen and (max-width: 1599.98px) {
    /* #main-nav > .wrapper.sticky .logos .logo1 {
        display: none;
    } */
}

/********** XXL Desktop **********/
@media only screen and (max-width: 1399.98px) {
    #main-nav > .wrapper {
        flex-direction: row;
        padding: 15px 15px;
    }
    #main-nav > .wrapper.sticky {
        flex-direction: row;
        padding: 15px 15px;
    }
    #main-nav > .wrapper .logos {
        /* left: 50%;
        position: relative;
        transform: translateX(-50%); */
    } 
    /* #main-nav > .wrapper .logos .logo1 {
        display: inline;
        max-width: 228px;
        width: 100%;
    } */
    #main-nav > .wrapper .logos .logo1 {
        /* display: none; */
        width: 44%;
    }
    #main-nav > .wrapper .logos .logo1 img{
        width: 100%;
        height: auto;
        max-width: 180px;
    }
    #main-nav > .wrapper .logos .logo2{
        width: 56%;
    }
    #main-nav > .wrapper .logos .logo2 img {
        max-width: 220px;
        width: 100%;
    }
    #main-nav li.nav-item {
        display: inline-block;
    }
    #main-nav .dropdown-menu {
        left: 0;
        transform: none;
    }
    #main-nav .dropdown-toggle:after {
        display: block;
        transform: translateY(-2px);
    }
    #main-nav .offcanvas li.nav-item {
        border-right: 0;
    }
    #main-nav .offcanvas li.nav-item a {
        font-size: 1.5rem;
        padding: 0.75rem 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        width: 100%;
    }
    #main-nav .offcanvas ul > li:last-child a {
        border-bottom: none;
    }
    #main-nav .offcanvas .offcanvas-header .btn-close {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff'%0AviewBox='0 0 24 24'%3E%3Cpath d='M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z'/%3E%3C/svg%3E");
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        opacity: 1;
    }
}

/********** Large Desktop **********/
@media only screen and (max-width: 1199.98px) {

}

/********** Desktop **********/
@media only screen and (max-width: 991.98px) {
    /* #main-nav > .wrapper .logos .logo1 {
        display: none;
    } */
    header {
        width: 100%;
        left: 0;
    }
    #main-nav > .wrapper {
        border-radius: 0;
    }
    /* main {
        padding-top: 68px;
    } */
    main section {
        font-size: 1.2rem;
    }
    main #home section {
        font-size: 1.2rem;
    }
    main h2 {
        font-size: 1.8rem;
    }
    main h2.header {
        padding: 0 0.5rem;
        max-width: 90%;
    }
    main h2.header:before {
        width: 50px;
        left: -50px;
    }
    main h2.header:after {
        width: 50px;
        right: -50px;
    }
    main h3 {
        font-size: 1.7rem;
    }
}

/********** Tablet **********/
@media only screen and (max-width: 767.98px) {
    .floating-box {
        bottom: 15%;
        width: 100px;
    }
    #main-nav > .wrapper .logos .logo1 {
        /* display: none; */
        width: 44%;
    }
    #main-nav > .wrapper .logos .logo1 img{
        width: 100%;
        height: auto;
        max-width: 210px;
    }
    #main-nav > .wrapper .logos .logo2{
        width: 56%;
    }
    #main-nav > .wrapper .logos .logo2 img {
        /* max-width: 210px; */
        width: 100%;
    }
}

/********** Mobile **********/
@media only screen and (max-width: 479.98px) {

}

.information {
    background: url('../images/products/background.jpg') no-repeat center top;
    background-size: cover;
    /* padding: 0 70px; */
}

.method {
    background: url('../images/products/method-background.jpg') no-repeat center top;
    background-size: cover;
}

.background {
    background: url('../images/products/background.jpg') no-repeat center top;
    background-size: cover;
}

main #products .section-01 .feature-icon {
    width: 152px;
    height: 152px;
    object-fit: contain;
    display: block;
}

@media only screen and (max-width: 767.98px) {
    main #products .section-01 .feature-icon {
        width: 113px;
        height: 113px;
    }
}

main #products .section-01 .feature-desc ul {
    margin-bottom: 0;
}

main #products .section-01 .feature-desc {
    margin-top: 10px !important;
}

@media only screen and (min-width: 768px) {
    main #products .section-01 .feature-desc {
        margin-top: 15px !important;
    }
}

main #products .product-showcase .product-shots {
    background-image: url('');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 50px;
}

main #products .buy-btn {
    display: inline-block;
    background-image: none;
    background:
        linear-gradient(90deg, #B6A0CC 0%, #7E4A80 100%) padding-box,
        linear-gradient(90deg, #D1AE5C -0.53%, #D0AC58 9.57%, #D0AC58 19.67%, #E3C886 29.77%, #DFC37E 39.87%, #D0AC58 49.97%, #E3C886 70.17%, #EBD499 80.27%, #D0AC58 90.37%, #D0AC58 100.47%) border-box;
    color: #fff;
    border: 1.5px solid transparent;
    padding: 3px 16px 5px;
    border-radius: 50px;
    box-shadow: 6px 3px 6px rgba(126, 74, 128, 0.6);
    text-decoration: none;
}

main #products .buy-btn:hover {
    color: #fff;
}