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

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

@keyframes border-flow {
    0%    { background-position: 0% 0%; }
    12.5% { background-position: 50% 0%; }    /* left → top */
    25%   { background-position: 100% 0%; }
    37.5% { background-position: 100% 25%; }   /* top → right */
    50%   { background-position: 100% 50%; }
    62.5% { background-position: 100% 75%; }   /* right → bottom */
    75%   { background-position: 50% 100%; }
    87.5% { background-position: 0% 100%; }    /* bottom → left */
    100%  { background-position: 0% 0%; }
}

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

/* ⚡ 전기 튀는 핵심 */
@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; }

}

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

#header1 {
	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%);
					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 {
				position: relative;
				height: 100%;
				padding: 200px 0;
				box-sizing: border-box;
				.main-hero-title {
					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.025em;
						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;
			.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;
			.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;
					}
				}

                span {
                    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 {
				font-size: 0;
				margin-top: 60px;
			}
			.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: linear-gradient(360deg, #313380 -1.6%, #000 100%);
				.title {
					width: 1200px;
					margin: 0 auto;
					text-align: center;
					h2 {
						display: inline-block;
						font-size: 36px;
						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;
                            */
						}
					}
					.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;
				img {
					width: 100%;
					min-width: 1200px;
				}
			}
		}

		.curriculum-roadmap {
			background-color: #141516;
			padding: 120px 0;
			
			.title {
				text-align: center;
				
				.top {
					font-size: 36px;
					color: #ffffff;
					line-height: 1.2;
					letter-spacing: -0.02em;
					font-weight: 400;
				}
				
				h2 {
					display: inline-block;
					
					span {
						display: block;
						font-size: 36px;
						color: #ffffff;
						line-height: 1.2;
						letter-spacing: -0.02em;
						font-weight: 500;
						
						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;
                        }

					}
					
					strong {
						font-size: 42px;
						color: #fff;
						display: block;
						font-weight: 500;
					}
				}
				.sub-txt {
					margin-top: 24px;
					p {
						font-size: 20px;
						font-weight: 300;
						color: #ccc;
						text-align: center;
					}
				}
			}
			
			.curriculum-roadmap-title-group {
				text-align: center;
				.curri-tab-sub-title {
					font-size: 24px;
					color: #fff;
					font-weight: 200;
				}
				.curri-tab-title {
					margin-top: 10px;
					font-size: 50px;
					font-weight: 700;
					color: #fff;
				}
			}
			.curri-layout {
				margin-top: 60px;
				box-sizing: border-box;
				position: relative;
				display: flex;
				/*border: 1px solid #00EAFF;*/
				border-radius: 16px;
				height : 786px; 
				
				.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;
						border-radius: 12px;
						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: #368291;*/
							
							&::after {
								background: radial-gradient(50% 50% at 50% 50%, #00EAFF 0%, #00EAFF 50%, #141516 51%, #141516 100%);
								/*background: radial-gradient(50% 50% at 50% 50%, #368291 0%, #368291 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;
					.curri-detail-panel {
						height: 100%;
						.curri-detail-column {
							height: 100%;
							display: flex;
							flex-direction: column;
							gap: 24px;
						}
                        .curri-detail-head {
                            position: relative;
                            .notice-orientation {
                                text-align: right;
                                position: absolute;
                                right: 0;
                                top: 8px;
                                p {
                                    color: #999;
                                    font-size: 15px;
                                    font-weight: 500;
                                }
                            }
                        }
						.curri-title {
							padding-left: 8px;
							padding-top: 8px;
							h6 {
								font-size: 24px;
								font-weight: 600;
								letter-spacing: -0.025em;
								color: #00EAFF;
								opacity: 0.8;
							}
						}
						.curri-block {
							background-color: #272B31;
							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: 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;
												/*font-size: 15px;*/
											}
											/*border: 1px solid orange;*/
										}
										&::before {
											content: "";
											display: block;
											width: 20px;
											height: 20px;
											background-image: url("/home/images/main/douzone/new/icon-checkbox-blue.png");
											background-repeat: no-repeat;
											background-position: center;
											background-size: 16px auto;
										}
									}
								}
								.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: 300;
										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: #00EAFF;
										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; }
					
				}
			}

            /* 네온 SVG 오버레이 */
            .curri-layout .neon-frame {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            }
			
		}
		

		.benefit {
			background: #000;
			padding: 100px 0;
			position: relative;
			
			
			h5 {
				color: #fff;
				font-size: 24px;
				font-weight: 200;
				text-align: center;
				&:nth-of-type(1) {
					padding-bottom: 10px;
				}
			}
			h3 {
				color: #fff;
				font-size: 50px;
				font-weight: 700;
				text-align: center;
				padding-bottom: 100px;
				&:nth-of-type(2) {
					padding: 140px 0 80px 0;
				}
			}
			
			.benefit-center-image {
				display: block;
				margin: 0 auto;
			}
			
			
			.icon {
				img {
					position: absolute;
					
					&:nth-of-type(1) {
						top: 22.8%;
						left: 35.7%;
					}
					
					&:nth-of-type(2) {
						top: 34.2%;
						left: 33.3%;
					}
					
					&:nth-of-type(3) {
						top: 39.4%;
						left: 46%;
					}
					
					&:nth-of-type(4) {
						top: 33.4%;
						left: 62.3%;
					}
					
					&:nth-of-type(5) {
						top: 21.5%;
						left: 60.3%;
					}
				}
				
				.ani {
					animation: fadeInUp 1.3s;
				}
			}
			
			.text {
				font-size: 18px;
				color: #fff;
				
				p {
					position: absolute;
					
					&:nth-of-type(1) {
						top: 460px;
						left: 520px;
					}
					
					&:nth-of-type(2) {
						top: 695px;
						left: 480px;
					}
					
					&:nth-of-type(3) {
						top: 800px;
						left: 1050px;
					}
					
					&:nth-of-type(4) {
						top: 705px;
						left: 1365px;
					}
					
					&:nth-of-type(5) {
						top: 475px;
						left: 1325px;
					}
				}
			}
			
			.beneCard {
				display: flex;
				flex-wrap: wrap;
				gap: 60px;
				justify-content: center;
				text-align: left;
				
				div {
					width: 520px;
					height: 200px;
					padding: 32px 45px;
					
					p {
						background: #000;
						border-radius: 50px;
						width: 110px;
						padding: 5px;
						text-align: center;
						margin-bottom: 7px;
						color: #fff;
					}
					
					h4 {
						line-height: 35px;
						padding-bottom: 5px;
						color: #fff;
						font-size: 30px;
						font-weight: 600;
					}
					
					span {
						color: #fff;
						font-weight: 200;
					}
					
					&:nth-of-type(1) {
						background: url(/home/images/main/douzone/new/bene01.png);
					}
					
					&:nth-of-type(2) {
						background: url(/home/images/main/douzone/new/bene02.png);
					}
					
					&:nth-of-type(3) {
						background: url(/home/images/main/douzone/new/bene03.png);
					}
					
					&:nth-of-type(4) {
						background: url(/home/images/main/douzone/new/bene04.png);
					}
					
					&:nth-of-type(5) {
						background: url(/home/images/main/douzone/new/bene05.png);
					}
					
					&:nth-of-type(6) {
						background: url(/home/images/main/douzone/new/bene06.png);
					}
				}
			}
		}
		.employment-partners {
			background-color: #fff;
			padding-top: 100px;
			.employment-partners-title {
				font-size: 50px;
				font-weight: 700;
				color: #333;
				text-align: center;
			}
			.employment-partners-logos {
				padding: 25px 0 5px;
			}
			.employment-partners-bottom {
				p {
					color: #999;
					font-size: 18px;
					text-align: center;
				}
			}
		}
		.selection-process {
			background-color: #fff;
			padding-top: 150px;
			.selection-process-title {
				font-size: 50px;
				font-weight: 700;
				color: #333;
				text-align: center;
			}
			.selection-process-content {
				margin: 0 auto;
				width: 1080px;
				padding: 50px 0 35px;
				.selection-process-steps {
					font-size: 0;
					height: 250px;
					background-image: url("/home/images/main/douzone/new/selection-steps.png");
					background-repeat: no-repeat;
					background-position: center center;
					.selection-process-step {
						display: inline-block;
						vertical-align: top;
						/*border: 1px solid red;*/
						width: 25%;
						height: 250px;
						text-align: center;
						box-sizing: border-box;
						padding-top: 125px;
						.step-item {
							/*border: 2px solid red;*/
							padding-top: 14px;
							strong {
								display: block;
								font-size: 20px;
								font-weight: 400;
								color: #4e4e4e;
								&.color-blue {
									color: #3F80EA;
									font-weight: 600;
									font-size: 21px;
								}
								/*border: 2px solid blue;*/
							}
							span {
								font-size: 16px;
								color: #999;
							}
						}
					}
					
				}
			}
			.selection-process-bottom {
				p {
					font-size: 18px;
					color: #999;
					text-align: center;
				}
			}
			
		}
		

		/* 프로젝트 섹션 Start */
		
		.project {
			.project-total-title {
				padding: 100px 0 60px;
				
				span {
					display: block;
					font-size: 24px;
					font-weight: 300;
					color: #999;
				}
				
				h3 {
					margin-top: 20px;
				}
			}
			
			& > article {
				padding: 80px 0;
				
				&.project-saas {
					background: #F5F9FB;
				}
				
				&.project-nutrition {
					background: #fff
				}
				
				&.project-news {
					background: #F5F9FB;
				}
				
				&.project-ticketing {
					background: #fff
				}
				
				.project-section-title {
					strong {
						font-size: 30px;
						font-weight: 600;
					}
					
					p {
						margin-top: 20px;
						font-size: 18px;
						font-weight: 300;
						color: #999;
					}
				}
				
				.project-visual {
					display: flex;
					gap: 40px;
					margin-top: 80px;
					
					.project-visual-item {
						img {
							width: 100%;
						}
					}
				}
				
				.project-stack {
					margin-top: 40px;
					display: flex;
					align-items: center;
					
					.project-stack-label {
						width: 95px;
						flex-shrink: 0;
						
						span {
							display: block;
							width: 76px;
							height: 26px;
							border-radius: 20px;
							background: #333;
							font-size: 12px;
							font-weight: 600;
							color: #fff;
							text-align: center;
							align-content: center;
						}
					}
					
					.project-stack-icons {
						flex: 1;
						
						img {
							width: 100%
						}
					}
				}
			}
		}
		
		/* 프로젝트 섹션 End */
		
		.photo {
			background: #F5FAFB;
			padding: 100px 0;
			
			h3 {
				padding-bottom: 100px;
			}
			
			h5 {
				padding: 100px 0;
				color: #999;
				
				span {
					font-weight: 700;
					color: #333;
				}
			}
			
			.photoCont {
				display: flex;
				flex-wrap: wrap;
				gap: 39px;
			}
		}
		/* photo */
		
		.learning-card-guide {
			background-color: #fff;
			padding-top: 150px;
			.learning-guide-title-group {
				text-align: center;
				.learning-guide-title {
					font-size: 50px;
					font-weight: 700;
					color: #333;
				}
				.learning-guide-sub {
					margin-top: 10px;
					font-size: 18px;
					font-weight: 400;
					color: #999;
				}
			}
			.learning-card-steps {
				text-align: left;
				display: flex;
				justify-content: center;
				gap: 100px;
				padding: 60px 0;
				
				li {
					width: 310px;
					.learning-card-thumb {
						img {}
					}
					.learning-card-desc {
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 15px;
						.step-number {
						}
						.step-txt {
							strong {
								font-weight: 600;
								font-size: 22px;
								color: #333;
							}
							p {
								margin-top: 6px;
								color: #999;
								font-size: 16px;
							}
						}
					}
				}
			}
		}
		
		.faq {
			padding: 50px 0 50px 0;
			background: #fff;
			.faq-title {
				font-size: 50px;
				font-weight: 700;
				color: #333;
				text-align: center;
			}
			
			.faqAccordian {
				text-align: left;
				padding: 40px 0 50px 0;
			}
			
			details:nth-of-type(1) {
				border-top: 2px solid #a2a2a2;
			}
			
			details:nth-of-type(5) {
				border-bottom: 2px solid #a2a2a2;
				
				summary {
					border-bottom: none;
				}
				
				p.answer {
					border-top: 1px solid #E8ECEE;
				}
			}
			
			details[open] .question::after {
				transform: translate(0, -50%) rotate(180deg);
			}
			
			
			.question {
				background: #fff;
				font-size: 30px;
				font-weight: 600;
				padding: 30px 40px;
				border-top: 1px solid #E8ECEE;
				border-bottom: 1px solid #E8ECEE;
				
				p {
					color: #222;
					display: inline-block;
					margin-top: 2px;
				}
			}
			
			.question::before {
				content: '';
				display: block;
				width: 40px;
				height: 40px;
				background: url(/home/images/main/douzone/new/question.png) no-repeat center / cover;
				margin: 0 20px 0 0;
				float: left;
			}
			
			.question::after {
				content: '';
				display: block;
				width: 25px;
				height: 16px;
				background: url(/home/images/main/douzone/new/more_close.png) no-repeat center / cover;
				float: right;
				margin-top: 12px;
			}
			
			.answer {
				background: #F0FBFF;
				font-size: 18px;
				font-weight: 300;
				color: #444;
				padding: 30px 100px;
				line-height: 26px;
				
				p span {
					text-indent: 10px;
				}
			}
		}
	}
}
@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 {
	background-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: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
	
	.timerCont {
		width: 1200px;
		margin: 0 auto;
		background: #222222;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 60px;
		border-radius: 5px;
		/*background: red;*/
		p {
			color: #fff;
			font-size: 20px;
			font-weight: 600;
		}
		
		.day, .h, .m, .s {
			padding-left: 10px;
		}
		
		button {
			border: none;
			background-color: #4E41DB;
			padding: 10px 30px;
			border-radius: 5px;
			font-size: 18px;
			font-weight: 600;
			cursor: pointer;
			color: #fff;
		}
	}
}


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