@charset "utf-8";

/* common.css 에서 이동 */
#loginBg{overflow:visible; width:100%; height:100%; }
#overlayLogin{width:100%; height:100%; background:#333740; background:url("/images/portal/common/loginBg.jpg"); background-repeat:no-repeat; position:fixed; z-index:10;}
#loginTit{position:absolute; top:135px; left:130px; z-index:20; color:#fff;}
#loginTit h1{font-family:verdana,HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:36px; font-weight:bold; letter-spacing:-1.3px;}
#loginTit span{font-family:verdana,HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:22px; font-weight:lighter; letter-spacing:-1px; line-height:50px;}
#loginCont{position:absolute; right:0px; top:0px; width:460px; height:100%; background-color:#fff; z-index:20;}
#loginNotice{color:#fff; position:absolute; left:130px; bottom:100px; width:445px; height:135px; border:1px solid #726f6f; font-size:12px; line-height:22px; z-index:20;}
.NoticeTit{font-weight:bold; width:365px; height:30px; line-height:30px; border-bottom:1px solid #545458; position:relative; left:40px; top:10px; letter-spacing:-1.3px;}
#loginNotice ul{ position:relative; left:55px; top:25px;}
#loginNotice ul li a:hover{color:#fff;}
#loginNotice ul li{list-style-type:square; color:#999; font-size:12px;}
.loginBgTop{}
.logoW{position:absolute; right:35px; top:25px; z-index:20;}
.loginLine{height:1px; width:85px; background:#000; position:absolute; left:0px; top:50px;}
#loginInfo{width:350px; position:relative; left:55px; top:25px; font-size:14px; color:#686767;}
#loginInfo h1{font-family:verdana,HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:33px; color:#000; height:50px; border-bottom:1px solid #e7e7e7; letter-spacing:-1.5px; font-weight:normal;}
#loginInfo ul{position:relative; top:22px;}
#loginInfo ul li.tit{font-weight:bold; height:20px; letter-spacing:-1.3px; padding-top:10px;}
#loginInfo ul li.stit{font-size:11px; height:15px; letter-spacing:-1.3px; padding-top:5px;}
#loginInfo ul li.padTop{padding-top:40px;}
.loginInbox{color:#333; font-size:14px; height:35px; padding-left:15px; width:330px; margin-bottom:10px; margin-top:2px; border:1px solid #cfd8e7;}
.loginInbox::placeholder{color:#999;}

/* Login_style_1 */

#style_1 #loginBg{overflow:visible; width:100%; height:100%; }
#style_1 #overlayLogin{width:100%; height:100%; background-color:#081D30; background:url(/images/portal/common/loginBg_1.jpg); background-repeat:no-repeat; background-size:cover;position:fixed; z-index:10;}
#style_1 #loginTit{position:absolute; top:280px; right:730px; z-index:20; color:#fff; text-align: right; animation: moving1 0.5s ease-in-out}
#style_1 #loginTit h1{font-family:"Tahoma"; font-size:67px; font-weight:bold;}
#style_1 #loginTit span{font-family:"Tahoma"; font-size:33px; padding-right: 10px;}
#style_1 #loginTit:after {content: "neoplex-mes"; display: block; font-family: "Verdana"; font-weight: bold; font-size: 147px; color:rgba(92,136,168,0.4); letter-spacing: -0.05em}
#style_1 #loginCont{position:absolute; right:0px; top:0px; width:500px; height:100%; background:rgba(0,0,0,0.4); z-index:20;  animation: moving2 0.5s ease-in-out}

#style_1 #loginNotice{ position: absolute; right: 730px; top: 650px; width: 445px; height: 135px; border: 1px solid rgba(255, 255, 255, 0.55); z-index: 20; background: rgba(4, 33, 51, 0.84); font-family: "Malgun Gothic"; border-radius: 10px; line-height: 22px; }
#style_1 .NoticeTit{color: #8bbbe4; font-size: 18px;  font-weight: bold; width: 365px; height: 30px; line-height: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.55); position: relative;    left: 40px; top: 10px; letter-spacing: -1.3px;}
#style_1 #loginNotice ul{ position:relative; left:55px; top:25px;}
#style_1 #loginNotice ul li a {color:#fff}
#style_1 #loginNotice ul li a:hover{color:#fff; text-decoration: underline;}
#style_1 #loginNotice ul li{list-style-type:square; color:#fff; font-size:16px;}

#style_1 .loginLine{height:1px; width:100%; background:rgba(255,255,255,0.4); position:absolute; left:0px; top:50px;}
#style_1 #loginInfo{position:relative; left:63px; top:130px; font-size:14px; color:#686767; font-family:"Malgun Gothic"}
#style_1 #loginInfo h1{font-family:"Verdana"; font-size:33px; color:#427CAB; height:50px; letter-spacing:-1.5px; font-weight:normal;}
#style_1 #loginInfo ul{position:relative; padding-top:50px;}
#style_1 #loginInfo ul li.tit{font-weight:bold; height:20px; letter-spacing:-0.5px; padding-bottom:12px; color:#fff; font-size: 17px; }
#style_1 #loginInfo ul li:nth-child(3).tit { padding-top:30px}
#style_1 #loginInfo ul li.stit{font-size:15px; height:15px; letter-spacing:-1.3px; padding:20px 0; color:#fff}
#style_1 #loginInfo ul li.stit input { margin-right: 10px; width: 17px; height: 17px }
#style_1 #loginInfo ul li button {margin-top: 40px; width: 380px}
#style_1 .loginInbox{color:#333; font-size:20px; height:55px; padding: 0 15px; width:350px; border-radius: 5px; letter-spacing:-0.5px; }
#style_1 .loginInbox::placeholder{color:#AFAFAF; font-size:17px;}
#style_1 .loginInbox::-webkit-input-placeholder{color:#AFAFAF; font-size:17px;}
#style_1 .loginInbox:-ms-input-placeholder{color:#AFAFAF; font-size:17px;}

@keyframes moving1 { 
    from { right: 780px; opacity: 0}
    to{ right: 730px; opacity: 1}
}
@keyframes moving2 { 
    from { right: -50px; opacity: 0}
    to{ right: 0; opacity: 1}
}


/* Login_style_2 */

#style_2 {overflow: hidden;}
#style_2 #loginBg{overflow:visible; width:100%; height:100%; }
#style_2 #overlayLogin{width:100%; height:100%; background-color:#081D30; background:url(/images/portal/common/loginBg_1.jpg ); background-repeat:no-repeat; background-size:cover;position:fixed; z-index:10;}
#style_2 #loginTit{position:absolute; left:50%; top:50%; transform:translate(-50%, -270%); z-index:20; color:#fff; text-align: center; width:470px; height:120px; animation: moving3 0.5s ease-in-out}
#style_2 #loginTit h1{font-family:"Tahoma"; font-size:46px; font-weight:bold;}
#style_2 #loginTit span{font-family:"Tahoma"; font-size:22px;}

#style_2 #loginNotice{ position: absolute; left:50%; top:50%; transform:translate(-50%, 180%); width: 472px; height: 135px; border: 1px solid rgba(255, 255, 255, 0.55); z-index: 20; background: rgba(4, 33, 51, 0.84); font-family: "Malgun Gothic"; border-radius: 10px; line-height: 22px; }
#style_2 .NoticeTit{color: #8bbbe4; font-size: 18px;  font-weight: bold; width: 365px; height: 30px; line-height: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.55); position: relative;    left: 40px; top: 10px; letter-spacing: -1.3px;}
#style_2 #loginNotice ul{ position:relative; left:55px; top:25px;}
#style_2 #loginNotice ul li a {color:#fff}
#style_2 #loginNotice ul li a:hover{color:#fff; text-decoration: underline;}
#style_2 #loginNotice ul li{list-style-type:square; color:#fff; font-size:16px;}

#style_2 #loginCont{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:472px; height:448px; background:transparent; z-index:20; border-radius: 15px; border:1px solid #B7C2CB; padding: 3px; animation: moving4 0.5s ease-in-out}
#style_2 #loginInfo {position:relative; width: 100%; height:100%; background:#fff; z-index:20; border-radius: 10px; font-size:14px; color:#686767; font-family:"Malgun Gothic"; padding:40px;     box-sizing: border-box;}
#style_2 #loginInfo h1{font-family:"Verdana"; font-size:33px; color:#427CAB; height:50px; letter-spacing:-1.5px; font-weight:normal;}
#style_2 #loginInfo ul{position:relative; }
#style_2 #loginInfo ul li.tit{font-weight:bold; letter-spacing:-1.5px; padding-bottom:12px; color:#115590; font-size: 22px; }
#style_2 #loginInfo ul li:nth-child(1).tit { background: url(/images/portal/common/icon_login01.gif) no-repeat 0 5px; padding-left: 20px;}
#style_2 #loginInfo ul li:nth-child(3).tit { background: url(/images/portal/common/icon_login02.gif) no-repeat 0 5px; margin-top:36px; padding-left: 20px;}
#style_2 #loginInfo ul li.stit{font-size:16px; height:15px; letter-spacing:-1.3px; padding:20px 0; color:#092A3B; font-weight:bold;}
#style_2 #loginInfo ul li.stit input { margin-right: 10px; width: 17px; height: 17px }
#style_2 #loginInfo ul li button {margin-top: 60px; width: 380px}
#style_2 .loginInbox{color:#333; font-size:20px; height:55px; padding: 0 15px; width:350px; border-radius: 5px; letter-spacing:-0.5px; background: #EAEAEA; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    border: 0; -webkit-box-shadow:inset 0 0 10px rgba(0, 0, 0, 0.2); -moz-box-shadow:inset 0 0 10px rgba(0, 0, 0, 0.2)}
#style_2 .loginInbox::placeholder{color:#AFAFAF; font-size:17px;}
#style_2 .loginInbox::-webkit-input-placeholder{color:#AFAFAF; font-size:17px;}
#style_2 .loginInbox:-ms-input-placeholder{color:#AFAFAF; font-size:17px;}

@keyframes moving3 { 
    from { top:48%;  opacity: 0}
    to{ top:50%; opacity: 1}
}
@keyframes moving4 { 
    from { top: 52%; opacity: 0}
    to{ top: 50%; opacity: 1}
}

.login-wrap {
    position:fixed;top:0;left:0;right:0;bottom:0;background:url('/images/portal/common/loginBg_1.jpg'); background-size:cover;
    display:flex;justify-content: center;align-items: center;
}
.login-container {
    position: relative;width:500px;height:540px;background-color:rgba(255,255,255,0.2);border-radius:12px;
    box-shadow: 0 0 20px rgba(61,73,102,0.2);padding:115px 60px 125px 60px;box-sizing: border-box;
}
.login-logo {text-align:center;margin-bottom:50px;}
.login-inp {
    position: relative;background-color:#ffffff;height:54px;line-height:50px;border-radius:30px;margin-bottom:15px;
    padding-left:55px;padding-right:30px;box-sizing: border-box;
}
.login-inp > span {position:absolute;left:20px;top:5px;}
.login-inp > input {border:0;width:100%;height:42px;font-size:16px;font-weight:bold;margin-top:3px;color:#666666;}
.login-btn-wrap {margin-top:25px;}
.login-btn-wrap > .loginBtn {
    display:block;background-color:#0b2972;color:#ffffff;font-weight:bold;height:50px;line-height:50px;border-radius:30px;
    text-align:center;font-size:20px;
}

/* ############################
  로그인 화면 inline style 이동
############################ */
.login-change {padding:40px 60px 35px 60px;}
.login-title {font-size: 24px;text-align: center;margin-bottom: 15px;}
.login-change .login-logo {margin-bottom:30px;}