.wrap {width:1360px;margin:auto;}

.navis__hero {position:relative;}
.nh__bg {position:absolute;top:0;right:0;height:100%;object-fit: cover;}
.nh__content {background:#2C02FF;position:relative;z-index:2;padding:500px 160px 90px 60px;width: 60%; }
.nh__bars {position:absolute;left:0;bottom:50%;}
.nh__percent {position:absolute;right:0;top:0;}
.nh__content h2 {color: #FFBA00; font-family: Northwell; font-size: 90px; font-weight: 400; line-height:1;margin-top:0;margin-bottom:0px;}
.nh__content h1 {position:relative;color: #FFF; font-size: 45px; font-weight: 400; line-height: normal; margin:0;}
.nh__1 {position:absolute;right:0;top:-50px;}
.nh__2 {position:absolute;bottom: -32px; left: 23%;}

.navis__points {background: #1A1A1A;position:relative; padding-top:150px;padding-bottom:190px;}
.np__arrow {position:absolute;top: -23%; right: 13%;z-index: 2;}
.navis__points .np__rec__left {position:absolute;left:0;top:25%;}
.navis__points .np__rec__right {position:absolute;right:0;top:90px;}
.navis__points h3 {color: #FFF; text-align: center; font-size: 20px; font-weight: 400; line-height: normal; margin-top:0;margin-bottom:48px;}
.np__points {display:grid;text-align:center;grid-template-columns: 30% 30% 30%;justify-content: space-between;position:relative;}
.np__dots__up {position:absolute;top:0;left:24%;}
.np__dots__down {position:absolute;bottom: -7%; right: 25%;}
.np__number {color: #FFBA00; font-family: Northwell; font-size: 144px; font-weight: 400; line-height: 1; }
.np__text {color: #FFF; font-size: 30px; font-weight: 400; line-height: 44px;}

.navis__items {background: #E5E3E3;padding-top:70px;padding-bottom:180px; }
.navis__items h3 {text-align:center;margin-top:0;margin-bottom:80px;color: #000;font-size: 20px; font-weight: 400; line-height: normal; }
.ni__grid {position:relative;display:grid;grid-template-columns:30% 30% 30%;justify-content: space-between;grid-row-gap:80px;}
.ni__item {border-radius: 12px; background: #FFF; box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.16);position:relative;display:grid;}
.ni__img {padding-top:200px;}
.ni__img img {position:absolute;top:-40px;left:0;right:0;margin:auto;}
.ni__meta {display:grid;grid-template-columns:auto auto;grid-column-gap:8px;}
.nim__left {padding-left:24px;padding-bottom:24px;}
.nim__left h2 {color: #000; font-size: 30px; font-weight: 700; line-height: normal; margin-top:0;margin-bottom:16px;}
.nim__code {display:flex;align-items: center;column-gap:3px;color: #2C02FF; font-size: 16px; font-weight: 700; line-height: normal; }
.nim__right {align-self: flex-end;}
.nim__price {border-radius: 56px 0px 12px 0px; background: #2C02FF; padding:24px 40px;color: #FFF;text-align:center;}
.nimp__large {font-size: 23px; font-weight: 700; line-height: normal; }
.nimp__small {font-size: 14px; font-weight: 400; line-height: normal; }
.nimpsc {position:relative;}
.nimpsc:after {content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:url(../img/lp_navis/d.svg)center center no-repeat;}
.nimpsr {}

.navis__terms {background: #1A1A1A;position:relative; padding-top:68px;padding-bottom:90px;}
.navis__terms .np__rec__left {position:absolute;left:0;top:20px;}
.navis__terms .np__rec__right {position:absolute;right:0;top:50px;}
.nt__img {display:block;margin:auto;}

.product__preordershops {background: #2B02FE; position:relative;padding:108px 0;overflow:hidden;}
.preordershops__img {position:absolute;}
.preordershops__text {top: -21px;left: 11%;}
.preordershops__square {bottom: -10%;left: 10%;}
.preordershops__rect {top: -17%; right: -14%;}
.product__preordershops__wrap {max-width:700px;margin:auto;}
.product__preordershops__wrap p {color: #FFF;font-family: neue-haas-grotesk-display,Helvetica,Arial,sans-serif;font-size: 20px;font-style: normal;font-weight: 400;line-height: normal;margin-top:0;margin-bottom:42px;text-align:center;}

.product__preordershops__grid {display:flex;gap:20px;position:relative;z-index:2;flex-wrap: wrap; justify-content: center;}
.product__preordershops--box {background:#E5E3E3;border-radius:15px;width: calc(33% - 15.5px);padding:20px;}
.product__preordershops--box--img {margin-bottom:14px;height: 67px; display: grid; align-items: center; justify-content: center; text-align: center;}
.product__preordershops--box--img img {display:block;width:100%;}
.product__preordershops--box--link a {display: block; padding: 5px 10px 2px; border: 1px solid #000; border-radius: 50px; text-align: center; background: 0 0; transition: .3s;}
.product__preordershops--box--link a svg {display:block;margin:auto;transition:.15s;width:30px;}
.product__preordershops--box--link a:hover {border: 1px solid #2B02FE;background:#2B02FE;transition:.15s;}
.product__preordershops--box--link a:hover svg path, .product__preordershops--box--link a:hover svg polygon {fill:#fff;transition:.15s;}

@media (max-width:1470px) {
    .wrap {width:1200px;}
    .preordershops__text {left: 5%;}
    .preordershops__rect {top: -20%; right: -17%; width: 500px;}
    .navis__points .np__rec__left {top: 50%;max-width: 13%;}
    .navis__points .np__rec__right {top:70px;max-width:16%;}
    .np__points { grid-template-columns: 32% 32% 32%;}
    .nh__content h1 {font-size: 40px;}
    .nh__2 {max-width: 40%;}
    .nh__content {padding: 400px 80px 80px 40px; width: 65%;}
    .nh__percent {max-width: 50%;}
}

@media (max-width:1280px) {
    .wrap {width:100%;padding:0 10px;}
    .np__rec__left {max-width:15%;}
    .np__rec__right {max-width:16%;}
    .ni__grid {grid-template-columns: 32% 32% 32%; grid-row-gap: 64px;}
    .ni__img {padding-top: 170px;}
    .np__number {font-size: 100px;}
    .np__text {font-size: 22px; line-height: 36px;}
    .np__dots__up {top: -18px; left: 23%; max-width: 20%;}
    .np__dots__down {bottom: -12%;right: 23%;max-width: 23%;}
    .np__arrow {top: -20%; right: 10%; max-width: 35%;}
}

@media (max-width:920px) {
    html, body {width:100%;overflow-x:hidden;}
    .preordershops__square {bottom: -22%;left: -14%;}
    .ni__grid {grid-template-columns: 48% 48%;}
    .nh__content {padding: 300px 60px 60px 24px; width: 65%;}
    .nh__content h2 {font-size: 70px;}
    .nh__content h1 {font-size: 32px;}
    .nh__1 {right: -30px; top: -45px; max-width: 11%;}
}

@media (max-width:780px) {
    .product__preordershops__grid {flex-wrap:wrap;}
    .product__preordershops--box {width: calc(50% - 10px);}
    .nh__bars {bottom: 70%;max-width:40%}
}

@media (max-width:680px) {
    .product__preordershops__wrap {padding:0 10px;}
    .navis__items {padding-top: 40px; padding-bottom: 80px;}
    .ni__grid {grid-template-columns: 100%;}
    .ni__img {padding-top: 200px;}
    .nim__left h2 {font-size: 24px;}
    .np__number {font-size: 60px;}
    .np__text {font-size: 16px;line-height: 32px;}
    .navis__points {padding-top: 80px; padding-bottom: 80px;}
}

@media (max-width:480px) {
    .product__preordershops {padding: 50px 0 80px 0;}
    .preordershops__rect {top: 10%; right: -50%; width: 400px;}
    .preordershops__square {bottom: -23%; left: -22%; max-width: 50%;}
    .product__preordershops__wrap p {margin-bottom:30px;}
    .product__preordershops--box--link a svg {height:20px;}
    .navis__terms {padding-top: 40px; padding-bottom: 50px;}
    .nh__content {padding: 200px 16px 40px 16px; width: 65%;}
    .nh__content h2 {font-size: 50px;}
    .nh__content h1 {font-size: 24px;}
    .nh__1 {right: -15px; top: -25px;}
}

@media (max-width:420px) {
    .ni__img {padding-top: 180px;}
    .np__text { font-size: 14px; line-height: 30px;}
}