@charset "utf-8";
/*
Theme Name: standardmtech
*/

@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Thin.ttf');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-ExtraLight.ttf');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Light.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Medium.ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Black.ttf');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.inner{width: 100%;max-width: 1580px;margin: auto;padding: 0px 140px;}
@media (min-width: 768px) {
    /* Chrome */
    ::-webkit-scrollbar { width: 6px;height: 8px;}
    ::-webkit-scrollbar-track {border-radius: 10px;background-color: transparent;}
    ::-webkit-scrollbar-thumb {background-color: rgba(144, 147, 153, 0.3);transition: background-color 0.3s;border-radius: 10px;}
    ::-webkit-scrollbar-thumb:hover {background-color: rgba(144, 147, 153, 0.3);transition: background-color 0.3s;}
    /* Firefox */
    *{
        /* scrollbar-color:rgba(144, 147, 153, 0.3) rgba(255,255,255,0) ; */
        scrollbar-width: thin;
    }
}
:root{
    /* base colors */
    --v-black:#000000;
    --v-black-light: #002329;
    --v-orange:#E35728;
    --v-orange-dark:#B75D26;
    --v-orange-light:#FF8E5C;
    --v-white: #FFFFFF;
    --v-green-darker: #034854;
    --v-grey-dark:#404040;
    --v-grey: #818181;

    /* Public font size */
    --fs-90:90px;
    --fs-64:64px;
    --fs-60:60px;
    --fs-55:55px;
    --fs-52:52px;
    --fs-50:50px;
    --fs-48:48px;
    --fs-44:44px;
    --fs-42:42px;
    --fs-40:40px;
    --fs-32:32px;
    --fs-30:30px;
    --fs-28:28px;
    --fs-26:26px;
    --fs-20:20px;
    --fs-18:18px;
    --fs-16:16px;
    --fs-14:14px;
    --fs-13:13px;
    --fs-12:12px;

}
@media (max-width:1600px) {
    :root{
        --fs-90:85px;
        --fs-64:58px;
        --fs-60:54px;
        --fs-55:52px;
        --fs-52:50px;
        --fs-50:48px;
        --fs-48:44px;
        --fs-44:42px;
        --fs-42:40px;
        --fs-40:38px;
        --fs-32:30px;
        --fs-28:26px;
        --fs-26:24px;
    }
}
@media (max-width:1440px) {
    :root{
        --fs-90:75px;
        --fs-64:54px;
        --fs-60:50px;
        --fs-55:48px;
        --fs-52:48px;
        --fs-50:46px;
        --fs-48:40px;
        --fs-44:38px;
        --fs-42:38px;
        --fs-40:36px;
        --fs-32:28px;
        --fs-28:24px;
        --fs-26:22px;
        
    }

	
}
@media (max-width:1400px) {
    .inner{padding: 0 80px;}
}

@media (max-width:1240px) {
    :root{
        --fs-90:70px;
        --fs-64:48px;
        --fs-60:44px;
        --fs-55:42px;
        --fs-52:42px;
        --fs-50:40px;
        --fs-48:36px;
        --fs-44:34px;
        --fs-42:34px;
        --fs-40:32px;
        --fs-32:26px;
        --fs-30:26px;
        --fs-28:22px;
        --fs-26:20px;
        --fs-20:18px;
        --fs-18:16px;
        --fs-16:14px;
    }
}

@media (max-width:1024px) {
    .inner{padding: 0 40px;}
}


@media (max-width:980px) {
    :root{
        --fs-90:65px;
        --fs-64:42px;
        --fs-60:40px;
        --fs-55:38px;
        --fs-52:38px;
        --fs-50:36px;
        --fs-48:32px;
        --fs-44:30px;
        --fs-42:30px;
        --fs-40:28px;
        --fs-32:24px;
        --fs-30:24px;
        --fs-28:20px;
        --fs-26:18px;
        --fs-20:18px;
    }
}

@media (max-width:768px) {
    .pc-br{display: none;}
    .inner{padding: 0 40px;}
    :root{
        --fs-90:50px;
        --fs-64:28px;
        --fs-60:28px;
        --fs-55:28px;
        --fs-52:28px;
        --fs-50:26px;
        --fs-48:26px;
        --fs-44:24px;
        --fs-42:24px;
        --fs-40:24px;
        --fs-32:22px;
        --fs-30:20px;
        --fs-28:20px;
        --fs-26:16px;
        --fs-20:16px;
        --fs-18:16px;
    }

}

