:root {
	--primary-color: #0455a4;
}
.off-canvas-left .mfp-content, .off-canvas-right .mfp-content {
	background: #fff !important;
}
.off-canvas:not(.off-canvas-center) .nav-vertical li>a {
	color: #000;
}
.off-canvas .nav-vertical>li>a:hover {
	color: #004097 !important;
}
.our-story {
	padding:70px 0;
	background:#fff
}
.our-story .os-container {
	max-width:1200px;
	margin:0 auto;
	padding:0 20px
}
.our-story .os-grid {
	display:grid;
	grid-template-columns:1fr 2fr;
	gap:60px;
	align-items:start
}
.our-story .os-title { 
	font-size:72px;
	line-height:1.02;
	margin:0;color:#2f2f2f;
	font-weight:800;
	letter-spacing:-1px
}

.our-story .os-content h3 {
	margin:0 0 10px;
	font-size:24px;
	line-height:1.3;
	color:#333;
	font-weight:800
}
.our-story .os-content {
	color:#666;
	font-size:16px;
	line-height:1.75
}
.our-story .os-content p {
	margin:0 0 12px
}

.our-story .os-media {
	margin:0 0 18px
}
.our-story .os-media img {
	width:100%;
	height:auto;
	border-radius:12px;
	display:block
}

.our-story .os-stats{
	margin-top:28px;
	border-top:1px solid #dedede;
	padding-top:28px;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0;
}
.our-story .os-stat{
	padding:24px 18px;
	min-height:150px;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.our-story .os-stat:nth-child (odd) {
	border-right:1px solid #dedede
}
.our-story .os-stat:nth-child(n+3) {
	border-top:1px solid #dedede
}

.our-story .os-number-row {
	display:flex;
	align-items:baseline;
	gap:10px;
	margin-bottom:10px
}
.our-story .os-number {
	font-size:72px;
	line-height:1;
	color: var(--primary-color);
	font-weight:900;
	letter-spacing:-1px
}
.our-story .os-unit {
	color: var(--primary-color);
	font-weight:800
}
.our-story .os-small {
	color:#333;
	font-weight:700;
	font-size:18px;
	line-height:1.35
}

@media (max-width:900px){
	.our-story .os-grid {
		grid-template-columns:1fr;
		gap:24px
	}
	.our-story .os-title {
		font-size:52px
	}
	.our-story .os-number {
		font-size:56px
	}
}
@media (max-width: 767px) {
	.our-story .os-stats {
		display: unset;
	}
	.our-story .os-grid {
		margin-top: -20px;
	}
	#section_1833389017 {
		padding-top: 0 !important;
	}
	.our-story {
		padding: 0 0;
	}
	.our-story .os-stat {
		padding: 0;
	}
}
/* slider */
.cert-slider{
	position:relative;
	padding:72px 0 84px;
	background-size:cover;
	background-position:center;
	overflow:hidden;
	color:#fff;
}

.cert-slider__container{
	position:relative;
	max-width: 1500px;
	margin:0 auto;
	padding:0 20px;
}

.cert-slider__header{
	text-align:center;
	margin-bottom:28px;
}

.cert-slider__title{
	color: #fff;
	margin:0;
	font-size:44px;
	line-height:1.15;
	font-weight:800;
	letter-spacing:.2px;
	text-shadow:0 10px 35px rgba(0,0,0,.45);
}

.cert-slider__divider{
	width:min(520px, 92%);
	height:1px;
	margin:18px auto 0;
	background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
	position:relative;
}
.cert-slider__divider::after{
	content:"";
	position:absolute;
	left:50%; top:50%;
	width:6px; height:6px;
	border-radius:999px;
	transform:translate(-50%,-50%);
	background:rgba(255,255,255,.9);
	box-shadow:0 0 0 8px rgba(255,255,255,.08);
}

.cert-slider__wrap{
	display:grid;
	grid-template-columns: 54px 1fr 54px;
	gap:14px;
	align-items:center;
}

.cert-slider__nav{
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(10, 14, 22, .45);
	backdrop-filter: blur(10px);
	color: #fff;
	margin: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
	box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}
