@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {

    /* color setting */
    --first-color: #0e2431;
    /* brand color - second color */
    --second-color: #FF5D1D;
    --second-color-transparent-1: rgba(255, 93, 29, .6);
    --second-color-transparent-2: rgba(255, 93, 29, .1);
    --third-color: #777;
    --third-color-transparent: rgba(119, 119, 119, 0.5);
    --third-color-transparent-2: rgba(119, 119, 119, 0.3);
    --third-color-transparent-2: rgba(119, 119, 119, 0.1);

    --first-font-color: #ffffff;

    --image-shader-color: rgba(0, 0, 0, 0.05);

    --hover-color: #f65a1c;

    --body-bg-color: #fefefe;
    --body-bg-color-dark: rgb(246, 246, 246);
    --card-bg-color: #fff;
    --modal-bg-color: #fff;

    --bg-transparent-color: rgba(0, 0, 0, 0.1);
    --transparent-color-01: rgba(0, 0, 0, 0.1);
    --transparent-color-02: #f9e9e2;
    --transparent-color-03: #f7efeb;

    --line-color: #d7d7d7;
    --border--line: rgba(215, 215, 215, 0.3); 

    --scroll-bar-color: #c5cadf;
    --scroll-thumb-color: #70768a;
    --scroll-thumb-hover-color: #454f6b;

    --color-filter: invert(1);

    --box-shadow: 0px 0px 20px rgb(0 0 0 / 10%);

    --small-font-size: 0.9rem;
    --normal-font-size: 1rem;

    /* --header-height: 3.5rem; */
    --header-height: 3.5rem;

    /* font setting */
    --light-font-weight: 400;
    --normal-font--weight: 500;
    --bold-font--weight: 600;

    /* card setting */
    --normal-border-radius: 10px;

    --normal-padding-vertical: 16rem;

    /* Layer index */

}

/* Theme Switcher */
.dark-theme {

    --first-color: #fff;
    /* --second-color: #6a59d1; */
    --second-color: #FF5D1D;
    --third-color: #a9afc3;

    --body-bg-color: #0e1b31;
    --card-bg-color: #132347;
    --modal-bg-color: #102048;
    --bg-transparent-color: rgba(255, 255, 255, 0.1);
    --transparent-color-01: rgba(255, 255, 255, 0.1);
    /* --transparent-color-02: rgba(106, 89, 209, 0.1); */

    --line-color: #454f6b;

    --color-filter: invert(0);

    --scroll-bar-color: #c1ceff;
    --scroll-thumb-color: #282f4e;
    --scroll-thumb-hover-color: #454f6b;
}

/* Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    /* outline: 1px solid red; */
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--first-color);
    background: var(--body-bg-color);
    margin: 0 0 0 0;
    transition: .5s ease;
}

a {
    text-decoration: none;
}

a:hover {
    cursor: pointer;
}

ul,
li {
    list-style: none;
}

@font-face {
    font-family: 'XinYi';
    src: url('/accmov/assets/font/xinyi.ttf') format('truetype');
}

@font-face {
    font-family: 'GoldMan';
    src: url('/accmov/assets/font/Goldman-Regular.ttf') format('truetype');
}

/* Scroll Arrow Button */
.scrollToTop-btn {
    z-index: 99999;
    position: fixed;
    right: 0;
    bottom: 20px;
    width: 45px;
    height: 45px;
    background: var(--second-color);
    color: #fff;
    font-size: var(--small-font-size);
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: .5s ease;
}

.scrollToTop-btn.active {
    right: 20px;
    pointer-events: all;
    opacity: 1;
}

.theme-btn {
    z-index: 999999;
    position: fixed;
    right: 0;
    top: 100px;
    background: var(--transparent-color-01);
    backdrop-filter: blur(20px);
    width: 50px;
    height: 50px;
    font-size: 1.2em;
    border-radius: 5px 0 0 5px;
    box-shadow: var(--box-shadow);
    cursor: pointer;
}

.theme-btn .fa-sun,
.theme-btn.sun .fa-moon {
    display: none;
}

.theme-btn.sun .fa-sun {
    display: block;
}

/* #region Reusable Component */
/* ==================================== 【Reusable Component】 ==================================== */
/* Section Title */
.section-title-01 {
    font-size: 4.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
    background: linear-gradient(to top, transparent 0%, var(--first-color) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .1;
    /* background-color: red; */
}

.section-title-02 {
    font-size: 2.5rem;
    font-weight: 700;
    transform: translateY(-80px);
    /* color: red; */
}

.section-title-02:before {
    content: '';
    position: absolute;
    width: 120px;
    height: 3px;
    border-radius: 50%;
    right: 0;
    bottom: 0;
    background: var(--second-color);
}

/* Button Style */
.regular-btn {
    color: var(--body-bg-color);
    font-size: 0.9rem;
    font-weight: var(--normal-font--weight);
    text-decoration: none;
    padding: 9px 25px;
    background-color: var(--second-color);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.regular-btn:hover {
    background: var(--hover-color);
}


/* Large Btn */
.btn {
    background: var(--second-color);
    color: #fff;
    font-size: var(--normal-font-size);
    font-weight: 500;
    display: inline-block;
    /* margin-top: 25px; */
    padding: 20px 30px;
    letter-spacing: 1px;
    border-radius: 10px;
}

.btn:hover {
    background: var(--hover-color);
}


/* 不要动 */
/* 公用的 */
.container {
    width: 100%;
    position: relative;
    flex-direction: column;
}

.flex-center {
    /* width: 100%; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.section {
    position: relative;
    background-color: var(--body-bg-color);
    /* width: 100%;
    height: 100vh; */
    /* max-width: 1150px;
    margin-left: auto;
    margin-right: auto; */
    /* max-width: 1150px; */
    width: 100%;
    /* height: 100vh; */
    /* padding: 8rem 16rem 0rem 16rem; */
    /* padding: 0rem 16rem !important; */
}

section .container {
    margin-inline: auto;
}

/* divide line */
.divide-line {
    height: 1px;
    width: 100%;
    /* color: rgba(237, 237, 237, 0.1); */
    color: red;
}

::-webkit-scrollbar {
    width: 10px;
    background: var(--scroll-bar-color);
}

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb-color);
    border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover-color);
}


/* #endregion */


/* #region【 HEADER & NAVIGATION 】*/
/* ==================================== 【Header & Navigation Section】 ==================================== */
/* Header General */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* box-shadow: 0 2px 8px hsla(220, 68%, 12%, .1); */
    /* background-color: hsl(220, 100%, 99%); */
    /* background-color: var(--card-bg-color); */
    backdrop-filter: blur(20px);
    z-index: 99999999;
    transition: .6s ease;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: var(--box-shadow) !important;
}

header.sticky {
    /* backdrop-filter: blur(20px); */
    background-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: var(--box-shadow) !important;
}

.header.active {
    background-color: var(--body-bg-color) !important;
}

/* Nav General*/
.nav {
    width: 100%;
    position: relative;
    /* height: calc(4rem + 1rem); */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    margin-inline: auto;
    /* max-width: 1450px; */
    padding: 0 16rem;
    transition: .6s ease;
}

.header.sticky .nav {
    height: calc(2.5rem + 2rem);
}


/* ① Nav logo */
.nav__data {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav .nav__data .nav__logo {
    color: var(--first-color);
    /* font-size: 1.3rem; */
    font-size: 1.6rem;
    /* font-weight: var(--bold-font--weight); */
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'GoldMan', sans-serif !important;
}

.nav__logo {
    /* display: inline-flex;
    align-items: center;
    column-gap: .25rem;
    font-weight: 600;
    transition: color .3;
    color: var(--first-color); */
}

.nav__logo img {
    /* width: 30px !important; */
    width: 26px !important;
}

/* Navigation Toggle */
.nav__toggle {
    position: relative;
    width: 42px;
    height: 42px;
    /* display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    background-color: pink; */
}



.nav__toggle-menu,
.nav__toggle-close {
    /* width: 42px;
    height: 42px; */
    font-size: 1.25rem;
    color: var(--first-color);
    position: absolute;
    display: grid;
    place-items: center;
    inset: 0;
    cursor: pointer;
    transition: opacity .1s, transform .4s;

}

.nav__toggle-close {
    opacity: 0;
}

/* ③ Login Group */
.nav__login {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.nav__login-mobile {
    display: none;
}

.nav__login .login {
    color: var(--first-color);
    font-size: var(--normal-font-size);
    font-weight: var(--normal-font--weight);
}

.nav__login .login:hover {
    color: var(--second-color);
    cursor: pointer;
}

.nav__login a:not(:last-child) {
    margin-right: 16px;
}

.header.sticky .nav__login button {
    padding: 9px 25px;
}

/* add the class name by JS */
.nav__menu.show-menu {
    top: 3.5rem;
    opacity: 1;
    pointer-events: initial;
}

.show-icon .nav__toggle-menu {
    opacity: 0;
    transform: rotate(90deg);
}

.show-icon .nav__toggle-close {
    opacity: 1;
    transform: rotate(90deg) scale(1.2);
}


/* ② Menu Item and Arrow */
.nav__menu {
    /* background-color: pink; */
}

.nav__link {
    color: var(--first-color);
    font-weight: var(--normal-font--weight);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s;
}

.nav__link i {
    /* background-color: red; */
}

.nav__link:hover {
    /* background-color: rgb(235, 244, 252); */
    /* background-color: var(--second-color); */
    background-color: rgb(255, 248, 249);
    color: var(--second-color);
    /* background-color: rgb(10, 33, 53); */
}

.nav__link:focus {
    background-color: var(--second-color-transparent-2);
    color: var(--second-color);
}

/* dropdown */
.dropdown_item.active {
    cursor: pointer;
}

.dropdown_item.active .dropdown__button {
    color: var(--second-color);
}

.dropdown__button {
    cursor: pointer;
}

.dropdown__arrow {
    font-size: 1.5rem;
    font-weight: initial;
    transition: transform .4s;
}

.dropdown__content,
.dropdown__group,
.dropdown__list {
    display: grid;
}

.dropdown__container {
    background-color: rgb(255, 248, 249);
    height: 0;
    overflow: hidden;
    transition: height .4s;
}

.dropdown__content {
    row-gap: 1.75rem;
}

.dropdown__group {
    padding-left: 2.5rem;
    row-gap: .5rem;
}

.dropdown__group:first-child {
    margin-top: 1.25rem;
}

.dropdown__group:last-child {
    margin-bottom: 1.25rem;
}

.dropdown__icon {
    font-size: 1.25rem;
    color: var(--second-color);
}

.dropdown__title {
    font-size: var(--normal-font-size);
    font-weight: 600;
    color: var(--first-color);
}

.dropdown__list {
    row-gap: .25rem;
}

.dropdown__link {
    font-size: var(--normal-font-size);
    font-weight: 400;
    color: var(--first-color);
    transition: color .3s;
}

.dropdown__link:hover {
    color: var(--second-color);
}

.show-dropdown .dropdown__arrow {
    transform: rotate(180deg);
}

/* #endregion */


/* #region【 LOGIN & SIGNUP 】 */
/* Login Part Hide */
.login-modal {
    z-index: 999999;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: var(--bg-transparent-color);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .3s ease;
}

.login-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.login-modal .login-modal-body {
    position: relative;
    background: var(--card-bg-color);
    width: 950px;
    height: 550px;
    margin: 20px;
    border-radius: var(--normal-border-radius);
    box-shadow: var(--box-shadow);
    transform: translateY(-50px);
    transition: .5s ease;
    overflow: hidden;
}

.login-modal.active .login-modal-body {
    /* transition: .5s ease; */
    transform: translateY(0);
}

.login-modal-body .modal-close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    color: var(--first-color);
    z-index: 100;
    cursor: pointer;
    transition: .3s ease;
}

.modal-close-btn:hover {
    transform: rotate(90deg);
    /* color: #fff; */
}


.user-form {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: var(--card-bg-color);
    padding: 40px 55px;
    text-align: center;
    z-index: 1;
    transition: .6s ease-in-out 1.2s, visibility 0s 1s;
}

.login-modal-body.active .user-form {
    right: 50%;
}

.user-form.signup-form {
    visibility: hidden;
}

.login-modal-body.active .user-form.signup-form {
    visibility: visible;
}

.user-form form {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 40px 0;
    /* background-color: pink; */
}

.user-form form h1 {
    font-size: 2rem;
    margin: -10px 0;
}

.user-form form .input-box {
    position: relative;
    margin: 30px 0;
}

.user-form form .input-box input {
    width: 100%;
    padding: 13px 50px 13px 20px;
    background-color: #eee;
    border-radius: 8px;
    border: none;
    outline: none;
    color: #333;
    font-weight: 500;
}

.user-form form .input-box input::placeholder {
    color: #888;
    font-weight: 400;
}

.user-form form .input-box i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #888;
}

