/* Variable */
:root{
	--blue 			: #004B6C;
	--black			: #000000;
	--gray1			: #666666;
	--gray2			: #AAAAAA;
	--gray3			: #DDDDDD;
	--gray4			: #E9E9E9;
	--gray5			: #DCDEDE;
	--white			: #FFFFFF;
	--white2		: #F2F2F2;
	--col-gap 	: 2.5rem; 		/* 40px */
	--row-gap 	: 6.25rem; 		/* 100px */
}
/* Variable END */


/* Display */
.dp_ib{display: inline-block;}
.dp_b{display: block;}
.dp_if{display: inline-flex;}
.dp_f{display: flex;}
.dp_fx{display: fixed;}
.dp_st{display: sticky;}
/* Display END */


/* Flex */
.fd_col{flex-direction: column;}
.fd_col.reverse{flex-direction: column-reverse;}
.fd_row{flex-direction: row;}
.fd_row.reverse{flex-direction: row-reverse;}
/* Flex END */


/* Layout */
.row{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--row-gap) var(--col-gap);
}
.row.reverse{
	flex-direction: row-reverse;
}
.col12{
	flex: 1;
	max-width: 100%;
}
.col6{
	flex: 0 0 calc(50% - var(--col-gap) / 2);
	max-width: calc(50% - var(--col-gap) / 2);
}
.col4{
	flex: 0 0 calc(33.333333% - 80px / 3);
	max-width: calc(33.333333% - 80px / 3);
}
.col3{
	flex: 0 0 calc(25% - 30px);
	max-width: 0 0 calc(25% - 30px);
}
/* Layout END */


/* A11Y */
#skipNav{
	position: absolute;
	left: 0;
	top: -1000px;
	width: 100%;
	height: 0px;
	z-index: 100000;
	line-height: 0px;
	font-size: 0px;
}
#skipNav a{
	display: block;
	text-align: center;
	width: 100%;
	line-height: 0px;
	font-size: 0px;
}
#skipNav a:focus, 
#skipNav a:hover, 
#skipNav a:active{
	position: absolute;
	left: 0px;
	top: 1000px;
	padding: 8px 0;
	display: block;
	height: 30px;
	background: #20262c;
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
	color: #fff;
}
.hidden {
	position: absolute;
	z-index: -1;
	display: inline-block;
	overflow: hidden;
	height: 0;
	width: 0;
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	word-break: initial;
	word-wrap: initial;
}
.a11y-hidden {
  overflow: hidden;
  position: absolute;
  clip:     rect(0 0 0 0); /* IE 6,7 */
  clip:     rect(0,0,0,0);
  width:    1px;
  height:   1px;
  margin:   -1px;
  border:   0;
  padding:  0;
}
caption.a11y-hidden {
  position: static;
}
.a11y-hidden.focusable:focus {
  overflow: visible;
  position: static;
  clip:     auto;
  width:    auto;
  height:   auto;
  margin:   0;
}
/* A11Y END*/


/* FONT */
h1,.h1{font-size: 6.25rem; font-weight: 700;} /* 100px */
h2,.h2{font-size: 5rem; font-weight: 700;} /* 80px */
h3,.h3{font-size: 3.75rem; font-weight: 600; line-height: 1.25;} /* 60px */
h4,.h4{font-size: 3.25rem; font-weight: 600; line-height: 1.2308; letter-spacing: -0.04em;} /* 52px */
h5,.h5{font-size: 2.25rem; font-weight: 600; line-height: 1.75;} /* 36px */
h6,.h6{font-size: 1.75rem; font-weight: 600;} /* 28px */
.p1{font-size: 1.5rem; line-height: 1.6;} /* 24px */
.p2{font-size: 1.25rem; line-height: 1.6;} /* 20px */
.p3{font-size: 18px; line-height: 1.36111111;}
.p4{font-size: 16px;}

.fw_bold{font-weight: 700;} /* bold */
.fw_semibold{font-weight: 600;} /* semi bold */
.fw_medium{font-weight: 500;} /* medium */
.fw_regular{font-weight: 400;} /* regular */
.fw_light{font-weight: 300;} /* light */

.fc_blue{color: var(--blue) !important;}
.fc_black{color: var(--black) !important;}
.fc_gray1{color: var(--gray1) !important;}
.fc_gray2{color: var(--gray2) !important;}
.fc_gray3{color: var(--gray3) !important;}
.fc_gray4{color: var(--gray4) !important;}
.fc_gray5{color: var(--gray5) !important;}
.fc_white{color: var(--white) !important;}

.ta_center{text-align: center;}
.ta_left{text-align: left;}
.ta_right{text-align: right;}
/* FONT END */


/* Interval */
.mx_auto{margin: 0 auto;}

.mb_300{margin-bottom: 18.75rem !important;} 	/* 300px */

