header {
    width: 100%;
    --header-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    transition: 0.3s;
    background-color: #fff;
    box-shadow: var(--theme-box-shadow);
}

header.header-transparent {
    --header-color: #fff;
    background-color: unset;
    box-shadow: unset;
}

header.header-transparent::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
    background: #fff;
    backdrop-filter: blur(30px);
    transform: scale();
}

body.scrolled header,
body.scrolled .mobile-nav {
    --header-h: 60px;
    box-shadow: var(--theme-box-shadow);
    --header-color: #000;
}

body.scrolled header.header-transparent::after {
    top: 0;
}

header .main,
header .main-thin {
    position: relative;
    z-index: 1;
    padding: 0 var(--main-margin);
    margin: 0;
}

.header-wrap .logo {
    height: var(--header-h);
    margin-right: max(20px, 60 * var(--px));
    transition: 0.3s;
    /* filter: url(#black-overlay); */
    flex-shrink: 0;
}

.header-wrap .logo .logo-img1 {
    display: none;
}

header.header-transparent .logo .logo-img1 {
    display: block;
}

header.header-transparent .logo .logo-img2 {
    display: none;
}

body:not(.scrolled) header.header-transparent .btn-large-nav-expand i {
    background-color: #fff;
}

.header-wrap .nav {
    flex-shrink: 0;
    margin-right: 20px;
}

.header-wrap .nav-ul-f {
    gap: var(--px-20-40);
}

.header-wrap .nav-a-f {
    height: var(--header-h);
    line-height: var(--header-h);
    color: var(--header-color);
    display: block;
    transition: 0.3s;
}

.header-wrap .nav-li-f.active .nav-a-f {
    color: var(--theme-color-red);
}

.header-wrap .nav-li-f:hover .nav-a-f,
.header-wrap .nav-a-s:hover {
    color: var(--theme-color-red);
}