.user-form form .forget-link {
    margin: -15px 0 15px;
}

.user-form form .forget-link a {
    font-size: .8rem;
    color: var(--third-color);
    text-decoration: none;
}

.user-form form button {
    width: 100%;
    height: 48px;
    background-color: var(--second-color);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    border: none;
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    /* font-size: var(--normal-font-size); */
}

.user-form form p {
    font-size: .8rem;
    margin: 15px 0;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: var(--third-color);
}

.user-form form p::before,
.user-form form p::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
}

.user-form form .social-icons {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.user-form form .social-icons button {
    height: 48px;
    background-color: rgba(255, 255, 255, .2);
    color: var(--first-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.user-form form .right-policy {
    position: absolute;
    bottom: -26px;

    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
}

.user-form form .right-policy p {
    color: var(--third-color);
    font-size: .7rem;
}

.user-form form .right-policy :nth-child(2) {
    text-decoration: underline;
}

.signup-form form .signup-term {
    margin-bottom: 16px;
    margin-top: -12px;
    font-weight: 400;
    font-size: .7rem;
    color: var(--third-color);
}

.signup-form form .signup-term span {
    text-decoration: underline;
}

/* .user-form.signup-form .social-icons{
    margin-bottom: 40px !important;
    
} */

.user-form.signup-form .input-box {
    margin: 24px 0 !important;

}


/* Login part */
.login-modal-body .login-form form .password-box i {
    display: none;
    /* opacity: 0;
    visibility: hidden;
    pointer-events: none; */
    cursor: pointer;
    transition: .1s ease;
}

.login-modal-body .login-form form .password-box i.active {
    display: block;
    /* opacity: 1;
    visibility: visible;
    pointer-events: all; */
    cursor: pointer;
}

.login-modal-body .login-form form .forget-link a {
    cursor: pointer;
}

.login-modal-body .login-form form .forget-link a:hover {
    color: var(--second-color);
}

.login-modal-body .login-form form .right-policy :nth-child(2) {
    cursor: pointer;
}

.login-modal-body .login-form form .right-policy :nth-child(2):hover {
    color: var(--second-color);
}

/* Signup part */
.login-modal-body .signup-form form .password-box i {
    display: none;
    /* opacity: 0;
    visibility: hidden;
    pointer-events: none; */
    cursor: pointer;
    transition: .1s ease;
}

.login-modal-body .signup-form form .password-box i.active {
    display: block;
    /* opacity: 1;
    visibility: visible;
    pointer-events: all; */
    cursor: pointer;
}


/* toggle */
.user-toggle {
    position: absolute;
    width: 100%;
    height: 100%;
    /* padding: 10px; */
}

.user-toggle::before {
    content: '';
    position: absolute;
    left: -250%;
    /* top: 4px; */
    width: 300%;
    height: 100%;
    /* background-color: var(--second-color); */
    background: linear-gradient(135deg,
            #ff5d1D 0%,
            #ff7a1f 50%,
            #f97d2b 80%,
            #ff5d1D 100%);

    /* background: linear-gradient(135deg,
            #ff5d01 0%,
            #ff8a3d 40%,
            #ff5d01 100%); */

    border-radius: 10px;
    z-index: 2;
    /* transition: 1.8s ease-in-out; */
    transition: 1.8s ease-in-out;
}

.login-modal-body.active .user-toggle::before {
    left: 50%;
}


.toggle-panel {
    position: absolute;
    width: 50%;
    height: 100%;
    /* background-color: var(--second-color); */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    color: #fff;
    z-index: 2;
    transition: .6s ease-in-out;
    padding: 80px 40px;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 800 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.08'%3E%3Ccircle cx='200' cy='200' r='150'/%3E%3Ccircle cx='600' cy='400' r='200'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    /* pointer-events: none; */
    /* overflow: hidden; */

}

.toggle-panel.toggle-right {
    align-items: flex-end;
    justify-content: space-between;
    text-align: end;
}

.toggle-panel.toggle-right .toggle-logo {
    display: flex;
    width: 100%;
    /* flex-direction: row !important; */
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: start;
}

.toggle-panel.toggle-right .toggle-switch {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;

}

.toggle-panel.toggle-left {
    align-items: flex-start;
    justify-content: space-between;
}

.toggle-panel .toggle-logo {
    width: 100%;
    /* height: 40px; */
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;

}

.toggle-panel .toggle-logo img {
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 50%;
    object-fit: cover;
    padding: 2px;
}

.toggle-panel .toggle-logo {
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: center;

}

.toggle-panel .toggle-content {
    height: 100%;
    width: 100%;
    padding: 30px 0;

}

.toggle-panel .toggle-content h1 {
    margin-bottom: 20px;
}

.toggle-panel .toggle-content p {
    font-size: .9rem;
}

.toggle-switch p {
    text-decoration: underline;
}

.toggle-switch button {
    cursor: pointer;
}

.toggle-panel::before {

    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -100px;
    right: -100px;
}

.toggle-panel.toggle-left {
    left: 0;
    transition-delay: 1.2s;
    transition-delay: 1.2s ease-in-out;
}

.login-modal-body.active .toggle-panel.toggle-left {
    left: -50%;
    transition-delay: .6s;
}


.toggle-panel.toggle-right {
    right: -50%;
    transition-delay: .6s;
}

.login-modal-body.active .toggle-panel.toggle-right {
    right: 0;
    transition-delay: 1.2s;
}

.toggle-panel p {
    margin-bottom: 20px;
}

.toggle-panel .btn1 {
    width: 160px;
    height: 46px;
    background: transparent;
    border: 1.5px solid #fff;
    color: #fff;
    box-shadow: none;
    border-radius: 8px;
    transition: .3s ease;
}

.toggle-panel .btn1:hover {
    background-color: #fff;
    color: var(--second-color);
}

/* #endregion */


/* #region【 SLIDER 】*/
/* ==================================== 【Slider Section】 ==================================== */
.slider {
    position: relative;
    width: 100%;
    height: calc(100vh - 4.5rem);
    /* height: 100vh; */
    top: 4.5rem;
    overflow: hidden;
    overflow-x: hidden;
}

/* Slide Image */
.slider .list .item {
    position: absolute;
    inset: 0 0 0 0;
    width: 100%;
    height: 100%;
}

.img-container {
    width: 100%;
    height: 100%;
}

.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: blur(6px);
    transform: scale(1.05);
}


/* #region - Slide Content */
.slider .list .item .content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding: 0 16rem;
    box-sizing: border-box;
    color: var(--first-font-color);
    text-shadow: 0 5px 10px #0004;
}

.slider .list .item .content .title-group {
    display: flex;
    flex-direction: column;
}

.slider .list .item .content .title {
    font-size: 6em;
    font-weight: bold;
    line-height: 1.3em;
}

.slider .list .item .content .type {
    font-size: 2.5em;
    width: 40%;
    font-weight: bold;
    line-height: 1.2em;
    padding-bottom: 20px;
    color: var(--second-color);
}

.slider .list .item .content .description {
    font-size: 14px;
    width: 40%;
    padding: 20px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    color: #fff;
    /* text-shadow:none; */
    display: block;
}

.slider .list .item .content .button {
    margin-top: 0.5rem;
    margin-top: 25px;
}

.slider .list .item .content .button button {
    border: none;
    background-color: var(--second-color);
    padding: 16px 26px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 2px;
    transition: 0.4s;
    color: #fff;
    border-radius: 10px;
}

/* #endregion - content */

/* Thumbnail */
.thumbnail {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: center !important; */
    width: 660px;
    gap: 20px;

    /* padding-right: 16rem; */
    margin-right: 16rem;

    z-index: 100;
    /* width: max-content; */
    /* bottom: 10rem; */

}

.thumbnail.next {
    justify-content: flex-end !important;
}

.thumbnail.prev {
    justify-content: flex-start !important;
}

/* Page Arrow */
.nextPrevArrows {

    position: absolute;
    width: 700px;
    top: 50%;
    transform: translateY(-50%);
    right: -20px;
    z-index: 200;

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

.nextPrevArrows button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(6px);
    border: none;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
}

.nextPrevArrows button:hover {
    background-color: #fff;
    color: var(--second-color);
}

/* thumbnail item */
.thumbnail .item {
    width: 150px;
    height: 220px;
    flex-shrink: 0;
    position: relative;
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px;
    overflow: hidden;
}

.thumbnail .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 20px; */
    /* box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3); */
}


/* Start */
/* Content Animaiton Part */
.slider .list .item:nth-child(1) {
    z-index: 2;
}

.slider .list .item {
    z-index: 1;
}

.slider .list .item:nth-child(1) .content .title,
.slider .list .item:nth-child(1) .content .type,
.slider .list .item:nth-child(1) .content .description,
.slider .list .item:nth-child(1) .content .button {
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent 0.5s 1s linear 1 forwards;
}

@keyframes showContent {
    to {
        transform: translateY(0px);
        filter: blur(00px);
        opacity: 1;
    }
}

.slider .list .item:nth-child(1) .content .title {
    animation-delay: 0.2s;
}

.slider .list .item:nth-child(1) .content .type {
    animation-delay: 0.4s;
}

.slider .list .item:nth-child(1) .content .description {
    animation-delay: 0.6s;
}

.slider .list .item:nth-child(1) .content button {
    animation-delay: 0.8s;
}


/* Animation for next button click */
.slider.next .list .item:nth-child(1) img {
    /* width: 150px; */
    /* height: 420px; */
    width: 150px;
    height: 220px;

    position: absolute;
    bottom: 50%;
    left: 50%;

    border-radius: 30px;
    animation: showImage 0.5s linear 1 forwards;
}

@keyframes showImage {
    to {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* thumball animation */
.slider.next .thumbnail .item:nth-last-child(1) {
    overflow: hidden;
    animation: showThumbnail1 0.5s linear 1 forwards;
}

.slider.prev .list .item img {
    z-index: 999;
}

@keyframes showThumbnail1 {
    from {
        width: 0;
        opacity: 0;
    }
}



.slider.next .thumbnail {
    /* animation: effectNext .5s linear 1 forwards; */
}

@keyframes effectNext {
    from {
        /* transform: translateX(150px); */
    }
}

/* Animation for prev button click */
.slider.prev .list .item:nth-child(2) {
    z-index: 2;
}

.slider.prev .list .item:nth-child(2) img {
    position: absolute;
    bottom: 0;
    left: 0;
    animation: outFrame 0.5s linear 1 forwards;
}

.slider.prev .list .item:nth-child(2) .content {
    display: none;
}

@keyframes outFrame {
    to {
        width: 150px;
        height: 220px;
        /* bottom: 50px;
        left: 50%; */
        bottom: 50%;
        /* transform:translateY(-50%); */
        left: 50%;
        border-radius: 20px;
    }
}


/* thumbnail */
.slider.prev .thumbnail .item:nth-child(1) {
    overflow: hidden;
    opacity: 1;
    animation: showThumbnail2 0.5s linear 1 forwards;
}

@keyframes showThumbnail2 {
    from {
        width: 0;
        opacity: 0;
    }
}

.slider.prev .list .item:nth-child(1) .content .title,
.slider.prev .list .item:nth-child(1) .content .type,
.slider.prev .list .item:nth-child(1) .content .description,
.slider.prev .list .item:nth-child(1) .content .button {
    animation: contentOut 0.5s 1s linear 1 forwards;
}

@keyframes contentOut {
    to {
        /* transform: translateY(-150px); */
        filter: blur(20px);
        opacity: 0;
    }
}

/* scroll down */
.scroll-down {
    width: 100%;
    position: absolute;
    bottom: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;

}

.scroll-down a {
    color: rgba(255, 255, 255, 1);
    /* font-weight: var(--normal-font--weight); */
}

.scroll-down a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.scroll-down i {
    color: var(--second-color);
    font-size: 1.0em;
    animation: arrow-down ease 1.5s infinite;
}


@keyframes arrow-down {

    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(10px);
    }
}

/* #endregion*/


/* #region【 SOLUTIONS CATEGORY 】*/
/* ==================================== 【Solution Section】 ==================================== */
.solution {
    /* background-color: pink; */
    width: 100%;
    height: auto;
    /* top: 4.5rem; */
    padding: 8rem 16rem 4rem;
    overflow-x: hidden;
    overflow: hidden;
    /* display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; */
}

.solution .container .content {
    max-width: 100%;
    height: auto;
    margin-top: 4rem;

}

.solution-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(10px, 1fr));
    width: 100%;
    margin: 0 auto;
    gap: 20px;

    /* grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); */
}

