html, body { font-size: 12px; font-family: 'microsoft yahei', "榛戜綋", 'Adobe 榛戜綋 Std R'; } .text-center { text-align: center; } .fl { float: left; } .fr { float: right; } .poa { position: absolute; } a:link { color: #858489; text-decoration: none; } a:visited { color: #858489; text-decoration: none; } a:hover { text-decoration: underline; } .navigation-box { width: 242px; height: 310.8px; position: fixed; z-index: 9999; top: 50%; margin-top: -133.2px; right: 20px; } .navigation-box .box { width: 100%; height: 100%; position: relative; } .navigation-box .box .block { width: 85px; height: 85px; line-height: 75px; position: absolute; font-size: 12px; text-align: center; box-sizing: border-box; transition: all 0.5s ease; } .navigation-box .box .block.zoom { transform: scale(1.15); } .navigation-box .box .block:hover { transform: scale(1.15); } .navigation-box .box .block.active { transform: scale(1.15); } .navigation-box .box .block:nth-child(1) { left: 50%; top: 0; margin-left: -30px; } .navigation-box .box .block:nth-child(2) { left: 26px; top: 65px; } .navigation-box .box .block:nth-child(3) { right: 0; top: 65px; } .navigation-box .box .block:nth-child(4) { left: 50%; top: 130px; margin-left: -30px; } .navigation-box .box .block:nth-child(5) { right: 0; top: 196px; } .navigation-box .box .block:nth-child(6) { left: 50%; top: 264px; margin-left: -30px; } .navigation-box .box .block a { width: 100%; height: 100%; display: block; border: 3px solid #bfe1ff; color: #fff; box-sizing: border-box; transform: rotate(45deg); text-decoration: none; } .navigation-box .box .block a span { width: 100%; height: 100%; display: block; transform: rotate(-45deg); } @media screen and (max-height: 650px) { .navigation-box { width: 152px; height: 244.2px; position: fixed; z-index: 9999; top: 50%; margin-top: -148px; right: 20px; } .navigation-box .box .block { width: 60px; height: 60px; line-height: 54px; position: absolute; font-size: 12px; text-align: center; box-sizing: border-box; transition: all 0.5s ease; } .navigation-box .box .block.zoom { transform: scale(1.15); } .navigation-box .box .block:hover { transform: scale(1.15); } .navigation-box .box .block.active { transform: scale(1.15); } .navigation-box .box .block:nth-child(1) { left: 50%; top: 0; margin-left: -30px; } .navigation-box .box .block:nth-child(2) { left: 0; top: 48px; } .navigation-box .box .block:nth-child(3) { right: 0; top: 48px; } .navigation-box .box .block:nth-child(4) { left: 50%; top: 94px; margin-left: -30px; } .navigation-box .box .block:nth-child(5) { right: 0; top: 140px; } .navigation-box .box .block:nth-child(6) { left: 50%; top: 186px; margin-left: -30px; } } .top-box { width: 100%; height: 100%; position: relative; } .header { width: 100%; height: 159px; position: absolute; left: 0; top: 0; z-index: 9; background: #fff; } .header.page { width: 100%; height: 159px; position: static; left: 0; top: 0; z-index: 9; background: #fff; } .header .wrapper { width: 100%; height: 100%; } .header .wrapper .top { width: 100%; height: 115px; border-bottom: 1px solid #c4c4c4; } .header .wrapper .top .box { width: 1176px; height: 115px; margin: 0 auto; background: url("../img/logo.png") no-repeat 0 20px; } .header .wrapper .top .box.big5 { width: 1176px; height: 115px; margin: 0 auto; background: url("../big5/img/logo.png") no-repeat 0 20px; } .header .wrapper .top .box .language { width: 100%; height: auto; overflow: hidden; text-align: right; padding-top: 12px; } .header .wrapper .top .box .language a { width: 70px; height: 20px; line-height: 20px; display: inline-block; text-align: center; color: #505050; text-decoration: none; border-right: 1px solid #505050; } .header .wrapper .top .box .language a:link { text-decoration: none; } .header .wrapper .top .box .language a:visited { text-decoration: none; } .header .wrapper .top .box .language a:hover { text-decoration: underline; } .header .wrapper .menu { width: 1176px; height: 44px; margin: 0 auto; position: relative; } .header .wrapper .menu .search-box { width: 150px; height: 34px; position: absolute; right: 10px; top: 50%; margin-top: -17px; } .header .wrapper .menu .search-box input { width: 100%; height: 34px; border: 1px solid #e9e9e9; box-sizing: border-box; text-indent: 10px; font-size: 14px; outline: none; } .header .wrapper .menu .search-box input.active { background: #e6e6e6; border: 1px solid #ff0505; box-shadow: 0 0 3px #ff0505; } .header .wrapper .menu .search-box button { width: 32px; height: 32px; line-height: 32px; font-size: 20px; background: #fff; border: none; position: absolute; right: 1px; top: 1px; z-index: 99; } .header .wrapper .menu .search-box input.active + button { background: #e6e6e6; } .header .wrapper .menu .search-box .input-box { width: 100%; height: 34px; position: relative; } .header .wrapper .menu ul { width: 100%; height: 44px; margin: 0; padding: 0; list-style: none; } .header .wrapper .menu ul > li { width: 125px; height: 44px; line-height: 44px; float: left; text-align: center; font-size: 16px; box-sizing: border-box; position: relative; } .header .wrapper .menu > ul > li:first-child { width: 95px; } .header .wrapper .menu > ul > li.active { border-bottom: 2px solid #e50618; } .header .wrapper .menu > ul > li:hover { border-bottom: 2px solid #e50618; } .header .wrapper .menu > ul > li:hover > a { color: #e60012; } .header .wrapper .menu > ul > li > a { width: 100%; height: 42px; display: block; box-sizing: border-box; } .header .wrapper .menu > ul > li > a:link { color: #4f4f4f; } .header .wrapper .menu > ul > li > a:visited { color: #4f4f4f; } .header .wrapper .menu > ul > li > a:hover { color: #e60012; text-decoration: none; } .header .wrapper .menu ul li > ul { width: 100%; height: auto; position: absolute; left: 0; top: 44px; z-index: 999; display: none; } .header .wrapper .menu ul li:hover > ul { display: block; } .header .wrapper .menu ul li ul li { width: 100%; height: 33px; line-height: 33px; background: #fff; text-align: left; text-indent: 1.8em; position: relative; } .header .wrapper .menu ul li ul li:hover { background: #e6e6e6; color: #f00; } .header .wrapper .menu ul li ul li a { width: 100%; height: 33px; border-bottom: 1px solid #dedede; display: block; box-sizing: border-box; color: #858489; } .header .wrapper .menu ul li ul li:last-child a { border-bottom: none; } .header .wrapper .menu ul li ul li ul li a { border-bottom: 1px solid #dedede !important; } .header .wrapper .menu ul li ul li ul li:last-child a { border-bottom: none; } .header .wrapper .menu ul li ul li a:hover { background: #e6e6e6; color: #f00; text-decoration: none; } .header .wrapper .menu ul li ul li ul { width: 100%; height: auto; position: absolute; left: 125px; top: 0; z-index: 9999; display: none; } .header .wrapper .menu ul li ul li:hover ul { display: block; } .top-box .flash { width: 100%; height: 100%; max-height: 896px; overflow: hidden; padding-top: 159px; box-sizing: border-box; } .top-box .flash .box { width: 100%; height: 100%; overflow: hidden; position: relative; } .top-box .flash .box .flash-button-box { width: 1316px; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -658px; } .top-box .flash .box .button-left { width: 70px; height: 70px; position: absolute; left: 150px; top: 50%; margin-top: -35px; background-image: url("../img/flash-left.png"); background-repeat: no-repeat; background-position: center; z-index: 9999999; cursor: pointer; } .top-box .flash .box .button-left:hover, .top-box .flash .box .button-right:hover { background-color: rgba(0, 0, 0, 0.3); } .top-box .flash .box .button-right { width: 70px; height: 70px; position: absolute; right: 150px; top: 50%; margin-top: -35px; background-image: url("../img/flash-right.png"); background-repeat: no-repeat; background-position: center; z-index: 9999999; cursor: pointer; } @media screen and (min-width: 1440px) { .top-box .flash .box .button-left { left: 250px; } .top-box .flash .box .button-right { right: 250px; } } .top-box .flash .box .flash-button-box .button-left:hover, .top-box .flash .box .flash-button-box .button-right:hover { background-color: rgba(0, 0, 0, 0.5); } .top-box .flash .box #num { width: 100%; height: 14px; position: absolute; left: 0; bottom: 50px; text-align: center; } .top-box .flash .box #num span { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid #fff; box-sizing: border-box; margin: 0 5px; overflow: hidden; text-indent: 100px; } .top-box .flash .box #num span.on { background: #0C6BBC; } .flash ul { width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; } .flash ul li { width: 100%; height: 100%; background: no-repeat top center; background-size: 100% auto; } .flash ul li .block-box { width: 1176px; height: 100%; overflow: hidden; margin: 0 auto; position: relative; } .flash ul li .block-box .poa img { width: 100%; } .flash ul li .block-box .home-flash-1-text-1 { width: 383px; height: 142px; left: 0; top: -500px; } .flash ul li .block-box .home-flash-1-text-2 { width: 468px; height: 71px; right: 0; bottom: -500px; } .flash ul li .block-box .home-flash-1-text-3 { width: 790px; height: 573px; right: 0; bottom: -1000px; } .flash ul li .block-box .home-flash-2-text-1 { width: 496px; height: 344px; left: 0; top: -544px; } .flash ul li .block-box .home-flash-2-text-2 { width: 573px; height: 500px; right: 0; bottom: -1000px; } .flash ul li .block-box .home-flash-3-text-1 { width: 343px; height: 263px; left: 0; top: -544px; } .flash ul li .block-box .home-flash-3-text-2, .flash ul li .block-box .home-flash-3-text-3, .flash ul li .block-box .home-flash-3-text-4, .flash ul li .block-box .home-flash-3-text-5, .flash ul li .block-box .home-flash-3-text-6, .flash ul li .block-box .home-flash-3-text-7, .flash ul li .block-box .home-flash-3-text-8 { width: 709px; height: 680px; right: 0; top: 0; opacity: 0; } .flash ul li .block-box .home-flash-4-text-1 { width: 450px; height: 240px; right: 0; bottom: -1000px; } .flash ul li .block-box .home-flash-4-text-2, .flash ul li .block-box .home-flash-4-text-3, .flash ul li .block-box .home-flash-4-text-4 { width: 920px; height: 680px; right: 0; top: 0; opacity: 0; } .flash ul li .block-box .home-flash-5-text-1, .flash ul li .block-box .home-flash-5-text-2, .flash ul li .block-box .home-flash-5-text-3, .flash ul li .block-box .home-flash-5-text-4, .flash ul li .block-box .home-flash-5-text-5 { width: 607px; height: 442px; left: 0; top: -1000px; } .flash ul li .block-box .home-flash-5-text-2, .flash ul li .block-box .home-flash-5-text-3, .flash ul li .block-box .home-flash-5-text-4, .flash ul li .block-box .home-flash-5-text-5 { display: none; } @media screen and (max-height: 650px) { .top-box .flash .box .flash-button-box { width: 1076px; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -538px; } .flash ul li .block-box .home-flash-1-text-1 { width: 229.8px; height: 85.2px; left: 200px; } .flash ul li .block-box .home-flash-1-text-2 { width: 280.8px; height: 42.6px; right: 250px; } .flash ul li .block-box .home-flash-1-text-3 { width: 474px; height: 343.8px; right: 250px; } .flash ul li .block-box .home-flash-2-text-1 { width: 297.6px; height: 206.4px; left: 200px; } .flash ul li .block-box .home-flash-2-text-2 { width: 343.8px; height: 300px; right: 250px; } .flash ul li .block-box .home-flash-3-text-1 { width: 205.8px; height: 157.8px; left: 200px; } .flash ul li .block-box .home-flash-3-text-2, .flash ul li .block-box .home-flash-3-text-3, .flash ul li .block-box .home-flash-3-text-4, .flash ul li .block-box .home-flash-3-text-5, .flash ul li .block-box .home-flash-3-text-6, .flash ul li .block-box .home-flash-3-text-7, .flash ul li .block-box .home-flash-3-text-8 { width: 425.4px; height: 408px; right: 250px; } .flash ul li .block-box .home-flash-4-text-1 { width: 270px; height: 144px; right: 250px; } .flash ul li .block-box .home-flash-4-text-2, .flash ul li .block-box .home-flash-4-text-3, .flash ul li .block-box .home-flash-4-text-4 { width: 552px; height: 408px; right: 250px; } .flash ul li .block-box .home-flash-5-text-1, .flash ul li .block-box .home-flash-5-text-2, .flash ul li .block-box .home-flash-5-text-3, .flash ul li .block-box .home-flash-5-text-4, .flash ul li .block-box .home-flash-5-text-5 { width: 364.2px; height: 265.2px; left: 200px; } } .top-box .news-box { width: 100%; height: 45px; position: absolute; bottom: 0; left: 0; z-index: 9; background: #fff; } .top-box .news-box .box { width: 1176px; height: 45px; border-bottom: 1px solid #898989; box-sizing: border-box; margin: 0 auto; position: relative; } .top-box .news-box .box .title { width: 120px; height: 44px; line-height: 44px; text-align: center; color: #ff0000; font-size: 18px; float: left; background: url("../img/home-news-arrow.png") no-repeat right center; } .top-box .news-box .box .ul-box { width: 965px; height: 44px; float: left; } .top-box .news-box .box .ul-box ul { width: 965px; height: 44px; margin: 0; padding: 0; list-style: none; } .top-box .news-box .box .ul-box ul li { width: 320.66666667px; height: 44px; line-height: 44px; float: left; background: url("../img/home-news-li.png") no-repeat 60px center; text-indent: 75px; } .top-box .news-box .box .ul-box ul li a { color: #8f8d8d; font-size: 14px; } .top-box .news-box .box .button-left { width: 44px; height: 35px; float: left; background: url("../img/home-news-left.png") no-repeat center; border-left: 1px solid #898989; border-right: 1px solid #898989; cursor: pointer; } .top-box .news-box .box .button-right { width: 44px; height: 35px; float: left; background: url("../img/home-news-right.png") no-repeat center; border-right: 1px solid #898989; cursor: pointer; } @media screen and (max-height: 650px) { .top-box .header { height: 154px; } .top-box .header .wrapper .top { height: 110px; } .top-box .header .wrapper .top .box { height: 110px; background: url("../img/logo.png") no-repeat 0 15px; } .top-box .header .wrapper .top .box .language { padding-top: 6px; } .top-box .flash { padding-top: 154px; padding-bottom: 45px; } .top-box .news-box { height: 45px; } .top-box .news-box .box { height: 45px; } .top-box .news-box .box .title { height: 44px; line-height: 44px; } .top-box .news-box .box .ul-box { height: 44px; } .top-box .news-box .box .ul-box ul { height: 44px; } .top-box .news-box .box .ul-box ul li { height: 44px; line-height: 44px; } .top-box .news-box .box .button-left { height: 44px; } .top-box .news-box .box .button-right { height: 44px; } } /* * 浜у搧涓績 */ .home-product-box { width: 100%; height: 100%; background: #fff url("../img/home-product-bg.png") center top no-repeat; } .home-product-box .wrapper { width: 1176px; height: 100%; margin: 0 auto; position: relative; } .home-product-box .wrapper .products { width: 226px; height: 75px; position: absolute; top: 40px; left: 0; } .home-product-box .wrapper .list-box { width: 100%; height: 468px; overflow: hidden; position: relative; padding-top: 246px; } .home-product-box .wrapper .list-box > ul { margin: 0; padding: 0; list-style: none; position: absolute; left: 0; } .home-product-box .wrapper .list-box > ul > li { width: 538px; height: 395.15172414px; float: left; position: relative; background-repeat: no-repeat; background-size: 100%; top: 36px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s; } .home-product-box .wrapper .list-box > ul > li.active { width: 638px; height: 468.6px; position: relative; top: 0; } .home-product-box .wrapper .list-box > ul > li .title { width: 100%; height: 118px; line-height: 118px; background: rgba(0, 160, 233, 0.7); color: #fff; font-size: 32px; text-align: center; position: absolute; left: 0; top: 150px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s; opacity: 1; } .home-product-box .wrapper .list-box > ul > li.active .title { opacity: 0; top: 200px; } .home-product-box .wrapper .list-box > ul > li:first-child .shadow { width: 28px; height: 396px; position: absolute; right: 0; top: 50%; margin-top: -198px; opacity: 1; background: url("../img/product-shadow-left.png") no-repeat no-repeat right top; } .home-product-box .wrapper .list-box > ul > li:first-child.active .shadow { opacity: 0; } .home-product-box .wrapper .list-box > ul > li:last-child .shadow { width: 28px; height: 396px; position: absolute; left: 0; top: 50%; margin-top: -198px; opacity: 1; background: url("../img/product-shadow-right.png") no-repeat no-repeat left top; } .home-product-box .wrapper .list-box > ul > li:last-child.active .shadow { opacity: 0; } .home-product-box .wrapper .list-box > ul > li .active-box { width: 100%; height: 335px; position: absolute; left: 0; top: 90px; opacity: 0; background: rgba(0, 160, 233, 0.7); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s; } .home-product-box .wrapper .list-box > ul > li .active-box > ul { width: 270px; margin: 0 auto; padding: 0; list-style: none; } .home-product-box .wrapper .list-box > ul > li .active-box > ul > li { width: 270px; height: 40px; line-height: 40px; font-size: 16px; text-align: center; margin: 8px 0; transition: all 0.3s; } .home-product-box .wrapper .list-box > ul > li .active-box > ul > li:hover { transform: scale(1.1, 1.1); } .home-product-box .wrapper .list-box > ul > li .active-box > ul > li a:link { width: 270px; height: 40px; display: block; color: #fff; border: 1px solid #fff; text-decoration: none; box-sizing: border-box; } .home-product-box .wrapper .list-box > ul > li .active-box > ul > li a:visited { color: #fff; } .home-product-box .wrapper .list-box > ul > li .active-box > ul > li a:hover { color: #fff; } .home-product-box .wrapper .list-box > ul > li.active .active-box { height: 396px; top: 36px; opacity: 1; } .home-product-box .wrapper .list-box .btn-left { width: 70px; height: 70px; border-radius: 50%; position: absolute; left: 0; top: 70%; margin-top: -35px; background-image: url("../img/flash-left.png"); background-repeat: no-repeat; background-position: center; z-index: 999; } .home-product-box .wrapper .list-box .btn-left:hover, .home-product-box .wrapper .list-box .btn-right:hover { background-color: rgba(0, 0, 0, 0.5); } .home-product-box .wrapper .list-box .btn-right { width: 70px; height: 70px; border-radius: 50%; position: absolute; right: 0; top: 70%; margin-top: -35px; background-image: url("../img/flash-right.png"); background-repeat: no-repeat; background-position: center; z-index: 99999; } .home-product-box .wrapper .product-more { width: 98px; height: 38px; line-height: 38px; text-align: center; color: #383e3f; font-size: 18px; border: 1px solid #3d4343; position: absolute; right: 0; bottom: 30px; } .home-product-box .wrapper .product-more a { color: #383e3f; } @media screen and (max-height: 650px) { .home-product-box .wrapper .list-box { padding-top: 145px; } } @media screen and (min-height: 800px) { .home-product-box .wrapper .product-more { bottom: 100px; } } /* * 瑙e喅鏂规 */ .home-solution-box { width: 100%; height: 100%; background: #eaeaea url("../img/home-solution-bg.png") center top no-repeat; } .home-solution-box .wrapper { width: 1176px; height: 100%; overflow: hidden; margin: 0 auto; position: relative; } .home-solution-box .wrapper .solution-title { width: 218px; height: 74px; position: absolute; top: 42px; left: 0; } .home-solution-box .wrapper .solution-circle { width: 69.8px; height: 69.1px; background: url("../img/home-solution-circle.png") no-repeat; background-size: 100%; position: absolute; bottom: 0; left: 50%; margin-left: -34.9px; transition: all 0.5s ease; opacity: 0; z-index: 1; } .home-solution-box .wrapper .solution-circle.in { opacity: 1; width: 698px; height: 691px; margin-left: -389px; } .home-solution-box .wrapper .solution-wifi { width: 1176px; height: 667px; background: url("../img/home-solution-wifi.png") no-repeat; background-size: 100%; position: absolute; bottom: 0; left: 50%; margin-left: -588px; transition: all 0.5s ease; transition-delay: .5s; opacity: 0; z-index: 7; } .home-solution-box .wrapper .solution-wifi.in { opacity: 1; } .home-solution-box .wrapper .solution-line { width: 1176px; height: 667px; background: url("../img/home-solution-line.png") no-repeat; background-size: 100%; position: absolute; bottom: 0; opacity: 0; left: 50%; margin-left: -588px; transition: all 0.5s ease; transition-delay: .5s; z-index: 2; } .home-solution-box .wrapper .solution-line.in { opacity: 1; } .home-solution-box .wrapper .solution-hand { width: 1176px; height: 667px; background: url("../img/home-solution-hand.png") no-repeat; background-size: 100%; position: absolute; bottom: -200px; opacity: 0; left: 50%; margin-left: -588px; transition: all 0.5s ease; transition-delay: .5s; z-index: 9; } .home-solution-box .wrapper .solution-hand.in { bottom: 0; opacity: 1; } .home-solution-box .wrapper .solution-computer { width: 1176px; height: 667px; background: url("../img/home-solution-computer.png") no-repeat; background-size: 100%; position: absolute; bottom: 0; opacity: 0; left: 50%; margin-left: -588px; transition: all 0.5s ease; transition-delay: .5s; z-index: 8; } .home-solution-box .wrapper .solution-computer-big5 { width: 1176px; height: 667px; background: url("../big5/img/home-solution-computer.png") no-repeat; background-size: 100%; position: absolute; bottom: 0; opacity: 0; left: 50%; margin-left: -588px; transition: all 0.5s ease; transition-delay: .5s; z-index: 8; } .home-solution-box .wrapper .solution-computer.in, .home-solution-box .wrapper .solution-computer-big5.in { opacity: 1; } .home-solution-box .wrapper .solution-disk { width: 1176px; height: 667px; background: url("../img/home-solution-disk.png") no-repeat; background-size: 100%; position: absolute; bottom: 100px; opacity: 0; left: 50%; margin-left: -588px; transition: all 0.5s ease; transition-delay: .5s; z-index: 7; } .home-solution-box .wrapper .solution-disk.in { opacity: 1; bottom: 0; } .home-solution-box .wrapper .solution-button-1 { width: 257px; height: 95px; position: absolute; left: -250px; bottom: 535px; z-index: 9; opacity: 0; transition: all 0.5s ease; transition-delay: .6s; } .home-solution-box .wrapper .solution-button-1.in { left: 50px; opacity: 1; } .home-solution-box .wrapper .solution-button-2 { width: 251px; height: 61px; position: absolute; left: -250px; bottom: 390px; z-index: 9; opacity: 0; transition: all 0.5s ease; transition-delay: .7s; } .home-solution-box .wrapper .solution-button-2.in { left: 50px; opacity: 1; } .home-solution-box .wrapper .solution-button-3 { width: 235px; height: 63px; position: absolute; left: -250px; bottom: 210px; z-index: 9; opacity: 0; transition: all 0.5s ease; transition-delay: .8s; } .home-solution-box .wrapper .solution-button-3.in { left: 72px; opacity: 1; } .home-solution-box .wrapper .solution-button-4 { width: 165px; height: 64px; position: absolute; right: -250px; bottom: 550px; z-index: 9; opacity: 0; transition: all 0.5s ease; transition-delay: .9s; } .home-solution-box .wrapper .solution-button-4.in { right: 492px; opacity: 1; } .home-solution-box .wrapper .solution-button-5 { width: 256px; height: 94px; position: absolute; right: -250px; bottom: 595px; z-index: 9; opacity: 0; transition: all 0.5s ease; transition-delay: 1s; } .home-solution-box .wrapper .solution-button-5.in { right: 225px; opacity: 1; } .home-solution-box .wrapper .solution-button-6 { width: 234px; height: 62px; position: absolute; right: -250px; bottom: 480px; z-index: 9; opacity: 0; transition: all 0.5s ease; transition-delay: 1.1s; } .home-solution-box .wrapper .solution-button-6.in { right: 150px; opacity: 1; } .home-solution-box .wrapper .solution-button-7 { width: 339px; height: 62px; position: absolute; right: -250px; bottom: 335px; z-index: 9; opacity: 0; transition: all 0.5s ease; transition-delay: 1.2s; } .home-solution-box .wrapper .solution-button-7.in { right: 22px; opacity: 1; } .home-solution-box .wrapper .solution-button-8 { width: 256px; height: 94px; position: absolute; right: -250px; bottom: 130px; z-index: 9; opacity: 0; transition: all 0.5s ease; transition-delay: 1.3s; } .home-solution-box .wrapper .solution-button-8.in { right: 115px; opacity: 1; } .home-solution-box .wrapper .solution-button-1 img, .home-solution-box .wrapper .solution-button-2 img, .home-solution-box .wrapper .solution-button-3 img, .home-solution-box .wrapper .solution-button-4 img, .home-solution-box .wrapper .solution-button-5 img, .home-solution-box .wrapper .solution-button-6 img, .home-solution-box .wrapper .solution-button-7 img, .home-solution-box .wrapper .solution-button-8 img { width: 100%; transform: scale(1); transition: all 0.5s ease; } .home-solution-box .wrapper .solution-button-1 img:hover, .home-solution-box .wrapper .solution-button-2 img:hover, .home-solution-box .wrapper .solution-button-3 img:hover, .home-solution-box .wrapper .solution-button-4 img:hover, .home-solution-box .wrapper .solution-button-5 img:hover, .home-solution-box .wrapper .solution-button-6 img:hover, .home-solution-box .wrapper .solution-button-7 img:hover, .home-solution-box .wrapper .solution-button-8 img:hover { transform: scale(1.2); } @media screen and (max-height: 650px) { .home-solution-box .wrapper .solution-circle.in { opacity: 1; margin-left: -234.4px; width: 418.8px; height: 414.6px; } .home-solution-box .wrapper .solution-wifi.in { opacity: 1; width: 705.6px; height: 400.2px; margin-left: -352.8px; } .home-solution-box .wrapper .solution-line { width: 705.6px; height: 400.2px; margin-left: -352.8px; } .home-solution-box .wrapper .solution-computer { width: 705.6px; height: 400.2px; margin-left: -352.8px; } .home-solution-box .wrapper .solution-computer-big5 { width: 705.6px; height: 400.2px; margin-left: -352.8px; } .home-solution-box .wrapper .solution-disk { width: 705.6px; height: 400.2px; margin-left: -352.8px; } .home-solution-box .wrapper .solution-hand { width: 705.6px; height: 400.2px; margin-left: -352.8px; } .home-solution-box .wrapper .solution-button-1 { width: 154.2px; height: 57px; left: -250px; bottom: 320px; } .home-solution-box .wrapper .solution-button-1.in { left: 220px; } .home-solution-box .wrapper .solution-button-2 { width: 150.6px; height: 36.6px; left: -250px; bottom: 215px; } .home-solution-box .wrapper .solution-button-2.in { left: 220px; opacity: 1; } .home-solution-box .wrapper .solution-button-3 { width: 141px; height: 37.8px; left: -250px; bottom: 122px; } .home-solution-box .wrapper .solution-button-3.in { left: 245px; opacity: 1; } .home-solution-box .wrapper .solution-button-4 { width: 99px; height: 38.4px; right: -250px; bottom: 328px; } .home-solution-box .wrapper .solution-button-4.in { right: 518px; } .home-solution-box .wrapper .solution-button-5 { width: 153.6px; height: 56.4px; right: -250px; bottom: 360px; } .home-solution-box .wrapper .solution-button-5.in { right: 373px; } .home-solution-box .wrapper .solution-button-6 { width: 140.4px; height: 37.2px; right: -250px; bottom: 300px; } .home-solution-box .wrapper .solution-button-6.in { right: 325px; } .home-solution-box .wrapper .solution-button-7 { width: 203.4px; height: 37.2px; right: -250px; bottom: 202px; } .home-solution-box .wrapper .solution-button-7.in { right: 230px; } .home-solution-box .wrapper .solution-button-8 { width: 153.6px; height: 56.4px; right: -250px; bottom: 70px; } .home-solution-box .wrapper .solution-button-8.in { right: 305px; } } /* * 缁忓吀妗堜緥 */ .home-case-box { width: 100%; height: 100%; background: #0385e7 url("../img/home-case-bg.png") center top no-repeat; } .home-case-box .wrapper { width: 1176px; height: 100%; margin: 0 auto; position: relative; } .home-case-box .wrapper .classic-case { width: 288px; height: 84px; position: absolute; top: 42px; left: 0; } .home-case-box .wrapper .case-detail-box { width: 100%; height: 100%; } .home-case-box .wrapper .case-detail-box ul { width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; } .home-case-box .wrapper .case-detail-box ul li { width: 100%; height: 100%; position: relative; display: none; } .home-case-box .wrapper .case-detail-box ul li.show { display: block; } .home-case-box .wrapper .case-detail-box ul li .circle { width: 26px; height: 26px; border: 8px solid #7cc5f4; border-radius: 50%; background: #fff; position: absolute; top: 320px; left: 116px; } .home-case-box .wrapper .case-detail-box ul li .cate-name { width: 270px; height: 42px; line-height: 38px; font-size: 32px; color: #fff; position: absolute; top: 320px; left: 178px; } .home-case-box .wrapper .case-detail-box ul li .detail-img { width: 766px; height: 396px; position: absolute; right: 0; top: 205px; } .home-case-box .wrapper .case-detail-box ul li .button-detail { width: 190px; height: 44px; line-height: 44px; background: #fff; border-radius: 22px; font-size: 22px; position: absolute; top: 478px; left: 116px; color: #0493e5; text-align: center; cursor: pointer; } .home-case-box .wrapper .case-thumb-box { width: 100%; height: 220px; position: absolute; top: 640px; left: 0; z-index: 99; } .home-case-box .wrapper .case-thumb-box .box { width: 100%; height: 220px; position: relative; } .home-case-box .wrapper .case-thumb-box .box .left, .home-case-box .wrapper .case-thumb-box .box .right { width: 22px; height: 100%; position: absolute; top: 0; } .home-case-box .wrapper .case-thumb-box .box .left { left: 0; background: url("../img/case-left.png") no-repeat 0 70px; } .home-case-box .wrapper .case-thumb-box .box .right { right: 0; background: url("../img/case-right.png") no-repeat right 70px; } .home-case-box .wrapper .case-thumb-box .box .ul-box { width: 1132px; height: 100%; margin: 0 auto; overflow: hidden; } .home-case-box .wrapper .case-thumb-box .box .ul-box ul { margin: 0; padding: 0; height: 220px; list-style: none; } .home-case-box .wrapper .case-thumb-box .box .ul-box ul li { width: 225px; height: 220px; float: left; transition: transform .3s; } .home-case-box .wrapper .case-thumb-box .box .ul-box ul li:hover { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); } .home-case-box .wrapper .case-thumb-box .box .ul-box ul li .img { width: 140px; height: 140px; margin: 20px auto 0 auto; cursor: pointer; } .home-case-box .wrapper .case-thumb-box .box .ul-box ul li .img img { width: 100%; } .home-case-box .wrapper .case-thumb-box .box .ul-box ul li .text { width: 100%; height: 16px; font-size: 16px; padding-top: 15px; text-align: center; color: #fff; } @media screen and (max-height: 650px) { .home-case-box .wrapper .case-thumb-box { bottom: 0; top: inherit; } .home-case-box .wrapper .case-detail-box ul li .circle { top: 220px; } .home-case-box .wrapper .case-detail-box ul li .cate-name { top: 220px; } .home-case-box .wrapper .case-detail-box ul li .detail-img { top: 10px; } .home-case-box .wrapper .case-detail-box ul li .button-detail { top: 308px; } } /* * 瑙嗛涓績 */ .home-video-box { width: 100%; height: 100%; background: url('../img/home-video-bg.jpg') center top; } .home-video-box .wrapper { width: 1176px; height: auto; overflow: hidden; margin: 0 auto; position: relative; z-index: 2; } .home-video-box .wrapper .optic-center { width: 301px; height: 76px; padding-top: 46px; } .home-video-box .wrapper .w50 { width: 50%; height: auto; overflow: hidden; float: left; } .home-video-box .wrapper .w50 .title { width: 100%; height: 25px; padding-top: 96px; padding-bottom: 9px; } .home-video-box .wrapper .w50 .video-box { width: 578px; height: 357px; background: url("../img/video-player-bg.png") repeat-x; border-radius: 8px; border-top-left-radius: 0; border-top-right-radius: 0; border: 1px solid #fff; } .home-video-box .wrapper .w50 .video-box .player-box { width: 578px; height: 249px; } .home-video-box .wrapper .w50 .video-box .player-box.play-video { background: #000 url("../img/play-video.png") no-repeat center; } .home-video-box .wrapper .w50 .video-box .player-box.play-books { background: #000 url("../img/play-books.png") no-repeat center; } .home-video-box .wrapper .w50 .video-box .list-box { width: 100%; height: 88px; } .home-video-box .wrapper .w50 .video-box .list-box .left { width: 35px; height: 88px; float: left; border-right: 1px solid #bebebe; box-sizing: border-box; background: url("../img/left.png") no-repeat 6px center; cursor: pointer; } .home-video-box .wrapper .w50 .video-box .list-box .right { width: 35px; height: 88px; float: left; border-left: 1px solid #bebebe; box-sizing: border-box; background: url("../img/right.png") no-repeat 12px center; cursor: pointer; } .home-video-box .wrapper .w50 .video-box .list-box .box { width: 506px; height: 88px; overflow: hidden; border-left: 1px solid #a9a9a9; border-right: 1px solid #a9a9a9; float: left; position: relative; } .home-video-box .wrapper .w50 .video-box .list-box .box ul { margin: 0; padding: 0; list-style: none; position: absolute; left: 0; top: 0; } .home-video-box .wrapper .w50 .video-box .list-box .box ul li { width: 253px; height: 76px; margin-top: 8px; float: left; padding-left: 12px; box-sizing: border-box; } .home-video-box .wrapper .w50 .video-box .list-box .box ul li .img { width: 130px; height: 76px; border: 2px solid #fff; background: #000; float: left; } .home-video-box .wrapper .w50 .video-box .list-box .box ul li .text { width: 105px; height: 76px; line-height: 1.5em; float: left; padding: 0px 0 0 5px; overflow: hidden; font-size: 16px; color: #000; box-sizing: border-box; } .home-video-box .wrapper .w50 .video-box .list-box .box ul li .text a { width: 100px; height: 76px; display: table-cell; vertical-align: middle; } .home-video-box .wrapper .w50 .more { width: 88px; height: 32px; line-height: 32px; border: 2px solid #fff; font-size: 22px; text-align: center; margin: 8px 0 0 490px; background: #c9c9c9; } .home-video-box .wrapper .w50 .more a { color: #fff; text-decoration: none; } .home-video-box .video-shadow { width: 1329px; height: 119px; background: url("../img/video-shadow.png") no-repeat center top; position: relative; z-index: 1; top: -10px; margin: 0 auto; } @media screen and (max-height: 650px) { .home-video-box .wrapper .optic-center { width: 301px; height: 76px; padding-top: 16px; } .home-video-box .wrapper .w50 { width: 50%; height: auto; overflow: hidden; float: left; } .home-video-box .wrapper .w50 .title { width: 100%; height: 25px; padding-top: 36px; padding-bottom: 9px; } } /* * 搴曢儴 */ .home-footer { width: 100%; height: 100%; background: #1f1f1f; } .home-footer .qr-code { width: 115px; height: 131px; padding: 49px 0 0 0; margin: 0 auto; } .home-footer .qr-code img { width: 100%; } .home-footer .line { width: 100%; height: 1px; border-bottom: 1px solid #65bdff; position: relative; margin-top: 50px; z-index: 1; } .home-footer .box { width: 1176px; height: auto; overflow: hidden; margin: 0 auto; position: relative; top: -18px; z-index: 2; padding-bottom: 2px; } .home-footer .box .footer-menu { width: 100%; height: 36px; } .home-footer .box .footer-menu ul { margin: 0 0 0 58px; padding: 0; list-style: none; } .home-footer .box .footer-menu ul li { width: 138px; height: 36px; border-left: 7px solid #1f1f1f; border-right: 7px solid #1f1f1f; float: left; margin: 0 30px; } .home-footer .box .footer-menu ul li a { width: 138px; height: 36px; line-height: 36px; text-align: center; display: block; box-sizing: border-box; border: 1px solid #65bdff; border-radius: 18px; background: #1f1f1f; font-size: 16px; color: #65bdff; text-decoration: none; } .home-footer .box .footer-menu ul li a:hover { background: #65bdff; color: #fff; text-decoration: none; } .home-footer .box .footer-sub-menu { width: 100%; height: auto; overflow: hidden; padding-bottom: 10px; } .home-footer .box .footer-sub-menu > ul { margin: 9px 0 0 96px; padding: 0; list-style: none; } .home-footer .box .footer-sub-menu > ul > li { width: 186px; height: auto; overflow: hidden; float: left; margin-right: 26px; box-sizing: border-box; } .home-footer .box .footer-sub-menu > ul > li ul { margin: 0; padding: 0; list-style: none; } .home-footer .box .footer-sub-menu > ul > li ul li { width: 100%; height: auto; overflow: hidden; line-height: 24px; font-size: 13px; color: #65bdff; } .home-footer .box .footer-sub-menu > ul > li ul li a:link { color: #fff; } .home-footer .box .footer-sub-menu > ul > li ul li a:visited { color: #fff; } .home-footer .box .footer-sub-menu > ul > li ul li a:hover { text-decoration: underline; } .home-footer .box .button { width: 138px; height: 36px; margin: 15px auto 15px auto; } .home-footer .box .button a:link { width: 138px; height: 36px; line-height: 36px; border-radius: 18px; display: block; border: 1px solid #65bdff; color: #65bdff; font-size: 16px; text-align: center; } .home-footer .box .button a:visited { color: #65bdff; } .home-footer .box .button a:hover { background: #65bdff; color: #fff; text-decoration: none; } .home-footer .box .contact-box { width: 830px; height: auto; overflow: hidden; margin: 0 auto; line-height: 30px; font-size: 15px; color: #fff; } .home-footer .box .contact-box p { padding: 0; margin: 0; } .home-footer .box .contact-box div { display: inline-block; text-align: left; } .home-footer .box .copyright-box { width: 100%; height: auto; overflow: hidden; font-size: 15px; line-height: 30px; text-align: center; color: #fff; } .home-footer .box .copyright-box p { padding: 0; margin: 0; } .home-footer .box .link-box { width: 830px; height: auto; overflow: hidden; margin: 0 auto; line-height: 30px; font-size: 15px; color: #fff; padding-top: 30px; } .home-footer .box .link-box a:link, .home-footer .box .link-box a:visited, .home-footer .box .link-box a:hover { color: #fff; } @media screen and (max-height: 820px) { .home-footer .qr-code { padding: 19px 0 0 0; } .home-footer .line { margin-top: 35px; } } @media screen and (max-height: 650px) { .home-footer .qr-code { width: 92px; height: auto; overflow: hidden; padding: 25px 0 0 0; } .home-footer .line { margin-top: 25px; } .home-footer .box .footer-sub-menu > ul > li ul li { line-height: 20px; font-size: 13px; } .home-footer .box .button { width: 138px; height: 36px; margin: 10px auto 10px auto; } .home-footer .box .contact-box { line-height: 24px; font-size: 13px; } .home-footer .box .copyright-box { font-size: 13px; line-height: 24px; } .home-footer .box .link-box { line-height: 24px; font-size: 13px; padding-top: 20px; } } /* * 寮圭獥 */ .case-popup-mask { width: 100%; height: 100%; background-color: #000; opacity: 0.7; filter: alpha(opacity=70); position: fixed; z-index: 99998; left: 0; top: 0; display: none; } .case-popup-box { width: 882px; height: 664px; overflow: hidden; box-sizing: border-box; border: 12px solid #000; background: #000; position: fixed; z-index: 99999; top: 50%; left: 50%; margin-top: -332px; margin-left: -441px; border-radius: 8px; display: none; } .case-popup-box .popup-title { width: 858px; height: 36px; line-height: 36px; font-size: 14px; background: #fff; border-top-left-radius: 8px; border-top-right-radius: 8px; position: relative; } .case-popup-box .popup-title .btn-close { width: 36px; height: 36px; background: url('../img/close.png') center no-repeat; position: absolute; right: 0; top: 0; cursor: pointer; } .case-popup-box .popup-title .btn-left { width: 36px; height: 36px; background: url('../img/prev.png') center no-repeat; cursor: pointer; float: left; } .case-popup-box .popup-title .btn-right { width: 26px; height: 36px; background: url('../img/next.png') center no-repeat; cursor: pointer; float: left; } .case-popup-box .popup-wrapper { width: 858px; height: 604px; box-sizing: border-box; border: 8px solid #fff; border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background: #0287e9 url('../img/home-case-poput-bg.png') center top no-repeat; position: relative; } .case-popup-box .popup-wrapper ul { width: 842px; height: 596px; margin: 0; padding: 0; list-style: none; position: absolute; left: 0; top: 0; } .case-popup-box .popup-wrapper ul li { width: 842px; height: 596px; float: left; } .case-popup-box .popup-wrapper ul li .case-box { width: 50%; height: 284px; float: left; } .case-popup-box .popup-wrapper ul li .case-box .case-title { width: 100%; height: 65px; line-height: 75px; overflow: hidden; text-align: center; font-size: 18px; font-weight: bold; text-shadow: 3px 3px 3px #111; color: #fff; } .case-popup-box .popup-wrapper ul li .case-box .case-img { width: 314px; height: 214px; box-sizing: border-box; overflow: hidden; border-radius: 8px; background-color: #fff; border: 7px solid #fff; margin: 0 auto; box-shadow: 0px 0px 1px #000; } @media screen and (max-height: 650px) { .case-popup-box { width: 882px; height: 614px; margin-top: -307px; margin-left: -441px; } .case-popup-box .popup-title { width: 858px; height: 36px; } .case-popup-box .popup-wrapper { width: 858px; height: 554px; } .case-popup-box .popup-wrapper ul { width: 842px; height: 546px; } .case-popup-box .popup-wrapper ul li { width: 842px; height: 546px; float: left; } .case-popup-box .popup-wrapper ul li .case-box { width: 50%; height: 264px; } .case-popup-box .popup-wrapper ul li .case-box .case-title { width: 100%; height: 45px; line-height: 45px; } .case-popup-box .popup-wrapper ul li .case-box .case-img { width: 314px; height: 214px; } } .container { width: 100%; height: auto; overflow: hidden; } .container .banner-box { width: 100%; height: 350px; background: no-repeat top center; } .container .banner-box.about { background-image: url("../img/banner-about.png"); } .container .banner-box.investor { background-image: url("../img/banner-investor.png"); } .container .banner-box.product { background-image: url("../img/banner-product.png"); } .container .banner-box.solution { background-image: url("../img/banner-solution.png"); } .container .banner-box.classic-case { background-image: url("../img/banner-classic-case.png"); } .container .banner-box.human-resources { background-image: url("../img/banner-human-resources.png"); } .container .banner-box.news { background-image: url("../img/banner-news.png"); } .container .wrapper { width: 1176px; height: auto; overflow: hidden; margin: 45px auto 0 auto; } .container .wrapper .side-bar { width: 190px; height: auto; overflow: hidden; float: left; margin-right: 50px; padding-bottom: 50px; } .container .wrapper .side-bar .cate-name { width: 200px; height: 55px; background: #00a0e9; color: #fff; font-size: 18px; padding-top: 8px; box-sizing: border-box; line-height: 1.1em; padding-left: 24px; font-weight: bold; } .container .wrapper .side-bar .cate-name span { font-size: 14px; } .container .wrapper .side-bar .cate-list { width: 190px; height: auto; overflow: hidden; margin-top: 1px; } .container .wrapper .side-bar .cate-list ul { margin: 0; padding: 0; list-style: none; } .container .wrapper .side-bar .cate-list ul li { width: 100%; height: auto; overflow: hidden; min-height: 42px; font-size: 14px; color: #858489; box-sizing: border-box; border-bottom: 1px solid #c8c8ca; position: relative; } .container .wrapper .side-bar .cate-list ul li.lh { line-height: 42px; } .container .wrapper .side-bar .cate-list ul li > a { display: block; position: absolute; color: #858489; left: 0; top: 0; z-index: 9; padding-left: 24px; padding-right: 1em; } .container .wrapper .side-bar .cate-list ul li:after { width: 0; height: 41px; content: ''; position: absolute; left: 0; top: 0; background: #e6e6e6; transition: all 0.3s ease; z-index: 1; } .container .wrapper .side-bar .cate-list ul li:hover:after { width: 100%; } .container .wrapper .side-bar .cate-list ul li.has-sub:hover:after { width: 0; } .container .wrapper .side-bar .cate-list ul li:hover > a { text-decoration: none; } .container .wrapper .side-bar .cate-list ul li.active:after { width: 100%; } .container .wrapper .side-bar .cate-list ul li.active > a { color: #e70819; text-decoration: none; } .container .wrapper .side-bar .cate-list ul li .parent { padding: 10px 10px 10px 24px; text-indent: 0; color: #00a0e9; line-height: 1.3em; font-size: 16px; position: relative; } .container .wrapper .side-bar .cate-list ul li .parent i { position: absolute; right: 2px; top: 50%; margin-top: -10px; z-index: 999; } .container .wrapper .side-bar .cate-list ul li i { position: absolute; right: 2px; top: 12px; z-index: 999; } .container .wrapper .side-bar .cate-list ul li ul li { border-top: 1px solid #c8c8ca; border-bottom: none; font-size: 14px; } .container .wrapper .side-bar .tel { width: 100%; height: 54px; line-height: 20px; background: url("../img/tel.png") no-repeat left top; margin: 25px 0 35px 0; padding: 38px 15px 0 28px; font-size: 17px; text-align: right; color: #00a0e9; box-sizing: border-box; } .container .wrapper .side-bar .text { font-size: 24px; padding-left: 24px; line-height: 1em; } .container .wrapper .side-bar .text span { font-size: 16px; } .container .wrapper .side-bar .qr-code { width: 100%; height: auto; overflow: hidden; padding-top: 15px; } .container .wrapper .side-bar .qr-code img { width: 189px; } .container .wrapper .content-box { width: 100%; height: auto; padding-left: 240px; box-sizing: border-box; padding-bottom: 20px; } .container .wrapper .content-box .title-box { width: 100%; height: 55px; position: relative; font-size: 22px; color: #000; padding-top: 20px; box-sizing: border-box; border-bottom: 1px solid #c8c8ca; } .container .wrapper .content-box .title-box strong { font-weight: normal; } .container .wrapper .content-box .title-box span { font-size: 18px; color: #898989; } .container .wrapper .content-box .location { width: 100%; position: absolute; right: 0; bottom: 5px; text-align: right; font-size: 14px; color: #a9a8ab; } .container .wrapper .content-box .text-box { width: 100%; height: auto; overflow: hidden; margin-top: 40px; text-align: justify; } .container .wrapper .content-box .text-box h1 { margin: 0 0 25px 0; padding: 0; line-height: 32px; } .container .wrapper .content-box .text-box.p75 { width: 75%; } .container .wrapper .content-box .text-box p { line-height: 2em; margin: 0; padding: 0; } .container .wrapper .content-box .text-box > ul > li { margin-bottom: 20px; } .container .wrapper .content-box .text-box ul.ul-video { margin: 0; padding: 0; list-style: none; } .container .wrapper .content-box .text-box ul.ul-video li { width: 275px; height: 225px; float: left; margin-bottom: 40px; } .container .wrapper .content-box .text-box ul.ul-video li.mid { margin: 0 56px 40px 55px; } .container .wrapper .content-box .text-box ul.ul-video li .img-box { width: 100%; height: 186px; box-sizing: border-box; border: 1px solid #a9a8ab; padding: 3px; } .container .wrapper .content-box .text-box ul.ul-video li .video-title { width: 100%; height: 30px; line-height: 30px; text-align: center; font-size: 13px; color: #000; border: 1px solid #a9a8ab; box-sizing: border-box; margin-top: 7px; } .container .wrapper .content-box .text-box ul.ul-qualification { margin: 0; padding: 0; list-style: none; } .container .wrapper .content-box .text-box ul.ul-qualification li { width: 290px; height: 245px; float: left; margin-bottom: 35px; border: 1px solid #b6b2b3; box-shadow: 3px 3px 8px #999; } .container .wrapper .content-box .text-box ul.ul-qualification li.mid { margin: 0 26px 35px 26px; } .container .wrapper .content-box .text-box ul.ul-qualification li .img-box { width: 275px; height: 185px; box-sizing: border-box; margin: 10px auto 0 auto; } .container .wrapper .content-box .text-box ul.ul-qualification li .video-title { width: 100%; height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #000; box-sizing: border-box; } .container .wrapper .content-box .text-box ul.ul-magazine { margin: 0; padding: 0; list-style: none; } .container .wrapper .content-box .text-box ul.ul-magazine li { width: 220px; height: 370px; float: left; margin-bottom: 40px; } .container .wrapper .content-box .text-box ul.ul-magazine li.mid { margin: 0 90px 40px 90px; } .container .wrapper .content-box .text-box ul.ul-magazine li .img-box { width: 100%; height: 296px; box-sizing: border-box; border: 1px solid #a9a8ab; padding: 3px; } .container .wrapper .content-box .text-box ul.ul-magazine li .video-title { width: 100%; height: 58px; line-height: 58px; text-align: center; font-size: 15px; font-weight: 600; color: #000; border: 1px solid #a9a8ab; box-sizing: border-box; margin-top: 7px; } .container .wrapper .content-box .text-box ul.ul-article { margin: 0; padding: 0; list-style: none; } .container .wrapper .content-box .text-box ul.ul-article li { width: 100%; height: 50px; line-height: 50px; font-size: 13px; position: relative; margin: 0; border-bottom: 1px solid #dcdcdc; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFBAMAAAB/QTvWAAAAElBMVEWIiIimpqbw8PCMjIyoqKiQkJCcJOG/AAAAFklEQVQI12NQNFRgEABCAyAE0SohCgAPjQGr6jngRQAAAABJRU5ErkJggg==') 0 center no-repeat; } .container .wrapper .content-box .text-box ul.ul-article li:after { width: 0; height: 2px; background-color: #f00; content: ''; display: block; position: absolute; left: 0; bottom: -1px; transition: all 0.5s ease; z-index: 999; } .container .wrapper .content-box .text-box ul.ul-article li:hover:after { width: 100%; } .container .wrapper .content-box .text-box ul.ul-article li a:link { width: 100%; height: 50px; display: block; overflow: hidden; text-indent: 25px; } .container .wrapper .content-box .text-box ul.ul-article li a:visited { color: #666; } .container .wrapper .content-box .text-box ul.ul-article li a:hover { color: #f00; text-decoration: none; } .container .wrapper .content-box .text-box ul.ul-classic-case { margin: 0; padding: 0; list-style: none; } .container .wrapper .content-box .text-box ul.ul-classic-case li { width: 100%; height: 250px; border-bottom: 1px solid #dcdcdc; position: relative; margin: 0; } .container .wrapper .content-box .text-box ul.ul-classic-case li .img-box { width: 348px; height: 192px; overflow: hidden; margin: 29px 0; float: left; } .container .wrapper .content-box .text-box ul.ul-classic-case li .title { width: 563px; height: auto; line-height: 2em; overflow: hidden; font-size: 18px; margin: 30px 0 0 25px; float: left; } .container .wrapper .content-box .text-box ul.ul-classic-case li .description { width: 330px; height: auto; line-height: 1.5em; overflow: hidden; font-size: 12px; margin: 0px 25px 0 25px; float: left; } .container .wrapper .content-box .text-box ul.ul-classic-case li .view-detail { width: 115px; height: 30px; line-height: 30px; text-align: center; position: absolute; bottom: 42px; right: 0; border: 1px solid #b5b5b5; } .container .wrapper .content-box .text-box ul.ul-classic-case li .view-detail a { color: #f00; } .container .wrapper .content-box .text-box ul.ul-news { margin: 0; padding: 0; list-style: none; } .container .wrapper .content-box .text-box ul.ul-news li { width: 100%; height: 170px; border-bottom: 1px solid #dcdcdc; position: relative; margin: 0; } .container .wrapper .content-box .text-box ul.ul-news li .img-box { width: 180px; height: 124px; overflow: hidden; margin: 23px 0; float: left; } .container .wrapper .content-box .text-box ul.ul-news li .img-box img { height: 100%; } .container .wrapper .content-box .text-box ul.ul-news li .text-wrapper { width: 758px; height: 110px; position: absolute; } .container .wrapper .content-box .text-box ul.ul-news li .title { width: 615px; height: auto; line-height: 22px; overflow: hidden; font-size: 16px; margin: 22px 25px 0 25px; float: left; } .container .wrapper .content-box .text-box ul.ul-news li .description { width: 730px; height: auto; line-height: 1.5em; overflow: hidden; font-size: 12px; margin: 8px 0 0 25px; float: left; } .container .wrapper .content-box .text-box ul.ul-news li .datetime { width: 115px; height: auto; text-align: right; position: absolute; top: 22px; right: 0; font-size: 12px; } .container .wrapper .content-box .text-box ul.ul-news li .view-detail { width: 115px; height: 30px; line-height: 30px; text-align: center; position: absolute; bottom: 5px; right: 0; border: 1px solid #b5b5b5; } .container .wrapper .content-box .text-box ul.ul-news li .view-detail a { color: #f00; } .container .wrapper .content-box .text-box .pager { width: 100%; height: 30px; text-align: center; margin-top: 20px; } .container .wrapper .content-box .text-box .pager a { display: inline-block; padding: 3px 5px; border: 1px solid #d7d7d7; color: #000; } .container .wrapper .content-box .text-box .pager span { display: inline-block; padding: 3px 8px; border: 1px solid #f00; background: #f00; color: #fff; } .container .wrapper .content-box .text-box .search-box { width: 275px; height: 35px; border: 1px solid #e9e9e9; position: relative; box-sizing: border-box; float: right; margin-bottom: 30px; margin-right: 96px; } .container .wrapper .content-box .text-box .search-box input { width: 225px; height: 31px; border: none; outline: none; text-indent: 10px; font-size: 14px; float: left; background-color: transparent; } .container .wrapper .content-box .text-box .search-box button { width: 32px; height: 32px; line-height: 32px; font-size: 20px; background: #fff; border: none; position: absolute; right: 1px; top: 0; z-index: 99; } /* * 璇︾粏椤 */ .container .wrapper .content-box .text-box .detail-title { width: 100%; height: auto; text-align: center; font-size: 18px; font-weight: bold; color: #888; } .container .wrapper .content-box .text-box .detail-date { width: 100%; height: 55px; line-height: 55px; text-align: center; font-size: 12px; color: #5f5f5f; border-bottom: 1px dotted #333; } .container .wrapper .content-box .text-box .detail-content { width: 100%; height: auto; overflow: hidden; padding: 20px 0; line-height: 1.5em; } .container .wrapper .content-box .text-box .detail-content video { background-color: #000; } .container .wrapper .content-box .text-box .time-line { background: url('../img/about-img-02-time-line.png') repeat-y center; } .container .wrapper .content-box .text-box .time-tag { width: 56px; height: 109px; } .container .wrapper .content-box .text-box .time-tag.blue { background: url('../img/about-img-02-03.png') repeat-y center; } .container .wrapper .content-box .text-box .time-tag.yellow { background: url('../img/about-img-02-04.png') repeat-y center; } .time-line-title { width: 100%; height: auto; overflow: hidden; box-sizing: border-box; padding-left: 70px; font-size: 25px; float: left; } .container .wrapper .content-box .text-box .share-box { width: 100%; height: auto; overflow: hidden; border-bottom: 1px solid #ddd; padding-bottom: 10px; } .container .wrapper .content-box .text-box .prev-article { width: 100%; height: 25px; line-height: 25px; color: #333; } .container .wrapper .content-box .text-box .prev-article a:link { color: #00a0e9; } .container .wrapper .content-box .text-box .prev-article a:visited { color: #00a0e9; } .container .wrapper .content-box .text-box .prev-article a:hover { color: #00a0e9; } .container .wrapper .content-box .text-box table.job th { font-size: 15px; } .container .wrapper .content-box .text-box table.job td { font-size: 13px; } .container .wrapper .content-box .text-box table.job td a:link { color: #333; } .container .wrapper .content-box .text-box table.job td a:visited { color: #333; } .container .wrapper .content-box .text-box table.job td a:hover { color: #333; } .container .wrapper .content-box .ad-box { width: 25%; height: auto; overflow: hidden; min-height: 100px; margin-top: 50px; } .container .wrapper .content-box .ad-box .img-box { width: 210px; height: auto; overflow: hidden; margin: 0 auto 20px 24px; position: relative; } .container .wrapper .content-box .ad-box .img-box a:link, .container .wrapper .content-box .ad-box .img-box a:visited { position: absolute; bottom: 15px; left: 50%; margin-left: -68.5px; z-index: 2; border: 1px solid #FFFFFF; width: 137px; height: 30px; line-height: 30px; color: #FFFFFF; text-align: center; text-decoration: none; } .container .wrapper .content-box .ad-box .img-box a:hover { border: 1px solid #00a0e9; color: #00a0e9; } .time-line-title.blue { color: #00a0e9; } .time-line-title.yellow { color: #f0b411; } .time-line-horn { width: 58px; height: 14px; float: left; } .time-line-horn.blue { background: url('../img/about-img-02-05.png') right top no-repeat; } .time-line-horn.yellow { background: url('../img/about-img-02-06.png') right top no-repeat; } .time-line-content { width: 506px; height: auto; overflow: hidden; min-height: 50px; font-size: 14px; color: #fff; line-height: 1.5em; padding: 10px; box-shadow: 1px 1px 4px #666; } .time-line-content.blue { border: 10px solid #00a0e9; background-color: #4ebcee; } .time-line-content.yellow { border: 10px solid #f0b411; background-color: #f2cb5f; } .about-map-box { width: 936px; height: 615px; background: url('../img/about-map.png') no-repeat; margin: 50px 0 0 0; position: relative; } .about-map-box .circle { width: 7px; height: 7px; border-radius: 50%; background-color: #e60012; position: absolute; z-index: 1; animation: flash 1s ease-in infinite; } .about-map-box .icon-map-marker { position: absolute; z-index: 2; font-size: 26px; color: #e60012; } .about-map-box .icon-map-marker:after { content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: #fff; position: absolute; left: 50%; top: 5px; margin-left: -4px; z-index: 1; } .about-map-box .circle.xinjiang { left: 255px; top: 93px; } .about-map-box .icon-map-marker.xinjiang { left: 252px; top: 65px; } .about-map-box .circle.hainan { left: 477px; bottom: 46px; } .about-map-box .icon-map-marker.hainan { left: 474px; bottom: 53px; } .about-map-box .circle.zhuhai { left: 524px; bottom: 85px; } .about-map-box .icon-map-marker.zhuhai { left: 520px; bottom: 93px; } .about-map-box .circle.guangzhou { left: 532px; bottom: 103px; } .about-map-box .icon-map-marker.guangzhou { left: 525px; bottom: 108px; font-size: 40px; } .about-map-box .icon-map-marker.guangzhou:after { content: ''; width: 14px; height: 14px; border-radius: 50%; background-color: #fff; position: absolute; left: 50%; top: 6px; margin-left: -7px; z-index: 1; } .about-map-box .circle.dongguan { left: 547px; bottom: 97px; } .about-map-box .icon-map-marker.dongguan { left: 543px; bottom: 104px; } .about-map-box .circle.jieyang { left: 584px; bottom: 108px; } .about-map-box .icon-map-marker.jieyang { left: 581px; bottom: 116px; } .about-map-box .circle.fujian { left: 622px; bottom: 146px; } .about-map-box .icon-map-marker.fujian { left: 619px; bottom: 154px; } .about-map-box .circle.nanchang { left: 583px; bottom: 193px; } .about-map-box .icon-map-marker.nanchang { left: 580px; bottom: 200px; } .about-map-box .circle.hunan { left: 532px; bottom: 189px; } .about-map-box .icon-map-marker.hunan { left: 529px; bottom: 196px; } .about-map-box .star { width: 20px; height: 20px; font-size: 22px; color: #e60012; position: absolute; left: 600px; top: 204px; z-index: 1; animation: text_flash 1s ease-in infinite; } .about-map-box .text-img { width: 213px; height: 195px; position: absolute; z-index: 2; right: 70px; bottom: -100px; background: url('../img/about-map-img-01.png') no-repeat; } .about-map-box .text-img-big5 { width: 213px; height: 195px; position: absolute; z-index: 2; right: 70px; bottom: -100px; background: url('../big5/img/about-map-img-01.png') no-repeat; } @keyframes flash { 0% { box-shadow: 0 0 2px 1px #e60012; } 50% { box-shadow: 0 0 10px 2px #e60012; } 100% { box-shadow: 0 0 2px 1px #e60012; } } @keyframes text_flash { 0% { text-shadow: 0 0 2px #e60012; } 50% { text-shadow: 0 0 15px #e60012; } 100% { text-shadow: 0 0 2px #e60012; } } .contact-address-list { width: 100%; height: auto; overflow: hidden; } .contact-address-list ul { margin: 0; padding: 0; list-style: none; } .contact-address-list ul li { width: 100%; height: auto; overflow: hidden; } .contact-address-list ul li .icon { width: 30px; height: 50px; float: left; color: #e60012; font-size: 32px; } .contact-address-list ul li .icon span { float: left; } .contact-address-list ul li .text { width: 500px; height: auto; overflow: hidden; float: left; font-size: 14px; color: #4b4948; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation: bounce 1.2s ease-in infinite; -o-animation: bounce 1.2s ease-in infinite; animation: bounce 1.2s ease-in infinite; } /* * 鏃跺厜娴 */ .time-tag-box { width: 235px; height: auto; overflow: hidden; float: left; padding: 20px 0 90px 0; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABAQMAAADO7O3JAAAAA1BMVEWJiYk3uwVTAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==") repeat-y 186px top; } .time-tag-box ul { margin: 0; padding: 0; list-style: none; } .time-tag-box > ul > li { width: 235px; height: auto; overflow: hidden; margin: 10px 0; } .time-tag-box > ul > li .text { width: 168px; height: 84px; line-height: 62px; font-size: 18px; text-align: right; font-weight: bold; float: left; } .time-tag-box > ul > li .tag { width: 38px; height: 84px; float: left; cursor: pointer; } .time-tag-box > ul > li.li-1 .text, .time-tag-box > ul > li.li-6 .text { color: #0373c1; } .time-tag-box > ul > li.li-1 .tag, .time-tag-box > ul > li.li-6 .tag { background: url("../img/time-tag-1.png"); } .time-tag-box > ul > li.li-2 .text, .time-tag-box > ul > li.li-7 .text { color: #00a0e9; } .time-tag-box > ul > li.li-2 .tag, .time-tag-box > ul > li.li-7 .tag { background: url("../img/time-tag-2.png"); } .time-tag-box > ul > li.li-3 .text, .time-tag-box > ul > li.li-8 .text { color: #13b4d7; } .time-tag-box > ul > li.li-3 .tag, .time-tag-box > ul > li.li-8 .tag { background: url("../img/time-tag-3.png"); } .time-tag-box > ul > li.li-4 .text { color: #92c270; } .time-tag-box > ul > li.li-4 .tag { background: url("../img/time-tag-4.png"); } .time-tag-box > ul > li.li-5 .text { color: #f4ba59; } .time-tag-box > ul > li.li-5 .tag { background: url("../img/time-tag-5.png"); } .time-tag-box > ul > li ul { width: 235px; height: auto; overflow: hidden; display: none; } .time-tag-box > ul > li.active ul { width: 235px; height: auto; overflow: hidden; display: block; } .time-tag-box > ul > li ul > li { width: 70px; height: auto; overflow: hidden; line-height: 1.2em; float: right; padding: 10px 0; text-align: center; font-size: 16px; color: #fff; margin: 8px 13px 2px 140px; cursor: pointer; } .time-tag-box > ul > li.li-1 ul li, .time-tag-box > ul > li.li-6 ul li { background: #0373c1; } .time-tag-box > ul > li.li-2 ul li, .time-tag-box > ul > li.li-7 ul li { background: #00a0e9; } .time-tag-box > ul > li.li-3 ul li, .time-tag-box > ul > li.li-8 ul li { background: #13b4d7; } .time-tag-box > ul > li.li-4 ul li { background: #92c270; } .time-tag-box > ul > li.li-5 ul li { background: #f4ba59; } .time-content { width: 700px; height: auto; overflow: hidden; background: #f5f4f4; padding: 30px; box-sizing: border-box; float: left; margin-top: 50px; font-size: 14px; color: #686767; } .time-content .box { display: none; } .time-content .box.active { display: block; } .row { width: 100%; height: auto; overflow: hidden; } .clear { clear: both; } .footer { width: 100%; height: auto; overflow: hidden; background: #1f1f1f; } .footer .box { width: 1176px; height: auto; overflow: hidden; position: relative; margin: 20px auto; } .footer .box .qr-code { width: 115px; height: 131px; position: absolute; left: 10px; top: 0; } .footer .box .footer-menu { width: 1066px; height: 36px; margin-left: 110px; } .footer .box .footer-menu ul { margin: 0; padding: 0; list-style: none; } .footer .box .footer-menu ul li { width: 20%; height: 36px; float: left; } .footer .box .footer-menu ul li a { width: 138px; height: 36px; line-height: 36px; text-align: center; display: block; box-sizing: border-box; border: 1px solid #65bdff; border-radius: 18px; background: #1f1f1f; font-size: 16px; color: #65bdff; text-decoration: none; margin: 0 auto; } .footer .box .footer-menu ul li a:hover { background: #65bdff; color: #fff; text-decoration: none; } .footer .box .footer-sub-menu { width: 1066px; margin-left: 110px; margin-top: 10px; height: auto; overflow: hidden; padding-bottom: 10px; } .footer .box .footer-sub-menu > ul { margin: 0; padding: 0; list-style: none; } .footer .box .footer-sub-menu > ul > li { width: 20%; height: auto; overflow: hidden; float: left; box-sizing: border-box; } .footer .box .footer-sub-menu > ul > li p { line-height: 24px; font-size: 12px; color: #fff; } .footer .box .footer-sub-menu > ul > li ul { margin: 0; padding: 0; list-style: none; } .footer .box .footer-sub-menu > ul > li ul li { width: 100%; height: auto; overflow: hidden; line-height: 24px; font-size: 12px; color: #fff; } .footer .box .footer-sub-menu > ul > li ul li strong { color: #65bdff; } .footer .box .footer-sub-menu > ul > li ul li a:link { color: #fff; } .footer .box .footer-sub-menu > ul > li ul li a:visited { color: #fff; } .footer .box .footer-sub-menu > ul > li ul li a:hover { text-decoration: underline; } .footer .box .button { width: 138px; height: 36px; margin: 15px auto 15px auto; } .footer .box .button a:link { width: 138px; height: 36px; line-height: 36px; border-radius: 18px; display: block; border: 1px solid #65bdff; color: #65bdff; font-size: 16px; text-align: center; } .footer .box .button a:hover { background: #65bdff; color: #fff; text-decoration: none; } .footer .box .contact-box { width: 830px; height: auto; overflow: hidden; margin: 0 auto; line-height: 30px; font-size: 15px; color: #fff; } .footer .box .contact-box p { padding: 0; margin: 0; } .footer .box .copyright-box { width: 100%; height: auto; overflow: hidden; font-size: 15px; line-height: 30px; text-align: center; color: #fff; } .footer .box .copyright-box p { padding: 0; margin: 0; } .footer .box .link-box { width: 830px; height: auto; overflow: hidden; margin: 0 auto; line-height: 30px; font-size: 15px; color: #fff; padding-top: 30px; } @media screen and (max-height: 650px) { .footer .qr-code { width: 92px; height: auto; overflow: hidden; } .footer .box .footer-sub-menu > ul > li ul li { font-size: 12px; } .footer .box .button { width: 138px; height: 36px; margin: 10px auto 10px auto; } .footer .box .contact-box { line-height: 24px; font-size: 13px; } .footer .box .copyright-box { font-size: 13px; line-height: 24px; } .footer .box .link-box { line-height: 24px; font-size: 13px; padding-top: 20px; } } .back2top { width: 55px; height: 55px; position: fixed; z-index: 999; background-image: url("../img/top.png"); right: 20px; bottom: 340px; cursor: pointer; } .video-player { width: 680px; height: 460px; background: #fff; border: 5px solid #666; border-radius: 8px; position: fixed; left: 50%; top: 50%; margin-top: -225px; margin-left: -340px; display: none; z-index: 99999; } .video-player .video-top { width: 100%; height: 39px; border-bottom: 1px solid #666; } .video-player .video-top .title { width: 600px; height: 39px; line-height: 39px; text-indent: 1em; font-size: 16px; float: left; } .video-player .video-top .close { width: 40px; height: 39px; background: url("../img/close.png") no-repeat center; float: right; cursor: pointer; } .video-player .video-body { width: 676px; height: 416px; border: 2px solid #fff; }