img {
    vertical-align: top;
    border: none
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
fieldset,
lengend,
button,
input,
textarea,
th,
td {
    margin: 0;
    padding: 0;
}


body,
button,
input,
select,
textarea {}








ul,
ol {
    list-style: none;
}


a {
    text-decoration: none;
}

abbr[title],
acronym[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

q:before,
q:after {
    content: '';
}

fieldset,
img {
    border: none;
}

button,
input,
select,
textarea {
    font-size: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    border: none;
    height: 1px;
}



@font-face {
    font-family: 'Harmoney';
    src: url('./font/HarmonyOS_SansSC_Regular.ttf') format('truetype');

}

@font-face {
    font-family: 'HarmoneyTiny';
    src: url('./font/HarmonyOS_SansSC_Thin.ttf') format('truetype');

}

@font-face {
    font-family: 'HarmoneyLight';
    src: url('./font/HarmonyOS_SansSC_Light.ttf') format('truetype');

}

.main_title {
    font-size: 35rem;
    border-bottom: 1px solid #7D7D7D;
    position: relative;
    display: flex;
    padding-bottom: 11rem;
    justify-content: space-between;
    line-height: 35rem;
    font-weight: 600;

}
.main_txt{
    font-size: 18rem;
    line-height: 35rem;
    color: #444;
    font-family: 'HarmoneyLight';
    font-weight: 300;
}

.main_btn_group{
    display: flex;
}
.main_btn_group a{
   display: inline-block;
   padding: 0rem 24rem;
   color: #747474;
   border:1rem solid #747474;
   font-size: 18rem;
   font-weight: 300;
   margin-left: 38rem;
   line-height: 32rem;
}
.main_btn_group a.active{
    background: linear-gradient( 68deg, #1F2677 0%, #00AEB9 99%, #00AEB9 100%);
    color:#fff;
}

.main_title:after {
    content: '';
    position: absolute;
    background: linear-gradient(180deg, #27ABDA 0%, #0582D2 22%, #29C0E2 100%);
    height: 26rem;
    width: 2rem;
    left: -15rem;
    top: 8rem;
}

.inner_base_wrap {
    width: 1200rem;
    margin-left: 400rem;
    padding-top: 130rem;
}





.mask {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    overflow-y: scroll;
    z-index: 99;
}

.p_a {
    position: absolute;
}

.hide {
    display: none;
}


.full_wrap {
    width: 100%;
    padding: 0px 360rem;
    box-sizing: border-box;
}


.img_off {
    filter: grayscale(0.9);
    opacity: 0.9;
}

.btn_wrap_white {
    position: fixed;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    display: flex;
    padding: 0rem 0.17rem;
    border-top: 1px solid #D8D8D8;
    background-color: #fff;
    height: 69px;
}

.btn_red {
    background-color: #F44A30;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.btn_orange {
    background-color: #FA8B3B;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.btn_gray {
    display: inline-block;
    font-size: 14px;
    border: 1px solid #F8F8F8;
    padding: 5px 15px;
    color: #1C1B1E;
    border-radius: 14px;
    text-align: center;
    background-color: #F8F8F8;
}

.btn_gray_off {
    display: inline-block;
    font-size: 14px;
    border: 1px solid #F8F8F8;
    padding: 5px 15px;
    color: #cbcbcb;
    border-radius: 14px;
    text-align: center;
    background-color: #F8F8F8;
}

.btn_blue_mini {
    display: inline-block;
    font-size: 12px;
    background-color: #009CB2;
    padding: 5px 10px;
    color: #fff;
    border-radius: 12px;
    margin-left: 10px;
    text-align: center;
}

.btn_blue_big {
    display: inline-block;
    font-size: 14rem;
    background-color: #009CB2;
    width: 228rem;
    height: 45rem;
    line-height: 45rem;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.btn_blue_big:hover {
    background-color: #0e7583;
    color: #fff;
}

.btn_blue_big_border {
    display: inline-block;
    font-size: 15px;
    border: 1px solid #009CB2;
    width: 100%;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: #009CB2;
    border-radius: 19px;
}

.btn_blue_fixed {
    display: inline-block;
    font-size: 15px;
    background-color: #009CB2;
    width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}

.btn_blue_fixed:hover {
    background-color: #1b6bdb;
}

.btn_blue_border {
    display: inline-block;
    font-size: 12px;
    border: 1px solid #009CB2;
    padding: 5px 10px;
    color: #009CB2;
    border-radius: 12px;
    text-align: center;
}

.btn_blue_border_gray_bg {
    display: inline-block;
    font-size: 14px;
    border: 1px solid #009CB2;
    padding: 5px 15px;
    color: #009CB2;
    border-radius: 14px;
    text-align: center;
    background-color: #E8EEF1;
}

.btn_full_blue {
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    background-color: #009CB2;
    border-radius: 20px;
}

.btn_gray_big {
    display: inline-block;
    font-size: 14rem;
    background-color: #DADCDE;
    width: 228rem;
    height: 45rem;
    line-height: 45rem;
    text-align: center;
    color: #000F16;
    cursor: pointer;
}

.btn_gray_big:hover {
    background-color: #a0a0a0;
    color: #000F16;
}

.btn_gray_big img {
    width: 17rem;
    height: 21rem;
    vertical-align: text-bottom;
}

.btn_white {
    border: 1px solid #000F16;
    color: #000F16;
    font-size: 14rem;
    width: 210rem;
    height: 48rem;
    line-height: 46rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: auto;
}

.detail_nav_btn {
    display: inline-block;
    border: 1px solid #000F16;
    color: #000F16;
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    text-align: center;
    line-height: 40rem;
    cursor: pointer;
}

.detail_nav_btn i {
    font-size: 18rem;
}

.txt_center {
    text-align: center;
}

.txt_right {
    text-align: right;
}

.bold {
    font-weight: bold;
}

.bold_500 {
    font-weight: 500;
}

.ft_38 {
    font-size: 38rem;
}

.ft_36 {
    font-size: 36rem;
}
.ft_26 {
    font-size: 26rem;
}

.ft_24 {
    font-size: 24rem;
}

.ft_22 {
    font-size: 22rem;
}

.ft_20 {
    font-size: 20rem;
}

.ft_18 {
    font-size: 18rem;
}

.ft_16 {
    font-size: 16rem;
}

.ft_15 {
    font-size: 15rem;
}

.ft_14 {
    font-size: 14rem;
}

.ft_13 {
    font-size: 13rem;
}

.ft_12 {
    font-size: 12rem;
}

.ft_10 {
    font-size: 10rem;
}

.mt5 {
    margin-top: 5rem;
}

.mt8 {
    margin-top: 8rem;
}

.mt10 {
    margin-top: 10rem;
}

.mt15 {
    margin-top: 15rem;
}

.mt20 {
    margin-top: 20rem;
}

.mt30 {
    margin-top: 30rem;
}

.mt40 {
    margin-top: 40rem;
}

.mt50 {
    margin-top: 50rem;
}

.mr5 {
    margin-right: 5rem;
}

.mr8 {
    margin-right: 8rem;
}

.mr20 {
    margin-right: 20rem;
}

.mb90 {
    margin-bottom: 90rem;
}

.mb60 {
    margin-bottom: 60rem;
}

.pb90 {
    padding-bottom: 90rem;
}

.pb30 {
    padding-bottom: 30rem;
}

.pb50 {
    padding-bottom: 50rem;
}

.pt10 {
    padding-top: 10px;
}

.pr10 {
    padding-right: 10px;
}


.color_white {
    color: #fff;
}

.color_black0F16 {
    color: #000F16;
}

.color_orangeF5 {
    color: #f5a360;
}

.color_orange {
    color: #FF631B;
}

.color_red {
    color: #F63828
}

.color_blue {
    color: #4d6bfd;
}
.color_blue_009C {
    color: #009CB2;
}


.color_green {
    color: #14c078;
}

.color_gray99 {
    color: #999
}

.color_gray79 {
    color: #797979;
}

.color_gray5A {
    color: #5A5A5A;
}

.color_gray8E {
    color: #8E8E8E;
}

.bg_color_white {
    background-color: #fff;
}

.bg_color_f5 {
    background-color: #f5f7f9;
}

.color_status_yellow {
    background-color: #8B864E;
}

.color_status_blue {
    background-color: #009CB2;
}

.color_status_end {
    background-color: #6f95da;
}

.color_status_playing {
    background-color: #e87c0c;
}

.color_status_fail {
    background-color: #888888;
}

.border_top_gary {
    border-top: 1px solid #F0F0F0;
}


.white_card {
    width: 100%;
    padding: 30px;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
}

.flex_between_normal {
    display: flex;
    justify-content: space-between;
}

.flex_between_center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex_around_center {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flex_start_center {
    display: flex;
    justify-content: start;
    align-items: center;
}

.flex_center_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex_normal_wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.upload_btn1 {
    background-color: #EBEBEB;
    color: #000F16;
    font-size: 16rem;
    display: inline-block;
    width: 107rem;
    height: 40rem;
    text-align: center;
    line-height: 40rem;
    cursor: pointer;
}

.upload_btn1 .up_icon {
    width: 15rem;
    height: 17rem;
    vertical-align: text-bottom;
}

body {
    background-color: #EFEFEF;
}



.uploadimage {
    background-size: contain;
    background-color: #fff;
}

.inner_title_bar {
    position: relative;
    margin-top: 128rem;
    margin-bottom: 40rem;
}
.inner_title{font-size: 32rem;font-weight: 400;}

.base_panel {
    width: 100%;
    position: relative;
    padding: 0px 360rem;
    box-sizing: border-box;
    border-bottom: 1rem solid #EFEFEF;
    margin-bottom: 50rem;
    margin-top: 50rem;
}

.item_title_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item_title {
    font-size: 28rem;
    margin-bottom: 10rem;
}

.item_tab_wrap {
    display: flex;
    font-size: 14rem;
    margin-right: -30rem;
}

.item_tab_wrap a {
    padding: 15rem 30rem;
    color: #8E8E8E
}

.item_tab_wrap a:hover {
    color: #000F16;
}

.item_tab_wrap a.active {
    color: #000F16;
    border-bottom: 1rem solid #000F16;
}



.search_bar {
    width: 220rem;
    height: 38rem;
    background-color: #F7F7F7;
    position: absolute;
    right: 0rem;
    top: 45rem;
}

.search_input {
    width: 160rem;
    height: 38rem;
    position: absolute;
    left: 0rem;
    padding-left: 10rem;
    top: 0rem;
    border: 0rem;
    background-color: transparent;
}

.search_btn {
    position: absolute;
    right: 0rem;
    top: 0rem;
    display: inline-block;
    width: 38rem;
    height: 38rem;
}

.search_btn i {
    font-size: 24rem !important;
    margin-top: 8rem;
    display: inline-block;
}

.big_card {
    width: 100%;
    margin-bottom: 20rem;
    display: block;
}

.big_card .card_img_wrap {
    width: 864rem;
    height: 486rem;
    overflow: hidden;
    position: relative;
}

.big_card .card_img_wrap img {
    width: 864rem;
    height: 486rem;
    object-fit: cover;
}

.big_card .card_title {
    color: #000F16;
    width: 864rem;
    font-size: 20rem;
    margin-top: 24rem;
    font-weight: 400;
    display: block;
}

.big_card .card_info {
    color: #8E8E8E;
    font-size: 14rem;
    margin-top: 14rem;
}

.sub_title {
    color: #000F16;
    font-size: 22rem;
    position: absolute;
}

.middle_card {
    margin-bottom: 30rem;
    display: block;
    margin-right: 30rem;
}

.middle_card .card_img_wrap {
    width: 560rem;
    height: 300rem;
    overflow: hidden;
    position: relative;
}

.middle_card .card_img_wrap img {
    width: 560rem;
    height: 300rem;
    object-fit: cover;
    transition: all 0.5s ease;
}

.middle_card:hover .card_img_wrap img {
    transition: all .5s ease 0s;
    -webkit-transform: scale(1.08);
}

.middle_card .card_title {
    color: #000F16;
    font-size: 24rem;
    margin-top: 30rem;
    font-weight: 500;
    box-sizing: border-box;
    width: 560rem;
    height: 50rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.middle_card .card_info {
    color: #8E8E8E;
    font-size: 16rem;
    margin-top: 17rem;
    box-sizing: border-box;
}

.middle_card_white {
    margin-bottom: 20rem;
    background-color: #fff;
    padding-bottom: 20rem;
    margin-right: 28rem;
    width: 383rem;
}

.middle_card_white .card_img_wrap {
    width: 383rem;
    height: 220rem;
    overflow: hidden;
}

.middle_card_white .card_img_wrap img {
    width: 383rem;
    height: 220rem;
    object-fit: cover;
    transition: all 0.5s ease;
}

.middle_card_white:hover .card_img_wrap img {
    transition: all .5s ease 0s;
    -webkit-transform: scale(1.08);
}

.middle_card_white .card_title {
    color: #000F16;
    font-size: 20rem;
    margin-top: 30rem;
    height: 60rem;
    font-weight: 500;
    box-sizing: border-box;
    width: 383rem;
    padding: 0rem 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.middle_card_white .card_info {
    color: #8E8E8E;
    font-size: 16rem;
    margin-top: 17rem;
    box-sizing: border-box;
    width: 560rem;
    padding: 0rem 30rem;
}

.tip_title {
    padding-left: 10rem;
    padding-right: 10rem;
    height: 30rem;
    background: #F7F8FA;
    color: #009CB2;
    font-size: 14rem;
    text-align: center;
    line-height: 30rem;
    display: inline-block;
}

.price {
    color: #000F16;
    font-size: 26rem;
}

.inner_banner_wrap {
    width: 1200rem;
    height: 620rem;
    position: relative;
    overflow: hidden;
}

.inner_banner_wrap .swiper-slide img {
    width: 1200rem;
    height: 620rem;
}

.inner_swiper {
    position: absolute;
    width: 1200rem;
    height: 620rem;
    z-index: 0;
}

.inner_full_wrap {
    width: 1920rem;
    height: 930rem;
    position: relative;
    overflow: hidden;
}

.inner_full_wrap .swiper-slide img {
    width: 1920rem;
    height: 930rem;
}

.inner_full_swiper {
    position: absolute;
    width: 1920rem;
    height: 930rem;
    z-index: 0;
}



.inner_card {
    margin-bottom: 40rem;
    display: block;
    height: 360rem;
    margin-right: 26rem;
}

.inner_card .card_img_wrap {
    width: 383rem;
    height: 206rem;
    overflow: hidden;
}

.inner_card .card_img_wrap img {
    width: 383rem;
    height: 206rem;
    object-fit: cover;
    transition: all 0.5s ease;
}

.inner_card .card_info_wrap {
    width: 383rem;
    height: 80rem;
}

.inner_card .card_title {
    color: #000F16;
    width: 383rem;
    font-size: 20rem;
    height: 55rem;
    line-height: 26rem;
    margin-top: 10rem;
    font-weight: 300;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.inner_card .card_info {
    color: #939799;
    font-size: 14rem;
    margin-top: 15rem;
    box-sizing: border-box;
}

.inner_card:hover .card_img_wrap img {
    transition: all .5s ease 0s;
    -webkit-transform: scale(1.08);
}

.page_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    /* padding-top: 40rem;
    margin-top: 50rem; */
    cursor: pointer;
}

.page_wrap .nav_wrap {
    font-size: 14rem;
    color: #000F16;
}

.page_wrap .nav_wrap a i {
    font-size: 14rem;
    color: #000F16;
    vertical-align: baseline;
}

.page_wrap .page_btn a {
    padding: 10rem 20rem;
    margin-right: 5rem;
    font-size: 16rem;
    color: #8E8E8E
}

.page_wrap .page_btn a.active {
    background-color: #009CB2;
    color: #fff;
    font-weight: 300;
}

.sub_tip {
    color: #8E8E8E;
    font-size: 16rem;
}

.detail_title {
    color:#333333;
    font-size: 45rem;
    font-weight: bold;
    line-height: 63rem;
}


.other_recommend {
    border-top: 1px solid #8E8E8E;
}

.form_wrap {}

.form_wrap .input_wrap {
    padding-bottom: 10rem;
    border-bottom: 1px solid #C8C8C8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rem;
}

.form_wrap .input_wrap .label {
    font-size: 14rem;
    color: #8E8E8E;
    width: 70rem;
}

.form_wrap .input_wrap .input_txt {
    width: 100%;
    height: 20rem;
    background-color: transparent;
    flex: 1;
    border: 0;
    margin-top: 0rem;
    box-sizing: border-box;
    padding-left: 10rem;
    font-size: 16rem;
}

.xs48 {
    width: 48%;
}


.shop_card {
    display: flex;
    justify-content: space-between;
    width: 370rem;
    margin-right: 50rem;
    margin-bottom: 30rem;
}

.shop_card .card_img {
    width: 140rem;
    height: 225rem;
    overflow: hidden;
    margin-right: 22rem;
}

.shop_card .card_img img {
    width: 140rem;
    height: 225rem;
    object-fit: cover;
    margin-right: 22rem;
}

.shop_card:hover .card_img img {
    transition: all .5s ease 0s;
    -webkit-transform: scale(1.08);
}

.shop_card .card_content {
    flex: 1;
    height: 225rem;
}

.shop_card .card_content .card_title {
    font-size: 20rem;
    color: #000F16;
    margin-top: 10rem;
    font-weight: 400;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: 50rem;
    overflow: hidden;
}

.shop_card .card_content .card_price {
    color: #009CB2;
    font-size: 20rem;
    margin-top: 10rem;
}

.shop_card .card_content .card_desc {
    margin-top: 14rem;
    height: 46rem;
    font-size: 14rem;
    line-height: 22rem;
    color: #54585A;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.shop_card .card_content .card_info {
    color: #939799;
    font-size: 14rem;
    margin-top: 21rem;
}

.shop_list .flex_between_center {
    margin-top: 60rem;
    padding-bottom: 60rem;
    border-bottom: 1px solid #C8C8C8;
}

.shop_list .flex_between_center:last-child {
    border: 0 !important;
}



.op_mov {
    opacity: 0;
}

.op_mov_do {
    animation: op_mov_do 0.5s 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    opacity: 0;
}

@-webkit-keyframes op_mov_do {

    0% {
        -webkit-transform: translate(0rem, 20px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translate(0rem, 0px);
        opacity: 1;
    }
}

.news_base_panel {
    width: 1200rem;
    position: relative;
    margin: 0px auto;
    border-top: 1rem solid #EEEEEE;
    border-bottom: 1rem solid #EEEEEE;
    padding: 10rem 0rem;
    display: flex;
    justify-content: space-between;
}

.news_item_title_bar {
    display: flex;
    align-items: center;
}

.news_item_title_bar a {
    height: 32rem;
    font-size: 14rem;
    background-color: #F7F8FA;
    font-weight: 300;
    line-height: 32rem;
    padding-left: 15rem;
    padding-right: 15rem;
    margin-right: 16rem;
    display: inline-block;
}

.news_item_title_bar a:hover {
    background-color: #00BEBE;
    color: #fff;
}

.news_item_title_bar a.active {
    background-color: #00BEBE;
    color: #fff;
}

.news_search_bar {
    width: 220rem;
    height: 38rem;
    background-color: #F7F7F7;
    position: relative;
}

.news_search_input {
    width: 160rem;
    font-size: 14rem;
    height: 38rem;
    position: absolute;
    left: 0rem;
    padding-left: 10rem;
    top: 0rem;
    border: 0rem;
    background-color: transparent;
}

.news_search_btn {
    position: absolute;
    right: 0rem;
    top: 0rem;
    display: inline-block;
    width: 38rem;
    height: 38rem;
}

.news_search_btn i {
    font-size: 24rem !important;
    margin-top: 8rem;
    display: inline-block;
}

.detail_btn{color:#009CB2;font-size: 14rem;}
.more_btn{width: 220rem;   height: 51rem; border: 1rem solid #000F16; color: #000F16; font-size: 14rem;text-align: center;line-height: 51rem; display: inline-block; margin: auto;}
.no_data{margin: auto; text-align: center; color: #C8C8C8;}

.point_scroll img{width: 100%;}

.pa_up{position: absolute;z-index: 9;}

.point_title{color:#000F16;font-size: 24rem; font-weight: 400;position: relative; padding-left: 40rem;}
.point_title:after{content: "";position: absolute; width: 10rem;height: 10rem;border:4rem solid #009CB2; border-radius: 50%;top: 6rem;left: 0rem;}
.pre_content{ margin-top: 20rem; margin-bottom: 50rem;font-size: 14rem; line-height: 30rem; font-family:'Harmoney';}
.sub_main_title{font-size: 22rem;color: #000000; position: relative; padding-right: 36rem;display: inline-block;}
.sub_main_title::after{content: ""; height: 2rem; width: 100%;  background-image:linear-gradient(to right,#27ABDA,#0582D2);top: 36rem; left: 0rem; position: absolute;}