:root {
    --theme_color: #18366a;
    --title_color: #161616
}

ul {
    list-style: none
}

a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    font-size: inherit
}

div a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    font-size: inherit
}

i {
    font-style: normal
}

.swiper_box {
    position: relative
}

.swiper_content {
    max-width: 1420px;
    margin: 0 auto;
    position: relative;
    padding: 10px;
    overflow: hidden
}

button,input,textarea {
    outline: none;
    border: none;
    font-family: unset;
    color: var(--title_color)
}

input[type="submit"],button {
    cursor: pointer
}

textarea {
    resize: none
}

input[type="checkbox"] {
    cursor: pointer;
    appearance: none
}

input[type="number"] {
    -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

select {
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    font-family: unset;
    color: var(--title_color)
}

.center {
    text-align: center
}

.flex_start {
    justify-content: flex-start
}

.flex_center {
    justify-content: center
}

.flex_end {
    justify-content: flex-end
}

.flex_top {
    align-items: flex-start
}

.flex_middle {
    align-items: center
}

.flex_bottom {
    align-items: flex-end
}

body {
    color: var(--title_color);
    font-family: 'Bai Jamjuree',sans-serif
}

body.fixed {
    overflow: hidden;
    padding-right: 17px
}

.only_mobile {
    display: none
}

.content .content {
    padding: 0
}

.gap {
    gap: 1.25rem
}

li.swiper-slide {
    height: auto
}

.grecaptcha-badge {
    visibility: hidden
}

#fullscreen-loader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background-color: #fff
}

#fullscreen-loader::after {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    --c: no-repeat linear-gradient(var(--theme_color) calc(50% - 10px), transparent 0 calc(50% + 10px), var(--theme_color) 0);
    background: var(--c) 0% 100%,var(--c) 50% 100%,var(--c) 100% 100%;
    background-size: 20% calc(200% + 20px);
    animation: loader 1s infinite linear
}

@keyframes loader {
    33% {
        background-position: 0% 50%,50% 100%,100% 100%
    }

    50% {
        background-position: 0% 0%,50% 50%,100% 100%
    }

    66% {
        background-position: 0% 0%,50% 0%,100% 50%
    }

    100% {
        background-position: 0% 0%,50% 0%,100% 0%
    }
}

.head .subtitle {
    display: block;
    color: #303030;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 4.5px;
    margin-bottom: 18px
}

.head h1 {
    font-size: 4rem;
    line-height: 74px;
    font-weight: 700
}

.head h2 {
    font-size: 3rem;
    line-height: 62px;
    font-weight: 700
}

.head h2 span {
    color: var(--theme_color)
}

.head .desc {
    color: #4c4c4c;
    /* font-size: 17px; */
    line-height: 28px;
    font-weight: 500
}

.head .desc ul li {
    font-size: 17px;
    line-height: 2rem;
    display: grid;
    align-items: start;
    grid-template-columns: auto 1fr;
    gap: 12px
}

.head .desc ul li::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url(../CNC-Machining_files/coin4.svg) no-repeat center / contain;
    transform: translateY(7px)
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 192px;
    background-color: var(--theme_color);
    border: 1px solid var(--theme_color);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    gap: 6px;
    line-height: 2;
    padding: 8px 22px
}

.btn::after {
    content: '';
    display: block;
    width: 8px;
    height: 13px;
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-r.svg) no-repeat center / contain;
    transition: all 0.3s;
    filter: contrast(0) brightness(2)
}

.btn:hover {
    color: var(--theme_color);
    background-color: transparent
}

.btn:hover::after {
    transform: translateX(5px);
    filter: none
}

.btn_video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 192px;
    background-color: var(--theme_color);
    border: 1px solid var(--theme_color);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    gap: 6px;
    line-height: 2;
    padding: 8px 22px
}

.btn_video::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url(../../../../../../../../themes/sytech/assets/img/btn-video.svg) no-repeat center / contain;
    transition: all 0.3s;
    filter: contrast(0) brightness(2)
}

.btn_video:hover {
    color: fff;
    border-color: rgba(255,255,255,.6);
    background-color: transparent
}

.btn_video_trans {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 192px;
    background-color: transparent;
    border: 1px solid rgba(255,255,255,.6);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    gap: 6px;
    line-height: 2;
    padding: 8px 22px
}

.btn_video_trans::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url(../../../../../../../../themes/sytech/assets/img/btn-video.svg) no-repeat center / contain;
    transition: all 0.3s;
    filter: contrast(0) brightness(2)
}

.btn_video_trans:hover {
    color: fff;
    border-color: var(--theme_color);
    background-color: var(--theme_color)
}

.swiper_btns {
    display: flex;
    gap: 36px
}

.swiper_btns .btn_prev,.swiper_btns .btn_next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 50%;
    border: 1px solid var(--title_color);
    background-color: var(--title_color);
    position: relative;
    z-index: 2
}

.swiper_btns .btn_prev::before,.swiper_btns .btn_next::before {
    content: '';
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    position: absolute;
    z-index: -1;
    top: -1px;
    left: -1px;
    transition: all 0.3s;
    border-radius: 50%;
    background-color: var(--theme_color);
    opacity: 0
}

.swiper_btns .btn_prev::after,.swiper_btns .btn_next::after {
    content: '';
    display: block;
    width: 28%;
    height: 28%;
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-b.svg) no-repeat center / contain;
    transition: all 0.3s;
    filter: contrast(0) brightness(2)
}

.swiper_btns .btn_prev:hover,.swiper_btns .btn_next:hover {
    border-color: transparent;
    background-color: transparent
}

.swiper_btns .btn_prev:hover::before,.swiper_btns .btn_next:hover::before {
    opacity: 1
}

.swiper_btns .btn_next {
    transform: rotate(180deg)
}

.swiper_btns .swiper-button-disabled {
    pointer-events: none;
    cursor: default;
    box-shadow: none;
    border-color: rgba(36,36,36,.45);
    background-color: transparent
}

.swiper_btns .swiper-button-disabled::before {
    opacity: 0
}

.swiper_btns .swiper-button-disabled::after {
    filter: none!important
}

.swiper_btns .swiper-button-disabled:hover {
    cursor: default;
    box-shadow: none;
    border-color: rgba(36,36,36,.45);
    background-color: transparent
}

.swiper_btns .swiper-button-disabled:hover::before {
    opacity: 0
}

.swiper_btns .swiper-button-disabled:hover::after {
    filter: none
}

.swiper_btns.middle {
    width: 98%;
    max-width: 1672px;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.swiper_btns.middle div {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.swiper_btns.middle .btn_next {
    left: unset;
    right: 0;
    transform: translateY(-50%) rotate(180deg)
}

.swiper_btns.thin {
    width: 98%;
    max-width: 1794px;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.swiper_btns.thin div {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 24px;
    border: none;
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-w.svg) no-repeat center / contain
}

.swiper_btns.thin div::before,.swiper_btns.thin div::after {
    display: none
}

.swiper_btns.thin div:hover {
    box-shadow: none
}

.swiper_btns.thin .btn_next {
    left: unset;
    right: 0;
    transform: translateY(-50%) rotate(180deg)
}

.swiper_btns.thin .swiper-button-disabled {
    opacity: .5
}

.social {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem
}

.social li a {
    display: block;
    width: 20px;
    height: 20px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.3s;
    background: no-repeat center / contain
}

.social li a:hover {
    transform: scale(1.2)
}

.social .facebook a {
    background-image: url(../../../../../../../../themes/sytech/assets/img/facebook.svg)
}

.social .twitter a {
    background-image: url(../../../../../../../../themes/sytech/assets/img/twitter.svg)
}

.social .youtube a {
    background-image: url(../../../../../../../../themes/sytech/assets/img/youtube.svg)
}

.social .instagram a {
    background-image: url(../../../../../../../../themes/sytech/assets/img/instagram.svg)
}

.social .linkedin a {
    background-image: url(../../../../../../../../themes/sytech/assets/img/linkedin.svg)
}

.resource_nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.resource_nav ul li .item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 4px;
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    min-width: 180px;
    text-align: center;
    gap: 14px;
    padding: 10px
}

.resource_nav ul li .item i {
    width: 2rem;
    height: 2rem;
    background: no-repeat center / contain
}

.resource_nav ul li .item span {
    font-size: 17px;
    line-height: 24px;
    font-weight: 600
}

.resource_nav ul li .item:hover {
    background-color: #fff;
    border-color: var(--theme_color)
}

.resource_nav ul li.active .item {
    background-color: #fff;
    border-color: var(--theme_color)
}

.breadcrumbs {
    padding: 1rem 0
}

.breadcrumbs span {
    font-weight: 500
}

.breadcrumbs span span {
    color: var(--theme_color);
    font-weight: 700
}

.breadcrumbs span span a {
    font-weight: 500;
    transition: all 0.3s
}

.breadcrumbs span span a:hover {
    color: var(--theme_color)
}

.breadcrumbs span span:first-child a {
    position: relative;
    padding-left: 22px
}

.breadcrumbs span span:first-child a::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: url(../../../../../../../../themes/sytech/assets/img/icon-home.svg) no-repeat center / contain;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.white .breadcrumbs {
    padding: 26px 0
}

.white .breadcrumbs span {
    color: #fff
}

.white .breadcrumbs span span {
    color: var(--theme_color)
}

.white .breadcrumbs span span a {
    color: #fff
}

.white .breadcrumbs span span a:hover {
    color: var(--theme_color)
}

.white .breadcrumbs span span:first-child a::before {
    filter: contrast(0) brightness(2)
}

header {
    position: sticky;
    top: -3rem;
    z-index: 997;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,.1)
}

header .content {
    width: calc(100% - 2.4rem);
    max-width: 1730px
}

