@charset "utf-8";
/* CSS Document */
body{position:relative;height:100%;min-width:1192px;min-height:100%;display:block;margin:0;padding:0;background:#FFF;}
.wrapper{overflow:hidden;width: 100%;height: 100%;position:relative;min-height:768px;}
.sendBtn{display:inline-block;width:120px;float:right;height:45px;line-height:45px;font-size:18px;text-align:center;background:#cb2027;color:#FFF; border:1px solid #E6E6E0;cursor:pointer;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.sendBtn.disabled{background-color:#CCC;}
.resetBtn{display:none;box-sizing:border-box;width:120px;float:right;height:45px;line-height:45px;font-size:14px;text-align:center;border:1px solid #E6E6E0;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.logoBox .iconList{padding:0 0 20px 30px;float:right;margin-top:20px;}
.logoBox .iconList li{position:relative;display:inline-block;width:140px;}
.logoBox .iconList li b{font-size:16px;color:#333;}
.logoBox .topIcon{position:absolute;width:47px;height:47px;}
.logoBox .topIcon1{background:url(../img/icons.png) no-repeat -40px -100px;}
.logoBox .topIcon2{background:url(../img/icons.png) no-repeat -100px -100px;}
.logoBox .topIcon4{background:url(../img/icons.png) no-repeat -220px -100px;}
.logoBox .topIcon5{background:url(../img/icons.png) no-repeat -280px -100px;}
.logoBox .iconContent{padding-left:50px;height:47px;}
.contentBox{position:relative;zoom:1;width:1192px;margin:0 auto;}
.logoBox{position:relative;height:130px;padding:30px 0;}
/* .logoIcon{position:absolute;left:100px;height:60px;width:200px;top:50%;margin-top:-50px;background:url(../img/kpmLogo.png) no-repeat;} */
.slogan{position:absolute;left:280px;height:40px;width:216px;top:50%;margin-top:-37px;background:url(../img/slogan.png) no-repeat;}
.content{position:relative;height:440px;margin:0;padding-right:50px;box-sizing:border-box;background:url(../img/loginBg.jpg)}
.leftBox{position:relative;float:right;display:inline-block;width:400px;height:100%;padding:30px 58px;background:#FFF;box-sizing:border-box;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;border:#eaeaea solid 1px;border-radius:1px;}
/*.rightBox{position:relative;display:inline-block;width:50%;height:100%;box-sizing:border-box;background:#666;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}*/
/*.content .QRCodeBox{position:absolute;width:150px;height:150px;background:url(../img/QRCodeBig.png) no-repeat;left:50%;margin-left:173px;top:50%;margin-top:-50px;}*/
.title{display:inline-block;font-size:20px;margin-bottom:20px;width:150px;}
.inputArea{position:relative;width:240px;height:25px;padding:10px 40px 10px 0;border:#E6E6E2 1px solid;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin-bottom:30px;}
.warningText{display:none;overflow:hidden;width:280px;line-height:16px;color:#cb2027;}
.userAccount{width:220px;height:25px;padding:0 10px;line-height:25px;font-size:18px;outline:none;}
.userPw{width:220px;height:25px;padding:0 10px;line-height:25px;font-size:18px;outline:none;}
.userAccountIcon{position:absolute;width:16px;height:16px;top:50%;margin-top:-8px;right:10px;background:url(../img/account.png) no-repeat;}
.userPwIcon{position:absolute;width:16px;height:20px;top:50%;margin-top:-10px;right:10px;background:url(../img/account.png) no-repeat;background-position:-16px 0;}
.codeInputArea{position:relative;display:inline-block;width:110px;height:25px;padding:10px 0px;border:#E6E6E2 1px solid;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin-bottom:30px;}
.captcha{width:80px;height:25px;padding:0 10px;line-height:25px;font-size:18px;outline:none;}
.captchaPic{display:inline-block;width:130px;height:45px;}
.smsPw{width:80px;height:25px;padding:0 10px;line-height:25px;font-size:18px;outline:none;}
.btn{display:block;width:282px;height:25px;line-height:25px;background:#cb2027;padding:10px 0;text-align:center;color:#FFF;font-size:18px;cursor:pointer;}
.btn:hover,.btn:active{color:#FFF;}
.forgetPw{color:#666;float:right;padding-top:5px;cursor:pointer;}
.rightMsg{width:120px;position:absolute;left:80px;top:60px;border-right:#FFF 2px solid;color:#FFF;font-size:20px;}
.changeModeBtn{display:inline-block;height:30px;line-height:30px;cursor:pointer;float:right;font-size:16px;}
.changeModeBtn:hover{color:#cb2027;}
#smsItem{display:none;}
#identifyingCodeItem,#smsItem{position:relative;}
#identifyingCodeItem{display:none;}
#loginBtn,#loginBtn:hover{color:#FFF;-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
#registerBtn,#registerBtn:hover{color:#FFF;}
#registerBtn.loading{background-color:#fff;color:#cb2027;border:#cb2027 1px solid;cursor:default;background-image:url(../img/loadingM.gif);background-repeat:no-repeat;background-position:70px 5px;}
#registerBtn.disabled{background-color:#ccc;}

.successMsgBox{position:relative;font-size:26px;margin:50px auto;width:800px;}
.successMsg{padding-left:50px;color:#0C6;background:url(../img/successCheckIcon.png) no-repeat 0 4px;}
.emailLoginBox{background:#FFC;margin-top:30px;padding:30px 50px;}
.sentOutAgainBox{font-size:16px;margin-top:30px;}
.sentOutAgain,.sentOutAgain:hover{cursor:pointer;color:#3CF;}
.sentOutMsg{display:none;color:#cb2027;padding-left:20px;}

.failureMsg{padding-left:50px;color:#cb2027;}

@media screen and (max-width: 768px) {
    body {
        min-width: 100% !important;
        overflow-x: hidden;
    }
    .contentBox, .wrapper, .logoBox, .content, .leftBox {
        width: 100% !important;
        min-width: 0 !important;
        float: none;
        padding: 0 10px;
        height: auto !important;
    }
    .logoBox .iconList {
        float: none;
        padding: 0;
        text-align: center;
    }
    .logoBox .iconList li {
        display: inline-block;
        margin: 5px;
    }
    .slogan {
        position: relative;
        left: auto;
        top: auto;
        margin: 10px auto;
        display: block;
    }
    .leftBox {
        width: 100% !important;
        padding: 20px;
    }
    .content {
        background-size: cover;
        padding: 0;
    }
    .inputArea, .btn {
        width: 100%;
        box-sizing: border-box;
    }
    .userAccount, .userPw {
        width: 80%;
    }
}