/* 서브페이지 공통 */
#sitemap-wrap {clear:both;}
#sitemap {margin:0 auto 20px; overflow:hidden; background:#fff;}


/* 소셜로그인 버튼 sns_login_logo.png */
.sns-login-wrap {width:380px; margin:0 auto 100px; padding:0; overflow:hidden;}
.sns-login-btn {clear:both; display:block; height:40px; line-height:40px; margin:10px 0; overflow:hidden; border:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;/* box-shadow:3px 3px 5px 3px #eee;*/}
.sns-login-btn em {float:left; display:inline-block; width:32px; height:32px; margin:3px 0 0 3px; overflow:hidden; background-image:url('/_common/images/sns_login_logo.png'); background-repeat:no-repeat;}
.sns-login-btn em.sns-kakao-login-btn {background-position:0px 0px;}
.sns-login-btn em.sns-naver-login-btn {background-position:-32px 0px;}
.sns-login-btn em.sns-facebook-login-btn {background-position:-64px 0px;}
.sns-login-btn em.sns-google-login-btn {background-position:-96px 0px;}
.sns-login-btn span {float:left; display:inline-block; height:38px; line-height:38px; font-size:1.2em; padding:0 0 0 10px;}
.sns-kakao-login-bg {background-color:#fee500 !important; color:#333 !important;}
.sns-naver-login-bg {background-color:#1ec800 !important; color:#fff !important;}
.sns-facebook-login-bg {background-color:#3d5a98 !important; color:#fff !important;}
.sns-google-login-bg {background-color:#fff !important; color:#333 !important;}


/* 사이트맵 */
#sitemap div:nth-child(6n+1) {clear:both;}
#sitemap div {margin:10px; padding:5px; float:left; width:175px; overflow:hidden;}
#sitemap div p a {display:block; font:normal 14px/16px "Nanum Gothic", "나눔고딕", dotum, tahoma, gulim, sans-serif; padding:8px 5px; color:#fff; text-decoration:none; background:#333;}
#sitemap div p a:hover {color:#f80;}
#sitemap div ul {margin:0; padding:0;}
#sitemap div ul li {margin:0; padding:0;}
#sitemap div ul li a {display:block; width:100%; font:normal 12px/16px "Nanum Gothic", "나눔고딕", dotum, tahoma, gulim, sans-serif; padding:7px 5px 7px 5px; color:#111; border:1px solid #ddd; border-top:none; background:#fff; overflow:hidden;}
#sitemap div ul li a:hover {background:#eee;}

@media screen and (max-width:1200px) {
	#sitemap div {clear:none !important;}
	#sitemap div:nth-child(4n+1) {clear:both !important;}
	#sitemap div {width:calc((100% - 80px) / 4);}
}
@media screen and (max-width:736px) {
	#sitemap div {clear:none !important;}
	#sitemap div:nth-child(2n+1) {clear:both !important;}
	#sitemap div {width:calc((100% - 40px) / 2);}
}

/* 도시선택 */
.sel-city {margin:0; padding:0; overflow:hidden;}
.sel-city .sel-city-title {font:bold 12px "나눔고딕", "Nanum Gothic", dotum, tahoma, gulim, sans-serif; color:#fff; margin:0; padding:10px; overflow:hidden; background:#333;}

.sel-city .sel-city-grp {clear:both; margin:0; padding:0; overflow:hidden;}

.sel-city .sel-city-area {float:left; width:185px; margin:10px; padding:0; overflow:hidden;}
.sel-city .sel-city-area .sel-city-top {font:bold 12px "나눔고딕", "Nanum Gothic", dotum, tahoma, gulim, sans-serif; color:#333; margin:0; padding:8px; border:1px solid #ccc; background:#eee;}
.sel-city .sel-city-area .sel-city-gugun {margin:0; padding:0; overflow:hidden; border:1px solid #ccc; border-top:none; background:#fff;}
.sel-city .sel-city-area .sel-city-gugun ol {margin:0; padding:0; overflow:hidden;}
.sel-city .sel-city-area .sel-city-gugun ol li {font:normal 12px "나눔고딕", "Nanum Gothic", dotum, tahoma, gulim, sans-serif; color:#555; margin:0; padding:5px 5px 5px 8px; overflow:hidden;}

.sel-city dl {margin:0; padding:0; overflow:hidden;}
.sel-city dl dt,
.sel-city dl dd {float:left; margin:0; padding:0;}
.sel-city dl dd {padding:0 0 0 3px; *padding:4px 0 0 3px;}


/* 동영상강의 목록 */
.lecture-wrap {clear:both; width:1190px; margin:0 auto 20px; overflow:hidden;}
.lec-wrap {display:block; float:left; width:250px; height:280px; margin:18px 23px; overflow:hidden; background:#f9f9f9; box-shadow:3px 3px 5px 3px #eee; border:1px solid #ddd; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.lec-wrap span {display:inline-block; width:250px; height:145px; overflow:hidden; background-size:cover;}
.lec-wrap span.none {width:248px; height:145px; line-height:145px; font-size:20px; text-align:center;}
.lec-wrap strong {display:inline-block; font-size:1.05em; min-height:19px; max-height:43px; margin:7px 8px 0; line-height:140%; overflow:hidden; word-break:break-all; word-wrap:break-word;}
.lec-wrap .info-wrap {clear:both; margin:0 5px;}
.lec-wrap dl {float:left; width:232px; font-size:12px; margin:3px 3px 0; padding:0; overflow:hidden;/* border:1px solid #f00;*/}
.lec-wrap dl dt,
.lec-wrap dl dd {float:left; font-size:1.2em; color:#777; height:20px; line-height:20px;}
.lec-wrap dl dt {clear:both; width:55px;}
.lec-wrap dl dd {width:175px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lec-wrap .btn-wrap {float:right; text-align:right; margin:8px 8px 0 3px; padding:0; overflow:hidden;/* border:1px solid #00f; background:#aaa;*/}
.lec-wrap .btn-wrap div {margin:0 0 8px;}
.lec-wrap .btn-wrap div:last-child {margin:0;}
.lec-wrap .loading-wrap {display:none; clear:both; text-align:center; margin:0; padding:15px 3px 0; overflow:hidden;}

.v-cate-wrap {clear:both; margin:0 0 10px; padding:0; overflow:hidden;}
.v-cate-wrap ul {margin:0; padding:0;}
.v-cate-wrap ul li {float:left; margin:0; padding:0;}
.v-cate-wrap ul li a {display:block; margin:3px 5px; padding:5px 10px; border:1px solid #ccc;}
.v-cate-wrap ul li a:hover {color:#fff; border:1px solid #000; background:#333;}
.v-cate-wrap ul li a.active {color:#ffd1e1; border:1px solid #000; background:#333;}

@media screen and (max-width:1220px) {
	.lecture-wrap {width:890px;}
}
@media screen and (max-width:925px) {
	.lecture-wrap {width:595px;}
}
@media screen and (max-width:640px) {
	.lecture-wrap {width:calc(100% - 20px);}
	.lec-wrap {float:none; margin:20px auto;}
}

/* 강의대표이미지 */
.lec-def-img {text-align:center; margin:0; padding:0; border:1px solid #ddd; background:url('/_common/images/image_bg.gif') no-repeat 50% 50%;}



/* 동영상 강의 상세보기 및 수강신청 상단 비디오 정보 */
.jv-wrap {width:100%; margin:0; padding:0;}
.jv-info-wrap {width:100%; margin:0; padding:0; overflow:hidden;}
.jv-thumb {float:left; width:280px; margin:0; padding:0;}
.jv-info {position:relative; float:right; width:calc(100% - 290px); margin:0; padding:0 10px 5px; border:1px solid #ddd; overflow:hidden; background:#f9f9f9;}
.jv-info .btn-wrap {position:absolute; right:10px; bottom:10px;}
.jv-conts {clear:both; margin:0; padding:15px;}

.jv-tab {clear:both; margin:25px 0 0; padding:0; overflow:hidden; border-bottom:1px solid #ddd;}
.jv-tab ul {margin:0 0 0 15px; padding:0; overflow:hidden;}
.jv-tab ul li {float:left; margin:0; padding:0; overflow:hidden; border:1px solid #ddd; border-bottom:none;}
.jv-tab ul li:last-child {margin:0 0 0 -1px;}
.jv-tab ul li.active {color:#fff; background:#333;}
.jv-tab ul li a {display:inline-block; padding:8px 15px;}

.jv-thumb span {display:inline-block; width:270px; height:155px; overflow:hidden; background-size:cover; border:1px solid #ddd; box-shadow:3px 3px 5px 3px #eee; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.jv-thumb span.none {width:248px; height:145px; line-height:145px; font-size:20px; text-align:center;}

.jv-info dl {float:left; width:100%; margin:5px 0 0; padding:0; overflow:hidden;/* border:1px solid #f00;*/}
.jv-info dl dt,
.jv-info dl dd {float:left; font-size:15px !important; height:30px; line-height:30px; color:#777;}
.jv-info dl dt.f,
.jv-info dl dd.f {font-weight:bold; color:#333;}
.jv-info dl dt {clear:both; width:60px;}
.jv-info dl dd {width:calc(100% - 60px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.lec-box {clear:both; overflow:hidden; width:calc(100% - 10px); margin:10px; padding:5px; border:1px solid #ccc; box-shadow:2px 2px 3px 2px #eee;}
.lec-box .img {float:left; margin-left:5px; width:55px;}
.lec-box .img p {text-align:center; border:1px solid #ddd; width:48px; height:28px; line-height:28px; background:#f9f9f9;}
.lec-box .img img {display:inline-block; padding:3px 0 0; height:30px;}
.lec-box .frm {float:left; width:50px; text-align:center; line-height:30px;}
.lec-box .title {float:left; width:calc(100% - 190px); line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lec-box-del {float:right; width:70px; text-align:right; margin:5px 5px 0 0; cursor:pointer;}

@media screen and (max-width:680px) {
	.jv-thumb {clear:both; float:none; width:280px; margin:0 auto; padding:0;}
	.jv-info {clear:both; float:none; width:calc(100% - 10px); margin:10px auto 0;}
	.jv-conts {padding:5px;}
	.lec-box {margin:10px 3px;}
}


/* 동영상강의 보기 */
#jv-wrap {width:100%; margin:0 auto; padding:0;}
#jv-header {height:49px; margin:0 auto; padding:0 15px; font-size:16px; font-weight:bold; line-height:49px; border-bottom:1px solid #ccc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#jv-conts-wrap {width:100%; height:calc(100vh - 50px); margin:0; padding:0;}
#jv-conts {float:left; width:calc(100% - 300px); height:calc(100vh - 50px); margin:0; padding:0; overflow:hidden;}
#jv-conts iframe {width:100%; height:calc(100vh - 52px); border:none; margin:0; padding:0; overflow:hidden;}
#jv-side {float:right; width:299px; height:calc(100vh - 50px); margin:0; padding:0; overflow:hidden; border-left:1px solid #ccc;}

#jv-side .lec-side-wrap {display:block; width:280px; height:240px; margin:10px auto 0; overflow:hidden;}
#jv-side .lec-side-wrap span {display:inline-block; width:270px; height:155px; overflow:hidden; background-size:cover; border:1px solid #ddd; box-shadow:3px 3px 5px 3px #eee; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
#jv-side .lec-side-wrap span.none {width:248px; height:145px; line-height:145px; font-size:20px; text-align:center;}
#jv-side .lec-side-wrap .info-wrap {clear:both; position:relative; margin:5px 0 0; overflow:hidden;}
#jv-side .lec-side-wrap .info-wrap a {position:absolute; right:5px; bottom:5px;}
#jv-side .lec-side-wrap dl {float:left; width:270px; margin:5px 0 0; padding:0; overflow:hidden;/* border:1px solid #f00;*/}
#jv-side .lec-side-wrap dl dt,
#jv-side .lec-side-wrap dl dd {float:left; height:22px; line-height:22px;}
#jv-side .lec-side-wrap dl dt {clear:both; width:45px;}
#jv-side .lec-side-wrap dl dd {width:207px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

#jv-side .lec-bookmark {margin:0; padding:8px 0 5px; text-align:center; overflow:hidden;}

#jv-side .lec-flow-wrap {width:280px; height:calc(100vh - 340px); margin:0 auto; padding:0 0 10px; overflow-x:hidden; overflow-y:auto;}
#jv-side .lec-flow-wrap a {display:block; font-size:14px; width:calc(100% - 40px); margin:-1px 0 0 5px; padding:10px 8px; overflow:hidden; border:1px solid #ddd; box-shadow:-2px -2px 3px 2px #eee inset;}
#jv-side .lec-flow-wrap a span {display:inline-block; width:238px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#jv-side .lec-flow-wrap a:first-child {margin:5px 0 0 5px; border-top-left-radius:5px; border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px;}
#jv-side .lec-flow-wrap a:last-child {border-bottom-left-radius:5px; border-bottom-right-radius:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px;}
#jv-side .lec-flow-wrap a:hover {box-shadow:2px 2px 3px 2px #eee inset;}
#jv-side .lec-flow-wrap a.active {font-weight:bold; color:#f63; box-shadow:2px 2px 3px 2px #eee inset; background:#f9f9f9;}

@media screen and (max-width:950px) {
	#jv-header {height:36px; margin:0 auto; padding:0 10px; font-size:16px; font-weight:bold; line-height:36px; border-bottom:1px solid #ccc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	#jv-conts-wrap {width:100%; height:auto; margin:0; padding:0;}
	#jv-conts {clear:both; float:none; width:calc(100vw - 20px); height:auto; margin:0 auto; padding:0;}
	#jv-conts iframe {width:100%; height:250PX; margin:0; padding:0;}
	#jv-side {clear:both; float:none; width:calc(100% - 20px); height:360px; margin:0 auto; padding:0; border:none;}
	#jv-side .lec-side-wrap {float:left;}
	#jv-side .lec-flow-wrap {float:right; width:280px; height:350px; margin:10px auto 0; padding:0 0 10px; overflow-x:hidden; overflow-y:auto;}
	#jv-side .lec-bookmark {margin:0; padding:5px 0; text-align:center; overflow:hidden;}

	/* 접수상태 목록 2020-12-27 22:56:45 */
	table.j-new-tbl {border:none !important; overflow:hidden;}
	table.j-new-tbl tr,
	table.j-new-tbl td {display:block;}
	table.j-new-tbl td {height:auto !important; text-align:left !important; font-size:1em; border-top:1px solid #ddd;}
	table.j-new-tbl td:not(:first-child) {margin:-1px 0 0;}
	table.j-new-tbl td {clear:both; margin:0; padding:8px 20px 8px 130px !important; position:relative; word-break:break-all; word-wrap:break-word;}
	table.j-new-tbl td:before {color:#000; content:attr(data-cell-header); display:block; position:absolute; width:120px; height:100%; top:0; left:0; padding:0; text-align:center; line-height:35px; font-weight:bold; background:#f5f5f5;}
	table.j-new-tbl tr {margin:0 0 10px 0; padding:0;}
	table.j-new-tbl tr:last-child {margin:0; padding:0;}
	table.j-new-tbl tr:first-child {display:none;}
}

@media screen and (max-width:600px) {
	#jv-side {clear:both; float:none; width:calc(100% - 20px); height:auto; margin:0 auto; padding:0; border:none;}
	#jv-side .lec-side-wrap {clear:both; float:none;}
	#jv-side .lec-flow-wrap {clear:both; float:none; width:280px; height:auto; margin:10px auto 20px; padding:0; overflow:hidden;}
}