header .header_top {
    color: #fff;
    padding: 8px 0;
    background-color: var(--title_color)
}

header .header_top .inner {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto;
    gap: 20px
}

header .header_notice_swiper {
    width: 100%;
    height: 2rem;
    overflow: hidden;
    position: relative;
    padding-left: 30px
}

header .header_notice_swiper::before {
    content: '';
    display: block;
    width: 22px;
    height: 18px;
    background: url(../../../../../../../../themes/sytech/assets/img/icon-notice.svg) no-repeat center / contain;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

header .header_notice_swiper .swiper-slide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1rem;
    font-weight: 600;
    gap: 0 4px;
    opacity: 0;
    overflow: hidden
}

header .header_notice_swiper .swiper-slide.swiper-slide-active {
    opacity: 1
}

header .header_notice_swiper .swiper-slide p {
    text-wrap: nowrap
}

header .header_notice_swiper .swiper-slide a {
    font-size: 14px;
    color: var(--theme_color);
    text-decoration: underline;
    transition: all 0.3s;
    font-weight: 700
}

header .header_notice_swiper .swiper-slide a:hover {
    opacity: .8
}

header .func {
    display: flex;
    align-items: center;
    gap: 6px
}

header .social {
    margin-right: 24px
}

header .header_search {
    width: 225px
}

header .header_search form {
    display: grid;
    grid-template-columns: 1fr auto;
    border-radius: 4px;
    background-color: rgba(255,255,255,.12);
    outline: 1px solid transparent;
    overflow: hidden
}

header .header_search form input[type="text"] {
    width: 100%;
    padding: 0 12px;
    background-color: transparent;
    color: #fff;
    font-size: 14px
}

header .header_search form input[type="text"]::placeholder {
    color: #fff
}

header .header_search form label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 2rem;
    cursor: pointer;
    transition: all 0.3s
}

header .header_search form label::after {
    content: '';
    display: block;
    width: 17px;
    height: 17px;
    background: url(../../../../../../../../themes/sytech/assets/img/icon-search.svg) no-repeat center / contain;
    transition: all 0.3s;
    transform: translateY(-1px)
}

header .header_search form label:hover {
    background-color: var(--theme_color)
}

header .header_search form label input[type="submit"] {
    display: none
}

header .lang {
    border-radius: 4px;
    background-color: rgba(255,255,255,.14);
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto;
    min-width: 120px;
    cursor: pointer;
    gap: 6px;
    padding: 4px 12px;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    transition: all 0.3s
}

header .lang:hover {
    background-color: rgba(255,255,255,.2)
}

header .lang::before {
    content: '';
    display: block;
    width: 17px;
    height: 17px;
    background: url(../../../../../../../../themes/sytech/assets/img/icon-lang.svg) no-repeat center / contain;
    transform: translateY(-1px)
}

header .lang::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    background: url(../../../../../../../../themes/sytech/assets/img/select-w.svg) no-repeat center / contain;
    filter: contrast(0) brightness(2)
}

header .header_main {
    background-color: #fff
}

header .header_main .inner {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto;
    gap: min(84px, 4.375vw)
}

header .logo {
    display: block;
    overflow: hidden;
    position: relative;
    text-indent: -999px
}

header .logo img {
    display: block;
    width: 70px;
    height: auto
}

header .logo p {
    position: absolute;
    inset: 0
}

header nav .close_box {
    display: none
}

header nav .menu {
    display: flex;
    justify-content: flex-end;
    gap: min(34px, 1.77083334vw)
}

header nav .menu>li {
    position: relative
}

header nav .menu>li>a {
    display: block;
    line-height: 98px;
    font-size: 20px;
    font-weight: 700;
    padding-top: 4px;
    transition: all 0.3s;
    border-bottom: 2px solid transparent
}

header nav .menu>li>a:hover {
    color: var(--theme_color);
    border-color: var(--theme_color)
}

header nav .menu>li.current-menu-item>a,header nav .menu>li.current-menu-parent>a {
    color: var(--theme_color)
}

header nav .menu>li.menu-item-has-children {
    padding-right: 20px
}

header nav .menu>li.menu-item-has-children::after {
    content: '';
    display: block;
    width: 14px;
    height: 8px;
    background: url(../../../../../../../../themes/sytech/assets/img/select-b.svg) no-repeat center / contain;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(calc(-50% + 4px))
}

header nav .menu>li:hover ul {
    pointer-events: all;
    opacity: 1;
    padding: 1rem 1.5rem
}

header nav .menu>li:hover ul li {
    transform: translate(0)
}

header nav .sub-menu {
    left: -1.5rem;
    position: absolute;
    min-width: 12rem;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    padding: 1rem 1.5rem 0;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
    z-index: -1
}

header nav .sub-menu>li {
    margin-bottom: 5px;
    transition: all 0.4s;
    transform: translateY(-1rem)
}

header nav .sub-menu>li>a {
    display: block;
    padding: 8px 0;
    transition: all 0.3s;
    font-size: 14px;
    font-weight: 600
}

header nav .sub-menu>li>a:hover {
    color: var(--theme_color)
}

header .btns {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px 0 24px
}

header .btns .btn_factory {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    border-radius: 6px;
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    gap: 12px;
    line-height: 2;
    padding: 7px 21px 7px 18px
}

header .btns .btn_factory::before {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    background: url(../../../../../../../../themes/sytech/assets/img/icon-factory.svg) no-repeat center / contain;
    transform: translateY(-1px)
}

header .btns .btn_factory::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 6px;
    transition: all 0.3s;
    background-image: linear-gradient(to right,#82019f 0%,#6d1da8 20%,#5541ae 40%,#2e82ad 70%,#01ccab 100%)
}

header .btns .btn_factory:hover::after {
    filter: brightness(1.4)
}

header .btns .avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden
}

header .btns .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

header .btns .btn_lang,header .btns .btn_search,header .btns .btn_menu {
    display: none
}

header .header_menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: none;
    background-color: #fff;
    box-shadow: 0 6px 8px rgba(0,0,0,.05);
    border-top: 1px solid rgba(0,0,0,.14);
    width: max-content
}

header .header_menu.header_menu1 {
    width: 100%
}

header .header_menu.active {
    z-index: 3
}

header .header_menu .inner {
    display: grid;
    margin: 0 auto;
    max-width: 1920px;
    word-break: break-word;
    grid-template-columns: 24.0625% 1fr 23.8541667%
}

header .header_menu .intro {
    position: relative;
    z-index: 2
}

header .header_menu.header_menu3 .inner {
    grid-template-columns: 29.0625% 1fr 23.8541667%
}

header .header_menu .intro .img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1
}

header .header_menu .intro .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: top
}

header .header_menu .intro .info {
    max-width: 388px;
    margin: 0 auto;
    color: #fff;
    overflow: auto;
    height: calc(100vh - 170px);
    max-height: 40rem;
    padding: min(66px, 15.0684932%) 20px
}

header .header_menu .intro .info::-webkit-scrollbar {
    width: 4px
}

header .header_menu .intro .info::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 100px
}

header .header_menu .intro .info .title {
    font-size: 2rem;
    font-weight: 700
}

header .header_menu .intro .info .desc {
    font-size: 17px;
    line-height: 28px;
    opacity: .8;
    margin-top: 14px
}

header .header_menu .nav {
    padding: min(34px, 3.413655%) 20px;
    overflow: auto;
    height: calc(100vh - 170px);
    max-height: 40rem
}

header .header_menu .nav::-webkit-scrollbar {
    width: 4px
}

header .header_menu .nav::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 100px
}

header .header_menu .content {
    margin: 0;
    padding: 0;
    border-left: 1px solid rgba(0,0,0,.14)
}

header .header_menu.header_menu1 .nav .items {
    max-width: 796px;
    max-width: 876px;
    margin: 0 auto;
    column-count: 3;
    column-gap: 2rem;
    padding-bottom: 34px
}

header .header_menu.header_menu1 .nav .items .item {
    break-inside: avoid-column;
    margin-bottom: 1rem
}

header .header_menu.header_menu1 .nav .items .item strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-top: 34px;
    padding: 0 12px
}

header .header_menu.header_menu1 .nav .items .item strong a {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s
}

header .header_menu.header_menu1 .nav .items .item li {
    margin-bottom: 4px
}

header .header_menu.header_menu1 .nav .items .item li:last-child {
    margin-bottom: 0
}

header .header_menu.header_menu1 .nav .items .item li a {
    color: #666;
    font-weight: 600;
    transition: all 0.3s;
    vertical-align: top;
    display: block;
    padding: 8px 12px
}

header .header_menu.header_menu1 .nav .items .item li a:hover {
    color: var(--theme_color);
    background-color: rgba(244,65,52,.1)
}

header .header_menu.header_menu1 .nav .items .item li.active a {
    color: var(--theme_color);
    text-decoration: underline
}

header .header_menu.header_menu1 .content .items {
    max-width: 318px;
    margin: 0 auto;
    padding: min(68px, 15.01103753%) 20px;
    overflow: auto;
    height: calc(100vh - 170px);
    max-height: 40rem
}

header .header_menu.header_menu1 .content .items::-webkit-scrollbar {
    width: 4px
}

header .header_menu.header_menu1 .content .items::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 100px
}

header .header_menu.header_menu1 .content .items li {
    margin-bottom: 1rem
}

header .header_menu.header_menu1 .content .items li:last-child {
    margin-bottom: 0
}

header .header_menu.header_menu1 .content .items li a {
    color: #666;
    font-weight: 600;
    transition: all 0.3s;
    vertical-align: top
}

header .header_menu.header_menu1 .content .items li a:hover {
    color: var(--theme_color)
}

header .header_menu.header_menu1 .content .items .more {
    margin-top: 37px;
    color: var(--theme_color);
    font-weight: 600;
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding-right: 1rem
}