@media (max-width:510px) {
    .inner{padding: 0 20px;}
    :root{
        --fs-90:45px;
        --fs-64:20px;
        --fs-60:28px;
        --fs-55:26px;
        --fs-52:26px;
        --fs-48:20px;
        /* 后续在定义start */
        --fs-44:20px;
        --fs-42:20px;
        --fs-40:20px;
        --fs-32:18px;
        /* 后续在定义end */
        --fs-28:18px;
        --fs-20:14px;
        --fs-18:14px;
        --fs-14:14px;
        --fs-13:13px;
        --fs-12:12px;
    }
}


*,
*:before,
*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding: 0;margin: 0;-webkit-tap-highlight-color: #fff;}
html{background:none;-webkit-text-size-adjust:100%;height:100%;}
body{font-family: 'Outfit', Arial, Helvetica, sans-serif;font-size: var(--fs-16);font-weight: 400; margin: 0px;line-height: 1.5;color: var(--v-grey);text-align: left;background-color: #fff;}
hr{box-sizing: content-box;height: 0;overflow: visible}
b,strong{font-weight:800;}
button, input, optgroup, select, textarea {margin: 0; font-family: inherit;font-size: inherit;line-height: inherit;-webkit-appearance: none; -moz-appearance: none; appearance: none;outline: none;}

a{color: inherit;}
a, a:hover {text-decoration: none;}
a.underline, a.underline:hover {text-decoration: underline;}
p{margin: 0 0 20px;font-weight: 400;}
img{max-width: 100%;height: auto;border-style: none;vertical-align: middle;}
li{list-style: none;}
sub,sup {position: relative;font-size: 75%;line-height: 0;vertical-align: baseline;}
sub{bottom: -.25em;}
sup{top: -.5em;}
svg{overflow: hidden;vertical-align: middle;}
table{border-collapse: collapse}
th{text-align: inherit;text-align: -webkit-match-parent;}

label{display: inline-block;}
button{border-radius: 0;}
button:focus:not(:focus-visible){outline: 0;}
button,input,optgroup,select,textarea{margin: 0;font-family: inherit;font-size: inherit;line-height: inherit;}
button,input{overflow: visible;}
button,select{text-transform: none;}
[role=button]{cursor: pointer;}
select{word-wrap: normal;}
[type=button],[type=reset],[type=submit],button{-webkit-appearance: button;}
[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor: pointer;}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding: 0;border-style: none;}
input[type=checkbox],input[type=radio]{box-sizing: border-box;padding: 0;}
textarea{overflow: auto;resize: vertical;}

