.BsListBox{
 padding:50px 0;
 font-size: 18px;
 font-family: Ariel;
}

.BsListBox h1{
 	margin:15px 0 50px 0;
 	color:#623d90;
 	text-align: center;
 }

 .BsListBox h2{
 	margin:20px 0 50px 0;
 	color:#6401a2;
 	text-align: left;
 	font-size: 25px;
 }
 .BsListBox h3{
    margin:20px 0 50px 0;
    color:#6401a2;
    text-align: left;
    font-size: 25px;
    text-align: center;
 }

 .BsListBox a{
 	font-weight: bold;
 	color:#623d90;
 	text-align: center;
 }


.btn-style {
    background: #623d90;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 20px;
    border:1px #623d90 solid;
    border-radius: 15px;
    margin-bottom:0px;
 }

 .btn-check {
    background: #E6D7F7;
    color: #6C3CA5;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 10px;
    border:1px #DAC3F4 solid;
    border-radius: 5px;
    margin-bottom:10px;
 }

 .btn a{
	color:#fff;
 }

 .BsSnBox{
 	padding:50px 0 150px 0;
 	font-size: 18px;
 }

 .BsSnBox h1{
 	margin:15px 0 50px 0;
 	color:#623d90;
 	text-align: center;
 }


 .BsInputBox{
 	width:100%;
 	margin:0 auto;
 	border:1px solid #e8d9fb;
 	padding:40px;
 	border-radius: 10px
 }

 .PwInputBox{
    width:100%;
    margin:0 auto;
    padding-top:30px;
    border-radius: 10px;
 }

 .PwInputBox input{
    width:100%;
    height: 40px;
    background: #f1e8fc;
    border:1px solid #dbc1fb;
    border-radius: 5px;
    font-size:20px;
    text-align: center;
    color:#560ab5;
 }

 .BsNumBox{
    width:100%;
    margin:20px 0 100px 0;
    border:1px solid #e8d9fb;
    padding:20px 30px;
    border-radius: 6px;
 }

 .NumberBut{
    width: 90%;
    height:auto;
    border:1px solid #e8d9fb;
    padding:10px 15px;
    margin:6px;
    border-radius: 6px;
    text-align: center;
    color:#8942c6;
    background: #e6d4f4;
    font-size:16px;
 }

 .NumberButNo{
    width: 90%;
    height:auto;
    border:1px solid #e8d9fb;
    padding:10px 15px;
    margin:6px;
    border-radius: 6px;
    text-align: center;
    color:#8942c6;
    font-size:16px;
 }

 .faFontSize{
    font-size:22px;
 }

 

.BsMobileBox{
    max-width: 640px;
    margin:0 auto;
    border:1px solid #e8d9fb;
    padding:60px;
    border-radius: 10px;
 }

.BsMessageText{
 	font-size: 20px;
 	font-weight: bold;
 	display: block;
 	text-align: center;
 	color: #560ab5;
 	padding-top: 10px;
 }

 .BsInputLoginBox{
    max-width:600px;
    margin:0 auto;
    border:1px solid #e8d9fb;
    padding:10px 20px 20px 20px;
    border-radius: 10px;
 }

.BsInputLoginBox input{
    max-width:83px;
    height: 34px;
    margin:5px;
    line-height: 32px;
    background: #f1e8fc;
    border:1px solid #dbc1fb;
    border-radius: 5px;
    color:#560ab5;
 }


 .BsInputBox input{
 	max-width:70px;
 	height: 34px;
    margin:8px;
 	line-height: 32px;
 	background: #f1e8fc;
 	border:1px solid #dbc1fb;
 	border-radius: 5px;
 	color:#560ab5;
 }
 .BsMergeList{
 padding:20px 0;
 font-size: 18px;
 font-family: Ariel;
}

.BsMergeList h1{
    margin:15px 0 50px 0;
    color:#623d90;
    text-align: center;
 }

 .BsMergeList h2{
    margin:20px 0 50px 0;
    color:#6401a2;
    text-align: left;
    font-size: 25px;
 }
 .BsMergeList h3{
    margin:20px 0 50px 0;
    color:#6401a2;
    text-align: left;
    font-size: 25px;
    text-align: center;
 }

 .BsListGroup{
    max-width: 90%;
    margin:0 auto;
    border:1px solid #e8d9fb;
    padding:30px;
    border-radius: 10px;
    color:#7844a4;
 }
 .BsListGroup input{
    width:80px;
    height: 34px;
    padding: 5px;
    text-align: center;
    line-height: 32px;
    background: #fff;
    border:1px solid #dbc1fb;
    border-radius: 5px;
    color:#7844a4;
    outline:none;
 }

 .BsListGroup .SnInput{
    min-width:10%;
    height: 34px;
    padding: 5px;
    margin:5px;
    text-align: center;
    line-height: 32px;
    background: #f1e8fc;
    border:1px solid #dbc1fb;
    border-radius: 5px;
    color:#7844a4;
 }

 .BsListGroup .SnInputR{
    min-width:10%;
    height: 34px;
    padding: 5px;
    margin:5px;
    text-align: center;
    line-height: 32px;
    background: #f9f4fd;
    border:1px solid #dbc1fb;
    border-radius: 5px;
    color:#7844a4;
 }

 .labelText{
 	color:#560ab5;
 	font-size: 16px;
 	padding-right: 10px;
 }

