@charset "UTF-8";
/* 重置边距和内填充 */
:root {
    scroll-behavior: smooth;
}
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

*[data-dev="auto"] .dev-mobile,
*[data-dev="desktop"] .dev-mobile,
*[data-dev="mobile"] .dev-desktop,
*[data-sys="auto"] .sys-mac,
*[data-sys="win"] .sys-mac,
*[data-sys="mac"] .sys-win
{
    display: none !important;
    margin: 0 !important
}

body {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: #000;
    text-align: left;
    background-color: #fff
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .5rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

ol,
ul,
dl {
    margin-top: 0;
    margin-bottom: 1rem
}

ol ol,
ul ul,
ol ul,
ul ol {
    margin-bottom: 0
}

dt {
    font-weight: 700
}

dd {
    margin-bottom: 1rem;
    margin-left: 0
}
dd a:hover {
    color: #0096ff;
}

a {
    color: #000;
    text-decoration: none;
    background-color: transparent
}

a:hover {
    color: #000;
    text-decoration: underline
}

a:not([href]):not([class]) {
    color: inherit;
    text-decoration: none
}

a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none
}

figure {
    margin: 2rem 0;
    text-align: center;
}
figcaption {
    text-align: center;
    color: #4e4e4e;
    padding: 10px 0;
}

img {
    vertical-align: middle;
    border-style: none;
    max-width: 100%;
}

svg {
    overflow: hidden;
    vertical-align: middle
}

th {
    text-align: inherit
}

label {
    display: inline-block;
    margin-bottom: .5rem
}

button {
    border-radius: 0
}

.FF6633 {
    color:#FF6633 !important;
}


/* base css */
.container,.container-xxl,.container-lg,.container-md,.container-sm {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}
.container-fluid {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

@media (min-width: 576px) {
    .container-sm,.container {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .container-md,.container-sm,.container {
        max-width:720px
    }
}

@media (min-width: 992px) {
    .container-lg,.container-md,.container-sm,.container {
        max-width:960px
    }
}

@media (min-width: 1226px) {
    .container-lg,.container-md,.container-sm,.container {
        width:1226px;
        max-width: 1226px
    }
}

@media (min-width: 1600px) {
    .container-xxl,.container-lg,.container-md,.container-sm,.container {
        max-width:1440px
    }
}


.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.col-md-3, .col-md-9 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}
@media (min-width: 768px) {
    .col-md-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }
}

/* ````````````````````````````` xxxx-xxxx ``````````````````````````````` */
.sidebar_support {
    position: relative;
}
.sidebar_support_sticky {
    padding: 20px 15px 15px;
    position: sticky;
    top: 0;
    border: 1px solid #eee;
    border-radius: 5px;
}
.sidebar_title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: 1rem;
}
.sidebar_item {
    padding-left: 25px;
}
.sidebar_item dt {
    position: relative;
    padding-right: 20px;
    cursor: pointer;
}
.sidebar_item dt::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url("../images/support/practices/i-folder.png") no-repeat center;
    background-size: cover;
    position: absolute;
    left: -25px;
    top: 2px;
}
.sidebar_item:has(.sidebar_item_fold) dt::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: url("../images/support/practices/arrow-d.png") no-repeat center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 5px;
}
.sidebar_item_fold {
    padding-top: 0.5rem;
    display: none;
}
.sidebar_item.active dt::after{
    background-image: url("../images/support/practices/arrow-u.png");
}

.specific_support {
    padding-left: 40px;
}
.specific_support section{
    padding: 15px 0;
}
.specific_support h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: 2rem;
}
.specific_support h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: 2rem;
    position: relative;
    padding-left: 20px;
    scroll-margin-top: 10px;
    margin-top: 2rem;
}
.specific_support h3::before {
    content: '';
    display: block;
    width: 8px;
    height: 100%;
    background-color: #0096ff;
    position: absolute;
    left: 0;
    top: 0;
}
.specific_support h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: 10px;
    color: #4e4e4e;
}
.specific_support p {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    margin-bottom: 1rem;
    color: #4e4e4e;
}
.specific_support p a {
    color: #03a3ff;
}
.specific_support ul li p {
    margin-bottom: 0.5rem;
}

.arc_cont {
    background-color: #fafafa;
    padding: 25px 30px;
    border-radius: 5px;
    margin-top: 30px;
}
.arc_cont_list {
    padding: 0;
}
.arc_cont_item {
    list-style: none;
    border-top: 1px solid #ddd;
    padding-top: 15px;
    padding-bottom: 5px;
}
.arc_cont_item:first-of-type {
    border-top: none;
}
.arc_cont_item h4 {
    position: relative;
    padding-right: 24px;
    cursor: pointer;
    color: #242424;
}
.arc_cont_item h4::after {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background: url("../images/support/practices/plus-circle-fill.png") no-repeat center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
}
.arc_cont_item_fold {
    display: none;
}

