/*共同*/
body {
    margin: 0;
    overflow-x: hidden;
}

.miracle_dealer_page {
    overflow: hidden;
}

body,
html,
.wrapper_bg {
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.5;
    font-weight: 300;
    color: #555;
    letter-spacing: 1px;
    font-family: 'Jost', 'Noto Sans TC', sans-serif;
}

img {
    vertical-align: middle;
}

@media(max-width:767px){
    .cd-logo{
        width:150px;
    }
}
.cd-logo .logo-white{
    display:block;
    position:absolute;
    opacity:1;
    transition:opacity 0.3s;
}
.cd-logo .logo-black{
    position:absolute;
    display:block;
    opacity:0;
    transition:opacity 0.3s;
}

.cd-header {
    background:rgba(255,255,255,0);
    box-shadow:none !important;
    height: 60px;
}
@media only screen and (min-width: 768px){
    .cd-header {
        height:80px;
    }
}
.cd-header.is-scroll .cd-logo .logo-white{
    opacity:0;
}

.cd-header.is-scroll .cd-logo .logo-black{
    opacity:1;
}

.cd-header.menu-is-open .cd-logo .logo-white{
    opacity:0;
}

.cd-header.menu-is-open .cd-logo .logo-black{
    opacity:1;
}


/* @media only screen and (min-width: 768px){ */
    .cd-primary-nav-trigger .cd-menu-icon {
        background-color: #fff !important;
        transition: transform 0.3s, top 0.3s, background-color 0.3s;
    }
    .cd-primary-nav-trigger .cd-menu-icon:before, .cd-primary-nav-trigger .cd-menu-icon:after {
        background-color: #fff !important;
        transition: transform 0.3s, top 0.3s, background-color 0.3s;
    }
    .cd-primary-nav-trigger .cd-menu-icon.is-clicked {
        background-color: #000 !important;
    }
    .cd-primary-nav-trigger .cd-menu-icon.is-clicked:before, .cd-primary-nav-trigger .cd-menu-icon.is-clicked:after {
        background-color: #fff !important;
    }

   .cd-header.is-scroll .cd-primary-nav-trigger .cd-menu-icon {
        background-color: #000 !important;
    }
    .cd-header.is-scroll .cd-primary-nav-trigger .cd-menu-icon:before, .cd-header.is-scroll .cd-primary-nav-trigger .cd-menu-icon:after {
        background-color: #000 !important;
    }
    .cd-header.menu-is-open .cd-primary-nav-trigger .cd-menu-icon.is-clicked {
        background-color: rgba(255, 255, 255, 0) !important;
    }
     .cd-header.menu-is-open .cd-primary-nav-trigger .cd-menu-icon.is-clicked:before, .cd-header.menu-is-open .cd-primary-nav-trigger .cd-menu-icon.is-clicked:after {
        background-color: #000 !important;
    }
/* } */

.index_sec .container {
    width: 70%;
    padding: 0;
    margin: auto;
}

.index_sec {
    position: relative;
    padding: max(6vw, 100px) 0;
}

h2.main_title,
.section-subject .slogan {
    font-size: 4.33rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
}

.section-subject .slogan {
    text-align: center;
    color: #333;
}




.section-subject {
    margin-bottom: 80px;
    opacity: 0;
}

.intro-service,
.works-block,
.world_brand {
    background: #f8f8f8;
}



/**/
.fixed_btn {
    position: fixed;
    top: 15px;
    right: 125px;
    z-index: 222;
    text-align: center;
    display: block;
}

.fixed_btn a {
    color: #fff;
    font-weight: 600;
    padding: 10px;
    min-width: 180px;
    background: #f2430d;
    display: flex;
    align-items: center;
    border-radius: 99em;
    transition: all .5s ease;
}

.fixed_btn a i {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    font-style: normal;
    margin: 0 15px;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0;
    font-weight: 400;
}

.fixed_btn a i:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dotted #fff;
    border-radius: 50%;
    animation: rotate 15s linear infinite;
    left: 50%;
    top: 50%;
}

/*動態*/
@keyframes floatUp {

    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, -30px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes floatUp_lit {

    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, -10px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes bounce_O {

    0% {
        opacity: 0;
        transform: scale(.6);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
    }

}

@keyframes bounce_I {

    0% {
        opacity: 0;
        transform: scale(.3)translate(-30%, -10%);
    }

    100% {
        opacity: 1;
        transform: scale(1)translate(0%, 0%);
    }

}

@keyframes bounce_Ti {

    0% {
        opacity: 0;
        transform: scale(.3)translate(10%, 20%);
    }

    100% {
        opacity: 1;
        transform: scale(1)translate(0%, 0%);
    }

}

@keyframes bounce_Tr {

    0% {
        opacity: 0;
        transform: scale(.3)translate(30%, 20%);
    }

    100% {
        opacity: 1;
        transform: scale(1)translate(0%, 0%);
    }

}

@keyframes bounce_Br {

    0% {
        opacity: 0;
        transform: scale(.3)translate(30%, -20%);
    }

    100% {
        opacity: 1;
        transform: scale(1)translate(0%, 0%);
    }

}

@keyframes jumpUp {
    0% {
        opacity: 0;
        transform: translate(0, 300%);
    }

    100% {
        opacity: 1;
        transform: translate(0, 5%);
    }
}

@keyframes bounce_Top {

    0% {
        opacity: 0;
        transform: scale(.3)translate(0%, 50%);
    }

    100% {
        opacity: 1;
        transform: scale(1)translate(0%, 0%);
    }

}

@-webkit-keyframes laser {
    0% {
        -webkit-transform: rotateZ(-20deg);
    }

    50% {
        -webkit-transform: rotateZ(20deg);
    }

    100% {
        -webkit-transform: rotateZ(-20deg);
    }
}

@-webkit-keyframes laser-light01 {
    0% {
        -webkit-transform: rotateZ(40deg);
    }

    50% {
        -webkit-transform: rotateZ(-30deg);
    }

    100% {
        -webkit-transform: rotateZ(40deg);
    }
}

@-webkit-keyframes laser-light02 {
    0% {
        -webkit-transform: rotateZ(-40deg);
    }

    50% {
        -webkit-transform: rotateZ(40deg);
    }

    100% {
        -webkit-transform: rotateZ(-40deg);
    }
}

@keyframes moneyflyIn {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes infinity-scroll-left {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes infinity-scroll-right {
    0% {
        transform: translateX(0);
    }

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

@keyframes slide_vl {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }

}

@keyframes slide_vl_re {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0%);
    }

}

@keyframes rotate {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate-re {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotate(-360deg);
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}



.animated .bn_tittop img {
    animation: 600ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 jumpUp;
    animation-delay: .3s;
}

.animated .bn_bigtit,
.animated .bn_subtit,
.animated .bn_num {
    animation: 600ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 jumpUp;
    animation-delay: .3s;
}

.animated .bn_money_right {
    animation: 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) normal forwards 1 bounce_I;
    animation-delay: 1.6s;
}

.animated .section-subject {
    animation: 500ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 fadeInUp;
    animation-delay: .3s;
}

.animated .service-item.second {
    animation: 500ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 fadeIn;
    animation-delay: .5s;
}

.animated .service-item.third {
    animation: 500ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 fadeInLeft;
    animation-delay: .5s;
}

.animated .service-item.first {
    animation: 500ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 fadeInRight;
    animation-delay: .5s;
}

.animated .bn_tit_deco_ri img,
.animated .bn_tit_deco_le img {
    animation: 800ms cubic-bezier(0.18, 0.89, 0.32, 1.28) normal forwards 1 bounce_O;
    animation-delay: 1.5s;
}

.animated .bn_money_topri {
    animation: 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) normal forwards 1 bounce_Ti;
    animation-delay: 1.6s;
}

.animated .bn_money_bottomle {
    animation: 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) normal forwards 1 bounce_Br;
    animation-delay: 1.6s;
}

.animated .bn_money_tople {
    animation: 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) normal forwards 1 bounce_Tr;
    animation-delay: 1.6s;
}

.animated .card_in,
.animated .join_txt p,
.animated .join_txt a.to_btn {
    animation: 800ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 fadeInUp;
    animation-delay: .3s;
}

