@charset "UTF-8";

/*@import "../../_css/sub_layout.css"; */
@import "contents.css";
/*@import "../../_css/board.css"; */
@import "board.css";


/* ==========================================================================================
common Palette
============================================================================================*/
:root {
    --dark0: #14171f;
    --dark1: #282E3E;
    --dark3: #2a3248;
    --dark4: #3d4968;

    --gray1: hsla(0deg, 0%, 40%, 1);
    --gray2: hsla(0deg, 0%, 60%, 1);
    --gray3: hsla(0deg, 0%, 70%, 1);
    --gray4: hsla(0deg, 0%, 80%, 1);
    --gray5: hsla(0deg, 0%, 95%, 1);

    --bgGray: #f8f9fa;
    --bgYellow: #fffdf7;

    --primary: hsl(198, 100%, 41%);
    --lightBlue: #339af0;
    --blue: #1864ab;
    --darkBlue: #0f2e55;
    --red: #f03e3e;
    --darkRed: #c92a2a;
    --green: #37b24d;
    --darkGreen: #2b8a3e;
    --orange: #ff9800;
    --darkOrange: #e67700;
    --violet: #7048e8;
    --darkViolet: #5f3dc4;

    --blue-alpha20: hsla(198, 100%, 41%, .2);
    --blue-alpha05: hsla(198, 100%, 41%, .05);
}

/* container */
.container {
    max-width: 1280px;
}

.main .slick-track {
    margin: 0;
}

.controls button {
    display: none;
}

.controls button.active {
    display: block;
}

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

/* #content + .section {
  padding-top: 8rem;
} */


a.more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8rem;
    border-bottom: 2px solid #333;
}

a.more i {
    display: inline-block;
    margin-left: 1rem;
    font-size: 2.2rem;
}

/* =======================================================================================
section01 - main slider
======================================================================================= */
/* mainvisual */
.mainvisual {
    position: relative;
    height: auto;
    padding-top: 0px;
    z-index: 1;
    overflow: hidden;
}

.mainvisual .visual_container {
    max-width: 1280px;
    margin: 0 auto;
    height: 100%;
    z-index: 222;
}

.mainvisual .visual_container .cont-box {
    z-index: 222;
}

.mainvisual .cycle-slideshow {
    text-align: center;
    height: 52rem;
}

.mainvisual .cycle-slideshow .slide {
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat;
}

.mainvisual .slide .txt-box {
    display: block;
    position: relative;
    top: 86px;
    text-align: left;
    padding-left: 1rem;
    width: 1280px;
    margin: 0 auto;
}

.mainvisual .slide .txt-box .tit {
    font-size: 4.5rem;
    font-weight: 600;
    color: #fff;
}

.mainvisual .slide .txt-box .content {
    font-size: 2rem;
    color: #fff;
    margin-top: 20px;
    line-height: 1.5;
}

.mainvisual .cont-box {
    position: absolute;
    top: 65%;
    /* top: calc(100% - 80px); */
    left: auto;
    z-index: 202;
}

.mainvisual .cont-box .pagerWrap {
    position: relative;
}

.mainvisual .cont-box .pagerWrap #adv-custom-pager {
    display: inline-block;
}

.mainvisual .cont-box .pagerWrap #adv-custom-pager a {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 10px;
    background: url(../img/main/bg_pagerOff.png) 0 0 no-repeat;
    background-size: cover;
}

.mainvisual .cont-box .pagerWrap #adv-custom-pager a.cycle-pager-active {
    width: 50px;
    background: url(../img/main/bg_pagerOn.png) 0 0 no-repeat;
    background-size: cover;
}

.mainvisual .cont-box .pagerWrap button {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    width: 24px;
    height: 24px;
    top: -5px;
    border: none;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
}

.mainvisual .cont-box .pagerWrap button.blind {
    display: none;
}

.mainvisual .cont-box .pagerWrap .btnStop {
    background: url(../img/main/btn_stop.png) 0 0 no-repeat;
    background-size: cover;
}

.mainvisual .cont-box .pagerWrap .btnPlay {
    background: url(../img/main/btn_play.png) 0 0 no-repeat;
    background-size: cover;
}


main #content .shortcuts {
    position: absolute;
    width: 100%;
    margin: 1.5rem 0 3rem;
    bottom: 0;
    color: #fff;
    z-index: 2;
    font-size: 1.9rem;
}

main #content .shortcuts ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 2rem;
}

main #content .shortcuts ul li {
    width: 100%;
    height: 7.5rem;
}

main #content .shortcuts ul li:hover i {
    animation: btn_arrow 0.5s ease-in-out;
}

/* 버튼 내부 화살표 애니메이션 */
[class*="btn"]:hover i[class*="arrow"] {
    animation: btn_arrow 0.5s ease-in-out;
}