.arc_cont_item.active h4::after {
    background-image: url("../images/support/practices/minus-circle-fill.png");
}

.tabs-shell {
    position: relative;
    border-bottom: 1px solid #dfe1d8;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 20px 0;
    scroll-margin-top: 20px;
}

.tabs-shell::-webkit-scrollbar {
    display: none
}

.tabs {
    display: flex;
    gap: 0;
    min-width: max-content;
    position: relative
}

.tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: #858a80;
    padding: 0 9px 10px;
    cursor: pointer;
    position: relative;
    transition: color .25s;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

.tab:first-child {
    padding-left: 2px
}

.tab:hover {
    color: #343d33
}

.tab[aria-selected=true] {
    color: #FF6633
}

.tab:after {
    content: '';
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    background: #FF6633;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1)
}

.tab[aria-selected=true]:after {
    transform: scaleX(1)
}

.tabs-frame {
    position: relative;
    max-width: 875px;
    margin-bottom: 31px
}

.tabs-frame .tabs-shell {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: auto;
    overscroll-behavior-x: contain
}

.tabs-frame .tabs-shell::-webkit-scrollbar { display: none; }
.tabs-frame .tabs-shell.is-scrollable { cursor: grab; }
.tabs-frame .tabs-shell.is-dragging { cursor: grabbing; user-select: none; }


.tabs-frame .tabs-shell .tabs {
    width: max-content
}

.tab-scroll {
    position: absolute;
    z-index: 2;
    top: -5px;
    bottom: 5px;
    width: 34px;
    border: 0;
    background: linear-gradient(90deg, var(--paper), rgba(246, 246, 241, .82));
    color: #465548;
    cursor: pointer;
    font-size: 19px;
    display: grid;
    place-items: center
}

.tab-scroll.prev {
    left: -30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s
}

.tab-scroll.next {
    right: -30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    background: linear-gradient(270deg, var(--paper), rgba(246, 246, 241, .82))
}

.tabs-frame:not(.has-overflow) .tab-scroll { display: none; }

.tab-scroll.is-visible {
    opacity: 1;
    pointer-events: auto
}


.panel-content {
    animation: appear .45s ease both
}

.panel-content[hidden] {
    display: none
}

@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(9px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}


.panel-cont {
    border: 1px solid #0684ff;
    padding: 25px;
    border-radius: 5px;
    margin-top: 30px;
}
.panel-cont-fold {
    display: none;
}
.panel-cont-fold ul {
    padding-top: 5px;
}
.panel-cont-fold ol {
    padding-top: 5px;
}
.panel-cont-title {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}
.panel-cont-title:first-of-type {
    border-top: none;
}
.panel-cont-title::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: url(../images/support/practices/arrow-d.png) no-repeat center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 8px;
}
.panel-cont-title.active::after {
    background-image: url(../images/support/practices/arrow-u.png);
}
.panel-cont-title.active + .panel-cont-fold {
    display: block;
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding: 20px 0 30px;
}

.panel-grid-item1 { 
    grid-area: 1 / 1 / 3 / 3;
    display: flex;
    align-items: flex-end;
}
.panel-grid-item2 { 
    grid-area: 1 / 3 / 2 / 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}
.panel-grid-item3 { 
    grid-area: 2 / 3 / 3 / 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}
.panel-grid-item p {
    margin-bottom: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
}

.drop-compare-wrap {display: flex;justify-content: center;position: relative;}
.drop-compare {position: relative;border-radius: 5px;overflow: hidden;}
.drop-compare img {vertical-align:middle;max-width:100%;height:100%;}
.drop-compare-img {position:absolute;height:100%;width:calc(var(--wid,.5) * 100%);object-fit:cover;object-position:left;}
.drop-compare-line{position:absolute;top:0;bottom:0;left:calc(var(--wid,.5) * 100%);pointer-events:none;display:flex;flex-flow:column;align-items:center;width:1.5px;}
.drop-compare-line img{max-width:initial;height:auto;}
.drop-compare-line::before,.drop-compare-line::after{content:'';flex:1;width:100%;background-color:rgba(255 255 255 / .5)}
.drop-compare-line::before{background:linear-gradient(transparent 15%,rgba(255 255 255 / .5),rgba(255 255 255 / .5)) no-repeat;}
.drop-compare-line.whole::before {background:rgba(255 255 255 / .5);}
.drop-compare-line.shadow::before,.drop-compare-line.shadow::after {box-shadow: 0 0 0 1px rgba(0,0,0,0.4);}
.drop-compare [type=range]{position:absolute;width:100%;height:100%;background-color:initial;-webkit-appearance:none;appearance:none;cursor:ew-resize;}
.drop-compare ::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;}
.drop-compare ::-moz-range-track{height:100%;}
.drop-compare ::-moz-range-thumb{width:0;opacity:0;}
@media (max-width:768px){
    .drop-compare-line>img {max-width: 18px;}
}


