/* header */
.header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 110;
  width: 100%;
  background-color: #fff;
  padding: 10px 20px;  
}
.header__wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-logo{
  display: block;
  width: 135px;
}
.header-logo img{width: 100%;}
.header-nav{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 29px;
  background-color: #ECEAFF;
  border-radius: 10px;
}
.header-nav ul{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.header-nav ul li a{
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.43;
  color: #323232;
}
.header-nav ul li a:hover{color: #6228FF;}
.mob-menu{display: none;}
@media only screen and (max-width : 1023px){
  .header-logo{width: 120px;}
  .header-nav{
    padding: 12px 20px;
    position: static;
    transform: none;
  }
  .header-nav ul{gap: 10px;}
  .header__wrap .btn-3{display: none;}
}
@media only screen and (max-width : 767px){
  .header{padding: 6px;}
  .header__wrap{
    padding: 16px 10px;
    border-radius: 10px;
    background-color: #ECEAFF;
  }
  .header-logo{width: 120px;}
  .burger{
    width: 21px;
    height: 16px;
  }
  
  .mob-menu{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-direction: column;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding: 60px 16px 16px;
    overflow-y: auto;
    background-color: #fff;
    transform: translateY(-110%);
    transition: transform .25s linear;
  }
  .mob-menu.show{transform: translateY(0);}
  .mob-menu-close{
    width: 18px;
    height: 18px;
    position: absolute;
    z-index: 10;
    top: 28px;
    right: 17px;
  }
  .mob-menu-nav{margin-bottom: 32px;}
  .mob-menu-nav ul li:not(:last-child){margin-bottom: 16px;}
  .mob-menu-nav ul li a{
    font-family: 'Inter';
    font-weight: 900;
    font-size: 32px;
    line-height: 39px;
    color: #323232;
  }
  .mob-menu-sub__nav ul li{margin-bottom: 2px;}
  .mob-menu-sub__nav ul li a{
    font-size: 16px;
    line-height: 1.88;
    letter-spacing: -.144px;
    text-decoration-line: underline;
    color: rgba(50, 50, 50, .76);
  }
  .mob-menu-sub__txt{
    font-size: 16px;
    line-height: 1.88;
    letter-spacing: -.144px;
    color: rgba(50, 50, 50, .76);
  }
}

/* home */
.home{
  position: relative;
  height: 594px;
}
.home__wrap{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.home::before,
.home::after{
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  border-radius: 10px;
  background: center bottom no-repeat;
  background-size: cover;
}
.home::before{
  width: calc(100% - 247px);
  left: 0;
  background-image: url(../img/hero-bg-min.webp);
}
.home::after{
  width: 227px;
  right: 0;
  background-image: url(../img/hero-pic-desc-min.webp);
}
.home__main{
  width: 800px;
  max-width: calc(100% - 280px);
}
.home__logo{
  width: 56px;
  margin-bottom: 32px;
}
.home__title{
  font-weight: 700;
  font-size: 48px;
  line-height: 1.25;
  letter-spacing: -.144px;
  color: #323232;
  margin-bottom: 20px;
}
.home__title span{color: #28A745;}
.home__title span.grey{
  color: #323232;
  opacity: .4;
}
.home__title br,
.home__txt br{display: none;}
.home__txt{
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: .231px;
  color: rgba(50, 50, 50, .4);
}
.home-bar{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 50px;
}
@media only screen and (max-width : 1023px){
  .home__logo{margin-bottom: 20px;}
  .home__title{
    font-size: 32px;
    letter-spacing: 0;
    margin-bottom: 16px;
  }
  .home__txt{
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
  }
  .home-bar{margin-top: 32px;}
}
@media only screen and (max-width : 767px){
  .home{
    height: auto;
    padding: 74px 0 580px;
    position: relative;
  }
  .home__wrap{
    height: auto;
    display: block;
    position: static;
  }
  .home .container{position: static;}
  .home::before{display: none;}
  .home::after{
    width: calc(100% - 32px);
    right: 16px;
    top: auto;
    bottom: 60px;
    height: 459px;
    background-image: url(../img/hero-pic-mob-min.webp);
    background-position: 0 0;
  }
  .home__main{
    width: 100%;
    max-width: unset;
  }
  .home__logo{
    position: absolute;
    z-index: 10;
    bottom: 261px;
    left: 50%;
    margin-left: -28px;
    margin-bottom: 0;
  }
  .home-bar{
    flex-direction: column;
    gap: 10px;
  }
  .home__txt br,
  .home__title br{display: block;}
}

/* about */
.about{
  padding: 200px 0;
  border-radius: 10px;
  background: url(../img/building-bg.svg) right -58px center no-repeat #F9FAFB;
}
.about__header{
  max-width: 476px;
  margin-bottom: 100px;
}
.about-slider{margin-top: 90px;}
.about .swiper-wrapper{align-items: stretch;}
.about .swiper-slide{height: unset;}
.about-slide{
  height: 100%;
  min-height: 226px;
  border-radius: 10px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-direction: column;
  padding: 24px;
}
.about .swiper-slide:nth-child(1) .about-slide{background-color: #DFF9E3;}
.about .swiper-slide:nth-child(2) .about-slide{background-color: #CDFBD4;}
.about .swiper-slide:nth-child(3) .about-slide{background-color: #AFF6BA;}
.about-slide__num{
  font-weight: 800;
  font-size: 32px;
  line-height: 1.88;
  letter-spacing: -.144px;
  color: #28A745;
}
.about .swiper-slide:nth-child(1) .about-slide .about-slide__num{color: #58D074;}
.about-slide__txt{
  font-weight: 600;
  font-size: 16px;
  line-height: 1.38;
  letter-spacing: .196px;
  color: rgba(50, 50, 50, .4);
}
.about-slide__txt b{
  color: #323232;
  font-weight: 600;
}
@media only screen and (min-width : 768px){
  .about .swiper-wrapper{gap: 18px;}
  .about .swiper-slide{
    width: unset;
    width: calc((100% - 36px) / 3);
  }
}
@media only screen and (max-width : 1023px){
  .about{padding: 100px 0;}
  .about__header{margin-bottom: 50px;}
  .about-slider{margin-top: 40px;}
  .about-slide{padding: 16px;}
}
@media only screen and (max-width : 767px){
  .about{
    padding: 60px 0;
    border-radius: 0;
    background: #F9FAFB;
  }
  .about-slider{
    width: 288px;
    padding-bottom: 40px;
    position: relative;
  }
  .about-slider__pagination{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 16px;
  }
  .about-slider__pagination .swiper-pagination-bullet{
    margin: 0 !important;
    display: block;
    opacity: 1;
    width: 8px;
    height: 8px;
    background-color: #58D074;
  }
  .about-slider__pagination .swiper-pagination-bullet-active{
    background-color: #14421F;
  }
  .about-slide{
    min-height: 295px;
    padding: 16px;
  }  
}

/* our */
.our{padding: 180px 0;}
.our-item{
  padding: 34px 43px;
  border-right: 2px dashed #6228FF;
  width: calc(100% / 3);
}
.our-item:last-child{border-right: none;}
.our-item__title{
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: #323232;
}
.our-item__txt{
  font-size: 18px;
  line-height: 1.25;
  color: rgba(0, 0, 0, .4);
}
@media only screen and (min-width : 768px){
  .our .sec-title span{display: block;}
  .our .sec-txt br{display: none;}
  .our__row{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 18px;
    border-radius: 10px;
    padding: 70px 24px;
    background-color: #DFF9E3;
  }
  .our__row:last-child{
    margin-bottom: 0;
    background: #CDFBD4;
  }
}
@media only screen and (max-width : 1023px){
  .our{padding: 80px 0;}
  .our-item__txt{font-size: 16px;}
  .our-item__title{font-size: 18px;}
  .our-item{padding: 16px;}
  .our__row{padding: 32px 0;}
}
@media only screen and (max-width : 767px){
  .our{padding: 60px 0;}
  .our-item{
    padding: 16px;
    border-right: none;
    width: 100%;
    height: 195px;
    border-radius: 10px;
    background-color: #DFF9E3;
    margin-bottom: 16px;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: space-between;;
  }
  .our-item__title{
    margin-bottom: 16px;
    font-size: 18px;
  }
  .our-item__txt{
    max-width: 269px;
    font-size: 16px;
  }
  .our__main .btn{margin: 32px 0 0;}
  .our__row{padding: 0;}
  .our__row--hide{display: none;}
  .our__row--hide.show{display: block;}
  .our__main .btn.hide{display: none;}
}

/* banner */
.banner{
  height: 700px;
  border-radius: 10px;
  background:url(../img/sharia-banner-desc-min.webp) center bottom no-repeat;
  background-size: cover;
  padding: 50px;
}
.banner__title{
  max-width: 580px;
  font-weight: 800;
  font-size: 50px;
  line-height: 1.2;
  letter-spacing: .196px;
  text-transform: uppercase;
  color: #fff;
}
.banner__title strong{
  font-weight: 800;
  color: #1F5D2D;
}
.banner__title span{
  color: rgba(255, 255, 255, .4);
}
@media only screen and (max-width : 1023px){
  .banner__title{
    font-size: 32px;
    letter-spacing: 0;
  }
  .banner{
    height: 600px;
    padding: 32px;
  }
  .banner__title span{display: block;}
}
@media only screen and (max-width : 767px){
  .banner{
    width: calc(100% - 32px);
    margin: 0 auto;
    background-image: url(../img/sharia-banner-mob-min.webp);
    background-position: 0 bottom;
    padding: 16px;
  }
  .banner__title{
    font-size: 25px;
    letter-spacing: .2px;
  }
}

/* unveils */
.unveils{padding: 180px 0;}
.unveils__header{
  margin-left: auto;
  margin-right: auto;
  max-width: 910px;
}
.unveils__header .sec-txt{
  margin-left: auto;
  margin-right: auto;
  max-width: 496px;
}
.unveils__header .sec-logo{
  margin: 0 auto;
  width: 56px;
}
.unveils__wrap{
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 18px;
}
.unveils-card{
  width: calc((100% - 36px) / 3);
  min-height: 226px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: column;
  padding: 24px;
  border-radius: 10px;
  background-color: #DFF9E3;
  position: relative;
}
.unveils-card__icn{
  position: absolute;
  top: 24px;
  right: 24px;
}
.unveils-card__title{
  font-weight: 600;
  font-size: 16px;
  line-height: 1.38;
  letter-spacing: .196px;
  color: #323232;
}
.unveils-card__btn{
  padding: 8.5px;
  border-radius: 10px;
  width: 124px;
  background-color: #1F5D2D;
  font-weight: 500;
  font-size: 14px;
  color: #DFF9E3;
  text-align: center;
}
.unveils-card__btn:hover{
  background-color: #58D074;
  color: #323232;
}
.unveils-card__btn:active{
  background-color: #58D074;
  color: #DFF9E3;
}
@media only screen and (max-width : 1023px){
  .unveils{padding: 80px 0;}
}
@media only screen and (max-width : 767px){
  .unveils{padding: 60px 0;}
  .unveils__header,
  .unveils__header .sec-txt{max-width: unset;}
  .unveils__header .sec-logo{margin: 0;}
  .unveils__wrap{gap: 16px;}
  .unveils-card{
    width: 100%;
    min-height: 195px;
    padding: 16px;
  }
  .unveils-card__icn{
    top: 16px;
    right: 16px;
  }
  .unveils-card__title{letter-spacing: .2px;}
  .unveils-card__btn{
    padding: 6px;
    width: 100%;
  }
}

/* token */
.token{
  background-color: #F9FAFB;
  border-radius: 10px;
  padding: 200px 0;
  position: relative;  
}
.token-slide{
  width: 100%;
  height: 500px;
  background: center bottom no-repeat #54C568;
  background-size: cover;
  border-radius: 10px;
  padding: 30px 26px;
}
.token-slide__title{
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: .196px;
  color: rgba(255, 255, 255, .4);
}
.token-slide__title span{color: #fff;}
.token-slide--1{background-image: url(../img/token-1-min.webp);}
.token-slide--2{background-image: url(../img/token-2-min.webp);}
.token-slide--3{background-image: url(../img/token-3-min.webp);}
@media only screen and (min-width : 768px){
  .token{overflow: hidden;}
  .token .swiper-wrapper{gap: 18px;}
  .token .swiper-slide{
    width: unset;
    width: calc((100% - 36px) / 3);
  }
  .token::after{
    content: '';
    display: block;
    position: absolute;
    width: 1759px;
    height: 2219px;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    background-color: rgba(88, 208, 116, .37);
    filter: blur(184.75px);

  }
}
@media only screen and (max-width : 1023px){
  .token{padding: 80px 0;}
  .token-slide{padding: 16px;}
  .token-slide__title{
    font-size: 20px;
    letter-spacing: .2px;
  }
}
@media only screen and (max-width : 767px){
  .token{
    background-color: #F9FAFB;
    border-radius: 0;
    padding: 60px 0;
  }
  .token-slide{padding: 16px;}
  .token-slide__title{
    font-size: 20px;
    letter-spacing: .2px;
  }

  .token-slider{
    width: 288px;
    padding-bottom: 40px;
    position: relative;
  }
  .token-slider__pagination{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 16px;
  }
  .token-slider__pagination .swiper-pagination-bullet{
    margin: 0 !important;
    display: block;
    opacity: 1;
    width: 8px;
    height: 8px;
    background-color: #58D074;
  }
  .token-slider__pagination .swiper-pagination-bullet-active{
    background-color: #14421F;
  } 
}

/* game */
.game{
  padding: 180px 0;
  background: url(../img/gallery-bg.svg) center 343px no-repeat #fff;
}
.game__header{
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}
.game__slider-container{
  position: relative;
  width: 270px;
  height: 587px;
  margin: 0 auto;
}
.game__slider-container::before,
.game__slider-container::after{
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
}
.game__slider-container::before{
  top: 49px;
  width: 251px;
  height: 575px;
  background-color: rgba(0, 0, 0, .31);
  filter: blur(32.9px);
  border-radius: 38px;
}
.game__slider-container::after{
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  background: url(../img/mokapp-min.webp) center 0 no-repeat;
  background-size: contain;
}
.game-slider{
  width: calc(100% - 12px);
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  border-radius: 40px;  
}
.game-slide img{
  display: block;
  width: 100%;
}
.game-slide{padding: 10px 0;}
.game__bottom{
  text-align: center;
  margin-top: 67px;
}
.game-txt{
  font-weight: 700;
  font-size: 36px;
  line-height: 1.17;
  text-align: center;
  letter-spacing: -.144px;
  color: rgba(50, 50, 50, .4);
}
.game-txt strong{
  font-weight: 700;
  color: #323232;
}
.game__bottom .btn{
  margin: 50px auto 0;
}
@media only screen and (max-width : 1023px){
  .game{
    padding: 80px 0;
    background: url(../img/gallery-bg.svg) center 243px no-repeat #fff;
  }
  .game-txt{
    font-size: 32px;
    letter-spacing: 0;
  }
  .game__bottom .btn{margin-top: 32px;}
}
@media only screen and (max-width : 767px){
  .game{
    padding: 60px 0;
    background: #fff;
  }
  .game .sec-title span{display: block;}
  .game__slider-container{
    width: 328px;
    height: 713px;
  }
  .game__slider-container::before{
    top: 36px;
    width: 304px;
    height: 698px;
    background-color: rgba(0, 0, 0, .22);
    filter: blur(65px);
    border-radius: 38px;
  }
  .game__bottom{
    text-align: left;
    margin-top: 44px;
  }
  .game-txt{
    font-size: 24px;
    text-align: left;
  }
  .game__bottom .btn{margin-top: 32px;}
}

/* roadmap */
.roadmap{
  background-color: #F9FAFB;
  border-radius: 10px;
  padding: 200px 0
}
.roadmap__header .sec-txt{
  margin-left: auto;
  margin-right: auto;
  max-width: 538px;
}
.roadmap-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 40px;
  width: 100%;
  max-width: 777px;
}
.roadmap-item:last-child{margin-bottom: 0;}
.roadmap-item__num{
  width: 194px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 128px;
  line-height: 140%;
  letter-spacing: -1px;
  color: rgba(0, 0, 0, .04);
}
.roadmap-item__wrap{
  flex-grow: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-radius: 10px;
  height: 204px;
}
.roadmap-item:nth-child(1) .roadmap-item__wrap{background-color: #DFF9E3;}
.roadmap-item:nth-child(2) .roadmap-item__wrap{background-color: #CDFBD4;}
.roadmap-item:nth-child(3) .roadmap-item__wrap{background-color: #AFF6BA;}
.roadmap-item:nth-child(4) .roadmap-item__wrap{background-color: #87EB96;}
.roadmap-item__header{
  width: 180px;
  flex-shrink: 0;
  border-right: 2px dashed #6228FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: 700;
  font-size: 28px;
  line-height: 140%;
  letter-spacing: -1px;
  color: #000;
}
.roadmap-item__header span{
  font-size: 48px;
  line-height: 140%;
  display: block;
}
.roadmap-item:nth-child(4) .roadmap-item__header span{font-size: 32px;}
.roadmap-item__main{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  flex-grow: 1;
  max-width: 354px;
  padding: 0 16px;
}
.roadmap-item__title{
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: -1px;
  color: #000;
}
.roadmap .sec-title br{display: none;}
.roadmap-item__main ul li{
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -1px;
  color: #3C3C3C;
}
.roadmap-item__main ul li::before{
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  top: 10px;
  width: 4px;
  height: 4px;
  background-color: #3C3C3C;
}
@media only screen and (max-width : 1023px){
  .roadmap{padding: 100px 0;}
  .roadmap-item__num{display: none;}
  .roadmap-item{
    max-width: 570px;
    margin-bottom: 16px;
  }
}
@media only screen and (max-width : 767px){
  .roadmap{
    background-color: #F9FAFB;
    border-radius: 0;
    padding: 60px 0
  }
  .roadmap__header .sec-txt{ max-width: unset;}
  .roadmap .sec-title br{display: block;}
  .roadmap-item{
    display: block;
    margin-bottom: 16px;
    width: 100%;
  }
  .roadmap-item__num{display: none;}
  .roadmap-item__wrap{
    flex-direction: column;
    height: 300px;
    padding: 16px;
  }
  .roadmap-item__header{
    width: 100%;
    border-right: none;
    display: block;
    font-size: 28px;
  }
  .roadmap-item__header span{
    font-size: 28px;
    display: inline;
  }
  .roadmap-item:nth-child(4) .roadmap-item__header span{font-size: 28px;}
  .roadmap-item__main{
    display: block;
    max-width: unset;
    width: 100%;
    padding: 0;
    flex-grow: 0;
  }
  .roadmap-item__title{
    margin-bottom: 16px;
    font-size: 18px;
  }
}

/* faq */
.faq{padding: 180px 0;}
.faq__header .sec-title{max-width: 400px;}
.faq__header .sec-txt{max-width: 635px;}
.faq-item:not(:last-child){margin-bottom: 18px;}
.faq-item{
  background-color: #F9FAFB;
  border-radius: 10px;
}
.faq-item__hide{
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .25s ease-in-out;
  transition-property: grid-template-rows;
  will-change: grid-template-rows;
}
.faq-item__header.show ~ .faq-item__hide{grid-template-rows: 1fr;}
.faq-item__hide-wrap{min-height: 0;}
.faq-item__txt{
  padding: 0 100px 24px 26px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.56;
  letter-spacing: -.374px;
  color: rgba(29, 29, 31, .6);
}
.faq-item__header{
  padding: 26px 100px 26px 26px;
  cursor: pointer;
  position: relative;
}
.faq-item__title{
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: .196px;
  color: #323232;
}
.faq-item__btn{
  position: absolute;
  top: 24px;
  right: 26px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s linear;
  background-color: #58D074;
}
.faq-item__btn svg{
  display: block;
  fill: #000;
  transition: fill .25s linear;
}
.faq-item__header:hover .faq-item__btn svg{fill: #fff}
.faq-item__header:active .faq-item__btn svg{fill: #000}
.faq-item__header.show .faq-item__btn{transform: rotate(180deg);}
@media only screen and (max-width : 1023px){
  .faq{padding: 80px 0;}
}
@media only screen and (max-width : 767px){
  .faq{padding: 60px 0;}
  .faq__header .sec-title,
  .faq__header .sec-txt{max-width: unset;}
  .faq-item:not(:last-child){margin-bottom: 16px;}
  .faq-item__txt{padding: 0 16px 16px 16px;}
  .faq-item__header{padding: 16px 68px 16px 16px;}
  .faq-item__title{
    font-size: 18px;
    letter-spacing: .2px;
  }
  .faq-item__btn{
    top: 16px;
    right: 16px;
  }
}

/* finish */
.finish{
  position: relative;
  height: 594px;
}
.finish__wrap{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.finish::before,
.finish::after{
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  border-radius: 10px;
  background: center bottom no-repeat;
  background-size: cover;
}
.finish::before{
  width: calc(100% - 247px);
  left: 0;
  background-image: url(../img/bottom-bg-desc-min.webp);
}
.finish::after{
  width: 227px;
  right: 0;
  background-image: url(../img/bottom-pic-desc-min.webp);
}
.finish__main{
  width: 800px;
  max-width: calc(100% - 280px);
}
.finish__title{
  font-weight: 700;
  font-size: 48px;
  line-height: 1.25;
  letter-spacing: -.144px;
  color: #fff;
  margin-bottom: 20px;
}
.finish__txt{
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: .231px;
  color: rgba(256, 256, 256, .4);
  max-width: 590px;
}
.finish__bar{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 50px;
}
@media only screen and (max-width : 1023px){
  .finish__title{
    font-size: 32px;
    letter-spacing: 0;
    margin-bottom: 16px;
  }
  .finish__txt{
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
  }
  .finish-bar{margin-top: 32px;}
}
@media only screen and (max-width : 767px){
  .finish{
    height: auto;
    padding-bottom: 492px;
  }
  .finish__wrap{
    height: 460px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    border-radius: 10px;
    background: url(../img/bottom-bg-mob-min.webp) center bottom no-repeat;
    background-size: cover;
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 16px 0;
  }
  .finish::before{display: none;}
  .finish::after{
    width: calc(100% - 32px);
    right: 16px;
    bottom: 0;
    top: auto;
    height: 459px;
    background-image: url(../img/bottom-pic-mob-min.webp);
  }
  .finish__main{
    width: 100%;
    max-width: unset;
  }
  .finish__title{
    font-size: 32px;    
    margin-bottom: 16px;
  }
  .finish__txt{
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .2px;
    max-width: unset;
  }
  .finish__bar{
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-top: 32px;
  }
  .finish__wrap::after{
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    bottom: 200px;
    width: 56px;
    height: 56px;
    margin-left: -28px;
    background: url(../img/logo-icon.svg) center center no-repeat;
    z-index: 10;
  }
}

/* footer */
.footer{
  background-color: #F9FAFB;
  padding: 40px 20px
}
.footer__wrap{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 47px;
}
.footer-logo{
  display: block;
  width: 174px;
}
.footer-logo img{
  display: block;
  width: 100%;
}
.footer-nav{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 40px;
}
.footer-nav__title{
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.88;
  letter-spacing: -.144px;
  color: #323232;
}
.footer-nav ul li.faq-item:not(:last-child){margin-bottom: 6px;}
.footer-nav ul li a{
  display: inline-block;
  font-size: 16px;
  line-height: 1.88;
  letter-spacing: -.144px;
  color: rgba(50, 50, 50, .4);
}
.footer-nav ul li a:hover{color: #6228FF;}
.footer-nav__col{min-width: 160px;}
.footer-nav__col:last-child ul li a{text-decoration: underline;}
.footer__bottom{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.footer__txt{
  max-width: 340px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -.144px;
  color: #323232;
}
.footer__txt span{color: #09B130;}
.footer__copyright{
  font-size: 14px;
  line-height: 1.29;
  color: #323232;
}
@media only screen and (max-width : 1023px){
  .footer-nav__col{min-width: 120px;}
}
@media only screen and (max-width : 767px){
  .footer{
    padding: 60px 16px;
    position: relative;
  }
  .footer__wrap{
    display: block;
    margin-bottom: 0;
  }
  .footer-nav{display: block;}
  .footer-nav__col{
    min-width: unset;
    margin-bottom: 32px;
  }
  .footer-nav__col:last-child{margin-bottom: 0;}
  .footer__copyright{
    position: absolute;
    bottom: 70px;
    right: 16px;
    width: 140px;
    text-align: right;
  }
}