.cert-slider__nav span {
	font-size: 30px;
	line-height: 15px;
	font-weight: 400;
	transform: translate(1px, -3px);
}
.cert-slider__nav:hover {
	transform:translateY(-1px); 
	background:rgba(255,255,255,.08);
	border-color:rgba(255,255,255,.32);
}
.cert-slider__nav:active {
	transform:translateY(0px) scale(.98);
}

.cert-slider__viewport{
	overflow:hidden;
	border-radius:24px;
	outline:none;
}
.cert-slider__track{
	display:flex;
	gap:18px;
	padding:18px;
	scroll-behavior:smooth;
	overflow:auto;
	scrollbar-width:none; /* firefox */
}
.cert-slider__track::-webkit-scrollbar{display:none;}

.cert-card{
	flex: 0 0 auto;
	width: min(280px, 78vw);
}
@media (min-width: 900px){
	.cert-card{ width: 280px; }
}
@media (min-width: 1100px){
	.cert-card{ width: 300px; }
}

.cert-card__btn{
	width:100%;
	border:0;
	padding:0;
	background:transparent;
	color:inherit;
	text-align:left;
	cursor:pointer;
}

.cert-card__frame{
	display:block;
	position:relative;
	border-radius:18px;
	padding:12px;
	border:1px solid rgba(255,255,255,.16);
	box-shadow: 0 26px 70px rgba(0,0,0,.35);
	transform: translateZ(0);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cert-card__btn:hover .cert-card__frame{
	transform: translateY(-3px);
	box-shadow: 0 34px 85px rgba(0,0,0,.42);
	border-color: rgba(255,255,255,.28);
}

.cert-card__img{
	display:block;
	width:100%;
	aspect-ratio: 3 / 4;
	object-fit:cover;
	border-radius:14px;
	background:rgba(255,255,255,.05);
}

.cert-card__caption{
	display:block;
	margin-top:14px;
	font-weight:700;
	text-align: center;
	letter-spacing:.2px;
	text-transform:uppercase;
	font-size:14px;
	opacity:.92;
	text-shadow:0 10px 30px rgba(0,0,0,.35);
}

.cert-slider__dots{
	display:flex;
	gap:10px;
	justify-content:center;
	margin-top:18px;
}
.cert-slider__dot{
	width: 10px !important;
	height: 10px !important;
	min-height: unset;
	max-width: unset;
	margin: 0;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.35);
	background:rgba(255,255,255,.14);
	cursor:pointer;
	transition: transform .15s ease, background .15s ease, width .15s ease;
}
.cert-slider__dot.is-active{
	width:28px;
	background:rgba(255,255,255,.72);
	transform: translateY(-1px);
}

/* Lightbox */
.cert-lightbox{
	position:fixed; inset:0;
	z-index:9999;
	display:none;
}
.cert-lightbox.is-open{display:block;}
.cert-lightbox__backdrop{
	position:absolute; inset:0;
	background:rgba(0,0,0,.72);
}
.cert-lightbox__dialog{
	position: absolute;
	left: 50%;
	top: 55%;
	transform: translate(-50%, -50%);
	width: min(585px, 92vw);
	max-height: 90vh;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(14, 18, 28, .55);
	backdrop-filter: blur(14px);
	box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
	padding: 18px;
}
.cert-lightbox__close{
	position: absolute;
	right: 8px;
	top: 17px;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	border: 1px solid rgb(0 0 0 / 28%);
	background: rgb(0 0 0 / 28%);
	color: #fff;
	cursor: pointer;
}
.cert-lightbox__close:hover {
	background:rgba(255,255,255,.14);
}
.cert-lightbox__figure{
	margin:0;
	display:grid;
	gap:10px;
}
.cert-lightbox__img{
	width:100%;
	max-height: calc(78vh - 120px);
	object-fit:contain;
	border-radius:16px;
	background:rgba(255,255,255,.04);
}
.cert-lightbox__caption{
	font-weight:700;
	letter-spacing:.2px;
	opacity:.95;
	text-align:center;
}

@media (max-width: 600px){
	.cert-slider__title {
		font-size:34px;
	}
	.cert-slider__wrap {
		grid-template-columns: 44px 1fr 44px;
	}
	.cert-slider__nav {
		width:44px;
		height:44px;
		border-radius:14px;
	}
	.cert-slider__nav span {
		font-size:26px;
	}
}