.faq_cont {
    margin-top: 20px;
}
.faq_cont_list {
    padding: 0;
}
.faq_cont_item {
    list-style: none;
    border-top: 1px solid #ddd;
    padding-top: 15px;
    padding-bottom: 5px;
}
.faq_cont_item:first-of-type {
    border-top: none;
}
.faq_cont_item h4 {
    position: relative;
    padding-right: 24px;
    cursor: pointer;
    color: #242424;
}
.faq_cont_item h4::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: url("../images/support/practices/plus-circle-fill.png") no-repeat center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
}
.faq_cont_item_fold {
    display: none;
}
.faq_cont_item.active h4::after {
    background-image: url("../images/support/practices/minus-circle-fill.png");
}

.thumb {
    cursor: pointer;
}

.backdrop {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgb(11 17 14 / 0%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, background-color .28s ease, visibility 0s linear .28s;
}

.backdrop.open {
    opacity: 1;
    visibility: visible;
    background: rgb(11 17 14 / 84%);
    transition: opacity .28s ease, background-color .28s ease, visibility 0s;
}

.viewer {
    position: relative;
    max-width: min(1200px, 100%);
    max-height: 100%;
    transform: translateY(10px) scale(.985);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
}

.open .viewer {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.viewer img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 100px);
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 24px 80px #0007;
}

.close {
    position: fixed;
    top: 20px;
    right: 22px;
    width: 44px;
    height: 44px;
    border: 1px solid #ffffff55;
    border-radius: 50%;
    color: #fff;
    background: #ffffff18;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.close:hover {
    background: #ffffff35;
}

.Top { width: 90px; height: 90px; position: fixed; bottom:30px; right: 30px; cursor: pointer; display: none; }

@media (max-width:1400px){

}
@media (max-width:1200px){

}
@media (max-width:992px){
    .Top { width: 60px; height: 60px; bottom:30px; right: 15px;}
    .Top img { height: 100%;width: 100%;}
}
@media (max-width:768px){
    .specific_support {
        padding-left: 15px;
    }
}
@media (max-width:576px){

}
/* ````````````````````````````` xxxx-xxxx ``````````````````````````````` */
.main-part1 {
    min-height: 520px;
    background: url("../images/support/practices/bg-part1.png") no-repeat center bottom;
    background-size: cover;
    padding: 63px 0;
}
.part1-wrap {
    max-width: 1080px;
    border-bottom: 1px solid #e4e4e5;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
}
.part1-title {
    font-size: var(--font-size-9xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}
.part1-title strong {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    display: block;
}
.part1-desc {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}
.part1-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    column-gap: 50px;
    margin-bottom: 15px;
}
.part1-infos {
    padding-bottom: 20px;
}
.part1-infos-flex {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 14px;
}
.part1-info {
    display: flex;
    flex-direction: column;
}
.part1-info span {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
}
.part1-info em {
    font-size: var(--font-size-3xl);
    font-style: normal;
    line-height: 1;
}

.the-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.the-button {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.the-button>a {
    min-width: 215px;
    box-sizing: border-box;
    padding: 0 10px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    font-size: var(--font-size-lg);
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    background-color: #71b839;
}

.the-button>a.the-more {
    background-color: #ffffff;
    color: #060606;
}

@media (max-width:1400px){

}
@media (max-width:1200px){
    .part1-title {
        font-size: var(--font-size-6xl);
    }
    .part1-infos {
        padding-bottom: 15px;
    }
}
@media (max-width:992px){
    .part1-flex {
        flex-wrap: wrap;
        gap: 15px;
    }
    .part1-title {
        font-size: var(--font-size-3xl);
    }
    .part1-infos {
        padding-bottom: 0;
    }
}
@media (max-width:768px){
    .main-part1 {
        padding: 15px 0;
    }
}
@media (max-width:576px){
    .part1-wrap {
        padding: 0 15px 0;
    }
    .the-buttons {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}