@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

* {
    box-sizing: border-box;    
    margin: 0;
    padding: 0;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #101010;
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: middle;
}

a,
a img {
    border: none;
    outline: 0;
    selector-dummy: expression(this.hideFocus=true);
    text-decoration: none;
}

a:hover {
    color: #ff9900;
}

ul,
ol,
dt,
dd,
li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a:link,
a:visited,
a:active {
    color: #0e355f;
    text-decoration: none;
}

p,
div {
    margin: 0;
    padding: 0;
}

::placeholder {
    color: #bbb;
}

select {
    border: 1px solid #308687;
    margin: 1px 0;
    border-radius: 6px;
}

select:hover {
    border-color: #3ececf;
    outline: none;
}

select:focus {
    border-color: #87ceeb;
    outline: none;
}

table {
    border-spacing: 0;
    display: table;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button,
.pointer {
    cursor: pointer;
}


input:hover {
    border-color: #3ececf;
    outline: none;
}

input:focus {
    border-color: #87ceeb;
    outline: none;
}

/* layout */
#wrap {
    position: relative;
    margin: 0;
    width: 100%;
    height: auto;
}

#wrapmain {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

#header {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

#footer {
    position: relative;
    clear: both;
    margin: 0 auto;
    bottom: 0;
    width: 100%;
    height: 156px;
    background: #353d4a;
}

/* .sub-body {padding-bottom: 30px;} */
.main_section {
    width: 100%;
    max-width: 1200px;
    padding: 30px;
    margin: 0 auto;
    position: relative;
}

.section-new-subject{
    width: 100%;
}
@media (max-width: 768px) {
    .section-new-subject { padding: 0 10px; }
}
.section {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.section-bg {
    width: 100%;
    background: #F3F5F8;
    padding: 70px 0;
}
.section-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 70px 0;
}



.section_full {
    width: 100%;
    position: relative;
}

.inlineblock {
    display: inline-block;
    width: 100%;
    margin-top: -6px;
}

body,
input,
textarea,
select,
button,
table {
    color: #101010;
    line-height: 16px;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", 'Noto Sans KR', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}



/*
input[type="checkbox"] {appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; vertical-align:middle; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #aaa; background: #ffffff; box-sizing:border-box; margin:0 6px 0 0 !important; position:relative; }
input[type="checkbox"]:checked {background:#ffffff; border:2px solid #0063b6;}
input[type="checkbox"]:checked::before {content:'\e876';font-family:var(--icon);font-size:20px;color:#0063b6;font-weight:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
*/

/* font */
h1,
h2,
h3,
h4,
h5 {
    font-weight: 700;
    color: #000;
    margin: 0;
}

h1 {
    font-size: 15px;
}

h2 {
    font-size: 18px;
}

h3 {
    font-size: 28px;
    letter-spacing: -1.5px;
}

h4 {
    font-size: 36px;
}

h5 {
    font-size: 40px;
}

hr {
    display: none;
}

.f-rd {
    color: #ff0000;
}

.font-red {
    color: #ca2500;
}

.font-green {
    color: #1fa944;
}

.font-blue {
    color: #3461ca;
}

.font-sky {
    color: #648dec;
}

.font-yellow {
    color: #d8d311;
}

.font-orange {
    color: #ff9900;
}

/* color */
.s-red {
    background: #ca2500;
}

.s-green {
    background: #1fa944;
}

.s-blue {
    background: #3461ca;
}

.s-sky {
    background: #648dec;
}

.s-yellow {
    background: #d8d311;
}

.s-orange {
    background: #ff9900;
}

.red {
    color: #FF0000;
}

.green {
    color: #339900;
}



.n_icon {
    position: absolute;
    top: 10px;
    right: 48px;
    background-color: #ff4d4f;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.n_icon2 {
    position: absolute;
    top: 10px;
    right: 40px;
    background-color: #ff4d4f;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* faq */
.table_stats {
    width: 100%;
    border-top: 1px solid #d7d7d7;
    padding-bottom: 10px;
    border-left: 1px solid #d7d7d7;
    border-right: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
}

.table {
    width: 100%;
    margin-top: 10px;
    border-top: 1px solid #000000;
    padding-bottom: 10px;
}

.table>thead>tr>th {
    display: none;
    height: 60px;
    border-bottom: 1px solid #d7d7d7;
    background: #fcfcfc;
    font-size: 15px;
    text-align: center;
    color: #333333;
    font-weight: bold;
}

.table>tbody>tr>td {
    height: 60px;
    padding: 20px 0px 20px;
    border-top: 0px solid #dddddd;
    border-bottom: 1px solid #d7d7d7;
    font-size: 15px;
    vertical-align: middle;
}

.table>tbody>tr>td p {
    line-height: 230%;
    color: #444444;
}

.table>tbody>tr>td a {
    padding-left: 10px;
}

.faqdate {
    display: none;
}

.faq_search {
    width: 100%;
}

li.answer_faq {
    position: relative;
}

li.answer_faq span.answer_icon {
    position: absolute;
    left: 10px;
    width: 40px;
    display: inline-block;
    top: 5px;
    vertical-align: top;
}

li.answer_faq .answer_txt {
    margin-left: 46px;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    border-radius: 0;
}

.pagination>li {
    display: inline;
}

.pagination>li>a,
.pagination>li>span {
    position: relative;
    float: left;
    padding: 7px 13px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    margin: 2px;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    margin-left: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
    z-index: 2;
    color: #165ba8;
    background-color: #e6e6e6;
    border-color: #dddddd;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    z-index: 3;
    color: #000000;
    background-color: #f5f5f5;
    border-color: #dddddd;
    cursor: default;
}

.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
    color: #999999;
    background-color: #ffffff;
    border-color: #dddddd;
    cursor: not-allowed;
}

/* 회원탈퇴 */
.join_drop {
    width: 95%;
    text-align: right;
    height: 30px;
}

.join_drop_btn {
    float: right;
    text-align: center;
    width: 100px;
    border-radius: 20px;
    color: #000000;
    font-size: 15px;
    padding: 5px 14px;
    margin-right: 55px;
    border: 1px solid #dddddd;
}

/* form */
li {
    list-style-type: none;
}

textarea {
    height: 74px;
    font-size: 12px;
    padding: 4px;
    line-height: 1.6;
    border: 1px solid #ddd;
    resize: none;
}

input {
    padding: 4px;
    font-size: 14px;
    border: 1px solid #308687;
    box-sizing: border-box;
    margin-bottom: 0px;
}

input[type="checkbox" i],
input[type="radio" i] {}

input.sss {
    width: 50px;
}

input.ss {
    width: 100px;
}

input.ls {
    width: 80%;
}

input.hs {
    width: 50%;
}

input.fs {
    width: 100%;
}

.form-control {
    min-width: 43px;
    height: 35px;
    padding: 5px 10px;
    border: 1px solid #308687;
    border-radius: 6px;
}

select.form-control:focus,
input.form-control:focus {
    border-color: #87ceeb;
    outline: none;
}

.btn-r {
    color: #777777;
}

.min480 {
    display: none;
}

/* 커스텀체크 */
.check-con {
    text-align: left;
    display: inline-block;
    position: relative;
    padding-left: 22px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    max-width: 100%;
    font-weight: 500;
    white-space: nowrap;
}

.check-con input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 4px 0 0;
}

.check-con input:checked~.marking {
    background-color: #2196F3;
}

.marking {
    position: absolute;
    top: 2px;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #ddd;
}

.check-con input:checked~.marking:after {
    display: block;
}

.check-con .marking:after {
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.marking:after {
    content: "";
    position: absolute;
    display: none;
}

/* 커스텀 셀렉트 */
.select_dsg {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select_dsg::after {
    content: "▼";
    display: inline-block;
    right: 10px;
    top: 10px;
    width: 10px;
    height: 10px;
    position: absolute;
}

.option {
    width: 100%;
    display: none;
    position: absolute;
    background: #fff;
}

.option li,
.def-opt {
    background: #f9f9f9;
    color: #333;
    font-size: 13px;
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    border: 1px solid #ddd;
}

.select_dsg .option li {
    border-top: 1px solid #ddd;
    border-top: 0;
    width: 100%;
    margin: 0;
    padding: 0 10px;
    z-index: 9;
    height: auto;
}

.select_dsg .option li:hover {
    background: #f5f5f5;
}

.def-opt {
    display: block;
    font-weight: 700;
}

.saleBefore {
    text-decoration: line-through;
    color: #aaa;
}

/* 페이징 */
.page {
    text-align: center;
    width: 100%;
    padding: 20px 0;
}

.page section {
    display: inline-block;
    font-weight: normal;
}

.cd-pagination {
    overflow: hidden;
}

.cd-pagination li {
    margin: 0 2px;
    float: left;
    font-size: 15px;
    line-height: 33px;
    box-sizing: border-box;
}

.cd-pagination li a {
    width: 36px;
    height: 36px;
    display: block;
    color: #666;
    border: 1px solid #eee;
    line-height: 36px;
}

.cd-pagination li.on a {
    background: #061f5c;
    color: #fff;
    cursor: default;
}

.cd-pagination li.button a {
    width: 38px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #eee;
}

.cd-pagination li.button a.disabled,
.page li.button a.disabled:hover {
    background: #ffffff;
}

.cd-pagination li.button-none {
    display: none;
}

.cd-pagination li.off a:hover,
.page li.button a:hover {
    background: #d5d5d5;
    color: #666;
}

.cd-pagination li .current {
    width: 36px;
    height: 36px;
    display: block;
    background: #6bb164;
    color: #ffffff;
    border: 1px solid #6bb164;
}


/* 여백 */
.space10 {
    height: 10px;
    clear: both;
}

.space20 {
    height: 20px;
    clear: both;
}

.space30 {
    height: 30px;
    clear: both;
}

.space50 {
    height: 50px;
    clear: both;
}

.space80 {
    height: 80px;
    clear: both;
}

.space100 {
    height: 100px;
    clear: both;
}

.book_banner div.banner3 {
    width: 100%;
}

.book_banner div.banner {
    width: 49.7%;
    margin-right: 0.6%;
}

.book_banner div.banner:last-child {
    margin-right: 0;
}

.book_banner div.banner img {
    width: 100%;
}

.book_banner div.banner:hover {
    overflow: hidden;
}

.book_banner div.banner:hover img {
    transform: scale(1.05);
    transition: all 0.5s;
}

.banner4-space {
    margin-top: 0.6%;
}

@media only screen and (min-width : 361px) and (max-width : 768px) {
    .book_banner div.banner {
        width: 100%;
    }

    .book_banner div.banner:last-child {
        margin-top: 5px;
    }

    .banner4-space {
        margin-top: 6px;
    }
}

@media only screen and (min-width : 100px) and (max-width : 360px) {
    .book_banner div.banner {
        width: 100%;
    }

    .book_banner div.banner:last-child {
        margin-top: 5px;
    }
}


/* 테이블 */
.table_board_for {
    width: 100%;
}

.table_board_for th {
    height: 46px;
    text-align: center;
    border-top: 1px solid #000;
    color: #000;
    font-weight: 500;
    background: #fff;
    font-size: 15px;
    border-bottom: 1px solid #dddddd;
    vertical-align: middle;
}

.table_board_for td {
    line-height: 150%;
    height: 46px;
    font-size: 15px;
    color: #555;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}

.table_board_for td.gallery {
    margin-top: 10px;
    padding-bottom: 15px;
    color: #666;
    border-bottom: 1px solid #fff;
    font-size: 13px;
    text-align: center;
    letter-spacing: 0px;
}

.table_board_for td.gallery img {
    height: 120px;
    width: 180px;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #666;
    border: 1px solid #dddddd;
    font-size: 13px;
    text-align: center;
    letter-spacing: 0px;
}

.table_board_for td.noline {
    border-bottom: 1px solid #fff;
}

.table_board_for td.bleft {
    text-align: left;
}

.table_board_for td.bright {
    text-align: right;
}

.table_board_for td.nleft {
    height: 36px;
    color: #666;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d7d7d7;
    font-size: 13px;
    text-align: left;
    letter-spacing: 0px;
}

.table_write {
    width: 100%;
    height: 100%;
    border-top: 1px solid #333333;
    margin-bottom: 10px;
}

.table_write tr>th {
    width: 18%;
    vertical-align: middle;
    height: 40px;
    padding-left: 10px;
    border-bottom: 1px solid #d7d7d7;
    color: #333333;
    background: #fcfcfc;
    font-size: 13px;
    text-align: left;
    border-right: 1px solid #d7d7d7;
}

.table_write tr>th:last-child {
    border-right: 1px solid #ffffff;
}

.table_write tr>td {
    vertical-align: middle;
    padding: 10px 5px;
    border-bottom: 1px solid #d7d7d7;
    font-size: 13px;
    text-align: left;
    border-right: 1px solid #d7d7d7;
    word-break: break-all;
}

.table_write tr>td.wh {
    height: 40px;
    padding-left: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid #d7d7d7;
    font-size: 13px;
    text-align: left;
    border-right: 1px solid #d7d7d7;
}


.contable {
    overflow: hidden;
    width: 100%;
    margin: 0 0 12px;
    word-break: break-all;
}

.contable .section-box {
    display: table;
    width: 100%;
}

.table-title,
.table-color {
    text-align: center;
    margin: 0;
}

.contable .section-box .ul-1 {
    border-top: 1px solid #000;
    overflow: hidden;
    background: #ffffff;
    border-bottom: 1px solid #ddd;
    display: table;
    width: 100%;
}

.contable .section-box .ul-1>li {
    line-height: 30px;
    padding: 12px 15px;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
}

.table-title .section-box .ul-1 li {
    padding: 12px 0;
    line-height: 1.6;
}

.table-color .section-box .ul-1 {
    border-top: 0;
}

.table-color .section-box:nth-child(odd) .ul-1 {
    background: #fff;
}

.table-textlist .section-box .ul-1>li {
    line-height: 1.6;
    padding: 15px 3px;
    display: table-cell;
    vertical-align: middle;
    float: none;
}

.table-color .section-box:nth-child(odd) .ul-1 {
    background: #fff;
}

.table-color .section-box:nth-child(even) .ul-1 {
    background: #fff;
}

.table-title .section-box .ul-1 {
    color: #333;
    font-weight: 700;
}

.inline-block {
    display: inline-block;
    width: 100%;
}

.dtable {
    width: 100%;
    display: table;
}

.table-th {
    display: table-cell;
    background: #fbfbfb;
    border-bottom: 1px solid #ddd;
    padding: 8px 15px;
    height: 50px;
    vertical-align: middle;
    font-weight: 500;
    color: #333;
}

.table-td {
    display: table-cell;
    border-bottom: 1px solid #ddd;
    height: 50px;
    vertical-align: middle;
    padding: 10px 15px;
    line-height: 1.5;
}

.dtable .table-th {
    width: 15%;
}

.dtable.col2 {
    width: 100%;
}

.dtable.col2 .table-th {
    width: 15%;
}

.dtable.col2 .table-td {
    width: 35%;
}

.table-textlist section:last-child ul.ul-1 {
    border-bottom: 1px solid #ddd;
}

.issueBox {
    margin-top: 20px;
}

.issueBox:after {
    content: "";
    display: block;
    clear: both;
}

.taxBox .dtable.col2 {
    width: 50%;
    float: left;
}

.taxBoxList {
    display: inline-block;
    width: 100%;
}

.taxBoxList:after {
    content: "";
    display: block;
    clear: both;
}

.taxBoxList ul li {
    width: calc(100% / 2);
    float: left;
    padding: 10px;
    position: relative;
}

.taxBoxList ul li:before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #28b9b4;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1px;
}

.taxBoxList ul li+li {
    border-top: 1px dotted #ddd;
}

.taxBoxList ul li.col1 {
    width: 100%;
}

.cashType .check-con {
    margin-right: 20px;
}


/* button */
.btn-box {
    padding: 5px;
    text-align: center;
}

.lecture-btn-box {
    padding: 5px;
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 5px;
}

#btn {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
}

button {
    outline: none;
    margin: 0px 0;
    border: 0;
    height: 35px;
    color: #2e2e2e;
    border-radius: 2px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 15px;
}

button:hover {
    opacity: 0.7;
}

button>img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

button.confirm {
    background: #0082ca;
    margin-bottom: 5px;
    border-radius: 5px;
}

button.cancel {
    background: #c73131;
    margin-bottom: 5px;
}

button.payment {
    background: #0082d0;
    margin-bottom: 5px;
}

button.file-down {
    padding: 2px 5px;
    font-size: 11px;
    background: #000;
}

button.file-down img {
    width: 15px;
    height: 15px;
}

button.small.sample_btn {
    margin-bottom: 3px;
}

.btn {
    font-weight: 700;
    outline: none;
}

.btn_center {
    text-align: center;
    padding-bottom: 10px;
    padding-top: 20px;
    width: 100%;
}

.icon_qna_notice {
    background: #d47af3;
    font-size: 11px;
    width: 72px;
    cursor: default;
    height: 20px;
}

.repl-1,
.repl-2,
.repl-3 {
    font-size: 11px;
    width: 72px;
    cursor: default;
    height: 20px;
}

.repl-1 {
    width: 80px;
    height: 32px;
    font-size: 0.85rem;
    border-radius: 25px;
    padding: 0 8px;
    background: #ef6e6e;
    color: #ffffff;
}

.repl-2 {
    width: 80px;
    height: 32px;
    font-size: 0.85rem;
    border-radius: 25px;
    padding: 0 8px;
    background: #5bbeff;
}

.repl-3 {
    width: 80px;
    height: 32px;
    font-size: 0.85rem;
    border-radius: 25px;
    padding: 0 8px;
    background: #787dff;
    color: #ffffff;
}

.question {
    margin-bottom: 10px;
}

.answer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #ddd;
    margin-bottom: 10px;
}

.btn_board_right {
    width: 50%;
    text-align: right;
    float: right;
    padding-bottom: 5px;
}

.btn_white {
    text-align: center;
    height: 24px;
    border: 1px solid #cccccc;
    color: #666666;
    padding-left: 7px;
    padding-right: 7px;
    cursor: pointer;
    border-radius: 2px;
    font-weight: bold;
    background: #fafafa;
    text-decoration: none;
}

.btn_white:hover {
    text-decoration: none;
    background: #c0c0c0;
    color: #fff;
    font-weight: bold;
}

.bbs-normalbtn {
    color: #000;
    background: none;
    border: 1px solid #ddd;
    font-size: 15px;
    border-radius: 3px;
}

.bbs-normalbtn.bbs-confirm {
    background: var(--main);
    color: #fff;
    border-color: var(--main);
    border-radius: 20px;
    height: 45px;
    width: 110px;
}

.bbs-normalbtn.bbs-confirm:hover {
    background: #003e6b;
    border-color: #003e6b;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.aactive>a:focus {
    cursor: pointer;
}

.wrap_sms_auth_number {
    border: 0px solid #ddd;
    padding-left: 10px;
    padding-top: 5px;
}

button.add-btn {
    font-size: 11px;
    font-weight: 400;
    background: #fff;
    color: #000;
    border: 1px solid #000;
}

button.large {
    border: 0;
    border-radius: 5px;
    width: 49%;
    height: 50px;
}

button.small {
    font-size: 13px;
    letter-spacing: -1px;
    background: #af0d23;
    padding: 5px;
    border-radius: 3px;
    color: #fff;
    width: 80px;
    display: block;
    margin-bottom: 1px;
}

button.small img {
    width: 14px;
    height: 14px;
    margin-left: 10px;
    position: relative;
    top: -1px;
}

button.round-btn {
    font-size: 12px;
    border-radius: 5px;
    position: relative;
    top: -2px;
    left: 5px;
    height: 22px;
    padding: 0 10px;
    min-height: auto;
    line-height: 20px;
}

button.small-line {
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    font-size: 11px;
    padding: 5px;
}

button.normal {
    border: 1px solid #ddd;
    background: #fff;
    color: #000;
    margin-left: 2px;
}

button.s-btn {
    font-size: 11px;
    width: 72px;
    height: 20px;
}

button.btn-cate {
    background: #6b84ff;
    border-radius: 4px;
}

button.buyGo {
    background: #6b84ff;
}

button.buyCart {
    background: #8f98a1;
    font-weight: 500;
}

