/* Kanit is self-hosted in assets/font - only the seven weights this stylesheet
   actually uses, latin + thai, no italics. Regenerate with tools/build-fonts.py. */
@import url('../font/kanit.css');
@import url('./reset.css');


*,
::after,
::before {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Kanit';
	font-size: clamp(14px, 0.8333vw, 16px);
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	line-height: 1.2;
	color: #3A3A3A;
	font-weight: 400;
}

html:not(.aos-enabled) [data-aos] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

hr {
	margin: 1rem 0;
	color: inherit;
	border: 0;
	opacity: 0.25;
}

a {
	text-decoration: none;
}

b,
strong,
.t-bold {
	font-weight: 600;
}

.t-exbold {
	font-weight: 800;
}

.font-normal {
	font-weight: 400 !important;
}
.font-light-semi {
	font-weight: 300;
}
.font-light {
	font-weight: 200;
}

.gradient-bg-primary {
	background: linear-gradient(135deg, #f7941d, #f7495e, #ec008c);
}

.pd {
	padding: 50px 0;
}

.pd-100 {
	padding: 100px 0;
}

.fw {
	width: 100%;
	float: left;
}

.mb-8px {
	margin-bottom: 8px;
}

.mb-16px {
	margin-bottom: 16px;
}

.mb-40px {
	margin-bottom: 40px;
}

.mb-50px {
	margin-bottom: 50px;
}

.mb-60px {
	margin-bottom: 60px;
}

.mb-70px {
	margin-bottom: 70px;
}

hr.custom {
	height: 4px;
	background-color: #9C005C;
	opacity: 1;
}

.gsb-header {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 99;
}


.gsb-hero-banner {
	width: 100%;
	background-color: #FCF8F5;
}

.gsb-hero-banner video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	position: absolute;
	inset: 0;
	
}

.action-fixed {
	position: fixed;
	left: 80px;
	width: auto;
	pointer-events: none;
	bottom: 100px;
	z-index: 5;
}

.action-fixed a {
	pointer-events: all;
}

.banner-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.btn-clr-primary {
	position: relative;
	z-index: 1;
	border-radius: 100px;
	background: linear-gradient(0deg, #ED2290 0.02%, #F7B3D1 100%);
	padding: 3px;
	border: 0;
	font-weight: 500;
	color: #fff;
	min-width: 200px;
}

.clr-primary-txt {
	color: #EC008C;
}

a.clr-primary:hover {
	color: #F496BF;
}

.btn-clr-primary:hover {
	color: #fff;
}

.btn-clr-primary>span {
	position: relative;
	background: linear-gradient(0deg, #F496BF 0.02%, #E975B0 25.02%, #DF52A0 57.01%, #D83D97 83%, #D63694 100%);
	border-radius: 100px;
	width: 100%;
	float: left;
	padding: 10px 20px;
	line-height: 1.2;
}

.btn-primary {
	background-color: #EC008C;
	border-color: #EC008C;
	font-size: clamp(16px, 1.0417vw, 20px);
}

.btn-primary:hover {
	background-color: #FCE7F1;
	border-color: #FCE7F1;
	color: #EC008C;
}

.btn-primary.btn-outline {
	background-color: #fff;
	border-color: #EC008C;
	color: #EC008C;
	border-width: 3px;
	padding: 10px 40px;
	border-radius: 100px;
}

.btn-primary.btn-outline:hover {
	background-color: #EC008C;
	border-color: #EC008C;
	color: #fff;
}

/* ปุ่ม CTA สามจุดบน index - ไอคอนบอกปลายทาง บวกแสงกวาดที่วิ่งเอง
   ไม่ต้องรอ hover จึงบอกว่า "คลิกได้" บนมือถือได้ด้วย

   แยกเป็นคลาสของตัวเองแทนที่จะแก้ .btn-outline ตรง ๆ เพราะปุ่ม "กลับ"
   บน report-chapter.php และ read-report.php ใช้ .btn-outline เหมือนกัน
   และไม่ควรกะพริบตาม */
.btn-primary.btn-outline.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	position: relative;
	overflow: hidden;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .12s ease;
}

.btn-cta:active {
	transform: scale(.97);
}

.btn-cta .btn-ico {
	width: 1.05em;
	height: 1.05em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .25s ease;
}

.btn-cta:hover .btn-ico-arrow {
	transform: translateX(5px);
}

.btn-cta:hover .btn-ico-ext {
	transform: translate(2px, -2px);
}

/* ::before วางทับตัวอักษรโดยตั้งใจ - แสงต้องกวาดผ่านทั้งปุ่ม
   overflow: hidden ด้านบนเป็นตัวตัดให้อยู่ในทรงพิลล์ */
.btn-cta::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(236, 0, 140, .30), transparent);
	animation: btn-cta-sheen 3.6s ease-in-out infinite;
}

