/* 컴포넌트 공통 스타일 정의 */

input, button,select {
    font-family: "S-CoreDream", sans-serif;
    color: var(--text-color);
    cursor: pointer;
}
input[type="text"], button, input[type="email"], select, input[type="tel"], textarea{
    border-radius: 10px;
}
.a11y-hidden {
    /*margin: 0;*/
    /*position: absolute;*/
    /*width: 1px;*/
    /*height: 1px;*/
    /*overflow: hidden;*/
    /*clip-path: polygon(0 0, 0 0, 0 0);*/
    /*clip: rect(0 0 0 0);*/
    /*clip: rect(0, 0, 0, 0);*/
    font-size: 0 !important;
}
.screenOut{overflow: hidden; display: inline-block; border: 0; position: absolute; z-index: -1; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); }

/* 이미지 */
img {
    display: block;
    border: 0;
    outline: 0;
}

.br-mobile {
    display: none;
}

/*인풋*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* 체크박스 */
.check-box input[type="checkbox"] {
    display: none;
}

input:read-only, input[type="text"]:read-only {
    background-color: #eee;
}

.check-box input[type="checkbox"] + label {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 1px;
    border: 1px solid #666;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}

.check-box input[type="checkbox"]:checked + label::after {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    background: var(--green-color) url("../img/icon/check-arrow.png") no-repeat center;
    position: absolute;
    left: -1px;
    top: -1px;
}

/* 검색박스 x 제거 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    cursor: pointer;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    cursor: pointer;
}

/*웹접근성에 맞는 라디오 박스*/
.new-radiobox input {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: url(../img/icon/radiobox.png) no-repeat center;
    background-size: 100%;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    margin-right: 10px;
}

.new-radiobox input:focus-visible {
    outline: auto
}

.new-radiobox input:checked {
    background-image: url(../img/icon/radiobox_checked.png);
}

.new-radiobox label {
    font-family: S-CoreDream, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 18px;
}

.new-radiobox input:disabled {
    background-color: #eee;
    border-radius: 50%;
}
.new-radiobox { display: inline-block; }

/* 웹접근성체크박스 */
.new-checkbox input {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: url(../img/icon/checkbox.png) no-repeat center;
    background-size: 100%;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    margin-right: 10px;
}

.new-checkbox input:focus-visible {
    outline: auto
}

.new-checkbox input:checked {
    background-image: url(../img/icon/checkbox_checked.png);
}

.new-checkbox label {
    font-family: S-CoreDream, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 18px;
}

.new-checkbox input:disabled {
    background-color: #eee;
}
.new-checkbox { display: inline-block; }



/*.new-checkbox input[type="checkbox"] {*/
/*}*/


/*.new-checkbox input[type="checkbox"] + label {*/
/*    display: inline-block;*/
/*    width: 18px;*/
/*    height: 18px;*/
/*    border-radius: 1px;*/
/*    border: 1px solid #666;*/
/*    position: relative;*/
/*    cursor: pointer;*/
/*    vertical-align: middle;*/
/*}*/

/*.new-checkbox input[type="checkbox"]:checked + label::after {*/
/*    content: "";*/
/*    display: inline-block;*/
/*    width: 19px;*/
/*    height: 19px;*/
/*    background: var(--green-color) url("../img/icon/check-arrow.png") no-repeat center;*/
/*    position: absolute;*/
/*    left: -1px;*/
/*    top: -1px;*/
/*}*/



/* 라디오 버튼 */
.radiobox {
    /* display: block; */
    position: relative;
    padding-left: 3rem;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: S-CoreDream, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 17px;
}
select:focus-visible {
    outline: 1px solid #000 !important;
}

.radiobox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 18px;
    width: 18px;
    border: 1px solid #666;
    border-radius: 50%;
    vertical-align: middle;
}

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

.radiobox input:checked ~ .checkmark:after {
    display: block;
}

.radiobox .checkmark:after {
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--green-color);
}

/* On mouse-over */
/* .container:hover input ~ .checkmark {
  background-color: #ccc;
} */

/* When the radio button is checked*/
/* .radiobox input:checked ~ .checkmark {
  background-color: #fff;
} */

/* 팝업 라이트박스 */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
}

.lightbox-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    max-width: 80%;
}

.lightbox-content.large-popup {
    width: 1000px;
    height: auto;
    border-radius: 20px;
    padding: 50px;
}

.lightbox-content.medium-popup {
    width: 750px;
    height: auto;
    border-radius: 20px;
    padding: 50px 45px;
}