.animated .card_in.no_b,
.animated .join_txt p {
    animation-delay: .5s;
}

.animated .card_in.no_c,
.animated .join_txt a.to_btn {
    animation-delay: .7s;
}

.animated .adv_deco_in.right {
    animation: 800ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 fadeInRight;
    animation-delay: 1.5s;
}

.animated .adv_deco_in.left {
    animation: 800ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 fadeInLeft;
    animation-delay: 1.5s;
}

.animated .bottom_in_pic img {
    animation: 500ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 fadeInUp;
    animation: 500ms cubic-bezier(0.34, 1.56, 0.63, 0.84) normal forwards 1 fadeInUp;
    animation-delay: 1s;
}

.animated .bottom_in {
    animation: 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) normal forwards 1 fadeInLeft;
    animation-delay: 1s;
}

.animated .bottom_in.right {
    animation: 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) normal forwards 1 fadeInRight;
    animation-delay: 1s;
}

.animated ._big_txt>img {
    animation: 600ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 jumpUp;
    animation-delay: .1s;
}

.animated ._big_txt img.big_t_pic {
    animation: 600ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 jumpUp;
    animation-delay: .3s;
}

.animated .fly_left {
    animation: 800ms cubic-bezier(0.18, 0.89, 0.32, 1.28) normal forwards 1 bounce_Tr;
    animation-delay: 1s;
}

.animated .fly_right {
    animation: 800ms cubic-bezier(0.18, 0.89, 0.32, 1.28) normal forwards 1 bounce_I;
    animation-delay: 1s;
}

.animated .workLink.aos-init,
.animated .brandItem {
    animation: 600ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 fadeInUp;
    animation-delay: .5s;
}

.animated .workLink.aos-init:nth-child(4),
.animated .workLink.aos-init:nth-child(5),
.animated .workLink.aos-init:nth-child(6),
.animated .brandItem.shifang {
    animation-delay: .8s;
}

.animated .workLink.aos-init:nth-child(7),
.animated .workLink.aos-init:nth-child(8),
.animated .workLink.aos-init:nth-child(9),
.animated .brandItem.leadway {
    animation-delay: 1.1s;
}

.animated .brandItem.riverimg {
    animation-delay: 1.4s;
}

.workLink.aos-init,
.brandItem,
.join_txt p {
    opacity: 0;
}




/*banner*/
/*光束*/
.bn_light {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -100px;
    overflow: hidden;
    z-index: 0;
}

.bn_light .bn_light_in {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
}

.laser-beam {
    position: absolute;
    left: 47%;
    bottom: 0;
    width: max(4vw, 60px);
    height: 70%;
    background: -webkit-linear-gradient(top, rgb(255 252 139 / 0%) 0%, #6aa9ed 100%);
    box-shadow: 0px 0px 15px 0px rgb(255 255 255);
    transform-origin: 0 100%;
    -webkit-animation: laser 16s infinite;
    filter: blur(15px);
}

.laser-beam.light01 {
    -webkit-animation: laser-light01 15s infinite;
    background: -webkit-linear-gradient(top, rgb(255 252 139 / 0%) 0%, #beddff 100%);
    box-shadow: 0px 0px 15px 0px rgb(2 52 237);
}

.laser-beam.light02 {
    -webkit-animation: laser-light02 15s infinite;
    background: -webkit-linear-gradient(top, rgb(255 252 139 / 0%) 0%, #a8c4e8 100%);
    box-shadow: 0px 0px 15px 0px rgb(16 90 220);
}

.bn_bg_ribbon {
    width: 70%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0px);
    z-index: 3;
}

.banner_block {
    height: 100vh;
    min-height: 50vw;
    overflow: hidden;
    background: #1268e0;
    position: relative;
}

.bn_bg {
    background: url(../images/micro/banner_bg.webp);
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.deco_left_in {
    animation: slide_vl_re 30s infinite linear 0.5s both;
}

.bn_bg img {
    width: 100%;
}

.bn_deco_left {
    position: absolute;
    left: 50px;
    width: max(2vw, 40px);
}

.bn_deco_right {
    position: absolute;
    right: 50px;
    width: max(2vw, 40px);
}

.deco_right_in {
    animation: slide_vl 30s infinite linear 0.5s both;
}

.hand_le2 {
    top: 10%;
}

.bn_hands {
    display: grid;
    align-items: flex-end;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
}

.bn_hands img {
    width: 100%;
}

.bn_hands_center {
    bottom: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 12%);
    width: 36%;
}

.bn_hands_layer01 {
    display: grid;
    grid-template-columns: 20% 14% auto 10% 14%;
    width: 75%;
    margin: 0 auto 0 5%;
    align-items: flex-end;
    transform: translate(0px, 30px);
    grid-column: 1 / 3;
    grid-row: 1;
    z-index: 1;
}

.hand_ri7 {
    grid-column: 5 / 6;
}

.hand_le1 {
    transform: scale(1.5) translate(0px, 15%);
    transform-origin: center bottom;
}

.hand_le1 img {
    max-width: 50%;
}

.bn_hands_layer02 {
    display: grid;
    grid-template-columns: 7% 5% 15% 7% auto 15% 12% 15%;
    width: 70%;
    margin: 0 12% 0 auto;
    align-items: flex-end;
    grid-row: 1;
    grid-column: 1 / 3;
    transform: translate(0px, 10%);
}

.hand_le3 {
    grid-column: 3 / 4;
    grid-row: 1;
}

.hand_le4 {
    grid-column: 4 / 5;
    grid-row: 1;
    transform: translate(0px, 35%);
}

.hand_ri6 {
    grid-column: 6 / 7;
    grid-row: 1;
}

.hand_ri8 {
    grid-column: 8 / 9;
    transform: translate(0px, 30%);
}


.bn_txt {
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translate(-50%, 0);
    top: 4%;
    text-align: center;
    color: #fff;
    font-weight: 900;
}

.bn_tittop {
    width: 55%;
    z-index: -1;
    position: relative;
    margin: 0 auto -3%;
}

.bn_tittop img {
    width: 100%;
}

.bn_num img {
    width: 100%;
}

.bn_num {
    position: relative;
    margin: 30px auto 0;
    opacity: 0;
}

.bn_num img.vis_600 {
    display: none;
}

.bn_bigtit:before {
    content: attr(data-storke);
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
    -webkit-text-stroke: 20px #2763ea;
}

.bn_bigtit {
    color: white;
    font-size: max(4.5vw, 60px);
    letter-spacing: 0;
    line-height: 1;
    position: relative;
    opacity: 0;
}

.bn_subtit {
    color: #fdd752;
    font-size: max(2.2vw, 35px);
    letter-spacing: 0;
    line-height: 1;
    font-weight: 500;
    position: relative;
    opacity: 0;
}

.bn_subtit:before {
    content: attr(data-storke);
    position: absolute;
    left: 50%;
    width: 100%;
    transform: translate(-50%, 0);
    z-index: -1;
    -webkit-text-stroke: 20px #2763ea;
}

.bn_tit_deco_le img {
    transform-origin: right;
    opacity: 0;
}

.bn_tit_deco_ri img {
    transform-origin: left;
    opacity: 0;
}



.bn_tit_deco_le {
    position: absolute;
    top: -5%;
    left: -2%;
    width: 50%;
}

.bn_tit_deco_ri {
    position: absolute;
    right: 0;
    width: 40%;
}

.bn_tittop {
    width: 55%;
    z-index: -1;
    position: relative;
    margin: 0 auto -3%;
    overflow: hidden;
    padding: 20px 0 0;
}

.bn_tittop img {
    width: 100%;
    opacity: 0;
}



.bn_money_right {
    width: 16%;
    position: absolute;
    right: 8%;
    top: 15%;
    transform-origin: left top;
    opacity: 0;

}

.bn_money_topri {
    position: absolute;
    top: -8%;
    right: 30%;
    width: 11%;
    opacity: 0;
    transform-origin: center bottom;
}



.bn_money_bottomle {
    position: absolute;
    width: 20%;
    bottom: 22%;
    left: 13%;
    opacity: 0;
    transform-origin: right top;
}


.bn_money_tople {
    position: absolute;
    width: 20%;
    left: 17%;
    top: -9%;
    opacity: 0;
    transform-origin: right bottom;
}




/*優勢*/
.advantage_block.index_sec {
    background: #f2430d;
    padding-bottom: max(9vw, 150px);
}

.advantage_block .section-subject {
    text-align: center;
    color: #fff;
}

.advantage_block span.di_color {
    display: inline-block;
    padding-left: 15px;
}

.card_box.grid_three {
    grid-column-gap: 0;
    position: relative;
    z-index: 1;
}

.card_in .card_pic {
    display: flex;
    align-items: flex-end;
}

.card_pic {
    position: relative;
    height: 20vw;
}

.card_in.no_c .card_pic img {
    width: 130%;
    transform: translate(5.5%, -2%);
}

.card_in.no_c .card_pic:before {
    background: #fdd752;
}

.card_in.no_b .card_pic:before {
    background: #005ad7;
}

.card_pic:before {
    content: "";
    position: absolute;
    width: 85%;
    height: 16vw;
    background: #3edecc;
    z-index: -1;
    bottom: 7.4%;
    left: 50%;
    transform: translate(-50%, 0);
    transition: all .3s ease;
}


.card_pic span.hover_vis {
    bottom: 0;
    z-index: -1;
    opacity: 0;
    transition: all .3s ease;
}

.card_pic img {
    width: 100%;
    object-fit: cover;
}

.card_in.no_b {
    border: 1px solid rgb(250 180 158);
    margin: 0 -1px;
}

.card_in.no_b .card_pic img {
    transform: scale(1.02);
    transform-origin: center bottom;
}

.card_in {
    color: #fff;
    padding: 80px;
    text-align: center;
    border: 1px solid rgb(250 180 158);
    opacity: 0;
}



.card_in p {
    margin-top: max(4vw, 75px);
    font-size: 1.33rem;
    font-weight: 500;
    margin-bottom: 0;
    transition: all .3s ease;
}

.card_in.no_c h3 {
    color: #fdd752;
}

.card_in.no_b h3 {
    color: #005ad7;
}

.card_in.no_a h3 {
    color: #3edecc;
    transition: all .3s ease;
}





.card_in h3 {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.3;
    margin: 0;
}



.card_in:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    background: #3edecc;
    left: 0;
    top: 0;
    z-index: -1;
    transition: all .3s ease;
}

.card_in.no_b:before {
    background: #005ad7;
}

.card_in.no_c:before {
    background: #fdd752;
}

.card_pic span {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -15%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    z-index: 1;
}

span.spe_en_img img {
    width: auto !important;
    height: max(5vw, 100px);
    object-fit: contain;
    transform: translate(0px, 0px) !important;
}

.adv_deco {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translate(0px, 30%);
    z-index: 1;
}

.adv_deco_in.left {
    margin-left: -50px;
    opacity: 0;
}

.adv_deco_in.right {
    margin-right: -50px;
    opacity: 0;
}

.adv_deco_in.right img {
    margin: 0 0 0 auto;
    display: block;
}

.adv_deco_in.left img {
    transform: scaleX(-1);
}

.adv_deco_in img {
    object-fit: contain;
    object-position: right;
    width: 20vw;
}

.adv_deco_in.right img {
    object-position: right;
}



/*三步驟*/
.three_steps.index_sec {
    background: linear-gradient(255deg, #005ad7 10%, #3a84eb);
    padding: max(10vw, 150px) 0;
}

.three_steps.index_sec:before {
    content: "";
    position: absolute;
    width: 70%;
    height: 100%;
    background: radial-gradient(farthest-corner at 90% 90%, rgb(255 255 255 / 70%), transparent 50%);
    bottom: 0;
    right: -10%;
    z-index: 0;
}

.three_steps.index_sec .container {
    width: 90%;
    margin: 0 0 0 auto;
    background: #fdd752;
    display: grid;
    grid-template-columns: 18% auto;
    z-index: 1;
    position: relative;
}

.three_steps.index_sec .container:before {
    display: none;
}

.steps_left h2.main_title {
    writing-mode: vertical-lr;
    letter-spacing: 5px;
    margin: 30px 0 0;
    border-top: 1px solid rgb(255 255 255 / 40%);
    padding-top: 30px;
}

span.di_color {
    display: block;
    color: #fdd752;
}

.steps_left {
    background: #005ad7;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid_three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 60px;
}

.s_box {
    padding: max(7vw, 100px) 10%;
}

.sub_title {
    font-size: 1.5rem;
    font-weight: 500;
}

.step_txt p {
    margin: 0;
}

.step_txt .num {
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    color: #d7447d;
    font-size: 1.66rem;
    font-weight: 600;
    font-family: 'jost', sans-serif;
    letter-spacing: 0;
    position: relative;
}

.step_txt .num:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/micro/steps_titdeco.webp) no-repeat;
    top: 0;
    right: -15px;
    background-size: cover;
    z-index: -1;
}