button.buyCart img {
    filter: brightness(0) saturate(100%) invert(100%);
}

button.buyCart:hover {
    background: #7f8892;
    color: #ffffff;
    border: 1px solid #7f8892;
    font-weight: 500;
    transition: all 0.2s ease-out;
}

button.buyCart:hover img {
    filter: brightness(0) saturate(100%) invert(100%);
}

button.myStudy {
    background: #6b84ff;
}

.k-bnt,
.k-bnt-l {
    background: #444;
    cursor: pointer;
    margin: 0 2px;
}

.k-bnt-s,
.b-bnt-s,
.rp-bnt-s,
.g-bnt-s,
.wk-bnt-s,
.r-bnt-s,
.bl-bnt-s,
.et-btn-s {
    background: #444;
    width: 150px;
    height: 40px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    margin: 0 2px;
    padding: 0;
}

.k-bnt:hover,
.k-bnt-s:hover,
.k-bnt-l:hover {
    background: #111;
}

.bl-bnt:hover,
.bl-bnt-s:hover,
.bl-bnt-l:hover {
    background: #3d41a8;
}

.et-btn:hover,
.et-btn-s:hover,
.et-btn-l:hover {
    background: #6600cc;
}

.b-bnt:hover,
.b-bnt-s:hover,
.b-bnt-l:hover {
    background: #a432ca;
}

.rp-bnt:hover,
.rp-bnt-s:hover {
    background: #b0204c;
}

.g-bnt:hover,
.g-bnt-s:hover {
    background: #246440;
}

.y-bnt:hover,
.y-bnt-s:hover,
.y-bnt-l:hover {
    background: #de8500;
}

.wk-bnt:hover,
.wk-bnt-s:hover,
.wk-bnt-l:hover,
.sms-bnt:hover {
    background: #d5d5d5;
}

.r-bnt:hover,
.r-bnt-s:hover {
    background: #222222;
}

.bnt-ss {
    margin: 0;
    padding: 0;
    width: 70px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: -1px;
}

.b-bnt,
.b-bnt-s,
.b-bnt-l {
    background: #d47af3;
}

.bl-bnt,
.bl-bnt-s,
.bl-bnt-l {
    background: #63a1f1;
}

.et-btn,
.et-btn-s,
.et-btn-l {
    background: #6633cc;
}

.rp-bnt,
.rp-bnt-s {
    background: #777777;
}

.g-bnt,
.g-bnt-s {
    background: #2d7d50;
}

.y-bnt,
.y-bnt-s,
.y-bnt-l {
    background: #ff9900;
}

.wk-bnt,
.wk-bnt-s,
.wk-bnt-l,
.sms-bnt {
    background: #eee;
    color: #444;
}

.r-bnt,
.r-bnt-s {
    background: var(--gray)
}

.gry-bnt {
    background: #a9a9a9;
}

.sms-bnt {
    width: 30px;
    height: 30px;
    padding: 7px;
    margin: 0 5px 10px 0;
    font-size: 16px;
    line-height: 16px;
    color: #444;
}

.btn-confirm {
    border: 0;
    background: var(--main);
    color: #fff;
    padding: 12px 0;
    font-weight: 600;
    height: 45px;
    width: 100%;
    font-size: 16px;
    margin-top: 5px;
    border-radius: 4px;
}

.btn-confirm img {
    width: 20px;
    height: 20px;
    margin-top: -4px;
}


/* icon */
.recomIco {
    background: #b11116;
    color: #ffffff;
    padding: 1px 5px 1px 5px;
    font-size: 11px;
    font-weight: bold;
}

.bestIco {
    background: #339900;
    color: #ffffff;
    padding: 1px 5px 1px 5px;
    font-size: 11px;
    font-weight: bold;
}

.popuIco {
    background: #02b7df;
    color: #ffffff;
    padding: 1px 5px 1px 5px;
    font-size: 11px;
    font-weight: bold;
}

.newIco {
    background: #ff9900;
    color: #ffffff;
    padding: 1px 5px 1px 5px;
    font-size: 11px;
    font-weight: bold;
}

.saleIco {
    background: #b11116;
    color: #ffffff;
    padding: 1px 5px 1px 5px;
    font-size: 11px;
    font-weight: bold;
}


/* SNS공유버튼 */
.social-btn {
    width: 100%;
    text-align: right;
    margin: 20px 0;
}

.social-btn button {
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 0;
    margin-right: 5px;
    padding: 0;
}

.social-btn button.facebook {
    background: url(/files/default-img/facebook-icon.png) no-repeat center top;
}

.social-btn button.instar {
    background: url(/files/default-img/insta-icon.png) no-repeat center top;
}

.social-btn button.kakao {
    background: url(/files/default-img/kakao-icon.png) no-repeat center top;
}

.social-btn button.tellegram {
    background: url(/files/default-img/tellegram-icon.png) no-repeat center top;
}

.abcRioButtonContentWrapper {
    display: none;
}


/* 신청폼 */
.memoform {
    width: 100%;
    max-width: 700px;
    margin: 30px auto;
}

.addEtc {
    padding-top: 5px;
}

/* 게시판 탭메뉴 */
.category-tap {
    display: flex;
    display: -ms-flexbox;
}

.cate-tap.bottom-line {
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}

.cate-tap {
    width: 100%;
    display: inline-block;
}

.cate-tap li {
    height: 40px;
    width: 14%;
    text-align: center;
    background: #fff;
    float: left;
    font-size: 15px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.cate-tap li a {
    display: block;
    padding: 0 20px;
    color: #222222;
}

.cate-tap li a:hover {
    background: #2ecc71;
    color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.cate-tap li.active {
    background: #82b366;
    border: 1px solid #82b366;
}

.cate-tap li.active a {
    color: #fff;
}

.cate-tap li+li {
    margin-left: 2px;
}

/* 게시판 */
.btn_left {
    width: 75%;
    text-align: left;
    float: left;
    padding-bottom: 10px;
}

.bbslist.btn_right {
    width: 25%;
    text-align: right;
    float: right;
    padding-bottom: 10px;
}

.boardSearch {
    text-align: center;
}

.btn_bbs_search {
    background: #6bb164;
    position: relative;
    height: 35px;
    font-size: 13px;
}

.bbsRead-img img {
    width: auto;
    max-width: 100%;
}

.youtubeWrap {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 10px;
    padding-bottom: 56.25%;
}

.youtubeWrap iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bbsbox-table {
    background: #fff;
    width: 170px;
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
}

.bbsbox-table thead tr:first-child td {
    background: #ff9900;
    color: #fff;
    font-weight: 700;
    padding: 5px 0;
}

.bbsbox-table thead tr:first-child td img {
    width: 15px;
    height: 15px;
}

.bbsbox-table input {
    margin: 5px 0;
}

.bbsbox-table button {
    width: 48.7%;
}

.bbsSubject {
    text-align: left;
    cursor: pointer;
}

span.date {
    color: #6d6d6d;
    position: absolute;
    right: 10px;
    font-size: 15px;
    font-weight: 400;
}

.cateName {
    color: #ff9900;
}

.utbThumbWrap {
    padding-bottom: 56%;
}

.utbThumbWrap .utbThumb {
    top: -17%;
}

.utbThumbWrap .g_list_img {
    height: auto;
}


/* 좋아요 */
.thumb-up {
    display: inline-block;
    margin-left: 3px;
    width: 40px;
}

.thumb-up img {
    width: 18px;
    height: 18px;
    position: relative;
}

.thumb-up.readpage .thumbup_bg {
    color: #fff;
    font-size: 11px;
    margin-left: 5px;
}

.thumb-up.readpage .thumbup_bg.on {
    color: #ff0000;
}

.thumb-up.readpage {
    float: left;
    cursor: pointer;
    width: auto;
    background: #2997ed;
    ;
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

.thumb-up.readpage img {
    width: 25px;
    height: 25px;
}


/* 댓글 */
.commnet_title {
    font-size: 13px;
    line-height: 100%;
    margin-bottom: 5px;
    margin-top: 20px;
    padding-left: 10px;
    vertical-align: middle;
    color: #333333;
    font-weight: bold;
    text-align: left;
}

#comment_total {
    color: #ff0000;
}

.table_comment {
    width: 100%;
    background: #f9f9f9;
    padding: 10px;
}

.ctext {
    height: 30px;
    font-size: 12px;
    line-height: 1.5;
    padding: 10px;
    vertical-align: middle;
}

.clock-icon {
    width: 14px;
    height: 14px;
    margin-left: 10px;
}

.comment-btn {
    display: inline-block;
}

.comment_header tr td:last-child {
    width: 100px;
}

.comment_list>td {
    border-bottom: 1px dashed #ddd;
}

.comment_list>td li {
    padding: 5px;
}

.comment_list:last-child td {
    border-bottom: 0
}

.commSbm {
    width: 100px;
    height: 55px;
    position: relative;
    top: 7px;
}

/* 뉴스게시판 */
.ul-news {
    width: 100%;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-spacing: 5px;
}

.ul-news * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

.ul-news td {
    vertical-align: top;
    position: relative;
}

.ul-news td:first-child {
    width: 140px;
}

.ul-news td:last-child {
    width: auto;
}

.news-txt {
    margin-bottom: 10px;
    padding-right: 20px;
}

.news-txt .title {
    font-size: 13px;
    margin: 5px 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    height: 20px;
    color: #000;
}

.news-txt p {
    color: #969696;
}

.news-txt p.news-con {
    color: #444;
    font-size: 13px;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    height: 50px;
    line-height: 1.8;
}

.new-padding-wrap {
    position: relative;
    width: 120px;
    height: 0;
    overflow: hidden;
    padding-bottom: 90%;
}

.new-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
}

.new-wrap img {
    width: 120px;
}

.new-wrap:hover img {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-filter: grayscale(120px);
    filter: grayscale(120px);
}

/* 갤러리게시판 */
.ul-photo {
    display: table;
    width: 100%;
    margin-bottom: 30px;
}

.ul-photo>li {
    width: 22%;
    margin: 10px 1.5%;
    float: left;
    border: 1px solid #ddd;
    position: relative;
}

.ul-photo>li * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
}

.padding-wrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 90%;
}

.img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.img-wrap img {
    width: 100%;
}

.img-wrap:hover img {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.photo-txt {
    padding: 10px;
    text-align: left;
}

.photo-txt .title {
    font-weight: 700;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    height: 45px;
}

.photo-txt .title a{
    color: #141414;
    line-height: 22px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

ul.photo-date {
    width: 100%;
    display: table;
    background: #f5f5f5;
    padding: 10px;
}

ul.photo-date li {
    border: 0;
    float: left;
    margin: 0;
}

ul.photo-date li:last-child {
    float: right;
}

.ul-photo .newIcon {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
}

.utbThumbWrap {
    padding-bottom: 66%;
}

.utbThumb {
    margin-top: -14%;
}



/* 일반게시판 */
.content_box {
    line-height: 2;
    padding: 20px 0;
}

/* CKEditor 출력 - 글자 크기/색상이 본문에 반영되도록 */
.content_box .text-tiny {
    font-size: 0.7em !important;
}

.content_box .text-small {
    font-size: 0.85em !important;
}

.content_box .text-big {
    font-size: 1.4em !important;
}

.content_box .text-huge {
    font-size: 1.8em !important;
}

.content_box table,
.content_box figure.table table {
    border-collapse: collapse;
    border: 1px solid #ccc;
}

.content_box table td,
.content_box table th,
.content_box figure.table td,
.content_box figure.table th {
    border: 1px solid #ccc;
    padding: 6px 10px;
}

.bbslist-t li {
    width: 10%;
}

.bbslist-t li.bbsSubject {
    width: auto;
}


/* 질문게시판 */
.boardQna li:nth-child(1) {
    width: 10%;
}

.boardQna li:nth-child(2) {
    width: auto;
}

.boardQna li:nth-child(3) {
    width: 12%;
}

.boardQna li:nth-child(4) {
    width: 12%;
}

.boardQna li:nth-child(5) {
    width: 10%;
}

.boardQna li:nth-child(6) {
    width: 80px;
}

/* FAQ */
section.faq {
    border-top: 1px solid #dddddd;
}

.ul-faq {
    width: 100%;
    display: table;
}

.ul-faq li {
    border-bottom: 1px solid #ddd;
}

.ul-faq .flip {
    width: 100%;
    padding: 20px 0 20px 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    color: #000;
}

.ul-faq .flip img {
    display: inline-block;
}

.ul-faq .panel {
    display: none;
    padding: 40px 20px;
    width: 100%;
    font-size: 15px;
}

.ul-faq .panel p img {
    width: auto;
    max-width: 100%;
}

.q-icon {
    width: 30px;
    height: 30px;
    fill: #ca2500;
    position: absolute;
    top: 14px;
    left: 10px;
}

/* boxreview */
.bbody.boxreview ul {
    padding: 10px;
    position: relative;
    border: 1px solid #ddd;
}

.bbody.boxreview ul li:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    white-space: normal;
}

.bbody.boxreview ul li:first-child a {
    font-size: 15px;
    line-height: 1.4;
    display: block;
    height: 53px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
}

.bbody.boxreview ul li a>span:first-child,
.bbody.boxreview ul li a .newIcon {
    display: none;
}

.bbody.boxreview ul li.contents {
    height: 238px;
    font-size: 14px;
    line-height: 1.8;
    padding: 10px 0;
    white-space: normal;
}

.bbody.boxreview .bx-wrapper .bx-prev {
    left: 0;
}

.bbody.boxreview .bx-wrapper .bx-next {
    right: 0;
}


/* 매거진 */
/*REFERENCE*/
.text-class {
    width: 100%;
    overflow: hidden;
    line-height: 14px;
    font-size: 14px;
    color: #505050;
    margin: 50px 0 12px;
}

.text-class>li {
    width: 50%;
    display: block;
    float: left;
    padding-left: 20px;
}

.text-class li ul {
    float: right;
}

.text-class li ul li {
    float: left;
    padding: 0 20px;
    border-right: 1px solid #ccc;
}

.text-class li ul li:hover {
    cursor: pointer;
}

.text-class li ul li:last-child {
    border: 0;
    padding-right: 0;
}

.text-list {
    width: 100%;
    padding: 40px 20px 50px;
    border-top: 1px solid #ccc;
}

.text-list:last-child {
    border-bottom: 1px solid #ccc;
}

.text-list .text-title {
    font-size: 18px;
    color: #2c5698;
    font-weight: bold;
}

.text-list .text-body {
    font-size: 16px;
    color: #505050;
    line-height: 1.4;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 20px 0;
}

.text-list .text-date li {
    font-size: 13px;
    color: #808080;
    float: left;
    padding: 0 15px;
    border-left: 1px solid #ccc;
}

.text-list .text-date li:first-child {
    padding-left: 0;
    border: 0;
}

.right-paging {
    padding-top: 80px;
}

.right-paging ul {
    display: block;
    overflow: hidden;
    width: 540px;
    padding-left: 100px;
    margin: 0 auto;
}

.right-paging li {
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #f0f0f0;
    color: #808080;
    font-size: 22px;
    text-align: center;
    float: left;
    margin-right: 10px;
}

.right-paging li:last-child {
    background: none;
    width: 130px;
    text-align: right;
    font-size: 20px;
}

.right-paging li a {
    width: 100%;
    height: 100%;
    display: block;
}


/* 메인캘린더 */
.calendar {
    background: #fbfbfb;
    border: 1px solid #ddd;
    padding: 50px 30px;
    display: inline-block;
    width: 100%;
    margin-top: 40px;
}

.calendar .cal_area {
    width: 70%;
    float: left;
    border-right: 1px solid #ddd;
    padding-right: 30px;
}

.calendar .scheduleList {
    width: calc(30% - 30px);
    float: left;
    margin-left: 30px;
}

.calendar .cal_header .cal_month {
    display: inline-block;
}

.calendar .cal_header .cal_month h1 {
    font-size: 35px;
    letter-spacing: -1px;
}

.calendar .cal_header .cal_btn {
    display: inline-block;
    float: right;
}

.calendar .cal_header .cal_btn a {
    width: 50px;
    height: 50px;
    display: block;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    float: left;
}

.calendar .cal_header .cal_btn a+a {
    border-left: 0;
}

.calendar .line_row {
    display: table;
    width: 100%;
}

.calendar .line_row div {
    width: calc(100% / 7);
    text-align: center;
    height: 70px;
    display: table-cell;
    vertical-align: middle;
}

.calendar .line_row .day-name {
    font-size: 17px;
    color: #000;
    font-weight: 600;
}

.calendar .line_row .day {
    font-size: 17px;
    color: #000;
    font-weight: 600;
    cursor: pointer;
}

.calendar .line_row .day-name.sun,
.calendar .line_row .day.sun {
    color: #ff3268;
}

.calendar .line_row .day-name.sat,
.calendar .line_row .day.sat {
    color: #6a7dea;
}

.calendar .line_row .day.inactive {
    color: #e3e3e3 !important;
}

.calendar .line_row .day span {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
    line-height: 50px;
}

.day.onEvent span {
    background: #f2f2f2;
    color: #000;
}

.day.today span {
    background: #5e7fe6;
    color: #fff;
}

.day.active span {
    background: #f44336;
    color: #fff;
}

.calendar .scheduleList .list_header h1 {
    font-size: 35px;
}

.calendar .scheduleList .default_txt {
    display: table-cell;
    height: 400px;
    vertical-align: middle;
}

.calendar .scheduleList .schedule {
    height: 490px;
    overflow: auto;
    position: relative;
    padding-bottom: 50px;
    display: none;
}

.calendar .scheduleList .schedule.active {
    display: inline-block;
}

.calendar .scheduleList .schedule .schedule_header {
    margin: 20px 0 0;
    letter-spacing: -0.8px;
}

.calendar .scheduleList .schedule .schedule_header .clickDate {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 5px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

.calendar .scheduleList .schedule .schedule_header .title {
    font-size: 17px;
    padding-top: 5px;
}

.calendar .scheduleList .schedule .schedule_content {
    font-size: 13px;
    line-height: 21px;
    letter-spacing: -0.5px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ddd;
}

.calendar .scheduleList .schedule::-webkit-scrollbar {
    width: 0;
}

.calendar .scheduleList .list_txt {
    position: relative;
}

.calendar .scheduleList .list_txt:after {
    content: '';
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(rgba(251, 251, 251, .5), rgba(251, 251, 251, .9));
}

.calendar .schedule_date {
    color: #666;
    margin-bottom: 10px;
}


/* 내글만보기 */
.table_board_for.myBoard th,
.table_board_for.myBoard td {
    width: 15%;
}

.table_board_for.myBoard th:nth-child(1),
.table_board_for.myBoard td:nth-child(1) {
    width: 8%;
}

.table_board_for.myBoard th:nth-child(3),
.table_board_for.myBoard td:nth-child(3) {
    width: 50%;
}


/* 메인게시판 */
.newIcon {
    margin-left: 3px;
}

/* 강사소개/상세 */
.teacher_con {
    position: relative;
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 20px;
}

.teacher_con_box {
    overflow: hidden;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 20px;
}

.teacher_box {
    float: left;
    width: 23%;
    border: 1px solid #d6dce7;
    margin: 10px 1%;
}

.teacher_box>a>.techer-img {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 100%;
    position: relative;
}

.teacher_box>a>.techer-img img {
    width: 100%;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.teacher_box .teacher_title {
    height: 46px;
    text-align: left;
    padding: 10px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    width: 100%;
}

.teacher_box .teacher_name {
    padding: 10px;
    height: 45px;
    text-align: left;
    color: #3f8dc2;
    font-size: 18px;
    font-weight: bold;
}

.teacher_box .teacher_name a:hover {
    color: #3f8dc2;
}

.teacher_box .teacher_text {
    font-size: 12px;
    height: 68px;
    text-align: left;
    padding-left: 18px;
    padding-top: 11px;
    color: #545454;
    line-height: 120%;
}

.teacher_box .teacher_box img {
    bottom: 0;
    width: 128px;
}

.teacherview-tap {
    margin: 30px 0;
}

.teacherview-tap ul {
    width: 100%;
    border-bottom: 1px solid #ccc;
    display: inline-block;
}

.teacherview-tap ul li {
    width: 32.5%;
    float: left;
    text-align: center;
    height: 54px;
    line-height: 54px;
    font-size: 17px;
    transition: 0.3s;
    cursor: pointer;
    border: 1px solid #ddd;
    border-bottom: 0;
    background: #f5f5f5;
}

.teacherview-tap ul li+li {
    margin-left: 1%;
}

.teacherview-tap ul li a,
.teacherview-tap ul li a:visited {
    color: #000;
    font-weight: 700;
    display: block;
}

.teacherview-tap ul li:hover {
    background-color: #efefef;
}

.teacherview-tap ul li.active {
    background-color: #000;
}

.teacherview-tap ul li.active a {
    color: #fff;
}

.teacher_kate_con {
    margin-bottom: 30px;
    line-height: 1.5;
}

.teacherTop {
    display: table;
    width: 100%;
}

.teacherTop .left {
    width: 40%;
    float: left;
}

.teacherTop .left img {
    width: 100%;
}

.teacherTop .right {
    width: 55%;
    float: right;
}

.couponDown {
    background: #8bc34a;
}

.teacherName {
    font-size: 24px;
    color: #333;
    font-weight: 700;
    margin-bottom: 10px;
}

/* 단과리스트 */
.p-wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.c-List-Type {}

.c-List-Type ul.po-table {
    display: flex;
    flex-direction: column;
    border-style: none;
    justify-content: space-between;
}

.c-List-Type ul {
    display: table;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 15px;
}

.po-table-wrap {
    padding: 20px;
    margin-bottom: 20px;
}

.po-table-wrap:hover {}

.c-List-Type ul li {
    display: table-cell;
    vertical-align: bottom;
    font-size: 13px;
    position: relative;
}

.c-List-Type ul li:nth-child(1) {
    width: 430px;
    position: relative;
    padding-right: 20px;
}

.c-List-Type ul li:nth-child(1) img {
    width: 100%;
    height: 175px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.c-List-Type ul li:nth-child(2) {}

/* .c-List-Type ul li:nth-child(3) {padding: 10px; width: 300px; display: flex;
    flex-direction: column;  justify-content: space-between;  } */
.c-List-Type ul li .course-Name {
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

.c-List-Type ul li p,
.c-Album-Type ul li p {
    margin: 0px 0;
    padding-right: 8px;
}

.choice-t {
    float: left;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin-top: 0;
    padding-right: 8px;
}

.tck-box {
    margin-top: 2px;
    font-size: 12px;
}

.tck-box label {
    margin-right: 20px;
    font-size: 13px;
}

.lecture-Price {
    position: relative;
    bottom: 0;
}

.lecture-Price p {
    float: right;
    font-weight: 400;
    font-size: 20px;
    color: #525252;
    padding-top: 7px;
}

.lecture-Price .sale-P {
    float: right;
    color: #db0f0f;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -1px;
    padding-right: 6px;
}

.lecture-Price .sale-P span {
    font-size: 18px;
    font-weight: 400;
}

.c-List-Type ul li .lecture-Price p {
    margin: 0px 0;
    float: left;
    padding-right: 10px;
}

button.detail-btn {
    float: right;
    width: 60%;
    background: #6b84ff;
    font-size: 15px;
    font-weight: 700;
    height: 38px;
    border-radius: 6px;
    color: #fff;
    border: 1px solid #637bf7;
}

button.detail-btn.myClass {
    background: #ff9900;
}

.sale-Price {
    margin-bottom: -15px;
    padding-top: 15px;
}

.c-List-Type ul li .lecture-Price .sale-Price p {
    margin: 0;
}

.lineth {
    float: right;
    font-size: 16px;
    color: #8b8b8b;
    font-weight: 400;
    text-decoration: line-through;
    margin-top: 9px;
    letter-spacing: -1px;
}

.dsrt {
    color: #8c8c8c;
    font-weight: 500;
    font-size: 14p;
}

.noneLecture {
    text-align: center;
    font-size: 14px;
    margin-bottom: 20px;
}

.stateBtn {
    position: absolute;
    top: 15px;
    left: 17px;
    color: #fff;
    letter-spacing: -1px;
    font-size: 13px;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 5px;
    margin: 8px;
}

.state1 {
    background: #2196f3;
}

.state2 {
    background: #587cd1;
}

.state3 {
    background: #000000;
}

.state4 {
    background: #795548;
}

.appDate {
    font-size: 14px;
}

span.list_tit {
    color: #222222;
}



/*detail-btn 마우스오버 효과*/
button.detail-btn {
    position: relative;
    transition: all 0.3s ease;
}

button.detail-btn:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: #764bc7;
    transition: all 0.3s ease;
}

button.detail-btn:hover:after {
    top: 0;
    left: 0;
    width: 100%;
}



/* 단과앨범 */

.po-table-wrap {
    width: 31%;
    margin: 1%;
    padding: 7px;
    background: #fff;
    list-style: none;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    border: 1px solid #c7ced9;
    border-radius: 12px;
}

.block-thumb {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.block-thumb img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.po-table {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.course-Name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000;
    height: 50px !important;
    line-height: 1.3;
    text-align: left;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.lecture-Price {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

.lec_p5 {
    display: flex;
    align-items: baseline;
}

.lec_p5 p {
    font-size: 16px;
    font-weight: 500;
    margin-right: 8px;
    color: #000;
}

.sale-P {
    font-size: 28px;
    font-weight: 800;
    color: #0000a0;
}

.sale-P span {
    font-size: 18px;
    color: #000;
    margin-left: 3px;
}

.course_p_box,
.maxcount,
.detail-btn,
.choice-t {
    display: none !important;
}

.po-table-wrap:hover {}

.po-table-wrap:hover .block-thumb img {
    transform: scale(1.1);
    transition: all 0.3s ease;
}


/* 강좌아이콘 */
.inlineblock {
    width: 100%;
}

.icon-Box {
    margin: 0px 0 1px;
    display: inline-block;
    width: 100%;
}

.priceWrap {
    float: right;
}

.item-icon {
    display: inline-block;
    line-height: 14px;
    font-size: 12px;
    text-align: center;
    padding: 0 6px;
    margin-right: 4px;
    letter-spacing: -1px;
}

.bestItem {
    color: #155183;
    background: #76d0f2;
}

.newItem {
    color: #77650f;
    background: #fbe365;
}

.sampleItem {
    color: #fff;
    background: #af0d23;
    border-radius: 13px;
    font-size: 10px;
    letter-spacing: 0px;
    padding: 3px 5px;
    float: right;
}

.saleItem {
    color: #fff;
    background: #ff9900;
}

.freeItem {
    color: #fff;
    background: #000;
}

.offlineItem {
    width: 100%;
    color: #ffffff;
    background: #2196f3;
    float: right;
    border-radius: 12px;
    padding: 2px 5px;
}

.saleIcon {
    display: inline-block;
    font-size: 15px;
    color: #ff0000;
    background: #ffffff;
    padding: 0 6px;
    border-radius: 3px;
    height: 18px;
    line-height: 18px;
    margin-left: 0px;
    font-weight: 300;
}

.saleIcon img {
    width: 14px;
    height: 14px;
}

/* 도서상세 */
#chk_books{
    display: none;
}

.detail-top {
    width: 100%;
    display: inline-block;
}

.detail-top .left {
    width: 38%;
    max-width: 350px;
    float: left;
    border-radius: 11px;
    border: 1px solid #ddd;
    position: relative;
}

.detail-top .left>img {
    width: 100%;
    margin-bottom: 0px;
    border-radius: 10px;
}

.detail-top .right {
    width: 64%;
    float: right;
    padding: 0px;
}

.detail-top .right p {
    font-family: sans-serif;
    font-size: 15px;
    margin-bottom: 5px;
    color: #474747;
    line-height: 1.4;
}

.detail-top .right select {
    height: 35px;
}

.detail-top .right h2 {
    color: #403f3f;
    margin-bottom: 40px;
    font-size: 30px;
    letter-spacing: -1px;
    margin-top: 9px;
}

.detail-top .right table {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 100%;
    font-size: 15px;
}

.detail-top .right th {
    padding: 10px;
    background: #f5f5f5;
    width: 30%;
    color: #333;
}

.detail-top .right td {
    padding: 10px;
    width: 70%;
}

.detail-top .right td .line {
    text-decoration: line-through;
}

.detail-top .right td .price {
    font-size: 18px;
    color: #ca2500;
    font-weight: bold;
}

/* 강좌상세 */
#discount {
    text-decoration: line-through;
    color: #999;
}

.pay-btn {
    margin-top: 20px;
    text-align: center;
    /* display: none; */
}

.pay-btn span {
    display: flex;
    gap: 6px;
}

.detail-center,
.detail-bottom {
    padding: 30px 0;
}

#lec-list table {
    width: 100%;
    font-size: 16px;
}

#lec-list table th {
    background: #ffffff;
    color: #333;
    font-weight: 700;
    text-align: center;
    padding: 10px 0;
    height: 50px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #ddd;
}

#lec-list table tr.lec-header th {
    color: #000;
}

#lec-list table td {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    height: 50px;
}

#lec-list table td.number {
    width: 7%;
    max-width: 60px;
    text-align: center;
    color: var(--main);
    font-weight: 500;
}