.TextInput{
	width: 60px;
	border:1px solid #e8d9fb;
}

textarea{
	resize: none;
	font-size: 16px;
	color: #560ab5;
	border:1px solid #dbc1fb;
}

.searchData {
    margin: 15px 0 30px 0;
    font-size: 16px;
    color: #999;
    line-height: 25px;
}

.ok{
	display: none
}

.msg{
  display: none
}

.bsmenu{
  cursor: pointer;
}

.BsListStyle{
    border:1px solid #dacaf8;
    padding:25px 8px;
    margin:12px;
    border-radius: 10px;
    line-height: 25px;
    overflow: hidden;
}


.BsListStyle p{
    font-size: 14px;
    color:#787779;
    list-style: none;
    margin-bottom: 0;
    word-wrap: break-word;
}

.textLeft{
    text-align: left;
}

.textCenter{
    text-align: center;
}

.BsListStyle h3{
   font-size: 16px;
   color:#945db7;
   text-align: center;
}


.BsListStyle .title{
    font-size: 16px;
    color:#945db7;
    text-align: right;
}


.btnGroup{
    margin:20px 0 10px 0;
}

.btStyleD{
    height: 45px;
    margin:10px 0;
    background: #945db7;
    color: #fff;
    font-size: 16px;
    padding: 10px 10px 8px 10px;
    border: 1px #945db7 solid;
    border-radius: 20px;
}

.btStyleL{
    height: 48px;
    margin:10px 0;
    background: #fff;
    color: #AD8FE8;
    font-size: 14px;
    line-height: 22px;
    padding: 10px 5px 8px 10px;
    border: 2px #DACAF8 solid;
    border-radius: 20px;
    font-family: "Arial","Microsoft JhengHei";
}

.btStyleL i{
    padding-left:15px;
    font-size: 22px;
}

.btStyleA{
    height: 35px;
    margin:10px 0;
    background: #fff;
    color: #AD8FE8;
    font-size: 14px;
    padding: 5px 5px 8px 10px;
    border: 2px #DACAF8 solid;
    border-radius: 20px;
    font-family: "Arial","NotoSans-Regular";
}

.btStyleOff{
    width: 50px;
    height: 48px;
    margin:10px 0;
    background: #fff;
    color: #AD8FE8;
    font-size: 14px;
    padding: 10px 10px 8px 10px;
    border: 2px #DACAF8 solid;
    border-radius: 20px;
    font-family: "Arial","jp-fonts","Microsoft JhengHei";
}

.btStyleON{
    width: 50px;
    height: 48px;
    margin:10px 0;
    background: #945db7;
    color: #fff;
    font-size: 14px;
    padding: 10px 10px 8px 10px;
    border: 1px #945db7 solid;
    border-radius: 20px;
    font-family: "Arial","jp-fonts","Microsoft JhengHei";
}


.btn img{
    padding-left:10px;
    width:65px;
}


.btn.active{
    height: 48px;
    margin:10px 0;
    background: #F6EEFD;
    color: #9145A0;
    font-size: 14px;
    padding: 10px 10px 8px 10px;
    border: 2px #9145A0 solid;
    border-radius: 20px;
    box-shadow: none;
    font-family: "Arial","jp-fonts","Microsoft JhengHei";
}

.autoPlayText{
    font-family: "Arial Black","jp-fonts","Microsoft JhengHei";
    padding:8px 10px 5px 0;
    display: inline;
}


.btn:hover, .btn:focus {
    color: #fff;
    background:#611691;
    text-decoration: none;
}

.autoplayLabel{
    padding: 0 5px;
}

.ehdiv{
　margin-bottom: -10000px;
　padding-bottom: 10000px;
　
}

#equalheight {
　overflow: hidden;
}


.nospace{
    padding:0;
}

.en-family {
    font-size: 16px;
    font-weight: bold;
    font-family: Arial;
}

.titleStyle{
    color:#5404a7;
    font-size: 20px;
    text-align: center;
}

.borderNo{
    border:none;
}



input[type=checkbox] {
  margin-right: 5px;
  cursor: pointer;
  font-size: 14px;
  width: 15px;
  height: 12px;
  position: relative;
}

input[type=checkbox]:after {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  content: " ";
  background-color: #fff;
  color: #a768cf;
  display: inline-block;
  visibility: visible;
  padding: 0px 3px;
  border-radius: 3px;
  border:1px solid #bf86e4;
}

input[type=checkbox]:checked:after {
  content: "V";
  font-size: 14px;
}

