@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300..900&display=swap');


body {
	line-height: 1.4;
	letter-spacing: -0.02em;
}

button {
	background: none;
	cursor: pointer;
	border: 0;
	padding: 0;
}


/* ⚡ 전기 튀는 핵심 */
@keyframes glowElectric {
  0%   { opacity: .45; }
  12%  { opacity: .7; }
  22%  { opacity: .5; }
  35%  { opacity: .78; }
  48%  { opacity: .55; }
  63%  { opacity: .8; }
  78%  { opacity: .52; }
  100% { opacity: .45; }
}

@keyframes auraElectric {
/*
  0%   { opacity: .18; }
  30%  { opacity: .28; }
  55%  { opacity: .22; }
  80%  { opacity: .32; }
  100% { opacity: .2; }
*/
  0%   { opacity: .45; }
  12%  { opacity: .7; }
  22%  { opacity: .5; }
  35%  { opacity: .78; }
  48%  { opacity: .55; }
  63%  { opacity: .8; }
  78%  { opacity: .52; }
  100% { opacity: .45; }

}


@keyframes text-flow {
	0% {
		background-position: 400% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes moveX-left {
	0% {
		transform: translate(0)
	}
	to {
		transform: translate(-100%)
	}
}

@keyframes moveX-right {
	0% {
		transform: translate(-100%)
	}
	
	to {
		transform: translate(0)
	}
}


#header-douzone {
	width: 100%;
	height: 80px;
	background-color: #000;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;
	line-height: 1.4;
	min-width: 1200px;
	
	.inner-header {
		position: relative;
		max-width: 1600px;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		
		.gnb-wrap {
			box-sizing: border-box;
			height: 100%;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.logo {
				position: absolute;
				left: 0;
				font-size: 0;
				
				a {
					display: block;
				}
			}
			
			.main-menu {
				.gnb {
					display: flex;
					
					li {
						a {
							display: block;
							color: #fff;
							font-size: 18px;
							font-weight: 400;
							padding: 0 24px;
						}
					}
				}
			}
			
			.side-menu {
				position: absolute;
				right: 0;
				
				button {
					padding: 8px 24px;
					/*background: linear-gradient(270deg, #8539FF -3.58%, rgba(65, 125, 255, 0.85) 100%), linear-gradient(101.23deg, #8539FF 0%, #417DFF 50.48%, #00EAFF 100%);*/
					background: linear-gradient(270deg, #8539FF -3.58%, rgba(65, 125, 255, 0.85) 100%);
					border-radius: 8px;
					display: flex;
					justify-content: center;
					align-items: center;
					flex: none;
					order: 1;
					flex-grow: 0;
					color: #fff;
					font-size: 16px;
					font-weight: 500;
				}
			}
		}
	}
}


#douzone_pc {
	overflow: hidden;
	
	main {
		padding-top: 80px;
		background-color: #141516;
		
		.main-hero {
			overflow: hidden;
			background-color: #141516;
			position: relative;
			width:100%;
			margin: 0 auto;
			max-width: 1905px;   /* 원본 너비 한계 */
			height: 590px;       /* 높이 고정 */
            min-width:1200px;

			& > img {
				position: absolute;
				left: 50%;
				top: 0;
				width: 1905px;           /* 원본 고정 */
				height: 590px;           /* 원본 고정 */
				transform: translateX(-50%); /* 가운데 정렬 */
				object-fit: cover;
				z-index: 0;
                /*mix-blend-mode: multiply;*/
			}

			.neon-cloud {
				position: absolute;
				left:50%;
				top:0;
				width: 1905px;           /* 원본 고정 */
				height: 590px;           /* 원본 고정 */
				transform: translateX(-50%); /* 가운데 정렬 */
				object-fit: cover;
				pointer-events: none;
				mix-blend-mode: screen;
				z-index: 2;
				
			}

			/* 메인 네온 */
			
			.neon-glow {
				fill: none;
				stroke: url(#baseNeon);
				stroke-width: 7;
				filter: blur(4px);
				opacity: .55;
				animation: glowElectric 3.1s linear infinite;
			}
			
			/* 바깥 오라 */
			
			.neon-aura {
				fill: none;
				stroke: url(#baseNeon);
				stroke-width: 13;
				filter: blur(14px);

				opacity: .22;
				animation: auraElectric 3.9s linear infinite;
			}
			
			.inner {
				position: relative;
				height: 100%;
				box-sizing: border-box;
			}
			
			.main-hero-content {
				/*border: 2px solid red;*/
				position: relative;
				height: 100%;
				padding: 200px 0;
				box-sizing: border-box;
				
				.main-hero-title {
					/*border: 2px solid red;*/
					width: 600px;
					
					.sub-title {
						display: block;
						color: #ccc;
						font-size: 20px;
						font-weight: 400;
					}
					
					.main-title {
						font-size: 60px;
						font-weight: 600;
						line-height: 1.25;
						letter-spacing: -0.02em;
						color: #fff;
					}
				}
				
				.main-hero-buttons {
					display: none;
					margin-top: 24px;
					/*display: flex;*/
					gap: 12px;
					
					.hero-btn {
						display: inline-flex;
						justify-content: center;
						align-items: center;
						
						border-radius: 12px;
						color: #fff;
						font-size: 20px;
						font-weight: 400;
						padding: 12px 24px;
						gap: 6px;
						cursor: pointer;
						background: linear-gradient(270deg, #8539FF -3.58%, rgba(65, 125, 255, 0.85) 100%),
						linear-gradient(101.23deg, #8539FF 0%, #417DFF 50.48%, #00EAFF 100%);
					}
				}
			}
		}
		
		
		.cloud-information {
			padding-top: 40px;
			background-color: #141516;
			
			.detail-card-list {
				display: flex;
				gap: 24px;
				margin-bottom: 24px;
				
				.detail-card {
					flex-shrink: 0;
					width: 282px;
					height: 110px;
					background: #272B31;
					border-radius: 12px;
					padding: 16px 0;
					text-align: center;
					
					.detail-card-title {
						font-size: 18px;
						font-weight: 600;
						color: #9D84FF;
						margin-bottom: 8px;
					}
					
					.detail-card-txt {
						font-size: 16px;
						color: #fff;
					}
				}
			}
			
			.strip-benefit-banner {
				font-size: 0;
				position: relative;
				
				img {
					width: 100%;
					image-rendering: -moz-crisp-edges;
					image-rendering: -webkit-optimize-contrast;
					image-rendering: crisp-edges;
					transform: translateZ(0);
					backface-visibility: hidden;
				}
				
				.caption-box {
					position: absolute;
					left: 200px;
					top: 96px;
					padding: 16px 24px;
					background: rgba(35, 27, 87, 0.6);
					box-shadow: 0px 0px 20px rgba(35, 27, 87, 0.5);
					backdrop-filter: blur(10px);
					border-radius: 12px;
					border: 1px solid rgba(0, 0, 0, 0.11);
					
					p {
						font-size: 14px;
						font-weight: 400;
						color: #ccc;
					}
				}
			}
		}


		.instructor-about{
			padding-top: 190px;
			.title {
				text-align: center;
				h2 {
					display: inline-block;
					font-size: 42px;
					font-weight: 500;
					color: #fff;
					line-height: 1.2;
					letter-spacing: -0.02em;
					span {
                        font-size: 36px;
                        font-weight: 500;
						display: block;
						background: linear-gradient(94deg, #D62BFF -1%, #58C2FF 72%), transparent;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;


                        &.neon-text{
                            background: linear-gradient(
                                90deg,
                                #01D0FF,
                                #85f0ff,
                                #f553ff,
                                #01D0FF
                            );
                            background-size: 400% 100%;
                            animation: text-flow 12s linear infinite;

                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            filter: none;
                            text-shadow: none;
                        }
					}
				}
				.sub-txt {
					margin-top: 24px;
					p {
						font-size: 20px;
						font-weight: 300;
						color: #ccc;
						text-align: center;
					}
				}
			}
			.instructor-about-content{
				position: relative;
				display: flex;
				gap: 24px;
				margin-top: 60px;
				.instructor-about-left{
					position: relative;
					width: 384px;
					flex-shrink: 0;
					.icon-box {
						position: absolute;
						left: 290px;
						
						img {
							image-rendering: -moz-crisp-edges;
							image-rendering: -webkit-optimize-contrast;
							image-rendering: crisp-edges;
							transform: translateZ(0);
							backface-visibility: hidden;
						}
						&.medal {
							top: 60px;
							img {
								width: auto;
								height: 85px;
							}
						}
						&.paper {
							top: 250px;
							img {
								width: auto;
								height: 84px;
							}
						}
						&.book {
							top: 450px;
							img {
								width: auto;
								height: 78px;
							}
						}
					}
				}
				.instructor-about-right{
					position: relative;
					height: 720px;
					img {
						width: auto;
						height: 100%;
					}
					button{
						z-index:100;
						width: 203px;
						height: 36px;
						background: transparent;
						position: absolute;
						bottom: 240px;
						left: 60px;
						border-radius: 8px;
						cursor: pointer;
					}
				}
			}


            .floating-overlay-box {
				display: none;
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 9998;
				background-color: rgba(0, 0, 0, 0.7);
				cursor: pointer;
			}
            .floating-profile {
				display: none;
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 9999;
				cursor: pointer;
				
				.floating-profile-inner {
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.profile-container {
					position: relative;
					
					.profile-image {
						image-rendering: -moz-crisp-edges;
						image-rendering: -webkit-optimize-contrast;
						image-rendering: crisp-edges;
						transform: translateZ(0);
						backface-visibility: hidden;
                        width:100%;
                        max-width:1488px;
					}
					
					.close-icon {
						position: absolute;
						right: 0;
						bottom: calc(100% + 10px);
						width: 50px;
						height: 50px;
						background-image: url("/home/images/main/douzone/new/icon-close-profile.svg");
						background-repeat: no-repeat;
						background-position: center;
						background-size: 50px auto;
						cursor: pointer;
					}
				}
			}
		}

		.instructor-process {
			padding-top: 160px;
			
			.title {
				text-align: center;
				h2 {
					display: inline-block;
					font-size: 42px;
					font-weight: 500;
					color: #fff;
					line-height: 1.2;
					letter-spacing: -0.02em;
					span {
                        font-size: 36px;
                        font-weight: 500;
						display: block;
						background: linear-gradient(94deg, #D62BFF -1%, #58C2FF 72%), transparent;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;

                        &.neon-text{
                            background: linear-gradient(
                                90deg,
                                #01D0FF,
                                #85f0ff,
                                #f553ff,
                                #01D0FF
                            );
                            background-size: 400% 100%;
                            animation: text-flow 12s linear infinite;

                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            filter: none;
                            text-shadow: none;
                        }						
					}
				}
				.sub-txt {
					margin-top: 24px;
					p {
						font-size: 20px;
						font-weight: 300;
						color: #ccc;
						text-align: center;
					}
				}
			}
			.instructor-process-content {
				margin-top: 60px;
				font-size: 0;
			}
		}
		.instructor-comment {
			padding-top: 160px;
			padding-bottom: 110px;
			.title {
				text-align: center;
				h2 {
					display: inline-block;
					font-size: 42px;
					font-weight: 600;
					color: #fff;
					line-height: 1.2;
					letter-spacing: -0.02em;
					span {
						display: block;
						background: linear-gradient(94deg, #D62BFF -1%, #58C2FF 72%), transparent;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;

                        &.neon-text{
                            background: linear-gradient(
                                90deg,
                                #01D0FF,
                                #85f0ff,
                                #f553ff,
                                #01D0FF
                            );
                            background-size: 400% 100%;
                            animation: text-flow 12s linear infinite;

                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            filter: none;
                            text-shadow: none;
                        }						
					}
				}
			}
			
			.content {
				margin-top: 60px;
				position: relative;
				.overlay-box {
					position: absolute;
					top: 0;
					bottom: 0;
					width: 100px;
					z-index: 10;
					&.left {
						left: 0;
						background: linear-gradient(90deg, #141516 0%, rgba(20, 21, 22, 0.5) 51.44%, rgba(20, 21, 22, 0) 100%);
					}
					&.right {
						right: 0;
						background: linear-gradient(-90deg, #141516 0%, rgba(20, 21, 22, 0.5) 51.44%, rgba(20, 21, 22, 0) 100%);
					}
				}
				.comment-wrapper {
					display: flex;
					flex-direction: column;
					gap: 12px;
				}
				.comment-list-track {
					flex-shrink: 0;
					display: flex;
					overflow: hidden;
				}
				.comment-list {
					flex-shrink: 0;
					display: flex;
					&.left {animation: 30s linear infinite moveX-left;}
					&.right {animation: 30s linear infinite moveX-right;}
					.comment-item {
						margin-right: 12px;
						flex-shrink: 0;
						width: 290px;
						height: 120px;
						background-color: #272B31;
						border: 1px solid #383838;
						border-radius: 12px;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 0px 24px;
						box-sizing: border-box;
						.comment-item-row {
							display: flex;
							gap: 12px;
							flex-direction: row;
						}
						.comment-item-icon {
							flex-shrink: 0;
							i {
								display: block;
								width: 36px;
								height: 36px;
								background-repeat: no-repeat;
								background-size: 36px auto;
								background-position: center;
								&.icon-thumbs-up {
									background-image: url("/home/images/main/douzone/new/icon-thumbs-up.svg");
								}
								&.icon-star {
									background-image: url("/home/images/main/douzone/new/icon-star.svg");
								}
								&.icon-heart {
									background-image: url("/home/images/main/douzone/new/icon-heart.svg");
								}
							}
						}
						.comment-item-txt {
							flex: 1;
							font-size: 15px;
							line-height: 1.5em;
							height: 4.5em;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							p {
								letter-spacing: -0.025em;
								font-weight: 300;
								color: #fff;
							}
						}
					}
			
				}
			}
		}

		
		.cloud-graph {
			padding: 160px 0 120px;
			/*background-color: #000;*/
			background-color: #141516;
			
			.cloud-title-group {
				max-width: 550px;
				margin: 0 auto;
				
				.title {
					h2 {
						color: #fff;
						font-size: 42px;
						font-weight: 600;
						letter-spacing: -0.02em;
						line-height: 1.2;
						text-align: center;
					}
					
					strong {
						/*border: 2px solid red;*/
						
						&.neon-text {
							background: linear-gradient(
											90deg,
											#01D0FF,
											#85f0ff,
											#f553ff,
											#01D0FF
							);
							background-size: 400% 100%;
							animation: text-flow 12s linear infinite;
							
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							filter: none;
							text-shadow: none;
						}
						
					}
				}
				
			}
			
			.content {
				font-size: 0;
				margin-top: 60px;
				img {
					width: 100%;
				}
			}
			
			.txt {
				margin-top: 24px;
				width: 500px;
				
				p {
					span {
						color: #e8e8e8;
					}
					
					font-size: 20px;
					font-weight: 400;
					color: #767676;
					line-height: 1.4;
				}
			}
		}
		
		.cloud-services {
			position: relative;
			
			.cloud-services-inner {
				/*background-color: #141516;*/
				/*background-color: #1A1C1E;*/
				background: linear-gradient(360deg, #313380 -1.6%, #141516 100%);
				
				.title {
					width: 1200px;
					margin: 0 auto;
					text-align: center;
					
					h2 {
						display: inline-block;
						font-size: 36px;
						font-weight: 500;
						color: #fff;
						line-height: 1.2;
						letter-spacing: -0.02em;
						
						span {
							display: block;
							/*background: linear-gradient(94deg, #D62BFF -1%, #58C2FF 72%), transparent;*/
							/*-webkit-background-clip: text;*/
							/*-webkit-text-fill-color: transparent;*/
							/*background-clip: text;*/
							/*text-fill-color: transparent;*/
						}
					}
					
					.sub-txt {
						margin-top: 24px;
						
						p {
							font-size: 20px;
							font-weight: 300;
							color: #ccc;
							text-align: center;
						}
					}
				}
				
				.content {
					padding: 90px 0 240px;
					
					.cloud-services-track {
						display: flex;
						
						.cloud-service-list {
							flex-shrink: 0;
							display: flex;
							animation: 40s linear infinite moveX-left;
							
							.cloud-service-item {
								flex-shrink: 0;
								width: 230px;
								height: 230px;
								background: #272B31;
								border-radius: 12px;
								margin-right: 24px;
								display: inline-flex;
								flex-direction: column;
								padding-top: 24px;
								align-items: center;
								box-sizing: border-box;
								
								.image {
									img {
										width: 140px;
										height: auto;
										image-rendering: -moz-crisp-edges;
										image-rendering: -webkit-optimize-contrast;
										image-rendering: crisp-edges;
										transform: translateZ(0);
										backface-visibility: hidden;
									}
								}
								
								.label {
									margin-top: 2px;
									font-size: 20px;
									font-weight: 400;
									color: #fff;
									text-align: center;
								}
							}
						}
					}
				}
			}
			
			.cloud-services-message {
				position: absolute;
				bottom: 200px;
				left: 50%;
				transform: translateX(-50%);
				
				p {
					text-align: center;
					color: #fff;
					font-size: 32px;
					font-weight: 400;
					line-height: 1.4;
					
					span {
						color: #63E5FF;
						font-weight: 600;
					}
				}
			}
			
			.cloud-services-bg-bottom {
				margin-top: -1px;
				background-color: #1A1C1E;
				/*background-color: #1A1E26;*/
				
				img {
					width: 100%;
					min-width: 1200px;
				}
			}
		}
		
		
		.program {
			background-color: #1A1C1E;
			padding-top: 120px;
			padding-bottom: 120px;
			
			.program-headline {
				position: relative;
				.title {
					text-align: center;
					.top {
						display: none;
						color: #00eaff;
						font-size: 24px;
						font-weight: 500;
					}
					h2 {
						font-size: 48px;
						font-weight: 600;
						line-height: 1.25;
						color: #fff;
						text-align: center;
						
						strong {
							/*font-size: 42px;*/
							font-weight: 500;
							&.neon-text {
								background: linear-gradient(
												90deg,
												#01D0FF,
												#85f0ff,
												#f553ff,
												#01D0FF
								);
								background-size: 400% 100%;
								animation: text-flow 12s linear infinite;
								
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								filter: none;
								text-shadow: none;
							}
							
							/*font-size: 42px;*/
							/*display: inline-block;*/
							/*!*border: 1px solid red;*!*/
							/*!*display: block;*!*/
							/*background: linear-gradient(100deg, #8539FF 0%, #417DFF 50%, #00EAFF 100%);*/
							/*!*background: linear-gradient(90deg, #79A5FF 0%, #67F0FF 56.25%, #6E6CFF 98.08%);*!*/
							/*-webkit-background-clip: text;*/
							/*-webkit-text-fill-color: transparent;*/
							/*background-clip: text;*/
							/*text-fill-color: transparent;*/
						}
					}
					
			
					
					span {
						display: block;
					}
				}
			}
			.curriculum-roadmap {
				position: relative;
				padding-top: 140px;
				.curriculum-roadmap-head {
					position: relative;
					/*border: 1px solid red;*/
					.title {
						/*text-align: center;*/
						span {
							display: block;
							font-size: 20px;
							font-weight: 500;
							color: #00EAFF;
						}
						
						h2 {
							margin-top: 4px;
							font-size: 38px;
							font-weight: 500;
							line-height: 1.2;
							color: #fff;
						}
						
						.sub-txt {
							margin-top: 16px;
							
							p {
								font-size: 18px;
								font-weight: 400;
								color: #ccc;
							}
						}
					}
					.notice-orientation {
						/*border: 1px solid orange;*/
						text-align: right;
						position: absolute;
						right: 0;
						bottom: 0;
						
						p {
							color: #999;
							font-size: 16px;
							font-weight: 400;
							/*line-height: 1.6;*/
						}
					}
				}
				.curri-layout {
					margin-top: 40px;
					box-sizing: border-box;
					position: relative;
					display: flex;
					height: 786px;
					border-radius: 16px;
					.neon-frame {
						position: absolute;
						inset: 0;
						width: 100%;
						height: 100%;
						pointer-events: none;
					}
					.curri-steps {
						width: 360px;
						padding: 24px 32px;
						flex-shrink: 0;
						display: flex;
						flex-direction: column;
						gap: 12px;
						border-right: 2px solid #163A42;
						box-sizing: border-box;
						
						.curri-step {
							position: relative;
							width: 100%;
							padding: 16px 24px;
							/*background-color: transparent;*/
							border-radius: 12px;
							/*overflow: hidden;*/
							cursor: pointer;
							box-sizing: border-box;
							background-color: rgba(0, 234, 255, 0);
							
							span {
								display: block;
								
								&.curri-step-number {
									font-size: 16px;
									font-weight: 300;
									color: #ccc;
									text-transform: uppercase;
								}
								
								&.curri-step-title {
									margin-top: 2px;
									font-size: 18px;
									font-weight: 400;
									color: #fff;
								}
							}
							
							&.is-active {
								background-color: rgba(0, 234, 255, 0.5);
								/*background-color: #00EAFF;*/
								/*background-color: #368291;*/
								
								&::after {
									background: radial-gradient(50% 50% at 50% 50%, #00EAFF 0%, #00EAFF 50%, #141516 51%, #141516 100%);
								}
							}
							
							&::after {
								content: "";
								display: block;
								position: absolute;
								right: -41px;
								top: 50%;
								transform: translateY(-50%);
								width: 16px;
								height: 16px;
								border-radius: 50%;
								border: 2px solid #163A42;
								box-sizing: border-box;
								background: #141516;
								cursor: pointer;
							}
						}
					}
					.curri-detail {
						box-sizing: border-box;
						padding: 36px 36px;
						flex: 1;
						/*&::-webkit-scrollbar {width: 6px;}*/
						/*&::-webkit-scrollbar-track {*/
						/*	background-color: gray;*/
						/*	border-radius: .6rem*/
						/*}*/
						/*&::-webkit-scrollbar-thumb {*/
						/*	background: #4a4a4a;*/
						/*	border-radius: .6rem*/
						/*}*/
						/*&::-webkit-scrollbar-thumb:hover {background: #01A3E4}*/
						
						.curri-detail-panel {
							height: 100%;
							
							.curri-detail-column {
								height: 100%;
								display: flex;
								flex-direction: column;
								gap: 24px;
							}
							
							.curri-detail-head {
								/*display: none;*/
								position: relative;
							}
							
							.curri-title {
								/*display: none;*/
								padding-left: 8px;
								padding-top: 8px;
								position: relative;
								/*border: 1px solid red;*/
								
								h6 {
									/*display: none;*/
									font-size: 24px;
									font-weight: 500;
									letter-spacing: -0.025em;
									/*color: #00EAFF;*/
									
									color: #00EAFF;
									opacity: 0.8;
									/*color: #63E5FF;*/
									/*color: #fff;*/
								}
							}
							
							.curri-block {
								background-color: #272B31;
								border: 1px solid rgba(164, 164, 164, 0.1);
								padding: 24px;
								display: flex;
								flex-direction: column;
								gap: 24px;
								border-radius: 16px;
								
								&.curri-module {
									flex: 1;
								}
								
								.curri-block-row {
									display: flex;
									flex-direction: row;
									
									.curri-block-left {
										/*width: 260px;*/
										width: 300px;
										flex-shrink: 0;
										
										.curri-block-title {
											display: flex;
											gap: 4px;
											align-items: flex-start;
											font-size: 16px;
											font-weight: 400;
											color: #fff;
											
											strong {
												span {
													color: #989898;
												}
											}
											
											&::before {
												content: "";
												display: block;
												width: 20px;
												height: 20px;
												background-image: url("/home/images/main/douzone/new2/checkbox-cyan-2x.webp");
												background-repeat: no-repeat;
												background-position: center;
												background-size: auto 15px;
											}
										}
									}
									
									.curri-block-right {
										
										.curri-block-group {
											& + .curri-block-group {
												margin-top: 24px;
											}
											
										}
										
										.curri-group-title {
											font-size: 16px;
											font-weight: 300;
											color: #00EAFF;
											opacity: 0.8;
										}
										
										.curri-block-txt,
										.curri-block-list,
										.curri-group-list {
											font-size: 15px;
											font-weight: 400;
											color: #ccc;
											line-height: 1.6;
											
											&.curri-about-txt {
												line-height: 1.7;
											}
											
											em {
												font-weight: 500;
												color: #fff;
											}
										}
										
										.curri-block-list,
										.curri-group-list {
											li {
												margin-top: 4px;
												
												&.list1 {
													margin-top: 0;
												}
												
												&::before {
													content: "";
													display: inline-block;
													vertical-align: middle;
													width: 4px;
													height: 4px;
													border-radius: 50%;
													background-color: #ccc;
													margin-right: 12px;
												}
											}
										}
										
										.curri-block-list {
											li {
												margin-top: 0;
											}
										}
										
										.curri-block-notice {
											/*color: #fff;*/
											margin-top: 12px;
											font-size: 16px;
											color: #3ef8e8;
											font-weight: 300;
											
											em {
											}
											
											span {
											}
										}
									}
								}
								
								.curri-module-caption {
									margin-top: 24px;
									color: #fff;
									font-size: 18px;
									padding-left: 12px;
									text-decoration: underline;
									opacity: 0.9;
								}
							}
						}
						
						.curri-detail-panel[hidden] {
							display: none;
						}
						
						.curri-detail-panel.is-active {
							display: block;
						}
						
					}
				}
				
				.section-divider {
					display: none;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					width: 1280px;
					height: 1px;
					background: rgba(255, 255, 255, 0.2);
					margin: 0 auto;
				}
			}
			
			
			/****** 팀프로젝트 ******/
			.team-project {
				position: relative;
				padding-top: 160px;
				.team-project-head {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					
					.title {
						& h2 {
							& span {
								font-size: 20px;
								font-weight: 500;
								color: #00EAFF;
							}
							
							& strong {
								margin-top: 4px;
								display: block;
								font-size: 38px;
								font-weight: 500;
								line-height: 1.2;
								color: #fff;
							}
						}
						
						.sub-txt {
							margin-top: 16px;
							font-size: 18px;
							font-weight: 400;
							color: #ccc;
						}
					}
					
					.project-btn-more {
					    display: flex;
						align-items: center;
						gap: 4px;
						background: #24272B;
						border: 1px solid #A4A4A410;
						border-radius: 8px;
						padding: 10px 20px;
						line-height: 1.2;
						font-size: 16px;
						font-weight: 500;
						color: #fff;
						
						i.icon-angle-right {
							display: block;
							width: 18px;
							height: 18px;
							background-image: url("/home/images/main/douzone/new2/icon-angle-medium.svg");
							background-repeat: no-repeat;
							background-position: center;
							background-size: auto 16px;
						}
					}
				}
				
				.project-layout {
					display: flex;
					margin-top: 60px;
					
					.project-steps {
						width: 284px;
						height: auto;
						display: flex;
						flex-direction: column;
						gap: 12px;
						padding-right: 24px;
						
						.project-step {
							width: 100%;
							height: auto;
							background: #272B31;
							border: 1px solid #A4A4A410;
							border-radius: 12px;
							display: flex;
							flex-direction: column;
							gap: 4px;
							padding: 32px;
							font-weight: 400;
							cursor: pointer;
							
							.project-step-number {
								font-size: 16px;
								color: #ababab;
							}
							
							.project-step-name {
								font-size: 18px;
								white-space: nowrap;
								color: #fff;
							}
						}
						
						.is-active {
							background: #0A808A;
							
							.project-step-number {
								color: #fff;
							}
						}
					}
					
					.project-detail {
						position: relative;
						width: 916px;
						height: auto;
						border: 1px solid #00eaff10;
						border-radius: 16px;
						padding: 24px;
						
						.neon-frame {
							position: absolute;
							inset: 0;
							width: 100%;
							height: 100%;
							pointer-events: none;
						}
						
						.project-detail-block {
							width: 100%;
							height: 100%;
							background: #272B31;
							border: 1px solid #A4A4A410;
							border-radius: 16px;
							padding: 48px;
							
							.detail-content {
								.detail-info {
									position: relative;
									
									.detail-tag-list {
										display: flex;
										gap: 8px;
										.project-tag {
											height: 33px;
											padding: 6px 16px;
											border: 2px solid #148A98;
											border-radius: 16px;
											color: #fff;
											font-size: 14px;
											font-weight: 400;
											/*color: rgb(255, 255, 255, 0.6);*/
										}
									}
									
									.detail-info-txt {
										margin-top: 24px;
										
										strong {
											font-size: 24px;
											font-weight: 500;
											color: #fff;
										}
										.sub-txt {
											margin-top: 12px;
											width: 70%;
											p {
												font-size: 16px;
												font-weight: 300;
												color: #ccc;
												/*color: rgb(255, 255, 255, 0.6);*/
											}
										}
									}
									.detail-pagination {
										position: absolute;
										right: 0;
										bottom: 0;
										line-height: 40px;
										display: flex;
										align-items: center;
										
										button {
											width: 42px;
											height: 42px;
											background: rgba(26, 29, 33, 0);
											border-radius: 8px;
											display: flex;
											justify-content: center;
											align-items: center;
											cursor: pointer;
											
											&:hover {
												background: rgba(26, 29, 33, 1);
											}
											
											&.btn-prev {
												transform: rotate(-180deg);
											}
											&.btn-next {
												transform: rotate(0deg);
											}
											
											.icon-angle-right.medium {
												width: 24px;
												height: 24px;
												background-image: url("/home/images/main/douzone/new2/icon-angle-medium.svg");
												background-repeat: no-repeat;
												background-position: center;
												background-size: auto 100%;
												opacity: 0.9;
											}
										}
										
										.pagination-number {
											padding: 0 16px;
											display: flex;
											span {
												font-size: 20px;
												font-weight: 400;
												color: #767676;
												width: 16px;
												text-align: center;
												&.current {
													color: #fff;
												}
											}
										}
									}
								}
								.detail-slide-container {
									margin-top: 48px;
									img {
										width: 100%;
									}
								}
							}
						}
						
						.project-detail-panel[hidden] {
							display: none;
						}
						
						.project-detail-panel.is-active {
							display: block;
						}
					}
				}
				.section-divider {
					display: none;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					width: 1280px;
					height: 1px;
					background: rgba(255, 255, 255, 0.2);
					margin: 0 auto;
				}
			}
			
			
			
			/****** 강사소개 ******/
			.mentor {
				padding-top: 160px;
				.mentor-head {
					.title {
						text-align: center;
						span {
							display: block;
							font-size: 20px;
							font-weight: 500;
							color: #00EAFF;
						}
						
						h2 {
							margin-top: 4px;
							font-size: 38px;
							font-weight: 500;
							line-height: 1.3;
							color: #fff;
						}
						
						.sub-txt {
							margin-top: 16px;
							
							p {
								font-size: 18px;
								font-weight: 400;
								color: #ccc;
							}
						}
					}
				}
				
				.mentor-profile-container {
					margin-top: 60px;
					padding: 48px;
					background-color: #272B31;
					border: 1px solid rgba(164, 164, 164, 0.1);
					border-radius: 16px;
					.mentor-comment {
						padding-left: 8px;
						.quotes-mark {
							img {
								image-rendering: -moz-crisp-edges;
								image-rendering: -webkit-optimize-contrast;
								image-rendering: crisp-edges;
								transform: translateZ(0);
								backface-visibility: hidden;
							}
						}
						p {
							margin-top: 12px;
							font-size: 24px;
							font-weight: 500;
							color: #ffffff;
							line-height: 1.6;
						}
					}
					.mentor-tag-list{
						margin-top: 32px;
						display: flex;
						gap: 8px ;
						.tag{
							background: #1E3B3E;
							border-radius: 16px;
							padding: 6px 16px;
							span{
								font-size: 16px;
								color: #1BFCFB;
							}
						}
					}
					.mentor-info-box {
						position: relative;
						margin-top: 32px;
						padding: 32px 40px;
						background-color: #1D1F22;
						border-radius: 16px;
						.profile-meta {
							position: relative;
							padding-bottom: 21px;
							em {
								color: #00EAFF;
								font-size: 16px;
								font-weight: 500;
							}
							.name {
								display: block;
								font-size: 20px;
								font-weight: 500;
								color: #fff;
							}
							.divider {
								position: absolute;
								bottom: 0;
								width: 66%;
								height: 1px;
								background-color: rgba(255, 255, 255, 0.2);
							}
						}
						.profile-detail {
							padding-top: 20px;
							span {
								display: block;
								font-size: 16px;
								color: #fff;
								font-weight: 500;
							}
							.profile-detail-row {
								display: flex;
								flex-direction: row;
								ul {
									width: 35%;
									li {
										margin-top: 4px;
										position: relative;
										padding-left: 15px;
										font-size: 16px;
										font-weight: 400;
										color: #ccc;
										&.current {
											font-weight: 600;
										}
										span{
											display: inline;
											font-weight: 600;
											color: #ccc;
											
										}
										&::before {
											content: "";
											position: absolute;
											top: 9px;
											left: 0;
											width: 3px;
											height: 3px;
											background-color: currentColor;
											border-radius: 50%;
										}
									}
								}
							}
						}
						.profile-image {
							position: absolute;
							right: 48px;
							bottom: 0;
							img {
								width: 220px;
								image-rendering: -moz-crisp-edges;
								image-rendering: -webkit-optimize-contrast;
								image-rendering: crisp-edges;
								transform: translateZ(0);
								backface-visibility: hidden;
							}
						}
					}
				}
			}
		}
		
		.community-douzone {
			background: #141516;
			padding: 120px 0 160px;
			
			.community-headline {
				.title {
					text-align: left;
					
					.top {
						color: #999;
						font-size: 20px;
						font-weight: 500;
						display: none;
					}
					
					h2 {
						line-height: 1.25;
						
						strong {
							display: inline-block;
							font-size: 54px;
							font-weight: 500;
							
							&.neon-text {
								/*border: 1px solid red;*/
								background: linear-gradient(
												90deg,
												#01D0FF,
												#85f0ff,
												#f553ff,
												#01D0FF
								);
								background-size: 400% 100%;
								animation: text-flow 12s linear infinite;
								
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								filter: none;
								text-shadow: none;
							}
						}
						
						span {
							/*font-size: 52px;*/
							font-size: 54px;
							font-weight: 600;
							display: block;
							color: #fff;
						}
					}
				}
			}
			
			
			.interview-slide-control,
			.gallery-slide-control {
				display: flex;
				align-items: center;
				gap: 18px;
				button {
					width: 42px;
					height: 42px;
					background: #1A1D21;
					border-radius: 8px;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					&.btn-prev {transform: rotate(-180deg);}
					&.btn-next {transform: rotate(0);}
					i.icon-angle-right.medium {
						display: block;
						width: 24px;
						height: 24px;
						background-image: url("/home/images/main/douzone/new2/icon-angle-medium.svg");
						background-repeat: no-repeat;
						background-position: center;
						background-size: auto 100%;
						opacity: 0.9;
					}
				}
			}
			
			.interview {
				padding-top: 160px;
				.interview-head {
					width: 1200px;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					
					.title {
						.top {
							font-size: 20px;
							font-weight: 500;
							color: #00EAFF;
							display: block;
						}
						a.main-txt {
							display: flex;
							align-items: center;
							margin-top: 4px;
							position: relative;
							h2 {
								font-size: 38px;
								font-weight: 500;
								line-height: 1.2;
								color: #fff;
							}
							.icon-angle-right.large {
								flex-shrink: 0;
								width: 32px;
								height: 32px;
								margin-left: 12px;
								background-image: url("/home/images/main/douzone/new2/icon-angle-large.svg");
								background-repeat: no-repeat;
								background-position: center;
								background-size: auto 100%;
							}
						}
					}
				}
				
				.interview-slide-container {
					position: relative;
					height: 340px;
					margin-top: 60px;

					.slick-slide {				
						margin: 0 12px;
						
						/*opacity: 0.6;*/
					}
					
					.slick-current {
						/*opacity: 1;*/
					}

					.interview-card-slider {
						position: absolute;
						height: 100%;
						
						.interview-card {
							width: 386px;
							height: 340px;
							background: #272B31;
							border: 1px solid rgba(164, 164, 164, 0.1);
							border-radius: 12px;
							flex-shrink: 0;
							
							.interview-card-link {
								width: 386px;
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								
								.interview-card-txt {
									padding: 32px 32px 0 32px;
									
									.quotes-mark {
										opacity: 0.5;
										display: none;
										img {
											width: auto;
											height: 16px;
											image-rendering: -moz-crisp-edges;
											image-rendering: -webkit-optimize-contrast;
											image-rendering: crisp-edges;
											transform: translateZ(0);
											backface-visibility: hidden;
										}
									}
									.card-title {
										/*margin-top: 8px;*/
										display: block;
										font-size: 20px;
										font-weight: 600;
										color: #fff;
									}
									.card-txt {
										margin-top: 24px;
										p {
											font-size: 18px;
											font-weight: 300;
											
											/*color: rgb(255, 255, 255, 0.6);*/
											color: #ccc;
											display: -webkit-box;
											-webkit-line-clamp: 3;
											-webkit-box-orient: vertical;
											overflow: hidden;
										}
									}
								}
								
								.interview-card-bottom {
									display: flex;
									padding: 24px 32px;
									justify-content: space-between;
									align-items: center;
									
									.interview-card-profile {
										display: flex;
										align-items: center;
										gap: 16px;
										
										.profile-avatar {
											width: 60px;
											height: 60px;
											overflow: hidden;
											border-radius: 50%;
											
											border: 2px solid transparent;
											background-image: linear-gradient(#000, #000),  linear-gradient(101deg, #8539FF 0%, #417DFF 50.48%, #00EAFF 100%);
											background-origin: border-box;
											background-clip: content-box, border-box;
											
											display: flex;
											justify-content: center;
											align-items: center;
											box-sizing: border-box;
											
											img {
												width: auto;
												height: 52px;
											}
										}
										
										.profile-name {
											span {
												font-size: 18px;
												font-weight: 500;
												color: #fff;
											}
										}
									}
									
									.interview-more {
										background: #272B31;
										opacity: 0.8;
									}
								}
							}
						}
					}
				}
			}
			
			.gallery {
				padding-top: 160px;
				.gallery-head {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					
					.title {
						.top {
							font-size: 20px;
							font-weight: 500;
							color: #00EAFF;
							display: block;
						}
						
						a.main-txt {
							display: flex;
							align-items: center;
							margin-top: 4px;
							position: relative;
							h2 {
								font-size: 38px;
								line-height: 1.2;
								font-weight: 500;
								color: #fff;
							}
							.icon-angle-right.large {
								flex-shrink: 0;
								width: 32px;
								height: 32px;
								margin-left: 12px;
								background-image: url("/home/images/main/douzone/new2/icon-angle-large.svg");
								background-repeat: no-repeat;
								background-position: center;
								background-size: auto 100%;
							}
						}
						.sub-txt {
							margin-top: 16px;
							
							p {
								font-size: 18px;
								font-weight: 400;
								color: #ccc;
							}
						}
					}
				}
				
				.gallery-slide-container {
					position: relative;
					height: 352px;
					margin-top: 60px;
					font-size: 0;
					
					.slick-slide {
						margin: 0 12px;
					}
					.gallery-card-slider {
						position: absolute;
						height: 100%;
						
						.gallery-card {
							background: #272B31;
							border: 1px solid rgba(164, 164, 164, 0.1);
							border-radius: 12px;
							overflow: hidden;
							box-sizing: border-box;
							
							.gallery-card-link {
								display: block;
								width: 386px;
								height: 352px;
							}
							
							.gallery-card-img {
								height: 264px;
								position: relative;
								
								& img {
									width: 100%;
									height: 100%;
									object-fit: cover;
								}
								
								&::after {
									content: "";
									position: absolute;
									inset: 0;
									background: rgba(0, 0, 0, 0.4);
								}
							}
							
							.gallery-card-bottom {
								height: calc(100% - 264px);
								display: flex;
								align-items: center;
								padding: 24px 32px;
								gap: 20px;
								justify-content: space-between;
								
								.gallery-card-txt {
									/*height: 40px;*/
									span {
										font-size: 20px;
										font-weight: 500;
										color: #fff;
									}
								}
								.gallery-more {
									opacity: 0.8;
								}
							}
						}
					}
				}
			}
		}
		
		
		.promotion-banner {
			position: relative;
			height: 500px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			background: url('/home/images/main/douzone/new2/promotion-banner02.webp') no-repeat center / cover;
			.promotion-slogan {
				padding-top: 20px;
				.title {
					text-align: center;
					/*border: 1px solid red;*/
					
					.top {
						font-size: 24px;
						font-weight: 600;
						color: rgba(255, 255, 255, 0.6);
						/*color: #00EAFF;*/
						/*display: none;*/
					}
					
					h2 {
						font-size: 42px;
						font-weight: 500;
						line-height: 1.3;
						color: #fff;
					}
				}
				.promotion-content {
					margin-top: 40px;
					text-align: center;
					
					.btn-cta-action {
						display: inline-flex;
						justify-content: center;
						align-items: center;
						gap: 4px;
						border-radius: 8px;
						padding: 10px 20px;
						background: linear-gradient(270deg, #8539FF -3.58%, rgba(65, 125, 255, 0.85) 100%);
						span {
							font-size: 16px;
							font-weight: 500;
							color: #fff;
                            line-height: 1.2;
						}
						
						i.icon-angle-right {
							display: block;
							width: 18px;
							height: 18px;
							background-image: url("/home/images/main/douzone/new2/icon-angle-medium.svg");
							background-repeat: no-repeat;
							background-position: center;
							background-size: auto 16px;
						}
					}
				}
			}
	
		}
		
		.benefit {
			background: #141516;
			padding-top: 120px;
			
			.benefit-head {
				text-align: center;
				
				.title {
					.top {
						font-size: 20px;
						color: #9D84FF;
						font-weight: 500;
					}
					
					h2 {
						margin-top: 4px;
						font-size: 38px;
						font-weight: 500;
						line-height: 1.2;
						color: #fff;
					}
					
					.sub-txt {
						margin-top: 16px;
						
						p {
							font-size: 18px;
							font-weight: 400;
							color: #ccc;
						}
					}
				}
			}
			
			.benefit-card-list {
				margin-top: 60px;
				display: flex;
				flex-wrap: wrap;
				gap: 24px;
				
				.benefit-card {
					position: relative;
					width: 384px;
					height: 236px;
					border-radius: 16px;
					padding: 32px;
					/*padding: 32px 24px;*/
					background: linear-gradient(180deg, rgba(42, 35, 117, 0.2) 0%, rgba(78, 65, 219, 0.3) 100%);
					border: 1px solid rgba(78, 65, 219, 0.2);
					overflow: hidden;
					
					.card-tag {
						display: inline-block;
						width: 104px;
						height: 32px;
						border-radius: 16px;
						border: 2px solid #8176FE;
						text-align: center;
						align-content: center;
						
						span {
							font-size: 14px;
							font-weight: 600;
							color: #8176FE;
							white-space: nowrap;
						}
					}
					
					.card-content {
						/*border: 1px solid red;*/
						margin-top: 32px;
						
						.card-title {
							font-size: 20px;
							font-weight: 500;
							color: #fff;
						}
						
						.card-txt {
							margin-top: 8px;
							width: 210px;
							p {
								font-size: 16px;
								font-weight: 300;
								color: #ccc;
								/*color: rgba(255, 255, 255, 0.6);*/
								white-space: pre-line;
								line-height: 1.5;
							}
						}
						
						.card-image {
							position: absolute;
							right: 28px;
							bottom: 28px;
							
							width: 80px;
							height: 80px;
							text-align: center;
							img {
								width: auto;
								height: 80px;
								&.cloud {
									height: 78px;
								}
								&.note {
									margin-left: 3px;
								}
							}
						}
					}
				}
			}
		}
		
		.employment-partners {
			padding: 140px 0 160px;
			.employment-track {
				display: flex;
				flex-direction: column;
				gap: 12px;
			}
			.inner{
				position: relative;
				.employment-head {
					.title {
						text-align: center;
						.top {
							font-size: 20px;
							font-weight: 500;
							color: #9D84FF;
						}
						h2 {
							margin-top: 4px;
							font-size: 38px;
							font-weight: 500;
							line-height: 1.2;
							color: #fff;
						}
					}
				}
				.content{
					padding-top: 60px;
					overflow: hidden;
					position: relative;
					.overlay-box {
						position: absolute;
						top: 0;
						bottom: 0;
						width: 100px;
						z-index: 10;
						&.left {
							left: 0;
							background: linear-gradient(90deg, #141516 0%, rgba(20, 21, 22, 0.5) 51.44%, rgba(20, 21, 22, 0) 100%);
						}
						&.right {
							right: 0;
							background: linear-gradient(-90deg, #141516 0%, rgba(20, 21, 22, 0.5) 51.44%, rgba(20, 21, 22, 0) 100%);
						}
					}
					.track-left, .track-right {
						display: flex;
					}
					.employment-card-list {
						display: flex;
						gap: 12px;
						padding-right: 12px;
						.employment-card {
							width: 190px;
							height: 68px;
							border-radius: 8px;
							background: #fff;
							overflow: hidden;
							display: flex;
							align-items: center;
							justify-content: center;
							img {
								width: 100%;
								height: 100%;
								object-fit: contain;
							}
						}
						&.left {
							animation: moveX-left 45s linear infinite;
						}
						&.right {
							animation: moveX-right 45s linear infinite;
						}
					}
				}
			}
		}
		
		.process-guide {
			padding-top: 160px;
			background-color: #1A1E26;
			
			.process-guide-row {
				display: flex;
				flex-direction: row;
				
				.title {
					flex: 1;
					
					.top {
						font-size: 20px;
						font-weight: 500;
						color: #9D84FF;
					}
					
					h2 {
						margin-top: 4px;
						font-size: 38px;
						font-weight: 500;
						line-height: 1.2;
						color: #fff;
					}
					
					.sub-txt {
						margin-top: 16px;
						
						p {
							font-size: 18px;
							font-weight: 400;
							color: #ccc;
						}
					}
				}
				
				.process-guide-right {
					position: relative;
					width: 832px;
					flex-shrink: 0;
					
					svg {
						/*display: none;*/
						position: absolute;
						left: 0;
						top: 30px;
						/*top:150px;*/
						width: 100%;
						height: 4px;
						z-index: 10;
					}
					
					/* ===== 라인 ===== */
					
					#basePath {
						stroke: #555;
						stroke-width: 2;
						fill: none;
						stroke-dasharray: 1;
					}
					
					#progressPath {
						stroke: #4fdfff;
						/*stroke: rgba(129, 118, 254, .6);*/
						stroke-width: 2.5;
						fill: none;
						stroke-dasharray: 1; /*얼마나 그릴지 정의*/
						stroke-dashoffset: 1; /*어디서부터 밀어서 숨길지 결정*/
						filter: drop-shadow(0 0 6px rgba(0, 255, 255, .5));
					}
					
					#movePath {
						/*stroke:#4fdfff;*/
						stroke: rgb(177, 147, 255);
						stroke-width: 2.5;
						fill: none;
						stroke-dasharray: 1;
						stroke-dashoffset: 1;
						transition: stroke-dashoffset 1.2s linear;
						filter: drop-shadow(0 0 6px rgba(129, 118, 254, .9)) drop-shadow(0 0 12px rgba(129, 118, 254, .7)) drop-shadow(0 0 20px rgba(129, 118, 254, .5));
					}
					
					#movePath.moving {
						animation: neonGlow 1s ease-in-out infinite alternate,
						randomFlicker 1.2s infinite;
					}


					
					
					/* ==============================
						 4️⃣ SVG 애니메이션 Keyframes
						 ============================== */
					@keyframes neonGlow {
						0% {
							opacity: .6;
						}
						50% {
							opacity: 1;
						}
						100% {
							opacity: .6;
						}
					}
					
					@keyframes randomFlicker {
						0%, 20%, 50%, 70%, 100% {
							opacity: .6;
						}
						10%, 30%, 60%, 80% {
							opacity: 1;
						}
					}
					
					
					.process-step-list {
						position: relative;
						padding-top: 12px;
						width: 100%;
						display: flex;
						gap: 24px;
						
						z-index: 20;
						/*border: 1px solid red;*/
						/*width: 832px;*/
						/*flex-shrink: 0;*/
						
						.process-step {
							/*border: 2px solid orange;*/
							width: 190px;
							/*height: 308px;*/
							/*text-align: center;*/
							/*display: flex;*/
							/*flex-direction: column;*/
							/*justify-content: space-between;*/
							position: relative;
							
							.process-step-top {
								padding: 0 24px;
								/*border: 2px solid greenyellow;*/
								.step-number {
									position: relative;
									display: flex;
									align-items: center;
									justify-content: center;
									width: 40px;
									height: 40px;
									border-radius: 50%;
									background: #8176FE;
									
									
									/*margin: 0 auto;*/
									/*margin-bottom: 12px;*/
									isolation: isolate;
									
									span {
										position: relative;
										font-size: 20px;
										font-weight: 500;
										color: #fff;
										opacity: 1;
										
										.is-active & {
											opacity: 0;
										}
									}
									
									.is-active &::after {
										opacity: 1;
										transform: scale(1);
									}
									
									&::after {
										content: '✓';
										position: absolute;
										inset: 0;
										display: flex;
										align-items: center;
										justify-content: center;
										font-size: 20px;
										font-weight: 700;
										
										
										color: #fff;
										border-radius: 50%;
										background: transparent;
										opacity: 0;
										transform: scale(.6);
										z-index: 3;
									}

                                    &.done::after{
                                        opacity:1;
                                        transform:scale(1);
                                        /* 배경도 톤 맞춤 */
                                        background: rgba(129,118,254,0.25);
                                    }

                                    &.done span{opacity:0;}

                                    &.done{
                                        box-shadow:
                                        0 0 0 6px rgba(129,118,254,0.15),
                                        0 0 12px rgba(129,118,254,0.5),
                                        0 0 24px rgba(129,118,254,0.85);
                                    }
									
								}
								
								.step-label {
									color: #fff;
									font-size: 20px;
									font-weight: 500;
								}
							}
							
							.process-step-card {
								margin-top: 24px;
								width: 100%;
								/*height: 192px;*/
								box-sizing: border-box;
								background: linear-gradient(180deg, rgba(42, 35, 117, 0.2) 0%, rgba(78, 65, 219, 0.3) 100%);
								border: 1px solid rgba(78, 65, 219, 0.2);
								/*background: #272B31;*/
								border-radius: 8px;
								
								
								padding: 24px;
								/*padding: 32px 12px;*/
								/*display: flex;*/
								/*flex-direction: column;*/
								/*justify-content: space-between;*/
								
								
								/*opacity: 0.2;*/
								/*transition: color, opacity .25s ease;*/
								
								.is-active & {
									opacity: 1;
								}
								
								.txt {
									margin-top: 32px;
								}
								
								.step-label {
									color: #fff;
									font-size: 18px;
									font-weight: 500;
								}
								
								p {
									margin-top: 12px;
									display: block;
									font-size: 16px;
									font-weight: 300;
									color: #ccc;
								}
								
								img {
									/*position: absolute;*/
									/*left: 24px;*/
									/*bottom: 24px;*/
									width: auto;
									height: 40px;
									/*width: 50px;*/
									/*height: 50px;*/
									object-fit: contain;
									display: block;
									/*margin: 0 auto;*/
								}
								
								
							}
						}
					}
				}
			}
		}
		
		.issue-guide {
			padding-top: 160px;
			background-color: #1A1E26;
			
			.issue-head {
				.title {
					.top {
						font-size: 20px;
						font-weight: 500;
						color: #9D84FF;
					}
					
					h2 {
						margin-top: 4px;
						font-size: 38px;
						font-weight: 500;
						line-height: 1.2;
						color: #fff;
					}
				}
			}
			
			.issue-card-list {
				margin-top: 60px;
				display: flex;
				gap: 24px;
				
				.issue-card {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 384px;
					height: 414px;
					padding: 40px 32px;
					border: 1px solid rgba(78, 65, 219, 0.2);
					border-radius: 16px;
					background: linear-gradient(180deg, rgba(42, 35, 117, 0.2), rgba(78, 65, 219, 0.3));
					box-sizing: border-box;
					
					.card-content {
						.card-info {
							.card-step-tag {
								display: inline-block;
								width: 84px;
								height: 32px;
								border-radius: 16px;
								border: 2px solid #8176FE;
								text-align: center;
								align-content: center;
								box-sizing: border-box;
								
								span {
									font-size: 14px;
									font-weight: 600;
									color: #8176FE;
								}
							}
							
							.card-title {
								margin-top: 24px;
								
								span {
									font-size: 20px;
									font-weight: 500;
									color: #fff;
								}
							}
							
							.card-txt {
								margin-top: 12px;
								
								p {
									font-size: 16px;
									font-weight: 300;
									color: #ccc;
								}
							}
						}
						
						.card-image {
							margin-top: 32px;
							
							img {
								width: 320px;
								height: 168px;
								border-radius: 10px;
								object-fit: cover;
							}
						}
					}
				}
			}
		}
		
		.faq {
			padding: 160px 0;
			background-color: #1A1E26;
			
			.faq-row {
				display: flex;
				flex-direction: row;
				
				.faq-head {
					flex: 1;
					
					.title {
						/*flex: 1;*/
						
						.top {
							font-size: 20px;
							font-weight: 500;
							color: #9D84FF;
						}
						
						h2 {
							margin-top: 4px;
							font-size: 38px;
							font-weight: 500;
							line-height: 1.2;
							color: #fff;
						}
						
						.sub-txt {
							margin-top: 16px;
							
							p {
								font-size: 18px;
								font-weight: 400;
								color: #ccc;
							}
						}
					}
				}
				
				.faq-acc-list {
					width: 800px;
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					gap: 12px;
					
					.faq-acc-item {
						width: 100%;
						background: #272B31;
						border: 1px solid #A4A4A410;
						border-radius: 16px;
						padding: 24px 32px;
						.faq-acc-summary {
							/*padding: 24px 32px 0;*/
							
							/*padding: 24px 32px;*/
							position: relative;
							cursor: pointer;
							span {
								font-size: 20px;
								font-weight: 500;
								color: #fff;
								
								em {
									font-size: 22px;
									color: #9D84FF;
									font-weight: 600;
									margin-right: 4px;
								}
							}
							
							i.icon-plus {
								position: absolute;
								right: 0;
								top: -1px;
								display: block;
								/*border: 1px solid red;*/
								width: 30px;
								height: 30px;
								background-image: url("/home/images/main/douzone/new2/more-icon.svg");
								background-repeat: no-repeat;
								background-position: center;
								background-size: auto 18px;
								cursor: pointer;
								transform: rotate(0);
								transition: transform .2s;
								
								.is-active & {
									transform: rotate(45deg);
								}
							}
						}
						.faq-acc-detail {
							display: none;
							padding-top: 8px;
							/*padding: 8px 32px 24px;*/
							p {
								font-size: 18px;
								font-weight: 400;
								color: #ccc;
							}
						}
					}
				}
			}
		}
	}
}

@keyframes forwardRotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes reverseRotate {
	from {
		transform: rotate(-0deg);
	}
	
	to {
		transform: rotate(-360deg);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 38%, 0);
	}
	
	to {
		opacity: 1;
		transform: translateZ(0);
	}
}


/*팝업창 */
.supermodal-title {
	/*ackground-color: #00ABFF !important;*/
}

.supermodal-container .supermodal-title .supermodal-close {
	color: #fff !important;
}

.supermodal-container .supermodal-title .supermodal-close:hover {
	background-color: #222 !important;
}

/*팝업창 */


/*남은일정 타이머 기능 */
#timer {
	position: fixed;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
	
	.floating-cta-inner {
		position: relative;
		width: 800px;
		height: 64px;
		margin: 0 auto;
		backdrop-filter: blur(10px);
		background-color: rgba(20, 21, 22, 0.6);
		border: 1px solid rgba(164, 164, 164, 0.3);
		
		padding: 12px 12px;
		border-radius: 8px;
		box-sizing: border-box;
		
		.floating-cta-content {
			width: 100%;
			display: flex;
			align-items: center;
			gap: 12px;
			
			.floating-cta-txt {
				padding: 0 12px;
				display: flex;
				align-items: center;
				
				.floating-cta-course,
				.floating-cta-sep,
				.floating-cta-label {
					color: #e1e1e1;
					font-size: 20px;
					font-weight: 400;
					
					&.highlight {
						color: #fff;
						font-weight: 500;
					}
				}
				
				.countdown {
					display: inline-flex;
					font-size: 20px;
					
					strong {
						min-width: 28px;
						font-weight: 600;
						text-align: center;
						color: #fff;
					}
					
					.countdown-unit {
						color: #e1e1e1;
						font-weight: 400;
					}
				}
			}
			
			.floating-cta-action {
				position: relative;
				margin-left: auto;
				
				button {
					position: relative;
					padding: 8px 24px;
					background-color: #00eaff;
					border-radius: 8px;
					display: flex;
					justify-content: center;
					align-items: center;
					flex: none;
					order: 1;
					flex-grow: 0;
					color: #111;
					font-size: 16px;
					font-weight: 600;
					cursor: pointer;
				}
			}
		}
	}
}


.supermodal-container .supermodal-body {
	overflow-x: hidden;
}


footer
.top_con
.area2
.familySite
.selectBox
ul.scrollBox::-webkit-scrollbar-track {
	width: 1rem;
	background-color: transparent;
	position: absolute;
	top: -50rem;
	right: -3rem;
}

footer .top_con .area2 .familySite .selectBox ul li {
}

footer .top_con .area2 .familySite .selectBox ul li:nth-child(n + 1) {
	margin-top: 16px;
}

footer .top_con .area2 .familySite .selectBox ul li a {
	color: #444444;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

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

footer .btm_con p {
	font-size: 16px;
	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: 18px;
	font-weight: 500;
	color: #fff;
}

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

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

footer .btm_con .info li:nth-child(2) {
	margin-top: 20px;
}

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

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

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

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

footer .btm_con .cont_logo{
	padding-top: 36px;
}