/*@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,500);*/
body {
 /* padding-top: 100px;*/
  background: #fff;
  font-family:Microsoft Yahei, Arial, sans-serif, PingFang SC;
  font-weight: 400;
  color: rgba(0,0,0,1.0);
  line-height: 26px;
}
textarea{ resize:none; }
img{ border:none; }
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  font-family:Microsoft Yahei, Arial, sans-serif, PingFang SC;
}
a {
  color: rgba(22,161,188,1.0);
  -webkit-transition: color 400ms, background-color 400ms;
  -moz-transition: color 400ms, background-color 400ms;
  -o-transition: color 400ms, background-color 400ms;
  transition: color 400ms, background-color 400ms;
}
a:hover,
a:focus {
  text-decoration: none;
  color: rgba(62,183,192,1.0);
}

/*kirinsun edit*/
.container { padding:0 15px; margin:0 auto; }
.container .row { margin:0 -15px; }

/*头部*/
header{ height: 80px; background:rgba(255,255,255,1.0); box-shadow: 0 5px 5px rgba(5,112,141,0.2); border: 0; border-radius: 0; padding: 0; margin: 0; }
/*头部logo*/
header .subscribe-header {height: auto; padding: 10px; text-decoration: none; }
header .subscribe-header img { width: 160px; height:60px; border:none; }	

/*主体*/
main{ height:calc(100vh - 80px); padding: 0; margin: 0; background:rgba(201,230,237,1.0) url(../images/bg-points.png) repeat-x 0 10px;}
main>section >.container { text-align: center; }
	
.subscribe-main-box{ display:inline-block; clear: both; width:360px; height: auto; padding:0; margin:0 auto; text-align: center; box-sizing: border-box; }

/*提交预约*/ 
.subscribe-component{ display:inline-block; clear: both; width:100%; height:460px; padding: 0; margin:4em auto; text-align: center; background:rgba(255,255,255,1.0); box-shadow: 0 0 15px rgba(0,147,161,0.2); border: 0; border-radius: 0; }
.subscribe-component .subscribe-title{ display:inline-block; clear: both; width:100%; height: auto; padding: 0; margin: 0 auto; text-align: center; overflow: hidden; }
.subscribe-component .subscribe-title h4{ display:inline-block; clear: both; width:100%; height: auto; padding:15px; margin: 0 auto; text-align: center; font-size: 20px; color:rgba(0,95,120,1.0); border-bottom: 1px solid rgba(0,147,161,0.2); overflow: hidden; box-sizing: border-box; }
.subscribe-component .subscribe-title p{ display:inline-block; clear: both; width:100%; height: auto; padding:15px 30px; margin: 0 auto; text-align: left; font-size: 14px; color:rgba(0,95,120,0.6); line-height: 150%; overflow: hidden; box-sizing: border-box; }

.subscribe-component .subscribe-form{ display:inline-block; clear: both; width:100%; height:auto; padding:0 30px 30px 30px; margin: 0 auto; text-align: center; box-sizing: border-box; overflow: visible; }
.subscribe-component .subscribe-form ul{ display:block; clear: both; width:100%; height: auto; padding: 0; margin: 0 auto; text-align: center; list-style-type: none; }
.subscribe-component .subscribe-form ul li{ display:block; clear: both; width:100%; height: auto; padding: 0; margin:0 auto; text-align: center; list-style-type: none; }
.subscribe-component .subscribe-form ul li .input-wrap{ position: relative; display:block; clear: both; width:100%; height:auto; min-height:60px; padding: 0 0 20px 0; margin:0 auto; text-align: center; overflow:visible; }

.subscribe-component .subscribe-form ul li .input-wrap .input-info{ position: absolute; z-index: 1; bottom: 0; left: 0; display:none; width: 100%; height:20px; line-height: 20px; padding: 0 10px; margin:0; text-align: left; text-indent:0; box-sizing: border-box; font-size: 12px; color:rgba(255,0,0,0.8); }	

