@charset "UTF-8";

/************************ 온라인 휴비서 ************************/
.function-info--frame {
	display:block;
	width:100%;
	word-break:keep-all;
	word-wrap:break-word;
	overflow-wrap:anywhere;
}
	.function-info--frame .info-top--section {
		display:flex;
		justify-content:space-between;
		align-items:center;
		flex-direction:row-reverse;
		flex-wrap:wrap;
		width:100%;
	}
		.function-info--frame .info-top--section .image-box { width:360px; }
			
		.function-info--frame .info-top--section .text-box { display:block; }
		
			.function-info--frame .info-top--section .info-small--title {
				display:block;
				width:100%;
				padding-bottom:7px;
				font-family:'GmarketSansMedium', sans-serif;
				font-weight:300;
				color:#4b9c9f;
				letter-spacing:-.6px;
				line-height:1.4;
			}
			
			.function-info--frame .info-top--section .info-big--title {
				display:block;
				width:100%;
				font-family:'GmarketSansMedium', sans-serif;
				font-weight:300;
				color:#000;
				letter-spacing:-1.2px;
				line-height:1.4;
			}
				.function-info--frame .info-top--section .info-big--title .block {
					font-family:'GmarketSansMedium', sans-serif;
					letter-spacing:-1.2px;
					line-height:1.2;
				}
				
			.function-info--frame .info-top--section .info-desc--box {
				display:block;
				width:100%;
			}
				.function-info--frame .info-top--section .info-desc--box .block {
					display:block;
					width:100%;
					font-weight:600;
					font-size:0.85rem;
					color:rgba(0,0,0,.6);
					letter-spacing:-.4px;
					line-height:1.5;
				}
				
	.function-info--frame .info-cont--section {
		display:flex;
		justify-content:flex-start;
		align-items:flex-start;
		flex-wrap:wrap;
		width:100%;
	}
		.function-info--frame .info-cont--section .tab-menu--frame {
			display:block;
			position:sticky;
			left:0;
		}
			.function-info--frame .info-cont--section .tab-list { display:block; }					
			
				.function-info--frame .info-cont--section .tab-btn {
					display:block;
					width:100%;
					padding:15px;
					font-weight:600;
					font-size:0.85rem;
					text-align:center;
					color:rgba(0,0,0,.6);
					transition:0.3s all ease-in-out;
				}
				
				.function-info--frame .info-cont--section .tab-btn.active {
					background-color:#2c3539;
					border-color:#2c3539;
					color:#fff;
				}
				
				.function-info--frame .info-cont--section .tab-btn:hover,
				.function-info--frame .info-cont--section .tab-btn:focus {
					background-color:#000;
					border-color:#000;
					color:#fff;
					text-decoration:none;
				}

		.function-info--frame .info-cont--section .content-view--frame { display:block; }
		
			.function-info--frame .content-view--frame .func-list {
				display:none;
				width:100%;
			}
			
			.function-info--frame .content-view--frame .func-list.open { display:block; }
			
				.function-info--frame .content-view--frame .func-list .list-head {
					display:flex;
					justify-content:flex-start;
					align-items:flex-end;
					flex-wrap:wrap;
					width:100%;
					padding:30px;
					background-color:#fafafa;
					border:2px solid #000;
					border-radius:10px 10px 0 0;
				}
					.function-info--frame .content-view--frame .list-head .list-title {
						display:block;
						width:auto;
						font-family:'SEBANG_Gothic_Bold', sans-serif;
						font-weight:500;
						color:#000;
						letter-spacing:-.6px;
					}
					
					.function-info--frame .content-view--frame .list-head .list-desc {
						display:block;
						width:auto;
						font-weight:600;
						font-size:0.85rem;
						line-height:1.4;
					}

				.function-info--frame .content-view--frame .func-list .list-body {
					display:block;
					width:100%;
					padding:50px;
					background-color:#fff;
					border:2px solid #000;
					border-top:0px;
					border-radius:0 0 10px 10px;
				}
				
					.function-info--frame .content-view--frame .list-body .sect {
						display:block;
						width:100%;
					}
					
					.function-info--frame .content-view--frame .list-body .sect:not(:last-of-type) { margin-bottom:60px; }
											
						.function-info--frame .content-view--frame .sect .text-box {
							display:block;
							width:100%;
							text-align:center;
						}
							.function-info--frame .content-view--frame .text-box .item-title {
								display:block;
								width:100%;
								padding-bottom:15px;
								font-size:1.45rem;
								font-family:'SEBANG_Gothic_Bold', sans-serif;
								font-weight:500;
								color:#000;
								letter-spacing:-.6px;
							}
							
							.function-info--frame .content-view--frame .text-box .item-cont {
								display:block;
								width:100%;
							}
								.function-info--frame .content-view--frame .text-box .item-cont .block {
									display:block;
									width:100%;
									font-weight:600;
									font-size:0.85rem;
									color:rgba(0,0,0,.7);
									line-height:1.4;
								}
								
						.function-info--frame .content-view--frame .sect .image-box {
							display:block;
							width:100%;
							text-align:center;
							margin-top:30px;
						}
						
							.function-info--frame .content-view--frame .sect .image-box img {
								max-width:100%;
								vertical-align:top;
							}
