body { margin: 0; min-width: 1190px; line-height: 1; } h1, h2, h3, h4, h5, h6 { margin: 0; } a { text-decoration: none; } .center-area { margin: 0 auto; width: 1190px; } .hide { display: none; } .color-w { color: #ffffff; } .color-p { color: #00a95f; } .color-6 { color: #666666; } .flex { display: flex; } .flex-jbetween { justify-content: space-between; } .flex-acenter { align-items: center; } .card { background-color: #fff; border-radius: 20px; box-shadow: 0 4px 16px #00000020; border: 4px solid #fff; } .btn-next-page { width: 80px; height: 30px; background-image: ; background-repeat: no-repeat; background-position: center; position: absolute; left: calc(50% - 40px); bottom: 76px; cursor: pointer; z-index: 1; } nav { position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 10; } nav.white{ background-color: #fff; box-shadow: 0 3px 10px #00000020; } nav .center-area { height: 100%; } .nav-title { flex: auto; margin-left: 26px; color: #fff; font-size: 16px; } nav.white .nav-title{ color: #666; } .nav-logo { width: 130px; height: 42px; background-image: ; background-size: cover; } nav.white .nav-logo{ background-image: ; } .nav-tel { padding-left: 28px; height: 18px; line-height: 18px; font-size: 16px; color: #fff; background-image: ; background-size: 18px 18px; background-position: 0 0; background-repeat: no-repeat; margin-right: 24px; } nav.white .nav-tel{ color: #666; background-image: ; } .nav-btn-contact { width: 158px; height: 48px; border: 1px solid #fff; border-radius: 6px; text-align: center; line-height: 48px; font-size: 18px; color: #fff; } .nav-btn-contact:hover{ background-color: #00000020; } nav.white .nav-btn-contact{ border: 1px solid #ff6727; background-color: #ff6727; } nav.white .nav-btn-contact:hover{ border: 1px solid #fc5d19; background-color: #fc5d19; } .nav-qq { padding-left: 25px; height: 18px; line-height: 18px; font-size: 16px; color: #fff; background-image: ; background-size: 15px 18px; background-position: 0 0; background-repeat: no-repeat; margin-right: 40px; } nav.white .nav-qq{ color: #666; background-image: ; } header { height: 1000px; background-image: ; background-size: cover; background-position: center; position: relative; } .header-content { width: 960px; padding-top: 234px; margin: 0 auto; } .header-title { font-size: 60px; font-weight: bold; color: #fff; line-height: 80px; } .header-btn-video-play { width: 100px; height: 100px; margin: 44px 71px; background-image: ; background-size: contain; background-repeat: no-repeat; cursor: pointer; } .header-btn-contact { width: 240px; height: 62px; background-color: #00a95f; font-size: 22px; color: #ffffff; line-height: 62px; text-align: center; } .header-btn-contact:hover { background-color: #007743; } .header-sketch { padding-left: 56px; background-image: ; background-size: 44px 45px; background-repeat: no-repeat; font-size: 18px; color: #00a95f; line-height: 24px; margin-top: 29px; } section { background-color: #f1f2f5; position: relative; } .section-1 { height: 1509px; } .section-1 .center-area { width: 1000px; padding-top: 63px; } .section-title { padding-top: 41px; background-image: ; background-size: 34px 22px; background-position: center 0; background-repeat: no-repeat; text-align: center; font-size: 42px; font-weight: bold; color: #00a95f; line-height: 1; } .section-subtitle { text-align: center; margin-top: 35px; font-size: 18px; color: #666666; line-height: 1; } .show-area-1 { display: flex; justify-content: center; } .show-area-1 .block { width: 220px; display: flex; flex-direction: column; align-items: center; margin-top: 90px; position: relative; } .show-area-1 .block:not(:last-child)::after { content: ""; display: block; width: 144px; height: 22px; background-image: ; background-size: contain; position: absolute; top: 43px; right: -72px; z-index: 1; } .show-area-1 .top { width: 94px; height: 108px; background-image: ; background-size: contain; line-height: 108px; text-align: center; font-size: 20px; font-weight: bold; color: #ffffff; position: relative; z-index: 2; } .show-area-1 .desc { font-size: 18px; color: #666666; line-height: 22px; text-align: center; margin-top: 34px; } .show-area-2 { margin-top: 75px; display: flex; height: 760px; } .show-area-2 .left { flex: none; width: 440px; height: 100%; background-color: #f1f2f8; border-radius: 16px 0 0 20px; background-image: ; background-repeat: no-repeat; background-size: 356px 674px; background-position: center 80px; } .show-area-2 .right { padding-left: 60px; padding-right: 80px; padding-top: 120px; } .show-area-2 .title { font-size: 38px; font-weight: bold; color: #00a95f; line-height: 1; } .show-area-2 .subtitle { margin-top: 26px; } .show-area-2 .subtitle-block { width: 36px; height: 40px; padding: 2px 6px 6px; border: 1px solid #00aa5f; text-align: center; font-size: 18px; color: #00a95f; line-height: 22px; border-radius: 6px; } .show-area-2 .subtitle-price { font-size: 46px; font-weight: bold; color: #00a95f; line-height: 1; margin-left: 16px; vertical-align: text-bottom; } .show-area-2 .subtitle2 { font-size: 24px; color: #666666; margin-top: 22px; } .show-area-2 .other-1 { margin-top: 52px; padding-left: 47px; background-image: ; background-size: 41px 41px; background-repeat: no-repeat; background-position: 0 2px; } .show-area-2 .other-1-inner { border-top: 1px solid #00a95f; padding-top: 22px; padding-bottom: 14px; font-size: 20px; font-weight: bold; color: #00a95f; } .show-area-2 .other-2 { padding-left: 36px; padding-bottom: 14px; border-bottom: 1px solid #00a95f; } .show-area-2 .other-2-line { font-size: 18px; color: #666666; line-height: 36px; } .show-area-2 .other-2-line::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: #00a95f; vertical-align: middle; margin-right: 8px; } .show-area-2 .other-3 { display: flex; flex-wrap: wrap; margin-top: 58px; } .show-area-2 .other-3-item { width: 122px; height: 32px; border: 1px solid #bcdcce; border-radius: 5px; margin-right: 10px; margin-bottom: 14px; font-size: 15px; color: #00a95f; line-height: 32px; text-align: center; } .section-2 { height: 1017px; } .section-2 .center-area { width: 1158px; height: 688px; background-image: ; background-size: 100% 100%; padding-bottom: 40px; } .section-2 .section-title { transform: translatey(-8px); } .show-area-3 { margin-top: 56px; display: flex; justify-content: center; } .show-area-3 .card { width: 480px; } .show-area-3 .card-image { width: 100%; height: 340px; background-color: #f5f6fb; border-radius: 17px 17px 0 0; } .show-area-3 .card-image1 { background-image: ; background-size: 393px 290px; background-repeat: no-repeat; background-position: 40px 20px; } .show-area-3 .card-image2 { background-image: ; background-size: 408px 243px; background-repeat: no-repeat; background-position: 50px 60px; } .show-area-3 .card:first-child { margin-right: 30px; } .show-area-3 .part-1 { padding: 40px 0 30px 60px; } .show-area-3 .part-1-title { font-size: 24px; font-weight: bold; color: #00a95f; } .show-area-3 .part-1-content{ margin-top: 22px; font-size: 18px; color: #666666; line-height: 24px; } .section-3 { height: 1180px; background-image: ; background-size: cover; background-position: center; } .section-3 .center-area{ padding-top: 87px; } .show-area-4{ width: 100%; display: flex; justify-content: center; margin-top: 73px; } .show-area-4 .card{ width: 310px; border: none; overflow: hidden; background-size: contain; background-repeat: no-repeat; padding-top: 550px; } .show-area-4 .card:not(:last-child){ margin-right: 35px; } .show-area-4 .card.card-image1{ background-image: ; } .show-area-4 .card.card-image2{ background-image: ; } .show-area-4 .card.card-image3{ background-image: ; } .show-area-4 .card-content{ padding:40px 0 50px 37px; } .show-area-4 .card-content::before{ content: ""; display: block; width: 18px; height: 4px; background-color: #00a95f; margin-left: 3px; } .show-area-4 .card-title{ padding-top: 20px; font-size: 24px; font-weight: bold; color: #00a95f; line-height: 30px; } .show-area-4 .card-desc{ font-size: 16px; color: #666666; line-height: 24px; margin-top: 25px; } .section-4 { height: 984px; padding-top: 197px; } .section-4 .center-area{ width: 1087px; height: 688px; background-image: ,; background-size: 180px 121px,100% 100%; background-position: 128px 135px,0 0; background-repeat: no-repeat,no-repeat; position: relative; } .section-4 .image{ position: absolute; width: 386px; height: 731px; background-image: ; background-size: contain; top: 24px; right: 68px; } .section-4 .section-title{ text-align: left; padding-left: 127px; background-position: 68px 50px; } .section-4 .section-subtitle{ text-align: left; font-size: 24px; font-weight: bold; color: #00a95f; line-height: 30px; padding-left: 127px; margin-top: 259px; } .section-4 .section-text{ padding-left: 127px; font-size: 18px; color: #666666; line-height: 30px; margin-top: 31px; } .section-5 { height: 1084px; background-image: ; background-size: cover; background-position: center 0; padding-top: 98px; position: relative; } .section-5 .center-area{ width: 844px; padding-top: 120px; position: relative; } .section-5 .image{ position: absolute; width: 441px; height: 852px; background-image: ; background-size: contain; background-repeat: no-repeat; top: 0; left: -94px; } .show-area-5{ display: flex; flex-direction: column; align-items: flex-end; } .show-area-5 .title{ font-size: 80px; font-weight: bold; color: #00a95f; position: relative; } .show-area-5 .title::before{ content: ""; display: block; width: 146px; height: 22px; background-image: ; background-size: contain; position: absolute; top: 30px; left: -161px; } .show-area-5 .subtitle{ font-size: 60px; color: #ffffff; line-height: 66px; margin-top: 42px; } .show-area-5 .header-btn-contact{ margin-top: 113px; } .show-area-5 .desc{ width: 240px; font-size: 16px; color: #00a95f; margin-top: 16px; text-align: center; } .video-wrapper{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #00000020; } .section-1 .btn-next-page{ bottom: 120px; } .section-2 .btn-next-page{ bottom: 180px; } .section-3 .btn-next-page{ bottom: -150px; } .section-4 .btn-next-page{ bottom: 150px; } .btn-back-top{ width: 40px; height: 40px; background-image: ; background-position: center; background-repeat: no-repeat; position: fixed; bottom: 100px; right: calc(50% - 600px); cursor: pointer; display: none; } .btn-back-top.show{ display: block; }