.bottomStyle{
    border-bottom:1px #e9d5f5 solid;
    padding-bottom:10px;
    margin-bottom:15px;
}

.formTextC{
    font-size: 14px;
    color:#945db7;
    margin-top:5px;
}

.modal-body .checkbox{
    min-height: 20px;
    padding-left: 23px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.checkbox label{
    font-size:13px;
    color:#945db7;
}

.modal-body .form-control {
    padding:3px;
    height: 30px;
    border: 1px #e9d5f5 solid;;
    color:#945db7;
}

.checkDisabled{
    width:15px;
    height: 15px;
    background: #908f91;
    border:1px solid #bbb9bc;
    border-radius: 3px;
    margin:5px;
}

.formLabel{
    font-size: 16px;
    color:#7844a4;
    margin-top:12px;
    line-height: 22px
}

.colorBox{
    float: left;
    width:35px;
    height: 35px;
    border:1px solid #c099d9;
    background: #000000d9;
    border-radius: 3px;
    margin-left: 10px;
}

.colorBoxText{
    float: left;
    width:35px;
    height: 35px;
    border:1px solid #c099d9;
    background: #fffffff2;
    border-radius: 3px;
    margin-right: 15px;
}

.ImgFloat{
    float:left;
    margin:0;
}

.messageTable{
    margin-bottom:60px;
}

.btnBottom{
    margin-bottom:10px;
}

.SpaceText{
    position: absolute;
    width:60%;
    left:50%;
    top:40%;
    margin-left:-30%;
    text-align: center;
    font-size:20px;
    color:#632a7b;
}

.SpaceText img{
    max-width:100px
}

.h2Title{
    font-size: 22px;
    margin:20px 0 20px 0;
    color:#623d90;
    text-align: center;
}

.spaceP{
    padding:2px;
    box-sizing: border-box;
}

.qrcodeView{
    display: block;
    margin-top:20px;
    padding:5px;
    border:1px solid #af93c9;
}

.viewPwBox{
    margin-top:10px;
    display: block;
}

.viewPwBox p{
    font-size:18px;
    color:#894baa;
    letter-spacing: 3.5px;
    margin:0;
    line-height: 30px;
}

.hidePwBox{
    margin-top:10px;
    display: none;
}

.hidePwBox p{
    font-size:18px;
    color:#894baa;
    letter-spacing: 3.5px;
    margin:0;
    line-height: 30px;
}

.selectPd{
    padding-left:20;
    box-sizing: border-box;
}



#bsImgDiv{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  display: none;
  /* background-color: gray; */
}
#bsImgP{
    width:100%;
    user-select: none;
}

.middle {
    position: fixed;
    top:50%;
    transform: translateY(-50%);
}

.mainP{
    font-size: 20px;
    margin: 20px 0 20px 0;
    color: #623d90;
    text-align: center;
    font-weight: bold;
}

.forget{
    font-size:1em;
    color:#6b3889;
}


.btn-update{
    width:auto;
    background: #ab4fc1;
    color:#fff;
    padding:5px 15px;
    border-radius: 15px;
}

.btn-update:hover{
    color:#fff;
}

.forget a{
    color:#6b3889;
    text-decoration: none;
}


#imgMesk{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.8;
  display: none;
  background-color: Black;

}
#setpwd{
  display: none;
}
#setEmail{
  /* display: none; */
}


.ppinter{
  cursor: pointer;
}
.secText{
  display: inline;
  color:#ff7e26;
  font-size:1.2em;
  margin-left:10px;
}

.autoPlayBtn{
    background: #fff;
    border:#AD8FE8 1px solid;
    border-radius: 18px;
    color:#AD8FE8;
    outline:none;
}

.autoPlayImg{
    width: 14%;
    background: #fff;
    border-radius: 18px;
    color:#AD8FE8;
    outline:none;
}

.autoPlayBox{
    margin:10px 0;
    padding:10px;
    background: #fff;
    color: #AD8FE8;
    font-size: 14px;
    line-height: 22px;
    padding: 10px 5px 8px 10px;
    border: 2px #DACAF8 solid;
    border-radius: 25px;
    font-family: "Arial","jp-fonts","Microsoft JhengHei";
}

.autoPlayBox p{
  color: #AD8FE8 !important;
}

button{
    outline:none;
}

:focus{
    outline: 0;
}

.playON{
    width: 85%;
    color:#fc8f54;
    font-size: 14px;
    text-align: left;
    margin-top:3px;
    margin-bottom:5px;
    word-wrap: break-word;
    line-height: 16px;
}

.playOff{
    width: 85%;
    color:#75bddf;
    font-size: 14px;
    text-align: left;
    margin-top:3px;
    margin-bottom:5px;
    word-wrap: break-word;
    line-height: 16px;
}

.BsListStyleA{
    border:1px solid #dacaf8;
    padding:83px 10px;
    margin:12px;
    border-radius: 10px;
    line-height: 25px;
    overflow: hidden;
}

