/*-------------------------------------------------
Author : ksi
Create date : 2019-08-12
-------------------------------------------------*/


#login-wrap {background:url('../../../assets/img/login_bg.jpg') center /cover no-repeat; width:100%; height:100vh; position:relative; min-width:1400px; }
#login-wrap .login-area {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index: 1; width:1200px;}
#login-wrap .login-area::after {content:''; display:block; clear:both;}
#login-wrap .login-area [class^="box-"] {float:left; height:485px; position:relative;}

#login-wrap .login-area .box-left {width:42%; background:url('../../../assets/img/login_bg_left.jpg') center /cover no-repeat; color:#fff; padding:90px 45px; }
#login-wrap .login-area .box-left .title {font-size:62px; margin-bottom:25px;}
#login-wrap .login-area .box-left span {display:block; font-size:18px; opacity:.2;}

#login-wrap .login-area .box-right {width:58%; padding:80px 150px; background:#fff;}
#login-wrap .login-area .input {position: relative; margin-bottom:10px;}
#login-wrap .login-area .input label {position:absolute; top:0; left:0; padding:17px 15px;}
#login-wrap .login-area .input i {font-size:22px; color:#4a6ee0;}
#login-wrap .login-area .input input {width:100%; border:0; border-bottom:2px solid #dbdde4; padding:15px 15px 15px 50px; height:60px;}
#login-wrap .login-area .input input:focus {border-bottom-color:#4a6ee0;}

#login-wrap .login-area .check-area {padding:0 15px; margin:20px 0;}
#login-wrap .login-area .btn {display:block; width:100%; background:#4a6ee0; color:#fff; font-weight:600; border:1px solid #4a6ee0; padding:18px; height:60px; margin-top:30px;}
#login-wrap .login-area .btn:hover {background:#fff; color:#4a6ee0;}
#login-wrap .login-area .joinBtn {display:block; width:100%; background:#FF6A39; color:#fff; font-weight:600; border:1px solid #4a6ee0; padding:18px; height:60px; margin-top:10px;}
#login-wrap .login-area .joinBtn:hover {background:#fff; color:#4a6ee0;}


/* input */
.control {position: relative; display: inline-block; margin-right: 4px;}
.control input[type="radio"], .control input[type="checkbox"] {opacity: 0; position: absolute; top: 0; left: 0; z-index: 0;}
.control label {display: block; min-width:25px; height:25px; cursor: pointer; text-align:center; padding-left:35px; color:#777;}
.control label::before, .control label::after {content: ''; position: absolute; top: 0; left: 0;}
.control label::before {width: 25px; height: 25px; background: #fff; border: 1px solid #ddd; border-radius:50%; -webkit-transition: all .3s ease; transition: all .3s ease;}
.control input[type="radio"]:checked + label::after, .control input[type="checkbox"]:checked + label::after {content:'\e929'; font-family: 'xeicon'; width:25px; height:25px; top: 0; left: 0; color:#fff; background: #4a6ee0; z-index: 1; font-size:25px; line-height:1; border-radius:50%;}
.control input[type="radio"]:focus ~ label::before, .control input[type="checkbox"]:focus ~ label::before {border-color: #3855b2; background:transparent; z-index: 2;}