#kefu{position: fixed;bottom: 2%;right: 1%;width: 4rem;height: 4rem;background-color: #fff;border-radius: 50%;box-shadow: 0px 0px 8px 0px rgba(6, 13, 39, 0.16);z-index: 9;transition: all 0.4s;}
#kefu:hover{cursor: pointer;background-color: var(--button-background);}
#kefu:hover .kefu_icon i{color: #fff;}
#kefu .kefu_icon{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
#kefu .kefu_icon i{font-size: 2.25rem;color: var(--button-background);transition: all 0.5s;}
.zmtkefu .kefuguanbi{position: absolute;top: 4%;right: 2%;width: 1.875rem;height: 1.875rem;display: flex;justify-content: center;align-items: center;z-index: 8;}
.zmtkefu .kefuguanbi i{font-size: 1.125rem;font-weight: 700;color: #333;}
.zmtkefu .kefuguanbi:hover{cursor: pointer;}
.zmtkefu .kefuguanbi:hover i{color: var(--button-background);}
/*表单*/.zmtkefu{position: fixed;bottom: calc(2% + 6rem);right: 1%;display: none;width: 25rem;height: auto;z-index: 9;}
.zmtkefu h3{color: #fff;font-size: 2em;font-weight: bold;font-family: "microsoft yahei";text-shadow: 0 0 10px #000;text-align: center;}
.zmtkefu p{font-size: 1rem;color: #111;line-height: 1.3em;clear: both;}
.zmtkefu form{/*float: left;*/display: block;width: 100%;height: auto;position: relative;}
.zmtkefu form fieldset{float: left;/*position: absolute;*/width: 100%;height: auto;padding: 20px;border: none;border-radius: 5px;box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);background: #fff;background: whitesmoke;background: -webkit-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);background: -moz-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);background: -o-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);background: linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%);/* W3C*/}
.zmtkefu form fieldset legend{float: left;display: block;width: 100%;position: relative;border-bottom: 1px solid #dfdfdf;top: 0;left: 0;clear: both;margin-bottom: 20px;padding-bottom: 10px;font-size: 1.25rem;line-height: 30px;color: #111;font-weight: 700;text-shadow: 0 1px 0 #fff;}
.zmtkefu form fieldset.charlie{display: none;}
.zmtkefu form fieldset .frow{float: left;display: block;width: 100%;margin-bottom: 10px;}
.zmtkefu form fieldset .frow:last-child{margin-bottom: 0px;}
.zmtkefu form fieldset input{float: left;width: 100%;padding: 12px 6px;font-size: 14px;font-weight: 400;font-family: "microsoft yahei";border: 1px solid #dedede;border-radius: 5px;box-sizing: border-box;box-shadow: 0 0 0 transparent, inset 0 0 5px #eee;-webkit-transition: all 0.2s ease-in-out;}
.zmtkefu form fieldset input::-webkit-input-placeholder{color: #ccc;opacity: 1;-webkit-transition: opacity 0.2s ease-in-out;}
.zmtkefu form fieldset input:focus{outline: none;border: 1px solid #27c1bf;box-shadow: 0 0 10px #27c1bf;-webkit-transition: all 0.2s ease-in-out;}
.zmtkefu form fieldset input:focus::-webkit-input-placeholder{opacity: 0.5;}
.zmtkefu form fieldset input[type="button"]{display: block;width: 100%;height: 50px;padding: 0;background: var(--button-background);line-height: 50px;text-align: center;text-decoration: none;text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);font-size: 1.2em;font-family: "microsoft yahei";font-weight: 400;color: #fff;border: 1px solid #27c1bf;border-radius: 4px;box-shadow: 0 0 0 transparent;}

.out,.alpha.out,.beta.out{z-index: 0;opacity: 1;display: block;-webkit-animation: out 0.75s ease forwards;-moz-animation: out 0.75s ease forwards;-o-animation: out 0.75s ease forwards;animation: out 0.75s ease forwards;}
@-webkit-keyframes out{0%{-webkit-transform: scale(1);opacity: 1;}25%{-webkit-transform: scale(1.05);}99%{-webkit-transform: scale(0.8);}100%{opacity: 0;display: none;}}
@-moz-keyframes out{0%{-moz-transform: scale(1);opacity: 1;}25%{-moz-transform: scale(1.05);}99%{-moz-transform: scale(0.8);}100%{opacity: 0;display: none;}}
@-o-keyframes out{0%{-o-transform: scale(1);opacity: 1;}25%{-o-transform: scale(1.05);}99%{-o-transform: scale(0.8);}100%{opacity: 0;display: none;}}
@keyframes out{0%{-webkit-transform: scale(1);transform: scale(1);opacity: 1;}25%{-webkit-transform: scale(1.05);transform: scale(1.05);}99%{-webkit-transform: scale(0.8);transform: scale(0.8);}100%{opacity: 0;display: none;}}
.in,.beta.in{z-index: 30;display: block;opacity: 1;-webkit-animation: in 0.75s ease forwards 0.25s;-moz-animation: in 0.75s ease forwards 0.25s;-o-animation: in 0.75s ease forwards 0.25s;animation: in 0.75s ease forwards 0.25s;}
@-webkit-keyframes in{0%{-webkit-transform: translate3d(150px, 0, 0);opacity: 0;}100%{-webkit-transform: translate3d(0px, 0, 0);opacity: 1;}}
@-moz-keyframes in{0%{-moz-transform: translate3d(150px, 0, 0);opacity: 0;}100%{-moz-transform: translate3d(0px, 0, 0);opacity: 1;}}
@-o-keyframes in{0%{-o-transform: translate3d(150px, 0, 0);opacity: 0;}100%{-o-transform: translate3d(0px, 0, 0);opacity: 1;}}
@keyframes in{0%{-webkit-transform: translate3d(150px, 0, 0);-moz-transform: translate3d(150px, 0, 0);-o-transform: translate3d(150px, 0, 0);transform: translate3d(150px, 0, 0);opacity: 0;}
100%{-webkit-transform: translate3d(0px, 0, 0);-moz-transform: translate3d(0px, 0, 0);-o-transform: translate3d(0px, 0, 0);transform: translate3d(0px, 0, 0);opacity: 1;}}
.alpha.in{z-index: 30;display: block;opacity: 0;-webkit-animation: in-prev 0.75s ease forwards 0.25s;-moz-animation: in-prev 0.75s ease forwards 0.25s;-o-animation: in-prev 0.75s ease forwards 0.25s;animation: in-prev 0.75s ease forwards 0.25s;}
@-webkit-keyframes in-prev{0%{-webkit-transform: translate3d(-150px, 0, 0);opacity: 0;}100%{-webkit-transform: translate3d(0px, 0, 0);opacity: 1;}}
@-moz-keyframes in-prev{0%{-moz-transform: translate3d(-150px, 0, 0);opacity: 0;}100%{-moz-transform: translate3d(0px, 0, 0);opacity: 1;}}
@-o-keyframes in-prev{0%{-o-transform: translate3d(-150px, 0, 0);opacity: 0;}100%{-o-transform: translate3d(0px, 0, 0);opacity: 1;}}
@keyframes in-prev{0%{-webkit-transform: translate3d(-150px, 0, 0);-moz-transform: translate3d(-150px, 0, 0);-o-transform: translate3d(-150px, 0, 0);transform: translate3d(-150px, 0, 0);opacity: 0;}
100%{-webkit-transform: translate3d(0px, 0, 0);-moz-transform: translate3d(0px, 0, 0);-o-transform: translate3d(0px, 0, 0);transform: translate3d(0px, 0, 0);opacity: 1;}}
.charlie.in{z-index: 30;display: block;opacity: 0;-webkit-animation: in-charlie 0.75s ease-out forwards 0.25s;-moz-animation: in-charlie 0.75s ease-out forwards 0.25s;-o-animation: in-charlie 0.75s ease-out forwards 0.25s;animation: in-charlie 0.75s ease-out forwards 0.25s;}
@-webkit-keyframes in-charlie{0%{-webkit-transform: translate3d(0, 150px, 0);opacity: 0;}100%{-webkit-transform: translate3d(0, 0, 0);opacity: 1;}}
@-moz-keyframes in-charlie{0%{-moz-transform: translate3d(0, 150px, 0);opacity: 0;}100%{-moz-transform: translate3d(0, 0, 0);opacity: 1;}}
@-o-keyframes in-charlie{0%{-o-transform: translate3d(0, 150px, 0);opacity: 0;}100%{-o-transform: translate3d(0, 0, 0);opacity: 1;}}
@keyframes in-charlie{0%{-webkit-transform: translate3d(0, 150px, 0);-moz-transform: translate3d(0, 150px, 0);-o-transform: translate3d(0, 150px, 0);transform: translate3d(0, 150px, 0);opacity: 0;}
100%{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);opacity: 1;}}
/* 适配手机端 */
@media (min-width: 320px) and (max-width: 1023px) {
  .zmtkefu {
    width: 100%;
  }
}