.header-wrap .nav-a-s:hover img {
    filter: url(#blue-overlay);
    transform: translateX(10px);
}

.header-wrap .nav-li-f:hover .nav-ul-s {
    visibility: visible;
    transform: translate(-50%, 0);
    opacity: 1;
}

.header-wrap .nav-ul-s {
    position: absolute;
    top: 100%;
    left: 50%;
    background-color: #fff;
    transform: translate(-50%, -20px);
    transition: .3s;
    z-index: 999;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
    visibility: hidden;
    opacity: 0;
}

.header-wrap .nav-li-s+.nav-li-s {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.header-wrap .nav-ul-s {
    width: 100%;
}

.header-wrap .nav-a-s {
    gap: 20px;
    padding: var(--px-10-20) var(--px-20-40);
}

.header-wrap .nav-a-s img {
    filter: url(#gray-overlay);
    width: 15px;
    transition: .3s;
}

.header-area-r {
    gap: 10px;
}

.search-wrap {
    width: 40px;
    height: 40px;
}

.search-wrap:hover {
    filter: url(#red-overlay);
}

body:not(.scrolled) header.header-transparent .search-wrap img {
    filter: url(#white-overlay);
}

.lang-wrap {
    position: relative;
    cursor: pointer;
}

.lang-wrap:hover .lang-curr img {
    filter: url(#red-overlay);
}

.lang-curr {
    padding: 0 20px;
    color: var(--theme-color-red);
    border-left: 1px solid rgba(0, 0, 0, .5);
}

body:not(.scrolled) header.header-transparent .lang-curr img {
    filter: url(#white-overlay);
}

body:not(.scrolled) header.header-transparent .lang-curr {
    border-color: #fff;
}

.lang-cont {
    width: 100%;
    position: absolute;
    top: 110%;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    transform: translateY(-10px);
    box-shadow: 0px 5px 10px 0px rgba(71, 52, 26, 0.1);
    border-radius: 2px;
}

.lang-cont-area {
    border-radius: 10px;
    overflow: hidden;
}

.lang-cont a {
    background-color: #fff;
    padding: 10px 0;
    color: #000;
}

.lang-wrap:hover .lang-cont {
    visibility: visible;
    opacity: 1;
    transform: unset;
}

.about-us-sec1 .sec-area {
    gap: calc(75 * var(--px));
}

.about-us-sec1 .sec-area .pic {
    width: 43%;
    flex-shrink: 0;
}

.about-us-sec2 .card-wrap {
    --col: 4;
}

.about-us-sec2 .item .top {
    gap: var(--px-10-20);
    background: url(../images/arr-right-double.svg) no-repeat right;
    background-size: auto 40%;
    font-weight: bold;
    font-size: var(--font-24);
}

.about-us-sec2 .item .top .icon {
    background-color: var(--theme-color-blue);
}

.about-us-sec2 .item .top .icon-cont {
    width: max(30px, 80 * var(--px));
    aspect-ratio: 1;
    padding: max(5px, 17 * var(--px));
}

.about-us-sec2 .item:nth-child(1) .top .icon-cont {
    background-color: rgba(255, 255, 255, .65);
}

.about-us-sec2 .item:nth-child(2) .top .icon-cont {
    background-color: rgba(255, 255, 255, .55);
}

.about-us-sec2 .item:nth-child(3) .top .icon-cont {
    background-color: rgba(255, 255, 255, .35);
}

.about-us-sec2 .item:nth-child(4) .top .icon-cont {
    background-color: rgba(255, 255, 255, 0);
}

.about-us-sec2 .item .txt {
    background-color: var(--theme-bg-color-gray);
    padding: calc(50 * var(--px)) 30px;
    flex: 1;
}

.about-us-sec2 .item .txt .title {
    font-size: var(--font-24);
    font-weight: bold;
    color: #333;
    height: 2.3em;
}

.about-us-sec3 .sec-area {
    gap: calc(135 * var(--px));
}

.about-us-sec3 .txt .sec-intro strong {
    font-size: var(--font-22);
    color: #000;
}

.about-us-sec4 .card-wrap {
    padding: 0 7%;
}

.about-us-sec4 .item {
    position: relative;
    font-size: var(--font-24);
    color: #fff;
    background-color: rgba(0, 0, 0, .35);
    backdrop-filter: blur(15px);
    padding: var(--px-20-40) 20px;
    text-align: center;
    line-height: 1.8;
    transition: .3s;
    cursor: pointer;
}

.about-us-sec4 .item .serial {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 14px;
    color: var(--theme-color-blue);
    line-height: 1;
    transition: .3s;
}

.about-us-sec4 .item:hover {
    background-color: #fff;
    color: var(--theme-color-blue);
}

.about-us-sec4 .item:hover .serial {
    background-color: var(--theme-color-blue);
    color: #fff;
}

.about-us-sec4 .sec-area .sec-intro {
    padding: max(20px, 5%) 0;
    border-bottom: 1px solid #fff;
    text-align: center;
    color: #fff;
    font-size: 14px;
}

.pic-txt-lay {
    display: flex;
    flex-direction: column;
}

.pic-txt-lay .pic {
    overflow: hidden;
    aspect-ratio: 506 / 315;
    background-color: var(--theme-color-blue);
    position: relative;
    transition: .3s;
}

.pic-txt-lay-contain .pic {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    background-color: var(--theme-bg-color-gray);
}

.pic-txt-lay .pic.white {
    background-color: #fff;
}

.pic-txt-lay .pic img,
.pic-txt-lay .item .txt .title,
.pic-txt-lay .item .txt .intro {
    transition: .3s;
}

.pic-txt-lay .txt {
    padding: max(15px, 30 * var(--px));
    position: relative;
    transition: .3s;
    gap: calc(10 * var(--px));
    flex: 1;
}

.pic-txt-lay-contain .txt {
    padding-top: 0;
}

.pic-txt-lay .txt .title {
    font-size: max(16px, 24 * var(--px));
    line-height: 1.3;
    font-weight: bold;
}

.pic-txt-lay .txt .title:not(.show) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
}

.pic-txt-lay .txt .intro {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
    color: #3B3B3B;
    margin-top: 5px;
    font-weight: 300;
    font-size: max(12px, 16 * var(--px));
}

.about-us-sec5 .sec-area .txt {
    background-color: var(--theme-bg-color-gray);
}

.about-us-sec6 .txt,
.about-us-sec6 .pic {
    width: 50%;
}

.about-us-sec6 .pic-wrap {
    opacity: 0;
    padding: var(--px-20-40);
    justify-content: flex-end;
}

.about-us-sec6 .pic-wrap.active {
    opacity: 1;
    transition: .3s;
}

.about-us-sec6 .sec-top .title {
    font-size: calc(38 * var(--px));
}

.about-us-sec6 .sec-area .item {
    font-size: var(--font-24);
    color: #999;
    font-weight: bold;
    padding: var(--px-20-40) 0;
    padding-right: calc(180 * var(--px));
    position: relative;
    transition: .3s;
    cursor: pointer;
}

.about-us-sec6 .sec-area .item::after,
.about-us-sec6 .sec-area .item:last-child::before {
    content: '';
    position: absolute;
    left: 0;
    width: calc(100% - 180 * var(--px));
    height: 1px;
    background-color: rgba(0, 0, 0, .2);
    transition: .3s;
}

.about-us-sec6 .sec-area .item::after {
    top: 0;
}

.about-us-sec6 .sec-area .item .icon {
    --w: max(30px, 50 * var(--px));
    --ratio: 3;
    --bg-color: rgba(12, 41, 111, .1);
    transform: translateX(-200%);
    transition: .3s;
    opacity: 0;
    transition-delay: .15s;
}

.about-us-sec6 .sec-area .item:last-child::before {
    bottom: 0;
}

.about-us-sec6 .sec-area .item.active {
    padding-left: var(--px-20-40);
    font-size: var(--font-28);
    color: var(--theme-color-blue);
}

.about-us-sec6 .sec-area .item.active::after {
    width: 100%;
    background-color: var(--theme-color-blue);
}

.about-us-sec6 .sec-area .item.active .icon {
    opacity: 1;
    transform: translateX(-100%);
}

.about-us-sec6 .pic {
    background: var(--theme-linear-gradient-top);
}

.about-us-sec6 .pic-cont {
    width: 100%;
    height: 60%;
    padding: 0 20%;
}

.about-us-sec6 .pic .sec-intro {
    color: #fff;
}

.about-us-sec6 .pic .sec-intro strong {
    font-size: var(--font-20);
}

.color-blue {
    color: var(--theme-color-blue);
}

.bg-color-gray {
    background-color: var(--theme-bg-color-gray);
}

.service-logo-wrap .swiper-slide {
    width: calc(320 * var(--px));
    aspect-ratio: 2;
    height: auto;
    background-color: #fff;
    display: flex;
}

.service-logo-wrap .swiper-slide img {
    max-width: 60%;
}

.about-us-sec7 .service-logo-wrap2 .swiper,
.about-us-sec7 .service-logo-wrap2 .swiper-slide {
    transform: rotate(180deg);
}

.about-us-sec7 .service-logo-wrap2 {
    margin-top: 20px;
}

.factory-overview-sec1 .card-wrap {
    --col: 2;
}

.factory-overview-sec1 .item {
    padding: var(--px-20-40);
    padding-right: calc(max(35px, 90 * var(--px)) + 5px);
    padding-bottom: calc(90 * var(--px) + 10px);
    background-color: var(--theme-bg-color-gray);
    position: relative;
}

.factory-overview-sec1 .item .title {
    font-size: var(--font-24);
}

.factory-overview-sec1 .item .sec-intro {
    border-top: 1px solid var(--theme-color-blue-thin);
    position: relative;
    margin-top: var(--px-10-20);
    padding-top: var(--px-10-20);
    font-weight: 300;
}

.factory-overview-sec1 .item .sec-intro::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    height: 1px;
    width: 30%;
    background-color: var(--theme-color-blue);
}

.factory-overview-sec1 .item .icon {
    position: absolute;
    right: 0;
    bottom: 0;
    --w: max(35px, 90 * var(--px));
    --bg-color: rgba(12, 41, 111, .7);
    border-top-left-radius: calc(40 * var(--px));
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.talent-sec3 .swiper-slide {
    height: auto;
    position: relative;
    aspect-ratio: 105 / 59;
    width: max(300px, 950 * var(--px));
    padding: calc(40 * var(--px));
    color: #fff;
    overflow: hidden;
    margin-right: var(--px-20-40);
}

.talent-sec3 .swiper-slide::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background-image: linear-gradient(to top, #000 30%, transparent);
    opacity: .8;
}

.talent-sec3 .swiper-slide .info {
    position: absolute;
    bottom: calc(40 * var(--px));
    left: calc(40 * var(--px));
    z-index: 1;
}

.talent-sec3 .swiper-slide .title {
    font-size: var(--font-24);
}

.swiper-pagination-progressbar {
    width: calc(320 * var(--px)) !important;
    background-color: #CCC;
    position: initial;
    top: unset;
    left: unset;
    height: 2px !important;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: var(--theme-color-blue);
}

.swiper-handle {
    gap: 20px;
}

.swiper-handle .icon {
    --bg-color: transparent;
    border: 1px solid var(--theme-color-blue-thin);
    --ratio: 3;
    cursor: pointer;
    user-select: none;
}

.swiper-handle .icon:hover {
    --bg-color: var(--theme-color-blue);
    border-color: var(--theme-color-blue);
    color: #fff;
}

.swiper-handle .icon:hover img {
    filter: url(#white-overlay);
}

.factory-overview-sec2 .swiper-slide {
    width: max(300px, 450 * var(--px));
    height: auto;
    margin-right: var(--px-20-40);
}

.factory-overview-sec2 .txt .title {
    padding-top: var(--px-10-20);
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.factory-overview-sec2 .txt .intro {
    margin-top: 10px;
}

.factory-overview-sec2 .txt .intro span {
    font-weight: bold;
}

.products-sec1 .item {
    cursor: pointer;
}

.products-sec1 .txt {
    padding-top: var(--px-10-20);
    text-align: center;
    background-color: var(--theme-bg-color-gray);
    transition: .3s;
}

.products-sec1 .txt .title {
    font-size: var(--font-16);
    font-weight: 300;
    color: var(--theme-color-red);
}

.products-sec1 .txt .intro {
    font-weight: normal;
    margin-top: 10px;
    font-size: var(--font-24);
}

.products-sec1 .item:hover {
    box-shadow: var(--theme-box-shadow);
}

.products-sec1 .item:hover .pic,
.products-sec1 .item:hover .txt {
    background-color: #fff;
}

.products-sec1 .item .pic {
    padding: 0 max(40px, 60 * var(--px));
}

.tabel-wrap {
    overflow-x: auto
}

table {
    width: 100%;
    border-collapse: collapse
}

table tr:first-child {
    background: var(--theme-color-blue);
    color: #fff
}

table tr {
    background-color: #ECEEF4;
}

table td {
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, .5);
    font-size: 14px
}

table tr:first-child td {
    white-space: nowrap
}

table tr:not(:first-child) td {
    font-weight: 300
}

table tr:not(:first-child):nth-child(odd) {
    background-color: #F8F9FB;
}

.products-sec2 .sec-top {
    padding-top: var(--px-20-40);
    border-top: 1px solid rgba(0, 0, 0, .2);
}

.products-sec2 .tips {
    padding-left: 10px;
    position: relative;
}

.products-sec2 .tips::after {
    content: '*';
    position: absolute;
    top: .2em;
    left: 0;
    color: var(--theme-color-red);
}

.product-detail-sec1 .txt,
.product-detail-sec1 .pic {
    width: 50%;
    height: calc(400 * var(--px));
}

.product-detail-sec1 .txt {
    padding: var(--px-20-40);
    background-color: var(--theme-color-blue);
    color: #fff;
    overflow-y: auto;
}

.product-detail-sec1 .txt .intro p {
    padding-left: 15px;
    position: relative;
    font-size: var(--font-16);
    line-height: 1.8;
}

.product-detail-sec1 .txt .intro p::after {
    content: '';
    position: absolute;
    top: .6em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #fff;
}

.product-detail-sec1 .pic {
    background-image: var(--theme-linear-gradient);
    padding: 0 max(30px, 10%);
}

.product-detail-sec2 .txt {
    padding: var(--px-10-20);
    text-align: center;
    font-size: var(--font-24);
}

.product-detail-sec3 .sec-top {
    border-top: unset;
    padding-top: 0;
}

.product-detail-sec3 table tr:not(:first-child) td:first-child {
    color: var(--theme-color-red);
}

.learn-more {
    cursor: pointer;
    transition: .3s;
}

.learn-more:hover {
    background-color: var(--theme-color-blue);
    padding: 5px 5px 5px 15px;
    color: #fff;
    border-radius: 300px;
}

.learn-more .icon {
    --w: max(30px, 40 * var(--px));
    margin-left: 10px;
}

.learn-more:hover .icon {
    margin-left: 5px;
}

.learn-more .icon img {
    filter: url(#white-overlay);
}

.news-top-cont {
    transition: .3s;
}

.news-top .pic {
    width: 50%;
    aspect-ratio: 8 / 5;
    overflow: hidden;
}

.news-top .txt {
    width: 50%;
    padding: calc(40 * var(--px));
    padding-right: max(20px, 6%);
    background-color: var(--theme-bg-color-gray);
}

.news-top .txt .title {
    font-size: max(22px, 36 * var(--px));
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: bold;
    line-height: 1.2;
    margin-top: calc(30 * var(--px));
}

.news-top .txt .intro {
    font-size: max(14px, 16 * var(--px));
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #666666;
    text-align: justify;
    margin-top: calc(20 * var(--px));
    line-height: 1.8;
}

.news-wrap .card-wrap {
    --gap: calc(60 * var(--px));
}

.news-wrap .item {
    overflow: hidden;
    cursor: pointer;
}

.news-wrap .item .time,
.news-top .time {
    position: relative;
    padding-left: 20px;
    line-height: 1;
    font-weight: 300;
    background-color: unset;
    color: #000;
}

.news-wrap .item .time::after,
.news-top .time::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: var(--theme-color-blue);
    border-radius: 50%;
}

.news-wrap .item .expand-more,
.news-top .expand-more {
    gap: 5px;
    color: var(--theme-color-blue);
}

.news-wrap .item:hover .pic img,
.news-top:hover .pic img {
    transform: scale(1.1);
}

.news-wrap .item:hover .txt .title,
.news-wrap .item:hover .txt .intro,
.news-top:hover .txt .title,
.news-top:hover .txt .intro {
    color: var(--theme-color-blue);
}

.news-wrap .wfEditorMode {
    margin-top: 0 !important;
}

.news-wrap .pic {
    overflow: hidden;
    aspect-ratio: 506 / 315;
    background-color: var(--theme-color-blue);
    position: relative;
}

.news-wrap .pic img,
.news-wrap .item .txt .title,
.news-wrap .item .txt .intro,
.news-top .pic img,
.news-top .txt .title,
.news-top .txt .intro {
    transition: .3s;
}

.news-wrap .txt {
    padding: max(20px, 30 * var(--px));
    min-height: calc(200 * var(--px));
    position: relative;
    transition: .3s;
    gap: calc(10 * var(--px));
    flex: 1;
    background-color: var(--theme-bg-color-gray);
}

.news-wrap .txt .title {
    font-size: max(16px, 24 * var(--px));
    margin-top: calc(15 * var(--px));
    line-height: 1.3;
    font-weight: bold;
}

.news-wrap .txt .title:not(.show) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
}

.news-wrap .txt .intro {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
    color: #3B3B3B;
    margin-top: 5px;
    font-weight: 300;
    font-size: max(12px, 16 * var(--px));
}

.news-wrap .txt .learn-more {
    margin-top: calc(30 * var(--px));
}

.news-wrap .txt .icon {
    --w: 40px;
}

.news-sec1 .sec-top {
    margin: calc(20 * var(--px)) 0 calc(50 * var(--px));
    gap: 20px;
}

.news-sec1 .sec-top .sec-title {
    line-height: 1;
}

.yiiPager {
    display: flex;
    justify-content: center;
    align-items: center;
}

.yiiPager li.first,
.yiiPager li.last {
    display: none;
}

.yiiPager li {
    width: clamp(30px, 50 * var(--px), 50px);
    height: clamp(30px, 50 * var(--px), 50px);
    border-radius: 50%;
    margin: 0 5px;
    border: 1px solid #E8E8E8;
    flex-shrink: 0;
}

.yiiPager li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #000;
}

.yiiPager li.selected {
    border-color: var(--theme-color-blue);
}

.yiiPager li.previous,
.yiiPager li.next {
    width: auto;
    height: auto;
    aspect-ratio: unset;
    padding: max(5px, 10 * var(--px)) var(--px-10-20);
    border-radius: 300px;
    background-color: #F6F6F6;
    border: unset;
}

.yiiPager li.selected a {
    color: var(--theme-color-blue);
}

.yiiPager li:hover {
    box-shadow: var(--theme-box-shadow);
}

.news-detail-sec1 {
    margin-top: var(--header-h);
    background-color: #F9FDFB;
}

.news-detail-sec1 .info-wrap {
    padding: 0 10%;
}

.news-detail-sec1 .info-wrap .title {
    font-size: max(20px, 48 * var(--px));
    margin-top: max(15px, 30 * var(--px));
    line-height: 1.2;
}

.news-detail-sec1 .info-wrap .time {
    gap: 10px;
    color: #252525;
    margin-top: calc(50 * var(--px));
}

.news-detail-sec1 .handle-wrap {
    border-top: 1px solid rgba(0, 0, 0, .15);
    font-size: var(--font-18);

}

.news-detail-sec1 .handle-wrap .item {
    width: 50%;
    gap: 10px;
    line-height: 2;
    padding: calc(40 * var(--px)) 0;
}

.news-detail-sec1 .handle-wrap .item:first-child {
    padding-right: calc(80 * var(--px));
}

.news-detail-sec1 .handle-wrap .item:last-child {
    flex-direction: row-reverse;
    text-align: right;
    border-left: 1px solid rgba(0, 0, 0, .15);
    padding-left: calc(80 * var(--px));
}

.news-detail-sec1 .handle-wrap .item:hover .intro {
    color: var(--theme-color-blue);
}

.news-detail-sec1 .handle-wrap .item .intro p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-word;
}

.news-detail-sec1 .handle-wrap .item .pic img {
    filter: url(#gray-overlay);
    height: 30px;
}

.news-detail-sec1 .handle-wrap .item:hover .pic img {
    filter: url(#blue-overlay);
}

.news-detail-sec1 .article-content {
    margin-top: calc(80 * var(--px));
    padding-top: calc(80 * var(--px));
    border-top: 1px solid rgba(0, 0, 0, .15);
}

.news-detail-sec1 .article-content .article-wrap {
    padding: 0 10%;
    font-size: max(14px, 18 * var(--px));
    font-weight: 300;
}

.news-detail-sec1 .article-content .article {
    font-size: max(15px, 20 * var(--px));
    padding-bottom: calc(80 * var(--px));
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.news-detail-sec1 .article-content .article *+* {
    margin: calc(40 * var(--px)) auto 0;
}

.news-detail-sec1 .article-content .article img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.news-detail-sec2 .txt {
    background-color: #fff;
}

.label-wrap {
    gap: 10px;
}

.label-lay {
    padding: 8px 12px;
    background-color: var(--theme-color-blue);
    color: #fff;
    font-size: 14px;
    border-radius: 300px;
    text-align: center;
}

.solution-sec1 .sec-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.solution-sec1 .sec-area .item.w2 {
    width: calc((100% - 10px) / 2);
}

.solution-sec1 .sec-area .item.w3 {
    width: calc((100% - 10px * 2) / 3);
}

.solution-sec1 .sec-area .item {
    padding: var(--px-20-40);
    background-image: linear-gradient(to bottom, #F1F1F1, #F9F9F9);
}

.solution-sec1 .sec-area .item .title {
    font-size: var(--font-24);
    color: #111;
    font-weight: bold;
}

.solution-sec1 .sec-area .item .sec-intro {
    margin-top: 5px;
    line-height: 1.5;
}

.solution-sec2 .item {
    aspect-ratio: 1;
    position: relative;
    justify-content: flex-end;
    padding: var(--px-20-40);
    color: #fff;
    font-weight: bold;
    font-size: var(--font-24);
    gap: var(--px-10-20);
    cursor: pointer;
    transition: .3s;
}

.solution-sec2 .item .icon,
.solution-sec2 .item span {
    position: relative;
    z-index: 1;
}

.solution-sec2 .item .bg {
    background-color: rgba(0, 0, 0, .2);
    transition: .3s;
}

.solution-sec2 .item:hover {
    padding-bottom: calc(100 * var(--px));
}

.solution-sec2 .item:hover .bg {
    background-color: rgba(0, 0, 0, .6);
}

.solution-sec3 .item .title {
    font-size: var(--font-24);
    font-weight: bold;
}

.solution-sec3 .item .sec-intro,
.solution-sec3 .item .sec-intro::after {
    border-top: unset;
    content: unset;
    padding-top: 0;
}

.solution-sec3 .item .icon {
    --bg-color: var(--theme-color-blue);
    border-top-left-radius: 0;
}

.solution-sec3 .card-wrap {
    --col: 3;
}

.solution-detail-sec1 .sec-area {
    gap: max(30px, 10%);
}

.solution-detail-sec1 .item .icon {
    --w: max(50px, 120 * var(--px));
    --bg-color: transparent;
    border: 1px solid var(--theme-color-blue);
}

.solution-detail-sec1 .item .sec-intro {
    width: 22em;
}

.solution-detail-sec1 .item .sec-intro strong {
    color: #000;
}

.solution-detail-sec2 .sec-top .sec-title span {
    font-weight: 300;
}

.solution-detail-sec2 .pic {
    position: relative;
}

.solution-detail-sec2 .pic img {
    position: relative;
    z-index: 1;
}

.solution-detail-sec2 .pic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #FFFFFF 0%, #0033A1 100%);
    opacity: .1;
}

.solution-detail-sec2 .txt {
    padding: var(--px-10-20) var(--px-20-40);
    background-color: #fff;
    font-size: var(--font-24);
    flex: 1;
    text-align: center;
}

.contact-us-sec1 .txt {
    width: 50%;
    flex-shrink: 0;
}

.contact-us-sec1 .txt-title {
    font-size: var(--font-28);
}

.contact-us-sec1 .txt-intro p {
    gap: 10px;
    align-items: start;
    margin-bottom: 10px;
}

.contact-us-sec1 .txt-intro p img {
    margin-top: 5px;
}

.contact-us-sec1 .txt-intro p:last-child img {
    margin-top: 9px;
}

.contact-us-sec1 .info .title {
    font-size: var(--font-28);
    color: var(--theme-color-blue);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    position: relative;
    margin: var(--px-10-20) 0;
    padding-bottom: var(--px-10-20);
}

.contact-us-sec1 .info .title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 3em;
    height: 2px;
    background-color: var(--theme-color-blue);
}

.contact-us-sec1 .intro-cont {
    margin-bottom: var(--px-10-20);
}

.contact-us-sec1 .info .name {
    font-weight: bold;
    margin-right: max(20px, 80 * var(--px));
}

.about-us-sec7 .swiper-wrapper {
    transition-timing-function: linear;
}

.swiper-button-lock {
    display: none !important;
}

.about-us-sec4 .main {
    position: relative;
    z-index: 1;
}

.about-us-sec4 .sec-bg {
    background-color: rgba(0, 0, 0, .35);
}

.back-top {
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 10;
    transition: .3s;
    cursor: pointer;
    display: none;
}

.back-top img {
    filter: url(#white-overlay);
}

.back-top:hover .icon {
    --bg-color: #fff;
    box-shadow: var(--theme-box-shadow);
}

.back-top:hover img {
    filter: unset;
}

.factory-overview-sec4 .pic .icon {
    border: 1px solid rgba(255, 255, 255, .2);
    position: absolute;
    bottom: var(--px-10-20);
    right: var(--px-10-20);
    --bg-color: transparent;
    opacity: 0;
}

.factory-overview-sec4 .pic:hover {
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
}

.factory-overview-sec4 .pic:hover .icon {
    opacity: 1;
}

.factory-overview-sec4 .txt {
    padding: var(--px-10-20);
    text-align: center;
}