/* real card */
.solution-container {
    max-width: 100%;
    height: 31rem;
    border-radius: var(--normal-border-radius);
}

.solution-card {
    width: 100%;
    height: 100%;
    background: var(--card-bg-color);
    border-radius: var(--normal-border-radius);
    box-shadow: var(--box-shadow);
    border-bottom: 3px solid var(--card-bg-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    transition: transform .3s ease;
    cursor: pointer;
}

.solution-card:hover {
    transform: scale(1.02);
    border-bottom: 3px solid var(--second-color);
}

/* Up */
.solution-card-image {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
    height: 15rem;
}

.solution-card-image img {
    max-width: 100%;
    height: 15rem;
    display: block;
    object-fit: cover;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Down */
.solution-card-content {
    width: 100%;
    height: 100%;
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;

}

.solution-card-content .content-wrap {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 10px;
}

/* title */
.solution-card-content-title {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border--line);
}

.solution-card-content-title h3 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 30px;
}

.solution-card-content-title span {
    opacity: 1;
    font-size: .8rem;
    font-weight: var(--light-font-weight);
    color: var(--third-color-transparent);
    border: 1px solid var(--third-color-transparent-2);
    border-radius: 6px;
    padding: 2px 8px;
    cursor: pointer;
    transition: .3s ease;
}

.solution-card-content-title span:hover {
    border: 1px solid var(--second-color);
    color: var(--second-color);
}

/* description */
.solution-card-content-title-description {

    color: var(--third-color);
    font: var(--normal-font-size);
    font-weight: var(--light-font-weight);

}


/* button */
.explore-btn {
    color: var(--third-color);
    cursor: pointer;
    transition: .3s ease;
    align-items: center;
}


/* Hide Layer */
.solution-modal {
    z-index: 9999999999;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: var(--bg-transparent-color);
    backdrop-filter: blur(16px);
    visibility: hidden;
    opacity: 0;
    transition: .3s ease;
}

.solution-modal.active {
    visibility: visible;
    opacity: 1;
}

.solution-modal-body {
    position: relative;
    background: var(--modal-bg-color);
    max-width: 600px;
    margin: 20px;
    padding: 40px;
    border-radius: var(--normal-border-radius);
    box-shadow: var(--box-shadow);
    transform: translateY(-50px);
    transition: .5s ease;
}

.solution-modal.active .solution-modal-body {
    transform: translateY(0);
}

.solution-modal-body .modal-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    margin: 20px;
    cursor: pointer;
    transition: .3s ease;
}

.solution-modal-body .modal-close-btn:hover {
    transform: rotate(90deg);
    /* color: #fff; */
}

.solution-modal-body h3 {
    font-size: 2em;
}

.solution-modal-body h4 {
    font-size: 1.3em;
    font-weight: 600;
    margin: 15px 0 10px;
}

.solution-modal-body ul li {
    margin-top: 15px;
}

.solution-modal-body ul li i {
    color: var(--second-color);
}


.solution .container .details {

    text-align: center;
    font-size: 1.2rem;
    padding: 0rem 20rem;
    margin-bottom: 3rem;
    margin-top: -2em;
}

/* Details */
.solution .container .details {
    width: 100%;
    text-align: center;
    font-size: 1.6rem;

    padding: 0rem 10rem;
    margin-bottom: 0rem;
    margin-top: -1.6em;
    color: var(--first-color);
}

.solution .container .details span {
    color: var(--second-color);
    font-weight: 700;
}

/* contact us */
.solution .container .contact-us {
    width: 100%;
    text-align: center;
    margin-top: 4rem;
}

.solution .container .contact-us a {
    color: var(--first-color);
    font-size: var(--normal-font-size);
    transition: .3 ease;
}

.solution .container .contact-us a:hover {
    color: var(--second-color);
    text-decoration: underline;
}

.solution .container .contact-us a i {
    color: var(--second-color);
    animation: email-scale2 ease 1.5s infinite;
}

@keyframes email-scale2 {

    0% {
        transform: scale(1.0);
    }

    30% {
        transform: scale(1.2);
    }
}

/* #endregion */


/* #region【 PRODUCT 】*/
/* ==================================== 【Product Section】 ==================================== */
.product {
    width: 100%;
    height: auto;
    background-color: var(--body-bg-color-dark);
    padding: 3rem 16rem 4rem !important;
    /* overflow: hidden; */
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* grid background */
.product::before {

    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        /* 大格 */
        linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px),

        /* 小格 */
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);

    background-size:
        120px 120px,
        120px 120px,
        30px 30px,
        30px 30px;

    /* 中间最强，上下渐隐 */
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.0) 10%,
            rgba(0, 0, 0, 1.0) 45%,
            rgba(0, 0, 0, 1.0) 55%,
            rgba(0, 0, 0, 0.0) 90%,
            transparent 100%);

    mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.0) 10%,
            rgba(0, 0, 0, 1.0) 45%,
            rgba(0, 0, 0, 1.0) 55%,
            rgba(0, 0, 0, 0.0) 90%,
            transparent 100%);
}

/* Card Swiper */
.product .slider-myotion {
    position: relative;
    width: 100%;
    height: 60vh;

    /* height: 370px; */
    /* overflow: hidden; */
    opacity: 1;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 4rem;
    /* background-color: pink; */
}

.product .slider-myotion .item {
    position: absolute;
    /* width: 200px;
    height: 320px; */
    width: 46vw;
    height: 100%;
    text-align: justify;
    background-color: #fff;
    box-shadow: var(--box-shadow);
    border-radius: 10px;
    /* padding: 20px; */
    padding: 10px 10px 10px;

    transition: .5s;
    /* left: calc(50% - 110px);
    top: 0; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* .product .slider-myotion .item::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(to bottom,
            rgba(255, 93, 29, 0.15),
            transparent 80%);
} */

.product .slider-myotion .item .product-wrap {
    flex: 9;
    position: relative;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    border-radius: 8px;
    cursor: pointer;
}

.product .slider-myotion .item .product-wrap .overlay {
    transition: .3s ease;
    border-radius: 8px;
}

.product .slider-myotion .item .product-wrap:hover .overlay {
    z-index: 200;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    top: 0;
    left: 0;
}

.product .slider-myotion .item .product-wrap .info {
    width: 80%;
    z-index: 200;
    position: absolute;
    bottom: 40px;
    left: 20px;
    color: #fff;
    transform: translateY(20px);
    opacity: 0;
    transition: .5s ease;
    /* overflow-wrap: break-word;
    word-break: break-all;
    flex-wrap: wrap; */
    flex-wrap: wrap;
}

.product .slider-myotion .item .product-wrap .info h1 {
    margin-bottom: 1.2rem;
}

.product .slider-myotion .item .product-wrap:hover .info {
    transform: translateY(0);
    opacity: 1;
}


.product .slider-myotion .item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Merit */
.slider-myotion .item .product-merit {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* background-color: pink; */
}

.product .slider-myotion .item .item-left {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.product .slider-myotion .item .item-left h4 span {
    /* background-color: purple; */
    color: var(--second-color);
}

#next-myotion,
#prev-myotion {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 0px;
    border-radius: 50%;
    /* top: 40%; */
    color: var(--second-color);

    background-color: var(--second-color);
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(6px);
    border: none;
    font-weight: 900;

    z-index: 2;
    cursor: pointer;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow);
    transition: .3s ease;
}

#next-myotion {
    left: unset;
    right: 0px;
}

#next-myotion:hover,
#prev-myotion:hover {

    background-color: var(--second-color);
    color: #fff;
}

/* Details */
.product .container .details {
    width: 100%;
    text-align: center;
    font-size: 1.6rem;

    padding: 0rem 10rem;
    margin-bottom: 0rem;
    margin-top: -1.6em;
    color: var(--first-color);
}

.product .container .details span {
    color: var(--second-color);
    font-weight: 700;
}

/* contact us */
.product .container .contact-us {
    width: 100%;
    text-align: center;
    margin-top: 4rem;
}

.product .container .contact-us a {
    color: var(--first-color);
    font-size: var(--normal-font-size);
    transition: .3 ease;
}

.product .container .contact-us a:hover {
    color: var(--second-color);
    text-decoration: underline;
}

.product .container .contact-us a i {
    color: var(--second-color);
    animation: email-scale2 ease 1.5s infinite;
}

@keyframes email-scale2 {

    0% {
        transform: scale(1.0);
    }

    30% {
        transform: scale(1.2);
    }
}


/* #endregion */


/* #region【 DEVELOPER 】*/
.developer {
    width: 100%;
    height: auto;
    background-color: var(--first-color);
    margin: 0 0;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.developer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(to top,
            rgba(255, 93, 29, 0.15),
            transparent 60%);
}

.developer .container {
    width: 100%;
    height: 50rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* padding: 0rem 16rem; */
    overflow: hidden;
}

/* #region right */
.developer-right {
    position: relative;
    width: 35vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-right: 16rem;
    /* padding-top: 4.5rem;
    padding-bottom: 4.5rem; */
    z-index: 0;
}

