@font-face {
	font-family: "Ubuntu";
	src: url("/resource/font/Ubuntu-Medium.otf");
}
@font-face {
	font-family: "Titania";
	src: url("/resource/font/Titania-Regular.otf");
}
@font-face {
	font-family: "Arimo";
	src: url("/resource/font/Arimo-Regular.ttf");
	font-weight: 400;
}
@font-face {
	font-family: "Arimo";
	src: url("/resource/font/Arimo-Bold.ttf");
	font-weight: 700;
}

body{

	font-family: "Ubuntu", "Arimo";
	padding: 0px;
	margin: 0px;
	background-color: #191919 !important;
}
a{
	text-decoration: none;
	text-line-through: none;
	color: #646262 ;
}
#a_checked{
	color: #6e3627 ;
}
.topmenu{
	background-color: #191919;
	z-index: 800;
	position: fixed;
	width: 100%;
	display: flex;
	flex-flow:column wrap;
	align-items: center;
	border-bottom: #000 2px solid;

}

.menu{
	/* background-color: aliceblue; */
	width: auto;
	height: 2.7rem;
}

.menu_ul{
	display: none;
	/*list-style: none;*/
	/*padding: 0px;*/
	/*margin: 0px;*/
	/*height: auto;*/
}
.menu_li{
	float: left;
	height: 100%;
	line-height: 2.7rem;
	font-weight:600;
	font-family: "Ubuntu";

}


.li_marge{
	padding-left: 0.7rem;
	padding-right: 0.7rem;

}

.banner{
	height: 300px;
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;

}

.banner_backgrounds {
  position: absolute;
  transform-style: preserve-3d;
  z-index: -1;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
 /* background: linear-gradient(
      to top,
      rgba(33, 10, 10, 1) 0%,
      rgba(33, 10, 10, 0) 33%
    ),
    url(/resource/img/logo_background.png) no-repeat top center fixed; */
 /* -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;*/
  background:url(/resource/img/logo_background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto !important;
}

.characters {
  position: absolute;
  transform-style: preserve-3d;
  z-index: 0;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: url(/resource/img/characters.png) no-repeat top center fixed;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
}

.title_logo {
  position: relative;
  top: 20px;
  left: 0;
  z-index: 100;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  transform: scale(.8);
  transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in; /* Firefox 4 */
  -ms-transition: all 0.1s ease-in; /* IE 9 */
  -webkit-transition: all 0.1s ease-in; /* Chrome, Safari, Opera */
}

.title_logo .logo {
  transform-style: preserve-3d;
  transform: translateZ(50px);
}
.center_content{
	width: 100%;
	height: auto;
	overflow: hidden;
	background-image: url(/resource/img/content_bg.png);
}

.banner_buttom_border{
	  height: 10px;
	  width: 100%;
	  z-index: 200;
	  position: relative;
	  background: url(/resource/img/newTopBar.png) repeat-x top left;
	  margin: 2px;

}
.left_list{
	float: left;
}
.menu_list li a{
	color: white;
	width: 100%;
	display: inline-block;
}

.menu_list{
	width: 250px;
	height: auto;
	overflow: hidden;
	padding: 0px;

}
.menu_list li:hover{
	color: white;
	background-color: transparent;
	cursor:pointer
}
.menu_list li:active{
	background-image: url(/resource/img/bullet_active.png);
}

.list_unit{
	list-style: none;
	width: 250px;
	height: 54px;
	margin-bottom: 8px;
	/* background-color: red; */
	background-image: url(/resource/img/bullet_normal.png);
	background-position: center;
	background-size: cover;
	text-align: center;
	line-height: 50px;
	border-radius: 8px;
	color: #FFFFFF;
	font-family: "Titania";
	font-size: 1.2rem;
}
.active{
	background-image: url(/resource/img/bullet_active.png);
}

.center_buttom_border{
	height: 19px;
	width: 100%;
	z-index: 200;
	position: relative;
	background: url(/resource/img/bottomBorder.png) repeat-x top left;
}
.right_content{
	position: relative;
	height:auto;
	overflow: hidden;
	/* display: flex; */
	/* flex-flow: row; */
	/* align-items: center; */
	padding: 0;
	width: auto;
	margin-left: 250px;
}

.footer{
	color: #fff;
	position: relative;
	z-index: 100;
	float: left;
	height: 360px;
	width: 100%;
	display: flex;
	flex-flow: column wrap;
}

.logo_footer {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  width: 240px;
  height: 94px;
  transform: scale(0.8);
  background: url(/resource/img/logo.png) no-repeat 0 0;
  transition: transform 0.2s ease-in-out;
  -moz-transition: transform 0.2s ease-in-out; /* Firefox 4 */
  -webkit-transition: transform 0.2s ease-in-out; /* Safari and Chrome */
  -ms-transition: transform 0.2s ease-in-out; /* IE 9 */
}

.logo_footer:hover {
  transform: scale(0.78);
  background: transparent url(/resource/img/logo.png) no-repeat 0 -188px;
}

.logo_footer:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: transparent url(/resource/img/logo.png) no-repeat;
  background-position: 0 -188px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out; /* Firefox 4 */
  -webkit-transition: opacity 0.2s ease-in-out; /* Safari and Chrome */
  -ms-transition: opacity 0.2s ease-in-out; /* IE 9 */
}

