#quote {/* min-height: 100vh; */ background: #888;;overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url(/static/style/starry/images/banner/bg_quote.jpg);}


.box{position:relative;top:0;opacity:1;float:left;padding:60px 50px 40px 50px;width:100%;background:#fff;border-radius:10px;transform:scale(1);-webkit-transform:scale(1);-ms-transform:scale(1);z-index:5;background: rgba(255,255,255,.9);
    backdrop-filter: blur(5px);}
.box.back{transform:scale(.95);-webkit-transform:scale(.95);-ms-transform:scale(.95);top:-20px;opacity:.8;z-index:-1}
.box:before{content:"";height: 15px;border-radius: 10px 10px 0 0;position:absolute;top: -14px;background: rgba(0,0,0,.05);left:0;/* transform:scale(.95); *//* -webkit-transform:scale(.95); */-ms-transform:scale(.95);z-index:-1;left: 5%;right: 5%;}
.overbox .title{color:#fff}
.overbox .title:before{background:#fff}
.title{width:100%;line-height:46px;font-size:32px;font-weight:100;letter-spacing:2px;color:#f08200;position:relative;}
.title:before{content:"";width:5px;height:80%;position:absolute;top:0;left:-50px;background:#f08200;bottom: 0; margin: auto;}
#quote .subtitle {font-size: 15px; line-height: 1.5em;color: #666;}
.input,.input label,.input input,.input .spin,.button,.button button .button.login button i.fa,.material-button .shape:before,.material-button .shape:after,.button.login button{transition:300ms cubic-bezier(.4,0,.2,1);-webkit-transition:300ms cubic-bezier(.4,0,.2,1);-ms-transition:300ms cubic-bezier(.4,0,.2,1)}
.material-button,.alt-2,.material-button .shape,.alt-2 .shape,.box{transition:400ms cubic-bezier(.4,0,.2,1);-webkit-transition:400ms cubic-bezier(.4,0,.2,1);-ms-transition:400ms cubic-bezier(.4,0,.2,1)}
.input,.input label,.input input,.input .spin,.button,.button button{width:100%;float:left}
.input,.button{margin-top: 15px;height:60px}
.input,.input input,.button,.button button{position:relative}
.input input{height:50px;top:10px;border:0;background:transparent}
.input input,.input label,.button button{font-family:'Roboto',sans-serif;font-size:18px;color:#111;/* font-weight:300 */}
.input:before,.input .spin{width:100%;height:1px;position:absolute;bottom:0;left:0}
.input:before{content:"";background:rgba(0,0,0,0.1);z-index:3}
.input .spin{background:#f08200;z-index:4;width:0}
.overbox .input .spin{background:rgba(255,255,255,1)}
.overbox .input:before{background:rgba(255,255,255,0.5)}
.input label{position:absolute;top:10px;left:0;z-index:2;cursor:pointer;line-height:30px;font-size: 20px; color: #333; font-weight: 300;}
.button.login{width:60%;left:20%}
.button.login button,.button button{width:100%;line-height:64px;left:0;background-color:transparent;border:3px solid rgba(0,0,0,0.1);font-weight:900;font-size:18px;color:rgba(0,0,0,0.2)}
.button.login{margin-top:30px}
.button{margin-top:20px}
.button button{background-color:#fff;color:#f08200;border:0}
.button.login button.active{border:3px solid transparent;color:#fff!important}
.button.login button.active span{opacity:0;transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0)}
.button.login button.active i.fa{opacity:1;transform:scale(1) rotate(-0deg);-webkit-transform:scale(1) rotate(-0deg);-ms-transform:scale(1) rotate(-0deg)}
.button.login button i.fa{width:100%;height:100%;position:absolute;top:0;left:0;line-height:60px;transform:scale(0) rotate(-45deg);-webkit-transform:scale(0) rotate(-45deg);-ms-transform:scale(0) rotate(-45deg)}
.button.login button:hover{color:#f08200;border-color:#f08200}
.button{margin:40px 0;overflow:hidden;z-index:2}
.button button{cursor:pointer;position:relative;z-index:2}
.pass-forgot{width:100%;float:left;text-align:center;color:rgba(0,0,0,0.4);font-size:18px}
.click-efect{position:absolute;top:0;left:0;background:#f08200;border-radius:50%}
.overbox{width:100%;height:100%;position:absolute;top:0;left:0;overflow:inherit;border-radius:10px;padding:60px 50px 40px 50px}
.overbox .title,.overbox .button,.overbox .input{z-index:111;position:relative;color:#fff!important;display:none}
.overbox .title{width:80%}
.overbox .input{margin-top:20px}
.overbox .input input,.overbox .input label{color:#fff}
.overbox .material-button,.overbox .material-button .shape,.overbox .alt-2,.overbox .alt-2 .shape{display:block}
.material-button,.alt-2{width:140px;height:140px;border-radius:50%;background:#f08200;position:absolute;top:40px;right:-70px;cursor:pointer;z-index:100;transform:translate(0%,0%);-webkit-transform:translate(0%,0%);-ms-transform:translate(0%,0%)}
.material-button .shape,.alt-2 .shape{position:absolute;top:0;right:0;width:100%;height:100%}
.material-button .shape:before,.alt-2 .shape:before,.material-button .shape:after,.alt-2 .shape:after{content:"";background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(360deg);-webkit-transform:translate(-50%,-50%) rotate(360deg);-ms-transform:translate(-50%,-50%) rotate(360deg)}
.material-button .shape:before,.alt-2 .shape:before{width:25px;height:4px}
.material-button .shape:after,.alt-2 .shape:after{height:25px;width:4px}
.material-button.active,.alt-2.active{top:50%;right:50%;transform:translate(50%,-50%) rotate(0deg);-webkit-transform:translate(50%,-50%) rotate(0deg);-ms-transform:translate(50%,-50%) rotate(0deg)}

.materialContainer{width:100%;max-width: 800px;/* position:absolute; *//* top:50%; *//* left:50%; *//* transform:translate(-50%,-50%); *//* -webkit-transform: translate(-50%,-46%); */-ms-transform:translate(-50%,-50%);margin: auto 7%;}

.textarea {width: 100%;}
.textarea label {line-height: 30px; font-size: 20px; font-weight: 300; color: rgb(34, 34, 34);}
.textarea textarea {border: 1px solid #ccc; padding: 2%; font-size: 16px; line-height: 1.5em; width: 100%; height: 160px;font-family: "microsoft yahei";background: none;}
#quote .frow input::-webkit-input-placeholder,#quote .frow textarea::-webkit-input-placeholder {color: #999; font-size: 15px;}
#quote .frow input:-moz-placeholder,#quote .frow textarea:-moz-placeholder {color: #999;font-size: 15px;}
#quote .frow input::-moz-placeholder,#quote .frow textarea::-moz-placeholder {color: #999;font-size: 15px;}
#quote .frow input:-ms-input-placeholder,#quote .frow textarea:-ms-input-placeholder {color: #999;font-size: 15px;}
.textarea textarea:focus { border: 1px solid #f08200;}
.textarea:focus label {color: #f08200;}
.portlet-body {width: 100%;}
.tips {font-size: 14px; line-height: 1.5em; color: #777; font-weight: 100;}

#quote .file .btn-sm {width: 120px; height: 40px; line-height: 40px; background: #bbb; background-image: linear-gradient(to top, #bbb 0%, #ccc 100%); color: #666;vertical-align: bottom;}
#quote .file .btn-sm:hover {background: #f08200; color: #FFF;}
#quote .file .btn-sm.fileinput-delete {border: none; border-radius: 5px;color: #de2910;}
#quote .file .btn-sm.fileinput-delete:hover {background: #de2910; color: #FFF;}

/* 屏幕分辨率低于1080P时 */
@media (max-width: 1920px) {
	#quote.ptb100 {padding-top: 70px; padding-bottom: 70px;}
	.materialContainer {margin: auto 6%; max-width: 750px;}
	#quote .box {padding: 30px 50px 45px 50px;}
	#quote .subtitle.mt10 {margin-top: 5px;}
	#quote .input {margin-top: 10px; height: 55px;}
	#quote .input.ov {overflow: visible;}
	#quote .input input,#quote .input label {font-size: 16px !important;}
	#quote .textarea label {font-size: 16px;}
	#quote .textarea textarea {height: 120px;}
	
	
}