/* 
CTA */

.gsafe{
	position:relative;
	padding: 72px 0;
	color:#eaf7f1;
	--gsafe-accent: #004097;
	background: radial-gradient(900px 520px at 18% 18%, rgba(255, 255, 255, .10), transparent 60%), radial-gradient(700px 420px at 85% 30%, rgb(1 73 151 / 22%), transparent 60%), linear-gradient(180deg, #004097, #0040978a);
	overflow:hidden;
}

.gsafe--dark{
	background:
		radial-gradient(900px 520px at 18% 18%, rgba(255,255,255,.08), transparent 60%),
		radial-gradient(700px 420px at 85% 30%, rgba(16,208,142,.18), transparent 60%),
		linear-gradient(180deg, #0b1220, #060913);
}

.gsafe__container{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 18px;
	position:relative;
	z-index:2;
}

.gsafe__grid{
	display:grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 44px;
	align-items:center;
}

.gsafe__title{
	color: #fff;
	margin:0;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -.6px;
	font-weight: 900;
	text-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.gsafe__desc{
	margin: 18px 0 0;
	max-width: 560px;
	font-size: 16px;
	line-height: 1.8;
	color: rgba(234,247,241,.85);
}

.gsafe__chips{
	margin-top: 28px;
	display:grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 14px;
	max-width: 520px;
}

.gsafe__chip{
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(0,0,0,.12);
	color:#fff;
	border-radius: 14px;
	padding: 14px 14px;
	display:flex;
	align-items:center;
	gap: 12px;
	cursor:pointer;
	transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
	box-shadow: 0 18px 40px rgba(0,0,0,.18);
	position:relative;
	overflow:hidden;
}
.gsafe__chip:hover{
	transform: translateY(-2px);
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.18);
	box-shadow: 0 26px 55px rgba(0,0,0,.24);
}
.gsafe__chip::after{
	content:"";
	position:absolute;
	inset:-40px -60px auto auto;
	width:120px; height:120px;
	background: radial-gradient(circle at 30% 30%, rgba(16,208,142,.22), transparent 55%);
	transform: rotate(10deg);
	pointer-events:none;
}

.gsafe__chip-ico{
	width: 20px;
	height: 20px;
	object-fit: contain;
	filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}
.gsafe__chip-dot{
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--gsafe-accent);
	box-shadow: 0 0 0 8px rgba(16,208,142,.14);
}
.gsafe__chip-text{
	font-weight: 800;
	letter-spacing: .2px;
}

/* RIGHT CARD */
.gsafe__card{
	border-radius: 28px;
	background: rgba(255,255,255,.09);
	border: 1px solid rgba(255,255,255,.14);
	backdrop-filter: blur(12px);
	box-shadow: 0 40px 120px rgba(0,0,0,.28);
	overflow:hidden;
}
.gsafe__card-inner{
	padding: 34px 28px 30px;
	text-align:center;
}

.gsafe__badge{
	width: 78px;
	height: 78px;
	border-radius: 999px;
	margin: 0 auto 18px;
	background: rgb(115 163 191 / 47%);
	display:grid;
	place-items:center;
	box-shadow: inset 0 0 0 1px rgba(16,208,142,.22), 0 26px 70px rgba(0,0,0,.22);
	position:relative;
}
.gsafe__badge::after{
	content:"";
	position:absolute;
	inset:-18px;
	border-radius:999px;
	background: radial-gradient(circle, rgb(0 64 151 / 53%), #00000000 60%);
	filter: blur(6px);
	opacity:.9;
}
.gsafe__badge-ico{
	width: 34px;
	height: 34px;
	object-fit: contain;
	position:relative;
	z-index:1;
}
.gsafe__badge-mark{
	font-size: 30px;
	position:relative;
	z-index:1;
}

.gsafe__card-title{
	/*   font-family: sans-serif; */
	font-weight: 900;
	font-size: 34px;
	letter-spacing: -.3px;
}
.gsafe__card-sub{
	margin-top: 10px;
	color: rgba(234,247,241,.78);
	line-height: 1.7;
}

.gsafe__phone{
	display:inline-block;
	margin-top: 22px;
	font-weight: 900;
	font-size: 40px;
	letter-spacing: .5px;
	color: var(--primary-color);
	text-decoration:none;
	transition: transform .16s ease, filter .16s ease;
	filter: drop-shadow(0 18px 35px rgba(0,0,0,.22));
}
.gsafe__phone:hover{
	transform: translateY(-1px) scale(1.01);
}

/* Decorative blobs */
.gsafe__blob{
	position:absolute;
	width: 520px;
	height: 520px;
	border-radius: 999px;
	filter: blur(30px);
	opacity:.25;
	pointer-events:none;
}
.gsafe__blob--a{
	left:-220px;
	top:-240px;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 60%);
}
.gsafe__blob--b{
	right:-240px;
	bottom:-260px;
	background: radial-gradient(circle at 40% 40%, rgba(16,208,142,.85), transparent 60%);
}

/* Responsive */
@media (max-width: 980px){
	.gsafe__grid { 
		grid-template-columns: 1fr;
		gap: 26px; 
	}
	.gsafe__chips {
		max-width: unset;
	}
	.gsafe__title {
		font-size: 38px;
	}
	.gsafe__phone {
		font-size: 36px; 
	}
}
@media (max-width: 520px){
	.gsafe { 
		padding: 56px 0;
	}
	.gsafe__chips {
		grid-template-columns: 1fr;
	}
	.cert-slider__container {
		padding: unset;
	}
}
.gallery img {
	border-radius: 10px;

}
.gallery .section-title span,
.clients .section-title span{
	font-size: 44px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: .2px;
	text-shadow: 0 10px 35px rgba(0, 0, 0, .45);
}
.gallery .box-image {
	border-radius: 10px;
}
/**
* Menu
* */
#masthead > div > div:nth-child(3) {
	width: calc(100% - 230px) !important;
}
#masthead > div > div:nth-child(3) > ul {
	    justify-content: center;
    gap: 25px;
}
.logo-left .logo {
	margin-right: 0 !important;
}
#masthead > div > div:nth-child(3) > ul > li > a {
	color: rgb(55 65 81);
	font-weight: 600;
	font-size: 16px;
	text-transform: capitalize;
	position: relative;
	transition: all 0.2s ease;
}

