@charset "utf-8";

/* -- 게시판 공통 -- */
    #board { position: relative; width: 100%; }

    #board .web_col{ display: table-column-group; }
    #board .mob_col{ display: none; }
    #board .web_td{ display: table-cell; }
    #board .mob_td{ display: none; }
    @media ( max-width: 991px) {
        #board .web_col{ display: none; }
        #board .mob_col{ display: table-column-group; }
        #board .web_td{ display: none; }
        #board .mob_td{ display: table-cell; }
    }

    #board a:hover{ opacity: 0.8; }

/* 게시판 제목 말줄임 */
    #board .subject { display: block; width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #board .list .left .subject { display: inline-block; max-width: 90%; width: fit-content; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #board .subject2 { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.2em; height: 2.4em; overflow: hidden; }
    #board .subject3 { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.2em; height: 3.6em; overflow: hidden; }

/* -- 비밀번호 팝업 -- */
    #board_pw .modal-body{ padding: 3rem; }
    #board_pw .pw_title{ padding:0 0 1rem 0; text-align: center; }
    #board_pw a{ display: block; height: 40px; line-height: 37px; text-align: center; border-radius: 5px; }
    #board_pw input{ border-radius: 5px; }

/* -- 글갯수 -- */
    #board .total{ padding: 0 2px 10px 0; text-align: left; line-height: 1em; }
    @media (max-width:991px) {
        #board .total{ text-align: right; }
    }

/* -- 개시물 없음 -- */
    .no_data{ padding: 10% 0; text-align: center; }
    .no_data i{ font-size: 3em; }
    .no_data p{ padding: 10px 0 0 0; }

/* 탭메뉴 */
#board .tab { padding: 30px 0; }
    #board .tab ul li { border-bottom: 1px solid #ebf0f7; }
    #board .tab span { display: block; padding: 10px 5px; cursor: pointer; }
@media (max-width:991px) {
    #board .tab { padding: 15px 0; }
}