.developer-right::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("../../assets/background/kelly-sikkema-YK0HPwWDJ1I-unsplash.jpg") center / cover no-repeat;

    filter: blur(10px);
    transform: scale(1.1);
    z-index: -2;
}

.developer-right::after {
    content: "";
    position: absolute;
    inset: 0;
    filter: blur(10px);
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.4);
    /* 变暗 */
    z-index: -1;
}

/* card */
.developer-price {
    width: 22vw;
    height: 68%;
    background-color: rgba(255, 255, 255, .4);
    backdrop-filter: blur(6px);
    z-index: 200;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: .3s ease;
    border-bottom: 3px solid rgba(255, 255, 255, .4);
}

.developer-price:hover {
    border-bottom: 3px solid var(--second-color);
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.02);
}

.developer-price .plan-title {
    width: 100%;
    height: auto;
    text-align: center;
    color: var(--second-color);
}

.developer-price .plan-category {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 16px;
    margin-bottom: 16px;
    padding-bottom: 10px;
}

.plan-category::after {
    content: '';
    position: absolute;
    left: 0rem;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);

}

.plan-category p {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: center;
    transition: .3s ease;
    color: var(--third-color);
    cursor: pointer;
}

.plan-category p:hover {
    color: var(--first-color);
}

.plan-category p.active {
    color: var(--first-color);
}

.plan-category p.active::after {
    content: '';
    position: absolute;
    left: 0rem;
    bottom: -13px;
    width: 100%;
    height: 2px;
    transition: .1s ease;
    background-color: var(--second-color);
    border-radius: 6px;
}

.developer-price .plan-content {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    /* background-color: pink; */
    position: relative;
}

.developer-price .plan-content .price-card {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: 2px;
    opacity: 0;
    transition: .3s ease;

}

.developer-price .plan-content .price-card.active {

    opacity: 1;
    transition: .3s ease;
}

.price-card .price-card-intro {
    font-size: .9rem;
    font-weight: 600;
    margin-top: 0px;
}

.price-card .price-card-intro span{
    color: var(--third-color);
    font-weight: 400;
}

.price-card .price-card-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    margin-top: -10px;
}

.price-card .price-card-list a {
    color: var(--first-color);
    font-size: .9rem;
    display: flex;
    align-items: center;
}

.price-card .price-card-list a i {
    margin-right: 12px;
    font-size: 1.2rem;
    color: var(--second-color);
}

.price-card .price-card-rate {
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.price-card .price-card-rate span {
    color: var(--first-color);
    font-weight: var(--normal-font--weight);
    font-size: .9rem;
}

/* #endregion Right */

/* #region Left */
.developer-left {
    /* flex: 3; */
    width: 65vw;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 4.5rem 4.5rem 4.5rem 16rem;
}

/* title group */
.developer-left .title-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;

}

.developer-left .title-group h1 {
    width: 100%;
    font-size: 2.5rem;
    color: #fff;
    margin: 0;
    line-height: 1;
    text-shadow: 0 5px 10px #0004;
    /* text-decoration: underline;
    text-decoration-color: var(--second-color);
    text-decoration-thickness: .15rem; */
}

.developer-left .title-group h1 span{
    color:var(--second-color)
}

.developer-left .title-group p {
    color: #fff;
    text-align: start;
    width: 80%;
    line-height: 1.5;
    font-size: 1.6rem;
}

/* content group */
.developer-left .content-group {
    width: 100%;
    /* background-color: palegoldenrod; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* padding: 3rem 0rem; */
    gap: 0.5rem;
}

.content-developer .content-title .content-title-main,
.content-consultation .content-title .content-title-main {
    color: var(--second-color);
    font-size: 1.5rem;
    font-weight: 600;
}

/* .developer-card-line{
    width: 100%;
    height: 1px;
    background-color: var(--border--line);
} */

.content-developer .content-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .5rem;
}

.content-developer .content-title p {
    width: 70%;
}

.developer-card {
    width: 100%;
    height: 12rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .1);
    backdrop-filter: blue(10px);
    border-radius: 10px;
    padding: 16px;
}

.developer-left .content-group .developer-card .content-list ul {
    width: 100%;
    height: 100%;
}

.developer-left .content-group .developer-card .content-list ul li {
    width: 100%;
    /* background-color: pink; */
    color: var(--third-color);
    list-style: initial !important;
    margin-bottom: 3px !important;
    font-size: .9rem;
    transition: .3s ease;
    cursor: pointer;
}

.developer-left .content-group .developer-card .content-list ul li:hover {
    color: var(--second-color);
    /* transform: translateX(10px); */
    /* transform: scale(1.2); */
}

.developer-card p {
    color: #fff;
    line-height: 1.5;
}

/* btn */
.developer-left .btn-group {
    width: 100%;
    height: 20%;
    /* background-color: pink; */
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
}

/* #endregion Left */

/* #endregion */


/* #region【 ABOUT 】*/
/* ==================================== 【About Section】 ==================================== */
.about {
    width: 100%;
    height: auto;
    background-color: var(--body-bg-color);
    /* padding: calc(8rem - 4.5rem) 0rem; */
    padding: 3rem 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    /* background-color: violet; */
}


/* ****** company content ****** */
.about .company-wrap .company {
    position: relative;
    width: 100%;
    height: 38rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 2rem;
    /* border-bottom: 1.5px solid var(--border--line); */
}

.about .company-wrap .company::after {
    content: '';
    position: absolute;
    left: 16rem;
    right: 16rem;
    bottom: 0;
    /* width: 100%; */
    height: 1.5px;
    background: var(--border--line);
    border-radius: 16px;
    /* background: linear-gradient(to right, var(--border--line), transparent); */
}

.about .container .company .about-content {
    position: absolute;
    width: 100%;
    height: 30rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0rem 16rem;
    transition: .3s ease;
}


/* Arrow */
#next-company,
#prev-company {
    width: 60px;
    height: 60px;
    position: absolute;
    color: var(--second-color);

    background-color: var(--second-color);
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(6px);
    border: none;
    font-weight: 900;
    left: 14rem;
    z-index: 900;
    cursor: pointer;
    border-radius: 50%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow);
    transition: .3s ease;
}

#next-company {
    left: unset;
    right: 14rem;
}

#next-company:hover,
#prev-company:hover {

    background-color: var(--second-color);
    color: #fff;
}

/* #region Left image part */
.about-image {
    position: relative;
    width: 50%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    opacity: 1;
    box-shadow: var(--box-shadow);
    cursor: pointer;
}

/* overlay */
.about-image .overlay {
    transition: .3s ease;
    border-radius: 10px;
}

.about-image:hover .overlay {
    z-index: 999;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.about-image .info {
    width: 80%;
    z-index: 999;
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #fff;
    transform: translateY(20px);
    opacity: 0;
    transition: .5s ease;
}

.about-image .info h1 {
    width: 100%;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.about-image .info p {
    color: var(--body-bg-color);
    font-size: 1rem !important;
}

.about-image:hover .info {
    transform: translateY(0);
    opacity: 1;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* #endregion left */


/* #region Right info part */
.about-info {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2rem;
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--card-bg-color);
    box-shadow: var(--box-shadow);
    background: linear-gradient(to bottom,
            #ffffff,
            #fafafa);
}

/* description */
.about-info .description {
    /* max-width: 600px; */
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.about-info .description h1 {
    margin-bottom: 10px;
    font-size: 2rem;
}

.about-info .description h4 {
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--first-color);
}

.about-info .description h4 span {
    color: var(--second-color);
}

.about-info .description p {
    width: 100%;
    color: var(--third-color);
    font-size: var(--normal-font-size);

    padding: 16px 16px;
    border-bottom: 1.5px solid var(--border--line);
    line-height: 1.6;
    text-align: left;
}

/* 首字母大写 */
/* .about-info .description p::first-letter{
    font-size: 4rem;
    font-weight: 600;
    float: left;
    line-height: 1;
    margin-right: 2px;
    margin-top: 0px;
    color: var(--first-color);
} */

.about-content .about-info .description p span {
    color: var(--second-color);
    font-weight: 600;
}

/* special cards including list*/
.about-content.about-card-3 .about-info .description .info-warp,
.about-content.about-card-4 .about-info .description .info-warp,
.about-content.about-card-6 .about-info .description .info-warp {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 16px 16px;
    border-bottom: 1.5px solid var(--border--line);
    line-height: 1.6;
    text-align: left;
}

.info-left-content {
    width: 50%;
    height: 100%;
    font-size: var(--normal-font-size);
    color: var(--third-color);
}

.info-right-list {
    width: 50%;
    height: 100%;
    font-size: .9rem;
    color: var(--third-color);
}

.info-right-list p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: .9rem !important;
    text-decoration: none;
    border-bottom: none !important;
}

.info-right-list span {
    font-size: .9rem !important;
    color: var(--second-color);
    font-weight: 600;
}


.about-content.about-card-3 .about-info .description p span {
    font-size: .9rem;
}

.about-content.about-card-4 .about-info .description p span {

    font-size: .9rem;

}

.about-content.about-card-6 .about-info .description p span {

    font-size: .9rem;

}

/* professional-list */
.about-content .about-info .professional-list {
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    margin-top: -16px;
    margin-bottom: 6px;
}

.about-content .about-info .professional-list span {
    font-size: 2.2rem;
    color: var(--third-color);
}

.about-content .about-info .professional-list h4 {
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    color: var(--first-color);
}

/* btn */
.about-content .about-info .btn {
    margin-top: 10px;
}

.about-content.about-card-4 .about-info .btn {
    margin-top: -10px;
}

/* #endregion */


/* #region【 partner carousel】*/
.about .carousel-wrap {
    padding: 3rem 16rem 0rem;
}

.carousel {
    /* flex: 1; */
    width: 100%;
    height: auto;
    position: relative;
    /* display: grid; */
    /* grid-template-columns: 4 1fr; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* background-color: pink; */
    padding: 4rem 0rem 2rem !important;
}

.carousel .carousel__content {
    width: 100%;
    /* height: auto; */
    row-gap: 0rem;
    column-gap: 0rem;
    margin-bottom: 0rem;
}

.carousel__card {
    width: 210px;
    height: auto;
    box-shadow: var(--box-shadow);
    padding: .5rem 1rem 0rem;
    margin-inline: 1rem;
    border-radius: 10px;
    text-align: center;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .3s ease;
    /* background-color: pink; */
    cursor: pointer;
}

/* customer card setting */
.carousel__image {
    width: 50%;
    height: auto;
    /* height: 90px; */
    /* border-radius: 50%; */
    object-fit: cover;
    overflow: hidden;
    /* box-shadow: var(--box-shadow); */
    /* margin: 0 auto .5rem; */
    padding: 4px 0px;
    transition: .3s ease;
}

.carousel__img {
    width: 100%;
    /* height: 90px; */
    /* border-radius: 50%; */
    object-fit: cover;
    overflow: hidden;
    /* transition: transform .4s; */
    transition: .3s ease;
}

.carousel__card:hover {
    transform: scale(1.05);
}

.carousel__card:hover .carousel__img {
    transform: scale(1);
}

/* animation */
.carousel .carousel__content {
    width: max-content;
    display: flex;
    flex-direction: row;

    animation: scrollLeft 16s linear infinite;
}

.carousel__content.carousel__reverse {
    flex-direction: row-reverse;
    animation-direction: reverse;
    animation-delay: -1s;
}

/* carousel__content */
.carousel__content:hover {
    animation-play-state: paused;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}

@media screen and (max-width:320px) {
    .carousel__card {
        width: 250px;
        padding-bottom: 2rem;
    }
}

@media screen and (min-width:1150px) {

    .carousel {
        margin-inline: auto;
        row-gap: 3rem;
    }

    .carousel::before,
    .carousel::after {
        content: '';
        position: absolute;
        top: 0;
        width: 32rem;
        height: 100%;
        z-index: 100;
    }

    .carousel::before {
        right: -20rem;
        background: linear-gradient(90deg, hsla(220, 24%, 94%, 0) 0%, var(--body-bg-color) 100%);
    }

    .carousel::after {
        left: -20rem;
        top: 0rem;
        background: linear-gradient(90deg, var(--body-bg-color) 0%, hsla(220, 24%, 94%, 0) 100%);

    }

    .carousel__card {
        /* width: 270px; */
        /* padding: 3rem 2rem; */
        /* border-radius: 4rem; */
    }
}

/* #endregion【 Carousel 】*/

/* Details */
.about .container .details {
    width: 100%;
    text-align: center;
    font-size: 1.6rem;

    padding: 0rem 10rem;
    margin-bottom: 0rem;
    margin-top: -1.6em;
    color: var(--first-color);
}

.about .container .details span {
    color: var(--second-color);
    font-weight: 700;
}

/* #endregion【 ABOUT 】*/


/* #region【 CONNECT 】*/
/* ================ Connect Section ================ */
.connect {
    width: 100%;
    height: auto;
    background-color: var(--body-bg-color-dark);
    padding: 3rem 16rem;
}

.connect .container .content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 4rem 0;
    gap: 2rem;
    /* background-color: yellowgreen; */
}

.connect::before {

    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        /* 大格 */
        linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px),

        /* 小格 */
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);

    background-size:
        120px 120px,
        120px 120px,
        30px 30px,
        30px 30px;

    /* 中间最强，上下渐隐 */
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.0) 10%,
            rgba(0, 0, 0, 1.0) 45%,
            rgba(0, 0, 0, 1.0) 55%,
            rgba(0, 0, 0, 0.0) 90%,
            transparent 100%);

    mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.0) 10%,
            rgba(0, 0, 0, 1.0) 45%,
            rgba(0, 0, 0, 1.0) 55%,
            rgba(0, 0, 0, 0.0) 90%,
            transparent 100%);
}

