/****************************************************************
 *																*
 * 						      							*
 *                        							*
 *       		  努力创建完善、持续更新插件以及模板			*
 * 																*
****************************************************************/
body{background:#fff}
* {
  margin: 0px auto;
  padding: 0px;
  text-align: center;

}
body,p,li,b,strong,a,input,h1,h2,h3,h4,span,*{font-family:PingFang SC,Lantinghei SC,Helvetica Neue,Helvetica,Arial,Microsoft YaHei,Microsoft YaHei,"微软雅黑",STHeitiSC-Light,simsun,"宋体",WenQuanYi Zen Hei,WenQuanYi Micro Hei,"sans-serif"!important;}
a {text-decoration: none!important;}

.cotn_principal {
  position: absolute;
  width: 100%;
  height: 100%;
background: #aac4bc; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #aac4bc 0%, #eca8a8 100%, #eed5a9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #aac4bc 0%,#eca8a8 100%,#eed5a9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #aac4bc 0%,#eca8a8 100%,#eed5a9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfd8dc', endColorstr='#b0bec5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.overlay {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
    z-index: 100;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));

}
/* 自定义淡入淡出效果，修改过渡时间 */
.carousel-item {
  transition: opacity 1s ease-in-out;  /* 设置过渡动画 */
}

.carousel-fade .carousel-item-next, 
.carousel-fade .carousel-item-prev, 
.carousel-fade .carousel-item.active {
  opacity: 0;
}

.carousel-fade .carousel-item-next.carousel-item-left, 
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
  opacity: 1;
}
.field-wrapper svg{
    position: absolute;
    top: 35px;
    color: #1b55e2;
    fill: rgba(27, 85, 226, 0.23921568627450981);
        vertical-align: middle;
}
.field-wrapper img{
position: absolute;
    top: 33px;
    vertical-align: middle;
    width: 26px;
    margin-left: 2px;
}

.login_logo{width:100%}
.login_logo_img{
    width: 100%;
    display: flex;
flex-direction: column;
align-items: center;
}
.login_logo_img span{
width:80%;
    padding: 20px;
    margin-top: 20px;
    background-color: rgba(177, 158, 170, 0.5);
    border-radius: 10px;
}
.login_logo_img span p{
    text-align: left;
}
.login_logo_2
{width: 80%;
}
.field-wrapper.input {
    position: relative;
    padding: 20px 0px 0px 0px;
    border-bottom: none;
}
.field-wrappersw{
    text-align: left;
    padding: 5px 30px 0px 30px;
    color: #ddd;
}
.field-wrapper input {
    display: inline-block;
    vertical-align: middle;
    border-radius: 0;
    min-width: 50px;
    max-width: 635px;
    width: 100%;
    min-height: 36px;
    background-color: #ffffff;
    border: none;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    color: #3b3f5c;
    font-weight: 700;
    font-size: 16px;
    border-bottom: 1px solid #e0e6ed;
    padding: 10px 0 10px 35px;
    }
.cont_centrar {
  position: absolute;
  float: left;
  width: 100%;

    top: 40%;
    transform: translateY(-40%);
  z-index: 10001;

}

.cont_login {
  position: relative;
  width: 640px;
left: 50%;
margin-left: -320px;

}

.cont_back_info {
position: relative;
  float: left;
  width: 640px;
  height: 280px;
overflow: hidden;
background-color: rgb(255, 255, 255, 0.3);
  margin-top: 100px;
box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.7);
}

.cont_forms {
  position: absolute;
  overflow: hidden;
  top:100px;
left: 0px;
  width: 320px;
  height: 280px;
  background-color: #eee;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}

.cont_forms_active_login {
box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.7);
  height: 420px;
top:25px;
left: 0px;
  -webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;

}

.cont_forms_active_sign_up {
box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.5);
  height: 420px;
top:25px;
left:320px;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}

.cont_img_back_grey {
  position: absolute;
  width: 950px;
top:-80px;
  left: -116px;
}

