.mobileMenu {
    display: none;
}

.sidenav {
    display: none;
}

@media screen and (min-width:1280px) and (max-width:1600px) {
    .heroImg{
        right: 0;
        top: auto;
    }
    .heroImg img {
        width: 500px;
    }
}

@media screen and (min-width:1024px) and (max-width:1441px) {
    .themeContainer {
        width: 100%;
        margin: 0 auto;
        max-width: 1240px
    }

    .heroImg{
        right: 0;
        top: auto;
    }
    .heroImg img {
        width: 400px;
    }
    .cardpaymentarea{
        max-width: 100%;
    }
    .paymentImg{
        width: 100%;
        max-width: 100%;
        margin-top: 60px;
    }
    .payImgWrapper{
        text-align: left;
    }
}

@media screen and (min-width:1024px) and (max-width:1280px) {
    .themeContainer, .themeContainerSmall{
        padding: 0 20px;
    }
    .menuWrapper ul li a{
        padding: 10px 6px;
    }
    .chartArea{
        width: 600px;
    }
    .chartWidgets{
        width: calc(100% - 620px);
    }
    .bsImage{
        opacity: 0;
    }
}

@media screen and (min-width:768px) and (max-width:1024px) {
    .bsImage{
        display: none;
    }
    .knowUsWrapper{
        padding: 0;
        gap: 0;
    }
    
    .bgLineHeight {
        height: 280px;
        margin-top: 40px;
    }
    .newContactForm {
        width: 100%;
        padding: 0;
    }

    .newContactDescription, .mapArea {
        width: 100%;
    }

    .newContactWrapper {
        flex-direction: column;
        gap: 50px;
        padding: 0 10px;
    }
    .posItem{
        width: calc(100% * 1/3 - 10px);
    }
    .posItemDetail {
        padding: 24px;
    }
    .posWrapper{
        gap: 15px;
    }
    .participationFee{
        flex-direction: column;
        margin-bottom: 10px;
    }
    .bannerHero {
        margin-bottom: 60px;
        margin-top: 0;
    }
    .heroDescArea{
        width: 70%;
    }
        .knowUsWrapper ul {
        gap: 15px;
    }
    .knowUsWrapper ul li {
        width: calc(100% * 1 / 3 - 10px);
    }
    .footerMenuWrapper{
        padding: 56px 30px;
    }
    .priceImg img{
        max-width: 100%;
        bottom: -63px;
    }
}

