@charset "utf-8";
.pcbr{display:none;}
.ptbr{display:block;}
.tbbr{display:block;}
.mbbr{display:none;}
.dn{display:none;}

/* paging */
.paging{
margin-top:80px;
text-align:center;
}
.paging a{
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 52px;
height: 52px;
color: var(--color-B3);
font-size: var(--fz-20);
line-height: 50px;
border: 1px solid var(  --color-E6);
border-radius: 50%;
}
.paging strong{
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--main-colorB);
color: #fff;
font-size: var(--fz-20);
line-height: 50px;
font-weight: 400;
}
.paging .page_begin{
width:52px;height:52px;
background:url(/images/page/icon/page_begin.png) no-repeat center;
border:0;
}
.paging .page_prev{
width:52px;height:52px;
background:url(/images/page/icon/page_prev.png) no-repeat center;
border:0;margin-right:20px;
}
.paging .page_next{
width:52px;height:52px;
background:url(/images/page/icon/page_next.png) no-repeat center;
border:0;margin-left:20px;
}
.paging .page_end{
width:52px;height:52px;
background:url(/images/page/icon/page_end.png) no-repeat center;
border:0;
}

/* common */
header .pcHeader{
	background: var(--color-00);
}
/* header .headerInnerWrap .headerLogo a svg path:not(.red) {
  fill: var(--main-colorB);
} */
header .headerInnerWrap .headerGnb .headerGnbList .headerGnbItem button.languageBtn {
  background: url(/images/common/icon_language_w.png) no-repeat center;
}
header .headerInnerWrap .headerGnb .headerGnbList .allMenuItem .allMenuBtn .icon .iconLine {
	background: var(--color-FAFAFA);
}
/* header nav */
header .headerNav {
  height: 100%;
}
@media screen and (max-width: 900px) {
	header .headerNav {
		display: none;
	}
}
header .headerNav .navList {
  display: flex;
  align-items: center;
  height: 100%;
}
header .headerNav .navList .nav1DepthItem {
	height: 100%;
	flex-shrink: 0;
}
header .headerNav .navList .nav1DepthItem > a {
  font-size: var(--fz-20);
  color: var(--color-FAFAFA);
  padding: 0 var(--m40);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
	transition: color .3s;
	width: fit-content;
}
header .headerNav .navList .nav1DepthItem > a:hover,
header .headerNav .navList .nav1DepthItem.active > a {
	color: var(--color-primary);
}
header .headerNav .navList .nav1DepthItem .nav2DepthListWrap {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 0;
	overflow: hidden;
	background-color: var(--color-primary);
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s, height .3s;
}
header .headerNav .navList .nav1DepthItem .nav2DepthList {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
}
/* 코아시아·비즈니스: 2depth를 1depth 링크 아래부터 배치 */
header .headerNav .navList .nav1DepthItem.isNav2Under .nav2DepthList {
	justify-content: flex-start;
	padding-left: var(--nav2-under-left, 0px);
}
header .headerNav .navList .nav1DepthItem .nav2DepthListWrap.active {
	opacity: 1;
	height: 70px;
	overflow: hidden;
	pointer-events: auto;
	transition: height 0.3s ease, opacity 0.3s ease 0.2s;
}
header .headerNav .navList .nav1DepthItem .nav2DepthListWrap.active:has(.nav2DepthItem.hasNav3Depth:hover),
header .headerNav .navList .nav1DepthItem .nav2DepthListWrap.active:has(.nav2DepthItem.hasNav3Depth:focus-within),
header .headerNav .navList .nav1DepthItem .nav2DepthListWrap.active:has(.nav2DepthItem.hasNav3Depth .nav3DepthList:hover) {
	overflow: visible;
}
header .headerNav .navList .nav2DepthList .nav2DepthItem {
	height: 70px;
}
header .headerNav .navList .nav2DepthList .nav2DepthItem a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	font-size: var(--fz-18);
	color: var(--color-FF);
	padding: 0 var(--m40);
	position: relative;
	z-index: 1;
}
header .headerNav .navList .nav2DepthList .nav2DepthItemBg {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: calc(100% - 16px);
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 30px;
	pointer-events: none;
	transition: left 0.5s ease, width 0.5s ease;
}
header .headerNav .navList .nav2DepthList .nav2DepthItemBg::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(
135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1));
	background-size: 200% 100%;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 0;
}
header .headerNav .navList .nav2DepthList .nav2DepthItem.hasNav3Depth {
	position: relative;
}
header .headerNav .navList .nav2DepthList .nav2DepthItem.hasNav3Depth::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 16px;
}
header .headerNav .navList .nav2DepthList .nav2DepthItem .nav3DepthList {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	padding-top: 16px;
	background-color: transparent;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 2;
}
header .headerNav .navList .nav2DepthList .nav2DepthItem.hasNav3Depth:hover .nav3DepthList,
header .headerNav .navList .nav2DepthList .nav2DepthItem.hasNav3Depth:focus-within .nav3DepthList,
header .headerNav .navList .nav2DepthList .nav2DepthItem.hasNav3Depth:has(.nav3DepthList:hover) .nav3DepthList {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
header .headerNav .navList .nav2DepthList .nav2DepthItem .nav3DepthListInner {
	display: flex;
	flex-direction: column;
	background-color: var(--color-primary);
}
header .headerNav .navList .nav2DepthList .nav2DepthItem .nav3DepthItem a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 0px;
	font-size: var(--fz-16);
	font-weight: 500;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	white-space: normal;
	word-break: keep-all;
	transition: background-color 0.3s ease, color 0.3s ease;
}
header .headerNav .navList .nav2DepthList .nav2DepthItem .nav3DepthItem.active a {
	background-color: var(--color-primary-dark);
	color: var(--color-FF);
}
header .headerNav .navList .nav2DepthList .nav2DepthItem .nav3DepthItem a:hover {
	background-color: var(--color-primary-dark);
	color: var(--color-FF);
}
/* scroll */
header {
	transition: all .3s;
}
header .headerNav .navList .nav2DepthListWrap{
	transition: opacity .7s;
}
#header.scroll header{
	transform: translateY(-100%);
}
#header.scroll.subMenuOn header {
	transform: translateY(0%);
}
#header.scroll header .headerNav .navList .nav1DepthItem.active .nav2DepthListWrap{
	height: 70px;
	overflow: hidden;
	pointer-events: auto;
	opacity: 1;
}
#header.scroll.subMenuOn header .headerNav .navList .nav1DepthItem .nav2DepthListWrap.active {
	height: 70px;
	overflow: hidden;
	pointer-events: auto;
	opacity: 1;
}
#header.scroll.subMenuOn header .headerNav .navList:has(.nav2DepthListWrap.active) .nav1DepthItem.active .nav2DepthListWrap:not(.active) {
	height: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
}
#header.scroll header .headerNav .navList .nav1DepthItem.active .nav2DepthListWrap:has(.nav2DepthItem.hasNav3Depth:hover),
#header.scroll header .headerNav .navList .nav1DepthItem.active .nav2DepthListWrap:has(.nav2DepthItem.hasNav3Depth:focus-within),
#header.scroll header .headerNav .navList .nav1DepthItem.active .nav2DepthListWrap:has(.nav2DepthItem.hasNav3Depth .nav3DepthList:hover),
#header.scroll.subMenuOn header .headerNav .navList .nav1DepthItem .nav2DepthListWrap.active:has(.nav2DepthItem.hasNav3Depth:hover),
#header.scroll.subMenuOn header .headerNav .navList .nav1DepthItem .nav2DepthListWrap.active:has(.nav2DepthItem.hasNav3Depth:focus-within),
#header.scroll.subMenuOn header .headerNav .navList .nav1DepthItem .nav2DepthListWrap.active:has(.nav2DepthItem.hasNav3Depth .nav3DepthList:hover) {
	overflow: visible;
}

/* pageTop */
.pageTop {
	width: 100%;
	padding: var(--m160) 0 var(--m200);
	position: relative;
	margin-top: 90px;
	overflow: hidden;
}
.pageTop.pn10,
.pageTop.pn30 {
	background-color: var(--color-F0F1F4);
}
.pageTop.pn21,
.pageTop.pn42 {
	display: none;
}
.pageTop .pageTopInnerWrap {
	height: 100%;
}
/* .pageTop .pageTopBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
} */
/* .pageTop.pn11 .pageTopBg {
	background: url(/images/page/subTop/subTop_11.png) no-repeat center / cover;
}
.pageTop.pn12 .pageTopBg {
	background: url(/images/page/subTop/subTop_12.png) no-repeat center / cover;
}
.pageTop.pn13 .pageTopBg {
	background: url(/images/page/subTop/subTop_13.png) no-repeat center / cover;
}
.pageTop.pn14 .pageTopBg {
	background: url(/images/page/subTop/subTop_14.png) no-repeat center / cover;
}
.pageTop.pn15 .pageTopBg {
	background: url(/images/page/subTop/subTop_15.png) no-repeat center / cover;
}
.pageTop.pn21 .pageTopBg {
	background: url(/images/page/subTop/subTop_21.png) no-repeat center / cover;
}
.pageTop.pn31 .pageTopBg {
	background: url(/images/page/subTop/subTop_31.png) no-repeat center / cover;
}
.pageTop.pn32 .pageTopBg {
	background: url(/images/page/subTop/subTop_32.png) no-repeat center / cover;
}
.pageTop.pn33 .pageTopBg {
	background: url(/images/page/subTop/subTop_32.png) no-repeat center / cover;
}
.pageTop.pn40 .pageTopBg {
	background: url(/images/page/subTop/subTop_40.png) no-repeat center / cover;
}
.pageTop.pn50 .pageTopBg {
	background: url(/images/page/subTop/subTop_50.png) no-repeat center / cover;
} */
.pageTop .pageTopTitleArea {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 100%;
}
.pageTop .pageTopTitleArea .pageTopTitle {
	font-size: var(--fz-50);
	font-weight: 700;
	color: var(--color-00);
	font-weight: 500;
}
.pageTop:has(~ .bbsView),
.pageTopDescriptionArea:has(~ .bbsView) {
	display: none;
}
/* .pageTop .pageTopTitleArea .pageTopDescription {
	margin-top: var(--m60);
	font-size: var(--fz-40);
	color: var(--color-FF);
	font-weight: 700;
}
.pageTop.ani .pageTopBg {
	transform: scale(1.1);
	transition: transform 0.6s ease;
}
.pageTop.inView .pageTopBg {
	transform: scale(1);
} */
.pageTop.ani .pageTopTitle,
.pageTop.ani .pageTopDescription {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.pageTop.ani .pageTopTitle { --delay: 0; }
.pageTop.ani .pageTopDescription { --delay: 0.5; }
.pageTop.inView .pageTopTitle,
.pageTop.inView .pageTopDescription {
	opacity: 1;
	transform: translateY(0);
}

/* 3depth Nav */
.pageTop.pn40 + .subTop3depthNav {
	display: none;
}
.subTop3depthNav {
	position: fixed;
	top: 50%;
	margin-left: 2vw;
	transform: translateY(-50%);
	z-index: 100;
	width: max-content;
}
.subTop3depthNav .subTop3depthNavItem {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.subTop3depthNav .subTop3depthNavItem a{
	color: var(--color-66);
	font-size: var(--fz-16);
	font-weight: 500;
	transition: all 0.3s ease;
	position: relative;
	padding: 8px 0 8px 20px;
}
.subTop3depthNav .subTop3depthNavItem a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background-color: var(--main-colorB-op10);
	border-radius: 50%;
}
.subTop3depthNav .subTop3depthNavItem.active a::before {
	background-color: var(--main-colorB);
}
.subTop3depthNav .subTop3depthNavItemTitle{
	color: var(--color-66);
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s ease;
}
.subTop3depthNav .subTop3depthNavItem:hover a .subTop3depthNavItemTitle,
.subTop3depthNav .subTop3depthNavItem.active a .subTop3depthNavItemTitle {
	opacity: 1;
	visibility: visible;
}

/* section */
section:first-of-type {
	padding-top: var(--m160);
}
section:last-of-type {
	padding-bottom: var(--m240);
}

/* bg */
.m10,
.m20,
.m30 {
	background-color: var(--color-F0F1F4);
}


/* btn */
.linkBox {}
.linkBox .linkBtn{
	font-size: var(--fz-20);
	color: var(--color-FF);
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--m80);
	background-color: var(--main-colorB);
	padding: 17px var(--m80);
	border-radius: 30px;
	width: fit-content;
	margin: 0 auto;
}
.linkBox .linkBtn .icon{
	display: inline-block;
	position: relative;
	width: 18px;
	height: 15px;
	border-top: 2px solid var(--color-FF);
	border-bottom: 2px solid var(--color-FF);
	margin: 2px;
}
.linkBox .linkBtn .icon::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 2px;
	background-color: var(--color-FF);
}
.linkBox .moreBtn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 20px 35px;
	border-radius: 1000px;
	font-size: var(--fz-12);
	font-weight: 500;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	color: var(--color-FF);
	background-color: rgba(225, 225, 225, 0.25);
}
.linkBox .moreBtn .icon {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	position: relative;
}
.linkBox .moreBtn .icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 110%;
	height: 2px;
	background-color: currentColor;
}
.linkBox .moreBtn.mainB {
	background-color: var(--main-colorB);
	border-color: transparent;
	color: var(--color-FF);
}
.linkBox .moreBtn.mainWhiteBd {
	background-color: transparent;
	color: var(--color-FF);
}
.gradientBtn{
	position: relative;
	z-index: 1;
}
.gradientBtn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(45deg, var(--main-colorB), var(--main-colorB-op90), var(--color-primary),var(--color-primary), var(--main-colorB-op90), var(--main-colorB));
	background-size: 600% 100%;
	opacity: 0;
	transition: opacity 0.3s;
	border-radius: 100px;
	z-index: -1;
}
.gradientBtn:hover {
	animation: slideBG 3s linear infinite;
	background-color: transparent;
}
.gradientBtn:hover::before {
	animation: slideBG 3s linear infinite;
	opacity: 1;
}
@keyframes slideBG {
  0% { background-position: 0% 0%; }
100% { background-position: 100% 0%; }
}

/* tabArea */
.tabArea {
	text-align: center;
	scroll-margin-top: 160px;
}
.tabArea .tabList {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border-radius: 100px;
	background-color: var(--main-colorB-op10);
}
.tabArea .tabList .tabItem a,
.tabArea .tabList .tabItem button,
.tabArea .tabList .tabItem label {
	transition: all .3s;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 var(--m40);
	border: 0;
	border-radius: 100px;
	background: transparent;
	font-family: inherit;
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--color-66);
	cursor: pointer;
}
.tabArea .tabList .tabItem.active a,
.tabArea .tabList .tabItem.active button,
.tabArea .tabList .tabItem.active label {
	background-color: var(--main-colorB);
	color: var(--color-FF);
}

/* bbs 공통 */
.bbs .formArea {
	display: flex;
	align-items: center;
	gap: 24px;
}
.bbs .filterArea .customSelectBox {
	position: relative;
	width: 240px;
}
.bbs .filterArea .customSelectBox .dropdownSelect {
	position: relative;
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--color-B3);
	background-color: transparent;
	font-size: var(--fz-20);
	color: var(--color-66);
	padding: 20px 32px 20px 8px;
	text-align: left;
	cursor: pointer;
}
.bbs .filterArea .customSelectBox .dropdownSelect::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 4px;
	width: 20px;
	height: 20px;
	background: url(/images/page/icon/icon_arr_down.png) no-repeat center / contain;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}
