@import url(variable.less);

.sec_01 {
	.cont_bg {
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		gap: 5rem;
		@media @tab_m {
			padding: 3rem;
			gap: 3rem !important;
		}
		@media @mobile_l {
			padding: 2rem;
			gap: 1.6rem !important;
		}
		.area {
			display: flex;
			align-items: center;
			margin-top: 3rem;
			position: relative;
			.item {
				height: 12rem;
				color: #fff;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				flex-direction: column;
				flex: 1;
				&:nth-child(1) {
					border-radius: 100px 0 0 100px;
					background-color: @color_blue;
					margin-right: -10rem;
					padding-right: 5rem;
				}
				&:nth-child(3) {
					border-radius: 0 100px 100px 0;
					background-color: @color_main;
					margin-left: -10rem;
					padding-left: 5rem;
				}
			}
			.item_center {
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 9;
				width: 20rem;
				height: 20rem;
				border-radius: 50%;
				background: linear-gradient(99deg, rgba(53, 87, 208, 1) 10%, rgba(10, 35, 129, 1) 100%);
				.circle {
					width: 16rem;
					height: 16rem;
					border-radius: 50%;
					background-color: @color_white;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			@media @tab {
				flex-direction: column;
				padding: 0;
				gap: 2rem;
				.item {
					width: 100%;
					height: auto;
					padding: 3rem 1rem;
					border-radius: 0 !important;
					&:nth-child(1) {
						margin-right: 0;
						padding-right: 0;
					}
					&:nth-child(3) {
						margin-left: 0;
						padding-left: 0;
					}
				}
				.item_center {
					width: 100%;
					height: auto;
					border-radius: 0;
					order: -1;
					padding: 0.6rem;
					.circle {
						padding: 1rem;
						width: 100%;
						height: 100%;
						border-radius: 0;
						br {
							display: none;
						}
					}
				}
			}
		}
		.img {
			margin: auto;
			img {
				max-width: 100%;
				max-height: 100%;
			}
		}
		.gra_line {
			flex-direction: column;
		}

		@media @mobile_l {
			.gra_line span {
				&:nth-child(4),
				&:nth-child(5),
				&:nth-child(6) {
					display: none;
				}
			}
			.area {
				margin-top: 0;
				gap: 1rem;
				.item {
					padding: 1.2rem 1rem;
				}
			}
		}
	}
}