@charset "utf-8";


/* Login Layout */
body.login #header {
    width: 100%;
	margin: 0 auto; padding: 20px 0;
	background-color: #2281f0;
}
body.login #header h1 {
	display: flex; justify-content: center;
}
body.login #header h1 img {
	width: auto; height: 20px;
	margin: 0 15px;
}
body.login #header h1 img + img {
	height: 21px;
}
body.login .content_section {	
	margin: 4rem 0; padding: 4rem 0;
	border-top: 2px solid #333; border-bottom: 1px solid #d2d2d2;
	background: #f7f7f7;
}
body.login .snu_login_section {    
    display: block;
	max-width: 750px; width: 90%;
    margin: 0 auto;
}
body.login h2 {
	font-size: 2.2em; line-height: 1.3; letter-spacing: -0.05rem; color: #000; text-align: center;		
}
body.login h2 span {
	display: block;
	font-weight: 300; letter-spacing: 0; font-size: 13px;
}

	@media only screen and (max-width: 768px) {
		body.login #header {
			padding: 15px 0;
		}
		body.login #header .container img {
			height: 16px;
		}
		body.login .content_section {
			margin: 4rem 0; padding: 3rem 0;
		}
		body.login h2 {
			font-size: 1.8em;
		}		
	}
	@media only screen and (max-width: 500px) {
		body.login h2 {
			font-size: 1.6em;
		}
	}



