@media screen and (max-width:768px) {
  .head1 .menu {
    position: fixed;
    left: 0;
    top: -120vh;
    width: 100%;
    height: calc(100vh - var(--head));
    background: #fff;
    display: block;
    opacity: 0;
    overflow: auto;
    transition: all ease .3s;
    z-index: 50;
    color: #333;
  }

  header.open .menu {
    top: var(--head);
    opacity: 1;
  }

  .head1 .link {
    width: 100%;
    margin-left: 0;
  }

  .head1 .link>a {
    display: block;
    border-bottom: 1px solid #ddd;
    line-height: 50px;
    color: #333;
  }

  .head1 .link a {
    padding: 0 20px;
  }

  .head1 .link::after {
    display: none;
    width: 52px;
    height: 10px;
    left: 50%;
    top: 100%;
    margin-top: 14px;
    transform: translate(-50%, -50%) scale(0);
  }

  .head1 .link:hover::after,
  .head1 .link.on::after {
    transform: translate(-50%, 0) scale(1);
  }

  .head1 .down {
    min-width: 80px;
    overflow: hidden;
    padding: 0;
  }

  .head1 .link .down {
    left: 50%;
    top: 100%;
    margin-top: 0;
    transform: translate(0, 0);
    min-width: 160px;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    position: static;
    opacity: 1;
    width: 100%;
    pointer-events: visible;
    border-bottom: 1px solid #ddd;
    display: none;
  }

  .head1 .link .down::before {
    width: 100%;
    height: 40px;
    bottom: 100%;
  }

  .head1 .link .down a {
    padding: 10px 30px;
    text-align: left;
    font-size: 14px;
    color: #666;
  }

  .head1 .link .down a:not(:last-child) {
    border-bottom: none;
  }

  .head1 .link .down-jt {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    background: url('/img/icon-jia.svg') no-repeat center/15px;
  }


  .head1 .link.on .down-jt {
    background: url('/img/icon-jian.svg') no-repeat center/15px;
  }

  :root {
    --head: 40px;
  }

  body {
    font-size: 6px;
  }

  .C-wrap {
    width: 90%;
  }

  .head1 {
    width: 100%;
    padding: 0 5%;
    border-bottom: 1px solid var(--cd);
  }

  .isback .head1 {
    transform: translateY(-100%);
  }

  .head1 .logo {
    width: 70px;
  }

  .head1-nav {
    gap: 46px;
  }

  .head1 .menu {
    gap: 23px;
  }

  .head1 .menu .link.has-dropdown a {
    display: flex;
    gap: 4px;
  }

  .head1 .menu .link.has-dropdown .arrow {
    width: 10px;
  }

  .head1 .link {
    padding: 8px 0;
  }

  .head1 .link .down {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #E5E5E5;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
  }

  .head1 .link .down a:nth-last-child(n+2) {
    margin-bottom: 11px;
  }

  .head1-right {
    gap: 12px;
  }

  .language-wrap .language {
    gap: 2px;
  }

  .language-wrap .language img {
    width: 5px;
  }

  .language-dropdown {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 8px;
  }

  .language-dropdown::before {
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid transparent;
  }

  .language-dropdown .lang-item {
    padding: 6px 10px;
    border: 1px solid #eee;
  }

  .language-dropdown .lang-item:first-child {
    border-radius: 6px 6px 0 0;
  }

  .language-dropdown .lang-item:last-child {
    border-radius: 0 0 6px 6px;
  }

  .search-btn {
    width: 14px;
    height: 14px;
  }

  .search-btn img {
    width: 100%;
  }

  .login-wrap .login-btn {
    gap: 2px;
  }

  .login-wrap .login-btn img {
    width: 14px;
  }

  .login-wrap .logged-btn img {
    width: 14px;
  }

  .login-wrap .logged-btn .badge {
    top: -3px;
    right: -4px;
    min-width: 9px;
    height: 14px;
    padding: 0 2px;
    border-radius: 9999px;
    font-size: 12px;
    line-height: 14px;
  }

  .contact-btn {
    padding: 5px 12px;
    border: 1px solid var(--c6);
    border-radius: 20px;
  }

  .dropdown-menu {
    width: 100%;
  }

  .dropdown-mask {
    width: 100%;
    backdrop-filter: blur(5px);
  }

  .dropdown-content {
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
    width: 90%;
    height: 80vh;
    overflow: auto;
    border-radius: 10px;
    margin: 20px auto 0;
  }

  .dropdown-left {
    width: 100%;
  }

  .dropdown-left-inner {
    padding: 10px 13px 25px;
    border-radius: 10px;
  }

  .dropdown-title {
    margin-bottom: 9px;
  }

  .product-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .product-item {
    padding: 9px 6px 8px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
  }

  .product-item .item-title {
    margin-bottom: 4px;
  }

  .product-item .item-desc {
    display: none;
  }

  .product-item .item-icon {
    width: 30px;
    margin-right: 13px;
  }

  .product-item .txt {
    flex: 1;
  }

  .dropdown-right {
    flex: 1;
    padding: 15px 14px 26px 12px;
  }

  .info-card {
    gap: 13px;
    margin-bottom: 15px;
  }

  .info-card .info-img {
    width: 215px;
    height: 100px;
    border-radius: 8px;
  }

  .info-card .info-text {
    flex: 1;
  }

  .info-card .info-title {
    margin-bottom: 10px;
  }

  .info-card .info-desc {
    margin-bottom: 25px;
  }

  .category-section {
    padding-top: 15px;
    border-top: 1px solid #DDD;
  }

  .category-section .category-title {
    margin-bottom: 8px;
  }

  .category-list {
    gap: 5px;
  }

  .category-item {
    display: flex;
    gap: 18px;
    padding: 8px;
    border-radius: 8px;
  }

  .category-item .cate-img {
    width: 72px;
    height: 41px;
    border-radius: 8px;
  }

  .category-item .cate-name {
    margin-bottom: 12px;
  }

  .dropdown-solutions .dropdown-content {
    padding: 20px 20px;
    margin: 20px auto 0;
  }

  .solutions-wrap {
    gap: 18px;
    flex-direction: column;
  }

  .solutions-col .solutions-title {
    margin-bottom: 10px;
  }

  .solutions-col .solutions-line {
    height: 1px;
    margin-bottom: 10px;
  }

  .solutions-list {
    gap: 17px;
  }

  .solutions-item .sol-img {
    width: 100%;
    height: 77px;
    border-radius: 10px;
    margin-bottom: 8px;
  }

  .C-more {
    display: inline-flex;
    gap: 2px;
  }

  .C-more img {
    width: 16px;
  }

  .C-more:hover img {
    transform: translateX(3px);
  }

  .C-more2 {
    padding: 5px 7px;
    border-radius: 5px;
    border: 1px solid #D1D1D1;
    display: inline-flex;
    flex-wrap: wrap;
  }

  .C-more2 img {
    width: 8px;
    margin-left: 6px;
  }

  .C-more2:hover {
    border: 1px solid var(--color);
  }

  .C-more3 {
    display: inline-flex;
    flex-wrap: wrap;
  }

  .C-more3 img {
    width: 8px;
    margin-left: 6px;
  }

  .C-more3:hover img {
    transform: translateX(3px);
  }

  .C-btn1 {
    display: inline-flex;
    gap: 6px;
    padding: 8px 17px;
    border-radius: 500px;
  }

  .C-btn1 img {
    width: 16px;
  }

  .C-title1 .title-top {
    margin-bottom: 8px;
  }

  .home1 .home1-bg {
    width: 100%;
    height: 100%;
  }

  .home1-mask {
    width: 100%;
    height: 100%;
  }

  .home1-content {
    left: 5%;
    bottom: 62px;
  }

  .home1-title {
    margin-bottom: 16px;
  }

  .home1-play {
    right: 5%;
    bottom: 30px;
  }

  .home1-play .play-circle {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
  }

  .home1-play .play-circle svg {
    width: 100%;
    height: 100%;
  }

  .home1-play .play-inner {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }

  .home1-play img {
    width: 8px;
  }

  .home1 .swiper-pagination {
    bottom: 25px;
  }

  .home1 .swiper-pagination-bullet {
    width: 2px;
    height: 2px;
  }

  .home1 .swiper-pagination-bullet-active {
    width: 23px;
    border-radius: 4px;
  }

  .home2 {
    padding: 50px 0;
  }

  .home2-list {
    gap: 21px;
  }

  .home2-item {
    border-radius: 10px;
  }

  .home2-item-big {
    width: 100%;
  }

  .home2-item-big .item-text {
    padding: 34px 50px 28px 20px;
    display: flex;
    flex-direction: column;
  }

  .home2-item-big .item-info {
    margin-bottom: 20px;
  }

  .home2-item-big .item-title {
    margin-bottom: 10px;
  }

  .home2-item-big .pic {
    width: 100%;
  }

  .home2-item:not(.home2-item-big) {
    width: 100%;
  }

  .home2-item:not(.home2-item-big) .item-inner {
    height: 100%;
  }

  .home2-item:not(.home2-item-big) .pic {
    width: 100%;
  }

  .home2-item:not(.home2-item-big) .item-text {
    padding: 25px 32px 12px 20px;
  }

  .home2-item:not(.home2-item-big) .item-top {
    margin-bottom: 10px;
  }

  .home3 {
    padding: 34px 0 37px;
  }

  .home3 .C-title1 .title-desc {
    max-width: 100%;
  }

  .home3-img {
    margin-top: 29px;
    height: 320px;
    border-radius: 15px;
  }

  .home4 {
    padding: 0 0 73px;
  }

  .home4-list {
    gap: 24px;
    margin-top: 20px;
  }

  .news-item {
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
  }

  .news-item .news-img {
    height: 180px;
    border-radius: 15px 15px 0 0;
  }

  .news-item .news-text {
    padding: 16px 13px 32px;
  }

  .news-item .news-title {
    margin-bottom: 8px;
  }

  .news-item .news-line {
    height: 1px;
  }

  .news-item .news-more {
    padding: 16px 13px;
  }

  .news-item .news-more img {
    width: 16px;
  }

  .news-item:hover .news-more img {
    transform: translateX(3px);
  }

  .C-foot-form {
    padding: 0 0 41px;
  }

  .C-foot-form .form-wrap {
    gap: 45px;
  }

  .C-foot-form .form-left {
    width: 100%;
    padding-top: 32px;
  }

  .C-foot-form .form-info {
    margin-bottom: 45px;
  }

  .C-foot-form .info-label {
    margin-bottom: 6px;
  }

  .C-foot-form .info-title {
    margin-bottom: 6px;
  }

  .C-foot-form .form-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .C-foot-form .contact-phone {
    gap: 10px;
  }

  .C-foot-form .contact-phone .phone-icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }

  .C-foot-form .contact-phone .phone-icon img {
    width: 100%;
  }

  .C-foot-form .contact-item {
    gap: 7px;
  }

  .C-foot-form .contact-item img {
    width: 20px;
    flex-shrink: 0;
  }

  .C-foot-form .contact-item span {
    width: 248px;
    flex:1;
    min-width: 0;
  }

  .C-foot-form .shares {
    margin-top: 42px;
  }

  .C-foot-form .shares .ul {
    margin-top: 9px;
    gap: 10px;
  }

  .C-foot-form .form-right {
    width: 100%;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .contact-form .form-input {
    padding: 9px 7px;
    border: 1px solid var(--c9);
    border-radius: 10px;
  }

  .contact-form .form-textarea {
    height: 75px;
    padding: 9px 7px;
    border: 1px solid var(--c9);
    border-radius: 10px;
  }

  .contact-form .form-checkbox {
    gap: 5px;
    align-items: flex-start;
  }

  .contact-form .form-checkbox .agree-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin-top: 2px;
    border: 1px solid var(--c9);
    border-radius: 4px;
  }

  .contact-form .form-checkbox input:checked+.agree-icon {
    background: url('/img/icon-check.svg') no-repeat center/80%;
  }

  .contact-form .form-checkbox .txt {
    flex: 1;
  }

  .contact-form .form-submit {
    width: 100%;
    height: 30px;
    border-radius: 50px;
    margin-top: 6px;
  }

  .foot1 {
    padding: 40px 5% 15px;
  }

  .foot1-inner {
    max-width: 100%;
  }

  .foot1-top {
    margin-bottom: 23px;
  }

  .foot1-left {
    max-width: 238px;
  }

  .foot-desc {
    margin-bottom: 87px;
  }

  .foot-share {
    gap: 10px;
  }

  .foot-share .share-item {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }

  .foot-share .share-item img {
    width: 100%;
  }

  .foot1-right {
    gap: 39px;
    margin-top: 20px;
  }

  .foot-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .foot1-line {
    height: 1px;
    margin-bottom: 12px;
  }

  .foot-bot-right {
    gap: 20px;
  }

  .C-banner {
    height: 300px;
  }

  .C-banner .banner-bg {
    width: 100%;
    height: 100%;
  }

  .C-banner .banner-mask {
    width: 100%;
    height: 100%;
  }

  .C-banner .banner-title {
    left: 120px;
    bottom: 54px;
  }

  .down2 {
    padding: 63px 0 40px;
  }

  .down2-list {
    gap: 23px;
  }

  .down2-item {
    padding: 20px 17px 17px;
    border-radius: 10px;
  }

  .down2-item .item-inner {
    gap: 20px;
  }

  .down2-item .book-img {
    width: 85px;
    height: 135px;
    border-radius: 4px;
  }

  .down2-item .item-info {
    gap: 13px;
  }

  .down2-item .item-title-wrap {
    gap: 5px;
  }

  .down2-item .item-download {
    gap: 4px;
  }

  .down2-item .item-download img {
    width: 16px;
  }

  .down3 {
    padding: 43px 0 63px;
  }

  .down3-table {
    gap: 12px;
    overflow: auto;
  }

  .down3-thead {
    padding: 11px;
    border-radius: 10px;
    width: max-content;
  }

  .down3-thead .thead-inner {
    gap: 25px;
    flex-wrap: nowrap;
  }

  .down3-thead .col-name {
    width: 165px;
  }

  .down3-thead .col-format-size {
    width: 200px;
    gap: 79px;
    flex-wrap: nowrap;
  }

  .down3-thead .col-format-size .col-size {
    width: auto;
  }

  .down3-thead .col-date-action {
    width: 260px;
    gap: 62px;
    flex-wrap: nowrap;
  }

  .down3-tbody {
    gap: 9px;
    width: max-content;
  }

  .down3-tr {
    height: auto;
    padding: 11px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
    border: 1px solid transparent;
  }

  .down3-tr .tr-inner {
    height: 100%;
    gap: 25px;
  }

  .down3-tr .col-name {
    width: 165px;
  }

  .down3-tr .col-format-size {
    width: 200px;
  }

  .down3-tr .col-format-size .col-size {
    width: auto;
  }

  .down3-tr .col-date-action {
    width: 260px;
    gap: 62px;
    flex-wrap: nowrap;
  }

  .down3-tr .col-action {
    width: 17px;
    height: 17px;
  }

  .down3-tr .col-action img {
    width: 100%;
  }

  .contact2 {
    margin-top: 34px;
  }

  .news2 {
    padding: 58px 0 35px;
  }

  .news2-title {
    margin-bottom: 23px;
  }

  .news2-list {
    display: flex;
    flex-wrap: wrap;
    gap: 35px 17px;
    margin-bottom: 45px;
  }

  .news2-item {
    width: 100%;
  }

  .news2-item .item-cover {
    width: 100%;
    height: 181px;
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .news2-item .item-cover>img {
    width: 100%;
    height: 100%;
  }

  .news2-item .item-cover::before {
    width: 100%;
    height: 100%;
  }

  .news2-item .play-icon {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
  }

  .news2-item .play-icon:hover {
    transform: translate(-50%, -50%) scale(1.2);
  }

  .news2-item .duration {
    right: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 4px;
  }

  .news2-item .item-info {
    gap: 10px;
  }

  .news2-item .info-name {
    flex: 1;
  }

  .news2-item .info-download {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
  }

  .C-paging {
    gap: 15px;
  }

  .C-paging .paging-prev,
  .C-paging .paging-next {
    width: 10px;
    height: 10px;
  }

  .C-paging .paging-nums {
    gap: 11px;
  }

  .C-paging .paging-num {
    width: 20px;
    height: 20px;
    display: flex;
    border-radius: 25px;
  }

  .news3 {
    padding: 35px 0;
    margin-bottom: 44px;
  }

  .news3-list {
    margin-bottom: 25px;
  }

  .news3-item {
    display: flex;
    gap: 37px;
    padding: 20px 0;
    border-bottom: 1px solid #DDD;
  }

  .news3-item:first-child {
    border-top: 1px solid #DDD;
  }

  .news3-item .item-pic {
    flex-shrink: 0;
    width: 285px;
    height: 177px;
    border-radius: 10px;
  }

  .news3-item .item-pic>img {
    width: 100%;
    height: 100%;
  }

  .news3-item .item-category {
    top: 9px;
    left: 11px;
    padding: 4px;
    min-width: 55px;
    border-radius: 28px;
  }

  .news3-item .item-content {
    flex: 1;
    padding: 5px 0;
  }

  .news3-item .content-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .news3 .C-more {
    gap: 13px;
  }

  .news3 .C-more img {
    width: 13px;
    height: 13px;
  }

  .news5 {
    padding: 26px 0 23px;
  }

  .news5-wrap {
    width: 90%;
  }

  .news5-sec1 {
    width: 100%;
  }

  .news5-header {
    margin-bottom: 17px;
  }

  .news5-breadcrumb {
    gap: 4px;
    margin-bottom: 6px;
  }

  .news5-breadcrumb img {
    width: 11px;
  }

  .news5-meta {
    margin-bottom: 17px;
  }

  .news5-date {
    gap: 5px;
  }

  .news5-date img {
    width: 12px;
  }

  .news5-share {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .news5-share .li {
    width: 21px;
    height: 21px;
    display: flex;
    flex-wrap: wrap;
    border-radius: 43px;
  }

  .news5-share .li .icon {
    width: 16px;
  }

  .news5-banner {
    border-radius: 10px;
    margin-bottom: 26px;
  }

  .news5-sec2 {
    width: 100%;
  }

  .content-block {
    margin-bottom: 11px;
  }

  .content-title {
    padding: 0 0 16px;
  }

  .content-image-block {
    padding: 32px 0 21px;
  }

  .news5 .news5-content img {
    border-radius: 10px;
    margin-bottom: 6px;
    max-width: 100%;
  }

  .content-caption {
    gap: 6px;
  }

  .caption-line {
    width: 2px;
    height: 11px;
  }

  .content-highlight {
    padding: 10px 0;
  }

  .content-quote-block {
    padding: 24px 0;
  }

  .content-quote {
    gap: 14px;
    padding-right: 14px;
  }

  .quote-line {
    width: 2px;
    flex-shrink: 0;
  }

  .news5-divider {
    height: 1px;
    margin-top: 20px;
  }

  .news6 {
    padding: 50px 0 45px;
  }

  .news6-wrap {
    width: 90%;
  }

  .news6-header {
    margin-bottom: 17px;
  }

  .news6-tag {
    margin-bottom: 2px;
  }

  .news6-title {
    margin-bottom: 8px;
  }

  .news6-list {
    gap: 24px;
    margin-bottom: 17px;
  }

  .C-btn1.theme2 {
    border: 1px solid var(--color);
  }

  .C-btn1.theme3 {
    border: 1px solid #DDD;
  }

  .solutions1 {
    padding: 43px 0 60px;
  }

  .sol1-wrap {
    width: 100%;
  }

  .sol1-title {
    margin-bottom: 3px;
  }

  .sol1-label {
    margin-bottom: 7px;
  }

  .sol1-desc {
    margin-bottom: 25px;
  }

  .sol1-btns {
    gap: 23px;
  }

  .sol2-swiper .swiper-slide {
    width: 90%;
  }

  .sol2-img {
    border-radius: 10px;
    margin-bottom: 17px;
  }

  .sol2-img img {
    width: 100%;
    height: 302px;
  }

  .solutions3 {
    padding: 55px 0 58px;
  }

  .sol3-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .sol3-item {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .solutions4 {
    padding: 49px 0 74px;
    margin-bottom: 47px;
  }

  .sol4-wrap {
    width: 100%;
    gap: 22px;
  }

  .sol4-name {
    margin-top: 8px;
  }

  .sol4-tabs {
    display: inline-flex;
    border-radius: 10px;
    border: 1px solid #DBDCDC;
    padding: 3px;
    gap: 10px;
    margin-top: 20px;
  }

  .sol4-tab {
    padding: 5px;
    border-radius: 8px;
  }

  .sol4-swiper-wrap {
    width: 95%;
    gap: 26px;
    margin: 0 auto;
  }

  .sbtn1 {
    width: 33px;
  }

  .sol4-btn img {
    width: 100%;
    height: 100%;
  }

  .sol4-swiper {
    flex: 1;
  }

  .sol4-swiper .swiper-slide {
    width: 187px;
  }

  .sol4-card {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .sol4-card-img {
    border-radius: 10px;
  }

  .sol4-card-img img {
    width: 100%;
    height: 117px;
  }

  .sol4-card-info {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .sol4-card-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .sol4-card-link {
    gap: 13px;
  }

  .sol4-card-link img {
    width: 13px;
    height: 13px;
  }

  .sol4-card-link:hover img {
    transform: translateX(3px);
  }

  .about1 {
    padding: 65px 0 0;
  }

  .about1-title {
    padding-bottom: 30px;
  }

  .about1-nav {
    padding: 10px 0 16px;
    width: 100%;
    position: static;
  }

  .about1-nav .gd-box {
    gap: 5px;
  }

  .about1-nav.is-sticky {
    top: 40px;
    padding: 10px 120px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .about1-nav .nav-item {
    padding: 10px 9px;
    border: 1px solid #DDD;
    border-radius: 500px;
  }

  .about2 {
    padding: 31px 0 22px;
  }

  .about2-wrap {
    gap: 58px;
  }

  .about2-left {
    width: 100%;
  }

  .about2-head {
    margin-bottom: 10px;
  }

  .about2-label {
    margin-bottom: 9px;
  }

  .about2-right {
    width: 100%;
    height: 100%;
  }

  .about2-right .pic {
    border-radius: 10px;
  }

  .about2-right .play-icon {
    right: 23px;
    bottom: 25px;
    width: 38px;
  }

  .about2-right .play-icon img {
    width: 100%;
  }

  .about3 {
    padding: 33px 0 52px;
  }

  .about3-slide {
    border-radius: 10px;
  }

  .about3-img {
    height: auto;
    width: 100%;
    border-radius: 10px;
  }

  .about3-img img {
    width: 100%;
    height: 100%;
  }

  .about3-content {
    flex: 1;
    padding: 25px 23px 20px 25px;
  }

  .about3-head {
    margin-bottom: 10px;
  }

  .about3-label {
    margin-bottom: 9px;
  }

  .about3-text {
    margin-bottom: 15px;
  }

  .about3-text p {
    margin-bottom: 3px;
  }

  .about3-icons {
    gap: 30px;
    margin: 17px 0 0;
    justify-content: flex-start;
  }

  .about3-icons .icon-item {
    gap: 5px;
  }

  .about3-icons .icon-item img {
    width: 50px;
    height: 50px;
  }

  .about3-pagination {
    bottom: 43px !important;
    left: 100px !important;
    position: static;
    margin-top: 20px;
    display: none;
  }

  .about3-pagination .swiper-pagination-bullet {
    width: 2px;
    height: 2px;
    border-radius: 4px;
  }

  .about3-pagination .swiper-pagination-bullet-active {
    width: 23px;
  }

  .about4 {
    padding: 42px 5% 61px 5%;
  }

  .about4-title {
    margin-bottom: 50px;
  }

  .about4-main {
    gap: 0;
  }

  .about4-left {
    width: 100%;
  }

  .about4-swiper {
    height: 70px;
  }

  .about4-swiper .swiper-slide {
    display: flex;
    justify-content: flex-end;
    width: 30vw;
  }

  .about4-swiper .year-item.active {
    font-size: 38px;
  }

  .about4-swiper .year-item.active::before {
    right: 100%;
    margin-right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 3px solid var(--color2);
    border-radius: 50%;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);

    display: none;
  }

  .about4-right {
    flex: none;
    width: 100%;
    text-align: center;
  }

  .about4-content {
    gap: 13px;
  }

  .about4-content .content-title {
    width: 100%;
  }

  .about4-content .content-img {
    width: 260px;
    height: auto;
    border-radius: 10px;
    margin: 0 auto;
  }

  .about4-content .content-img img {
    width: 100%;
    height: 100%;
  }

  .about5 {
    padding: 50px 0 47px;
  }

  .about5-card {
    border-radius: 15px;
    padding: 26px 25px;
  }

  .about5-avatar {
    width: 210px;
    height: 135px;
    border-radius: 74px;
    flex-shrink: 0;
  }

  .about5-avatar img {
    width: 100%;
    height: 100%;
  }

  .about5-info {
    width: 100%;
    margin-top: 40px;
  }

  .about5-quote {
    margin-bottom: 30px;
  }

  .about6 {
    padding: 0 0 50px;
  }

  .about6-wrap {
    padding: 0 5%;
  }

  .about6-head {
    width: 100%;
    margin-bottom: 28px;
  }

  .about6-btns {
    gap: 15px;
  }

  .about6-swiper .swiper-slide {
    width: 100%;
  }

  .about6-item {
    height: 267px;
    border-radius: 10px;
  }

  .about6-item .item-bg {
    width: 100%;
    height: 100%;
  }

  .about6-item .item-bg img {
    width: 100%;
    height: 100%;
  }

  .about6-item .item-info {
    width: 100%;
    padding: 12px;
    backdrop-filter: blur(16px);
    border-radius: 0 0 10px 10px;
  }

  .about7 {
    padding: 51px 0 70px;
  }

  .about8 {
    padding: 0 0 40px;
  }

  .about7-wrap {
    gap: 23px;
  }

  .about7-left {
    width: 100%;
  }

  .about7-title {
    margin-bottom: 16px;
  }

  .about7-right {
    flex: none;
    width: 100%;
    gap: 36px;
  }

  .about7-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .about7-img img {
    width: 100%;
    height: 100%;
  }

  .about7-accordion {
    width: 100%;
  }

  .accordion-item {
    margin-bottom: 16px;
  }

  .accordion-header {
    padding-bottom: 15px;
  }

  .accordion-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .accordion-content {
    padding-bottom: 10px;
  }

  .accordion-line {
    height: 1px;
  }

  .about8-wrap {
    gap: 29px;
  }

  .about8-left {
    width: 100%;
    padding-top: 73px;
  }

  .about8-title {
    margin-bottom: 12px;
  }

  .about8-right {
    flex: 1;
    height: 400px;
    overflow: hidden;
  }

  .about8-right img {
    width: 100%;
  }

  .about8-column {
    padding: 0 4px;
  }

  .about8-card {
    margin-bottom: 8px;
  }

  .about8-card img {
    border-radius: 4px;
  }

  .user-page {
    width: 100%;
    padding: 21px 10px;
  }

  .user-container {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    border-radius: 10px;
    flex-direction: column;
  }

  .user-left {
    flex: none;
    width: 100%;
    padding: 30px 13px 9px;
  }

  .user-left-inner {
    width: 100%;
    max-width: 393px;
  }

  .user-left-content {
    width: 100%;
    padding-left: 0;
  }

  .user-right {
    width: 100%;
    border-radius: 10px;
    padding: 16px 20px;
  }

  .user-right-list {
    gap: 14px;
  }

  .user-right-item {
    border-radius: 10px;
    padding: 11px 15px;
    min-height: 80px;
  }

  .user-right-item .item-header {
    gap: 12px;
    margin-bottom: 7px;
  }

  .user-right-item .item-icon {
    width: 22px;
    height: 22px;
  }

  .user-right-item .item-desc {
    margin-left: 34px;
  }

  .user-header-title {
    margin-bottom: 10px;
  }

  .user-header {
    margin-bottom: 28px;
  }

  .user-footer {
    margin-top: 21px;
  }

  .user-footer-inner .footer-links {
    gap: 14px;
  }

  .eform-btn {
    width: 100%;
    max-width: 154px;
    height: 30px;
    border-radius: 23px;
  }

  .eform-btn.theme2 {
    border: 1px solid #E71F18;
  }

  .eform-btn.full-width {
    max-width: 100%;
  }

  .user-yindao-main {
    gap: 28px;
  }

  .user-yindao-steps {
    gap: 22px;
  }

  .user-yindao-steps .steps-container {
    gap: 16px;
  }

  .user-yindao-steps .steps-numbers {
    gap: 9px;
  }

  .user-yindao-steps .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }

  .user-yindao-steps .step-line {
    height: 15px;
    margin-left: 14px;
    border-left: 1px dashed #979797;
  }

  .user-yindao-steps .steps-info {
    gap: 34px;
  }

  .user-yindao-steps .step-item .step-name {
    margin-bottom: 6px;
  }

  .user-yindao-buttons {
    gap: 12px;
  }

  .user-form-section {
    gap: 15px;
  }

  .user-form-group {
    gap: 17px;
  }

  .user-form-row {
    gap: 12px;
  }

  .user-input {
    width: 100%;
    height: 30px;
    border: 1px solid #999;
    border-radius: 10px;
    padding: 0 8px;
  }

  .user-input.half {
    width: 100%;
  }

  .user-input-wrapper .get-code-btn {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  .user-login-section {
    gap: 43px;
  }

  .user-login-form {
    gap: 9px;
  }

  .user-login-bottom {
    gap: 10px;
  }

  .user-findpwd-section {
    gap: 47px;
  }

  .user-findpwd-form {
    gap: 17px;
  }

  .user-reset-section.show {
    display: flex;
  }

  .product1 {
    padding-top: 10px;
  }

  .product1-nav {
    gap: 0;
  }

  .product1-nav .nav-item {
    gap: 3px;
    width: 32%;
  }

  .product1-nav .nav-icon {
    width: 35px;
    height: 35px;
  }

  .product1-nav .nav-icon img {
    width: 100%;
    height: 100%;
  }

  .product1-nav .nav-line {
    width: 1px;
    height: 60px;
    display: none;
  }

  .product1-line {
    width: 100%;
    height: 1px;
    margin-top: 10px;
  }

  .product2 {
    padding: 65px 0 65px;
  }

  .product2-wrap {
    gap: 54px;
  }

  .product2-left {
    width: 100%;
    flex-shrink: 0;
  }

  .product2-header {
    margin-bottom: 11px;
  }

  .product2-label {
    margin-bottom: 7px;
  }

  .product2-right {
    width: 100%;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .product2-right img {
    width: 100%;
  }

  .product4 {
    padding: 0 0 32px;
  }

  .product5 {
    padding: 50px 0;
  }

  .product5-wrap {
    gap: 54px;
    align-items: flex-start;
  }

  .product5-left {
    width: 100%;
    flex-shrink: 0;
  }

  .product5-header {
    margin-bottom: 19px;
  }

  .product5-label {
    margin-bottom: 9px;
  }

  .product5-intro {
    margin-bottom: 7px;
  }

  .product5-intro .intro-title {
    margin-bottom: 7px;
  }

  .product5-intro .intro-desc {
    margin-bottom: 7px;
  }

  .product5-methods {
    margin-bottom: 23px;
  }

  .product5-methods .methods-title {
    margin-bottom: 14px;
  }

  .product5-methods .methods-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .product5-methods .methods-list li {
    display: flex;
    gap: 11px;
  }

  .product5-methods .methods-list li .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .product5-accordion {
    width: 100%;
  }

  .product5-right {
    width: 100%;
    border-radius: 10px;
  }

  .product5-right img {
    width: 100%;
  }

  .product6 {
    padding: 50px 0;
  }

  .product6-wrap {
    gap: 60px;
    align-items: flex-start;
  }

  .product6-left {
    width: 100%;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .product6-left img {
    width: 100%;
  }

  .product6-right {
    width: 100%;
  }

  .product6-header {
    margin-bottom: 20px;
  }

  .product6-label {
    margin-bottom: 9px;
  }

  .product6-accordion {
    width: 100%;
  }

  .product8 {
    padding: 50px 0;
  }

  .product8-wrap {
    max-width: 100%;
  }

  .product8-header {
    margin-bottom: 40px;
  }

  .product8-label {
    margin-bottom: 10px;
  }

  .product8-accordion {
    width: 100%;
  }

  .product8-accordion .accordion-item {
    margin-bottom: 16px;
  }

  .product8-accordion .accordion-header {
    padding-bottom: 15px;
  }

  .product8-accordion .accordion-title {
    flex: 1;
    padding-right: 10px;
  }

  .pdt1 {
    padding: 29px 5% 0;
  }

  .pdt1-wrap {
    width: 100%;
  }

  .pdt1-breadcrumb {
    gap: 4px;
    margin-bottom: 16px;
  }

  .pdt1-breadcrumb-home {
    width: 16px;
    height: 16px;
  }

  .pdt1-breadcrumb-home img {
    width: 100%;
    height: 100%;
  }

  .pdt1-breadcrumb-list {
    gap: 2px;
  }

  .pdt1-breadcrumb-item {
    gap: 2px;
  }

  .pdt1-breadcrumb-arrow {
    width: 8px;
    height: 8px;
  }

  .pdt1-breadcrumb-link,
  .pdt1-breadcrumb-current {
    padding: 4px 2px;
  }

  .pdt1-main {
    gap: 20px;
  }

  .pdt1-left {
    width: 100%;
  }

  .pdt1-big-imgs {
    width: 100%;
    height: 246px;
    margin-bottom: 4px;
  }

  .pdt1-big-img {
    width: 100%;
    height: 246px;
    border-radius: 10px;
    border: 1px solid #F5F5F7;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  }

  .pdt1-big-label {
    top: 12px;
    left: 12px;
    border: 1px solid #DBDCDC;
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 5px -1px rgba(0, 0, 0, 0.1);
  }

  .pdt1-3d-btn {
    bottom: 12px;
    right: 12px;
    border: 1px solid #DBDCDC;
    border-radius: 9999px;
    padding: 8px 6px 8px 8px;
    gap: 3px;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 5px -1px rgba(0, 0, 0, 0.1);
  }

  .pdt1-3d-btn img {
    width: 16px;
    height: 16px;
  }

  .pdt1-thumbs {
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
  }

  .pdt1-thumb-item {
    /* width: 69px; */
    height: 67px;
    border-radius: 6px;
    border: 1px solid #DBDCDC;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  }

  .pdt1-thumb-item.active {
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 3px rgba(218, 41, 28, 1);
  }

  .pdt1-thumb-img {
    width: 100%;
    height: 100%;
  }

  .pdt1-thumb-name {
    backdrop-filter: blur(12px);
    border-top: 1px solid #ACB0B1;
    padding: 2px;
  }

  .pdt1-right {
    width: 100%;
  }

  .pdt1-info {
    margin-bottom: 13px;
  }

  .pdt1-info-text {
    margin-bottom: 7px;
  }

  .pdt1-titles {
    margin-bottom: 7px;
  }

  .pdt1-title {
    margin-bottom: 2px;
  }

  .pdt1-desc {
    max-height: 46px;
  }

  .pdt1-offer-btn {
    width: auto;
    height: 35px;
    border-radius: 28px;
    gap: 4px;
    padding: 0 10px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  }

  .pdt1-offer-btn img {
    width: 10px;
    height: 10px;
  }

  .pdt1-catalogs-line {
    height: 1px;
    margin-bottom: 8px;
  }

  .pdt1-catalogs-title {
    margin-bottom: 4px;
  }

  .pdt1-pdf-list {
    gap: 4px;
  }

  .pdt1-pdf-item {
    width: 80px;
    height: 80px;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 5px -1px rgba(0, 0, 0, 0.1);
  }

  .pdt1-pdf-item:hover {
    box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.15), 0px 5px 6px -1px rgba(0, 0, 0, 0.15);
  }

  .pdt1-pdf-item img {
    width: 100%;
    height: 100%;
  }

  .pdt2 {
    padding: 16px 5% 0;
  }

  .pdt2-wrap {
    width: 100%;
  }

  .pdt2-tabs {
    border: 1px solid #DBDCDC;
    border-radius: 10px;
    padding: 3px;
    gap: 4px;
    display: inline-flex;
  }

  .pdt2-tab {
    padding: 5px 6px;
    border-radius: 8px;
  }

  .pdt3 {
    padding: 16px 0 40px;
  }

  .pdt3-wrap {
    width: 90%;
    gap: 15px;
  }

  .pdt3-filters {
    width: 100%;
  }

  .pdt3-filters-title {
    margin-bottom: 16px;
  }

  .pdt3-filter-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pdt3-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pdt3-filter-toggle {
    width: 10px;
    height: 10px;
  }

  .pdt3-filter-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pdt3-filter-option {
    gap: 6px;
  }

  .pdt3-checkbox {
    width: 12px;
    height: 12px;
    border: 1px solid #DBDCDC;
    border-radius: 4px;
  }

  .pdt3-filter-option input:checked+.pdt3-checkbox::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 2px;
  }

  .pdt3-divider {
    width: 100%;
    height: 1px;
  }

  .pdt3-products {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 37px;
  }

  .pdt3-list {
    display: flex;
    gap: 8px;
  }

  .pdt3-row {
    gap: 8px;
  }

  .pdt3-card {
    width: calc(50% - 10px);
    border: 1px solid #DBDCDC;
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  }

  .pdt3-card:hover {
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.1);
  }

  .pdt3-card .bg {
    height: 100px;
    border-radius: 3px;
  }

  .pdt3-card-name {
    padding: 7px;
  }

  .pdt3-pagination {
    padding-top: 10px;
  }

  .pdt3-page-btn {
    height: 26px;
    padding: 0 10px;
    border: 1px solid #DDDDDD;
    border-radius: 20px;
    gap: 4px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  }

  .pdt3-page-btn img {
    width: 22px;
    height: 22px;
  }

  .pdt3-page-num {
    width: 20px;
    height: 20px;
    display: flex;
    border-radius: 10px;
  }

  .pdt4 {
    padding: 20px 0 40px;
  }

  .pdt4-wrap {
    width: 90%;
  }

  .pdt4-sec {
    margin-bottom: 35px;
  }

  .pdt4-sec-title {
    margin-bottom: 13px;
  }

  .pdt4-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pdt4-list-item {
    gap: 11px;
  }

  .pdt4-list-item p {
    flex: 1;
  }

  .pdt4-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .pdt4-sec2 {
    gap: 37px;
  }

  .pdt4-sec2-img {
    width: 350px;
    height: 200px;
    border-radius: 10px;
  }

  .pdt4-sec2-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .pdt4-sec2-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .pdt4-sec3 {
    width: 100%;
    overflow: auto;
  }

  .pdt4-table {
    width: max-content;
    border: 1px solid #DBDCDC;
    border-radius: 10px;
  }

  .pdt4-table thead td {
    padding: 15px 15px;
    border-bottom: 1px solid #DBDCDC;
  }

  .pdt4-table tbody td {
    padding: 10px 15px;
  }

  .pdt4-table tbody tr:nth-last-child(n+2) td {
    border-bottom: 1px solid #DBDCDC;
  }

  .pdt4-table .tab-pd-info {
    padding-left: 20px;
    width: 200px;
  }

  .pdt4-table .tab-pd-info img {
    width: 80px;
    height: 48px;
    border-radius: 4px;
  }

  .pdt4-table .tab-pd-info p {
    width: 132px;
    margin: 10px 0 0;
  }

  .pdt4-usage-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pdt4-usage-row {
    gap: 0px;
  }

  .pdt4-usage-item {
    gap: 11px;
    min-width: 150px;
    width: 100%;
  }

  .pdt5 {
    padding: 19px 0 40px;
  }

  .pdt5-wrap {
    width: 90%;
  }

  .pdt5-title {
    margin-bottom: 18px;
  }

  .pdt5-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
  }

  .pdt5-item {
    gap: 20px;
  }

  .pdt5-item-title {
    width: 198px;
    flex-shrink: 0;
  }

  .pdt5-item-content {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 13px;
  }

  .pdt5-features {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pdt5-feature {
    gap: 11px;
  }

  .pdt5-feature p {
    flex: 1;
  }

  .pdt5-item-line {
    height: 1px;
  }

  .pdt6 {
    padding: 15px 0 40px;
  }

  .pdt6-wrap {
    width: 90%;
  }

  .pdt6-list {
    gap: 10px;
    flex-wrap: wrap;
  }

  .pdt6-card {
    padding: 9px 8px;
    border: 1px solid #E8E9E9;
    border-radius: 6px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
  }

  .pdt6-card-tag {
    padding: 1px 4px;
    border: 1px solid #ACB0B1;
    border-radius: 4px;
    margin-bottom: 12px;
  }

  .pdt6-card-img {
    width: 100%;
    height: 180px;
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .pdt6-card-desc {
    margin-bottom: 12px;
    flex: 1;
  }

  .pdt6-card-btns {
    gap: 6px;
  }

  .pdt6-btn {
    padding: 5px 8px;
    border: 1px solid #FADFDD;
    border-radius: 6px;
  }

  .pdt6-btn.detail {
    width: auto;
  }

  .pdt6-btn.download {
    width: auto;
  }

  .pdt7 {
    padding: 19px 0 40px;
  }

  .pdt7-wrap {
    width: 90%;
  }

  .pdt7-title {
    margin-bottom: 12px;
  }

  .pdt7-list {
    gap: 10px;
    flex-wrap: wrap;
  }

  .pdt7-card {
    width: 100%;
    height: auto;
    padding: 8px;
    border: 1px solid #E8E9E9;
    border-radius: 6px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
  }

  .pdt7-card-img {
    width: 100%;
    height: 180px;
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .pdt7-card-desc {
    margin-bottom: 12px;
    flex: 1;
  }

  .pdt7-card-btns {
    gap: 6px;
  }

  .pdt7-btn {
    padding: 5px 8px;
    border: 1px solid #FADFDD;
    border-radius: 6px;
  }

  .pdt7-btn.view {
    width: auto;
  }

  .pdt7-btn.download {
    width: auto;
  }

  .pdt8 {
    padding: 35px 0 40px;
  }

  .pdt8-wrap {
    width: 90%;
  }

  .pdt8-sec {
    margin-bottom: 30px;
  }

  .pdt8-sec-title {
    margin-bottom: 15px;
  }

  .pdt8-video-list {
    gap: 17px;
  }

  .pdt8-video-item {
    width: 100%;
  }

  .pdt8-video-thumb {
    margin-bottom: 12px;
  }

  .pdt8-video-thumb .bg {
    width: 100%;
    height: 180px;
    border-radius: 10px;
  }

  .pdt8-video-thumb::before {
    border-radius: 10px;
  }

  .pdt8-video-play {
    bottom: 9px;
    right: 11px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
  }

  .pdt8-video-play::before {
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-left: 9px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }

  .pdt8-image-list {
    gap: 14px;
    flex-wrap: wrap;
    grid-template-columns: repeat(2, 1fr);
  }

  .pdt8-image-thumb {
    width: 100%;
    height: 120px;
    border-radius: 6px;
    border: 1px solid #EEEEEE;
    margin-bottom: 8px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  }

  .pdt8-image-overlay {
    border-radius: 6px;
    gap: 3px;
  }

  .pdt8-image-overlay img {
    width: 27px;
    height: 27px;
  }

  .offer-modal-mask {
    backdrop-filter: blur(5px);
  }

  .offer-modal-content {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    border-radius: 10px;
    padding: 15px 25px;
  }

  .offer-modal-header {
    margin-bottom: 11px;
  }

  .offer-modal-close {
    width: 10px;
    height: 10px;
  }

  .offer-modal-close img {
    width: 100%;
    height: 100%;
  }

  .offer-modal-line {
    height: 1px;
    margin-bottom: 12px;
  }

  .offer-modal-body {
    margin-bottom: 8px;
  }

  .offer-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .offer-form-row {
    gap: 8px;
  }

  .offer-form-group {
    width: calc(50% - 4px);
  }

  .offer-form-group.full {
    width: 100%;
  }

  .offer-form-label {
    margin-bottom: 5px;
  }

  .offer-form-input,
  .offer-form-select {
    width: 100%;
    height: 18px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    padding: 0 6px;
  }

  .offer-select-wrap .offer-form-select {
    padding-right: 20px;
  }

  .offer-select-wrap .offer-form-input {
    padding-right: 20px;
  }

  .offer-select-arrow {
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
  }

  .offer-select-display {
    width: 100%;
    height: 18px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    padding: 0 6px;
  }

  .offer-select-text {
    flex: 1;
  }

  .offer-select-display .offer-select-arrow {
    width: 8px;
  }

  .offer-select-wrap.open .offer-select-display .offer-select-arrow {
    transform: translateY(-50%) rotate(180deg);
  }

  .offer-dropdown {
    top: calc(100% + 2px);
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.1);
  }

  .offer-dropdown-search {
    padding: 4px;
    border-bottom: 1px solid #EEEEEE;
  }

  .offer-dropdown-search-input {
    width: 100%;
    height: 18px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    padding: 5px 6px;
  }

  .offer-dropdown-list {
    max-height: 100px;
  }

  .offer-dropdown-item {
    padding: 5px 8px;
  }

  .offer-form-textarea {
    width: 100%;
    height: 70px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    padding: 5px 6px;
  }

  .offer-file-wrap {
    height: 18px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    padding: 3px;
    gap: 2px;
  }

  .offer-file-btn {
    display: inline-flex;
    width: 35px;
    height: 13px;
    /* border: 1px solid #E71F18; */
    border-radius: 4px;
  }

  .offer-file-tip {
    margin-top: 3px;
  }

  .offer-captcha {
    margin-top: 8px;
  }

  .offer-captcha-box {
    border: 1px solid #DDDDDD;
    padding: 6px 8px;
  }

  .offer-captcha-check {
    gap: 6px;
  }

  .offer-captcha-input {
    width: 15px;
    height: 15px;
    border: 1px solid #DBDCDC;
    border-radius: 4px;
  }

  .offer-captcha-logo img {
    height: 14px;
    margin-bottom: 2px;
  }

  .offer-captcha-links {
    gap: 3px;
    justify-content: flex-end;
  }

  .offer-captcha-dot {
    width: 1px;
    height: 1px;
    border-radius: 50%;
  }

  .offer-modal-footer {
    gap: 7px;
  }

  .offer-btn {
    flex: 1;
    height: 23px;
    border-radius: 12px;
  }

  .offer-btn.cancel {
    border: 1px solid #E71F18;
  }

  .offer-btn.submit {
    border: 1px solid #E71F18;
  }

  .img-preview-modal {
    width: 100%;
    height: 100%;
  }

  .img-preview-modal .img-preview-modal-close {
    right: 5px;
    top: 5px;
    font-size: 12px;
    padding: 3px 7px;
    border-radius: 5px;
  }

  .img-preview-modal .iframebox {
    width: 100%;
    height: 100%;
  }

  .img-preview-modal iframe {
    width: 100%;
    height: 100%;
  }

  .model-preview-modal {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
  }

  .model-preview-modal-content {
    width: 100%;
    height: 100%;
  }

  .model-preview-modal-content-main {
    width: 100%;
    height: 360px;
  }

  .model-preview-modal .iframebox {
    width: 100%;
    height: 100%;
  }

  .model-preview-modal iframe {
    width: 100%;
    height: 100%;
  }

  .model-preview-modal .C-btn1 {
    left: 50%;
    transform: translateX(-50%);
    /* bottom: 19px; */
    top: 100%;
    margin-top: 19px;
  }

  .bim1 {
    padding: 35px 0 42px;
  }

  .bim1 .pic {
    width: 100%;
    border-radius: 10px;
  }

  .bim1 .intr {
    width: 100%;
  }

  .bim1 .intr .t2 {
    margin: 5px 0 20px;
  }

  .bim1 .intr .t3 p {
    margin-bottom: 5px;
  }

  .bim2 .pdt3-filters {
    width: 100%;
  }

  .bim2 .pdt6-btn {
    width: 100%;
  }

  .C-tabs {
    display: inline-flex;
    border: 1px solid #DBDCDC;
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
  }

  .C-tabs .C-tab {
    padding: 5px 6px;
    border-radius: 8px;
    gap: 4px;
    display: inline-flex;
    flex-wrap: wrap;
  }

  .C-tabs .C-tab .icon {
    width: 10px;
  }

  .C-tabs .C-tab.active {
    box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  }

  .C-table {
    width: max-content;
    border: 1px solid #DBDCDC;
    border-radius: 10px;
  }

  .C-table thead th {
    padding: 11px 10px;
    border-bottom: 1px solid #DBDCDC;
  }

  .C-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #DBDCDC;
  }

  .C-table .td-product .flex-yc {
    gap: 6px;
  }

  .C-table .td-product .thumb {
    width: 80px;
    height: 48px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .C-table .td-product span {
    flex: 1;
  }

  .C-table .td-product .thumb img {
    width: 100%;
    height: 100%;
  }

  .C-table .td-product .expand-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
  }

  .C-tab-Sel1 {
    display: inline-flex;
    gap: 3px;
    padding: 6px 8px;
    border-radius: 50px;
    border: 1px solid #DBDCDC;
  }

  .C-tab-Sel1 img {
    width: 10px;
  }

  .C-tab-Sel1-dropdown {
    top: 100%;
    min-width: 100%;
    margin-top: 2px;
    max-height: 110px;
    border: 1px solid #DBDCDC;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .C-tab-Sel1-options {
    padding: 4px 0;
  }

  .C-tab-Sel1-option {
    display: flex;
    gap: 4px;
    padding: 4px 6px;
  }

  .C-tab-Sel1-option .checkbox {
    width: 9px;
    height: 9px;
    border: 1px solid #DBDCDC;
    border-radius: 4px;
  }

  .C-tab-Sel1-option input:checked+.checkbox {
    background: #fff url('/img/pdt3-i1.svg') no-repeat center/7px;
  }

  .wishlist-btn {
    display: inline-flex;
    gap: 3px;
  }

  .wishlist-btn .icon {
    width: 10px;
    height: 10px;
  }

  .pjlb-modal-mask {
    backdrop-filter: blur(5px);
  }

  .pjlb-modal-close {
    top: 10px;
    right: 92%;
    width: 12px;
  }

  .pjlb-modal-close img {
    width: 100%;
  }

  .pjlb-modal-content {
    height: 100%;
    width: 90%;
    padding: 20px;
  }

  .pjlb-header {
    margin-bottom: 10px;
  }

  .pjlb-header .C-tabs {
    gap: 15px;
  }

  .pjlb-header .C-tabs .C-tab {
    padding: 5px 8px;
    min-width: 75px;
  }

  .pjlb-search-bar {
    gap: 15px;
    margin-bottom: 10px;
  }

  .pjlb-search {
    flex: 1;
    height: 23px;
    border: 1px solid #DBDCDC;
    border-radius: 10px;
    padding: 0 7px;
    gap: 4px;
  }

  .pjlb-search .search-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
  }

  .pjlb-search input {
    flex: 1;
    font-size: 12px;
  }

  .pjlb-view-btn {
    display: inline-flex;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid #E71F18;
    border-radius: 500px;
  }

  .pjlb-view-btn img {
    width: 8px;
    height: 8px;
  }

  .pjxq-modal .pjlb-modal-close {
    right: 92%;
  }

  .pjxq-modal-mask {
    backdrop-filter: blur(5px);
  }

  .pjxq-modal-content {
    width: 90%;
    padding: 18px 13px;
    height: 100%;
  }

  .pjxq1 {
    gap: 16px;
    margin-bottom: 14px;
  }

  .pjxq1-img {
    width: 173px;
    height: 133px;
    border: 1px solid #DDDDDD;
    flex-shrink: 0;
  }

  .pjxq1-img img {
    width: 100%;
    height: 100%;
  }

  .pjxq1-info {
    flex: none;
    width: 100%;
  }

  .pjxq1-text {
    gap: 8px;
    margin-bottom: 14px;
  }

  .pjxq1-download {
    display: inline-flex;
    gap: 3px;
  }

  .pjxq1-download img {
    width: 10px;
    height: 10px;
  }

  .pjxq1-btns {
    gap: 9px;
  }

  .pjxq1-btn {
    display: inline-flex;
    gap: 4px;
    padding: 7px 10px;
    border-radius: 500px;
  }

  .pjxq1-btn img {
    width: 12px;
  }

  .pjxq1-btn.theme1 {
    border: 1px solid #DBDCDC;
  }

  .pjxq1-btn.theme2 {
    border: 1px solid #E71F18;
  }

  .pjxq2 {
    margin-bottom: 12px;
  }

  .pjxq2 .C-tabs {
    width: 100%;
  }

  .pjxq2 .C-tabs .C-tab {
    flex: 1;
    padding: 5px 10px;
  }

  .pjxq3-table {
    width: 100%;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
  }

  .pjxq3-table .table-row {
    border-bottom: 1px solid #DDDDDD;
  }

  .pjxq3-table .table-cell {
    padding: 7px 15px;
  }

  .pjxq3-table .table-cell.label {
    border-right: 1px solid #DDDDDD;
    width: 117px;
    flex-shrink: 0;
  }

  .pjxq3-table .table-cell.value {
    flex: 1;
  }

  .toast-notification {
    top: 10px;
    right: 10px;
    border-radius: 8px;
    padding: 6px 20px 6px 8px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    gap: 5px;
  }

  .toast-notification.show {
    display: flex;
  }

  .toast-notification .toast-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
  }

  .toast-notification .toast-close {
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    display: flex;
    font-size: 14px;
  }

  .toast-notification .toast-progress {
    height: 1px;
    border-radius: 0 0 8px 8px;
  }

  .toast-notification .toast-progress-bg {
    height: 1px;
  }

  .pjxq4 {
    width: 100%;
  }

  #chart-main {
    width: 100%;
    height: 200px;
    padding: 5px;
  }

  .chart-wrapper {
    max-width: 450px;
    margin: 10px auto;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.05);
  }

  .wish1 {
    padding: 20px 5% 0 0;
  }

  .wish1 .zuo {
    width: 100%;
  }

  .wish1 .you {
    width: 95%;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
    padding: 21px 15px 20px;
    margin: 20px 0 0 auto;
  }

  .wish1 .you .bg {
    width: 50px;
    height: 50px;
    border-radius: 100%;
  }

  .wish1 .you .t1 {
    margin-top: 15px;
  }

  .wish1 .you .t2 {
    margin-top: 5px;
  }

  .wish1 .you .line {
    margin: 18px 0;
    border-bottom: 1px dashed #DBDCDC;
  }

  .wish2 {
    padding: 32px 0 40px;
  }

  .wish2 .sec2 {
    margin: 20px 0 15px;
  }

  .wish2 .sec2 .sec2-zuo {
    gap: 10px;
    margin-bottom: 10px;
  }

  .C-select2 {
    max-width: 100%;
  }

  .C-select2 .simulate {
    width: 100%;
    padding: 4px 2px 4px 4px;
    display: flex;
    flex-wrap: wrap;
    border-radius: 6px;
    border: 1px solid #DDD;
  }

  .C-select2 .simulate::after {
    width: 10px;
    height: 10px;
    margin-left: 6px;
  }

  .C-select2.on .simulate::before {
    top: 100%;
    width: 100%;
    height: 3px;
  }

  .C-select2 .placeholder {
    flex: 1;
  }

  .C-select2 .name {
    flex: 1;
  }

  .C-select2 .options {
    top: 100%;
    width: 100%;
    min-width: 50px;
    flex-direction: column;
    max-height: 150px;
    border-radius: 6px;
    border: 1px solid #EEE;
    margin-top: 2px;
  }

  .C-select2.on .options {
    display: flex;
  }

  .C-select2 .option {
    width: 100%;
    padding: 4px 6px;
  }

  .C-table-input input {
    width: 27px;
    height: 17px;
    border-radius: 6px;
    border: 1px solid #DDD;
  }

  .wish3 {
    width: 100%;
    height: 100%;
  }

  .wish3.on {
    display: flex;
  }

  .wish3 .main {
    width: 100%;
    height: 80vh;
    padding: 25px 10px 30px 33px;
    border-radius: 10px;
  }

  .wish3 .sec2 {
    margin-top: 9px;
  }

  .wish3 .sec2 .zuo {
    width: 100%;
    margin-right: 9px;
    border-radius: 10px;
    border: 1px solid #d9d9d9;
  }

  .wish3 .sec2 .zuo .ul {
    padding: 11px 0;
    display: flex;
    flex-wrap: wrap;
  }

  .wish3 .sec2 .zuo .li {
    line-height: 23px;
    padding: 0 6px;
    margin-bottom: 1px;
    width: auto;
  }

  .wish3 .sec2 .zuo .li:hover {
    border-radius: 8px;
  }

  .wish3 .sec2 .zuo .li.on {
    border-radius: 8px;
  }

  .wish3 .sec2 .you {
    flex: none;
    margin-top: 20px;
    width: 100%;
  }

  .wish3 .sec2 .you .filter {
    gap: 10px;
    margin-bottom: 10px;
  }

  .solutions10 .sec1 {
    padding: 6px 5%;
  }

  .solutions10 .sec1 .back {
    margin-right: 20px;
  }

  .solutions10 .sec1 .back .icon {
    width: 11px;
    margin-right: 2px;
  }

  .solutions10 .sec1 .btn-group {
    gap: 10px;
    margin-top: 10px;
  }

  .solutions10 .sec1 .C-btn1 {
    margin-right: 10px;
  }

  .solutions10 .sec2 {
    flex: 1;
  }

  .solutions10 .sec2 .you {
    padding: 17px 7px 0 19px;
    top: 50%;
    transform: translateY(-50%);
    width: 98%;
    height: 90%;
    border-radius: 15px 0 0 15px;
  }

  .solutions10 .sec2 .list {
    margin-top: 11px;
    flex: 1;
  }

  .solutions10 .sec2 .list .item {
    margin-bottom: 10px;
  }

  .solutions10 .sec2 .list .item .bg {
    width: 130px;
    height: 80px;
  }

  .solutions10 .sec2 .list .item .intr {
    flex: 1;
    margin-left: 8px;
  }

  .solutions10 .sec2 .list .item .intr .t2 {
    margin: 5px 0 13px;
  }

  .solutions10 .sec2 .list .item .intr .C-more {
    gap: 10px;
  }

  .solutions11 {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
  }

  .solutions11.on {
    display: flex;
  }

  .solutions11 .container {
    width: 100%;
    height: 80vh;
    padding: 15px 35px 35px 15px;
    border-radius: 10px;
  }

  .solutions11 .sec1 .back {
    margin-right: 20px;
  }

  .solutions11 .sec1 .back .icon {
    width: 11px;
    margin-right: 2px;
  }

  .solutions11 .sec1 .C-btn1 {
    margin-right: 10px;
  }

  .solutions11 .sec2 {
    padding: 20px 0;
    flex-direction: column-reverse;
    gap: 30px;
  }

  .solutions11 .sec2 .zuo {
    width: 100%;
  }

  .solutions11 .sec2 .zuo .t3 {
    margin: 8px 0 0;
  }

  .solutions11 .sec2 .zuo .pjlb-table-wrap {
    margin-top: 15px;
    max-height: 247px;
  }

  .solutions11 .sec2 .zuo .C-table tbody td {
    padding: 8px 5px;
  }

  .solutions11 .sec2 .zuo .controls {
    gap: 17px;
    margin-top: 17px;
  }

  .solutions11 .sec2 .you {
    width: 100%;
  }

  .solutions11 .sec2 .you .pdt1-left {
    width: 100%;
  }

  .search-modal {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    padding: 97px 5%;
  }

  .search-modal .search-modal-content {
    border-radius: 10px;
    border: 1px solid #696d76;
  }

  .search-modal .search-modal-header {
    padding: 7px 9px;
  }

  .search-modal .search-modal-header input {
    flex: 1;
    padding: 0 15px;
  }

  .search-modal .search-modal-body {
    border-top: 1px solid #ddd;
  }

  .search-modal .search-reject {
    padding: 7px;
  }

  .search-modal .search-pending {
    flex-direction: column;
    padding: 5px 7px;
    gap: 4px;
  }

  .search-modal .search-pending.on {
    display: flex;
  }

  .search-modal .search-pending .search-pending-item {
    width: 100%;
    height: 18px;
    border-radius: 6px;
  }

  .search-modal .search-results .search-results-item .search-results-title {
    border-bottom: 1px solid #ddd;
    padding: 5px 9px;
  }

  .search-modal .search-results .search-results-item .ul .li {
    padding: 8px 9px;
  }

  .search-modal .search-results .search-results-item .ul .li::after {
    height: 100%;
    border-left: 3px solid #e71f18;
  }

  .search-modal .search-results .search-results-item .tag {
    padding: 3px;
    border-radius: 10px;
  }

  .pdlv-wrap {
    width: 90%;
    padding: 42px 0 40px;
    gap: 15px;
    align-items: flex-start;
  }

  .pdlv-left {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .pdlv-links {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .pdlv-links-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pdlv-link-item {
    display: flex;
    height: 24px;
    padding: 0 10px;
    border: 1px solid #DBDCDC;
    border-radius: 499px;
  }

  .pdlv-link-item img {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
  }

  .pdlv-filters {
    display: flex;
    flex-direction: column;
  }

  .pdlv-divider {
    width: 1px;
    flex-shrink: 0;
  }

  .pdlv-right {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .pdlv-right-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pdlv-products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pdlv-product-card {
    width: calc(50% - 10px);
    border: 1px solid #DBDCDC;
    border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  }

  .pdlv-product-card:hover {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .pdlv-product-img {
    height: 100px;
    border-radius: 3px;
  }

  .pdlv-product-img img {
    width: 100%;
    height: 100%;
  }

  .pdlv-product-info {
    padding: 7px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .pdlv-intro-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .pdlv-intro-item {
    border: 1px solid #DBDCDC;
    border-radius: 8px;
    padding: 10px 8px 9px;
  }

  .pdlv-intro-title {
    padding-bottom: 9px;
  }

  .pdlv-intro-line {
    height: 1px;
    margin-bottom: 14px;
  }

  .pdlv-intro-ul {
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pdlv-qa {
    width: 100%;
  }

  .pdlv-qa-inner {
    border: 1px solid #DBDCDC;
    border-radius: 8px;
    padding: 10px 8px 9px;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .pdlv-qa-title {
    margin-top: 15px;
  }

  .pdlv-qa-accordion {
    width: 100%;
  }

  .pdlv-qa-accordion .accordion-item {
    margin-bottom: 16px;
  }

  .pdlv-qa-accordion .accordion-header {
    padding-bottom: 15px;
  }

  .pdlv-qa-accordion .accordion-title {
    flex: 1;
    padding-right: 10px;
  }

  .pdlv3 {
    right: 10px;
    bottom: 30px;
  }
}