.logo_footer:hover:after {
  opacity: 1;
}

.footer_h3{
	font-family: "Titania";
	font-size: 18px;
	line-height: 18px;
	color: #fffff;
	text-align: center;
	padding: 0;
}
.copy{
	position: absolute;
	top: 200px;
	left: 0;
	right: 0;
	text-align: center;
	vertical-align: bottom;
}
.copy a{
	font-family: "Titania";
	line-height: 32px;
	height: 32px;
	text-decoration: none;
	vertical-align: center;
	text-align: center;
	padding: 5px;
}
:link{
	color: #ffc000;
}

.right_list_content{
	/*background-image: linear-gradient(#4F4FBF, #333);*/
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid #212529;
	background-color: #2e92009c;
	width: 24%;
	/* min-width: 20%; */
	/* max-width: 14rem; */
	height: auto;
	min-height: 10rem;
	padding: 15px;
	box-sizing: border-box;
	color: white;
	float: left;
	margin: 2px;
	position: relative;
}
.content_img{
	width: 100%;
	height: auto;
	text-align: center;
}


.content_img>img{
	width: 80%;
	height: auto;
	margin: 0;
	/*padding: 0;*/
	/*padding: 10%;*/
	/*background-image: radial-gradient(circle closest-side, #919a9c, #333);*/
	/*padding: 10%;*/
	/*background-image: radial-gradient(circle closest-side, #919a9c, rgba(255,255,255, 0));*/
}

.content_info{
	height: auto ;
	width: 100% ;
	text-align: center;
	margin-top: -1em;
}
span{
	font-size: 12px;
	margin: 0;
}
p{
	width: 80%;
	text-align: center;
	margin: 10px auto 5px;
	padding: 0 10%;
	overflow: hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.content_info p{
	line-height: 1.2em;
	height: 2.4em;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.button{
	margin-top: 10px;
	background: linear-gradient(#33d619, #104d07);
	border: none !important;
	color: white !important;
	border-radius: 10px!important;
	/* margin-bottom: 1px; */
	width: 100%;
	height: 3rem;
	font-size: 18px;
}

.flag{
	width: 100%;
	height: 3rem;
	position: relative;
	left: -15px;

}
.flag > a{
	position: absolute;
	top: 5px;
	right: -20px;
}
label{
	background-image: url(/resource/img/discount_Ribbon.png);
	background-repeat: no-repeat;
	background-size: 50% 90%;
	display: inline-block;
	width: 100%;
	height: 3rem;
	color: #000000;
	text-align: left;
	line-height: 2.7rem;
	padding-left: 10px;
	box-sizing: border-box;
	font-size: 1rem;
	/* add the discount flag  delete the next line*/
	/* display: none; */
}
#how_to_get_invide_code > img{
	width: 1.2rem;
	height: auto;
}
#how_to_get_secret_code > img{
	width: 1.2rem;
	height: auto;
}
.content_base{
	/* padding: 15px; */
	padding-top: 0;
}
.login_view .left_content_p{
	color: #30790e;
}
.login_view #right_content_h2{
	color: #c130fd;
}
.content_base #right_content_h2, .login_view .left_content_p{
	/*text-shadow: 2px 2px 10px #104d07;*/
}

.content_base #right_content_p, .login_view #right_content_h2 {
	/*text-shadow: 2px 2px 10px #cb37ff;*/
}