/* Left Connect */
.connect-left {
    flex: 1;
    /* background-color: pink; */
}

.connect-form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: flex-end; */
    justify-content: space-between;
}

.connect-form input,
.connect-form textarea {
    border: none;
    color: var(--first-color);
    background: var(--card-bg-color);
    font-size: 1rem;
    margin-bottom: 20px;
    padding: 15px 40px 40px 15px;
    border-radius: 10px;
    transition: .1s ease;
    box-shadow: var(--box-shadow);
    /* border: 1px solid transparent;
    box-sizing: border-box; */
}

.connect-form input::placeholder,
.connect-form textarea::placeholder {
    color: var(--third-color);

}

.connect-form input:focus,
.connect-form textarea:focus {
    outline: 2px solid var(--second-color);
    outline-offset: .5px;
    /* 去掉默认蓝色外框 */
    /* border: 1px solid var(--second-color); */
    /* 自定义边框 */
    /* box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); */
    /* 自定义发光效果 */
    background-color: var(--transparent-color-02);
    height: 100%;
}

.connect-form textarea {
    width: 100%;
    resize: none;
}

::placeholder {
    color: var(--first-color);
}

.connect-form .first-row input {
    width: 100%;
}

.connect-form .second-row {
    display: flex;
    justify-content: space-between;
}

.connect-form .second-row input {
    width: 48%;
}

.connect-form .btn {
    border: none;
    margin-top: 0;
    border-radius: 10px;
    cursor: pointer;
    align-items: flex-end;
    align-self: flex-start;
}

.connect-right .part-name,
.connect-left .part-name {
    width: 100%;
    color: var(--third-color);
    font-size: 1.2em;
    margin-bottom: 30px;
    text-align: left;

}

.connect-right span,
.connect-left span {
    color: var(--first-color);
    font-weight: 700;
}


/* Right Blog */
.connect-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

/* ****** blog list ****** */
.blog {
    width: 100%;
}

.blog-list {
    /* display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    max-width: 100%;
    gap: 20px;
    margin: 0 auto;
    padding: 0rem;
}

.blog-list .blog-card {
    position: relative;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: .3s ease;
}

.blog-list .blog-card:hover {
    border-bottom: 3px solid var(--second-color);
    transform: scale(1.05);
}

/* image */
.blog-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    position: relative;
}

.blog-card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.blog-card-image span {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: rgba(255, 255, 255, .8);
    color: var(--second-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .7em;
    font-weight: 600;
}

/* content */
.blog-card-content {

    width: 100%;
    height: auto;
    background-color: var(--card-bg-color);

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

    padding: 16px 26px 6px;
    gap: 0px;

}

.blog-card-content p {
    width: 100%;
    height: auto;
    color: var(--third-color);
    margin-bottom: 10px;
}

.blog-card-content :nth-child(2) {
    width: 100%;
    height: auto;
    font-size: .8rem;
    color: var(--third-color-transparent);

}

.blog-card-content :nth-child(3) {
    width: 100%;
    height: auto;
    width: 100%;
    font-size: 1rem;
    padding: 8px 0px;
}

/* btn */
.blog-card-btn {

    width: 100%;
    height: 60px;
    background-color: var(--card-bg-color);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.blog-card-btn :nth-child(2) {
    font-size: .8rem;
    color: var(--third-color);
}

/* Details */
.connect .container .details {
    width: 100%;
    text-align: center;
    font-size: 1.6rem;

    padding: 0rem 10rem;
    margin-bottom: 0rem;
    margin-top: -1.6em;
    color: var(--first-color);
}

.connect .container .details span {
    color: var(--second-color);
    font-weight: 700;
}

/* #endregion */


/* #region【 FOOTER 】*/
/* ================ Footer Section ================ */
footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--first-color);
    width: 100%;
    height: auto;
    padding: 3rem 16rem;
    color: #fff;
    padding-top: 4rem;
}

footer a {
    color: #fff;
}

/* top */
.footer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 26rem;
    /* max-width: 1150px; */
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    padding: 0 0 0rem;
    gap: 16rem;
}

.footer-logo {
    flex: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* background-color: pink; */
    gap: 2.5rem;
    overflow: hidden;
}


.footer-logo .logo-group {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

}

.footer-container .footer-logo .logo-group img {
    /* width: 50px; */
    width: 42px;
}