#masthead > div > div:nth-child(3) > ul > li > a:after {
	position: absolute;
	content: '';
	width: 0%;
	bottom: 2px;
	left: 0;
	background-color: var(--ls-primary);
	height: 2px;
	transition: all 0.3s ease;
}
#masthead > div > div:nth-child(3) > ul > li.current_page_item > a {
	color: var(--fs-color-primary);
}
#masthead > div > div:nth-child(3) > ul > li:hover > a {
	color: var(--fs-color-primary) !important;
	transition: all 0.2s ease;
}
#masthead > div > div:nth-child(3) > ul > li.current_page_item > a:after,
#masthead > div > div:nth-child(3) > ul > li:hover > a:after{
	width: 100%;
	transition: all 0.3s ease;
} 
.nav-dropdown-has-arrow li.current-dropdown.has-dropdown:after, .nav-dropdown-has-arrow li.current-dropdown.has-dropdown:before {
	opacity: 0 !important;
}
.sub-menu.nav-dropdown {
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	background-color: rgb(255 255 255);
	border: 1px solid rgb(243 244 246);
	border-radius: 16px;
	padding: 0;
	overflow: hidden;
}
.sub-menu.nav-dropdown li {
	padding: 0;
	margin: 0;
}
.sub-menu.nav-dropdown li a {
	margin: 0;
	border-bottom: unset;
	padding: 8px 16px !important;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 600;
	margin: 0 !important;
	color: rgb(55 65 81);
	text-transform: capitalize;
	transition: all 0.3s ease;
}
.sub-menu.nav-dropdown li a:hover {
	color: var(--fs-color-primary) !important;
	background-color: rgb(249 250 251);
	transition: all 0.3s ease;
}
.clients img {
	border: 1px solid #00000029;
	width: 80%;
	height: 80%;
	padding: 25px;
}