/*탭메뉴*/
.tab { overflow: hidden; }
	.tab ul li{ float: left; padding: 12px 0; text-align: center; border: 1px solid #ebf0f7; border-left: 0; border-bottom: 0; cursor: pointer; }
	.tab ul li:first-child{ border-left: 1px solid #ebf0f7; }
	.tab ul .on{ color: #fff; background: #8085ed; border-color: #8085ed; }
	.tab ul li:hover{ color: #fff; background: #8085ed; border-color: #8085ed; }

	.tab .tab_02 li{ width: 50%; }
	.tab .tab_03 li{ width: 33.3%; }
	.tab .tab_04 li{ width: 25%; }
	.tab .tab_05 li{ width: 20%; padding: 0 }
	.tab .tab_06 li{ width: 16.66%; }
	.tab .tab_07 li{ width: 14.2%; padding: 0 }
@media (max-width:991px) {
	.tab .tab_07 li:nth-child(2) { width: 50%; }
	.tab .tab_07 li:nth-child(4) { border-left: 1px solid #ebf0f7; }
	.tab .tab_07 li { width: 25%; }
}

/* 3차댑스 */
.tab_menu { border-bottom: 1px solid #f1f1f1; }
.tab_menu ul { display: flex; justify-content: center; gap: 50px; }
    .tab_menu ul a { display: block; padding: 10px 20px; text-align: center; }
    .tab_menu ul .on,
    .tab_menu ul a:hover { font-weight: 500; color: #19c493;  border-bottom: 4px solid #19c493; }

/* -- 첨부파일 -- */
.filebox{ overflow: hidden; }
    .filebox .upload-name { vertical-align: middle; }
    .filebox label{ padding: 0; }
    .filebox label i{ display: block; height: 40px; line-height: 38px; text-align: center; border-radius: 40px; cursor: pointer; }
    
/* -- 버튼 -- */
    .btn_wrap { overflow: hidden; }
    .btn_wrap .fl_center{ text-align: center; }
    .btn_wrap .fl_left{ text-align: left; }
    .btn_wrap .fl_right{ text-align: right; }
    .btn_wrap a { display: inline-block; height: 40px; margin: 0 3px; padding: 0 50px; vertical-align: middle; text-align: center; line-height: 38px; border-radius: 50px; transition: all 0.3s ease 0.2s; }
    .btn_wrap a:hover { opacity: 0.9; }
	.btn_wrap button { display: inline-block; height: 40px; margin: 0 3px; padding: 0 30px; vertical-align: middle; text-align: center; line-height: 38px; border-radius: 50px; transition: all 0.3s ease 0.2s; }
    .btn_wrap button:hover { opacity: 0.9; }
    .btn_wrap input { display: inline-block; vertical-align: middle; width: auto; padding: 0 50px; line-height: 38px; border-radius: 50px; }
    .btn_wrap input:hover { opacity: 0.9; }
    @media (max-width:991px) {
        .btn_wrap a,
        .btn_wrap button,
        .btn_wrap input  { margin: 0 2px;padding: 0 25px;}
    }

 /* 버튼 색상 */
    .bt_blue{ color: #fff !important; background: var(--main); border: 1px solid var(--main); }
    .bt_gray{ color: #fff !important; background: #808080; border: 1px solid #808080; }
	.bt_red { color: #fff !important; background: #e94c57; border: 1px solid #e94c57; }
    .bt_line{  border: 1px solid #ddd; }


/* -- 리스트 -- */
#board .list { border-top: 2px solid #f1f1f1; }
    #board .list th, #board .list td { padding: 15px 10px; text-align: center; font-weight: 400; border-bottom: 1px solid #f1f1f1; }
    #board .list th { background: #fafafa; }
    #board .list .left { text-align: left; }
    #board .list .left i { margin: 0 0 0 1px; vertical-align: middle; }
    #board .list .icon{ display: inline-block; width: 30px; height: 30px; background: url(../../img/common/icon_notice.png) no-repeat center 0, #4254f3; border-radius: 50px; overflow: hidden; }
    #board .list .h6 { padding: 2px 10px; border-radius: 5px 0 10px 0; }
    @media (max-width:991px) {
        #board .list th, #board .list td { padding: 10px 5px; }
        #board .list .left .subject { max-width: 80%; }
    
        /* 후기 */
        .list.review tr.web { display: none; }
        .list.review tr { display: flex; flex-wrap: wrap; gap: 0 5px; padding: 10px 0; border-bottom: 1px solid #f1f1f1; }
            #board .list.review td { order: 2; padding: 0; color: #777; border-bottom: 0; }
            #board .list.review .left { order: 1; width: 100%; color: #222; }
            #board .list.review .day::before { content: "ㅣ"; }
            #board .list.review .day::after { content: "ㅣ"; }
    }

/* -- 보기 -- */
    #board .view{ border-top: 2px solid #f1f1f1; }
    #board .view th{ padding: 15px 10px; text-align: center; font-weight: 500; border-bottom: 1px solid #f1f1f1; background: #fafafa; }
    #board .view td{ padding: 15px 10px; text-align: center; border-bottom: 1px solid #f1f1f1; }
    #board .view .date{ font-size: 0.9em; color: rgba(108,102,97,0.5); }
    #board .view .con{ text-align: left; }
    #board .view .con img{ display: block; width: auto; max-width: 100%; margin: 0 auto; }
    #board .view .file a:hover{ text-decoration: underline; }
    #board .view .file img { width: auto; }
    #board .view dl { border-top: 1px solid #ebf0f7; overflow: hidden; }
    #board .view dt { font-weight: 400; padding: 10px; background: #ebf0f7; }
    #board .view dd { font-weight: 400; padding: 10px; text-align: left; border-bottom: 1px solid #f1f1f1; }
    #board .view .study_name{ text-align: left; padding: 10px 30px 10px 10px; border-radius: 0 0 50px 0; background: #ebf0f7; }
    @media (max-width:991px) {
        #board .view .file a { padding: 5px 0; }
    }
	
/* 댓글달기 */
.reply { padding: 20px; background: #f1f1f1; }
    .re_write h6 { float: left; padding: 0 0 10px 0; color: #777; }
	.re_write i { float: right; text-decoration: underline; color: #777; cursor: pointer; }
    .re_write input { height: 76px; font-size: 12px; color: #fff; border: 0; background: #757575; }
.re_list dt { padding: 20px 0 0 0; font-weight: 400; color: #777; }
    .re_list dt { display: flex; justify-content: space-between; vertical-align: middle; width: 100%; }
    .re_list dt i { width: 20px; text-align: center; cursor: pointer; }
    .re_list dd { padding: 0 0 20px 0; font-size: 0.87em; border-bottom: 1px solid #e5e5e5; }

/* 글쓰기 */
    .form-group dt{ font-weight: 400; line-height: 40px; }
    .form-group a{ display: block; line-height: 40px; text-align: center; border-radius: 50px; }
    .form-group > p{ padding: 10px 0 20px 0; border-top: 2px solid #4254f3; }
    .form-group > p strong{ font-size: 0.9em; font-weight: 500; color: #4254f3; }
    .form-group .terms_con{ height: 250px; padding: 0 10px; border: 1px solid #ddd; overflow-y: scroll; }
    .form-group span{ display: block; padding: 5px 0 0 0; color: #999; }
    .form-group button{ display: block; width: 100%; height: 40px; border: 0; border-radius: 40px; }
    .form-group .address{ padding-top: 10px; overflow: hidden; }
    .form-group input + input{ margin: 10px 0 0 0;}
    .form-group .line_h { line-height: 40px; }

/* -- qna 답변 -- */
    #board .answer { border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; }
    #board .answer th{ padding: 10px; vertical-align: top; text-align: center; font-weight: 400; background: #fafafa; }
    #board .answer span{ display: block; font-size: 0.9em; }
    #board .answer td{ padding: 10px; vertical-align: top; text-align: left; }
	#board .answer .down_box { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 0 0; }
	#board .answer .down_box button { width: fit-content; height: auto; padding: 0px 15px; border: 1px solid #e5e5e5; border-radius: 10px; background: #fff; cursor: pointer; }
	#board .answer .down_box button:hover { border: 1px solid #ebf0f7; background: #ebf0f7; }
	

/* -- 결제관리 -- */
    #board .pay_list { border-top: 2px solid #f1f1f1; }
    #board .pay_list th, #board .pay_list td { padding: 15px 10px; text-align: center; font-weight: 400; border-bottom: 1px solid #f1f1f1; }
    #board .pay_list th{ background: #fafafa; }
    #board .pay_list button{ display: block; width: 100%; border-radius: 50px; }
    #board .pay_list .gray_bg{ display: block; width: 100%; height: 40px; line-height: 40px; border-radius: 50px; }
    @media (max-width:991px) {
        #board .pay_list { border-bottom: 1px solid #f1f1f1; }
        #board .pay_list th { display: none; }
        #board .pay_list td { display: block; border-top: 1px solid #f1f1f1; }
        #board .pay_list td:nth-child(1){ display: none; float: left; width: 10%; border-bottom: 0; }
        #board .pay_list td:nth-child(2){ float: left; width: 100%; border-bottom: 0; }
        #board .pay_list td:nth-child(3){ float: left; width: 50%; padding: 0 10px 10px 10px; border: 0; }
        #board .pay_list td:nth-child(4){ float: left; width: 50%; padding: 0 10px 10px 10px; border: 0; }
    }

/* -- FAQ -- */
    .faq dt, .faq dd { position: relative; padding: 10px 50px; line-height: 30px; font-weight: 400; }
    .faq dt{ cursor: pointer; border-top: 1px solid #9e9e9e; }
    .faq dd{ display: none; border-top: 1px solid #eee; background: #fafafa; }
    .faq dt i, .faq dd i{ position: absolute; left: 10px; display: inline-block; width: 30px; text-align: center; border-radius: 0 3px 3px 3px; }
    .faq dt i{ color: #4254f3; border: 1px solid #4254f3; }
    .faq dd i{ color: #999490; border: 1px solid #999490; }
    .faq dt span{ position: absolute; right: 10px; display: inline-block; width: 30px; text-align: center; }
    .faq dt span:before{ content: "\e942"; font-family: "xeicon"; }
    .faq .active span:before{ content: "\e945"; font-family: "xeicon"; color: #4254f3; }
    @media (max-width:991px) {
        .faq dt i, .faq dd i{ top: 15px; }
    }

/* -- 이벤트 -- */
    /* .event_tab { color: rgba(108,102,97,0.5); }
    .event_tab a{ display: inline-block; }
    .event_tab .on, .event_tab a:hover{ color: #00ab33; }
    .event li{ padding-top: 10px; }
    .event a{ display: block; border: 1px solid #f1f1f1; border-radius: 0 10px 10px 10px; overflow: hidden; }
    .event .img{ position: relative; }
    .event .img i{ position: absolute; top: 0; left: 0; padding: 3px 10px; }
    .event .ing{ color: #fff; background: rgba(0, 0, 0, 0.3); }
    .event .end{ color: #000; background: rgba(0, 0, 0, 0.3); }
    .event .ing:before{ content: "진행"; }
    .event .end:before{ content: "종료"; }
    .event .tit{ display: block; padding: 6% 4%; text-align: center; border-radius: 0 0 10px 10px; background: #fafafa; }
    .event .date{ font-size: 0.9em; color: rgba(108,102,97,0.5); } */

    @media (max-width:991px) {
        /* 후기 */
        .list.event tr.web { display: none; }
        .list.event tr { position: relative; display: flex; flex-wrap: wrap; gap: 0 5px; padding: 10px 0; border-bottom: 1px solid #f1f1f1; }
            #board .list.event td { order: 2; padding: 0; color: #777; border-bottom: 0; }
            #board .list.event .left { order: 1; width: 100%; color: #222; }
            #board .list.event .left .subject { max-width: 90%; }
            #board .list.event .cate::after { content: "ㅣ"; }
            #board .list.event .h6 { position: absolute; right: 0; bottom: 0; }
    }

/* -- 비디오 -- */
    .video li{ padding-top: 10px; }
    #video_view .video{position: relative; padding-bottom: 56.25%;}
    #video_view .video iframe{ position: absolute; width: 100%; height: 100%; }
    #video_view .modal-body{ padding: 0; }

    .view .video{position: relative; padding-bottom: 56.25%;}
    .view .video iframe{position: absolute; width: 100%; height: 100%;}

/* -- 칼럼 -- */
    .column li{ overflow: hidden; }
    .column .img{ float: left; width: 40%; }
    .column .info{ float: left; width: 60%; padding: 10px; }

/* -- 달력 -- */
.cal { float: right; width: calc(100% - 260px); }
    .cal .month { position: relative; display: flex; justify-content: center; gap: 30px; align-items: center; padding: 0 0 2rem 0; text-align: center; }
	.cal .month p { font-weight: 800; }
	.cal .month button { position: absolute; right: 0; height: fit-content; padding: 0 5px; font-size: 0.8em; }

    .cal th{ text-align: center; padding: 5px; border: 1px solid #e5e5e5; background: #f1f1f1; }
    .cal td{ position: relative; height: 130px; padding: 10px; vertical-align: top; border: 1px solid #e5e5e5; color: #555; }
    .cal td:nth-child(1) { color: #ff0101; }
    /* .cal td:nth-child(7) { color: #0020ff; } */
    .cal table span { display: block; text-align: right; }
    .cal table p { position: absolute; bottom: 5px; left: 5px; right: 5px; font-size: 0.8em; color: #fff; }
    .cal .today{ background: #fffcd3; }
	.cal .ing { color: #fff; background: #07bf8b; } /* 접수기간  */
	.cal .ing_tt { color: #07bf8b; } /* 접수기간  */
	.cal .day { color: #fff; background: #ef8d00; } /* 시험일  */
	.cal .day_tt { color: #ef8d00; } /* 시험일  */
	.cal .end { color: #fff; background: #00b4ef; } /* 결과발표  */
	.cal .end_tt { color: #00b4ef; } /* 결과발표  */
	
	.mob_box {display: none;}
	
.cal .info { padding: 0 0 30px 0; }
	.cal .info dl { border-top: 1px solid #e5e5e5; overflow: hidden; }
	.cal .info dl dt { text-align: center; background: #f1f1f1; }
	.cal .info dl dt, .cal .info dl dd { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; }
    .cal .info dl a { text-decoration: underline; }
	
	.cal .info .no_data { padding: 0; }
	.cal .info .no_data i { line-height: 1em; }

	@media (max-width:991px) {
        .mob_box {display: block;}
		.mob_box .ing { color: #07bf8b; } /* 접수기간  */
		.mob_box .day { color: #ef8d00; } /* 시험일  */
		.mob_box .end { color: #00b4ef; } /* 결과발표  */
		.mob_box  select { border-radius: 3px; background: url(../../img/common/select_bg.png) 100% -42px no-repeat, #f1f1f1; }
		.mob_box .sch_box { padding: 20px 0 10px 0; text-align: right;  }
		.mob_box .sch_box label { display: inline-block; margin-right: 10px; }
		.mob_box .sch_list { border-top: 1px solid #e5e5e5; }
		.mob_box .sch_list li { padding: 10px 0; border-bottom: 1px solid #e5e5e5; }
    }
	
	
	

.cal_list { float: left; width: 250px; }
    .cal_list p { padding: 5px; text-align: center; }
    .cal_list ul { height: 858px; overflow-y: scroll; }
    .cal_list button { width: 100%; height: 30px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; }

/* -- 페이징 -- */
    #page { padding: 0 0 0 0; text-align: center; clear: both; }
    #page a{ display: inline-block; width: 40px; height: 40px; line-height: 40px; }
    #page a:hover { color: #4254f3; }
    #page .on {border-radius: 50%; color: #fff; background: #4254f3; }
    #page .on:hover{ color: #fff; }
    #page .first, #page .prev, #page .next ,#page .last{ width: 20px; height: 40px; background: url('../../img/common/arrow.png') no-repeat; vertical-align: top; }
    #page .first{ background-position: -40px 8px; }
    #page .prev{ background-position: 0px 8px; margin: 0 2% 0 0; }
    #page .next{ background-position: -20px 8px; margin: 0 0 0 2%; }
    #page .last{ background-position: -60px 8px; }
	
	#page ul { display: table; margin-left: auto; margin-right: auto; }
	#page li { width: 40px; float: left; text-align: center; margin: 0 auto; }

/* -- 검색 -- */
    .board_search { width: 70%; margin: 0 auto; text-align: center; }
    .board_search ul{ font-size: 0; }
    .board_search ul li{ display: inline-block; width: 20%; padding: 0 1px; font-size: 16px; vertical-align: middle; }
	.board_search ul li:nth-child(2){ width: 40%; }
    .board_search input, .board_search select{ border-radius: 5px; }
    @media (max-width:991px) {
        .board_search { width: 95%; margin: 0 auto; }
        .board_search ul li{ font-size: 14px; }
    }
    @media (max-width:767px) {
		.board_search { width: 100%; }
        .board_search ul li{ font-size: 12px; }
    }
/* 회원정보관리 */
  .form-group .col-md-offset-3 { margin-left: 25%; }
  .form-group .lh40 { line-height: 40px; }
  
/* 나만의 학습노트 */
.memo_list dl { padding: 15px; border: 1px solid #f1f1f1; }
	.memo_list dl + dl { margin-top: 20px; }
	.memo_list dl dt { display:flex; flex-direction: column; gap: 10px; cursor: pointer; }
	.memo_list .icon span { padding: 5px 10px; font-size: 12px; line-height: 1em; border-radius: 5px; }
	.memo_list .tt {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.2em; max-height: 2.4em; overflow: hidden; }
	.memo_list .s_tt { font-size: 0.9em; line-height: 1.1em; color: #777; }
	
	.memo_list dd { display: none; margin-top: 20px; padding: 20px 10px 0 10px; border-top: 1px solid #f1f1f1; }
	.memo_list dd .con { padding: 0 0 20px 0; }
	.memo_list dd input { display:inline-block; width: auto; padding: 0 20px; line-height: 1em; font-size: 0.9em; border: 0; border-radius: 5px; }