#lec-list table td.title {
    width: auto;
    line-height: 1.5;
}

#lec-list table td.title span {
    margin-right: 5px;
}

#lec-list table td.time {
    width: 15%;
    max-width: 130px;
    text-align: center;
}

#lec-list table td.data {
    width: 10%;
    max-width: 70px;
    text-align: center;
}

#lec-list table td.data img {
    width: 24px;
    height: 24px;
}

#lec-list table td.view {
    width: 15%;
    max-width: 130px;
    text-align: center;
}

#lec-list table td.view a.sample-veiw {
    background: #fff;
    border: 1px solid var(--main);
    color: var(--main);
    height: 30px;
    font-size: 14px;
    margin: 2px auto;
    min-height: auto;
    width: 80px;
    padding: 7px 9px;
    border-radius: 15px;
}

#lec-list table td.view a.sample-veiw:hover {
    background: var(--main);
    border: 1px solid var(--main);
    color: #fff;
    height: 30px;
    margin: 2px auto;
    min-height: auto;
    width: 80px;
}

#lec-list table td.view a.sample-veiw img {
    width: 14px;
    height: 14px;
    margin-left: 10px;
    position: relative;
    top: -1px;
    color: #000000;
}

#lec-list table td.view a.sample-veiw:hover img {
    filter: invert(100%);
}

#lec-list table td.view>button {
    background: #fff;
    border: 1px solid var(--main);
    color: var(--main);
    height: 30px;
    margin: 2px auto;
    min-height: auto;
    width: 90px;
    border-radius: 15px;
}

#lec-list table td.view>button:hover {
    background: var(--main);
    border: 1px solid var(--main);
    color: #fff;
    height: 30px;
    margin: 2px auto;
    min-height: auto;
    width: 90px;
}

#lec-list table td.view>button img {
    width: 14px;
    height: 14px;
    margin-left: 10px;
    position: relative;
    top: -1px;
}

#lec-list table td.view>button:hover img {
    filter: invert(100%);
}

#course-list .modal-body p {
    padding-left: 20px;
    background: url(/files/default-img/menu-right.svg) no-repeat top left;
}

.detail-tab {
    overflow: hidden;
    border-bottom: 1px solid #dfdfdf;
    margin-bottom: 20px;
    margin-top: 30px;
}

.detail-tab button {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0 5%;
    transition: 0.3s;
    font-size: 17px;
    color: #333;
    border: 1px solid #ddd;
    border-bottom: 0;
    height: 48px;
}

.detail-tab button:hover {
    background-color: #798ffc;
    color: #ffffff;
    opacity: 1;
}

.detail-tab button.active {
    background-color: #ffffff;
    color: #6b84ff;
    border-top: 2px solid #6b84ff;
}

.tabcontent {
    display: none;
    padding: 20px 0px;
}

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

.detailWrap .detailLeft {
    width: 100%;
    max-width: 720px;
    padding: 0px 20px 0px 0px;
    border-radius: 15px;
    background: #ffffff;
}

.detailWrap .detailRight {
    order: 2;
    width: 50%;
}

.detailFormBox {
    border: 1px solid #ddd;
}

.detailImgBox {
    position: relative;
    border-radius: 15px;
    border: 1px solid #eee;
}

.detailImgBox img {
    width: 100%;
    border-radius: 15px;
}

/* 상세설명 영역 이미지: 넓이에 맞추고 비율 유지 (height 늘어남 방지) */
.detail-center img,
#detail-view img,
.detailWrap .detailLeft img,
.detailLeft img {
    max-width: 100%;
    width: 100%;
    height: auto !important;
    object-fit: contain;
}

.detailRight {
    align-self: flex-start;
    position: sticky;
    top: 0;
}

.detailFormBox {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: rgb(100 100 111 / 10%) 0px 5px 5px 0px;
}

.detailFormBox p {
    display: none;
    font-size: 16px;
    font-weight: 700;
    color: #666666;
    margin-bottom: 5px;
}

.detailFormBox select {
    height: 35px;
}

.detailFormBox h2 {
    color: #000;
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 700;
}

.detailFormBox table {
    border-top: 0px solid #000;
    border-bottom: 1px solid #ddd;
    width: 100%;
    font-size: 16px;
}

.detailFormBox th {
    padding: 7px 0px 7px 0px;
    background: #ffffff;
    width: 24%;
    color: #333;
    text-align: left;
    vertical-align: middle;
}

.detailFormBox th::before {
    display: inline-block;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #00b2d2;
    margin-bottom: 5px;
    margin-right: 5px;
}

.detailFormBox td {
    padding: 7px 3px;
    ;
    width: 80%;
    color: #666666;
    font-weight: 400;
}

.detailFormBox td .line {
    text-decoration: line-through;
}

.detailFormBox td .price {
    font-size: 24px;
    color: #2997ed;
    font-weight: bold;
    letter-spacing: -1px;
}

.detailFormBox td .option li,
.def-opt {
    background: #ffffff;
    color: #333;
    font-weight: 300;
    font-size: 15px;
    padding: 0 0px;
    height: 16px;
    line-height: 16px;
    cursor: pointer;
    border: 0px solid #ddd;
}

.buyCount.soldout {
    color: #ff0000;
}

/* 강의신청 상단 이미지: PC/모바일 분리 */
.detailImgBox.box_mo {
    display: none !important;
}

.detailImgBox.box_pc {
    display: block !important;
}

@media (max-width: 834px) {
    .detailImgBox.box_mo {
        display: block !important;
        margin-top: -30px;
        margin-bottom: 10px;
    }

    .detailImgBox.box_mo img {
        display: block !important;
    }

    .detailImgBox.box_pc {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .detailImgBox.box_mo {
        display: block !important;
        margin-top: -30px;
        margin-bottom: 10px;
    }

    .detailImgBox.box_mo img {
        display: block !important;
    }

    .detailImgBox.box_pc {
        display: none !important;
    }
}

.mobile-paybar {
    display: none;
}

@media screen and (max-width: 840px) {
    .detailWrap {
        display: block;
    }

    .detailWrap .detailLeft {
        max-width: 100%;
    }

    .detailWrap .detailRight {
        width: 100%;
    }

    .detailWrap .detailRight {
        position: static !important;
    }

    .mobile-paybar {
        display: none;
    }

    body.mobile-paybar-on {
        padding-top: 72px;
    }

    body.mobile-paybar-on .detailFormBox .pay-btn #buy_cart {
        display: none !important;
    }

    body.mobile-paybar-on .mobile-paybar#mobilePayBar {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100000;
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 10px 12px;
        box-shadow: 0 4px 20px rgba(15, 23, 42, .1);
        border-bottom: 1px solid rgba(15, 23, 42, .06);
    }

    body.mobile-paybar-on .mobile-paybar#mobilePayBar .mobile-paybar-inner {
        max-width: 720px;
        margin: 0 auto;
        display: flex;
        gap: 10px;
    }

    body.mobile-paybar-on .mobile-paybar#mobilePayBar .mobile-paybar-inner button.large {
        flex: 1;
        height: 50px;
        margin: 0;
    }

    .pay-rail {
        display: none;
    }
}

@media (max-width: 480px) {
    .detailWrap {
        flex-direction: column-reverse;
        display: inline-block;
    }

    .detailWrap .detailLeft {
        width: 100%;
        background: #ffffff;
        padding: 0%;
        border-radius: 10px;
    }

    .detailWrap .detailRight {
        width: 100%;
        position: static;
        margin-bottom: 1rem;
    }

    .detailWrap .detailRight .detailFormBox {
        padding: 10px;
        background: #ffffff;
        border-radius: 10px;
    }
}

/* 스크롤 시 좌측 84% / 우측 16% 배치, pay-rail이 오른쪽 열에서 sticky로 따라가게 */
@media screen and (min-width: 841px) {
    .detailWrap .detailLeft {
        transition: width 0.25s ease, max-width 0.25s ease, padding 0.25s ease;
    }

    .detailWrap.detailRightScrolledOut .detailRight {
        display: none !important;
    }

    .detailWrap.detailRightScrolledOut .detailLeft {
        width: 84% !important;
        max-width: 84% !important;
        padding-right: 20px;
    }

    .pay-rail {
        display: none;
        flex-shrink: 0;
        order: 2;
        align-self: flex-start;
        position: sticky;
        top: calc(50vh - 360px);
        width: 16%;
        padding: 0;
        margin: 0;
        border: none;
        background: none;
    }

    .detailWrap.detailRightScrolledOut .pay-rail {
        display: block !important;
    }
}

/* pay-card v2: 스크롤 시 우측 고정 결제 카드 */
.pay-rail .pay-card.v2 {
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow:
        0 18px 30px rgba(15, 23, 42, .10),
        0 1px 0 rgba(255, 255, 255, .9) inset;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.pay-rail .pay-card.v2 .pay-top {
    padding: 12px 12px 10px;
    background:
        radial-gradient(120px 70px at 20% 0%, rgba(79, 108, 255, .14), rgba(79, 108, 255, 0) 60%),
        radial-gradient(120px 70px at 90% 20%, rgba(34, 197, 255, .10), rgba(34, 197, 255, 0) 60%),
        #fff;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.pay-rail .pay-card.v2 .pay-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(15, 23, 42, .55);
    letter-spacing: -.2px;
    margin-bottom: 6px;
}

.pay-rail .pay-card.v2 .pay-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    padding: 2px 0 4px;
    white-space: nowrap;
}

.pay-rail .pay-card.v2 .pay-price .num {
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -.7px;
    color: #0f172a !important;
}

.pay-rail .pay-card.v2 .pay-price .num .won,
.pay-rail .pay-card.v2 .pay-price .won {
    font-weight: 800;
    font-size: 14px;
    color: rgba(15, 23, 42, .55) !important;
    margin-left: 0;
}

.pay-rail .pay-card.v2 .pay-sub {
    text-align: center;
    font-size: 10.5px;
    color: rgba(15, 23, 42, .52);
    letter-spacing: -.2px;
}

.pay-rail .pay-card.v2 .pay-btn.v2 {
    width: 145px;
    max-width: calc(100% - 18px);
    margin: 10px auto 8px;
    border: 0;
    border-radius: 12px;
    min-height: 40px;
    height: 40px;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: -.3px;
    background: linear-gradient(135deg, #5b7cff 0%, #4a67ff 55%, #3b5bff 100%);
    box-shadow:
        0 14px 22px rgba(59, 91, 255, .30),
        0 1px 0 rgba(255, 255, 255, .32) inset;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    position: relative;
    overflow: hidden;
}

.pay-rail .pay-card.v2 .pay-btn.v2::before {
    content: "";
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 35%,
            rgba(255, 255, 255, .35) 50%,
            rgba(255, 255, 255, 0) 65%);
    transform: translateX(-35%);
    transition: transform .6s ease;
    pointer-events: none;
}

.pay-rail .pay-card.v2 .pay-btn.v2 .btn-ico {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset;
    font-size: 13px;
    border: none;
}

.pay-rail .pay-card.v2 .pay-btn.v2:hover {
    transform: translateY(-2px);
    filter: brightness(1.02);
    box-shadow:
        0 18px 28px rgba(59, 91, 255, .34),
        0 1px 0 rgba(255, 255, 255, .34) inset;
}

