@charset "euc-kr";

/********************************************************************************************************************************
* °øÅë
********************************************************************************************************************************/
.FB-subm-topBanner {
	height: 350px;
	text-align: center;
	background: #8f89ce url('/pds/images/sub/fb_Visual.png') no-repeat 50% 0;
	image-rendering: pixelated;
	overflow: hidden;
	}

.FB-title {
	clear: both;
	position: relative;
	margin: 0 0 20px 0; padding: 0 0 14px 0;
	font-family: 'Noto Sans KR', 'Noto Sans';
	font-size: 27.5px; color: #222; letter-spacing: -1.5px; line-height: 130%; font-weight: 700;
	border-bottom: 1px solid #cacaca;
	overflow: hidden;
	}
	.FB-title.icon {padding-left: 20px;}
		.FB-title.icon::before {content: ""; display: block; position: absolute; top: 5px; left: 0; width: 6px; height: 28px; border-radius: 6px; background: #476ccd; overflow: hidden;}
	.FB-title span.stxt2 {display: inline-block; position: relative; margin: 0 0 0 20px; font-size: 12.5px; color: #888; letter-spacing: 0; line-height: 150%; font-weight: 400;}
		.FB-title span.stxt2:before {content: ""; position: absolute; top: 4px; left: -12px; width: 1px; height: 11px; background: #d7d7d7;}

	.FB-title .count {position: absolute; bottom: 16px; right: 0; font-size: 14.5px; color: #888; letter-spacing: 0;}



/********************************************************************************************************************************
* LIST
********************************************************************************************************************************/
.FB-guide {
	position: relative; 
	margin: -15px 0 65px 0; padding: 20px 20px 20px 20px;
	font-size: 14.5px; color: #333; line-height: 120%; font-weight: 400;
	border: 1px solid #d5d5d5;
	background: #fafafa;
	}
	.FB-guide a {display: inline-block; position: absolute; top: 50%; right: 20px; height: 28px; margin: -14px 0 0 0; padding: 0 12px; font-size: 11.5px; color: #fff; line-height: 26px; text-decoration: none !important; text-align: center; border-radius: 4px; background: #544ba7;}
		.FB-guide a:hover {background: #4333d6; box-shadow: 3px 3px 4px 0 rgba(0,0,0, 0.2);}
		.FB-guide a i {margin: 0 0 2px 3px; font-size: 14px;}


.FB-list-wp {clear: both; position: relative; margin: 0 -35px 40px 0; padding: 30px 0 10px 0; border-bottom: 1px solid #dfdfdf;}
	.FB-list-wp ul {float: left; width: 100%;}
	.FB-list-wp li {float: left; position: relative; height: 360px; margin: 0 0 85px 0; padding: 0 35px 0 0;}

		.FB-list-wp li a.item {display: block; position: relative; margin: 0 auto; line-height: 100%; text-decoration: none !important;}
			.FB-list-wp li a.item .thumbs {
				display: flex;
				height: 280px;
				margin: 0 auto 12px auto;
				text-align: center;
				justify-content: center; align-items: center;
				border: 1px solid #eaeaea;
				border-radius: 12px;
				transition: all 0.2s;
				overflow: hidden;
				}
				.FB-list-wp li a.item .thumbs img {display: inline-block; width: 100%; height: auto; transition: all 0.4s;}
				.FB-list-wp li a.item:hover .thumbs {border-color: #444; box-shadow: 5px 10px 15px 0 rgba(0,0,0, 0.3);}
				/*	.FB-list-wp li a.item:hover .thumbs img {transform: scale(1.05);}	*/
	
			.FB-list-wp li a.item .subj {
					display: block;
					display: -webkit-box;
					position: relative;
					height: 58px;
					margin: 0 0 15px 0;
					font-family: 'Noto Sans KR', 'Noto Sans';
					font-size: 15.5px; letter-spacing: 0px; line-height: 130%; font-weight: 400;
					word-wrap: break-word; text-overflow: ellipsis;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					}
			.FB-list-wp li a.item .etc {display: block; position: relative;}
				.FB-list-wp li a.item .etc .price {position: absolute; top: 0px; right: 0; font-size: 13px; color: #777;}
				.FB-list-wp li a.item .etc .author {font-family: 'Noto Sans KR', 'Noto Sans'; font-size: 13px; color: #999; transition: all 0.2s;}
					.FB-list-wp li a.item:hover .etc .author {color: #444;}
						.FB-list-wp li a.item .etc .author .ic {display: inline-block; height: 16px; margin: 0 6px 1px 0; padding: 0 5px 0 4px; font-size: 10px; color: #fff; line-height: 16px; font-weight: 400; text-align: center; vertical-align: text-bottom; border-radius: 2px; background: #bbb; transition: all 0.2s;}
							.FB-list-wp li a.item:hover .etc .author .ic {background: #333;}



/********************************************************************************************************************************
* VIEW
********************************************************************************************************************************/
.FB-View-wp {}
	/* ±âº»Á¤º¸ */
	.FB-View-wp .filebook-Info {display: grid; grid-template-columns: 380px 820px; float: left; position: relative; min-height: 580px; border: 1px solid #ccc;}
		/* À̹ÌÁö */
		.FB-View-wp .filebook-Info .thumbs {padding: 0px 0 0px 0; text-align: center; background: #fafafa;}
			.FB-View-wp .filebook-Info .thumbs .img {
				display: block;
				display: flex;
				height: 513px;
				margin: 0 auto 15px auto;
				text-align: center;
				justify-content: center; align-items: center;
				background: #fff;
				overflow: hidden;
				} /* width: 320px */
				.FB-View-wp .filebook-Info .thumbs .img img {display: inline-block; width: 100%; height: auto;} /* border: 1px solid #e9e9e9; */
			.FB-View-wp .filebook-Info .thumbs .zoom {height: 26px; padding: 0 15px; font-size: 12px; line-height: 22px; font-weight: 400; border: 1px solid #d9d9d9; box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.05);}
				.FB-View-wp .filebook-Info .thumbs .zoom:hover {color: #4333d6; border-color: rgba(84,75,167, 0.7);}

		/* ±âº»³»¿ë */
		.FB-View-wp .filebook-Info .info {position: relative; padding: 25px 50px 35px 50px; border-left: 1px solid #dedede;}
			.FB-View-wp .filebook-Info .info .title {
				margin: 0 0 12px 0; padding: 0 0 5px 0; 
				font-size: 27.5px; color: #222; letter-spacing: -1px; line-height: 120%; font-weight: 600;
				}
				.FB-View-wp .filebook-Info .info .title .category {display: block; padding: 0 0 0px 0; font-size: 12px; color: #666699; letter-spacing: -0.2px; font-weight: 400;}
				.FB-View-wp .filebook-Info .info .title .summary {display: block; padding: 14px 0 0 0; font-size: 13px; color: #888; letter-spacing: -0.2px; line-height: 120%; font-weight: 400;}

			.FB-View-wp .filebook-Info .info .icons {margin: 0 0 20px 0; font-weight: 400; vertical-align: middle;}
				.FB-View-wp .filebook-Info .info .icons .circle {display: inline-flex; width: 20px; height: 20px; margin: 0 6px 2px 20px; font-size: 10px; color: #fff; font-weight: 400; justify-content: center; align-items: center; vertical-align: middle; border-radius: 100%;}
					.FB-View-wp .filebook-Info .info .icons .circle:first-of-type {margin-left: 0;}
					.FB-View-wp .filebook-Info .info .icons .circle.produce  {background: #544ba7;}
					.FB-View-wp .filebook-Info .info .icons .circle.new		{padding-right: 1px; background: #e05555;}
					.FB-View-wp .filebook-Info .info .icons .circle.best		{padding-right: 1px; background: #009cff;}
					.FB-View-wp .filebook-Info .info .icons .circle.limit	{padding-right: 1px; background: #ff83af;}

			.FB-View-wp .filebook-Info .info .etc {padding: 20px 0 20px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
				.FB-View-wp .filebook-Info .info .etc li {
					position: relative;
					margin: 0 0 10px 0; padding: 0 0 0 100px;
					font-size: 14px; color: #222; line-height: 120%; font-weight: 400;
					}
					.FB-View-wp .filebook-Info .info .etc li:last-of-type {margin-bottom: 0;}
					.FB-View-wp .filebook-Info .info .etc li span.subj {position: absolute; top: 0; left: 0; width: 80px; padding: 0 0 0 12px; background: url('/pds/images/comm/ic_dot2.png') no-repeat 1px 7px;}
						.FB-View-wp .filebook-Info .info .etc li span.subj:after {content: ":"; position: absolute; top: 1px; right: 0; font-size: 13px; color: #999;}

					.FB-View-wp .filebook-Info .info .etc li.line {margin-top: 25px; padding-top: 20px; border-top: 1px solid #e5e5e5;}
						.FB-View-wp .filebook-Info .info .etc li.line span.subj {top: 26px;}
					.FB-View-wp .filebook-Info .info .etc li .file {display: inline-block; width: auto; height: 22px; margin: 0 5px 0 0; vertical-align: text-bottom;}

				.FB-View-wp .filebook-Info .info .tag {margin: 20px 0 0 10px; padding: 0 0 0 54px; font-size: 13px; color: #888; line-height: 150%; font-weight: 400; background: url('/pds/images/comm/tag.png') no-repeat -1px 2px;}
					.FB-View-wp .filebook-Info .info .tag a {display: inline-block; vertical-align: middle;}

			/* ¹öÆ° */
			.FB-View-wp .filebook-Info .info .Btns {position: relative; margin: 40px 0 0 10px;}
				.FB-View-wp .filebook-Info .info .Btns a.btn-type {
					display: inline-flex;
					height: 70px;
					margin: 0 0 0 0; padding: 0 40px 2px 40px;
					font-size: 19.5px; line-height: 100%; font-weight: 400;
					justify-content: center; align-items: center;
					border-radius: 6px;
					}
				.FB-View-wp .filebook-Info .info .Btns .txt {display: block; margin: 12px 0 0 0; font-size: 12.5px; font-weight: 400;}

	.FB-View-wp .list-btn {margin: 10px 0 0px 0; text-align: right;}
		.FB-View-wp .list-btn a.btn-type.line {margin: 0; padding: 0 60px 0 60px; font-size: 15.5px; font-weight: 500; border-radius: 0;}

	/* »ó¼¼³»¿ë */
	.FB-View-wp .detail-wp {position: relative; margin: 10px 0 0 0;}
		.FB-View-wp .detail-wp .tab-menu {margin: 0 0 20px 0; column-count: 2; column-gap: 0px; border-left: 1px solid #eaeaea;}
			.FB-View-wp .detail-wp .tab-menu a {display: flex; height: 42px; font-size: 15px; justify-content: center; align-items: center; border-bottom: 1px solid #ccc; border-right: 1px solid #e9e9e9;}
				.FB-View-wp .detail-wp .tab-menu a:last-of-type {border-right: none;}
				.FB-View-wp .detail-wp .tab-menu a.active {color: #fff; border-top-color: #544ba7; border-bottom-color: #544ba7; border-right-color: #544ba7; background: #5f56af;}

		.FB-View-wp .detail-wp .detail {
			position: relative; 
			padding: 15px 25px 0px 5px; 
			font-size: 14.5px; color: #222; line-height: 160%; font-weight: 400; text-align: justify;
			}
			.FB-View-wp .detail-wp .detail:last-of-type {padding-bottom: 0;}
			.FB-View-wp .detail-wp .detail .Pre {white-space: pre-line !important;}	/* DB»ó µ¥ÀÌÅÍ ÁٹٲÞ(°³Ç๮ÀÚ)ó¸® °æ¿ì */
			.FB-View-wp .detail-wp .detail p {font-size: 14.5px; color: #222; line-height: 120%; text-align: justify;}
			.FB-View-wp .detail-wp .detail td {font-size: 14.5px; color: #222; line-height: 150%;}

			.FB-View-wp .detail-wp .detail .tit {margin: 0 0 18px 0; font-size: 20px; color: #6c63bb; letter-spacing: -0.8px; font-weight: 500;}

	/* ÆÄÀÏºÏ ÀÌ¿ë¾È³» */
	.FB-View-wp .guide-tit {clear: both; position: relative; margin: 0 0 14px 0; font-size: 22px; color: #333; letter-spacing: -1px; line-height: 120%; font-weight: 600;}
	.FB-View-wp .guide-box {
		position: relative;
		padding: 15px 20px 20px 20px;
		font-size: 14px; line-height: 150%;
		border: 1px solid #e3e3e3; background-color: #f9f9f9;
		}
		.FB-View-wp .guide-box ul {margin: 5px 0 0 0;}
		.FB-View-wp .guide-box li {margin: 0 0 5px 0; padding: 0 0 0 20px; font-size: 13px; color: #555; line-height: 150%; background: url('/pds/images/comm/ic_dot1.gif') no-repeat 8px 8px;}
			.FB-View-wp .guide-box li:last-child {margin-bottom: 0;}

.FB-preview-wp {width: 100%; height: 100vh;}