.app-home-news-aside .filmstrip .item .title, .app-home-news-aside .latest .items .item .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .app-home-enter, .app-home-news, .app-home-ngtna, .app-home-partners, .app-home-solution, .app-home-strength { padding-bottom: 60px; padding-top: 60px } @media screen and (max-width:860px) { .app-home-enter, .app-home-news, .app-home-ngtna, .app-home-partners, .app-home-solution, .app-home-strength { padding-bottom: 40px; padding-top: 40px } } .app-home-items .wrap .item .inner { background: linear-gradient(180deg, hsla(0, 100%, 97%, .48), #fff); border: 2px solid #fff; border-radius: 4px; box-shadow: -8px -8px 10px rgba(255, 255, 255, .23), 8px 8px 10px rgba(198, 45, 45, .05) } .app-home-news { padding-top: 0 } .app-home-news-wrap { align-items: stretch; display: flex; flex-wrap: wrap; margin: -10px } @media screen and (max-width:580px) { .app-home-news-wrap { margin: -5px } } .app-home-news-wrap>div { flex: 0 0 auto; padding: 10px; width: 50% } @media screen and (max-width:1080px) { .app-home-news-wrap>div { width: 100% } } @media screen and (max-width:580px) { .app-home-news-wrap>div { padding: 5px } } .app-home-news-aside .row { align-items: stretch; display: flex; height: 100%; margin: 0 -10px } @media screen and (max-width:1080px) { .app-home-news-aside .row { flex-direction: column } } @media screen and (max-width:580px) { .app-home-news-aside .row { margin: 0 -5px } } .app-home-news-aside .row .col { flex: 0 0 auto; height: 100%; padding: 0 10px } .app-home-news-aside .row .col:first-child { width: 35% } .app-home-news-aside .row .col:last-child { width: 65% } @media screen and (max-width:1080px) { .app-home-news-aside .row .col { height: auto; width: 100% !important } } @media screen and (max-width:580px) { .app-home-news-aside .row .col { padding: 0 5px } } .app-home-news-aside .filmstrip { align-items: stretch; display: flex; flex-direction: column; height: 100% } @media screen and (max-width:1080px) { .app-home-news-aside .filmstrip { flex-direction: row; height: auto; margin-left: -10px; margin-right: -10px; width: auto } } @media screen and (max-width:580px) { .app-home-news-aside .filmstrip { margin-left: -5px; margin-right: -5px } } .app-home-news-aside .filmstrip .item { color: #666; display: block } @media screen and (max-width:1080px) { .app-home-news-aside .filmstrip .item { margin: 0 10px; width: calc(50% - 20px) } } @media screen and (max-width:580px) { .app-home-news-aside .filmstrip .item { margin: 0 5px; width: calc(50% - 10px) } } .app-home-news-aside .filmstrip .item .image { background-position: 50%; background-repeat: no-repeat; background-size: cover; border-radius: 4px; display: block; padding-bottom: 58%; width: 100% } .app-home-news-aside .filmstrip .item .title { display: block; font-size: 16px; font-weight: 500; margin-top: .5em } @media screen and (max-width:1600px) { .app-home-news-aside .filmstrip .item .title { font-size: 14px } } .app-home-news-aside .filmstrip .item .time { display: block; font-size: 12px; font-weight: 300; margin-top: .25em } .app-home-news-aside .filmstrip .item:hover { color: #df242a } .app-home-news-aside .filmstrip .item .item { margin-top: 20px } @media screen and (max-width:1600px) { .app-home-news-aside .filmstrip .item .item { margin-top: 10px } } @media screen and (max-width:1080px) { .app-home-news-aside .filmstrip .item .item { margin-top: 0 } } .app-home-news-aside .latest { align-items: stretch; display: flex; flex-direction: column; height: 100%; justify-content: space-between } @media screen and (max-width:1080px) { .app-home-news-aside .latest { border-top: 1px solid rgba(153, 153, 153, .25); height: auto; margin-top: 20px } } @media screen and (max-width:860px) { .app-home-news-aside .latest { margin-top: 40px } } @media screen and (max-width:580px) { .app-home-news-aside .latest { margin-top: 30px } } .app-home-news-aside .latest .items .item { border-bottom: 1px solid rgba(153, 153, 153, .25); color: #666; display: block; font-size: 12px; padding: 1em 0 } @media screen and (max-width:1600px) { .app-home-news-aside .latest .items .item { padding: .5em 0 } } .app-home-news-aside .latest .items .item .title { display: block; font-size: 14px; font-weight: 500 } .app-home-news-aside .latest .items .item .time { color: #999; display: block; margin-top: .3em; transition: color .3s ease } .app-home-news-aside .latest .items .item:hover { color: #df242a } .app-home-news-aside .latest .items .item:hover .time { color: currentcolor } .app-home-news-aside .latest .more { font-size: 14px; margin-top: 1em; text-align: right } @media screen and (max-width:1600px) { .app-home-news-aside .latest .more { font-size: 12px } } .app-home-partners-wrap { align-items: stretch; display: flex; flex-wrap: wrap; margin: -10px } @media screen and (max-width:580px) { .app-home-partners-wrap { margin: -5px } } .app-home-partners-wrap .app-home-partners-wrap, .app-home-partners-wrap [data-moup-carousel] { margin-top: 40px } @media screen and (max-width:580px) { .app-home-partners-wrap .app-home-partners-wrap, .app-home-partners-wrap [data-moup-carousel] { margin-top: 30px } } .app-home-partners-column { flex: 1 1 auto; padding: 10px; width: 33.33% } @media screen and (max-width:1000px) { .app-home-partners-column { width: 100% } } @media screen and (max-width:580px) { .app-home-partners-column { padding: 5px } } .app-home-partners-column .item { align-items: center; background: no-repeat 15px 15px/25px 19px; border-radius: 4px; box-shadow: 0 2px 17px rgba(0, 0, 0, .08); display: flex; height: 100%; overflow: hidden; padding: 40px 30px; position: relative; transition: box-shadow .3s ease } @media screen and (max-width:1000px) { .app-home-partners-column .item { padding: 35px 25px } } .app-home-partners-column .item:after { background: no-repeat 100% 100%/auto 80%; bottom: 0; content: ""; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: opacity .3s ease; z-index: 0 } .app-home-partners-column .item:hover { box-shadow: 0 14px 17px rgba(0, 0, 0, .08) } .app-home-partners-column .item:hover:after { opacity: .16 } .app-home-partners-column .item .logo { flex: 0 0 auto; font-size: 0; height: auto; position: relative; width: 223.3333333333px; z-index: 1 } @media screen and (max-width:1600px) { .app-home-partners-column .item .logo { width: 180px } } @media screen and (max-width:1200px) { .app-home-partners-column .item .logo { width: calc(15.66667vw - 16.66667px) } } @media screen and (max-width:1000px) { .app-home-partners-column .item .logo { width: calc(23.5vw - 15px) } } @media screen and (max-width:680px) { .app-home-partners-column .item .logo { width: calc(31.33333vw - 13.33333px) } } @media screen and (max-width:580px) { .app-home-partners-column .item .logo { width: calc(47vw - 10px) } } .app-home-partners-column .item .logo img { height: auto; width: 100% } .app-home-partners-column .item .content { color: #333; font-size: 12px; margin-left: 1.25em; position: relative; z-index: 1 } .app-home-partners-column .item .content .title { font-size: 18px; font-weight: 500; line-height: 1.5; margin-bottom: .6em } @media screen and (max-width:1000px) { .app-home-partners-column .item .content .title { font-size: 16px } } .app-home-partners-column .item .content .intro { font-weight: 300; line-height: 1.5 } .app-home-partners-grid { flex: 0 0 16.66%; padding: 10px } @media screen and (max-width:1000px) { .app-home-partners-grid { flex-basis: 25% } } @media screen and (max-width:680px) { .app-home-partners-grid { flex-basis: 33.33% } } @media screen and (max-width:580px) { .app-home-partners-grid { flex-basis: 50%; padding: 5px } } .app-home-partners-grid .item { align-items: center; border: 1px solid #f1f1f1; border-radius: 4px; box-shadow: 0 3px 26px rgba(0, 0, 0, .08); display: flex; height: 100%; justify-content: center; position: relative } .app-home-partners-grid .item .image { background-position: 50%; background-repeat: no-repeat; background-size: contain; height: 0; padding-bottom: 43.82%; width: 100% } .app-home-partners-grid .item .image:after { border-width: 0 1px 1px 0; bottom: -1px; right: -1px } .app-home-partners-grid .item .image:before { border-width: 0 0 1px 1px; bottom: -1px; left: -1px } .app-home-partners-grid .item:after { border-width: 1px 1px 0 0; right: -1px; top: -1px } .app-home-partners-grid .item:before { border-width: 1px 0 0 1px; left: -1px; top: -1px } .app-home-partners-grid .item .image:after, .app-home-partners-grid .item .image:before, .app-home-partners-grid .item:after, .app-home-partners-grid .item:before { border-color: #df242a; border-style: solid; content: ""; display: block; height: 0; opacity: 0; position: absolute; transition: opacity .3s ease, width .3s ease, height .3s ease; width: 0 } .app-home-partners-grid .item:hover .image:after, .app-home-partners-grid .item:hover .image:before, .app-home-partners-grid .item:hover:after, .app-home-partners-grid .item:hover:before { height: 15px; opacity: 1; width: 15px } .app-home-partners [data-moup-carousel] .carousel-list { overflow: visible } .app-home-partners [data-moup-carousel] .carousel-slide { opacity: 0; transition: opacity .6s ease } .app-home-partners [data-moup-carousel] .carousel-current { opacity: 1 } .app-home-partners [data-moup-carousel] .carousel-dots { align-items: center; display: flex; justify-content: center; margin-top: 10px } .app-home-partners [data-moup-carousel] .carousel-dots li { list-style: none; margin: 0 2px } .app-home-partners [data-moup-carousel] .carousel-dots li button { background-color: #df242a; border: 0; border-radius: 50%; cursor: pointer; font-size: 0; height: 6px; opacity: .5; outline: none; width: 6px } .app-home-partners [data-moup-carousel] .carousel-dots .carousel-active button { opacity: 1 } .app-home-items { position: relative; top: -46px; z-index: 10 } @media screen and (max-width:900px) { .app-home-items { top: -23px } } .app-home-items .wrap { display: flex; flex-wrap: wrap; margin: -10px } @media screen and (max-width:520px) { .app-home-items .wrap { margin: -5px } } .app-home-items .wrap .item { flex: 0 0 auto; padding: 10px; width: 22% } @media screen and (max-width:900px) { .app-home-items .wrap .item { width: 33.33% } } @media screen and (max-width:520px) { .app-home-items .wrap .item { padding: 5px } } .app-home-items .wrap .item .inner { align-items: flex-start; background-color: #fff; color: #000; display: flex; flex-direction: column; height: 92px; justify-content: center; padding: 20px; transition: color .3s ease, box-shadow .3s ease } .app-home-items .wrap .item .inner .title { align-items: center; display: flex; font-size: 20px; line-height: 1 } @media screen and (max-width:1200px) { .app-home-items .wrap .item .inner .title { font-size: 18px } } @media screen and (max-width:1000px) { .app-home-items .wrap .item .inner .title { font-size: 16px } } @media screen and (max-width:560px) { .app-home-items .wrap .item .inner .title { font-size: 14px } } .app-home-items .wrap .item .inner .title img { height: 1.5em; margin-right: .5em; width: auto } @media screen and (max-width:700px) { .app-home-items .wrap .item .inner .title img { height: 2em; margin-bottom: .5em; margin-right: 0 } } .app-home-items .wrap .item .inner .title .icon-3d-wrapper { height: 1.5em; margin-right: .5em; width: 1.5em } @media screen and (max-width:700px) { .app-home-items .wrap .item .inner .title .icon-3d-wrapper { height: 2em; margin-bottom: .5em; margin-right: 0; width: 2em } } .app-home-items .wrap .item .inner .intro { color: #888; font-size: 14px; margin-top: .5em } @media screen and (max-width:1200px) { .app-home-items .wrap .item .inner .intro { font-size: 12px } } .app-home-items .wrap .item .inner:hover { box-shadow: -8px -8px 20px rgba(255, 255, 255, .23), 8px 8px 20px rgba(198, 45, 45, .1); color: #df242a } @media screen and (max-width:560px) { .app-home-items .wrap .item:not(.activity) .inner { align-items: center; justify-content: flex-start } .app-home-items .wrap .item:not(.activity) .inner .title { display: flex; flex-direction: column } .app-home-items .wrap .item:not(.activity) .inner .title img { margin-bottom: .5em; margin-right: 0 } .app-home-items .wrap .item:not(.activity) .inner .intro { display: none } } .app-home-items .wrap .item.activity { width: 34% } @media screen and (max-width:900px) { .app-home-items .wrap .item.activity { width: 100% } } .app-home-items .wrap .item.activity .inner { background: #df242a; border-color: #df242a; box-shadow: -8px -8px 20px rgba(255, 255, 255, .23), 8px 8px 20px rgba(198, 45, 45, .1); color: #fff; transition: box-shadow .6s ease, transform .6s ease } .app-home-items .wrap .item.activity .inner .intro { color: currentcolor; opacity: .5 } .app-home-items .wrap .item.activity .inner:hover { box-shadow: -8px -8px 10px rgba(255, 255, 255, .25), 8px 8px 10px rgba(198, 45, 45, .3) } .app-home-enter .icons { align-items: center !important; background-color: #fff; border-radius: 4px; box-shadow: 0 5px 9px rgba(18, 7, 7, .06); display: flex !important; padding: 30px 10px } .app-home-enter .icons[data-moup-carousel] .carousel-slide { padding: 0 20px } .app-home-enter .icons[data-moup-carousel] .carousel-slide>div>div>a { align-items: center; display: flex !important; flex-direction: column } .app-home-enter .icons[data-moup-carousel] .carousel-slide>div>div>a .icon { align-items: center; display: flex; font-size: 0; height: 100px; justify-content: center; width: 100px } @media screen and (max-width:1200px) { .app-home-enter .icons[data-moup-carousel] .carousel-slide>div>div>a .icon { height: 80px; width: 80px } } .app-home-enter .icons[data-moup-carousel] .carousel-slide>div>div>a .icon img { max-height: 80%; max-width: 80% } .app-home-enter .icons[data-moup-carousel] .carousel-slide>div>div>a .text .title { color: #333; font-size: 18px; height: 1.2em; text-align: center } @media screen and (max-width:1660px) { .app-home-enter .icons[data-moup-carousel] .carousel-slide>div>div>a .text .title { font-size: 16px } html[lang=en] .app-home-enter .icons[data-moup-carousel] .carousel-slide>div>div>a .text .title { height: auto } } .app-home-enter .icons[data-moup-carousel] .carousel-slide>div>div>a .text .intro { color: rgb(92, 91, 91); font-size: 13px; font-weight: 300; line-height: 1.6; margin-top: .75em; text-align: center } .app-home-enter .icons[data-moup-carousel] .carousel-slide>div>div>a:hover .text .title { color: #df242a; font-weight: 500 } .app-home-enter .icons[data-moup-carousel] .carousel-list { flex: 1 1 auto } .app-home-enter .icons[data-moup-carousel] .carousel-arrow { background: no-repeat 50%/100% 100%; border: 0; cursor: pointer; flex: 0 0 auto; font-size: 0; height: 60px; outline: none; width: 40px } .app-home-enter .icons[data-moup-carousel] .carousel-prev { transform: rotate(180deg) } .app-home-ngtna .image-box { font-size: 0; position: relative } .app-home-ngtna .image-box img { height: auto; width: 100% } .app-home-ngtna .image-box svg { fill: #df242a; bottom: 0; left: 0; position: absolute; right: 0; top: 0 } .app-home-ngtna .image-box svg polygon { cursor: pointer; opacity: 0; transition: opacity .3s ease } .app-home-ngtna .image-box svg polygon:hover { opacity: .05 } .app-home-solution { background: linear-gradient(to right bottom, #332828, #2c2222) } .app-home-solution .app-head-main-intro, .app-home-solution .app-head-main-title { color: #fff } .app-home-solution .tabs { align-items: stretch; display: flex; flex-wrap: wrap; margin: -10px } @media screen and (max-width:600px) { .app-home-solution .tabs { margin: -5px } } .app-home-solution .tabs-content, .app-home-solution .tabs-title { flex: 0 0 auto; padding: 10px; width: 33.33% } @media screen and (max-width:1000px) { .app-home-solution .tabs-content, .app-home-solution .tabs-title { width: 100% } } @media screen and (max-width:600px) { .app-home-solution .tabs-content, .app-home-solution .tabs-title { padding: 5px } } @media screen and (max-width:1000px) { .app-home-solution .tabs-title { order: 2 } } .app-home-solution .tabs-title .inner { display: flex; flex-direction: column; height: 100% } .app-home-solution .tabs-title .inner .item { background: linear-gradient(to right bottom, #a51b1e, #cb2525); border-radius: 4px; box-shadow: 13px 12px 18px rgba(12, 6, 6, .43); cursor: pointer; height: 140px; overflow: hidden; position: relative } .app-home-solution .tabs-title .inner .item .text { color: #fff; display: flex; flex-direction: column; height: 100%; justify-content: center; padding: 10%; position: relative; width: 100%; z-index: 1 } @media screen and (max-width:1000px) { .app-home-solution .tabs-title .inner .item .text { padding: 30px } } .app-home-solution .tabs-title .inner .item .text .main .title { font-size: 18px; font-weight: 500; padding-left: 130px } @media screen and (max-width:1200px) { .app-home-solution .tabs-title .inner .item .text .main .title { font-size: 16px; padding-left: 110px } } @media screen and (max-width:1000px) { .app-home-solution .tabs-title .inner .item .text .main .title { font-size: 14px; padding-left: 90px } } .app-home-solution .tabs-title .inner .item .text .main .intro { font-size: 12px; height: 0; opacity: .8; opacity: 0; text-align: justify } .app-home-solution .tabs-title .inner .item .text .more { font-size: 12px; height: 0; opacity: 0 } .app-home-solution .tabs-title .inner .item .text .more a { color: currentcolor; opacity: .8 } .app-home-solution .tabs-title .inner .item .text .more a:hover { opacity: 1 } .app-home-solution .tabs-title .inner .item .icon { bottom: 50%; height: 120px; position: absolute; right: 100%; transform: translate(110%, 50%); width: 120px } @media screen and (max-width:1200px) { .app-home-solution .tabs-title .inner .item .icon { height: 100px; width: 100px } } @media screen and (max-width:1000px) { .app-home-solution .tabs-title .inner .item .icon { height: 80px; width: 80px } } .app-home-solution .tabs-title .inner .item .icon img { max-height: 100%; max-width: 100% } .app-home-solution .tabs-title .inner .item .item { margin-top: 20px } @media screen and (max-width:600px) { .app-home-solution .tabs-title .inner .item .item { margin-top: 10px } } .app-home-solution .tabs-title .inner .item, .app-home-solution .tabs-title .inner .item .icon, .app-home-solution .tabs-title .inner .item .text, .app-home-solution .tabs-title .inner .item .text .main, .app-home-solution .tabs-title .inner .item .text .main .title { transition: .3s ease } .app-home-solution .tabs-title .inner .item.active { background: linear-gradient(to right bottom, #b4282c, #d73434); box-shadow: none; height: 436px } .app-home-solution .tabs-title .inner .item.active .icon { bottom: -30px; height: 220px; right: -30px; transform: translate(0); width: 220px } @media screen and (max-width:1200px) { .app-home-solution .tabs-title .inner .item.active .icon { height: 200px; width: 200px } } @media screen and (max-width:1000px) { .app-home-solution .tabs-title .inner .item.active .icon { height: 180px; width: 180px } } .app-home-solution .tabs-title .inner .item.active .text { justify-content: space-between } .app-home-solution .tabs-title .inner .item.active .text .main { margin-right: 0 } .app-home-solution .tabs-title .inner .item.active .text .main .title { font-size: 27px; padding-left: 0 } @media screen and (max-width:1200px) { .app-home-solution .tabs-title .inner .item.active .text .main .title { font-size: 22px } } @media screen and (max-width:1000px) { .app-home-solution .tabs-title .inner .item.active .text .main .title { font-size: 18px } } .app-home-solution .tabs-title .inner .item.active .text .main .intro { height: auto; margin-top: 1.5em; opacity: 1 } .app-home-solution .tabs-title .inner .item.active .text .main .tags { display: flex; flex-wrap: wrap; margin: -5px; padding-top: 20px } .app-home-solution .tabs-title .inner .item.active .text .main .tags .tag { padding: 5px; width: 50% } .app-home-solution .tabs-title .inner .item.active .text .main .tags .tag a { width: 100% } .app-home-solution .tabs-title .inner .item.active .text .main .tags.is-icon { margin: 0 } .app-home-solution .tabs-title .inner .item.active .text .main .tags.is-icon .tag { margin-bottom: .5em; padding: 0; width: 100% } .app-home-solution .tabs-title .inner .item.active .text .main .tags.is-icon .tag .app-button { align-items: center; border: 0; display: inline-flex; font-weight: 500; height: auto; margin: 0; padding: 0; width: auto } .app-home-solution .tabs-title .inner .item.active .text .main .tags.is-icon .tag .app-button svg { fill: currentcolor; height: 1.8em; margin-right: .5em; width: 1.8em } .app-home-solution .tabs-title .inner .item.active .text .more { height: auto; opacity: 1 } .app-home-solution .tabs-title .inner .item.active .text .main .intro, .app-home-solution .tabs-title .inner .item.active .text .more { transition: opacity .3s ease .3s } @media screen and (max-width:1000px) { .app-home-solution .tabs-content { padding-bottom: 18px; padding-top: 18px } } .app-home-solution .tabs-content .items { display: none; grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; height: calc(100% 36px); margin: -18px -10px; width: calc(100% 20px) } .app-home-solution .tabs-content .items.active { display: grid } .app-home-solution .tabs-content .items .item { padding: 18px 10px } .app-home-solution .tabs-content .items .item .inner { background: linear-gradient(to right bottom, #332929, #2c2222); border-radius: 4px; box-shadow: -12px -12px 18px rgba(255, 255, 255, .04), 12px 12px 18px rgba(12, 6, 6, .43), inset 10px 10px 14px transparent, inset -10px -10px 14px rgba(88, 88, 88, 0); color: #fff; display: flex; flex-direction: column; font-size: 12px; height: 100%; justify-content: space-between; padding: 40px 20px 20px; position: relative; transition: box-shadow .6s ease; width: 100% } .app-home-solution .tabs-content .items .item .inner:hover { box-shadow: -12px -12px 18px rgba(255, 255, 255, 0), 12px 12px 18px rgba(12, 6, 6, 0), inset 10px 10px 14px rgba(0, 0, 0, .24), inset -10px -10px 14px rgba(88, 88, 88, .24) } .app-home-solution .tabs-content .items .item .inner .icon { align-items: center; display: flex; height: 0; justify-content: center; left: 0; pointer-events: none; position: absolute; right: 0; top: 0 } .app-home-solution .tabs-content .items .item .inner .icon-inner { width: 70px } .app-home-solution .tabs-content .items .item .inner .icon img { height: auto; max-width: 160px; width: 100% } .app-home-solution .tabs-content .items .item .inner .title { font-size: 20px; font-weight: 400 } @media screen and (max-width:1200px) { .app-home-solution .tabs-content .items .item .inner .title { font-size: 18px } } @media screen and (max-width:1000px) { .app-home-solution .tabs-content .items .item .inner .title { font-size: 16px } } .app-home-solution .tabs-content .items .item .inner .list { list-style: none } .app-home-solution .tabs-content .items .item .inner .list li { margin-top: .5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .app-home-solution .tabs-content .items .item .inner .list li a { color: currentcolor; opacity: .5 } .app-home-solution .tabs-content .items .item .inner .list li a:hover { opacity: 1 } .app-home-solution .tabs-content .items .item .inner .more { margin-top: 2em } .app-home-solution .tabs-content .items .item .inner .more a { color: currentcolor; opacity: .7 } .app-home-solution .tabs-content .items .item .inner .more a:hover { opacity: 1 } .app-home-strength .wrap { align-items: center; display: flex; flex-wrap: wrap } .app-home-strength .wrap .image { flex: 0 0 auto; width: 59% } @media screen and (max-width:800px) { .app-home-strength .wrap .image { width: 100% } } .app-home-strength .wrap .image .pic { border-radius: 4px; box-shadow: 0 2px 17px rgba(0, 0, 0, .07), 0 -2px 17px rgba(0, 0, 0, .08); font-size: 0; overflow: hidden } .app-home-strength .wrap .image .pic img { width: 100% } .app-home-strength .wrap .numbers { flex: 0 0 auto; padding: 20px; width: 41% } @media screen and (max-width:800px) { .app-home-strength .wrap .numbers { padding: 10px 0; width: 100% } } .app-home-strength .wrap .numbers .inner { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: center } @media screen and (max-width:800px) { .app-home-strength .wrap .numbers .inner { justify-content: space-between } } .app-home-strength .wrap .numbers .item { padding: 30px 15px; width: 40% } @media screen and (max-width:1600px) { .app-home-strength .wrap .numbers .item { width: 45% } } @media screen and (max-width:800px) { .app-home-strength .wrap .numbers .item { width: auto } } @media screen and (max-width:640px) { .app-home-strength .wrap .numbers .item { width: 50% } } .app-home-strength .wrap .numbers .item .num { color: #df242a; font-size: 50px; font-weight: 500; line-height: 1 } @media screen and (max-width:1200px) { .app-home-strength .wrap .numbers .item .num { font-size: 40px } } @media screen and (max-width:1000px) { .app-home-strength .wrap .numbers .item .num { font-size: 30px } } .app-home-strength .wrap .numbers .item .num sup { font-size: .5em; font-weight: 400; position: relative; top: -10px } .app-home-strength .wrap .numbers .item .intro { color: #333; font-size: 18px } html[lang=en] .app-home-strength .wrap .numbers .item .intro { font-weight: 500 } @media screen and (max-width:1200px) { .app-home-strength .wrap .numbers .item .intro { font-size: 16px } } @media screen and (max-width:1000px) { .app-home-strength .wrap .numbers .item .intro { font-size: 14px } } .app-home-banner { height: 35vw; max-height: 600px; min-height: 380px; overflow: hidden; position: relative; z-index: 0 } @media screen and (max-width:700px) { .app-home-banner { max-height: 285px; min-height: 285px } } .app-home-banner [data-moup-carousel] { height: 100%; position: relative } .app-home-banner [data-moup-carousel] .carousel-list, .app-home-banner [data-moup-carousel] .carousel-slide, .app-home-banner [data-moup-carousel] .carousel-slide>div, .app-home-banner [data-moup-carousel] .carousel-slide>div>div, .app-home-banner [data-moup-carousel] .carousel-track { height: 100% } .app-home-banner [data-moup-carousel] .carousel-list { overflow: visible } .app-home-banner [data-moup-carousel] .carousel-dots { align-items: center; bottom: 20%; display: flex; left: 50%; list-style: none; position: absolute; transform: translatex(-50%); width: 1440px; z-index: 1200 } @media screen and (max-width:1600px) { .app-home-banner [data-moup-carousel] .carousel-dots { width: 1180px } } @media screen and (max-width:1200px) { .app-home-banner [data-moup-carousel] .carousel-dots { width: 94% } } @media screen and (max-width:700px) { .app-home-banner [data-moup-carousel] .carousel-dots { bottom: 8vw; justify-content: center } } .app-home-banner [data-moup-carousel] .carousel-dots li button { background-color: rgba(153, 153, 153, .5); border: 0; cursor: pointer; display: block; font-size: 0; height: 4px; width: 30px } @media screen and (max-width:1200px) { .app-home-banner [data-moup-carousel] .carousel-dots li button { height: 2px } } .app-home-banner [data-moup-carousel] .carousel-dots li li { margin-left: 5px } .app-home-banner [data-moup-carousel] .carousel-active button { background-color: #cc0404 !important } .app-home-banner .item { position: relative } .app-home-banner .item, .app-home-banner .item .bg { height: 100%; width: 100% } .app-home-banner .item .wrap { align-items: center; display: flex; height: 100%; justify-content: space-between } @media screen and (max-width:700px) { .app-home-banner .item .wrap { flex-direction: column; justify-content: flex-start } } .app-home-banner .item .bg { background-position: 50%; background-repeat: no-repeat; background-size: cover; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 0 } .app-home-banner .item .bg.pc { display: block } @media screen and (max-width:580px) { .app-home-banner .item .bg.pc { display: none } } .app-home-banner .item .bg.m { display: none } @media screen and (max-width:580px) { .app-home-banner .item .bg.m { display: block } } .app-home-banner .item .icon { flex: 0 0 auto; height: 100%; width: 50% } @media screen and (max-width:700px) { .app-home-banner .item .icon { height: 160px; margin-top: 10px; transform: translatex(-5%) } } .app-home-banner .item .icon img { height: 100%; width: auto } .app-home-banner .item .icon canvas { height: 100%; width: 100% } .app-home-banner .item .text { font-size: 16px; padding-bottom: 5% } @media screen and (max-width:1600px) { .app-home-banner .item .text { font-size: 14px } } @media screen and (max-width:1200px) { .app-home-banner .item .text { font-size: 12px } } @media screen and (max-width:700px) { .app-home-banner .item .text { margin-top: -5px; order: 1; text-align: center } } .app-home-banner .item .text .title { color: #333; font-size: 34px; font-weight: 400 } @media screen and (max-width:1600px) { .app-home-banner .item .text .title { font-size: 32px } } @media screen and (max-width:1200px) { .app-home-banner .item .text .title { font-size: 28px } } @media screen and (max-width:700px) { .app-home-banner .item .text .title { font-size: 24px } } @media screen and (max-width:380px) { .app-home-banner .item .text .title { font-size: 20px } } .app-home-banner .item .text .intro { color: #333; margin-top: .5em } .app-home-banner .item .text .button { margin-top: 3em } @media screen and (max-width:700px) { .app-home-banner .item .text .button { display: none !important; margin-top: 16px } } .app-home-banner .item .text .button .app-button { font-size: 1em; height: 40px; transition: box-shadow .6s ease } @media screen and (max-width:1200px) { .app-home-banner .item .text .button .app-button { height: 34px } } .app-home-banner .item .app-container { height: 100%; position: relative; z-index: 1 } .app-home-business { background-color: #333; position: relative } .app-home-business .app-head-main { padding-top: 40px; position: relative; z-index: 1 } @media screen and (max-width:860px) { .app-home-business .app-head-main { padding-top: 30px } } .app-home-business .app-head-main, .app-home-business .app-head-main :not(a) { color: #fff } .app-home-business .wrap { display: flex; justify-content: flex-end; padding: 0 0 60px; position: relative; z-index: 1 } .app-home-business .wrap .box { color: #fff; width: 50% } @media screen and (max-width:1200px) { .app-home-business .wrap .box { width: 70% } } @media screen and (max-width:860px) { .app-home-business .wrap .box { width: 100% } } .app-home-business .wrap .box .tabs { align-items: stretch; display: flex; font-size: 18px; margin: 0 -5px } @media screen and (max-width:760px) { .app-home-business .wrap .box .tabs { font-size: 16px } } @media screen and (max-width:660px) { .app-home-business .wrap .box .tabs { font-size: 14px } } .app-home-business .wrap .box .tabs .tab { flex: 0 0 auto; padding: 5px; width: 33.33% } .app-home-business .wrap .box .tabs .tab span { align-items: center; background-color: rgba(0, 0, 0, .54); border-radius: 10px; color: rgba(255, 255, 255, .7); cursor: pointer; display: flex; height: 40px; justify-content: center } @media screen and (max-width:450px) { .app-home-business .wrap .box .tabs .tab span { border-radius: 4px } } .app-home-business .wrap .box .tabs .tab.active { padding-bottom: 0 } .app-home-business .wrap .box .tabs .tab.active span { border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: #fff; height: 45px } .app-home-business .wrap .box .content, .app-home-business .wrap .box .tabs .tab.active span { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(0, 0, 0, .6) } .app-home-business .wrap .box .content { border-radius: 10px; min-height: 590px; padding: 25px } @media screen and (max-width:450px) { .app-home-business .wrap .box .content { border-radius: 4px; padding: 15px } } .app-home-business .wrap .box .content .tab-content { align-items: stretch; display: none; flex-wrap: wrap; margin: -10px } @media screen and (max-width:450px) { .app-home-business .wrap .box .content .tab-content { margin: -5px } } .app-home-business .wrap .box .content .tab-content.active { display: flex } .app-home-business .wrap .box .content .tab-content .item { flex: 0 0 auto; padding: 10px; width: 50% } @media screen and (max-width:450px) { .app-home-business .wrap .box .content .tab-content .item { padding: 5px } } @media screen and (max-width:640px) { .app-home-business .wrap .box .content .tab-content .item { width: 100% } } .app-home-business .wrap .box .content .tab-content .item .inner { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(255, 255, 255, .05); border-radius: 4px; font-size: 12px; height: 160px; padding: 30px } .app-home-business .wrap .box .content .tab-content .item .inner .title { font-size: 18px; font-weight: 500; line-height: 1; margin-bottom: .75em } @media screen and (max-width:760px) { .app-home-business .wrap .box .content .tab-content .item .inner .title { font-size: 16px } } @media screen and (max-width:660px) { .app-home-business .wrap .box .content .tab-content .item .inner .title { font-size: 14px } } .app-home-business .wrap .box .content .tab-content .item .inner ul { display: flex; flex-wrap: wrap; list-style: none; margin: -3px } .app-home-business .wrap .box .content .tab-content .item .inner ul li { flex: 0 0 auto; padding: 3px; width: 50% } .app-home-business .wrap .box .content .tab-content .item .inner ul li a { color: rgba(255, 255, 255, .7); font-weight: 300 } .app-home-business .wrap .box .content .tab-content .item .inner ul li a:hover { color: #df242a; font-weight: 500 } .app-home-business .wrap .box .content .tab-content .item.top { width: 100% } .app-home-business .wrap .box .content .tab-content .item.top .inner { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); background: no-repeat 50%/cover } .app-home-business .wrap .box .content .tab-content .item.top .inner ul { margin-right: 20% } @media screen and (max-width:640px) { .app-home-business .wrap .box .content .tab-content .item.top .inner ul { margin-right: 0 } } .app-home-business .wrap .box .content .tab-content .item.top .inner ul li { width: 33.33% } @media screen and (max-width:640px) { .app-home-business .wrap .box .content .tab-content .item.top .inner ul li { width: 50% } } .app-home-business .wrap .box .content .tab-content .more { align-items: center; display: flex; justify-content: flex-end; margin-top: 40px; padding: 10px; width: 100% } @media screen and (max-width:450px) { .app-home-business .wrap .box .content .tab-content .more { padding: 5px } } .app-home-business .wrap .box[data-active="1"] .content { border-top-left-radius: 0 !important } .app-home-business .wrap .box[data-active="3"] .content { border-top-right-radius: 0 !important } .app-home-business .bg { background-position: 0; background-repeat: no-repeat; background-size: cover; bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0 } .app-home-business .bg:before { background: linear-gradient(180deg, #000, transparent); content: ""; display: block; height: 15vw; left: 0; opacity: .5; position: absolute; right: 0; top: 0 } .app-home-business .bg video { height: 100%; object-fit: cover; object-position: right center; pointer-events: none; width: 100% }