@charset "UTF-8";

/* 레이어팝업 */
.layer-popup { display:block; width:auto; position:absolute; }
.layer-popup .layer-popup-content-box { display:block; width:100% !important; height:auto !important; background-color:#fff; }
.layer-popup .layer-popup-content-box img { vertical-align:top; width:100%; max-width:100%; height:auto !important; }

.layer-popup .close-btn-box { display:block; width:100%; background-color:#fff; padding:10px; }
.layer-popup .close-btn-box .btn-frame { display:flex; display:-ms-flexbox; justify-content:flex-end; -ms-flex-pack:end; width:100%; }
.layer-popup .close-btn-box .check,
.layer-popup .close-btn-box .close-btn,
.layer-popup .close-btn-box .check input,
.layer-popup .close-btn-box .check label  { -ms-flex-align: center; align-self: center; -ms-flex-item-align: center; }
.layer-popup .close-btn-box .check { display:flex; display:-ms-flexbox; justify-content:flex-start; -ms-flex-pack:start; width:auto; margin-right:20px; }

.layer-popup .close-btn-box .check label,
.layer-popup .close-btn-box .close-btn { font-weight:600; font-size:0.85em; }

/********** 공통 **********/
.layout-container {
	display:block;
	width:100%;
	padding-top:60px;
	word-wrap:break-word;
	word-break:keep-all;
	overflow-wrap:anywhere;
	overflow:hidden;
}

	.container-section {
		display:block;
		width:100%;
	}
		.layout-container .idx-cmn--title {
			display:block;
			width:100%;
			padding-bottom:10px;
			font-family:'SEBANG_Gothic_Regular', sans-serif;
			font-weight:300;
			font-size:1.21rem;
			color:#000;
			letter-spacing:-.6px;
		}
		
/********** 상단배너 **********/
#topBanner {
	display:block;
	width:100%;
}

	#topBanner .container-inner--frame {
		display:block;
		width:100%;
		padding:25px;
	}
	
		#topBanner .banner--slide { overflow-x:hidden; }
		
			#topBanner .banner--slide .slide-list { width:100%; }
			
			#topBanner .banner--slide:not(.one) .slide-item:not(:last-of-type) { margin-right:25px; }
			
			#topBanner .banner--slide .slick-slide { height:auto; }
			
				#topBanner .banner--slide .image-area {
					display:block;
					width:100%;
					border-radius:10px;
					overflow:hidden;
					position:relative;
				}
				
					#topBanner .banner--slide .image-area img {
						width:100%;
						max-width:100%;
						vertical-align:top;
					}
					

/********** 메인 바로가기 아이콘 **********/
#linkArea {}

	#linkArea .container-inner--frame {
		display:block;
		width:100%;
		padding:25px;
	}
		#linkArea .link-list--frame {
			display:flex;
			justify-content:flex-start;
			align-items:center;
			flex-wrap:wrap;
			width:100%;
			padding:15px 10px;
			background-color:#fff;
			border:1px solid #ccc;
			border-radius:5px;
		}
			
			#linkArea .link-list--frame .list-item {
				display:block;
				width:auto;
			}
			
				#linkArea .link-list--frame .list-item .image-box {
					display:block;
					width:100%;
					text-align:center;
				}
				
					#linkArea .link-list--frame .list-item img {
						max-width:100%;
						vertical-align:top;
					}

				#linkArea .link-list--frame .list-item .text-box {
					display:block;
					width:100%;
					margin-top:10px;
					text-align:center;
					font-weight:600;
					font-size:0.85rem;
					color:#000;
				}

