锘緻charset "UTF-8"; body, html { font-family: "Source Han Sans CN","Microsoft YaHei","寰粺姝i粦楂?, "Microsoft JhengHei","Helvetica Neue", Helvetica, "Heiti SC",Arial, sans-serif; } @font-face { font-family: 'BEBAS'; src: url("../fonts/bebas.eot"); src: url("../fonts/bebas.eot") format("embedded-opentype"), url("../fonts/bebas.woff2") format("woff2"), url("../fonts/bebas.woff") format("woff"), url("../fonts/bebas.ttf") format("truetype"), url("../fonts/bebas.svg#bebas") format("svg"); } /*@font-face { font-family: 'GOTHIC'; src: url('../fonts/gothic.eot'); src: url('../fonts/gothic.eot') format('embedded-opentype'), url('../fonts/gothic.woff2') format('woff2'), url('../fonts/gothic.woff') format('woff'), url('../fonts/gothic.ttf') format('truetype'), url('../fonts/gothic.svg#gothic') format('svg'); }*/ html, body { overflow: hidden; position: relative; } ::-moz-selection { background:red;color:#fff; } ::selection { background:red; color:#fff;} .ovh-f { width: 100%; height: 100%; position: fixed; left: 0; top: 0; } .tit1{ font-size:20px; text-align:center; padding-top:1em;} #div1{ width:100%; overflow:hidden; } #div1 img{ cursor:pointer; transition:all 0.6s; } #div1 img:hover{ transform:scale(1.1); } .w1660 { width: 1660px; margin: 0 auto; } .w1400 { width: 1400px; margin: 0 auto; } .bocweb-footer { padding: 2rem 0 1.5rem; background: #303030; } .bocweb-footer .top { position: relative /*border-bottom:1px solid rgba(137,137,137,.2);*/ } .bocweb-footer .top .fot-top-right { width: 940px; margin-left: 4rem; } .bocweb-footer .top .fot-top-right a { display: block; font-size: 14px; line-height: 30px; color: #777; position: relative; } .bocweb-footer .top .fot-top-right .dd { left: 0; /*font-family: "SimSun";*/ -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .bocweb-footer .top .fot-top-right .dd p { display: inline-block; position: relative; } .bocweb-footer .top .fot-top-right .dd p:before { content: ""; position: absolute; left: 0; bottom: 5px; height: 20%; width: 80%; -webkit-transform-origin: center right; -ms-transform-origin: center right; transform-origin: center right; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background: rgba(225, 18, 35, 0.3); -webkit-transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; } .bocweb-footer .top .fot-top-right .dd:hover { color: #d00010; } .bocweb-footer .top .fot-top-right .dd:hover p:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left; } .bocweb-footer .top .fot-top-right .dl { margin-right: .6rem; width: 110px; float: left; } .bocweb-footer .top .fot-top-right .dl:last-child { margin-right: 0; } .bocweb-footer .top .fot-top-right .dt { margin-bottom: 15px; font-size: 17px; color: #e0e0e0; line-height: 1.2; opacity: 1; } .bocweb-footer .top .fot-top-right .ma1 { margin-top: 25px; } .bocweb-footer .top .fxbox { margin-top: 1rem; } .bocweb-footer .top .fxbox span { color: #fff; opacity: .5; line-height: 25px; margin-right:10px; } .bocweb-footer .top .fxbox a { padding: 0 !important; margin: 0 5px !important; width: 25px; height: 25px; display: inline-block; } .bocweb-footer .top .fxbox .bds_sqq { background: url(../images/img5.png) no-repeat center; } .bocweb-footer .top .fxbox .bds_tsina { background: url(../images/img5-1.png) no-repeat center; } .bocweb-footer .top .fxbox .bds_weixin { background: url(../images/img5-2.png) no-repeat center; } .bocweb-footer .top .fxbox .bds_mall { background: url(../images/img5-3.png) no-repeat center; } .bocweb-footer .top .fxbox .bds_car { background: url(../images/img5-4.png) no-repeat center; } .bocweb-footer .top .fot-top-left { width: 240px; } .bocweb-footer .top .fot-top-left .bot-logo { width: 166px; margin-bottom: 1rem; } .bocweb-footer .top .fot-top-left .tel { font-size: 13px; color: #777; margin-bottom: 5px; line-height: 1.5; } .bocweb-footer .top .fot-top-left .tel-number { font-family: "BEBAS"; color: #fff; line-height: 1.1; margin-bottom: .95rem; } .bocweb-footer .top .fri-box.active .icon-unfold { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .bocweb-footer .top .fri-box.active .icon-unfold:before { color: #ec2939; } .bocweb-footer .top .fri-box-up { position: absolute; width: calc(100% + 2px); left: -1px; bottom: 39px; background: #1b1e25; border: 1px solid rgba(255, 255, 255, 0.2); line-height: 40px; display: none; } .bocweb-footer .top .fri-box-up a { display: block; line-height: 40px; color: #fff; opacity: .6; -webkit-transition: all .3s ease; transition: all .3s ease; } .bocweb-footer .top .fri-box-up a:hover { color: #ec2939; } .bocweb-footer .top .fri-box { width: 100%; height: 40px; line-height: 40px; font-size: 13px; color: rgba(255, 255, 255, 0.55); text-indent: 20px; background: #3e3e3e; position: relative; cursor: pointer; } .bocweb-footer .top .fri-box .fspan { position: relative; } .bocweb-footer .top .fri-box .icon-unfold { position: absolute; right: 0; top: 0; height: 100%; width: 40px; height: 40px; -webkit-transition: all .3s ease; transition: all .3s ease; } .bocweb-footer .top .fri-box .icon-unfold:before { font-size: 20px; opacity: .4; position: absolute; left: 50%; color: #636363; margin-left: -30px; -webkit-transition: color .3s ease; transition: color .3s ease; } .bocweb-footer .fot-nav { padding-bottom: 1.6rem; } .bocweb-footer .bot { padding: 22px 0; line-height: 22px; text-align: left; border-top: 1px solid #3a3a3a; } .bocweb-footer .bot .p { font-size: 13px; color: #fff; width: 100%; } .bocweb-footer .bot .p1 { width: 100%; text-align:center; } .bocweb-footer .bot .sp1 { opacity: .5; } .bocweb-footer .bot a { font-size: 14px; line-height: 16px; color: #fff !important; opacity: .5; display: inline-block !important; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .bocweb-footer .bot a:hover { opacity: .9; } .bocweb-footer .sub-menu { width: 100%; z-index: 2; } .bocweb-footer .sub-menu ul { width: 100%; } .bocweb-footer .sub-menu li { border-bottom: 1px solid #dcdcdc; font-size: 16px; } .bocweb-footer .sub-menu .tit { display: block; width: 100%; padding: 0 3%; font-size: 14px; line-height: 60px; color: #000; position: relative; box-sizing: border-box; margin-bottom: 0; } .bocweb-footer .sub-menu .titx { display: block; width: 100%; padding: 0 3%; line-height: 60px; color: #000; position: relative; border-bottom: 1px solid #dcdcdc; } .bocweb-footer .sub-menu .sub-tit:after { content: ''; display: block; width: 26px; height: 26px; background: url(../images/ico_03.png) no-repeat center; background-size: 15px auto; position: absolute; right: 3%; top: 8px; } .bocweb-footer .sub-menu .sub-tit.on { background-color: #8453bb; color: #fff; } .bocweb-footer .sub-menu .sub-tit.on:after { background: url(../images/ico_03_h.png) no-repeat center; background-size: 15px auto; } .bocweb-footer .sub-menu .sec-list { line-height: 40px; padding: 10px 4%; display: none; } .bocweb-footer .sub-menu .sec-list p { background: url(../images/ico_04.png) no-repeat left center; background-size: 3px auto; font-size: 14px; } .bocweb-footer .sub-menu .sec-list a { padding-left: 3%; color: #666; display: block; } .header1 { z-index: 9; height: 90px; position: fixed; width: 100%; padding: 0 30px; box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.1); -webkit-transition: all .5s ease; transition: all .5s ease; } .header1 h1 { width: 204px; height: 90px; position: relative; overflow: hidden; } .header1 h1 img { max-width: 100%; position: absolute; left: 0; top: 0; opacity: 0; -webkit-transition: all 0.5s 0s cubic-bezier(0.86, 0.5, 1, 1); transition: all 0.5s 0s cubic-bezier(0.86, 0.5, 1, 1); } .header1 h1 img.img1 { opacity: 1; } .header1 nav { float: left; height: 90px; line-height: 90px; width: 800px; position: absolute; left: 50%; top: 0; margin-left: -375px; } .header1 nav li { float: left; display: inline-block; text-align: center; font-size: 16px; -webkit-transition: all 0.3s cubic-bezier(0.86, 0.5, 1, 1); transition: all 0.3s cubic-bezier(0.86, 0.5, 1, 1); margin: 0 24px; } .header1 nav li > a { color: #fff; display: block; position: relative; -webkit-transition: color 0.5s; transition: color 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .header1 nav li:last-child { margin-right: 0; } .header1 nav li:hover > a, .header1 nav li.cur > a { color: #da3830; } .header1 .nav-sub { width: 240px; background: #fff; position: absolute; top: 90px; left: 0; height: auto; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transition: -webkit-transform .3s .2s; transition: transform .3s .2s; } .header1 .nav-sub .n-nav-sub { opacity: 0; -webkit-transform: translate(0, -20px); -ms-transform: translate(0, -20px); transform: translate(0, -20px); -webkit-transition: all .2s; transition: all .2s; } .header1 .nav-sub a { height: 45px; line-height: 45px; display: block; padding: 0 20px; text-align: left; color: #333; font-size: 14px; position: relative; -webkit-transition: all 0.3s cubic-bezier(0.86, 0.5, 1, 1); transition: all 0.3s cubic-bezier(0.86, 0.5, 1, 1); } .header1 .nav-sub .nav-arrow { position: absolute; top: 15px; right: 10px; width: 16px; height: 16px; opacity: 0; -webkit-transform: rotate(90deg) translate(0px, 20px); -ms-transform: rotate(90deg) translate(0px, 20px); transform: rotate(90deg) translate(0px, 20px); } .header1 .nav-sub .nav-arrow:before { font-size: 16px; color: #fff; } .header1 .nav-sub a:hover { background-color: #e60012; color: #fff; } .header1 .nav-sub a:hover .nav-arrow { -webkit-transition: -webkit-transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 300ms; transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 300ms; opacity: 1; -webkit-transform: rotate(90deg) translate(0px, 0px); -ms-transform: rotate(90deg) translate(0px, 0px); transform: rotate(90deg) translate(0px, 0px); } .header1 .nav-sub.active { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: -webkit-transform .3s; transition: transform .3s; } .header1 .nav-sub.active .n-nav-sub { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all .2s .3s; transition: all .2s .3s; } .header1 .pc-sub-nav { background: #404040; position: absolute; top: 90px; height: 710px; width: 100%; padding: 1rem 80px 2.5rem 100px; left: 0; /*visibility: hidden;*/ z-index: 1; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; /*-webkit-transform: perspective(1200px) rotateX(-92deg); transform: perspective(1200px) rotateX(-92deg); opacity: 0;*/ display:none; /*-webkit-transition: all .3s 0s; transition: all .3s 0s;*/ } .header1 .pc-sub-nav .list { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .header1 .pc-sub-nav .nlist { width: 1180px; } .header1 .pc-sub-nav .li-list { padding: 1rem 0 .5rem; border-bottom: 1px solid rgba(205, 205, 205, 0.11); } .header1 .pc-sub-nav .imgbox { width: calc(100% - 1180px); height: 710px; position: absolute; right: 0; top: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; } .header1 .pc-sub-nav .li-item { position: relative; float: left; width: 28%; margin: 0; top: 0; padding: 0 1%; display: block; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .header1 .pc-sub-nav .car-img { width: 100%; left: 0; position: relative; display: inline-block; -webkit-transition: all .3s .3s ease-in-out; transition: all .3s .3s ease-in-out; } .header1 .pc-sub-nav .car-img img { max-width: 100%; display: inline-block; } .header1 .pc-sub-nav .carlink { margin-top: 2.15rem; } .header1 .pc-sub-nav .carlink .bottonbox { height: 60px; line-height: 60px; background: #585858; margin: 0 15px; display: block; width: 220px; float: left; } .header1 .pc-sub-nav .carlink .bottonbox p { display: inline-block; padding-left: 40px; color: #fff; position: relative; z-index: 2; } .header1 .pc-sub-nav .carlink .bottonbox p:before { content: ""; position: absolute; width: 25px; height: 25px; left: 0; top: 50%; margin-top: -12.5px; } .header1 .pc-sub-nav .carlink .bottonbox1 p:before { background: url(../images/img1.png) no-repeat center; background-size: 25px 25px; } .header1 .pc-sub-nav .carlink .bottonbox2 p:before { background: url(../images/img1-1.png) no-repeat center; background-size: 25px 25px; } .header1 .pc-sub-nav .carlink .hover_1:before { z-index: 1; background: #d00010; width: 300px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .header1 .pc-sub-nav .carlink .hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .header1 .pc-sub-nav .li-item:hover { top: -20px; } .header1 .pc-sub-nav .li-item:hover .car-img { left: -25px; } .header1 .pc-sub-nav.on { /*visibility: visible; transform: perspective(0px) rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; -webkit-transition: all .5s 0s; transition: all .5s 0s;*/ } .header1 .pc-sub-nav .list.on { /*opacity: 1; visibility: visible; transform:translate(0,0);*/ } .header1 .header-right { width: 60px; position: absolute; right: .5rem; top: 0; z-index: 10; } .header1 .header-right .search-btn { width: 60px; height: 90px; line-height: 90px; text-align: center; cursor: pointer; } .header1 .header-right .search-btn:before { font-size: 25px; color: #fff; -webkit-transition: color .3s ease-in-out; transition: color .3s ease-in-out; } .header2 { height: 55px; position: relative; background: #fff; z-index: 22; width: 100%; display: none; } .header2 .main-wrap { height: 55px; padding: 0 3%; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .header2 .logo { width: 100px; height: 55px; overflow: hidden; } .header2 .logo a { display: block; } .header2 .logo img { width: 100%; vertical-align: top; } .header2 .nav-btn { width: 35px; height: 25px; position: relative; cursor: pointer; margin-top: .5rem; } .header2 .nav-btn .line { display: block; width: 100%; height: 3px; border-radius: 3px; background-color: #ababab; position: absolute; left: 0; } .header2 .nav-btn .line1 { -webkit-transform-origin: left 0px 0; -ms-transform-origin: left 0px 0; transform-origin: left 0px 0; } .header2 .nav-btn .line2 { top: 11px; } .header2 .nav-btn .line3 { bottom: 0; -webkit-transform-origin: left 4px 0; -ms-transform-origin: left 4px 0; transform-origin: left 4px 0; } .header2 .nav-btn.active { -webkit-animation: rotate 0.5s linear 0s; animation: rotate 0.5s linear 0s; } .header2 .nav-btn.active .line1 { top: 0px; } .header2 .nav-btn.hover .line { background: #d7000e; } .header2 .sub-menu { width: 100%; padding: 0 3%; display: none; position: absolute; left: 0; top: 60px; z-index: 2; overflow-y: auto; } .header2 .sub-menu ul { width: 100%; overflow-y: scroll; height: calc(100vh - 55px - 1.5rem); } .header2 .sub-menu li { border-bottom: 1px solid #dcdcdc; font-size: 16px; } .header2 .sub-menu .tit { display: block; width: 100%; padding: 0 3%; line-height: 60px; color: #000; position: relative; box-sizing: border-box; } .header2 .sub-menu .titx { display: block; width: 100%; padding: 0 3%; line-height: 60px; color: #000; position: relative; border-bottom: 1px solid #dcdcdc; } .header2 .sub-menu .sub-tit:after { content: ''; display: block; width: 26px; height: 26px; background: url(../images/ico_03.png) no-repeat center; background-size: 17px auto; position: absolute; right: 3%; top: 15px; } .header2 .sub-menu .sub-tit.on { background-color: #e9e9e9; } .header2 .sub-menu .sub-tit.on:after { background: url(../images/ico_03_h-1.png) no-repeat center; background-size: 20px auto; } .header2 .sub-menu .sec-list { line-height: 40px; padding: 10px 4%; display: none; } .header2 .sub-menu .sec-list p { background: url(../images/ico_04.png) no-repeat left center; background-size: 3px auto; font-size: 14px; } .header2 .sub-menu .sec-list a { padding-left: 3%; color: #666; display: block; } .header1:hover, .header1.active { background: #fff; } .header1:hover h1 img.img2, .header1.active h1 img.img2 { opacity: 1; } .header1:hover h1 img.img1, .header1.active h1 img.img1 { opacity: 0; } .header1:hover nav li > a, .header1.active nav li > a { color: #000; } .header1:hover .header-right .search-btn:before, .header1.active .header-right .search-btn:before { color: #000; } .header1:hover .header-right .search-btn:hover:before, .header1.active .header-right .search-btn:hover:before { color: #d00010; } .header1 nav, .header1 .header-right .search-btn, .header1 h1 { -webkit-transition: all .3s ease; transition: all .3s ease; } .n-header.scroll { height: 70px; } .header1.scroll { height: 70px; } .header1.scroll h1 { height: 70px; width: 128px; } .header1.scroll nav { height: 70px; line-height: 70px; } .header1.scroll nav li { -webkit-transition: all .3s ease; transition: all .3s ease; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; } .header1.scroll .header-right .search-btn { height: 70px; line-height: 70px; } .header1.scroll .nav-sub { top: 70px; } .header1.scroll .pc-sub-nav { top: 70px; } .car-info-nav.scroll { background: #fff; position: fixed; width: 100%; left: 0; top: 0; z-index: 9; } .header1 { top: 0; -webkit-transition: all .5s ease; transition: all .5s ease; } .header1.car-header { top: -90px; } .search-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background-color: #f5f5f5; display: none; z-index: 20; } .buttonbox.hover_1 { width: 160px; height: 45px; line-height: 45px; text-align: center; box-shadow: inset 0px 0px 0px 3px #9a9a9a; display: block; color: #fff; } .buttonbox.hover_1 p { position: relative; z-index: 2; height: 45px; line-height: 45px; } .buttonbox.hover_1:before { z-index: 1; background: #d00010; width: 250px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .buttonbox.hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .i-banner { width: 100%; height: 30vh; overflow: hidden; } .i-banner .swiper-slide { width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; } .i-banner .slide-wrap { width: 100vw; height: 30vh; overflow: hidden; position: absolute; } .i-banner a { display: block; width: 100%; height: 100vh; } .index-banner-warp { position: relative; z-index: 1; } /*.index-banner-warp .i-banner .swiper-pagination { width: 40px; top: 50%; left: 30px; bottom: auto; -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); } .index-banner-warp .i-banner .swiper-pagination span { height: 3px; display: inline-block; width: 100%; margin: 4px 0; border-radius: 0; background: none; position: relative; opacity: 1; -webkit-transition: all .5s ease; transition: all .5s ease; } .index-banner-warp .i-banner .swiper-pagination span:before { content: ""; background: #fff; height: 3px; width: 100%; position: absolute; left: 0; -webkit-transform: scale(1, 0.333); -ms-transform: scale(1, 0.333); transform: scale(1, 0.333); -webkit-transition: all .5s ease; transition: all .5s ease; } .index-banner-warp .i-banner .swiper-pagination span.swiper-pagination-bullet-active:before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }*/ .index-banner-bot { background: #fff; height: 66px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: 2; } .index-banner-bot .news-scroll { overflow: hidden; padding-left: .75rem; font-size: 16px; height: 66px; width: calc(100% - 310px); } .index-banner-bot .news-scroll .swiper-slide { height: 66px; line-height: 66px; } .index-banner-bot .news-scroll .swiper-slide a { color: #333; } .index-banner-bot .index-bot-right { width: 310px; height: 66px; position: relative; background: #e6e6e6; } .index-banner-bot .swiper-button-warp { width: 180px; height: 66px; position: relative; } .index-banner-bot .swiper-button-warp .swiper-button-next, .index-banner-bot .swiper-button-warp .swiper-button-prev { width: 90px; height: 66px; margin-top: -33px; opacity: 1; -webkit-transition: all .3s ease; transition: all .3s ease; background: none !important; } .index-banner-bot .swiper-button-warp:before { content: ""; position: absolute; width: 1px; height: 25px; background: #cfcfcf; left: 50%; top: 35px; margin-top: -12.5px; } .index-banner-bot .swiper-button-warp .icon-rot { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .index-banner-bot .swiper-button-warp .icon { display: block; width: 15px; height: 26px; margin: 20px auto; fill: #000; } .index-banner-bot .swiper-button-warp .swiper-button-next:hover, .index-banner-bot .swiper-button-warp .swiper-button-prev:hover { opacity: .6; } .index-banner-bot .swiper-suzi-button { width: 90px; position: relative; line-height: 66px; margin-right: 20px; } .index-banner-bot .swiper-suzi-button .swiper-page, .index-banner-bot .swiper-suzi-button .swiper-all-page { width: 30px; height: 66px; text-align: center; } .index-banner-bot .swiper-suzi-button:before { content: ""; position: absolute; width: 12px; height: 1px; background: #1a1a1a; left: 50%; margin-left: -6px; top: 50%; } .i-lista .carlist .li-item { padding: 1.7rem 0; width: 50%; margin: 0 .6%; position: relative; } .i-lista .carlist .li-item img { max-width: 100%; } .i-lista .carlist .li-item .tit-14 { color: #333; line-height: 1; } .i-lista .carlist .li-item:before { content: ""; position: absolute; left: 0; bottom: 0px; height: 3px; width: 100%; -webkit-transform-origin: center right; -ms-transform-origin: center right; transform-origin: center right; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background: #e11223; -webkit-transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; } .i-lista .carlist .li-item:hover:before, .i-lista .carlist .li-item.cur:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left; } .i-lista .carbox { width: 100%; height: 17rem; background: url(../images/img4.jpg) no-repeat left center; position: relative; background-size: 100% 100%; } .i-lista .carbox .n-carbox { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .i-lista .carbox .line { width: 25px; height: 2px; background: #fff; margin-bottom: 15px; opacity: 0; -webkit-transform: translate(0, 10px); -ms-transform: translate(0, 10px); transform: translate(0, 10px); -webkit-transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .i-lista .carbox .tit-40 { margin-bottom: 5px; opacity: 0; -webkit-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px); -webkit-transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .i-lista .carbox .tit-22 { opacity: 0; -webkit-transform: translate(0, 30px); -ms-transform: translate(0, 30px); transform: translate(0, 30px); -webkit-transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .i-lista .carbox .car-left { width: 500px; padding-top: 3rem; margin-right: 4rem; } .i-lista .carbox .libox { margin-top: 1rem; margin-bottom: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; opacity: 0; -webkit-transform: translate(0, 40px); -ms-transform: translate(0, 40px); transform: translate(0, 40px); -webkit-transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .i-lista .carbox .libox .icon-item { text-align: center; width: 26%; padding: 0 5%; border-right: 1px solid rgba(168, 168, 168, 0.16); } .i-lista .carbox .libox img { margin-bottom: 5px; } .i-lista .carbox .libox .icon-item:nth-child(2n) { width: 44%; } .i-lista .carbox .libox .icon-item:nth-child(1) { /*text-align: left;*/ padding-left: 0; } .i-lista .carbox .libox .icon-item:nth-child(3) { /*text-align: left;*/ border-right: 0; padding-right: 0; } .i-lista .carbox .botbox { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; opacity: 0; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); -webkit-transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .i-lista .carbox .botbox .buttonbox { margin-right: 12px; } .i-lista .carbox .botbox .buttonbox:last-child { margin-right: 0; } .i-lista .carbox .car-right { padding-top: 2.5rem; width: 23rem; } .i-lista .carbox .car-right .imgtext { float: right; margin-right: 2rem; position: relative; z-index: 1; -webkit-clip-path: circle(0% at 100% 51%); clip-path: circle(0% at 100% 51%); -webkit-transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1); } .i-lista .carbox .car-right .car { max-width: 100%; margin-top: -.8rem; position: relative; z-index: 2; opacity: 0; -webkit-transform: translate(100px, 0); -ms-transform: translate(100px, 0); transform: translate(100px, 0); -webkit-transition: all 1s cubic-bezier(0.25, 0.96, 0.4, 1.11); transition: all 1s cubic-bezier(0.25, 0.96, 0.4, 1.11); } .i-lista .mengbox { position: absolute; z-index: 3; width: 100%; height: 100%; left: 0; top: 0; background: #000; -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .i-lista .mengbox.cur { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .i-lista .carbox.cur .line, .i-lista .carbox.cur .tit-40, .i-lista .carbox.cur .tit-22, .i-lista .carbox.cur .libox, .i-lista .carbox.cur .botbox { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .i-lista .carbox.cur .tit-40 { -webkit-transition-delay: .1s; transition-delay: .1s; } .i-lista .carbox.cur .tit-22 { -webkit-transition-delay: .15s; transition-delay: .15s; } .i-lista .carbox.cur .libox { -webkit-transition-delay: .2s; transition-delay: .2s; } .i-lista .carbox.cur .botbox { -webkit-transition-delay: .25s; transition-delay: .25s; } .i-lista .carbox.cur .car-right .car { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: .4s; transition-delay: .4s; } .i-lista .carbox.cur .car-right .imgtext { -webkit-transition-delay: .3s; transition-delay: .3s; -webkit-clip-path: circle(150% at 100% 51%); clip-path: circle(150% at 100% 51%); } .i-listb { background: #46474c; height: 16.75rem; position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .i-listb .car-img { width: 50%; height: 16.75rem; overflow: hidden; position: relative; z-index: 1; /* opacity: 0; -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0);*/ opacity:1; -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .i-listb .car-img .swiper-slide { background-repeat: no-repeat; background-position: center center; background-size: cover; } .i-listb .news-text { width: 50%; height: 16.75rem; overflow: hidden; position: relative; z-index: 1; opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); /*opacity: 0; -webkit-transform: translate(100px, 0); -ms-transform: translate(100px, 0); transform: translate(100px, 0);*/ -webkit-transition: all 0.5s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 0.5s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .i-listb .news-text{ padding: 0px 6.5rem 0 2.5rem; background: #46474c; } .i-listb .news-text .swiper-slide { width: 100%; height: 16.75rem; } .i-listb .news-text{ position: relative; } .i-listb .news-text .tab-box { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: .9rem; position: relative; width:100%; /*left:0;*/ padding:3rem 0 .9rem; background:#46474c; z-index:3; } .i-listb .news-text .tab-li { width: 90px; height: 30px; line-height: 30px; text-align: center; background: #797979; margin-left: 5px; cursor: pointer; } .i-listb .news-text .tab-li p { position: relative; z-index: 2; } .i-listb .news-text .hover_1:before { z-index: 1; background: #d00010; width: 350px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .i-listb .news-text .hover_1:hover:before, .i-listb .news-text .hover_1.cur:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .i-listb .news-text .tit-24 { margin-bottom: .75rem; } .i-listb .news-text .tit-16 { margin-bottom: 1.4rem; line-height: 26px; max-height:104px; overflow: hidden; } .i-listb .news-text .swiper-pagination { right: 2.5rem; } .i-listb .news-text .swiper-pagination span { margin: 12px 0; width: 6px; height: 6px; display: block; background: #fff; opacity: 1; -webkit-transition: all .5s; transition: all .5s; } .i-listb .news-text .swiper-pagination .swiper-pagination-bullet-active { background: #d00010; } .i-listb .news-text .colbox { position: absolute; right: 2.5rem; width: 35px; top: 50%; } .i-listb .news-text .colbox .swiper-button-prev, .i-listb .news-text .colbox .swiper-button-next { top: 0; width: 35px; height: 35px; left: 15px; right: 0; margin-top: 0; } .i-listb .news-text .colbox .swiper-button-prev { background: url(../images/icon-tianjia1.png) no-repeat center; background-size: 35px 35px; } .i-listb .news-text .colbox .swiper-button-next { background: url(../images/icon-tianjia1.png) no-repeat center; background-size: 35px 35px; bottom: 0; top: auto; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .i-listb .car-img.cur, .i-listb .news-text.cur { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .i-listb .mengbox { position: absolute; z-index: 3; width: 100%; height: 100%; left: 0; top: 0; background: #000; -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .i-listb .mengbox.cur { -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .i-listc { background: #ebebeb; padding-bottom: 2.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .i-listc .li-item { border-right: 1px solid #d3d3d3; } .i-listc .li-item:last-child { margin-right: none; } .i-listc .text { padding: .5rem .65rem 1.75rem; } .i-listc .tit-18 { margin-bottom: 3px; } .line-left { position: absolute; height: calc(100% - 90px); width: 1px; left: 50px; top: 90px; opacity: .2; z-index: 6; } .line-left:before { content: ""; position: absolute; left: 0; top: 0; width: 1px; background: #595759; height: calc(50vh - 180px); } .line-left:after { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; background: #595759; height: calc(100% - 50vh + 20px); } /*渚ф爮鎮诞妗?/ .sidebar-box { width: 65px; position: fixed; z-index: 9; right: 0; top: calc(348 * 0.052vw); } .sidebar-box .itembox { width: 100%; height: 62px; display: block; position: relative; margin-bottom: 2px; overflow: hidden; } .sidebar-box .imgbtn { width: 65px; height: 40px; overflow: hidden; } .sidebar-box .imgbtn img { position: absolute; left: 0; top: 0; width: 65px; height: 40px; overflow: hidden; } .sidebar-box .imgbtn .img1 { /*animation: toTopFromBottom 0.3s forwards;*/ } .sidebar-box .itembox:nth-child(1) { background-color: #e51626; } .sidebar-box .itembox:nth-child(2) { background-color: #c6182a; } .sidebar-box .itembox:nth-child(3) { background-color: #a8192c; } .sidebar-box .itembox:nth-child(4) { background-color: #831526; } .sidebar-box .itembox:nth-child(5) { background-color: #68101e; } .sidebar-box .itembox:hover .img1 { animation: toTopFromBottom 0.3s forwards; } .sidebar-box .back-top { opacity: 0; -webkit-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px); -webkit-transition: all .5s ease; transition: all .5s ease; } .sidebar-box .back-top.active { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .n-header { height: 90px; position: relative; } .n-header .header1 { background: #fff; } .n-header .header1 .header-left{ position: relative; z-index:9; } .n-header .header1 h1 img.img2 { opacity: 1; } .n-header .header1 h1 img.img1 { opacity: 0; } .n-header .header1 nav li > a { color: #000; } .n-header .header1 .header-right .search-btn:before { color: #000; } .n-header .header1 .header-right .search-btn:hover:before { color: #d00010; } .li-img .img { overflow: hidden; } .li-img .img img { width: 100%; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition-duration: 4s; transition-duration: 4s; -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); } .li-img:hover .img img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .nli-img { overflow: hidden; } .nli-img img { width: 100%; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition-duration: 4s; transition-duration: 4s; -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); } .nli-img:hover img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .n-banner { width: 100%; height: 10rem; position: relative; background-repeat: no-repeat !important; background-position-x: center; background-size: cover !important /*.scroll_down{ width: 60px; height: 60px; border:1px solid rgba(255,255,255,.2); position: absolute; border-radius: 50%; left: 50%; margin-left: -30px; bottom: 1.8rem; &:before{ color:#fff; transform:rotate(-90deg); font-size: 24px; position: absolute; left: 50%; top: 50%; margin-top: -16px; margin-left: -12.5px; opacity: .7; animation: start 1.5s infinite ease-in-out; } }*/ } .n-banner .banner-tit { padding-top: 3.25rem; text-align: center; position: relative; } .n-banner .banner-tit .tit-h { display: inline-block; padding: 0 80px; line-height: 1.5; position: relative; } .n-banner .banner-tit .tit-h:before { content: ""; position: absolute; width: 35px; height: 1px; background: rgba(255, 255, 255, 0.56); left: 0; top: 50%; } .n-banner .banner-tit .tit-h:after { content: ""; position: absolute; width: 35px; height: 1px; background: rgba(255, 255, 255, 0.56); right: 0; top: 50%; } .n-banner .banner-tit .tit-p { display: block; } .n-banner .rec-news { width: 700px; position: absolute; bottom: .8rem; left: 3.5rem; z-index: 2; } .n-banner .rec-news .tit-34 { width: 100%; position: relative; } .n-banner .rec-news .tit-34 .p { width: calc(100% - 200px); } .n-banner .rec-news .bottonbox { height: 45px; line-height: 45px; font-size: 16px; margin: 0 15px; display: block; width: 130px; position: absolute; right: 0; top: 0; box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,.5); } .n-banner .rec-news .bottonbox p { display: inline-block; color: #fff; position: relative; z-index: 2; } .n-banner .rec-news .bottonbox p:before { content: ""; position: absolute; width: 25px; height: 25px; left: 0; top: 50%; margin-top: -12.5px; } .n-banner .rec-news .hover_1:before { z-index: 1; background: #d00010; width: 250px; height: 120px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-banner .rec-news .hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-banner:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent); background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); z-index: 1; } @-webkit-keyframes start { 0%,30% { opacity: 0; -webkit-transform: translate(0, -8px) rotate(-90deg); transform: translate(0, -8px) rotate(-90deg); } 60% { opacity: 1; -webkit-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); } 100% { opacity: 0; -webkit-transform: translate(0, 10px) rotate(-90deg); transform: translate(0, 10px) rotate(-90deg); } } @keyframes start { 0%,30% { opacity: 0; -webkit-transform: translate(0, -8px) rotate(-90deg); transform: translate(0, -8px) rotate(-90deg); } 60% { opacity: 1; -webkit-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); } 100% { opacity: 0; -webkit-transform: translate(0, 10px) rotate(-90deg); transform: translate(0, 10px) rotate(-90deg); } } .car-banner { width: 100%; height: 21.5rem; position: relative; background-repeat: no-repeat !important; background-position-x: center; background-size: cover !important; } .news-nav { padding: 1.5rem 0 .75rem; background: #fff; width: 90%; margin: 0 auto; } .news-nav .ul { display: inline-block; } .news-nav .ul .li { float: left; line-height: 40px; margin: 0 20px; color: #333; } .news-nav .ul .li:after { height: 3px; background-color: #e60012; } .news-nav .ul .li:hover::after, .news-nav .ul .li.cur::after { -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .n-news { padding-bottom: 4.25rem /*.p-tit{ z-index: 2; opacity:1; transform-origin: 0% 50%; transform:translate(0,0) scale(1); transition: all .5s ease; }*/ /*.n-text{ background:rgba(255,255,255,.95); width:calc(100% - 40px); height:calc(100% - 40px); position: absolute; left:20px; top: 20px; padding:1rem; opacity: 0; transform-origin: 50% 0%; transform:rotateX(90deg) perspective(400px); transition: all .5s ease; .tit-20{ color: #333; line-height: 1.2; position: relative; padding: 0; left: 0; } }*/ } .n-news .li-item { float: left; width: 32%; margin-right: 2%; margin-bottom: 2%; position: relative; overflow: hidden; } .n-news .li-item:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent); background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); z-index: 1; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-news .li-item:nth-child(3n) { margin-right: 0; } .n-news .li-item .tit-20 { padding: 8px .6rem; } .n-news .tit-14 { color: #fff; position: absolute; bottom: 120px; line-height: 1.5; left: .6rem; opacity: 0; z-index: 2; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-news .ntit-20 { color: #fff; position: absolute; z-index: 2; bottom: .3rem; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-news .bottonbox { height: 45px; line-height: 45px; display: block; width: 130px; position: absolute; left: .6rem; bottom: .3rem; z-index: 2; opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-transform: translate(0, 60px); -ms-transform: translate(0, 60px); transform: translate(0, 60px); box-shadow: inset 0px 0px 0px 2px #dcdddd; } .n-news .bottonbox p { display: inline-block; color: #fff; position: relative; z-index: 2; } .n-news .bottonbox p:before { content: ""; position: absolute; width: 25px; height: 25px; left: 0; top: 50%; margin-top: -12.5px; } .n-news .bottonbox:hover p { color: #fff; } .n-news .hover_1:before { z-index: 1; background: #d00010; width: 250px; height: 120px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-news .hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-news .li-item:hover .tit-14 { opacity: 1; } .n-news .li-item:hover .bottonbox { -webkit-transform: translate(0, 0%); -ms-transform: translate(0, 0%); transform: translate(0, 0%); opacity: 1; } .n-news .li-item:hover .ntit-20 { bottom: calc(50px + .3rem); } .n-news .wpage { margin-top: 1rem; border-top: 1px solid #efeeee; } .n-promotion .promotion-left { width: 75%; } .n-promotion .promotion-left .promotion-list { border-right: 1px solid #d7d7d7; } .n-promotion .promotion-left .li-item { width: 48%; margin-right: 2%; margin-bottom: 2%; } .n-promotion .promotion-left .wpage { width: 94%; margin: 1.5rem auto 0; } .n-promotion .promotion-right { width: 25%; padding: 0 0 0 .75rem; } .n-promotion .promotion-right .tit { margin-bottom: 12px; } .n-promotion .promotion-right .nli-img { position: relative; margin-bottom: 20px; display: block; } .n-promotion .promotion-right .nli-img:last-child { margin-bottom: 0; } .n-promotion .promotion-right .nli-img:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent); background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); z-index: 1; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-promotion .promotion-right .p { font-size: 14px; color: #fff; line-height: 1.6; position: absolute; bottom: .3rem; width: 92%; left: 4%; z-index: 2; } .news-info-top { height: 9.8rem; position: relative; z-index: 1; background-repeat: no-repeat !important; background-position: center top !important; background-size: cover !important; } .news-info { background: #f8f7f7; padding-bottom: 5rem; } .news-info .top { margin-bottom: 1.5rem; position: relative; } .news-info .top .time { margin-bottom: 10px; } .news-info .top .tit-30 { width: 70%; } .news-info .top .news-title { position: absolute; right: 0; top: 0; } .news-info .w1220 { width: 1220px; margin: 0 auto; position: relative; margin-top: -6rem; z-index: 2; } .news-info .info-box { min-height: 800px; background: #fff; padding: 1.75rem 0 2rem; position: relative; } .news-info .info-box-left { width: 75%; padding: 0 1.25rem; float: left; border-right: 1px solid #e7e7e7; } .news-info .info-box-left .text { line-height: 1.8; padding-bottom: 3rem; border-bottom: 1px solid #e7e7e7; } .news-info .info-box-left .text img{ margin:15px 0; } .news-info .info-box-left .bot { padding-top: 1rem; } .news-info .info-box-left .bot a { display: block; color: #666; margin-bottom: 10px; padding-left: 10px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all .3s ease; transition: all .3s ease; } .news-info .info-box-left .bot a:before { content: ""; position: absolute; width: 5px; height: 2px; top: 50%; left: 0; margin-top: -1px; background: #d3d3d3; -webkit-transition: all .3s ease; transition: all .3s ease; } .news-info .info-box-left .bot a:hover { color: #e70012; padding-left: 25px; } .news-info .info-box-left .bot a:hover:before { background: #e70012; width: 15px; } .news-info .info-box-right { position: absolute; right: 0; width: calc((1220px * 0.25)); padding: 0 1rem; } .news-info .info-box-right .tit-title { margin-bottom: 15px; } .news-info .info-box-right .li { margin-bottom: 10px; color: #666; display: block; } .news-info .info-box-right .li:hover { color: #e70012; -webkit-transition: all .3s ease; transition: all .3s ease; } .news-info .fx-news-left { width: 30px; left: -60px; top: 4rem; position: absolute; } .news-info .fx-news-left a { margin: 0 auto; width: 30px; height: 30px; padding: 0; display: block; float: none; background-size: 30px 30px; background-position: center center; background-repeat: no-repeat; } .news-info .fx-news-left a + a { margin-top: .6rem; } .news-info .fx-news-left .bds_tsina { background-image: url(../images/share-sina.png); } .news-info .fx-news-left .bds_weixin { background-image: url(../images/share-wx.png); } .news-info .fx-news-left .bds_qzone { background-image: url(../images/share-qzone.png); } .news-info .fx-news-left .bds_more { background-image: url(../images/share-more.png); } .news-info .info-box-right { -webkit-transition: top .5s ease,bottom .5s ease; transition: top .5s ease,bottom .5s ease; } .news-info .fx-news-left { -webkit-transition: top .5s ease,bottom .5s ease; transition: top .5s ease,bottom .5s ease; } .news-info .info-box-right.active { position: fixed; right: auto; top: 3rem; margin-left: calc(1220px - (1220px * 0.25)); } .news-info .fx-news-left.active { position: fixed; left: auto; top: 3rem; margin-left: -60px; } .news-info .info-box-right.on { position: absolute; right: auto; top: auto; bottom: 2rem; width: 320px; margin-left: calc(1220px - 25%); } .news-info .fx-news-left.on { position: absolute; left: auto; top: auto; bottom: 2rem; margin-left: -60px; } .n-derler { position: relative; height: 810px; } .n-derler #dituContent { height: 810px; width: 100%; } .n-derler #dituContent .BMapLabel { display: none !important; } .n-derler #dituContent .BMap_Marker > div { width: 45px !important; height: 45px !important; } .n-derler #dituContent .BMap_Marker img { max-width: 100%; max-height: 100%; margin-left: 0px !important; margin-top: 0px !important; } .n-derler .mapbox { width: 440px; height: 660px; position: absolute; z-index: 2; top: 60px; left: 2rem; background: #fff; overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1) /*.map-step1{ z-index: 3; }*/ } .n-derler .mapbox .top { padding: 30px; } .n-derler .mapbox .top .city-info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; position: relative; } .n-derler .mapbox .top .province-name { padding-left: 35px; background: url(../images/img10.png) no-repeat left center; background-size: 19px 24px; position: relative; } .n-derler .mapbox .top .province-name, .n-derler .mapbox .top .city-name { font-size: 15px; line-height: 24px; display: block; } .n-derler .mapbox .top .city-name { margin-left: 10px; } .n-derler .mapbox .top .city-change { position: absolute; font-size: 15px; right: 0; top: 0; line-height: 24px; display: block; color: #e60012; cursor: pointer; } .n-derler .mapbox .top .form-select { width: 100%; height: 50px; line-height: 30px; padding: 15px; border: 1px solid #dadada; margin-top: 20px; } .n-derler .mapbox .top .form-select .input1 { width: calc(100% - 60px); background: none; border: none; line-height: 20px; font-size: 16px; color: #666; } .n-derler .mapbox .top .form-select .input2 { background: url(../images/search.png) no-repeat center; width: 40px; height: 20px; border: none; } .n-derler .mapbox .top .p { font-size: 15px; line-height: 1.5; color: #666; margin-top: 15px; } .n-derler .mapbox .map-list { width: 100%; } .n-derler .mapbox .map-list .li-item { padding: 28px 30px 28px; position: relative; border-bottom: 1px solid #e0e7ec; cursor: pointer; } .n-derler .mapbox .map-list .li-item .tit-name { font-size: 18px; line-height: 1.2; color: #333; margin-bottom: 10px; font-weight: bold; } .n-derler .mapbox .map-list .li-item .tit-add { margin-bottom: 5px; } .n-derler .mapbox .map-list .li-item .tit-add, .n-derler .mapbox .map-list .li-item .tit-tel { font-size: 15px; line-height: 1.5; color: #666; } .n-derler .mapbox .map-list .li-item .distance { position: absolute; right: 10px; top: 30px; font-size: 14px; line-height: 1.5; color: #999; } .n-derler .mapbox .map-list .li-item:last-child { border-bottom: none; } .n-derler .mapbox .map-list .map-list-item { max-height: 410px; } .n-derler .mapbox .map-step { position: absolute; width: 440px; height: 660px; background: #fff; left: 0; top: 0; } .n-derler .mapbox .map-step2 .li-item { padding: 28px 30px 28px; position: relative; cursor: pointer; } .n-derler .mapbox .map-step2 .li-item .tit-name { font-size: 18px; line-height: 1.2; color: #333; margin-bottom: 15px; font-weight: bold; } .n-derler .mapbox .map-step2 .li-item .tit-p { font-size: 15px; line-height: 1.5; color: #666; margin-bottom: 8px; } .n-derler .mapbox .map-step2 .li-item .distance { position: absolute; right: 10px; top: 30px; font-size: 14px; line-height: 1.5; color: #999; } .n-derler .mapbox .map-step3 { /*.province-list,.city-list{ position: absolute; width: 100%; height:486px; bottom:46px; }*/ } .n-derler .mapbox .map-step1 { z-index: 4; } .n-derler .mapbox .map-step2 { z-index: 3; } .n-derler .mapbox .map-step3 { z-index: 2; } .n-derler .mapbox .map-step4 { z-index: 1; } .n-derler .mapbox .province-box, .n-derler .mapbox .city-box { max-height: 480px; } .n-derler .mapbox .tit-title { color: #333; margin: 15px 0 0; } .n-derler .mapbox .tit-leb { padding: 0 30px; border-bottom: 1px solid #e0e7ec; } .n-derler .mapbox .tit-leb span { line-height: 45px; display: inline-block; position: relative; color: #333; } .n-derler .mapbox .tit-leb span:before { content: ""; position: absolute; width: 100%; height: 3px; background: #e60012; bottom: 0px; left: 0; } .n-derler .mapbox .tit-leb .s-city { line-height: 45px; height: 45px; } .n-derler .mapbox .p-item { padding: 0 30px; line-height: 55px; height: 55px; overflow: hidden; font-size: 16px; color: #888; background: #fff; position: relative; border-bottom: 1px solid #e0e7ec; cursor: pointer; -webkit-transition: all .3s ease; transition: all .3s ease; } .n-derler .mapbox .p-item p:before { font-size: 12px; color: #e60012; position: absolute; right: 25px; -webkit-transition: all .3s ease; transition: all .3s ease; } .n-derler .mapbox .p-item:hover { background: #e60012; color: #fff; } .n-derler .mapbox .p-item:hover p:before { color: #fff; right: 15px; } .n-derler .mapbox .back-btn { padding: 30px 25px 15px 25px; } .n-derler .mapbox .back-btn .button { padding-left: 18px; font-size: 15px; line-height: 20px; position: relative; cursor: pointer; -webkit-transition: all .3s ease; transition: all .3s ease; } .n-derler .mapbox .back-btn .button:before { font-size: 12px; left: 0; position: absolute; color: #333; -webkit-transition: all .3s ease; transition: all .3s ease; } .n-derler .mapbox .back-btn .button:hover { color: #e60012; } .n-derler .mapbox .back-btn .button:hover:before { color: #e60012; } .n-derler .mapbox .bot-btn { padding: 0 30px; width: 100%; position: absolute; bottom: 40px; z-index: 1; } .n-derler .mapbox .bot-btn a { height: 50px; line-height: 50px; text-align: center; display: block; position: relative; background: #e60012; } .n-derler .mapbox .bot-btn a p { position: relative; z-index: 3; color: #fff; display: block; } .n-derler .mapbox .bot-btn2 { bottom: 100px; } .n-derler .mapbox .bot-btn2 a { background: #3d3d3d; } .n-derler .mapbox .bot-btn2 .hover_1:before { background: #2d2d2d; } .n-derler .mapbox .hover_1:before { z-index: 1; background: #ad000d; width: 400px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-derler .mapbox .hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-derler .mapbox .mCSB_scrollTools { background: #f9f9f9; } .n-derler .mapbox .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: #aaa !important; width: 6px; } .n-derler .mapbox .mCSB_scrollTools .mCSB_draggerRail { display: none !important; } .n-derler .mapbox .map-step1, .n-derler .mapbox .map-step2, .n-derler .mapbox .map-step3, .n-derler .mapbox .map-step4 { -webkit-transition: all 1s cubic-bezier(0.85, -0.12, 0, 1); transition: all 1s cubic-bezier(0.85, -0.12, 0, 1); } .n-derler .mapbox .map-step1.active { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); } .n-derler .mapbox .map-step3.active { -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); } .n-derler .mapbox .map-step3.on { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); } .n-derler .mapbox .map-step4.active { -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); } .n-derler .mapbox .map-step2.active { -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); } .n-derler .mapbox .map-step2.on { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); } .n-derler .mapbox .map-step2, .n-derler .mapbox .map-step3, .n-derler .mapbox .map-step4 { -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); } .n-handbook { background: #fff; padding: 2rem 0 4.5rem; } .n-handbook .tabbox { width: 1200px; margin: 2rem auto 0; } .n-handbook .tabbox .select-step1 { width: 48%; padding-bottom: 20px; line-height: 24px; color: #777; border-bottom: 1px solid #e8e8e8; } .n-handbook .tabbox .select-step1 .sp1 { color: #777; font-size: 18px; margin-right: 20px; text-transform: uppercase; } .n-handbook .tabbox .select-step1.cur { color: #000; } .n-handbook .tabbox .select-step1.cur .sp1 { color: #e60012; } .n-handbook .lista { width: 1200px; margin: 0 auto; } .n-handbook .carbox { padding-top: 1.975rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; border-bottom: 1px solid #ececec; } .n-handbook .carbox .li-item { width: 22%; margin-right: 4%; margin-bottom: 1.8rem; cursor: pointer; display: block; position: relative; top: 0; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .n-handbook .carbox .li-item .car-img { position: relative; left: 0; -webkit-transition: all 0.3s 0.3s cubic-bezier(0.57, -0.24, 0.32, 1.13); transition: all 0.3s 0.3s cubic-bezier(0.57, -0.24, 0.32, 1.13); } .n-handbook .carbox .li-item .car-img img { max-width: 100%; display: inline-block; } .n-handbook .carbox .li-item:hover { top: -20px; } .n-handbook .carbox .li-item:hover .car-img { left: -25px; } .n-handbook .carbox .li-item:nth-child(3n) { margin-right: 0; } .n-handbook .car-item { padding: 1.5rem 0 2rem; border-bottom: 1px solid #ececec; } .n-handbook .car-item .tit { color: #000; line-height: 1; margin-bottom: 1.25rem; } .n-handbook .car-item .car-left { width: 280px; } .n-handbook .car-item .car-left img { max-width: 100%; display: inline-block; } .n-handbook .car-item .car-right { width: calc(100% - 320px); display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .n-handbook .car-item .car-right a { display: block; width: 23%; text-align: center; font-size: 16px; line-height: 50px; margin-right: 2.6%; margin-bottom: 2.6%; box-shadow: inset 0px 0px 0px 2px #ebebeb; } .n-handbook .car-item .car-right a p { position: relative; color: #000; z-index: 2; -webkit-transition: all .5s .1s ease; transition: all .5s .1s ease; } .n-handbook .car-item .car-right .hover_1:before { width: 250px; height: 120px; background: #373737; -webkit-transform-origin: center right; -ms-transform-origin: center right; transform-origin: center right; -webkit-transform: translate(-50%, -50%) scaleX(0); -ms-transform: translate(-50%, -50%) scaleX(0); transform: translate(-50%, -50%) scaleX(0); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.85, -0.19, 0.41, 1.18); transition: transform 0.6s cubic-bezier(0.85, -0.19, 0.41, 1.18); } .n-handbook .car-item .car-right a:nth-child(4n) { margin-right: 0; } .n-handbook .car-item .car-right a:hover:before, .n-handbook .car-item .car-right a.cur:before { -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left; -webkit-transform: translate(-50%, -50%) scaleX(1); -ms-transform: translate(-50%, -50%) scaleX(1); transform: translate(-50%, -50%) scaleX(1); } .n-handbook .car-item .car-right a:hover p, .n-handbook .car-item .car-right a.cur p { color: #fff; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-handbook .bot-href { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 1.9rem 0 auto; } .n-handbook .bot-href a { display: block; width: 200px; text-align: center; font-size: 14px; line-height: 60px; margin: 0 10px; box-shadow: inset 0px 0px 0px 2px #373737; } .n-handbook .bot-href a p { position: relative; color: #000; z-index: 2; -webkit-transition: all .5s .1s ease; transition: all .5s .1s ease; } .n-handbook .bot-href .hover_1:before { width: 250px; height: 120px; background: #e80520; -webkit-transform-origin: center right; -ms-transform-origin: center right; transform-origin: center right; -webkit-transform: translate(-50%, -50%) scaleX(0); -ms-transform: translate(-50%, -50%) scaleX(0); transform: translate(-50%, -50%) scaleX(0); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.85, -0.19, 0.41, 1.18); transition: transform 0.6s cubic-bezier(0.85, -0.19, 0.41, 1.18); } .n-handbook .bot-href a:hover:before { -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left; -webkit-transform: translate(-50%, -50%) scaleX(1); -ms-transform: translate(-50%, -50%) scaleX(1); transform: translate(-50%, -50%) scaleX(1); } .n-handbook .bot-href a:hover p { color: #fff; -webkit-transition: all .5s ease; transition: all .5s ease; } .nav-car_buying { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 66px; line-height: 66px; border-bottom: 1px solid #ececec; } .nav-car_buying a { font-size: 16px; color: #000; margin: 0 1.25rem; display: block; position: relative; -webkit-transition: all .3s ease; transition: all .3s ease; } .nav-car_buying a:after { height: 3px; background: #d00010; } .nav-car_buying a:hover, .nav-car_buying a.cur { color: #000; font-weight: bold; } .nav-car_buying a:hover:after, .nav-car_buying a.cur:after { -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .n-car_buying .tit-h { display: inline-block; padding: 0 80px; line-height: 1.5; position: relative; } .n-car_buying .tit-h:before { content: ""; position: absolute; width: 35px; height: 1px; background: #e7e7e7; left: 0; top: 50%; } .n-car_buying .tit-h:after { content: ""; position: absolute; width: 30px; height: 1px; background: #e7e7e7; right: 0; top: 50%; } .n-car_buying .lista { padding: 1.8rem 0; background: #fff; text-align: center; } .n-car_buying .lista .button-box { width: 560px; height: 100px; margin: 1.5rem auto 0; } .n-car_buying .lista .button-box a { width: 50%; height: 100px; display: inline-block; float: left; } .n-car_buying .lista .button-box .button1 { background: #e60012; } .n-car_buying .lista .button-box .button1 span { background: url(../images/img11.png) no-repeat left center; text-align: left; height: 100px; line-height: 100px; } .n-car_buying .lista .button-box .button1 .sp1 { font-size: 14px; line-height: 1.5; color: #fff; margin-top: 22px; } .n-car_buying .lista .button-box .button1 .sp2 { font-size: 22px; line-height: 1.5; color: #fff; } .n-car_buying .lista .button-box .button2 { background: #f7f7f7; } .n-car_buying .lista .button-box .button2 span { background: url(../images/img11-1.png) no-repeat left center; } .n-car_buying .lista .button-box .button2 .sp1 { font-size: 22px; line-height: 100px; color: #000; } .n-car_buying .lista .button-box span { display: inline-block; padding-left: 60px; } .n-car_buying .lista .p { color: #444; width: 820px; margin: .8rem auto 0; line-height: 2; } .n-car_buying .listb { background: #f4f4f4; padding: 2rem 0 3.5rem; } .n-car_buying .listb .tit-h:before { background: #dadada; } .n-car_buying .listb .tit-h:after { background: #dadada; } .n-car_buying .listb .eventbox { width: 1380px; margin: 1.75rem auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .n-car_buying .listb .eventbox .event-li { width: 32%; margin-right: 2%; margin-bottom: 2%; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .n-car_buying .listb .eventbox .event-li:nth-child(3n) { margin-right: 0; } .n-car_buying .listb .eventbox .img { height: 150px; width: 50%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .n-car_buying .listb .eventbox .p-box { padding: .75rem .6rem 10px; color: #333; width: 50%; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-car_buying .listb .eventbox .p-box .p-18 { line-height: 1.5; } .n-car_buying .listb .event-li:hover .p-box { color: #e60012; } .n-text_drive { padding-top: 2.5rem; position: relative; } .n-text_drive:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 25%; background: -webkit-linear-gradient(rgba(0, 0, 0, 0.05), transparent); background: linear-gradient(rgba(0, 0, 0, 0.05), transparent); z-index: 1; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-text_drive .lista .carbox { border-bottom: none; } .n-drive-two { padding: 2.5rem 0; position: relative; } .n-drive-two:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 25%; background: -webkit-linear-gradient(rgba(0, 0, 0, 0.05), transparent); background: linear-gradient(rgba(0, 0, 0, 0.05), transparent); z-index: 1; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-drive-two .drive-form-box { position: relative; z-index: 2; } .n-drive-two .tabbox { width: 1200px; margin: 2rem auto 0; } .n-drive-two .tabbox .select-step1 { width: 70px; padding-bottom: 20px; line-height: 24px; color: #777; border-bottom: 1px solid #e8e8e8; } .n-drive-two .tabbox .select-step1 .sp1 { color: #777; font-size: 18px; text-transform: uppercase; } .n-drive-two .tabbox .select-step2 { width: calc(100% - 110px); padding-bottom: 20px; line-height: 24px; color: #777; border-bottom: 1px solid #e8e8e8; } .n-drive-two .tabbox .select-step2 .sp1 { color: #777; font-size: 18px; margin-right: 20px; text-transform: uppercase; } .n-drive-two .tabbox .select-step2.cur { color: #000; } .n-drive-two .tabbox .select-step2.cur .sp1 { color: #e60012; } .n-drive-two .lista { width: 1200px; padding: 1.25rem 0; margin: 0 auto; border-bottom: 1px solid #ececec; } .n-drive-two .lista .stepbox { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .n-drive-two .lista .stepbox .sp1 { width: 145px; font-size: 16px; color: #333; line-height: 50px; } .n-drive-two .lista .input-step-box { width: calc(100% - 145px); display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .n-drive-two .lista .input-step-box .input-step { padding: 5px 10px; width: 32%; margin-right: 2%; border: 1px solid #dadada; } .n-drive-two .lista .input-step-box .input-step select { background: none; border: none; width: 100%; font-size: 16px; color: #333; height: 40px; line-height: 40px; } .n-drive-two .lista .input-step-box .input-step:nth-child(3n) { margin-right: 0; } .n-drive-two .lista .mapbox { margin-top: 30px; width: calc(100% - 145px); margin-left: 145px; } .n-drive-two .lista .mapbox .button { padding-left: 25px; height: 30px; line-height: 30px; position: relative; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-drive-two .lista .mapbox .button:before { position: absolute; left: 0; font-size: 14px; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-drive-two .lista .mapbox .button.on { color: #e60012; } .n-drive-two .lista .mapbox .button.on:before { color: #e60012; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .n-drive-two .lista .mapbox .map-ditu { height: 0px; width: 100%; overflow: hidden; position: relative; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-drive-two .lista .mapbox .map-ditu.on { height: 400px; margin-bottom: 20px; } .n-drive-two .lista .mapbox #dituContent { width: 100%; height: 400px; position: absolute; left: 0; top: 0; } .n-drive-two .lista .mapbox #dituContent .BMapLabel { display: none !important; } .n-drive-two .lista .mapbox #dituContent .BMap_Marker > div { width: 30px !important; height: 30px !important; } .n-drive-two .lista .mapbox #dituContent .BMap_Marker img { max-width: 100%; max-height: 100%; margin-left: 0px !important; margin-top: 0px !important; } .n-drive-two .lista .mapbox #dituContent { height: 400px; } .n-drive-two .listb { width: 1200px; padding: 1.25rem 0; margin: 0 auto; border-bottom: 1px solid #ececec; } .n-drive-two .listb .stepbox { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .n-drive-two .listb .stepbox .sp1 { width: 145px; font-size: 16px; color: #333; line-height: 50px; } .n-drive-two .listb .input-step-box { width: calc(100% - 145px); display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .n-drive-two .listb .input-step-box .input-step { padding: 15px 10px; width: 32%; margin-right: 2%; border: 1px solid #dadada; } .n-drive-two .listb .input-step-box .input-step select { background: none; border: none; width: 100%; font-size: 16px; color: #333; height: 20px; line-height: 20px; } .n-drive-two .listb .input-step-box .input-step:nth-child(3n) { margin-right: 0; } .n-drive-two .listb .input-step-box .input-step .input1 { background: none; border: none; width: 100%; font-size: 16px; color: #333; height: 20px; line-height: 20px; } .n-drive-two input:-moz-placeholder { color: #999 !important; } .n-drive-two input::-moz-placeholder { color: #999 !important; } .n-drive-two input:-ms-input-placeholder { color: #999 !important; } .n-drive-two input::-webkit-input-placeholder { color: #999 !important; } .n-drive-two .drive-bot { width: 1200px; margin: 1.25rem auto 0; } .n-drive-two .drive-bot .ndrive-bot { width: calc(100% - 145px); margin-left: 145px /*闅愯棌鎺夋垜浠ā鍨嬬殑checkbox*/ /*鏈€変腑鏃?/ /*閫変腑checkbox鏃?淇敼鑳屾櫙鍥剧墖鐨勪綅缃?/ } .n-drive-two .drive-bot .ndrive-bot span { color: #e60012; cursor: pointer; text-decoration: underline; } .n-drive-two .drive-bot .ndrive-bot .input2 { appearance: none; -webkit-appearance: none; outline: none; width: 18px; height: 18px; opacity: 0; top: 3px; position: relative; z-index: 2; margin-right: 15px; } .n-drive-two .drive-bot .ndrive-bot .input2 + span { width: 18px; height: 18px; border: 1px solid #dfdfdf; position: absolute; left: 0; /*margin-right:15px;*/ top: 3px; z-index: 1; } .n-drive-two .drive-bot .ndrive-bot .input2:checked + span { background: url(../images/img13.jpg) no-repeat center center; } .n-drive-two .drive-bot .ndrive-bot .bot-btn { margin-top: 1.25rem; width: 280px; z-index: 1; text-align: center; } .n-drive-two .drive-bot .ndrive-bot .bot-btn input { background: none; border: none; display: block; width: 100%; line-height: 45px; position: relative; color: #fff; z-index: 2; } .n-drive-two .drive-bot .ndrive-bot .bot-btn .submit { height: 50px; line-height: 50px; text-align: center; display: block; position: relative; background: #d00010; } .n-drive-two .drive-bot .ndrive-bot .bot-btn .submit p { position: relative; z-index: 3; color: #fff; display: block; } .n-drive-two .drive-bot .ndrive-bot .bot-btn .hover_1:before { z-index: 1; background: #ad000d; width: 400px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-drive-two .drive-bot .ndrive-bot .bot-btn .hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-about .tit-h { display: inline-block; padding: 0 80px; line-height: 1.5; position: relative; } .n-about .tit-h:before { content: ""; position: absolute; width: 35px; height: 1px; background: #e7e7e7; left: 0; top: 50%; } .n-about .tit-h:after { content: ""; position: absolute; width: 30px; height: 1px; background: #e7e7e7; right: 0; top: 50%; } .n-about .lista { padding: 1.75rem 0; background: #fff; } .n-about .lista .about-text { width: 1280px; margin: 1rem auto 0; line-height: 2; } .n-about .lista .about-text img { margin: 0 auto; display: block; } .n-about .lista .bot-tit .img1 { margin: 1rem 0; } .n-about .lista .bot-tit p { color: #000; font-size: 26px; line-height: 1.2; } .n-about .listb { height: 19rem; overflow: hidden; position: relative; background-size: cover; } .n-about .listb .tit-h { left: 50%; top: 1.8rem; position: absolute; z-index: 2; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: #fff; } .n-about .listb .tit-h:before, .n-about .listb .tit-h:after { background: #183454; } .n-about .listb .text { width: 550px; position: absolute; top: 5rem; margin-left: 8rem; z-index: 2; } .n-about .listb .text .tit1 { display: inline-block; background: #000; font-size: 1.5rem; line-height: 1; padding: 5px; background: #fff; color: #07111b; margin-bottom: 15px; } .n-about .listb .text .tit3 { font-size: 13px; margin-bottom: 12px; } .n-about .listb .slide-img { height: 19rem; background-position: center center; background-position: no-repeat; } .n-about .listb .swiper-pagination { bottom: 2rem; margin-left: 8rem; width: auto; display: inline-block; } .n-about .listb .swiper-pagination .swiper-pagination-bullet { width: 52px; height: 4px; margin: 0 10px; border-radius: 0; opacity: 1; background: #fff; -webkit-transform: scale(1, 0.5); -ms-transform: scale(1, 0.5); transform: scale(1, 0.5); -webkit-transition: all .5s ease; transition: all .5s ease; } .n-about .listb .swiper-pagination .swiper-pagination-bullet-active { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); background: #e60012; } .n-about .listc { background: #f4f4f4; padding: 1.75rem 0 4.5rem; } .n-about .listc .tit-h { color: #000; } .n-about .listc .tit-h:before, .n-about .listc .tit-h:after { background: #dadada; } .n-about .listc .img1 { margin-top: 1.5rem; } .n-about .listc .img1 img { display: inline-block; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .n-about .listc .ulbox { position: relative; width: 1260px; margin: 0 auto; min-height: 400px; padding-bottom: 2rem; } .n-about .listc .ulbox:before { content: ""; position: absolute; left: 50%; width: 1px; margin-left: 0.5px; height: 100%; background: #e7e7e7; top: 5px; } .n-about .listc .ulbox .li-item { width: calc(50% + 10px); height: 145px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .n-about .listc .ulbox .li-item .img-text { width: calc(100% - 145px); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .n-about .listc .ulbox .li-item .time { width: 145px; text-align: right; padding-right: 30px; position: relative; } .n-about .listc .ulbox .li-item .time:before { content: ""; position: absolute; top: 50%; right: 5px; width: 9px; height: 9px; margin-top: -4.5px; background: #000; border-radius: 50%; } .n-about .listc .ulbox .li-item .j { width: 0; height: 0; position: absolute; right: -10px; top: 50%; margin-top: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); border-right: 10px solid #fff; } .n-about .listc .ulbox .li-item .text { padding: 0 .5rem; width: 50%; font-size: 18px; line-height: 1.5; color: #333; } .n-about .listc .ulbox .li-item .img { width: 50%; height: 145px; background-size: cover; background-repeat: no-repeat; background-position: center center; } .n-about .listc .ulbox .li-item:nth-child(2n) .time { text-align: left; padding-left: 30px; } .n-about .listc .ulbox .li-item:nth-child(2n) .time:before { right: auto; left: 5px; } .n-about .listc .ulbox .li-item:nth-child(2n) .j { left: -10px; right: auto; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .n-about .listc .buttonbox { cursor: pointer; margin-top: 20px; } .n-about .listc .buttonbox span { font-size: 14px; line-height: 1.5; color: #333; position: relative; padding-left: 25px; } .n-about .listc .buttonbox span:before { position: absolute; left: 0; font-size: 14px; color: #666; } .w1440 { width: 1440px; margin: 0 auto; } .configure-list { background: #f6f6f6; padding: 2.25rem 0; position: relative; z-index: 1; } .configure-list .car-list { margin-top: 2rem; position: relative; padding: 0 2rem /*overflow: hidden;*/ } .configure-list .car-list .swiper-slide { position: relative; } .configure-list .car-list .swiper-slide:before { content: ""; position: absolute; left: 0; top: 30%; width: 100%; height: 70%; background: -webkit-linear-gradient(rgba(222, 222, 222, 0.8), transparent); background: linear-gradient(rgba(222, 222, 222, 0.8), transparent); z-index: 1; opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; } .configure-list .car-list .swiper-slide:hover .img { top: -10px; } .configure-list .car-list .swiper-slide:hover:before { opacity: 1; } .configure-list .car-list .img img { max-width: 100%; } .configure-list .car-list .img, .configure-list .car-list .cat-text { position: relative; z-index: 2; } .configure-list .car-list .img { top: 0; -webkit-transition: all .5s ease; transition: all .5s ease; } .configure-list .car-list span { display: block; line-height: 1.6; margin-bottom: 3px; } .configure-list .car-list .bottonbox { margin-top: .6rem; height: 45px; line-height: 45px; display: inline-block; background: #313639; width: 135px; font-size: 14px; z-index: 2; -webkit-transition: all .5s ease; transition: all .5s ease; } .configure-list .car-list .bottonbox p { display: inline-block; color: #fff; position: relative; z-index: 2; padding-right: 20px; } .configure-list .car-list .bottonbox p:before { font-size: 12px; color: #fff; position: absolute; right: 0; } .configure-list .car-list .hover_1:before { z-index: 1; background: #d00010; width: 250px; height: 120px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .configure-list .car-list .hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .configure-list .car-list .swiper-button-next, .configure-list .car-list .swiper-button-prev { background: none !important; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; opacity: 1; -webkit-transition: all .5s ease; transition: all .5s ease; } .configure-list .car-list .swiper-button-next:before, .configure-list .car-list .swiper-button-next:after, .configure-list .car-list .swiper-button-prev:before, .configure-list .car-list .swiper-button-prev:after { content: ""; position: absolute; width: 20px; height: 4px; background: #3c3c3c; -webkit-transition: all .5s ease; transition: all .5s ease; } .configure-list .car-list .swiper-button-next:before, .configure-list .car-list .swiper-button-prev:before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: left 4px; -ms-transform-origin: left 4px; transform-origin: left 4px; } .configure-list .car-list .swiper-button-next:after, .configure-list .car-list .swiper-button-prev:after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .configure-list .car-list .swiper-button-next { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); margin-top: -55px; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; } .configure-list .car-list .swiper-button-next:hover:before, .configure-list .car-list .swiper-button-next:hover:after, .configure-list .car-list .swiper-button-prev:hover:before, .configure-list .car-list .swiper-button-prev:hover:after { background: #da3830; } .carnews-list { background: #fff; padding: 2rem 0 3.5rem; overflow: hidden; } .carnews-list .news-list { margin-top: 1.75rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .carnews-list .li-item { width: 32%; margin-right: 2%; background: #f2f2f2; display: block; } .carnews-list .li-item:nth-child(3n) { margin-right: 0; } .carnews-list .li-text { padding: .75rem .55rem; } .carnews-list .li-text .tit2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 15px; } .carnews-list .bottonbox { margin-top: .6rem; height: 45px; line-height: 45px; display: inline-block; width: 135px; font-size: 14px; z-index: 2; color: #222; box-shadow: inset 0px 0px 0px 2px #8d8e8f; -webkit-transition: all .5s ease; transition: all .5s ease; } .carnews-list .bottonbox p { display: block; color: #333; position: relative; z-index: 2; } .carnews-list .bottonbox:hover p { color: #fff; } .carnews-list .hover_1:before { z-index: 1; background: #d00010; width: 250px; height: 120px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .carnews-list .hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .w1280 { width: 1280px; margin: 0 auto; } .n-dealer-recruit .col-1 { color: #e91929; } .n-dealer-recruit .tit-h { display: inline-block; padding: 0 80px; line-height: 1.5; position: relative; } .n-dealer-recruit .tit-h:before { content: ""; position: absolute; width: 35px; height: 1px; background: #e7e7e7; left: 0; top: 50%; } .n-dealer-recruit .tit-h:after { content: ""; position: absolute; width: 30px; height: 1px; background: #e7e7e7; right: 0; top: 50%; } .n-dealer-recruit .list1 { padding: 2rem 0; } .n-dealer-recruit .list1 .text { margin-top: 1.2rem; line-height: 30px; } .n-dealer-recruit .list2 { background: url(../images/img25.jpg) no-repeat center; background-size: cover; padding: 2rem 0 3rem; } .n-dealer-recruit .list2 .tit { margin-bottom: 1.25rem; } .n-dealer-recruit .list2 .img1 { width: 610px; } .n-dealer-recruit .list2 .img2 { width: 608px; } .n-dealer-recruit .list3 .top { padding: 2rem 0; background: #f4f4f4; } .n-dealer-recruit .list3 .top .p-16 { line-height: 2; color: #666; } .n-dealer-recruit .list3 .imgbox { padding: 1.5rem 0; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .n-dealer-recruit .list3 .img1 { margin-bottom: 2rem; width: 100%; } .n-dealer-recruit .list3 .img1 img { max-width: 100%; } .n-dealer-recruit .list3 .img1 .tit { margin-bottom: 0; } .n-dealer-recruit .list3 .tit { margin-bottom: 1.2rem; color: #343434; text-align: center; } .n-dealer-recruit .list3 .botimg .img2 { width: 643px; } .n-dealer-recruit .list3 .botimg .img3 { width: 564px; } .n-dealer-recruit .list4 { background: #f8f8fb; padding: 2rem 0 2.5rem; } .n-dealer-recruit .list4 .tit { margin-bottom: .2rem; color: #343434; text-align: center; } .n-dealer-recruit .list4 .p-15 { font-size: 15px; line-height: 1.8; color: #444; margin-bottom: 1.5rem; } .n-dealer-recruit .list4 .img-item .img2 { width: 550px; } .n-dealer-recruit .list4 .img-item .img3 { width: 611px; } .n-dealer-recruit .list5 { padding: 2.5rem 0; background: url(../images/img29.jpg) no-repeat center; background-size: cover; } .n-dealer-recruit .list5 .itembox { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .n-dealer-recruit .list5 .li-item { width: 23%; margin-right: 2.6%; background: #f1f1f1; padding: 1.15rem 1.5rem; position: relative; } .n-dealer-recruit .list5 .li-item:before { content: ""; position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; } .n-dealer-recruit .list5 .li-item:nth-child(1):before { background: #ffcfd3; } .n-dealer-recruit .list5 .li-item:nth-child(2):before { background: #ff848e; } .n-dealer-recruit .list5 .li-item:nth-child(3):before { background: #ed4855; } .n-dealer-recruit .list5 .li-item:nth-child(4):before { background: #e60012; } .n-dealer-recruit .list5 .tit1 { color: #e60012; line-height: 1.2; margin-bottom: .5rem; font-family: "BEBAS"; } .n-dealer-recruit .list5 .tit2 { line-height: 1.2; margin-bottom: .2rem; } .n-dealer-recruit .list5 .tit3 { margin-bottom: 1rem; } .n-dealer-recruit .list5 .tit4 { margin-bottom: 10px; } .n-dealer-recruit .list5 .tit5 { margin-bottom: 5px; } .n-dealer-recruit .list5 .li-item:nth-child(4n) { margin-right: 0; } .n-dealer-recruit .list6 { padding: 2rem 0; background: #fff; } .n-dealer-recruit .list6 .tit-24 { color: #222; margin-bottom: 15px; } .n-dealer-recruit .list6 .p-16 { line-height: 32px; } .n-dealer-recruit .list7 { background: #f8f8fb; padding: 2rem 0 2.35rem; } .n-dealer-recruit .list7 .tit { margin-bottom: 2rem; color: #343434; text-align: center; } .n-dealer-recruit .list7 .p-15 { font-size: 15px; line-height: 1.8; color: #444; margin-bottom: 1.5rem; } .n-dealer-recruit .list7 .img-item .img2 { width: 569px; } .n-dealer-recruit .list7 .img-item .img3 { width: 564px; } .n-dealer-recruit .list8 { background: url(../images/img31.jpg) no-repeat center; padding: 3.5rem 0 3.95rem; background-size: cover; } .n-dealer-recruit .list8 .tit-32 { padding-bottom: .6rem; position: relative; } .n-dealer-recruit .list8 .tit-32:before { content: ""; position: absolute; width: 30px; left: 50%; margin-left: -15px; background: #333; height: 2px; bottom: 0; } .n-dealer-recruit .list9 { padding: 2rem 0; } .n-dealer-recruit .list9 .p-16 { width: 90%; margin-top: .3rem; } .n-dealer-recruit .list9 .ulbox { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 1.8rem; } .n-dealer-recruit .list9 .leftbox { width: 26%; height: 195px; padding-top: 56px; text-align: center; background: #e91929; } .n-dealer-recruit .list9 .rightbox { width: 74%; height: 195px; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .n-dealer-recruit .list9 .li-item { width: 19.5%; height: 96px; margin-left: 0.5%; margin-bottom: 0.5%; background: #eaedf3; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .n-dealer-recruit .list9 .li-item p { display: block; width: 100%; text-align: center; line-height: 1.4; } .n-dealer-recruit .list9 .table1 { margin-top: 2rem; border: 1px solid #edeef1; } .n-dealer-recruit .list9 .table1 table { width: 100%; } .n-dealer-recruit .list9 .table1 th { background: #f8f8fb; line-height: 70px; padding: 0 .75rem; font-size: 16px; color: #000; font-weight: bold; width: 100%; text-align: left; } .n-dealer-recruit .list9 .table1 td { width: 100%; font-size: 15px; line-height: 60px; color: #333; text-align: left; padding: 0 .75rem; border-top: 1px solid #edeef1; } .n-dealer-recruit .list9 .table2 { margin-top: 2rem; } .n-dealer-recruit .list9 .table2 .tit1 { margin-bottom: .6rem; } .n-dealer-recruit .list9 .table2 table { width: 100%; border: 1px solid #edeef1; } .n-dealer-recruit .list9 .table2 th { background: #f8f8fb; line-height: 70px; font-size: 16px; color: #000; font-weight: bold; text-align: center; } .n-dealer-recruit .list9 .table2 td { font-size: 15px; line-height: 60px; color: #333; text-align: center; border-top: 1px solid #edeef1; } .n-dealer-recruit .list9 .table3 { margin-top: 2rem; } .n-dealer-recruit .list9 .table3 .tit1 { margin-bottom: .6rem; } .n-dealer-recruit .list9 .table3 table { width: 100%; border: 1px solid #edeef1; } .n-dealer-recruit .list9 .table3 th { background: #f8f8fb; line-height: 70px; font-size: 16px; color: #000; font-weight: bold; text-align: center; } .n-dealer-recruit .list9 .table3 td { font-size: 15px; line-height: 60px; color: #333; text-align: center; border-top: 1px solid #edeef1; } .n-dealer-recruit .list10 { background: #2d2d2d; padding: 1.6rem 0; } .n-dealer-recruit .list10 .tit-24 { margin-bottom: .2rem; } .n-dealer-recruit .list11 { padding: 1.8rem 0; background: #ececef; } .n-dealer-recruit .list11 .tit1 { padding-bottom: 20px; margin-bottom: 1.5rem; border-bottom: 1px solid #d9d4d6; } .n-dealer-recruit .list11 .p-15 { color: #666; margin-bottom: 1.2rem; line-height: 28px; } .n-dealer-recruit .list11 .left { width: 46%; } .n-dealer-recruit .list11 .left img { max-width: 100%; } .n-dealer-recruit .list11 .right { width: 50%; } .n-dealer-recruit .list11 .right img{ max-width:100%; } .n-dealer-recruit .list11 .right .tit2 { margin-top: 10px; margin-bottom: 10px; } .n-dealer-recruit .list11 .right .p-15 { width: 90%; } .n-dealer-recruit .list12 { background: #fff; padding: 2rem 0; } .n-dealer-recruit .list12 .tit1, .n-dealer-recruit .list12 .tit2 { color: #222; } .n-dealer-recruit .list12 .p { margin-top: 10px; line-height: 2; } .n-dealer-recruit .list12 .tit2 { margin: 1.25rem 0 2rem; } .n-dealer-recruit .list12 .img1 { padding-bottom: 1.5rem; max-width: 100%; } .n-dealer-recruit .list13 { /*background: url(../images/img34.jpg) no-repeat center;*/ /*padding: 3.5rem 0 3.95rem;*/ background:none; padding:2rem 0 0px; /*background-size: cover;*/ } .n-dealer-recruit .list14 { padding: 2rem 0; background: #fff; } .n-dealer-recruit .list14 .tit1, .n-dealer-recruit .list14 .tit2 { color: #222; } .n-dealer-recruit .list14 .col-1 { font-weight: bold; margin-right: 5px; font-family: "BEBAS"; } .n-dealer-recruit .list14 .ulbox { margin-top: 1.75rem; } .n-dealer-recruit .list14 .ulbox .li-item { overflow: hidden; } .n-dealer-recruit .list14 .ulbox .li-item:last-child .text { border-bottom: 1px solid #dbdbdb; } .n-dealer-recruit .list14 .ulbox .img { width: 218px; } .n-dealer-recruit .list14 .ulbox .text { width: calc(100% - 270px); padding: .55rem 3rem 1.25rem 0; border-top: 1px solid #dbdbdb; position: relative; min-height: 160px; } .n-dealer-recruit .list14 .ulbox .tit2 { line-height: 2; } .n-dealer-recruit .list14 .ulbox .tit-14 { color: #9c9c9c; margin-top: 10px; } .n-dealer-recruit .list14 .ulbox .su { position: absolute; font-size: 2.55rem; line-height: 1.1; color: #eff5fa; right: 1rem; bottom: -15px; font-family: "BEBAS"; font-style: italic; } .n-dealer-recruit .list15 { padding: 2.5rem 0 2.25rem; background: #f2f2f5; } .n-dealer-recruit .list15 .tit1, .n-dealer-recruit .list15 .tit2 { color: #222; } .n-dealer-recruit .list15 .col-1 { font-weight: bold; margin-right: 5px; font-family: "BEBAS"; } .n-dealer-recruit .list15 .img { margin-top: 1.8rem; } .n-dealer-recruit .list15 .img img { max-width: 100%; } .n-dealer-recruit .list15 .bot { margin-top: 1.25rem; } .n-dealer-recruit .list15 .bot .li-warp { width: 50%; float: left; text-align: center; } .n-dealer-recruit .list15 .bot .sp1 { padding-left: 40px; } .n-dealer-recruit .list15 .bot .li-warp:nth-child(1) { position: relative; } .n-dealer-recruit .list15 .bot .li-warp:nth-child(1):before { content: ""; position: absolute; width: 1px; height: 16px; top: 50%; right: 0; background: #d2d7dd; margin-top: -8px; } .n-dealer-recruit .list15 .bot .li-warp:nth-child(1) .sp1 { background: url(../images/img18.png) no-repeat left center; background-size: 25px 25px; } .n-dealer-recruit .list15 .bot .li-warp:nth-child(2) .sp1 { background: url(../images/img18-1.png) no-repeat left center; background-size: 25px 25px; } .n-dealer-recruit .list16 { padding: 2rem 0; background: #fff; } .n-dealer-recruit .list16 .tit1 { color: #222; } .n-dealer-recruit .list16 .col-1 { font-weight: bold; margin-right: 5px; font-family: "BEBAS"; } .n-dealer-recruit .list16 .img1 { max-width: 100%; display: block; margin: 1.25rem auto 0; } .n-dealer-recruit .list17 { padding: 2rem 0 2.5rem; background: #f8f8fb; position: relative; z-index: 1; } .n-dealer-recruit .list17 .tit1 { color: #222; } .n-dealer-recruit .list17 .col-1 { font-weight: bold; margin-right: 5px; font-family: "BEBAS"; } .n-dealer-recruit .list17 .wimgbox { position: relative; } .n-dealer-recruit .list17 .imgbox { position: relative; width: 85%; overflow: hidden; height: 535px; margin: 1.25rem auto 0; } .n-dealer-recruit .list17 .imgbox .swiper-slide { text-align: center; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); z-index: 1; opacity: .5; -webkit-transition: -webkit-transform .5s ease,opacity .5s ease; transition: transform .5s ease,opacity .5s ease; } .n-dealer-recruit .list17 .imgbox .swiper-slide img { margin-top: 90px; width: 100%; display: inline-block; } .n-dealer-recruit .list17 .imgbox .swiper-slide.swiper-slide-active { -webkit-transform: scale(1.3, 1.3); -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); opacity: 1; z-index: 2; -webkit-transition: -webkit-transform .5s ease; transition: transform .5s ease; } .n-dealer-recruit .list17 .imgbox .swiper-slide.swiper-slide-active img { margin-top: 80px; } .n-dealer-recruit .list17 .swiper-button-next, .n-dealer-recruit .list17 .swiper-button-prev { width: 60px; height: 60px; border-radius: 50%; border: 1px solid #828282; background: none; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-dealer-recruit .list17 .swiper-button-next:before, .n-dealer-recruit .list17 .swiper-button-prev:before { position: absolute; font-size: 24px; width: 52px; left: 0; top: 0; height: 60px; color: #222; text-align: center; line-height: 57px; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-dealer-recruit .list17 .swiper-button-next:before { width: 60px; line-height: 60px; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .n-dealer-recruit .list17 .swiper-button-next:hover, .n-dealer-recruit .list17 .swiper-button-prev:hover { background: #dd2038; border: 1px solid #dd2038; } .n-dealer-recruit .list17 .swiper-button-next:hover:before, .n-dealer-recruit .list17 .swiper-button-prev:hover:before { color: #fff; } .car-nav-warp { position: relative; height: 78px; background: #fff; } .car-info-nav { height: 78px; line-height: 78px; border-bottom: 1px solid #e6e6e7; padding: 0 45px; background: #fff; } .car-info-nav .car-name { padding-right: .75rem; font-size: 16px; color: #222; font-weight: bold; position: relative; } .car-info-nav .car-name:before { content: ""; position: absolute; width: 1px; height: 32px; top: 50%; right: 0; -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); background: #b2b2b2; } .car-info-nav .itembox { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-left: 1rem; } .car-info-nav .item-li { font-size: 14px; color: #747c83; cursor: pointer; margin-right: .5rem; -webkit-transition: all .5s ease; transition: all .5s ease; } .car-info-nav .item-li:hover, .car-info-nav .item-li.cur { color: #222; } .car-info-nav .back-button { width: 135px; height: 40px; line-height: 40px; border-radius: 40px; background: none; margin-top: 19px; } .car-info-nav .back-button p { position: relative; color: #333; font-size: 16px; z-index: 2; padding-left: 40px; display: inline-block; position: relative; -webkit-transition: .3s ease; transition: .3s ease; } .car-info-nav .back-button p:before { content: ""; position: absolute; left: 0; width: 20px; height: 40px; background: url(../images/img25.png) no-repeat center; background-size: 17px auto; } .car-info-nav .back-button:hover p { color: #e40013; } .car-info-nav .back-button:hover p:before { -webkit-animation: toTopFromBottom 0.3s forwards; animation: toTopFromBottom 0.3s forwards; } .car-info-nav .drive-button { width: 135px; height: 40px; line-height: 40px; border-radius: 40px; background: #000; margin-top: 19px; } .car-info-nav .drive-button p { position: relative; color: #fff; font-size: 14px; z-index: 2; } .car-info-nav .car-price { margin-right: .5rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .car-info-nav .hover_1:before { z-index: 1; background: #d00010; width: 300px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .car-info-nav .hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .car-info-nav .car-price strong { line-height: 78px; margin: 0 5px; } .car_model .lista { padding: 2rem 0; background: #f5f5f5; } .car_model .lista .tit1 { margin-bottom: .8rem; } .car_model .lista .ultab { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .car_model .lista .ultab .li { font-size: 16px; line-height: 24px; color: #747c83; padding: 0 24px; position: relative; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } .car_model .lista .ultab .li:before { content: ""; position: absolute; right: 0; top: 50%; margin-top: -8px; width: 1px; height: 16px; background: #9c9c9c; } .car_model .lista .ultab .li:nth-child(2):before { display: none; } .car_model .lista .ultab .li:hover, .car_model .lista .ultab .li.cur { color: #222; } .car_model .lista .color-box { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: .75rem; position: relative; z-index: 2; } .car_model .lista .color-box .color-li { width: 26px; height: 26px; margin: 0 12px; border-radius: 50%; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } .car_model .lista .color-box .color-li.cur, .car_model .lista .color-box .color-li:hover { box-shadow: 0px 0px 0px 5px #e9e9e9; } .car_model .lista .trim-tab { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: .75rem; } .car_model .lista .trim-tab .li { font-size: 16px; line-height: 24px; color: #747c83; padding: 0 24px; position: relative; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } .car_model .lista .trim-tab .li:before { content: ""; position: absolute; right: 0; top: 50%; margin-top: -8px; width: 1px; height: 16px; background: #9c9c9c; } .car_model .lista .trim-tab .li:nth-child(2):before { display: none; } .car_model .lista .trim-tab .li:hover, .car_model .lista .trim-tab .li.cur { color: #222; } .car_model .lista .car-imgbox .ulimg { width: 1400px; height: 640px; margin: 0 auto; position: relative; text-align: center; background: url(../images/img19.png) no-repeat center bottom; } .car_model .lista .car-imgbox .ulimg .car-name { font-size: 10.5rem; line-height: 1.05; position: absolute; font-weight: bold; left: 50%; top:-1.5rem; /*font-style: italic;*/ background: -webkit-linear-gradient(bottom, #e0e0e0, transparent 80%); background: linear-gradient(to top, #e0e0e0, transparent 80%); -webkit-background-clip: text; color: transparent; z-index: 1; -webkit-transform: translate(-50%, 0) skew(-20deg); -ms-transform: translate(-50%, 0) skew(-20deg); transform: translate(-50%, 0) skew(-20deg); } .car_model .lista .car-imgbox .ulimg #carimg { display: inline-block; position: relative; z-index: 2; } .car_model .lista .car-imgbox .trimbox-warp { width: 1400px; height: 640px; margin: 1.5rem auto 0; position: relative; } .car_model .lista .car-imgbox #panoramaConianer { overflow: hidden; width: 100%; height: 600px; } .car_model .tit-title { margin-bottom: .5rem; } .car_model .tit-title2 { color: #666; line-height: 1.5; } .car_model .list1 { padding: 2.5rem 0 2rem; background: #efefef url(../images/img41.jpg) no-repeat center bottom; background-size: cover; height: 23.6rem; } .car_model .list1 .itembox { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .car_model .list1 .itembox .li-item { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; color: #888; padding: 0 24px; } .car_model .list1 .itembox .li-item img { margin-right: 8px; } .car_model .list1 .itembox .li-item:before { content: ""; position: absolute; right: 0; top: 50%; margin-top: -16px; width: 1px; height: 32px; background: url(../images/img20-4.png) no-repeat center top; } .car_model .list1 .itembox .li-item:nth-child(3n):before { display: none; } .car_model .list2 { background: #fff; padding: 1.5rem 0; } .car_model .list2 .tit-title { margin-bottom: 0; } .car_model .list2 .img { margin-top: 1rem; } .car_model .list2 .img img { max-width: 100%; } .car_model .list3 { padding: 2.25rem 0 2rem; background: url(../images/img42.jpg) no-repeat center bottom; background-size: cover; height: 19.8rem; } .car_model .list3 .tit-title { margin-bottom: .3rem; color: #fff; } .car_model .list3 .tit-title2 { color: #fff; opacity: .5; } .car_model .list3 .img { margin-top: 1rem; text-align: center; } .car_model .list3 .img img { max-width: 100%; display: inline-block; } .car_model .list4 { background: #fff; padding-top: 1.75rem; } .car_model .list4 .tit-title { margin-bottom: 1.5rem; } .car_model .list4 .imgbox img { width: 49.7%; } .car_model .list5 { padding: 2rem 0 0; background: #fff; } .car_model .list5 .tit-title { margin-bottom: 1rem; } .car_model .list5 .libox { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .car_model .list5 .li-item { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; color: #888; margin: 0 14px; height: 3.75rem; width: 190px; padding: 0 10px; border: 1px solid #53c1f6; border-radius: 3px; } .car_model .list5 .li-item img { margin-right: 8px; } .car_model .list5 .li-item .img { display: block; width: 100%; margin-bottom: 5px; } .car_model .list5 .li-item .tit1, .car_model .list5 .li-item .tit2 { width: 100%; display: block; } .car_model .list5 .img1 { width: 100%; margin-top: 3rem; } .car_model .list5 .img1 img { width: 100%; } .car_model .list6 { padding: 2.75rem 0 2rem; background: url(../images/img50.jpg) no-repeat center center; background-size: cover; } .car_model .list6 .tit-title { margin-bottom: .7rem; } .car_model .list6 .li-box { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; } .car_model .list6 .li-box .li-item { margin: 0 20px; } .car_model .list6 .carinfo-img { margin-top: 3rem; text-align: center; } .car_model .list6 .carinfo-img img { max-width: 100%; display: inline-block; } .car_model .list6 .bot-li { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; margin-top: 1.25rem; } .car_model .list6 .bot-li .img { margin-right: .5rem; } .car_model .list6 .bot-li .li { padding: 0 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; border-right: 1px solid rgba(73, 125, 195, 0.5); } .car_model .list6 .bot-li .li:nth-child(4n) { border-right: none; } .car_model .list6 .car-button { display: block; cursor: pointer; margin: 1.25rem auto 0; box-shadow: inset 0px 0px 0px 2px #fff; } .car_model .list6 .car-button p { display: inline-block; padding-right: 20px; position: relative; } .car_model .list6 .car-button p:before { position: absolute; right: 0; font-size: 14px; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .car_model .list7 { padding: 2rem 0; background: url(../images/img49.jpg) no-repeat center bottom; background-size: cover; height: 20.5rem; } .car_model .list7 .tit-title { margin-bottom: .2rem; } .car_model .list7 .img { width: 90%; text-align: center; margin: 1.25rem auto 0; } .car_model .list7 .img img { max-width: 100%; display: inline-block; } .car_model .list8 { padding: 2.25rem 0 2rem; background: url(../images/img54.jpg) no-repeat center center; background-size: cover; } .car_model .list8 .tit-title { margin-bottom: .3rem; } .car_model .list8 .carinfo-img { margin-top: 5rem; text-align: center; } .car_model .list8 .carinfo-img img { max-width: 100%; display: inline-block; } .car_model .list8 .bot-li { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; margin-top: .75rem; } .car_model .list8 .bot-li .img { text-align: center; } .car_model .list8 .bot-li .li { padding: 0 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; border-right: 1px solid rgba(238, 117, 125, 0.5); } .car_model .list8 .bot-li .li:last-child { border-right: none; } .car_model .list9 { background: url(../images/img55.jpg) no-repeat center center; background-size: cover; padding: 2.25rem 0 2rem; } .car_model .list9 .tit-title2 { color: #fff; } .car_model .list9 .libox { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 9.5rem; } .car_model .list9 .li-item { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; color: #888; margin: 0 14px; height: 4.5rem; width: 200px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; } .car_model .list9 .li-item .img { display: block; width: 100%; margin-bottom: .5rem; } .car_model .list9 .li-item .tit1, .car_model .list9 .li-item .tit2 { width: 100%; display: block; } .car_model .list10 { background: #fff; padding: 2rem 0 3rem; } .car_model .list10 .tit-title { margin-bottom: 0; } .car_model .list10 .w1600 { width: 1600px; margin: 0 auto; } .car_model .list10 .img { margin-top: 1rem; width: 100%; } .car_model .list10 .img img { max-width: 100%; } .car_model .list11 { background: url(../images/img58.jpg) no-repeat center center; height: 21rem; background-size: cover; padding: 2.15rem 0 0; } .car_model .list11 .tit-title { margin-bottom: 1.5rem; } .car_model .list11 .bot-li { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; margin-top: 1.25rem; } .car_model .list11 .bot-li .img { margin-right: .5rem; } .car_model .list11 .bot-li .li { padding: 0 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.5); } .car_model .list11 .bot-li .li:last-child { border-right: none; } .car_model .list11 .bot-li .tit2 { text-align: left; } .car_model .list12 { background:#f5f5f5 url(../images/img33.png) no-repeat center center; background-size: cover; padding: 8rem 0; } .car_model .list12 .text .tit-title, .car_model .list12 .text .tit-title2 { line-height: 1; color: #fff; } .car_model .list12 .li-item { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 2.5rem; } .car_model .list12 .li-item .li { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; position: relative; color: #888; margin: 0 20px; height: 170px; width: 170px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; } .car_model .list12 .li-item .li .img { display: block; width: 100%; margin-bottom: .5rem; } .car_model .list12 .li-item .li .tit1, .car_model .list12 .li-item .li .tit2 { width: 100%; display: block; } .car_model .list12 .li-item .li:nth-child(1) { margin-left: 0; } .car_model .list13 { padding: 3.25rem 0; background: url(../images/img63.jpg) no-repeat center center; background-size: cover; height: 21.5rem; position: relative; } .car_model .list13 .w1350 { width: 1350px; margin: 0 auto; } .car_model .list13 .tit-title, .car_model .list13 .tit-title2 { color: #fff; line-height: 1; } .car_model .list13 .car-img { position: absolute; right: 20px; bottom: 25px; width: 14rem; } .car_model .list14 { padding: 2.25rem 0 7.5rem; position: relative; } .car_model .list14 .tit-title2, .car_model .list14 .tit-title { color: #fff; position: relative; z-index: 2; } .car_model .list14 .carbg-list { position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index: 1; } .car_model .list14 .carbg-list .swiper-slide { background-size: cover; background-repeat: no-repeat; background-position: center center; } .car_model .list14 .carbg-list .swiper-pagination { bottom: 1.5rem; } .car_model .list14 .carbg-list .swiper-pagination span { width: 16px; height: 16px; margin: 0 10px; display: inline-block; border-radius: 100%; background: none; opacity: 1; box-shadow: inset 0px 0px 0px 2px #d6d6d6; position: relative; -webkit-transition: all .5s ease; transition: all .5s ease; } .car_model .list14 .carbg-list .swiper-pagination span:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #a6a6a6; opacity: 0; border-radius: 50%; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition: all .5s ease; transition: all .5s ease; } .car_model .list14 .carbg-list .swiper-pagination span.swiper-pagination-bullet-active { box-shadow: inset 0px 0px 0px 2px #a6a6a6; } .car_model .list14 .carbg-list .swiper-pagination span.swiper-pagination-bullet-active:before { opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .car_model .list14 .libox { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 4.75rem; position: relative; z-index: 2; } .car_model .list14 .li-item { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; color: #888; margin: 0 14px; height: 4.5rem; width: 200px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; } .car_model .list14 .li-item .img { display: block; width: 100%; margin-bottom: .5rem; } .car_model .list14 .li-item .tit1, .car_model .list14 .li-item .tit2 { width: 100%; display: block; } .car_model .list15 { background: url(../images/img65.jpg) no-repeat center center; background-size: cover; padding: 2.15rem 0 1.5rem; position: relative; z-index: 1; } .car_model .list15 .tit-title, .car_model .list15 .tit-title2 { color: #fff; } .car_model .list15 .bot-li { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; margin-top: 15rem; } .car_model .list15 .bot-li .img { margin-right: .5rem; } .car_model .list15 .bot-li .li { padding: 0 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.24); } .car_model .list15 .bot-li .li:last-child { border-right: none; } .car_model .list15 .bot-li .tit2 { text-align: left; } .car_model .list16 { background: #f6f6f6; } .car_model .list16 .text { padding: 1.75rem 0; background: #fff; position: relative; z-index: 2; margin-top: -.75rem; } .car_model .list16 .img { display: inline-block; margin-bottom: .5rem; } .car_model .list16 .tit1 { color: #191919; } .n-join .tit-h { display: inline-block; padding: 0 80px; line-height: 1.5; position: relative; } .n-join .tit-h:before { content: ""; position: absolute; width: 35px; height: 1px; background: #e7e7e7; left: 0; top: 50%; } .n-join .tit-h:after { content: ""; position: absolute; width: 30px; height: 1px; background: #e7e7e7; right: 0; top: 50%; } .n-join .filter-form { width: 580px; margin-left: .25rem; padding: 0 10px; height: 50px; line-height: 50px; background: #fff; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1); } .n-join .filter-form .text { width: calc(100% - 80px); border: none; background: none; height: 50px; line-height: 30px; padding: 10px 0; font-size: 14px; color: #666; } .n-join .filter-form .submit { width: 50px; height: 50px; background: url(../images/img2.png) no-repeat center center; border: none; } .n-join .join-scholl-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-top: 1.6rem; padding-bottom: .8rem; } .n-join .join-scholl-nav .li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: left; width: 19%; margin-right: 1.2%; background: #efefef; height: 120px; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-join .join-scholl-nav .li .img { width: 50px; height: 50px; overflow: hidden; margin-right: .3rem; } .n-join .join-scholl-nav .li .img img { position: absolute; left: 0; top: 0; max-width: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-join .join-scholl-nav .li .img .img1 { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .n-join .join-scholl-nav .li .img .img2 { opacity: 0; -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); } .n-join .join-scholl-nav .li p { color: #333; line-height: 1.5; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-join .join-scholl-nav .li:last-child { margin-right: 0; } .n-join .join-scholl-nav .li:hover, .n-join .join-scholl-nav .li.cur { background: #d00010; } .n-join .join-scholl-nav .li:hover p, .n-join .join-scholl-nav .li.cur p { color: #fff; } .n-join .join-scholl-nav .li:hover .img .img1, .n-join .join-scholl-nav .li.cur .img .img1 { opacity: 0; -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); } .n-join .join-scholl-nav .li:hover .img .img2, .n-join .join-scholl-nav .li.cur .img .img2 { opacity: 1; -webkit-transform: translate(0, 0%); -ms-transform: translate(0, 0%); transform: translate(0, 0%); } .n-join .lista { padding: 2rem 0 3.5rem; } .n-join .lista .filterbox { margin-top: 1.25rem; background: #f1f1f1; padding: 1.5rem; } .n-join .lista .filterbox .filter-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-bottom: .6rem; position: relative; padding-right: 2rem; } .n-join .lista .filterbox .filter-title { width: 90px; color: #000; line-height: 30px; } .n-join .lista .filterbox .filter-li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: calc(100% - 90px); height: 32px; overflow: hidden; } .n-join .lista .filterbox .filter-item.active .filter-li { height: auto; max-height: 100px; overflow: auto; } .n-join .lista .filterbox .filter-item.active .sp3 { color: #d00010; } .n-join .lista .filterbox .filter-item.active .sp3:before { color: #d00010; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .n-join .lista .filterbox .filter-item:last-child { margin-bottom: 0; } .n-join .lista .filterbox .sp2 { margin: 0 .25rem; line-height: 30px; font-size: 16px; color: #222; cursor: pointer; border-bottom: 2px solid #f1f1f1; -webkit-transition: all .5s; transition: all .5s; } .n-join .lista .filterbox .sp3 { position: absolute; right: 0; top: 0; padding-right: 20px; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-join .lista .filterbox .sp3:before { position: absolute; right: 0; font-size: 14px; color: #000; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-join .lista .filterbox .sp2:hover, .n-join .lista .filterbox .sp2.cur { border-bottom: 2px solid #d00010; } .n-join .lista .filterbox .filter-item4 { height: 50px; } .n-join .lista .filterbox .filter-item4 form { width: auto; } .n-join .lista .filter-item4 .sp1{ line-height: 50px; } .n-join .lista .join-list { margin-top: .7rem; } .n-join .join-list-ajax .joins .tit1{ font-size:18px; line-height:1.8; color:#000; margin-bottom:15px; } .n-join .lista .join-list .join-list-li { padding: .75rem 150px .75rem 0; display: block; width: 100%; border-bottom: 1px dashed #ececec; position: relative; } .n-join .lista .join-list .button-btn:before { z-index: 1; background: #d00010; width: 250px; height: 100px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-join .lista .join-list .join-list-li2 { padding: 1rem 150px 1rem 0; } .n-join .lista .join-list .join-list-li2 .join-list-text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .n-join .lista .join-list .join-list-tit { -webkit-transition: color .5s ease; transition: color .5s ease; margin-bottom: .5rem; } .n-join .lista .join-list .button-btn { width: 130px; height: 45px; line-height: 45px; text-align: center; color: #333; background: #f1f1f1; position: absolute; top: 1rem; right: 0; z-index: 1; cursor: pointer; } .n-join .lista .join-list .button-btn p { position: relative; z-index: 2; -webkit-transition: all .3s ease; transition: all .3s ease; } .n-join .lista .join-list .button-btn2 { top: 50%; margin-top: -22.5px; } .n-join .lista .join-list .join-list-text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding:0 0 20px; } .n-join .lista .join-list .join-list-text span { font-size: 15px; color: #666; line-height: 1.5; width: 7rem; padding-right: .8rem; } .n-join .lista .join-list .join-list-text .sp1 { width: 480px; line-height: 25px; padding-right: 1rem; } .n-join .lista .join-list .join-list-text .sp2 { width: 200px; line-height: 25px; } .n-join .lista .join-list .join-list-li:hover .join-list-tit { color: #d00010; } .n-join .lista .join-list .button-btn:hover p { color: #fff; } .n-join .lista .join-list .button-btn:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-join .lista .click-btn { width: 224px; height: 45px; line-height: 45px; text-align: center; margin: 1.5rem auto 0; cursor: pointer; box-shadow: inset 0px 0px 0px 2px #090103; } .n-join .lista .click-btn p { position: relative; z-index: 2; -webkit-transition: all .3s ease; transition: all .3s ease; } .n-join .lista .click-btn:before { z-index: 1; background: #d00010; width: 350px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-join .lista .click-btn:hover p { color: #fff; } .n-join .lista .click-btn:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-join .listb { padding: 2rem 0 3.5rem; background: #f6f6f6; } .n-join .listb img { display: inline-block; margin-top: 2rem; max-width: 100%; } .n-join .listc { padding: 2.8rem 0 2.5rem; } .n-join .listc .ulbox { margin-top: 1.2rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .n-join .listc .li { padding: 1.5rem 0 .75rem; width: 31%; margin-right: 3.5%; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; } .n-join .listc .li:last-child { margin-right: 0; } .n-join .listc .li img { width: 70px; height: 70px; display: inline-block; } .n-join .listc .li .tit2 { padding: 0 .5rem; margin-top: .5rem; } .n-join .listc .li .tit3 { font-size: 2.4rem; line-height: 1.2; color: #333; opacity: .05; font-weight: bold; } .n-join .listd { padding: 2.5rem 0 2.7rem; background: #f4f4f4; } .n-join .listd .table { margin-top: 1.25rem; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2); } .n-join .listd .table .top { border: 1px solid #c2c1c1; border-bottom: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; background: #5f5f5f; } .n-join .listd .table .top .li { height: 65px; line-height: 65px; text-align: center; font-size: 16px; color: #fff; border-right: 1px solid #656565; } .n-join .listd .table .li-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; background: #fcfcfc; } .n-join .listd .table .li-item .li { padding: 10px 5px; line-height: 25px; text-align: center; font-size: 15px; color: #666; border-right: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; } .n-join .listd .table .bot { border-top: 1px solid #f3f3f3; max-height: 630px; overflow-y: auto; } .n-join .liste { background: #fff; padding: 2.4rem 0 3rem; } .n-join .liste .ulbox { margin-top: 1.5rem; } .n-join .liste .libox { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; text-align: center; border-bottom: 1px solid #f5f1f1; } .n-join .liste .libox:last-child { border-bottom: none; } .n-join .liste .libox2 .li { height: 230px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .n-join .liste .libox3 .li { padding-top: 1.5rem; } .n-join .liste .li { width: 25%; height: 180px; border-right: 1px solid #f5f1f1; } .n-join .liste .li .img { width: 78px; height: 78px; border-radius: 50%; } .n-join .liste .li p { margin-top: 12px; } .n-join .liste .li:last-child { border-right: none; } .n-join .listf { padding: .8rem 0; background: #f4f4f4; } .n-join .listf .erwei-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .n-join .listf .img { margin-right: 20px; } .n-join .stepbox { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 2.5rem 0 2.2rem; } .n-join .stepbox .li { width: 72px; text-align: center; } .n-join .stepbox .li-jin { margin: 0 1rem; width: 16px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .n-join .stepbox .li-jin:before { font-size: 20px; color: #c1c4c8; } .n-join .stepbox .li.cur .img { background: #c60a19; } .n-join .stepbox .li.cur .img:before { opacity: 1; } .n-join .stepbox .li.on .img { background: #c60a19; } .n-join .stepbox .li-jin.cur:before { color: #c60a19; } .n-join .stepbox .img { margin-bottom: 22px; height: 72px; border-radius: 72px; background: #c1c5c9; position: relative; } .n-join .stepbox .img:before { content: ""; position: absolute; left: 50%; margin-left: -10px; bottom: -8px; width: 0; height: 0; opacity: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #c60a19; } .n-join .stepbox .p { font-size: 14px; line-height: 1.5; } .n-join .job-name { line-height: 1.2; margin-bottom: 1rem; } .n-join .stepbox2 { padding-bottom: 2.5rem; } .n-join .stepbox2 .tit1 { padding-left: 15px; line-height: 18px; color: #404040; position: relative; padding-bottom: .5rem; margin-bottom: .7rem; border-bottom: 1px solid #ececec; } .n-join .stepbox2 .tit1:before { content: ""; position: absolute; left: 0; top: 0; background: #d11524; width: 3px; height: 18px; } .n-join .list-step1 .tit1 { padding-left: 15px; line-height: 18px; color: #404040; position: relative; padding-bottom: .5rem; margin-bottom: .7rem; border-bottom: 1px solid #ececec; } .n-join .list-step1 .tit1:before { content: ""; position: absolute; left: 0; top: 0; background: #d11524; width: 3px; height: 18px; } .n-join .list-step1 { padding-bottom: 2.5rem; } .n-join .list-step1 .tit2 { line-height: 1; margin-bottom: .5rem; } .n-join .list-step1 .list-step-box { padding: 1.25rem .5rem .5rem; background: #f8f8f8; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .n-join .list-step1 .list-step-box .li { width: 33.3%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: .75rem; } .n-join .list-step1 .list-step-box .sp1 { width: 92px; padding-right: 10px; font-size: 16px; color: #666; } .n-join .list-step1 .list-step-box .sp2 { width: calc(100% - 90px - 1rem); border: 1px solid #dddee1; padding: 10px; background: #fff; } .n-join .list-step1 .list-step-box .sp2 span { height: 25px; line-height: 25px; color: #aaa; width: 100%; } .n-join .li-sp1-top { -webkit-box-align: start !important; -webkit-align-items: flex-start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .n-join .li-sp1-top .sp1 { margin-top: 10px; } .n-join .input1 { height: 25px; line-height: 25px; border: none; background: none; width: 100%; } .n-join .input2 { height: 25px; line-height: 25px; border: none; background: none; width: 100%; } .n-join .input3 { height: 100px; line-height: 25px; border: none; background: none; width: 100%; } .n-join .list-step2 { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #ececec; } .n-join .list-step2 .list-step-box { padding-right: 1.5rem; } .n-join .list-step2 .list-step-box .li-100 { width: 100%; } .n-join .list-step2 .list-step-box .li-47 { width: 47%; } .n-join .list-step2 .list-step-box .ma-left-6 { margin-right: 6%; } .n-join .list-step2 .list-step-box .sp-2 { width: calc((94% - 90px - 1rem)/2); } .n-join .more-click { border-top: 1px dashed #e5e5e5; padding: .5rem 0; position: relative; padding-left: 20px; color: #ca2835; cursor: pointer; font-size: 14px; line-height: 20px; } .n-join .more-click:before { position: absolute; left: 0; font-size: 18px; color: #ca2835; } .n-join .list-step-box { margin-bottom: 1rem; } .n-join .time-sp2 input { position: relative; z-index: 2; } .n-join .time-btn { background: url(../images/img42.png) no-repeat center; position: absolute; z-index: 1; width: 20px; height: 47px; right: 10px; top: 0; background-size: 19px auto; } .n-join .li-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .n-join form { width: 100%; } .n-join .form-botton { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-left: 90px; margin-bottom: 1rem; } .n-join .form-botton .input-submit, .n-join .form-botton .input-reset { background: none; border: none; font-size: 16px; display: block; height: 42px; width: 100%; text-align: center; } .n-join .form-botton .submit-bottom { width: 100px; height: 45px; line-height: 45px; text-align: center; background: #484848; display: block; margin-right: 1rem; } .n-join .form-botton .submit-bottom .input-submit { position: relative; z-index: 2; color: #fff; } .n-join .form-botton .submit-bottom:before { z-index: 1; background: #cb0f1e; width: 300px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-join .form-botton .submit-bottom:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-join .form-botton .reset-bottom { width: 100px; height: 45px; line-height: 45px; text-align: center; background: transparent; display: block; } .n-join .form-botton .reset-bottom .input-reset { position: relative; z-index: 2; color: #888; } .n-join .form-botton .reset-bottom:before { z-index: 1; background: #cb0f1e; width: 300px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-join .form-botton .reset-bottom:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-join .form-botton .reset-bottom:hover .input-reset { color: #fff; } .n-join .bot-botton { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 1.5rem auto 0; } .n-join .step-bottom { width: 280px; height: 55px; line-height: 55px; text-align: center; background: #db0b1b; display: block; cursor:pointer; } .n-join .step-bottom p { position: relative; z-index: 2; color: #fff; } .n-join .step-bottom:before { z-index: 1; background: #cb0f1e; width: 450px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-join .step-bottom:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-join .step-bottom-prve { background: #3e3e3e; } .n-join .step-bottom-prve:before { background: #313030; } .n-join .list-step-end { border: 1px solid #e8e7e7; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); padding: 1.25rem; margin-bottom: 4.5rem; } .n-join .list-step-end .tit1 { padding-left: 15px; line-height: 18px; color: #404040; position: relative; padding-bottom: .5rem; margin-bottom: .7rem; border-bottom: 1px dashed #f2f2f2; } .n-join .list-step-end .tit1:before { content: ""; position: absolute; left: 0; top: 0; background: #d11524; width: 3px; height: 18px; } .n-join .list-step-end .tit1 span { font-size: 14px; margin-left: 10px; } .n-join .list-step-end .step-bottom { margin: 0 .5rem; cursor: pointer; } .n-about .listb .swiper-slide .text { -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); opacity: 0; -webkit-transition: all 0.8s cubic-bezier(0.59, -0.26, 0.46, 0.91); transition: all 0.8s cubic-bezier(0.59, -0.26, 0.46, 0.91); } .n-about .listb .swiper-slide.swiper-slide-active .text { -webkit-transform: translate(0, 0%); -ms-transform: translate(0, 0%); transform: translate(0, 0%); opacity: 1; } .configure-banner { height: 12.5rem; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; z-index: 1; } .configure-banner .car-name { position: relative; z-index: 1; padding-top: 2rem; max-width: 20rem; margin: 0 auto; display: block; } .configure-banner .car-img { position: absolute; z-index: 2; width: 19.2rem; right: 10.5rem; top: 3.75rem; } .n-configure { padding: 2rem 0 0; } .n-configure .con-left { width: 68%; float: left; } .n-configure .con-left .listbox { padding-bottom: 3rem; } .n-configure .con-left .list-item { margin-bottom: 2rem; } .n-configure .con-left .list-item .tit1 { margin-bottom: .5rem; } .n-configure .con-left .list-item .li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; line-height: 1.5; font-size: 16px; color: #000; } .n-configure .con-left .list-item .sp1 { width: 35%; margin-right: 2%; padding: 12px 0; border-bottom: 1px solid #dbdbdb; } .n-configure .con-left .list-item .sp2 { width: 63%; padding: 12px 0; border-bottom: 1px solid #dbdbdb; } .n-configure .con-right { width: 29%; height: 440px; float: right; padding: .7rem 0; border: 1px solid #ccc; } .n-configure .con-right .top { padding: 0 .65rem; } .n-configure .con-right .car-select { margin-top: 5px; border-bottom: 1px solid #eee; position: relative; z-index: 2; } .n-configure .con-right .car-select .sp { height: 45px; line-height: 45px; padding-right: 30px; position: relative; cursor: pointer; z-index:3; } .n-configure .con-right .car-select .sp:before { right: 0; color: #000; position: absolute; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-configure .con-right .car-img { background: #f2f3f4; padding: .6rem .75rem; margin-top: .85rem; } .n-configure .con-right .car-img img { max-width: 100%; } .n-configure .con-right .sp.on:before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .n-configure .con-right .car-price { font-size: 16px; line-height: 30px; margin-top: 10px; color: #000; position: relative; z-index: 1; } .n-configure .con-right .spbox { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); position: absolute; width: 100%; top: 45px; left: 0; z-index: 2; background: #fff; border: 1px solid #e5e5e5; display: none; max-height: 310px; overflow-y: auto; z-index:9; } .n-configure .con-right .spbox .li { padding: 10px; color: #888; height: 50px; line-height: 30px; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-configure .con-right .spbox .li:hover { background: #f2f3f4; } .n-configure .con-right .contrast-button { width: calc(100% - 1.3rem); margin: 18px auto 0; height: 45px; line-height: 45px; background: #000; display: block; } .n-configure .con-right .contrast-button p { position: relative; color: #fff; font-size: 14px; z-index: 2; padding-right: 20px; display: inline-block; } .n-configure .con-right .contrast-button p:before { position: absolute; right: 0; font-size: 14px; color: #fff; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all .5s ease; transition: all .5s ease; } .n-configure .con-right .hover_1:before { z-index: 1; background: #d00010; width: 500px; height: 300px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-configure .con-right .hover_1:hover p:before { right: -5px; } .n-configure .con-right .hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .bot-configure { background: #fafafa; padding: 1.75rem 0; font-size: 16px; color: #a5a5a5; line-height: 30px; } .bot-configure .p { width: 80%; } .n-configure-info { padding: 2.25rem 0 0rem; } .n-configure-info .con-list { width: 32%; float: left; } .n-configure-info .con-list .car-select { margin-top: 5px; border-bottom: 1px solid #eee; position: relative; z-index: 2; } .n-configure-info .con-list .car-select .sp { height: 45px; line-height: 45px; padding-right: 30px; position: relative; cursor: pointer; background: #f2f3f4; padding: 0 .65rem; } .n-configure-info .con-list .car-select .sp:before { right: .65rem; color: #000; position: absolute; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-configure-info .con-list .sp.on:before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .n-configure-info .con-list .spbox { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); position: absolute; width: 100%; top: 45px; left: 0; z-index: 2; background: #fff; border: 1px solid #e5e5e5; display: none; max-height: 480px; overflow-y: auto; } .n-configure-info .con-list .spbox .li { padding: 10px; color: #888; height: 50px; line-height: 30px; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-configure-info .con-list .spbox .li:hover { background: #f2f3f4; } .n-configure-info .con-list .spbox .li-sub { padding: 10px; color: #888; height: 50px; line-height: 30px; background: #f2f3f4; } .n-configure-info .con-list { margin-right: 2%; } .n-configure-info .con-list2 .top { height: 190px; margin-bottom: 1.2rem; } .n-configure-info .con-list2 .back-button { width: 140px; margin: 18px 0 0; height: 45px; line-height: 45px; background: #000; display: block; } .n-configure-info .con-list2 .back-button p { position: relative; color: #fff; font-size: 14px; z-index: 2; padding-left: 20px; display: inline-block; } .n-configure-info .con-list2 .back-button p:before { position: absolute; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); left: 0; font-size: 14px; color: #fff; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-configure-info .con-list2 .hover_1:before { z-index: 1; background: #d00010; width: 300px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-configure-info .con-list2 .hover_1:hover p:before { left: -5px; } .n-configure-info .con-list2 .hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-configure-info .con-box { border-top: 1px solid #aaadad; } .n-configure-info .con-box .li { line-height: 1.5; font-size: 16px; color: #888; padding: 12px 0; border-bottom: 1px solid #dbdbdb; } .n-configure-info .con-box .li-sub { line-height: 26px; font-size: 16px; color: #000; padding: 12px .75rem; background: #f2f3f4; position: relative; } .n-configure-info .con-box .li-sub:before { content: ""; position: absolute; width: 0; height: 0; left: .3rem; top: 50%; margin-top: -2.5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #4a4a4a; } .n-configure-info .con-box .li-title { color: #222; } .n-configure-info .car-img { width: 100%; background: #f2f3f4; padding: .5rem 1rem; text-align: center; height: 190px; margin-bottom: 1.2rem; position: relative; } .n-configure-info .car-img img { max-width: 100%; display: inline-block; } .n-configure-info .con-list3 .con-box { border-top: 1px solid #e60012; text-align: center; } .n-configure-info .con-list3 .li-sub { height: 50px; } .n-configure-info .con-list3 .li-sub:before { display: none; } .n-configure-info .con-list4, .n-configure-info .con-list1 { margin-right: 0; } .n-configure-info .colse-btn { width: 30px; height: 30px; position: absolute; right: 10px; top: 10px; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-configure-info .colse-btn:before { font-size: 18px; color: #333; top: 50%; left: 50%; position: absolute; margin-top: -12px; margin-left: -9px; } .n-configure-info .colse-btn:hover { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .n-configure-info .colse-btn:hover:before { color: #e6000f; } .n-configure-info .col-red { color: #da3830 !important; } .n-configure-info .con-list4 { display: none; } .n-configure-info .con-listbox { height: 1020px; overflow: hidden; } .n-configure-info .con-listbox.active { height: auto; } .n-configure-info .jian-btn { width: 100%; text-align: center; margin: .6rem 0 2rem; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-configure-info .jian-btn img { max-width: 100%; display: inline-block; } .n-configure-info .jian-btn.active { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .md-perspective, .md-perspective body { background: #f2f2f2; height: 100%; overflow: hidden; } .md-perspective .alert-warp { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: perspective(600px) rotateX(10deg); transform: perspective(600px) rotateX(10deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all .5s ease-in; transition: all .5s ease-in; } .md-perspective .md-overlay1 { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: perspective(600px) rotateX(10deg); transform: perspective(600px) rotateX(10deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all .5s ease-in; transition: all .5s ease-in; } .md-overlay.md-overlay1 { background: rgba(0, 0, 0, 0.5); } .md-modal.fli-box { width: 1200px; height: calc(100vh - 200px); } .md-modal.fli-box .mCSB_scrollTools { background: #f9f9f9; } .md-modal.fli-box .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: #aaa !important; width: 6px; } .md-modal.fli-box .mCSB_scrollTools .mCSB_draggerRail { display: none !important; } .fli-box .p-16 { height: calc(100vh - 260px); } .fli-box .np-16 { height: calc(100vh - 260px - 2.5rem); } .fli-box .md-content h3 { margin: 0; height: 60px; padding: 15px .25rem; text-align: center; font-size: .75rem; line-height: 30px; font-weight: 300; color: #333; background: rgba(0, 0, 0, 0.1); border-radius: 3px 3px 0 0; } .fli-box .md-content { background: #fff; } .fli-box .md-close { position: absolute; width: 40px; height: 40px; right: 0; top: 0; cursor: pointer; } .fli-box .md-close:before { position: absolute; font-size: 20px; left: 50%; top: 50%; width: 20px; height: 20px; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: #333; } .fli-box .p-16 { font-size: 14px; color: #333; line-height: 1.8; padding: 1rem .6rem 1.5rem; } .coad-alert .md-content { width: 450px; height: 280px; padding: 1.25rem; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .coad-alert .md-content .tit1 { line-height: 1; } .coad-alert .md-content .coad-box { width: 100%; margin-top: 1rem; margin-bottom: .5rem; } .coad-alert .md-content .coad-box img { max-width: 100%; } .coad-alert .md-content { background: #fff; } .coad-alert .md-close { position: absolute; width: 40px; height: 40px; right: 5px; top: 5px; cursor: pointer; } .coad-alert .md-close:before { position: absolute; font-size: 30px; left: 50%; top: 50%; width: 30px; height: 30px; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: #333; } .coad-alert .coad-button { width: 100%; height: 50px; line-height: 50px; text-align: center; background: #f8f8f8; display: block; cursor: pointer; box-shadow: inset 0px 0px 0px 1px #eee; } .coad-alert .coad-button p { position: relative; z-index: 2; font-size: 16px; color: #e60012; -webkit-transition: all .3s ease; transition: all .3s ease; } .coad-alert .coad-button:before { z-index: 1; background: #cb0f1e; width: 600px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .coad-alert .coad-button:hover p { color: #fff; } .coad-alert .coad-button:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .car560-img-alert .md-content { width: 1000px; background: none; max-width: auto; min-width: auto; left: 50%; top: 20%; margin-left: -500px; } .car560-img-alert .swiper-img { width: 745px; text-align: center; background:#fff; } .car560-img-alert .swiper-img .swiper-slide{ padding:30px; } .car560-img-alert .swiper-img .img { width: 100%; } .car560-img-alert .swiper-img .p { margin-top: 10px; font-size: 18px; color: #333; line-height: 1.5; } .car560-img-alert .swiper-button-next, .car560-img-alert .swiper-button-prev { background: none !important; } .car560-img-alert .icon-rot { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .car560-img-alert .icon { width: 35px; height: 35px; fill: #000; } .car560-img-alert .swiper-button-next:hover, .car560-img-alert .swiper-button-prev:hover { opacity: .6; } .car-560-close { position: fixed; width: 50px; height: 50px; right: 10px; top: 10px; cursor: pointer; z-index: 1200; visibility: hidden; } .car-560-close:before { position: absolute; font-size: 50px; left: 0px; top: 0px; width: 50px; height: 50px; color: #fff; } .trim360-alert { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 99; visibility: hidden; } .trim360-alert .md-content { width: 100%; height: 100%; } .trim360-alert .click-down { width: 100px; height: 27px; line-height: 27px; position: absolute; bottom: 105px; left: 50%; margin-left: -50px; background: url(../images/img43.png) no-repeat center; cursor: pointer; background-size: 100% 100%; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 5; } .trim360-alert .click-down img { width: 18px; height: 11px; margin-right: 5px; -webkit-transition: all .5s ease; transition: all .5s ease; } .trim360-alert .click-down span { display: inline-block; font-size: 14px; color: rgba(255, 255, 255, 0.6); } .trim360-alert .trim360-tab { position: absolute; height: 105px; width: 100%; left: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 15px 0; background: rgba(0, 0, 0, 0.85); -webkit-transform: translate(0, 0%); -ms-transform: translate(0, 0%); transform: translate(0, 0%); -webkit-transition: -webkit-transform .5s ease; transition: transform .5s ease; z-index: 5; } .trim360-alert .trim360-tab .li-tab { width: 120px; height: 70px; line-height: 68px; text-align: center; position: relative; margin: 0 6px; cursor: pointer; } .trim360-alert .trim360-tab .li-tab img { width: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; } .trim360-alert .trim360-tab .li-tab:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); } .trim360-alert .trim360-tab .trim360-tit { position: absolute; width: 100%; padding: 0 5%; left: 0; top: 0; text-align: center; top: 50%; margin-top: -13px; z-index: 2; } .trim360-alert .li-tab.cur img { box-shadow: 0px 0px 0px 2px #d53737; } .trim360-alert .trim360-tab.cur { -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); } .trim360-alert .click-down.cur { -webkit-transform: translate(0, 105px); -ms-transform: translate(0, 105px); transform: translate(0, 105px); } .trim360-alert .click-down.cur img { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .trim360-close { position: fixed; width: 50px; height: 50px; right: 10px; top: 10px; cursor: pointer; z-index: 100; opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; visibility: hidden; } .trim360-close:before { position: absolute; font-size: 50px; line-height: 1; left: 50%; top: 50%; width: 50px; height: 50px; color: #fff; margin-left: -25px; margin-top: -25px; -webkit-transition: all .5s ease; transition: all .5s ease; } .trim360-close:hover:before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); color: #d53737; } .trim360-alert.md-show { visibility: visible; } .bg-none-s { background: #000; opacity: .5; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; display: none; } .meadia-ajax.active { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1 /*display: block;*/ } .meadia-ajax .close-btn { width: 75px; height: 75px; position: absolute; right: 0rem; top: 0; z-index: 9; cursor: pointer; background: #333; } .meadia-ajax { width: 80%; position: fixed; height: 16rem; left: 50%; margin-left: -40%; top: 50%; margin-top: -8rem; /*overflow: hidden;*/ opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: opacity .5s,-webkit-transform 1s; transition: opacity .5s,transform 1s; display: none; background: #000; z-index: 101; } .meadia-ajax video { width: 100%; max-height: 16rem; } .PageMenu-closeBtn { width: 26px; height: 26px; padding: 0; position: absolute; top: 50%; left: 50%; margin-top: -13px; margin-left: -13px; box-sizing: border-box; background-color: transparent; border: none; z-index: 20; outline: 0; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); } .PageMenu-closeBtn .line-01, .PageMenu-closeBtn .line-02 { width: 100%; height: 3px; background-color: #fff; position: absolute; left: 50%; top: 50%; } .PageMenu-closeBtn .line-01 { -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .PageMenu-closeBtn .line-02 { -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .PageMenu-closeBtn .line-01:after, .PageMenu-closeBtn .line-02:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #e15d56; -webkit-transform: scaleX(0) translateZ(0); transform: scaleX(0) translateZ(0); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } .PageMenu-closeBtn:hover .line-01:after, .PageMenu-closeBtn:hover .line-02:after { -webkit-transform: scaleX(1) translateZ(0); transform: scaleX(1) translateZ(0); } .PageMenu-closeBtn:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .backtop svg { height: 20px; width: 20px; position: relative; display: block; margin: 0 auto; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .backtop.active { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } @-webkit-keyframes scaleloading { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(10); transform: scale(10); opacity: 0; } } @keyframes scaleloading { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(10); transform: scale(10); opacity: 0; } } @-webkit-keyframes glowmation { 0% { top: -3%; left: -3%; background-position: 0% 50%; background-size: 150% 150%; } 12.5% { top: -3%; left: 0; background-size: 70% 30%; } 25% { top: -3%; left: 3%; background-size: 100% 50%; } 37.5% { top: 0; left: 3%; background-size: 70% 30%; } 50% { top: 3%; left: 3%; background-position: 100% 50%; background-size: 30% 30%; } 62.5% { top: 3%; left: 0; background-size: 30% 70%; } 75% { top: 3%; left: -3%; background-size: 50% 100%; } 87.5% { top: 0; left: -3%; background-size: 30% 70%; } 100% { top: -3%; left: -3%; background-position: 0% 50%; background-size: 150% 150%; } } @keyframes glowmation { 0% { top: -3%; left: -3%; background-position: 0% 50%; background-size: 150% 150%; } 12.5% { top: -3%; left: 0; background-size: 70% 30%; } 25% { top: -3%; left: 3%; background-size: 100% 50%; } 37.5% { top: 0; left: 3%; background-size: 70% 30%; } 50% { top: 3%; left: 3%; background-position: 100% 50%; background-size: 30% 30%; } 62.5% { top: 3%; left: 0; background-size: 30% 70%; } 75% { top: 3%; left: -3%; background-size: 50% 100%; } 87.5% { top: 0; left: -3%; background-size: 30% 70%; } 100% { top: -3%; left: -3%; background-position: 0% 50%; background-size: 150% 150%; } } @-webkit-keyframes img1 { 0% { opacity: .5; } 20% { opacity: 1; } 40% { opacity: .8; } 50% { color: 1; } 80% { color: 1; } 100% { color: .8; } } @keyframes img1 { 0% { opacity: .5; } 20% { opacity: 1; } 40% { opacity: .8; } 50% { color: 1; } 80% { color: 1; } 100% { color: .8; } } @-webkit-keyframes loader1 { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes loader1 { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @-webkit-keyframes arrow2 { 0% { -webkit-transform: translatey(0); transform: translatey(0); } 50% { -webkit-transform: translatey(4px); transform: translatey(4px); } } @keyframes arrow2 { 0% { -webkit-transform: translatey(0); transform: translatey(0); } 50% { -webkit-transform: translatey(4px); transform: translatey(4px); } } .js-m { opacity: 0; -webkit-transform: translate(0, 30px); -ms-transform: translate(0, 30px); transform: translate(0, 30px); -webkit-transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82); transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82); } .js-m.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .js-m.js-m-2 { opacity: 0; -webkit-transform: translate(30px, 0); -ms-transform: translate(30px, 0); transform: translate(30px, 0); -webkit-transition: all .8s ease; transition: all .8s ease; } .js-m.js-m-2.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .js-m-3 { opacity: 0; -webkit-transform: translate(30px, 0); -ms-transform: translate(30px, 0); transform: translate(30px, 0); -webkit-transition: all .8s ease; transition: all .8s ease; } .js-m-3.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .js-m.js-m-4 { opacity: 0; -webkit-transform: translate(0, -100px); -ms-transform: translate(0, -100px); transform: translate(0, -100px); -webkit-transition: all .8s ease; transition: all .8s ease; } .js-m.js-m-4.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .js-m-top { opacity: 0; -webkit-transform: translate(0, 100px); -ms-transform: translate(0, 100px); transform: translate(0, 100px); -webkit-transition: all 1.5s cubic-bezier(0.69, 0.1, 0.12, 1.02); transition: all 1.5s cubic-bezier(0.69, 0.1, 0.12, 1.02); } .js-m-top.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .imgbg-tong { position: relative; } .imgbg-tong:after { content: ""; margin: 0 0 0 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; z-index: 4; -webkit-transition: all 0.5s ease-in-out 0.5s; transition: all 0.5s ease-in-out 0.5s; } .imgbg-tong:before { content: ""; margin: 0 0 0 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #111; z-index: 5; opacity: 1; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .js-m.animate.imgbg-tong:before, .js-m.animate.imgbg-tong:after { margin-right: 0; right: 0; bottom: 0; left: 100%; } .image-in { display: block; overflow: hidden; } .image-in::before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right center 0px; -ms-transform-origin: right center 0px; transform-origin: right center 0px; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); -webkit-transition-property: -webkit-transform, -webkit-transform; transition-property: transform, -webkit-transform; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .image-in::before { content: ""; display: block; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 20; background-color: black; } .image-in { -webkit-transform: translate3d(-100.5%, 0px, 0px); transform: translate3d(-100.5%, 0px, 0px); -webkit-transform-origin: left center 0px; -ms-transform-origin: left center 0px; transform-origin: left center 0px; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); -webkit-transition-property: -webkit-transform, -webkit-transform; transition-property: transform, -webkit-transform; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .js-m.animate .image-in { -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .js-m.animate .image-in::before { -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); } .delay1 { -webkit-transition-delay: .1s !important; transition-delay: .1s !important; } .delay2 { -webkit-transition-delay: .2s !important; transition-delay: .2s !important; } .delay3 { -webkit-transition-delay: .3s !important; transition-delay: .3s !important; } .delay4 { -webkit-transition-delay: .4s !important; transition-delay: .4s !important; } .delay5 { -webkit-transition-delay: .5s !important; transition-delay: .5s !important; } .delay6 { -webkit-transition-delay: .6s !important; transition-delay: .6s !important; } .delay7 { -webkit-transition-delay: .7s !important; transition-delay: .7s !important; } .delay8 { -webkit-transition-delay: .8s !important; transition-delay: .8s !important; } .delay9 { -webkit-transition-delay: .9s !important; transition-delay: .9s !important; } .delay01 { -webkit-transition-delay: .03s !important; transition-delay: .03s !important; } .delay02 { -webkit-transition-delay: .08s !important; transition-delay: .08s !important; } .delay03 { -webkit-transition-delay: .13s !important; transition-delay: .13s !important; } .delay04 { -webkit-transition-delay: .18s !important; transition-delay: .18s !important; } .delay05 { -webkit-transition-delay: .23s !important; transition-delay: .23s !important; } .delay06 { -webkit-transition-delay: .28s !important; transition-delay: .28s !important; } .delay07 { -webkit-transition-delay: .33s !important; transition-delay: .33s !important; } .delay08 { -webkit-transition-delay: .38s !important; transition-delay: .38s !important; } .delay09 { -webkit-transition-delay: .43s !important; transition-delay: .43s !important; } /*.header1.on{ position: relative; background: #1a1a1a; background-image: linear-gradient(#000,#121212); h1{ margin: 38px 0 0; } nav{ top: 32px; } } .header2.on{ position: relative; background: #1a1a1a; background-image: linear-gradient(#000,#121212); } .star-bg { position: fixed; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; }*/ .lang-item { position: absolute; width: 100px; right: 20px; top: 80px; background: rgba(255, 255, 255, 0.8); display: none; } .lang-item a { line-height: 30px; text-align: center; display: block; color: #666; font-size: 14px; border-bottom: 1px solid #dcdcdc; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .lang-item a:hover { color: #da3830; } .lang-item a:last-child { border-bottom: none; } #canvas2 { width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 1; left: 0; top: 0; /*opacity: 0; filter: alpha(opacity=0);*/ -webkit-transition: opacity 0.8s 1s; transition: opacity 0.8s 1s; } .n-join .listf .erwei-box .li{ display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin:0 3rem; } .car_model .lista .ultab{ position: relative; z-index: 2; } .car_model .lista .carajax-360{ position: relative; z-index: 1; } .onLoadingDiv{ background: none !important; } .car_model .lista .car-imgbox .ulimg #carimg{ cursor: move; } .n-promotion{ padding-top:2.5rem; } .n-promotion .tit-h { display: inline-block; padding: 0 80px; line-height: 1.5; position: relative; } .n-promotion .tit-h:before { content: ""; position: absolute; width: 35px; height: 1px; background: #e7e7e7; left: 0; top: 50%; } .n-promotion .tit-h:after { content: ""; position: absolute; width: 30px; height: 1px; background: #e7e7e7; right: 0; top: 50%; } .promotion-box{ margin-top:1.2rem; } .errors-alert .md-content { width: 450px; height: auto; padding: 1.25rem; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .errors-alert .md-content .tit1 { line-height: 1.5; margin-bottom:1rem; } .errors-alert .md-content .coad-box { width: 100%; margin-top: 1rem; margin-bottom: .5rem; } .errors-alert .md-content { background: #fff; } .errors-alert .md-close { position: absolute; width: 40px; height: 40px; right: 5px; top: 5px; cursor: pointer; } .errors-alert .md-close:before { position: absolute; font-size: 30px; left: 50%; top: 50%; width: 30px; height: 30px; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: #333; } .errors-alert .coad-button { width: 100%; height: 50px; line-height: 50px; text-align: center; background: #f8f8f8; display: block; cursor: pointer; box-shadow: inset 0px 0px 0px 1px #eee; } .errors-alert .coad-button p { position: relative; z-index: 2; font-size: 16px; color: #e60012; -webkit-transition: all .3s ease; transition: all .3s ease; } .errors-alert .coad-button:before { z-index: 1; background: #cb0f1e; width: 600px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .errors-alert .coad-button:hover p { color: #fff; } .errors-alert .coad-button:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-news-sreach .tit-h { display: inline-block; padding: 0 80px; line-height: 1.5; position: relative; } .n-news-sreach .tit-h:before { content: ""; position: absolute; width: 35px; height: 1px; background: #e7e7e7; left: 0; top: 50%; } .n-news-sreach .tit-h:after { content: ""; position: absolute; width: 30px; height: 1px; background: #e7e7e7; right: 0; top: 50%; } .n-news-sreach{ padding-top:2rem; min-height:600px; } .bd_weixin_popup{ width:260px !important; height: 320px !important; } /*鏂板姞杞﹀瀷搴曢儴棰勭害*/ .fot-alert .md-content { width: 100%; height: auto; padding: 1.25rem; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .fot-alert .md-content .tit1 { line-height: 1.5; margin-bottom:.2rem; } .fot-alert .md-content .tit2 { margin-top:5px; line-height:1.5; } .fot-alert .md-content { background: #fff; } .fot-alert .md-content .img { text-align: center; } .fot-alert .md-content .img img{ max-width:100%; display: inline-block; } .fot-alert .md-close { position: absolute; width: 40px; height: 40px; right: 5px; top: 5px; cursor: pointer; } .fot-alert .md-close:before { position: absolute; font-size: 30px; left: 50%; top: 50%; width: 30px; height: 30px; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: #333; } .fot-alert .coad-button:before { z-index: 1; background: #cb0f1e; width: 600px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .fot-alert .coad-button:hover p { color: #fff; } .fot-alert .coad-button:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .fot-alert{ position: fixed; top: 50%; left: 50%; width: 50%; max-width:400px; min-width: 320px; height: auto; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .fot-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(0, 0, 0,0.5); -webkit-transition: all 0.3s; transition: all 0.3s; } .fot-alert.md-show ~ .fot-overlay { opacity: 1; visibility: visible; } .fot-alert.md-show ~ .md-close { opacity: 1; visibility: visible; } .n-join .lista .join-list .button-btn3 { width: 130px; height: 45px; line-height: 45px; text-align: center; color: #fff; background: #d00010; display: inline-block; position: relative; } .n-join .lista .join-list .button-btn3 p { position: relative; z-index: 2; -webkit-transition: all .3s ease; transition: all .3s ease; } .n-join .lista .join-list .button-btn3:before { z-index: 1; background: #c0000f; width: 250px; height: 100px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .n-join .lista .join-list .button-btn3:hover p { color: #fff; } .n-join .lista .join-list .button-btn3:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .n-join .join-list-ajax .joins { padding:1rem; background:#f9f9f9; border-top: 1px solid #cccccc; display: none; } .n-join .join-list-ajax .joins .join-info .p{ font-size:16px; color:#666; line-height:1.8; margin-bottom:.7rem; } .n-join .join-list-ajax .joins .join-info .p .tit1{ font-size:18px; color:#000; line-height: 1.5; margin-bottom:.5rem; } .n-news-sreach .w1660{ margin-top:1.5rem; } .car_model .img-icon-dan{ width:104px; height:73px; position: absolute; right:.5rem; bottom:.5rem; } .pc-sub-scroll{ height: 66px; position: relative; } .nav-car_buying.scroll{ position:fixed; background:#fff; left:0; top:70px; width: 100%; box-shadow:0px 0px 4px 0px rgba(0,0,0,.1); border-bottom:none; z-index: 3; } .tips-alert .md-content { width: 100%; height: auto; background:#fff; border-radius:5px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .tips-alert .md-content .tit1 { line-height: 1.5; height:60px; line-height:60px; text-align:center; background:#ebebeb; } .tips-alert .md-content .tit2 { line-height: 1.5; margin-bottom:.2rem; padding: 1.25rem; color:#333; text-align:center; } .tips-alert .md-close { position: absolute; width: 40px; height: 40px; right: 5px; top: 5px; cursor: pointer; } .tips-alert .md-close:before { position: absolute; font-size: 30px; left: 50%; top: 50%; width: 30px; height: 30px; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: #333; } .tips-alert .coad-button:before { z-index: 1; background: #cb0f1e; width: 600px; height: 200px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .tips-alert .coad-button:hover p { color: #fff; } .tips-alert .coad-button:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .tips-alert{ position: fixed; top: 50%; left: 50%; width: 50%; max-width:400px; min-width: 320px; height: auto; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .tips-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(0, 0, 0,0.5); -webkit-transition: all 0.3s; transition: all 0.3s; } .tips-alert.md-show ~ .tips-overlay { opacity: 1; visibility: visible; } .tips-alert.md-show ~ .md-close { opacity: 1; visibility: visible; } .con-left .li-item .li{ text-align: center; margin:0; padding:0 .2rem; } .con-left .li-item{ overflow: hidden; } .md-content-img #panoramaConianerm,.md-content-img #panoramaConianer1{ cursor: pointer; } .n-configure .con-left .wli-item{ margin-top: .85rem; height:60px; background: #fff url(../images/img52.jpg) no-repeat center bottom; background-size: 100% auto; position: relative; margin-bottom: 2rem; } .n-configure .con-left .li-item { padding-bottom: 25px; width:100%; overflow: hidden; background:#fff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .n-configure .con-left .li-item .li { font-size: 15px; line-height: 24px; color: #222; position: relative; padding-top: 10px; text-align: center; margin: 0; } .n-configure .con-left .li-item .li:before { content: ""; left: 50%; top: 0; opacity: 0; -webkit-transform: translate(-50%, -10px); -ms-transform: translate(-50%, -10px); transform: translate(-50%, -10px); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #e70e1e; position: absolute; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-configure .con-left .li-item .li:hover:before, .n-configure .con-left .li-item .li.cur:before { opacity: 1; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .n-configure .con-left .wli-item{ height: 66px; position: relative; } .n-configure .con-left .li-item.scroll{ position:fixed; background:#fff; left:calc((100% - 1280px)/2); top:78px; width:calc(1280px * 0.68); box-shadow:0px 0px 4px 0px rgba(0,0,0,.1); border-bottom:none; padding:15px 30px; z-index: 3; } .drive-info .img img{ width:100%; } .news-info .info-box-left .text table{ width:100% !important; } .news-info .info-box-left .text table td{ padding:10px !important; } .upload-container a{ color: #333; } .mainImage__scroll { width: 21px; position: absolute; left: 50%; margin-left: -10px; bottom: 50px; z-index: 3; transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; -webkit-transition: all .2s ease-out; transform-origin: center bottom; moz-transform-origin: center bottom; -o-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; -webkit-perspective: 500px; perspective: 500px; } .mainImage__scroll:before{ content:""; position: absolute; width: 21px; height: 35px; border: 1px solid #fff; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .mainImage__scrollIcon { position: absolute; top: 8px; left: 10px; z-index: 2; display: block; margin: 0 auto; width: 1px; height: 8px; background: #fff; -webkit-animation: fadeOutDown 2s infinite; animation: fadeOutDown 2s infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .mainImage__scroll:after { content:""; position: absolute; top: 18px; left: 10px; width: 1px; height: 50px; background: #fff; } @-webkit-keyframes fadeOutDown { 0% { opacity:1; -webkit-animation-timing-function:cubic-bezier(.04,.35,.25,.98); animation-timing-function:cubic-bezier(.04,.35,.25,.98) } 50% { opacity:0; height:2px; top:20px } 100% { opacity:0; top:20px } } @keyframes fadeOutDown { 0% { opacity:1; -webkit-animation-timing-function:cubic-bezier(.04,.35,.25,.98); animation-timing-function:cubic-bezier(.04,.35,.25,.98) } 50% { opacity:0; height:2px; top:20px } 100% { opacity:0; top:20px } } .sidebar-box .jin-box{ width:150px; position: absolute; text-align:center; height:62px; line-height:42px; padding:10px; font-size:16px; color:#fff; background-color: #831526; position: absolute; right:64px; top:0; transform:translate(100%,0); transition: all 1s ease; z-index:1; } .sidebar-box .itembox .por{ z-index:3; background:#831526; } .sidebar-box .itembox.alert_sf{ overflow: inherit; } .sidebar-box .itembox:hover .jin-box{ transform:translate(0%,0); } .news-info .back-btn a { height: 45px; line-height: 45px; font-size: 16px; margin: 15px 0px; display: block; width: 130px; text-align:center; box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,.5); } .news-info .back-btn p{ display: inline-block; color: #333; position: relative; z-index: 2; padding-right:20px; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .news-info .back-btn p:before{ right:5px; font-size:14px; position: absolute; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } .news-info .back-btn a.hover_1:before { z-index: 1; background: #d00010; width: 250px; height: 120px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .news-info .back-btn a.hover_1:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .news-info .back-btn a.hover_1:hover p{ color:#fff; } .news-info .back-btn a.hover_1:hover p:before{ -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; right:0px; } .n-configure .con-right.scroll{ position:fixed; top:78px; width:calc(1280px * 0.29); right:calc((100% - 1280px)/2); } .n-configure .con-left{ position: relative; z-index: 2; } .n-configure .con-right.on{ top:-200px; } .n-configure .con-left .li-item{ position: relative; padding:0 30px; } .n-configure .con-left .swiper-button-next, .n-configure .con-left .swiper-container-rtl .swiper-button-prev,.n-configure .con-left .swiper-button-prev, .n-configure .con-left .swiper-container-rtl .swiper-button-next{ background:#fff !important; width:30px; margin-top: -18px; background:#fff; text-align: center; } .n-configure .con-left .swiper-button-next{ right:0; } .n-configure .con-left .swiper-button-prev{ left:0; } .n-configure .con-left .swiper-button-next:before, .n-configure .con-left .swiper-button-prev:before{ font-size:16px; line-height:44px; position: absolute; left:50%; margin-left:-8px; } .n-configure .con-left .swiper-button-next:before{ transform:rotate(-180deg); } .n-configure .con-left .li-item.scroll .swiper-button-next,.n-configure .con-left .li-item.scroll .swiper-button-prev{ margin-top: -17px; } .news-info .info-box-left{ min-height:800px; } .news-info .info-box-right .li:first-child{ padding-top:0; } .news-info .info-box-right .li{ padding:15px 0; border-bottom: 1px solid #f2f1f1; } .n-derler .mapbox .map-list .mCSB_inside>.mCSB_container{ margin-right:0px !important; } @media (max-width: 1360px) { .n-configure .con-left .li-item.scroll{ left:6%; width:calc(88% * 0.68); } .n-configure .con-right.on{ top:-180px; } .n-configure .con-right.scroll{ position:fixed; top:70px; width:calc(88% * 0.29); right:6%; } } @media (max-width: 1023px) { .nav-car_buying.scroll{ top:0px; } .n-car_buying .listb .eventbox .img{ height:120px; } .n-configure .con-left .li-item.scroll{ left:6%; width:calc(88% * 0.60); } } .news-info .info-box-left .text img{ height: auto !important; width:auto !important; } /*ix5杞﹀瀷*/ .ix5-lista .carajax-360 { position: relative; z-index: 1; } .ix5-lista #carimg { margin-top: -5rem; } .ix5-lista .ultab .li:last-child:before { display: none; } .listix-1 { background: url(../images/ix2.jpg) no-repeat center; background-size: cover; height: 22.5rem; } .listix-1 .text-ix5 { padding: 3.5rem 0 0 6.25rem; } .listix-1 .libox { display: flex; display: -webkit-flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; width: 350px; } .listix-1 .libox .img { margin-right: .5rem; } .listix-1 .libox .li { padding: .6rem 0; width: 100%; display: flex; display: -webkit-flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; border-bottom: 1px solid rgba(51, 65, 73, 0.5); } .listix-2 { padding: 2.5rem 0 1.25rem; background: url(../images/ix3.jpg) no-repeat center; background-size: cover; } .listix-2 .tit-title { margin-bottom: 0; } .listix-2 .title-tit2 { color: #ededed; position: relative; padding: 0 2rem; display: inline-block; } .listix-2 .title-tit2:after { content: ""; position: absolute; width: 1.5rem; height: 1px; background: rgba(237, 237, 237, 0.2); right: 0; top: 50%; } .listix-2 .title-tit2:before { content: ""; position: absolute; width: 1.5rem; height: 1px; background: rgba(237, 237, 237, 0.2); left: 0; top: 50%; } .listix-2 .car-img { margin-top: 4.75rem; text-align: center; } .listix-2 .car-img img { max-width: 100%; } .listix-2 .bot-li { display: flex; display: -webkit-flex; flex-flow: row nowrap; justify-content: center; align-items: center; text-align: center; margin-top: 1.25rem; } .listix-2 .bot-li .img { margin-right: .5rem; } .listix-2 .bot-li .li { padding: 0 1.5rem; display: flex; display: -webkit-flex; flex-flow: row nowrap; justify-content: center; align-items: center; text-align: left; border-right: 1px solid rgba(255, 255, 255, 0.2); } .listix-2 .bot-li .li:nth-child(4n) { border-right: none; } .listix-3 { height: 20rem; padding-top: 1.75rem; position: relative; background: url(../images/ix4.jpg) no-repeat center; background-size: cover; } .listix-3 .bot-li { display: flex; display: -webkit-flex; flex-flow: row nowrap; justify-content: center; align-items: center; text-align: center; margin-top: 1.25rem; } .listix-3 .bot-li .img { margin-right: .5rem; } .listix-3 .bot-li .li { padding: 0 1.5rem; display: flex; display: -webkit-flex; flex-flow: row nowrap; justify-content: center; align-items: center; text-align: left; border-right: 1px solid rgba(255, 255, 255, 0.2); } .listix-3 .bot-li .li:nth-child(4n) { border-right: none; } .listix-4 .imgbox { width: 100%; } .listix-4 .imgbox img { width: 100% !important; } .listix-2 .title-tit2{ letter-spacing: 10px; } /*2018-10-08*/ .i-lista .carbox .botbox .buttonbox{ height:50px; line-height:50px; } .i-lista .carbox .botbox .buttonbox p{ line-height:50px; height:50px; } .i-lista .carbox .botbox .buttonbox:nth-child(1){ background:#d00010; box-shadow:none; } .i-lista .carbox .botbox .buttonbox:nth-child(1):hover:before{ background:#b3000e; } /*xin-330杞﹀瀷*/ .x330-lista .carajax-360 { position: relative; z-index: 1; } .x330-lista .ultab .li:last-child:before { display: none; } .list330-1 { padding: 2.25rem 0 1.5rem; background: #fff; } .list330-1 .imgcar { background-position: center center; background-size: cover; height: 12rem; margin-top: 1.7rem; } .list330-1 .car330 { width: 13.5rem; height: 14.25rem; margin: -8.75rem 0 0; } .list330-2 { height: 22.25rem; position: relative; } .list330-2 .bot-li { display: flex; display: -webkit-flex; flex-flow: row nowrap; justify-content: center; align-items: center; text-align: center; margin-top: 1.25rem; } .list330-2 .bot-li .img { margin-right: .5rem; } .list330-2 .bot-li .li { padding: 0 1rem; display: flex; display: -webkit-flex; flex-flow: row nowrap; justify-content: center; align-items: center; text-align: left; border-right: 1px solid rgba(255, 255, 255, 0.2); } .list330-2 .bot-li .li:nth-child(4n) { border-right: none; } .list330-2 .carbg-list { position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index: 1; } .list330-2 .carbg-list .swiper-slide { background-size: cover; background-repeat: no-repeat; background-position: center center; padding-top: 2.1rem; } .list330-2 .carbg-list .swiper-pagination { bottom: 1.5rem; } .list330-2 .carbg-list .swiper-pagination span { width: 16px; height: 16px; margin: 0 10px; display: inline-block; border-radius: 100%; background: none; opacity: 1; box-shadow: inset 0px 0px 0px 2px #d6d6d6; position: relative; transition: all .5s ease; } .list330-2 .carbg-list .swiper-pagination span:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #a6a6a6; opacity: 0; border-radius: 50%; transform: scale(0, 0); transition: all .5s ease; } .list330-2 .carbg-list .swiper-pagination span.swiper-pagination-bullet-active { box-shadow: inset 0px 0px 0px 2px #a6a6a6; } .list330-2 .carbg-list .swiper-pagination span.swiper-pagination-bullet-active:before { opacity: 1; transform: scale(1, 1); } .list330-3 { padding: 2.5rem 0 2.25rem; text-align: center; background: url(../images/x330-6.jpg) no-repeat center center; background-size: cover; } .list330-3 .twocar-img { width: 17rem; height: 16.75rem; margin: 1rem auto 0; position: relative; overflow: hidden; } .list330-3 .twocar-img img { display: block; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .list330-3 .twocar-img .imgs { position: absolute; left: 0; top: 0; width: 50%; height: 100%; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .list330-3 .twocar-img .point { width: 1px; position: absolute; left: 50%; top: 0; background-color: #fff; height: 100%; cursor: pointer; } .list330-3 .twocar-img .point i { margin-left: -25px; margin-top: -25px; position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; cursor: pointer; z-index: 5; background: url(../images/x330-14.png) center center no-repeat; background-size: cover; } .configure-list .all-cbtn { margin-top: .6rem; height: 50px; line-height: 50px; display: block; background: #da3830; width: 190px; margin: .7rem auto 0; font-size: 14px; text-align: center; z-index: 2; cursor: pointer; transition: all .5s ease; } .configure-list .all-cbtn p { display: inline-block; color: #fff; position: relative; z-index: 2; padding-right: 20px; } .configure-list .all-cbtn p:before { font-size: 12px; color: #fff; position: absolute; right: 0; } .configure-list .hover_1:before { z-index: 1; background: #d00010; width: 250px; height: 120px; transform-origin: left center; transform: translate(-50%, -50%) scale(0); } .configure-list .hover_1:hover:before { transform: translate(-50%, -50%) scale(1); } .all-configurebox { background: #fff; position: fixed; width: 100%; height: 100vh; left: 0; top: 0; z-index: 99; display: none; overflow-x: auto; } .all-configurebox .n-configurebox { min-width: 1200px; } .all-configurebox .top-l { padding: 0 10px; height: 70px; line-height: 70px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-content: flex-start; float: left; } .all-configurebox .top-l span { padding: 0 .5rem; } .all-configurebox .top-l .sp1 { position: relative; } .all-configurebox .top-l .sp1:before { content: ""; width: 1px; height: 36px; background: #b2b2b2; right: 0; top: 50%; margin-top: -18px; position: absolute; } .all-configurebox .configurebox-close { width: 40px; height: 40px; /*position: absolute;*/ float: right; margin-right: 1rem; margin-top: 15px; text-align: center; cursor: pointer; } .all-configurebox .configurebox-close:before { color: #000; font-size: 30px; line-height: 40px; } .all-configurebox .tablebox table td, .all-configurebox .tablebox th { border-top: solid 1px #d5d5d5; box-sizing: border-box; padding: 12px 8px; text-align: center; word-break: break-all; } .all-configurebox .tablebox table { width: 100%; background: #ececec; border-collapse: collapse; border-spacing: 0; } .all-configurebox .tablebox table td { font-size: 13px; color: #575757; border-left: solid 1px #d5d5d5; } .all-configurebox .tablebox table .price th { background: #fff; border-top: solid 1px #d5d5d5; border-bottom: solid 1px #d5d5d5; } .all-configurebox .tablebox table .price td { background: #fff; border-top: solid 1px #d5d5d5; border-left: solid 1px #d5d5d5; border-bottom: solid 1px #d5d5d5; color: #161616; } .all-configurebox .tablebox table tr.title { background: #414141; color: #fff; cursor: pointer; } .all-configurebox .tablebox table tr.title td { border-left: none; text-align: right; } .all-configurebox .tablebox table tr.title td i { margin-right: 15px; } .all-configurebox .tablebox table tr.title td i:before { font-size: 24px; color: #fff; } .all-configurebox .table .table-2 { background: #fff; width: 100%; } .all-configurebox .table-wrap { touch-action: auto !important; } .all-configurebox .table-wrap.mCS_touch_action { touch-action: auto !important; } .all-configurebox .table-wrap .mCSB_scrollTools { width: 4px; } .all-configurebox .table-wrap .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: rgba(244, 19, 19, 0.75); border-radius: 0; } .all-configurebox .table-wrap .mCSB_inside > .mCSB_container { margin-right: 0; } .ovh-w { width: 100%; height: 100%; position: fixed; left: 0; top: 0; overflow: hidden; } .all-configurebox .tablebox table td, .all-configurebox .tablebox th{ padding: 8px; } .all-configurebox .tablebox table tr.title{ background: none; color: #000; } .all-configurebox .tablebox table tr.title td i:before{ color: #000; } .all-configurebox .tablebox table tr.expand{ background: #414141; color: #fff; } .all-configurebox .tablebox table tr.expand td i:before{ color: #fff; } .n-configurebox .table-wrap .p{ padding: .5rem 1.75rem; line-height:1.8; font-size:14px; color:#666; } .n-configure .con-right .contrast-button{ position:relative; z-index:1; } .bocweb-footer .top .fxbox a{ margin: 0 4px !important; } .bocweb-footer .top .fxbox .bds_app { background: url(../images/img5-5.png) no-repeat center; } .list-step-box{ position:relative; } .list-step-box .close{ width:40px; height:40px; position: absolute; font-size:24px; color:#333; right: .5rem; top: .5rem; text-align: center; line-height: 40px; cursor:pointer; } /*xin-ix5杞﹀瀷*/ .itemix5-1 { background: url(../images/img1.jpg) no-repeat center; background-size: cover; padding: 3.375rem 3.375rem 0; height: 19.5rem; } .itemix5-1 .text { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; margin-left: 5.5rem; } .itemix5-1 .text .title { font-size: 1.25rem; padding: .5rem .635rem; border: 1px solid #fff; border-radius: 5px; color: #fff; letter-spacing: 5px; } .itemix5-1 .text .p1 { font-size: 15px; color: #2ea1df; line-height: 1.6; margin-left: 1rem; } .itemix5-box { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } .itemix5-box .p2 { width: 14rem; color: #fff; font-size: 15px; line-height: 1.6; margin-left: 2.35rem; } .itemix5-box .p2 .li-item { margin-bottom: .75rem; } .itemix5-box .p2 .tit1 { font-size: .6rem; color: #2ea1df; font-weight: bold; margin-bottom: .3rem; } .itemix5-box .text .n-text { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .itemix5-box .text .n-text .img { padding-right: .75rem; position: relative; } .itemix5-box .text .n-text .img img { max-width: 100%; } .itemix5-box .text .n-text .img:before { content: ""; position: absolute; right: 0; width: 4px; height: 109px; top: 50%; margin-top: -54px; background: url(../images/img2.png) no-repeat center top; background-size: 100% 100%; } .itemix5-box .text .p1 { font-size: 15px; color: #fff; line-height: 1.6; margin-left: .75rem; } .itemix5-box .more-btn { width: 150px; height: 45px; line-height: 45px; border-radius: 45px; box-shadow: inset 0px 0px 0px 1px #fff; margin-top: .6rem; font-size: 15px; position: relative; text-align: center; cursor: pointer; transition: all .3s ease-in-out; } .itemix5-box .more-btn:before { width: 350px; height: 200px; left: 0px; /*top: 50%;*/ background: #e60012; } .itemix5-box .more-btn p { position: relative; z-index: 2; display: inline-block; color: #fff; padding-right: 20px; } .itemix5-box .more-btn p:before { position: absolute; right: 0; font-size: 14px; } .itemix5-box .more-btn:hover { box-shadow: inset 0px 0px 0px 1px #e60012; } .itemix5-2 { background: url(../images/img2.jpg) no-repeat center; background-size: cover; padding: 2.25rem 3.375rem 0; height: 19.5rem; } .itemix5-3 { background: url(../images/img3.jpg) no-repeat center; background-size: cover; padding: 11rem 3.375rem 0; height: 19.5rem; } .itemix5-4 { background: url(../images/img5.jpg) no-repeat center; background-size: cover; padding: 2.25rem 3.375rem 0; height: 22.8rem; } .itemix5-5 { background: url(../images/img6.jpg) no-repeat center; } .itemix5-6 { background: url(../images/img7.jpg) no-repeat center; background-size: cover; padding: 11rem 3.375rem 0; height: 19.5rem; justify-content: flex-end; } .itemix5-7 { background: url(../images/img8.jpg) no-repeat center; background-size: cover; padding: 4.2rem 3.375rem 0; height: 19.5rem; justify-content: flex-end; } .itemix5-8 { background: url(../images/img9.jpg) no-repeat center; background-size: cover; padding: 2.25rem 3.375rem 0; height: 19.5rem; } .itemix5-9 { background: url(../images/img10.jpg) no-repeat center; background-size: cover; padding: 2.25rem 3.375rem 0; height: 19.5rem; } .itemix5-9 .text { margin-left: 8rem; } .img-alert .md-content { width: 100%; height: auto; padding: .5rem 3.25rem; background: none; } .img-alert .md-close { position: absolute; width: 40px; height: 40px; font-size: 40px; color: #fff; right: 2.5rem; top: 1.5rem; cursor: pointer; line-height: 40px; text-align: center; } .img-alert { position: fixed; top: 50%; left: 50%; width: 100%; max-width: 100%; min-width: 320px; height: auto; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .img-alert .imgbox-list { width: 100%; /*padding:0 3.25rem;*/ height: auto; position: relative; overflow: hidden; } .img-alert .imgbox-list .swiper-slide .text { background: #fff; padding: 1rem .75rem .5rem; min-height: 1.6rem; box-sizing: content-box; font-size: 16px; color: #222; text-align:center; } .img-alert .md-content { height: 100vh; } .img-alert .md-content .swiper-button-prev { transform: translate(-80px, 0); } .img-alert .md-content .swiper-button-next, .img-alert .md-content .swiper-button-prev { width: 80px; height: 88px; line-height: 88px; text-align: center; font-size: 1.5rem; color: #fff; margin-top: -44px; opacity: 1; transition: all .3s ease; background: none !important; opacity: 0; } .img-alert .md-content .swiper-button-next { transform: rotate(-180deg) translate(-80px, 0); right: 0; } .img-alert .md-content:hover .swiper-button-prev { opacity: 1; transform: translate(0, 0); } .img-alert .md-content:hover .swiper-button-next { opacity: 1; transform: rotate(-180deg) translate(0, 0); } .img-alert .md-content .swiper-pagination { bottom: 2.5rem; width: 100%; } .img-alert .md-content .swiper-pagination span { opacity: 1; width: 1rem; height: .2rem; border-radius: .2rem; display: inline-block; background: #202225; margin: 0 .2rem; transition: all .3s ease-in-out; } .img-alert .md-content .swiper-pagination span.swiper-pagination-bullet-active { background: #ffffff; transform: scale(1.2, 1); } .fot-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(0, 0, 0, 0.5); -webkit-transition: all 0.3s; transition: all 0.3s; } .img-alert .imgbox-list { top: 50%; transform: translate(0, -50%); } .img-alert.md-show ~ .fot-overlay { opacity: 1; visibility: visible; } .img-alert.md-show ~ .md-close { opacity: 1; visibility: visible; } .img-alert .imgbox-list .swiper-wrapper.center{ justify-content: center; } .img-alert .md-content .swiper-pagination{ left:0; } .car-slide { position: fixed; z-index: 3; left: 0; bottom: 0; width: 100%; height: 70px; background: url(../images/img17.png) no-repeat center; background-size: cover; } .car-slide .car-slidebox { width: 1270px; height: 70px; padding-left:120px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .car-slide .car-slidebox .title { width: 200px; margin-right: .5rem; position:absolute; right: calc(50vw + 550px); text-align:left; } .car-slide .car-slidebox .input1 { width: 135px; height: 40px; background: #fff; padding: 5px 10px; margin-right: 5px; } .car-slide .car-slidebox .input1 input { background: none; border: none; line-height: 30px; font-size: 14px; color: #666; width: 100%; } .car-slide .car-slidebox .input2 { width: 190px; height: 40px; background: #fff; padding: 5px 10px; margin-right: 5px; } .car-slide .car-slidebox .input2 input { background: none; border: none; line-height: 30px; font-size: 14px; color: #666; width: 100%; } .car-slide .car-slidebox .input3 { width: 115px; height: 40px; background: #fff; padding: 5px 10px; margin-right: 5px; } .car-slide .car-slidebox .input3 select { background: none; border: none; height: 30px; line-height: 30px; font-size: 14px; color: #666; width: 100%; } .car-slide .car-slidebox .input4 { width: 245px; height: 40px; background: #fff; padding: 5px 10px; margin-right: .5rem; } .car-slide .car-slidebox .input4 select { background: none; border: none; height: 30px; line-height: 30px; font-size: 14px; color: #666; width: 100%; } .car-slide .car-slidebox .text { display: flex; flex-flow: row wrap; padding-left: 30px; margin-right: .75rem; width: 140px; position: relative; /*padding-left:30px; background:url(../images/img18.png) no-repeat left top; margin-right:.75rem;*/ } .car-slide .car-slidebox .text .inputbox { position: absolute; left: 0; top: 0; width: 18px; height: 18px; } .car-slide .car-slidebox .text .inputbox .input2 { appearance: none; -webkit-appearance: none; outline: none; width: 18px; height: 18px; opacity: 0; top: 3px; position: relative; z-index: 2; margin-right: 15px; } .car-slide .car-slidebox .text .inputbox .input2:checked + span { background: url(../images/img18.png) no-repeat center center; } .car-slide .car-slidebox .text .inputbox .input2 + span { width: 18px; height: 18px; border: 1px solid #fff; position: absolute; left: 0; top: 3px; z-index: 1; } .car-slide .car-slidebox .tit3 { position: relative; display: inline-block; padding-bottom: 5px; cursor: pointer; } .car-slide .car-slidebox .tit3:before { content: ""; position: absolute; width: 100%; bottom: 0; height: 1px; background: #de6a71; } .car-slide .car-slidebox .car-bottonbox { width: 130px; text-align: center; height: 40px; line-height: 40px; color: #020202; background: #ffba41; font-size: 16px; } @media (max-width: 1640px) { .car-slide .car-slidebox .title .tit-20{ font-size:16px; } .car-slide .car-slidebox .title{ right: auto; left:2%; } } @media (max-width: 1480px){ .car-slide .car-slidebox{ padding-left: 220px; } .car-slide .car-slidebox .input4{ width:200px; } } @media (max-width: 1270px){ .car-slide{ display:none; } } .bocweb-footer .top .fxbox .bds_jd { background: url(../images/img5-6.png) no-repeat center; } .index-banner-warp .i-banner .swiper-pagination { width: 100%; bottom: 75px; } .index-banner-warp .i-banner .swiper-pagination span { width: 3px; height: 3px; margin: 0 7px; position: relative; } .index-banner-warp .i-banner .swiper-pagination span:before { content: ""; position: absolute; width: 5px; height: 5px; background: #fff; border-radius: 50%; left: 50%; top: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .index-banner-warp .i-banner .swiper-pagination span:after { content: ""; position: absolute; width: 0px; height: 0px; background: #fff; border-radius: 50%; left: 50%; top: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .index-banner-warp .i-banner .swiper-pagination span.swiper-pagination-bullet-active:before { width: 9px; height: 9px; background: #c12025; } .index-banner-warp .i-banner .swiper-pagination span.swiper-pagination-bullet-active:after { width: 15px; height: 15px; } .index-banner-warp .i-banner .swiper-button-next, .index-banner-warp .i-banner .swiper-button-prev { width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 24px; color: #fff; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); opacity: 1; -webkit-transition: all .5s ease; transition: all .5s ease; opacity: 1; cursor: pointer; overflow: hidden; background: transparent; border-radius: 40px; background: rgba(0, 0, 0, 0.3); } .index-banner-warp .i-banner .swiper-button-next:before, .index-banner-warp .i-banner .swiper-button-prev:before { z-index: 4; position: relative; text-align: center; display: block; } .index-banner-warp .i-banner .swiper-button-prev { left: 2.5rem; } .index-banner-warp .i-banner .swiper-button-next.swiper-button-disabled, .index-banner-warp .i-banner .swiper-button-prev.swiper-button-disabled { opacity: 1; cursor: pointer; pointer-events: visible; } .index-banner-warp .i-banner .swiper-button-next { right: 2.5rem; } .index-banner-warp .i-banner .swiper-button-next:before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .index-banner-warp .i-banner .swiper-button-prev:hover:before { -webkit-animation: toRightFromRight 0.5s forwards; animation: toRightFromRight 0.5s forwards; } .index-banner-warp .i-banner .swiper-button-next:hover:before { -webkit-animation: toRightFromLeft 0.5s forwards; animation: toRightFromLeft 0.5s forwards; } .index-banner-warp .i-banner .swiper-button-prev:hover { background: rgba(0, 0, 0, 0.6); /*-webkit-animation: pulse 0.5s ease-out forwards; animation: pulse 0.5s ease-out forwards;*/ } .index-banner-warp .i-banner .swiper-button-next:hover { background: rgba(0, 0, 0, 0.6); /*-webkit-animation: pulse 0.5s ease-out forwards; animation: pulse 0.5s ease-out forwards;*/ } @-webkit-keyframes toRightFromRight { 79% { -webkit-transform: translate(-102%); transform: translate(-102%); } 80% { -webkit-transform: translate(102%); transform: translate(102%); } 81% { opacity: 1; } } @keyframes toRightFromRight { 79% { -webkit-transform: translate(-102%); transform: translate(-102%); } 80% { -webkit-transform: translate(102%); transform: translate(102%); } 81% { opacity: 1; } } @-webkit-keyframes toRightFromLeft { 0%,100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 79% { -webkit-transform: rotate(180deg) translate(-102%); transform: rotate(180deg) translate(-102%); } 80% { -webkit-transform: rotate(180deg) translate(110%); transform: rotate(180deg) translate(110%); } 81% { opacity: 1; } } @keyframes toRightFromLeft { 0%,100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 79% { -webkit-transform: rotate(180deg) translate(-102%); transform: rotate(180deg) translate(-102%); } 80% { -webkit-transform: rotate(180deg) translate(110%); transform: rotate(180deg) translate(110%); } 81% { opacity: 1; } } /*# sourceMappingURL=style.css.map */