header .header_menu.header_menu1 .content .items .more::after {
    content: '';
    display: block;
    width: 7px;
    height: 13px;
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-r.svg) no-repeat center / contain;
    transition: all 0.3s;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

header .header_menu.header_menu1 .content .items .more:hover::after {
    transform: translate(5px,-50%)
}

header .header_menu.header_menu2 .nav .items,header .header_menu.header_menu4 .nav .items,header .header_menu.header_menu5 .nav .items {
    max-width: 796px;
    margin: 0 auto;
    column-count: 1;
    column-gap: 10%;
    padding-bottom: 34px
}

header .header_menu.header_menu2 .inner,header .header_menu.header_menu4 .inner,header .header_menu.header_menu5 .inner {
    grid-template-columns: 24.0625% 1fr;
    grid-template-columns: 37.5409836% 1fr
}

header .header_menu.header_menu2 .nav .items .item,header .header_menu.header_menu4 .nav .items .item,header .header_menu.header_menu5 .nav .items .item {
    break-inside: avoid-column;
    padding: .8rem 1.5rem;
    background-color: transparent;
    display: block;
    transition: all .3s;
    p {
        transition: all .3s
    }
}

header .header_menu.header_menu2 .nav .items .item:hover,header .header_menu.header_menu4 .nav .items .item:hover,header .header_menu.header_menu5 .nav .items .item:hover {
    background-color: #eec1be41;
    color: var(--theme_color)
}

header .header_menu:not(.header_menu1) .nav .items .item:hover strong a {
    color: var(--theme_color)!important
}

header .header_menu .nav .items .item:hover p {
    color: var(--theme_color)!important
}

header .header_menu.header_menu2 .nav .items .item strong,header .header_menu.header_menu4 .nav .items .item strong,header .header_menu.header_menu5 .nav .items .item strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
    padding-top: 0
}

header .header_menu.header_menu2 .nav .items .item strong a,header .header_menu.header_menu4 .nav .items .item strong a,header .header_menu.header_menu5 .nav .items .item strong a {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s
}

header .header_menu.header_menu2 .nav .items .item strong a:hover,header .header_menu.header_menu4 .nav .items .item strong a:hover,header .header_menu.header_menu5 .nav .items .item strong a:hover {
    color: var(--theme_color)
}

header .header_menu.header_menu2 .nav .items .item div,header .header_menu.header_menu4 .nav .items .item div,header .header_menu.header_menu5 .nav .items .item div {
    color: #666;
    font-weight: 500;
    line-height: 24px;
    padding-bottom: 8px
}

header .header_menu.header_menu3 .nav {
    padding: 0
}

header .header_menu.header_menu3 .nav .con {
    max-width: 876px;
    margin: 0 auto;
    padding: 4.01606426% 20px;
    height: calc(100vh - 170px);
    max-height: 40rem;
    display: grid;
    grid-template-rows: auto 1fr
}

header .header_menu.header_menu3 .nav .main {
    overflow: hidden;
    display: none;
    justify-content: space-between;
    padding-right: 6.6985646%
}

header .header_menu.header_menu3 .nav .main.active {
    display: flex
}

header .header_menu.header_menu3 .nav .main .terms {
    flex: 1;
    max-width: 338px;
    overflow: auto;
    margin-right: 1rem
}

header .header_menu.header_menu3 .nav .main .terms::-webkit-scrollbar {
    width: 4px
}

header .header_menu.header_menu3 .nav .main .terms::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 100px
}

header .header_menu.header_menu3 .nav .main .terms li {
    margin-bottom: 6px
}

header .header_menu.header_menu3 .nav .main .terms li:last-child {
    margin-bottom: 0
}

header .header_menu.header_menu3 .nav .main .terms li a {
    display: block;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s;
    border-radius: 4px;
    line-height: 24px;
    padding: 15px 20px
}

header .header_menu.header_menu3 .nav .main .terms li a:hover {
    color: #fff;
    background-color: var(--theme_color)
}

header .header_menu.header_menu3 .nav .main .terms li.active a {
    color: #fff;
    background-color: var(--theme_color)
}

header .header_menu.header_menu3 .nav .main .childTerms {
    flex: 1;
    max-width: 332px;
    overflow: auto;
    display: none
}

header .header_menu.header_menu3 .nav .main .childTerms.active {
    display: block
}

header .header_menu.header_menu3 .nav .main .childTerms::-webkit-scrollbar {
    width: 4px
}

header .header_menu.header_menu3 .nav .main .childTerms::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 100px
}

header .header_menu.header_menu3 .nav .main .childTerms .item {
    margin-bottom: 5px
}

header .header_menu.header_menu3 .nav .main .childTerms .item:last-child {
    margin-bottom: 0
}

header .header_menu.header_menu3 .nav .main .childTerms .item.active .title {
    border-color: rgba(0,0,0,.1)
}

header .header_menu.header_menu3 .nav .main .childTerms .item.active .title::after {
    transform: rotate(180deg)
}

header .header_menu.header_menu3 .nav .main .childTerms .item .title {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto;
    cursor: pointer;
    gap: 12px;
    border-bottom: 1px solid transparent;
    padding: 0 18px 20px 0
}

header .header_menu.header_menu3 .nav .main .childTerms .item .title a {
    display: block;
    max-width: max-content;
    transition: all 0.3s;
    color: #666;
    font-weight: 600
}

header .header_menu.header_menu3 .nav .main .childTerms .item .title a:hover {
    color: var(--theme_color)
}

header .header_menu.header_menu3 .nav .main .childTerms .item .title::after {
    content: '';
    display: block;
    width: 14px;
    height: 8px;
    background: url(../../../../../../../../themes/sytech/assets/img/select-b.svg) no-repeat center / contain;
    transition: all 0.3s
}

header .header_menu.header_menu3 .nav .main .childTerms .item .children {
    padding: 20px 0;
    display: none
}

header .header_menu.header_menu3 .nav .main .childTerms .item .children ul li {
    margin-bottom: 10px
}

header .header_menu.header_menu3 .nav .main .childTerms .item .children ul li:last-child {
    margin-bottom: 0
}

header .header_menu.header_menu3 .nav .main .childTerms .item .children ul li a {
    color: #666;
    font-size: 15px;
    transition: all 0.3s;
    vertical-align: top
}

header .header_menu.header_menu3 .nav .main .childTerms .item .children ul li a:hover {
    color: var(--theme_color)
}

header .header_menu.header_menu3 .nav .main .childTerms .item .children ul li.active a {
    color: var(--theme_color);
    font-weight: 600
}

header .header_menu.header_menu3 .nav .btc {
    padding-bottom: 4.273505%
}

header .header_menu.header_menu3 .content .items {
    max-width: 382px;
    margin: 0 auto;
    padding: min(68px, 15.01103753%) 20px;
    overflow: auto;
    height: calc(100vh - 170px);
    max-height: 40rem
}

header .header_menu.header_menu3 .content .items::-webkit-scrollbar {
    width: 4px
}

header .header_menu.header_menu3 .content .items::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 100px
}

header .header_menu.header_menu3 .content .items li {
    padding: 15px 0
}

header .header_menu.header_menu3 .content .items li a {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    gap: 8.77193%
}

header .header_menu.header_menu3 .content .items li a:hover img {
    transform: scale(1.03)
}

header .header_menu.header_menu3 .content .items li .img {
    width: 5rem;
    height: 5rem;
    border-radius: 6px;
    overflow: hidden
}

header .header_menu.header_menu3 .content .items li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.5s
}

header .header_menu.header_menu3 .content .items li .info .title {
    font-size: 18px;
    font-weight: 700;
    transition: all 0.3s;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

header .header_menu.header_menu3 .content .items li .info .date {
    color: #949494;
    font-size: 17px;
    font-weight: 500;
    display: grid;
    align-items: start;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin-top: 8px
}

header .header_menu.header_menu3 .content .items li .info .date::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background: url(../../../../../../../../themes/sytech/assets/img/icon-date.svg) no-repeat center / contain;
    transform: translateY(3px)
}

header .header_menu.header_menu3 .content .items .more {
    margin-top: 50px;
    color: var(--theme_color);
    font-size: 18px;
    font-weight: 600;
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding-right: 1rem
}

header .header_menu.header_menu3 .content .items .more::after {
    content: '';
    display: block;
    width: 7px;
    height: 13px;
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-r.svg) no-repeat center / contain;
    transition: all 0.3s;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

header .header_menu.header_menu3 .content .items .more:hover::after {
    transform: translate(5px,-50%)
}

header .header_menu_overlay {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    transition: opacity 0.3s;
    opacity: 0;
    pointer-events: none;
    z-index: -1
}

header .header_menu_overlay.active {
    opacity: 1;
    pointer-events: all
}

header .header_factory_menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    background-color: #fff;
    border-top: 1px solid #edeeef
}

header .header_factory_menu .content {
    max-width: 1400px
}

header .header_factory_menu .inner {
    display: grid;
    max-height: calc(100vh - 170px);
    grid-template-rows: auto auto 1fr;
    padding: 26px 0
}

header .header_factory_menu .close {
    display: block;
    width: 15px;
    height: 15px;
    background: url(../../../../../../../../themes/sytech/assets/img/close.svg) no-repeat center / contain;
    transition: all 0.3s;
    margin-left: auto;
    cursor: pointer
}

header .header_factory_menu .close:hover {
    transform: rotate(180deg)
}

header .header_factory_menu .head {
    font-size: 26px;
    font-weight: 700;
    margin-top: 6px
}

header .header_factory_menu .head span {
    color: var(--theme_color)
}

header .header_factory_menu .list {
    overflow: auto;
    margin-top: 40px;
    padding-bottom: 1px
}

