html, body { position: relative; height: 100%; } body { background: #fff; font-size: 14px; color: #000; margin: 0; padding: 0; } a { text-decoration: none; } .under-line { position: absolute; bottom: 14%; z-index: 3; cursor: pointer; } .mobile { display: none; } .swiper-container-h { width: 100%; height: 100vh; margin-left: auto; margin-right: auto; } .no-select { -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10*/ -khtml-user-select:none;/*早期浏览器*/ user-select:none; } .swiper-container-v { width: 100%; height: 100%; background: #000; } .swiper-slide-h { font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; overflow: hidden; } .video-tvc { object-fit: cover; width: 100%; height: 100%; } .video-bg { width: 100%; height: 100%; background: url('../images/index/video-bg.png') no-repeat; background-size: cover; } .content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; background: rgba(0, 0, 0, .3); } .swiper-slide-v { font-size: 18px; color:#fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 60px; } .parallax-bg { position: absolute; left: 0; top: 0; width: 130%; height: 100%; -webkit-background-size: cover; background-size: cover; background-position: center; background-color: #000; } .first-title { width:100%; text-align:center; height:100%; margin-top: 168px; } .ims-ims { font-size: 50px; font-weight: normal; font-stretch: normal; letter-spacing: 4px; color: #ffffff; margin-bottom: 40px; } .b-2-b-b-2-b-2-c { font-size: 100px; font-weight: normal; font-stretch: normal; letter-spacing: 2px; color: #ffffff; margin: 0 auto; } .ja .b-2-b-b-2-b-2-c { font-size: 50px; } .en .b-2-b-b-2-b-2-c { font-size: 60px; } .g_600556 { height: 32px; font-size: 34px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 0px; color: #ffffff; margin: 0 auto; margin-top: 53px; } .page1 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .weiq-bg { width: 100%; height: 100%; position: relative; text-align: center; } .swiper-slide-h-2 { background: url('../images/index/weiq-bg.png') no-repeat; background-size: cover; height: 100%; width: 100%; position: absolute; } .weiq-bg-animation { animation: slowScale 6s forwards; -webkit-animation: slowScale 6s forwards; } @keyframes slowScale { 0% {transform: scale(1);} 100% {transform: scale(1.2);} } .weiq-logo { margin: 2% auto 0 auto; } .weiq-title { font-size: 40px; font-weight: normal; font-stretch: normal; letter-spacing: 3px; color: #ffffff; margin: 2% auto 0 auto; } .ja .weiq-title, .en .weiq-title { font-size: 24px; } .weiq-subtitle { width: 953px; line-height: 36px; font-size: 18px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #ffffff; opacity: 0.8; margin: 4% auto 0 auto; text-align: center; } .ja .weiq-subtitle, .en .weiq-subtitle { font-size: 14px; } .ja .weiq-unit, .en .weiq-unit { font-size: 20px; } .ja .weiq-des, .en .weiq-des { font-size: 14px; } .weiq-num-main { margin: 72px 12px 0 12px; overflow: hidden; display: flex; justify-content: center; } .weiq-num-father{ flex: 1; height: 180px; display: flex; justify-content: center; } .weiq-num-father .weiq-num-child { position: relative; } .weiq-num { font-size: 120px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #f08200; } .weiq-unit { width: 39px; height: 36px; font-size: 40px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 0px; color: #ffffff; } .weiq-icon { position: absolute; right: -30px; top: 9px; font-size: 40px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #ffffff; } .weiq-des { position: absolute; bottom: 0; font-size: 18px; font-weight: normal; font-stretch: normal; letter-spacing: 2px; color: #ffffff; opacity: 0.8; text-align: center; } .swiper-slide-h-3 { width: 100%; height: 100%; background-color: #f08200; position: absolute; background: url('../images/index/smart-bg.png') no-repeat; background-size: cover; } .swiper-slide-h-3-black { width: 50%; height: 100%; background: url('../images/index/black.png') no-repeat; background-size: cover; position: absolute; right: 0; } #canvas { position: absolute; width: 50%; height: 100%; right: 0; z-index: 2; } .video { position: absolute; object-fit: revert; left: 49%; top: 32%; z-index: 2; cursor: pointer; width: 640px; height: 360px; } .video video { width: 100%; height: 100%; } .play-icon-main { position: absolute; left: 50%; top: 50%; z-index: 2; cursor: pointer; transform: translate(-50%,-50%); } .orange-bg { width: 370px; height: 570px; background-color: #f08200; opacity: 0.5; position: absolute; left: 69%; top: 18%; } .play-icon-main img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; z-index: 3; } .smart-logo { margin-top: 10%; margin-left: 14%; position: relative; } .smart-title { width: 482px; font-size: 40px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #ffffff; margin-top: 4%; line-height: 58px; margin-left: 14%; position: relative; } .ja .smart-title, .en .smart-title { font-size: 24px; } .smart-subtitle { width: 454px; font-size: 18px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #ffffff; opacity: 0.8; margin-top: 4%; margin-left: 14%; line-height: 30px; position: relative; } .ja .smart-subtitle, .en .smart-subtitle { font-size: 14px; } .swiper-slide-h-4 { background: url('../images/index/klout.png') no-repeat; background-size: cover; width: 100%; height: 100%; position: absolute; } .swiper-slide-h-4-main { overflow: hidden; width: 1320px; height: 100%; margin: 0 auto; margin-top: 10%; } .weiq-num-main-page4 { width: 700px; float: left; } .weiq-num-father-page4:nth-child(1) { position: relative; width: 200px; height: 160px; display: inline-block; margin-bottom: 19%; } .weiq-num-father-page4:nth-child(1) .weiq-num-child-page4 { padding-left: 16px; } .weiq-num-father-page4:nth-child(2) { position: relative; width: 300px; height: 160px; display: inline-block; margin-left: 25%; } .weiq-num-father-page4:nth-child(3) { position: relative; width: 240px; height: 160px; display: inline-block; } .weiq-num-father-page4:nth-child(4) { position: relative; width: 300px; height: 160px; display: inline-block; margin-left: 19%; } .weiq-des-klout { position: absolute; bottom: 0; font-size: 18px; font-weight: normal; font-stretch: normal; letter-spacing: 2px; color: #ffffff; opacity: 0.8; text-align: center; width: 200px; } .ja .weiq-des-klout, .en .weiq-des-klout { width: 290px; font-size: 14px; line-height: 1; letter-spacing: normal; } .weiq-content-main-page4 { float: right; width: 600px; position: relative; margin-top: 4%; } .klout { font-size: 40px; font-weight: normal; font-stretch: normal; line-height: 26px; letter-spacing: 0px; color: #ffffff; margin-top: 6%; } .klout-title { font-size: 40px; font-weight: normal; font-stretch: normal; line-height: 26px; letter-spacing: 0px; color: #ffffff; margin-top: 6%; } .ja .klout-title, .en .klout-title { font-size: 24px; line-height: 1; } .klout-subtitle { font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 0px; color: #ffffff; opacity: 0.8; margin-top: 6%; } .ja .klout-subtitle, .en .klout-subtitle { font-size: 14px; padding-right: 60px; } .klout-botton { width: 200px; height: 50px; color: #fff; border-radius: 25px; border: solid 2px #f08200; font-size: 16px; font-weight: normal; font-stretch: normal; letter-spacing: 2px; color: #f08200; text-align: center; line-height: 50px; margin-top: 10%; cursor: pointer; } .weiq-botton { margin: 2% auto 0 auto } .swiper-slide-h-5 { background: url('../images/index/imsocial-bg.png') no-repeat; background-size: cover; position: absolute; width: 100%; height: 100%; } .ims-num-father { position: relative; width: 264px; height: 160px; display: inline-block; margin-right: 12%; margin-left: 8%; } .box{ display: inline-block; width: 100%; height: 100%; } .box ul{ overflow: hidden; width: 1012px; height: auto; margin-bottom: -10px; margin-top: 2%; background: none; } .box li{ list-style: none; float: left; width: 280px;/*可以用百分比*/ height: 230px;/*可以用百分比*/ position: relative; margin: 10px; } .box li > div{ text-align: center; height: 230px; position: relative; } .box li:nth-child(3n+1) { width: 400px; margin-left: 0; } .front-text { font-size: 18px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #ffffff; margin-top: 22px; } .more { width: 61px; height: 18px; font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 45px; letter-spacing: 2px; color: #e48013; margin-right: 40px; position: relative; } .mask-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f08200; opacity: 0; padding: 40px 30px; color: #fff; line-height: 40px; cursor: pointer; } .mask-item:hover { /* opacity: 1; */ } .more:after { content: ''; width: 21px; height: 16px; background: url(../images/index/arrowright.png) no-repeat; position: absolute; right: -24px; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .honor-title { font-stretch: normal; line-height: 58px; font-size: 50px; font-weight: normal; letter-spacing: 0px; color: #2c3035; display: inline-block; } .honor-rectangle { width: 40px; height: 5px; background-color: #e48013; border-radius: 3px; margin-top: 30px; margin-bottom: 34px; } .honor-en { font-size: 22px; font-weight: normal; font-stretch: normal; line-height: 32px; letter-spacing: 0px; color: #5f6366; margin-bottom: 39px; display: inline-block; } .honor-subtitle { font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 1px; color: #000000; margin-bottom: 28px; width: 367px; } .honor-affect { font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 1px; color: #000000; opacity: 0.8; display: inline-block; } .swiper-slide-h-7 { background: url('../images/index/bg7.png') no-repeat; background-size: cover; position: absolute; width: 100%; height: 100%; } .index_brand_list { width: 1302px; height: 368px; /* border: 1px solid black; */ margin: 0 auto; position: relative; overflow: hidden; } .index_brand_list::before { width: 160px; height: 368px; background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0)); left: 0; content: " "; position: absolute; top: 0; z-index: 1; } .index_brand_list::after { width: 160px; background: linear-gradient(270deg, #ffffff, rgba(255, 255, 255, 0)); height: 368px; right: 0; content: " "; position: absolute; top: 0; } .index_brand_row1 { /* width: 100%; */ height: 110px; /* overflow-x: scroll; */ position: relative; overflow: hidden; } .index_brand_row2 { height: 110px; /* overflow-x: scroll; */ position: relative; top: 18px; left: 80px; /* overflow: hidden; */ } .index_brand_row3 { height: 110px; /* overflow-x: scroll; */ position: relative; top: 36px; overflow: hidden; } .index_brand_list .index_brand_row1 img { width: 2198px; height: 110px; display: inline-block; } .index_brand_list .index_brand_row2 img { width: 2198px; height: 110px; display: inline-block; } .index_brand_list .index_brand_row3 img { width: 2198px; height: 110px; display: inline-block; } @keyframes moveleft { 0% { transform: translateX(0); } 100% { transform: translateX(-2232px); } } .img1 { position: absolute; left: 0; transform: translate(0, 0); animation: moveleft 60s linear infinite; } .img2 { position: absolute; left: 2234px; top: 0; transform: translate(0, 0); animation: moveleft 60s linear infinite; } .introduction-title { font-size: 50px; font-weight: normal; font-stretch: normal; line-height: 58px; letter-spacing: 0px; color: #2c3035; margin-top: 4%; } .introduction-rectangle { width: 40px; height: 5px; display: inline-block; background-color: #e48013; margin-top:30px; margin-bottom: 34px; } .introduction-en { font-size: 22px; font-weight: normal; font-stretch: normal; line-height: 32px; letter-spacing: 0px; color: #5f6366; margin-bottom: 27px; } .introduction-subtitle { width: 1022px; font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 1px; color: #000000; display: inline-block; margin-bottom: 64px; } .btn-list { display: inline-block; width: 520px; margin-top: 4%; } .btn-style { height: 36px; background-color: #e48013; border-radius: 8px; color: #fff; display: inline-block; line-height: 36px; font-size: 14px; margin: 0 10px 14px 0; width: 100px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .footer { height: auto; } .right-honor { float: right; width: 520px; margin-right: 1%; } .more-honor { display: inline-block; width: 100px; height: 36px; text-align: center; line-height: 36px; vertical-align: top; } .more-honor span { display: inline-block; vertical-align: middle; width: 4px; height: 4px; background: #e48013; border-radius: 50%; margin-right: 8px;; } .swiper-slide-h-8 { background: url('../images/index/relang-bg.png') no-repeat; background-size: cover; height: 100%; width: 100%; position: absolute; } .relang-bg { width: 100%; height: 100%; position: relative; } .relang-logo { text-align: center; margin-top: 2%; } .relang-right-block { margin: 0 auto; width: 1000px; text-align: center; margin-top: 2%; } .relang-title { font-size: 40px; line-height: 60px; color: #ffffff; } .ja .relang-title, .en .relang-title { font-size: 24px; } .ja .weiq-num, .en .weiq-num { font-size: 60px; } .ja .weiq-num-father, .en .weiq-num-father { height: 130px; } .relang-des { font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 0px; color: #ffffff; opacity: 0.8; margin-top: 30px; } .ja .relang-des, .en .relang-des { font-size: 14px; } .relang-btn { width: 200px; height: 50px; border-radius: 25px; border: solid 2px #f08200; margin-top: 30px; display: inline-block; font-size: 16px; color: #f08200; line-height: 50px; text-align: center; } .relang-main { text-align: center; } .bottom-box { text-align: center; position: relative; top: 73%; } .swiper-slide-h-9 { background: url('../images/index/ired-bg.png') no-repeat; background-size: cover; height: 100%; width: 100%; position: absolute; } .ired-bg { width: 100%; height: 100%; position: relative; } .ired-logo { width: 247px; margin: 8% auto 0 auto; } .ired-title { font-size: 40px; font-weight: bold; font-stretch: normal; line-height: 60px; letter-spacing: 3px; color: #ffffff; margin: 2% auto 0 auto; text-align: center; } .ja .ired-title, .en .ired-title { font-size: 24px; } .ired-subtitle { width: 1144px; height: 78px; font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 26px; letter-spacing: 0px; color: rgba(255, 255, 255, .8); text-align: center; margin: 2% auto 0 auto; } .ja .ired-subtitle, .en .ired-subtitle { font-size: 14px; height: auto; } .ired-btn { width: 200px; height: 50px; border-radius: 25px; border: solid 2px #f08200; font-size: 16px; font-weight: normal; font-stretch: normal; letter-spacing: 2px; color: #f08200; line-height: 50px; text-align: center; cursor: pointer; margin: 2% auto 0 auto; display: block; } .ired { width: 90px; display: inline-block; } .ja .ired, .en .ired { width: 200px; text-align: center; } .ired .sub-des { margin-top: 50px; text-align: center; height: 18px; font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 18px; letter-spacing: 2px; color: rgba(255, 255, 255, .8); } .ired-bottom-box { position: absolute; display: flex; justify-content: space-around; top: 50%; left: 0; right: 0; } .swiper-slide-h-10 { background: url('../images/index/xiwujie-bg.png') no-repeat; background-size: cover; height: 100%; width: 100%; position: absolute; } .xiwujie-bg { width: 100%; height: 100%; position: relative; } .xiwujie-logo { position: absolute; top: 23%; left: 20%; } .xiwujie-title { width: 449px; height: 100px; font-size: 40px; font-weight: normal; font-stretch: normal; line-height: 50px; letter-spacing: 3px; color: #ffffff; position: absolute; top: 37%; left: 20%; } .ja .xiwujie-title, .en .xiwujie-title { font-size: 24px; } .xiwujie-subtitle { width: 476px; height: 169px; font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 0px; color: rgba(255, 255, 255, .8); position: absolute; top: 52%; left: 20%; } .ja .xiwujie-subtitle, .en .xiwujie-subtitle { font-size: 14px; } .ja .xiwujie .sub-des, .en .xiwujie .sub-des { font-size: 14px; } .xiwujie { width: 244px; height: 127px; position: absolute; } .xiwujie .num { width: 209px; height: 81px; font-size: 91px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #f08200; position: absolute; left: 0; top: 0; } .xiwujie .sub-des { text-align: center; position: absolute; width: 100%; bottom: 0; height: 18px; font-size: 18px; font-weight: normal; font-stretch: normal; letter-spacing: 2px; color: rgba(255, 255, 255, .8); } .xiwujie .unit { font-size: 40px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #ffffff; position: absolute; top: 41px; right: 41px; } .xiwujie .num-after { font-size: 40px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #ffffff; top: 9px; right: 0; text-align: right; } .xiwujie-icon1.xiwujie .unit { right: 0; } .xiwujie-icon1.xiwujie { width: 266px; height: 129px; top: 26%; left: 50%; } .xiwujie-icon2.xiwujie { width: 244px; height: 129px; top: 26%; left: 67%; } .xiwujie-icon3.xiwujie { top: 57%; left: 50%; } .xiwujie-icon4.xiwujie { top: 57%; left: 67%; } .swiper-slide-h-11 { background: url('../images/index/honnverse.png') no-repeat; background-size: cover; height: 100%; width: 100%; position: absolute; } .honnverse-bg { width: 100%; height: 100%; position: relative; } .honnverse-logo { width: 158px; margin: 8% auto 0 auto; } .honnverse-title { width: 774px; font-size: 40px; font-weight: bold; font-stretch: normal; line-height: 60px; letter-spacing: 3px; color: #ffffff; margin: 2% auto 0 auto; } .ja .honnverse-title, .en .honnverse-title { font-size: 24px; margin: 0; text-align: center; width: 100%; } .honnverse-subtitle { width: 1170px; height: 78px; font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 26px; letter-spacing: 0px; color: rgba(255, 255, 255, .8); text-align: center; margin: 2% auto 0 auto; } .ja .honnverse-subtitle, .en .honnverse-subtitle { font-size: 14px; } .honnverse-btn { width: 200px; height: 50px; border-radius: 25px; border: solid 2px #f08200; font-size: 16px; font-weight: normal; font-stretch: normal; letter-spacing: 2px; color: #f08200; line-height: 50px; text-align: center; cursor: pointer; margin: 2% auto 0 auto; display: block; } .honnverse { width: 200px; display: inline-block; } .honnverse img { float: left; } .honnverse .sub-des { float: right; text-align: center; height: 18px; font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 24px; letter-spacing: 2px; color: rgba(255, 255, 255, .8); width: 80px; margin-top: 16px; } .ja .honnverse .sub-des, .en .honnverse .sub-des { width: 100px; font-size: 14px; } .honnverse-icon4.honnverse .sub-des { width: 100px; } .honnverse-bottom-box { display: flex; justify-content: space-around; margin-top: 4%; } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { width: 5px; height: 5px; background-color: #a2a4a8; } .swiper-pagination-bullet-active { border: solid 2px #e48013 !important; background-color: transparent !important; } @media screen and (max-width: 1680px){ .bottom-box { top: 76%; } .relang-right-block { /* top: 16%; */ } .xiwujie-icon2.xiwujie { left: 78%; } .xiwujie-icon4.xiwujie { left: 78%; } } @media screen and (max-width: 1550px){ .box ul { width: 833px; } .box li:nth-child(3n+1) { width: 260px; } .box li { width: 260px; } .weiq-content-main-page4 { width: 592px; } .xiwujie-icon1.xiwujie { left: 54%; } .xiwujie-icon3.xiwujie { left: 54%; } } @media screen and (max-width: 1366px) { .weiq-logo { margin-top: 5%; } .video { width: 500px; left: 54%; } .box ul { width: 820px; } .box li { width: 245px; } .box li:nth-child(3n+1) { width: 275px; } .introduction-title { margin-top: 2%; } .introduction-rectangle { margin-top: 15px; margin-bottom: 17px; } .introduction-en { margin-bottom: 12px; } .introduction-subtitle { margin-bottom: 32px; } .xiwujie-logo { left: 10%; } .xiwujie-title { left: 10%; } .xiwujie-subtitle { left: 10%; } } @media screen and (max-width: 1280px) { .box ul { width: 747px; } .box li { width: 230px; } .box li:nth-child(3n+1) { width: 235px; } } @media screen and (max-width: 1024px){ body { min-width: 0; width: 100%; } .ims-ims { font-size: 16px; } .b-2-b-b-2-b-2-c { font-size: 32px; } .g_600556 { font-size: 16px; } .weiq-title { font-size: 20px; } .weiq-subtitle { width: 80%; } .orange-bg { display: none; } .play-icon-main { display: none; } .video { display: none; } .swiper-slide-h-4-main { margin-top: 0; width: 100%; } .weiq-num-main-page4 { float: none; margin: 0 auto; margin-top: 2%; } .weiq-num-father-page4:nth-child(1){ margin-bottom: 0; } .weiq-content-main-page4 { width: 100%; text-align: center; margin-top: 4%; } .klout-botton { margin: 0 auto; margin-top: 5%; } .box ul { display: none; } .honor-affect { display: block; } .right-honor { text-align: center; float: none; width: 100%; } .btn-list { width: 100%; } .honor-rectangle { width: 40px; height: 5px; background-color: #e48013; border-radius: 3px; margin: 0 auto; margin-top: 30px; margin-bottom: 34px; } .honor-subtitle { width: 100%; } .introduction-subtitle { width: 90%; } .klout-subtitle { width: 90%; height: auto; font-size: 16px; margin-top: 3%; margin: 3% auto; } .smart-title { width: 50%; font-size: 24px; line-height: 40px; } .smart-subtitle { width: 50%; font-size: 16px; } .weiq-num { font-size: 30px; } .weiq-icon { font-size: 20px; } .weiq-unit { font-size: 20px; } .weiq-des-klout { font-size: 16px; bottom: 50%; } .weiq-des { bottom: 50%; font-size: 14px; } .klout-title { height: auto; font-size: 20px; } } @media screen and (max-width: 812px) { .weiq-num-main { display: none; } .weiq-title { margin-top: 5%; } .weiq-subtitle { margin-top: 5%; } .smart-subtitle { width: 90%; text-align: center; margin: 0 auto; margin-top: 5%; } .smart-title { font-size: 20px; width: 90%; text-align: center; margin: 0 auto; margin-top: 5%; } .smart-logo { margin-top: 10%; margin-left: 14%; position: relative; width: 220px; margin: 10% auto; } .weiq-num-main-page4 { display: none; } .weiq-content-main-page4 > div:nth-child(1) img { width: 200px; } .honor-subtitle { width: 90%; margin: 12px auto; } .btn-list { width: auto; } .honor-rectangle{ margin: 12px auto; } .honor-en { margin: 0; } .introduction-rectangle { margin: 12px auto; } .introduction-en { margin: 0; } .introduction-subtitle { margin: 12px auto; } .xiwujie { display: none; } .xiwujie-logo { top: 8%; left: 30%; } .xiwujie-title { width: auto; top: 22%; } .xiwujie-subtitle { width: auto; left: 0; right: 0; top: 40%; } .ired-title { width: auto; text-align: center; } .ired-subtitle { width: auto; height: auto; } .ired-bottom-box { display: none; } .honnverse-bottom-box { display: none; } .bottom-box { display: none; } .relang-right-block { } .relang-title { width: auto; height: auto; line-height: 40px; font-size: 24px; } .relang-des { width: auto; height: auto; } .relang-btn { margin: 51px auto 0 auto; display: block; } } @media screen and (max-width: 500px) { .weiq-logo img{ width: 100px; height: 50px; } .weiq-title { font-size: 16px; margin-top: 10px; } .weiq-subtitle { font-size: 12px; line-height: 24px; margin-top: 10px; } .klout-botton { width: 160px; height: 36px; font-size: 12px; line-height: 36px; margin-top: 10px; } .weiq-num-main { display: flex; width: 100%; margin: 0; margin-top: 20px; flex-wrap: wrap; } .weiq-des { font-size: 12px; bottom: 30%; text-align: center !important; } .weiq-num-father { width: 50%; position: relative; height: 100px; flex: none; } .weiq-logo { margin-top: 16px; } .relang-logo img{ width: 100px; height: 30px; } .relang-right-block { width: 100%; } .relang-title { font-size: 16px; text-align: center; line-height: 24px; padding: 12px 24px; } .relang-des { font-size: 12px; margin-top: 16px; padding: 0 24px; } .relang-btn { width: 160px; height: 36px; font-size: 12px; line-height: 36px; margin-top: 10px; } .smart-title { font-size: 16px; } .smart-subtitle { font-size: 12px; line-height: 24px; } .klout-title { font-size: 16px; margin-top: 10px; } .klout-subtitle { font-size: 12px; margin-top: 10px; line-height: 24px; } .weiq-num-main-page4.mobile { display: block; width: 100%; margin-top: 20px; float: left; } .weiq-num-father-page4 { width: 120px !important; height: 80px !important; } .weiq-des-klout { width: 120px; text-align: center; font-size: 12px; } .weiq-des-klout { bottom: 30%; } .weiq-num-father-page4:nth-child(1) { margin-left: 5%; } .weiq-num-father-page4:nth-child(2) { margin-left: 20%; } .weiq-num-father-page4:nth-child(3) { margin-left: 5%; } .weiq-num-father-page4:nth-child(4) { margin-left: 20%; } .weiq-num-father-page4:nth-child(3) .weiq-num-child-page4 { padding-left: 16px; } .ims-num-father { width: 120px; height: 80px; margin-left: 0; } .ired-logo img{ width: 80px; height: 40px; } .ired-logo { width: 80px; } .smart-logo img{ width: 100px; height: 50px; } .smart-logo { width: 100px; } .ired-title { font-size: 16px; } .ired-subtitle { font-size: 12px; line-height: 24px; width: 90%; } .ired-btn { width: 160px; height: 36px; font-size: 12px; line-height: 36px; margin-top: 10px; } .xiwujie-logo img{ width: 80px; height: 50px; } .xiwujie-logo { width: 80px; top: 4%; left: 40%; } .xiwujie-title { width: 100%; font-size: 16px; left: 0; top: 14%; text-align: center; height: auto; } .xiwujie-subtitle { font-size: 12px; line-height: 24px; width: 100%; top: 22%; padding: 0 16px; } .honor-affect { display: none; } .btn-list { display: none; } .nine-layout .mobile { display: block; } .nine-layout { display: flex; width: 100%; flex-wrap: wrap; } .nine-layout div { width: calc(calc(100% / 3) - 10px); margin: 5px; } .honnverse-logo img{ width: 40px; height: 40px; } .honnverse-logo { width: 40px; } .honnverse-title { font-size: 16px; text-align: center; width: auto; } .honnverse-subtitle { font-size: 12px; line-height: 24px; width: 90%; } .honnverse-btn { width: 160px; height: 36px; font-size: 12px; line-height: 36px; margin-top: 80px; } }