/* CSS Document */ header { background-color: rgba(255, 255, 255, 0.1); } header:hover { background-color: #FFFFFF; } .header-div { height: 0; } header.sticky { background-color: #FFFFFF; } section { padding: 30px 0; overflow: hidden; align-items: center; display: -webkit-flex; } .navbar-default .navbar-nav>li>a { color: #ffffff; } .header-right li.search a { color: #FFFFFF; } .navbar-logo img:nth-child(1) { display: none; } .navbar-logo img:nth-child(2) { display: block; } header:hover .navbar-logo img:nth-child(1), header.sticky .navbar-logo img:nth-child(1) { display: block; } header:hover .navbar-logo img:nth-child(2), header.sticky .navbar-logo img:nth-child(2) { display: none; } header:hover .navbar-default .navbar-nav>li>a, header.sticky .navbar-default .navbar-nav>li>a, header:hover .header-right li.search a, header.sticky .header-right li.search a { color: #232323; } header:hover .header-right li.search a:hover, header.sticky .header-right li.search a:hover { color: #c6142c; } .banner { width: 100%; height: auto; } .banner .swiper-slide { text-align: center; font-size: 18px; background: #fff; height: 100%; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .banner .swiper-slide a { display: block; height: 100%; background: #000; } .banner .swiper-pagination-bullets { background-color: rgba(0, 0, 0, 0.5); z-index: 100; text-align: center; bottom: 0px; padding: 10px 0; width: 100%; } .banner .swiper-pagination-bullets .swiper-pagination-bullet { width: 30px; height: 6px; margin: 0 10px; background-color: #ffffff; cursor: pointer; border-radius: 3px; } .index-car .index-carli { display: none; width: 100%; } .index-car .active { display: block; } .car-bg { background: url(../winimages/car-bg.jpg) no-repeat bottom; background-size: cover; } .car-series-til { font-size: 40px; margin-top: 0; text-align: center; font-weight: bold; margin-bottom: 30px; } .car-series-stil { font-size: 14px; text-transform: uppercase; text-align: center; margin-bottom: 100px; font-family: Arial, Helvetica, sans-serif; } .car-series-stil span { position: relative; } .car-series-stil span::after { content: ""; display: block; height: 1px; position: absolute; left: 30px; right: 30px; bottom: -10px; background-color: #afafaf; } .carList { width: 70%; margin: auto; display: flex; border-bottom: 1px solid #afafaf; } .carList .child { display: inline-block; flex: 1; text-align: center; } .carList .child span { cursor: pointer; font-size: 18px; font-weight: 650; display: inline-block; color: #323232; } .carList .child span::after { display: block; content: " "; height: 4px; width: 100%; margin-top: 15px; } .carList .child.active span { color: #114c80 } .carList .child.active span::after { background-color: #114c80; } .car-container { margin-top: 80px; } .car-li-item { padding-top: 20px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .car-li-item .car-name { font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; margin: 20px auto; } .car-li-item .car-img img { height: 140px; } .car-li-item .car-href { position: relative; display: inline-block; padding: 5px 15px; font-weight: initial; border: 2px solid #114c80; border-radius: 40px; color: #323232; } .car-li-item .car-href span { position: relative; z-index: 5; } .car-li-item a::after, .car-li-item a .car-href, .car-li-item .car-img, .car-li-item .car-name { -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .car-li-item a { padding-bottom: 30px; position: relative; display: block; } .car-li-item a::after { display: block; height: 4px; content: " "; position: absolute; left: 0; bottom: 0px; width: 0; } .car-li-item a.cur::after { /*width: 100%; background-color: #c6142c;*/ } .car-li-item a:hover .car-name { color: #000; } .car-li-item a:hover .car-href, .car-li-item a.cur .car-href { background-color: #114c80; color: #FFFFFF; } .car-li-item a:hover .car-img { transform: translateY(-15px); } .banner .swiper-button-prev, .banner .swiper-button-next { background-color: rgba(0, 0, 0, 0.05); display: block; width: 80px; height: 120px; } .banner .swiper-button-prev { background-image: url(/tl_assets/winimages/z.png); background-position: center; left: 5%; } .banner .swiper-button-next { background-image: url(/tl_assets/winimages/y.png); background-position: center; right: 5%; } .banner .swiper-button-next.swiper-button-disabled, .banner .swiper-button-prev.swiper-button-disabled { opacity: 0; } .index-car .swiper-button-prev { background-image: url(/tl_assets/winimages/z.png); } .index-car .swiper-button-next { background-image: url(/tl_assets/winimages/y.png); } .index-car .swiper-button-next.swiper-button-disabled, .index-car .swiper-button-prev.swiper-button-disabled { opacity: 0; } .carbox { width: 100%; height: 680px; background: url(/tl_assets/winimages/img4.jpg) no-repeat left center; position: relative; background-size: 100% 100%; } .carbox .car-left { overflow: hidden; float: left; color: #FFFFFF; width: 45%; padding-top: 120px; } .carbox .car-left .tit { font-size: 40px; line-height: 1.6; font-weight: 800; margin-bottom: 10px; } .carbox .car-left .stit { font-size: 24px; font-weight: 100; } .carbox .car-right { float: right; padding-top: 50px; width: 55%; } .carbox .libox, .carbox .icon-top-item { 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; } .carbox .icon-top-item { margin-top: 60px; margin-bottom: 10px; overflow: hidden; } .carbox .libox { margin-left: -5.8%; margin-bottom: 80px; } .carbox .icon-top-item div { font-size: 20px; font-weight: 100; line-height: 24px; letter-spacing: 1px; } .carbox .icon-top-item h5 { font-family: Arial, Helvetica, sans-serif; font-size: 30px; font-weight: 600; margin-top: 24px; margin-bottom: 0; } .carbox .line { width: 25px; height: 2px; background: #fff; margin-bottom: 25px; } .carbox .libox .icon-item { text-align: center; width: 31%; padding: 0 2%; border-right: 1px solid rgba(168, 168, 168, 0.16); } .carbox .libox .icon-item h5 { font-size: 30px; font-family: Arial, Helvetica, sans-serif; white-space: nowrap; font-weight: 600; } .carbox .libox .icon-item div { margin-top: 10px; white-space: nowrap; font-weight: 100; font-size: 16px; letter-spacing: 1px; } .carbox .libox .icon-item:nth-child(2n) { width: 38%; } .carbox .libox .icon-item:nth-child(3) { /* text-align: left; */ border-right: 0; padding-right: 0; } .botbox { display: block; } .botbox a { width: 160px; height: 45px; line-height: 45px; text-align: center; box-shadow: inset 0px 0px 0px 3px #9a9a9a; display: inline-block; color: #fff; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .botbox a:hover { box-shadow: inset 0px 0px 0px 3px #c6142c; background-color: #c6142c; color: #FFFFFF; } .botbox a:first-child { margin-right: 20px; } .carbox .line, .carbox .tit, .carbox .stit, .carbox .libox, .carbox .icon-top-item, .carbox .botbox { opacity: 0; -webkit-transform: translate(0, 10px); -ms-transform: translate(0, 10px); transform: translate(0, 10px); -webkit-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; } .car-right { text-align: right; } .car-right img, .car-right .til { opacity: 0; -webkit-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; -webkit-transform: translate(100px, 0px); -ms-transform: translate(100px, 0px); transform: translate(100px, 0px); } .car-right img { width: 80%; position: relative; top: -140px; } .car-right .til { height: 200px; font-size: 150px; font-weight: bold; font-style: italic; color: #FFFFFF; text-shadow: 0px 2px 0px rgb(204, 204, 204), 0px 3px 0px rgb(201, 201, 201), 0px 4px 0px rgb(187, 187, 187), 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.25), 0px 20px 20px rgba(0, 0, 0, 0.15); } .carbox.cur .line, .carbox.cur .tit, .carbox.cur .stit, .carbox.cur .libox, .carbox.cur .icon-top-item, .carbox.cur .botbox { opacity: 1; transform: translate(0, 0px); } .carbox.cur .line { transition-delay: .2s; } .carbox.cur .tit { transition-delay: .35s; } .carbox.cur .stit { transition-delay: .5s; } .carbox.cur .icon-top-item { transition-delay: .65s; } .carbox.cur .libox { transition-delay: .65s; } .carbox.cur .botbox { transition-delay: .8s; } .carbox.cur .car-right img, .carbox.cur .car-right .til { opacity: 1; transform: translate(0, 0px); } .carbox.cur .car-right .til { transition-delay: .4s; } .carbox.cur .car-right img { transition-delay: .8s; } .main-spage { margin: auto 10%; } .news { position: relative; } .news .news-til { position: absolute; background-color: #114c80; font-size: 20px; color: #ffffff; height: 40px; padding: 0 20px; line-height: 40px; margin: 0; top: 8px; } .news .news-til::after { display: block; content: ""; background-color: #114c80; position: absolute; top: 6px; right: -14px; width: 28px; height: 28px; transform: rotate(45deg); } .main-news { position: absolute; left: 160px; top: 8px; right: 0; } .news-container { overflow: hidden; height: 40px; } .news-container ul li { list-style: none; } .news-container ul li a { position: relative; font-size: 15px; display: block; height: 40px; line-height: 40px; overflow: hidden; } .news-container ul li b { position: absolute; font-weight: normal; top: 0px; right: 0; } .news-container ul li a span { position: absolute; right: 200px; left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main-indexpage { width: 100%; } .listc { margin-right: 0; margin-left: 0; } .listc li { padding-bottom: 80px; list-style: none; } .listc li a { display: block; margin-right: -15px; margin-left: -15px; } .listc li p.img { overflow: hidden; position: relative; display: block; } .listc li p.img img { width: 100%; } .listc li h4 { font-weight: bold; margin-top: 15px; font-size: 18px; } .listc li .txt { margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .listc li .href { color: royalblue; } .listc li h4, .listc li p.txt, .listc li .href { padding: 0 15px; } .listc-bg { background-color: #f1f1f1; } .listc li:nth-child(2) { position: relative; } .listc li:nth-child(2)::after, .listc li:nth-child(2)::before, .listc li:nth-child(3)::before { z-index: 2; display: block; content: ' '; width: 1px; background-color: #cccccc; top: 0; bottom: 0; position: absolute; } .listc li:nth-child(2)::after { left: 0; } .listc li:nth-child(2)::before, .listc li:nth-child(3)::before { right: 0; } .listb { margin-right: -40px; margin-left: -40px; } .listb li { list-style: none; padding-right: 40px; padding-left: 40px; } .listb li h2 { font-weight: bold; margin-bottom: 40px; font-size: 20px; } .listb li h2 span { font-weight: normal; color: #999999; font-size: 18px; } .listb li .company { line-height: 2em; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .listb li .company-p { margin-top: 10px; text-align: right; } .listb li .company-p a { color: #c6142c } .listb li .company-p a::before { font-size: 12px; margin-right: 10px; border: 1px solid #c6142c; width: 20px; display: inline-block; text-align: center; line-height: 16px; height: 20px; border-radius: 50%; } .listb li .contact p { margin-bottom: 25px; font-size: 16px; } .listb li .contact p::before { position: relative; top: 2px; color: #323232; margin-right: 10px; } .video { position: relative; } .video .img i { padding: 10px; z-index: 1; position: absolute; border: 4px solid #ffffff; border-radius: 50%; left: 50%; margin-left: -34px; top: 50%; margin-top: -50px; color: #ffffff; font-size: 40px; } .video .img i::before { position: relative; left: 3px; } /* .video p { padding: 10px; position: absolute; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); color: #ffffff; text-align: center; width: 100%; } */ .video-box video .img { position: relative; } .video-box video { width: 100%; position: absolute; left: 0; top: 0; bottom: 0; height: 100%; background: #000 } .video-box a { position: fixed; z-index: 100; right: 10%; top: 10%; border: 4px solid rgba(255, 255, 255, 0.5); text-align: center; line-height: 42px; font-size: 40px; display: inline-block; width: 50px; height: 50px; color: #FFFFFF; border-radius: 50%; } @media (max-width: 1000px) { .banner .swiper-button-prev, .banner .swiper-button-next { width: 20px; background-color: rgba(0, 0, 0, 0.2); height: 40px; background-size: 18px } .navbar-default .navbar-toggle .icon-bar { background-color: #FFFFFF; } header:hover .navbar-default .navbar-toggle .icon-bar, header.sticky .navbar-default .navbar-toggle .icon-bar { background-color: #232323; } .listc { margin: 0; } .listc li:nth-child(2)::after, .listc li:nth-child(2)::before, .listc li:nth-child(3)::before { display: none; } .listc li p.img { height: 200px; } .listc li { padding-bottom: 40px; list-style: none; } .car-li-item .car-href { display: inline-block; } .carbox { display: none; } section { padding: 10px 0; } .car-bg { background-size: cover; } .car-li-item .car-img img { height: 150px; } .car-container { margin-top: 30px; } .car-series-til { font-size: 22px; margin-bottom: 25px; } .carList .child span { font-size: 20px; } .carList { width: 100%; } .car-li-item .car-name { font-size: 16px; } .news .news-til { font-size: 16px; height: 30px; padding: 0 10px; line-height: 30px; top: 0px; } .news .news-til::after { width: 22px; height: 22px; top: 4px; right: -12px; z-index: -1; } .main-news { left: 120px; font-size: 12px; top: -4px; right: 10px; } .news { height: 80px; } .news-container ul li a { overflow: hidden; } .news-container ul li a span { right: 0px; line-height: 40px; } .news-container ul li b { display: none; } .listc li { margin-bottom: 15px; } .listc li:last-child { margin-bottom: 0; } .listb li h2 { margin-bottom: 10px; } .listb li { margin-bottom: 20px; } .listb li:last-child { margin-bottom: 0; } .listb li .company-p { text-align: left; } .listb li .contact p { margin-bottom: 10px; font-size: 14px; } }