*{
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */}

[class*="vod-ico"]:before	{content:"";font-family:var(--faw);display:inline-block;margin-right:5px;}
.vod-ico-pre:before 		{content:"\f111";color:#aaaaaa}
.vod-ico-ing:before 		{content:"\f111";color:#3399CC;font-weight:900}
.vod-ico-finish:before		{content:"\f058";color:#339966;font-weight:900}
[class*="vod-badge"]		{background:#fff;border-radius:4rem;padding:0.2rem 0.6rem 0.3rem 0.3rem;line-height:1rem;font-size:0.875rem;border:2px solid #aaaaaa;box-shadow:0 2px 3px rgba(0,0,0,0.4);}
[class*="vod-badge"] i		{font-size:0.875rem;vertical-align:middle;}
.vod-badge-pre				{color:#aaaaaa !important;border-color:#aaaaaa}
.vod-badge-ing				{color:#3399CC !important;border-color:#3399cc}
.vod-badge-finish			{color:#339966 !important;border-color:#339966}

/* class-list */
.class-list				{border-top:2px solid var(--main-color)}
.class-list li			{position:relative;border-bottom:1px solid #dfdfdf;padding:20px 0;display:flex;flex-flow:row nowrap;align-items: flex-start;font-size:.925rem}
.class-list .thumb		{position:relative;display:inline-block;width:140px;height:100px;background-color:#f1f1f1;margin-right:40px;background-size:cover}
.class-list .thumb:before{content:"\f144";font-family:FontAwesome;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-block;font-size:1.5rem;color:rgba(0,0,0,0.2)}
.class-list .thumb:hover{outline:2px solid var(--main-color)}
.class-list .badge		{position:absolute;left:10px;top:10px;border:none}
.class-list .badge-c1	{background:var(--main-color);}
.class-list .badge-c2	{background:var(--sub-color);}
.class-list .btn-d		{position:absolute;right:0;top:20px;}
.class-list .btn-d.btn-view	{background:#fff;border-color:var(--main-color);color:var(--main-color)}
.class-list .subject	{font-size:1.125rem;color:#111;font-weight:500}
.class-list .category	{margin:5px 0;font-size:var(--font-sm);color:var(--main-color)}
.class-list dt, .class-list dd{display:inline-block;}
.class-list dt			{width:70px;}
.class-list dd:before	{content:"";position:absolute;left:0;top:6px;display:block;height:13px;border-left:1px solid #ddd}
.class-list dd			{width:calc(100% - 70px);position:relative;padding-left:10px;}
.class-list .category	{color:var(--main-color);font-size:.875rem;}
.keyword span	{display:inline-block;margin-right:4px;font-size:.875rem;background:#f1f1f1;color:#387192;padding:0 10px;line-height:30px;border-radius:0.25rem}
.keyword span:before{content:"#"}

/* class-view */
.class-view			{position:relative;background:#fff;border-radius:8px;padding:30px;margin:0 0 60px 0;box-shadow:0 20px 40px rgba(0,0,0,0.1);border:2px solid var(--main-color)}
.class-view .cont	{margin-top:40px;}
.class-view .category{color:var(--main-color);}
.class-view .tit		{font-size:1.875rem;font-weight:700;color:#111}
.class-view .txt		{margin:20px 0;}
.class-view .btn-d	{display:block;}
.class-view .state			{margin:20px 0 10px 0;border:1px solid #dfdfdf;padding:20px;text-align:Center;display:flex;flex-flow:row nowrap}
.class-view .state a		{flex:1;display:inline-block;font-size:.875rem}
.class-view .state p:before	{content:"";display:block;margin:0 auto;font-family:FontAwesome;font-size:1.5rem}
.class-view .state .ico-score:before	{content:"\f005"}
.class-view .state .ico-scrap:before	{content:"\f02e"}
.class-view .state .ico-qna:before		{content:"\f075"}
.class-view .state .ico-score-on:before	{content:"\f005";color:#f7c740;font-weight:900;}
.class-view .state .ico-scrap-on:before	{content:"\f02e";color:#5050D2;font-weight:900;}
.class-view .state .ico-qna-on:before	{content:"\f075";color:#888;font-weight:900;}
.class-view .state .ico-score:hover:before	{color:#f7c740;font-weight:900;transition:all 0.3s;}
.class-view .state .ico-scrap:hover:before	{color:#5050D2;font-weight:900;transition:all 0.3s;}
.class-view .state .ico-qna:hover:before	{color:#888;font-weight:900;transition:all 0.3s;}

.class-cont-tab				{display:flex;flex-flow:row nowrap;border-bottom:1px solid #ccc;}
.class-cont-tab a			{position:relative;display:inline-block;padding:5px 20px 15px;}
.class-cont-tab a.on		{color:var(--main-color);font-weight:700}
.class-cont-tab a.on:after	{content:"";position:absolute;left:0;bottom:-1px;width:100%;border-bottom:2px solid var(--main-color);}

[class*="class-cont"] .title		{margin:40px 0 20px 0;}
[class*="class-cont"] .title h3		{margin:0;float:left;}
[class*="class-cont"] .title h3 em	{font-size:var(--font-sm);margin-left:10px;}
[class*="class-cont"] .title .btn-d	{float:right;}

#star-form fieldset{display:inline-block;border:0;direction:rtl;}
#star-form label	{font-size:1rem;color:transparent;text-shadow:0 0 0 #f0f0f0;}
#star-form label:hover,
#star-form label:hover ~ label{text-shadow: 0 0 0 var(--main-color);}
#star-form input[type=radio]{display: none;}
#star-form input[type=radio]:checked ~ label{text-shadow: 0 0 0 var(--main-color);}
.star-rating	{color:transparent;text-shadow: 0 0 0 rgba(0,0,0,0.2);}
.star-rating b	{text-shadow: 0 0 0 var(--main-color);}
.star-rating.star-sm{font-size:0.725rem}
.star-rating em	{color:#333;display:inline-block;margin-left:5px;font-weight:500}

.class-cont-list>ul					{border-top:2px solid #333;}
.class-cont-list>ul>li				{border-bottom:1px solid rgba(0,0,0,0.1)}
.class-cont-list .tit				{display:block;padding:10px 0;font-weight:var(--font-semibold)}
.class-cont-list ul.list [class*="vod-ico"]:before{font-size:1.25rem;vertical-align:middle}
.class-cont-list ul.list			{border-top:1px solid rgba(0,0,0,0.1);padding:10px;background:var(--basic-bg);font-size:0.925rem}
.class-cont-list ul.list li a		{position:Relative;display:block;padding:5px 10px;}
.class-cont-list .vod-time			{display:inline-block;font-size:var(--font-xsm);margin-right:5px;}
.class-cont-list .view				{display:none;position:absolute;right:10px;top:6px;color:var(--main-color);font-size:var(--font-sm);}
.class-cont-list .view:before		{content:"\f04b";font-family:var(--faw);display:inline-block;margin-right:5px;}
.class-cont-list ul.list li a:hover	{background:var(--white);border-radius:3px;box-shadow:0 2px 2px var(--basic-shadow);}
.class-cont-list ul.list li a:hover .view{display:block;}

.class-cont-review					{}
.class-cont-review .score-bx		{background:#fff;border:1px solid var(--basic-border);}
.class-cont-review .score-area		{float:left;padding:40px 20px;width:240px;text-align:center;}
.class-cont-review .graph-area		{float:left;padding:20px 30px;width:calc(100% - 240px);}
.class-cont-review .score-area em	{font-size:2rem;color:#111;font-weight:700}
.class-cont-review .graph-area li	{margin:5px 0}
.class-cont-review .graph-area em	{display:inline-block;width:60px;font-size:var(--font-sm);color:var(--basic-color)}
.class-cont-review .graph-area .bg	{display:inline-block;width:calc(100% - 60px);height:8px;background:#f4f4f4;border-radius:16px;overflow:hidden;}
.class-cont-review .graph-area .bar	{display:inline-block;height:8px;background:var(--main-color);border-radius:16px;vertical-align:top}
.class-cont-review ul.list			{margin:20px 0;border-top:2px solid #333;}
.class-cont-review ul.list li		{padding:20px 0;border-bottom:1px solid #dfdfdf}
.class-cont-review ul.list .name	{font-size:.875rem;font-weight:700;color:#333}
.class-cont-review ul.list .date	{font-size:.725rem;font-weight:400;display:inline-block;margin-left:10px;color:#999}
.class-cont-review ul.list .txt		{margin-top:5px;}
.class-cont-review .more			{font-size:.875rem;display:block;text-align:right;}

.class-cont-qna						{}
.class-cont-qna ul					{margin:20px 0;border-top:2px solid #333;}
.class-cont-qna li					{padding:20px 0;border-bottom:1px solid #dfdfdf;}
.class-cont-qna .name				{font-size:.875rem;font-weight:700;color:#333}
.class-cont-qna .date				{font-size:.725rem;font-weight:400;display:inline-block;margin-left:10px;color:#999}
.class-cont-qna .answer				{position:relative;padding:10px 0 0 35px;}
.class-cont-qna .answer:before		{position:absolute;left:0;top:15px;content:"A";display:inline-block;width:25px;height:25px;line-height:25px;text-align:center;border-radius:3px;background:var(--main-color);color:#fff;font-size:.875rem}
.class-cont-qna .answer .date		{margin-left:0}
.class-cont-qna .txt				{margin-top:5px;}
.class-cont-qna .more				{font-size:.875rem;display:block;text-align:right;}

*::-webkit-scrollbar		{width:4px;border-radius:80px;}
*::-webkit-scrollbar-thumb	{background-color:rgba(0,0,0,0.4);}
*::-webkit-scrollbar-track	{background-color:transparent;}

/* vod-viewer-sjk */
.badge-test,
.badge-poll,
.badge-learn				{display:inline-block;width:18px;height:18px;line-height:18px;border-radius:0.125rem;text-align:center;font-size:var(--font-xsm);color:#fff;}
.badge-test					{background:#EF8254}
.badge-poll					{background:#32B89C;}
.badge-learn				{background:#5FAECF;}
#vod-viewer								{position:relative;background:#222;height:100vh;font-size:var(--font-base);}
#vod-viewer.elearning					{background:#fff}
#vod-viewer .vod-info-wrap				{position:fixed;left:0;top:0;width:320px;height:100%;background:#3E4553;color:var(--white7);z-index:999}
#vod-viewer .vod-info					{height:100%;padding:40px;overflow-y:scroll;}
#vod-viewer .vod-cont					{position:relative;margin-left:320px;height:calc(100% - 60px);z-index:998;}
#vod-viewer .vod-video-wrap				{position:relative;height:100%;}
#vod-viewer .vod-video					{position:relative;transform:translate(-50%,-50%);top:50%;left:50%;}
#vod-viewer .vod-category				{margin:0 0 10px 0;}
#vod-viewer .vod-category span:before	{content:"";display:inline-block;width:8px;height:8px;border:1px solid #ccc;border-left:none;border-bottom:none;transform:rotate(45deg);margin:-3px 8px 0 6px;vertical-align:middle}
#vod-viewer .vod-category span:first-child:before{display:none}
#vod-viewer .vod-info-tit					{margin:10px 0;color:var(--white);font-size:var(--font-3xlg);font-weight:700;line-height:1.1;letter-spacing:-0.0145rem;word-break:keep-all;word-wrap:break-word;}
#vod-viewer .vod-info-desc					{margin:20px 0;height:400px;overflow-y:scroll}
#vod-viewer .vod-info-desc ul				{margin:10px 0;counter-reset:num;}
#vod-viewer .vod-info-desc li				{position:relative;padding:5px 0;font-size:var(--font-sm);line-height:1.5;color:#999}
#vod-viewer .vod-info-desc li:before		{content:"";position:absolute;left:0;top:50%;border-top:1px dotted rgba(255,255,255,0.3);width:calc(100% - 25px)}
#vod-viewer .vod-info-desc li a				{position:relative;display:block;}
#vod-viewer .vod-info-desc li a:before		{counter-increment:num;content:counter(num) ". ";background:#3E4553;display:inline-block;width:18px;}
#vod-viewer .vod-info-desc li .txtbg		{position:relative;display:inline-block;background:#3E4553;padding-right:10px;}
#vod-viewer .vod-info-desc li.on a:before	{border-left:3px solid #fff;padding-left:10px;width:28px;}
#vod-viewer .vod-info-desc li.on			{color:#fff;}
#vod-viewer .vod-info-desc li em			{display:inline-block;line-height:1;font-size:0.5rem;color:#ff6666;background:#3E4553;margin-left:4px;}
#vod-viewer .vod-info-desc li [class*="badge-"]{margin-right:8px;}
#vod-viewer .vod-info-desc li .ico					{position:absolute;right:0;top:0;display:block;width:20px;height:20px;}
#vod-viewer .vod-info-desc li .ico:before			{content:"\f111";font-family:FontAwesome;font-weight:900;display:block;width:100%;font-size:0.875rem;color:#999;text-align:right;position:absolute;right:0;top:calc(50% - 0.55rem);text-align:center;}
#vod-viewer .vod-info-desc li .ico.check:before		{content:"\f00c";color:var(--yellow);}
#vod-viewer .vod-info-desc li .ico.ing:before		{content:"\f04b";}
#vod-viewer .vod-info-desc li.on .ico:before		{border:2px solid #fff;border-radius:50%;width:100%;height:100%;line-height:16px;font-size:0.685rem;text-align:center;}
#vod-viewer .vod-info-desc li.on .ico.check:before	{border-color:var(--yellow)}
#vod-viewer .vod-info-desc li.on .ico.ing:before	{font-size:0.5rem;color:#fff}
#vod-viewer .vod-info-desc .note			{font-size:var(--font-xsm);line-height:1.5}
#vod-viewer .vod-info-txt					{font-size:var(--font-sm);word-break:break-all;text-align:justify;}
/*#vod-viewer .vod-info-txt							{height:280px;overflow-y:scroll;line-height:1.6;font-weight:300;color:#ccc;word-break:break-all;text-align:justify;}
#vod-viewer .vod-info-txt::-webkit-scrollbar		{background-color:transparent;width:5px;}
#vod-viewer .vod-info-txt::-webkit-scrollbar-thumb	{background-color:rgba(0,0,0,0.4);border-radius:80px;}
#vod-viewer .vod-info-txt::-webkit-scrollbar-track	{background-color:transparent}*/
#vod-viewer .vod-play-time			{position:absolute;left:20px;bottom:20px;width:calc(100% - 40px);background:rgba(0,0,0,0.2);border-radius:0.3rem;box-shadow:inset 0 3px 4px rgba(0,0,0,0.2);padding:15px;font-size:var(--font-sm);}
#vod-viewer .vod-play-time em		{color:#ffbb00}
#vod-viewer .vod-play-time p		{line-height:24px;margin-bottom:10px;}
#vod-viewer .vod-play-time .btn-d	{position:absolute;right:15px;top:15px;}
#vod-viewer .vod-play-time .txt		{color:rgba(255,255,255,0.6);font-size:var(--font-xsm);line-height:1.4}
#vod-viewer .vod-foot				{position:relative;left:0;bottom:0;width:100%;background:#252525;text-align:center;}
#vod-viewer .vod-foot a				{color:#fff;line-height:60px;}
.book-wrap		{width:920px;margin:0 auto;}




/*S:elearning*/
#book-view-wrap	{}
#book-view-wrap .cont-bx					{position:relative;margin:2rem 0;}
.cont-type-tit h1							{font-size:var(--font-2xlg);font-weight:var(--font-semibold);color:#111;border-top:1px solid #E0E7ED;padding-top:1.5rem}
.cont-type-tit h2							{font-size:var(--font-xlg);font-weight:var(--font-semibold);color:#3366cc;}
.cont-type-tit h3							{font-size:var(--font-lg);font-weight:var(--font-semibold);color:#333;}
.cont-type-tit h1, .cont-type-tit h2, .cont-type-tit h3	{line-height:1.2;margin:1.5rem 0 0.5rem 0}

.cont-type-text								{}
.cont-type-text .area-img					{display:inline-block;max-width:50%}
.cont-type-text .area-img img				{max-width:100%}
.cont-type-text.type2, 
.cont-type-text.type3						{display:flex;flex-flow:row wrap;}
.cont-type-text.type3						{justify-content: space-between;}
.cont-type-text.type2 .area-txt				{padding-left:1.25rem}
.cont-type-text.type3 .area-txt				{padding-right:1.25rem} 


.cont-type-list								{}
.cont-type-list .btn-add					{display:none;text-align:center;font-size:var(--font-sm);margin:1rem 0 0.5rem}
.cont-type-list .btn-add:before				{content:"\2b";font-family:FontAwesome;color:var(--main-color);margin-right:0.5rem}
.cont-type-list .btn-add:hover				{color:var(--main-color);}
.cont-control-area.active .btn-add			{display:block;}
.cont-type-list.type1 ul					{}
.cont-type-list.type1 li					{position:relative;padding-left:1.25rem}
.cont-type-list.type1 li:before				{position:absolute;left:0;top:0.625rem;content:"";display:block;width:3px;height:3px;border-radius:50%;background:var(--basic-color)}
.cont-type-list.type2 ul					{counter-reset:num;}
.cont-type-list.type2 li					{position:relative;padding-left:1.25rem}
.cont-type-list.type2 li:before				{position:absolute;left:0;top:0;counter-increment:num;content:counter(num) ". ";}
.cont-type-list.type3 li					{border-radius:var(--basic-round);border:1px solid var(--basic-border);margin:0.5rem 0 0 0}
.cont-type-list.type3 li:first-child		{margin:0}
.cont-type-list.type3 .tit,
.cont-type-list.type3 .txt					{position:relative;padding:1rem 1.25rem 1rem 2.5rem;}
.cont-type-list.type3 .tit:before			{content:"\f105";font-family:FontAwesome;color:var(--main-color);position:absolute;left:1.25rem;top:1.25rem;line-height:1}
.cont-type-list.type3 .tit					{color:#111;}
.cont-type-list.type3 .txt					{border-top:1px dashed #F2F4F6}

.cont-type-comment							{position:relative;}
.cont-type-comment.type1					{padding:1.25rem 1.25rem 1.25rem 3rem;border-radius:var(--basic-round);background:#F2F4F6;}
.cont-type-comment.type1 .cont:before		{content:"\f058";font-family:FontAwesome;color:var(--blue);font-size:var(--font-lg);line-height:1.2;position:absolute;left:1.25rem;top:1.25rem;}
.cont-type-comment.type2					{padding:1.25rem 1.25rem 1.25rem 3rem;border-radius:var(--basic-round);background:#F2F4F6;}
.cont-type-comment.type2 .cont:before		{content:"\f071";font-family:FontAwesome;color:var(--red);font-size:var(--font-lg);line-height:1.2;position:absolute;left:1.25rem;top:1.25rem;}
.cont-type-comment.type3					{padding:1.25rem 1.25rem 1.25rem 1.25rem;border-radius:var(--basic-round);border:1px dashed #D2DAE1}
.cont-type-comment.type4					{padding:1.25rem 1.25rem 1.25rem 1.25rem;text-align:center}
.cont-type-comment.type4 .from				{display:inline-block;font-size:var(--font-sm);margin-top:0.5rem}
.cont-type-comment.type4 .from:before		{content:"";display:inline-block;width:100%;border-top:1px solid #D2DAE1;padding-top:0.5rem;}
.cont-type-comment.type4:before,
.cont-type-comment.type4:after				{content:"";font-family:FontAwesome;display:block;color:#D2DAE1;font-size:var(--font-xlg);line-height:1}
.cont-type-comment.type4:before				{content:"\f10d";margin-bottom:0.5rem}
.cont-type-comment.type4:after				{content:"\f10e";margin-top:0.5rem}

.cont-type-divide							{display:flex;flex-flow:row wrap;}
.cont-type-divide > div						{flex:1}

.cont-caption								{display:inline-block;margin:0.5rem 0 0 0;}
.edit-place-image 							{text-align:center;font-size:var(--font-sm);color:var(--basic-color);margin:2rem 0}
.edit-place-image img						{max-width:100%;}
.edit-place-image .edit-cont				{}
.edit-place-image .edit-cont .btn-d			{position:absolute;right:0;top:0;}
.edit-place-image .edit-cont [data-tooltip]	{position:absolute;}
.edit-place-pdf a						{display:block;border:1px solid var(--lgray1);padding:0.725rem;border-radius:0.25rem}
.edit-place-pdf a:before					{content:"\f1c1";font-family:FontAwesome;color:var(--main-color);margin-right:.725rem;display:inline-block;width:2.5rem;height:2.5rem;line-height:2.5rem;text-align:center;background:var(--basic-bg);border-radius:0.25rem;font-size:1.25rem}
.edit-place-pdf a:hover,
.edit-place-pdf a:hover:before			{color:var(--main-color);border-color:var(--main-color);}
.cont-type-link a						{display:block;border:1px solid var(--lgray1);padding:0.725rem;border-radius:0.25rem}
.cont-type-link a:before				{content:"\f0c1";font-family:FontAwesome;color:var(--main-color);margin-right:.725rem;display:inline-block;width:2.5rem;height:2.5rem;line-height:2.5rem;text-align:center;background:var(--basic-bg);border-radius:0.25rem;font-size:1.25rem}
.cont-type-link a:hover,
.cont-type-link a:hover:before			{color:var(--main-color);border-color:var(--main-color);}
.cont-type-line								{padding:0.5rem 0}
.cont-type-line [class*="line"]				{border-width:1px;border-color:#D2DAE1;}
.cont-type-line .line1						{border-top-style:solid;}
.cont-type-line .line2						{border-top-style:dotted;}
.cont-type-line .line3						{border-top-style:dashed;}
.cont-type-line .line4						{border-top-style:double;border-width:4px;}

/*E:elearning*/


/*2022.05.17*/
.class-cont-list>ul					{border-top:2px solid #333;}
.class-cont-list li					{position:relative;}
.class-cont-list a					{display:block;}
.class-cont-list [class*="vod-ico"]	{margin-right:5px;}
.class-cont-list.type1>ul>li>a		{line-height:40px;padding:0 15px;border-bottom:1px solid rgba(0,0,0,0.1);}
.class-cont-list.type2>ul>li>a		{line-height:50px;font-weight:var(--font-semibold);color:#111}
.class-cont-list.type2 ul.list		{padding:10px 15px;background:var(--basic-bg);}
.class-cont-list.type2 ul.list li a	{line-height:30px;}
.class-cont-list .vod-time			{position:absolute;right:0;top:0;font-size:var(--font-sm);color:#999}

.book-cover			{background:var(--basic-bg);padding:4rem;text-align:center;}
.book-cover .tit	{font-size:var(--font-2xlg);font-weight:var(--font-exbold);color:#111}
.book-cover .txt	{margin-top:2rem}

.book-intro-list	{}
.book-intro-list li	{text-align:left;}