.button_box{
	height: auto;
	/* padding: 5px;
	 */
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
	overflow: hidden;
	width: 98%;
}
.bundles{

	/* margin-left: 10px; */
	/*background: url('/resource/img/bullet_normal.png');*/
	background: linear-gradient(#33d619, #104d07);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: none !important;
	color: white !important;
	border-radius: 10px!important;
	width: 10rem;
	height: 2.5rem;
	float: left;
	font-size: 14px;
	text-align:center;
	margin-left: 10px;
	font-family: "Ubuntu";
	font-weight: bold;
}

.bundles.current {
	/*background-image: url("/resource/img/bullet_active.png");*/
	background: linear-gradient(#f3a707, #9d6b00);
}

.login{
	margin-left: 10px;
	background: linear-gradient(#33d619, #104d07);
	border: none !important;
	color: white !important;
	border-radius: 10px!important;
	width: 5.5rem;
	height: 2.5rem;
	float: right;
	font-size: 14px;
}
.login_name{
	margin: 14px 0px 0px 10px;
	border: none !important;
	color: #30790e !important;
	border-radius: 10px!important;
	float: left;
	font-size: 14px;

}
.login_out{
	margin-left: 10px;
	background: linear-gradient(#33d619, #104d07);
	border: none !important;
	color: white !important;
	border-radius: 10px!important;
	width: 8%;
	height: 2.5rem;
	float: right;
	font-size: 14px;
	position: relative;
}
.login_out_list{
	background-color: white;
	border-radius: 5px;
	border: 1px solid #646262;
	list-style: none;
	width: 150px;
	position: absolute;
	right: 1rem;
	top: 1.5rem;
	z-index: 100;
	padding: 0;
	text-align: center;
}
.login_out_list > li{
	height: 50px;
	line-height: 50px;
}
.login_out > i{
	background-image: url(/resource/img/next.png);
	/* background-position: ;
	 */
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display:inline-block;
	width: .6rem;
	height: .6rem;
	margin-left: .4rem;
	/* transform: rotate(90deg); */
}
#login_number{
	border-bottom: 1px solid #646262;
}
.button_box_button_border{
	width: 100%;
	background-image: url(/resource/img/newTopBar.png);
	background-repeat: repeat-x;
	height: 10px;
	margin-top: 5px;
}

.login_view{
	/* background-color: red; */
	width: 80%;
	height: auto;
	margin: auto;
	overflow: hidden;

}
.login_box{
	width: 70%;
	height: 100px;
	/* background-color: #4D4D4D; */
	margin: 20px auto 20px;
}
#code_lable{
	background: none;
	color: white;
	font-weight: bolder;
	font: 24px "Ubuntu";
	/* margin-bottom: 10px; */
	padding: 0;
}
.code_lable_input{
	display: block;
	width: 100%;
	height: calc(1.5rem + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	text-align: left;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	box-sizing: border-box;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}
.sub{
	margin: 10px auto 10px;
	background: linear-gradient(#33d619, #104d07);
	border: none !important;
	color: white !important;
	border-radius: 10px!important;
	/* margin-bottom: 1px; */
	display: block;
	width: 70%;
	height: 3rem;
	font-size: 18px;
}
.check_box{
	width: 70%;
	height: 3rem;
	/* background-color: #4D4D4D; */
	margin: 0 auto 0;
}
.login_box_button{
	margin-bottom: 0;
}
/* .check{
	display: inline-block;
	height: 20px;
	height: 20px;

} */
.check_span{
	color: white;
	height: 2rem;
	width: auto;
	display: block;
	/* float: left; */
	margin-left: 3rem;
	padding-top: 1px;
}
#check_lable{
	float: left;
	background: none;
	width: 1rem;
	height: 1rem;
	padding: 0px;
}

.h3_list{
	display: none;
}

#right_content_h2 {
	position: relative;
	left: 0;
	right: 0;
	color: #30790e;
	text-align: center;
	font-family: "Ubuntu";
	font-size: 22px;
	line-height: 32px;
	margin: 15px 0 15px 0;
	/*letter-spacing: 2.5px;*/
}
#right_content_p, .left_content_p
{
	color: #cb37ff;
	font-family: "Ubuntu";
	font-weight: 600;
	font-size: 22px;
	line-height: 32px;
	position: relative;
	text-align: center;
	padding: 0;
	margin: 15px 0;
	width: 100%;
	white-space: pre-line;

/* width: 720px; */
}

.left_content_p {
	text-align: left;
}

#goToWebshopButton {
	text-align: center;
}

#towebshop {
	position: relative;
	cursor: pointer;
	z-index: 150;
	display: block;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font: 18px "Ubuntu";
	line-height: 16px;
	color: #fff;
	width: 350px;
	padding: 20px 20px;
	margin: 10px auto 20px auto;
	height: 98px;
	background: url(/resource/img/button.png);
	border: none;
	text-shadow: 3px 3px 0 #000;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	transition: all 0.15s ease-in;
	-moz-transition: all 0.15s ease-in; /* Firefox 4 */
	-ms-transition: all 0.15s ease-in; /* IE 9 */
	-webkit-transition: all 0.15s ease-in; /* Chrome, Safari, Opera */
}


