.form{min-height:670px; z-index: 101;}
.form .column{position:relative; min-height:670px;}

.form .column .head .top{padding:40px 20px 1px;}
.form .column .head .top h2{height:40px; margin:0 10px; font-size:30px; line-height:1em;}

.form .head .label{margin-top:10px;}

form .field.select .customSelectOptionList li:first-child{display:none;}
form .accountNo.field.select .customSelectOptionList li:first-child{display:block;}


.listing .record{border-bottom:rgba(0,0,0,.6) 1px solid; margin:20px 20px 0;}
.listing .record .productData{white-space:nowrap; height:260px; padding:20px 0;  position:relative;}
.listing .record .productData>*{display:inline-block; vertical-align:top;}
.listing .record .productImage{width:280px; text-align:center; margin-right:-284px; position:relative; z-index:1;}
.listing .record .productInfo{width:100%; padding-left:280px; white-space:normal; box-sizing:border-box; position:static;}

.listing .record a{color:#aaa;}
.listing .record a:hover{color:#fff;}

.listing .record h3{font-size:20px;}
.listing .record .modelNumber{color:rgba(78, 166, 214, .4); font-size:16px;}
.listing .record .price, .listing .record .quantity{margin-top:20px;}
.listing .record .price label, .listing .record .quantity label{display:inline-block; width:130px;}
.listing .record .price input{border:none; background:none; color:#fff;}

.listing .record .remove{color:rgba(255, 255, 255, .7); white-space:nowrap; position:absolute; right:0; bottom:10px;}
.listing .record .remove:hover{color:rgba(255, 255, 255, 1);}
.listing .record .remove:before{content:''; display:inline-block; width:8px; height:2px; background:rgba(255, 255, 255, .7); vertical-align:middle; margin-top:-4px; margin-right:5px;}
.listing .record .remove:hover:before{background:rgba(255, 255, 255, 1);}

.result{padding:20px 20px 0; white-space:nowrap;}
.result>*{display:inline-block; white-space:normal; vertical-align:top;}
.result>.remarks{width:100%; box-sizing:border-box; padding-right:200px; white-space:nowrap;}
.result>.remarks>*{display:inline-block; white-space:normal; vertical-align:top;}
.result>.remarks .title{width:80px; margin-right:-83px;}
.result>.remarks p{width:100%; padding-left:80px; box-sizing:border-box; margin:0;}
.result>.obj{transform:translate(-100%, 0); -webkit-transform:translate(-100%, 0);}
.result th{width:118px;}

.loginContainer{border:rgba(78, 166, 214, .4) 1px solid; border-radius:3px; width:600px;}

.loginContainer h2{background:rgba(78, 166, 214, .4); border-radius:2px; margin:0 !important; font-size:14px !important; position:relative;}
.loginContainer h2:before{content:''; height:100%; display:inline-block; vertical-align:middle;}
.loginContainer h2:after{content:''; height:0; width:0; display:block; border:transparent 5px solid; border-top-color:#fff; border-bottom:none; position:absolute; top:50%; right:20px; transition:transform .2s; -webkit-transition:transform .2s; transform-origin:50% 0; -webkit-transform:50% 0;}
.loginContainer h2.expended:after{transform:scale(1, -1); -webkit-transform:scale(1, -1);}
.loginContainer h2 span{display:inline-block; padding:0 20px; vertical-align:middle;}
.loginContainer h2 br{display:none;}

.loginContainer h2 .button span{padding:0;}
.loginContainer h2 .button ins{margin-left:15px;}
/*.loginContainer h2 .button{padding:0 15px;}*/

.loginContainer h2 .logoutLabel{display:none;}

.loginContainer.logout{display:inline-block; border:none;}
.loginContainer.logout h2{background:none; text-align:right;}
.loginContainer.logout h2:after, .loginContainer.logout h2>span{display:none;}
.loginContainer.logout h2 .logoutLabel{display:inline-block; padding:0 15px;}
.loginContainer.logout h2 .logoutLabel ins{margin-left:8px;}


.loginContainer form{display:none;; padding:1px; margin:0 !important; padding:0 !important;}
.loginContainer form .formContainer{padding:20px;}
.loginContainer form .formContainer>.warning{padding-bottom:10px;}
.loginContainer form .field.submit>*{margin:0;}
.loginContainer form .field input{width:355px; -webkit-appearance: none;}
.loginContainer form .field.submit .remark+.btn{margin-left:-119px;}

form .field.select .customSelect.fail.mobile{overflow:visible;}
form .field.text input.fail, form .field.date input.fail, form .field.datetime input.fail, form .field.select .customSelect.fail .customSelectDisplay{box-shadow:0px 0px 0px 1px #f00;}
form .field.radio>fieldset.fail input+label:before{box-shadow:0px 0px 0px 1px #f00;}
form .field.checkbox span.fail>input+label:before{border-color:#f00;}
form .warning, form .warning>*{display:none; color:#f00;}

form .accountNo.field>div{display:none !important;}
form .accountNo.field.text ._text, form .accountNo.field.select ._select{display:inline-block  !important;}





.jumpToForm{display:none; width:100vw; margin-left:-50vw; position:fixed; left:50%; bottom:0; z-index:1000; text-align:center;}
.jumpToForm.onBottom{position:absolute; display:none;}

/*@media screen and (max-width: 768px) and (max-aspect-ratio: 12/9), screen and (max-width: 736px){*/
@media screen and (max-width: 1300px){
	.form .column{min-height:0;}
	
	.multiColumn>.column:nth-child(1){min-height:100vh;}
	
	.jumpToForm{display:block;}
	
	.loginContainer{width:auto;}
	.loginContainer h2:before{margin-top:0;}
	.loginContainer form .field input{width:100%;}
	
}
@media screen and (max-width: 735px){
	.listing .record .productData{height:auto; padding-bottom:50px;}
	.listing .record .productImage{width:140px; margin-right:-144px; padding:0 20px; box-sizing:border-box;}
	.listing .record .productImage img{width:100%; transform-origin:0 0;}
	.listing .record .productInfo{padding-left:140px;}
	.listing .record .quantity>*{display:inline-block; width:auto; padding:0; margin:0;}
	
	.loginContainer h2 .button{width:100%;}
	.loginContainer h2 br{display:block;}
	.loginContainer h2 span{padding:0 15px;}
	.loginContainer h2:after{right:15px;}
	
	.loginContainer.logout h2:before{display:none;}
	.loginContainer.logout{width:100%; padding:0 20px; box-sizing:border-box;}
	.loginContainer.logout h2 .button{text-align:center;}
	
	.loginContainer form .field.submit .remark+.btn{margin-left:0;}
	
	.result{display:flex; display:-webkit-flex; flex-direction:column-reverse; -webkit-flex-direction:column-reverse;}
	.result>*{margin:0 !important; padding:0 !important; transform:translate(0, 0) !important; -webkit-transform:translate(0, 0) !important;}
	.result .remarks{padding-top:20px !important;}
	/*.result>*:after{content:''; display:block; clear:both; width:0; height:0; font-size:0; overflow:hidden;}
	.result .obj>table{float:right;}*/
	
	
}

@media screen and (max-width: 350px){
	.loginContainer h2 span{font-size:12px; padding:0 10px; -webkit-text-size-adjust:none; -webkit-font-size-adjust:none;}
}