.BsListStyleA h3{
   font-size: 20px;
   color:#945db7;
   text-align: center;
}

.btStyleCloud{
    height: 48px;
    margin: 10px 0;
    background: #fff;
    color: #AD8FE8;
    font-size: 14px;
    line-height: 22px;
    padding: 10px 5px 8px 10px;
    border: 2px #DACAF8 solid;
    border-radius: 20px;
    font-family: "Arial","jp-fonts","Microsoft JhengHei";
}

.cloudP{
    word-break: break-all;
    color:#969696;
}

.wallTitle{
    font-size: 16px;
    color:#945db7 !important;
    text-align: center;
    padding-bottom:15px;
}

.wallBox{
    width: 100%;
    height: 200px;
    background: #ccc;
}

.wallBut{
    background: #623d90;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 20px;
    border:1px #623d90 solid;
    border-radius: 15px;
}

.wallBut a:hover{
    background: #623d90;
    color: #fff;
}


.slider{
  width: 60%;
  height: 10px;
  background: #eddefd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}


.sliderP{
    float: left;
    color: #623194;
    height: 34px;
    line-height: 34px;
}

.formLeft{
    float: left;
   max-width: 80px;
    padding-left:5px;
}

.labLeft{
    float: left;
    padding: 0 5px;
}

.cutText{
  font-size: 25px;
  line-height: 25px;
  font-weight: bold;
  color:#999;
  padding:10px;
  user-select: none;
  -webkit-user-select: none;
}

.inText{
  font-size: 20px;
  font-weight: bold;
  color:#999;
  padding:3px;
  user-select: none;
  -webkit-user-select: none;
}

/** 雲端管理版面 20210114**/

li{
    list-style:none;
}

.cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  margin: 0;
  padding: 0;
}
@media (max-width: 550px) {
  .cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.card {
  position: relative;
  width: 31.5%;
  margin: 6px;
}

@media (min-width:1200px) {
    .card {
    width: 31.5%;
  }
}

@media (min-width: 1060px) and (max-width: 1199px) {
  .card {
    width: 31.5%;
  }
}

@media (min-width: 720px) and (max-width: 1060px) {
  .card {
    width: 48%;
  }
}
@media (max-width: 720px) {
  .card {
    width: 100%;
  }
}


/** 遠端預覽按鈕 20210114**/

.previewImg{
    width: 14%;
    background: #fff;
    border-radius: 18px;
    color:#AD8FE8;
    outline:none;
}


.previewBox{
    margin:10px 0;
    padding:10px;
    background: #fff;
    color: #AD8FE8;
    font-size: 14px;
    padding: 10px 5px 8px 10px;
    border: 2px #DACAF8 solid;
    border-radius: 30px;
    font-family: "Arial","jp-fonts","Microsoft JhengHei";
}

.previewText{
    font-family: "Arial","jp-fonts","Microsoft JhengHei";
    padding:8px 10px 5px 0;
    display: inline;
}

.previewBtn{
    width:30px;
    height: 30px;
    background-image: url(../TMP/Wish/IMG/BtON.svg);
}

.pt-1{
    padding-top:10px;
}

.pb-1{
    padding-bottom:10px;
}

.imgPushBt{
    background: #623d90;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 20px;
    border: 1px #623d90 solid;
    border-radius: 5px;
}

.imgPushBt a:hover{color:#fff;}

.mb-2{
    margin-bottom:30px;
}

.mb-3{
    margin-bottom:50px;
}

.mb-1{
    margin-bottom:15px;
}

.mb-10{
    margin-bottom:10px;
}

.BsListStyleB{
    width:202px;
    float: left;
    border:1px solid #e1d5ec;
    padding:5px;
    margin:5px 10px 30px 10px;
    border-radius: 10px;
    line-height: 25px;
    box-sizing: border-box;
}

.BsListStyleB input[type="file"]{
    display: none;
}

.BsListStyleB label{
    font-weight: 50;
    margin-bottom: 0;
}


.ImgPuBox{
    position: relative;
    width:190px;
    height: 107px;
    background: #f2e8fb;
    color:#623d90;
    border-radius: 10px 10px 0 0 ;
    overflow: hidden;
}

.ImgPuBox img{
    position:absolute;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}


button{
    border-color:transparent;
}

.PushIcon{
    width: 100%;
    height: 45px;
    background: #fff;
    border:1px solid #f2e8fb;
    border-radius: 0 0 10px 10px;
    font-size: 18px;
    color: #e1d5ec;
    text-align: center;
    list-style: 30px;
    padding-top:3px;
    line-height: 45px
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    background-color: transparent;
    color: #fff;
}

.navbar-inverse .navbar-nav .dropdown-menu > li > a {
    padding: 8px 15px;
    color: #64347f;
    font-weight: bold;
}

.navbar-inverse .navbar-nav .dropdown-menu > li{
    border-bottom: 1px solid #fff;
}

.navbar-inverse .navbar-nav .dropdown-menu {
    background-color: rgba(225,213,236,1);
    border: 0;
    padding: 0;
    margin-top: 0;
    border-top: 0;
    border-radius: 0;
    left: 0;
}

.dropdown-menu {
    margin-top: -5px;
    min-width: 150px;
}

.labelText2{
    color:#623194;
}

.labelText2 span{
    padding-top:10px;
}

.previewTextBox{
    position: relative;
    width: 380px;
    height:222px;
    border:1px solid #e1d5ec;
    padding:10px;
    margin:20px 10px 30px 0;
    border-radius: 10px;
    line-height: 25px;
    box-sizing: border-box;
}
#previewElm{
    height: 1080px;
    width: 1920px;
    zoom: 0.18518518518;
}

.previewTextBox input{
    width: 100%;
    border:none;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #c7a2e8;
    padding:0 10px;
    background: transparent;
}

.imgPushText{
    margin-top:120px;
    font-size: 20px;
    text-align: center;
    color:#623194;
}

.downloadIcon{
    position: absolute;
    top:-30px;
    right:15px;
    color: #fff;
    font-size: 30px;
}


input[type="file"]:focus{
    outline: 0;
}

.globe-icon{
    font-size:20px;
    padding:0 5px 5px 5px;
}
#yoyoclose{
	position: fixed;
  max-width: 43px;
  right: 10px;
  top: 10px;
}

