@charset "UTF-8";

#header {background: transparent; border-bottom: 0; position: fixed;}

#header .logo-area .logo {display: none;}
#header .logo-area .logo-white {display: block;}

#header .logo-area2 .logo path {fill: var(--white);}

#header .gnb .ul-main-menu>.item .main-menu {color: var(--white);}

#header.shrink {background: var(--white); border-bottom: var(--border-solid);}

#header.shrink .logo-area .logo {display: block;}
#header.shrink .logo-area .logo-white {display: none;}

#header.shrink .logo-area2 .logo path {fill: #1C0C48;}

#header.shrink .gnb .ul-main-menu>.item .main-menu {color: #111111;}

#header .btn-m-menu {color: var(--white);}
#header.shrink .btn-m-menu {color: var(--gray80);}



.visual {position: relative; width: 100%; height: 500px; background: url("../img/videoStudy/visual.png") no-repeat center; background-size: cover; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-direction: column; padding-top: 121px;}
.visual .title {text-align: center; font-weight: 300; font-size: 2.5em; color: rgba(255,255,255,1); margin-bottom: 30px;}

.searchBox {width: 100%; max-width: 400px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; position: relative; margin: 0 auto;}
.searchBox select {
    width: 200px;
    background-image: url("../img/icon/select-down.png"), linear-gradient(rgb(250 248 255), rgb(250 248 255));
    border-radius: 6px 0 0 6px; /* border-radius: top-left top-right bottom-right bottom-left */
    font-weight: 500;
}
/* .searchBox .search-inp {width: 400px; padding-right: 60px; background-image: url("../img/icon/search.png"), linear-gradient(var(--white), var(--white)); background-repeat: no-repeat; background-position: right 20px center, center; border-radius: 6px; font-size: 1.125em;} */
.searchBox .search-inp {width: 400px; padding-right: 56px; font-size: 1.125em;}
.searchBox .search-inp::placeholder {font-size: 16px;}
.btn-search {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 54px; height: 54px; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.btn-search img {display: block;}


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


.searchResult {padding: 24px 0; text-align: center; border-bottom: var(--border-solid); font-size: 1.375em; color: #373737; font-weight: 300; line-height: 1.4;}


.contents {position: relative; padding: 80px 0; margin: 0 auto;}


.recommend {position: relative; border-bottom: var(--border-solid);}
.recommend .inner {position: relative;}
.btn-text {width: 100px; height: 40px; padding: 7px 10px; border-radius: 20px; border: 1px solid #707070; background: var(--white); color: #515151; position: absolute; top: 0; right: 0;}
.recommend_h {width: calc(100% - 116px); font-size: 2.188em; color: #1c1c1c; margin-bottom: 55px;}
.recommend_h span {font-weight: 700;}
.recommend-swiper {padding: 0 100px; width: calc(100% + 200px); position: relative; left: 50%; transform: translateX(-50%);}
.recommend-swiper::before {display: block; content: ''; width: 100px; height: 100%; background: var(--white); position: absolute; top: 0; left: 0; z-index: 2;}
.recommend-swiper::after {display: block; content: ''; width: 100px; height: 100%; background: var(--white); position: absolute; top: 0; right: 0; z-index: 2;}
.ul-recommend .item {position: relative; width: 230px !important;}
.recommend_video-prev {width: 100%; height: auto; padding-bottom: 56.25%; position: relative; border: var(--border-solid);}
.recommend_video-prev .thumb {display: block; width: 100%; height: 100%;}
.recommend_video-prev .thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.recommend_video-prev .timer {width: 60px; height: 24px; line-height: 24px; background: rgba(0,0,0,0.8); position: absolute; bottom: 6px; left: 6px; text-align: center; font-weight: 300; font-size: 0.875em; color: rgba(255,255,255,1);}
.recommend_subject {font-size: 1.250em; font-weight: 700; margin: 12px 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.recommend_tag-box {width: 100%; font-weight: 200; font-size: 1.125em; color: rgba(115,115,115,1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.recommend_tag-box .item {display: inline; margin-right: 20px;}
.recommend_tag-box .item:last-child {margin-right: 0;}
.recommend_tag-box .item a {color: rgba(115,115,115,1);}

.recommend-prev, .recommend-next {width: 55px; height: 55px; border: 1px solid var(--highlight); background: var(--white); border-radius: 50%; margin-top: 0; transform: translateY(-50%);}
.recommend-prev {left: 0;}
.recommend-next {right: 0;}


.popular {font-weight: 700;}


.cate {padding: 80px 0 120px;}
.cate_h {font-size: 2.188em; color: #1c1c1c; margin-bottom: 30px; text-align: center; font-weight: 700;}
.cate_list_h {border-bottom: 2px solid var(--highlight); margin-bottom: 30px; height: 60px;}
.cate_list_h span {display: inline-block; width: 210px; height: 60px; padding: 16px 0; text-align: center;font-size: 1.125em; font-weight: 700; color: var(--white); border-radius: 8px 8px 0 0; background: var(--highlight);}

.cate_list {margin-bottom: 40px; position: relative;}
.cate_list:last-child {margin-bottom: 0;}

.ul-cate-video {width: 100%; display: -webkit-flex; display: flex; justify-content: start; align-items: start;}
.ul-cate-video .cate_video-list {width: calc((100% - 40px)/5); margin-right: 10px;}
.ul-cate-video .cate_video-list:last-child {margin-right: 0;}
.cate_video-prev {width: 100%; height: auto; padding-bottom: 56.25%; position: relative; border: var(--border-solid);}
.cate_video-prev .thumb {display: block; width: 100%; height: 100%;}
.cate_video-prev .thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.cate_video-prev .timer {width: 60px; height: 24px; line-height: 24px; background: rgba(0,0,0,0.8); position: absolute; bottom: 6px; left: 6px; text-align: center; font-weight: 300; font-size: 0.875em; color: rgba(255,255,255,1);}
.cate_subject {font-size: 1.250em; font-weight: 700; margin: 12px 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cate_tag-box {width: 100%; font-weight: 200; font-size: 1em; color: rgba(115,115,115,1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cate_tag-box .item {display: inline; margin-right: 20px;}
.cate_tag-box .item:last-child {margin-right: 0;}
.cate_tag-box .item a {color: rgba(115,115,115,1);}


.cate-swiper {padding: 0 100px; width: calc(100% + 200px); position: relative; left: 50%; transform: translateX(-50%);}
.cate-swiper::before {display: block; content: ''; width: 100px; height: 100%; background: var(--white); position: absolute; top: 0; left: 0; z-index: 2;}
.cate-swiper::after {display: block; content: ''; width: 100px; height: 100%; background: var(--white); position: absolute; top: 0; right: 0; z-index: 2;}
.ul-cate .item {position: relative; width: 230px !important;}

.cate-prev, .cate-next {width: 55px; height: 55px; border: 1px solid var(--highlight); background: var(--white); border-radius: 50%; margin-top: 0; transform: translateY(-50%);}
.cate-prev {left: 0;}
.cate-next {right: 0;}





@media screen and (max-width:1200px){
    .visual {padding: 0 50px; padding-top: 80px;}
    .videotab-wrap {padding: 0 50px;}
    .contents {padding: 80px 130px;}
    .cate {padding: 80px 130px 120px;}

    .recommend-swiper {padding: 0 80px; width: calc(100% + 160px);}
    .recommend-swiper::before {width: 80px;}
    .recommend-swiper::after {width: 80px;}
    .cate-swiper {padding: 0 80px; width: calc(100% + 160px);}
    .cate-swiper::before {width: 80px;}
    .cate-swiper::after {width: 80px;}
}

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

@media screen and (max-width:992px){
    .videotab-wrap .tab li {padding: 0 30px;}
    .videotab-wrap .tab .btn_prev {left: 108px;}

    .recommend_h {margin-bottom: 30px;}
    .btn-text {height: auto;}
    
    .cate_list_h {height: 54px;}
    .cate_list_h span {width: 180px; height: auto;}
}

@media screen and (max-width:768px){
    .videotab-wrap .tab li {padding: 0 20px;}

    .contents {padding: 60px 96px;}
    .cate {padding: 60px 96px 120px;}

    .searchBox select {width: 33.3%;}
    /* .searchBox .search-inp {width: calc(100% - 33.3%);} */

    .recommend_h {margin-bottom: 20px;}

    .cate_list_h span {width: 150px;}
}

@media screen and (min-width: 481px) {
    .searchBox select {border-right: 0;}
}

@media screen and (max-width:480px){
    .visual {padding: 0 16px; height: 560px; padding-top: 80px;}

    .searchBox select {width: 100%; border-radius: 6px 6px 0 0; border-bottom: 0;}
    .searchBox .search-inp {width: 100%;}

    .videotab-wrap {padding: 0 16px;}
    .videotab-wrap .home {margin-right: 20px;}
    .videotab-wrap .tab .btn_prev {left: 86px;}

    .contents {padding: 40px 16px;}
    .cate {padding: 40px 16px 70px;}

    .recommend_h {font-size: 1.9em; margin-bottom: 16px;}

    .recommend-swiper, .cate-swiper {padding: 0; width: 100%;}
    .recommend-swiper::before, .recommend-swiper::after, .cate-swiper::before, .cate-swiper::after {display: none;}
    .recommend-prev, .recommend-next, .cate-prev, .cate-next {width: 26px; height: 26px;}
    .recommend-next, .cate-next {top: auto; bottom: 0; transform: translateY(0); right: 16px;}
    .cate-next {bottom: -40px;}
    .recommend-prev, .cate-prev {top: auto; bottom: 0; transform: translateY(0); left: auto; right: 52px;}
    .cate-prev {bottom: -40px;}
    .recommend-next:after, .recommend-prev:after, .cate-next:after, .cate-prev:after {font-size: 14px;}

    .ul-recommend, .ul-cate-video {position: static;}
    .ul-recommend {padding-bottom: 50px;}
    .ul-recommend .item {width: calc((100% - 10px)/2) !important;}

    .cate_list_h span {width: 120px;}
}