.apply-wrap { background: url("../image/apply_wrap_bg.png") no-repeat top left/100% 100% } .apply-box { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 70px 10px } .apply-box .apply-left { width: 47%; margin-right: 5% } .apply-box .apply-left h2 { font-size: 30px; line-height: 1.7; font-weight: bold; padding-left: 30px } .apply-box .apply-left h2 span { font-size: 34px; line-height: 1.5; vertical-align: bottom; background-image: linear-gradient(to right, #fd6d6d, #fd1414); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0,0,0,0) } .apply-box .apply-right { width: 48%; min-width: 450px; border-radius: 4px; padding: 30px 60px; background-color: #fff; box-shadow: 2px 5px 73px 0px rgba(212,216,223,.26) } .apply-box .apply-right h2 { font-size: 30px; text-align: center; line-height: 1.3; font-weight: normal; margin-bottom: 14px; } .apply-box .apply-right .apply-right-title { text-align: center; color: #6e7080; margin-bottom: 20px } .apply-left .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 3px; border-radius: 0 } .apply-left .swiper-pagination-bullet-active { background-color: #ea383b; border-radius: 0; opacity: 1 } .apply-left .swiper-pagination { bottom: 30px; margin: 40px auto 0; display: block; position: relative; line-height: 36px } .apply-swiper { width: 100%; margin: 20px auto; border-radius: 8px; box-shadow: 2px 10px 24px 0px rgba(206,211,220,.52) } .swiper-wrapper .swiper-slide { box-sizing: border-box; width: 100%; padding: 30px 60px 40px; height: auto; border-radius: 8px; transition: all .3s ease-in-out } .swiper-wrapper .swiper-slide p { font-size: var(--font-size); line-height: 2; color: #ffffff; } .swiper-wrapper .swiper-slide p.bottom { text-align: right } .swiper-wrapper .swiper-slide p.bottom span { width: 40px; margin-right: 3px; display: inline-block; height: 14px; border-bottom: 1px solid #282b42; vertical-align: top; background-color: rgba(0,0,0,0) } .swiper-wrapper .swiper-slide .swiper-img { max-width: 55px; height: 55px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px } .swiper-wrapper .swiper-slide .swiper-img img { max-width: 90%; width: auto; height: auto } .swiper-wrapper .swiper-slide .swiper-img .slide-img-other { margin-top: -5px } .swiper-wrapper .swiper-slide1 { background: url("../image/apply_slide_bg1.png") no-repeat top left/100% 100% } .swiper-wrapper .swiper-slide2 { background: url("../image/apply_slide_bg2.png") no-repeat top left/100% 100% } .swiper-wrapper .swiper-slide3 { background: url("../image/apply_slide_bg3.png") no-repeat center center/100% 100% } .swiper-wrapper .swiper-slide4 { background: url("../image/apply_slide_bg4.png") no-repeat center center/100% 100% } .swiper-wrapper .swiper-slide5 { background: url("../image/apply_slide_bg5.png") no-repeat center center/100% 100% } .swiper-wrapper .swiper-slide6 { background: url("../image/apply_slide_bg6.png") no-repeat center center/100% 100% } .swiper-wrapper .swiper-slide7 { background: url("../image/apply_slide_bg7.png") no-repeat center center/100% 100% } .swiper-wrapper .swiper-slide8 { background: url("../image/apply_slide_bg8.png") no-repeat center center/100% 100% } .input-box { text-align: center; border: 1px solid #e2e1e5; margin: 0px auto; width: 100%; overflow: hidden; border-radius: 4px; height: 45px; line-height: 45px; display: flex; justify-content: space-between; transition: all .3s ease-in-out } .input-box label { min-width: 120px } .input-box input { width: 100%; height: 100%; padding-left: 10px; line-height: 43px; border: none; border-radius: 0 } .input-box input::-webkit-input-placeholder { color: #d5d5d5 } .input-box input:focus { box-shadow: none } .input-box input:-webkit-autofill { box-shadow: 0 0 0px 100px #fff inset !important; background: none !important } .input-box .code { width: 100%; border: 1px solid #e2e1e5; border-radius: 4px; text-indent: 40px } .input-box .getcode { min-width: 120px; height: 45px; line-height: 45px; margin-left: 30px; border: none; color: #fff; font-size: var(--font-size); background: #e0392d; cursor: pointer } .tips-wrap { padding: 6px 0 12px } .tips-wrap .tips { color: #e0392d; font-size: 13px; text-indent: 5px; line-height: 1; text-align: left; height: 0; transition: all .3s ease-in-out; transform: rotate3d(-1, 0, 0, 90deg); transform-origin: 50% 0%; transition: all .3s ease-in-out } .tips-wrap .show-tips { height: 13px; transform: rotate3d(0, 0, 0, 0deg) } @keyframes shining { 0% { background-position: -190px 0 } 100% { background-position: 190px 0 } } .slider-unlock { height: 0; border-radius: 2px; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: #282b42; background-color: #ebeced; transform: rotate3d(-1, 0, 0, 90deg); transform-origin: 50% 0%; transition: all .3s ease-in-out } .slider-unlock .before,.slider-unlock .after { position: absolute; top: 0; left: 0; z-index: 1; height: 100%; font-size: 13px; line-height: 36px; text-align: center } .slider-unlock .before { width: 100%; position: absolute; top: 0; color: rgba(0,0,0,0); -moz-user-select: none; -webkit-user-select: none; user-select: none; -o-user-select: none; -ms-user-select: none; background: -webkit-gradient(linear, left top, right top, color-stop(0, #282b42), color-stop(0.4, #282b42), color-stop(0.5, #fff), color-stop(0.6, #282b42), color-stop(1, #282b42)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0,0,0,0); -webkit-text-size-adjust: none; animation: shining 3s ease-in-out infinite } .slider-unlock .after { width: 0; overflow: hidden } .slider-unlock .after-inner { position: absolute; width: 100%; height: 100%; color: #282b42; background-color: #ffe6e8 } .slider-unlock .slider { position: absolute; top: 0; left: 0; z-index: 3; width: 48px; height: 36px; border-radius: 2px; cursor: pointer; color: #282b42; border: 1px solid #bec4d0; cursor: pointer; background: #fff url("../image/apply_arrow.png") no-repeat center center } .slider-unlock .slider.is-success { border: 1px solid #ffe6e8; background: #fff url("../image/apply_success2.png") no-repeat 15px 9px/auto 18px } .slider-show { height: 36px; margin-top: -8px; margin-bottom: 10px; transform: rotate3d(0, 0, 0, 0deg) } .input-box-code { border: none; position: relative } .input-box-code i { position: absolute; top: 0; right: 3%; color: #e0392d; opacity: 0; transition: all .3s ease-in-out } .input-box-code .opacity { opacity: 1 } .border-high { border: 1px solid #eb305b !important } .tosubmit { display: block; width: 210px; height: 45px; line-height: 45px; margin: 10px auto 5px; background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%); color: #fff; font-size: 16px; border: none } .tosubmit:disabled { opacity: .5; cursor: not-allowed } .little-tips { text-align: center; font-size: 12px; color: #a3a09f; letter-spacing: .5px } .little-tips a { color: #434343 } .success-wrap { width: 100%; height: 650px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: url("../image/apply_wrap_bg.png") no-repeat top left/100% 100% } .success-wrap .success-top { margin: 0px auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center } .success-wrap .success-top h2 { font-size: 28px; font-weight: normal; line-height: 1; margin-right: 10px } .success-wrap .success-top h3 { width: 100%; font-size: 18px; line-height: 2; margin-top: 30px; color: #282b42 } .success-wrap .success-top img { width: 30px; margin-left: 5px; margin-right: 5px } .success-wrap .success-top p { width: 100%; text-align: center; font-size: 18px; line-height: 1.7; margin-bottom: 30px; color: #282b42 } .success-wrap .success-top p span { color: #333 } .success-wrap .success-code { margin: 0 auto } .success-wrap .success-code .success-img { width: 175px; height: 175px; margin: 0 auto; padding: 5px; background: url("../image/apply_success_code_bg.png") center center/100% 100% } .success-wrap .success-code .success-img img { width: 100% } .success-wrap .success-holi .success-top h2 { color: #ff4d4d } .success-wrap .success-holi .success-top p { color: #333; font-size: 16px; margin-bottom: 0 } .success-wrap .success-holi .success-top p.bottom { font-size: 18px; margin-top: 0; margin-bottom: 50px; color: #ff4d4d } .success-wrap .success-holi .success-code { margin: 0 auto; width: 175px; height: 175px; padding: 5px; background: url("../image/apply_success_holicode_bg.png") center center/100% 100% } .success-wrap .success-holi .success-code img { width: 100% } .success-wrap .success-holi .success-code p { font-size: 16px; margin-top: 8px; text-align: center } .apply-sub-left { padding-left: 30px; text-align: center } .apply-sub-left h3 { text-align: left; font-size: 18px; color: #282b42; margin-bottom: 15px } .apply-sub-left img { max-width: 90% } .apply-sub-con { display: flex; align-items: flex-start; text-align: left; margin-bottom: 20px } .apply-sub-con h4 { font-size: 18px; line-height: 2; margin-right: 20px } .apply-sub-con p { font-size: 18px; line-height: 2; font-weight: bold; letter-spacing: 1px } .apply-sub-con p i { color: #f44144; margin-right: 5px } .swal-footer { text-align: center !important } .swal-text { font-size: 18px } .swal-text:first-child { margin-top: 35px } .swal-button { background-color: #e0392d !important } .holi-code-wrap { width: 100%; height: 100%; background-color: rgba(0,0,0,.4); position: fixed; top: 0; left: 0; z-index: 9999; display: flex; justify-content: center; align-items: center } .holi-code-wrap .holi-code-close { position: absolute; top: -38px; right: -30px; width: 30px; height: 30px; cursor: pointer } .holi-code-wrap .holi-code-close i { font-size: 30px; color: #333 } .holi-code-wrap .holi-code { position: relative; width: 360px; height: 480px; border-radius: 10px; background-color: #fff; box-shadow: 0px 0px 24px 0px rgba(168,173,184,.47) } .holi-code-wrap .holi-code .holi-code-header { color: #ffe6e6; padding: 20px 30px; border-radius: 10px 10px 0 0; background: url("../image/holi_code_bg.png") no-repeat center center/100% 100% } .holi-code-wrap .holi-code .holi-code-header p { line-height: 1.7 } .holi-code-wrap .holi-code .holi-code-header p:first-child { margin-bottom: 10px } .holi-code-wrap .holi-code .code { width: 170px; padding: 8px; margin: 30px auto 20px; border-radius: 10px; box-shadow: 0px 0px 24px 0px rgba(168,173,184,.47) } .holi-code-wrap .holi-code .code p { margin: 5px 0 0; text-align: center; color: #000; font-weight: 500 } .holi-code-wrap .holi-code p.code-close { margin: 0 auto; width: -moz-fit-content; width: fit-content; text-align: center; cursor: pointer; color: #fd4047; border-bottom: 1px solid #fd4047 } @media screen and (max-width: 768px) { html { height: 100% } body { background: #25344b !important; height: 100% } .mobile-fix-wrap { display: none } .apply-wrap { background: #25344b; padding-top: 5rem; padding-bottom: 2rem } .apply-box { max-width: 92%; padding: 3rem 0 } .apply-box .apply-left { display: none } .apply-box .apply-right { width: 100%; min-width: 0; padding: 2rem 1rem } .apply-box .apply-right h2 { font-size: 2.4rem; line-height: 1.3; margin-bottom: .8rem } .apply-box .apply-right .apply-right-title { margin-bottom: 2rem } .input-box { border: .1rem solid #e2e1e5; border-radius: .4rem; height: 4rem; line-height: 4rem } .input-box label { min-width: 10rem; font-size: 1.3rem } .input-box input { font-size: 1.3rem; padding-left: 1rem; line-height: 4rem } .input-box .code { border-radius: .4rem; text-indent: 4rem } .input-box .getcode { min-width: 12rem; height: 4rem; line-height: 4rem; margin-left: 3rem; font-size: 1.4rem } .tips-wrap { padding: .5rem 0 1.2rem } .tips-wrap .tips { font-size: 1.3rem; text-indent: .5rem } .tips-wrap .show-tips { height: 1.3rem } .input-box-code { border: none; position: relative } .input-box-code i { position: absolute; top: 0; max-width: 2rem; left: 56%; color: #6e7080; opacity: 0; transition: all .3s ease-in-out } .input-box-code .opacity { opacity: 1 } .border-high { border: .1rem solid #eb305b !important } .tosubmit { width: 20rem; height: 4rem; line-height: 4rem; margin: 1rem auto .5rem; font-size: 1.4rem } .little-tips { font-size: 1.2rem } .success-wrap { height: 54rem; background: url("../image/apply_wrap_bg.png") no-repeat top left/auto 100% } .success-wrap .success-top { margin: 0rem auto } .success-wrap .success-top h2 { font-size: 2.4rem; margin-right: 0; margin-top: 2rem } .success-wrap .success-top h3 { font-size: 1.4rem; margin-top: .5rem } .success-wrap .success-top img { width: 2.4rem; margin-top: 2rem } .success-wrap .success-top p { font-size: 1.3rem; line-height: 1.7; margin: 1rem 0 1.5rem } .success-wrap .success-top .mobile-text { color: #e0392d; font-weight: 500 } .success-wrap .success-code { text-align: center } .success-wrap .success-code .success-img { width: 15rem; height: 15rem; margin: 0 auto; padding: 5px; background: url("../image/apply_success_code_bg.png") center center/100% 100% } .success-wrap .success-code p { font-size: 1.1rem; color: #282b42; font-weight: bold; margin-top: .7rem } .success-wrap .success-code .success-weixin-btn { display: inline-block; padding: 0 2rem; height: 3.4rem; line-height: 3.4rem; text-align: center; font-size: 1.3rem; border-radius: .6rem; margin-top: 1rem; color: #fff; background-color: #f3594a; box-shadow: 0px 12px 27px 0px rgba(24,129,201,.5); transform: perspective(1px) translateZ(0); transition: all .4s ease-in-out } .success-wrap .success-holi .success-top p { font-size: 1.3rem; margin-bottom: 1rem } .success-wrap .success-holi .success-top p.bottom { font-size: 1.4rem; margin-top: 0; margin-bottom: 3rem; width: 90% } .success-wrap .success-holi .success-code { background: url("../image/apply_success_holicode_bg.png") no-repeat center center/100% 100% } .success-wrap .success-holi .success-code p { font-size: 1.4rem; margin-top: 1.5rem; text-align: center; color: #ff4d4d; font-weight: 500 } .holi-code-wrap .holi-code-close { position: absolute; top: -4rem; right: -2rem; width: 3rem; height: 3rem; cursor: pointer; opacity: 1 } .holi-code-wrap .holi-code { width: 32rem; height: 45rem; border-radius: 1rem } .holi-code-wrap .holi-code .holi-code-header { padding: 2rem 3rem; border-radius: 1rem 1rem 0 0 } .holi-code-wrap .holi-code .holi-code-header p { line-height: 1.7 } .holi-code-wrap .holi-code .holi-code-header p:first-child { margin-bottom: 1rem } .holi-code-wrap .holi-code .code { width: 17rem; padding: .8rem; margin: 3rem auto 2rem; border-radius: 1rem; box-shadow: 0rem 0rem 2.4rem 0rem rgba(168,173,184,.47) } .holi-code-wrap .holi-code .code p { margin: .5rem 0 0 } }/*# sourceMappingURL=apply.css.map */