/* พอ hover แล้วพื้นเป็นชมพูทึบ ตัวหนังสือขาว แสงกวาดจะกลายเป็นคราบ - ปิดทิ้ง */
.btn-cta:hover::before {
	animation: none;
	opacity: 0;
}

@keyframes btn-cta-sheen {
	0%, 45% {
		left: -60%;
	}

	80%, 100% {
		left: 115%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.btn-cta::before {
		animation: none;
		opacity: 0;
	}

	.btn-cta .btn-ico {
		transition: none;
	}
}

.btn-check:active+.btn-primary:focus,
.btn-check:checked+.btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show>.btn-primary.dropdown-toggle:focus {
	box-shadow: none;
}

.form-control {
	border-color: #F0F0F0;
}

.form-control:focus {
	border-color: #F0F0F0;
	outline: none;
	box-shadow: none;
}

input::placeholder,
textarea::placeholder {
	color: #B3B3B3;
	/* Set your desired color */
	opacity: 1;
	/* Optional: Make sure the placeholder color is fully visible */
}


.gsb-content {}

.clr-white {
	color: #fff;
}

.clr-gray {
	color: #888888;
}

.clr-primary {
	color: #BF3674;
}

.clr-dark {
	color: #000000;
}

.clr-cream {
	color: #F6EFE8;
}

.bg-cream {
	background-color: #F6EFE8;
}

.bg-clr-primary {
	background-color: #F4D4DF;
}

/* 
.container-fluid{max-width: 90vw;} */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {}

.fs-gs-dp-1 {
	font-size: clamp(40px, 4.1667vw, 80px);
	line-height: 1.2;
	font-weight: 200;
}

.fs-gs-dp-1.font-normal {
	font-weight: 400;
}

h1,
.h1 {
	font-size: clamp(32px, 2.6042vw, 50px);
	line-height: 1.2;
}

h2,
.h2 {
	font-size: clamp(28px, 2.1875vw, 42px);
	line-height: 1.2;
}

h3,
.h3 {
	font-size: clamp(24px, 1.875vw, 36px);
	line-height: 1.2;
}

h4,
.h4 {
	font-size: clamp(20px, 1.5625vw, 30px);
	line-height: 1.2;
}

h5,
.h5 {
	font-size: clamp(18px, 1.3542vw, 26px);
	line-height: 1.2;
}

h6,
.h6 {
	font-size: clamp(16px, 1.0417vw, 20px);
	line-height: 1.2;
}

h1.oversize {
	font-size: clamp(44px, 3.4375vw, 66px);
}

.extra-oversize {
	font-size: clamp(120px, 11.4583vw, 220px);
	line-height: 0.8;
}

.box-quote {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.box-quote>span {
	font-weight: 700;
	color: #F288BB;
	font-weight: 600;
	line-height: 1;
}

.circle-group {
	display: flex;
	justify-content: center;
	margin: 80px 0;
}

.circle-group .item-circle-group {
	width: 354px;
	height: 354px;
	border-radius: 10000px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.circle-group .item-circle-group h1 {
	font-weight: 800;
}

.circle-group .item-circle-group:first-child {
	position: relative;
	left: 50px;
	background-color: rgba(250, 209, 227, 0.8);
}

.circle-group .item-circle-group:last-child {
	position: relative;
	right: 50px;
	background-color: rgba(255, 132, 151, 0.8);
	z-index: 3;
}

.circle-group .item-circle-group:nth-of-type(2) {
	background-color: rgba(34, 33, 118, 0.8);
	z-index: 2;
}

.sec-banner {
	position: relative;
}

.sec-banner picture img {
	width: 100%;
	float: left;
}

.sec-banner .banner-contain {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	z-index: 1;
}

.doc-report-title {
	font-size: clamp(14px, 0.9375vw, 18px);
	font-weight: 600;
	color: #3A3A3A;
	transition: all ease .3s;
	margin-top: 24px;
}

.doc-report-title>span {
	color: #EC008C;
}

.doc-item .doc-report-title:hover {
	color: #E975B0;
}
.doc-item img{
	max-width: 70%;
	box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
	filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3));
}
.list-read-report img {
	width: 100%;
	float: left;
}

.tab-toolbar {
	position: fixed;
	height: 300px;
	background-color: #F698D0;
	padding: 16px;
	right: 4px;
	top: 4px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	z-index: 9;
}

.list-toolbar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}


.form-check {
	padding-left: 0;
}