/********** 제품 카테고리 **********/
#categoryArea {}

	#categoryArea .container-inner--frame {
		display:block;
		width:100%;
		padding-top:25px;
		padding-bottom:25px;
	}
	
		#categoryArea .idx-cmn--title {
			padding-left:25px;
			padding-right:25px;
		}
		
		#categoryArea .category-list--frame {
			display:flex;
			justify-content:flex-start;
			width:100%;
			height:auto;
			overflow-x:auto;
		}
			#categoryArea .cate-list {
				display:block;
				width:30%;
				margin-left:25px;
			}
			
			#categoryArea .cate-list:last-of-type { margin-right:25px; }
			
				#categoryArea .cate-list .image-box {
					display:block;
					width:120px;
					background-color:#fff;
					border:1px solid #ccc;
					border-radius:5px;
					overflow:hidden;
				}
					#categoryArea .cate-list .image-box img {
						max-width:100%;
						vertical-align:top;
					}

				#categoryArea .cate-list .text {
					display:block;
					width:120px;
					margin-top:12px;
					font-family:'SEBANG_Gothic_Regular', sans-serif;
					font-weight:300;
					font-size:0.91rem;
					color:#000;
					letter-spacing:-.6px;
					text-align:center;
				}
				
/********** 상단 중단 사이 배너 **********/
#centerBanner {
	display:block;
	width:100%;
	position:relative;
}

	#centerBanner .container-inner--frame {
		display:block;
		width:100%;
		padding:25px;
	}
		#centerBanner .center-banner--slide { overflow-x:hidden; }
		
			#centerBanner .center-banner--slide .slide-list { width:100%; }	
			
				#centerBanner .center-banner--slide .image-area {
					display:block;
					width:100%;
					border-radius:10px;
					overflow:hidden;
					position:relative;
				}
				
					#centerBanner .center-banner--slide .image-area img {
						width:100%;
						max-width:100%;
						vertical-align:top;
					}

			#centerBanner .idx-big-slick-dot {
				display:flex;
				justify-content:center;
				align-items:center;
				width:auto;
				position:absolute;
				right:10px;
				top:10px;
				
			}
				#centerBanner .idx-big-slick-dot li:not(:last-of-type) { margin-right:10px; }
					
					#centerBanner .idx-big-slick-dot .dot {
						display:block;
						width:10px;
						height:10px;
						background-color:#fff;
						border-radius:50%;
						box-shadow:2px 2px 0 rgba(0,0,0,.3);
						cursor:pointer;
					}
					
					#centerBanner .idx-big-slick-dot .slick-active .dot {
						width:40px;
						border-radius:7.5px;
						background-color:#4ada79;
					}

/********** 중단배너 **********/
#middleBanner {
	display:block;
	width:100%;
	position:relative;
}

	#middleBanner .container-inner--frame {
		display:block;
		width:100%;
		padding:25px;
	}
	
		#middleBanner .middle-banner--slide { overflow-x:hidden; }
		
			#middleBanner .middle-banner--slide .slide-list { width:100%; }	
			
				#middleBanner .middle-banner--slide .image-area {
					display:block;
					width:100%;
					border-radius:10px;
					overflow:hidden;
					position:relative;
				}
				
					#middleBanner .middle-banner--slide .image-area img {
						width:100%;
						max-width:100%;
						vertical-align:top;
					}

			#middleBanner .idx-big-slick-dot {
				display:flex;
				justify-content:center;
				align-items:center;
				width:auto;
				position:absolute;
				right:10px;
				top:10px;
				
			}
				#middleBanner .idx-big-slick-dot li:not(:last-of-type) { margin-right:10px; }
					
					#middleBanner .idx-big-slick-dot .dot {
						display:block;
						width:10px;
						height:10px;
						background-color:#fff;
						border-radius:50%;
						box-shadow:2px 2px 0 rgba(0,0,0,.3);
						cursor:pointer;
					}
					
					#middleBanner .idx-big-slick-dot .slick-active .dot {
						width:40px;
						border-radius:7.5px;
						background-color:#4ada79;
					}