.cont_img_back_grey > img {
  width: 100%;
 -webkit-filter: grayscale(100%);     filter: grayscale(100%);
opacity: 0.4;
filter:alpha(opacity=40);
animation-name: animar_fondo;
  animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;

}

.cont_img_back_ {
  position: absolute;
  width: 950px;
top:-80px;
  left: -116px;
}

.cont_img_back_ > img {
  width: 100%;
opacity: 0.5;
filter:alpha(opacity=50);
animation-name: animar_fondo;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}

.cont_forms_active_login > .cont_img_back_ {
top:0px;
  -webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}

.cont_forms_active_sign_up > .cont_img_back_ {
top:0px;
left: -435px;
  -webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}


.cont_info_log_sign_up {
position: absolute;
  width: 640px;
  height: 280px;
  top: 100px;
z-index: 1;
}

.col_md_login {
  position: relative;
  float: left;
  width: 50%;
  height:280px;
}

.col_md_login > h2 {
  font-weight: 400;
margin-top: 70px;
    color: #757575;
}

.col_md_login > p {
 font-weight: 400;
margin-top: 15px;
width: 80%;
    color: #37474F;
}
.loginerr{
        position: absolute;
    top: 100px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    font-size: 15px;
    background: rgb(225, 214, 214, 0.3);
    color: #802929;
    padding: 4px;
}
.btn_login {
background-color: rgb(19,209,120,0.8);
  border: none;
  padding: 10px;
width: 200px;
border-radius:3px;
box-shadow: 1px 5px 20px -5px rgba(0,0,0,0.4);
 color: #fff !important;
margin-top: 10px;
cursor: pointer;
}
.switch.s-primary .slider:before {
    background-color: #4B4B4B;
}
.switch.s-primary input:checked + .slider {
    background-color: #4B4B4B!important;
}
.col_md_sign_up {
  position: relative;
  float: left;
  width: 50%;
  height:280px;
}

.cont_ba_opcitiy > h2 {
  font-weight: 400;
  color: #fff;
}

.cont_ba_opcitiy > p {
 font-weight: 400;
margin-top: 15px;
 color: #fff;
}

.cont_in_opcitiy > h2 {
  font-weight: 400;
  color: #fff;
}

.cont_in_opcitiy > p {
 font-weight: 400;
margin-top: 15px;
 color: #fff;
}
/* ----------------------------------
background text
------------------------------------
 */
.cont_ba_opcitiy,.cont_in_opcitiy  {
position: relative;
    background-color: rgba(187, 168, 170, 0);
    width: 80%;
    border-radius: 20px;
    padding: 20px 0px;
    opacity: 0.8;
    filter: alpha(opacity = 80);
    top: 50%;
    transform: translateY(-50%);
}

.btn_sign_up {
background-color: #f44336;
  border: none;
  padding: 10px;
width: 200px;
border-radius:3px;
box-shadow: 1px 5px 20px -5px rgba(0,0,0,0.4);
  color: #fff;
margin-top: 10px;
cursor: pointer;
transform: translateZ(0); position: relative;
transition-property: color; transition-duration: 0.3s;
}

.btn_sign_up:before {
       content: "";position: absolute; z-index: -1; top: 0;
       left: 0; right: 0; bottom: 0;  background-image: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%);
       color: white;
       transform-origin: 0 50%;transform: scaleX(0);
       transition: transform 0.3s ease-out;
   }

.btn_sign_up:hover, .rbtn_sign_up:focus, .btn_sign_up:active {
       color: white;
       border-radius: 3px;
   }
.btn_sign_up:hover:before, .btn_sign_up:focus:before, .btn_sign_up:active:before {
       transform: scaleX(1);
       color: white;
       border-radius: 3px;
   }

.cont_forms_active_sign_up {
z-index: 2;
}


