*{ margin: 0; padding: 0; } .w{ width: 100%; margin: 0 auto; overflow: hidden; } .app{ box-sizing: border-box; background: no-repeat; background-size: cover; width: 100vw; min-height: calc(100vh - 80px); /* height: 944px; */ padding-top: 13%; position: relative; } .app-content{ width: 50%; margin-left: 50%; transform: translate(-50%); } .app-ad_textimg{ width: 30vw; height: 7.54vw; background: no-repeat; background-size: 100% 100%; } .app-ad_text{ font-size: 40px; letter-spacing: 0.6px; color: #f7fbfe; } .app-ad_arrow{ width: 2.08vw; height: 1.1vw; margin-bottom: 0.5vw; } .app-form{ padding-bottom: 29px; width: 409px; /* height: 322px; */ background-color: #212b33; border-radius: 10px; position: absolute; z-index: 2; } .app-form-container{ margin-top: 60px; width: 646px; height: 388px; padding-bottom:100px; position: relative; /* left: 460px; */ /* top: 12.97vw; */ background:url(/uploads/image/lfimages/yy.png) no-repeat; background-size:455px 388px; background-position: 14px 8px; } .app-form_title{ width: 339px; margin: 1.35vw auto; } .app-form-decoration{ position: absolute; left: 100px; bottom:0; width: 409px; height: 322px; /* background: #ea7268; */ background:url(/uploads/image/lfimages/yy.png) no-repeat; background-size: 100% 100%; border-radius: 10px; } .app-form_title_item1{ font-size: 24px; line-height: 45px; letter-spacing: 1px; color: #ffffff; } .app-form_title_item2{ font-family: pingfang-sc-bold; font-weight: normal; font-stretch: normal; font-size: 18px; line-height: 45px; letter-spacing: 1px; color: #ffffff; opacity: 0.5; padding-left: 20px; } .app-form_input{ width: 339px; height: 37px; background: #686f74; border: solid 1px #686f74; margin: 17px auto; display: block; } input::-webkit-input-placeholder{ font-family: sourcehansanscn-regular; font-size: 0.9vw; font-weight: normal; font-stretch: normal; color: #c6c6c6 !important; margin-left: 20px; } input::-moz-placeholder{ font-family: sourcehansanscn-regular; font-size: 0.9vw; font-weight: normal; font-stretch: normal; color: #c6c6c6 !important; margin-left: 20px; } input::-ms-input-placeholder{ font-family: sourcehansanscn-regular; font-size: 0.9vw; font-weight: normal; font-stretch: normal; color: #c6c6c6 !important; margin-left: 20px; } .app-form_divider{ width: 374px; height: 1px; background: ; margin: 20px 0 27px 0; } .app-form_btn{ cursor: pointer; width: 301px; height: 60px; background: no-repeat; background-size: 100% 100%; border-radius: 10px; margin: 0 auto; display: block; font-family: sourcehansanscn-medium; font-size: 30px; font-weight: normal; font-stretch: normal; line-height: 27.78px; letter-spacing: 1.5px; color: #fafafa; display: flex; justify-content: center; align-items: center; } .manage{ background: ; background-size: 100% 100%; width: 100%; /* height: 54.64vw; */ } .manage-module{ display: flex; flex-direction: row; justify-content: center; margin-top: 80px; } .manage-title_main{ /* height: 42px; */ font-size: 44px; line-height: 90px; letter-spacing: -2px; color: #151341; text-align: center; padding-top: 50px; box-sizing: border-box; } .manage-title_sub{ font-size: 24px; line-height: 44px; letter-spacing: 0px; color: #919191; text-align: center; margin: 0 auto; width: 730px; } .manage-module_left_item, .manage-module_right_item{ width: 356px; background-color: #f0f3f4; border-radius: 10px; line-height: 28px; padding: 10px 0 10px 51px; } .manage-module_right_item{ width: 260px; } .manage-module_title{ font-size: 28px; line-height: 60px; letter-spacing: -1px; color: #151341; } .manage-middle-img{ width: 511px; height: 750px; background: no-repeat; z-index: 2; margin-bottom: 50px; } .manage-module_right_item ul li,.manage-module_left_item ul li { font-size: 16px; color: #919191; line-height:28px; display: list-item; } .manage-module_right_item ul li::marker,.manage-module_left_item ul li::marker{ font-size: 8px; } .manage-module_right_item ul,.manage-module_left_item ul{ list-style: disc; } .manage-module_left,.manage-module_right{ position: relative; } .left-item1{ position: absolute; top: -53px; right: -13px; } .left-item2{ position: absolute; top: 196px; right: -13px; } .left-item3{ position: absolute; top: 528px; right: -13px; } .right-item1{ position: absolute; top: -30px; left: -18px; } .right-item2{ position: absolute; top: 64px; left: -18px; } .right-item3{ position: absolute; top: 218px; left: -18px; } .right-item3_tip{ font-size: 14px; letter-spacing: -1px; color: #919191; opacity: 0.6; width: 163px; margin-left: 13px; } .right-item4{ position: absolute; top: 456px; left: -18px; } .right-item5{ position: absolute; top: 552px; left: -18px; } .order{ background: no-repeat; background-size: 100% 100%; /* height: 42.92vw; */ width: 100vw; padding-bottom: 50px; } .order-title{ font-size: 44px; line-height: 206px; letter-spacing: -2px; color: #ffffff; width: 635px; margin: 0 auto; text-align: center; } .order-phone{ height: 501px; width: 1103px; background: no-repeat; margin: 0 auto; } .order-phone-text{ display: flex; flex-direction: row; justify-content: center; } .order-phone-text_item{ line-height: 82px; width: 240px; text-align: center; font-size: 24px; letter-spacing: -1px; color: #ffffff; } .order-phone-text_box{ height: 82px; width: 50px; } .marketing{ /* height: 54.43vw; */ width: 100vw; background: no-repeat; background-size: 100% 100%; padding-bottom: 150px; } .marketing-title-box{ padding: 70px 0 58px 0; } .marketing-title{ line-height: 102px; font-size: 44px; letter-spacing: -2px; color: #151341; text-align: center; } .marketing-sub{ font-size: 24px; line-height: 44px; letter-spacing: 0px; color: #919191; text-align: center; } .merchant{ /* height: 36.15vw; */ padding-bottom: 100px; width: 100vw; background: no-repeat; background-size: 100% 100%; } .merchant-title{ font-size: 44px; line-height: 236px; letter-spacing: -2px; color: #151341; text-align: center; } .merchant-main{ display: flex; flex-direction: row; justify-content: center; margin-top: 40px; } .merchant-main_item{ width: 257px; height: 262px; background-color: #212b33; border-radius: 20px; text-align: center; margin: 0 20px; } .merchant-main_item_title{ font-size: 24px; line-height: 47px; letter-spacing: -1px; color: #f27c4a; margin-top: 20px; } .merchant-main_item_divider{ background: ; width: 214px; height: 1px; } .merchant-main_item_content{ font-size: 18px; line-height: 27px; letter-spacing: -1px; color: #ffffff; text-align: left; } .merchant-main_item1_img{ background: no-repeat; width: 144px; height: 140px; margin: 0 auto; margin-top: -81px; } .merchant-main_item2_img{ background: no-repeat; width: 144px; height: 140px; margin: 0 auto; margin-top: -81px; } .merchant-main_item3_img{ background: no-repeat; background-position-y: -7px; width: 156px; height: 140px; margin: 0 auto; margin-top: -81px; } .merchant-main_item4_img{ background: no-repeat; background-position-y: -7px; width: 144px; height: 140px; margin: 0 auto; margin-top: -81px; } .merchant-main_item_content{ margin: 24px; } .they{ /* height: 45.16vw; */ padding-bottom: 80px; width: 100vw ; background: no-repeat; background-size: 100% 100%; } .they-title{ font-size: 44px; letter-spacing: -2px; color: #151341; text-align: center; padding-top: 90px; padding-bottom: 35px; box-sizing: border-box; } .they-main{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; width: 1193px; margin: 0 auto; } .they-main_item{ display: flex; justify-content: center; align-items: center; text-align: center; width: 259px; height: 70px; background: #ffffff; border: 1px solid #bfbfbf; margin:0 18px 40px 0; font-size: 22px; font-weight: 400; color: #151341; line-height: 28px; } /* .they-main_item:hover{ transition: all 0.4s; transform: scale(1.04); } */ /* .they-main_item1{ background: ; background-position: -33px -26px; } .they-main_item2{ background: ; background-position: -33px -26px; } .they-main_item3{ background: ; background-position: -33px -26px; } .they-main_item4{ background: ; background-position: -33px -26px; } .they-main_item5{ background: ; background-position: -33px -26px; } .they-main_item6{ background: ; background-position: -33px -26px; } .they-main_item7{ background: ; background-position: -33px -26px; } .they-main_item8{ background: ; background-position: -33px -26px; } */ .contact{ height: 21.82vw; width: 100vw; background: no-repeat; background-size: 100% 100%; position: relative; } .contact-pos{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; } .contact-code-box{ width: 139px; height: 139px; background: no-repeat; position: relative; display: inline-block; } .contact-code{ position: absolute; left: 50%; top: 50%; width: 109px; height: 109px; background-size:100% 100%; background-image: ; transform: translate(-50%,-50%); overflow: hidden; border-radius: 5px; } .contact-text-box{ display: inline-block; vertical-align:top; margin-left: 66px; display: flex; flex-direction: column; } .contact-text-box>div{ display: flex; } .contact-text{ font-size: 30px; line-height: 82px; letter-spacing: 4px; color: #f7fbfe; } .contact-btn{ cursor: pointer; width: 154px; height: 43px; border-radius: 10px; color: #ffffff; font-size: 17px; display: flex; justify-content: center; align-items: center; } .contact-btn_more{ background: no-repeat; } .contact-btn_download{ background: no-repeat; margin-left: 20px; } .fixed{ width: 182px; height: 428px; background-color: #ffffff; box-shadow: 3px 4px 37px 1px rgba(159, 163, 168, 0.35); border-radius: 10px 0 0 10px; position: fixed; top: 426px; right: 0; z-index: 2; overflow: hidden; } .fixed-code{ height: 237px; background-color: #f27c4a; color: #ffffff; text-align: center; position: relative; padding-top: 22px; } .fixed-code_img-box{ width: 137px; height: 137px; background-color: #ffffff; border-radius: 10px; position: relative; margin: 0 auto; margin-bottom: 14px; } .fixed-code_img{ position: absolute; left: 50%; top: 50%; width: 123px; height: 123px; background-size:100% 100%; background-image: ; transform: translate(-50%,-50%) } .fixed-code_text{ font-size: 20px; line-height: 25px; letter-spacing: 0px; color: #f7fbfe; } .fixed-phone_img{ margin: 30px auto; width: 37px; height: 37px; background-image: ; } .fixed-phone{ text-align: center; } .fixed-phone_text{ font-size: 20px; line-height: 30px; letter-spacing: 0px; color: #151341; } .slide-list__control{ display: flex; flex-direction: row; /* justify-content: center; */ width: 1092px; margin: auto; } .slider-list{ position: relative; width: 1194px; height: 534px; margin: auto; } .slider-list_item,.slider-list_item--selected { position: absolute; transition: opacity 1s; opacity: 0; width: 100%; height: 100%; display: flex; } .slider_desc{ width: 534px; font-size: 30px; line-height: 40px; letter-spacing: 0px; color: #151341; opacity: 0.9; margin: auto; } .slider_desc li{ margin-top: 50px; display: list-item; } .slider_desc li::marker{ font-size: 30px; content: ; } .slider_desc ul li{ margin-top: 0px; } .slider_desc_sub li{ font-size: 22px; color: #151341; opacity: 0.9; margin-left: 20px; padding-left: 10px; } .slider_desc_sub li::marker{ font-size: 22px; content: "ยท"; } .slider_img{ flex: 1; } .slider-list_item--selected { transition: opacity 1s; opacity: 1; } .slide-list__control-buttons, .slide-list__control-buttons--selected { cursor: pointer; width: 273px; height: 120px; margin-right: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: #fff; } .slide-list__control-buttons--selected { background-color: #f27c4a; } .swiper-index_text{ font-size: 28px; letter-spacing: 0px; color: #151341; } .swiper-index_number{ display: inline-block; width: 35px; height: 37px; margin:3px 20px 0 0; } .number1--selected{ background: no-repeat center; } .number2--selected{ background: no-repeat center; } .number3--selected{ background: no-repeat center; } .number4--selected{ background: no-repeat center; } .number1{ background: no-repeat center; } .number2{ background: no-repeat center; } .number3{ background: no-repeat center; } .number4{ background: no-repeat center; } .slider_img1{ width: 100%; height: 100%; margin: 100px 0 0 -50px; background: no-repeat; background-position: 86px 0; } .slider_img2{ width: 100%; height: 100%; margin: 80px 0 0 -46px; background: no-repeat; background-position: 110px -10px; } .slider_img3{ width: 100%; height: 100%; margin: 100px 0 0 -48px; background: no-repeat; } .slider_img4{ width: 100%; height: 100%; margin: 100px 0 0 -42px; background: no-repeat; }