a { color: #333 } img { max-width: 100% } .button-apply { display: block; width: 110px; height: 40px; line-height: 40px; font-size: var(--font-size); border-radius: 4px; text-align: center; color: #fff; background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%); transition: all .3s ease-in-out } .button-apply:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } nav .nav-wrap { background: url("../image/video_banner_bg.png") no-repeat center bottom/cover; height: 400px; } nav .nav-wrap .box { display: flex; align-items: center; height: 100%; background: none } nav .nav-wrap .box h1 { color: #333333; font-size: 2em; } nav .nav-wrap .box p { color: #666666; font-size: 1.4rem; line-height: 1.7; text-align: center; margin-top: 10px; } nav .nav-wrap .box .nav-apply-box { display: flex; margin-top: 40px; } nav .nav-wrap .box .nav-apply-box a { display: block; width: 160px; height: 40px; line-height: 40px; background-color: #ff5a67; border-radius: 4px; width: 160px; font-size: 16px; text-align: center; color: #fff; transition: all .3s ease-in-out; background: linear-gradient(to right, #2f91d4, #1881c9) } nav .nav-wrap .box .nav-apply-box a:hover { box-shadow: 0 10px 25px 0 rgba(24,129,201,.5) } .call-menu-wrap { width: 100%; height: 45px; background-color: #fff; border-bottom: 1px solid #eceff5; position: sticky; z-index: 11; top: 67px; left: 0 } .call-menu-wrap .call-menu-box { display: flex; justify-content: center } .call-menu-wrap .call-menu-box a { display: block; height: 45px; line-height: 45px; margin-right: 100px; font-size: 16px } .call-menu-wrap .call-menu-box a:last-child { margin-right: 0 } .call-menu-wrap .call-menu-box a:hover { color: #ee1d0f } .call-menu-wrap .call-menu-box a.active { color: #ee1d0f; border-bottom: 1px solid #ee1d0f } .menuFixed { box-shadow: 0px 15px 10px -15px rgba(6,30,46,.15) } .video-use-wrap .video-use-img { width: 40% } .video-use-wrap .video-use-left { width: 30%; text-align: right } .video-use-wrap .video-use-left h3 { font-size: 18px; line-height: 1; margin-bottom: 10px } .video-use-wrap .video-use-left h3:not(:first-child) { margin-top: 20px } .video-use-wrap .video-use-left h3:first-child { margin-right: -40px; margin-top: 10px } .video-use-wrap .video-use-left h3:nth-child(7) { margin-right: -40px } .video-use-wrap .video-use-left p { font-size: 13px; font-weight: lighter } .video-use-wrap .video-use-left p:not(:last-child) { margin-bottom: 30px } .video-use-wrap .video-use-left p:nth-child(2) { margin-right: -40px } .video-use-wrap .video-use-left p:nth-child(8) { margin-right: -40px } .video-use-wrap .video-use-right { width: 30% } .video-use-wrap .video-use-right h3 { font-size: 18px; line-height: 1; margin-bottom: 10px } .video-use-wrap .video-use-right h3:not(:first-child) { margin-top: 20px } .video-use-wrap .video-use-right h3:first-child { margin-left: -30px } .video-use-wrap .video-use-right h3:nth-child(5) { margin-left: -30px } .video-use-wrap .video-use-right p { font-size: 13px; font-weight: lighter } .video-use-wrap .video-use-right p:not(:last-child) { margin-bottom: 55px } .video-use-wrap .video-use-right p:nth-child(2) { margin-left: -30px } .video-use-wrap .video-use-right p:nth-child(6) { margin-left: -30px } .video-use-wrap .button-apply { width: 160px; margin: 40px auto 0 } .video-main-wrap { padding-bottom: 20px } .video-main-wrap .wrap { padding-top: 60px; padding-bottom: 60px } .video-main-box .video-img { width: 42% } .video-main-box .video-text { width: -moz-fit-content; width: fit-content } .video-main-box .video-text h3 { font-size: 24px; font-weight: bold } .video-main-box .video-text p { margin: 40px 0; line-height: 1.7 } .video-main-box .video-text ul { max-width: 450px; display: flex; flex-wrap: wrap; margin-top: -30px; margin-bottom: 40px } .video-main-box .video-text ul li { width: 25%; line-height: 1.7 } .video-main-box .video-text a { display: block; width: 110px; height: 34px; line-height: 34px; text-align: center; border-radius: 4px; color: #fd4047; border: 1px solid; transition: all .3s ease-in-out } .video-main-box .video-text a:hover { box-shadow: 0 10px 15px 0 rgba(238,77,45,.2) } .video-main-box div:nth-child(2) { margin-left: 5% } .video-more-wrap { background-color: #454c69 } .video-more-wrap a { width: 160px; margin: 40px auto 0 } .video-more-wrap .video-more-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap } .video-more-wrap .video-more { text-align: center; background-color: #fff; width: 32%; padding: 30px 0; margin-bottom: 2%; transition: all .3s ease-in-out } .video-more-wrap .video-more:nth-child(n+4) { display: flex; align-items: center; justify-content: center; margin-bottom: 0; width: 49% } .video-more-wrap .video-more:nth-child(n+4) img { width: 65px; margin-right: 70px } .video-more-wrap .video-more:nth-child(n+4) div { text-align: left; width: 50% } .video-more-wrap .video-more:nth-child(n+4) div p { width: 100% } .video-more-wrap .video-more:hover { transform: translateY(-8px) } .video-more-wrap .video-more img { width: 75px } .video-more-wrap .video-more h3 { font-size: 20px; line-height: 1; font-weight: bold; margin: 20px 0 } .video-more-wrap .video-more p { color: #282b42; width: 70%; text-align: left; line-height: 1.7; margin: 0 auto } .video-advan-wrap { background-color: #f9fafc; } .video-advan-box { align-items: stretch } .video-advan { width: 49%; padding: 30px; border-radius: 4px; display: flex; margin-bottom: 2%; justify-content: center; border: 1px solid #bac1d2; background-color: #fff; box-shadow: 0px 0px 12px 1px rgba(18,26,49,.1608); transition: all .3s ease-in-out } .video-advan:hover { transform: translateY(-8px) } .video-advan div { flex: 1 } .video-advan img { width: 132px; height: 132px; margin-right: 35px } .video-advan h3 { font-size: 20px; line-height: 1; margin-bottom: 20px } .video-advan p { color: #282b42; line-height: 1.7; margin: 0 auto; font-size: 14px; } .bottom-tryout-wrap { background: url("../image/ssc_bottom_try.png") no-repeat center center/cover } .bottom-tryout-wrap .bottom-little-text { font-size: 16px; margin-top: 5px } .talent-box { height: 420px; display: flex; overflow: hidden; } .talent-box .talent-item { width: 20%; height: 420px; text-align: center; } .talent-box .talent-item div:first-child { width: 100%; height: 420px; padding-top: 146px; } .talent-box .talent-item:nth-child(1) div:first-child { background: url("../image/c106_1.jpg") center center no-repeat; background-size: cover } .talent-box .talent-item:nth-child(2) div:first-child { background: url("../image/c106_2.jpg") center center no-repeat; background-size: cover } .talent-box .talent-item:nth-child(3) div:first-child { background: url("../image/c106_3.jpg") center center no-repeat; background-size: cover } .talent-box .talent-item:nth-child(4) div:first-child { background: url("../image/c106_4.jpg") center center no-repeat; background-size: cover } .talent-box .talent-item:nth-child(5) div:first-child { background: url("../image/c106_5.jpg") center center no-repeat; background-size: cover } .talent-box .talent-item span { display: flex; height: 56px; align-items: center; justify-content: center; } .talent-box .talent-item p { color: #fff; margin-top: 35px; padding: 0 30px; } .call-feature-wrap .call-feature-box { align-items: stretch } .call-feature-wrap .call-feature-box .call-feature { flex: 1; border-radius: 8px; overflow: hidden; background-color: #f9fbfe; border: 1px solid #e2e7ed; transition: all .3s ease-in-out } .call-feature-wrap .call-feature-box .call-feature:nth-child(2) { margin: 0 30px } .call-feature-wrap .apply-btn-box { width: -moz-fit-content; width: fit-content; margin: 40px auto 0 } .call-feature .call-feature-header { padding-left: 30px; align-items: center; height: 70px; background: linear-gradient(90deg, #7b9efc 0%, #527ae3 100%) } .call-feature .call-feature-header img { max-height: 26px; margin-right: 15px; } .call-feature:nth-child(2) .call-feature-header { background: linear-gradient(90deg, #9d94e6 0%, #6874d0 100%) } .call-feature:nth-child(3) .call-feature-header { background: linear-gradient(96deg, #7684c3 0%, #2e418e 100%) } .call-feature .call-feature-content { height: 100%; padding: 30px 10px 30px 25px; background: url("../image/call_feature_bg.png") no-repeat center center/cover } .call-feature .call-feature-phone { height: 201.2px } .call-feature .call-feature-phone p { display: flex; line-height: 1.7 } .call-feature .call-feature-phone p:nth-child(2) { margin-bottom: 8px } .call-feature .call-feature-phone p span { font-size: var(--font-size); margin-right: 10px; color: #282b42 } .call-feature h3 { font-size: 20px; line-height: 3; font-weight: bold; color: #fff } .call-feature h3 i { font-size: 24px; vertical-align: -1px; margin-right: 8px; color: #b9bcc5 } .call-feature h4 { font-size: 18px; line-height: 1; margin-bottom: 20px } .call-feature p { font-size: 15px; line-height: 2; color: #282b42 } .call-feature:hover { cursor: defalut; transform: translateY(-8px); box-shadow: -1px 29px 42px 4px rgba(190,213,255,.34); border: solid 1px #9dbcf7 } @media screen and (max-width: 768px) { nav .nav-wrap .box{ text-align: center; } nav .nav-wrap .box .nav-apply-box{ justify-content: center } .video-more-wrap .video-more { width: 100%; } .video-advan{ width: 100%; display: block; text-align: center; } .video-advan img{ margin: 0 0 10px 0; margin: auto; } .video-advan p{ text-align: left !important; } .talent-box { height: auto; flex-wrap: wrap; } .talent-box .talent-item { width: 100%; height: 220px; } .talent-box .talent-item div:first-child { height: 200px; padding-top: 46px; } .call-feature-wrap { padding-top: 1rem } .call-feature-wrap .call-feature-box { flex-wrap: wrap } .call-feature-wrap .call-feature-box .call-feature { flex: auto; width: 100%; border-radius: .8rem } .call-feature-wrap .call-feature-box .call-feature:nth-child(2) { margin: 2rem 0 } .call-feature .call-feature-header { padding-left: 2rem; height: 4rem } .call-feature .call-feature-header img { max-height: 2rem; margin-right: 1.5rem } .call-feature .call-feature-content { padding: 2rem 1rem 2rem 2rem; background: url("../image/call_feature_bg.png") no-repeat center center/cover } .call-feature .call-feature-phone { height: auto } .call-feature .call-feature-phone p { display: flex; line-height: 1.7 } .call-feature .call-feature-phone p:nth-child(2) { margin-bottom: .8rem } .call-feature .call-feature-phone p span { font-size: 1.4rem; margin-right: 1rem; color: #282b42 } .call-feature h3 { font-size: 1.6rem; line-height: 3; font-weight: bold; color: #fff } .call-feature h3 i { font-size: 2.4rem; vertical-align: -0.1rem; margin-right: .8rem; color: #b9bcc5 } .call-feature h4 { font-size: 1.5rem; line-height: 1; margin-bottom: 1rem } .call-feature p { font-size: 1.3rem; line-height: 2; color: #6e7080 } .call-feature:hover { cursor: defalut; transform: translateY(-0.8rem); box-shadow: -0.1rem 2.9rem 4.2rem .4rem rgba(190,213,255,.34); border: solid .1rem #9dbcf7 } } /*# sourceMappingURL=product_video.css.map */