@charset "utf-8";
/*****************/
/* 전체 공용 css */
/*****************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');

@font-face {
  font-family:'NanumSquareB';
  src:url('font/NanumSquareB.eot');
  src:url('font/NanumSquareB.woff') format('woff'),
       url('font/NanumSquareB.ttf') format('truetype'),
       url('font/NanumSquareB.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'NanumSquare';
  src:url('font/NanumSquare.eot');
  src:url('font/NanumSquare.woff') format('woff'),
       url('font/NanumSquare.ttf') format('truetype'),
       url('font/NanumSquare.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'NanumSquareR';
  src:url('font/NanumSquareR.eot');
  src:url('font/NanumSquareR.woff') format('woff'),
       url('font/NanumSquareR.ttf') format('truetype'),
       url('font/NanumSquareR.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'NanumBarunGothic';
  src:url('font/NanumBarunGothic.eot');
  src:url('font/NanumBarunGothic.woff') format('woff'),
       url('font/NanumBarunGothic.ttf') format('truetype'),
       url('font/NanumBarunGothic.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

html{overflow-y:scroll;}
body, div, p, ul, li{margin:0; padding:0;}
html, body{width:100%; height:100%;}
div{position:relative;}
a{display:block; text-decoration:none;}

/********************/
/* 신규 리스트 css */
/********************/
/* common */
.listNew_wrapAll{width:100%; height:100%; font-family:'NanumBarunGothic'; color:#000;}
.listNew_contentAll{width:1000px; margin:0 auto;}
.listNew_listAll{padding-bottom:10px;}
.listNew_header a{width:100%; height:60px; background-image:url('header.png'); background-repeat:no-repeat;}
.listNew_alignLeft{text-align:left !important;}

/* developelist page */
.listNew_listContainer{width:calc(100% + 2px); display:flex; flex-wrap:wrap;}
.listNew_listBtn{width:calc(20% - 4px); margin:1px; border:1px solid #e22f22;}
.listNew_listBtn a{display:block; width:100%; text-align:center; padding:8px 0px; text-decoration:none; color:#000000;}
.listNew_listBtn a:hover, .listNew_listBtn a.selected{color:#ffffff; background-color:#e22f22}
.listNew_contentDiv{width:100%; margin:20px 0px 20px 0px;}
.listNew_headerTitleTd{width:calc(100% - 360px); font-family:'NanumSquare'; font-weight:700;}
.listNew_sortingTd{width:120px; text-align:right}
.listNew_listTr{width:100%; display:flex;}
.listNew_listTd{display:table; text-align:center; word-break:keep-all;}
.listNew_listText{display:table-cell; vertical-align:middle;}
.listNew_numTd{width:80px; font-family:'NanumSquare'; font-weight:700; }
.listNew_listNumTd{width:150px; color:#009900;}
.listNew_thumbTd{width:120px;}
.listNew_titleTd{width:calc(100% - 430px);}
.listNew_yearTd{width:100px;}
.listNew_contentsTr{height:70px; font-size:13px;}
.listNew_contentsTr .listNew_numTd{font-family:'NanumSquare'; font-weight:700;}
.listNew_contentsTr .listNew_titleTd{text-align:left;}
.listNew_evenTr{background-color:#f9f9f9;}
.listNew_firstTr{border-top:2px solid #e22f22;}
.listNew_lastTr{border-bottom:2px solid #e22f22;}

/* netmaru contents institute page */
.listNew_headerTr{margin-bottom:10px; width:100%; display:flex;}
.listNew_subHeaderTitleTd{width:100%; font-family:'Noto Sans SC', 'NanumSquareR'; font-weight:700; font-size:17px; margin-top:4px;}
.listNew_listHeadTr{border-top:2px solid #e22f22; border-bottom:2px solid #e22f22; margin-top:6px; font-size:14px; min-height:35px; font-family:'NanumSquare'; font-weight:700;}
.listNew_subListTr{min-height:35px; font-size:14px;}
.listNew_subTitleTd{width:calc(100% - 80px);}
.listNew_listText a{text-decoration:none; color:#000000;}
.listNew_listText a:hover{text-decoration:underline;}

/* contents list state page */
.listNew_bigModuleTr{width:100%; border-top:2px solid #e22f22; padding-top:14px; padding-bottom:14px; text-align:center; font-family:'NanumSquare'; font-weight:700; font-size:16px; display:block;}
.listNew_moduleTr{width:100%; display:flex; border-top:2px solid #e22f22; padding-top:12px; padding-bottom:6px;}
.listNew_moduleTd{width:calc(100% - 100px); font-family:'NanumSquare'; font-weight:700; text-align:left; font-size:15px;}
.listNew_listTitleTd{width:calc(100% - 160px);}
.listNew_stateBtnContainer{display:flex; flex-wrap:wrap;}
.listNew_stateBtnTd{width:100px; min-height:35px;}
.listNew_listNumTd .listNew_listText a{color:#009900;}
.listNew_select{width:115px; height:23px;}
.listNew_categorize{color:#e12f22; font-weight:500;}
.listNew_noneTr{width:100%; text-align:center; padding:10px 0px; border-bottom:2px solid #e22f22;}
.listNew_listTr a, .listNew_subListTr a{display:block;}
.listNew_underLine{border-bottom:1px dashed #dddddd;}
.listNew_listStateBtn a{width:80px; text-align:center; display:inline-block; text-decoration:none; border-radius:3px; padding:4px 0px 3px 0px; margin-top:6px; font-size:13px;}
.listNew_htmlState1 a, .listNew_mp4State1 a, .listNew_mp4Category1{border:1px solid #464646; background-color:#464646; color:#ffffff; cursor:default; pointer-events:none;}
.listNew_htmlState2 a{border:1px solid #e22f22; color:#e22f22;}
.listNew_htmlState3 a, .listNew_mp4State4 a, .listNew_mp4Category4{border:1px solid #e22f22; background-color:#e22f22; color:#ffffff;}
.listNew_mp4State2 a, .listNew_mp4Category2{border:1px solid #ffe400; background-color:#ffe400; color:#464646;}
.listNew_mp4State3 a, .listNew_mp4Category3{border:1px solid #368a18; background-color:#368a18; color:#ffffff;}
.listNew_mp4CategoryContainer{display:flex;}
.listNew_mp4Category{width:70px; text-align:center; border-radius:3px; padding:4px 0px 3px 0px; font-size:13px; margin:0px 0px 0px 5px;}
.listNew_learningtimeTotalTitleTd{width:calc(100% - 200px); font-family:'NanumSquare'; font-weight:700;}
.listNew_detailMp4Btn a{width:24px; text-decoration:none; border-radius:3px; text-align:center; margin:6px 2px 0px 2px; padding:3px 0px;}
.listNew_mp4State0{width:26px; margin:6px 2px 0px 2px;}

/* video controlbar */
.listNew_videoWrapAll{width:100%; height:100%;}
#contentsVideo{width:100%; height:100%;}
.listNew_videoControlContainer{position:absolute; left:0px; bottom:0px; width:100%; height:75px; transition:0.3s;}
.listNew_videoControlContainer.selected{bottom:-75px;}
.listNew_controlAll{width:100%; height:75px; background-image:url("controlbar/controlBg.png");}
.listNew_controlTop{width:calc(100% - 20px); height:35px; margin:0px 10px;}
.listNew_controlBottom{width:100%; height:40px; display:flex; justify-content:space-between;}
.listNew_controlBottomLeft{display:flex; justify-content:flex-start; margin-top:5px;}
.listNew_controlBottomRight{display:flex; justify-content:flex-End; margin-top:5px;}
.listNew_controlBtn a{display:block; width:25px; height:25px; background-image:url("controlbar/control.png");}
.listNew_startBtn a{background-position:-50px 0px; margin-left:15px;}
.listNew_startBtn a:hover{background-position:-50px -50px;}
.listNew_startBtn a.selected{background-position:0px 0px;}
.listNew_startBtn a.selected:hover{background-position:0px -50px;}
.listNew_replayBtn a{background-position:-100px 0px; margin-left:11px;}
.listNew_replayBtn a:hover{background-position:-100px -50px;}
.listNew_volumeContainer{display:flex;}
.listNew_soundBtn a{background-position:-150px 0px; margin-left:14px;}
.listNew_soundBtn a:hover{background-position:-150px -50px;}
.listNew_soundBtn a.selected{background-position:-200px 0px;}
.listNew_soundBtn a.selected:hover{background-position:-200px -50px;}
.listNew_soundbarContainer{width:0px; height:25px; transition:0.3s; overflow:hidden;}
.listNew_volumeContainer:hover .listNew_soundbarContainer{width:50px;}
.listNew_soundbarBg, .listNew_soundbarTop{position:absolute; left:5px; top:calc((25px - 5px) / 2); width:calc(100% - 10px); height:5px;}
.listNew_soundbarBg{background-color:rgba(255, 255, 255, 0.5); max-width:40px;}
.listNew_soundbarTop{background-color:rgba(255, 255, 255, 1);}
.listNew_soundbarClickArea a{position:absolute; left:5px; top:calc((25px - 15px) / 2); width:calc(100% - 10px); height:15px; background-color:darkblue; opacity:0;}
.listNew_soundbarHead a{position:absolute; left:0px; top:calc((25px - 10px) / 2); width:10px; height:10px; background-color:#ffffff; border-radius:50%; opacity:0; transition:opacity 0.3s;}
.listNew_volumeContainer:hover .listNew_soundbarHead a{opacity:1;}
.listNew_timeContainer{font-size:13px; color:#ffffff; top:3px; margin-left:20px;}
.listNew_keyInfoContainer{/*display:flex; flex-direction:column-reverse;*/}
.listNew_keyBtn a{background-position:-450px 0px; margin-top:2px; margin-right:12px;}
.listNew_keyInfoContainer:hover .listNew_keyBtn a{background-position:-450px -50px;}
.listNew_keyInfoAll{position:absolute; left:calc((25px - 200px) / 2); bottom:60px; width:200px; padding:5px; background-color:rgba(255, 255, 255, 0.8); font-size:13px; border-radius:3px; display:none;}
.listNew_keyInfoContainer:hover  .listNew_keyInfoAll{display:block;}
.listNew_keyInfoTitle{width:100%; text-align:center; font-family:'NanumSquare'; font-weight:700; font-size:14px; margin-bottom:5px;}
.listNew_keyInfoContentsContainer{width:100%; display:flex; margin-bottom:5px;}
.listNew_keyInfoContentsTitle{width:100px; font-weight:700;}
.listNew_keyInfoContents{width:calc(100% - 100px);}
.listNew_downloadBtn a{background-position:-400px 0px; margin-right:14px;}
.listNew_downloadBtn a:hover{background-position:-400px -50px;}
.listNew_speedContainer, .listNew_speedBtnContainer{display:flex; flex-direction:column-reverse;}
.listNew_speedContainer{margin-right:16px; top:-14px;}
.listNew_speedBtnContainer{top:-27px; display:none;}
.listNew_speedBtnContainer.selected{display:flex;}
.listNew_speedOnBtn a{display:block; font-size:13px; text-decoration:none; color:#ffffff; opacity:0.5; padding:0px 5px; border:1px solid #ffffff; border-radius:3px;}
.listNew_speedOnBtn a:hover{opacity:1;}
.listNew_speedBtnContainer{background-color:rgba(0, 0, 0, 0.5);}
.listNew_speedBtn a{display:block; font-size:13px; text-decoration:none; color:#ffffff; padding:3px 5px; opacity:0.5;}
.listNew_speedBtn a:hover, .listNew_speedBtn a.selected{opacity:1;}
.listNew_fullscreenBtn a{background-position:-350px 0px; margin-right:11px;}
.listNew_fullscreenBtn a:hover{background-position:-350px -50px;}
.listNew_lockBtn a{background-position:-250px 0px; margin-right:14px;}
.listNew_lockBtn a:hover{background-position:-250px -50px;}
.listNew_lockBtn a.selected{background-position:-300px 0px;}
.listNew_lockBtn a.selected:hover{background-position:-300px -50px;}
.listNew_timebarBg{position:absolute; top:calc((35px - 5px) / 2 + 5px); width:100%; height:5px; background-color:rgba(255, 255, 255, 0.5);}
.listNew_timebarTop{position:absolute; top:calc((35px - 5px) / 2 + 5px); width:100%; height:5px; background-color:rgba(255, 255, 255, 1);}
.listNew_timebarClickArea a{position:absolute; top:calc((35px - 5px) / 2); width:100%; height:15px; background-color:darkblue; opacity:0;}
.listNew_timebarHead a{position:absolute; left:0px; top:calc((35px - 5px) / 2); width:15px; height:15px; background-color:#ffffff; border-radius:50%; opacity:0; transition:opacity 0.3s;}
.listNew_controlTop:hover .listNew_timebarHead a{opacity:1;}

@media screen and (max-width:1000px){
	.listNew_contentAll{width:100%;}
}


.mobileMovie_wrapAll{width:1000px; margin:0 auto; font-size:14px; word-break:keep-all;}
.mobileMovie_titleContainer{width:100%; display:flex; justify-content:space-between; padding:20px 0px 0px;}
.mobileMovie_title{font-family:'NanumSquareR'; font-size:20px; font-weight:700;}
.mobileMovie_subTitle{font-size:14px; margin-top:5px;}
.mobileMovie_contentsContainer{width:100%; margin-top:10px;}
.mobileMovieTr{width:100%; display:flex; min-height:40px; height:auto; padding:5px 0px; border-bottom:1px solid #d9d9d9;}
.mobileMovieTr:first-child{border-top:2px solid #e22f22;}
.mobileMovieTr.last{border-bottom:2px solid #e22f22;}
.mobileMovieTd{display:table;}
.mobileMovieTd.title{width:120px; text-align:center; font-family:'NanumSquareR'; font-weight:700;}
.mobileMovieTd.contents{width:calc(100% - 120px);}
.mobileMovieInfo{font-size:12px; margin-top:5px;}
.middleText{display:table-cell; vertical-align:middle;}
.mobileMovieSubTr{width:100%; display:flex;}
.mobileMovie_fileFinder{width:0px; height:0px;}
.mobileMovie_inputText{width:calc(100% - 60px); margin-right:10px; border:1px solid #d9d9d9; outline:none; font-size:14px; padding:3px;}
.mobileMovie_label{width:70px; text-align:center; cursor:pointer; font-size:14px; color:#ffffff; background-color:#e22f22; padding:5px 0px; font-family:'NanumSquareR';}
.mobileMovie_inputNumber{width:100px; margin-right:10px; border:1px solid #d9d9d9; outline:none; font-size:14px; padding:3px;}
.mobileMovie_radioLabel{margin-right:10px;}
.mobileMovie_btn{margin:0 auto; width:150px; font-family:'NanumSquareR'; font-weight:700; text-align:center; margin-top:20px;}
.mobileMovie_btn.white{margin:0px 0px 0px 0px; width:60px; margin-right:20px;}
.mobileMovie_btn a{background-color:#e22f22; color:#ffffff; padding:10px 0px; text-decoration:none; font-size:18px;}
.mobileMovie_btn.white a{color:#e22f22; border:1px solid #e22f22; background-color:rgba(0, 0, 0, 0); padding:5px 0px 4px; text-decoration:none; font-size:14px;}
.mobileMovieFile{font-size:13px; padding:3px 10px; display:flex; border:1px solid #999999;}
.mobileMovieFileBtn{width:15px; height:15px;}
.mobileMovieFileBtn a{width:100%; height:100%; margin-left:5px;}
.mobileMovieFileBtn a:before, .mobileMovieFileBtn a:after{background-color:#999999; width:100%; height:2px; content:''; position:absolute; margin-top:9px;}
.mobileMovieFileBtn a:before{transform:rotate(45deg);}
.mobileMovieFileBtn a:after{transform:rotate(-45deg);}


.listNew_subListTr .listNew_listTd.listNew_titleTd{text-align:left;}
.listNew_listStateBtn{width:80px; text-align:center; margin:0 auto;}
.listNew_listStateBtn a{width:100%; display:flex; justify-content:center; align-items:center; padding:5px 0px;}
.listNew_listStateBtn.state1 a{border:1px solid #666666; background-color:#666666; color:#ffffff; cursor:default; pointer-events:none;}
.listNew_listStateBtn.state2 a{border:1px solid #e22f22; background-color:#ffffff; color:#e22f22;}
.listNew_listStateBtn.state3 a{border:1px solid #e22f22; background-color:#e22f22; color:#ffffff;}
.listNew_moduleTr.seedgen{margin-top:10px; padding-left:10px; font-size:16px; width:calc(100% - 10px);}