@charset "utf-8"; @font-face { font-family: 'Poppins-Regular'; src: url('../fonts/Poppins-Regular.eot'); src: url('../fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Poppins-Regular.woff2') format('woff2'), url('../fonts/Poppins-Regular.woff') format('woff'), url('../fonts/Poppins-Regular.ttf') format('truetype'); } * { margin: 0; padding: 0; line-height: 100%; } body { font-family: 'Poppins-Regular', "Microsoft YaHei", "微软雅黑", Arial; color: #000; } img { width: 100%; height: auto; } a { text-decoration: none; color: #333; } a:link { text-decoration: none; } a:hover { text-decoration: none; color: #333; } a:active { text-decoration: none; } ul, dl, p, address { margin-bottom: 0; } ul li { list-style-type: none; } input:focus, button:focus, textarea:focus { outline: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } @media (min-width: 768px) { html { font-size: 43.75%; } .cell-sm { display: table-cell !important; } .inline-sm { display: inline !important; } } @media (min-width: 992px) { html { font-size: 50%; } .cell-md { display: table-cell !important; } .inline-md { display: inline !important; } } @media (min-width: 1200px) { html { font-size: 62.5%; } .cell-lg { display: table-cell !important; } .inline-lg { display: inline !important; } } .fr { float: right; } .fl { float: left; } .fn { float: none; } .clear { clear: both; } .header .navbar { margin-bottom: 0; border-bottom: 0; padding-top: 15px; padding-bottom: 22px; } .header .navbar .container { width: 1380px; max-width: 100%; } .header .navbar .container .navbar-header { float: left; max-width: 376px; } .header .navbar .container .navbar-r { float: right; font-size: 1.6rem; color: #666; font-size: 0; padding-top: 14px; } .header .navbar .container .navbar-r .lang { float: right; padding-left: 15px; } .header .navbar .container .navbar-r .lang .dropdown button { background-color: transparent; background: url(../images/next.png) no-repeat right center; text-transform: uppercase; padding-right: 25px; } .header .navbar .container .navbar-r .header-ss-pc { float: right; position: relative; padding-right: 15px; } .header .navbar .container .navbar-r .header-ss-pc img { cursor: pointer; } .header .navbar .container .navbar-r .header-ss-pc .search-ss-pc { display: none; position: absolute; right: 0px; top: 30px; z-index: 999; width: 300px; background-color: #FFF; border-top: 3px solid #e7282e; -webkit-box-shadow: 0 3px 10px #929292; box-shadow: 0 3px 10px #929292; } .header .navbar .container .navbar-r .header-ss-pc .search-ss-pc-form-div { width: 100%; } .header .navbar .container .navbar-r .header-ss-pc .search-ss-pc-text input { display: block; width: 100%; height: 52px; background-color: #FFF; font-size: 14px; border: none; padding: 0 15px; } .header .navbar .container .navbar-r .header-ss-pc .search-ss-pc-submit { padding-right: 13px; } .header .navbar .container .navbar-r .header-ss-pc .search-ss-pc-submit input { width: 58px; height: 32px; font-size: 14px; color: #FFF; background-color: #e7282e; border: none; cursor: pointer; -webkit-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; } .header .navbar .container .navbar-r .header-ss-pc .search-ss-pc-submit input:hover { background-color: #e7282e; } .header .navbar .container .navbar-r .header-ss-pc .header-ss-pc-bxa { border: 1px solid #EAEAEA; width: 34px; height: 34px; line-height: 32px; text-align: center; border-radius: 100px; overflow: hidden; margin-left: 20px; } .header .navbar .container .navbar-r .header-ss-pc .header-ss-pc-bxa a { width: 100%; height: 100%; display: block; color: #049039; } .header .navbar .container .navbar-r .box-flex { -moz-box-flex: 1; -webkit-box-flex: 1; -o-box-flex: 1; -ms-flex: 1; box-flex: 1; } .header .navbar .container .navbar-r .box-align-center { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; box-align: center; } .header .navbar .container .navbar-r .display-box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .header .navbar .container .nav-main { text-align: center; padding-top: 14px; float: right; margin-right: 35px; } .header .navbar .container .nav-main .mainnav ul { display: block; white-space: nowrap; } .header .navbar .container .nav-main .mainnav ul li { padding-left: 30px; padding-right: 30px; position: relative; } .header .navbar .container .nav-main .mainnav ul li .one-title { position: relative; } .header .navbar .container .nav-main .mainnav ul li .one-title a { font-size: 1.6rem; color: #555555; text-transform: capitalize; line-height: 181%; } .header .navbar .container .nav-main .mainnav ul li .one-title a::after { content: ""; display: block; height: 2px; left: 0; position: relative; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; width: 100%; border-bottom: 2px solid #e7282e; bottom: -3px; } .header .navbar .container .nav-main .mainnav ul li .one-title em { display: none; } .header .navbar .container .nav-main .mainnav ul li .sub-nav { background-color: transparent; display: block; /* min-width: 116%; */ top: 30px; /* padding-left: 30px; */ /* padding-right: 30px; */ padding-bottom: 20px; left: 0; position: absolute; z-index: 10; min-width: 100%; padding-top: 30px; /* left: -30px; */ } .header .navbar .container .nav-main .mainnav ul li .sub-nav a { display: block; opacity: 0; padding: 5px 0; -webkit-transform: translateY(70%); -ms-transform: translateY(70%); transform: translateY(70%); font-size: 1.6rem; text-align: left; text-align: center; line-height: 250%; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a::after { content: ""; display: block; height: 2px; left: 0; position: relative; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; width: 100%; border-bottom: 2px solid #e7282e; bottom: -3px; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:hover { color: #4c4c4c; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:hover::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:nth-child(1) { -webkit-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.02s; -o-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.02s; transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.02s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:nth-child(2) { -webkit-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.04s; -o-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.04s; transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.04s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:nth-child(3) { -webkit-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.06s; -o-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.06s; transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.06s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:nth-child(4) { -webkit-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.08s; -o-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.08s; transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.08s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:nth-child(5) { -webkit-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.1s; -o-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.1s; transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.1s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:nth-child(6) { -webkit-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.12s; -o-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.12s; transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.12s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:nth-child(7) { -webkit-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.14s; -o-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.14s; transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.14s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:nth-child(8) { -webkit-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.16s; -o-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.16s; transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.16s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:nth-child(9) { -webkit-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.18s; -o-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.18s; transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.18s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a:nth-child(10) { -webkit-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.2s; -o-transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.2s; transition: 0.2s cubic-bezier(0.14, 1, 0.34, 1) 0.2s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show { opacity: 1; background-color: rgba(255, 255, 255, 0.6); } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show a { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show a:nth-child(1) { -webkit-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.1s; -o-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.1s; transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.1s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show a:nth-child(2) { -webkit-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.2s; -o-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.2s; transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.2s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show a:nth-child(3) { -webkit-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.3s; -o-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.3s; transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.3s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show a:nth-child(4) { -webkit-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.4s; -o-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.4s; transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.4s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show a:nth-child(5) { -webkit-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.5s; -o-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.5s; transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.5s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show a:nth-child(6) { -webkit-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.6s; -o-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.6s; transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.6s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show a:nth-child(7) { -webkit-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.7s; -o-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.7s; transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.7s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show a:nth-child(8) { -webkit-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.8s; -o-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.8s; transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.8s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show a:nth-child(9) { -webkit-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.95s; -o-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.95s; transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 0.95s; } .header .navbar .container .nav-main .mainnav ul li .sub-nav.show a:nth-child(10) { -webkit-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 1s; -o-transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 1s; transition: 0.8s cubic-bezier(0.14, 1, 0.34, 1) 1s; } .header .navbar .container .nav-main .mainnav ul li:hover .one-title a::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .main { position: relative; z-index: 2; font-size: 0; } .main .container-fluid { width: 1850px; max-width: 100%; } .main .m1 { padding-top: 3.38%; /* padding-bottom: 3.38%; */ } .main .m1 ul { overflow: hidden; } .main .m1 ul li { margin-bottom: 15px; } .main .m1 ul li a { display: block; } .main .m1 ul li a .pic { overflow: hidden; } .main .m1 ul li a .pic img { -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .main .m1 ul li a .txt { margin-top: 30px; font-size: 2rem; color: #161616; text-align: center; } .main .m1 ul li:hover a .pic img { -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); } .main .m2 { padding-top: 6.666%; padding-bottom: 6.666%; background: url(../images/index_45.jpg) no-repeat center center; background-size: 100% 100%; } .main .m2 .container { width: 1380px; max-width: 100%; } .main .m2 .pic, .main .m2 .txt { display: inline-block; vertical-align: middle; float: none; } .main .m2 .txt h1 { position: relative; font-size: 3.6rem; color: #323031; padding-bottom: 5%; margin-bottom: 4%; } .main .m2 .txt h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 55px; height: 3px; background-color: #e7282e; } .main .m2 .txt p { font-size: 1.4rem; color: #888888; margin-bottom: 5%; } .main .m2 .txt img { width: auto; max-width: 100%; } .main .m3 { padding-top: 30px; overflow: hidden; } .main .m3 .m_item12 { overflow: hidden; } .main .m3 .m_item34 { background-color: #f1f2f4; overflow: hidden; } .main .m3 .m_item1 { padding: 2.5% 4%; } .main .m3 .m_item1 .m_title { text-align: left; } .main .m3 .m_item1 .m_title h2::after { margin-left: 0; } .main .m3 .m_item1 p { font-size: 1.4rem; color: #888888; line-height: 200%; } .main .m3 .m_item1 ul { overflow: hidden; margin-top: 8%; } .main .m3 .m_item1 ul li { float: left; margin-right: 8%; } .main .m3 .m_item1 ul li h1 { font-size: 4rem; color: #e7282e; } .main .m3 .m_item1 ul li p { font-size: 1.4rem; color: #666666; margin-top: 10px; line-height: 100%; } .main .m3 .m_item1 a { display: block; width: 170px; height: 50px; line-height: 50px; text-align: center; border: 2px solid #e7282e; font-size: 1.6rem; color: #e7282e; margin-top: 10%; } .main .m3 .m_item1 a:hover { background-color: #e7282e; color: #fff; } .main .m3 .m_item2 { padding-left: 0; padding-right: 0; } .videolist{overflow:hidden;} .videolist img{transition:all 0.5s;} .videolist:hover img{transform:scale(1.1);transition:all 0.5s;} .main .m3 .m_item3 { padding-left: 0; padding-right: 0; } .main .m3 .m_item4 { padding: 4.5% 5%; } .main .m3 .m_item4 .m_title { text-align: left; } .main .m3 .m_item4 .m_title h1 { text-align: right; } .main .m3 .m_item4 .m_title h2 { margin-top: 0; } .main .m3 .m_item4 .m_title h2::after { margin-left: 0; } .main .m3 .m_item4 .m_title h2, .main .m3 .m_item4 .m_title::after { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .main .m3 .m_item4 ul li { margin-top: 8%; } .main .m3 .m_item4 ul li a .pic { width: 22%; float: left; } .main .m3 .m_item4 ul li a .pic img { width: auto; max-width: 100%; } .main .m3 .m_item4 ul li a .txt { width: 78%; float: left; } .main .m3 .m_item4 ul li a .txt h1 { font-size: 1.8rem; color: #4d4d4d; } .main .m3 .m_item4 ul li a .txt p { font-size: 1.4rem; color: #888888; line-height: 150%; max-width: 240px; margin-top: 15px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .main .m4 { padding-top: 6.666%; } .main .m4 .m_title h2 { margin-top: 0; } .main .m4 ul { background-color: #f1f2f4; overflow: hidden; } .main .m4 ul li { padding-left: 0; padding-right: 0; } .main .m4 ul li.txt .txt_wrapper { padding-top: 30%; padding-left: 15%; } .main .m4 ul li.txt .txt_wrapper h1 { font-size: 1.6rem; color: #323031; margin-bottom: 15px; } .main .m4 ul li.txt .txt_wrapper h1::after { content: ''; display: block; width: 20px; height: 3px; background-color: #e7282e; margin-top: 15px; } .main .m4 ul li.txt .txt_wrapper p { font-size: 1.4rem; color: #555555; line-height: 200%; margin-bottom: 5%; } .main .m4 ul li.txt .txt_wrapper a { display: block; width: 140px; height: 40px; line-height: 40px; font-size: 1.4rem; text-align: center; border: 1px solid #e7282e; color: #e7282e; } .main .m4 ul li.txt .txt_wrapper a:hover { background-color: #e7282e; color: #fff; } .main .m4 ul li:nth-child(3n+1) { clear: left; } .main .m5 { position: relative; padding-top: 6.666%; padding-bottom: 4%; background: url(../images/index_45.jpg) no-repeat center center; background-size: 100% 100%; } .main .m5 .container { width: 1540px; max-width: 100%; } .main .m5 .m_con { position: relative; padding-top: 15px; } .main .m5 .m_con .center-img { position: absolute; left: 50%; top: 15px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .main .m5 .m_con ul li { margin-bottom: 4.4%; } .main .m5 .m_con ul li a { display: block; background-color: #fff; height: 170px; border-radius: 3px; cursor: auto; text-align: right; padding: 8.5%; -webkit-box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.1); } .main .m5 .m_con ul li a .item_wrapper { position: relative; padding-right: 70px; } .main .m5 .m_con ul li a .item_wrapper h1 { position: relative; font-size: 1.6rem; font-weight: bold; padding-bottom: 15px; margin-bottom: 15px; } .main .m5 .m_con ul li a .item_wrapper h1::after { content: ''; position: absolute; bottom: 0; right: 0; display: block; width: 17px; height: 2px; background-color: #e7282e; } .main .m5 .m_con ul li a .item_wrapper p { font-size: 1.3rem; color: #666666; line-height: 150%; } .main .m5 .m_con ul li a .item_wrapper::after { content: ''; position: absolute; right: 0; top: 0; width: 44px; height: 44px; background-color: #e7282e; background-repeat: no-repeat; background-position: center center; border-radius: 3px; } .main .m5 .m_con ul li:nth-child(even) a { text-align: left; } .main .m5 .m_con ul li:nth-child(even) a .item_wrapper { padding-left: 70px; padding-right: 0; } .main .m5 .m_con ul li:nth-child(even) a .item_wrapper h1::after { content: ''; left: 0; right: auto; } .main .m5 .m_con ul li:nth-child(even) a .item_wrapper:after { left: 0; right: auto; } .main .m5 .m_con ul li:nth-child(1) a .item_wrapper::after { background-image: url(../images/interface.png); } .main .m5 .m_con ul li:nth-child(2) a .item_wrapper::after { background-image: url(../images/technology.png); } .main .m5 .m_con ul li:nth-child(3) a .item_wrapper::after { background-image: url(../images/set.png); } .main .m5 .m_con ul li:nth-child(4) a .item_wrapper::after { background-image: url(../images/multimedia.png); } .main .m5 .m_con ul li:nth-child(5) a .item_wrapper::after { background-image: url(../images/bars.png); } .main .m5 .m_con ul li:nth-child(6) a .item_wrapper::after { background-image: url(../images/nature.png); } .main .m5 .m_con ul::after { content: ''; clear: both; } .main .m5::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 6px; height: 97px; background: url(../images/circle.png) no-repeat center center; background-size: 100% 100%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .main .m6 { padding-top: 6.666%; padding-bottom: 6.666%; background-color: #f3f6f5; } .main .m6 .m_title h2 { margin-top: 0; } .main .m6 ul { margin-left: -1.3%; margin-right: -1.3%; } .main .m6 ul li { padding-left: 1.3%; padding-right: 1.3%; } .main .m6 ul li .txt { background-color: #fff; padding: 7%; border: 1px solid #e7e7e7; } .main .m6 ul li .txt h1 { font-size: 1.8rem; height: 50px; line-height: 25px; color: #323031; } .main .m6 ul li .txt a { display: block; font-size: 1.4rem; color: #e8252e; margin-top: 8%; } .main .m6 ul li .txt a:hover { text-decoration: underline; } .main .m6 ul::after { content: ''; clear: both; } .main .m_title { text-align: center; margin-bottom: 3%; } .main .m_title h1 { font-size: 6rem; text-transform: uppercase; color: #323031; opacity: 0.1; font-weight: bold; } .main .m_title h2 { font-size: 3.6rem; color: #323031; margin-top: -25px; } .main .m_title h2::after { content: ''; display: block; width: 55px; height: 3px; background-color: #e7282e; margin-top: 15px; margin-left: auto; margin-right: auto; } .main .m_title p { font-size: 1.4rem; color: #888888; margin-top: 20px; } .videoed { display: none; width: 50px; height: 50px; position: absolute; left: 45%; top: 45%; z-index: 99; border-radius: 100%; } .videos { display: none; border: 1px solid #080808; position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 100; width: 640px; height: 360px; max-width: 100%; } .vclose { position: absolute; right: 1%; top: 1%; border-radius: 100%; cursor: pointer; width: auto; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999; font-size: 1.4rem; } input:-moz-placeholder, textarea:-moz-placeholder { color: #999; font-size: 1.4rem; } input::-moz-placeholder, textarea::-moz-placeholder { color: #999; font-size: 1.4rem; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999; font-size: 1.4rem; } .ban { position: relative; width: 100%; text-align: center; } .ban.banpic ul { overflow: hidden; } .ban.banpic ul li { padding-left: 0; padding-right: 0; } .ban.banpic ul li a { position: relative; display: block; } .ban.banpic ul li a .mask .delay { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .ban.banpic ul li a .mask .txt { position: absolute; left: 50%; top: 50%; z-index: 3; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ban.banpic ul li a .mask .txt .txt_box { position: absolute; left: 50%; top: 50%; z-index: 4; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ban.banpic ul li a .mask .txt .txt_box .icon img { width: auto; max-width: 100%; } .ban.banpic ul li a .mask .txt .txt_box .title { font-size: 2.6rem; color: #fff; white-space: nowrap; margin-top: 8%; } .ban.banpic ul li:hover a .mask .delay { background: rgba(0, 0, 0, 0); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .ban.banpic ul li:hover a .mask .txt { margin-top: -5%; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .ban.banpic::after { display: none; } .ban .txt { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -80%); -ms-transform: translate(-50%, -80%); transform: translate(-50%, -80%); text-align: center; } .ban .txt h1 { font-size: 4rem; color: #fff; text-transform: uppercase; font-weight: bold; margin-bottom: 9%; } .ban .txt p { font-size: 2.4rem; color: #fff; text-transform: uppercase; font-weight: bold; } @-webkit-keyframes move { 0% { bottom: 10%; } 50% { bottom: 8%; } 100% { bottom: 10%; } } @keyframes move { 0% { bottom: 10%; } 50% { bottom: 8%; } 100% { bottom: 10%; } } .path { padding: 1.8% 0; background-color: #fff; } .path ul { font-size: 0; text-align: center; } .path ul li { display: inline-block; vertical-align: middle; } .path ul li a { font-size: 1.4rem; color: #555555; padding-left: 40px; padding-right: 40px; text-transform: capitalize; } .path ul li.active a { color: #e7282e; } .path ul li:hover a { color: #e7282e; } .path.logoPath ul li a { padding-left: 50px; background-repeat: no-repeat; background-position: left center; background-size: auto 100%; line-height: 250%; } .path.logoPath ul li:nth-child(1) { background-image: url(../images/sofa.png); } .path.logoPath ul li:nth-child(2) { background-image: url(../images/movie-seat.png); } .path.logoPath ul li:nth-child(3) { background-image: url(../images/product.png); } .path.logoPath ul li.active:nth-child(1) { background-image: url(../images/sofa1.png); } .path.logoPath ul li.active:nth-child(2) { background-image: url(../images/movie-seat1.png); } .path.logoPath ul li.active:nth-child(3) { background-image: url(../images/product2.png); } .pages .pagelist { text-align: center; margin-top: 5%; } .pages .pagelist li { display: inline-block; height: 35px; line-height: 35px; padding: 0 15px; border-radius: 50%; font-size: 1.4rem !important; color: #717171; border: 1px solid #efefef; text-align: center; cursor: pointer; margin: 0 7px; } .pages .pagelist li a { height: 35px; line-height: 35px; font-size: 1.4rem; color: #6d6d6d; } .pages .pagelist li.active { background-color: #e7282e; border: 0; color: #fff; cursor: none; } .pages .pagelist li.active a { background-color: #e7282e; border: 0; color: #fff; cursor: none; } .my-map#container, .my-map#container2 { width: 100%; height: 450px; position: static; } .my-map#container img, .my-map#container2 img { width: auto !important; } .my-map#container .amap-icon img, .my-map#container2 .amap-icon img { width: 100% !important; } .my-map#container .icon, .my-map#container2 .icon { background: url(http://lbs.amap.com/console/public/show/marker.png) no-repeat; } .my-map#container .icon-cir, .my-map#container2 .icon-cir { height: 31px; width: 28px; } .my-map#container .icon-cir-red, .my-map#container2 .icon-cir-red { background-position: -11px -5px; } .amap-container { height: 100%; } .page.about .p1 { padding-top: 4.6875%; padding-bottom: 4.6875%; } .page.about .p1 .pic, .page.about .p1 .txt { padding-left: 0; padding-right: 0; } .page.about .p1 .pic { text-align: right; } .page.about .p1 .pic img { width: auto; max-width: 100%; } .page.about .p1 .txt h1 { font-size: 3.2rem; color: #525252; margin-bottom: 5%; } .page.about .p1 .txt p { font-size: 1.4rem; color: #666; line-height: 200%; } .page.about .p2 { padding-top: 4.6875%; padding-bottom: 4.6875%; background: url(../images/about_12.jpg); } .page.about .p2 ul li { text-align: center; } .page.about .p2 ul li .item_wrapper { border-right: 1px solid #e4e4e4; } .page.about .p2 ul li .item_wrapper h1 { font-size: 5rem; font-weight: bold; color: #e7282e; margin-bottom: 5px; } .page.about .p2 ul li .item_wrapper p { font-size: 1.4rem; color: #666666; } .page.about .p2 ul li:last-child .item_wrapper { border-right: 0; } .page.about .p3 { padding-top: 4.6875%; padding-bottom: 4.6875%; background-color: #f3f3f3; } .page.about .p3 h1 { font-size: 3.2rem; color: #525252; text-align: center; margin-bottom: 5%; } .page.about .p3 .swiper-wrappers { position: relative; } .page.about .p3 .swiper-wrappers .swiper-button-prev, .page.about .p3 .swiper-wrappers .swiper-button-next { width: 13px; height: 25px; background-size: 13px 25px; opacity: 0.8; } .page.about .p3 .swiper-wrappers .swiper-button-prev:focus, .page.about .p3 .swiper-wrappers .swiper-button-next:focus { outline: 0; } .page.about .p3 .swiper-wrappers .swiper-button-prev:hover, .page.about .p3 .swiper-wrappers .swiper-button-next:hover { opacity: 1; } .page.about .p3 .swiper-wrappers .swiper-button-prev { background-image: url(../images/left.png); left: -5%; } .page.about .p3 .swiper-wrappers .swiper-button-next { background-image: url(../images/right.png); right: -5%; } .page.about .p4 { padding-top: 4.6875%; padding-bottom: 4.6875%; } .page.about .p4 h1 { font-size: 3.2rem; color: #525252; text-align: center; margin-bottom: 5%; } .page.about .p4 .con .apple-retail { margin: 30px 0; } .page.about .p4 .con .swiper-slide { text-align: center; width: 950px; opacity: 0.7; } .page.about .p4 .con .swiper-slide.swiper-slide-active { opacity: 1; } .page.about .p4 .con .inner figure { width: 100%; } .page.about .p4 .con .inner figure img { width: 100%; } .page.about .p4 .con .gallery-item-desc { width: 100%; text-align: left; opacity: 0; -webkit-transition-duration: 1.2s; -o-transition-duration: 1.2s; transition-duration: 1.2s; padding-top: 5%; font-size: 0; } .page.about .p4 .con .gallery-item-desc .txt { display: inline-block; vertical-align: middle; width: calc(100% - 100px); padding-right: 8%; } .page.about .p4 .con .gallery-item-desc .txt h3 { font-size: 3rem; color: #070707; font-weight: normal; margin-bottom: 30px; } .page.about .p4 .con .gallery-item-desc .txt p { font-size: 1.4rem; color: #6a6a6a; line-height: 170%; } .page.about .p4 .con .gallery-item-desc .more { display: inline-block; vertical-align: middle; width: 100px; text-align: center; font-size: 4.5rem; } .page.about .p4 .con .gallery-item-desc .more a { display: block; width: 100px; height: 100px; line-height: 100px; background-color: #e7282e; border-radius: 8px; border: 1px solid #e7282e; } .page.about .p4 .con .gallery-item-desc .more a:hover { background-color: transparent; } .page.about .p4 .con .gallery-item-desc .more a:hover span { color: #e7282e; } .page.about .p4 .con .gallery-item-desc .more span { color: #fff; } .page.about .p4 .con .init .gallery-item-desc { opacity: 1; } .page.about .p4 .con .gallery-item-desc h3 { line-height: 1.16667; font-weight: 600; letter-spacing: .009em; color: #111; font-size: 20px; } .page.about .p4 .con .gallery-item-desc p { margin-top: 1em; color: #333; font-size: 15px; } .page.about .p4 .con .swiper-slide-prev .gallery-item-desc { -webkit-transform: translateX(-70px); -ms-transform: translateX(-70px); transform: translateX(-70px); } .page.about .p4 .con .swiper-slide-next .gallery-item-desc { -webkit-transform: translateX(70px); -ms-transform: translateX(70px); transform: translateX(70px); } .page.about .p4 .con .swiper-slide-active .gallery-item-desc { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } @media only screen and (max-width: 1068px) { .page.about .p4 .con .swiper-slide { padding: 0 calc(-71.4vw); width: 576px; } .page.about .p4 .con .gallery-item-desc { padding-top: 41px; } } @media only screen and (max-width: 735px) { .page.about .p4 .con .swiper-slide { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); padding: 0; width: 85vw; margin: 0 0; min-width: 272px; } .page.about .p4 .con .swiper-slide-active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .page.about .p4 .con .gallery-item-desc { padding-top: 26px; width: 90%; } } .page.about .p4 .con .swiper-button-next, .page.about .p4 .con .swiper-button-prev { width: 68px; height: 68px; border-radius: 50%; z-index: 999; margin-top: 0; top: 38%; background-size: 68px 68px; opacity: 0.6; } .page.about .p4 .con .swiper-button-next:hover, .page.about .p4 .con .swiper-button-prev:hover { opacity: 1; } .page.about .p4 .con .swiper-button-prev { left: 10%; background-image: url(../images/arrow.png); } .page.about .p4 .con .swiper-button-next { right: 10%; background-image: url(../images/arrow2.png); } .page.about .p4 .con .mouse-hover .swiper-button-next, .page.about .p4 .con .mouse-hover .swiper-button-prev { opacity: 1; } .page.about .p4 .con .swiper-button-next:hover, .page.about .p4 .con .swiper-button-prev:hover { background-color: rgba(210, 210, 210, 0.8); } .page.about .p4 .con .swiper-container .swiper-button-next.swiper-button-disabled, .page.about .p4 .con .swiper-container .swiper-button-prev.swiper-button-disabled { opacity: 0; } .page.about .p5 { padding-bottom: 4.6875%; } .page.about .p5 h1 { font-size: 3.2rem; color: #525252; text-align: left; margin-bottom: 1%; } .page.about .p5 ul li { margin-bottom: 5%; } .page.about .p5 ul li .cc1 { position: relative; overflow: hidden; } .page.about .p5 ul li .cc1 .pic { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 46.666%; } .page.about .p5 ul li .cc1 .txt { width: 60%; margin: 0 0 0 auto; padding-top: 7%; padding-bottom: 7%; padding-left: 12%; background: url(../images/about_12.jpg); } .page.about .p5 ul li .cc1 .txt h1 { font-size: 2.4rem; color: #e7282e; margin-bottom: 4%; } .page.about .p5 ul li .cc1 .txt p { font-size: 1.4rem; color: #666666; line-height: 220%; } .page.about .p5 ul li .cc2 { margin-top: 3%; } .page.about .p5 ul li .cc2 p { width: 100%; font-size: 1.4rem; color: #666666; line-height: 220%; } .page.about .p5 ul li:nth-child(even) .cc1 .pic { right: 0; left: auto; } .page.about .p5 ul li:nth-child(even) .cc1 .txt { padding-left: 4%; padding-right: 12%; margin: 0 auto 0 0; } .page.product { padding-top: 2.4%; padding-bottom: 4%; } .page.product .container { overflow: hidden; } .page.product .p_con { overflow: hidden; } .page.product .p_con .list>ul { overflow: hidden; margin-left: -10px; margin-right: -10px; } .page.product .p_con .list>ul li { padding-left: 10px; padding-right: 10px; text-align: center; margin-bottom: 20px; } .page.product .p_con .list>ul li .txt { padding-top: 15px; padding-bottom: 15px; } .page.product .p_con .list>ul li:hover .txt { color: #e7282e; } .page.product2 { padding-top: 2.4%; padding-bottom: 4%; } .page.product2 .p1 .swiper-wrappers { position: relative; } .page.product2 .p1 .swiper-wrappers .swiper-slide a img { -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); opacity: 0.6; } .page.product2 .p1 .swiper-wrappers .swiper-slide.swiper-slide-next a img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .page.product2 .p1 .swiper-wrappers .swiper-slide.swiper-slide-active a img { -webkit-transform: scale(0.75) translateX(17%); -ms-transform: scale(0.75) translateX(17%); transform: scale(0.75) translateX(17%); } .page.product2 .p1 .swiper-wrappers .swiper-slide.swiper-slide-next + .swiper-slide a img { -webkit-transform: scale(0.75) translateX(-17%); -ms-transform: scale(0.75) translateX(-17%); transform: scale(0.75) translateX(-17%); } .page.product2 .p1 .swiper-wrappers .swiper-button-prev { width: 70px; height: 70px; background: url(../images/p_arrow_left.png) no-repeat center center; background-size: 70px 70px; left: 15%; } .page.product2 .p1 .swiper-wrappers .swiper-button-prev:focus { outline: 0; } .page.product2 .p1 .swiper-wrappers .swiper-button-prev:hover { background-image: url(../images/p_arrow_left2.png); } .page.product2 .p1 .swiper-wrappers .swiper-button-next { width: 70px; height: 70px; background: url(../images/p_arrow_right.png) no-repeat center center; background-size: 70px 70px; right: 15%; } .page.product2 .p1 .swiper-wrappers .swiper-button-next:focus { outline: 0; } .page.product2 .p1 .swiper-wrappers .swiper-button-next:hover { background-image: url(../images/p_arrow_right2.png); } .page.product2 .p2 { margin-top: 5%; } .page.product2 .p2 h1 { position: relative; font-size: 2.4rem; color: #1e1e1e; padding-bottom: 4%; padding-left: 5%; border-bottom: 2px solid #eeeeee; margin-bottom: 3%; } .page.product2 .p2 h1::after { content: ''; position: absolute; left: 2%; top: 10px; width: 8px; height: 8px; background-color: #e7282e; border-radius: 50%; } .page.product2 .p2 p { font-size: 1.4rem; line-height: 180%; color: #666666; padding-left: 3%; padding-right: 3%; } .page.product2 .p2 p img{width:auto;} .page.news { padding-top: 2.4%; padding-bottom: 4%; } .page.news .p_con { overflow: hidden; } .page.news .p_con .aside_con ul li { border: 1px solid #e7e7e7; font-size: 0; margin-bottom: 15px; } .page.news .p_con .aside_con ul li .pic { display: inline-block; vertical-align: middle; width: 25%; } .page.news .p_con .aside_con ul li .txt { display: inline-block; vertical-align: middle; width: 75%; padding: 5% 6%; } .page.news .p_con .aside_con ul li .txt h1 { font-size: 1.8rem; color: #323031; margin-bottom: 3%; } .page.news .p_con .aside_con ul li .txt p { font-size: 1.4rem; color: #666666; line-height: 170%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .page.news .p_con .aside_con ul li .txt a { display: block; font-size: 1.4rem; color: #e7282e; margin-top: 5%; } .page.news .p_con .aside_con ul li .txt a:hover { text-decoration: underline; } .page.serve { padding-top: 2.4%; padding-bottom: 4%; } .page.serve .p_con { overflow: hidden; } .page.serve .p_con .aside_con ul { padding-right: 15px; } .page.serve .p_con .aside_con ul li { padding: 5% 6%; -webkit-box-shadow: 0 5px 8px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 8px 3px rgba(0, 0, 0, 0.1); margin-bottom: 15px; } .page.serve .p_con .aside_con ul li h1 { font-size: 1.8rem; color: #323031; margin-bottom: 3%; } .page.serve .p_con .aside_con ul li p { font-size: 1.4rem; color: #666666; line-height: 170%; margin-bottom: 5%; } .page.serve .p_con .aside_con ul li a { font-size: 1.4rem; color: #e7282e; } .page.serve .p_con .aside_con ul li a:hover { text-decoration: underline; } .page.serve2 { padding-top: 2.4%; padding-bottom: 4%; } .page.serve2 .aside_con .title { font-size: 1.8rem; color: #323031; margin-bottom: 20px; /* font-weight: bold; */ } .page.serve2 .aside_con .item { font-size: 1.4rem; color: #ef0022; margin-top: 30px; margin-bottom: 20px; font-weight: bold; } .page.serve2 .aside_con .items { font-size: 1.4rem; color: #656161; line-height: 200%; /* font-weight: bold; */ } .page.serve3 { padding-top: 2.4%; padding-bottom: 4%; } .page.serve3 .aside_con form input { width: 100%; font-size: 1.4rem; border: 1px solid #e4eaec; height: 30px; line-height: 30px; padding-left: 15px; padding-right: 15px; border-radius: 3px; margin-bottom: 15px; } .page.serve3 .aside_con form textarea { width: 100%; font-size: 1.4rem; border: 1px solid #e4eaec; height: 100px; line-height: 30px; padding-left: 15px; padding-right: 15px; border-radius: 3px; margin-bottom: 15px; } .page.serve3 .aside_con form select { width: 100%; font-size: 1.4rem; border: 1px solid #e4eaec; height: 30px; line-height: 30px; padding-left: 15px; padding-right: 15px; border-radius: 3px; margin-bottom: 15px; } .page.serve3 .aside_con form button { display: block; width: 170px; height: 45px; line-height: 45px; font-size: 1.4rem; color: #fff; text-align: center; background-color: #e7282e; margin-left: auto; margin-right: auto; } .page.contact .p1 { padding-top: 3%; padding-bottom: 3%; /*background-color: #f8f8f8;*/ } .page.contact .p1 .p1_l ul li { background-color: #fff; padding: 7% 12%; margin-bottom: 32px; } .page.contact .p1 .p1_l ul li a { display: block; background-repeat: no-repeat; background-position: left center; background-size: auto 100%; padding-left: 28%; height: 55px; } .page.contact .p1 .p1_l ul li a h1 { font-size: 1.8rem; color: #2f2f2f; margin-bottom: 10px; } .page.contact .p1 .p1_l ul li a p { font-size: 1.4rem; color: #444444; } .page.contact .p1 .p1_l ul li:nth-child(1) a { background-image: url(../images/contact_icon1.png); } .page.contact .p1 .p1_l ul li:nth-child(2) a { background-image: url(../images/contact_icon2.png); } .page.contact .p1 .p1_l ul li:nth-child(3) a { background-image: url(../images/contact_icon3.png); } .page.contact .p1 .p1_l ul li:nth-child(4) a { background-image: url(../images/contact_icon4.png); } .page.contact .p1 .p1_l ul li:nth-child(5) a { background-image: url(../images/contact_icon4.png); } .page.contact .p1 .p1_r .p1_r_box { background-color: #fff; overflow: hidden; padding: 6%; } .page.contact .p1 .p1_r .p1_r_box h1 { font-size: 2.2rem; color: #2f2f2f; margin-bottom: 20px; } .page.contact .p1 .p1_r .p1_r_box p { font-size: 1.4rem; color: #444444; margin-bottom: 20px; } .page.contact .p1 .p1_r .p1_r_box form { margin-left: -6px; margin-right: -6px; } .page.contact .p1 .p1_r .p1_r_box form .item { padding-left: 6px; padding-right: 6px; margin-bottom: 25px; } .page.contact .p1 .p1_r .p1_r_box form .item:last-child { margin-bottom: 0; } .page.contact .p1 .p1_r .p1_r_box form input { width: 100%; height: 50px; line-height: 50px; font-size: 1.4rem; color: #888888; padding-left: 25px; padding-right: 25px; border: 1px solid #d1d1d1; border-radius: 5px; } .page.contact .p1 .p1_r .p1_r_box form textarea { width: 100%; height: 100px; line-height: 170%; font-size: 1.4rem; color: #888888; padding: 25px; border: 1px solid #d1d1d1; border-radius: 5px; margin-bottom: 20px; } .page.contact .p1 .p1_r .p1_r_box form button { width: 180px; height: 50px; line-height: 50px; background-color: #e7282e; color: #fff; font-size: 1.4rem; } .page.contact .p2 { padding-top: 3%; padding-bottom: 3%; } .page.contact .p2 .contaienr { width: 1420px; max-width: 100%; } .page.contact .p2 .p2_txt { text-align: center; } .page.contact .p2 .p2_txt h1 { font-size: 2.2rem; color: #2f2f2f; margin-bottom: 30px; } .page.contact .p2 .p2_txt p { font-size: 1.4rem; color: #444444; margin-bottom: 5%; } .page .aside { width: 310px; float: left; } .page .aside .aside_head { font-size: 2.6rem; color: #fff; background-color: #ef0022; padding: 30px 35px; margin-bottom: 2px; } .page .aside .aside_body .panel { border-radius: 0; margin-top: 0 !important; border: 0; -webkit-box-shadow: none; box-shadow: none; } .page .aside .aside_body .panel .panel-heading { background-color: #eeeeee; padding: 0; } .page .aside .aside_body .panel .panel-heading .panel-title a { position: relative; display: block; padding: 35px; border-bottom: 2px solid #fff; } .page .aside .aside_body .panel .panel-heading .panel-title a.active{ background: #ef0022; color: #fff; } .page .aside .aside_body .panel .panel-heading .panel-title a::after { content: '+'; position: absolute; right: 35px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-weight: Arial; font-size: 2.6rem; color: #666666; } .page .aside .aside_body .panel .panel-heading .panel-title a.active::after{color:#fff;} .page .aside .aside_body .panel .panel-heading .panel-title a[aria-expanded="true"] { color: #e7282e; border: 0; } .page .aside .aside_body .panel .panel-heading .panel-title a[aria-expanded="true"]::after { color: #e7282e; } .page .aside .aside_body .panel .panel-collapse .panel-body { padding: 0; } .page .aside .aside_body .panel .panel-collapse .panel-body ul { background-color: #f6f6f6; } .page .aside .aside_body .panel .panel-collapse .panel-body ul li { border-bottom: 1px solid #e6e6e6; } .page .aside .aside_body .panel .panel-collapse .panel-body ul li a { display: block; font-size: 1.4rem; color: #666666; padding: 20px 35px; } .page .aside .aside_body .panel .panel-collapse .panel-body ul li.active a { color: #e7282e; } .page .aside .aside_body .aside_list { margin-bottom: 15px; } .page .aside .aside_body .aside_list li { display: block; border-bottom: 2px solid #fff; } .page .aside .aside_body .aside_list li a { display: block; font-size: 1.6rem; color: #666666; padding: 30px; background-color: #eeeeee; } .page .aside .aside_body .aside_list li.active a { color: #e7282e; } .page .aside .aside_body .aside_tuijian { background-color: #f6f6f6; padding: 25px 25px 50px; } .page .aside .aside_body .aside_tuijian dt { font-size: 1.8rem; color: #323031; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #e4e4e4; } .page .aside .aside_body .aside_tuijian dd { border-bottom: 1px solid #e4e4e4; } .page .aside .aside_body .aside_tuijian dd a { display: block; font-size: 1.4rem; color: #323031; line-height: 360%; } .page .aside .aside_body .aside_tuijian dd:hover a { color: #e7282e; } .page .aside_con { float: left; padding-left: 3%; width: calc(100% - 310px); } .crumbs .container { border-bottom: 1px solid #e8e8e8; } .crumbs .page { max-width: 1300px; } .crumbs span a { display: inline-block; vertical-align: middle; font-size: 1.4rem; color: #666666; height: 50px; line-height: 50px; } footer { padding-top: 5%; padding-bottom: 5.5%; background-color: #272727; } footer .container { width: 1540px; max-width: 100%; overflow: hidden; } footer .container .foot_nav { width: 80%; float: left; overflow: hidden; } footer .container .foot_nav dl { width: 20%; float: left; } footer .container .foot_nav dl dt { font-size: 1.6rem; color: #fff; margin-bottom: 35px; } footer .container .foot_nav dl dd a { font-size: 1.2rem; color: #ffffff; opacity: 0.5; line-height: 250%; } footer .container .foot_nav dl dd a:hover { opacity: 1; } footer .container .foot_nav .foot_r { width: 20%; float: left; } footer .container .foot_r ul { display: block; overflow: hidden; margin-bottom: 3.5%; } footer .container .foot_r ul li { float: left; margin-left: 8px; margin-right: 8px; } footer .container .foot_r ul li a { display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: #383838; border-radius: 50%; } footer .container .foot_r ul li a img { width: auto; max-width: 100%; } footer .container .foot_r ul li:hover a { background-color: #e7282e; } footer .container .foot_r form { background-color: #383838; overflow: hidden; height: 38px; } footer .container .foot_r form input { float: left; width: calc(100% - 38px); color: #fff; opacity: 0.5; padding-left: 10px; padding-right: 10px; height: 38px; line-height: 38px; background-color: transparent; } footer .container .foot_r form button { width: 38px; height: 38px; text-align: center; line-height: 38px; background-color: transparent; color: #fff; } .share > li { width: 32px; height: 32px; display: inline-block; margin: 0 5px; } .bq { background-color: #000000; padding: 1.4% 0; overflow: hidden; } .bq .container { width: 1540px; max-width: 100%; } .bq .copy { font-size: 1.4rem; color: #fff; opacity: 0.5; line-height: 1.7rem; float: left; } .bq .copy span { margin-left: 30px; } .bq ul { float: right; } .bq ul li { float: left; } .bq ul li a { font-size: 1.4rem; color: #fff; opacity: 0.5; padding-left: 25px; padding-right: 25px; } .bq ul li:hover a { color: #fff; } .bq ul li:last-child a { border-right: 0; } .mobile-foot { background: #000000; } .mobile-foot > .container > .panel-group { margin-bottom: 5px; } .mobile-foot > .container > .panel-group > .panel { border-radius: 0; margin-top: 0; } .mobile-foot > .container > .panel-group > .panel > .panel-heading { background: #000000; opacity: 1; } .mobile-foot .panel-primary { border-color: #999; } .mobile-foot .panel-primary > .panel-heading { background-color: #000; border-radius: 0; color: #fff; opacity: 0.7; border-color: #999; } .mobile-foot .panel-primary > .panel-collapse > .list-group > .list-group-item > form > input { width: 100%; height: 30px; padding: 9px 11px; border: 1px solid #999; border-radius: 5px; margin-bottom: 5px; } .mobile-foot .panel-primary > .panel-collapse > .list-group > .list-group-item > form > input:focus { outline: none; } .mobile-foot .panel-primary > .panel-collapse > .list-group > .list-group-item > form > textarea { width: 100%; height: 80px; padding: 9px 11px; border: 1px solid #999; border-radius: 5px; resize: none; } .mobile-foot .panel-primary > .panel-collapse > .list-group > .list-group-item > form > textarea:focus { outline: none; } .mobile-foot .panel-primary > .panel-collapse > .list-group > .list-group-item > form > button { width: 64px; height: 30px; background: #e7282e; color: #fff; text-align: center; border: 0; border-radius: 5px; } .mobile-foot .panel-primary > .panel-collapse > .list-group > .list-group-item > dl > dd { padding-left: 35px; line-height: 35px; background-position: left top 7px; background-repeat: no-repeat; } .mobile-foot .panel-primary > .panel-collapse > .list-group > .list-group-item > dl > dd:nth-of-type(1) { background-image: url(../images/phone.png); } .mobile-foot .panel-primary > .panel-collapse > .list-group > .list-group-item > dl > dd:nth-of-type(2) { background-image: url(../images/msg.png); } .mobile-foot .panel-primary > .panel-collapse > .list-group > .list-group-item > dl > dd:nth-of-type(3) { background-image: url(../images/pos.png); } .mobile-foot .panel-primary > .panel-collapse > .list-group > .list-group-item > a > span { margin-left: 10px; } .mobile-foot img { width: auto !important; } .mobile-foot > .container { padding: 0; } .mobile-foot .panel-title > a { display: block; } .mobile-foot .panel-title > a:hover { color: #fff; } .mobile-foot .panel-body { padding: 0 !important; } #ups-banner { position: relative; } #ups-banner .swiper-slide { position: relative; overflow: hidden; } #ups-banner .swiper-slide img { width: auto !important; max-width: 100%; -webkit-transform: matrix(1.1, 0, 0, 1.1, 0, 0); -ms-transform: matrix(1.1, 0, 0, 1.1, 0, 0); transform: matrix(1.1, 0, 0, 1.1, 0, 0); -webkit-transition: all 0.4s ease 1.2s; -o-transition: all 0.4s ease 1.2s; transition: all 0.4s ease 1.2s; } #ups-banner .swiper-slide.swiper-slide-active img { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transition-delay: 0.4s !important; -o-transition-delay: 0.4s !important; transition-delay: 0.4s !important; -webkit-transition: all 3.0s ease; -o-transition: all 3.0s ease; transition: all 3.0s ease; } #ups-banner .swiper-pagination { text-align: center; bottom: 30px; } #ups-banner .swiper-pagination .swiper-pagination-bullet { display: inline-block; vertical-align: middle; width: 2px; height: 8px; background-color: #fff; opacity: 1; margin-left: 13px; margin-right: 13px; } #ups-banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 24px; height: 24px; border: 1px solid #fff; background-color: transparent; } #ups-banner .button-prev, #ups-banner .button-next { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; outline: none; position: absolute; width: 140px; z-index: 10; top: 50%; -webkit-transform: translateY(-34px); -ms-transform: translateY(-34px); transform: translateY(-34px); cursor: pointer; } #ups-banner .button-prev { left: 4vw; } #ups-banner .button-next { right: 4vw; } #ups-banner .button.disabled { opacity: 0.2; cursor: default; } #ups-banner #arrow-svg-home { -webkit-transform: translateY(353px); -ms-transform: translateY(353px); transform: translateY(353px); } #ups-banner .button-next #arrow-svg-home { -webkit-transform: translateY(353px) rotateY(180deg); transform: translateY(353px) rotateY(180deg); -webkit-transform-origin: 80px 0px 0px; -ms-transform-origin: 80px 0px 0px; transform-origin: 80px 0px 0px; } #ups-banner svg { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } #ups-banner .cls-1 { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; opacity: 0.4; -webkit-transform-origin: -20px 40px; -ms-transform-origin: -20px 40px; transform-origin: -20px 40px; opacity: 1; } #ups-banner .cls-4 { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; stroke-width: 2px; stroke: #fff; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.4; -webkit-transform-origin: 0px 0px 0px; -ms-transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px; } #ups-banner #arrow-trg { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; fill: #fff; -webkit-transform: rotateY(180deg) translate(-53px, 39px); transform: rotateY(180deg) translate(-53px, 39px); } #ups-banner #line { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; stroke: #fff; -webkit-transform: translate(50px, 42px); -ms-transform: translate(50px, 42px); transform: translate(50px, 42px); } #ups-banner .button-prev:not(.disabled):hover svg { -webkit-transform: translateX(-25px); -ms-transform: translateX(-25px); transform: translateX(-25px); } #ups-banner .button-next:not(.disabled):hover svg { -webkit-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); } #ups-banner .button:not(.disabled):hover .cls-1 { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #ups-banner .button:not(.disabled):hover .cls-4 { stroke-dasharray: 2px; stroke-dashoffset: 2px; opacity: 1; } #ups-banner .button:not(.disabled):hover #arrow-trg { -webkit-transform: rotateY(180deg) translate(-37px, 39px); transform: rotateY(180deg) translate(-37px, 39px); } #ups-banner .button:not(.disabled):hover #line { -webkit-transform: translate(35px, 42px) scaleX(0.33); -ms-transform: translate(35px, 42px) scaleX(0.33); transform: translate(35px, 42px) scaleX(0.33); } @media (max-width: 1419px) and (min-width: 1200px) { .header .navbar .container .nav-main .mainnav ul li { padding-left: 15px; padding-right: 15px; } } @media (max-width: 1199px) and (min-width: 992px) { .header .navbar .container .nav-main .mainnav ul li { padding-left: 5px; padding-right: 5px; } } @media (max-width: 991px) and (min-width: 768px) { .header .navbar { position: relative; } .header .navbar-header { width: 25%; margin-top: 0; } .header .navbar-r { width: 70%; margin-top: 2%; } .header .navbar-r .navbar-right-top { border: 0; } .header .navbar-r .navbar-right-bottom { position: static; } .header .navbar-r .navbar-right-bottom .mainnav { display: none; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; border: 0; top: 68px; width: 100%; height: auto; overflow: visible; margin-top: 0; padding-right: 0; padding-left: 0; } .header .navbar-r .navbar-right-bottom .mainnav ul { font-size: 0; } .header .navbar-r .navbar-right-bottom .mainnav ul li { width: 100%; float: none; position: relative; display: block; border-bottom: 0; background-color: #fff; border-top: 1px solid #f1f1f1; text-align: center; height: auto; line-height: 100%; } .header .navbar-r .navbar-right-bottom .mainnav ul li .one-title { width: 100%; } .header .navbar-r .navbar-right-bottom .mainnav ul li::before, .header .navbar-r .navbar-right-bottom .mainnav ul li a .en { display: none !important; } .header .navbar-r .navbar-right-bottom .mainnav ul li .sub-nav { position: static; overflow: hidden; text-align: center; padding: 0; } .header .navbar-r .navbar-right-bottom .mainnav ul li .sub-nav a { width: 100%; float: none; font-size: 12px; line-height: 36px; height: 36px; } .header .navbar-r .navbar-right-bottom .mainnav ul li a { font-size: 14px; color: #4c4c4c; line-height: 100%; height: auto; padding: 0; } .header .navbar-r .navbar-right-bottom .mainnav ul li .one-title { position: relative; padding: 0; top: auto; left: auto; -webkit-transform: none; -ms-transform: none; transform: none; } .header .navbar-r .navbar-right-bottom .mainnav ul li .one-title a { display: block; color: #4e5458; } .header .navbar-r .navbar-right-bottom .mainnav ul li .one-title a .zh { font-size: 2rem; height: 50px; line-height: 50px; } .header .navbar-r .navbar-right-bottom .mainnav ul li.active .one-title, .header .navbar-r .navbar-right-bottom .mainnav ul li:hover .one-title { border: 0; } .header .navbar-r .navbar-right-bottom .mainnav ul .phsearchicon { /* display : none !important; */ height: 50px; width: 80%; } .header .navbar-r .navbar-right-bottom .mainnav ul .phsearchicon:after { width: 10px; height: 10px; transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); -webkit-transform: rotate(135deg); border-color: #4e5458; } .header .navbar-r .navbar-right-bottom .mainnav .sub-nav { -webkit-box-shadow: none; box-shadow: none; border-top: 0; padding: 20px; } .header .navbar-r .navbar-right-bottom .mainnav .sub-nav a { border: 0; } .header .navbar-r .navbar-right-bottom .mainnav .sub-nav a::before { display: none; } .header .navbar-r .navbar-right-bottom .navbar-qrcode { height: 100%; } .header .menu-handle { display: block; right: 25px; top: 10px; } .header::after { display: none; } .page.product_show .page_content_cc .cc1 .pic { width: 100%; padding-right: 0; } .page.product_show .page_content_cc .cc1 .txt { position: static; width: 100%; padding-bottom: 6%; } } @media (max-width: 767px) { .header .navbar { position: relative; padding: 5px 15px; } .header .navbar .nav_box .nav-main .mainnav { display: none; -webkit-transform: none; -ms-transform: none; transform: none; padding-left: 0; padding-right: 0; } .header .navbar .nav_box .nav-main .mainnav ul li { width: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px; } .header .navbar .nav_box .nav-main .mainnav ul li .sub-nav { position: static; -webkit-box-shadow: none; box-shadow: none; margin-top: 15px; } .header .navbar-header { width: 76.33%; max-width: 50px; margin-top: 0; } .header .menu-handle { display: block; right: 15px; top: 5px; } .header::after { display: none; } .header .navbar .container .navbar-header { /* max-width: 65px; */ } .header.shadow .navbar { padding: 5px 15px; } .header .navbar .container .nav-main .mainnav ul li .one-title a { line-height: 45px; } .header .navbar .container .nav-main .mainnav ul li .sub-nav { position: static; display: none; padding-top: 0; } .header .navbar .container .nav-main .mainnav ul li .sub-nav a { -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; text-align: center; } .header.active { background-color: #fff; } .ban .txt h1 { font-size: 1.4rem; } .ban .txt p { font-size: 1.2rem; } .path ul li a { line-height: 170%; } .main .m_title h1 { font-size: 3.2rem; } .main .m_title h2 { font-size: 2.4rem; } .main .m2 .txt h1 { font-size: 2.4rem; margin-top: 30px; } .main .m3 .m_item4 ul li a .txt h1 { font-size: 1.8rem; } .main .m3 .m_item4 ul li a .txt p { margin-top: 5px; } .main .m3 .m_item4 ul li { overflow: hidden; } .main .m4 ul li.txt .txt_wrapper { padding: 5%; } .main .m5 .m_title { margin-top: 15px; } .main .m5::after { display: none; } .bq .copy { text-align: center; } .bq ul { width: 100%; text-align: center; margin-top: 5px; } .bq ul li { float: none; } .page.about .p2 ul li { margin-bottom: 5%; } .page.about .p5 ul li .cc1 .pic { position: static; width: 100%; -webkit-transform: none; -ms-transform: none; transform: none; } .page.about .p5 ul li .cc1 .txt { width: 100%; padding: 5%; } .page.about .p5 ul li:nth-child(even) .cc1 .txt { padding-left: 5%; padding-right: 5%; } .aside { /* display: none; */ width: 100%; width: 100%!important; } .page .aside_con { width: 100%; padding-left: 0; } .page.news .p_con .aside_con ul li .pic { width: 100%; } .page.news .p_con .aside_con ul li .txt { width: 100%; } .page.serve .p_con .aside_con ul { padding-right: 0; } .page.product2 .p1 .swiper-wrappers .swiper-button-prev { left: 15px; } .page.product2 .p1 .swiper-wrappers .swiper-button-next { right: 15px; } .page.product2 .p1 .swiper-wrappers .swiper-slide.swiper-slide-active a img, .page.product2 .p1 .swiper-wrappers .swiper-slide.swiper-slide-next + .swiper-slide a img { -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; } .pages .pagelist { text-align: center; margin-top: 10px; margin-bottom: 40px; } }