.whiet-button{border: 2px solid #fff;font-size: var(--fs-20);position: relative;z-index: 1;overflow: hidden;transition: background 0.5s ease-in-out, color 0s linear; color: #fff;display: flex;width: max-content;padding: 13px 36px;border-radius: 100px;font-weight: 400;gap: 24px;align-items: center;}
.whiet-button span{line-height: 120%;position: relative;transition: .4s;}
.whiet-button .botton-svg{display: flex;transition: .4s;}
.whiet-button .botton-svg svg path{transition: .4s;}
.whiet-button .botton-svg svg {width: 30px;transform: rotate(-90deg);transition: .4s;}
.whiet-button::before{content: '';display: block;width: 120px;height: 150px;background-color: #fff;position: absolute;top: 0%;left: 0%;border-radius: 50%;transition: .4s;z-index: -1;transform: translate(-100%, 100%);}
.whiet-button:hover::before{transform: translate(50%, 50%) scale(4);}
.whiet-button:hover{color: rgb(93, 158, 84); 
    background: #fff;
}
/* .whiet-button:hover .botton-svg svg{transform: rotate(-45deg);} */
.whiet-button:hover .botton-svg svg path{fill: rgb(93, 158, 84);}
.whiet-button:hover .botton-svg{transform: translateX(10px);}
.whiet-button:hover span{transform: translateX(5px);}

.green-button-rg{font-size: var(--fs-20);display: flex;position: relative;z-index: 1;overflow: hidden;transition: background 0.5s ease-in-out, color 0s linear;width: max-content;border-radius: 100px;font-weight: 400;align-items: center;    color: rgb(93, 158, 84);border: 2px solid rgb(93, 158, 84);gap: 12px;padding: 13px 32px;}
.green-button-rg span{line-height: 120%;position: relative;transition: .4s;}
.green-button-rg .botton-svg{display: flex;transition: .4s;}
.green-button-rg:hover .botton-svg svg path{transition: .4s;}
.green-button-rg .botton-svg svg path{transition: .4s;}
.green-button-rg .botton-svg svg{width: 30px;transform: rotate(-90deg);transition: .4s;}
.green-button-rg::before{content: '';display: block;width: 120px;height: 150px;background-color: #57998f;position: absolute;top: 0%;left: 0%;border-radius: 50%;transition: .4s;z-index: -1;transform: translate(-100%, 100%);}
.green-button-rg:hover::before{transform: translate(50%, 50%) scale(4);}
.green-button-rg:hover{color: #fff; 
    background: #57998f;
}
.green-button-rg:hover .botton-svg svg path{fill:#fff;}
/* .green-button-rg:hover .botton-svg svg{transform: rotate(-45deg);} */
.green-button-rg:hover .botton-svg{transform: translateX(10px);}
.green-button-rg:hover span{transform: translateX(5px);}

.content-button{font-size: var(--fs-26);position: relative;z-index: 1;overflow: hidden;transition: background 0.5s ease-in-out, color 0s linear;display: flex;width: max-content;border-radius: 100px;gap: 26px;align-items: center;font-weight: 400;color: #57998f;background: #fff;padding: 17px 44px 16px 55px;}
.content-button span{line-height: 120%;position: relative;transition: .4s;}
.content-button .botton-svg{display: flex;transition: .4s;}
.content-button .botton-svg svg {width: 30px;transform: rotate(-90deg);transition: .4s;}
.content-button .botton-svg svg path{fill:#57998f;}
.content-button:hover .botton-svg svg path{transition: .4s;}
.content-button::before{content: '';display: block;width: 120px;height: 150px;background-color: #417b72;position: absolute;top: 0%;left: 0%;border-radius: 50%;transition: .4s;z-index: -1;transform: translate(-100%, 100%);}
.content-button:hover::before{transform: translate(50%, 50%) scale(4);}
.content-button:hover{color: #fff; 
    background: #57998f;
}
.content-button:hover .botton-svg svg path{fill:#fff;}
/* .content-button:hover .botton-svg svg{transform: rotate(-45deg);} */
.content-button:hover .botton-svg{transform: translateX(10px);}
.content-button:hover span{transform: translateX(5px);}

.banner-title{min-height: 538px;display: flex;flex-direction: column;justify-content: center;}

h1{font-size: var(--fs-60);margin-bottom: 25px;line-height: 1.2;word-spacing: -2px;}
h2{font-size: var(--fs-40);margin-bottom: 26px;line-height: 1.2;font-weight: 600;}

@media (max-width:1240px) {
    .banner-title{min-height: 470px;}
    .green-button,.content-button{font-size: 26px;}
}
@media (max-width:1024px) {
    .banner-title{min-height: 400px;}
    .green-button,.content-button{font-size: 24px; padding: 12px 42px;}
    .green-button .botton-svg img{width: 29px;}

    /* .content-button{ padding: 14px 32px;} */
    
}
@media (max-width:980px) {
    .whiet-button{gap: 16px;}
    .whiet-button .botton-svg svg{width: 24px;}

    .green-button-rg{gap: 16px;}
    .green-button-rg .botton-svg svg{width: 24px;}

    .content-button {gap: 16px;}
    .content-button .botton-svg svg{width: 24px;}
}
@media (max-width:768px) {
    .banner-title { min-height: 240px;}
    .green-button,.content-button{font-size: 20px; padding: 12px 32px;gap: 12px;}
    .content-button .botton-svg img,
    .green-button .botton-svg img{width: 20px; height: 20px;}
    .whiet-button{padding: 10px 20px; gap: 12px;}
    .whiet-button .botton-svg svg{width: 20px;  height: 20px;}

    .green-button-rg{padding: 10px 20px; gap: 12px;}
    .green-button-rg .botton-svg svg{width: 20px;  height: 20px;}

    .content-button {gap: 12px;}
    .content-button .botton-svg svg{width: 20px;  height: 20px;}
    h2{margin-bottom: 12px;}
}



.grey-button{position: relative; z-index: 1; overflow: hidden; font-size: var(--fs-30);color: #fff;display: flex;width: max-content;padding: 16px 55px;background: rgba(255,255,255,.2);border-radius: 10px;font-weight: 400;gap: 24px; align-items: center;-webkit-tap-highlight-color:transparent;}
.grey-button::before {content: '';display: block;width: 120px;height: 150px;background-color: rgba(255,255,255,.3);position: absolute;top: 0%;left: 0%;border-radius: 50%;transition: .4s;z-index: -1;transform: translate(-100%, 100%);}
.grey-button span{line-height: 120%;position: relative;transition: .4s;}
.grey-button .botton-svg{display: flex;position: relative;transition: .4s;}
.grey-button .botton-svg img {width: 35px;transform: rotate(-90deg);transition: .4s;}
.grey-button:hover::before{transform: translate(50%, 50%) scale(4);}
.grey-button:hover .botton-svg{transform: translateX(10px);}
.grey-button:hover span{transform: translateX(5px);}

 *{
   -webkit-tap-highlight-color:transparent;
  }
@media (max-width:1024px) {
    .grey-button{padding: 12px 42px;}
    .grey-button .botton-svg img{width: 29px;}
}
@media (max-width:768px) {
    .grey-button{padding: 12px 32px;gap: 12px;}
    .grey-button .botton-svg img{width: 20px; height: 20px;}
}

.black-button{display: inline-block;padding: 13px 37px 13px 40px;border: 1px solid #272a31;border-radius: 50px;position: relative;overflow: hidden;transition: all 0.3s; cursor: pointer;}
.black-button span{font-size: 22px;font-weight: 300;color: #000;margin-right: 12px;transition: all 0.3s;}
.black-button .botton-svg{display: contents; transition: all 0.3s;}
.black-button::before{position: absolute; content: "";width: 15px;height: 250px;background:rgba(233, 237, 240, 0.3);top: 0%;left: -50%;transform: rotateZ(40deg) translate(-50%, -50%);transition: all 0.7s;pointer-events: none;}
.black-button .botton-svg svg{transition: all 0.3s;pointer-events: none;}
/* .black-button .botton-svg svg path{transition: all 0.3s;} */
.black-button:hover{background: #272a31;}
.black-button:hover span{color: #fff;}
.black-button:hover .botton-svg svg{transform: rotate(45deg);}
.black-button:hover .botton-svg svg path{stroke: #fff;}
.black-button:hover::before{left: 100%;}
@media (max-width:1024px) {
    .black-button{padding: 12px 30px 12px 30px;}
    .black-button span{font-size: 20px;}
}
@media (max-width:510px) {
    .black-button{padding: 12px 20px 12px 20px;}
    .black-button span{font-size: 18px;margin-right: 5px;}
    .black-button::before{left: -80%;}
    .black-button .botton-svg svg{width: 14px;}
}

.white-button{display: inline-block;padding: 13px 37px 13px 40px;border: 1px solid #e9edf0;border-radius: 50px;position: relative;overflow: hidden;transition: all 0.3s;cursor: pointer;}
.white-button span{font-size: 22px;font-weight: 300;color: #fff;margin-right: 12px;transition: all 0.3s;}
.white-button .botton-svg{display: contents; transition: all 0.3s;}
.white-button::before{position: absolute; content: "";width: 15px;height: 250px;background:rgba(39, 42, 49, 0.3);top: 0%;left: -50%;transform: rotateZ(40deg) translate(-50%, -50%);transition: all 0.8s;pointer-events: none;}
.white-button .botton-svg svg{transition: all 0.3s;pointer-events: none;}
.white-button .botton-svg svg path{stroke: #fff;}
.white-button:hover{background: #e9edf0;}
.white-button:hover span{color: #000;}
.white-button:hover .botton-svg svg{transform: rotate(45deg);}
.white-button:hover::before{left: 100%;}
.white-button:hover .botton-svg svg path{stroke: #000;}
@media (max-width:1024px) {
    .white-button{padding: 12px 30px 12px 30px;}
    .white-button span{font-size: 20px;}
}
@media (max-width:510px) {
    .white-button{padding: 12px 20px 12px 20px;}
    .white-button span{font-size: 18px;margin-right: 5px;}
    .white-button::before{left: -80%;}
    .white-button .botton-svg svg{width: 14px;}
}