@charset "UTF-8";

.buybtn {
  display: block;
  width: 250px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 30px;
  border: 1px solid #38393E;
  color: #38393E;
  cursor: pointer;
  text-decoration: none;
  text-align: center; }
  .buybtn:hover {
    background: #FF4C24;
    box-shadow: 0px 9px 16px rgba(115, 13, 13, 0.4);
    border: 1px solid #FE300C;
    color: #fff; }
  .buybtn.red {
    background: transparent linear-gradient(331deg, #E00B12 0%, #FF4C24 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 9px 16px rgba(115, 13, 13, 0.4);
    border: 1px solid #FE300C;
    color: #fff; }
    .buybtn.red:hover {
      background: #FF4C24 0% 0% no-repeat padding-box; }

.banner {
  height: 975px;
  background: url(../banner_bg.webp) center no-repeat; }
  .banner .logo {
    position: absolute;
    left: -100px;
    top: 10px; }
  .banner .title {
    padding-top: 40px;
    text-align: center; }
     .banner .title h1{
        color: #fff;
        padding-top: 15px;
        font: normal normal normal 36px/16px Montserrat;
       }
    .banner .title p {
      font-size: 22px;
      font-weight: 500;
      color: rgba(212, 12, 35, 0.8); }
  .banner .wrapper {
    width: 1132px; }
  .banner .offer_nav {
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: end;
    justify-content: center;
    margin-top: 60px; }
    .banner .offer_nav li {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0px 10px;
      width: 45%;
      height: 55px;
      background: #37383D;
      cursor: pointer;
      position: relative;
      z-index: 1; }
      .banner .offer_nav li p {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px; }
        .banner .offer_nav li p b {
          font-size: 22px;
          font-weight: bold;
          color: #BFBFBF; }
        .banner .offer_nav li p span {
          border-radius: 20px;
          font-size: 12px;
          font-weight: 600;
          line-height: 1;
          display: block;
          padding: 3px 12px;
          color: #FC8F00;
          background: #131418; }
      .banner .offer_nav li .nav_num {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 3px;
        position: relative; }
        .banner .offer_nav li .nav_num p {
          font-size: 10px;
          font-weight: 500;
          color: #C29E9E; }
        .banner .offer_nav li .nav_num .countdown {
          height: 14px;
          line-height: 14px;
          margin: 0px 4px; }
          .banner .offer_nav li .nav_num .countdown .scroll-tick {
            height: 14px; }
            .banner .offer_nav li .nav_num .countdown .scroll-tick span {
              font-size: 10px;
              font-weight: 500;
              color: #C29E9E;
              padding: 0px; }
        .banner .offer_nav li .nav_num .br-reduce {
          top: -20px;
          left: 8%; }
      .banner .offer_nav li.active {
        width: 55%;
        height: 66px;
        background: #FFDE02;
        background: transparent linear-gradient(0deg, #F4F4F5 0%, #F4F4F5 31%, #FBEEE0 46%, #FFFFFF 69%, #FFEFDC 84%, #FCDDB8 100%, #FF2020 100%) 0% 0% no-repeat padding-box;
        border-radius: 10px 10px 0px 0px;
        z-index: 2; }
        .banner .offer_nav li.active:nth-of-type(1) {
          box-shadow: 20px 0px 35px rgba(0, 0, 0, 0.8); }
        .banner .offer_nav li.active:nth-of-type(2) {
          box-shadow: -20px 0px 35px rgba(0, 0, 0, 0.8); }
          .banner .offer_nav li.active:nth-of-type(2) .nav_num {
            display: none; }
        .banner .offer_nav li.active p b {
          font-size: 30px;
          color: #14151A; }
        .banner .offer_nav li.active p span {
          font-size: 14px;
          padding: 5px 16px;
          color: #FF3E14;
          background: #FFDE02; }
  .banner .offer_cont {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent linear-gradient(228deg, #F4F4F5 30%, #ACAAAA 100%) 0% 0% no-repeat padding-box;
    position: relative;
    z-index: 3;
    padding: 62px 35px;
    border-radius: 0px 0px 6px 6px;
    backdrop-filter: blur(9px);
    gap: 50px; }
    .banner .offer_cont .left h4 {
      font-size: 14px;
      font-weight: 900;
      color: #14151A;
      line-height: 1.5; }
    .banner .offer_cont .left ul {
      display: flex;
      flex-direction: column;
      margin: 20px 0px;
      gap: 10px; }
      .banner .offer_cont .left ul li {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500; }
        .banner .offer_cont .left ul li::before {
          content: '√';
          display: block;
          color: #000;
          margin-right: 10px; }
        .banner .offer_cont .left ul li.check {
          position: relative;
          cursor: pointer;
          opacity: 0.6; }
          .banner .offer_cont .left ul li.check::before {
            opacity: 0;
            position: relative;
            z-index: 2; }
          .banner .offer_cont .left ul li.check::after {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            background: #DCDCDC 0% 0% no-repeat padding-box;
            border: 1px solid #707070;
            border-radius: 2px;
            position: absolute;
            left: -4px;
            top: 3px;
            z-index: 1; }
          .banner .offer_cont .left ul li.check.active {
            opacity: 1; }
            .banner .offer_cont .left ul li.check.active::before {
              opacity: 1; }
        .banner .offer_cont .left ul li .tag {
          font-size: 10px;
          font-weight: 600;
          line-height: 1;
          color: #fff;
          padding: 2px 8px;
          display: block;
          background: #FC8F00 0% 0% no-repeat padding-box;
          border-radius: 40px 40px 40px 0px;
          margin-left: 4px; }
    .banner .offer_cont .left .more {
      font-size: 14px;
      font-weight: 500;
      color: #7B82EB;
      text-decoration: underline;
      margin-left: 18px;
      cursor: pointer; }
      .banner .offer_cont .left .more:hover {
        color: #404cee; }
    .banner .offer_cont .right {
      display: flex;
      gap: 30px; }
    .banner .offer_cont .of_item {
      width: 310px;
      height: 420px;
      background: #fff;
      border: 1px solid rgba(196, 194, 200, 0.9);
      padding: 22px 0px 0px;
      display: flex;
      flex-direction: column;
      align-items: center; }
      .banner .offer_cont .of_item .device {
        display: flex;
        align-items: center;
        gap: 6px; }
        .banner .offer_cont .of_item .device span {
          font-size: 14px;
          font-weight: bold;
          color: #38393E; }
      .banner .offer_cont .of_item dt {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 20px; }
        .banner .offer_cont .of_item dt div {
          width: 120px; }
        .banner .offer_cont .of_item dt .border_text b,
        .banner .offer_cont .of_item dt .border_text strong {
          font-size: 22px; }
      .banner .offer_cont .of_item .price {
        margin-top: 20px;
        text-align: center; }
        .banner .offer_cont .of_item .price span {
          color: #170202;
          font-size: 16px;
          font-weight: 600; }
          .banner .offer_cont .of_item .price span b {
            font-size: 40px;
            font-weight: bold; }
        .banner .offer_cont .of_item .price .save {
          display: block;
          width: fit-content;
          margin: 10px auto 25px;
          padding: 4px 16px;
          line-height: 1;
          font-size: 12px;
          font-weight: bold;
          color: #B71919;
          background: rgba(255, 222, 2, 0.5);
          border-radius: 20px; }
        .banner .offer_cont .of_item .price p {
          font-size: 12px;
          font-weight: 500;
          color: #606060; }
      .banner .offer_cont .of_item .buybtn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-top: 10px; }
        .banner .offer_cont .of_item .buybtn.red svg {
          filter: brightness(1); }
        .banner .offer_cont .of_item .buybtn.red span {
          color: #fff; }
        .banner .offer_cont .of_item .buybtn svg {
          filter: brightness(0.3); }
        .banner .offer_cont .of_item .buybtn span {
          font-size: 18px;
          font-weight: 600;
          color: #38393E; }
        .banner .offer_cont .of_item .buybtn:hover svg {
          filter: brightness(1); }
        .banner .offer_cont .of_item .buybtn:hover span {
          color: #fff; }
        .banner .offer_cont .of_item .buybtn .cart {
          animation: shake 1s linear infinite; }
@keyframes shake {
  0% {
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  25% {
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  50% {
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  70% {
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  100% {
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); } }
      .banner .offer_cont .of_item.active {
        position: relative;
        width: 348px;
        box-shadow: 0px 22px 25px #FDA9A4;
        border: 2px solid #FF0E0E;
        padding-top: 21px;
        order: 2; }
        .banner .offer_cont .of_item.active .of_top {
          position: absolute;
          width: 348px;
          height: 34px;
          background: #2A2A2A 0% 0% no-repeat padding-box;
          box-shadow: inset 1px 8px 22px #7B7A7A;
          left: -2px;
          right: 0px;
          top: -36px;
          margin: 0px auto; }
          .banner .offer_cont .of_item.active .of_top > div {
            display: none;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%; }
            .banner .offer_cont .of_item.active .of_top > div p {
              font-size: 16px;
              font-weight: 600;
              color: #F8F8F8; }
            .banner .offer_cont .of_item.active .of_top > div.on {
              display: flex; }
          .banner .offer_cont .of_item.active .of_top .cunt_num {
            position: relative; }
            .banner .offer_cont .of_item.active .of_top .cunt_num p {
              font-size: 13px; }
            .banner .offer_cont .of_item.active .of_top .cunt_num .countdown {
              height: 20px;
              line-height: 20px; }
              .banner .offer_cont .of_item.active .of_top .cunt_num .countdown .scroll-tick {
                height: 20px; }
                .banner .offer_cont .of_item.active .of_top .cunt_num .countdown .scroll-tick:nth-of-type(2) span {
                  border-left: 1px solid #40EC8A;
                  border-right: 1px solid #40EC8A; }
                .banner .offer_cont .of_item.active .of_top .cunt_num .countdown .scroll-tick span {
                  padding: 0px 8px; }
            .banner .offer_cont .of_item.active .of_top .cunt_num .br-reduce {
              left: 50%; }
        .banner .offer_cont .of_item.active .device span {
          color: #4E0202; }
        .banner .offer_cont .of_item.active .border_text b::after {
          text-shadow: 0px 5px 12px #FF8F92; }
        .banner .offer_cont .of_item.active .border_text strong {
          background: transparent linear-gradient(334deg, #B80024 0%, #FF1D21 51%, #FF4447 100%, #FF4447 100%) 0% 0% no-repeat padding-box;
          -webkit-background-clip: text; }
  .banner .banner_list {
    margin-top: 55px; }

/*# sourceMappingURL=style.css.map */