.pwdInput{
  background: #f9f5fc;
  border:1px solid #d9cae5;
  color:#776784;
  margin-left:0;
}

.pl-0{
  padding-left:0;
}

.pr-0{
  padding-right:0;
}

.px-0{
  padding-right:0;
  padding-left:0;
}

.col-form-label{
  color:#65308e;
  padding-top:3px;
}

.mt-5{
  margin-top:65px
}

.mt-2{
  margin-top:30px
}

.my-2{
  margin-top:30px;
  margin-bottom:30px;
}

.pt-1{
    padding-top:10px;
}

.py-1{
    padding-top:10px;
    padding-bottom:10px;
}

.countIcon{
  width:30px;
}

.icon-none{
  display: none;
}

.pointer{
  cursor:pointer;
}

.entryBox{
  border:1px solid #b490bc;
  padding:25px;
  border-radius: 10px;
}

.entryColor{
  color:#573f95
}

.entryBtn{
  background: #64347f
}

.mb-1{
  margin-bottom:30px;
}

.mt-2{
  margin-top:60px;
}

.mt-1{
  margin-top:30px;
}

.ml-1{
  margin-left:10px;
}

.mb-1{
  margin-bottom:30px;
}

.ml-0{
  margin-left: 0;
}

.pl-0{
  padding-left: 0;
}

.onlineIcon{
  width:35px;
}

.rebootBt{
  background: #E6D7F7;
  color: #6C3CA5;
  font-weight: bold;
  font-size: 14px;
  padding: 5px 10px;
  border:1px #DAC3F4 solid;
  border-radius: 5px;
  margin-bottom:0;
}
.rebootBt:hover{
   color: #fff;
   background: #666666;
   font-weight: bold;
   font-size: 14px;
   padding: 5px 10px;
   border:1px #611691 solid;
   border-radius: 5px;
   margin-bottom:0;
 }




.rebootBt_on{
  color: #fff;
  background: #611691;
  font-weight: bold;
  font-size: 14px;
  padding: 5px 10px;
  border:1px #611691 solid;
  border-radius: 5px;
  margin-bottom:0;
}

 .rebootBt_on:hover{
    color: #fff;
    background: #711111;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 10px;
    border:1px #611691 solid;
    border-radius: 5px;
    margin-bottom:0;
  }
/*
.rebootBt_on:focus{
  color: #fff;
  background: #611691;
  font-weight: bold;
  font-size: 14px;
  padding: 5px 10px;
  border:1px #611691 solid;
  border-radius: 5px;
  margin-bottom:0;
  outline: none;
}

.rebootBt_on:active{
  color: #fff;
  background: #611691;
  font-weight: bold;
  font-size: 14px;
  padding: 5px 10px;
  border:1px #611691 solid;
  border-radius: 5px;
  margin-bottom:0;
} */



.resetBt{
   background: #E6D7F7;
   color: #6C3CA5;
   font-weight: bold;
   font-size: 14px;
   padding: 5px 10px;
   border:1px #DAC3F4 solid;
   border-radius: 5px;
   margin-bottom:0;
}

.btn-default[disabled]{
   background: #e0dfde;
   color: #7c7c7c;
   font-weight: bold;
   font-size: 14px;
   padding: 5px 10px;
   border:1px #c1c1c1 solid;
   border-radius: 5px;
   margin-bottom:0;
}

.table>tbody>tr>td{
  vertical-align:middle;
  text-align: center;
}

.table>thead>tr>th{
  vertical-align:middle;
  text-align: center;
}