.pay-rail .pay-card.v2 .pay-btn.v2:hover::before {
    transform: translateX(35%);
}

.pay-rail .pay-card.v2 .pay-btn.v2:active {
    transform: translateY(0px);
    filter: brightness(.99);
}

.pay-rail .pay-card.v2 .pay-btn.v2:focus-visible {
    outline: none;
    box-shadow:
        0 18px 28px rgba(59, 91, 255, .34),
        0 0 0 3px rgba(255, 255, 255, .8),
        0 0 0 6px rgba(59, 91, 255, .35);
}

.pay-rail .pay-card.v2 .pay-ghost {
    width: 145px;
    max-width: calc(100% - 18px);
    margin: 0 auto 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: #fff;
    min-height: 40px;
    height: 40px;
    padding: 0 10px;
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
    color: rgba(15, 23, 42, .72);
    transition: transform .15s ease, background .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pay-rail .pay-card.v2 .pay-ghost:hover {
    transform: translateY(-1px);
    background: rgba(15, 23, 42, .03);
}

.pay-rail .pay-card.v2 .pay-ghost:active {
    transform: translateY(0px);
}

/* pay-rail 합계금액: 전역 .num 스타일 제외, 배경 없이 금액+원 한 줄 표시 */
aside#payFloatWrap.pay-rail .pay-card.v2 .pay-price .num,
aside.pay-rail#payFloatWrap .pay-card.v2 .pay-price span.num {
    width: auto;
    height: auto;
    min-width: 0;
    border-radius: 0;
    display: inline;
    background: none !important;
    color: #0f172a !important;
    font-weight: 900;
    flex: none;
    place-items: unset;
}

aside#payFloatWrap.pay-rail .pay-card.v2 .pay-price .num .won,
aside#payFloatWrap.pay-rail .pay-card.v2 .pay-price .won {
    color: rgba(15, 23, 42, .55) !important;
    margin-left: 2px;
}


/* 패키지상세 */
.listTable {
    width: 100%;
    display: table;
}

.listTable .packCont {
    display: table;
    float: left;
}

.listTable .packCont h2 {
    margin-top: 0px;
    font-size: 20px;
}

.listTable .packCont h2:hover {
    color: #4e609f;
    ;
}

.listTable .listView {
    display: table;
    width: 120px;
    float: right;
    margin-top: 20px;
}

.btn_pack_list {
    width: 100%;
    background: #4a59a3;
    border-radius: 10px;
}

.pack_list {
    display: none;
    margin-top: 30px;
}

ul.lecture-block {
    width: 100%;
    position: relative;
}

ul.lecture-block li {
    width: 100%;
    display: inline-block;
    padding: 15px;
    border: 1px solid #ddd;
    position: relative;
    margin-bottom: 10px;
    border-radius: 5px;
}

ul.lecture-block li:hover {
    border: 1px solid #4e609f;
    transition: all 0.2s ease-out;
}

#lec-list table tr:last-child td {
    border-bottom: 0;
}

/* 교재리스트/상세 */
.book-page {
    overflow: hidden;
    /* border-top: 1px solid #555555; */
    margin: 10px 0;
}

.book-list {
    border-top: 1px solid #e1e1e1;
    overflow: hidden;
}

.book_box {
    float: left;
    width: 48%;
    margin: 20px 1%;
    display: table;
}

.book_left {
    width: 130px;
    display: table-cell;
    vertical-align: top;
    border: 1px solid #ddd;
}

.book_left img {
    width: 100%;
}

.book_right {
    text-align: left;
    padding-left: 20px;
    display: table-cell;
    vertical-align: top;
}

.book_right li {
    line-height: 2;
    font-size: 16px
}

.book_right li:nth-child(2) {
    display: none;
}

.book_right li h2 {
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 10px;
}

#book_detail,
#tran_detail {
    text-align: left;
    padding-top: 20px;
}

.book-cate {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#book_detail p img {
    width: auto;
    max-width: 100%;
}

/* 쇼핑몰 */
.shopping-page {
    position: relative;
    padding: 20px 0;
    display: inline-block;
    width: 100%;
}

.goods-box {
    float: left;
    width: 23%;
    margin: 10px 1%;
}

.shopping_top {
    width: 100%;
}

.shopping_bottom {
    width: 100%;
    padding: 10px 0;
}

.shopping_title a {
    font-size: 12px;
    line-height: 1.4;
    color: #333;
}

.shopping_title {
    text-align: center;
    padding-top: 5px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: 1.2em;
}

.shopping_text {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding-left: 18px;
    padding-top: 10px;
    letter-spacing: -1px;
    color: #920000;
    line-height: 120%;
}

.shopping_text a {
    color: #920000;
}

.shopping_top img {
    width: 100%;
}

.shop-price {
    text-align: center;
    padding-top: 5px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    height: 35px;
}

.shop-price strike {
    color: #ca2500;
}

.no-sales {
    padding-top: 10px;
    font-weight: bold;
    font-size: 13px;
}

.shopview_img {
    width: 35%;
    float: left;
    text-align: center;
    margin-bottom: 20px;
    margin-right: 1%;
}

.shopview_img img {
    width: 100%;
    padding: 1px;
}


/* 나의강의실 */
.lecturestudy {
    width: 100%;
    position: relative;
}

.lecturestudy li {
    padding: 17px;
    border: 1px solid #ddd;
    margin-bottom: 40px;
    position: relative;
    border-radius: 8px;
}

.lecturestudy li.finishstudy {
    background: #f5f5f5;
}

.lecturestudy li.finishstudy .lectureTxt h2,
.lecturestudy li.finishstudy .lectureTxt p,
.lecturestudy li.finishstudy .lectureTxt div {
    color: #ccc;
}

.lecturestudy li.finishstudy p.term {
    color: #ff0000;
}

.mylecBox {
    display: table;
    width: 100%;
}

.lectureImg {
    width: 170px;
    display: table-cell;
    vertical-align: top;
}

.lectureImg img {
    width: 100%;
    border-radius: 8px;
}

.lectureTxt {
    display: table-cell;
    vertical-align: top;
    padding-left: 20px;
    text-align: left;
    position: relative;
}

.lectureTxt h2 {
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 20px;
}

.lectureTxt p,
.lectureTxt div {
    font-size: 15px;
    line-height: 1.8;
    color: #656565;
}

.WrapBtn {
    margin-top: 5px;
}

.btn-area.pause {
    width: 150px;
    display: table-cell;
    position: relative;
}

.pause-btn {
    border: 1px solid #000;
    color: #000;
    font-size: 15px;
    background: #fff;
    width: 150px;
    height: 42px;
}

.pause_date_input {
    height: 42px;
    padding: 10px;
    background: #efefef;
    border: 1px solid #ddd;
    position: relative;
    top: 1px;
    width: 150px;
    margin-bottom: 5px;
}

.pause_close {
    width: 150px;
    text-align: center;
    background: #000;
    color: #fff;
    position: relative;
    padding: 5px;
    cursor: pointer;
    margin-top: 5px;
}

.pause-btn.pauseStop {
    border: 1px solid #ff0000;
    color: #ff0000;
}

.pause-btn.pause_date {
    border: 1px solid #061f5c;
    color: #061f5c;
}

.my-class h1 {
    background: url(/files/default-img/play.svg) no-repeat 0 16px;
    font-size: 15px;
    cursor: pointer;
    background-size: 20px;
    padding: 15px 0 15px 30px;
    border-top: 1px dashed #ddd;
}

p.term {
    font-weight: 700;
    color: #000000;
}

.mystudytap {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}

#lec-list .movie_list .space30.lec-space {
    height: auto;
    min-height: 0;
}

.mystudytap li {
    width: 200px;
    padding: 8px 10px;
    color: #222222;
    text-align: center;
    border-bottom: 0;
    font-size: 16px;
    margin: 0;
    float: left;
    margin-right: 2px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.mystudytap li:hover {
    background: #f5f5f5;
}

.mystudytap li.active {
    background: #061f5c;
    color: #fff;
}

#lec-list {
    padding: 0;
    margin-bottom: 50px;
    margin-top: 10px;
}

.empty {
    text-align: center;
}

.w3-light-grey {
    margin-top: 10px;
    width: 100%;
    background: #f5f5f5;
}

.w3-light-grey .w3-red {
    background: #ff0000;
}

.my_board {
    margin-bottom: 30px;
}

.macDown {
    position: relative;
    width: 50%;
    margin-top: -35px;
    float: right;
    text-align: right;
    z-index: 999999;
}

.macDown button {
    background: #000;
    line-height: 35px;
}

.myClassTab {
    width: 100%;
    margin: 0px auto 20px;
    display: inline-block;
    border-bottom: 1px solid #ddd;
}

.myClassTab a {
    font-size: 15px;
    padding: 10px;
    display: block;
    width: 33%;
    background: #f5f5f5;
    color: #555;
    text-align: center;
    float: left;
    font-weight: 400;
}

.myClassTab a+a {
    margin-left: 0.5%;
    border-radius: 6px 6px 0 0;
}

.myClassTab a.active,
.myClassTab a:hover.active {
    color: #ffffff;
    background: #5585df;
    border-radius: 6px 6px 0 0;
}

.myClassTab a:hover {
    background: #ddd;
    color: #333;
}

.starImg {
    position: relative;
    display: inline-block;
    width: 80px;
    padding: 0;
}

.starImg span {
    display: inline-block;
    width: 100%;
    height: 15px;
    background: url(/files/default-img/star.png) no-repeat top left;
    background-size: 80px;
    position: absolute;
    left: 0;
    top: 0;
}

.starImg span.on {
    z-index: 1;
    background: url(/files/default-img/star.png) no-repeat bottom left;
    overflow: hidden;
    background-size: 80px;
}

.starBox {
    text-align: left;
    font-weight: bold;
    color: #000;
}

.starBox div {
    float: left;
}

.starBox .starImg {
    margin-left: 20px;
}

.starBox .starImg button {
    width: 10%;
    height: 15px;
    padding: 0;
    background: none;
    position: absolute;
    z-index: 2;
}

.starBox .starImg button.one {
    left: 0;
}

.starBox .starImg button.two {
    left: 10%;
}

.starBox .starImg button.three {
    left: 20%;
}

.starBox .starImg button.four {
    left: 30%;
}

.starBox .starImg button.five {
    left: 40%;
}

.starBox .starImg button.six {
    left: 50%;
}

.starBox .starImg button.seven {
    left: 60%;
}

.starBox .starImg button.eight {
    left: 70%;
}

.starBox .starImg button.nine {
    left: 80%;
}

.starBox .starImg button.ten {
    left: 90%;
}

button.certificateView {
    width: 200px;
    background: #000;
    position: absolute;
    right: 0;
    top: 0;
}

.WrapBtn button {
    width: 32%;
    max-width: 150px;
    color: #444;
    background: #fff;
    border: 1px solid #ddd;
    height: 34px;
    border-radius: 5px;
}

.WrapBtn button:hover {
    width: 32%;
    max-width: 150px;
    color: #ffffff;
    background: var(--main);
    border: 1px solid var(--main);
    height: 34px;
    border-radius: 5px;
}

.WrapBtn button:hover img {
    filter: invert(100%);
}

button.listOpen {
    width: 100%;
    margin-top: 7px;
    background: #2c5698;
    display: block;
    border-radius: 5px;
}

#lec-list .number {
    width: 65px;
}

#lec-list .title {
    width: auto;
}

#lec-list .time {
    width: 120px;
}

#lec-list .page {
    width: 100px;
}

#lec-list .data {
    width: 80px;
}

#lec-list .view {
    width: 120px;
}

.q-icon {
    width: 30px;
    height: 30px;
    background: #82b366;
    position: absolute;
    top: 17px;
    left: 2px;
    padding: 2px;
    border-radius: 50%;
}

span.list_tit {
    color: #222222;
    font-weight: 600;
    margin-right: 6px;
}

span.list_tit::before {
    display: inline-block;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #c3c3c3;
    margin-bottom: 3px;
    margin-right: 5px;
    left: 12px;
}





/* 쿠폰 */
#coupon_no {
    width: 30%;
}

.coupon-mobile {
    text-align: left;
    font-size: 12px;
}

.add-coupon {
    text-align: right;
    position: relative;
    margin: 5px 0;
}

.add-coupon-btn {
    height: 35px;
    padding: 0 15px;
    font-size: 13px;
    background: #6b84ff;
    position: absolute;
    width: 100px;
    right: 0;
    border-radius: 0;
    top: 0;
}

.couponUse-p {
    background: #3366cc;
}

.couponCancel-p {
    background: #ff9900;
}

.impossible-p {
    background: #ff0000;
}

.couponList th {
    width: 10%;
}

.couponList th:nth-child(1) {
    width: 13%;
}

.couponList th:nth-child(2) {
    width: 25%;
}

.couponList th:nth-child(5) {
    width: auto;
}

#couponCode {
    width: 350px;
}


/* 쪽지 */
#memo>.modal-dialog {
    z-index: 9999;
    top: 100px;
    height: 90px;
    max-width: 400px;
    width: 95%;
}

.memo-btn {
    text-align: center;
    padding-bottom: 10px;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.memo-num {
    width: 40px;
}

.memo-send {
    width: 120px;
}

.memo-name {
    width: auto;
}

.memo-sd {
    width: 120px;
}

.memo-rd {
    width: 120px;
}

.memo-del {
    width: 40px;
}

.table_write.max480 tr>th {
    width: 27%;
}

.table_write.memoform tr>td {
    width: auto;
}

table.table_write.memoform>tbody>tr>th {
    width: 25%;
}

table.table_write.memoform>tbody>tr>td {
    width: 75%;
}

table.table_write.memoform>tbody>tr>td>input.text {
    width: 100%;
}

ul.memolist {
    text-align: center;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

ul.memolist li {
    display: inline-block;
    border-radius: 6px;
    padding: 10px;
    font-size: 15px;
    font-weight: 400;
    background: #efefef;
    width: 32.5%;
    color: #333;
}

ul.memolist li.active {
    background: #5585df;
    border-radius: 6px;
    color: #fff;
}

.memoPaging {
    width: auto;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    display: table
}

#goMemo {
    font-size: 15px;
}

#goMemo span {
    color: #ff9900;
}

/* 주문결제내역 */
.order_con_box {
    border-top: 1px solid #555555;
}

.order_box {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 5px solid #e8e8e8;
    height: 80px;
}

.order_text {
    margin: 0 auto;
    padding-top: 22px;
    width: 100%;
}

.order_text .oleft {
    text-align: left;
    float: left;
    margin-right: 18px;
    padding-left: 18px;
    letter-spacing: 0px;
    color: #545454;
    line-height: 120%;
}

.order_text .oleft .period {
    background: #f8f8f8;
    border: 1px solid #d5d5d5;
    height: 25px;
    border-radius: 2px;
}

.order_text .oleft .period .data {
    border-left: 1px solid #d5d5d5;
    padding: 4px;
    float: left;
    font-size: 11px;
}

.order_text .oleft .period .data:first-child {
    float: left;
    border-left: 0px solid #d5d5d5;
    font-size: 11px;
}

.order_text .oright {
    font-size: 12px;
    text-align: left;
    left: 22px;
    letter-spacing: 0px;
    color: #545454;
    line-height: 120%;
}

.order_detail_box {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 2px solid #3f8dc2;
    background: #f6f6f6;
    min-height: 80px;
}

table.table_order {
    width: 90%;
    margin-top: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
}

table.table_order th {
    height: 25px;
    text-align: left;
    padding-left: 35px;
    font-size: 13px;
    color: #333;
}

table.table_order td {
    height: 25px;
    text-align: left;
    color: #666666;
    font-size: 13px;
    letter-spacing: 0px;
}

.myorder-tab {
    width: 100%;
    display: inline-block;
}

.myorder-tab li,
.ord-view li {
    border-radius: 6px 6px 0 0;
    padding: 10px;
    font-size: 15px 0;
    width: 33%;
    border: 0;
    float: left;
    background: #f5f5f5;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    color: #333;
    border: 0px solid #ddd;
}

.myorder-tab li+li,
.ord-view li+li {
    margin-left: 0.5%;
}

.myorder-tab li.active,
.ord-view li.active {
    background: #5585df;
    color: #fff;
    border: 0px solid #061f5c;
}

.myorder-tab li a,
.ord-view li a {
    color: #000;
    font-size: 15px;
    font-weight: 700;
}

.myorder-tab li.active a,
.ord-view li.active a {
    color: #fff;
}

table.myOrder th:nth-child(1) {
    width: 9%;
}

table.myOrder th:nth-child(2) {
    width: auto;
}

table.myOrder th {
    width: 110px;
}

table.orderTermRead th {
    width: 10%;
}

table.orderTermRead th:nth-child(3) {
    width: auto;
}

table.orderTermRead2 th {
    width: 10%;
}

table.orderTermRead2 th:nth-child(3) {
    width: auto;
}

table.orderTermRead2 th:nth-child(4) {
    width: 15%;
}

.btn-tran.small.s-red {
    min-width: 60px;
    text-align: center;
}

/* 내포인트 */
.pointList th {
    width: 15%;
}

.pointList th:nth-child(1) {
    width: 8%;
}

.pointList th:nth-child(4) {
    width: auto;
}

.board_note {
    font-size: 14px;
}

/* 장바구니/주문결제 */
.cartList th {
    width: 15%;
}

.cartList th:nth-child(1) {
    width: 40px;
}

.cartList th:nth-child(2) {
    width: 80px;
}

.cartList th:nth-child(3) {
    width: auto;
}

.cartList a:link,
.cartList a:visited,
.cartList a:active {
    color: #6b747d;
}

.cartList-btn {
    margin-bottom: 200px;
}

.cartList-btn>button {
    width: 16%;
    height: 42px;
}

.refund_area {
    height: 150px;
    overflow: auto;
    white-space: inherit;
    background: #f5f5f5;
    padding: 20px;
}

.refund_label {
    margin-top: 10px;
    display: block;
}

.selectAdr label {
    display: inline-block;
    margin-right: 50px;
}

.selectAdr label input {
    height: auto;
}

.totalprice {
    width: 100%;
    margin-top: 5px;
}

.totalprice th {
    border-bottom: 1px solid #eaeaea;
    font-weight: bold;
    padding: 10px;
    background: #f7f7f7;
    width: 25%;
    min-width: 120px;
    vertical-align: middle;
    text-align: right;
}

.totalprice td {
    border-bottom: 1px solid #eaeaea;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    line-height: 150%;
}

.carttitle {
    padding: 25px 0 5px;
}

.cart_list_image {
    width: 70px;
}

span.paytitle {
    padding: 0 10px;
}

/* 결제페이지 총 결제금액 영역 */
table.totalprice.payresult th {
    min-width: 200px;
    padding: 18px 25px;
    background: #fafcfd !important;
}

table.totalprice.payresult .paytitle,
table.totalprice.payresult .red {
    font-size: 18px;
}

