@font-face {
    font-family: 'OPPOSans';
    src: url('../fonts/opposans/OPPOSansLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OPPOSans';
    src: url('../fonts/opposans/OPPOSansBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 400; /* Regular */
}

:root {
    --main-color: #02A4B8;
    --sub-color: #FFE180;
    --red-color: red;
    --facebook-cl: rgb(59, 89, 152);
    --twitter-cl: rgb(29, 161, 242);
    --instagram-cl: rgb(224, 53, 102);
    --dribbble-cl: rgb(234, 76, 137);
    --linkedin-cl: rgb(0, 119, 181);
    --pinterest-cl: rgb(203, 32, 39);
    --tumblr-cl: rgb(55, 69, 92);
    --snapchat-cl: rgb(255, 221, 0);
    --youtube-cl: rgb(205, 32, 31);
    --vimeo-cl: rgb(26, 183, 234);
    --behance-cl: rgb(23, 106, 255);
    --soundcloud-cl: rgb(255, 119, 0);
    --tiktok-cl: #fe2c55;
    --email-cl: rgb(219, 68, 55);
    --telegram-cl: rgb(0, 136, 204)
}

[type=checkbox],
[type=radio] {
    color: var(--main-color)
}

[type=checkbox]:focus,
[type=radio]:focus {
    outline: 2px solid rgba(0, 0, 0, 0);
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty, );
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: var(--main-color);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    outline: none;
    box-shadow: none
}

.container {
    position: relative
}

.btn {
    border-radius: 0
}

.btn:focus {
    box-shadow: none;
    outline: 0
}

.btn:hover {
    text-decoration: none
}

.form-select,
.form-control {
    border-radius: 0
}

.form-select:focus,
.form-select:hover,
.form-control:focus,
.form-control:hover {
    box-shadow: none;
    background-color: #fff;
    border-color: var(--main-color);
    outline: 0;
    color: #333
}

a {
    transition: all .3s ease
}

img {
    width: 100%;
    height: auto;
    transition: all .3s ease-in-out
}

*:hover>img.scale {
    transform: scale(1.1, 1.1)
}

.aspect-ratio-1-1 {
    aspect-ratio: auto 1/1 !important
}

.aspect-ratio-5-4 {
    aspect-ratio: auto 5/4 !important
}

.aspect-ratio-5-3 {
    aspect-ratio: auto 5/3 !important
}

.aspect-ratio-5-2 {
    aspect-ratio: auto 5/2 !important
}

.aspect-ratio-10-3 {
    aspect-ratio: auto 10/3 !important
}

.aspect-ratio-4-3 {
    aspect-ratio: auto 4/3 !important
}

.aspect-ratio-3-2 {
    aspect-ratio: auto 3/2 !important
}

.aspect-ratio-2-3 {
    aspect-ratio: auto 2/3 !important
}

.aspect-ratio-3-4 {
    aspect-ratio: auto 3/4 !important
}

.aspect-ratio-4-5 {
    aspect-ratio: auto 4/5 !important
}

.aspect-ratio-16-9 {
    aspect-ratio: auto 16/9 !important
}

.aspect-ratio-9-19 {
    aspect-ratio: auto 9/19 !important
}

footer {
    position: relative;
    background-image: url('../img/footer-bg.png');
    background-size: cover;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 31, 37, 0.88); /* 黑色，50% 透明度 */
}

footer .hr-divider {
    position: relative;
    padding: 0px 2%;
}
footer .hr-divider .hr {
    height: 1px;
    background-color: #a9a9a9;
}

.footer-nav {
    display: flex;
    flex-direction: column;
}

.footer-nav ul.menu{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media(min-width: 1200px) {
    .footer-nav ul.menu li:first-child{
        display: flex;
        flex-direction: column;
        gap: .6rem;
        align-items: center;
        margin-bottom: 50px;
    }
    .footer-nav ul.menu li:first-child span.title{
        font-size:1.6rem;
        color: white;
    }
    .footer-nav ul.menu li:first-child span.sub{
        font-size: .9rem;
        color: var(--main-color);
    }
}

.footer-nav .contact{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    color: white;
    gap: 1.5rem;
}
.footer-nav .contact .info{
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: 'OPPOSans', sans-serif;
    font-weight: bold;
    flex-direction: column;
    font-size: 1.3rem;
}
.footer-nav .contact .info .phone{
    font-size: 2rem;
}
.footer-nav .contact .button{
    width: 216px;
    text-align: center;
    font-size: 18px;
    border: 2px solid;
    padding: 12px;
    border-radius: 50px;
    cursor: pointer;
}
.footer-nav .contact .button.yy{
    background: white;
    color: black;
}

.footer-nav> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
}

