@charset "utf-8";


/* ******************** component ******************** */

/* input */ 
@import "../../component/input-style";

/* table */ 
@import "../../component/normal-table";

/* 컨텐츠 공용 타이틀 */
@import "../../component/title-style";

/* btn-style */ 
@import "../../component/button-style.scss";

/* ******************** sub-common ******************** */ 

/* sub-banner */ 
@import "../common/_sub-banner";

/* sub-tab */ 
@import "../common/_sub-tab";

/* sub-cont */ 
@import "../common/_sub-cont";

/* sub-banner */ 
@import "./_banner";




.ul-wrap {
	margin-top: 20px;
	ul {
		display: flex; gap: 10px;
		li {
			flex: 1; text-align: center; word-break: keep-all; border: 5px solid var(--line-color); padding: 20px 30px 30px;
			.icon-area {
				width: 100px; height: 100px; border-radius: 50%; text-align: center; margin: 15px auto 0;
			}
			img {
				width: 100%; height: 100%;
			}
			p {
				&.tit {
					position: relative; font-weight: 900; font-size: 1.7rem; display: inline-block; padding: 10px 0 0; color: #333;
					&:after {
						content: ""; position: absolute; bottom: -2px; left: -3px; width: calc(100% + 7px); height: 5px; background: rgba(0, 0, 0, .15); border-radius: 5px;
					}
				}
				&.txt {
					font-size: 1.5rem; word-break: keep-all; white-space: normal; padding-top: 15px; line-height: 1.6; color: #555;
				}
			}
		}
	}
}

.process {
	.red {
		display: block; padding-top:15px; font-size:1.3rem; 
	}
	ul {
		display: flex; gap: 15px; flex-wrap: wrap;
		li { 
			text-align: center; font: size 1.5rem;; flex: 1; font-weight: 600; flex: 1;
			div {
				width:100%; padding:10px 0;
			}
			.top {
				background:var(--main-color); color: #fff;
				span { 
					position:relative; top:-1px; font-weight:600; padding:1px 7px 2px 6px; background:#fff; color: var(--main-color); border-radius: 50%;font-size:12px; margin-right:5px; 
				}
			}
			.bottom {
				background:#f8f8f8; border:1px solid #eee; border-top:0; font-weight: 500;
			}
		}
	}
}

.tab {
	padding-bottom: 0 !important;
	.tab-menu {
		ul {
			display: flex; justify-content: center; background-color: #eee;
			li {
				flex-basis: 20%; text-align: center;
				&.active {
					a {
						background: var(--main-color); color: #fff;
						&:after {
							display: block;
						}
					}
				}
				a {
					display: block; font-size: 1.6rem; font-weight: 500; padding: 15px 0; position: relative;
					&:after {
						content: '▼'; font-size: 15px; position: absolute; top: calc(100% - 4px); left: 50%;  transform: translateX(-50%); color: var(--main-color); display: none;
					}
				}
			}
		}
	}
}

@media all and (max-width: 1024px) {
	.tab {
		.tab-menu {
			ul {
				li {
					flex: 1;
					a {
						padding: 13px 0; font-size: 1.5rem;
					}
				}
			}
		}
	}
}

@media all and (max-width: 870px){
	.edu-intro {
		.title-area {
			padding-bottom: 15px; margin-bottom: 15px; 
			.title {
				font-size: 1.6rem;
			}
		}
		.s-title {
			font-size: 1.5rem; padding-left: 10px; margin-bottom: 15px;
			&:after, &:before {
				width: 4px; height: 4px;
			}
		}
		.sub-title {
			font-size: 1.4rem; padding-bottom: 10px;
		}
		.sub-text {
			font-size: 1.3rem;
		}
		.content-sbox {
			margin-bottom: 20px;
			.content-sbox {
				margin-left: 0;
			}
			> .title {
				font-size: 1.4rem; padding: 5px 0 10px 15px;
				&:after {
					font-size: 10px;
				}
			}
		}
	}
	.ul-wrap {
		ul {
			border-right: 3px solid var(--line-color); gap: 0;
			li {
				padding: 20px; border-right: 0; border-width: 3px;
				p.tit {
					font-size: 1.6rem;
				}
				p.txt {
					font-size: 1.2rem; line-height: 1.5; padding-top: 12px;
					br {
						display: none;
					}
				}
				.icon-area {
					width: 60px; height: 60px;
				}
			}
		}
	}
	.process {
		ul {
			gap: 10px;
			li {
				flex: 1 1 25%;
			}
		}
	}
}

@media all and (max-width: 510px){
	.ul-wrap {
		ul {
			li {
				padding: 20px 10px; border-width: 1px;
				p.tit {
					font-size: 1.4rem;
				}
				p.txt {
					text-align: left;
				}
			}
		}
	}
	.process {
		ul {
			gap: 5px;
			li {
				flex: 1 1 40%;
			}
		}
	}
	.tab {
		.tab-menu {
			ul {
				li {
					a {
						padding: 15px 0; font-size: 1.3rem;
					}
				}
			}
		}
	}
}