.pay_mode {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pay_mode .check-con {
    margin-right: 0;
    margin-bottom: 0;
    padding: 12px 20px;
    padding-left: 20px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    transition: all 0.2s;
}

.pay_mode .check-con .marking {
    display: none;
}

.pay_mode .check-con:hover {
    border-color: #0e355f;
    background: #f8f9fa;
}

.pay_mode .check-con:has(input:checked) {
    background: #2ec1c1;
    color: #fff;
    border-color: #4db1a0;
}

.ec-base-help {
    margin: 20px 0;
    border: 1px solid #e7e7e7;
    font-size: 13px;
    line-height: 20px;
}

.ec-base-help h3 {
    padding: 10px 0 9px 15px;
    border-bottom: 1px solid #e7e7e7;
    color: #101010;
    font-size: 15px;
    background: #fbfbfb;
}

.ec-base-help .inner {
    padding: 0 9px 18px;
}

.ec-base-help h4 {
    margin: 22px 0 -5px 10px;
    color: #404040;
    font-size: 15px;
    font-weight: 700;
}

.ec-base-help h4:first-child {
    margin-top: 17px;
}

.ec-base-help ul,
.ec-base-help ol {
    margin: 18px 0 0 10px;
}

.address-find {
    background: #fff;
    color: #666;
    font-size: 13px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn_center.cartPay {
    margin-bottom: 150px;
}

.btn_center.cartPay button {
    max-width: 270px;
}

.orderResult th {
    width: 10%;
}

.orderResult th:nth-child(2) {
    width: auto;
}

.dtable:last-child {
    border-bottom: 0px solid #ddd;
}

.ord-result .dtable:first-child {
    border-bottom: 0px solid #ddd;
    border-top: 1px solid #000000;
}

#address,
#address1 {
    width: 49%;
}



/* 모달공통 */
.couponModal,
.memoModal {
    display: none;
    position: fixed;
    z-index: 99999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.couponContent,
.memoContent {
    position: relative;
    background-color: #fff;
    margin: auto;
    width: 100%;
    max-width: 964px;
    height: 600px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    padding: 30px;
}

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.couponModal-footer,
.modal-footer {
    text-align: center;
}

.memoContent {
    max-width: 370px;
    height: 230px;
    border: 7px solid #ddd;
}

.memoContent .modal-body {
    padding: 30px 0;
}



/* 강사매출 */
.courseStatics td,
.packStatistics td,
.goodsStatistics td,
.bookStatistics td {
    width: 16.66666666666667%;
}

.btn_center.salesMain {
    text-align: right;
}

.cate-tap.salesMain {
    border-bottom: 1px solid #ddd;
}

.sellerCourse th {
    width: 10%;
}

.sellerCourse th:nth-child(3) {
    width: auto;
}

/* 로그인/회원가입 */
h3.tit_center {
    text-align: center;
    font-size: 32px;
}

input.hss {
    width: 70%;
}

.login_top_margin {
    margin-top: 50px;
}

#login_box {
    width: 100%;
    max-width: 900px;
    padding: 20px 10px 30px;
    border-radius: 10px;
    margin: 0px auto 60px auto;
    position: relative;
    background: #ffffff;
    border: 1px solid #ddd;
}

.login_sbox {
    width: 390px;
    margin: 0 auto;
    text-align: center;
}

.login-title {
    color: #337bd5;
    font-size: 34px;
    font-weight: 600;
    margin: 30px auto;
    text-align: center;
    width: auto;
}

.naverlogin {
    width: 100%;
    height: 55px;
    background: url(/files/default-img/ico_naver.png) 13% 50% no-repeat;
    color: #ffffff;
    border-radius: 5px;
    margin: 5px 0;
    background-color: #5ebc4e;
}

.kakaologin {
    width: 100%;
    height: 55px;
    background: url(/files/default-img/ico_kakao.png) 13% 50% no-repeat;
    color: #000000;
    border-radius: 5px;
    margin: 5px 0;
    background-color: #f9e000;
}

.homeLoginBtn {
    width: 100%;
    height: 55px;
    background: url(/files/default-img/ico_de.png) 13% 50% no-repeat;
    color: #ffffff;
    border-radius: 5px;
    margin: 5px 0;
    background-color: #5bbeff;
}

.googlelogin {
    width: 100%;
    height: 55px;
    background: url(/files/default-img/ico_google.png) 13% 50% no-repeat;
    color: #000;
    background-size: auto;
    border-radius: 5px;
    margin: 5px 0;
    background-color: #fff;
    border: 1px solid #ddd;
}

.web_login {
    margin-bottom: 10px;
    width: 100%;
    height: 50px;
    border-radius: 5px;
}

.box_btn>button {
    background: #337bd5;
    width: 100%;
    font-size: 18px;
    height: 50px;
    border-radius: 5px;
}

.box_member {
    width: 100%;
    padding: 0;
    margin-top: 10px;
}

button.joinFind {
    font-size: 14px;
    margin: 0px 0;
    border: 0;
    height: 35px;
    color: #666;
    border-radius: 2px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 10px;
    background: #ffffff;
}

button.joinCode {
    width: 100%;
    color: #787dff;
    text-align: center;
    font-weight: 500;
    font-size: 17px;
    height: 50px;
    margin-left: 0px;
    border: 1px solid #787dff;
}

.loginForm {
    display: table;
    margin: 30px auto;
    width: 100%;
    position: relative;
}

.login_sbox .box_id {
    width: 100%;
}

.login_sbox .box_btn {
    width: 100%;
}

.idpw_box {
    width: 550px;
    margin: 0 auto;
}

.find_form_box {
    padding: 0 15%;
}

.stit_all {
    padding-top: 10px;
    font-size: 20px;
    padding-bottom: 10px;
    font-weight: 600;
}

.find_form .small_txt {
    font-size: 14px;
    line-height: 1.5;
    color: #222222;
    margin-top: 10px;
}

.find_form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.find p {
    margin: 3px 0px;
}

.web_find_info {
    font-size: 13px;
    padding: 6px;
    width: 100%;
    margin-left: 0px;
    height: 45px;
    border-radius: 5px;
}

.form_context {
    margin: 0;
    font-size: 14px;
    padding: 0 15%;
    color: #3f51b5;
    line-height: 1.2;
}

.pw_find .find_form_box .find_form {
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.id_find {
    padding-top: 40px;
    margin-bottom: 30px;
    width: 100%;
}

.pw_find {
    padding-top: 40px;
    margin-bottom: 30px;
    width: 100%;
}

.pbox_con {
    min-height: 430px;
}

.pbox {
    margin: 0 auto;
    padding-top: 5px;
    height: 520px;
    width: 96%;
}

.pbox .provision {
    height: 153px;
    overflow: auto;
    margin-top: 25px;
    font-size: 13px;
    line-height: 1.5;
    background: #ffffff;
    padding: 10px;
    border: 1px solid #dddddd;
}

.pbox p.info_tit {
    color: #000000;
    font-size: 18px;
    margin-bottom: -18px;
    font-weight: 600;
}

p.provision_r {
    padding-top: 0px;
    font-size: 16px;
    width: 100%;
    height: 20px;
    color: #444444;
    font-weight: 400;
    text-align: right;
    margin-top: 10px;
}

.provision_r label {
    font-size: 1.111rem;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: -0.05rem;
    color: var(--black);
}

.joinForm,
.btn_center.joinForm {
    width: 90%;
    margin: 0 auto;
}

.mody-title {
    width: 90%;
    margin: 0 auto;
}

.joinForm .dtable {
    border-bottom: 1px solid #dddddd;
}

.joinForm .dtable .table-th {
    display: table-cell;
    width: 23%;
    padding: 10px 15px;
    height: 30px;
    vertical-align: middle;
    font-weight: 500;
    color: #333;
    border-bottom: 0px solid #d2d2d2;
    background: #ffffff;
}

.joinForm .dtable .table-td {
    display: table-cell;
    min-height: 50px;
    vertical-align: middle;
    padding: 15px;
    line-height: 1.5;
    margin-bottom: 15px;
    border: 0px solid #dddddd;
}

.joinForm .dtable .table-td p {
    vertical-align: middle;
}

.joinForm .dtable .table-td p.mod_text {
    min-height: 50px;
}

.joinNew .dtable {
    border-bottom: 0px solid #dddddd;
}

.joinNew .dtable .table-th {
    background: #ffffff;
    display: table-cell;
    border-top: 1px solid #ddd;
    font-size: 16px;
    padding: 10px 15px;
    height: 40px;
    vertical-align: middle;
    font-weight: 500;
    color: #000000;
    line-height: 1.5;
}

.joinNew .dtable .table-td {
    display: table-cell;
    border-top: 1px solid #ddd;
    font-size: 16px;
    height: 40px;
    vertical-align: middle;
    padding: 10px 15px;
    line-height: 1.5;
}

.form-control_new {
    min-width: 43px;
    height: 40px;
    padding: 0px 10px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    background: #F5F5F5;
    border: 1px solid #eff1f1;
    border-radius: 4px;
}

p.joinNew_txt {}

.info-text {
    width: 90%;
    text-align: left;
    margin: 10px auto;
    font-size: 15px;
    line-height: 150%;
}

#member_join {
    margin: 30px auto;
    width: 100%;
    text-align: center;
}

.member_box {
    font-size: 18px;
    font-weight: 700;
}

.agree-box {
    width: 80%;
    padding: 30px;
    border-radius: 10px;
    position: relative;
    margin: 0px auto 80px;
    border: 1px solid #d2d2d2;
    background: #ffffff;
}

.agree-box h2 {
    margin: 0 auto;
    text-align: center;
    padding: 20px 0px;
}

.agree-box h2 span {
    margin-bottom: 20px;
    color: #333;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3em;
    letter-spacing: -.03em;
}

.dash_cont {
    margin-top: 30px;
    border-top: 1px dashed #dddddd;
    color: #000000;
    text-align: right;
}

.dash_cont label {
    display: block;
    margin: 15px 0 23px;
    font-size: 18px;
}

.box_title {
    font-weight: 500;
    margin-top: 50px;
}

.box_text {
    margin: 0 auto;
    width: 50%;
    font-weight: 300;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    line-height: 150%;
    border-top: 1px solid #d2d2d2;
    border-bottom: 1px solid #d2d2d2;
}

.checkin_box {
    width: 100%;
}

.check-id {
    float: left;
    text-align: left;
    font-size: 15px;
    padding: 15px 0 20px 0;
    color: #666666;
}

.btnwrapper {}


.joinFormH2 {
    font-size: 1.5rem;
    text-align: center;
    margin: 1rem 0;
}

.joinFormSnsBtBox {
    max-width: 400px;
    margin: 0 auto;
}

.joinModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 99999;
}

.joinModal.show {
    opacity: 1;
    visibility: visible;
}

.joinModal-content {
    position: relative;
    width: 800px;
    max-height: 70vh;
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

    overflow: hidden;
    display: flex;
    flex-direction: column;

    opacity: 1;
    transform: translateY(0);

    transition: opacity 0.25s ease, transform 0.25s ease;
}

.joinModal:not(.show) .joinModal-content {
    opacity: 0;
    transform: translateY(20px);
}

.joinModal-body {
    flex: 1;
    margin-top: 12px;
    font-size: 14px;
    color: #555;
    line-height: 1.55;

    overflow-y: auto;
    padding: 2rem;
    border: 1px solid #e1e1e1;
}

.joinModal-body>div {
    display: none;
}

/* X 버튼 */
.joinModal-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: 0.15s;
}

.joinModal-close-x:hover {
    color: #000;
}

.joinModal_view-btn {
    margin-left: 8px;
    background: none;
    border: none;
    color: #4a6eff;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.95em;
}

.joinModal_view-btn:hover {
    color: #1a4dd5;
}

@media (max-width: 480px) {
    .joinModal-content {
        padding: 1rem;
        width: 90%;
        max-height: 90vh;
    }

    .joinModal-body {
        padding: 1rem;
    }
}

.joinFormAgree>p {
    margin: 0.25rem 0;
}


.wrapper {
    float: right;
    padding: 17px 0 20px 0;
}

.wrapper ul {
    max-width: 200px;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.wrapper ul li:nth-of-type(1) {
    padding-right: 6px;
    position: relative;
}

.wrapper ul li:nth-of-type(1):after {
    position: absolute;
    content: '';
    width: 1px;
    height: 13px;
    background-color: #666;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.wrapper ul li a {
    font-size: 13px;
    padding-left: 6px;
    display: block;
    color: #666;
    transition: all .15s linear;
}

.wrapper ul li a:hover {
    text-decoration: underline;
}

.address-find {
    background: #ffffff;
    color: var(--main);
    font-size: 16px;
    height: 42px;
    width: 150px;
    border: 1px solid var(--main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

.sms_auth_number {
    background: #ffffff;
    font-size: 16px;
    height: 42px;
    width: 150px;
    border: 1px solid #0082ca;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

span.tpoint {
    color: #0082ca;
}

.sns_login>button {
    position: relative;
}

.ic_lastLogin {
    position: absolute;
    bottom: 20px;
    right: -5px;
    background: #ff3b30;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    transform: translateY(100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.ic_lastLogin::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 31px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #ff3b30;
    z-index: 101;
}

/********** ## Step List **********/
.member_process {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 0 30px;
}

.member_process dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.member_process dl::after {
    content: '\e5e1';
    font-size: 20px;
    color: var(--black);
    font-family: var(--icon);
    opacity: 0.3;
    margin: 0 30px;
}

.member_process dl:last-of-type::after {
    display: none;
}

.member_process dl dt {
    position: relative;
    width: 60px;
    height: 60px;
    background: var(--basic);
    border-radius: 100%;
    opacity: 0.5;
}

.member_process dl dt::after {
    content: '';
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 100%;
    border: 1px dashed var(--white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.member_process dl dt span {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.member_process dl dt span::before {
    content: '';
    font-size: 28px;
    color: var(--white);
    font-family: var(--icon);
}

.member_process dl.st01 dt span::before {
    content: '\e78a';
}

.member_process dl.st02 dt span::before {
    content: '\f4ca';
}

.member_process dl.st03 dt span::before {
    content: '\f604';
}

.member_process dl.st04 dt span::before {
    content: '\e877';
}

.member_process.cart_ver dl.st01 dt span::before {
    content: '\e8cc';
}

.member_process.cart_ver dl.st02 dt span::before {
    content: '\eff1';
}

.member_process dl dd {
    padding-left: 12px;
    opacity: 0.5;
}

.member_process dl dd span {
    font-size: 0.777rem;
    font-weight: 700;
    line-height: 142.857%;
    display: block;
    color: var(--black);
}

.member_process dl dd p {
    font-weight: 500;
    letter-spacing: -0.72px;
    color: var(--black);
}

.member_process dl.on dt {
    opacity: 1;
    background: var(--main);
}

.member_process dl.on dd {
    opacity: 1;
}

/********** ## Step List **********/




/* 통합검색 */
.top_search {
    display: inline-block;
}

.top_search .search_word {
    background: #eee;
    border: 1px solid #eee;
    width: 322px;
    height: 45px;
    padding: 5px;
    float: left;
}

.top_search .search_btn {
    height: 45px;
    background: #000 url(/files/default-img/search-white.svg) no-repeat center;
    padding: 0;
    width: 45px;
    background-size: 25px;
    float: left;
    border-radius: 0;
    position: relative;
    top: 1px;
}

.searchCourse,
.searchBook {
    border-top: 1px solid #000;
    border-bottom: 1px dotted #ccc;
    padding: 10px 0;
    margin-top: 50px;
}

.searchCourse h1 span,
.searchBook h1 span {
    color: #ff9900;
    letter-spacing: 1px;
}

.book_con {
    margin-top: 50px;
}

.searchBoard {
    width: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px dotted #ccc;
    padding: 10px;
    margin-top: 50px;
    margin-bottom: 70px;
    clear: both;
    display: inline-block;
}

.tword-box {
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    position: relative;
}

.tword-box .searchBar {
    width: 100%;
    height: 50px;
    border: 2px solid #000000;
}

.tword-box .btn-tword {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    background: #000000 url(/files/default-img/search-white.svg) no-repeat center;
    border: 2px solid #000000;
    cursor: pointer;
}

.search-con-ico {
    text-align: center;
}

.search-con-ico p {
    font-size: 24px;
    margin: 20px;
    letter-spacing: -1px;
}


/* 2차메뉴 */
/* .submenu_list {text-align:center;  margin-top:30px;margin-bottom:90px; height: 48px;}
.submenu_list a {background:#ffffff; height: 48px; line-height: 48px; font-size: 16px; color: #000000; font-weight: 400; width: 16.73%; display: inline-block; text-align: center; border: 1px solid #ddd; margin-left: -1px;}
.submenu_list a.focus  { font-weight: 500;color: #06158d;   height: 49px;  margin-right:-1px; border-radius:3px; border-top:2px solid #06158d; letter-spacing:-1px; }
.submenu_list a.hover { font-weight: 500;color: #06158d;   height: 49px;  margin-right:-1px; border-radius:3px; border-top:2px solid #06158d; letter-spacing:-1px; } */
.n5 {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.n5 .submenu_list {
    background-color: #e9f6ff;
    border-radius: 6px;
    display: inline-block;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 40px;
    height: 46px;
    margin-bottom: 40px;
}

.n5 .submenu_list a {
    border-radius: 6px;
    background-color: #e9f6ff;
    float: left;
    height: 46px;
    display: block;
    text-align: center;
    height: 100%;
    padding: 16px;
    line-height: 1;
    box-sizing: border-box;
    font-size: 16px;
    color: #046ab4;
    letter-spacing: -0.02em;
}

.n5 .submenu_list a:hover {
    color: #2493e5;
    font-weight: 600;
    position: relative;
    border-radius: 2px;
}

.n5 .submenu_list a.focus {
    background: #2997ed;
    ;
    color: #fff;
    position: relative;
    border-radius: 6px;
}

/* 2차메뉴 */
.n4 {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
}

.n4 .submenu_list {
    background-color: #e9f6ff;
    border-radius: 6px;
    display: inline-block;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
    height: 46px;
    margin-bottom: 40px;
}

.n4 .submenu_list a {
    border-radius: 6px;
    background-color: #e9f6ff;
    float: left;
    height: 46px;
    display: block;
    text-align: center;
    height: 100%;
    padding: 16px;
    line-height: 1;
    box-sizing: border-box;
    font-size: 16px;
    color: #046ab4;
    letter-spacing: -0.02em;
}

.n4 .submenu_list a:hover {
    color: #2493e5;
    font-weight: 600;
    position: relative;
    border-radius: 2px;
}

.n4 .submenu_list a.focus {
    background: #2997ed;
    ;
    color: #fff;
    position: relative;
    border-radius: 6px;
}


.depth2_list {
    margin: 0 auto;
    margin-bottom: 20px;
    padding-top: 0px;
    width: 600px;
    border-bottom: 1px solid #dadada;
    height: 42px;
}

.depth2_list a {
    color: #666666;
    font-weight: normal;
    height: 48px;
}

.btn-depth2 {
    margin: 0px;
    background: #FFF;
    border: none;
    padding: 5px 120px;
    width: 300px;
    padding-top: 17px;
    font-size: 18px;
    height: 65px;
}

.btn-depth2:hover {
    border-bottom: 3px solid #21639b;
    padding: 15px 120px;
    background-color: #ffffff;
    font-size: 18px;
    color: #21639b;
    outline: none;
    font-weight: bold;
}

.btn-depth2.focus {
    border-bottom: 3px solid #21639b;
    padding: 15px 120px;
    background-color: #ffffff;
    font-size: 18px;
    color: #21639b;
    outline: none;
    font-weight: bold;
}

/* 3차메뉴 */
.depth3_list {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 30px;
    height: 42px;
}

.depth3_list a {
    border-bottom: 1px solid #e9f6ff;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    width: 16.6%;
    display: inline-block;
    text-align: center;
    margin-right: -1px;
}

.depth3_list a:hover {
    font-weight: 600;
    color: #6b84ff;
    height: 42px;
    margin-right: -1px;
}

.depth3_list a.focus {
    border-bottom: 2px solid #6b84ff;
    font-weight: 500;
    height: 42px;
    margin: 0.5%;
    color: #787dff;
}

/* 3차메뉴 */
.n7 .depth3_list {
    text-align: left;
    margin-top: 0px;
    margin-bottom: 10px;
    height: auto;
    border-left: 1px solid #ddd;
}

.n7 .depth3_list a {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    letter-spacing: -1px;
    color: #000000;
    font-weight: 500;
    width: 25%;
    display: inline-block;
    text-align: center;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #dddddd;
    margin-top: -1px;
}

.n7 .depth3_list a:hover {
    font-weight: 500;
    color: #2196F3;
    height: 48px;
    margin-right: -1px;
    border-radius: 0px;
}

.n7 .btn-depth3.focus {
    font-weight: 500;
    color: #2196F3;
    height: 48px;
    margin-right: -1px;
    border-radius: 0px;
    border: 1px solid #2b87cb;
    border-right: 1px solid #2196F3;
    border-bottom: 1px solid #2196F3;
}



/* 모바일메뉴 */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 99999999;
    top: 0;
    right: -1px;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.2s;
    padding-top: 40px;
    border-left: 1px solid #ffffff;
}

.sidenav a {
    padding: 8px 0 8px 20px;
    text-decoration: none;
    font-size: 21px;
    color: #222222;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: var(--main);
    font-weight: 700;
}

.sidenav>button {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 0px;
    text-align: left;
    padding: 0 20px;
    border-bottom: 1px solid var(--main);
    font-weight: 600;
    border-radius: 0px;
    color: #333;
    font-size: 21px;
    height: 60px;
    transition: all 0.4s ease;
    background: url(/files/default-img/icon_plus.png) no-repeat 95%;
    background-size: 15px 15px;
}

.sidenav>button:hover {
    color: var(--main);
    background: url(/files/default-img/icon_minus.png) no-repeat 95%;
    background-size: 15px 15px;
    transition: all 0.4s ease;
}

.sidenav>button img {
    width: 15px;
    height: 15px;
}

.sidenav .closebtn {
    position: absolute;
    top: 0px;
    right: 25px;
}

.sidenav .closebtn>img {}

.m_search {
    display: none;
    position: absolute;
    top: 20px;
    width: 90%;
}

.menu-icon {
    font-size: 23px;
    cursor: pointer;
    padding: 5px;
    top: 14px;
    position: absolute;
    right: 10px;
}

.menu-icon img {
    width: 32px;
    height: 32px;
}

.dropdown-btn>img {
    position: absolute;
    right: 5px;
}

.dropdown-container {
    display: none;
    width: 90%;
    margin-left: 5%;
    background-color: #f2f2f2;
    padding: 8px;
    transition: 0.2s;
    border-bottom: 2px solid var(--main);
}

.dropdown-centainer a {
    padding: 8px 0 8px 20px;
    text-decoration: none;
    font-size: 17px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.dropdown-centainer a::before {
    display: inline-block;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #222222;
    margin-bottom: 5px;
    margin-right: 6px;
}

.dropdown-centainer a:hover {
    color: #265bd6;
    font-weight: 700;
}

.m-login {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ffffff;
    margin-bottom: 0;
    margin: 20px 10px 20px;
    padding-bottom: 10px;
}

.m-login>button {
    width: 47%;
    border: 0;
    border-radius: 25px;
    font-size: 15px;
    background: var(--main);
    height: 40px;
    color: #ffffff;
    margin: 2%;
}

.m-login>button img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: top;
}

.m-login>div {
    height: 40px;
    padding: 10px;
    color: #222;
    width: 100%;
}

.sidenav .search_word {
    margin-left: 0;
    width: auto;
    min-width: 0;
    float: none;
    border: 1px solid var(--main);
    height: 42px;
    box-sizing: border-box;
    border-radius: 0;
}

.sidenav .search_btn {
    width: 46px;
    height: 42px;
    margin-left: 0;
    margin-top: 0;
    background: var(--main);
    border: 1px solid var(--main);
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#mobile_search,
#chk_mobile {
    margin-bottom: 8px;
    padding: 0 10px;
    display: flex;
    align-items: stretch;
}

.sidenav #chk_mobile .search_word,
.sidenav #mobile_search .search_word {
    flex: 1 1 auto;
}

.sidenav #chk_mobile .search_btn,
.sidenav #mobile_search .search_btn {
    flex: 0 0 46px;
    position: static;
    padding: 8px;
    box-sizing: border-box;
}

.m-menu {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
}




/* gnb */
#gnb_area {
    height: 55px;
    background: #fff;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.gnbDiv {
    height: 54px;
    overflow: hidden;
    z-index: 9999;
}

.gnbDiv .gnbWrap .gnb {
    height: 54px;
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
    z-index: 9999;
}

.gnbDiv .gnbWrap .gnb ul {
    overflow: hidden;
    width: 100%;
}

.gnbDiv .gnbWrap .gnb ul li {
    float: left;
    width: 14.2%;
    text-align: center;
}

.gnbDiv .gnbWrap .gnb ul li:nth-child(2) {
    width: 13.1%;
}

.gnbDiv .gnbWrap .gnb ul li:nth-child(3) {
    width: 15%;
}

.gnbDiv .gnbWrap .gnb ul li:nth-child(4) {
    width: 14.5%;
}

.gnbDiv .gnbWrap .gnb ul li a.oneDep {
    display: block;
    position: relative;
    height: 55px;
    line-height: 55px;
    color: #333;
    font-size: 19px;
    letter-spacing: -0.6pt;
    font-weight: 500;
    white-space: nowrap;
}

/* 호버/활성 시 1depth - 초록 굵게 */
.gnbDiv .gnbWrap .gnb ul li.on a.oneDep,
.gnbDiv .gnbWrap .gnb ul li:hover a.oneDep {
    color: #40823a;
    font-weight: 500;
}

/* 컬럼 전체 너비 하단 라인 */
.gnbDiv .gnbWrap .gnb ul li a.oneDep:after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #176d40;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: width 0.3s ease;
}

.gnbDiv .gnbWrap .gnb ul li:hover .oneDep:after {
    width: 100%;
}

/* 서브메뉴 전체 패널 */
.gnbDiv .gnbWrap .twoDep {
    width: 100%;
    display: block;
    position: relative;
    visibility: visible;
    background: #fff;
    z-index: 9;
    margin: 0;
    padding: 0;
}

/* 서브 아이템 */
.gnbDiv .gnbWrap li .twoDep a {
    display: table;
    margin: 0 auto;
    position: relative;
    color: #4b4b4b;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    padding: 9px 4px;
    letter-spacing: -0.5px;
}

.gnbDiv .gnbWrap li .twoDep a:hover {
    color: #40823a;
    font-weight: 500;
}

.gnbDiv .gnbWrap li.on .twoDep {
    background: #fbfbfb;
    padding-bottom: 300px;
    margin-bottom: -300px;
}

.gnbDiv .gnbWrap li.on .twoDep a.off:after{
    border-bottom:1px solid #ddd;
    display: inline;
}


.disB {
    display: block;
}

/* 기타 */
.popup-layer4 {
    cursor: move;
}

.pop-container {
    position: relative;
}

.popup-layer4 .btn-r {
    position: absolute;
    bottom: -30px;
}

.popclose {
    z-index: 99;
    position: fixed;
    width: 100%;
    bottom: 0pt;
    text-align: right;
    color: #333;
    font-size: 11px;
    padding: 5px;
}

.popclose img {
    position: relative;
    padding-right: 5px;
}

.popclose a {
    display: inline-block;
    height: 20px;
    padding: 0 8px;
    background-color: #000;
    font-size: 11px;
    color: #fff;
    border-radius: 2px;
    line-height: 20px;
    text-decoration: none;
}

#elpt_banner .banner .btn_close {
    position: absolute;
    right: 41px;
    bottom: 31px;
}

#elpt_banner .banner .btn_close label {
    font-size: 11px;
    color: #fff;
    position: relative;
    top: -3px;
}

#elpt_banner .banner .btn_close img {
    margin: -5px 0 0 -20px;
}

