.Appointment-customization-dialog-wrapper { position: fixed; z-index: -10; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); transition: opacity 0.36s; }
.Appointment-customization-dialog-wrapper.show { z-index: 9999; opacity: 1; transform: scale(1); }
.Appointment-customization-dialog-wrap { width: 430px; display: flex; position: relative; opacity: 0; transform: scale(0); transition: 0.36s; margin-top: 6%; margin-left: -215px;left:50%; }
.Appointment-customization-dialog-wrapper.show .Appointment-customization-dialog-wrap { transform: scale(1); opacity: 1; }
.Appointment-customization-dialog-wrapper .close { position: absolute; z-index: 1; color: #666666;font-size: 18px; display: flex; align-items: center; justify-content: center; right: 10px; top: 10px; cursor: pointer; transition: all 0.6s;position: absolute;
    background: url(../images/login_v6.png) -100px -168px no-repeat;
    height: 20px;
    width: 17px;
    cursor: pointer; opacity: .9;}
.Appointment-customization-dialog-wrapper .close:hover { color: #EFC395;opacity: 1; }
.Appointment-customization-dialog-wrapper .left { width: 58%; flex-shrink: 0; background-position: center; background-image: url(../images/66.png); background-repeat: no-repeat; background-size: cover; }
.Appointment-customization-dialog-wrapper .right { flex: 1; background: #FFFFFF; padding: 95px 35px; line-height: 1; }
.Appointment-customization-dialog-wrapper .title { font-size: 30px; color: #333333; text-align: center; }
.Appointment-customization-dialog-wrapper .tipsW { font-size: 16px; color: #333333; text-align: center; padding: 22px 0; }
.Appointment-customization-dialog-wrapper .count { padding: 0 6px; }
.Appointment-customization-dialog-wrapper .row { display: flex; align-items: center; justify-content: space-between; }
.Appointment-customization-dialog-wrapper .field { width: 100%; margin-top: 16px; }
.Appointment-customization-dialog-wrapper .input { width: 100%; border: 1px solid #D0D0D0; height: 50px; border-radius: 4px; font-size: 14px; padding: 0 20px; }
.Appointment-customization-dialog-wrapper .input.empty::placeholder { color: #FF1E10; }
.Appointment-customization-dialog-wrapper .row-select .field { width: 100%; margin-top: 16px; }
.Appointment-customization-dialog-wrapper .select { width: 100%; border: 1px solid #D0D0D0; height: 50px; border-radius: 4px; font-size: 14px; padding: 0 0 0 20px; }
.Appointment-customization-dialog-wrapper .submit-button { width: 100%; height: 50px; border-radius: 4px; font-size: 18px; background: #333333; margin-top: 18px; cursor: pointer; transition: all 0.6s; }
.Appointment-customization-dialog-wrapper .submit-button:hover { opacity: 0.86; }
.Appointment-customization-dialog-wrapper .safe-tips { font-size: 16px; color: #999999; text-align: center; margin-top: 27px; }
@media screen and (max-width: 1366px) {
  .Appointment-customization-dialog-wrap { width: 860px; }
  .Appointment-customization-dialog-wrapper .right { padding: 75px 30px; }
  .Appointment-customization-dialog-wrapper .title { font-size: 26px; }
  .Appointment-customization-dialog-wrapper .tipsW { font-size: 14px; padding: 14px 0; }
  .Appointment-customization-dialog-wrapper .field { margin-top: 12px; }
  .Appointment-customization-dialog-wrapper .input { height: 44px; }
  .Appointment-customization-dialog-wrapper .select { height: 44px; }
  .Appointment-customization-dialog-wrapper .submit-button { height: 44px; font-size: 16px; }
  .Appointment-customization-dialog-wrapper .safe-tips { font-size: 14px; margin-top: 22px; }
}
@media screen and (max-width: 1024px) {
  .Appointment-customization-dialog-wrap { width: 680px; }
  .Appointment-customization-dialog-wrapper .right { padding: 60px 20px; }
  .Appointment-customization-dialog-wrapper .title { font-size: 22px; }
  .Appointment-customization-dialog-wrapper .tipsW { font-size: 12px; padding: 10px 0; }
  .Appointment-customization-dialog-wrapper .field { margin-top: 8px; }
  .Appointment-customization-dialog-wrapper .input { height: 38px; font-size: 12px; }
  .Appointment-customization-dialog-wrapper .select { height: 38px; font-size: 12px; }
  .Appointment-customization-dialog-wrapper .submit-button { height: 38px; font-size: 14px; margin-top: 14px; }
  .Appointment-customization-dialog-wrapper .safe-tips { font-size: 12px; margin-top: 14px; }
}
@media screen and (max-width: 768px) {
  .Appointment-customization-dialog-wrap { flex-direction: column;width: 100%;  margin-left: 0;
    left: 0;margin-top: 28%;}
  .Appointment-customization-dialog-wrapper .close { right: 10%; }
  .Appointment-customization-dialog-wrapper .left { display: none; }
  .Appointment-customization-dialog-wrapper .right { width: 90%; margin: 0 auto; }
}
.color-gold {
    color: #EFC395 !important;border: 1px solid #f2f3f4; text-align: center;
}	

.message-tips-wrapper { position: fixed; z-index: 999999; background: #333333; color: #EFC395; font-size: 14px; max-width: 300px; text-align: center; padding: 12px 24px; border-radius: 6px; left: 50%; top: 20%; transform: translateX(-50%) scale(0); line-height: 1; opacity: 0; transition: all 0.6s; }
.message-tips-wrapper.show { transform: translateX(-50%) scale(1); opacity: 1; }
@media screen and (max-width: 768px) {
  .message-tips-wrapper { font-size: 0.28rem; }
}
.Appointment-customization-dialog-wrapper select {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: menulist;
    box-sizing: border-box;
    align-items: center;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
    cursor: default;
    margin: 0em;
    font: 400 13.3333px Arial;
    border-radius: 0px;
    border-width: 1px;
    border-style: solid;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
}


/*-----浮动右侧客服-----*/

.float_qq{ position:fixed; bottom:200px; right:0; width:50px; height:203px; z-index:200;}

.float_qq li{ width:auto; height:50px; z-index:20;}

.float_qq li.float_qq1,.float_qq li.float_qq4{ position:absolute; left:0; width:62px;}

.float_qq li.float_qq1{ top:0;}

.float_qq li.float_qq2{ position:absolute; top:51px; left:0; width:126px;}

.float_qq li.float_qq3{ position:absolute; top:102px; left:0; width:172px;}

.float_qq li.float_qq4{ top:153px;}

.float_qq4{ position:absolute; top:153px; left:0;}

.float_qq li a{ display:block; font-family:"Microsoft Yahei"; color:#FFF; font-size:14px; height:50px; line-height:50px; overflow:hidden; background-color:#000; opacity:1; border-radius:6px;}

.float_qq li a img{ display:block; float:left; vertical-align:middle; width:24px; height:24px; margin:12px 12px 14px 14px;}
.float_qq li.float_qq2 a{ background-color:#c50000; }
.float_qq li a:hover{ background-color:#c50000; opacity:1;}

.float_shwx{ position:absolute; top:-155px; left:-200px;width:216px; height:216px; padding-bottom:9px;display:none;}

.float_shwx img{ display:block; padding:14px; background-color:#FFF; width:188px; height:188px;}
@media (min-width: 500px){
	.float_qq li:hover .float_shwx{display:block;}
}

@media (max-width: 479px){
.float_qq{ bottom:60px;  width:30px; height:123px; }
.float_qq li a img {margin: 2px 4px 4px 4px;}
.float_qq li a {font-size: 12px;height: 30px;line-height: 30px;	}
.float_qq li.float_qq2{top:31px; left:0; width:126px;}
.float_qq li.float_qq3{top:62px; left:0; width:172px;}
.float_qq li.float_qq4{ top:93px;}
}