@charset "utf-8"; /* CSS Document */ body { margin: 0px; padding: 0px; position: relative; overflow-x: hidden; } body.menu-open { overflow-y: hidden!important; } @media(min-width:992px) { body { padding-top: 180px; } } @media(max-width:991.8px) { body { padding-top: 70px; } } @media(max-width:767.8px) { body { padding-top: 54px; } } body, html { font-family: Arial, "微软雅黑", Microsoft YaHei; } .title-en{ font-family: 'en',Arial, "微软雅黑", Microsoft YaHei; } .title-en-md{ font-family: 'en-md',Arial, "微软雅黑", Microsoft YaHei; } .title-en-bl{ font-family: 'en-bdo',Arial, "微软雅黑", Microsoft YaHei; } @font-face { font-family: 'en'; src: local('☺'), url(../font/HelveticaNeueLTPro-BdCn.otf); font-weight: normal; font-style: normal; } @font-face { font-family: 'en-md'; src: local('☺'), url(../font/HelveticaNeueLTPro-MdCn.otf); font-weight: normal; font-style: normal; } @font-face { font-family: 'en-blo'; src: local('☺'), url(../font/HelveticaNeueLTPro-BlkCnO.otf); font-weight: normal; font-style: normal; } 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; } .yellow { color: #ffcc12; } ::-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: 1230px; } } /*页面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: 50px; } .navbar-brand .slogan { padding-left: 25px; margin-left: 25px; border-left: 2px solid #232939; font-size: 18px; line-height: 1.5rem; color: #666; } #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; background: #232939; border-radius: 50%; overflow: hidden; } #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: #232939; border: none; cursor: pointer; border-radius: 50%; transition: .3s } #search .search-button:hover { background-color: #ffcc12; } #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: #232939; transition: .4s } #search.open .search-submit:hover { background-color: #ffcc12; } /*语言*/ #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: #ffcc12;width: 100%;} #head .navbar-nav { display: flex; flex-wrap: nowrap; } #head .navbar-nav li { position: relative; z-index: 1; width: 100%; font-size: .9375rem; line-height: 60px; } #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 { color: #232939; } #head .navbar-nav li.on a { font-weight: bold; color: #fff; } #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: #232939; } #head .navbar-nav li.on a:after { content: ""; width: 100%; height:100%; background-color: #232939; } /*头部菜单按钮*/ .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: #ffcc12; 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:991.8px) { #head { height: 70px; } #head .head-top{ height: 70px; } .navbar-brand img { height: 40px; } .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: 32px; } .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: #ffcc12; 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: #ffcc12; } 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:40px; } #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:32px; } .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: #ffcc12; } #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; max-width: 100%; max-height:50vh; } @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: 620px; } } @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: #ffcc12; } #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{ padding-left: 180px; } #index-p{ padding-left: 180px; } #index-p .owl-stage{ display: flex; } #index-p .owl-item{ padding: 15px 0; } #index-p .item{ min-height: 100%; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.05); } #index-p .item a div{ overflow: hidden; } #index-p .item a div.index-p-text{ position: relative; padding: 5px 25px; background: #232938; transition:all .4s; } #index-p .item:hover a div.index-p-text{ background: #ffcc12; } #index-p .item a div.index-p-text p{ display: block; width: 100%; padding-right:36px; padding-left: 0px; margin: 0px; font-size: 15px; line-height: 36px; font-weight: bold; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.3); 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{ padding-right: 0px; padding-left: 36px; } #index-p .item a div.index-p-text span{ display: block; width: 100%; font-size: 13px; line-height: 36px; color: #ccc; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; transition:all .4s; } #index-p .item:hover a div.index-p-text span{ color: #fff; } #index-p .item a div.index-p-text em.icon1{ position: absolute; z-index: 1; right: 20px; top: 5px; font-size:24px; color: #fff; -webkit-transition: opacity .3s cubic-bezier(.28, 0, .49, 1), -webkit-transform .8s cubic-bezier(.42, 0, .002, 1); transition: opacity .3s cubic-bezier(.28, 0, .49, 1), -webkit-transform .8s cubic-bezier(.42, 0, .002, 1); transition: transform .8s cubic-bezier(.42, 0, .002, 1), opacity .3s cubic-bezier(.28, 0, .49, 1); transition: transform .8s cubic-bezier(.42, 0, .002, 1), opacity .3s cubic-bezier(.28, 0, .49, 1), -webkit-transform .8s cubic-bezier(.42, 0, .002, 1); -webkit-transition-delay: .08s; transition-delay: .08s } #index-p .item a:hover div.index-p-text em.icon1,#index-p .item a:hover div.index-p-text em.icon2{ opacity: 0; -webkit-transform: translateX(24px); transform: translateX(24px) } #index-p .item a div.index-p-text em.icon2{ position: absolute; z-index: 1; left: 0; top: 5px; font-size:24px; color: #fff; opacity: 0; -webkit-transition: opacity .4s cubic-bezier(.28, 0, .49, 1), -webkit-transform .6s cubic-bezier(.24, .002, .002, 1); transition: opacity .4s cubic-bezier(.28, 0, .49, 1), -webkit-transform .6s cubic-bezier(.24, .002, .002, 1); transition: transform .6s cubic-bezier(.24, .002, .002, 1), opacity .4s cubic-bezier(.28, 0, .49, 1); transition: transform .6s cubic-bezier(.24, .002, .002, 1), opacity .4s cubic-bezier(.28, 0, .49, 1), -webkit-transform .6s cubic-bezier(.24, .002, .002, 1) } #index-p .item a:hover div.index-p-text em.icon2{ opacity: 1; -webkit-transition-delay: .32s; transition-delay: .32s } #index-p .owl-nav{ position: absolute; left: 0; top:0; bottom: 0px; z-index: -1; width: 180px; padding:60px 35px 35px; margin: 0px; color: #fff; } #index-p .owl-nav:before{ content:""; position: absolute; z-index: -1; top: -20px; bottom: -20px; left: 0; width: 160%; background: #232938; } #index-p .owl-nav button{ display: inline-block; width: 48px; height: 48px; line-height: 48px; text-align: center; background: #fff; border-radius: 50%; transition:all .4s; } #index-p .owl-nav button:hover{ background: #ffcc12; } #index-p .owl-nav button i{ font-size: 24px; color: #232938; transition:all .4s; } #index-p .owl-nav #counter2{ position: absolute; left: 45px; right: 45px; bottom: 15px; margin-top: 50px; font-size: 18px; color: #999; border-bottom: 1px solid rgba(255,255,255,0.1); } #index-p .owl-nav #counter2 span{ font-size: 36px; color: #ffcc12; } @media screen and (max-width: 991.8px) { #index-p{ padding-left: 15px; padding-right: 15px; } #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:before{ content:""; display: none; } #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: 36px; height: 36px; line-height: 36px; text-align: center; background: #232938; border-radius: 50%; transition:all .4s; } #index-p .owl-nav button:hover{ background: #ffcc12; } #index-p .owl-nav button i{ font-size: 18px; color: #fff; } #index-p .owl-nav button:hover i{ color: #232938; } } /*首页制造应用*/ .index-app{ z-index: 1; background:url(../images/img-m.jpg) center no-repeat; background-size: cover; } #index-app{ position: relative; } #index-app:before{ content:""; position: absolute; z-index:-1;top: 9px;left: 0%;width: 100%;height: 1px;background-color:rgba(255,255,255,0.1);} #index-app .owl-item{ position: relative; padding-top: 40px; } #index-app .owl-item:before{ content:""; position: absolute; z-index:-1;top: 0px;left: 50%;margin-left: -9px; width:18px;height: 18px;border-radius: 50%; background: #fff;opacity: 0.3; transition:all .4s; } #index-app .owl-item:before{ content:""; background: #ffcc12;} #index-app .owl-item:after{ content:""; position: absolute; z-index:-1;top:4px;left: 50%;margin-left: -5px; width:10px;height: 10px;border-radius: 50%; border:2px solid #fff;transition:all .4s; } #index-app .owl-item:hover:after{ content:""; border:2px solid #ffcc12; background: #ffcc12; transition:all .4s; } #index-app .item{ position: relative; z-index: 2; text-align: center; background: #fff; overflow: hidden; transition:all .4s; } #index-app .item:hover{ background: #ffcc12; } #index-app .index-app-info{ width: 60%; margin: 35px auto 60px; border-top: 2px solid #999; transition:all .4s; } #index-app .item:hover .index-app-info{ border-top: 2px solid #232938; } #index-app .index-app-title{ font-size: 18px; font-weight: bold; line-height: 1em; color: #232938; margin: 15px 0 2px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; transition:all .4s; } #index-app .index-app-info small{ font-size: 14px; line-height: 1em; color:#666; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; transition:all .4s; } #index-app .item:hover hr{ border-top: 1px solid #ebebeb; transition:all .4s; } #index-app .item:hover hr{ border-top: 1px solid #232938; } #index-app .index-app-info span{ margin-top: 20px; display: block; font-size: 14px; line-height: 1em; height: 2em; color:#333; display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; transition:all .4s; } #index-app .index-app-info em{ margin: 25px auto; display: inline-block; font-size: 40px; line-height: 1em; color:#232938; transition:all .4s; } #index-app .details{ position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; } #index-app .details small{ display: inline-block; margin-bottom: 10px; font-size: 12px; color: #ccc; transition:all .4s; } #index-app .item:hover .details small{ color: #666; } #index-app .details a{ display: block; font-size: 14px; line-height: 2.4em; color: #999; background: #f2f2f2; transition:all .4s; } #index-app .item:hover .details a{ color: #fff; background: #232938; } #index-app .item:hover .details a:hover{ color: #ffcc12; } @media screen and (max-width: 991.8px) { .index-app{ background:url(../images/img-m-m.jpg) center no-repeat; background-size: cover; } } @media screen and (max-width: 467.8px) { #index-app .item{ margin: auto; max-width: 240px; } } /*首页关于*/ .index-a .row{ justify-content: space-between; } .index-a .row>div{ padding: 0 15px; } .index-a-info { align-self: baseline; width: 48%; } .index-a-info .info{ margin-top: -8px; } .index-a-img { position: relative; z-index: 2; width: 48%; } .index-a-img:after { content: ""; position: absolute; z-index: -1; bottom: 20px; left: -5px; width: 30%; height: 45%; background-color: #ffcc12; transition: all .4s; } .index-a-img img { width: 100%; } .index-a-nav{ display: flex; width: 100%; margin-top: 6vh; margin-left: 15px; margin-right: 15px; border-left: 4px solid #ffcc12; border-right: 4px solid #ffcc12; } .index-a-nav li{ position: relative; width: 100%; } .index-a-nav li:before{ content:""; position: absolute; z-index:-1;top: 0px;left: 0%;width: 1px;height: 100%;background-color:#ebebeb;} .index-a-nav li:first-child:before{ content:""; display: none;} .index-a-nav li:after{ content:""; position: absolute; z-index:1;top: 0px;left: 0%;width: 0%;height: 100%;background-color:#ffcc12;transition:all .4s;} .index-a-nav li:hover:after{ content:""; width: 100%;} .index-a-nav li a{ position: relative; z-index: 2; display: flex; padding: 3vh 0; justify-content: center; align-items: center; width: 100%; } .index-a-nav li a .number{ padding-right: 30px; border-right: 1px solid #ebebeb; font-size: 36px; color: #999; line-height: 1em; transition:all .4s; } .index-a-nav li:hover a .number{ color: #232939; border-right: 1px solid #232939; } .index-a-nav li a em{ display: inline-block; margin: 0 30px; width: 36px; height: 36px; line-height: 36px; font-size: 24px; text-align: center; color: #999; border: 1px solid #f2f2f2; transition:all .4s; } .index-a-nav li:hover a em{ color: #232939; border: 1px solid #666; /*background: #fff;*/ } .index-a-nav li a div{ font-size: 0px; } .index-a-nav li a p{ margin: 0px 0px 5px; font-size: 18px; line-height: 1em; color: #232939; font-weight: bold; white-space:nowrap; } .index-a-nav li a span{ margin: 0px; font-size: 12px; line-height: 1em; color: #999; white-space:nowrap; text-transform:Uppercase; } @media screen and (max-width: 991.8px) { .index-a-img{ width: 100%; } .index-a-info{ margin-top: 5vh; width: 100%; } .index-a-nav li a .number{ display: none; } .index-a-nav li a em{ margin-left: 0px; } } @media screen and (max-width: 768px) { .index-a-nav{ display: none; } } /*图片放大*/ .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-n-bg.jpg) center no-repeat; background-size: cover; } #index-news .owl-item{ } #index-news .item { background: #fff; transition: all ease 0.4s; } #index-news .item:hover { box-shadow: 0 0 25px rgba(0,0,0,0.2); } #index-news .index-n-img{ position: relative; display: block; margin-bottom: 25px; overflow: hidden; } #index-news .index-n-img .tag{ position: absolute; left: 20px; bottom: 0px; z-index: 1; display: block; padding: 0 15px; font-size: 12px; line-height: 2.4em; color: #333; background: #ffcc12; } #index-news .indext-n-info{ padding:0 20px; border-bottom: 4px solid #ffcc12; } #index-news .item .index-n-title { display: block; margin-bottom: 18px; font-size: 18px; line-height: 1em; color: #333; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; transition: all .4s; } #index-news .item .index-n-title:hover { color: #ffcc12; } #index-news .item span { display: inline-block; margin-bottom: 10px; font-size: 14px; color: #999; } #index-news .item pre { margin-bottom:30px; font-size: 14px; line-height: 1.75em; height: 3rem; color: #333; display: block; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; } #index-news .item .details { position: relative; display: block; font-size: 12px; line-height: 42px; color: #999; border-top: 1px solid #ebebeb; transition: all .4s; } #index-news .item .details:hover { padding-left: 10px; color: #333; } #index-news .item .details em{ position:absolute; right: 0px; top: 0px; z-index: 1; font-size: 18px; line-height: 42px; color: #999; transition: all .4s; } #index-news .item .details:hover em{ color: #333; } #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: #232939; 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: #ffcc12; } #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-n { background: url(../images/index-n-mbg.jpg) center no-repeat; background-size: cover; } #index-news {overflow: hidden;} } /*首页联系*/ .index-contact{ padding: 6vh 0; background: url(../images/index-c-bg.jpg) center no-repeat; background-size:cover; } .index-contact .container{word-wrap:break-word;overflow:hidden;} .index-contact p{ margin: 15px 0 30px; font-size: 30px; line-height: 1em; color: #333; } .index-contact span{ display: inline-block; font-size: 15px; line-height: 24px; color: #333; } .index-link{ padding: 30px 0 25px; border-top: 5px solid #ebebeb; } .index-link .links-title{ display: inline-block; float: left; margin-top: -5px; margin-right: 20px; font-size: 24px; line-height: 30px; letter-spacing:1px; color: #333; text-transform:Uppercase; } .index-link .links-title span{ font-size: 30px; color: #ffcc12; } .index-link a{ display: inline-block; margin-right: 18px; font-size: 14px; line-height: 30px; color: #666; transition: all .4s; } .index-link a:hover{ color: #ffcc12; } /*页脚*/ #foot { position: relative; background: #fff; border-top: 1px solid #ebebeb; width: 100%; } #foot .container{ display: flex; } #foot .container>div{ display: flex; align-items: center; justify-content: center; padding-top: 20px; padding-bottom: 20px; } .foot-logo{ padding-right: 40px; } .foot-logo img{ max-width: 215px; } .foot-nav{flex-grow:1; border-left: 1px solid #ebebeb; border-right: 1px solid #ebebeb;} .foot-nav ul{ text-align: center; } #foot .foot-nav ul li{ display: inline-block; } #foot .foot-nav ul li a{ display: inline-block; padding: 0 15px; font-size: 14px; line-height: 1em; color: #666; border-left: 1px solid #ebebeb; transition: all .4s; } #foot .foot-nav ul li a:hover{ color: #ffcc12; } #foot .foot-nav ul li:first-child a{ border-left:none; } .foot-code{ padding-left: 40px; text-align: center; font-size: 14px; color: #666; } .foot-code img{ display: inline-block; max-width: 120px; } .foot-copyright{ border-top:1px solid #ebebeb; } @media screen and (max-width: 991.8px) { #foot .container{ display: flex; flex-wrap: wrap; } .foot-nav{ padding-top: 0px!important; border-left: none; border-right: none; justify-content: flex-start!important; } .foot-code{ display: none!important; } } @media screen and (max-width: 768px) { #foot { padding: 0 15px; } } .foot-copyright { padding: 15px 0; width: 100%; overflow: hidden; } .foot-copyright p, .foot-copyright span, .foot-copyright a { float: left; 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: #ffcc12; } @media screen and (max-width:991.8px) { .foot-copyright .pull-right { float: none; } } /*============ 首页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: 300px; 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: #ffcc12; } .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: 14px; color: #666; line-height: 1.75em; } .info p { margin: 0 0 15px; } @media screen and (max-width:1200px) { .info p { margin: 0 0 10px; } } /*横线*/ .line { display: inline-block; width: 30px; height: 3px; line-height: 3px; font-size: 0px; background: #ffcc12; } /*内页翻页*/ .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: #ffcc12; } #subnav .panel-body li a:hover,#subnav .panel-body li a:focus { color: #ffcc12; } } @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: #ffcc12; 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: #ffcc12; } #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: #ffcc12; 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: 900px; 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%; background: #fff; transition: all .4s; } .honor-list a:hover{ box-shadow:0 0 15px rgba(0,0,0,0.1); transform:translate(0%,-20px); background: #ffcc12; } .honor-list div{ border: 2px solid #ebebeb; overflow: hidden; transition: all .4s; } .honor-list a:hover div{ border: 2px solid #ffcc12; } .honor-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; } .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: #ffcc12; } .style-list div{ border: 2px solid #ebebeb; overflow: hidden; transition: all .4s; } .style-list a:hover div{ border: 2px solid #ffcc12; } .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 #ffcc12; color: #ffcc12; 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 span { display: inline-block; max-width: 100%; font-size: 14px; line-height: 1.5em; color: #999; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; } #join .panel .panel-heading a.accordion-toggle h4 { color: #232939; font-weight: bold; } #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: #ffcc12; } #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: 14px; 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 #ccc; } #join .panel-body hr { margin: 25px 0px; border-color: #ccc; } .join-hr { padding-top: 30px; margin-top: 30px; border-top: 1px dashed #ccc; } .join-hr a { display: inline-block; padding: 0px 35px; font-size: 15px; line-height: 42px; font-weight: bold; color: #fff; border-radius: 21px; background: #232939; transition: all .4s; } .join-hr a:hover { background: #ffcc12; } /*产品*/ .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: #ffcc12; } /*产品详情*/ .product{ display: flex; flex-wrap: wrap; border-bottom: 2px solid #ebebeb; } .product-img{ display: flex; justify-content: center; align-items: center; } #product .owl-nav { background: #fff; margin: 0; padding:0px; } #product .owl-nav [class*=owl-] { position: absolute; z-index: 2; bottom: 50%; margin-top: -30px; 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: #ffcc12; } #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{ position: absolute; left: 0; right: 0; z-index: 3; bottom:5vh; 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 #ffcc12; } #product .owl-dots .owl-dot img{ max-width: 80px; } .product-info h1{ margin:0; font-size: 1.75rem; line-height: 1.25em; font-weight: bold; color: #ffcc12; } .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; height:17rem; 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: #ffcc12; } .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; } .details-button{ border-bottom: 1px solid #ebebeb; } .details-button li{ display: inline-block; } .details-button a{ display: inline-block; padding:0 2rem; font-size: 0.85rem; line-height: 3.6em; color: #333; background: #f7f7f7; } .details-button a.active{ color: #fff; background: #ffcc12; } .product-text-table { width: 100%; transition:all .4s; } .tab-content{ padding: 3vh 0; } .product-text-table::-webkit-scrollbar-track { background: #ebebeb; } .product-text-table::-webkit-scrollbar { width: 6px; height: 6px; } .product-text-table::-webkit-scrollbar-thumb { background: #333; } .tab-content .row{ margin-left: -8px; margin-right: -8px; } .tab-content .row>div{ padding: 8px; } @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-info{ width:100%; padding:5vh 6%; } #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 #ffcc12; background: #ffcc12; } #product .owl-dots .owl-dot span{ display: none; } #product .owl-dots .owl-dot img{ display: none; } .product-info h3{ line-height: 1.25em; } .product-info h2{ font-size: 1.5rem; } .product-info h4{ font-size: 0.85rem; } .product-text-table { padding-right: 10px; height: 60vh; overflow: auto; } } /*销售网络*/ .network-box{ position: relative; width: 100%; background: #f7f7f7; } .network-text{ position: absolute; z-index: 3; left:120px; top:18vh; max-width: 600px; } .network-title{ font-size: 30px; line-height: 1.5em; color: #666; } .network-subtitle{ margin-bottom: 25px; font-size: 28px; line-height: 1.5em; font-weight: bold; color: #ffcc12; } .network-text p{ font-size: 18px; line-height: 1.75rem; color: #666; } .network-select{ position: relative; display: inline-block; margin: 4px; } .network-select>a{ z-index: 3; display: inline-block; width: 240px; padding: 0px 15px; font-size: 14px; line-height: 40px; border: 1px solid #ebebeb; background: #fff; } .network-select>div{ position: absolute; z-index: 4; top: 100%; left: 0; width: 100%; padding: 5px 0; border: 1px solid #ebebeb; border-top: none; max-height: 300px; overflow-y: auto; background: #fff; } .network-select li{ } .network-select li a{ display: inline-block; width: 100%; padding: 0 15px; font-size: 14px; line-height: 32px; color: #666; background: #fff; transition:all .4s; } .network-select li a:hover{ background: #f7f7f7; } .network{ position: relative; width: 65%; max-width: 1000px; margin: 0 auto 6vh; } .network>img{ width: 100%; } .point-list .item{ position: absolute; } .point-list .item a .point{ display: block; width: 8px; height: 8px; border-radius: 50%; background: #ffcc12; } .point-list .item a .city { white-space: nowrap; position: absolute; left: 50%; top: 100%; padding-top: 4px; font-size: 14px; line-height: 1em; color: #666; transform: translateX(-50%); } .point-list .item .sub{ position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); padding:4px 10px; background-color: #f7f7f7; bottom: 16px; border-radius: 4px; white-space:nowrap; visibility: hidden; opacity: 0; box-shadow: 0 0 10px rgba(0,0,0,.1); } .point-list .item.cur .sub{ opacity: 1; visibility: visible; } .point-list .item .sub:before { content: ""; position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); width: 0; height: 0; border: 8px solid transparent; border-top-color: #f7f7f7; } .point-list .item .sub img{ display: inline-block; margin-right: 10px; width: 40px; max-width:none; overflow: hidden; } .point-list .item .sub span{ display: inline-block; font-size: 12px; color:#666; line-height: 50px; white-space:nowrap; } @media screen and (max-width:1199.8px){ .network-text{ position: static; z-index: 3; left:auto; top:auto; max-width: 600px; } .network{ width: 75%; } } @media screen and (max-width:991.8px){ .network-title{ font-size: 24px; line-height: 1.5em; color: #666; } .network-subtitle{ margin-bottom: 25px; font-size: 24px; line-height: 1.5em; font-weight: bold; color: #ffcc12; } .network-text p{ font-size: 16px; line-height: 1.75rem; color: #666; } } @media screen and (max-width:767.8px){ .network{ width: 96%; } .point-list .item{ display: none; } .point-list .item:first-child{ display: inline-block; } } /*合作伙伴*/ .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 #ffcc12; 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 #ffcc12; } .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: #ffcc12; } .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: #ffcc12; 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: #ffcc12; } .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{ transition-delay: 0.3s; background: #232939; } .app-list-text{ position: relative; z-index: 3; width: 60%; } .app-list li a .app-list-text h4{ position: relative; margin-bottom: 30px; font-size: 17px; font-weight: bold; line-height: 1.5em; text-transform:Uppercase; color: #232939; 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:#ffcc12;} .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: #ffcc12; } .app-list li a:hover .app-list-text p{ color: #fff; } .app-list-img{ position: absolute; z-index: 2; right: 25px; bottom: 25px; width: 120px; height: 120px; border-radius: 50%; background-position: center; background-size: cover; transition:all .4s; } .app-list li a:hover .app-list-img{ right: 0; bottom: 0; width: 100%; height: 100%; border-radius:0; opacity: 0.4; transition:all .4s; } @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 -58vw 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; text-transform: uppercase; } .contact>div p{ margin-bottom: 15px; } .contact .contact-info{ width: 42%; margin-right: 8%; padding: 40px 0 0; } .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 #ffcc12; } .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: #ffcc12; } @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; } }