body{ color: #353c4b; } html, body { scroll-behavior:smooth; overflow-x: hidden; } li { list-style: none; } a { color: #353c4b; transition: all 0.3s ease; } a:hover { color: #353c4b; text-decoration: none; } p, dl, dt, dd, ul { margin: 0px; padding: 0px; } @media (min-width: 768px) { .container-fluid{ padding: 0 6.25%; } } .index-about-title a:hover{ font-size: 18px; color: #01aae5; } .news-list ul li:hover p.desc{ border-color: #01aae5; } .index-menu .lang-list{ height: 32px; width: 100px; font-size: 14px; font-weight: bold; display: flex; margin-left: auto; align-items: center; justify-content: center; border: 2px solid #93979f; } .index-menu .lang-list span{ margin: 0 8px; color: #353c4b; } .index-menu .lang-list a{ color: #353c4b; } .index-menu .lang-list a:hover{ color: #01aae5; } .index-menu .list .item ul li > a:hover, .index-menu .list .item ul li p a:hover{ color: #01aae5; } .swiper-button-prev:after, .swiper-button-next:after{ color: #ffffff; } .pc .swiper-button-next, .pc .swiper-rtl .swiper-button-prev{ right: 6.25%; } .pc .swiper-button-prev, .pc .swiper-rtl .swiper-button-next{ left: 6.25%; } .wap .swiper-button-next, .wap .swiper-rtl .swiper-button-prev{ right: 15px; } .wap .swiper-button-prev, .wap .swiper-rtl .swiper-button-next{ left: 15px; } .header{ padding: 10px 0; background: #ffffff; } .header.collapsed{ position: fixed; top: 0; left: 0; right: 0; transition: color 0.3s ease; z-index: 9999; box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.3); } .header .container-fluid{ display: flex; align-items: center; } .header .logo img{ height: 30px; } .header .lang-list{ height: 27px; width: 82px; display: none; font-size: 12px; font-weight: bold; align-items: center; margin-left: 10px; justify-content: center; border: 2px solid #93979f; } .header .lang-list span{ margin: 0 8px; color: #353c4b; } .header .lang-list a{ color: #353c4b; } .header .nav-list{ display: none; font-size: 14px; line-height: 24px; margin-left: auto; } .header .nav-list a{ color: #353c4b; margin: 0 10px; letter-spacing: 3px; position: relative; } .header .nav-list a::before, .header .nav-list a::after{ content: ""; position: absolute; left: 0; width: 0; height: 2px; top: -5px; background: #ffeea5; transition: all 0.5s ease; } .header .nav-list a::after{ top: auto; left: auto; right: 0; bottom: -5px; } .header .nav-list a:hover::before, .header .nav-list a.active::before, .header .nav-list a.active::after, .header .nav-list a:hover::after{ width: 100%; } .header .menu { width: 40px; height: 40px; margin-left: auto; background: #ffdb3f; border-radius: 50%; display: block; display: flex; justify-content: center; align-items: center; font-size: 1.6rem; } @media (min-width: 768px) { .header{ padding: 50px 0 30px; } .header.collapsed{ padding: 20px 0; } .header .menu{ display: none; } .header .logo img{ height: 36px; } .header .nav-list{ display: flex; } .header .lang-list{ display: flex; } } @media (min-width: 992px) { .header .logo img{ height: 40px; } .header{ padding: 100px 0 60px; } .header.collapsed{ padding: 30px 0; } .header .nav-list a{ font-size: 16px; margin: 0 20px; } .header .lang-list{ width: 92px; margin-left: 20px; } .header .lang-list span{ margin: 0 10px; } } @media (min-width: 1200px) { .header .nav-list a{ margin: 0 30px; } .header .lang-list{ margin-left: 30px; } } @media (min-width: 1400px) { .header .nav-list a{ margin: 0 40px; } .header .lang-list{ margin-left: 40px; } } @media (min-width: 1600px) { .header .nav-list a{ margin: 0 50px; } .header .lang-list{ margin-left: 50px; } } /** * 联系我们 * */ .contact-fluid{ position: relative; } .contact-fluid img{ display: block; width: 100%; } .contact-fluid .contact-content{ background: #ffffff; padding: 30px 0 0; } .contact-fluid .contact-content h3.title{ font-size: 20px; margin: 0 0 15px; font-weight: 600; } .contact-fluid .contact-content div.content{ font-size: 14px; } @media (min-width: 992px) { .contact-fluid{ padding-left: 100px; } .contact-fluid .contact-content{ width: 430px; position: absolute; bottom: 0; left: 0; } .contact-fluid .contact-content h3.title{ font-size: 24px; } .contact-fluid .contact-content div.content{ font-size: 16px; padding: 0 30px 30px; } } @media (min-width: 1400px) { .contact-fluid .contact-content{ padding: 50px 0 0; } .contact-fluid{ padding-left: 180px; } .contact-fluid .contact-content h3.title{ font-size: 32px; margin: 0 0 20px; } .contact-fluid .contact-content{ width: 510px; } .contact-fluid .contact-content div.content{ padding: 0 50px 50px; line-height: 30px; } } .contact-message{ max-width: 1320px; margin: 0 auto; padding: 30px 0; } .contact-message input, .contact-message textarea{ width: 100%; display: block; background: #f8f8f8; border: none; height: 40px; margin: 0 0 15px; padding: 0 8px; outline: none; border-radius: 5px; } .contact-message textarea{ height: 150px; resize: none; padding: 8px; } .contact-message button{ background: #ffdb3f; border: none; width: 34.375%; height: 40px; color: #353c4b; } .contact-message .qrcode{ padding-top: 30px; align-items: center; justify-content: center; display: flex; } .contact-message .qrcode img{ display: block; max-width: 100%; } @media (min-width: 768px) { .contact-message{ padding: 50px 0; } } @media (min-width: 992px) { .contact-message{ padding: 80px 0; } } @media (min-width: 1200px) { .contact-message{ padding: 100px 0; } } .contact-text .row .col{ background: #01aae5; color: #ffffff; padding: 30px 30px; } .contact-text .row .col:nth-child(2){ background: #ffdb3f; color: #353c4b; } .contact-text h3.name{ font-size: 16px; line-height: 20px; padding-left: 5px; border-left: 3px solid #ffffff; } .contact-text .row .col:nth-child(2) h3.name{ border-color: #353c4b; } .contact-text .item{ line-height: 30px; font-size: 14px; } @media (min-width: 768px) { .contact-text h3.name{ border-left-width: 6px; } .contact-text .item{ line-height: 40px; } .contact-text .row{ margin: 0; } .contact-text .row .col{ padding: 60px 0; } .contact-text .row .col:nth-child(1){ padding-left: 6.25%; } .contact-text .row .col:nth-child(2) .box{ padding-left: 30px; } .contact-text .row .col:nth-child(1) .box{ padding-right: 30px; } } @media (min-width: 992px) { .contact-text .row .col:nth-child(1) .box{ max-width: 660px; margin-left: auto; } .contact-text .row .col:nth-child(2) .box{ padding-left: 60px; } .contact-text .row .col:nth-child(1) .box{ padding-right: 60px; } } @media (min-width: 1200px) { .contact-text .row .col .box{ display: flex; } .contact-text .row .col .box h3.name{ margin-right: 30px; height: 20px; margin-top: 10px; flex: 0 0 auto; } } @media (min-width: 1400px) { .contact-text .row .col .box h3.name{ margin-right: 60px; } } .contact-map{ width: 100%; height: 50vh; background: #343b49; } /** * 新闻中心 * */ .container-fluid.news-fluid{ padding-bottom: 40px; background: url(../images/news.jpg) no-repeat center bottom #ffffff; } .news-banner img{ display: block; width: 100%; } .news-banner img.pc{ display: none; } @media (min-width: 768px) { .container-fluid.news-fluid{ padding-bottom: 60px; } .news-banner img{ display: none; } .news-banner img.pc{ display: block; } } .news-list{ max-width: 1320px; margin: 0 auto; padding: 40px 0; } .news-list ul li{ margin: 0 0 30px; } .news-list ul li .p-img{ overflow: hidden; } .news-list ul li img{ display: block; max-width: 100%; transition: all 0.3s ease; } .news-list ul li:hover img{ transform: scale(1.2); } .news-list ul li h3{ font-weight: normal; font-size: 16px; margin: 15px 0 0; } .news-list ul li p{ font-size: 14px; color: #8e8e8e; } .news-list ul li:hover p{ color: #353c4b; } .news-list ul li p.desc{ padding: 20px 0; border-bottom: 1px solid #8e8e8e; } .news-list ul li p.date{ padding: 20px 0 0; } .page-box{ display: flex; justify-content: center; } .page-box a, .page-box span{ width: 32px; height: 32px; text-align: center; line-height: 30px; margin: 0 5px; border-radius: 5px; border: 1px solid #c3c3c3; } .page-box a.page-num-current, .page-box a:hover{ border-color: #ffe300; background: #ffe300; } .page-box{ padding: 20px 0 0; } @media (min-width: 768px) { .news-list{ padding: 60px 0; } .news-list ul li{ display: flex; align-items: center; } .news-list ul li .p-img{ width: 200px; flex: 0 0 auto; margin-right: 30px; } .news-list ul li h3{ margin: 0; } .page-box{ padding: 30px 0 0; } } @media (min-width: 992px) { .container-fluid.news-fluid{ padding-bottom: 80px; } .news-list ul li h3{ font-size: 18px; } .news-list ul li p.desc{ line-height: 30px; } .news-list ul li{ margin: 0 0 50px; } .news-list ul li .p-img{ width: 300px; } .news-list{ padding: 100px 0; } .page-box{ padding: 40px 0 0; } } @media (min-width: 1200px) { .container-fluid.news-fluid{ padding-bottom: 100px; } .news-list ul li .p-img{ width: 400px; } .news-list ul li p.desc{ padding: 30px 0; } .news-list ul li p.date{ padding: 30px 0 0; } } .news-top{ width: 100%; max-width: 1320px; margin: 0 auto; padding: 30px 15px 20px; color: #ffffff; border-radius: 10px; background-size: cover; } .news-top a{ color: #ffffff; } .news-top h3{ font-size: 16px; margin: 0; font-weight: normal; } .news-top p{ font-size: 14px; } .news-top p.desc{ padding: 10px 0 30px; border-bottom: 1px solid #ffffff; } .news-top p.date{ margin: 10px 0; } @media (min-width: 768px) { .news-top{ padding: 40px 30px 30px; } } @media (min-width: 992px) { .news-top{ padding: 135px 60px 60px; } .news-top p.desc{ padding: 15px 0 40px; } .news-top p.date{ margin: 15px 0; } } .show-news{ width: 100%; padding: 40px 0; margin: 0 auto; max-width: 1320px; } .show-news h2.title{ font-size: 18px; margin: 0 0 10px; } .show-news p.date{ color: #a6a6a6; } .show-news .content{ margin: 30px 0 0; } .show-news .content img{ max-width: 100%; } .show-news .p-n{ margin: 30px 0 0; justify-content: center; } .show-news .p-n p{ color: #ffffff; width: 100%; line-height: 30px; margin: 10px 0; padding: 10px 10px; background: #353c4b; } .show-news .p-n p a{ color: #ffffff; } .show-news .p-n span{ display: none; background: #353c4b; } .show-news .p-n p a:hover{ color: #ffdb3f; } @media (min-width: 768px) { .show-news{ padding: 60px 0; } .show-news .p-n{ display: flex; } .show-news .p-n p{ width: auto; margin: 0; padding: 15px 0; } .show-news .p-n p.p{ padding-left: 30px; } .show-news .p-n p.n{ padding-right: 30px; } .show-news .p-n span{ display: block; color: #ffffff; line-height: 30px; padding: 15px 10px; } .show-news .p-n{ margin: 60px 0 0; } } @media (min-width: 992px) { .show-news .p-n span{ padding: 15px 20px; } .show-news{ padding: 100px 0; } .show-news .p-n p.p{ padding-left: 100px; } .show-news .p-n p.n{ padding-right: 100px; } .show-news .p-n{ margin: 100px 0 0; } } /** * 产品中心 * */ .product-banner{ position: relative; } .product-banner-box{ position: relative; } .product-banner img{ width: 100%; display: block; } .product-banner .product-banner-text{ font-size: 14px; } .product-banner .product-banner-text h3.name{ font-size: 20px; margin: 0 0 20px; } .product-banner .product-banner-text .text-desc{ line-height: 24px; padding-left: 20px; } .product-banner .model{ color: #ffffff; padding: 20px 15px; background: #01aae5; margin: 0 0 30px; border-radius: 0 0 15px 15px; } .product-banner .model p{ font-size: 12px; line-height: 24px; } .product-banner .model h3{ font-size: 20px; margin: 15px 0; } .product-banner .model a{ font-size: 12px; line-height: 24px; color: #ffffff; } @media (min-width: 768px) { .product-banner .model{ position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 0 30px 30px; background: none; } .product-banner-box{ margin: 0 0 40px; } .product-banner .model a{ font-size: 14px; line-height: 30px; } .product-banner .model p{ font-size: 14px; line-height: 30px; } .product-banner .model h3{ font-size: 24px; margin: 20px 0; } .product-banner .product-banner-text h3.name{ font-size: 24px; margin: 0 0 30px; } .product-banner .product-banner-text .text-desc{ font-size: 14px; line-height: 30px; padding-left: 60px; } } @media (min-width: 992px) { .product-banner{ padding-left: 250px; } .product-banner-box{ margin: 0; } .product-banner .product-banner-text{ position: absolute; left: 0; width: 235px; bottom: 0; } .product-banner .product-banner-text .text-desc{ padding-left: 20px; font-size: 12px; line-height: 24px; } } @media (min-width: 1200px) { .product-banner{ padding-left: 400px; } .product-banner .product-banner-text{ width: 380px; } .product-banner .product-banner-text .text-desc{ padding-left: 30px; font-size: 14px; line-height: 30px; } .product-banner .product-banner-text h3.name{ font-size: 30px; } .product-banner .model h3{ font-size: 30px; margin: 30px 0; } } @media (min-width: 1400px) { .product-banner{ padding-left: 500px; } .product-banner .product-banner-text{ width: 450px; } .product-banner .product-banner-text .text-desc{ padding-left: 50px; } } .product-album{ width: 100%; max-width: 1320px; margin: 30px auto; } .product-album h4{ font-weight: normal; font-size: 18px; margin: 0; padding-left: 20px; background: url(../images/icon.jpg) no-repeat left center; text-transform: uppercase; } .product-album a{ display: block; line-height: 20px; font-size: 14px; font-weight: bold; padding: 10px 0 10px 15px; border-bottom: 3px solid #353c4b; position: relative; } .product-album a::after{ content: ""; width: 0%; height: 3px; position: absolute; left: 0; bottom: -3px; background: #ffdb3f; transition: all 0.3s ease; } .product-album a:hover::after{ width: 100%; } .product-album .col:nth-child(1){ margin: 0 0 30px; } @media (min-width: 576px) { .product-album .col:nth-child(1){ margin: 0; } } @media (min-width: 768px) { .product-album{ margin: 50px auto; } } @media (min-width: 992px) { .product-album{ margin: 80px auto; } } @media (min-width: 1200px) { .product-album{ margin: 100px auto; } } .product-list{ padding: 30px 0; background: url(../images/bg1.jpg) no-repeat center bottom #f8f8f8; } .product-list .pro-item{ background: #ffffff; } .product-list .p-img{ overflow: hidden; } .product-list .p-img img{ display: block; width: 80%; margin: 0 auto; transition: all 0.3s ease; } .product-list .p-text{ padding: 0 30px 30px; } .product-list .p-text h3{ font-size: 16px; margin: 0 0 10px; text-align: center; } .product-list .p-text p{ font-size: 12px; text-align: center; line-height: 24px; } .product-list .p-text p.desc{ margin: 0 0 10px; } .product-list .pro-item a:hover .p-img img{ transform: scale(0.8); } .product-list .col{ margin: 0 0 15px; } @media (min-width: 576px) { .product-list .row{ margin: 0 -7.5px; } .product-list .col{ padding: 0 7.5px; } .product-list .pro-item{ height: 100%; } } @media (min-width: 768px) { .product-list{ padding: 50px 0; } } @media (min-width: 992px) { .product-list{ padding: 80px 0; } .product-list .p-text p{ font-size: 14px; } } @media (min-width: 1200px) { .product-list{ padding: 100px 0; } } .pro-list{ background: #f8f8f8; } .pro-list-fluid{ width: 100%; max-width: 1320px; margin: 0 auto; padding: 30px 0; } .pro-list-fluid .sort-name{ font-size: 18px; font-weight: bold; padding-left: 20px; background: url(../images/icon.jpg) no-repeat center left; } .pro-list-fluid .sort-nav{ padding: 15px 0 0; } .pro-list-fluid .sort-nav a{ display: inline-block; font-size: 14px; background: #01aae5; color: #ffffff; line-height: 22px; padding: 0 10px; margin: 0 20px 10px 0; border-radius: 11px; } .pro-list-fluid .sort-nav a:hover, .pro-list-fluid .sort-nav a.active{ background: #ffdb3f; color: #353c4b; } @media (min-width: 768px) { .pro-list-fluid .sort-nav{ padding: 20px 0 0; } .pro-list-fluid{ padding: 50px 0; } } @media (min-width: 992px) { .pro-list-fluid{ padding: 80px 0; } .pro-list-fluid .sort-nav{ padding: 30px 0 0; } .pro-list-fluid .sort-name{ font-size: 20px; } } @media (min-width: 1200px) { .pro-list-fluid{ padding: 100px 0; } } .pro-list-box{ padding: 30px 0 0; } .pro-list-box .col{ margin: 0 0 30px; } .pro-list-box .p-img{ border-radius: 20px; overflow: hidden; } .pro-list-box .p-img img{ display: block; width: 100%; transition: all 0.3s ease; } .pro-list-box h3{ font-size: 16px; font-weight: 600; margin: 20px 0 0; } .pro-list-box .p-desc{ position: relative; font-size: 12px; line-height: 24px; padding: 15px 0; border-bottom: 2px solid #696e79; } .pro-list-box .p-desc::after{ content: ""; width: 0; height: 2px; left: 0; bottom: -2px; transition: all 0.3s ease; position: absolute; background: #ffdb3f; } .pro-list-box p{ width: 100%; height: 28px; margin: 20px 0 0; position: relative; } .pro-list-box p span{ width: 28px; height: 28px; position: absolute; display: block; right: 0; top: 0; line-height: 28px; z-index: 2; text-align: center; } .pro-list-box p::after{ content: ""; width: 28px; height: 28px; position: absolute; right: 0; top: 0; transform: scale(0); z-index: 1; border-radius: 50%; transition: all 0.3s ease; background: #ffdb3f; } .pro-list-box a:hover p::after{ transform: scale(1); } .pro-list-box a:hover .p-desc::after{ width: 100%; } .pro-list-box a:hover .p-img img{ transform: scale(1.2); } @media (min-width: 576px and max-width:767px) { .pro-list-box .row{ margin: 0 -7.5px; } .pro-list-box .row .col{ padding: 0 7.5px; } } @media (min-width: 768px) { .pro-list-box{ padding: 50px 0 0px; } } @media (min-width: 992px) { .pro-list-box{ padding: 80px 0 0px; } .pro-list-box .row{ margin: 0 -30px; } .pro-list-box .row .col{ padding: 0 30px; } .pro-list-box .col{ margin: 0 0 40px; } .pro-list-box p{ margin: 30px 0 0; } .pro-list-box h3{ margin: 25px 0 0; } .pro-list-box .p-desc{ padding: 20px 0; } } /** * 产品详情 * */ .product-item-fluid{ background: #f8f8f8; } .product-item{ max-width: 1320px; margin: 0 auto; padding: 40px 0 0; } .product-item .row{ margin: 0; } .product-item .row .col{ padding: 0; } .product-item .product-dimg{ position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; } .product-item .product-dimg::after{ content: ""; width: 60%; height: 100%; z-index: 1; position: absolute; right: 0; top: 0; background: #ffdb3f; } .product-item .product-dimg img{ display: block; width: 100%; position: relative; z-index: 2; } .product-item .product-info .sort-name{ font-size: 14px; padding: 30px 0 0; font-weight: 600; } .product-item .product-info h1{ font-size: 20px; font-weight: 600; margin: 15px 0 25px; } .product-item .product-info p{ font-size: 14px; line-height: 26px; } .product-item .product-info .param-list{ display: flex; padding: 30px 0; } .product-item .product-info .param-list .param-item{ text-align: center; } .product-item .product-info .param-list .param-item:nth-child(2){ margin: 0 20px; } .product-item .product-info .param-list .param-item p{ font-weight: 600; font-size: 14px; line-height: 20px; padding: 10px 0 0; } .product-item .product-info .param-list .radius{ background: #01aae5; border-radius: 50%; color: #ffffff; width: 80px; height: 80px; text-align: center; line-height: 80px; } .product-item .product-info .param-list .radius b{ font-size: 24px; font-weight: 400; margin-right: 3px; } @media (min-width: 768px) { .product-item .row .product-info{ padding-left: 30px; } .product-item .product-info .sort-name{ padding: 0; } } @media (min-width: 992px) { .product-item .row .product-info{ padding-left: 50px; } .product-item .product-info .param-list .radius{ width: 90px; height: 90px; line-height: 90px; } .product-item .product-info .param-list .radius b{ font-size: 30px; } .product-item .product-info .param-list .param-item:nth-child(2){ margin: 0 50px; } .product-item .product-info h1{ font-size: 24px; margin: 25px 0 35px; } .product-item .product-info .param-list{ padding: 50px 0; } } @media (min-width: 1200px) { .product-item .product-info h1{ font-size: 28px; } .product-item .product-info .param-list{ padding: 100px 0 80px; } } @media (min-width: 1400px) { .product-item .product-info h1{ font-size: 32px; } .product-item .product-info .param-list{ padding: 130px 0 100px; } } .product-content-fluid{ background: url(../images/bg.jpg) no-repeat center bottom; } .product-content{ width: 100%; max-width: 1320px; margin: 0 auto; padding: 40px 0; } .product-content .content{ margin: 0 0 40px; } .product-content .content img{ max-width: 100%; } @media (min-width: 768px) { .product-content{ padding: 60px 0; } .product-content .content{ margin: 0 0 60px; } } @media (min-width: 992px) { .product-content{ padding: 80px 0; } .product-content .content{ margin: 0 0 80px; } } @media (min-width: 1400px) { .product-content{ padding: 100px 0; } .product-content .content{ margin: 0 0 100px; } } .pre-next{ } .pre-next p{ width: 100%; margin: 15px 0 0; color: #ffffff; line-height: 30px; font-size: 14px; padding: 0 30px; background: #353c4b; } .pre-next p a{ color: #ffffff; } .pre-next p a:hover{ color: #ffdb3f; } .pre-next a.sort{ display: none; } @media (min-width: 768px) { .pre-next{ justify-content: center; display: flex; } .pre-next p{ max-width: 375px; width: 50%; margin: 0; line-height: 40px; position: relative; } .pre-next p:nth-child(1){ text-align: right; } .pre-next a.sort{ display: block; line-height: 30px; display: flex; align-items: center; background: #353c4b; } .pre-next a.sort i{ color: #ffffff; font-size: 20px; } } @media (min-width: 992px) { .pre-next p{ line-height: 50px; } .pre-next a.sort i{ font-size: 24px; } } @media (min-width: 1400) { .pre-next p{ line-height: 60px; } } /** * 关于我们 * */ .about-number{ width: 100%; padding: 40px 0; margin: 0 auto; } .about-number .item:nth-child(2){ margin: 30px 0; } .about-number .item p{ font-size: 16px; } .about-number .item span{ font-size: 20px; } .about-number .item .number{ font-size: 50px; line-height: 50px; font-weight: 600; } @media (min-width: 768px) { .about-number{ display: flex; padding: 60px 0; } .about-number .item:nth-child(2){ margin: 0 auto; } } @media (min-width: 992px) { .about-number{ padding: 80px 0; } .about-number .item .number{ font-size: 80px; line-height: 80px; } } @media (min-width: 1400px) { .about-number{ padding: 100px 0; } .about-number .item .number{ font-size: 100px; line-height: 100px; } } .about-desc{ line-height: 30px; font-size: 14px; padding: 0 0 40px; } @media (min-width: 768px) { .about-desc{ padding: 0 0 60px; } } @media (min-width: 992px) { .about-desc{ padding: 0 0 80px; } } @media (min-width: 1400px) { .about-desc{ padding: 0 0 100px; } } .about-img img{ height: 200px; display: block; cursor: pointer; transition: all 0.3s ease; } .about-img img:hover{ transform: scale(1.2); } .about-img .swiper-slide{ width: auto; position: relative; overflow: hidden; } .about-img .swiper-slide::after{ content: ""; width: 100%; height: 100%; left: 0; top: 0; cursor: pointer; position: absolute; background: rgba(0, 0, 0, 0.5); } .about-img .swiper-slide.swiper-slide-active::after, .about-img .swiper-slide:hover::after{ background: no-repeat; display: none; } @media (min-width: 768px) { .about-img img{ height: 270px; } } .about-content{ width: 100%; max-width: 1320px; margin: 0 auto; padding: 40px 0; } .about-content .content-title img{ display: block; width: 200px; } .about-content .content-title p{ line-height: 20px; font-size: 16px; font-weight: 600; padding-left: 20px; margin: 30px 0; border-left: 3px solid #353c4b; } @media (min-width: 768px) { .about-content{ padding: 60px 0; } .about-content .content-title p{ border-left-width: 6px; margin: 40px 0; } .about-content .content-title img{ width: 256px; } } @media (min-width: 992px) { .about-content{ display: flex; padding: 80px 0; } .about-content .content-title{ flex: 0 0 auto; margin-right: 60px; } .about-content .content-title img{ width: 200px; } } @media (min-width: 1400px) { .about-content .content-title img{ width: 256px; } .about-content{ padding: 100px 0; } .about-content .content-title{ margin-right: 120px; } } .about-process{ width: 100%; height: 400px; background: url(../images/process-bg.jpg); background-size: cover; background-position: center; } .about-process .container-fluid{ height: 100%; } .about-process-box{ width: 100%; height: 100%; padding: 80px 0 0; margin: 0 auto; max-width: 1320px; color: #ffffff; } .about-process-box .swiper{ height: 100%; } .about-process-box .swiper-slide{ height: 100%; } .about-process-box .year{ text-align: center; line-height: 30px; font-size: 16px; opacity: 0.6; padding: 30px 0 0; cursor: pointer; transition: all 0.3s ease; } .about-process-box .year:hover{ opacity: 1; font-size: 18px; } .about-process-box i{ display: block; width: 11px; height: 0; transition: all 0.3s ease; background: url(../images/icon.png); background-size: cover; margin: 0 auto; } .about-process-box .content{ background: #ffdb3f; border-radius: 10px; min-height: 130px; margin-top: 26px; display: none; left: calc(-100% + 30px); right: -100%; max-width: 360px; position: absolute; padding: 20px 20px 20px 130px; } .about-process-box .content::after{ content: ""; position: absolute; left: -30px; bottom: 0; width: 140px; height: 156px; background: url(../images/ip.png) no-repeat; } .about-process-box .swiper-slide-active .content{ display: block; } .about-process-box .swiper-slide-active i{ height: 19px; } .about-process-box .swiper-slide-active .year{ opacity: 1; padding: 0; } @media (min-width: 500px) { .about-process-box .content{ width: 360px; left: 50%; right: 0; margin-left: -180px; } } @media (min-width: 992px) { .about-process{ height: 500px; } .about-process-box .content{ margin-left: -40px; margin-top: 15px; } .about-process-box{ padding: 180px 0 0; } } @media (min-width: 1400px) { .about-process{ position: relative; border-radius: 250px 0 250px 0; } .about-process::after{ content: ""; width: 50%; height: 50%; bottom: 0; right: 0; z-index: -1; position: absolute; background: #f8f8f8; } } .about-honor{ padding: 40px 0; background: url(../images/bg1.jpg) no-repeat center bottom #f8f8f8; } @media (min-width: 768px) { .about-honor{ padding: 60px 0; } } @media (min-width: 992px) { .about-honor{ padding: 80px 0; } } @media (min-width: 1400px) { .about-honor{ padding: 100px 0; } } .about-honor-box{ width: 100%; max-width: 1320px; margin: 0 auto; } .about-honor-title{ font-size: 18px; line-height: 18px; font-weight: 600; text-align: center; padding: 0 0 40px; } @media (min-width: 768px) { .about-honor-title{ font-size: 20px; line-height: 20px; padding: 0 0 60px; } } @media (min-width: 992px) { .about-honor-title{ padding: 0 0 80px; } } @media (min-width: 1400px) { .about-honor-title{ padding: 0 0 100px; } } .about-honor-qrcode{ padding: 25px 0; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; } .about-honor-qrcode .qrcode-box{ display: flex; } .about-honor-qrcode .col:nth-child(2){ margin: 25px 0; } .about-honor-qrcode .qrcode-box .qrcode-img{ margin-right: 20px; flex: 0 0 auto; width: 100px; } .about-honor-qrcode .qrcode-box img{ display: block; width: 100%; } .about-honor-qrcode .qrcode-box .qrcode-info{ display: flex; flex-flow: column; } .about-honor-qrcode .qrcode-box .qrcode-info .text{ margin-top: auto; } .about-honor-qrcode .qrcode-box .qrcode-info .view{ font-size: 14px; color: #a7a7a7; } .about-honor-qrcode .qrcode-box .qrcode-info .sn{ color: #353c4b; font-weight: bold; font-size: 14px; line-height: 30px; } .about-honor-qrcode .qrcode-box .qrcode-info .title{ font-size: 14px; line-height: 30px; padding: 0 0 5px; } @media (min-width: 768px) { .about-honor-qrcode{ padding: 50px 0; } .about-honor-qrcode .col:nth-child(2){ margin: 0; } .about-honor-qrcode .qrcode-box{ display: block; } .about-honor-qrcode .qrcode-box .qrcode-img{ margin: 0 0 15px; width: 100px; } .about-honor-qrcode .qrcode-box .qrcode-info .sn{ line-height: 26px; } .about-honor-qrcode .qrcode-box .qrcode-info .title{ line-height: 26px; padding: 0; } } @media (min-width: 1200px) { .about-honor-qrcode .qrcode-box{ display: flex; } .about-honor-qrcode .qrcode-box .qrcode-img{ margin: 0 30px 0 0; } } @media (min-width: 1400px) { .about-honor-qrcode .qrcode-box .qrcode-img{ width: 140px; } .about-honor-qrcode .qrcode-box .qrcode-info .sn{ line-height: 40px; font-size: 16px; } .about-honor-qrcode .qrcode-box .qrcode-info .title{ line-height: 40px; font-size: 16px; padding: 0 0 5px; } } @media (min-width: 1600px) { .about-honor-qrcode .qrcode-box .qrcode-img{ width: 156px; } } .honor-img{ width: 100%; margin: 0 auto; max-width: 1320px; } .honor-img img{ display: block; width: 100%; } .honor-img .row{ margin: 0 -7.5px; } .honor-img .row .col{ padding: 0 7.5px; margin: 15px 0 0; } .honor-img .row .col a{ display: block; position: relative; overflow: hidden; } .honor-img .row .col a:hover .model{ bottom: 0; } .honor-img .row .col a .model{ position: absolute; bottom: -100px; left: 0; right: 0; display: flex; justify-content: center; transition: all 0.3s ease; } .honor-img .row .col a .model p{ background: #ffdb3f; line-height: 40px; padding: 0 20px; font-size: 12px; border-radius: 15px 15px 0 0; } @media (min-width: 992px) { .honor-img .row .col{ margin: 30px 0 0; } } @media (min-width: 992px) { .honor-img .row{ margin: 0 -15px; } .honor-img .row .col{ padding: 0 15px; margin: 50px 0 0; } .honor-img .row .col a .model p{ font-size: 14px; line-height: 50px; } } .index-banner{ width: 100%; position: relative; } .index-banner .swiper.pc{ width: 100%; height: 100%; display: none; } .index-banner .swiper.wap{ display: block; } .index-banner .swiper.pc .swiper-slide{ background-size: cover; background-position: center center; background-repeat: no-repeat; } .index-banner .swiper.pc .swiper-slide a{ display: block; width: 100%; height: 100%; } .index-banner .swiper.wap .swiper-slide img{ width: 100%; } @media (min-width: 992px) { .index-banner{ height: 100vh; } .index-banner .swiper.pc{ display: block; } .index-banner .swiper.wap{ display: none; } } .index-header{ width: 100%; top: 0; left: 0; padding: 10px 0; z-index: 9999; overflow: hidden; position: absolute; } .index-header.collapsed{ position: fixed; background: #ffffff; padding: 10px 0; transition: color 0.3s ease; box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.3); } .index-header .container-fluid{ display: flex; align-items: center; } .index-header h1.logo{ height: 30px; overflow: hidden; margin: 0; } .index-header h1.logo img{ height: 30px; display: block; } .index-header .menu{ width: 40px; height: 40px; margin-left: auto; background: #ffdb3f; border-radius: 50%; display: block; display: flex; justify-content: center; align-items: center; font-size: 1.6rem; } @media (min-width: 768px) { .index-header{ padding: 30px 0 0; } .index-header.collapsed{ padding: 20px 0; } .index-header h1.logo{ height: 36px; } .index-header h1.logo img{ height: 36px; } } @media (min-width: 992px) { .index-header h1.logo{ height: 40px; } .index-header h1.logo img{ height: 40px; } .index-header{ padding: 100px 0; } .index-header.collapsed{ padding: 30px 0; height: auto; } } .index-about{ width: 100%; margin: 0 auto; padding: 40px 0; max-width: 1320px; } .index-about-title{ font-size: 16px; font-weight: 600; line-height: 20px; padding: 15px 0 0; margin: 0 0 40px; border-top: 1px solid #f2f2f3; position: relative; } .index-about-title::after{ content: ""; width: 100%; height: 1px; left: 0; top: 0; position: absolute; background: #424957; } .index-about-title a{ float: right; color: #414d64; } @media (min-width: 768px) { .index-about{ padding: 60px 0; } .index-about-title{ margin: 0 0 60px; } } @media (min-width: 992px) { .index-about{ padding: 80px 0; } .index-about-title{ margin: 0 0 80px; } } @media (min-width: 1400px) { .index-about{ padding: 100px 0; } .index-about-title{ margin: 0 0 100px; } } .index-about .video-box{ width: 100%; position: relative; } .index-about .video-box .video-js{ width: 100%; } .index-about .video-title h3{ font-size: 24px; font-weight: 600; margin: 0 0 30px; } .index-about .index-about-content{ font-size: 14px; line-height: 24px; margin: 30px 0 0; } .index-about .index-more{ display: flex; margin: 40px 0 0; } .index-about .index-more a{ display: block; position: relative; padding-left: 70px; } .index-about .index-more a span{ display: block; line-height: 30px; font-size: 14px; transition: all 0.3s ease; border-bottom: 2px solid #414d64; } .index-about .index-more a span b{ font-weight: normal; } .index-about .index-more a::after{ content: ""; width: 50px; height: 50px; left: 0; background: #ffdb3f; position: absolute; border-radius: 50%; top: 50%; margin-top: -25px; transition: all 0.3s ease; } .index-about .index-more a:hover{ padding-left: 50px; } .index-about .index-more a:hover span{ font-size: 16px; } .index-about .index-more a:hover::after{ width: 80px; height: 80px; z-index: -1; margin-top: -40px; } .index-about .row{ margin: 0; } .index-about .row .col{ padding: 0; } @media (min-width: 768px) { .index-about .row .col-lg-5{ padding-left: 40px; } .index-about .index-about-content{ margin: 0; } .index-about .row .col{ align-items: center; display: flex; } .index-about .video-title h3{ font-size: 28px; } } @media (min-width: 992px) { .index-about .video-title h3{ font-size: 32px; } } @media (min-width: 1400px) { .index-about .index-about-content{ font-size: 16px; line-height: 30px; } .index-about .row .col-lg-5{ padding-left: 80px; } .index-about .video-title h3{ font-size: 36px; } } .index-product{ width: 100%; padding: 40px 0 30px; position: relative; background: #b1c1ec; } .index-product .index-sample{ display: flex; line-height: 40px; font-size: 12px; margin: 0 0 60px; } .index-product .index-sample span{ text-align: center; background: #ffdb3f; color: #414d64; flex: 0 0 auto; padding: 0 10px; } .index-product .index-sample p{ flex: 0 0 auto; background: #414d64; text-align: center; color: #ffffff; padding: 0 15px; text-transform: uppercase; } .index-product .index-sample p b{ font-weight: normal; margin: 0 10px; } .index-product .index-sample a{ color: #ffffff; } .index-product .mySwiper .swiper-wrapper{ transition-delay:.3s; } .index-product .swiper-slide .dimg{ width: 100%; display: flex; justify-content: center; flex-flow: column; position: relative; } .index-product .swiper-slide .dimg::after{ content: ""attr(title)""; text-transform: uppercase; font-weight: bold; color: #c1cdf0; font-size: 80px; position: absolute; z-index: 1; display: flex; align-items: center; width: 100%; overflow: hidden; justify-content: center; transform:translateX(-300px); opacity:0; transition: all 0.4s ease; } .index-product .swiper-slide .dimg img{ display: block; width: 80%; z-index: 2; margin: 0 auto; background: rgba(255, 255, 255, 0.5); border-radius: 50%; position: relative; } .index-product .swiper-slide.ani-slide .dimg::after{ transform:translateX(0); opacity:1; } .index-product .swiper-slide .info{ width: 100%; margin: 0 auto; color: #ffffff; font-size: 14px; line-height: 24px; max-width: 1320px; position: relative; padding: 0 0 30px; } .index-product .swiper-slide .info .line{ display: none; } .index-product .swiper-slide .info p{ margin: 15px 0 45px; transform:translateY(300px); opacity:0; transition: all 0.3s ease; } .index-product .swiper-slide .info a{ display: inline-block; padding-left: 70px; position: relative; transform:translateY(300px); opacity:0; transition: all 0.3s ease; } .index-product .swiper-slide.ani-slide .info p, .index-product .swiper-slide.ani-slide .info a{ transform:translateY(0px); opacity:1; } .index-product .swiper-slide .info a::after{ content: ""; width: 50px; height: 50px; left: 0; background: #ffdb3f; position: absolute; border-radius: 50%; top: 50%; margin-top: -25px; transition: all 0.3s ease; } .index-product .swiper-slide .info a:hover::after{ width: 80px; height: 80px; z-index: -1; margin-top: -40px; } .index-product .swiper-slide .info a:hover{ padding-left: 45px; font-size: 16px; } .index-product .swiper-slide .info a span{ color: #ffffff; display: inline-block; line-height: 30px; border-bottom: 2px solid #ffffff; } .index-product .mySwiper1 .swiper-slide img{ display: block; width: 100%; opacity: 0.7; cursor: pointer; } .index-product .mySwiper1 .swiper-slide-thumb-active img{ opacity: 1; } @media (min-width: 550px) { .index-product .swiper-slide .dimg img{ width: 70%; } } @media (min-width: 768px) { .index-product{ padding: 60px 0 50px; } .index-product .swiper-slide .dimg img{ width: 60%; } .index-product .index-sample{ font-size: 14px; } } @media (min-width: 992px) { .index-product{ height: 700px; padding: 80px 0 70px; } .index-product .index-sample{ position: absolute; left: 0; font-size: 16px; line-height: 50px; z-index: 98; } .index-product .swiper-slide .dimg{ width: 100%; height: 100%; position: absolute; } .index-product .swiper-slide .dimg img{ width: 40%; } .index-product .swiper0 .container-fluid, .index-product .swiper0 .container-fluid .info{ height: 100%; } .index-product .swiper0 .container-fluid .info{ display: flex; flex-flow: column; justify-content: flex-end; } .index-product .swiper1{ right: 6.25%; top: 70px; bottom: 70px; width: 100px; padding: 0; position: absolute; z-index: 100; } .index-product .swiper1 .swiper{ height: 100%; width: 100%; } .index-product .swiper1 .swiper .swiper-slide{ display: flex; align-items: center; } .index-product .swiper0{ width: 100%; height: 100%; } .index-product .swiper-slide .info .line{ width: 2px; height: 0; display: block; margin-left: 15px; z-index: 2; position: relativee; background: #ffffff; transition: all 0.3s ease; } .index-product .swiper-slide.ani-slide .info .line{ height: 80px; } } @media (min-width: 1200px) { .index-product{ height: 960px; padding: 100px 0 90px; } .index-product .index-sample{ line-height: 60px; } .index-product .index-sample span{ width: 100px; } .index-product .index-sample p{ width: 420px; } .index-product .swiper-slide .dimg img{ width: 45%; } .index-product .swiper1{ top: 200px; bottom: 200px; } } @media (min-width: 1600px) { .index-product .swiper-slide .dimg img{ width: 36%; } } @media (min-width: 1920px) { .index-product .swiper-slide .dimg img{ width: auto; max-height: 100%; } } .index-apply{ width: 100%; max-width: 1320px; margin: 0 auto; padding: 40px 0; } .index-apply .pimg{ margin: 0 0 40px; } .index-apply .pimg img{ display: block; width: 100%; } .index-apply .ptext{ max-width: 500px; margin-left: auto; } .index-apply .ptext h3{ font-size: 16px; font-weight: normal; line-height: 20px; } .index-apply .ptext .more{ line-height: 28px; display: flex; border-bottom: 1px solid #a0a6b1; } .index-apply .ptext .more a{ display: block; width: 100%; margin-left: auto; padding: 15px 0; background: url(../images/more.jpg) no-repeat center right; } .index-apply .ptext .more a:hover{ padding: 15px; color: #01aae5; font-weight: bold; } @media (min-width: 768px) { .index-apply{ padding: 60px 0; } .index-apply .pimg{ margin: 0 0 60px; } } @media (min-width: 992px) { .index-apply .ptext{ max-width: 700px; } .index-apply{ padding: 80px 0; } .index-apply .ptext h3{ font-size: 20px; } .index-apply .pimg{ margin: 0 0 80px; } .index-apply .ptext .more a{ padding: 22px 0; } .index-apply .ptext .more a:hover{ padding: 22px 15px; } } @media (min-width: 1400px) { .index-apply{ padding: 100px 0; } } .index-partner{ padding: 50px 15px; background: url(../images/index-partner.jpg); background-size: cover; } .index-partner-box{ width: 100%; max-width: 1320px; margin: 0 auto; } .index-partner-box .about-number{ padding: 0 0 30px; } .index-partner-box .partner-list{ display: flex; flex-wrap: wrap; } .index-partner-box .partner-list{ margin: 0 -7.5px; } .index-partner-box .partner-list div.img{ padding: 0 7.5px; width: 33.33333%; margin: 0 0 15px; } .index-partner-box .partner-list div.img img{ display: block; width: 100%; transition: all 0.3s ease; cursor: pointer; } .index-partner-box .partner-list div.img div{ overflow: hidden; } .index-partner-box .partner-list div.img img:hover{ transform: scale(1.3); } @media (min-width: 768px) { .index-partner{ padding: 80px 6.25%; } .index-partner-box .about-number{ padding: 0 0 50px; } .index-partner-box .partner-list div.img{ width: 20%; } .index-partner-box .partner-list div.img:nth-child(16), .index-partner-box .partner-list div.img:nth-child(17), .index-partner-box .partner-list div.img:nth-child(18){ display: none; } } @media (min-width: 992px) { .index-partner{ padding: 100px 6.25%; } .index-partner-box .about-number{ padding: 0 0 70px; } .index-partner-box .partner-list div.img{ width: 16.66666%; } .index-partner-box .partner-list div.img:nth-child(16), .index-partner-box .partner-list div.img:nth-child(17), .index-partner-box .partner-list div.img:nth-child(18){ display: block; } } @media (min-width: 1200px) { .index-partner{ padding: 120px 6.25%; } .index-partner-box .partner-list div.img{ width: 12.5%; } .index-partner-box .partner-list div.img:nth-child(17), .index-partner-box .partner-list div.img:nth-child(18){ display: none; } } @media (min-width: 1400px) { .index-partner{ padding: 150px 6.25%; } .index-partner-box .about-number{ padding: 0 0 90px; } } @media (min-width: 1600px) { .index-partner{ padding: 180px 6.25%; } } @media (min-width: 1920px) { .index-partner{ padding: 200px 6.25%; } } .index-news{ padding: 40px 15px 60px; background: url(../images/bg1.jpg) no-repeat center bottom #f8f8f8; } .index-news-box{ max-width: 1320px; margin: 0 auto; } .index-news-title a{ display: inline-block; padding-left: 70px; position: relative; z-index: 2; font-size: 14px; } .index-news-title a::after{ content: ""; width: 50px; height: 50px; left: 0; background: #ffdb3f; position: absolute; border-radius: 50%; top: 50%; margin-top: -25px; transition: all 0.3s ease; } .index-news-title a:hover::after{ width: 75px; height: 75px; z-index: -1; margin-top: -35px; } .index-news-title a:hover{ padding-left: 45px; font-size: 16px; } .index-news-title a span{ display: inline-block; line-height: 30px; border-bottom: 2px solid #191919; } .index-news-title h3{ font-size: 16px; font-weight: 600; margin: 0; } .index-news-title p{ font-size: 14px; margin: 30px 0; } .index-news-list{ margin: 40px 0 0; border-top: 1px solid #e3e3e3; } .index-news-list ul li{ padding: 20px 0; border-bottom: 1px solid #e3e3e3; } .index-news-list ul li .title{ font-size: 14px; line-height: 24px; margin: 8px 0 0; } .index-news-list ul li .date{ font-size: 14px; color: #5c5c5c; line-height: 20px; } .index-news-list ul li .more{ display: none; } .index-news-list ul li:hover a{ text-decoration: underline; color: #01aae5; font-weight: bold; } .index-news-list ul li:hover .date{ font-weight: bold; } @media (min-width: 768px) { .index-news{ padding: 60px 6.25%; } .index-news-box{ display: flex; } .index-news-box .index-news-title{ width: 166px; flex: 0 0 auto; } .index-news-title h3{ font-size: 20px; } .index-news-title p{ margin: 70px 0; } .index-news-list{ margin: 0; width: 100%; margin-left: 75px; } .index-news-list ul li{ padding: 30px 0; } } @media (min-width: 992px) { .index-news{ padding: 80px 6.25%; } .index-news-list ul li{ padding: 40px 0; } } @media (min-width: 1200px) { .index-news-list ul li{ padding: 64px 0; display: flex; } .index-news-list ul li .title{ margin: 0; line-height: 30px; } .index-news-list ul li .date{ line-height: 30px; margin-right: 80px; } .index-news-list ul li .more{ display: block; line-height: 30px; margin-left: auto; } .index-news-list ul li .more i{ font-weight: bold; font-size: 20px; } .index-news-list{ margin-left: 120px; } } @media (min-width: 1400px) { .index-news{ padding: 100px 6.25%; } .index-news-list{ margin-left: 150px; } } @media (min-width: 450px) { .index-product .swiper-slide .dimg::after{ font-size: 90px; } } @media (min-width: 550px) { .index-product .swiper-slide .dimg::after{ font-size: 110px; } } @media (min-width: 650px) { .index-product .swiper-slide .dimg::after{ font-size: 130px; } } @media (min-width: 750px) { .index-product .swiper-slide .dimg::after{ font-size: 150px; } } @media (min-width: 850px) { .index-product .swiper-slide .dimg::after{ font-size: 170px; } } @media (min-width: 950px) { .index-product .swiper-slide .dimg::after{ font-size: 190px; } } @media (min-width: 1050px) { .index-product .swiper-slide .dimg::after{ font-size: 210px; } } @media (min-width: 1150px) { .index-product .swiper-slide .dimg::after{ font-size: 230px; } } @media (min-width: 1250px) { .index-product .swiper-slide .dimg::after{ font-size: 250px; } } @media (min-width: 1350px) { .index-product .swiper-slide .dimg::after{ font-size: 270px; } } @media (min-width: 1450px) { .index-product .swiper-slide .dimg::after{ font-size: 290px; } } @media (min-width: 1550px) { .index-product .swiper-slide .dimg::after{ font-size: 310px; } } @media (min-width: 1650px) { .index-product .swiper-slide .dimg::after{ font-size: 330px; } } @media (min-width: 1750px) { .index-product .swiper-slide .dimg::after{ font-size: 350px; } } @media (min-width: 1850px) { .index-product .swiper-slide .dimg::after{ font-size: 370px; } } @media (min-width: 1900px) { .index-product .swiper-slide .dimg::after{ font-size: 400px; } } .footer{ width: 100%; max-width: 1320px; margin: 0 auto; padding: 40px 0 20px; } .footer-copyright{ font-size: 12px; line-height: 20px; text-align: center; } .footer-copyright a{ display: inline-block; } .footer-logo{ margin: 0 0 20px; } .footer-logo img{ display: block; height: 42px; } .footer-email{ font-size: 14px; } .footer-email h4{ font-size: 16px; font-weight: 600; margin: 10px 0; } .footer-email a{ width: 240px; display: flex; height: 40px; border-radius: 15px; justify-content: center; align-items: center; border: 2px solid #e5e5e5; color: #353c4b; } .footer-email a i{ font-size: 20px; margin-left: 10px; color: #353c4b; } .footer-tel{ margin: 30px 0 20px; font-size: 14px; } .footer-tel p{ font-size: 12px; } .footer-tel a{ font-size: 20px; font-weight: bold; } .footer-nav{ display: none; } @media (min-width: 550px) { .footer-email h4{ margin: 10px 0 20px; } .footer-text{ display: flex; margin: 30px 0; } .footer-tel{ margin: 0; margin-left: auto; } } @media (min-width: 768px) { .footer{ padding: 80px 0 30px; } .footer-email h4{ margin: 10px 0 30px; } .footer-text{ display: flex; margin: 40px 0 60px; } } @media (min-width: 992px) { .footer{ padding: 100px 0 40px; } .footer-text{ display: block; margin: 60px 0 60px; } .footer-email{ display: flex; } .footer-email a{ position: relative; margin-left: 50px; } .footer-logo img{ margin: 0 auto; } .footer-nav{ margin: 40px 0 0; display: flex; } .footer-nav dl:nth-child(1), .footer-nav dl:nth-child(2){ flex: 0 0 auto; margin-right: 80px; } .footer-nav dl:nth-child(3) dd{ display: flex; flex-flow: wrap; } .footer-nav dl:nth-child(3) dd div{ width: 33.3333%; line-height: 24px; } .footer-nav dl:nth-child(3) dd div:nth-child(8){ width: 66.6667%; } .footer-nav dt{ font-weight: 600; font-size: 14px; line-height: 30px; } .footer-nav dt a{ color: #5c5c5c; } .footer-nav dd{ margin: 5px 0 0; font-size: 12px; line-height: 24px; } .footer-nav dd a{ color: #969696; } .footer-nav dd a:hover, .footer-nav dt a:hover{ color: #01aae5; text-decoration: underline; } .footer-copyright{ text-align: right; } } @media (min-width: 1200px) { .footer-layout{ display: flex; margin: 0 0 60px; } .footer-text{ margin: 0; } .footer-logo{ flex: 0 0 auto; margin-right: 100px; } .footer-nav dl:nth-child(1), .footer-nav dl:nth-child(2){ margin-right: 50px; } .footer-nav{ margin: 120px 0 0; } .footer-email h4{ margin: 10px 0 40px; } .footer-email a:after{ content: ""; width: 588px; height: 228px; position: absolute; top: 0; background: url(../images/footer-img.jpg) no-repeat center; left: 340px; } .footer-email a:hover{ background: #01aae5; border-color: #01aae5; color: #ffffff; } .footer-email a:hover i{ color: #ffffff; } } @media (min-width: 1400px) { .footer-logo{ margin-right: 200px; } .footer-nav dl:nth-child(1), .footer-nav dl:nth-child(2){ margin-right: 80px; } } @media (min-width: 1500px) { .footer-nav dl:nth-child(1), .footer-nav dl:nth-child(2){ margin-right: 100px; } } @media (min-width: 1600px) { .footer-nav dl:nth-child(1), .footer-nav dl:nth-child(2){ margin-right: 120px; } } @media (min-width: 1800px) { .footer-email a:after{ left: 410px; } } .index-menu{ position: fixed; left: 0; right: 0; top: 0; display: none; bottom: 0; z-index: 9999; background: #353c4b; transition: all 0.3s ease; } .index-menu .row{ margin: 0 -6px; height: 100%; } .index-menu .row .col{ padding: 0 6px; height: 100%; } .index-menu .row .col .menu{ height: 100%; overflow: hidden; display: flex; right: -110%; position: relative; flex-flow: column; background: #353c4b; transition: all 0.5s ease; } .index-menu .row .col .menu img{ margin-top: auto; width: 100%; display: block; } .index-menu .menu-box{ display: flex; height: 100%; flex-flow: column; } .index-menu .menu-box .top{ width: 100%; flex: 1; left: -110%; position: relative; transition: all 0.3s ease; background: url(../images/menu-bg1.jpg) no-repeat right bottom #ffffff; } .index-menu.active .menu-box .top{ left: 0; text-transform: uppercase; } .index-menu.active .menu-box .bottom .right, .index-menu.active .menu-box .bottom .left{ bottom: 0; } .index-menu.active .row .col .menu{ right: 0; } .index-menu .menu-box .bottom{ width: 100%; height: 200px; flex: 0 0 auto; margin-top: 12px; display: flex; } .index-menu .menu-box .bottom .right{ width: 229px; height: 200px; flex: 0 0 auto; bottom: -110%; transition: all 0.8s ease; position: relative; background: url(../images/menu-bg3.jpg) no-repeat center; } .index-menu .menu-box .bottom .left{ flex: 1; margin-right: 12px; bottom: -110%; transition: all 0.7s ease; position: relative; background: url(../images/menu-bg2.jpg) no-repeat right center #ffffff; } .index-menu-header{ position: fixed; left: 0; right: 0; z-index: 9; padding: 10px 0; } .index-menu-header.collapsed{ padding: 10px 0; height: 60px; } .index-menu-header .container-fluid{ display: flex; align-items: center; } .index-menu.active .index-menu-header .logo img{ opacity: 1; } .index-menu-header .logo img { height: 30px; opacity: 0; transition: all 0.3s ease; display: block; } .index-menu-header .menu { width: 40px; height: 40px; margin-left: auto; background: #ffdb3f; border-radius: 50%; display: block; display: flex; justify-content: center; align-items: center; font-size: 1.6rem; } @media (min-width: 768px) { .index-menu-header{ padding: 30px 0 0; } .index-menu-header .logo img { height: 36px; } } @media (min-width: 992px) { .index-menu-header .logo img { height: 40px; } .index-menu-header{ padding: 100px 0; } .index-menu-header.collapsed{ padding: 20px 0; height: 80px; } } .index-menu .top{ padding: 100px 0 0; } .index-menu .link{ font-size: 12px; font-weight: bold; text-align: right; padding-right: 50px; line-height: 20px; z-index: 10; margin: 40px 0 0; position: relative; } .index-menu .link span{ color: #9da1a9; } .index-menu .link b{ margin: 0 5px; } .index-menu .list{ display: flex; position: relative; z-index: 10; margin: 50px 0 0; padding-left: 8.35073%; } .index-menu .list .item{ margin-left: 100px; } .index-menu .list .item ul li{ margin: 0 0 40px; line-height: 30px; } .index-menu .list .item ul li>a{ font-size: 16px; font-weight: 600; } .index-menu .list .item ul li p{ font-size: 14px; padding-left: 1px; } .index-menu .list .item ul li p a{ color: #353c4b; } @media (min-width: 992px) { .index-menu .link{ padding-right: 150px; } } @media (min-width: 1600px) { .index-menu .list .item{ margin-left: 180px; } } @media (max-width: 767px) { .index-menu .menu-box{ width: 100%; flex: 0 0 100%; max-width: 100%; } .index-menu .col-3{ display: none; } .index-menu .menu-box .bottom{ display: none; } .index-menu .menu-box .top{ background: url(../images/menu-bg4.jpg) no-repeat right bottom #ffffff; background-size: auto 50%; transition: all 0.4s ease; padding: 100px 15px 0; } .index-menu .link{ padding: 0; margin: 0; text-align: left; } .index-menu .list{ margin: 50px 0 0; padding: 0; justify-content: center; } .index-menu .list .item{ margin: 0; margin: 0 30px; } .index-menu .list .item ul li{ margin: 0 0 30px; } } .menu .span{ width: 20px; } .menu .span span{ width: 100%; height: 2px; display: block; margin: 1.5px 0; float: right; border-radius: 1px; background: #353c4b; animation: arrow1 1.5s ease-in-out infinite; -webkit-animation: arrow1 1.5s ease-in-out infinite; } .menu .span span:nth-child(even){ width: 60%; animation: arrow 1.5s ease-in-out infinite; -webkit-animation: arrow 1.5s ease-in-out infinite; } @keyframes arrow1{ 0%, 100%{ width: 100%; } 50%{ width: 60%; } } @keyframes arrow{ 0%, 100%{ width: 60%; } 50%{ width: 100%; } } .index-header{ background: none; } .index-header .nav-list, .index-header .lang-list{ display: none; } @media (min-width: 768px) { .index-header.collapsed .menu{ display: none; } .index-header.collapsed .nav-list, .index-header.collapsed .lang-list{ display: flex; } }