﻿@charset "UTF-8";
.home_banner{ display: flex; justify-content: space-around; align-items: center; position: relative; height: 370px; padding-top: 80px; background-color: #BACEE6; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 0;}
.home_banner .introduce{ max-width: 50%; padding: 30px; color: #FFFFFF; border-radius: 10px;}
.home_banner .introduce .title{ position: relative;  padding: 10px 30px; font-size: 36px; background-color: rgba(0,0,0,0.5); text-align: center; border-radius: 4px;}
.home_banner .introduce .tl{ position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border: 3px solid #FFFFFF; border-right: 0; border-bottom: 0; border-radius: 4px;}
.home_banner .introduce .rb{ position: absolute; right: 5px; bottom: 5px; width: 20px; height: 20px; border: 3px solid #FFFFFF; border-top: 0; border-left: 0; border-radius: 4px;}
.home_banner .introduce .text{ display: inline-block; margin-top: 30px; padding: 10px 20px; font-size: 20px; font-style: italic; background-color: rgba(0,0,0,0.5); font-weight: bold; border-radius: 4px;}
.home_banner .introduce .newkey button.a{ width: 210px; height: 50px; margin-top: 30px; font-size: 16px;}
.home_banner .introduce .newkey button.b{ width: 130px; height: 50px; margin-top: 30px; font-size: 16px; color: #FFFFFF; border: 2px solid #FFFFFF; background-color: rgba(0,0,0,0.5);}
.home_banner .introduce .newkey button.c{ width: 130px; height: 50px; margin-top: 30px; font-size: 16px;}
.home_banner .introduce .count{ margin-left: 20px;}
.home_banner .introduce .big{ font-size:36px;}
.home_banner.max{ height: 100%; padding-top: 0;}

.footer_blank{ position: absolute; left: 0; right: 0; bottom: 0;}

.home_login{ width: 300px; padding: 20px 30px; color: #FFFFFF; background-color: rgba(0,0,0,0.5); border-radius: 10px;}
.home_login .title{ font-size: 14px; color: #FFFFFF;}
	.home_login input {
		display: block;
		width: 100%;
		height: 38px;
		line-height: 38px;
		margin-top: 10px;
		border-radius: 2px;
	}
/*.home_login input{ display: block; width: calc(100% - 12px); height: 38px; line-height: 38px; margin-top: 10px; border-radius: 2px;}*/
.home_login button{ display: block; width: 100%; height: 40px; margin-top: 10px;}
.home_login .more{ display: flex; justify-content: space-between; margin-top: 10px;}
.home_login .hint{ flex-grow: 0; font-size: 14px; color: #EE5555; word-break: break-all; cursor: pointer;}
.home_login .forgot{ flex-grow: 0; font-size: 14px; color: #FFFFFF; cursor: pointer;}
.home_login .forgot:hover{ color: #35D474;}
.home_login .other .title{ position: relative; margin-top: 10px; font-size: 14px; text-align: center;}
.home_login .other{ margin-top: 10px;}
.home_login .other .title::before{ content: ''; position: absolute; top: 9px; left: 0; width: 25%; height: 2px; background-color: #FFFFFF;}
.home_login .other .title::after{ content: ''; position: absolute; top: 9px; right: 0; width: 25%; height: 2px; background-color: #FFFFFF;}
.home_login .other dl{ display: flex; margin-top: 10px;}
.home_login .other dd{ flex: 1; text-align: center;}
.home_login .other dd i{ width: 30px; height: 30px; line-height: 30px; font-size: 18px; color: #FFFFFF; background-color: red; border-radius: 8px; cursor: pointer;}
.home_login .other dd i.userpwd{ background-color: #FF6C24;}
.home_login .other dd i.phone{ background-color: #00A0EA;}
.home_login .other dd i.key{ background-color: #FF6C24;}
.home_login .other dd i.wechat{ background-color: #08c406;}
.home_login .other dd span{ display: block; margin-top: 5px; font-size: 12px; color: #FFFFFF;}
.home_login .logincon{ display: none;}
.home_login .logincon.show{ display: block;}
.home_login .logintab{ display: flex; margin: 0 auto; margin-top: 10px; text-align: center;}
.home_login .logintab>dd{ flex: 1; padding: 10px 0; font-size: 14px; color: #FFFFFF; border-bottom: 5px solid transparent; cursor: pointer;}
.home_login .logintab>dd:hover{ color: #35D474;}
.home_login .logintab>dd.active{ color: #35D474; border-color: #35D474;}

#homewechatcode{ width: 180px; height: 180px; margin: 10px auto; background-color: #FFFFFF; overflow: hidden;}

.home_login .spinner {
	margin-top: 20px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
.home_login .spinner > div {
  background-color: #35D474;
  height: 100%;
  width: 6px; margin: 0 1px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.home_login .spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.home_login .spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.home_login .spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.home_login .spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


.home_welcome{ padding: 40px; color: #FFFFFF; background-color: rgba(0,0,0,0.5); border-radius: 10px;}
.home_welcome .avater canvas{ width: 100px;}
.home_welcome .avater{ width: 100px; height: 100px; margin: 5px auto; background-color: #FFFFFF; box-shadow: 0 0 0 5px rgba(255,255,255,0.3); overflow: hidden; border-radius: 50%;}
.home_welcome .avater img{ width: 100%; height: 100%;}
.home_welcome .welcome{ margin-top: 20px; text-align: center;}
.home_welcome button{ display: block; height: 40px; margin: 0 auto; margin-top: 20px; padding: 0 30px;}

.home_part{ width: 1200px; max-width: 90%; margin: 20px auto; background-color: #FFFFFF; overflow: hidden; box-shadow: 0 0 2px #6C8098;}
.home_title{ position: relative; padding: 20px 25px; font-size: 18px; color: #35d474; font-weight: bold; border-bottom: 1px solid #bacee6;}
.home_title::before{ content: ''; position: absolute; top: 20px; left: 10px; bottom: 20px; width: 5px; background-color: #35d474;}

.home_list{ display: flex; flex-wrap: wrap; margin-top: -1px; margin-right: -1px; overflow: visible;}
.home_list li{ flex: 1; flex-basis: 200px; border-top: 1px solid #bacee6; border-right:  1px solid #bacee6; background-color: #FFFFFF;}
.home_list li:hover{ border-color: transparent; box-shadow: 0 0 5px #6c8098;
	transform: translateY(-5px);
}
.home_list li.blank{ border-color: transparent; box-shadow: none;
	transform: none;
}
.home_list .nail{ position: relative; height: 180px; cursor: pointer;}
.home_list a{ display: block;}
.home_list .nail img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto;}
.home_list .title{ height: 40px; line-height: 40px; font-size: 14px; text-align: center; cursor: pointer;}
.home_list .title:hover{ text-decoration: underline;}
.home_list .price{ height: 40px; line-height: 40px; font-size: 14px; color: #F05960; text-align: center; font-weight: bold;}
.home_list .bot{ height: 40px; line-height: 40px; font-size: 14px; color: #6c8098; background-color: #bacee6; text-align: center;}

.home_commodity{ height: 300px;}

.home_service li{ padding: 20px 0; cursor: pointer;}
.home_service img{ display: block; margin: 0 auto;}
.home_service .title{ display: block; margin-top: 10px; font-size: 24px; line-height: 40px; color: #162336; text-align: center;}
.home_service .intro{ display: block; margin: 0 40px; margin-top: 10px; font-size: 14px; color: #6C8098;}

.notice_home{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: rgba(0,0,0,0.5); z-index: 1;}
.notice_home img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 400px; min-height: 400px; max-width: 100%; max-height: 100%; background-color: #FFFFFF;}
.notice_home .close{ position: absolute; left: 0; right: 0; bottom: 0; margin: auto; padding: 10px; background-color: rgba(0,0,0,0.5);}
.notice_home .close button{ width: 200px; height: 40px; margin: 0 auto;}

.datangnewshref{
	position: fixed;
	top: 11%;
	left: 40%;
	right: 7%;
	bottom: 82%;
}
.enter_jxpay{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #FFFFFF;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
}
.enter_jxpay .title{
	padding: 60px;
	font-size: 48px;
	background-color: rgba(255,255,255,0.5);
	text-align: center;
	font-weight: bold;
}
.enter_jxpay .box{
	display: flex;
}
.enter_jxpay .box>dd{
	position: relative;
	flex: 1;
	height: 300px;
	line-height: 60px;
	margin: 100px;
	padding: 40px;
	font-size: 36px;
	color: #FFFFFF;
	border-radius: 10px;
	box-shadow: none;
	cursor: pointer;
}
.enter_jxpay .box>dd:hover{
	transform: translateY(-5px);
	box-shadow: 0 5px 5px rgba(255,255,255,0.5);
}
.enter_jxpay .box i{
	position: absolute;
	right: 40px;
	bottom: 40px;
	width: 40px;
	height: 40px;
	padding: 20px;
	background-color: #FFFFFF;
	border-radius: 50%;
}
.enter_jxpay .c_b{
	background-color: #00A9A2;
}
.enter_jxpay .c_b i{
	color: #00A9A2;
}
.enter_jxpay .c_g{
	background-color: #3399FF;
}
.enter_jxpay .c_g i{
	color: #3399FF;
}
