/* 鍏ㄥ眬 */ * { padding: 0; margin: 0; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #555; } ::-webkit-scrollbar-track { /*婊氬姩鏉¢噷闈㈣建閬?/ background: #ddd; } /* @font-face { font-family: 'en'; src: url('../fonts/en.eot'),url('../fonts/en.woff') format('woff'),url('../fonts/en.ttf') format('truetype'),url('../fonts/en.svg') format('svg'); font-weight: normal; font-style: normal; } */ body, html { width: 100%; height: auto; background: #f0f0f0; font-family: 寰蒋闆呴粦, Microsoft Yahei, Helvetica, Arial, sans-serif; font-size: 16px; color: #333; min-height: 100vh; overflow-x: hidden; -webkit-overflow-scrolling: touch; -webkit-box-orient: vertical; -webkit-box-align: stretch; -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } button, input, select, textarea { color: #333; font: 0.875rem 寰蒋闆呴粦, Microsoft Yahei, Helvetica, Arial, sans-serif; outline: none; } a { text-decoration: none; outline: none; color: #333; } a:hover, a:focus { color: #022658; } img { border: none; } /* .svg鍥剧墖鍏堝崰浣嶉殣钘忥紝寰呮牸寮忓寲鍚庡啀鏄剧ず锛岄伩鍏嶆牸寮忓寲鍓嶅洜涓哄~鍏呰壊涓嶄竴鑷存樉绀虹殑闂 */ .svg { visibility: hidden; } form { margin: 0px; padding: 0px; } input:focus, textarea:focus, a:focus, select:focus, button:focus { outline: none; } ul, ol, li { margin: 0px; padding: 0px; list-style-type: none; } .nowrap, ul.nowraps li { white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; } .clear { clear: both; } .hide { display: none; } .right { float: right; } .left { float: left; } .b { font-weight: bold; } .hand, .linka { cursor: pointer; } .tips { max-width: 80%; height: auto; padding: 5px 20px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.875rem; line-height: 180%; position: fixed; z-index: 1000; top: 40%; left: 50%; opacity: 0; text-align: center; border-radius: 20px; } .maskbg { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 1000; background: rgba(0, 0, 0, 0.7); display: none; overflow: auto; } .coverimg img, .coverthis { transition: all 0.5s; } .coverimg:hover img, .coverthis:hover { transform: scale(1.05); -ms-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); } .fit_cover { display: block; width: 100%; height: 100%; object-fit: cover; } .fit_contain { display: block; width: 100%; height: 100%; object-fit: contain; } .shadow { -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); } .shadow2 { -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); } .trans3 { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .trans5 { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .trans10 { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } /* placeholder棰滆壊 */ ::-webkit-input-placeholder { color: #bbb; } :-moz-placeholder { color: #bbb; } ::-moz-placeholder { color: #bbb; } :-ms-input-placeholder { color: #bbb; } /* loader鏍峰紡 */ .loading { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 1000; background: rgba(0, 0, 0, .5); } .nb-spinner { width: 70px; height: 70px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; background: transparent; border-top: 3px solid #64b4f6; border-right: 3px solid transparent; border-radius: 50%; -webkit-animation: 1s spin linear infinite; animation: 1s spin linear infinite; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 澶撮儴 ----------------------------------------------------*/ .headbox { width: 100%; height: 100px; background: #0b1e34; } .head { width: 100%; height: 100px; background: #f0f0f0; position: fixed; left: 0; top: 0; z-index: 100; -moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); } .head.out { opacity: 0; top: -100px; } .logo { height: 18px; margin: 40px 40px 0 160px; float: left; overflow: hidden; } .logo img { display: block; height: 100%; width: auto; } .navi { float: left; text-align: center; } .navi a, .buybtn a { display: block; } .navi>li { height: 120px; position: relative; float: left; } .navi>li::before, .buybtn::before { content: ''; width: 100%; height: 0; background: #19559b; position: absolute; left: 0; top: 0; z-index: 5; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .navi>li.on::before { height: 3px; } .navi>li:hover::before, .buybtn:hover::before { height: 100%; -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); } .navi>li>a, .buybtn>a { line-height: 100px; font-size: 1rem; padding: 0 40px; position: relative; z-index: 10; } .navi>li:hover>a, .buybtn:hover>a { color: #fff; font-weight: bold; } .navi>li>ul { width: 100%; height: 0; overflow: hidden; background: rgba(0, 40, 86, .5); position: fixed; left: 0; top: 100px; z-index: 8; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .navi>li:hover>ul { height: 100px; padding-top: 20px; } .navi>li>ul>li { float: left; height: 100%; } .navi>li>ul>li>a { line-height: 80px; font-size: 0.875rem; color: #fff; padding: 0 35px; position: relative; overflow: hidden; } .navi>li>ul>li>a::before, .navi>li>ul>li>a::after { content: ''; position: absolute; width: 10px; height: 38px; opacity: 0; top: 20px; z-index: 10; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .navi>li>ul>li>a::before { background: url(/static/images/navaro1.png) no-repeat; background-size: contain; left: -20px; } .navi>li>ul>li>a::after { background: url(/static/images/navaro2.png) no-repeat; background-size: contain; right: -20px; } .navi>li>ul>li>a:hover::before { left: 10px; opacity: .5; } .navi>li>ul>li>a:hover::after { right: 10px; opacity: .5; } .buybtn { height: 120px; position: relative; float: right; margin-right: 120px; } .buybtn>ul { width: 100%; height: 0; overflow: hidden; background: rgba(0, 40, 86, .5); position: absolute; left: 0; top: 100px; z-index: 8; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .buybtn:hover>ul { height: auto; padding-top: 20px; padding-bottom: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .buybtn>ul>li>a { line-height: 45px; font-size: 0.875rem; color: #fff; text-align: center; } .buybtn>ul>li>a:hover { background: rgba(0, 40, 86, .5); } .seekbox { width: 180px; height: 30px; float: right; margin: 35px 20px 0 0; } .seekbox input { display: block; width: calc(100% - 40px); height: 28px; float: left; background: none; border: none; border-bottom: 1px solid #ccc; line-height: 28px; font-size: 0.875rem; color: #666; text-align: center; } .seekb { width: 35px; height: 30px; float: left; cursor: pointer; } .seekb .svg { display: block; width: 18px; height: 18px; margin: 8px 0 5px; } .seekb .svg path { fill: #666; } /* 閫氱敤杞挱 */ .swipebox { width: 100%; height: auto; position: relative; } .swipe { width: 100vw; visibility: hidden; overflow: hidden; position: relative; } .swipeli { float: left; position: relative; } .swipelip { width: 100%; height: calc(100vh - 100px); margin: 0 auto; overflow: hidden; } .swipelip img { display: block; width: 100%; height: 100%; object-fit: cover; } .swipenavi { width: 100%; height: auto; position: absolute; bottom: 30px; text-align: right; padding-right: 120px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pager em { display: inline-block; width: 10px; height: 10px; background: rgba(0, 0, 0, .3); margin: 0 8px; font-style: normal; overflow: hidden; font-size: 0px; border-radius: 50%; cursor: pointer; } .pager em.on { background: rgba(0, 0, 0, 1); } .dalislide { width: 100%; height: auto; max-height: 100vh; overflow: hidden; position: relative; } .slidep { width: 100%; height: 100%; position: relative; overflow: hidden; } .slidep li { width: 100%; height: auto; position: absolute; overflow: hidden; left: 0; top: 0; z-index: 0; display: none; } .slidep li img, .slidep li video { width: 100%; height: auto; display: block; } .slidep.cover li { height: 100%; } .slidep.cover li img, .slidep.cover li video { height: 100%; object-fit: cover; } .slideb { width: 100%; height: auto; position: absolute; z-index: 10; bottom: 30px; text-align: right; padding-right: 100px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .slideb em { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: rgba(0, 0, 0, .3); cursor: pointer; border-radius: 50%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .slideb em.on { background: rgba(0, 0, 0, 1); } .slideleft,.slideright { width: 60px; height: 60px; position: absolute; top: 50%; margin-top: -30px; opacity: .5; z-index: 100; cursor: pointer; transition: All 0.3s ease-in-out; -webkit-transition: All 0.3s ease-in-out; -moz-transition: All 0.3s ease-in-out; -o-transition: All 0.3s ease-in-out; } .slideleft { left: -50px; background: url(/static/images/aleft.png) center no-repeat; } .slideright { right: -50px; background: url(/static/images/aright.png) center no-repeat; } .slideleft:hover,.slideright:hover { opacity: 1; } .dalislide:hover .slideleft { left: 50px; } .dalislide:hover .slideright { right: 50px; } /* 渚ц竟 */ .rightbar { width: 60px; height: auto; overflow: hidden; position: fixed; right: 50px; bottom: 50px; z-index: 1000; } .rightbar img { display: block; width: 60px; height: 60px; cursor: pointer; } /* 椤电爜 */ .pagebox { padding: 30px 0 80px 0; } .pagination { height: auto; padding: 10px 0px; overflow: hidden; text-align: center; font-size: 0; } .pagination a, .pagination p, .pagination span { display: inline-block; margin-right: 3px; padding: 0 15px; border: 1px #f0f0f0 solid; text-decoration: none; color: #808080; font-size: 1rem; line-height: 40px; border-radius: 3px; } .pagination a#pagefirst, .pagination a#pagelast { display: none; } .pagination span { cursor: pointer; } .pagination p.pageGo { border-left: 0; cursor: pointer; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 5px; display: none; } .pagination input { /* display: inline-block; */ display: none; padding: 0; border: 1px solid #ddd; border-right: 0; background: #fff; color: #808080; font-size: 14px; line-height: 40px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; width: 40px; text-align: center; } .pagination a:hover { border: 1px #abb9c9 solid; } .pagination a.cur, .pagination p.cur { border: 1px solid #385575; color: #002856; font-weight: bold; } .pagination p.pageRemark { display: none; margin: 10px auto 0 auto; border: none; background: none; color: #666; } .pagination p.pageEllipsis { border: none; background: none; color: #808080; padding: 0 12px; } .ckbox_remove { width: 90px; line-height: 26px; background: rgba(16, 140, 255, 0.6); color: #fff; font-size: 14px; text-align: center; border-radius: 15px; position: absolute; right: 200px; bottom: 10px; cursor: pointer; } .footbox { width: 100%; height: auto; overflow: hidden; background: #f8f8f8; position: relative; z-index: 1; } .flogo { margin-top: 100px; height: auto; overflow: hidden; text-align: center; } .fico { margin-top: 140px; text-align: center; height: auto; font-size: 0; } .ficop { width: 9.5%; height: auto; display: inline-block; position: relative; vertical-align: top; } .ficop.line { border-left: 1px solid #999; } .ficop img.ico, .ficop img.ico2 { display: block; width: 60%; height: 60px; object-fit: contain; margin: 0 auto; } .ficop img.ico2 { display: none; } .ficop:hover img.ico { display: none; } .ficop:hover img.ico2 { display: block; } .ficop p { display: none; width: 140px; height: 140px; padding: 5px; background: #fff; position: absolute; left: 50%; margin-left: -75px; top: -170px; z-index: 10; -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); } .ficop:hover p { display: block; } .ficop p img { display: block; width: 100%; height: 100%; object-fit: contain; } .ficop p::after { content: ''; width: 0; height: 0; position: absolute; left: 50%; margin-left: -4px; top: 100%; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #fff; } .ficop span { display: block; line-height: 180%; font-size: 0.9rem; color: #666; text-align: center; margin-top: 25px; } .ficop:hover span { color: #222; } .fnav { margin-top: 100px; text-align: center; height: auto; font-size: 0; overflow: hidden; } .fnav span { display: inline-block; vertical-align: top; padding: 0 90px 0 30px; font-size: 0.875rem; line-height: 2.1rem; } .fnav span.t { font-weight: bold; padding: 0; } .fnav span a:hover { color: #022658; text-decoration: underline; } .fnav img { display: inline-block; vertical-align: top; } .fbq { width: calc(100% - 330px); height: 80px; overflow: hidden; margin: 80px auto 0 auto; border-top: 1px solid #999; font-size: 0.75rem; line-height: 30px; padding-top: 10px; } @media screen and (max-width: 1680px) { body, html { font-size: 15px; } .headbox, .head { height: 80px; } .logo { height: 16px; margin: 30px 30px 0 100px; } .navi>li { height: 100px; } .navi>li>a, .buybtn>a { line-height: 80px; padding: 0 30px; } .navi>li>ul { top: 80px; } .navi>li:hover>ul { height: 80px; padding-top: 20px; } .navi>li>ul>li>a { line-height: 60px; padding: 0 30px; } .navi>li>ul>li>a::before, .navi>li>ul>li>a::after { width: 8px; height: 30px; top: 15px; } .buybtn { height: 100px; margin-right: 100px; } .buybtn>ul { top: 80px; } .buybtn>ul>li>a { line-height: 40px; } .seekbox { width: 160px; height: 30px; margin: 25px 15px 0 0; } .flogo { margin-top: 80px; } .flogo img { height: 30px; } .fico { margin-top: 120px; } .ficop img.ico, .ficop img.ico2 { height: 50px; } .ficop p { width: 120px; height: 120px; margin-left: -65px; top: -150px; } .ficop span { margin-top: 20px; } .fnav { margin-top: 80px; } .fnav span { padding: 0 80px 0 25px; } .fnav img { height: 110px; } .fbq { width: calc(100% - 270px); margin: 60px auto 0 auto; height: 60px; } .rightbar { width: 50px; right: 40px; bottom: 40px; } .rightbar img { width: 50px; height: 50px; } } @media screen and (max-width: 1440px) { body, html { font-size: 14px; } .headbox, .head { height: 70px; } .logo { height: 14px; margin: 27px 30px 0 80px; } .navi>li { height: 85px; } .navi>li>a, .buybtn>a { line-height: 70px; padding: 0 30px; } .navi>li>ul { top: 70px; } .navi>li:hover>ul { height: 70px; padding-top: 15px; } .navi>li>ul>li>a { line-height: 50px; padding: 0 25px; } .navi>li>ul>li>a::before, .navi>li>ul>li>a::after { top: 12px; } .buybtn { height: 85px; margin-right: 50px; } .buybtn>ul { top: 70px; } .seekbox { width: 150px; height: 30px; margin: 20px 10px 0 0; } .seekb { width: 30px; height: 30px; } .seekb .svg { display: block; width: 16px; height: 16px; margin: 8px 0 5px; } .flogo { margin-top: 60px; } .flogo img { height: 25px; } .fico { margin-top: 100px; } .ficop img.ico, .ficop img.ico2 { height: 40px; } .ficop p { width: 110px; height: 110px; margin-left: -55px; top: -140px; } .ficop span { margin-top: 15px; } .fnav { margin-top: 70px; } .fnav span { padding: 0 70px 0 20px; } .fnav img { height: 90px; } .fbq { width: calc(100% - 240px); height: 50px; } .rightbar { width: 45px; right: 40px; bottom: 40px; } .rightbar img { width: 45px; height: 45px; } } @media screen and (max-width: 1280px) { body, html { font-size: 12px; } .headbox, .head { height: 60px; } .logo { height: 12px; margin: 23px 20px 0 60px; } .navi>li { height: 75px; } .navi>li>a, .buybtn>a { line-height: 60px; padding: 0 30px; } .navi>li>ul { top: 60px; } .navi>li:hover>ul { height: 60px; padding-top: 15px; } .navi>li>ul>li>a { line-height: 40px; padding: 0 20px; font-size: 0.75rem; } .navi>li>ul>li>a::before, .navi>li>ul>li>a::after { width: 6px; height: 25px; top: 10px; } .buybtn { height: 75px; margin-right: 30px; } .buybtn>ul { top: 60px; } .buybtn>ul>li>a { line-height: 40px; font-size: 0.75rem; } .seekbox { width: 130px; height: 30px; margin: 15px 10px 0 0; } .rightbar { width: 40px; right: 40px; bottom: 40px; } .rightbar img { width: 40px; height: 40px; } .fbq { width: calc(100% - 160px); } } @media screen and (max-width: 1024px) { .logo { margin: 23px 20px 0 20px; } .navi>li>a, .buybtn>a { padding: 0 20px; } .buybtn { margin-right: 20px; } .buybtn>ul>li>a { line-height: 30px; } .rightbar { width: 30px; right: 30px; bottom: 30px; } .rightbar img { width: 30px; height: 30px; } .fbq { width: calc(100% - 60px); } } @media screen and (max-width: 800px) { }