.lightbox-content.small-popup {
    width: 600px;
    height: auto;
    border-radius: 20px;
    padding: 48px 27px 72px;
}

.lightbox-content.certi-popup {
    height: auto;
    border-radius: 20px;
    padding: 48px 25px 72px;
}

.large-popup .popup-title,
.medium-popup .popup-title,
.certi-popup .popup-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 29px;
}

.small-popup .popup-title {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
}

.popup-box {
    margin-top: 1rem;
    border-top: 3px solid var(--green-color);
    padding-top: 4rem;
}

.close-button {
    position: absolute;
    top: 50px;
    right: 50px;
    cursor: pointer;
}

.popup-btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.popup-btn-box button {
    font-family: S-CoreDream, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    padding: 9px 32px;
    background: var(--green-color);
    border: none;
    outline: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
}

.popup-btn-box button.popup-cancel-btn {
    background: #ddd;
    color: #000;
}

/*메인 팝업창 css*/
.main-popup-btn-box {
    position: absolute;
    top: 13px;
    right: 18px;
}

.main-popup-btn-box button.popup-cancel-btn {
    background: none;
    position: absolute;
    top: -19px;
    right: -8px;
    padding: 0;
    font-size: 35px;
    color: #333;
    border: none;
}


/* 강의 수료증 */
.certi-popup .popup-title {
    margin-bottom: 2rem;
}

.certi-box {
    padding: 30px 0;
}

.certificate {
    background-image: url("../img/bg/certificate-layout.png"),
    url("../img/bg/certificate-bg.png");
    background-size: cover, 168px 246px;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center calc(100% - 200px);
    width: 600px;
    height: 806px;
    padding: 104px 70px 78px 91px;
    margin: 0 auto;
}

.certificate h1 {
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    line-height: 57px;
    font-family: S-CoreDream, sans-serif;
}

.certificate ul li {
    display: flex;
    margin-bottom: 1.5rem;
}

.certificate ul li h3 {
    width: 60px;
    margin-right: 1.6rem;
    font-family: S-CoreDream, sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 22px;
    letter-spacing: 1.82em;
}

.certificate ul li:nth-child(2) h3 {
    letter-spacing: 0.45em;
}

.certificate ul li:nth-child(3) h3 {
    letter-spacing: normal;
}

.certificate ul li p {
    font-family: S-CoreDream, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.certificate > p {
    font-family: S-CoreDream, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    margin-top: 103px;
    margin-bottom: 167px;
}

.certificate > h4 {
    text-align: center;
    font-family: S-CoreDream, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 27px;
    text-align: center;
}

.certificate > h2 {
    font-family: S-CoreDream, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 33px;
    letter-spacing: 0.5em;
    text-align: center;
    margin-top: 2.3rem;
}

.certi-info {
    margin-top: 6.2rem;
}

.certi-popup .popup-btn-box {
    margin-top: 3rem;
}

/* ************ 게시판형 pagination 스타일 ************** */
.pagination {
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}

.pagination a img {
    display: inline-block;
    width: 24px;
}

.pagination .pagings {
    display: flex;
    gap: 3rem;
}

.pagination .pagings a {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #666;
    display: inline-block;
    cursor: pointer;
}

.pagination a.active, .pagination a:hover, .pagination a:focus, .pagination a:active {
    color: #000;
    font-weight: 700;
    font-size: 18px;
}

.mark {
    color: #e11f1f;
}

/* ================== 에러 페이지 =================== */
.error-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 680px;
}

.error-img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
}

.error-img h1 {
    margin-left: 60px;
    color: #0e223f;
    font-weight: 800;
    font-size: 128px;
}

.error-wrap h3 {
    font-size: 32px;
    font-weight: 800;
    line-height: 38px;
    letter-spacing: 0em;
    text-align: center;
    color: #000;
    margin-bottom: 3rem;
}

.error-wrap p {
    font-size: 24px;
    font-weight: 500;
    line-height: 29px;
    text-align: center;
    margin-bottom: 8rem;
}

.error-wrap a {
    background: #0e223f;
    color: #fff;
    padding: 15px 0;
    border-radius: 80px;
    display: block;
    margin: 0 auto;
    width: 200px;
    text-align: center;
}

/* 서브 공통 스타일 */
.banner-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: S-CoreDream, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 49px;
    color: #fff;
}

.title {
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    position: relative;
    color: #000;
}