@media screen and (max-width:1024px) {
    .chooseModel:before{
        display: none;
    }

    .mobileMenu {
        display: block;
        font-size: 30px;
        cursor: pointer;
    }

    .sidenav {
        display: block;
        height: 100%;
        width: 0;
        max-width: 500px;
        position: fixed;
        z-index: 99999;
        top: 0;
        left: 0;
        background-color: rgba(1, 3, 20, 1);
        background: radial-gradient(140.75% 161.99% at 100% 13.54%, #7929FB 0%, #4A6BE5 50%, #19AFCE 100%);
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
        text-align:center;
      }
      
      .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        display: block;
        transition: 0.3s;
      
      }
      
      .sidenav a:hover{
        color: #f1f1f1;
      }
      
      .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
        color: white;
      }
      .mobileMenu{
        display: block;
        font-size:30px;
        cursor:pointer;
      }
      .mobileMenu span{
        display: flex;
      }
    
      .mobileMenu span img{
        width: 28px;
        filter: brightness(0) saturate(100%) invert(10%) sepia(83%) saturate(4397%) hue-rotate(242deg) brightness(139%) contrast(136%);
      }

    .headerWrapper {
        align-items: center;
    }

    .themeContainer, .themeContainerSmall {
        padding: 0 16px;
    }

    .langSelect{
        height: 40px;
    }

    .language .select {
        padding: 10px;
    }
    
    .language::after {
        top: 11px;
    }
    
    .language .select+div {
        top: 90%;
    }

    .menuWrapper {
        display: none;
    }

    .linkArea>a {
        display: none;
    }

    .menu {
        flex-direction: column;
        align-items: center;
        padding: 0 30px;
    }

    .menu>li {
        width: 100%;
        border-bottom: 1px solid #ffffff26;
        text-align: left;
    }

    .menu li a {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        padding: 6px 0;
        font-weight: 600;
    }

    .submenu li {
        width: 100%;
    }

    .menu li:hover .submenu:before {}

    .menu li:hover .submenu {
        top: calc(100% + 1px);
        left: 0;
        background: rgb(53 26 185);
        z-index: 99;
        min-width: auto;
    }

    .menu li:hover .downMenu {
        background: none;
        -webkit-text-fill-color: unset;
    }

    .downMenu:after {
        position: absolute;
        right: 0;
        top: 24px;
    }

    .travelChainWrapper {
        margin-top: 50px;
    }

    .travelCenterArea{
        display: none;
    }
    
    .socialWrapper {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .travelCard {}
    
    .travelLeftArea, .travelRightArea {
        width: 100%;
    }
    
    .travelCenterArea {
        width: 100%;
    }
    
    .travelCenterArea img {
        width: 100%;
    }
    
    .heroImg {
        justify-content: flex-end;
    }
    
    .heroImg img {
        width: 100%;
        position: relative;
        }
    
    .heroWrapper {
        flex-direction: column;
        padding-bottom: 80px;
    }

    .heroWrapper.mb0{
        padding-bottom: 0;
    }

    .heroDescArea span{width: 100%;margin-bottom: 10px;}
    
    .heroDescArea {
        width: 100%;
        position: relative;
        z-index: 999;
        padding: 10px 0 0px 0;
        align-items: flex-start;
    }

    .heroDescArea a{
        margin-top: 10px;
    }
    
    section.workTeam {
        margin-bottom: 40px;
    }
    
    .bannerOnText {
        max-width: 100%;
        position: relative;
        padding: 50px 15px;
    }
    
    .accordion-title:after {
        right: 10px;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: contain;
    }
    
    .accordion-title {
        padding: 14px 45px 14px 24px;
        font-size: 14px;
    }

    .accordion-content p{
        font-size: 13px;
    }
    
    .themeTitle h2 {
        font-size: 20px;
        line-height: 30px;
    }
    
    .themeTitle p {
        font-size: 15px;
        line-height: 26px;
    }
    
    .themeTitle p br {
        display: none;
    }
    
    .themeTitle {
        gap: 12px;
    }
    
    .active .accordion-title:after {
        background-size: contain;
    }
    
    .bannerImage {
        height: 100%;
        position: absolute;
    }
    
    .bannerImage img {
        height: 100%;
        object-fit: cover;
        width: 100%;
        object-position: left;
        opacity: .2;
    }
    
    .accordion {
        margin-bottom: 20px;
    }
    
    .linkButton {
        width: 100%;
    }
    .accordion-item {
        margin-bottom: 14px;
    }
    .personCard {
        padding: 10px;
    }
    
    .descriptionArea {
        width: 100%;
    }
    
    .bannerArea {
        width: 100%;
    }
    
    .heroDescArea h2 {
        width: 100%;
        font-size: 20px;
        line-height: 26px;
    }

    .heroDescArea h2 br{
        display: none;
    }

    .aboutUs .themeTitle h2 {
        font-size: 25px;
        line-height: normal;
    }
    
    .themeTitle h2 br {
        display: none;
    }
    
    .aboutUs .themeTitle p {
        font-size: 15px;
        line-height: 26px;
    }
    
    .aboutUs .themeTitle p br {
        display: none;
    }
    
    .aboutDetail p {
        font-size: 15px;
    }
    
    .aboutDetail {
        padding: 0;
    }
    
    section.aboutUs {
        padding-top: 70px;
        margin-bottom: 40px;
    }
    .contactBoxes {
        flex-direction: column;
    }
    
    .mt120 {
        margin-top: 20px;
    }
    
    .themeTitle.v2 h2 {
        font-size: 25px;
        line-height: normal;
    }
    
    .themeTitle.v2 {
        margin-bottom: 20px;
    }
    
    .contactUs {
        padding-top: 70px;
    }
    
    .contact {
        margin-bottom: 50px;
    }

    .sidebarWidthContent{
        gap: 30px;
    }

    .stepTitle h2 {
        font-size: 24px;
    }
    
    .stepTitle p {
        font-size: 15px;
    }
    .chartWrapper {
        flex-direction: column;
    }
    
    .chartArea {
        width: 100%;
        padding: 10px;
    }
    
    .chartCard {
        padding: 20px 10px;
    }
    
    .chartWidgets {
        width: 100%;
    }
    
    .priceCard {
        width: calc(100% * 1/2 - 10px);
        flex-direction: column;
    }
    
    .blocksWrapper {
        gap: 20px;
    }
    
    .capacityTr.linearTextWhite {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .btcTitle h2 {
        font-size: 26px;
    }
    
    .btcTitle a {
        font-size: 14px;
        padding: 7px 15px;
        border-radius: 6px;
    }
    
    .mb96 {
        margin-bottom: 40px;
    }
    
    .cardDescription {
        overflow: auto;
        max-width: 100%;
        padding-bottom: 10px;
    }
    
    .cardfromto > div {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cardfromto > div > img {
        transform: rotate(90deg);
        display: none;
    }

    .blockchainArea {
      font-size: 16px;
      line-height: 20px;
      gap: 8px;
  }
  .priceArea {
      font-size: 16px;
      line-height: 20px;
      gap: 8px;
  }
  .blockchainArea span,
  .priceArea span, .blockchainArea select {
      font-size: 18px;
      line-height: 24px
  }
  .fancy-select div.trigger {
      padding: 3px 0px 4px 6px;
      font-size: 16px;
      line-height: 18px;
  }
  .fancy-select ul.options li{
      font-size: 16px;
      line-height: 16px;
  }
  .fancy-select ul.options.open{
      top: 27px;
  }
  .blockchainArea select option{
      font-size: 14px;
      line-height: 16px
  }
  .posCenter .logo{
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
  }
  .posCenter .logo a img{
    height: 60px;
  }
  .resultscreen {
      margin: 0 auto;
      padding: 20px 18px;
      margin-bottom: 30px;
      border-radius: 16px;
      border: 1px solid #F930C3;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }
  .cardinfo h3 {
      font-weight: 600;
      font-size: 20px;
      color: #fff;
      margin-bottom: 25px
  }
  .cardpaymentarea {
      width: 100%;
      float: left;
      max-width: 100%;
      margin-right: 0
  }
  .paymentImg {
      width: 100%;
      float: left;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px
  }
  .cardinputarea input {
      border-radius: 14px;
      width: 100%;
      height: 45px;
      padding: 9px 20px 3px 20px
  }
  .cardinputarea span {
      font-weight: 500;
      font-size: 16px;
      line-height: 109%;
      letter-spacing: -.015em;
      color: #fff;
      margin-bottom: 12px
  }
  .virtualPostArea h2 {
      font-size: 24px;
      line-height: 26px;
      text-align: center;
      color: #fff
  }
  .virtualPostArea {
      width: 100%;
      float: left;
      margin-bottom: 20px;
      margin-top: 35px
  }
  .cardpaymentarea a.sendagain {
      font-weight: 500;
      font-size: 16px;
      line-height: 109%;
      letter-spacing: -.015em;
      color: #fff;
      float: left
  }
  .paymentImg button {
      font-size: 20px;
      line-height: 29px;
      margin-top: 30px;
      padding: 10px 30px
  }
  .resultdesc {
      font-size: 16px;
      letter-spacing: -.015em;
      display: flex;
      font-weight: 500
  }
  .resultdesc img {
      width: 20px;
      margin-right: 15px
  }
  .cardpaymentresult a img {
      width: 14px
  }
  .cardpaymentresult {
      padding: 15px 15px;
      margin-top: 50px;
      border-radius: 0 0;
      min-height: 55px;
      margin-bottom: 10px
  }
  .paymentImg {
        display: none !important;
    }
    #virtualpos{background-size: cover;}
    .totalPrice{
        font-size: 34px;
    }
    .totalCoin{
        font-size: 34px;
        text-align: left;
    }
    .inputGroup {
        flex-direction: column;
    }
    /**/
    .chooseYourLocation a {
        font-size: 11px;
        padding: 8px 14px;
    }

    .chooseYourLocation {
        padding: 10px 10px;
    }

    .locationIcon span {
        font-size: 13px;
    }

    .locationIcon img {
        height: 20px;
    }

    .heroDesc p {
        font-size: 14px;
    }

    .heroLeftSlider .swiperButtonWrapper {
        bottom: 80px;
        left: calc(50% - 40px);
    }

    .heroRightMiniDesc p {
        margin: 0;
        font-size: 13px;
    }

    .heroRightMiniDesc h2 {
        margin: 0 0 10px 0;
        font-size: 20px;
    }

    .heroRightMiniDesc > img {margin-bottom: 20px;height: 26px;}

    .heroRightMiniDesc {
        padding: 20px;
    }

    .heroRightDesc {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .appButtons .linkButton {
        width: 40px;
        height: 40px;
    }
    .logoArea a img{
        height: 35px;
    }
    .hero, .knowUs{
        margin-bottom: 60px;
    }
    .chooseModel{
        padding-bottom: 60px;
    }
    .bannerDescription{
        padding-bottom: 60px;
    }
    .widgetDesc span {
        font-size: 20px;
    }
    .widgetButtons{
        display: flex;
    }
    .widgetBottomArea{
        background: linear-gradient(180deg, rgba(5, 17, 44, 0) -26.38%, #05112C 90.79%);
    }
    .platformSlider .swiper-slide a img{
        height: 40px;
    }
    .themeTitle.alignLeft p {
        font-size: 16px;
        line-height: 26px;
    }
    .themeTitle.alignLeft h2 {
        font-size: 24px;
        line-height: 32px;
    }
    .bannerSliderWrapper {
        padding: 40px 20px 90px 20px;
        border-radius: 20px;
    }
    .appLinksButton{margin: 20px 0;}
    .bannerSlider .swiper-slide{
        padding: 0 20px;
    }
    .bannerSliderImg {
        width: 100%;
    }

    .bannerSliderImg img {
        width: 100%;
    }

    .bannerSliderItem {
        gap: 0;
        flex-direction: column;
        background: #555bea;
        border-radius: 0 0 20px 20px;
    }
    .bannerSliderDesc h2 {
        font-size: 20px;
        line-height: 26px;
    }
    .bannerSliderDesc{
        padding: 20px 10px;
    }
    .bannerSlider {
        margin-top: -80px;
    }
    .tabLinksWrapper ul li a, .tabLinksWrapper ul li a.active{
        font-size: 15px;
        padding: 6px 10px;
    }
    .bannerSliderDesc a{
        font-size: 14px;
        padding: 10px 20px;
    }
    .chooseModelCarWrapper{
        padding: 30px 20px;
    }
    .prodListWrapper {
        margin-top: -70px;
        margin-bottom: 40px;
        padding: 0 0px;
    }
    .prodImage {
        top: -30px;
    }
    .prodDetail a{
        font-size: 11px;
    }
    .prodDetail h2{
        font-size: 16px;
        line-height: 18px;
    }
    .prodDetail span{
        font-size: 13px;
    }
    .prodImage img {
        max-width: 80%;
        margin: 0 auto;
    }
    .heroLeftSlider{
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .socialWrapper {
        flex-direction: column;
        gap: 8px;
        justify-content: space-between;
        align-items: stretch;
    }
    
    .interactionLinks {
        justify-content: center;
        gap: 8px;
    }
    
    .widgetWrapper {
        flex-direction: column;
    }
    .travelChainWrapper {
        flex-direction: column;
        margin-top: 50px;
    }
    .travelCenterArea{
        display: block;
    }
    
    .bannerDescWrapper {
        flex-direction: column;
    }
    .heroImg{
        justify-content: flex-start;
        width: 100%;
        order: 2;
    }
    .header{
        padding-top: 14px;
    }

    .timelineStep {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .timelineStep .yearly {
        position: unset;
    }
    
    .timeLineDesc {
        width: 100%;
        align-items: center;
    }
    
    .timeline.reverse .timeLineWrapper .timelineStep:nth-child(even) {
        flex-direction: column;
    }
    
    .timeLineWrapper:after {
        z-index: -1;
    }
    .timeline.reverse .timelineStep:nth-child(even) .timeLineDesc h2 ,.timeLineDesc h2 {
        text-align: center;
    }
    .timeline.reverse .timelineStep:nth-child(even) .timeLineDesc {
        align-items: center;
    }
    .timeLineWrapper:before {
        width: 50px;
        height: 50px;
        background-size: contain;
        top: -110px;
    }
    .timeLineWrapper {
        margin-top: 130px;
    }
    .prodDetailContent {
        flex-direction: column;
    }
    
    .prodDescription {
        width: 100%;
        padding: 20px;
    }
    
    .prodInfoWrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .productSlider {
        width: 100%;
    }
    
    .productDetailImg {
    right: -20px;
    bottom: -20px;
    width: 100%;
    margin-top: -150px;
    }
    .prodDescription h2{
        font-size: 18px;
    }
    .productDetail{
        margin-bottom: 50px;
        padding-top: 50px;
    }
    .sidebarWidthContent {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .toggleSwitch {
        max-width: 100%;
        padding: 20px 40px;
    }
    .transactionCard {
        flex-direction: column;
    }
    .recoveryCodeWrapper {
        flex-direction: column;
        gap: 10px;
    }
    
    .recoveryCodeWrapper > .inputWrapper {
        width: 100%;
    }   
    .checkboxContainer {
        white-space: normal;
        display: block;
    }
    .bottomLogin{
        font-size: 13px;
        gap: 14px;
    }
    .forgotPassword {
        position: unset;
        margin-bottom: 10px;
    }
    .walletPlatform .checkboxContainer {
        margin-bottom: 15px;
    }
    .adressArea {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 35px;
        font-size: 14px;
    }
    .walletAdress input, .singleInput{
        padding: 16px 10px;
    }
    .tableTitle span {
        position: unset;
        font-size: 20px;
        line-height: 26px;
        text-align: center;
        justify-content: center;
    }
    .bookingSolutions {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 10px;
    }
    .bsImage {
        position: unset;
        display: flex;
        flex-direction: column;
    }
    .bsRightDetail ul li{
        font-size: 14px;
    }
    .knowUsWrapper{
        margin-top: 20px;
    }
    .knowUsWrapper ul {
        flex-direction: column;
        padding: 0;
        gap: 20px;
    }

    .knowUsWrapper {
        padding: 0;
    }
    .singleBanner.holidayPay {
        margin: 0;
        margin-bottom: -130px;
    }
    .securityBox ul li {
        width: calc(100% * 1/2 - 10px);
    }

    .securityBox ul {
        gap: 50px 20px;
    }

    .securityBox ul li img {
        width: 50px;
        height: 50px;
    }
    .socialMedia{
        margin-bottom: 60px;
    }

    .knowUsWrapper ul li p{
        font-size: 24px;
        line-height: 30px;
    }
    .platforms{margin-bottom: 60px;}
    .learnMoreWrapper {
        flex-direction: column;
        padding: 0;
    }

    .learnMoreImg {
        width: 100%;
    }

    .learnMoreDesc {
        width: 100%;
        padding: 0;
    }

    .learnMoreWrapper{margin-bottom: 40px;}

    .learnMoreDesc .themeTitle h2 {
        font-size: 24px;
        line-height: 34px;
    }

    .learnMoreImg{order: 1; margin-bottom: 40px;}
    .learnMoreDesc{order: 2;}

    .learnMoreDesc > img {
        height: 54px;
        margin-bottom: 6px;
    }
    .heroWrapper.otherImg{
        padding-bottom: 130px;
        margin-bottom: 50px;
    }
    .bgLineHeight {
        height: 120px;
        margin-top: 50px;
    }
    .centralDetailWrapper ul {
        flex-direction: column;
        gap: 20px;
    }

    .centralDetailWrapper ul li {
        width: 100%;
    }
    .accordionArea.half .accordion-item{
        width: 100%;
    }
    .newContactForm {
        width: 100%;
        padding: 0;
    }

    .newContactDescription, .mapArea {
        width: 100%;
    }

    .newContactWrapper {
        flex-direction: column;
        gap: 50px;
        padding: 0 10px;
        margin-top: 40px;
    }

    .newContactBoxes {
        flex-direction: column;
    }
    .exchangeInputGroup input {
        height: 50px;
        font-size: 14px;
    }
    .exchangeInputGroup input,
    .walletPlatform .exchangeInputGroup input, 
    .walletPlatform .exchangeInputGroup input::placeholder {
        font-size: 14px;
    }
    .posItem {
        width: 100%;
    }

    .posItemDetail {
        padding: 24px;
    }

    .footerMenuWrapper{
        padding: 40px 30px;
        flex-direction: column;
    }
    .footerMenuWrapper ul{
        margin-bottom: 20px;
    }
    .footerMenuWrapper ul span{
        margin-bottom: 10px;
        font-size: 15px;
    }

    .footerMenuWrapper ul li a{
        font-size: 14px;
        line-height: 28px;
    }

    .heroLeftSlider {
        width: 100%;
    }

    .heroWrapper {
        flex-direction: column;
    }

    .heroDesc h2 {
        font-size: 18px;
        line-height: 30px;
    }

    .heroDesc {
        gap: 10px;
        padding: 30px 10px 10px 10px;
        justify-content: flex-start;
    }

    .heroDesc p br {
        display: none;
    }

    .swiperButtonWrapper {
        width: 80px;
        height: 30px;
    }

    .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
        width: 24px;
        height: 24px;
    }

    .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
        width: 24px;
        height: 24px;
    }
    .heroRightDesc h2{
        font-size: 18px;
    }
    .knowUsWrapper ul li{
        width: 100%;
        padding: 30px 14px;
    }
    .footer .logoArea{
        flex-direction: column;
        gap: 30px;
    }
    .footer .headerWrapper{
        flex-direction: column;
        gap: 30px;
    }
    .select-wrapper{
        gap: 10px;
        flex-direction: column;
        align-items: center;
    }
    .selectBoxItem{
        width: 100%;
    }
    .selectBoxItem select{
        width: 100%;
    }
    .bannerHero.mt40{
        margin-top: 0;
        margin-bottom: 40px;
    }

    .bannerHeroWrapper {flex-direction: column;gap: 30px;}

    .heroDescArea p {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 0;
    }

    .chooseTabs {}

    .station-black {
        flex-direction: column;
    }

    .station-bar-item span {
        font-size: 12px;
        line-height: 20px;
    }
    .solutionsWrapper {
        flex-direction: column;
    }

    .singleSolutionBanner {
        width: 100%;
    }

    .solutionList {
        width: 100%;
    }

    .solutionDesc {
        padding: 10px;
    }

    .solutionDesc h2 {
        font-size: 22px;
    }

    .solutionList ul {
        gap: 16px;
    }

    .solutionList ul li {
        width: calc(50% - 8px);
    }

    .solutionList ul {
        flex-wrap: wrap;
    }

    .solutionList.fullSolution ul li {
        width: calc(50% - 8px);
    }
    .priceListWrapper {
        flex-direction: column;
        margin-top: 50px;
        margin-bottom: 60px;
    }

    .priceListItem {
        width: 100%;
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .priceImg img {
        height: 140px;
        bottom: 40px;
        margin: 0 auto;
        left: 0;
        right: 0;
        position: unset;
    }

    .priceImg {
        width: 100%;
    }

    .priceTop {
        flex-direction: column-reverse;
        gap: 26px;
    }

    .priceItemLeft {
        width: 100%;
    }
    .pageDouble ul {
        flex-direction: column;
        gap: 0;
    }

    .pageDouble ul li {
        width: 100%;
    }

    .dikeyLinWraper {
        display: none;
    }

    .dLeftImg {
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid #D6DAE9;
        padding-bottom: 26px;
    }

    .dLeftImg img {
        max-width: 100%;
    }

    .dRightImg {
        padding: 0;
    }

    .dRightImg img {
        max-width: 100%;
    }

    .doubleImages {
        flex-direction: column;
        gap: 24px;
    }

    .appDeviceWrapper {
        flex-direction: column;
    }

    .appDescArea.fullDevArea {
        padding: 0;
        flex-direction: column;
    }

    .appDescArea.fullDevArea .appMiniDesc {
        width: 100%;
        padding: 16px;
    }

    .appDescArea.fullDevArea .appDeviceImg {
        width: 100%;
        justify-content: center;
    }

    .appDescArea {
        padding: 24px 24px 0px 24px;
    }
    
    .appDescArea.fullDevArea .reverseDevice{
        order: 2;
    }
    .helperLinks ul {
        overflow: auto;
        justify-content: flex-start;
        padding-bottom: 10px;
    }

    .helperLinks ul li {
        white-space: nowrap;
    }

    ul::-webkit-scrollbar {
        height:7px;
    }
    .charginListDetail{
        max-width: 460px;
    }
    #infoBox{
        width: 100%;
        max-width: 100%;
        position: unset;
    }
    .mapInfoWrapper{
        flex-direction: column;
        gap: 32px;
    }
    .mapArea #infoBox{
        margin-bottom: 32px;
    }
}

@media screen and (max-width: 900px) {
    .tableWrapper .dt-layout-table {
        overflow-x: auto;
        padding: 5px;
    }
    #assets tbody tr {
        box-shadow: 0px 10px 48px 0px #0000000d;
    }
    .posContainer{
        padding: 40px;
    }
    .chargingListWrapper,
    .mapInfoWrapper{
        width: 100%;
        max-width: 100%;
    }
    .stationMapSelect {
        flex-direction: column;
        gap: 32px;
    }
    #map{
        height: 450px;
    }
}


@media screen and (max-width: 400px) {
    .posContainer{
        padding: 40px 20px;
    }
}