.bbs .filterArea .customSelectBox.active .dropdownSelect::after {
	transform: translateY(-50%) rotate(180deg);
}
.bbs .filterArea .customSelectBox .dropdownList {
	display: none;
	position: absolute;
	top: calc(100% + 20px);
	left: 0;
	z-index: 20;
	width: 100%;
	max-height: 280px;
	overflow-y: auto;
	background-color: var(--color-FF);
	border: 1px solid var(--color-B3);
}
.bbs .filterArea .customSelectBox.active .dropdownList {
	display: block;
}
.bbs .filterArea .customSelectBox .dropdownList .dropdownItem a {
	display: block;
	font-size: var(--fz-20);
	color: var(--color-66);
	padding: 16px 8px;
	text-align: left;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.bbs .filterArea .customSelectBox .dropdownList .dropdownItem.active a,
.bbs .filterArea .customSelectBox .dropdownList .dropdownItem a:hover {
	color: var(--color-00);
	background-color: var(--color-F0F1F4);
}
.bbs .searchForm .searchArea .inputBox,
.bbs .searchArea .searchForm .inputBox {
	display: flex;
	align-items: center;
	flex: 1;
	max-width: 372px;
	border-bottom: 1px solid var(--color-B3);
}
.bbs .searchForm .searchArea .inputBox input,
.bbs .searchArea .searchForm .inputBox input {
	flex: 1;
	width: 100%;
	padding: 20px 1vw;
	border: 0;
	background: transparent;
	font-size: var(--fz-20);
	color: var(--color-66);
}
.bbs .searchForm .searchArea .inputBox input::placeholder,
.bbs .searchArea .searchForm .inputBox input::placeholder {
	color: var(--color-66);
}
.bbs .searchForm .searchArea .inputBox button,
.bbs .searchArea .searchForm .inputBox button {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: 0;
	background: url(/images/page/icon/icon_search.png) no-repeat center / 18px;
	font-size: 0;
	cursor: pointer;
}


/* bbsTable m52 공시정보 */
.bbsTable .bbsTableArea {
	margin-top: var(--m40);
}
.bbsTable .bbsTableArea .tableType1 {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.bbsTable .bbsTableArea .tableType1 thead th {
	padding: 20px 1vw;
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--color-30);
	text-align: center;
	border-top: 1px solid var(--color-33);
	border-bottom: 1px solid var(--color-33);
}
.bbsTable .bbsTableArea .tableType1 tbody td {
	padding: 0 1vw;
	font-size: var(--fz-18);
	color: var(--color-4D);
	text-align: center;
	border-bottom: 1px solid var(--color-CC);
}
.bbsTable .bbsTableArea .tableType1 tbody tr:nth-child(even) {
	background-color: var(--color-FAFAFA);
}
.bbsTable .bbsTableArea .tableType1 tbody td.bbsTitle a{
	padding: 20px 1vw;
	font-weight: 500;
	color: var(--color-33);
	text-align: left;
	font-size: var(--fz-18);
	display: block;
	width: 100%;
	height: 100%;
}
.bbsTable .bbsTableArea .tableType1 tbody td.bbsFile a {
	display: flex;
	align-items: center;
	justify-content: center;
}
.bbsTable .bbsTableArea .tableType1 tbody td.bbsFile .icon{
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(/images/page/icon/icon_file.png) no-repeat center / 19px;
}
.bbsTable .pagingArea {
	margin-top: var(--m160);
}

/* bbs view */
.bbsView {
	padding-top: var(--m200);
	margin-top: 90px;
}
.bbsView .viewHeader {
	padding-bottom: var(--m80);
	border-bottom: 1px solid var(--color-B3);
}
.bbsView .viewHeader .viewCategory {
	font-size: var(--fz-24);
	color: var(--main-colorB);
	font-weight: 500;
}
.bbsView .viewHeader .viewTitle {
	margin-top: var(--m40);
	color: var(--color-0D);
	font-size: var(--fz-50);
	font-weight: 500;
}
.bbsView .viewHeader .viewDate {
	margin-top: 24px;
}
.bbsView .viewHeader .viewDate .viewDateLable {
	position: relative;
	color: var(--color-4D);
	font-size: var(--fz-20);
	padding-right: 24px;
	margin-right: 24px;
}
.bbsView .viewHeader .viewDate .viewDateLable::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background-color: var(--color-B3);
}
.bbsView .viewHeader .viewDate .viewDateValue {
	color: var(--color-4D);
	font-size: var(--fz-20);
}
.bbsView .viewBody {
	padding: var(--m80) 0;
	border-bottom: 1px solid var(--color-B3);
}
.bbsView .viewBody .viewContent {
}
.bbsView .viewBody .viewFileList {
	padding-top: var(--m80);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bbsView .viewBody .viewFileList .viewFileItem {
	background-color: var(--color-FAFAFA);
	padding: 24px var(--m40);
	display: flex;
	align-items: center;
}
.bbsView .viewBody .viewFileList .viewFileItem .viewFileLabel {
	color: var(--color-4D);
	font-size: var(--fz-20);
	background: url(/images/page/icon/icon_file_b.png) no-repeat left center / 20px;
	padding-left: 40px;
}
.bbsView .viewBody .viewFileList .viewFileItem a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 30px;
	margin-left: 30px;
	gap: 10px;
	color: var(--color-4D);
	font-size: var(--fz-20);
	position: relative;
}
.bbsView .viewBody .viewFileList .viewFileItem a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 80%;
	background-color: var(--color-B3);
}
.bbsView .viewBody .viewFileList .viewFileItem .viewFileName {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
}
.bbsView .viewBody .viewFileList .viewFileItem .icon {
	flex-shrink: 0;
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(/images/page/icon/icon_download_b.png) no-repeat center / 19px;
}
.bbsView .viewFooter {
	margin-top: var(--m80);
}

/* m111 about */
.m111 {}
.m111 .introScrollArea {
	position: relative;
	width: 100%;
	will-change: transform;
}
.m111 .sec1 {
	padding: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: url(/images/page/m11_sec1_line_bg.png) no-repeat center bottom / contain;
}
.m111 .sec1 .container1 {
	position: relative;
	width: 100%;
	height: 100%;
}
.m111 .sec1 .container1 .content1,
.contentFont {
	width: 100%;
	height: 100vh;
	position: relative;
}
.m111 .sec1 .container1 .content1 .contentBgArea {
	width: 100%;
	height: 100%;
}
.m111 .sec1 .container1 .content1 .contentTextArea {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(10px);
	opacity: 0;
}
.m111 .sec1 .container1 .content1 .contentBgArea .contentTitle {
	color: var(--color-FF);
	font-size: var(--fz-50);
	font-weight: 700;
	text-align: center;
}
.m111 .sec1 .container1 .content1 .contentBg {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
}
.m111 .sec1 .container1 .content1 .contentBg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m111 .sec1 .container1 .content1 .contentSlogan {
	width: 100%;
	height: 100vh;
	display: flex;
	padding: 0 5%;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	pointer-events: none;
	mix-blend-mode: lighten;
	isolation: isolate;
	color: black;
	transform-origin: 49.5% 40%;
}
.m111 .sec1 .container1 .content1 .contentSlogan .pcSlogan {
	display: block;
}
.m111 .sec1 .container1 .content1 .contentSlogan .mobileSlogan {
	display: none;
}
.m111 .sec2 {
	padding-top: var(--m200);
}
.m111 .sec2 .container1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--m180);
}
.m111 .sec2 .container1 .content {
	flex:1;
}
.m111 .sec2 .container1 .content1 .thumbBox {
	width: 100%;
	height: 100%;
}
.m111 .sec2 .container1 .content1 .thumbBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m111 .sec2 .container1 .content2 .contentTextArea {
	width: 80%;
}
.m111 .sec2 .container1 .content2 .contentTextArea .contentText{
	font-size: var(--fz-18);
	color: var(--color-4D);
}
.m111 .sec2 .container1 .content2 .contentTextArea .contentText + .contentText{
	margin-top: var(--m40);
}
.m111 .sec2 .container1 .content2 .contentSubTitle{
	font-size: var(--fz-34);
	color: var(--color-0D);
	font-weight: 700;
	margin-top: var(--m60);
}

/* m112 CEO 인사말 */
.m112 .sec1 {
	padding: 0;
	position: relative;
	overflow: hidden;
}
.m112 .sec1 .container1 {
	position: relative;
	z-index: 2;
}
.m112 .sec1 .svgArea {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 50vh;
	z-index: 1;
	pointer-events: none;
}
.m112 .sec1 .svgArea svg {
	display: block;
	width: 100%;
	height: 100%;
}
.m112 .sec1 .container1 .content1 {
	width: 100%;
	max-width: 1559px;
	margin: 0 auto;
	text-align: center;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.m112 .sec1 .container1 .content1 .heroTitle {
	font-size: var(--fz-140);
	font-weight: 400;
	position: relative;
}
.m112 .sec1 .container1 .content1 .heroTitle .titleDim {
	color: var(--color-CC);
}
.m112 .sec1 .container1 .content1 .heroTitle .titleMain {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-0D);
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	paint-order: stroke fill;
}
.m112 .sec2 {
	padding: 0;
	background-color: var(--color-F0F1F4);
}
.m112 .sec2 .container2 {
	/* padding-top: var(--m240); */
	padding-bottom: var(--m160);
	position: relative;
	overflow: hidden;
	z-index: 2;
}
.m112 .sec2 .container2 .content1 {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--m40);
	position: relative;
	z-index: 2;
}
.m112 .sec2 .container2 .ceoIntroArea,
.m112 .sec2 .container2 .ceoMessageArea {
	flex: 1;
}
.m112 .sec2 .container2 .ceoIntroArea .contentTitle {
	font-size: var(--fz-50);
	font-weight: 700;
	color: var(--color-0D);
}
.m112 .sec2 .container2 .ceoMessageArea .messageText {
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-4D);
}
.m112 .sec2 .container2 .ceoMessageArea .messageText + .messageText {
	margin-top: var(--m40);
}
.m112 .sec2 .container2 .ceoMessageArea .ceoSignArea {
	display: flex;
	align-items: center;
	gap: var(--m40);
	margin-top: 60px;
}
.m112 .sec2 .container2 .ceoSignArea .ceoSignText {
	display: flex;
	flex-direction: column;
	font-size: var(--fz-20);
	font-weight: 400;
}
.m112 .sec2 .container2 .ceoSignArea .ceoSignText .signBrand {
	color: var(--main-colorR);
}
.m112 .sec2 .container2 .ceoSignArea .ceoSignText .signName {
	color: var(--color-00);
}
.m112 .sec2 .container2 .ceoSignArea .ceoSignThumb {
	flex-shrink: 0;
	width: 274px;
	height: 80px;
}
.m112 .sec2 .container2 .ceoSignArea .ceoSignThumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m112 .sec2 .container2 .content2 {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: url(/images/page/m112_img1.png) no-repeat center / cover;
}

/* m113 CI 이야기 */
.m113 .sec1 {
	padding-top: var(--m160);
}
.m113 .sec1 .container1 .content1 {
}
.m113 .sec1 .container1 .content1 .containerTitle {
	text-align: center;
	font-size: var(--fz-50);
	font-weight: 700;
	color: var(--color-00);
}
.m113 .sec1 .container2 {
	margin-top: var(--m120);
	width: 100%;
	height: 300px;
	overflow: hidden;
	position: relative;
}
.m113 .sec1 .container2 .ciLogoWingContent {
	position: relative;
	height: 100%;
}
.m113 .sec1 .container2 .ciLogoWingContent1 ,
.m113 .sec1 .container2 .ciLogoWingContent3 {
	width: calc((100% - 300px) / 2);
}
.m113 .sec1 .container2 .ciLogoWingContent1 {
	position: absolute;
	left: 0;
	top: 0;
}
.m113 .sec1 .container2 .ciLogoWingContent3 {
	position: absolute;
	right: 0;
	top: 0;
}
.m113 .sec1 .container2 .ciLogoWingContent1 .ciLogoStageInner {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 100%;
	background-color: var(--color-E1E4E9);
	border-radius: 0 350px 350px 0;
}
.m113 .sec1 .container2 .ciLogoWingContent2 {
	flex-shrink: 0;
	z-index: 3;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.m113 .sec1 .container2 .ciLogoWingContent2 .ciLogoStageInner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	aspect-ratio: 1/1;
	border-radius: 50%;
}
.m113 .sec1 .container2 .ciLogoWingContent2 .ciLogoStageInner .ciLogoSvg {
	width: 300px;
	max-width: 72%;
}
.m113 .sec1 .container2 .ciLogoWingContent2 .ciLogoStageInner .ciLogoSvg svg {
	display: block;
	width: 100%;
	height: auto;
}
.m113 .sec1 .container2 .ciLogoWingContent3 .ciLogoStageInner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	background-color: color-mix(in srgb, var(--main-colorB) 20%, transparent);
	border-radius: 350px 0 0 350px;
}
.m113 .sec1 .container2 .ciLogoWingContent .textArea {
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-width: 300px;
}
.m113 .sec1 .container2 .ciLogoWingContent .textArea .text1 {
	font-size: var(--fz-30);
	font-weight: 400;
	color: var(--color-0D);
}
.m113 .sec1 .container2 .ciLogoWingContent .textArea .text1 span {
	color: var(--main-colorR);
}
.m113 .sec1 .container2 .ciLogoWingContent .textArea .text2,
.m113 .sec1 .container2 .ciLogoWingContent .textArea .text3 {
	font-size: var(--fz-16);
	font-weight: 400;
	color: var(--color-66);
}
.m113 .sec1 .container2 .ciLogoWingContent .textArea .text2 {
	position: relative;
	padding-top: 20px;
	margin-top: 20px;
	/* width: 45%; */
}
.m113 .sec1 .container2 .ciLogoWingContent .textArea .text2::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 1px;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.3) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}
.m113 .sec1 .container2 .ciLogoWingContent .textArea .text3 {
	margin-top: 0;
}
.m113 .sec1 .container3 {
	padding-top: 120px;
}
.m113 .sec1 .container3 .contentTextArea {
	display: flex;
	flex-direction: column;
	gap: var(--m40);
	width: 100%;
	text-align: center;
}
.m113 .sec1 .container3 .contentTextArea .contentText1 {
	font-size: var(--fz-22);
	font-weight: 400;
	color: var(--color-1A);
}
.m113 .sec1 .container3 .contentTextArea .contentText2,
.m113 .sec1 .container3 .contentTextArea .contentText3 p {
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-66);
}
.m113 .sec2 .container2 .content1 .contentTextArea .contentText3 p + p {
	margin-top: 0;
}
.m113 .sec1 .container3 .ciDownloadList {
	margin-top: var(--m60);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.m113 .sec1 .container3 .ciDownloadList .ciDownloadItem {
	flex-shrink: 0;
}
.m113 .sec1 .container3 .ciDownloadList .ciDownloadItem .ciDownloadBtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 60px;
	padding: 20px 43px 20px 44px;
	border: 1px solid var(--color-00);
	border-radius: 30px;
	background: var(--color-FF);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.m113 .sec1 .container3 .ciDownloadList .ciDownloadItem .ciDownloadBtn .btnText {
	font-size: var(--fz-16);
	font-weight: 500;
	color: var(--color-33);
	white-space: nowrap;
}
.m113 .sec1 .container3 .ciDownloadList .ciDownloadItem .ciDownloadBtn .icon {
	flex-shrink: 0;
	display: block;
	width: 20px;
	height: 20px;
	background: url(/images/page/icon/icon_download_b.png) no-repeat center / contain;
	transition: background-image 0.3s ease;
}
.m113 .sec1 .container3 .ciDownloadList .ciDownloadItem .ciDownloadBtn:hover {
	background: var(--main-colorB);
	border-color: var(--main-colorB);
}
.m113 .sec1 .container3 .ciDownloadList .ciDownloadItem .ciDownloadBtn:hover .btnText {
	color: var(--color-FF);
}
.m113 .sec1 .container3 .ciDownloadList .ciDownloadItem .ciDownloadBtn:hover .icon {
	background-image: url(/images/page/icon/icon_download_w.png);
}
.m113 .sec2 {
	margin-top: var(--m120);
}
.m113 .sec2 .container1 {
	padding-top: var(--m100);
	border-top: 1px solid var(--color-66);
}
.m113 .sec2 .colorSystemContent1 {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--m60);
}
.m113 .sec2 .colorSystemContent1 .colorSystemTextArea {
}
.m113 .sec2 .colorSystemContent1 .colorSystemTextArea .colorSystemTitle {
	font-size: var(--fz-34);
	font-weight: 500;
	color: var(--color-00);
}
.m113 .sec2 .colorSystemContent1 .colorSystemTextArea .colorSystemDesc {
	font-size: var(--fz-18);
	color: var(--color-66);
	margin-top: var(--m40);
}
.m113 .sec2 .colorSystemContent1 .colorSystemList {
	display: flex;
	align-items: flex-start;
}
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem {
}
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem .colorMainBox {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
	gap: 40px;
	color: var(--color-FF);
}
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem.blue .colorMainBox {
	background-color: var(--main-colorB);
}
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem.red .colorMainBox {
	background-color: var(--main-colorR);
}
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem .colorMainBox .colorName {
	font-size: var(--fz-22);
	font-weight: 600;
}
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem .colorMainBox .colorSpec {
	font-size: var(--fz-18);
	font-weight: 400;
}
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem .colorSubBox {
	height: 150px;
	background-image:
		linear-gradient(color-mix(in srgb, var(--main-colorB) 60%, transparent), color-mix(in srgb, var(--main-colorB) 60%, transparent)),
		linear-gradient(color-mix(in srgb, var(--main-colorB) 40%, transparent), color-mix(in srgb, var(--main-colorB) 40%, transparent)),
		linear-gradient(color-mix(in srgb, var(--main-colorB) 20%, transparent), color-mix(in srgb, var(--main-colorB) 20%, transparent));
	background-size: 100% calc(150px / 3);
	background-position: 0 0, 0 calc(150px / 3), 0 calc(150px / 3 * 2);
	background-repeat: no-repeat;
}
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem.red .colorSubBox {
	background-image:
		linear-gradient(color-mix(in srgb, var(--main-colorR) 60%, transparent), color-mix(in srgb, var(--main-colorR) 60%, transparent)),
		linear-gradient(color-mix(in srgb, var(--main-colorR) 40%, transparent), color-mix(in srgb, var(--main-colorR) 40%, transparent)),
		linear-gradient(color-mix(in srgb, var(--main-colorR) 20%, transparent), color-mix(in srgb, var(--main-colorR) 20%, transparent));
}


