.center { width: 83.3333%; max-width: 1600px; position: relative; margin: 0 auto; } .hide { display: none !important; } .header { width: 100%; height: 90px; border-bottom: 1px solid rgba(230, 230, 230, 0.2); display: flex; align-items: center; justify-content: space-between; padding-left: 3%; position: absolute; top: 0; left: 0; z-index: 100; } .header .logo { width: 190px; background-repeat: no-repeat; background-size: 100%; background-position: center; display: inline-block; } .header .logo img { width: 100%; opacity: 0; } .header .header-nav { height: 100%; } .header .header-nav .items-box { position: relative; display: inline-block; height: 100%; } .header .header-nav .items-box .items { padding: 0 30px; height: 100%; line-height: 90px; display: inline-block; font-size: 16px; color: #fff; } .header .header-nav .items-box .items:after { content: ''; position: absolute; right: 0; top: calc(50% - 5px); width: 1px; height: 10px; background-colqor: #e6e6e6; } .header .header-nav .items-box .items:last-of-type:after { width: 0; } .header .header-nav .items-box .header-down-nav { position: absolute; top: 90px; width: 100%; left: 0; display: none; opacity: 0; transition: all 0.6s; } .header .header-nav .items-box .header-down-nav .nav-box { line-height: 40px; text-align: center; } .header .header-nav .items-box .header-down-nav .nav-box > a { display: block; color: #fff; } .header .header-nav .items-box:hover .header-down-nav { display: block; opacity: 1; } .header .menu { width: 150px; height: 90px; background-image: url("../images/22.png"); background-repeat: no-repeat; background-size: 32px 20px; background-position: center center; cursor: pointer; } .header.header-light { background-color: #fff; box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.04); } .header.header-light .logo { background-image: url("../images/logo.png") !important; } .header.header-light .header-nav .items { color: #333; } .header.header-light .menu { background-image: url("../images/21.png"); } .header.noBorder { border: 0; } .header.header-fix { box-shadow: 0px 5px 10px 0px rgba(33, 2, 0, 0.05); background: #fff; width: 100%; position: fixed; top: 0px; z-index: 10000; } .header.header-fix .header-nav .items { color: #333; } .header.header-fix .header-nav .header-down-nav { background-color: #fff; } .header.header-fix .header-nav .header-down-nav .nav-box > a { color: #333; } .inner-banner { width: 100%; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; } .inner-banner > img { display: none; } .inner-banner .main-box { width: 100%; position: absolute; top: 0; left: 0; z-index: 9; } .inner-banner .text-box { margin-top: 340px; } .inner-banner .text-box .text { font-size: 30px; color: #fff; margin-top: 20px; } .inner-banner .text-box .line { width: 24px; height: 2px; background-color: #fff; margin-top: 70px; } .inner-banner .second-nav-box { padding-left: 3%; height: 100px; border-bottom: 1px solid #e6e6e6; position: absolute; bottom: -50px; left: 0; width: 100%; } .inner-banner .second-nav-box .nav-box { width: 100%; height: 100%; background-color: #fff; font-size: 16px; } .inner-banner .second-nav-box .nav-box .center { height: 100%; display: flex; align-items: center; justify-content: space-between; } .inner-banner .second-nav-box .nav-box .left { padding-left: 20px; height: 100%; line-height: 100px; display: inline-block; background-image: url("../images/25.png"); background-repeat: no-repeat; background-size: 11px 13px; background-position: left center; } .inner-banner .second-nav-box .nav-box .right { height: 100%; } .inner-banner .second-nav-box .nav-box .right .items { display: inline-block; height: 100%; line-height: 100px; margin-left: 50px; position: relative; text-align: center; } .inner-banner .second-nav-box .nav-box .right .items span { position: relative; z-index: 10; transition: all 0.6s; } .inner-banner .second-nav-box .nav-box .right .items.active, .inner-banner .second-nav-box .nav-box .right .items:hover { font-size: 20px; font-weight: bold; } .inner-banner .second-nav-box .nav-box .right .items.active:after, .inner-banner .second-nav-box .nav-box .right .items:hover:after { content: ''; position: absolute; width: 98px; height: 9px; background-color: #44bcbc; border-radius: 2px; left: calc(50% - 49px); top: calc(50% + 4px); } .inner-banner .brand-bg { width: 100%; height: 100%; top: 0; left: 0; position: absolute; display: flex; overflow: hidden; } .inner-banner .brand-bg .items { width: 33.333%; height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.28); position: relative; cursor: pointer; } .inner-banner .brand-bg .items .img { width: 245px; position: absolute; left: calc(50% - 122px); bottom: 110px; transition: bottom 0.6s; } .inner-banner .brand-bg .items .img img { width: 100%; } .inner-banner .brand-bg .items .enter { font-size: 18px; color: #fff; text-transform: uppercase; display: block; width: 180px; height: 60px; line-height: 60px; text-align: center; border: 1px solid #e6e6e6; background-color: rgba(255, 255, 255, 0.2); left: calc(50% - 90px); bottom: -150px; transition: bottom 0.6s; position: absolute; } .inner-banner .brand-bg .items:nth-of-type(3) { border-right: 0; } .inner-banner .brand-bg .items:hover .img { bottom: calc(50% - 50px); } .inner-banner .brand-bg .items:hover .enter { bottom: 100px; } .inner-banner .play-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .inner-banner .play-box img { width: 100%; } .inner-banner .play-box .play-icon { width: 56px; height: 56px; background-image: url("../images/109.png"); background-repeat: no-repeat; background-size: 100%; margin: 0 auto; margin-top: 40px; cursor: pointer; } .inner-banner .full-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; transition: all 0.6s; } .inner-banner .full-bg.active-bg { display: block !important; opacity: 1; transform: scale(1.01); } #brand .inner-banner { overflow: hidden; } .menu-down-box { position: fixed; top: 0; right: -100vw; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.4); z-index: 10001; display: flex; } .menu-down-box .big-box { width: 73%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 10002; animation-duration: 1.5s; animation-delay: 0.1s; position: relative; overflow: hidden; } .menu-down-box .big-box .menu-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0; transition: all 0.6s; } .menu-down-box .big-box .menu-bg.active-bg { display: block !important; opacity: 1; transform: scale(1.01); } .menu-down-box .menu-box { width: 27%; transition: all 0.6s; background-color: #1c1c1c; padding-left: 6%; padding-top: 100px; z-index: 10003; } .menu-down-box .menu-box .close { width: 40px; height: 120px; background-size: 26px 120px; background-image: url("../images/close.png"); background-repeat: no-repeat; background-position: center center; top: 40px; right: 60px; position: absolute; cursor: pointer; } .menu-down-box .menu-box .right-nav { position: absolute; bottom: 80px; right: 60px; } .menu-down-box .menu-box .right-nav .items { width: 30px; height: 30px; display: block; background-size: 100%; background-repeat: no-repeat; margin-top: 30px; text-align: right; } .menu-down-box .menu-box .right-nav .items.tel { background-image: url("../images/04.png"); position: relative; transition: all 0.6s; } .menu-down-box .menu-box .right-nav .items.tel .phone-hover { position: absolute; left: -150px; top: -12px; color: #666; font-size: 20px; font-weight: bold; display: none; transition: all 0.6s; } .menu-down-box .menu-box .right-nav .items.tel:hover .phone-hover { display: block; } .menu-down-box .menu-box .right-nav .items.weixin { background-image: url("../images/06.png"); transition: all 0.6s; } .menu-down-box .menu-box .right-nav .items.weixin .code-hover { width: 122px; position: absolute; left: -150px; display: none; } .menu-down-box .menu-box .right-nav .items.weixin .code-hover img { width: 100%; } .menu-down-box .menu-box .right-nav .items.weixin:hover .code-hover { display: block; } .menu-down-box .menu-box .right-nav .items.weibo { background-image: url("../images/05.png"); } .menu-down-box .menu-box .items-box { width: 55%; } .menu-down-box .menu-box .items-box .items-top { height: 75px; line-height: 95px; display: block; font-size: 20px; color: #fff; border-bottom: 1px solid #2d2d2d; position: relative; transition: all 0.6s; } .menu-down-box .menu-box .items-box .items-top.active { padding-left: 30px; border: 0; } .menu-down-box .menu-box .items-box .items-top.active:before { content: ''; position: absolute; width: 15px; height: 2px; background-color: #fff; left: 0; top: 46px; } .menu-down-box .menu-box .items-box .items-top:hover { line-height: 75px; } .menu-down-box .menu-box .items-box .down-box { border-bottom: 1px solid #2d2d2d; padding-bottom: 30px; display: none; } .menu-down-box .menu-box .items-box .down-box .items { display: block; font-size: 16px; color: #999; padding-left: 30px; line-height: 2.5em; } .menu-down-box.active { right: 0; } .brand-bottom-box { width: 100%; height: 700px; background-image: url("../images/123.png"); background-size: cover; background-position: center center; background-repeat: no-repeat; padding-top: 90px; margin-top: 100px; } .brand-bottom-box .com-title-box { color: #fff; margin-top: 0; } .brand-bottom-box .store-address { display: flex; justify-content: center; margin-top: 120px; } .brand-bottom-box .store-address .store-items { color: #fff; display: flex; align-items: center; flex-direction: column; margin-right: 100px; } .brand-bottom-box .store-address .store-items img { width: 53px; } .brand-bottom-box .store-address .store-items .t1 { font-size: 30px; line-height: 30px; margin-top: 30px; } .brand-bottom-box .store-address .store-items .t2 { font-size: 20px; line-height: 20px; margin-top: 20px; } .brand-bottom-box .store-address .store-items.ml300 { margin-left: 300px; } .brand-bottom-box .store-address .store-items:last-of-type { margin-right: 0; } .brand-bottom-box .lines { display: flex; justify-content: center; margin-top: 100px; } .brand-bottom-box .lines .select { width: 274px; height: 54px; background-image: url("../images/37.png"); background-size: 14px 10px; background-repeat: no-repeat; background-position: right 20px center; font-size: 16px; border: 1px solid #fff; background-color: rgba(255, 255, 255, 0.5); } .brand-bottom-box .lines .select select { width: 100%; height: 100%; background-color: transparent; padding-left: 20px; } .footer .footer-top { padding: 60px 0; background-color: #222; } .footer .footer-top .center { display: flex; justify-content: space-between; } .footer .footer-top .footer-left { width: 70%; } .footer .footer-top .footer-left .footer-list { display: flex; justify-content: space-between; } .footer .footer-top .footer-left .footer-list > li { float: left; margin-right: 0%!important; } .footer .footer-top .footer-left .footer-list > li .tt { font-size: 18px; color: #fff; margin-bottom: 30px; } .footer .footer-top .footer-left .footer-list > li .link-box li { margin-bottom: 10px; } .footer .footer-top .footer-left .footer-list > li .link-box li a { font-size: 14px; color: #999; } .footer .footer-top .footer-left .footer-list > li:last-of-type { margin-right: 0; } .footer .footer-top .footer-left .footer-link { margin-top: 90px; padding-right: 10%; display: flex; align-items: flex-end; justify-content: space-between; } .footer .footer-top .footer-left .footer-link .left-items { font-size: 18px; line-height: 10px; color: #fff; } .footer .footer-top .footer-left .footer-link .left-items .link { margin-left: -10px; display: inline-block; vertical-align: middle; margin-bottom: 5px; } .footer .footer-top .footer-left .footer-link .left-items .link > a { color: #999; font-size: 14px; display: inline-block; vertical-align: middle; margin-left: 20px; text-decoration: underline; } .footer .footer-top .footer-left .footer-link .right-items { width: 190px; display: inline-block; } .footer .footer-top .footer-left .footer-link .right-items img { width: 100%; } .footer .footer-top .footer-right { text-align: right; } .footer .footer-top .footer-right .title { font-size: 18px; color: #fff; } .footer .footer-top .footer-right .address { font-size: 16px; color: #999; margin-top: 15px; margin-bottom: 50px; } .footer .footer-top .footer-right .tel-box { font-size: 24px; color: #fff; margin-top: 15px; margin-bottom: 50px; } .footer .footer-top .footer-right .third-link > a { display: inline-block; width: 30px; height: 30px; background-size: 100%; background-repeat: no-repeat; margin-left: 20px; } .footer .footer-top .footer-right .third-link .weixin { background-image: url("../images/20.png"); position: relative; } .footer .footer-top .footer-right .third-link .weixin .wechat-hover { position: absolute; width: 122px; top: 34px; left: -50%; z-index: 100; display: none; } .footer .footer-top .footer-right .third-link .weixin .wechat-hover img { width: 100%; } .footer .footer-top .footer-right .third-link .weixin:hover .wechat-hover { display: block; } .footer .footer-top .footer-right .third-link .weibo { background-image: url("../images/19.png"); } .footer .footer-bottom { background-color: #1f1f1f; width: 100%; height: 70px; line-height: 70px; font-size: 14px; color: #ccc; } .footer .footer-bottom .center { display: flex; align-items: center; justify-content: space-between; } .footer .footer-bottom .right > a { display: inline-block; margin-left: 10px; color: #ccc; } .pages { display: flex; align-items: center; justify-content: center; } .pages > a { width: 40px; height: 40px; line-height: 40px; display: inline-block; vertical-align: middle; color: #666; font-size: 18px; text-align: center; border: 1px solid #e6e6e6; transition: all 0.6s; margin-right: 16px; } .pages > a.prevNext { background-size: 7px 14px; background-position: center center; background-repeat: no-repeat; } .pages > a.prev { background-image: url("../images/28.png"); } .pages > a.next { background-image: url("../images/29.png"); } .pages > a:hover, .pages > a.active { background-color: #333; color: #fff; border: 1px solid #333; } .pages > a:hover.prevNext, .pages > a.active.prevNext { background-color: #fff; } .com-title-box { margin-top: 120px; color: #333; text-align: center; } .com-title-box .en { font-size: 40px; line-height: 40px; } .com-title-box .cn { font-size: 30px; line-height: 30px; margin-top: 20px; } .BMapLabel { border: 0 !important; } .BMapLabel .info-div { width: 136px; height: 28px; background-image: url("../images/logo.png"); background-size: 100%; background-repeat: no-repeat; } .pro-cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: rgba(0, 0, 0, 0.7); display: none; } .pro-cover .display-pic { width: 63.33333%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 600px; } .pro-cover .display-pic .swiper-display { width: 100% !important; height: 100%; margin: 0 auto; position: relative; align-items: center; } .pro-cover .display-pic .swiper-display .swiper-slide { width: 100% !important; height: 100% !important; background-position: center center; background-size: auto 100%; background-repeat: no-repeat; } .pro-cover .display-pic .swiper-display .swiper-slide img { width: auto; opacity: 0; } .pro-cover .display-pic .swiper-pagination { width: 100%; bottom: -50px; } .pro-cover .display-pic .swiper-pagination .swiper-pagination-bullet { width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; opacity: 1; border-radius: 0; background-color: transparent; } .pro-cover .display-pic .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border: 1px solid #fff; } .pro-cover .display-pic .display-prev, .pro-cover .display-pic .display-next { position: absolute; width: 40px; height: 60px; background-size: 18px 34px; background-repeat: no-repeat; background-position: center center; top: calc(50% - 30px); z-index: 1000; } .pro-cover .display-pic .display-prev { left: 0; background-image: url("../images/110.png"); } .pro-cover .display-pic .display-next { right: 0; background-image: url("../images/111.png"); } .pro-cover .display-pic .display-close { width: 34px; height: 34px; display: block; background-repeat: no-repeat; background-size: 100%; background-repeat: no-repeat; position: absolute; right: 0; top: -34px; background-image: url("../images/113.png"); } .video-layer { background-color: #000 !important; } .video-layer .layui-layer-content { width: 800px !important; height: 450px !important; overflow: hidden !important; } .video-layer video { width: 100% !important; height: 100% !important; } #vcodeImg { height: 100%; } .article-back { width: 180px; height: 60px; line-height: 60px; text-align: center; font-size: 18px; margin: 0 auto; display: block; background-color: #ffffff; border: solid 1px #e6e6e6; margin-top: 75px; } .join-form { width: 600px; height: 354px; background-color: #fff; padding: 40px; } .join-form .line { width: 100%; height: 36px; display: inline-block; } .join-form .line .label { height: 36px; display: inline-block; float: left; font-size: 16px; line-height: 36px; } .join-form .line input { display: inline-block; float: left; width: 438px; height: 36px; background-color: #fff; border: none; border-bottom: 1px solid #f1f5fd; padding: 0 10px; } .join-form .line textarea { display: inline-block; float: left; width: 100%; height: 100px; background-color: #fff; border: 1px solid #f1f5fd; padding: 10px; resize: none; } .join-form .line .load { width: 438px; height: 25px; background-color: #fff; border: none; margin-top: 6px; display: inline-block; float: left; } .join-form .line img { display: inline-block; margin-left: 10px; width: 80px; height: 34px; } .join-form .line button { width: 120px; height: 38px; border-radius: 4px; background-color: #44bcbc; line-height: 38px; text-align: center; font-size: 16px; color: #fff; border: none; float: right; } .join-form .line.heightauto { height: auto; } .display-list .wall-column { display: block; position: relative; /*width: 33.333333%;*/ width: 48%; float: left; padding: 0 20px; box-sizing: border-box; } @media (max-width: 1920px) { .display-list .wall-column { width: 50%; } } @media (max-width: 1280px) { .display-list .wall-column { width: 50%; } } @media (max-width: 768px) { .display-list .wall-column { width: auto; float: none; } } .bottom-items .wall-column { display: block; position: relative; /*width: 33.333333%;*/ width: 33%; float: left; padding: 0 20px; box-sizing: border-box; } @media (max-width: 1920px) { .bottom-items .wall-column { width: 33%; } } @media (max-width: 1280px) { .bottom-items .wall-column { width: 50%; } } @media (max-width: 768px) { .bottom-items .wall-column { width: auto; float: none; } } /*# sourceMappingURL=common.css.map */ /*# sourceMappingURL=common.css.map */ /*# sourceMappingURL=common.css.map */