@import url(variable.less);

.sec_02 {
	.cont_bg {
		background: #fff;
		background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 48%);
		padding-bottom: 0;
	}
	.top_layout {
		display: flex;
		align-items: center;
		gap: 5rem;
		width: 100%;
		.item {
			background-color: #fff;
			border: 1px solid @color_lightgray;
			flex: 1;
			width: 100%;
			position: relative;
			.wrap {
				display: flex;
				justify-content: center;
				padding: 1.6rem;
				padding-bottom: 0;
				gap: 1rem;
				.inner {
					flex: 1;
					background-color: @color_bg;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 1.6rem 0.6rem;
					padding-bottom: 0.6rem;
					height: 10rem;
					gap: 0.6rem;
					text-align: center;
					overflow: hidden;
					.img {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						overflow: hidden;
						img {
							max-width: 80%;
							max-height: 100%;
							margin: auto;
						}
					}
					p {
						flex: 0 0 auto;
						height: 4rem;
						overflow: hidden;
						display: inline-flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
			.tit {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 7.2rem;
			}
			&:before {
				content: "\e935";
				font-family: "xeicon";
				position: absolute;
				top: 50%;
				left: -3.5rem;
				transform: translateY(-50%) rotate(90deg);
				color: @color_darkgray;
				width: 1.8rem;
				height: 1.8rem;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
			&:nth-child(1) {
				.wrap .inner {
					.img img {
						max-width: 86%;
					}
					p {
						height: 2rem;
					}
					&:nth-child(1) {
						flex: 1.5;
					}
				}
				&:before {
					transform: translateY(-50%) rotate(-90deg);
					right: -3.5rem;
					left: inherit;
				}
			}
		}
		.kara {
			display: flex;
			flex-direction: column;
			background-color: @color_main;
			padding: 1.5rem;
			padding-bottom: 0;
			flex: 0 0 36rem;
			height: 28rem;
			position: relative;
			.img {
				background-color: #fff;
				height: 9.8rem;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				img {
					max-width: 80%;
				}
			}
			.txt_box {
				color: #fff;
				display: flex;
				align-items: center;
				flex-direction: column;
				text-align: center;
				justify-content: center;
				flex: 1;
				gap: 1.5rem;
				.comment {
					opacity: 0.7;
					font-weight: 400;
				}
			}
		}
		@media @laptop {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto auto;
			grid-template-areas:
				"item_1 item_2"
				"kara  kara";
			gap: 10px;
			margin: auto;
			.item {
				&:before {
					display: none;
				}
				&:nth-child(1) {
					grid-area: item_1;
				}
				&:nth-child(2) {
					grid-area: item_2;
				}
			}
			.kara {
				grid-area: kara;
				margin-top: 5rem;
				&:before {
					content: "";
					position: absolute;
					top: -5rem;
					left: 50%;
					transform: rotate(-90deg) translateX(-50%);
					width: 1.8rem;
					height: 1.8rem;
					display: flex;
					align-items: center;
					justify-content: center;
					background: url(/img/ico/arr.svg) no-repeat center/contain;
				}
			}
		}
		@media @tab_m {
			grid-template-columns: auto;
			grid-template-rows: repeat(3, auto);
			grid-template-areas:
				"item_1"
				"item_2"
				"kara";
			.item .wrap .inner p br {
				display: none;
			}
		}
		@media @mobile_l {
			.item .wrap {
				flex-direction: column;
				.inner {
					height: auto;
					padding: 1rem;
					.img {
						height: 3rem;
						img {
							max-width: 100%;
						}
					}
					p {
						height: auto;
					}
				}
			}
			.kara {
				height: auto;
				.img {
					height: auto;
					padding: 1.6rem 0;
				}
				.txt_box {
					padding: 1.6rem 0;
				}
			}
		}
	}
	.gra_line {
		margin: 3rem 0;
		flex-direction: column;
	}
	.bt_layout {
		display: flex;
		gap: 10rem;
		position: relative;
		&:before,
		&:after {
			display: block;
			content: "";
			border-radius: 50px;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		&:before {
			width: 16px;
			height: 16px;
			background-color: @color_main;
			top: -8px;
		}
		&:after {
			width: 6px;
			height: 6px;
			background-color: #fff;
			top: -3px;
		}
		.item {
			border-top: 2px solid;
			flex: 1;
			.cont_stit,
			.txt {
				text-align: center;
			}
			.hd {
				padding: 3rem 0;
				.txt {
					margin-top: 1.6rem;
				}
			}
			.wrap {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 2rem;
				.inner {
					width: 100%;
					background-color: #fff;
					border: 2px solid;
					min-height: 12.5rem;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 1rem;
					padding: 2rem;
					.comment {
						margin-top: 0.6rem;
					}
				}
			}
			&:nth-child(1) {
				border-color: @color_blue;
				.wrap .inner {
					border-color: @color_blue;
				}
			}
			&:nth-child(2) {
				border-color: @color_green;
				.wrap .inner {
					border-color: @color_green;
				}
			}
		}
		@media @tab_m {
			flex-direction: column;
			gap: 6rem;
		}
	}
	.arr_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 6rem auto;
		.gra_line {
			margin: 0 auto;
		}
		.cont_btit {
			margin: 2rem auto;
		}
		i {
			font-size: 2.4rem;
		}
		@media @mobile_l {
			margin: 4rem auto;
			i {
				font-size: 1.2rem;
			}
		}
	}
	.organ {
		.wrap {
			display: flex;
			gap: 3.6rem;
			.left_layout {
				background-color: #fff;
				flex: 1;
				overflow: hidden;
				text-align: center;
				display: flex;
				flex-direction: column;
				.hd {
					background-color: @color_main;
					color: #fff;
					text-align: center;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 5.6rem;
					flex: 0 0 auto;
					margin-bottom: 1rem;
				}
				.item {
					display: flex;
					border: 6px solid @color_bg2;
					flex: 1;
					padding: 2rem;
					gap: 2rem;
					.inner {
						flex: 1;
						.tit {
							img {
								max-width: 70%;
								max-height: 100%;
								padding: 1.6rem 0;
							}
						}
						.txt {
							border-top: 1px dashed @color_lightgray;
							padding-top: 1.6rem;
							.comment {
								margin-top: 1rem;
							}
						}
						&:nth-child(2) {
							border-left: 1px solid @color_lightgray;
							padding-left: 2rem;
						}
					}
				}
			}
			.right_layout {
				flex: 1;
				background-color: #fff;
				position: relative;
				border: 1px solid @color_lightgray;
				.wrap {
					padding: 3rem;
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 100%;
					height: 100%;
					text-align: center;
					.item {
						.txt {
							margin-top: 1rem;
						}
						&:nth-child(1) {
							padding-bottom: 3rem;
							border-bottom: 1px dashed @color_lightgray;
						}
					}
				}
				.circle {
					display: block;
					width: 3.6rem;
					height: 3.6rem;
					position: absolute;
					top: 50%;
					left: -1.8rem;
					border-radius: 50px;
					transform: translateY(-50%);
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					span {
						width: 16px;
						height: 16px;
						background-color: @color_main;
						border-radius: 50px;
						position: relative;
						&:after {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							content: "";
							background-color: #fff;
							display: block;
							width: 6px;
							height: 6px;
							border-radius: 50px;
						}
					}
				}
			}
			@media @tab {
				flex-direction: column;
				.gra_line {
					flex-direction: column;
				}
				.left_layout .item .inner .tit img {
					max-width: 42%;
				}
				.right_layout .circle {
					top: -2rem;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			@media @tab_m {
				.left_layout .item .inner .tit img {
					max-width: 70%;
				}
			}
			@media @mobile_l {
				.left_layout .item {
					flex-direction: column;
					.inner {
						&:nth-child(2) {
							padding-left: 0;
							padding-top: 2rem;
							border-left: 0;
							border-top: 1px solid @color_lightgray;
						}
						.tit img {
							max-width: 50%;
						}
					}
				}
				.right_layout .wrap {
					padding: 2rem;
					padding-top: 3rem;
					gap: 2rem;
					.item:nth-child(1) {
						padding-bottom: 2rem;
					}
				}
			}
		}
	}
}