@keyframes btn_arrow {
    0% {
        transform: translateX(-30%);
    }

    50% {
        transform: translateX(15%);
    }

    100% {
        transform: translateX(0);
    }
}


main #content .shortcuts ul li a {
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 4rem;
    width: 100%;
    height: 100%;
    border-radius: 80px;
    display: flex;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    /* 밝게 보이도록 배경색 추가 */
    box-shadow: 0 6px 20px 3px rgba(0, 0, 0, .5);
    /* 그림자 효과 */
    border-width: 1px 2px 0 0;
    /* 입체감 흰색 테두리 */
    border-color: rgba(255, 255, 255, .35);
    border-style: solid;
    background: linear-gradient(100deg, rgba(33, 57, 130, 0.5), rgba(5, 117, 230, .5) 92%);
    transition: background 0.3s ease-in;
}



main #content .shortcuts ul li a:hover {
    background: linear-gradient(100deg, rgba(5, 117, 230, .5), rgba(33, 57, 130, 0.5) 92%);

}

main #content .shortcuts ul li a img {
    width: 3rem;
    height: 3rem;
    margin-right: 2rem;
}


/* =======================================================================================
section01 - EQST교육과정
======================================================================================= */
.section {
    padding: 0 0 10rem 0;
}

.section .container .sec_tit {
    margin-bottom: 2rem;
}

.section .container .sec_tit h2 {
    font-size: 3.3rem;
}


#content+.section01 {
    padding: 9rem 0;
}

@media all and (max-width: 1400px) {
    #content+.section01 {
        padding: 9rem 0;
    }
}

.section01 .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.section01 .con_area {
    flex: 1 1 100%;
    max-width: 100%;
    position: relative;
}

.section01 .con_area .slider_info {
    position: relative;
}

.section01 .con_area .slider_info h2 {
    display: inline-block;
    font-size: 3.3rem;
    font-weight: bold;
    letter-spacing: -1px;
}

