.main .sec1 {height:100vh; background:url('../img/main_img.jpg')no-repeat center; background-size:cover; text-align: center; position: relative;}
.main .sec1 .box {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:100%;}
.main .sec1 h3 {font-size:48px; color:#fff; font-weight:500;}
.main .sec1 img {margin-top:33px; }


.main .sec1 .scroll-downs {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translate(-50%,0);
  width :23px;
  height: 39px;
}
.main .sec1 .mousey {
  width: 100%;
  height: 35px;
  border: 1px solid #fff;
  border-radius: 25px;
  opacity: 1;
  box-sizing: content-box;
}
.main .sec1 .scroller {
  width: 4px;
  height: 6px;
  border-radius: 100px;
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
  position: absolute;
  left:49%;
  top:7px;
  transform: translate(-50%,0);
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(8px); opacity: 0;}
}

.main .sec1 .scroll-downs span {position: absolute; left:50%; bottom:-18px; font-size:10px; color:#fff; width:80px; transform: translate(-50%,0); font-weight:100; letter-spacing: .8px;}




.wid {max-width:1260px; margin:0 auto ;padding:0 20px;}


.main .sec2 {padding:150px 0;}
.main .sec2 h2 {font-size:48px; color:#2B2E33; font-weight:800; line-height:1.3em; }
.main .sec2 .box {background:url('../img/sec2_img.png')no-repeat bottom right #F7F8FA; border-radius:20px; margin-top:80px; padding:105px 85px; }
.main .sec2 .box h3 {font-size:32px; color:#2B2E33; line-height: 1.25em;}
.main .sec2 .box p {margin-top:30px; font-size:20px; color:#676779; line-height:1.65em; font-weight:400;}
.main .sec2 .box button {margin-top:35px; height:54px; background:#5E318F; color:#fff; font-size:16px; padding:0 25px; border:none; border-radius:30px; transition: .3s;}
.main .sec2 button:hover {background:#965ED4;}






.main .sec3 {padding:220px 0; text-align: center; background:url('../img/sec3_img.jpg')no-repeat center; background-size:cover;}
.main .sec3 h2 {font-size:48px; color:#fff; line-height: 1.25em;}
.main .sec3 h2 br {display: none;}
.main .sec3 p {margin-top:25px; font-size:20px; color:#fff; line-height:1.65em; font-weight:200;}
.main .sec3 button {margin-top:40px; height:54px; background:#5E318F; color:#fff; font-size:16px; padding:0 25px; border:none; border-radius:30px; transition: .3s;}
.main .sec3 button:hover {background:#965ED4;}





.main .sec4 {padding:150px 0 120px 0;}
.main .sec4 h2 {font-size:48px; color:#2B2E33; font-weight:800; line-height:1.3em; }
.main .sec4 ul {margin-top:80px;}
.main .sec4 ul:after {content:''; clear:both; display: table;}
.main .sec4 ul li {float:left; width:calc((100% - 96px) / 4); margin-right:32px; height:250px; background:#F7F8FA; border-radius:20px; padding:28px 26px; margin-bottom:32px; cursor: pointer; transition: .5s;}
.main .sec4 ul li:nth-child(4n) {margin-right:0;}
.main .sec4 ul li h3 {font-size:20px; color:#2b2e33; font-weight:600; margin-top:20px;}
.main .sec4 ul li h3 span {display: inline-block; width:100%; font-size:16px; font-weight:400;}
.main .sec4 ul li p {margin-top:18px; font-size:14px; color:#676779; font-weight:300; line-height:1.4em;}
.main .sec4 ul li:hover {background:#5E318F;}
.main .sec4 ul li:hover h3, .main .sec4 ul li:hover p {color:#fff;}


.main .sec5 {padding:80px 0 80px 0 ; background:#5E318F;}
.main .sec5 .wid {position: relative;}
.main .sec5 h2 {font-size:36px; color:#fff; line-height:1.3em; font-weight:600;}
.main .sec5 button {position: absolute; right:0; top:50%; transform: translate(0,-50%); height:54px; padding:0 30px; font-size:16px; color:#5E318F; background:#fff; border:none; border-radius:50px; font-weight:700; transition: .3s;}
.main .sec5 button img {margin-left:10px; margin-top:-3px; }
.main .sec5 button:hover {background:#965ED4; color:#fff; transition: .3s;}
.main .sec5 button:hover img {filter: brightness(100);  transition: .3s;}








@media screen and (max-width:1200px) {
  .main .sec1 h3 {font-size:35px;}
  .main .sec1 img {width:300px;}

  .main .sec2 {padding:120px 0;}
  .main .sec2 h2 {font-size:35px;}
  .main .sec2 .box {margin-top:60px; padding:80px 60px; background-size:480px; background-position: bottom right -40px;}
  .main .sec2 .box h3 {font-size:28px;}
  .main .sec2 .box p {font-size:18px;}

  .main .sec3 {padding:160px 0;}
  .main .sec3 h2 {font-size:35px;}
  .main .sec3 p {font-size:18px; padding:0 40px;}
  .main .sec3 p br {display: none;}


  .main .sec4 h2 {font-size:35px;}
  .main .sec4 ul li {width:calc((100% - 64px) / 3);}
  .main .sec4 ul li:nth-child(4n) {margin-right:32px;}
  .main .sec4 ul li:nth-child(3n) {margin-right:0;}


  .main .sec5 button {right:25px;}
}

@media screen and (max-width:900px) {
  .main .sec2 .box p {margin-top:25px;}
  .main .sec2 .box {background-size:320px; padding:57px 60px;}

  .main .sec4 ul li {width:calc((100% - 32px) / 2);}
  .main .sec4 ul li:nth-child(3n) {margin-right:32px;}
  .main .sec4 ul li:nth-child(2n) {margin-right:0;}
}


@media screen and (max-width:767px) {
  .main .sec1 .scroll-downs {bottom:50px;}
  .main .sec1 h3 {font-size:20px;}
  .main .sec1 img {width:200px; margin-top:20px;}


  .main .sec2 {padding:60px 0;}
  .main .sec2 h2 {font-size:25px;}
  .main .sec2 .box {margin-top:30px; padding:33px 30px 160px 30px; background-size:260px;}  
  .main .sec2 .box h3 {font-size:20px;}
  .main .sec2 .box p {font-size:14px;}
  .main .sec2 .box p br {display: none;}
  .main .sec2 .box button {height:46px; font-size:14px;}


  .main .sec3 {padding:60px 0;}
  .main .sec3 h2 {font-size:25px; line-height:1.4em;}
  .main .sec3 h2 br {display: block;}
  .main .sec3 p {font-size:14px; padding:0 25px;}
  .main .sec3 button {height:46px; font-size:14px; margin-top:35px;}


  .main .sec4 {padding:60px 0;}
  .main .sec4 h2 {font-size:25px;}
  .main .sec4 ul {margin-top:30px;}
  .main .sec4 ul li {width:100%; margin-right:0; margin-bottom:15px; height:auto;}



  .main .sec5 {padding:60px 5px;}
  .main .sec5 h2 {font-size:30px;}
  .main .sec5 button {position: relative; right:0; top:0; transform: initial; margin-top:30px; height:46px; font-size:14px;}
  .main .sec5 button img {margin-top:-2px;}

  .main .sec1 .scroller {left:45%;}
}