body,
html {
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden !important;
    /* viewport-fit: cover; */
    /* background-color: black; */
}

body {
    font-family: 'SweiFanSansCJKtc', sans-serif;
    /* 兼容 iOS >= 11.2 */
    padding-top: env(safe-area-inset-top) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.no_scrollbar::-webkit-scrollbar {
    display: none;
}

textarea:focus,
input:focus {
    outline: none;
}

#main_div {
    background-color: black;
    height: 100%;
    overflow: hidden auto;
    position: fixed;
}

html {
    /* font-size: 10px; */
}

.cursor_pointer {
    cursor: pointer
}

.ofhidden {
    overflow: hidden
}

.bgImage {
    background-image: linear-gradient(to right, #6928bb, #f41375)
}

.activity-swiper-btnDiv {
    padding: 15px 0px 12px 0px;
    line-height: 24px;
}

.swiper {
    --swiper-navigation-color: white;
    --swiper-navigation-size: 30px;
    --swiper-pagination-color: linear-gradient(to bottom right, #6b28ba, #ff1474);
    --swiper-pagination-bullet-inactive-color: white;
    --swiper-pagination-bullet-inactive-opacity: 1,
}

.swiper-button-next,
.swiper-button-prev {
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
}

.swalConfirmButton {
    font-size: 16px !important;
    padding: 8px 0px !important;
    margin: 0px !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: unset !important;
    box-shadow: none !important;
}

.swalCancelButton {
    font-size: 16px !important;
    padding: 8px 0px !important;
    margin: 0px !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: unset !important;
    box-shadow: none !important;
}

.bLeft {
    border-left: 0.5px #f3f3f3 solid !important;
}

.next_btn_on {
    cursor: pointer;
    /* position: fixed; */
    /* position: absolute; */
    /* bottom: 10px; */
    /* left: calc((100vw - 271px)/2); */
    width: 206px;
    height: 40px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    padding: 9px 0px;
    background-image: linear-gradient(to bottom right, #6b28ba, #ff1474);
    line-height: 22px;
}

.next_btn_off {
    cursor: pointer;
    /* position: fixed; */
    /* position: absolute; */
    /* bottom: 10px; */
    /* left: calc((100vw - 271px)/2); */
    width: 206px;
    height: 40px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    padding: 9px 0px;
    background-color: #707070;
    line-height: 22px;
}

.basic_des {
    resize: none;
    padding: 8px 48px 8px 0px;
    font-size: 16px;
    border: none;
    border-bottom: 1px black solid;
    background-color: transparent;
}

.basic_des:focus {
    outline: none;
}

.color2187DD {
    color: #2187DD !important;
}

.colorFF65A4 {
    color: #FF65A4 !important;
}

.colorFF1474 {
    color: #FF1474 !important;
}

.colorF41375 {
    color: #F41375 !important;
}

.color81909F {
    color: #81909F !important;
}

.color808080 {
    color: #808080 !important;
}

.colorB3B3B3 {
    color: #B3B3B3 !important;
}

.colorBCBCBC {
    color: #BCBCBC !important;
}

.colorE1E1E1 {
    color: #e1e1e1 !important;
}

.colorFF65A4 {
    color: #FF65A4 !important;
}

.colorFFD698 {
    color: #FFD698 !important;
}

.color101010 {
    color: #101010 !important;
}

.color3D3D3D {
    color: #3D3D3D !important;
}

.colorB2B2B2 {
    color: #B2B2B2 !important;
}

.colorECECEC {
    color: #ECECEC !important;
}

.color1A1A1A {
    color: #1A1A1A;
}

.color3F464D {
    color: #3F464D;
}

.color1D1F20 {
    color: #1D1F20 !important;
}

.color707070 {
    color: #707070 !important;
}

.color6928BB {
    color: #6928BB !important;
}

.color000000 {
    color: #000000 !important;
}

.caretColor {
    caret-color: #FF1474;
}

.bgF1C594 {
    background-color: #F1C594;
}

.bgD3D3E5 {
    background-color: #D3D3E5;
}

.bg101010 {
    background-color: #101010;
}

.bg101010B3 {
    background-color: #101010B3;
}

.bgTransparent {
    background-color: transparent;
}

.bgFF1474 {
    background-color: #FF1474;
}

.bgF41375 {
    background-color: #F41375;
}

.bg3D3D3D {
    background-color: #3D3D3D;
}
.bg707070{
    background-color: #707070;
}

.bg1D1F20 {
    background-color: #1D1F20;
}

.bg171819 {
    background-color: #171819;
}

.bgECECEC {
    background-color: #ECECEC;
}

.bg9CF841 {
    background-color: #9CF841;
}

.bg6928BB {
    background-color: #6928BB;
}

.bgE9EAEB {
    background-color: #E9EAEB;
}

.wfit {
    width: fit-content
}

.fs9 {
    font-size: 9px;
}

.fs10 {
    font-size: 10px;
}

.fs11 {
    font-size: 11px;
}

.fs12 {
    font-size: 12px;
}

.fs13 {
    font-size: 13px;
}

.fs14 {
    font-size: 14px;
}

.fs15 {
    font-size: 15px;
}

.fs16 {
    font-size: 16px;
}

.fs17 {
    font-size: 17px;
}

.fs18 {
    font-size: 18px;
}

.fs20 {
    font-size: 20px;
}

.fs21 {
    font-size: 21px;
}

.fs22 {
    font-size: 22px;
}

.fs24 {
    font-size: 24px;
}

.fs40 {
    font-size: 40px;
}

.txt_line_none {
    text-decoration: none;
}

.pr11 {
    padding-right: 11px;
}

.pr15 {
    padding-right: 15px;
}


.pr20 {
    padding-right: 20px;
}

.pr40 {
    padding-right: 40px;
}

.pr50 {
    padding-right: 50px;
}

.pl4 {
    padding-left: 4px;
}

.pl6 {
    padding-left: 6px;
}

.pl7 {
    padding-left: 7px;
}

.pl9 {
    padding-left: 9px;
}

.pl11 {
    padding-left: 11px;
}

.pl13 {
    padding-left: 13px;
}

.pl15 {
    padding-left: 15px;
}

.pl16 {
    padding-left: 16px;
}

.pl18 {
    padding-left: 18px;
}

.pl20 {
    padding-left: 20px;
}

.pb2 {
    padding-bottom: 2px;
}

.pb4 {
    padding-bottom: 4px;
}

.pb5 {
    padding-bottom: 5px;
}

.pb6 {
    padding-bottom: 6px;
}

.pb7 {
    padding-bottom: 7px;
}

.pb9 {
    padding-bottom: 9px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb15 {
    padding-bottom: 15px;
}

.pb16 {
    padding-bottom: 16px;
}

.pb18 {
    padding-bottom: 18px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb30 {
    padding-bottom: 30px;
}

.pb35 {
    padding-bottom: 35px;
}

.pt3 {
    padding-top: 3px;
}

.pt4 {
    padding-top: 4px;
}

.pt9 {
    padding-top: 9px;
}

.pt10 {
    padding-top: 10px;
}

.pt12 {
    padding-top: 12px;
}

.pt15 {
    padding-top: 15px;
}

.pt30 {
    padding-top: 30px;
}

.pt18 {
    padding-top: 18px;
}

.px6 {
    padding-left: 6px;
    padding-right: 6px;
}

.px7 {
    padding-left: 7px;
    padding-right: 7px;
}

.px9 {
    padding-left: 9px;
    padding-right: 9px;
}

.px10 {
    padding-left: 10px;
    padding-right: 10px;
}

.px12 {
    padding-left: 12px;
    padding-right: 12px;
}

.px15 {
    padding-left: 15px;
    padding-right: 15px;
}

.px16 {
    padding-left: 16px;
    padding-right: 16px;
}

.px18 {
    padding-left: 18px;
    padding-right: 18px;
}

.px20 {
    padding-left: 20px;
    padding-right: 20px;
}

.px21 {
    padding-left: 21px;
    padding-right: 21px;
}

.px22 {
    padding-left: 22px;
    padding-right: 22px;
}

.px30 {
    padding-left: 30px;
    padding-right: 30px;
}

.px36 {
    padding-left: 36px;
    padding-right: 36px;
}

.py3 {
    padding-top: 3px;
    padding-bottom: 3px;
}

.py5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.py6 {
    padding-top: 6px;
    padding-bottom: 6px;
}

.py7 {
    padding-top: 7px;
    padding-bottom: 7px;
}


.py8 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.py9 {
    padding-top: 9px;
    padding-bottom: 9px;
}

.py10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.py12 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.py14 {
    padding-top: 14px;
    padding-bottom: 14px;
}

.py15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.py27 {
    padding-top: 27px;
    padding-bottom: 27px;
}

.py30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.p4 {
    padding: 4px
}

.p6 {
    padding: 6px
}

.p8 {
    padding: 8px
}

.p10 {
    padding: 10px
}

.p12 {
    padding: 12px
}

.p15 {
    padding: 15px;
}

.p16 {
    padding: 16px;
}

.p18 {
    padding: 18px;
}

.p20 {
    padding: 20px;
}

.p25 {
    padding: 25px;
}

.p30 {
    padding: 30px;
}

.py2x8 {
    padding: 2px 8px
}

.py2x13 {
    padding: 2px 13px
}

.py3x10 {
    padding: 3px 10px
}

.py5x9 {
    padding: 5px 9px
}

.py8x12 {
    padding: 8px 12px
}

.py6x15 {
    padding: 6px 15px
}

.py4x18 {
    padding: 4px 18px
}

.py7x22 {
    padding: 7px 22px
}

.py10x20 {
    padding: 10px 20px
}

.mr2 {
    margin-right: 2px;
}

.mr3 {
    margin-right: 3px;
}

.mr4 {
    margin-right: 4px;
}

.mr5 {
    margin-right: 5px;
}

.mr6 {
    margin-right: 6px;
}

.mr7 {
    margin-right: 7px;
}

.mr8 {
    margin-right: 8px;
}

.mr9 {
    margin-right: 9px;
}

.mr10 {
    margin-right: 10px;
}

.mr11 {
    margin-right: 11px;
}

.mr12 {
    margin-right: 12px;
}

.mr13 {
    margin-right: 13px;
}

.mr15 {
    margin-right: 15px;
}

.mr16 {
    margin-right: 16px;
}

.mr17 {
    margin-right: 17px;
}

.mr18 {
    margin-right: 18px;
}

.mr20 {
    margin-right: 20px;
}

.mr30 {
    margin-right: 30px;
}

.mr34 {
    margin-right: 34px;
}

.mr35 {
    margin-right: 35px;
}

.mr40 {
    margin-right: 40px;
}

.ml2 {
    margin-left: 2px;
}

.ml4 {
    margin-left: 4px;
}

.ml5 {
    margin-left: 5px;
}

.ml6 {
    margin-left: 6px;
}

.ml8 {
    margin-left: 8px;
}

.ml10 {
    margin-left: 10px;
}

.ml11 {
    margin-left: 11px;
}

.ml12 {
    margin-left: 12px;
}

.ml14 {
    margin-left: 14px;
}

.ml16 {
    margin-left: 16px;
}

.ml18 {
    margin-left: 18px;
}

.ml20 {
    margin-left: 20px;
}

.ml30 {
    margin-left: 30px;
}

.mb2 {
    margin-bottom: 2px;
}

.mb3 {
    margin-bottom: 3px;
}

.mb4 {
    margin-bottom: 4px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb6 {
    margin-bottom: 6px;
}

.mb8 {
    margin-bottom: 8px;
}

.mb9 {
    margin-bottom: 9px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb11 {
    margin-bottom: 11px;
}

.mb12 {
    margin-bottom: 12px;
}

.mb14 {
    margin-bottom: 14px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb16 {
    margin-bottom: 16px;
}

.mb18 {
    margin-bottom: 18px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb24 {
    margin-bottom: 24px;
}

.mb25 {
    margin-bottom: 25px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb35 {
    margin-bottom: 35px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb45 {
    margin-bottom: 45px;
}

.mb50 {
    margin-bottom: 50px;
}

.mb60 {
    margin-bottom: 60px;
}

.mt2 {
    margin-top: 2px;
}

.mt3 {
    margin-top: 3px;
}

.mt4 {
    margin-top: 4px;
}

.mt10 {
    margin-top: 10px;
}

.mt12 {
    margin-top: 12px;
}

.mt15 {
    margin-top: 15px;
}

.mt18 {
    margin-top: 18px;
}


.mt20 {
    margin-top: 20px;
}

.mt25 {
    margin-top: 25px;
}

.mt40 {
    margin-top: 40px;
}

.mt60 {
    margin-top: 60px;
}


.mt80 {
    margin-top: 80px;
}

.mt100 {
    margin-top: 100px;
}

.mx7 {
    margin-left: 7px;
    margin-right: 7px;
}

.mx10 {
    margin-left: 10px;
    margin-right: 10px;
}

.mx15 {
    margin-left: 15px;
    margin-right: 15px;
}

.mx16 {
    margin-left: 16px;
    margin-right: 16px;
}

.mx20 {
    margin-left: 20px;
    margin-right: 20px;
}

.my2 {
    margin-top: 2px;
    margin-bottom: 2px;
}

.my4 {
    margin-top: 4px;
    margin-bottom: 4px;
}

.my5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.my8 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.my10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.my15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.my20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.h150w150 {
    height: 150px;
    width: 150px;
}

.w21 {
    width: 21px;
}

.w40 {
    width: 40px;
}

.w52 {
    width: 52px;
}

.font-bold {
    font-weight: bold;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.justify-items-center {
    justify-items: center !important;
}

.mxw133 {
    max-width: 133px;
}

.w150 {
    width: 150px;
}

.el-message--success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    width: 300px;
    font-size: 14px;
}

.el-message_success_content {
    color: #67c23a;
}

.el-message--error {
    background-color: #ebeef5;
    border-color: #ebeef5;
    width: 300px;
    font-size: 14px;
}

.el-message_error_content {
    color: #909399;
}

.confirm-button {
    background: linear-gradient(to right, #6928bb, #ff1474) !important;
    border-radius: 24px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 7px 35px;
}

.colored-toast.swal2-icon-success {
    background-color: #ff1474 !important;
    color: white;
}

.bg-linear {
    background: linear-gradient(to right, #6928bb, #ff1474);
}

.touch-action {
    touch-action: pan-y;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    cursor: pointer;
}

::-webkit-scrollbar-button {
    background: transparent;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid slategrey;
}

::-webkit-scrollbar-track-piece {
    background: transparent;
}

::-webkit-scrollbar-track {
    box-shadow: transparent;
}
.w50{
    width: 50%;
}
@media (max-width: 768px) {
    .w50{
        width: 100%;
    }
  }

.bgHot {
    background-image: linear-gradient(
      to bottom,
      rgb(255, 255, 255, 0),
      rgb(255, 255, 255, 0),
      rgb(0, 0, 0, 0.6)
    );
}

.bgHot2 {
    background-image: linear-gradient(
      to bottom,
      rgb(255, 255, 255, 0),
      rgb(255, 255, 255, 0),
      rgb(0, 0, 0, 0.6)
    );
}

.bgHot3 {
    background-image: linear-gradient(
      to bottom,
      rgb(255, 255, 255, 0),
      rgb(255, 255, 255, 0),
      rgb(0, 0, 0, 0.3)
    );
}

.brRWD {
    border-radius: 10px;
}

.brTopRWD {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.brBottomRWD {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

@media (max-width: 768px) {
    .brRWD {
        border-radius: 5px;
    }
}


.box-shadow {
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .choose_line {
        width: 22px;
        height: 1px;
        margin-top: 3px;
    }
}

@media (min-width: 768px) {
    .choose_line {
        width: 32px;
        height: 3px;
        margin-top: 5px;
    }
}

.blur20 {
    filter: blur(20px);
}

/* 獅尾繁中黑體 */

@font-face {
    font-family: 'SweiFanSansCJKtc';
    src: url('/fonts/SweiFanSansCJKtc-Black.woff2') format('woff2'),
         url('/fonts/SweiFanSansCJKtc-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
  }
  
@font-face {
    font-family: 'SweiFanSansCJKtc';
    src: url('/fonts/SweiFanSansCJKtc-Bold.woff2') format('woff2'),
        url('/fonts/SweiFanSansCJKtc-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'SweiFanSansCJKtc';
    src: url('/fonts/SweiFanSansCJKtc-DemiLight.woff2') format('woff2'),
         url('/fonts/SweiFanSansCJKtc-DemiLight.woff') format('woff');
    font-weight: 350;
    font-style: normal;
}
  
@font-face {
    font-family: 'SweiFanSansCJKtc';
    src: url('/fonts/SweiFanSansCJKtc-Light.woff2') format('woff2'),
         url('/fonts/SweiFanSansCJKtc-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'SweiFanSansCJKtc';
    src: url('/fonts/SweiFanSansCJKtc-Medium.woff2') format('woff2'),
         url('/fonts/SweiFanSansCJKtc-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
  
@font-face {
    font-family: 'SweiFanSansCJKtc';
    src: url('/fonts/SweiFanSansCJKtc-Regular.woff2') format('woff2'),
         url('/fonts/SweiFanSansCJKtc-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SweiFanSansCJKtc';
    src: url('/fonts/SweiFanSansCJKtc-Thin.woff2') format('woff2'),
         url('/fonts/SweiFanSansCJKtc-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}


.object-fit-cover {
    object-fit: cover;
}

.chat_list_div {
    background-color: white;
}

.chat_list_div:hover {
    background-color: rgb(225, 225, 225);
}