:root {
	--tpablue: #1D4294;
	--tpagold: #C6AB00;
	--bg-services-intro: #aad5f7;
}

[class^="services-"] { font-family: 'Noto Sans Thai', sans-serif; } [class^="services-"] .row { margin-top: 1em; }
[class^="services-"] { font-size: 1.25rem; font-weight: 300; }
.services-intro { background: #ffffff; background: linear-gradient(0deg,rgba(255, 255, 255, 1) 57%, rgba(170, 213, 247, 1) 100%); }
.services-intro { margin-bottom: 0.5em; font-size: 1.85rem; text-align: center; overflow: hidden; }
.services-intro h1 { margin-top: 7.5%; margin-left: 15%; margin-right: 15%; padding: 0.5em;  font-size: 2.85rem; font-weight: 600; border-bottom: 3px #333 solid; }
.services-intro p { margin-left: 7.5%; margin-right: 7.5%; padding: 0.5em; font-weight: 400; }
.services-info { margin-bottom: 0.1em; }
.services-info h2 { margin-bottom: 0.85em; margin-left: 10%; margin-right: 10%; text-align: center; border-bottom: 2px #333 solid; display: block; }
.services-info-list { list-style-type: none; counter-reset: step-counter; } .services-info-list li { counter-increment: step-counter; margin: 4.2em 0; }
.services-info-list li::before { content: "0"counter(step-counter)"."; font-size: 3.5rem; font-weight: 800; position: absolute; top: -40px; left: -30px; padding: 10px; background-color: white; display: block; }
.services-info-list li::after { content: ""; width: 150px; height: 125px; background-color: white; background-size: 150px 125px; position: absolute; bottom: -40px; right: -30px; padding: 10px; display: block; }
.services-info-box { padding: 40px; border: 3px #333 solid; border-radius: 12px; position: relative; }
.services-info-box p { text-indent: 2em; }
.services-info-list .services-info-box:nth-child(1)::after { background-image: url("../images/services-icon1.png"); }
.services-info-list .services-info-box:nth-child(2)::after { background-image: url("../images/services-icon2.png"); }
.services-info-list .services-info-box:nth-child(3)::after { background-image: url("../images/services-icon3.png"); }
.services-info-list .services-info-box:nth-child(4)::after { background-image: url("../images/services-icon4.png"); }
.services-info-list .services-info-box:nth-child(5)::after { background-image: url("../images/services-icon5.png"); }

@media (max-width: 991px) {
	[class^="services-"] { font-size: 1.10rem; }
	.services-intro h1, .services-intro p { margin-left: 5%; margin-right: 5%; }
	.services-info h2 { margin-bottom: 0.75em; margin-left: 5%; margin-right: 5%; }
	.services-info-list li::before { font-size: 2.5rem; position: absolute; top: -50px; left: -25px; }
	.services-info-list li::after { position: absolute; bottom: -50px; right: -25px; }
}
@media (max-width: 767px) {
	[class^="services-"] { font-size: 1.0rem; }
}