.mt_400{margin-top: 25rem !important;}		 		/* 400px */
.mt_300{margin-top: 18.75rem !important;}		 	/* 300px */
.mt_240{margin-top: 15rem !important;} 			/* 240px */
.mt_200{margin-top: 12.5rem !important;} 			/* 200px */
.mt_160{margin-top: 10rem !important;} 				/* 160px */
.mt_120{margin-top: 7.5rem !important;} 			/* 120px */
.mt_100{margin-top: 6.25rem !important;} 			/* 100px */
.mt_80{margin-top: 5rem !important;} 					/* 80px */
.mt_70{margin-top: 4.375rem !important;} 			/* 70px */
.mt_60{margin-top: 3.75rem !important;} 			/* 60px */
.mt_50{margin-top: 3.125rem !important;} 			/* 50px */
.mt_40{margin-top: 2.5rem !important;} 				/* 40px */
.mt_30{margin-top: 1.875rem !important;} 			/* 30px */
.mt_20{margin-top: 1.25rem !important;} 			/* 20px */
.mt_1r{margin-top: 1rem !important;}					/* base px -> 16px */

.pl_40{padding-left: 2.5rem !important;} 			/* 40px */
.pr_40{padding-right: 2.5rem !important;} 		/* 40px */
.pb_40{padding-bottom: 2.5rem !important}			/* 40px */
/* Interval END */


/* Responsive */
.m_show{display: none !important;}
.m_hide{display: block !important;}
/* Responsive END */

@media all and (max-width:768px){
	.m_show{display: block !important;}
	.m_hide{display: none !important;}
}


/* Scrollbar Custom */
.scrollbar_custom::-webkit-scrollbar {width: 18px;}
.scrollbar_custom::-webkit-scrollbar-track {border-radius: 10px;}
.scrollbar_custom::-webkit-scrollbar-thumb {background-color: var(--c-b1); border-radius: 10px; border: 6px solid var(--c-w4); }
/* Scrollbar Custom END*/


/* Scroll Lock */
.scrollLock {
	overflow: hidden !important;
	touch-action: none;
}
/* Scroll Lock END */


/* Animation */
/* 	Fade animation */
.anim.fade{
	transform: translateY(20%);
	opacity: 0;
	transition: opacity 0.5s ease,
							transform 0.5s ease;
}
.anim.fade.show{
	transform: translateY(0);
	opacity: 1;
}
/* 	Fade animation END */

/* Animation END */




/* responsive 1024px */
@media all and (max-width: 1024px){
	.mt_300{margin-top: 16.667rem !important;}
	.mt_120{margin-top: 5rem !important;}
}
/* responsive 1024px END */



/* responsive 768px */
@media all and (max-width: 768px){
	.mt_400{margin-top: 200px !important;}
	.mt_300{margin-top: 200px !important;}
	.mt_240{margin-top: 60px !important;}
	.mt_120{margin-top: 60px !important;}
	.mt_80{margin-top: 32px !important;}
	.mt_60{margin-top: 32px !important;}
	.mt_50{margin-top: 32px !important;}
	.mt_40{margin-top: 32px !important;}
	.mt_30{margin-top: 20px !important;}

	h1, .h1{font-size: 60px; line-height: 68px;}
	h3, .h3{font-size: 24px; line-height: 36px;}
	h4, .h4{font-size: 20px; line-height: 32px;}
	h5, .h5{font-size: 20px; line-height: 32px;}
	h6, .h6{font-size: 16px; line-height: 24px;}
	.p1{font-size: 14px;}
	.p2{font-size: 14px;}
	.p4{font-size: 10px;}

	.row.col_md{
		flex-direction: column;
	}
	.md_col12{
		flex: 1;
		max-width: 100%;
	}


	/* px to vw */
	.mt_400{margin-top: 55.5556vw !important;}
	.mt_300{margin-top: 55.5556vw !important;}
	.mt_240{margin-top: 16.6667vw !important;}
	.mt_120{margin-top: 16.6667vw !important;}
	.mt_80{margin-top: 8.8889vw !important;}
	.mt_60{margin-top: 8.8889vw !important;}
	.mt_50{margin-top: 8.8889vw !important;}
	.mt_40{margin-top: 8.8889vw !important;}
	.mt_30{margin-top: 5.5556vw !important;}

	h1, .h1{font-size: 16.6667vw; line-height: 18.8889vw;}
	h3, .h3{font-size: 6.6667vw; line-height: 10.0000vw;}
	h4, .h4{font-size: 5.5556vw; line-height: 8.8889vw;}
	h5, .h5{font-size: 5.5556vw; line-height: 8.8889vw;}
	h6, .h6{font-size: 4.4444vw; line-height: 6.6667vw;}
	.p1{font-size: 3.8889vw;}
	.p2{font-size: 3.8889vw;}
	.p4{font-size: 2.7778vw;}

	.row.col_md{
		flex-direction: column;
	}
	.md_col12{
		flex: 1;
		max-width: 100%;
	}
}
/* responsive 768px END */