* { margin: 0; padding: 0; font-family: pingfang sc; } body { position: relative; } .bannervideo { display: none; position: fixed; width: 960px; left: 50vw; top: 50vh; transform: translate(-50%, -50%); z-index: 2; } video { width: 960px; } .close { height: 40px; background: #000; } .close .key { width: 36px; height: 36px; margin-top: 2px; margin-right: 2px; border: 50%; float: right; cursor: pointer; background: url(/uploads/image/lnimages/closed_normal.png); } @media screen and (max-width: 1670) { .center { overflow: hidden; } } .center { width: 1015px; margin: 0 auto; } .title { font-size: 50px; font-weight: 600; color: #1a1a1a; } .subtitle { font-size: 22px; font-weight: 400; color: #545454; line-height: 35px; margin-top: 27px; } @media screen and (min-width: 768px) and (max-width: 1665px) { .advantage { width: 100%; } .threestep { width: 100%; } } @media screen and (min-width: 1665px) { .advantage { width: 1665px; } .threestep { width: 1665px; } } .ad { padding-top: 165px; padding-bottom: 90px; background: rgba(252, 251, 252, 1); } .ad-flexbox { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .ad-flexbox-content-title { font-size: 62px; font-weight: 600; color: #1a1a1a; line-height: 72px; } .ad-flexbox-content-subtitle { margin-top: 44px; font-size: 25px; font-weight: normal; color: black; } .ad-flexbox-content-buttonarea { margin-top: 47px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .ad-flexbox-content-buttonarea-button { cursor: pointer; width: 144px; height: 46px; background: #ff6727; border-radius: 4px; line-height: 46px; font-size: 18px; font-weight: 500; color: #ffffff; margin-right: 17px; text-align: center; } .ad-flexbox-content-buttonarea-link { cursor: pointer; font-size: 16px; font-weight: 400; color: #ff6727; line-height: 46px; } .ad-flexbox-img { background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; height: 701px; width: 343px; position: relative; cursor: pointer; } .ad-flexbox-playbtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ad-flexbox-shadow { background-image: .png"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 553px; width: 671px; position: absolute; left: -74px; bottom: -272px; background-size: contain; } .livestreaming-content { background: rgba(255, 255, 255, 1); } .livestreaming-content .why { padding-top: 107px; } .livestreaming-content .why-flexbox { margin-top: 102px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .livestreaming-content .why-flexbox-border { border-top: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; box-sizing: border-box; padding-top: 54px; } .livestreaming-content .why-flexbox-item { width: 498px; height: 507px; box-sizing: border-box; background: #ffffff; } .livestreaming-content .why-flexbox-item-title { font-size: 30px; font-weight: 600; color: #151515; margin-left: 26px; } .livestreaming-content .why-flexbox-item-subtitle { font-size: 16px; font-weight: normal; color: #151515; line-height: 24px; margin-left: 26px; margin-top: 27px; padding-bottom: 75px; } .livestreaming-content .why-flexbox-item-img1 { width: 100%; height: 282px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 0 0 10px 10px; overflow: hidden; } .livestreaming-content .why-flexbox-item-img2 { width: 100%; height: 282px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 0 0 10px 10px; overflow: hidden; } .livestreaming-content .why-flexbox-item-img3 { width: 100%; height: 282px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 0 0 10px 10px; overflow: hidden; } .livestreaming-content .why-flexbox-item-img4 { width: 100%; height: 282px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 0 0 10px 10px; overflow: hidden; } .livestreaming-content .videoandapp { margin-top: 149px; padding-bottom: 165px; } .livestreaming-content .advantage { margin: 0 auto; background: rgba(248, 248, 248, 1); padding-top: 129px; } .livestreaming-content .advantage-title { font-size: 30px; font-weight: 600; } .livestreaming-content .advantage-title:nth-child(2) { margin-top: 88px; } .livestreaming-content .advantage-title:nth-child(4) { margin-top: 32px; } .livestreaming-content .advantage-subtitle { font-size: 20px; font-weight: 400; color: #151515; line-height: 64px; } .livestreaming-content .advantage-flexbox { display: flex; flex-direction: row; align-items: center; justify-content: space-between; align-items: start; } .livestreaming-content .advantage-flexbox-item { text-align: center; } .livestreaming-content .advantage-flexbox-item-text { font-size: 20px; font-weight: 400; color: #151515; line-height: 154px; } .livestreaming-content .advantage-flexbox-item-img1 { width: 444px; height: 444px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); } .livestreaming-content .advantage-flexbox-item-img2 { width: 208px; height: 444px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; background-size: contain; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); } .livestreaming-content .advantage-flexbox-item-img3 { width: 208px; height: 444px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; background-size: contain; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); } .livestreaming-content .advantage-flexbox-item-img4 { width: 14px; height: 12px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; margin-top: 216px; } .livestreaming-content .advantage-flexbox:last-child { margin-top: 75px; } .livestreaming-content .threestep { margin: 0 auto; background: rgba(248, 248, 248, 1); padding-top: 134px; padding-bottom: 180px; margin-bottom: 160px; } .livestreaming-content .threestep-flexbox { margin-top: 172px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; align-items: start; } .livestreaming-content .threestep-flexbox-text { margin-top: 26px; } .livestreaming-content .threestep-flexbox-text-title { font-size: 30px; font-weight: 400; color: #151515; line-height: 45px; } .livestreaming-content .threestep-flexbox-text-subtitle { margin-top: 50px; font-size: 16px; font-weight: normal; color: #151515; line-height: 28px; } .livestreaming-content .threestep-flexbox-img1 { width: 231px; height: 465px; border-radius: 5px; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); overflow: hidden; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .threestep-flexbox-img2 { width: 231px; height: 465px; border-radius: 5px; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); overflow: hidden; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .threestep-flexbox-img3 { width: 231px; height: 465px; border-radius: 5px; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); overflow: hidden; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .threestep-flexbox-img4 { width: 231px; height: 465px; border-radius: 5px; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); overflow: hidden; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .threestep-flexbox-img5 { width: 231px; height: 465px; border-radius: 5px; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); overflow: hidden; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .threestep-flexbox-img6 { width: 231px; height: 465px; border-radius: 5px; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); overflow: hidden; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .threestep-flexbox-img7 { width: 231px; height: 465px; border-radius: 5px; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); overflow: hidden; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .threestep-flexbox-img8 { width: 231px; height: 465px; border-radius: 5px; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); overflow: hidden; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .threestep-flexbox-img9 { width: 231px; height: 465px; border-radius: 5px; box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.06); overflow: hidden; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .threestep-flexbox:nth-child(2) { margin-top: 133px; } .livestreaming-content .they { padding-bottom: 164px; } .livestreaming-content .they-flexbox { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 66px; justify-content: space-around; align-items: start; } .livestreaming-content .they-flexbox-img1 { width: 280px; height: 227px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; flex: 0 0 auto; } .livestreaming-content .they-flexbox-img2 { width: 280px; height: 227px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; flex: 0 0 auto; } .livestreaming-content .they-flexbox-img3 { width: 280px; height: 227px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; flex: 0 0 auto; } .livestreaming-content .they-flexbox-text { margin-left: 55px; margin-top: 7px; } .livestreaming-content .they-flexbox-text-flexbox { display: flex; flex-direction: row; align-items: center; justify-content: space-between; justify-content: start; align-items: start; } .livestreaming-content .they-flexbox-text-name { font-size: 20px; font-weight: 600; color: #303849; line-height: 24px; padding-bottom: 28px; } .livestreaming-content .they-flexbox-text-group { font-size: 16px; font-weight: 400; color: #303849; line-height: 24px; width: 329px; } .livestreaming-content .they-flexbox-text-sale { font-size: 16px; font-weight: 400; color: #303849; } .livestreaming-content .they-flexbox-text-sale:nth-child(2) { width: 120px; } .livestreaming-content .they-flexbox-text-sale:nth-child(3) { margin-left: 28px; } .livestreaming-content .they-flexbox-text-description { color: #151515; line-height: 28px; font-size: 16px; margin-top: 20px; text-align: left; } .livestreaming-content .they-flexbox:nth-child(2) { margin-top: 112px; } .livestreaming-content .experience { margin-top: 70px; margin-bottom: 147px; width: 1015px; height: 299px; padding-top: 67px; padding-left: 116px; box-sizing: border-box; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 5px; } .livestreaming-content .experience-title { font-size: 30px; font-weight: 600; color: #ffffff; line-height: 45px; } .livestreaming-content .experience-subtitle { font-size: 16px; font-weight: 400; color: #ffffff; line-height: 24px; } .livestreaming-content .experience-btn { width: 191px; height: 50px; background: #ffffff; border-radius: 4px; line-height: 46px; font-size: 14px; font-weight: 500; color: #1a1a1a; text-align: center; border-radius: 25px; margin-top: 21px; cursor: pointer; } .livestreaming-content .experience-price { cursor: pointer; width: 112px; font-size: 14px; color: #fff000; line-height: 14px; padding-bottom: 6px; border-bottom: 1px solid #fff000; margin-top: 22px; } .livestreaming-content .service { margin-top: 87px; padding-bottom: 128px; } .livestreaming-content .service-flexbox { display: flex; flex-direction: row; align-items: center; justify-content: space-between; justify-content: start; } .livestreaming-content .service-flexbox-item { height: 120px; display: flex; flex-direction: column; justify-content: space-between; } .livestreaming-content .service-flexbox-item-img1 { width: 35px; height: 31px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .service-flexbox-item-img2 { width: 35px; height: 29px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .service-flexbox-item-img3 { width: 29px; height: 27px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .service-flexbox-item-img4 { width: 34px; height: 30px; background-image: ; background-repeat: no-repeat; background-size: cover; background-position: center; } .livestreaming-content .service-flexbox-item-text { margin-top: 35px; } .livestreaming-content .service-flexbox-item-text-title { font-size: 25px; font-weight: 400; color: #111a2e; line-height: 25px; } .livestreaming-content .service-flexbox-item-text-subtitle { margin-top: 14px; font-size: 16px; font-weight: normal; color: #111a2e; line-height: 16px; } .livestreaming-content .service-flexbox-item:nth-child(1) { margin-right: 77px; } .livestreaming-content .service-flexbox-item:nth-child(2) { margin-right: 119px; } .livestreaming-content .service-flexbox-item:nth-child(3) { margin-right: 99px; } .they-orange-font { color: #ff6727; font-size: 25px; font-weight: 600; line-height: 45px; }