header .header_factory_menu .list ul {
    display: grid;
    gap: 3rem 17px;
    min-height: 398px;
    grid-template-columns: repeat(4,1fr)
}

header .header_factory_menu .list ul li a {
    display: block
}

header .header_factory_menu .list ul li a:hover img {
    transform: scale(1.03)
}

header .header_factory_menu .list ul li .img {
    overflow: hidden;
    position: relative;
    padding-bottom: 67.6557864%;
    border-radius: 14px
}

header .header_factory_menu .list ul li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.5s;
    position: absolute;
    left: 0;
    top: 0
}

header .header_factory_menu .list ul li .info {
    margin-top: 28px
}

header .header_factory_menu .list ul li .info .title {
    font-size: 18px;
    line-height: 21px;
    font-weight: 700
}

header .header_factory_menu .list::-webkit-scrollbar {
    width: 4px
}

header .header_factory_menu .list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 100px
}

footer {
    position: relative;
    z-index: 10
}

footer:has(.footer_contact) .footer_main {
    padding-top: 194px
}

footer .footer_contact {
    position: relative
}

footer .footer_contact .flex {
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    width: calc(100% - 2.4rem);
    max-width: 1640px;
    border-radius: 19px;
    overflow: hidden;
    background: url(../../../../../../../../themes/sytech/assets/img/cta.jpg) no-repeat center / cover;
    padding: 50px 0 46px
}

footer .footer_contact .flex .content {
    width: 100%
}

footer .footer_contact .head {
    color: #fff
}

footer .footer_contact .head i {
    display: inline-block;
    vertical-align: top;
    width: 89px;
    aspect-ratio: 1;
    background: no-repeat center / contain
}

footer .footer_contact .head h2 {
    margin-top: 12px;
    font-size: 40px;
    line-height: 62px;
    font-weight: 700
}

footer .footer_contact .head .btn {
    margin-top: 30px
}

footer .footer_main {
    color: #fff;
    padding: 164px 0 98px;
    background-color: var(--title_color)
}

footer .footer_main .gap {
    gap: 3rem 1.25rem
}

footer .footer_main .slide_contact {
    width: 348px;
    margin-top: -74px
}

footer .footer_main .slide_contact .logo {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    position: relative;
    text-indent: -999px
}

footer .footer_main .slide_contact .logo img {
    display: block;
    width: auto;
    height: 103px
}

footer .footer_main .slide_contact .logo p {
    position: absolute;
    inset: 0
}

footer .footer_main .slide_contact ul {
    padding-top: 10px
}

footer .footer_main .slide_contact ul li {
    position: relative;
    padding: 2px 0 0 54px;
    margin-top: 25px
}

footer .footer_main .slide_contact ul li::before {
    content: '';
    display: block;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: no-repeat center / contain rgba(255,255,255,.13);
    position: absolute;
    left: 0;
    top: 0
}

footer .footer_main .slide_contact ul li span {
    display: block;
    font-weight: 600
}

footer .footer_main .slide_contact ul li a,footer .footer_main .slide_contact ul li p {
    line-height: 24px;
    opacity: .69
}

footer .footer_main .slide_contact ul li a {
    color: #fff;
    transition: all 0.3s
}

footer .footer_main .slide_contact ul li a:hover {
    opacity: 1;
    color: var(--theme_color)
}

footer .footer_main .slide_contact ul li p {
    margin-top: 4px
}

footer .footer_main .slide_contact ul .phone::before {
    background-image: url(../../../../../../../../themes/sytech/assets/img/icon-phone.svg)
}



.blog_main .rightmain {
    flex: 1
}

.blog_main .rightmain .btc {
    padding-bottom: 35px;
    margin-bottom: 46px;
    border-bottom: 1px solid rgba(0,0,0,.14)
}

.blog_main .rightmain .main_nav {
    padding-bottom: 35px;
    margin-bottom: 46px;
    border-bottom: 1px solid rgba(0,0,0,.14)
}

.blog_main .rightmain .main_nav ul {
    display: flex;
    gap: 10px
}

.blog_main .rightmain .main_nav ul li {
    font-size: 17px;
    font-weight: 600;
    color: #161616;
    line-height: 24px;
    min-width: 180px;
    padding: 10px 12px;
    display: flex;
    background-color: #f4f4f4;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer
}

.blog_main .rightmain .main_nav ul li.active,.blog_main .rightmain .main_nav ul li:hover {
    background-color: #fff;
    border: 1px solid var(--theme_color)
}

.blog_main .rightmain .main_nav ul li i {
    display: block;
    width: 31px;
    height: 31px;
    background: no-repeat center / contain
}

.blog_main .rightmain .list .blog_list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px 3.36702%
}

.blog_main .rightmain .list .blog_list .blog_item a {
    border-radius: 8px
}

.blog_main .rightmain .list .blog_list .blog_item .img {
    padding-bottom: 75.722467%
}

.blog_main .rightmain .list .blog_list .blog_item .info {
    padding: 18px 6.637% 18px
}

.blog_main .rightmain .list .blog_list .blog_item .info .title {
    font-size: 18px;
    line-height: 26px;
    color: #25292d;
    font-weight: 600
}

.blog_main .rightmain .list .blog_list .blog_item .date {
    font-size: 16px;
    font-weight: 400;
    padding: 13px 6.637168%
}

.search form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px
}

.search form input {
    width: 100%;
    border-radius: 4px;
    padding: 0 1rem;
    font-size: 16px;
    border: 1px solid rgba(188,188,188)
}

.search form button {
    width: 55px;
    height: 55px;
    border-radius: 4px;
    background-color: var(--theme_color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s
}

.search form button:hover {
    filter: brightness(1.3)
}

.search form button:after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url(../../../../../../../../themes/sytech/assets/img/search.svg) no-repeat center / contain
}

.contact {
    margin-top: 78px
}

.contact .left strong {
    font-size: 36px;
    font-weight: 700;
    color: #161616
}

.contact .left .social {
    display: flex;
    gap: 19px;
    margin-top: 20px
}

.contact .left .social li {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s
}

.contact .left .social li.active,.contact .left .social li:hover {
    background-color: var(--theme_color)
}

.contact .left .social li.active a,.contact .left .social li:hover a {
    filter: brightness(10)
}

.contact .left .social li a {
    filter: brightness(0);
    width: 100%;
    height: 100%;
    background: unset;
    display: flex;
    align-items: center;
    justify-content: center
}

.contact .left .social li a::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: no-repeat center / contain
}

.contact .left .social li a:hover {
    transform: unset
}

.contact .left .social li.facebook a::after {
    background-image: url(../../../../../../../../themes/sytech/assets/img/facebook.svg)
}

.contact .left .social li.twitter a::after {
    background-image: url(../../../../../../../../themes/sytech/assets/img/twitter.svg)
}

.contact .left .social li.youtube a::after {
    background-image: url(../../../../../../../../themes/sytech/assets/img/youtube.svg)
}

.contact .left .social li.instagram a::after {
    background-image: url(../../../../../../../../themes/sytech/assets/img/instagram.svg)
}

.contact .left .social li.linkedin a::after {
    background-image: url(../../../../../../../../themes/sytech/assets/img/linkedin.svg)
}

.contact .right {
    width: 53.785714%;
    margin-left: auto;
    padding-top: 28px
}

.contact .right form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    position: relative
}

.contact .right input[type='email'] {
    font-size: 18px;
    font-weight: 400;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.25);
    width: 100%;
    padding: 0 30px
}

.contact .right input[type='email']::placeholder {
    color: #999
}

.contact .right button {
    width: 270px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background-color: var(--theme_color);
    padding: 22px 1rem;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    line-height: 1;
    transition: all 0.3s
}

.contact .right button:hover {
    filter: brightness(1.2)
}

.contact .right button:hover::after {
    transform: translateX(5px)
}

.contact .right button::after {
    content: '';
    display: block;
    width: 9px;
    height: 12px;
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-r.svg) no-repeat center / contain;
    filter: brightness(10);
    transition: all 0.3s
}

.decoration {
    position: relative;
    z-index: 2
}

.decoration::after {
    content: '';
    display: block;
    width: 30.79710144%;
    aspect-ratio: 169/195;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(29%,30%);
    z-index: -1;
    background: url(../../../../../../../../themes/sytech/assets/img/decoration.svg) no-repeat center / contain
}

.quality_banner,.delivery_banner {
    background: no-repeat center bottom / cover
}

.quality_banner .flex,.delivery_banner .flex {
    padding: 50px 0;
    min-height: 678px
}

.quality_banner .flex .head,.delivery_banner .flex .head {
    padding-top: 1.1%;
    max-width: 750px
}

.quality_banner .flex h1,.delivery_banner .flex h1 {
    color: #fff;
    margin-bottom: 26px
}

.quality_banner .flex p,.delivery_banner .flex p {
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    font-weight: 500;
    max-width: 720px;
    margin-bottom: 30px
}

.quality_banner .flex li,.delivery_banner .flex li {
    color: rgba(255,255,255,.85)
}

.quality_banner .bannerbtns,.delivery_banner .bannerbtns {
    display: flex;
    gap: 14px;
    margin-top: 32px
}

.btn_trans {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 21px;
    line-height: 2;
    padding: 8px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.6);
    transition: all 0.3s
}

.btn_trans:hover {
    border: 1px solid var(--theme_color);
    background-color: var(--theme_color)
}

.btn_trans::after {
    content: '';
    display: block;
    width: 17px;
    height: 17px;
    margin-left: 5px;
    background: url(../../../../../../../../themes/sytech/assets/img/play.svg) no-repeat center / contain
}

.download_nav .nav ul {
    display: flex
}

.download_nav .nav ul li.active a {
    color: var(--theme_color);
    border-bottom: 3px solid var(--theme_color)
}