/* m114 미션, 비전, 실행 원칙 */
.pageTop.pn11 {
	padding-bottom: 0;
}
.m114 {
}
.m114 .sec1 {
	padding-top: 0;
}
.m114 .sec1 .container1 {
	padding-top: var(--m200);
	height: 100vh;
	position: relative;
}
.m114 .sec1 .content1 {
	position: relative;
	z-index: 2;
}
.m114 .sec1 .content1 .containerTextArea {
	text-align: center;
	position: relative;
	will-change: transform;
}
.m114 .sec1 .content1 .containerTextArea .containerTitle {
	font-size: var(--fz-50);
	font-weight: 800;
	color: var(--color-00);
}
.m114 .sec1 .content1 .containerTextArea .contentText {
	margin-top: var(--m80);
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--color-FF);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.m114 .sec1 .content2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	will-change: clip-path;
	clip-path: inset(0% 10% 0% 10%);
}
.m114 .sec1 .content2 .contentBg{
	background: url(/images/page/m14_sec1_bg.png) no-repeat center / cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	will-change: transform;
}
.m114 .sec2 {
	margin-top: var(--m200);
	padding-top: 0;
}
.m114 .sec2 .container1 {}
.m114 .sec2 .container1 .contentTextArea {}
.m114 .sec2 .container1 .contentTextArea .contentText {
	font-size: var(--fz-180);
	color: var(--color-0D);
	font-weight: 500;
}
.m114 .sec2 .container1 .contentTextArea .contentText2 .icon {
	display: inline-block;
	position: relative;
	margin: 0 var(--m160);
}
.m114 .sec2 .container1 .contentTextArea .contentText2 .icon svg {
	width: var(--fz-180);
	height: 100%;
	vertical-align: bottom;
}
.m114 .sec2 .container2 {
	margin-top: var(--m160);
}
.m114 .sec2 .container2 .visionList {
	position: relative;
	min-height: 70vh;
	width: 100%;
}
.m114 .sec2 .container2 .visionList .visionItem{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 24px 0;
	border-top: 1px solid var(--color-33);
	background-color: var(--color-F0F1F4);
}
.m114 .sec2 .container2 .visionList .visionItem .textArea {
	width: 50%;
	flex-shrink: 0;
	padding: 0 var(--m40);
}
.m114 .sec2 .container2 .visionList .visionItem .titleBox {}
.m114 .sec2 .container2 .visionList .visionItem .itemTitle {
	font-size: var(--fz-34);
	font-weight: 500;
	color: var(--color-0D);
}
.m114 .sec2 .container2 .visionList .itemSubTitle {
	display: block;
	font-size: var(--fz-24);
	font-weight: 500;
	color: var(--color-0D);
}
.m114 .sec2 .container2 .visionList .textBox {
	margin-top: var(--m40);
}
.m114 .sec2 .container2 .visionList .itemText {
	color: var(--color-0D);
	font-weight: 500;
	font-size: var(--fz-22);
}
.m114 .sec2 .container2 .visionList .itemDesc {
	margin-top: 10px;
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-66);
}
.m114 .sec2 .container2 .visionList .thumbArea {
	width: 60%;
}
.m114 .sec2 .container2 .visionList .thumbArea img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m114 .sec2 .container2 .visionList .visionItem2,
.m114 .sec2 .container2 .visionList .visionItem3 {
	position: absolute;
	width: 100%;
	height: auto;
	transform: translateY(100%);
	will-change: transform;
}
.m114 .sec2 .container2 .visionList .visionItem2{
	z-index: 2;
	top: 0%;
}
.m114 .sec2 .container2 .visionList .visionItem3{
	z-index: 3;
	border-bottom: 1px solid var(--color-33);
}


/* m12 연혁 */
.m12 .sec1 {
	padding-top: 0;
}
.m12 .sec1 .containerTitle {
	font-size: var(--fz-50);
	font-weight: 700;
	color: var(--color-0D);
	text-align: center;
}
.m12 .sec2 {
	padding-bottom: 0;
}
.m12 .sec2 .container1 .historyPin {
	max-width: 1560px;
	margin: 0 auto;
	padding-top: var(--m160);
}
.m12 .sec2 .historyLayout {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}
.m12 .sec2 .historyVisual {
	flex-shrink: 0;
	width: 45%;
	height: calc(100vh - var(--m160));
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.m12 .sec2 .historyVisualInner {
	width: 100%;
}
.m12 .sec2 .historyVisualImg {
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
	overflow: hidden;
	background-color: var(--color-00);
}
.m12 .sec2 .historyVisualImgLayer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}
.m12 .sec2 .historyVisualImgLayer.is-active {
	opacity: 0.8;
	z-index: 1;
}
.m12 .sec2 .historyTimeline {
	flex: 1;
	min-width: 0;
	min-height: 100vh;
	padding-top: 80px;
}
.m12 .sec2 .historyTimelineListWrap {
	position: relative;
}
.m12 .sec2 .historyTimelineList {
	position: relative;
	z-index: 1;
}
.m12 .sec2 .historyTimelineItem:last-child {
	padding-bottom: 150px;
}
.m12 .sec2 .historyTrackProgress {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 30px;
	z-index: 0;
	width: 1px;
	height: auto;
	pointer-events: none;
}
.m12 .sec2 .historyTrackProgressLine {
	position: absolute;
	inset: 0;
	background-color: var(--color-CC);
}
.m12 .sec2 .historyTrackProgressFill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: var(--main-colorR);
	will-change: height;
}
.m12 .sec2 .historyTimelineItem {
	display: flex;
	align-items: stretch;
	gap: 24px;
}
.m12 .sec2 .historyTrack {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 60px;
	position: relative;
	z-index: 2;
}
.m12 .sec2 .historyTrackDot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: rgba(179, 179, 179, 0.2);
	flex-shrink: 0;
	margin-top: calc((var(--fz-60) * 1.4 - 24px) / 2);
}
.m12 .sec2 .historyTrackDot::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-B3);
}
.m12 .sec2 .historyTimelineItem.isActive .historyTrackDot,
.m12 .sec2 .historyTimelineItem.isPassed .historyTrackDot {
	background-color: rgba(230, 0, 18, 0.2);
}
.m12 .sec2 .historyTimelineItem.isActive .historyTrackDot::after,
.m12 .sec2 .historyTimelineItem.isPassed .historyTrackDot::after {
	background-color: var(--main-colorR);
}
.m12 .sec2 .historyTrackLineBottom {
	flex: 1;
	width: 1px;
	min-height: 24px;
	background-color: transparent;
}
.m12 .sec2 .historyTimelineItem:last-child .historyTrackLineBottom {
	min-height: 0;
}
.m12 .sec2 .historyContent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--m60);
	flex: 1;
	min-width: 0;
	padding-bottom: 160px;
}
.m12 .sec2 .historyYear {
	flex-shrink: 0;
	color: var(--color-0D);
	font-size: var(--fz-60);
	font-weight: 700;
	line-height: 1.4;
	transition: color 0.3s ease;
}
.m12 .sec2 .historyTimelineItem.isActive .historyYear {
	color: var(--main-colorB);
}
.m12 .sec2 .historyEventList {
	flex: 1;
	min-width: 0;
}
.m12 .sec2 .historyEvent {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 8px 0;
}
.m12 .sec2 .historyEventMark {
	display: block;
	width: 8px;
	height: 1px;
	margin-top: calc((var(--fz-18) * 1.6) / 2);
	flex-shrink: 0;
	background-color: var(--color-CC);
	transition: background-color 0.3s ease;
}
.m12 .sec2 .historyTimelineItem.isActive .historyEventMark,
.m12 .sec2 .historyTimelineItem.isPassed .historyEventMark {
	background-color: var(--main-colorB);
}
.m12 .sec2 .historyEventText {
	color: var(--color-B3);
	font-size: var(--fz-18);
	line-height: 1.6;
	transition: color 0.3s ease;
}
.m12 .sec2 .historyTimelineItem.isActive .historyEventText,
.m12 .sec2 .historyTimelineItem.isPassed .historyEventText {
	color: var(--color-4D);
}