.step_txt {
    display: grid;
    grid-template-columns: 80px auto;
    align-items: center;
    grid-column-gap: 30px;
    font-weight: 500;
    font-size: 1.33rem;
    color: #333;
    margin-bottom: 15px;
    width: 100%;
}

.step_pic {
    position: relative;
    max-width: 18vw;
}

.step_pic img {
    border-radius: 30px;
    z-index: 1;
    position: relative;
    object-fit: cover;
    height: 22.1vw;
}

.step_pic:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 80%;
    background: #d7447d;
    bottom: 0;
    border-radius: 30px;
    max-width: 460px;
}

.step_pic img {
    border-radius: 30px;
    z-index: 1;
    position: relative;
}

.ball_right {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(20%, -50px);
    width: 25%;
}

.ball_left {
    position: absolute;
    bottom: 0;
    width: 20%;
    left: 0;
    transform: translate(-30%, 25%);
}

.ball_right img,
.ball_left img {
    width: 100%;
}

/*獎金*/
.price_words.index_sec {
    padding: max(7vw, 120px) 0 0;
    background: #fdd752;
    z-index: 1;
    text-align: center;
    overflow: hidden;
    animation: none !important;
}

.price_bg img {
    width: 100%;
}

.price_bg {
    position: absolute;
    top: 0;
    mix-blend-mode: overlay;
    z-index: -1;
}

.bottom_in_pic {
    position: absolute;
    bottom: -30%;
    left: 51%;
    transform: translate(-50%, 0);
    width: auto;
    height: 41vw;
    filter: brightness(1.05) drop-shadow(0px 40px 50px rgb(0 0 0 / 30%));
}

.bottom_in_pic img {
    width: auto;
    object-fit: cover;
    height: 100%;
    opacity: 0;
    transform-origin: bottom;
}

.bottom_txt {
    position: relative;
    z-index: 1;
    background: #f2430d;
    padding: 60px 0 120px;
    margin-top: -3rem;
    display: grid;
    grid-template-columns: auto 20% auto;
    font-size: 3.66rem;
    color: #fff;
    font-weight: 700;
}

.bottom_in.right h8 {
    font-size: 2rem;
}

._big_txt img.big_t_pic {
    width: 100%;
}

._big_txt img {
    width: 72%;
    opacity: 0;
}

.bottom_in {
    text-align: right;
    opacity: 0;
}

.bottom_in.right {
    grid-column: 3;
    text-align: left;
}

.fly_left {
    position: absolute;
    top: -5vw;
    left: 5%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 9vw;
    width: 15%;
    opacity: 0;
}

.fly_m img {
    width: 100%;
}

img.fly_le_02 {
    width: 65%;
    grid-row: 2;
}

.fly_right {
    position: absolute;
    right: 4%;
    width: 17%;
    top: 17%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    opacity: 0;
}

img.fly_ri_02 {
    grid-row: 2;
}

img.fly_ri_01 {
    width: 56%;
    position: relative;
    top: 20%;
}

.price_words.index_sec {
    opacity: 1;
}



/*跑馬燈*/
.run_words.index_sec {
    padding: 0;
    z-index: 2;
}

.c-auto-scroll-items-wrap {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    background: #005ad7;
    padding: 20px;
}

.c-auto-scroll-items {
    display: flex;
}

.a-scroll_left {
    animation: infinity-scroll-left 20s infinite linear 0.5s both;
}