.footer-container .footer-logo .logo-group h2 {
    font-size: 3em;
    font-weight: 600;
    background: linear-gradient(to top, transparent 0%, #fff 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .8;
    line-height: 1;
    /* margin: 0 0 20px; */
    font-family: 'GoldMan', sans-serif !important;

}

.footer-container .footer-logo .contact-group {
    display: flex;
    flex-direction: column;
    align-self: start;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.footer-container .footer-logo .social-media-group {
    display: flex;
    align-self: flex-start;
    justify-content: center;
    gap: 10px;
}

.footer-container .footer-logo .social-media-group {
    display: flex;
    align-items: center;
    justify-content: center;

}

.footer-container .footer-logo .social-media-group a i {
    /* width: rem; */
}


/* others */
.footer-navi {
    height: 100%;
    flex: 3;
    display: flex;
    flex-direction: row;
    align-self: flex-end;
    justify-content: space-evenly;
    /* background-color: pink; */
    /* background-color: pink; */
}

.footer-navi-column {
    /* background-color: yellowgreen; */
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding-top: 5.1rem;
    gap: 3rem;
    /* background-color: yellowgreen; */
}

.footer-navi-column ul {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 2rem;
}

.footer-navi-column ul li a {
    color: var(--third-color);
}


/*  */
.footer-container .footer-logo p {
    font-size: var(--normal-font-size);
    font-weight: 300;
    margin-bottom: 0px;
}

.footer-copyright {
    width: 100%;
    height: 6rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 36px;
    /* background-color: pink; */
}

.footer-copyright p {
    /* height: 100%; */
    font-size: .9rem;
    font-weight: 300;
    /* margin-top: 50px; */
    /* display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; */
}

.footer-copyright .footer-policy {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

}

.footer-copyright .footer-policy a {
    font-size: .9rem;
    text-decoration-line: underline;
    text-decoration-color: rgba(255, 255, 255, .6);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* language */
.footer-language {
    width: 100%;
    text-align: end;
    font-size: .9rem;
}

.footer-language span {
    color: rgba(255, 255, 255, .6);
}

/* #endregion */

/* Responsive Area */
/* Header Style within 450px screen (Nomally for Mobile) */
@media screen and (max-width: 450px) {

    /* Reused Styles */

    .section-title-01 {
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 2rem;
        background: linear-gradient(to top, transparent 0%, var(--first-color) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: .1;
    }

    .section-title-02 {
        font-size: 2.0rem;
        font-weight: 700;
        transform: translateY(-75px);
    }

    /* #region【 Header 】*/
    /* ****************【 Header & Navigation 】**************** */
    .header.sticky .nav {
        height: 3.5rem;
    }

    .header .nav {
        width: 100%;
        padding: 0rem 1rem 0rem 1.5rem;
        height: 3.5rem;
    }

    .nav__data {
        width: 100%;
        height: 100%;
        justify-content: space-between;
    }

    .nav__logo img {
        /* width: 28px !important; */
        width: 24px !important;
    }

    .nav .nav__data .nav__logo {
        color: var(--first-color);
        /* font-size: 1.3rem; */
        font-size: 1.3rem !important;
        /* font-weight: var(--bold-font--weight); */

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-family: 'GoldMan', sans-serif !important;
    }


    /* nav__menu whole part */
    .nav__menu {
        background-color: hsl(220, 100%, 99%);
        /* background-color: var(--body-bg-color-dark); */
        position: absolute;
        left: 0;
        top: 2.5rem;
        width: 100%;
        height: calc(100vh - 3.5rem);
        overflow: auto;
        padding-block: 1.5rem 4rem;
        border-top: 1px solid var(--border--line);
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
        /* background-color: yellowgreen; */
        z-index: 400;
    }


    .nav__link i {
        margin-right: .2rem;
    }

    .header .nav .nav__menu ul li .dropdown__container .dropdown__gallery {
        display: block;
        width: 76%;
        height: auto !important;
        /* height: auto; */
        /* margin: 2rem; */
        margin: 1rem 0rem 2rem 2.4rem !important;
        /* box-shadow: var(--box-shadow); */
        border-radius: 10px !important;
    }

    .dropdown__gallery-content {
        width: 100%;
        height: 100%;
        border-radius: 10px !important;
        object-fit: cover;
    }

    .dropdown__gallery-content img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px !important;
    }

    .nav__menu::-webkit-scrollbar {
        /* width: .5rem; */
        display: none;
    }

    .nav__menu::-webkit-scrollbar-thumb {
        background-color: var(--bg-transparent-color);
    }

    .nav__login {
        display: none;
    }

    /* #endregion */


    /* #region【 Slide 】 */
    /* ****************【 Slider 】**************** */
    .slider {
        width: 100% !important;
        /* min-height: calc(var(--vh, 1vh) * 100); */
        min-height: calc(100svh - 3.5rem);
        overflow: hidden;
        overflow-x: hidden;
        position: relative;
        top: 3.5rem;
    }

    .slider .list .item .content {
        top: 40%;
        width: 100%;
        height: 70%;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: space-between;
        padding: 0 1.5rem;
        /* gap: 16px; */
    }

    .slider .list .item .content .title-group {
        width: 100%;
        height: 12rem;
        align-items: center;
        justify-content: flex-end;
        margin-top: 1rem;
        margin-bottom: 1.5rem;
        gap: 2rem;
    }

    .slider .list .item .content .title {
        display: none;
    }

    /* mobile title */
    .slider .list .item .content .title-2 {
        font-size: 3rem;
        font-weight: bold;
        line-height: 1.3em;
        margin-top: -2rem;
    }

    /* subtitle */
    .slider .list .item .content .type {
        font-size: 1.6rem;
        width: 100%;
        text-align: center;

    }

    /*  */
    .slider .list .item .content .description {
        /* display: none; */
        width: 100%;
        text-align: left;
        padding: 20px 25px;
    }

    /* animation */
    .slider .list .item:nth-child(1) .content .title-group .title-2,
    .slider .list .item:nth-child(1) .content .title-group .type,
    .slider .list .item:nth-child(1) .content .description,
    .slider .list .item:nth-child(1) .content .button {
        transform: translateY(50px);
        filter: blur(20px);
        opacity: 0;
        animation: showContent 0.5s 1s linear 1 forwards;
    }

    @keyframes showContent {
        to {
            transform: translateY(0px);
            filter: blur(00px);
            opacity: 1;
        }
    }

    .slider .list .item:nth-child(1) .content .title-group .title-2 {
        animation-delay: 0.2s;
    }

    .slider .list .item:nth-child(1) .content .title-group .type {
        animation-delay: 0.4s;
    }

    .slider .list .item:nth-child(1) .content .description {
        animation-delay: 0.6s;
    }

    .slider .list .item:nth-child(1) .content button {
        animation-delay: 0.8s;
    }

    /* thumbnail */
    .thumbnail {
        width: 100%;
        margin-right: 0;
    }

    .thumbnail .item {
        padding: 0;
        display: none;
    }

    .thumbnail .nextPrevArrows {
        right: 0;
        width: 100%;
        padding: 0 4px;
    }

    /* next */
    .slider.next .list .item:nth-child(1) img {
        width: 100%;
        height: 100%;

        position: absolute;
        left: 100%;
        top: 0;

        border-radius: 30px;
        animation: showImage 0.3s linear 1 forwards;
    }

    @keyframes showImage {
        to {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 0;
        }
    }

    /* prev */
    .slider.prev .list .item:nth-child(2) {
        z-index: 2;
        width: 100%;
        height: 100%;
        display: none !important;
    }

    .slider.prev .list .item:nth-child(1) img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: -100%;
        animation: showImageMobile 0.3s linear 1 backwards;
        z-index: 3;
    }

    @keyframes showImageMobile {
        to {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-radius: 20px;
        }
    }

    /* #endregion */


    /* #region【 Solutions 】 */
    /* ****************【 Solutions 】**************** */
    .solution {
        width: 100%;
        height: auto;
        padding: 6rem 1.5rem 3rem;
        overflow-x: hidden;
        overflow: hidden;
    }

    .solution .container .details {
        width: 100%;
        padding: 0rem 2.2rem;
        font-size: 1.2rem;
        margin-top: -3rem;
    }

    .solution .container .content {
        margin-top: 3rem;
        /* overflow: hidden; */
    }

    .solution-list {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .solution-container {
        height: 30rem;
    }

    .solution-card {
        gap: 0;
    }

    /* Up */
    .solution-card-image {
        width: 100%;
        height: 15rem;
    }

    .solution-card-image img {
        width: 100%;
        height: 15rem;
    }

    /* Down */
    .solution-card-content {
        width: 100%;
        height: 15rem;
        /* padding: .8rem 1rem 1rem; */

    }

    /* .solution-card-content-title h3 {
        font-size: 1rem;
        font-weight: 700;
        line-height: 30px;
    } */

    /* .solution-card-content-title span {
        font-size: .6rem;
    } */


    /* #endregion */


    /* #region【 Product 】*/
    .product {
        width: 100% !important;
        height: auto;
        padding: 3rem 1.5rem !important;
        overflow-x: hidden !important;
        overflow: hidden !important;
    }

    .product .container .details {
        width: 100%;
        padding: 0rem 2.2rem;
        font-size: 1.2rem;
        margin-top: -3rem;
    }

    .product .slider-myotion {
        width: 100%;
        height: 32rem;
    }

    .product .slider-myotion .item {
        width: 100%;
        padding: 0;
    }

    /* up */
    .product .slider-myotion .item .product-wrap {
        width: 100%;
        height: 100%;
    }

    .product .slider-myotion .item video {

        height: 15rem;
        width: 100%;
        top: 100%;
        object-fit: cover;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .product .slider-myotion .item .product-wrap .overlay {
        display: none;
    }

    .product .slider-myotion .item .product-wrap .info {
        position: relative;
        height: 10rem;
        width: 100%;
        opacity: 1;
        transform: translateY(0px);
        bottom: 0px;
        left: 0px;
        padding: 2rem 2rem;
        text-align: left !important;
    }

    .product .slider-myotion .item .product-wrap .info h1 {
        color: var(--first-color);
        font-size: 1.5rem;
        margin-bottom: 6px;
    }

    .product .slider-myotion .item .product-wrap .info span {
        width: 60% !important;
        text-align: left !important;
        font-size: var(--normal-font-size);
        /* margin-bottom: 1.2rem; */
        color: var(--third-color);

    }

    /* down */
    .product-merit {
        padding: 2rem 2rem 2rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /* background-color: pink; */
    }

    .product-merit .item-left {
        display: none !important;
    }

    #next-myotion,
    #prev-myotion {
        width: 40px !important;
        height: 40px !important;

        /* 🔥 这些是关键：不让 padding 把形状撑成椭圆 */
        padding: 0 !important;
        border: 0 !important;
        min-width: 40px !important;
        min-height: 40px !important;
        box-sizing: border-box !important;

        /* 🔥 防止在 flex 里被拉伸/压缩 */
        flex: 0 0 40px !important;

        /* 🔥 让内部图标不影响高度 */
        line-height: 0 !important;

        border-radius: 50% !important;

        display: grid;
        place-items: center;
    }

    #next-myotion {
        transform: translateX(50%);
    }

    #prev-myotion {
        transform: translateX(-50%);
    }

    /* #endregion */


    /* #region【 Developer 】*/
    .developer {
        width: 100% !important;
        height: auto;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow: hidden !important;
    }

    .developer .container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
    }

    /* up developer */
    .developer-left {
        width: 100%;
        height: max-content;
        padding: 0;
        padding: 3rem 1.5rem !important;
    }

    .developer-left .title-group h1 {
        width: 100%;
        font-size: 2rem;
        text-align: center;
        text-decoration: none;
        line-height: 1.5;
    }

    .developer-left .title-group span {
        color: var(--second-color)
    }

    .developer-left .title-group p {
        width: 100%;
        font-size: 1.2rem;
        text-align: center;
    }

    .developer-card {
        width: 100%;
        height: 15.5rem;
        overflow: hidden;
    }

    .developer-card .content-title .content-title-main {
        font-size: 1.2rem;
    }

    .developer-card .content-title p {
        width: 100%;
        font-size: .8rem;
        line-height: 1.8;
        margin-top: 10px;
    }

    .developer-card .content-list ul li {
        width: 100%;
        font-size: .8rem;
        line-height: 1.3;
        margin-left: 8px;
    }

    .developer-left .btn-group a {
        width: 100%;
        text-align: center;
    }

    /* down price card */
    .developer-right {
        width: 100%;
        padding: 0;
        height: 35rem;
        padding: 1rem 1.5rem 3rem !important;
        /* background-color: pink; */
    }

    .developer-price {
        width: 100%;
        height: 100%;
    }

    .developer-price:hover {
        transform: scale(1);
    }

    /* #endregion */


    /* #region【 About 】*/
    .about {
        width: 100% !important;
        height: auto;
        padding: 3rem 0rem !important;
        overflow-x: hidden !important;
        overflow: hidden !important;
    }

    .about .container .details {
        width: 100%;
        padding: 0rem 2.2rem;
        font-size: 1.2rem;
        margin-top: -3rem;
    }

    /* card wrap */
    .about .company-wrap .company {
        width: 100%;
        height: 34rem;
        margin-top: 3rem;
        /* padding:0rem 1.5rem !important; */
        /* outline: 1px solid red;
        background-color: olivedrab; */
        overflow: visible;
    }

    /* card */
    .about .container .company .about-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 0rem 1.5rem;
        gap: 1rem;

    }

    /* left */
    .about-image {
        width: 100%;
        height: 15rem;
    }

    .about-image .overlay {
        display: block;
        z-index: 999;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
    }

    .about-image .info {
        opacity: 1;
        transform: translateY(0);
        bottom: 20px;
        left: 20px;
        /* padding: 4px;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, .6);
        backdrop-filter: blur(20); */
    }

    .about-image .info h1 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .about-image .info p {
        font-size: .6rem !important;
    }

    /* right */
    .about-info {
        width: 100%;
        height: 18rem;

        padding: 1rem .5rem;
    }

    .about-info .description h1 {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .about-info .description h4 {
        font-size: .8rem;
        margin-bottom: 4px;
    }

    .about-info .description p {
        font-size: .6rem;
        padding: 6px 16px;
    }

    .about-content .about-info .professional-list span {
        font-size: .8rem;
    }

    .about-content .about-info .professional-list h4 {
        font-size: .6rem;
    }

    /* special */
    .info-left-content {
        width: 50%;
        height: 100%;
        font-size: .6rem;
        color: var(--third-color);
    }

    .info-right-list {
        width: 50%;
        height: 100%;
        font-size: .6rem;
        color: var(--third-color);
    }

    .info-right-list p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: .6rem !important;
        text-decoration: none;
        border-bottom: none !important;
    }

    .info-right-list span {
        font-size: .4rem !important;
        color: var(--second-color);
        font-weight: 600;
    }

    .about-content.about-card-3 .about-info .description p span {
        font-size: .4rem;
    }

    .about-content.about-card-4 .about-info .description p span {

        font-size: .4rem;

    }

    .about-content.about-card-6 .about-info .description p span {

        font-size: .4rem;

    }

    /* btn */
    .about-content .about-info .btn {
        /* margin-top: 10px; */
        font-size: .8rem;
        padding: 9px 25px;
        border-radius: 6px;
        font-size: .6rem;
    }

    /* arrow */
    #next-company,
    #prev-company {
        width: 40px !important;
        height: 40px !important;

        /* 🔥 这些是关键：不让 padding 把形状撑成椭圆 */
        padding: 0 !important;
        border: 0 !important;
        min-width: 40px !important;
        min-height: 40px !important;
        box-sizing: border-box !important;

        /* 🔥 防止在 flex 里被拉伸/压缩 */
        flex: 0 0 40px !important;

        /* 🔥 让内部图标不影响高度 */
        line-height: 0 !important;

        border-radius: 50% !important;

        display: grid;
        place-items: center;
        /* left: 0 !important; */
        left: 0;
    }

    #next-company {
        /* left: unset;
        right: 0rem;
        transform: translateX(50%); */
        left: unset;
        right: 1.5rem;
        transform: translateX(50%);
        margin-bottom: 3rem;
    }

    #prev-company {
        /* right: 0 !important;
        transform: translateX(-50%); */
        left: 1.5rem;
        transform: translateX(-50%);
        margin-bottom: 3rem;
    }



    /* #endregion */


    /* #region【 Carousel 】*/
    .about .carousel-wrap {
        padding: 4rem 1.5rem 0rem;
    }

    .carousel {
        justify-content: space-between;
        gap: 1rem;
        padding: 2rem 0rem 2rem !important;
    }

    .carousel__card {
        width: 140px;
        margin-inline: .5rem;
    }

    /* #endregion */


    /* #region【 Connect 】*/
    .connect {
        width: 100% !important;
        height: auto;
        padding: 3rem 1.5rem !important;
        overflow-x: hidden !important;
        overflow: hidden !important;
    }

    .connect .container .details {
        width: 100%;
        padding: 0rem 2.2rem;
        font-size: 1.2rem;
        margin-top: -3rem;
    }

    .connect .container .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .connect-right {
        display: none;
    }

    .blog-list :nth-child(2) {
        display: none;
    }

    .blog-list :nth-child(1) {
        width: 100%;
    }

    .blog-list .blog-card {
        width: 100%;
        height: 33rem;
    }

    .blog-card-content {
        height: 16rem;
    }

    /* #endregion */


    /* #region【 Footer 】*/
    footer {
        padding: 3rem 1.5rem;
        overflow: hidden;
        overflow-x: hidden;
    }

    .footer-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 3rem;
        overflow: hidden;
    }

    .footer-container .footer-logo .logo-group img {
        width: 35px;
    }

    .footer-container .footer-logo .logo-group h2 {
        font-size: 2rem;
    }

    .footer-container .footer-logo p {
        font-size: .9rem;
    }

    .footer-container .footer-logo .contact-group a {
        font-size: .9rem;
        margin-top: 0rem;
    }

    .footer-container .footer-logo .social-media-group a {
        transform: scale(0.8);
        margin-top: 0rem;
    }

    .footer-navi {
        width: 100%;
        height: 100%;

        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-navi-column {
        align-items: flex-start;
        text-align: left;
        padding-top: 0rem;
        gap: 1.5rem;
    }

    .footer-navi-column h3 {
        font-size: .9rem;
    }

    .footer-navi-column ul {
        text-align: left;
        align-items: flex-start;
        gap: 1rem;
        padding-bottom: 1rem;
    }

    .footer-navi-column ul li {
        text-align: left;
    }

    .footer-navi-column ul li a {
        font-size: .7rem;
        text-align: left;
    }

    .footer-copyright {
        gap: 1rem;
        padding-top: 2rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .footer-copyright p {
        font-size: .6rem;
    }

    .footer-copyright .footer-policy {
        gap: .6rem;
    }

    .footer-copyright .footer-policy a {
        font-size: .6rem;
    }

    .footer-language {
        font-size: .6rem;
        text-align: start;
    }

}

/* Responsive Area */
/* Header Style within 1118px screen */
@media screen and (450px <=max-width <=1118px) {

    header.sticky {
        /* backdrop-filter: blur(20px); */
        background-color: rgba(255, 255, 255, 0.5);
        box-shadow: var(--box-shadow);
    }

    /* Reused */
    /* Section Title */
    .section-title-01 {
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 2rem;
        background: linear-gradient(to top, transparent 0%, var(--first-color) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: .1;
    }

    .section-title-02 {
        font-size: 2.0rem;
        font-weight: 700;
        transform: translateY(-75px);
    }

    /* #region【 Header 】*/
    /* ****************【 Header & Navigation 】**************** */
    .header .nav {
        width: 100%;
        padding: 0rem 1rem 0rem 1.5rem;
        height: 3.5rem;
    }

    .nav__data {
        width: 100%;
        height: 100%;
        justify-content: space-between;
    }

    .nav__logo img {
        width: 28px !important;
    }

    /* nav__menu whole part */
    .nav__menu {
        background-color: hsl(220, 100%, 99%);
        /* background-color: var(--body-bg-color-dark); */
        position: absolute;
        left: 0;
        top: 2.5rem;
        width: 100%;
        height: calc(100vh - 3.5rem);
        overflow: auto;
        padding-block: 1.5rem 4rem;
        border-top: 1px solid var(--border--line);
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
        /* background-color: yellowgreen; */
        z-index: 400;
    }


    .nav__link i {
        margin-right: .2rem;
    }

    .header .nav .nav__menu ul li .dropdown__container .dropdown__gallery {
        display: block;
        width: 76%;
        height: auto !important;
        /* height: auto; */
        /* margin: 2rem; */
        margin: 1rem 0rem 2rem 2.4rem !important;
        /* box-shadow: var(--box-shadow); */
        border-radius: 10px !important;
    }

    .dropdown__gallery-content {
        width: 100%;
        height: 100%;
        border-radius: 10px !important;
        object-fit: cover;
    }

    .dropdown__gallery-content img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px !important;
    }

    .nav__menu::-webkit-scrollbar {
        /* width: .5rem; */
        display: none;
    }

    .nav__menu::-webkit-scrollbar-thumb {
        background-color: var(--bg-transparent-color);
    }

    .nav__login {
        display: none;
    }

    /* #endregion */


    /* #region【 Login 】*/
    /* ****************【 Login & Signup 】**************** */
    .nav__login-mobile {
        display: block;
        position: fixed;
        bottom: -86vh;
        /* transform: translateY(2rem); */
        right: 1.5rem;
        /* width: 100%; */
        background-color: var(--second-color);
        padding: 8px 11px;
        border-radius: 6px;
        z-index: 200;
    }

    .nav__login-mobile a i {
        color: #fff;
        font-weight: 600;
        font-size: 1.1rem;
    }

    /* switch mode */
    .login-modal {
        width: 100%;
        padding: 2rem 0rem;
        z-index: 9999999999;
    }

    .login-modal .login-modal-body {
        /* margin: 20px; */
        /* height: calc(100vh - 10.5rem); */
        width: 100%;
        height: 96vh;
        z-index: 9999999999;
    }

    .user-form {
        /* background-color: purple; */
        bottom: 0;
        width: 100%;
        height: 70%;
    }

    .login-modal-body.active .user-form {
        right: 0;
        bottom: 30%;
    }

    /* toggle */
    .user-toggle::before {
        width: 100%;
        height: 300%;
        left: 0;
        top: -270%;
    }

    .login-modal-body.active .user-toggle::before {
        left: 0;
        top: 70%;
    }

    .toggle-panel {
        /* border: 2px solid red; */
        width: 100%;
        height: 30%;
    }

    .toggle-panel.toggle-left {
        top: 0;
    }

    .login-modal-body.active .toggle-panel.toggle-left {
        left: 0;
        top: -30%;
    }

    .toggle-panel.toggle-right {
        right: 0;
        bottom: -30%;
    }

    .login-modal-body.active .toggle-panel.toggle-right {
        bottom: 0;
    }

    /* text processing */
    .login-modal-body .login-form form .right-policy {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        height: auto;
        position: relative;
        gap: 4px;
    }

    .login-modal-body .login-form form .right-policy p {
        margin: 0;
    }

    .user-form form {
        padding: 10px 0;
    }

    .toggle-panel.toggle-left,
    .toggle-panel.toggle-right {
        padding: 20px 55px;
    }

    .toggle-panel .toggle-content {
        padding: 4px 0;
    }

    .toggle-panel .toggle-content h1 {
        font-size: 1rem;
        margin: 4px;
    }

    .toggle-panel .toggle-content p {
        font-size: .7rem;
        margin: 4px;
    }

    .toggle-panel.toggle-left .toggle-switch,
    .toggle-panel.toggle-right .toggle-switch {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .toggle-panel .toggle-switch p {
        margin-bottom: 0;
        font-size: .9rem;
    }

    .toggle-panel .toggle-switch button {
        z-index: 200;
        height: 40px;
    }

    /* #endregion */


    /* #region【 Slide 】 */
    /* ****************【 Slider 】**************** */
    .slider {
        width: 100% !important;
        height: calc(100vh - 3.5rem);
        overflow: hidden;
        overflow-x: hidden;
        position: relative;
        top: 3.5rem;
    }

    .slider .list .item .content {
        top: 40%;
        width: 100%;
        height: 70%;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: space-between;
        padding: 0 1.5rem;
        /* gap: 16px; */

    }

    .slider .list .item .content .title {
        font-size: 3rem;
    }

    .slider .list .item .content .type {
        font-size: 1.6rem;
        width: 100%;
        text-align: center;
    }

    .slider .list .item .content .description {
        /* display: none; */
        width: 100%;
        text-align: center;
    }

    /* thumbnail */
    .thumbnail .item {
        padding: 0;
        display: none;
    }

    .thumbnail .nextPrevArrows {
        right: 0;
        gap: 78%;
        width: 100%;
    }

    /* #endregion */


    /* #region【 Solutions 】 */
    /* ****************【 Solutions 】**************** */
    .solution {
        /* background-color: pink; */
        width: 100%;
        height: auto;
        /* top: 4.5rem; */
        padding: 6rem 1.5rem;
        overflow-x: hidden;
        overflow: hidden;
    }

    .solution .container .details {
        width: 100%;
        padding: 0rem 2.2rem;
        font-size: 1.2rem;
        margin-top: -3rem;
    }

    .solution .container .content {
        margin-top: 3rem;
    }

    .solution-list {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(225px, 1fr));
        gap: 20px;
    }

    .solution-container {
        height: 60vh;
    }

    /* #endregion */


    /* #region【 Product 】*/
    /* ****************【 Product 】**************** */
    .product {
        width: 100%;
        height: auto;
        padding: 3rem 1.5rem;
        overflow-x: hidden;
        overflow: hidden;
    }

    .product .container .details {
        width: 100%;
        padding: 0rem 2.2rem;
        font-size: 1.2rem;
        margin-top: -3rem;
    }

    .product .slider-myotion {
        position: relative;
        width: 100%;
        /* display: grid;
        grid-template-columns: 1fr;
        gap: 20px; */
    }

    .product .slider-myotion .item {

        position: relative;
        width: 100%;
    }

    /* #endregion */


    /* #region【 Developer 】*/
    /* ****************【 Developer 】**************** */
    .developer {
        width: 100%;
        height: max-content !important;
        /* padding: 3rem 1.5rem; */
        overflow-x: hidden;
        overflow: hidden;
    }

    .developer .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    /* left */
    .developer-left {
        width: 100%;
        padding: 2rem 1.5rem;
    }

    .developer-left .title-group h1 {
        font-size: 3rem;
        line-height: 1.2;
    }

    .developer-left .title-group p {

        line-height: 1.6;
    }

    .developer-left .content-group {
        gap: 2rem;
        width: 100%;
        height: max-content;

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

    .developer-left .content-group .developer-card {
        flex: 1;
        width: 100%;

    }

    .developer-left .content-group .developer-card .content-title {

        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        font-size: 1.2rem;
        gap: 10px;
    }

    .developer-left .content-group .developer-card .content-list ul li {
        color: #fff;
        list-style: initial !important;
        margin-bottom: 8px !important;
    }

    .developer-left .content-group .developer-card p {
        /* color: var(--third-color); */
        margin: 1rem 0 0 0;
    }


    .developer-left .btn-group {
        width: 100%;
        margin-bottom: 3rem;
        text-align: center;
        justify-content: center;

    }

    .developer-left .btn-group a {
        width: 100%;
    }

    /* right */
    .developer-right {
        width: 100%;
        height: 74vh;
        padding: 0rem 1.5rem 2.5rem;
        align-items: center;
        justify-content: flex-start;
    }

    .developer-price {
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, .6);
    }

    /* #endregion */


    /* #region【 About 】*/
    /* ****************【 About 】**************** */
    .about {
        width: 100%;
        height: auto !important;
        /* padding: 3rem 1.5rem; */
        overflow-x: hidden;
        overflow-y: visible;
        /* display: none !important; */
    }

    .about .container .details {
        width: 100%;
        padding: 0rem 2.2rem;
        font-size: 1.2rem;
        margin-top: -3rem;
    }


    /* company */
    #next-company,
    #prev-company {
        left: 1rem;
    }

    #next-company {
        left: unset;
        right: 1rem;
    }

    .about .container .company {
        overflow: visible;
        padding: 2rem 0;
        border: none;
    }

    /* compmay card */
    .about .container .company .about-content {

        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        /* background-color: pink; */
        padding: 0rem 1.5rem;
        margin-top: 4rem;
        gap: 0rem;
    }

    /* left */
    .about-image {
        width: 100%;
        height: 18rem;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .about-image img {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        width: 100%;
        height: 18rem;
        object-fit: cover;
    }

    .about-image:hover .overlay {
        display: none;
    }

    .about-image:focuss .overlay {
        display: none;
    }

    .about-image .info h1 {
        font-size: 1rem;
        margin-bottom: 0rem;
        width: 80%;
        margin-bottom: 1rem;
    }

    .about-image .info span {
        font-size: .7rem;
    }

    .about-image .info {
        height: 100%;
        width: 100%;
        background-color: var(--card-bg-color);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        box-shadow: var(--box-shadow);
        z-index: 999;
        left: 0;
        bottom: -100%;
        padding: 2rem;
    }

    .about-image .info h1,
    .about-image .info p {
        color: var(--first-color);
    }

    /* right */
    .about-info {

        width: 100%;
        height: auto;
        display: none;
    }

    .about-info .description p {}

    /* #endregion */

}