.section01 .con_area .slider_info .desc {
    display: flex;
    width: 90%;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.section01 .con_area .slider_info .desc p {
    font-size: 2rem;
    color: #666;
    font-weight: 500;
}

@media all and (max-width: 1400px) {
    .section01 .con_area .slider_info .desc {
        width: 100%;
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }

    .section01 .con_area .slider_info .desc a.more {
        margin-left: auto;
    }
}


.section01 .con_area .slider_list {
    margin-right: -1.5rem;
}

.section01 .con_area .slider_list li {
    /* width: 22.4rem; */
    height: auto;
    margin-right: 1.5rem;
}

.section01 .con_area .slider_list li .card_item {
    position: relative;
    display: inline-block;
    width: 100%;
}

.section01 .con_area .slider_list li .card_item .image_area .img_area {
    position: relative;
    display: block;
    padding-top: 100%;
    background-color: #f5f5f5;
    border-radius: .8rem;
    background-image: url(../img/common/logo.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.section01 .con_area .slider_list li .card_item .image_area .img_area img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    top: 0;
    left: 0;
    border-radius: 0.8rem;
}

.section01 .con_area .slider_list li .card_item .des {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #fff;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
}

.section01 .con_area .slider_list li .card_item .des::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
    border-radius: 0.8rem;
    z-index: 1;
    padding: 2.5rem 2.5rem 3rem;
    display: flex;
    flex-direction: column;
}

.section01 .con_area .slider_list li .card_item .des .class_label,
.section01 .con_area .slider_list li .card_item .des .des1 {
    z-index: 2;
}

.section01 .con_area .slider_list li .card_item .des .class_label span {
    padding: .5rem 1.5rem;
    background-color: #218CFF;
    border-radius: 25px;
    font-size: 1.5rem;
    font-weight: normal;
}

.section01 .con_area .slider_list li .card_item .des p {
    word-break: keep-all;
}

.section01 .con_area .slider_list li .card_item .des .des1 {
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    margin-top: auto;
}

.section01 .slick-prev, .section01 .slick-next {
    top: -5rem;
    color: var(--dark1);
    border: none;
    outline: none;
    background: transparent;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.section01 .slick-prev {
    left: auto;
    right: 70px;
    border-radius: 50%;
}

.section01 .slick-next {
    right: 20px;
    border-radius: 50%;
}

.section01 .slick-prev:before {
    width: 1.5rem;
    height: 2.5rem;
    margin: 0;
    left: 45%;
    top: 55%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-family: xeicon, sans-serif;
    content: "\e906";
    background: none;
}

.section01 .slick-next:before {
    width: 1.5rem;
    height: 2.5rem;
    margin: 0;
    left: 45%;
    top: 55%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-family: xeicon, sans-serif;
    content: "\e907";
    background: none;
}

.section01 .slick-prev:hover, .section01 .slick-prev:focus, .section01 .slick-next:hover, .section01 .slick-next:focus {
    color: var(--dark1);
}

.section01 .con_area .slider_list .slick-dots {
    position: relative;
    display: flex;
    max-width: 100em;
    width: calc(100% - 2em);
    height: 2px;
    left: -1rem;
    bottom: -1em;
    margin: 0 auto;
    background-color: #f5f5f5;
}

.section01 .con_area .slider_list .slick-dots li {
    flex: 1;
    display: inline-block;
    border: none;
    width: auto;
    height: auto;
    top: 0;
    opacity: 1;
    margin: 0;
}

.section01 .con_area .slider_list .slick-dots li button {
    display: inline-block;
    height: auto;
    width: auto;
}

.section01 .con_area .slider_list .slick-dots li button::before {
    display: none;
}

.section01 .con_area .slider_list .slick-dots li.slick-active {
    opacity: 1;
    display: inline-block;
    background-color: #222;
}

.section01 .con_area .slider_list .slick-dots li.slick-active button:before {
    display: none;
}

.section01 .con_area .no-list {
    display: flex;
    align-items: center;
    height: 35.75rem;
    justify-content: center;
    border: 1px solid #d4dadd;
    /*background: url("../img/common/gnb_title_bg.png") 52% 20% no-repeat;*/
    background-size: 150px;
    background-color: #f5f5f5;
}

.section.bgBlue {
    padding: 8rem 0;
    background-color: var(--darkblue);
}

.section.bgGray {
    padding: 6rem 0;
    margin-bottom: 6rem;
    background-color: var(--gray9);
}

.section01.bgBlue .left_area .slider_list li .card_item {
    background-color: #fff;
}

.section01.bgBlue .left_area .slider_list li {
    border: 0;
}

/* 강좌 이미지 호버시 애니메이션 */
.section .card_item:hover .img_area {
    overflow: hidden;
    border-radius: 0.8rem;
    -webkit-border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    -ms-border-radius: 0.8rem;
    -o-border-radius: 0.8rem;
}

.section .card_item .img_area img {
    transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
}

.section .card_item:hover .img_area img {
    animation: scale .3s linear both;
    -webkit-animation: scale .3s linear both;
}


@keyframes scale {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }

    100% {
        transform: scale(1.08);
        -webkit-transform: scale(1.08);
        -moz-transform: scale(1.08);
        -ms-transform: scale(1.08);
        -o-transform: scale(1.08);
    }
}


/* =======================================================================================
section02
======================================================================================= */
.section02 {
    width: 100%;
    background: url('../img/contents/eqst_bg.png') no-repeat center;
    background-size: cover;
    padding: 5rem 0;
    margin-bottom: 10rem;
}

.section02 .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #fff;
}

.section02 .container .left_area {
    flex: 1 1 45%;
    max-width: 100%;
    position: relative;
}

.section02 .container .left_area h2 {
    font-size: 3.5rem;
    margin-bottom: 3rem;
}

.section02 .container .left_area p {
    font-size: 2rem;
}

.section02 .container .right_area {
    flex: 1 1 55%;
    max-width: 100%;
    position: relative;
}

.section02 .container .right_area ul li {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.section02 .container .right_area ul li:last-child {
    margin-bottom: 0;
}

.section02 .container .right_area ul li p {
    padding-right: 3rem;
}

.section02 .container .right_area ul li p.tit {
    flex: 1 1 35%;
    font-size: 2.3rem;
    font-weight: 600;
}

.section02 .container .right_area ul li p.desc {
    flex: 1 1 55%;
    padding-left: 2.5rem;
    border-left: 2px solid #fff;
}


/* =======================================================================================
section03
======================================================================================= */
.section03 .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
}

.section03 .left_area {
    width: 65%;
    max-width: 100%;
    position: relative;
}


.section03 .left_area .sec_tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.section03 .left_area h2 {
    font-size: 5rem;
}

.section03 .left_area .sec_tit a.more {
    font-size: 1.8rem;
}

