:root {
            --point-color: #024290;
            --dark-color: #576574;
            --border-color: #e1e4e8;
            --bg-light: #f8f9fa;
            --primary: #024290;
            --text-dark: #1e293b;
            --text-gray: #64748b;
            --white: #ffffff;
            --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
            --radius: 5px;
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {height: 100%;}

.container{
    margin:0 auto; 
	width:100%;
	padding:0;
    min-height: calc(100% - 266px);
	overflow:hidden;
}


/* ============상단탑메뉴============== */

header{
  display:block;
  height:80px;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
.top_login_tx{
   position: absolute;
   height:25px;
   top:10px;
   right:10px;
}

.top_login_tx li{
   display:inline-block;
   font-weight:600;
   font-size:14px;
}

.top_logo{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}
.top_logo img {
    width: 47%;
}
nav {
    display: block;
    background: #262626;
}

.menu {
    display: flex;
    justify-content: center;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-size:17px;
    font-weight: 400;
    text-decoration: none;
	width: 170px;
	text-align:center;
    padding: 15px 35px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #024290;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 170px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 14px;
    font-weight: normal;
    display: block;
    color: #292929;
    background: #f5f5f5;
	border-bottom: 1px solid #e9e9e9;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #024290;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 169px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 15px;
    background: #262626;
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #262626;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: #024290;
}

.top_login_tx{top:30px; right:10px;}

@media (max-width: 530px) {
    .top_login_tx{top:20px; right:10px;}
	.top_login_tx li{ font-size: 13px; display: block; text-align: right;}
    .top_logo{justify-content: flex-start;}
	.top_logo img{width:60%;}
    .mainWrap {width: auto; padding: 50px 20px;}
    .menu {display: none;}
    .responsive-menu {display: block;}
     nav {margin: 0; background: none;}
    .menu li {display: block; margin: 0;}

    .menu li a {
	  font-weight: 500;
	  font-size:15px;
      color: #151515;
      width: 100%;
	  background: #f5f5f5;
      border-bottom: 1px solid #d2d2d2;
	}
    .menu li a:hover,.menu li:hover>a {background: #024290; color: #fff;}

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }
    .menu ul ul {left: 0; transform: initial;}
    .menu li>ul ul:hover {transform: initial;}
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}


.img_item {
	width: 100%;
	height:170px;
    margin: 0 auto;
	border:1px solid #000;
    background-image: url("/images/bg01.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    backgorund-size: 100% 100%;
}


  
        
        .main-container2 { width: 100%; max-width: 1100px; margin: 40px auto; padding:10px;}

        /* --- 상단 섹션 --- */
        .top-content2 { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
        
        /* 슬라이더 (반응형 높이 설정) */
        .slider-wrapper-n { flex: 2; min-width: 300px; height: 400px; position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
        .slides-n { display: flex; width: 400%; height: 100%; transition: transform 0.6s ease; }
        .slide-item-n { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: var(--text-gray); }
        .slide-item-n:nth-child(1) { background-image: url("/images/0001.jpg"); background-size: cover;}
        .slide-item-n:nth-child(2) { background-image: url("/images/0002.jpg"); background-size: cover;}
        .slide-item-n:nth-child(3) { background-image: url("/images/0003.jpg"); background-size: cover;}
        .slide-item-n:nth-child(4) { background-image: url("/images/0004.jpg"); background-size: cover;}

        .slider-btn-n { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.3); color: white; border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; z-index: 5; }
        .prev-n { left: 15px; }
        .next-n { right: 15px; }

        /* 로그인 박스 */
        .login-box-n { flex: 1; min-width: 300px; background: var(--white); border-radius: var(--radius); border: 1px solid #e2e8f0; box-shadow: var(--shadow); display: flex; flex-direction: column; }
        .login-box-n h3 { margin-bottom: 20px; font-size: 1.25rem; text-align: center; }
        .login-box-n input { width: 100%; padding: 14px; margin-bottom: 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 1rem; }
        .btn-login-n { background: var(--primary); color: white; border: none; padding: 14px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem; margin-top: 5px; }

        /* [추가] 로그인 하단 버튼 그룹 */
        .login-sub-btns { display: flex; gap: 10px; margin-top: 15px; border-top: 1px dashed #eee; padding-top: 15px; }
        .login-sub-btns a { flex: 1; text-align: center; padding: 10px; border: 1px solid #e2e8f0; border-radius: 4px;  text-decoration: none; transition: 0.2s; }
        .login-sub-btns a:hover {background: #f8fafc; color: var(--primary); border-color: var(--primary); }

        /* --- 하단 섹션 --- */
        .bottom-content { display: flex; gap: 20px; flex-wrap: wrap; }
        
        /* 고객센터 */
        .cs-center { flex: 1; min-width: 300px; background: var(--white); padding: 25px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid #e2e8f0; }
        .cs-info p { font-weight: 800; margin-bottom: 5px; }
        .cs-info span { color: var(--text-gray); display: block; margin-bottom: 15px; }
        .btn-map { width: 100%; padding: 12px; background: #b81c4b; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }

        
/* [데스크톱] 퀵 메뉴 기본 스타일 및 애니메이션 */
        .quick-menu { 
            flex: 2; 
            min-width: 300px; 
            display: flex; 
            gap: 15px; 
        }

        .menu-item { 
            flex: 1; 
            background: var(--white); 
            border-radius: var(--radius); 
            border: 1px solid #e2e8f0; 
            position: relative; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            height: 200px; /* 버튼 공간 확보를 위해 높이 약간 조절 */
            overflow: hidden; 
            transition: var(--transition); 
            box-shadow: var(--shadow); 
            cursor: pointer; 
        }
        /* .menu-item:hover { border: 1px solid #b81c4b; } */
        .menu-icon {
            font-size: 2rem; 
			text-align: center;
            margin-bottom: 10px;
            transition: all 0.4s ease;
        }

        .menu-icon2 {
		    font-size: 18px;
			font-weight: 800;
			text-align: center;
			/* color:#b81c4b; */
			margin-bottom: 10px;
			transition: all 0.4s ease;
        }

        .menu-title2 { 
            font-size: 18px;
            font-weight: 700;
            transition: all 0.4s ease;
        }
        
        .sub-buttons { 
            position: absolute; 
            bottom: -150px; /* 데스크톱에서는 숨김 */
            display: flex; 
            flex-direction: column; 
            gap: 6px; 
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
            width: 85%;
        }



        .sub-buttons button { 
            padding: 8px 0; 
            border: 1px solid #334155; 
            background: white; 
            color: #334155; 
            border-radius: 4px; 
            cursor: pointer; 

        }

		.sub-buttons button:hover { 
            padding: 8px 0; 
            border: 1px solid var(--primary); 
            background: var(--primary); white; 
            color:white;  
            border-radius: 4px; 
            cursor: pointer; 

        }

        /* 데스크톱 호버 효과 */
        @media (min-width: 851px) {
		    
            .menu-item:hover .menu-icon,
            .menu-item:hover .menu-title2 { 
                transform: translateY(-60px); 
                opacity: 0; 
            }
            .menu-item:hover .sub-buttons { 
                bottom: 50%; 
                transform: translateY(50%); 
            }

        }

   

        /* 모바일 전용 (600px 이하) */
        @media (max-width: 600px) {
		   .main-container2 { margin: 10px auto;}
            .quick-menu { 
                display: grid;
                grid-template-columns: 1fr; /* 한 줄에 하나씩 크게 */
            }
            .menu-item {
                flex-direction: row; /* 아이콘/글자 옆으로 배치 */
                justify-content: space-between;
                padding: 20px;
            }
            .menu-info { display: flex; align-items: center; gap: 15px; } /* 아이콘+글자 그룹화 */
            .sub-buttons { width: 40%; } /* 버튼 영역을 우측으로 */
        }



        /* --- 📱 반응형 분기점 --- */

        /* 1. 태블릿 이하 (850px 미만) */
        @media (max-width: 850px) {
            .top-content2, .bottom-content { flex-direction: column; }
            .slider-wrapper-n { display: none; }
            .sub-buttons > div { display: none; }
            .menu-item { height: 150px; }
        }

        /* 2. 모바일 (600px 미만) */
        @media (max-width: 600px) {
            .slider-wrapper-n { height: 220px !important; }
            .login-box-n { padding: 10px; }
            
            .menu-item { 
                flex-direction: row; 
                justify-content: space-around; 
                padding: 5px 20px;
            }
           
            .sub-buttons { 
                position: static; 
                bottom: 0; 
                display: flex; 
            }
            .menu-title2 { font-size: 1.5rem; margin-right: 10px; }
        }










/*------------------- 상단이미지--------------------- */
.images-wrapper {
    display:flex;
	justify-content: center;
    align-items: center;
	position: relative;
    height: 170px;
	border-bottom:1px solid #474747;
}

.images-wrapper .images {flex-grow:1;}



.img01{
    background: url('/images/bg02.png') no-repeat;
    height:80px;
    background-position: center;
    background-size: cover;
	border-bottom:1px solid #474747;
}

.img02{
    background: url('/images/bg02.png') no-repeat;
    height: 80px;
    background-position: center;
    background-size: cover;
	border-bottom:1px solid #474747;
}


/* @keyframes up-down{
  from{
    transform: translatey(0px);
  }
  to{
    transform: translatey(-400px);
  } 
}

 .imgwrap{
  background-image: url('/images/mimg_d.jpg'); height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; animation: up-down 1.4s infinite ease-in-out alternate;
} 
*/






/* 본문 */
.wrap{ 
    display: flex;
    position: relative;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
}

.contant{ 
    flex-grow: 1;
	padding: 20px;
	text-align:center;
}

.iconbox{/* position: absolute; */margin-top: 10px;}
.icontxt{margin:20px 0;  flex-grow: 1; font-size:16px;}
 
.iconbox img {
    display: block;
    margin: 0 auto;
}
.iconbox span{
	display:block; 
	margin: 0 auto; 
	padding:8px;
	font-size:23px;
	font-weight:800;
	text-align:center;
	color:#191919;
}
.iconbox .title_bar{
    margin: 0 auto; 
    width:22px;
    height:5px;
    background: #024290;
}

.logbox{position: relative; min-height: 150px;  max-width: 600px; margin:0 auto;}
.logbox ul{ width:100%;}
.logbox ul li{ display:inline-block; vertical-align: top;}
.logbox ul li:first-child{ width:65%;}
.logbox ul li:last-child{ width:20%; margin-left:1%;}

.log_btn{
    display: block;
    padding: 36px 30px;
    background: #024290;
    border: 1px solid #024290;
    border-radius: 7px;
    color: #fff !important;
    transition: 0.3s all;
}
.logbtn:hover{background: #01a450; border: 1px solid #006f02;}


@media (max-width: 2360px){
.icontxt{font-size:14px;}
.logbox ul li{ display:block; margin:0 auto;}
.log_btn{width:100%;  padding: 14px 30px; margin-top:45px; margin-bottom:20px;}
.logbox ul li:first-child{ width:100%;}
.logbox ul li:last-child{ width:100%; margin-left:0; margin-top:50px;}
.chkbox{top:95px; left:0 !important;}
}

.chkbox{position: absolute; left: 40px; height: 40px; text-align:left;}
.chkbox2{left: 40px; height: 40px; text-align:left;}
/* .cntr{position:absolute; top:-5px; left:40px;} */

/* 체크박스 스타일 */
.label-cbx{user-select:none;cursor:pointer;margin-bottom:0}
.label-cbx input:checked+.checkbox{border-color:#024290;}
.label-cbx input:checked+.checkbox svg path{fill:#024290;}
.label-cbx input:checked+.checkbox svg polyline{stroke-dashoffset:0}
.label-cbx:hover .checkbox svg path{stroke-dashoffset:0}
.label-cbx .checkbox{
position:relative; top:2px; float:left; margin-right:8px;
width:20px; height:20px; border:2px solid #c8ccd4;border-radius:3px;}
.label-cbx .checkbox svg{position:absolute;top:-2px;left:-2px}
.label-cbx .checkbox svg path{
fill:none; stroke:#024290; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:71px; stroke-dashoffset:71px;
transition:all .6s ease
}
.label-cbx .checkbox svg polyline{
fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;
stroke-linejoin:round;stroke-dasharray:18px;
stroke-dashoffset:18px;transition:all .3s ease
}
.label-cbx>span{
    pointer-events: none;
    display: inline-block;
    position: relative;
    top: 10px;
    vertical-align: middle;
}
.invisible{position:absolute; z-index:-1; width:0; height:0; opacity:0}


.logfwbox{max-width: 600px;
    margin: 0 auto;
    text-align: left;
   }
.logfwbox ul{width:87%; margin:0 auto;}
.logfwbox ul li{display:block; border-bottom:1px solid #ccc; padding:15px 0; position: relative}
.logfwbox ul li span{padding:10px 0;}
.logfwbox li a{float:right;}

.btn_joinpw{position:absolute; top:8px; right:5px; padding: 7px 20px; transition: 0.3s all;}
.btn_joinpw:hover{background:#474747; color:#fff; border: 1px solid #393939;}


@media (max-width: 2530px){
.logfwbox ul{width:100%; margin:10px 0;}
.logfwbox ul li span{border-bottom:0;}
.logfwbox ul li{padding-left:0px; margin:10px 0; border-bottom:0;}
.logfwbox ul li a{position: absolute; top: 40px; width: 100%;left: 0;}
}



/* =====공지사항 메인======== */
.noticebox{
    position: relative;
    width: 100%;
    padding: 20px 0px;
    margin-bottom: 20px;
    background: #f5f5f5;

}
.notice{
    display: flex;
    max-width: 530px;
    margin: 0 auto;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

}
.nt_icon{
    width: 20%;
    padding: 13px 15px 15px 0;
    vertical-align: top;
    text-align: center;
    display: inline-block;
}

.nt_icon li:first-child{}
.nt_icon li h3{margin: 10px 0px; font-size:18px; font-weight:700;}

.nt_txt{ 
    width: 80%; 
    display:inline-block; 
    padding:0 0 0 10px;
}


.nt_txt li {padding:7px 10px; border-bottom:1px solid #ccc;}
.nt_txt li a {position: relative; display:block;line-height: 27px; padding-right: 110px;}
.nt_txt li a .nt_title {display: block;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;}
.nt_txt li a .nt_date {position: absolute;right: 0;top: 0; margin-left:10px;}
.nt_txt li a .nt_title:before{
    content:"ㆍ";
    display:inline-block;
    margin-right:10px;
}

.more{
    border: 1px solid #ccc;
    font-size: 13px;
    padding: 5px 10px;
    background: #fff;
    border-radius: 5px;
}


@media (max-width: 530px){
.nt_txt{ 
    width: 100%; 
    padding:10px;
}
.nt_icon {width:100%;display:inline-block; }
.more{position: absolute;top: 30px; right: 10px;}}


/*==================== 회원가입====================== */
.joinbox{border-radius: 5px;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    background: #fff;
    margin: 0 auto;
    text-align: left;
    padding: 30px;
    border: 1px solid #dfdfdf;
   /*  box-shadow: 2px 2px 3px #e0e0e0; */
    flex-direction: column;
}

.btnbox{max-width: 1000px; display: flex; justify-content: center; margin: 0 auto;}

.btnbox2{ display: flex; justify-content: center;}
.btnbox3{margin: 0 auto;  max-width:1000px; display:flex; justify-content: flex-end;}

.divider { height: 1px; background: #ddd; margin: 10px  0 25px 0}

.zero-n{padding-right: 4px; padding-left:4px;}
.zero-l{padding-right: 8px; padding-left:0 !important;}
.zero-r, .zero-e{padding-left: 8px; padding-right:0 !important;}

.zero{padding:0 !important;}
.required, .n_required{font-size: 16px; padding: 5px;}
.required:before {
   display:bolck;
   content:"*";
   color:#da0000;
   font-size:14px;
   line-height:10px;
   padding: 0 5px 0 5px;
}
.n_required:before {content:""; padding: 0 5px 0 5px;}
.point{display:inline-block; }
.jointxt{display:inline-block; font-size:18px; font-weight:700;}
.help-block{font-size:14px; font-weight:500; padding:0 0 10px 0;}
.help-block2{font-size:14px; font-weight:500;margin-top: 5px;}


.select_design select.form-control {
position: absolute;
    z-index: 200000;
    min-width: 100px;
    opacity: 100;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    top: 0;
    left: 0;
}
.select_design {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
	text-align: left
}
/* .select_design:after {
    font-size: 1.2em;
    line-height: 18px;
    position: absolute;
    top: 50%;
    right: 8px;
    width: 12px;
    height: 18px;
    margin-top: -9px;
    content: '▾';
    text-align: center;
    color: #7e7e7e;
    background: none;
} */

.join_btn{
    width:49%;
    margin-left: 1%;
	text-align:center;
    padding: 13px;
background-color: #145BDA;
    border: 1px solid #024290;
    border-radius: 7px;
    color: #fff !important;
    transition: 0.3s all;
}
.join_cc{
    width:49%;
    margin-right: 1%;
	text-align:center;
    padding: 13px;
    background: #474747;
    border: 1px solid #154a16;
    border-radius: 7px;
    color: #fff !important;
    transition: 0.3s all;
}
.join_btn:hover{background: #012755; border: 1px solid #012755;}
.join_cc:hover{background: #808080; border: 1px solid #292929;}

@media (max-width: 530px){
.joinbox{padding: 15px;}
.required. .n_required {font-size: 15px; padding: 7px 0px;}
.required:before {padding: 0 3px;}
.n_required:before {padding: 0;}
.help-block{font-size:13px;padding:0 0 5px 0;}
.input-group-addon{padding: 6px; font-size: 13px;}
.zero-n{padding-right: 2px; padding-left:2px;}
.zero-l{padding-right: 4px; padding-left:0 !important;}
.zero-r{padding-left: 4px; padding-right:0 !important;}
.zero-e{padding-left: 0; padding-right:0 !important;}
.select_design {margin-top: 5px;}
}


/* ============수강신청======================= */


.skwrap{
    max-width: 1000px;
    display: flex;
    justify-content: center;
    background: #fcfcfc;
    border: 1px solid #dfdfdf;
    box-shadow: 2px 2px 3px #e0e0e0; 
    margin: 0 auto;
    text-align: left;
    padding: 30px 10px;
    flex-direction: column;
}

.sk2wrap{
    max-width: 1000px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    text-align: left;

    flex-direction: column;
}

/* 테이블 */

/* .basic-nbd {
    position: absolute;
    width: 100%;
} */

.basic-nbd table {width: 100%;}

.basic-nbd table,
.basic-nbd table th,
.basic-nbd table td {
    border: 1px solid #c8c8c8;
    border-collapse: collapse;
    padding: 12px 8px;
}
        
.basic-nbd th {
    width: 20%;
    background-color: #f0f0f0;
    color: #000000;;
    text-align: center;
    font-weight: 500;
}
        
.basic-nbd td {text-align: left; background-color: #ffffff;}

.none{    
    position: absolute;
    display: block;
    width: 100%;
    height: 143px;
    border: 1px solid #808080;
    background-color: #4343437a;
    z-index: 99999;
}

@media (max-width: 612px){.none{height: 166px;}}
@media (max-width: 570px){.none{height: 188px;}}
@media (max-width: 530px){.none{height: 157px;}}
@media (max-width: 507px){.none{height: 178px;}}
@media (max-width: 494px){.none{height: 190px;}}
@media (max-width: 457px){.none{height: 208px;}}
@media (max-width: 457px){.none{height: 238px;}}
@media (max-width: 457px){.none{height: 241px;}}

.txinfo{color:red; font-size:14px;}

@media (max-width: 530px){
.skwrap{padding: 30px 0px;}
.basic-nbd table th {font-size:14px; text-align: left; width: 22%; padding: 12px 6px;}
.basic-nbd table td {font-size:14px;line-height: 30px; vertical-align: middle; padding: 12px 4px;}
}


.sk-sp {
    position: relative; top: -2px; background-color: #303030;
    padding: 5px 20px; color: #fff;  border-radius: 30px;
    font-size: 13px; margin-right: 10px;
}

.sk_title {font-size: 18px; font-weight: 600; text-align: left; padding: 10px 0px;position: relative;}


/* 버튼기본 */
 .sk-btn {
	display: block;
	padding: 12px;
	position: relative;
	background-color:#fff;
	border:1px solid #ccc;
	font-size: 16px;
	text-align: center;
	border-radius: 3px;
}
 .nx_btn {
    display: block;
    padding: 12px;
    font-size: 16px;
    text-align: center;
    border-radius: 3px;
    color: #fff !important;
    background-color: #145BDA;
    border: 1px solid #024290;
}
.nxbtn-icon {position: absolute;top: 15px;} 
.skbtn-icon {position: absolute;right: 20px; top: 15px; color: #fff806;}        
.sk-box {
/*     padding: 14px;
    height: 246px;
    overflow-y: auto;
    background-color: #fafafa;
    border: 1px solid #494949; */
    width: 100%;
    padding: 14px;
    height:254px;
    overflow-y: auto;
    background-color: #f3f3f3;
    border-top: 3px solid #024290;
}
.sk-box2 {
/*     padding: 14px;
    height: 246px;
    overflow-y: auto;
    background-color: #fafafa;
    border: 1px solid #494949; */
    width: 100%;
    padding: 14px;
    height:80px;
    background-color: #f3f3f3;
    border-top: 3px solid #024290;
}
.sk-box2 a{display:inline-block;}

.sk-box a{margin-bottom:10px;}
.sk-box a:last-child{margin-bottom:0px;}

.lockerbox{display: flex;
    /* border: 1px solid #ccc; */
    flex-direction: row;
    flex-wrap: wrap;
   }

.lockerbox > div{display: block;
    padding: 12px;
 
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 15px;
    text-align: center;
    border-radius: 3px;
    width: 9%;
    margin: 0.5%; }


.colorcate {
position: absolute;
    top: 14px;
    right: 0;
    text-align: right;
    font-size: 0; 
}

.colorcate li {
    display: inline-block;
    font-size: 14px;
	padding-right: 25px;
}

.colorcate li:last-child {
    margin-right: 0
}


@media (max-width: 768px){
.lockerbox > div{width: 24%;}
.colorcate {
    position: static;

    text-align:left;
    font-size: 0; 
}
}


/* - ------------------예약 색상 -------------*/
.colorcate span {
    width: 30px;
    height: 20px;
    display: inline-block;
    border-radius: 10%;
    margin-bottom: -5px;
}

.d_choise {
    background-color: #0c3a74 !important;
    border: 1px solid #224c82 !important;
    color: #fff !important;
    cursor: default !important;
}

.d_reserv{
    /*display:block;*/
    background-color: #FFCC00 !important;
    border: 1px solid #FFB400 !important;
    color: #111 !important
}

.d_use{
    background-color: #fffff !important;
    border: 1px solid #AAAAAA !important;
    color: #aaa !important;
    cursor: default !important;
}

.btc01{background-color:#5287c8 !important; border: 1px solid #3f7dc9 !important;  color:#ffffff !important;}
.btc02{background-color:#235ca2 !important; border: 1px solid #0e488e !important; color:#ffffff !important;}
.btc03{background-color:#174e91 !important; border: 1px solid #004407 !important; color:#ffffff !important;}
.btc04{background-color:#0c3a74 !important; border: 1px solid #224c82 !important; color:#ffffff !important;}
.btc05{background-color:#025c21 !important; border: 1px solid #013f07 !important; color:#ffffff !important;}

/* 스크롤바 설정*/
  .sk-box::-webkit-scrollbar{width: 10px;}
/* 스크롤바 막대 설정*/
  .sk-box::-webkit-scrollbar-thumb{background-color: #bdbdbd;}
/* 스크롤바 뒷 배경 설정*/
  .sk-box::-webkit-scrollbar-track{background-color: #e0e0e0;}


  .resk-btn{
    padding: 4px 20px;
    /* float: right; */
    font-size: 14px;
    text-align: center;
    border: 1px solid #630198;
    background-color: #961eac;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}
  .resk-btn:hover{
    border: 1px solid #430067;
    background-color: #781d89;
    color: #fff !important;
}


@media (max-width: 530px){
   .sk-btn {font-size: 13px; text-overflow: ellipsis; overflow: hidden;} 
   .resk-btn {padding: 4px; font-size: 13px;}
}




/* footer */
footer{
    position: relative;
    background-color: #262626;
}
.quicklink{
    border-bottom: 1px solid #767676;
	text-align: center;
    padding: 10px;
}
.quicklink span{color:#fff; font-size:14px;}
.bar{color:#fff; padding:0 10px; font-size:14px;}
.address{
	display:flex;
	padding:12px;     
	align-items: center;
	justify-content: center;
}
.address li{color:#fff; font-size:14px; font-weight:300; text-align:left;}

@media (max-width: 530px){
.quicklink{text-align: left; padding:12px;}
.quicklink span{font-size:13px; font-weight:400;}
.address li{font-size:13px;}
.downbtn{display:block;}
}



/* 공지사항 및 테이블 */
.listbtn{
	text-align:center;
    padding: 8px 30px;
    background: #024290;
    border: 1px solid #024290;
    border-radius: 7px;
    color: #fff !important;
    transition: 0.3s all;
}
.downbtn{
	text-align:center;
    padding: 6px 12px;
    background: #474747;
    border: 1px solid #024290;
	font-size:13px;
    border-radius: 3px;
    color: #fff !important;
    transition: 0.3s all;
}
.listbtn:hover{background: #01a450; border: 1px solid #006f02;}
.downbtn:hover{background: #808080; border: 1px solid #292929;}
.downbox{float: left; padding: 8px; clear: both;}
.downtxt{margin-right:10px;}

@media (max-width: 530px){
.downbtn{display:block;}
}



.table { 
	width:100%;
	max-width:100%;
	/* border-top: 2px solid #000 !important ;  */
	border-bottom: 1px solid #999 ; 
	margin-bottom:0;
	border-spacing: 0;
	border-collapse: collapse;
}
.table .re { color: #ccc ; font-weight: 100; font-size: 0.8em;}
.table th {text-align: center;  word-break: keep-all; background: #f9f9f9; font-size:15px; font-weight:500; }
.table td{ text-align:center;}
.table  p{margin-bottom:0;}
.table img{width:100%;}

/* table option */
.td_left td {text-align: left;}
.td_center td {text-align: center;}
.td_first tr td:first-child{background-color:#f9f9f9;}
.table.priceS span:before{content:'/';}
.wordkeep table *{word-break: keep-all; }

/* scroll table ================= */
.scrolltb-box{ width: 100%; overflow:auto;}
.scrolltb-box table{}

.data_none{text-align:center; padding:15px 0; }
.data_none p{margin:0;}

.table>tbody>tr>td, .table>tbody>tr>th, 
.table>tfoot>tr>td, .table>tfoot>tr>th, 
.table>thead>tr>td, .table>thead>tr>th { 
vertical-align: middle;
}
	
	
@media (max-width: 530px){
.td_block {border: 0 !important;}
.td_block td, .td_block th{
	display: block;
	width: 100%;
	height:36px;
	line-height:36px !important;
	padding:0 10px !important;
	font-size:14px;
	text-align: left;
	position:relative;
	border-top:0 !important;
	border-left:0 !important;
}
.td_block td.twoline {display: inline-block; width:50%;}
.td_block tr:first-child {display: none;}
.td_block tr {
	font-size:0;
	display: block;
	position:relative;
	border-top:2px solid #aaa !important;
	border-bottom:10px solid #fff !important;
}
.td_block tr:after{
	position: absolute;
	top:0;left:0;
	line-height: 37px;
	color:#111;
	font-size:14px;
	padding:0 5px;
	text-align:center;
}
.td_block td:first-child{background-color:#eee;}
.td_block td:empty{min-height:37px;} td높이
		
.td_block td.col2{min-height:calc(37px * 2); line-height: calc(37px * 1.5);}
.td_block td.col3{min-height:calc(37px * 3); line-height: calc(37px * 2.5);}
.td_block td.col4{min-height:calc(37px * 4); line-height: calc(37px * 3.5);}
.td_block td.col5{min-height:calc(37px * 5); line-height: calc(37px * 4.5);}

.td_block.td_firstB tr{border-bottom:0 !important; border-top:0 !important}
.td_block.td_firstB tr:first-child{display:block; border-top:1px solid #ddd !important;}
.td_block.td_firstB tr:first-child td:not(:first-child){display:none;}
.td_block.td_firstB tr:nth-child(odd) td{background-color:#f0f0f0 !important;}
.td_block.td_firstB tr td:first-child{background-color:#fff;}
}

	
/*검색*/
.bbs_search_outer {position: relative; text-align: center; margin-top: 15px;}
.bbs_search_box {display:inline-block;}

.bbs_search_box .bbs_search_select {width: 80px; margin-right:3px; float:left;}
.bbs_search_box .bbs_search {width:250px; float:right;}
.text-overflow {
    text-align: left;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* table*/
.table_bbs {table-layout:fixed;}
.table_bbs tr.notice2 { background:#edf9ff;} 
.table_bbs .bbs_title a{font-weight: 500;color:#333;}
.table_bbs .bbs_title a:link,.table_bbs .bbs_title a:visited{color:#333;}
.table_bbs .bbs_title a:hover,.table_bbs .bbs_title a:active{color:#67B0D6;}
.bbs_no,.bbs_writer {text-align:center; width: 80px;}
.bbs_date {text-align center; width:100px;}
.bbs_title .label {padding:0.1em 0.6em 0.2em 0.6em;}
.bbs_btn{padding:20px 0; text-align:right;}

/*view*/
.bbs_view {border-bottom: 1px solid #ccc !important; margin-bottom: 0;}
.bbs_content {min-height:300px; padding:15px; border-bottom:1px solid #ccc; margin-bottom:15px; background-color:#f9f9f9;}
.bbs_content img{width:100%; max-width:max-content;}

.xs_view{display:none;}
.md_view{display:block;}
span.md_view {display: inline;}
table th.md_view, 
table  td.md_view{display:table-cell;}
table tr.md_view {display: table-row;}

.select_design2 select.form-control {
	position: absolute;
    z-index: 2;
    min-width: 100px;
    opacity: 0;
    border: none;
    box-shadow: none;
    top: 0;
    left: 0;
}
.select_design2 {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
	text-align: left
}
.select_design2:after {
    font-size: 1.2em;
    line-height: 18px;
    position: absolute;
    top: 50%;
    right: 8px;
    width: 12px;
    height: 18px;
    margin-top: -9px;
    content: '▾';
    text-align: center;
    color: #7e7e7e;
    background: none;
}


.select_design2 {margin-top: 0px;}

@media (max-width: 530px){
    .bbs_search_box .bbs_search {width:130px; float:right;}
	.bbs_content img{width:100% !important}
	.bbs_view.td_block {border-bottom: 1px solid #ccc !important; background-color:#f8f8f8;}
	.bbs_view.td_block tr{border-bottom:0  solid #ddd !important;}
	.bbs_view.td_block td{}
	.bbs_view.td_block tr:nth-child(2) td:nth-child(1){
	  border:1px solid #ddd !important; border-radius:5px;width: 20%; 
	  max-width:60px; position:absolute; padding: 3px !important;
	  text-align:center; left:8px; top:10px; line-height: 27px !important;
	  background-color:#fff;z-index:10;
	  }
	.bbs_view.td_block tr:nth-child(2) td:nth-child(2){
	  width:100%; padding-top: 45px !important; background-color:#f0f0f0;
	  font-weight:500; word-break:keep-all;height: auto;
	  }
	.bbs_view.td_block tr:nth-child(2) td:nth-child(3):before{content:'작성자 : '; }
	.bbs_view.td_block tr:nth-child(2) td:nth-child(4):before{content:'등록일 : '; }
	.md_view{display:none !important;}
	.xs_br {display:block;}
	table th.xs_view, table td.xs_view{display: table-cell;}
	table tr.xs_view {display:table-row;}
}


/*****************************************************************
아이디, 비밀번호 찾기
*****************************************************************/
.findbox{
position: relative;
    max-width: 630px;
    display: flex;
    justify-content: center;
    background: #fcfcfc;
    margin: 0 auto;
    text-align: left;
    padding: 30px;
    border: 1px solid #dfdfdf;
	flex-direction: column;
    box-shadow: 2px 2px 3px #e0e0e0;
}
.findbox2{
    position: absolute;
    display: block;
    top: 30px;
    right: 30px;


}
.findbtn {
    padding: 14px 40px;
    background: #337ab7;
    border: 1px solid #0c4991;
    border-radius: 5px;
    color: #fff !important;
    transition: 0.3s all;
}
.findbtn:hover{
    background: #2c93eb;
    border: 1px solid #0a74f0;
}

@media (max-width: 480px){
.findbtn { padding: 8px 15px;}
.findbox2{top: 20px; right:10px;}
.findbox{ padding: 15px;}
}


.rules-wrap{
    max-width: 1000px;
    display: flex;
    justify-content: center;
    background: #fcfcfc;
    margin: 0 auto;
    text-align: left;
    margin-top: 20px;
}
.rules-box {
    width: 100%;
    padding: 14px;
    height: 500px;
    overflow-y: auto;
    background-color: #f3f3f3;
    border-top: 3px solid #024290;
}

.rulesmenu  {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #262626;
}
.rulesmenu :after{
    content:'';
    display: block;
    clear:both;
}
.rulesmenu  li {
    float: left;width: 25%;
}
.rulesmenu  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.rulesmenu  li a:hover:not(.active) {
    background-color: #024290;
}
.active {
    background-color: #024290;
}

@media (max-width: 680px){

.rulesmenu  li  {
    display: block;
    float: left;
    width: 50%;
    BORDER: 1PX SOLID #FFF;

}

}

.rules-wrap2{
    max-width: 1000px;
    display: flex;
    justify-content: center;
    background: #fcfcfc;
    margin: 0 auto;
    text-align: left;
    margin-top: 20px;
}

.rulesmenu2  {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #262626;
}
.rulesmenu2 :after{
    content:'';
    display: block;
    clear:both;
}
.rulesmenu2  li {
    float: left;width: 33.3333%;
}
.rulesmenu2  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.rulesmenu2  li a:hover:not(.active) {
    background-color: #024290;
}
.active {
    background-color: #024290;
}

@media (max-width: 480px){
.rulesmenu2  li  {
    width: 100%;
	border-bottom:1px solid #8d8d8d;
}

}


.btn_view{
    border-radius: 3px;
    /* border: 1px solid #c8c8c8; */
    background-color: #006B34;
    padding: 6px 15px;
    font-size: 14px;
    color: #fff !important;
}
.bt_del{
	background-color: #656565;
	color: #fff !important;
	padding: 6px 15px; 
	border-radius: 3px;
	font-size: 14px;
}

.bt_del2{
	background-color: #6a6a6a;
    border: 1px solid #292929;
	color: #fff !important;
	padding: 6px 15px; 
	border-radius: 3px;
	font-size: 14px;
}

.bt_del3{
    z-index: 99;
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: #d12b2b;
    border: 1px solid #940000;
    color: #fff !important;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 14px;
}

 @media (max-width: 878px) { 
 .bt_del3{
	background-color: #d12b2b;
    border: 1px solid #940000;
	top: 4px; 
	right: 3px;
	padding: 3px; 
	border-radius: 3px;
	font-size: 12px;
}

 .btn_view{padding: 6px 8px;  font-size: 13px;}	
 .bt_del2{padding: 6px 15px; font-size: 13px;}
}

 @media (max-width: 720px) { 
 .btn_view{padding: 5px 25px; 
     position: absolute;
    top: -31px;
    right: 0px;
    font-size: 12px;
 
 }
}


/* 231019 반응테이블 - 문화강좌리스트*/
.new_table02 table { border-collapse: collapse; width: 100%;}
   
.new_table02 th{
    padding: 10px 4px;
    text-align: left;
    border-top: 2px solid #585858;
    border-bottom: 1px solid #777777;
    text-align: center;
}
.new_table02 td {
    padding: 10px 4px;
    text-align: left;
   /*  border: 1px solid #eee; */
    border-top: 1px solid #eee; 
	border-bottom: 1px solid #eee;
    text-align: center;
}
.new_table02 th {
        background-color: #f2f2f2; font-weight: bold;}
.new_table02 tr {margin-bottom: 10px;}
.new_table02 tr:nth-child(even) {
        /* background-color: #f2f2f2; */
        /* 짝수 행 배경색 설정 */
}

@media (max-width: 820px) {	
	.new_table02 th,
	.new_table02 td{ font-size:13px; }
	.new_table02 td span{font-size:13px;}
	}

 @media (max-width: 720px) { 
	 /* 화면 폭이 768px 이하일 때 적용되는 스타일 */ 
	 .new_table02 table, 
	 .new_table02 thead, 
	 .new_table02 tbody, 
	 .new_table02 th, 
	 .new_table02 td, 
	 .new_table02 tr { display: block;} 
	 .new_table02 thead tr { 
	     font-size:13px;
		 position:absolute; /* 헤더를 절대 위치로 변경 */ 
		 top: -9999px; /* 헤더를 화면 밖으로 이동 */ 
		 left: -9999px; /* 헤더를 화면 밖으로 이동 */ 
	 } 
	 .new_table02 td span{font-size:12px;}
	 .new_table02 td { 
	     font-size:13px;
	     padding: 10px;
		 border: none; /* 테이블 셀 경계선 제거 */ 
		 position: relative; /* 셀을 상대 위치로 변경 */ 
		 padding-left: 110px; /* 셀의 왼쪽 여백 조정 */ 
		 text-align: left; /* 텍스트 정렬 설정 */ 
		 border-top: 1px solid #dedede; /* 	
		 border-bottom: 1px solid #dedede; */
				/* border-right: 1px solid #eee;
				border-left: 1px solid #eee; */
	}

    .new_table02 td::before {
	text-align:left;
	        font-size:13px;
            content: attr(data-label);
            /* ::before 선택자를 사용하여 데이터 레이블을 삽입 */
            position: absolute;
            /* 데이터 레이블을 절대 위치로 설정 */
            left: 0;
            /* 데이터 레이블을 왼쪽 정렬 */
            width: 90px;
            /* 데이터 레이블의 폭을 셀의 절반으로 설정 */
            padding: 8px;
            /* 데이터 레이블의 여백 설정 */
            /* text-indent: 4px; */
            text-align: center;
            font-weight: bold;
            /* 데이터 레이블의 글씨체 굵기 설정 */
            background-color: #f2f2f2;
            /* 데이터 레이블의 배경색 설정 */
            margin-bottom: 10px;
     }
    .new_table02 td:nth-child(1):before {content: 'NO';}
    .new_table02 td:nth-child(2):before {content: '구분';}
    .new_table02 td:nth-child(3):before {content: '개월수';}
	.new_table02 td:nth-child(4):before {content: '번호';}
	.new_table02 td:nth-child(5):before {content: '금액';}
	.new_table02 td:nth-child(6):before {content: '삭제';}


	.new_table02 td:before{
	        font-size:14px;
	        padding: 10px;			
            position: absolute;
            top: 0px;
            /* border-bottom: 1px solid #dedede; */
	}

	.new_table02 td:nth-child(6){border-bottom: 1px solid #dedede;}
}



/* 231019 반응테이블 - 문화강좌 결제*/
.new_table03 table { border-collapse: collapse; width: 100%;}
   
.new_table03 th{
    padding: 10px 4px;
    text-align: left;
    border-top: 2px solid #585858;
    border-bottom: 1px solid #777777;
    text-align: center;
}
.new_table03 td {
    padding: 10px 4px;
    text-align: left;
   /*  border: 1px solid #eee; */
    border-top: 1px solid #eee; 
	border-bottom: 1px solid #eee;
    text-align: center;
}
.new_table03 th {
        background-color: #f2f2f2; font-weight: bold;}
.new_table03 tr {margin-bottom: 10px;}
.new_table03 tr:nth-child(even) {
        /* background-color: #f2f2f2; */
        /* 짝수 행 배경색 설정 */
}

@media (max-width: 820px) {	
	.new_table03 th{font-size:13px; }
	.new_table03 td{font-size:13px; }
	.new_table03 td span{font-size:13px;}
	}



 @media (max-width: 720px) { 
	 /* 화면 폭이 768px 이하일 때 적용되는 스타일 */ 
	 .new_table03 table, 
	 .new_table03 thead, 
	 .new_table03 tbody, 
	 .new_table03 th, 
	 .new_table03 td, 
	 .new_table03 tr { display: block;} 
	 .new_table03 thead tr { 
	     font-size:13px;
		 position:absolute; /* 헤더를 절대 위치로 변경 */ 
		 top: -9999px; /* 헤더를 화면 밖으로 이동 */ 
		 left: -9999px; /* 헤더를 화면 밖으로 이동 */ 
	 } 
	 .new_table03 td span{font-size:12px;}
	 .new_table03 td { 
	     font-size:13px;
	     padding: 10px;
		 border: none; /* 테이블 셀 경계선 제거 */ 
		 position: relative; /* 셀을 상대 위치로 변경 */ 
		 padding-left: 100px; /* 셀의 왼쪽 여백 조정 */ 
		 text-align: left; /* 텍스트 정렬 설정 */ 
		 border-top: 1px solid #dedede; /* 	
		 border-bottom: 1px solid #dedede; */
				/* border-right: 1px solid #eee;
				border-left: 1px solid #eee; */
	}

    .new_table03 td::before {
	text-align:left;
	        font-size:13px;
            content: attr(data-label);
            /* ::before 선택자를 사용하여 데이터 레이블을 삽입 */
            position: absolute;
            /* 데이터 레이블을 절대 위치로 설정 */
            left: 0;
            /* 데이터 레이블을 왼쪽 정렬 */
            width: 90px;
            /* 데이터 레이블의 폭을 셀의 절반으로 설정 */
            padding: 8px;
            /* 데이터 레이블의 여백 설정 */
            /* text-indent: 4px; */
            text-align: center;
            font-weight: bold;
            /* 데이터 레이블의 글씨체 굵기 설정 */
            background-color: #f2f2f2;
            /* 데이터 레이블의 배경색 설정 */
            margin-bottom: 10px;
     }
    .new_table03 td:nth-child(1):before {content: '일자';}
    .new_table03 td:nth-child(2):before {content: '시간';}
    .new_table03 td:nth-child(3):before {content: '상품명';}
    .new_table03 td:nth-child(4):before {content: '신청개월';}
	.new_table03 td:nth-child(5):before {content: '신청금액';}
    .new_table03 td:nth-child(6):before {content: '신청상태';}
	.new_table03 td:nth-child(7):before {content: '삭제';}





	.new_table03 td:before{
	        font-size:13px;
	        padding: 10px;			
            position: absolute;
            top: 0px;
            /* border-bottom: 1px solid #dedede; */
	}

	.new_table03 td:nth-child(7){border-bottom: 1px solid #dedede;}
}

 @media (max-width: 480px) { 
	.new_table03 td:nth-child(1):before{
	        font-size:14px;
	        padding: 20px 10px;			
            position: absolute;
            top: 0px;
            /* border-bottom: 1px solid #dedede; */
	}
}






/* 231019 반응테이블 - 문화강좌 결제*/
.new_table03n table { border-collapse: collapse; width: 100%;}
   
.new_table03n th{
    padding: 10px 4px;
    text-align: left;
    border-top: 2px solid #585858;
    border-bottom: 1px solid #777777;
    text-align: center;
}
.new_table03n td {
    padding: 10px 4px;
    text-align: left;
   /*  border: 1px solid #eee; */
    border-top: 1px solid #eee; 
	border-bottom: 1px solid #eee;
    text-align: center;
}
.new_table03n th {
        background-color: #f2f2f2; font-weight: bold;}
.new_table03n tr {margin-bottom: 10px;}
.new_table03n tr:nth-child(even) {
        /* background-color: #f2f2f2; */
        /* 짝수 행 배경색 설정 */
}

@media (max-width: 820px) {	
	.new_table03n th,
	.new_table03n td{ font-size:13px; }
	.new_table03n td span{font-size:13px;}
	}



 @media (max-width: 720px) { 
	 /* 화면 폭이 768px 이하일 때 적용되는 스타일 */ 
	 .new_table03n table, 
	 .new_table03n thead, 
	 .new_table03n tbody, 
	 .new_table03n th, 
	 .new_table03n td, 
	 .new_table03n tr { display: block;} 

	 .new_table03n thead tr { 
	     font-size:14px;
		 position:absolute; /* 헤더를 절대 위치로 변경 */ 
		 top: -9999px; /* 헤더를 화면 밖으로 이동 */ 
		 left: -9999px; /* 헤더를 화면 밖으로 이동 */ 
	 } 
	 .new_table03n td span{font-size:12px;}
	 .new_table03n td { 
	     font-size:14px;
	     padding: 10px;
		 border: none; /* 테이블 셀 경계선 제거 */ 
		 position: relative; /* 셀을 상대 위치로 변경 */ 
		 padding-left: 100px; /* 셀의 왼쪽 여백 조정 */ 
		 text-align: left; /* 텍스트 정렬 설정 */ 
		 border-top: 1px solid #dedede; /* 	
		 border-bottom: 1px solid #dedede; */
				/* border-right: 1px solid #eee;
				border-left: 1px solid #eee; */
	}

    .new_table03n td::before {
	text-align:left;
	        font-size:14px;
            content: attr(data-label);
            /* ::before 선택자를 사용하여 데이터 레이블을 삽입 */
            position: absolute;
            /* 데이터 레이블을 절대 위치로 설정 */
            left: 0;
            /* 데이터 레이블을 왼쪽 정렬 */
            width: 90px;
            /* 데이터 레이블의 폭을 셀의 절반으로 설정 */
            padding: 8px;
            /* 데이터 레이블의 여백 설정 */
            /* text-indent: 4px; */
            text-align: center;
            font-weight: bold;
            /* 데이터 레이블의 글씨체 굵기 설정 */
            background-color: #f2f2f2;
            /* 데이터 레이블의 배경색 설정 */
            margin-bottom: 10px;
     }
    .new_table03n td:nth-child(1):before {content: '문화강좌명';}
    .new_table03n td:nth-child(2):before {content: '결제금액';}

	.new_table03n td:before{
	        font-size:14px;
	        padding: 10px;			
            position: absolute;
            top: 0px;
            /* border-bottom: 1px solid #dedede; */
	}

	.new_table03n td:nth-child(2){border-bottom: 1px solid #dedede;}
}

 @media (max-width: 480px) { 
	.new_table03n td:nth-child(1):before{
	        font-size:14px;
	        padding: 20px 10px;			
            position: absolute;
            top: 0px;
            /* border-bottom: 1px solid #dedede; */
	}
}




/* 테이블비활성화 */
.t-disble {
display:block;
background-color: #efefef !important; 
}
.t-disble table th,
.t-disble table td
{background-color: #efefef !important; color:#959595bf; }
.t-disble span{color:#959595bf !important; }

.t-disble .txinfo font{color:#959595bf !important; }


/* 탭 컨텐츠 토글 — 기존 .active 배경 색을 건드리지 않도록 탭 컨텐츠는 별도 클래스 */
.info-tab-content { display:none; }
.info-tab-content.is-on { display:block; }

/* 본문 소제목(jointxt) 색상 완화 — 기존 검정 → 차분한 그레이 */
.info-tab-content .jointxt {
  color:#232323;
}
.info-section { margin-bottom:32px; }
.info-section h3 {
  font-size:18px; font-weight:700; color:#2c2c2c;
  border-left:5px solid #007bff; padding:0px 0 0px 12px; margin:24px 0 14px 0;
  /* background:#f7f9f5; */
}
.info-section h4 {
  font-size:16px; font-weight:600; color:#444;
  margin:16px 0 8px 0; padding-left:8px;
  /* border-left:2px solid #b5c4b5; */
}
.info-table { width:100%; font-size:14px; border-collapse:collapse; margin-bottom:15px; background:#fff; }
.info-table th, .info-table td {
    border: 1px solid #d1d1d1;
    padding: 12px 10px;
    text-align: center;
    color: #333;
}
.info-table thead th {
    background: #e8e8e8;
    color: #000000;
    font-weight: 700;
    /* border-bottom: 2px solid #919191; */
}
.info-table tbody th {
    /* background: #fafaf7; */
    color: #000000;
    font-weight: 600;
}
.info-table tbody tr:hover td { background:#fcfcf8; }

.info-notice {font-size: 16px;
  background:#f3f8ff; border:1px solid #f5d48a; /* border-left:4px solid #d4a33a; */
  border-radius:3px; padding:12px 15px; margin:12px 0; font-size:13px; color:#6b4e1a;
}
.info-notice-blue {font-size: 16px;
  background:#f7faff; border:1px solid #b0cde0; /* border-left:4px solid #6892b0; */
  color:#2d4a5c;
}
.info-notice-red {font-size: 16px;
  background:#fbecec; border:1px solid #e8b5b5;/*  border-left:4px solid #b85555; */
  color:#6b2525;
}

.info-list { font-size:16px; line-height:1.9; padding-left:22px; color:#333; }
.info-list li { margin-bottom:5px; }

.info-flow { counter-reset:step; padding:0; margin:12px 0; }
.info-flow > li {
    list-style: none;
    counter-increment: step;
    position: relative;
    padding: 14px 14px 14px 50px;
    margin: 10px 0;
    background: #ffffff;
    border: 1px solid #ececec;
    /* border-left: 3px solid #8a9a8a; */
    border-radius: 3px;
    font-size: 16px;
    color: #2c2c2c;
}
.info-flow > li::before {
 content: counter(step);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #6a6a6a;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
}

/* 강조 텍스트 색 톤 다운 */
.info-section b,
.info-section strong { color:#2c2c2c; }
.info-list b, .info-list strong { color:#1a4a5c; }

.info-notice li{padding:5px  0px}


  /* 공통 카드 섹션 디자인 */
  .content-card {
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
  }

  .card-header {
    margin-bottom: 20px;
    border-left: 4px solid #007bff;
    padding-left: 12px;
  }

  .card-title {
    margin: 0;
    font-size: 16px;
    color: #222;
  }

  /* 버튼 그리드 레이아웃 */
  .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }

  .prog-btn {
    padding: 10px 18px;
    background: #ffffff;
    border: 1px solid #006df3;
    border-radius: 50px;
    color: #0051a1;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .prog-btn:hover {
    background: #2688ff;
    border-color: #007fff;
    color: #ffffff;
  }

  /* 검색 및 필터 바 레이아웃 */
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }

  .search-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1; /* 가용 공간 확보 */
    min-width: 300px;
  }

  .search-group label {
    font-weight: 600;
    font-size: 14px;
    color: #444;
    white-space: nowrap;
  }

  /* 검색 입력창 + 버튼 조합 */
  .input-wrapper {
    display: flex;
    gap: 8px;
    flex: 1;
    max-width: 400px;
  }

  .input-wrapper input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
  }

  .input-wrapper input:focus {
    border-color: #007bff;
  }

  .search-btn {
    padding: 0 20px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
  }

  .search-btn:hover {
    background: #0056b3;
  }

  /* 체크박스 스타일 */
  .custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #444;
    user-select: none;
  }

  .custom-checkbox input {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    accent-color: #007bff;
  }

  /* 반응형 처리 */
  @media (max-width: 768px) {
    .content-card {
      padding: 15px;
    }
    
    .filter-bar {
      flex-direction: column;
      align-items: stretch; /* 모바일에서 가로로 꽉 차게 */
    }

    .search-group {
      flex-direction: column;
      align-items: flex-start;
      min-width: unset;
    }

    .input-wrapper {
      width: 100%;
      max-width: none;
    }
    
    .sort-group {
      border-top: 1px solid #eee;
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
    }

    .prog-btn {
      flex: 1 1 calc(50% - 10px);
      text-align: center;
    }
  }


    .container_n {
        max-width: 1100px;
        margin: 50px auto;
        padding: 40px;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    /* 타이틀 */
    .title_n {
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 40px;
    }

    /* 프로세스 바 전체 컨테이너 */
    .step_list_n {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 60px;
        list-style: none;
        position: relative;
    }

    /* 배경 연결 선 */
    .step_list_n::before {
        content: '';
        position: absolute;
        top: 20px;
        /* 숫자 원형의 중앙 위치 */
        left: 0;
        right: 0;
        height: 2px;
        background: #eee;
        z-index: 1;
    }

    .step_item_n {
        flex: 1;
        text-align: center;
        position: relative;
        z-index: 2;
    }

    /* 숫자 원형 아이콘 */
    .step_num_n {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 auto 10px;
        background: #fff;
        border: 2px solid #eee;
        border-radius: 50%;
        font-size: 16px;
        font-weight: 700;
        color: #ccc;
        transition: all 0.3s ease;
    }

    /* 텍스트 스타일 */
    .step_item_n span:not(.step_num_n) {
        display: block;
        font-size: 14px;
        color: #999;
        font-weight: 500;
        letter-spacing: -0.5px;
    }

    /* 활성화 상태 (Active) */
    .step_item_n.active_n .step_num_n {
        background: #145bda;
        border-color: #145bda;
        color: #fff;
        box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
    }

    .step_item_n.active_n span:not(.step_num_n) {
        color: #007bff;
        font-weight: 700;
    }

    /* 완료된 상태 (선택사항: 활성화 이전 단계들) */
    /* 자바스크립트로 .done_n 클래스를 추가하면 더 예쁩니다 */
    .step_item_n.done_n .step_num_n {
        background: #e7f2ff;
        border-color: #007bff;
        color: #007bff;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
	.container_n {padding: 10px;}
    .step_list_n { margin-bottom: 40px;}
    .step_num_n {width: 32px; height: 32px; font-size: 13px;}


  /* 모바일에서는 텍스트가 겹칠 수 있으므로 현재 활성화된 단계만 텍스트 노출 */
   .step_item_n span:not(.step_num_n) {font-size: 11px;display: none;}

    .step_item_n.active_n span:not(.step_num_n) {
            display: block;
            position: absolute;
            width: 100px;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 5px;
        }
    }

    /* 약관 동의 섹션 */
    .term_section_n {
        margin-bottom: 30px;
    }

    .all_agree_n {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 30px;
        border: 1px solid #e9ecef;
    }

    .term_box_n {
        margin-bottom: 25px;
    }

    .term_title_n {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .term_content_n {
        width: 100%;
        height: 120px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 13px;
        color: #666;
        overflow-y: scroll;
        background: #fff;
    }

    /* 체크박스 스타일 */
    input[type="checkbox"] {
        width: 18px;
        height: 18px;
        vertical-align: middle;
        margin-right: 8px;
        cursor: pointer;
    }

    label {
        cursor: pointer;
        font-weight: 500;
    }

    .essential_n {
        color: #d9534f;
        margin-left: 5px;
    }

    .optional_n {
        color: #777;
        margin-left: 5px;
    }

    /* 버튼 영역 */
    .btn_group_n {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 50px;
    }

    .btn_n {
        width: 200px;
        height: 55px;
        border: none;
		align-content: center;
        text-align: center;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.3s;
    }

    .btn_cancel_n { background: #eee; color: #666; }
    .btn_next_n { background: #007bff;color: #fff !important;}
    .btn_cancel_n:hover {background: #ddd;}
    .btn_next_n:hover { background: #0056b3;}


	.info-container_m {
            max-width: 1100px;
            margin: 50px auto;
            padding: 40px;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }

    .info-table_m {
        width: 100%;
        border-top: 2px solid #333;
        border-collapse: collapse;
        table-layout: fixed; /* 테이블 너비 고정 */
    }

    .info-table_m th {
        width: 15%;
        background-color: #f9f9f9;
        color: #333;
        font-weight: 600;
        padding: 15px;
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #eee;
        text-align: center;
    }

    .info-table_m td {
        width: 35%;
        padding: 15px;
        border-bottom: 1px solid #ddd;
        color: #666;
        vertical-align: middle;
        word-break: break-all; /* 긴 텍스트 줄바꿈 */
    }

    /* 주소 등 긴 문장용 클래스 */
    .address-text_m {
        line-height: 1.6;
        word-break: keep-all;
    }

    /* 모바일 반응형 (768px 미만) */
    @media (max-width: 768px) {
	.info-container_m { padding: 10px;}
        .info-table_m th, 
        .info-table_m td {
            display: block;
            width: 100% !important;
            text-align: left;
            border-right: none;
        }
        .info-table_m th {
            background-color: #eee;
            padding: 10px 15px;
            border-bottom: none;
        }
        .info-table_m td {
            border-bottom: 2px solid #eee;
            padding: 10px 15px 20px 15px;
        }
    }



/* 추가 수강테이블 */
.wrapper_t {
  width: 100%;
  margin: 0 0 20px 0;
  font-family: sans-serif;
}
.title_t{font-size: 18px;
    font-weight: 700;
    color: #2c2c2c;
    border-left: 5px solid #007bff;
    padding: 0px 0 0px 12px;
    margin: 24px 0 14px 0;
}

.container_t {
  width: 100%;
  overflow-x: auto; /* PC에서 최소 너비 미달 시 스크롤 대비 */
}

.table_t {
  width: 100%;
  min-width: 930px; /* PC에서 데이터 겹침 방지 */
  border-collapse: collapse;
  border: 1px solid #d1d1d1; /* 전체 외곽 테두리 */
  background-color: #fff;
}
.th_t{background:#e8e8e8; font-weight:600;}
.th_t, .td_t {
  padding: 12px 10px;
  border: 1px solid #d1d1d1; /* 셀 테두리 */
  text-align: center;
  font-size: 15px;
  color: #333;
}

.header_row_t {
  background-color: #f9f9f9; /* 헤더 배경색 */
  color: #666;
}

.status_t {
  padding: 5px 8px;
  background-color: #f0f4f8;
  border-radius: 3px;
  color: #007bff;
  font-size: 14px; border: 1px solid #5181ff;
}
/* 상태별 개별 색상 */
.waiting_t { background-color: #eee; color: #666; border-radius: 3px;  padding: 5px 8px; font-size: 14px; border: 1px solid #a8a8a8;}      /* 대기중 - 회색 */
.ing_t     { background-color: #fff2ed; color: #f47800; border-radius: 3px; padding: 5px 8px; font-size: 14px; border: 1px solid #f7ae76;} /* 접수중 - 파란색 */
.fail_t    { background-color: #ffefef; color: #d32f2f; border-radius: 3px; padding: 5px 8px; font-size: 14px; border: 1px solid #ff7676;} /* 결제실패 - 빨간색 */
.using_t   { background-color: #e8f5e9; color: #2e7d32; border-radius: 3px; padding: 5px 8px; font-size: 14px; border: 1px solid #037100;} /* 사용중 - 초록색 */
/* --- 반응형 구간 (768px 이하) --- */
@media screen and (max-width: 768px) {
  .table_t {
    min-width: 100%; /* 최소 너비 해제 */
    display: block;
    border: none; /* 모바일에서는 테이블 전체 테두리 제거 */
  }

  /* 헤더(첫 줄) 숨김 처리 */
  .table_t thead {
    display: none;
  }

  .table_t tbody, .row_t {
    display: block;
    width: 100%;
  }

  .row_t {
    margin-bottom: 15px;
    border: 1px solid #e0e0e0; /* 카드 단위 테두리 */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  .td_t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    text-align: right;
  }

  .td_t:last-child {
    border-bottom: none;
  }

  /* HTML의 data-label을 이용해 좌측에 제목 노출 */
  .td_t::before {
    content: attr(data-label);
    font-weight: bold;
    color: #888;
    font-size: 13px;
    text-align: left;
    margin-right: 10px;
  }
}

/* 안내 박스 스타일 */
.info_box_t {
  background-color: #f7faff;
  border: 1px solid #bed7e6;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 4px;
}

.info_summary_t {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 10px;
  color: #333;
}

.info_list_t {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info_list_t li {
  font-size: 15px;
  color: #292929;
  line-height: 1.8;
  position: relative;
  padding-left: 12px;
}

.info_list_t li::before {
  content: "·";
  position: absolute;
  left: 0;
  font-weight: bold;
}

.info_list_t li strong {
  color: #d32f2f; /* 중요 문구 강조 */
  font-weight: 600;
}

.resukang_btn_t{ background-color: #ffffff;
  border: 1px solid #007bff;
  color: #007bff;
  padding: 5px 12px;
  font-size: 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;}

.resukang_btn_t:hover {
  background-color: #0b59ae;
  color: #ffffff;
}


.cancel_btn_t {
  background-color: #ffffff;
  border: 1px solid #d32f2f;
  color: #d32f2f;
  padding: 5px 12px;
  font-size: 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.cancel_btn_t:hover {
  background-color: #d32f2f;
  color: #ffffff;
}


/* 회원가입3단추가 */
.join_container {
          display: flex;
          flex-wrap: wrap;
          gap: 25px;
          max-width: 1100px;
          margin: 40px auto;
          padding: 0 20px;
          box-sizing: border-box;
        }

        .join_item {
          flex: 1;
          min-width: 300px;
        }

        .btn_join_big {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          width: 100%;
          min-height: 240px; /* 가시성을 위해 높이 확보 */
          padding: 40px 20px;
          background: #fff;
          border: 1px solid var(--border-color);
          border-radius: 20px;
          text-decoration: none;
          transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
          position: relative;
          overflow: hidden;
        }

        /* 아이콘 영역 (숫자나 아이콘으로 대체 가능) */
        .btn_join_big .icon_circle {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
          font-size: 24px;
          transition: all 0.3s;
        }

        /* 텍스트 스타일링 */
        .btn_join_big .main_tit {
          display: block;
          font-size: 22px;
          font-weight: 700;
          color: #222;
          margin-bottom: 10px;
        }

        .btn_join_big .sub_txt {
          display: block;
          font-size: 15px;
          font-weight: 400;
          color: #666;
          line-height: 1.4;
        }

        /* 버튼별 테마 컬러 */
        .theme_under .icon_circle { background: #b81c4b; color: #fff; }
        .theme_over .icon_circle  { background: var(--point-color); color: #fff; }
        .theme_center .icon_circle { background: var(--dark-color); color: #fff; }

        /* 호버 효과: 그림자 및 테두리 강조 */
        .btn_join_big:hover {
          transform: translateY(-10px);
          border-color: var(--point-color);
          box-shadow: 0 20px 40px rgba(0,0,0,0.08);
        }

        .theme_center:hover { border-color: var(--dark-color); }

        /* 화살표 아이콘 (포인트) */
        .btn_join_big::after {
          content: '→';
          position: absolute;
          bottom: 20px;
          right: 20px;
          font-size: 20px;
          color: #ccc;
          transition: 0.3s;
        }
        .btn_join_big:hover::after { color: var(--point-color); right: 25px; }

        /* 반응형: 모바일 (900px 미만) */
        @media (max-width: 900px) {
          .join_container { gap: 15px; }
          .join_item { min-width: 100%; }
          .btn_join_big {
            min-height: auto;
            flex-direction: row;
            justify-content: flex-start;
            padding: 25px;
            text-align: left;
          }
          .btn_join_big .icon_circle {
            width: 50px;
            height: 50px;
            margin-bottom: 0;
            margin-right: 20px;
            font-size: 18px;
            flex-shrink: 0;
          }
          .btn_join_big .main_tit { font-size: 18px; margin-bottom: 4px; }
          .btn_join_big .sub_txt { font-size: 14px; }
          .btn_join_big::after { display: none; } /* 모바일은 화살표 제거 */

/* ==========================================================================
   회원가입 다단계 디자인 (_n / _m suffix) — over14/under14/center 공통
   2026-05-13 자체 CSS. 디자인 파트 마크업에 맞춰 작성
   ========================================================================== */

/* === 컨테이너 === */
.container_n { max-width: 900px; margin: 30px auto; padding: 0 20px; box-sizing: border-box; }

/* === 페이지 제목 === */
.title_n {
  font-size: 22px; font-weight: 700; color: #024290;
  text-align: center; margin: 0 0 28px 0; padding-bottom: 14px;
  border-bottom: 2px solid #024290;
}

/* === 스텝 진행 표시 === */
.step_list_n {
  display: flex; justify-content: space-between; list-style: none;
  margin: 0 0 36px 0; padding: 0 10px; position: relative;
}
.step_list_n::before {
  content: ''; position: absolute; top: 18px; left: 8%; right: 8%;
  height: 2px; background: #e0e0e0; z-index: 0;
}
.step_item_n {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1;
  font-size: 13px; color: #888;
}
.step_num_n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #e0e0e0; color: #888; font-weight: 600;
  margin-bottom: 8px; transition: all .25s;
}
.step_item_n.done_n .step_num_n { background: #2c8f3c; color: #fff; }
.step_item_n.done_n { color: #2c8f3c; }
.step_item_n.active_n .step_num_n {
  background: #024290; color: #fff;
  box-shadow: 0 0 0 4px rgba(2,66,144,0.15);
}
.step_item_n.active_n { color: #024290; font-weight: 600; }

/* === 본문 섹션 === */
.term_section_n {
  background: #fff; border: 1px solid #e5e5e5; border-radius: 8px;
  padding: 26px 28px; margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* === 약관 박스 === */
.term_box_n {
  margin-bottom: 14px;
  border: 1px solid #e5e5e5; border-radius: 4px; overflow: hidden;
}
.term_title_n {
  padding: 12px 14px; background: #f8f9fa;
  border-bottom: 1px solid #e5e5e5; font-size: 14px;
}
.term_title_n label { cursor: pointer; font-weight: 600; margin: 0; display: block; }
.term_title_n input.chk_n { margin-right: 8px; vertical-align: middle; }
.term_content_n {
  padding: 14px; font-size: 12px; color: #666; line-height: 1.7;
  max-height: 110px; overflow-y: auto; background: #fdfdfd;
}
.essential_n {
  display: inline-block; margin-left: 6px; font-size: 11px;
  color: #d9534f; font-weight: 600;
}
.optional_n {
  display: inline-block; margin-left: 6px; font-size: 11px; color: #888;
}

/* === 전체 동의 === */
.all_agree_n {
  margin-top: 14px; padding: 14px 16px;
  background: #f0f4f9; border: 1px solid #c3d4e8; border-radius: 4px;
}
.all_agree_n input { margin-right: 8px; vertical-align: middle; }
.all_agree_n label { cursor: pointer; margin: 0; font-size: 14px; color: #024290; }

/* === 버튼 그룹 === */
.btn_group_n { text-align: center; margin: 24px 0 8px; }
.btn_group_n .join_btn { display: inline-block; min-width: 220px; }

/* === 14세 미만 분기는 빨강 톤 강조 (under14 페이지의 active 색상 오버라이드 — 선택) === */
/* under14 의 title_n 만 빨강으로 하려면 body class 등으로 분기 필요 — 현재는 통일 색 유지 */

/* === 정보재확인 (_m suffix) === */
.info-container_m { max-width: 900px; margin: 30px auto; padding: 0 20px; box-sizing: border-box; }
.info-container_m .title_n { margin-bottom: 28px; }
.info-container_m .step_list_n { margin-bottom: 36px; }

.table-responsive_m { overflow-x: auto; margin-bottom: 20px; }
.info-table_m {
  width: 100%; border-collapse: collapse; background: #fff;
  font-size: 14px; border: 1px solid #e5e5e5; border-radius: 4px; overflow: hidden;
}
.info-table_m th,
.info-table_m td { padding: 12px 14px; border-bottom: 1px solid #eee; }
.info-table_m tr:last-child th,
.info-table_m tr:last-child td { border-bottom: 0; }
.info-table_m th {
  background: #f8f9fa; font-weight: 600;
  text-align: left; width: 18%; color: #444;
}
.info-table_m td { color: #222; }
.info-table_m .address-text_m { line-height: 1.7; color: #555; }

/* === 모바일 반응형 === */
@media (max-width: 768px) {
  .container_n, .info-container_m { padding: 0 12px; margin: 18px auto; }
  .title_n { font-size: 17px; margin-bottom: 18px; }

  .step_list_n { flex-wrap: wrap; gap: 6px 0; padding: 0; }
  .step_list_n::before { display: none; }
  .step_item_n {
    flex: 0 0 33.333%; font-size: 11px;
    padding: 6px 2px;
  }
  .step_num_n { width: 30px; height: 30px; font-size: 12px; margin-bottom: 4px; }

  .term_section_n { padding: 16px; }
  .term_title_n { font-size: 13px; padding: 10px 12px; }
  .term_content_n { font-size: 11px; padding: 12px; max-height: 90px; }
  .all_agree_n label { font-size: 13px; }

  .info-table_m th { width: 30%; padding: 10px; font-size: 13px; }
  .info-table_m td { padding: 10px; font-size: 13px; }

  .btn_group_n .join_btn { min-width: 160px; }
}

/* ==========================================================================
   수강 신청내역 새 디자인 (_t suffix) — sukang_list_new
   2026-05-13 자체 CSS
   ========================================================================== */

.wrapper_t { padding: 12px 0; }

.title_t {
  font-size: 17px; font-weight: 700; color: #024290;
  margin: 16px 0 12px 0; padding-left: 10px;
  border-left: 4px solid #024290;
}

/* 안내 박스 */
.info_box_t {
  background: #f0f4f9; border: 1px solid #c3d4e8; border-radius: 4px;
  padding: 14px 18px; margin-bottom: 16px;
}
.info_list_t { list-style: none; margin: 0; padding: 0; }
.info_list_t li {
  font-size: 13px; color: #444; line-height: 1.7;
  padding-left: 14px; position: relative;
}
.info_list_t li::before {
  content: '•'; color: #024290; position: absolute; left: 0; top: 0;
  font-weight: 700;
}
.info_list_t li strong { color: #d9534f; font-weight: 700; }
.info_list_t li b { color: #024290; }

/* 테이블 */
.container_t { overflow-x: auto; margin-bottom: 24px; }
.table_t {
  width: 100%; border-collapse: collapse;
  background: #fff; font-size: 13px;
  border: 1px solid #e5e5e5; border-radius: 4px; overflow: hidden;
}
.header_row_t { background: #f0f4f9; }
.th_t {
  padding: 12px 8px; font-weight: 600; color: #024290;
  text-align: center; border-bottom: 2px solid #024290;
  white-space: nowrap; font-size: 12px;
}
.row_t:hover td { background: #fcfdff; }
.td_t {
  padding: 12px 8px; text-align: center;
  border-bottom: 1px solid #eee; color: #333;
  vertical-align: middle;
}
.row_t:last-child .td_t { border-bottom: 0; }

/* 상태 배지 — 5종 */
.status_t, .waiting_t, .ing_t, .fail_t, .using_t {
  display: inline-block; padding: 3px 10px; margin: 2px 0;
  font-size: 11px; font-weight: 600; border-radius: 11px;
  white-space: nowrap;
}
.status_t  { background: #e8f5e9; color: #2c8f3c; border: 1px solid #2c8f3c; }
.waiting_t { background: #fff4e5; color: #e65100; border: 1px solid #f0ad4e; }
.ing_t     { background: #e8f0fa; color: #024290; border: 1px solid #024290; }
.fail_t    { background: #fce4ec; color: #d9534f; border: 1px solid #d9534f; }
.using_t   { background: #f3e5f5; color: #6c5ce7; border: 1px solid #6c5ce7; }

/* 액션 버튼 — 재수강 / 결제취소 */
.resukang_btn_t, .cancel_btn_t {
  display: inline-block; padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  border-radius: 4px; cursor: pointer;
  border: 1px solid; white-space: nowrap;
  transition: all .15s;
}
.resukang_btn_t { background: #024290; color: #fff; border-color: #024290; }
.resukang_btn_t:hover { background: #023876; }
.cancel_btn_t   { background: #fff; color: #d9534f; border-color: #d9534f; }
.cancel_btn_t:hover { background: #d9534f; color: #fff; }

/* 모바일 반응형 — 테이블을 카드 레이아웃으로 전환 */
@media (max-width: 768px) {
  .title_t { font-size: 15px; }
  .info_box_t { padding: 12px 14px; }
  .info_list_t li { font-size: 12px; }

  .table_t, .table_t thead, .table_t tbody, .table_t tr, .table_t td {
    display: block; width: 100%;
  }
  .table_t thead { display: none; }
  .row_t {
    border: 1px solid #e5e5e5; border-radius: 4px;
    margin-bottom: 12px; padding: 8px 12px;
    background: #fff;
  }
  .td_t {
    text-align: right; border-bottom: 1px dashed #eee;
    padding: 8px 0; position: relative; padding-left: 45%;
  }
  .td_t:last-child { border-bottom: 0; }
  .td_t::before {
    content: attr(data-label); position: absolute; left: 0; top: 8px;
    width: 40%; text-align: left; font-weight: 600;
    color: #024290; font-size: 12px;
  }
  .resukang_btn_t, .cancel_btn_t { font-size: 11px; padding: 5px 10px; }
}
        }