|
|
@@ -0,0 +1,248 @@
|
|
|
+/*common*/
|
|
|
+* {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ outline: none;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: "微软雅黑";
|
|
|
+}
|
|
|
+html, body {
|
|
|
+ height: 100%;
|
|
|
+ color: #1B2C5F;
|
|
|
+ overflow-x: hidden;
|
|
|
+}
|
|
|
+body {
|
|
|
+ background: url(../images/bg.jpg) no-repeat 0 30% #F0F3FF fixed;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+a {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+input {
|
|
|
+ font-family: "微软雅黑";
|
|
|
+ outline: none;
|
|
|
+ vertical-align: top;
|
|
|
+}
|
|
|
+.ellipsis {
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+::-webkit-input-placeholder {
|
|
|
+ color: #B4B7C3;
|
|
|
+}
|
|
|
+:-moz-placeholder {
|
|
|
+ color: #B4B7C3;
|
|
|
+}
|
|
|
+::-moz-placeholder {
|
|
|
+ color: #B4B7C3;
|
|
|
+}
|
|
|
+:-ms-input-placeholder {
|
|
|
+ color: #B4B7C3;
|
|
|
+}
|
|
|
+.cl:after {
|
|
|
+ content: ".";
|
|
|
+ display: block;
|
|
|
+ height: 0;
|
|
|
+ clear: both;
|
|
|
+ visibility: hidden;
|
|
|
+}
|
|
|
+.cl {
|
|
|
+ zoom: 1;
|
|
|
+}
|
|
|
+/*flexbox*/
|
|
|
+.flexbox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -ms-flex-pack: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.cont {
|
|
|
+ width: 820px;
|
|
|
+ height: 548px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: rgba(255,255,255,.75);
|
|
|
+ -moz-box-shadow: 0px 15px 15px 0px rgba(203,205,211,0.3);
|
|
|
+ -webkit-box-shadow: 0px 15px 15px 0px rgba(203,205,211,0.3);
|
|
|
+ box-shadow: 0px 15px 15px 0px rgba(203,205,211,0.3);
|
|
|
+ padding-left: 220px;
|
|
|
+}
|
|
|
+.cont .sd {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ width: 220px;
|
|
|
+ height: 548px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left: -220px;
|
|
|
+ padding: 38px;
|
|
|
+ background: #142862 url(../images/openbg.png) no-repeat 0 0;
|
|
|
+}
|
|
|
+.cont .sd .logo img {
|
|
|
+ width: 130px;
|
|
|
+}
|
|
|
+.cont .sd p {
|
|
|
+ position: absolute;
|
|
|
+ left: 38px;
|
|
|
+ bottom: 38px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-size: 700;
|
|
|
+ color: rgba(255,255,255,.50);
|
|
|
+}
|
|
|
+.cont .mn {
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ height: 540px;
|
|
|
+ padding: 80px 130px;
|
|
|
+}
|
|
|
+/*optionbox*/
|
|
|
+.optionbox {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.optionbox h1 {
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #1B2C5F;
|
|
|
+}
|
|
|
+.optionbox form {
|
|
|
+ padding-top: 20px;
|
|
|
+}
|
|
|
+.option {
|
|
|
+ position: relative;
|
|
|
+ width: 340px;
|
|
|
+ height: 48px;
|
|
|
+ border: 1px solid #E2E5EB;
|
|
|
+ -moz-border-radius: 8px;
|
|
|
+ -webkit-border-radius: 8px;
|
|
|
+ border-radius: 8px;
|
|
|
+ -webkit-box-shadow: none;
|
|
|
+ box-shadow: none;
|
|
|
+ transition: none!important;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.option:hover {
|
|
|
+ border: 1px solid #E2E5EB;
|
|
|
+ -webkit-box-shadow: 0px 10px 15px 0px rgba(203,205,211,.1);
|
|
|
+ -moz-box-shadow: 0px 10px 15px 0px rgba(203,205,211,.1);
|
|
|
+ box-shadow: 0px 10px 15px 0px rgba(203,205,211,.1);
|
|
|
+}
|
|
|
+.option select {
|
|
|
+ border: 0;
|
|
|
+ outline: 0;
|
|
|
+ background: none;
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ color: #1B2C5F;
|
|
|
+ font-weight: bold;
|
|
|
+ appearance: none;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ -moz-appearance: none;
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+.option:after {
|
|
|
+ content: "";
|
|
|
+ width: 29px;
|
|
|
+ height: 48px;
|
|
|
+ background: url(../images/arrow-down.png) no-repeat 0 0;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+/*tips*/
|
|
|
+.optionbox .tips {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 94px;
|
|
|
+ line-height: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.optionbox .tips em.error {
|
|
|
+ font-style: normal;
|
|
|
+ color: #FF5F5F;
|
|
|
+ padding-left: 28px;
|
|
|
+ background: url(../images/error.png) no-repeat 0 50%;
|
|
|
+}
|
|
|
+/*btn*/
|
|
|
+ .open-btn {
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 72px;
|
|
|
+}
|
|
|
+.open-btn a {
|
|
|
+ display: inline-block;
|
|
|
+ width: 160px;
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
+ overflow: hidden;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #FFF;
|
|
|
+ border: 0;
|
|
|
+ background: #66ADE8;
|
|
|
+ background-image:-webkit-linear-gradient(to right, #88D3FC, #66ADE8);
|
|
|
+ background-image:linear-gradient(to right, #88D3FC, #66ADE8);
|
|
|
+ -moz-border-radius: 30px;
|
|
|
+ -webkit-border-radius: 30px;
|
|
|
+ border-radius: 30px;
|
|
|
+}
|
|
|
+.optionbox .open-btn a{
|
|
|
+ width: 120px;
|
|
|
+}
|
|
|
+.open-btn a.grey {
|
|
|
+ background: #E2E5EC;
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+.open-btn a.opacity:hover {
|
|
|
+ -moz-box-shadow: 0px 10px 20px 0px rgba(119,192,242,.4);
|
|
|
+ -webkit-box-shadow: 0px 10px 20px 0px rgba(119,192,242,.4);
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(119,192,242,.4);
|
|
|
+}
|
|
|
+.open-btn a.grey:hover {
|
|
|
+ background: #D6DAE4;
|
|
|
+}
|
|
|
+
|
|
|
+/*info*/
|
|
|
+.info {
|
|
|
+ padding-top: 24px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.info h2{
|
|
|
+ padding-top: 30px;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+.info p{
|
|
|
+ padding-top: 10px;
|
|
|
+ color: #B2B7C3;
|
|
|
+}
|
|
|
+.info .open-btn {
|
|
|
+ padding-top: 120px;
|
|
|
+}
|
|
|
+.info .open-btn a {
|
|
|
+ width: 120px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
