@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; /*去掉苹果的默认UI来渲染按钮*/} 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: hidden; opacity: 0;}
.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: 75%;display: flex;flex-flow: row wrap;padding:0px 20px 0px 0;}
.umConsultBox .umConsultRight{width: 25%;display: -ms-flexbox;align-items: center;display: flex;-ms-flex-direction: column;flex-direction: column;min-width: 0;word-wrap: break-word;-ms-flex-direction: row;flex-direction: row;}
.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: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; opacity:0.85;}
.umConsultBox #umConsult{ position: relative; padding-right: 100px; display: flex;width: 100%;flex-direction: row;flex-wrap: wrap;}
.umConsultBox .umInput{ position: relative;padding-left: 60px;display:inline-block;width: calc(100% / 2 - 20px);margin: 10px 0px 10px 0; line-height: normal;}
.umConsultBox .umInput i{ position: absolute; top: 8px; right: 6px; font-style: normal; font-size: 12px; color: #a8a8a8;}
.umConsultBox .umInput label{width: 40px;text-align: right;margin-left: -40px;float: left;height: 34px;line-height: 32px; padding-right: 10px; text-align: center;}
.umConsultBox .umInput label span{ color: #FB3203;}
.umConsultBox .umInput label span.tit{color: #3D3D3D; padding-left: 0px; font-size:14px}
.umConsultBox .umInput input{line-height: 32px; width: 100%; font-size: 14px; padding: 0 5px;border: 1px solid #EBEBEB;background: #FAFAFA;}
.umConsultBox .umInput.umM2 input{ padding-right:24px;}
.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 .umItemIn .ccode{position: absolute; height: 34px!important; right: 2px; top: 2px;border-top-right-radius: 3px;border-bottom-right-radius: 3px;z-index: 1;}
.umConsultBox .umConsultBtn{border: medium none; background: #F53D08;width:80px; height:80px; line-height:1.4;font-weight: 600;color: #FFFFFF; font-size: 16px;border-radius:100px;cursor: pointer; display: flex; position: absolute; right: 30px; padding: 0;justify-content: center;align-items: center; margin: 0; top: 50%; margin-top: -40px;}
.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: #F53D08;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: #F53D08; 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)}
}
@media screen and (max-width:1024px){
.umConsultBox .container{padding:0 20px}
.umConsultClose{right:0}
.umConsultBox .umInput{padding-left: 40px;margin: 10px 20px 10px 0;}
.umConsultBox .umConsultBtn{margin-top: -40px; margin-right: 0; padding:0;right:10px}
.umTips{padding-top: 15px;padding-bottom:18px;}
.umConsultBox .umConsultLeft{width: 70%;}
.umConsultBox .umConsultRight{width: 30%}
.umTips h2,.umTips h3,.umTips h4{ font-size:32px;}
.umTips h2{font-size:36px;}.umTips h4{font-size:26px;}
.umConsultBox .umTipsBox{ padding-right: 80px;}
}
@media screen and (max-width:900px){
.umTips h2,.umTips h3,.umTips h4{ font-size:28px;}
.umTips h2{font-size:36px;}.umTips h4{font-size:22px;}
}

@media screen and (max-width:768px){
.umConsultBox .umConsultLeft{width: 70%; padding-right: 10px;}
.umConsultBox .umConsultRight{width: 30%;flex-wrap: wrap;justify-content: center;}
.umConsultBox .umConsultTxt{ padding: 10px 0 0 0; text-align: center; font-size: 12px;}
.umConsultBox .umInput{width: calc(100% / 1 - 20px);margin: 5px 20px 5px 0;}
.umConsultBox .umConsultBtn{ width: 80px; margin:-40px 0 0 -40px;}
.umTips h2,.umTips h3,.umTips h4{ font-size:26px;}
.umTips h2{font-size:34px;}.umTips h4{font-size:20px;}
.umConsultBox .umTitPic{width:120px;left: 0;}
.umTipsBox.umTitImg{ padding-left: 130px;}
.umConsultBox .umTipsBox{ padding-right: 60px;}
}

@media screen and (max-width:640px){
.umConsultBox .umConsultFlex{align-items: flex-start;}
.umConsultBox #umConsult{ padding-right: 0;}
.umConsultBox .umInput{width: calc(100% / 1 - 10px);margin: 5px 10px 5px 0;}
.umConsultBox .umConsultBtn{ position:relative; top: auto; right: auto; border-radius: 0; width: auto; height: 34px; padding: 0 15px; margin: 10px 0 0 40px;}
.umConsultBox .umConsultBtn:after{ display: none;}
.umConsultBox .umConsultBtn span{ padding: 0;}
.umTips h2,.umTips h3,.umTips h4{ font-size:22px;}
.umTips h2{font-size:30px;}.umTips h4{font-size:18px;}
.umConsultBox .umTitPic{width:90px;display: none;}
.umTipsBox.umTitImg{ padding-left: 0;}
.umConsultBox .umTipsBox{ padding-right:0px;}
.umConsultClose,.umConsultClose span{ width: 38px; height: 38px;}
.umConsultClose span{background-size: 28px 28px;}
}