/*** Mobile ***/  
@media screen and (min-width:1px) and (max-width:639px) {
	.function-info--frame .info-top--section .info-big--title { font-size:1.7rem; }	
	.function-info--frame .info-top--section .info-small--title { font-size:1rem; }
	
	.function-info--frame .info-cont--section .tab-menu--frame {
		display:flex;
		justify-content:flex-start;
		flex-wrap:wrap;
		width:100%;
		margin-bottom:15px;
		background-color:#fff;
		top:93px;
		left:0;
	}
		.function-info--frame .info-cont--section .tab-list { width:25%; }
	
		.function-info--frame .info-cont--section .tab-btn {
			display:flex;
			justify-content:center;
			align-items:center;
			height:100%;
			background-color:#fafafa;
			font-size:0.8rem;
			border-bottom:1px solid #ccc;
			border-right:1px solid #ccc;
			line-height:1.4;
		}
		
		.function-info--frame .info-cont--section .tab-list:nth-of-type(4n+1) .tab-btn { border-left:1px solid #ccc; }
		
		.function-info--frame .info-cont--section .tab-list:nth-of-type(1) .tab-btn,
		.function-info--frame .info-cont--section .tab-list:nth-of-type(2) .tab-btn,
		.function-info--frame .info-cont--section .tab-list:nth-of-type(3) .tab-btn,
		.function-info--frame .info-cont--section .tab-list:nth-of-type(4) .tab-btn { border-top:1px solid #ccc; }
		
	.function-info--frame .content-view--frame .list-head .list-title { font-size:1.35rem; }
}

/*** Mobile & Tablet ***/
@media screen and (min-width:1px) and (max-width:1216px) {
	.function-info--frame .info-top--section { margin-bottom:30px; }
	
		.function-info--frame .info-top--section .image-box { display:none; }
				
		.function-info--frame .info-top--section .text-box { width:100%; }
		
			.function-info--frame .info-top--section .info-big--title { padding-bottom:15px; }
	
	.function-info--frame .content-view--frame .list-head .list-title,
	.function-info--frame .content-view--frame .list-head .list-desc { width:100%; }
	
	.function-info--frame .content-view--frame .list-head .list-title { padding-bottom:12px; }
}

/*** Tablet ***/
@media screen and (min-width:640px) and (max-width:1216px) {
	.function-info--frame .info-top--section .info-big--title { font-size:2rem; }
}

/*** Tablet & Desktop ***/
@media screen and (min-width:640px) {
	.function-info--frame .info-top--section .info-small--title { font-size:1.3rem; }
	
	.function-info--frame .content-view--frame .list-head .list-title { font-size:1.7rem; }
	
	.function-info--frame .info-cont--section .tab-menu--frame {
		width:150px;
		margin-right:20px;
		top:110px;
		left:0;
	}
	
	.function-info--frame .info-cont--section .tab-list:not(:last-of-type) { margin-bottom:10px; }
	
		.function-info--frame .info-cont--section .tab-list { width:100%; }
		
			.function-info--frame .info-cont--section .tab-btn {
				background-color:#fafafa;
				border:1px solid #ccc;
				border-radius:5px;
			}
	
	.function-info--frame .info-cont--section .content-view--frame { width:calc(100% - 170px); }
}

/*** Desktop ***/
@media screen and (min-width:1217px) {
	.function-info--frame .info-top--section { margin-bottom:40px; }
	
		.function-info--frame .info-top--section .image-box { width:360px; }
		
			.function-info--frame .info-top--section .image-box img {
				max-width:100%;
				vertical-align:top;
			}
			
		.function-info--frame .info-top--section .text-box { width:calc(100% - 400px); }
		
			.function-info--frame .info-top--section .info-big--title {
				padding-bottom:30px;
				font-size:2.15rem;
			}
			
				.function-info--frame .info-top--section .info-big--title .block { display:block; }
	
	.function-info--frame .content-view--frame .list-head .list-desc {
		margin-left:20px;
		padding-bottom:3px;
	}
}