@charset "utf-8";
/*==========
Author: UmHtml
Author URI: http://www.umtheme.com/
Plugin ID: umConsult
==========*/
.umConsultBox *:before,.umConsultBox *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} 
.umConsultBox *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.umConsultBox input[type="submit"],.umConsultBox input[type="reset"],.umConsultBox input[type="button"],.umConsultBox button { -webkit-appearance: none;} em,i{ font-style:normal;}
.umConsultBox .input:after{ clear: both;content: ""; display: block; height: 0;visibility: hidden;}
.umConsultBox a:focus,.umConsultBox input:focus{outline:none;}
.umConsultBox.off{visibility:visible;opacity:1;}
.umConsultBox.umUp{/* -webkit-animation-duration: 1s;animation-duration: 1s;animation-name: umUp; */visibility:visible;opacity:1;}
.umConsultBox .container{max-width: 1260px;width: 100%; position: relative; z-index: 2;overflow: inherit;margin:0 auto;}
.umConsultBox .umConsultFlex{display: flex;flex-flow: row wrap;align-items: center; background: #fff; border-top-right-radius: 10px;border-top-left-radius: 10px;padding: 20px 20px 35px; position: relative; z-index: 1;}
.umConsultBox.no .umConsultFlex{box-shadow: 0 0 20px rgba(0,0,0,0.3);}
.umConsultBox .umConsultLeft{width:65%;flex:0 0 65%;display:block;padding:0 12px 0 0;}
.umConsultBox .umConsultAction{width:10%;flex:0 0 10%;display:flex;justify-content:center;align-items:center;align-self:stretch;margin:0;padding:0;}
.umConsultBox .umConsultRight{width:25%;flex:0 0 25%;display:flex;align-items:center;min-width:0;word-wrap:break-word;}
.umConsultBox .umConsultPic{ background: #fff; padding: 5px; font-size:0;-ms-flex-negative: 0;flex-shrink: 0;display: flex;align-items: center;}
.umConsultBox .umConsultPic img{width:90px; height:90px;}
.umConsultBox .umConsultTxt{color: #3D3D3D;padding:0 0 0 15px;overflow: hidden;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;-ms-flex: 1 1 auto;flex: 1 1 auto;-ms-flex-pack: center;justify-content: center;	}
.umTipsBox{position: relative;min-height: 60px; text-align: center;background-size: 100%;background-position: bottom;background-repeat: no-repeat; background-image: url(topBg.png); padding-right: 100px;}
.umTips{ margin:0px;color: #fff;padding: 20px 0px 20px 0px; width: 100%;}
.umTips h2,.umTips h3,.umTips h4{ font-size:36px;font-weight: 700; display: inline-block;}
.umTips h2{font-size:40px;}.umTips h4{font-size:30px;}
.umTips img{ max-width: 60px; display: inline-block;vertical-align: -14px;}
.umConsultBox{position: fixed;bottom: 0px;width: 100%;z-index: 999; left:0;right:0}

.umConsultBox .umTitPic{ position: absolute; width:160px;top: 50%; transform: translateY(-50%); left:2%;}
.umTipsBox.umTitImg{ padding-left: 180px;}
.umTipsBox.umTitImg .umTips{ padding-left: 0; padding-right: 0;}
.umConsultBox .umTitText{position:absolute;top:50%;display:block;padding:0;font-size:24px;line-height:1.35;font-weight:700;color:#fff;text-align:left;word-break:break-word;transform:translateY(-50%);}

.umConsultBox:after{ content: ''; position: absolute;background: #434A6E;background:rgba(0, 0, 0, 0) linear-gradient(227deg, #434A6E 0%, #313752 100%) repeat scroll 0% 0%;box-shadow: rgba(0, 0, 0, 0.08) 0px -4px 12px 0px; width: 100%; top: 0; bottom: 0;left: 0; opacity:0.85;}
.umConsultBox #umConsult{position:relative;padding-right:0;display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;row-gap:20px;}
.umConsultBox .umInput{position:relative;padding-left:0;display:block;width:auto;margin:0;line-height:normal;min-width:0;}
.umConsultBox .umInput i{ position: absolute; top: 8px; right: 6px; font-style: normal; font-size: 12px; color: #a8a8a8;}
.umConsultBox .umInput label{display:none;}
.umConsultBox .umInput input,.umConsultBox .umInput textarea{line-height: 32px; width: 100%; font-size: 14px; padding: 0 5px;border: 1px solid #EBEBEB;background: #FAFAFA;}
.umConsultBox .umInput.umM1{width: calc(100% / 1 - 40px);}
.umConsultBox .umInput.umM2 input{ padding-right:24px;}
.umConsultBox .umInput textarea{line-height: 1.6;}
.umConsultBox .umInput .umText{width: 100%; height: 172px; font-size: 14px; padding: 10px;line-height: 22px;resize: none;border-radius: 3px;border: 1px solid #EBEBEB;background: #FAFAFA;}
.umConsultBox .umConsult{  height: 32px; border:1px solid #EBEBEB; background: #FAFAFA; font-size: 14px; padding:0px 10px;display: block; width: 100%;border-radius: 3px;}
.umConsultBox .umItem{ position: relative; z-index: 1; margin:15px 0; display: block;}
.umConsultBox .umItemIn{ width: 100%;display: inline-block; padding-right: 0; position: relative;}
.umConsultBox .vcode{position:relative;}
.umConsultBox .vcode input{padding-right:82px;}
.umConsultBox .vcode .ccode{position:absolute;display:block;height:30px!important;max-height:30px;width:80px;right:2px;top:2px;border-top-right-radius:3px;border-bottom-right-radius:3px;z-index:2;cursor:pointer;object-fit:fill;}
.umConsultBox .umConsultBtn{border:medium none;background:#CC0000;width:80px;height:80px;min-width:80px;flex:0 0 80px;line-height:1.4;font-weight:600;color:#FFFFFF;font-size:16px;border-radius:50%;cursor:pointer;display:flex;position:relative;justify-content:center;align-items:center;margin:0;padding:0;}
.umConsultBox .umConsultBtn span{ z-index: 2;padding: 0 20px;text-align: center;}
.umConsultBox .umConsultBtn:after{width: 80px;height: 80px;content: '';z-index: 0;left: 50%; margin-left: -40px;top: 50%;position: absolute;background: #CC0000;border-radius: 100px;transform: translateX(0%) translateY(-50%) scale(1);animation: pulse-border 2000ms ease infinite; opacity: 0;}
.umConsultBox .umSelect .umConsultCate.umConsult{outline: none;appearance: none;-webkit-appearance: none;-moz-appearance: none;}
.umConsultBox .umSelect .umConsultCate.umConsult option{ line-height: 38px;}
.umConsultBox .umSelect .umItemIn em.umDot{ width: 18px; height: 18px; display: block; background-image: url(dot.png); background-position: center; background-repeat: no-repeat; background-size: 100%; position: absolute; top:11px; right:9px;}
.umConsultBox .umSelect .umConsultCate{ padding-right: 30px; padding-left: 6px;}
.umConsultBox .clear{ clear: both;}
.umConsultBox .umInput.umTextBox{width: calc(100% - 20px);padding-right: 20px;}
.umConsultBox .umMsg{ padding: 20px 24px; position: fixed; z-index: 9999; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,1); color: #fff; border-radius: 5px; display: none; text-align: center;}
.umConsultBox .umMsg .success{ color: #5AF03B;}

.umConsultBox input::-webkit-input-placeholder, .umConsultBox textarea::-webkit-input-placeholder{color:#6a6a6a;}
.umConsultBox input::-moz-placeholder,.umConsultBox textarea::-moz-placeholder{color:#6a6a6a;}
.umConsultBox input:-moz-placeholder,.umConsultBox textarea:-moz-placeholder{color:#6a6a6a;}
.umConsultBox input:-ms-input-placeholder,.umConsultBox textarea:-ms-input-placeholder{color:#6a6a6a;}

.umConsultClose{width: 42px; height: 42px; display: block;position: absolute; top:50%; right:0px; transform: translateY(-50%); cursor: pointer;background-color: #CC0000; border-radius: 50px;}
.umConsultClose span{width: 42px; height: 42px;background-image: url(btn.png); background-position: center; background-repeat: no-repeat; background-size: 30px 30px; -webkit-animation: 1.5s btnAnim infinite;animation: btnAnim 1.5s infinite ease-out; position:relative;display: block;-webkit-transition: -webkit-transform 0.3s ease-out;-moz-transition: -moz-transform 0.3s ease-out;transition: transform 0.3s ease-out;}
.umConsultBox.no .umConsultClose span{-webkit-transform: rotateZ(180deg);-moz-transform: rotateZ(180deg);transform: rotateZ(180deg);}
.umConsultClose.umBtn{background-color: initial; width: 50px; height: 50px;}
.umConsultClose.umBtn span{width: 50px; height: 50px;background-size: 50px 50px;}

@-webkit-keyframes btnAnim{0%{top:0px}20%{top:-5px}30%{top:0px}40%{top:5px}50%{top:0px}60%{top:5px}70%,to{top:0}}
@keyframes btnAnim{0%{top:0px}20%{top:-5px}30%{top:0px}40%{top:5px}50%{top:0px}60%{top:5px}70%,to{top:0}}
@keyframes umConsultDrop {0% {top:0px;}25% {top:5px;}50% {top:0;}75% {top:5px;}100% {top:0;}}
@-webkit-keyframes umConsultDrop {0% {top:0px;}25% {top:5px;}50% {top:0;}75% {top:5px;}100% {top:0;}}

@-webkit-keyframes pulse-border{0%{-webkit-transform:translateX(0%) translateY(-50%) translateZ(0) scale(1);transform:translateX(0%) translateY(-50%) translateZ(0) scale(1);opacity:.6}100%{-webkit-transform:translateX(0%) translateY(-50%) translateZ(0) scale(1.3);transform:translateX(0%) translateY(-50%) translateZ(0) scale(1.3);opacity:0}}
@keyframes pulse-border{
0%{-webkit-transform:translateX(0%) translateY(-50%) translateZ(0) scale(.8);transform:translateX(0%) translateY(-50%) translateZ(0) scale(.8);opacity:0}
25%{-webkit-transform:translateX(0%) translateY(-50%) translateZ(0) scale(1);transform:translateX(0%) translateY(-50%) translateZ(0) scale(1);opacity:.6}
100%{-webkit-transform:translateX(0%) translateY(-50%) translateZ(0) scale(1.4);transform:translateX(0%) translateY(-50%) translateZ(0) scale(1.4);opacity:0}}

@-webkit-keyframes umUp{
	0%{-webkit-transform:translateY(100%);transform:translateY(100%)}
	100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes umUp{
	0%{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}
	100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
/* Responsive layout: form, submit button and QR information are three blocks. */
@media screen and (max-width:1099px){
.umConsultBox .container{padding:0 20px;}
.umConsultClose{right:0;}
.umConsultBox .umConsultLeft{width:58%;flex:0 0 58%;}
.umConsultBox .umConsultAction{width:12%;flex:0 0 12%;}
.umConsultBox .umConsultRight{width:30%;flex:0 0 30%;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
.umConsultBox .umConsultPic{padding:0;}
.umConsultBox .umConsultTxt{padding:10px 0 0;max-width:100%;font-size:13px;}
.umConsultBox #umConsult{column-gap:16px;row-gap:16px;}
.umTips{padding-top:15px;padding-bottom:18px;}
.umTips h2,.umTips h3,.umTips h4{font-size:30px;}
.umTips h2{font-size:34px;}.umTips h4{font-size:24px;}
.umConsultBox .umTipsBox{padding-right:70px;}
.umConsultBox .umTitText{font-size:32px;left:4%;right:70px;}
}

@media screen and (max-width:800px){
.umConsultBox .umConsultFlex{align-items:stretch;padding:16px 16px 24px;}
.umConsultBox .umConsultLeft{width:100%;flex:0 0 100%;padding-right:0;order:1;}
.umConsultBox .umConsultRight{width:65%;flex:0 0 65%;min-height:96px;order:2;flex-direction:row;justify-content:flex-start;align-items:center;text-align:left;}
.umConsultBox .umConsultAction{width:35%;flex:0 0 35%;min-height:96px;align-self:auto;order:3;justify-content:flex-end;}
.umConsultBox .umConsultPic{padding:0 5px 0 0;}
.umConsultBox .umConsultTxt{padding:0 0 0 12px;max-width:calc(100% - 105px);font-size:13px;text-align:left;}
.umConsultBox #umConsult{padding-right:0;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:14px;}
.umConsultBox .umConsultBtn{width:120px;height:40px;min-width:0;flex:0 1 120px;border-radius:4px;}
.umConsultBox .umConsultBtn:after{display:none;}
.umConsultBox .umConsultBtn span{padding:0 12px;white-space:nowrap;}
.umTips h2,.umTips h3,.umTips h4{font-size:26px;}
.umTips h2{font-size:32px;}.umTips h4{font-size:21px;}
}

@media screen and (max-width:520px){
.umConsultBox .container{padding:0 12px;}
.umConsultBox .umConsultFlex{padding:14px 12px 20px;}
.umConsultBox #umConsult{grid-template-columns:1fr;column-gap:0;row-gap:12px;}
.umConsultBox .umConsultAction,.umConsultBox .umConsultRight{min-height:84px;}
.umConsultBox .umConsultPic{padding:0 4px 0 0;}
.umConsultBox .umConsultPic img{width:76px;height:76px;}
.umConsultBox .umConsultTxt{max-width:calc(100% - 84px);padding-left:8px;font-size:12px;}
.umConsultBox .umConsultBtn{width:108px;height:38px;flex-basis:108px;font-size:14px;}
.umTips h2,.umTips h3,.umTips h4{font-size:22px;}
.umTips h2{font-size:28px;}.umTips h4{font-size:18px;}
.umConsultBox .umTitPic{display:none;}
.umTipsBox.umTitImg{padding-left:0;}
.umConsultBox .umTipsBox{padding-right:50px;}
.umConsultBox .umTitText{left:12px;right:50px;font-size:28px;}
.umConsultClose,.umConsultClose span{width:38px;height:38px;}
.umConsultClose span{background-size:28px 28px;}
}