/* Global Variables */ :root { --mainColor: #81BC38; /* AIER Theme Green */ --secondaryColor: #333333; /* Dark Grey */ } /* Force ShareThis Alignment */ #st-1.st-inline-share-buttons.st-animated { text-align: left !important; } /* Global Variables */ :root { --mainColor: #81BC38; /* AIER Theme Green */ --secondaryColor: #333333; /* Dark Grey */ } /* Force ShareThis Alignment */ #st-1.st-inline-share-buttons.st-animated { text-align: left !important; } /* News Detail Share Box Margin */ .news_detial_share_box { margin-top: 15px; } /* Swiper Pagination Bullet Color */ .swiper-pagination-bullet-active { background: var(--mainColor) !important; /* Use theme green */ } /*reset start*/ *{margin: 0;padding: 0;box-sizing: border-box;} body{font-family: 'Roboto', sans-serif;} /*reset end*/ /*navbar start*/ .navbar{width: 100%;height: 5.20833vw;background: #FFFFFF;opacity: 0.8;display: flex;align-items: center;justify-content: center;position: relative;z-index: 1000;box-shadow: 0px 0px 15.9px 1px #00000040;} .navbar-container{width: 75vw;height: 100%;display: flex;align-items: center;justify-content: space-between;} .navbar-logo-wrapper{display: flex;align-items: center;} .navbar-logo{height: 4.6875vw;} .navbar-menu{display: flex;align-items: center;list-style: none;gap: 2.29167vw;} .navbar-menu-item{position: relative;display: flex;flex-direction: column;align-items: center;} .navbar-menu-link{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 0.83333vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;color: #000000;text-decoration: none;transition: color 0.3s;} .navbar-menu-link:hover{color: #81BC38;} .navbar-menu-indicator{position: absolute;bottom: -2.2vw;left: 50%;transform: translateX(-50%);width: calc(100% + 0.52083vw);height: 0.36458vw;background: #81BC38;border-top-left-radius: 0.52083vw;border-top-right-radius: 0.52083vw;opacity: 0;transition: opacity 0.3s;} .navbar-menu-item:hover .navbar-menu-indicator,.navbar-menu-item.active .navbar-menu-indicator{opacity: 1;} .navbar-search-wrapper{position: relative;display: flex;align-items: center;} .navbar-search{height: 0.9375vw;cursor: pointer;transition: opacity 0.3s;} .navbar-search:hover{opacity: 0.7;} .navbar-search-dropdown{position: absolute;right: 0;top: calc(100% + 1.04167vw);background: #FFFFFF;box-shadow: 0 0.26042vw 1.04167vw rgba(0, 0, 0, 0.12);border-radius: 0.3125vw;padding: 0.625vw;min-width: 15.625vw;display: none;z-index: 1000;} .navbar-search-dropdown.active{display: block;} .navbar-search-input{width: 100%;padding: 0.52083vw 0.78125vw;border: 1px solid #E5E5E5;border-radius: 0.20833vw;font-size: 0.9375vw;outline: none;font-family: 'Roboto', sans-serif;} .navbar-search-input:focus{border-color: #81BC38;} .navbar-toggle{display: none;flex-direction: column;justify-content: space-between;width: 25px;height: 18px;cursor: pointer;background: transparent;border: none;padding: 0;} .navbar-toggle span{width: 100%;height: 2px;background-color: #000000;border-radius: 1px;transition: all 0.3s;} .navbar-toggle.active span:nth-child(1){transform: rotate(45deg) translate(5px, 5px);} .navbar-toggle.active span:nth-child(2){opacity: 0;} .navbar-toggle.active span:nth-child(3){transform: rotate(-45deg) translate(6px, -6px);} /*navbar end*/ /*banner start*/ .banner{width: 100%;position: relative;margin-top: -5.20833vw;} .banner-bg{width: 100%;height: 43.75vw;overflow: hidden;position: relative;} .banner-image{width: 100%;height: 100%;object-fit: cover;} .banner-container{width: 75vw;margin: 0 auto;position: absolute;top: 0;left: 50%;transform: translateX(-50%);height: 43.75vw;display: flex;align-items: center;} .banner-content{display: flex;flex-direction: column;} .banner-title{font-family: 'Roboto Serif', serif;font-weight: 500;font-size: 5vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;color: #FFFFFF;margin: 0;} .banner-subtitle-wrapper{display: flex;align-items: center;margin-top: 1.40625vw;} .banner-line{width: 5.72917vw;height: 0.46875vw;background: #FFFFFF;} .banner-subtitle{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 1.66667vw;line-height: 100%;letter-spacing: 0%;text-transform: capitalize;color: #FFFFFF;margin: 0;margin-left: 0.98958vw;} .banner-btn{margin-top: 4.0625vw;padding: 1.04167vw 2.08333vw;background: #81BC38;border: none;border-radius: 1.5625vw;cursor: pointer;display: flex;align-items: center;gap: 0.83333vw;transition: background 0.3s;width: fit-content;} .banner-btn:hover{background: #6fa32e;} .banner-btn span{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 1.04167vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;color: #FFFFFF;} .banner-btn img{height: 0.83333vw;} .banner-cards{width: 75vw;margin: 0 auto;display: flex;gap: 1.04167vw;position: relative;margin-top: -1.66667vw;} .banner-card{flex: 1;height: 8.07292vw;background: #FFFFFF;padding: 0.9375vw;position: relative;box-shadow: 0px 4px 4px 0px #00000040;} .banner-card-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 1.04167vw;line-height: 100%;letter-spacing: 0%;text-align: center;text-transform: uppercase;color: #000000;margin: 0;} .banner-card-desc{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 0.83333vw;line-height: 1.25vw;letter-spacing: 0%;text-align: center;text-transform: capitalize;color: #737373;margin: 0.41667vw 0 0 0;} .banner-card-icon{position: absolute;bottom: 0;right: 0.46875vw;height: 4.16667vw;width: auto;} /*banner end*/ /*product start*/ .product{width: 100%;height: 72.08333vw;background-image: url('../images/product-bg.webp');background-size: cover;background-position: center;background-repeat: no-repeat;padding-top: 9.47917vw;margin-top: -6.40625vw;position: relative;z-index: 1;} .product-container{width: 75vw;margin: 0 auto;} .product-header{display: flex;align-items: center;} .product-title-wrapper{display: flex;align-items: center;} .product-title-icon{height: 1.5625vw;margin-right: 0.15625vw;} .product-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 2.5vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;color: #000000;margin: 0;} .product-tabs{display: flex;align-items: center;gap: 3.59375vw;margin-left: 25.78125vw;} .product-tab{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 0.83333vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;color: #000000;background: transparent;border: none;cursor: pointer;padding: 0;transition: color 0.3s;} .product-tab:hover{color: #81BC38;} .product-line{width: 100%;height: 1px;background: #000000;margin-top: 1.97917vw;position: relative;display: flex;justify-content: space-between;align-items: center;} .product-icon-wrapper{position: absolute;width: 1.875vw;height: 1.875vw;display: flex;align-items: center;justify-content: center;top: 50%;transform: translate(-50%, -50%);transition: all 0.3s;} .product-category-icon{width: 1.875vw;height: 1.875vw;position: absolute;} .product-icon-active{display: none;} .product-icon-default{display: block;} .product-icon-wrapper.active .product-icon-active{display: block;} .product-icon-wrapper.active .product-icon-default{display: none;} .product-cards{display: grid;grid-template-columns: repeat(3, 1fr);gap: 3.125vw 7.8125vw;margin-top: 3.125vw;padding: 0 1.30208vw;} .product-card{background: #FFFFFF;box-shadow: 0px 5px 11px -2px #00000040;display: flex;flex-direction: column;align-items: center;height: 23.07292vw;} .product-card-image{width: 100%;height: 17.08333vw;object-fit: cover;} .product-card-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 0.83333vw;line-height: 100%;letter-spacing: 0%;text-transform: capitalize;color: #000000;margin: 0.57292vw 0 0 0;text-align: center;} .product-card-btn{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 0.83333vw;line-height: 100%;letter-spacing: 0%;text-transform: capitalize;color: #81BC38;background: transparent;border: 1px solid #81BC38;padding: 0.36458vw 1.40625vw;margin-top: 0.88542vw;cursor: pointer;transition: all 0.3s;} .product-card-btn:hover{background: #81BC38;color: #FFFFFF;} /*product end*/ /*about start*/ .about{width: 100%;height: 38.4375vw;background: #FFFFFF;position: relative;overflow: hidden;} .about-bg-text{position: absolute;left: 0;top: 0;bottom: 0;font-family: 'Roboto Slab', serif;font-weight: 400;font-size: 7.8125vw;line-height: 65%;letter-spacing: 0%;text-transform: uppercase;color: #E8E8E8;opacity: 0.5;writing-mode: sideways-lr;display: flex;align-items: center;white-space: nowrap;} .about-container{width: 75vw;margin: 0 auto;height: 100%;display: flex;align-items: center;} .about-content{width: 100%;display: flex;gap: 3.38542vw;} .about-image-wrapper{position: relative;width: 39.74vw;} .about-image{width: 100%;height: auto;display: block;} .about-stats{position: absolute;bottom: 0;left: 28.75vw;width: 46.25vw;height: 6.51042vw;} .about-stats-bg{width: 100%;height: 100%;display: block;} .about-stats-content{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-around;padding: 0 0 0 6vw;} .about-stat-item{display: flex;flex-direction: column;align-items: center;gap: 0.52083vw;} .about-stat-number{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 2.08333vw;line-height: 1.25vw;letter-spacing: 0%;text-transform: lowercase;color: #FFFFFF;} .about-stat-label{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 0.83333vw;line-height: 1.25vw;letter-spacing: 0%;text-align: center;text-transform: lowercase;color: #FFFFFF;} .about-stat-divider{width: 0.05208vw;height: 4.89583vw;border-right: 1px solid #FFFFFF;} .about-text{flex: 1;display: flex;flex-direction: column;} .about-title-wrapper{display: flex;align-items: center;gap: 0.15625vw;} .about-title-icon{height: 1.5625vw;} .about-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 2.5vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;color: #000000;margin: 0;} .about-subtitle{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 1.25vw;line-height: 1.25vw;letter-spacing: 0%;text-transform: capitalize;color: #81BC38;margin: 0.41667vw 0 0 0;} .about-desc{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 0.83333vw;line-height: 1.25vw;letter-spacing: 0%;text-transform: lowercase;color: #4D4D4D;margin: 0.41667vw 0 0 0;} .about-btn{margin-top: 2.34375vw;padding: 0.625vw 1.51042vw;background: #81BC38;border: none;border-radius: 1.5625vw;cursor: pointer;display: flex;align-items: center;gap: 0.52083vw;transition: background 0.3s;width: fit-content;} .about-btn:hover{background: #6fa32e;} .about-btn span{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 1.25vw;line-height: 100%;letter-spacing: 0%;text-transform: capitalize;color: #FFFFFF;} .about-btn-arrow{height: 0.83333vw;} /*about end*/ /*applications start*/ .applications{width: 100%;height: 31.875vw;background-image: url('../images/applications-bg.webp');background-size: cover;background-position: center;background-repeat: no-repeat;position: relative;} .applications-container{width: 75vw;margin: 0 auto;height: 100%;display: flex;flex-direction: column;justify-content: center;} .applications-title-wrapper{display: flex;align-items: center;gap: 0.15625vw;} .applications-title-icon{height: 1.5625vw;} .applications-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 2.5vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;color: #000000;margin: 0;} .applications-carousel-wrapper{margin-top: 1.92708vw;overflow: hidden;width: calc(100vw - 12.5vw);} .applications-carousel{display: flex;gap: 1.97917vw;transition: transform 0.5s ease;width: fit-content;} .application-card{width: 23.4375vw;height: 16.77083vw;position: relative;flex-shrink: 0;overflow: hidden;cursor: pointer;} .application-card-image{width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s;} .application-card-overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #00000080;display: flex;flex-direction: column;align-items: center;justify-content: center;opacity: 0;transition: opacity 0.3s;} .application-card:hover .application-card-overlay{opacity: 1;} .application-card:hover .application-card-image{transform: scale(1.05);} .application-card-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 1.25vw;line-height: 100%;letter-spacing: 0%;text-transform: capitalize;color: #FFFFFF;margin: 0;} .application-card-btn{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 0.83333vw;line-height: 100%;letter-spacing: 0%;text-transform: capitalize;color: #81BC38;background: transparent;border: 1px solid #81BC38;border-radius: 0.83333vw;padding: 0.36458vw 1.40625vw;margin-top: 1.19792vw;cursor: pointer;transition: all 0.3s;} .application-card-btn:hover{background: #81BC38;color: #FFFFFF;} .applications-controls{position: relative;margin-top: 3.95833vw;display: flex;align-items: center;} .applications-line{width: 63.88542vw;height: 1px;background: #000000;position: relative;} .applications-indicator{width: 2.70833vw;height: 2.70833vw;position: absolute;left: 0;top: 50%;transform: translate(-50%, -50%);transition: left 0.5s ease;cursor: pointer;} .applications-btn{background: #FFFFFF;border: 1px solid #000000;height: 1.97917vw;cursor: pointer;display: flex;align-items: center;gap: 0;transition: all 0.3s;margin-left: auto;position: relative;z-index: 2;padding: 0;overflow: hidden;} .applications-btn:hover{background: #81BC38;border-color: #81BC38;} .applications-btn:hover span{color: #FFFFFF;} .applications-btn span{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 0.83333vw;line-height: 100%;letter-spacing: 0%;text-transform: capitalize;color: #000000;transition: color 0.3s;padding: 0 0.8vw;} .applications-btn-arrow-wrapper{width: 1.97917vw;height: 1.97917vw;background: #81BC38;display: flex;align-items: center;justify-content: center;flex-shrink: 0;} .applications-btn-arrow{height: 0.83333vw;transition: filter 0.3s;} .applications-btn:hover .applications-btn-arrow{filter: brightness(0) invert(1);} .project-cases{width: 100%;height: 43.07292vw;background: #FFFFFF;position: relative;display: flex;align-items: center;} .project-cases-container{width: 75vw;margin: 0 auto;height: 100%;display: flex;flex-direction: column;justify-content: center;} .project-cases-title-wrapper{display: flex;align-items: center;gap: 0.15625vw;justify-content: center;} .project-cases-title-icon{height: 1.5625vw;} .project-cases-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 2.5vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;color: #000000;margin: 0;} .project-cases-carousel-wrapper{margin-top: 3.48958vw;overflow: hidden;width: 100vw;margin-left: calc(-12.5vw);height: 25.10417vw;} .project-cases-carousel{display: flex;gap: 1.82292vw;transition: transform 0.5s ease;width: fit-content;align-items: flex-start;} .project-case-card{flex-shrink: 0;cursor: pointer;display: flex;flex-direction: column;width: 19.01042vw;height: 20.72917vw;transition: all 0.5s ease;} .project-case-card.center{width: 27.1875vw;height: 25.10417vw;} .project-case-card .project-case-image{height: 16.66667vw;width: 100%;object-fit: cover;transition: height 0.5s ease;} .project-case-card.center .project-case-image{height: 20.72917vw;} .project-case-card .project-case-label{margin-top: 0.3125vw;} .project-case-card.center .project-case-label{margin-top: 0.625vw;} .project-case-image{display: block;} .project-case-label{width: 100%;height: 3.75vw;background: #81BC38;display: flex;align-items: center;justify-content: center;flex-shrink: 0;} .project-case-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 1.25vw;line-height: 100%;letter-spacing: 0%;text-transform: capitalize;color: #FFFFFF;margin: 0;} .project-cases-dots{display: flex;align-items: center;justify-content: center;gap: 0.52083vw;margin-top: 3.80208vw;} .project-dot{cursor: pointer;transition: all 0.3s;} .project-dot.active{width: 1.25vw;height: 1.25vw;} .project-dot:not(.active){width: 0.72917vw;height: 0.72917vw;} /*applications end*/ /*certificate start*/ .certificate{width: 100%;height: 42.70833vw;background-image: url(../images/certificate-bg.webp);background-size: cover;background-position: center;display: flex;align-items: flex-start;padding-top: 1.45833vw;} .certificate-container{width: 75vw;margin: 0 auto;} .certificate-title-wrapper{display: flex;align-items: center;gap: 0.15625vw;justify-content: center;} .certificate-title-icon{height: 1.5625vw;} .certificate-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 2.5vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;color: #000000;margin: 0;} .certificate-subtitle{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 1.04167vw;line-height: 150%;color: #333333;text-align: center;margin: 0.83333vw 0 0 0;} /*certificate end*/ /*news start*/ .news{width: 100%;min-height: 53.95833vw;background-image: url(../images/news-bg.webp);background-size: cover;background-position: center;padding: 5.20833vw 0;} .news-container{width: 75vw;margin: 0 auto;} .news-title-wrapper{display: flex;align-items: center;gap: 0.15625vw;justify-content: center;} .news-title-icon{height: 1.5625vw;} .news-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 2.5vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;color: #000000;margin: 0;} .news-subtitle{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 1.04167vw;line-height: 150%;color: #333333;text-align: center;margin: 0.83333vw 0 2.08333vw 0;} .news-content{display: flex;gap: 1.5625vw;align-items: stretch;} .news-featured{flex: 1;position: relative;overflow: hidden;box-shadow: 0 0.20833vw 1.04167vw rgba(0, 0, 0, 0.1);display: flex;flex-direction: column;} .news-featured-image{width: 100%;height: 100%;object-fit: cover;display: block;} .news-featured-content{position: absolute;bottom: 0;left: 0;right: 0;background: #81BC38;padding: 0.5625vw 1.5625vw;} .news-featured-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 28px;line-height: 32px;color: #ffffff;margin: 0 0 1.04167vw 0;text-transform: capitalize;} .news-featured-button{display: inline-block;background-color: #ffffff;border-radius: 1.5625vw;padding: 0.52083vw 1.5625vw;font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 16px;line-height: 24px;color: #333333;text-decoration: none;transition: all 0.3s;text-transform: capitalize;} .news-featured-button:hover{background-color: #f0f0f0;transform: translateY(-1px);} .news-list{flex: 1;display: flex;flex-direction: column;gap: 1.5625vw;justify-content: space-between;} .news-card{background-color: #ffffff;padding: 1.5625vw;box-shadow: 0px 6px 10.9px -2px #00000040;transition: all 0.3s;} .news-card:hover{box-shadow: 0px 6px 10.9px -2px #00000040;transform: translateY(-2px);} .news-card-date{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 16px;line-height: 32px;color: #666666;margin: 0 0 0.52083vw 0;text-transform: capitalize;} .news-card-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 28px;line-height: 32px;color: #333333;margin: 0 0 0.52083vw 0;text-transform: capitalize;} .news-card-description{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 16px;line-height: 24px;color: #666666;margin: 0 0 1.04167vw 0;text-transform: capitalize;} .news-card-button{display: inline-block;background-color: #92c353;border-radius: 1.5625vw;padding: 0.52083vw 1.5625vw;font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 16px;line-height: 24px;color: #ffffff;text-decoration: none;transition: all 0.3s;text-transform: capitalize;} .news-card-button:hover{background-color: #82b343;transform: translateY(-1px);} .news-card-small{display: flex;align-items: center;justify-content: space-between;background-color: #ffffff;padding: 1.5625vw;box-shadow: 0px 6px 10.9px -2px #00000040;transition: all 0.3s;} .news-card-small:hover{box-shadow: 0px 6px 10.9px -2px #00000040;transform: translateY(-2px);} .news-card-small-content{flex: 1;padding-right: 1.04167vw;min-width: 0;} .news-card-small-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 28px;line-height: 32px;color: #333333;margin: 0 0 0.52083vw 0;text-transform: capitalize;} .news-card-small-description{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 16px;line-height: 24px;color: #666666;margin: 0;text-transform: capitalize;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .news-card-small-arrow{display: flex;align-items: center;justify-content: center;width: 2.60417vw;height: 2.60417vw;background-color: #92c353;border-radius: 50%;transition: all 0.3s;flex-shrink: 0;} .news-card-small-arrow:hover{background-color: #82b343;transform: scale(1.05);} .news-card-small-arrow img{width: 1.04167vw;} .news-card-small-button{display: inline-flex;align-items: center;justify-content: center;background-color: #92c353;border-radius: 0.5625vw;padding: 1vw;text-decoration: none;transition: all 0.3s;} .news-card-small-button svg{width: 1.77vw;height: auto;} .news-card-small-button:hover{background-color: #82b343;transform: translateY(-1px);} /*news end*/ /*partners start*/ .partners{width: 100%;height: 27.03125vw;background-image: url(../images/partners-bg.webp);background-size: cover;background-position: center;padding-top: 5.20833vw;margin-bottom: 10vw;} .partners-container{width: 75vw;margin: 0 auto;} .partners-title-wrapper{display: flex;align-items: center;gap: 0.15625vw;justify-content: center;} .partners-title-icon{height: 1.5625vw;} .partners-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 2.5vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;color: #000000;margin: 0;} .partners-carousel-wrapper{position: relative;margin-top: 2.08333vw;} .partners-arrow{position: absolute;top: 50%;transform: translateY(-50%);background: none;border: none;cursor: pointer;padding: 0;z-index: 10;} .partners-arrow.prev{left: -3.125vw;} .partners-arrow.next{right: -3.125vw;} .partners-arrow img{height: 1.97917vw; /* 38px */ width: auto;} .partners-carousel-container{width: 100%; overflow: hidden;} .partners-carousel{display: flex;} .partners-slide{flex-shrink: 0;width: 100%;} .partners-grid{display: grid;grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(2, 1fr);gap: 1.5625vw;align-items: center;justify-items: center;width: 100%;flex-shrink: 0;} .partners-grid img{max-width: 80%;max-height: 3.125vw;object-fit: contain;} /*partners end*/ /*contact start*/ .contact{position: relative;background-color: #f8f8f8;padding: 6.25vw 0;} .contact-bg{position: absolute;top: 0;left: 0;width: 100%;height: 495px;background-image: url('../images/contact-bg-main.webp');background-size: cover;background-position: center;} .contact-container{position: relative;z-index: 1;width: 75vw;margin: 0 auto;} .contact-cards{display: flex;gap: 2.08vw;margin-top: -20.2vw;} .contact-card{background-color: #fff;border-radius: 0;box-shadow: 5px -5px 7.3px -2px #00000040;flex: 1;padding: 2.08vw;height: 40.88542vw;} .contact-card-info .contact-info-title{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 2.08333vw;line-height: 2.39583vw;letter-spacing: 0%;text-transform: capitalize;color: #000000;margin: 0 0 0.83333vw 0;} .contact-card-info .contact-info-desc{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 1.04167vw;line-height: 1.25vw;letter-spacing: 0%;text-transform: capitalize;color: #fff;background-color: #95c11f;padding: 0.78vw 2.08vw;border-radius: 0;margin: 0 -2.08vw;} .contact-info-list{list-style: none;padding: 0;} .contact-info-list li{display: flex;align-items: flex-start;margin-bottom: 0;border-bottom: 1px solid #eee;padding: 3.125vw 0;} .contact-info-list li:last-child{border-bottom: none;margin-bottom: 0;padding-bottom: 0;} .contact-info-icon{background-color: #95c11f;border-radius: 50%;width: 2.6vw;height: 2.6vw;display: flex;justify-content: center;align-items: center;margin-right: 1.04vw;flex-shrink: 0;} .contact-info-icon img{height: 1.25vw;} .contact-info-text{display: flex;flex-direction: column;} .contact-info-text strong{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 1.25vw;line-height: 1.25vw;letter-spacing: 0%;text-transform: capitalize;color: #000000;margin-bottom: 0.52083vw;} .contact-info-text span, .contact-info-text a{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 0.83333vw;line-height: 1.25vw;letter-spacing: 0%;text-transform: capitalize;color: #737373;text-decoration: none;transition: color 0.3s;} .contact-info-text a:hover{color: #81BC38;} .contact-card-form{background-image: url('../images/contact-bg-form.webp');background-size: cover;background-position: center;color: #fff;} .contact-form-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 2.5vw;line-height: 100%;letter-spacing: 0%;text-transform: uppercase;text-align: center;margin-bottom: 1.56vw;margin: 0 0 1.56vw 0;} .contact-form-title::after{content: '';display: block;width: 5.3125vw;height: 0.46875vw;background-color: #fff;margin: 0.52vw auto 0;} .form-group{margin-bottom: 3.54167vw;} .form-group input, .form-group textarea{width: 100%;background: transparent;border: none;border-bottom: 1px solid rgba(255,255,255,0.5);padding: 0.52vw 0;color: #fff;font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 1.25vw;line-height: 100%;} .form-group input:focus, .form-group textarea:focus{outline: none;border-bottom-color: rgba(255,255,255,0.8);} .form-group input::placeholder, .form-group textarea::placeholder{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 1.25vw;line-height: 100%;letter-spacing: 0%;text-transform: capitalize;color: rgba(255,255,255,0.8);} .form-group textarea{resize: vertical;min-height: 4.16vw;} /*contact end*/ /*footer start*/ .footer{background-color: #fff;color: #666;} .footer-main{min-height: 27.91667vw; box-sizing: border-box; display: flex; align-items: center;} .footer-container{width: 75vw;margin: 0 auto;padding: 0;} .footer-main .footer-container{display: grid;grid-template-columns: 2fr 1fr 1fr;gap: 2.08vw;} .footer-col-about{padding-right: 5vw;} .footer-logo{height: 4.6875vw;margin-bottom: 1.04vw;} .footer-about-text{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 0.83333vw;line-height: 1.25vw;letter-spacing: 0%;text-transform: capitalize;color: #4D4D4D;} .footer-subscribe-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 2.08333vw;line-height: 1.25vw;text-transform: uppercase;color: #000;margin-top: 2.65625vw;margin-bottom: 1.51042vw;} .footer-subscribe-form{display: flex;border: 1px solid #ccc;overflow: hidden;} .footer-subscribe-form input{flex-grow: 1;border: none;padding: 1.14583vw 1.66667vw;font-size: 1.25vw;} .footer-subscribe-form input:focus{outline: none; border: none;} .footer-subscribe-form input::placeholder{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 1.25vw;line-height: 1.25vw;text-transform: capitalize;color: #737373;} .footer-subscribe-form button{background: transparent;border: none;padding: 0 1.66667vw;cursor: pointer;} .footer-subscribe-form button img{transition: transform 0.3s ease;} .footer-subscribe-form:hover button img{transform: translateX(5px);} .footer-title{font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 2.08333vw;line-height: 1.25vw;text-transform: uppercase;color: #000;margin-bottom: 3.38542vw;} .footer-links, .footer-contact-list{list-style: none;padding: 0;} .footer-links li{margin-bottom: 1.25vw;} .footer-links a{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 0.83333vw;line-height: 1.25vw;text-transform: capitalize;color: #737373;text-decoration: none;display: flex;align-items: center;gap: 1.14583vw;} .footer-links a img{height: 0.72917vw; transition: transform 0.3s ease;} .footer-links a:hover{color: #81BC38;} .footer-links a:hover img{transform: translateX(5px);} .footer-contact-list li{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 0.83333vw;line-height: 100%;letter-spacing: 2%;color: #737373;display: flex;align-items: center;gap: 1.14583vw;margin-bottom: 1.25vw;} .footer-contact-list li a{color: inherit; text-decoration: none; transition: color 0.3s ease;} .footer-contact-list li a:hover{color: #81BC38;} .footer-contact-list li img{height: 0.83333vw;} .footer-bottom{background-color: #f0f0f0;padding: 1.04vw 0;} .footer-bottom .footer-container{display: flex;justify-content: space-between;align-items: center;} .footer-socials{display: flex;gap: 0.78vw;} .footer-socials a img{height: 2.29167vw; transition: transform 0.3s ease, filter 0.3s ease;} .footer-socials a:hover img{transform: scale(1.1); filter: brightness(0) saturate(100%) invert(69%) sepia(34%) saturate(823%) hue-rotate(40deg) brightness(94%) contrast(88%);} .footer-copyright{font-family: 'Roboto', sans-serif;font-weight: 400;font-size: 0.83333vw;line-height: 100%;letter-spacing: 2%;text-transform: uppercase;color: #737373;} /*footer end*/ /*mobile start*/ @media screen and (max-width: 768px){ .navbar{height: 60px;position: fixed;top: 0;left: 0;z-index: 1000;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);} .navbar-container{width: 100%;padding: 0 20px;} .navbar-logo{height: 30px;} .navbar-toggle{display: flex;order: -1;margin-right: 15px;} .navbar-menu{position: fixed;top: 60px;left: -100%;width: 280px;height: calc(100vh - 60px);background-color: #FFFFFF;flex-direction: column;align-items: flex-start;gap: 0;padding: 30px 25px;box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);transition: left 0.3s ease;overflow-y: auto;} .navbar-menu.active{left: 0;} .navbar-menu-item{width: 100%;border-bottom: 1px solid #f0f0f0;flex-direction: column;align-items: flex-start;} .navbar-menu-item:last-child{border-bottom: none;} .navbar-menu-link{width: 100%;padding: 15px 0;font-size: 16px;} .navbar-menu-indicator{display: none;} .navbar-search-wrapper{position: relative;} .navbar-search{height: 22px;} .navbar-search-dropdown{position: fixed;left: 0;right: 0;top: 60px;width: 100%;min-width: 0;padding: 12px 20px;border-radius: 0;background: #FFFFFF;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);border-bottom: 1px solid #f0f0f0;display: none;z-index: 10000;} .navbar-search-dropdown.active{display: block;} .navbar-search-input{width: 100%;height: 42px;padding: 0 12px;font-size: 16px;border-radius: 6px;border: 1px solid #E5E5E5;} .banner{margin-top: -60px;} .banner-bg{height: 400px;} .banner-container{width: 100%;padding: 0 20px;height: 485px;} .banner-title{font-size: 36px;line-height: 110%;} .banner-subtitle-wrapper{margin-top: 20px;flex-direction: column;align-items: flex-start;gap: 12px;} .banner-line{width: 60px;height: 4px;} .banner-subtitle{font-size: 18px;margin-left: 0;} .banner-btn{margin-top: 30px;padding: 12px 24px;gap: 10px;} .banner-btn span{font-size: 16px;} .banner-btn img{height: 14px;} .banner-cards{width: 100%;padding: 0 20px;flex-direction: column;gap: 15px;margin-top: -30px;} .banner-card{height: auto;min-height: 120px;padding: 16px;} .banner-card-title{font-size: 20px;} .banner-card-desc{font-size: 16px;line-height: 24px;margin-top: 8px;} .banner-card-icon{height: 60px;} .product{height: auto;padding: 60px 0 60px;margin-top: 0px;} .product-container{width: 100%;padding: 0 20px;} .product-header{flex-direction: column;align-items: flex-start;gap: 20px;} .product-title-icon{height: 20px;margin-right: 6px;} .product-title{font-size: 28px;} .product-tabs{width: 100%;flex-direction: row;align-items: center;gap: 10px;margin-left: 0;flex-wrap: wrap;} .product-tab{font-size: 13px;padding: 10px 20px;width: auto;background: #F5F5F5;border-radius: 20px;transition: all 0.3s;} .product-tab.active{background: #81BC38;color: #FFFFFF;} .product-line{margin-top: 20px;display: none;} .product-icon-wrapper{display: none;} .product-cards{grid-template-columns: 1fr;gap: 25px;margin-top: 30px;padding: 0;} .product-card{height: auto;padding-bottom: 20px;} .product-card-image{height: auto;width: 100%;aspect-ratio: 1.1/1;object-fit: cover;} .product-card-title{font-size: 18px;margin: 15px 0 0 0;padding: 0 15px;} .product-card-btn{font-size: 14px;padding: 10px 24px;margin-top: 15px;border-radius: 20px;} .about{height: auto;padding: 50px 0;} .about-bg-text{display: none;} .about-container{width: 100%;padding: 0 20px;} .about-content{flex-direction: column;gap: 30px;} .about-image-wrapper{width: 100%;} .about-stats{position: static;width: 100%;height: auto;margin-top: 20px;} .about-stats-bg{display: none;} .about-stats-content{position: static;background: #81BC38;padding: 20px 15px;border-radius: 10px;flex-direction: row;gap: 10px;justify-content: space-between;} .about-stat-item{gap: 8px;flex: 1;text-align: center;} .about-stat-number{font-size: 28px;line-height: 1;} .about-stat-label{font-size: 13px;line-height: 1.4;} .about-stat-divider{display: block;width: 1px;height: 60px;background: #FFFFFF;align-self: center;} .about-text{width: 100%;} .about-title-icon{height: 20px;} .about-title{font-size: 28px;} .about-subtitle{font-size: 18px;line-height: 1.4;margin-top: 8px;} .about-desc{font-size: 14px;line-height: 1.6;margin-top: 12px;} .about-btn{margin-top: 25px;padding: 12px 24px;} .about-btn span{font-size: 16px;} .about-btn-arrow{height: 14px;} .applications{height: auto;padding: 50px 0;background-size: cover;background-position: center;} .applications-container{width: 100%;padding: 0 20px;} .applications-title-icon{height: 20px;} .applications-title{font-size: 28px;} .applications-carousel-wrapper{margin-top: 25px;margin-left: -20px;width: calc(100% + 20px);overflow-x: scroll;overflow-y: hidden;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none;cursor: grab;} .applications-carousel-wrapper::-webkit-scrollbar{display: none;} .applications-carousel-wrapper:active{cursor: grabbing;} .applications-carousel{gap: 15px;padding: 0 20px 15px 20px;} .application-card{width: 75vw;height: 50vw;max-width: 320px;max-height: 220px;min-width: 260px;min-height: 180px;} .application-card-overlay{background: #00000080;} .application-card-title{font-size: 20px;} .application-card-btn{font-size: 14px;padding: 10px 24px;margin-top: 15px;border-radius: 16px;} .applications-controls{margin-top: 30px;flex-direction: column;gap: 0;align-items: center;} .applications-line{display: none;} .applications-indicator{display: none;} .applications-btn{margin-left: 0;height: 38px;border-radius: 0;} .applications-btn span{font-size: 14px;padding: 0 16px;} .applications-btn-arrow-wrapper{width: 38px;height: 38px;} .applications-btn-arrow{height: 12px;} .project-cases{height: auto;padding: 60px 0;} .project-cases-container{width: 100%;padding: 0 20px;overflow: hidden;} .project-cases-title-icon{height: 20px;} .project-cases-title{font-size: 28px;} .project-cases-carousel-wrapper{margin-top: 30px;margin-left: -20px;width: calc(100% + 20px);height: auto;overflow-x: scroll;overflow-y: hidden;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none;cursor: grab;} .project-cases-carousel-wrapper::-webkit-scrollbar{display: none;} .partners{height: auto;padding: 60px 0;} .partners-container{width: 100%;padding: 0 20px;} .partners-title-icon{height: 20px;} .partners-title{font-size: 28px;} .partners-carousel-wrapper{margin-top: 30px;} .partners-arrow{display: block;} .partners-arrow.prev{left: 0;} .partners-arrow.next{right: 0;} .partners-arrow img{height: 24px;} .partners-carousel-container{overflow: hidden;} .partners-grid{display: flex;} .partners-grid img{max-height: 35px;flex-shrink: 0;width: 100%;object-fit: contain;} .project-cases-carousel-wrapper:active{cursor: grabbing;} .project-cases-carousel{gap: 15px;padding: 0 20px 15px 20px;align-items: flex-start;} .project-case-card{width: 70vw;max-width: 300px;min-width: 240px;height: auto;} .news{height: auto;padding: 60px 0;} .news-container{width: 100%;padding: 0 20px;} .news-title-icon{height: 20px;} .news-title{font-size: 28px;} .news-subtitle{font-size: 14px;line-height: 1.5;margin-top: 12px;} .news-content{flex-direction: column;margin-top: 30px;gap: 20px;} .news-featured-content{padding: 20px;} .news-featured-title{font-size: 18px;margin-bottom: 15px;} .news-featured-button{font-size: 14px;padding: 8px 20px;border-radius: 20px;} .news-list{gap: 20px;} .news-card{padding: 20px;} .news-card-date{font-size: 12px;} .news-card-title{font-size: 16px;} .news-card-small-button { padding: 10px 15px; border-radius: 6px; } .news-card-small-button svg { width: 28px; } .news-card-description{font-size: 14px;} .news-card-button{font-size: 14px;padding: 8px 20px;border-radius: 20px;} .news-card-small{padding: 20px;} .news-card-small-title{font-size: 16px;} .news-card-small-description{font-size: 14px;} /* Footer mobile */ .footer-main { min-height: auto; padding: 40px 0; } .footer-main .footer-container { grid-template-columns: 1fr; gap: 40px; } .footer-col { text-align: center; } .footer-col-about { padding-right: 0; } .footer-logo { height: 60px; margin: 0 auto 20px; display: block; } .footer-about-text { font-size: 14px; line-height: 22px; } .footer-subscribe-title { font-size: 24px; line-height: 1.2; margin-top: 30px; margin-bottom: 20px; } .footer-subscribe-form { max-width: 350px; margin: 0 auto; } .footer-subscribe-form input { padding: 12px 15px; font-size: 16px; } .footer-subscribe-form input::placeholder { font-size: 16px; } .footer-title { font-size: 24px; margin-bottom: 25px; } .footer-links, .footer-contact-list { display: flex; flex-direction: column; align-items: center; } .footer-links li, .footer-contact-list li { margin-bottom: 15px; font-size: 14px; gap: 10px; } .footer-links a, .footer-contact-list li { font-size: 14px; gap: 10px; } .footer-links a img { height: 12px; } .footer-contact-list li img { height: 14px; } .footer-bottom { padding: 25px 0; } .footer-bottom .footer-container { flex-direction: column; gap: 20px; } .footer-socials { gap: 15px; } .footer-socials a img { height: 30px; } .footer-copyright { font-size: 12px; line-height: 1.5; text-align: center; } .news-card-small-arrow{width: 40px;height: 40px;} .news-card-small-arrow img{width: 16px;} .project-case-card .project-case-image{height: 200px;} .project-case-card.center{width: 70vw;max-width: 300px;} .project-case-card.center .project-case-image{height: 200px;} .project-case-card .project-case-label{margin-top: 10px;} .project-case-card.center .project-case-label{margin-top: 10px;} .project-case-label{height: 50px;} .certificate{height: 50vw;padding: 0;background-size: cover;background-position: center;} .certificate-title-wrapper, .certificate-subtitle{ display: none; } .project-case-title{font-size: 18px;} .project-cases-dots{margin-top: 30px;gap: 8px;} .project-dot.active{width: 20px;height: 20px;} .project-dot:not(.active){width: 12px;height: 12px;} .contact{padding: 60px 0;} .contact-bg{height: 200px;} .contact-cards{flex-direction: column;margin-top: -150px;} .contact-card{padding: 30px;height: auto;} /* Contact Section */ .contact { position: relative; background-color: #f8f8f8; padding: 120px 0; } .contact-bg { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-image: none; background-size: cover; background-position: center; } .contact-container { position: relative; z-index: 1; width: 90%; margin: 0 auto; padding: 0; } .contact-cards { display: flex; gap: 40px; margin-top: -100px; } .contact-card { background-color: #fff; border-radius: 0; box-shadow: 5px -5px 7.3px -2px #00000040; flex: 1; padding: 40px; height: auto; } .contact-card-info .contact-info-title { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 24px; line-height: 28px; letter-spacing: 0%; text-transform: capitalize; color: #000000; margin: 0; } .contact-card-info .contact-info-desc { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0%; text-transform: capitalize; color: #fff; background-color: #95c11f; padding: 15px; border-radius: 5px; margin: 20px 0; } .contact-info-list { list-style: none; padding: 0; } .contact-info-list li { display: flex; align-items: flex-start; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 25px; } .contact-info-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .contact-info-icon { background-color: #95c11f; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin-right: 20px; flex-shrink: 0; } .contact-info-icon img { height: 24px; } .contact-info-text { display: flex; flex-direction: column; } .contact-info-text strong { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: 0%; text-transform: capitalize; color: #000000; margin-bottom: 8px; } .contact-info-text span, .contact-info-text a { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0%; text-transform: capitalize; color: #737373; text-decoration: none; } .contact-card-form { background-image: url('../images/contact-bg-form.webp'); background-size: cover; background-position: center; color: #fff; } .contact-form-title { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 28px; line-height: 100%; letter-spacing: 0%; text-transform: uppercase; text-align: center; margin: 0 0 30px 0; } .contact-form-title::after { content: ''; display: block; width: 50px; height: 3px; background-color: #fff; margin: 10px auto 0; } .form-group { margin-bottom: 20px; } .form-group input, .form-group textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.5); padding: 10px 0; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 16px; line-height: 100%; } .form-group input::placeholder, .form-group textarea::placeholder { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 16px; line-height: 100%; letter-spacing: 0%; text-transform: capitalize; color: rgba(255,255,255,0.8); } .form-group textarea { resize: vertical; min-height: 80px; } .btn-submit { background-color: #95c11f; color: #fff; border: none; padding: 15px 40px; font-size: 16px; font-weight: 700; border-radius: 5px; cursor: pointer; display: block; margin: 0 auto; } } /*mobile end*/ /* About Us Page Specific Styles */ .inner-banner {position: relative; height: 36.458vw; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; background-image: url('../images/about-us-banner.webp'); background-size: cover; background-position: center; margin-top: -5.20833vw;} .inner-banner::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1;} .inner-banner-content {position: relative; z-index: 2;} .inner-banner-content h1 {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 3.333vw; line-height: 100%; letter-spacing: 0%; text-transform: uppercase; margin: 0;} .inner-banner-content p {font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 1.25vw; line-height: 1.25vw; letter-spacing: 0%; text-transform: capitalize; margin-top: 0.52vw;} .inner-banner-content p a {color: #fff; text-decoration: none; transition: color 0.3s ease;} .inner-banner-content p a:hover {color: #81BC38;} .about-page-section.about {padding-top: 6.25vw; height: auto;} .about-page-section .about-btn {display: none;} .about-page-section .about-desc {text-transform: none;} .about-applications {padding: 6.25vw 0; background-color: #f8f8f8;} .about-applications-container {width: 75vw; margin: 0 auto;} .about-applications-title-wrapper {display: flex; align-items: center; justify-content: center; margin-bottom: 3.125vw;} .about-applications-title-icon {height: 1.5625vw; margin-right: 0.15625vw;} .about-applications-title {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 2.5vw; line-height: 100%; text-transform: uppercase; color: #000000; margin: 0;} .about-applications-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5625vw;} .about-application-card {background-color: #fff; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); overflow: hidden; transition: box-shadow 0.3s ease;} .about-application-card:hover {box-shadow: 0 8px 20px rgba(0,0,0,0.1);} .about-application-card img {width: 100%; height: auto; display: block; transition: transform 0.3s ease;} .about-application-card:hover img {transform: scale(1.05);} .about-application-card h3 {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 0.9375vw; padding: 1.04vw; margin: 0; color: #333;} .about-project-cases {width: 100%; height: 43.07292vw; background: #FFFFFF; position: relative; display: flex; align-items: center;} .about-project-cases-container {width: 75vw; margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: center;} .about-project-cases-title-wrapper {display: flex; align-items: center; gap: 0.15625vw; justify-content: center;} .about-project-cases-title-icon {height: 1.5625vw;} .about-project-cases-title {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 2.5vw; line-height: 100%; letter-spacing: 0%; text-transform: uppercase; color: #000000; margin: 0;} .about-project-cases-carousel-wrapper {margin-top: 3.48958vw; overflow: hidden; width: 100vw; margin-left: calc(-12.5vw); height: 25.10417vw;} .about-project-cases-carousel {display: flex; gap: 1.82292vw; transition: transform 0.5s ease; width: fit-content; align-items: flex-start;} .about-project-case-card {flex-shrink: 0; cursor: pointer; display: flex; flex-direction: column; width: 19.01042vw; height: 20.72917vw; transition: all 0.5s ease;} .about-project-case-card.center {width: 27.1875vw; height: 25.10417vw;} .about-project-case-card .about-project-case-image {height: 16.66667vw; width: 100%; object-fit: cover; transition: height 0.5s ease;} .about-project-case-card.center .about-project-case-image {height: 20.72917vw;} .about-project-case-card .about-project-case-label {margin-top: 0.3125vw;} .about-project-case-card.center .about-project-case-label {margin-top: 0.625vw;} .about-project-case-image {display: block;} .about-project-case-label {width: 100%; height: 3.75vw; background: #81BC38; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} .about-project-case-title {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.25vw; line-height: 100%; letter-spacing: 0%; text-transform: capitalize; color: #FFFFFF; margin: 0;} .about-project-cases-dots {display: flex; align-items: center; justify-content: center; gap: 0.52083vw; margin-top: 3.80208vw;} .about-project-cases-dots .project-dot {cursor: pointer; transition: all 0.3s;} .about-certificate {padding: 6.25vw 0; height: 31.40625vw; background-image: url('../images/about-us-certification-bg.webp'); background-size: cover; background-position: center;} .about-certificate-container {width: 75vw; margin: 0 auto;} .about-certificate-title-wrapper {display: flex; align-items: center; justify-content: center; margin-bottom: 3.125vw;} .about-certificate-title-icon {height: 1.5625vw; margin-right: 0.15625vw;} .about-certificate-title {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 2.5vw; line-height: 100%; text-transform: uppercase; color: #000000; margin: 0;} .about-certificate-carousel-wrapper {position: relative; overflow: hidden;} .about-certificate-carousel {display: flex; gap: 1.5625vw;} .about-certificate-card {flex-shrink: 0; width: 13.75vw;} .about-certificate-card img {width: 100%; height: 18.4375vw; object-fit: cover; display: block; box-shadow: 0 4px 15px rgba(0,0,0,0.1);} .about-certificate-dots {display: flex; justify-content: center; align-items: center; gap: 0.52vw; margin-top: 2.08vw;} .about-certificate-dots .dot {width: 0.729vw; height: 0.729vw; background-color: #D9D9D9; border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease;} .about-certificate-dots .dot.active {background-color: #81BC38;} @media (max-width: 768px) { .inner-banner {height: 250px; margin-top: -60px;} .inner-banner-content {position: relative; top: 20%;} .inner-banner-content h1 {font-size: 32px;} .inner-banner-content p {font-size: 16px; line-height: 1.5;} .about-page-section.about {padding-top: 60px;} .about-applications {padding: 60px 0;} .about-applications-container {width: 100%; padding: 0 20px;} .about-applications-title-icon {height: 20px;} .about-applications-title {font-size: 28px;} .about-applications-grid {grid-template-columns: repeat(2, 1fr); gap: 15px;} .about-application-card h3 {font-size: 14px; padding: 10px;} .about-project-cases {height: auto; padding: 60px 0;} .about-project-cases-container {width: 100%; padding: 0; overflow: hidden;} .about-project-cases-title-icon {height: 20px;} .about-project-cases-title {font-size: 28px;} .about-project-cases-carousel-wrapper {margin-top: 30px; margin-left: -20px; width: calc(100% + 40px); height: auto; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; cursor: grab;} .about-project-cases-carousel-wrapper::-webkit-scrollbar {display: none;} .about-project-cases-carousel-wrapper:active {cursor: grabbing;} .about-project-cases-carousel {gap: 15px; padding: 0 20px 15px 20px; align-items: flex-start;} .about-project-case-card, .about-project-case-card.center {width: 70vw; max-width: 300px; min-width: 240px; height: auto;}.about-project-case-card .about-project-case-image, .about-project-case-card.center .about-project-case-image {height: 180px; object-fit: cover;} .about-project-case-title {font-size: 18px;}.about-project-case-label {height: 50px;} .about-project-cases-dots {margin-top: 30px; gap: 8px;} .about-project-cases-dots .project-dot.active {width: 20px; height: 20px;} .about-project-cases-dots .project-dot:not(.active) {width: 12px; height: 12px;} .about-certificate {height: auto; padding: 60px 0;} .about-certificate-container {width: 100%; padding: 0 20px;} .about-certificate-carousel-wrapper {overflow: hidden; cursor: grab;} .about-certificate-carousel-wrapper:active {cursor: grabbing;} .about-certificate-card {width: 70vw; max-width: 320px;} .about-certificate-card img {height: auto; object-fit: cover; width: 100%;} .about-certificate-dots {margin-top: 30px; gap: 8px;} .about-certificate-dots .dot {width: 12px; height: 12px;} .about-certificate-dots .dot.active {width: 16px; height: 16px;} } /* Contact Us Page Specific Styles */ .contact-page .inner-banner { background-image: url('../images/contact-us-banner.webp'); } .contact-form-section {position: relative; height: 48.385vw; overflow: hidden;} .contact-form-section::before {content: ''; position: absolute; left: 0; bottom: -6.145vw; width: 45vw; height: 48.802vw; background-image: url('../images/contact-us-earth.webp'); background-repeat: no-repeat; background-position: bottom left; background-size: contain; z-index: -1;} .contact-form-container {width: 75vw; margin: 0 auto; display: flex;} .contact-info {flex: 1; padding-top: 3.698vw;} .contact-form-section .contact-title-wrapper {display: flex; align-items: center; gap: 0.15625vw;} .contact-form-section .contact-title-icon {height: 1.5625vw;} .contact-form-section .contact-title {font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 2.5vw; line-height: 100%; text-transform: uppercase; color: #000000; margin: 0;} .contact-form-section .contact-subtitle {font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 1.25vw; line-height: 1.25vw; letter-spacing: 0%; text-transform: capitalize; color: #000000; margin-top: 1.042vw;} .contact-form-wrapper {flex: 1; padding-top: 9.74vw;} .contact-form {display: flex; flex-direction: column; gap: 3.4375vw;} .contact-form input, .contact-form textarea {border: none; border-bottom: 1px solid #000; padding: 0.52vw 0; font-family: 'Roboto', sans-serif; font-size: 1.042vw;} .contact-form input:focus, .contact-form textarea:focus {outline: none; border-bottom-color: #81BC38;} .contact-form textarea {resize: vertical; min-height: 5.208vw;} .submit-btn {background-color: #81BC38; color: #fff; border: none; padding: 1.042vw; font-family: 'Roboto', sans-serif; font-size: 1.042vw; font-weight: 500; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s ease; width: 10.417vw;} .submit-btn:hover {background-color: #6a9c2c;} .map-section {height: 35.781vw;} .map-section img {width: 100%; height: 100%; object-fit: cover;} @media (max-width: 768px) { .contact-page .inner-banner {height: 250px; margin-top: -60px;} .contact-page .inner-banner-content {position: relative; top: 20%;} .contact-page .inner-banner-content h1 {font-size: 32px;} .contact-page .inner-banner-content p {font-size: 16px; line-height: 1.5;} .contact-form-section {height: auto; padding: 60px 20px; background-image: none;} .contact-form-section::before {display: none;} .contact-form-container {width: 100%; flex-direction: column; padding-top: 0;} .contact-info {padding-top: 0; text-align: center;} .contact-form-section .contact-title-wrapper {justify-content: center;} .contact-form-section .contact-title-icon {height: 20px;} .contact-form-section .contact-title {font-size: 28px;} .contact-form-section .contact-subtitle {font-size: 16px; margin-top: 15px;} .contact-form-wrapper {padding-top: 40px;} .contact-form {gap: 25px;} .contact-form input, .contact-form textarea {font-size: 16px;} .submit-btn {width: 100%; padding: 15px; font-size: 16px;} .map-section {height: 300px;} } /*Product Archive Page Styles*/ /*Product Archive Inner Banner*/ .product-archive-page .inner-banner {background-size: cover; background-position: center;} /*Product Archive & Detail Container*/ .product-archive-container, .product-detail-container {width: 75vw; margin: 0 auto;} /*products list section*/ .public_products_box{width: 100%;height: auto;padding: 80px 0;} .public_products_content{width: 100%;height: auto;} .public_products_title{width: 100%;height: auto;padding-bottom: 30px;border-bottom: 1px solid #E5E5E5;} .public_products_title h2{font-size: 48px;color: #333333;font-weight: 600;text-align: center;} .public_products_title p{font-size: 16px;line-height: 1.8;margin-top: 20px;} .public_products_content_more{display: flex;justify-content: center;align-items: center;width: 160px;height: 45px;background: var(--mainColor);margin: 0px auto;font-size: 16px;color: #FFFFFF;margin-top: 30px;border-radius: 5px;} .public_products_content_box{width: 100%;height: auto;display: flex;justify-content: space-between;margin-top: 50px;} /*category sidebar*/ .public_products_content_left{width: 23.5%;height: auto;} .public_products_content_left_content{width: 100%;height: auto;position: sticky;top: 0;} .public_products_content_left_content_title{width: 100%;height: 45px;background: #FFFFFF;display: flex;align-items: center;padding: 0 15px;} .public_products_content_left_content_title h2{font-size: 20px;color: #000000;font-weight: 600;} .public_products_content_left_content_ul{width: 100%;height: auto;margin-top: 10px;list-style: none;padding: 0;} .public_products_content_left_content_ul li{width: 100%;height: auto;list-style: none;} .public_products_content_left_content_ul_top{width: 100%;height: 45px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px #E5E5E5 solid;padding: 0 15px;} .public_products_content_left_content_ul_top h3{font-size: 16px;color: #333333;} .public_products_content_left_content_ul_top h3 a{font-size: 16px;display: block;width: 100%;} .public_products_content_left_content_ul_top_btn{display: block;width: 18px;height: auto;cursor: pointer;transition: all 0.3s;transform: rotate(-90deg);} .public_products_content_left_content_ul_top_btn img{width: 100%;height: auto;display: block;} .public_products_content_left_content_ul_bottom{width: 100%;height: auto;display: none;list-style: none;padding: 0;margin: 0;} .public_products_content_left_content_ul_bottom dd{width: 100%;height: auto;list-style: none;margin: 0;} .public_products_content_left_content_ul_bottom_list_top{width: 100%;height: 45px;display: flex;justify-content: space-between;align-items: center;padding: 0 20px;border-bottom: 1px solid #E5E5E5;} .public_products_content_left_content_ul_bottom_list_top h3{font-size: 14px;color: #333333;} .public_products_content_left_content_ul_bottom_list_top h3 a{font-size: 14px;} .public_products_content_left_content_ul_top_btn2{width: 18px;height: auto;transform: rotate(-90deg);cursor: pointer;} .public_products_content_left_content_ul_top_btn2 img{width: 100%;height: auto;display: block;} .public_products_content_left_content_ul_bottom_list_bottom{width: 100%;height: auto;padding: 10px 20px;background: #FFFFFF;display: none;list-style: none;margin: 0;} .public_products_content_left_content_ul_bottom_list_bottom a{display: block;line-height: 2;font-size: 14px;color: #333333;padding-left: 20px;position: relative;} .public_products_content_left_content_ul_bottom_list_bottom a:before{content: "";display: block;width: 6px;height: 6px;background: #333333;border-radius: 50%;position: absolute;left: 5px;top: 11px;} .public_products_content_left_content_ul_bottom_list_bottom a:hover{color: var(--mainColor);text-decoration: underline;} .public_products_content_left_content_ul_bottom_list_bottom a:hover:before{background: var(--mainColor);} .public_products_content_left_content_ul li.on{box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.15);} .public_products_content_left_content_ul li.on .public_products_content_left_content_ul_top{background: var(--mainColor);} .public_products_content_left_content_ul li.on .public_products_content_left_content_ul_top h3{color: #FFFFFF;} .public_products_content_left_content_ul li.on .public_products_content_left_content_ul_top_btn{transform: rotate(0deg);} .public_products_content_left_content_ul li.on .public_products_content_left_content_ul_top_btn img{filter: brightness(0) invert(1);} .public_products_content_left_content_ul_bottom dd.on .public_products_content_left_content_ul_top_btn2{transform: rotate(0);} /*products grid*/ .public_products_content_right_box{width: 74.5%;height: auto;} .public_products_content_right{width: 100%;height: auto;display: flex;justify-content: flex-start;flex-wrap: wrap;} .public_products_content_right li{width: 32%;height: auto;border: 1px solid #E5E5E5;margin-bottom: 30px;border-radius: 8px;margin-left: 2%;overflow: hidden;} .public_products_content_right li:nth-of-type(3n+1){margin-left: 0;} .public_products_content_right_img{width: 100%;height: auto;aspect-ratio:1/1;display: flex;justify-content: center;align-items: center;overflow: hidden;} .public_products_content_right_img a{display: block;width: 100%;height: auto;padding: 10px;} .public_products_content_right_img img{max-width: 100%;height: auto;display: block;transition: all 0.3s;} .public_products_content_right_txt{width: 100%;height: auto;padding: 10px;border-top: 1px solid #E5E5E5;} .public_products_content_right_txt h2{font-size: 18px;line-height: 1.6;display: block;height: 52px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;font-weight: 600;} .public_products_content_right_txt h2 a{font-weight: 600;} .public_products_content_right_txt h2 a:hover{color: var(--mainColor);} .public_products_content_right_txt p{font-size: 14px;line-height: 1.4;color: #666666;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;margin-top: 10px;} .public_products_content_right_more{width: 100%;height: 42px;display: flex;justify-content: center;align-items: center;margin-top: 20px;background: #999;border-radius: 5px;color: #FFFFFF;font-size: 16px;} .public_products_content_right_more img{display: block;width: 32px;filter: brightness(0) invert(1);margin-right: 10px;} .public_products_content_right_img:hover img{transform: scale(1.1);} .public_products_content_right_more:hover{background: var(--mainColor);} /*pagination*/ .news_page{width: 100%;height: auto;display: flex;justify-content: center;margin-top: 50px;list-style: none;padding: 0;margin-left: 0;margin-right: 0;} .news_page li{width: 40px;height: 40px;opacity: 0.2;list-style: none;} .news_page li a{display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;border: 1px solid #C0CCD9;background: var(--mainColor);font-size: 18px;color: #FFFFFF;border-radius: 4px;} .news_page li + li{margin-left: 8px;} .news_page li.on,.news_page li.prev,.news_page li.next,.news_page li:hover{opacity: 1;} .news_page li.prev a,.news_page li.next a{background: transparent;} .news_page li.prev a:hover,.news_page li.next a:hover{background: var(--mainColor);} /*product advantage section*/ .public_product_advantage_box{width: 100%;height: auto;padding: 80px 0px;background: #F8F8F8;} .public_product_advantage_title{width: 100%;height: auto;} .public_product_advantage_title h2{font-size: 48px;color: #333333;font-weight: 600;text-align: center;} .public_product_choose_ul{width: 100%;height: auto;display: flex;justify-content: space-between;list-style: none;padding: 0;margin: 0;} .public_product_choose_ul li{width: 23.6%;height: auto;background: #FFFFFF;margin-top: 45px;padding: 48px 26px 19px 26px;background: #FFFFFF;transition: all 0.3s;list-style: none;} .public_product_choose_ul_ico{width: 78px;height: auto;margin: 0px auto;transition: all 0.3s;} .public_product_choose_ul_ico img{width: 100%;height: auto;display: block;} .public_product_choose_ul li:hover{box-shadow: 4px 4px 12px 0px rgba(129, 129, 129, 0.25);} .public_product_choose_ul li:hover .index_why_choose_ul_ico{transform: translateY(-10px);} .public_product_choose_ul li h4{font-size: 20px;color: #000000;line-height: 1.5;text-align: center;margin-top: 25px;font-weight: 600;transition: all 0.3s;display: block;display: block;min-height: 60px;} .public_product_choose_ul li p{font-size: 16px;color: #666666;line-height: 1.6;text-align: center;margin-top: 18px;} .public_product_choose_ul li:hover h4{color: var(--mainColor);} /*faq section*/ .public_product_faq{padding: 80px 0;} .public_product_faq .faq_ul li{background: #F8F8F8;} .faq_ul{width: 100%;height: auto;} .faq_ul li{width: 100%;height: auto;overflow: hidden;border-radius: 10px;background: #FFFFFF;transition: all 0.3s;margin-top: 20px;} .faq_top{width: 100%;height: auto;min-height: 65px;display: flex;justify-content: space-between;align-items: center;padding: 20px;border-bottom: 1px solid transparent;cursor: pointer;transition: all 0.3s;box-sizing: border-box;} .faq_top h2{display: block;font-size: 18px;color: #333333;font-weight: 500;width: 90%;transition: all 0.3s;} .faq_top span{font-size: 25px;color: #333;border-radius: 50%;font-weight: 500;line-height: 0;transition: all 0.3s;display: block;} .faq_bottom{width: 100%;height: auto;padding: 30px 20px;display: none;} .faq_bottom p{font-size: 16px;line-height: 1.8;} .faq_ul li.on .faq_top{border-color: #E5E5E5;background: var(--mainColor);} .faq_ul li.on,.faq_ul li:hover{box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.15);} .faq_ul li.on .faq_top h2{color: #FFFFFF;} .faq_ul li.on .faq_top span{color: #FFFFFF;} /*Responsive styles for product archive*/ @media (max-width: 990px) { .product-archive-container, .product-detail-container {width: 92%;} .public_product_choose_ul{flex-wrap: wrap;} .public_product_choose_ul li{width: 48.5%;} .public_products_content_box{flex-wrap: wrap;} .public_products_content_left{width: 100%;} .public_products_content_right_box{width: 100%;margin-top: 30px;} } @media(max-width: 768px) { .product-archive-page .inner-banner {height: 250px; margin-top: -60px;} .product-archive-page .inner-banner-content h1 {font-size: 32px;} .product-archive-page .inner-banner-content p {font-size: 16px; line-height: 1.5;} .product-archive-container, .product-detail-container {width: 100%; padding: 0 20px;} .news_page{margin-top: 5.8vw;} .news_page li{width: 5.8vw;height: 5.8vw;} /* product_detial.html start */ .public_product_detial_info_box{width: 100%;height: auto;padding: 80px 0px;background: #F8F8F8;overflow: hidden;} .public_product_detial_info_content{width: 100%;height: auto;display: flex;justify-content: space-between;align-items: center;} .public_product_detial_info_content_left{width: 53.6%;height: auto;} .public_product_detial_info_content_left_sw{width: 100%;height: auto;} .public_product_detial_info_content_left_sw .swiper-slide{width: 100%;height: auto;border: 1px solid #E5E5E5;} .public_product_detial_info_content_left_sw img{width: 100%;height: auto;display: block;} .video_click{width: 100%;height: auto;display: block;position: relative;} .video_click:before{content: "";display: block;width: 100%;height: 100%;background: url(../images/video_click_btn.png) no-repeat center center rgba(0,0,0,0.6);position: absolute;left: 0;top: 0;z-index: 2;} .public_product_detial_info_content_left_bottom_sw{width: 100%;height: auto;margin-top: 10px;} .public_product_detial_info_content_left_bottom_sw .swiper-slide{border: 1px solid #E5E5E5;cursor: pointer;} .public_product_detial_info_content_left_bottom_sw .swiper-slide img{width: 100%;height: auto;display: block;} .public_product_detial_info_content_left_bottom_sw .swiper-slide.swiper-slide-thumb-active{border-color: var(--mainColor);} .public_product_detial_info_content_left_sw img{width: 100%;height: auto;display: block;} .public_product_detial_info_content_left_bottom_sw .swiper-slide a{width: 100%;height: auto;display: block;position: relative;} .public_product_detial_info_content_left_bottom_sw .swiper-slide a:before{content: "";display: block;width: 100%;height: 100%;background: url(../images/video_click_btn.png) no-repeat center center rgba(0,0,0,0.6);background-size: 40px auto; position: absolute;left: 0;top: 0;z-index: 2;} .public_product_detial_info_content_right{width: 41.4%;height: auto;} .public_product_detial_info_content_right_content{width: 100%;height: auto;} .public_product_detial_info_content_right_content h1{font-size: 32px;color: #333333;font-weight: 600;} .public_product_detial_info_content_right_content p{font-size: 18px;color: #333333;line-height: 1.8;margin-top: 20px;} .public_product_detial_info_content_right_share{width: 100%;height: auto;margin-top: 30px;padding-top: 30px;border-top: 1px solid #E5E5E5;} .public_product_detial_info_content_right_share h2{font-size: 24px;font-weight: 600;} .public_product_detial_info_btn{display: flex;justify-content: flex-start;margin-top: 50px;width: 100%;height: auto;} .public_product_detial_info_btn a{display: flex;justify-content: center;align-items: center;width: 160px;height: 45px;color: #FFFFFF;background: #81BC38;border-radius: 8px;font-size: 16px;} .public_product_detial_info_btn a + a{margin-left: 10px;} .public_product_detial_info_btn a:nth-last-of-type(1){background: #81BC38;} .public_product_detial_nav_box{width:100%;height: auto;background: #FFFFFF;position: sticky;top: 80px;z-index: 99;box-shadow: 4px 4px 12px 0px rgba(179, 179, 179, 0.25);} .public_product_detial_nav_ul{width: 100%;height: 70px;display: flex;justify-content: center;align-items: center;} .public_product_detial_nav_ul li{display: flex;align-items: center;height: 100%;font-size: 18px;font-weight: 600;cursor: pointer;position: relative;} .public_product_detial_nav_ul li + li{margin-left: 80px;} .public_product_detial_nav_ul li:hover,.public_product_detial_nav_ul li.on{color: var(--mainColor);} .public_product_detial_nav_ul li.on:after{content: "";display: block;width: 100%;height: 2px;background: var(--mainColor);position: absolute;left: 0;bottom: 0;} .public_product_detial_content_box{width: 100%;height: auto;} .public_product_detial_content_list{width: 100%;height: auto;padding-top: 80px;} .public_product_detial_content_list_title{width: 100%;height: auto;position: relative;padding-left: 30px;} .public_product_detial_content_list_title:before{content: "";display: block;width: 5px;height: 30px;background: var(--mainColor);position: absolute;left: 0;top: 50%;transform: translateY(-50%);} .public_product_detial_content_list_title h2{font-size: 30px;color: #333333;font-weight: 600;} .public_product_detial_content_list_description{width: 100%;height: auto;margin-top: 50px;} .public_product_detial_content_list_description p{font-size: 18px;color: #333333;line-height: 1.8;} .public_product_detial_content_list_specification_box{width: 100%;height: auto;padding: 80px 0;background: #F8F8F8;} .public_product_detial_content_list_specification_table{width: 100%;height: auto;margin-top: 50px;} .public_product_detial_content_list_specification_table table{width: 100%;height: auto;} .public_product_detial_content_list_specification_table table th{height: 58px;background: #333333;color: #FFFFFF;padding: 0 20px;border: 1px solid #efefef;font-size: 18px;font-weight: 600;} .public_product_detial_content_list_specification_table table td{height: 58px;font-size: 16px;border: 1px solid #EFEFEF;padding: 0 20px;font-weight: 300;} .public_product_detial_content_list_specification_table table tr:nth-of-type(even){background: #FFFFFF;} .public_product_detial_feature_ul{width: 100%;height: auto;display: flex;justify-content: space-between;flex-wrap: wrap;} .public_product_detial_feature_ul li{width: 48.6%;height: auto;margin-top: 40px;background: #F8F8F8;border-radius: 12px;box-shadow: 4px 4px 12px 0px rgba(179, 179, 179, 0.25);padding: 40px 45px;display: flex;justify-content: flex-start;align-items: center;} .public_product_detial_feature_ul_number{width: 80px;height: auto;aspect-ratio:1/1;border-radius: 50%;border: 1px solid var(--mainColor);padding: 10px;} .public_product_detial_feature_ul_number span{display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;border-radius: 50%;background: rgba(0, 75, 138, 0.2);font-size: 28px;color: var(--mainColor);font-family: "Lato-Bold";} .public_product_detial_feature_ul_txt{flex: 1;margin-left: 40px;} .public_product_detial_feature_ul_txt p{font-size: 18px;color: #666666;line-height: 1.6;} .public_product_detial_content_list_more_detials_box{width: 100%;height: auto;padding: 80px 0px;background: #F8F8F8;} .public_product_detial_content_list_more_detials_content{width: 100%;height: auto;margin-top: 50px;} .public_product_detial_content_list_more_detials_content img{width: 100%;height: auto;display: block;} .public_product_detial_related_faq{width: 100%;height: auto;padding: 80px 0px;} .public_product_detial_related_faq .faq_ul{margin-top: 30px;} .public_product_detial_related_faq .faq_ul li{background: #F8F8F8;} .public_product_detial_related_box{width: 100%;height: auto;padding: 80px 0px;background: #F8F8F8;margin-top: 40px;} .public_product_detial_related_sw{width: 100%;height: auto;margin-top: 50px;padding-bottom: 60px;} .public_product_detial_related_sw .swiper-slide{background: #FFFFFF;} .public_product_detial_related_sw_img{width: 100%;height: auto;overflow: hidden;} .public_product_detial_related_sw_img img{width: 100%;height: auto;display: block;transition: all 0.3s;} .public_product_detial_related_sw_txt{width: 100%;height: auto;padding: 30px;} .public_product_detial_related_sw_txt h2{font-size: 18px;color: #333333;line-height: 1.6;font-weight: 500;transition: all 0.3s;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .public_product_detial_related_sw_txt span{display: block;text-align: center;margin-top: 20px;color: #333333;transition: all 0.3s;} .public_product_detial_related_sw .swiper-slide:hover .public_product_detial_related_sw_img img{transform: scale(1.1);} .public_product_detial_related_sw .swiper-slide:hover .public_product_detial_related_sw_txt h2{color: var(--mainColor);} .public_product_detial_related_sw .swiper-slide:hover .public_product_detial_related_sw_txt span{color: var(--mainColor);text-decoration: underline;} .public_product_detial_related_sw_page{width: 100%;bottom: 0 !important;} /*product_detial.html end*/ .news_page li a{border-radius: 0.8vw;} .news_page li a{font-size: 3.2vw;} .news_page li + li{margin-left: 1.8vw;} .news_page li img{width: 1.6vw;} .faq_top{min-height: 12.8vw;padding: 4%;} .faq_top h2{font-size: 3.8vw;} .faq_top span{font-size: 5.8vw;} .faq_bottom{padding: 0 4%;} .faq_bottom.show{padding: 5% 4%;} .faq_bottom p{font-size: 3.6vw;} .faq_ul li{margin-top: 3.8vw;border-radius: 2vw;} .public_product_choose_ul li{width: 100%;margin-top: 4.8vw;} .public_product_choose_ul li h4{font-size: 4.2vw;margin-top: 3.2vw;} .public_product_choose_ul li p{font-size: 3.6vw;margin-top: 3.2vw;} .public_products_box{padding: 8vw 0;} .public_products_title h2{font-size: 4.8vw;} .public_products_title p{font-size: 3.6vw;margin-top: 3.6vw;} .public_products_content_more{width: 38vw;height: 10.8vw;font-size: 3.6vw;margin-top: 5.8vw;} .public_products_title{padding-bottom: 5.8vw;} .public_products_content_box{margin-top: 5.8vw;} .public_products_content_left_content_title{height: 10.8vw;padding: 0 2%;} .public_products_content_left_content_title h2{font-size: 4.2vw;} .public_products_content_left_content_ul_top{height: 10.8vw;padding: 0 2%;} .public_products_content_left_content_ul_top h3 a{font-size: 3.6vw;} .public_products_content_left_content_ul_bottom_list_top{height: 10.8vw;padding: 0 2%;} .public_products_content_left_content_ul_bottom_list_top h3 a{font-size: 3.6vw;} .public_products_content_left_content_ul_bottom_list_bottom{padding: 5% 4%;} .public_products_content_left_content_ul_bottom_list_bottom a{font-size: 3.2vw;padding-left: 4%;} .public_products_content_left_content_ul_bottom_list_bottom a:before{width: 1.2vw;height: 1.2vw;top: 3vw;} .public_products_content_right_box{margin-top: 0;} .public_products_content_right{margin-top: 5.8vw;justify-content: space-between;} .public_products_content_right li{margin-left: 0;margin-bottom: 3.8vw;width: 100%;} .public_products_content_right_txt h2{font-size: 3.8vw;} .public_products_content_right_more{height: 10.8vw;font-size: 3.6vw;} .public_products_content_right_more img{width: 6.2vw;margin-right: 1.8vw;} .public_product_advantage_box{padding: 8vw 0;} .public_product_advantage_title h2{font-size: 4.8vw;} .public_product_faq{padding: 8vw 0;} } /* Product Archive Page Specific Styles */ .product-archive-page .public_products_content_more, .product-archive-page .public_products_content_right_more { display: inline-block; background-color: #81BC38; color: #FFFFFF; padding: 0.8vw 2vw; border-radius: 1.5625vw; text-decoration: none; transition: background-color 0.3s ease; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1vw; border: none; cursor: pointer; } .product-archive-page .public_products_content_more:hover, .product-archive-page .public_products_content_right_more:hover { background-color: #6fa32e; } .product-archive-page .public_products_content_right_more { display: flex; align-items: center; gap: 0.5vw; font-size: 0.9vw; } .product-archive-page .public_products_content_right_more img { height: 1vw; } /* Sidebar */ .public_products_content_left_content_ul a { text-decoration: none; color: #000; transition: color 0.3s ease; } .public_products_content_left_content_ul a:hover { color: #81BC38; } .public_products_content_left_content_ul_top { cursor: pointer; } /* Product List */ .public_products_content_right_txt h2 a { text-decoration: none; color: #000; transition: color 0.3s ease; } .public_products_content_right_txt h2 a:hover { color: #81BC38; } /* Pagination */ .news_page { display: flex; justify-content: center; list-style: none; padding: 0; gap: 0.5vw; } .news_page li a, .news_page li span { display: block; padding: 0.8vw 1.2vw; border: 1px solid #ddd; color: #333; text-decoration: none; transition: all 0.3s ease; } .news_page li a:hover { background-color: #f0f0f0; border-color: #ccc; } .news_page li.on span { background-color: #81BC38; color: #fff; border-color: #81BC38; } .news_page li.prev a, .news_page li.next a { padding: 0.6vw; } .news_page li.prev img, .news_page li.next img { height: 1.2vw; vertical-align: middle; } /*=========================================== Public Lightbox Styles (Video, Inquire, etc.) ===========================================*/ .video_mask, .download_inquire_mask, .product_inquire_mask, .email_inquire_mask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.35);backdrop-filter: blur(60px) saturate(1.2);z-index: 999;display: none;} .video_close, .product_inquire_close, .download_inquire_close, .email_inquire_close{width: 40px;height: auto;aspect-ratio:1/1;display: flex;justify-content: center;align-items: center;background: #FFFFFF;border-radius: 50%;position: absolute;right: 40px;top: 40px;cursor: pointer;transition: all 0.8s;} .video_close img, .product_inquire_close img, .download_inquire_close img, .email_inquire_close img{width: 50%;height: auto;display: block;} .video_close:hover, .download_inquire_close:hover, .product_inquire_close:hover, .email_inquire_close:hover{transform: rotate(360deg);} .product_inquire_box, .download_inquire_box, .email_inquire_box{width: 800px;height: auto;border-radius: 10px;padding: 40px;background: #FFFFFF;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999;display: none;} .product_inquire_title, .download_inquire_title, .email_inquire_title{width: 100%;height: auto;padding-bottom: 20px;border-bottom: 1px solid #e5e5e5;} .download_inquire_title h2, .product_inquire_title h2, .email_inquire_title h2{font-size: 28px;color: #333333;font-weight: 600;} .product_inquire_ul, .download_inquire_ul, .email_inquire_ul{width: 100%;height: auto;display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 20px;} .download_inquire_ul li, .product_inquire_ul li, .email_inquire_ul li{width: 100%;height: auto;position: relative;margin-top: 20px;} .download_inquire_ul li.WH48, .product_inquire_ul li.WH48, .email_inquire_ul li.WH48{width: 48.5%;} .download_inquire_ul li input, .product_inquire_ul li input, .email_inquire_ul li input{width: 100%;height: 40px;border-radius: 5px;border: 1px solid #E5E5E5;background: #FFFFFF;padding: 0 12px;outline: none;display: block;} .download_inquire_ul li textarea, .product_inquire_ul li textarea, .email_inquire_ul li textarea{width: 100%;height: 80px;display: block;border: 1px solid #E5E5E5;border-radius: 5px;padding: 12px;outline: none;resize: none;} .download_inquire_ul li img, .product_inquire_ul li img, .email_inquire_ul li img{height: 40px;width: auto;display: block;position: absolute;right: 0;top: 0;border-radius: 0 5px 5px 0px;} .product_inquire_ul li p, .download_inquire_ul li p, .email_inquire_ul li p{font-size: 14px;line-height: 1.6;font-weight: 300;} .product_inquire_ul li p a, .download_inquire_ul li p a, .email_inquire_ul li p a{font-weight: 300;text-decoration: underline;} .product_inquire_ul li p a:hover, .download_inquire_ul li p a:hover, .email_inquire_ul li p a:hover{color: var(--mainColor);} .download_inquire_btn, .product_inquire_btn, .email_inquire_btn{display: block;width: 220px;height: 50px;border-radius: 5px;background: #038CFF;margin-top: 20px;color: #FFFFFF;font-size: 16px;border: none;outline: none;cursor: pointer;} .video_lightbox{width: 63.33%;height: auto;aspect-ratio:16/9;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 999;display: none;} .video_lightbox iframe{display: block;width: 100%;height: 100%;} /*=========================================== Product Detail Page Styles ===========================================*/ /*Breadcrumbs*/ .crumbs_box{width: 100%;height: auto;border-bottom: 1px solid #E1E1E1;} .crumbs_content{width: 100%;height: 50px;display: flex;justify-content: space-between;align-items: center;} .crumbs_content img{display: block;width: 16px;height: auto;margin-right: 5px;} .crumbs_content a,.crumbs_content i{font-size: 16px;color: #666666;font-style: normal;display: block;} .crumbs_content i{margin: 0px 5px;} .crumbs_content a{display: flex;justify-content: flex-start;align-items: center;} .crumbs_content a:hover{color: var(--mainColor);} .crumbs_content_left{display: flex;height: 100%;justify-content: flex-start;align-items: center;} /*Product Detail Info Section*/ .public_product_detial_info_box{width: 100%;height: auto;padding: 80px 0px;background: #F8F8F8;overflow: hidden;} .public_product_detial_info_content{width: 100%;height: auto;display: flex;justify-content: space-between;align-items: center;} .public_product_detial_info_content_left{width: 53.6%;height: auto;} .public_product_detial_info_content_left_sw{width: 100%;height: auto;} .public_product_detial_info_content_left_sw .swiper-slide{width: 100%;height: auto;border: 1px solid #E5E5E5;} .public_product_detial_info_content_left_sw img{width: 100%;height: auto;display: block;} .video_click{width: 100%;height: auto;display: block;position: relative;} .video_click:before{content: "";display: block;width: 100%;height: 100%;background: url(../images/video_click_btn.png) no-repeat center center rgba(0,0,0,0.6);position: absolute;left: 0;top: 0;z-index: 2;} .public_product_detial_info_content_left_bottom_sw{width: 100%;height: auto;margin-top: 10px;} .public_product_detial_info_content_left_bottom_sw .swiper-slide{border: 1px solid #E5E5E5;cursor: pointer;} .public_product_detial_info_content_left_bottom_sw .swiper-slide img{width: 100%;height: auto;display: block;} .public_product_detial_info_content_left_bottom_sw .swiper-slide.swiper-slide-thumb-active{border-color: var(--mainColor);} .public_product_detial_info_content_left_sw img{width: 100%;height: auto;display: block;} .public_product_detial_info_content_left_bottom_sw .swiper-slide a{width: 100%;height: auto;display: block;position: relative;} .public_product_detial_info_content_left_bottom_sw .swiper-slide a:before{content: "";display: block;width: 100%;height: 100%;background: url(../images/video_click_btn.png) no-repeat center center rgba(0,0,0,0.6);background-size: 40px auto; position: absolute;left: 0;top: 0;z-index: 2;} .public_product_detial_info_content_right{width: 41.4%;height: auto;} .public_product_detial_info_content_right_content{width: 100%;height: auto;} .public_product_detial_info_content_right_content h1{font-size: 32px;color: #333333;font-weight: 600;} .public_product_detial_info_content_right_content p{font-size: 18px;color: #333333;line-height: 1.8;margin-top: 20px;} .public_product_detial_info_content_right_share{width: 100%;height: auto;margin-top: 30px;padding-top: 30px;border-top: 1px solid #E5E5E5;} .public_product_detial_info_content_right_share h2{font-size: 24px;font-weight: 600;} .public_product_detial_info_btn{display: flex;justify-content: flex-start;margin-top: 50px;width: 100%;height: auto;} .public_product_detial_info_btn a{display: flex;justify-content: center;align-items: center;width: 160px;height: 45px;color: #FFFFFF;background: var(--mainColor);border-radius: 8px;font-size: 16px;} .public_product_detial_info_btn a + a{margin-left: 10px;} .public_product_detial_info_btn a:nth-last-of-type(1){background: #333333;} /*Product Detail Navigation*/ .public_product_detial_nav_box{width:100%;height: auto;background: #FFFFFF;position: sticky;top: 80px;z-index: 99;box-shadow: 4px 4px 12px 0px rgba(179, 179, 179, 0.25);} .public_product_detial_nav_ul{width: 100%;height: 70px;display: flex;justify-content: center;align-items: center;} .public_product_detial_nav_ul li{display: flex;align-items: center;height: 100%;font-size: 18px;font-weight: 600;cursor: pointer;position: relative;} .public_product_detial_nav_ul li + li{margin-left: 80px;} .public_product_detial_nav_ul li:hover,.public_product_detial_nav_ul li.on{color: var(--mainColor);} .public_product_detial_nav_ul li.on:after{content: "";display: block;width: 100%;height: 2px;background: var(--mainColor);position: absolute;left: 0;bottom: 0;} /*Product Detail Content*/ .public_product_detial_content_box{width: 100%;height: auto;} .public_product_detial_content_list{width: 100%;height: auto;padding-top: 80px;} .public_product_detial_content_list_title{width: 100%;height: auto;position: relative;padding-left: 30px;} .public_product_detial_content_list_title:before{content: "";display: block;width: 5px;height: 30px;background: var(--mainColor);position: absolute;left: 0;top: 50%;transform: translateY(-50%);} .public_product_detial_content_list_title h2{font-size: 30px;color: #333333;font-weight: 600;} .public_product_detial_content_list_description{width: 100%;height: auto;margin-top: 50px;} .public_product_detial_content_list_description p{font-size: 18px;color: #333333;line-height: 1.8;} /*Specification Table*/ .public_product_detial_content_list_specification_box{width: 100%;height: auto;padding: 80px 0;background: #F8F8F8;} .public_product_detial_content_list_specification_table{width: 100%;height: auto;margin-top: 50px;} .public_product_detial_content_list_specification_table table{width: 100%;height: auto;} .public_product_detial_content_list_specification_table table th{height: 58px;background: #333333;color: #FFFFFF;padding: 0 20px;border: 1px solid #efefef;font-size: 18px;font-weight: 600;} .public_product_detial_content_list_specification_table table td{height: 58px;font-size: 16px;border: 1px solid #EFEFEF;padding: 0 20px;font-weight: 300;} .public_product_detial_content_list_specification_table table tr:nth-of-type(even){background: #FFFFFF;} /*Product Features*/ .public_product_detial_feature_ul{width: 100%;height: auto;display: flex;justify-content: space-between;flex-wrap: wrap;} .public_product_detial_feature_ul li{width: 48.6%;height: auto;margin-top: 40px;background: #F8F8F8;border-radius: 12px;box-shadow: 4px 4px 12px 0px rgba(179, 179, 179, 0.25);padding: 40px 45px;display: flex;justify-content: flex-start;align-items: center;} .public_product_detial_feature_ul_number{width: 80px;height: auto;aspect-ratio:1/1;border-radius: 50%;border: 1px solid var(--mainColor);padding: 10px;} .public_product_detial_feature_ul_number span{display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;border-radius: 50%;background: rgba(0, 75, 138, 0.2);font-size: 28px;color: var(--mainColor);font-family: "Lato-Bold";} .public_product_detial_feature_ul_txt{flex: 1;margin-left: 40px;} .public_product_detial_feature_ul_txt p{font-size: 18px;color: #666666;line-height: 1.6;} /*More Details*/ .public_product_detial_content_list_more_detials_box{width: 100%;height: auto;padding: 80px 0px;background: #F8F8F8;} .public_product_detial_content_list_more_detials_content{width: 100%;height: auto;margin-top: 50px;} .public_product_detial_content_list_more_detials_content img{width: 100%;height: auto;display: block;} /*FAQ Section*/ .public_product_detial_related_faq{width: 100%;height: auto;padding: 80px 0px;} .public_product_detial_related_faq .faq_ul{margin-top: 30px;} .public_product_detial_related_faq .faq_ul li{background: #F8F8F8;} /*Related Products*/ .public_product_detial_related_box{width: 100%;height: auto;padding: 80px 0px;background: #F8F8F8;margin-top: 40px;} .public_product_detial_related_sw{width: 100%;height: auto;margin-top: 50px;padding-bottom: 60px;} .public_product_detial_related_sw .swiper-slide{background: #FFFFFF;} .public_product_detial_related_sw_img{width: 100%;height: auto;overflow: hidden;} .public_product_detial_related_sw_img img{width: 100%;height: auto;display: block;transition: all 0.3s;} .public_product_detial_related_sw_txt{width: 100%;height: auto;padding: 30px;} .public_product_detial_related_sw_txt h2{font-size: 18px;color: #333333;line-height: 1.6;font-weight: 500;transition: all 0.3s;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .public_product_detial_related_sw_txt span{display: block;text-align: center;margin-top: 20px;color: #333333;transition: all 0.3s;} .public_product_detial_related_sw .swiper-slide:hover .public_product_detial_related_sw_img img{transform: scale(1.1);} .public_product_detial_related_sw .swiper-slide:hover .public_product_detial_related_sw_txt h2{color: var(--mainColor);} .public_product_detial_related_sw .swiper-slide:hover .public_product_detial_related_sw_txt span{color: var(--mainColor);text-decoration: underline;} .public_product_detial_related_sw_page{width: 100%;bottom: 0 !important;} /*=========================================== Product Detail Page - Responsive Styles ===========================================*/ /* Tablet - 1600px */ @media (max-width: 1600px) { .public_product_detial_info_content_right_content h1{font-size: 24px;} .public_product_detial_info_content_right_content p{font-size: 16px;} } /* Tablet - 1400px */ @media (max-width: 1400px) { .public_product_detial_info_content_right_content h1{font-size: 20px;} .public_product_detial_info_content_right_content p{font-size: 14px;} .public_product_detial_content_list_title h2{font-size: 24px;} .public_product_detial_content_list_description p{font-size: 16px;} .public_product_detial_content_list_specification_table table th{font-size: 16px;} .public_product_detial_content_list_specification_table table td{font-size: 14px;} .public_product_detial_feature_ul_txt p{font-size: 16px;} .public_product_detial_related_sw_txt h2{font-size: 16px;} } /* Tablet - 990px */ @media (max-width: 990px) { .email_inquire_box, .product_inquire_box, .download_inquire_box { width: 92%; } .video_lightbox { width: 92%; } .crumbs_content_left{flex-wrap: wrap;padding: 8px 0;} .crumbs_content{height: auto;} .public_product_detial_feature_ul li{flex-direction: column;align-items: center;} .public_product_detial_feature_ul_txt{margin-left: 0;margin-top: 30px;} .public_product_detial_info_content{flex-wrap: wrap;} .public_product_detial_info_content_left{width: 100%;} .public_product_detial_info_content_right{width: 100%;margin-top: 50px;} .public_product_detial_nav_ul li + li{margin-left: 45px;} } /* Mobile - 768px */ @media (max-width: 768px) { .public_product_detial_feature_ul li{padding: 5% 4%;width: 100%;margin-top: 4.8vw;border-radius: 2vw;} .public_product_detial_feature_ul_number{width: 16vw;padding: 1.8vw;} .public_product_detial_feature_ul_number span{font-size: 4.2vw;} .public_product_detial_feature_ul_txt{margin-top: 3.8vw;} .public_product_detial_feature_ul_txt p{font-size: 3.6vw;text-align: center;} .public_product_detial_info_box{padding: 8vw 0;} .video_click:before{background-size: 11vw auto;} .public_product_detial_info_content_left_bottom_sw .swiper-slide a:before{background-size: 8vw;} .public_product_detial_info_content_right{margin-top: 5.8vw;} .public_product_detial_info_content_right_content h1{font-size: 4.28vw;} .public_product_detial_info_content_right_content p{margin-top: 3.6vw;} .public_product_detial_info_content_right_share{margin-top: 5.8vw;padding-top: 3.6vw;} .public_product_detial_info_content_right_share h2{font-size: 4.2vw;} .public_product_detial_info_btn{margin-top: 5.8vw;} .public_product_detial_info_btn a{width: 38vw;height: 10.8vw;font-size: 3.6vw;border-radius: 2vw;} .public_product_detial_info_btn a + a{margin-left: 3.2vw;} .public_product_detial_nav_box{display: none;} .public_product_detial_content_list{padding-top: 8vw;} .public_product_detial_content_list_title{padding-left: 4.8vw;} .public_product_detial_content_list_title:before{width: 0.5vw;height: 3.8vw;} .public_product_detial_content_list_title h2{font-size: 4.8vw;} .public_product_detial_content_list_description{margin-top: 5.8vw;} .public_product_detial_content_list_description p{font-size: 3.6vw;} .public_product_detial_content_list_specification_box{padding: 8vw 0;} .public_product_detial_content_list_specification_table{margin-top: 5.8vw;overflow: hidden;overflow-x: auto;} .public_product_detial_content_list_specification_table table{min-width: 780px;} .public_product_detial_content_list_specification_table table th{height: 10.8vw;font-size: 3.8vw;padding: 0 3.2vw;} .public_product_detial_content_list_specification_table table td{height: auto;padding: 1.8vw 3.2vw;font-size: 3.2vw;} .public_product_detial_content_list_more_detials_box{padding: 8vw 0;} .public_product_detial_content_list_more_detials_content{margin-top: 5.8vw;} .public_product_detial_related_faq{padding: 8vw 0;} .public_product_detial_related_box{padding: 8vw 0;} .public_product_detial_related_sw{margin-top: 5.8vw;padding-bottom: 8vw;} .public_product_detial_related_sw_txt{padding: 5% 4%;} .public_product_detial_related_sw_txt h2{font-size: 3.6vw;} .public_product_detial_related_sw_txt span{font-size: 3.6vw;margin-top: 3.2vw;} } /*product_detial.html start - Complete CSS from test.html*/ .public_product_detial_info_box{width: 100%;height: auto;padding: 80px 0px;background: #F8F8F8;overflow: hidden;} .public_product_detial_info_content{width: 100%;height: auto;display: flex;justify-content: space-between;align-items: center;} .public_product_detial_info_content_left{width: 53.6%;height: auto;} .public_product_detial_info_content_left_sw{width: 100%;height: auto;} .public_product_detial_info_content_left_sw .swiper-slide{width: 100%;height: auto;border: 1px solid #E5E5E5;} .public_product_detial_info_content_left_sw img{width: 100%;height: auto;display: block;} .video_click{width: 100%;height: auto;display: block;position: relative;} .video_click:before{content: "";display: block;width: 100%;height: 100%;background: url(../images/video_click_btn.png) no-repeat center center rgba(0,0,0,0.6);position: absolute;left: 0;top: 0;z-index: 2;} .public_product_detial_info_content_left_bottom_sw{width: 100%;height: auto;margin-top: 10px;} .public_product_detial_info_content_left_bottom_sw .swiper-slide{border: 1px solid #E5E5E5;cursor: pointer;} .public_product_detial_info_content_left_bottom_sw .swiper-slide img{width: 100%;height: auto;display: block;} .public_product_detial_info_content_left_bottom_sw .swiper-slide.swiper-slide-thumb-active{border-color: var(--mainColor);} .public_product_detial_info_content_left_sw img{width: 100%;height: auto;display: block;} .public_product_detial_info_content_left_bottom_sw .swiper-slide a{width: 100%;height: auto;display: block;position: relative;} .public_product_detial_info_content_left_bottom_sw .swiper-slide a:before{content: "";display: block;width: 100%;height: 100%;background: url(../images/video_click_btn.png) no-repeat center center rgba(0,0,0,0.6);background-size: 40px auto; position: absolute;left: 0;top: 0;z-index: 2;} .public_product_detial_info_content_right{width: 41.4%;height: auto;} .public_product_detial_info_content_right_content{width: 100%;height: auto;} .public_product_detial_info_content_right_content h1{font-size: 32px;color: #333333;font-weight: 600;} .public_product_detial_info_content_right_content p{font-size: 18px;color: #333333;line-height: 1.8;margin-top: 20px;} .public_product_detial_info_content_right_share{width: 100%;height: auto;margin-top: 30px;padding-top: 30px;border-top: 1px solid #E5E5E5;} .public_product_detial_info_content_right_share h2{font-size: 24px;font-weight: 600;} .public_product_detial_info_btn{display: flex;justify-content: flex-start;margin-top: 50px;width: 100%;height: auto;} .public_product_detial_info_btn a{display: flex;justify-content: center;align-items: center;width: 160px;height: 45px;color: #FFFFFF;background: var(--mainColor);border-radius: 8px;font-size: 16px;} .public_product_detial_info_btn a + a{margin-left: 10px;} .public_product_detial_info_btn a:nth-last-of-type(1){background: #333333;} .public_product_detial_nav_box{width:100%;height: auto;background: #FFFFFF;position: sticky;top: 80px;z-index: 99;box-shadow: 4px 4px 12px 0px rgba(179, 179, 179, 0.25);} .public_product_detial_nav_ul{width: 100%;height: 70px;display: flex;justify-content: center;align-items: center;} .public_product_detial_nav_ul li{display: flex;align-items: center;height: 100%;font-size: 18px;font-weight: 600;cursor: pointer;position: relative;} .public_product_detial_nav_ul li + li{margin-left: 80px;} .public_product_detial_nav_ul li:hover,.public_product_detial_nav_ul li.on{color: var(--mainColor);} .public_product_detial_nav_ul li.on:after{content: "";display: block;width: 100%;height: 2px;background: var(--mainColor);position: absolute;left: 0;bottom: 0;} .public_product_detial_content_box{width: 100%;height: auto;} .public_product_detial_content_list{width: 100%;height: auto;padding-top: 80px;} .public_product_detial_content_list_title{width: 100%;height: auto;position: relative;padding-left: 30px;} .public_product_detial_content_list_title:before{content: "";display: block;width: 5px;height: 30px;background: var(--mainColor);position: absolute;left: 0;top: 50%;transform: translateY(-50%);} .public_product_detial_content_list_title h2{font-size: 30px;color: #333333;font-weight: 600;} .public_product_detial_content_list_description{width: 100%;height: auto;margin-top: 50px;} .public_product_detial_content_list_description p{font-size: 18px;color: #333333;line-height: 1.8;} .public_product_detial_content_list_specification_box{width: 100%;height: auto;padding: 80px 0;background: #F8F8F8;} .public_product_detial_content_list_specification_table{width: 100%;height: auto;margin-top: 50px;} .public_product_detial_content_list_specification_table table{width: 100%;height: auto;} .public_product_detial_content_list_specification_table table th{height: 58px;background: #333333;color: #FFFFFF;padding: 0 20px;border: 1px solid #efefef;font-size: 18px;font-weight: 600;} .public_product_detial_content_list_specification_table table td{height: 58px;font-size: 16px;border: 1px solid #EFEFEF;padding: 0 20px;font-weight: 300;} .public_product_detial_content_list_specification_table table tr:nth-of-type(even){background: #FFFFFF;} .public_product_detial_feature_ul{width: 100%;height: auto;display: flex;justify-content: space-between;flex-wrap: wrap;} .public_product_detial_feature_ul li{width: 48.6%;height: auto;margin-top: 40px;background: #F8F8F8;border-radius: 12px;box-shadow: 4px 4px 12px 0px rgba(179, 179, 179, 0.25);padding: 40px 45px;display: flex;justify-content: flex-start;align-items: center;} .public_product_detial_feature_ul_number{width: 80px;height: auto;aspect-ratio:1/1;border-radius: 50%;border: 1px solid var(--mainColor);padding: 10px;} .public_product_detial_feature_ul_number span{display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;border-radius: 50%;background: rgba(0, 75, 138, 0.2);font-size: 28px;color: var(--mainColor);font-family: "Lato-Bold";} .public_product_detial_feature_ul_txt{flex: 1;margin-left: 40px;} .public_product_detial_feature_ul_txt p{font-size: 18px;color: #666666;line-height: 1.6;} .public_product_detial_content_list_more_detials_box{width: 100%;height: auto;padding: 80px 0px;background: #F8F8F8;} .public_product_detial_content_list_more_detials_content{width: 100%;height: auto;margin-top: 50px;} .public_product_detial_content_list_more_detials_content img{width: 100%;height: auto;display: block;} .public_product_detial_related_faq{width: 100%;height: auto;padding: 80px 0px;} .public_product_detial_related_faq .faq_ul{margin-top: 30px;} .public_product_detial_related_faq .faq_ul li{background: #F8F8F8;} .public_product_detial_related_box{width: 100%;height: auto;padding: 80px 0px;background: #F8F8F8;margin-top: 40px;} .public_product_detial_related_sw{width: 100%;height: auto;margin-top: 50px;padding-bottom: 60px;} .public_product_detial_related_sw .swiper-slide{background: #FFFFFF;} .public_product_detial_related_sw_img{width: 100%;height: auto;overflow: hidden;} .public_product_detial_related_sw_img img{width: 100%;height: auto;display: block;transition: all 0.3s;} .public_product_detial_related_sw_txt{width: 100%;height: auto;padding: 30px;} .public_product_detial_related_sw_txt h2{font-size: 18px;color: #333333;line-height: 1.6;font-weight: 500;transition: all 0.3s;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .public_product_detial_related_sw_txt span{display: block;text-align: center;margin-top: 20px;color: #333333;transition: all 0.3s;} .public_product_detial_related_sw .swiper-slide:hover .public_product_detial_related_sw_img img{transform: scale(1.1);} .public_product_detial_related_sw .swiper-slide:hover .public_product_detial_related_sw_txt h2{color: var(--mainColor);} .public_product_detial_related_sw .swiper-slide:hover .public_product_detial_related_sw_txt span{color: var(--mainColor);text-decoration: underline;} .public_product_detial_related_sw_page{width: 100%;bottom: 0 !important;} /*product_detial.html end*/ @media (max-width: 1768px) { #st-1 .st-btn{padding: 0 6px !important;height: 30px !important;line-height: 30px !important;text-align: left !important;} #st-1 .st-btn > img{top: 50% !important;transform: translateY(-50%) !important;} .public_product_detial_info_content_right_content h1{font-size: 24px;} .public_product_detial_info_content_right_content p{font-size: 16px;} } @media (max-width: 1400px) { .news_detial_content_left_top h1{font-size: 24px;} #st-1 .st-btn{margin-right: 5px !important;text-align: left !important;} .public_contact_info_ul li p{font-size: 16px;} .public_products_content_left_content_ul_top h3 a{font-size: 16px;display: block;width: 100%;} .public_product_detial_info_content_right_content h1{font-size: 20px;} .public_product_detial_info_content_right_content p{font-size: 14px;} .public_product_detial_content_list_title h2{font-size: 24px;} .public_product_detial_content_list_description p{font-size: 16px;} .public_product_detial_content_list_specification_table table th{font-size: 16px;} .public_product_detial_content_list_specification_table table td{font-size: 14px;} .public_product_detial_feature_ul_txt p{font-size: 16px;} .public_product_detial_related_sw_txt h2{font-size: 16px;} } @media (max-width: 990px) { .public_product_detial_feature_ul li{flex-direction: column;align-items: center;} .public_product_detial_feature_ul_txt{margin-left: 0;margin-top: 30px;} .public_product_detial_info_content{flex-wrap: wrap;} .public_product_detial_info_content_left{width: 100%;} .public_product_detial_info_content_right{width: 100%;margin-top: 50px;} .public_product_detial_nav_ul li + li{margin-left: 45px;} } @media(max-width: 768px) { body{padding-bottom: 10.8vw;} .public_product_detial_feature_ul li{padding: 5% 4%;width: 100%;margin-top: 4.8vw;border-radius: 2vw;} .public_product_detial_feature_ul_number{width: 16vw;padding: 1.8vw;} .public_product_detial_feature_ul_number span{font-size: 4.2vw;} .public_product_detial_feature_ul_txt{margin-top: 3.8vw;} .public_product_detial_feature_ul_txt p{font-size: 3.6vw;text-align: center;} .public_product_detial_info_box{padding: 8vw 0;} .video_click:before{background-size: 11vw auto;} .public_product_detial_info_content_left_bottom_sw .swiper-slide a:before{background-size: 8vw;} .public_product_detial_info_content_right{margin-top: 5.8vw;} .public_product_detial_info_content_right_content h1{font-size: 4.28vw;} .public_product_detial_info_content_right_content p{margin-top: 3.6vw;margin-top: 3.6vw;} .public_product_detial_info_content_right_share{margin-top: 5.8vw;padding-top: 3.6vw;} .public_product_detial_info_content_right_share h2{font-size: 4.2vw;} .public_product_detial_info_btn{margin-top: 5.8vw;} .public_product_detial_info_btn a{width: 38vw;height: 10.8vw;font-size: 3.6vw;} .public_product_detial_info_btn a + a{margin-left: 3.2vw;} .public_product_detial_nav_box{display: none;} .public_product_detial_content_list{padding-top: 8vw;} .public_product_detial_content_list_title{padding-left: 4.8vw;} .public_product_detial_content_list_title:before{width: 0.5vw;height: 3.8vw;} .public_product_detial_content_list_title h2{font-size: 4.8vw;} .public_product_detial_content_list_description{margin-top: 5.8vw;} .public_product_detial_content_list_description p{font-size: 3.6vw;} .public_product_detial_content_list_specification_box{padding: 8vw 0;} .public_product_detial_content_list_specification_table{margin-top: 5.8vw;overflow: hidden;overflow-x: auto;} .public_product_detial_content_list_specification_table table{min-width: 780px;} .public_product_detial_content_list_specification_table table th{height: 10.8vw;font-size: 3.8vw;padding: 0 3.2vw;} .public_product_detial_content_list_specification_table table td{height: auto;padding: 1.8vw 3.2vw;font-size: 3.2vw;} .public_product_detial_content_list_more_detials_box{padding: 8vw 0;} .public_product_detial_content_list_more_detials_content{margin-top: 5.8vw;} .public_product_detial_related_faq{padding: 8vw 0;} .public_product_detial_related_box{padding: 8vw 0;} .public_product_detial_related_sw{margin-top: 5.8vw;padding-bottom: 8vw;} .public_product_detial_related_sw_txt{padding: 5% 4%;} .public_product_detial_related_sw_txt h2{font-size: 3.6vw;} .public_product_detial_related_sw_txt span{font-size: 3.6vw;margin-top: 3.2vw;} } /* ============================================ News List Page Styles ============================================ */ /* News List Top Section */ .news_list_top_box{width: 100%;height: auto;padding: 80px 0;} .news_list_top_sw{width: 100%;height: auto;padding-bottom: 42px;} .news_list_top_sw .swiper-slide{border-radius: 10px;overflow: hidden;background: #FAFAFA;height: auto;width: 100%;} .news_list_top_sw .swiper-slide a{display: flex;justify-content: flex-start;align-items: center;width: 100%;height: 100%;} .news_list_top_sw_img{width: 42.86%;height: auto;overflow: hidden;} .news_list_top_sw_img img{width: 100%;height: auto;display: block;transition: all 0.3s;} .news_list_top_sw_right{width: 46.43%;height: auto;margin-left: 50px;} .news_list_top_sw_right_time{font-size: 22px;color: var(--mainColor);} .news_list_top_sw_right h2{font-size: 20px;color: #333333;line-height: 1.4;font-family: "Roboto-Medium";margin-top: 20px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .news_list_top_sw_right p{font-size: 16px;color: #666666;line-height: 1.6;margin-top: 34px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .news_list_top_sw_right span{display: flex;justify-content: center;align-items: center;width: 170px;height: 56px;border: 1px solid var(--mainColor);border-radius: 10px;font-size: 20px;color: var(--mainColor);font-family: "Roboto-Medium";margin-top: 30px;transition: all 0.3s;} .news_list_top_sw .swiper-slide:hover .news_list_top_sw_img img{transform: scale(1.1);} .news_list_top_sw .swiper-slide:hover .news_list_top_sw_right span{background: var(--mainColor);color: #FFFFFF;} .news_list_top_sw_page{width: 100%;bottom: 0 !important;} .news_list_top_sw_page span{width: 12px;height: 12px;background: var(--mainColor);} /* News List Bottom Section */ .news_list_bottom_box{width: 100%;height: auto;margin-top: 50px;} .news_list_bottom_box li{width: 100%;height: auto;margin-top: 30px;background: #F2F5F8;border-radius: 16px;overflow: hidden;transition: all 0.3s;} .news_list_bottom_box li a{display: flex;justify-content: space-between;align-items: center;width: 100%;height: auto;padding: 46px 53px;} .news_list_bottom_time{width: 182px;height: auto;position: relative;} .news_list_bottom_time:after{content: "";display: block;width: 1px;height: 130px;background: #c8c8c8;position: absolute;right: 0;top: 50%;transform: translateY(-50%);} .news_list_bottom_time strong{display: block;font-size: 40px;color: var(--mainColor);text-align: center;} .news_list_bottom_time span{display: block;font-size: 20px;color: var(--mainColor);text-align: center;} .news_list_bottom_right{width: 79.7%;height: auto;} .news_list_bottom_right h2{font-size: 20px;color: #333333;font-family: "Roboto-SemiBold";white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: all 0.3s;} .news_list_bottom_right p{font-size: 16px;color: #666666;line-height: 1.6;margin-top: 10px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .news_list_bottom_right span{display: block;font-size: 18px;color: var(--mainColor);margin-top: 14px;transition: all 0.3s;} .news_list_bottom_box li:hover .news_list_bottom_right h2{color: var(--mainColor);} .news_list_bottom_box li:hover{box-shadow: 0px 0px 21px 0px rgba(4, 0, 0, 0.15);} .news_list_bottom_box li:hover .news_list_bottom_right span{text-decoration: underline;} /* News Pagination */ .news_page{width: 100%;height: auto;display: flex;justify-content: center;margin-top: 50px;} .news_page li{width: 40px;height: 40px;opacity: 0.2;} .news_page li a{display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;border: 1px solid #C0CCD9;background: var(--mainColor);font-size: 18px;color: #FFFFFF;border-radius: 4px;} .news_page li + li{margin-left: 8px;} .news_page li.on,.news_page li.prev,.news_page li.next,.news_page li:hover{opacity: 1;} .news_page li.prev a,.news_page li.next a{background: transparent;} .news_page li.prev a:hover,.news_page li.next a:hover{background: var(--mainColor);} /* ============================================ News List Page - Responsive Styles ============================================ */ /* Tablet - Large (1768px and below) */ @media (max-width: 1768px) { .news_list_top_sw_right span{margin-top: 10px;} .news_list_top_sw_right h2{margin-top: 10px;} .news_list_top_sw_right p{margin-top: 10px;} .news_list_bottom_right{width: 74.7%;} } /* Tablet - Medium (1200px and below) */ @media (max-width: 1200px) { .news_list_top_sw_right{padding: 30px 0;} .news_list_top_sw_img img{height: 100%;object-fit: cover;} .news_list_top_sw_img{height: 100%;} .news_list_top_sw .swiper-slide a{align-items: normal;} } /* Tablet - Small (990px and below) */ @media (max-width: 990px) { .news_list_top_sw .swiper-slide a{flex-wrap: wrap;} .news_list_top_sw_img{width: 100%;height: auto;} .news_list_top_sw_right{width: 100%;margin-left: 0;padding: 30px;} .news_list_bottom_right{width: 61.7%;} } /* Mobile (768px and below) */ @media (max-width: 768px) { .news_list_top_box{padding: 8vw 0;} .news_list_top_sw .swiper-slide{border-radius: 2vw;} .news_list_top_sw_right{padding: 5% 4%;} .news_list_top_sw_right_time{font-size: 3.2vw;} .news_list_top_sw_right h2{font-size: 3.8vw;margin-top: 1.8vw;} .news_list_top_sw_right p{font-size: 3.6vw;margin-top: 2.2vw;} .news_list_top_sw_right span{width: 32vw;height: 8.8vw;font-size: 3.6vw;border-radius: 1.2vw;margin-top: 3.6vw;} .news_list_top_sw{padding-bottom: 8vw;} .news_list_top_sw_page span{width: 1.8vw;height: 1.8vw;} .news_list_bottom_box{margin-top: 5.8vw;} .news_list_bottom_box li{margin-top: 3.8vw;border-radius: 2vw;} .news_list_bottom_box li a{padding: 5% 4%;flex-wrap: wrap;} .news_list_bottom_time{width: 100%;} .news_list_bottom_time:after{display: none;} .news_list_bottom_time strong{font-size: 4.8vw;} .news_list_bottom_time span{font-size: 3.6vw;} .news_list_bottom_right{width: 100%;margin-top: 3.2vw;} .news_list_bottom_right h2{font-size: 4.2vw;} .news_list_bottom_right p{font-size: 3.6vw;margin-top: 3.2vw;} .news_list_bottom_right span{font-size: 3.6vw;margin-top: 3.2vw;} .news_page{margin-top: 5.8vw;} .news_page li{width: 5.8vw;height: 5.8vw;} .news_page li a{border-radius: 0.8vw;} .news_page li a{font-size: 3.2vw;} .news_page li + li{margin-left: 1.8vw;} .news_page li img{width: 1.6vw;} } /* News Archive - Banner Navigation */ .banner_content .crumbs_content_right { display: flex; height: 100%; justify-content: flex-end; margin-top: 20px; /* Add some space from the title */ } .banner_content .crumbs_content_right li { height: 100%; position: relative; } .banner_content .crumbs_content_right li + li { margin-left: 50px; } .banner_content .crumbs_content_right li a { display: flex; align-items: center; height: 100%; color: #ffffff; /* Changed to white for better visibility on banner */ opacity: 0.8; text-decoration: none; padding-bottom: 10px; /* Add padding for the underline */ } .banner_content .crumbs_content_right li:hover a, .banner_content .crumbs_content_right li.on a { color: #ffffff; /* Changed to white */ opacity: 1; } .banner_content .crumbs_content_right li.on:after { content: ""; display: block; width: 100%; height: 2px; background: #ffffff; /* Changed to white */ position: absolute; left: 0; bottom: 0; } /* Responsive adjustments for Banner Navigation */ @media (max-width: 1400px) { .banner_content .crumbs_content_right li + li { margin-left: 30px; } } @media (max-width: 1200px) { .banner_content .crumbs_content_right li a { font-size: 14px; } } @media (max-width: 990px) { .banner_content .crumbs_content_right { display: none; /* On smaller screens, hide the category navigation */ } } /* Responsive styles for News Archive from template */ @media (max-width: 1768px) { .news_list_top_sw_right span { margin-top: 10px; } .news_list_top_sw_right h2 { margin-top: 10px; } .news_list_top_sw_right p { margin-top: 10px; } .news_list_bottom_right { width: 74.7%; } } @media (max-width: 1400px) { .news_list_top_sw_right { width: 100%; margin-left: 0; margin-top: 20px; } .news_list_top_sw .swiper-slide a { display: block; } .news_list_top_sw_img { width: 100%; } .news_list_bottom_right { width: 100%; } .news_list_bottom_time { display: none; } .news_list_bottom_box li a { padding: 20px; } } @media (max-width: 1200px) { .news_list_top_sw_right_time { font-size: 18px; } .news_list_top_sw_right h2 { font-size: 18px; } .news_list_top_sw_right p { font-size: 14px; } .news_list_top_sw_right span { width: 140px; height: 45px; font-size: 16px; } .news_list_bottom_right h2 { font-size: 18px; } .news_list_bottom_right p { font-size: 14px; } .news_list_bottom_right span { font-size: 16px; } } @media (max-width: 990px) { .banner_content h1 { font-size: 42px; } .news_list_top_box { padding: 40px 0; } .news_list_bottom_box { margin-top: 20px; } .news_list_bottom_box li { margin-top: 20px; } .news_page { margin-top: 30px; } } @media (max-width: 768px) { .banner_content h1 { font-size: 32px; } .news_list_top_sw_right_time { font-size: 16px; } .news_list_top_sw_right h2 { font-size: 16px; } .news_list_bottom_right h2 { font-size: 16px; } .news_page li { width: 35px; height: 35px; } .news_page li a { font-size: 16px; } .news_page li + li { margin-left: 5px; } } @media (max-width: 480px) { .banner_content h1 { font-size: 24px; } .news_list_top_sw_right span { width: 120px; height: 40px; font-size: 14px; } .news_list_bottom_box li a { padding: 15px; } .news_list_bottom_right p { -webkit-line-clamp: 1; } .news_list_bottom_right span { margin-top: 10px; } } /* Crumbs Navigation */ .crumbs_box { width: 100%; border-bottom: 1px solid #E1E1E1; } .crumbs_content { height: 50px; display: flex; justify-content: flex-end; /* Align content to the right */ align-items: center; } .crumbs_content_right { display: flex; height: 100%; align-items: center; list-style: none; padding: 0; margin: 0; padding-right: 2vw; } .crumbs_content_right li { height: 100%; position: relative; } .crumbs_content_right li + li { margin-left: 50px; } .crumbs_content_right li a { display: flex; align-items: center; height: 100%; color: #666666; text-decoration: none; transition: color 0.3s ease; } .crumbs_content_right li:hover a, .crumbs_content_right li.on a { color: var(--mainColor); } .crumbs_content_right li.on:after { content: ""; display: block; width: 100%; height: 2px; background: var(--mainColor); position: absolute; left: 0; bottom: -1px; } /* News Archive Container */ .news-archive-container { width: 75vw; margin: 0 auto; } @media (max-width: 768px) { .news-archive-container { width: 100%; padding: 0 20px; } @media (max-width: 768px) { .crumbs_content { justify-content: center; } .crumbs_content_right { padding-right: 0; /* Remove padding on mobile */ flex-wrap: wrap; /* Allow items to wrap on smaller screens */ justify-content: center; } .crumbs_content_right li + li { margin-left: 20px; /* Reduce margin on mobile */ } } } /* News Detail Page Styles */ .news_detial_box{width: 100%;height: auto;padding: 80px 0;background: #f8f8f8;} .news_detial_content{width: 100%;height: auto;display: flex;justify-content: space-between;} .news_detial_content_left{width: 78%;height: auto;padding: 50px;border-radius: 10px;background: #FFFFFF;box-shadow: 0px 0px 21px 0px rgba(4, 0, 0, 0.15);} .news_detial_content_left_top h1{font-size: 32px;font-weight: 500;} .news_detial_content_left_top_bottom{display: flex;justify-content: flex-start;align-items: center;padding-bottom: 15px;border-bottom: 1px solid #E5E5E5;margin-top: 30px;} .news_detial_content_left_top_bottom p{display: flex;justify-content: flex-start;align-items: center;font-size: 14px;color: #333333;} .news_detial_content_left_top_bottom p img{width: 16px;display: block;margin-right: 5px;} .news_detial_content_left_top_bottom p + p{margin-left: 80px;} .news_detial_content_left_bottom{width: 100%;height: auto;margin-top: 30px;} .news_detial_content_left_bottom p{font-size: 16px;color: #333333;line-height: 1.6;margin-top: 15px;} .news_detial_content_left_bottom h2{font-size: 18px;color: #333333;margin-top: 15px;font-weight: 600;} .news_detial_content_left_bottom p img{display: block;max-width: 100%;height: auto;margin: 0px auto;} .news_detial_content_left_bottom_last{width: 100%;height: auto;margin-top: 30px;padding-top: 30px;border-top: 1px solid #E5E5E5;display: flex;justify-content: space-between;align-items: center;} .news_detial_content_left_bottom_last_list{width: 48.5%;font-size: 16px;color: #333333;line-height: 1.6;display: flex;justify-content: flex-start;} .news_detial_content_left_bottom_last_list strong{display: block;margin-right: 5px;font-size: 18px;} .news_detial_content_left_bottom_last_list a{color: #666;display: block;margin-top: 3px;font-weight: 300;} .news_detial_content_left_bottom_last_list a:hover{color: var(--mainColor);text-decoration: underline;} .news_detial_content_right{width: 20%;height: auto;} .news_detial_content_right_box{width: 100%;height: auto;position: sticky;top: 0;} .news_detial_share{width: 100%;height: auto;padding: 20px 20px;background: #FFFFFF;box-shadow: 0px 0px 21px 0px rgba(4, 0, 0, 0.15);border-radius: 10px;} .news_detial_share_title{width: 100%;height: auto;padding-bottom: 10px;border-bottom: 1px solid #E5E5E5;} .news_detial_share_title h2{font-size: 18px;color: #333333;font-weight: 600;} .news_detial_share_box{width: 100%;margin-top: 15px;} .news_detial_form_box{width: 100%;height: auto;padding: 20px 20px;background: #FFFFFF;border-radius: 10px;box-shadow: 0px 0px 21px 0px rgba(4, 0, 0, 0.15);margin-top: 20px;} .news_detial_form_title{border: none;} .news_detial_form{width: 100%;height: auto;list-style: none;padding: 0;margin: 0;} .news_detial_form li{width: 100%;height: auto;position: relative;margin-bottom: 10px;} .news_detial_form li input{display: block;width: 100%;height: 35px;border: 1px solid #E5E5E5;border-radius: 5px;outline: none;padding: 0 10px;font-size: 12px;} .news_detial_form li textarea{display: block;width: 100%;height: 65px;border: 1px solid #E5E5E5;border-radius: 5px;outline: none;padding: 0 10px;font-size: 12px;resize: none;font-family: inherit;padding: 8px 10px;} .news_detial_form li img{display: block;height: 35px;width: auto;position: absolute;right: 0;top: 0;cursor: pointer;} .news_detial_form_btn{display: block;width: 100%;height: 35px;border-radius: 5px;background: #333333;font-size: 14px;color: #FFFFFF;cursor: pointer;border: none;outline: none;transition: all 0.3s;} .news_detial_form_btn:hover{background: var(--mainColor);} .news_detial_related_box{width: 100%;height: auto;padding: 20px;background: #FFFFFF;border-radius: 10px;box-shadow: 0px 0px 21px 0px rgba(4, 0, 0, 0.15);margin-top: 20px;} .news_detial_related_sw{width: 100%;height: auto;margin-top: 20px;padding-bottom: 30px;} .news_detial_related_sw .swiper-slide{width: 100%;height: auto;background: #F8F8F8;border-radius: 5px;overflow: hidden;} .news_detial_related_sw_img{width: 100%;height: auto;overflow: hidden;} .news_detial_related_sw_img img{width: 100%;height: auto;display: block;transition: all 0.3s;} .news_detial_related_sw_txt{width: 100%;height: auto;padding: 15px 10px;} .news_detial_related_sw_txt h2{font-size: 15px;color: #333333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .news_detial_related_sw .swiper-slide:hover .news_detial_related_sw_img img{transform: scale(1.1);} .news_detial_related_sw .swiper-slide:hover .news_detial_related_sw_txt h2{color: var(--mainColor);} .news_detial_related_sw_page{width: 100%;bottom: 0 !important;} .news_detial_related_sw_page span{width: 6px;height: 6px;background: var(--mainColor);} @media (max-width: 1400px) { .news_detial_content_left_top h1{font-size: 24px;} } @media (max-width: 1200px) { .news_detial_content{flex-wrap: wrap;} .news_detial_content_left{width: 100%;} .news_detial_content_right{width: 100%;margin-top: 20px;} } @media (max-width: 768px) { .news_detial_box{padding: 8vw 0;} .news_detial_content_left{padding: 5% 4%;} .news_detial_content_left_top h1{font-size: 4.8vw;} .news_detial_content_left_top_bottom{margin-top: 3.2vw;padding-bottom: 3.2vw;} .news_detial_content_left_top_bottom p{font-size: 3.2vw;} .news_detial_content_left_top_bottom p + p{margin-left: 5.8vw;} .news_detial_content_left_bottom{margin-top: 3.8vw;} .news_detial_content_left_bottom h2{font-size: 3.8vw;margin-top: 3.2vw;} .news_detial_content_left_bottom p{font-size: 3.6vw;margin-top: 3.2vw;} .news_detial_content_left_bottom_last{margin-top: 5.8vw;padding-top: 0vw;flex-wrap: wrap;} .news_detial_content_left_bottom_last_list{width: 100%;margin-top: 3.2vw;} .news_detial_content_left_bottom_last_list strong{font-size: 3.6vw;} .news_detial_content_left_bottom_last_list a{font-size: 3.2vw;} .news_detial_content_right{margin-top: 5.8vw;} .news_detial_share{padding: 5% 4%;} .news_detial_share_title h2{font-size: 4.2vw;} .news_detial_share_title{padding-bottom: 1.8vw;} .news_detial_form_box{padding: 5% 4%;} .news_detial_related_box{padding: 5% 4%;} .news_detial_related_sw_txt h2{font-size: 3.6vw;} } /* News Detail Container */ .news-detail-container { width: 75vw; margin: 0 auto; } @media (max-width: 1400px) { .news-detail-container { width: 92%; } } @media (max-width: 768px) { .news-detail-container { width: 100%; padding: 0 20px; } }