@charset "utf-8";
@import url('/common/css/opensans.css');
@import url('/common/css/nanumgothic.css');

/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, cite, em, img, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, select, input, textarea, button {margin:0; padding:0; border:0; font-size:15px; font-family:HelveticaNeue-Light,AppleSDGothicNeo-Light,'Nanum Gothic',sans-serif;}
body{line-height:1.3;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content: ''; content:none;}
select, input, textarea, button{resize:none; vertical-align:middle;}
table{border-collapse:collapse;}

input{outline: 0;}
/* basic-alink */
a:link{color:#555;text-decoration:none;}
a:visited{color:#555;text-decoration:none;}
a:active{color:#555;text-decoration:none; background:none; outline:none;}
a:hover{color:#555;text-decoration:none;}

/* form basic */
input[type=text],
input[type=password]{margin:0; padding:15px 10px; width:100%; border:1px solid #ccc; box-sizing:border-box; -webkit-box-sizing:border-box; color:#333; vertical-align:middle; font-size:15px; background-color:#fff;}
input[type=text],
input[type=password],
select{border-radius:3px;}
label{cursor:pointer;}
input::-ms-clear,
input::-ms-reveal{display:none;}

/* radio */
.radio,
.checker{display:inline-block; padding:0; width:24px; height:24px; vertical-align:middle;}
.radio input:focus,
.checker input:focus{outline:0;}
.radio input,
.checker input{opacity:0; width:24px; height:24px; cursor:pointer;}
.radio span,
.checker span{display:block; background-image:url(../img/icon_set.svg); background-repeat:no-repeat;}
.radio span{background-position:0 -24px;}
.checker span{background-position:0 0;}
.radio span.checked{background-position:-24px -24px;}
.checker span.checked{background-position:-24px 0;}

/* button style - basic */
button{overflow:hidden; position:relative; color:#555; border-radius:3px; border:1px solid #bbb; background-color:#fafafa; cursor:pointer; outline:0;}
button:before{content:""; position:absolute; top:-20px; left:0; right:0; box-shadow:0 10px 10px rgba(255,255,255,0.8); cursor:pointer;}
button:hover{background-color:#f5f5f5;}
button:active{border-color:#ccc; box-shadow:0 1px 3px rgba(0,0,0,0.1) inset;}
button:active:before{content:none;}
button span{position:relative; display:inline-block; padding:0 10px; height:28px; line-height:26px; color:#555; font-weight:400; font-size:13px; white-space:nowrap; text-align:center;}
button.small span{padding:0 7px 1px 6px; font-size:11px; line-height:21px;}
button.large span{padding:0 25px; height:40px; font-size:18px; line-height:38px;}
/* button style - empty */
button.empty{display:none; position:absolute; top:50%; right:10px; margin-top:-12px; width:24px; height:24px; border:0; background-color:transparent;}
button.empty:before{content:none;}
button.empty:after{content:''; position:absolute; top:4px; left:4px; width:16px; height:16px; background-image:url(../img/icon_set.svg); background-position:0 -50px;}
button.empty:active{box-shadow:none;}
button.empty.txtin{display:block;}
/* button style - log */
button.log{display:block; margin-top:30px; width:100%; background-color:#1278bc; border:0;}
button.log:before{content:none;}
button.log span{height:50px; line-height:50px; color:#fff; font-size:20px; font-weight:bold;}

::-webkit-input-placeholder{color:#aaa !important;}
::-moz-placeholder{color:#aaa !important;}
:-ms-input-placeholder{color:#aaa !important;}
:-moz-placeholder{color:#aaa !important;}

/* sweetalert */
.swal2-modal h2{margin:10px 0; color:#555; font-family:'NanumSquare'; font-size:30px; font-weight:400; letter-spacing:-1px;}
.swal2-modal p{margin-top:25px; color:#555; font-family:'NanumSquare'; font-size:16.5px; font-weight:400; letter-spacing:-0.5px;}
.swal2-modal button:before,
.swal2-modal button:after{content:none;}

/* layout */
body{background-color:#f7f7f7;}
#wrap{margin:0 auto; width:500px;}

/* header */
#header{position:relative; margin-top:50px; font-size:0; text-align:center;}
#header h1,
#header h2{display:inline-block; margin:0 5px; vertical-align:middle;}
#header h1>img{display:block; width:84px; height:40px;}
#header h2>img{display:block; width:134px; height:40px;}
#header h2.employee>img{display:block; width:200px; height:40px;}

/* container */
#container{position:relative; margin-top:30px; padding:10px;}
.input_row{position:relative; margin-bottom:10px;}
.login_alert{margin-bottom:10px; color:#cf3b2c; font-size:14px;}
.stay{padding:7px 0; border:1px solid transparent;}
.stay label{display:inline-block; line-height:24px; font-size:14px; vertical-align:middle;}
.link{margin-top:20px; padding:20px 0; text-align:center; color:#ccc;}
.link a{padding:0 5px;}

/* registration type 2024.02.27*/
.type_main{padding:25px; border:1px solid #e5e5e5; border-radius:5px 5px 0 0; background-color:#fff;}
.type_main h3{margin-bottom:20px; font-family:'NanumSquare';}
.type_main h3.icon{font-size:24px; font-weight:400; letter-spacing:-0.5px;}
.type_main h3.icon:before{content:''; display:inline-block; margin-right:10px; width:40px; height:40px; background-image:url(../img/icon_myinfo.png); vertical-align:middle;}
.type_main p{margin-top:20px; word-break:keep-all;}
.row_group{position:relative; margin-top:16px; padding-top:6px; border-top:1px dotted #ddd;}
.row_group button{position:absolute; margin-top:20px; right:10px; top:9px;}
.row_group .input_row{margin-top:10px;}
button.large{display:block; margin-top:30px; width:100%; background-color:#1278bc; border:0;}
button.large:before{content:none;}
button.large span{height:50px;line-height:50px;color:#fff;font-size:20px;font-weight:bold;}
.hide{display:none !important;}



/* footer */
#footer{position:relative; margin:0 10px; padding:20px 0; border-top:1px solid #ddd;}
#footer ul{clear:both; text-align:center;}
#footer ul>li{display:inline-block; padding:0 5px 0 8px; border-left:1px dotted #ddd; font-size:13px;}
#footer ul>li:first-child{border-left:0;}
#footer p{clear:both; padding:15px 0; color:#999; font-family:tahoma; font-size:12px; text-align:center;}


/*####################
AD Content
######################*/
#ad-content{display:flex; flex-direction:column; gap:16px; padding:10px;}
#ad-content .ad-image>a{display:flex;}
#ad-content .ad-image img{max-width:480px; width:100%;}


/* mobile mode */
html.mobile:before{background-size:150% 3px;}
html.mobile #wrap{position:absolute; left:0; top:0; bottom:0; right:0; width:auto;}


/*************************
 * Screen Size : width 320px *
 *************************/
@media only screen and (max-width:500px){



}