.s1 { }

.s1 .inner {min-height: var(--vh100);overflow: hidden;display: flex;align-items: center;justify-content: center; }
html.mo .s1 .inner{min-height: calc((var(--vh100) + 60px));}
html.kakaoWeb .s1 .inner{min-height: calc((var(--vh100) + 120px));}
html.safariWeb .s1 .inner{min-height: calc((var(--vh100) + 120px));}

.s1 .txtBx.n1 {position: relative;z-index: 2;text-align: center; }

.s1 .txtBx.n1 h2 {font-size: 30px;letter-spacing: -0.05em; }

.s1 .txtBx.n1 p {font-family: 'Mona Sans';display: block;font-size: 100px;font-weight: 700;letter-spacing: -0.025em; }

.s1 .bg {position: absolute; width: 552px; height: 552px; background-size: cover; }

.s1 .bg div {position: absolute;width: 100%;height: 100%; }

.s1 .bg div:nth-child(1) {z-index: 1;background-image: url(/asset/img/sub/about/ethical/s1_img.jpg);background-size: cover;filter: invert(1);background-position: center; }

.s1 .bg div:nth-child(2) {z-index: 3;backdrop-filter: invert(1); }

.s1 .txtBx.n2 {position: absolute;z-index: 1;text-align: center; }

.s1 .txtBx.n2 small {display: block;font-size: 35px;font-weight: 600;letter-spacing: -0.05em;line-height: 1.3;margin-bottom: calc(20/35*1em); }

.s1 .txtBx.n2 p {font-size: 40px;font-weight: 600;letter-spacing: -0.05em;line-height: calc(60/40); }

@media screen and (max-width:1600px) { }
@media screen and (max-width:1440px) {
	.s1 .txtBx.n1 p{font-size: calc(100/1440*100vw); }
}
@media screen and (max-width:1280px) { }
@media screen and (max-width:1024px) {

	.s1 .txtBx.n1 h2{font-size: max(calc(30/1024*100vw),16px); }
	.s1 .bg{width: calc(552/1024*100vw); height: calc(552/1024*100vw);}
	.s1 .txtBx.n2 small {font-size: max(calc(35/1024*100vw),14px);}
	.s1 .txtBx.n2 p {font-size: max(calc(40/1024*100vw),18px);}
}
@media screen and (max-width:820px) { }
@media screen and (max-width:500px) {
	.s1 .txtBx.n1 h2{font-size: max(calc(24/500*100vw),14px); margin-bottom: 0.8em;}
	.s1 .txtBx.n1 p{text-transform: uppercase; font-size: calc(50/500*100vw); line-height: 1.2;}


	.s1 .txtBx.n2 small {font-size: max(calc(28/500*100vw),14px);  margin-bottom: 1em;}
	.s1 .txtBx.n2 p {font-size: max(calc(24/500*100vw),14px);}
}
@media screen and (max-width:320px) { }




.s2 { }

.s2 .wrap {padding: 220px 0;box-sizing: border-box;display: flex;justify-content: space-between; }

.s2 .wrap>div { }

.s2 .wrap .left {
	display: flex; flex-direction: column; justify-content: space-between;
 }

.s2 .wrap .left .txtBx {}

.s2 .wrap .left .txtBx small {display: block;font-size: 25px;font-weight: 500;letter-spacing: -0.025em;margin-bottom: 1em; }

.s2 .wrap .left .txtBx h3 {font-family: 'Mona Sans';font-size: 80px;font-weight: 700;letter-spacing: -0.025em;line-height: calc(63/80); }

.s2 .wrap .left .bg {position: relative;width: 100%;max-width: 534px;border-radius: 10px;overflow: hidden; }

.s2 .wrap .left .bg::before {content: '';display: block;padding-bottom: calc(173/534*100%); }

.s2 .wrap .left .bg div {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-size: cover;background-position: center; }

.s2 .wrap .right {min-width: calc(622/35*1em);padding-top: 50px;box-sizing: border-box;font-size: 35px;font-weight: 600;line-height: calc(55/35);display: flex;flex-direction: column;gap: calc(80/35*1em); }

.s2 .wrap .right div { position: relative;  display: flex; align-items: center; justify-content: center;}

.s2 .wrap .right div span {
	display: inline;-webkit-background-clip: text !important;-webkit-text-fill-color: transparent;
	position: relative; z-index: 2;
}

