body { line-height: 1.5; } .w1600{width: 1440px;overflow: hidden;margin: 0 auto;} @media screen and (max-width: 1600px){ .w1600{width: 80%;}} @media screen and (max-width: 1200px){.w1600{width: 90%;}} .banner img{width: 100%; display: block; line-height: 0; font-size: 0; transition: all .5s;} .cont img{width: 100%; display: block; line-height: 0; font-size: 0; transition: all .5s;} .banner { position: relative; width: 100%; } .banner .txt_box { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; } .banner .txt_box .txt { color: #fff; font-family: 'Poppins-SemiBold'; } .banner img{width:100%;display: block; line-height: 0; font-size: 0;} .mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #d9d9d9 !important; } .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #d9d9d9; } .cont svg { margin: 0!important; } .cont .tab { width: 100%; display: flex; justify-content: space-between; align-items: center; } .cont .tab a { display: inline-block; width: 33.33%; width:auto; position:relative; z-index:1; font-family: 'Poppins-Medium'; color: #aaa; border-bottom: 2px solid #ebebeb; padding: 20px 0; text-align: center; transition: all 0.3s; white-space: nowrap; } .cont .tab{ position:relative; } .cont .tab:after{ content:''; position:absolute; bottom:0; height:2px; width:100%; background:#ebebeb; z-index:0; } .cont .tab a.on { font-family: 'Poppins-SemiBold'; color: #0e3778; border-bottom: 2px solid #0e3778; } .cont .tab a:hover { color: #0e3778; } .cont .tit { color: #000; font-family: 'Poppins-SemiBold'; text-align: center; font-weight: bold; } .cont .page1 { position: relative; z-index: 2; background-color: #fff; } .cont .page1 .subtit { text-align: center; font-family: 'Poppins-SemiBold'; color: #333; } .cont .page1 .subtit2 { text-align: center; font-family: 'Poppins-Regular'; color: #333; } .cont .page1 .ct_box { display: flex; } .cont .page1 .ct_box .item_l { width: 50%; padding-right: 15px; } .cont .page1 .ct_box .item_l .txt-scroll { width: 100%; } .cont .page1 .ct_box .item_l .txt_t { font-family: 'Poppins-Medium'; color: #000; } .cont .page1 .ct_box .item_l ul { margin-top: 5%; } .cont .page1 .ct_box .item_l ul li { font-family: 'Poppins-Regular'; display: flex; justify-content: flex-start; align-items: flex-start; margin-bottom: 3%; color: #333; } .cont .page1 .ct_box .item_l ul li span { display: block; white-space: nowrap; margin-right: 5px; } .cont .page1 .ct_box .item_r { width: 50%; } .cont .page1 .ct_box .item_r .img { position: relative; padding-top: 68%; overflow: hidden; } .cont .page1 .ct_box .item_r .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.5s; } .cont .page1 .ct_box .item_r .img:hover img { transform: translate(-50%, -50%) scale(1.05); } .cont .page2 { background: url(https://omo-oss-image.thefastimg.com/portal-saas/ngc202304200031/cms/image/6491afd0-3613-4d4a-881f-2289a1d51c35.png?d=1687944467533) repeat-x top center; } .cont .page2 .pic_bg { position: relative; overflow: hidden; } .cont .page2 .pic_bg img { transition: all 0.5s; } .cont .page2 .pic_bg .txt { position: absolute; bottom: 6%; left: 10%; width: 80%; z-index: 2; color: #fff; } .cont .page2 .pic_bg .txt .tit_t { font-family: 'Poppins-SemiBold'; text-align: center; } .cont .page2 .pic_bg .txt .des { font-family: 'Poppins-Regular'; text-align: center; margin-top: 1%; height: 6em; } .cont .page2 .pic_bg:hover img { transform: scale(1.05); } .cont .page2 .subtit { font-family: 'Poppins-SemiBold'; color: #333; text-align: center; } .cont .page2 .sw1 { padding-bottom: 50px; } .cont .page2 .sw1 .swiper-pagination { bottom: 0; } .cont .page2 .sw1 .img { position: relative; overflow: hidden; padding-top: 51%; } .cont .page2 .sw1 .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.5s; } .cont .page2 .sw1 .txt { margin-top: 3%; font-family: 'Poppins-Regular'; color: #333; height: 6em; } .cont .page2 .sw1 .swiper-pagination-bullet-active { background: #0e3778; } .cont .page2 .sw1 .swiper-pagination-bullet { width: 12px; height: 12px; } .cont .page2 .sw1 .swiper-slide:hover img { transform: translate(-50%, -50%) scale(1.05); } .pp { animation: p2fd 0.4s linear 0.1s 1 forwards; transform: scale(0); } .pp { animation: hand2 1s linear 0s infinite; transform: scale(0); } @keyframes p2fd { 0% { transform: scale(0.1); } 60% { transform: scale(1.3); } 75% { transform: scale(1); } 85% { transform: scale(1.1); } 100% { transform: scale(1); } } /* 125% */ /* 150 */ @media screen and (max-width: 998px) { /* .cont .tab{ flex-wrap: wrap; a{ width: 100%; padding: 15px 0; border-bottom: 1px solid #ebebeb; &.on{ border-bottom: 1px solid #0e3778; } } } */ .cont .page1 .ct_box { flex-wrap: wrap; } .cont .page1 .ct_box .item_l { width: 100%; order: 3; margin-top: 4%; } .cont .page1 .ct_box .item_r { width: 100%; } .cont .page2 .pic_bg img { width: 150%; margin-left: -25%; } .cont .page2 .sw1 .txt { height: auto; } .cont .tab { overflow: overlay; } .cont .tab a { width: auto; padding: 20px 20px; flex-shrink: 0; } .banner{margin-top:60px} } @media screen and (max-width: 768px) { .cont .page2 .pic_bg .txt .des { font-size: 12px; } }