@charset "utf-8";

body { background:#ececec;}        
#login_wrap { position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:1280px; height:800px; background:#999; border-radius: 12px;}
.company_box { float:left; width: 640px; height:100%; background: #fff; border-radius: 12px 0 0 12px; }
.company_box > img { display:block; margin:370px auto 0;}
.company_box .f_con { text-align: center; margin-top:262px; }
.company_box .f_con ul { display:inline-block; height:20px; }
.company_box .f_con ul li { float:left; font-size:12px; margin-right:8px;}
.login_box { float:left; width:640px; height:800px; background: url(../../img/login_bg.png) center center no-repeat;}
.login_box h4 { text-align: center; text-transform: uppercase; font-size:42px; margin:220px 0 40px; color:#fff; font-family: 'montserrat'; font-style: italic; font-weight: 500;}
.login_box .login_con { width:408px; margin:0 auto; }
.login_box dl { margin-bottom: 20px; background: #fff; width:408px; height:60px; border-radius: 8px;}
.login_box dl:nth-child(2) { margin-bottom: 14px;}
.login_box dl dt { float:left; position:relative; text-align:left; padding:10px 0 0 33px; width:18%; line-height: 40px; box-sizing: border-box; font-size:16px; font-weight:bold; color:#16afb7; }
.login_box dl dd { float:right; width:82%; height:60px; }
.login_box dl dd input { border:none; width:95%; height:60px; }
.login_box .memory_id {float:right;}
.login_box .memory_id input { width:18px; height:18px; margin-top: 4px;}
.login_box .memory_id label { color: #fff; cursor: pointer;}
.login_box button { width:408px; height:60px; border:3px solid #fff; background-color: rgba( 255, 255, 255, 0 ); color:#fff; border-radius: 8px; margin-top:28px; font-size:16px; }
.login_box button:hover { background-color: #fff; color:#16afb7; font-weight:700; cursor: pointer;}
.login_box .f_mobile { display: none; margin-top:10%;}

@media all and (max-width:1280px){
    body { background:#fff;}          
    #login_wrap { width:100%; height:100%; top:15%; background: #fff;}
    .company_box { float:none; width:100%; height:auto;}
    .company_box > img { display:block; margin:18% auto 7%;}
    .company_box .f_con { display:none; margin-top:5%;}
    .login_box { float:none; width:100%; height:auto; background: url(../../img/login_bg.png) center/cover no-repeat; padding:20% 0 48%; border-radius: 20px 20px 0 0;}
    .login_box h4 { margin:5% 0 3%;}
    .login_box .login_con { width:50%; margin:0 auto; }
    .login_box dl { margin-bottom: 10%; width:100%;}
    .login_box button { width:100%;}
    .login_box .f_mobile { display: block; text-align: center; margin-top: 15%;}
    .login_box .f_mobile ul li { color:#fff; font-size:16px;}
}
@media all and (max-width:640px){
    #login_wrap { width:100%; height:100%; top:15%; background: #fff;}
    .company_box > img {  max-width:30%; }
    .login_box h4 { margin:5% 0 5%;}
    .login_box .login_con { width:65%;}           
    .login_box dl { height:60px;}
    .login_box dl dt { width:23%; }
    .login_box dl dd { width:77%; }
    .login_box .memory_id { margin:7% 0 1%;}
    .login_box .memory_id label { font-size:16px;}
    .login_box .f_mobile { margin-top: 20%;}
    .login_box .f_mobile ul li { color:#fff; font-size:14px;}
}
@media all and (max-width:480px){
    #login_wrap { width:100%; height:100%; top:15%; background: #fff;}
    .login_box { padding:15% 0 30%;}
    .login_box h4 { font-size:36px;}
    .login_box dl { height:50px;}
    .login_box dl dt { line-height: 30px;}
    .login_box dl dd { height:50px; }
    .login_box dl dd input { height:50px; }
    .login_box .login_con { width:75%;}
    .login_box .memory_id label { font-size:14px;}
}