@media screen and (max-width:1600px) {
	.s2 .wrap{padding: 120px 0;}
}
@media screen and (max-width:1440px) {
	.s2 .wrap .left .txtBx h3{font-size: calc(80/1440*100vw); }
	.s2 .wrap .right{font-size: calc(35/1440*100vw); }
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s2 .wrap .left .txtBx small{font-size: 20px; }
}
@media screen and (max-width:820px) {
	.s2 .wrap{padding: 100px 0;}
	.s2 .wrap .left .txtBx small{font-size: 18px; }
}
@media screen and (max-width:600px) {
	.s2 .wrap{padding: 80px 0; flex-direction: column;}
	.s2 .wrap .left{gap: 40px;}
	.s2 .wrap .left .txtBx h3{font-size: clamp(20px,calc(50/500*100vw),40px); }
	.s2 .wrap .left .bg{border-radius: 6px;}
	.s2 .wrap .right{padding-top: 40px; font-size: clamp(12px,calc(26/500*100vw),20px); }
	.s2 .wrap .right div{justify-content: flex-start;}
}
@media screen and (max-width:320px) {
	.s2 .wrap .left{gap: 30px;}
	.s2 .wrap .right{padding-top: 30px;}
}


.s3 {position: relative; }

.s3 .pinBx {position: relative; }

.s3 .bg {position: absolute;left: 0;top: 0;width: 100%;height: var(--vh100);overflow: hidden; }
html.mo .s3 .bg{height: calc((var(--vh100) + 60px));}
html.kakaoWeb .s3 .bg{height: calc((var(--vh100) + 120px));}
html.safariWeb .s3 .bg{height: calc((var(--vh100) + 120px));}


.s3 .bg div {width: 100%;height: 100%;background-size: cover;background-position: center;z-index: -1; }

.s3 .wrap {min-height: var(--vh100);display: flex;color: #fff;justify-content: space-between; }
html.mo .s3 .wrap{min-height: calc((var(--vh100) + 60px));}
html.kakaoWeb .s3 .wrap{min-height: calc((var(--vh100) + 120px));}
html.safariWeb .s3 .wrap{min-height: calc((var(--vh100) + 120px));}

.s3 .left {display: flex;align-items: center;height: var(--vh100); }
html.mo .s3 .left{height: calc((var(--vh100) + 60px));}
html.kakaoWeb .s3 .left{height: calc((var(--vh100) + 120px));}
html.safariWeb .s3 .left{height: calc((var(--vh100) + 120px));}

.s3 .left p {font-size: 25px;font-weight: 500;letter-spacing: -0.025em;margin-bottom: 13px; }

.s3 .left h3 {font-size: 50px;font-weight: 600;letter-spacing: -0.025em; }

.s3 .right {display: flex;flex-direction: column;gap: 90px;position: relative;min-width: 540px;padding-top: calc(var(--vh) * 90);padding-bottom: calc(var(--vh) * 100); }

.s3 .right .txtBx {transition-property: opacity, transform;transition-duration: 1s;opacity: 0.3; }

.s3 .right .txtBx.on {opacity: 1; }

.s3 .right .txtBx.none {opacity: 0; }

.s3 .right .txtBx h4 {font-size: 30px;font-weight: 700;letter-spacing: -0.025em;margin-bottom: calc(24/30*1em); }

.s3 .right .txtBx p {font-size: 24px;font-weight: 600;line-height: calc(40/24); }

@media screen and (max-width:1600px) {
	.s3 .left{width: 50%; justify-content: center;}
	.s3 .right{width: 50%; max-width: unset; padding-left: 6vw; box-sizing: border-box;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {

	.s3 .wrap{flex-direction: column; padding: 100px 0; min-height: unset; justify-content: flex-start;}
	.s3 .bg{height: 100% !important;}
	.s3 .left{height: auto !important; position: relative; width: 100%; text-align: center; margin-bottom: 60px;}
	.s3 .right{padding: 0; flex-direction: row; gap: 30px; flex-wrap: wrap; width: 100%; min-width: unset;}
	.s3 .right .txtBx{
		width: calc(50% - 15px); opacity: 1; transition: unset;
		border: 1px solid #ffffff42; box-sizing: border-box; border-radius: 10px;
		padding: 30px 14px; backdrop-filter: blur(14px);
	}

	.s3 .left p{font-size: 20px; }
	.s3 .left h3{font-size: 40px; }
	.s3 .right .txtBx h4{font-size: 24px; }
	.s3 .right .txtBx p{font-size: 18px; font-weight: 400;}
}
@media screen and (max-width:820px) {
	.s3 .wrap{padding: 80px 0;}
	.s3 .left{margin-bottom: 40px;}
	.s3 .right{gap: 10px;}
	.s3 .right .txtBx{width: calc(50% - 5px);}
	.s3 .right .txtBx p br{display: none;}
}
@media screen and (max-width:500px) {
	.s3 .left{margin-bottom: 40px;}
	.s3 .left p{font-size: 14px; }
	.s3 .left h3{font-size: clamp(20px,calc(50/500*100vw),40px);  }
	.s3 .right{flex-direction: column;}
	.s3 .right .txtBx{width: 100%;}
	.s3 .right .txtBx h4{font-size: 20px; }
	.s3 .right .txtBx p{font-size: 14px; max-width: 260px;}
}
@media screen and (max-width:320px) {}