/** 娓呴櫎鍐呭杈硅窛 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 缁撴瀯鍏冪礌 */ dl, dt, dd, ul, ol, li, /* list elements 鍒楄〃鍏冪礌 */ pre, /* text formatting elements 鏂囨湰鏍煎紡鍏冪礌 */ form, fieldset, legend, button, input, textarea, /* form elements 琛ㄥ崟鍏冪礌 */ th, td /* table elements 琛ㄦ牸鍏冪礌 */ { margin: 0; padding: 0; } /** 璁剧疆榛樿瀛椾綋 **/ body, button, input, select, textarea /* for ie */ { /* font: 14px/1.0 "FZS3JW", "Arial", "Microsoft YaHei", "榛戜綋", "瀹嬩綋", "KaiTi", sans-serif; */ font: 14px/1.0 "Arial", "Source Han Sans CN", "Microsoft YaHei", "KaiTi", sans-serif; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } address, cite, dfn, em, var, i { font-style: normal; } /* 灏嗘枩浣撴壎姝 */ code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 缁熶竴绛夊瀛椾綋 */ small { font-size: 12px; } /* 灏忎簬 12px 鐨勪腑鏂囧緢闅鹃槄璇? 璁 small 姝e父鍖 */ /** 閲嶇疆鍒楄〃鍏冪礌 **/ ul, ol { list-style: none; } /** 閲嶇疆鏂囨湰鏍煎紡鍏冪礌 **/ a { color: #333; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a:hover { text-decoration: none; cursor: pointer; } sup { vertical-align: text-top; } /* 閲嶇疆, 鍑忓皯瀵硅楂樼殑褰卞搷 */ sub { vertical-align: text-bottom; } /** 閲嶇疆琛ㄥ崟鍏冪礌 **/ legend { color: #000; } /* for ie6 */ fieldset, img { border: 0; } /* img 鎼溅锛氳閾炬帴閲岀殑 img 鏃犺竟妗 */ button, input, select, textarea { font-size: 100%; outline: none; } /* 浣垮緱琛ㄥ崟鍏冪礌鍦 ie 涓嬭兘缁ф壙瀛椾綋澶у皬 */ button, input[type="button"] { cursor: pointer; -webkit-appearance: none; } input::-ms-clear { display: none; } /*闅愯棌鏂囨湰妗嗗弶瀛?/ input::-ms-reveal { display: none; } /*闅愯棌瀵嗙爜妗嗗皬鐪肩潧*/ /* 娉細optgroup 鏃犳硶鎵舵 */ /** 閲嶇疆琛ㄦ牸鍏冪礌 **/ table { border-collapse: collapse; border-spacing: 0; } /* 閲嶇疆 HTML5 鍏冪礌 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { display: block; margin: 0; padding: 0; } sup { line-height: 0; position: relative; vertical-align: baseline; top: -.5rem; left: -.2rem; } * { font-size: 24px; --colorR: #E01837; --colorW: #fff; } @font-face { font-family: 'wbzt1'; src: url('wbzt1.otf'); } .colorR { color: var(--colorR); } .colorW { color: #fff; } .flex-row { display: flex; } .flex-column { display: flex; flex-direction: column; } .padding { padding: 6.5vw 16.5vw; box-sizing: border-box; } .padding2 { padding: 8% 0; box-sizing: border-box; } .out { width: 100%; } .head { height: 60px; /* height: 70px; */ width: 80vw; left: 10vw; position: fixed; z-index: 999; display: flex; align-items: center; justify-content: space-between; /* border-bottom: 1px solid #fff; */ box-sizing: border-box; top: 0; transition: .5s; } .head-active { background-color: #E01737; width: 100%; left: 0; padding: 0 5%; border-bottom: none; box-shadow: 0 0 10px rgba(0, 0, 0, .1); } .head .logo { display: flex; /* width: 9%; height: 100%; background-image: url('../img2/logo.png'); background-position: center; background-repeat: no-repeat; background-size: contain; */ width: 8%; align-items: center; } .head .logo img { width: 100%; } .input-box { width: 8%; } .input-box form { width: 100%; position: relative; } .input-border { border: none; width: 100%; height: 30px; border-radius: 15px; padding: 0 35px; box-sizing: border-box; font-size: .62rem; } .input-box form .submit { position: absolute; left: 10px; top: 50%; background-image: url('../img2/search.png'); background-position: center; background-repeat: no-repeat; background-size: contain; transform: translate(0, -50%); height: 20px; width: 20px; background-color: transparent; border: none; } .head ul { display: flex; width: 65%; justify-content: flex-end; } .head ul li { display: flex; align-items: center; } .head ul a { font-size: .62rem; color: #fff; margin: 0 20px; } .nav-btn { width: 30px; height: 16px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .nav-btn span { height: 2px; width: 100%; background-color: #fff; display: flex; position: absolute; transition: .5s; } .nav-btn span:nth-child(1) { top: 0; left: 0; } .nav-btn span:nth-child(2) { top: 50%; left: 0; transform: translate(0, -50%); } .nav-btn span:nth-child(3) { bottom: 0; left: 0; } .nav-btn-active span:nth-child(1) { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); } .nav-btn-active span:nth-child(2) { opacity: 0; } .nav-btn-active span:nth-child(3) { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); } .head-right { display: flex; justify-content: space-between; width: 10%; position: relative; align-items: center; } .head-right::after { content: ""; position: absolute; height: 80%; width: 1px; background-color: #fff; left: 52%; top: 10%; } .head .en { text-transform:capitalize; color: #fff; font-size: .62rem; } .head a { transition: .5s; } /* .head a:hover { color: var(--colorR); } */ /* .head-active ul a { color: #333; } .head-active .nav-btn span { background-color: #333; } .head-active .input-border { border: 1px solid rgba(0, 0, 0, .1); } .head-active .en { color: #333; } .head-active .head-right::after { background-color: #333; } */ .pageSwier { width: 100%; height: 100vh; overflow: hidden; } .pageSwier-inner { position: relative; height: 100vh !important; } .bannerSwiper { height: 100vh !important; } .bannerSwiper img { width: 100%; } .bannerSwiper .swiper-slide { height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .mobile-text { display: none; } .bannerSwiper .swiper-slide span { font-size: 24px; color: #fff; letter-spacing: 80px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; padding-left: 80px; white-space: nowrap; } .mobile-jt { display: none; } .page-title { font-size: 1.4rem; letter-spacing: 2px; color: #333; } .page-title p { font-size: .55rem; margin-bottom: 10vh; margin-top: 15px; letter-spacing: 1px; text-transform: uppercase; } .page2-info { position: absolute; width: 90%; left: 0; /* background-color: #F6F6F6; */ padding: 100px 16.5vw; padding-left: 0; height: auto !important; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } .page2-info span { font-size: .65rem; line-height: 1.2rem; } .page2-info-inner { overflow: hidden; padding-left: 16.5vw; box-sizing: border-box; position: relative; } .mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #E01837; } .mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail { background-color: #B5B5B5; } .mCSB_scrollTools { position: absolute; left: -8.25vw; top: 0; } .mCustomScrollBox { overflow: visible; } .page2-info p { width: 50%; font-size: 16px; line-height: 1.3rem; margin-bottom: 30px; color: #4d4d4d; text-align: justify; } .page2-info p:nth-last-child(1) { margin-bottom: 0; } .page2-ul { position: absolute; bottom: 8%; display: flex; transform: translate(0, -50%); width: 70%; justify-content: space-between; } .page2-ul h2 { font-size: 3.5rem; color: var(--colorR); font-weight: 500; font-family: 'wbzt1'; text-align: center; display: flex; align-items: flex-end; line-height: 2.5rem; justify-content: center; } .page2-ul h2 p { font-size: 3.5rem; color: var(--colorR); font-weight: 500; font-family: 'wbzt1'; text-align: center; margin: 0; margin-right: 5px; } .page2-ul sup { top: -2.4rem; } .page2-ul span { margin-left: -.2rem; } .page2-ul li span { margin-left: -.5rem; } .page2-ul p { font-size: .7rem; margin-top: 25px; color: #333; text-align: center; } .page2-ul span { font-size: .7rem; line-height: 1rem; } .page2-info-img { position: absolute; top: 7.5vw; right: 15vw; width: 15vw; z-index: 2; display: none; } .page2::after { content: ""; width: 10vw; height: 15vw; position: absolute; right: calc(15vw - 18px); top: calc(7.5vw - 16px); background-color: var(--colorR); display: none; } .page3 { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .page3-inner { position: absolute; width: 100%; left: 0; } .page3-swpier .swiper-slide { padding-bottom: 28%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; filter: blur(5px); } .page3-swpier .swiper-slide-active { filter: blur(0); } .swiper-inner { width: 100%; position: absolute; top: 0; left: 0; box-sizing: border-box; padding: 4% 7% 0; opacity: 0; color: #fff; transition: .5s; } .swiper-inner h1 { font-size: 9rem; font-family: 'wbzt1'; margin-bottom: 0.4rem; margin-left: -0.4rem; opacity: 0.8; letter-spacing: -0.1rem; } .swiper-inner p { font-size: 0.8rem; line-height: 1.6; } .page3-inner .page3-swpier-pagination, .page5 .page5-swpier-pagination { width: 100%; margin-top: 50px; } .page3-swpier-pagination .swiper-pagination-bullet, .page5-swpier-pagination .swiper-pagination-bullet { width: 80px; background-color: #fff; height: 3px; margin: 0 3px; border-radius: 0; opacity: 1; } .page3-swpier-pagination .swiper-pagination-bullet-active, .page5-swpier-pagination .swiper-pagination-bullet-active { background-color: var(--colorR) !important; height: 3px; } .page3-swpier .swiper-slide-active .swiper-inner { opacity: 1; } /* .page3-swpier .swiper-slide .swiper-inner::after { content: ""; position: absolute; width: 60px; height: 9px; background-image: url('../img2/a-jt.png'); background-position: center; background-repeat: no-repeat; background-size: contain; bottom: 20px; right: 20px; transition: .5s; } */ .page3-swpier .swiper-slide .swiper-inner:hover::after { right: 10px; } .background-item { background-position: center; background-repeat: no-repeat; background-size: cover; } .background-item2 { background-position: center; background-repeat: no-repeat; background-size: auto; } .background-item3 { background-position: center; background-repeat: no-repeat; background-size: contain; } .page4 { background-image: url('../img2/p4-b2.jpg'); } .logo-list { width: 100%; display: flex; flex-wrap: wrap; } .logo-item { display: flex; /* width: 24.5%; margin-right: 0.66%; */ width: calc(25% - 8px); margin-right: 10px; padding-bottom: 16%; /* background-color: rgba(255, 255, 255, .5); */ border-radius: 15px; margin-top: 20px; /* filter: grayscale(); */ box-shadow: 11px 16px 32px rgba(0, 0, 0, .1); opacity: 1; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover !important; align-items: flex-start; transition: .5s; } .logo-item:hover img:nth-child(1) { opacity: 0; } .logo-item:hover img:nth-child(2) { opacity: 1; } .logo-item img { width: 75%; display: inline-block; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; transition: .5s; } .logo-item img:nth-child(2) { opacity: 0; } .logo-item:nth-child(4n) { margin-right: 0; } .page5 {} .page5-swpier { width: 100%; overflow: visible; } .page5-inner { overflow: hidden; /* width: 75%; */ width: 70%; position: absolute; /* left: 12.5%; */ left: 15%; padding: 50px 0; margin-top: -50px; transition: .5s; } .page5-swpier .swiper-slide { padding-bottom: 35%; position: relative; transition: transform .5s; } .page5-swpier .swiper-slide h2 { position: absolute; font-size: .65rem; left: 30px; top: 30px; } .page5-swpier-pagination { position: absolute; bottom: 5vw; width: 100% !important; left: 0; } .page5-swpier .swiper-slide:hover { /* border: 10px solid #fff; */ background-position: center; background-repeat: no-repeat; background-size: cover; box-sizing: border-box; box-shadow: 0 0 25px rgba(0, 0, 0, .1); z-index: 5; /* transition: .5s; */ transform: translate(-5%, 0) scale(1.1); } .page5-swpier .swiper-slide-active:hover { transform: translate(10%, 0) scale(1.1) !important; } .page5-inner:hover { /* padding-right: 5px; */ box-sizing: unset; } .page5 .page-title { color: #333; } .page5-swpier-pagination span { /* background-color: #333 !important; */ } .page6-tab { position: absolute; left: 46.5vw; top: 6.5vw; transform: translate(0, 50%); display: flex; } .page6-tab span { cursor: pointer; font-size: .65rem; padding: 10px 25px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 25px; margin: 0 5px; } .page6-tab .active { background-color: var(--colorR); color: #fff; } .page6-tab span:hover { background-color: var(--colorR); color: #fff; } .page6-box { position: absolute; display: flex; justify-content: space-between; width: 90%; height: 55vh; left: 0; overflow: hidden; } .page6-left { width: 48%; background-color: #F6F6F6; /* height: 100%; */ padding: 30px; box-sizing: border-box; overflow: hidden; } .page6-left .mCustomScrollBox { padding-left: calc(16.5vw - 30px); overflow: hidden; } .page6-left .mCSB_scrollTools { left: 8.25vw; display: none !important; } .page6-left-inner { display: flex; flex-direction: column; height: 100%; width: 100%; } .page6-left-inner img { width: 100%; } .page6-left h2 { text-align: right; font-size: .8rem; color: #989898; } .page6-left h1 { font-size: .75rem; line-height: 1.2rem; } .page6-left p { font-size: .6rem; color: #989898; line-height: 1.2rem; margin-bottom: 15px; word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .page6-left p:nth-child(-n + 3) { margin-top: 15px; } .page6-left .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: var(--colorR) } .page6-right { width: 48%; height: 100%; } .page6-right a { display: flex; width: 100%; height: 33.3%; border-bottom: 1px solid #ccc; box-sizing: border-box; flex-direction: column; justify-content: space-between; padding: 38px 20px; position: relative; transition: .5s; } .page6-right a:nth-child(1) { border-top: 1px solid #ccc; } .page6-right a h1 { display: flex; flex-direction: row; justify-content: space-between; font-size: .8rem; position: relative; } .page6-right a h1 span { color: #989898; font-size: .8rem; } .page6-right a p { font-size: .65rem; color: #989898; line-height: 1.2rem; width: 80%; } .page6-right a h1::before { content: ""; left: -10px; height: 4px; width: 4px; border-radius: 50%; position: absolute; top: 50%; transform: translate(0, -50%); background-color: #000; } .page6-right a::after { width: 56px; height: 13px; content: ""; position: absolute; bottom: 30px; right: 20px; background-image: url('../img2/jt-p6.png'); background-position: center; background-repeat: no-repeat; background-size: auto; opacity: 0; transition: .5s; } .page6-right a:hover::after { opacity: 1; } .page6-box { left: -100%; opacity: 0; transition: .8s; } .page6-left .mCustomScrollBox { position: relative; } .page6-left .mCustomScrollBox::after { position: absolute; content: ''; left: calc(8.25vw - 30px); top: 0; width: 3px; height: 100%; background-position: center; background-image: url('../img2/zsx.png'); background-repeat: no-repeat; background-size: contain; } .page6-box-active { left: 0; opacity: 1; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { height: 100%; } .page6-left-inner { justify-content: space-between; } .foot-out { height: auto !important; } .foot { height: auto; background-color: #898989; padding: 4.5vh 16.5vw; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; } .foot-left { width: 70%; display: flex; flex-direction: column; /* justify-content: space-between; */ } .foot-left ul { width: 100%; display: flex; justify-content: space-between; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #fff; } .foot-left ul li { display: flex; flex-direction: column; } .foot-left ul a { font-size: .6rem; margin-bottom: 13px; color: #cccccc; transition: .5s; } .foot-left ul a:nth-last-child(1) { margin-bottom: 0; } .foot-left ul a:hover { color: #fff; } .foot-left ul li a:nth-child(1) { margin-bottom: 25px; color: #fff; font-weight: 500; } .foot-left-bottom { width: 100%; display: flex; justify-content: space-between; } .foot-left-bottom-left h1 { font-size: .62rem; color: #fff; margin-bottom: 25px; } .foot-left-bottom-left p { font-size: .6rem; color: #ccc; margin-bottom: 15px; } .foot-left-bottom-left p:nth-last-child(1) { margin-bottom: 0; } .foot-h6{ display: none; line-height: 20px; font-size: 12px; color: #bfbfbf; margin-top: 20px; } .foot-h6 a{ display: block; line-height: 20px; font-size: 12px; color: #bfbfbf; } .share { display: flex; align-items: flex-end; } .share a { width: 30px !important; height: 30px !important; background-position: center; background-repeat: no-repeat; background-size: contain; display: flex; margin-bottom: 0 !important; margin-right:30px; } .foot-right { display: flex; flex-direction: column; justify-content: space-between; } .ewm { display: flex; flex-direction: column; align-items: center; } .ewm p { font-size: .62rem; color: #fff; margin-top: 20px; } .foot-right input { border: none; height: 35px; border-radius: 17.5px; padding: 0 30px; box-sizing: border-box; font-size: .62rem; width: 200px; line-height: 35px; } .search { position: relative; width: 200px; } .search p { border: none; height: 35px; border-radius: 17.5px; padding: 0 30px; box-sizing: border-box; font-size: 15px; width: 100%; line-height: 35px; background-color: #fff; color: #666; display: flex; position: relative; cursor: pointer; transition: .5s; } .search-active { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .search p::after { position: absolute; content: ''; right: 15px; background-image: url('../img2/xl-yl.png'); background-position: center; background-repeat: no-repeat; background-size: contain; height: 15px; width: 15px; top: 50%; transform: translate(0, -50%); } .yqlj-more { position: absolute; bottom: 0; left: 0; background-color: #fff; width: 100%; display: flex; flex-direction: column; transform: translate(0, 100%); border-radius: 17.5px; border-top-left-radius: 0; border-top-right-radius: 0; display: none; } .yqlj-more a { font-size: 15px; height: 40px; border-bottom: 1px solid rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: left; padding: 0 30px; color: #666; box-sizing: border-box; } /* .search::after { position: absolute; content: ''; right: 10px; top: 50%; width: 20px; height: 20px; background-image: url('../img2/search.png'); background-repeat: no-repeat; background-size: contain; background-position: center; transform: translate(0, -50%); } */ .foot-more { height: 30px !important; background-color: var(--colorR); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; } .head-mc { width: 100%; height: 100vh; position: fixed; background-color: #282828; top: 0; left: 0; z-index: 9; padding: 0 10vw; padding-top: 20vh; box-sizing: border-box; display: none; } .head-mc ul { display: flex; flex-wrap: wrap; width: 100%; } .head-mc ul li { width: 20%; display: flex; flex-direction: column; align-items: flex-start; } .head-mc ul .checkout_l { display: none; } .head-mc ul li a { font-size: .65rem; color: #ccc; margin-bottom: 25px; display: flex; } .head-mc ul li a:nth-child(1) { color: #fff; font-size: 1rem; margin-bottom: 35px; } .head-mc ul li a:nth-last-child(1) { margin-bottom: 0; } .head-mc ul li { margin-top: 80px; } .head-mc ul li:nth-child(-n+5) { margin-top: 0; } .head-mc ul li span { font-size: .65rem; color: #ccc; margin-top: 20px; } .page3-mobile-swiper { display: none; } .mobile-title-page5 { display: none; } .page5-mobile-swiper { display: none; } .page6-mobile { display: none; } .mobile-p { display: none; } .mobile-video-mc { display: none; } .mobile-page { display: none; } .box-page { min-height: 60vh; width: 100%; margin-top: 8vh; box-sizing: border-box; } .title-page { font-size: 1.2rem; color: #333; position: relative; margin-bottom: 80px; } .title-page::after { position: absolute; content: ''; right: 0; width: 80%; height: 1px; background-color: rgba(125, 125, 125, 1); top: 50%; transform: translate(0, -50%); } .cp-box { display: flex; justify-content: space-between; width: 1285px; height: 556px; zoom: .99; } .ceter-cp { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; align-content: space-between; } .cp-box a { display: flex; } .left-cp { display: flex; flex-direction: column; justify-content: space-between; } .cp-box a { position: relative; transition: .5s; } .ceter-cp a { margin-right: 1.2%; display: flex; } .ceter-cp a:nth-child(2n) { margin-right: 0; } .cp-box span { position: absolute; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; letter-spacing: 1px; background-color: rgba(0, 0, 0, .5); opacity: 0; transition: .5s; } .cp-box a:hover span { opacity: 1; } .mobile-box-cp { display: none; } .cplb-box { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; } .cplb-left { width: 23%; background-color: #fff; padding: 0 15px; box-sizing: border-box; } .cplb-right { width: 75%; } .cplb-left a { height: 80px; display: flex; width: 100%; font-size: .65rem; align-items: center; justify-content: flex-start; padding: 0 15px; border-bottom: 1px solid rgba(0, 0, 0, .1); box-sizing: border-box; position: relative; } .cplb-left li:nth-last-child(1) a { border: none; } .box-page2 { background-color: #FAFAFA; } .cplb-left a::after { position: absolute; content: ''; right: 0; height: 16px; width: 20px; background-image: url('../img2/cp-xy.png'); background-position: center; background-repeat: no-repeat; background-size: auto; opacity: 0; transition: .5s; } .cplb-left a:hover, .cplb-left .active { color: #E01737; } .cplb-left a:hover::after, .cplb-left .active::after { opacity: 1; } .cplb-right video { width: 100%; margin-bottom: 30px; } .cplb-item-list { width: 100%; display: flex; flex-wrap: wrap; } .cplb-item { width: 31%; margin-right: 3.5%; margin-bottom: 30px; padding-bottom: 34%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .cplb-item:nth-child(3n) { margin-right: 0; } .cplb-item span { position: absolute; bottom: 5%; font-size: .65rem; text-align: center; display: flex; width: 100%; align-items: center; justify-content: center; transition: .5s; } .pagination { width: 100%; display: flex; justify-content: center; margin-top: 35px; } .pagination a { height: 35px !important; width: 35px !important; background-color: #CCCCCC; color: #fff; font-size: .6rem; line-height: .6rem; display: flex; align-items: center; justify-content: center; margin: 0 10px; transition: .5s; } .pagination .prev, .pagination .next { /* width: 90px; */ height: 35px !important; border-radius: 50% !important; display: none; } .pagination .next { background-image: url('../img2/p-jt1.png'); background-position: center; background-repeat: no-repeat; background-size: 15px; } .pagination .prev { background-image: url('../img2/p-jt1.png'); transform: rotate(180deg); background-position: center; background-repeat: no-repeat; background-size: 15px; } .pagination .next:hover, .pagination .prev:hover { background-image: url('../img2/p-jt2.png'); } /* .pagination .last, .pagination .first { width: 60px; height: 35px; border-radius: 5px; } */ .pagination a:hover { background-color: #E01837; } .pagination .active { background-color: #E01837; } .cplb-item-list a:hover span { color: #E01737; } .title-page-box { display: flex; justify-content: space-between; } .title-page-box .title-page { width: 80%; } .title-page-box .title-page::after { width: 85%; } .tab-box { display: flex; } .tab-box span { font-size: .6rem; height: 30px; border-radius: 17.5px; padding: 0 15px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, .1); margin-right: 20px; cursor: pointer; transition: .5s; } .tab-box span:nth-last-child(1) { margin-right: 0; } .tab-box span:hover, .tab-box .active { background-color: var(--colorR); color: #fff; border: 1px solid var(--colorR); } .video-box { display: none; flex-wrap: wrap; } .active-v-box { display: flex; } .video-item { width: 32%; margin-right: 2%; margin-top: 35px; } .video-item:nth-child(3n) { margin-right: 0; } .video-item:nth-child(-n + 3) { margin-top: 0; } .video-item p { padding-bottom: 56%; background-position: center; background-repeat: no-repeat; background-size: cover; margin-bottom: 15px; position: relative; } .video-item span { font-size: .6rem; color: #333; text-align: center; display: inline-block; width: 100%; } .video-item p::after { position: absolute; content: ''; width: 60px; height: 60px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url('../img2/v-play2.png'); top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; } .video-mc { width: 50%; padding: 35px; box-sizing: border-box; position: fixed; top: 50%; left: 50%; background-color: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(0, 0, 0, .5); z-index: 5; display: none; } .video-mc video { width: 100%; } .video-mc img { right: 10px; top: 5px; position: absolute; cursor: pointer; } .page-box { width: 100%; margin-top: 30px; } .page-box a { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .5); color: #808080; background-color: transparent; box-sizing: border-box; } .page-box .prev, .page-box .next { border-radius: 5px; } .page-box .active { color: #fff; border: none; } .page-box a:hover { color: #fff; border: 1px solid transparent; } .title-page2::after { width: 85%; } .news-box { display: flex; flex-wrap: wrap; margin-bottom: 60px; } .news-item { display: flex; flex-direction: column; width: 32.5%; margin-right: 1.25%; box-shadow: 7px 0px 20px rgba(15, 5, 10, .08); margin-top: 30px; box-sizing: border-box; position: relative; } .news-item:nth-child(3n) { margin-right: 0; } .news-item:nth-child(-n + 3) { margin-top: 0; } .news-img { padding-bottom: 61%; background-position: center; background-repeat: no-repeat; background-size: cover; } .news-info { padding: 42.5px 20px; box-sizing: border-box; } .news-info p { font-size: .6rem; color: #808080; margin-bottom: 20px; } .news-info h1 { font-size: .75rem; line-height: 1.2rem; margin-bottom: 20px; font-weight: 500; } .news-info span { text-align: right; font-size: .6rem; color: var(--colorR); display: flex; width: 100%; justify-content: flex-end; position: absolute; bottom: 30px; right: 20px; } .mobile-news-box { display: none; } /* 鍔ㄧ敾 */ .mo-bottom { transform: translate(0, 5vh); opacity: 0; } .mo-opt::after { opacity: 0; transform: translate(0, 5vh); } .bannerSwiper .swiper-slide span { transition: 1.5s; } .page-title { transition: .5s .5s; } .page2-info-img { transition: .5s .5s; } .page2::after { transition: .5s .5s; } .page2-info-img { transition: .5s .8s; } .page2::after { transition: .5s .8s; } .page2-info { transition: .5s 1.2s; } .page2-ul { transition: .5s 1.5s; } .page3-inner { transition: .5s 1s; } .logo-list { transition: .5s 1s; } .page5-swpier { transition: .5s 1s; } .page5-swpier-pagination { transition: .5s 1.5s; } .page6-tab { transition: .5s 1s; } .page6-left, .page6-right { transition: .5s 1.5s; } .title-page { transition: .5s; } .cp-box { transition: .5s .5s; } .video-box { transition: .5s .5s; } .title-page-box { transition: .5s; } .news-box { transition: .5s .5s; } .page-box { transition: .5s 1s; } .foot-left-bottom-left .pc-p { margin-bottom: 0; } .tab-box a { margin-right: 20px; } .tab-box a:nth-last-child(1) { margin-right: 0; } .foot-more p { font-size: 11px; } .foot-more p span{ font-size: 11px; } .foot-more p a{ color: #fff; font-size: 11px; } .foot-more p a img{ width: 14px; vertical-align: middle; } .mobile-fz-swiper-out { display: none; } .ewm p { font-size: 13px; } .page2-info-inner::after { position: absolute; content: ""; top: 0; height: 100%; width: 3px; background-position: center; background-repeat: no-repeat; background-size: auto; left: 8.25vw; background-image: url('../img2/zsx2.png'); display: none; } .mCSB_scrollTools { display: none !important; } .bdshare-button-style0-16 a, .bdshare-button-style0-16 .bds_more { padding: 0 !important; margin: 0 10px !important; } .banner-video { position: absolute; width: 100%; height: 100%; display: flex; object-fit: fill; } .bannerSwiper .swiper-slide span { z-index: 6; } .v-mobile { display: none; } /* 20201130 */ /* 澧炲姞浜т笟鏉垮潡椤甸潰 */ .auto { background-position: center; background-repeat: no-repeat; background-size: auto; } .cover { background-position: center; background-repeat: no-repeat; background-size: cover; } .cybk-item { width: 29%; margin-right: 6.5%; } .cybk-item:nth-child(3n) { margin-right: 0; } .cybk-item-img { padding-bottom: 69%; } .cybk-item-logo { padding-bottom: 35%; background-size: 50%; } .cybk-item-info { font-size: 16px; line-height: 30px; color: #333; } /* 20210226 */ /* .page2{ padding: 9.5vw 16.5vw; } */ .page-title { margin: 30px 0 50px 0; } .page-title p { margin-bottom: 0; } .page2-info { margin-top: 0; padding: 30px 16.5vw; padding-left: 0; } .page4 .page-title { margin-bottom: 120px; } .page4 { /* background-repeat: repeat; background-size: 70%; */ } .logo-item { margin-top: 9px; } .logo-item:nth-child(-n + 4) { margin-top: 0; } .page5-inner { margin-top: -27px; } .page5-swpier .swiper-slide h2 { top: 40px; } .page6-box { top: 31%; } .page6-tab { top: 7.8vw; } .page6-tab span { margin: 0 20px; position: relative; } .page6-left { padding: 60px 30px; } .page6-box { height: 60vh; } .page6-left h2 { margin-bottom: 20px; } .page6-right a { padding: 45px 20px; } .page6-left .mCustomScrollBox::after { height: calc(100% - 56px); top: unset; bottom: 0; } .foot { padding: 6vh 16.5vw; } .foot-left ul { padding-bottom: 35px; margin-bottom: 35px; } .foot-more { height: 30px !important; /* height: 50px !important; */ } .bannerSwiper .swiper-slide span { letter-spacing: 90px; font-size: 26px; padding-left: 90px; } .head-active { padding: 0 10%; } .page3-swpier-pagination .swiper-pagination-bullet, .page5-swpier-pagination .swiper-pagination-bullet { margin: 0 6px; transition: .5s; } .page3-swpier-pagination .swiper-pagination-bullet:hover, .page5-swpier-pagination .swiper-pagination-bullet:hover { height: 6px; } .page3-swpier-pagination .swiper-pagination-bullet-active, .page5-swpier-pagination .swiper-pagination-bullet-active { height: 6px; } .page3-swpier .swiper-slide::before { width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3); content: ''; position: absolute; top: 0; left: 0; } /* .page3-swpier .swiper-slide-active::before { display: none; } */ .page6-tab span:nth-child(1) { margin-left: 0; } .page6-right a::after { opacity: 1; } .page6-right a:hover::after { background-image: url('../img2/jt-p6s.png'); } .colorW { color: #fff; } .page2{ background-image: url('../img2/jtjsbg.jpg'); background-position: center 0; } .page5-swpier .swiper-slide{ position: relative; } .page5-swpier .swiper-slide::after{ position: absolute; width: 100%; height: 100%; content: ''; background-color: rgba(0, 0, 0, 0); transition: .5s; } .page5-swpier .swiper-slide:hover::after{ opacity: 0; }