*{ margin:0; padding:0; } img{ display: inline-block; } .home-container { overflow-x: hidden; min-width: 1200px; line-height: 1.4; font-size: 14px; box-sizing: border-box; } .home-container *, .home-container:before, .home-container *:after { box-sizing: border-box; } .home-container .block, .home-container .block .bg, .home-container .swiper-slide { width: 100vw; height: 100vh; min-width: 1200px; overflow: hidden; background-position: 50% 50%; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; } .home-container .block { padding-top: 14vh; } .home-container .main-content { width: 1200px; margin: 0 auto; } .home-container .banner .swiper-slide { cursor: pointer; } .home-container .banner .swiper-slide img{ width:100%; height:100%; } /*.home-container .banner .swiper-slide.swiper-slide-01 {*/ /*background-image: ;*/ /*}*/ /*.home-container .banner .swiper-slide.swiper-slide-02 {*/ /*background-image: ;*/ /*}*/ /*.home-container .banner .swiper-slide.swiper-slide-03 {*/ /*background-image: url(/uploads/image/i/designerdasai.jpg);*/ /*}*/ /*.home-container .banner .swiper-slide.swiper-slide-04 {*/ /*background-image: url(/uploads/image/i/img_zhenxuan.png);*/ /*}*/ /*.home-container .banner .swiper-slide.swiper-slide-05 {*/ /*background-image: url(/uploads/image/i/img_aijiari.png);*/ /*}*/ /*.home-container .banner .swiper-slide.swiper-slide-06 {*/ /*background-image: url(/uploads/image/i/img_meigejiating.png);*/ /*}*/ .home-container .banner .swiper-pagination-bullet { width: 14px; height: 14px; padding: 3px; background-color: transparent; border: 1px solid transparent; opacity: 1; } .home-container .banner .swiper-pagination-bullet:before { content: ""; display: block; width: 6px; height: 6px; background-color: rgba(204, 204, 204, 0.6); border-radius: 50%; } .home-container .banner .swiper-pagination-bullet-active { border-color: #fff; } .home-container .banner .swiper-pagination-bullet-active:before { background-color: rgba(255, 255, 255, 0.9); } .home-container .about { background-image: url(/uploads/image/i/img_ma_pc_01.png); } .home-container .about h1 { padding-left: 15px; height: 30px; line-height: 1; font-size: 30px; color: #232323; border-left: 4px solid #208bfe; border-radius: 1px; color: #fff; } .home-container .about h1 .more { float: right; vertical-align: baseline; border-top: 2px solid #232323; border-right: 2px solid #232323; transform: rotate(45deg); cursor: pointer; width: 18px; height: 18px; margin-right: 70px; } .home-container .about h1 .more { border-top-color: #fff !important; border-right-color: #fff !important; } .home-container .about h2 { padding-left: 15px; height: 30px; line-height: 1; font-size: 30px; color: #232323; border-left: 4px solid #208bfe; border-radius: 1px; color: #fff; } .home-container .about h2 .more { float: right; vertical-align: baseline; border-top: 2px solid #232323; border-right: 2px solid #232323; transform: rotate(45deg); cursor: pointer; width: 18px; height: 18px; margin-right: 70px; } .home-container .about h2 .more { border-top-color: #fff !important; border-right-color: #fff !important; } .home-container .about .video-list { float: right; padding-top: 3.2vh; } .home-container .about .player { position: relative; margin-top: 30px; width: 358px; height: 233px; background-position: 0 0; line-height: 2; color: #fff; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .home-container .about .player:nth-of-type(1) { /* background-image: url(/uploads/image/i/genghao20180510.png); */ } .home-container .about .player:nth-of-type(2) { /* background-image: url(/uploads/image/i/img_video1.png); */ } .home-container .about .player a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .home-container .about .player .video-js .vjs-tech { left: 0; position: absolute; top: 0; } .home-container .about .player .video-js.vjs-fill, .home-container .about .player .video-js .vjs-tech { height: 100%; width: 100%; } .home-container .about .player .top0 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .home-container .about .player .vjs-has-started .vjs-control-bar { visibility: hidden; opacity: 0; } .home-container .news { background-color: #f6f6f6; } .home-container .news h1 { padding-left: 15px; height: 30px; line-height: 1; font-size: 30px; color: #232323; border-left: 4px solid #208bfe; border-radius: 1px; margin-bottom: 9.5vh; } .home-container .news h1 .more { float: right; vertical-align: baseline; border-top: 2px solid #232323; border-right: 2px solid #232323; transform: rotate(45deg); cursor: pointer; width: 18px; height: 18px; margin-right: 70px; } .home-container .news h1 .more { margin-right: 20px !important; } .home-container .news h2 { padding-left: 15px; height: 30px; line-height: 1; font-size: 30px; color: #232323; border-left: 4px solid #208bfe; border-radius: 1px; margin-bottom: 9.5vh; } .home-container .news h2 .more { float: right; vertical-align: baseline; border-top: 2px solid #232323; border-right: 2px solid #232323; transform: rotate(45deg); cursor: pointer; width: 18px; height: 18px; margin-right: 70px; } .home-container .news h2 .more { margin-right: 20px !important; } .home-container .news ul { display: flex; } .home-container .news li { flex: 0 0 385px; height: 444px; color: #fff; box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.1); background-position: 0 0; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; position: relative; } .home-container .news li img{ position: absolute; width:100%; height:100%; } .home-container .news li:nth-of-type(1) { flex-basis: 386px !important; } .home-container .news li:nth-of-type(2) { margin-left: 20px; } .home-container .news li:nth-of-type(3) { margin-left: 22px; } .home-container .news li a { position: absolute; z-index: 1; top:0; } .home-container .news li a:hover { background: linear-gradient(rgba(255, 255, 355, 0) 49%, rgba(32, 139, 254, 0.8) 100%); } .home-container .news li:after { content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.32); position: absolute; left: 0; top: 0; } .home-container .news a { display: block; width: 100%; height: 100%; padding-left: 17px; color: #fff; text-decoration: none; } .home-container .news .time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; margin-right: 17px; padding-top: 29px; line-height: 2.3; font-size: 16px; } .home-container .news .tit { margin-right: 17px; margin-top: 306px; font-size: 16px; } @include text-ellipsis(); .home-container .design { cursor: pointer; /*background-image: url(/uploads/image/i/img_zuihaodesheji.png);*/ } .home-container .goods { background-color: #fff; } .home-container .goods h1 { padding-left: 15px; height: 30px; line-height: 1; font-size: 30px; color: #232323; border-left: 4px solid #208bfe; border-radius: 1px; margin-bottom: 9.5vh; } .home-container .goods h1 .more { float: right; vertical-align: baseline; border-top: 2px solid #232323; border-right: 2px solid #232323; transform: rotate(45deg); cursor: pointer; width: 18px; height: 18px; margin-right: 70px; } .home-container .goods h1 .more { margin-right: 20px !important; } .home-container .goods h2 { padding-left: 15px; height: 30px; line-height: 1; font-size: 30px; color: #232323; border-left: 4px solid #208bfe; border-radius: 1px; margin-bottom: 9.5vh; } .home-container .goods h2 .more { float: right; vertical-align: baseline; border-top: 2px solid #232323; border-right: 2px solid #232323; transform: rotate(45deg); cursor: pointer; width: 18px; height: 18px; margin-right: 70px; } .home-container .goods h2 .more { margin-right: 20px !important; } .home-container .goods ul { display: flex; } .home-container .goods li { flex: 0 382px; height: 425px; color: #fff; box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.1); background-position: 0 0; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } .home-container .goods li:nth-of-type(2) { margin-left: 27px; } .home-container .goods li:nth-of-type(3) { margin-left: 27px; } .home-container .goods li:hover { position: relative; top: -6px; -webkit-transition: all 0.5s; transition: all 0.5s; } .home-container .goods li:hover img { transform: scale(1.2); -webkit-transition: all 0.5s; transition: all 0.5s; } .home-container .goods .img_box { width: 100%; height: 248px; margin-bottom: 17px; overflow: hidden; } .home-container .goods img { width: 100%; height: 248px; margin-bottom: 17px; overflow: hidden; } .home-container .goods a { display: block; width: 100%; height: 100%; color: #fff; overflow: hidden; } .home-container .goods p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; text-align: center; } .home-container .goods .tit { margin-bottom: 10px; font-size: 18px; line-height: 1.6; color: #000; } .home-container .goods .desctribe { margin-bottom: 19px; color: #666; line-height: 2.1; } .home-container .goods .link { width: 354px; height: 55px; padding: 0 20px 0 20px; margin: 0 auto; line-height: 53px; text-align: left; color: #232323; border: 1px solid #efefef; } .home-container .goods .link:after { content: ""; float: right; vertical-align: baseline; border-top: 2px solid #232323; border-right: 2px solid #232323; transform: rotate(45deg); cursor: pointer; width: 10px; height: 10px; margin-top: 21px; } .home-container .mall { min-height: 800px; position: relative; background-color: #232323; background-image: url(/uploads/image/i/map2023-03.png); background-position: 50% 30%; -webkit-background-size: contain; background-size: contain; } .home-container .mall .bg { position: absolute; top: 0; left: 0; right: 0; height: 100vh; background-image: url(/uploads/image/i/map2023-03.png); background-position: 50% 0; -webkit-background-size: contain; background-size: contain; } .home-container .mall h1 { padding-left: 15px; height: 30px; line-height: 1; font-size: 30px; color: #232323; border-left: 4px solid #208bfe; border-radius: 1px; color: #fff; margin-bottom: 50px; } .home-container .mall h1 .more { float: right; vertical-align: baseline; border-top: 2px solid #232323; border-right: 2px solid #232323; transform: rotate(45deg); cursor: pointer; width: 18px; height: 18px; margin-right: 70px; } .home-container .mall h1 .more { border-top-color: #fff !important; border-right-color: #fff !important; } .home-container .mall h1 .more { margin-right: 20px !important; } .home-container .mall h2 { padding-left: 15px; height: 30px; line-height: 1; font-size: 30px; color: #232323; border-left: 4px solid #208bfe; border-radius: 1px; color: #fff; margin-bottom: 50px; } .home-container .mall h2 .more { float: right; vertical-align: baseline; border-top: 2px solid #232323; border-right: 2px solid #232323; transform: rotate(45deg); cursor: pointer; width: 18px; height: 18px; margin-right: 70px; } .home-container .mall h2 .more { border-top-color: #fff !important; border-right-color: #fff !important; } .home-container .mall h2 .more { margin-right: 20px !important; } .home-container .mall h3 { color: #208bfe; font-size: 34px; line-height: 1.4; } .home-container .mall .des { color: #fff; } .home-container .mall .des:nth-of-type(1), .home-container .mall .des:nth-of-type(2) { margin-bottom: 20px; } .home-container .mall .entry { position: relative; z-index: 3; margin-top: 100px; width: 100%; height: 202px; background-color: #333; } .home-container .mall a { display: block; width: 100%; height: 100%; color: #fff; text-decoration: none; } .home-container .mall img { float: left; height: 100%; width: auto; margin-right: 36px; } .home-container .mall .entry { line-height: 1; } .home-container .mall .entry p { font-size: 18px; } .home-container .mall .entry .more { float: right; margin-top: 12px; margin-right: 64px; width: 160px; height: 57px; line-height: 55px; text-align: center; border: 1px solid #efefef; } .home-container .mall .entry .more:after { content: ""; float: none !important; display: inline-block; float: right; vertical-align: baseline; border-top: 2px solid #232323; border-right: 2px solid #232323; transform: rotate(45deg); cursor: pointer; width: 10px; height: 10px; margin-left: 17px; border-top-color: #fff !important; border-right-color: #fff !important; } .home-container .mall h4 { padding-top: 36px; margin-bottom: 22px; font-size: 30px; } .left-side-nav { display: none; } .media{ position: relative; } .media a{ overflow: hidden; width: 358px !important; height: 233px !important; position: relative !important;display: inline-block; } .mediabtn{ top: 120px; left: 192px; margin-left: -1.5em; margin-top: -1em; background-color: rgba(0,0,0,.45); font-size: 3.5em; margin-top: -1em!important; width: 105px; height: 70px; position: absolute; z-index: 99; border: solid 2px #ffffff; border-radius: 8px; } .medialink{ width: 25px; height: 20px; margin-top: -40px; display: inline-block; margin-left: 40px; } @media screen and (min-width: 1600px) { .left-side-nav { display: block; position: fixed; top: 0; bottom: 0; left: 0; z-index: 9; height: 314px; width: 178px; margin: auto 0; will-change: auto; cursor: pointer; } .left-side-nav li { padding-top: 10px; padding-bottom: 10px; padding-left: 21px; border-bottom: none; transition: all 0.1s; } .left-side-nav li::before { content: ""; display: inline-block; height: 1px; width: 30px; margin-right: 21px; vertical-align: super; background-color: rgba(196, 196, 196, 0.8); } .left-side-nav li a { display: none; text-decoration: none; } .left-side-nav:hover li, .left-side-nav.left-side-nav-1 li { padding-top: 23px; padding-bottom: 23px; border-bottom: 1px solid rgba(196, 196, 196, 0.3); } .left-side-nav:hover li.last, .left-side-nav.left-side-nav-1 li.last { border-bottom: none; } .left-side-nav:hover a, .left-side-nav.left-side-nav-1 a { display: inline; color: #a2a2a2; } .left-side-nav:hover { will-change: content; } .left-side-nav-1 .fir { padding-left: 0; } .left-side-nav-1 .fir::before { width: 51px; background-color: #fff; } .left-side-nav-1 .fir a { color: #fff !important; display: inline; } .left-side-nav-2 .two, .left-side-nav-4 .last, .left-side-nav-5 .last, .left-side-nav-6 .last { padding-left: 0; } .left-side-nav-2 .two::before, .left-side-nav-4 .last::before, .left-side-nav-5 .last::before .left-side-nav-6 .last::before { width: 51px; background-color: #fff; } .left-side-nav-2 .two a, .left-side-nav-6 .last a, .left-side-nav-5 .last a, .left-side-nav-4 .last.last-no-shortimage a { color: #fff !important; display: inline; } .left-side-nav-3 .three, .left-side-nav-4 .four, .left-side-nav-5 .five { padding-left: 0; } .left-side-nav-3 .three::before, .left-side-nav-4 .four::before, .left-side-nav-5 .five::before { width: 51px; background-color: #fff; } .left-side-nav-3 .three:before, .left-side-nav-4 .four:before, .left-side-nav-5 .five:before { background-color: #232323; } .left-side-nav-3 .three a, .left-side-nav-4 .four a, .left-side-nav-5 .five a { color: #000 !important; display: inline; } }