#elpt_banner .banner .btn_close button {
    margin: 0;
    margin-left: 20px;
    padding: 0;
    background: none;
    border: 0;
}

a.cbtn {
    display: inline-block;
    height: 20px;
    padding: 0 8px;
    background-color: #000;
    font-size: 11px;
    color: #fff;
    border-radius: 2px;
    line-height: 20px;
}

.top-logo {
    display: inline-block;
}

.bx-wrapper {
    margin: 0 auto;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    background: none;
}

.bx-wrapper .bx-controls-direction a {
    z-index: 999;
}

.disB {
    display: block;
}

.dropbnt {
    height: 32px;
}

.radio-st {
    vertical-align: -3px;
    width: 15px;
    height: 15px;
}


/* 모의시험 */
#exam-container {
    width: 100%;
    position: relative;
    height: 100%;
}

#exam-radio_container .section_full {
    background: #f5f5f5;
}

button.exam_btn {
    width: 90px;
}

.myExam .table_board_for tr td:first-child {
    text-align: left;
}

.section.exampage {
    padding: 10px;
}

.examHeader {}

.examHeader div {
    height: auto;
}

.examHeader .left {
    width: 100%;
    background: var(--main);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    text-align: center;
}

.examHeader .left h2 {
    font-size: 24px;
    padding: 10px 30px;
    color: #ffffff;
    font-weight: 700;
    display: inline-block;
}

.examHeader .arrow_header {
    width: 107px;
}

.infoBox {
    height: auto;
    margin-bottom: 10px;
}

.infoBox .inlineblock {
    margin-top: 0px;
    background: #fff;
}

.infoBox.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.infoBox.sticky ul {
    background: #fff;
}

.infoBox ul li {
    float: left;
    width: 25%;
    border-left: 1px solid #bcbcbc;
    border-bottom: 1px solid #bcbcbc;
}

.infoBox ul li:nth-child(1) {
    width: 20%;
}

.infoBox ul li:nth-child(2) {
    width: 20%;
}

.infoBox ul li:nth-child(3) {
    width: 35%;
}

.infoBox ul li:last-child {
    border-right: 1px solid #bcbcbc;
    width: 25%;
}

.infoBox ul li div,
.cardTop div {
    float: left;
    font-size: 14px;
}

.infoBox ul li .left,
.cardTop .left {
    height: 39px;
    font-weight: 600;
    color: #000000;
    padding: 0 10px;
    line-height: 39px;
    border-right: 1px solid #bcbcbc;
}

.infoBox ul li .right,
.cardTop .right {
    height: 39px;
    font-weight: 600;
    line-height: 39px;
    text-align: center;
    padding: 0 12px;
}

.right.res_time {
    color: #ff0000;
}

.examBody {
    padding: 30px 0;
    width: 76%;
    border-radius: 15px;
    background: #ffffff;
}

.examBox {
    margin-bottom: 40px;
}

.examBox:last-child {
    margin-bottom: 0;
}

h1.examTitle {
    margin-bottom: 30px;
    font-size: 18px;
    position: relative;
    line-height: 1.5;
    display: table;
}

h1.examTitle img.exam-o,
h1.examTitle img.exam-x {
    position: absolute;
    top: -8px;
    left: -8px;
}

h1.examTitle span {
    font-size: 28px;
    color: var(--main);
    display: inline-block;
    margin-right: 10px;
    width: 48px;
    padding-left: 20px;
}

h1.examTitle span,
h1.examTitle p {
    display: table-cell;
    vertical-align: top;
}

h1.examTitle p {
    position: relative;
    top: 8px;
}

.examList td {
    text-align: center;
}

.examList td:nth-child(1) {
    width: auto;
}

.examList td:nth-child(2) {
    width: 100px;
}

.examList td:nth-child(3) {
    width: 100px;
}

.examList td:nth-child(4) {
    width: 100px;
}

.examList td:nth-child(5) {
    width: 160px;
}

.examResBox {
    text-align: center;
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 15px;
    margin: 20px 0;
    background: #ffffff;
}

.examResBox .tt {
    font-size: 2rem;
    font-weight: bold;
    color: #000;
}

.examResBox .con {
    color: #000;
    padding: 1rem;
}

.examResBox .examConfirm {
    height: 50px;
    margin-top: 10px;
    width: 200px;
    border-radius: 10px;
    background: var(--main);
}

.examResBox .examConfirm_close {
    width: 100px;
    background: #ccc;
}


.assignmentWrap .assignmentHead {
    background: var(--main);
    color: #fff;
    padding: 1.5rem;
}

.assignmentWrap .assignmentBody {
    padding: 1.5rem;
}

.assignmentWrap .assignmentBody .assignmentCon {
    background: #fff;
    padding: 1.5rem;
    border-radius: 15px;
    margin-top: 1.5rem;
}

.assignmentWrap .assignmentBody .assignmentForm {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed #ccc;
}

.mchoice {
    padding: 0 30px;
}

.mchoice li {
    margin: 10px 0;
    position: relative;
}

.mchoice li img.examCheck {
    position: absolute;
    top: -9px;
    left: -4px;
}

.mchoice li a {
    font-size: 15px;
}

.mchoice li a span {
    display: inline-block;
    margin-right: 10px;
}

.reference {
    padding: 10px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    margin: 0 auto 30px;
    width: 95%;
}

.reference p {
    padding: 10px;
    font-size: 15px;
    line-height: 1.8;
    width: 100%;
    word-break: keep-all;
}

.schoice {
    padding: 0 30px;
}

.schoice .answer {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    outline: none;
    font-size: 13px;
    color: #0056c5;
    height: 36px;
    line-height: 1.5;
    overflow: hidden;
}

.examFooter {
    margin-top: 50px;
    padding: 30px 0;
    border-top: 1px solid #000;
    text-align: center;
}

.examFooter button.examConfirm {
    border: 1px solid #000;
    padding: 20px;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    background: #fff;
    width: 100%;
    max-width: 400px;
    height: auto;
}

.omrcard {
    width: 230px;
    display: inline-block;
    position: absolute;
    top: 117px;
    right: 10px;
}

.cardTop {
    width: 230px;
    display: inline-block;
    border: 1px solid var(--main);
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 8px;
}

.cardTop .right {
    width: 130px;
}

.omrsticky {
    position: fixed;
    top: 0;
    width: 230px;
    left: 50%;
    margin-left: 300px;
}

.sticky+.content {
    padding-top: 60px;
}

h1.audioSticky {
    position: fixed;
    top: 0;
    left: 10px;
    background: #fff;
    width: auto;
    padding: 0px;
    z-index: 999;
    border-radius: 0 0 30px 30px;
}

table.checking {
    width: 230px;
}

table.checking th {
    width: 50px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    background: #f7f7f7;
}

table.checking th,
table.checking td {
    border-top: 1px solid #ececec;
}

table.checking td {
    padding: 10px;
    min-height: 55px;
    background: #ffffff;
}

ul.ckpoint {
    width: 100%;
    display: inline-block;
}

ul.ckpoint li {
    float: left;
    width: 20%;
    text-align: center;
    background: url(/files/default-img/ck_off.png) no-repeat center;
    height: 31px;
    line-height: 31px;
    font-size: 11px;
    color: #b7b7b7;
}

ul.ckpoint li.on {
    background: url(/files/default-img/ck_on.png) no-repeat center;
    color: #ff9900;
}

table.checking td .answer {
    width: 100%;
    border: 0;
    background: #f7f7f7;
    padding: 5px;
    margin: 0;
    height: 45px;
}

.check-box {
    height: 100%;
    max-height: 720px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ddd;
}

.radio_container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 1.6;
    word-break: keep-all;
}

.radio_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.exam_checkmark {
    position: absolute;
    top: -5px;
    left: 0;
    font-size: 22px;
    font-weight: 300;
    color: #000000;
}

.exam_checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.radio_container input:checked~.exam_checkmark:after {
    display: block;
}

.radio_container .exam_checkmark:after {
    top: -9px;
    left: -4px;
    width: 24px;
    height: 29px;
    background: url(/files/default-img/examCheck.png) no-repeat center top;
}

.radio_container .exam_checkmark.on {
    width: 24px;
    height: 29px;
    background: url(/files/default-img/examCheck.png) no-repeat center -9px;
}

.radio_container.chk_right {
    margin: 0;
    padding: 0;
}

.answer_box,
.answer,
.exam_comment {
    padding: 10px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    margin: 0 auto 10px;
    width: 95%;
    line-height: 1.5;
}

.answer p,
.answer_box p,
.adm-comm {
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}

.answer {
    background: #fff2f2;
}

.answer_box {
    background: #f1faff
}

.exam_comment {
    background: #fffbe5;
}

.commentary {
    background: #fff3e9;
}

ul.lecture-block li .btn-area.pause {
    height: 100px;
    display: inline-block;
}

#textBox {
    font-size: 15px;
}

#examMsg a {
    width: 50px;
    height: 24px;
    line-height: 24px;
    background: #000;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
}

#examWrap #wallWrap {
    position: fixed;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 999;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

#examWrap #examMsg {
    position: fixed;
    top: 300px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    height: 180px;
    width: 400px;
    padding: 35px;
    border: 1px solid #8c90ae;
    background: #eee;
    border-radius: 5px;
    color: #000000;
    text-align: center;
    z-index: 9999;
}

#textBox {
    vertical-align: middle;
    padding-top: 20px;
}

#examWrap #examMsg #textBox .msg_red {
    color: #bb0c20;
    padding-bottom: 20px;
}

.btn_ok {
    margin-top: 20px;
    width: 70px;
    height: 26px;
}

.mchoice img {
    width: auto;
    max-width: 100%;
}

/* poll */
.pollList {
    margin: 30px auto;
    width: 100%;
    max-width: 500px;
    border: 1px solid #ddd;
}