.download_nav .nav ul li a {
    font-size: 18px;
    font-weight: 600;
    color: #161616;
    padding: 26px 1rem 27px;
    min-width: 300px;
    text-align: center;
    border-bottom: 3px solid transparent;
    display: block;
    transition: all 0.3s
}

.download_nav .nav ul li a:hover {
    color: var(--theme_color)
}

.download_nav .nav ul li:first-child {
    margin-left: auto
}

.download_nav .nav ul li:last-child {
    margin-right: auto
}

.play {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 52px;
    height: 52px;
    background: url(../../../../../../../../themes/sytech/assets/img/play-r.svg) no-repeat center / contain;
    transition: all 0.3s
}

.play:hover {
    transform: translate(-50%,-50%) scale(1.1)
}

.partsswiper,.surface_parts {
    margin-top: 50px;
    position: relative;
    padding-bottom: 50px;
    overflow: hidden
}

.partsswiper .swiper-pagination,.surface_parts .swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    bottom: 3px
}

.partsswiper .swiper-pagination.swiper-pagination-bullets,.surface_parts .swiper-pagination.swiper-pagination-bullets {
    bottom: 5px
}

.partsswiper .swiper-pagination span,.surface_parts .swiper-pagination span {
    opacity: 1;
    width: 12px;
    height: 12px;
    transition: all 0.3s;
    background-color: #a5a5a5
}

.partsswiper .swiper-pagination span.swiper-pagination-bullet-active,.surface_parts .swiper-pagination span.swiper-pagination-bullet-active {
    background-color: var(--theme_color)
}

.partsswiper li,.surface_parts li {
    background-color: #f3f3f3;
    border-radius: 8px;
    overflow: hidden
}

.partsswiper li:hover img,.surface_parts li:hover img {
    transform: scale(1.03)
}

.partsswiper .img,.surface_parts .img {
    width: 100%;
    aspect-ratio: 447/300;
    overflow: hidden
}

.partsswiper .img img,.surface_parts .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: all 0.5s
}

.partsswiper p,.surface_parts p {
    font-size: 17px;
    color: #4c4c4c;
    line-height: 28px;
    font-weight: 500;
    padding: 12px 4.34782609% 18px
}

.machining_banner,.cutting_banner {
    padding-bottom: 55px;
    background: no-repeat center / cover;
}

.machining_banner .flex .head,.cutting_banner .flex .head {
    padding-top: 3.3%
}

.machining_banner .flex .head h1,.cutting_banner .flex .head h1 {
    margin-bottom: 17px
}

.machining_banner .flex .head span,.cutting_banner .flex .head span {
    font-size: 17px;
    line-height: 32px;
    font-weight: 400;
    color: rgba(255,255,255,.95);
    display: flex;
    margin-top: 22px;
    align-items: center;
    gap: 11px
}

.machining_banner .flex .head span::before,.cutting_banner .flex .head span::before {
    content: '';
    display: block;
    width: 13px;
    height: 18px;
    background: url(../../../../../../../../themes/sytech/assets/img/lock.svg) no-repeat center / contain
}

.machining_banner .flex .head .logo,.cutting_banner .flex .head .logo {
    border-top: 1px solid rgba(255,255,255,.25);
    margin-top: 52px;
    padding-top: 55px;
    max-width: 653px
}

.machining_banner .flex .head .logo ul,.cutting_banner .flex .head .logo ul {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .5rem
}

.machining_banner .flex .head .logo ul li,.cutting_banner .flex .head .logo ul li {
    display: flex;
    justify-content: center;
    align-items: center
}

.machining_banner .flex .head .logo .img,.cutting_banner .flex .head .logo .img {
    width: 158px;
    height: 57px
}

.machining_banner .flex .head .logo .img:hover img,.cutting_banner .flex .head .logo .img:hover img {
    opacity: 1
}

.machining_banner .flex .head .logo .img img,.cutting_banner .flex .head .logo .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.5s;
    opacity: .35
}

.machining_banner .flex .head .desc li,.cutting_banner .flex .head .desc li {
    font-weight: 400
}

.machining_banner .flex .head .bannerbtns,.cutting_banner .flex .head .bannerbtns {
    margin-top: 35px
}

.machining_banner .flex,.cutting_banner .flex {
    min-height: 748px
}

.machining_nav {
    background-color: #f2f2f2
}

.machining_nav .flex {
    display: block
}

.machining_nav.sticky .title {
    display: block
}

.machining_nav.sticky .flex {
    display: flex
}

.machining_nav .title {
    cursor: pointer;
    transition: all .3s;
    font-size: 20px;
    color: #161616;
    font-weight: 700;
    padding: 26px 0;
    white-space: nowrap;
    display: none
}

.machining_nav .title:hover {
    color: var(--theme_color)
}

.machining_nav ul {
    display: flex;
    gap: 5px
}

.machining_nav ul li {
    padding: 0 12px
}

.machining_nav ul li:first-child {
    margin-left: auto
}

.machining_nav ul li:last-child {
    margin-right: auto
}

.machining_nav ul li.active a {
    color: var(--theme_color);
    border-bottom: 3px solid var(--theme_color)
}

.machining_nav ul li a {
    font-size: 18px;
    color: #161616;
    font-weight: 600;
    display: block;
    min-width: 120px;
    text-align: center;
    padding: 26px .5rem;
    border-bottom: 3px solid transparent;
    transition: all 0.3s
}

.machining_nav ul li a:hover {
    color: var(--theme_color);
    border-bottom: 3px solid var(--theme_color)
}

.machining_options {
    margin-top: 64px
}

.machining_options ul {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem 1%
}

.machining_options li.active .option {
    box-shadow: 0 4px 10px rgba(94,94,94,.25);
    border: 1px solid transparent;
    background: #18366a;
}

.machining_options li.active .option::after {
    opacity: 0
}

.machining_options .option {
    display: flex;
    align-items: center;
    border-radius: 23px;
    border: 1px solid #bbb;
    transition: all 0.5s;
    padding: 30px 10.90909091%;
    padding-right: 9%;
    gap: 6.81818182%;
    height: 100%;
    position: relative;
    overflow: hidden
}

.machining_options .option::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s;
    z-index: 0;
    background: linear-gradient(45deg,rgb(24 54 106),rgb(24 54 106 / 60%),rgb(24 54 106))
}

.machining_options .option strong {
    font-size: 20px;
    line-height: 38px;
    font-weight: 700;
    color: #ffffff;
}

.machining_options.machining_options2 .option strong {
    font-size: 20px;
    line-height: 24px
}

.machining_options .option span {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    line-height: 28px;
    margin-top: 4px
}

.machining_options .option i {
    display: block;
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    background: no-repeat center / contain;
	z-index:1;
}

.machining_main {
    padding-top: 134px
}

.machining_main:last-of-type {
    /* padding-bottom:434px; */
}

.machining_main .main {
  
}

.machining_main .head h2 {
    font-size: 38px;
    line-height: 52px
}

.machining_main .head .desc {
    /* font-size: 17px; */
    font-weight: 500;
    color: #4c4c4c;
    line-height: 28px;
    margin: 12px 0
}

.machining_main .head .desc a {
    font-size: 17px;
    color: var(--theme_color);
    font-weight: 500;
    text-decoration: unset!important
}

.machining_main .right {
    width: 27.1428571%;
    flex-shrink: 0
}

.machining_main .right .con {
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(94,94,94,.25);
    background-color: rgba(255,255,255);
    padding: 28px 7.89473684% 0;
    position: sticky;
    top: 120px;
    z-index: 10
}

.machining_main .right .resource_swiper {
    position: relative;
    overflow: hidden;
    padding-bottom: 56px
}

.machining_main .right .resource_swiper .swiper-pagination {
    bottom: 6.2%;
    display: flex;
    justify-content: center;
    gap: 2px
}

.machining_main .right .resource_swiper .swiper-pagination span {
    width: 12px;
    height: 12px;
    background-color: #a5a5a5;
    opacity: 1
}

.machining_main .right .resource_swiper .swiper-pagination span.swiper-pagination-bullet-active {
    background-color: var(--theme_color)
}

.machining_main .right .title {
    font-size: 24px;
    font-weight: 700;
    color: #161616;
    line-height: 28px;
    display: block;
    margin-bottom: 33px
}

.machining_main .right li:not(.machining_main .right li:last-child) {
    margin-bottom: 30px
}

.machining_main .right li a {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9.2%
}

.machining_main .right li a:hover img {
    transform: scale(1.06)
}

.machining_main .right .img {
    width: 25.002632%;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0
}

.machining_main .right .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: all 0.5s
}

.machining_main .right strong {
    font-size: 18px;
    font-weight: 700;
    color: #161616;
    line-height: 21px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.machining_main .right li span {
    font-size: 17px;
    font-weight: 500;
    color: #949494;
    line-height: 20px;
    display: block;
    margin-top: 10px
}

.machining_main .right li span::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    margin-right: 11px;
    background: url(../../../../../../../../themes/sytech/assets/img/dateicon.png) no-repeat center / contain
}

.machining_main .pormpt,.cutting_project .pormpt {
    background-color: rgba(241,70,59,.04);
    border-radius: 8px;
    padding: 19px 29px;
    display: flex;
    gap: 14px;
    margin-top: 2rem
}

.machining_main .pormpt::before {
    content: '';
    display: block;
    width: 23px;
    height: 25px;
    margin-top: 2px;
    flex-shrink: 0;
    background: url(../../../../../../../../themes/sytech/assets/img/prompt.svg) no-repeat center / contain
}

.machining_main .pormpt p {
    font-size: 17px;
    color: #4c4c4c;
    line-height: 28px;
    font-weight: 500
}
.machining_main .pormpt a {
    color: var(--theme_color);
    font-size: 17px;
    line-height: 28px;
    font-weight: 500;
    transition: all .3s;
    text-decoration: none
}

