@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);


#main-wrap { min-width:1200px; overflow:hidden; }
.inner { max-width:1200px; margin:0 auto;}
.clearfix { clear:both; }

.top-banner { width:100%; background-color:#fff; padding:15px 0; }
.top-banner .anhome { display:block; text-align:center; }
.top-banner .anhome span { display:inline-block; vertical-align: middle; font-weight:bold; }
.top-banner .anhome::before { content:""; display:inline-block; vertical-align: middle; width:34px; height:31px; background-image:url(../images/anhome.png); background-repeat:no-repeat; background-position:center; margin-right:10px; }

#main { position:relative; width:100%; height:calc(100vh - 61px); overflow: hidden;}
#main::after { content:""; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background-image:url(../images/background_dot.png); background-size:cover; background-repeat:no-repeat; opacity:1;}
#main .bg1 { position:absolute; left:0; top:0; width:50%; height:100%; background-color:#abd3fc; }
#main .bg2 { position:absolute; right:0; top:0;  width:50%; height:100%; background-color:#2e3092}

#main .login-wrap { position:absolute; z-index:999; width:960px; left:50%; top:50%; background-color:#fff; border-radius:10px; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); box-shadow: 0 0 20px rgba(0,0,0,0.3); }
#main .login-wrap .login-left { position:relative; float:left; width:50%; height:600px; border-top-left-radius:10px; padding:50px 40px; }
#main .login-wrap .login-left h1 { text-align:center; }
#main .login-wrap .login-left form { padding:50px 0 25px 0; border-bottom:1px solid #dedede; }
#main .login-wrap .login-left input[type="text"], #main .login-wrap .login-left input[type="password"] { width:100%; background-color:#f6f7f8; border:1px solid #dedede; padding:5px 10px; height:45px; margin-bottom:30px; }
#main .login-wrap .login-left input[type="text"]::placeholder, #main .login-wrap .login-left input[type="password"]::placeholder { color:#9a9a9a }
#main .login-wrap .login-left input[type="text"]::-webkit-input-placeholder, #main .login-wrap .login-left input[type="password"]::-webkit-input-placeholder { color:#9a9a9a }
#main .login-wrap .login-left input[type="text"]::-moz-placeholder, #main .login-wrap .login-left input[type="password"]::-moz-placeholder { color:#9a9a9a }
#main .login-wrap .login-left input[type="checkbox"] { width:15px; height:15px; }
#main .login-wrap .login-left .save-id { margin-bottom:20px; }
#main .login-wrap .login-left button.login-btn { background-color:#2e3092; transition:background-color 0.5s; border-radius:8px; color:#fff; text-align:center; width:100%; font-size:18px; height:50px; }
#main .login-wrap .login-left button.login-btn:hover { background-color:#101157; transition:background-color 0.5s;}
#main .login-wrap .login-left .login-info { padding-top:50px; }
#main .login-wrap .login-left .login-info ul li::before { content:""; position:absolute; display:block; left:0; top:10px; width:5px; height:5px; background-color:#9a9a9a; border-radius:8px; }
#main .login-wrap .login-left .login-info ul li { position:relative; padding-left:12px; padding-bottom:8px; letter-spacing:-0.05em; }
#main .login-wrap .login-left .login-info ul li span { color:#00aeef; padding-bottom:2px; border-bottom:1px solid #00aeef;}

#main .login-wrap .login-right { position:relative; float:left; width:50%; height:600px; border-top-right-radius:10px; background-color: #bfddfc; }
#main .login-wrap .login-right::after { content:""; position:absolute; left:0; bottom:80px; width:516px; height:377px; background-image:url(../images/login_right_img.png); background-repeat:no-repeat; background-size:cover; }
#main .login-wrap .copy { padding:20px 0;}
#main .login-wrap .copy p { font-family:'Noto Sans KR', 'Spoqa Han Sans Neo', sans-serif; color:#333; text-align:center; font-size:15px; letter-spacing: 0.05em;}