.c-auto-scroll-items img {
    width: 45rem;
    max-width: none;
}



/*合作客戶*/
.cooperation_block.index_sec {
    background: #001f91;
    height: 44vw;
    max-height: 85vh;
    overflow: hidden;
    display: grid;
    align-items: center;
}

.cooperation_block.index_sec .container {
    width: 85%;
    display: grid;
    grid-template-columns: 40% auto;
    grid-column-gap: 10%;
}

.cooperation_block.index_sec .container:before {
    display: none;
}

.cooperation_block.index_sec:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 20%;
    background: linear-gradient(to top, rgb(0 0 0 / 90%), rgb(0 0 0 / 65%) 20%, transparent);
    bottom: 0;
}

.cooperation_block.index_sec:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 20%;
    background: linear-gradient(to bottom, rgb(0 0 0 / 90%), rgb(0 0 0 / 65%) 20%, transparent);
    top: 0;
    z-index: 1;
}

.co_bg img {
    object-fit: cover;
    height: 100%;
    object-position: right bottom;
    max-width: initial;
    width: 100%;
}

.co_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    mix-blend-mode: color-burn;
    pointer-events: none;
}

.co_right {
    grid-column: 2;
    color: #fff;
    font-size: 4rem;
    font-weight: 900;
}

.co_left {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: absolute;
    width: 35%;
    top: 0;
}

.brands_out {
    display: grid;
}

.brands_in {
    width: max(7.5vw, 120px);
    padding: 30px 0;
}

.brands_box {
    display: grid;
    grid-template-columns: 1fr;
    animation: slide_vl 80s infinite linear 0.5s both;
}

.second .brands_box {
    animation: slide_vl_re 80s infinite linear 0.5s both;
}

.brands_in img {
    width: 100%;
}

.co_right h2 {
    font-size: 4rem;
    font-weight: 900;
}

span.co_num {
    font-size: max(6vw, 50px);
    font-weight: 900;
    padding: 0 5px 0 15px;
    color: #fdd752;
    font-family: 'Jost';
    position: relative;
    line-height: 1;
    display: inline-block;
}

span.co_num:after {
    content: "+";
    position: relative;
    font-size: max(3vw, 22px);
    top: -28px;
    right: 0;
    margin-right: -10%;
}


.sub_tit {
    border-bottom: 1px solid #636ea9;
    padding-bottom: 30px;
    margin-bottom: 100px;
}



/*優勢區塊*/
.intro-service .container {
    width: 90%;
}

.service-item .leader-circle {
    position: relative;
}

.service-item .leader-circle .circle-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --w: calc(1080px / 3);
    width: var(--w);
    height: var(--w);
    border-radius: 50%;
    color: #fff;
    text-align: center;
    position: relative;
}

.service-item .leader-circle .circle-block .item-img {
    --w: 110px;
    width: var(--w);
    height: var(--w);
    min-height: var(--w);
    border-radius: 50%;
    background: #fff;
    margin: 0 auto 15px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-item .leader-circle .circle-block .item-img img {
    width: 80%;
}

.service-item .leader-circle .circle-block .circle-word .tt {
    font-weight: 600;
    font-size: 1.33rem;
    margin-bottom: 5px;
}

.service-item:nth-of-type(odd) .leader-circle .circle-block {
    background-color: #005ad7;
}

.service-item:nth-of-type(even) .leader-circle .circle-block {
    background-color: #f2430d;
}

.service-block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 60px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    opacity: 0;
}


.service-item .half-border {
    position: absolute;
    --w: calc(1080px / 3 + 30px);
    width: var(--w);
    height: var(--w);
    top: 50%;
    left: 50%;
    border-radius: 50%;
    -webkit-animation: rotate 12s linear infinite;
    animation: rotate 12s linear infinite;
}

.service-item .half-border .half-circle {
    position: absolute;
    left: 0;
    top: 0;
    margin: auto;
    --w: calc(1080px / 3 + 30px);
    width: var(--w);
    height: calc(var(--w) / 2);
    border-top-left-radius: calc(var(--w) / 2);
    border-top-right-radius: calc(var(--w) / 2);
    border: 1px dotted #999;
    border-bottom: 0;
}

.service-item .half-border .point {
    position: absolute;
    --top: 48%;
    top: var(--top);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #c9c9c9;
    z-index: 2;
}

.service-item .half-border .point.start {
    left: 0;
    transform: translate(-50%, 0px);
}

.service-item .half-border .point.end {
    right: 0;
    transform: translate(50%, 0px);
}

.service-item.second .half-border {
    animation: rotate-re 12s linear infinite;
}

.service-item.second .half-border .half-circle {
    border-bottom-left-radius: calc(var(--w)/2);
    border-bottom-right-radius: calc(var(--w)/2);
    border-top: 0;
    border-bottom: 1px dotted #999;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    top: auto;
    bottom: 0;
}

.service-item .leader-circle .circle-block p {
    color: #eee;
}




/*作品*/
.works-block.index_sec {
    padding-top: 0;
    padding-bottom: 80px;
}

.works-block .container {
    border-top: 1px solid #ddd;
    padding-top: max(6vw, 100px);
}

.workList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px 30px;
}

.workLink img {
    width: 100%;
}

.workLink .img {
    overflow: hidden;
}

.workLink img {
    transition: all .5s ease;
}


.works-block .workLink .name {
    position: relative;
    font-size: 1rem;
    margin-top: 15px;
    display: block;
    margin-bottom: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    color: #333;
}

.more_btn a {
    border: 1px solid #999;
    color: #333;
    min-width: 280px;
    display: inline-block;
    padding: 10px;
    border-radius: 99em;
    transition: all .5s ease;
}

.more_btn {
    text-align: center;
    margin-top: 80px;
}

/*事業群*/
/* .world_brand.index_sec {
    padding-bottom: 0;
} */

.world_brand.index_sec .container {
    border-radius: 30px 30px 0 0;
    /* box-shadow: 0px -10px 15.8px -33px rgba(0, 0, 0, 0.1), -2px -14px 126px -33px rgba(0, 0, 0, 0.15); */
    /* padding: 0 0 120px 0; */
    background: #f9f9f9;
    /* width: 85%; */
}

@media(max-width: 600px) {
    .world_brand.index_sec .container {
        width: 90%;
    }
}

.world_brand {
    width: 100%;
    padding: 125px 15px 160px;
    background: #f8f8f8
}

@media(max-width: 1280px) {
    .world_brand {
        padding:90px 15px 80px
    }
}

@media(max-width: 768px) {
    .world_brand {
        padding:65px 15px 50px
    }
}

.world_brand .brandZoom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #f9f9f9;
    max-width: 1848px;
    margin: 0 auto
}

@media(max-width: 576px) {
    .world_brand .brandZoom .subTit {
        letter-spacing:normal
    }
}

.world_brand .brandZoom .titleLogo {
    margin: 70px auto 0
}

.world_brand .brandZoom .leader-card .titleLogo {
    margin: 0 auto;
}

.world_brand .brandZoom .titleLogo a {
    display: block;
    text-align: center
}

.world_brand .brandZoom .titleLogo img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 305/125
}

@media(max-width: 1200px) {
    .world_brand .brandZoom .titleLogo {
        width:250px
    }
}

@media(max-width: 768px) {
    .world_brand .brandZoom .titleLogo {
        width:210px
    }
}

@media(max-width: 480px) {
    .world_brand .brandZoom .titleLogo {
        margin-top:45px
    }
}

.world_brand .brandZoom .bg-linear {
    position: relative;
    background-image: linear-gradient(180deg, #f9f9f9 68px, #ffffff 69px, #ffffff 75%, #f9f9f9)
}

.world_brand .brandZoom .bg-linear:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #f9f9f9 68px, var(--hover-color, #ffffff) 69px, #f9f9f9 var(--linear-height, 75%), #f9f9f9 90%);
    z-index: 2;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out
}

