.titleBx {padding-top: 130px;padding-bottom: 80px; }
h2 {font-size: 50px;font-weight: 600;letter-spacing: -0.03em;text-align: center;display: flex;align-items: center;justify-content: center;gap: 0.25em;margin-bottom: 1em; }
h2 em {color: var(--orange); }
h2 p { }
._tabBx { }
._tabBx .inner { }
._tabBx .inner a { }
@media screen and (max-width:1600px) { }
@media screen and (max-width:1440px) { }
@media screen and (max-width:1280px) {
	h2 {font-size: 40px; }
}
@media screen and (max-width:1024px) { }
@media screen and (max-width:820px) {
	h2 {font-size: 32px; }
}
@media screen and (max-width:500px) {
	h2 {font-size: 26px; }
}
@media screen and (max-width:320px) { }

/* 컨텐츠 */
.esg_direction .fullpage {height: var(--vh100);width: 100%;position: relative; }
.esg_direction .fullpage>.wrap {position: absolute;z-index: 100;top: 50%;left: 50%; transform: translate(-50%,-50%); }
.esg_direction .fullpage .navi {display: flex;flex-direction: column;align-items: flex-end;justify-content: center;gap: 20px; }
.esg_direction .fullpage .navi div {font-family: 'Mona Sans';padding-right: 20px;font-size: 20px;font-weight: 600;letter-spacing: -0.05em;text-align: right;box-sizing: border-box;color: rgba(255, 255, 255, 0.5);cursor: pointer;position: relative;transition: color 0.5s; }
.esg_direction .fullpage .navi div:hover {color: #fff; }
.esg_direction .fullpage .navi div::before {content: '';display: block;position: absolute;right: 0;top: calc(50% - 4px);width: 8px;height: 8px;border-radius: 50%;background-color: #fff;transform: scale(0);transition: transform 0.5s; }

.esg_direction .fullpage .navi.step01 div:nth-child(1){color: #fff; }
.esg_direction .fullpage .navi.step01 div:nth-child(1)::before{transform: scale(1);}

.esg_direction .fullpage .navi.step02 div:nth-child(1){color: rgba(255, 255, 255, 0.5);}
.esg_direction .fullpage .navi.step02 div:nth-child(1)::before{transform: scale(0);}
.esg_direction .fullpage .navi.step02 div:nth-child(2){color: #fff; }
.esg_direction .fullpage .navi.step02 div:nth-child(2)::before{transform: scale(1);}

.esg_direction .fullpage .navi.step03 div:nth-child(1){color: rgba(255, 255, 255, 0.5);}
.esg_direction .fullpage .navi.step03 div:nth-child(1)::before{transform: scale(0);}
.esg_direction .fullpage .navi.step03 div:nth-child(2){color: rgba(255, 255, 255, 0.5);}
.esg_direction .fullpage .navi.step03 div:nth-child(2)::before{transform: scale(0);}
.esg_direction .fullpage .navi.step03 div:nth-child(3){color: #fff; }
.esg_direction .fullpage .navi.step03 div:nth-child(3)::before{transform: scale(1);}

.esg_direction .contBx {position: relative;width: 100%;height: 100%; }
.esg_direction .contBx .cont {position: absolute;left: 0;top: 0;width: 100%;height: 100%; }
.esg_direction .contBx .cont:nth-child(1) {z-index: 1; }
.esg_direction .contBx .cont:nth-child(2) {z-index: 2; }
.esg_direction .contBx .cont:nth-child(3) {z-index: 3; }
.esg_direction .contBx .cont .bg {position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden; }
.esg_direction .contBx .cont .bg div {height: 100%;width: 100%;background-size: cover; }
.esg_direction .contBx .cont .wrap {position: relative;z-index: 2;color: #fff;height: 100%;display: flex;flex-direction: column;align-items: flex-start;justify-content: center; }
.esg_direction .contBx .cont .txtBx {font-size: 1px;font-weight: 600;margin-bottom: 100em; }
.esg_direction .contBx .cont .txtBx h3 {font-size: 60em;letter-spacing: -0.05em;line-height: 1.3;margin-bottom: 1em; }
.esg_direction .contBx .cont .txtBx h3 div {overflow: hidden; }
.esg_direction .contBx .cont .txtBx h3 div p { }
.esg_direction .contBx .cont .txtBx h3 div.n1 {font-size: calc(30/60*1em);letter-spacing: -0.04em;margin-bottom: 10px;padding-left: 0.1em;box-sizing: border-box; }
.esg_direction .contBx .cont .txtBx h3 div.n1 p { }
.esg_direction .contBx .cont .txtBx h3 div.n2 {font-family: 'Mona Sans'; }
.esg_direction .contBx .cont .txtBx h3 div.n2 p { }
.esg_direction .contBx .cont .txtBx>p {font-size: max(25em, 14px);letter-spacing: -0.04em;line-height: calc(50/25); }
.esg_direction .contBx .cont .tagBx {color: #c2c2c2;letter-spacing: -0.04em;display: flex;flex-wrap: wrap;gap: 10px;max-width: 1100px; }
.esg_direction .contBx .cont .tagBx div {padding: 0 10px;box-sizing: border-box;border-radius: 100px;border: 1px solid #c2c2c2;min-width: calc(202/16*1em);height: calc(48/16*1em);display: flex;align-items: center;justify-content: center; }
.esg_direction .contBx .cont .tagBx div p { }

/* 모션 셋팅 */
.esg_direction .contBx .cont:not(.n1) {opacity: 0; }
.esg_direction .contBx .cont {pointer-events: none; }
.esg_direction .contBx .cont .txtBx h3 div p {transform: translateY(110%); }
.esg_direction .contBx .cont .txtBx>p {opacity: 0;transform: translateY(80px); }
.esg_direction .contBx .cont .tagBx div {opacity: 0;transform: translateY(80px); }
.esg_direction .contBx .cont .bg div {filter: blur(10px);transform: scale(1.3); }
.esg_direction .fullpage .navi div {opacity: 0;transform: translateY(80px); }
/* 트렌지션 셋팅 */
.esg_direction .contBx .cont {transition: opacity 1s; }
.esg_direction .contBx .cont .txtBx h3 div p {transition: transform 1s; }
.esg_direction .contBx .cont .txtBx>p {transition: opacity 1s, transform 1s; }
.esg_direction .contBx .cont .tagBx div {transition: opacity 1s, transform 1s; }
.esg_direction .contBx .cont .bg div {transition: filter 5s, transform 5s; }
.esg_direction .fullpage .navi div {transition: opacity 1s, transform 1s; }
.esg_direction .fullpage .navi div:nth-child(2) {transition-delay: 0.1s; }
.esg_direction .fullpage .navi div:nth-child(3) {transition-delay: 0.2s; }
/* 작동 셋팅 */
.esg_direction .contBx .cont.on {opacity: 1;pointer-events: auto; }
.esg_direction .contBx .cont.on .txtBx h3 div p {transform: translateY(0); }
.esg_direction .contBx .cont.on .txtBx>p {opacity: 1;transform: translateY(0);transition-delay: 0.4s; }
.esg_direction .contBx .cont.on .tagBx div {opacity: 1;transform: translateY(0); }
.esg_direction .contBx .cont.on .tagBx div:nth-child(1) {transition-delay: calc(0.1s * 1 + 0.4s); }
.esg_direction .contBx .cont.on .tagBx div:nth-child(2) {transition-delay: calc(0.1s * 2 + 0.4s); }
.esg_direction .contBx .cont.on .tagBx div:nth-child(3) {transition-delay: calc(0.1s * 3 + 0.4s); }
.esg_direction .contBx .cont.on .tagBx div:nth-child(4) {transition-delay: calc(0.1s * 4 + 0.4s); }
.esg_direction .contBx .cont.on .tagBx div:nth-child(5) {transition-delay: calc(0.1s * 5 + 0.4s); }
.esg_direction .contBx .cont.on .tagBx div:nth-child(6) {transition-delay: calc(0.1s * 6 + 0.4s); }
.esg_direction .contBx .cont.on .tagBx div:nth-child(7) {transition-delay: calc(0.1s * 7 + 0.4s); }
.esg_direction .contBx .cont.on .tagBx div:nth-child(8) {transition-delay: calc(0.1s * 8 + 0.4s); }
.esg_direction .contBx .cont.on .tagBx div:nth-child(9) {transition-delay: calc(0.1s * 9 + 0.4s); }
.esg_direction .contBx .cont.on .tagBx div:nth-child(10) {transition-delay: calc(0.1s * 10 + 0.4s); }
.esg_direction .contBx .cont.on .bg div {filter: blur(0);transform: scale(1); }
.esg_direction .fullpage .navi.on div {opacity: 1;transform: translateY(0); }

@media screen and (max-width:1600px) {
	.esg_direction .contBx .cont .txtBx{font-size: 0.8px; }
	.esg_direction .contBx .cont .tagBx{font-size: 15px; }
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.esg_direction .contBx .cont .txtBx{font-size: 0.7px; }
	.esg_direction .contBx .cont .tagBx{font-size: 14px; }
}
@media screen and (max-width:1024px) {
	.esg_direction .fullpage>.wrap{top: 25%;}
	.esg_direction .fullpage .navi{gap: 10px;}
	.esg_direction .fullpage .navi div{font-size: 16px; }
}
@media screen and (max-width:820px) {
	.esg_direction .fullpage{height: auto;}
	.esg_direction .contBx{display: flex; flex-direction: column; gap: 5vw; max-width: 90%; margin: 0 auto; padding-bottom: 80px;}
	.esg_direction .contBx .cont{position: relative; padding: 60px 0; box-sizing: border-box; border-radius: 8px; overflow: hidden;}
	.esg_direction .contBx .cont .tagBx div{min-width: unset; padding: 0 14px; height: 2.2em;}
	.esg_direction .contBx .cont .bg{filter: brightness(0.5);}
	.esg_direction .contBx .cont .bg div{background-position: 80% center;}

	.esg_direction .fullpage .navi{display: none;}
}
@media screen and (max-width:500px) {
	.titleBx{padding-top: 80px; padding-bottom: 60px;}
	.esg_direction .contBx .cont .txtBx{font-size: 0.6px; }
	.esg_direction .fullpage .navi div{font-size: 14px; }
}
@media screen and (max-width:320px) {}