@import url(variable.less);

.sec_02 .wrap {
	display: flex;
	gap: 2rem;
	.item {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		flex: 1;
		.hd {
			width: 100%;
			padding: 1rem 0;
			color: @color_white;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.inner {
			border: 1px solid @color_lightgray;
			padding: 3rem;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			gap: 2rem;
			.img_box {
				height: 9rem;
				width: auto;
				img {
					height: 100%;
				}
			}
		}
		&:nth-child(1) .hd {
			background-color: @color_sub;
		}
		&:nth-child(2) .hd {
			background-color: @color_main;
		}
	}
	@media @mobile_l {
		flex-direction: column;
		.item .inner {
			padding: 1.5rem;
			gap: 1rem;
			.img_box {
				height: 5rem;
			}
		}
	}
}

.sec_03 {
	.wrap {
		display: flex;
		flex-direction: column;
		gap: 6rem;
	}
	.field_list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 2rem;
		li {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 1px solid @color_lightgray;
			padding: 3rem;
			gap: 1rem;
			height: 100%;
			.img_box {
				height: 6.2rem;
			}
		}
		@media @tab {
			grid-template-columns: repeat(6, 1fr);
			li {
				flex-direction: row;
				padding: 3rem 2rem;
				.img_box {
					height: 5rem;
				}
				&:nth-child(-n + 3) {
					grid-column: span 2;
				}
				&:nth-child(4) {
					grid-column: span 3;
				}
				&:nth-child(5) {
					grid-column: span 3;
				}
			}
		}
		@media @mobile_l {
			display: flex;
			flex-direction: column;
			li {
				flex-direction: column;
				padding: 1.5rem;
			}
		}
	}
	.cont_bg {
		gap: 5rem;
		.stage_list {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 6rem 4.8rem;
			li {
				display: flex;
				align-items: center;
				position: relative;
				.step {
					flex: 1;
					border: 1px solid @color_lightgray;
					display: flex;
					flex-direction: column;
					text-align: center;
					padding: 2rem;
					width: 100%;
					background-color: @color_white;
				}
				.ico {
					width: 4.8rem;
					height: 4.8rem;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: -4.8rem;
					top: 50%;
					transform: translateY(-50%);
				}
				&:last-child .step {
					border-color: @color_blue;
					background-color: @color_lightblue;
					color: @color_blue;
				}
			}
		}
		.step_list {
			padding-top: 5rem;
			border-top: 1px dashed @color_lightgray;
			.step {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				.tit_box {
					width: 100%;
					height: 6.2rem;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					color: @color_white;
					.inner {
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						text-align: center;
						gap: 1rem;
						color: #fff;
						p:nth-child(2) {
							width: 100%;
							padding-top: 1.6rem;
							border-top: 1px solid rgba(255, 255, 255, 0.3);
						}
					}
				}
				.step_box {
					flex: 1;
					border: 1px solid @color_lightgray;
					background-color: #fff;
					padding: 2rem;
					display: flex;
					align-items: center;
					.inner {
						width: 100%;
						.area {
							gap: 1.6rem;
							display: flex;
							flex-direction: column;
							li {
								display: flex;
								gap: 1rem;
								align-items: center;
								.label {
									flex: 0 0 auto;
									border: 1px solid;
									width: 9.2rem;
									height: 3.4rem;
									display: inline-flex;
									align-items: center;
									justify-content: center;
								}
							}
						}
					}
				}
				&.step_01 {
					.tit_box {
						background-color: @color_blue;
					}
					.step_box .inner .area li .label {
						border-color: @color_blue;
						color: @color_blue;
					}
				}
				&.step_02 {
					.tit_box {
						background-color: @color_main;
					}
					.step_box .inner .area li .label {
						border-color: @color_main;
						color: @color_main;
					}
				}
				&.step_03 {
					.tit_box {
						background-color: @color_black;
					}
					.step_box .inner .area li .label {
						border-color: @color_black;
						color: @color_black;
					}
				}
			}
			.gra_line {
				margin: 3rem;
				flex-direction: column;
			}
		}
		//@media @tab {
		//	.stage_list {
		//		grid-template-columns: repeat(2, 1fr);
		//		grid-template-rows: auto auto;
		//		li {
		//			&:nth-child(even) .ico {
		//				right: inherit;
		//				top: inherit;
		//				bottom: -5.5rem;
		//				left: 50%;
		//				transform: translateX(-50%) rotate(90deg);
		//			}
		//			&:nth-child(3) {
		//				grid-column: 2;
		//				grid-row: 2;
		//				.ico {
		//					left: -4.8rem;
		//					right: inherit;
		//					transform: translateY(-50%) rotate(180deg);
		//				}
		//			}
		//			&:nth-child(4) {
		//				grid-column: 1;
		//				grid-row: 2;
		//			}
		//			&:nth-child(5) {
		//				grid-column: span 2;
		//			}
		//		}
		//	}
		//}
		@media @tab {
			.stage_list {
				display: block;
				li {
					display: flex;
					flex-direction: column;
					.ico {
						width: 3.2rem;
						height: 3.2rem;
						position: unset;
						transform: translate(0) rotate(90deg) !important;
					}
					.step {
						padding: 1.5rem;
					}
				}
			}
			.step_list .step {
				.tit_box {
					padding: 1rem;
					height: auto;
				}
				.step_box .inner .area li {
					flex-direction: column;
					.label {
						height: 3.2rem;
						width: 100%;
					}
				}
			}
		}
	}
}