.title::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--yellow-color);
}

.subtitle {
    font-size: 18px;
    font-weight: 300;
    line-height: 28px;
    text-align: center;
    margin-top: 5.5rem;
    color: #333;
}

.subtitle strong {
    font-size: 18px;
    font-weight: 500;
    line-height: 21px;
}

.sub-section {
    margin: 120px 0 150px 0;
}

/* 서브페이지 네비게이터 */
.sub-navigator {
    width: auto;
    height: 50px;
    border-radius: 50px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    background: #fff;
    display: table;
    margin: auto;
    margin-top: -25px;
    box-sizing: border-box;
    padding: 0 30px;
    z-index: 99;
    position: relative;
}

.sub-navigator > ul > li {
    float: left;
    margin-right: 30px;
    line-height: 50px;
}

.sub-navi-content .sub-home img {
    width: 24px;
}

.sub-navi-content .sub-depth-1 {
}

.sub-navi-content .sub-depth-2 {
    margin-right: 0;
}

.sub-navi-content li > img {
    width: 16px;
}


.sub-navigator ul li span,
.sub-navigator img,
.sub-navigator button {
    display: inline-block;
    vertical-align: middle;

}

.sub-depth-1 button {
    font-family: S-CoreDream, sans-serif;
    color: #666666;
    font-size: 20px;
    font-weight: 500;
    background: url("../img/icon/sub-navi-arrow-down-icon.png") no-repeat;
    background-position: 100% center;
    border: none;
    margin-left: 3rem;
    cursor: pointer;
}

.sub-depth-1 label {
    font-family: S-CoreDream, sans-serif;
    font-size: 20px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    width: 100%;
    line-height: 52px;
}

.sub-depth-1-menu {
    position: absolute;
    top: 50px;
    left: 0;
    width: 250px;
    height: 27rem;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    padding: 26px 30px;
    background: #fff;
    display: none;
}

/*.sub-depth-1-menu.sub-navi-active {*/
/*    display: block;*/
/*}*/

/*.sub-depth-2-menu.sub-navi-active2 {*/
/*    display: block;*/
/*}*/

/*.sub-depth-1-menu li:hover a {*/
/*    color: var(--green-color);*/
/*}*/

.sub-depth-2-menu {
    position: absolute;
    top: 60px;
    right: 0px;
    width: 220px;
    height: 27rem;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    background: #fff;
    display: none;
    box-sizing: border-box;
}

.sub-depth-2-menu li:hover a {
    color: var(--green-color);
}

.sub-depth-1-menu li a {
    display: block;
    font-family: S-CoreDream, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 17px;
    margin-bottom: 10px;
}

.sub-depth-2-menu li a {
    display: block;
    font-family: S-CoreDream, sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
}

.sub-depth-2-menu li:last-child a {
    margin-bottom: 0
}

.sub-depth-2 button {
    font-family: S-CoreDream, sans-serif;
    font-size: 20px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    width: 100%;
    background-color: #fff;
}

.sub-depth-2 button img {
    margin-left: 40px;
    width: 18px;
    margin-top: -8px;
}

/* ********** 서브 페이지 컴포넌트 반응형 START ********** */
/* ***** Tablet *********  */

@media screen and (max-width: 1200px) {
    .banner-title {
        font-size: 30px;
        font-weight: 700;
        line-height: 41px;
    }

    .subtitle {
        font-size: 14px;
        font-weight: 300;
        line-height: 18px;
        max-width: 48rem;
        margin: 0 auto;
        padding-top: 4rem;
    }

    .sub-navigator {

        height: 40px;
        padding: 0 30px;
    }

    .sub-depth-1 {

    }

    .sub-depth-1 button {
        font-size: 16px;
        font-weight: 500;
        line-height: 19px;
        width: 155px;
    }

    .sub-depth-1 label {
        font-size: 16px;
        font-weight: 500;


    }

    .sub-depth-2 {

    }

    .sub-depth-2 button {
        font-size: 16px;
        font-weight: 500;
        width: 100%;
    }

    .sub-depth-1-menu {
        width: 190px;
    }

    .sub-depth-2-menu {
        /*width: 100%;*/
        /*top: 35px;*/
        width: auto;
    }

    .title {
        font-size: 32px;
        font-weight: 600;
        line-height: 26px;
    }

    .title::after {
        width: 60px;
        bottom: -20px;
    }

    .sub-section {
        margin: 80px 0 100px 0;
    }
}

