@charset "UTF-8";

#header {background: transparent; border-bottom: 0; position: fixed;}
#header::before{background: transparent;}
#header.sub-menu-open::after{display: none;}
#header .gnb .ul-sub-menu .item a{color: #fff;}


#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-top: 80px; margin: 0 auto;}

.contents.video {padding-bottom: 200px;}


.contents .inner .top {margin-bottom: 30px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}
.contents .inner .top .filter {display: -webkit-flex; display: flex; justify-content: start; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.contents .inner .top .filter li {display: -webkit-flex; display: flex; justify-content: start; align-items: center; margin-right: 20px;}
.contents .inner .top .filter li:last-child {margin-right: 0;}
.contents .inner .top .filter li::before {display: inline-block; content: ''; width: 4px; height: 4px; border-radius: 50%; margin-right: 8px; background-color: #515151;}
.contents .inner .top .filter li.active::before {content: url("../img/icon/check.png"); width: 11px; height: auto; border-radius: 0; background-color: transparent;}
.contents .inner .top .filter li a {font-weight: 300; font-size: 0.875em; color: rgba(81,81,81,1);}
.contents .inner .top .right {display: -webkit-flex; display: flex; justify-content: end; align-items: center;}
.contents .inner .top .btn {width: 100px; height: 40px; padding: 7px 10px; border-radius: 20px; border: 1px solid #707070; background: var(--white); color: #515151;}
.contents .inner .top .list_convert {margin-left: 60px;}
.contents .inner .top .list_convert .item {width: 40px; height: 40px; cursor: pointer; font-size: 1.5em; color: #707070; border: var(--border-solid); display: inline-block;}
.contents .inner .top .list_convert .item.active {color: var(--highlight);}
.contents .inner .top .list_convert .item img {display: block; margin: 0 auto;}


.video-list.gallery {position: relative; display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.video-list.gallery .box {width: calc((100% - 100px)/3); margin-right: 50px; margin-bottom: 70px;}
.video-list.gallery .box:nth-last-child(-n+3) {margin-bottom: 0;}
.video-list.webzine .box {margin-bottom: 70px;}
.video-list.webzine .box ul .item {position: relative; width: 100%; display: -webkit-flex; display: flex; justify-content: start; align-items: start;}
.video-list .box ul .item .video-prev {position: relative; border: var(--border-solid);}
.video-list.gallery .box ul .item .video-prev {border-bottom: 0;}
.video-list.gallery .box ul .item .video-prev .thumb {display: block; width: 100%; height: 206px;}
.video-list.webzine .box ul .item .video-prev .thumb {display: block; width: 309px; height: 174px;}
.video-list .box ul .item .video-prev .thumb img {display: block; width: 100%; height: 100%; object-fit: cover;}
.video-list .box ul .item .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);}
.video-list .box ul .item .video-prev button {width: 40px; height: 40px; border-radius: 50%; color: var(--white); font-size: 1.250em;}
.video-list .box ul .item .video-prev .expand {background: var(--highlight); position: absolute; bottom: 6px; right: 58px;}
.video-list .box ul .item .video-prev .expand img {display: block; margin: 0 auto;}
.video-list .box ul .item .video-prev .like {background: #000; position: absolute; bottom: 6px; right: 6px;}
.video-list .box ul .item .video-prev .like.on {background: #FE5F75;}

.video-list .box ul .item .txt_box {border: var(--border-solid);}
.video-list.webzine .box ul .item .txt_box {width: calc(100% - 309px); height: 176px; position: relative; border-left: 0;}
.video-list.gallery .box ul .item .txt_area {padding: 30px 20px 0; position: relative;}
.video-list.webzine .box ul .item .txt_area {padding: 30px 40px 0;}
.video-list .box ul .item .txt_area .title {height: 3em; font-weight: 700; font-size: 1.438em; color: rgba(61,61,61,1); margin-bottom: 14px;}
.video-list.webzine .box ul .item .txt_area .title {height: auto; line-height: 27px;}
.video-list .box ul .item .txt_area .desc {font-weight: 300; font-size: 1.125em; color: rgba(61,61,61,1); margin-bottom: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.video-list.webzine .box ul .item .txt_area .desc {line-height: 21px; margin-bottom: 30px;}
.video-list.webzine .title.ellipsis {-webkit-line-clamp: 1;}
.video-list .box ul .item .txt_area .tag-box {width: 100%; max-width: 100%; font-weight: 200; font-size: 1.125em; color: rgba(115,115,115,1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.video-list.webzine .box ul .item .txt_area .tag-box {line-height: 21px;}
.video-list .box ul .item .txt_area .tag-box li {margin-right: 20px; display: inline;}
.video-list .box ul .item .txt_area .tag-box li:last-child {margin-right: 0; text-overflow: ellipsis; white-space: nowrap;
    overflow: hidden;}
.video-list .box ul .item .progress {margin: 30px 0; text-align: right;}
.video-list.webzine .box ul .item .progress {margin: 0; margin-top: 24px; width: 100%; position: absolute; bottom: 0;}
.video-list .box ul .item .playbar {width: 100%; height: 6px; background: #A8A8A8;}
.video-list .box ul .item .playbar .renderer {height: 6px; background: #FB4953;}
.video-list .box ul .item .progress .progressNum {padding-right: 6px;}
.video-list.webzine .box ul .item .progress .progressNum {margin-top: -30px;}





@media screen and (max-width:1200px){
    .visual {padding: 0 50px; padding-top: 80px;}
    .videotab-wrap {padding: 0 50px;}
    .contents {padding: 0 50px; padding-top: 80px;}
    .video-list.gallery .box ul .item .video-prev .thumb {height: 154px;}
}

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

@media screen and (max-width:992px){
    .contents.video {padding-bottom: 150px;}

    .contents .inner .top .btn {height: auto;}

    .videotab-wrap .tab li {padding: 0 30px;}
    .videotab-wrap .tab .btn_prev {left: 108px;}

    .video-list.gallery .box {width: calc((100% - 8%)/3); margin-right: 4%; margin-bottom: 4%;}
    .video-list.gallery .box ul .item .video-prev .thumb {height: 240px;}
    .video-list.webzine .box ul .item .video-prev .thumb {width: 220px; height: 164px;}
    .video-list.webzine .box ul .item .txt_box {width: calc(100% - 220px); height: 166px;}
    .video-list.gallery .box ul .item .txt_area {padding: 20px 20px 0;}
    .video-list.webzine .box ul .item .txt_area {padding: 22px 30px 0;}
    .video-list .box ul .item .video-prev .timer {width: 52px;}
    .video-list .box ul .item .video-prev button {width: 36px; height: 36px;}
    .video-list .box ul .item .video-prev .expand {right: 48px;}
    .video-list .box ul .item .video-prev .expand img {width: 18px;}
}

@media screen and (min-width:769px){
    .video-list.gallery .box:nth-child(3n) {margin-right: 0;}
}

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

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

    /* .contents .inner .top .list_convert {display: none;} */

    .video-list.gallery .box {width: calc((100% - 4%)/2);}
    .video-list.gallery .box:nth-child(2n) {margin-right: 0;}
    .video-list.gallery .box ul .item .video-prev .thumb {height: 173px;}
}

@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: 0 16px; padding-top: 80px;}
    .contents.video {padding-bottom: 100px;}

    .contents .inner .top {-webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .contents .inner .top .filter {width: 100%; margin-bottom: 20px;}
    .contents .inner .top .filter li {margin-right: 10px;}
    .contents .inner .top .right {width: 100%; justify-content: space-between;}

    .video-list.gallery .box {width: calc((100% - 2%)/2); margin-right: 2%; margin-bottom: 30px;}
    .video-list.gallery .box ul .item .video-prev .thumb {height: 120px;}
    .video-list.webzine .box ul .item .video-prev .thumb {width: 120px;}
    .video-list.gallery .box ul .item .txt_area {padding: 10px 12px 0;}
    .video-list.webzine .box ul .item .txt_box {width: calc(100% - 120px);}
    .video-list .box ul .item .txt_area .tag-box {font-size: 1em;}
    .video-list .box ul .item .txt_area .tag-box li {margin-right: 6px;}
}