.mantle,.mantle_loading{
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  align-items: center;
  align-content: center;
  box-sizing: border-box;
  display: none;
}
#login_left{
	display: none;
}
.mantle_content{
  width: 90%;
  max-width: 500px;
  /*height: 90%;*/
	height: auto;
  /* background-color: #343a40 !important; */
  /*background-image: linear-gradient(#2e9200d4, #2e9200d4);*/
  background-color: #34a401e8 !important;
  /* background-image: url(/resource/img/弹出面板.png); */
  border:4px solid #ecece9;
  overflow: hidden;
  margin: 1em auto 0;
  border-radius: 6px;
  padding: 10px 0;
}
.mantle_content_top{
	width: 96%;
	height: auto;
	display:block;
	overflow: hidden;
	border-bottom: 2px solid #ecece9;
	margin: auto;
}
.mantle_content_top_box{
  overflow: hidden;
	position: relative;
}
#close {
  float: right;
  margin-right: .4rem;
  margin-top: .4rem;
  display: block;
}

.mantle_content_top_box #close
{
	position: absolute;
	right: 0;
	top: 0;
}

.close {
	float: right;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 0;
	padding: 0;
	display: block;
	cursor: pointer;
}

.login_view h2 {
	margin-top: -5px !important;
}

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
.mantle_content_top_title p{
	white-space: initial;
}
.mantle_content_top_title{
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
  padding-bottom: 5px;
  color: #ffc000;
  font-size: 3rem;
	font-family: "Titania";
}
.mantle_content_buttom{
  width: 96%;
  height: auto;
  overflow: auto;
  max-height: 80%;
  display:block;
  overflow: hidden;
  /* border-bottom: 2px solid white; */
  margin: auto;
  text-align: center;
}
.buttom_line{
	/*background-color: #008eff;*/
	width: 96%;
	height: 2px;
	position: absolute;
	bottom: 10px;
	left: 2%;
}
.mantle_content_buttom > span{
  display: block;
  font-size: 22px !important;
  color: white;
  /*margin-bottom: 3px;*/
	/*margin-top: -1em;*/
}

.mantle_content_buttom > span > span
{
	font-size: 0.8rem !important;
}

.mantle_content_buttom > span > span > span
{
	color:  #ffc000;
}

.mantle_content_buttom > img{
  width: 60%;
	/*padding-bottom: 5%;*/
  max-width: 400px;
}

.mantle_content_buttom >button{
	background: linear-gradient(#33d619, #104d07);
	width: 200px;
	height: 50px;
	color: white;
	border: none;
	border-radius: 5px;
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-size: 1.4rem;
}
.bottom_a{
	color: #FFC000;
}
.bottom_a:hover {
	color: #007BFF;
}

.check_span{
	font-size: 1.0rem;
	margin-top: 10px;
}
#login_notice_str{
	margin: unset;
	padding: 10px;
	font-size: 24px;
	color: red;
	font-family: "Arimo";
	display: none;
	white-space: pre-line;
	width: 95%;
}
.login_view{
	display: none;
}
.login_out_list{
	display: none;
}

.how_to_des{
	color: white;
	white-space: pre-line;
	text-align: left;
	line-height: 180%;
	padding-top: 1em;
	padding-bottom: 1em;
}


.login_view_info {
	max-width: 90%;
	height: auto;
	display: block; /* This prevents extra space below the image */
	margin: auto;
	border: 2px #ffbb21 solid;
}

img.social {
	width: 50px;
	padding: 3px;
	transform: scale(1);
	transition: transform .2s ease-in-out;
	-moz-transition: transform .2s ease-in-out; /* Firefox 4 */
	-webkit-transition: transform .2s ease-in-out; /* Safari and Chrome */
	-ms-transition: transform .2s ease-in-out; /* IE 9 */
}

img.social:hover {
	transform: scale(0.9) !important;
}

.social_row {
	margin-top: 30px;
}
.social_col {
	width: 100%;
	text-align: center;
}