@charset "UTF-8";

/*common*/
section {height: calc((var(--vh, 1vh) * 100)); max-height: 900px; position: relative; display: flex; align-items: center;}
section .inner2 {display: flex; align-items: center; justify-content: space-between; width: 100%;}
section .reverse {flex-direction: row-reverse;}
section .reverse .sect-l {margin-left: 110px; margin-right: 0; flex:none;}
section .reverse .sect-l .sect-tit-wrap {text-align: right;}
section .reverse .detail-btn {margin-left: auto; margin-right: 0;}
section .sect-l {margin-right: 60px; flex: none;}
.sect-tit {font-size: 60px; font-weight: 800;}
.sect-txt {font-size: 34px; color: #757575; line-height: 1.4; word-break: keep-all; margin-top: 20px;}
.sect-img img {width: 100%; max-width: fit-content; object-fit: cover; image-rendering: -webkit-optimize-contrast; transform: translateZ(0); backface-visibility: hidden;}
.detail-btn {width: 100%; max-width: 220px; height: 64px; border-radius: 32px; background: linear-gradient(0deg,  rgba(7,169,139,1) 0%, rgba(7,214,129,1) 80%); font-size: 24px; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 60px; transition: all .3s;}

/*sect0*/
.sect0 {display: flex; align-items: center; justify-content: space-between; height: calc((var(--vh, 1vh) * 100 - 80px)); padding: 80px 0 0;}
.sect0 .inner2 {align-items: end; overflow: hidden;}
.sect0 .sect0-l {margin-right: 130px;}
.sect0-tit1 p {font-size: 42px; font-weight: 500;}
.sect0-tit2 {display: flex; align-items: center; margin-top: 20px;}
.sect0-tit2 p {font-size: 70px; font-weight: 700; margin-left: 20px; flex: none;}
.sect0 .ico-scroll {margin-top: 150px; animation: bounce 2.6s infinite;}

.sect0-app {display: flex; margin-top: 78px;}
.sect0-app .sect0-app-btn {width: 220px; height: 64px; border-radius: 32px; background: linear-gradient(0deg,  rgba(7,169,139,1) 0%, rgba(7,214,129,1) 80%); display: flex; align-items: center; justify-content: center; transition: all .3s;}
.sect0-app .sect0-app-btn + .sect0-app-btn {margin-left: 30px;}
.sect0-app .sect0-app-btn:hover {background: linear-gradient(0deg,  rgba(7,169,139,1) 20%, rgba(7,214,129,1) 100%);}

/*sect1*/
.sect1 {background: url("../../../assets/images/user/sect1-bg.png"); background-repeat: no-repeat; background-size: cover;}

/*sect2*/
.sect2 {background-color: #F7F7F7;}

/*sect3*/
.sect3 {background: url("../../../assets/images/user/sect3-bg.png"); background-repeat: no-repeat; background-size: cover;}
.sect3 .sect-tit, .sect3 .sect-txt {color: #fff;}
.sect3 .detail-btn {background: linear-gradient(0deg, rgba(198,232,215,1) 0%, rgba(237,237,237,1) 100%); color: #07A98B;}

/*sect4*/
.sect4 {background: #E8FCF4;}
.sect4 .sect4-l {margin-right: 100px;}

/*sect5*/
.sect5 {background: url("../../../assets/images/user/sect5-bg.png"); background-repeat: no-repeat; background-size: cover;}
.sect5 .sect-tit, .sect5 .sect-txt {color: #fff;}
.sect5 .detail-btn {background: linear-gradient(0deg, rgba(198,232,218,1) 0%, rgba(237,237,237,1) 100%); color: #07A98B;}



@media screen and (min-width: 1921px) {

}

@media screen and (max-width: 1280px) {
  /*sect common*/
  section {height: 100% !important; max-height: 100%; padding: 150px 0 160px;}
  section .inner2 {flex-direction: column; align-items: center !important; justify-content: center;}
  section .sect-img {margin-top: 50px;}
  section .sect-l {width: 100%; margin: 0;}
  section .reverse .sect-l {margin: 0;}
  .sect-tit {font-size: 48px;}
  .sect-txt {font-size: 30px; margin-top: 16px;}
  .sect-txt br {display: none;}
  .detail-btn {margin-top: 30px; max-width: 186px; height: 54px; font-size: 22px;}
  
  section.sect0 {padding: 140px 0 0;}
  section.sect0 .sect-img {margin-top: 110px; z-index: 1;}
  .sect0-app .sect0-app-btn + .sect0-app-btn {margin-left: 24px;}
  .sect0-tit1 p {font-size: 32px;}
  .sect0-tit2 p {font-size: 56px;}
  .sect0-tit2 img {width: 100%; max-width: 80px;}
  .sect0 .sect0-l {margin: 0; text-align: center;}
  .sect0-tit2 {justify-content: center; margin-top: 10px;}
  .sect0-app {justify-content: center; margin-top: 45px;}
  .sect0 .ico-scroll {display: none;}
  .sect0 .sect-img {margin-right: -100px;}

  .sect1 {margin-top: -100px;}

  .sect2 {padding: 150px 0 130px;}
  .sect2 .sect-img {margin-top: -30px;}

  .sect4 .sect4-l {margin: 0;}

  .sect5 {padding-bottom: 40px;}
}

@media screen and (max-width: 768px) {
  section {padding: 90px 0;}
  .sect-tit {font-size: 34px;}
  .sect-txt {font-size: 22px;}
  .sect-txt br {display: block;}
  .detail-btn {max-width: 144px; height: 42px; font-size: 18px; margin-top: 20px;}

  section.sect0 {padding: 90px 0 0;}
  section.sect0 .sect-img {margin-top: 90px;}
  .sect0-tit1 p {font-size: 20px;}
  .sect0-tit2 p {font-size: 36px;}
  .sect0-tit2 img {max-width: 52px;}
  .sect0-app .sect0-app-btn {width: 100%; max-width: 122px; height: 35px;}
  .sect0-app .sect0-app-btn img {width: 100%; max-width: 90px;}
  .sect0-app .sect0-app-btn + .sect0-app-btn {margin-left: 16px;}
  .sect0 .sect-img {margin-right: -40px;}
  .sect0 .sect-img img {max-width: 308px;}

  .sect1 {margin-top: -60px;}

  .sect2 {padding: 90px 0 70px;}
  .sect2 .sect-img {margin-top: 0;}

  .sect5 {padding-bottom: 0;}
}

@media screen and (max-width: 320px) {
  .sect0-tit2 p {font-size: 28px;}
}