.footer-nav {
    padding-top: 15px
}

.footer-nav .logo {
    display: flex;
    align-items: start;
}

.footer-nav .logo .brand {
    display: block
}

.footer-nav .menu {
    display: flex;
    flex-direction: column;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1))
}

.footer-nav .menu>li {
    border-top-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1))
}

.footer-nav .menu .nav-link {
    position: relative;
    padding: .8rem 1rem;
    font-size: .9rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}
.footer-nav .menu .nav-link.active{
    border-bottom: 1px solid #32373C;
}


.footer-nav .menu .nav-link:after {
    position: absolute;
    top: 50%;
    right: 1rem;
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    justify-content: center;
    --tw-content: "";
    content: var(--tw-content);
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTExMy4zIDQ3LjQxbDE4My4xIDE5MS4xYzQuNDY5IDQuNjI1IDYuNjg4IDEwLjYyIDYuNjg4IDE2LjU5cy0yLjIxOSAxMS45Ny02LjY4OCAxNi41OWwtMTgzLjEgMTkxLjFjLTkuMTUyIDkuNTk0LTI0LjM0IDkuOTA2LTMzLjkgLjcxODdjLTkuNjI1LTkuMTI1LTkuOTM4LTI0LjM4LS43MTg3LTMzLjkxbDE2OC0xNzUuNEw3OC43MSA4MC42Yy05LjIxOS05LjUtOC45MDYtMjQuNzggLjcxODctMzMuOTFDODguOTkgMzcuNSAxMDQuMiAzNy44MiAxMTMuMyA0Ny40MXoiLz48L3N2Zz4=);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.footer-contact {
    display: flex;
    flex-direction: column
}

.footer-contact .phone,
.footer-contact .social {
    display: flex;
    flex-direction: column
}

.footer-contact .phone> :not([hidden])~ :not([hidden]),
.footer-contact .social> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.footer-contact .phone,
.footer-contact .social {
    padding: 1rem;
    line-height: 40px
}

.footer-contact .phone img,
.footer-contact .phone svg,
.footer-contact .social img,
.footer-contact .social svg {
    height: 24px;
    width: auto;
    fill: #d1d5db
}

.footer-contact .phone {
    position: relative;
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    font-size: 1.5rem;
    line-height: 2rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.footer-contact .phone:after {
    position: absolute;
    top: 50%;
    right: 1rem;
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    justify-content: center;
    --tw-content: "";
    content: var(--tw-content);
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTExMy4zIDQ3LjQxbDE4My4xIDE5MS4xYzQuNDY5IDQuNjI1IDYuNjg4IDEwLjYyIDYuNjg4IDE2LjU5cy0yLjIxOSAxMS45Ny02LjY4OCAxNi41OWwtMTgzLjEgMTkxLjFjLTkuMTUyIDkuNTk0LTI0LjM0IDkuOTA2LTMzLjkgLjcxODdjLTkuNjI1LTkuMTI1LTkuOTM4LTI0LjM4LS43MTg3LTMzLjkxbDE2OC0xNzUuNEw3OC43MSA4MC42Yy05LjIxOS05LjUtOC45MDYtMjQuNzggLjcxODctMzMuOTFDODguOTkgMzcuNSAxMDQuMiAzNy44MiAxMTMuMyA0Ny40MXoiLz48L3N2Zz4=);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.footer-contact .social {
    font-size: 1.125rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
}

.footer-contact .number {
    position: relative;
    display: flex;
    align-items: center
}

.footer-contact .number> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
}

.footer-contact .list {
    display: flex;
    align-items: center
}

.footer-contact .list> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
    margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))
}

.footer-contact .list img,
.footer-contact .list svg {
    height: 34px
}

