*{
    font-family: "Roboto", sans-serif;
}

/* #region from */

.main-form{padding: 10.125rem 0;padding-top: 5.125rem;}
.main-form h2{
    font-size:2.8rem;
    font-weight:500;
    text-align:center;
    letter-spacing:.0313rem;
    line-height:3.75rem;
    hyphens:auto;
    margin-bottom:4rem;
}
.inquiry .headline .title {
    font-weight: bold;
}
 .main-form{
    /* padding:80px 0 160px; */
    max-width:76.25rem;
    /* padding-top: 12.5rem; */
}
/* .main-form form {padding-top: 6.25rem;} */
 .single-product .main-form>span{
    margin-bottom:3rem;
}
 .main-form span{
    display:block;
    text-align:left;
    color:var(--primary-color);
    font-size:1.25rem;
    margin-bottom:3.125rem;
}
 div.main-form form p{
    display:inline-block;
    width:32%;
    margin-right:1.5%;
    color:#585b5e;
    font-size:17.6px;
    vertical-align:top;
}

 .main-form h2{
    text-align:center;
}
 div.main-form form p:nth-of-type(6),div.main-form form p:nth-of-type(3){
    margin-right:0;
}
 div.main-form form p:nth-of-type(7), div.main-form form p:nth-of-type(8){
    width:100%;
    display:block;
}
div.main-form form p select{
    outline: none;
    appearance: none;
    background: url(../../../../themes/sytech/assets/img/b.png) 93% center no-repeat;
}
 div.main-form form p input,div.main-form form p textarea,
 div.main-form form p select{
    width:100%;
    padding:1.5625rem 1.375rem;
    border:.0625rem solid #d4d4d4;
    text-transform:capitalize;
    outline-color:var(--primary-color);
    border-radius:.25rem;
    font-size:1.125rem;
    font-weight:300;
    margin-bottom:0;
    color: #585B5E;
}
 div.main-form form p textarea{
    height:320px;
    resize:none;
    font-size:1.125rem;
}
 div.main-form form p input[type="submit"]{
    font-size:1.125rem;
    padding: 1rem 3.75rem;
    width: 12.125rem;
    color:white;
    background-color:var(--primary-color);
    border:.0625rem solid var(--primary-color);
    cursor:pointer;
    transition:all .2s ease;
    border-radius: var(--round-size);
}
 div.main-form form p input[type="submit"]:hover{
    background-color:black;
    color:white!important;
    border:.0625rem solid black;
}
 .main-form>span{
    margin-bottom:0;
    text-align:center!important;
}
 .main-form span{
    text-align:left;
}
 .main-form span.wpcf7-spinner{
    margin-top:.625rem;
    margin-bottom:-24px;
    margin-left:0;
}
/*! CSS Used from: https://yulong2.sytech.site/wp-content/themes/sytech/assets/css/products.css */
 div.pro-detial-content h2{
    font-size:2.8125rem;
    margin-bottom:.625rem;
    text-align:center;
}
 div.pro-detial-content div>span{
    color:var(--hover-color);
    font-size:1.3125rem;
}
 div.pro-detial-content div>p{
    color:#A4A4A4;
    font-size:1.1875rem;
    line-height:2.1875rem;
}
/*! CSS Used from: https://yulong2.sytech.site/wp-content/themes/sytech/assets/css/ipad.css */
 @media screen and (min-width: 48rem) and (max-width: 96.875rem){
     .content{
        max-width:73.125rem!important;
    }
}
 @media screen and (min-width: 48rem) and (max-width: 80rem){
     .content{
        max-width:70rem!important;
    }
}
 @media screen and (min-width: 48rem) and (max-width: 72.5rem){
     .content{
        max-width:62.5rem!important;
    }
}
 @media screen and (min-width: 48rem) and (max-width: 65rem){
     .content{
        max-width:54.6875rem;
    }
}
 @media screen and (min-width: 48rem) and (max-width: 56.25rem){
     .content{
        max-width:100%;
        padding-right:3%;
        padding-left:3%;
    }
}
 @media screen and (min-width: 50rem) and (max-width: 78.125rem){
     .content{
        padding-left:24px!important;
        padding-right:24px!important;
        max-width:100%!important;
    }
     div>h2{
        font-size:39.2px!important;
    }
 
     div.main-form form p{
        width:31.5%;
    }
     div.main-form form p input[type="submit"]{
        transform:scale(0.85);
    }
     .main-form{
        padding:80px 0 80px;
    }
}
/*! CSS Used from: https://yulong2.sytech.site/wp-content/themes/sytech/assets/css/mobile.css */
 @media screen and (max-width: 49.125rem){
     .content{
        padding-left:16px;
        padding-right:16px;
        max-width:100%;
        overflow:hidden;
    }
     h2{
        font-size:1.375rem;
        margin-bottom:16px;
        line-height:2.75rem;
    }
     .main-form{
        padding-bottom:64px;
        padding-top:0rem;
    }
     div.main-form form p{
        width:47%;
        margin-bottom:16px;
        margin-right:4.8%;
    }
     div.main-form form p:nth-of-type(even){
        margin-right:0;
    }
     .main-form>span{
        margin-bottom:0;
        text-align:center!important;
    }
     .main-form span{
        text-align:left;
    }
     .main-form span.wpcf7-spinner{
        margin-top:.3125rem;
        margin-bottom:0;
    }
     div.main-form form p:nth-of-type(3){
        margin-right:4.8%;
    }
     div.main-form form p{
        width:100%;
    }
     div.main-form form p input,div.main-form form p textarea{
        margin-top:0;
        padding:.75rem 1rem;
        font-size:.875rem;
        width:100%;
    }
     div.main-form form p textarea{
        height:160px;
    }
     div.main-form form p input[type="submit"]{
        width:160px;
        padding:.5rem .75rem;
        font-size:.875rem;
        width:100%;
    }
     .single-product div.pro-detial-content h2{
        font-size:1.375rem;
        margin-bottom:0;
    }
     .single-product .pro-detial-content div>span{
        font-size:1.125rem;
        margin-bottom:24px;
        display:block;
    }
     .single-product .pro-detial-content .inquiry>span{
        text-align:center;
    }
     .single-product div.pro-detial-content div>p{
        width:100%;
        font-size:var(--block-title-desc);
        line-height:28.8px;
        text-align:center;
    }
}
/*! CSS Used from: https://yulong2.sytech.site/wp-includes/css/dist/block-library/style.min.css?ver=6.1.1 ;
 media=all */
 @media all{
     ul{
        box-sizing:border-box;
    }
}
/*! CSS Used from: https://yulong2.sytech.site/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.7.4 ;
 media=all */
 @media all{
     .wpcf7 .screen-reader-response{
        position:absolute;
        overflow:hidden;
        clip:rect(.0625rem, .0625rem, .0625rem, .0625rem);
        clip-path:inset(50%);
        height:.0625rem;
        width:.0625rem;
        margin:-0.0625rem;
        padding:0;
        border:0;
        word-wrap:normal!important;
    }
     .wpcf7 form .wpcf7-response-output{
        margin:2em 0.5em 1em;
        padding:0.2em 1em;
        border:.125rem solid #00a0d2;
    }
     .wpcf7 form.init .wpcf7-response-output{
        display:none;
    }
     .wpcf7-form-control-wrap{
        position:relative;
    }
     .wpcf7-spinner{
        visibility:hidden;
        display:inline-block;
        background-color:#23282d;
        opacity:0.75;
        width:1.5rem;
        height:1.5rem;
        border:none;
        border-radius:100%;
        padding:0;
        margin:0 1.5rem;
        position:relative;
    }
     .wpcf7-spinner::before{
        content:'';
        position:absolute;
        background-color:#fbfbfc;
        top:.25rem;
        left:.25rem;
        width:.375rem;
        height:.375rem;
        border:none;
        border-radius:100%;
        transform-origin:.5rem .5rem;
        animation-name:spin;
        animation-duration:1000ms;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
    }
     @media (prefers-reduced-motion: reduce){
         .wpcf7-spinner::before{
            animation-name:blink;
            animation-duration:2000ms;
        }
    }
     .wpcf7 .wpcf7-submit:disabled{
        cursor:not-allowed;
    }
     .wpcf7 input[type="email"],.wpcf7 input[type="tel"]{
        direction:ltr;
    }
}
/*! CSS Used keyframes */
 @keyframes spin{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
 @keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}
 @keyframes blink{
    from{
        opacity:0;
    }
    50%{
        opacity:1;
    }
    to{
        opacity:0;
    }
}