/* dichvu */
:root{
	--ss-primary: #0455a4;
	--ss-text: #303030;
	--ss-card-bg: rgba(255,255,255,.92);
	--ss-left-bg: rgba(255,255,255,.88);
	--ss-radius: 0 0 220px 0;
	--ss-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.ss-wrap{
	position: relative;
	overflow: hidden;
	padding: 40px 0;
	background: #e9edf2;
}

.ss-overlay-bg{
	position: absolute;
	inset: 0;
	background-image: var(--ss-bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

.ss-overlay-bg::after{
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,.18);
	backdrop-filter: blur(1px);
}

.ss-inner{
	position: relative;
	z-index: 2;
	width: min(1280px, calc(100% - 40px));
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 0;
	align-items: stretch;
	min-height: 540px;
}

.ss-left{
	position: relative;
	min-height: 540px;
	background: var(--ss-left-bg);
	overflow: hidden;
}

/* .ss-left-shape{
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 100%;
	background: var(--ss-primary);
	border-radius: var(--ss-radius);
	transform: scale(0);
	transform-origin: top left;
	transition: transform .65s cubic-bezier(.2,.7,.2,1);
	z-index: 1;
} */

.ss-left-content{
	position: relative;
	z-index: 2;
	height: 100%;
	padding: 54px 54px 54px 54px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: 0.7s ease;
}
.ss-left-content:hover {
	background-color: var(--ss-primary);
	border-radius: 0 0 100% 0;
	transition: 0.7s ease;
}

.ss-left-content:hover .ss-desc {
	transform: translatey(-140px);
	transition: 0.7s ease;
}
.ss-left-content:hover .ss-title,
.ss-left-content:hover .ss-desc {
	color: #FFF;
	transition: 0.7s ease;
}

.ss-title{
	margin: 0;
	color: #444;
	font-size: clamp(42px, 5vw, 72px);
	line-height: 1.02;
	font-weight: 700;
	letter-spacing: -0.03em;
	max-width: 520px;
	transition: color .35s ease;
}

.ss-desc{
	max-width: 520px;
	color: #0455a4;
	font-size: clamp(20px, 1.8vw, 32px);
	line-height: 1.45;
	font-weight: 400;
	transition: color .35s ease;
	transition: 0.7s ease;
}

.ss-right{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: 4px;
}

.ss-card{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 132px;
	padding: 28px 34px 28px 44px;
	background: var(--ss-card-bg);
	color: inherit;
	text-decoration: none;
	box-shadow: var(--ss-shadow);
	transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.ss-card:hover{
	transform: translateX(6px);
	background: #fff;
	box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

.ss-card-text{
	flex: 1;
}

.ss-card-desc{
	margin-bottom: 8px;
	color: #666;
	font-size: clamp(14px, 1vw, 17px);
	line-height: 1.35;
	font-weight: 400;
}

.ss-card-title{
	margin: 0;
	color: #434343;
	font-size: clamp(30px, 2vw, 42px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.ss-card-arrow{
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	color: #3f3f3f;
	transition: transform .3s ease, color .3s ease;
}

.ss-card:hover .ss-card-arrow{
	transform: translateX(4px);
	color: var(--ss-primary);
}

.ss-card-arrow svg{
	width: 100%;
	height: 100%;
	display: block;
}

/* .ss-wrap.is-hover .ss-left-shape{
	transform: scale(1.45);
} */

.ss-wrap.is-hover .ss-title,
.ss-wrap.is-hover .ss-desc{
	color: #fff;
}

.ss-wrap.is-hover .ss-left{
	box-shadow: 0 24px 50px rgba(0,0,0,.15);
}

@media (max-width: 1100px){
	.ss-inner{
		grid-template-columns: 1fr;
		min-height: unset;
	}

	.ss-left{
		min-height: 420px;
	}

	.ss-right{
		padding-left: 0;
		padding-top: 6px;
	}

	.ss-card{
		min-height: 116px;
	}
}

@media (max-width: 767px){
	.ss-left-content:hover .ss-desc {
		transform: translatey(-55px);
	}
	.ss-wrap{
		padding: 20px 0;
	}

	.ss-inner{
		width: min(100% - 20px, 1280px);
	}

	.ss-left{
		min-height: 320px;
	}

	.ss-left-content{
		padding: 28px 24px;
	}

	.ss-title{
		font-size: 35px;
		max-width: 80%;
	}

	.ss-desc{
		font-size: 16px;
		max-width: 80%;
	}

	.ss-card{
		min-height: auto;
		padding: 22px 20px;
	}

	.ss-card-title{
		font-size: 24px;
	}

	.ss-card-desc{
		font-size: 14px;
	}

	.ss-wrap.is-hover .ss-left-shape{
		transform: scale(1.2);
	}
}
/*tầm nhìn  */
:root{
	--sdm-primary: #0455a4;
	--sdm-text: #3f3f3f;
	--sdm-muted: #6a6a6a;
	--sdm-border: #cfcfcf;
	--sdm-bg: #f5f5f5;
}

.sdm-section{
	background: var(--sdm-bg);
	padding: 40px 0 36px;
}

.sdm-container{
	width: min(1040px, calc(100% - 32px));
	margin: 0 auto;
}

.sdm-header{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 18px;
}

.sdm-main-title{
	margin: 0;
	color: var(--sdm-text);
	font-size: clamp(36px, 5vw, 74px);
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.03em;
	text-align: right;
}

.sdm-list{
	border-top: 1px solid var(--sdm-border);
}

.sdm-item{
	display: grid;
	grid-template-columns: 170px 1fr 1.35fr;
	gap: 44px;
	align-items: start;
	padding: 38px 0 42px;
	border-bottom: 1px solid var(--sdm-border);
	transition: background .25s ease;
}

.sdm-item:hover{
	background: rgba(4, 85, 164, 0.03);
}

.sdm-code{
	color: #4a4a4a;
	font-size: clamp(58px, 7vw, 102px);
	line-height: .9;
	font-weight: 300;
	letter-spacing: -0.04em;
}

.sdm-subtitle{
	margin: 0;
	color: var(--sdm-text);
	font-size: clamp(20px, 2vw, 27px);
	line-height: 1.4;
	font-weight: 700;
}

.sdm-desc{
	color: var(--sdm-muted);
	font-size: clamp(17px, 1.5vw, 14px);
	line-height: 1.7;
	font-weight: 400;
}

.sdm-link{
	display: inline-flex;
	align-items: flex-end;
	justify-content: flex-start;
	width: 110px;
	height: 34px;
	margin-top: 18px;
	text-decoration: none;
	position: relative;
}

.sdm-link-line{
	display: block;
	width: 78px;
	height: 2px;
	background: var(--sdm-primary);
	transition: width .3s ease;
}

.sdm-link-angle{
	display: block;
	width: 18px;
	height: 18px;
	border-right: 2px solid var(--sdm-primary);
	border-top: 2px solid var(--sdm-primary);
	transform: translate(-2px, 1px) rotate(45deg);
	transform-origin: center;
	transition: transform .3s ease;
}

.sdm-item:hover .sdm-link-line{
	width: 92px;
}

.sdm-item:hover .sdm-link-angle{
	transform: translate(6px, 1px) rotate(45deg);
}

@media (max-width: 991px){
	.sdm-item{
		grid-template-columns: 130px 1fr;
		gap: 24px 28px;
	}

	.sdm-col-desc{
		grid-column: 2 / -1;
	}

	.sdm-code{
		font-size: 72px;
	}

	.sdm-desc{
		font-size: 18px;
	}
}

@media (max-width: 767px){
	.gsafe__card-title {
		font-size: 30px;
	}
	.sdm-section{
		padding: 24px 0;
	}

	.sdm-container{
		width: min(100% - 50px, 1040px);
	}

	.sdm-header{
		justify-content: flex-start;
		margin-bottom: 14px;
	}

	.sdm-main-title{
		text-align: left;
		font-size: 42px;
	}

	.sdm-item{
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 24px 0 28px;
	}

	.sdm-col-desc{
		grid-column: auto;
	}

	.sdm-code{
		font-size: 56px;
	}

	.sdm-subtitle{
		font-size: 24px;
	}

	.sdm-desc{
		font-size: 16px;
		line-height: 1.65;
	}

	.sdm-link{
		width: 92px;
		margin-top: 14px;
	}

	.sdm-link-line{
		width: 64px;
	}
}

/** Slide */
.container__visual {
	position: relative;
	max-width: 1760px;
	height: calc(100vh - 10rem);
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}

.container__visual .swiper-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}

.container__visual .swiper-container .circle-effect {
	position: absolute;
	top: 0;
	right: 0;
	width: 15rem;
	height: 15rem;
	border-radius: 0 0 0 18rem;
	background: #004097;
	pointer-events: none;
	z-index: 10;
	opacity: 0;
	transform-origin: top right;
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.container__visual .svg-quart-main svg path{
	color: #004097;
    fill: #004097;
}
.container__visual .swiper-container.circle-active .circle-effect {
	opacity: 1;
	animation: circleExpand 2s ease forwards;
}

.container__visual .swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.container__visual .swiper-slide {
	position: relative;
	opacity: 0;
	z-index: 1;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.container__visual .swiper-slide.swiper-slide-3 {
	background-position: 76% center;
}

.container__visual .swiper-slide-txt {
	position: absolute;
	top: 7.8125vw;
	left: 9.89583vw;
	z-index: 2;
}

.container__visual .svg-quart-main {
	position: relative;
}

.container__visual .svg-quart-main svg {
	width: 8.4rem;
	height: 5.8rem;
}

.container__visual .svg-quart-main svg .quart-path {
	opacity: 0;
}

.container__visual .swiper-slide-txt h2 {
	color: #fff;
    font-size: 68px;
	font-weight: 400;
	line-height: 74%;
	margin: 1.5625vw 0 1.875vw;
	opacity: 0;
	letter-spacing: -0.02em;
}

.container__visual .swiper-slide-txt h2 span {
	display: block;
}

.container__visual .swiper-slide-txt h2 span:nth-child(2) {
	margin: 0.52083vw 0 0.98958vw;
}

.container__visual .swiper-slide-txt h2 em {
	position: relative;
	font-size: 7.8rem;
	font-weight: 500;
	line-height: 80%;
	letter-spacing: 0.156rem;
	text-transform: lowercase;
	font-style: italic;
}

.container__visual .swiper-slide-txt h2 em::after {
	position: absolute;
	left: 0;
	top: 80%;
	content: '';
	width: 100%;
	height: 0.2rem;
	background-color: #fff;
}

.container__visual .swiper-slide-txt p {
	color: #fff;
    font-size: 20px;
	font-weight: 500;
	line-height: 145%;
	opacity: 0;
}

.container__visual .swiper-slide.animation {
	opacity: 1;
}

.container__visual .swiper-slide.animation .svg-quart-main svg .quart-path {
	animation: clipExpand 0.2s cubic-bezier(0.4, 0, 1, 1) 1s forwards;
}

.container__visual .swiper-slide.animation h2 {
	animation: text-focus-in 0.5s ease-in-out 1.4s forwards;
}

.container__visual .swiper-slide.animation p {
	animation: text-focus-in 0.5s ease-in-out 1.5s both;
}

.container__visual .swiper-navigation .custom-button {
	position: absolute;
	z-index: 20;
	cursor: pointer;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background-color: #fff;
}

.container__visual .swiper-navigation .custom-button span {
	width: 100%;
	height: 100%;
	color: #222;
	text-transform: uppercase;
	align-items: center;
    font-size: 20px;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: 0.036rem;
	display: flex;
	justify-content: center;
}

.container__visual .swiper-navigation .custom-button span::before {
	content: '';
	display: inline-block;
	width: 1.8rem;
	height: 1.8rem;
	background: url('/wp-content/uploads/2026/03/icon_arrow.svg') center/contain no-repeat;
}

.container__visual .swiper-navigation .custom-button-prev {
    height: 80px;
	left: 0;
	bottom: 0;
	width: 0;
	border-radius: 0 1.8em 0 0;
	transition: width 1s ease 0.5s;
}

.container__visual .swiper-navigation .custom-button-prev span {
	padding-top: 0;
}

.container__visual .swiper-navigation .custom-button-prev span::before {
	margin-right: 1rem;
	transform: rotate(90deg);
}

.container__visual .swiper-navigation .custom-button-prev.animation {
	width: 19rem;
}

.container__visual .swiper-navigation .custom-button-next {
	top: 7.8125vw;
	width: 7.4rem;
	right: 0;
	border-radius: 1.8em 0 0 1.8em;
	height: 0;
	transition: height 1s ease 0s;
}

.container__visual .swiper-navigation .custom-button-next span {
	padding-top: 10px;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

.container__visual .swiper-navigation .custom-button-next span::before {
	margin-bottom: 1rem;
	transform: rotate(-90deg);
}

.container__visual .swiper-navigation .custom-button-next.animation {
	height: 300px;
}

.container__visual .swiper-navigation .custom-button.swiper-button-disabled {
	display: none;
}

@keyframes circleExpand {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(14);
	}
}

@keyframes clipExpand {
	0% {
		opacity: 0;
		transform: scaleX(0.7) scaleY(0.8);
	}
	100% {
		opacity: 1;
		transform: scaleX(1) scaleY(1);
	}
}

@keyframes text-focus-in {
	0% {
		filter: blur(12px);
		opacity: 0;
		transform: translateY(1rem);
	}
	100% {
		filter: blur(0);
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1250px) {
	.container__visual {
		width: 100%;
		height: calc(100svh - 8.4rem);
	}

	.container__visual .swiper-slide-txt {
		top: auto;
		bottom: 16rem;
		left: 5rem;
		margin: 0;
	}

	.container__visual .svg-quart-main svg {
		width: 4.8rem;
		height: 2.4rem;
	}

	.container__visual .swiper-slide-txt h2 {
		font-size: 4.2rem;
		margin: 1.8rem 0 0;
	}

	.container__visual .swiper-slide-txt h2 span:nth-child(2) {
		margin: 0.6rem 0 1.4rem;
	}

	.container__visual .swiper-slide-txt h2 em {
		font-size: 4.8rem;
		letter-spacing: 0.096rem;
	}

	.container__visual .swiper-slide-txt h2 em::after {
		top: 78.5%;
	}

	.container__visual .swiper-slide-txt p {
		font-size: 1.6rem;
		margin-top: 1.5rem;
	}
}

@media (max-width: 767px) {
	.container__visual .swiper-container .circle-effect {
		width: 5.5rem;
		height: 5.5rem;
		border-radius: 0 0 0 6rem;
	}

	.container__visual .swiper-slide-txt {
		top: auto;
		bottom: 10rem;
		left: 3rem;
		margin: 0;
	}

	.container__visual .swiper-slide-txt h2 {
		font-size: 3.2rem;
		margin: 1.5rem 0 0;
	}

	.container__visual .swiper-slide-txt h2 span:nth-child(2) {
		margin: 0.5rem 0 1.2rem;
	}

	.container__visual .swiper-slide-txt h2 em {
		font-size: 4rem;
		font-weight: 500;
		line-height: 80%;
		letter-spacing: 0.08rem;
	}

	.container__visual .swiper-slide-txt p {
		font-size: 1.4rem;
		margin-top: 2rem;
	}

	.container__visual .swiper-navigation .custom-button span {
		font-size: 1.2rem;
		letter-spacing: 0.024rem;
		white-space: nowrap;
	}

	.container__visual .swiper-navigation .custom-button-prev {
		left: 0;
		bottom: 0;
		width: 0;
		height: 4em;
		border-radius: 0 1.2rem 0 0;
		transition: width 1s ease 0.5s;
	}

	.container__visual .swiper-navigation .custom-button-prev span::before {
		transform: rotate(90deg);
		margin-right: 0.4rem;
	}

	.container__visual .swiper-navigation .custom-button-prev.custom-button-prev-2.animation {
		width: 14.6rem;
	}

	.container__visual .swiper-navigation .custom-button-prev.custom-button-prev-3.animation {
		width: 18.2rem;
	}

	.container__visual .swiper-navigation .custom-button-next {
		top: 5em;
		width: 3.5em;
		border-radius: 1.2rem 0 0 1.2rem;
	}

	.container__visual .swiper-navigation .custom-button-next span {
		padding: 1.2rem 0 0 1.3rem;
	}

	.container__visual .swiper-navigation .custom-button-next.custom-button-next-1.animation {
		height: 20.4rem;
	}

	.container__visual .swiper-navigation .custom-button-next.custom-button-next-2.animation {
		height: 16rem;
	}
}
.hiring h2 {
	text-align: center;
    margin: 0 0 40px;
    color: var(--sdm-text);
    font-size: clamp(36px, 5vw, 74px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
}