@charset "utf-8"; * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } @font-face { font-family: 'pf'; src: ; font-weight: normal; font-style: normal; } @font-face { font-family: 'eng'; src: ; font-weight: normal; font-style: normal; } html { margin: 0 auto; } body { font: 12px/1.8 "microsoft yahei", "stheitisc", "hiragino sans gb", arial, "helvetica", "simhei", "stxihei", sans-serif; margin: 0 auto; color: #000; background-color: #fff; min-width: 320px; max-width: 1920px; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, p { font-weight: normal; margin: 0; line-height: 1.1; } p { line-height: 1.5; } a, a:visited { text-decoration: none; } a { color: #000; } li { list-style: none; } ul, li, ol { margin: 0; padding: 0; } fieldset, input, button, textarea { margin: 0; padding: 0; border: 0; outline: none; -webkit-appearance: none; } input[type='checkbox'] { -webkit-appearance: checkbox; } input[type='radio'] { -webkit-appearance: radio; } .fl { float: left; } .fr { float: right; } .cl:after { content: ""; display: block; clear: both; height: 0; } .img { max-width: 100%; height: auto; display: block; } .img2 { max-height: 100%; width: auto; } .trans { -moz-transition: all ease .8s; -webkit-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s; } .trans04 { -moz-transition: all ease .4s; -webkit-transition: all ease .4s; -o-transition: all ease .4s; transition: all ease .4s; } .trans2 { -moz-transition: all ease 2s; -webkit-transition: all ease 2s; -o-transition: all ease 2s; transition: all ease 2s; } .transcalxzero { transform: scalex(0); -o-transform: scalex(0); -ms-transform: scalex(0); -moz-transform: scalex(0); -webkit-transform: scalex(0); } .transcaletop { transform: scale(1, 0); -o-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -webkit-transform: scale(1, 0); } .bg { background-size: cover; background-position: center center; background-repeat: no-repeat; padding-bottom: 31%; } .bg0 { background-size: cover; background-position: center center; background-repeat: no-repeat; } .absolute { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .abs { width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .flex { display: box; /* old - android 4.4- */ display: flexbox; display: -webkit-box; /* old - ios 6-, safari 3.1-6 */ display: -moz-box; /* old - firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* tweener - ie 10 */ display: -webkit-flex; /* new - chrome */ display: flex; /* new, spec - opera 12.1, firefox 20 */ justify-content: center; align-items: center; overflow: hidden; } /*公共*/ .fl { float: left; } .fr { float: right; } .cb { clear: both; } .c12 { width: 1200px; margin: auto; } .cover { background-repeat: no-repeat; background-position: center; background-size: cover; } .contain { background-repeat: no-repeat; background-position: center; background-size: contain; } a, .tran, img { transition: all 0.3s; -webkit-transition: all 0.3s; } a { color: #000; } .tran5 { transition: all 0.5s; -webkit-transition: all 0.5s; } .pic { transition: all 2s; -webkit-transition: all 2s; } .pic.cover { position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; } .pic.contain { position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; } .contain { background-size: contain; background-position: center; background-repeat: no-repeat; } .none { display: none; } .pb0{ padding-bottom: 0; } .wrap { padding: 0 7.5%; /* overflow: hidden; */ } header { height: 90px; } header #logo { height: 85px; padding: 17px 0; line-height: 50px; } header #logo span{ display: inline-block; margin: 0 40px; color: #5b5b5b; font-size: 12px; } header #logo img { max-height: 100%; vertical-align: middle; } header #navwrap nav { position: relative; float: left; padding-right: 20px; } header #navwrap nav:before { content: ''; position: absolute; width: 1px; height: 12px; background: #9e9e9e; right: 17px; top: 50%; margin-top:-4.5px; } header #navwrap nav li { float: left; padding: 0 21px; position: relative; } header #navwrap nav li.active a { color: #e62129; } header #navwrap nav li.hover dl { display: block; z-index: 32; } header #navwrap nav li a { font-size: 14px; line-height: 90px; color: #454545; } header #navwrap nav li a:hover { color: #e62129; } header #navwrap nav li dl { position: absolute; width: 800px; height: 55px; overflow: hidden; background: #212771; display: none; left: 0; top: 90px; } header #navwrap nav li dl.dlr { right: 0; left: initial; text-align: right; } header #navwrap nav li dl dd { margin: 0 3.5%; display: inline; } header #navwrap nav li dl dd a { line-height: 55px; color: #a9addc !important; } header #navwrap nav li dl dd a:hover { color: #fff !important; } header #navwrap nav .line { height: 2px; background: #e62129; position: absolute; left: 0; bottom: 0; -webkit-transition: all 400ms ease-in-out 0ms; transition: all 400ms ease-in-out 0ms; z-index: -2; } header #navwrap .searchwrap { float: left; height: 30px; padding-top: 31px; } header #navwrap .searchwrap .search { position: relative; height: 30px; width: 12px; overflow: hidden; -webkit-transition: all 300ms ease 0ms; transition: all 300ms ease 0ms; float: left; margin-right: 10px; } header #navwrap .searchwrap .search:before { content: ''; width: 12px; height: 13px; background: no-repeat top center; position: absolute; cursor: pointer; right: 0; top: 9px; } header #navwrap .searchwrap .search input { position: absolute; width: 100px; left: 12px; top: 0; height: 30px; font-size: 12px; text-indent: 5px; border-radius: 10px; border: 1px solid #a6a6a6; } header #navwrap .searchwrap a { color: #454545; display: inline-block; line-height: 30px; position: relative; padding-left: 10px; font-size: 12px; } header #navwrap .searchwrap a:before { content: ''; width: 3px; height: 11px; background: no-repeat top center; position: absolute; left: 0; top: 10px; } header #navwrap .searchwrap a:hover { color: #e62129; } .common_line { height: 55px; background: #212771; position: relative; z-index: -1; } .index-banner{ position: relative; overflow: hidden; } .index-banner .swiper-slide{ position: relative; overflow: hidden; } .index-banner .swiper-slide .pic-w{ position: relative; overflow: hidden; padding-bottom: 44%; } .index-banner .button{ /* position: absolute; */ z-index: 2; display: none; } .index-banner .button div{ position: absolute; z-index: 2; top: 50%; margin-top: -45px; width: 60px; height: 90px; line-height: 90px; background: #9e3d2a; text-align: center; cursor: pointer; outline: none; left: 7.5%; transition: all 0.5s; opacity: 0; } .index-banner .button div.index-next{ left: auto; right: 7.5%; } .index-banner .button div:hover{ background: #212771; } .index-banner:hover .button div{ opacity: 1; } .index-banner .index-zz{ position: absolute; bottom: 0; right: 0; left: 0; z-index: 2; transform: translatey(50%); } .index-banner .index-zz img{ width: 100%; } .index-title{ overflow: hidden; text-align: center; } .index-title .line{ height: 3px; background: #212771; width: 40px; position: relative; margin:10px auto; } .index-title .line:before{ content: ""; position: absolute; z-index: 2; width: 100%; height: 100%; left: 0; top: 0; background: #212771; } .index-title .line:after{ content: ""; position: absolute; z-index: 1; left: 50%; top: 1px; width: 450px; transform: translatex(-50%); height: 1px; border-top:1px dashed #ccc; } .index-title p{ opacity: .7; /*margin-bottom: 2%;*/ } .index-title img{ display: none; } .index-about{ margin-top: 2.5%; } .index-about .main{ overflow: hidden; margin-top: 2%; position: relative; } .index-about .main .pic-w{ position: absolute; width: 50%; left: 0; top: 0; z-index: 1; height: 100%; overflow: hidden; } .index-about .main .pic-w:hover .pic{ transform: scale(1.1); } .index-about .main .right{ float: right; width: 50%; border-top: 1px solid #cdced0; border-bottom: 1px solid #cdced0; } .index-about .main .right .txt-list li{ display: none; padding: 5%; } .index-about .main .right .txt-list li.on{ display: block; } .index-about .main .right .txt-list p{ opacity: .8; margin-top: 5px; } .index-about .main .right .txt-list .content{ line-height: 2; margin-top: 4%; padding-top: 4%; position: relative; } .index-about .main .right .txt-list .content:after{ content: ""; position: absolute; background: #a0a0a0; height: 1px; width: 60px; top: 0; left: 0; } .index-about .main .right .nav-list{ overflow: hidden; border-top: 1px solid #cdced0; } .index-about .main .right .nav-list li{ padding: 4% 0; width: 25%; float: left; text-align: center; border-right: 1px solid #dddddd; cursor: pointer; outline: none; transition: all 0.3s; } .index-about .main .right .nav-list li:last-child{ border:none; } .index-about .main .right .nav-list li p{ font-size: 12px; margin-top: 10px; opacity: .8; } .index-about .main .right .nav-list li.on{ background: #212771; color: #fff; } .index-news{ margin-top: 5%; overflow: hidden; } .index-news .main{ margin-top: 3%; overflow: hidden; } .index-news .main li{ float: left; position: relative; width: 31.5%; margin-right: 2.75%; } .index-news .main li span{ position: absolute; background: #ccc; z-index: 2; } .index-news .main li span:after{ content: ""; position: absolute; z-index: 1; } .index-news .main li span:nth-child(1){ width: 100%; height: 1px; left: 0; top: 0; } .index-news .main li span:nth-child(1):after{ content: ""; position: absolute; width: 0; height: 1px; right: 0; top: 0; background: #212771; transition: all 0.8s; } .index-news .main li span:nth-child(2){ width: 1px; height: 100%; right: 0; top: 0; } .index-news .main li span:nth-child(2):after{ content: ""; position: absolute; width: 1px; height: 0; left: 0; top: 0; background: #212771; transition: all 0.8s; } .index-news .main li span:nth-child(3){ width: 100%; height: 1px; right: 0; bottom: 0; } .index-news .main li span:nth-child(3):after{ content: ""; position: absolute; width: 0; height: 100%; left: 0; top: 0; background: #212771; transition: all 0.8s; } .index-news .main li span:nth-child(4){ width: 1px; height: 100%; left: 0; bottom: 0; } .index-news .main li span:nth-child(4):after{ content: ""; position: absolute; width: 1px; height: 0; left: 0; bottom: 0; background: #212771; transition: all 0.8s; } .index-news .main li:hover span:nth-child(2):after,.index-news .main li:hover span:nth-child(4):after{ height: 100%; } .index-news .main li:hover span:nth-child(1):after,.index-news .main li:hover span:nth-child(3):after{ width: 100%; } .index-news .main li:last-child{ margin-right: 0; overflow: hidden; } .index-news .main li .pic-w{ position: relative; overflow: hidden; padding-bottom: 51%; } .index-news .main li:hover .pic{ transform: scale(1.1); } .index-news .main li .txt{ overflow: hidden; position: relative; } .index-news .main li .txt .left{ float: left; padding: 7% 10%; width: 77.5%; } .index-news .main li .txt .left h1{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; } .index-news .main li .txt .left p{ font-size: 14px; color: #545454; line-height: 25px; height: 50px; overflow: hidden; margin-top: 20px; } .index-news .main li .txt .right{ position: absolute; width: 22.5%; height: 100%; z-index: 1; border-left: 1px solid #ccc; right: 0; padding: 7% 5%; transition: all 0.5s; } .index-news .main li:hover .txt .right{ background: #212771; border-color:#212771; color: #fff; } .index-news .main li .txt .right p{ margin-top: 2px; opacity: .55; } .index-news .main li .txt .right .go{ width: 20px; height: 20px; background: #aaaaaa; text-align: center; color: #fff; font-size: 12px; line-height: 20px; margin-top: 20px; transition: all 0.5s; } .index-news .main li:hover .txt .right .go{ background: #212771; } .index-part{ margin-top: 5%; overflow: hidden; } .index-part .des{ text-align: center; line-height: 2; margin: 3% 0; } .index-part .main{ position: relative; } .index-part .main li{ width: 48.5%; float: left; overflow: hidden; position: relative; } .index-part .main li:nth-child(2n){ float: right; } .index-part .main li .pic-w{ position: relative; overflow: hidden; padding-bottom: 55%; } .index-part .main li .txt{ position: absolute; padding: 7.5%; z-index: 2; left: 0; bottom: 0; color: #fff; } .index-part .main li .txt p{ line-height: 1; margin-top: 3%; } .index-part .main li .href{ position: absolute; z-index: 2; right: 0; bottom: 0; margin: 7.5%; overflow: hidden; padding: 3px; background: #212771; color: #fff; overflow: hidden; padding-left: 20px; border-radius: 46px; } .index-part .main li span{ display: inline-block; width: 40px; height: 40px; border-radius: 40px; background: #fff; color: #212771; text-align: center; line-height: 40px; float: right; position: relative; z-index: 2; transition: all 0.3s; } .index-part .main li font{ display: inline-block; line-height: 38px; margin-right: 10px; position: relative; z-index: 2; transition: all 0.3s; } .index-part .main li:hover .pic{ transform: scale(1.1); } .index-part .main li .href:after{ content: ""; left: 0; top: 0; position: absolute; width: 0; height: 100%; background: #fff; transition: all 0.3s; } .index-part .main li:hover .href:after{ width: 100%; } .index-part .main li:after{ content: ""; position: absolute; width: 100%; height: 50%; bottom: 0; left: 0; z-index: 1; background-image: linear-gradient(to top, #000 , rgba(255,255,255,0)); } .index-part .main li:hover font{ color: #212771; } .index-pro{ margin-top: 5%; padding-top: 3%; background: url(/uploads/image/wimages/index-pro-bg.jpg); background-size: 100% auto; background-position: center top; overflow: hidden; background-repeat: no-repeat; margin-bottom: 5%; } .index-pro .index-title a{ color: #fff; } .index-pro .index-title a:hover{ color: #212771; } .index-pro .main{ width: 73%; margin:auto; margin-top: 2.5%; position: relative; overflow: hidden; } .index-pro .main .left{ position: relative; overflow: hidden; width: 48.5%; float: left; } .index-pro .main .pic-w{ position: relative; padding-bottom: 78%; } .index-pro .main .txt{ position: absolute; z-index: 2; left: 0; bottom: 0; margin: 5%; color: #fff; } .index-pro .main .txt h1{ margin-top: 4%; } .index-pro .main .right{ float: right; width: 48.5%; } .index-pro .main .right li{ position: relative; overflow: hidden; margin-bottom: 6%; } .index-pro .main .right li:last-child{ margin-bottom: 0; } .index-pro .main .right li .pic-w{ padding-bottom: 36%; } .index-pro .main span{ position: absolute; background: rgba(255,255,255,255,.0); z-index: 2; } .index-pro .main span:after{ content: ""; position: absolute; z-index: 1; } .index-pro .main span:nth-child(1){ width: 100%; height: 1px; left: 0; top: 0; } .index-pro .main span:nth-child(1):after{ content: ""; position: absolute; width: 0; height: 1px; right: 0; top: 0; background: #212771; transition: all 0.8s; } .index-pro .main span:nth-child(2){ width: 2px; height: 100%; right: 0; top: 0; } .index-pro .main span:nth-child(2):after{ content: ""; position: absolute; width: 2px; height: 0; left: 0; top: 0; background: #212771; transition: all 0.8s; } .index-pro .main span:nth-child(3){ width: 100%; height: 2px; right: 0; bottom: 0; } .index-pro .main span:nth-child(3):after{ content: ""; position: absolute; width: 0; height: 100%; left: 0; top: 0; background: #212771; transition: all 0.8s; } .index-pro .main span:nth-child(4){ width: 2px; height: 100%; left: 0; bottom: 0; } .index-pro .main span:nth-child(4):after{ content: ""; position: absolute; width: 2px; height: 0; left: 0; bottom: 0; background: #212771; transition: all 0.8s; } .index-pro .main li:after,.index-pro .main .left:after{ content: ""; position: absolute; width: 100%; height: 50%; bottom: 0; left: 0; z-index: 1; background-image: linear-gradient(to top, #000 , rgba(255,255,255,0)); } .index-pro .main li:hover span:nth-child(2):after,.index-pro .main li:hover span:nth-child(4):after{ height: 100%; } .index-pro .main li:hover span:nth-child(1):after,.index-pro .main li:hover span:nth-child(3):after{ width: 100%; } .index-pro .main .left:hover span:nth-child(2):after,.index-pro .main .left:hover span:nth-child(4):after{ height: 100%; } .index-pro .main .left:hover span:nth-child(1):after,.index-pro .main .left:hover span:nth-child(3):after{ width: 100%; } .index-pro .main li:hover .pic,.index-pro .main .left:hover .pic{ transform: scale(1.1); } footer { padding: 45px 0 40px 0; background: #e9e9e9; } footer .left { color: #d2d2d2; float: left; } footer .left a { color: #605e5f; margin: 0 15px; } footer .left a:hover { color: #212771; } footer .left a.weixin, footer .left a.sina { width: 19px; height: 19px; display: inline-block; position: relative; top: 4px; margin: 0 10px; overflow: hidden; } footer .left a.weixin:hover:before, footer .left a.sina:hover:before { top: -19px; } footer .left a.weixin:before, footer .left a.sina:before { content: ''; position: absolute; width: 100%; height: 38px; left: 0; top: 0; background-position: top center; -webkit-transition: all 300ms ease 0ms; transition: all 300ms ease 0ms; } footer .left a.weixin:before { background-image: url(/uploads/image/wimages/weixin.png); } footer .left a.sina:before { background-image: url(/uploads/image/wimages/sina.png); } footer .left span { color: #605e5f; padding-left: 15px; } footer .right { color: #888888; float: right; } footer .right a { color: #888888; } footer .right a:hover { color: #212771; } .about-us{ margin-top: 2.5%; padding: 0 4.5%; } .about-us .main{ margin-top: 2.5%; overflow: hidden; position: relative; } .about-us .main .left{ float: left; overflow: hidden; width: 51%; padding: 3% 0; } .about-us .main .left .des{ margin-top: 5%; line-height: 2; text-align: justify; } .about-us .main .right{ width: 47.5%; float: right; position: absolute; right: 0; top: 0; height: 100%; overflow: hidden; } @media (max-width: 1200px){ .about-us .main .right, .about-us .main .left{ width: auto; float: none; } .about-us .main .right{ position: relative; padding-top: 60%; margin-top: 30px; } } .about-us .main .right video{ width: 100%; height: 400px; } .about-us .main .right h1{ position: absolute; z-index: 2; left: 0; top: 0; padding: 5%; color: #fff; } .about-us .main .right .play{ position: absolute; bottom: 0; left: 0; z-index: 2; padding: 5%; } .about-us .bot{ margin-top: 5%; overflow: hidden; padding: 2% 0; text-align: center; border-top: 2px solid #cccccc; border-bottom: 2px solid #cccccc; } .about-us .bot ul{ display: flex; justify-content: space-around; } .about-us .bot ul h1{ color: #212771; font-family: arial; font-weight: bold; margin-bottom: 4%; } .about-us .bot ul h1 span{ font-weight: bold; } .about-us .bot ul li{ padding:0 5%; border-right: 1px solid #ccc; } .about-us .bot ul li:last-child{ border:none; } .about-brand{ margin-top: 5%; padding:0 4.5%; } .about-brand ul{ margin-top: 3%; } .about-brand ul:after{ content: ""; clear: both; display: block; } .about-brand ul li{ width: 49%; float: left; margin-bottom: 2%; background: #212771; position: relative; transition: all 0.5s; cursor: pointer; } .about-brand ul li:hover{ transform: translatey(-10px); box-shadow: 0 0 8px 0 #000; } .about-brand ul li:nth-child(2n){ float: right; } @media (max-width: 768px){ .about-us .bot ul{ display: block; } .about-us .bot ul li{ margin: 32px auto; border: 0 none; } .about-brand ul li{ width: 100%; } } .about-brand ul li .left{ position: absolute; left: 0; top: 0; height: 100%; width: 19%; z-index: 1; text-align: right; padding: 5% 2% 5% 0; color: #fff; } .about-brand ul li .left h1{ margin-bottom: 10%; } .about-brand ul li .left img{ max-width: 35%; } .about-brand ul li .right{ float: right; width: 81%; background: #fec1b7; padding: 5%; padding-bottom: 6%; position: relative; } .about-brand ul li .right::after{ content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 22px; height: 22px; background-image: url(/uploads/image/wimages/sj.png); background-position: center; background-size: contain; } .about-brand ul li .right::before{ content: ""; position: absolute; height: 100%; width: 0; transition: all 0.5s; left: 0; top: 0; background: #212771; z-index: 1; } .about-brand ul li:hover .right::before{ width: 100%; } .about-brand ul li .right p{ opacity: .3; margin-top: 2%; position: relative; z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .about-brand ul li .right h1{ position: relative; z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .about-brand ul li .right:hover{ color: #fff; } .about-honor{ margin-top: 3%; padding: 0 4.5%; margin-bottom: 5%; } .about-honor .nav-box{ text-align: center; margin-top: 3%; border-bottom: 2px solid #cccccc; /* font-size: 0; */ word-spacing:-5px; } .about-honor .nav-box li{ display: inline-block; padding:1% 4%; background: #f19080; color: #fff; cursor: pointer; transition: all 0.3s; } .about-honor .nav-box li:hover,.about-honor .nav-box li.on{ background: #212771; } .about-honor .main-box{ overflow: hidden; position: relative; margin-top: 2%; border:1px solid #ccc; } .about-honor .main-box .box{ display: none; } .about-honor .main-box .box.on{ display: block; } .about-honor .main-box .left{ /* float: left; width: 64%; */ width: 100%; border-right: 1px solid #ccc; padding: 4%; } .about-honor .main-box .left .title:after{ content: ""; display: block; clear: both; width: 45px; height: 4px; background: #212771; margin-top: 2%; margin-bottom: 3%; } .about-honor .main-box .left li{ position: relative; opacity: .6; margin: 16px 0; transition: all 0.3s; cursor: pointer; } .about-honor .main-box .left li::after{ content: ""; display: block; clear: both; } .about-honor .main-box .left li .point{ transition: all 0.3s; width: 5px; height: 5px; border-radius: 100%; background: #000; position: absolute; left: 0; top: 50%; margin-top: -2px; opacity: .6; } .about-honor .main-box .left li p{ padding-left: 25px; transition: all 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; } .about-honor .main-box .left li .line{ position: absolute; right: 0; top: 50%; z-index: 1; width: 20px; height: 20px; margin-top: -10px; opacity: .6; } .about-honor .main-box .left li .line::after{ content: ""; width: 100%; height: 2px; left: 0; top: 50%; margin-top: -1px; background: #000; position: absolute; } .about-honor .main-box .left li .line::before{ content: ""; position: absolute; height: 100%; width: 2px; top: 0; left: 50%; margin-left: -1px; background: #000; transition: all 0.3s; } .about-honor .main-box .left li.on,.about-honor .main-box .left li:hover{ opacity: 1; } .about-honor .main-box .left li.on .point,.about-honor .main-box .left li:hover .point{ font-size: 36px; background: #212771; opacity: 1; width: 6px; height: 6px; margin-top: -3px; } .about-honor .main-box .left li.on .line::before,.about-honor .main-box .left li:hover .line::before{ height: 0; } .about-honor .main-box .right{ position: absolute; right: 0; top: 0; height: 96%; width: 36%; overflow: hidden; padding: 4%; display: none; } .about-honor .main-box .right ul{ height: 100%; } .about-honor .main-box .right li{ display: none; height: 100%; overflow-y: scroll; overflow-x: hidden; padding-right: 3%; } .about-honor .main-box .right li h1::after{ content: ""; display: block; clear: both; width: 50px; height: 1px; background: #000; margin: 10% 0; } .about-honor .main-box .right li.on{ display: block; } .about-honor .main-box .right li::-webkit-scrollbar {/*滚动条整体样式*/ width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .about-honor .main-box .right li::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 8px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #212771; } .about-honor .main-box .right li::-webkit-scrollbar-track {/*滚动条里面轨道*/ /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */ border-radius: 8px; background: #ededed; } .serve-sys{ margin-top: 2.5%; } .serve-sys .nav-list{ margin-top: 3%; overflow: hidden; } .serve-sys .nav-list ul{ display: flex; justify-content: space-between; } .serve-sys .nav-list li{ width: 33.2%; background: #ef7d6a; text-align: center; color: #fff; padding: 0.8%; cursor: pointer; transition: all 0.3s; } .serve-sys .nav-list li.on{ background: #212771; } .serve-sys .main{ overflow: hidden; } .serve-sys .main li{ display: none; position: relative; overflow: hidden; } .serve-sys .main li.on{ display: block; } .serve-sys .main li .left{ float: left; overflow: hidden; padding:5% 8%; width: 50%; background: #f0f0f0; } .serve-sys .main li .title h1{ color: #212771; margin-bottom: 2%; } .serve-sys .main li .title p{ opacity: .7; } .serve-sys .main li .line{ height: 2px; background: #c0c0c0; margin: 10% 0; } .serve-sys .main li .des{ text-align: justify; color: #525252; } .serve-sys .main li .tel{ color: #525252; line-height: 36px; padding-left: 60px; background: url(/uploads/image/wimages/tel.png) center left no-repeat; margin-top: 8%; } .serve-sys .main .pic-w{ position: absolute; right: 0; top: 0; z-index: 1; width: 50%; height: 100%; overflow: hidden; } .serve-sys .main li dt font{ color: #ec4315; font-weight: bold; } .serve-sys .main li dt{ color: #333333; margin-bottom: 1.5%; } .serve-sys .main li dd{ margin-bottom: 3%; } .serve-sys .main li h2{ color: #ec4315; } .serve-sys .main li .six{ margin-top: 2%; overflow: hidden; } .serve-sys .main li .six ul p{ width: 45%; float: left; margin-top: 3%; opacity: .8; } .serve-sys .main li .six ul p:nth-child(2n){ float: right; } .serve-sys .main li .line2{ width: 100%; height: 2px; background: #c0c0c0; margin: 8% 0; } .serve-sys .bot ul{ display: flex; justify-content: space-between; border-top: 2px solid #cccccc; border-bottom: 2px solid #cccccc; padding:2% 10%; } .serve-sys .bot ul li{ overflow: hidden; /* border-right: 1px solid #ccc; */ } .serve-sys .bot ul li.line{ width: 2px; background: #ccc; height: 90px; } .serve-sys .bot ul li:last-child{ border:none; } .serve-sys .bot ul li img{ display: block; float: left; } .serve-sys .bot ul li .txt{ float: left; margin-left: 35px; } .serve-sys .bot ul li h1{ color: #212771; font-weight: bold; margin-bottom: 5%; margin-left: -5px; } .serve-solu{ margin-top: 5%; } .serve-solu .main{ margin-top: 3%; } .serve-solu .main ul{ display: flex; justify-content: space-between; } .serve-solu .main li{ width: 22%; position: relative; overflow: hidden; cursor: pointer; transition: all 0.3s; } .serve-solu .main li:hover{ box-shadow: 0 0 15px 0 #999; } .serve-solu .main li .pic-w{ position: relative; overflow: hidden; padding-bottom: 62%; } .serve-solu .main li h1{ text-align: center; opacity: .7; margin: 10% 0; } .serve-solu .main li .des{ padding: 8%; padding-top: 0; text-align: center; } .serve-solu .main li span{ position: absolute; background: #ccc; z-index: 2; } .serve-solu .main li span:after{ content: ""; position: absolute; z-index: 1; } .serve-solu .main li span:nth-child(1){ width: 100%; height: 1px; left: 0; top: 0; } .serve-solu .main li span:nth-child(1):after{ content: ""; position: absolute; width: 0; height: 1px; right: 0; top: 0; background: #212771; transition: all 0.8s; } .serve-solu .main li span:nth-child(2){ width: 2px; height: 100%; right: 0; top: 0; } .serve-solu .main li span:nth-child(2):after{ content: ""; position: absolute; width: 2px; height: 0; left: 0; top: 0; background: #212771; transition: all 0.8s; } .serve-solu .main li span:nth-child(3){ width: 100%; height: 2px; right: 0; bottom: 0; } .serve-solu .main li span:nth-child(3):after{ content: ""; position: absolute; width: 0; height: 100%; left: 0; top: 0; background: #212771; transition: all 0.8s; } .serve-solu .main li span:nth-child(4){ width: 2px; height: 100%; left: 0; bottom: 0; } .serve-solu .main li span:nth-child(4):after{ content: ""; position: absolute; width: 2px; height: 0; left: 0; bottom: 0; background: #212771; transition: all 0.8s; } .serve-solu .main li:hover span:nth-child(2):after,.serve-solu .main li:hover span:nth-child(4):after{ height: 100%; } .serve-solu .main li:hover span:nth-child(1):after,.serve-solu .main li:hover span:nth-child(3):after{ width: 100%; } .serve-solu .main li:hover .pic{ transform: scale(1.1); } .serve-work{ margin-top: 5%; margin-bottom: 5%; } .serve-work .nav-list{ margin-top: 2%; } .serve-work .nav-list ul{ display: flex; justify-content: space-between; } .serve-work .nav-list li{ width: 33.2%; background: #ef7d6a; text-align: center; color: #fff; padding: 0.8%; cursor: pointer; transition: all 0.3s; } .serve-work .nav-list li.on{ background: #212771; } .serve-work .main .box{ display: none; } .serve-work .main .box.on{ display: block; } .serve-work .main .pic-w{ min-height: 300px; position: relative; overflow: hidden; } .serve-work .main .pic-w:after{ content: ""; display: block; padding-bottom: 42%; } .serve-work .main .pic-list li{ position: relative; display: none; } .serve-work .main .pic-list li.on{ display: block; } .serve-work .main .pic-list .txt{ position: absolute; background: #fff; z-index: 2; padding: 20px; top: 50%; transform: translatey(-50%); margin-left: 5%; border:2px solid #212771; } .serve-work .main .pic-list .txt .title font{ font-family: arial; margin:0 5%; } .serve-work .main .pic-list .txt .line{ width: 50px; height: 1px; background: #000; margin: 15% 0; margin-bottom: 11%; } .serve-work .main .pic-list .txt p{ line-height: 2; } .serve-work .main .xm-list{ overflow: hidden; border-top: 1px solid #212771; border-bottom: 1px solid #212771; } .serve-work .main .xm-list ul{ display: flex; justify-content: space-between; } .serve-work .main .xm-list li{ width: 50%; border-right: 2px soslid ; text-align: center; color: #212771; padding: 0.8%; cursor: pointer; transition: all 0.3s; border-right: 1px solid #212771; color: #000; } .serve-work .main .xm-list li.on{ background: #212771; color: #fff; } .serve-work .main .xm-list li font{ margin: 0 5%; } .inner-banner{ position: relative; overflow: hidden; padding-bottom: 44%; } .news-list{ max-width: 1400px; padding:0 20px; margin: 5% auto; } .news-list ul{ margin-top: 3%; } .news-list ul li{ padding: 3%; position: relative; } .news-list ul li a{ display: block; position: relative; } .news-list ul li a::after{ content: ""; display: block; clear: both; } .news-list ul li .pic-w{ width: 30%; position: absolute; left: 0; top: 0; height: 100%; } .news-list ul li .txt{ padding:0 5%; width: 70%; float: right; } .news-list ul li .time{ margin-top: 4%; } .news-list ul li .line{ margin: 4% 0; width: 50px; height: 1px; background: #000; } .news-list ul li .des{ opacity: .7; word-break:break-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .news-list ul li span{ position: absolute; background: #fff; z-index: 2; } .news-list ul li span:after{ content: ""; position: absolute; z-index: 1; } .news-list ul li span:nth-child(1){ width: 100%; height: 1px; left: 0; top: 0; } .news-list ul li span:nth-child(1):after{ content: ""; position: absolute; width: 0; height: 1px; right: 0; top: 0; background: #212771; transition: all 0.8s; } .news-list ul li span:nth-child(2){ width: 1px; height: 100%; right: 0; top: 0; } .news-list ul li span:nth-child(2):after{ content: ""; position: absolute; width: 1px; height: 0; left: 0; top: 0; background: #212771; transition: all 0.8s; } .news-list ul li span:nth-child(3){ width: 100%; height: 1px; right: 0; bottom: 0; } .news-list ul li span:nth-child(3):after{ content: ""; position: absolute; width: 0; height: 100%; left: 0; top: 0; background: #212771; transition: all 0.8s; } .news-list ul li span:nth-child(4){ width: 1px; height: 100%; left: 0; bottom: 0; } .news-list ul li span:nth-child(4):after{ content: ""; position: absolute; width: 1px; height: 0; left: 0; bottom: 0; background: #212771; transition: all 0.8s; } .news-list ul li:hover span:nth-child(2):after,.news-list ul li:hover span:nth-child(4):after{ height: 100%; } .news-list ul li:hover span:nth-child(1):after,.news-list ul li:hover span:nth-child(3):after{ width: 100%; } .news-list ul li .right{ position: absolute; width: 6%; height: 100%; z-index: 2; border-left: 1px solid #212771; top: 0; right: 0; opacity: 0; transition: all 0.5s; } .news-list ul li .right img{ position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%,-50%); } .news-list ul li:hover .right{ opacity: 1; } .load-more{ position: relative; border:1px solid #212771; padding: 1%; margin:auto; display: block; text-align: center; margin-top: 2%; } .load-more:hover{ background: #212771; color: #fff; } .load-more span{ display: inline-block; background: url(/uploads/image/wimages/load-more.png); background-size: contain; margin-right: 20px; width: 48px; height: 48px; display: inline-block; vertical-align: middle; transition: all 0.5s; background-position: center; background-repeat: no-repeat; } .load-more:hover span{ background: url(/uploads/image/wimages/load-more2.png); transform: rotate(360deg); } .news-detail{ width: 1025px; margin:5% auto; } .news-detail .title{ text-align: center; } .news-detail .time{ margin: 2% 0 5% 0; text-align: center; opacity: .5; } .news-detail .time span{ margin:0 2%; } .news-detail .time .detail{ overflow: hidden; } .news-detail .time .detail img{ max-width:100% ; } .news-detail .back{ text-align: center; color: #fff; background: #212771; padding: 1%; display: block; } .news-detail .back span{ background: url(/uploads/image/wimages/back.png); display: inline-block; width: 25px; height: 17px; margin-right: 15px; } .news-detail .back:hover{ opacity: .8; } .news-detail .op{ margin: 10% 0 3% 0; line-height: 20px; } .news-detail .op a:hover{ color: #212771; } .news-detail .op a span{ margin-left: 10px; } .news-detail .op a span:nth-child(1){ margin: 0; margin-right: 10px; } .local{ padding: 1.5% 7.5%; background: #f0f0f0; line-height: 24px; } .local img{ float: left; margin-right: 15px; } .local a:hover{ color: #212771; } .zp{ position: relative; overflow: hidden; } .zp-local { text-align: center; padding: 24px; } .zp-local .box{ display: inline-block; overflow: hidden; box-shadow: 0 8px 30px 0 #666; position: relative; z-index: 2; background: #fff; } .zp-local .box h1{ float: left; line-height: 45px; padding: 50px; box-shadow: 0 0 15px 0 #666; } .zp-local .box p{ float: left; line-height: 45px; padding: 50px 20px; } .zp-local .box p:nth-child(2){ padding-left: 50px; } .zp-local .box p:last-child{ padding-right: 50px; } .zp-local .box p img{ vertical-align: top; margin-right: 12px; } .add{ position: relative; overflow: hidden; } .add .pic-w{ position: absolute; left: 0; top: 0; width: 66%; height: 100%; overflow: hidden; } .add .right{ float: right; width: 50%; padding: 5%; } .add .right h1{ margin-top: 15%; } .add .right h2{ color: #585858; margin-top: 8%; margin-bottom: 5%; } .add .right p{ margin-bottom: 3%; color: #585858; } .lx-bot{ background: #dfe0e8; overflow: hidden; padding: 10px 0; } .lx-bot .item{ display: flex; justify-content: space-between; max-width: 1200px; margin: 20px auto; } .lx-bot .tel-box{ text-align: center; width: 33.33333%; padding: 0 20px; /* border-right: 2px solid #fff; */ } .lx-bot .tel-box p{ margin-top: 3%; color: #4d4e50; } .lx-bot .tel-box img{ margin-bottom: 8%; } .lx-bot .add-box{ color: #4d4e50; width: 33.33333%; padding: 0 20px; max-width: 300px; } .lx-bot .add-box li{ margin-bottom: 2%; } .lx-bot .add-box li:last-child{ margin-bottom: 0; } .lx-bot .add-box span:nth-child(2){ float: right; } @media (max-width: 1000px){ .lx-bot .item{ display: block; } .lx-bot .tel-box, .lx-bot .add-box{ width: auto; margin: 36px auto; } .lx-bot .tel-box img{ margin-bottom: 0; } } .ypd-sy{ padding: 4.5% 0; } .ypd-sy .index-title{ color: #1b3084; } .gywm .main{ margin-top: 5%; } .gywm .main:after{ content: ""; clear: both; display: block; } .gywm .main .txt{ float: left; width: 51.5%; background: #2b4cd2; color: #fff; padding:3% 7%; margin-top: 5%; position: relative; } .gywm .main .txt:after{ content: ""; width: 257px; height: 268px; background: url(/uploads/image/wimages/gywmbg.png); position: absolute; bottom: 100%; left: 15%; transform: translatey(35px); } .gywm .main .txt .des{ line-height: 2; } .gywm .main .txt .line{ width: 100px; height: 1px; background: #fff; margin: 40px 0; } .gywm .main .txt h1{ font-size: 26px; } .gywm .main .pic-w{ float: left; width: 48.5%; } @media (max-width: 768px){ .gywm .main .txt, .gywm .main .pic-w{ float: none; width: auto; } .gywm .main .txt{ margin-top: 268px; margin-bottom: 20px; } } .gywm .main .pic-w img{ width: 100%; } .fz-bt{ margin-top: 5%; } .fz-bt .main{ text-align: center; position: relative; width: 900px; margin: auto; margin-top: 3%; } .fz-bt .main .txt{ text-align: left; position: absolute; left: 0; top: 30%; width: 60%; } .fz-bt .main .txt:nth-child(2){ transform: translatex(-60%); } .fz-bt .main .txt:nth-child(3){ transform: translatex(80%); text-align: right; top: 10%; width: 70%; } .fz-bt .main .txt:nth-child(4){ transform: translatex(70%); text-align: right; bottom: 10%; width: 70%; top: auto; } .fz-bt .main .txt .line{ width: 100%; height: 2px; background: #f7882c; margin: 10px 0; position: relative; } .fz-bt .main .txt .line:after{ content: ""; width: 20px; height: 115px; right: 0; top: 0; position: absolute; background: url(/uploads/image/wimages/lineyuan.png); margin-right: -10px; } .fz-bt .main .txt:nth-child(3) .line:after{ content: ""; width: 20px; height: 115px; left: 0; top: 0; position: absolute; background: url(/uploads/image/wimages/lineyuan.png); margin-left: -10px; } .fz-bt .main .txt:nth-child(4) .line:after{ content: ""; width: 20px; height: 115px; left: 0; top: 0; position: absolute; background: url(/uploads/image/wimages/lineyuan.png); margin-left: -10px; transform: translatey(-99%) rotate(180deg); } .fz-bt .main .txt h1{ margin-bottom: 10px; } .sy-three{ display: flex; justify-content: space-between; margin: 7%; border-top: 2px solid #cccccc; border-bottom: 2px solid #cccccc; } .sy-three .box{ width: 50%; text-align: center; position: relative; cursor: pointer; } .sy-three .box:last-child:after{ display: none; } .sy-three .box:after{ content: ""; height: 60px; width: 1px; background: #999999; position: absolute; right: 0; top: 50%; margin-top: -30px; z-index: 1; } .sy-three .box .top{ display: inline-block; padding: 40px; border-radius: 10px; transition: all 0.3s; position: relative; } .sy-three .box .top:after{ content: ""; position: absolute; left: 10px; right: 10px; bottom: 10px; top: 10px; border:1px solid #b1c3ed; border-radius: 10px; display: none; } .sy-three .box .top h1{ font-weight: bold; color: #212771; transition: all 0.3s; } .sy-three .box .top p{ margin: 10px 0; } .sy-three .box .top .jt{ position: relative; height: 25px; } .sy-three .box .top .jt:after{ content: ">"; position: absolute; font-family: simsun; font-size: 24px; top: 0; left: 50%; margin-left: -8px; transform: rotate(90deg); transition: all 0.3s; color: #212771; } .sy-three .box.on .top{ background: #4e6adb; color: #fff; } .sy-three .box.on .top h1{ color: #ffffff; } .sy-three .box.on .top .jt:after{ transform: rotate(-90deg); color: #fff; } .sy-three .box.on .top:after{ display: block; } .sy-three .box .txt{ position: absolute; width: 100%; left: 0; top: 101%; padding: 55px; text-align: left; line-height: 2; background: #2b4cd2; color: #fff; border-radius: 15px; z-index: 9; display: none; } .sy-three .box.on .txt{ display: block; } .sy-three .box .txt::after{ content: ""; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; border:1px solid #a3b7e9; border-radius: 15px; } .sy-three .box .txt::before{ content: ""; position: absolute; left: 15px; top: 0; z-index: 3; width: 119px; height: 106px; background: url(/uploads/image/wimages/cute.png); margin-top: -90px; } .sy-new{ margin-top: 10%; } .mana-team{ padding: 4.5% 7%; background: url(/uploads/image/wimages/teambg.png) left top no-repeat; overflow: hidden; padding-right: 0; } .mana-team .left{ width: 49%; float: left; padding-right: 8%; } .mana-team .left .title{ color: #1b3084; } .mana-team .left .title p{ margin-top: 10px; } .mana-team .left .des{ margin-top: 23%; line-height: 2; } .mana-team .left .bot{ margin-top: 12%; display: flex; justify-content: space-between; } .mana-team .left .bot .box{ line-height: 68px; } .mana-team .left .bot .box img{ vertical-align: top; margin-right: 15px; } .mana-team .right{ width: 50%; float: right; padding-right: 7%; position: relative; padding-top: 8%; } .mana-team .right .pic-w{ position: relative; z-index: 2; } .mana-team .right .pic-w .in{ position: relative; padding-bottom: 45%; overflow: hidden; z-index: 3; } .mana-team .right .pic-w::after{ position: absolute; content: ""; right: 0; top: 0; width: 100%; background: #2b4cd2; left: 30%; height: 150%; transform: translatey(-15%); } .mana-team .right::before{ content: ""; position: absolute; z-index: 1; width: 197px; height: 221px; background: url(/uploads/image/wimages/teamcute.png); right: 7%; top: 0; transform: translatey(-35%); } .gc-honor{ margin: 4.5% 0; padding:0 7%; } .gc-honor li{ width: 25%; float: left; text-align: center; margin-top: 5%; position: relative; display: inline-block; vertical-align: top; } .gc-honor .main{ overflow: hidden; } .gc-honor li .num{ width: 56px; height: 56px; border-radius: 100%; background: #212771; color: #212771; text-align: center; line-height: 56px; margin:auto; margin-bottom: 30px; box-shadow: 0 8px 15px 0 #d8e4f1; /* display: none; */ } .gc-honor li p{ font-size: 12px; color: #797979; margin-top: 10px; transform: scale(0.8); height: 40px; word-break: break-word; } .gc-honor li:after{ content: ""; position: absolute; width: 1px; top: 50%; right: 0; height: 60%; transform: translatex(-50%); background: #999999; } .gc-honor li:nth-child(4n):after{ display: none; } .serve-sys .bot:after{ content: ""; display: block; clear: both; } #product .product_list ul.list li .imgwrap .logowrap{ display: none; } #product .product_list ul.list li .conwrap p{ padding-left: 15px; height: 40px; line-height: 20px; } @media screen and (max-width: 1650px){ .serve-sys .main li .six ul p{ height: 40px; line-height: 20px; } .fz-bt .main img{ width: 600px; } .fz-bt .main .txt:nth-child(3){ width: 55%; transform: translatex(95%); } .fz-bt .main .txt:nth-child(2){ width: 50%; transform: translatex(-35%); } .fz-bt .main .txt:nth-child(4){ transform: translatex(75%); width: 60%; } } @media screen and (max-width: 1500px){ .serve-sys .main li .left{ padding: 5%; } .serve-solu .main li{ width: 23%; } } @media screen and (max-width: 1400px){ .about-brand ul li .left{ width: 25%; padding-right: 5%; } .about-brand ul li .right{ width: 75%; } .about-brand ul li .right{ padding-bottom: 10%; } } @media screen and (max-width: 1024px) { .index-about .main .pic-w{ width: 100%; position: relative; overflow: hidden; padding-bottom: 40%; } .index-about .main .right{ width: 100%; } .index-about .main .right .nav-list li{ width: 50%; border-bottom: 1px solid #ccc; } .index-about .main .right .nav-list li:last-child{ border-bottom: 1px solid #ccc; } .index-about .main .right{ border-bottom: none; } .index-title .line:after{ width: 200px; } .index-title { margin:8% 0 3% 0; } .index-title img{ display: none; } .index-news .main li{ width: 90%; margin:auto; float: none; margin-bottom: 5%; } .index-news .main li:nth-child(3){ float: none; margin: 0 auto; } .index-news .main li .txt .left p{ font-size: 12px; height: 40px; line-height: 20px; } .index-news .main li .txt .left{ padding: 5%; } .index-news .main li .txt .right{ padding: 5%; } .index-news .main li .left h1{ font-size: 16px; } .index-part .des{ padding:0 3%; line-height: 1.5; } .index-part .main li{ width: 90%; margin: 0 auto; float: none !important; margin-top: 5%; } .index-part .main li .txt h1{ font-size: 16px; margin-bottom: 5px; } .index-part .main li .txt p{ font-size: 12px; } .index-part .main li span{ height: 26px; width: 26px; line-height: 26px; font-size: 12px; } .index-part .main li .href{ margin: 7.5%; } .index-part .main li font{ line-height: 26px; font-size: 12px; } .index-pro{ background: none; color: #000; padding-top: 0; } .index-pro .index-title{ color: #000; } .index-pro .main{ width: 90%; margin: 0 auto; } .index-pro .main .left{ width: 100%; float: none; } .index-pro .main .pic-w,.index-pro .main .right li .pic-w{ padding-bottom: 60%; } .index-pro .main .right li{ margin: 0; margin-top: 5%; width: 100%; } .index-pro .main .right{ width: 100%; float: none; } .serve-sys .main .pic-w{ width: 100%; position: relative; padding-bottom: 40%; } .serve-sys .main li .left{ width: 100%; } .serve-sys .main li .tel{ background-size: 20px; font-size: 14px; padding-left: 40px; } .serve-sys .main li .line2,.serve-sys .main li .line{ margin: 3% 0; } .serve-sys .main li dt font{ margin-right: 20px; } .serve-sys .bot ul{ display: block; padding: 0; } .serve-sys .bot ul li{ width: 50%; float: left; text-align: center; padding: 5%; border:1px solid #ccc; } .serve-sys .bot ul li:last-child{ border:1px solid #ccc; } .serve-sys .bot ul li.line{ display: none; } .serve-sys .bot ul li img{ height: 30px; float: none; display: block; margin:auto; margin-bottom: 0; } .serve-sys .bot ul li .txt{ float: none; width: 100%; text-align: center; padding: 0; margin: 0; margin-top: 5px; } .serve-sys .bot ul li h1{ margin-bottom: 0; } .serve-solu .main ul{ display: block; } .serve-solu .main li{ width: 90%; float: none; margin:auto; margin-bottom: 5%; } .serve-solu .main li h1{ margin: 3% 0; } .serve-work .main .xm-list li{ width: 50%; float: left; border-bottom: 1px solid #212771; } .serve-work .main .xm-list ul{ display: block; } .serve-work .main .xm-list ul span{ display: none; } .serve-work .main .xm-list{ border-bottom: none; } .serve-work .nav-list li,.serve-sys .nav-list li{ width: 33%; } } @media (max-width: 1300px){ .fz-bt .main{ width: auto; margin: 0 7%; } .fz-bt .main .txt .line, .fz-bt .main img{ display: none; } .fz-bt .main .txt{ text-align: center!important; position: static; margin: 36px auto; width: auto!important; transform: none!important; } } @media (max-width: 767px){ .add .right{ float: none; width: auto; } .sy-three{ display: block; } .sy-three .box{ width: auto; } .sy-three .box .txt{ position: relative; display: block; margin-bottom: 36px; } }