@charset"utf-8";
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(../../COMMON/font/NotoSansKR/NotoSansKR-Regular.woff2) format('woff2'),url(../../COMMON/font/NotoSansKR/NotoSansKR-Regular.woff) format('woff');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(../../COMMON/font/NotoSansKR/NotoSansKR-Medium.woff2) format('woff2'),url(../../COMMON/font/NotoSansKR/NotoSansKR-Medium.woff) format('woff');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(../../COMMON/font/NotoSansKR/NotoSansKR-Bold.woff2) format('woff2'),url(../../COMMON/font/NotoSansKR/NotoSansKR-Bold.woff) format('woff');}

html,body {height:100%; background:url(../image/main_bg2.jpg) no-repeat top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

#slogan { color: #fff;
    font-family: 'Noto Sans KR', serif;}

#title { width: 100%; text-align: center; margin-bottom: 50px; margin-left: -5px;}
#login_wrap { width: 100%; font-size: 14px;}
#login_wrap form { width:100%; }

#form_checkbox { color:#666666; margin-left: -4px;}
#form_checkbox li:nth-child(1) { float:left; }
#form_checkbox li:nth-child(2) { float:left; margin-top:3px; margin-left:2px; }
#form_text li:nth-child(1) { background-color:#ffffff; margin-bottom: 5px;}
#form_text li:nth-child(2) { background-color:#ffffff; margin-bottom: 5px;}
#btn_login { color:#fff; background:#0072bc; border:none !important; cursor:pointer; font-family: 'Noto Sans KR', serif; font-weight: 500 !important; margin-bottom: 10px;}
#form_text input { width:100%; height:50px; border:1px solid #d9d9d9; padding-left:10px; font-size:16px; font-weight:bold; box-sizing: border-box; }
#checkbox {width: 16px; height: 16px;}

#join { float: right; color:#666666; margin-top: 3px;}
#join a:link, #join a:visited { color:#666666; }
#join a:hover { color:#666666; text-decoration:underline; }
input:focus { outline:none; }

/********** 웹 CSS **********/
@media all and (min-width:1024px){
    #container { width:100%; top:62%; margin-top:-320px; position:relative; }
    #center_wrap { width:1200px; height:410px; margin:0 auto; position:relative;}
    #wrap { float: right; width: 410px; height: 410px; background-color: #ffffff; padding: 60px 40px; box-sizing: border-box; }
    #slogan { top:80px; position:absolute; font-size:70px; font-weight:700;}
}

/********** 모바일 CSS **********/
@media all and (max-width:1023px){
    #container { width: 100%; height: 100%; background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; box-sizing: border-box;}
    #wrap { width: 320px; height: 410px; background-color: #ffffff; padding: 60px 40px; box-sizing: border-box; margin: 0 auto; }
    #slogan { text-align: center; margin-bottom: 20px; font-size:2.3rem; font-weight:700;}
}