/* m13 글로벌네트워크 */
.pageTop.pn13 {
	padding-bottom: 0;
}
.m13 .sec1 {
	padding-top: 0;
}
.m13 .sec1 .container1 {
	padding-top: var(--m200);
	height: 100vh;
	position: relative;
}
.m13 .sec1 .content1 {
	position: relative;
	z-index: 2;
}
.m13 .sec1 .content1 .containerTextArea {
	text-align: center;
	position: relative;
	will-change: transform;
}
.m13 .sec1 .content1 .containerTextArea .containerTitle {
	font-size: var(--fz-50);
	font-weight: 800;
	color: var(--color-00);
}
.m13 .sec1 .content1 .containerTextArea .contentText {
	margin-top: var(--m80);
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--color-FF);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.m13 .sec1 .content2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	will-change: clip-path;
	clip-path: inset(0% 10% 0% 10%);
}
.m13 .sec1 .content2 .contentBg {
	background: url(/images/page/subTop/subTop_13.png) no-repeat center / cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	will-change: transform;
}
.m13 .sec2 {
	padding-bottom: var(--m80);
}
.m13 .sec2 .container1 .innerWrap {
}
.m13 .sec2 .container1 .innerWrap .tabArea {
	width: 100%;
	margin-top: var(--m80);
	scroll-margin-top: 100px;
}
.m13 .sec2 .container1 .innerWrap .tabArea .tabList {
	background-color: var(--color-FF);
}
.m13 .sec2 .container1 .worldMapArea {
	position: relative;
	width: 100%;
	max-width: 1560px;
	aspect-ratio: 1560 / 800;
	height: auto;
	background-color: var(--color-FF);
	overflow: hidden;
	margin-top: var(--m40);
}
.m13 .sec2 .container1 .worldMapArea .worldMapObject {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: auto;
	padding: var(--m40);
}
.m13 .sec2 .container1 .worldMapArea .worldMapCanvas {
	position: relative;
	width: 100%;
	height: 100%;
}
.m13 .sec2 .container1 .worldMapArea .worldMapObject svg {
	width: 100%;
	height: 100%;
}
.worldMapObject path {
	transition: fill 0.3s ease;
}
.worldMapObject #map1:hover path {
	fill: #98D9C3;
}
.worldMapObject #map2:hover path {
	fill: #FFC3D5;
}
.worldMapObject #map3:hover path {
	fill: #D7C2F2;
}
.worldMapObject #map4:hover path {
	fill: #AADAF2;
}
.worldMapObject #map5:hover path {
	fill: #DCF482;
}
.worldMapObject #map6:hover path {
	fill: #BFCFFF;
}
.worldMapObject #map7:hover path { 
	fill: #FFE0A3;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem {
	position: absolute;
	left: var(--pin-x);
	top: var(--pin-y);
	transform: translate(-50%, -100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 40px;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem.labelPosBottom {
	flex-direction: column-reverse;
	transform: translate(-50%, 0);
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem .mapPinLabelBox {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 40px;
	background-color: var(--main-colorB-op90);
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem .mapPinLabelBox .mapPinLabel {
	font-size: var(--fz-14);
	font-weight: 700;
	color: var(--color-FF);
	white-space: nowrap;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem .mapPinLine {
	display: block;
	width: 1px;
	height: 35px;
	margin-bottom: 10px;
	border-left: 2px var(--main-colorB-op90) dashed;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem.labelPosBottom .mapPinLine {
	height: 80px;
	margin-bottom: 0;
	margin-top: 10px;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem .mapPinIcon {
	position: relative;
	width: 100%;
	aspect-ratio: 56 / 70;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem .mapPinIcon .mapPinShape {
	display: block;
	width: 100%;
	height: 100%;
	color: #004386;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem .mapPinIcon .mapPinFlag {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 25px;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem .mapPinShadow {
	position: absolute;
	bottom: -17px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: auto;
	aspect-ratio: 12 / 8;
	margin-top: -2px;
	border-radius: 50%;
	background-color: var(--main-colorB-op90);
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem.pinToneSemi .mapPinLabelBox,
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem.pinToneSemi .mapPinShadow {
	background-color: #AE8FCC;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem.pinToneSemi .mapPinShape {
	color: #AE8FCC;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem.pinToneSemi .mapPinLine {
	border-left-color: #AE8FCC;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem.pinToneTech {z-index: 2;}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem.pinToneTech .mapPinLabelBox,
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem.pinToneTech .mapPinShadow {
	background-color: #F2C200;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem.pinToneTech .mapPinShape {
	color: #F2C200;
}
.m13 .sec2 .container1 .worldMapArea .mapPinList .mapPinItem.pinToneTech .mapPinLine {
	border-left-color: #F2C200;
}
.m13 .sec3 {
	padding-bottom: var(--m200);
}
.m13 .sec3 .container1 .innerWrap .officeDivider {
	width: 100%;
	height: 1px;
	background-color: var(--color-CC);
}
.m13 .sec3 .container1 .innerWrap .officeSection + .officeSection {
	margin-top: var(--m80);
}
.m13 .sec3 .container1 .innerWrap .officeSectionTitle {
	font-size: var(--fz-50);
	font-weight: 700;
	color: var(--color-0D);
	padding-top: var(--m40);
	border-top: 1px solid var(--color-CC);
}
.m13 .sec3 .container1 .innerWrap .officeList {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	margin-top: var(--m40);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem {
	display: block;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--color-CC);
	transition: background-color 0.3s ease;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard:hover {
	background-color: var(--color-FF);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeMapArea {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
	background-color: var(--color-F0F1F4);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeMapArea .googleMapFrame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea {
	display: flex;
	flex-direction: column;
	gap: var(--m40);
	padding: var(--m40);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: var(--m40);
	border-bottom: 1px solid var(--color-B3);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoHead .officeInfoTitleArea {
	flex: 1;
	min-width: 0;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoHead .officeTitleGroup {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoHead .officeTitleGroup .officeCompany {
	font-size: var(--fz-20);
	font-weight: 500;
	color: var(--color-1A);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoHead .officeTitleGroup .officeCountryTag {
	flex-shrink: 0;
	padding: 4px 16px;
	border-radius: 100px;
	background-color: var(--main-colorB);
	box-shadow: 0 0 2.5px rgba(0, 0, 0, 0.05);
	font-size: var(--fz-14);
	font-weight: 500;
	color: var(--color-FF);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoHead .officeInfoTitleArea .officeCompanyEng {
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-1A);
	margin-top: 10px;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoHead .officeLinkBtn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-FF);
	transition: background-color 0.3s ease;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard:hover .officeInfoArea .officeInfoHead .officeLinkBtn {
	background-color: var(--main-colorB);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoHead .officeLinkBtn .icon {
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--color-0D);
	border-left: 2px solid var(--color-0D);
	transform: rotate(135deg);
	position: relative;
	transition: all 0.3s ease;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard:hover .officeInfoArea .officeInfoHead .officeLinkBtn .icon {
	border-color: var(--color-FF);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoHead .officeLinkBtn .icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 150%;
	height: 2px;
	background-color: var(--color-0D);
	transition: all 0.3s ease;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard:hover .officeInfoArea .officeInfoHead .officeLinkBtn .icon::before {
	background-color: var(--color-FF);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoBody {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoBody .officeInfoTextArea .officeDesc {
	font-size: var(--fz-16);
	font-weight: 400;
	color: var(--color-33);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoBody .officeInfoGroup .officeInfoLabel {
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--color-1A);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoBody .officeInfoGroup .officeAddress {
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-33);
	margin-top: 16px;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoBody .officeInfoGroup .officeContactList {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	margin-top: 16px;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoBody .officeInfoGroup .officeContactList .officeContactItem {
	display: flex;
	align-items: center;
	gap: 16px;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoBody .officeInfoGroup .officeContactList .officeContactItem .officeContactType {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100px;
	flex-shrink: 0;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoBody .officeInfoGroup .officeContactList .officeContactItem .officeContactType img {
	display: block;
	width: 16px;
	height: 16px;
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoBody .officeInfoGroup .officeContactList .officeContactItem .officeContactType .officeContactLabel {
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-4D);
}
.m13 .sec3 .container1 .innerWrap .officeList .officeItem .officeCard .officeInfoArea .officeInfoBody .officeInfoGroup .officeContactList .officeContactItem .officeContactValue {
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-4D);
}

/* m21 비즈니스 */
.m21 {
	background-color: #111;
}
.m21 .innerWrap {
	max-width: 1760px;
	width: 96%;
	margin: 0 auto;
	height: 100%;
}
.m21 .sec1 {
	padding: var(--m160) 0;
	height: 100vh;
	position: relative;
}
.m21 .sec1 .video {
	position: absolute;
	inset: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m21 .sec1 .container1 {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.m21 .sec1 .container1 .innerWrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: var(--m80);
	height: 100%;
}
.m21 .sec1 .container1 .containerTitle {
	font-size: var(--fz-60);
	font-weight: 600;
	color: var(--color-FF);
}
.m21 .sec1 .container1 .textArea {
	margin-top: 0;
	margin-left: auto;
}
.m21 .sec1 .container1 .subTitle {
	font-size: var(--fz-24);
	color: #f2f2f2;
}
.m21 .sec1 .container1 .contentText {
	font-size: var(--fz-18);
	color: #f2f2f2;
}

/* m21 business */
.m21 .sec2,
.m21 .sec3,
.m21 .sec4 {
	position: relative;
	padding: 0;
}
.m21 .sec2 .businessScroll,
.m21 .sec3 .businessScroll,
.m21 .sec4 .businessScroll {
	height: 100vh;
}
.m21 .sec2 .businessStage,
.m21 .sec3 .businessStage,
.m21 .sec4 .businessStage {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #111;
}
.m21 .sec2 .businessStage .visualPin,
.m21 .sec3 .businessStage .visualPin,
.m21 .sec4 .businessStage .visualPin {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #111;
	z-index: 10;
	will-change: flex-basis;
}
.m21 .sec2 .businessStage .contentTrack,
.m21 .sec3 .businessStage .contentTrack,
.m21 .sec4 .businessStage .contentTrack {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	flex: 0 0 50%;
	width: 50%;
	height: 100%;
	will-change: transform;
	background-color: var(--color-11);
}
.m21 .sec2 .businessStage .contentTrack .contentPanel,
.m21 .sec3 .businessStage .contentTrack .contentPanel,
.m21 .sec4 .businessStage .contentTrack .contentPanel {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

/* m21 인트로 */
.m21 .sec2 .visualPin .panelIntroWrap,
.m21 .sec3 .visualPin .panelIntroWrap,
.m21 .sec4 .visualPin .panelIntroWrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 100px var(--m80);
}
.m21 .sec2 .visualPin .panelIntroWrap .titleArea,
.m21 .sec3 .visualPin .panelIntroWrap .titleArea,
.m21 .sec4 .visualPin .panelIntroWrap .titleArea {
	flex: 1;
	min-width: 0;
	text-align: center;
	overflow: hidden;
}
.m21 .sec2 .visualPin .panelIntroWrap .containerTitle,
.m21 .sec3 .visualPin .panelIntroWrap .containerTitle,
.m21 .sec4 .visualPin .panelIntroWrap .containerTitle,
.m21 .sec2 .visualPin .panelIntroWrap .contentTitle,
.m21 .sec3 .visualPin .panelIntroWrap .contentTitle,
.m21 .sec4 .visualPin .panelIntroWrap .contentTitle {
	font-size: var(--fz-50);
	font-weight: 700;
	color: var(--color-FF);
}
.m21 .sec2 .visualPin .panelIntroWrap .subTitle,
.m21 .sec3 .visualPin .panelIntroWrap .subTitle,
.m21 .sec4 .visualPin .panelIntroWrap .subTitle {
	margin-top: 16px;
	padding-top: 16px;
	color: #f2f2f2;
	font-size: var(--fz-20);
	font-weight: 400;
	position: relative;
}
.m21 .sec2 .visualPin .panelIntroWrap .subTitle::before,
.m21 .sec3 .visualPin .panelIntroWrap .subTitle::before,
.m21 .sec4 .visualPin .panelIntroWrap .subTitle::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 400px;
	max-width: 80%;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--color-FF) 50%, rgba(255, 255, 255, 0) 100%);
}

/* m21 원형 비주얼 */
.m21 .sec2 .visualPin .circleArea,
.m21 .sec3 .visualPin .circleArea,
.m21 .sec4 .visualPin .circleArea {
	position: relative;
	flex: 0 0 auto;
	width: min(calc(46vw - 80px), 380px);
	aspect-ratio: 1;
	height: auto;
	margin: 0 auto;
	z-index: 2;
}
.m21 .sec2 .visualPin .circleArea .circleRing,
.m21 .sec3 .visualPin .circleArea .circleRing,
.m21 .sec4 .visualPin .circleArea .circleRing {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}
.m21 .sec2 .visualPin .circleArea .circleRing1,
.m21 .sec3 .visualPin .circleArea .circleRing1,
.m21 .sec4 .visualPin .circleArea .circleRing1 {
	width: 64%;
	height: 64%;
	box-shadow: 0px 0px 50px 0px rgba(255, 255, 255, 0.7);
}
.m21 .sec2 .visualPin .circleArea .circleRing2,
.m21 .sec3 .visualPin .circleArea .circleRing2,
.m21 .sec4 .visualPin .circleArea .circleRing2,
.m21 .sec2 .visualPin .circleArea .circleRing3,
.m21 .sec3 .visualPin .circleArea .circleRing3,
.m21 .sec4 .visualPin .circleArea .circleRing3 {
	width: 100%;
	height: 100%;
}
.m21 .sec2 .visualPin .circleArea .circleRing2 .circleRingSvg,
.m21 .sec3 .visualPin .circleArea .circleRing2 .circleRingSvg,
.m21 .sec4 .visualPin .circleArea .circleRing2 .circleRingSvg {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
.m21 .sec2 .visualPin .circleArea .circleRing2 .circleRingSvg .circleRingTrack,
.m21 .sec3 .visualPin .circleArea .circleRing2 .circleRingSvg .circleRingTrack,
.m21 .sec4 .visualPin .circleArea .circleRing2 .circleRingSvg .circleRingTrack {
	fill: none;
	stroke: var(--color-33);
	stroke-width: 1;
}
.m21 .sec2 .visualPin .circleArea .circleRing2 .circleRingSvg .circleRingProgress,
.m21 .sec3 .visualPin .circleArea .circleRing2 .circleRingSvg .circleRingProgress,
.m21 .sec4 .visualPin .circleArea .circleRing2 .circleRingSvg .circleRingProgress {
	fill: none;
	stroke: #72BFB2;
	stroke-width: 1;
}
.m21 .sec2 .visualPin .circleArea .dotBox,
.m21 .sec3 .visualPin .circleArea .dotBox,
.m21 .sec4 .visualPin .circleArea .dotBox {
	position: absolute;
	inset: 0;
	z-index: 3;
}
.m21 .sec2 .visualPin .circleArea .dotBox .dot,
.m21 .sec3 .visualPin .circleArea .dotBox .dot,
.m21 .sec4 .visualPin .circleArea .dotBox .dot {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	transform-origin: center;
}
.m21 .sec2 .visualPin .circleArea .dotBox .dot::after,
.m21 .sec3 .visualPin .circleArea .dotBox .dot::after,
.m21 .sec4 .visualPin .circleArea .dotBox .dot::after {
	content: '';
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	background-color: #72BFB2;
	border-radius: 50%;
}
.m21 .sec2 .visualPin .circleArea .introIcon,
.m21 .sec3 .visualPin .circleArea .introIcon,
.m21 .sec4 .visualPin .circleArea .introIcon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48%;
	height: 48%;
	z-index: 4;
}
.m21 .sec2 .visualPin .circleArea .introIcon img,
.m21 .sec2 .visualPin .circleArea .introIcon .visualImg,
.m21 .sec3 .visualPin .circleArea .introIcon img,
.m21 .sec3 .visualPin .circleArea .introIcon .visualImg,
.m21 .sec4 .visualPin .circleArea .introIcon img,
.m21 .sec4 .visualPin .circleArea .introIcon .visualImg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.m21 .sec2 .visualPin .circleArea .visualSlideList,
.m21 .sec3 .visualPin .circleArea .visualSlideList,
.m21 .sec4 .visualPin .circleArea .visualSlideList {
	position: absolute;
	inset: 0;
	z-index: 5;
}
.m21 .sec2 .visualPin .circleArea .visualSlideList .visualSlide,
.m21 .sec3 .visualPin .circleArea .visualSlideList .visualSlide,
.m21 .sec4 .visualPin .circleArea .visualSlideList .visualSlide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	opacity: 0;
	visibility: hidden;
}
.m21 .sec2 .visualPin .circleArea .visualSlideList .visualSlide.active,
.m21 .sec3 .visualPin .circleArea .visualSlideList .visualSlide.active,
.m21 .sec4 .visualPin .circleArea .visualSlideList .visualSlide.active {
	opacity: 1;
	visibility: visible;
}
.m21 .sec2 .visualPin .circleArea .visualSlideList .visualSlide .visualIcon,
.m21 .sec3 .visualPin .circleArea .visualSlideList .visualSlide .visualIcon,
.m21 .sec4 .visualPin .circleArea .visualSlideList .visualSlide .visualIcon {
	position: relative;
	flex-shrink: 0;
	width: min(52%, 240px);
	height: auto;
	aspect-ratio: 1;
}
.m21 .sec2 .visualPin .circleArea .visualSlideList .visualSlide .visualIcon img,
.m21 .sec2 .visualPin .circleArea .visualSlideList .visualSlide .visualIcon .visualImg,
.m21 .sec3 .visualPin .circleArea .visualSlideList .visualSlide .visualIcon img,
.m21 .sec3 .visualPin .circleArea .visualSlideList .visualSlide .visualIcon .visualImg,
.m21 .sec4 .visualPin .circleArea .visualSlideList .visualSlide .visualIcon img,
.m21 .sec4 .visualPin .circleArea .visualSlideList .visualSlide .visualIcon .visualImg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* m21 상위 메뉴 네비 */
.m21 .sec2 .visualPin.isSplit .panelIntroWrap,
.m21 .sec3 .visualPin.isSplit .panelIntroWrap,
.m21 .sec4 .visualPin.isSplit .panelIntroWrap {
	justify-content: center;
	padding: 80px 20px 80px 52px;
}
.m21 .sec2 .visualPin .businessNavList,
.m21 .sec3 .visualPin .businessNavList,
.m21 .sec4 .visualPin .businessNavList {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	display: flex;
	flex-direction: column;
	width: auto;
	min-width: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
}
.m21 .sec2.isPinActive .visualPin.isSplit .businessNavList,
.m21 .sec3.isPinActive .visualPin.isSplit .businessNavList,
.m21 .sec4.isPinActive .visualPin.isSplit .businessNavList {
	visibility: visible;
	width: 48px;
	pointer-events: auto;
}
.m21 .sec2 .visualPin .businessNavList .businessNavItem,
.m21 .sec3 .visualPin .businessNavList .businessNavItem,
.m21 .sec4 .visualPin .businessNavList .businessNavItem {
	display: block;
}
.m21 .sec2 .visualPin .businessNavList .businessNavItem .businessNavLink,
.m21 .sec3 .visualPin .businessNavList .businessNavItem .businessNavLink,
.m21 .sec4 .visualPin .businessNavList .businessNavItem .businessNavLink {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	min-height: 32px;
	text-decoration: none;
}
.m21 .sec2 .visualPin.isSplit .businessNavList .businessNavItem .businessNavLink,
.m21 .sec3 .visualPin.isSplit .businessNavList .businessNavItem .businessNavLink,
.m21 .sec4 .visualPin.isSplit .businessNavList .businessNavItem .businessNavLink {
	padding: 8px 12px;
}
.m21 .sec2 .visualPin .businessNavList .businessNavItem .dot,
.m21 .sec3 .visualPin .businessNavList .businessNavItem .dot,
.m21 .sec4 .visualPin .businessNavList .businessNavItem .dot {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.3);
	transition: background-color 0.3s ease;
}
.m21 .sec2 .visualPin .businessNavList .businessNavItem.active .dot,
.m21 .sec3 .visualPin .businessNavList .businessNavItem.active .dot,
.m21 .sec4 .visualPin .businessNavList .businessNavItem.active .dot {
	background-color: var(--main-colorB);
}
.m21 .sec2 .visualPin .businessNavList .businessNavItem .businessNavLabel,
.m21 .sec3 .visualPin .businessNavList .businessNavItem .businessNavLabel,
.m21 .sec4 .visualPin .businessNavList .businessNavItem .businessNavLabel {
	font-size: var(--fz-16);
	font-weight: 500;
	color: var(--color-FF);
	white-space: nowrap;
	opacity: 0;
	max-width: 0;
	overflow: hidden;
	transition: opacity 0.3s ease, max-width 0.3s ease;
}
.m21 .sec2 .visualPin .businessNavList .businessNavItem:hover .businessNavLabel,
.m21 .sec3 .visualPin .businessNavList .businessNavItem:hover .businessNavLabel,
.m21 .sec4 .visualPin .businessNavList .businessNavItem:hover .businessNavLabel,
.m21 .sec2 .visualPin .businessNavList .businessNavItem:focus-within .businessNavLabel,
.m21 .sec3 .visualPin .businessNavList .businessNavItem:focus-within .businessNavLabel,
.m21 .sec4 .visualPin .businessNavList .businessNavItem:focus-within .businessNavLabel {
	opacity: 1;
	max-width: 160px;
}

/* m21 콘텐츠 영역 */
.m21 .sec2 .contentTrack .contentSide,
.m21 .sec3 .contentTrack .contentSide,
.m21 .sec4 .contentTrack .contentSide {
	width: 100%;
	height: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--m60);
	padding: var(--m60) var(--m40);
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.m21 .sec2 .contentTrack .contentSide .textArea,
.m21 .sec3 .contentTrack .contentSide .textArea,
.m21 .sec4 .contentTrack .contentSide .textArea {
	width: 100%;
}
.m21 .sec2 .contentTrack .contentSide .contentSubTitle,
.m21 .sec3 .contentTrack .contentSide .contentSubTitle,
.m21 .sec4 .contentTrack .contentSide .contentSubTitle {
	font-size: var(--fz-18);
	color: var(--color-primary);
	font-weight: 500;
}
.m21 .sec2 .contentTrack .contentSide .contentTitle,
.m21 .sec3 .contentTrack .contentSide .contentTitle,
.m21 .sec4 .contentTrack .contentSide .contentTitle {
	margin-top: var(--m60);
	color: var(--color-FF);
	font-size: var(--fz-34);
	font-weight: 500;
}
.m21 .sec2 .contentTrack .contentSide .contentText,
.m21 .sec3 .contentTrack .contentSide .contentText,
.m21 .sec4 .contentTrack .contentSide .contentText {
	margin-top: var(--m40);
	color: #f7f7f7;
	font-size: var(--fz-18);
	font-weight: 400;
}
.m21 .linkBox .businessMoreBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: fit-content;
	min-height: 60px;
	margin: 0;
	padding: 20px 40px;
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
	background: linear-gradient(to left, #004386 0%, rgba(0, 0, 0, 0) 50%, #004386 100%);
	color: var(--color-FF);
	font-size: var(--fz-16);
	font-weight: 500;
	line-height: 1.5;
	text-transform: none;
	text-decoration: none;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}
.m21 .linkBox .businessMoreBtn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #004386;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 0;
}
.m21 .linkBox .businessMoreBtn:hover::after {
	transform: scaleX(1);
}
.m21 .linkBox .businessMoreBtn::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 1),
		rgba(255, 255, 255, 0.1),
		rgba(255, 255, 255, 0.1),
		rgba(255, 255, 255, 1)
	);
	background-size: 200% 100%;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 2;
}
.m21 .linkBox .businessMoreBtn:hover::before {
	opacity: 1;
	animation: linkBoxBorderShine 2.5s linear infinite;
}
.m21 .linkBox .businessMoreBtn__text {
	display: block;
	position: relative;
	z-index: 1;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	white-space: nowrap;
}
.m21 .linkBox .businessMoreBtn__arrow {
	display: block;
	position: relative;
	z-index: 1;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	object-fit: contain;
}
/* m31 사회공헌 */
.m31 .sec1 {
	height: 100vh;
	padding-top: 0;
	padding-bottom: 0;
}
.m31 .sec1 .container1 {
	padding: var(--m80);
	position: relative;
	width: 100%;
	height: 100%;
}
.m31 .sec1 .container1 .contentBg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: url(/images/page/m31_sec1_bg.png) no-repeat center / cover;
}
.m31 .sec1 .container1 .content1 {
	position: relative;
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.m31 .sec1 .container1 .content1 .contentTitle {
	font-size: var(--fz-50);
	font-weight: 700;
	color: var(--color-FF);
}
.m31 .sec1 .container1 .content1 .contentText {
	margin-top: var(--m40);
	font-size: var(--fz-20);
	color: var(--color-FF);
}
.m31 .sec2 {
	padding-bottom: 0;
	height: 100vh;
	padding: 90px 0 40px;
}
.m31 .sec2 .container2 {
	height: 100%;
}
.m31 .sec2 .container2 .innerWrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--m80);
	height: 100%;
	padding-top: var(--m40);
}
.m31 .sec2 .container2 .innerWrap .content1 {
	flex: 1;
	max-width: 50%;
	flex-shrink: 0;
	height: 80%;
	display: flex;
	flex-direction: column;
}
.m31 .sec2 .container2 .innerWrap .content1 .containerTitle {
	font-size: var(--fz-50);
	font-weight: 700;
	color: var(--color-00);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentTextList {
	position: relative;
	margin-top: var(--m100);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentTextList .contentTextItem {
	position: absolute;
	inset: 0;
}
.m31 .sec2 .container2 .innerWrap .content1 .contentTextList .contentTextItem.active {
	pointer-events: auto;
}
.m31 .sec2 .container2 .innerWrap .content1 .contentTextList .contentTextItem .itemTitle {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.m31 .sec2 .container2 .innerWrap .content1 .contentTextList .contentTextItem .itemTitle .panelNum {
	flex-shrink: 0;
	font-size: var(--fz-34);
	font-weight: 600;
	color: var(--main-colorB);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentTextList .contentTextItem .itemTitle .panelTitle {
	font-size: var(--fz-34);
	font-weight: 600;
	color: var(--main-colorB);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentTextList .contentTextItem .itemTextArea {
	margin-top: var(--m40);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentTextList .contentTextItem .itemTextArea .itemSubTitle {
	font-size: var(--fz-20);
	font-weight: 500;
	color: var(--color-4D);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentTextList .contentTextItem .itemTextArea .itemDesc {
	margin-top: 24px;
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-4D);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentControl {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: auto;
}
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelPrevBtn,
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelNextBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: 0 4px 2px rgba(0, 0, 0, 0.05);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelPrevBtn {
	background-color: var(--color-FF);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelNextBtn {
	background-color: var(--main-colorB);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelPrevBtn .icon,
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelNextBtn .icon {
	display: block;
	width: 10px;
	height: 10px;
	transform: rotate(-45deg);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelPrevBtn .icon::before,
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelNextBtn .icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 150%;
	height: 2px;
	background-color: #fff;
}
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelPrevBtn .icon {
	border-top: 2px solid var(--color-66);
	border-left: 2px solid var(--color-66);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelPrevBtn .icon::before {
	background-color: var(--color-66);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelNextBtn .icon::before {
	background-color: var(--color-FF);
}
.m31 .sec2 .container2 .innerWrap .content1 .contentControl .panelNextBtn .icon {
	border-top: 2px solid var(--color-FF);
	border-left: 2px solid var(--color-FF);
	transform: rotate(135deg);
}
.m31 .sec2 .container2 .innerWrap .content2 {
	height: 100%;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualRing {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(50%, -50%);
	width: 100%;
	pointer-events: none;
	z-index: 1;
	border-radius: 50%;
	border: 1px solid var(--color-CC);
	aspect-ratio: 1 / 1;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualCircleGroup {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 20px;
	height: 100%;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualCircleGroup .visualMainCircle {
	position: relative;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	overflow: hidden;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualCircleGroup .visualSideArea {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualCircleGroup .visualMainCircle .circleImgItem {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualCircleGroup .visualMainCircle .circleImgItem.active {
	opacity: 1;
	visibility: visible;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualCircleGroup .visualMainCircle .circleImgItem.active img {
	animation: scaleUp 0.8s ease;
}
@keyframes scaleUp {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualCircleGroup .visualMainCircle .circleImgItem img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualCircleGroup .visualSideArea .visualThumbCircle {
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualCircleGroup .visualSideArea .visualThumbCircle .circleImgItem {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualCircleGroup .visualSideArea .visualThumbCircle .circleImgItem.active {
	opacity: 1;
	visibility: visible;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualCircleGroup .visualSideArea .visualThumbCircle .circleImgItem img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualNavList {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transform: translateY(-50%);
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualNavList .visualNavItem .visualNavBtn {
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--color-B3);
}
.m31 .sec2 .container2 .innerWrap .content2 .visualArea .visualNavList .visualNavItem .visualNavBtn.active {
	color: var(--color-30);
	font-weight: 600;
}

/* m32 윤리경영 */
.m32 .sec1 {
	padding: 0 0 var(--m160);
}
.m32 .sec1 .container1 .containerTextArea .containerTitle {
	font-size: var(--fz-34);
	font-weight: 700;
	color: var(--color-1A);
	text-align: center;
}
.m32 .sec1 .container1 .containerTextArea .containerText {
	margin-top: var(--m40);
	font-size: var(--fz-20);
	font-weight: 400;
	color: var(--color-66);
	text-align: center;
}
.m32 .sec1 .container1 .content1 {
	padding-top: 200px;
	padding-bottom: var(--m160);
}
.m32 .sec1 .container1 .content1 .ethicsCardStage {
	position: relative;
	width: 100%;
}
.m32 .sec1 .container1 .content1 .ethicsCardList {
	position: relative;
	width: 100%;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem {
	filter: brightness(1);
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
	transform-origin: top center;
	will-change: transform, filter;
	min-height: 400px;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem:not(:first-child) {
	margin-top: 80px;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem:nth-child(1) {
	z-index: 1;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem:nth-child(2) {
	z-index: 2;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem:nth-child(3) {
	z-index: 3;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem:nth-child(4) {
	z-index: 4;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem:nth-child(5) {
	z-index: 5;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem .itemThumb {
	width: 50%;
	align-self: stretch;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem .itemThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem .itemTextArea {
	flex-shrink: 0;
	width: 50%;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	padding: var(--m80);
	background-color: var(--main-colorB-op10);
	box-shadow: inset 0 100px 100px 0 rgba(26, 38, 51, 0.15);
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem .itemTextArea .itemNumber {
	color: var(--main-colorB);
	font-size: var(--fz-20);
	font-weight: 600;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem .itemTextArea .itemTitle {
	margin-top: var(--m40);
	color: var(--main-colorB);
	font-size: var(--fz-34);
	font-weight: 600;
}
.m32 .sec1 .container1 .content1 .ethicsCardList .ethicsCardItem .itemTextArea .itemText {
	margin-top: auto;
	color: var(--color-1A);
	font-size: var(--fz-20);
	font-weight: 500;
}
.m32 .sec2 {
	padding-top: var(--m160);
	background-color: var(--color-FAFAFA);
}
.m32 .sec2 .container1 .containerTextArea .containerTitle {
	font-size: var(--fz-34);
	font-weight: 700;
	color: var(--color-1A);
	text-align: center;
}
.m32 .sec2 .container1 .containerTextArea .containerText {
	margin-top: var(--m40);
	font-size: var(--fz-20);
	font-weight: 400;
	color: var(--color-66);
	text-align: center;
}
.m32 .sec2 .container1 .content1 {
	margin-top: var(--m100);
}
.m32 .sec2 .container1 .content1 .ethicsList {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem {
	background-color: var(--color-FAFAFA);
	border: 1px solid var(--color-CC);
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionHead {
	padding: var(--m40) var(--m60);
	cursor: pointer;
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionHead .accordionHeadWrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionHead .accordionHeadWrap .accordionTitleArea {
	display: flex;
	align-items: center;
	gap: 20px;
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionHead .accordionHeadWrap .accordionTitleArea .accordionChapter {
	font-size: var(--fz-20);
	font-weight: 500;
	color: var(--main-colorB);
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionHead .accordionHeadWrap .accordionTitleArea .accordionTitle {
	font-size: var(--fz-20);
	font-weight: 500;
	color: var(--color-1A);
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionHead .accordionHeadWrap .accordionButton {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionHead .accordionHeadWrap .accordionButton .icon {
	display: block;
	width: 32px;
	height: 32px;
	background: url(/images/page/icon/icon_arr_down.png) no-repeat center / contain;
	transition: transform 0.3s ease;
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem.active .accordionHead .accordionHeadWrap .accordionButton .icon {
	transform: rotate(180deg);
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionBody {
	height: 0;
	overflow: hidden;
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionBody .accordionBodyWrap {
	padding: var(--m40) var(--m60);
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionBody .accordionBodyWrap .ethicsContent {
	padding-right: 60px;
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionBody .accordionBodyWrap .ethicsDesc,
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionBody .accordionBodyWrap .ethicsArticleDesc,
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionBody .accordionBodyWrap .ethicsArticleItem {
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-66);
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionBody .accordionBodyWrap .ethicsArticle {
	margin-top: 24px;
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionBody .accordionBodyWrap .ethicsArticle:first-child {
	margin-top: 0;
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionBody .accordionBodyWrap .ethicsArticleTitle {
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-1A);
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionBody .accordionBodyWrap .ethicsArticleDesc {
	margin-top: 4px;
}
.m32 .sec2 .container1 .content1 .ethicsList .ethicsItem .accordionBody .accordionBodyWrap .ethicsArticleItem {
	margin-top: 0;
}

/* m33 환경경영 */
.m33 .sec1 {}
.m33 .sec1 .container1 {
}
.m33 .sec1 .container1 .content1 {
	position: relative;
	z-index: 2;
}
.m33 .sec1 .container1 .content1 .containerTextArea {
	text-align: center;
}
.m33 .sec1 .container1 .content1 .containerTextArea .containerTitle {
	font-size: var(--fz-50);
	font-weight: 700;
	color: var(--color-00);
}
.m33 .sec1 .container1 .content2 {
	margin-top: var(--m160);
	width: 100%;
	height: 400vh;
	position: relative;
	overflow: hidden;
}
.m33 .sec1 .container1 .content2 .policyScrollBg {
	width: 100%;
	height: 100%;
	background: url(/images/page/m33_sec1_img1.png) no-repeat center / cover;
	will-change: clip-path;
	clip-path: inset(0% 20% 5% 20%);
}
.m33 .sec1 .container1 .content2 .policyScrollBg::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.3);
}
.m33 .sec1 .container1 .content2 .policyScroll {
	position: absolute;
	inset: 0;
	z-index: 2;
	height: 100vh;
	width: 100%;
	padding: var(--m160) var(--m60);
	pointer-events: none;
}
.m33 .sec1 .container1 .content2 .policyScroll .innerWrap {
	width: 100%;
	height: 100%;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
}
.m33 .sec1 .container1 .content2 .policyScroll .policyTextArea {
	text-align: right;
}
.m33 .sec1 .container1 .content2 .policyScroll .policyTextArea .policyTextLine {
	font-size: var(--fz-34);
	font-weight: 700;
	color: var(--color-FF);
}
.m33 .sec1 .container1 .content2 .policyScroll .policyTextArea .policyTextLine + .policyTextLine {
	margin-top: 16px;
}
.m33 .sec1 .container1 .content2 .policyScroll .policyTextArea .policyTextLine1 {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 16px;
}
.m33 .sec1 .container1 .content2 .policyScroll .policyTextArea .policyTextLine .highlightText {
	color: #DCF482;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	position: relative;
}
.m33 .sec2 {
	padding-top: var(--m160);
	padding-bottom: var(--m240);
}
.m33 .sec2 .container1 .containerTextArea {
	text-align: center;
}
.m33 .sec2 .container1 .containerTextArea .containerTitle {
	font-size: var(--fz-34);
	font-weight: 700;
	color: var(--color-0D);
}
.m33 .sec2 .container1 .containerTextArea .containerText {
	margin-top: var(--m40);
	font-size: var(--fz-20);
	font-weight: 400;
	color: var(--color-4D);
}
.m33 .sec2 .container1 .content1 {
	margin-top: var(--m120);
}
.m33 .sec2 .container1 .content1 .isoCardTrack {
	overflow: hidden;
}
.m33 .sec2 .container1 .content1 .isoCardList {
	overflow: visible;
	padding-bottom: 5px;
}
.m33 .sec2 .container1 .content1 .isoCardList .swiper-wrapper {
	align-items: stretch;
	padding-bottom: 7px;
}
.m33 .sec2 .container1 .content1 .isoCardList .isoCardItem {
	width: 250px;
	height: auto;
}
.m33 .sec2 .container1 .content1 .isoCardList .isoCardItem .cardInfo {
	width: 100%;
	height: 350px;
	padding: var(--m160) var(--m60) var(--m160);
	border-radius: 150px;
	background-color: var(--color-FAFAFA);
	box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1);
	text-align: left;
	transition: background-color 0.3s ease, color 0.3s ease;
	word-break: break-all;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}
.m33 .sec2 .container1 .content1 .isoCardList .isoCardItem .cardInfo .cardCode {
	font-size: var(--fz-20);
	font-weight: 500;
	color: var(--color-0D);
}
.m33 .sec2 .container1 .content1 .isoCardList .isoCardItem .cardInfo .cardName {
	margin-top: 16px;
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-4D);
	height: calc(var(--fz-20) * 1.4 * 2);
}
.m33 .sec2 .container1 .content1 .isoCardList .isoCardItem .cardInfo .cardFooter {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.m33 .sec2 .container1 .content1 .isoCardList .isoCardItem .cardInfo .cardFooter .cardDate {
	font-size: var(--fz-18);
	font-weight: 400;
	color: var(--color-66);
}
.m33 .sec2 .container1 .content1 .isoCardList .isoCardItem .cardInfo .cardFooter .downloadBtn .icon {
	display: block;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: var(--brus-10);
	background: var(--color-FF) url(/images/page/icon/icon_download_b.png) no-repeat center / 24px;
	border: 1px solid var(--color-FAFAFA);
}
.m33 .sec2 .container1 .content1 .isoCardList .swiper-pagination {
	position: static;
	margin-top: var(--m40);
}
.m33 .sec2 .container1 .content1 .isoCardList .swiper-pagination-bullet-active {
	background: var(--main-colorB);
}
.m33 .sec2 .container1 .content1 .isoCardList .isoCardItem:hover .cardInfo {
	background-color: var(--main-colorB);
}
.m33 .sec2 .container1 .content1 .isoCardList .isoCardItem:hover .cardInfo .cardCode {
	color: var(--color-FF);
}
.m33 .sec2 .container1 .content1 .isoCardList .isoCardItem:hover .cardInfo .cardName {
	color: var(--color-FAFAFA);
}
.m33 .sec2 .container1 .content1 .isoCardList .isoCardItem:hover .cardInfo .cardFooter .cardDate {
	color: var(--color-E6);
}

/* m41 언론홍보 */
.m41 .sec1 {
	padding-top:0;
}
.m41 .sec1 .container1 .content1 {
	position: relative;
	padding-bottom: var(--m80);
	height: 50vh;
	overflow: hidden;
}
.m41 .sec1 .container1 .content1 .swiperBg {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0%;
	background-color: var(--main-colorB);
}
.m41 .sec1 .container1 .content1 .heroSwiperArea {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 24px;
	height: 100%;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroTextContent {
	position: relative;
	flex: 1;
	margin-left: 4%;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroTextContent .heroTextItem {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroTextContent .heroTextItem.active {
	opacity: 1;
	visibility: visible;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroTextContent .heroTextItem .heroCategory {
	font-size: var(--fz-20);
	font-weight: 500;
	color: var(--color-E6);
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroTextContent .heroTextItem .heroTitleArea {
	margin-top: var(--m40);
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroTextContent .heroTextItem .heroTitleArea .heroTitle {
	font-size: var(--fz-40);
	font-weight: 500;
	color: var(--color-FF);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	height: calc((var(--fz-40) * 1.4 )* 2);
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroTextContent .heroTextItem .heroTitleArea .heroDate {
	font-size: var(--fz-20);
	color: var(--color-B3);
	margin-top: 24px;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroTextContent .heroTextItem .linkBox {
	margin-top: var(--m100);
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent {
	position: relative;
	flex: 1;
	min-width: 0;
	width: 100%;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroImageSwiper {
	width: 100%;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroImageSwiper .heroSlideThumb {
	overflow: hidden;
	aspect-ratio: 768/576;
	transition: transform 0.6s ease, opacity 0.6s ease;
	transform-origin: center center;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroImageSwiper .swiper-slide:not(.swiper-slide-active) .heroSlideThumb {
	transform: scale(0.85);
	opacity: 0.5;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroImageSwiper .swiper-slide.swiper-slide-prev .heroSlideThumb {
	transform-origin: right center;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroImageSwiper .swiper-slide.swiper-slide-next .heroSlideThumb {
	transform-origin: left center;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroImageSwiper .swiper-slide.swiper-slide-active .heroSlideThumb {
	transform: scale(1);
	opacity: 1;
	transform-origin: center center;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroImageSwiper.is-slides-2 .swiper-slide:not(.swiper-slide-active) .heroSlideThumb {
	transform: none;
	opacity: 1;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroImageSwiper .heroSlideThumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav {
	position: absolute;
	right: 22.5%;
	bottom: var(--m40);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 16px;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroPrevBtn,
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroNextBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroPrevBtn {
	background-color: var(--color-FF);
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroNextBtn {
	background-color: var(--main-colorB);
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroPrevBtn .icon,
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroNextBtn .icon {
	display: block;
	width: 10px;
	height: 10px;
	transform: rotate(-45deg);
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroPrevBtn .icon::before,
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroNextBtn .icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 150%;
	height: 2px;
	background-color: #fff;
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroPrevBtn .icon {
	border-top: 2px solid var(--color-66);
	border-left: 2px solid var(--color-66);
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroPrevBtn .icon::before {
	background-color: var(--color-66);
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroNextBtn .icon::before {
	background-color: var(--color-FF);
}
.m41 .sec1 .container1 .content1 .heroSwiperArea .heroImageContent .heroSwiperNav .heroNextBtn .icon {
		border-top: 2px solid var(--color-FF);
	border-left: 2px solid var(--color-FF);
	transform: rotate(135deg);
}
.m41 .sec1 .container2 {
	margin-top: var(--m160);
}
.m41 .sec1 .container2 .tagList {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	padding: 0 var(--m40);
	margin-top: var(--m80);
}
.m41 .sec1 .container2 .tagList .tagItem a {
	font-size: var(--fz-18);
	color: var(--color-4D);
	transition: color 0.3s ease;
}
.m41 .sec1 .container2 .tagList .tagItem.active a {
	font-weight: 500;
	color: var(--color-primary2);
}
.m41 .sec1 .container2 .tagList .tagItem:hover a {
	color: var(--color-primary2);
}
.m41 .sec1 .container2 .bottomArea {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--m80);
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: var(--m160);
}
.m41 .sec1 .container2 .bottomArea .bottomSpacer {
	display: none;
}
.m41 .sec1 .container2 .bottomArea .pagingArea {
	margin-top: 0;
	text-align: center;
}
.m41 .sec1 .container2 .bottomArea .formArea {
	width: 60%;
}
.m41 .sec1 .container2 .bottomArea .searchArea {
	width: 100%;
}
.m41 .sec1 .container2 .bottomArea .searchArea .searchForm .inputBox {
	display: flex;
	align-items: center;
	width: 100%;
	height: 68px;
	padding-left: var(--m40);
	padding-right: 4px;
	border-radius: 100px;
	background-color: var(--color-F0F1F4);
	overflow: hidden;
}
.m41 .sec1 .container2 .bottomArea .searchArea .searchForm .inputBox input {
	flex: 1;
	border: 0;
	background: transparent;
	font-size: var(--fz-18);
	color: var(--color-66);
	padding-right: var(--m40);
	height: 100%;
}
.m41 .sec1 .container2 .bottomArea .searchArea .searchForm .inputBox input::placeholder {
	color: var(--color-66);
}
.m41 .sec1 .container2 .bottomArea .searchArea .searchForm .inputBox button {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 100px;
	background-color: var(--main-colorB);
	padding: 0;
	position: relative;
	transition: width 0.3s ease;
}
.m41 .sec1 .container2 .bottomArea .searchArea .searchForm .inputBox button:hover {
	width: 112px;
}
.m41 .sec1 .container2 .bottomArea .searchArea .searchForm .inputBox button .icon {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto;
	background: url(/images/page/icon/icon_search.png) no-repeat center / 18px;
	filter: brightness(0) invert(1);
}
.m41 .sec1 .container2 .content {
	margin-top: var(--m80);
}
.m41 .sec1 .container2 .content .contentList {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 24px;
grid-row-gap: 60px;
}
.m41 .sec1 .container2 .content .contentList .contentItem .itemThumb {
	aspect-ratio: 1/1;
	width: 100%;
	overflow: hidden;
}
.m41 .sec1 .container2 .content .contentList .contentItem .itemThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.m41 .sec1 .container2 .content .contentList .contentItem:hover .itemThumb img {
	transform: scale(1.05);
}
.m41 .sec1 .container2 .content .contentList .contentItem .itemTextArea {
	margin-top: var(--m40);
}
.m41 .sec1 .container2 .content .contentList .contentItem .itemTextArea .itemTag {
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--main-colorB);
}
.m41 .sec1 .container2 .content .contentList .contentItem .itemTextArea .itemTitle {
	margin-top: 16px;
	font-size: var(--fz-20);
	font-weight: 500;
	color: var(--color-33);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
}

/* m42 코아시아 이야기 */
.m42 {
	margin-top: 90px;
}
.m42:not(.bbsView) .sec1 {
	width: 100%;
	height: 100vh;
	padding-top: 0;
	transition: background-color 0.3s ease;
}
.m42 .sec1:has(.titleList .titleItem:first-child.active) {
	background-color: var(--color-primary2);
}
.m42 .sec1:has(.titleList .titleItem:nth-child(2).active) {
	background-color: #B8E1FF;
}
.m42 .sec1:has(.titleList .titleItem:last-child.active) {
	background-color: #DCF482;
}
.m42:not(.bbsView) .sec1 .innerWrap {
	max-width: 1760px;
	height: 100%;
}
.m42 .sec1 .container1 {
	width: 100%;
	height: 100%;
	position: relative;
}
.m42 .sec1 .bottomTextList {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.m42 .sec1 .bottomTextList .bottomTextItem {
	font-size: var(--fz-320);
	font-weight: 700;
	color: var(--color-0D);
	position: absolute;
	bottom: 0;
	left: 0;
	max-width: fit-content;
	width: 100%;
	word-break: break-word;
	line-height: 0.8;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.m42 .sec1 .bottomTextList .bottomTextItem.active {
	opacity: 1;
	visibility: visible;
}
.m42 .sec1 .titleList {
	position: absolute;
	max-width: max-content;
	left: 50%;
	top: var(--m80);
	z-index: 10;
}
.m42 .sec1 .titleList .titleItem {
	font-size: var(--fz-60);
	font-weight: 700;
	color: var(--color-0D);
	cursor: pointer;
	transition: color 0.3s ease;
}
.m42 .sec1:has(.titleList .titleItem:first-child.active) .titleList .titleItem:hover,
.m42 .sec1:has(.titleList .titleItem:first-child.active) .titleList .titleItem.active {
	color: #B8E1FF;
}
.m42 .sec1:has(.titleList .titleItem:nth-child(2).active) .titleList .titleItem:hover,
.m42 .sec1:has(.titleList .titleItem:nth-child(2).active) .titleList .titleItem.active {
	color: #DCF482;
}
.m42 .sec1:has(.titleList .titleItem:last-child.active) .titleList .titleItem:hover,
.m42 .sec1:has(.titleList .titleItem:last-child.active) .titleList .titleItem.active {
	color: var(--color-primary2);
}
.m42 .sec1 .contentList {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.m42 .sec1 .contentList .contentItem {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: var(--m40) 0;
	transform: translateY(20px);
	opacity: 0;
	visibility: hidden;
	transition-delay: 0.3s;
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.m42 .sec1 .contentList .contentItem.active {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}
.m42 .sec1 .contentList .contentItem .newsList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: var(--m40);
	width: 100%;
	height: 100%;
}
.m42 .sec1 .contentList .contentItem .newsList {}
.m42 .sec1 .contentList .contentItem .newsList .newsItem{
	padding: var(--m40);
	overflow: hidden;
	position: relative;
	width: 100%;
}
.m42 .sec1 .contentList .contentItem1 .newsList .newsItem1 {
	aspect-ratio: 560/350;
	width: 130%;
}
.m42 .sec1 .contentList .contentItem1 .newsList .newsItem2 {
	aspect-ratio: 1 / 1;
	margin-top: auto;
	margin-bottom: 10vh;
	margin-left: -70%;
}
.m42 .sec1 .contentList .contentItem1 .newsList .newsItem3 {
	aspect-ratio: 9 / 16;
	height: 60vh;
	width: auto;
	margin-left: auto;
	margin-top: auto;
}
.m42 .sec1 .contentList .contentItem2 .newsList .newsItem1 {
	aspect-ratio: 1/1;
	width: 110%;
}
.m42 .sec1 .contentList .contentItem2 .newsList .newsItem2 {
	aspect-ratio: 320/400;
	width: 80%;
	margin-top: auto;
	margin-left: -40%;
}
.m42 .sec1 .contentList .contentItem2 .newsList .newsItem3 {
	aspect-ratio: 9 / 16;
	height: 60vh;
	width: auto;
	margin-left: auto;
	margin-bottom: auto;
	margin-top: auto;
}
.m42 .sec1 .contentList .contentItem3 .newsList .newsItem1 {
	aspect-ratio: 500/600;
	width: 80%;
}
.m42 .sec1 .contentList .contentItem3 .newsList .newsItem2 {
	aspect-ratio: 560/400;
	margin-top: auto;
	width: 100%;
	margin-left: -20%;
}
.m42 .sec1 .contentList .contentItem3 .newsList .newsItem3 {
	aspect-ratio: 9 / 16;
	height: 60vh;
	width: auto;
	margin-left: auto;
	margin-top: auto;
}
.m42 .sec1 .contentList .contentItem .newsList .contentThumb{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: filter 0.3s ease, transform 0.3s ease;
}
.m42 .sec1 .contentList .contentItem .newsList .newsItem:not(.newsItem3) .contentThumb::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.m42 .sec1 .contentList .contentItem .newsList .newsItem:not(.newsItem3):hover .contentThumb::before {
	opacity: 1;
	visibility: visible;
}
.m42 .sec1 .contentList .contentItem .newsList .newsItem:not(.newsItem3):hover .contentThumb {
	filter: blur(2px);
	transform: scale(1.02);
}
.m42 .sec1 .contentList .contentItem .newsList .contentThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.m42 .sec1 .contentList .contentItem .newsList .contentThumb iframe {
	width: 100%;
	height: 100%;
}
/* 숏폼: 태블릿은 그 자리 iframe 재생, 뒷면 숨김 */
.m42 .sec1 .contentList .contentItem .newsList .newsItemShortForm .shortFormPoster {
	display: none;
}
.m42 .sec1 .contentList .contentItem .newsList .newsItemShortForm .shortFormPlayerFront {
	display: block;
	pointer-events: auto;
}
.m42 .sec1 .contentList .contentItem .newsList .contentTextArea{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	z-index: 1;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.m42 .sec1 .contentList .contentItem .newsList .newsItem3 .contentTextArea {
	display: none;
}
.m42 .sec1 .contentList .contentItem .newsList .newsItemShortForm .contentTextArea {
	display: none;
}
.m42 .sec1 .contentList .contentItem .newsList .newsItem:hover .contentTextArea {
	opacity: 1;
	transform: translateY(0);
}
.m42 .sec1 .contentList .contentItem .newsList .contentTextArea .contentTitle {
	font-size: var(--fz-20);
	font-weight: 500;
	color: var(--color-FF);
	position: relative;
}
.m42 .sec1 .contentList .contentItem .newsList .contentTextArea .linkBox {
	margin-left: auto;
}
.m42 .sec2 {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, rgb(234, 242, 254) 18.935%, rgb(234, 246, 251) 33.527%, rgb(230, 251, 245) 49.74%, rgb(242, 246, 240) 61.089%, rgb(255, 238, 241) 75.68%, rgb(255, 243, 236) 87.84%, rgb(255, 247, 224) 100%);
}
.m42 .sec2 .container1 {
	position: relative;
	z-index: 1;
	background: linear-gradient(180deg, var(--color-FF) 0%, var(--color-FF) 30%, rgb(231, 240, 254) 45%, transparent 55%);
	padding-top: var(--m160);
}
.m42 .sec2 .container1 .innerWrap .containrTitleArea {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--m40);
	text-align: center;
}
.m42 .sec2 .container1 .innerWrap .containrTitleArea .containerTitle {
	font-family: "Geologica", sans-serif;
	font-size: var(--fz-18);
	font-weight: 600;
	color: var(--main-colorB);
	line-height: 1.25;
}
.m42 .sec2 .container1 .innerWrap .containrTitleArea .containerSubTitle {
	font-size: var(--fz-34);
	font-weight: 700;
	color: var(--color-0D);
}
.m42 .sec2 .container1 .innerWrap .containrTitleArea .containerText {
	font-size: var(--fz-20);
	color: var(--color-4D);
}
.m42 .sec2 .container1 .innerWrap .tabArea {
	margin-top: var(--m80);
}
.m42 .sec2 .container1 .innerWrap .tabArea .tabList {
	background-color: var(--color-F0F1F4);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
.m42 .sec2 .container1 .innerWrap .formArea {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	margin-top: var(--m40);
}
.m42 .sec2 .container1 .innerWrap .formArea .searchArea {
	width: 100%;
}
.m42 .sec2 .container1 .innerWrap .formArea .searchArea .searchForm .inputBox {
	display: flex;
	align-items: center;
	width: 100%;
	height: 68px;
	padding-left: var(--m40);
	padding-right: 4px;
	border-radius: 100px;
	background-color: var(--color-F0F1F4);
	overflow: hidden;
}
.m42 .sec2 .container1 .innerWrap .formArea .searchArea .searchForm .inputBox input {
	flex: 1;
	border: 0;
	background: transparent;
	font-size: var(--fz-18);
	color: var(--color-66);
	padding-right: var(--m40);
	height: 100%;
}
.m42 .sec2 .container1 .innerWrap .formArea .searchArea .searchForm .inputBox input::placeholder {
	color: var(--color-66);
}
.m42 .sec2 .container1 .innerWrap .formArea .searchArea .searchForm .inputBox button {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 100px;
	background-color: var(--main-colorB);
	padding: 0;
	position: relative;
	transition: width 0.3s ease;
}
.m42 .sec2 .container1 .innerWrap .formArea .searchArea .searchForm .inputBox button:hover {
	width: 112px;
}
.m42 .sec2 .container1 .innerWrap .formArea .searchArea .searchForm .inputBox button .icon {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto;
	background: url(/images/page/icon/icon_search.png) no-repeat center / 18px;
	filter: brightness(0) invert(1);
}
.m42 .sec2 .container1 .innerWrap .formArea .tagList {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	padding: 0 var(--m40);
}
.m42 .sec2 .container1 .innerWrap .formArea .tagList .tagItem a {
	font-size: var(--fz-16);
	color: var(--color-4D);
	transition: color 0.3s ease;
}
.m42 .sec2 .container1 .innerWrap .formArea .tagList .tagItem.active a {
	font-weight: 500;
	color: var(--color-primary2);
}
.m42 .sec2 .container1 .innerWrap .formArea .tagList .tagItem:hover a {
	color: var(--color-primary2);
}
.m42 .sec2 .container1 .innerWrap .contentArea {
	margin-top: var(--m80);
}
.m42 .sec2 .container1 .innerWrap .contentArea .contentList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 24px;
	grid-row-gap: 60px;
}
.m42 .sec2 .container1 .innerWrap .contentArea .contentList .contentItem {
	border-radius: 20px;
	background-color: var(--color-FF);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	cursor: pointer;
}
.m42 .sec2 .container1 .innerWrap .contentArea .contentList .contentItem a {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.m42 .sec2 .container1 .innerWrap .contentArea .contentList .contentItem .itemThumb {
	aspect-ratio: 1 / 1;
	width: 100%;
	overflow: hidden;
	border-radius: 16px;
}
.m42 .sec2 .container1 .innerWrap .contentArea .contentList.shortFormList .contentItem .itemThumb {
	aspect-ratio: 9 / 16;
	width: 100%;
	overflow: hidden;
	border-radius: 16px;
}
.m42 .sec2 .container1 .innerWrap .contentArea .contentList .contentItem .itemThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.m42 .sec2 .container1 .innerWrap .contentArea .contentList .contentItem:hover .itemThumb img {
	transform: scale(1.05);
}
.m42 .sec2 .container1 .innerWrap .contentArea .contentList .contentItem .itemTextArea {
	display: flex;
	flex-direction: column;
	padding: var(--m40) 24px;
}
.m42 .sec2 .container1 .innerWrap .contentArea .contentList .contentItem .itemTextArea .itemTag {
	font-size: var(--fz-16);
	font-weight: 500;
	color: var(--main-colorB);
}
.m42 .sec2 .container1 .innerWrap .contentArea .contentList .contentItem .itemTextArea .itemTitle {
	margin-top: 16px;
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--color-33);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
}
.m42 .sec2 .container1 .innerWrap .pagingArea {
	margin-top: var(--m80);
}
/* storyPopup */
.m42 .storyPopup {
	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100vh;
	z-index: 1000;
}
.m42 .storyPopup.active {
	display: block;
}
.m42 .storyPopup .iframeWrap {
	width: 96%;
	margin: 0 auto;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.m42 .storyPopup .popupContainer {
	position: relative;
	aspect-ratio: 560 / 315;
	width: 100%;
	max-width: 800px;
}
.m42 .storyPopup .popupContainer .closeBtn {
	position: absolute;
	width: 40px;
	height: 40px;
	padding: 10px;
	border: 0;
	right: 0;
	bottom: calc(100% + 10px);
}
.m42 .storyPopup .popupContainer .closeBtn::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 40px;
	height: 2px;
	background-color: #fff;
}
.m42 .storyPopup .popupContainer .closeBtn::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 40px;
	height: 2px;
	background-color: #fff;
}
.m42 .storyPopup .popupContainer .closeBtn:hover::before,
.m42 .storyPopup .popupContainer .closeBtn:hover::after {
	background-color: var(--color-primary2);
}
.m42 .storyPopup .popupContainer iframe {
	width: 100%;
	height: 100%;
}
.m42 .storyPopup .popupBg {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: -1;
}

/* shortFormPopup */
.m42 .shortFormPopup {
	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100vh;
	z-index: 1000;
}
.m42 .shortFormPopup.active {
	display: block;
}
.m42 .shortFormPopup .iframeWrap {
	width: 96%;
	margin: 0 auto;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.m42 .shortFormPopup .popupContainer {
	position: relative;
	aspect-ratio: 9 / 16;
	height: 100%;
	max-height: 70vh;
}
.m42 .shortFormPopup .popupContainer .closeBtn {
	position: absolute;
	width: 40px;
	height: 40px;
	padding: 10px;
	border: 0;
	right: 0;
	bottom: calc(100% + 10px);
}
.m42 .shortFormPopup .popupContainer .closeBtn::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 40px;
	height: 2px;
	background-color: #fff;
}
.m42 .shortFormPopup .popupContainer .closeBtn::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 40px;
	height: 2px;
	background-color: #fff;
}
.m42 .shortFormPopup .popupContainer .closeBtn:hover::before,
.m42 .shortFormPopup .popupContainer .closeBtn:hover::after {
	background-color: var(--color-primary2);
}
.m42 .shortFormPopup .popupContainer iframe {
	width: 100%;
	height: 100%;
}
.m42 .shortFormPopup .popupBg {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: -1;
}

/* m50 */
.pageTopDescriptionArea.pn50  {
	text-align: center;
	padding-bottom: var(--m160);
}
.pageTopDescriptionArea.pn50 .pageTopSubTitle {
	font-size: var(--fz-50);
	font-weight: 700;
	color: var(--color-0D);
}
.pageTopDescriptionArea.pn50 .pageTopDescription {
	margin-top: var(--m40);
	font-size: var(--fz-20);
	color: var(--color-4D);
}
/* m51 주가정보 */
.m51 {}
.m51 .sec1 {}
.m51 .sec1 .innerWrap {}
.m51 .sec1 .container1 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.m51 .sec1 .container1 .content1 {
	width: 100%;
}
.m51 .sec1 .container1 .content1 .stockCard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: var(--m40);
	height: 100%;
	padding: var(--m80) var(--m200);
	background-color: var(--color-11);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardTop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardTop .stockMarketInfo,
.m51 .sec1 .container1 .content1 .stockCard .stockCardTop .stockPriceLabel {
	font-size: var(--fz-14);
	color: var(--color-E6);
	opacity: 0.6;
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBody {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 5%;
	justify-content: center;
	align-items: center;
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBody .stockPriceArea {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex: 1;
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBody .stockPriceArea .stockPriceValue {
	font-size: var(--fz-60);
	font-weight: 400;
	color: var(--color-FF);
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBody .stockPriceArea .stockPriceUnit {
	font-size: var(--fz-24);
	font-weight: 500;
	color: var(--color-FF);
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBody .stockChangeBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 4px 20px;
	border-radius: 100px;
	flex: 1;
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBody .stockChangeBadge.up {
	background-color: #E60012;
	color: var(--color-FF);
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBody .stockChangeBadge.down {
	background-color: var(--main-colorB);
	color: var(--color-FF);
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBody .stockChangeBadge.none {
	background-color: var(--color-FF);
	color: var(--color-11);
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBottom {
	width: 100%;
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBottom .stockChangeBadge .stockChangeIcon {
	font-size: var(--fz-13);
	font-weight: 700;
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBottom .stockChangeBadge .stockChangeValue {
	font-size: var(--fz-14);
}
.m51 .sec1 .container1 .content1 .stockCard .stockCardBottom .stockUpdateTime {
	font-size: var(--fz-14);
	color: var(--color-E6);
	text-align: right;
	opacity: 0.5;
}
.m51 .sec1 .container1 .content2 {
	width: 100%;
}
.m51 .sec1 .container1 .content2 .stockDataList {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 24px var(--m40);
	background-color: var(--color-F0F1F4);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.m51 .sec1 .container1 .content2 .stockDataList .stockDataRow {
	display: flex;
	gap: 20px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-CC);
}
.m51 .sec1 .container1 .content2 .stockDataList .stockDataRow:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.m51 .sec1 .container1 .content2 .stockDataList .stockDataRow .stockDataItem {
	display: flex;
	flex: 1;
	align-items: center;
	padding: 12px 10px;
}
.m51 .sec1 .container1 .content2 .stockDataList .stockDataRow .stockDataItem .stockDataLabel {
	flex: 1;
	font-size: var(--fz-18);
	color: var(--color-66);
}
.m51 .sec1 .container1 .content2 .stockDataList .stockDataRow .stockDataItem .stockDataValue {
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--color-33);
	text-align: right;
}
.m51 .sec1 .container2 {
	margin-top: var(--m160);
}
.m51 .sec1 .container2 .content1 .contentTitle {
	font-size: var(--fz-34);
	font-weight: 500;
	color: var(--color-30);
}
.m51 .sec1 .container2 .content1 .stockPriceTableWrap {
	margin-top: var(--m60);
}
.m51 .sec1 .container2 .content1 .stockPriceTableWrap .stockPriceTable {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.m51 .sec1 .container2 .content1 .stockPriceTableWrap .stockPriceTable thead th {
	padding: 20px var(--m40);
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--color-30);
	text-align: center;
	border-top: 1px solid var(--color-33);
	border-bottom: 1px solid var(--color-33);
}
.m51 .sec1 .container2 .content1 .stockPriceTableWrap .stockPriceTable tbody td {
	padding: 20px 1vw;
	font-size: var(--fz-18);
	color: var(--color-4D);
	text-align: center;
	border-bottom: 1px solid var(--color-CC);
}
.m51 .sec1 .container2 .content1 .stockPriceTableWrap .stockPriceTable tbody td.changeUp {
	color: var(--main-colorR);
}
.m51 .sec1 .container2 .content1 .stockPriceTableWrap .stockPriceTable tbody td.changeDown {
	color: var(--main-colorB);
}

/* m53 재무정보 */
.m53 .sec1 {
	padding-top: 0;
}
.m53 .sec1 .financialPeriodPanelList .financialPeriodPanel {
	display: none;
}
.m53 .sec1 .financialPeriodPanelList .financialPeriodPanel.active {
	display: block;
}
.m53 .sec1.isEmpty .financialPeriodPanelList {
	display: none;
}
.m53 .sec1 .container1 .kpiCardList {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.m53 .sec1 .container1 .kpiCardList .kpiCardItem {
	width: calc((100% - 24px)/2);
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: var(--m40);
	background-color: var(--color-F0F1F4);
}
.m53 .sec1 .container1 .kpiCardList .kpiCardItem .kpiCardLabel {
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--color-30);
}
.m53 .sec1 .container1 .kpiCardList .kpiCardItem .kpiCardValueArea {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.m53 .sec1 .container1 .kpiCardList .kpiCardItem .kpiCardValueArea .kpiCardValue {
	font-size: var(--fz-34);
	font-weight: 500;
	color: var(--color-30);
}
.m53 .sec1 .container1 .kpiCardList .kpiCardItem .kpiCardValueArea .kpiCardUnit {
	font-size: var(--fz-14);
	color: var(--color-4D);
}
.m53 .sec1 .container1 {
	display: flex;
	flex-direction: column;
	gap: var(--m160);
}
.m53 .sec1 .container1 .financialTableArea .financialTableHead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.m53 .sec1 .container1 .financialTableArea .financialTableHead .financialTableTitle {
	font-size: var(--fz-34);
	font-weight: 500;
	color: var(--color-30);
}
.m53 .sec1 .container1 .financialTableArea .financialTableHead .financialTableMeta {
	display: flex;
	align-items: center;
	gap: 16px;
}
.m53 .sec1 .container1 .financialTableArea .financialTableHead .financialTableMeta .metaText {
	font-size: var(--fz-18);
	color: var(--color-66);
}
.m53 .sec1 .container1 .financialTableArea .financialTableHead .financialTableMeta .metaDivider {
	width: 1px;
	height: 20px;
	background-color: var(--color-B3);
}
.m53 .sec1 .container1 .financialTableArea .financialTableWrap {
	margin-top: var(--m40);
}
.m53 .sec1 .container1 .financialTableArea .financialTableWrap .financialTable {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.m53 .sec1 .container1 .financialTableArea .financialTableWrap .financialTable .colItem {
	width: 170px;
}
.m53 .sec1 .container1 .financialTableArea .financialTableWrap .financialTable thead th {
	padding: 20px 1vw;
	font-size: var(--fz-18);
	font-weight: 500;
	color: var(--color-30);
	text-align: center;
	border-top: 1px solid var(--color-33);
	border-bottom: 1px solid var(--color-33);
}
.m53 .sec1 .container1 .financialTableArea .financialTableWrap .financialTable thead th.colCurrent,
.m53 .sec1 .container1 .financialTableArea .financialTableWrap .financialTable tbody td.colCurrent {
	background-color: rgba(0, 51, 102, 0.05);
}
.m53 .sec1 .container1 .financialTableArea .financialTableWrap .financialTable tbody td {
	padding: 20px 1vw;
	font-size: var(--fz-18);
	color: var(--color-4D);
	text-align: center;
	border-bottom: 1px solid var(--color-CC);
}
.m53 .sec1 .container1 .financialTableArea .financialTableWrap .financialTable tbody td.itemName {
	font-weight: 500;
	color: var(--color-30);
	text-align: center;
}
.m53 .sec1 .container1 .financialTableArea .financialTableWrap .financialTable tbody tr.isSummary td {
	border-bottom-color: var(--color-33);
}

/* m54 IR공고 */
.m54 .sec1 .flexBox {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--m80);
	flex-direction: column-reverse;
}
.m54 .sec1 a.companyIntroduction {
	color: var(--color-FF);
	font-size: var(--fz-20);
	font-weight: 500;
	background-color: var(--main-colorB);
	padding: 17px var(--m40);
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-left: auto;
}
.m54 .sec1 a.companyIntroduction .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(/images/page/icon/icon_download_w.png) no-repeat center / 19px;
}



/* ani */
/* m111 */
.m111 .sec2 .container1 .content1.ani .thumbBox {
	position: relative;
}
.m111 .sec2 .container1 .content1.ani .thumbBox::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-primary);
	transition: width 0.4s ease;
	z-index: 2;
}
.m111 .sec2 .container1 .content1.ani .thumbBox::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-primary);
	transition: width 0.8s ease;
	opacity: 0.5;
	z-index: 1;
}
.m111 .sec2 .container1 .content1.inView .thumbBox::before,
.m111 .sec2 .container1 .content1.inView .thumbBox::after {
	width: 0;
}
.m111 .sec2 .container1 .content2.ani .contentTextArea .contentText {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m111 .sec2 .container1 .content2.ani .contentTextArea .contentText:nth-child(1) {
	--delay: 0;
}
.m111 .sec2 .container1 .content2.ani .contentTextArea .contentText:nth-child(2) {
	--delay: 0.5;
}
.m111 .sec2 .container1 .content2.ani .contentTextArea .contentText:nth-child(3) {
	--delay: 1;
}
.m111 .sec2 .container1 .content2.ani .contentTextArea .contentText:nth-child(4) {
	--delay: 1.5;
}
.m111 .sec2 .container1 .content2.inView .contentTextArea .contentText {
	opacity: 1;
	transform: translateY(0);
}
.m111 .sec2 .container1 .content2.ani .contentSubTitle span {
  --color1: var(--color-primary2);
	--color2: var(--color-primary);
    
  all: unset;
  background-image: linear-gradient(to right, var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 35%;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}
@keyframes highlight {
  to {
    background-size: 100% 35%;
  }
}
.m111 .sec2 .container1 .content2.inView .contentSubTitle span {
	animation: highlight 800ms 1 ease-out;
	animation-fill-mode: forwards;
}

.m112 .sec2 .container2 .ceoIntroArea .contentTitle span {
	display: block;
	position: relative;
	color: var(--color-F0F1F4);
}
.m112 .sec2 .container2 .ceoIntroArea .contentTitle span::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	color: var(--color-0D);
	-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	will-change: clip-path;
	transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		-webkit-clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.m112 .sec2 .container2 .ceoIntroArea .contentTitle span:nth-child(2)::before {
	transition-delay: 0.2s;
}
.m112 .sec2 .container2 .ceoIntroArea .contentTitle.inView span::before {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.m112 .sec2 .container2 .ceoMessageArea .messageText,
.m112 .sec2 .container2 .ceoMessageArea .ceoSignArea {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--delay) * 0.25s);
}
.m112 .sec2 .container2 .ceoMessageArea .messageText:nth-of-type(1) { --delay: 0; }
.m112 .sec2 .container2 .ceoMessageArea .messageText:nth-of-type(2) { --delay: 1; }
.m112 .sec2 .container2 .ceoMessageArea .messageText:nth-of-type(3) { --delay: 2; }
.m112 .sec2 .container2 .ceoMessageArea .messageText:nth-of-type(4) { --delay: 3; }
.m112 .sec2 .container2 .ceoMessageArea .messageText:nth-of-type(5) { --delay: 4; }
.m112 .sec2 .container2 .ceoMessageArea .ceoSignArea { --delay: 5; }
.m112 .sec2 .container2 .ceoMessageArea.inView .messageText,
.m112 .sec2 .container2 .ceoMessageArea.inView .ceoSignArea {
	opacity: 1;
	transform: translateY(0);
}

.m113 .sec1 .container1 .content1.ani .containerTitle span {
	display: block;
	position: relative;
	color: var(--color-F0F1F4);
}
.m113 .sec1 .container1 .content1.ani .containerTitle span::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	color: var(--color-00);;
	-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	will-change: clip-path;
	transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		-webkit-clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition-delay: calc(var(--delay) * 0.3s);
}
.m113 .sec1 .container1 .content1.ani .containerTitle span:nth-child(2)::before {
	--delay: 0.5;
}
.m113 .sec1 .container1 .content1.inView .containerTitle span::before {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.m113 .sec1 .container3 .content1.ani .contentTextArea .contentText,
.m113 .sec1 .container3 .content1.ani .contentTextArea .contentText3 p {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--delay) * 0.25s);
}
.m113 .sec1 .container3 .content1.ani .contentTextArea .contentText1 { --delay: 0; }
.m113 .sec1 .container3 .content1.ani .contentTextArea .contentText2 { --delay: 1; }
.m113 .sec1 .container3 .content1.ani .contentTextArea .contentText3 p:nth-child(1) { --delay: 2; }
.m113 .sec1 .container3 .content1.ani .contentTextArea .contentText3 p:nth-child(2) { --delay: 3; }
.m113 .sec1 .container3 .content1.ani .contentTextArea .contentText3 p:nth-child(3) { --delay: 4; }

.m113 .sec1 .container3 .content1.inView .contentTextArea .contentText,
.m113 .sec1 .container3 .content1.inView .contentTextArea .contentText3 p {
	opacity: 1;
	transform: translateY(0);
}

.m113 .sec1 .container3 .content1.ani .ciDownloadList .ciDownloadItem {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--delay) * 0.25s);
}
.m113 .sec1 .container3 .content1.ani .ciDownloadList .ciDownloadItem:nth-child(1) { --delay: 5; }
.m113 .sec1 .container3 .content1.ani .ciDownloadList .ciDownloadItem:nth-child(2) { --delay: 6; }
.m113 .sec1 .container3 .content1.inView .ciDownloadList .ciDownloadItem {
	opacity: 1;
	transform: translateY(0);
}

.m113 .sec2 .colorSystemContent1 .colorSystemList.ani .colorSystemItem .colorMainBox .colorSpec span {
	display: block;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--delay) * 0.25s);
}

.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem.ani .colorMainBox .colorSpec span {
	display: block;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--delay) * 0.25s);
}
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem.ani .colorMainBox .colorSpec span:nth-child(1) { --delay: 0; }
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem.ani .colorMainBox .colorSpec span:nth-child(2) { --delay: 1; }
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem.ani .colorMainBox .colorSpec span:nth-child(3) { --delay: 2; }
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem.ani .colorMainBox .colorSpec span:nth-child(4) { --delay: 3; }
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem.inView .colorMainBox .colorSpec span {
	opacity: 1;
	transform: translateY(0);
}

.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem.ani .colorSubBox {
	background-size: 100% 0, 100% 0, 100% 0;
	animation: none;
}
.m113 .sec2 .colorSystemContent1 .colorSystemList .colorSystemItem.inView .colorSubBox {
	animation: m113ColorSubBars 0.9s ease forwards;
}
@keyframes m113ColorSubBars {
	0%   { background-size: 100% 0, 100% 0, 100% 0; }
	33%  { background-size: 100% calc(150px / 3), 100% 0, 100% 0; }
	66%  { background-size: 100% calc(150px / 3), 100% calc(150px / 3), 100% 0; }
	100% { background-size: 100% calc(150px / 3), 100% calc(150px / 3), 100% calc(150px / 3); }
}
.m13 .sec2 .container1 .worldMapArea.ani .worldMapObject {
	opacity: 0;
	transition: opacity 0.6s ease;
}
.m13 .sec2 .container1 .worldMapArea.inView .worldMapObject {
	opacity: 1;
}
.m13 .sec2 .container1 .worldMapArea.ani .mapPinList .mapPinItem {
	opacity: 0;
	transform: translate(-50%, calc(-100% + 10px));
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(0.3s + var(--delay, 0) * 0.4s);
}
.m13 .sec2 .container1 .worldMapArea.ani .mapPinList .mapPinItem.labelPosBottom {
	transform: translate(-50%, 10px);
}
.m13 .sec2 .container1 .worldMapArea.ani .mapPinList .mapPinItem:nth-child(1) { --delay: 0; }
.m13 .sec2 .container1 .worldMapArea.ani .mapPinList .mapPinItem:nth-child(2),
.m13 .sec2 .container1 .worldMapArea.ani .mapPinList .mapPinItem:nth-child(3) { --delay: 0.4; }
.m13 .sec2 .container1 .worldMapArea.ani .mapPinList .mapPinItem:nth-child(4) { --delay: 0.8; }
.m13 .sec2 .container1 .worldMapArea.ani .mapPinList .mapPinItem:nth-child(4) ~ .mapPinItem { --delay: 1.2; }
.m13 .sec2 .container1 .worldMapArea.inView .mapPinList .mapPinItem {
	opacity: 1;
	transform: translate(-50%, -100%);
}
.m13 .sec2 .container1 .worldMapArea.inView .mapPinList .mapPinItem.labelPosBottom {
	transform: translate(-50%, 0);
}

.m21 .sec1 .container1.ani .titleArea .subTitle,
.m21 .sec1 .container1.ani .titleArea .containerTitle {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m21 .sec1 .container1.ani .textArea .contentText {
	opacity: 0;
	transform: translateX(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m21 .sec1 .container1.ani .titleArea .containerTitle  {
	--delay: 0.5;
}
.m21 .sec1 .container1.ani .textArea .contentText {
	--delay: 1;
}
.m21 .sec1 .container1.inView .titleArea .subTitle,
.m21 .sec1 .container1.inView .titleArea .containerTitle {
	opacity: 1;
	transform: translateY(0);
}
.m21 .sec1 .container1.inView .textArea .contentText {
	opacity: 1;
	transform: translateX(0);
}

.m31 .sec1 .container1.ani .contentBg {
	clip-path: inset(0 40% 0 40%);
	transition: clip-path 0.4s ease;
}
.m31 .sec1 .container1.ani .content1 .contentTitle {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m31 .sec1 .container1.ani .content1 .contentText {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m31 .sec1 .container1.ani .content1 .contentTitle{ --delay: 2; }
.m31 .sec1 .container1.ani .content1 .contentText:nth-child(2) { --delay: 3; }

.m31 .sec1 .container1.inView .contentBg {
	clip-path: inset(0 0 0 0);
}
.m31 .sec1 .container1.inView .content1 .contentTitle,
.m31 .sec1 .container1.inView .content1 .contentText {
	opacity: 1;
	transform: translateY(0);
}
.m31 .sec2 .container2.ani .content1 .contentTextList,
.m31 .sec2 .container2.ani .content1 .contentControl {
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m31 .sec2 .container2.ani .content2  {
	opacity: 0;
	transform: translateX(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m31 .sec2 .container2.ani .content1 .contentTextList { --delay: 0; }
.m31 .sec2 .container2.ani .content1 .contentControl { --delay: 0.5; }
.m31 .sec2 .container2.inView .content1 .contentTextList,
.m31 .sec2 .container2.inView .content1 .contentControl,
.m31 .sec2 .container2.inView .content2 {
	opacity: 1;
	transform: translateX(0);
}
.m32 .sec1 .container1 .containerTextArea.ani .containerTitle,
.m32 .sec1 .container1 .containerTextArea.ani .containerText,
.m32 .sec2 .container1 .containerTextArea.ani .containerTitle,
.m32 .sec2 .container1 .containerTextArea.ani .containerText {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m32 .sec1 .container1 .containerTextArea.ani .containerTitle,
.m32 .sec2 .container1 .containerTextArea.ani .containerTitle { --delay: 0; }
.m32 .sec1 .container1 .containerTextArea.ani .containerText,
.m32 .sec2 .container1 .containerTextArea.ani .containerText { --delay: 1; }
.m32 .sec1 .container1 .containerTextArea.inView .containerTitle,
.m32 .sec1 .container1 .containerTextArea.inView .containerText,
.m32 .sec2 .container1 .containerTextArea.inView .containerTitle,
.m32 .sec2 .container1 .containerTextArea.inView .containerText {
	opacity: 1;
	transform: translateY(0);
}
.m32 .sec2 .container1 .containerTextArea.ani + .content {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m32 .sec2 .container1 .containerTextArea.ani + .content { --delay: 2; }
.m32 .sec2 .container1 .containerTextArea.inView + .content {
	opacity: 1;
	transform: translateY(0);
}
.m33 .sec1 .container1 .content1 .containerTextArea.ani .containerTitle {		opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m33 .sec1 .container1 .content1 .containerTextArea.ani .containerTitle { --delay: 0; }
.m33 .sec1 .container1 .content1 .containerTextArea.inView .containerTitle{
	opacity: 1;
	transform: translateY(0);
}
.m33 .sec2 .container1 .containerTextArea.ani .containerTitle,
.m33 .sec2 .container1 .containerTextArea.ani .containerText {		opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m33 .sec2 .container1 .containerTextArea.inView .containerTitle { --delay: 0; }
.m33 .sec2 .container1 .containerTextArea.inView .containerText { --delay: 1; }
.m33 .sec2 .container1 .containerTextArea.inView .containerTitle,
.m33 .sec2 .container1 .containerTextArea.inView .containerText {
	opacity: 1;
	transform: translateY(0);
}
.m33 .sec2 .container1 .content1 .isoCardList.ani {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m33 .sec2 .container1 .content1 .isoCardList.ani { --delay: 2; }
.m33 .sec2 .container1 .content1 .isoCardList.inView {
	opacity: 1;
	transform: translateY(0);
}
.pn41.ani ~ .m41 .sec1 .container1 .content1 .swiperBg {
	width: 0%;
	transition: width 0.4s ease 0.2s;
}
.pn41.inView ~ .m41 .sec1 .container1 .content1 .swiperBg {
	width: calc(75vw + -4%);
}
.pn41.ani ~ .m41 .sec1 .container1 .content1 .heroSwiperArea {
	opacity: 0;
	transform: translateY(10%);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: 0.5s
}
.pn41.inView ~ .m41 .sec1 .container1 .content1 .heroSwiperArea {
	opacity: 1;
	transform: translateY(0);
}
/* m41 formArea search ani */
.m41 .sec1 .container2 .bottomArea .formArea.ani .searchArea .searchForm .inputBox {
	padding: 0;
	background-color: transparent;
	width: 60px;
	margin-left: auto;
	margin-right: auto;
	justify-content: flex-end;
	transition: width 1s ease;
}
.m41 .sec1 .container2 .bottomArea .formArea.ani .searchArea .searchForm .inputBox input {
	width: 0;
	padding: 0;
	overflow: hidden;
	flex: 0;
	transition: all 0.4s ease 0.4s;
}
.m41 .sec1 .container2 .bottomArea .formArea.ani .searchArea .searchForm .inputBox input::placeholder {
	opacity: 0;
	transition: opacity 0.4s ease 0.7s;
}
.m41 .sec1 .container2 .bottomArea .formArea.inView .searchArea .searchForm .inputBox input::placeholder {
	opacity: 1;
}
.m41 .sec1 .container2 .bottomArea .formArea.inView .searchArea .searchForm .inputBox {
	padding-left: var(--m40);
	width: 100%;
	background-color: var(--color-F0F1F4);
}
.m41 .sec1 .container2 .bottomArea .formArea.inView .searchArea .searchForm .inputBox input {
	width: auto;
	flex: 1;
	padding-right: var(--m40);
}
/* m42 sec2 formArea search ani */
.m42 .sec2 .container1 .innerWrap .formArea.ani .searchArea .searchForm .inputBox {
	padding: 0;
	background-color: transparent;
	width: 60px;
	margin-left: auto;
	margin-right: auto;
	justify-content: flex-end;
	transition: width 1s ease;
}
.m42 .sec2 .container1 .innerWrap .formArea.ani .searchArea .searchForm .inputBox input {
	width: 0;
	padding: 0;
	overflow: hidden;
	flex: 0;
	transition: all 0.4s ease 0.4s;
}
.m42 .sec2 .container1 .innerWrap .formArea.ani .searchArea .searchForm .inputBox input::placeholder {
	opacity: 0;
	transition: opacity 0.4s ease 0.7s;
}
.m42 .sec2 .container1 .innerWrap .formArea.inView .searchArea .searchForm .inputBox input::placeholder {
	opacity: 1;
}
.m42 .sec2 .container1 .innerWrap .formArea.inView .searchArea .searchForm .inputBox {
	padding-left: var(--m40);
	width: 100%;
	background-color: var(--color-F0F1F4);
}
.m42 .sec2 .container1 .innerWrap .formArea.inView .searchArea .searchForm .inputBox input {
	width: auto;
	flex: 1;
	padding-right: var(--m40);
}
/* m41 tagList + content ani */
.m41 .sec1 .container2 .tagList.ani {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.m41 .sec1 .container2 .tagList.inView {
	opacity: 1;
	transform: translateY(0);
}
.m41 .sec1 .container2 .tagList.ani + .content {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s)
}
.m41 .sec1 .container2 .tagList.ani + .content { --delay: 1; }
.m41 .sec1 .container2 .tagList.inView + .content {
	opacity: 1;
	transform: translateY(0);
}
/* m42 sec2 순차 등장 (요소별 ani) */
.m42 .sec2 .container1 .innerWrap .containrTitleArea.ani .containerTitle,
.m42 .sec2 .container1 .innerWrap .containrTitleArea.ani .containerSubTitle,
.m42 .sec2 .container1 .innerWrap .containrTitleArea.ani .containerText,
.m42 .sec2 .container1 .innerWrap .formArea .tagList.ani,
.m42 .sec2 .container1 .innerWrap .formArea.ani ~ .content.contentArea {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--delay) * 0.4s);
}
.m42 .sec2 .container1 .innerWrap .containrTitleArea.ani .containerTitle { --delay: 0; }
.m42 .sec2 .container1 .innerWrap .containrTitleArea.ani .containerSubTitle { --delay: 0.5; }
.m42 .sec2 .container1 .innerWrap .containrTitleArea.ani .containerText { --delay: 1; }
.m42 .sec2 .container1 .innerWrap .formArea .tagList.ani { --delay: 2.5; }
.m42 .sec2 .container1 .innerWrap .formArea.ani ~ .content.contentArea { --delay: 3; }
.m42 .sec2 .container1 .innerWrap .containrTitleArea.ani.inView .containerTitle,
.m42 .sec2 .container1 .innerWrap .containrTitleArea.ani.inView .containerSubTitle,
.m42 .sec2 .container1 .innerWrap .containrTitleArea.ani.inView .containerText,
.m42 .sec2 .container1 .innerWrap .formArea .tagList.ani.inView,
.m42 .sec2 .container1 .innerWrap .formArea.ani.inView ~ .content.contentArea {
	opacity: 1;
	transform: translateY(0);
}