*,
*::before,
*::after {
  box-sizing: border-box;
}
.user_con{width:94%; height:auto; margin:0 auto; position: relative; display: block; z-index: 99;}
.mt-n1,
.my-n1 {margin-top: -0.25rem !important;}
.user_top{text-align: right; margin-bottom:20px; color:#fff; margin-top:50px;}
.pb-5, .py-5{padding-bottom:3rem; padding-top:3rem;}
h6{font-size:1rem;}
.mt-4, .my-4{margin-top:2rem; margin-left:auto; margin-right:auto;}
.user_con .left_daohang{background-color: rgba(18, 24, 122, 0.8);}
.left_padding{padding-left:0px; padding-right:0px;}
.user_con .right_con{background-color: rgba(255, 255, 255, 0.9); padding:20px 40px; margin-bottom:50px; padding-bottom:50px;}
.user_con .right_con h3{font-size:18px; color:#000; border-bottom:1px solid #d8dadc; margin-bottom:10px; line-height: 40px; text-indent: 1rem;}
.user_con .right_con .right_con_nr{color:#000;}
.user_con .right_con .right_con_nr ul{width:96%; height:auto; margin:0 auto;}
.user_con .right_con .right_con_nr li{line-height: 50px; border-bottom:1px dashed #cfd0d1; overflow: hidden;}
.user_con .right_con .right_con_nr .li_left{float:left; width:15%;}
.user_con .right_con .right_con_nr .li_right{float:left; width:85%;}
.user_con .right_con .right_con_nr .li_right input{width:50%; margin-top:6px;}
.user_con .left_daohang li{font-size:16px; position: relative; text-indent: 3.2rem; border-bottom:1px solid #0e113b; }
.user_con .left_daohang li a{display: block; line-height: 50px; color:#fff;}
.user_con .left_daohang li span{position: absolute; left:-28px; top:22%; font-size:18px;}
.user_con .left_daohang li:last-child{border-bottom:0px;}
.user_con .left_daohang li:hover a{text-decoration: underline;}
.right_con .btn{margin-bottom:30px; margin-top:30px; height:36px; border-radius:6px; margin-left:1rem;}
.right_con .btne{margin-bottom:10px; margin-top:10px; height:36px; border-radius:6px; cursor:pointer; padding:.375rem .75rem;}
.huiyuan_bottom{margin-bottom:50px; width:90%; margin-left:auto; margin-right:auto;}
.user_top h3{position: relative;}
.user_top h3::before{
  content:"";
  position:absolute;
  bottom:-10px;
  right:0.6rem;
  width:30px;
  height:3px;
  border-radius:50px;
  background:#fff;
  transition:all .5s ease-in-out;
  z-index: 999;
}




a {
	cursor: pointer;
  transition: all 200ms linear;
  text-decoration: none;
}
a:hover {
	text-decoration: none;
}
.link {
  color: #fff;
}
.link:hover {
  color: var(--bs-cyan);
  
}
p {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
}

h6 span{
  padding: 0 20px;
  text-transform: uppercase;
  color: #fff;
}
h4{font-size:1.5rem; font-weight: normal; text-align: center;}
.section{
  position: relative;
  width: 100%;
  display: block;
  z-index: 1;
}

.section .btn{
  background-color: var(--bs-cyan);}

.mt-2, .my-2{margin-top:1rem;}


[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
  position: relative;
  display: block;
  text-align: center;
  width: 60px;
  height: 16px;
  border-radius: 8px;
  padding: 0;
  margin: 10px auto;
  cursor: pointer;
  background-color: var(--bs-cyan);
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before{
  position: absolute;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  background-color: var(--bs-primary);
  font-family: 'iconfont';
  content: '\e6ec';
  z-index: 20;
  top: -10px;
  left: -10px;
  line-height: 36px;
  text-align: center;
  font-size: 24px;
  transition: all 0.5s ease;
}
.checkbox:checked + label:before {
  transform: translateX(44px) rotate(-270deg);
}
.mb-0{  margin-left:auto;
  margin-right:auto; text-align: center;}

.card-3d-wrap {
  position: relative;
  width: 480px;
  max-width: 100%;
  height: 500px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  perspective: 800px;
  margin-top: 40px;
  margin-left:auto;
  margin-right:auto;
}
.card-3d-wrapper {
  width: 100%;
  height: 100%;
  position:absolute;    
  top: 0;
  left: 0;  
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 600ms ease-out; 
}
.card-front, .card-back {
  width: 100%;
  height: 100%;
  background-color:var(--bs-primary);
  background-image: url('../images/pat.svg');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 300%;
  position: absolute;
  border-radius: 15px;
  left: 0;
  top: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
}

.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
  transform: rotateY(180deg);
}
.center-wrap{
  position: absolute;
  width: 100%;
  padding: 0 70px;
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 35px) perspective(100px);
  z-index: 20;
  display: block;
}

.center-wrap h4{color:#fff;}
.huiyuan-area .page-title__area{background: none;}

.form-group{ 
  position: relative;
  display: block;
    padding: 0;
    margin-bottom: 15px;
}
.form-group-y{ 
  position: relative;
  display: block;
    padding: 0;
}
.form-style {
  padding: 13px 20px;
  padding-left: 60px;
  height: 48px;
  width: 100%;
  font-weight: 500;
  border-radius: 4px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.5px;
  outline: none;
  color: #333;
  background-color: #fff;
  border: none;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.form-style:focus,
.form-style:active {
  border: none;
  outline: none;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.input-icon {
  position: absolute;
  top: 0;
  left: 18px;
  height: 48px;
  font-size: 24px;
  line-height: 48px;
  text-align: left;
  color: #000;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.form-group input:-ms-input-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input::-moz-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:-moz-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input::-webkit-input-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus:-ms-input-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus::-moz-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus:-moz-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus::-webkit-input-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.form-group-y input:-ms-input-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group-y input::-moz-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group-y input:-moz-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group-y input::-webkit-input-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group-y input:focus:-ms-input-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group-y input:focus::-moz-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group-y input:focus:-moz-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group-y input:focus::-webkit-input-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.text-center{text-align: center;}

.btn{  
  border-radius: 10px;
  height: 44px;
  font-size: 15px;
  text-transform: uppercase;
  -webkit-transition : all 200ms linear;
  transition: all 200ms linear;
  padding: 0 40px;
  letter-spacing: 1px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  text-align: center;
  border: none;
  color: #fff;
}
.btn:active,
.btn:focus{  
  background-color: #438eed;
  color: #fff;
  box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}
.btn:hover{  
  background-color: #438eed;
  color: #fff;
  box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}

.uil-at:before {
  content:'\e6e5';
 }
 .uil-lock-alt:before {
  content:'\e6f8'
 }
 .uil-yzm-alt:before {
  content:'\e6f0'
 }
 .uil-user:before {
  content:'\e628'
 }

 .uil-email:before {
  content:'\e8a0'
 }
 
 [class^=uil-]:before,
 [class*=" uil-"]:before {
  font-family:'iconfont';
  font-style:normal;
  speak:none;
  display:inline-block;
  text-decoration:inherit;
  width:1em;
  margin-right:.2em;
  text-align:center;
  font-variant:normal;
  text-transform:none;
  line-height:1em;
  margin-left:.2em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
 }
.tishi{color: #fff; text-align: left;}
.logo {position: absolute; top: 30px; right: 50px; display: block; z-index: 100; transition: all 250ms linear;}
.logo img {height: 50px;	width: auto;	display: block;}