.classNew{
    padding: 6px 12px;
    font-size: 14px;
    color: #6C3CA5;
    vertical-align: middle;
    background-color: #fff;
    background-image: none;
    border: 1px solid #E9DBFC;
    border-radius: 3px;
}

.classBt{
   height: 34px;
   padding: 6px 12px;
   background: #6C3CA5;
   color: #fff;
   font-weight: bold;
   font-size: 14px;
   line-height: 1.428571429;
   border:1px #6C3CA5 solid;
   border-radius: 5px;
   margin-bottom:0;
}

.pwdBtn{
   height: 40px;
   padding: 6px 12px;
   background: #6C3CA5;
   color: #fff;
   font-weight: bold;
   font-size: 14px;
   line-height: 1.428571429;
   border:1px #6C3CA5 solid;
   border-radius: 5px;
   margin-bottom:0;
}

.groupBt{
  background: #fff;
  color: #9F7AD3;
  font-weight: bold;
  font-size: 14px;
  padding: 5px 10px;
  border:1px #CDB7ED solid;
  border-radius: 5px;
  margin-bottom:0;
}

.textAlignL{
  text-align: left !important;
}

.select-mt{
  margin-top: 5px;
}

.select-label{
  font-size: 16px;
  color:#623d90;
  text-align: right;
}

.nickInput{
  text-align: center;
  border:1px #CDB7ED solid;
  border-radius: 5px;
  color: #9F7AD3;
  background: #fff;
}

.gropMenuBox{
  width:280px;
  background: #fff;
  color:#fff;
  list-style: none;
  border:1px #CDB7ED solid;
  padding-inline-start: 0;
  border-radius: 5px;
}

.gropMenuBox li{
  width:100%;
  height: 40px;
  color:#6F47AD;
  font-size: 16px;
  line-height: 40px;
  text-align: left;
  border-bottom:1px #E3D7F4 solid;
  padding:0 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gropBox{
  width:280px;
  position: fixed;
  top:40%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.gropMenuClose{
  position: absolute;
  top:-45px;
  right:-45px;;
  width:50px;
}

.gropMenuClose img{
  width:50px;
}
.pageMesk{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.6;
  display: none;
  background-color: Black;
}

.groupSelect{
  height: 40px;
  border:1px #CDB7ED solid;
  border-radius: 5px;
  color: #9F7AD3;
  background: #fff;
  color:#6F47AD;
  font-size:16px
}

.delivery-btn{
  background: #623d90;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 5px 20px;
  border:1px #623d90 solid;
  border-radius: 30px;
  margin-bottom:0px;
  height: 40px;
}

.delivered-btn{
    background: #492e93;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 6px 10px;
    border:1px #492e93 solid;;
    border-radius: 5px;
    margin-bottom: 10px;
    height: 35px;
}

.delivered-btn-none{
    background: #e57b33;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 6px 10px;
    border:1px #e57b33 solid;;
    border-radius: 5px;
    margin-bottom: 10px;
    height: 35px;
}

.delivered-btn-none:hover{
  background: #b54e08;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 6px 10px;
  border:1px #b54e08 solid;;
  border-radius: 5px;
  margin-bottom: 10px;
  height: 35px;
}

.delivered-btn-none:focus{
  background: #b54e08;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 6px 10px;
  border:1px #b54e08 solid;;
  border-radius: 5px;
  margin-bottom: 10px;
  height: 35px;
}

.delivered-btn-none:active{
  background: #b54e08;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 6px 10px;
  border:1px #b54e08 solid;;
  border-radius: 5px;
  margin-bottom: 10px;
  height: 35px;
}

.reset-btn{
  background: #ef9607;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 6px 10px;
  border:1px #ef9607 solid;;
  border-radius: 5px;
  margin-bottom: 10px;
  height: 35px;
}

.deliverTime{
  width:60%;
  /* position: absolute; */
  position: fixed;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  color:#fff;
  list-style: none;
  border:1px #CDB7ED solid;
  padding-inline-start: 0;
  border-radius: 5px;
  padding:20px 30px;
}

.mt-15{
  margin-top:15px;
}

.p-20{
  padding:20px;
}

.dateText{
  font-size:16px;
  color:#623d90;
}

.icon-size{
  width:35px;
  margin-top:30px;
}

.searchInput{
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  height: 40px;
  margin-right: 10px;
}

.searchBut{
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  height: 40px;
}

.searchLabel{
  margin-left:8px;
  color:#5d3575;
  font-size:16px;
}

.searchBtn{
  margin-top:1px;
  margin-left:-2px;
  margin-right:5px;
  height: 34px;
}
#qrcodeDiv{
  position: fixed;
  left: -999px;
  top: 10px;
  padding:15px;
  background: #fff;
  border-radius: 6px;
  border:1px solid #E2D1ED;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
}

#qrcodePCName{
  font-size:16px;
  color:#8E6BCD;
  text-align: center;
  padding-bottom:10px;
}

