/* 视口宽度最小为320px，最大为640px时，呈现样式 */
    @media (min-width: 0px) and (max-width: 640px) {

      .banner {
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        padding-bottom: 50px;
        background-color: #AFAFAF;
        color: #fff;
      }

      .banner-title {
        font-size: 32px;
        font-weight: bold;
        padding-top: 87px;
      }

      .banner-des {
        width: 80%;
        white-space: pre-line;
      }

      .banner-btn-box {
        cursor: pointer;
        width: 200px;
        height: 60px;
        background: #FFFFFF;
        border: 1px solid #707070;
        border-radius: 4px;
        color: #333;
      }

      .type-box {
        width: 92px;
        height: 115px;
        background-color: #AFAFAF;
      }

      .type-circular {
        width: 50px;
        height: 50px;
        background-color: #fff;
        border-radius: 50%;
      }

      .app-root {
        padding: 0 0.5rem;
      }

      /*--------------------------- component  inputselect----------------------------- start*/

      .inputselect-search {
        margin-top: 50px;
        display: flex;
        height: 50px !important;
      }

      .inputselect-search-input-box {
        display: flex;
        align-items: center;
        flex: 1;
        border: 1px solid #707070;
        padding-left: 19px;
        border-radius: 8px 0 0 8px;
        background-color: #FFF;
      }

      .inputselect-search-input-before-prefix {
        background-image: url(../img/search.svg);
        background-size: cover;
        width: 23px;
        height: 22px;
      }

      .inputselect-search-input {
        padding-left: 10px;
        border: none;
        font-size: 16px;
        height: auto;
        width: 100%;
        border-radius: 8px 0 0 8px;
      }

      .inputselect-search-select-box {
        border: 1px solid #707070;
        width: 200px;
        border-left: 0px !important;
        border-radius: 0 8px 8px 0;
        background-color: #FFF;
      }

      .inputselect-search-select {
        border: none;
        font-size: 16px;
        height: 100%;
        width: 100%;
        border-radius: 0 8px 8px 0;
        appearance: none;
        padding-left: 20px;
      }

      .inputselect-search-select-arrow {
        padding-right: 20px;
        background: url(../img/select_arrow_im.svg) no-repeat;
        background-size: contain;
        height: 18px !important;
        width: 19px !important;
        margin-top: 15px;
        margin-left: -39px;
        /* float: right; */
        z-index: 99;
        position: absolute;
      }


      /*--------------------------- component  inputselect----------------------------- end*/


      /*--------------------------- component  powercard----------------------------- start*/


      .powercard-box {
        padding-bottom: 20px;
        overflow-x: auto;
      }

      .powercard-box-item {
        display: flex;
      }

      .powercard-card-box {
        margin-left: 15px;
        margin-top: 25px;
      }

      .powercard-card-item {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 180px;
        height: 220px;
        border-radius: 20px;
      }

      .powercard-card-item-high {
        background-color: #99ECE7;
      }

      .powercard-card-item-low {
        background-color: #BBBBBB!important;
        filter: grayscale(1)!important;
      }

      .powercard-card-item-img {
        height: 108px;
        width: 105px;
        background-position: 50%;
        background-size: contain;
        background-repeat: no-repeat;
      }

      .powercard-card-item-text {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: bold;

      }



      /*--------------------------- component  powercard----------------------------- end*/



      /*--------------------------- component  viewcard----------------------------- start*/

      .viewcard-box {
        width: 300px;
        /* height: 380px; */
        background-color: #F2F2F2;
        box-shadow: 0px 3px 6px #00000029;
      }

      .viewcard-box-space {
        /* margin-bottom: 60px; */
        width: 100%;
        background-color: #F2F2F2;
        box-shadow: 0px 3px 6px #00000029;
        margin-bottom: 30px;
        cursor: pointer;
      }

      .viewcard-img {
        width: 100%;
        height: 190px;
        background-color: #A1A1A1;
      }

      .viewcard-module {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
      }

      .viewcard-module-box {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
      }

      .viewcard-comment-img {
        background-image: url(../img/comment.svg);
        background-size: contain;
        width: 25px;
        height: 25px;
      }

      .viewcard-content {
        padding: 20px;
        background-color: #fff;
      }

      .viewcard-content-max {
        /* width: 300px; */
        /* height: 190px; */
        padding: 20px;
        background-color: #fff;
      }

      .viewcard-content-title {
        height: 54px;
        color: #40A6F3;
        font-size: 18px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .viewcard-nickname-box {
        margin-top: 10px;
        display: flex;
        align-items: center;
      }

      .viewcard-nickname-img {
        border-radius: 50%;
        width: 25px;
        height: 25px;
        /* background-color: #A1A1A1; */
      }

      .viewcard-nickname-text {
        margin-left: 10px;
      }

      .viewcard-bottom-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }



      /*--------------------------- component  viewcard----------------------------- end*/





      /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

      /*--------------------------- power.html----------------------------- start*/

      .power-content {
        margin-top: 40px;
        padding-bottom: 50px;
        display: flex;
        justify-content: center;
        background-color: #F7F7F7;
      }

      .power-content-box {
        width: 900px;
      }

      .power-switch-box {
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .power-switch-left-text {
        width: 200px;
        font-size: 20px;
        font-weight: 600;
        color: #C4C4C4;
      }

      .power-switch-left-arrow {
        cursor: pointer;
        background: url(../img/select_arrow.svg) no-repeat;
        background-size: contain;
        transform: rotate(90deg);
        height: 46px !important;
        width: 46px !important;
      }

      .power-switch-left-arrow-disabled {
        cursor: not-allowed;
        pointer-events:none;
        background: url(../img/select_arrow_disabled.svg) no-repeat;
        background-size: contain;
        transform: rotate(90deg);
        height: 46px !important;
        width: 46px !important;
      }

      .power-switch-center-text {
        width: 200px;
        font-size: 20px;
        font-weight: bold;
        color: #333;
      }

      .power-switch-right-arrow {
        cursor: pointer;
        background: url(../img/select_arrow.svg) no-repeat;
        background-size: contain;
        transform: rotate(270deg);
        height: 46px !important;
        width: 46px !important;
      }

      .power-switch-right-arrow-disabled {
        cursor: not-allowed;
        pointer-events:none;
        background: url(../img/select_arrow_disabled.svg) no-repeat;
        background-size: contain;
        transform: rotate(270deg);
        height: 46px !important;
        width: 46px !important;
      }

      .power-switch-right-text {
        width: 200px;
        font-size: 20px;
        font-weight: bold;
        color: #C4C4C4;
      }


      .power-card-box {
        box-shadow: rgba(0, 0, 0, 0.16) 4px 3px 16px inset;
        margin-top: 50px;
        padding-right: 40px;
        padding-left: 40px;
        padding-bottom: 45px;
        width: 820px;
        overflow-x: auto;
      }


      .power-dialog {
        display: none;
      }

      .power-dialog-header {
        margin-top: 100px;
        display: flex;
        justify-content: center;
      }

      .power-dialog-header-box {
        display: flex;
        justify-content: center;
        width: 300px;
        height: 0;
        border-bottom: 300px solid #D2F45B;
        border-left: 120px solid transparent;
        border-right: 120px solid transparent;
        /* transform: perspective(1px) rotateX(-1deg); */
        border-width: 1px 25px 60px;
      }

      .power-dialog-header-title {
        margin-top: 10px;
        font-size: 24px;
        font-weight: bold;
      }

      .power-dialog-content {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .power-dialog-left-arrow {
        margin-top: -130px;
        cursor: pointer;
        background: url(../img/down.svg) no-repeat;
        background-size: cover;
        transform: rotate(90deg);
        height: 42px !important;
        width: 85px !important;
      }

      .power-dialog-left-arrow-disabled {
        margin-top: -130px;
        cursor: not-allowed;
        pointer-events:none;
        background: url(../img/down_disabled.svg) no-repeat;
        background-size: cover;
        transform: rotate(90deg);
        height: 42px !important;
        width: 85px !important;
      }


      .power-dialog-center {
        display: flex;
        width: 700px;
      }

      .power-dialog-center-img {
        margin-left: 50px;
        background-position: 50%;
        background-size: contain;
        background-repeat: no-repeat;
        height: 190px;
        width: 200px;
      }

      .power-dialog-center-des {
        flex: 1;
      }

      .power-dialog-center-des-box {
        width: 427px;
        height: 255px;
      }

      .power-dialog-center-des-item {
        margin-top: 15px;
      }

      .power-dialog-center-des-item-dot {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #6FCAE1;
      }

      .power-dialog-center-des-item-title {
        font-size: 18px;
        font-weight: 600;
        color: #00A2CB;
      }

      .power-dialog-center-des-item-ul {
        padding-left: 15px;
      }

      .power-dialog-center-des-item-ul-li {
        margin-top: 5px;
      }

      .power-dialog-right-arrow {
        margin-top: -130px;
        cursor: pointer;
        background: url(../img/down.svg) no-repeat;
        background-size: cover;
        transform: rotate(270deg);
        height: 42px !important;
        width: 85px !important;
      }

      .power-dialog-right-arrow-disabled {
        margin-top: -130px;
        cursor: not-allowed;
        pointer-events:none;
        background: url(../img/down_disabled.svg) no-repeat;
        background-size: cover;
        transform: rotate(270deg);
        height: 42px !important;
        width: 85px !important;
      }




      /*--------------------------- power.html----------------------------- end*/


      /*--------------------------- home.html----------------------------- start*/

      .home-out {
        cursor: pointer;
      }

      .home-more {
        display: flex;
        align-items: center;
      }

      .home-triangle-right {
        margin-left: 0.6rem;
        width: 0;
        height: 0;
        border-top: .5rem solid transparent;
        border-left: .75rem solid #848484;
        border-bottom: .5rem solid transparent;
      }

      .diagnosis-after-btn {
        background: #1BA4DD!important;
        -webkit-box-shadow: 0 4px 0 0 #177EAA!important;
        box-shadow: 0 4px 0 0 #177EAA!important;
        /* color: #fff; */
      }

      /*--------------------------- home.html----------------------------- end*/
    }

    @media (min-width: 640px) {
      .min-h-38 {
        min-height: 38px;
      }
      
      .banner {
        /* margin-top: 150px; */
        /* width: 100%; */
        min-width: 1000px;
        /* background-position:50%; */
        background-size: cover;
        background-repeat: no-repeat;
        /* height: 450px; */
        padding-bottom: 50px;
        background-color: #AFAFAF;
        color: #fff;

      }

      .banner-title {
        font-size: 32px;
        font-weight: bold;
        padding-top: 87px;
      }

      .banner-des {
        max-width: 500px;
        white-space: pre-line;
      }

      .banner-btn-box {
        cursor: pointer;
        width: 250px;
        height: 60px;
        background: #FFFFFF;
        border: 1px solid #707070;
        border-radius: 4px;
        color: #333;
      }



      .type-box {
        width: 210px;
        height: 130px;
        background-color: #AFAFAF;
      }

      .type-circular {
        width: 71px;
        height: 71px;
        background-color: #fff;
        border-radius: 50%;
      }

      /*--------------------------- component  inputselect----------------------------- start*/

      .inputselect-search {
        margin-top: 50px;
        display: flex;
        height: 50px !important;
      }

      .inputselect-search-input-box {
        display: flex;
        align-items: center;
        flex: 1;
        border: 1px solid #707070;
        padding-left: 19px;
        border-radius: 8px 0 0 8px;
        background-color: #FFF;
      }

      .inputselect-search-input-before-prefix {
        background-image: url(../img/search.svg);
        background-size: cover;
        width: 23px;
        height: 22px;
      }

      .inputselect-search-input {
        padding-left: 10px;
        border: none;
        font-size: 16px;
        height: auto;
        width: 100%;
        border-radius: 8px 0 0 8px;
      }

      .inputselect-search-select-box {
        border: 1px solid #707070;
        width: 200px;
        border-left: 0px !important;
        border-radius: 0 8px 8px 0;
        background-color: #FFF;
      }

      .inputselect-search-select {
        border: none;
        font-size: 16px;
        height: 100%;
        width: 100%;
        border-radius: 0 8px 8px 0;
        appearance: none;
        padding-left: 20px;
      }

      .inputselect-search-select-arrow {
        padding-right: 20px;
        background: url(../img/select_arrow_im.svg) no-repeat;
        background-size: contain;
        height: 18px !important;
        width: 19px !important;
        margin-top: 15px;
        margin-left: -39px;
        /* float: right; */
        z-index: 99;
        position: absolute;
      }


      /*--------------------------- component  inputselect----------------------------- end*/


      /*--------------------------- component  powercard----------------------------- start*/


      .powercard-box {
        padding-bottom: 20px;
        overflow-x: auto;
      }

      .powercard-box-item {
        display: flex;
      }

      .powercard-card-box {
        margin-left: 15px;
        margin-top: 25px;
      }

      .powercard-card-item {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 180px;
        height: 220px;
        border-radius: 20px;
      }

      .powercard-card-item-high {
        background-color: #99ECE7;
      }

      .powercard-card-item-low {
        background-color: #BBBBBB!important;
        filter: grayscale(1)!important;
      }

      .powercard-card-item-img {
        height: 108px;
        width: 105px;
        background-position: 50%;
        background-size: contain;
        background-repeat: no-repeat;
      }

      .powercard-card-item-text {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: bold;

      }



      /*--------------------------- component  powercard----------------------------- end*/



      /*--------------------------- component  viewcard----------------------------- start*/

      .viewcard-box {
        width: 300px;
        /* height: 380px; */
        background-color: #F2F2F2;
        box-shadow: 0px 3px 6px #00000029;
        margin-bottom: 20px;
        margin-right: 30px;
      }


      .viewcard-box:nth-child(3n) {
        margin-right: 0px !important;
      }

      .viewcard-box-space {
        /* margin-bottom: 60px; */
        width: 300px;
        background-color: #F2F2F2;
        box-shadow: 0px 3px 6px #00000029;
        margin-right: 30px;
        cursor: pointer;
      }

      .viewcard-img {
        width: 300px;
        height: 190px;
        background-color: #A1A1A1;
      }

      .viewcard-module {
        margin-top: 20px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .viewcard-module-box {
        margin-top: 20px;
        display: flex;
      }

      .viewcard-comment-img {
        background-image: url(../img/comment.svg);
        background-size: contain;
        width: 25px;
        height: 25px;
      }

      .viewcard-content {
        /* width: 300px; */
        /* height: 190px; */
        /* height: 150px; */
        padding: 20px;
        background-color: #fff;
      }

      .viewcard-content-max {
        /* width: 300px; */
        /* height: 190px; */
        /* height: 180px; */
        padding: 20px;
        background-color: #fff;
      }

      .viewcard-content-title {
        height: 54px;
        color: #40A6F3;
        font-size: 18px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .viewcard-nickname-box {
        margin-top: 10px;
        display: flex;
        align-items: center;
      }

      .viewcard-nickname-img {
        border-radius: 50%;
        width: 25px;
        height: 25px;
        /* background-color: #A1A1A1; */
      }

      .viewcard-nickname-text {
        margin-left: 10px;
      }


      .viewcard-bottom-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }






      /*--------------------------- component  viewcard----------------------------- end*/




      /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

      /*--------------------------- power.html----------------------------- start*/

      .power-content {
        margin-top: 40px;
        padding-bottom: 50px;
        display: flex;
        justify-content: center;
        background-color: #F7F7F7;
      }

      .power-content-box {
        width: 900px;
      }

      .power-switch-box {
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .power-switch-left-text {
        width: 200px;
        font-size: 20px;
        font-weight: 600;
        color: #C4C4C4;
      }

      .power-switch-left-arrow {
        cursor: pointer;
        background: url(../img/select_arrow.svg) no-repeat;
        background-size: contain;
        transform: rotate(90deg);
        height: 46px !important;
        width: 46px !important;
      }

      .power-switch-left-arrow-disabled {
        cursor: not-allowed;
        pointer-events:none;
        background: url(../img/select_arrow_disabled.svg) no-repeat;
        background-size: contain;
        transform: rotate(90deg);
        height: 46px !important;
        width: 46px !important;
      }

      .power-switch-center-text {
        width: 200px;
        font-size: 20px;
        font-weight: bold;
        color: #333;
      }

      .power-switch-right-arrow {
        cursor: pointer;
        background: url(../img/select_arrow.svg) no-repeat;
        background-size: contain;
        transform: rotate(270deg);
        height: 46px !important;
        width: 46px !important;
      }

      .power-switch-right-arrow-disabled {
        cursor: not-allowed;
        pointer-events:none;
        background: url(../img/select_arrow_disabled.svg) no-repeat;
        background-size: contain;
        transform: rotate(270deg);
        height: 46px !important;
        width: 46px !important;
      }

      .power-switch-right-text {
        width: 200px;
        font-size: 20px;
        font-weight: bold;
        color: #C4C4C4;
      }


      .power-card-box {
        box-shadow: rgba(0, 0, 0, 0.16) 4px 3px 16px inset;
        margin-top: 50px;
        padding-right: 40px;
        padding-left: 40px;
        padding-bottom: 45px;
        width: 820px;
        overflow-x: auto;
      }


      .power-dialog {
        display: none;
      }

      .power-dialog-header {
        margin-top: 100px;
        display: flex;
        justify-content: center;
      }

      .power-dialog-header-box {
        display: flex;
        justify-content: center;
        width: 300px;
        height: 0;
        border-bottom: 300px solid #D2F45B;
        border-left: 120px solid transparent;
        border-right: 120px solid transparent;
        /* transform: perspective(1px) rotateX(-1deg); */
        border-width: 1px 25px 60px;
      }

      .power-dialog-header-title {
        margin-top: 10px;
        font-size: 24px;
        font-weight: bold;
      }

      .power-dialog-content {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .power-dialog-left-arrow {
        margin-top: -130px;
        cursor: pointer;
        background: url(../img/down.svg) no-repeat;
        background-size: cover;
        transform: rotate(90deg);
        height: 42px !important;
        width: 85px !important;
      }

      .power-dialog-left-arrow-disabled {
        margin-top: -130px;
        cursor: not-allowed;
        pointer-events:none;
        background: url(../img/down_disabled.svg) no-repeat;
        background-size: cover;
        transform: rotate(90deg);
        height: 42px !important;
        width: 85px !important;
      }


      .power-dialog-center {
        display: flex;
        width: 700px;
      }

      .power-dialog-center-img {
        margin-left: 50px;
        background-position: 50%;
        background-size: contain;
        background-repeat: no-repeat;
        height: 190px;
        width: 200px;
      }

      .power-dialog-center-des {
        flex: 1;
      }

      .power-dialog-center-des-box {
        width: 427px;
        height: 255px;
      }

      .power-dialog-center-des-item {
        margin-top: 15px;
      }

      .power-dialog-center-des-item-dot {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #6FCAE1;
      }

      .power-dialog-center-des-item-title {
        font-size: 18px;
        font-weight: 600;
        color: #00A2CB;
      }

      .power-dialog-center-des-item-ul {
        padding-left: 15px;
      }

      .power-dialog-center-des-item-ul-li {
        margin-top: 5px;
      }

      .power-dialog-right-arrow {
        margin-top: -130px;
        cursor: pointer;
        background: url(../img/down.svg) no-repeat;
        background-size: cover;
        transform: rotate(270deg);
        height: 42px !important;
        width: 85px !important;
      }

      .power-dialog-right-arrow-disabled {
        margin-top: -130px;
        cursor: not-allowed;
        pointer-events:none;
        background: url(../img/down_disabled.svg) no-repeat;
        background-size: cover;
        transform: rotate(270deg);
        height: 42px !important;
        width: 85px !important;
      }




      /*--------------------------- power.html----------------------------- end*/


      /*--------------------------- home.html----------------------------- start*/

      .home-out {
        cursor: pointer;
      }

      .home-more {
        display: flex;
        align-items: center;
      }

      .home-triangle-right {
        margin-left: 20px;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-left: 20px solid #848484;
        border-bottom: 15px solid transparent;
      }

      .diagnosis-after-btn {
        background: #1BA4DD!important;
        -webkit-box-shadow: 0 4px 0 0 #177EAA!important;
        box-shadow: 0 4px 0 0 #177EAA!important;
        /* color: #fff; */
      }


      /*--------------------------- home.html----------------------------- end*/
    }



    @media (min-width: 0px) and (max-width: 640px) {
      .m-t-50 {
        margin-top: 5rem;
      }
    }
    @media (min-width: 640px) {
      .m-t-50 {
        margin-top: 5rem;
      }
    }


    .string-with-spaces {
      white-space: pre-wrap; /* 或者使用 white-space: pre; */
  }
  

  [v-cloak] {
    display: none;
  }