/* #endregion */

/* #region banner */
.banner{
    width: 100%;
    height: 970px;
    background: url(../../../../themes/sytech/assets/img/banner.png) center no-repeat;
    background-size: cover;
    color: white;
    padding-top:5.625rem ;
}
.banner .content{
    text-align: center;
}
.banner h1{
    text-align: center;
    font-weight: 500;
    font-size: 3.25rem;
    max-width: 40.1875rem;
}
.banner .content>div{
    flex-direction: column;
    align-items: center;
}
.banner .content>div>img{
    max-width: 4rem;
}
.banner .content>div>p{
    font-size: 1rem;
    max-width: 40.1875rem;
}
.banner .content>div>.text{
    line-height: 2rem;
    margin-top: 1.875rem;
}
.banner .content>div .subtitle{
    line-height: 3.75rem;
}
.banner .content>div  .info{
    width: 100%;
    justify-content: space-between;
    margin-top: 6.25rem;
    gap: 3.75rem;
}
.banner .content>div .info>li{
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    flex: 1;
}
.banner .content>div .info>li>.title{
    font-size: 1.375rem;
    padding: 2.5rem 0;
}
.banner .content>div .info>li>.text{
    font-size: 1rem;
    opacity: 0.7;
    line-height: 1.5625rem;
}
.banner .content>div .info>li .round{
    transition: all .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 6.25rem;
    background-color: white;
}
.banner .content>div .info>li:hover .round{
    background-color: var(--primary-color);
}
.banner .content>div .info>li:hover .round img{
    filter: contrast(0) brightness(100);
}
.banner .content>div .info>li .round img{max-width: 2.1875rem;}
ul.share{
    display:flex;
    gap:10px;
    /* margin-top:30px; */
}
 .banner ul.share li{
    position: relative;
    flex-shrink:0;
    width:43px;
    height:43px;
    border-radius:50%;
    background-color:#ebebeb;
    margin-left:0.5rem;
    transition:all 0.3s ease;
}
.banner ul.share li .show{
    transition: all .3s;
    transform-origin:bottom;
    text-align: center;
    min-width: 200px;
    max-width: 200px;
    position: absolute;
    z-index: 2;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1);
    bottom: 170%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    color: black;
}
.banner ul.share li .show img{max-width: 100%;}
.banner ul.share li .show-img{
    max-width: 124px;
    min-width: 124px;
    max-height: 124px;
}
.banner ul.share li .show-img img{max-width: 100%;max-height: 100%;}
.banner ul.share li .show::after{
    position: absolute;
    content: '';
    border: 10px solid white;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom:-20px;
    left: 50%;
    transform: translateX(-50%);

}
.banner ul.share li:hover .show{
    transform:translateX(-50%) scale(1);
}
 .banner ul.share li:hover{
    background-color:var(--primary-color);
}
.banner ul.share li:hover i{
    filter: brightness(100);
}
 .banner ul.share a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    text-indent:-99999px;
}
 .banner ul.share .icon{
    width:50%;
    height:50%;
    background-position:center;
    background-repeat: no-repeat;
}

/* #endregion */

/* maps */
.maps{
    width: 100%;
    height: 32.1875rem;
}
.maps iframe{width: 100%;height: 100%;}