@charset "utf-8";

/********************************************************************************************************************************
* Body Wire
********************************************************************************************************************************/
body.fr-body {
	min-width: 1200px; 
	-ms-overflow-style:none; 
	overflow: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}
body.fr-body::-webkit-scrollbar {display: none;}

/*----- panel Reset -----*/
.splitter-vertical > .splitter_bar	 {width: 10px !important; border-right-color: #ddd !important;}
.splitter-horizontal > .splitter_bar {height: 10px !important; border-bottom-color: #ddd !important;}
.splitter_bar {background-color: #fff !important;}
.splitter-vertical > .splitter_bar::after	{content: ""; display: none; position: absolute; top: 0px; left: 50%; width: 34px; height: 30px; margin: 0 0 0 -16px; background: url('/pds/images/sub/acc/frame_resize1.png') no-repeat 0 0; z-index: 1000;}
.splitter-horizontal > .splitter_bar::after {content: ""; display: none; position: absolute; top: 50%; left: 0px; width: 30px; height: 34px; margin: -16px 0 0 0; background: url('/pds/images/sub/acc/frame_resize2.png') no-repeat 0 0; z-index: 1000;}
.splitter-vertical > .splitter_bar:hover::after		{display: block;}
.splitter-horizontal > .splitter_bar:hover::after	{display: block;}

/*
.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle, .splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle {border-left-color: #777 !important; border-right-color: #777 !important;}
.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle, .splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle {border-top-color: #777 !important; border-bottom-color: #777 !important;}
*/

/*------ Header -----------------------------------------*/
.fr-header-wp {position: absolute; left: 0px; right: 0; height: 50px; background: #1d2025; transition: left 0.2s; z-index: 10;}
	.fr-header-wp .logo {display: inline-block; margin: 0px 0 0 20px;}

	.fr-header-wp .close {display: block; position: absolute; top: 50%; right: 12px; width: 24px; height: 24px; margin: -12px 0 0 0; background: url('../../../images/close(w).png') no-repeat 50% 50%; opacity: 0.6;}
		.fr-header-wp .close:hover {opacity: 1;}

/*----- search -----*/
.fr-header-wp .total-search {display: inline-block; position: absolute; top: 10px; left: 155px; vertical-align: middle; transition: all 0.3s ease-in-out;}
	.fr-header-wp .total-search .int-1 {	
		display: inline-block;
		width: 450px; height: 31px;
		padding-top: 4px; padding-left: 20px; padding-right: 66px;
		font-size: 14px; color: #fff; font-weight: normal;
		border: 1px solid #1a1a1a;
		border-radius: 40px;
		background: #353535;
		transition: all 0.3s;
		}
	.fr-header-wp .total-search .int-1:focus {border-color: #000; background: #444; box-shadow: none;}
	.fr-header-wp .total-search .form-control::-moz-placeholder				{font-size: 12px; color: rgba(255,255,255, 0.2) !important; font-weight: normal !important;}
	.fr-header-wp .total-search .form-control:-ms-input-placeholder			{font-size: 12px; color: rgba(255,255,255, 0.2) !important; font-weight: normal !important;}
	.fr-header-wp .total-search .form-control::-webkit-input-placeholder	{font-size: 12px; color: rgba(255,255,255, 0.2) !important; font-weight: normal !important;}

	.fr-header-wp .total-search .sch-btn {
		position: absolute; top: 0px; right: 4px;
		display: block;
		width: 36px; height: 30px;
		padding: 0 4px 0 0;
		font-size: 19px; color: #eee; line-height: 28px; text-align: center; vertical-align: middle;
		background: url('../../../images/search.png') no-repeat 7px center;
		background-size: 16px 16px;
		z-index: 101;
		transition: background 0.3s;
		}
		.fr-header-wp .total-search .sch-btn:hover {color: #ff643c !important; background-image: url('../../../images/search_hover.png');}

	.fr-header-wp .total-search .sugicn-icon {
		position: absolute; top: 6px; left: 387px;
		width: 24px; height: 15px;
		cursor: pointer;
		z-index: 100;
		overflow: hidden;
		}
	.fr-header-wp .total-search #SchSug {
		position: absolute; top: 30px; left: 15px;
		width: 400px !important; height: 0px !important;
		}
		.fr-header-wp .total-search #SchSug iframe {width: 400px !important; height: 0;}


/*------ Left -----------------------------------------*/
input[type="checkbox"]#fr-Left-Menu {display: none;}
input[type="checkbox"]#fr-Left-Menu:checked ~ .fr-header-wp {left: 0px;}
input[type="checkbox"]#fr-Left-Menu:checked ~ .fr-body-wp {left: 0px;}
input[type="checkbox"]#fr-Left-Menu:checked ~ .fr-Left-wp {left: -250px;}
input[type="checkbox"]#fr-Left-Menu:checked ~ .fr-Left-wp .Btn i		 {margin-left: 0px;}
input[type="checkbox"]#fr-Left-Menu:checked ~ .fr-Left-wp .Btn i::before {content: "\f053";}

.fr-Left-wp {
	position: absolute; top: 0px; bottom: 0; left: 0px;
	width: 240px; height: 100%; min-height: 100%;
	padding: 50px 0 0 0;
	border-top: 1px solid rgba(255,255,255, 0.1);
	background: #1f2227;
	transition: left 0.2s;
	overflow: hidden;
	}
	
	.fr-Left-wp .Btn {
		display: block;
		position: absolute; top: 15px; right: 0px;
		width: 30px; height: 46px;
		background: #fff;
		cursor: pointer;
		z-index: 8;
		}
		.fr-Left-wp .Btn i		   {margin-left: 2px;}
		.fr-Left-wp .Btn i::before {content: "\f054";}

	.fr-Left-wp .title {height: 170px; overflow: hidden; /* border-top: 1px solid rgba(255,255,255, 0.03); */}

	.fr-Left-wp nav {
		position: absolute; top: 219px; bottom: 50px; left: 0; right: 0;
		overflow-y: hidden;
		}
		.fr-Left-wp nav .nav {padding: 0 0 10px 0; border-top: 1px solid rgba(0,0,0, 0.1); background: rgba(0,0,0, 0.3);}
		.fr-Left-wp nav li {margin: 0 0 0px 0;}	/* border-bottom: 1px solid rgba(255,255,255, 0.03); */
		.fr-Left-wp nav li a {
			display: block;
			position: relative;
			height: 48px;
			padding: 0px 40px 1px 15px;
			font-family: 'Noto Sans KR', 'Noto Sans','맑은 고딕', 'Malgun Gothic';
			font-size: 13.5px; color: rgba(255,255,255, 0.5); letter-spacing: 0; line-height: 140%; font-weight: 300; text-decoration: none;
			border-bottom: 1px solid rgba(0,0,0, 0.7);
			background: url('../../../images/more(s).png') no-repeat 215px 50%;
			transition: all 0.1s;
			}
			.fr-Left-wp nav li a:hover {color: #fff; background: rgba(255,255,255, 0.07) url('../../../images/more(s)_hover.png') no-repeat 218px 50%;}
			.fr-Left-wp nav li a:hover::before {content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #008276;}

			.fr-Left-wp nav li.active a {font-size: 14px; color: #fff; font-weight: 500; background: rgba(255,255,255, 0.07) url('../../../images/more(s)_hover.png') no-repeat 218px 50%;}
			.fr-Left-wp nav li.active a::before {content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #ff643c;}

/* footer */
.fr-Left-wp .footer {
	position: absolute; bottom: 0; left: 0; right: 0;
	height: 50px;
	padding: 11px 0 0 0;
	font-size: 11px; color: rgba(255,255,255, 0.2); letter-spacing: 0.5px; line-height: 130%; font-weight: 100 !important; text-align: center;
	}


/*------ Body -----------------------------------------*/
.fr-body-wp {position: absolute; top: 50px; bottom: 0; left: 240px; right: 0; transition: left 0.2s; overflow: hidden;}
	.fr-body-wp .colum {float: left; position: relative; width: 50%; height: 100%; min-height: 100%; border: 1px solid red;}
	
/*----- video -----*/
.fr-body-wp .video {position: relative; background: #000;}
	/* 관련노트 */
	.fr-body-wp .video .connect-subnote {
		display: inline-block; 
		position: absolute; top: 15px; left: 15px;
		width: 80px; height: 28px;
		padding: 0 10px;
		font-size: 12px; color: rgba(255,255,255, 0.65); line-height: 28px; text-align: center;
		border-radius: 5px;
		background: rgba(0,0,0, 0.4);
		transition: all 0.2s;
		cursor: pointer;
		z-index: 2;
		}
		.fr-body-wp .video .connect-subnote:hover {color: #fff; background: #0083d6;}

		.fr-body-wp .video .connect-subnote .list {
			display: none;
			position: absolute; top: 29px; left: 0; 
			width: 260px; 
			padding: 10px 12px 12px 16px; 
			text-align: left;
			border-radius: 5px;
			background: rgba(255,255,255, 0.3);
			}
			.fr-body-wp .video .connect-subnote:hover .list {display: block;}
			.fr-body-wp .video .connect-subnote .list a {display: block; margin: 0 0 5px 0; font-size: 12px; color: #fff; line-height: 120%; text-decoration: none;}
				.fr-body-wp .video .connect-subnote .list a:last-child {margin-bottom: 0;}
				.fr-body-wp .video .connect-subnote .list a:hover {color: #fff100;}

	.fr-body-wp .video video {
		position: absolute; top: 0; bottom: 0; left: 0; right: 0;
		width: 100% !important; height: 100%; min-height: 100%;
		object-fit: contain;
		-webkit-font-smoothing: subpixel-antialiased;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		user-select: none;
		overflow: hidden;
		}

	/* video.js Reset */
		.fr-body-wp .video .vod-dimensions {width: 100% !important; height: 100%; min-height: 100%;}
		.fr-body-wp .video .vjs-poster {background-size: 100% 100%;}

		.video video ~ *, .video video ~ *::before, .video video ~ *::after {color: #fff !important;}
		.vjs-icon-placeholder, .vjs-remaining-time-display,
		.vjs-play-progress, .vjs-slider-bar {color: #fff !important;}
		.vjs-playback-rate .vjs-playback-rate-value {padding-top: 5px; font-size: 17px !important; color: #fff !important;}
		.vjs-menu li {font-size: 15px !important; color: #fff !important;}
		.vjs-menu li.vjs-selected {color: #000 !important;}

		.video-js .vjs-volume-level:before {color: #fff !important;}

/*----- subNote Viewer -----*/
.fr-body-wp .subNote-Viewer {padding: 20px 25px 30px 25px;}
	.fr-body-wp .subNote-Viewer .area-title {display: block; height: 20px; margin: -20px -25px 30px -25px; font-family: 'Noto Sans KR', 'Noto Sans','맑은 고딕', 'Malgun Gothic'; font-size: 10px; color: #444; line-height: 19px; font-weight: 400; text-align: center; background: rgba(0,0,0, 0.08);}
	.fr-body-wp .subNote-Viewer .print {
		float: right;
		height: 20px;
		margin: -25px -5px 0 0;
		font-size: 11px; line-height: 18px;
		}

/*----- subNote Viewer Index -----*/
.fr-body-wp .subNote-Index ul {padding: 10px 10px 10px 10px;}
	.fr-body-wp .subNote-Index li {margin: 0 0 10px 0;}
	.fr-body-wp .subNote-Index li a {
		display: block;
		font-size: 12px; line-height: 130%;
		}

/*----- pdf Viewer -----*/
.fr-body-wp .book-Viewer {position: relative;}
	.fr-body-wp .book-Viewer::after {
		content: "교재 인쇄는 저작권상 지원되지 않습니다.";
		display: block;
		position: absolute; top: 50%; left: 50%;
		width: 250px; height: 30px;
		margin: -15px 0 0 -125px;
		font-size: 13px; color: #fff; letter-spacing: -0.5px; line-height: 30px; text-align: center;
		background: red;
		animation: bookViewNotice_ani 3s 1s linear;
		opacity: 0;
		z-index: 1000;
		}
		@keyframes bookViewNotice_ani {
			0%		{opacity: 1;}
			60%		{opacity: 1;}
			100%	{opacity: 0;}
			}
	.fr-body-wp .book-Viewer:hover::after {display: block;}


.fr-body-wp .book-Viewer::-webkit-scrollbar {display: none;}
	.fr-body-wp .book-Viewer embed {width: 100%; height: 100%; min-height: 100%;}

/*----- PDF Viewer Index -----*/
.fr-body-wp .book-Index {position: relative; padding: 20px 0 20px 18px; background: #3e3e3e url('/pds/images/sub/acc/bg_pattern.png') repeat;}
	.fr-body-wp .book-Index .area-title {display: block; height: 20px; margin: -20px 0 20px -18px; font-family: 'Noto Sans KR', 'Noto Sans','맑은 고딕', 'Malgun Gothic'; font-size: 10px; color: #fff; line-height: 20px; font-weight: 100; text-align: center; background: #2a2a2a;}
	
	.fr-body-wp .book-Index .list {padding: 0 0 3px 18px;}	/* border-left: 4px solid #4a4a4a; */
		.fr-body-wp .book-Index .list li {position: relative; margin: 0 0 4px 0;}
			.fr-body-wp .book-Index .list li:last-child {margin-bottom: 0;}

			.fr-body-wp .book-Index .list li.active a.subj {color: #ff7734 !important; font-weight: bold;}
				.fr-body-wp .book-Index .list li.active a.subj::after {
					content: "ON";
					display: inline-block;
					position: absolute; top: 4px; right: -34px;
					height: 12px;
					padding: 0 4px;
					font-size: 10px; color: #fff; line-height: 10px; font-weight: normal; text-align: center;
					border-radius: 2px;
					transform: scale(0.85);
					animation: book_viewer_blink 0.5s infinite;
					}
				
				@-webkit-keyframes 'book_viewer_blink' {
					0% {background: #e05555;}
					50% {background: #ffa200;}
					100% {background: #00a0e9;}
				}

		.fr-body-wp .book-Index .list li a.subj {display: inline-block; position: relative; font-size: 13px; color: #fff; line-height: 150%;}
			.fr-body-wp .book-Index .list li a.subj:hover {color: #ccc; text-decoration: none;}
			.fr-body-wp .book-Index .list li a.subj:before {content: ""; display: block; position: absolute; top: 7px; left: -20px; width: 8px; height: 8px; border-radius: 100%; background: #4c4c4c;}
				.fr-body-wp .book-Index .list li.connect a.subj:before {background: #0083d6;}
		
		/* 기준서 */
		.fr-body-wp .book-Index .list li.active .gijun {display: block;}
		.fr-body-wp .book-Index .list li .gijun {
			display: none;
			margin: 5px 30px 10px 0; padding: 7px 15px 7px 15px;
			border: 1px solid rgba(255,255,255, 0.15);
			}
			.fr-body-wp .book-Index .list li .gijun a {display: block; position: relative; padding: 0 0 0 10px; font-size: 12px; color: rgba(255,255,255, 0.65); line-height: 160%; text-decoration: none; transition: all 0.1s;}
				.fr-body-wp .book-Index .list li .gijun a::before {content: "-"; position: absolute; top: 7px; left: 0px; color: #999; line-height: 0;}
				.fr-body-wp .book-Index .list li .gijun a:hover {color: #fff;}
				.fr-body-wp .book-Index .list li .gijun a:hover::before {color: #ff7734;}

	.fr-body-wp .book-Index .book-guide {
		display: block;
		position: absolute; top: 5px; right: 10px;
		width: 40px; height: 40px;
		font-size: 30px; color: rgba(255,255,255, 0.2); line-height: 40px; text-align: center;
		cursor: help;
		}
		.fr-body-wp .book-Index .book-guide:hover {color: #e05555;}
		.fr-body-wp .book-Index .book-guide:hover .box {display: block;}
		.fr-body-wp .book-Index .book-guide .box {
			display: none; 
			position: absolute; top: 40px; right: 5px; 
			width: 185px; 
			padding: 10px 12px 13px 16px; 
			font-size: 11.5px; color: #fff; line-height: 140%; font-weight: 200; text-align: left;
			border-radius: 8px;
			background: rgba(0,0,0, 0.4);
			}
			.fr-body-wp .book-Index .book-guide .box span.connect {display: inline-block; margin: 0 2px 1px 0; font-size: 12px; color: #0083d6; vertical-align: text-bottom;}