/* ซ่อน input ดั้งเดิม */
.form-check-input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* กำหนด style สำหรับ label เพื่อใช้เป็นกล่อง */
.form-check-label {
	position: relative;
	padding-left: 30px;
	cursor: pointer;
	line-height: 1.5;
	user-select: none;
}

/* กล่อง checkbox / radio */
.form-check-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border: 2px solid #D9D9D9;
	background: #fff;
	border-radius: 4px;
	/* เปลี่ยนเป็น 50% ถ้าเป็น radio */
	transition: all 0.2s ease;
}

/* สำหรับ radio */
input[type="radio"]+.form-check-label::before {
	border-radius: 50%;
	border-color: #D9D9D9;
}


input[type="radio"]:checked+.form-check-label::before {
	border-color: #EC008C;
}


/* mark ถูกเลือก */
.form-check-input:checked+.form-check-label::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	width: 8px;
	height: 8px;
	background: #EC008C;
	border-radius: 50%;

}

input[type="checkbox"]:checked+label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23FFFFFF'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	background-color: #EC008C;
	border-color: #EC008C;

}


/* สำหรับ checkbox: เปลี่ยน mark เป็นติ๊กถูก */
input[type="checkbox"]:checked+.form-check-label::after {
	display: none;
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 10px;
	height: 10px;
	border: solid #EC008C;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	background: transparent;
}

form hr {
	float: left;
	width: 100%;
	background-color: #F288BB;
	opacity: 1;
	margin: 20px 0 40px;
}


.item-reading {
	position: relative;
	width: 100%;
	float: left;
}

.item-reading:hover .download-thumb {
	opacity: 1;
}

.download-thumb {
	position: absolute;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #D83D97;
	border-radius: 4px;
	top: 10px;
	right: 10px;
	opacity: 0;
	transition: all ease .5s;
}

.download-thumb svg {
	width: 20px;
	height: auto;
}

.ctn-action {
	position: absolute;
	bottom: -10vw;
}



.scrolldown-box {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 60px;
	height: 60px;
	/* background: #fff; */
	border-radius: 100px;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.scrolldown-box span {
	display: block;
	width: 15px;
	height: 15px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	margin: -7.5px;
	animation: scrolldown 2s infinite;
}

.scrolldown-box span:nth-child(2) {
	animation-delay: -0.2s;
}

.scrolldown-box span:nth-child(3) {
	animation-delay: -0.4s;
}

@keyframes scrolldown {

	0% {
		opacity: 0;
		transform: rotate(45deg) translate(-0px, -0px);
	}

	25% {
		opacity: 1;
	}

	75% {
		opacity: 0;
	}

	100% {
		opacity: 0;
		transform: rotate(45deg) translate(30px, 30px);
	}
}


.wrap-circle-group {
	width: 100%;
	float: left;
	text-align: center;
	padding: 50px 0;
}

.thumb-circle-group {
	display: flex;
	justify-content: center;
}

.thumb-circle-group .thumb-item-circle-group {
	text-align: center;
	padding: 20px 30px;
}

.wrap-circle-group .mb-3.h2.clr-primary-txt.font-normal {
	font-size: clamp(24px, 2.1875vw, 42px);
}

.wrap-circle-group .mb-4.h5.font-light {
	font-size: clamp(20px, 1.3542vw, 26px);
}

.thumb-circle-group .thumb-item-circle-group h4 {
	font-weight: bold;
}

.thumb-circle-group .thumb-item-circle-group:nth-of-type(2) {
	border-left: 1px solid #EC008C;
	border-right: 1px solid #EC008C;
}

@media (min-width: 991px) {
	.thumb-circle-group .thumb-item-circle-group {
		width: 33.33%;
	}
}

.inner-cont {
	width: 100%;
	float: left;
	position: relative;
	
}

.inner-cont.sec-1{
	padding-top: 130px;
	height: 100vh;
}
.gsb-header img{
	width: 150px;
}

.bg-glow {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: -50%;
	left: 0;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgb(255 255 255) 52%, rgba(255, 255, 255, 0) 100%);
}

.sp-fs-1 {
	font-size: clamp(32px, 4.1667vw, 80px);
	line-height: 1.2;
	font-weight: 200;
}

.sp-fs-1 .txt-small {
	font-size: clamp(16px, 1.875vw, 36px);
	line-height: 1.2;
}

.sp-fs-0 {
	font-size: clamp(80px, 8.3333vw, 160px);
	line-height: 1.2;
	font-weight: 200;
}

.asb-cont {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	padding-top: 10vw;
}

.ele-topic {
	position: relative;
	padding-left: 20px;
	z-index: 1;
	margin-top: 20px;
}

