/* intro */
.intro-wrap { width:100%; max-width:768px; height:90vh; margin:0 auto; display:flex; justify-content:center; align-items:center; flex-direction:column; font-family: 'Noto Sans Kr'; letter-spacing: -0.06em; }
.intro-logo { text-align:center; margin-bottom:70px; }
.intro-logo img { max-width:130px; height:auto; }
.intro-menu { width:90%; display:flex;  justify-content:center; gap:20px; }
.intro-btn { width:40%; height:150px; margin-bottom:50px; display:flex; justify-content:center; align-items:center; background:#0e20cc; font-size:30px; font-weight:500; border-radius:20px;}
a.intro-btn { color:#fff; }
a.intro-btn:hover { text-decoration:none; }

.intro-ing { margin:0 0 40px 0; font-size:20px; font-weight:500; padding:10px 40px; background:#eee; border-radius:30px;}
.intro-logout { display:inline-block; padding:5px 30px; text-align:center; font-size:16px; font-weight:300; color:#777; border:1px #ccc solid; border-radius:20px; }

@media (max-width:586px){
	.intro-menu { width:85%; display:flex; flex-direction:column; align-items:center; gap:20px; }
	.intro-btn { width:100%; max-width:320px; height:70px; margin-bottom:0;  font-size:25px; border-radius:15px;  }
	.intro-ing { margin:0 0 40px 0; text-align:center; font-size:17px; font-weight:500; padding:10px 20px; background:#eee; border-radius:30px;}
	.intro-logout { margin-top:30px; }
}


/* step */
.step-wrap { width:100%; max-width:768px; height:90vh; margin:0 auto; display:flex; justify-content:center; align-items:center; flex-direction:column; font-family: 'Noto Sans Kr'; letter-spacing: -0.06em; }
.step-logo { text-align:center; margin-bottom:70px; }
.step-logo img { max-width:130px; height:auto; }
.step-menu { width:90%; display:flex; justify-content:center; gap:20px; }
.step-btn { width:40%; height:150px; margin-bottom:50px; display:flex; align-items:center; justify-content:center; background:#0e20cc; font-size:30px; font-weight:500; border-radius:20px; }
a.step-btn { color:#fff; }
a.step-btn:hover { text-decoration:none; }

.step-warning { width:100%; text-align:center; }
.warning { display:inline-block; width:100%; font-size:18px; font-weight:500; }
.step-ing { margin:0 0 40px 0; font-size:20px; font-weight:500; padding:10px 40px; background:#eee; border-radius:30px;}
.step-logout { display:inline-block; padding:5px 30px; text-align:center; font-size:16px; font-weight:300; color:#777; border:1px #ccc solid; border-radius:20px; }

.adm-menu { width:100%; margin:0px 0 50px 0; display:flex; justify-content:center; gap:10px; }
.adm-btn { width:30%; height:80px; display:flex; align-items:center; justify-content:center; background:#f40050; text-decoration:none; border-radius:6px; }
a.adm-btn { color:#fff;font-size:20px; font-weight:500; }
a.adm-btn:hover { text-decoration:none; }

@media (max-width:586px){
	.step-menu { width:85%; display:flex; flex-direction:column; align-items:center; gap:20px; }
	.step-btn { width:94%; max-width:320px; height:70px; margin-bottom:0; font-size:25px; border-radius:15px; }
	.step-ing { margin:0 0 40px 0; text-align:center; font-size:17px; font-weight:500; padding:10px 25px; background:#eee; border-radius:30px; }
	.step-logout { margin-top:30px; }
	.adm-menu { width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;gap:5px; }
	a.adm-btn { width:80%; height:50px; font-size:18px; display:flex; justify-content:center;}
}


/*  전체 영역  */	
#wrap { width:94%; max-width:768px;  margin:0 auto; height:100%; height:auto !important; overflow-y:hidden; font-family: 'Noto Sans Kr'; letter-spacing: -0.06em; }

/* TM */	
.tm_wrap { width:100%; display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px #ddd solid; }
.tm_logo { text-align:left; }
.tm_logo img { width:50px; }
.tm_menu { text-align:right; }
.tm_menu a { padding:4px 10px; text-align:center; font-size:14px; border:1px #ccc solid; border-radius:4px;}
.tm_menu a:hover { text-decoration:none; }
.tm_menu .menu_adm { background:#ea0143; color:#fff; border:1px #ea0143 solid;}

/* 서브 타이틀 */
.snb_tit { width:100%; text-align:center; margin-top:20px; }
.snb_tit .bo_tit { font-size: 25px;font-weight: 600; line-height:60px;  }

/* 서브 주메뉴 */
#snb_container { display:flex; align-items:center; width:100%; height:55px; margin:20px 0 40px 0; text-align:center; }
#snb_wrap { width:100%; text-align:center; }

/* =========================
   MOBILE
========================= */
@media only screen and (max-width:586px){
	#snb_container { margin:10px 0 20px 0; }
}

/*  서브 내용 부  */
#container{ width:100%; text-align:center; }
#board { display:block; position:relative; top:0; text-align:center; }
#board .bo_board { width:100%; max-width:768px; margin:0 auto; text-align:left; min-height:500px; height:auto !important; } 


/* COPYRIGHT */
#tail { width: 100%; position: relative;  text-align:center; margin-top:30px; border-top:1px #ccc solid; }
.tail_wrap { position: relative; width: 100%; padding:30px 0; font-size: 13px; color:#777;  line-height:26px; }
.tail_wrap img { width: 70px; padding:0 0 10px; }



/* 게시판 검색창 통합 */
#bo_sch input[type=text]:focus {
border: 0px !important;
}
#bo_sch select:focus {
border: 0px !important;
}

/* 버튼 */
.btn, a.btn{ 
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;}

.btn3, a.btn3{ 
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;}

label.radio { font-size:25px; color:#fff; }
.radio input { display:none; }
.radio span { display:inline-block;vertical-align:middle;cursor:pointer; }
.radio .radio_w { margin-right:30px; }
.radio .icon1 { position:relative; margin-right:6px; top:-3px; width: 25px;height: 25px;border: 1px solid #fff; background:#fff; border-radius: 50%; transition: background 0.3s ease;}
.radio .icon1::after { content: '';position: absolute;top: 8px;left: 8px;width: 8px;height: 8px;border:4px solid #fff; border-radius:50%; transform: rotate(360deg) scale(0);transition: all 0.3s ease;transition-delay: 0.0s;opacity: 0;}
.radio .text { margin-left: 5px;}
.radio input:checked ~ .icon1 { border-color: transparent;background: #00F6FF;animation: jelly 0.6s ease;}
.radio input:checked ~ .icon1::after { opacity: 1;transform: rotate(45deg) scale(1);}

label.checkbox { font-size:17px; color:#fff; }
label.checkbox.span_ { margin-right:15px; }
.checkbox input { display:none;}
.checkbox span { display:inline-block;vertical-align:middle;cursor:pointer;}
.checkbox .icon1 { position:relative; top:-2px; width: 22px;height: 22px;border: 1px solid #fff; background:#fff; border-radius: 3px;transition: background 0.3s ease;}
.checkbox .icon1::after { content: '';position: absolute;top: 2px;left: 7px;width: 7px;height: 15px;border-right: 3px solid #fff;border-bottom: 4px solid #fff;transform: rotate(45deg) scale(0);transition: all 0.3s ease;transition-delay: 0.15s;opacity: 0;}
.checkbox .text { margin-left: 5px;}
.checkbox input:checked ~ .icon1 { border-color: transparent;background: #00F6FF;animation: jelly 0.6s ease;}
.checkbox input:checked ~ .icon1::after { opacity: 1;transform: rotate(45deg) scale(1);}


label.radio2 { font-size:28px; }
.radio2 input { display:none; }
.radio2 span { display:inline-block;vertical-align:middle;cursor:pointer; margin-right:6px; }
.radio2 .icon2 { position:relative; margin-right:6px; top:-3px; width: 25px;height: 25px;border: 1px solid #888; background:#fff; border-radius: 50%; transition: background 0.3s ease;}
.radio2 .icon2::after { content: '';position: absolute;top: 8px;left: 8px;width: 8px;height: 8px;border:4px solid #fff; border-radius:50%; transform: rotate(360deg) scale(0);transition: all 0.3s ease;transition-delay: 0.0s;opacity: 0;}
.radio2 input:checked ~ .icon2 { border-color: transparent;background: #ff0000;animation: jelly 0.6s ease;}
.radio2 input:checked ~ .icon2::after { opacity: 1;transform: rotate(45deg) scale(1);}

label.checkbox2 { font-size:28px; }
.checkbox2 input { display:none;}
.checkbox2 span { display:inline-block;vertical-align:middle;cursor:pointer; margin-right:6px; }
.checkbox2 .icon2 { position:relative; top:-3px; width: 26px;height: 26px;border: 1px solid #888; background:#fff; border-radius: 3px;transition: background 0.3s ease;}
.checkbox2 .icon2::after { content: '';position: absolute;top: 2px;left: 7px;width: 7px;height: 15px;border-right: 3px solid #fff;border-bottom: 4px solid #fff;transform: rotate(45deg) scale(0);transition: all 0.3s ease;transition-delay: 0.15s;opacity: 0;}
.checkbox2 input:checked ~ .icon2 { border-color: transparent;background: #ff0000;animation: jelly 0.6s ease;}
.checkbox2 input:checked ~ .icon2::after { opacity: 1;transform: rotate(45deg) scale(1);}