.subscribe-component .subscribe-form ul li .input-wrap .inp{ position: relative; display:inline-block; float: left; width:100%; height:40px; line-height: 40px; padding:0; margin:0; text-align:left; text-indent:15px; background: rgba(255,255,255,1.0); border:1px solid rgba(0,0,0,0.05); box-sizing: border-box; outline: none; overflow: hidden; }
.subscribe-component .subscribe-form ul li .input-wrap .inp:hover{ border:1px solid rgba(0,147,161,0.5); }
.subscribe-component .subscribe-form ul li .input-wrap.err .inp{ border:1px solid rgba(255,0,0,0.5); }

.subscribe-component .subscribe-form ul li .input-wrap .area-code{ position: absolute; z-index: 1; top:5px; left: 0; display:inline-block; width: 120px; height:30px; line-height: 30px; padding: 0; margin:0; text-align: center; border-right:1px solid rgba(0,0,0,0.05); box-sizing: border-box; font-size: 14px; color: rgba(0,0,0,0.4);}
.subscribe-component .subscribe-form ul li .input-wrap .area-code span{ font-size: 14px; color: rgba(0,0,0,0.4);}
.subscribe-component .subscribe-form ul li .input-wrap .inp.inp-phone{ text-indent: 135px; }

.subscribe-component .subscribe-form ul li .input-wrap .btn-vcode{ position: absolute; z-index: 1; top:0; right: 0; display:inline-block; width: 120px; height:40px; line-height: 40px; padding: 0; margin:0; text-align: center; font-size: 14px; color: rgba(0,147,161,0.8); border:1px solid rgba(0,147,161,0.5); background:rgba(0,147,161,0.05); border-radius:none; outline: none; box-sizing: border-box; text-decoration: none; cursor:pointer;  }
.subscribe-component .subscribe-form ul li .input-wrap .btn-vcode:disabled{ color: rgba(0,0,0,0.3); border:1px solid rgba(0,0,0,0.05); background:rgba(0,0,0,0.03); }
.subscribe-component .subscribe-form ul li .input-wrap .inp.inp-vcode{ width:calc(100% - 130px); }

.subscribe-component .subscribe-form ul li .input-wrap.sel::before { position: absolute; z-index: 1; display: inline-block; content: ""; width: 6px; height: 6px; transform: rotate(-45deg); top:15px; right:15px; border-bottom: 2px solid rgba(0,0,0,0.2); border-left: 2px solid rgba(0,0,0,0.2);}
.subscribe-component .subscribe-form ul li .input-wrap .inp.inp-city{ background: rgba(255,255,255,0); z-index: 2; cursor: pointer; }
.subscribe-component .subscribe-form ul li .input-wrap .options-city{ position: absolute; z-index: 2; top:40px; left: 0; display:inline-block; width: 100%; height:auto; max-height: 120px; padding: 0; margin:0; text-align: center; background:rgba(255,255,255,1.0); border:1px solid rgba(0,0,0,0.05); box-sizing: border-box; overflow-y: scroll; }
.subscribe-component .subscribe-form ul li .input-wrap .options-city span{ display:inline-block; width: 100%; height:40px; line-height: 40px; padding: 0 15px; margin:0; text-align: left; font-size: 14px; color: rgba(0,0,0,0.8); box-sizing: border-box;}
.subscribe-component .subscribe-form ul li .input-wrap .options-city span:hover{ color: rgba(0,147,161,0.8); background:rgba(0,147,161,0.05); }

.subscribe-component .subscribe-form ul li .submit-wrap{ display:inline-block; clear: both; width:100%; height:auto; padding: 0; margin:10px auto; text-align: center; }
.subscribe-component .subscribe-form ul li .submit-wrap .btn-sub{ display:inline-block; clear: both; width:100%; height:40px; line-height: 40px; padding: 0; margin:0 auto; text-align: center; font-size: 16px; color: rgba(255,255,255,1.0); background:linear-gradient(120deg, rgba(36,228,192,1.0) 0%, rgba(2,180,197,1.0) 100%); border: none; box-shadow: 0 0 20px rgba(36,228,192,0.5); text-decoration: none; cursor:pointer; }


