@charset "UTF-8"; .lp-jumbotron { padding-bottom: 30px; overflow: hidden; background-color: #3ca0d7; } .lp-jumbotron-content { display: flex; position: relative; align-items: center; justify-content: center; max-width: 970px; margin: 0 auto; } .lp-jumbotron-content::before { position: absolute; top: -45px; left: -70px; width: 343px; height: 200px; background: url("../../img/landing_page/lp_wechat/lp_wechat_bg_01.png") no-repeat top center; background-size: contain; content: ""; } .lp-jumbotron-content::after { position: absolute; bottom: -180px; left: 370px; width: 343px; height: 307px; background: url("../../img/landing_page/lp_wechat/lp_wechat_bg_02.png") no-repeat top center; background-size: contain; content: ""; } .lp-jumbotron-body { max-width: 630px; padding: 30px 0; color: #fff; text-align: center; } .lp-jumbotron-title { z-index: 0; position: relative; margin-bottom: 25px; font-size: 51px; font-weight: normal; text-shadow: 2px 2px 2px #333; } .lp-jumbotron-title::before { z-index: -1; position: absolute; top: -15px; left: -30px; width: 76px; height: 76px; background: url("../../img/landing_page/lp_wechat/lp_wechat_bg_03.png") no-repeat top center; background-size: contain; content: ""; } .lp-jumbotron-title::after { z-index: -1; position: absolute; top: 45px; right: 25px; width: 29px; height: 29px; background: url("../../img/landing_page/lp_wechat/lp_wechat_bg_04.png") no-repeat top center; background-size: contain; content: ""; } .lp-jumbotron-text { font-size: 24px; } .lp-jumbotron-text .of-borderBottom-solid { padding-bottom: 4px; border-bottom: solid 4px #73ece1; } .lp-jumbotron-image { max-width: 367px; margin-top: -8px; } @media only screen and (max-width: 969px) { .lp-jumbotron { padding-bottom: calc((30 * 100vw) / 970); } .lp-jumbotron-content::before { top: calc((-45 * 100vw) / 970); left: calc((-70 * 100vw) / 970); width: calc((343 * 100vw) / 970); height: calc((200 * 100vw) / 970); } .lp-jumbotron-content::after { bottom: calc((-180 * 100vw) / 970); left: calc((370 * 100vw) / 970); width: calc((343 * 100vw) / 970); height: calc((307 * 100vw) / 970); } .lp-jumbotron-body { max-width: calc((630 * 100vw) / 970); padding: calc((30 * 100vw) / 970) 0; } .lp-jumbotron-title { margin-bottom: calc((25 * 100vw) / 970); font-size: calc((51 * 100vw) / 970); } .lp-jumbotron-title::before { top: calc((-15 * 100vw) / 970); left: calc((-30 * 100vw) / 970); width: calc((76 * 100vw) / 970); height: calc((76 * 100vw) / 970); } .lp-jumbotron-title::after { top: calc((45 * 100vw) / 970); right: calc((25 * 100vw) / 970); } .lp-jumbotron-text { font-size: calc((24 * 100vw) / 970); } .lp-jumbotron-image { max-width: calc((367 * 100vw) / 970); min-height: 0%; margin-top: calc((-8 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-jumbotron { padding: 20px; } .lp-jumbotron-content { flex-direction: column; max-width: inherit; } .lp-jumbotron-content::before { content: none; } .lp-jumbotron-content::after { content: none; } .lp-jumbotron-body { max-width: inherit; padding: 0; } .lp-jumbotron-title { margin-bottom: 15px; font-size: 35px; } .lp-jumbotron-title .lp-smallScreen-line-break { display: block; } .lp-jumbotron-title::before { content: none; } .lp-jumbotron-title::after { content: none; } .lp-jumbotron-text { font-size: 20px; } .lp-jumbotron-text .of-borderBottom-solid { padding-bottom: 1px; } .lp-jumbotron-text .lp-smallScreen-line-break { display: block; } .lp-jumbotron-image { max-width: inherit; } } .lp-media { display: flex; flex-direction: column; align-items: center; justify-content: center; } .lp-media.of-column-reverse { flex-direction: column-reverse; } .lp-media.of-primary { margin-right: -35px; } .lp-media-text { z-index: 1; min-width: 265px; margin: -60px 0 0; padding: 10px 32px; border-radius: 40px; background-color: #fff; font-size: 16px; text-align: center; } .lp-media-text .of-color-emphasis { display: block; color: #ea0437; } .lp-media-description { z-index: 1; margin-bottom: -30px; color: #fff; font-size: 24px; text-shadow: 2px 2px 2px #3ca0d7; } .lp-media-image { max-width: 350px; min-height: 0%; margin-bottom: 16px; } @media only screen and (max-width: 969px) { .lp-media.of-primary { margin-right: calc((-35 * 100vw) / 970); } .lp-media-text { min-width: calc((265 * 100vw) / 970); margin-top: calc((-60 * 100vw) / 970); padding: calc((10 * 100vw) / 970) calc((32 * 100vw) / 970); font-size: calc((16 * 100vw) / 970); } .lp-media-description { margin-bottom: calc((-30 * 100vw) / 970); font-size: calc((24 * 100vw) / 970); } .lp-media-image { max-width: calc((350 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-media.of-primary { margin-right: 0; } .lp-media-text { min-width: 260px; margin-top: -35px; padding: 10px 30px; font-size: 16px; } .lp-media-description { margin-bottom: -20px; font-size: 16px; text-shadow: 2px 2px 2px #3ca0d7; } .lp-media-image { max-width: 228px; margin-top: 0; } } .lp-section { padding: 50px 0 40px; text-align: center; } .lp-section-content { position: relative; max-width: 970px; margin: 0 auto; } .lp-section.of-primary { background-color: #fff; } .lp-section.of-secondary { background-color: #eee; } .lp-section.of-tertiary { background-color: #3ca0d7; } @media only screen and (max-width: 969px) { .lp-section { padding: calc((50 * 100vw) / 970) 20px calc((40 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-section { padding: 20px; } .lp-section.of-tertiary { padding-bottom: 40px; } .lp-section-content { max-width: inherit; } } .lp-listFlow { display: flex; justify-content: center; } .lp-listFlow > li { position: relative; width: 220px; min-height: 0%; margin-right: 30px; } .lp-listFlow > li:last-child { margin-right: 0; } .lp-listFlow > li:last-child::after { content: none; } .lp-listFlow > li::after { position: absolute; top: 220px; right: -15px; transform: translateY(-50%); border-top: solid 20px transparent; border-bottom: solid 20px transparent; border-left: solid 15px #73ece1; content: ""; } .lp-mediaFlow-body { margin-bottom: 20px; font-size: 24px; } .lp-mediaFlow-body > *:last-child { margin-bottom: 0; } .lp-mediaFlow-image { min-height: 0%; padding: 12px; border-radius: 12px; background-color: #73ece1; } @media only screen and (max-width: 969px) { .lp-listFlow { flex-direction: column; align-items: center; } .lp-listFlow > li { width: 100%; max-width: 320px; margin-right: 0; margin-bottom: calc((35 * 100vw) / 970); } .lp-listFlow > li:last-child { margin-bottom: 0; } .lp-listFlow > li::after { top: 100%; right: 50%; transform: translateX(50%); border-top: solid calc((20 * 100vw) / 970) #73ece1; border-right: solid calc((15 * 100vw) / 970) transparent; border-left: solid calc((15 * 100vw) / 970) transparent; } .lp-mediaFlow-body { margin-bottom: calc((20 * 100vw) / 970); font-size: calc((24 * 100vw) / 970); } .lp-mediaFlow-image { padding: 17px; } } @media only screen and (max-width: 640px) { .lp-listFlow > li { margin-right: 0; margin-bottom: 35px; } .lp-listFlow > li::after { top: 100%; right: 50%; transform: translateX(50%); border-top: solid 20px #73ece1; border-right: solid 15px transparent; border-left: solid 15px transparent; } .lp-mediaFlow-body { margin-bottom: 16px; font-size: 16px; } } .lp-layout-grid { display: flex; justify-content: center; } .lp-layout-grid.of-column-2 { margin-left: -150px; } .lp-layout-grid.of-column-2 .lp-layout-grid-column { width: 350px; min-height: 0%; margin-left: 150px; } .lp-headingLevel2 { margin-bottom: 40px; font-size: 36px; font-weight: normal; } @media only screen and (max-width: 969px) { .lp-layout-grid { flex-direction: column; align-items: center; } .lp-layout-grid.of-column-2 { margin-bottom: -40px; margin-left: 0; } .lp-layout-grid.of-column-2 .lp-layout-grid-column { width: auto; margin-left: 0; padding-bottom: 40px; } .lp-headingLevel2 { margin-bottom: calc((40 * 100vw) / 970); font-size: calc((36 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-headingLevel2 { margin-bottom: 20px; font-size: 24px; } } .lp-mediaOperation { display: flex; flex-direction: column; align-items: center; justify-content: center; } .lp-mediaOperation-body { margin-bottom: 20px; font-size: 24px; } .lp-mediaOperation-body > *:last-child { margin-bottom: 0; } .lp-mediaOperation-image { max-width: 350px; min-height: 0%; margin-bottom: 0; } @media only screen and (max-width: 969px) { .lp-mediaOperation-body { font-size: calc((24 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-mediaOperation-body { font-size: 16px; } } .lp-section.of-quaternary { margin-top: -190px; padding-top: 200px; background-color: #1a74d5; } @media only screen and (max-width: 969px) { .lp-section.of-quaternary { margin-top: calc((-190 * 100vw) / 970); padding-top: calc((200 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-section.of-quaternary { margin-top: -100px; padding-top: 120px; } } .lp-section.of-quinary { padding: 50px 20px 40px; background-color: #07866f; } @media only screen and (max-width: 969px) { .lp-section.of-quinary { padding: calc((50 * 100vw) / 970) 20px calc((40 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-section.of-quinary { padding: 20px; } } .lp-section-content.of-primary { max-width: 1010px; padding: 0 20px; } @media only screen and (max-width: 969px) { .lp-section-content.of-primary { padding: 0; } } .lp-section-content.of-primary > *:last-child { margin-bottom: 0; } .lp-layout-grid.of-primary { flex-wrap: wrap; justify-content: center; margin-top: -40px; margin-bottom: 42px; } @media only screen and (max-width: 969px) { .lp-layout-grid.of-primary { margin-bottom: calc((42 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-layout-grid.of-primary { margin-bottom: 33px; } } .lp-layout-grid.of-primary.of-column-2 { margin-left: -150px; } .lp-layout-grid.of-primary.of-column-2 .lp-layout-grid-column { width: 350px; min-height: 0%; margin-top: 40px; margin-left: 150px; } @media only screen and (max-width: 969px) { .lp-layout-grid.of-primary.of-column-2 .lp-layout-grid-column { width: auto; padding-bottom: 0; } } .lp-layout-grid.of-primary.of-column-2 .lp-layout-grid-column > *:last-child { margin-bottom: 0; } .lp-layout-grid.of-borderBottom-solid { position: relative; padding-bottom: 40px; } .lp-layout-grid.of-borderBottom-solid::before { position: absolute; right: 0; bottom: 0; width: calc(100% - 150px); border-bottom: 1px solid #c8c8c8; content: ""; } .lp-jumbotron.of-primary { background-color: #1a74d5; } .lp-jumbotron.of-primary .lp-jumbotron-content { max-width: 1010px; padding: 0 20px; } @media only screen and (max-width: 969px) { .lp-jumbotron.of-primary .lp-jumbotron-content { padding: 0; } } .lp-jumbotron.of-primary .lp-jumbotron-content::before { top: -69px; left: 0; background: url("../../img/landing_page/lp_wechat/lp_wechat_bg_05.png") no-repeat top center; background-size: contain; } @media only screen and (max-width: 969px) { .lp-jumbotron.of-primary .lp-jumbotron-content::before { top: calc((-69 * 100vw) / 970); left: calc((0 * 100vw) / 970); } } .lp-jumbotron.of-primary .lp-jumbotron-content::after { bottom: -200px; left: 392px; background: url("../../img/landing_page/lp_wechat/lp_wechat_bg_06.png") no-repeat top center; background-size: contain; } @media only screen and (max-width: 969px) { .lp-jumbotron.of-primary .lp-jumbotron-content::after { bottom: calc((-200 * 100vw) / 970); left: calc((392 * 100vw) / 970); } } .lp-jumbotron.of-primary .lp-jumbotron-title { margin-bottom: 14px; font-size: 4.8rem; } @media only screen and (max-width: 969px) { .lp-jumbotron.of-primary .lp-jumbotron-title { font-size: calc((48 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-jumbotron.of-primary .lp-jumbotron-title { font-size: 3.3rem; } } .lp-jumbotron.of-primary .lp-jumbotron-title::before { top: -48px; left: -56px; background: url("../../img/landing_page/lp_wechat/lp_wechat_bg_07.png") no-repeat top center; background-size: contain; } @media only screen and (max-width: 969px) { .lp-jumbotron.of-primary .lp-jumbotron-title::before { top: calc((-48 * 100vw) / 970); left: calc((-56 * 100vw) / 970); } } .lp-jumbotron.of-primary .lp-jumbotron-title::after { top: 50px; right: -7px; background: url("../../img/landing_page/lp_wechat/lp_wechat_bg_08.png") no-repeat top center; background-size: contain; } @media only screen and (max-width: 969px) { .lp-jumbotron.of-primary .lp-jumbotron-title::after { top: calc((50 * 100vw) / 970); right: calc((-7 * 100vw) / 970); } } .lp-jumbotron.of-primary .lp-jumbotron-body { padding: 110px 0 76px; } @media only screen and (max-width: 969px) { .lp-jumbotron.of-primary .lp-jumbotron-body { padding: calc((110 * 100vw) / 970) 0 calc((76 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-jumbotron.of-primary .lp-jumbotron-body { padding: 0; } } .lp-jumbotron.of-primary .lp-jumbotron-body > *:last-child { margin-bottom: 0; } .lp-jumbotron.of-primary .lp-jumbotron-image { margin-left: 30px; } @media only screen and (max-width: 640px) { .lp-jumbotron.of-primary .lp-jumbotron-image { margin-top: 16px; margin-left: 0; } } .lp-jumbotron.of-secondary { padding: 0; background-color: #07866f; } .lp-jumbotron.of-secondary .lp-jumbotron-content { max-width: 1010px; padding: 36px 20px; } @media only screen and (max-width: 640px) { .lp-jumbotron.of-secondary .lp-jumbotron-content { padding: 16px 20px 20px; } } .lp-jumbotron.of-secondary .lp-jumbotron-content::before { background: url("../../img/landing_page/lp_wechat_qr_01126109/lp_wechat_qr_01126109_bg_01.png") no-repeat top center; background-size: contain; } .lp-jumbotron.of-secondary .lp-jumbotron-content::after { bottom: -210px; left: 350px; background: url("../../img/landing_page/lp_wechat_qr_01126109/lp_wechat_qr_01126109_bg_02.png") no-repeat top center; background-size: contain; } @media only screen and (max-width: 969px) { .lp-jumbotron.of-secondary .lp-jumbotron-content::after { bottom: calc((-210 * 100vw) / 970); left: calc((350 * 100vw) / 970); } } .lp-jumbotron.of-secondary .lp-jumbotron-title { font-size: 48px; line-height: 1.29; text-shadow: 2px 2px 2px #02392f; } @media only screen and (max-width: 969px) { .lp-jumbotron.of-secondary .lp-jumbotron-title { font-size: calc((48 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-jumbotron.of-secondary .lp-jumbotron-title { font-size: 35px; } } .lp-jumbotron.of-secondary .lp-jumbotron-title::before { background: url("../../img/landing_page/lp_wechat_qr_01126109/lp_wechat_qr_01126109_bg_03.png") no-repeat top center; background-size: contain; } .lp-jumbotron.of-secondary .lp-jumbotron-title::after { top: 70px; right: -25px; background: url("../../img/landing_page/lp_wechat_qr_01126109/lp_wechat_qr_01126109_bg_04.png") no-repeat top center; background-size: contain; } @media only screen and (max-width: 969px) { .lp-jumbotron.of-secondary .lp-jumbotron-title::after { top: calc((70 * 100vw) / 970); right: calc((-25 * 100vw) / 970); } } .lp-jumbotron.of-secondary .lp-jumbotron-text { margin-bottom: 32px; font-size: 2.2rem; } @media only screen and (max-width: 969px) { .lp-jumbotron.of-secondary .lp-jumbotron-text { font-size: calc((22 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-jumbotron.of-secondary .lp-jumbotron-text { font-size: 20px; } } .lp-jumbotron.of-secondary .lp-jumbotron-body { width: 100%; color: #fff; } @media only screen and (max-width: 640px) { .lp-jumbotron.of-secondary .lp-jumbotron-body { padding: 0; } } .lp-jumbotron.of-secondary .lp-jumbotron-body > *:last-child { margin-bottom: 0; } .lp-jumbotron.of-secondary .lp-jumbotron-image { width: 100%; max-width: 300px; margin-top: 0; margin-left: 32px; } @media only screen and (max-width: 640px) { .lp-jumbotron.of-secondary .lp-jumbotron-image { margin: 16px 0 0; } } .lp-figure { margin-bottom: 32px; } .lp-figure > *:last-child { margin-bottom: 0; } .lp-card { margin-bottom: 32px; padding: 48px 20px 40px; border-radius: 16px; background-color: #fff; } @media only screen and (max-width: 969px) { .lp-card { padding: calc((48 * 100vw) / 970) 20px calc((40 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-card { padding: 30px 20px 20px; } } .lp-card.of-shadow { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .lp-card > *:last-child { margin-bottom: 0; } .lp-headingLevel2.of-primary { position: relative; margin-bottom: 70px; font-size: 2.8rem; } @media only screen and (max-width: 969px) { .lp-headingLevel2.of-primary { margin-bottom: calc((70 * 100vw) / 970); font-size: calc((28 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-headingLevel2.of-primary { margin-bottom: 46px; font-size: 2rem; } } .lp-headingLevel2.of-primary::before { position: absolute; bottom: -15px; left: 50%; width: 60px; height: 4px; transform: translate(-50%, 50%); background-color: #ccc; content: ""; } .lp-headingLevel3 { margin-bottom: 40px; font-size: 3.6rem; font-weight: normal; } @media only screen and (max-width: 969px) { .lp-headingLevel3 { margin-bottom: calc((40 * 100vw) / 970); font-size: calc((36 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-headingLevel3 { margin-bottom: 18px; font-size: 2.4rem; } } .lp-media.of-secondary .lp-media-text { margin: -50px 0 0; } @media only screen and (max-width: 969px) { .lp-media.of-secondary .lp-media-text { margin: 0; } } .lp-mediaPoint { display: flex; flex-direction: column; } @media only screen and (max-width: 640px) { .lp-mediaPoint { padding: 0 7px; } } .lp-mediaPoint-header { margin-bottom: 26px; } @media only screen and (max-width: 969px) { .lp-mediaPoint-header { margin-bottom: calc((26 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-mediaPoint-header { margin-bottom: 10px; } } .lp-mediaPoint-header > *:last-child { margin-bottom: 0; } .lp-mediaPoint-title { margin-bottom: 26px; font-size: 1.8rem; font-weight: normal; } .lp-mediaPoint-text { margin-bottom: 26px; font-size: 1.6rem; } @media only screen and (max-width: 969px) { .lp-mediaPoint-text { margin-bottom: calc((26 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-mediaPoint-text { margin-bottom: 20px; } } .lp-mediaPoint-body { order: 1; } @media only screen and (max-width: 640px) { .lp-mediaPoint-body { order: inherit; } } .lp-mediaPoint-body > *:last-child { margin-bottom: 0; } .lp-mediaPoint-image { min-height: 0%; margin-bottom: 18px; padding: 10px; border-radius: 12px; background-color: #baecdc; } @media only screen and (max-width: 640px) { .lp-mediaPoint-image { width: 100%; max-width: 320px; margin: 18px auto 0; } } .lp-mediaPoint-image > img { width: 100%; } .lp-mediaPoint-image > *:last-child { margin-bottom: 0; } .lp-media-description.of-primary { margin-bottom: 12px; text-shadow: none; } .lp-media-description.of-secondary { margin-bottom: 16px; color: #fff; text-shadow: none; } .lp-mediaOperation.of-primary { flex-direction: column-reverse; margin-bottom: 32px; } @media only screen and (max-width: 969px) { .lp-mediaOperation.of-primary { flex-direction: column; } } .lp-mediaOperation.of-primary .lp-mediaOperation-body { margin: 0; } .lp-mediaOperation.of-primary .lp-mediaOperation-body > *:last-child { margin-bottom: 0; } .lp-mediaOperation.of-primary .lp-mediaOperation-image { margin-bottom: 16px; } @media only screen and (max-width: 969px) { .lp-mediaOperation.of-primary .lp-mediaOperation-image { margin: 16px 0 0; } } .lp-listPoint { display: flex; flex-wrap: wrap; justify-content: center; margin: -48px 0 32px -17px; } .lp-listPoint-content { width: 100%; max-width: calc(238px + 17px); min-height: 0%; margin-top: 48px; padding-left: 17px; } @media only screen and (max-width: 640px) { .lp-listPoint-content { width: 100%; max-width: 100%; } } .lp-listPoint-content.of-primary { max-width: calc(460px + 17px); } @media only screen and (max-width: 640px) { .lp-listPoint-content.of-primary { width: 100%; max-width: 100%; } } .lp-stepImage { display: flex; flex-wrap: wrap; justify-content: center; margin: -12px 0 16px -6px; } @media only screen and (max-width: 640px) { .lp-stepImage { display: block; margin: -40px 0 16px -6px; } } .lp-stepImage > li { position: relative; max-width: 222px; margin-top: 12px; padding-left: 6px; } @media only screen and (max-width: 640px) { .lp-stepImage > li { max-width: 100%; margin-top: 40px; } } .lp-stepImage > li + li::before { position: absolute; top: 50%; left: -14px; width: 31px; height: 35px; transform: translateY(-50%); background: url("../../img/landing_page/lp_wechat_qr_01126109/lp_wechat_qr_01126109_bg_05.png") no-repeat top center; background-size: contain; content: ""; } @media only screen and (max-width: 640px) { .lp-stepImage > li + li::before { top: -37px; left: calc(50% + 3px); transform: translate(-50%, 0) rotate(90deg); } } .lp-stepImage > li > img { width: 100%; } .lp-utility-color-primary { color: #ea0437; } .lp-utility-color-secondary { color: #136acd; } .section { margin-bottom: 0; } .prd-utility-marginBottom-6 { margin-bottom: 0; }