html {
	width: 100vw;
	overflow-x: hidden !important;
}

body {
	font-family: 'Pretendard Variable', Pretendard, -apple-system,
	BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
	'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji',
	'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}


.inner:not(.apply .inner) {
	width: 670px;
	margin: 0 auto;
}


/******* Header *******/

.screen-overlay {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	transition-duration: 0.3s;
	z-index: 400;
	
	/***** 애니메이션 세팅 제자리로 돌아옴 *****/
	opacity: 0;
	visibility: hidden;
	body.is-modal-open & {
		opacity: 1;
		visibility: visible;
	}
}
.sitemap-modal {
	position: fixed;
	top: 0;
	left: 100%;
	width: 630px;
	height: 100%;
	z-index: 500;
	background-color: #fff;
	box-sizing: border-box;
	transition-duration: 0.3s;
	
	/***** 애니메이션 세팅 제자리로 돌아옴 *****/
	body.is-modal-open & {
		left: 120px;
	}
	
	
	.sitemap-modal-column {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.sitemap-top {
		height: 120px;
		flex-shrink: 0;
		padding: 30px 40px;
		border-bottom: 2px solid #ddd;
		box-sizing: border-box;
		.sitemap-top-row {
			display: flex;
			flex-direction: row;
		}
		.sitemap-logo {
			a {
				display: block;
			}
		}
		.sitemap-modal-close {
			margin-left: auto;
			
			.mobile-icon-close {
				display: block;
				width: 48px;
				height: 48px;
				background-image: url("/m/home/images/main/douzone/close.png");
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 40px auto;
				opacity: 0.8;
			}
		}
	}
	
	.sitemap-body {
		flex: 1;
		padding: 0 40px;
		.sitemap {
			height: 100%;
			.depth1 {
				&:first-child {padding-top: 40px;}
				& > a {
					padding: 30px 0;
					display: block;
					font-size: 36px;
					font-weight: 600;
					line-height: 1.3;
					color: #222;
					&.dropdown-menu {
						.icon-angle-down {
							display: inline-block;
							vertical-align: middle;
							width: 40px;
							height: 40px;
							margin-left: 8px;
							background-image: url("/m/home/images/mobile-icon-angle-down.png");
							background-repeat: no-repeat;
							background-position: center center;
							background-size: 100% auto;
						}
					}
				}
			}
			.depth2 {
				padding: 15px;
				& > li + li{margin-top: 40px;}
				a {
					display: block;
					font-size: 34px;
					font-weight: 500;
					line-height: 1.3;
					color: #222;
				}
			}
		}
	}
	.sitemap-bottom {
		/*padding: 0 40px;*/
		.modal-actions {
			/*padding: 30px 0;*/
			padding: 30px 40px;
			.modal-actions-btn {
				width: 100%;
				height: 90px;
				align-content: center;
				border-radius: 10px;
				background-color: #3F80EA;
				font-size: 36px;
				font-weight: 600;
				color: #fff;
				outline: none;
				cursor: pointer;
				box-sizing: border-box;
				&:hover {
					box-shadow: 0px 0px 10px 0px rgba(140, 152, 164, .5);;
				}
			}
		}
		
		.logo-collection {
			border-top: 2px solid #ddd;
			font-size: 0;
			padding: 30px 40px;
			
			.logo-collection-grid {
				margin: 0 -10px;
				font-size: 0;
				li {
					display: inline-block;
					width: 50%;
					padding: 10px;
					vertical-align: top;
					div {
						height: 80px;
						border-radius: 20px;
						border: 1px solid #ddd;
						box-sizing: border-box;
						align-content: center;
						text-align: center;
					}
				}
			}
		}
	}
}


header {
	width: 750px;
	height: 115px;
	position: fixed;
	z-index: 100;
	background: #fff;
	left: 50%;
	transform: translateX(-50%);
	border-bottom: 1px solid #e0e0e0;
	box-sizing: border-box;
	
	nav {
		.navHead {
			padding: 30px 0 27px 0;
			display: flex;
			justify-content: space-between;
			.ham {
				width: 40px;
				padding-top: 8px;
			}
		}
	}
}



		/***** 포트폴리오 섹션 Start *****/
		.portfolio {
			background-color: #021648;
			padding: 90px 0 60px;
			.portfolio-title {
				h3 {text-align: center;color: #fff !important;font-weight: 700 !important;line-height: 1.4;}
			}
			.portfolio-slider-container {padding: 60px 0 90px;}
			.portfolio-slider {
				.slick-list {margin: 0 -30px;}
				.slick-slide {margin: 0 30px; font-size: 0; opacity: 0.5}
				.slick-center {
					opacity: 1;
				}
				.slick-dots {
					margin-top: 60px;
					display: flex;
					justify-content: center;
					gap: 10px;
					li {
						button {
							display: block;
							font-size: 0;
							width: 12px;
							height: 12px;
							background-color: #fff;
							border-radius: 50%;
							cursor: pointer;
							opacity: 0.3;
							.slick-active & {
								opacity: 1;
							}
						}
					}
				}
				.portfolio-item {
					border-radius: 20px;
					background: #fff;
					overflow: hidden;
					.portfolio-link {display: block;color: inherit;}
					.portfolio-thumb {max-width: 360px; max-height: 300px;overflow: hidden;}
					.portfolio-thumb img {width: 100%;height: 100%;object-fit: cover;}
					.portfolio-content {
						height: 170px;
						padding: 20px 30px 30px;
						box-sizing: border-box;
						overflow: hidden;
						.portfolio-title {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							
							font-size: 22px;
							font-weight: 600;
							line-height: 1.4em;
							letter-spacing: -0.02em;
							color: #222;
							text-align: left;
							
							height: 2.8em;
							margin-top: 15px;
							padding-left: 2px;
						}
						.portfolio-info {
							position: relative;
							.portfolio-course {display: flex;align-items: center;}
							.portfolio-course-label {padding: 0 8px; height: 30px;background-color: #01A3E4;align-content: center;border-radius: 10px;margin-right: 10px;font-size: 16px;color: #fff;text-align: center;}
							.portfolio-course-name {color: #01A3E4;font-style: normal;font-size: 20px;font-weight: 500; letter-spacing: -0.02em;}
						}
						i.portfolio-more-plus {font-style: normal;display: none;width: 20px;height: 20px;background: #00ABFF;color: #fff;border-radius: 12px;margin-left: 2px;}
					}
				}
			}
			.portfolio-actions {
				.portfolio-actions-btn {
					display: block;
					width: 100%;
					height: 88px;
					text-align: center;
					align-content: center;
					border: 2px solid rgba(255, 255, 255, 0.47);
					border-radius: 20px;
					background-color: rgba(2, 22, 72, 0.33);
					
					font-size: 28px;
					font-weight: 500;
					color: #fff;
					letter-spacing: -0.02em;
				}
			}
		}
		/***** 포트폴리오 섹션 End *****/
		
		
		/***** 리뷰 섹션 Start *****/
		.review {padding: 80px 0 14px;margin: 0 auto;background: #fff;
            p {color: revert !important;}
			.review-title {
				h3 {text-align: center;color: #222 !important;font-weight: 700 !important;line-height: 1.4;}
			}
			.review-slider-container {
				position: relative;
				margin-top: 60px;
				padding: 0 20px;
				&::before,
				&::after {content: '';position: absolute;left: 0;width: 100%;z-index: 10;height: 150px;transform: scale(0.945, 1);}
				&::before {top: 0;background: linear-gradient(to top, rgba(250, 250, 250, 0.55), #fafafa);}
				&::after {bottom: 0;background: linear-gradient(to top, #fafafa, rgba(250, 250, 250, 0.55))}
				.bg {width: 100%;height: 100%;position: absolute;left: 0;top: 0;padding: 0 20px;
					div {background: #fafafa;height: 100%;}
				}
				.highlight-box {
					background-color: #fff;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 100%;height: 165px;
					border: 2px solid rgba(20, 169, 228, 0.31);
					box-shadow: 0 0 6px 5px rgba(13, 152, 207, 0.3);
					border-radius: 10px;
					z-index: 0;
				}
				.slider--vertical {
					.slick-list {margin: -10px 0;}
					.slick-slide {border: 0;margin: 10px 0; font-size: 0;
						.txt {
							height: 140px; /* 높이로 여백조절 */
							align-content: center;
							text-transform: uppercase;color: #bbb;line-height: 1.3;font-weight: 500;
							.scale-box {padding: 0 60px;transform: scale(0.8, 0.8);transform-origin: center center;transition: transform 0.3s ease;
								.slick-center & {transform: scale(1, 1); color: #222;}
							}
							.review-text {font-size: 24px;line-height: 1.4em;color: #222;height: 2.8em;align-content: center;}
							.review-author {margin-top: 14px;display: flex;justify-content: center;align-items: center;gap: 12px;
								.review-tag, .review-name {display: block;font-weight: 400}
								.review-tag {display: none;width: 60px;height: 32px;font-weight:300;align-content: center;border-radius: 99px;color: #222;font-size: 18px;
									.slick-center & {display: block;background: #01A3E4;color: #fff;}
								}
								.review-name {font-size: 20px;}
							}
						}
					}
				}
			}
		}
		/***** 리뷰 섹션 End *****/
		
		
		/***** 인터뷰 섹션 Start *****/
		.interview {
			background: #222222;
			padding: 120px 0 60px;
			.interview-title {
				h3 {
					text-align: center;
					color: #fff !important;
					font-weight: 700 !important;
					span {color: #01A3E4;}
				}
			}
			.interview-slider-container {padding: 60px 0 90px;}
			.interview-slider {
				.slick-list {margin: 0 -20px;}
				.slick-slide {margin: 0 20px; font-size: 0; opacity: 0.5}
				.slick-center {opacity: 1;}
				.slick-dots {
					margin-top: 60px;
					display: flex;
					justify-content: center;
					gap: 10px;
					li {
						button {
							display: block;
							font-size: 0;
							width: 12px;
							height: 12px;
							background-color: #fff;
							border-radius: 50%;
							cursor: pointer;
							opacity: 0.3;
							.slick-active & {
								opacity: 1;
							}
						}
					}
				}
				.interview-item {
					padding: 30px;
					border-radius: 20px;
					border: 1px solid #4b4d53;
					box-shadow: 0 2px 7px 0 #343434;
					.interview-content {
						position: relative;
                        height:195px;
						i.interview-quote {
							display: block;
							width: 46px;
							height: 30px;
							background: url("/home/images/main/quotation_douzone.png")no-repeat left top / 30px auto;
						}
						p {
							color: #fff;
							font-size: 22px;
							line-height: 1.5;
							text-align: left;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 4;
							line-clamp: 4;
							-webkit-box-orient: vertical;
						}
					}
					.interview-quick {
						margin-top: 110px;
						display: flex;
						align-items: center;
						border-radius: 15px;
						position: relative;
						color: inherit;
						.interview-thumb {margin-right: 15px;}
						.interview-info {text-align: left;flex: 1;
							strong {color: #fff;font-weight: 200;font-size: 16px;opacity: 0.8;}
							span {display: flex;justify-content: space-between;font-size: 20px;color: #fff;margin-top: 4px;position: relative;}
							i.interview-arrow {
								display: inline-block;
								position: absolute;
								right: 8px;
								top: -15px;
								width: 20px;
								height: 30px;
								text-align: center;
								align-content: center;
								background-image: url("/m/home/images/mobile-icon-angle.svg");
								background-repeat: no-repeat;
								background-position: center;
								background-size: 12px auto;
							}
						}
					}
				}
			}
			.interview-actions {
				.interview-actions-btn {
					display: block;
					width: 100%;
					height: 88px;
					text-align: center;
					align-content: center;
					border-radius: 20px;
					background-color: #00ABFF;
					font-size: 28px;
					font-weight: 500;
					color: #fff;
					letter-spacing: -0.02em;
				}
			}
		}
		/***** 인터뷰 섹션 End *****/



		/***** 취업자현황 섹션 Start *****/
		.employment {
			background-color: #000;
			padding: 120px 0 60px;
			.employment-head {
				margin: 0 40px;
				width: auto;
				text-align: left;
				.employment-title {
					color: #fff !important;
					font-weight: 700 !important;
					span {display: block; color: #fff !important;}
					em {color: #01A3E4;}
				}
				.employment-stats {
					margin-top: 20px;
					.employment-stat {
						font-size: 28px;
						font-weight: 400;
						color: #fff;
						&:nth-child(1) {}
						&:nth-child(2) {color: #e6e6e6;}
						.employment-stat-label {font-size: 30px;}
						.employment-stat-value {font-size: 32px;font-weight: 600;color: #74E4B9;}
					}
				}
			}
			
			.employment-slider-container {
				padding: 60px 0 110px;
				margin-left: 40px;
			}
			.employment-slider {
				overflow: hidden;
				.slick-slide {margin: 0 20px; font-size: 0;opacity: 0.5;}
				.slick-current {opacity: 1;}
				.employment-card {
					.employment-card-link {
						display: block;
						width: 360px;
						position: relative;
						border-radius: 20px;
						background-color: #2B2B2B;
						color: inherit;
						text-align: left;
					}
					.employment-card-logo {
						width: 100%;
						height: 140px;
						border-radius: 20px 20px 0 0;
						overflow: hidden;
						background-color: #fff;
						align-content: center;
						text-align: center;
						
						&.bg-blue {
							background-color: #007CEF;
						}
						img {
							margin: auto;
						}
					}
					.employment-card-body {
						position: relative;
						height: 170px;
						box-sizing: border-box;
						padding: 40px 30px 30px;
						background-color: #2B2B2B;
						border-radius: 0 0 20px 20px;
						
						.employment-card-company {
							.employment-card-company-name {
								font-size: 24px;
								font-weight: 500;
								color: #fff;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
						}
						.employment-card-meta {
							margin-top: 10px;
							.employment-card-meta-row {
								display: flex;
								flex-direction: row;
								align-items: center;
								gap: 12px;
							}
							.employment-card-meta-divider {
								width: 2px;
								height: 14px;
								background-color:#616161;
							}
							.employment-card-meta-item {margin-top: 2px;}
							.employment-card-term {}
							.employment-card-desc {
								font-size: 24px;
								font-weight: 400;
								color: #616161;
							}
						}
					}
				}
			}
			.employment-progressbar {
				margin-top: 40px;
				margin-right: 40px;
				width: auto;
				height: 6px;
				background-color: #4e4e4e;
				border-radius: 20px;
				overflow: hidden;
				.employment-progressbar-fill {
					display: block;
					width: 0;
					height: 100%;
					background-color: #01A3E4;
					border-radius: 20px;
					transition: all 0.2s;
				}
			}
			.employment-actions {
				.employment-actions-btn {
					display: block;
					width: 100%;
					height: 88px;
					text-align: center;
					align-content: center;
					border-radius: 20px;
					background-color: #00ABFF;
					font-size: 28px;
					font-weight: 500;
					color: #fff;
					letter-spacing: -0.02em;
				}
			}
		}
		/***** 취업자현황 섹션 End *****/



		/***** 갤러리 섹션 Start *****/
		.gallery {
			background: #000;
			line-height: 1.4;
			padding: 80px 0;
			color: white;
			.gallery-head {
				text-align: left;
				overflow: hidden;
				margin-left: 40px;
				.gallery-title {
					font-size: 45px;
					font-weight: 700;
					letter-spacing: -0.02em;
					color: white;
					display: flex;
					flex-direction: column;
					em{
						color: #00ABFF;
					}
				}
			}
			.slide-container{
				margin-left: 40px;
				padding: 60px 0 90px;
				.gallery-slider{
					.slick-slide {margin: 0 10px; font-size: 0;opacity: 0.5;}
					.slick-current {opacity: 1;}
                    .gallery-card{
						border-radius: 10px;
						overflow: hidden;
						.gallery-card-link{
							display: block;
							position: relative;
							width: 364px;
							.gallery-card-thumb{
								height: 250px;
								img{
									width: 100%;
									height: 100%;
									object-fit: cover;
									display: block;
								}
							}
							.gallery-card-overlay{
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 250px;
								background: linear-gradient(to bottom, rgba(0, 0 , 0, 0.4))
							}
							.gallery-card-bottom{
								width: 364px;
								background: rgb(28, 28, 28);
								text-align: left;
								box-sizing: border-box;
								padding: 24px 24px;
								.gallery-card-info{
									.gallery-card-title{
										display: block;
										color: white;
										font-size: 24px;
										font-weight: 700;
									}
									.gallery-card-date{
										display: block;
										margin-top: 4px;
										font-size: 20px;
										font-weight: 500;
										color: #888;
									}
								}
							}
						}
					}
				}
			}
			.gallery-actions {
				.gallery-actions-btn {
					display: block;
					width: 100%;
					height: 88px;
					text-align: center;
					align-content: center;
					border-radius: 20px;
					background-color: #00ABFF;
					font-size: 28px;
					font-weight: 500;
					color: #fff;
					letter-spacing: -0.02em;
				}
			}
			.inner {

			}
		}
		/***** 갤러리 섹션 End *****/




/******* 커뮤니티 페이지 전용 탭메뉴 *******/
.community-tabs {
	width: 750px;
	position: fixed;
	top: 115px;
	left: 50%;
	z-index: 99;
	transform: translateX(-50%);
	.community-tabs-list {
		padding: 0 40px;
		border-bottom: 1px solid #E0E0E0;
		background: #fff;
		height: 60px;
		box-sizing: border-box;
		.community-tabs-item {
			display: inline-block;
			padding: 12px 8px;
			
			& + .community-tabs-item {
				margin-left: 40px;
			}
			
			.community-tabs-link {
				font-size: 30px;
				font-weight: 400;
				color: #999;
			}
			
			&.is-active {
				border-bottom: 2px solid #222222;
			}
			&.is-active .community-tabs-link {
				color: #222;
				font-weight: 600;
			}
		}
	}
}



.community-detail-actions {
	/*margin: 60px 0;*/
	padding: 60px 40px;
	.community-actions-btn {
		display: block;
		text-align: center;
		align-content: center;
		font-size: 28px;
		font-weight: 600;
		color: #fff;
		padding: 10px 20px;
		width: 100%;
		height: 80px;
		background-color: #3F80EA;
	
		border-radius: 10px;
		outline: none;
		cursor: pointer;
		box-sizing: border-box;
		
		&:hover {
			box-shadow: 0px 0px 10px 0px rgba(140, 152, 164, .5);;
		}
	}
}

.community-list-actions{
    /*margin: 60px 0;*/
	padding: 60px 40px;
	.community-actions-btn {
		display: block;
		text-align: center;
		align-content: center;
		font-size: 28px;
		font-weight: 600;
		color: #fff;
		padding: 10px 20px;
		width: 100%;
		height: 80px;
		background-color: #3F80EA;
	
		border-radius: 10px;
		outline: none;
		cursor: pointer;
		box-sizing: border-box;
		
		&:hover {
			box-shadow: 0px 0px 10px 0px rgba(140, 152, 164, .5);;
		}
	}
}

/*
.community-list-actions {
	text-align: center;
	.community-actions-btn {
		display: block;
		width: 100%;
		height: 88px;
		line-height: 88px;
		border-radius: 16px;
		font-size: 40px;
		font-weight: 600;
		color: #fff;
		background: #222;
	}
}
*/


/******* Footer *******/
.contact{
  width: 750px;
  margin: 0 auto;
  overflow-x: hidden;
}
footer{
  width: 750px;
  margin: 0 auto;
  overflow-x: hidden;
  position: relative;
  background: #222;
  line-height: 1;
}
footer .inner {
  max-width: 750;
  width: 90%;
  margin: 0 auto;
}


footer .btm_con {
  padding: 40px 0 70px;
}

footer .btm_con p {
  font-size: 24px;
  color: #fff;
  font-weight: 300;
}

footer .btm_con p span {
  font-weight: 200;
  color: rgba(255, 255, 249, 0.6);
}

footer .btm_con .companyName {
  font-size: 28px;
  font-weight: 500;
  color: #fff;
}

footer .btm_con .info {
  margin-top: 40px;
}

footer .btm_con .info li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

footer .btm_con .info li p {
  margin-right: 20px;
  margin-bottom: 10px;
}

footer .btm_con .info li p span {
  margin-left: 10px;
}

footer .btm_con .copyright {
  margin-top: 20px;
}

footer .btm_con .copyright p {
  font-weight: 200;
  color: rgba(255, 255, 249, 0.6);
}


/* 데이터 없음 상태 */
.is-empty {
  width:100%;
  min-height: 200px;
  margin:80px 0 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 8px;

  color: #555;
  text-align: center;
  padding: 20px;
}

/* 아이콘 */
.is-empty .empty-icon {
  font-size: 42px;
  margin-bottom: 8px;
  opacity: 0.55;
}

/* 제목 */
.is-empty .empty-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* 서브텍스트 */
.is-empty {
  font-size: 13px;
  color: #888;
}



/******* topBtn, mainBtn *******/
.topBtn, .mainBtn {
	border: none;
	width: 100px;
	height: 100px;
	background-color: rgba(92, 100, 114, 0.5);
	background-image: url(/m/home/images/main/top_btn.png);
	border-radius: 50%;
	cursor: pointer;
	z-index: 50;
	position: fixed;
	right: 80px;
	bottom: 160px;
	display: none;
}

.mainBtn {
	bottom: 280px;
	background-image: url(/m/home/images/main/main_btn.png);
}