.machining_main .pormpt a:hover {
    color: var(--title_color)
}

.machining_order {
    padding-top: 111px
}

.machining_order .head {
    margin-bottom: 55px
}

.machining_order .left {
    width: 48.434043%
}

.machining_order .left .imgs {
    width: 100%;
    position: relative;
    padding-bottom: 110.13513513%;
    border-radius: 26px;
    overflow: hidden
}

.machining_order .left .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s
}

.machining_order .left .img:hover img {
    transform: scale(1.03)
}

.machining_order .left .img.active {
    opacity: 1;
    z-index: 2
}

.machining_order .left .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s
}

.machining_order .orderright {
    width: 44.191489%
}

.machining_order .orderright .intro {
    flex: 1
}

.machining_order .orderright .intro ul li {
    margin-bottom: 21px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(94,94,94,.25);
    cursor: pointer;
    transition: all 0.3s;
    background-color: rgba(255,255,255,.72)
}

.machining_order .orderright .intro ul li.active {
    cursor: default
}

.machining_order .orderright .intro ul li.active .title::after {
    transform: rotate(180deg);
    background: url(../../../../../../../../themes/sytech/assets/img/add.svg) no-repeat center / contain
}

.machining_order .orderright .intro ul li.active .title {
    padding: 24px 7.6354679% 20px
}

.machining_order .orderright .intro ul li .title {
    transition: all 0.3s;
    display: grid;
    align-items: center;
    gap: 12px;
    grid-template-columns: 1fr auto;
    color: #333;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    padding: 16px 7.6354679%
}

.machining_order .orderright .intro ul li .title::after {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background: url(../../../../../../../../themes/sytech/assets/img/minsign.svg) no-repeat center / contain;
    transition: all 0.3s
}

.machining_order .orderright .intro ul li .detail {
    display: none;
    padding: 0 7.6354679% 34px;
    padding-right: 5%
}

.machining_order .orderright .intro ul li .detail .con {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px
}

.machining_order .orderright .intro ul li .detail .text {
    flex: 1;
    padding: 7px 0;
    padding-top: 5px
}

.machining_order .orderright .intro ul li .detail .text p {
    color: #666;
    font-size: 17px;
    line-height: 24px;
    font-weight: 500
}

.machining_order .orderright .intro ul li .detail .text p:not(.machining_order .orderright .intro ul li .detail .text p:last-child) {
    margin-bottom: 21px
}

.machining_order .orderright .intro ul li .detail .text strong {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: #383838;
    margin-bottom: 13px;
    display: block
}

.machining_order .orderright .intro ul li:last-child {
    margin-bottom: 0
}

.machining_order .orderright .intro ul li:first-child .detail {
    display: block
}

.machining_quality {
    padding-top: 88px;
    padding-bottom: 50px
}

.machining_quality .flex {
    margin-top: 48px
}

.machining_quality .reverse {
    flex-direction: row-reverse
}

.machining_quality .reverse .rightimg .imgbox::after {
    top: unset;
    bottom: 0;
    left: 0;
    right: unset;
    transform: translate(-26%,22%)
}

.machining_quality .reverse .leftlist {
    max-width: 414px
}

.machining_quality .leftlist {
    max-width: 410px;
    flex: 1;
    margin-top: -7px
}

.machining_quality .leftlist .intro .active h3 {
    color: #383838
}

.machining_quality .leftlist .intro .active h3::after {
    filter: brightness(1)
}

.machining_quality .leftlist .intro .active p {
    display: block
}

.machining_quality .leftlist .intro .item {
    margin-bottom: 21px
}

.machining_quality .leftlist .intro .item:first-child p {
    display: block
}

.machining_quality .leftlist .intro h3 {
    font-size: 20px;
    font-weight: 700;
    color: #949494;
    transition: all 0.3s;
    line-height: 24px;
    padding-left: 8.39506173%;
    position: relative;
    cursor: pointer
}

.machining_quality .leftlist .intro h3::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0;
    top: 4px;
    filter: grayscale(1) brightness(1.5);
    transition: all 0.3s;
    background: url(../../../../../../../../themes/sytech/assets/img/liyes-r.svg) no-repeat center / contain
}

.machining_quality .leftlist .intro p {
    font-size: 17px;
    line-height: 24px;
    font-weight: 600;
    padding-left: 8.39506173%;
    margin-top: 6px;
    display: none;
    height: auto!important
}

.machining_quality .leftlist .intro p strong {
    font-weight: 700
}

.machining_quality .leftlist .title {
    font-size: 22px;
    font-weight: 700;
    color: #161616;
    line-height: 34px;
    display: block;
    margin-bottom: 29px
}

.machining_quality .rightimg {
    width: 47.34042553%
}

.machining_quality .rightimg .imgbox {
    aspect-ratio: 444/484;
    position: relative
}

.machining_quality .rightimg .imgbox::after {
    bottom: unset;
    top: 0;
    transform: translate(29%,-23%)
}

.machining_quality .rightimg .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    opacity: 0;
    border-radius: 26px;
    overflow: hidden
}

.machining_quality .rightimg .img:hover img {
    transform: scale(1.03)
}

.machining_quality .rightimg .img.active {
    opacity: 1;
    z-index: 2
}

.machining_quality .rightimg .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: all 0.5s
}

.application_con .leftoptions {
    min-width: 45.65217391%
}

.application_con .leftoptions i {
    display: block;
    width: 55px;
    height: 50px;
    transition: all 0.2s;
    background: no-repeat center / contain
}

.application_con .leftoptions li {
    font-size: 19px;
    font-weight: 700;
    color: #848484;
    display: flex;
    align-items: center;
    background-color: #efefef;
    margin-bottom: 13px;
    padding: 14px 8.8095238%;
    gap: 1rem;
    border-radius: 14px;
    transition: all 0.3s;
    position: relative;
    cursor: pointer;
    z-index: 1;
    overflow: hidden
}

.application_con .leftoptions li::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: var(--theme_color);
    opacity: 0;
    transition: all 0.3s;
    border-radius: 14px
}

.application_con .leftoptions li:hover {
    color: #fff;
    z-index: 2
}

.application_con .leftoptions li:hover::after {
    opacity: 1
}

.application_con .leftoptions li:hover i {
    filter: brightness(10)
}

.application_con .leftoptions li.active {
    color: #fff;
    z-index: 2
}

.application_con .leftoptions li.active::after {
    opacity: 1
}

.application_con .leftoptions li.active i {
    filter: brightness(10)
}

.application_con .leftoptions a {
    font-size: 18px;
    font-weight: 600;
    color: #161616;
    display: flex;
    width: fit-content;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--theme_color);
    gap: 8px;
    margin-left: 11.42857142%;
    margin-top: 33px;
    transition: all 0.3s
}

.machining_main .application_con .leftoptions a {
    display: none!important
}

.application_con .leftoptions a:hover {
    color: var(--theme_color)
}

.application_con .leftoptions a:hover::after {
    transform: translateX(5px);
    filter: brightness(1)
}

.application_con .leftoptions a::after {
    content: '';
    display: block;
    width: 7px;
    height: 12px;
    filter: brightness(0);
    margin-top: 3px;
    transition: all 0.3s;
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-r.svg) no-repeat center / contain
}

.application_con .rightswiper {
    min-width: 57.60869565%;
    margin-left: -3.04347826%
}

.application_con .rightswiper .application_swiper {
    width: 100%;
    aspect-ratio: 529/577;
    overflow: hidden
}

.application_con .rightswiper .application_swiper a {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 26px;
    overflow: hidden
}

.application_con .rightswiper .application_swiper a:hover img {
    transform: scale(1.03)
}

.application_con .rightswiper .application_swiper .img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1
}

div.application_con .rightswiper .application_swiper .img {
    z-index: 0
}

.application_con .rightswiper .application_swiper .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: all 0.3s
}

.application_con .rightswiper .application_swiper .info {
    margin-top: auto;
    padding: 0 7.35849057% 37px;
    position: relative;
    z-index: 2
}

.application_con .rightswiper .application_swiper .info strong {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 29px
}

.application_con .rightswiper .application_swiper .info p {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255,255,255,.8);
    line-height: 28px;
    margin-top: 10px;
    margin-bottom: 31px
}

.application_con .rightswiper .application_swiper .info span {
    font-size: 18px;
    font-weight: 700;
    color: var(--theme_color);
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 8px
}

.application_con .rightswiper .application_swiper .info span:hover::after {
    transform: translateX(5px)
}

.application_con .rightswiper .application_swiper .info span::after {
    content: '';
    display: block;
    width: 7px;
    height: 12px;
    margin-top: 4px;
    transition: all 0.3s;
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-r.svg) no-repeat center / contain
}

.machining_services {
    padding-top: 116px
}

.machining_services .head {
    margin-bottom: 53px
}

.machining_services .con {
    border-radius: 24px;
    padding: 30px 0;
    max-width: 922px;
    border: 1px solid rgba(224,224,224,.89);
    background: linear-gradient(to right,rgba(241,241,241,.89),rgba(249,249,249,.89),rgba(212,212,212,.89))
}

.machining_services .con .leftcontent {
    border-right: 1px solid rgba(0,0,0,.05);
    flex: 1;
    max-width: 605px;
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative
}

.machining_services .con .leftcontent .machserveswiper {
    width: 100%;
    overflow: hidden
}

.machining_services .con .leftcontent .swiper-slide {
    width: 100%;
    aspect-ratio: 613/554;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 14.35562805%
}

.machining_services .con .leftcontent .swiper-slide i {
    display: block;
    width: 84px;
    height: 70px;
    background: no-repeat center / contain
}

