@charset "UTF-8";

/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src:url("/common/font/PretendardVariable.woff2") format('woff2-variations');
}


body,html { text-size-adjust:none; }
html { scroll-behavior: smooth; }

/* base */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,a { margin:0; padding:0; font-weight:normal; word-break:keep-all; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color:#eee; letter-spacing: -.03em; font-weight:400; font-size:13px; line-height:1.4; }
dl,ul,ol,menu,li { list-style:none; }
img { border:0; height:auto; line-height:100%; vertical-align:top; outline:none; text-decoration:none; }
iframe { border:0; margin:0; padding:0; }
button { border:none; background-color:transparent; cursor:pointer; border-radius:5px; transition:all .2s; }
input::placeholder,textarea::placeholder { color:#aaaaba; }
input,select,textarea { color:#222; }
input[type=text],input[type=password],input[type=file],input[type=tel],input[type=number],input[type=email], input[type=date] { box-sizing:border-box; border:1px solid #000; height:24px; vertical-align:middle; background:#fff; padding:0 10px; }
input:disabled,textarea:disabled,input:read-only, textarea:read-only { background:#eee; border:1px solid #d5d5d5; }
input[type=number] { padding:0; text-align:center; padding-left:10px; }
textarea { border:1px solid #d5d5d5 ;padding:20px; box-sizing:border-box; background:#fbfbfb; width:100%; border-radius:5px; }
input[type=text]:focus,input[type=password]:focus,textarea:focus,input[type=tel]:focus,input[type=email]:focus,select:focus,input[type=number]:focus,input[type=date]:focus { border:1px solid #34a2ff; outline:transparent; }
input:read-only:focus { border:1px solid #d5d5d5; }
table { border-collapse:collapse; border:0; border-spacing:0; width:100%; }
caption, legend { text-indent:-9999px; overflow:hidden; height:0; }
em,address { font-style:normal; }
a { text-decoration:none; transition:all .2s; }
a:hover { color:#34a2ff; }
* { box-sizing:border-box; }

/* form 요소 디자인 */
label { cursor:pointer; transition:all .2s; }
label:hover { color:#34a2ff; }

/* 기본테이블 */
table { border-top:1px solid #666; border-bottom:1px solid #666; }
table th,table td { padding:8px; border-top:1px solid #666; text-align:left; font-size:12px; }
table th { border-top:none; font-weight:600; text-align:center; }

#wrapper { position:relative; display:flex; flex-wrap:wrap; width:100%; height:100%; overflow:hidden; }
#wrapper header { display:flex; align-items:center; width:100%; height:30px; background:#24262a; padding-left:20px; border-bottom:1px solid #444; }
#wrapper header h1 { padding-top:3px; }
#wrapper header h2 { color:#fff; font-size:14px; padding-right:95px; width:calc(100% - 95px); text-align:center; }
#wrapper .video_container { width: calc(100% - 320px); height:auto; background:#000; transition:all .3s; }
#wrapper .video_container.close { width: calc(100% - 13px); }
#wrapper .video_player { width:100%; height:514px; }
#wrapper .lecture_info { position:relative; height:85px; background:#323232; padding:17px 20px 0 20px; }
#wrapper .lecture_info dl { display:flex; }
#wrapper .lecture_info dl:last-child { border-top:1px solid #555; margin-top:8px; padding-top:8px; }
#wrapper .lecture_info > a { position:absolute; right:20px; bottom:12px; background:#111; border-radius:30px; padding:2px 12px 2px 15px; font-size:12px; color:#eee; }
#wrapper .lecture_info > a:hover { color:#34bfff; background:#000; }
#wrapper .lecture_info > a:after { content:" +" }
#wrapper .lecture_info dt { color:#989fb1; width:50px; }
#wrapper .course_setup { position:absolute; right:0; bottom:0; display:flex; width:320px; height:100%; background:#151a23; transition:all .3s; }
#wrapper .course_setup.close { right:-307px; }
#wrapper .course_setup .btn_slide { display:block; height:100%; width:13px; background:#27282b url(//s3.unistudy.co.kr/images/pc/player/btnSlide_close.png) no-repeat center; border-left:1px solid #444; text-indent:-9999px; overflow:hidden; }
#wrapper .course_setup .btn_slide:hover { background:#373c40 url(//s3.unistudy.co.kr/images/pc/player/btnSlide_close.png) no-repeat center; }
#wrapper .course_setup .btn_slide.open { background:#202224 url(//s3.unistudy.co.kr/images/pc/player/btnSlide_open.png) no-repeat center; }
#wrapper .course_setup .btn_slide.open:hover { background:#373c40 url(//s3.unistudy.co.kr/images/pc/player/btnSlide_open.png) no-repeat center; }
#wrapper .course_content { position:relative; padding:30px 20px 30px; width:308px; }
#wrapper .tabContent input[type=checkbox] { width:15px; height:15px; vertical-align:-3px; margin-right:5px; accent-color:#0082ff; }

#wrapper .course_content .tabMenu {display:flex; gap:5px; margin-bottom:20px;}
#wrapper .course_content .tabMenu li {flex:1;}
#wrapper .course_content .tabMenu a {display:block; border:1px solid #ccc; width:100%; height:28px; border-radius:3px; font-size:14px; text-align:center; padding-top:4px; color:#fff; }
#wrapper .course_content .tabMenu a.on { background:#fff; border:1px solid #fff; color:#000; font-weight:700;}
#wrapper .course_content .tabContent { height:100%;}
#wrapper .course_content .tabContent p { font-size:14px; }
#wrapper .course_content .tabContent strong { color:#34a2ff; }
#wrapper .course_content .scroll {margin:0 0 17px; height:340px; overflow:auto; overflow-x:hidden;}
#wrapper .course_content .scroll ul { display:flex; gap:2px; }
#wrapper .course_content .scroll ul a { border:1px solid #555; border-radius:2px; }
#wrapper .course_content .scroll ul a:hover { border:1px solid #999; }
#wrapper .course_content .scroll::-webkit-scrollbar,#wrapper .applyLecture::-webkit-scrollbar { width:8px; }
#wrapper .course_content .scroll::-webkit-scrollbar-track-piece,#wrapper .applyLecture::-webkit-scrollbar-track-piece { background:#303030; }
#wrapper .course_content .scroll::-webkit-scrollbar-thumb,#wrapper .applyLecture::-webkit-scrollbar-thumb {border-radius:8px; background:#777; }
#wrapper .recommendedCourses { position:absolute; left:0; width:320px; bottom:0; height:86px; background:#252d3c; padding:15px 20px 0 20px; }
#wrapper .recommendedCourses dt { color:#989fb1; padding-bottom:3px; }
#wrapper .btn_selectPlay { display:block; background:#332fd0; width:100%; height:37px; border-radius:5px; text-align:center; font-size:15px; font-weight:500; padding-top:8px; color:#fff; }
#wrapper .btn_selectPlay:hover,#wrapper .bookMark a:hover { background:#413df3; }
#wrapper .layer_shortcuts { display:none; position:absolute; right:10px; bottom:10px; width:340px; height:85px; border-radius:5px; background:#fff; overflow:hidden; text-align:left; z-index:100; }
#wrapper .layer_shortcuts h3 { background:#040090; color:#fff; font-weight:600; padding:5px 15px; }
#wrapper .layer_shortcuts ul { display:flex; flex-wrap:wrap; gap:5px; margin:10px 10px 0 20px; }
#wrapper .layer_shortcuts ul li { position:relative; color:#111; width:49%; font-weight:500; font-size:12px; }
#wrapper .layer_shortcuts ul li img { position:absolute; right:20px; }
#wrapper .layer_shortcuts .btn_layerClose { position:absolute; right:10px; top:5px; }
#wrapper .applyLecture h2 { font-size:14px; margin:8px 0; font-weight:700; }
#wrapper .applyLecture { height:306px; overflow:auto; overflow-x:hidden; margin-bottom:10px; }
#wrapper .applyLecture .lectureInfo,#wrapper .applyLecture dl { display:flex; flex-wrap:wrap; }
#wrapper .applyLecture .lectureInfo { border-bottom:1px solid #555; padding-bottom:10px; margin-bottom:12px; }
#wrapper .applyLecture .lectureInfo dl { width:50%; }
#wrapper .applyLecture > dl { border-bottom:1px solid #555; margin-bottom:12px; padding-bottom:10px; }
#wrapper .applyLecture dt { width:50px; color:#989fb1; line-height:1.6; }
#wrapper .applyLecture dd { line-height:1.6; }
#wrapper .course_setup .tabContent li { margin-bottom:3px; padding-top:4px; }
#wrapper .course_setup .tabContent li:first-child a { background:#5e5e68; }
#wrapper .course_setup .tabContent li:first-child a:hover { background:#696986; }
#wrapper .coursePrice { display:flex; justify-content:space-between; }
#wrapper .coursePrice strong { font-size:14px; }

#wrapper .courseReview { border-top:1px solid #fff; }
#wrapper .courseReview dt a { display:block; width:100%; min-height:38px; background:url(//s3.unistudy.co.kr/images/pc/player/slide_up.png) no-repeat 97% center; padding:10px 25px 10px 10px; }
#wrapper .courseReview dt.visible a { background:url(//s3.unistudy.co.kr/images/pc/player/slide_down.png) no-repeat 97% center; }
#wrapper .courseReview dt {  border-bottom:1px solid #555; }
#wrapper .courseReview dd { display:none; padding:10px 10px 20px 10px; border-bottom:1px solid #555; color:#989fb1; }

/*-- 북마크 --*/
.tabContent .top_area {padding-bottom:15px; border-bottom:1px solid #3493F1;}
.tabContent .bookMark {text-align:center;}

.tabContent .ct_btn {width:144px; height:32px; color:#fff; background:#332FD0;}
.tabContent .add_bookmark i {display:inline-block; width:12px; height:13px; margin-left:9px; vertical-align:middle; background:url(//s3.unistudy.co.kr/images/pc/vodPage/ic_bookmark.png) no-repeat 0 / 100%;}

.tabContent .result_list {display:block !important;}
.tabContent .result_list * {font-weight:500;}
.tabContent .result_list .result_item {position:relative; width:100%; padding:10px 10px 10px 0 !important; margin:0 !important; baorder-bottom:1px solid #666;}
.tabContent .result_list .result_item input {width:100%; margin-top:8px; color:#afafbe;}
.tabContent .result_list .item_timeline {display:flex; align-items:center;}
.tabContent .result_list .item_timeline .time_txt {margin-right:10px;}
.tabContent .result_list .item_timeline button[class*=mark_] {width:49px; height:16px; font-size:11px; color:#3493F1; text-align:center; border-radius:2px; border:1px solid #3493F1;}
.tabContent .result_list .item_timeline button.mark_del {color:#a1a5b7; border-color:#a1a5b7;}
.tabContent .result_list .item_timeline button + button {margin-left:5px;}

.tabContent .result_list .result_item .time_txt,
.tabContent .result_list .result_item .subtitle mark {color:#3493f1;}
.tabContent .result_list .result_item .time_txt {line-height:1;}

.tabContent .result_list .result_item .subtitle {padding-right:40px;}
.tabContent .result_list .result_item .subtitle mark {background:none;}
.tabContent .result_list .result_item .btn_bookmark {position:absolute; top:12px; right:9px; width:20px; height:23px; line-height:1; color:transparent; border-radius:0; background:url(//s3.unistudy.co.kr/images/pc/vodPage/btn_bookmark_n.png) no-repeat 0 / 100%;}
.tabContent .result_list .result_item .btn_bookmark.on {background:url(//s3.unistudy.co.kr/images/pc/vodPage/btn_bookmark.png) no-repeat 0 / 100%;}

/*-- AI 자막 검색 --*/
.tabContent .aiSearch {display:flex; justify-content:space-between; align-items:center; height:45px;}
.tabContent .aiSearch .select_box {width:80px; min-width:auto; height:24px; padding:0 0 0 7px; line-height:24px; font-weight:500; border:none; background-position:right -10px center;}
.tabContent .search_area {display:flex; gap:10px; justify-content:flex-end; align-items:center;}
.tabContent .search_area .search_input {display:none; position:relative; width:0;}
.tabContent .search_area .search_input input {width:100%; height:30px; padding-right:42px; font-size:13px; font-weight:500; border-radius:15px;}
.tabContent .search_area .search_input input:focus {border:none;}
.tabContent .search_area .search_input .input_del {position:absolute; top:50%; right:29px; width:13px; height:13px; margin-top:-6px; color:transparent; background:url(//s3.unistudy.co.kr/images/pc/vodPage/ic_del.png) no-repeat 0 / 100%;}
.tabContent .search_area .search_input .input_search {position:absolute; top:50%; right:8px; width:18px; height:18px; margin-top:-9px; color:transparent; background:url(//s3.unistudy.co.kr/images/pc/vodPage/ic_search.png) no-repeat 0 / 100%;}

.tabContent .search_area .search_btn {width:18px; height:18px; line-height:1; color:transparent; background:url(//s3.unistudy.co.kr/images/pc/vodPage/btn_search.png) no-repeat 0 / 100%;}
.tabContent .search_area .search_btn.active {width:15px; height:15px; background:url(//s3.unistudy.co.kr/images/pc/vodPage/btn_close.png) no-repeat 0 / 100%;}

.tabContent .no_result {display:flex; flex-direction:column; justify-content:center; align-items:center; padding-top:65px; text-align:center;}
.tabContent .no_result * {font-weight:500;}
.tabContent .nt_area p {font-size:16px; color:#a1a5b7;}

.tabContent .no_result .nt_area {padding-top:60px;}
/*.tabContent .result_list .nt_area {padding-top:60px; font-weight:500;}*/
.tabContent .no_result .nt_area.no_list {background:url(//s3.unistudy.co.kr/images/pc/vodPage/no_list.png) no-repeat center top /42px 48px;}
/*.tabContent .result_list .nt_area.no_list {background:url(//s3.unistudy.co.kr/images/pc/vodPage/no_list.png) no-repeat center top /42px 48px;}*/
.tabContent .no_result .nt_area.no_bookmark {background:url(//s3.unistudy.co.kr/images/pc/vodPage/no_bookmark.png) no-repeat center top /42px 48px;}
/*.tabContent .result_list .nt_area.no_bookmark {background:url(//s3.unistudy.co.kr/images/pc/vodPage/no_bookmark.png) no-repeat center top /42px 48px;}*/

.tabContent .result_list .result_item {
    position: relative;
    width: 100%;
    padding: 10px 10px 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #666;
}

.tabContent .result_list .nt_area.no_list, .tabContent .result_list .nt_area.no_bookmark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 65px;
    text-align: center;
}


.tabContent .no_result .link_view {color:#fff; text-decoration:underline;}

.tabContent .no_data {padding-top:100px;}
.tabContent .no_data .nt_area {text-align:center;}
.tabContent .no_data .nt_area .ct_btn {margin-top:10px;}

.tabContent .no_result, .tabContent .no_data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 65px;
    text-align: center;
}

#bookmarkList input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

#bookmarkList input[type="text"]:focus {
    outline: none;
    border-color: #4CAF50;
    background-color: #f9f9f9;
}

#bookmarkList input[type="text"]:hover {
    border-color: #999;
}