@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%; }
}

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 {
			height: 590px;
			overflow: hidden;
			background-color: #141516;
			position: relative;
			& > img {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
			}
			.inner {
				position: relative;
				height: 100%;
				box-sizing: border-box;
			}
			
			.main-hero-content {
				position: relative;
				height: 100%;
				padding: 180px 0;
				box-sizing: border-box;
				.main-hero-title {
					width: 600px;
					.sub-title {
						display: block;
						color: #fff;
						font-size: 20px;
						font-weight: 500;
					}
					.main-title {
						/*margin-top: 4px;*/
						font-size: 60px;
						font-weight: 600;
						line-height: 1.2;
						letter-spacing: -0.025em;
						color: #fff;
					}
				}
				.main-hero-buttons {
					margin-top: 36px;
					display: flex;
					gap: 12px;
					
					button {
						&.a {
							position:relative;
                            background-color: #000;
							/*background-image:linear-gradient(#000, #000), linear-gradient(180deg, rgba(65, 125, 255, 0.85) 0%, #8539FF 57.69%);*/
                            &::before {
                                content: "";
                                position: absolute;
                                
                                top: 0; left: 0; right: 0; bottom: 0;
                                border-radius: 12px;
                                padding: 2px;
                                background: linear-gradient(90deg, 
                                    #417dff, #85f0ff, #f553ff, #417dff, #85f0ff
                                );
                                background-size: 400% 400%;
                                animation: border-flow 4s linear infinite;
                                -webkit-mask:
                                    linear-gradient(#fff 0 0) content-box,
                                    linear-gradient(#fff 0 0);
                                -webkit-mask-composite: destination-out;
                                mask-composite: exclude;
                                pointer-events: none;
                                filter: drop-shadow(0 0 6px #417dff)
                                        drop-shadow(0 0 10px #f553ff);
                            }

                            &:active::before {
                                animation-duration: 0.5s;
                            }                            
						}
						&.b {
							background-color: #303030;
						}
						display: flex;
						justify-content: center;
						align-items: center;
						border: 2px solid transparent;
						border-radius: 12px;

						background-origin: border-box;
						background-clip: content-box, border-box;
						width: 192px;
						height: 52px;
						color: #fff;
						font-size: 18px;
						cursor: pointer;
						font-weight: 500;
					}
				}
			}
			
		}

		.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: 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;
                        }
					}
				}
				.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;
				
				.profile-container {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.close-icon {
						position: absolute;
						right: 210px;
						top: 120px;
						width: 40px;
						height: 40px;
						/*background-color: red;*/
						background-image: url("/home/images/main/douzone/new/close.png");
						background-repeat: no-repeat;
						background-position: center;
						background-size: 40px auto;
					}
					
					img {
						width:1488px;
						height:auto;
						image-rendering: -moz-crisp-edges;
						image-rendering: -webkit-optimize-contrast;
						image-rendering: crisp-edges;
						transform: translateZ(0);
						backface-visibility: hidden;
					}
				}
			}
		}

		.instructor-process {
			padding-top: 160px;
			
			.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;
                        }						
					}
				}
				.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: 120px 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;
					}
				}

			}
			.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;

							&.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;
						}
					}
				}
				.content {
					padding: 90px 0 240px;
				}
			}
			.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: #3ef8e8;
						font-weight: 600;
					}
				}
			}
			.cloud-services-bg-bottom {
				margin-top: -1px;
				img {
					width: 100%;
					min-width: 1200px;
				}
			}
		}
		.curriculum-roadmap {
			background-color: #141516;
			padding: 120px 0;
			.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;
				/*height: 670px;*/
				/*height: 640px;*/
				/*padding: 32px;*/
				
				/*border: 1px solid red;*/
				
				/*gap: 24px;*/
				/*border-radius: 20px;*/
				/*background-color: #393b3e;*/
				/*background-color: #999;*/
				/*background-color: #333335;*/
				box-sizing: border-box;
				position: relative;
				display: flex;
				
				.curri-steps {
					width: 300px;
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					gap: 1px;
					.curri-step {
						position:relative;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 84px;
						/*padding: 18px 24px;*/
						border-radius: 12px;
						overflow: hidden;
						cursor: pointer;
					
						background-origin: border-box;
						background-clip: content-box, border-box;
						border: 2px solid transparent;
						transition: all 1s;
						
						&:hover {
							/*background-image:linear-gradient(#000, #000), linear-gradient(90deg, #01D0FF 0%, #AE4AF9 100%);*/
                            background-clip: unset !important;
                            &::before {
                                content: "";
                                position: absolute;
                                
                                top: 0; left: 0; right: 0; bottom: 0;
                                border-radius: 12px;
                                padding: 2px;
                                background: linear-gradient(90deg, 
                                    #417dff, #85f0ff, #f553ff, #417dff, #85f0ff
                                );
                                background-size: 400% 400%;
                                animation: border-flow 4s linear infinite;
                                -webkit-mask:
                                    linear-gradient(#fff 0 0) content-box,
                                    linear-gradient(#fff 0 0);
                                -webkit-mask-composite: destination-out;
                                mask-composite: exclude;
                                pointer-events: none;
                                filter: drop-shadow(0 0 6px #417dff)
                                        drop-shadow(0 0 10px #f553ff);
                            }

                            &:active::before {
                                animation-duration: 0.5s;
                            }  							
						}
						&.is-active {		
							/*				
							border: 1px solid transparent !important;
                            background-image:
                            linear-gradient(#000, #000),
                            linear-gradient(90deg, #01D0FF 0%, #AE4AF9 100%);
                            background-origin: border-box;
                            background-clip: content-box, border-box;
							*/
							background-image:linear-gradient(#000, #000), linear-gradient(90deg, #01D0FF 0%, #AE4AF9 100%);
							/*background-image:linear-gradient(#000, #000), linear-gradient(180deg, rgba(65, 125, 255, 0.85) 0%, #8539FF 57.69%);*/
						}
						.curri-step-inner {
							width: 100%;
							height: 100%;
							padding: 18px 24px;
							
							.is-active & {
								background-color: #272b31;
							}
							
							span {
								display: block;
								color: #fff;
							}
							span.curri-step-label {
								font-size: 16px;
								font-weight: 300;
								color: #ccc;
								text-transform: uppercase;
								/*opacity: 0.6;*/
								/*display: none;*/
							}
							span.curri-step-title {
								font-size: 18px;
								font-weight: 500;
								opacity: 0.9;
							}
						}
					}
				}
				
				.curri-detail {
					position: absolute;
					right: 0px;
					top: 0px;
					bottom: 0px;
					width: calc(100% - 300px - 24px);
					overflow-y: auto;
					border-radius: 16px;
					box-sizing: border-box;
					&::-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%;
						background-color: #272b31;
						&:nth-child(1) {
							background-color: transparent;
						}
					}
					.curri-detail-panel[hidden] { display: none; }
					.curri-detail-panel.is-active { display: block; }
					
					
					.curri-block {
						& { background-color: transparent;}
						.orientation &{ background-color: #272b31; }
						
						& + .curri-block {margin-top: 24px;}
						padding: 24px 32px;
						scrollbar-gutter: stable;
						border-radius: 16px;
						
						.curri-block-head {
							border-bottom: 1px solid #808080;
							padding-bottom: 23px;
							margin-bottom: 24px;
							.curri-block-title {
								font-size: 24px;
								font-weight: 500;
								color: #fff;
								span {
									/*color: #9D84FF;*/
								}
							}
						}
						.curri-block-orientation {
							div {
								&::before {
									content: "";
									display: inline-block;
									vertical-align: middle;
									margin-right: 4px;
									width: 4px;
									height: 4px;
									background-color: #ccc;
									border-radius: 50%;
								}
								display: inline-block;
								padding: 0 4px;
								color: #ccc;
							}
						}
						.curri-block-about {
							.curri-block-qna {
								display: flex;
								align-items: flex-start;
								gap: 48px;
								border-bottom: 1px solid #808080;
								padding: 0 12px 23px;
								margin-bottom: 24px;
								.question {
									width: 200px;
									flex-shrink: 0;
									display: flex;
									align-items: center;
									gap: 6px;
									&::before {
										content: "";
										display: block;
										flex-shrink: 0;
										width: 20px;
										height: 20px;
										/*border: 1px solid red;*/
										background-image: url("/home/images/main/douzone/new/icon-checkbox-blue.png");
										background-repeat: no-repeat;
										background-position: center;
										background-size: auto 16px;
									}
									
									strong {
										color: #fff;
										font-size: 16px;
										font-weight: 600;
									}
								}
								.answer {
									p {
										color: #ccc;
										font-size: 16px;
										line-height: 1.6;
									}
								}
							}
							
						}
						.curri-block-modules {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							gap: 48px;
							.curri-module {
								width: 100%;
								&.curri-module-row {
									display: flex;
									flex-direction: row;
									align-items: flex-start;
									padding: 0 12px;
									gap: 48px;
								}
								&.curri-module-column {
									display: flex;
									flex-direction: column;
									align-items: flex-start;
								}
								.curri-module-head {
									width: 200px;
									flex-shrink: 0;
									display: flex;
									gap: 6px;
									&::before {
										content: "";
										display: block;
										flex-shrink: 0;
										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: auto 16px;
									}
									.curri-module-title {
										display: block;
										font-weight: 600;
										color: #fff;
										font-size: 16px;
									}
								}
								.curri-module-items {
									flex: 1;
									width: 100%;
					
									/*padding-left: 120px;*/
									.curri-module-column & {padding-left: 13px;}
									li {
										color: #ccc;
										font-size: 16px;
										line-height: 1.4;
										font-weight: 300;
										&::before {
											content: "";
											display: inline-block;
											vertical-align: middle;
											width: 4px;
											height: 4px;
											border-radius: 50%;
											background-color: #ccc;
											margin-right: 12px;
										}
									}
								}
								.curri-module-items li + li {
									margin-top: 8px;
								}
							}
						}
						.curri-module-caption {
							margin-top: 24px;
							color: #fff;
							font-size: 18px;
							padding-left: 12px;
							text-decoration: underline;
							opacity: 0.9;
						}
					}
				}
			}
			
		}
		.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: 0px;
	left: 50vw;
	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;
}