@-webkit-keyframes animar_fondo {
  from { -webkit-transform: scale(1) translate(0px);
-moz-transform: scale(1) translate(0px);
-ms-transform: scale(1) translate(0px);
-o-transform: scale(1) translate(0px);
transform: scale(1) translate(0px); }
  to { -webkit-transform: scale(1.5) translate(50px);
-moz-transform: scale(1.5) translate(50px);
-ms-transform: scale(1.5) translate(50px);
-o-transform: scale(1.5) translate(50px);
transform: scale(1.5) translate(50px); }
}
@-o-keyframes identifier {
  from { -webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
  to { -webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5); }

}
@-moz-keyframes identifier {
  from { -webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
  to { -webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5); }

}
@keyframes identifier {
  from { -webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
  to { -webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5); }
}
.cont_form_login {
  position: absolute;
  opacity: 0;
display: none;
  width: 320px;
  -webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
}

.cont_forms_active_login {
z-index: 2;
}
.cont_forms_active_login  >.cont_form_login {
}

.cont_form_sign_up {
  position: absolute;
  width: 320px;
float: left;
  opacity: 0;
display: none;
  -webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
}


.cont_form_sign_up  input {
text-align: left;
  padding: 15px 5px;
margin-left: 10px;
margin-top: 20px;
  width: 260px;
border: none;
    color: #757575;
    border-radius: 8px;
    text-indent: 10px;
}

.cont_form_sign_up > h2 {
margin-top: 90px;
font-weight: 400;
  color: #0260fb;
}


.cont_form_login  input {
  padding: 15px 5px;
  width: 270px;
border: none;
text-align: left;
  color: #757575;
  border-radius: 5px;
  text-indent: 30px;
}

.cont_form_login  input::-webkit-input-placeholder {
  color: #d3d3d3;
  font-size: 14px;
}

.cont_form_login > h2 {
margin-top: 90px;
font-weight: 400;
color: #fff;
}
.cont_form_login > a,.cont_form_sign_up > a  {
  color: #757575;
    position: relative;
    float: left;
    margin: 10px;
margin-left: 30px;
}

@media (max-width: 560px) {
	.cont_forms_active_login{left:20%!important;
	top:22px;
	    width: 45%!important;}
.cont_forms_active_sign_up {

left:39%!important;
    width: 45%!important;
	top:22px;
}

.cont_info_log_sign_up {

    left: 7%;
	    width: 90%!important;
}


.cont_login {

  width: 160%!important;


}
.cont_form_login {width:100%!important}
.cont_form_sign_up {width:100%!important}
.cont_form_login input{   margin-left: 3px!important;

    width: 80%!important;}


    .cont_ba_opcitiy {

    width: 65%!important;
    margin-left: 32%!important;}

    .cont_in_opcitiy {

    width: 65%!important;
    margin-left: 10%!important;}


    .btn_login,.btn_sign_up {
  width: 120px!important;color: white;}

.cont_centrar { overflow: hidden;
    width: 100%;
    height: calc(100vh);    top: calc(55vh);
    transform: translateY(-40%);}
.footer{
/*position:absolute;bottom:-25px;*/}
}

.cont_form_sign_up input{  margin-left: 3px!important;

    width: 80%!important;}
.btn_login,.btn_sign_up{font-size:17px!important;font-weight:500!important;

transform: translateZ(0); position: relative;
transition-property: color; transition-duration: 0.3s;
}

.btn_login:before {
       content: "";position: absolute; z-index: -1; top: 0;
       left: 0; right: 0; bottom: 0; background-image: linear-gradient(to right, #13D178 0%,  #AAD782 49%, #FF8AF6 100%);
        color: #fff !important;
       transform-origin: 0 50%;transform: scaleX(0);
       transition: transform 0.3s ease-out;
   }

.btn_login,.btn_login:focus,.btn_login:active {

       color: white;
       border-radius: 3px;
   }
.btn_login:hover:before, .btn_login:focus:before, .btn_login:active:before {
       transform: scaleX(1);
       color: white;
       border-radius: 3px;
   }



.wbtn-reg{color: #d84700!important;
    line-height: 39px;
    font-size: 15px;
    font-weight: 600;
  text-decoration: none;}



.wbtn-reg:hover{  text-decoration: none;color: #702602!important;transition: all .3s ease-in-out;margin-left: 7px}