.subtop:before{
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 10%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

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


#sub01{ padding:0; }
#sub01 > .sub_con{ max-width:1300px; width:100%; margin:0 auto; }

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


#sub01{ padding:0; }
#sub01 > .sub_con{ max-width:1300px; width:100%; margin:0 auto; }

.as_factory { margin: 0 0 120px 0; }
.as_factory .con { display:flex; gap: 120px; }
.as_factory:nth-child(2) .con { flex-direction: row-reverse; }
.as_factory .con .left { flex:1; }
.as_factory .con .left h2 { font-size: 44px;}
.as_factory .con .left h2 span { background-color: #FFCB02; }
.as_factory .con .left p { font-size: 20px; color:#666; line-height: 1.7; margin: 40px 0; word-break: keep-all; }
.as_factory .con .left p strong { color:#000; }
.as_factory .con .left .key {}
.as_factory .con .left .key ul { display: grid ; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.as_factory .con .left .key ul li { font-weight: 400; background:#FFFBEA; color: #3b3b3b; border-radius: 10px; font-size: 18px; padding: 14px 0; text-align: center; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;}
.as_factory .con .right { flex:1; overflow: hidden; }
.as_factory .con .right .stay_slider { position: relative; overflow: hidden; }
.as_factory .con .right .stay_slider .swiper-button-prev { left: 4%; }
.as_factory .con .right .stay_slider .swiper-button-next { right: 4%; }
.as_factory .con .right .stay_slider .stay_swiper .swiper-wrapper .swiper-slide .process_img { aspect-ratio: 6/4; font-size: 0; }
.as_factory .con .right .stay_slider .stay_swiper .swiper-wrapper .swiper-slide .process_img img { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; }
.as_factory .con .right .stay_slider .thumbs-slider { margin-top: 20px; padding-right: 4px; }
.as_factory .con .right .stay_slider .thumbs-slider .swiper-slide { width: auto; opacity: 0.6; cursor: pointer; transition: opacity 0.3s; font-size: 0; }
.as_factory .con .right .stay_slider .thumbs-slider .swiper-slide-thumb-active { opacity: 1; border: 2px solid var(--point-light); border-radius: 10px; overflow: hidden; }
.as_factory .con .right .stay_slider .thumbs-slider .swiper-slide img { display: block; width: 100%; height: 80px; object-fit: cover; border-radius: 9px; }

/* 글로벌 인증 세준 추가 251023 */
.as_global {}
.as_global .title {}
.as_global .title span { display: inline-block; font-size:16px; background:#FFCB02; font-weight: 500; padding: 10px 24px;  border-radius: 25px;}
.as_global .title h2 { font-size:34px; margin: 16px 0 6px; }
.as_global .title p { font-size:20px; color:#666; word-break: keep-all; }
.as_global .map { margin-top: 44px; }
.as_global .map .doc { background-image: url("./img/map_01.png"); background-size: cover; padding: 100px 0 120px; background-position: 50% 0; }
.as_global .map .doc ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.as_global .map .doc ul li { box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; background: #fff; border-radius: 20px; display: flex; justify-content: center; padding: 40px 40px 26px; }
.as_global .map .doc ul li .con { display: flex; flex-direction: column; align-items: center; }
.as_global .map .doc ul li .con img { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; }
.as_global .map .doc ul li .con h2 { font-size: 23px; margin-top: 14px; }
.as_global .map .doc ul li .con p { font-size: 17px; color:#666;}


@media all and (max-width:1400px) {

}

@media all and (max-width:1200px) {
	.as_factory .con { gap:80px; }
	.as_factory .con .left h2 { font-size: 34px; }
	.as_factory .con .left p { margin: 25px 0 30px; }
	.as_global .map .doc ul li .con h2 { font-size: 22px;}
	.as_global .map .doc ul li { padding: 34px 24px 26px; }
	.as_global .title h2 { font-size: 32px; }
}

@media all and (max-width:1024px) {
	.as_factory .con { gap:60px; }
	.as_factory .con .left .key ul { gap:16px; }
	.as_factory .con .left p {font-size: 18px;}
	.as_global .map .doc ul { gap: 20px; }
	.as_global .map .doc ul li {padding: 24px 20px 26px;}
}

@media all and (max-width:896px) {
	.as_factory { margin: 0 0 80px 0; }
	.as_factory .con  { flex-direction: column; }
	.as_factory:nth-child(2) .con { flex-direction: column; }
	.no_br {display: none;}
	.as_global .map .doc { padding: 50px 0 60px; }
	.as_global .map .doc ul { grid-template-columns: repeat(2, 1fr); gap: 80px; width: 80%; margin: 0 auto; }
	.as_global .title h2 { font-size: 28px; }
	.as_global .title p { font-size: 19px;}
}

@media all and (max-width:767px) {
	.as_factory .con .left h2 { font-size: 30px; }
	.as_factory .con { gap: 35px; }
	.as_global .map .doc ul { gap: 50px; width: 90%; }
	.as_global .title h2 {font-size: 26px;}
	.as_global .title p { font-size: 18px;}
	.as_global .title span { font-size: 15px; padding: 8px 20px; }
}

@media all and (max-width:600px) {
	.as_factory .con .left h2 { font-size: 27px; }
	.as_factory .con .left p { font-size: 17px; }
	.as_factory .con .left .key ul li { font-size: 16px; padding: 12px 0; }
	.as_global .map .doc ul li .con h2 { font-size: 20px;}
	.as_global .map .doc ul li .con p {font-size: 16px;}
	.as_global .map .doc ul { gap: 22px; width: 95%; }
	.as_global .title h2 {font-size: 24px;}
	.as_global .title p { font-size: 17px;}
	.as_global .map { margin-top: 20px; }
}

@media all and (max-width:480px) {
	.as_global .map .doc ul { gap: 15px; width: 98%; }
	.as_global .map .doc ul li { padding: 24px 12px 26px; }
	.as_global .title h2 {font-size: 22px;}
	.as_global .title p { font-size: 16px;}
}



.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);
	}
}