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



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

#douzone_pc {
	overflow: hidden;
	main {
		padding-top: 80px;
		.main-hero {
			.main-hero-content {
				position: relative;
				& > img {
					/*width: 100%;*/
				}
			}
			.titleCont {
				position: absolute;
				top: 160px;
				left: 0;
				width: 100%;
				text-align: center;
			}
			.main-title-group {
				margin-bottom: 40px;
				.sub-title {
					color: #fff;
					font-size: 24px;
					font-weight: 200;
				}
				.main-title {
					font-size: 70px;
					text-align: center;
					font-weight: 700;
					letter-spacing: -1px;
					background: linear-gradient(to right, #37A5FF 0%, #fff 45%);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					position: relative;
					
					&::after {
						content: attr(data-text);
						background: none;
						width: 709px;
						height: 82px;
						left: 0;
						position: absolute;
						text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
						top: 0;
						z-index: -1;
					}
				}
			}
			.main-radio-bar {
				display: block;
				
				.radio-bar-inner{
					background: #000;
					width: 525px;
					border-radius: 50px;
					padding: 19px 34px;
					margin: 0 auto 110px;
					display: flex;
					box-sizing: border-box;
					.radio-bar-txt {
						width: 335px;
						align-content: center;
						font-size: 30px;
						font-weight: 600;
						color: #fff;
						line-height: 32px;
						span {color: #31FF76;}
					}
					.radio-btn {
						width: 100px;
						height: 43px;
						background: #242424;
						border-radius: 50px;
						position: relative;
						
						.radio-btn-ball {
							width: 33px;
							height: 33px;
							margin: 5px;
							background: url(/home/images/main/douzone/new/info_off.png) no-repeat center / cover;
							transition-property: all;
							transition-duration: 0.7s;
							position: absolute;
							z-index: 1;
							
							.main-radio-bar:hover & {
								background: url(/home/images/main/douzone/new/info_on.png) no-repeat center / cover;
								transform: translateX(57px);
							}
						}
						
						span {
							font-size: 20px;
							font-weight: 700;
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							transition-property: opacity;
							transition-duration: 0.2s;
							transition-delay: 0.2s;
							transition-timing-function: ease-in;
							&.off {
								color: #000;
								right: 15px;
								opacity: 1;
								.main-radio-bar:hover & {
									opacity: 0;
								}
							}
							&.on {
								color: #31FF76;
								left: 15px;
								opacity: 0;
								
								.main-radio-bar:hover & {
									opacity: 1;
								}
							}
						}
					}
				}
				
				&:hover .radio-btn .radio-btn-ball {
	
				}
				&:hover .radio-btn .off {opacity: 0;}
				&:hover .radio-btn .on {opacity: 1;}
				
			}
			.main-hero-sub-txt {
				p:nth-of-type(1) {
					font-size: 36px;
					padding-bottom: 10px;
					color: #fff;
					letter-spacing: -0.4px;
				}
				p:nth-of-type(2) {
					font-size: 18px;
					font-weight: 300;
					color: #fff;
					letter-spacing: -0.4px;
				}
			}
		}
		.information-detail {
			background: url(/home/images/main/douzone/new/info_bg04.jpg) no-repeat center;
			
			.inner{
				height: 500px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 217px;
			}
			
			.left-content {
				.top-line {
					display: block;
					width: 30px;
					height: 2px;
					background: #fff;
					margin-left: 4px;
				}
				.information-detail-title-group {
					padding-top: 50px;
					
					.information-detail-title {
						font-size: 50px;
						font-weight: 700;
						color: #fff;
						padding-bottom: 10px;
					}
					p {
						color: #fff;
						line-height: 22px;
						span {
							font-weight: 200;
						}
					}
				}
			}
			.right-content {
				.meta-list {
					display: flex;
					flex-direction: column;
					gap: 30px;
					.meta-list-item {
						display: flex;
						align-items: center;
						gap: 20px;
						font-size: 30px;
						.icon {
							width: 50px;
							height: 50px;
							background-repeat: no-repeat;
							background-position: center center;
							&.icon01 {background-image: url(/home/images/main/douzone/new/info_icon01.png);}
							&.icon02 {background-image: url(/home/images/main/douzone/new/info_icon02.png);}
							&.icon03 {background-image: url(/home/images/main/douzone/new/info_icon03.png);}
							&.icon04 {background-image: url(/home/images/main/douzone/new/info_icon04.png);}
							&.icon05 {background-image: url(/home/images/main/douzone/new/info_icon05.png);}
						}
						span {
							color: #C5C5C5;
							padding-right: 30px;
							font-size: 18px;
						}
						p {
							padding-top: 5px;
							color: #fff;
						}
					}
				}
			}
		}
		.strip-banner-notice {
			background: #1B1B1B;
			padding: 40px 0;
			
			ul {
				display: flex;
				width: 1080px;
				justify-content: center;
				align-items: flex-start;
				margin: 0 auto;
				gap: 40px;
				text-align: left;
				position: relative;
				
				li {
					display: flex;
					gap: 40px;
					
					& + li {
						margin-left: 100px;
					}
					
					.icon {
						width: 115px;
						
						img {
							width: 100%;
							image-rendering: crisp-edges;
						}
					}
					
					.txt {
						padding-top: 20px;
						
						.main-txt {
							.top {
								span {
									font-size: 18px;
									font-weight: 300;
									
									&.t1 {
										color: #46ACFF;
										font-weight: 500;
									}
									
									&.line {
										margin-left: 10px;
										text-decoration: line-through;
									}
									
									&.low-level {
										color: #666;
									}
								}
							}
							
							strong {
								margin-top: 6px;
								display: block;
								font-size: 32px;
								font-weight: 600;
								color: #fff;
								letter-spacing: -0.01em;
							}
						}
						
						.sub-txt {
							margin-top: 8px;
							
							p {
								font-size: 14px;
								font-weight: 500;
								letter-spacing: -0.01em;
								line-height: 1.4;
								color: #d8d8d8;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}
		
		.instructor {
			background: url(/home/images/main/douzone/new/instructor_bg.jpg) no-repeat center;
			padding: 96px 0;
			position: relative;
			
			.instHead {
				.instructor-title {
					text-align: center;
					font-size: 50px;
					font-weight: 700;
					color: #fff;
					span {
						color: #46ACFF;
					}
				}
				.profile {
					margin-top: 90px;
					background-image: url(/home/images/main/douzone/new/instructor_profile.png?ver=1);
					background-repeat: no-repeat;
					background-position: left top;
					padding: 37px 0 25px 0;
					position: relative;
					
					.profile-card-aws {
						position: absolute;
						left: 250px;
						top: 0;
						border-radius: 10px;
						width: 150px;
						box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.11);
						
						img {
							width: 150px;
							height: auto;
						}
					}
					.profile-meta {
						padding-left: 400px;
						.profile-name {
							margin-left: 30px;
							font-size: 30px;
							font-weight: 600;
							color: #fff;
							padding: 15px 0 5px 0;
							span {
								color: #7EACD8;
								font-size: 18px;
								font-weight: 200;
							}
						}
						.profile-comment {
							margin-left: 20px;
							padding-top: 45px;
							strong {
								display: block;
								font-weight: 500;
								font-size: 22px;
								color: #fff;
							}
							p {
								margin-top: 10px;
								font-size: 18px;
								line-height: 1.6;
								font-weight: 300;
								color: #dcdcdc;
							}
						}
					}
				}
				.profileCont {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					column-gap: 30px;
					row-gap: 50px;
					margin: 100px 0;
					
					li:nth-child(1) {
						background: url(/home/images/main/douzone/new/instructor01.png) no-repeat center;
					}
					
					li:nth-child(2) {
						background: url(/home/images/main/douzone/new/instructor02.png) no-repeat center;
					}
					
					li:nth-child(3) {
						background: url(/home/images/main/douzone/new/instructor03.png) no-repeat center;
					}
					
					li:nth-child(1), li:nth-child(2), li:nth-child(3) {
						width: 380px;
						height: 300px;
						padding: 55px 0;
						
						h4 {
							font-size: 30px;
							font-weight: 600;
							color: #fff;
							text-align: center;
						}
						
						h4::after {
							content: '';
							display: block;
							background: #fff;
							width: 30px;
							height: 3px;
							margin: 20px 175px;
						}
						
						p {
							font-weight: 200;
							text-align: center;
							color: #fff;
						}
					}
					
					li:nth-child(4), li:nth-child(5) {
						width: 580px;
						height: 570px;
						background: rgba(246, 250, 253, 0.05);
						border: 1px solid #353B3D;
						border-radius: 20px;
						padding: 50px;
						text-align: left;
						font-size: 18px;
						
						p:nth-of-type(odd) {
							background: #011427;
							padding: 10px 20px;
							border-radius: 50px;
							display: inline-block;
							margin-bottom: 20px;
							color: #fff;
							
							span {
								color: #314B66;
								font-size: 14px;
								font-family: 'Sansita Swashed', sans-serif;
							}
						}
						p:nth-of-type(even) {
							color: #DBDBDB;
							font-weight: 200;
							padding-left: 10px;
							margin-bottom: 50px;
							span {
								font-weight: 600;
								color: #fff;
							}
						}
					}
					
					li:last-child {
						.top-medal-logo {
							position: absolute;
							right: 40px;
							top: -16px;
							z-index: 10;
						}
					}
				}
			}
			
			/* instHead */
			
			
			.instCont {
				position: relative;
				
				.instCont-title-group {
					text-align: center;
					.instCont-title {
						font-size: 50px;
						font-weight: 700;
						color: #fff;
						span {
							color: #00ABFF;
						}
					}
					p {
						font-size: 18px;
						font-weight: 200;
						padding-top: 10px;
						color: #fff;
					}
				}
				
				.box {
					width: 1090px;
					height: 250px;
					border: 8px solid rgba(217, 217, 217, 0.10);
					border-radius: 30px;
					margin: 150px auto 200px;
					position: relative;
					
					& > div {
						color: #F6EF15;
						background: #171D25;
						border-radius: 20px;
						padding: 30px 0;
						width: 940px;
						position: absolute;
						font-size: 30px;
						font-weight: 600;
						text-align: center;
						
						&.top {
							top: -20%;
							left: 6.5%;
						}
						&.bottom {
							top: 83%;
							left: 6.5%;
						}
					}
					
					&::after {
						content: url(/home/images/main/douzone/new/instructor_plus.png);
						display: block;
						width: 41px;
						height: 41px;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
				
				
				.tri-content {
					position: relative;
					padding-bottom: 140px;
					& > img {
						display: block;
						margin: 0 auto;
					}
					.tri {
						
						li {
							position: absolute;
							text-align: center;
							
							&:nth-of-type(1) {
								top: 0;
								left: 10%;
							}
							
							&:nth-of-type(2) {
								top: 0;
								right: 10%;
							}
							
							&:nth-of-type(3) {
								bottom: 0;
								left: 50%;
								transform: translateX(-50%);
							}
							
							h3 {
								font-size: 50px;
								font-weight: 700;
								color: #fff;
							}
							p {
								color: #fff;
								span {
									color: #46ACFF;
								}
							}
						}
					}
				}
			
				.bottom-txt {
					margin-top: 120px;
					div {
						font-size: 50px;
						font-weight: 700;
						color: #fff;
						text-align: center;
					}
					p {
						margin-top: 10px;
						font-size: 18px;
						font-weight: 200;
						color: #fff;
						text-align: center;
					}
				}
			}
		}
		/* //instructor */
		
		
		/* 강사평 말풍선 섹션 */
		.testimonial {
			background: #011B5C;
			position: relative;
			
			
			
			.testimonial-title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 22.9vw;
				font-size: 2.089vw;
				font-weight: 700;
				color: #fff;
				z-index: 20;
				
				span {
					color: #FFFF35;
				}
			}
			
			.testimonial-device-image {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 18.75vw;
				
				img {
					width: 100%;
					height: auto;
				}
			}
			
			.slide-container {
				position: relative;
				z-index: 10;
				
				.testimonial-bubble-slider {
					.testimonial-bubble-item {
					}
					
					.testimonial-bubble-item img {
						width: 100%;
					}
					
					.slick-dots {
						position: absolute;
						left: 50%;
						bottom: 70px;
						transform: translateX(-50%);
						display: flex;
						
						li {
							padding: 10px;
						}
						
						button {
							display: block;
							font-size: 0;
							width: 12px;
							height: 12px;
							border-radius: 50%;
							background: #fff;
							cursor: pointer;
							opacity: 0.3;
							
							.slick-active & {
								opacity: 1;
							}
						}
					}
				}
			}
		}
		/* 강사평 말풍선 섹션 */
		
		
		.cloud-intro {
			padding-top: 100px;
			.cloud-intro-title-group {
				text-align: center;
				.cloud-intro-title {
					font-size: 50px;
					color: #333;
					padding-bottom: 10px;
					font-weight: 700;
				}
				.cloud-intro-desc {
					font-size: 18px;
					font-weight: 500;
					color: #666;
				}
			}
			
			
			.cloud-intro-about {
				padding: 90px 0 100px;
				.cloud-about-title-group {
					
					text-align: center;
					.cloud-about-caption{
						/*color: #333;*/
						color: #00ABFF;
						font-size: 24px;
						font-weight: 500;
						padding-bottom: 10px;
					}
					.cloud-about-title {
						color: #333;
						font-size: 36px;
						font-weight: 600;
						margin-top: 10px;
					}
				}
				
			}
			.cloud-about-content {
				padding-top: 60px;
				padding-bottom: 60px;
				display: flex;
				align-items: center;
				margin: 0 auto;
				/*border: 2px solid red;*/
				position: relative;
				.cloud-about-arrow {
					position: absolute;
					left: 43%;
				}
				.cloud-about-item {
					/*border: 1px solid red;*/
					width: 50%;
					text-align: center;
					.image {
						height: 300px;
						img {
							display: block;
							margin: 0 auto;
							width: auto;
							height: 100%;
						}
					}
					.caption {
						margin-top: 40px;
						font-size: 16px;
						font-weight: 300;
						color: #999;
					}
				}
			}
			.cloud-about-bottom {
				font-size: 24px;
				font-weight: 500;
				color: #333;
				text-align: center;
			}
		}
		.cloud-graph {
			padding-bottom: 120px;
			ul {
				font-size: 0;
				li {
					position: relative;
					width: 50%;
					height: 700px;
					display: inline-block;
					vertical-align: top;
					box-sizing: border-box;
					&:nth-child(n+3) {
						margin-top: 40px;
					}
					.graph-head {
						background-color: #102B6E;
						color: #fff;
						padding: 22px 0;
						border-radius: 10px;
						width: 420px;
						margin: 0 auto 60px;
						text-align: center;
						
						font-size: 30px;
						font-weight: 600;
						line-height: 32px;
					}
					img {
						margin: 0 auto;
						display: block;
						width: auto;
						object-fit: cover;
					}
					
					.caption {
						position: absolute;
						width: 100%;
						bottom: 30px;
						color: #999;
						font-size: 16px;
						text-align: center;
						
						&.caption-up {
							bottom: 40px;
						}
					}
				}
			}
			.cloud-graph-bottom {
				font-size: 24px;
				font-weight: 200;
				color: #333;
				text-align: center;
				padding-top: 100px;
			}
		}
		.curri {
			background: #011B5C;
			/*padding-top: 100px;*/
			
			padding: 100px 0 140px;
			position: relative;
			.curri-title {
				color: #fff;
				font-size: 50px;
				padding-bottom: 100px;
				font-weight: 700;
				text-align: center;
				
				&:nth-of-type(1) {
					padding-bottom: 270px;
				}
				
				&:nth-of-type(2) {
					span {
						color: #04D4F9;
					}
				}
				
				&:nth-of-type(4) {
					padding: 100px 0;
				}
			}
			.curri-circle-content {
				position: relative;
				
				.curri-center {
					position: relative;
					width: 410px;
					margin: 0 auto;
					
					.curri-circle-image {
						display: block;
						margin: 0 auto;
						object-fit: cover;
					}
				}
				
				.curriEdge {
					width: 450px;
					height: 450px;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					border-radius: 50%;
					.edge_wrap {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
					}
					
					.edge_box {
						position: absolute;
						top: -25%;
						left: -25%;
						width: 150%;
						height: 150%;
						animation: forwardRotate 40s linear infinite;
						transform-origin: center;
						text-align: center;
						line-height: 1rem;
						border-radius: 50%;
						div {
							width: 165px;
							height: 165px;
							font-size: 18px;
							color: #426190;
							animation: reverseRotate 40s linear infinite;
							transform-origin: center;
							align-content: center;
							position: relative;
							
							.edge_box1 & {top: -12%;left: 37.5%;}
							.edge_box2 & {top: -5%;left: 62%;}
							.edge_box3 & {top: 13%;left: 82%;}
							.edge_box4 & {top: 37.5%;left: 87%;}
							.edge_box5 & {top: 62%;left: 82%;}
							.edge_box6 & {top: 81%;left: 63%;}
							.edge_box7 & {top: 87%;left: 37.5%;}
							.edge_box8 & {top: 81%;left: 12%;}
							.edge_box9 & {top: 62%;left: -6%;}
							.edge_box10 & {top: 37.5%;left: -12%;}
							.edge_box11 & {top: 13%;left: -6%;}
							.edge_box12 & {top: -5%;left: 13%;}
							
							p {
								color: #fff;
								padding: 20px 0;
							}
						}
					}
				}
			}
			.curri-promo-message {
				text-align: center;
				padding: 270px 0 140px;
				
				.message-normal {
					color: #fff;
					font-size: 24px;
					font-weight: 300;
					span {
						color: #C804F9;
						font-weight: 500;
					}
				}
				.message-strong {
					font-size: 50px;
					font-weight: 700;
					color: #fff;
					margin-top: 40px;
					span {
						color: #04D4F9;
					}
				}
			}
			.curri-tab-area {
				.curri-tab-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;
					}
				}
				.curriTab {
					margin-top: 80px;
					.tabTitle {
						width: 1200px;
						display: flex;
						color: #fff;
						margin: 0 auto;
						font-size: 20px;
						
						p {
							padding: 30px;
							border: 1px solid #011B5C;
							
							&:nth-of-type(1) {
								width: 400px;
								flex-shrink: 0;
								background: #536878;
								box-sizing: border-box;
							}
							
							&:nth-of-type(2) {
								width: 800px;
								background: #7C8994;
							}
						}
					}
					
					.tabWrap {
						display: flex;
						width: 100%;
						.tabMenu {
							width: 400px;
							flex-shrink: 0;
							margin-bottom: 10px;
							
							
							button {
								width: 400px;
								height: 80px;
								cursor: pointer;
								border: 1px solid #011B5C;
								background-color: #000;
								color: #fff;
								text-align: left;
								padding-left: 20px;
								font-size: 20px;
								transition: 0.6s;
								
								&:hover {
									background-color: #536878;
								}
							}
							
							button.active {
								background-color: #46ACFF;
							}
						}
						.tabCont {
							width: 800px;
							box-sizing: border-box;
							text-align: left;
							color: #666;
							font-weight: 300;
							.tabCont > div {
								width: 100%;
							}
							
							span {
								color: #0083EF;
								font-weight: 600;
								line-height: 25px;
							}
							
							div:not(.table) {
								display: none;
								width: 800px;
								height: 880px;
								background-color: #fff;
								border: 1px solid #011B5C;
								border-left: 1px solid #011B5C;
								font-size: 18px;
								padding: 40px;
								line-height: 24px;
							}
							
							div.table {
								display: flex;
								padding-top: 50px;
								line-height: 24px;
								
								p:nth-of-type(1) {
									border: 1px solid #C8C8C8;
									display: inline-block;
									background: #D7EDFF;
									align-content: center;
									text-align: center;
									width: 200px;
								}
								
								p:nth-of-type(2) {
									border: 1px solid #C8C8C8;
									border-left: none;
									display: inline-block;
									width: 520px;
									padding: 25px 0 25px 20px;
								}
							}
							
							div.table:nth-of-type(2) {
								padding: 0;
								
								p {
									border-top: none;
								}
							}
							
							div.narrow {
								padding: 20px 0 15px 0;
								
								p:nth-of-type(1) {
									width: 160px;
								}
								
								p:nth-of-type(2) {
									width: 540px;
									padding: 15px 0 15px 15px;
									font-size: 17px;
								}
							}
							
							div.active {
								display: block;
							}
						}
						
						/* //tabCont */
					}
				}
			}
			.curri-bottom-glogan {
				margin-top: 90px;
				font-size: 50px;
				font-weight: 700;
				color: #fff;
				text-align: center;
			}
		}
		.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 {
			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 {
			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 {
			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: 20px;
	left: 50vw;
	transform: translateX(-50%);
	z-index: 99;
	
	.timerCont {
		width: 1200px;
		margin: 0 auto;
		background: #00ABFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 60px;
		border-radius: 5px;
		
		p {
			color: #fff;
			font-size: 25px;
			font-weight: 600;
		}
		
		.day, .h, .m, .s {
			padding-left: 10px;
		}
		
		button {
			border: none;
			background-color: #fff;
			padding: 15px 30px;
			border-radius: 5px;
			font-size: 23px;
			font-weight: 600;
			cursor: pointer;
			color: #222;
		}
	}
}


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