.machining_services .con .leftcontent strong {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    color: #161616;
    margin-top: 24px
}

.machining_services .con .leftcontent p {
    font-size: 17px;
    color: #606060;
    line-height: 25px;
    margin-top: 15px
}

.machining_services .con .rightlist {
    width: 33.44191097%;
    height: 100%
}

.machining_services .con .rightlist li {
    display: flex;
    align-items: center;
    padding-left: 9.74025974%;
    gap: 6.8181818%;
    cursor: pointer
}

.machining_services .con .rightlist li:not(.machining_services .con .rightlist li:last-child) {
    margin-bottom: 41px
}

.machining_services .con .rightlist li.active p {
    font-weight: 700;
    color: var(--theme_color)
}

.machining_services .con .rightlist li:hover p {
    color: var(--theme_color)
}

.machining_services .con .rightlist li i {
    display: block;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    background: no-repeat center / contain
}

.machining_services .con .rightlist li p {
    font-size: 18px;
    font-weight: 600;
    color: #161616;
    line-height: 20px;
    transition: all 0.3s;
    max-width: 171px
}

.machining_faq {
    padding-top: 150px;
    padding-bottom: 434px
}

.machining_faq .lefttitle {
    max-width: 417px
}

.machining_faq .lefttitle .img {
    width: 35.09615385%;
    aspect-ratio: 146/156;
    margin-top: 39px
}

.machining_faq .lefttitle .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.machining_faq .questionlist {
    width: 66.85714286%;
    padding-top: 17px
}

.machining_faq .questionlist .faq {
    transition: all 0.3s
}

.machining_faq .questionlist .faq:not(.machining_faq .questionlist .faq:last-child) {
    border-bottom: 1px solid rgba(76,76,76,.14)
}

.machining_faq .questionlist .faq:first-child .question {
    padding-top: 0
}

.machining_faq .questionlist .faq:first-child .question strong span {
    margin-top: 9px
}

.machining_faq .questionlist .faq:first-child .answer {
    display: block
}

.machining_faq .questionlist .faq.active:not(.machining_faq .questionlist .faq.active:last-child) {
    border-bottom: 1px solid #242424
}

.machining_faq .questionlist .faq.active .question span {
    transform: rotate(90deg)
}

.machining_faq .questionlist .faq.active .answer {
    display: block
}

.machining_faq .questionlist .faq .question {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 2;
    transition: 0.3s;
    padding: 37px 2.35294% 40px
}

.machining_faq .questionlist .faq .question strong {
    flex: 1;
    transition: all 0.3s;
    font-size: 22px;
    font-weight: 700;
    color: #333
}

.machining_faq .questionlist .faq .question span {
    display: block;
    width: 10px;
    height: 13px;
    transition: all 0.3s;
    transform: rotate(-90deg);
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-b.svg) no-repeat center / contain
}

.machining_faq .questionlist .faq .answer {
    color: #3d3d3d;
    font-weight: 500;
    letter-spacing: -.2px;
    font-size: 18px;
    line-height: 32px;
    display: none;
    padding: 0 2.35294% 33px
}

.machining_service .videolist {
    margin-top: 50px
}

.machining_service .videolist .videos {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem 3.93617021%
}

.machining_service .videolist .video_item {
    display: flex;
    flex-direction: column
}

.machining_service .videolist .video_item .img {
    width: 100%;
    aspect-ratio: 442/280;
    position: relative;
    overflow: hidden;
    border-radius: 12px
}

.machining_service .videolist .video_item .img:hover img {
    transform: scale(1.03)
}

.machining_service .videolist .video_item .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: all 0.3s
}

.machining_service .videolist .video_item .info {
    padding: 33px 0 0
}

.machining_service .videolist .video_item .info strong {
    font-size: 22px;
    color: #161616;
    line-height: 30px;
    font-weight: 700
}

.machining_service .videolist .video_item .info p {
    /* font-size: 17px; */
    font-weight: 500;
    color: #606060;
    line-height: 30px;
    margin-top: 5px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical
}

.machining_service .videolist .video_item .info span {
    display: flex;
    font-size: 18px;
    font-weight: 700;
    color: var(--theme_color);
    transition: all 0.3s;
    width: fit-content;
    gap: 12px;
    margin-top: 18px
}

.machining_service .videolist .video_item .info span:hover::after {
    transform: translateX(5px)
}

.machining_service .videolist .video_item .info span::after {
    content: '';
    display: block;
    width: 7px;
    height: 12px;
    margin-top: 7px;
    transition: all 0.3s;
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-r.svg) no-repeat center / contain
}

.machining_materials {
    padding-top: 126px
}

.machining_materials .materials_nav {
    border-bottom: 1px solid rgba(51,51,51,.25);
    margin-top: 29px
}

.machining_materials .materials_nav ul {
    display: flex
}

.machining_materials .materials_nav ul li {
    width: 50%;
    font-size: 24px;
    line-height: 26px;
    font-weight: 700;
    color: #333;
    transition: all 0.3s;
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 3px solid transparent;
    cursor: pointer
}

.machining_materials .materials_nav ul li.active {
    color: var(--theme_color);
    border-bottom: 3px solid var(--theme_color)
}

.machining_materials .materials_nav ul li:hover {
    color: var(--theme_color)
}

.machining_materials .materialcon {
    margin-top: 35px
}

.machining_materials .materialcon .list {
    width: 39.13043478%;
    flex-shrink: 0
}

.machining_materials .materialcon .list li {
    font-size: 17px;
    font-weight: 500;
    color: #666;
    transition: all 0.3s;
    padding: 11px 6.11111111%;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer
}

.machining_materials .materialcon .list li.active,.machining_materials .materialcon .list li:hover {
    color: #fff;
    background: var(--theme_color)
}

.machining_materials .materialcon .material_swiper {
    width: 50.43478261%;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px
}

.machining_materials .materialcon .material_swiper .material_a {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden
}

.machining_materials .materialcon .material_swiper .material_a:hover img {
    transform: scale(1.03)
}

.machining_materials .materialcon .material_swiper .material_a .img {
    border: 1px solid #d3d3d3;
    border-radius: 8px 8px 0 0
}

.machining_materials .materialcon .material_swiper .material_a .img img {

    transition: all 0.5s
}

.machining_materials .materialcon .material_swiper .material_a .info {
    background-color: #262626;
    padding: 25px 3% 0px
}

.machining_materials .materialcon .material_swiper .material_a .info strong {
    font-size: 18px;
    font-weight: 600;
    color: #fff
}

.machining_materials .materialcon .material_swiper .material_a .info p {
    font-size: 14px;
    line-height: 24px;
    color: rgba(255,255,255,.6);
    width: 99%;
    margin-top: 10px
}

div.machining_materials .materialcon .material_swiper .material_a .info p {
    font-size: 14px;
    line-height: 1.5
}

.machining_materials .materialcon~.materialcon .material_swiper .material_a .params {
    border: none;
    margin: 0;
    padding: 10px 0
}

.machining_materials .materialcon~.materialcon .material_swiper .material_a .params br {
    display: none
}

.machining_materials.wire_available .materialcon .material_swiper .material_a .params {
    border: none;
    margin: 0;
    padding: 10px 0
}

.machining_materials.wire_available .materialcon .material_swiper .material_a .params br {
    display: none
}

.machining_materials .materialcon .material_swiper .material_a .params {
       border-top: 1px solid rgba(255, 255, 255, .2);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    margin-top: 22px;
    padding: 24px 0 0px;
    margin-bottom: 16px;
}

.machining_materials .materialcon .material_swiper .material_a .params ul {
    margin: 12px 0
}

.machining_materials .materialcon .material_swiper .material_a .params li {
    font-size: 14px;
    color: rgba(255,255,255,.6);
    margin-bottom: 7px
}

.machining_materials .materialcon .material_swiper .material_a .params span {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme_color)
}

.machining_materials .materialcon .material_swiper .material_a .morebtn {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme_color);
    display: flex;
    gap: 11px;
    width: fit-content
}

.machining_materials .materialcon .material_swiper .material_a .morebtn:hover::after {
    transform: translateX(5px)
}

.machining_materials .materialcon .material_swiper .material_a .morebtn::after {
    content: '';
    display: block;
    width: 6px;
    height: 12px;
    margin-top: 7px;
    transition: all 0.3s;
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-r.svg) no-repeat center / contain
}

.machining_materials .notshow {
    display: none;
    opacity: 0
}

.machining_materials .pormpt {
    margin-top: 60px
}

.machining_finishes {
    padding-top: 123px
}

.machining_finishes .table {
    margin-top: 48px;
    margin-bottom: 39px;
    max-height: 847px;
    overflow: auto
}

.machining_finishes .table table {
    width: 100%;
    border-collapse: collapse;
    height: 100%
}

.machining_finishes .table td {
    font-size: 16px;
    line-height: 25px;
    color: #4c4c4c;
    font-weight: 500;
    padding: 10px 10px 10px
}

.machining_finishes .table td:nth-child(2) {
    font-weight: 700;
    width: 16.0869565%
}

.machining_finishes .table td:not(.machining_finishes .table td:nth-child(2)):not(.machining_finishes .table td:first-child):not(.machining_finishes .table td:last-child) {
    text-align: center
}

.machining_finishes .table td:first-child {
    width: 16%
}

.machining_finishes .table td:first-child img {
    max-width: 100%;
    max-height: 100%;
    margin: auto 0;
    cursor: pointer
}

.machining_finishes .table td:last-child {
    width: 21.73913043%
}

.machining_finishes .table td:first-child {
    padding: 0
}

.machining_finishes .table tr:first-child {
    background-color: #18366a;
}

.machining_finishes .table tr:first-child td {
    font-weight: 700;
    color: #fff;
    padding: 12px 10px 12px;
}