.ele-topic::after {
	--ele-size: 326px;
	content: "";
	background-image: url(../image/ele-topic-banner.webp);
	position: absolute;
	width: var(--ele-size);
	height: var(--ele-size);
	left: calc(var(--ele-size) / -2.5);
	top: 50%;
	transform: translateY(-40%);
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}

.z-2 {
	z-index: 2;
}


	.inner-cont.sec-1 .sp-fs-1{
		font-size: clamp(50px, 7.2917vw, 140px);
	}
	.inner-cont.sec-1 .sp-fs-1 .txt-small {
		font-size: clamp(24px, 1.875vw, 36px);
	}


.thumb-kv {
	position: relative;
	width: 100%;
	float: left;
	border-radius: 8px;
	overflow: hidden;
}

.thumb-kv .thumb-image img {
	width: 100%;
	float: left;
	object-fit: cover;
	object-position: center center;
}

.thumb-kv .thumb-body {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	text-align: center;
	padding: 30px 20px;
	gap: 20px;
}

.thumb-kv .thumb-body .number {
	border-radius: 100px;
	width: 70px;
	height: 70px;
	display: flex;
	font-weight: 300;
	align-items: center;
	justify-content: center;
	background-color: #EC008C;
	color: #fff;
	font-size: clamp(16px, 1.25vw, 24px);
	border: 2px solid #fff;
	background: linear-gradient(90deg, #DF6496 -2.51%, #D96395 9.1%, #C96191 24.4%, #AD5D8C 41.74%, #875784 60.59%, #56507A 80.66%, #1C476F 101.46%, #19476E 102.33%);
	box-shadow: -1px -1px 39px 0px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: -1px -1px 39px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: -1px -1px 39px 0px rgba(0, 0, 0, 0.5);
}

.gsb-abs-image-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 0;
	object-fit: cover;
	object-position: bottom center;
}

.gsb-abs-content {
	position: relative;
	width: 100%;
	float: left;
	z-index: 3;
}

.hero-role-intro {
	--hero-role-ele-size: clamp(144px, 27.4931vw, 395.9px);
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto clamp(28px, 4vw, 56px);
	padding-top: clamp(48px, 6.25vw, 90px);
	text-align: left;
}

.hero-role-intro::before {
	content: "";
	position: absolute;
	left: clamp(-18px, -1.25vw, 0px);
	top: clamp(8px, 1.8056vw, 26px);
	width: var(--hero-role-ele-size);
	height: var(--hero-role-ele-size);
	background-image: url(../image/ele-topic-banner.webp);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	z-index: -1;
}

.hero-role-kicker {
	margin-left: clamp(52px, 7.6389vw, 110px);
	color: #1f1f1f;
	font-size: clamp(40px, 6.25vw, 120px);
	font-weight: 200;
	line-height: 1.05;
	white-space: nowrap;
}

.hero-role-title {
	margin: clamp(-24px, -1.25vw, -4px) 0 0 clamp(82px, 18.0556vw, 260px);
	color: #EC008C;
	font-size: clamp(50px, 7.2917vw, 140px);
	font-weight: 200;
	line-height: 1.05;
	text-shadow: 0 6px 10px rgba(0, 0, 0, .22);
	white-space: nowrap;
}

.hero-role-subtitle {
	margin: clamp(18px, 1.6667vw, 24px) 0 0 clamp(118px, 26.3889vw, 380px);
	color: #EC008C;
	font-size: clamp(32px, 4.1667vw, 80px);
	font-weight: 200;
	line-height: 1.2;
	white-space: nowrap;
}

.hero-role-desc {
	margin: clamp(8px, 1vw, 14px) 0 0 clamp(118px, 26.3889vw, 380px);
	max-width: 760px;
	color: #EC008C;
	font-size: clamp(24px, 3.125vw, 60px);
	font-weight: 400;
	line-height: 1.28;
	white-space: nowrap;
}

.section-video-frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1461 / 816;
	border-radius: 18px;
	background: #000;
	overflow: hidden;
	box-shadow: 0 14px 32px rgba(68, 50, 35, 0.18);
}

.section-video-thumb {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

.section-video-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.section-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(64px, 8vw, 110px);
	height: clamp(64px, 8vw, 110px);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	transition: transform .25s ease, opacity .25s ease;
}

.section-video-play img {
	width: 100%;
	height: auto;
	display: block;
}

.section-video-thumb:hover .section-video-play {
	opacity: .9;
	transform: translate(-50%, -50%) scale(1.06);
}

.section-video-frame.is-playing .section-video-thumb {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.section-video-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .68);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, background .2s ease, visibility .2s ease;
}