/*遠端遙控-20221018*/

.remoteBox{
  margin-top:40px;
  word-wrap: break-word;
}

.remoteBox h4{
  font-size:18px;
  color:#6537B9;
  text-align: center;
}

.remoteBox .pc-name{
  font-size:16px;
  color:#8968C7;
}

.remoteBox .btnBox{
  margin-top:20px;
  background: #EEE5FF;
  padding:15px;
  border-radius: 10px;
  border:1px solid #CAB2F6;
  text-align: center;
}

.remoteBox .btnBox span{
  font-size:20px;
  color:#6537B9;
  font-weight: bold;
  padding-right: 10px;
}

.remoteBox .btnBox .on-img{
  width:65px;
}
.remoteBox .btnBox .off-img{
  width:70px;
}

.remoteBox .btnBox .round-img{
  width:45px;
}

.remoteBox .btnBox .sound-img{
  width:35px;
}

.slider {
  -webkit-appearance: none;
  width: 65%;
  height: 10px;
  border-radius: 5px;
  background: #6537B9;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #C1A5F6;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #C1A5F6;
  cursor: pointer;
}

.action{
  background: #fff;
  opacity: 1;
}

.numLightBox{
  position: absolute;
  top:0;
  left: :0;
  width:100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  z-index: 9998;
  display: block;
}

.numberInput{
  position: absolute;
  max-width:500px;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 9999;
  background: #fff;
  border: 1px solid #CAB2F6;
  padding:20px;
  border-radius: 10px;
}

.numberInput h4{
  margin:30px 0;
  font-size:20px;
  text-align: center;
  color:#6537B9;
}

.content{
  width:320px;
  display: flex;
}

.content input{
  color:#6C3CC4;
}


.numItem{
  width:80px;
  height: 80px;
  margin:5px;
}

.content .inputStyle{
  background: #F4ECFB;
  border:1px solid #E1D0FF;
}

.qrcodeP{
  font-size:16px;
  line-height: 20px;
}
.w100{
  width: 100%;
}

.hide1{
  display: none;
}

.webInputStyle{
    width:50%;
    height: 34px;
    border:1px #ccc solid;
    border-radius: 4px;
    padding:6px 12px;
}

.lightBoxTry{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
}

.d-flex{
    display: flex;
    flex-wrap: wrap;
}

.flex-row{
    flex-direction: row;
}

.p-2{
    padding:0.5rem;
}

.p-3{
    padding:1rem;
}

.try-card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    margin-top:30%;
}

.try-card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #8664C3;
    color:#fff;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.try-card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 2.5rem;
}

.try-card .SnInputR {
    height: 34px;
    padding: 5px;
    text-align: center;
    line-height: 32px;
    background: #f9f4fd;
    border: 1px solid #dbc1fb;
    border-radius: 5px;
    color: #7844a4;
}

.sText{
    font-size:1.8rem;
    font-weight: bold;
    padding:1rem 0;
    color: #7844a4;
}

.tryP{
    margin-top:30px;
    color:#9A9A9A;
}

.flex-center{
    justify-content:center;
}

.sharedModal{

}
.sharedModal .close{
    float: right;
    font-size:30px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    filter: alpha(opacity=20);
}
.sharedModal h5 {
    display: block;
    font-size: 2rem;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    margin-left:20px;
}
.sharedModal .modal-header .close {
    margin-top: -25px;
}
.sharedModal .modal-title {
    margin-left:20px
}
.sharedModal .modal-body p{
    font-size:16px;
    color:#AFADAD;
    padding:10px 30px 20px 30px
}

.saveBtn {
    position: absolute;
    top: -15px;
    right: 10px;
}

.delivery-tips{
    font-size: 14px;
    color:#B69EEA;
    margin-top:10px;
    box-sizing: border-box;
}

/*首頁slider*/
#main-slider .carousel .item {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0 !important;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block !important;
  height: 700px;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
}

#main-slider .carousel .item:first-child {
  top: auto;
  position: relative;
}

#main-slider .carousel .item.active {
  opacity: 1;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
  z-index: 1;
  height: 700px;
}

#main-slider .prev,
#main-slider .next {
  position: absolute;
  top: 50%;
  background-color: #2987ce;
  color: #fff;
  display: inline-block;
  margin-top: -25px;
  height: 40px;
  line-height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  z-index: 5;
}

#main-slider .prev:hover,
#main-slider .next:hover {
  background-color: #000;
}

#main-slider .prev {
  left: 10px;
}

#main-slider .next {
  right: 10px;
}

#main-slider .carousel-indicators li {
  width: 20px;
  height: 20px;
  background-color: #fff;
  margin: 0 15px 0 0;
  position: relative;
}

#main-slider .carousel-indicators li:after {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #FFF;
  left: -3px;
  top: -3px;
}

#main-slider .carousel-indicators .active{
  width: 20px;
  height: 20px;
  background-color: #e35204;
   margin: 0 15px 0 0;
   border: 1px solid #e35204;
   position: relative;
}

