.h-color {
	color: #226EC5 !important;
}

.sh-color {
	color: #56C0BD !important;
}

.overflow-hidden {
	overflow: hidden !important;
}

/* Section 3 */
.arc-item {
  	display: inline-block;
  	position: relative;
  	left: 0;
  	border-radius: 50%;
}

/* วงกลม */
.arc-item span {
	position: relative;
  	display: block;
  	width: 100%;
  	height: 100%;
  	border-radius: 50%;
  	background: #fff;
  	border: 4px solid #226EC5;
  	box-sizing: border-box;
  	box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.arc-item span img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.arc-item:hover {
	cursor: pointer;
}

.arc-item:hover span, .arc-item.active span {
	background: #226EC5 !important;
	border: 4px solid #0A48A3 !important;
}

.arc-item:hover span img, .arc-item.active span img {
	filter: brightness(0) invert(1);
}

@media (max-width: 1199.98px) {
	.s3-elm-left, .s3-elm-right {
		display: none !important;
	}

	.arc-content {
		position: relative;
	}

	.arc-item {
		width: 80px;
	  	height: 80px;
	}
	.arc-item span img {
		height: 32px;
	}

}

@media (min-width: 1200px) {
	.checklist-wrap {
	  	position: relative;
	  	width: 100%;
	  	max-width: 1100px;
	  	height: 560px;
	  	margin: 0 auto;
	}

	/* เส้นครึ่งวง */
	.arc-white {
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 900px;
		height: 450px;
		transform: translateX(-50%);
		border-top-left-radius: 450px;
		border-top-right-radius: 450px;
		border-bottom: 0;
		box-sizing: border-box;
		background: #fff;
		z-index: 0;
		box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
	}

	.arc-content {
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 868px;
		height: 434px;
		transform: translateX(-50%);
		border-top-left-radius: 450px;
		border-top-right-radius: 450px;
		border-bottom: 0;
		box-sizing: border-box;
		background: #FAFAFA;
		z-index: 0;
	}

	/* item ทุกตัว จะยึดจาก "กึ่งกลางล่าง" */
	.arc-item {
		display: block !important;
	  	position: absolute !important;
	  	width: 112px;
	  	height: 112px;
	  	z-index: 1;
	}

	.item-1 {
		left: -56px;
		bottom: 32px;
	}

	.item-2 {
		left: 32px;
		bottom: 216px;
	}

	.item-3 {
		left: 200px;
		bottom: 358px;
	}

	.item-4 {
		left: unset;
		right: 200px;
		bottom: 358px;
	}

	.item-5 {
		left: unset;
		right: 32px;
		bottom: 216px;
	}

	.item-6 {
		left: unset;
		right: -56px;
		bottom: 32px;
	}

	.arc-item-content {
		display: none;
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		transform: translateY(-40%);
		width: 50%;
		margin: 0 auto;
		height: auto !important;
	}

	.arc-item-content.show {
		display: block !important;
	}

	.s3-elm-left {
		position: absolute;
	    bottom: -75%;
	    left: -10%;
	    width: 50%;
	}

	.s3-elm-right {
		position: absolute;
	    bottom: -75%;
	    right: -10%;
	    width: 50%;
	}

	.arc-item span img {
		height: 48px;
	}
}
/* Section 3 */

.swiper-pagination-bullet-active {
	background: #56C0BD !important;
	width: 32px !important;
    border-radius: 20px !important;
}

body {
	background: #fff !important;
}

.dsd-section-1 {
	position: relative;
	background: url('/data-file/index/all-devices/bg-1614.png');
	background-size: cover;
	/* background-position: center; */
	background-position: top;
	background-repeat: no-repeat;
}

.dsd-section-1-layer-1 {
	position: relative;
	z-index: 3;
}

.dsd-section-1-layer-2 {
	position: absolute;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFF 82.81%);
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}

.dsd-section-1-layer-3 {
	position: absolute;
	top: 0;
	left: 0;
	right: 35%;
	bottom: 0;
	background: url('/data-file/solutions-dsd/s1-bg-2.webp');
	background-size: cover;
	z-index: 1;
}

.dsd-section-2 {
	overflow-x: hidden;
}

.dsd-section-7 {
	background: url('/data-file/solutions-dsd/dsd-s7-bg-1_5.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.text-gd {
    background: linear-gradient(to right, #56C0BD 0%, #226EC5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.s2-icon {
	width: 80px;
	overflow: hidden;
}

.s2-feature-items {
	border-right: 1px solid #dee2e6;
}

.s2-feature-items:last-child {
	border-right: none !important;
}

@media (max-width: 991.98px) {
	.dsd-section-1 {
		padding: 30px 0 !important;
	}

	.s2-elm {
		display: none !important;
	}

    .s2-feature-items {
    	border-right: none !important;
    }
}

@media (min-width: 992px) {
	.dsd-section-1 {
		padding: 96px 0 !important;
	}

	.s2-elm {
		position: absolute;
		top: -64px;
		right: -32px;
		z-index: 0;
	}
}

@media (max-width: 1199.98px) {
	.dsd-section-1-layer-3 {
		right: 0 !important;
		background-position: top;
	}

	.dsd-section-5-nav {
		font-size: 12px;
	}
}

.s6-icon {
	width: 80px;
	border-radius: 20px;
	overflow: hidden;
}

.bg-fb {
	background: #fbfbfb !important;
}

.dsd-section-5-bg {
	background: linear-gradient(90deg, #56C0BD 13%, #226EC5 100%);
}

.dsd-section-5-link {
	color: #fff;
	border-radius: 50rem!important;
	padding: .5rem 1rem;
	transition: all .2s;
}

.dsd-section-5-link:hover, .dsd-section-5-link.active {
	cursor: pointer;
	color: #0A48A3 !important;
	background-color: #fff;
}