.video-box { height: 100%!important; } .loading-mask { width: 100%; height: 100%; background: #000; position: fixed; left: 0; top: 0; z-index: 99999; -webkit-animation: xs 2s ease-in-out 3.3s forwards; -moz-animation: xs 2s ease-in-out 3.3s forwards; animation: xs 2s ease-in-out 3.3s forwards; } .loading-mask .loading-box { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #222; overflow: hidden; -webkit-animation: yd 1s linear 3.3s forwards; -moz-animation: yd 1s linear 3.3s forwards; animation: yd 1s linear 3.3s forwards; } .loading-mask .loading-box .loading-img { position: relative; z-index: 20; } .loading-mask .loading-box .loading-bg { position: absolute; left: 0; top: 100%; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; -webkit-animation: btt 3s linear .3s forwards; -moz-animation: btt 3s linear .3s forwards; animation: btt 3s linear .3s forwards; } @-webkit-keyframes btt { 0% { top: 100%; } 100% { top: 0%; } } @-moz-keyframes btt { 0% { top: 100%; } 100% { top: 0%; } } @keyframes btt { 0% { top: 100%; } 100% { top: 0%; } } @-webkit-keyframes xs { 0% { opacity: 1; } 100% { opacity: 0; pointer-events: none; } } @-moz-keyframes xs { 0% { opacity: 1; } 100% { opacity: 0; pointer-events: none; } } @keyframes xs { 0% { opacity: 1; } 100% { opacity: 0; pointer-events: none; } } @-webkit-keyframes yd { 0% { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 750px; } 100% { left: 3.125%; top: 20px; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); width: 160px; } } @-moz-keyframes yd { 0% { left: 50%; top: 50%; -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 750px; } 100% { left: 3.125%; top: 20px; -moz-transform: translate(0%, 0%); transform: translate(0%, 0%); width: 160px; } } @keyframes yd { 0% { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 750px; } 100% { left: 3.125%; top: 20px; -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); transform: translate(0%, 0%); width: 160px; } } #fp-nav.right { z-index: 999; } #fp-nav ul li .fp-tooltip.right { top: 6px; right: 35px; } #fp-nav ul li, .fp-slidesNav ul li { width: 25px; height: 25px; } #fp-nav ul li a, .fp-slidesNav ul li a { width: 100%; height: 100%; -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -o-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid transparent; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #fp-nav ul li a span, .fp-slidesNav ul li a span { position: static; display: block; margin: 0!important; -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -o-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; width: 4px!important; height: 4px!important; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: rgba(255, 255, 255, 0.3); } #fp-nav ul li .active, .fp-slidesNav ul li .active { border-color: #e40000; } #fp-nav ul li .active span, .fp-slidesNav ul li .active span { background: #e40000; width: 4px!important; height: 4px!important; } #fp-nav ul li:hover a, .fp-slidesNav ul li:hover a { border-color: #e40000; } #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span { background: #e40000; } #fullpage { z-index: 101; position: relative; } .refullpage .footerplace { pointer-events: none; } .footerplace { display: none; } .section.footerplace { display: block; } .ind-tl-box { text-align: center; color: #ffffff; padding: 4.1666% 0 3.125%; } .ind-tl-box .en { font-size: 48px; font-weight: bold; margin-bottom: 30px; } .ind-tl-box .cn { font-size: 30px; } .ind_a { background: #000; } .ind_b { color: #fff; background: url(../images/ind_01.jpg) no-repeat center / cover; } .ind_b .pro-box { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .ind_b .pro-box .box { height: 56vh; width: 45.3125%; margin-right: 3.125%; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; text-align: center; opacity: .8; -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -o-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; position: relative; } .ind_b .pro-box .box .indiv { width: 100%; } .ind_b .pro-box .box .name, .ind_b .pro-box .box .info, .ind_b .pro-box .box .btnbox { width: 100%; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .ind_b .pro-box .box .moreBtn { margin: 0 auto; } .ind_b .pro-box .box .name { font-size: 42px; font-weight: bold; margin-bottom: 20px; } .ind_b .pro-box .box .info { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 50px; } .ind_b .pro-box .box .info span { display: block; padding: 0 20px; border-right: 1px solid rgba(255, 255, 255, 0.3); } .ind_b .pro-box .box .info span:last-child { border-right: none; } .ind_b .pro-box .box::after { content: ""; border: solid 1px rgba(255, 255, 255, 0.1); left: 1px; top: 1px; bottom: 1px; right: 1px; } .ind_b .pro-box .box:last-child { margin-right: 0; } .ind_b .pro-box .box:hover { opacity: 1; } .ind_b .pro-box .box:hover::after { border-color: transparent; } .ind_c, .ind_d { position: relative; } .ind_c .bwrap, .ind_d .bwrap { margin-top: -10px; } .ind_c .swiper-container, .ind_d .swiper-container { padding-top: 10px; } .ind_c .swiper-container .swiper-slide, .ind_d .swiper-container .swiper-slide { position: relative; text-align: center; top: 0; -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -o-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; overflow: hidden; } .ind_c .swiper-container .swiper-slide .i-mask, .ind_d .swiper-container .swiper-slide .i-mask { position: absolute; display: block; background: rgba(102, 102, 102, 0.1); width: 0%; left: 0; top: 0; height: 100%; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -o-transition-duration: .6s; transition-duration: .6s; } .ind_c .swiper-container .swiper-slide a, .ind_d .swiper-container .swiper-slide a { padding: 65px 0 70px; position: relative; z-index: 99; } .ind_c .swiper-container .swiper-slide .icon, .ind_d .swiper-container .swiper-slide .icon { width: 150px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: relative; margin: 0 auto 40px; } .ind_c .swiper-container .swiper-slide .icon img, .ind_d .swiper-container .swiper-slide .icon img { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .ind_c .swiper-container .swiper-slide .icon::after, .ind_d .swiper-container .swiper-slide .icon::after { content: ""; width: 100%; height: 100%; left: 0; top: 0; background: url(../images/ind_07.png) no-repeat center / 100%; -webkit-animation: zq 10s linear infinite; -moz-animation: zq 10s linear infinite; animation: zq 10s linear infinite; } .ind_c .swiper-container .swiper-slide .tl-box .cn, .ind_d .swiper-container .swiper-slide .tl-box .cn { color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; font-size: 24px; -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -o-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; } .ind_c .swiper-container .swiper-slide .tl-box .en, .ind_d .swiper-container .swiper-slide .tl-box .en { color: rgba(255, 255, 255, 0.7); } .ind_c .swiper-container .swiper-slide::after, .ind_d .swiper-container .swiper-slide::after { content: ""; left: 1px; top: 1px; right: 1px; bottom: 1px; border: solid 1px rgba(255, 255, 255, 0.1); } .ind_c .swiper-container .swiper-slide:hover .icon::after, .ind_d .swiper-container .swiper-slide:hover .icon::after { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; } .ind_c .swiper-container .swiper-slide:hover .tl-box .cn, .ind_d .swiper-container .swiper-slide:hover .tl-box .cn { color: #ffffff; } .ind_c .swiper-container .swiper-slide:hover::after, .ind_d .swiper-container .swiper-slide:hover::after { border-color: transparent; } .ind_c .swiper-pagination, .ind_d .swiper-pagination { text-align: center; position: static; } .ind_c .swiper-pagination .swiper-pagination-bullet, .ind_d .swiper-pagination .swiper-pagination-bullet { margin: 0 5px; } .ind_c .btnbox, .ind_d .btnbox { margin-top: 60px; } .ind_c .btnbox .moreBtn, .ind_d .btnbox .moreBtn { margin: 0 auto; } .ind_c.active .swiper-container .swiper-slide .i-mask, .ind_d.active .swiper-container .swiper-slide .i-mask { width: 100%; } .ind_c.active .swiper-container .swiper-slide:nth-child(5) .i-mask, .ind_d.active .swiper-container .swiper-slide:nth-child(5) .i-mask { -webkit-transition-delay: .8s; -moz-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } .ind_c.active .swiper-container .swiper-slide:nth-child(4) .i-mask, .ind_d.active .swiper-container .swiper-slide:nth-child(4) .i-mask { -webkit-transition-delay: .7s; -moz-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; } .ind_c.active .swiper-container .swiper-slide:nth-child(3) .i-mask, .ind_d.active .swiper-container .swiper-slide:nth-child(3) .i-mask { -webkit-transition-delay: .6s; -moz-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } .ind_c.active .swiper-container .swiper-slide:nth-child(2) .i-mask, .ind_d.active .swiper-container .swiper-slide:nth-child(2) .i-mask { -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } .ind_c.active .swiper-container .swiper-slide:nth-child(1) .i-mask, .ind_d.active .swiper-container .swiper-slide:nth-child(1) .i-mask { -webkit-transition-delay: .4s; -moz-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .ind_d { background: #121212; } .ind_d .fp-tableCell { position: relative; } .ind_d .threeJs { position: absolute; width: 100%; height: 100%; left: 0; top: 10%; z-index: 0; pointer-events: none; } .ind_d .ind-tl-box, .ind_d .bwrap { position: relative; z-index: 10; } @-webkit-keyframes zq { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes zq { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes zq { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } } .ind_e { background: url(../images/ind_09.jpg) no-repeat center / cover; } .ind_e .wrap { padding: 80px 0; text-align: center; color: #ffffff; border: solid 1px rgba(255, 255, 255, 0.1); } .ind_e .wrap .title { font-size: 24px; margin-bottom: 20px; } .ind_e .wrap .text { line-height: 36px; margin: 0 auto 40px; max-width: 620px; } .ind_e .wrap .moreBtn { margin: 0 auto; } .ind_b .fp-tableCell, .ind_c .fp-tableCell, .ind_d .fp-tableCell, .ind_e .fp-tableCell { padding-top: 80px; } @media (min-width: 1600px) { header { background: none; } header .logobox { padding: 25px 0; } header .navbox .navli .navTl { padding: 25px 0; } .ind_b .fp-tableCell, .ind_c .fp-tableCell, .ind_d .fp-tableCell, .ind_e .fp-tableCell { padding-top: 100px; } } @media (max-width: 1600px) { .ind_b .pro-box .box { width: 41%; margin-right: 6%; } } @media (max-width: 1536px) { .ind-tl-box .en { font-size: 42px; margin-bottom: 20px; } .ind-tl-box .cn { font-size: 24px; } .ind_b .pro-box .box .name { font-size: 36px; } .ind_c .swiper-container .swiper-slide a, .ind_d .swiper-container .swiper-slide a { padding: 55px 0 60px; } .ind_c .swiper-container .swiper-slide .tl-box .cn, .ind_d .swiper-container .swiper-slide .tl-box .cn { font-size: 20px; margin-bottom: 16px; } .ind_e .wrap { padding: 70px 0; } .ind_e .wrap .title { font-size: 20px; } } @media (max-width: 1440px) { .ind-tl-box .en { font-size: 36px; margin-bottom: 16px; } .ind_b .pro-box .box { height: 52vh; width: 40.25%; margin-right: 4.5%; } .ind_b .pro-box .box .name { font-size: 30px; } .ind_c .swiper-container .swiper-slide .icon, .ind_d .swiper-container .swiper-slide .icon { width: 120px; } .ind_c .swiper-container .swiper-slide a, .ind_d .swiper-container .swiper-slide a { padding: 35px 0 40px; } .ind_c .swiper-container .swiper-slide .tl-box .cn, .ind_d .swiper-container .swiper-slide .tl-box .cn { font-size: 16px; margin-bottom: 10px; } } @media (max-width: 1280px) { .ind-tl-box .en { font-size: 30px; } .ind-tl-box .cn { font-size: 20px; } .ind_b .pro-box .box .name { font-size: 30px; } .ind_c .swiper-container .swiper-slide a, .ind_d .swiper-container .swiper-slide a { padding: 45px 0 50px; } .ind_c .swiper-container .swiper-slide .icon, .ind_d .swiper-container .swiper-slide .icon { width: 120px; } .ind_c .swiper-container .swiper-slide .tl-box .cn, .ind_d .swiper-container .swiper-slide .tl-box .cn { font-size: 18px; } } @media (max-width: 1024px) { .ind-tl-box { padding: 60px 0 40px; } .ind_b .pro-box .box { height: 380px; } .ind_b .pro-box .box .name { font-size: 24px; } .ind_b .pro-box .box .info { margin-bottom: 40px; } .ind_c, .ind_d { padding-bottom: 60px; } .ind_c .swiper-container .swiper-slide a, .ind_d .swiper-container .swiper-slide a { padding: 45px 0 50px; } .ind_c .swiper-container .swiper-slide .icon, .ind_d .swiper-container .swiper-slide .icon { width: 100px; } .ind_c .btnbox, .ind_d .btnbox { margin-top: 40px; } .ind_d { overflow: hidden; padding-bottom: 0; } .ind_e { padding-bottom: 60px; } .ind_e .wrap { padding: 40px 0; } } @media (max-width: 768px) { .ind-tl-box { padding: 50px 0 40px; } .ind-tl-box .en { font-size: 24px; } .ind-tl-box .cn { font-size: 18px; } .ind_b .pro-box { display: block; width: 90%; margin: 0 auto; } .ind_b .pro-box .box { width: 100%; margin: 0 0 20px 0; height: 260px; } .ind_b .pro-box .box .name { font-size: 18px; } .ind_b .pro-box .box:last-child { margin-bottom: 0; } }