.body-wrap.white-bg{ background-color: #fff; } .website-banner{ width: 100%; height: 600px; position: relative; overflow: hidden; background-color: #333; } .website-banner .bg-box{ width: 100%; height: 100%; display: none; } .website-banner.active .bg-box{ display: block; } .website-banner .up-cont{ width: 78%; margin-top: 146px; color: #fff; position: absolute; left: 11%; top: 0; text-align: center; } .website-banner .up-cont .tit1{ font-size: 78px; line-height: 94px; } .website-banner .up-cont .line{ display: block; width: 50px; height: 4px; background-color: #fff; margin-top: 25px; } .website-banner .up-cont .tit2{ display: block; /*width: 60%; margin-top: 36px;*/ font-size: 34px; line-height: 50px; } .website-banner .up-cont .link-btn{ display: block; width: 182px; padding-left: 24px; line-height: 56px; color: #fff; border: 2px solid #fff; background: url(../img/ico_72.png) no-repeat 175px center; margin-top: 45px; font-size: 22px; font-family: "Base-font"; } .website-banner .up-cont .cent-list{ width: 720px; margin: 54px auto 0; text-align: left; color: #fff; } .website-banner .up-cont .cent-list ul{ width: 100%; } .website-banner .up-cont .cent-list li{ width: 180px; padding-left: 60px; position: relative; } .website-banner .up-cont .cent-list li .line-t{ display: inline-block; width: 1px; height: 98px; background-color: #fff; opacity: 0.15; position: absolute; right: 0; top: 5px; } .website-banner .up-cont .cent-list .tt{ font-size: 20px; line-height: 36px; } .website-banner .up-cont .cent-list .num{ font-size: 96px; line-height: 90px; font-family: "Trump"; } .website-banner .news-recom{ width: 100%; position: absolute; bottom: 0; left: 0; line-height: 50px; height: 50px; background-color: rgba(10,10,10,0.3); } .website-banner .news-recom .cent-wrap{ width: 74%; margin: 0 auto; position: relative; color: #fff; } .website-banner .news-recom .tit{ font-size: 14px; } .website-banner .news-recom .line{ display: inline-block; width: 1px; height: 16px; margin: 17px 20px 0 15px; background: #fff; opacity: 0.2; } .website-banner .news-recom .list{ width: 400px; } .website-banner .news-recom .list li a{ display: block; float: left; color: #fff; } .website-banner .news-recom .list li .stt{ font-size: 14px; } .website-banner .news-recom .list li{ height: 50px; } .website-banner .news-recom .list .date{ display: inline-block; margin-left: 24px; font-size: 12px; color: #fff; opacity: 0.5; } .website-banner .news-recom .list .btn{ display: block; width: 34px; height: 50px; cursor: pointer; position: absolute; top: 0; transition: all 0.3s ease 0s; } .website-banner .news-recom .list .prev{ right: 36px; background: url(../img/ico_75.png) no-repeat center; } .website-banner .news-recom .list .prev:hover{ background: url(../img/ico_75_h.png) no-repeat center; } .website-banner .news-recom .list .next{ right: 8px; background: url(../img/ico_76.png) no-repeat center; } .website-banner .news-recom .list .next:hover{ background: url(../img/ico_76_h.png) no-repeat center; } .website-column{ width: 100%; } .website-column ul{ width: 100%; } .website-column li{ width: 25%; position: relative; overflow: hidden; } .website-column li a{ display: block; width: 100%; color: #fff; } .website-column li img{ width: 101%; } .website-column li .up-cont{ position: absolute; width: 86%; padding: 0 7% 0; left: 0; top: 50%; margin-top: -90px; } .website-column li .tit{ font-size: 24px; line-height: 40px; color: #fff; } .website-column li .font{ display: block; line-height: 26px; font-size: 14px; color: #fff; margin-top: 12px; width: 59%; min-height: 110px; } .website-column li .font h2{ line-height: 26px; font-size: 14px; } .website-column li .font a{ display: inline-block; width: auto; } .website-column li .tit a{ display: inline-block; width: auto; } /*.website-column li.white .tit,.website-column li.white .font{ color: #555; }*/ .website-column li.white .more-ico{ border: 1px solid rgba(0,0,0,0.05); background: url(../img/ico_74.png) no-repeat center; } .website-column li .more-ico{ display: inline-block; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.05); background: url(../img/ico_73.png) no-repeat center; border-radius: 50%; margin-top: 30px; } .website-wrap .top-nav{ padding-top: 65px; } .website-wrap .top-nav h3{ text-align: center; } .website-wrap .top-nav .s-nav{ text-align: center; } .website-wrap .top-nav .s-nav ul{ display: inline-block; } .website-wrap .top-nav .s-nav li.tt{ margin-right: 32px; } .website-wrap .list-wrap{ margin-top: 42px; } .i-wrap .up-graybox .stit{ line-height: 26px; padding: 3px 0; margin-top: -29px; } .i-nine-wrap{ background: #fff; padding: 22px 0 50px; } .nine-wrap-list{ padding-top: 30px; position: relative; overflow: hidden; } .nine-wrap-list ul{ width: 102%; padding-bottom: 10px; } .nine-wrap-list li{ width: 31.5%; margin-right:1.75%; border: 1px solid #ececec; padding: 1.6%; transition:box-shadow 0.3s; box-sizing: border-box; } .nine-wrap-list li .pic{ width: 39.8%; overflow: hidden; position: relative; } .nine-wrap-list li .pic img{ width: 100%; } .nine-wrap-list li .con{ width: 100%; } .nine-wrap-list li h2{ font-size: 16px; color: #333; line-height: 22px; margin-bottom: 17px; } .nine-wrap-list li p{ font-size: 14px; color: #666; line-height: 22px; } .nine-wrap-list li .link-point { display:block; width: 24px; height: 8px; background: url(../img/ico_08.png) no-repeat center; margin-top:38px; } .i-nine-wrap .main-wrap { /*width: 82.8%;*/ width: 93.4%; margin: 0 auto; } .i-nine-wrap .top-titbox h4 { font-size: 24px; line-height: 40px; color: #333; font-weight: normal; } .i-nine-wrap .top-titbox .line { display: inline-block; width: 10px; height: 2px; background-color: #1c1c1c; margin-top: 8px; } .i-nine-wrap .top-titbox .font { display: block; line-height: 32px; margin-top: 10px; font-size: 16px; color: #666; } .i-nine-wrap .top-titbox .more { display: inline-block; line-height: 32px; margin-top: 60px; padding-left: 25px; background: url(../img/ico_09.png) no-repeat left center; font-size: 14px; } .nine-wrap-list.mobile-list{ display: none; padding-bottom: 48px; } .nine-wrap-list.mobile-list li{ margin-right: 0; } @media (min-width: 1200px) { .website-banner .up-cont .tit1, .website-banner .up-cont .line, .website-banner .up-cont .tit2, .website-banner .up-cont .cent-list{ opacity: 0; filter: alpha(opacity=0); transform: translateY(30px); } .website-column li img{ transform: translateZ(0px); transition: transform 0.3s ease 0s; } .website-column li:hover img{ transform: scale(1.1, 1.1); transition: transform 0.6s ease 0s; } .website-banner.active .up-cont .tit1 { opacity: 1; filter: alpha(opacity=100); transform: translateY(0); transition: 0.3s ease 0.2s; } .website-banner.active .up-cont .line { opacity: 1; filter: alpha(opacity=100); transform: translateY(0); transition: 0.3s ease 0.4s; } .website-banner.active .up-cont .tit2 { opacity: 1; filter: alpha(opacity=100); transform: translateY(0); transition: 0.3s ease 0.6s; } .website-banner.active .up-cont .cent-list { opacity: 1; filter: alpha(opacity=100); transform: translateY(0); transition: 0.3s ease 0.8s; } } @media (max-width: 1580px) { .website-banner .up-cont .tit2{ font-size: 40px; line-height: 58px; } .website-column li .tit{ font-size: 18px; line-height: 32px; } .website-column li .font{ width: 90%; font-size: 14px; margin-top: 4px; } .website-column li .more-ico{ margin-top: 20px; } .website-column li .up-cont{ margin-top: -80px; } } @media (max-width: 1400px) { .website-column li .font{ margin-top: 0; } .website-column li .up-cont{ margin-top: -70px; } } @media (max-width: 1300px) { .website-banner .up-cont{ width: 89%; left: 5.5%; } .website-column li .font{ line-height: 22px; min-height: 44px; } .website-column li .font h2{ line-height: 22px; } .website-banner .up-cont .tit1{ font-size: 50px; line-height: 72px; } .website-banner .up-cont .tit2{ font-size: 26px; line-height: 52px; } .website-banner .up-cont .link-btn{ border-width: 1px; width: 140px; padding-left: 15px; line-height: 42px; font-size: 16px; background: url(../img/ico_72.png) no-repeat 126px center; } } @media (max-width: 1050px) { .website-column li{ width: 50%; } .website-column li .tit{ font-size: 24px; line-height: 50px; } .new-float{ display: none; } .nine-wrap-list.pc-list{ display: none; } .nine-wrap-list.mobile-list { display: block; } .i-nine-wrap { padding: 22px 0 40px; } } @media (max-width: 900px) { .website-banner{ height: 500px; } .website-banner .up-cont .tit1{ font-size: 42px; } .website-banner .up-cont .tit2{ font-size: 26px; line-height: 48px; } .website-banner .up-cont{ margin-top: 120px; } .website-banner .news-recom{ display: none; } .website-banner .up-cont .cent-list{ width: 100%; } .website-banner .up-cont .cent-list li{ width: 33.3%; padding-left: 0; text-align: center; } .website-banner .up-cont .cent-list .num{ font-size: 68px; line-height: 76px; } } @media (max-width: 780px) { .website-column li .tit{ font-size: 20px; line-height: 30px; } .website-column li .up-cont{ margin-top: -60px; } .website-banner .up-cont .tit1{ /*font-size: 32px;*/ line-height: 60px; } } @media (max-width: 480px) { .website-column li{ width: 100%; } .website-banner .up-cont .tit1{ font-size: 30px; } .website-banner .up-cont .tit2{ font-size: 20px; line-height: 36px; } .website-column li .font,.website-column li .more-ico{ display: block; } .website-column li .font{ width: 100%; } .website-banner .up-cont .cent-list .tt{ font-size: 16px; line-height: 28px; } .website-banner .up-cont .cent-list .num{ font-size: 42px; line-height: 60px; } .website-column li .tit{ font-size: 20px; line-height: 44px; } .website-column li .up-cont{ margin-top: -70px; } .website-banner .up-cont .cent-list li .line-t{ height: 70px; } } .alert-contact-box{ width: 577px; height: 342px; background: url(../img/inviteBack1.png) no-repeat center; position: fixed; z-index: 10; left: 50%; margin-left: -288px; top: 50%; margin-top: -171px; display: none; text-align: center; line-height: 1.35; color: #fff; } .alert-contact-box .close{ display: block; width: 35px; height: 35px; position: absolute; right: 27px; top: 21px; cursor: pointer; } .alert-contact-box .word1{ font-size: 26px; margin-top: 50px; } .alert-contact-box .word2{ font-size: 48px; } .alert-contact-box .word3{ font-size: 13px; opacity: .8; } .alert-contact-box .tel{ position: relative; display: inline-block; font-size: 21px; padding: 0 10px; } .alert-contact-box .tel:before, .alert-contact-box .tel:after{ content: ''; display:block; width: 32px; height: 1px; background: #fff; opacity: .2; position: absolute; top: 50%; } .alert-contact-box .tel:before{ left: -32px; } .alert-contact-box .tel:after{ right: -32px; } .alert-contact-box .qqlink { display: block; width: 190px; height: 42px; margin: 35px auto 20px; cursor: pointer; color: #fff; background-color: #f98f1d; text-align: center; line-height: 42px; font-size: 18px; box-shadow: 0 3px 10px rgba(0,0,0,.15); } @media (max-width: 780px) { .alert-contact-box{ width: 96%; height: 250px; background: url(../img/inviteBack1.png) no-repeat center/100% 100%; position: fixed; z-index: 10; left: 50%; margin-left: -48%; top: 50%; margin-top: -125px; display: none; text-align: center; line-height: 1.35; color: #fff; } .alert-contact-box .close{ right:15px; top: 12px; } .alert-contact-box .word1{ font-size: 20px; margin-top: 20px; } .alert-contact-box .word2{ font-size: 38px; } .alert-contact-box .word3{ padding: 0 10px; } .alert-contact-box .tel{ font-size: 18px; } .alert-contact-box .qqlink { width: 160px; height: 40px; margin: 20px auto; line-height: 40px; font-size: 16px; } }