#main-slider .carousel-indicators .active:after {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: #e35204;
  border: 1px solid #c52d2f;
  left: -3px;
  top: -3px;
}

#main-slider .active .animation.animated-item-1 {
  -webkit-animation: fadeInUp 300ms linear 300ms both;
  -moz-animation: fadeInUp 300ms linear 300ms both;
  -o-animation: fadeInUp 300ms linear 300ms both;
  -ms-animation: fadeInUp 300ms linear 300ms both;
  animation: fadeInUp 300ms linear 300ms both;
}

#main-slider .active .animation.animated-item-2 {
  -webkit-animation: fadeInUp 300ms linear 600ms both;
  -moz-animation: fadeInUp 300ms linear 600ms both;
  -o-animation: fadeInUp 300ms linear 600ms both;
  -ms-animation: fadeInUp 300ms linear 600ms both;
  animation: fadeInUp 300ms linear 600ms both;
}

#main-slider .active .animation.animated-item-3 {
  -webkit-animation: fadeInUp 300ms linear 900ms both;
  -moz-animation: fadeInUp 300ms linear 900ms both;
  -o-animation: fadeInUp 300ms linear 900ms both;
  -ms-animation: fadeInUp 300ms linear 900ms both;
  animation: fadeInUp 300ms linear 900ms both;
}

#main-slider .active .animation.animated-item-4 {
  -webkit-animation: fadeInUp 300ms linear 1200ms both;
  -moz-animation: fadeInUp 300ms linear 1200ms both;
  -o-animation: fadeInUp 300ms linear 1200ms both;
  -ms-animation: fadeInUp 300ms linear 1200ms both;
  animation: fadeInUp 300ms linear 1200ms both;
}

.form-inline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    border: 0;
}

.p-0{
    padding:0;
}
.d-flex{
    display: flex;
    flex-direction: row;
}
.p-21{
    padding:5px;
}
.justify-content-center{
    justify-content: center
}
.input-after{
    font-size:1.5rem;
    color:#53305E;
    line-height: 34px;
    margin-top:10px;
    box-sizing: border-box;
    text-align: center;
}
.flex-fill {
    flex: 1 1 auto !important;
}
.mb-51{
    margin-bottom:20px;
}
.mb-5{
    magin-bottom:3rem;
}
.loginTitle{
    font-size:16px;
    color:#9167BA;
}

.pwInput{
    width:60%;
    height: 40px;
    background: #f1e8fc;
    border:1px solid #dbc1fb;
    border-radius: 5px;
    font-size:16px;
    text-align: center;
    color:#560ab5;
}

.pwTips{
    font-size:14px;
    color:#8360ba;
}

.pwContrl{
    width:70px;
}
.pwContrlSpan{
    font-size:18px;
    color:#5829a3;
    margin-right: 5px;
}
.form-inline{
    display: inline;
}

.ladingPage{
    margin-top:60px;
}

.loginBox{
  border:1px solid #CFC1E8;
  padding:25px;
  border-radius: 15px;
  box-sizing: border-box;
}

.loginBox h2{
  font-size:22px;
  color:#836AB2;
  text-align: left;
}

.loginBox p{
  font-size:16px;
  color:#836AB2;
}

.pr-2{
    margin-right:10px;
}

.linkBtn{
    width:120px;
    padding:15px;
    background: #6537B9;
    color:#fff;
    font-size:18px;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
}

.linkBtn a:link{
    padding:15px;
    background: #6537B9;
    color:#fff;
    font-size:18px;
    border-radius: 6px;
}

.linkBtn a:hover{
    padding:15px;
    background: #6537B9;
    color:#BC97FF;
    font-size:18px;
    border-radius: 6px;
}

.linkBtn a:active{
    padding:15px;
    background: #6537B9;
    color:#BC97FF;
    font-size:18px;
    border-radius: 6px;
}

.linkBtn a:visited{
    padding:15px;
    background: #6537B9;
    color:#fff;
    font-size:18px;
    border-radius: 6px;
}

.orText{
    font-size:18px;
    color:#dbc1fb;
}

@media screen and  (max-width:768px) { 
      .orLineL{
        min-width:180px;
        border-bottom:1px #dbc1fb solid;
        margin-bottom:22px;
        margin-right: 10px;
    }

    .orLineR{
        min-width:180px;
        border-bottom:1px #dbc1fb solid;
        margin-bottom:22px;
        margin-left: 10px;
    }

}

@media screen  and  (min-width:768px) { 
     .orLineL{
        min-width:270px;
        border-bottom:1px #dbc1fb solid;
        margin-bottom:22px;
        margin-right: 10px;
        }

    .orLineR{
        min-width:270px;
        border-bottom:1px #dbc1fb solid;
        margin-bottom:22px;
        margin-left: 10px;
        }

}

.pwdView {
    font-size: 1em;
    color: #6b3889;
    margin-left:10px;
}