header{ position: absolute; top: 0; left: 0; height: 100px; line-height: 100px; width: 100%; padding: 0 45px; z-index: 999; background-color: #ffffff; } .logo{ width: 225px; float: left; position: absolute; z-index: 222; } nav{ width: 100%; font-size: 17px; height: inherit; line-height: inherit; } nav>ul{ text-align: right; } nav>ul>li{ padding: 0 7px; display: inline-block; } nav a{ transition: linear color 0.2s; -webkit-transition: linear color 0.2s; padding: 0 10px } nav li.actived>a, nav a:hover, .dropdown-menu-items li a.moreLink{ color: #D71718; } nav>ul>li:first-child{ padding-left: 0; } nav>ul>li.tel{ margin-left: 50px; padding-right: 0; } nav>ul>li.tel>a{ width: 250px; height: 40px; color: #111; line-height: 36px; text-align: center; display: inline-block; border-radius: 5px; border: 2px solid #111; } .dropdown-menu{ display: none; position: absolute; top: 100%; left: 0; width: 100%; height: 300px; background-color: #f5f5f5; box-shadow: 0 -3px 3px #e0e0e0; } .dropdown-menu-left{ display:none; color:#111; padding: 50px calc(3% - 25px); width: calc(30% - 100px); float: left; line-height: 20px; position: relative; } .dropdown-menu-left h4{ font-weight: 400; margin-top: 30px; margin-bottom: 30px; } .dropdown-menu-left p{ width: 160px; font-size: 13px; } .dropdown-menu-right{ /*padding: 50px calc(3% - 25px);*/ padding: 50px 0; padding-bottom: 0; width: 1360px; max-width:100%; margin:0 auto; /* background-color: rgba(0, 0, 0, 0.5); */ } @media screen and (max-width: 1260px){ } .dropdown-menu-items{ position: relative; padding: 0 4px; width: 14.28%; min-height: 150px; float: left; line-height: 25px; text-align: left; font-size: 13px; margin-bottom: 40px; } .dropdown-menu-items>p{ font-size: 19px; margin-bottom: 10px; white-space: nowrap; } .dropdown-menu-items ul{ width: 100%; } .container{ /* width: 1350px; */ width: 1100px; max-width: 100%; margin: auto; padding: 0 15px; } .container:before{ content: ''; display: table; clear: both; } .container:after{ content: ''; display: table; clear: both; } .section-banner{ width: 100%; /*height: 100vh;*/ position: relative; /*background-repeat: no-repeat; background-position: center; background-size: cover;*/ } .disabled{ pointer-events: none; } .third-nav{ display: none; position: absolute; width: 100%; height: auto; line-height: 20px; background-color: rgba(0, 0, 0, 0.17); top: 100%; left: 0; color: #9a9a9a; font-size: 14px; line-height: 28px; padding: 30px 0; } .third-nav a{ color: #9a9a9a; transition: linear color 0.2s; -webkit-transition: linear color 0.2s; } .third-nav a:hover{ color: #fff; } .swiper-box{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1350px; height: 100%; max-width: 100%; padding: 0 15px; font-size: 18px; margin: auto; letter-spacing: 1px; color: #fff; display: -webkit-flex; display: flex; /*-webkit-box-pack: center;*/ /*-ms-flex-pack: center;*/ /*-webkit-justify-content: center;*/ /*justify-content: center;*/ -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .swiper-box h2{ font-size: 56px; font-weight: 400; letter-spacing: 3px; margin-top: 90px; margin-bottom: 40px; } .swiper-box .link-btn{ display: inline-block; margin-top: 90px; width: 281px; height: 64px; background-color: #D71718; color: #fff; border-radius: 5px; text-align: center; line-height: 64px; font-size: 15px; } .swiper-box .link-btn:hover{ display: inline-block; margin-top: 90px; width: 281px; height: 64px; background-color: #fff; color: #000; border-radius: 5px; text-align: center; line-height: 64px; font-size: 15px; } .section-banner .swiper-container{ max-width: 100%; /*height: 100%;*/ } .section-banner .swiper-pagination-bullet-active{ background: #ffffff; } .section-banner .swiper-pagination-bullet { width: 13px; height: 13px; } .pd-100{ padding: 100px 0; } .page-item{ width: 100%; /*height: 517px;*/ line-height: 33px; padding: 100px 0; color: #fff; font-size: 22px; text-align: center; background-position: center; background-size: cover; background-repeat: no-repeat; } .page-item h3{ font-size: 36px; margin-bottom: 28px; } .cooperation-grid{ width: 25%; float: left; text-align: center; padding: 15px; } .section-title{ color: #000; font-weight: 700; font-size: 33px; text-align: center; letter-spacing: 2px; position: relative; margin-top: 80px; margin-bottom: 80px; } .section-title em{ font-size: 15px; color: #929292; font-style: normal; font-weight: 400; } .section-title:after{ content: ''; display: table; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 25px; height: 2px; background-color: #D71718; } .section-title-large{ font-size: 60px; text-align: left; margin-bottom: 50px; } .section-title-large:after{ content: ''; display: table; position: absolute; bottom: -20px; left: 0; width: 25px; height: 2px; transform: none; background-color: #D71718; } .solution-block{ position: relative; width: 20%; float: left; /*height: 840px;*/ height: calc(100vh - 202px); transition: linear background-color 0.2s; -webkit-transition: linear background-color 0.2s; } .solution-grid{ position: absolute; top: 50%; left: 50%; color: #939393; font-size: 16px; text-align: center; width: 208px; height: 300px; transform: translate(-50%,-50%); transition: ease-out all 0.3s; -webkit-transition: ease-out all 0.3s; } .solution-grid>span{ display: inline-block; width: 139px; height: 139px; padding: 34px; border: 1px solid #939393; border-radius: 50%; transition: linear all 0.2s; -webkit-transition: linear all 0.2s; } .solution-grid>h4{ position: relative; font-size: 28px; font-weight: 400; line-height: 55px; } .solution-grid>h3{ font-weight: 400; font-size: 20px; opacity: 1; margin-bottom: 10px; transition: linear opacity 0.1s; -webkit-transition: linear opacity 0.1s; } .solution-grid>h4:before{ content: ''; opacity: 0; transition: linear opacity 0.2s; -webkit-transition: linear opacity 0.2s; position: absolute; display: block; width: 50px; height: 1px; background-color: #ddd; left: -25px; top: 55%; } .solution-grid>h4:after{ content: ''; opacity: 0; transition: linear opacity 0.2s; -webkit-transition: linear opacity 0.2s; position: absolute; display: block; width: 50px; height: 1px; background-color: #ddd; right: -25px; top: 55%; } .solution-grid>.solution-more{ opacity: 0; width: 170px; height: 42px; line-height: 40px; text-align: center; border: 1px solid #fff; border-radius: 5px; color: #fff; display: inline-block; margin-top: 40px; background-color: #E22D2E; } .solution-grid>p{ text-align: left; line-height: 25px; opacity: 0; transition: linear opacity 0.25s; -webkit-transition: linear opacity 0.25s; } .section-news{ width: 100%; /*height: 100vh;*/ } .news-all{ width: 40%; height: 100%; float: left; text-align: left; font-size: 18px; } .news-all .news-all-box{ width: 400px; max-width: 100%; padding: 0 15px; } .link-btn { display: inline-block; width: 170px; height: 40px; background-color: #D71718; color: #fff; border-radius: 5px; text-align: center; line-height: 40px; font-size: 15px; -webkit-transition: all .3s cubic-bezier(0, 0, 0, 0.48); -moz-transition: all .3s ease; transition: all .3s ease; } .link-btn:hover{ -webkit-transition: all .3s cubic-bezier(0, 0, 0, 0.48); -moz-transition: all .3s ease; transition: all .3s ease; background-color: #F4F4F4; color: #000; } .news-list{ width: 60%; height: 880px; float: left; text-align: left; font-size: 18px; background-color: #F4F4F4; } .news-list .section-title{ display: none; } .news-list-bg{ width: 33.3333333%; float: left; padding: 45px; overflow: hidden; transition: linear background-color 0.25s; -webkit-transition: linear background-color 0.25s; } .news-list-bg:hover{ background-color: #E22D2E; } /*6.12 add*/ .news-list-box{ position: relative; } .news-list-box>.more{ cursor: pointer; position: absolute; right: 100%; margin-right: -75px; margin-top: 80px; top: 100%; color: #949494; transition: linear all 0.15s; -webkit-transition: linear all 0.15s; } .news-list-box>.more.moved{ right: 50%; margin-top: 150px; transition: linear all 0.15s; -webkit-transition: linear all 0.15s; } .news-list-box>.more>p{ opacity: 0; cursor: default; margin-bottom: 10px; } .news-list-box>.more>span{ opacity: 1; -webkit-transition: linear opacity 0.15s; } .news-list-box>.more.moved>p{ opacity: 1; } .news-list-box>.more.moved>span{ opacity: 0; } .news-list-box>.line{ position: absolute; width: 100%; height: 1px; background-color: #D9D9E0; bottom: -135px; left: 0; opacity: 0; transform: rotate(0deg); transition: linear all 0.15s; -webkit-transition: linear all 0.15s; } .news-list-box>.line.moved{ width: 100%; height: 1px; background-color: #D9D9E0; bottom: -135px; left: 0; opacity: 1; transform: rotate(-35deg); transition: linear all 0.15s; -webkit-transition: linear all 0.15s; } /*===*/ .news-list-box>h3{ font-size: 32px; font-weight: 400; } .news-list-box>span{ font-size: 12px; color: #848484; } .news-list-box>hr{ width: calc(100% + 45px); border-color: #D9D9E0; } .news-list-box>h4{ font-size: 18px; color: #3D3D3D; margin-bottom: 35px; line-height: 25px; font-weight: 400; } .news-list-box>a{ color: #848484; font-size: 16px; line-height: 25px; } .news-list-bg:hover .news-list-box>*{ color: #fff; } .news-list .link-btn { display: none; } .section-cooperation .swiper-pagination-bullet{ width: 13px; height: 13px; background: #393939; margin: 0 8px; } .section-cooperation .swiper-pagination-bullet-active { opacity: 1; background: #d71718; position: relative; } .section-cooperation .swiper-pagination-bullet-active:after{ content: ''; position: absolute; top: -3px; left: -3px; width: 19px; height: 19px; border-radius: 100%; border: 1px solid #d71718; } .contact-left{ /*width: 50%;*/ width:0; float: left; padding: 0 20px; display: none } .contact-right{ width: 50%; float: left; color: #363636; padding: 0 20px; text-align: center; } .contact-right .span1{ display: inline-block; width: 63px; height: 63px; background-color: #EBEAEA; line-height: 63px; text-align: center; border-radius: 50%; } .contact-right .span2{ display: inline-block; width: 30px; height: 30px; background-color: #EBEAEA; border-radius: 50%; line-height: 27px; text-align: center; } .contact-right h3{ font-size: 18px; font-weight: 400; margin-bottom: 18px; margin-top: 18px; } .download-banner{ position: relative; } .download-banner:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.67); } .download-banner>h2{ position: absolute; top: 60%; left: 50%; color: #fff; font-size: 38px; font-weight: 400; letter-spacing: 3px; transform: translate(-50%,-50%); } .download-block{ padding-bottom: 50px; margin-bottom: 100px; border-bottom: 2px solid rgba(244,244,246,1); } .download-info{ position: relative; width: 100%; padding-bottom: 50px; padding-left: 200px; line-height: 25px; } .download-info span{ position: absolute; left: 0; top: 0; } .download-info>h2{ color: #D71718; font-size: 18px; font-weight: bold; margin-bottom: 50px; } .download-block .downloadBtn { padding-left: 200px; } .download-block a.download-link{ display: inline-block; width: 170px; height: 40px; background-color: #D71718; line-height: 40px; text-align: center; color: #fff; border-radius: 5px; font-size: 16px; } @keyframes spanScal{ from{width: 100%;height: 100%;opacity: 1;} to{width: 600%;height: 600%;opacity: 0;} } .contact-map{ position: relative; } .contact-map .sign{ width: 15px; height: 15px; background-color: #D71718; border-radius: 50%; position: absolute; } .contact-map .sign>p{ display: none; } .contact-map .sign.actived:before{ content: ''; display: block; border-radius: 50%; width: 100%; height: 100%; background: #B92221; position: absolute; left: 50%; top: 50%; animation: spanScal 3s linear 1s infinite; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); } .contact-map .sign.actived:after{ content: ''; display: block; border-radius: 50%; width: 100%; height: 100%; background: #B92221; position: absolute; left: 50%; top: 50%; animation: spanScal 3s linear infinite; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); } .contact-map .sign-1{ top: 61%; left: 68%; } .contact-map .sign-2{ top: 82%; left: 72%; } .contact-map .sign-3{ top: 37%; left: 73%; } .contact-map .sign-4{ top: 58%; left: 84%; } .contact-map .sign-5{ top: 39%; left: 76%; } .contact-map .sign-6{ top: 64%; left: 49%; } .contact-map .sign-7{ top: 64%; left: 50%; } .contact-map .sign-8, .contact-map .city-8{ top: 59%; left: 85%; } .contact-map .sign-9, .contact-map .city-9{ top: 70%; left: 75%; } .contact-map .sign-10, .contact-map .city-10{ top: 70%; left: 67%; } .contact-map .sign-11, .contact-map .city-11{ top: 84%; left: 71%; } .contact-map .sign-12, .contact-map .city-12{ top: 48%; left: 51%; } .contact-map .sign-13{top: 54%;left: 68%;} .contact-map .sign-14{top: 42%;left: 70.5%;} .contact-map .sign-15{top: 30%;left: 83%;} .contact-map .sign-16{top: 54%;left: 60%;} .contact-map .sign-17{top: 46%;left: 55%;} .contact-map .sign-18{top: 45%;left: 75%;} .contact-map .sign-19{top: 45%;left: 65.5%;} .contact-map .sign-20{top: 58%;left: 76%;} .contact-map .sign-21{top: 70%;left: 67%;} .contact-map .sign-22{top: 33%;left: 20%;} .contact-map .sign-23{top: 70%;left: 74%;} .contact-map .sign-24{top: 81%;left: 62%;} .contact-map .sign-25{top: 64%;left: 58%;} .contact-map .sign-26{top: 80%;left: 46%;} .contact-map .sign-27{top: 73%;left: 57%;} .contact-map .sign-28{top: 56%;left: 20%;} .contact-map .sign-29{top: 64%;left: 82%;} .contact-map .sign-30{top: 54%;left: 80%;} footer, footer a{ color: #9a9a9a; font-size: 14px; transition: linear color 0.3s; } footer a:hover{ color: #444; } footer .container{ width: 1350px; } .footer-logo img{ max-width: 160px; } .footer-top{ padding: 100px 0; width: 100%; min-height: 440px; background-color: #e6e5e5; } .footer-top ul>li{ line-height: 30px; } .footer-top ul>li:first-child{ margin-bottom: 15px; } .footer-top ul>li:first-child>a{ font-weight: 700; color: #000; } .footer-block{ width: 20%; float: left; padding: 0 20px; } .footer-bottom{ /*padding-top: 43px; min-height: 230px;*/ background-color: #D71718; } .footer-bottom a{ color: #fff; } .copy-right{ /*margin-top: 20px;*/ border-top: 1px solid rgba(249, 249, 249, 0.49); height: 90px; color: #fff; text-align: center; } .scroll-top, .go-top { opacity: 0; position: fixed; cursor: pointer; bottom: 57px; right: 16px; z-index: 998; } .scroll-top span, .go-top span{ text-align: center; line-height: 62px; height: 62px; width: 62px; border-radius: 50%; display: block; background-color: #f7f7f7; } .bgFullItem{ height: auto; padding: 150px 20px; } .section-second{ padding-top: 50px; } /*@media (min-width: 1025px) and (min-height: 699px){ .full-height{ height: 100vh; padding: 0; } .solution-block, .section-cooperation .swiper-container, .contact-block{ height: calc(100vh - 202px); } .page-item{ height: 33.3333333%; }0 }*/ @media screen and (min-width: 1025px){ /* .swiper-slide-img{ background-image: none!important; }*/ } @media (max-width: 1024px){ .page-item{ height: auto; padding: 100px 0; } .section-second{ padding-top: 20px; } /* .section-banner{ height: calc(100vh - 58px); }*/ /* .swiper-slide-img{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .swiper-slide-img img{ display: none; }*/ } @media (max-height: 698px){ .page-item{ height: auto; padding: 80px 0; } /*.section-banner{ height: 100vh; }*/ .solution-block{ height: 600px; } .solution-grid{ width: 400px; max-width: 100%; padding: 0 15px; } .solution-grid>h4:before, .solution-grid>h4:after{ display: none; } } @media screen and (min-width: 1600px){ .news-list-bg{ height: 100%; display: flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: column; -ms-flex-direction: column; align-items: center; justify-content: center; -ms-flex-pack: center; } } @media screen and (max-width: 1599px){ .news-list-bg{ width: 100%; padding: 25px 45px; } } @media (min-width: 1024px) and (max-width: 1200px){ nav ul>li.tel{ margin-left: 0px; } nav ul>li.tel>a{ width: 200px; } } @media (min-width: 1024px){ .solution-block:hover{ background-color: #E22D2E; } .solution-block:hover .solution-grid{ color: #fff; /*height: calc(100vh - 250px);*/ margin-top: -70px; } .solution-block:hover .solution-grid>span{ border-color: #fff; background-color: #fff; } .solution-block:hover .solution-grid>h4:before, .solution-block:hover .solution-grid>h4:after, .solution-block:hover .solution-grid>.solution-more, .solution-block:hover .solution-grid>p{ opacity: 1; } .solution-block:hover .solution-grid>h3{ opacity: 0; } } @media screen and (max-width: 1023px){ .swiper-box h2{ margin: 10px 0; font-size: 25px; } .swiper-box .link-btn{ margin-top: 20px; width: 160px; height: 44px; line-height: 44px; } .swiper-button-prev, .swiper-button-next{ display: none; } .collapsed { position: absolute; right: 15px; top: 18px; width: 40px; text-align: center; cursor: pointer; display: block; float: right; } .collapsed span { display: block; width: 25px; height: 2px; margin: 5px auto; background-color: #111; } header{ height: 60px; line-height: 0; padding: 0 15px; } .logo{ width: auto; height: inherit; padding: 10px 0; } .logo img{ width: auto; height: 40px; } nav { font-size: 15px; } nav ul{ text-align: left; background-color: #f5f5f5; display: none; position: absolute; top: 100%; left: 0; width: 100%; padding-bottom: 20px; } nav ul>li{ display: block; width: 100%; line-height: 40px; padding: 0 15px!important; } nav ul>li.tel{ margin: 0; margin-top: 10px; margin-bottom: 10px; } .dropdown-menu{ padding: 0; position: relative; top: unset; left: unset; background-color: unset; box-shadow: none; overflow: unset !important; } .dropdown-menu-left{ display: none; } .dropdown-menu-right{ width: 100%; float: unset; padding: 0; min-height: unset; background-color: unset; } .dropdown-menu-items{ width: 100%; min-height: unset; margin-bottom: 0; } .dropdown-menu-items>p{ font-size: 13px; margin-bottom: 0; } .dropdown-menu-items>ul{ background-color: unset; display: block; position: relative; padding-bottom: 10px; } .dropdown-menu-items>ul>li{ line-height: 20px; } .dropdown-menu-items>ul>li>a{ font-size: 12px; } .page-item{ /*height: 500px;*/ } .section-news{ height: auto; } .section-title{ /*margin-top: 0;*/ margin-bottom: 50px; } .solution-block{ width: 100%; height: 480px; } .solution-grid{ top: 20px; transform: translate(-50%,0); } .solution-block *, .solution-grid>h4:before, .solution-grid>h4:after{ opacity: 1!important; } } @media screen and (min-width: 768px){ .news-all{ display: flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: column; -ms-flex-direction: column; align-items: center; justify-content: center; -ms-flex-pack: center; } .contact-right{margin-left:25%; } } @media screen and (max-width: 767px){ nav ul>li.tel>a{ width: 200px; } /*.section-banner{ height: 100vh; }*/ .page-item{ height: auto; padding: 80px 15px; } .contact-left{ width: 100%; margin-top: 450px; padding: 0; } .contact-right{ width: 100%; /* position: absolute;*/ top: 0; left: 0; padding: 0; } .section-news{ /*padding: 100px 0;*/ padding-bottom: 50px; height: auto; } .news-all{ display: none; } .news-list{ width: 100%; float: unset; background-color: #fff; } .news-list .section-title{ display: block; } .news-list .link-btn { display: inline-block; width: 170px; height: 40px; background-color: #D71718; color: #fff; border-radius: 5px; text-align: center; line-height: 40px; font-size: 15px; } .news-list-bg{ margin-bottom: 15px; padding: 45px 15px; } .section-cooperation{ padding: 0!important; } .section-cooperation .swiper-container{ padding-bottom: 50px!important; } .download-banner>h2{ font-size: 34px; } .download-block{ padding-bottom: 40px; margin-bottom: 40px; } .download-info span{ width: 50px; height: 50px; } .download-info{ padding-left: 80px; padding-bottom: 0; } .download-info>h2{ margin-bottom: 15px; } .download-block .downloadBtn { padding-left: 80px; } .download-block a.download-link{ margin-top: 20px; width: 170px; height: 40px; line-height: 40px; font-size: 15px; } .footer-empty{ display: none; } .footer-block{ width: 50%; min-height: 275px; } .footer-logo{ width: 100%; margin-bottom: 50px; min-height: 50px; } .footer-logo img{ width: 50%; } .cooperation-grid{ width: 33.33333333%; float: left; } .footer-top{ padding-bottom: 0; } } @media screen and (max-width: 1366px){ .solution-grid>h4:after{ display: none; } .solution-grid>h4:before{ display: none } } @media screen and (max-width: 1600px){ .news-list{ height: auto; min-height: 880px; } } @media screen and (min-width:991px){ #booNavigation ul{ max-width: 830px; float: right } #booNavigation ul li{ padding: 0; float: left; } } @media screen and (max-width: 767px){ .dropdown-menu{ height: auto!important; overflow: unset; } } @media screen and (min-width:991px){ .dropdown-menu-items li{ width: 100%; } } @media screen and (max-width: 500px){ .cooperation-grid{ width: 50%; } .swiper-box h2 { font-size: 16px; letter-spacing: 1px; margin-top: 0; } .swiper-box{ font-size: 13px; } .swiper-box .link-btn{ margin-top: 10px; width: 120px; height: 30px; font-size: 12px; line-height: 28px; } }