/* 1366 1024 [ipad]*/
/* Header Style more than 1118px screen */
@media screen and (min-width: 1119px) {

    /* #region【 Header & Navigatoin 】*/
    /* Nav Container */
    .nav {
        padding: 0 4rem;

    }

    .nav.container {
        /* height: calc(var(--header-height) + 2rem); */
        height: 4.5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    /* Nav Toggle */
    .nav__toggle {
        display: none;
    }

    /* Menu and Mega */
    .nav__list {
        display: flex;
        /* grid-template-columns: repeat(5, minmax(0,1fr)); */
        /* text-align: center; */
        column-gap: 1.2rem;
        height: 100%;

    }

    .nav li {
        /* width: auto; */
        display: flex;
    }

    .nav__link {
        padding: 0;
    }

    .nav__link:hover {
        background-color: initial;
    }

    /* ② Menu and Mega Group */
    .nav__menu {
        height: 100%;
    }

    .dropdown_item {
        height: 100%;
    }

    .dropdown__button {
        column-gap: .25rem;
        pointer-events: none;
    }

    /* dropdown mega menu */
    .dropdown__container {
        height: max-content;
        position: absolute;
        left: 0;
        right: 0;
        /* top: 6.5rem; */
        top: 5.5rem;
        /* background-color: hsl(220, 100%, 99%); */
        background-color: var(--body-bg-color);
        box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;

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

        border-top: 1px solid var(--border--line);

        padding: 0 16rem;
    }

    /* gallery items */
    .dropdown__gallery {
        /* padding-right: 16rem; */
        flex: 1;
        height: 100%;
        /* padding-right: 17rem; */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .dropdown__gallery-content {
        width: 520px;
        height: 260px;
        border-radius: 10px;
        overflow: hidden;
    }

    .dropdown__gallery-content img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* column items */
    .dropdown__content {
        flex: 1;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        /* max-width: 1120px; */
        margin-inline: auto;
        /* padding-left: 16rem; */
        /* border-top: 1px solid var(--border--line); */
    }

    .dropdown__group {
        padding: 4rem 0;
        align-content: baseline;
        row-gap: 1.25rem;
        /* display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; */
    }

    .dropdown__group:first-child,
    .dropdown__group:last-child {
        margin: 0;
    }

    .dropdown__list {
        row-gap: .75rem;
    }

    .dropdown__icon {
        width: 46px;
        height: 46px;
        /* background-color: #e6eef9; */
        background-color: var(--transparent-color-02);
        border-radius: 50%;
        display: grid;
        place-items: center;
        margin-bottom: 1rem;
    }

    .dropdown__icon i {
        font-size: 1.6rem;
        font-weight: 560;
    }

    .dropdown__title {
        font-size: var(--normal-font-size);

    }

    .dropdown__link {
        font-size: var(--small-font-size);
    }

    .dropdown__link:hover {
        color: var(--second-color);
    }

    .nav__link:hover {
        color: var(--second-color) !important;
    }

    .dropdown_item:hover .dropdown__arrow {
        transform: rotate(180deg);
    }

    .dropdown_item:hover>.dropdown__container {
        top: 4.5rem;
        opacity: 1;
        pointer-events: initial;
        cursor: initial;
    }

    /* #endregion【 Header & Navigation 】*/


    /* #region【 Slide 】 */
    /* ****************【 Slider 】**************** */
    .slider .list .item .content .title {
        display: block;
    }

    /* mobile title */
    .slider .list .item .content .title-2 {
        display: none;
    }

    /* #endregion */


    /* #region【 Solutions 】*/
    .solution {
        padding: 8rem 4rem 4rem;
    }

    .solution-container {
        max-width: 100%;
        height: 26rem;
        border-radius: var(--normal-border-radius);
    }

    /* Up */
    .solution-card-image {
        height: 13rem;
    }

    .solution-card-image img {
        height: 13rem;
    }

    /* Down */
    .solution-card-content {
        padding: .8rem 1rem 1rem;

    }

    .solution-card-content-title h3 {
        font-size: 1rem;
        font-weight: 700;
        line-height: 30px;
    }

    .solution-card-content-title span {
        font-size: .6rem;
    }

    /* description */
    .solution-card-content-title-description p {

        color: var(--third-color);
        font-size: .8rem;
        font-weight: var(--light-font-weight);

    }

    /* button */
    .solution-card-content .explore-btn a {
        font-size: .8rem;
    }


    /* #endregion */

    /* product */
    .product .slider-myotion .item .product-wrap .overlay {
        top: 0;
        left: 0;
    }

}


/* 1666 */
@media screen and (min-width: 1666px) {

    /* #region【 Header & Navigaiton 】*/
    /* Menu and Mega */
    .nav {
        padding: 0 16rem;
    }

    .nav__list {
        display: flex;
        /* grid-template-columns: repeat(5, minmax(0,1fr)); */
        /* text-align: center; */
        column-gap: 3rem;
        height: 100%;

    }

    /* #region【 Solutions 】*/
    .solution {
        padding: 8rem 16rem 4rem;
    }

    /* #endregion【 Header & Navigation 】*/


    /* #region【 Solutions 】*/
    .solution {
        padding: 8rem 16rem 4rem;
    }

    .solution-container {

        height: 31rem;
    }


    /* Up */
    .solution-card-image {
        height: 15rem;
    }

    .solution-card-image img {
        height: 15rem;
    }

    /* Down */
    .solution-card-content {
        padding: 2rem 2rem;
    }

    .solution-card-content-title h3 {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 30px;
    }

    .solution-card-content-title span {
        font-size: .8rem;
    }

    /* description */
    .solution-card-content-title-description p {

        color: var(--third-color);
        font: var(--normal-font-size);
        font-weight: var(--light-font-weight);

    }

    /* button */
    .solution-card-content .explore-btn a {
        font-size: 1rem;
    }


    /* #endregion */

}

/*  */
@media screen and (max-width: 300px) {

    .dropdown__group {
        padding-left: 1.5rem;
    }
}

/* ================ Resonsive Screen Setting ================ */
/* @media screen and (max-width: 1070px) {

    .navigation {
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--transparent-color-01);

        visibility: hidden;
        opacity: 0;
        transition: .3s ease;
    }

    .navigation.active {
        visibility: visible;
        opacity: 1;
    }

    .nav-items {
        position: relative;
        background: var(--modal-bg-color);
        width: 600px;
        max-width: 600px;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 20px;
        padding: 40px;
        border-radius: 10px;
        box-shadow: var(--box-shadow);
        transform: translateY(-50px);
        transition: .3s ease;
    }

    .navigation.active .nav-items {
        transform: translateY(0);
    }

    .nav-items a {
        margin: 15px 50px;
    }

    .nav-close-btn {
        position: absolute;
        background: url(/assets/nav_bar_close_icon.svg)no-repeat;
        filter: var(--color-filter);
        font-size: 12px;
        background-position: center;
        width: 40px;
        height: 40px;
        top: 0;
        right: 0;
        margin: 10px;
        cursor: pointer;
    }

    .nav-menu-btn {
        background: url(/assets/nav_bar_icon_1.svg)no-repeat;
        filter: var(--color-filter);
        background-size: 30px;
        background-position: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
        display: block;
    }

    .home .home-container .info {
        font-size: 0.85rem;
    }

    .about .container .content {
        display: grid;
        width: 100%;
        row-gap: 20px;
    }

    .about-img img {
        min-width: 0;
        width: 100%;
    }

    .about-info {
        min-width: 0;
        width: 100%;
    }

    .about-info .professional-list {
        flex-direction: column;
    }

    .about-info .professional-list .list-item {
        justify-content: start;
    }

    .get-in-touch .contact-card {
        display: grid;
        width: 100%;
    }

    .contact-card .title {
        font-size: 0.8rem;
        line-height: 50px;
    }

    .contact .content {
        flex-direction: column;
        font-size: 0.9rem;
    }

    .contact .contact-left {
        margin-bottom: 40px;
    }

    .contact-form .second-row {
        flex-direction: column;
    }

    .contact-form .second-row input {
        width: 100%;
    }

    footer .footer-container {
        flex-direction: column;
    }

    .footer-container .about,
    .footer-container .info {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 50px;
    }

    .footer-container .info ul {
        align-items: center;
        flex-direction: column;
    }

    .footer-container .info ul li {
        margin: 5px 0;
    }

    .footer-container .hr {
        width: 100%;
        height: 2px;
        background: rgba(255, 255, 255, 0.1);
        margin: 10px 0 22px;
    }
} */

/* @media screen and (max-width: 730px) {

    body {
        margin: 5rem 0 0 0;
    }

    .section-title-01 {
        font-size: 3em;
    }

    .section-title-02 {
        font-size: 2em;
        transform: translateY(-65px);
    }

    .home .home-container {
        display: grid;
    }

    .home-container .home-img {
        position: absolute;
    }

    .home-container .home-img img {
        width: 65%;
        transform: translate(80px, -180px);
    }

    .home .home-container .info {
        font-size: 0.8rem;
    }

    .media-icons {
        margin-bottom: 80px;
    }

    .get-in-touch .contact-card {
        display: grid;
    }

    .contact-card .title {
        font-size: 0.6rem;
        line-height: 40px;
    }

    .contact-card .contact-btn .btn {
        font-size: 0.8rem;
    }
} */