@media(max-width: 768px) {
    .world_brand .brandZoom .bg-linear {
        background-image:linear-gradient(180deg, #f9f9f9 45px, #ffffff 46px, #ffffff 75%, #f9f9f9)
    }

    .world_brand .brandZoom .bg-linear:before {
        background-image: linear-gradient(180deg, #f9f9f9 45px, var(--hover-color, #ffffff) 46px, #f9f9f9 var(--linear-height, 75%), #f9f9f9 90%)
    }
}

.world_brand .brandZoom .leader-card {
    --label-color: #212121;
    --hover-color: #dcdddd;
    --linear-height: 75%;
    width: 100%
}

@media(hover: hover) {
    .world_brand .brandZoom .leader-card:hover .bg-linear:before {
        opacity:1
    }
}

@media(max-width: 650px) {
    .world_brand .brandZoom .leader-card {
        max-width:540px
    }
}

.world_brand .brandZoom .leader-item {
    padding-bottom: 85px
}

@media(max-width: 767px) {
    .world_brand .brandZoom .leader-item {
        padding-bottom:45px
    }
}

@media(max-width: 650px) {
    .world_brand .brandZoom .leader-item .brand-ul {
        grid-template-columns:repeat(2, 1fr)
    }
}

.world_brand .brandZoom .brand-link {
    position: relative;
    z-index: 5;
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%
}

@media(hover: hover) {
    .world_brand .brandZoom .brand-link:hover .bg-linear:before {
        opacity:1
    }
}

.world_brand .brandZoom .brand-label {
    width: 250px;
    height: 46px;
    color: #fff;
    border-radius: 99em;
    background-color: var(--label-color, #212121);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    margin-top: 45px;
    position: relative;
    z-index: 5
}

@media(max-width: 768px) {
    .world_brand .brandZoom .brand-label {
        font-size:20px;
        width: 200px;
        height: 40px;
        margin-top: 30px
    }
}

.world_brand .brandZoom .brand-title {
    display: block;
    margin-top: 25px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .05em;
    text-align: center;
    position: relative;
    z-index: 5
}

@media(max-width: 1280px) {
    .world_brand .brandZoom .brand-title {
        font-size:18px
    }
}

@media(max-width: 768px) {
    .world_brand .brandZoom .brand-title {
        font-size:17px
    }
}

@media(max-width: 650px) {
    .world_brand .brandZoom .brand-title {
        padding:0;
        font-size: 16px
    }
}

@media(max-width: 480px) {
    .world_brand .brandZoom .brand-title {
        letter-spacing:normal;
        margin: 25px auto 0;
        font-size: 15px
    }
}

.world_brand .brandZoom .brand-ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: none;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 20px auto 0;
    padding: 0;
    font-size: 16px;
    position: relative;
    z-index: 5
}

.world_brand .brandZoom .brand-ul .brand-li {
    line-height: 1.5;
    padding: 0px 5px 5px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    display: block
}

.world_brand .brandZoom .brand-ul .brand-li::before {
    margin-right: 12px;
    margin-bottom: 3px;
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
}

@media(max-width: 1280px) {
    .world_brand .brandZoom .brand-ul {
        font-size:15px
    }

    .world_brand .brandZoom .brand-ul .brand-li::before {
        margin-right:4px;
    }
}

@media(max-width: 650px) {
    .world_brand .brandZoom .brand-ul {
        grid-template-columns:1fr
    }
}

.world_brand .brandZoom .brand-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: calc(100% + 8px);
    margin: 45px -4px 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media(max-width: 1280px) {
    .world_brand .brandZoom .brand-list {
        -ms-flex-wrap:wrap;
        flex-wrap: wrap;
    }
}

@media(max-width: 650px) {
    .world_brand .brandZoom .brand-list {
        margin: 20px -4px 0
    }
}

@media(max-width: 370px) {
    .world_brand .brandZoom .brand-list {
        width:100%;
        margin: 20px 0 0
    }
}

.world_brand .brandZoom .brand-list .brand-item {
    width: 25%;
    padding: 0 4px;
    --linear-height: 50%
}

.world_brand .brandZoom .brand-list .brand-item .brand-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 55px;
    position: relative;
    z-index: 2
}

.world_brand .brandZoom .brand-list .brand-item .brand-logo img {
    max-width: 205px;
    margin: 0 auto;
    display: block;
    height: auto
}

@media(max-width: 1400px) {
    .world_brand .brandZoom .brand-list .brand-item .brand-logo img {
        max-width:185px
    }
}

@media(max-width: 650px) {
    .world_brand .brandZoom .brand-list .brand-item .brand-logo img {
        max-width:65%
    }
}

@media(max-width: 480px) {
    .world_brand .brandZoom .brand-list .brand-item .brand-logo img {
        max-width:80%
    }
}

.world_brand .brandZoom .brand-list .brand-item.shifang {
    --label-color: #ffc217;
    --hover-color: #fce9b3
}

.world_brand .brandZoom .brand-list .brand-item.riverimg {
    --label-color: #00a7e1;
    --hover-color: #d3eef9
}

.world_brand .brandZoom .brand-list .brand-item.miracle {
    --label-color: #bf2766;
    --hover-color: #e9bcc8
}

.world_brand .brandZoom .brand-list .brand-item.leadway {
    --label-color: #7daa2d;
    --hover-color: #d5dfb5
}

.world_brand .brandZoom .brand-list .brand-item .brand-content {
    padding-bottom: 85px
}

@media(max-width: 767px) {
    .world_brand .brandZoom .brand-list .brand-item .brand-content {
        padding-bottom:65px
    }
}

@media(max-width: 1400px) {
    .world_brand .brandZoom .brand-list .brand-item .brand-label {
        width:200px;
        font-size: 20px
    }
}

@media(max-width: 1280px) {
    .world_brand .brandZoom .brand-list .brand-item {
        width:50%
    }
}

@media(max-width: 768px) {
    .world_brand .brandZoom .brand-list .brand-item .brand-label {
        font-size:18px;
        height: 40px
    }
}

@media(max-width: 650px) {
    .world_brand .brandZoom .brand-list .brand-item .brand-label {
        font-size:17px;
        width: 82%;
        max-width: 200px
    }
}

@media(max-width: 370px) {
    .world_brand .brandZoom .brand-list .brand-item {
        width:100%
    }
}



/**/
.join_block {
    background: linear-gradient(45deg, #f2430d 10%, #ff6e12 20%, #f2430d 35%);
    color: #fff;
    padding-bottom: max(8vw, 120px);
    overflow: hidden;
}

.join_block .section-subject {
    margin-bottom: 80px;
}

.join_block.index_sec .container {
    max-width: 1500px;
}

.join_block:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 13%;
    background: linear-gradient(to bottom, rgb(0 0 0 / 25%), transparent);
    top: 0;
    z-index: 1;
}

.join_block:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(342deg, #fa721c, transparent 30%);
    top: 0;
    left: 0;
    z-index: 0;
}

.join_txt {
    position: relative;
    z-index: 1;
}

.hands_scroll {
    width: 50%;
    transform: rotate(-24deg) translate(0px, 100%);
    transform-origin: left;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 30%;
    z-index: 1;
}

.hands_box {
    display: flex;
    animation: infinity-scroll-left 50s infinite linear 0.5s both;
}

.hands_in:nth-child(odd) img {
    margin-right: -9vw;
    transform: rotate(20deg);
    margin-top: -15px;
}

.hands_in img {
    width: 20vw;
    transform: rotate(22deg);
    margin-right: -8vw;
    filter: drop-shadow(15px 10px 10px rgb(0 0 0 / 20%));
}

a.to_btn {
    margin-top: 50px;
    display: inline-block;
    background: #fff;
    min-width: 280px;
    text-align: center;
    padding: 10px;
    border-radius: 99em;
    color: #333;
    font-weight: 600;
    opacity: 0;
    transition: all .5s ease;
}

.contact_bg img {
    width: 100%;
}

.c_bg_left {
    position: absolute;
    left: -8%;
    bottom: 0;
    z-index: 1;
}

.c_bg_right {
    position: absolute;
    right: -10%;
    top: -8%;
    z-index: 1;
}

.contact_deco .m_deco:first-child {
    position: relative;
    left: -30%;
    width: 90%;
}

.contact_deco .m_deco:first-child img {
    animation: floatUp_lit ease-out 3s infinite;
}

.contact_deco img {
    width: 100%;
    animation: floatUp ease-out 3.5s infinite;
    animation-direction: alternate;
}

.contact_deco {
    position: absolute;
    left: 0;
    top: 25%;
    width: 10vw;
    display: grid;
    grid-row-gap: max(5vw, 80px);
    z-index: 2;
    transform: translate(-10%, 0px);
}



@media (min-width:1200px) {

    .fixed_btn a:hover {
        background: #de0000;
    }

    .workLink:hover img {
        transform: scale(1.05);
    }

    .card_in:hover .spe_en_img>img {
        filter: grayscale(1) brightness(10);
    }

    .card_in:hover:before {
        height: 100%;
        bottom: 0;
        top: auto;
    }

    .card_in:hover h3,
    .card_in:hover p {
        color: #333;
    }

    .card_in:hover .card_pic:before {
        background: #fff;
    }

    .card_in:hover .hover_vis {
        opacity: 1;
    }

    .card_in.no_b:hover h3,
    .card_in.no_b:hover p {
        color: #fff;
    }

    .more_btn a:hover {
        background: #333;
        color: #fff;
        border-color: #333;
    }

    .fixed_btn a:hover {
        background: #de0000;
    }

    a.to_btn:hover {
        background: #fdd752;
    }
}

@media (max-width:2250px) {

    body,
    html,
    .wrapper_bg {
        font-size: clamp(15px, 1vw, 16px);
    }

    .bn_num {
        margin: 10px auto 0;
    }

    .co_right h2,
    .co_right {
        font-size: 3rem;
    }

    .sub_tit {
        margin-bottom: 50px;
    }

    h2.main_title,
    .section-subject .slogan {
        font-size: 4rem;
    }


    .card_pic {

        height: 18vw;
    }

    .three_steps.index_sec .container {
        width: calc(100% - 120px);
    }

    .bottom_in_pic {
        height: 42vw;
    }

}

@media (max-width:1800px) {

    .step_txt .num {
        width: 65px;
        height: 65px;
    }

    .step_txt {
        grid-template-columns: 65px auto;
    }

    .card_in {
        padding: 60px;
    }

    .card_pic {
        height: 19vw;
    }

    .three_steps.index_sec .container {
        align-items: center;
    }

}

@media (max-width:1700px) {

    .index_sec .container {
        width: 80%;
    }

    .intro-service .container {
        width: 70%;
    }

    span.co_num {
        padding: 0 10px 0 10px;
    }

    .service-block {
        max-width: 100%;
    }

    .step_txt {
        font-size: 18px;
    }

    .step_txt .num {
        width: 55px;
        height: 55px;
    }

    .step_txt {
        grid-template-columns: 55px auto;
    }

    .card_pic:before {
        height: 19vw;
    }

    .card_in {
        padding: 60px;
    }

    span.spe_en_img img {
        height: max(5vw, 80px);
    }

    .service-item .leader-circle .circle-block {
        --w: calc(950px / 3);
    }

    .service-item .half-border,
    .service-item .half-border .half-circle {
        --w: calc(950px / 3 + 30px);
    }

    .service-item .leader-circle .circle-block .item-img {
        --w: 90px;
    }

    .card_pic {
        height: 23vw;
    }   

    .c_bg_left {
        left: -25%;
        bottom: -10%;
    }

    .bottom_in_pic {
        height: 51vw;
    }

    .bottom_txt {
        grid-template-columns: auto 25% auto;
    }

    .price_bg {
        height: 48vw;
    }

    .price_bg img {
        object-fit: cover;
        height: 100%;
    }

}


@media (max-width:1500px) {
    .bn_tittop {
        width: 50%;
        margin: 0 auto -4%;
    }

    .bn_bigtit {
        line-height: 1.2;
    }

    .bn_txt {
        top: 2%;
        width: 70%;
    }

    .index_sec .container {
        width: 85%;
    }

    h2.main_title,
    .section-subject .slogan {
        font-size: 3.33rem;
    }

    .card_in h3 {
        font-size: 3rem;
    }

    .three_steps.index_sec .container {
        width: calc(100% - 80px);
    }

    .bottom_in_pic {
        height: 55vw;
    }

    .cooperation_block.index_sec .container {
        grid-column-gap: 8%;
        width: 90%;
    }

    .co_left {
        width: 40%;
    }

    .s_box {
        padding: 80px;
        grid-column-gap: 30px;
    }

    .steps_left.s_box {
        padding: max(7vw, 100px) 30px;
    }

    .step_txt .num {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .step_txt {
        grid-template-columns: 45px auto;
        grid-column-gap: 20px;
    }

    .step_txt .num:before {
        right: -10px;
    }

    .step_pic img {
        height: 24.6vw;
    }

    .step_pic {
        max-width: 20vw;
    }

    .bottom_txt {
        font-size: 3rem;
    }



    .service-item .leader-circle .circle-block {
        --w: calc(900px / 3);
    }

    .service-item .half-border,
    .service-item .half-border .half-circle {
        --w: calc(900px / 3 + 30px);
    }

    .c_bg_right {
        width: 40%;
    }

    .c_bg_left {
        width: 40%;
        left: -15%;
    }
}


@media (max-width:1300px) {
    .bn_deco_left {
        left: 30px;
    }

    .bn_deco_right {
        right: 30px;
    }

    .card_in {
        padding: 40px;
    }

    .card_pic {
        height: 26vw;
    }

    .card_pic:before {
        height: 22vw;
    }

    .co_right h2,
    .co_right {
        font-size: 2.66rem;
    }

    .service-item .leader-circle .circle-block {
        --w: calc(850px / 3);
    }

    .service-item .half-border,
    .service-item .half-border .half-circle {
        --w: calc(850px / 3 + 30px);
    }

    .bottom_in_pic {
        height: 58vw;
    }

    .bottom_txt {
        font-size: 2.66rem;
    }

    .three_steps.index_sec .container {
        width: calc(100% - 50px);
        grid-template-columns: 20% auto;
    }

    .step_txt {
        font-size: 16px;
    }

    .s_box {
        padding: 80px 50px;
    }

    .bottom_in.right h8 {
        font-size: 1.33rem;
    }
}

@media (max-width:1199px) {
    .bn_hands_center {
        width: 42%;
    }

    .fixed_btn {
        /* top: 10px; */
        right: 100px;
    }

    .adv_deco {
        display: none;
    }

    .section-subject {
        margin-bottom: 50px;
    }

    .advantage_block.index_sec {
        padding-bottom: max(9vw, 120px);
    }

    .three_steps.index_sec {
        padding: 100px 0;
    }

    .three_steps.index_sec .container {
        grid-template-columns: auto;
        margin: 0 auto;
        width: calc(100% - 100px);
    }

    .steps_left h2.main_title {
        writing-mode: initial;
        letter-spacing: 2px;
        margin: 10px 0 0;
        border-top: 0;
        padding-top: 0;
    }

    .steps_left.s_box {
        padding: 30px;
    }

    .three_steps span.di_color {
        display: inline;
    }

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

    .card_pic {
        height: 28vw;
    }

    .card_in {
        padding: 30px;
    }

    span.spe_en_img img {
        height: max(5vw, 65px);
    }

    .card_in p {
        margin-top: max(4vw, 60px);
        font-size: 18px;
    }

    .step_pic img {
        height: 27vw;
    }

    .step_pic {
        max-width: 22vw;
    }

    .three_steps.index_sec {
        padding: max(10vw, 120px) 0;
        overflow: hidden;
    }

    .fly_right {
        right: 30px;
    }

    .co_left {
        width: 42%;
    }

    .co_right h2,
    .co_right {
        font-size: 2.33rem;
    }

    .bottom_txt {
        font-size: 2.33rem;
    }

    .brands_in {
        width: max(7.5vw, 110px);
    }

    .service-item .leader-circle .circle-block {
        --w: calc(800px / 3);
    }

    .service-item .half-border,
    .service-item .half-border .half-circle {
        --w: calc(800px / 3 + 15px);
    }

    .service-item .leader-circle .circle-block .item-img {
        --w: 80px;
    }

    .service-block {
        grid-column-gap: 40px;
    }

    .hands_scroll {
        transform: rotate(-24deg) translate(0px, 90%);
    }

    .bottom_in_pic {
        height: 62vw;
    }

    .bottom_txt {
        grid-template-columns: auto 28% auto;
        margin-top: -15px;
    }

    .hands_in img {
        width: 25vw;
    }

    a.to_btn {
        margin-top: 30px;
        min-width: 220px;
    }

    .more_btn a {
        min-width: 220px;
    }

    .workList {
        grid-gap: 30px 15px;
    }

    .cooperation_block.index_sec .container {
        grid-template-columns: 45% auto;
    }

    .co_right h2,
    .co_right {
        font-size: 2rem;
    }

    .works-block.index_sec {
        padding-bottom: 30px;
    }

    .ball_left {
        width: 25%;
    }

    .ball_right {
        width: 33%;
    }
}

@media (max-width: 991px) {
    .bn_txt {
        width: 80%;
        top: 15%;
    }

    .bn_subtit {
        line-height: 1.2;
    }

    .bn_deco_left,
    .bn_deco_right {
        width: max(2vw, 30px);
    }

    .bn_deco_right {
        right: 15px;
    }

    .bn_deco_left {
        left: 15px;
    }

    .bn_tittop {
        width: 55%;
        margin: 0 auto -3%;
    }

    .hand_ri7 {
        right: -20%;
        position: relative;
    }

    .bn_hands_center {
        width: 70%;
        transform: translate(-50%, 2%);
    }

    .banner_block {
        height: calc(100vh - 120px);
    }

    .bn_hands_layer01 {
        width: 100%;
        margin: 0 auto;
        grid-template-columns: 22% 10% auto 10% 15%;
    }

    .hand_le2 {
        left: -15%;
    }

    .hand_le1 {
        display: none;
    }

    .bn_hands_layer02 {
        grid-template-columns: 27% 10% auto 18% 11%;
        width: 75%;
        margin: 0 auto;
    }

    .hand_le3 {
        grid-column: 1;
        grid-row: 1;
    }

    .hand_le4 {
        grid-column: 2;
        top: 22%;
        left: -16%;
    }

    .hand_le9 {
        display: none;
    }

    .hand_ri6 {
        grid-column: 4;
        position: relative;
        top: 17%;
    }

    .hand_ri8 {
        grid-column: 5;
    }

    .card_in h3 {
        font-size: 2.33rem;
    }

    canvas {
        max-width: 100%;
    }

    .bn_money_bottomle {
        width: 32%;
        bottom: 28%;
        left: -5%;
    }

    .bn_money_right {
        width: 23%;
        right: -3%;
        top: 21%;
    }

    .bn_money_tople {
        width: 23%;
        left: 6%;
        top: 10%;
    }

    .bn_money_topri {
        top: 5%;
        right: 15%;
        width: 11%;
    }

    .bn_hands_center {
        width: 45%;
    }

    .animated .brandItem.shifang {
        animation-delay: .5s;
    }

    .animated .brandItem.leadway,
    .animated .brandItem.riverimg {
        animation-delay: .8s;
    }

    span.spe_en_img img {
        height: 50px;
    }

    .card_in {
        padding: 20px;
    }

    .card_pic {
        height: 28vw;
    }

    .step_txt {
        font-size: 15px;
    }

    .step_txt .num {
        width: 35px;
        height: 35px;
        font-size: 15px;
    }

    .step_txt {
        grid-template-columns: 35px auto;
    }

    .s_box {
        padding: 80px 30px;
    }

    .bottom_in_pic {
        height: 66vw;
    }

    .three_steps.index_sec {
        padding: max(10vw, 100px) 0;
    }

    .bottom_in_pic {
        height: 66vw;
    }

    .bottom_txt {
        font-size: 2rem;
        margin-top: -10px;
    }

    .cooperation_block.index_sec .container {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        align-items: center;
        overflow: hidden;
    }

    .co_left {
        width: 100%;
        display: block;
        position: relative;
    }

    .co_right {
        width: 60%;
        margin: 0 auto 30px;
        text-align: center;
    }

    .brands_out {
        display: flex;
    }

    .brands_box {
        display: flex;
        animation: infinity-scroll-right 120s infinite linear 0.5s both;
    }

    .second .brands_box {
        animation: infinity-scroll-left 120s infinite linear 0.5s both;
    }

    .brands_in {
        padding: 15px;
    }

    .cooperation_block.index_sec {
        max-height: initial;
        height: auto;
    }

    .cooperation_block.index_sec {
        padding-bottom: 0;
    }

    .brands_out:last-child {
        display: none;
    }

    .cooperation_block.index_sec {
        padding-bottom: 50px;
    }

    .co_right .sub_tit {
        padding-bottom: 15px;
        margin-bottom: 30px;
    }

    .cooperation_block.index_sec:before,
    .cooperation_block.index_sec:after {
        height: 15%;
    }

    .service-item .leader-circle .circle-block {
        --w: calc(720px / 3);
    }

    .service-item .half-border,
    .service-item .half-border .half-circle {
        --w: calc(720px / 3 + 15px);
    }

    .service-block {
        grid-column-gap: 30px;
    }

    .service-item .leader-circle .circle-block p {
        margin-top: 0;
    }

    .service-item .leader-circle .circle-block .item-img {
        --w: 72px;
    }

}

@media (max-width:900px) {
    .bottom_txt {
        grid-template-columns: auto 30% auto;
    }

    .bottom_in_pic {
        height: 68vw;
    }

    .bottom_txt {
        font-size: 26px;
        grid-template-columns: auto 32% auto;
    }
}

@media (max-width:850px) {
    .fixed_btn a {
        padding: 7px;
    }

    .fixed_btn {
        /* top: 8px; */
        /* right: 90px; */
    }

    .bn_bigtit {
        font-size: max(7.5vw, 50px);
    }

    .bn_subtit {
        font-size: max(4.5vw, 30px);
    }

    h2.main_title,
    .section-subject .slogan {
        font-size: 3rem;
    }

    .workList {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact_deco {
        display: none;
    }

    .join_block .section-subject {
        margin-bottom: 30px;
    }

    .join_block {
        padding-bottom: max(8vw, 180px);
    }

    .c_bg_right {
        width: 35%;
    }

    .step_txt p br {
        display: none;
    }

    .service-item .leader-circle .circle-block {
        --w: calc(680px / 3);
    }

    .bottom_in_pic {
        height: 70vw;
    }

    .service-item .half-border,
    .service-item .half-border .half-circle {
        --w: calc(680px / 3 + 15px);
    }

    .animated .workLink.aos-init:nth-child(4),
    .animated .workLink.aos-init:nth-child(5),
    .animated .workLink.aos-init:nth-child(6),
    .animated .brandItem.shifang {
        animation-delay: .5s;
    }

    .animated .workLink.aos-init:nth-child(7),
    .animated .workLink.aos-init:nth-child(8),
    .animated .workLink.aos-init:nth-child(9),
    .animated .brandItem.leadway {
        animation-delay: .5s;
    }

    .animated .service-item.first,
    .animated .service-item.second,
    .animated .service-item.third {
        animation: 500ms cubic-bezier(0.34, 1.56, 0.81, 0.92) normal forwards 1 fadeInUp;
    }
}


@media (max-width:800px) {
    .bn_txt {
        top: 12%;
    }

    .bn_bigtit:before {
        -webkit-text-stroke: 15px #2763ea;
    }

    .bn_subtit:before {
        -webkit-text-stroke: 12px #2763ea;
    }

    .index_sec .container{
        width: 90%;
    }

    .step_txt p br {
        display: block;
    }

    .steps_right.s_box.grid_three {
        grid-template-columns: auto;
        grid-row-gap: 30px;
        padding: 30px 30px 60px;
    }

    .steps_in {
        display: grid;
        grid-template-columns: 45% auto;
        grid-gap: 30px;
        margin: 0 auto;
        width: 80%;
        border-bottom: 1px solid rgb(0 0 0 / 10%);
        padding-bottom: 30px;
    }

    .steps_in:last-child {
        border: 0;
        padding: 0;
    }

    .step_pic img {
        height: 33.2vw;
    }

    .step_pic {
        max-width: 27vw;
    }

    .steps_in {
        width: 85%;
    }

    .steps_in {
        width: 90%;
    }


    .bottom_in_pic {
        height: 80vw;
        overflow: hidden;
        width: 110%;
        position: relative;
        margin-top: -7%;
        bottom: 0;
        order: 3;
    }

    .bottom_txt {
        grid-template-columns: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 30px 30px 60px;
        margin-top: -10px;
    }

    .price_words.index_sec .container {
        width: 90%;
    }

    .fly_right {
        right: -8%;
        width: 20%;
    }

    .fly_left {
        left: 0;
        width: 20%;
    }

    .price_bg {
        height: 60vw;
    }

    .image.gif-container {
        order: 3;
    }

    .bottom_in_pic img {
        width: 100%;
        height: 96vw;
        object-position: top;
    }

    .price_words.index_sec {
        padding: max(15vw, 80px) 0 0
    }

    .service-block {
        grid-template-columns: 1fr 1fr;
    }

    .service-item.second {
        grid-column: 1 / 3;
        grid-row: 1;
        margin-bottom: -6%;
    }

}

@media (max-width:700px) {
    .fixed_btn {
        bottom: 0;
        top: auto;
        width: 100%;
        left: 0;
    }

    .fixed_btn a i {
        color: #f2430d;
    }

    .fixed_btn a {
        border-radius: 0;
        justify-content: center;
        height: 50px;
        background: #fdd752;
        color: #333;
        font-size: 18px;
    }

    .fixed_btn a i:before {
        border: 2px dotted #f2430d;
    }

    .bn_txt {
        width: 90%;
    }

    .bn_bigtit {
        font-size: max(7.5vw, 40px);
    }

    .bn_subtit {
        font-size: max(4.5vw, 24px);
    }

    body,
    html,
    .wrapper_bg {
        letter-spacing: .5px;
    }

    h2.main_title,
    .section-subject .slogan {
        font-size: 35px;
    }

    .sub_title {
        font-size: 18px;
    }

    .step_pic img {
        height: 37vw;
    }

    .step_pic {
        max-width: 30vw;
    }

    .steps_in {
        grid-gap: 20px;
        grid-template-columns: 50% auto;
        width: 95%;
    }

    .co_right {
        width: 80%;
    }

    .card_in p {
        margin-top: max(4vw, 50px);
        font-size: 16px;
    }

    .service-item.second {
        margin-bottom: -15px;
    }

    .steps_left.s_box {
        padding: 30px 15px;
        text-align: center;
    }
}

@media (max-width:600px) {
    .bn_hands_center {
        width: 85%;
        transform: translate(-50%, 0%);
    }

    .bn_tittop {
        width: 65%;
        margin: 0 auto -4%;
    }

    .bn_subtit {
        font-size: max(5.5vw, 20px);
    }

    h2.main_title,
    .section-subject .slogan {
        font-size: 30px;
    }

    .bn_bigtit:before {
        -webkit-text-stroke: 12px #2763ea;
    }

    .bn_subtit:before {
        -webkit-text-stroke: 10px #2763ea;
    }

    .bn_num img {
        display: none;
    }

    .bn_num img.vis_600 {
        display: block;
        width: 90%;
        margin: 0 auto;
    }

    .bn_deco_left {
        left: 5px;
    }

    .bn_deco_right {
        right: 5px;
    }

    .bn_deco_left,
    .bn_deco_right {
        width: max(2vw, 24px);
    }

    .index_sec,
    .three_steps.index_sec,
    .works-block .container {
        padding: max(6vw, 80px) 0;
    }

    .works-block .container {
        padding-bottom: 0;
    }

    .index_sec .container {
        width: 80%;
    }

    .card_in {
        padding: 50px 30px;
        background: #f2430d;
    }

    .card_pic {
        height: auto;
    }

    .card_pic:before {
        height: 85%;
    }

    span.spe_en_img img {
        height: 22vw;
    }

    .card_pic span {
        bottom: -14%;
    }

    .grid_three {
        grid-template-columns: auto;
    }

    .brands_in {
        padding: 8px;
        width: max(7.5vw, 100px);
    }

    .card_in p {
        margin-top: 16vw;
        font-size: 18px;
    }

    .card_in.no_b {
        margin: -1px 0;
    }

    .co_right {
        width: 100%;
    }

    .co_right h2,
    .co_right .sub_tit {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 25px;
    }

    span.co_num {
        padding: 0 5px;
    }

    .price_words.index_sec .container {
        width: 100%;
    }

    .bottom_in.right h8 {
        font-size: 13px;
        letter-spacing: 0;
    }

    .fly_left {
        left: -12%;
        width: 32%;
        top: -7%;
    }


    .bottom_txt {
        padding: 20px 15px 55px;
        margin-top: -5px;
        font-size: 20px;
    }

    .bottom_in_pic {
        width: 120%;
    }

    .c-auto-scroll-items img {
        width: 35rem;
    }

    .three_steps.index_sec .container {
        width: 80%;
        background: transparent;
        display: block;
    }

    .steps_left.s_box .sub_title {
        display: block;
        border-bottom: 1px solid rgb(255 255 255 / 40%);
        width: 100%;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .ball_right {
        width: 43%;
        right: -11%;
    }

    .ball_left {
        width: 55%;
    }

    .steps_right.s_box.grid_three {
        background: #fdd752;
        display: block;
    }

    .steps_in {
        grid-gap: 0;
        grid-template-columns: auto;
        width: 100%;
        margin-bottom: 30px;
    }

    .steps_in:last-child {
        margin-bottom: 0;
    }

    .step_pic {
        max-width: 61vw;
        margin: 0 auto;
    }

    .step_pic img {
        height: 74vw;
    }

    .step_txt {
        width: fit-content;
        margin: 0 auto 15px;
        z-index: 1;
    }

    .step_txt p {
        min-width: 140px;
    }

    .steps_left.s_box {
        padding: 0 0 30px;
        background: transparent;
        text-align: center;
    }

    .service-block {
        grid-template-columns: auto;
    }

    .service-item.second {
        margin-bottom: 0;
        grid-column: auto;
        grid-row: auto;
    }

    .service-block {
        grid-template-columns: auto;
        grid-row-gap: 30px;
    }

    .service-item .leader-circle .circle-block {
        --w: calc(750px / 3);
    }

    .service-item .half-border,
    .service-item .half-border .half-circle {
        --w: calc(750px / 3 + 15px);
    }

    .hands_in:nth-child(odd) img {
        margin-right: -15vw;
        transform: rotate(29deg);
        margin-top: -15px;
    }

    .hands_in img {
        width: 36vw;
        transform: rotate(28deg);
        margin-right: -14vw;
    }

    .hands_scroll {
        transform: rotate(-24deg) translate(0px, 100%);
        width: 100%;
        left: 0;
    }

    .join_block .sub_title {
        margin-top: 10px;
    }

    .join_block.index_sec {
        padding-bottom: max(8vw, 180px);
    }

    .join_txt p br {
        display: none;
    }

    .more_btn a {
        min-width: calc(100% - 60px);
    }

    .more_btn {
        margin-top: 50px;
    }

    .works-block.index_sec {
        padding-bottom: 0;
    }

}

@media (max-width:480px) {
    .bn_bigtit {
        max-width: 345px;
        margin: 0 auto;
        font-size: max(13vw, 45px);
    }

    .bn_subtit {
        font-size: max(5vw, 20px);
    }

    h2.main_title,
    .section-subject .slogan {
        font-size: 28px;
    }

    .section-subject .slogan br {
        display: none;
    }

    .card_in {
        padding: 40px 25px;
    }

    .three_steps span.di_color {
        display: block;
    }

    span.di_color {
        display: inline-block;
    }

    .workList {
        grid-template-columns: auto;
    }

    span.hid_ph {
        display: block;
        font-size: 0;
    }

}

@media (max-width:380px) {
    .bn_bigtit {
        max-width: 305px;
    }

    .bn_subtit:before {
        -webkit-text-stroke: 8px #2763ea;
    }

    .co_right h2,
    .co_right .sub_tit {
        font-size: 22px;
    }
}

@media (max-width:350px) {

    .co_right h2,
    .co_right .sub_tit {
        font-size: 20px;
    }

}