.left { float: left; } .right { float: right; } @font-face { font-family: "FZ"; src: url("../fonts/FZZHJW.woff2") format("woff2"), url("../fonts/FZZHJW.woff") format("woff"), url("../fonts/FZZHJW.ttf") format("truetype"), url("../fonts/FZZHJW.eot") format("embedded-opentype"), url("../fonts/FZZHJW.svg") format("svg"), url("../fonts/FZZHJW.otf") format("opentype"); } @font-face { font-family: "SYHL"; src: url("../fonts/SourceHanSansCN-Light.woff2") format("woff2"), url("../fonts/SourceHanSansCN-Light.woff") format("woff"), url("../fonts/SourceHanSansCN-Light.ttf") format("truetype"), url("../fonts/SourceHanSansCN-Light.eot") format("embedded-opentype"), url("../fonts/SourceHanSansCN-Light.svg") format("svg"), url("../fonts/SourceHanSansCN-Light.otf") format("opentype"); } .fFz { font-family: FZ; } .fSy { font-family: SYHL; } .table { width: 100%; height: 100%; display: table; } .table .table-cell { width: 100%; height: 100%; vertical-align: middle; display: table-cell; } .w1200 { width: 90%; height: auto; margin: 0 auto; max-width: 1200px; } .w1366 { width: 90%; height: auto; margin: 0 auto; max-width: 1366px; } .fz30 { font-size: 30px; line-height: 30px; } @media (max-width: 1366px) { .fz30 { font-size: 24px; line-height: 24px; } } @media (max-width: 1200px) { .fz30 { font-size: 20px; line-height: 20px; } } @media (max-width: 768px) { .fz30 { font-size: 18px; line-height: 18px; } } .pt100 { padding: 100px 0; } @media (max-width: 1200px) { .pt100 { padding: 60px 0; } } @media (max-width: 768px) { .pt100 { padding: 40px 0; } } .pt150 { margin: 150px 0; } @media (max-width: 1200px) { .pt150 { margin: 80px 0; } } @media (max-width: 768px) { .pt150 { margin: 60px 0; } } @media (max-width: 460px) { .pt150 { margin: 40px 0; } } .main { width: 100%; height: auto; overflow: hidden; background-color: #fff; position: relative; zoom: 1; overflow: hidden; } .bc { background-size: cover; background-position: center; background-repeat: no-repeat; } .pic.hover { overflow: hidden; } .pic.hover img { transition: transform 1.5s; } @media (min-width: 1024px) { .pic.hover:hover img { transform: scale(1.1); } } .headerBox { height: 130px; } .headerBox.on { height: 84px; } @media (max-width: 1024px) { .headerBox { height: 80px; } .headerBox.on { height: 80px; } } @media (max-width: 768px) { .headerBox { height: 60px; } .headerBox.on { height: 60px; } } .header { width: 100%; height: 130px; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 100; } .header .logo { width: 100px; height: auto; margin: 0 auto; display: block; padding-top: 12px; z-index: 5; position: relative; } .header .nav { width: 100%; height: auto; position: relative; } .header .nav ul { width: 100%; text-align: center; font-size: 0; } .header .nav ul li { font-size: 14px; line-height: 20px; margin: 0 20px; padding: 24px 0; display: inline-block; } .header .nav ul li .tits { color: #333; padding: 0 15px; position: relative; } .header .nav ul li .tits i { width: 19px; height: 13px; position: absolute; bottom: -25px; left: 50%; margin-left: -9.5px; background-image: url("../img/header_icon1.png"); background-position: center; background-repeat: no-repeat; display: none; } .header .nav ul li .mnav { width: 100%; left: 0; position: absolute; top: 68px; background-color: #f7f9fa; display: none; } .header .nav ul li .mnav .mnav-new { width: 1000px; max-width: 90%; padding-top: 40px; padding-bottom: 30px; } .header .nav ul li .mnav .mnav-new .cnav { float: left; } .header .nav ul li .mnav .mnav-new .cnav dl { width: 135px; height: auto; float: left; text-align: left; } .header .nav ul li:nth-last-of-type(1) .mnav .mnav-new .cnav dl{width:300px;} .header .nav ul li .mnav .mnav-new .cnav dl dt { font-size: 14px; line-height: 14px; color: #333; margin-bottom: 16px; font-weight: bold; } .header .nav ul li .mnav .mnav-new .cnav dl dt a { color: #18368b; } .header .nav ul li .mnav .mnav-new .cnav dl dd a { font-size: 12px; line-height: 36px; color: #666; } @media (min-width: 1024px) { .header .nav ul li .mnav .mnav-new .cnav dl dd a:hover { color: #18368b; } } .header .nav ul li .mnav .mnav-new .pic { width: 204px; float: right; margin-left: 20px; } .header .nav ul li .mnav .mnav-new .pic a { width: 100%; height: auto; display: block; } .header .nav ul li .mnav1 { width: 120px; left: 50%; margin-left: -60px; position: absolute; top: 68px; background-color: #f7f9fa; display: none; padding: 10px 0; } .header .nav ul li .mnav1 a { width: 100%; height: auto; text-align: center; font-size: 14px; line-height: 34px; color: #666; display: block; } @media (min-width: 1024px) { .header .nav ul li .mnav1 a:hover { color: #18368b; } } .header .nav ul li.aa { position: relative; } .header .nav ul li:nth-child(2) .mnav .mnav-new dl:nth-child(1) { width: 190px; } @media (min-width: 1024px) { .header .nav ul li:hover .tits { color: #18368b; } .header .nav ul li:hover .tits i { display: block; } .header .nav ul li:hover .mnav { display: block; } .header .nav ul li:hover .mnav1 { display: block; } } .header .nav ul li.on .tits { color: #18368b; } .header .nav .bg { width: 100%; height: 2000px; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 68px; left: 0; z-index: -1; display: none; } .header .tags { position: absolute; top: 28px; right: 4.4%; z-index: 5; } .header .tags a { font-size: 14px; line-height: 18px; color: #333; float: right; } @media (min-width: 1024px) { .header .tags a:hover { color: #18368b; } } .header .tags .shop { padding-left: 24px; background-position: left center; background-image: url("../img/shop.png"); background-repeat: no-repeat; } @media (min-width: 1024px) { .header .tags .shop:hover { background-image: url("../img/shop_h.png"); } } .header .tags .ren { width: 19px; height: 18px; display: block; background-position: center; background-image: url("../img/user.png"); background-repeat: no-repeat; } @media (min-width: 1024px) { .header .tags .ren:hover { background-image: url("../img/user_h.png"); } } .header .tags .search { width: 18px; height: 18px; display: block; background-position: center; background-image: url("../img/search.png"); background-repeat: no-repeat; } @media (min-width: 1024px) { .header .tags .search:hover { background-image: url("../img/search_h.png"); } } .header .tags span { display: block; width: 1px; height: 16px; background-color: #c4c4c4; float: right; margin: 1px 30px 0; } .header.on { background-color: rgba(255, 255, 255, 0.9); height: auto !important; } .header.on .logo { width: 100px; left: 4.4%; top: 10px; padding-top: 0; position: absolute; } .header.on .tags { top: 24px; } @media (max-width: 1510px) { .header .nav ul li { margin: 0 15px; } .header .nav ul li .tits { padding: 0 10px; } .header .tags span { margin: 1px 20px 0; } } @media (max-width: 1200px) { .header .nav ul li { margin: 0 10px; } .header.on .nav { margin-left: -4%; } .header.on .nav ul li .mnav { margin-left: 4%; } .header.on .nav .bg { margin-left: 4%; } .header .tags span { margin: 1px 12px 0; } } @media (max-width: 1024px) { .header { display: none; } } .header-m { width: 100%; height: 80px; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 100; display: none; } .header-m .navClick { width: 38px; height: 28px; top: 26px; left: 5.3%; position: absolute; background-size: 100% auto; background-position: center; background-repeat: no-repeat; background-image: url("../img/navClick.png"); } .header-m .logo { width: 102px; height: auto; display: block; margin: 15px auto 0; position: relative; z-index: 1001; } .header-m .searchClick { width: 31px; height: 34px; position: absolute; top: 23px; right: 5.3%; background-size: 100% auto; background-position: center; background-repeat: no-repeat; background-image: url("../img/searchM.png"); } .header-m .searchClick.on { display: none; } .header-m .mmnav { width: 100%; height: 100vh; position: fixed; z-index: 100; top: 0; left: 0; background-color: #fff; display: none; } .header-m .mmnav ul { margin-top: 100px; width: 89.3%; height: auto; height: -webkit-calc(100% - 120px); height: calc(100% - 120px); overflow-y: scroll; margin: 0 auto; } .header-m .mmnav ul li { width: 100%; height: auto; border-bottom: 1px solid #d2d2d2; } .header-m .mmnav ul li .tits { font-size: 34px; line-height: 110px; color: #333; display: block; } .header-m .mmnav ul li .tits span { margin-left: 22px; float: left; } .header-m .mmnav ul li .tits i { float: right; width: 21px; height: 110px; margin-right: 22px; background-position: center; background-size: 100% auto; background-repeat: no-repeat; background-image: url("../img/nav_icon1.png"); } .header-m .mmnav ul li dl { width: -webkit-calc(100% - 40px); width: calc(100% - 40px); padding-left: 40px; display: none; padding-bottom: 10px; } .header-m .mmnav ul li dl dd { width: 100%; } .header-m .mmnav ul li dl dd .tit { width: 100%; font-size: 28px; line-height: 80px; height: 80px; color: #333; display: block; } .header-m .mmnav ul li dl dd .tit span { float: left; } .header-m .mmnav ul li dl dd .tit i { float: right; width: 21px; height: 80px; margin-right: 22px; background-position: center; background-size: 100% auto; background-repeat: no-repeat; background-image: url("../img/nav_icon1.png"); } .header-m .mmnav ul li dl dd .nn { width: 100%; height: auto; display: none; } .header-m .mmnav ul li dl dd .nn a { width: 100%; height: auto; font-size: 28px; line-height: 80px; color: #999; display: block; } .header-m .mmnav ul li dl dd.on .tit i { background-image: url("../img/nav_icon1_h.png"); } .header-m .mmnav ul li.on .tits i { background-image: url("../img/nav_icon1_h.png"); } .header-m .mmnav .tel { width: 498px; height: 68px; border-radius: 34px; border: 1px solid #18368b; text-align: center; display: block; margin: 15px auto 0; font-size: 24px; line-height: 68px; color: #18368b; } .header-m .mmnav .tel span { display: inline-block; padding-left: 32px; background-position: left center; background-repeat: no-repeat; background-image: url("../img/mTel.png"); } .header-m .mmnav .mCloseMnav { width: 27px; height: 27px; position: absolute; top: 16px; right: 5.3%; background-size: cover; background-repeat: no-repeat; background-image: url("../img/mClose.png"); } @media (max-width: 1024px) { .header-m { display: block; } } @media (max-width: 768px) { .header-m { height: 60px; } .header-m .navClick { width: 26px; height: 20px; top: 20px; } .header-m .searchClick { width: 24px; height: 28px; top: 16px; } .header-m .logo { width: 70px; } .header-m .mmnav ul { margin-top: 70px; height: -webkit-calc(100% - 90px); height: calc(100% - 90px); } .header-m .mmnav ul li .tits { font-size: 20px; line-height: 55px; } .header-m .mmnav ul li .tits i { height: 55px; width: 14px; } .header-m .mmnav ul li dl dd .tit { font-size: 18px; line-height: 45px; height: 45px; } .header-m .mmnav ul li dl dd .tit i { height: 45px; width: 14px; } .header-m .mmnav ul li dl dd .nn a { font-size: 18px; line-height: 45px; } .header-m .mmnav .tel { width: 238px; height: 33px; margin-top: 20px; font-size: 14px; line-height: 33px; } .header-m .mmnav .tel span { background-size: 15px auto; padding-left: 24px; } .header-m .mmnav .mCloseMnav { width: 20px; height: 20px; } } @media (max-width: 500px) { .header-m .mmnav ul li .tits { font-size: 16px; line-height: 50px; } .header-m .mmnav ul li .tits span { margin-left: 15px; } .header-m .mmnav ul li .tits i { height: 50px; width: 10px; margin-right: 15px; } .header-m .mmnav ul li dl { width: -webkit-calc(100% - 25px); width: calc(100% - 25px); padding-left: 25px; } .header-m .mmnav ul li dl dd .tit { font-size: 14px; line-height: 45px; height: 45px; } .header-m .mmnav ul li dl dd .tit i { height: 40px; width: 10px; margin-right: 15px; } .header-m .mmnav ul li dl dd .nn a { font-size: 14px; line-height: 40px; } } .videoBox { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 5; } .videoBox.on { opacity: 0; transition: opacity 2s; } .index-banner { width: 100%; height: auto; position: relative; overflow: hidden; } .index-banner ul { width: 100%; height: auto; } .index-banner ul li { width: 100%; height: auto; overflow: hidden; } .index-banner ul li a { position: relative; width: 100%; height: auto; display: block; } .index-banner ul li a .img1 { position: relative; z-index: 4; } .index-banner ul li a .img2 { position: absolute; z-index: 3; bottom: -1.5%; left: -5%; width: 110%; -o-object-fit: cover; object-fit: cover; -webkit-filter: url(#waterB); filter: url(#waterB); } .index-banner .btns { width: 100%; text-align: center; font-size: 0; position: absolute; bottom: 30px; left: 0; z-index: 4; } .index-banner .btns span { width: 14px; height: 14px; background: none; background-image: url("../img/banner_icon.png"); background-position: center; background-repeat: no-repeat; margin: 0 15px; opacity: 0.3; } .index-banner .btns span.swiper-pagination-bullet-active { opacity: 1; } @media (max-width: 1024px) { .index-banner { display: none; } } .bbbb { width: 2500px; height: 1130px; position: absolute; left: -20%; bottom: 0; background-position: bottom left; background-repeat: no-repeat; -webkit-transform-origin: bottom left; transform-origin: bottom left; opacity: 0; background-image: url("/img/15.png"); z-index: -50; } .bbbb.on { -webkit-animation: myfirst 3.5s linear; animation: myfirst 3.5s linear; } @media (max-width: 768px) { .bbbb { left: -50%; display: none; } } @keyframes myfirst { 0% { opacity: 0; } 1% { opacity: 1; left: -20%; bottom: 0; z-index: 10; transform: scale(1); } 25% { transform: scale(1.6); bottom: -10%; left: 40%; opacity: 1; z-index: 10; } 100% { transform: scale(2); left: 110%; opacity: 1; z-index: 10; } } @-moz-keyframes myfirst { 0% { opacity: 0; } 1% { opacity: 1; left: -20%; bottom: 0; z-index: 10; transform: scale(1); } 25% { transform: scale(1.6); bottom: -10%; left: 40%; opacity: 1; z-index: 10; } 100% { transform: scale(2); left: 110%; opacity: 1; z-index: 10; } } @-webkit-keyframes myfirst { 0% { opacity: 0; } 1% { opacity: 1; left: -20%; bottom: 0; z-index: 10; transform: scale(1); } 25% { transform: scale(1.6); bottom: -10%; left: 40%; opacity: 1; z-index: 10; } 100% { transform: scale(2); left: 110%; opacity: 1; z-index: 10; } } .index-banner-m { width: 100%; height: auto; position: relative; display: none; } .index-banner-m ul { width: 100%; height: auto; } .index-banner-m ul li { width: 100%; height: auto; } .index-banner-m .btns { width: 100%; text-align: center; font-size: 0; position: absolute; bottom: 15px; left: 0; z-index: 4; } .index-banner-m .btns span { width: 14px; height: 14px; background: none; background-image: url("../img/banner_icon.png"); background-position: center; background-repeat: no-repeat; margin: 0 10px; opacity: 0.3; } .index-banner-m .btns span.swiper-pagination-bullet-active { opacity: 1; } @media (max-width: 1024px) { .index-banner-m { display: block; } } .index-title { text-align: center; color: #18368b; text-transform: uppercase; } .index-title .en { font-family: Arial; } .index-title .cn { margin-top: 13px; } @media (max-width: 768px) { .index-title .cn { margin-top: 6px; } } .index { position: relative; } .index .index-hot { width: 100%; position: relative; z-index: 5; } .index .index-hot .fish { width: 33.7%; position: absolute; top: 0.4%; left: 0; } .index .index-hot .fish img { position: absolute; top: 0; left: 0; -webkit-transition: left 1.5s,top 1.5s; transition: left 1.5s,top 1.5s; -o-object-fit: cover; object-fit: cover; -webkit-filter: url(#water); filter: url(#water); } .index .index-hot .fish canvas { position: absolute; top: 0; left: 0; visibility: visible; -webkit-transform: scale(1); opacity: 1; transform: scale(1); opacity: 1; -webkit-transition: -webkit-transform 1s cubic-bezier(0.6, 0.2, 0.1, 1) 1s, opacity 1s cubic-bezier(0.6, 0.2, 0.1, 1) 1s; transition: transform 1s cubic-bezier(0.6, 0.2, 0.1, 1) 1s, opacity 1s cubic-bezier(0.6, 0.2, 0.1, 1) 1s; } @media (min-width: 1024px) { .index .index-hot .fish:hover img:nth-child(1) { left: -80px; top: -20px; } .index .index-hot .fish:hover img:nth-child(2) { left: -80px; top: 40px; } .index .index-hot .fish:hover img:nth-child(3) { left: 40px; top: 60px; } .index .index-hot .fish:hover img:nth-child(4) { left: 100px; top: 140px; } } .index .index-hot .fish1 { width: 26.1%; position: absolute; bottom: 0; right: 0; } .index .index-hot .fish1 img { position: absolute; top: 0; left: 0; -webkit-transition: left 1.5s,top 1.5s; transition: left 1.5s,top 1.5s; -webkit-filter: url(#water1); filter: url(#water1); } @media (min-width: 1024px) { .index .index-hot .fish1:hover img:nth-child(1) { left: -20px; top: -100px; } .index .index-hot .fish1:hover img:nth-child(2) { left: -40px; top: -80px; } .index .index-hot .fish1:hover img:nth-child(3) { left: -20px; top: -40px; } .index .index-hot .fish1:hover img:nth-child(4) { left: 140px; top: 100px; } } .index .index-hot .w1200 { padding-top: 6.2%; padding-bottom: 3.1%; } .index .index-hot .w1200 .list { width: -webkit-calc(100% - 40px); width: calc(100% - 40px); margin: 40px auto 0; height: auto; position: relative; z-index: 5; } .index .index-hot .w1200 .list .itemLeft { width: 29.1%; height: auto; float: left; margin-right: 6.35%; } .index .index-hot .w1200 .list .itemLeft .item { width: 100%; height: auto; margin-bottom: 25px; position: relative; } .index .index-hot .w1200 .list .itemLeft .item a { display: block; } .index .index-hot .w1200 .list .itemLeft .item a .picBox { width: 100%; height: auto; position: relative; } .index .index-hot .w1200 .list .itemLeft .item a .picBox .pic { width: 100%; height: auto; position: relative; } .index .index-hot .w1200 .list .itemLeft .item a .picBox .pic .tag { width: 49px; height: auto; position: absolute; top: 20px; right: 7.7%; } .index .index-hot .w1200 .list .itemLeft .item a .picBox .pic .tag img { display: block; margin-bottom: 6px; } .index .index-hot .w1200 .list .itemLeft .item a .picBox .picHover { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; opacity: 0; background-color: #f7fbfc; -webkit-transition: opacity .5s; transition: opacity .5s; } .index .index-hot .w1200 .list .itemLeft .item a .con { width: 100%; height: 106px; padding-top: 22px; position: relative; text-align: center; } .index .index-hot .w1200 .list .itemLeft .item a .con .tits { max-width: 90%; margin: 0 auto; font-size: 16px; line-height: 16px; height: 16px; color: #333; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .index .index-hot .w1200 .list .itemLeft .item a .con .tit { font-size: 12px; line-height: 12px; color: #666; margin-top: 12px; } .index .index-hot .w1200 .list .itemLeft .item a .con .tit1 { width: 100%; text-align: center; color: #12368a; font-family: Arial; font-size: 0; position: relative; margin-top: 19px; } .index .index-hot .w1200 .list .itemLeft .item a .con .tit1 span { font-size: 14px; line-height: 14px; } .index .index-hot .w1200 .list .itemLeft .item a .con .tit1 i { width: 1px; height: 10px; margin: 0 10px; display: inline-block; background-color: #c4c4c4; } .index .index-hot .w1200 .list .itemLeft .item .shop { width: 180px; height: 46px; display: block; text-align: center; border-radius: 23rem; background-color: #12368a; position: absolute; bottom: 0; left: 50%; margin-left: -90px; font-size: 14px; line-height: 46px; color: #fff; transform: translateY(20px); opacity: 0; -webkit-transition: transform .5s,opacity .5s; transition: transform .5s,opacity .5s; } .index .index-hot .w1200 .list .itemLeft .item .shop span { padding-right: 17px; background-image: url("../img/icon1.png"); background-position: right center; background-repeat: no-repeat; } @media (min-width: 1024px) { .index .index-hot .w1200 .list .itemLeft .item:hover a .picHover { opacity: 1; } .index .index-hot .w1200 .list .itemLeft .item:hover .shop { transform: translateY(0); opacity: 1; } } .index .index-hot .w1200 .list .itemLeft:nth-child(2) { margin-top: 8.7%; } .index .index-hot .w1200 .list .itemLeft:last-child { margin-right: 0; } .index .index-hot-m { display: none; width: 100%; padding-top: 6.2%; } .index .index-hot-m .box { margin-top: 5%; } .index .index-hot-m .box .item { width: 100%; height: auto; margin-bottom: 30px; } .index .index-hot-m .box .item a { width: 100%; display: block; height: auto; } .index .index-hot-m .box .item a .pic { width: 100%; height: auto; position: relative; } .index .index-hot-m .box .item a .pic .tag { width: 11.9%; height: auto; position: absolute; top: 20px; right: 7.7%; } .index .index-hot-m .box .item a .pic .tag img { display: block; margin-bottom: 6px; } .index .index-hot-m .box .item a .con { width: 100%; position: relative; text-align: center; padding-top: 15px; } .index .index-hot-m .box .item a .con .tits { max-width: 90%; margin: 0 auto; font-size: 16px; line-height: 16px; height: 16px; color: #333; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .index .index-hot-m .box .item a .con .tit { font-size: 12px; line-height: 12px; color: #666; margin-top: 8px; } .index .index-hot-m .box .item a .con .tit1 { width: 100%; text-align: center; color: #12368a; font-family: Arial; font-size: 0; position: relative; margin-top: 10px; } .index .index-hot-m .box .item a .con .tit1 span { font-size: 14px; line-height: 14px; } .index .index-hot-m .box .item a .con .tit1 i { width: 1px; height: 10px; margin: 0 10px; display: inline-block; background-color: #c4c4c4; } .index .index-hot-m .box .item a .con .more { width: 120px; height: 38px; display: block; text-align: center; border-radius: 23rem; background-color: #12368a; margin: 20px auto 0; font-size: 14px; line-height: 38px; color: #fff; } .index .index-hot-m .box .item a .con .more span { padding-right: 17px; background-image: url("../img/icon1.png"); background-position: right center; background-repeat: no-repeat; } .index .index-product { width: 100%; height: auto; background-color: #f7fbfc; padding-top: 4%; padding-bottom: 5%; } .index .index-product .content { margin: 2.5% auto 0; } .index .index-product .content .item { width: 100%; height: auto; margin-bottom: 10%; } .index .index-product .content .item .pic { width: 25.8%; height: auto; float: left; } .index .index-product .content .item .pic img { width: 153.5%; height: auto; margin-left: -48.4%; } .index .index-product .content .item .itemCen { width: 28.75%; height: auto; float: left; position: relative; margin-left: 5.6%; margin-top: -1.6%; } .index .index-product .content .item .itemCen .picBox { width: 100%; height: auto; position: relative; } .index .index-product .content .item .itemCen .picBox.picBox3{ margin-top: 15%; } .index .index-product .content .item .itemCen .picBox.picBox1 .img1 { width: 83.8%; margin-left: 6.7%; } .index .index-product .content .item .itemCen .picBox.picBox1 .img2 { width: 37.1%; height: auto; position: absolute; top: 59%; left: 2.7%; } .index .index-product .content .item .itemCen .picBox.picBox1 .img3 { width: 27.8%; height: auto; position: absolute; top: 15%; right: -2%; } .index .index-product .content .item .itemCen .picBox.picBox2 .img1 { width: 78.5%; z-index: 5; position: relative; margin-left: 24%; } .index .index-product .content .item .itemCen .picBox.picBox2 .img2 { width: 40.7%; top: 33%; left: 8%; position: absolute; } .index .index-product .content .item .itemCen .picBox.picBox2 .img3 { width: 40.6%; position: absolute; top: 51%; left: 48%; } .index .index-product .content .item .itemCen .picBox.picBox3 .img1 { width: 55.9%; margin-left: 8.6%; } .index .index-product .content .item .itemCen .picBox.picBox3 .img2 { width: 41.4%; position: absolute; left: -5.2%; top: 52%; } .index .index-product .content .item .itemCen .picBox.picBox3 .img3 { width: 44.9%; left: 66%; top: 10%; position: absolute; } .index .index-product .content .item .itemCen .iconBox { width: 100%; height: auto; margin-top: 14.5%; } .index .index-product .content .item .itemCen .iconBox .it { width: 23.5%; height: auto; float: left; margin-right: 14.75%; } .index .index-product .content .item .itemCen .iconBox .it .icon { width: 100%; height: auto; position: relative; } .index .index-product .content .item .itemCen .iconBox .it .icon .ic { width: 100%; height: auto; position: relative; } .index .index-product .content .item .itemCen .iconBox .it .icon .ic .icNew { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("../img/1515.png"); -webkit-transition: transform .5s; transition: transform .5s; } @media (min-width: 1024px) { .index .index-product .content .item .itemCen .iconBox .it .icon:hover .ic .icNew { transform: rotate(180deg); } } .index .index-product .content .item .itemCen .iconBox .it p { width: 140%; height: auto; text-align: center; font-size: 12px; line-height: 12px; margin-left: -20%; color: #666; margin-top: 14px; } .index .index-product .content .item .itemCen .iconBox .it:last-child { margin-right: 0; } .index .index-product .content .item .con { width: 34%; height: auto; float: right; padding-top: 9%; } .index .index-product .content .item .con .tits { font-size: 30px; line-height: 32px; color: #12368a; } .index .index-product .content .item .con .tit { font-size: 14px; line-height: 14px; color: #333; margin-top: 20px; } .index .index-product .content .item .con .txt { font-size: 12px; line-height: 20px; color: #666; width: 265px; max-width: 90%; margin-top: 35px; } .index .index-product .content .item .con .tit1 { font-size: 14px; line-height: 14px; font-family: Arial; color: #12368a; margin-top: 68px; } .index .index-product .content .item .con .tit1 span { float: left; } .index .index-product .content .item .con .tit1 i { width: 1px; height: 12px; margin-top: 1px; background-color: #c4c4c4; float: left; margin: 1px 10px 0; } .index .index-product .content .item .con .more { width: 178px; height: 44px; border-radius: 22px; display: block; border: 1px solid #12368a; text-align: center; font-size: 14px; line-height: 44px; margin-top: 30px; -webkit-transition: all .5s; transition: all .5s; background-color: #12368a; color: #fff; } .index .index-product .content .item .con .more span { padding-right: 17px; background-image: url("../img/icon1.png"); background-position: right center; background-repeat: no-repeat; } .index .index-product .content .item.item1 { margin-bottom: 12%; } .index .index-product .content .item.item1 .pic { float: right; } .index .index-product .content .item.item1 .pic img { width: 165.5%; margin-left: -42%; } .index .index-product .content .item.item1 .itemCen { float: right; margin-right: 5.7%; margin-left: 0; margin-top: 8%; } .index .index-product .content .item.item1 .itemCen .iconBox { margin-top: 4.5%; } .index .index-product .content .item.item1 .con { float: left; padding-top: 15.5%; } .index .index-product .content .item.item2 { margin-bottom: 0; } .index .index-product .content .item.item2 .pic img { width: 160%; margin-left: -46%; } .index .index-product .content .item.item2 .itemCen { margin-top: -0.4%; } .index .index-product .content .item.item2 .itemCen .iconBox { margin-top: 10%; } .index .index-product .content .item.item2 .con { padding-top: 12.2%; } .index .index-product-m { width: 100%; display: none; padding-top: 6.2%; } .index .index-product-m .box { width: 100%; height: auto; margin-top: 5%; } .index .index-product-m .box .item { width: 100%; height: auto; margin-bottom: 50px; } .index .index-product-m .box .item a { width: 100%; height: auto; } .index .index-product-m .box .item a .pic { width: 100%; height: auto; } .index .index-product-m .box .item a .picBox { width: 100%; height: auto; } .index .index-product-m .box .item a .picBox img { width: 32.5%; margin-right: 1.25%; margin-top: 1.25%; display: block; float: left; } .index .index-product-m .box .item a .picBox img:last-child { margin-right: 0; } .index .index-product-m .box .item a .con { width: 100%; height: auto; margin-top: 15px; } .index .index-product-m .box .item a .con .tits { text-align: center; font-size: 20px; line-height: 28px; color: #222; width: 100%; } .index .index-product-m .box .item a .con .tits span { position: relative; display: inline-block; } .index .index-product-m .box .item a .con .tits span i { font-size: 16px; } .index .index-product-m .box .item a .con .tits span:after { content: ""; width: 16px; height: 14px; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("../img/m_icon1.jpg"); position: absolute; left: -23px; top: 6px; } .index .index-product-m .box .item a .con .tits span:before { content: ""; width: 16px; height: 14px; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("../img/m_icon2.jpg"); position: absolute; right: -24px; top: 6px; } .index .index-product-m .box .item a .con .tag { width: 100%; height: auto; text-align: center; margin-top: 15px; } .index .index-product-m .box .item a .con .tag .icon { width: 110px; height: auto; display: inline-block; } .index .index-product-m .box .item a .con .tag .icon .ic { width: 41px; height: auto; margin: 0 auto; position: relative; } .index .index-product-m .box .item a .con .tag .icon .ic .icNew { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../img/1515.png"); } .index .index-product-m .box .item a .con .tag .icon p { font-size: 12px; text-align: center; line-height: 12px; color: #12368a; margin-top: 5px; width: 100%; margin-left: 0; } .index .index-product-m .box .item a .con .more { width: 120px; height: 38px; display: block; text-align: center; border-radius: 23rem; background-color: #12368a; margin: 20px auto 0; font-size: 14px; line-height: 38px; color: #fff; } .index .index-product-m .box .item a .con .more span { padding-right: 17px; background-image: url("../img/icon1.png"); background-position: right center; background-repeat: no-repeat; } .index .index-series { padding-top: 6%; } .index .index-series .content { margin-top: 4.6%; position: relative; overflow: hidden; } .index .index-series .content a { width: 100%; height: auto; display: block; } .index .index-series .content a.img2 { display: none; } @media (max-width: 768px) { .index .index-series .content a.img1 { display: none; } .index .index-series .content a.img2 { display: block; } } .index .index-series .content .bbbb { width: 140%; } .index .index-share { padding-top: 6%; padding-bottom: 6%; } .index .index-share .content { margin-top: 4.6%; } .index .index-share .content .itemBox { width: 49.5%; height: auto; } .index .index-share .content .itemBox a { width: 100%; height: auto; position: relative; display: block; overflow: hidden; } .index .index-share .content .itemBox a .con { width: 100%; height: 100%; background-color: rgba(0, 36, 128, 0.6); position: absolute; top: 0; left: 0; opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); -webkit-transition: opacity 1s,transform 1s; transition: opacity 1s,transform 1s; } .index .index-share .content .itemBox a .con .txt { width: 190px; height: auto; text-align: center; font-size: 12px; line-height: 18px; color: #fff; margin: 0 auto; } .index .index-share .content .itemBox a .con .xin { width: 87px; height: auto; margin: 18px auto 0; } @media (min-width: 1024px) { .index .index-share .content .itemBox a:hover .con { opacity: 1; transform: translateY(0px); } } .index .index-share .content .itemBox .item { width: 100%; height: auto; margin-bottom: 10px; } .index .index-share .content .itemBox .item a { width: 48.8%; } .index .index-share .content .itemBox .item1 { width: 100%; height: auto; } .index .index-share .content .itemBox.right .ietm { margin-bottom: 0; } .index .index-share .content .itemBox.right .item1 { margin-bottom: 10px; } .index .index-share .content-m { width: 100%; height: auto; margin-top: 4.6%; display: none; } .index .index-share .content-m .item { width: 49.2%; height: auto; float: left; margin-right: 1.6%; margin-bottom: 1.6%; } .index .index-share .content-m .item:nth-child(2n) { margin-right: 0; } .index .index-share .more { width: 178px; height: 44px; border-radius: 22px; display: block; border: 1px solid #12368a; text-align: center; font-size: 14px; line-height: 44px; color: #12368a; -webkit-transition: all .5s; transition: all .5s; margin: 5% auto 0; background-color: #12368a; color: #fff; } .index .index-share .more span { padding-right: 17px; background-image: url("../img/icon1.png"); background-position: right center; background-repeat: no-repeat; } .index .index-video { width: 100%; height: auto; background-color: #f7fbfc; padding-top: 4%; padding-bottom: 6.3%; position: relative; } .index .index-video .vBox { position: relative; cursor: pointer; overflow: hidden; z-index: 5; } .index .index-video .vBox .img1 { display: block; width: 100%; height: auto; position: relative; overflow: hidden; } .index .index-video .vBox .img1 .imgN { position: absolute; left: 0; width: 100%; height: 56%; bottom: 0; background-size: 100% auto; background-position: bottom center; -o-object-fit: cover; object-fit: cover; z-index: 10; -webkit-filter: url(#waterC); filter: url(#waterC); } .index .index-video .vBox .img2 { display: none; } .index .index-video .vBox .con { width: 100%; position: absolute; top: 40%; left: 0; text-align: center; text-shadow: 6px 1px 6px rgba(43, 66, 133, 0.2); } .index .index-video .vBox .con .tits { font-size: 47px; color: #fff; line-height: 47px; } .index .index-video .vBox .con .line { width: 263px; height: 2px; margin: 18px auto 0; background-image: url("../img/line.png"); background-position: center; background-repeat: no-repeat; } .index .index-video .vBox .con .tit { font-size: 17px; line-height: 17px; color: #fff; margin-top: 10px; } .index .index-video .vBox .con .icon { width: 60px; height: auto; margin: 134px auto 0; } .index .index-video .more { width: 178px; height: 44px; border-radius: 22px; border: 1px solid #fff; text-align: center; font-size: 14px; line-height: 44px; display: block; position: absolute; top: 55%; left: 50%; margin-left: -90px; color: #fff; z-index: 10; } .index .index-video .more span { padding-right: 18px; background-position: right center; background-repeat: no-repeat; background-image: url("../img/icon1.png"); } .index .index-video .fish { width: 33.7%; position: absolute; top: 0.4%; left: 0; } .index .index-video .fish img { position: absolute; top: 0; left: 0; -webkit-transition: left 1.5s,top 1.5s; transition: left 1.5s,top 1.5s; -o-object-fit: cover; object-fit: cover; -webkit-filter: url(#water); filter: url(#water); } .index .index-video .fish canvas { position: absolute; top: 0; left: 0; visibility: visible; -webkit-transform: scale(1); opacity: 1; transform: scale(1); opacity: 1; -webkit-transition: -webkit-transform 1s cubic-bezier(0.6, 0.2, 0.1, 1) 1s, opacity 1s cubic-bezier(0.6, 0.2, 0.1, 1) 1s; transition: transform 1s cubic-bezier(0.6, 0.2, 0.1, 1) 1s, opacity 1s cubic-bezier(0.6, 0.2, 0.1, 1) 1s; } @media (min-width: 1024px) { .index .index-video .fish:hover img:nth-child(1) { left: -80px; top: -20px; } .index .index-video .fish:hover img:nth-child(2) { left: -80px; top: 40px; } .index .index-video .fish:hover img:nth-child(3) { left: 40px; top: 60px; } .index .index-video .fish:hover img:nth-child(4) { left: 100px; top: 140px; } } @media (max-width: 1366px) { .index .index-product .content .item .con .tits { font-size: 30px; line-height: 32px; } .index .index-product .content .item .con { padding-top: 7%; } } @media (max-width: 1200px) { .index .index-hot .w1200 .list .itemLeft { width: 32%; margin-right: 2%; } .index .index-hot .w1200 .list .itemLeft .item { margin-bottom: 10px; } .index .index-product .content .item .itemCen .iconBox .it p { width: 140%; margin-left: -20%; } .index .index-product .content .item .con { width: 32%; } } @media (max-width: 1024px) { .index .index-hot .fish { display: none; } .index .index-hot .fish1 { display: none; } .index .index-video .fish { display: none; } .index .index-product .content .item .con .tit1 { margin-top: 25px; } .index .index-product .content .item .con .more { margin-top: 15px; } .index .index-product .content .item .con .tits { font-size: 20px; line-height: 22px; } .index .index-share { padding-top: 50px; } } @media (max-width: 768px) { .index .index-hot { display: none; } .index .index-hot-m { display: block; } .index .index-product { display: none; } .index .index-product-m { display: block; } .index .index-series { width: 100%; } .index .index-share { width: 100%; } .index .index-share .content { display: none; } .index .index-share .content-m { display: block; } .index .index-share .more { width: 120px; height: 38px; line-height: 38px; color: #fff; background-color: #12368a; } .index .index-share .more span { background-image: url("../img/icon1.png"); } .index .index-video { padding-bottom: 0; } .index .index-video .vBox { width: 100%; } .index .index-video .vBox .img1 { display: none; } .index .index-video .vBox .img2 { display: block; } .index .index-video .more { bottom: auto; width: 130px; height: 38px; line-height: 38px; margin-left: -66px; } .index .index-video .vBox .con .tits { font-size: 30px; line-height: 30px; } .index .index-video .vBox .con .tit { font-size: 15px; line-height: 15px; } } .footerBox { width: 100%; height: auto; background-color: #18368b; position: relative; z-index: 5; } .footerBox .footerTop { width: 100%; height: auto; padding-top: 29px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 5; } .footerBox .footerTop .item { width: 50%; height: auto; float: left; text-align: center; } .footerBox .footerTop .item a { padding-left: 80px; padding-right: 30px; font-size: 18px; color: #87bfe9; line-height: 58px; display: inline-block; background-size: auto 100%; background-repeat: no-repeat; position: relative; } .footerBox .footerTop .item a:after { content: ""; position: absolute; width: 8px; height: 100%; top: 0; right: 0; background-image: url("../img/footer_icon3.png"); background-position: center; background-repeat: no-repeat; } .footerBox .footerTop:after { content: ""; width: 1px; height: 58px; position: absolute; top: 29px; left: 50%; background-color: rgba(255, 255, 255, 0.1); } .footerBox .footer { padding-top: 45px; padding-bottom: 33px; position: relative; z-index: 5; } .footerBox .footer .nav { width: 100%; height: auto; } .footerBox .footer .nav ul { width: 100%; text-align: center; height: auto; font-size: 0; } .footerBox .footer .nav ul li { display: inline-block; } .footerBox .footer .nav ul li a { font-size: 14px; line-height: 42px; color: #8ccaf8; padding: 0 21px; } .footerBox .footer .foot-right { width: 100%; text-align: center; } .footerBox .footer .foot-right .tits { font-size: 16px; line-height: 16px; color: #70a2d2; } .footerBox .footer .foot-right .share { margin-top: 45px; text-align: center; font-size: 0; width: 100%; } .footerBox .footer .foot-right .share a { width: 31px; height: 31px; margin: 0 10px; padding: 0; display: inline-block; opacity: 1; float: none; background-position: center; background-size: 100%; position: relative; } .footerBox .footer .foot-right .share a .ewm { width: 204px; position: absolute; top: -178px; left: -87px; display: none; } .footerBox .footer .foot-right .share a.bds_weixin { background-image: url("../img/wx.png"); } .footerBox .footer .foot-right .share a.bds_sqq { background-image: url("../img/qq.png"); } .footerBox .footer .foot-right .share a.bds_tsina { background-image: url("../img/wb.png"); } .footerBox .footer .foot-right .share a:hover .ewm { display: block; } .footerBox .footer .foot-right .tit1 { font-size: 14px; line-height: 27px; color: #70a2d2; margin-top: 14px; } .footerBox .tel { width: 498px; height: 68px; border-radius: 34px; border: 1px solid #87bfe9; text-align: center; display: block; margin: 0 auto; font-size: 24px; line-height: 68px; color: #87bfe9; display: none; } .footerBox .tel span { display: inline-block; padding-left: 32px; background-position: left center; background-repeat: no-repeat; background-image: url("../img/mTel1.png"); } .footerBox .foott { font-size: 12px; color: #70a2d2; border-top: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 5; padding: 22px 0; text-align: center; } .footerBox .foott p { line-height: 30px; } .footerBox .foott p span { margin-left: 10px; } .footerBox .foott p i { margin-left: 10px; } .footerBox .foott p a { color: #70a2d2; margin-left: 10px; } @media (min-width: 1024px) { .footerBox .foott p a:hover { color: #fff; } } .footerBox .foott .nav { float: right; font-size: 12px; color: #70a2d2; line-height: 30px; } .footerBox .foott .nav span { margin: 0 16px; } .footerBox .foott .nav a { color: #70a2d2; } @media (min-width: 1024px) { .footerBox .foott .nav a:hover { color: #fff; } } .footerBox .fish { width: 25.9%; position: absolute; bottom: -16%; right: -6%; } .footerBox .fish img { position: absolute; top: 0; left: 0; -webkit-transition: left 1.5s,top 1.5s; transition: left 1.5s,top 1.5s; -webkit-filter: url(#water2); filter: url(#water2); } @media (min-width: 1024px) { .footerBox .fish:hover img:nth-child(1) { left: -20px; top: -100px; } .footerBox .fish:hover img:nth-child(2) { left: -40px; top: -80px; } .footerBox .fish:hover img:nth-child(3) { left: -20px; top: -40px; } .footerBox .fish:hover img:nth-child(4) { left: -20px; top: -100px; } } @media (max-width: 1250px) { .footerBox .foott p { width: 100%; float: none; text-align: center; } .footerBox .foott .nav { width: 100%; text-align: center; float: none; } } @media (max-width: 1024px) { .footerBox .fish { display: none; } } @media (max-width: 960px) { .footerBox .tel { display: block; } .footerBox .footer .nav { display: none; } .footerBox .foott p { line-height: 20px; } .footerBox .foott p span { display: none; } .footerBox .foott p a { display: none; } .footerBox .foott p a.icp { display: block; } .footerBox .footer .foot-right .tit1 { display: none; } .footerBox .foott { border-top: none; } .footerBox .foott .nav span { margin: 0 10px; } .footerBox .footer { padding-top: 25px; padding-bottom: 10px; } .footerBox .footer .foot-right .share { margin-top: 0; } .footerBox .foott { padding: 22px 0 50px; } .footerBox .foott .nav { margin-bottom: 5px; } } @media (max-width: 800px) { .footerBox .footerTop { padding: 15px 0; } .footerBox .footerTop .item a { text-align: left; background-size: 40px 40px; height: 40px; background-position: left top; padding-left: 50px; padding-right: 0; font-size: 14px; line-height: 40px; } .footerBox .footerTop .item a span { display: none; } .footerBox .footerTop .item a:after { display: none; } .footerBox .footerTop:after { top: 20px; height: 32px; } } @media (max-width: 768px) { .footerBox .tel { width: 180px; height: 33px; font-size: 14px; line-height: 33px; } .footerBox .tel span { background-size: 15px auto; padding-left: 24px; } } .banner { width: 100%; height: auto; overflow: hidden; position: relative; } .banner .con { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .banner .con .conn { margin-left: 84px; color: #333; } .banner .con .conn .tits { font-size: 38px; line-height: 38px; } .banner .con .conn .tit { font-size: 20px; line-height: 20px; margin-top: 16px; } @media (max-width: 1024px) { .banner { display: none; } } @media (max-width: 768px) { .banner { height: auto; } .banner .con { padding: 25% 0; position: relative; } .banner .con .conn { width: 100%; margin-left: 0; text-align: center; } .banner .con .conn .tits { font-size: 28px; line-height: 28px; } .banner .con .conn .tit { font-size: 18px; line-height: 18px; } } .banner-m { width: 100%; height: auto; overflow: hidden; display: none; } @media (max-width: 1024px) { .banner-m { display: block; } } .proList { width: -webkit-calc(100% - 166px); width: calc(100% - 166px); float: right; position: relative; z-index: 5; } .proList ul li { width: 32.7%; height: auto; float: left; margin-right: 0.95%; position: relative; margin-bottom: 50px; } .proList ul li a { display: block; } .proList ul li a .picBox { width: 100%; height: auto; position: relative; } .proList ul li a .picBox .pic { width: 100%; height: auto; position: relative; } .proList ul li a .picBox .pic .tag { width: 49px; height: auto; position: absolute; top: 20px; right: 7.7%; } .proList ul li a .picBox .pic .tag img { display: block; margin-bottom: 6px; } .proList ul li a .picBox .picHover { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; opacity: 0; background-color: #f7fbfc; -webkit-transition: opacity .5s; transition: opacity .5s; } .proList ul li a .con { width: 100%; height: 106px; padding-top: 22px; position: relative; text-align: center; } .proList ul li a .con .tits { max-width: 90%; margin: 0 auto; font-size: 16px; line-height: 20px; height: 20px; color: #333; overflow: hidden; font-weight: bold; } .proList ul li a .con .tit { font-size: 12px; line-height: 18px; color: #666; margin-top: 12px; width: 80%; margin: 12px auto 0; height: 18px; overflow: hidden; } .proList ul li a .con .tit1 { width: 100%; text-align: center; color: #12368a; font-family: Arial; font-size: 0; position: relative; margin-top: 19px; } .proList ul li a .con .tit1 span { font-size: 14px; line-height: 14px; } .proList ul li a .con .tit1 i { width: 1px; height: 10px; margin: 0 10px; display: inline-block; background-color: #c4c4c4; } .proList ul li .shop { width: 180px; height: 46px; display: block; text-align: center; border-radius: 23rem; background-color: #12368a; position: absolute; bottom: 0; left: 50%; margin-left: -90px; font-size: 14px; line-height: 46px; color: #fff; transform: translateY(20px); opacity: 0; -webkit-transition: transform .5s,opacity .5s; transition: transform .5s,opacity .5s; } .proList ul li .shop span { padding-right: 17px; background-image: url("../img/icon1.png"); background-position: right center; background-repeat: no-repeat; } @media (min-width: 1024px) { .proList ul li:hover a .picHover { opacity: 1; } .proList ul li:hover .shop { transform: translateY(0); opacity: 1; } } .proList ul li:nth-child(3n) { margin-right: 0; } @media (max-width: 1024px) { .proList { width: 100%; } .proList ul li a .con { height: auto; } .proList ul li .shop { position: relative; left: 0; margin: 20px auto 0; opacity: 1; transform: translateY(0); } .proList ul li a .con .tit { margin: 3px auto 0; } .proList ul li a .con .tit1 { margin-top: 15px; } } @media (max-width: 768px) { .proList ul li { width: 48%; margin-right: 4%; margin-bottom: 30px; } .proList ul li:nth-child(3n) { margin-right: 4%; } .proList ul li:nth-child(2n) { margin-right: 0; } .proList ul li .shop { width: 120px; height: 38px; line-height: 38px; border-radius: 20px; } .proList ul li a .con { padding-top: 10px; } .proList ul li a .con .tit { line-height: 18px; } .proList ul li a .picBox .pic .tag { width: 40px; top: 5px; right: 5px; } } .product { padding-top: 80px; padding-bottom: 60px; position: relative; } .product .title { width: 100%; height: auto; } .product .title .tits { font-size: 14px; line-height: 44px; float: left; color: #333; margin-left: 5px; } .product .title .rank { width: 186px; height: 44px; float: right; cursor: pointer; position: relative; z-index: 10; } .product .title .rank .t { width: -webkit-calc(100% - 2px); width: calc(100% - 2px); height: 42px; border: 1px solid #c4c4c4; border-radius: 21px; position: relative; } .product .title .rank .t span { font-size: 12px; line-height: 42px; float: left; margin-left: 20px; } .product .title .rank .t i { width: 8px; height: 100%; position: absolute; top: 0; right: 22px; background-image: url("../img/p_i1.png"); background-position: center; background-repeat: no-repeat; background-size: 8px auto; } .product .title .rank ul { width: -webkit-calc(100% - 2px); width: calc(100% - 2px); border-radius: 0 0 21px 21px; border: 1px solid #c4c4c4; border-top: none; background-color: #fff; top: 44px; left: 0; display: none; z-index: 10; overflow: hidden; } .product .title .rank ul li { font-size: 12px; line-height: 32px; color: #666; } .product .title .rank ul li span { margin-left: 20px; } .product .title .rank ul li:hover { background-color: #18368b; color: #fff; } .product .title .rank.on .t { border-radius: 21px 21px 0 0; } .product .title .rank.on .t i { transform: rotate(180deg); } .product .title .rank.on ul { display: block; } .product .content { width: 100%; margin-top: 30px; } .product.w1200 .title .tits { background: none !important; padding-right: 0 !important; } .product.w1200 .content .proList { width: 100%; float: none; } @media (max-width: 1024px) { .product { padding-top: 5%; padding-bottom: 5%; } .product .title .tits { background-image: url("../img/p_i1.png"); padding-right: 16px; background-position: right center; background-repeat: no-repeat; background-size: 8px auto; } } @media (max-width: 768px) { .product .content { margin-top: 20px; } .product .title .rank { height: 38px; } .product .title .rank .t { height: 36px; } .product .title .rank .t span { line-height: 36px; } .product .title .rank ul { top: 37px; } } .navLeft { width: 135px; height: auto; float: left; } .navLeft .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); display: none; } .navLeft ul li { border-top: 1px solid #c4c4c4; padding-top: 24px; padding-bottom: 24px; } .navLeft ul li .tits { font-size: 12px; line-height: 24px; color: #333; position: relative; cursor: pointer; } .navLeft ul li .tits a { color: #333; } .navLeft ul li .tits span { float: left; margin-left: 5px; } .navLeft ul li .tits i { width: 14px; height: 100%; position: absolute; top: 0; right: 14px; background-image: url("../img/p_i2.png"); background-position: center; background-repeat: no-repeat; } .navLeft ul li dl { width: 100%; height: auto; margin-top: 8px; display: none; padding-bottom: 20px; } .navLeft ul li dl dd a { font-size: 12px; line-height: 42px; color: #666; display: block; padding-left: 5px; width: -webkit-calc(100% - 5px); width: calc(100% - 5px); } .navLeft ul li.on .tits { color: #18368b; } .navLeft ul li.on .tits a { color: #18368b; } .navLeft ul li.on .tits i { background-image: url("../img/p_i3.png"); } @media (max-width: 1024px) { .navLeft { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: none; } .navLeft .bg { display: block; } .navLeft ul { width: -webkit-calc(50% - 40px); width: calc(50% - 40px); padding: 50px 20px 30px; height: -webkit-calc(100vh - 80px); height: calc(100vh - 80px); background-color: #fff; position: relative; z-index: 1000; } .navLeft ul li { padding: 15px 0; border-top: 0; border-bottom: 1px solid #c4c4c4; } .navLeft ul li dl { padding-bottom: 10px; } .navLeft ul li dl dd a { line-height: 32px; } } .infoTitle { width: 100%; border-bottom: 1px solid #e6e6e6; font-size: 20px; line-height: 30px; color: #12368a; text-align: center; padding-bottom: 5px; position: relative; z-index: 5; } .infoTitle:after { content: ""; width: 30px; height: 2px; background-color: #12368a; position: absolute; bottom: -1px; left: 50%; margin-left: -15px; } @media (max-width: 1024px) { .infoTitle { border-bottom: none; text-align: left; color: #333; padding-bottom: 0; font-size: 18px; line-height: 20px; font-weight: bold; } .infoTitle:after { display: none; } } .productInfo { width: 100%; height: auto; position: relative; z-index: 5; } .productInfo .top { width: -webkit-calc(100% - 320px); width: calc(100% - 320px); margin: 0 auto; position: relative; } .productInfo .top .bg { width: 200%; position: absolute; top: 0; right: 45%; background-color: #f7fbfc; height: 100%; z-index: 5; } .productInfo .top .picBox { width: 55.1%; height: auto; float: left; position: relative; z-index: 10; } .productInfo .top .picBox .pic { width: 100%; height: auto; margin-bottom: 20px; position: relative; overflow: hidden; } .productInfo .top .picBox .pic img { height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; } .productInfo .top .picBox .pic.picB img { display: none; } .productInfo .top .picBox .pic.picB img.on { display: block; } .productInfo .top .picBox .pic:last-child { margin-bottom: 0; } .productInfo .top .picBox1 { width: 100%; display: none; height: auto; position: relative; } .productInfo .top .picBox1 .picBox-new { width: 100%; height: auto; } .productInfo .top .picBox1 .picBox-new .pic { width: 100%; float: left; height: auto; } .productInfo .top .picBox1 .picBox-new .pic img { width: 100%; height: auto; } .productInfo .top .picBox1 .picBox-new .pic.picC img { display: none; } .productInfo .top .picBox1 .picBox-new .pic.picC img.on { display: block; } .productInfo .top .picBox1 .btns { width: 100%; text-align: center; z-index: 4; margin-top: 10px; } .productInfo .top .picBox1 .btns span { width: 14px; height: 14px; background: none; background-image: url("../img/banner_icon1.png"); background-position: center; background-repeat: no-repeat; margin: 0 6px; opacity: 0.3; } .productInfo .top .picBox1 .btns span.swiper-pagination-bullet-active { opacity: 1; } .productInfo .top .con { width: 100%; position: absolute; z-index: 10; } .productInfo .top .con .table { width: 55.1%; float: left; } .productInfo .top .con .table.t2 { width: 44.9%; } .productInfo .top .con .conn { width: 478px; max-width: 100%; position: relative; margin: 0 auto; } .productInfo .top .con .conn .tits { font-size: 22px; line-height: 30px; color: #333; } .productInfo .top .con .conn .tit { font-size: 14px; line-height: 20px; color: #666; margin-top: 7px; } .productInfo .top .con .conn .tag { width: 100%; margin-top: 36px; } .productInfo .top .con .conn .tag .icon { width: 61px; height: auto; float: left; margin-right: 50px; } .productInfo .top .con .conn .tag .icon .ic { width: 100%; height: auto; position: relative; } .productInfo .top .con .conn .tag .icon .ic .icNew { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("../img/1515.png"); -webkit-transition: transform .5s; transition: transform .5s; } .productInfo .top .con .conn .tag .icon p { width: 180%; margin-left: -40%; font-size: 12px; line-height: 12px; color: #18368b; text-align: center; margin-top: 13px; } @media (min-width: 1024px) { .productInfo .top .con .conn .tag .icon:hover .ic .icNew { transform: rotate(180deg); } } .productInfo .top .con .conn .score { width: 100%; height: auto; font-size: 13px; color: #18368b; line-height: 14px; margin-top: 125px; border-bottom: 1px solid #e6e6e6; padding-bottom: 20px; } .productInfo .top .con .conn .score img { float: left; display: block; height: 12px; } .productInfo .top .con .conn .score span { float: left; display: block; margin-left: 14px; } .productInfo .top .con .conn .spe { width: 100%; border-bottom: 1px solid #e6e6e6; font-size: 16px; line-height: 53px; color: #666; } .productInfo .top .con .conn .spe span { width: 75px; display: block; float: left; } .productInfo .top .con .conn .spe a { float: left; color: #666; margin-right: 15px; } .productInfo .top .con .conn .spe a.on { text-decoration: underline; } .productInfo .top .con .conn .color { width: 100%; border-bottom: 1px solid #e6e6e6; font-size: 16px; line-height: 60px; } .productInfo .top .con .conn .color span { width: 75px; display: block; float: left; } .productInfo .top .con .conn .color .colorList { float: left; margin-top: 20px; } .productInfo .top .con .conn .color .colorList div { width: 20px; height: 20px; border-radius: 100%; float: left; margin-right: 20px; box-sizing: border-box; position: relative; cursor: pointer; } .productInfo .top .con .conn .color .colorList div img { width: 18px; height: 18px; overflow: hidden; border: 1px solid #fff; border-radius: 100%; } .productInfo .top .con .conn .color .colorList div .ti { width: 84px; height: 38px; position: absolute; top: -37px; left: -32px; background-image: url("../img/info_bg.png"); background-position: center; background-repeat: no-repeat; border-radius: 0; display: none; } .productInfo .top .con .conn .color .colorList div .ti i { width: 74px; height: 24px; font-size: 12px; line-height: 24px; color: #fff; text-align: center; display: block; position: absolute; top: 2px; left: 3px; } @media (min-width: 1024px) { .productInfo .top .con .conn .color .colorList div:hover img { border: 1px solid #18368b; } .productInfo .top .con .conn .color .colorList div:hover .ti { display: block; } } .productInfo .top .con .conn .color .colorList div.on img { border: 1px solid #18368b; } .productInfo .top .con .conn .color-m { width: 100%; height: auto; display: none; position: relative; z-index: 10; } .productInfo .top .con .conn .color-m .colorTits { width: -webkit-calc(100% - 2px); width: calc(100% - 2px); border: 1px solid #999; height: 44px; font-size: 16px; line-height: 44px; color: #333; border-radius: 20px; position: relative; cursor: pointer; } .productInfo .top .con .conn .color-m .colorTits img { width: 30px; margin-top: 7px; margin-left: 15px; display: block; float: left; } .productInfo .top .con .conn .color-m .colorTits span { float: left; margin-left: 10px; } .productInfo .top .con .conn .color-m .colorTits i { width: 8px; height: 100%; position: absolute; top: 0; right: 22px; background-image: url(../img/p_i1.png); background-size: 8px auto; background-position: center; background-repeat: no-repeat; } .productInfo .top .con .conn .color-m ul { width: calc(100% - 2px); border: 1px solid #999; position: absolute; border-top: none; top: 45px; left: 0; background-color: #fff; display: none; max-height: 225px; overflow-y: scroll; } .productInfo .top .con .conn .color-m ul li { font-size: 16px; line-height: 44px; color: #333; cursor: pointer; } .productInfo .top .con .conn .color-m ul li img { width: 30px; margin-top: 7px; margin-left: 15px; display: block; float: left; } .productInfo .top .con .conn .color-m ul li span { float: left; margin-left: 10px; } .productInfo .top .con .conn .color-m.on .colorTits { border-radius: 20px 20px 0 0; } .productInfo .top .con .conn .bb { width: 100%; height: auto; margin-top: 40px; } .productInfo .top .con .conn .bb .price { font-size: 16px; line-height: 46px; color: #666; float: left; } .productInfo .top .con .conn .bb .price span { width: 75px; display: block; float: left; } .productInfo .top .con .conn .bb .price i { float: left; } .productInfo .top .con .conn .bb .shop { width: 178px; height: 44px; border: 1px solid #12368a; border-radius: 20px; float: right; display: block; text-align: center; font-size: 0; color: #12368a; } .productInfo .top .con .conn .bb .shop span { font-size: 14px; line-height: 44px; padding-left: 29px; background-image: url("../img/info_icon1.png"); background-position: left center; background-repeat: no-repeat; } @media (min-width: 1024px) { .productInfo .top .con .conn .bb .shop:hover { background-color: #12368a; color: #fff; } .productInfo .top .con .conn .bb .shop:hover span { background-image: url("../img/info_icon1_h.png"); } } .productInfo .top .con .conn .bb .num { width: 98px; height: 44px; border: 1px solid #12368a; border-radius: 20px; float: right; margin-right: 20px; } .productInfo .top .con .conn .bb .num span { width: 11px; height: 44px; background-position: center; background-repeat: no-repeat; display: block; float: left; cursor: pointer; } .productInfo .top .con .conn .bb .num span.jia { background-image: url("../img/jia.png"); } .productInfo .top .con .conn .bb .num span.jian { background-image: url("../img/jian.png"); margin-left: 16px; } .productInfo .top .con .conn .bb .num .text { width: 43px; height: 44px; border: none; background: none; text-align: center; color: #18368b; font-size: 14px; line-height: 44px; color: #18368b; float: left; display: block; } .productInfo .top .con .conn .sho { width: 100%; height: 44px; line-height: 44px; font-size: 16px; color: #fff; display: block; border-radius: 10px; background-color: #12368b; text-align: center; display: none; } .productInfo .top .con .list { width: 105px; height: auto; float: left; margin-left: -105px; } .productInfo .top .con .list .item { width: 100%; height: auto; box-sizing: border-box; margin-bottom: 10px; } .productInfo .top .con .list .item.on { border: 1px solid #18368b; } .productInfo .infoBox { padding-top: 6.1%; padding-bottom: 6.1%; } .productInfo .infoBox .tabs { width: 100%; height: auto; background-color: #f8f9fb; margin-bottom: 30px; position: relative; display: none; } .productInfo .infoBox .tabs a { width: 50%; height: 45px; text-align: center; font-size: 16px; line-height: 45px; display: block; float: left; color: #333; } .productInfo .infoBox .tabs a.on { color: #12368b; } .productInfo .infoBox .tabs:before { content: ""; width: 1px; height: 35px; top: 5px; background-color: #e6e6e6; position: absolute; left: 50%; } .productInfo .infoBox .box1 { margin-bottom: 95px; } .productInfo .infoBox .box1 .txt { font-size: 14px !important; line-height: 32px !important; color: #999 !important; text-align: center; margin-top: 50px; } .productInfo .infoBox .box1 .txt img { max-width: 100%; height: auto !important; width: auto !important; } .productInfo .infoBox .box1 .txt p { font-size: 14px !important; line-height: 32px !important; color: #999 !important; } .productInfo .infoBox .box1 .txt span { font-size: 14px !important; line-height: 32px !important; color: #999 !important; } .productInfo .infoBox .box1 .picList { width: 100%; text-align: center; margin-top: 60px; } .productInfo .infoBox .box1 .picList img { max-width: 100%; height: auto !important; width: auto !important; } .productInfo .infoBox .box1 .picList p { font-size: 14px !important; line-height: 32px !important; color: #999 !important; } .productInfo .infoBox .box1 .picList span { font-size: 14px !important; line-height: 32px !important; color: #999 !important; } .productInfo .infoBox .box2 { margin-bottom: 10px; } .productInfo .infoBox .box2 .proList { width: 100%; margin-top: 60px; float: none; } .productInfo .infoBox .box3 { margin-bottom: 5%; } .productInfo .infoBox .box3 .list { margin-top: 73px; } .productInfo .infoBox .box3 .list ul li { border-bottom: 1px solid #e6e6e6; padding-bottom: 50px; margin-bottom: 56px; display: block; } .productInfo .infoBox .box3 .list ul li .name { width: 8.3%; font-size: 14px; line-height: 26px; float: left; color: #666; } .productInfo .infoBox .box3 .list ul li .xin { width: 12.5%; float: left; margin-top: 7px; } .productInfo .infoBox .box3 .list ul li .xin img { max-width: 90%; max-height: 12px; } .productInfo .infoBox .box3 .list ul li .f-cb { display: none; } .productInfo .infoBox .box3 .list ul li .con { width: 64.1%; float: left; } .productInfo .infoBox .box3 .list ul li .con .txt { font-size: 14px; line-height: 26px; color: #999; height: 78px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .productInfo .infoBox .box3 .list ul li .con .picList { width: 100%; height: auto; margin-top: 34px; display: block; } .productInfo .infoBox .box3 .list ul li .con .picList img { width: 22%; display: block; float: left; margin-right: 10px; margin-bottom: 10px; } .productInfo .infoBox .box3 .list ul li .con .picList img:nth-child(4n) { margin-right: 0; } .productInfo .infoBox .box3 .list ul li .time { float: right; font-size: 12px; line-height: 26px; color: #999; font-family: Arial; } .productInfo .infoBox .box3 .list ul li:last-child { margin-bottom: 0; border-bottom: none; } .productInfo .infoBox .box3 .list .page { width: 265px; margin: 0 auto; font-size: 12px; line-height: 26px; position: relative; } .productInfo .infoBox .box3 .list .page a { color: #666666; position: relative; z-index: 5; } .productInfo .infoBox .box3 .list .page .num { width: 100%; text-align: center; position: absolute; top: 0; left: 0; z-index: 4; } .productInfo .infoBox .box3 .list .more { width: 178px; height: 44px; font-size: 14px; line-height: 44px; display: block; margin: 63px auto 0; text-align: center; border-radius: 20px; border: 1px solid #18368b; background-color: #18368b; color: #fff; } @media (max-width: 1560px) { .productInfo .top { width: 90%; } .productInfo .top .con .list { width: 10%; margin-left: -10%; } } @media (max-width: 1366px) { .productInfo .top .con .conn { width: 75%; } .productInfo .top .con .conn .score { margin-top: 40px; } .productInfo .top .con .conn .bb { margin-top: 15px; } } @media (max-width: 1200px) { .productInfo .top .con .conn .bb .shop { width: 130px; } .productInfo .top .con .conn .bb .shop span { padding-left: 22px; } .productInfo .top .con .conn .tits { font-size: 18px; line-height: 24px; } .productInfo .top .con .conn .spe { line-height: 40px; } .productInfo .top .con .conn .color { line-height: 45px; } .productInfo .top .con .conn .color .colorList { margin-top: 12px; } .productInfo .top .con .conn .bb .num { width: 80px; margin-right: 10px; } .productInfo .top .con .conn .bb .num span.jian { margin-left: 10px; } .productInfo .top .con .conn .bb .num .text { width: 35px; } .productInfo .infoBox .box1 { margin-bottom: 60px; } .productInfo .infoBox .box1 .txt { margin-top: 30px; } .productInfo .infoBox .box1 .picList { margin-top: 30px; } } @media (max-width: 1024px) { .productInfo .top { width: 100%; } .productInfo .top .bg { display: none; } .productInfo .top .picBox { display: none; } .productInfo .top .picBox1 { display: block; } .productInfo .top .con .list { display: none; } .productInfo .top .con { width: 100%; position: relative; min-height: 0; height: auto !important; top: 0 !important; } .productInfo .top .con .table { width: 100% !important; float: none; } .productInfo .top .con .conn { padding-top: 0; border-bottom: 1px solid #e6e6e6; padding-bottom: 30px; } .productInfo .top .con .conn { width: 89.6%; float: none; margin: 20px auto 0; } .productInfo .top .con .conn .tag { margin-top: 15px; } .productInfo .top .con .conn .tag .icon { width: auto; float: left; margin-right: 10px; margin-bottom: 10px; } .productInfo .top .con .conn .tag .icon .ic { display: block; width: 36px; float: left; } .productInfo .top .con .conn .tag .icon p { width: auto; margin-left: 0; font-size: 12px; line-height: 36px; float: left; margin-left: 5px; margin-top: 0; } .productInfo .top .con .conn .tag .icon:last-child { margin-right: 0; } .productInfo .top .con .conn .score { margin-top: 20px; padding-bottom: 10px; border-bottom: none; } .productInfo .top .con .conn .spe { border-bottom: none; } .productInfo .top .con .conn .color { display: none; } .productInfo .top .con .conn .color-m { display: block; } .productInfo .top .con .conn .bb { margin-top: 0; } .productInfo .top .con .conn .bb .shop { display: none; } .productInfo .top .con .conn .bb .num { width: -webkit-calc(100% - 2px); width: calc(100% - 2px); border: 1px solid #999; height: 44px; font-size: 16px; line-height: 44px; float: none; } .productInfo .top .con .conn .bb .num span { float: right; width: 44px; height: 44px; border-left: 1px solid #999; } .productInfo .top .con .conn .bb .num span.jian { margin-left: 0; } .productInfo .top .con .conn .bb .num .text { width: 60%; padding-left: 15px; text-align: left; font-size: 14px; color: #333; } .productInfo .top .con .conn .bb .price { float: none; width: 100%; margin-top: 0; line-height: 28px; } .productInfo .top .con .conn .sho { display: block; } .productInfo .top .con .conn .tag .icon p br { display: none; } .productInfo .infoBox { width: 100%; padding-top: 10%; } .productInfo .infoBox .box1 { width: 90%; margin: 0 auto 30px; border-bottom: 1px solid #e6e6e6; padding-bottom: 20px; } .productInfo .infoBox .box1 .txt { margin-top: 0; text-align: left; } .productInfo .infoBox .box1 .txt p { text-align: left !important; } .productInfo .infoBox .box1 .picList { margin-top: 15px; text-align: left; } .productInfo .infoBox .box1 .picList p { text-align: left !important; } .productInfo .infoBox .box2 { width: 90%; margin: 0 auto 20px; } .productInfo .infoBox .box2 .proList { margin-top: 10px; } .productInfo .infoBox .box2 .proList ul li:nth-child(3) { display: none; } .productInfo .infoBox .box3 { width: 90%; margin: 0 auto 5%; } .productInfo .infoBox .box3 .list { margin-top: 20px; } .productInfo .infoBox .box3 .list ul li { padding-bottom: 10px; margin-bottom: 30px; } .productInfo .infoBox .box3 .list ul li .name { width: auto; } .productInfo .infoBox .box3 .list ul li .xin { width: 87px; margin-left: 25px; } .productInfo .infoBox .box3 .list ul li .f-cb { display: block; } .productInfo .infoBox .box3 .list ul li .con { width: 100%; float: none; margin-top: 10px; } .productInfo .infoBox .box3 .list ul li .con .picList { margin-top: 15px; } .productInfo .infoBox .box3 .list ul li .con .picList img { width: 100%; margin-bottom: 10px; margin-right: 0; } .productInfo .infoBox .box3 .list .more { margin: 0 auto 0; } .productInfo .infoBox .box3 .list .more { width: 120px; height: 38px; line-height: 38px; } } .shareList { width: 1050px; margin: 0 auto 6.2%; position: relative; z-index: 5; } .shareList .list { width: 100%; height: auto; margin-top: 80px; } .shareList .list .item { width: 33.3333333333%; margin-bottom: 80px; position: relative; cursor: pointer; } .shareList .list .item a { width: -webkit-calc(100% - 80px); width: calc(100% - 80px); margin: 0 auto; height: auto; display: block; position: relative; } .shareList .list .item .con { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 36, 127, 0.6); -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: transform .5s,opacity .5s; transition: transform .5s,opacity .5s; } .shareList .list .item .con .conn { width: 190px; height: auto; margin: 0 auto; text-align: center; } .shareList .list .item .con .conn .txt { font-size: 12px; line-height: 20px; color: #fff; } .shareList .list .item .con .conn .xin { width: 87px; height: auto; margin: 17px auto 0; } .shareList .list .item .con .tag { position: absolute; bottom: 16px; right: 30px; } .shareList .list .item .con .tag .t { float: left; font-size: 12px; line-height: 14px; background-position: left center; background-repeat: no-repeat; padding-left: 25px; margin-right: 20px; color: #fff; } .shareList .list .item .con .tag .t:last-child { margin-right: 0; } .shareList .list .item.itemBox { height: 270px; position: relative; } .shareList .list .item.itemBox .item-new { width: -webkit-calc(100% - 80px); width: calc(100% - 80px); height: 270px; margin: 0 auto; position: relative; border: 6px solid #12368a; box-sizing: border-box; } .shareList .list .item.itemBox .item-new .tits { font-size: 30px; line-height: 30px; color: #12368a; text-transform: uppercase; font-family: Arial; width: 100%; text-align: center; position: absolute; left: 0; bottom: 15px; } @media (min-width: 1024px) { .shareList .list .item:hover .con { transform: scale(1); opacity: 1; } } .shareList .returnTop { width: 51px; height: auto; margin: 0 auto 0; text-align: center; font-size: 12px; line-height: 12px; color: #666; cursor: pointer; } .shareList .returnTop p { width: 120%; margin-left: -10%; margin-bottom: 30px; } @media (max-width: 1050px) { .shareList { width: 100%; } .shareList .list { margin-top: 7%; } .shareList .list .item { margin-bottom: 20px; } .shareList .list .item a { width: -webkit-calc(100% - 40px); width: calc(100% - 40px); } .shareList .list .item.itemBox { height: 200px; } .shareList .list .item.itemBox .item-new { width: -webkit-calc(100% - 40px); width: calc(100% - 40px); height: 200px; border-width: 4px; } .shareList .list .item.itemBox .item-new .tits { font-size: 20px; line-height: 20px; } } @media (max-width: 768px) { .shareList .list .item { width: 50%; } .shareList .list .item a { width: -webkit-calc(100% - 20px); width: calc(100% - 20px); } .shareList .list .item.itemBox { height: 160px; } .shareList .list .item.itemBox .item-new { width: -webkit-calc(100% - 20px); width: calc(100% - 20px); height: 160px; border-width: 2px; } .shareList .list .item.itemBox .item-new .tits { font-size: 20px; line-height: 20px; } .shareList .returnTop p { margin-bottom: 14px; } } .infoTk { width: 100%; height: auto; padding-top: 80px; padding-bottom: 6.2%; } .infoTk .box { width: 1200px; margin: auto; } .infoTk .box .picList { width: 57%; height: auto; float: left; } .infoTk .box .picList img { display: block; max-width: 100%; margin: 0 auto 20px; } .infoTk .box .conBox { width: 34.4%; height: -webkit-calc(100% - 80px); height: calc(100% - 80px); float: right; margin-right: 5.6%; padding-top: 60px; } .infoTk .box .conBox .boxTop { width: 100%; padding-top: 20px; border-bottom: 1px solid #e9e9e9; padding-bottom: 28px; } .infoTk .box .conBox .boxTop .title { width: 100%; height: auto; } .infoTk .box .conBox .boxTop .title .tits { float: left; } .infoTk .box .conBox .boxTop .title .tits img { width: 60px; height: 60px; overflow: hidden; border-radius: 100%; float: left; } .infoTk .box .conBox .boxTop .title .tits span { font-size: 14px; color: #333; line-height: 60px; margin-left: 10px; } .infoTk .box .conBox .boxTop .title .time { font-size: 12px; line-height: 60px; float: right; color: #999; } .infoTk .box .conBox .boxTop .txt { width: -webkit-calc(100% - 70px); width: calc(100% - 70px); font-size: 14px; line-height: 26px; color: #666; padding-left: 70px; height: 182px; overflow: hidden; } .infoTk .box .conBox .boxTop .txt.on { height: auto; } .infoTk .box .conBox .boxTop .moreClick { float: right; font-size: 14px; line-height: 14px; color: #18368b; margin-top: 10px; display: inline-block; margin-right: 10px; } .infoTk .box .conBox .boxTop .tag { width: 100%; height: auto; margin-top: 24px; } .infoTk .box .conBox .boxTop .tag .t { font-size: 12px; line-height: 14px; color: #666; padding-left: 25px; margin-left: 20px; background-position: left center; background-repeat: no-repeat; float: right; cursor: pointer; } .infoTk .box .conBox .boxTop .tag .t.collect { background-size: 16px auto; background-image: url("../img/share_icon4.png"); } .infoTk .box .conBox .boxTop .tag .t.collect.on { background-image: url("../img/share_icon4_h.png"); color: #c94666; } .infoTk .box .conBox .boxTop .tag .t.kan { background-size: 19px auto; background-image: url("../img/share_icon3.png"); } .infoTk .box .conBox .box1 { width: -webkit-calc(100% - 70px); width: calc(100% - 70px); padding-left: 70px; margin-top: 40px; } .infoTk .box .conBox .box1 .ttt { font-size: 14px; line-height: 14px; color: #333; } .infoTk .box .conBox .box1 .proList { width: 100%; margin-top: 30px; } .infoTk .box .conBox .box1 .proList ul li { width: 100%; margin-right: 0 !important; margin-bottom: 20px; } @media (max-width: 1240px) { .infoTk .box { width: 900px; } } @media (max-width: 1050px) { .infoTk { padding-top: 7%; } } @media (max-width: 930px) { .infoTk .box { width: 94%; left: 3%; top: 30px; right: auto; bottom: auto; } .infoTk .box .closeTk { top: 20px; right: 20px; } .infoTk .box .picList { width: 100%; float: none; height: auto; position: relative; } .infoTk .box .conBox { width: 90%; height: auto; margin: 0 auto; float: none; position: relative; top: auto; right: auto; padding-top: 5%; } .infoTk .box .conBox .box1 { width: 100%; padding-left: 0; margin-top: 15px; } .infoTk .box .conBox .box1 .proList { margin-top: 15px; } .infoTk .box .picList img { margin-bottom: 10px; } } .about-banner { width: 100%; height: auto; position: relative; height: 560px; background-position: center; background-size: cover; z-index: 5; overflow: hidden; } .exploring_new img{width:100%;} .about-banner .picN { width: 100%; height: 41%; position: absolute; bottom: 0; left: 0; z-index: 6; background-position: bottom center; -o-object-fit: cover; object-fit: cover; -webkit-filter: url(#waterC); filter: url(#waterC); } .about-banner .con { position: absolute; top: 27%; left: 0; width: 100%; text-align: center; color: #18368b; z-index: 10; } .about-banner .con .tits { font-size: 42px; line-height: 42px; letter-spacing: 2px; } .about-banner .con .line { width: 263px; height: auto; margin: 18px auto 0; } .about-banner .con .tit { font-size: 17px; line-height: 17px; margin-top: 8px; } @media (max-width: 1024px) { .about-banner { display: none; } .about-banner .picN { display: none; } } @media (max-width: 768px) { .about-banner { height: auto; } .about-banner .con { padding: 25% 0; position: relative; text-align: center; top: auto; left: auto; } .about-banner .con .tits { font-size: 28px; line-height: 28px; } .about-banner .con .tit { font-size: 18px; line-height: 18px; } } .about-banner-m { width: 100%; height: auto; display: none; } @media (max-width: 1024px) { .about-banner-m { display: block; } } .txtBox { text-align: center; color: #19368b; margin-top: 10.7%; } .txtBox .tits { font-size: 40px; line-height: 42px; } .txtBox .tit { font-size: 20px; line-height: 22px; font-weight: bold; text-transform: uppercase; margin-top: 15px; } .txtBox .txt { font-size: 24px; line-height: 54px; margin-top: 40px; } .txtBox .icon { width: 83px; height: auto; margin: 60px auto 0; } .txtBox .txt1 { font-size: 18px; line-height: 44px; font-weight: bold; text-transform: uppercase; margin-top: 60px; } .txtBox .line { width: 76px; height: 6px; margin: 26px auto 0; background-color: #19368b; } .txtBox .more{ width: 182px; height: 40px; border-radius: 20px; background-color: #213786; text-align: center; font-size: 14px; line-height: 40px; color: #fff; display: block; margin: 74px auto 0; } @media (max-width: 1366px) { .txtBox .tits { font-size: 30px; line-height: 32px; } .txtBox .tit { font-size: 18px; line-height: 20px; } .txtBox .txt { font-size: 20px; line-height: 50px; margin-top: 30px; } .txtBox .txt1 { font-size: 18px; line-height: 36px; margin-top: 40px; } } @media (max-width: 1200px) { .txtBox .tits { font-size: 26px; line-height: 28px; } .txtBox .tit { font-size: 16px; line-height: 18px; margin-top: 5px; } .txtBox .txt { font-size: 16px; line-height: 40px; margin-top: 20px; } .txtBox .txt1 { font-size: 14px; line-height: 30px; margin-top: 20px; } .txtBox .icon { width: 70px; margin: 40px auto 0; } } @media (max-width: 1024px) { .txtBox .tits { font-size: 20px; line-height: 22px; } .txtBox .tit { font-size: 14px; line-height: 16px; } .txtBox .txt { font-size: 16px; line-height: 30px; margin-top: 10px; } .txtBox .txt1 { font-size: 12px; line-height: 26px; margin-top: 25px; } .txtBox .icon { width: 40px; margin: 30px auto 0; } .txtBox .line { width: 45px; height: 3px; margin: 15px auto 0; } } @media (max-width: 768px) { .txtBox .more{ margin: 30px auto 0; width: 120px; height: 36px; border-radius: 18px; line-height: 36px; } .txtBox .txt { font-size: 12px; line-height: 26px; width: 120%; margin-left: -10%; } } .ab_0731 img{width:100%;max-width:100%;} .ab_0731 ul li{margin-bottom:30px;} .about { width: 100%; height: auto; padding-top: 7.8%; padding-bottom: 65px; } .about .itemBox { width: 100%; height: auto; } .about .itemBox .item { width: 47.1%; margin-left: 1.25%; float: left; } .about .itemBox .item:nth-child(1) { margin-left: 1.6%; } .about .aBox { width: 100%; height: auto; padding-top: 6.4%; } .about .aBox a { width: 50%; float: left; text-align: center; color: #19368b; padding-bottom: 45px; position: relative; } .about .aBox a .icon { width: 90px; height: auto; margin: 0 auto; } .about .aBox a .tits { font-size: 34px; line-height: 36px; margin-top: 35px; } .about .aBox a .tit { font-size: 18px; line-height: 20px; font-weight: bold; text-transform: uppercase; margin-top: 17px; } .about .aBox a .tit br { display: none; } .about .aBox a .line { width: 66px; height: 4px; margin: 16px auto 0; background-color: #19368b; } .about .aBox a:after { width: 1px; height: calc(100% - 8px); background-color: #19368b; position: absolute; right: 0; bottom: 0; content: ''; } .about .aBox a:last-child:after { display: none; } @media (max-width: 1366px) { .about .aBox a .tits { font-size: 26px; line-height: 28px; margin-top: 25px; } .about .aBox a .tit { font-size: 16px; line-height: 18px; } .about .aBox a .icon { width: 90px; } } @media (max-width: 1200px) { .about .aBox a .icon { width: 80px; } .about .aBox a .tits { font-size: 22px; line-height: 24px; margin-top: 20px; } .about .aBox a .tit { font-size: 16px; line-height: 18px; } } @media (max-width: 1024px) { .about { padding-bottom: 30px; } .about .aBox a .icon { width: 60px; } .about .aBox a .tits { font-size: 22px; line-height: 24px; margin-top: 10px; } .about .aBox a .tit { font-size: 14px; line-height: 16px; margin-top: 5px; } .about .aBox a { padding-bottom: 30px; } .about .aBox a .line { width: 45px; height: 3px; } } @media (max-width: 768px) { .about { padding-top: 20px; } .about .aBox a .icon { width: 36px; } .about .aBox a .tits { font-size: 16px; line-height: 18px; } .about .aBox a .tit { font-size: 12px; line-height: 14px; height: 28px; font-weight: normal; } .about .aBox a .tit br { display: block; } .about .aBox a .line { width: 30px; height: 2px; margin: 8px auto 0; } .about .aBox a { padding-bottom: 15px; } .about .itemBox .item { width: 47.1%; margin-left: 2%; } .about .itemBox .item:nth-child(1) { margin-left: 0; } } .marine { padding-top: 9%; padding-bottom: 55px; } .marine .box { width: calc(100% - 40px); margin: 0 auto; } .marine .box .tits { text-align: center; } .marine .box .tits .t { display: inline-block; padding-left: 110px; height: 90px; background-image: url("../img/about/icon1.png"); background-size: 90px; background-position: left center; background-repeat: no-repeat; color: #19368b; text-align: left; } .marine .box .tits .t .t1 { font-size: 36px; line-height: 38px; padding-top: 10px; letter-spacing: 10px; } .marine .box .tits .t .t2 { font-size: 16px; line-height: 18px; text-transform: uppercase; font-weight: bold; margin-top: 12px; } .marine .box .imgBox { margin-top: 65px; } .marine .box .imgBox .img { margin-top: 9.5%; } .marine .txtBox { margin-top: 6.4%; } @media (max-width: 1366px) { .marine .box .tits .t { background-size: 80px; height: 80px; padding-left: 100px; } .marine .box .tits .t .t1 { font-size: 30px; line-height: 32px; } .marine .box .tits .t .t2 { font-size: 14px; line-height: 16px; } } @media (max-width: 1200px) { .marine .box .tits .t { background-size: 80px; height: 80px; padding-left: 90px; } .marine .box .tits .t .t1 { font-size: 28px; line-height: 30px; } .marine .box .tits .t .t2 { font-size: 14px; line-height: 16px; margin-top: 8px; } .marine .box .imgBox { margin-top: 40px; } } @media (max-width: 1024px) { .marine .box .tits .t { background-size: 60px; height: 60px; padding-left: 75px; } .marine .box .tits .t .t1 { font-size: 22px; line-height: 24px; padding-top: 4px; } .marine .box .tits .t .t2 { margin-top: 8px; } } @media (max-width: 768px) { .marine { padding-top: 20px; padding-bottom: 30px; } .marine .box .tits .t { background-size: 50px; height: 50px; padding-left: 60px; } .marine .box .tits .t .t1 { font-size: 20px; line-height: 22px; padding-top: 4px; } .marine .box .tits .t .t2 { margin-top: 3px; font-size: 12px; line-height: 14px; } .marine .box { width: 100%; } .marine .box .imgBox { margin-top: 25px; } } .exploring { padding-top: 7.6%; padding-bottom: 13px; } .exploring .content { width: calc(100% - 40px); margin: 0 auto; } .exploring .content .box { width: 78.4%; margin: 0 auto; position: relative; } .exploring .content .box .pic { width: 58.7%; height: auto; } .exploring .content .box .boxRight { width: 46.2%; height: auto; background-color: #19368b; color: #fff; position: absolute; top: 50%; transform: translateY(-50%); right: 0; z-index: 4; color: #fff; padding: 46px 0; } .exploring .content .box .boxRight .con { width: 78.6%; margin: 0 auto; } .exploring .content .box .boxRight .con .icon { width: 90px; height: auto; } .exploring .content .box .boxRight .con .tits { font-size: 32px; line-height: 46px; font-weight: bold; text-transform: uppercase; margin-top: 12px; } .exploring .content .box .boxRight .con .tit { font-size: 32px; line-height: 34px; margin-top: 18px; } .exploring .content .box .boxRight .con .line { width: 96px; height: 6px; background-color: #fff; margin-top: 18px; } .exploring .content .itemBox { width: 100%; height: auto; margin-top: 8.2%; } .exploring .content .itemBox .item { width: 18.5%; margin-right: 8.6%; height: auto; float: left; } .exploring .content .itemBox .item .icon { width: 90px; margin: 0 auto; } .exploring .content .itemBox .item .t { text-align: center; font-size: 28px; line-height: 30px; color: #19368b; margin-top: 26px; } .exploring .content .itemBox .item:last-child { margin-right: 0; } .exploring .content .picBox { width: 100%; height: auto; margin-top: 7.2%; } .exploring .content .picBox .item { width: 49.4%; height: auto; } .exploring .content .picBox .item .pic { width: 100%; height: auto; } .exploring .content .picBox .item .tits { padding-left: 40px; width: calc(100% - 40px); font-size: 24px; line-height: 26px; color: #19368b; position: relative; margin-top: 30px; } .exploring .content .picBox .item .tits:after { width: 18px; height: 18px; position: absolute; left: 0; top: 4px; background-color: #19368b; content: ''; } .exploring .content .imgBox { width: 100%; height: auto; margin-top: 8.5%; } .exploring .content .imgBox .item { width: 31.6%; float: left; margin-right: 2.6%; } .exploring .content .imgBox .item img { margin-bottom: 9%; display: block; } .exploring .content .imgBox .item:last-child { margin-right: 0; } @media (max-width: 1366px) { .exploring .content .box .boxRight .con .icon { width: 80px; } .exploring .content .itemBox .item .icon { width: 80px; } .exploring .content .box .boxRight .con .tits { font-size: 26px; line-height: 38px; } .exploring .content .box .boxRight .con .tit { font-size: 26px; line-height: 28px; } .exploring .content .itemBox .item .t { font-size: 24px; line-height: 26px; margin-top: 20px; } .exploring .content .picBox .item .tits { font-size: 26px; line-height: 28px; } .exploring .content .picBox .item .tits:after { top: 4px; } } @media (max-width: 1200px) { .exploring .content .box .boxRight .con .icon { width: 80px; } .exploring .content .itemBox .item .icon { width: 80px; } .exploring .content .box .boxRight .con .tits { font-size: 24px; line-height: 34px; } .exploring .content .box .boxRight .con .tit { font-size: 24px; line-height: 26px; margin-top: 10px; } .exploring .content .itemBox .item .t { font-size: 20px; line-height: 22px; margin-top: 10px; } .exploring .content .picBox .item .tits { font-size: 18px; line-height: 20px; width: calc(100% - 25px); padding-left: 25px; margin-top: 10px; } .exploring .content .picBox .item .tits:after { top: 2px; width: 16px; height: 16px; } .exploring .content .box .boxRight .con .line { width: 60px; height: 5px; } } @media (max-width: 1024px) { .exploring .content .box .boxRight .con .icon { width: 60px; } .exploring .content .itemBox .item .icon { width: 60px; } .exploring .content .box { width: 100%; } .exploring .content .box .boxRight .con .tits { font-size: 20px; line-height: 28px; } .exploring .content .box .boxRight .con .tit { font-size: 20px; line-height: 22px; margin-top: 10px; } .exploring .content .itemBox .item .t { font-size: 18px; line-height: 20px; margin-top: 10px; } } @media (max-width: 768px) { .exploring { padding-top: 20px; } .exploring .content .box .boxRight { padding: 15px 0; } .exploring .content .box .boxRight .con .icon { width: 40px; } .exploring .content .itemBox .item .icon { width: 40px; } .exploring .content .box .boxRight .con .tits { font-size: 16px; line-height: 20px; } .exploring .content .box .boxRight .con .tit { font-size: 14px; line-height: 14px; margin-top: 5px; } .exploring .content .box .boxRight .con .line { width: 45px; height: 3px; } .exploring .content .itemBox .item .t { font-size: 14px; line-height: 16px; margin-top: 5px; } .exploring .content { width: 100%; } .exploring .content .picBox .item .tits { font-size: 16px; } } .discovery { padding-top: 7.6%; padding-bottom: 70px; } .discovery .content { width: calc(100% - 40px); margin: 0 auto; } .discovery .content .videoBox1 { width: 100%; height: auto; position: relative; cursor: pointer; } .discovery .content .videoBox1 img { position: relative; z-index: 10; } .discovery .content .videoBox1 .icon { width: 120px; height: 120px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("../img/about/icon10.png"); z-index: 11; } .discovery .content .videoBox1 .video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 8; } .discovery .content .videoBox1 .video video { width: 100%; height: 100%; } .discovery .content .videoBox1.on .video { z-index: 12; } .discovery .content .txtBox { margin-top: 6.4%; } @media (max-width: 1366px) { .discovery .content .videoBox1 .icon { width: 120px; height: 120px; } } @media (max-width: 768px) { .discovery { padding-top: 20px; padding-bottom: 30px; } .discovery .content { width: 100%; } .discovery .content .videoBox1 .icon { width: 40px; height: 40px; } } .searchText { margin-top: 5%; } .searchText .t { font-size: 26px; line-height: 26px; color: #333; } .searchText .t1 { font-size: 14px; line-height: 14px; color: #999; margin-top: 19px; } @media (max-width: 1024px) { .searchText .t { font-size: 16px; } } .searchT { padding-top: 64px; } @media (max-width: 1024px) { .searchT { padding-top: 20px; } } .searchBox { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1; -webkit-transform: translateY(-60px); transform: translateY(-60px); -webkit-transition: transform .5s,opacity .5s; transition: transform .5s,opacity .5s; opacity: 0; background-color: #fff; } .searchBox .box-new { padding-top: 176px; } .searchBox .box-new .searchNew { width: -webkit-calc(100% - 140px); width: calc(100% - 140px); height: 58px; border-bottom: 1px solid #c4c4c4; padding: 0 70px; position: relative; } .searchBox .box-new .searchNew .text { width: 70%; float: left; font-size: 14px; line-height: 58px; height: 58PX; color: #666; background: none; border: none; } .searchBox .box-new .searchNew .closeSearch { width: 18px; height: 58px; float: right; display: block; background-image: url("../img/close.png"); background-position: center; background-repeat: no-repeat; } .searchBox .box-new .searchNew .submit { width: 20px; height: 40px; position: absolute; top: 0; right: 45px; border: none; background: none; background-position: center; background-size: 100% auto; background-image: url("../img/searchM.png"); background-repeat: no-repeat; display: none; } .searchBox .box-new .list { width: -webkit-calc(100% - 70px); width: calc(100% - 70px); margin-top: 34px; } .searchBox .box-new .list dl { width: 32%; margin-right: 2%; float: left; } .searchBox .box-new .list dl .t { width: -webkit-calc(100% - 116px); width: calc(100% - 116px); padding-left: 20px; font-size: 14px; line-height: 36px; color: #999; margin: 0 auto 10px; } .searchBox .box-new .list dl dd { width: -webkit-calc(100% - 96px); width: calc(100% - 96px); height: 64px; background-color: #f7fbfc; margin: 0 auto 10px; } .searchBox .box-new .list dl dd a { width: 100%; height: auto; display: block; } .searchBox .box-new .list dl dd a .pic { width: 64px; height: 64px; float: left; } .searchBox .box-new .list dl dd a .tits { font-size: 14px; line-height: 24px; height: 64px; color: #666; float: left; margin-left: 2px; width: -webkit-calc(100% - 76px); width: calc(100% - 76px); } .searchBox .box-new .list dl:last-child { margin-right: 0; } .searchBox.on { z-index: 99; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } @media (max-width: 1366px) { .searchBox .box-new .list dl { width: 33.3333333333%; margin-right: 0; } .searchBox .box-new .list dl .t { width: -webkit-calc(100% - 80px); width: calc(100% - 80px); } .searchBox .box-new .list dl dd { width: -webkit-calc(100% - 60px); width: calc(100% - 60px); } .searchBox .box-new .list dl dd { height: 50px; } .searchBox .box-new .list dl dd a .pic { width: 50px; height: 50px; } .searchBox .box-new .list dl dd a .tits { height: 50px; line-height: 20px; } .searchBox .box-new .searchNew { width: -webkit-calc(100% - 60px); width: calc(100% - 60px); padding: 0 30px; } } @media (max-width: 1150px) { .searchBox .box-new { padding-top: 160px; } .searchBox .box-new .list { width: 100%; margin-top: 15px; } } @media (max-width: 1024px) { .searchBox .box-new { padding-top: 70px; } .searchBox .box-new .list dl { width: 100%; } .searchBox .box-new .list dl:nth-child(1) { display: none; } .searchBox .box-new .list dl:nth-child(3) { display: none; } .searchBox .box-new .list dl .t { width: -webkit-calc(100% - 10px); width: calc(100% - 10px); padding-left: 10px; } .searchBox .box-new .list dl dd { width: 100%; } .searchBox .box-new .searchNew { width: -webkit-calc(100% - 30px); width: calc(100% - 30px); height: 40px; padding: 0 15px; } .searchBox .box-new .searchNew .text { line-height: 40px; } .searchBox .box-new .searchNew .closeSearch { height: 40px; } .searchBox .box-new .searchNew .submit { display: block; } } .star-banner { width: 100%; height: auto; position: relative; z-index: 5; overflow: hidden; } .star-banner img.i1 { display: none; } .star-banner .con { width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; color: #fff; } .star-banner .con .tits { width: 205px; height: auto; margin: 0 auto; position: relative; } .star-banner .con .tits .left { width: 100px; float: left; text-align: center; padding-top: 20px; } .star-banner .con .tits .left .t { font-size: 46px; line-height: 46px; font-family: Arial; } .star-banner .con .tits .left .img { width: 87px; height: auto; margin: 13px auto 0; } .star-banner .con .tits .left .img .i1 { display: block; } .star-banner .con .tits .left .img .i2 { display: none; } .star-banner .con .tits .right { font-size: 111px; line-height: 111px; font-family: Arial; letter-spacing: -12px; } .star-banner .con .tits span { width: 166px; height: 2px; background-color: #fff; left: -199px; position: absolute; display: block; top: 53px; } .star-banner .con .tits span.s { width: 166px; right: -199px; left: auto; } .star-banner .con .tit { font-size: 63px; line-height: 63px; letter-spacing: 3px; margin-top: 23px; } .star-banner .con .tit1 { font-size: 29px; line-height: 29px; letter-spacing: 4px; margin-top: 26px; } @media (max-width: 1366px) { .star-banner .con .tit { font-size: 42px; line-height: 42px; } .star-banner .con .tit1 { font-size: 20px; line-height: 20px; } .star-banner .con .tits { width: 180px; } .star-banner .con .tits .right { font-size: 90px; line-height: 90px; } .star-banner .con .tits .left .t { font-size: 32px; line-height: 32px; } .star-banner .con .tits span { top: 45px; } } @media (max-width: 1024px) { .star-banner img.i { display: none; } .star-banner img.i1 { display: block; } .star-banner .con { color: #18368b; top: -9%; } .star-banner .con .tit { font-size: 30px; line-height: 30px; margin-top: 15px; } .star-banner .con .tit1 { font-size: 16px; line-height: 16px; margin-top: 10px; } .star-banner .con .tits { width: 165px; } .star-banner .con .tits .left { padding-top: 16px; } .star-banner .con .tits .left .t { font-size: 22px; line-height: 22px; } .star-banner .con .tits .left .img { margin: 5px auto 0; } .star-banner .con .tits .left .img .i1 { display: none; } .star-banner .con .tits .left .img .i2 { display: block; } .star-banner .con .tits .right { font-size: 64px; line-height: 64px; letter-spacing: -4px; } .star-banner .con .tits span { width: 50px; height: 1px; background-color: #18368b; left: -65px; top: 30px; } .star-banner .con .tits span.s { right: -60px; width: 50px; } } .star { width: 100%; height: auto; position: relative; background-color: #eef3f7; background-image: url("../img/star_bg.png"), url("../img/star_bg1.png"); background-position: center center,bottom center; background-repeat: repeat-y,no-repeat; background-size: 100% auto; padding-bottom: 6.2%; } .star .w1200 { background-color: #fff; padding-top: 5.2%; padding-bottom: 20px; position: relative; z-index: 6; } .star .content { width: -webkit-calc(100% - 240px); width: calc(100% - 240px); padding: 0 120px; background-color: #fff; height: auto; margin: 0 auto; position: relative; z-index: 5; } .star .content .item { width: 100%; margin-bottom: 60px; height: auto; } .star .content .item .pic { width: 52%; height: auto; float: right; } .star .content .item .pic .pc { display: block; } .star .content .item .pic .m { display: none; } .star .content .item .con { width: 40.625%; height: auto; float: left; padding-top: 12%; position: relative; margin-left: 5%; } .star .content .item .con .tits { font-size: 22px; line-height: 22px; color: #12368a; } .star .content .item .con .tits br { display: none; } .star .content .item .con .tit { font-size: 16px; line-height: 16px; color: #333; margin-top: 20px; } .star .content .item .con .tag { width: 100%; height: auto; margin-top: 28px; } .star .content .item .con .tag .icon { width: 61px; height: auto; float: left; margin-right: 35px; } .star .content .item .con .tag .icon .ic { width: 100%; height: auto; position: relative; } .star .content .item .con .tag .icon .ic .icNew { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("../img/1515.png"); -webkit-transition: transform .5s; transition: transform .5s; } .star .content .item .con .tag .icon p { width: 160%; margin-left: -30%; font-size: 12px; line-height: 12px; text-align: center; margin-top: 7px; } @media (min-width: 1024px) { .star .content .item .con .tag .icon:hover .ic .icNew { transform: rotate(180deg); } } .star .content .item .con .tit1 { margin-top: 58px; } .star .content .item .con .tit1 span { font-size: 14px; line-height: 14px; float: left; color: #12368a; display: block; font-family: Arial; } .star .content .item .con .tit1 i { width: 1px; height: 10px; background-color: #c0c0c0; margin: 2px 10px 0; display: block; float: left; } .star .content .item .con .tit2 { margin-top: 30px; } .star .content .item .con .tit2 img { max-width: 100%; } .star .content .item .con .tit2 .iii1 { display: block; } .star .content .item .con .tit2 .iii2 { display: none; } .star .content .item .con .more { width: 204px; height: 44px; border-radius: 22px; display: block; border: 1px solid #12368a; text-align: center; font-size: 14px; line-height: 44px; margin-top: 30px; -webkit-transition: all .5s; transition: all .5s; background-color: #12368a; color: #fff; } .star .content .item .con .more span { padding-right: 17px; background-image: url("../img/icon1.png"); background-position: right center; background-repeat: no-repeat; } .star .content .item:nth-child(2n) .pic { float: left; } .star .content .item:nth-child(2n) .con { float: right; } .star .img1 { width: 34%; position: absolute; top: 8.5%; right: -26%; } .star .img2 { width: 21.6%; position: absolute; top: 28.5%; left: -14.6%; } .star .img3 { width: 24.8%; position: absolute; top: 48%; right: -21.5%; } .star .img4 { width: 68.3%; position: absolute; top: 60%; left: -40.5%; } .star .img5 { width: 25.2%; bottom: 12%; right: 0; position: absolute; } @media (max-width: 1280px) { .star .content .item .con .tits { font-size: 20px; line-height: 20px; } } @media (max-width: 1200px) { .star .content { width: -webkit-calc(100% - 160px); width: calc(100% - 160px); padding: 0 80px; } .star .content .item .con { padding-top: 7%; } .star .content .item .con .tit1 { margin-top: 30px; } } @media (max-width: 1024px) { .star .img1, .star .img2, .star .img3, .star .img4, .star .img5 { display: none; } .star .w1200 { margin: -10% auto 0; overflow: hidden; background-color: #fbfcfd; } .star .content { width: 100%; padding: 0; background-color: #fbfcfd; } .star .content .item .con { margin-right: 5%; } .star .content .item .pic { float: right; width: 53.9%; } .star .content .item .pic .pc { display: none; } .star .content .item .pic .m { display: block; } .star .content .item .con { width: 39%; float: left; margin-left: 7.1%; margin-right: 0; padding-top: 6%; } .star .content .item:nth-child(2n) .con { float: right; margin-left: 0; } .star .content .item:nth-child(2n) .con .tits { max-width: 100%; } .star .content .item:nth-child(2n) .pic { float: left; } .star .content .item .con .tag .icon { width: 41px; margin-right: 10px; } .star .content .item .con .tag .icon p { display: none; } .star .content .item .con .more { width: 120px; height: 30px; line-height: 30px; font-size: 12px; } .star .content .item .con .tit { display: none; } .star .content .item .con .tits { width: 120%; font-size: 16px; line-height: 26px; } .star .content .item .con .tits br { display: block; } .star .content .item { margin-bottom: 40px; } .star .content .item .con.c1 { padding-top: 34%; } .star .content .item .con.c2 { padding-top: 16%; } .star .content .item .con .tit2 { width: 80%; margin-top: 0; } .star .content .item .con .tit2.tt1 { width: 100%; top: 10%; } .star .content .item .con .tit2 .iii1 { display: none; } .star .content .item .con .tit2 .iii2 { display: block; } .star .content .item .con .tit2.tt1 img { max-width: 85%; } .star .content .item .con .more { background-color: #12368a; color: #fff; } .star .content .item .con .more span { background-image: url("../img/icon1.png"); } .star .content .item:nth-child(1) .con { padding-top: 8%; } .star .content .item:nth-child(4) .con { padding-top: 2%; } .star .content .item:nth-child(5) .con { padding-top: 3%; } .star .content .item:nth-child(7) .con { padding-top: 3%; } .star .content .item:nth-child(6) .con { padding-top: 8%; } .star .content .item:nth-child(10) .con { padding-top: 3%; } } @media (max-width: 768px) { .star .content .item .con .tag .icon { width: 31px; margin-right: 10px; } .star .content .item .con .tag { margin-top: 15px; } .star .content .item .con .tit1 { margin-top: 15px; width: 120%; } .star .content .item .con .more { margin-top: 15px; } .star .content .item:nth-child(2n) .con { margin-right: 2%; } } @media (max-width: 414px) { .star .content .item .con .tit1 i { margin: 2px 3px 0; } } .canvasMask { position: relative; } .canvasMask canvas { position: absolute; top: 50%; left: -50%; display: block; max-width: 100%; } .PageTop__Mainvisual video { display: block; position: absolute; pointer-events: none; background-color: white; z-index: 5; width: 100%; height: 100%; left: 0; top: 0; } .animation { -moz-transform: translate(0, 80px); -o-transform: translate(0, 80px); -webkit-transform: translate(0, 80px); transform: translate(0, 80px); opacity: 0; } .animation.srcospcur { -moz-transform: translate(0, 0px); -o-transform: translate(0, 0px); -webkit-transform: translate(0, 0px); transform: translate(0, 0px); opacity: 1; transition: 1.3s; -webkit-transition: 1.3s; -moz-transition: 1.3s; -ms-transition: 1.3s; -o-transition: 1.3s; } .fehler { width: 100%; height: auto; background-color: #f7f9fa; padding: 15% 0; } .fehler .box { width: 615px; max-width: 90%; height: auto; margin: 0 auto; } .fehler .box .pic { width: 100%; height: auto; } .fehler .box p { width: 100%; text-align: center; font-size: 18px; line-height: 36px; color: #333; margin-top: 12%; } .fehler .box .tt { text-align: center; width: 100%; margin-top: 4%; } .fehler .box .tt a { padding-left: 22px; font-size: 14px; line-height: 20px; background-image: url("../img/fehler_icon.png"); background-position: left center; display: inline-block; background-repeat: no-repeat; color: #12368a; } .store { width: 100%; height: 100vh; position: relative; min-height: 750px; } .store .map { width: 100%; height: 100%; } .store .return { width: 44px; height: 44px; position: absolute; top: 47px; right: 47px; display: block; background-image: url("../img/close11.png"); background-position: center; background-repeat: no-repeat; background-size: cover; } .store .box { width: 410px; height: calc(100% - 120px); background-color: #fff; position: absolute; top: 60px; left: 4.9%; } .store .box .box-new { width: 370px; margin: 0 auto; padding-top: 30px; } .store .box .box-new .logo { width: 86px; height: auto; margin: 0 auto; display: block; } .store .box .box-new .tits { text-align: center; font-size: 14px; line-height: 14px; color: #333; margin-top: 60px; } .store .box .box-new .map1 { display: none; } .store .box .box-new .tableBox { width: calc(100% - 24px); height: auto; margin: 44px auto 0; } .store .box .box-new .tableBox .t { width: 100%; height: auto; margin-bottom: 20px; } .store .box .box-new .tableBox .t span { width: 38px; height: auto; float: left; display: block; font-size: 14px; line-height: 30px; color: #333; } .store .box .box-new .tableBox .t .select { width: 116px; height: 30px; float: left; position: relative; z-index: 5; } .store .box .box-new .tableBox .t .select .ti { width: calc(100% - 22px); height: 28px; border: 1px solid #c4c4c4; border-radius: 10px; padding: 0 10px; font-size: 14px; line-height: 28px; color: #666; overflow: hidden; cursor: pointer; } .store .box .box-new .tableBox .t .select ul { width: calc(100% - 2px); height: auto; border: 1px solid #c4c4c4; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; position: absolute; top: 29px; left: 0; background-color: #fff; display: none; max-height: 130px; overflow-y: scroll; } .store .box .box-new .tableBox .t .select ul li { cursor: pointer; font-size: 14px; line-height: 26px; padding: 0 10px; width: calc(100% - 20px); overflow: hidden; color: #333; } .store .box .box-new .tableBox .t .select ul li:hover { background-color: #18368b; color: #fff; } .store .box .box-new .tableBox .t .select em { width: 8px; height: 100%; position: absolute; top: 0; right: 10px; background-image: url("../img/p_i1.png"); background-position: center; background-repeat: no-repeat; background-size: 8px auto; opacity: 0.8; } .store .box .box-new .tableBox .t .select.on .ti { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .store .box .box-new .tableBox .t .select.on em { transform: rotate(180deg); } .store .box .box-new .tableBox .t .select.se { width: 284px; } .store .box .box-new .tableBox .t .tt-new { width: 140px; height: auto; } .store .box .box-new .tableBox .t .tt-new .select { z-index: 10; } .store .box .box-new .tableBox .t .tt-new i { font-size: 14px; line-height: 30px; float: right; } .store .box .box-new .click { width: 180px; height: 46px; border-radius: 23px; background-color: #18368b; display: block; margin: 35px auto 0; text-align: center; font-size: 14px; line-height: 46px; color: #fff; } .store .box .box-new .line { width: 100%; height: 1px; background-color: #c4c4c4; margin-top: 40px; } .store .box .box-new .conBox { width: calc(100% - 12px); padding-left: 12px; margin-top: 50px; } .store .box .box-new .conBox .num { padding-left: 26px; background-image: url("../img/store_icon.png"); background-position: left center; font-size: 14px; color: #333; line-height: 20px; background-repeat: no-repeat; } .store .box .box-new .conBox .list { width: 100%; height: 310px; margin-top: 27px; overflow: hidden; } .store .box .box-new .conBox .list ul { width: 100%; height: auto; } .store .box .box-new .conBox .list ul li { width: 100%; height: auto; padding: 16px 0 8px; cursor: pointer; } .store .box .box-new .conBox .list ul li .n { width: 37px; padding-left: 6px; font-size: 14px; line-height: 16px; float: left; color: #333; } .store .box .box-new .conBox .list ul li .con { width: 173px; height: auto; float: left; } .store .box .box-new .conBox .list ul li .con .t { font-size: 14px; line-height: 16px; color: #333; } .store .box .box-new .conBox .list ul li .con .tt { font-size: 12px; line-height: 18px; color: #666; margin-top: 8px; } @media (max-width: 1620px) { .store .box { height: calc(100vh - 60px); top: 30px; } .store .box .box-new .tits { margin-top: 25px; } } @media (max-width: 1700px) { .store .box .box-new { padding-top: 20px; } .store .box .box-new .tableBox { margin: 20px auto 0; } .store .box .box-new .click { margin: 20px auto 0; } .store .box .box-new .line { margin-top: 20px; } .store .box .box-new .conBox { margin-top: 25px; } .store .box .box-new .conBox .list { margin-top: 20px; } } @media (max-width: 1366px) { .store .box .box-new .conBox .list { height: 240px; } } @media (max-width: 768px) { .store { height: auto; min-height: 0; padding-bottom: 30px; } .store .map { display: none; } .store .return { display: none; } .store .box { max-width: 94%; height: auto; margin: 0 auto; position: relative; left: auto; top: auto; } .store .box .box-new .map1 { width: 100%; height: 280px; display: block; margin-top: 20px; } .store .box .box-new .conBox .list ul li .con { width: calc(100% - 70px); } .store .box .box-new .conBox .list { height: 310px; } } @media (max-width: 414px) { .store .box .box-new { width: 355px; } } .anchorBL { display: none !important; } .fake { width: 100%; height: auto; background-color: #fafbfc; padding: 85px 0; } .fake .content { width: 1250px; height: auto; max-width: 90%; margin: 0 auto; } .fake .content .pic { width: 46.64%; height: auto; float: right; margin-top: 110px; } .fake .content .con { width: 46.4%; height: auto; background-color: #fff; padding-top: 100px; padding-bottom: 100px; } .fake .content .con .con-new { margin-left: 60px; } .fake .content .con .con-new .tits { color: #18368b; } .fake .content .con .con-new .tit { font-size: 14px; line-height: 20px; color: #666; margin-top: 17px; } .fake .content .con .con-new .tableBox { margin-top: 50px; } .fake .content .con .con-new .tableBox .t { height: 30px; margin-bottom: 20px; } .fake .content .con .con-new .tableBox .t span { width: 70px; height: auto; font-size: 14px; line-height: 30px; color: #333; display: block; float: left; } .fake .content .con .con-new .tableBox .t .text { width: 278px; height: 28px; padding-left: 10px; border-radius: 10px; border: 1px solid #c4c4c4; font-size: 14px; line-height: 28px; color: #333; float: left; background: none; margin-left: 5px; } .fake .content .con .con-new .tableBox .t .text.text1 { width: 115px; padding-left: 0; text-align: center; } .fake .content .con .con-new .tableBox .t label { width: 82px; height: auto; float: left; margin-left: 20px; } .fake .content .con .con-new .tableBox .t .tt { font-size: 14px; line-height: 30px; color: #666; float: left; } .fake .content .con .con-new .tableBox .t .tt a { color: #18368b; border-bottom: 1px solid #18368b; } .fake .content .con .con-new .tableBox .submit { width: 180px; height: 46px; border-radius: 23px; background-color: #18368b; text-align: center; display: block; font-size: 14px; line-height: 46px; color: #fff; margin-top: 80px; } .fake .content .con .con-new .txt { font-size: 12px; line-height: 22px; color: #999; margin-top: 80px; } .fake .content .con .con-new .txt p { margin-bottom: 10px; } .fake .content .con .con-new .txt p a { color: #18368b; border-bottom: 1px solid #18368b; } @media (max-width: 1280px) { .fake .content .con .con-new { margin-left: 30px; } .fake .content .con .con-new .tableBox .t label { margin-left: 10px; } .fake .content .con .con-new .tableBox .submit { margin-top: 40px; } .fake .content .con .con-new .txt { margin-top: 40px; } } @media (max-width: 1024px) { .fake { padding: 30px 0; } .fake .content .pic { width: 90%; float: none; margin: 0 auto; } .fake .content .con { width: 100%; float: none; padding: 20px 0; } } @media (max-width: 570px) { .fake .content .con .con-new .tableBox { margin-top: 20px; } .fake .content .con .con-new .tableBox .t .text { width: 193px; } .fake .content .con .con-new .tableBox .t { margin-bottom: 10px; } .fake .content .con .con-new { width: calc(100% - 30px); margin-left: 15px; } } .news { padding-top: 7%; } .news .title { text-align: center; } .news .title .tits { font-size: 48px; line-height: 50px; color: #333; } .news .title .line { width: 263px; height: 2px; margin: 18px auto 0; background-image: url("../img/about/line.png"); background-size: cover; background-repeat: no-repeat; } .news .title .tit { font-size: 16px; line-height: 16px; color: #666; margin-top: 10px; } .news .list { position: relative; margin-top: 7.3%; } .news .list .yearSelect { width: 100%; margin-bottom: 10px; position: relative; } .news .list .yearSelect select { width: 120px; height: 28px; border: 1px solid #c4c4c4; border-radius: 20px; font-size: 14px; line-height: 28px; color: #333; -moz-appearance: none; -moz-appearance: none; -webkit-appearance: none; background-image: url("../img/p_i1.png"); background-repeat: no-repeat; background-position: 100px center; background-size: 10px auto; padding-left: 10px; } .news .list .yearSelect select::-ms-expand { display: none; } .news .list .yearSelect span { padding-right: 16px; font-size: 14px; line-height: 30px; color: #333; margin-left: 5px; background-position: right center; background-repeat: no-repeat; background-size: 8px auto; font-weight: bold; } .news .list .yearSelect dl { width: 100px; height: auto; top: 30px; left: 0; background-color: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); position: absolute; max-height: 120px; overflow-y: scroll; display: none; } .news .list .yearSelect dl dd { font-size: 14px; line-height: 30px; padding-left: 5px; border-bottom: 1px solid #999; } .news .list ul { width: 100%; height: auto; } .news .list ul li { width: 100%; height: auto; border-bottom: 1px solid #e5e5e5; margin-bottom: 6.5%; padding-bottom: 6.5%; } .news .list ul li a { width: 100%; height: auto; display: block; } .news .list ul li a .time { width: 110px; height: auto; text-align: center; color: #333; float: left; } .news .list ul li a .time .day { font-size: 60px; line-height: 44px; font-family: Arial; } .news .list ul li a .time .t { font-size: 18px; line-height: 18px; margin-top: 4px; } .news .list ul li a .time .line { width: 100%; height: 1px; background-color: #333; margin-top: 18px; } .news .list ul li a .time .type { font-size: 14px; line-height: 14px; margin-top: 20px; } .news .list ul li a .con { width: 83%; float: right; } .news .list ul li a .con .pic { width: 48.2%; height: auto; float: left; overflow: hidden; } .news .list ul li a .con .pic img { transition: all 1.5s; } .news .list ul li a .con .conLeft { width: 47.7%; float: right; padding-top: 15px; } .news .list ul li a .con .conLeft .tits { font-size: 20px; line-height: 28px; color: #333; } .news .list ul li a .con .conLeft .date { font-size: 16px; line-height: 18px; color: #999; margin-top: 10px; display: none; } .news .list ul li a .con .conLeft .tit { font-size: 14px; line-height: 22px; color: #999; height: 44px; margin-top: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .news .list ul li a .con .conLeft .more { display: inline-block; font-size: 14px; line-height: 18px; color: #666; border-bottom: 1px solid #666; margin-top: 42px; } @media (min-width: 1024px) { .news .list ul li:hover a .con .pic img { transform: scale(1.1); } .news .list ul li:hover a .con .conLeft .tits { color: #19368b; } } .news .list ul li:last-child { border-bottom: none; margin-bottom: 4%; } .news .list .nav { position: absolute; top: 0; left: 0; } .news .list .nav a { padding-left: 62px; font-size: 16px; line-height: 38px; color: #333; position: relative; display: block; margin-bottom: 18px; } .news .list .nav a:after { width: 0; height: 2px; position: absolute; left: 0; top: 17px; background-color: #000; content: ''; transition: width .5s; } .news .list .nav a.on { font-size: 24px; } .news .list .nav a.on:after { width: 30px; } @media (min-width: 1024px) { .news .list .nav a:hover { font-size: 24px; } .news .list .nav a:hover:after { width: 30px; } } @media (max-width: 1480px) { .news .list .nav a { padding-left: 30px; margin-bottom: 10px; } .news .list .nav a.on { font-size: 22px; } .news .list .nav a.on:after { width: 20px; } } @media (max-width: 1366px) { .news .list ul li a .time { width: 90px; margin-left: 5%; } .news .list ul li a .time .day { font-size: 46px; line-height: 36px; } .news .title .tits { font-size: 36px; line-height: 38px; } } @media (max-width: 1200px) { .news .list ul li a .time { width: 90px; } .news .list ul li a .time .day { font-size: 36px; line-height: 26px; } .news .list ul li a .time .t { font-size: 16px; line-height: 16px; } .news .list ul li a .time .line { margin-top: 10px; } .news .list ul li a .time .type { margin-top: 6px; } .news .list ul li a .con .conLeft .tits { font-size: 18px; line-height: 26px; } .news .title .tits { font-size: 30px; line-height: 32px; } } @media (max-width: 1024px) { .news .list ul li a .time { display: none; } .news .list ul li a .con .conLeft .date { display: block; } .news .list ul li a .con { width: 100%; } .news .list .nav { display: none; } .news .list ul li a .con .conLeft .tits { font-size: 16px; line-height: 24px; } .news .list ul li a .con .conLeft .tit { margin-top: 15px; } .news .list ul li a .con .conLeft .more { margin-top: 20px; } } @media (max-width: 768px) { .news { padding-top: 20px; } .news .title .tits { font-size: 24px; line-height: 26px; } .news .list ul li a .con .pic { width: 100%; float: none; } .news .list ul li a .con .conLeft { width: 100%; float: none; } .news .list ul li a .con .conLeft .date { font-size: 12px; line-height: 14px; } .news .title .line { margin: 10px auto 0; } .news .title .tit { font-size: 14px; line-height: 14px; } .news .list { margin-top: 20px; } } .newsInfo { padding-top: 7%; padding-bottom: 6%; } .newsInfo .w1200 { position: relative; } .newsInfo .content { width: 790px; margin: 0 auto; height: auto; } .newsInfo .content .tits { text-align: center; font-size: 30px; line-height: 40px; color: #333; } .newsInfo .content .date { text-align: center; font-size: 16px; line-height: 18px; color: #999; margin-top: 10px; display: none; } .newsInfo .content .con { font-size: 14px; line-height: 24px; color: #999; margin-top: 52px; text-align: center; } .newsInfo .content .con img { display: block; margin: 0 auto; max-width: 100%; height: auto !important; } .newsInfo .paging { width: 100%; font-size: 14px; line-height: 22px; color: #666; margin-top: 8%; } .newsInfo .paging p { width: 40%; } .newsInfo .paging p a { color: #666; } @media (min-width: 1024px) { .newsInfo .paging p a:hover { color: #19368b; } } .newsInfo .paging p.right { text-align: right; } .newsInfo .time { width: 110px; height: auto; text-align: center; color: #333; position: absolute; top: 0; left: 0; } .newsInfo .time .day { font-size: 60px; line-height: 44px; font-family: Arial; } .newsInfo .time .t { font-size: 18px; line-height: 18px; margin-top: 4px; } .newsInfo .time .line { width: 100%; height: 1px; background-color: #333; margin-top: 18px; } .newsInfo .time .type { font-size: 14px; line-height: 14px; margin-top: 20px; } @media (max-width: 1366px) { .newsInfo .content .tits { font-size: 24px; line-height: 34px; } .newsInfo .time { width: 90px; } .newsInfo .time .day { font-size: 46px; line-height: 36px; } .newsInfo .content .con { margin-top: 40px; } } @media (max-width: 1200px) { .newsInfo .content .tits { font-size: 20px; line-height: 30px; } .newsInfo .time { width: 90px; } .newsInfo .time .day { font-size: 36px; line-height: 26px; } .newsInfo .content .con { margin-top: 30px; } .newsInfo .time .t { font-size: 16px; line-height: 16px; } .newsInfo .time .line { margin-top: 10px; } .newsInfo .time .type { margin-top: 6px; } } @media (max-width: 1024px) { .newsInfo .time { display: none; } .newsInfo .content .date { display: block; } .newsInfo .content { max-width: 100%; } } @media (max-width: 768px) { .newsInfo { padding-top: 20px; } .newsInfo .content .tits { font-size: 18px; line-height: 26px; } .newsInfo .content .date { font-size: 14px; line-height: 16px; } .newsInfo .paging p { width: 100%; text-align: left !important; } .newsInfo .content .con { margin-top: 15px; } } .ewmFx{ width: 170px; height: auto; background-color: #18368b; position: fixed; top: 50%; transform: translateY(-50%); right: 10px; padding-top: 20px; padding-bottom: 20px; z-index: 1000; } .ewmFx .tits{ text-align: center; font-size: 12px; line-height: 14px; color: #fff; margin-top: 5px; } .ewmFx .ewm{ width: 100px; height: auto; padding: 10px; margin: 15px auto 0; background-color: #fff; } .ewmFx .tit{ text-align: center; font-size: 12px; line-height: 14px; margin-top: 8px; color: #fff; } .ewmFx .tit span{ font-weight: bold; } .ewmFx .close{ font-size: 14px; line-height: 14px; position: absolute; top: 8px; right: 8px; color: #fff; font-family: Arial; cursor: pointer; } @media (max-width: 1280px){ .ewmFx{ display: none; } } /*# sourceMappingURL=style.css.map */