.machining_finishes .table tr:not(.machining_finishes .table tr:first-child) {
    border-bottom: 1px solid rgba(76,76,76,.14)
}

.machining_finishes .table a {
    transition: all 0.3s
}

.machining_finishes .table tr td:nth-of-type(1) a {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden
}

.machining_finishes .table tr td:nth-of-type(1) a img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.machining_finishes .table a:hover {
    color: var(--theme_color)
}

.video_pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.8);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    z-index: 9999;
    padding: 1.2rem
}

.video_pop.active {
    opacity: 1;
    pointer-events: all
}

.video_pop.active .pop_content {
    transform: translate(-50%,-50%)
}

.video_pop .mask {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0
}

.video_pop .mask .close {
    display: block;
    width: 2rem;
    height: 2rem;
    background: url(../../../../../../../../themes/sytech/assets/img/close.svg) no-repeat center / contain;
    position: absolute;
    right: 10rem;
    top: 5rem;
    cursor: pointer
}

.video_pop .pop_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-70%);
    transition: all 0.3s;
    width: max-content;
    max-width: 90vw;
    height: 80vh;
    aspect-ratio: 1920/1080
}

.video_pop .pop_content iframe {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.video_pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.8);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    z-index: 9999;
    padding: 1.2rem
}

.video_pop.active {
    opacity: 1;
    pointer-events: all
}

.video_pop.active .pop_content {
    transform: translate(-50%,-50%)
}

.video_pop .mask {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0
}

.video_pop .mask .close {
    display: block;
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: 8rem;
    top: 8rem;
    border-radius: 50%;
    border: 1px solid #fff;
    filter: contrast(0) brightness(100);
    cursor: pointer;
    background-size: 50%
}

.video_pop .pop_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-70%);
    transition: all 0.3s;
    width: max-content;
    max-width: 80vw;
    height: 70vh;
    aspect-ratio: 1920/1080
}

.video_pop .pop_content iframe {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.empty_img {
    width: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%
}

.loading {
    position: relative
}

.loading:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../../../../../../../themes/sytech/assets/img/load.gif) no-repeat center;
    background-size: 45px;
    background-color: rgba(255,255,255,.3);
    z-index: 9
}

.developing-con {
    padding-top: 5rem;
    padding-bottom: 5rem
}

.developing-con h1 {
    font-size: 20px;
    font-weight: 500
}

.back-content {
    max-width: unset!important;
    margin: 0!important
}

form#sytech-newsletter-subscription p.failed.active,form#sytech-newsletter-subscription p.success.active {
    bottom: 3.8rem!important
}

.default_page_head h1 {
    font-size: 40px;
    font-weight: 700;
    color: #fff
}

.default_page_head .flex {
    flex-direction: column;
    padding: 5rem 0;
    justify-content: center
}

.default_page_main h2 {
    font-size: 25px;
    margin-bottom: 1rem;
    margin-top: 2rem
}

.default_page_main h3 {
    font-size: 20px;
    margin-bottom: 1rem;
    margin-top: 2rem
}

.default_page_main {
    padding: 2rem 0 5rem
}

.default_page_main p {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--content_color);
    margin-bottom: .5rem;
    color: #333
}

.default_page_main strong {
    color: #333
}

.default_page_main p a {
    color: var(--theme_color)
}

.header_menu1 .sub-menu,.header_menu2 .sub-menu,.header_menu3 .sub-menu,.header_menu4 .sub-menu,.header_menu5 .sub-menu {
    display: none
}

.surface_parts.swiper-container-initialized {
    padding-top: 0!important
}

section.application_con .leftoptions a {
    display: none
}

section.about_leadership .about_leadership_swiper .info .more {
    display: none
}

section.quailty_precise .left p a {
    color: var(--theme_color);
    text-decoration: underline;
    transition: all .3s;
    font-size: 17px;
    font-weight: 500;
    line-height: 28px
}

.cutting_parts .con .info p a {
    font-size: 17px;
    line-height: 25px;
    font-weight: 400;
    color: var(--theme_color);
    text-decoration: underline;
    transition: all .3s
}

.cutting_parts .con .info p a:hover {
    color: var(--title_color);
    text-decoration: none
}

.quality_reports .list li .info .status {
    display: flex;
    align-items: center;
    font-size: 17px!important;
    font-weight: 400!important;
    color: var(--theme_color);
    margin-top: 21px;
    margin-bottom: 54px;
    margin-bottom: 1rem!important
}

.home_banner {
    position: relative
}

.home_banner video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0
}

.home_banner .content {
    position: relative;
    z-index: 2
}

.home_banner:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.3);
    z-index: 1
}

div.machining_quality .rightimg .img {
    transition: none
}

.single-capabilities header {
    top: -152px
}

.machining_nav {
    position: sticky;
    top: 0;
    z-index: 99
}

section.about_keep .list .item a::before {
    z-index: 1
}

section.about_keep .list .item .img {
    z-index: 0
}

.toplevel_page_sytech_fronteditor section.about_keep .list .item a::before {
    display: none
}

section.home_banner .head .desc ul li {
    font-weight: 400
}

div.partsnav ul li a {
    transition: all .3s;
    color: var(--title_color);
    pointer-events: none
}

div.partsnav ul li.active a {
    color: var(--theme_color)
}

div.partsnav ul li {
    border-bottom: 4px solid transparent
}

div.partsnav ul li.active {
    border-color: var(--theme_color)
}

section.about_milestones .about_milestones_swiper .swiper-slide .img {
    aspect-ratio: 870/622;
    height: auto;
    align-self: center
}

.surface_specifica .table td {
    width: auto!important
}

.surface_specifica .table td:first-child {
    width: 10%!important
}

.machining_finishes .table td {
    text-align: left!important
}

header .header_menu.header_menu2 .inner,header .header_menu.header_menu4 .inner,header .header_menu.header_menu5 .inner {
    width: 100%;
    max-width: 1000px
}

.aligncenter {
    margin-left: auto!important;
    margin-right: auto!important
}

.surface_specifica .table td:first-child img {
    cursor: pointer
}

@media screen and (min-width: 786px) {
    .machining_services {
        margin-bottom:4rem
    }

    .cutting_project {
        margin-top: 8rem
    }
}

.single-capabilities .head h1 {
    font-size: 3.9rem!important
}

.selct_lang_none {
    display: none
}

.lang_popup {
    padding: 70px 53px;
    border-radius: 12px;
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 540px;
    display: none;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    z-index: 1005
}

.lang_popup ul {
    overflow: auto;
    max-height: 60vh;
    &::-webkit-scrollbar {
        width: 5px
    }

    &::-webkit-scrollbar-thumb {
        background: rgb(136,136,136);
        border-radius: 10px
    }
}

.footer_sidebar .lang {
    position: relative
}

.lang_popup strong {
    display: block;
    font-size: 32px;
    margin-bottom: 45px
}

.lang_popup div.img {
    width: 41px;
    height: 41px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 19px;
    border: 1px solid transparent
}

.lang_popup div.img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.lang_popup li {
    padding: 19px 24px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    display: flex;
    transition: all 0.3s;
    align-items: center;
    cursor: pointer
}

.lang_popup:before {
    content: "";
    display: inline-block;
    border-width: 10px;
    border-color: transparent #fff transparent transparent;
    position: absolute;
    right: 100%;
    bottom: 38px;
    border-style: solid;
    display: none
}

.lang_popup li+li {
    margin-top: 16px
}

.lang_popup li p {
    font-size: 17px;
    font-weight: 600;
    display: block;
    margin-bottom: 0rem
}

.lang_popup li span {
    font-size: 14px;
    color: #686868
}

.lang_popup li:after {
    content: "";
    width: 10px;
    height: 16px;
    display: inline-block;
    margin-left: auto;
    background: url(../../../../../../../../themes/sytech/assets/img/arrow-lang.svg) no-repeat center/contain;
    transition: all 0.3s
}

.lang_popup li.active {
    background-color: var(--theme_color);
    border-color: var(--theme_color)
}

.lang_popup li.active .img {
    border-color: #fff
}

.lang_popup li.active p,.lang_popup li.active span {
    color: #fff
}

.lang_popup li.active:after {
    filter: brightness(100)
}

.lang_popup .close {
    width: 11px;
    display: inline-block;
    height: 11px;
    position: absolute;
    right: 32px;
    top: 30px;
    cursor: pointer;
    transition: all 0.5s;
    background: url(../../../../../../../../themes/sytech/assets/img/lang-close.svg) no-repeat center/contain
}

.lang_popup .close:hover {
    transform: rotate(360deg)
}

.over_lang {
    position: fixed;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s
}

.over_lang.active {
    opacity: 1;
    pointer-events: all
}

.finishing_machined .faqs_list .fasq_item:nth-of-type(2n) .answer .flex {
    flex-direction: row-reverse
}

.precision_banner .flex .head {
    max-width: 815px
}

.quality_banner.precision_banner .flex {
    padding: 150px 0
}

section.precision_what .what_main .lists li {
    font-weight: 600
}

section.precision_banner {
    position: relative
}

section.precision_banner .content {
    z-index: 2
}

section.precision_banner::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(to right,#000,transparent)
}
.option .right{ z-index:1;}
@media(min-width:1200px){
		.cnc-img1{ width:50%; float:left; margin-right:30px;}
		
		.machining_materials .materialcon .material_swiper .material_a {
    flex-direction: row;
    flex-wrap: wrap;
}
.machining_materials .materialcon .material_swiper .material_a .img {
    width: 50%;
}
.machining_materials .materialcon .material_swiper .material_a .info {
    width: 50%;
}
.machining_materials .materialcon .material_swiper {
    width: 75%;
}
.machining_materials .materialcon .list {
    width: 20%;
}
		}