@charset "utf-8";
@import url("fontawesome-free/css/fontawesome-all.min.css");
@import url("wklg_style.css");
@import url("wklg_button.css");
@import url("wklg_anim.css");
@import url("wklg_dai.css");
@import url("wklg_mainly.css");
@import url("smeone_Thing.css");
@import url("jquery-te-1.4.0.css");



.UsPbx{top:48px; right:0;bottom:0;z-index:55;/*width: 220px;margin-right: -220px*/ color: #405278; text-shadow: 1px 1px 0 #ffffff30}
.UsPbx .wthsiz_1{padding: 10px 0;opacity: 0;position: relative;}
.UsPbx .wthsiz_1.on{margin-right: 0;opacity: 1}
.UsPbx .wthsiz_2{ padding: 40px 0}
.UsPbx .uspbxBg{background-color:rgb(212 212 212 / 70%);background-image: url(../imgs/5577818.png); box-shadow: -3px 0 5px #0000000f;backdrop-filter: blur(8px);   height: 100%;position: absolute;right: -62px;top: 0;bottom:0;padding-right: 62px;width: 100%;    border-top-left-radius: 30px;   border-bottom-left-radius: 30px;}
.UsPbx .wthsiz_2:not(.on) .pBx-Edit{display: none}
.UsPbx .wthsiz_1 .pbx-avt{border-radius: 20px;    margin: 5px 10px;color: #fff;    font-size: 1.3em;padding: 23px 15px 20px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1a3776+0,1a3159+100 */background: linear-gradient(135deg,  rgb(26 55 118 / 90%) 0%,rgb(26 49 89 / 90%) 100%)}
.UsPbx .wthsiz_1 .pbx-avt:hover{box-shadow: 0 0 0 5px #66c5ff47 inset}
.UsPbx .wthsiz_1 .pbx-avt .avtbx{border-radius: 50%;  width: 100px;height: 100px;  background-color: #ddd5cbcf;position: relative;margin-bottom: 5px;}
.UsPbx .wthsiz_2 .pbx-avt .avtbx{border-radius: 10%;  width: 200px;height: 200px;     background-color: #3333334a;}


@media (min-width: 1001px) {
    .UsPbx .wthsizBx{display: -moz-box;  display: -ms-flexbox; display: -webkit-flex; display: flex; word-wrap: break-word;  word-break: break-all;flex-direction: row-reverse;height:100%}
    .UsPbx .wthsiz_1{width: 250px;margin-right: -250px;}
    
    .UsPbx .wthsiz_2{width: 0; position: relative; }
    .UsPbx .wthsiz_2.on{width: 43vw;max-width: 400px;box-shadow: -3px 0 5px #0000000f inset;max-width: 550px  }
    .UsPbx .wthsiz_2:not(.on) > *{display: none}
}
@media (max-width: 1000px) {
    .UsPbx .wthsiz_1{width: 100vw;margin-right: -100vw}
    .UsPbx .wthsiz_1.on{}
    .UsPbx .wthsiz_2{display: none;width: 100vw; position: absolute;top: 0;    /*backdrop-filter: blur(5px);*/    z-index: 20;}
    .UsPbx .wthsiz_2.on{display: block;  }
    .UsPbx .wthsiz_2.on ~ .wthsiz_1.on{opacity:0  }
}

.UsPbx .pBx-Edit .pbx-TT{font-size: 2.8em;text-align: center;color: #fff;margin-bottom:2em;line-height: 1.8}
.UsPbx .pBx-Edit .inpBx .plchld{color: #7d6e5e}
.UsPbx .pBx-Edit .rtngBtn.clmn{margin-top: 50px;text-align: center;}
.UsPbx .pBx-Edit .rtngBtn.clmn .bTn{    min-width: 150px;border-radius: 3px}
.UsPbx .pBx-Edit .pbxEHar{position: absolute;bottom: 0;left: 0;right: 0;}
.UsPbx .pBx-Edit .pbxEHar .hln-1C{background-color: rgba(255, 255, 255, 0.3)}
.UsPbx .pBx-Edit .clmn .textarea{min-height: 80px}


@media (max-width: 1000px) {
   .UsPbx .pBx-Edit .rtngBtn.clmn{margin-top: 30px;}
}

.UsPbx .setClmn{position:relative}
.UsPbx .setClmn.cspt{background-color:rgba(103, 103, 103, 0.3);}
.UsPbx .setClmn.cspt:hover{background-color: rgba(100,100,100,0.6)}
.UsPbx .setClmn .it{font-size: 1rem;opacity: 0.55;line-height: 1.8em}
.UsPbx .setClmn .lst{padding: 10px;font-size: 1.15em;line-height: 1.8em;position: relative;}
.UsPbx .setClmn .lst.cspt:hover{    background-color: #52a4ff4d}
.UsPbx .setClmn .lst.cspt.sel{    background-color: #c1deff80}
.UsPbx .setClmn .lst .cn-tt{opacity: 0.6;margin-right: 15px}
.UsPbx .setClmn ~ .hairlines{padding-bottom: 8px;padding-top: 8px;margin-left: 1em;margin-right: 1em}



/* JUImenu
--------------------------------------------------------------------------------------------------------------- */
.JUImenu{z-index: 510;top: 0;bottom: 0;right: -90vw;color: #525252;width: 100vw;max-width: 486px;min-width: 200px;opacity: 0;z-index: -1}
.JUImenu.menu-op{opacity: 1;right: 0;z-index: 999}
.JUImenu:not(.menu-op) .m_oped{display: none}
.JUImenu .menuBg{top: 0;bottom: 0;left: 0;right: 0;}
.JUImenu .line{height: 1px ;background-color: #fff}
.JUImenu .ovfl-y{padding-bottom: 2em;  }
.JUImenu .allPrsnlInfo{width: 100%;height: 100%;top: 0;left: 0;/*display: none*/}
/*.JUImenu.menu-op .allPrsnlInfo{display: block;}*/
.JUImenu .allPrsnlInfo::before{content: "";position: absolute;top: 0;left: 0;right: 0;height: 0px;background-color: #5181d4db;/*border-bottom-left-radius:110px ;*/-webkit-transition: all 400ms cubic-bezier(0.25,0.46,0.45,0.94); transition: all 400ms cubic-bezier(0.25,0.46,0.45,0.94); background-position:  top right, top left;background-size: cover;}
.JUImenu .info-swi.allPrsnlInfo::before{height: 100%;border-radius: 0;/*background-image: url(../imgs/signupBg_fr.png), url(../imgs/signupBg_fl.png);*/backdrop-filter: invert(1);}
.JUImenu .lvel-op.allPrsnlInfo{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+45,0+100 */
            background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 40%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}

.JUImenu .prsnlArea{ padding: 65px 0 10px;position:relative; }



.JUImenu .prsnlInf{  padding-top: 10px; padding-left: 20px;position: relative;z-index: 3}
.JUImenu .info-swi .prsnlArea .prsnlInf{display: none}
.JUImenu .prsnlArea .userAvt{background-color:#2b2b2bad}
.JUImenu .btns-swi .prsnlArea .userAvt{width: 90px;height: 90px; z-index: 2; position: relative; margin-left: 20px;   box-shadow: 1px 2px 5px #3333335c;}
.JUImenu .lvel-op .prsnlArea .userAvt{width: 75px;height: 75px;}

.JUImenu .info-swi .prsnlArea .userAvt{margin: auto ;width: 100px;height: 100px;position: relative;}
.JUImenu .info-swi .prsnlArea .userAvt.big{width: 120px;height: 120px;}
.JUImenu .prsnlArea .LVbar{position: absolute;  top: 43px; left: -30px }
.JUImenu .lvel-op .prsnlArea .LVbar{     top: 30px; left: -26px; right: 15px}
.JUImenu .allPrsnlInfo:not(.lvel-op) .LVbar .i_fill{display: none;}
.JUImenu .info-swi .prsnlArea .userAvt .gdbd{display: none}
.JUImenu .prsnlArea .userAvt .tbt{display: none}
.JUImenu .info-swi .prsnlArea .userAvt.big .tbt{   display: block; background-color: #303030d1; border-radius: 40%; right: 0;  bottom: 0;  position: absolute; }

.JUImenu .prsnlArea .arwL{margin-top: 7px;    background-color: #274f73; border-radius: 50%;  -webkit-animation-duration: .3s !important;     animation-duration: .3s !important;-webkit-animation-delay: 0.5s !important;  animation-delay: 0.5s !important;}
.JUImenu .btns-swi .prsnlArea .arwL{display: none}
.JUImenu .prsnlArea .myName{font-size: 1.7em;line-height: 1.2;height: 35px;margin-top: -12px;  padding: 3px 0; max-width: 200px;    margin-left: 5px; margin-right: 17px;    color: #fff; text-shadow: 1px 1px 5px #00000096;}
.JUImenu .prsnlArea .othbt.achi{color: #fecd6f;  display: none ;margin-top:22px }
.JUImenu .lvel-op .prsnlArea .othbt.achi{display: block;}
.JUImenu .prsnlArea .othbt.achi .tt{      margin-right: 30px;  margin-left: 6px; }
.JUImenu .prsnlArea .othbt.achi .tt .fas{margin-right: 5px}
.JUImenu .prsnlArea .othbt.achi .pg .bx{    border: 1px solid #847e77cf;margin: 5px 15px 0 -15px;  padding: 10px 15px 9px;  border-radius: 17px; color: #847e77;font-size: .9em;line-height: 1.7}
.JUImenu .lvel-op .prsnlArea .othbt.ibtn{display: none}
.JUImenu .prsnlArea .othbt .bbt{    /*  border-radius: 13px;*/ box-shadow: 0 1px 3px #0000003b; text-align: center; line-height: 15px; padding: 7px 10px 6px; margin-right: 2px;  line-height: 1;  background-color: #6a6658a3;  color: #fff;  position: relative;  line-height: 22px;}
.JUImenu .prsnlArea .othbt .bbt:first-child{border-radius: 13px 0 0 13px}
.JUImenu .prsnlArea .othbt .bbt:last-child{border-radius: 0 13px 13px 0;}
.JUImenu .prsnlArea .othbt .bbt i{    width: 15px; height: 15px; }
.JUImenu .prsnlArea .othbt .bbt .ic_j{   border: 2px solid;  border-radius: 50%;  width: 14px;  line-height: 14px;   font-size: 0.8rem;  margin-top: -3px;}
.JUImenu .prsnlArea .othbt .bbt .cc{right: -3px;    bottom: -3px;}
.JUImenu .lvel-op .bt_pg{display: none;}
.JUImenu .menuButtons{position: absolute; top: 0;bottom: 0;left: 0;width: 100%}
.JUImenu .info-swi .menuButtons{display: none}
.JUImenu .menuButtons ul[class*="-sty"]{  padding: .5em 1em 0 1em; list-style: none;}
.JUImenu ul[class*="-sty"] li{   margin-bottom: 10px;    }
.JUImenu ul li .title{font-size: 1.3em;margin-bottom: 20px}
.JUImenu ul li .inset{box-sizing: border-box;pointer-events: none;}
.JUImenu .box-sty li .inset{padding:15px 20px 15px 20px}
.JUImenu .list-sty li .inset{padding:10px 20px 10px 15px;}
.JUImenu ul li .tbt .tbtsvg{    height: 24px;width: 24px;margin-top: -12px;margin-left: -12px}
.JUImenu ul li .btnTex{ white-space: nowrap;position: relative;}
.JUImenu .box-sty li .btnTex{font-size: .85em;margin-top: 30px;line-height: 1 }
.JUImenu .list-sty li .btnTex{font-size: 1.2em;}
.JUImenu ul li .btnTex .v{font-weight:700   }
.JUImenu ul li .btnTex .t{}
.JUImenu .achitipbx{    background-color: #2569ade6;  color: #fff; position: absolute;  left: 20px; right: 20px; bottom: 0;text-shadow: non;  padding: 15px 15px 20px;  z-index: 10;  box-shadow: 2px 2px 9px #00000085;  border-radius: 3px;font-size: 1.1em;}
.JUImenu .achitipbx.ckk{    background-color: #84878ae6;}
.JUImenu .achitipbx .cloz{position: absolute;right: 0;top: 0}
.JUImenu .achitipbx .tt{    font-size: 1.5em;  text-align: center;  padding-top: 10px;}
.JUImenu .achitipbx ul{padding: 15px 15px 10px}
.JUImenu .achitipbx li{list-style: disc;}
.JUImenu .achitipbx li + li{margin-top: 5px}
.JUImenu .achitipbx .btn{width: 76%;color: #fff;font-weight: 700;border-radius: 2px;text-align: center;padding: 10px;margin: 30px auto 0;}
.JUImenu .achitipbx .btn.bt-1{background-color: #333333e8;}
.JUImenu .achitipbx .btn.bt-2{background-color: #00BCD4;}
.JUImenu .achitipbx .cn{padding:0 8px 7px;color: #e0e0e0}
.JUImenu .achitipbx .gt{border: 1px solid #ffffff6e;  border-radius: 15px 30px;  padding: 10px 15px; line-height: 1.6;   text-align: center;}
.JUImenu .achitipbx .tm{      font-size: .8em;  text-align: center; margin-bottom: 22px;margin-top: -2px;}
.JUImenu .lv_pg{  padding-top: 6px;display: none}
.JUImenu .lvel-op .lv_pg{display: block;}
.JUImenu .lv_pg .meu{color: #fff;justify-content: right ;margin: 0 22px}
.JUImenu .lv_pg .meu .bg{border: 1px solid;border-radius: 13px;overflow: hidden;}
.JUImenu .lv_pg .meu .btn{padding: 5px 14px}
.JUImenu .lv_pg .meu .btn + .btn{border-left: 1px solid;}
.JUImenu .lv_pg .meu .btn.sel{    background-color: #ffffff45;}
.JUImenu .lv_pg .itm{ background-color: #5f5c58c9; overflow: hidden;  color: #ffffff; margin: 12px 20px; border-radius: 20px;position: relative;}
.JUImenu .lv_pg .itm:not(.ckk):before{pointer-events: none;content: "";position: absolute;width: 100%;height: 100%;top:0;left: 0;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 30%) 100%)}
.JUImenu .lv_pg .itm.nmT{ box-shadow: 1px 1px 0 #0000007a, 3px 2px 0 #6affd6bf inset; color: #69ffd6;}
.JUImenu .lv_pg .itm.lvT{ box-shadow: 1px 1px 0 #00000069, 3px 2px 0 #ffd069cc inset;  color: #ffd069;}
.JUImenu .lv_pg .itm.ckk{ box-shadow: 1px 1px 0 #fff, 1px 1px 0 #00000059 inset; color: #80b9ff;background-color: #5f5c58a8;}
.JUImenu .lv_pg .itm i.fa-get-pocket{  margin-right: 7px;  font-size: 1.25em;    text-shadow: 1px 1px 3px #00000080;}
.JUImenu .lv_pg .itm .nm{      text-shadow: 1px 1px 3px #00000080;font-size: 1.28em;font-weight: 400}
.JUImenu .lv_pg .itm .cn{margin-top: 5px;margin-bottom: 5px;color: #fff;padding-right: 15px}
.JUImenu .lv_pg .itm .cn li{list-style-type: disc;margin-bottom: 7px}
.JUImenu .lv_pg .itm .cn i{margin-left: 5px;font-size: .9em;color: #00d0ff}
.JUImenu .lv_pg .itm .pldspd{position: relative;}
.JUImenu .lv_pg .itm.lvT .pldspd{font-weight: 200;color: #00d0ff;font-size: .9em}
.JUImenu .lv_pg .itm .tm{  font-size: 0.85em; color: #ffffff;}
.JUImenu .lv_pg .itm .bt{text-align: right;position: relative;}
.JUImenu .lv_pg .itm.lvT .bt{  padding: 3px 15px;  background-color: #f9ad3b70;}
.JUImenu .lv_pg .itm.nmT .bt{ padding: 3px 8px;border-top: 1px solid #6affd659;  color: #5bb898;margin: 0 7px}

.JUImenu .lv_pg .itm .btn{  text-align: center;  padding: 10px 14px;    font-weight: 700;}
.JUImenu .lv_pg .itm .btn.bt-1{background-color:#1cab8457;}
.JUImenu .lv_pg .itm .btn.bt-2{background-color: #00BCD4;}

.JUImenu .lv_pg .itm .bg{   padding: 12px 0 8px 18px;position: relative;}
.JUImenu .lv_pg .itm:not(.ckk) > .flx-1{ }


.JUImenu .menuSlfbar{position: sticky;top: 0;margin-top: 75px}
.JUImenu .menuSlfbar .msb{color: #1e4384;padding: 5px 10px ;  margin:10px 20px 10px;text-align: center; text-shadow: 1px 1px 0  #ffffff42;font-weight: 700}
.JUImenu .menuSlfbar .msb.sel{color: #b1daff;text-shadow: 1px 1px 0  #0000005c;}
.JUImenu .menuSlfbar .msb i{margin: 0 auto 3px; border-radius: 50%;  border: 2px solid; width: 30px;height: 30px;line-height: 30px;    box-shadow: 1px 1px 0 0 #ffffff42, 1px 1px 0 0 #ffffff42 inset;   }
.JUImenu .menuSlfbar .msb.sel i{box-shadow: 1px 1px 0 0 #0000005c;background-color: #1d438494;}
.JUImenu .datachart{ margin: auto;width: 100%;position: relative;}
.JUImenu .HalfPei_Chart .halfpei { border:1px solid ; width: 100px;height: 50px; border-radius: 50px 50px 0 0;margin: auto;}
.JUImenu .HalfPei_Chart .halfpei .dc-line{position: absolute;bottom: -1px;left: -30px;right: -30px;height: 1px; background-color: #525252; }
.JUImenu .HalfPei_Chart .halfpei .pointer{width: 1px;height: 45px;background-color: #525252; transform-origin:center bottom;position: absolute;bottom: 0;left: 50%;}
.JUImenu .HalfPei_Chart .halfpei .pointer .arw{width: 1px;background-color: #525252;height: 10px;transform-origin:top left;position: absolute;left: 0;top:0}
.JUImenu .HalfPei_Chart .halfpei .pointer .arw:nth-child(1){transform: rotate(35deg)}
.JUImenu .HalfPei_Chart .halfpei .pointer .arw:nth-child(2){transform: rotate(-35deg)}

.JUImenu .Bar_Chart{padding-top: 10px; padding-bottom: 10px;width: 88%; margin-left: 20px;}
.JUImenu .Bar_Chart .dc-line{position: absolute;left: 0;top:-5px;bottom: -5px;background-color: #525252;width: 1px}
.JUImenu .Bar_Chart .chtBar{ padding: 0 1px;   height: 15px; text-align: center;  position: relative; line-height: 15px;background-color: #525252;  text-shadow: none;border-radius: 0 30px 30px 0}
.JUImenu .Bar_Chart .chtBar + .chtBar{margin-top: 10px}

.JUImenu .Bar_Chart .chtBar[title]::after { content: attr(title)""; font-size: .8em;  color: #525252;width: 30px;  left: -30px;  position: absolute;}

.JUImenu .Pei_Chart .pie{  width: 100px; height: 100px; margin: auto; border: 1px solid #525252;     box-shadow:0 0 0 2px #f2f1ee inset;/* 邊框 粗3px 實線 白色 */ border-radius: 50%; /* 圓角 50% (變成圓形) */  }

.JUImenu .Circle_Chart .hollowCcl{width: 100px;height: 100px; margin: auto; border: 1px solid #525252;border-radius:50%    ; box-shadow: 1px 1px 0 #ffffff45;}
.JUImenu .Circle_Chart .fillupCcl{background-color: #525252;border-radius:50% }
.JUImenu .avtbx .userAvt{margin:7px 5px}
.JUImenu .myFriendItem_b .avtbx .userAvt{min-width: 40px;min-height: 40px; max-width: 40px;max-height: 40px;  background-color: #52525287;  position: relative;}
.JUImenu .myFriendItem_b .avtbx .cc{position: absolute;      right: -5px;   bottom: -3px;}

.JUImenu .menuButtons{}
.JUImenu .menuButtons .ovfl-y{}
.JUImenu .menuButtons [class*="-sty"] li{ text-shadow: 1px 1px 0 #fff6;/*backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px); */}
.JUImenu .menuButtons li .inset{position: relative;z-index: 3}
.JUImenu .menuButtons li .ckbg{ z-index: -1;   background-color: #ffffffa1;   left: 0;    top: 0;    width: 100%;    height: 100%;    position: absolute;    border-radius: 36px;    box-shadow: 1px 1px 0 #5c543e47, 1px 1px 0 #ffffff8f inset;   overflow: hidden;}
.JUImenu .menuButtons li .ckbg::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,96907b+100&0+0,0.39+100 */
background: linear-gradient(135deg, rgb(255 255 255 / 20%) 10%,  rgb(173 165 138 / 50%) 100%);}

.JUImenu ul.list-sty{ }
.JUImenu ul.list-sty li{   }
.JUImenu ul.list-sty li .tbt{}

.JUImenu ul.box-sty{ column-count: 2; /*欄數*/ column-gap: 12px; /*每欄間隔*/}
.JUImenu ul.box-sty li{ -webkit-flex-flow: column wrap;  flex-flow: column wrap ; break-inside: avoid;  /*定義頁面、列或是區域發生中斷時的元素表現方式。 auto->元素中斷、acoid->元素不中斷*/page-break-inside: avoid;-webkit-column-break-inside: avoid;}
/*.JUImenu ul.box-sty li:nth-child(6n+1){height: 180px}
.JUImenu ul.box-sty li:nth-child(6n+6){height: 180px}
.JUImenu ul.box-sty li:nth-child(2n+1) .ckbg{background: linear-gradient(135deg, #3e373085 0%, #3e37304a 100%)}
.JUImenu ul.box-sty li:nth-child(2n+2) .ckbg{background: linear-gradient(135deg, #21422c85 0%, #21422c40 100%)}*/
.JUImenu ul.box-sty li .tbt{width: 70px;  height: 70px;  border-radius: 45%;  overflow: hidden;   margin-bottom: 6px;}

.JUImenu ul.piece-sty{  /*column-count: 3; column-gap: 7px*/}
.JUImenu ul.piece-sty li{ text-align: center;padding: 3px;/*break-inside: avoid; */ /*定義頁面、列或是區域發生中斷時的元素表現方式。 auto->元素中斷、acoid->元素不中斷*/;}
.JUImenu ul.piece-sty li .ckbg{ }
.JUImenu ul.piece-sty li .tbt{    margin: 0 auto 10px; width: 60px; height: 60px;  border-radius: 40%; }
.JUImenu ul.piece-sty li .btnTex p { font-size: 1em;}


.JUImenu .menuButtons li .ckbg:active,
.JUImenu .menuButtons li.sel .ckbg{     background-color: #4ba4f3cc;  box-shadow: 1px 1px 9px #00000029}
.JUImenu .menuButtons li .inside{    padding: 0 15px 10px;}
.JUImenu .menuButtons .bbx{margin-bottom: 10px; border-radius: 20px; padding: 10px 12px 6px;  color: #958869;}
.JUImenu .menuButtons .bbx.sty-1{background-color: #ffffff5e; box-shadow: 1px 1px 0 #0000002b inset, 1px 1px 0 #fff;   }
.JUImenu .menuButtons .bbx.sty-2{background-color: #0000000d; box-shadow: 1px 1px 0 #fff inset, 1px 1px 0 #0000002b;-webkit-transition: 0.3s; transition: 0.3s;  }
.JUImenu .menuButtons .bbx.sty-2:active{background-color: #ffffff5e; box-shadow: 1px 1px 0 #0000002b inset, 1px 1px 0 #fff;}

.JUImenu .menuButtons .flxdpl > .bxb + .bxb{margin-left:10px }
.JUImenu .menuButtons .ttl{    font-weight: 700;line-height: 29px;}
.JUImenu .menuButtons .ttl .truns{margin-right: -5px}
.JUImenu .menuButtons .vvl{font-size: 0.8em;}

.JUImenu .menuButtons .tip{font-size: 0.8em;font-weight: 300}

.JUImenu .menuButtons .bar{ font-size: .9em;width: 100%; text-align: center;position: relative;line-height: 29px}
.JUImenu .menuButtons .barfill{width: 25%;bottom: -2px;position: absolute;}
.JUImenu .menuButtons .barfill .ball{width: 5px;height: 5px;background-color: #95886a;margin: auto;}

.JUImenu .menuSelfinfo{position: absolute; top: 0;bottom: 0;left: 0;width: 100%;}
.JUImenu .btns-swi .menuSelfinfo{display: none}

.JUImenu .menuSelfinfo .bbx{    padding-bottom: 35px;}

.JUImenu .menuSelfinfo ul{  padding-right: 0; list-style: none;padding: 0}
.JUImenu .menuSelfinfo ul.box{ }
.JUImenu .menuSelfinfo ul li{position: relative;  }
.JUImenu .menuSelfinfo ul li.cspt:active,
.JUImenu .menuSelfinfo ul li.cspt.sel{box-shadow: 2px 2px 5px #2648879c; background-color: #4fb1ff87;}
.JUImenu .menuSelfinfo ul.blist li{      color: #6cb6ff; padding:  5px; border-bottom: 2px solid ; margin-bottom: 5px; line-height: 1.2;}
.JUImenu .menuSelfinfo ul.list li{ padding: 8px 0 10px 20px;border-top-left-radius: 25px;border-bottom-left-radius: 25px;  background-color:#ffffff14;margin-top: 8px}
.JUImenu .menuSelfinfo ul.list li .rtngBtn{margin-top: 10px}

.JUImenu .menuSelfinfo ul.box li{     flex: 1 1 35%; padding: 10px 15px 12px ;border-radius: 25px; margin-top: 8px;  page-break-inside: avoid;  -webkit-column-break-inside: avoid;  background-color:#ffffff14;}
.JUImenu .menuSelfinfo ul.box li:nth-child(even){border-top-right-radius:0 ;border-bottom-right-radius:0;margin-left:10px }

.JUImenu .menuButtons .LVbar .i_fill{margin-top: -10px}




.JUImenu .menuSelfinfo .tlbar{    border-radius: 18px; margin-right: 10px;  background-color: #86c7ff;  padding: 12px 20px 10px;   color: #004c8e;     box-shadow: 1px 1px 3px 0 #004c8eb5; background-image: url(../imgs/20603977_background3.jpg); background-position: right;}
.JUImenu .menuSelfinfo .tlbar .t1{font-size: 1.2em;font-weight: 700}
.JUImenu .menuSelfinfo .tlbar .t2{font-size: 0.9em}
.JUImenu .menuSelfinfo .blbar{color: #fff;padding: 6px 10px 6px 10px;border-top-left-radius: 25px;border-bottom-left-radius: 25px;  background-color:#3156998f;}
.JUImenu .menuSelfinfo .blbar .bbr1{    border-top: 1px solid #ffffff40; padding: 5px 5px 0;}
.JUImenu .menuSelfinfo .blbar .bbr2{margin: -10px;margin: 0 -10px 0 0}
.JUImenu .menuSelfinfo .blbar .bbr2 center{padding: 10px 10px ;    font-size: .9em;    color: #ffffff9e;position: relative;}
.JUImenu .menuSelfinfo .blbar .bbr2 center.sel{color: #fff386;}
.JUImenu .menuSelfinfo .blbar .bbr2 center + center{border-left: 1px solid #ffffff40}
.JUImenu .menuSelfinfo .blbar .bv{font-size: 1.2em}
.JUImenu .menuSelfinfo .blbar .bbr2 .bv{line-height: 1;    margin-top: 2px;}
.JUImenu .menuSelfinfo .blbar center .trng{width: 0;height: 0;border-style: solid;border-width: 10px 10px 0 10px;border-color: #3156998f transparent transparent transparent;bottom: -16px;left: 50%;margin-left: -10px;position: absolute;}
.JUImenu .menuSelfinfo .blbar center:not(.sel) .trng{display: none}

.JUImenu .menuSelfinfo ul.item li{ padding:8px 5px 8px 10px;  color: #fff; /* border: 1px dashed #ffffff57;  border-radius: 18px; */ }
.JUImenu .menuSelfinfo ul.boxx li{    background-color: #bfbfbf45;  margin: 0 10px 4px 0;  padding: 5px 10px;}
.JUImenu .menuSelfinfo ul.boxx li:first-child{ border-radius: 18px 18px  0 0 }
.JUImenu .menuSelfinfo ul.boxx li:last-child{ border-radius:  0 0 18px 18px  }
.JUImenu .menuSelfinfo ul.boxx li.evrlt{background-color: #22e2ae59}
.JUImenu .menuSelfinfo ul.item li .deshed{/*border-bottom: 1px dashed #ffffff66;*/margin: 0 5px}
.JUImenu .menuSelfinfo ul.list li p{margin-right: 20px}


.JUImenu .menuSelfinfo ul li .t{    color: #fff6f6; align-items: baseline; font-weight: 100;}
.JUImenu .menuSelfinfo ul.list li:active .t i,
.JUImenu .menuSelfinfo ul.list li.sel .t i{ margin-top: -5px;}
.JUImenu .menuSelfinfo ul.list li .t .l{height: 1px;  background-color: #e7e7e78c;  width: 100%;  margin-left: 5px;}
.JUImenu .menuSelfinfo ul.list li .t i{    font-size: .9em;    margin-right: 6px;}
.JUImenu .menuSelfinfo ul.list li:active .t i,
.JUImenu .menuSelfinfo ul.list li.sel .t i{ margin-top: -5px;}
.JUImenu .menuSelfinfo ul li .v{font-size: 1.2em;  line-height: 1.2; color: #fff}
.JUImenu .menuSelfinfo ul.list li .v{ padding-top: 11px; }
.JUImenu .menuSelfinfo ul.item li .v{font-size: 1em}
.JUImenu .menuSelfinfo ul.box li .v{ padding-top: 5px; }
.JUImenu .menuSelfinfo ul li .it_gp{color: #fff;  border-radius: 14px;  border: 1px solid;  padding: 5px 7px;  margin-bottom: 7px;}
.JUImenu .menuSelfinfo ul li .it_gp + .it_gp{margin-left: 7px;}

.JUImenu .menuSelfinfo .mS_pg_3{    margin-top: 40px;}

.JUImenu .menuSelfinfo .bxxbr{color: #77cfff;  font-weight: 700;padding: 25px 10px 0}
.JUImenu .menuSelfinfo .mS_pg_3 .bxxbr{  position: absolute;  top: 155px;  left: 5px;  right: 15px;}

.JUImenu .menuSelfinfo .mS_pg_3 .bxxbr .bt1,
.JUImenu .menuSelfinfo .mS_pg_3 .bxxbr .bt2{    border: 2px solid;  padding: 0px 4px;  border-radius: 9px; box-shadow: 0 2px 5px #00000052, 0 1px 3px #00000042 inset;}

.JUImenu .menuSelfinfo .bxxpg{margin-top: 15px}
.JUImenu .menuSelfinfo .bxxpg ul.item li{padding:8px 10px 8px 10px}
.JUImenu .menuSelfinfo .bxxpg ul.item li .t{    color: #ffffff;  margin-bottom: 3px;  font-size: 1.05em;  line-height: 1.3;}
.JUImenu .menuSelfinfo .bxxpg ul.item .tp_1 .t{color:#68dfb3}
.JUImenu .menuSelfinfo .bxxpg ul.item li .t i{margin-right: 7px;    width: 15px;}
.JUImenu .menuSelfinfo .bxxpg ul.item li .v{color:#a9bbdc; font-size: .9em;font-weight: 700;margin-left: 1px}
.JUImenu .menuSelfinfo .bxxpg ul.item li .j_P{width: 14px;  height: 14px;  line-height: 14px; font-size: .8em;    background-color: #a6badc;    font-weight: bold; text-align: center;  color: #3b65aa;margin: 0 2px}
.JUImenu .menuSelfinfo .bxxpg ul.item li .tm{color:#a9bbdc;font-size: .8em;    margin-left: 22px;}
.JUImenu .menuSelfinfo .bxxpg ul.item li .tk_line{border-bottom: 1px dashed #ffffff57;margin: 0 8px;}

.JUImenu .menuSelfinfo .bxxpg .daycntrl {    border-color: rgb(255 255 255 / 50%); color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.05);    border: 1px solid;  line-height: 38px; height: 37px; font-size: 1.1em;  white-space: nowrap;   box-sizing: border-box;  margin:5px 10px 20px;   position: relative;  border-radius: 15px;}
.JUImenu .menuSelfinfo .bxxpg .daycntrl .month{padding-left: 15px;}
.JUImenu .menuSelfinfo .bxxpg .daycntrl i{padding-left: 10px;padding-right: 10px;}
.JUImenu .menuSelfinfo .bxxpg .daycntrl .bTn{border-left: 1px solid;padding-left: 13px;padding-right: 13px;margin-left: 5px;font-size: .9em}

.JUImenu .menuSelfinfo ul.boxx li [class*="tk_"]{ line-height: 1.2; color: #fff; }
.JUImenu .menuSelfinfo ul.boxx li .j_P{ margin: 3px auto 4px;font-size: .8em; }
.JUImenu .menuSelfinfo ul.boxx li .tk_t{       padding-top: 5px;   font-size: 1.05em;  line-height: 1.5; }
.JUImenu .menuSelfinfo ul.boxx li .tk_v{  border-right:1px solid #ffffff45;  padding:5px 15px 5px 5px;  text-align: center; font-size: 12px}
.JUImenu .menuSelfinfo ul.boxx li .tk_line{width: 1px ;background-color: #fff;margin: 0 8px}
.JUImenu .menuSelfinfo ul.boxx li .tm{    border-radius: 15px;  padding: 0px 5px;  font-size: .8em;  float: left;  margin-top: 3px;   color: #81753f;  background-color: #e7d480;}

.JUImenu .menuSelfinfo ul li p.bt{font-size: 1.3em; font-weight:500 }




.JUImenu .menuSelfinfo .codeIg{width: 180px;  height: 180px;  background-color: #ffffff;  border-radius: 10px;  margin: 35px auto 15px;  padding: 10px;}
.JUImenu .menuSelfinfo .userNmb{    text-align: center;  color: #fff; font-size: 1.3em;}
.JUImenu .line{height: 1px;background-color: rgb(255 255 255 / 15%);margin: 5px 0}


 /* 地圖工具 mapTools
-------------------------*/ 
.mapTools{z-index: 50}
.mapTools .mtBtn{   line-height: 1.2;  font-size: .9em; padding: 3px 10px 3px 3px; margin: 3px; backdrop-filter: blur(5px);  border-radius: 30px;  box-shadow: 3px 3px 5px #65656570; background-color: #ffffffd4; font-weight: 500; color: #656565;  text-shadow: 1px 1px 2px #ffffff;position: relative;}
.mapTools .mtBtn:hover{  border-color: #d9cb2b7a; background-color: #faeb5e;  }
.mapTools .mtBtn i{width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%;}
.mapTools .mtBtn p{position: relative;}
.mapTools ul{align-items: flex-start;}



 /* 通知
-------------------------*/ 
.notiitmBx{position: absolute;right: 0;z-index: 510}
.notiitmBx.full{top: 0;bottom: 0}
.notiitmBx.full .ovfl-y{padding: 55px 10px 30px 5px}
.notiitmBx.full .ovfl-y::-webkit-scrollbar { display: none;}
.notiitmBx.imme{bottom: 20px}
.notiitmBx .notibar{ line-height: 36px;border-radius: 15px;overflow: hidden;text-align: center;  width: 205px;  margin: 10px;}
.notiitmBx .notibarbtn {padding: 0 10px;  background-color: #37373730;   color: #ffffffa6;    backdrop-filter: blur(3px);}
.notiitmBx .notibarbtn.on{    background-color: #373737b3}
.notiitmBx .notibarbtn + .notibarbtn{margin-left: 1px}
.notiitmBx .notiitm{ width: 225px; background-color: #25527ec9; color: #fff; font-weight: 300;padding: 13px 15px 4px 15px; border-radius: 20px; box-shadow: 0 3px 5px #0000003b; margin-left: auto; position: relative;}
.notiitmBx .notiitm.read{box-shadow: none; background-color:#3b4b5ac9;    color: #d4d4d4; }
.notiitmBx.imme .notiitm{position: absolute;bottom: 0;right: 0;}
.notiitmBx.full .notiitm + .notiitm{margin-top: 7px}
.notiitmBx.imme .notiitm + .notiitm{}
.notiitmBx.imme .notiitm:nth-child(3n+1){right: 14px;bottom:18px;z-index: 3;  backdrop-filter: blur(5px)}
.notiitmBx.imme .notiitm:nth-child(3n+2){right: 7px;bottom:9px;opacity: 0.8;z-index: 2}
.notiitmBx.imme .notiitm:nth-child(3n+3){right: 3px;bottom:0;opacity: 0.5;z-index: 1}

.notiitmBx .i_align{align-items: baseline}
.notiitmBx .i_align > i{margin-right: 10px}
.notiitmBx .notiitm .tm{padding-top: 7px;text-align: right;    color: #8daacd;font-size: .8em}
.notiitmBx .notiitm .inpBx{padding: 5px 0 5px 10px;}
.notiitmBx .notiitm .inpBx .input:focus{    background-color: #f0f8ff73;}
/*.notiitmBx.imme .notiitm .inpBx{display: none}*/
.notiitmBx.imme .notiitm:nth-child(3n+1) .inpBx{display: block;}
.notiitmBx .notiitm .useAvt{width: 35px;height: 35px;    margin-right: 13px;border-radius: 40%}

.notiitmBx .notiitm .cth{display: inline-block;font-size: .9em}

.notiitmBx .notiitm .cth::before{content:"\276c";margin-right:2px }
.notiitmBx .notiitm .cth::after{content:"\276d";margin-left:2px }
.notiitmBx .notiitm .sth.cspt:hover{text-decoration: underline;}

 /* 基本資訊
-------------------------*/ 
.pbx_usr-editpsl .fN_toOls .tbt{margin: 10px 3px;border-radius: 40%; border: 1px solid #415178;}
.pbx_usr-editpsl .fN_toOls .tbt .tbtsvg{fill: #415178;}
.pbx_usr-editpsl .pbx-inf{padding:15px 40px 0}
.pbx_usr-editpsl .clmn{align-items: baseline;}
.pbx_usr-editpsl .clmn[tt="gender"] {align-items: center;}
.pbx_usr-editpsl .clmn + .clmn{padding-top: 17px}
.pbx_usr-editpsl .clmn .inptT{font-weight: bold;  margin-right: 12px; font-size: 1.1em;letter-spacing: .15em;}

@media (max-width: 1000px) {
    .pbx_usr-editpsl .pbx-inf{padding:15px 20px 0}
}


 /* 設定
-------------------------*/   
.pbx_usr-systset .pbx-inf{padding:0 30px}
.pbx_usr-systset .inptT{ background-color: #6a768d3b;  color: #3c3d41;padding: 6px 10px;  }
.pbx_usr-systset .clmn{padding: 6px}
.pbx_usr-systset .clmn i{ font-size: 3em;    margin-bottom: 15px;}
.pbx_usr-systset .clmn p{white-space:nowrap;}
.pbx_usr-systset .clmn .clmnbx{background-color: #6a768d3b;border-radius:40px;padding: 30px 20px;color: #fff;text-shadow: none;overflow: hidden;}
.pbx_usr-systset .clmn:hover .clmnbx{box-shadow:0 0 0 5px rgb(0 0 0 / 12%) inset;}
.pbx_usr-systset .clmn-1{width: 50%}
.pbx_usr-systset .clmn-2{width: 100%}
.pbx_usr-systset .bckgdBx{border-left: 7px solid #5ecb91; border-top-right-radius: 40px; border-bottom-right-radius: 40px;overflow: hidden;    height: 150px;width: 150px}
.pbx_usr-systset .chkBxs{padding: 0 0.5em}
.pbx_usr-systset .chkBxs.flxdpl{align-items: center;}
.pbx_usr-systset .chkBxs .chkBx + .inpBx{display: none;}
.pbx_usr-systset .chkBxs .chkBx.hoked + .inpBx{display: block;}

 /* 最近使用過的裝置
-------------------------*/  
.pbx_usr-useddvi .pbx-inf{padding:0 30px}
.pbx_usr-useddvi .pbxTB{padding:0 5px 7px;font-weight: bold;}
.pbx_usr-useddvi .bxitm{margin-bottom: 5px;    border-radius: 5px;  color: #3c3d41;}
.pbx_usr-useddvi .bxitm:nth-child(odd){    background-color: rgb(149 199 202 / 80%)}
.pbx_usr-useddvi .bxitm:nth-child(even){  background-color: rgb(184 211 182 / 80%)}
.pbx_usr-useddvi .bxitm:hover{   background-color: #7f91b470;}
.pbx_usr-useddvi .bxitm .insbx{padding: 15px 5px}
.pbx_usr-useddvi em{    background-color: #cee9ff;    padding: 2px;    border-radius: 2px;}
.pbx_usr-useddvi .sc- + .sc-{margin-top: 5px}
.pbx_usr-useddvi .rtngBtn .bTn{max-height: 30px;max-width: 100px;line-height: 30px;border-radius: 3px;margin: 5px auto 0;text-shadow: none}

@media (max-width: 1000px) {
    .pbx_usr-useddvi .pbx-inf{padding:0 15px}
}

.st-container{position: absolute;width: 100%;height: 100%;z-index: 1;top: 0;left: 0;overflow: hidden}
 

 /* 背景
-------------------------*/ 
.bgd-o{top:0;right: 0;bottom: 0;left: 0;z-index: 1}
.bG_signin{width: 100%;height: 100%;background-repeat: no-repeat;  background-color: #f7f7f7;background-size: 110%;    background-position: right top;}
.bG_gomap{width: 100%;height: 100%;background-position:center center;background-repeat:no-repeat;}
.bG_gomap .maparea{z-index: 1}
.bG_gomap .leaflet-div-icon{  background: transparent;  border: unset;}
.bG_gomap .leaflet-marker-icon img{ margin-left: -15px !important;    margin-top: -15px !important;    width: 20px !important;    height: 20px !important;    background-color: #ffffffd4;    border-radius: 50%;    padding: 5px !important;    backdrop-filter: blur(1px);    box-shadow: 0 2px 3px 0px #00000078;}
/*.bgImg::after{content: "";background-color: rgba(0,0,0,0.3);position: absolute;top: 0;left: 0;width: 100%;height: 100%}*/


 /* 上方ＢＡＲ
-------------------------*/ 
.userTB{position: absolute;left: 0;right: 0;  z-index: 9999; color:#5c5c5d; line-height: 44px; pointer-events: none}
.JUImenu .Jmenu_eo.LVbar{      
            mask-image: radial-gradient(circle 50px at 100px 128px, transparent 25px, black 26px);
            -webkit-mask-image:radial-gradient(circle 50px at 100px 128px, transparent 25px, black 26px); 
        }
.JUImenu .Jmenu_eo.trop{      
            mask-image: radial-gradient(circle 60px at 161px 121px, transparent 30px, black 31px);
            -webkit-mask-image: radial-gradient(circle 60px at 161px 123px, transparent 30px, black 31px);
        }
.JUImenu .Jmenu_eo.data{      
            mask-image: radial-gradient(circle 50px at 207px 123px, transparent 25px, black 26px);
            -webkit-mask-image: radial-gradient(circle 50px at 207px 123px, transparent 25px, black 26px); 
        }
.JUImenu .Jmenu_eo.info{      
            mask-image: radial-gradient(circle 50px at 244px 123px, transparent 25px, black 26px);
            -webkit-mask-image: radial-gradient(circle 50px at 244px 123px, transparent 25px, black 26px); 
        }
.JUImenu .Jmenu_eo.card{      
            mask-image: radial-gradient(circle 50px at 282px 123px, transparent 25px, black 26px);
            -webkit-mask-image: radial-gradient(circle 50px at 282px 123px, transparent 25px, black 26px) ;
        }
.JUImenu .Jmenu_eo .empty_text{display: none;top: 165px;}
.JUImenu .Jmenu_eo.LVbar .LVbar{display: block;left: 20px;}
.JUImenu .Jmenu_eo.trop .trop{display: block;left: 45px;}
.JUImenu .Jmenu_eo.data .data{display: block;left: 163px;}
.JUImenu .Jmenu_eo.info .info{display: block;left: 153px;}
.JUImenu .Jmenu_eo.card .card{display: block;left: 237px;}

.userTB .sets{border-radius: 17px;overflow: hidden;margin-top: 4px;margin-right: 4px;backdrop-filter: blur(5px);  -webkit-backdrop-filter: blur(5px);}
.userTB .sets .uPbt{padding: 4px;  width: 34px;  height: 32px;  pointer-events: auto;  background-color: #ffffff54;filter: drop-shadow(0 1px 3px #ffffff);}
.userTB .sets .uPbt.sel{background-color: #ffffff;}


.userTB .sets .usAvt{width: 24px;height: 24px;margin:4px auto ;    background-color: #bbbbbb7a; backdrop-filter: blur(5px);border-radius:40% }
.userTB .sets .uPbt .cc{-index: 5;  right: -3px; bottom: -3px;}



.userTB .sets .uPbt.lgin .tbtsvg{fill:#f22525;}

.userTB .sets .uPbt.tmig .tbtsvg{animation: spin 3s linear infinite;}
.userTB .sets .uPbt.tmig .svgframe{    stroke:#27992c;}
.userTB .sets .uPbt.lgin[k="beta_lgin"] .tbtsvg{fill:#27992c;}
.userTB .sets .uPbt.lgin[k="disaster_lgin"] .tbtsvg{fill:#4d67cf;}

.userTB .sets .uPbt.bkad .tbtsvg{animation: spin 3s linear infinite;fill:#4d67cf;}
.userTB .sets .uPbt.earq .tbtsvg{fill:#bf2e30;}

/*.userTB .sets .uPbt.lgin{background-color:#3f4676b8;}
.userTB .sets .uPbt.bkad{background-color: #4d67cf}
.userTB .sets .uPbt.earq{background-color: #bf2e30}*/
.userTB .sets .uPbt.bkad .circle,
.userTB .sets .uPbt.earq .tbtsvg{display: none;}
.userTB .sets .uPbt .circle{width: 20px;  height: 20px;  background-color: #ffffff; border-radius: 50%; margin: 6px;}

@media (min-width: 1001px) {
    .userTB .sets .menu{display: none}
    .userTB .ttlBar{padding:0 10px}
}

 /* 主內容
-------------------------*/
.st-pusher{position: absolute; top: 0;left: 0;right: 0;bottom: 0;}
/*.st-pusher[class*="st_shrink"]{transform: scale(0.85) translate(-85vw, 0);pointer-events:none;-ms-touch-action: none;touch-action: none;box-shadow: 5px 5px 10px #00000057;border-radius: 40px}*/

.st-pusher[class*="st_shrink"]{pointer-events:none;-ms-touch-action: none;touch-action: none;}
.st-pusher .m_oped-o{background-color: transparent;z-index: 500;display: none}
.st-pusher[class*="st_shrink"] .m_oped-o{display: block;backdrop-filter: blur(30px);-webkit-backdrop-filter: blur(30px);}
.pusherBox{height: 100%; width: 100%; overflow: hidden;  align-items: center;backdrop-filter: blur(15px);-webkit-backdrop-filter: blur(15px);position: absolute;top: 0;left: 0;z-index: 10}
@media (max-width: 1000px) {
    .wndArA.ovfl-y{padding-right: 0 !important}

}


 /* wndArA
-------------------------*/ 
.wndaraBx{height:100% ;overflow: hidden;}
.wndArA{/*position: absolute;  z-index: 5; top:0;left: 0;*//*background-color: #00000099; */position: relative; z-index: 10; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;overflow: hidden;}
.wndArA .topbar{    font-weight: 800;align-items: flex-start;margin-left: 5vw;margin-right: 5vw; z-index: 15;line-height: 32px;color: #fff;font-size: 1.15em}



.wndArA .topbar span.lmtRw-1{display: inline-block;  vertical-align: middle;  max-width: 80px;}
.wndArA .topbar ul li{background-color:  #5c5c5cba;}
.wndArA .topbar ul.first{ border-radius: 13px;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);margin-right: 6px;box-shadow: 0 2px 4px #0000003b;}
.wndArA .topbar ul.first li:first-child{border-top-left-radius: 13px;border-bottom-left-radius: 13px;}
.wndArA .topbar ul.first li:last-child{border-top-right-radius: 13px;border-bottom-right-radius: 13px;}

.wndArA .topbar ul.last li{border-radius: 13px;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);margin-left: 6px;box-shadow: 0 2px 4px #0000003b;padding-left: 8px;padding-right: 8px;font-size: .8em}
.wndArA .topbar ul.last li.filterBtn{padding: 0 15px}
.wndArA .topbar ul li.on{background-color: #0db285db;}
.wndArA .topbar ul li:active{box-shadow: none;}
.wndArA .topbar .userAvt {  width: 30px;   height: 30px;   margin-right: 10px;   border-radius: 40%;   background-color: #cccccc75;}
.wndArA .topbar ul .tbt{height: 32px;width: 36px;}
.wndArA .topbar .title{padding-right: 10px;}
.wndArA .topbar .userNm{    max-width: 30vw;padding-right: 10px;}
.wndArA .sclblMvbx{height: 100%}
.wndArA .sclblOvfl{padding-bottom: 2.5vh;position: relative;}
.wndArA .sclblOvfl.havbtm{padding-bottom: 95px}
.wndArA .m_ara{width: 100%;height: 100%;top: 0;left: 0;position: fixed;}
.wndArA .NoContent{   pointer-events: none; width: 66vw;   height: 46vw; position: absolute; left: 50%;  margin-left: -33vw;  top: 50%; margin-top: -25vw;  border-radius: 9px;  font-size: 1.5em;   color: #ffffff; text-shadow: 1px 1px 3px #000000c9;}
.wndArA .itemBx{position: relative;  margin-top: 15px; }
.wndArA .itemBx.longclk-one{pointer-events: none}
.wndArA .itemBx.longclk-one .item:not(.longClk){filter: blur(5px);}
.wndArA .itemBx .item.longClk{pointer-events: auto;    box-shadow: 0 4px 7px #0000005e;}
.wndArA .notsmthing{}

    @media (min-width: 768px) {
        .wndArA .topdata{max-width: 600px;margin-right: auto;margin-left: auto;}
        .wndArA .itemBx{max-width: 600px;margin-right: auto;margin-left: auto; margin-top: 25px; }
        .wndArA .topbar{margin-top: 25px;top: 10px;}

    }

    @media (max-width: 767px) {
        .wndArA .topbar{margin-top: 60px;top: 60px;}
        .wndArA .topbar .chbar{-webkit-flex: 1 0;flex: 1 0;-moz-box-flex: 1;}
    }

    


/*  開場
------------------------------- */
.IndexMain{ width:100%;height: 100%;}
.IndexMain .wndind{width: 50vw;  height: 45vh;padding: 30px;line-height: 1.8; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-image: url(../imgs/dotbg.png);   background-color: rgb(28 28 28 / 40%);  box-shadow: 0 2px 10px #0000002b;   font-size: 1.2em;   color: #fff;   text-shadow: none;}


/*  地圖資訊小卡
------------------------------- */
.smoneMapI{  color: #fff; z-index:1  }
.smoneMapI .ovflbox{width: 100%;height: 100%;        -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
.smoneMapI [class*="_card"]{width: 230px;overflow: hidden;position: relative;    backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); box-shadow: -2px 2px 7px #0000002b;}
.smoneMapI .nd_card .cc{position: absolute;left: 10px;bottom: 10px;}
.smoneMapI .infBx{position: relative;/*background-color:rgb(0 147 200 / 75%); */ ; background-color: rgb(58 57 52 / 75%) ;background-image: url(../imgs/dotbg-w.png);}
.dsstrMap .smoneMapI .infBx{background-color: rgb(137 115 105 / 75%);}

.smoneMapI .pp_card .infBx{flex-direction: row-reverse;    background-color:rgb(121 223 219 / 85%);  color:#0a605c;}
.smoneMapI .nd_card .infBx,
.smoneMapI .sk_card .infBx{padding: 6px 8px 6px 8px; }
.smoneMapI .stad_card .infBx{     background-color: rgb(255 188 16 / 85%);  color: #ad6900;  text-align: center;  padding: 10px;  font-weight: 500;}


.smoneMapI .img{border-radius: 22px;width: 60px;min-width: 60px; height: 60px; background-color: #1b1b1b2b;}
.smoneMapI .nd_card .img{margin-right: 13px;}
.smoneMapI .sk_card .img{margin-right: 13px;}
.smoneMapI .pp_card .img{border-radius: 3px;margin-right: -8px}
.smoneMapI .pp_card .img + .flx-1{padding: 6px 8px 6px 15px; }

.smoneMapI .sk_card .sk-lv{position: absolute; left: 7px; top: 55px; border-radius: 6px 17px;  font-size: 0.8em;  background-color: #355c89;  padding: 0 6px;}

.smoneMapI .infbx_1{    padding-bottom: 2px; padding-top: 5px;    align-items: center;}
.smoneMapI .infbx_2{    font-size: .8em;}
.smoneMapI .smoneName{font-size: 1.2em;max-width: 145px;}
.smoneMapI .stad_card .smoneName{max-width: unset;}
.smoneMapI .smoneData{font-size: .8em}
.smoneMapI .dataitem {  color: rgb(2 146 186 / 100%);  padding-right:  8px;  margin-bottom: 3px;  font-size: 0.9em;}
.smoneMapI .smonePrice{}
.smoneMapI .othi_dis{text-align: right;}
.smoneMapI .othi_lct{font-weight: 100;line-height: 1.3;margin-bottom: 2px;margin-top: -2px}
.smoneMapI .datafrm{ background-color: rgb(58 57 52 / 50%) ;    padding: 3px 0;  font-size: 0.8em;  color: #e7e7e7;  background-color: rgb(70 70 70 / 60%);  color: antiquewhite;}
.smoneMapI .datafrm + .datafrm{  border-top: 1px solid #ffffff52;}
.smoneMapI .pp_card .datafrm{background-color: rgb(242 204 72 / 60%);color: #594100;}
.smoneMapI .pp_card .crown{right: 37px; top: 18px; }
.smoneMapI .pp_card:hover .crown{  top: 13px;  }





.dsstrMap .smoneMapI .datafrm{background-color: rgba(137, 115, 105, 0.75);}

.smoneMapI .datafrm .frmttl {    line-height: 1.3;    padding: 5px 7px 5px 7px;}
.smoneMapI .datafrm .frmttl b {    color: rgba(252,220,37,1)}
.smoneMapI .datafrm.flxdpl .frmvl, 
.smoneMapI .datafrm .flxdpl .frmvl {    border-left: 1px solid #ffffff52;}
.smoneMapI .datafrm .frmvl .vlbx {    padding: 2px 3px 2px 8px;    white-space: nowrap;    font-weight: 400;}
.smoneMapI .datafrm .frmvl [class*="vlbx"] + [class*="vlbx"] {    border-top: 1px solid #ffffff52;}
.smoneMapI .datafrm .frmvl .vlbx .mNy {   font-size: 1.5em;   margin: 0 3px}


    @media (min-width: 768px) {
        .sMbx{}
        .smoneMapI{height: 100vh;right: 0;  top: 0;z-index: 10; /*border-left:1px solid rgb(255 255 255 / 70%); */ }
        .smoneMapI .ovflbox{overflow-y:auto;}
        .smoneMapI .mvbx.flxdpl { -webkit-flex-flow: column; flex-flow: column; padding-top: 55px;padding-bottom: 30px}
        .smoneMapI [class*="_card"]{border-radius: 27px 0 0 27px;margin-bottom: 4px;margin-left: 13px}
    
    }
    @media (max-width: 767px) {
        .sMbx{}
        .smoneMapI{width: 100vw;bottom: 0;left: 0;z-index: 10;/*border-radius: 30px 30px 0 0; border-top: 1px solid #fff;*/bottom: 0}
        .smoneMapI .ovflbox{overflow-x:auto;padding-left: 8px ;padding-right: 8px}
        .smoneMapI [class*="_card"]{   margin: 17px 5px 0px; border-radius: 27px 27px 1px 1px; }
    }


/*  地圖數據
------------------------------- */
.mapDataFilter{left:0;top: 0;font-size: 0;z-index: 2;font-size: 1em;pointer-events: none;height: 100%}
.mapDataFilter .mdfbx{border-radius:0 0 30px 0; width: 230px; overflow-y: auto;max-height: 100%;pointer-events: auto; backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px); box-shadow:1px 1px 0 #00000078 inset, 1px 1px 0 #ffffffb3; }
.mapDataFilter .mdfbx::-webkit-scrollbar { display: none;}
.mapDataFilter .mDFbg{  background-image: url(../imgs/dotbg-w.png);   position: sticky;top: 0;z-index: 1; background-color: #0000003b;box-shadow:0 2px 5px #0000003b; }
/*.mapDataFilter .mDFbg .circle{  background-color: #373737c4; width: 50%; position: absolute; top: 0;  height: 100%;}
.mapDataFilter.need-fb_on .mDFbg .circle{left: 0;}
.mapDataFilter.skill-fb_on .mDFbg .circle{left: 50%;}*/
.mapDataFilter .filterBar{     line-height: 1.3;position: relative;  font-size: 1.15rem;color: #fff;min-height: 50px}
.mapDataFilter .filterBar.on{background-color: rgb(189 96 21 / 65%)}
.mapDataFilter .filterBar.need_fb.on{background-color: rgb(53 168 91 / 65%)}
.mapDataFilter .filterBar.skill_fb.on{background-color:rgb(67 143 216 / 65%)}

.mapDataFilter .filterBar .tbt{     margin-right: -3px; margin-left: -14px;  margin-top: -3px;}
.mapDataFilter .filterBar.seson{background-color: #72813870;}
.mapDataFilter .mpbtnbx{right: -50px;  top: 50px;pointer-events: auto;}
.mapDataFilter .mpbtnbx .mpbtn{     color:#ffffffc9;   width: 34px;   height: 34px;   line-height: 34px;   text-align: center;    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);    background-color: #85766b94;    border-radius: 40%;    margin-bottom: 5px;    box-shadow: 0 3px 7px #00000030;    border: 3px solid;}
.mapDataFilter .mpbtnbx .mpbtn.on{    background-color: #00b4b7ad;    color: #6ff4ff;    box-shadow: 0 3px 7px #0000007d;}
.dsstrMap .mapDataFilter .mpbtnbx .mpbtn.on{background-color: #b77400ad; color: #ffb749;}


.mapDataFilter .mpbtnbx .mpbtn:active{box-shadow: unset;}

.mapDataFilter .mpbtnbx .mpbtn i{color: #fff}


.mapDataFilter .datafrm{    padding: 5px 7px; font-size: 0.8em; color: #fff; background-color:rgb(70 70 70 / 60%); margin-top: 2px; /*box-shadow: 0 4px 3px inset #00000024; */font-weight: 100;}
.mapDataFilter.need-fb_on .datafrm .frmvl.ndvl{color:rgb(176 255 204);}
.mapDataFilter.skill-fb_on .datafrm .frmvl.skvl{color:rgb(142 200 255)}
.mapDataFilter.need-fb_on .skvl,
.mapDataFilter.skill-fb_on .ndvl{display: none !important;}


.mapDataFilter .nowwhere{  position: sticky;top: 50px;  background-color: #85766bc9; color: #e5e5e5;padding: 9px 10px 6px; background-image: url(../imgs/dotbg-w.png);font-weight:800 }
.mapDataFilter .myrange{ color: #fff;}
.mapDataFilter .myrange > .flxdpl .rgbtn + .rgbtn{margin-left: 1px}
.mapDataFilter .myrange .rgbtn{background-color: #6e8b8594; color: #4a674d;padding: 8px 10px 6px; text-align: center;margin-top: 1px}
.mapDataFilter .myrange .rgbtn:hover{ background-color: #ad9e92a1; }
.mapDataFilter .myrange .rgbtn.sel{background-color:#6db800d4 ;    color: #fff;}
.mapDataFilter .mdfovfl{max-height: 70vh;height: auto;}
.mapDataFilter .datafrm .frmttl{    line-height: 1.3; padding:0 7px 0 0;}
.mapDataFilter .datafrm .frmttl b{    color: rgba(252,220,37,1)}
.mapDataFilter .datafrm.flxdpl .frmvl,
.mapDataFilter .datafrm .flxdpl .frmvl{border-left:1px solid #ffffff52;}
.mapDataFilter .datafrm .frmvl .vlbx{padding: 2px 0 2px 4px;white-space:nowrap;font-weight: 300;}
.mapDataFilter .datafrm .frmvl [class*="vlbx"] + [class*="vlbx"]{border-top:1px solid #ffffff52;}
.mapDataFilter .datafrm .frmvl .vlbx span{ font-size: 1.5em;margin: 0 3px}
.mapDataFilter .datafrm .frmvl .vlbx_b{font-size: 1.1em;font-weight: 400;line-height: 1.4;}
.mapDataFilter .datafrm .frmvl .vlbx_b:hover{    background-color:#66fff836}
.mapDataFilter .datafrm .frmvl .vlbx_b > .flx-1{padding: .5em 0 .5em .5em;}

.mapDataFilter .datafrm .frmvl .img{width: 25px;height: 25px;border-radius: 30%;margin-left:.5em }
.mapDataFilter .datafrm .dfit + .dfit{padding-top: 3px;}
.mapDataFilter .datafrm .vlttl{text-align: center; padding: 4px;  background-color: #34343470; border-radius: 15px;}

.smoneMapData{z-index: 2}
.smoneMapData .home.tbt{}
.smoneMapData .dataBx{ width: 170px;color: #fff; border-top-left-radius: 15px; border-bottom-left-radius: 10px;overflow: hidden; text-shadow: 1px 1px 2px #29597ce6;  box-shadow: 0 2px 10px #0000002b;     font-size: 1.15em;position: relative;}
.smoneMapData .dataBx .datattl{ background-color: rgb(83 83 83 / 50%) ; background-image: url(../imgs/dotbg-w.png); padding:12px 20px;backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative;z-index: 1}
.smoneMapData:hover .dataBx .datattl{    background-color: rgb(64 65 64 / 55%);}
.need-fb_on .smoneMapData .dataBx:hover .datattl{background-color:rgb(0 120 85 / 50%)}
.skill-fb_on .smoneMapData .dataBx:hover .datattl{background-color:rgb(2 69 137 / 50%)}
.need-fb_on .smoneMapData .dataBx.sel .datattl{background-color: rgb(19 152 114 / 65%) !important;}
.skill-fb_on .smoneMapData .dataBx.sel .datattl{background-color:rgb(45 112 176 / 65%) !important;}
.smoneMapData .dataBx.sel .datattl{padding-top: 14px;border-top-left-radius: 30px; }
.smoneMapData .dataBx .datattl .tbt{}
.smoneMapData .dataBx .datattl p{font-size: 1.2em;    font-weight: 700;}
.smoneMapData .dataBx .datattl .vlbx{font-size: 0.8em;padding-left: 1px}
.smoneMapData .dataBx .datattl .vlbx span{ }
.smoneMapData .dataBx .datattl .vlbx_b{font-size: 1.1em;padding-left: 1px}
.smoneMapData .dataBx .datafrm{ height: 80px;font-size: 0.8em;  background-color: #26262694; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);  box-shadow: 0 4px 3px inset #00000024; font-weight: 100;}
.smoneMapData .dataBx:not(.sel) .datafrm{opacity: 0;height: 0; }
.smoneMapData .dataBx.sel .datafrm{}
.smoneMapData .dataBx .datafrm .frmttl{padding-right: 5px;padding-left: 5px; }
.smoneMapData .dataBx .datafrm .frmvl{border-left:1px solid #ffffff52;text-align: right}
.smoneMapData .dataBx .datafrm .frmvl{}
.smoneMapData .dataBx .datafrm .frmvl .vlbx{padding: 2px 8px;white-space:nowrap;}
.smoneMapData .dataBx .datafrm .frmvl .vlbx_b{font-size: 1.1em;padding-left: 1px}
.smoneMapData .dataBx .datafrm .frmvl [class*="vlbx"] + [class*="vlbx"]{border-top:1px solid #ffffff52;}
.smoneMapData .dataBx .datafrm .frmvl .vlbx span{ font-size: 1.3em;margin: 0 3px}
    @media (min-width: 768px) {
        .mapDataFilter{}
        .mapDataFilter .filterBar.cspt:hover{ background-color: #2a2a2aa3;}
        .mapDataFilter .nowwhere.cspt:hover{  background-color: #d39c02b8;}
        .mapDataFilter .mdfbx{}
        .smoneMapData{overflow-y:auto;right: 0;bottom:0;top: 0;padding-top:60px;}
        .smoneMapData .mvbx.flxdpl{  -webkit-flex-flow: column;  flex-flow: column ;padding: 10px 0 10px 20px}

        .smoneMapData .dataBx{margin-left: auto;}
        .smoneMapData .dataBx.sel{ width: 180px; position: sticky; top: 0; z-index: 10; bottom: 0;border-top-left-radius: 30px;}
        .smoneMapData .dataBx + .dataBx{margin-top: 8px}
        .smoneMapData .home.tbt{ }
    }
    @media (max-width: 767px) {
        .mapDataFilter{}
        .mapDataFilter .mdfbx{width: 200px}
        .smoneMapData{overflow-x:auto; bottom: 0;left: 0;right: 0}
        .smoneMapData .mvbx.flxdpl{align-items: end; padding: 10px 20px}
        .smoneMapData .dataBx{border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
        .smoneMapData .dataBx + .dataBx{margin-left: 8px}
        .smoneMapData .home.tbt{  }
        
    }


/*  地圖圖釘
------------------------------- */
.mapMark{width: 20px ! important; height: 20px ! important; margin-top: -16px ! important;  margin-left: -16px ! important;border-radius: 50%; text-align: center; box-shadow: 0 2px 8px 0px #17a0ffb0; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); background-color: #ffffffc9; border: 2px solid #000; padding: 5px !important;}
.markSet{width: 20px ! important; height: 20px ! important; margin-left: -20px! important;  margin-top: -20px! important;background-color: #ffa50091; border-radius: 50%; padding: 10px! important;}

.mapMark.colorFrame_gold{ background-color:  #FFD700;    border-color: #9c8501;filter: hue-rotate(0deg);}
.mapMark.colorFrame_silver{ background-color:    #C0C0C0;border-color: #6e6e6e;}
.mapMark.colorFrame_white{ background-color: #ffffff;border-color: #000}
.mapMark.colorFrame_gray{ background-color:  #555555}
.mapMark.colorFrame_darkgray{ background-color:  #808080}
.mapMark.colorFrame_lightblue{ background-color: #89d6ef;  border-color: #2a87a6;}


.markRange{background-color: ;border-radius: 50%;backdrop-filter: sepia(20%); -webkit-backdrop-filter: sepia(20%); border:1px solid #4e4e4e}

path.markRange.colorFrame_gold{    fill: #FFD700; stroke: #FFD700;}
path.markRange.colorFrame_silver{    fill: #C0C0C0; stroke: #C0C0C0;}
path.markRange.colorFrame_white{    fill: #ffffff; stroke: #ffffff;}
path.markRange.colorFrame_gray{    fill: #555555; stroke: #555555;}
path.markRange.colorFrame_darkgray{    fill: #808080; stroke: #808080;}
path.markRange.colorFrame_lightblue{    fill: #89d6ef; stroke: #89d6ef;}


.newndBt{}
@media (min-width: 768px) {
    .newndBt{left: -65px;bottom: 35px;}
}
@media (max-width: 767px) {
    .newndBt{right: 25px;top: -65px;}
}
.newndBt .ckbg{ top: -5px; left: -5px;background-color: #e66520;     opacity: 0.55;padding: 5px;box-shadow: 0 0 10px #e66520}
.newndBt .add1{background-color: #e66520;}

.smItemsPin{  padding: 5px;    line-height: 17px; overflow: hidden; color: #fff; font-size: 12px; border-radius: 50%;  text-align: center;  box-shadow: 0 0 0 5px #fff;   backdrop-filter: blur(5px);-webkit-backdrop-filter:  blur(5px); }
.smItemsPin.sel{ box-shadow:0 0 0 5px #ffff00d1 }
.smItemsPin.clr-1{ background-color: #000000c9;width: 30px; height: 30px; line-height: 30px;}
.smItemsPin.clr-2{ width: 22px; height: 22px; line-height: 22px;}
.smItemsPin.need-fb_on.clr-2{ background-color: #31572c}
.smItemsPin.skill-fb_on.clr-2{ background-color: #006494}
.smItemsPin.dsstr-fb_on.clr-2{ background-color: #572c2c}
.smItemsPin.clr-3{ width: 15px; height: 15px; line-height: 15px;}
.smItemsPin.need-fb_on.clr-3{ background-color: #90a955}
.smItemsPin.skill-fb_on.clr-3{ background-color: #00a6fb}
.smItemsPin.dsstr-fb_on.clr-3{ background-color: #a95555}

.smoneItPin{ background-color: #cccccccf;   width: 32px;   height: 32px; margin: 11px;  border-radius: 45%;   text-align: center;   backdrop-filter: blur(5px); -webkit-backdrop-filter:  blur(5px); box-shadow: 0 2px 3px 0px #00000057;  border: 5px solid #fff;}
.smoneItPin.sel{ box-shadow:0 0 0 5px #ffff00d1 }


.smoneItPin.colorFrame_gold { border-color: #FFD700;    width: 42px; height: 42px;}
.smoneItPin.colorFrame_silver{ border-color:    #C0C0C0;  width: 39px; height: 39px;}
.smoneItPin.colorFrame_white{ border-color: #ffffff;  width: 36px; height: 36px;}
.smoneItPin.colorFrame_gray{ border-color:  #555555 ; width: 32px; height: 32px;}
.smoneItPin.colorFrame_darkgray{ border-color:  #808080;  width: 29px; height: 29px;}
.smoneItPin.colorFrame_lightblue{ border-color: #89d6ef;  width: 26px; height: 26px; }






.smoneItPin.dsstr_pp{    border-color: #3860ac;}
.smoneItPin .hdht{position: absolute;  right: -12px; background-color: #3860ac; width: 20px;  height: 20px;  border-radius: 40%;  bottom: -4px;}
.smoneItPin .hdht .tbtsvg{    width: 16px;  height: 16px;  margin-top: -8px;  margin-left: -8px;}
.GpsPin{background-color:#36a6bcc9;color: #fff;bottom: 0;left: 0;width: 100%;text-align: center;z-index: 10;    backdrop-filter: blur(5px);-webkit-backdrop-filter:  blur(5px);}
.GpsPin .bg{margin: auto;max-width: 500px;    padding-bottom: 15px;}
.GpsPin .areaNm{ font-size: 1.5em; padding-top: 20px; line-height: 1.2;margin-bottom: 15px}
.GpsPin .areaNm span{font-size: .65em; color: #035c73}
.GpsPin .rtngBtn{padding-top: 25px}
.GpsPin .rtngBtn .bTn{border-radius: 15px;margin: 0 5px}
.GpsPin .areaInp{ margin: 0 30px;border: 1px solid #015c739e;border-radius:  20px; }
.GpsPin .inpBx{ padding: 17px;  }
.GpsPin .input{    border-radius: 2px;  border-bottom-color: #ffffffb3; color: #fff;}
.GpsPin .input:focus{border-radius: 0;background-color: #015c73c7; border-radius: 2px;border-color:transparent; }

.GpsPin .input + .placeholder{color: #505050; line-height: 40px;  position: absolute;  top: 0;  left: 10px;right: 10px;text-align: left;pointer-events: none}
.GpsPin .input:focus + .placeholder{display: none}

.GpsPin::-webkit-input-placeholder {color:#9A9A9A; }
.GpsPin:-moz-placeholder {color: #9A9A9A;}

.GpsPin .areaBtn{ padding: 15px;   color: #015c73;  font-size: 1.15em;  font-weight: 300;line-height: 1.4 ;border-left: 1px solid #015c739e;margin-top: 7px;margin-bottom: 7px}
.GpsPin .areaBtn:active{text-shadow: 0 0 5px #ffffffb3}

/* 活動參與狀態 */
.pArt-status [class*="sg-"]::after{content: "";width: 11px;height: 11px;border-radius: 50%;display: inline-block;vertical-align: middle;margin-left: 5px;box-shadow: 1px 1px 0 #ffffffa1, 1px 1px 0 #0000005e inset;}
.pArt-status .sg-1::after{background-color: #2faadf;  color: #2faadf;}
.pArt-status .sg-2::after{background-color: #7b7b7b;  color:#9d9b96}
.pArt-status .sg-3::after{background-color: #f47b13; color: #f47b13;}
.pArt-status .sg-4::after{ background-color: #dfdfdf;   color: #74736e;}


@media (max-width: 767px) {
    .IndexMain .wndind{width: 80vw; padding: 20px;}
    .table-list .pArt-status [class*="sg-"] +  [class*="sg-"]{margin-left: 20px}
}




/* ---------------------------- */
/*  學會會員
------------------------------- */
.pEoPlEmAg_wn .mmb-Nm {   padding-bottom: 2px;padding-top:2px}
.pEoPlEmAg_wn .mmb-Idt{color: #b08fba;}
.pEoPlEmAg_wn .mmb-Grp{color: #3191e3;}
.pEoPlEmAg_wn .mmb-sio{font-size: 0.9em;color: #7e7e7e}
.pEoPlEmAg_wn .certificate > img{    width: 250px;  margin: auto;  border-radius: 10px; max-width: 300px;    box-shadow: 0 2px 7px #00000033;}
/* 會員內頁資訊-次選單 */


.pEoPlEmAg_wn .base_introdu-nav{text-align: center;font-size: 1.2em;  color: #686868;}
.pEoPlEmAg_wn .base_introdu-nav li:hover{background-color: #8f8f8fe3;    color: #fff;}
.pEoPlEmAg_wn .base_introdu-nav li.sel{background-color: #545454e3;    color: #fff;}



@media (min-width: 1001px) {
    .pEoPlEmAg_wn .both-sides{display: -moz-box;  display: -ms-flexbox; display: -webkit-flex; display: flex; word-wrap: break-word;  word-break: break-all;}
    .pEoPlEmAg_wn .base_introdu-nav{ width: 150px;margin-right: 10px;margin-top: 1.5em;  }

}
@media (max-width: 1000px) {
    .pEoPlEmAg_wn .both-sides .dropdown-toggle ul{background-color: #ddddddbd; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;display: flex;  word-wrap: break-word;  word-break: break-all; box-shadow: 0 3px 5px #00000030;}
    .pEoPlEmAg_wn .both-sides .dropdown-toggle li{ -webkit-flex: 1 0;    flex: 1 0;    -moz-box-flex: 1;}
    .pEoPlEmAg_wn .both-sides .dropdown-toggle li + li{margin-left: 3px}
    .pEoPlEmAg_wn .both-sides .dropdown-toggle.dpd-3 li:first-child { border-top: 0;}
}
@media (max-width: 767px) {
    .pEoPlEmAg_wn [class*="mmbr-"] .table-list .rtngBtn:not(.flxdpl) .bTn + .bTn{margin-left: 3px}

}


/* 會員內頁資訊 */
.pEoPlEmAg_wn [class*="mmbr-"]{  -webkit-flex: 1 0;    flex: 1 0;    -moz-box-flex: 1; padding-top: 1.5em;}
.pEoPlEmAg_wn .mmbr-Info .flx-sqrform{  border: 1px solid #50a5b4; border-radius: 25px;   overflow: hidden;margin: 0 1em 2em}


/* 確認繳費 */
.pEoPlEmAg_wn .cf-pay.bxitm{box-shadow: 0 0 0 2px #f47b13 inset;}
.pEoPlEmAg_wn .paysth{align-items: center;    justify-content: right;    color:#363636;    font-weight: 800;}
.pEoPlEmAg_wn .paysth + .paysth{border-top: 1px dashed #ccc}
.pEoPlEmAg_wn .paysth input[type="checkbox"]{margin-left: 10px}
.pEoPlEmAg_wn .chkstyle_cf-pay .cf-pay_chknone{display: none;pointer-events:none;-ms-touch-action: none;touch-action: none;}
/* 繳費備註 */
.pEoPlEmAg_wn .payTip{  color: #937135; }
.pEoPlEmAg_wn .payTip.cspt{ padding: 0 4px;   border: 1px solid;   border-radius: 3px;    display: inline-block;   font-size: .9em;}
.pEoPlEmAg_wn .payTip.cspt:hover{background-color: #ccc}
/* 停權提示 */
.pEoPlEmAg_wn .stop-permission{   letter-spacing: 0.05em; background-color:#e5cb97d9;  padding: 15px;       color: #b73301}
.pEoPlEmAg_wn .stop-permission b{ font-size: 1.15em;}
.pEoPlEmAg_wn .stop-permission p{margin-top: 3px}
/* 會員活動 */
.pEoPlEmAg_wn .eve-Nm{padding-bottom: 5px;font-weight: bold;font-size: 1.1em}
/*研討影片*/
.pEoPlEmAg_wn .vdo-link{font-size: 0.8em;    color: #b08fba;    padding-top: 3px;}
.pEoPlEmAg_wn [class*="mmbr-"] .table-container{text-align: center;  overflow: hidden;border-bottom-left-radius: 25px;border-top-left-radius: 25px ; }
.pEoPlEmAg_wn [class*="mmbr-"] .table-container:last-child{border-bottom-left-radius: 0;}
.pEoPlEmAg_wn [class*="mmbr-"] .table-container +  .table-container{margin-top: 1.5em}
.pEoPlEmAg_wn [class*="mmbr-"] .table-list .bxitm:nth-child(even){background-color: hwb(0deg 100% 0% / 30%)}
.pEoPlEmAg_wn [class*="mmbr-"] thead{    background-color: #5d7aa4; color: #fff;}
.pEoPlEmAg_wn [class*="mmbr-"] .table-list .rtngBtn{padding-right: 10px;padding-bottom: 10px;padding-left: 10px}
.pEoPlEmAg_wn [class*="mmbr-"] .table-list .rtngBtn.flxdpl .bTn{margin-left: 3px}
.pEoPlEmAg_wn [class*="mmbr-"] thead th{padding-top: 3px;padding-bottom: 3px}
.pEoPlEmAg_wn .updt{font-size: 0.8em;  text-align: right;  line-height: 1.5;  font-weight: 800;  padding: 1.5em 5px 0;  color: #795c8e;}
.pEoPlEmAg_wn .grdsth{padding-bottom: 2em}
.pEoPlEmAg_wn .grdsth p{margin-bottom:.5em;font-weight: 800}
.pEoPlEmAg_wn .rvw_mmbr-Info{    background-color: #8fc5eb6e;min-height: 100%}
.pEoPlEmAg_wn [class*="rvw_mmbr-"] .grdsth p{    font-size: 1.5em;}
.pEoPlEmAg_wn .rvw_mmbr-Info .table-container{font-size: 1.2em;border: none;  padding: 2em 1em;margin: 0 1.5em}
.pEoPlEmAg_wn .rvw_mmbr-Info .tdh{  width: 30%; color: #0b5da8}
.pEoPlEmAg_wn .rvw_mmbr-Apd{ -webkit-flex: 0.5 0;    flex: 0.5 0;    -moz-box-flex: 0.5;}
.pEoPlEmAg_wn .rtngBtn .dec::before{content: "";background: linear-gradient(to right,  rgb(255 255 255 / 80%) 0%,rgba(255,255,255,0) 100%);position: absolute;width: 100%;height: 100%;top: 0;left: 0}
.pEoPlEmAg_wn .rvw_result{margin-left: 1.5em;text-align: left;position: relative;    font-weight: 800;font-size: 1.2em}


@media (min-width: 1001px) {
    .pEoPlEmAg_wn .rvw_MMbrBx{display: -moz-box;  display: -ms-flexbox; display: -webkit-flex; display: flex; word-wrap: break-word;  word-break: break-all;}
}
@media (max-width: 1000px) {
    .pEoPlEmAg_wn .updt{padding: 0.8em 20px 0;}
    .pEoPlEmAg_wn .updt > *{display: inline-block; vertical-align: middle;}

}
@media (min-width: 768px) {
    .pEoPlEmAg_wn [class*="mmbr-"] .table-list .rtngBtn:not(.flxdpl) .bTn + .bTn{margin-top: 3px}

}
@media (max-width: 767px) {
    .pEoPlEmAg_wn [class*="mmbr-"] .table-list .rtngBtn:not(.flxdpl) .bTn + .bTn{margin-left: 3px}

}



/* 上傳圖檔
------------------------------- */
.upload-box {    display: inline-block;   margin: 0 8px 8px 0;   padding: 10px;    border-radius: 20px;    border: 2px dashed #00a8b8;   text-align: center;   position: relative;    background-color: #00a8b83b;}
.upload-box + .upload-box{}
.upload-box.editing{border-color:#2faadf !important}
.upload-box.error {  border: 1px solid #de5858;}
.upload-box.upload-drogdrop {  border-color: #00a8b8;  background-color: #ececec;}
.upload-box .d-none {    display: none!important;}
.upload-box .i-icon {   height: 24px;    width: 24px;  display: inline-block;    vertical-align: middle;}
.upload-box .i-icon .st0{fill:#00a8b8;}
.upload-box .btn-upload-deleted {cursor: pointer;    box-shadow: 1px 1px 5px #0000008f; position: absolute;     right: -8px;  top: -10px;  z-index: 1;    background-color: #0bacbb;    border-radius: 40%;}
.upload-box .icons-btn-upload-deleted{height: 36px;    width: 36px;   display: block}
.upload-box .choose-file-label {    -webkit-box-sizing: border-box;    box-sizing: border-box;    display: block;    cursor: pointer;    margin-bottom: 0;   color: #098d9a}
.upload-box .img-id {min-width: 150px; border-radius: 15px;     background-color: #e9eded; margin-bottom: 3px;position: relative; background-size: cover;  overflow: hidden;}
.upload-box .img-id.img-upload{  border: 1px solid #ccc; }
.upload-box .img-id img {  -ms-flex-item-align: center;    -ms-grid-row-align: center;    align-self: center;    -ms-flex-negative: 0;    flex-shrink: 0;}
.upload-box .choose-file {    height: 0.1px;    opacity: 0;    overflow: hidden;    z-index: -1;    position: absolute;    width: 0.1px;}
.upload-box .selphobtn{line-height: 24px}
.upload-box .txt-icon{display: inline-block;vertical-align: middle;}
.upload-box a.collapsed .icons-ic-arrow-list-up,
.upload-box a:not(.collapsed) .icons-ic-arrow-list-down{display:none}
.upload-box .seg-border .choose-file-label i {    margin-right: 5px;}

/*-- 上傳圖檔_說明-- */
.upload-box .text-grey {  font-size: 0.75rem;   color: #666666;}
.set-tips{  margin-top: 10px;}
.set-tips ul{ background-color: #edebe38f;   line-height: 1.6;  padding: 0.6em 1em;   border-radius: 8px;display: inline-block;}
.set-tips li{list-style-type: disc;list-style-position: inside; color: #91877d; padding:1px .5em;font-size: 0.9em;}


/*  格子排列
------------------------------- */
.grid-sort{     padding: 7px;display: -moz-box;  display: -ms-flexbox; display: -webkit-flex; display: flex; word-wrap: break-word;  word-break: break-all;}
.grid-sort .griditm{min-width: 200px;box-sizing: border-box; padding: 5px;position: relative}
.grid-sort .griditm .img{height:120px;background-color: #efefef78}
.grid-sort .griditm.sel .img{box-shadow:0 0 0 5px inset #0284ff}
.grid-sort .griditm .bar{    height: 30px;position: absolute;right:5px; left:5px ;top: 5px;padding: 10px }
.grid-sort .griditm .bar::before{opacity: .8;content:"";position: absolute;width: 100%;height: 100%;top:0;left:0;transition: 0.3s;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.84+15,0+100 */background: linear-gradient(to bottom,  rgba(0,0,0,0.84) 0%,rgba(0,0,0,0.84) 15%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.grid-sort .griditm:hover .bar::before{opacity: 1;}
.grid-sort .griditm.sel .bar::before{opacity: .8;background: linear-gradient(to bottom,  rgba(2,132,255,0.84) 0%,rgba(2,132,255,0.84) 15%,rgba(2,132,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.grid-sort .griditm .bar .checkbox{position: relative;}
.grid-sort .griditm .bar .nmb{color: #fff;position: relative;}
.grid-sort .griditm .con{font-size: 1.1em}
.grid-sort .griditm .tim{    color: #776853;font-size: .9em}

  @media screen and (min-width: 600px) {
    .grid-sort .griditm{ width: 50%;}
    .grid-sort .griditm .img{height:140px}
  }

  @media screen and (min-width: 1000px) {
    .grid-sort .griditm{ width: 33.33%}
    .grid-sort .griditm .img{height:160px}
  }
  
  @media screen and (min-width: 1400px) {
    .grid-sort .griditm{ width: 25%}
    .grid-sort .griditm .img{height:180px}
  }





/*  右側數據 ass-RIst
------------------------------- */
.ass-RIst{   color: #dcdcdc;z-index: 50; }
.ass-RIst .assBg{/*margin-left: 20px;*/height: 100%; }
.ass-RIst .ovfl-y{padding-left: 10px;padding-top: 60px;position: relative;z-index: 1}
.ass-RIst .dVd{     color: #7f9aed;    position: relative;   min-height: 25px;   font-size: 1.25em;   font-weight: bold; }
.ass-RIst .dVd p{ padding: 7px 13px 5px;}
.ass-RIst .dVd .rassBtn{margin:0 5px 7px}
.ass-RIst .dVd .rassBtn .bTn{width: 32px;   height: 32px;   line-height: 32px;   text-align: center;   background-color: #44433bb8;backdrop-filter: blur(5px); -webkit-backdrop-filter:  blur(5px); color: #ffffffb8;  border-radius: 40%;  margin: 0 2px;}
.ass-RIst .dVd .rassBtn .bTn:hover{    background-color: #2e8eb8d1}

.ass-RIst [class*="somon-"]{margin-bottom: 20px}
.ass-RIst .itmsBx{ box-shadow: -2px 2px 9px #00000017;border-radius: 30px 0 0 30px;   overflow: hidden !important;}
.ass-RIst .itmsBx + .itmsBx{margin-top: 20px}
.ass-RIst [class*="itm-"]{position: relative;margin-top: 3px;    text-shadow: 1px 1px 0 #ffffff69}
.ass-RIst [class*="itm-"]:first-child{margin-top: 0}
.ass-RIst .itm-0{     text-shadow: 1px 1px 0 #4b4b4b69; width: 100%;  background-color: #626057b8;  padding:8px 8px 4px 10px;  text-align: right;  color: #ffffff94;   font-size: 1.1em; }
.ass-RIst [class*="itm-"] + .itm-0{margin-top: 1em}
.ass-RIst .itm-1{text-align: center; /*width: calc(100% / 2 - 2px);*/ ;min-width: 50%;width: 50%;}

.ass-RIst .itm-2{width: 100%}
.ass-RIst [class*="itm-"] .itmbx{color:#3b3b3b;padding-top: 10px;padding-bottom: 8px;/*background-color:rgb(148 171 200 / 75%);height: 100%;*/ position: relative;}
.ass-RIst [class*="itm-"][class*="bG-"] .b{position: absolute;top: 0;bottom: 0;left: 1px;right: 1px;z-index: -1;   opacity: .85}
/*.ass-RIst .itm-1:nth-child(odd)[class*="bG-"] .b{left: 2px}
.ass-RIst .itm-1:nth-child(even)[class*="bG-"] .b{right: 2px}*/
/*.ass-RIst .itmsBx:nth-child(3n+1) [class*="itm-"]:nth-child(5n+1) [class*="bG-"]{background-color:#a0c4e2}
.ass-RIst .itmsBx:nth-child(3n+1) [class*="itm-"]:nth-child(5n+2) [class*="bG-"]{background-color:#83b2d8}
.ass-RIst .itmsBx:nth-child(3n+1) [class*="itm-"]:nth-child(5n+3) [class*="bG-"]{background-color:#639ecf}
.ass-RIst .itmsBx:nth-child(3n+1) [class*="itm-"]:nth-child(5n+4) [class*="bG-"]{background-color:#3a81bb}
.ass-RIst .itmsBx:nth-child(3n+1) [class*="itm-"]:nth-child(5n+5) [class*="bG-"]{background-color:#306b9c}

.ass-RIst .itmsBx:nth-child(3n+2) [class*="itm-"]:nth-child(5n+1) [class*="bG-"]{background-color:#99e2b4}
.ass-RIst .itmsBx:nth-child(3n+2) [class*="itm-"]:nth-child(5n+2) [class*="bG-"]{background-color:#88d4ab}
.ass-RIst .itmsBx:nth-child(3n+2) [class*="itm-"]:nth-child(5n+3) [class*="bG-"]{background-color:#78c6a3}
.ass-RIst .itmsBx:nth-child(3n+2) [class*="itm-"]:nth-child(5n+4) [class*="bG-"]{background-color:#67b99a}
.ass-RIst .itmsBx:nth-child(3n+2) [class*="itm-"]:nth-child(5n+5) [class*="bG-"]{background-color:#56ab91}
*/

.ass-RIst .somon-inf [class*="itm-"][class*="bG-1"] .b{background-color:#ebeee9}
.ass-RIst .somon-inf [class*="itm-"][class*="bG-2"] .b{background-color:#d8e0d0}
.ass-RIst .somon-inf [class*="itm-"][class*="bG-3"] .b{background-color:#c3d7b1}

/*.ass-RIst [class*="itm-"]:hover .itmbx.Ts_03s{background-color:rgb(167 192 227 / 75%)}*/
.ass-RIst [class*="itm-"] em{color:#F5E83B;font-style:normal}
.ass-RIst [class*="itm-"] .tt{    line-height: 2;
    text-shadow: 1px 1px 0 #ffffff85;
    padding-left: 15px;
    padding-right: 15px;
    color: #4b5908;
    font-size: .95em;
    font-weight: 500;}
.ass-RIst [class*="itm-"] .cu{ color: #fff;text-shadow: none;font-size: 1.1em;line-height: 1.6}
.ass-RIst .itm-1 .tt{padding-left:7px;padding-right: 7px;}
.ass-RIst [class*="itm-"] .vl{font-size: 1.2em;padding-left:10px ;padding-right:10px;padding-top: 5px;line-height: 1.3}
.ass-RIst [class*="itm-"] .vl span{font-size: 1.1em}
.ass-RIst .itm-2 .vl{text-align: right}
.ass-RIst .itm-3 .it{line-height: 25px;}
.ass-RIst .itm-3 .vl{text-align: right;padding-top: 5px}
.ass-RIst .itm-4 .it{width: calc(100% / 2 - 0px);float: left;}
.ass-RIst .itm-4 .vl{text-align: right}
.ass-RIst .itm-5 .cu{ margin:5px 20px;text-align: center;}
.ass-RIst .itm-5:not(.on) .cu{-webkit-line-clamp: 3;}
.ass-RIst .itm-5 .li{padding: 5px 8px;}
.ass-RIst .itm-5 .li.chkBx .tp{margin-left: 27px; }
.ass-RIst .itm-5 .li.chkBx:not(.hoked) .tp{ color: #1445a7}
.ass-RIst .itm-5 .li.chkBx.hoked .tp{text-decoration: line-through;}

.ass-RIst .mthbx{padding-right: 40px;padding-bottom: 11px}
.ass-RIst .mthbx + .tbt{ position: absolute;  right: 0;  top: 0;  width: 40px;  height: 100%;}


.ass-RIst .rtngBtn.abtRtn{margin-bottom: 15px;margin-top: 10px;text-align: right;}
.ass-RIst .rtngBtn.abtRtn .bTn + .bTn{margin-top: 5px}
.ass-RIst .rtngBtn.abtRtn .bTn{backdrop-filter: blur(8px);-webkit-backdrop-filter:  blur(8px);display: inline-block;vertical-align: middle;}



.ass-RIst .usInf{  backdrop-filter: blur(5px); -webkit-backdrop-filter:  blur(5px); text-align: center;box-shadow: -2px 2px 9px #00000017; position: relative; padding: 80px 10px 25px; margin-top: -60px;margin-bottom: 30px;border-radius: 0 0 0 30px;overflow: hidden;}
.ass-RIst .usInf::before{content: ""; position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;opacity: .9;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4e625e+0,28303e+100 */
    background:linear-gradient(135deg, rgb(77 118 110) 0%, rgb(34 49 75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.ass-RIst .dsstrMap .usInf::before{ background:linear-gradient(135deg, rgb(255 203 103) 0%, rgb(115 62 27) 100%)}
                                                    
.ass-RIst .usInf .usAvt{  width: 100px;  height: 100px; margin: 4px auto 10px; background-color: #bbbbbb7a; border-radius: 40%;position: relative;}
.ass-RIst .usInf .usNm{font-size: 1.5em;}
.ass-RIst .usInf .itp{font-size: .8em;}
.ass-RIst .usInf .rtngBtn{padding-top: 25px;    padding-left: 0;  padding-right: 0;}
.ass-RIst .usInf .rtngBtn .bTn{    border-radius: 15px;padding-left: 10px;  padding-right: 10px; font-size: .85rem;  line-height: 34px; height: 34px;  margin-left: 3px;  margin-right: 3px;}

.oneNeed_as .nd_card{position: relative;text-shadow: unset;}
.oneNeed_as .infBx{background-color: #4a4949e0;height: 60px;}
.oneNeed_as .img{width: 60px;height: 60px}
.oneNeed_as .smoneName{font-size: 1.1em}
.oneNeed_as .smoneStt{font-size: .8em  ;  opacity: 0.8;    color: #939393;}
.oneNeed_as [class*="itm-"] .cc{right: 0 ; bottom: 0}
.ass-RIst .lvBarbx{font-size: 0.8rem ;position: relative;}
.ass-RIst .lvBarbx .p{font-size: .8em}
.ass-RIst .lvBarbx .lvBar{margin-right: 5px;    background-color: #0000001c;}
.ass-RIst .lvBarbx .full{height: 3px;background-color: #000}
.ass-RIst .exp{    text-align: left; padding: 0 5px; color: #5f5f5f; font-size: 0.8em;}

.ass-RIst .ppitm{padding-top: 10px;padding-bottom: 10px}
.ass-RIst .ppitm .itm{font-size: 1.05em;padding-left: 10px;margin-top: 8px}
.ass-RIst .ppitm .avt{width: 30px;height: 30px;border-radius: 40%;background-color:#6767676e;margin-right: 5px}
.ass-RIst .ppitm .nm{text-align: left;margin-right: 15px}
.ass-RIst .ppitm .bTn{border-radius: 15px;font-size: .9em;line-height: 26px;height: 27px;padding-left: 10px;  padding-right: 10px;}
.ass-RIst .ppitm .bTn.ptevNn{color: #00000052;}
.ass-RIst .ppitm .vv{padding: 1px 15px 5px 25px; color: #5d9624; font-weight: bold;}
.ass-RIst .ppitm i{min-width: 13px}
.ass-RIst .ppitm .ivl{padding-right: 8px}

/*-- 記事 -- */
.ass-RIst .somon-nty[class*="j-emp_"]::before{  content: "\76EE \524D \7121 \4EFB \4F55 \8A18 \4E8B ";/*目前無任何記事*/;  font-size: 1.5rem;}
.ass-RIst .somon-nty [class*="itm-"] .morL.tbt{position: absolute;right: 0;top: 6px;opacity: 0}
.ass-RIst .somon-nty [class*="itm-"]:hover .morL.tbt{opacity: 1}
.ass-RIst .somon-nty [class*="itm-"].sel .morL.tbt{display: none}
.ass-RIst .somon-nty .itmbx{position: relative;}
.ass-RIst .somon-nty [class*="itm-"]{position: relative;top: 0;right: 0}
.ass-RIst .somon-nty [class*="itm-"].on{display: none;}
.ass-RIst .somon-nty .tm{padding: 5px 10px 0;  font-size: .8em;  color: #0000009e;   text-align: right;    text-shadow: none;}
.ass-RIst .somon-nty .tm i{margin-right: 2px}

.ass-RIst .somon-nty [class*="itm-"][class*="bG-1"] .b{background-color:#5fa8d3}
.ass-RIst .somon-nty [class*="itm-"][class*="bG-2"] .b{background-color:#296487}
.ass-RIst .somon-nty [class*="itm-"][class*="bG-3"] .b{background-color:#62b6cb}
.ass-RIst .somon-nty [class*="itm-"][class*="bG-4"] .b{background-color:#70b3b2}


.somonNty{z-index: 100;top:0;right: 0;width: 100vw;height: 100vh;backdrop-filter: blur(3px);-webkit-backdrop-filter:  blur(3px);}
.somonNty .itm{width: 400px;height: 300px;box-shadow: 0px 6px 15px #0000004a;padding:25px 30px 60px;letter-spacing: .03em;font-size: 1.2em;overflow-y: auto;position:relative; line-height: 1.6;    color: #fff;border-radius: 5px}
.somonNty .itm.bG-1{ background-color:#5fa8d3}
.somonNty .itm.bG-2{ background-color:#296487}
.somonNty .itm.bG-3{ background-color:#62b6cb}
.somonNty .itm.bG-4{ background-color:#70b3b2}


.somonNty .itm .itmBtn{position: absolute; bottom: 15px;right:20px;left: 20px}
.somonNty .itm .itmBtn .bTn{width: 30px; height: 30px; border-radius: 45%; line-height: 30px; text-align: center; color: #ffffffed; margin: 0 3px;  text-shadow: none; font-size: 0.8em; border: 1px solid #ffffff38;}
.somonNty .itm .itmBtn .bTn:hover,
.somonNty .itm .itmBtn .bTn:active{ background-color: #515151ab;border-color: #ffffffd9;}



    @media (min-width: 768px) {
        .ass-RIst {width: 250px;min-width: 250px;height: 100%;margin-right: -250px; }
        .ass-on .ass-RIst{margin-right: 0}
        .ass-RIst .ovfl-y{padding-bottom:85px;z-index: 1}
        .ass-RIst [class*="itm-"] .itmbx{backdrop-filter: blur(5px);-webkit-backdrop-filter:  blur(5px);}

    }
        
    @media (max-width: 767px) {
        .ass-RIst{  position: absolute; right: 0; top:0;bottom: 0;left: 0; background-color:rgb(205 205 205 / 80%);  box-shadow: -2px 0 10px #0000002b;display: none; 
                     -webkit-animation-duration: .8s;
                              animation-duration: .8s;
                      -webkit-animation-fill-mode: backwards;
                              animation-fill-mode: backwards;
                      -webkit-animation-timing-function:cubic-bezier(0.770, 0.000, 0.175, 1.000);
                              animation-timing-function:cubic-bezier(0.770, 0.000, 0.175, 1.000);
                      -webkit-animation-name: fade-in;
                              animation-name: fade-in;
                      -webkit-animation-delay: 0.3s;
                              animation-delay: 0.3s;
        }
        .ass-on .ass-RIst{display: block;}
        .ass-RIst .assBg{width: 250px;margin-left: auto;background-color: transparent; 
                          -webkit-animation-duration: .8s;
                                  animation-duration: .8s;
                          -webkit-animation-fill-mode: backwards;
                                  animation-fill-mode: backwards;
                          -webkit-animation-timing-function:cubic-bezier(0.770, 0.000, 0.175, 1.000);
                                  animation-timing-function:cubic-bezier(0.770, 0.000, 0.175, 1.000);
                          -webkit-animation-name: fade-in-right;
                                  animation-name: fade-in-right;
                          -webkit-animation-delay: 0.3s;
                                  animation-delay: 0.3s;
        }
        .ass-on  .ass-RIst .assBg{width: 250px;margin-left: auto;background-color: transparent;}
        .ass-RIst .ovfl-y{padding-bottom:60px;}
        .ass-RIst .dVd{background-color: transparent;}
        .ass-RIst .asscol{position: fixed; top: 0;left: 0;width: 100%;height: 100%;pointer-events: auto ;backdrop-filter: blur(5px); -webkit-backdrop-filter:  blur(5px);}
    }


@media (max-width: 1000px) {
    
}





/* 彈出框 
------------------- */
.alertBx{font-size: 1rem;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index:15;-moz-animation:opac01 0.3s ease-out;    -webkit-animation:opac01 0.3s ease-out;     -o-animation:opac01 0.3s ease-out;}
.alertBx .m_oped{position: absolute;background-color: rgba(10,10,10,0.5);width: 100%;height: 100%}
.alertBx .alrt-bg{ width: 100%;height: 100%;}
.alertBx .altmntt{    font-size: 1.3em;   padding: 20px 15px 0;   text-align: center;}
/*主要內容*/
.alertBx .clmn{margin-bottom: 1em;position: relative;display: -moz-box;  display: -ms-flexbox; display: -webkit-flex; display: flex; word-wrap: break-word;  word-break: break-all;flex-wrap:wrap;}
.alertBx .clmn.chkBox{align-items: baseline; }
.alertBx .clmn .inptT{margin-right: 13px;min-width: 35px;line-height: 38px}
.alertBx .alrt-ins{line-height: 1.7;background-color: #fff;position: relative;width: 35vw;max-width: 500px;min-width:360px;border-radius: 30px;    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);-moz-animation:sclopc_M-B 0.d ease-out;    -webkit-animation:sclopc_M-B 0.3s ease-out;     -o-animation:sclopc_M-B 0.3s ease-out;}
.alertBx .alrt-ins.a-i__b{width: 50vw;max-width: 710px;}
.alertBx .altmnbg{max-height: 60vh;    pointer-events:auto;  -webkit-overflow-scrolling: touch;white-space: normal; overflow-y:auto;  overflow-x:hidden;}
.alertBx .altmnbg.sty-1{padding: 15px 25px;text-align: left;}
.alertBx .input.IDnmb{max-width: 200px;}
.alertBx .abtPrf{margin-top: 5px;margin-bottom: 30px}
.alertBx .gender{background-color: #9fe290;    padding: 0 10px ;margin-left: 7px ;border-radius: 2px;    color: #000;  line-height: 36px;}
.alertBx .input:focus, .alertBx .textarea:focus, .alertBx .select:focus{background-color: #d1d3d5a8}
/*列表*/
.alertBx .list{padding: 10px 15px;}
.alertBx .list + .list{border-top: 1px solid #e3e3e3}
/*範本*/
.alertBx .template{border:1px dashed #cfcfcf;  position: relative;  margin-bottom: 7px;  min-height: 35px;  border-radius: 10px;    font-size: 0.95em;    background-color: #f5f5f5;    color: #747474;    margin-right: 4em;max-width: 300px;}
.alertBx .template:hover{border-color: #5c9dc5;}
.alertBx .template [class*="lmtRw-"]{margin: 5px 9px;-moz-animation:opac01 0.5s ease-out;   -webkit-animation:opac01 0.5s ease-out;     -o-animation:opac01 0.5s ease-out;}
.alertBx .template .cloz{position: absolute;    right: -40px;    top: -5px;}
/*按鈕*/
.alertBx .altmnbt{padding-top: 20px;padding-bottom: 20px}
.alertBx .btnBox + .nitm{text-align: right;padding-top: 1.5em;text-align: center;}
.alertBx a:hover{text-decoration: underline;}
.alertBx .nitm .aa:hover{text-decoration: underline;}
.alertBx .tex em{ margin: 0 5px;  font-style: unset;    font-size: 1.15em;}
/* [彈出] 寄信 */
.sEnDmAiL_aler .tex{  margin-right: 10px ; margin-top: 2px;margin-bottom: 2px;-webkit-align-items: center;    align-items: center;     border: 1px solid #dadce0;    -webkit-border-radius: 10px;    border-radius: 10px; display: -webkit-inline-box;    display: -webkit-inline-flex;    display: inline-flex;    height: 20px;    line-height: 20px;   padding-left: 5px;    padding-right: 5px;    color: #5f6368;}
.sEnDmAiL_aler .tex:hover{ border-color:  #5f6368; }
.sEnDmAiL_aler .tex .vM{margin-left: 5px}
/* [彈出] 匯出 */
.eXpOrTtips_aler .tex em{color: #e99206;}
/* [彈出] 刪除 */
.dElEtStH_aler .tex em + em::before{content: "\3001"}
.dElEtStH_aler .tex em{color: #348ab0;    display: inline-block;vertical-align: bottom;    max-width: 150px;    white-space: nowrap;    text-overflow: ellipsis;    overflow: hidden;    }
/* [彈出] 完成 */
.cOmPlEtIoN_aler{}






/* Tag
--------------------------------------------------------------------------------------------------------------- */
.tagBx{}
.tagBx .tag{    color: #1c9aea}
.tagBx .tag.sv{color: #e38a44;}

/* $
--------------------------------------------------------------------------------------------------------------- */
.mNy::before{content: "\0024";margin-right: 1px}




/* Comments */
#comments ul{margin:0 0 40px 0; padding:0; list-style:none;}
#comments li{margin:0 0 10px 0; padding:15px;}
#comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;}
#comments address{font-weight:bold;}
#comments time{font-size:smaller;}
#comments .comcont{display:block; margin:0; padding:0;}
#comments .comcont p{margin:10px 5px 10px 0; padding:0;}

#comments form{display:block; width:100%;}
#comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
#comments textarea{overflow:auto;}
#comments div{margin-bottom:15px;}
#comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}



/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:20px 0;}
#copyright *{margin:0; padding:0;}


/* Sidebar Navigation */
.sidebar nav{display:block; width:100%;}
.sidebar nav li{margin:0 0 3px 0; padding:0;}
.sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}
.sidebar nav a::after{top:10px; left:5px; content:"\f0da";}
.sidebar nav ul ul a{padding-left:35px;}
.sidebar nav ul ul a::after{left:25px;}
.sidebar nav ul ul ul a{padding-left:55px;}
.sidebar nav ul ul ul a::after{left:45px;}

/* Pagination */
.pagination{display:block; width:100%; text-align:center; clear:both;}
.pagination li{display:inline-block; margin:0 2px 0 0;}
.pagination li:last-child{margin-right:0;}
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}

/* Back to Top */
#backtotop{z-index:88; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border-width:0 1px;}




/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0 20px; padding:0; list-style:none;}
.faico li{display:inline-block; margin:0 5px 0 0; padding:0; line-height:normal;}
.faico li:last-child{margin-right:0;}
.faico a{display:inline-block; width:36px; height:36px; line-height:36px; font-size:18px;border-radius: 40%; text-align:center;color:inherit; background-color:rgba(255,255,255,.2);}
.faico a:hover{color:#FFFFFF;}

.faicon-dribble:hover{background-color:#EA4C89;}
.faicon-facebook:hover{background-color:#3B5998;}
.faicon-google-plus:hover{background-color:#DB4A39;}
.faicon-linkedin:hover{background-color:#0E76A8;}
.faicon-twitter:hover{background-color:#00ACEE;}
.faicon-vk:hover{background-color:#4E658E;}
.faicon-line:hover{background-color:#49cb49}
.faicon-skype:hover{background-color:#2dc1ff}

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

/*------------------*/
/* 升級 burst-container  */
.burst-container {  position: fixed;  width: 300vw;   height: 300vw; z-index: 999;  top: 50%;  left: 50%;  margin-left: -150vw;  margin-top: -150vw; background-color: #23232391; backdrop-filter: blur(5px);-webkit-backdrop-filter:  blur(5px);}
.burst-container .burst {  position: absolute;   width: 100%;   height: 100%;   background: repeating-conic-gradient(from 0deg, #cccccc33 0deg 10deg, transparent 10deg 20deg);    border-radius: 50%;    animation: spin 10s linear infinite; }
.burst-container .lvup{width: 120vw;max-width: 500px}
.burst-container [class*="lvup-"]{width: 100%;height: 100%; left: 0;top: 0; }
.burst-container .lvup-1{animation: o-spin 50s linear infinite;}
.burst-container .lvup-1 .cls-1 { fill: #ffb900bf; }
.burst-container .lvup-2{ animation: bounce 1s infinite ease-in-out;}
.burst-container .lvup-2 .cls-1 { fill: #003d5fdb;  }
.burst-container .lvup-2 .cls-2 {fill: #fffffff0; }
.burst-container .lvup-2 .cls-3 { fill:#44d6fe; }
.burst-container .lvup-2 .cls-4 {fill: #3aabde;}
.burst-container .lvup-3{ animation: floatUp 1s infinite ease-in-out;}
.burst-container .lvup-3 .cls-1 {fill: #003d5fdb;}
.burst-container .lvup-3 .cls-2 {fill: #f5b91a;}
.burst-container .text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); text-align: center;animation: popIn 0.8s ease-out forwards; z-index: 1;}


/*------------------*/
/* 點頭像-察看某人數據 */
.cLiCkAvT{z-index: 1000; }
.cLiCkAvT > .m_oped{position: fixed; background-color: rgb(21 21 21 / 0%); backdrop-filter: grayscale(0.9);-webkit-backdrop-filter:  grayscale(0.9);}
.cLiCkAvT .cardbx{border-radius: 10px 50px 10px 50px;  overflow: hidden;  backdrop-filter: blur(5px); -webkit-backdrop-filter:  blur(5px); box-shadow: 2px 4px 10px #00000036;width: 350px;height:220px;  }
.cLiCkAvT.seeUser_INF_AVT .cardbx{width: 250px;height: 250px}
.cLiCkAvT.seeUser_QRD .cardbx{ width: 222px; height: 255px;}
.cLiCkAvT.seeNone{display: none}
.cLiCkAvT .userInf{padding-bottom: 18px;padding-top: 20px}
.cLiCkAvT.seeUser_INF_AVT  .userInf{display: none;}
.cLiCkAvT .userNm{ font-size: 1.5em;width: 220px}
.cLiCkAvT.seeUser_QRD .userNm{width: 160px;font-size: 1.2em;}
.cLiCkAvT .userAd{    font-size: .9em;  color: #ffffff;  font-weight: 100;  margin-top: -3px;letter-spacing: -0.02em}
.cLiCkAvT.seeUser_QRD .userAd{display: none}
.cLiCkAvT .userTD{ position: relative;  pointer-events: auto; width: 100%;height:100%;   display: none}
.cLiCkAvT[class*="seeUser_"] .userTD{display: block;}
.cLiCkAvT .userTD::before {  content: "";  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;   z-index: -1;   opacity: .85;   background: linear-gradient(135deg, rgb(77 118 110) 0%, rgb(34 49 75) 100%);}
.cLiCkAvT.seeUser_INF_AVT .userTD{pointer-events: none}
.cLiCkAvT.seeUser_INF_DAT .userCtrl{    margin-left: -95px;  margin-right: 45px;}
.cLiCkAvT.seeUser_QRD .userCtrl{ margin-left: -95px;  margin-right: 45px;}
.cLiCkAvT .userToolbx{     width: 190px;  height: 190px; border-radius: 50%;   border: 1px solid #ffffff69; margin-left: -100px;position:relative;   }
.cLiCkAvT .userToolbx .toolBtn{     box-shadow: 1px 1px 3px #0000003b, -2px -2px 7px #9ec2c2 inset; width: 30px; height: 30px;  position: absolute; color: #386565; background-color: #ffffffd9;  border-radius: 50%;  line-height: 30px;   text-align: center;  font-size: 16px; }
.cLiCkAvT .userToolbx .toolBtn.sel{background-color: #34c3b7;}
.cLiCkAvT .userToolbx .toolBtn.tbt .tbtsvg:not(.svgframe), 
.cLiCkAvT .userToolbx .toolBtn.tbt .tbtsvg .svgframe *:not(.svgframe) {  fill: rgb(57 114 144);}

.cLiCkAvT.seeUser_INF_DAT .toolBtn{display: none}
.cLiCkAvT .userData{color: #fff;-webkit-flex: 1.5 0;  flex: 1.5 0;   -moz-box-flex: 1.5;margin-left: 1.5em;}
.cLiCkAvT.seeUser_INF_DAT .userData{margin-left: 0}
.cLiCkAvT.seeUser_QRD .userData{     margin-top: -160px; margin-left: -10px;}
.cLiCkAvT .userData .rtngBtn{    margin-top: 30px;}
.cLiCkAvT .userData .tbbr{margin-bottom: 10px; line-height: 30px; }
.cLiCkAvT .userData .tbbr .tt{    padding: 0 13px; border-radius: 2px; color: #777777;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e1e1e+0,1e1e1e+100&0.65+20,0+100 */
background: linear-gradient(to right,  rgba(30,30,30,0.65) 0%,rgba(30,30,30,0.65) 20%,rgba(30,30,30,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.cLiCkAvT .userData .tbbr .tbt{height: 30px;width: 30px;}
.cLiCkAvT .userData .tbbr .arwR{ margin-left: 5px}
.cLiCkAvT .userData .tbbr .arwL{ margin-right: 5px ; margin-left: -40px}

.cLiCkAvT .userData .dsplN{display: none !important;}
.cLiCkAvT.seeUser_INF_DAT .userData .dsplN{display: block !important;}

.cLiCkAvT .userData .bbBox{padding-bottom:  20px}
.cLiCkAvT .userData .ttt{     border-bottom: 2px solid;  margin-bottom: 7px;   line-height: 1.2;   color: #00000066;   font-weight: 800;   padding: 0 3px;}
.cLiCkAvT .userData .itBox{   column-count: 2;width:100% ;}
.cLiCkAvT .userData .dataitem{padding: 2px 5px 8px;text-align: left;page-break-inside: avoid;-webkit-column-break-inside: avoid;display: none}
.cLiCkAvT.seeUser_INF .userData .dataitem:nth-child(-n+4),
.cLiCkAvT.seeUser_INF_DAT .userData .dataitem{ display: block}

.cLiCkAvT .userData .v{color: #34c3b7}
.cLiCkAvT .userData .v b{font-size: 1.5em;  font-weight: 300;}
.cLiCkAvT .userData .t{font-size: .8em;  color: #cde9e5;   font-weight: 100;letter-spacing: -0.02em;}
.cLiCkAvT .userData .itBox .t{ margin-top: -7px;  }
.cLiCkAvT .cloz{position: absolute;right: -20px;top: -20px;width: 34px;height: 34px;z-index: 5;    backdrop-filter: blur(5px);  -webkit-backdrop-filter:  blur(5px);  background-color: rgba(137, 148, 158, 0.67);  border-color: rgba(132, 143, 154, 0.3);border-radius: 45%}
.cLiCkAvT .avt-click{     background-color: #b4b4b4e8;  position: absolute;  width: 150px;  height: 150px;   left: -80px;   top: 50%;   margin-top: -75px;   border-radius: 50%;}
.cLiCkAvT.seeUser_INF_DAT .avt-click{left: -150px;}
.cLiCkAvT.seeUser_QRD .avt-click{left: -150px;}
.cLiCkAvT.seeUser_INF_AVT .avt-click{width: 230px;height: 230px;margin-left: -125px;margin-top: -122px;border-radius: 10px 50px 10px 50px;left: 50%}
.cLiCkAvT:not(.seeUser_QRD) .qrdBox{display: none}
.cLiCkAvT .qrdBox{   color: #6ca59d;  position: absolute;  top: 0;  left: 30px;  top: 55px;  width: 160px;z-index: 10;pointer-events: auto;}
.cLiCkAvT .qrdBox .userNmb{font-size: 0.9em;    padding-top: 5px; padding-bottom: 3px;}
.cLiCkAvT .qrdBox .userNmb i{font-size: .8em;margin-right: 3px}


.op_clickAvT{cursor: pointer;}
.cLiCkAvT .userData .userInf + .flxdpl .tbt{border-radius: 40%;}
.cLiCkAvT .userData .userInf + .flxdpl .tbbx{opacity: 0.5;}
.cLiCkAvT.seeUser_INF .userData .userInf + .flxdpl .tbbx{display: none;}

.cLiCkAvT .BTBT{    text-align: center;   line-height: 23px; position: absolute;  bottom: 0;  right: 0;  border: 1px solid #ffffff69;  border-bottom: none;border-right: none;   border-radius: 25px 0 0 0;  color: #ffffffb0;}
.cLiCkAvT .BTBT > *{padding: 0 8px}
.cLiCkAvT .moreBT{    text-align: center;  width: 50px; border-right: 1px dashed; #ffffff69;}
.cLiCkAvT.seeUser_QRD .BTBT,
.cLiCkAvT.seeUser_INF_AVT .BTBT {  display: none;}
.cLiCkAvT.seeUser_INF_DAT .moreBT .fa-angle-down,
.cLiCkAvT:not(.seeUser_INF_DAT) .moreBT .fa-angle-up{display: none}

.cLiCkAvT .rtngBtn{margin-top: 10px}
.cLiCkAvT .rtngBtn .flxdpl{justify-content: flex-end;}
.cLiCkAvT .rtngBtn .bTn{backdrop-filter: blur(5px);-webkit-backdrop-filter:  blur(5px);border-radius: 15px;    height: 32px;  line-height: 32px;   font-size: 1em;  box-shadow: 2px 2px 5px #00000082;padding-left: 10px;padding-right: 10px}


    @media (max-width: 850px) {
        .cLiCkAvT{left:50% !important;margin-left:-175px;top:50% !important;margin-top:-110px }
        .cLiCkAvT.seeUser_INF_DAT{top:30% !important;}
    }

/* 副標、篩選排序、搜索bar
--------------------------------------------------------------------------------------------------------------- */
.filter_ttb{position: relative; margin: 0 10px 5px;  text-align: right;  font-weight: bold;    color: #4a4a4a;}
.filter_ttb.selsth{border-bottom: 1px solid;  }
.filter_ttb.selsth p{padding:8px 20px}
.filter_ttb.selsth p.sel{box-shadow: 0 3px 0 #5e5e5e}
.filter_ttb.selsth p:not(.sel){opacity: .5}
.filter_ttb .filterBtn{     border: 1px solid #7f7b74b0;   border-radius: 15px; padding: 0 8px;   font-size: 1rem;   font-weight: 400;   line-height: 24px;}
.filter_ttb .filterBtn + .filterBtn{margin-left: 5px}
.filter_ttb .filterBtn .tbt{width: 22px;height: 22px}
.filter_ttb .filterBtn .tbtsvg .svgframe {  stroke:#847963;}
.filter_ttb + .srchBox{ margin: 15px 10px;}
.filter_ttb + .srchBox .input{border-radius: 15px}

/* 底線 頁籤
--------------------------------------------------------------------------------------------------------------- */
.ttbr{  color: #60b6ac;   font-size: 1.15em;  text-align: center;  position: relative;   padding: 15px 10px 10px}
.ttbr p{    padding: 7px 15px; margin-bottom: 1px ;}
.ttbr p + p{margin-left: 5px}
.ttbr p.sel{    box-shadow: 0 3px 0 #60b6ac;}
.ttbr .line{height: 1px;background-color: #60b6ac;border-radius: 5px}

/* 黑罩滿版
--------------------------------------------------------------------------------------------------------------- */
.fullblackCV{position: fixed;top:0;left: 0;z-index: 1000;color: #fff}
.fullblackCV .fbCV_Tbar{ padding: 10px;  position: relative;  align-items: center;   }
.fullblackCV .fbCV_Tbar .title{    font-size: 1.5em;   padding-left: 15px;}
.fullblackCV .fbCV_Tbar .cloz{   border-radius: 40%;}
.fullblackCV .ttb{  color: #9facb6;   font-size: 15px;  text-align: center;  position: relative;   padding: 15px}
.fullblackCV .ttb p{    padding: 0px 7px 5px; }
.fullblackCV .ttb p + p{margin-left: 5px}
.fullblackCV .ttb p.sel{box-shadow: 0 3px 0 #9facb6}
.fullblackCV .ttb .line{height: 1px;background-color:  #9facb6;border-radius: 5px}
.fullblackCV .srchBox{    margin: 0 15px 2.2em;;  position: relative; z-index: 20;backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
.fullblackCV .srchBar{background-color: #9695959c;  border-radius: 3px;line-height: 40px}
.fullblackCV .srchBar input{padding-left: 15px;padding-right: 10px;width: 100%;height: 40px}
.fullblackCV .selItm{position: absolute;top: 70px;left: 0;bottom: 0}
.fullblackCV .ttb + .selItm {top: 105px;}
.fullblackCV .srchBox + .selItm {top: 115px;}
.fullblackCV .itmbx{width: 100vw;height: 100%}
.fullblackCV .itmbx > .ovfl-y{padding:1.5em 1em ;}
.fullblackCV .selItm .itmbx > .ovfl-y{padding-bottom: 80px;padding-top: 65px}
.fullblackCV .inpBx textarea,
.fullblackCV .inpBx .ttarea{    background-color: #84848475;    min-height: 100px;text-align: left;border-radius: 15px}

.fullblackCV .pagebx{    padding: 1.2em 2em 1em}
.fullblackCV .ttip{font-size: .8em;    color: #b2ac9f;display: block; }
.fullblackCV .newPhoto{height: 80px;  border-radius: 15px;   background-color: #ebebeb8a;   box-shadow: 0 0 0 5px #00000057 inset;  color: #ffffff;}
.fullblackCV .newPhoto p{font-size: 1.3em;  padding-top: 18px; }
.fullblackCV .newPhoto p i{margin-right: 5px}
.fullblackCV .photoBox{ padding: 8px 0 10px;}
.fullblackCV .itmePhoto{     width: 80px;  height: 80px;    background-color: #ebebeb8a; box-shadow: 0 0 0 5px #00000057 inset;   margin: 3px;  border-radius: 15px;  position: relative;}
.fullblackCV .itmePhoto i{background-color: #323232; color: #fff; width: 25px;  height: 25px;  text-align: center;  line-height: 25px;  border-radius: 40%;   box-shadow: 0 0 6px 0 #0000005c;position: absolute;left: -3px;top: -3px}
.fullblackCV .pagebx + .inpBx{padding: 0 2em}


.fullblackCV .bottomBar{line-height: 75px ;text-align: center;font-size: 1.2em;position: relative;bottom: 0;}
.fullblackCV .selItm + .bottomBar{position:absolute;bottom:0;width:100%}
.fullblackCV .bottomBar.rtngBtn{padding: 15px;}
.fullblackCV .bottomBar .tbt{height:75px;border-radius: 3px;}
.fullblackCV .bottomBar .tbt .itx{bottom: 0}
.fullblackCV .bottomBar .bTn{backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}

.fullblackCV .bottomBar .tbt .itx + .tbtsvg{  border: 1px solid #ffffffe0; padding: 10px;  border-radius: 45%;margin-left: -21px;margin-top: -31px}

/* 察看圖片 */
.viewImage{}
.viewImage .mvbx{position: relative;}
.viewImage .img_bx{width: 100vw;   -webkit-transition: all 200ms cubic-bezier(0.25,0.46,0.45,0.94); transition: all 200ms cubic-bezier(0.25,0.46,0.45,0.94);}
.viewImage .img_bx:not(.on){visibility: hidden;}
.viewImage .img_bx img{margin: auto;max-height: 80vh;max-width: 100vw;}
@media screen and (orientation: landscape) {
    .viewImage .img_bx img{max-height: 100vh;}
    .viewImage .fbCV_Tbar{position: absolute;z-index: 10;}
    .viewImage .fbCV_Tbar .tbt{    background-color: #3232324f; }
    .viewImage .bottomBar{    backdrop-filter: blur(5px);  -webkit-backdrop-filter: blur(5px);}

}
.viewImage.focus .fbCV_Tbar,
.viewImage.focus .bottomBar{visibility: hidden; opacity: 0}



/* 編輯圖片 */
.editImage {}
.editImage .cvBx { position: relative;     height: 100%; width: 100%;}
.editImage .cvBx .cv {       max-width: 90vw;    max-height: 90vw;  background-color: rgba(195, 195, 195, 0.5);     position: relative;    margin-left: auto ;    margin-right: auto;}
.editImage .cvBx .cv .setcv {    display: block;    position: relative;    z-index: 1}
.editImage .cvBx .cv::after {   content: "";    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;    position: absolute;    width: 100%;   height: 100%;   top: 0;  left: 0;}
.editImage .dashBx {    top: 0;    right: 0;    bottom: 0;    left: 0 ;     z-index: 2;  opacity: .6;}
.editImage .dashBx .dashed.rw {   width: 100%;    top: 50%;    border-top: 1px dashed rgba(255,255,255,0.6)}
.editImage .dashBx .dashed.cw {    height: 100%;    left: 50%;    border-left: 1px dashed rgba(255,255,255,0.6)}
.editImage .sz{      position: relative;  z-index: 4;  padding: 5px 8px 4px; color: #959595;  background-color: #2f2f2fd1;   position: relative;   margin-top: 8px;  border-radius: 10px;}
@media screen and (orientation: landscape) {
    .editImage .cvBx .cv{ max-width: 65vh;  max-height: 65vh;}
    .editImage .sz{    position: fixed;top: 8px;}
}

/* 選人 */
.selectPpl .ovfl-x{padding: 0 15px;}
.selectPpl .sty-1 .itm{font-size: 1.2em;padding: 10px 2%;line-height: 30px;margin-bottom: 3px;border-radius: 2px}
.selectPpl .sty-1 .itm:active{    background-color: #0003;}
.selectPpl .sty-1 .itm.hoked{    background-color: #afab7f47}
.selectPpl .sty-2 .itm{padding:10px 7px 20px;text-align: center;width: 95px;      position: relative;  display: inline-block;  vertical-align: middle;}
.selectPpl .sty-1 .itm > .flxdpl{align-items: center;}
.selectPpl .sty-1 .itm .chk{margin-right: 10px;}
.selectPpl .sty-2 .itm .chk{position: absolute;top: 6px;left: 6px}
.selectPpl .sty-1 .itm .userAvt{width: 36px;height: 36px;border-radius: 40%;margin-right: 5px;background-color: #cccccc75}
.selectPpl .sty-2 .itm .userAvt{width: 50px;height: 50px;border-radius: 40%;margin:0 auto 5px;background-color: #cccccc75}


/* 選需求 selectNeed */
.fullblackCV .neditm{padding: 10px;  color: #e2e2e2;border-radius: 2px}
.fullblackCV .neditm:active{    background-color: #0003;}
.fullblackCV .neditm .img{    width: 50px;  height: 50px;  margin-right: 10px;  border-radius: 3px;}
.fullblackCV .neditm .inf{position: relative;}
.fullblackCV .neditm .Nm{  max-width: 200px;  font-size: 1.4em;  padding-bottom: 3px;margin-top: -3px;}
.fullblackCV .neditm .pc{color: #86abca;}
.fullblackCV .neditm .done{    position: absolute;   right: 0;top: 2px; color: #a0b4ad;}

/* 選能力 selectSkill */
.fullblackCV .sklitm{padding: 10px;  color: #e2e2e2;border-radius: 2px}
.fullblackCV .sklitm:active{    background-color: #0003;}
.fullblackCV .sklitm .img{      width: 50px;    height: 40px; margin-right: 10px;  border-radius: 3px;}
.fullblackCV .sklitm .inf{position: relative;}
.fullblackCV .sklitm .Nm{  max-width: 200px;  font-size: 1.4em;  padding-bottom: 3px;margin-top: -3px;}
.fullblackCV .sklitm .pc{color: #86abca;}
.fullblackCV .sklitm .done{    position: absolute;   right: 0; top: 2px; color: #a0b4ad;}


/* 評價 FracTion */
.FracTion .iibx{text-align: center;padding-bottom: 4em}
.FracTion .frctl-bx{margin-bottom: 10px}
.FracTion .frctl{margin: 5px 9px;position: relative;width: 40px;height: 40px}
.FracTion .frctl .nb{color:#f9f949;opacity: .3;}
.FracTion .frctl.bling .nb{opacity: 1}
.FracTion .frctl .staF{position: absolute;}
.FracTion .frctl .tbtsvg{fill: #f9f949;    width: 30px; height: 30px; margin-left: -15px; margin-top: -15px;}
.FracTion .frctl.bling .staH,
.FracTion .frctl:not(.bling) .staF{opacity: 0}
.FracTion .chkBx{font-size: 1.4em;padding-top: 10px}