.sub_wrap, .sub_wrap *{ box-sizing:border-box; }
.no_br {  }

/* 인사말 세준 추가 251021 */

.as_greetins { display: flex; gap: 100px; margin: 0 0 140px; }
.as_greetins .left { flex: 6; }
.as_greetins .left h2 { position:relative; display: inline-block; font-size:40px; font-weight:600; }
.as_greetins .left h2:after { content: ''; position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 4px; width: 95%; height: 12px; background-color:#ffcb02; border-radius: 10px; z-index: -1; }
.as_greetins .left p { font-size:20px; color:#666; word-break: keep-all; margin-top: 20px; padding-left: 24px; }
.as_greetins .left p strong { color:#000; }
.as_greetins .right { flex: 4; display: flex ; flex-direction: column; align-items: center; padding-right:10%;}
.as_greetins .right img {}
.as_greetins .right .sign { display: flex; align-items: center; }
.as_greetins .right .sign div { flex: 1; }
.as_greetins .right .sign div p { font-size:24px; font-weight:500; }
.as_greetins .right .sign div img {width: 90%;}

/* 어바웃 세준 추가 251021 */
.as_about { margin-bottom:140px; }
.as_about h2 { font-size:64px; font-weight: 800; text-align: center; margin: 40px 0 60px; }
.as_about .score {}
.as_about .score ul { display: grid ; grid-template-columns: repeat(6, 1fr); gap: 100px; }
.as_about .score ul li { display: flex ; flex-direction: column; align-items: center; }
.as_about .score ul li .pic { background: #F2F2F2; border-radius: 50%; display: flex ; justify-content: center; align-items: center; width: 100%; aspect-ratio: 1 / 1; }
.as_about .score ul li .pic img { width: 40%; }
.as_about .score ul li h4 { font-size: 30px; margin: 20px 0 4px; transition: all 0.1s ease; }
.as_about .score ul li p { font-size:18px; color: #666;}

/* esg 경영 세준 추가 251022 */
.as_esg { margin:0 0 140px;}
.as_esg .con { margin: 100px 0 0; }
.as_esg .con ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 240px; }
.as_esg .con ul li {}
.as_esg .con ul li .pa { padding: 10px; position: relative; }
.as_esg .con ul li:not(:last-child) .pa::after{ content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 120%; border-top: 2px dashed #39BCB9; left: 100%; }
.as_esg .con ul li .pa::after { right: -240px; }
.as_esg .con ul li:nth-child(2) .pa::after { border-top: 2px dashed #CEDC2A; }
.as_esg .con ul li .pa .circle { position: relative; border-radius: 50%; background: #fff; aspect-ratio: 1 / 1; width: 100%; height: 100%; display: flex ; justify-content: center; flex-direction: column; align-items: center; gap: 14px; }
.as_esg .con ul li .pa .circle:before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background: linear-gradient(to right, #35BBBD, #CEDC2A); border-radius: 50%; z-index: -1; }
.as_esg .con ul li .pa .circle .icon { text-align: center; }
.as_esg .con ul li .pa .circle .icon img { width:40%; }
.as_esg .con ul li .pa .circle .text {}
.as_esg .con ul li .pa .circle .text p { text-align: center; font-size: 24px; font-weight: 500; line-height: 1.2; }
.as_esg .con ul li h2 { font-size:28px; margin: 34px 0 12px; }
.as_esg .con ul li span { display: block; font-size:20px; color:#666; line-height: 1.6; word-break: keep-all; }

/* odm 세준 추가 251022 */
.as_odm {}
.as_odm .sub01_txt h4 { font-size: 32px; }
.as_odm .info { display: grid ; grid-template-columns: repeat(2, 1fr); gap: 120px; margin: 40px 0 0; }
.as_odm .info .left {}
.as_odm .info .left h2 { font-size: 24px; color: #FF6200; font-weight: 500; line-height: 1.3; }
.as_odm .info .left h2 strong { font-size: 36px; font-weight: 800; }
.as_odm .info .left p { font-size: 20px; color: #666; line-height: 1.6; margin: 35px 0 45px; word-break: keep-all; }
.as_odm .info .left p strong { color:#000; }
.as_odm .info .left img {}
.as_odm .info .right {}
.as_odm .info .right img { width: 100%; height: 100%; object-fit: cover; }

#sub01{ }
.sub01_img{ width:100%; padding-top:40%; min-height:400px; margin-bottom:50px; box-shadow:3px 3px 7px 0 rgba(0,0,0,0.3); background-color:#333; /*background-image:url(../img/main/02-01.jpg);*/ background-position:center; background-size:cover; background-repeat:no-repeat; }

.sub01_vid{ display:block; width:100%; margin-bottom:60px; box-shadow:5px 5px 8px 0 rgba(0,0,0,0.3); }

.sub01_txt{ word-break:keep-all; }

.sub01_slo{ margin-bottom:30px; display:-webkit-box; display:-ms-flexbox; display:flex; }
.sub01_slo > h2{ font-size:40px; font-weight:300; color:#333; line-height:1.3em; white-space:nowrap; padding-right:30px; }
.sub01_slo > h2 > strong{ font-weight:900; }
.sub01_slo h4{ font-size:30px; font-weight:700; color:#333; line-height:1em; margin-bottom:15px; }
.sub01_slo p{ font-size:24px; font-weight:300; color:#333; line-height:1.5em; }
.sub01_slo p > strong{ font-weight:700; }

.sub01_txt > h3{ overflow:hidden; z-index:1; font-family:'score'; font-size:40px; font-weight:300; color:#333; line-height:1em; margin-bottom:30px; }
.sub01_txt > h3 > span{ position:relative; z-index:1; font-weight:700; color:#ffcb02; text-shadow:1px 1px 0 #aaaaaa; padding-right:30px; }
.sub01_txt > h3 > span:after{ content:''; position:absolute; top:50%; left:100%; right:-5000px; height:1px; background-color:#333; }
.sub01_txt > p{ font-size:18px; font-weight:400; color:#666; line-height:1.7em; }
.sub01_txt > p strong { color: #000000; font-weight: 500; }

@media all and (max-width:1400px) {
	.as_about h2 { font-size: 48px; }
	.as_about .score ul	{ gap:70px }
	.as_about .score ul li h4 { font-size: 28px; }
	.as_esg .con ul { gap: 180px; }
	.as_odm .info { gap:110px; }
}

@media all and (max-width:1300px) {
	.as_esg .con ul { gap: 150px; }
}

@media all and (max-width:1200px) {
	.no_br { display:none; }
	.as_greetins .left h2 { font-size: 34px; }
	.as_greetins .right { padding-right: 5%; }
	.as_greetins .right .sign div p { font-size: 20px; }
	.as_about .score ul { gap: 40px; }
	.as_about .score ul li h4 { font-size: 26px; }
	.as_esg .con ul li .pa .circle .text p { font-size: 22px; }
	.as_esg .con ul { gap: 100px; }
	.as_esg .con ul li h2 { font-size: 24px;}
	.as_esg .con ul li span { font-size: 18px;}
	.as_odm .sub01_txt h4 { font-size: 28px;}
	.as_odm .info .left h2 { font-size: 22px; }
	.as_odm .info .left h2 strong { font-size: 30px; }
	.as_odm .info .left p { font-size: 19px;}
	.as_odm .info { gap:60px; }
}

@media all and (max-width:1024px) {
	.as_greetins { gap:60px; }
	.as_greetins .right { padding-right:0; }
	.as_greetins .left h2 { font-size: 28px; }
	.as_greetins .left p { font-size:19px; }
	.as_about .score ul { gap: 22px; }
	.as_about .score ul li h4 { font-size: 24px; }
	.as_about .score ul li p { font-size: 17px; }
	.as_esg .con ul { gap: 80px; }
	.as_esg .con ul li h2 { font-size: 23px;}
	.as_esg .con ul li span { font-size: 17px;}
	.as_esg .con { margin: 90px 0 0; }
	.as_odm .sub01_txt h4 { font-size: 25px; }
}

@media all and (max-width:896px) {
	.as_greetins { margin: 100px 0 100px; }
	.as_greetins .left h2 { font-size: 25px;}
	.as_greetins .left p { font-size:18px; }
	.as_greetins .right .sign { flex-direction: column; }
	.as_about .score ul { grid-template-columns: repeat(3, 1fr); gap: 100px; }
	.as_esg .con ul { gap: 25px; }
	.as_esg .con ul li .pa .circle .text p { font-size: 19px;}
	.as_esg .con ul li .pa::after { display: none;}
	.as_about { margin-bottom: 100px; }
	.as_esg .con { margin: 80px 0 0; }
	.as_odm .info {grid-template-columns: repeat(1, 1fr); margin: 20px 0 0;}
	.as_odm .info .right { display: none;}
	.as_odm .info .left p { margin: 16px 0 30px; }
}

@media(max-width:767px){
	.sub01_slo{ flex-direction:column; }
	.sub01_slo > h2{ padding-right:0; margin-bottom:10px; }
	.sub01_slo > h2 > br{ display:none; }
	.sub01_slo h4{ display:none; }
	.sub01_slo p{ font-size:18px; }
	.as_greetins { flex-direction: column; margin: 80px 0 90px; gap: 10px; align-items: flex-end; }
	.as_greetins .left h2 { font-size: 28px; }
	.as_greetins .left p { padding-left: 0;}
	.as_greetins .right { width:50%; }
	.as_greetins .right .sign {flex-direction: row;}
	.as_greetins .right .sign div p { font-size: 18px; }
	.as_about h2 { font-size: 40px; }
	.as_about .score ul { gap:70px; }
	.as_esg .con ul { grid-template-columns: repeat(2, 1fr); }
	.as_esg .con ul li .pa { width: 88%; margin: 0 auto; }
	.as_about { margin-bottom: 80px; }
	.as_esg .con { margin: 60px 0 0; }
	.as_esg .con ul li h2 { margin: 15px 0 12px; }
	.as_esg .con ul li { margin-bottom: 20px; }
	.as_esg { margin: 0 0 100px; }
}
@media(max-width:600px){
	.sub01_img{ min-height:300px; }
	.sub01_txt > h3{ font-size:29px; margin-bottom:20px; }
	.sub01_txt > h3 > span:after{ content:none; }
	.sub01_txt > p{ font-size:15px; }
	.as_greetins { margin: 60px 0 70px; }
	.as_greetins .left h2 { font-size: 24px;}
	.as_greetins .left p { font-size: 16px; }
	.as_greetins .right .sign { flex-direction: column; }
	.as_greetins .right .sign div img { display: none; }
	.as_about .score ul { gap:40px; }
	.as_about .score ul li h4 { font-size: 22px;}
	.as_about .score ul li p { font-size: 16px;}
	.as_about { margin-bottom: 60px; }
	.as_esg .con { margin: 50px 0 0; }
	.as_esg .con ul { gap: 15px; }
	.as_esg .con ul li .pa .circle { gap: 10px; }
	.as_esg .con ul li h2 { font-size: 21px; }
	.as_esg .con ul li span { font-size: 16px; }
	.as_esg .con ul li .pa { width:100%; }
	.as_about h2 { font-size: 32px; margin: 32px 0 44px; }
	.as_odm .sub01_txt h4 { font-size: 22px; }
	.as_odm .info .left h2 { font-size: 18px; word-break: keep-all; }
	.as_odm .info .left p { font-size: 17px; }
	.as_esg { margin: 0 0 80px; }
}

@media all and (max-width:480px) {
	.as_greetins .right { width: 60%; }
	.as_about .score ul { gap:20px; }
	.as_about .score ul li h4 { font-size: 20px;}
	.as_about .score ul li p { font-size: 16px;}
	.as_esg .con ul {max-width: 240px; margin: 0 auto; grid-template-columns: repeat(1, 1fr); }
	.as_esg { margin: 0 0 60px; }
	.as_esg .con ul li {text-align: center;}
}

.fadeInMoveLeft { opacity:0; }
.fadeInMoveLeft.active { animation: fadeInMoveLeft 1s ease-out forwards; }
.fadeInMoveRight { opacity:0; }
.fadeInMoveRight.active { animation: fadeInMoveRight 1s ease-out forwards; }
.fadeIn { opacity:0; }
.fadeIn.active { animation: fadeIn 1.1s ease-out forwards; }
.fadeUp { opacity:0; }
.fadeUp.active { animation: fadeUp 1.1s ease-out forwards; }
.fadeDown { opacity:0; }
.fadeDown.active { animation: fadeDown 1s ease-out forwards; }
.flipUp { opacity: 0; }
.flipUp.active { animation: flipUp 1s ease-out forwards; transform-style: preserve-3d; }
.flipUp.active:nth-child(1) { animation-delay: 0.2s; }
.flipUp.active:nth-child(2) { animation-delay: 0.4s; }
.flipUp.active:nth-child(3) { animation-delay: 0.6s; }
.flipUp.active:nth-child(4) { animation-delay: 0.8s; }
.flipUp.active:nth-child(5) { animation-delay: 0.2s; }
.flipUp.active:nth-child(6) { animation-delay: 0.4s; }
.flipUp.active:nth-child(7) { animation-delay: 0.6s; }
.flipUp.active:nth-child(8) { animation-delay: 0.8s; }
.scaleIn { opacity: 0; transform: scale(0.8); }
.scaleIn.active { animation: scaleIn 1s ease-out forwards; }
.scaleOut { opacity: 0; transform: scale(1.2); }
.scaleOut.active { animation: scaleOut 1s ease-out forwards; }
.rotateIn { opacity: 0; transform: rotate(180deg); }
.rotateIn.active { animation: rotateIn 1.2s ease-out forwards; }
.bounceUp { opacity: 0; transform: translateY(50px); }
.bounceUp.active { animation: bounceUp 1.2s ease-out forwards; }
.blurIn { opacity: 0; filter: blur(10px); }
.blurIn.active { animation: blurIn 1s ease-out forwards; }
.flipSide { opacity: 0; transform: rotateY(90deg); transform-style: preserve-3d; }
.flipSide.active { animation: flipSide 1s ease-out forwards; }

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes scaleOut {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes rotateIn {
    0% {
        opacity: 0;
        transform: rotate(180deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg);
    }
}
@keyframes bounceUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes blurIn {
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}
@keyframes flipSide {
    0% {
        opacity: 0;
        transform: rotateY(90deg);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

@keyframes fadeInMoveLeft {
    0% {
        opacity: 0;
        transform: translateX(30%);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeInMoveRight {
    0% {
        opacity: 0;
        transform: translateX(-30%);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translate3d(0px, 100px, 0px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
    }
}

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translate3d(0px, -100px, 0px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
    }
}

@keyframes flipUp {
    0%{
        opacity: 0;
        transform: rotateX(-90deg);
	}

    100% {
        opacity: 1;
        transform: rotateX(0deg);
	}
}