@import url(variable.less);

.sec_01 {
	.wrap {
		display: flex;
		gap: 5rem 2rem;
		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 1.6rem;
			.hd {
				width: 100%;
				height: 5.2rem;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				flex: 0 0 auto;
			}
			.body {
				padding: 0 2rem;
				background-color: #fff;
				border: 1px solid @color_lightgray;
				height: 100%;
				.inner {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 100%;
					height: 100%;
					> * {
						padding: 2rem 0;
					}
					.tit_box {
						text-align: center;
						border-bottom: 1px dashed @color_gray;
					}
					.txt_box {
						display: flex;
						flex-direction: column;
						gap: 0.6rem;
						li {
							display: flex;
							align-items: center;
							gap: 1rem 2rem;
							.tit {
								width: 8rem;
								padding: 0.3rem 0;
								flex: 0 0 auto;
								text-align: center;
							}
							.txt {
								flex: 1;
							}
						}
					}
				}
			}
			&:nth-child(1) {
				.hd {
					background-color: @color_blue;
				}
				.body .inner .txt_box li .tit {
					border: 1px solid @color_blue;
					color: @color_blue;
				}
			}
			&:nth-child(2) {
				.hd {
					background-color: @color_main;
				}
				.body .inner .txt_box li .tit {
					border: 1px solid @color_main;
					color: @color_main;
				}
			}
			&:nth-child(3) {
				.hd {
					background-color: @color_black;
				}
				.body .inner .txt_box li .tit {
					border: 1px solid @color_black;
					color: @color_black;
				}
			}
		}
		@media @tab {
			flex-direction: column;
		}
		@media @mobile_l {
			gap: 3rem;
			.item {
				gap: 1rem;
				.hd {
					height: 4.8rem;
				}
				.body .inner {
					> * {
						padding: 1.6rem 0;
					}
					.txt_box {
						gap: 1rem;
						li {
							flex-direction: column;
							.tit {
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
}

.sec_02 {
	.list {
		display: flex;
		gap: 2rem;
		background-color: @color_bg;
		padding: 5rem;
		.inner {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			padding: 0;
			gap: 1rem;
			.item {
				background-color: @color_white;
				border: 1px solid @color_lightgray;
				padding: 3rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 3rem;
				text-align: center;
				height: 100%;
				.ico {
					height: 8rem;
					display: flex;
					align-items: center;
					justify-content: center;
					img {
						max-width: 100%;
						height: 100%;
					}
				}
				.txt_box {
					.txt {
						margin-bottom: 1rem;
						display: inline-flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						text-align: center;
					}
				}
			}
		}
		@media @tab {
			flex-direction: column;
			padding-bottom: 6rem;
			.inner {
				.item {
					flex-direction: row;
					.ico {
						flex: 0 0 10rem;
						height: 6rem;
					}
					.txt_box {
						flex: 1;
						text-align: left;
					}
				}
			}
		}
		@media @tab_m {
			padding: 3rem;
		}
		@media @mobile_l {
			.inner {
				.item {
					flex-direction: column;
					padding: 2rem;
					gap: 0.5rem;
					.ico {
						height: 5rem;
						flex: none;
					}
					.txt_box {
						text-align: center;
					}
				}
			}
		}
	}
}