/********** 메인 보도자료 디자인 **********/
#idxBoard {}

	#idxBoard .container-inner--frame {
		display:block;
		width:100%;
		padding:25px;
		position:relative;
	}
		#idxBoard .linkBtn--frame {
			display:block;
			width:auto;
			position:absolute;
			right:20px;
			top:13px;
		}
			#idxBoard .linkBtn--frame .btnMore-link {
				display:flex;
				justify-content:center;
				align-items:center;
				width:40px;
				height:40px;
				background-color:#fafafa;
				border:1px solid #b2b2b2;
				border-radius:20px;
				font-size:1.5em;
				font-weight:800;
				color:#000;
				position:relative;
			}
			
				#idxBoard .linkBtn--frame .btnMore-link .line-mark {
					width:15px;
					height:2px;
					background-color:#000;
					position:absolute;
					left:50%;
					top:50%;
					transition:0.3s all ease-in-out;
				}
				
				#idxBoard .linkBtn--frame .btnMore-link .line-mark.line1 {
					transform:translateX(-50%);
				}
				
				#idxBoard .linkBtn--frame .btnMore-link .line-mark.line2 {
					transform:translateX(-50%) rotate(90deg);
				}

		#idxBoard .no-board-item {
			display:block;
			width:100%;
			padding:80px 30px;
			margin-top:20px;
			background-color:#fafafa;
			border:1px solid #ccc;
			border-radius:5px;
			font-family:'SEBANG_Gothic_Regular', sans-serif;
			font-weight:300;
			font-size:1rem;
			color:#000;
			letter-spacing:-.6px;
			text-align:center;
		}
		
		#idxBoard .board-list--frame {
			display:block;
			width:100%;
			margin-top:20px;
			background-color:#fff;
			word-wrap:break-word;
			word-break:keep-all;
			overflow-wrap:anywhere;
		}
			#idxBoard .board-list--frame .list-item {
				display:flex;
				justify-content:flex-start;
				align-items:center;
				width:100%;
				padding:15px 0;
			}

				#idxBoard .board-list--frame .image-box {
					display:block;
					width:100px;
					min-width:120px;
					margin-right:20px;
				}
					#idxBoard .board-list--frame .image-box .v-align {
						display:block;
						width:100%;
						padding-top:100%;
						position:relative;
						border:1px solid #efefef;
						border-radius:5px;
						overflow:hidden;
					}
					
						#idxBoard .board-list--frame .image-box img {
							/*max-width:100%;*/
							max-height:100%;
							position:absolute;
							left:50%;
							top:50%;
							transform:translate(-50%, -50%);
						}
				
				#idxBoard .board-list--frame .text-box {
					display:block;
					width:auto;
				}
					#idxBoard .board-list--frame .text-box .subject {
						display:block;
						width:100%;
						min-height:50px;
						font-family:'SEBANG_Gothic_Regular', sans-serif;
						font-weight:300;
						font-size:1rem;
						line-height:1.21;
						color:#000;
						letter-spacing:-.6px;
					}
					
					#idxBoard .board-list--frame .text-box .date {
						display:block;
						width:100%;
						margin-top:7px;
						font-size:0.8rem;
						font-weight:600;
						color:rgba(0,0,0,.6);
					}


/********** responsive - start **********/

/* Mobile */
@media screen and (min-width:1px) and (max-width:639px) {
	/* 레이어팝업 */
	.layer-popup {
		left:0px !important;
		right:auto !important;
	}
	
	#topBanner .banner--slide:not(.one) { margin-right:-100%; }
	
	#linkArea .link-list--frame .list-item { width:32%; }
	#linkArea .link-list--frame .list-item:not(:last-of-type) { margin-right:2%; }
	#linkArea .link-list--frame .list-item:nth-of-type(3n) { margin-right:0; }
	#linkArea .link-list--frame .list-item:nth-of-type(n+4) { margin-top:20px; }
}

/* Tablet & PC */
@media screen and (min-width:640px) {
	#topBanner .banner--slide:not(.one) { margin-right:-45%; }
	
	#linkArea .link-list--frame .list-item { flex:1; }
}


/**********  responsive - end **********/