/* ************** 모바일 L ************** */
@media screen and (max-width: 768px) {
    .gnb-header {
        display: none;
    }

    .pagination a img {
        width: 20px;
    }

    .pagination .pagings {
        gap: 25px;
    }

    .sub-navigator > ul > li {
        line-height: 40px;
        margin-right: 20px;
    }

    .nav-small-bg {
        display: none;
    }

    .banner-title {
        font-size: 18px;
    }

    .sub-navigator {
        /*width: 90%;*/
        height: 40px;
        bottom: 20px;
        margin: auto;
        box-sizing: border-box;
        padding: 0 20px;
    }

    .sub-navi-content {
        gap: 1rem;
        line-height: 40px;
    }

    .sub-home {
        display: none;
    }

    .sub-navigator > ul > li:nth-child(2) {
        display: none;
    }

    .sub-depth-1 {

    }

    .sub-depth-2 {

    }

    .sub-depth-1 button {
        font-size: 1.4rem;
        margin-left: 0;
        /*width: 125px;*/
        line-height: 14.33px;
    }

    .sub-depth-1 label {
        font-size: 1.2rem;
        margin-left: 0;
        /*width: 125px;*/
        line-height: 14.33px;
    }

    .sub-navi-content li > img {
        width: 12px;
    }

    .sub-depth-2 button {
        font-size: 1.2rem;
        margin-left: 0;
        width: 100%;
        line-height: 14.33px;
    }

    .sub-depth-2 button img {
        margin-left: 20px;
        width: 14px;
    }

    .sub-depth-1-menu {
        width: 145px;
        height: auto;
        padding: 20px 15px;
        top: 3.5rem;
        left: -1rem;
    }

    .sub-depth-2-menu {
        /*width: 100%;*/
        height: auto;
        padding: 15px;
        box-sizing: border-box;
        top: 50px;
        right: 10px;
    }

    .sub-depth-1-menu li a {
        font-size: 1.2rem;
    }

    .sub-depth-2-menu li a {
        font-size: 1.2rem;
    }

    .title {
        font-size: 2rem;
    }

    .title::after {
        width: 40px;
        bottom: -15px;
    }

    .sub-section {
        margin: 4rem 0 8rem 0;
    }

    .subtitle strong {
        font-size: 1.4rem;
    }

    .subtitle {
        padding-top: 3rem;
    }

    .pagination {
        gap: 2rem;
    }

    .pagination a {
        font-size: 1.2rem;
    }

    .lightbox-content {
        max-width: 100%;
    }

    .lightbox-content.large-popup {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding: 50px 27px 70px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translate(0, 0);
        border-radius: 0;
    }

    .lightbox-content.medium-popup {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding: 50px 27px 70px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translate(0, 0);
        border-radius: 0;
    }

    .lightbox-content.small-popup {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding: 48px 27px 72px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translate(0, 0);
        border-radius: 0;
    }

    .lightbox-content.certi-popup {
        width: 100%;
        height: 100%;
        padding: 48px 27px 72px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translate(0, 0);
        border-radius: 0;
    }

    .small-popup .popup-title {
        text-align: left;
        font-size: 2.4rem;
    }

    .popup-btn-box button {
        font-size: 1.4rem;
    }

    .large-popup .popup-title,
    .medium-popup .popup-title,
    .certi-popup .popup-title {
        font-size: 20px;
    }

    .certi-box {
        width: 100%;
        overflow-x: scroll;

    }

    /* 에러페이지 */
    .error-wrap {
        width: calc(100% - 20px);
    }

    .error-img img {
        width: 70px;
    }

    .error-img h1 {
        font-size: 80px;
        margin-left: 35px;
    }

    .error-wrap h3 {
        font-size: 30px;
    }

    .error-wrap p {
        font-size: 20px;
    }

    .error-wrap a {
        width: 180px;
    }
}

/* ****************** 모바일 s ******************* */
@media screen and (max-width: 425px) {
    .br-pc {
        display: none;
    }

    .br-mobile {
        display: block;
    }

}

@media screen and (max-width: 360px) {
    .sub-navigator ul > li {
        margin-right: 10px;
    }

    .sub-depth-2 button img {
        margin-left: 10px;
    }
}



.loading {width: 100%;height: 100%;background:rgba(156, 156, 156,0.3);display: flex;justify-content: center;align-items: center;z-index: 9999; min-height:500px;}

.loading .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #fff;
    border-top: 5px solid #146AE2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}