/* Login */
.snu_login_section .tab-content {
    position: relative;
	padding: 30px 0;    
}
.snu_login_area {
	display: flex; flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.snu_login_area:after {
    content: "";
	clear: both;
	display: block;
}
.snu_login_area ul	{
	float: left;
	width: calc(100% - 125px);
}
.snu_login_area li {
    position: relative;
	width: 100%;
    margin-top: 5px;
}
.snu_login_area li:first-child {
    margin-top: 0;
}
.snu_login_area div {	
	width: 100%;
}
.snu_login_area input.form-control {        
	width: 100%; max-width: 100%; height: 50px;	
	border: 1px solid #aaa !important;
	background: #fff !important;
	border-radius: 0; box-shadow: none !important;
}
.snu_login_area li * {
    vertical-align: top
}
.snu_login_area .btn_area {	
	float: right;
	width: 120px; 
	margin-left: 5px; padding: 0;
}
.snu_login_area .btn_area button {
	float: right;
	height: 100%;
	font-weight: 450;
	font-size: 1.2em;
	border-radius: 0;
	border: 0;
	background: #000;	
}

	@media only screen and (max-width: 767px) {
		.snu_login_section .tab-content {
			padding: 20px 0;
		}
		.snu_login_area ul {
			width: calc(100% - 90px);
		}
		.input-group .form-control:first-child {
			padding: 10px;
			font-size: .97rem;
		}
		.snu_login_area input.form-control {        
			height: 42px;
			padding: 10px;
			font-size: .97rem;
		}
		.snu_login_area .btn_area {
			width: 85px;
		}
		.snu_login_area .btn_area button {
			font-size: 1.05em;
		}
	}



/* id save */
.text_link {
    margin-bottom: 20px; padding: 7px 0 15px;
    text-align: left;
	border-bottom: 1px solid #aaa;
}
.text_link div {
	position:relative;
	display:inline-block;
	*display:inline;
	white-space:nowrap;
	zoom:1;
}
.text_link input[type="checkbox"] {
	width:20px;
	height:20px;	
	margin:0;
}
.text_link div * {
	margin:0 0 0 5px;
	font-size: .97em; font-weight: 400; line-height: 20px;
	vertical-align:middle;
}
.text_link div + div {
	margin-left:5px;
	padding-left:18px;
}
.text_link div + div:after {
	content: "/";
	display: block;
	position: absolute;
	top: 2px;
	left: 0;
	color: #aaa;
}



/* BTN JOIN */
.tab-content .btn_area01 {
	width: 100%;
	margin-top: 10px; 
}
.tab-content .btn_area01 button {
	padding: 10px 10px 8px;
	color: #000; font-size: 1.15rem; font-weight: 600;
	border: 2px solid #333; border-radius: 50px;
    background: #ebedf0;
}



/* SNS LOGIN */
h3.login_h3 {
	margin: 40px 0 0;
	text-align: center; color: #222; font-weight: 600;
}
.sns_login { 
	width: 100%; 
	margin: 0 auto; padding-top: 10px; 
}
.sns_login > div { 
	display:inline-block; 
	width:calc(50% - 5px); height:40px; 
	margin:0 0 4px 1px; 	
	text-align:center;
	border: 1px solid rgba(0,0,0,.2);
}
.sns_login > div:nth-child(odd) { 
	margin-left:0
}
.sns_login > div > a { 
	display: block; 
	line-height: 37px; font-size: 13.5px; color: #fff; 
}
.sns_login > div > a img { 
	margin-right:5px; margin-top: 1px;
	vertical-align: top;    
}
.sns_login .facebook { 
	background:#4b67a6
}
.sns_login .twitter { 
	background:#1da1f3
}
.sns_login .kakao { 
	background:#fae301
}
.sns_login .kakao a { 
	color:#3c1e1e !important 
}
.sns_login .naver { 
	background:#1fcb4d
}
.sns_login .daum { 
	background:#f0f0f0
}
.sns_login .daum a { 
	color:#333 !important 
}
.sns_login .google { 
	background:#fff
}
.sns_login .google a { 
	color:#333 !important 
}
.sns_login .instagram { 
	background:#f0f0f0 
}
.sns_login .instagram a { 
	color:#333 !important 
}
.sns_login .line { 
	background:#00b900 
}
.sns_login .line a { 
	color:#fff !important 
}

	@media only screen and (max-width: 500px) {
		.sns_login > div {
			width: 100%;
		}
	}













































































/* ���� */
.btn_keyboard {
    position: absolute;
    z-index: 20;
    top: 8px;
    border: 0;
    right: 10px;
    display: block;
    width: 40px;
    height: 30px;
    overflow: hidden;
    background: url(/img/login/ico_keyboard.png) no-repeat 50% 50%;
    opacity: 0.6
}

.btn_keyboard span {
    visibility: hidden;
    position: absolute;
    z-index: -1
}

.btn_keyboard:hover {
    opacity: 1
}


/* ��ư���� */
.btn_area {
    padding: 7px 0;
    text-align: center
}
/* ���� */

.txt_center {
    text-align: center;
}
/* ����� */

.warn {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 18px;
    background: url(/img/login/ico_warn.gif) no-repeat 0 50%;
    font-weight: 600;
    color: #ee6c6e;
}

.error_align {
    clear: both;
    text-align: left;
    margin: 0 auto;
    padding: 5px 0
}

.error_align:before {
    clear: both
}

.error_align {
    clear: both;
    *zoom: 1
}

.error_align:after {
    content: '';
    clear: both;
    display: block
}

.error_align ul {
    *zoom: 1
}

.error_align ul:after {
    content: '';
    clear: both;
    display: block
}

.error_align .align_left {
    float: left
}

.error_align .align_right {
    float: right
}
/* ĸ�� */

.captcha_area {
    padding: 20px 25px;
    border-radius: 5px;
    background: #f4f4f4;
    margin: 10px 0 0 0;
    *zoom: 1;
}

.captcha_area:after {
    display: block;
    clear: both;
    content: ''
}

.captcha_area label {
    visibility: hidden;
    position: absolute;
    z-index: -1
}

.captcha_img {
    position: relative;
    z-index: 0;
    width: 240px;
    margin: 0 auto 7px;
    border-radius: 3px;
    background: #e0e0e0;
    *zoom: 1
}

.captcha_img:after {
    content: '';
    clear: both;
    display: block
}

.captcha_img img {
    float: left;
    width: auto;
    height: 30px
}

.captcha_img button {
    float: right
}

.captcha_img .btn_sound {
    position: absolute;
    z-index: 10;
    top: 2px;
    right: -30px;
    display: block;
    width: 26px;
    height: 26px;
    overflow: hidden;
    background: url(/img/login/ico_sound.png) no-repeat 0 0
}

.captcha_img .btn_sound span {
    visibility: hidden;
    position: absolute;
    z-index: -1
}

.captcha_input {
    position: relative;
    z-index: 0;
    width: 240px;
    margin: 0 auto;
}



/* ���̾��˾� */
.layer_popup {
    background: #fff
}

.layer_title {
    height: 50px;
    background: #4384d3;
    line-height: 50px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-align: left;
    text-indent: 26px
}

.layer_popup .text_box {
    padding: 20px;
    border: 1px solid #ebebeb;
    background: #f0f0f0;
    max-height: 200px;
    overflow-y: scroll
}

.layer_cont {
    padding: 25px
}

.layer_close {
    position: absolute;
    top: 15px;
    right: 20px;
    display: block;
    width: 15px;
    height: 15px;
    overflow: hidden;
    background: url(/img/login/btn_layer_close.gif);
}

.layer_close span {
    visibility: hidden;
    position: absolute;
    z-index: -1
}

.layer_wd01 {
    width: 500px
}

.layer_wd02 {
    width: 320px
}
/* �� */

.bul_type_01,
.bul_list_type_01 li {
    padding-left: 10px;
    background: url(/img/login/bul_type_01.gif) no-repeat 0 5px;
    line-height: 18px
}

.bul_list_type_01 li {
    margin-bottom: 5px
}
/* �Ϲ� ���������� */

.snu_total_content_section {
    border: 1px solid #cbced2;
    border-radius: 5px;
    background: #fff;
    -webkit-box-shadow: 1px 1px 2px 1px #dde0e5;
    box-shadow: 1px 1px 2px 1px #dde0e5;
    display: block;
    padding: 27px 50px 40px;
    position: relative;
    margin: 0 0 20px 0;
}

.change_massage {
    padding: 0 230px 40px 0;
    background: url(/img/login/bg_password.jpg) no-repeat 100% 0;
    min-height: 64px;
}

.change_massage .txt_large {
    font-size: 26px;
    font-weight: 600;
    color: #333;
    line-height: 27px;
    margin: 0 0 10px 0;
}

.change_massage em {
    color: #4283d3;
    font-style: normal;
}

.change_massage .txt_middle {
    font-size: 15px;
    line-height: 20px;
    color: #777;
}
/* �����Dz���� */

.center_input_section {
    padding: 20px 25px;
    border-radius: 5px;
    background: #f9f9f9;
    margin: 10px 0 0 0;
    *zoom: 1;
}

.center_input_section .snu_center_input_area>ul>li {
    position: relative;
    z-index: 0
}

.center_input_section .snu_center_input_area label {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 10;
    width: 142px;
    color: #555;
    font-size: 15px;
    cursor: pointer;
    font-weight: normal;
    background: url(/img/login/bul_li.gif) no-repeat 0 50%;
    padding: 0 0 0 8px;
}

.center_input_section .snu_center_input_area .form-control {
    border-left: 0
}

.center_input_section .snu_center_input_area .input-group {
    margin: 0 0 0 150px;
}

.center_input_section .snu_center_input_area .input-group-addon {
    background: #fff;
}

.snu_center_input_area .input-group-addon>label {
    font-size: 13px !important;
}

/* ��� �ؽ�Ʈ ��ũ��Ʈ */

.txt_disc {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
    padding: 12px 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.txt_disc em {
    font-style: normal;
    font-weight: 600
}
/* ���̵�ã�� */

.find_id_area ul {
    *zoom: 1
}

.find_id_area ul:after {
    content: '';
    clear: both;
    display: block
}

.find_id_area ul li {
    position: relative;
    z-index: 0;
}

.find_id_area .find_id {
    display: inline-block;
    padding: 0;
    width: 240px
}

.find_id_area .find_sector {
    width: 240px;
    padding: 0 0 0 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.find_id_area .find_disabled {
    float: right
}

.find_id_area ul li.disabled_line .find_id,
.find_id_area ul li.disabled_line .find_sector {
    text-decoration: line-through;
    color: #888
}

.people_num {
    display: inline-block;
    height: 34px;
    line-height: 34px;
}
/* ������� */

.btn-group.btn-block:after {
    display: block;
    clear: both;
    content: ''
}

.btn_agree {
    height: 49px !important;
    border-radius: 3px;
    background: #4485d5;
    line-height: 49px;
    font-family: NanumGothicWEB;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin: 0 0 20px 0;
    cursor: pointer
}

.btn_agree a:hover {
    text-decoration: none
}

.btn_agree .btn_check {
    background: url(/img/login/bg_check_box3.gif) no-repeat 0 3px;
    display: inline-block;
    height: 26px;
    padding: 0 15px 0 30px;
    border-radius: 3px;
    line-height: 26px;
    font-size: 18px;
    font-family: NanumGothic;
    color: #fff
}

.btn_agree .btn_check.checked {
    background-position: 0 -27px
}

.ico_check {
    float: left;
    width: 13px;
    height: 13px;
    margin: 3px 5px 0 0;
    display: inline-block;
    background: url(/img/login/bg_check_box2.gif) no-repeat 0 -33px
}

.active .ico_check {
    background: url(/img/login/bg_check_box2.gif) no-repeat 0 0
}

/* title_bar */
.title_bar {
    margin: 0 0 5px 0;
    *zoom: 1;
}
.title_bar:after {
    display: block;
    clear: both;
    content: ''
}
.title_bar h3,
.title-bar a {
    float: right;
    margin-left: 5px
}
.title_bar h3 {
    padding-left: 9px;
    background: url(/img/login/bul_li.gif) no-repeat 0 50%;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    font-weight: normal;
}
.title_bar .tit_join {
    float: none;
    font-size: 17px;
    margin: 0 0 15px;
    font-weight: 600;
    *zoom: 1
}
.title_bar .tit_join:after {
    display: block;
    clear: both;
    content: ''
}

.tit_container {
    *zoom: 1
}
.tit_container:after {
    display: block;
    clear: both;
    content: ''
}
.tit_container .tit_l {
    float: left;
    line-height: 30px
}
.tit_container .tit_r {
    float: right
}


/* group_point */
.group_point {
    border-bottom: 2px dashed #dcdcdc;
    padding: 15px;
    margin: 0 0 15px
}

.group_point_no {
    padding: 15px;
    margin: 0 0 15px
}


/* agree_btn_section */
.agree_btn_section {
    padding: 20px 30px 20px;
    margin: 0 0 20px 0;
    background: #f0f0f0;
    *zoom: 1;
}

.agree_btn_section:after {
    display: block;
    clear: both;
    content: ''
}
.agree_btn_section h3,
.title-bar a {
    float: left;
    margin-right: 5px
}
.agree_btn_section h3 {
    padding-left: 9px;
    background: url(/img/login/bul_li.gif) no-repeat 0 50%;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    font-weight: normal;
}
.agree_btn_section .container {
    margin: 0 0 10px 0;
}
.agree_section {
    margin: 0 0 25px
}
.agree_section pre {
    overflow-y: scroll;
    height: 100px;
}

/*  join_step */
.join_step {
    margin-bottom: 20px;
    border: 1px solid #cbced2;
    border-radius: 6px;
    background: #f8f8f8;
    box-shadow: 1px 1px 2px 1px #dde0e5;
    box-sizing: border-box
}
.join_step:after {
    display: block;
    clear: both;
    content: ''
}
.join_step li {
    float: left;
    width: 33.3%;
    height: 51px;
    background: url(/img/login/bg_step.gif) no-repeat 100% 0;
    line-height: 51px;
    font-size: 19px;
    font-weight: 600;
    color: #666;
    text-align: center;
}
.join_step li:last-child {
    width: 33.4%;
}
.join_step li.off {
    background-image: url(/img/login/bg_step_off.gif)
}
.join_step li.current {
    background: #32cad1 url(/img/login/bg_step_current.gif) no-repeat 100% 0;
    color: #fff
}
.join_step li:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.join_step li:last-child {
    float: right;
    background-image: none;
    width: 33.4%;
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}


/* join_done */
.join_done {
    min-height: 149px;
    padding: 45px 0 45px 240px;
    border: 1px solid #f3f3f3;
    background: url(/img/login/bg_join_done.gif) no-repeat -80px 0
}

.join_done .welcome {
    font-size: 28px;
    font-weight: 600;
    color: #02539d
}

.join_done .txt {
    line-height: 26px
}
.join_done_section {
    padding: 20px 30px 20px;
    margin: 0 0 20px 0;
    background: #f0f0f0;
    text-align: center;
    font-size: 18px;
    *zoom: 1;
}
.join_done_section:after {
    display: block;
    clear: both;
    content: ''
}
.join_done_section em {
    font-style: normal;
    font-weight: 600;
    color: #4283d3;
}

/* select_area */
.select_area {
    padding: 20px 55px;
    border-radius: 5px;
    background: #f4f4f4;
    margin: 10px 0 0 0;
    *zoom: 1
}

.select_area:after {
    display: block;
    clear: both;
    content: ''
}


/* logout_msg */
.logout_msg {
    padding-top: 220px;
    padding-bottom: 45px;
    background: url(/img/login/bg_logout.jpg) no-repeat 50% 0;
    text-align: center
}
.logout_msg p {
    font-size: 18px;
    color: #333
}
.logout_msg .emp {
    font-size: 30px;
    font-weight: 600;
    color: #4485d5
}


/* section_warning */
.section_warning {
    margin-top: 20px;
}

.section_warning .bg_blue {
    height: 2px;
}

.section_warning .section_warning {
    margin: 220px auto 0;
    width: 957px;
}

.section_warning .bg_blue {
    padding: 0 17px;
    height: 51px;
    line-height: 51px;
    background: #5377cb;
    border-bottom: 2px solid #45598c;
    overflow: hidden;
}

.section_warning .bg_blue * {
    vertical-align: middle;
}

.section_warning .bg_white {
    padding: 80px 46px 78px 386px;
    min-height: 213px;
    border: 1px solid #e0e0e0;
    border-top: 0;
}

.section_warning .bg_restraining {
    background: url(../images/bg/bg_restraining.jpg) no-repeat 90px 78px #fff;
}

.section_warning .bg_error {
    background: url(/img/login/bg_error.jpg) no-repeat 90px 78px #fff;
}

.section_warning .bg_waiting {
    background: url(../images/bg/bg_waiting.jpg) no-repeat 90px 78px #fff;
}

.section_warning .f_l {
    float: left;
}

.section_warning .f_r {
    float: right;
}

.section_warning .txt_warning {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}

.section_warning .bg_type01 {
    padding: 15px;
    font-size: 13px;
    line-height: 1.5;
    background: #fcfcfc;
    border: 5px solid #e7e7e7;
}





/*
.login_notice {
    padding-bottom: 11px;
    text-align: right
}

.login_notice>a {
    display: inline-block;
    padding: 0 24px 0 0;
    background: url(/img/login/ico_notice.gif) no-repeat 100% 0;
    line-height: 14px;
    color: #798497;
    letter-spacing: -.5px;
    text-decoration: none
    text-decoration: none
}

#header.main_board				{ padding:15px 15px 0}
#header.main_board .location	{ position:relative; height:47px; padding: 0; border:1px solid #cecfd3; border-radius:7px; background:#f1ede7 }
#header.main_board .location *	{ display:inline-block; *display:inline; vertical-align:top; zoom:1 }
#header.main_board .location>div{ padding:10px 20px 11px; border-right:1px solid #cecfd3;  }
#header.main_board .location h3	{ padding:10px 15px 0; line-height:140%; font-size:20px; font-family: 'NanumBold'; color:#000;  }

.container01									{ padding:0 15px 0}
.content_board									{ position:relative; width:100%; margin-top:20px; padding:5% 3%; background:#fff; border-radius:10px;  }
.content_board table							{ width:100%; margin:0 0 30px 0; border-top:1px solid #ccc; border-left:1px solid #ccc; }
.content_board table thead th					{ padding:10px 5px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; font-family: 'NanumBold'; text-align:center; color:#000; line-height:140%; background:#fefefe; vertical-align:middle }
.content_board table thead th span				{ display:block; font-family:'Nanum Gothic'; color:#000; font-weight:bold; line-height:140%; }
.content_board table tbody th					{ padding:5px; text-align:left; line-height:120%; vertical-align:middle; text-align:center; border-right:1px solid #ccc; border-bottom:1px solid #ccc; font-family: 'NanumBold';background:#f3f3f3; }
.content_board table tbody td					{ padding:5px; text-align:center; vertical-align:middle; border-bottom:1px solid #ccc; border-right:1px solid #ccc; line-height:160%}
.content_board table tbody td.main_content div	{ height:300px; padding:10px; text-align:left; overflow-y:scroll }
.content_board table tbody td select			{ height:26px; padding:2px 1px; margin:0 2px; text-align:left; border:1px solid #ccc;  }
.content_board table tbody td input.ed			{ height:22px; border:1px solid #ccc; margin:2px; background:#fff; }
.content_board table tbody tr.tfoot td			{ padding:12px 10px; color:#fff; font-family: 'NanumBold'; font-size:14px; background:#777 }
.content_board table tbody tr.tfoot td span		{ color:yellow !important}
.content_board table tbody td.btn img			{ margin:2px 0}
.content_board table .text_left					{ text-align:left; padding-left:10px}

/* ��ư���� */
input.btn_form	{ width:150px; height:30px; margin:0 2px; background:#fff; font-family: 'NanumBold'; background: #848e97; /* Old browsers */
background: -moz-linear-gradient(top, #848e97 0%, #5e6a75 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#848e97), color-stop(100%,#5e6a75)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #848e97 0%,#5e6a75 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #848e97 0%,#5e6a75 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #848e97 0%,#5e6a75 100%); /* IE10+ */
background: linear-gradient(to bottom, #848e97 0%,#5e6a75 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#848e97', endColorstr='#5e6a75',GradientType=0 ); /* IE6-9 */; border:1px solid #5e6a75; color:#fff; cursor:pointer ;  }

*/