@charset "UTF-8";

.curriculum {padding-top: 140px;}

.btn-popup {border-radius: 4px; background: #FFE8F4; font-weight: 400; font-size: 1em; color: rgba(117,94,106,1); margin-bottom: 20px;}
.btn-lv {width: 100px; height: 30px;}

.table {width: 100%;}
.table th, .table td {border: var(--border-solid);}

.detail {padding-top: 180px; padding-bottom: 200px;}
.detail .title2 {margin-bottom: 60px;}


.videotab-wrap {border-top: var(--border-solid); border-bottom: var(--border-solid); position: relative; margin-bottom: 80px;}
.videotab-wrap .inner {position: relative;}
.videotab-wrap .tab {font-size: 1.125em; font-weight: 300; white-space: nowrap; overflow-x: auto;}
.videotab-wrap .tab {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.videotab-wrap .tab::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.videotab-wrap .tab li {display: inline-block; min-width: 100px; line-height: 58px; height: 60px; text-align: center; padding: 0px 35px; border-bottom: 4px solid var(--white); cursor: pointer;}
.videotab-wrap .tab li.active {color: var(--highlight); border-color: var(--highlight); font-weight: 700;}
.videotab-wrap .tab .btn_area {min-width: auto; padding: 0; border-bottom: 0;}
.videotab-wrap .tab .btn_prev {position: absolute; left: 0;}
.videotab-wrap .tab .btn_next {position: absolute; right: 0;}
.videotab-wrap .tab .btn_move {background: var(--white); color: var(--highlight); font-size: 1.11em; line-height: 60px; height: 100%; cursor: pointer; z-index: 1;}
.videotab-wrap .tab .prev {padding-right: 30px;}
.videotab-wrap .tab .next {padding-left: 30px;}
.scroll-tab {padding: 0 40px; overflow: hidden;}


.ul-detail .item {margin-bottom: 50px;}
.ul-detail .item:last-child {margin-bottom: 0;}
.ul-detail .item .detail_area {position: relative; padding: 30px 40px; display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap; border: var(--border-solid); border-top: 2px solid var(--highlight);}
.ul-detail .item .detail_area .img_area {display: inline-block; width: 100%; max-width: 106px; margin-right: 30px;}
.ul-detail .item .detail_area .img_area img {display: block; width: 100%;}

.ul-detail .item .detail_area .txt_area ul li {position: relative; margin-bottom: 20px;}
.ul-detail .item .detail_area .txt_area ul .tit {font-size: 1.250em; font-weight: 700; color: #3d3d3d;}
.ul-detail .item .detail_area .txt_area ul .info {font-size: 1.063em;}
.ul-detail .item .detail_area .txt_area ul .learningTime {font-size: 1.063em; color: var(--highlight);}

.ul-detail .item .detail_area .btn_area {display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; align-content: center;}
.ul-detail .item .detail_area .btn_area button {width: 130px; height: 40px; padding: 7px 0; border-radius: 999px; font-size: 1.063em; font-weight: 500; border: 1px solid #707070; background: var(--white); margin-bottom: 12px;}
.ul-detail .item .detail_area .btn_area button:last-child {margin-bottom: 0;}
.ul-detail .item .detail_area .btn_area .btn-register {background: var(--highlight); border: 0; font-weight: 700; color: var(--white);}

.scroll::-webkit-scrollbar {width: 20px; height: 20px;}
.scroll::-webkit-scrollbar-thumb {width: 20px; border-radius: 10px; border: 7px solid transparent;}
.scroll::-webkit-scrollbar-track {width: 20px; border-radius: 10px;}





@media screen and (max-width:1200px){
    .curriculum {padding: 0 50px; padding-top: 140px;}
    .curriculum .table-wrap {overflow-x: auto;}
    .curriculum .table-wrap .table-curriculum {width: 1200px;}
    .detail {padding: 0; padding-top: 180px; padding-bottom: 200px;}
    .detail>.inner {padding: 0 50px;}
    .videotab-wrap {padding: 0 50px;}
}

@media screen and (min-width:993px){
}

@media screen and (max-width:992px){
    .curriculum {padding: 0 50px; padding-top: 80px;}
    .detail {padding: 0; padding-top: 80px; padding-bottom: 150px;}
    .detail .title2 {margin-bottom: 50px;}
    .videotab-wrap {margin-bottom: 50px;}
    .ul-detail .item {margin-bottom: 40px;}
    .ul-detail .item .detail_area .btn_area button {height: auto;}
}

@media screen and (min-width:769px){
    .ul-detail .item .detail_area .txt_area {max-width: calc(100% - 326px);}
    .ul-detail .item .detail_area .btn_area {position: absolute; top: 50%; right: 40px; transform: translateY(-50%);}
    .class-register-form-wrap .area2 .flex-box>*:nth-last-child(-n+2) {margin-bottom: 0;}
}

@media screen and (max-width:768px){
    .detail .title2 {margin-bottom: 40px;}
    .ul-detail .item {margin-bottom: 30px;}
    .ul-detail .item .detail_area {padding: 30px;}
    .ul-detail .item .detail_area .txt_area {max-width: calc(100% - 136px);}
    .ul-detail .item .detail_area .btn_area {width: 100%; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: 20px;}
    .ul-detail .item .detail_area .btn_area button {width: calc((100% - 24px)/3); margin: 0; margin-right: 12px;}
    .ul-detail .item .detail_area .btn_area button:nth-of-type(3n) {margin-right: 0;}
    .ul-detail .item .detail_area .btn_area button:last-of-type {margin-right: 0;}
}

@media screen and (min-width:481px) and (max-width:768px){
}

@media screen and (max-width:480px){
    .curriculum {padding: 0 16px; padding-top: 50px;}
    .detail {padding: 0; padding-top: 80px; padding-bottom: 100px;}
    .detail .title2 {margin-bottom: 30px;}
    .videotab-wrap {padding: 0 16px; margin-bottom: 50px;}
    .detail>.inner {padding: 0 16px;}
    .ul-detail .item .detail_area {flex-direction: column; padding: 20px 16px;}
    .ul-detail .item .detail_area .img_area {margin: 0 auto; margin-bottom: 30px;}
    .ul-detail .item .detail_area .txt_area {max-width: 100%;}
    .ul-detail .item .detail_area .txt_area ul .tit {text-align: center;}
    .ul-detail .item .detail_area .btn_area button {width: calc((100% - 12px)/3); margin-right: 6px;}
}