.section-video-frame.is-playing .section-video-close {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

.section-video-close:hover {
	background: rgba(0, 0, 0, .86);
}

.section-video-close::before,
.section-video-close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

.section-video-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.section-video-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.section-video-player {
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
	object-fit: cover;
}

.sec-annual-report {
	background-color: #EFEDE1;
}

.annual-report-panel {
	margin: 0 auto;
}

.annual-report-title {
	margin: 0 0 24px;
	color: #EC008C;
	font-size: clamp(30px, 2.2917vw, 44px);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

.annual-report-row {
	--bs-gutter-x: 14px;
	--bs-gutter-y: 14px;
}

.annual-report-row+.annual-report-row {
	margin-top: 14px;
}

.annual-report-card {
	position: relative;
	width: 100%;
	float: left;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 8px 18px rgba(68, 50, 35, 0.22);
}

.annual-report-card img {
	display: block;
	width: 100%;
	height: auto;
}

.annual-report-card-body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 18px 24px;
	color: #111;
	line-height: 1.25;
	text-align: center;
}

.annual-report-card .h5 {
	font-size: clamp(24px, 1.5625vw, 30px);
}

.annual-report-card .h2 {
	font-size: clamp(40px, 3.125vw, 60px);
}

.annual-report-text,
.annual-report-unit {
	font-size: clamp(13px, 0.8333vw, 16px);
	font-weight: 400;
}

.annual-report-number {
	color: #EC008C;
	font-size: clamp(26px, 1.875vw, 36px);
	font-weight: 500;
	line-height: 1;
}


.logo-sticky {
	position: sticky;
	top: 0;
	padding-top: 100px;
	
}
.bg-main-mobile{
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	z-index: -1;
}
.logo-report{
	max-width: 70px;
	margin: 0 auto;
}
@media (min-width: 1199px) {
	.logo-sticky {
		height: 100vh;
	}
	.bg-main-mobile{
		display: none
	}
	.bg-sidebar {
		background:url(../image/bg-side-bar.webp) no-repeat top center;
		background-size: cover;
	}
	.logo-report{
		max-width: 115px;
	}
}

@media (min-width: 2000px) {
	.container {
		max-width: 80vw;
	}
}

@media (min-width: 768px) {
	.annual-report-col-main {
		flex: 0 0 60.4%;
		max-width: 60.4%;
	}

	.annual-report-col-side {
		flex: 0 0 39.6%;
		max-width: 39.6%;
	}
}

@media (max-width: 1339px) {
	@media (min-width: 767px) {
		.sec-banner-custom picture img {
			height: 750px;
			object-fit: cover;
		}

		.ctn-action {
			position: relative;
			bottom: 0;
			margin-top: 10vw;
		}
	}
}

@media (min-width: 767px) and (max-width: 1899px) {
	.banner-contain .gsb-content .fw.d-md-flex {
		margin-top: 140px !important;
	}
}

@media (max-width: 1199px) {
	body {
		font-size: clamp(14px, 0.8333vw, 16px);
	}

	.btn-primary {
		font-size: clamp(16px, 1.0417vw, 20px);
	}

	.doc-report-title {
		font-size: clamp(14px, 0.9375vw, 18px);
	}

	.circle-group .item-circle-group {
		width: 250px;
		height: 250px;
	}

	.circle-group .item-circle-group h1 {
		font-size: clamp(28px, 1.9792vw, 38px);
	}

	.circle-group .item-circle-group:first-child {
		left: 30px;
	}

	.circle-group .item-circle-group:last-child {
		right: 30px;
	}

	h1,
	.h1 {
		font-size: clamp(30px, 2.0833vw, 40px);
		line-height: 1.2;
	}

	h2,
	.h2 {
		font-size: clamp(28px, 1.875vw, 36px);
		line-height: 1.2;
	}

	h3,
	.h3 {
		font-size: clamp(24px, 1.5625vw, 30px);
		line-height: 1.2;
	}

	h4,
	.h4 {
		font-size: clamp(20px, 1.3542vw, 26px);
		line-height: 1.2;
	}

	h5,
	.h5 {
		font-size: clamp(16px, 1.0417vw, 20px);
		line-height: 1.2;
	}

	h6,
	.h6 {
		font-size: clamp(14px, 0.8333vw, 16px);
		line-height: 1.2;
	}

	h1.oversize {
		font-size: clamp(40px, 2.8646vw, 55px);
	}

	.extra-oversize {
		font-size: clamp(120px, 9.375vw, 180px);
		line-height: 0.8;
	}

	.action-fixed {
		left: 30px;
	}
}

@media (max-width: 1199px) {
	.circle-group .item-circle-group {
		width: 220px;
		height: 220px;
		position: relative;
	}

	.circle-group .item-circle-group h1 {
		font-size: clamp(24px, 1.6667vw, 32px);
	}


}

@media (max-width: 991px) {

	.kv-way-of-work {
		display: none;
	}

	.thumb-circle-group {
		flex-direction: column;
		justify-content: center;
		gap: 40px;
	}

	.thumb-circle-group .thumb-item-circle-group {
		padding: 0 120px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.thumb-circle-group .thumb-item-circle-group:nth-of-type(2) {
		border: 0;
	}

	.thumb-circle-group .thumb-item-circle-group img {
		display: block;
		margin-bottom: 15px;
		width: 50%;
		margin: 0 auto;
		min-width: 146px;
		max-width: 146px;
	}

	.hero-role-intro {
		--hero-role-ele-size: clamp(142px, 42vw, 176px);
		max-width: min(520px, 100%);
		margin-bottom: clamp(24px, 8vw, 40px);
		padding-top: clamp(42px, 12vw, 58px);
		text-align: left;
	}

	.hero-role-intro::before {
		left: clamp(-8px, -2vw, 0px);
		top: clamp(0px, 1.2vw, 6px);
	}

	.hero-role-kicker {
		margin-left: clamp(42px, 13vw, 64px);
		font-size: clamp(40px, 2.0833vw, 40px);
	}

	.hero-role-title {
		margin: clamp(-8px, -1.6vw, -2px) 0 0 clamp(62px, 18vw, 86px);
		font-size: clamp(50px, 2.6042vw, 50px);
	}

	.hero-role-subtitle {
		margin-left: clamp(78px, 22vw, 104px);
		font-size: clamp(32px, 1.6667vw, 32px);
	}

	.hero-role-desc {
		margin-left: clamp(78px, 22vw, 104px);
		max-width: min(360px, calc(100% - clamp(78px, 22vw, 104px)));
		font-size: clamp(24px, 1.25vw, 24px);
		line-height: 1.55;
		white-space: normal;
	}

	.modal-dialog{
		max-width: 96vw;
	}

	.inner-cont.sec-1{
		max-height: 800px;
		padding-top: 80px;
	}

	.inner-cont.sec-1 .sp-fs-1{
		font-size: clamp(50px, 7.2917vw, 140px);
	}
	.inner-cont.sec-1 .sp-fs-1 .txt-small {
    font-size: clamp(24px, 1.875vw, 36px);
	}

	.gsb-header img{
		width: 60px;
	}

	.annual-report-card img {
		height: 100%;
		object-fit: cover;
		min-height: 350px;
	}

	.annual-report-card {
		min-height: 350px;
	}
}

@media (max-width: 768px) {
	body {
		font-size: clamp(14px, 0.8333vw, 16px);
	}

	.btn-primary {
		font-size: clamp(16px, 1.0417vw, 20px);
	}

	.doc-report-title {
		font-size: clamp(14px, 0.9375vw, 18px);
	}

	.circle-group {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.circle-group .item-circle-group {
		width: 400px;
		height: 400px;
	}

	.circle-group .item-circle-group h1 {
		font-size: clamp(24px, 1.6667vw, 32px);
	}

	.circle-group .item-circle-group:first-child {
		left: 0;
	}

	.circle-group .item-circle-group:nth-of-type(2) {
		margin-top: -40px;
	}

	.circle-group .item-circle-group:last-child {
		right: 0;
		margin-top: -40px;
	}


	.ctn-action {
		position: absolute;
		bottom: 0;
	}

	.gsb-hero-banner video {
		width: 100%;
		height: 100%;
		min-height: auto;
		object-fit: cover;
		max-height: 1950px;
		z-index: 0;
	}

	.gsb-hero-banner {
		position: relative;
		background-color: #FCF8F5;
	}

	.gsb-hero-banner::before {
		--hero-video-fade-height: clamp(140px, 28vw, 220px);
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		height: max(var(--hero-video-fade-height), calc(100% - 100vw + var(--hero-video-fade-height)));
		pointer-events: none;
		background: linear-gradient(180deg, rgba(252, 248, 245, 0) 0%, rgba(252, 248, 245, .84) 45%, #FCF8F5 100%);
	}

	.gsb-hero-banner > .inner-cont {
		z-index: 2;
	}

	.hero-role-intro {
		--hero-role-ele-size: clamp(142px, 42vw, 176px);
		max-width: min(520px, 100%);
		margin-bottom: clamp(24px, 8vw, 40px);
		padding-top: clamp(42px, 12vw, 58px);
		text-align: left;
	}

	.hero-role-intro::before {
		left: clamp(-8px, -2vw, 0px);
		top: clamp(0px, 1.2vw, 6px);
	}

	.hero-role-kicker {
		margin-left: clamp(42px, 13vw, 64px);
	}

	.hero-role-title {
		margin: clamp(-8px, -1.6vw, -2px) 0 0 clamp(62px, 18vw, 86px);
	}

	.hero-role-subtitle {
		margin-left: clamp(78px, 22vw, 104px);
	}

	.hero-role-desc {
		margin-left: clamp(78px, 22vw, 104px);
		max-width: min(360px, calc(100% - clamp(78px, 22vw, 104px)));
		line-height: 1.55;
		white-space: normal;
	}

	.fw.sec-banner.sec-banner-custom .pd {
		padding-bottom: 20px;
	}

	.ctn-action {
		position: relative;
		padding: 30px 20px;
		width: 100%;
		float: left;
		display: flex;
		justify-content: center;
		background-color: #1C3E74;
	}

	.group-action-fixed.d-flex.gap-3.w-auto.float-start.align-items-center {
		flex-direction: column;
	}

	.thumb-circle-group .thumb-item-circle-group {
		padding: 0 50px;
	}

	sec-banner-custom .container .gsb-content {
		width: 70%;
	}

	.banner-contain .gsb-content {
		display: flex;
		gap: 15px;
		flex-direction: column;
	}

	.banner-contain .gsb-content h1.extra-oversize {
		font-size: clamp(120px, 8.3333vw, 160px);
	}

	.banner-contain .gsb-content h1 {
		font-size: clamp(20px, 1.4583vw, 28px);
	}

	.banner-contain .ele-topic::after {
		--ele-size: 156px;
		transform: translateY(-90%);
	}

	.banner-contain .ele-topic {
		padding-left: 0;
	}

	.banner-contain .ele-topic .sp-fs-1 {
		font-size: clamp(80px, 8.3333vw, 160px);
	}

	.banner-contain .gsb-content .txt-award .sp-fs-1 {
		font-size: clamp(42px, 2.5vw, 48px);
	}

	.banner-contain .gsb-content .txt-award .h1 {
		font-size: clamp(18px, 1.25vw, 24px);
	}

	.btn-abs-award {
		position: absolute;
		bottom: 0;
		left: var(--bs-gutter-x, .75rem);
		width: calc(100% - var(--bs-gutter-x, .75rem) * 2);
	}

	.btn-abs-award a {
		width: 100%;
	}


	.thumb-kv h5,.thumb-kv .h5 {
        font-size: clamp(24px, 1.25vw, 24px) !important;
	}
	.thumb-kv .thumb-text.h6 {
		font-size: clamp(20px, 1.0417vw, 20px) !important;
	}

	
}

@media (max-width: 576px) {
	.max-w-mobile-70 {
		max-width: 70px;
	}

	.hero-role-intro {
		--hero-role-ele-size: 125px;
		padding-top: clamp(36px, 10vw, 42px);
	}

	.hero-role-intro::before {
		left: 0;
		top: clamp(2px, 1.2vw, 6px);
	}

	.hero-role-kicker {
		margin-left: clamp(28px, 10vw, 42px);
	}

	.hero-role-title {
		margin: clamp(-6px, -1vw, -2px) 0 0 clamp(44px, 14vw, 62px);
	}

	.hero-role-subtitle,
	.hero-role-desc {
		margin-left: clamp(58px, 17vw, 78px);
	}

	.hero-role-desc {
		max-width: min(360px, calc(100% - clamp(58px, 17vw, 78px)));
	}

	body {
		font-size: clamp(14px, 0.8333vw, 16px);
	}

	.btn-primary {
		font-size: clamp(16px, 1.0417vw, 20px);
	}

	.doc-report-title {
		font-size: clamp(14px, 0.9375vw, 18px);
	}

	.fs-gs-dp-1 {
		font-size: clamp(28px, 1.6667vw, 32px);
		line-height: 1.2;
	}

	h1,
	.h1 {
		font-size: clamp(30px, 1.875vw, 36px);
		line-height: 1.3;
	}

	h2,
	.h2 {
		font-size: clamp(26px, 1.5625vw, 30px);
		line-height: 1.3;
	}

	h3,
	.h3 {
		font-size: clamp(22px, 1.3542vw, 26px);
		line-height: 1.3;
	}

	h4,
	.h4 {
		font-size: clamp(18px, 1.0417vw, 20px);
		line-height: 1.3;
	}

	h5,
	.h5 {
		font-size: clamp(16px, 0.9375vw, 18px);
		line-height: 1.3;
	}

	h6,
	.h6 {
		font-size: clamp(14px, 0.8333vw, 16px);
		line-height: 1.3;
	}

	h1.oversize {
		font-size: clamp(42px, 2.8646vw, 55px);
	}

	.extra-oversize {
		font-size: clamp(96px, 6.25vw, 120px);
		line-height: 0.8;
	}

	.circle-group .item-circle-group h1 {
		font-size: clamp(28px, 1.6667vw, 32px);
	}

	.action-fixed {
		display: none;
	}

	.banner-contain .gsb-content h1.extra-oversize {
		font-size: clamp(120px, 8.8542vw, 170px);
	}

	.banner-contain .gsb-content h1 {
		font-size: clamp(20px, 1.25vw, 24px);
	}



	.list-read-report .gsb-content h2 {
		font-size: clamp(16px, 0.9375vw, 18px);
	}

	.pd-100 {
		padding: 60px 0;
	}

	.tab-toolbar {
		height: 250px;
	}

	.scrolldown-box {
		bottom: 10px;
	}

	.scrolldown-box span {
		width: 10px;
		height: 10px;
		margin: -5px
	}

	.thumb-circle-group .thumb-item-circle-group h4 br {
		display: none;
	}

	.ele-topic {
		padding-left: 50px;
	}

	.ele-topic::after {
		--ele-size: 130px;
		left: 0;
		top: 50%;
		transform: translateY(-60%);
	}

	.annual-report-card img {
		height: 100%;
		object-fit: cover;
		min-height: 350px;
	}

	.annual-report-card {
		min-height: 350px;
	}

	.section-video-frame {
		border-radius: 10px;
	}

	.custom-space-mobile{
		margin-top: 40vw !important;
	}
}

@media (max-width: 415px) {
	body {
		font-size: clamp(14px, 0.8333vw, 16px);
	}

	.btn-primary {
		font-size: clamp(16px, 1.0417vw, 20px);
	}

	.doc-report-title {
		font-size: clamp(14px, 0.9375vw, 18px);
	}

	.fs-gs-dp-1 {
		font-size: clamp(28px, 1.6667vw, 32px);
		line-height: 1.2;
	}

	h1,
	.h1 {
		font-size: clamp(30px, 1.875vw, 36px);
		line-height: 1.3;
	}

	h2,
	.h2 {
		font-size: clamp(26px, 1.5625vw, 30px);
		line-height: 1.3;
	}

	h3,
	.h3 {
		font-size: clamp(22px, 1.3542vw, 26px);
		line-height: 1.3;
	}

	h4,
	.h4 {
		font-size: clamp(18px, 1.0417vw, 20px);
		line-height: 1.3;
	}

	h5,
	.h5 {
		font-size: clamp(16px, 0.9375vw, 18px);
		line-height: 1.3;
	}

	h6,
	.h6 {
		font-size: clamp(14px, 0.8333vw, 16px);
		line-height: 1.3;
	}

	h1.oversize {
		font-size: clamp(42px, 2.8646vw, 55px);
	}

	.extra-oversize {
		font-size: clamp(96px, 6.25vw, 120px);
		line-height: 0.8;
	}

	.circle-group .item-circle-group {
		width: 90vw;
		height: 90vw;
	}

	.circle-group .item-circle-group h1 {
		font-size: clamp(28px, 1.6667vw, 32px);
	}

	.banner-contain .gsb-content h1.extra-oversize {
		font-size: clamp(110px, 6.7708vw, 130px);
	}

	.banner-contain .gsb-content h1 {
		font-size: clamp(18px, 1.0417vw, 20px);
	}

	.box-quote {
		gap: 30px;
	}
	.thumb-kv .thumb-body .number{
		font-size: clamp(48px, 2.5vw, 48px);
	}
	

}

@media (max-width: 390px) {
	.hero-role-intro {
		padding-top: clamp(32px, 9vw, 36px);
	}

	.hero-role-kicker {
		margin-left: clamp(18px, 8vw, 31px);
		font-size: clamp(34px, 1.9792vw, 38px);
	}

	.hero-role-title {
		margin: clamp(-4px, -0.8vw, -2px) 0 0 clamp(20px, 9vw, 35px);
		font-size: clamp(34px, 2.2917vw, 44px);
	}

	.hero-role-subtitle,
	.hero-role-desc {
		margin-left: clamp(36px, 14vw, 54px);
	}

	.hero-role-subtitle {
		font-size: clamp(28px, 1.6146vw, 31px);
	}

	.hero-role-desc {
		max-width: min(320px, calc(100% - clamp(36px, 14vw, 54px)));
		font-size: clamp(20px, 1.1458vw, 22px);
		line-height: 1.48;
	}
}