.subscribe-component .subscribe-info{ display:inline-block; clear: both; width:100%; height:auto; padding:0 30px 30px 30px; margin: 0 auto; text-align: center; box-sizing: border-box; overflow: visible; }
.subscribe-component .subscribe-info img{ display:block; clear: both; width:20%; height:auto; padding:0; margin: 15px auto; border: none; box-sizing: border-box; }
.subscribe-component .subscribe-info p{ display:inline-block; clear: both; width:100%; height:auto; padding:10px 0; margin: 0 auto; text-align: left; line-height: 160%; font-size: 16px; color:rgba(0,0,0,0.8); box-sizing: border-box; }
.subscribe-component .subscribe-info p.demo-info{ display:inline-block; clear: both; width:100%; height:auto; padding:15px 0; margin: 0 auto; text-align: left; line-height: 150%; font-size: 14px; color:rgba(0,0,0,0.4); box-sizing: border-box; }


.subscribe-component .subscribe-info .btn-wrap{ display:inline-block; clear: both; width:100%; height:auto; padding: 0; margin:15px auto; text-align: center; }
.subscribe-component .subscribe-info .btn-wrap .btn-demo{ display:inline-block; clear: both; width:100%; height:40px; line-height: 40px; padding: 0; margin:0 auto; text-align: center; font-size: 16px; color: rgba(255,255,255,1.0); background:linear-gradient(120deg, rgba(36,228,192,1.0) 0%, rgba(2,180,197,1.0) 100%); border: none; box-shadow: 0 0 20px rgba(36,228,192,0.5); text-decoration: none; cursor:pointer; }


/*********************************************************移动端*********************************************************/
@media screen and (max-width: 1000px){

	
/*头部*/
header{ height: 50px; }
/*头部logo*/
header .subscribe-header { height: auto; padding: 5px 15px;}
header .subscribe-header img { width:auto; height:40px; }		

/*主体*/
main{ height:auto; min-height: calc(100vh - 50px); overflow-y: scroll; padding: 0; margin: 0;}
main>section >.container { text-align: center; padding: 0 15px; }	

.subscribe-main-box{ display:inline-block; clear: both; width:100%; height: auto; padding:0; margin:0 auto; text-align: center; box-sizing: border-box; }

/*提交预约*/ 
.subscribe-component{ display:inline-block; clear: both; width:100%; height:auto; min-height: calc(100% - 4em); padding: 0; margin:2em auto; text-align: center; background:rgba(255,255,255,1.0); box-shadow: 0 0 5px rgba(0,147,161,0.5); border: 0; border-radius: 0; }
.subscribe-component .subscribe-title p{ padding:0 15px; margin: 0 auto; text-align: left; font-size: 14px; }
.subscribe-component .subscribe-form,
.subscribe-component .subscribe-info{ padding:0 15px 10px 15px; }	
	
.subscribe-component .subscribe-form ul li .input-wrap .area-code{ width: 115px; font-size:1em; }
.subscribe-component .subscribe-form ul li .input-wrap .area-code span{ font-size:1em; }
.subscribe-component .subscribe-form ul li .input-wrap .inp.inp-phone{ text-indent: 130px; }

.subscribe-component .subscribe-form ul li .input-wrap .btn-vcode{ width: 100px; font-size: 12px;  }
.subscribe-component .subscribe-form ul li .input-wrap .inp.inp-vcode{ width:calc(100% - 110px); }
	
.subscribe-component .subscribe-info img{ display:block; clear: both; width:20%; height:auto; padding:0; margin:5px auto; border: none; box-sizing: border-box; }
.subscribe-component .subscribe-info p{  padding:10px 0; margin: 0 auto; line-height: 150%; font-size: 14px; }
.subscribe-component .subscribe-info p.demo-info{ padding:5px 0; line-height: 120%; font-size: 12px; }

	
}