.copyright {
    display: flex;
    flex-direction: column;
    color: #a9a9a9;
}

.copyright> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.copyright {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 80px;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
}

@media(min-width: 576px) {
    .footer-contact .phone {
        flex-direction: row;
        justify-content: space-between
    }

    .footer-contact .phone> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse))
    }

    .footer-contact .phone {
        padding-top: 0px;
        padding-bottom: 0px;
        line-height: 80px
    }

    .footer-contact .number {
        margin-right: 2.5rem
    }
}

@media(min-width: 768px) {
    .footer-contact .social {
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }

    .footer-contact .social> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse))
    }

    .footer-contact .social {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem
    }

    .footer-contact .social .title {
        line-height: 2
    }

    .footer-contact .list {
        display: flex;
        align-items: center
    }

    .footer-contact .list> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(2rem * var(--tw-space-x-reverse));
        margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
    }

    .footer-contact .list img,
    .footer-contact .list svg {
        height: 40px
    }
}

@media(min-width: 1200px) {

    .footer-nav> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse))
    }

    .footer-nav {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .footer-nav .menu {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center
    }

    .footer-nav .menu> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(45px * var(--tw-space-x-reverse));

    }

    .footer-nav .menu {
        border-width: 0px
    }

    .footer-nav .menu>li {
        border-width: 0px
    }

    .footer-nav .menu .nav-link {
        position: relative;
        padding-left: 0px;
        padding-right: 0px;
        font-size: 1.2rem;
        color: #FFFFFF;
        padding: 7px 0px;
    }

    .footer-nav .menu .nav-link:after {
        display: none
    }

    .footer-contact {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between
    }

    .footer-contact> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse))
    }

    .footer-contact {
        padding-top: 50px;
        padding-bottom: 100px
    }

    .footer-contact .phone,
    .footer-contact .social {
        padding: 0px
    }

    .footer-contact .phone .title,
    .footer-contact .social .title {
        font-size: 1.5rem;
        line-height: 2rem;
        --tw-text-opacity: 1;
        color: rgb(107 114 128 / var(--tw-text-opacity, 1))
    }

    .footer-contact .phone {
        flex-direction: column
    }

    .footer-contact .phone> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(2rem * var(--tw-space-y-reverse))
    }

    .footer-contact .phone {
        border-width: 0px;
        line-height: 1.5
    }

    .footer-contact .phone:after {
        display: none
    }

    .footer-contact .phone img,
    .footer-contact .phone svg {
        height: 38px
    }

    .footer-contact .number {
        margin-right: 0px;
        font-size: 3rem;
        line-height: 1
    }

    .footer-contact .social {
        flex-direction: column;
        align-items: flex-end
    }

    .footer-contact .social> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(2rem * var(--tw-space-y-reverse))
    }

    .footer-contact .social .title {
        display: flex;
        align-items: center
    }

    .footer-contact .social .title> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem * var(--tw-space-x-reverse));
        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
    }

    .footer-contact .social .title {
        line-height: 1.5
    }

    .footer-contact .list {
        display: flex;
        align-items: center
    }

    .footer-contact .list> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(2.5rem * var(--tw-space-x-reverse));
        margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)))
    }

    .footer-contact .list img,
    .footer-contact .list svg {
        height: 40px
    }

    .copyright {
        flex-direction: row;
        justify-content: center
    }

    .copyright> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse))
    }

    .copyright {
        padding-bottom: 40px
    }

    .copyright>* {
        display: flex;
        align-items: center;
        padding-left: 2.5rem;
        padding-right: 2.5rem
    }

    .copyright>*:not(:first-child) {
        border-left-width: 1px;
        border-style: solid;
        --tw-border-opacity: 1;
        border-color: rgb(107 114 128 / var(--tw-border-opacity, 1))
    }
}

.quick-navigation {
    position: fixed;
    top: 60%;
    right: 0;
    z-index: 50;
    background-color: #00A0BB;
    display: flex;
    padding: 1rem;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    flex-direction: column
}

.quick-navigation> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
}

.quick-navigation>* {
    display: flex;
    height: 38px;
    width: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 0px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.quick-navigation svg,
.quick-navigation img {
    height: 1rem;
    width: auto
}