.pollList h2 {
    font-size: 18px;
    padding: 10px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.plistCon {
    padding: 15px;
}

.pollBox {
    padding: 10px;
}

.pollBtn {
    padding: 20px;
    text-align: center;
    border-top: 1px solid #ddd;
}

.pollBtn .poll {
    background: #ff0000;
}

.pollBtn .result {
    background: #000;
}

.plistCon.polhead {
    font-size: 14px;
    font-weight: bold;
}

.pollItemHead {
    padding: 10px;
    font-size: 13px;
    color: #333;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    background: #fcfcfc;
}

.etctext {
    border: 0;
    border-bottom: 1px solid #ddd;
    top: 0;
    outline: none;
    margin-left: 5px;
    padding: 0;
}


/* radio button */
.radcontainer {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radcheckmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #eee;
    border-radius: 50%;
}

.radcontainer:hover input~.radcheckmark {
    background-color: #ccc;
}

.radcontainer input:checked~.radcheckmark {
    background-color: #2196F3;
}

.radcheckmark:after {
    content: "";
    position: absolute;
    display: none;
}

.radcontainer input:checked~.radcheckmark:after {
    display: block;
}

.radcontainer .radcheckmark:after {
    top: 5px;
    left: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

/* poll Result */
.pollCon {
    margin: 30px auto;
    width: 100%;
    max-width: 600px;
}

.pollView {
    border: 1px solid #ddd;
    padding: 20px;
}

.pollView+.pollView {
    margin-top: 30px;
}

.pollView h2 {
    margin-bottom: 20px;
}

.total-poll {
    text-align: right;
    color: #ff0000;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
}

.q-list ul {
    display: table;
    width: 100%;
}

.q-list ul li {
    display: table-cell;
    font-size: 14px;
}

.q-list ul li:last-child {
    width: 80px;
    text-align: right;
}

.per-gr {
    width: 100%;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 5px;
    height: 26px;
    position: relative;
    margin: 10px 0 30px;
}

.per-gr .on {
    height: 100%;
    width: 0%;
    color: #fff;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    background: #2196f3;
    border-radius: 5px 0 0 5px;
}

/* 모의고사 */
.exam-page {
    display: inline-block;
    width: 100%;
}

.exam_box {
    width: 21.8%;
    float: left;
    position: relative;
    border: 1px solid #ddd;
    margin: 0 1.6% 20px;
}

.exam_img img {
    width: 100%;
}

.examTxt {
    padding: 10px;
}

.examTxt h1 {
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
}

.examTxt p {
    padding: 5px 0;
    line-height: 2;
}

/* 과제제출 */
.assignmentWrap .assignmentHead {
    background: var(--main);
    color: #fff;
    padding: 1rem;
}

.assignmentWrap .assignmentBody {
    padding: 1.5rem;
}

.assignmentWrap .assignmentBody .assignmentCon {
    background: #fff;
    padding: 1.5rem;
    border-radius: 15px;
    margin-top: 1.5rem;
}

.assignmentWrap .assignmentBody .assignmentForm {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed #ccc;
}

.assignmentWrap .examBottom {
    text-align: center;
    margin-top: 10px;
}

.assignmentWrap .examBottom button.examConfirm_close {
    background: var(--main);
    border-radius: 5px;
}

p.ass_body {
    color: #444444;
    font-weight: 500;
}

span.asshead_tit {
    color: #ffffff;
    font-size: 19px;
    font-weight: 600;
}

span.asshead_tit::before {
    display: inline-block;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ffffff;
    margin-bottom: 5px;
    margin-right: 5px;
    left: 12px;
}

span.asshead_date {
    float: right;
    text-align: right;
}

.assignmentbtn {
    background: var(--main);
    color: #fff;
}

p.assignment_txt {
    color: #666666;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

span.ass_tit {
    color: #000000;
    font-size: 17px;
    font-weight: 600;
}

span.ass_tit::before {
    display: inline-block;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--main);
    margin-bottom: 5px;
    margin-right: 5px;
    left: 12px;
}

/* 스케쥴보드 */
.scheduleCon {}

.scheduleCon .month {
    text-align: center;
    width: 100%;
    max-width: 300px;
    position: relative;
    margin: 0 auto 30px;
}

.scheduleCon .month h3 {
    font-weight: 700;
}

.scheduleCon .month a {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 50%;
    margin-top: -15px;
}

.scheduleCon .month a.leftBtn {
    background: url(/files/default-img/chevron-left.svg) no-repeat center;
    left: 0;
}

.scheduleCon .month a.rightBtn {
    background: url(/files/default-img/chevron-right.svg) no-repeat center;
    right: 0;
}

.calenBody {
    border: 1px solid #ddd;
}

.calenBody .weekLine {
    display: table;
    width: 100%;
    border-top: 2px solid #000;
    background: #f9f9f9;
    letter-spacing: -0.5px;
}

.calenBody .weekLine li {
    display: table-cell;
    width: 14.28571428571429%;
    vertical-align: top;
    height: 122px;
}

.calenBody .weekLine li+li {
    border-left: 1px solid #ddd;
}

.calenBody .weekLine li h1 {
    padding: 8px 0;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.calenBody .weekLine li h1.sunday {
    color: #ff0000;
}

.calenBody .weekLine li h1.saturday {
    color: #0027ff;
}

.calenBody .weekLine li .scheBox {
    background: #fff;
    font-size: 13px;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.calenBody .weekLine li .scheBox .time {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    display: inline-block;
}

.calenBody .weekLine li .scheBox p {
    color: #666;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    height: 42px;
    word-break: break-all;
}

.calenBody .weekLine li .scheBox span {
    height: 15px;
    color: #fff;
    font-weight: 500;
    font-size: 11px;
    display: inline-block;
    text-align: center;
    line-height: 16px;
    border-radius: 3px;
    padding: 0 6px;
    white-space: nowrap;
    margin-left: 5px;
    position: relative;
    top: -1px;
}

.calenBody .weekLine li .scheBox .live {
    background: #ff0000;
}

.calenBody .weekLine li .scheBox .offline {
    background: #717fea;
}

.calenBody .weekLine li .scheBox .cate001 {
    background: #ff0000;
}

.calenBody .weekLine li .scheBox .cate002 {
    background: #717fea;
}

.calenBody .weekLine li .scheBox .cate003 {
    background: #ff5722;
}

.calenBody .weekLine li .scheBox .cate004 {
    background: #00bcd4;
}

.calenBody .weekLine li .scheBox .cate005 {
    background: #4caf50;
}

.calenBody .weekLine li .scheBox .cate006 {
    background: #2196f3;
}

.calenBody .weekLine li .scheBox .cate007 {
    background: #ffc107;
}

.calenBody .weekLine li .scheBox .cate008 {
    background: #009688;
}

.calenBody .weekLine li .scheBox .cate009 {
    background: #f44336;
}

/* 메인게시판 */
.mblist .btext ul li {
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    width: 100%;
    overflow: hidden;
    position: relative;
    letter-spacing: -0.5px;
    padding-right: 100px;
    /* margin: 2px 0; */
}


.mblist .btext span.date {
    position: absolute;
    right: 0;
}

/* 메인갤러리 */
.mbgallery .bboard {
    display: inline-block;
    width: 100%;
}

.mbgallery .btext {
    float: left;
    width: 23%;
    max-width: 280px;
    margin: 15px 0;
}

.mbgallery .btext+.btext {
    margin-left: 2.2%;
}

.mbgallery .btext li:first-child {
    position: relative;
    height: 0;
    padding-bottom: 70%;
    overflow: hidden;
}

.mbgallery .btext li:first-child img {
    position: absolute;
    top: 0;
    width: 100%;
}

.mbgallery .btext li:last-child {
    margin-top: 15px;
    font-size: 17px;
    color: #333;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    width: 100%;
    height: 50px;
}

.mbgallery .btext:nth-child(5) {
    margin-left: 0;
}

/* 메인뉴스 */
.mbnews .bboard {
    display: inline-block;
    width: 100%;
}

.mbnews .btext {
    float: left;
    width: 49%;
    margin: 10px 0;
}

.mbnews .btext:nth-child(even) {
    margin-left: 2%;
}

.mbnews .btext ul {
    width: 100%;
    padding-left: 24%;
    position: relative;
    height: 100px;
    overflow: hidden;
}

.mbnews .btext ul li:first-child {
    width: 22%;
    position: absolute;
    top: 0;
    left: 0;
}

.mbnews .btext ul li:first-child img {
    width: 100%;
}

.mbnews .btext ul li:nth-child(2) a {
    font-size: 17px;
    color: #333;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    width: 100%;
    height: 30px;
}

.mbnews .btext ul li.contents {
    font-size: 15px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    height: 45px;
}

/* 메인매거진 */
.mbmagazie .btext {
    padding: 20px 10px 25px;
}

.mbmagazie .btext+.btext {
    border-top: 1px solid #ddd;
}

.mbmagazie .btext li:first-child {
    font-size: 17px;
    color: #333;
    font-weight: 400;
}

.mbmagazie .btext li.contents {
    margin: 10px 0;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    width: 100%;
    height: 47px;
}

/* 별점 */
.starImg {
    position: relative;
    display: inline-block;
    width: 80px;
    padding: 0;
}

.starImg span {
    display: inline-block;
    width: 100%;
    height: 15px;
    background: url(/files/default-img/star.png) no-repeat top left;
    background-size: 80px;
    position: absolute;
    left: 0;
    top: 0;
}

.starImg span.on {
    z-index: 1;
    background: url(/files/default-img/star.png) no-repeat bottom left;
    overflow: hidden;
    background-size: 80px;
}

.starBox {
    display: none;
    text-align: left;
    font-weight: bold;
    color: #000;
    height: 15px;
    position: relative;
}

.starBox div {
    float: left;
}

.starBox .starImg {
    height: 15px;
}

.starBox .starImg button {
    width: 10%;
    height: 15px;
    padding: 0;
    background: none;
    position: absolute;
    z-index: 2;
}

.starBox .starImg button.one {
    left: 0;
}

.starBox .starImg button.two {
    left: 10%;
}

.starBox .starImg button.three {
    left: 20%;
}

.starBox .starImg button.four {
    left: 30%;
}

.starBox .starImg button.five {
    left: 40%;
}

.starBox .starImg button.six {
    left: 50%;
}

.starBox .starImg button.seven {
    left: 60%;
}

.starBox .starImg button.eight {
    left: 70%;
}

.starBox .starImg button.nine {
    left: 80%;
}

.starBox .starImg button.ten {
    left: 90%;
}

.contable .section-box .ul-1>li.starpnt {
    width: 100px;
}

.starWrap div {
    float: left;
}

.starWrap .starImg {
    height: 15px;
}

.starWrap .starImg button {
    width: 20%;
    height: 15px;
    padding: 0;
    background: none;
    position: absolute;
    z-index: 2;
}

.starWrap .starImg button.one {
    left: 0;
}

.starWrap .starImg button.two {
    left: 20%;
}

.starWrap .starImg button.three {
    left: 40%;
}

.starWrap .starImg button.four {
    left: 60%;
}

.starWrap .starImg button.five {
    left: 80%;
}

.markView {
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: -1px;
    font-size: 12px;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 5px;
    margin: 5px;
}

.btnRight {
    text-align: right;
}

.zoomWrap {
    margin-top: 10px;
}


/* 관련과정 */
.relation {
    width: 100%;
    display: inline-block;
    padding: 20px 0;
    border-top: 1px solid #ddd;
}

.relation li {
    float: left;
    width: 19%;
    margin-right: 1.2%;
}

.relation li:nth-child(5n) {
    margin-right: 0;
}

.relation li .rimg {
    position: relative;
}

.relation li .rimg img {
    width: 100%;
}

.relation li .rtext {
    padding-top: 10px;
    font-size: 15px;
    height: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.relation-title {
    font-size: 17px;
    color: #000;
    height: 45px;
    line-height: 45px;
    background: #000;
    color: #fff;
    width: 165px;
    text-align: center;
}

/* 설문리스트 */
.pollBody {
    width: 100%;
    display: inline-block;
}

ul.pollCont {
    width: 32%;
    padding: 20px;
    border: 1px solid #ddd;
    float: left;
    margin-right: 2%;
    margin-bottom: 30px;
}

ul.pollCont:nth-child(3n) {
    margin-right: 0;
}

ul.pollCont h2 {
    height: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    margin-bottom: 20px;
}

ul.pollCont li:last-child {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #ddd;
    text-align: center;
}

ul.pollCont li button {
    width: 49%;
}

button.pollpct {
    background: #ca2500;
}

button.pollview {
    background: #ff9900;
}

.pollOut {
    background: #f9f9f9;
}

ul.pollOut li button {
    width: 100%;
}


/* 채팅 */
.chatBody {
    width: 100%;
    height: 100%;
    background: #f5f6f8;
    position: relative;
    padding-bottom: 50px;
}

.chatCon {
    width: 100%;
    height: 100%;
    padding: 10px;
}

.ftleft {
    text-align: left;
    width: 100%;
    margin-bottom: 10px;
    padding-right: 50px;
}

.ftright {
    text-align: right;
    width: 100%;
    margin-bottom: 10px;
    padding-left: 50px;
}

.chusnm {
    color: #39c0c3;
}

.chatBox {
    padding: 10px;
    color: #000;
    border: 1px solid #ddd;
    background: #fff;
    display: inline-block;
    border-radius: 5px;
    position: relative;
}

.chatBox.mine {
    text-align: left;
    background: #e5fbf8;
    border: 1px solid #cddfe1;
}

.chatTxt {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.chatinput {
    width: 100%;
    height: 50px;
    background: #fff;
    border: 1px solid #f5f5f5;
    padding-left: 15px;
    padding-right: 70px;
    outline: none;
}

button.chatResult {
    width: 50px;
    height: 30px;
    padding: 0;
    background: #3cb6c3;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.chatMsg {
    color: #000;
    text-align: center;
    padding: 10px 0;
}

.chatMsg.chatOut {
    color: #ff0000;
}


#qa-list,
#rev-list {
    margin-bottom: 50px;
}

/* 롤오버메뉴 */
.topmenu_center #m0 {
    padding-right: 0px;
}

.topmenu_container {
    width: 100%;
    background: none;
    border-bottom: 1px solid #000;
}

.topmenu {
    height: 52px;
    box-sizing: content-box;
    margin: 0 auto;
    line-height: 1;
    width: 100%;
    background: none;
    max-width: 1100px;
}

#menu-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: #009ae1;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.topmenu_center,
.topmenu_center ul,
.topmenu_center ul li,
.topmenu_center ul li a,
.topmenu_center #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}

.topmenu_center>ul {
    padding-left: 40px;
}

.topmenu_center:after,
.topmenu_center>ul:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.topmenu_center #menu-button {
    display: none;
}

.topmenu_center>ul>li {
    float: left;
    width: 10%;
}

.topmenu_center.align-center>ul {
    font-size: 0;
    text-align: center;
}

.topmenu_center.align-center>ul>li {
    display: inline-block;
    float: none;
}

.topmenu_center.align-center ul ul {
    text-align: left;
}

.topmenu_center.align-right>ul>li {
    float: right;
}

.topmenu_center>ul>li>a {
    text-align: center;
    font-weight: 600;
    padding: 18px 0;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    color: #333;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
}

.topmenu_center>ul>li:hover>a,
.topmenu_center>ul>li.active>a {
    color: #ca2500;
    font-weight: 700;
}

.topmenu_center>ul>li.has-sub>a {
    padding-right: 45px;
}

.topmenu_center>ul>li.has-sub>a::z {
    position: absolute;
    top: 21px;
    right: 25px;
    width: 4px;
    height: 4px;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    content: '';
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: border-color 0.2s ease;
    -moz-transition: border-color 0.2s ease;
    -ms-transition: border-color 0.2s ease;
    -o-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}

.topmenu_center>ul>li.has-sub:hover>a::after {
    border-color: #ffff00;
}

.topmenu_center ul ul li.has-sub>a::after {
    position: absolute;
    top: 13px;
    right: 10px;
    width: 4px;
    height: 4px;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    content: '';
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: border-color 0.2s ease;
    -moz-transition: border-color 0.2s ease;
    -ms-transition: border-color 0.2s ease;
    -o-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}

.topmenu_center.align-right ul ul {
    text-align: right;
}

.topmenu_center.align-right ul ul li.has-sub>a::after {
    right: auto;
    left: 10px;
    border-bottom: 0;
    border-right: 0;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
}

.topmenu_center ul ul li.has-sub:hover>a::after {
    border-color: #ffff00;
}

.topmenu_center ul ul {
    position: absolute;
    left: -9999px;
    top: 52px;
}

.topmenu_center li:hover>ul {
    left: auto;
}

.topmenu_center.align-right li:hover>ul {
    right: 0;
}

.topmenu_center ul ul ul {
    margin-left: 100%;
    top: 0;
}

.topmenu_center.align-right ul ul ul {
    margin-left: 0;
    margin-right: 100%;
}

.topmenu_center ul ul li {
    height: 0;
    -webkit-transition: height .2s ease;
    -moz-transition: height .2s ease;
    -ms-transition: height .2s ease;
    -o-transition: height .2s ease;
    transition: height .2s ease;
}

.topmenu_center ul li:hover>ul>li {
    height: 32px;
}

.topmenu_center ul ul li a {
    text-align: center;
    padding: 10px 0;
    width: 160px;
    font-size: 13px;
    background-color: #000;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
}

.topmenu_center ul ul li:hover>a,
.topmenu_center ul ul li a:hover {
    color: #ca2500;
    background-color: #f4f4f4;
}

.contable .section-box .dtable.boardReg {
    border-top: 1px solid #dddddd;
}

.contable .section-box .dtable.boardReg .table-td {
    border-bottom: 0px solid #dddddd;
}

.contable .section-box .dtable.col2 .table-th {
    font-size: 15px;
    background: #f5f5f5f5;
    border-radius: 10px;
    border: 5px solid #ffffff;
}

.contable .section-box .dtable .table-th {
    font-size: 15px;
    background: #f5f5f5f5;
    border-radius: 12px;
    border: 5px solid #ffffff;
}






@media (max-width: 1024px) {
    .calendar .cal_area {
        width: 67%
    }

    .calendar .scheduleList {
        width: calc(33% - 30px);
    }

    .infoBox ul li .left {
        width: 100%;
        text-align: center;
        border-right: 0;
        border-bottom: 1px solid #000;
    }

    .infoBox ul li .right {
        width: 100%;
    }
}

@media (min-width: 835px) {
    .max768 {
        display: none;
    }

    .category-tap select {
        display: none;
    }


}

@media (min-width: 481px) {
    .max480 {
        display: none;
    }

    .lecture-Price {
        margin-top: 0;
    }

    .lecture-Price {
        display: block;
    }
}

@media (max-width: 834px) {



    /* 1. book-cate 전체를 수직 정렬로 강제 */
    .book-cate {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 2. book_search 컨테이너: 직선 정렬 및 너비 100% 설정 */
    .book_search {
        display: flex !important;
        flex-direction: row !important;
        /* <select>와 <input>을 직선으로! */
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 3. 드롭다운(select): 너비를 내용물 크기만큼만 유지 */
    .book_search select.form-control {
        flex-grow: 0 !important;
        /* 공간을 차지하지 않음 */
        flex-shrink: 0 !important;
        /* 줄어들지 않음 */
        width: auto !important;
        max-width: fit-content;
        min-width: 100px;
        /* 최소 너비 지정 */
        margin-right: 5px !important;
        display: block !important;
        min-height: 34px !important;
    }

    /* 4. 인풋란: 나머지 모든 공간을 차지하도록 설정 (시각적 100% 효과) */
    .book_search input.search {
        flex-grow: 1 !important;
        /* 남은 공간 모두 차지 */
        flex-shrink: 1 !important;
        width: auto !important;
        display: block !important;
        min-height: 34px !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-left: 5px !important;
    }

    /* 5. 기타 요소 100% 너비 확보 및 슬래시 숨김 */
    .book-cate>select,
    .book-cate button.btn-cate {
        width: 100% !important;
        box-sizing: border-box;
    }

    .book-cate .min480 {
        display: none !important;
    }

    .cates1 .cates2 .cates3 {
        flex-direction: column;
    }

    .c-List-Type ul li:nth-child(1),
    .c-List-Type ul li:nth-child(2),
    .c-List-Type ul li:nth-child(3) {
        display: block;
        width: 100%;
    }

    .min768 {
        display: none;
    }

    .main_section {
        width: 96%;
    }

    .section {
        width: 96%;
    }

    .cate-tap,
    .cate-tap.bottom-line {
        display: none;
    }

    .c-List-Type ul li:nth-child(2) {
        padding-left: 0;
    }

    .c-Album-Type ul {
        width: 97%;
    }

    .c-Album-Type ul {}

    .book_left {
        width: 110px;
    }

    .book_right {
        padding-left: 10px;
    }

    .book_right li h2 {
        font-size: 15px;
    }

    table.myOrder th {
        width: 90px;
    }

    .cate-tap.salesMain {
        display: block;
    }

    .teacher_box {
        width: 31%;
    }

    #formCate {
        width: 100%;
        margin-bottom: 10px;
    }

    .goods-box {
        width: 31.3%;
    }

    .ul-photo>li {
        width: 30.3%;
    }

    .omrcard {
        display: none;
    }

    .infoBox ul li,
    .infoBox ul li:last-child {
        width: 50%;
        margin-bottom: 0px;
    }

    .infoBox ul li:nth-child(3) {
        border-right: 1px solid #000;
    }

    .infoBox ul li:nth-child(3),
    .infoBox ul li:nth-child(4) {
        width: 100%;
    }

    .infoBox ul li:nth-child(2) {
        border-right: 1px solid #000;
    }

    .infoBox ul li .left {
        width: 78px;
        border-bottom: 0;
        border-right: 1px solid #000;
    }

    .infoBox ul li .right {
        width: auto;
    }

    .examBody {
        width: 100%;
    }

    .slider_boxnews .btext {
        width: 100%;
    }

    .slider_boxnews .btext:nth-child(even) {
        margin-left: 0;
    }

    .calendar .cal_area {
        width: 100%;
        padding: 0;
        border: 0;
    }

    .calendar .scheduleList {
        width: 100%;
        margin: 0;
    }

    .calendar .scheduleList .default_txt {
        display: block;
        height: 250px;
        text-align: center;
        line-height: 250px;
        width: 100%;
    }

    .calendar .scheduleList .list_header {
        margin-top: 15px;
    }

    .relation li {
        width: 24%;
        margin-right: 1.33333333%;
    }

    .relation li:nth-child(4n) {
        margin-right: 0;
    }

    .pw_find .find_form_box {
        border-left: 0px solid #ddd;
    }

    .id_find {
        float: auto;
        padding-top: 30px;
        margin-bottom: 30px;
        width: 100%;
    }

    .pw_find {
        float: auto;
        padding-top: 30px;
        margin-bottom: 30px;
        width: 100%;
        border-top: 1px solid #ddd;
    }

    .n4 .submenu_list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

}

@media (max-width: 660px) {

    .n4 .submenu_list {
        background-color: #e9f6ff;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .depth2_list {
        margin: 0 auto;
        margin-bottom: 20px;
        padding-top: 0px;
        width: 100%;
        border-bottom: 1px solid #dadada;
        height: 42px;
    }

    .depth2_list a {
        color: #666666;
        font-weight: normal;
        height: 40px;
        width: 49%;
        float: left;
    }

    .btn-depth2 {
        margin: 0px;
        background: #FFF;
        border: none;
        padding: 5px 0;
        text-align: center;
        width: 50%;
        padding-top: 5px;
        font-size: 18px;
        border-radius: 0px;
        height: 65px;
    }

    .btn-depth2:hover {
        border-bottom: 3px solid #21639b;
        padding: 5px 0;
        background-color: #ffffff;
        font-size: 18px;
        color: #21639b;
        outline: none;
        font-weight: bold;
    }

    .btn-depth2.focus {
        border-bottom: 3px solid #21639b;
        padding: 5px 0;
        background-color: #ffffff;
        font-size: 18px;
        color: #21639b;
        outline: none;
        font-weight: bold;
    }

    .depth3_list {
        display: inline-block;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 100%;
        line-height: 36px;
    }

    .depth3_list a {
        color: #555555;
        display: block;
        width: 48%;
        line-height: 36px;
        float: left;
        font-weight: 500;
        margin-right: 2%;
        height: 40px;
        border-radius: 5px;
        background: url(/files/images/depth3_icon.png) no-repeat 8px 8px;
    }

    .depth3_list a.focus {
        color: #fff;
        height: 40px;
        border-radius: 5px;
    }

    .btn-depth3 {
        font-size: 13px;
        padding: 8px 12px;
        border: 1px solid #13aca5;
        padding: 2px;
        line-height: 36px;
        background: #ffffff;
        margin-left: -1px;
        margin-bottom: 5px;
    }

    .btn-depth3.focus {
        outline: none;
        color: #ffffff;
        border-radius: 5px;
        height: 40px;
        padding: 2px;
        line-height: 36px;
        background: #787dff url(/files/images/depth3_icon_over.png) no-repeat 8px 8px;
    }

    .depth3_list a:hover {
        outline: none;
        color: #ffffff;
        border-radius: 5px;
        height: 40px;
        padding: 2px;
        line-height: 36px;
        background: #9599ff url(/files/images/depth3_icon_over.png) no-repeat 8px 8px;
    }

}

@media (max-width: 480px) {

    /* book-cate 전체를 수직 정렬로 강제 */
    .book-cate {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* book_search 컨테이너: 직선 정렬을 강제하고 너비를 100%로 설정 */
    .book_search {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 드롭다운(select): 너비를 내용물 크기만큼만 유지 */
    .book_search select.form-control {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: auto !important;
        max-width: fit-content;
        min-width: 100px;
        /* 최소 너비 설정 (선택 사항) */
        margin-right: 5px !important;
        display: block !important;
        min-height: 34px !important;
    }

    /* 인풋란: 나머지 모든 공간을 차지하도록 설정 (시각적 100% 효과) */
    .book_search input.search {
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        width: auto !important;
        display: block !important;
        min-height: 34px !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-left: 5px !important;
    }

    /* 기타 요소 100% 너비 확보 및 슬래시 숨김 */
    .book-cate>select,
    .book-cate button.btn-cate {
        width: 100% !important;
        box-sizing: border-box;
    }

    .book-cate .min480 {
        display: none !important;
    }

    .detailImgBox img {
        display: none;
    }

    .myorder-tab {
        padding: 4px;
    }

    .myorder-tab li {
        padding: 10px;
        font-size: 16px;
    }

    .n4 .submenu_list {
        width: 100%;
        height: 100%;
        margin: 4px 0 4px 0;
        line-height: 1;
        display: flex;
        flex-direction: column;
    }

    .n4 .submenu_list a {
        font-size: 16px;
        height: 100%;
    }

    h3 {
        font-size: 24px;
    }

    table {
        table-layout: fixed;
    }

    .min480 {
        display: none;
    }

    #login_box {
        max-width: 100%;
        margin: 20px auto 15px;
    }

    .idpw_box {
        width: 100%;
    }

    .login_sbox {
        width: 100%;
    }

    .form-control,
    input.ls,
    input.hs {
        width: 100%;
        min-width: 100%;
    }

    * {
        letter-spacing: -1px;
    }

    .form-control,
    input.ls,
    input.hs {
        width: 100%;
    }

    .ul-news td:first-child {
        width: 130px;
    }

    .ul-photo>li {
        width: 47%;
    }

    .contable.bbslist-t .ul-1 li:nth-child(4),
    .contable.bbslist-t .ul-1 li:nth-child(5) {
        display: none;
    }

    .bbslist-t li:nth-child(3),
    .boardQna li:nth-child(3) {
        width: 25%;
    }

    .contable.boardQna .ul-1 li:nth-child(4),
    .contable.boardQna .ul-1 li:nth-child(5) {
        display: none;
    }

    .c-List-Type {
        display: inline-block;
        width: 100%;
    }

    .c-List-Type ul {
        width: 100%;
        float: left;
        padding: 20px;
    }

    .c-List-Type ul li:nth-child(1),
    .c-List-Type ul li:nth-child(2),
    .c-List-Type ul li:nth-child(3) {
        display: block;
        width: 100%;
    }

    .c-List-Type ul li:nth-child(2) {
        padding: 0;
    }

    .cousse-Name {
        font-size: 15px;
        margin-top: 10px;
    }

    .lecture-Price {
        position: relative;
    }

    .c-List-Type ul li:nth-child(3) {
        margin-top: 20px;
    }

    .c-Album-Type ul {
        width: 100%;
    }

    .c-Album-Type ul {
        margin-bottom: 10px;
    }

    #lec-list table .number,
    #lec-list table .time {
        display: none;
    }

    .detail-top .left {
        width: 100%;
        max-width: 520px;
        float: none;
        margin: 0 auto 14px;
    }

    .detail-top .left>img {
        width: 100%;
        display: block;
    }

    .detail-top.bookview {
        display: block;
    }

    .detail-top .right {
        width: 100%;
        float: none;
        clear: both;
        margin-bottom: 10px;
    }

    .listTable .packCont {
        display: block;
        float: none;
    }

    .listTable .listView {
        display: block;
        float: none;
        width: 100%;
        margin-top: 10px;
    }

    .tabcontent.pack {
        padding: 20px 0;
    }

    #lec-list .data {
        width: 50px;
    }

    #lec-list .view {
        width: 80px;
    }

    .book_left {
        display: block;
        width: 100%;
    }

    .book_right {
        display: block;
        padding: 0;
    }

    .book_right li h2 {
        margin-top: 10px;
    }

    .book_box {
        width: 44%;
        margin: 20px 3%;
    }

    .oderRead_1 td {
        width: 50%;
    }

    .contable .section-box .dtable.col2 .table-th {
        font-size: 14px;
        background: #f5f5f5f5;
        border-radius: 12px;
        border: 5px solid #ffffff;
        padding: 10px 6px;
    }

    .dtable.col2 .table-th,
    .dtable.col2 .table-td {
        display: block;
        float: left;
    }

    .dtable.col2 .table-th,
    .dtable .table-th {
        width: 30%;
    }

    .dtable.col2 .table-td,
    .dtable .table-td {
        width: 70%;
        font-size: 15px;
        padding: 5px 5px;
    }

    .taxBox .dtable.col2 {
        width: 100%;
    }

    .taxBox .dtable.col2 .table-th,
    .taxBox .dtable.col2 .table-td {
        display: table-cell;
        float: none;
    }

    .taxBoxList ul li {
        width: 100%;
    }

    table.orderTermRead2 th {
        width: 20%;
    }

    .bbsview td {
        width: 100%;
    }

    .pointList th {
        width: 22%;
    }

    .cartList-btn>button {
        width: 49.5%;
        margin-bottom: 2px;
    }

    input.zipCode {
        width: 100%;
    }

    .couponContent {
        padding: 30px 10px;
    }

    .couponPopup th:last-child {
        width: 90px;
    }

    .btn_center.salesMain button {
        width: 100%;
    }

    .cate-tap.salesMain {
        border: 0;
    }

    .cate-tap.salesMain li {
        width: 32.5%;
        margin: 2px 1px;
        border-bottom: 1px solid #ddd;
        text-align: center;
    }

    .sellerCourse th,
    .orderResult th {
        width: 18%;
    }

    .find_form_box {
        padding: 0;
    }

    .joinForm,
    .info-text {
        width: 98%;
    }

    .boardSearch select,
    .boardSearch .board_search,
    .boardSearch button {
        width: 100%;
        margin: 1px 0;
    }

    .boardSearch button {
        width: 20%;
        margin: 1px 0;
        border-radius: 7px;
        font-size: 15px;
    }

    .boardSearch select.board {
        width: 25%;
        margin: 1px 0;
        min-width: 25%;
    }

    .boardSearch .board_search {
        width: 30%;
        margin: 1px 0;
        min-width: 45%;
        font-size: 15px;
    }

    .boardSearch {
        margin-bottom: 20px;
    }

    .teacherTop,
    .teacherTop .left,
    .teacherTop .right {
        display: block;
        width: 100%;
        float: none;
    }

    .teacherTop .right {
        margin-top: 30px;
    }

    .teacher_box {
        width: 98%;
        margin-bottom: 30px;
    }

    .agree-box {
        padding: 10px 0px;
    }

    .book-cate select {
        margin-bottom: 2px;
    }

    button.btn-cate,
    button.address-find {
        width: 100%;
    }

    .goods-box {
        width: 48%;
    }

    .addEtc {
        padding-top: 0;
    }

    .ul-faq .panel {
        padding: 20px 10px;
    }

    .q-icon {
        left: 0;
        width: 25px;
        height: 25px;
    }

    .ul-faq .flip {
        padding: 10px 0 10px 15px;
    }

    button.coursFree {
        width: 100%;
    }

    #qa-list {
        padding: 0;
    }

    .mylecBox,
    .lectureImg,
    .lectureTxt,
    .btn-area.pause {
        display: block;
        width: 100%;
    }

    .lectureTxt {
        padding-left: 0;
        margin-top: 10px;
    }

    .pause-btn,
    .pause_date_input,
    .pause_close {
        width: 100%;
    }

    .mystudytap li {
        width: 32%;
    }

    #hand2,
    #hand3 {
        width: 35% !important;
    }

    .lecturestudy li {
        padding: 10px;
        font-size: 13px;
        2025-07-16
    }

    .my-class h1 {
        font-size: 13px;
        background-size: 16px;
        padding: 15px 0 15px 20px;
    }

    #lec-list table td.view>button {
        width: 58px;
        text-align: center;
    }

    .couponList th:nth-child(1) {
        width: auto;
    }

    .couponList th:last-child {
        width: 74px;
    }

    .coupon-mobile .coupon-num {
        color: #333;
        font-weight: bold;
        font-size: 15px;
    }

    .btn_center.salesMain .form-control {
        margin-bottom: 2px;
    }

    .cartList th:nth-child(4),
    .cartList th:nth-child(6) {
        width: 70px;
    }

    .infoBox ul li {
        border-right: 1px solid #000;
    }

    .infoBox ul li,
    .infoBox ul li:last-child {
        width: 100%;
    }

    .infoBox ul li:nth-child(2) {
        width: 100%
    }

    .infoBox ul li:nth-child(3) {
        width: 100%;
    }

    .mchoice {
        padding: 0 10px;
    }

    .examHeader .left h2 {
        font-size: 18px;
        padding: 15px 10px;
    }

    #address,
    #address1 {
        width: 100%;
    }

    #couponCode {
        width: 100%;
    }

    .myClassTab a {
        font-size: 14px;
    }

    .WrapBtn {
        margin-bottom: 10px;
    }

    .examList td>button {
        width: 80px;
    }

    .examList td:nth-child(5) {
        width: 100px;
    }

    .calenBody .weekLine li {
        display: block;
        width: 100%;
        border-top: 1px solid #ddd;
    }

    .calenBody .weekLine li+li {
        border-left: 0;
    }

    .mbgallery .btext {
        margin: 7px 0;
        width: 49%;
    }

    .mbgallery .btext+.btext {
        margin-left: 0;
    }

    .mbgallery .btext:nth-child(even) {
        margin-left: 2%;
    }

    .mbgallery .btext li:last-child {
        font-size: 14px;
        margin-top: 5px;
        height: 44px;
    }

    .calendar .line_row .day {
        font-size: 15px;
    }

    .calendar .cal_header .cal_month h1,
    .calendar .scheduleList .list_header h1 {
        font-size: 25px;
    }

    .calendar .line_row div {
        height: 55px;
        line-height: 55px;
    }

    .calendar .cal_header .cal_btn a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
    }

    .calendar .line_row .day span {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

    .relation li {
        width: 49%;
        margin-right: 2%;
    }

    .relation li:nth-child(2n) {
        margin-right: 0;
    }

    ul.pollCont {
        width: 100%;
        margin-right: 0;
    }

    .section.exampage {
        padding: 0;
    }

    .add-coupon {
        margin-bottom: 40px;
    }

    .exemList th:last-child {
        width: 90px;
    }

    #lec-list .movie_list table .page {
        display: none;
    }

    .exam_box {
        width: 48%;
        margin: 0 1% 20px;
    }

    #examWrap #examMsg {
        position: fixed;
        top: 300px;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0 auto;
        height: 180px;
        width: 100%;
        padding: 35px;
        border: 1px solid #8c90ae;
        background: #eee;
        border-radius: 5px;
        color: #000000;
        text-align: center;
        z-index: 9999;
    }

    h1.examTitle span {
        font-size: 28px;
        color: var(--main);
        display: inline-block;
        margin-right: 10px;
        width: 32px;
        padding-left: 5px;
    }

    li.answer_faq span.answer_icon {
        position: absolute;
        left: 0px;
        width: 40px;
        display: inline-block;
        top: 5px;
        vertical-align: top;
    }

    li.answer_faq .answer_txt {
        margin-left: 36px;
    }

    li.answer_faq .answer_txt img {
        width: 100%;
    }

    .popup-layer4 .btn-r {
        position: unset;
        bottom: -30px;
    }

    .joinNew {
        width: 100%;
        padding: 10px 0;
        border: 0;
        border: 1px solid #ddd;
    }

    .joinNew section {
        margin-top: 0px;
    }

    .joinNew h1 {
        padding-left: 20px;
    }

    .joinNew h1:before {
        left: 10px;
    }

    .joinForm .dtable .table-th {
        width: 24%;
        font-size: 14px;
        padding: 10px 0px;
    }

    .joinForm .dtable .table-td {
        width: 80%;
        height: auto;
        min-height: auto;
        padding: 10px 5px;
    }

    .joinNew .dtable .table-th {
        width: 25%;
        font-size: 14px;
    }

    .joinNew .dtable .table-td {
        width: 100%;
        height: auto;
        min-height: auto;
    }

    .joinNew .hss {
        width: 100%;
    }

    .joinNew .ss {
        width: 46%;
    }

    .joinNew .iemail {
        width: 45%;
    }

    .joinNew .tel_txt {
        width: 30%;
    }

    input.hss {
        width: 100%;
    }

    .member_process {
        display: none;
    }

    .form-control_new {
        margin-bottom: 5px;
    }

    .join_drop {
        margin-bottom: 20px;
    }

    .join_drop_btn {
        float: right;
        text-align: center;
        width: 100px;
        border-radius: 20px;
        color: #000000;
        font-size: 15px;
        padding: 5px 14px;
        margin-right: 0px;
        border: 1px solid #dddddd;
    }

    .sidenav .search_word {
        min-width: 0;
        margin-top: 0;
    }

    .WrapBtn button {
        width: 49%;
        max-width: 150px;
        color: #444;
        background: #fff;
        border: 1px solid #ddd;
        height: 34px;
        border-radius: 5px;
    }

    #lec-list table th {
        font-size: 14px;
    }

    #lec-list table td.title {
        font-size: 14px;
        width: auto;
        line-height: 1.5;
    }

    .detail-tab button {
        font-size: 14px;
        height: 40px;
        padding: 0 3%;
    }

    #lec-list table td.view .vod-btn {
        background: #fff;
        border: 1px solid var(--main);
        color: var(--main);
        height: 30px;
        font-size: 14px;
        margin: 2px auto;
        min-height: auto;
        width: 65px;
        padding: 5px 9px;
        border-radius: 15px;
    }

    #lec-list table td.view .vod-btn:hover {
        background: var(--main);
        border: 1px solid var(--main);
        color: #fff;
        height: 30px;
        margin: 2px auto;
        min-height: auto;
        width: 65px;
    }

    #lec-list table td.view .vod-btn img {
        width: 14px;
        height: 14px;
        margin-left: 10px;
        position: relative;
        top: -1px;
    }

    #lec-list table td.view .vod-btn:hover img {
        filter: invert(100%);
    }

    .assignmentWrap .assignmentBody {
        padding: 1rem;
    }

    input.ass_upload {
        width: 60%;
    }

    .box_text {
        margin: 0 auto;
        width: 90%;
    }

    .joinForm,
    .btn_center.joinForm {
        width: 100%;
        margin: 0 auto;
    }

    .main_section {
        width: 100%;
        padding: 5px;
    }

    .detailFormBox th {
        padding: 3px 0px 3px 0px;
        background: #ffffff;
        width: 24%;
        color: #333;
        text-align: left;
        vertical-align: middle;
    }

    .detailFormBox th::before {
        display: inline-block;
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #00b2d2;
        margin-bottom: 5px;
        margin-right: 5px;
    }

    .detailFormBox td {
        padding: 3px 3px;
        ;
        width: 80%;
        color: #666666;
        font-weight: 400;
    }

    .detailFormBox td .line {
        text-decoration: line-through;
    }

    .detailFormBox td .price {
        font-size: 24px;
        color: #387afc;
        font-weight: bold;
        letter-spacing: -1px;
    }


    #calendar {
        margin-bottom: 20px;
    }

    .fc-toolbar.fc-header-toolbar {
        margin-top: -40px;
    }

    .fc-view-container {
        margin-bottom: 50px;
    }

    .fc-scroller {
        height: 320px;
    }
}