.section03 .left_area ul li {
    display: flex;
    align-items: center;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    border-radius: 15px;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.section03 .left_area ul li:hover {
    background-color: #f8f9fa;
}

.section03 .left_area ul li:hover a span:last-child {
    color: var(--blue);
}

.section03 .left_area ul li:last-child {
    margin-bottom: 0;
}

.section03 .left_area ul li div.date {
    padding: 1rem 1.5rem;
    background: linear-gradient(136deg, #213982 0%, #1E283E 100%);
    color: #fff;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.section03 .left_area ul li div.date span {
    display: block;
    font-size: 1.7rem;
    text-align: center;
}

.section03 .left_area ul li div.date span.day {
    font-size: 2.6rem;
}

.section03 .left_area ul li a {
    padding: 1.5rem 1.8rem;
    flex: 1;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    font-size: 1.9rem;
    font-weight: 500;
    display: flex;
    flex-wrap: nowrap;
}

.section03 .left_area ul li a span {
    display: inline-block;
}

.section03 .left_area ul li a span:first-child {
    color: var(--blue);
    margin-right: 1rem;
}

.section03 .left_area ul li a span:last-child {
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.section03 .right_area {
    flex: 1;
    position: relative;
    background: #0000 url(../img/main/related\ link.png) no-repeat center;
    background-size: cover;
    border-radius: 3rem;
    min-height: 30rem;
    padding: 3rem;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.section03 .right_area .sec_tit {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section03 .right_area .sec_tit h2 {
    font-size: 3.3rem;
}

.section03 .right_area .sec_tit p {
    font-size: 1.8rem;
}

.section03 .right_area .related {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    border: 1px solid #cdcdcd;
    border-radius: 2rem;
    margin-top: auto;
    box-shadow: rgba(255, 255, 255, 1) 0px 2px 8px 0px;
}

.section03 .right_area .related li {
    padding: 2.5rem;
    transition: all 0.2s ease;
}

.section03 .right_area .related li:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.section03 .right_area .related li:hover:first-child {
    border-top-left-radius: 2rem;
}

.section03 .right_area .related li:hover:nth-child(2) {
    border-top-right-radius: 2rem;
}

.section03 .right_area .related li:hover:nth-child(3) {
    border-bottom-left-radius: 2rem;
}

.section03 .right_area .related li:hover:nth-child(4) {
    border-bottom-right-radius: 2rem;
}

.section03 .right_area .related li:nth-child(1), .section03 .right_area .related li:nth-child(3) {
    border-right: 1px solid #cdcdcd;
}

.section03 .right_area .related li:nth-child(1), .section03 .right_area .related li:nth-child(2) {
    border-bottom: 1px solid #cdcdcd;
}

.section03 .right_area .related li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.7rem;
}

.section03 .right_area .related li a img {
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
}


@media all and (max-width: 950px) {
    .section03 .container {
        flex-wrap: wrap;
    }

    .section03 .left_area {
        width: 100%;
    }
}


/* =======================================================================================
section04 - 커뮤니티
======================================================================================= */
.section04 .container .sec_tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section04 .container .sec_tit h2 {
    font-size: 3rem;
}

.section04 .container .community {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media all and (max-width: 950px) {
    .section04 .container .community {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media all and (max-width: 600px) {
    .section04 .container .community {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
    }
}

.section04 .container .community li {
    background: linear-gradient(123deg, #32405C 0%, #202834 100%);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.50);
    border-radius: 1.5rem;
    transition: all 0.2s ease;
}

.section04 .container .community li:hover {
    transform: translateY(-5px);
}

.section04 .container .community li a {
    padding: 2.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.section04 .community li a .label {
    display: inline-block;
    padding: .5rem 1.5rem;
    background-color: #218CFF;
    border-radius: 25px;
    font-size: 1.4rem;
    font-weight: normal;
    margin-bottom: 1rem;
}

.section04 .community li a p {
    margin-bottom: 1rem;
}

.section04 .community li a p.tit {
    display: flex;
    justify-content: space-between;
    font-size: 1.8rem;
}

.section04 .community li a p.tit .txt {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.section04 .community li a p.tit .comment_count {
    display: inline-block;
    color: #218CFF;
    margin-left: 1rem;

}

.section04 .community li a p.desc {
    color: rgba(255, 255, 255, .6);
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.section04 .community li a .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.section04 .community li a .bottom .user {
    display: flex;
    align-items: center;
}

.section04 .community li a .bottom .user .profile {
    display: inline-block;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: #D9D9D9;
    overflow: hidden;
    margin-right: 1rem;
}

.section04 .community li a .bottom .user .profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section04 .community li a .bottom .count {
    display: flex;
}

.section04 .community li a .bottom .count div:first-child::after {
    content: '/';
    margin: 0 1.5rem;
}

.section04 .community li a .bottom .count div .head {
    display: inline-block;
    color: rgba(255, 255, 255, .6);
    margin-right: .5rem;
}



/* =======================================================================================
section05 - CTF
======================================================================================= */
.section05 {
    width: 100%;
    background: url(../img/main/ctf_bg.png) no-repeat center;
    background-size: cover;
    padding: 4rem 0;
    margin-bottom: 10rem;
}

.section05 .sec_tit {
    color: #fff;
}

.section05 .sec_tit p {
    font-size: 2.2rem;
    margin: 1.5rem 0 3rem 0;
}

.section05 .sec_tit button.r_btn {
    display: flex;
    font-size: 1.8rem;
    min-width: 15rem;
}

.section05 .sec_tit button.r_btn i {
    display: inline-block;
    margin-left: auto
}


/* =======================================================================================
section06 - 기업수강 문의
======================================================================================= */
.section06 .container {
    background: url(../img/main/enterprise_bg.png) no-repeat center;
    background-size: cover;
    padding: 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.section06 .container .left_area, .section06 .container .right_area {
    flex: 1 1 50%;
    max-width: 100%;
}

.section06 .container .sec_tit {
    color: #fff;
}

.section06 .container .sec_tit h2 {
    margin-bottom: 1.5rem;
    font-size: 3.1rem;
}

.section06 .container .sec_tit p {
    font-size: 2rem;
}

.section06 .container a.r_btn {
    background-color: #218CFF;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    min-width: 15rem;
    border: none;
}

.section06 a.r_btn i {
    display: inline-block;
    margin-left: auto;
}


/* =======================================================================================
팝업 배너
======================================================================================= */
/* 메인 레이어 팝업 CSS */
.popup-wrap { display: none; align-items: center; justify-content: center; position: fixed; top: 0px; left: 0px; right: 0px; height: 100vh; z-index: 9999; }
.popup-wrap .inner-box { position: relative; width: 920px; opacity: 1; z-index: 1; }
.popup-wrap .inner-box .head-box { display: flex; align-items: center; padding-bottom: 1.2rem; padding-right: 3rem; }
.popup-wrap .inner-box .head-box a { display: inline-block; margin-left: auto; padding: 1rem 2.5rem; font-size: 1.6rem; color: #fff; text-align: center; border: 2px solid #fff; border-radius: 2.4rem; background: rgba(0, 0, 0, .5); }
.popup-wrap .inner-box .head-box a:hover {color: #38ffff; background-color: rgba(0, 0, 0, .8);}
.popup-wrap .inner-box .slick-track { margin: 0 auto; }
.popup-wrap .inner-box ul li { text-align: center; max-width:420px; height: 420px; margin-left: 20px; margin-right: 20px; background-color: transparent;}
.popup-wrap .inner-box ul li iframe {width: 100%; height: 100%; background-color: transparent;}
.popup-wrap .inner-box ul li img { display: inline-block; width: 420px; max-width: 100%;}
.popup-wrap .inner-box .slick-prev, .popup-wrap .inner-box .slick-next { width: 64px; height: 64px; color: #fff; border: none; border-radius: 100%; background: rgba(0, 0, 0, .9); }
.popup-wrap .inner-box .slick-prev { left: -64px; }
.popup-wrap .inner-box .slick-next { right: -64px; }
.popup-wrap .inner-box .slick-prev:before, .popup-wrap .inner-box .slick-next:before { -webkit-filter: grayscale(1) invert(1); }
.popup-wrap .inner-box .slick-prev:before { position: absolute; top: 50%; left: 50%; width: 9px; height: 15px; margin: -7px 0 0 -6px; content: ''; background: url(../img/page_arrow_left.png); background-size: cover; }
.popup-wrap .inner-box .slick-dots li {height: auto; background-color: transparent;}
.popup-wrap .popup-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; background: rgba(0, 0, 0, 0.5); }
.popup-wrap.on { display: flex; }
.popup-wrap.on ~ .popup-btn-box .popup-close { display: flex; }
.popup-btn-box .popup-close { display: none; }
.popup-btn-box { position: fixed; right: 1em; bottom: 1em; z-index: 9999; }
.popup-btn-box a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; box-shadow: 0px 1px 3px 0px #d4d4d5, 0px 0px 0px 1px #d4d4d5; border-radius: 100%; background: #fff; }
.popup-btn-box a i { font-size: 2.5em; }
.popup-btn-box a:last-child { margin-top: 10px; }
.popup-btn-box .popup-close i { font-size: 2.5em; }
.popup-btn-box .popup-open i { font-size: 1.5em; }
.popup-btn-box a:last-child label { position: absolute; right: 0; bottom: 0; }

@media (max-width: 1024px) {
  .popup-wrap .inner-box .slick-prev { left: -34px; z-index: 1000; }
  .popup-wrap .inner-box .slick-next { right: -34px; }
}
@media (max-width: 950px) {
  .popup-wrap .inner-box {width: 460px; box-sizing: border-box;}
  /* .popup-wrap .inner-box { width: 80%; }
  .popup-wrap .inner-box ul li {max-width:360px; height: 360px;} */
}
/* @media (max-width: 768px) {
  .popup-wrap .inner-box { width: 70%; }
} */
@media (max-width: 480px) {
  .popup-wrap .inner-box { width: 90%; }
  .popup-wrap .inner-box ul li img { width: 100%; }
  .popup-wrap .inner-box .slick-prev { left: -10px; z-index: 1000; }
  .popup-wrap .inner-box .slick-next { right: -10px; }
}

.ui.circular.blue.label {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.5em !important;
    line-height: 1rem;
    text-align: center;
    border-radius: 500rem;
    background-color: #2185D0 !important;
    border-color: #2185D0 !important;
    color: #FFFFFF !important;
}

/* =======================================================================================
MEDIAQUERY 
======================================================================================= */
@media (max-width: 1600px) {
    .mainvisual .cycle-slideshow {
        text-align: center;
        height: 50rem;
    }

    .mainvisual .slide .txt-box .tit {
        font-size: 4rem;
        font-weight: 600;
        color: #fff;
    }

    .mainvisual .slide .txt-box .content {
        font-size: 1.8rem;
    }

    .section01 .con_area .slider_info h2 {
        font-size: 3.2rem;
    }

    .section01 .con_area .slider_list li .card_item .des .des1 {
        font-size: 2.4rem;
    }

    .section02 .container .left_area h2 {
        font-size: 3.2rem;
    }

    .section02 .container .left_area p {
        font-size: 1.9rem;
    }

    .section02 .container .right_area ul li p.tit {
        font-size: 2.2rem;
    }

    .section04 .container .sec_tit h2 {
        font-size: 3.2rem;
    }

    .section .container .sec_tit h2 {
        font-size: 3.2rem;
    }
}







@media (max-width: 1400px) {
    .section01 .slick-prev, .section01 .slick-next {
        color: var(--dark1);
        outline: none;
        top: 50%;
        width: 36px;
        height: 36px;
        border-radius: 100%;
        background: rgba(255, 255, 255, .9);
        border: 1px solid #ddd;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.13);
    }

    .section01 .slick-next {
        right: .5rem;
        z-index: 7;
    }

    .section01 .slick-prev:before {
        transform: translate(0%, 0%);
        font-family: xeicon, sans-serif;
        content: "\e93b";
        width: 15px;
        height: 25px;
        margin: 0;
        left: calc(50% - 13px);
        top: calc(50% - 12px);
        font-size: 23px;
        background: none;
    }    

    .section01 .slick-next:before {
        transform: translate(0%, 0%);
        font-family: xeicon, sans-serif;
        content: "\e93e";
        
        width: 15px;
        height: 25px;
        margin: 0;
        left: calc(50% - 11px);
        top: calc(50% - 12px);
        font-size: 23px;
        background: none;
    }

    .section01 .slick-prev {
        left: -1rem;
        z-index: 7;
    }

     .section01 .slick-prev:hover, .section01 .slick-prev:focus, .section01 .slick-next:hover, .section01 .slick-next:focus {
        background: rgba(255, 255, 255, 1);
    }

}









@media (max-width: 1024px) {
    .popup-wrap .inner-box .slick-prev {
        left: -34px;
        z-index: 1000;
    }

    .popup-wrap .inner-box .slick-next {
        right: -34px;
    }
}

@media (max-width: 950px) {
    .popup-wrap .inner-box {
        width: 460px;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .popup-wrap .inner-box {
        width: 90%;
    }

    .popup-wrap .inner-box ul li img {
        width: 100%;
    }

    .popup-wrap .inner-box .slick-prev {
        left: -10px;
        z-index: 1000;
    }

    .popup-wrap .inner-box .slick-next {
        right: -10px;
    }
}

@media (max-width:1280px) {
    .mainvisual .cont-box {
        position: absolute;
        top: 55%;
        left: 6rem;
        z-index: 202;
    }

    .mainvisual .slide .txt-box {
        top: 65px;
        width: 90%;
    }

    .mainvisual .slide .txt-box .content {
        font-size: 2rem;
        color: #fff;
        margin-top: 15px;
        line-height: 33px;
    }

    main #content .shortcuts {
        position: absolute;
        width: 100%;
        margin: 1.5rem 0 3rem;
        bottom: 0;
        color: #fff;
        z-index: 2;
        font-size: 1.7rem;
    }

    main #content .shortcuts ul li {
        width: 100%;
        height: auto;
    }

    #content+.section01 {
        padding: 6rem 0;
    }

    .section01 .con_area .slider_info .desc p {
        font-size: 2rem;
        color: #666;
        font-weight: 500;
    }

    .section01 .con_area .slider_list li .card_item .des .des1 {
        font-size: 3rem;
    }

    .section01 .con_area .slider_list li .card_item .des .class_label span {
        padding: .7rem 1.7rem;
        font-size: 1.6rem;
    }

    a.more {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.8rem;
        border-bottom: 2px solid #333;
    }

    .section {
        padding: 0 0 6rem 0;
    }

    .section.bg_img {
        padding: 4rem;
    }

    .section02, .section05 {
        margin-bottom: 6rem;
    }
}

@media (max-width:1200px) {
    .mainvisual .cycle-slideshow {
        height: 50rem;
    }

    .mainvisual .cont-box {
        position: absolute;
        top: 60%;
        /* top: calc(100% - 80px); */
        left: 6rem;
        z-index: 202;
    }

    .mainvisual .slide .txt-box .tit {
        font-size: 4.2rem;
        font-weight: 600;
        color: #fff;
    }

    .mainvisual .slide .txt-box .content {
        font-size: 1.8rem;
        color: #fff;
        margin-top: 15px;
        line-height: 33px;
    }
}

@media (max-width:1100px) {
    main #content .shortcuts ul li a {
        padding: 1.25rem 2.5rem;
    }
}

@media (max-width:1023.98px) {
    .mainvisual .cycle-slideshow {
        height: 45rem;
    }

    .mainvisual .cont-box {
        top: 65%;
    }

    .section01 .container {
        display: block;
    }

    .section01 .con_area, .section01 .right_area, .section02 .left_area, .section02 .right_area {
        max-width: inherit;
    }

    .section02 .container .left_area {
        margin-bottom: 3rem;
    }

    .section02 .container .left_area h2 {
        margin-bottom: 1rem;
    }

    .section02 .container .right_area ul li p.tit {
        font-size: 2.2rem;
    }

    .section02 .container .right_area ul li p.desc {
        padding-left: 3rem;
        border-left: 2px solid #fff;
    }

}

@media (max-width:950px) {
    .mainvisual .cycle-slideshow {
        height: 55rem;
    }

    main #content .shortcuts ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        gap: 1rem;
    }

    .mainvisual .cont-box {
        position: absolute;
        /* left: 5rem; */
        z-index: 202;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        bottom: 1rem;
    }

    main #content .shortcuts {
        position: absolute;
        width: 100%;
        margin: 1.5rem 0 7rem;
        bottom: 0;
        color: #fff;
        z-index: 2;
        font-size: 1.7rem;
    }

    .section.bg_img {
        padding: 3rem 6rem;
    }

    .section02 .container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        color: #fff;
    }

    .section03 .right_area {
        min-height: auto;
    }

    .section03 .right_area .sec_tit {
        margin-top: 0;
    }

    .section02 .container .right_area ul li p.desc br {
        display: none;
    }

    .section02 .container .right_area ul li p.tit {
        flex: 1 1 20%;
        font-weight: 600;
    }

}

@media (max-width:767.98px) {
    .mainvisual .cycle-slideshow {
        height: 50rem;
    }

    .mainvisual .slide .txt-box {
        top: 22%;
        text-align: center;
    }

    .mv_banner a {
        width: 90px;
        height: 90px;
        font-size: 1.6rem;
    }

    .mainvisual .slide .txt-box .tit {
        font-size: 3rem;
    }

    .mainvisual .slide .txt-box .content {
        font-size: 1.8rem;
        margin-top: 10px;
        line-height: 1.5;
        word-break: keep-all;
    }

    .section01 .con_area .slider_info h2 {
        font-size: 3rem;
    }

    .section02 .container .left_area h2 {
        font-size: 3.3rem;
    }
}

@media (max-width:620px) {
    .mainvisual .slide .txt-box {
        width: calc(90% - 90px);
    }

    .mainvisual .cycle-slideshow .slide {
        width: 100%;
        height: 100%;
        background-size: cover !important;
        background-position: 75%;
        background-repeat: no-repeat;
    }

    .section01 .con_area .slider_info h2 {
        font-size: 3rem;
    }

    .section01 .con_area .slider_info .desc p {
        font-size: 1.8rem;
    }

    .section02 .container .left_area h2 {
        font-size: 3rem;
    }

    .section02 .container .left_area p {
        font-size: 1.8rem;
    }

    .section02 .container .right_area ul li p.tit {
        font-size: 2rem;
    }




    
    
    

    .section03 .left_area ul li div.date span.day {
        font-size: 2.3rem;
    }

    .section03 .left_area ul li div.date span {
        font-size: 1.6rem;
    }

    .section03 .left_area .sec_tit a.more {
        font-size: 1.8rem;
    }

    .section .container .sec_tit h2 {
        font-size: 2.8rem;
    }

    .section04 .community li a p.tit {
        font-size: 1.8rem;
    }

    .footer .footer_inner .right .inquiry {
        font-size: 1.5rem;
    }

    .footer .footer_inner .left .footer_info {
        font-size: 1.5rem;
    }

    .section.bg_img {
        padding: 3rem 2rem;
    }

    .section06 .container {
        padding: 4rem 2.5rem;
    }

    #content+.section01 {
        padding: 4rem 0;
    }

    .section {
        padding: 0 0 4rem 0;
    }

    .section03 .right_area .related li {
        padding: 2rem;
    }

    .section03 .right_area .related li a img {
        width: 35px;
        height: 35px;
        margin-bottom: 0.5rem;
    }

    .section03 .right_area .sec_tit {
        margin-bottom: 2.5rem;
    }

    main #content .shortcuts ul li a {
        padding: 1.25rem 2rem;
    }

    .section02, .section05 {
        margin-bottom: 4rem;
    }


    .section02 .container .right_area ul li p.desc {
    	font-size: 1.5rem;
        flex: 1 1 100%;
        padding-left: 1.5rem;
        border-left: 2px solid #fff;
        margin-top: 1rem;
    }

    .section05 .sec_tit p {
        font-size: 1.8rem;
        margin: 1.5rem 0 2rem 0;
    }

    .section06 .container .sec_tit {
        margin-bottom: 0;
    }

    .section06 .container .sec_tit p {
        font-size: 1.8rem;
    }

}

@media (max-width: 500px) {
    .section01 .con_area .slider_list li .card_item .des {
        padding: 5rem 3rem;
    }
}

@media (max-width:480px) {
    .main {
        margin-top: 10rem;
    }

    main #content .shortcuts {
        position: absolute;
        width: 100%;
        margin: 1.5rem 0 8rem;
        bottom: 0;
        color: #fff;
        z-index: 2;
        font-size: 1.7rem;
    }
    
    main #content .shortcuts .container ul li span img {
        display:none;
    }

    .mv_banner a {
        width: 80px;
        height: 50px;
    }

    .mv_banner i.big {
        display: none;
    }

    .mainvisual {
        height: auto;
    }

    .mainvisual .cont-box {
        top: auto;
        bottom: 3rem;
    }

    .mainvisual .slide .txt-box .content {
        font-size: 1.6rem;
        line-height: 24px;
    }

    .mainvisual .slide .txt-box .tit {
        font-size: 2.5rem;
        line-height: 28px;
    }


}

@media (max-width: 430px) {
    .section01 .con_area .slider_list li .card_item .des {
        padding: 3rem;
    }
}

@media (max-width: 1240px) {
    main #content .shortcuts ul li {
        width: 100%;
        height: auto;
    }
	main #content .shortcuts {
        font-size: 1.4rem;
    }
    main #content .shortcuts ul li a {
        padding: 1.25rem 2.5rem;
    }
    .topmenu.en {
        gap: 1rem;
    }
    .topmenu.en .depth1>a>span {
        padding-left: .5rem;
        padding-right: .5rem;
        font-size: 1.7rem;
    }
}
/* =======================================================================================
모달 버튼
======================================================================================= */
/* 과정수료 모달 */
.modal__btn {
    width: 100%;
    padding: 1.5rem 1rem;
    color: #fff;
    border-top: 1px solid #ccc;
    background: var(--darkOrange);
}

.modal_cont.alert_msg .course_completion {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal_cont.alert_msg .course_completion img {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
}

.modal_cont.alert_msg .course_completion p {
    margin-left: 0.5rem;
}

/* =======================================================================================
알림 박스
======================================================================================= */
.alrim_wrap {
    position: relative;
}

.alrim_wrap .alrimBox {
    position: absolute;
    min-width: 35rem;
    max-width: 38rem;
    right: 0;
    padding: 2.5rem;
    background-color: #fff;
    border-radius: 1.5rem;
    z-index: 100;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.alrim_wrap .alrimBox .alrimBox_close {
    position: absolute;
    right: 2rem;
    top: 1.5rem;
}

.alrim_wrap .alrimBox .alrimBox_head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1.25rem 0 .5rem;
    border-bottom: 2px solid #ddd;
    margin-bottom: .5rem;
}

.alrim_wrap .alrimBox .alrimBox_head p {
    font-size: 1.8rem;
    font-weight: 600;
}

.alrim_wrap .alrimBox .alrimBox_head small {
    color: var(--red);
}

.alrim_wrap .alrimBox .alrimBox_list li {
    padding: 1rem 0 !important;
    border-bottom: 1px dashed #ddd;
    line-height: 1.3;
}

.alrim_wrap .alrimBox .alrimBox_list li:last-child {
    border-bottom: none;
}

.alrim_wrap .alrimBox .alrimBox_list li .date {
    font-size: 1.3rem;
    font-weight: 600;
    text-align: right;
}

.alrim_wrap .alrimBox .alrimBox_list li a {
    font-size: 1.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}