@charset "utf-8"; /* CSS Document */ body { margin: 0px; padding: 0px; position: relative; overflow-x: hidden; } body.menu-open { overflow-y: hidden!important; } body, html { font-family: Arial, "微软雅黑", Microsoft YaHei; } dd, dl, dt, ul, li { margin: 0; padding: 0; list-style: none; } input { margin: 0; outline: none } a { text-decoration: none; } a:link { color: inherit; }/*未访问样式*/ a:hover { text-decoration: none; } a:focus { text-decoration: none; } a:hover, a:focus, input:hover, input:focus, button:focus, button:hover { outline: none; } h1 { margin: 0px; } i { font-weight: normal; } hr { border: none; border-top: 1px solid #f0f0f0; margin: 10px 0px; } img { max-width: 100%; } pre { display: block; border: none; background: none; padding: 0px; white-space: pre-wrap; font-family: Arial, "微软雅黑", Microsoft YaHei; } .font { font-family: 'en', Arial, "微软雅黑", Microsoft YaHei; } .font-cn { font-family: 'en-cn', Arial, "微软雅黑", Microsoft YaHei; } @font-face { font-family: 'en'; src: local('☺'), url(../font/HelveticaNeueLTPro-Roman.otf); font-weight: 100; font-style: normal; } @font-face { font-family: 'en'; src: local('☺'), url(../font/HelveticaNeueLTPro-Bd.otf); font-weight: bold; font-style: normal; } @font-face { font-family: 'en-cn'; src: local('☺'), url(../font/HelveticaNeueLTPro-BdCn.otf); font-style: normal; font-weight: bold; } ::-webkit-scrollbar-track { background:#CCC; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background:#333; } /*滚动条设置*/ /*表格边框样式*/ table, tbody, tr, td { border: none; } table tr { border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } table td { font-size: 0.85rem; line-height: 1.5em; padding: 15px; border-left: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; } table td p { margin: 0px; } /*boostrap遮罩层导致页面抖动*/ .modal-open { overflow: scroll !important; } /*页面内容宽度*/ @media(min-width:1440px) { .container { max-width: 1400px; } } /*页面haed*/ /*头部*/ #head { display: flex; flex-wrap: wrap; padding-top: 0; padding-bottom: 0; background: #fff; box-shadow: 0 0 4vh rgba(0,0,0,0.1); } /*头部标志*/ #head .head-top { display: flex; align-items: center; justify-content: space-between; height: 120px; } .navbar-brand { height: 100%; display: flex; align-items: center; } .navbar-brand img { height: 30px; } .navbar-brand p { margin-left: -6px; margin-bottom: 0px; position: relative; display: inline-block; padding: 0 20px; font-size: 12px; line-height: 20px; letter-spacing: 2px; color: #fff; background: #221815; } .navbar-brand p:before { content: ""; display: block; position: absolute; z-index: 2; top: 0px; left: 0%; width: 0%; height: 0%; border-top: 20px solid #fff; border-right: 4px solid transparent; } .navbar-brand p:after { content: ""; display: block; position: absolute; z-index: 2; top: 0px; right: 0%; width: 0%; height: 0%; border-bottom: 20px solid #fff; border-left: 4px solid transparent; } .navbar-brand .slogan { padding-left: 25px; margin-left: 25px; border-left: 1px solid #1d2124; font-size: 18px; line-height: 1.5rem; font-weight: bold; color: #333; transform: skewX(-15deg); } .navbar-brand .slogan span { display: block; transform: skewX(7.5deg); } #shop { display: flex; } #shop>div { margin-left: 8px; } #shop>div>a { display: block; font-size: 0px; } #shop>div>a>span, #shop>div>a>svg { display: inline-block; width: 36px; height: 36px; line-height: 36px; font-size: 18px; text-align: center; color: #fff; border-radius: 50%; overflow: hidden; } #shop>div#weibo>a>span { background: #e6162d; } #shop>div#code>a>span { background: #009C2F; } #shop>div#language>a>svg { background: #fff; ; } #shop>div .dropdown-menu { border: none; padding: 0px; background: none; right: 50%; margin-right: -80px; } /*搜索*/ #search { position: relative; width: 36px; height: 36px; line-height: 36px; border-radius: 50%; transition: .3s; } #search input.search-input { position: absolute; right: 1px; top: 0; z-index: 4; display: block; width: 34px; height: 100%; line-height: inherit; border: none; border-radius: 21px; font-size: 14px; color: #fff; background: #666; transition: .3s } #search input.search-input::-webkit-input-placeholder { color: #fff; font-size: 14px; } #search .search-submit, #search .search-button { position: absolute; right: 0; top: 0; z-index: 5; display: block; width: 100%; height: 100%; line-height: inherit; text-align: center; color: #fff; background-image: url(../images/search.svg); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; background-color: #1d2124; border: none; cursor: pointer; border-radius: 50%; transition: .3s } #search .search-button:hover { background-color: #e60012; } #search .search-submit { display: none } #search.open .search-input { width: 200px; padding: 0 50px 0 21px; } #search.open .search-button { display: none } #search.open .search-submit { display: block; background-color: #1d2124; transition: .4s } #search.open .search-submit:hover { background-color: #e60012; } /*语言*/ #language { position: relative; } #language>a { position: relative; z-index: 3; } #language>div { position: absolute; z-index: 1; right: 0; top: 0; bottom: 0; max-width: 100%; border-radius: 18px; padding-left: 18px; padding-right: 18px; white-space: nowrap; background: #666; overflow: hidden; transition: .4s } #language.open>div { max-width: 160px; padding-right: 54px; overflow: hidden; } #language>div a { display: inline-block; color: #fff; font-size: 12px; line-height: 36px; white-space: nowrap; } /*头部导航*/ #head .navbar-collapse { background: #1d2124; width: 100%; } #head .navbar-nav { display: flex; flex-wrap: nowrap; } #head .navbar-nav li { position: relative; z-index: 1; width: 100%; font-size: 1rem; line-height: 56px; } #head .navbar-nav li a { position: relative; z-index: 2; display: block; width: 100%; padding: 0 15px; color: #fff; text-align: center; } #head .navbar-nav li a:hover { font-weight: bold; color: #e60012; } #head .navbar-nav li.on a { font-weight: bold; color: #e60012; } #head .navbar-nav li:after { content: ""; position: absolute; z-index: -1; top: 50%; right: 0%; margin-top: -0.5em; width: 1px; height: 1em; background-color: #fff; opacity: 0.8; } #head .navbar-nav li:first-child:before { content: ""; position: absolute; z-index: -1; top: 50%; left: 0%; margin-top: -0.5em; width: 1px; height: 1em; background-color: #fff; opacity: 0.8; } #head .navbar-nav li a:after { content: ""; position: absolute; z-index: -1; bottom: 0%; right: 0%; width: 100%; height: 0; background-color: #1d2124; } #head .navbar-nav li.on a:after { content: ""; width: 100%; height: 92%; background-color: #fff; } @media screen and ( max-width:1399.8px) { #head .navbar-nav li { line-height:52px; font-size: .9375rem; } } /*头部菜单按钮*/ .menu-button { display: none; position: fixed; z-index: 1081; top: 0; right: 0px; width: 90px; height: 90px; border: none; padding: 0; font-size: 0; background: #e60012; transition: all 0.3s ease-in-out; } .menu-open .menu-button { background: #f2f2f2; } .menu-button span { width: 24px; height: 2px; border-radius: 6px; background-color: #f7f7f7; display: block; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .menu-open .menu-button span { background-color: #333; } .menu-button:hover { cursor: pointer; } .menu-open .menu-button span:nth-child(2) { opacity: 0; } .menu-open .menu-button span:nth-child(1) { -webkit-transform: translateY(7px) rotate(45deg); -ms-transform: translateY(7px) rotate(45deg); -o-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); } .menu-open .menu-button span:nth-child(3) { -webkit-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); -o-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); } @media( min-width: 992px) { #head { padding: 0px; } } @media screen and ( max-width:1199.8px) { #head .head-top { height: 100px; } .navbar-brand p { display: none; } .navbar-brand .slogan { margin-left: 15px; padding-left: 18px; } .navbar-brand span { font-size: 16px; line-height: 1.25em; } } @media screen and ( max-width:991.8px) { #head { height: 70px; } #head .head-top { height: 70px; } .navbar-brand img { height: 28px; } .slogan, #shop { display: none; } .menu-button { display: block; width: 70px; height: 70px; } } @media screen and ( max-width: 768px) { #head { height: 56px; } #head .head-top { height: 56px; } .navbar-brand img { height: 24px; } .menu-button { width: 56px; height: 56px; } } /*菜单*/ #menu { position: fixed; z-index: 1080; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; background: url(../images/menu_bg.jpg) center no-repeat, #fff; background-size: cover; opacity: 0; visibility: hidden; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -ms-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; } .menu-open #menu { opacity: 1; visibility: visible; -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -ms-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear; } .menu-top { background: #fff; box-shadow: 0 0 25px rgba(0,0,0,0.05); } .menu-navbar-brand { height: 90px; display: flex; align-items: center; } .menu-navbar-brand img { height: 46px; } .menu-nav { padding-top: 4vh; counter-reset: compteListe; padding-left: 3rem; } .menu-nav li { -webkit-transform: translateY(6vh); -moz-transform: translateY(6vh); -ms-transform: translateY(6vh); transform: translateY(6vh); opacity: 0; -webkit-transition: all .6s; -moz-transition: all .6s; transition: all .6s; } .menu-open #menu .menu-nav li { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .menu-nav>li>a { position: relative; font-size: 1.5rem; line-height: 2em; color: #333; transition: all .4s } .menu-nav>li>a:hover, .menu-nav>li.on>a { color: #e60012; text-decoration: underline; } .menu-nav>li>a::before { counter-increment: compteListe 1; content: "0" counter(compteListe); position: absolute; z-index: 1; bottom: 2px; left: -2rem; font-size: 1rem; line-height: 1em; font-weight: bold; color: inherit; } #menu .menu-contact { display: flex; align-items: flex-end; font-size: 0.85rem; line-height: 1.25em; color: #666; } #menu .menu-contact div { display: flex; flex-wrap: wrap; justify-content: space-between; padding-left: 6%; border-left: 1px solid #ebebeb; font-size: 0.85rem; line-height: 1.5em; color: #666; } #menu .menu-contact .menu-title { width: 100%; margin-bottom: 2rem; font-size: 1.75em; line-height: 1em; } #menu .menu-contact div p { width: 48%; } #menu .menu-contact div p, #menu .menu-contact div .menu-title { -webkit-transform: translateY(6vh); -moz-transform: translateY(6vh); -ms-transform: translateY(6vh); transform: translateY(6vh); opacity: 0; -webkit-transition: all .6s; -moz-transition: all .6s; transition: all .6s } .menu-open #menu .menu-contact div p, .menu-open #menu .menu-contact div .menu-title { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } #menu .menu-contact a { color: #666; } #menu .menu-contact svg { display: inline-block; margin-right: 4px; width: 22px; height: 22px; vertical-align: bottom; } #menu .menu-contact a:hover { color: #e60012; } p.icon { position: relative; padding-left: 30px; } p.icon:before { position: absolute; z-index: 1; left: 0; top: 0; font-size: 1.25rem; width: 20px; height: 20px; line-height: 1em; text-align: center; color: #4d4d4d; } @media( min-width: 992px) { #menu { display: none; } } @media screen and ( max-width:991.8px) { #menu { display: block; align-items: flex-start; overflow-y: auto; } .menu-navbar-brand { height: 70px; } .menu-navbar-brand img { height: 28px; } #menu .menu-contact div { padding-left: 0; padding-top: 6vh; padding-bottom: 4vh; margin-top: 6vh; border-top: 1px solid #ebebeb; border-left: none; font-size: 0.85rem; } #menu .menu-contact div h3 { font-size: 1.5rem; } } @media screen and (max-width:767.8px) { .menu-navbar-brand { height: 56px; } .menu-navbar-brand img { height: 24px; } .menu-nav>li>a { font-size: 1.25rem; } #menu .menu-contact div h3 { font-size: 1.25rem; } #menu .menu-contact div p { width: 100%; font-size: 0.85rem; } #menu .menu-contact .menu-title { font-size: 1.25rem; } } /*首页通用*/ .section { background-position: center; background-size: cover; } #index-menu { position: fixed; left: 0; top: 40%; z-index: 2; padding: 10px 0px; background: #e60012; } #index-menu a { display: block; width: 100%; padding: 0 25px; font-size: 0.85rem; line-height: 2.5em; color: #fff; } #index-menu .active a { background: rgba(255,255,255,0.3) } @media screen and (max-width:991.8px) { #index-menu { display: none; } } /*banner按钮*/ .banner-box { position: relative; z-index: 1; height: 100%; } #banner { position: relative; overflow: hidden; } #banner .owl-stage-outer, #banner .owl-stage, #banner .owl-item, #banner .item { height: 100%; } #banner .item { background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; } #banner .item img { display: none; } @media(min-width:992px) { #banner { height: 500px; } .banner-wap { display: none!important; } #banner { margin: 0px; } #banner .item a { display: block; width: 100%; height: 100%; } } @media(min-width:1400px) { #banner { height: 635px; } } @media screen and (max-width:991.8px) { .banner-box { position: relative; z-index: 1; height: auto; } #banner { position: relative; overflow: hidden; height: 380px; margin: 0px; } .banner-wap { display: block!important; } } #banner .owl-nav { position: absolute; z-index: 2; bottom: 0px; right: 90px; background: #fff; margin: 0; padding: 20px; padding-left: 30px; line-height: 36px; } #banner .owl-nav #counter { display: inline-block; margin-right: 40px; font-weight: bold; font-size: 18px; color: #999; vertical-align: bottom; } #banner .owl-nav #counter span { color: #333; vertical-align: bottom; } #banner .owl-nav #interval { display: inline-block; height: 20px; width: 1px; margin: 8px; background: #ccc; vertical-align: bottom; } #banner .owl-nav [class*=owl-] { color: #FFF; font-size: 14px; margin: 0px; padding: 0px; display: inline-block; width: 36px; height: 36px; line-height: 36px; cursor: pointer; border-radius: 3px; outline: none; vertical-align: bottom; } #banner .owl-nav [class*=owl-]:hover { text-decoration: none } #banner .owl-nav .disabled { opacity: 0.3; cursor: default } #banner .owl-nav [class*=owl-] i { display: inline-block; font-size: 28px; height: inherit; line-height: inherit; color: #333; transition: all .4s; } #banner .owl-nav [class*=owl-]:hover i { color: #e60012; } #banner .owl-nav [class*=owl-] i { color: #333; } @media screen and (max-width:767.8px) { #banner { height: auto; } #banner .owl-nav { display: none; } #banner .item img { display: block; width: 100%; } } /*banner按钮*/ /*首页标题*/ .index-title { position: relative; z-index: 1; display: inline-block; width: 100%; margin-top: 18px; margin-bottom: 30px; } .index-title p { position: relative; display: inline-block; z-index: 1; margin-bottom: 12px; font-size: 30px; line-height: 1em; text-transform: Uppercase; color: #333; } .index-title span { display: block; color: #333; } .index-title.index-title-w p { color: #fff; } .index-title.index-title-w span { color: #ccc; } .index-title:before { content: "TAIHING"; position: absolute; z-index: -1; top: -1.35rem; font-family: "en-blo", Arial, "微软雅黑", Microsoft YaHei; font-size: 3.5rem; line-height: 1em; color: rgba(0,0,0,0.03); -webkit-text-stroke: 1px rgba(0,0,0,0.06); } .index-title.index-title-w:before { color: rgba(255,255,255,0.03); -webkit-text-stroke: 1px rgba(0,0,0,0.2); } .index-title.text-center:before { left: 50%; transform: translate(-50%, 0%); } .index-title.text-left:before { left: -0.2em; transform: translate(0%, 0%); } @media screen and (max-width: 991.8px) { .index-title p { font-size: 24px; } .index-title span { font-size: 14px; } } /*产品*/ .index-p { position: relative; } .index-p:after { content: ""; position: absolute; z-index: 1; top: 0px; left: 0%; width: 100%; height: 100%; background: url(../images/logo-name.svg) center bottom -8% no-repeat; background-size: 90%; opacity: 0.05; } .index-p>div { display: flex; flex-wrap: wrap; overflow: hidden; } .index-p-nav { z-index: 2; padding: 6vh 0 100px; width: 210px; color: #fff; background: #323232; } .index-p-title { position: relative; padding: 0 25px; background: #e60012; overflow: hidden; } .index-p-title p { margin: 0px; font-size: 24px; line-height: 80px; } .index-p-title span { position: absolute; left: 50%; top: 50%; font-size: 42px; line-height: 0.8em; font-weight: bold; opacity: 0.2; transform: translate(-50%, -50%); } .index-p-nav ul { padding: 25px 0; counter-reset: compteListe; border-bottom: 1px solid rgba(255,255,255,0.1); } .index-p-nav ul li { font-size: 0px; } .index-p-nav ul a { display: inline-block; width: 100%; padding: 0 25px; font-size: 16px; line-height: 42px; color: #fff; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; transition: all .4s; } .index-p-nav ul a:hover { color: #e60012; } .index-p-nav ul a:before { counter-increment: compteListe 1; content: "0" counter(compteListe); display: inline-block; margin-right: 6px; font-size: 12px; line-height: inherit; color: #999; vertical-align: bottom; transition: all .4s; } .index-p-nav ul a:hover:before { counter-increment: compteListe 1; content: "0" counter(compteListe); color: #e60012; } #index-p .owl-stage { display: flex; } #index-p .owl-item { padding: 15px 0; } #index-p .item { min-height: 100%; } #index-p .item a div.index-p-img { overflow: hidden; background: #fff; } #index-p .item a:hover div.index-p-img { box-shadow: 0 0 15px rgba(230,0,18,0.2); } #index-p .item a div.index-p-text { position: relative; padding: 5px 0; } #index-p .item a div.index-p-text p { display: block; width: 100%; margin: 25px 0 0px; font-size: 22px; line-height: 1em; color: #333; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; transition: all .4s; } #index-p .item:hover a div.index-p-text p { color: #e60012; } #index-p .item a div.index-p-text span { display: block; width: 100%; font-size: 14px; line-height: 2.5em; color: #999; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; transition: all .4s; } @media (min-width: 1200px) { .index-p-nav { padding: 3vh 0 80px; } #index-p { padding: 8vh 0px 8vh 8vh; z-index: 4; width: calc(100% - 210px); } #index-p .owl-stage-outer { margin-left: 20px; margin-right: 22px; } #index-p .owl-nav { position: absolute; z-index: 1; right: 100%; bottom: 15px; z-index: 3; width: 210px; padding: 0 25px; margin: 0px; color: #fff; text-align: left; } #index-p .owl-nav button { display: inline-block; width: 42px; height: 42px; line-height: 42px; text-align: center; color: #fff; background: rgba(255,255,255,0.2); border-radius: 50%; transition: all .4s; } #index-p .owl-nav button:hover { color: #e60012; background: rgba(255,255,255,1); } #index-p .owl-nav button i { font-size: 24px; color: inherit; } } @media (min-width: 1400px) { #index-p { padding: 8vh 0px 8vh 8vh; z-index: 4; width: calc(100% - 210px); } #index-p .owl-stage-outer { margin-left: -30px; margin-right: 32px; } #index-p .owl-nav { bottom: 25px; } } @media screen and (max-width: 1199.8px) { .index-p-nav { margin-top: 6vh; z-index: 2; padding: 0; width: 100%; color: #fff; background: #323232; } .index-p-title a { display: block; position: relative; font-family: "iconfont" !important; font-size: 20px; font-style: normal; -webkit-font-smoothing: antialiased; } .index-p-title a:before { content: "\e614"; position: absolute; right: 0; top: 50%; transform: translate(0%, -50%) rotate(0deg); transition: all .4s; } .index-p-title a.collapsed:before { content: "\e614"; transform: translate(0%, -50%) rotate(-45deg); } .index-p-title p { font-size: 20px; line-height: 50px; } .index-p-title span { position: absolute; left: 0px; top: 50%; font-size: 36px; transform: translate(0%, -50%); } .index-p-nav ul li { border-bottom: 1px solid rgba(255,255,255,0.05); } #index-p { padding: 4vh 0; z-index: 2; width: 100%; } #index-p .owl-nav { margin: 0px; color: #fff; } #index-p .owl-nav button { display: inline-block; width: 42px; height: 42px; line-height: 42px; text-align: center; color: #fff; background: #323232; border-radius: 50%; transition: all .4s; } #index-p .owl-nav button:hover { color: #fff; background: #e60012; } #index-p .owl-nav button i { font-size: 24px; color: inherit; } } @media screen and (max-width: 991.8px) { #index-p .owl-nav { position: static; left: auto; top: auto; bottom: auto; z-index: 1; width: 100%; padding: 0; margin: 20px 0px 0px; color: #fff; text-align: right; } #index-p .owl-nav #counter2 { position: static; left: auto; right: auto; bottom: auto; margin-top: 0; display: inline-block; float: left; font-size: 18px; line-height: 36px; color: #999; border-bottom: 1px solid rgba(255,255,255,0.1); } #index-p .owl-nav #counter2 span { font-size: 20px; color: #333; } #index-p .owl-nav button { display: inline-block; margin: 0 6px; width:42px; height: 42px; line-height: 42px; text-align: center; background: #232938; border-radius: 50%; transition: all .4s; } #index-p .owl-nav button:hover { background: #e60012; } #index-p .owl-nav button i { font-size: 18px; color: #fff; } } @media screen and (max-width:575.8px) { #index-p .item{ padding: 15px; } #index-p .owl-nav { padding: 0; margin: 0px; text-align: center; } } /*首页关于*/ .index-a { padding: 14vh 0; background: url(../images/running.png) bottom left -25% no-repeat; background-size: auto 100%; } .index-a>div { display: flex; justify-content: space-between; } .index-a-info { position: relative; width: 50%; padding: 0 6%; font-size: 15px; line-height: 1.75em; color: #666; } .index-a-info:before { content: ""; position: absolute; z-index: -1; top: 0px; left: 0%; width: 25px; height: 90px; background-color: #e60012; transition: all .4s; } .index-a-title { position: relative; margin-bottom: 20px; } .index-a-title p { font-size: 36px; line-height: 1em; color: #333; margin: auto; } .index-a-title small { font-size: 15px; color: #ccc; } .index-a-title span { display: block; margin-top: 25px; font-size: 24px; color: #333; } .index-a-info a { display: inline-block; padding: 0 20px; margin-top: 20px; font-size: 14px; line-height: 36px; color: #fff; background: #e60012; } .index-a-img { position: relative; z-index: 2; width: 48%; } .index-a-img img { width: 100%; } .index-a-nav { display: flex; flex-wrap: wrap; justify-content: space-between; } .index-a-nav a { position: relative; display: block; width: 24%; margin-top: 1%; background: #000; border-bottom: 8px solid #e60012; } .index-a-nav a img { opacity: 0.4; transition: all .4s; } .index-a-nav a:hover img { opacity: 1; } .index-a-nav a span { display: block; position: absolute; z-index: 1; bottom: 0px; left: 0px; right: 0px; padding: 0 20px; font-size: 13px; line-height: 36px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; transition: all .4s; } .index-a-nav a:hover span { color: #e60012; } @media screen and (max-width: 991.8px) { .index-a { padding: 10vh 0; } .index-a>div { display: flex; justify-content: space-between; flex-wrap: wrap; } .index-a-info { width: 100%; padding: 0px; } .index-a-info:before { content: ""; position: absolute; z-index: -1; top: 0px; left: -60px; width: 25px; height: 90px; background-color: #e60012; transition: all .4s; } .index-a-title p { font-size: 24px; } .index-a-title small { font-size: 15px; color: #ccc; } .index-a-title span { margin-top: 10px; font-size: 18px; } .index-a-img { width: 100%; margin: 40px auto 0; } .index-a-nav { padding: 0px 20px; margin-left: 0px; } } @media screen and (max-width: 575.8px) { .index-a-nav { margin-top: 20px; padding: 0px; margin-left: 0px; } .index-a-nav a { width: 49%; margin-bottom: 1%; } } /*首页选择*/ .index-way { background: #323232; } .index-way>div { display: flex; flex-wrap: wrap; } .index-way .index-way-title { position: relative; z-index: 1; display: block; width: 240px; } .index-way .index-way-title>div.index-way-bg { position: absolute; z-index: -1; display: flex; flex-wrap: wrap; align-items: flex-end; padding: 60px 20px; width: 100%; height: 110%; background-size: cover; } .index-way .index-way-title>div.index-way-bg div { width: 110px; } .index-way .index-way-title>div.index-way-bg p { font-size: 30px; line-height: 1.2em; text-transform: Uppercase; color: #fff; } .index-way .index-way-title>div.index-way-bg span { font-size: 24px; line-height: 1.2em; text-transform: Uppercase; color: #fff; } .index-way .index-way-list { width: calc(100% - 240px); } .index-way .index-way-list li { background: #fff; } .index-way .index-way-list li .index-way-img { background-size: cover; } .index-way .index-way-list li .index-way-info { padding: 70px 40px; text-align: center; } .index-way .index-way-list li .index-way-info span { display: inline-block; padding-bottom: 15px; margin-bottom: 30px; font-size: 30px; line-height: 1em; font-weight: bold; color: #333; border-bottom: 2px solid #e60012; } .index-way .index-way-list li .index-way-info p { font-size: 15px; line-height: 1.78em; color: #333; } @media screen and (min-width: 992px) { .index-way .index-way-title { display: block; width: 240px; } .index-way .index-way-list { width: calc(100% - 240px); display: grid; grid-template-columns: 1fr 1fr 1fr; } .index-way .index-way-list li { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "img" "info"; } .index-way .index-way-list li .index-way-img { grid-area: img; } .index-way .index-way-list li .index-way-info { text-align: center; grid-area: info; } .index-way .index-way-list li:nth-of-type(2) { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "info" "img"; } } @media screen and (max-width: 1199.8px) { .index-way>div { width: 100%; max-width: 100%; padding: 0px; } } @media screen and (max-width: 991.8px) { .index-way .index-way-title { display: block; width: 100%; padding: 0px; } .index-way .index-way-title>div.index-way-bg { position: static; padding: 30px; height: auto; } .index-way .index-way-title>div.index-way-bg div { width: auto; } .index-way .index-way-title>div.index-way-bg p { margin-bottom: 8px; font-size: 24px; } .index-way .index-way-title>div.index-way-bg span { font-size: 18px; } .index-way .index-way-list { width: 100%; } .index-way .index-way-list li { display: flex; flex-wrap: wrap; } .index-way .index-way-list li div { width: 50%; } .index-way .index-way-list li:nth-of-type(2) .index-way-img { order: 1; } } @media screen and (max-width: 575.8px) { .index-way .index-way-list li .index-way-info { padding:30px 20px 20px; } /* .index-way .index-way-list li div { width: 100%; } .index-way-img { padding-bottom: 61.8%; } .index-way .index-way-list li:nth-of-type(2) .index-way-img { order: 0; } .index-way .index-way-list li .index-way-info { padding: 30px 20px; }*/ } /*图片放大*/ .zoom-img { overflow: hidden; } .zoom-img img { width: 100%; transform: scale(1); transition: all ease 0.6s; } .zoom-img:hover img { transform: scale(1.1); } /*点状背景*/ .point-bg { background-image: url(../images/point.png); background-repeat: repeat; } /*首页新闻*/ .index-n { background: url(../images/index-spot.png) center repeat; } .index-n-box { padding: 7vh 0; text-align: center; overflow: hidden; } a.index-news-btn { position: relative; z-index:1; margin: 30px 0 0; display: inline-block; padding: 0 22px; font-size: 14px; line-height: 36px; color: #fff; background: #e60012; } #index-news { z-index: 3; } #index-news .owl-stage-outer { overflow: visible; } #index-news .owl-stage { display: flex; font-size: 0px; } #index-news .item { position: relative; z-index: 1; } #index-news .index-n-img p { margin: 20px 0; font-size: 15px; line-height: 1.25em; color: #666; text-align: center; } #index-news .index-n-info { position: absolute; z-index: 2; top: 150px; left: 0; right: 0; height: auto; padding: 35px; text-align: center; background: #f5f5f5; border-bottom: 6px solid #e60012; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -ms-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; transition: all .4s; } #index-news .item:hover .index-n-info { top: 90px; opacity: 1; visibility: visible; } #index-news .item .index-n-info a.index-n-title { display: block; font-size: 18px; line-height: 1.5em; color: #333; transition: all .4s; } #index-news .item .index-n-info a.index-n-title:hover { color: #e60012; } #index-news .index-n-info span { font-size: 13px; font-style: italic; color: #ccc; } #index-news .index-n-info pre { margin: 20px 0 25px; font-size: 14px; line-height: 24px; max-height: 72px; color: #666; display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } a.index-n-btn { display: inline-block; padding: 0 15px; font-size: 14px; line-height: 1em; color: #e60012; border-left: 1px solid #e60012; border-right: 1px solid #e60012; } #index-news .owl-nav { margin: 0; padding: 0px; padding-left: 30px; line-height: 36px; } #index-news .owl-nav [class*=owl-] { position: absolute; z-index: 2; top: 50%; color: #FFF; font-size: 14px; margin: 0px; padding: 0px; display: inline-block; width: 46px; height: 46px; line-height: 46px; cursor: pointer; border-radius: 50%; outline: none; vertical-align: bottom; background: #1d2124; transition: all .4s; } #index-news .owl-nav [class*=owl-].owl-prev { left: -66px; } #index-news .owl-nav [class*=owl-].owl-next { right: -66px; } #index-news .owl-nav [class*=owl-]:hover { background: #e60012; } #index-news .owl-nav .disabled { opacity: 0.3; cursor: default } #index-news .owl-nav [class*=owl-] i { display: inline-block; font-size: 1.25rem; height: inherit; line-height: inherit; color: #fff; } #index-news .owl-dots { margin-top: 18px; } @media screen and (max-width: 991.8px) { #index-news { overflow: hidden; } #index-news .index-n-img p { display: none; } #index-news .index-n-info { position: static; z-index: 2; top: auto; left: auto; right: auto; height: auto; padding: 35px 20px; text-align: center; background: #f5f5f5; border-bottom: 2px solid #e60012; opacity: 1; visibility: visible; } } /*页脚*/ #foot { position: relative; background: #1d2124; width: 100%; } #foot>.container { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 6vh 15px 5vh; } .foot-logo { width: 265px; } .foot-logo img { height: 30px; margin-bottom: 25px; } .foot-logo p { margin: 0 0 5px; ; font-size: 14px; line-height: 24px; color: #999; } p.icon:before { position: absolute; left: 0; top: 0; display: inline-block; color: #999; font-family: "iconfont" !important; font-size: 18px; line-height: 24px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .foot-nav { flex-grow: 1; } .foot-nav ul { padding: 0 12%; display: flex; justify-content: space-between; } #foot .foot-nav ul li { display: inline-block; } #foot .foot-nav ul li>a { display: block; font-size: 15px; line-height: 2em; font-weight: bold; color: #fff; transition: all .4s; } #foot .foot-nav ul li a:hover { color: #e60012; } #foot .foot-nav ul li a:hover { color: #e60012; } #foot .foot-nav ul li .collapse a { display: block; font-size: 14px; line-height: 1.75em; color: #999; } .foot-code { text-align: center; font-size: 14px; color: #666; } .foot-code img { display: inline-block; max-width: 140px; } .foot-code span { display: block; font-size: 14px; line-height: 2em; color: #fff; background: #e60012; } .foot-copyright { border-top: 1px solid rgba(255,255,255,0.1); } @media screen and (max-width: 1199.8px) { .foot-nav ul { padding: 0 8%; display: flex; justify-content: space-between; } .foot-code img { max-width: 120px; } } @media screen and (max-width: 991.8px) { #foot .container { display: flex; flex-wrap: wrap; } .foot-nav { display: none; padding-top: 0px!important; border-left: none; border-right: none; justify-content: flex-start!important; } } @media screen and (max-width: 575.8px) { .foot-code { display: none; } } .foot-copyright { padding: 15px 0; width: 100%; overflow: hidden; } .foot-copyright p, .foot-copyright span, .foot-copyright a { display: inline-block; margin: 0px; font-size: 13px; line-height: 20px; color: #999; transition: all ease .4s; } .foot-copyright a { margin: 0px 4px; } .foot-copyright a:hover { color: #e60012; } /*============ 首页end ============*/ /*内页公共*/ /*内页banner*/ .inside-banner-box { position: relative; overflow: hidden; } .inside-banner { display: flex; z-index: -2; left: 0; bottom: 0; justify-content: center; align-items: center; width: 100%; height: 320px; background-size: cover; background-position: center; overflow: hidden; } @media screen and (max-width:991.8px) { .inside-banner { height: 0; padding-bottom: 36%; } } @media screen and (max-width:767.8px) { .inside-banner { height: 0; padding-bottom: 55%; } } /*面包屑*/ .breadcrumb-box { position: absolute; left: 0; right: 0; bottom: 0; } .breadcrumb { margin: 0px auto; border: nonr; border-radius: 0; width: 100%; text-align: right; padding: 0 60px; font-size: 12px; color: #fff; line-height: 40px; background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.3)); background: -o-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,.3)); background: -moz-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,.3)); background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.3)); } .breadcrumb a { display: inline-block; font-size: 0.85rem; line-height: 1em; color: #fff; transition: all .4s; } .breadcrumb a:hover { color: #e60012; } .breadcrumb span { display: inline-block; margin: 0 5px; color: #fff; } /*盒子*/ .padding-box { padding-top: 9vh; padding-bottom: 9vh; } .padding-top { padding-top: 9vh; } .padding-bottom { padding-bottom: 9vh; } .main { position: relative; z-index: 2; background: #fff; } .gray-box { background: #f7f7f7; } .clear-box:after { content: ""; display: block; width: 100%; height: 0; } @media screen and (max-width:991.8px) { .padding-box { padding-top: 6vh; padding-bottom: 6vh; } .padding-top { padding-top: 6vh; } .padding-bottom { padding-bottom: 6vh; } } @media screen and (max-width:767.8px) { .padding-box { padding-top: 5vh; padding-bottom: 5vh; } .padding-top { padding-top: 5vh; } .padding-bottom { padding-bottom: 5vh; } } /*信息盒子*/ .info { font-size: 15px; color: #666; line-height: 1.75em; } /*横线*/ .line { display: inline-block; width: 30px; height: 3px; line-height: 3px; font-size: 0px; background: #e60012; } /*内页翻页*/ .page-box { padding-top: 30px; } .page { font-size: 0.85rem; line-height: 3em; color: #666; } .page span { display: inline-block; padding: 0 14px; margin: 0 4px; background: #f7f7f7; } .page span strong { font-size: 17px; color: #333; } .page a { display: inline-block; padding: 0 18px; font-size: 0.85rem; line-height: 3em; color: #666; background: #f7f7f7; transition: all .4s; } .page a:first-child { border-radius: 4px 0 0 4px; } .page a:last-child { border-radius: 4px 0 0 4px; } .page input { display: inline-block; width: 4rem; padding: 0px 10px; margin-left: 15px; font-size: 0.85rem; line-height: 3em; color: #666; border-radius: 4px 0 0 4px; border: none; box-shadow: 0 0 1px #999 inset; overflow: hidden; transition: all .4s; } .page button { padding: 0 18px; margin: 0px; border: none; border-radius: 0 4px 4px 0; font-size: 0.85rem; line-height: 3em; color: #666; background: #f7f7f7; cursor: pointer; transition: all .4s; } .page a:hover, .page button:hover { color: #333; background: #ccc; } @media(max-width:767.8px) { .page { font-size: 0.75rem; line-height: 2.5em; } .page a { padding: 0 14px; font-size: 0.75rem; line-height: 2.5em; } .page input { margin-left: 5px; font-size: 0.75rem; line-height: 2.5em; } .page button { padding: 0 14px; font-size: 0.75rem; line-height: 2.5em; } } /*内页导航*/ .inside-nav { background: #fff; border-bottom: 1px solid #ebebeb; } @media(min-width:992px) { #subnav { margin: 0; } #subnav .panel-default { background: none; border: none; box-shadow: none; } #subnav .panel-heading { display: none; } #subnav .panel-body { border: none; background: none; padding: 0px; padding-left: -4px; padding-right: -4px; } #subnav .panel-body li { display: inline-block; } #subnav .panel-body li a { display: inline-block; width: 100%; padding: 15px 30px; font-size: 14px; line-height: 26px; color: #666; transition: all .3s; } #subnav .panel-body li.on a { color: #fff; background: #e60012; } #subnav .panel-body li a:hover, #subnav .panel-body li a:focus { color: #e60012; } } @media(max-width:991.8px) { .inside-nav .container { padding: 0px; } #subnav { margin: 0px; } #subnav .panel-default { background: none; border: none; box-shadow: none; } #subnav .panel-heading { padding: 0px; border: none; background: none; color: #fff; } #subnav .panel-heading a { display: block; width: 100%; padding: 15px; font-size: 14px; line-height: 20px; color: #fff; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; background: #e60012; overflow: hidden; } #subnav .panel-heading a.collapsed { background: #fff; color: #333; } #subnav .panel-heading a b { float: right; display: inline-block; margin-top: 8px; } #subnav .panel-body { padding: 5px 0px; margin-bottom: 15px; border: none; background: rgba(255,255,255,0.1); } #subnav .panel-body li a { position: relative; display: inline-block; width: 100%; padding: 0px 15px; font-size: 14px; line-height: 42px; color: #999; border-bottom: 1px solid rgba(0,0,0,0.05); white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; transition: all .3s; } #subnav .panel-body li:last-child a { border-bottom: none; } #subnav .panel-body li.on a { padding-left: 32px; color: #e60012; } #subnav .panel-body li a:before { content: ""; position: absolute; z-index: 1; top: 50%; left: 15px; width: 7px; height: 7px; margin-top: -3px; background-color: #e60012; border-radius: 50%; opacity: 0; transition: all .4s; } #subnav .panel-body li.on a:before { content: ""; opacity: 1; } } @media(max-width:767.8px) { .inside-nav .container { padding: 0px; width: 100%; } } /*关于*/ .about-info { max-width: 1000px; margin: auto; font-size: 15px; line-height: 2em; } @media(max-width:991.8px) { .about-info { width: 90%; font-size: 14px; line-height: 1.75em; } } @media(max-width:767.8px) { .about-info { width: 100%; font-size: 14px; line-height: 1.75em; } } /*荣誉资质*/ .honor-list { padding: 15px; } .honor-list a { display: block; min-height: 100%; padding: 25px; background: #f7f7f7; transition: all .4s; } .honor-list a:hover { box-shadow: 0 0 15px rgba(0,0,0,0.1); transform: translate(0%, -20px); background: #e60012; } .honor-list div { border: 2px solid #ebebeb; overflow: hidden; transition: all .4s; } .honor-list a:hover div { border: 2px solid #e60012; } .honor-list p { margin: 10px 0 0; font-size: 14px; line-height: 20px; color: #666; text-align: center; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; transition: all .4s; } .honor-list a:hover p { color: #fff; } @media(max-width:767.8px) { .honor-list { padding: 10px; } } /*企业风采*/ .style-list { padding: 10px; } .style-list a { display: block; min-height: 100%; background: #fff; transition: all .4s; } .style-list a:hover { box-shadow: 0 0 15px rgba(0,0,0,0.1); transform: translate(0%, -20px); background: #e60012; } .style-list div { border: 2px solid #ebebeb; overflow: hidden; transition: all .4s; } .style-list a:hover div { border: 2px solid #e60012; } .style-list p { margin: 10px 0; font-size: 14px; line-height: 20px; color: #666; text-align: center; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; transition: all .4s; } .style-list a:hover p { color: #fff; } /*加入我们*/ .join-box { background: url(../images/img-join-bg.jpg) center bottom no-repeat; } .join-box strong { font-size: 18px; } .join-box h4 { display: inline-block; padding: 0 35px; margin-bottom: 5vh; border: 2px solid #e60012; color: #e60012; font-size: 24px; line-height: 2em; } #join { margin: auto; } #join .panel { position: relative; margin: 10px 0px; border: none; box-shadow: none; background: #f7f7f7; transition: all ease .4s; } #join .panel .panel-heading { width: 100%; margin: auto; padding: 0px; border: none; background: none; } #join .panel .panel-heading a { position: relative; z-index: 1; display: block; width: 100%; font-size: 0px; line-height: 0px; padding: 20px 80px 20px 25px; } #join .panel .panel-heading a h4 { display: inline-block; width: 100%; margin: 0px; font-size: 18px; line-height: 1.5em; text-transform: Uppercase; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; transition: all .4s; } #join .panel .panel-heading a.accordion-toggle h4 { color: #e60012; } #join .panel .panel-heading a.accordion-toggle.collapsed h4 { color: #666; font-weight: normal; background: none; } #join .panel .panel-heading a.accordion-toggle .join-close { width: 18px; height: 18px; position: absolute; z-index: 2; top: 50%; margin-top: -9px; right: 25px; cursor: pointer; -webkit-transition: 300ms; -o-transition: 300ms; transition: 300ms; } #join .panel .panel-heading a.accordion-toggle .join-close:before, #join .panel .panel-heading a.accordion-toggle .join-close:after { content: ""; position: absolute; background: #e60012; } #join .panel .panel-heading a.accordion-toggle .join-close:before { width: 2px; height: 100%; left: 50%; margin-left: -1px; top: 0; } #join .panel .panel-heading a.accordion-toggle .join-close:after { width: 100%; height: 2px; top: 50%; margin-top: -1px; left: 0; } #join .panel .panel-heading a.accordion-toggle .join-close { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #join .panel .panel-heading a.accordion-toggle.collapsed .join-close { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } #join .panel .panel-heading a.accordion-toggle.collapsed .join-close:before, #join .panel .panel-heading a.accordion-toggle.collapsed .join-close:after { background: #5b5b5b; } #join p { font-size: 15px; line-height: 1.75em; color: #4d4d4d; } #join .panel-collapse { padding: 0px 30px 30px; width: 100%; margin: auto; transition: all .3s; } #join .panel-body { padding: 30px 0px 0px; border: none; border-top: 1px dashed #ebebeb; } #join .panel-body hr { margin: 25px 0px; border-color: #ccc; } /*产品*/ .p-list { padding: 15px; text-align: center; margin-bottom: 30px; } .p-list a .p-list-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 1px solid #ebebeb; overflow: hidden; transition: all .4s; } .p-list a:hover .p-list-img { box-shadow: 0 0 30px rgba(0,0,0,0.1); } .p-list a .p-list-img img { max-width: 80%; } .p-list a .p-list-name { position: relative; display: inline-block; z-index: 2; padding: 0 25px; margin-top: -1.5em; max-width: 100%; min-width: 60%; font-size: 0.85rem; line-height: 3.6em; color: #333; text-align: center; background: #f7f7f7; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; transition: all .4s; } .p-list a:hover .p-list-name { color: #fff; background: #e60012; } /*产品详情*/ .product { display: flex; flex-wrap: wrap; } .product-img { display: flex; justify-content: center; align-items: center; background: #f7f7f7; } #product .item { display: flex; justify-content: center; align-items: center; background: #fff; } #product .item img{ max-height: 50vh; width: auto; max-width: auto; } #product .owl-nav { background: #fff; margin: 0; padding: 0px; } #product .owl-nav [class*=owl-] { position: absolute; z-index: 2; bottom: 50%; color: #FFF; font-size: 24px; margin: 0px; padding: 0px; display: inline-block; width: 60px; height: 60px; line-height: 60px; cursor: pointer; border-radius: 0px; outline: none; vertical-align: bottom; background: #f7f7f7; } #product .owl-nav [class*=owl-].owl-prev { left: 0; } #product .owl-nav [class*=owl-].owl-next { right: 0; } #product .owl-nav [class*=owl-]:hover { text-decoration: none; background: #e60012; } #product .owl-nav .disabled { opacity: 0.3; cursor: default } #product .owl-nav [class*=owl-] i { display: inline-block; font-size: 28px; height: inherit; line-height: inherit; color: #333; transition: all .4s; } #product .owl-nav [class*=owl-]:hover i { color: #fff; } #product .owl-nav [class*=owl-] i { color: #333; } #product .owl-dots { margin-top: 10px; text-align: center; } #product .owl-dots .owl-dot { width: auto; height: auto; margin: 0 4px; border: 1px solid #ebebeb; } #product .owl-dots .owl-dot.active { border: 1px solid #e60012; } #product .owl-dots .owl-dot img { max-width: 72px; box-shadow: 0 0 15px rgba(0,0,0,0.1); } .product{ border-bottom: 3px solid #f7f7f7; } .product-info h1 { margin: 0; font-size: 1.75rem; line-height: 1.25em; font-weight: bold; color: #e60012; } .product-info h2 { margin: 15px 0 25px; font-size: 1rem; line-height: 1.25em; color: #666; } .product-info pre { margin-bottom: 25px; font-size: 0.85rem; line-height: 2em; color: #666; max-height: 30vh; overflow-y: auto; } .product-info pre::-webkit-scrollbar-track { background:#fafafa; } .product-info pre::-webkit-scrollbar { width: 3px; } .product-info pre::-webkit-scrollbar-thumb { background:#333; } .product-info hr { margin: 25px 0; } .product-info a { display: inline-block; font-size: 0.85rem; line-height: 3.5em; color: #333; padding: 0 2rem; background: #f7f7f7; transition: all .4s; } .product-info a:hover { color: #fff; background: #e60012; } .product-info a span { display: inline-block; margin-right: 8px; font-size: 1.25rem; color: inherit; vertical-align: middle; } .product-info em { display: inline-block; font-size: 1.5rem; line-height: 1em; } @media(min-width:992px) { .product { height: calc(100vh - 180px); } .product-img { width: 50%; position: relative; } #product { position: static; width: 70%; max-width: 600px; } .product-info { width: 50%; max-width: 700px; padding: 8vh 6%; } } @media screen and (max-width:991.8px) { .product-img { width: 100%; } #product { position: relative; width: 100%; padding: 6%; } #product .item { text-align: center; } #product img { display: inline-block; width: 100%; max-width: 500px; } #product .owl-nav [class*=owl-] { background: #fff; } .product-info { width: 720px; padding: 10vh 15px 5vh; margin: auto; } .product-info h1{ font-size: 24px; } .product-info h2{ font-size: 16px; } #product .owl-dots .owl-dot { position: static; width: 13px; height: 13px; margin: 0 4px; border-radius: 50%; border: 1px solid #ebebeb; background: #ebebeb; } #product .owl-dots .owl-dot.active { border: 1px solid #e60012; background: #e60012; } #product .owl-dots .owl-dot span { display: none; } #product .owl-dots .owl-dot img { display: none; } .product-text-table { padding-right: 10px; height: 60vh; overflow: auto; } } /*产品详情*/ .product-details>div { display: flex; flex-wrap: wrap; } .product-d { width: 100%; } .product-d>div { width: 100%; padding: 6vh 0; border-bottom: 1px solid #ebebeb; overflow: hidden; } .product-d>div:after { content: ""; display: block; clear: both } .p-d-title { margin-bottom: 20px; font-size: 17px; font-weight: bold; text-transform: Uppercase; color: #e60012; } .product-details table { width: auto; } @media(min-width:992px) { .product-img { width: 50%; position: relative; } #product { position: relative; max-width: 600px; } .product-info { display: flex; align-items: center; width: 50%; max-width: 700px; padding: 8vh 6% 4vh; } .product-info pre{ min-height: 16em; } .product-subnav { width: 230px; padding-right: 40px; padding-top: 6vh; } .product-subnav ul { position: sticky; z-index: 3; left: 0px; } .product-subnav ul li { margin-bottom: 5px; } .product-subnav ul li a { display: inline-block; padding: 0 15px; width: 100%; font-size: 15px; line-height: 36px; color: #666; background: #f7f7f7; } .product-subnav ul li.active a { color: #fff; font-weight: bold; background: #e60012; } .product-d { width: calc(100% - 230px); padding-left: 60px; border-left: 1px solid #ebebeb; } } @media(min-width:1200px) { .product-subnav ul { position: sticky; z-index: 3; left: 0px; } } @media screen and (max-width:991.8px) { #product .owl-nav #counter { position: static; bottom: auto; left: auto; margin-top: 15px; text-align: center; } .product-subnav { position: fixed; z-index: 3; left: 0px; right: 0; bottom: 0px; width: 100%; background: #fff; } .product-subnav ul { display: flex; flex-wrap: wrap; border-top: 1px solid #ebebeb; box-shadow: 0 10px 10px rgba(29,32,136,0.05) } .product-subnav li { display: block; width: 25%; font-size: 0px; } .product-subnav li:last-child a { border-right: none; } .product-subnav li a { display: inline-block; width: 100%; padding: 0 10px; margin-bottom: -1px; font-size: 15px; line-height: 46px; color: #666; text-align: center; white-space: nowrap; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; overflow: hidden; } .product-subnav li.active a { color: #fff; background: #e60012; } } @media screen and (max-width:767.8px) { .product-subnav li a{ font-size: 13px; } } @media screen and (max-width:575.8px) { .product-info a.product-btn { display: inline-block; width: 100%; } } /*产品问答*/ #faqList { margin: auto; } #faqList .panel { position: relative; border: none; box-shadow: none; background: #fff; border-bottom: 1px dashed #ebebeb; transition: all ease .4s; } #faqList .panel .panel-heading { width: 100%; margin: auto; padding: 0px; border: none; background: none; } #faqList .panel .panel-heading a { position: relative; z-index: 1; display: block; width: 100%; padding: 0px 80px 0px px; } #faqList .panel .panel-heading a { font-size: 15px; line-height: 48px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; transition: all .4s; } #faqList .panel .panel-heading a.accordion-toggle { color: #e60012; } #faqList .panel .panel-heading a.accordion-toggle.collapsed { color: #333; background: none; } #faqList .panel .panel-heading a.accordion-toggle .faq-list-close { width: 14px; height: 14px; position: absolute; z-index: 2; top: 50%; margin-top: -7px; right: 25px; cursor: pointer; -webkit-transition: 300ms; -o-transition: 300ms; transition: 300ms; } #faqList .panel .panel-heading a.accordion-toggle .faq-list-close:before, #faqList .panel .panel-heading a.accordion-toggle .faq-list-close:after { content: ""; position: absolute; background: #e60012; } #faqList .panel .panel-heading a.accordion-toggle .faq-list-close:before { width: 1px; height: 100%; left: 50%; margin-left: -1px; top: 0; } #faqList .panel .panel-heading a.accordion-toggle .faq-list-close:after { width: 100%; height: 1px; top: 50%; margin-top: -1px; left: 0; } #faqList .panel .panel-heading a.accordion-toggle .faq-list-close { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #faqList .panel .panel-heading a.accordion-toggle.collapsed .faq-list-close { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } #faqList .panel .panel-heading a.accordion-toggle.collapsed .faq-list-close:before, #faqList .panel .panel-heading a.accordion-toggle.collapsed .faq-list-close:after { background: #5b5b5b; } #faqList p { font-size: 14px; line-height: 1.75em; color: #4d4d4d; } #faqList .panel-collapse { padding: 0px 30px 30px; width: 100%; margin: auto; background: #f7f7f7; border-top: 1px dashed #ebebeb; transition: all .4s; } #faqList .panel-body { padding: 30px 0px 0px; border: none; } /*产品详情提交*/ #p-feedback>div { padding: 4.5%; } #p-feedback form { width: 100% } #p-feedback p { margin: 5px 0 0; font-size: 15px; color: #666; } #p-feedback label { position: relative; padding-left: 30px; margin: 0; } #p-feedback label:hover { cursor: pointer; color: #e60012; } #p-feedback input { display: inline-block; width: 100%; padding: 0 15px; margin: 10px 0; font-size: 15px; line-height: 36px; color: #666; border: none; } #p-feedback input[disabled] { background: #ebebeb; cursor: not-allowed; } #p-feedback label+input { border: 1px solid #ebebeb; width: 18px; height: 18px; } #p-feedback [type=radio] { position: relative; -webkit-appearance: none; appearance: none; all: initial; } #p-feedback input[type=radio]:checked+label { font-weight: bold; color: #e60012; } #p-feedback input[type=radio]:checked::before { content: ''; position: absolute; z-index: 2; bottom: 10px; left: 21px; display: block; width: 16px; height: 8px; margin: auto; border-left: 2px solid #e60012; border-bottom: 2px solid #e60012; transform: rotate(-45deg); } #p-feedback input[type=radio]:after { content: ''; position: absolute; bottom: 2px; left: 15px; display: block; width: 18px; height: 18px; border: 1px solid #ebebeb; background: #fff; } #p-feedback select { display: inline-block; width: 100%; padding: 0 15px; margin: 10px 0; font-size: 15px; line-height: 36px; height: 36px; color: #666; border: none; } #p-feedback textarea { border: none; font-size: 15px; line-height: 22px; width: 100%; height: 160px; padding: 15px; margin: 10px 0px; outline: none; box-shadow: none; overflow-x: hidden; background: #fff; } #p-feedback input::-webkit-input-placeholder, #p-feedback textarea::-webkit-input-placeholder { color:#ccc; } #p-feedback a.submit { display: inline-block; margin: 20px 0 10px; padding: 0 20px; font-size: 15px; line-height: 32px; color: #fff; background: #25263b; transition: all .4s; } #p-feedback a.submit:hover { background: #e60012; } @media(max-width:991.8px) { #p-feedback>div { padding:10% 4.5% 4.5%; } } /*合作伙伴*/ .partner-info { padding: 0 3%; } .partner-info p { font-size: 14px; margin: auto; } .logo-list { display: flex; flex-wrap: wrap; padding: 5% 0 0; } .logo-list ul { display: flex; flex-wrap: wrap; width: 100%; height: auto; } .logo-list ul li { width: 20%; margin-top: -1px; margin-left: -1px; border: 1px solid #ebebeb; transition: all .4s; } .logo-list ul li:hover { position: relative; border: 1px solid #e60012; box-shadow: 0 0 15px rgba(255,204,18,0.4); } .logo-list ul li a { position: relative; z-index: 1; display: block; width: 100%; height: 0%; padding-bottom: 60%; } .logo-list ul li a>div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 10px; display: flex; align-items: center; justify-content: center; } .logo-list ul li a div img { max-width: 100%; max-height: 100%; } .logo-list .logo-text { position: absolute; top: 100%; bottom: 0; left: 0; right: 0; flex-wrap: wrap; text-align: center; color: #fff; opacity: 0; background: rgba(255,204,18,0.95); overflow: hidden; transition: all .4s; } .logo-list a:hover .logo-text { top: 0; opacity: 1; } .logo-list .logo-text p, .logo-list .logo-text span { display: block; font-size: 14px; transform: translate(0%, 20px); opacity: 0; transition-delay: 0s; transition: all .4s; } .logo-list a:hover .logo-text p, .logo-list a:hover .logo-text span { transform: translate(0%, 0px); opacity: 1; } .logo-list .logo-text p { width: 100%; margin: 0px; font-size: 20px; } .logo-list a:hover .logo-text p { transition-delay: 0.55s; } .logo-list a:hover .logo-text span { transition-delay: 0.62s; } @media(max-width:991.8px) { .logo-list { padding: 30px 0 40px; } .logo-list .inside-title { width: 100%; } .logo-list ul { width: 100%; } .logo-list .logo-text p, .logo-list .logo-text span { font-size: 13px; color: #ebebeb; } .logo-list .logo-text p { font-size: 16px; color: #fff; } } @media(max-width:768px) { .logo-list ul li { width: 33.33%; } } /*解决方案*/ /*新闻列表*/ #news-list { max-width: 1200px; } .news-list { margin-left: -1.5%; margin-right: -1.5%; margin-bottom: 30px; display: flex; flex-wrap: wrap; } .news-list li { position: relative; display: flex; flex-wrap: wrap; width: 30.33%; margin: 1.5%; box-shadow: 0 0 0px rgba(0,0,0,0); border-bottom: 2px solid #ebebeb; background: #f7f7f7; transition: all ease .4s; } .news-list li:hover { box-shadow: 0 0 20px rgba(0,0,0,0.1); border-bottom: 2px solid #e60012; } .news-list li>a { width: 100%; overflow: hidden; } .news-list li .news-c { width: 100%; padding-top: 20px; } .news-list li .news-title { display: inline-block; max-width: 100%; margin: 12px 0; font-size: 16px; line-height: 20px; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; color: #333; transition: all .4s; } .news-list li:hover .news-title { color: #e60012; } .news-list li .news-title:hover { text-decoration: underline; } .news-list li pre { width: 100%; font-size: 14px; line-height: 24px; color: #666; max-height: 72px; display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .news-list li span { display: block; margin-top: 20px; font-size: 12px; line-height: 24px; color: #999; } @media(min-width:992px) { .news-list li { padding: 25px; } .news-list li:hover { padding: 25px; } .news-list li:after { content: "\e604"; position: absolute; z-index: 1; bottom: 20px; right: 80px; font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 24px; line-height: 30px; color: #333; opacity: 0; transition: all .4s; } .news-list li:hover:after { right: 40px; opacity: 1; color: #e60012; transition-delay: 0.2s; } } @media(max-width:992px) { .news-list li { width: 47%; padding: 25px; } .news-list li:hover { box-shadow: none; } } @media(max-width:768px) { .news-list li { width: 100%; padding: 20px; } .news-list li>a { width: 100%; } .news-list li .news-c { width: 100%; padding-top: 20px; padding-left: 0px; } } /*文章详情*/ .news { min-height: calc(100vh - 140px); background: #f7f7f7; } .news-box { padding: 0 15px; margin: auto; max-width: 1200px; } .news-head { margin-bottom: 15px; } .news-head h3 { margin: 0 0 5px; font-size: 1.5rem; color: #333; } .news-head span { font-size: 0.85rem; color: #999; } .news-info { padding: 3vh 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .news-page { margin-top: 3vh; display: flex; flex-wrap: wrap; } .news-page a { display: block; width: 50%; padding: 2rem 5rem; transition: all .4s; } .news-page a:hover { background: #f0f0f0; } .news-page em { display: inline-block; width: 3.5rem; height: 1em; line-height: 1em; font-size: 1.75rem; color: #333; } .news-page h4 { display: block; width: 100%; margin: 10px 0 15px; font-size: 1rem; color: #333; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; } .news-page a:hover h4, .news-page a:hover em { color: #e60012; } .news-page a.nomore:hover h4, .news-page a.nomore:hover em { color: #333; } .news-page span { display: block; width: 100%; font-size: 0.85rem; line-height: 1em; height: 2em; color: #999; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; } @media(min-width:992px) { .news-page a:first-child { border-right: 1px solid #e0e0e0; text-align: right; } } /*应用领域*/ .app-list { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .app-list li { width: 50%; min-height: 310px; padding: 15px; } .app-list li a { position: relative; z-index: 1; display: block; padding: 40px; height: 100%; background: #f7f7f7; transition: all .4s; } .app-list li a:hover { box-shadow: 0 0 20px rgba(230,0,18,0.3); } .app-list-text { position: relative; z-index: 3; width: 85%; } .app-list li a .app-list-text h4 { position: relative; margin-bottom: 40px; font-size: 17px; font-weight: bold; line-height: 1.5em; text-transform: Uppercase; color: #1d2124; transition: all .4s; } .app-list li a .app-list-text h4:after { content: ""; position: absolute; z-index: 1; bottom: -15px; left: 0%; width: 20px; height: 3px; background-color: #e60012; } .app-list li a .app-list-text p { font-size: 15px; line-height: 24px; color: #666; max-height: 96px; display: block; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .app-list li a:hover .app-list-text h4 { color: #e60012; } .app-list li a .app-list-text span { display: inline-block; margin-top: 10px; font-size: 24px; line-height: 24px; color: #ccc; transition: all .4s; } .app-list li a:hover .app-list-text span { margin-left: 15px; color: #e60012; } @media(max-width:767.8px) { .app-list li { width: 100%; min-height: 310px; padding: 15px; } } /*联系方式*/ .contact-box { background-image: url(../images/contact-footer.png); background-size: 55%; background-position: bottom -50vw left -8vw; background-repeat: no-repeat; } .contact-box>div { max-width: 1200px; padding-left: 15px; padding-right: 15px; margin: auto; } @media(max-width:767.8px) { .contact-box { background-image: url(../images/contact-footer.png); background-size: 90%; background-position: bottom -65vw left -8vw; background-repeat: no-repeat; } } .contact { display: flex; } .contact>div { font-size: 0.85rem; line-height: 1.5em; } .contact>div h3 { font-size: 1.5rem; font-weight: bold; color: #e60012; text-transform: uppercase; } .contact>div p { margin-bottom: 15px; font-size: 15px; line-height: 1.75em; } .contact .contact-info { width: 42%; margin-right: 8%; padding: 40px 0 0; } .contact .contact-info p:before{ color: #e60012; font-size: 20px; } .contact .contact-feedback { width: 50%; padding: 40px 0 0; } .feedback input { outline: none; margin-bottom: 18px; width: 100%; padding: 0px 15px; font-size: 0.85rem; line-height: 46px; color: #666; border: 1px solid #ebebeb; background: #fcfcfc; transition: all .4s; } .form-control { border: 1px solid #ebebeb; line-height: 44px; height: 44px; width: 100%; padding: 0px 15px; margin: 10px 0px; border-radius: none; box-shadow: 0; } .feedback textarea { border: 1px solid #ebebeb; font-size: 0.85rem; line-height: 22px; width: 100%; height: 160px; padding: 15px; margin: 10px 0px; outline: none; box-shadow: none; overflow-x: hidden; background: #fff; } .feedback input:focus, .feedback textarea:focus { border: 1px solid #e60012; } .feedback .submit { display: inline-block; padding: 0px 25px; background: #4d4d4d; font-size: 14px; line-height: 36px; color: #fff; margin: 15px 0px; transition: all .3s; } .feedback .submit:hover { background: #e60012; } @media screen and (max-width:767.8px) { .contact { display: flex; flex-wrap: wrap; } .contact .contact-info { padding: 5vh 0 8vh; width: 100%; } .contact .contact-feedback { width: 100%; padding: 5vh 0 0; } }