/* 강의신청 리스트 페이지 수강료 라인 정리 - 20260209.hylee */

.listBox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* 메인화면과 동일하게 3개 열 표시 - 카드 넓이 확보로 제목 줄바꿈 방지 */
.listBox>ul.course_1 {
    display: flex;
    flex-wrap: wrap;
    /* gap: 20px; */
    width: 100%;
}

/* .listBox > ul.course_1 > li {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 280px;
} */

.course-Name {
    height: 36px !important;
}

.in-hei {
    height: 80px !important;
}


/** 토스페이 결제 부분  - 20260210.hylee**/
/*타이틀 CENTER 수정*/
.title-wrap>h3.title-wrap__title {
    text-align: center !important;
    padding-bottom: 10px !important;
}


/** 강의신청 결제 박스 스크롤에 고정 하기 
- 20260211.hylee**/
.section {
    overflow: visible !important;
}

.detailRight {
    position: sticky !important;
    top: 20px !important;
}

.detailWrap {
    display: flex !important;
    align-items: flex-start !important;
}

/* 결제페이지 option_list - 상하 간격 */
.option_list li {
    margin-top: 12px;
    margin-bottom: 12px;
}

.option_list a:hover {
    color: #308687;
}

/* 결제페이지 금액(4,000,000원 등) 폰트 */
.goods_money ul li {
    font-size: 17px;
    text-align: center !important;
}

/* 결제페이지 주문내역 테이블 헤더 배경 */
#chk_pay .table_board_for tr:first-child th {
    background: #fafcfd !important;
}

/* 결제페이지 합계금액 열 너비 150px */
.goods_money {
    min-width: 150px;
    width: 150px;
    text-align: center;
}

/* 결제페이지 현금영수증 발급번호 입력창 */
#cashNumber {
    width: 37%;
}

/* [최우선 적용] 서브 네비게이션: 사각형 강조 버튼 스타일 (옅은 초록) */
.n4 .submenu_list {
    display: flex !important;
    justify-content: center !important; /* 가운데 정렬 */
    gap: 8px !important; /* 버튼 사이 간격 */
    margin-bottom: 40px !important;
    background: transparent !important; /* 기존 배경 제거 */
    height: auto !important; /* 높이 고정 해제 */
    border-radius: 0 !important;
}

/* 개별 버튼 기본 상태 (사각형) */
.n4 .submenu_list a, 
.n4 .submenu_list a.btn-submenu {
    float: none !important; 
    display: inline-block !important;
    padding: 12px 25px !important;
    border: 1px solid #dddddd !important; /* 연한 회색 테두리 */
    border-radius: 0 !important; /* 완전 사각 */
    background-color: #ffffff !important;
    color: #555555 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    height: auto !important;
    line-height: 1.2 !important;
}

/* 마우스를 올렸을 때 또는 현재 선택된 메뉴 (focus) */
.n4 .submenu_list a:hover,
.n4 .submenu_list a.focus {
    /* 기존 #40823a보다 밝고 부드러운 초록색으로 변경 */
    background-color: #6bb164 !important; 
    border-color: #6bb164 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 8px rgba(107, 177, 100, 0.2) !important; /* 그림자도 연하게 변경 */
    border-radius: 0 !important;
}