/* header start */
header{
    position: fixed;
    width:100%;
    height:100px;
    min-width:1400px;
    z-index: 999;
    top:0;
    left:0;
    transition: all .3s ease-in-out;
    /* background-color:#fff; */
    /* border-bottom:1px solid #ccc; */
}
header.on{
    position: fixed;
    width:100%;
    min-width:1400px;
    top:0;
    left:0;
    background-color: #fff;
    border-bottom:1px solid #ccc;
}
header .logo h1{
    position: absolute;
    width:80px;
    height:80px;
    top:10px;
    left:0;
    transition:all .3s ease-in-out;
    background: url(../img/logo_one.png) 50% 50% no-repeat;
    background-size: 80px;
    z-index: 9999;
}
header .logo h1.on{
    background: url(../img/logo_one.png) 50% 50% no-repeat;
    background-size: 80px;
}
header .logo h1 a{
    display: block;
    width:80px;
    height:80px;
}
header:hover{background-color: #fff; transition: all .3s ease-in-out;}
header:hover .logo h1{background: url(../img/logo_one.png) 50% 50% no-repeat; background-size:80px; transition:all .3s ease-in-out;}


.pos{position: relative;}
.bar{
    width:0;
    height: 3px;
    background-color: #2f6532;
    position: absolute;
    left: 0;
    bottom: 10px;
}
nav{
    width:100%;
    max-width:1400px;
    min-width:1400px;
    margin:0 auto;
    z-index: 999;
    position: relative;
}
.gnb{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:35px;
    padding-right:140px;
}
.gnb > li > .gnb_wrap > a.on{color:#333;}

.gnb > li > .gnb_wrap > a{
    color:#fff;
    font-size:20px;
    font-weight: 600;
    height:100px;
    line-height: 100px;
    position: relative;
    transition:all .3s ease-in-out;
}
.gnb > li > .gnb_wrap > a::after{content:'';
    display:block;
    width:0;
    height:2px;
    position: absolute;
    bottom:-10px;
    left:50%;
    background-color: #2f6532;
    transform: translateX(-50%);
    transition: all .3s ease-in-out;
}
header:hover .gnb li .gnb_wrap a{color:#333;}
header .gnb li .gnb_wrap a:hover{color:#2f6532;}
header .gnb .gnb_wrap a.active {color: #2f6532!important;}



header .tel{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:0;
}
header .tel a{
    display: inline-block;
    background-color: #e60013;
    padding:10px 20px;
    border-radius: 10px;
    color:#ffff;
    font-size:20px;
    font-weight: 600;
    overflow: hidden;
    position: relative;
    z-index: 0;
}
header .tel a::before{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width:0;
    height:100%;
    background-color: #1e4521;
    transition: all .3s ease-in-out;
    z-index: -1;
}
header .tel a:hover::before{width:100%;}


/* header end */

/* visual swiper start */
.visual{
    background: url(../img/visual/visual_bg.png) no-repeat 50% 50%;
    background-size: cover;
    width:100%;
    padding-top: 3vw;
    padding-bottom: 5vw;
    position: relative;
}

.visual .visual_title{
    margin-top:120px;
}
.visual .visual_title .visual_logo{
    width:140px;
    margin:0 auto;
}
.visual .visual_title h3{
    font-size:2.5vw;
    white-space: nowrap;
    color:#abd29b;
    text-align: center;
    font-family: 'GmarketSansLight';
}
.visual .visual_title h2{
    font-size:5vw;
    white-space: nowrap;
    color:#fff;
    text-align: center;
    font-family: 'GmarketSansBold';
    padding:-20px 0;
}


.visual .visual_slide{
    margin-top:60px;
    position: relative;
}
.visual .visual_slide .swiper {
    width: 100%;
    height: 100%;
}

.visual .visual_slide .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.visual .visual_slide .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual .visual_slide .visual_circle{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.visual .visual_slide .visual_circle img{
    width:28vw;
    animation: rotate 30s infinite linear;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


.visual .visual_text_left {
    position: absolute;
    top: 17%;
    left: 6%;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.visual .visual_text_right {
    position: absolute;
    top: 17%;
    right: 6%;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
}

.visual .visual_text_tt {
    width: fit-content;
    font-weight: 700;
    font-size: 3vw;
    position: relative;
    opacity: 1;  /* 모든 텍스트가 처음에 보이도록 설정 */
    transition: opacity 0.5s ease;  /* 서서히 나타나도록 설정 */
}

.visual .visual_text_tt01 {
    -webkit-text-stroke: 1px #abd29b;
    color: transparent;
    font-family: 'Noto Serif KR', serif; 
    font-weight: 800;
    z-index: 1;  /* 외곽선 텍스트는 아래쪽에 */
    padding:10px 0;
}

.visual .visual_text_tt02 {
    position: absolute;
    top: 0;
    left: 0;
    color: #abd29b;
    font-family: 'Noto Serif KR', serif; 
    font-weight: 800;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);  /* 처음엔 안 보이게 설정 */
    transition: all 0.6s ease;  /* clip-path 변화 애니메이션 */
    z-index: 2;  /* 채워지는 텍스트는 위에 위치 */
    padding:10px 0;
}

/* .main_change 클래스가 추가될 때 clip-path가 변하는 효과 */
.visual .visual_text_tt02.main_change {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
/* visual swiper end */


/* image_show_wrap 공통 */
section .image_show_wrap,
section .image_show_wrap2{
    position: relative;
    top: 0px;
    left: 0%;
    width: 100%;
}
section .image_show_wrap{overflow: hidden; animation-duration: 1.4s;}
section .image_show_wrap2{animation-duration: 1.4s;}

section .show_img01{animation-name: show_img01;}
@keyframes show_img01{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img02{animation-name: show_img02;}
@keyframes show_img02{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img03{animation-name: show_img03;}
@keyframes show_img03{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img04{animation-name: show_img04;}
@keyframes show_img04{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img05{animation-name: show_img05;}
@keyframes show_img05{
    0%{opacity: 0; transform: translate3d(0, 100%, 0);}
}
section .show_img06{animation-name: show_img06;}
@keyframes show_img06{
    0%{opacity: 0; transform: translate3d(0, -100%, 0);}
}
section .show_img07{animation-name: show_img07;}
@keyframes show_img07{
    0%{opacity: 0; transform: translate3d(0, -100%, 0);}
}
section .show_img08{animation-name: show_img08;}
@keyframes show_img08{
    0%{opacity: 0; transform: translate3d(0, 100%, 0);}
}
/* image_show_wrap 공통 */

/* image 확대 공통 */
.clip-animation {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    animation: clipExpand 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards;
}
@keyframes clipExpand {
    from {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}
/* image 확대 공통 */


/* 마우스 스크롤 이벤트 */
/* 초기 상태 */
.title_motion,
.text_motion,
.img_motion {
    opacity: 0;
    transition: all 0.7s ease-out;
}

/* 등장 애니메이션 (각자 다르게) */
.title_motion {
    transform: translateY(40px);
}
.title_motion.active {
    opacity: 1;
    transform: translateY(0);
}

.text_motion {
    transform: translateY(80px);
    transition-delay: 0.1s;
}
.text_motion.active {
    opacity: 1;
    transform: translateY(0);
}

.img_motion {
    transform: scale(0.8);
    transition-delay: 0.2s;
}
.img_motion.active {
    opacity: 1;
    transform: scale(1);
}

/* .reveal 해당 클래스 스크롤 감지 */

/* 마우스 스크롤 이벤트 */

/* ------------------------------------- section ------------------------------------- */
/* 공통 */
.sec_title_main {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    visibility: hidden;
}
.sec_title_main .title_wrap {
    text-align: center;
}
.sec_title_main .title_wrap .txt_span{
    display: inline-block;
    font-size:24px;
    color:#2f6532;
    margin:10px 10px 30px 10px;
    padding:20px 40px;
    border-radius: 50%;
    border:1px solid #2f6532;
    animation: txt-bounce 2s ease-in-out infinite alternate;
}
.sec_title_main .title_wrap .txt {
    margin: 0;
    font-size: 72px;
    font-weight: 800;
    color:#2f6532;
    text-shadow: 0 0.05em 0 #fffde6, 0 0.1em 0.1em rgba(70, 0, 35, 0.3), 0 0.4em 0.3em rgba(70, 0, 35, 0.1);
    -webkit-user-select: none;
    -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    animation: txt-bounce 2s ease-in-out infinite alternate;
}
@keyframes txt-bounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.07);  /* 원하는 크기로 조절 */
    }
    100% {
        transform: scale(1);
    }
}

.sec_title_main .title_wrap .txt .char {
    display: inline-block;           /* ★ 이거 반드시! */
    vertical-align: middle;          /* 또는 baseline */
    will-change: transform, font-weight, font-stretch;
    text-align: center;
}

/* 커서 손바닥 */
.sec_title_main .title_wrap .txt,
.sec_title_main .title_wrap .txt .char {cursor: grab;}
.sec_title_main .title_wrap .txt:active,
.sec_title_main .title_wrap .txt .char:active {cursor: grabbing;}
/* 커서 손바닥 */

.title_wrap .line_left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    left: -14%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
    opacity: 0;
    transition: all 1s ease-out;
}
.title_wrap .line_left.active{
    opacity: 1;
    transform: translateX(0%);
}

.title_wrap .line_right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    right: -14%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transform: translateX(50%);
    opacity: 0;
    transition: all 1s ease-out;
}
.title_wrap .line_right.active{
    opacity: 1;
    transform: translateX(0%);
}

.title_wrap .line{
    background-color: #2f6532;
    height: 0.1vw;
    width: 100%;
    margin: 0% 0% 0.4% 0%;
}

.sec_title_sub{
    transform: translateY(50%);
    opacity: 0;
    transition: all .5s ease-out;
}
.sec_title_sub.active{
    opacity: 1;
    transform: translateX(0%);
}

.sec_title_sub p{
    font-size:24px;
    color:#333;
    text-align: center;
    line-height:48px;
    font-weight: 400;
    margin-top:30px;
}
/* 공통 */

/****************************************************************************** section ******************************************************************************/
/* section1 */
#section1 {margin-top: -1.5vw;}
#section1 .brand_story{
    padding:120px 0 60px 0;
    background: url(../img/section1/section1_bg1.jpg) no-repeat 50% 50%;
    background-size: cover;
}

#section1 .brand_story_contant{margin-top:120px;}
#section1 .brand_story_contant .cont1 h3{
    font-size:48px;
    color:#000;
    text-align: center;
    line-height:65px;
    font-family: 'GmarketSansLight';
}
#section1 .brand_story_contant .cont1 h3 strong{
    font-size:48px;
    color:#000;
    font-family: 'GmarketSansBold';
}

#section1 .brand_story_contant .cont1 .list{
    position: relative;
    width:100%;
    margin-top:30px;
}
#section1 .brand_story_contant .cont1 .list ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 99;
    height:250px;
}
#section1 .brand_story_contant .cont1 .list ul li{width:33.333%; border-right:1px solid #fff; height:250px; text-align: center;}
#section1 .brand_story_contant .cont1 .list ul li:last-child{border:none;}

#section1 .brand_story_contant .cont1 .list .list_bg{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 0;
    transition: opacity 0.5s ease;
}
#section1 .brand_story_contant .cont1 .list .list_bg:first-child {
    opacity: 1; /* 기본 배경 */
}
#section1 .brand_story_contant .cont1 .list .list_bg img{
    transition: all .3s ease-in-out;
    width:100%;
    height:100%;
    object-fit: cover;
}
#section1 .brand_story_contant .cont1 .list .list_bg::before{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}
#section1 .brand_story_contant .cont1 .list ul li a{
    display: block;
    font-size: 4vw;
    line-height:250px;
    width:100%;
    height:100%;
    position: relative;
}
#section1 .brand_story_contant .cont1 .list ul li a .list_text_tt01{
    -webkit-text-stroke: 2px #abd29b;
    color: transparent;
}
#section1 .brand_story_contant .cont1 .list ul li a .list_text_tt02{
    position: absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
    color: #abd29b;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    transition: all 0.3s;
    width:100%;
}

#section1 .brand_story_contant .cont1 .list > span{
    display: block;
    margin:60px auto 60px auto;
    background-color: #2f6532;
    color:#fff;
    padding:10px 0px;
    font-size: 32px;
    width: 1025px;
    text-align: center;
    font-family: 'GmarketSansLight';
}
#section1 .brand_story_contant .cont1 .list > span strong{
    font-size: 32px;
    color:#fff;
    font-family: 'GmarketSansBold';
}

#section1 .brand_story_contant .brand_story_extension ul{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap:40px;
}
#section1 .brand_story_contant .brand_story_extension ul li{width:50%;}

#section1 .brand_story_contant .brand_story_extension .tit h3{
    font-size:32px;
    color:#005f3a;
    text-align: left;
    font-weight: 800;
}
#section1 .brand_story_contant .brand_story_extension .tit p{
    font-size:20px;
    color:#333;
    text-align: left;
    line-height:34px;
    padding:10px 0;
    font-weight: 400;
}
#section1 .brand_story_contant .brand_story_extension .tit p strong{
    font-size:20px;
    color:#005f3a;
    font-weight: 600;
}

#section1 .brand_story_contant .brand_story_extension .img img{border-radius: 30px 0 30px 0;}



/* 공통 */
.logo_banner{
    background-color: #fffde6;
    padding:10px 0;
}
.logo_banner .swiper-wrapper {transition-timing-function: linear;}
.logo_banner .swiper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.logo_banner .swiper-slide {
    width:100%;
    text-align: center;
    font-size: 18px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
}
.logo_banner .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}
/* 공통 */


#section1 .brand_box{
    padding:120px 0;
    background: url(../img/section1/section1_bg2.jpg) no-repeat 50% fixed;
    background-size: cover;
    position: relative;
}
#section1 .brand_box ul li{
    position: relative;
    margin: 0% 0% -2% 0%;
    height: 10vw;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    border:2px solid #fff;
    border-radius: 20px;
}
#section1 .brand_box ul li:nth-of-type(1){background-color: #eaf3ea;}
#section1 .brand_box ul li:nth-of-type(2){background-color: #c8dbc8;}
#section1 .brand_box ul li:nth-of-type(3){background-color: #2f6532;}
#section1 .brand_box ul li:nth-of-type(4){background-color: #1e4521;}

#section1 .brand_box ul li:hover{height:25vw;}
#section1 .brand_box ul li:last-child:hover{height:23.5vw;}
#section1 .brand_box ul li:hover .brand_box_list{opacity: 0;}
#section1 .brand_box ul li:hover .brand_box_list_h{opacity: 1;}


#section1 .brand_box .brand_box_list{
    position: relative;
    width:100%;
    height:100%;
    transition: all .3s ease-in-out;
}
#section1 .brand_box .brand_box_list .number{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left:60px;
    font-size:72px;
    -webkit-text-stroke: 1px #000;
    color:#fff;
    font-weight: 700;
}
#section1 .brand_box .brand_box_list .txt{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:100%;
    font-size:48px;
    color:#fff;
    -webkit-text-stroke: 1px #000;
    text-align: center;
    font-weight: 700;
}

#section1 .brand_box .brand_box_list_h{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:100%;
    transition: all .3s ease-in-out;
    opacity: 0;
}

#section1 .brand_box .brand_box_list_h .tit{transition: all .3s ease-in-out; opacity: 0;}
#section1 .brand_box ul li:hover .brand_box_list_h .tit{
    transform: translateX(120px);
    opacity: 1;
}

#section1 .brand_box .brand_box_list_h .tit h3{
    font-size:48px;
    color:#fff;
    text-align: left;
    -webkit-text-stroke: 1px #000;
    margin-bottom:20px;
    font-weight: 700;
}
#section1 .brand_box .brand_box_list_h .tit p{
    font-size:24px;
    color:#000;
    text-align: left;
    line-height:32px;
    font-weight: 500;
}
#section1 .brand_box .brand_box_list_h .img{
    position: absolute;
    top:-265px;
    right:-100px;
    z-index: -1;
    opacity: 0;
    transition: all .3s ease-in-out;
    width:800px;
}
#section1 .brand_box ul li:hover .brand_box_list_h .img{
    top:-165px;
    right:-20px;
    opacity: 1;
}
#section1 .brand_box ul li:last-child .brand_box_list_h .img{top:-150px;}
/* section1 */



/* section2 */
#section2 .main_menu{
    padding:120px 0;
    background: url(../img/section2/section2_bg.png) no-repeat 50% 50%;
    background-size: cover;
}

#section2 .main_menu_contant .inner > h3{
    font-size:48px;
    color:#333;
    text-align: center;
    font-weight: 300;
    padding:30px 0;
    margin:60px 0;
}
#section2 .main_menu_contant .inner > h3 strong{
    font-size:48px;
    color:#333;
    font-weight: 500;
}


#section2 .main_menu_contant .menu_tab{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#section2 .main_menu_contant .menu_tab li{width:11.111%;}
#section2 .main_menu_contant .menu_tab li a{
    display: block;
    font-size:18px;
    color:#333;
    text-align: center;
    border:1px solid #ccc;
    border-right:0;
    padding:10px 0;
    background-color: #fff;
}
#section2 .main_menu_contant .menu_tab li:last-child a{border-right:1px solid #ccc;}

#section2 .main_menu_contant .menu_tab li:first-child a.on{background-color: #2f6532; color:#fff;}
#section2 .main_menu_contant .menu_tab li a:hover{background-color: #2f6532; color:#fff;}
#section2 .main_menu_contant .menu_tab li a.active0{background-color: #2f6532; color:#fff;}
#section2 .main_menu_contant .menu_tab li a.active1{background-color: #2f6532; color:#fff;}
#section2 .main_menu_contant .menu_tab li a.active2{background-color: #2f6532; color:#fff;}
#section2 .main_menu_contant .menu_tab li a.active3{background-color: #2f6532; color:#fff;}
#section2 .main_menu_contant .menu_tab li a.active4{background-color: #2f6532; color:#fff;}
#section2 .main_menu_contant .menu_tab li a.active5{background-color: #2f6532; color:#fff;}
#section2 .main_menu_contant .menu_tab li a.active6{background-color: #2f6532; color:#fff;}
#section2 .main_menu_contant .menu_tab li a.active7{background-color: #2f6532; color:#fff;}
#section2 .main_menu_contant .menu_tab li a.active8{background-color: #2f6532; color:#fff;}
#section2 .main_menu_contant .menu_tab li a.active9{background-color: #2f6532; color:#fff;}


#section2 .main_menu_contant .swiper {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    margin:60px 0;
    border:1px solid #000;
    background-color: #fff;
}
#section2 .main_menu_contant .swiper .swiper-wrapper{
    display: flex;
    align-items: top;
}
#section2 .main_menu_contant .swiper-slide {
    width:100%;
    text-align: center;
    font-size: 18px;
    background-color: #fff;
    overflow: hidden;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
#section2 .main_menu_contant .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease-in-out;
}
#section2 .main_menu_contant .swiper-button-prev,
#section2 .main_menu_contant .swiper-container-rtl .swiper-button-next {
    left: 0px;
    right: auto;
    width:20px;
    color:#000
}
#section2 .main_menu_contant .swiper-button-next,
#section2 .main_menu_contant .swiper-container-rtl .swiper-button-prev {
    right: 0px;
    left: auto;
    width:20px;
    color:#000
}
#section2 .main_menu_contant .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{font-size:34px;}
#section2 .main_menu_contant .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{font-size:34px;}

#section2 .main_menu_contant .swiper-button-next,
#section2 .main_menu_contant .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    z-index: 10;
    cursor: pointer;
    background-size: 50px 50px;
    border:1px solid #000;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    transition: all .3s ease-in-out;
}
#section2 .main_menu_contant .swiper-button-next:hover{background-color: #1e4521; color:#fff;}
#section2 .main_menu_contant .swiper-button-prev:hover{background-color: #1e4521; color:#fff;}

#section2 .main_menu_contant .swiper-slide .img{
    width:200px;
    height:200px;
    border-radius: 50%;
    overflow: hidden;
    transition: all .3s ease-in-out;
}
#section2 .main_menu_contant .swiper-slide .tit{height:50px; position: relative; line-height:50px}
#section2 .main_menu_contant .swiper-slide .tit p{
    font-size:18px;
    color:#333;
    text-align: center;
}

#section2 .main_menu_contant .mySwiper .swiper-wrapper .swiper-slide.swiper-slide-active{border-right:1px solid #000;}
#section2 .main_menu_contant .mySwiper .swiper-wrapper .swiper-slide.swiper-slide-active .img{transform:scale(1.3); width:100%; height:100%; border-radius: 0; border-bottom:1px solid #000;}
#section2 .main_menu_contant .mySwiper .swiper-wrapper .swiper-slide.swiper-slide-active .tit p{
    position: absolute;
    bottom:-40px;
    left:50%;
    transform: translateX(-50%);
    font-size:24px;
}

#section2 .main_menu_contant .arrow{
    position: absolute;
    width:150px;
    bottom:5px;
    right:95px;
}



#section2 .menu_ad{
    padding:200px 0;
    background: url(../img/section2/section2_bg2.jpg) no-repeat 50% 50%;
    background-size: cover;
    position: relative;
}

#section2 .menu_ad .menu_ad_title{
    text-align: center;
    position: relative;
}
#section2 .menu_ad .menu_ad_title h3{
    font-size:3vw;
    color:#fff;
    text-align: center;
}
#section2 .menu_ad .menu_ad_title h2{
    font-size:7vw;
    color:#f6ff5e;
    font-weight: 800;
    text-align: center;
    font-style: italic;
    padding:20px 0;
}
#section2 .menu_ad .menu_ad_title span{
    display: block;
    font-size:3vw;
    color:#fff;
    text-align: center;
}
#section2 .menu_ad .menu_ad_title .img{width:10vw; margin:20px auto 0 auto;}
#section2 .menu_ad .menu_ad_title .img_wrap{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:38vw;
}
#section2 .menu_ad .menu_ad_title .img_wrap img{animation: rotate 30s infinite linear;}


#section2 .menu_ad .img_left{position: absolute; top:50%; transform: translateY(-50%); left:-230px;}
#section2 .menu_ad .img_left img{width:35vw;}
#section2 .menu_ad .img_right{position: absolute; top:50%; transform: translateY(-50%); right:-230px;}
#section2 .menu_ad .img_right img{width:35vw;}


#section2 .menu_ad .menu_ad_text1{position: absolute; top:0px; left:0%; transition: all 1s ease-in-out; opacity: 0;}
#section2 .menu_ad .menu_ad_text2{position: absolute; top:0px; right:0%; transition: all 1s ease-in-out; opacity: 0;}
#section2 .menu_ad .menu_ad_text3{position: absolute; bottom:0px; left:0%; transition: all 1s ease-in-out; opacity: 0;}
#section2 .menu_ad .menu_ad_text4{position: absolute; bottom:0px; right:0%; transition: all 1s ease-in-out; opacity: 0;}

#section2 .menu_ad .menu_ad_text h3{
    display: inline-block;
    font-size:2vw;
    color:#fff;
    text-align: center;
    background-color: #2f6532;
    padding:5px 20px;
    animation: blinkSoft 1.5s ease-in-out infinite;
}
@keyframes blinkSoft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
#section2 .menu_ad .menu_ad_text1 h3{transform: rotate(-3deg);}
#section2 .menu_ad .menu_ad_text2 h3{transform: rotate(3deg);}
#section2 .menu_ad .menu_ad_text3 h3{transform: rotate(-3deg);}
#section2 .menu_ad .menu_ad_text4 h3{transform: rotate(3deg);}

#section2 .menu_ad .menu_ad_text .tit{margin-top:20px; background-color: #e60013; padding:20px 0; border-radius: 10px;}
#section2 .menu_ad .menu_ad_text .tit p{
    font-size:1.2vw;
    color:#fff;
    text-align: center;
    line-height:36px;
}

#section2 .menu_ad .menu_ad_text1.active{top:150px; left:18%; opacity: 1;}
#section2 .menu_ad .menu_ad_text2.active{top:150px; right:18%; opacity: 1;}
#section2 .menu_ad .menu_ad_text3.active{bottom:150px; left:18%;opacity: 1;}
#section2 .menu_ad .menu_ad_text4.active{bottom:150px; right:18%;opacity: 1;}
/* section2 */




/* section3 */
#section3 .comp{
    padding:120px 0;
    background: url(../img/section3/section3_bg1.jpg) no-repeat 50% 50%;
    background-size: cover;
}

#section3 .comp_contant1_banner_top {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    background: #2f6532;
    margin-top: 120px;
    transform: translateY(-40px);
    opacity: 0;
    filter: blur(8px);
    transition: all 1.2s cubic-bezier(.22, .8, .2, 1);
}
#section3 .comp_contant1_banner_top.active{
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
}

#section3 .comp_contant1_banner_top .marquee {
    display: flex;
    width: max-content;
    animation: top_marquee 20s linear infinite;
}

#section3 .comp_contant1_banner_top h4 {
    flex: 0 0 auto;
    margin: 0;
    padding: 15px 40px;
    color: #fff;
    font-weight: 600;
    font-size: 2vw;
    white-space: nowrap;
    font-weight: 200;
}

/* 무한 루프 이동 (빈공간 없이) */
@keyframes top_marquee {
    0% {
        transform: translateX(-33.333%);
    }
    100% {
        transform: translateX(0%);
    }
}
#section3 .comp_contant1_banner_top .fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 8%;
    height: 100%;
    background: linear-gradient(to right, #2f6532 0%, transparent 100%);
    pointer-events: none; /* 클릭 방지 */
}
#section3 .comp_contant1_banner_top .fade.fade-right {
    left: auto;
    right: 0;
    background: linear-gradient(to left, #2f6532 0%, transparent 100%);
}

#section3 .comp_contant1_banner_bottom {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    margin-bottom: -90px;
    background: #2f6532;
    transform: translateY(-40px);
    opacity: 0;
    filter: blur(8px);
    transition: all 1.2s cubic-bezier(.22, .8, .2, 1);
}
#section3 .comp_contant1_banner_bottom.active{
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
}

#section3 .comp_contant1_banner_bottom .marquee {
    display: flex;
    width: max-content;
    animation: bottom_marquee 20s linear infinite;
}

#section3 .comp_contant1_banner_bottom h4 {
    flex: 0 0 auto;
    margin: 0;
    padding: 15px 40px;
    color: #fff;
    font-weight: 600;
    font-size: 2vw;
    white-space: nowrap;
    font-weight: 200;
}

/* 무한 루프 이동 (빈공간 없이) */
@keyframes bottom_marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-33.333%);
    }
}
#section3 .comp_contant1_banner_bottom .fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 8%;
    height: 100%;
    background: linear-gradient(to left, #2f6532 0%, transparent 100%);
    pointer-events: none; /* 클릭 방지 */
}
#section3 .comp_contant1_banner_bottom .fade.fade-left {
    right: auto;
    left: 0;
    background: linear-gradient(to right, #2f6532 0%, transparent 100%);
}


#section3 .comp_contant1_slide{
    padding-top:120px;
    position: relative;
}
#section3 .comp_contant1_slide::before{
    content: '';
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:93%;
    height:93%;
    border:3px solid #cc0000;
    border-radius: 50px;
}
#section3 .comp_contant1_slide h2{
    font-size: 5vw;
    color: #fff;
    text-align: center;
    -webkit-text-stroke: 2px #1e4521;
    transition: all 1s ease-in-out;
    opacity: 0;
    transform: translateY(-50px);
}
#section3 .comp_contant1_slide h2.active{transform: translateY(0); opacity: 1;}

#section3 .comp_contant1_slide h2 strong{
    font-size: 5vw;
    color: #1e4521;
}
#section3 .comp_contant1_slide .inner{height:100%;}
#section3 .comp_contant1_slide .inner > h3{
    text-align: center;
    position: absolute;
    left:50%;
    transform: translateX(-50%) scale(0);;
    z-index: 99;
    transition: all 1s ease-in-out;
    opacity: 0;
}
#section3 .comp_contant1_slide .inner > h3.active{
    transform: translateX(-50%) scale(1);
    opacity: 1;
}
#section3 .comp_contant1_slide .inner > h3 img{width:40vw;}
#section3 .comp_contant1_slide .inner > h3 span{
    position: absolute;
    top:38%;
    left:50%;
    transform: translate(-50%, -50%);
    font-size: min(4vw, 68px);
    color: #fff;
    text-align: center;
    white-space: nowrap;
}


#section3 .comp_contant1_slide .swiper {
    width: 100%;
    height: 100%;
    padding:120px 0;
    margin-top:180px;
}
#section3 .comp_contant1_slide .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
    position: relative;
    overflow: hidden;
}
#section3 .comp_contant1_slide .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
#section3 .comp_contant1_slide .mySwiper .swiper-wrapper .swiper-slide.swiper-slide-active{transform: scale(1.3); z-index: 9; border:5px solid #cc0000; border-radius: 30px;}

#section3 .comp_contant1_slide .tit_left h3,
#section3 .comp_contant1_slide .tit_right h3{
    font-size:2vw;
    color:#fff;
    display: inline-block;
    padding:15px 40px;
    text-align: center;
    white-space: nowrap;
    transition: all 1s ease-in-out;
}

#section3 .comp_contant1_slide .tit_left1{position: absolute; top:45%; left:0%; background-color: #2f6532; border-radius: 200px; z-index: 99;}
#section3 .comp_contant1_slide .tit_left2{position: absolute; top:55%; left:0%; background-color: #e60013; border-radius: 200px; z-index: 99;}
#section3 .comp_contant1_slide .tit_left3{position: absolute; top:65%; left:0%; background-color: #2f6532; border-radius: 200px; z-index: 99;}
#section3 .comp_contant1_slide .tit_left4{position: absolute; top:75%; left:0%; background-color: #e60013; border-radius: 200px; z-index: 99;}

#section3 .comp_contant1_slide .tit_right1{position: absolute; top:45%; right:0%; background-color: #e60013; border-radius: 200px; z-index: 99;}
#section3 .comp_contant1_slide .tit_right2{position: absolute; top:55%; right:0%; background-color: #2f6532; border-radius: 200px; z-index: 99;}
#section3 .comp_contant1_slide .tit_right3{position: absolute; top:65%; right:0%; background-color: #e60013; border-radius: 200px; z-index: 99;}
#section3 .comp_contant1_slide .tit_right4{position: absolute; top:75%; right:0%; background-color: #2f6532; border-radius: 200px; z-index: 99;}

#section3 .comp_contant1_slide .tit_left1.active{top:45%; left:-5%;}
#section3 .comp_contant1_slide .tit_left2.active{top:55%; left:-10%;}
#section3 .comp_contant1_slide .tit_left3.active{top:65%; left:-5%;}
#section3 .comp_contant1_slide .tit_left4.active{top:75%; left:-10%;}

#section3 .comp_contant1_slide .tit_right1.active{top:45%; right:-5%;}
#section3 .comp_contant1_slide .tit_right2.active{top:55%; right:-10%;}
#section3 .comp_contant1_slide .tit_right3.active{top:65%; right:-5%;}
#section3 .comp_contant1_slide .tit_right4.active{top:75%; right:-10%;}




#section3 .comp_list { position: relative; }
#section3 .comp_list ul{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#section3 .comp_list ul li{
    width: 25%;
    position: relative;
}

/* 이미지 래퍼/이미지 (효과용 보강) */
#section3 .comp_list ul li .img{
    position: relative;
    overflow: hidden;
}
#section3 .comp_list ul li .img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* 기본 상태 */
    filter: grayscale(0) brightness(1);
    transform: none;
    transition: filter .4s ease;
}

/* 타이틀 카드: 처음엔 안 보임 (중앙 정렬은 기존 유지) */
#section3 .comp_list ul li .tit{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* 임팩트 등장 초기값 */
    transform: translate(-50%,-50%) perspective(800px) translateZ(0) rotateX(2deg);
    opacity: 0;
    filter: blur(6px);

    /* 클립으로 와이프되며 열리는 느낌 */
    -webkit-clip-path: inset(0 0 0 0 round 16px);
    clip-path: inset(0 0 0 0 round 16px);

    /* 가독성 보강: 과하면 지워도 됨 */
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);

    z-index: 1;
    pointer-events: none;
}

/* 타이포 */
#section3 .comp_list ul li .tit h3{
    font-size: 1.8vw;
    color: #2f6532;
    text-align: center;
    font-weight: 600;
    -webkit-text-stroke: 1px #fff;
}
#section3 .comp_list ul li .tit .txt{ margin-top: 30px; }
#section3 .comp_list ul li .tit .txt p{
    font-size: 1.2vw;
    color: #fff;
    text-align: center;
    line-height: 36px;
}

/* ===== 활성화 상태 (루프에서 active가 붙음) ===== */
#section3 .comp_list ul li.active .img img{
    filter: grayscale(100%) brightness(.9) contrast(1.05);
    animation: imgHit .6s cubic-bezier(.2,.8,.2,1) both;
}
#section3 .comp_list ul li.active .tit{
    animation: titReveal .7s cubic-bezier(.22,.8,.2,1) both;
    pointer-events: auto;
}

/* 타이틀 내부 텍스트 스태거 */
#section3 .comp_list ul li .tit h3,
#section3 .comp_list ul li .tit .txt{
    opacity: 0;
    transform: translateY(10px);
}
#section3 .comp_list ul li.active .tit h3{
    animation: slideUp .45s .10s ease-out both;
}
#section3 .comp_list ul li.active .tit .txt{
    animation: slideUp .45s .20s ease-out both;
}

/* ===== 임펄스(한 번 번쩍) — JS가 .impulse 잠깐 부여 ===== */
#section3 .comp_list ul li.impulse .tit{
    animation: titReveal .7s cubic-bezier(.22,.8,.2,1) both,
                glow 800ms ease-out 0s 1;
}

/* ===== 키프레임 ===== */
@keyframes imgHit{
    0%   { transform: scale(1); }
    45%  { transform: scale(1.08); }  /* 팍 치고 */
    100% { transform: scale(1.02); }  /* 살짝 남김 */
}

@keyframes titReveal{
    0%{
        opacity: 0; filter: blur(6px);
        transform: translate(-50%,-54%) perspective(800px) translateZ(-30px) rotateX(6deg);
        -webkit-clip-path: inset(25% 25% 25% 25% round 16px);
                clip-path: inset(25% 25% 25% 25% round 16px);
    }
    60%{
        opacity: 1; filter: blur(1.5px);
        -webkit-clip-path: inset(0 0 0 0 round 16px);
                clip-path: inset(0 0 0 0 round 16px);
    }
    100%{
        opacity: 1; filter: blur(0);
        transform: translate(-50%,-50%) perspective(800px) translateZ(0) rotateX(0deg);
    }
}

@keyframes slideUp{
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glow{
    0%   { box-shadow: 0 0 0 rgba(47,101,50,0), 0 0 0 rgba(255,255,255,0); }
    30%  { box-shadow: 0 0 24px rgba(47,101,50,.55), 0 0 2px rgba(255,255,255,.7) inset; }
    100% { box-shadow: 0 0 0 rgba(47,101,50,0), 0 0 0 rgba(255,255,255,0); }
}

/* 접근성: 모션 최소화 */
@media (prefers-reduced-motion: reduce){
    #section3 .comp_list ul li .img img{ animation: none !important; transition: none !important; }
    #section3 .comp_list ul li .tit,
    #section3 .comp_list ul li.active .tit{
    animation: none !important; opacity: 1 !important; filter: none !important;
    -webkit-clip-path: none !important; clip-path: none !important;
    transform: translate(-50%,-50%) !important;
    }
    #section3 .comp_list ul li .tit h3,
    #section3 .comp_list ul li .tit .txt{
    opacity: 1 !important; transform: none !important;
    }
}





#section3 .comp_review{
    padding:120px 0;
    background: url(../img/section3/section3_bg2.jpg) no-repeat 50% 50%;
    background-size: cover;
    text-align: center;
    position: relative;
}
#section3 .comp_review h3{
    display: inline-block;
    font-size: 24px;
    color: #fff;
    margin: 10px 10px 30px 10px;
    padding: 20px 40px;
    border-radius: 50%;
    border: 1px solid #fff;
    animation: txt-bounce 2s ease-in-out infinite alternate;
}
#section3 .comp_review h2{
    font-size:2vw;
    color:#fff;
    transition: all 1s ease-in-out;
    transform: translateY(-50px);
    opacity: 0;
}
#section3 .comp_review h2 strong{
    font-size:2vw;
    color:#428d46;
    font-weight: 800;
}
#section3 .comp_review h2.active{
    transform: translateY(0);
    opacity: 1;
}

#section3 .comp_review .comp_review_slide{
    width:90%;
    margin:0 auto;
}
#section3 .comp_review .comp_review_slide .swiper {
    width: 100%;
    height: 100%;
    margin-top:30px;
    padding:85px 0;
}
#section3 .comp_review .comp_review_slide .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
#section3 .comp_review .comp_review_slide .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
#section3 .comp_review .comp_review_slide .mySwiper .swiper-wrapper .swiper-slide.swiper-slide-active{transform: scale(1.3); z-index: 9; border:5px solid #428d46; border-radius: 30px;}


#section3 .comp_review .text_img{
        width: 14.1732%;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: text_img infinite linear 10s;
}
@keyframes text_img {
    0% {
        transform: scale(1);
    }
    50% {
        transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30);
    }
    100% {
        transform: scale(1);
    }
}

#section3 .comp_review .text_img1{position: absolute; top: 9vw; left: 22%;}
#section3 .comp_review .text_img2{position: absolute; top: 15vw; left: 10%; animation-delay: 1s;}
#section3 .comp_review .text_img3{position: absolute; top: 9vw; right: 22%; animation-delay: 3s;}
#section3 .comp_review .text_img4{position: absolute; top: 15vw; right: 10%; animation-delay: 5s;}
/* section3 */



/* section4 */
#section4{padding-top:120px;}
#section4 .success_contant{margin-top:120px;}
#section4 .success_contant .inner > ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap:20px;
}

#section4 .success_contant .inner > ul > li:nth-of-type(1){width:40%;}
#section4 .success_contant .inner > ul > li:nth-of-type(2){
    width:60%;
    display: flex;
    flex-direction: column;
    gap:10px;
    position: relative;
}

#section4 .success_contant .video{
    position: relative;
    width:100%;
    height:0;
    padding-top:100%;
    overflow: hidden;
}
#section4 .success_contant .video iframe{
    position: absolute;
    top:-60px;
    left:0;
    width:100%;
    height:calc(100% + 120px);
    pointer-events: none;
}

#section4 .success_contant .img{
    height:50%;
    position: relative;
    overflow: hidden;           /* 줄이 벗어나는 부분 가림 */
    background-color: #428d46;
}
#section4 .success_contant .img > img{
    position: absolute;
    top:50%;
    left:50%;
    width:95%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 9;
}

/* 줄(트랙) 공통 */
#section4 .success_contant .img .text_cd_wrap1,
#section4 .success_contant .img .text_cd_wrap2{
    position: absolute;
    left: 0;
    display: inline-flex;       /* 한 줄로 나열 */
    align-items: center;
    gap: 1vw;                   /* 아이템 간격 */
    white-space: nowrap;
    width: max-content;         /* 내용 길이만큼만 */
    will-change: transform;
    pointer-events: none;       /* 클릭 방해 방지(선택) */
}

/* 각 줄 위치(상하 배치) — 현재 HTML 구조 기준 */
#section4 .success_contant .img > .text_cd_wrap1:nth-child(2){ top: 10px; }
#section4 .success_contant .img > .text_cd_wrap2:nth-child(3){ top: 71.666px; }
#section4 .success_contant .img > .text_cd_wrap1:nth-child(4){ bottom: 71.666px; }
#section4 .success_contant .img > .text_cd_wrap2:nth-child(5){ bottom: 10px; }

/* 이미지 크기 (필요 시 조절) */
#section4 .success_contant .img .text_cd_wrap1 img,
#section4 .success_contant .img .text_cd_wrap2 img{height: 60px;}

#section4 .success_contant .img .text_cd1,
#section4 .success_contant .img .text_cd4{z-index: 10;}

/* 키프레임
- 각 줄에 동일 콘텐츠를 2세트 넣었으므로
자기 너비의 '절반(-50%)'만 이동하면 끊김 없이 무한 루프 */
@keyframes scroll-left  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes scroll-right { from { transform: translateX(-50%); }  to { transform: translateX(0); } }

/* 방향/속도 지정 */
#section4 .success_contant .img .text_cd_wrap1{ animation: scroll-left 60s linear infinite; }
#section4 .success_contant .img .text_cd_wrap2{ animation: scroll-right 65s linear infinite; }


/* 접근성: 모션 줄이기 선호 시 정지 */
@media (prefers-reduced-motion: reduce){
    #section4 .success_contant .img .text_cd_wrap1,
    #section4 .success_contant .img .text_cd_wrap2{
        animation: none;
    }
}

#section4 .success_contant .success_slide{height:50%; position: relative;}

#section4 .success_contant .success_slide .swiper {
    width: 100%;
    height: 100%;
}
#section4 .success_contant .success_slide .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #428d46;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
#section4 .success_contant .success_slide .swiper-slide.swiper-slide-active{background-color: transparent;}


#section4 .success_contant .success_slide .swiper-slide .tit{text-align: center;}
#section4 .success_contant .success_slide .swiper-slide .tit span{
    display: inline-block;
    background-color: #e60013;
    padding:10px 30px;
    font-size:20px;
    color:#fff;
    border-radius: 50%;
    font-family: 'Shilla_CultureB-Bold';
    margin-bottom:20px;
}
#section4 .success_contant .success_slide .swiper-slide.swiper-slide-active .tit span{background-color: #428d46;}
#section4 .success_contant .success_slide .swiper-slide .tit p{
    font-size:18px;
    color:#fff;
    text-align: center;
    line-height:32px;
}



#section4 .success_contant .success_slide .pulse_wrap{
    position: absolute;
    bottom:-45px;
    left:50%;
    transform: translateX(-50%);
}

#section4 .success_contant .success_slide .pulse_wrap .pulse {
    background-color: #e60013;
    height: 20vmax;
    width: 20vmax;
    border-radius: 100%;
    position: relative;
}

#section4 .success_contant .success_slide .pulse_wrap .ring {
    position: absolute;
    background-color: inherit;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    opacity: 0.8;
    -webkit-animation: pulsing 3s ease-out infinite;
            animation: pulsing 3s ease-out infinite;
}
#section4 .success_contant .success_slide .pulse_wrap .ring:nth-of-type(1) {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
}
#section4 .success_contant .success_slide .pulse_wrap .ring:nth-of-type(2) {
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
}
#section4 .success_contant .success_slide .pulse_wrap .ring:nth-of-type(3) {
    -webkit-animation-delay: -1.5s;
            animation-delay: -1.5s;
}

@-webkit-keyframes pulsing {
    100% {
        transform: scale(1.75);
        opacity: 0;
    }
}

@keyframes pulsing {
    100% {
        transform: scale(1.75);
        opacity: 0;
    }
}





#section4 .diff{
    margin-top:120px;
    padding:120px 0;
    background: url(../img/section4/diff/diff_bg.jpg) no-repeat 50% 50%;
    background-size: cover;
}

#section4 .diff ul li .title h2{
    font-size:40px;
    color:#fff;
    text-align: left;
    line-height:50px;
}
#section4 .diff ul li .title h2 strong{
    font-size:40px;
    color:#fff;
    font-weight: 800;
}
#section4 .diff ul li .title p{
    margin-top:30px;
    font-size:18px;
    color:#fff;
    text-align: left;
    line-height:32px;
}
#section4 .diff ul li .title .title_img{margin-top:30px;}




/* ===== 레이아웃 ===== */
.diff .inner > ul{
    display:flex;
    gap: min(3vw, 24px);
}
.diff .inner > ul > li{width: 33.333%;}

/* 2·3열 공통: 세로 루프 컬럼 뷰포트 */
.diff .inner > ul > li.col{
    position: relative;
    height: 800px;
    overflow: hidden;
    border-radius: 16px;
}

/* 트랙: 세로로 이미지 나열 */
.diff .inner > ul > li.col .vtrack{
    display: flex;
    flex-direction: column;
    gap: min(2vw, 16px);
    will-change: transform;
}

/* 이미지 기본 */
.diff .inner img{
    display:block;
    width:100%;
    height:auto;
    border-radius: 12px;
}

/* ===== 애니메이션 ===== */
/* 2세트(총 200%) 중 절반(50%)만 이동하면 무한루프 끊김 없음 */
@keyframes v-scroll-up   { from{ transform: translateY(0); }     to{ transform: translateY(-50%); } }
@keyframes v-scroll-down { from{ transform: translateY(-50%); }  to{ transform: translateY(0); }   }

/* 방향/속도 지정 */
.diff .inner > ul > li.up   .vtrack{ animation: v-scroll-up   60s linear infinite; }
.diff .inner > ul > li.down .vtrack{ animation: v-scroll-down 65s linear infinite; }

/* (선택) 호버 시 일시정지 */
.diff .inner > ul > li.col:hover .vtrack{ animation-play-state: paused; }


.diff .inner > ul > li .vtrack .img_wrap{position: relative;}
.diff .inner > ul > li .vtrack .img_wrap .tit{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:90%;
    height:90%;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
}
.diff .inner > ul > li .vtrack .img_wrap .tit h3{
    display: inline-block;
    padding:10px 30px;
    background-color: #e60013;
    font-size:32px;
    color:#fff;
    text-align: center;
    margin-bottom:30px;
    font-weight: 600;
    border-radius: 10px;
    animation: blinkSoft 1.5s ease-in-out infinite;
    position: relative;
}
.diff .inner > ul > li .vtrack .img_wrap .tit p{
    font-size:24px;
    color:#fff;
    text-align: center;
    line-height:40px;
    font-weight: 400;
}
.diff .inner > ul > li .vtrack .img_wrap:hover .tit{background-color: #1e4521;}
/* section4 */



/* section5 */
#section5 .interior{
    padding:120px 0;
    background: url(../img/section5/section5_bg.jpg) no-repeat 50% 50%;
    background-size: cover;
    position: relative;
}


#section5 .interior .interior_banner_top{margin-top:120px;}
#section5 .interior .interior_banner_top .swiper-wrapper {transition-timing-function: linear;}
#section5 .interior .interior_banner_top .swiper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding:5px 0;
}

#section5 .interior .interior_banner_top .swiper-slide {
    width:100%;
    text-align: center;
    font-size: 18px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid #000;
}
#section5 .interior .interior_banner_top .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}



#section5 .interior .interior_banner_bottom .swiper-wrapper {transition-timing-function: linear;}
#section5 .interior .interior_banner_bottom .swiper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding:5px 0;
}

#section5 .interior .interior_banner_bottom .swiper-slide {
    width:100%;
    text-align: center;
    font-size: 18px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid #000;
}
#section5 .interior .interior_banner_bottom .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}





#section5 .interior .interior_banner_bottom {
    width: 100vw;
    overflow: hidden;
    position: relative;
}

#section5 .interior .interior_banner_bottom .slide_track {
    display: flex;
    width: 100%; /* 복제 포함한 전체 길이 */
    animation: scroll-right 20s linear infinite;
}

#section5 .interior .interior_banner_bottom .slide_track div {
    flex: 0 0 20%; /* 5장 보이게 (100/5) */
    margin:0 5px;
    border:1px solid #000;
}

#section5 .interior .interior_banner_bottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 왼쪽으로 흐르기 */
@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}






#section5 .interior .interior_contant .cont {
    position: relative;
    overflow: hidden;
    height: 100vh;
    padding: 80px 70px;
}
#section5 .interior .interior_contant .cont__inner {
    position: relative;
    height: 100%;
}
#section5 .interior .interior_contant .cont__inner:hover .el__bg:after {
    opacity: 1;
}

#section5 .interior .interior_contant .el {
    position: absolute;
    left: 0;
    top: 0;
    width: 24.2%;
    height: 100%;
    background: #252525;
    transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
    will-change: transform, width, opacity;
    border:1px solid #ccc;
}
#section5 .interior .interior_contant .el:not(.s--active) {
    cursor: pointer;
}
#section5 .interior .interior_contant .el__overflow {
    overflow: hidden;
    position: relative;
    height: 100%;
}
#section5 .interior .interior_contant .el__inner {
    overflow: hidden;
    position: relative;
    height: 100%;
    transition: transform 1s;
}
#section5 .interior .interior_contant .cont.s--inactive .el__inner {
    transform: translate3d(0, 100%, 0);
}
#section5 .interior .interior_contant .el__bg {
    position: relative;
    width: calc(100vw - 140px);
    height: 100%;
    transition: transform 0.6s 0.7s;
    will-change: transform;
}
#section5 .interior .interior_contant .el__bg:before {
    content: "";
    position: absolute;
    left: 0;
    top: -5%;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: center center;
    transition: transform 1s;
    transform: translate3d(0, 0, 0) scale(1);
}
#section5 .interior .interior_contant .cont.s--inactive .el__bg:before {
    transform: translate3d(0, -100%, 0) scale(1.2);
}
#section5 .interior .interior_contant .el.s--active .el__bg:before {
    transition: transform 0.8s;
}
#section5 .interior .interior_contant .el__bg:after {
    content: "";
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.5s;
}
#section5 .interior .interior_contant .cont.s--el-active .el__bg:after {
    transition: opacity 0.5s 1.4s;
    opacity: 1 !important;
}
#section5 .interior .interior_contant .el__preview-cont {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s 1.2s;
}
#section5 .interior .interior_contant .cont.s--inactive .el__preview-cont {
    opacity: 0;
    transform: translateY(10px);
}
#section5 .interior .interior_contant .cont.s--el-active .el__preview-cont {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s;
}
#section5 .interior .interior_contant .el__heading {
    color: #2f6532;
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 800;
}
#section5 .interior .interior_contant .el__content {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 30px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.1s;
}
#section5 .interior .interior_contant .el.s--active .el__content {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transition: all 0.5s 1.4s;
}
#section5 .interior .interior_contant .el__text {
    text-transform: uppercase;
    font-size: 40px;
    color: #fff;
}
#section5 .interior .interior_contant .el__close-btn {
    z-index: -1;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 60px;
    height: 60px;
    opacity: 0;
    pointer-events: none;
    transition: all 0s 0.45s;
    cursor: pointer;
}
#section5 .interior .interior_contant .el.s--active .el__close-btn {
    z-index: 5;
    opacity: 1;
    pointer-events: auto;
    transition: all 0s 1.4s;
}
#section5 .interior .interior_contant .el__close-btn:before, .el__close-btn:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 8px;
    margin-top: -4px;
    background: #fff;
    opacity: 0;
    transition: opacity 0s;
}
#section5 .interior .interior_contant .el.s--active .el__close-btn:before, .el.s--active .el__close-btn:after {
    opacity: 1;
}
#section5 .interior .interior_contant .el__close-btn:before {
    transform: rotate(45deg) translateX(100%);
}
#section5 .interior .interior_contant .el.s--active .el__close-btn:before {
    transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
    transform: rotate(45deg) translateX(0);
}
#section5 .interior .interior_contant .el__close-btn:after {
    transform: rotate(-45deg) translateX(100%);
}
#section5 .interior .interior_contant .el.s--active .el__close-btn:after {
    transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
    transform: rotate(-45deg) translateX(0);
}
#section5 .interior .interior_contant .el__index {
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 100%;
    height: 100%;
    min-height: 250px;
    text-align: center;
    font-size: 15vw;
    /* line-height: 0.85; */
    font-weight: bold;
    transition: transform 0.5s, opacity 0.3s 1.4s;
    transform: translate3d(0, 1vw, 0);
}
#section5 .interior .interior_contant .el:hover .el__index {
    transform: translate3d(0, 0, 0);
}
#section5 .interior .interior_contant .cont.s--el-active .el__index {
    transition: transform 0.5s, opacity 0.3s;
    opacity: 0;
}
#section5 .interior .interior_contant .el__index-back, .el__index-front {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}
#section5 .interior .interior_contant .el__index-back {
    color: #2f6532;
    opacity: 0;
    transition: opacity 0.25s 0.25s;
}
#section5 .interior .interior_contant .el:hover .el__index-back {
    transition: opacity 0.25s;
    opacity: 1;
}
#section5 .interior .interior_contant .el__index-overlay {
    overflow: hidden;
    position: relative;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.5s 0.1s;
    color: transparent;
}
#section5 .interior .interior_contant .el__index-overlay:before {
    content: attr(data-index);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    transform: translate3d(0, -100%, 0);
    transition: transform 0.5s 0.1s;
}
#section5 .interior .interior_contant .el:hover .el__index-overlay {
    transform: translate3d(0, 0, 0);
}
#section5 .interior .interior_contant .el:hover .el__index-overlay:before {
    transform: translate3d(0, 0, 0);
}
#section5 .interior .interior_contant .el:nth-child(1) {
    transform: translate3d(0%, 0, 0);
    transform-origin: 50% 50%;
}
#section5 .interior .interior_contant .cont.s--el-active .el:nth-child(1):not(.s--active) {
    transform: scale(0.5) translate3d(0%, 0, 0);
    opacity: 0;
    transition: transform 0.95s, opacity 0.95s;
}
.el:nth-child(1) .el__inner {transition-delay: 0s;}
.el:nth-child(1) .el__bg {transform: translate3d(0%, 0, 0);}
.el:nth-child(1) .el__bg:before {
    transition-delay: 0s;
    background-image: url("../img/section5/slide1.jpg");
}
#section5 .interior .interior_contant .el:nth-child(2) {
    transform: translate3d(105.2083333333%, 0, 0);
    transform-origin: 155.2083333333% 50%;
}
#section5 .interior .interior_contant .cont.s--el-active .el:nth-child(2):not(.s--active) {
    transform: scale(0.5) translate3d(105.2083333333%, 0, 0);
    opacity: 0;
    transition: transform 0.95s, opacity 0.95s;
}
#section5 .interior .interior_contant .el:nth-child(2) .el__inner {transition-delay: 0.1s;}
#section5 .interior .interior_contant .el:nth-child(2) .el__bg {transform: translate3d(-19.2%, 0, 0);}
#section5 .interior .interior_contant .el:nth-child(2) .el__bg:before {
    transition-delay: 0.1s;
    background-image: url("../img/section5/slide2.jpg");
}
#section5 .interior .interior_contant .el:nth-child(3) {
    transform: translate3d(210.4166666667%, 0, 0);
    transform-origin: 260.4166666667% 50%;
}
#section5 .interior .interior_contant .cont.s--el-active .el:nth-child(3):not(.s--active) {
    transform: scale(0.5) translate3d(210.4166666667%, 0, 0);
    opacity: 0;
    transition: transform 0.95s, opacity 0.95s;
}
#section5 .interior .interior_contant .el:nth-child(3) .el__inner {transition-delay: 0.2s;}
#section5 .interior .interior_contant .el:nth-child(3) .el__bg {transform: translate3d(-38.4%, 0, 0);}
#section5 .interior .interior_contant .el:nth-child(3) .el__bg:before {
    transition-delay: 0.2s;
    background-image: url("../img/section5/slide3.jpg");
}
#section5 .interior .interior_contant .el:nth-child(4) {
    transform: translate3d(315.625%, 0, 0);
    transform-origin: 365.625% 50%;
}
#section5 .interior .interior_contant .cont.s--el-active .el:nth-child(4):not(.s--active) {
    transform: scale(0.5) translate3d(315.625%, 0, 0);
    opacity: 0;
    transition: transform 0.95s, opacity 0.95s;
}
#section5 .interior .interior_contant .el:nth-child(4) .el__inner {transition-delay: 0.3s;}
#section5 .interior .interior_contant .el:nth-child(4) .el__bg {transform: translate3d(-57.6%, 0, 0);}
#section5 .interior .interior_contant .el:nth-child(4) .el__bg:before {
    transition-delay: 0.3s;
    background-image: url("../img/section5/slide4.jpg");
}
#section5 .interior .interior_contant .el:nth-child(5) {
    transform: translate3d(420.8333333333%, 0, 0);
    transform-origin: 470.8333333333% 50%;
}
#section5 .interior .interior_contant .cont.s--el-active .el:nth-child(5):not(.s--active) {
    transform: scale(0.5) translate3d(420.8333333333%, 0, 0);
    opacity: 0;
    transition: transform 0.95s, opacity 0.95s;
}
#section5 .interior .interior_contant .el:nth-child(5) .el__inner {transition-delay: 0.4s;}
#section5 .interior .interior_contant .el:nth-child(5) .el__bg {transform: translate3d(-76.8%, 0, 0);}
#section5 .interior .interior_contant .el:nth-child(5) .el__bg:before {
    transition-delay: 0.4s;
    background-image: url("../img/section5/slide6.jpg");
}
#section5 .interior .interior_contant .el:hover .el__bg:after {opacity: 0;}
#section5 .interior .interior_contant .el.s--active {
    z-index: 1;
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 0.6s, width 0.7s 0.7s, z-index 0s;
}
#section5 .interior .interior_contant .el.s--active .el__bg {
    transform: translate3d(0, 0, 0);
    transition: transform 0.6s;
}
#section5 .interior .interior_contant .el.s--active .el__bg:before {
    transition-delay: 0.6s;
    /* transform: scale(1.1); */
}
/* section5 */



/* section6 */
#section6{
    padding:120px 0 0 0;
    background: url(../img/section6/section6_bg.jpg) no-repeat 50% 50%;
    background-size: cover;
}
#section6 .founded{position: relative;}
#section6 .founded_contant{margin-top:120px; position: relative; z-index: 1;}
#section6 .founded_contant .table{width:1200px; margin:0 auto;}
#section6 .founded_contant .table .table_head{
    display: flex;
    align-items: center;
    justify-content: end;
}
#section6 .founded_contant .table .table_head p{
    text-align: right;
    font-size:24px;
    color:#e60013;
    font-weight: 600;
}

#section6 .founded_contant .table .chart{width:100%; margin-top:10px;}
#section6 .founded_contant .table .chart tr th{
    background-color: #1e4521;
    color:#fff;
    text-align: center;
    padding:20px;
    font-size:20px;
}
#section6 .founded_contant .table .chart tr td{
    border:1px solid #1e4521;
    padding:20px;
    font-size:20px;
    color:#333;
    background-color: #fff;
}
#section6 .founded_contant .table .chart tr td:first-child{text-align: center; font-weight: 600;}
#section6 .founded_contant .table .chart tr td:last-child{text-align: center; font-weight: 600;}

#section6 .founded_contant .table .table_tail{
    background-color: #1e4521;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:20px 40px;
}
#section6 .founded_contant .table .table_tail p{
    font-size:24px;
    color:#fff;
    padding-left:65px;
}
#section6 .founded_contant .table .table_tail span{
    display: block;
    font-size:32px;
    color:#fff;
    font-weight: 600;
    padding-right:10px;
    animation: blinkSoft 1.5s ease-in-out infinite;
}

#section6 .founded_contant .table .list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top:10px;
}
#section6 .founded_contant .table .list .tit p{
    font-size:20px;
    color:#000;
    text-align: left;
    padding:10px 0;
    font-weight: 600;
}
#section6 .founded_contant .table .list .royalty{
    background-color: #e60013;
    padding: 40px 30px;
}
#section6 .founded_contant .table .list .royalty p{
    font-size:20px;
    color:#fff;
    text-align: center;
    font-weight: 600;
}



#section6 .founded .left_img{
    position: absolute;
    top:-10%;
    left:-20%;
    width:30%;
    z-index: 0;
    opacity: 0;
    transition: all 1s ease-in-out;
}
#section6 .founded .left_img.active{
    top:10%;
    left:-5%;
    opacity: 1;
}
#section6 .founded .left_img img{animation: zoomInOut 6s ease-in-out infinite;}



#section6 .founded .right_img{
    position: absolute;
    bottom:-20%;
    right:-15%;
    width:30%;
    z-index: 0;
    opacity: 0;
    transition: all 1s ease-in-out;
}
#section6 .founded .right_img.active{
    bottom:-10%;
    right:-5%;
    opacity: 1;
}
#section6 .founded .right_img .img_wrap{
    position: relative;
}
#section6 .founded .right_img .img_wrap img{
    transform: scale(.9);
    animation: zoomInOut 6s ease-in-out infinite;
}
/* 확대/축소 키프레임 */
@keyframes zoomInOut {
    0%, 100% {
        transform: scale(.9);
    }
    50% {
        transform: scale(1);
    }
}
#section6 .founded .right_img .img_wrap .one{
    position: absolute;
    top:0;
    left:0;
    width: 100% !important;
    animation: rotate 15s infinite linear;
}



#section6 .founded_bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:80px 0;
    background: url(../img/section6/founded_bottom_bg.jpg) no-repeat 50% fixed;
    background-size: cover;
    margin-top:30px;
}

#section6 .header__title {
    font-size: 72px;
    text-align: center;
    display: flex;
    flex-flow: column wrap;
}

#section6 .header__static-text {
    display: inline-block;
}

#section6 .header__word-container {
    display: inline-block;
    overflow: hidden;
    height: 1em;
    vertical-align: bottom;
    position: relative;
    margin-top:25px;
}

#section6 [data-ref="header-word"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 1em; */
    transform: translate3d(0, 100%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

#section6 .header__static-text1{color:#fff;}
#section6 .header__static-text2{
    padding:20px 0;
    font-weight: 800;
    color:#fff;
}
#section6 .header__static-text2 strong{
    background-color: #e60013;
    padding:20px 60px;
    border-radius: 500px;
    color:#fff;
    animation: blinkSoft 1.5s ease-in-out infinite;
}

#section6 .header__word-container > div{
    color:#2f6532;
    font-weight: 600;
}
#section6 .header__word-container > div strong{
    color:#e60013;
    font-weight: 600;
}
/* section6 */



/* section7 */
#section7{
    padding:120px 0;
    background: url(../img/section7/bottom.png) no-repeat 50% 100%;
    background-size: 100%;
}
#section7 .procedure_contant{position: relative;}
#section7 .procedure_contant .title{margin-top:120px;}

#section7 .procedure_contant .title h3{
    font-size: 2vw;
    color: #2f6532;
    transition: all 1s ease-in-out;
    transform: translateY(-50px);
    opacity: 0;
    font-weight: 600;
    line-height: 3vw;
    text-align: center;
}
#section7 .procedure_contant .title h3.active {
    transform: translateY(0);
    opacity: 1;
}

#section7 .procedure_contant .chart_wrap{
    margin-top:60px;
    background-color: #c6c6c6;
    padding:1px;
}
#section7 .procedure_contant .chart_wrap ul{
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    justify-content: center;
}
#section7 .procedure_contant .chart_wrap ul li{position: relative; cursor: pointer;}
#section7 .procedure_contant .chart_wrap ul li .list{
    background-color: #fff;
    padding:40px 0;
    text-align: center;
    transition: all .3s ease-in-out;
}
#section7 .procedure_contant .chart_wrap ul li .list .icon{width:100px; margin:0 auto;}
#section7 .procedure_contant .chart_wrap ul li .list span{
    display: inline-block;
    background-color:#2f6532;
    font-size:16px;
    font-weight: 400px;
    color:#fff;
    padding:10px 40px;
    border-radius: 200px;
    margin:15px 0 20px 0;
}
#section7 .procedure_contant .chart_wrap ul li .list p{
    font-size:28px;
    color:#333;
}


#section7 .procedure_contant .chart_wrap ul li .list_h{
    position: absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
    width:100%;
    opacity: 0;
    padding:40px 0;
    text-align: center;
    transition: all .3s ease-in-out;
}
#section7 .procedure_contant .chart_wrap ul li .list_h .icon{width:100px; margin:0 auto;}
#section7 .procedure_contant .chart_wrap ul li .list_h span{
    display: inline-block;
    background-color:#fff;
    font-size:16px;
    font-weight: 400px;
    color:#000;
    padding:10px 40px;
    border-radius: 200px;
    margin:15px 0 20px 0;
}
#section7 .procedure_contant .chart_wrap ul li .list_h p{
    font-size:28px;
    color:#fff;
}

#section7 .procedure_contant .chart_wrap ul li:nth-of-type(1) .list_h{background: url(../img/section7/list_bg1.jpg) no-repeat 50% 50%; background-size: cover;}
#section7 .procedure_contant .chart_wrap ul li:nth-of-type(2) .list_h{background: url(../img/section7/list_bg2.jpg) no-repeat 50% 50%; background-size: cover;}
#section7 .procedure_contant .chart_wrap ul li:nth-of-type(3) .list_h{background: url(../img/section7/list_bg3.jpg) no-repeat 50% 50%; background-size: cover;}
#section7 .procedure_contant .chart_wrap ul li:nth-of-type(4) .list_h{background: url(../img/section7/list_bg4.jpg) no-repeat 50% 50%; background-size: cover;}
#section7 .procedure_contant .chart_wrap ul li:nth-of-type(5) .list_h{background: url(../img/section7/list_bg5.jpg) no-repeat 50% 50%; background-size: cover;}
#section7 .procedure_contant .chart_wrap ul li:nth-of-type(6) .list_h{background: url(../img/section7/list_bg6.jpg) no-repeat 50% 50%; background-size: cover;}
#section7 .procedure_contant .chart_wrap ul li:nth-of-type(7) .list_h{background: url(../img/section7/list_bg7.jpg) no-repeat 50% 50%; background-size: cover;}
#section7 .procedure_contant .chart_wrap ul li:nth-of-type(8) .list_h{background: url(../img/section7/list_bg8.jpg) no-repeat 50% 50%; background-size: cover;}
#section7 .procedure_contant .chart_wrap ul li:nth-of-type(9) .list_h{background: url(../img/section7/list_bg9.jpg) no-repeat 50% 50%; background-size: cover;}


#section7 .procedure_contant .chart_wrap ul li:hover .list{opacity: 0;}
#section7 .procedure_contant .chart_wrap ul li:hover .list_h{opacity: 1;}
/* section7 */



/* section8 */

/* 섹션 루트 */
#section8 .inquiry {
    padding: 120px 0;
    position: relative;
    /* 고정배경은 Lenis/transform 환경에서 깨질 수 있어 일반 cover로 변경 */
    background: url(../img/section8/section8_bg.jpg) no-repeat 50% / cover;
    z-index: 0;
    isolation: isolate; /* 이 섹션만의 스택 컨텍스트 */
}

/* (옵션) 진짜 고정배경 느낌 필요 시 사용: 위 background 대신 아래 의사요소를 켭니다.
#section8 .inquiry::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url(../img/section8/section8_bg.jpg) no-repeat 50% / cover;
    z-index: -1; 
}
*/

/* 타이틀/서브텍스트 컬러 */
#section8 .inquiry .sec_title_main .title_wrap .txt { color: #fff; text-shadow: none; }
#section8 .sec_title_main .title_wrap .txt_span { color: #fff; border:1px solid #fff;}

/* 타이틀 라인 컬러 */
#section8 .inquiry .title_wrap .line { background-color: #fff; }

/* 본문 컨텐츠 레이어: 마키보다 위 */
#section8 .inquiry .sec_title_main,
#section8 .inquiry .sec_title_sub,
#section8 .inquiry .inquiry_contant {
    position: relative;
    z-index: 2;
}

/* 리스트 박스 */
#section8 .inquiry .inquiry_contant .list_box {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    position: relative;
}

/* 리스트 카드 */
#section8 .inquiry .inquiry_contant .list_box .list_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #005f3a;
    padding: 70px;
    border-radius: 20px;
}
#section8 .inquiry .inquiry_contant .list_box .list_text h2 { text-align: center; }
#section8 .inquiry .inquiry_contant .list_box .list_text h2 img { width: 250px; }

/* 리스트 카드 본문 */
#section8 .inquiry .inquiry_contant .list_box .list_text p {
    font-size: 32px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    margin: 40px 0;
    position: relative;
}
#section8 .inquiry .inquiry_contant .list_box .list_text p::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #ccc;
}

/* 리스트 카드 하단 라벨 */
#section8 .inquiry .inquiry_contant .list_box .list_text span {
    display: block;
    font-size: 48px;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-family: 'Shilla_CultureB-Bold';
}
#section8 .inquiry .inquiry_contant .list_box .list_text span strong {
    font-size: 64px;
    color: #e60013;
    font-family: 'Shilla_CultureB-Bold';
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 10px;
    animation: blinkSoft 1.5s ease-in-out infinite;
}

/* ================================
    좌/우 세로 마키 (장식요소)
   ================================ */

/* 마키 래퍼: 섹션 위를 덮되, 스크롤/클릭 방해 금지 */
#section8 .inquiry .text_wrap_left,
#section8 .inquiry .text_wrap_right {
    position: absolute;
    top: 220px;
    height: 100vh;         /* 뷰포트 기준 높이 */
    overflow: hidden;
    pointer-events: none;  /* 이벤트 통과 */
    z-index: 1;            /* 본문(2)보단 낮고, 섹션 배경(0)보단 높게 */
}

/* 위치 */
#section8 .inquiry .text_wrap_left  { left: 10%; }
#section8 .inquiry .text_wrap_right { right: 10%; }

/* 트랙 */
#section8 .inquiry .marquee-track {
    display: flex;
    flex-direction: column;
    animation: scrollUp 50s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}
#section8 .inquiry .marquee-track.reverse {
    animation-name: scrollDown;
}

/* 아이템 이미지 */
#section8 .inquiry .text_wrap_left img,
#section8 .inquiry .text_wrap_right img {
    width: 120px;      /* 필요 시 조정 */
    height: 100%;      /* 래퍼 높이에 맞춤 */
    display: block;
    object-fit: cover;
    margin: 10px 0;
}

/* 무한 루프 키프레임 (동일 세트를 2번 넣었으므로 -50% 이동) */
@keyframes scrollUp   { from { transform: translateY(0);    } to { transform: translateY(-50%); } }
@keyframes scrollDown { from { transform: translateY(-50%); } to { transform: translateY(0);    } }

/* ================================
    접근성 / 반응형 보정
   ================================ */

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
    #section8 .inquiry .marquee-track { animation-duration: 60s; }
}

/* 기본적인 반응형 예시 (선택) */
@media (max-width: 1024px) {
    #section8 .inquiry .inquiry_contant .list_box .list_text { padding: 48px; }
    #section8 .inquiry .inquiry_contant .list_box .list_text p { font-size: 28px; line-height: 44px; }
    #section8 .inquiry .inquiry_contant .list_box .list_text span { font-size: 40px; }
    #section8 .inquiry .inquiry_contant .list_box .list_text span strong { font-size: 56px; }
    #section8 .inquiry .text_wrap_left img,
    #section8 .inquiry .text_wrap_right img { width: 100px; }
}

@media (max-width: 768px) {
    #section8 .inquiry { padding: 80px 0; }
    #section8 .inquiry .inquiry_contant .list_box .list_text { padding: 36px; }
    #section8 .inquiry .inquiry_contant .list_box .list_text h2 img { width: 200px; }
    #section8 .inquiry .inquiry_contant .list_box .list_text p { font-size: 22px; line-height: 36px; }
    #section8 .inquiry .inquiry_contant .list_box .list_text span { font-size: 32px; }
    #section8 .inquiry .inquiry_contant .list_box .list_text span strong { font-size: 42px; }
    #section8 .inquiry .text_wrap_left img,
    #section8 .inquiry .text_wrap_right img { width: 80px; }
}

@media (max-width: 480px) {
    #section8 .inquiry .inquiry_contant .list_box .list_text { padding: 28px; }
    #section8 .inquiry .inquiry_contant .list_box .list_text h2 img { width: 170px; }
    #section8 .inquiry .inquiry_contant .list_box .list_text p { font-size: 18px; line-height: 30px; }
    #section8 .inquiry .inquiry_contant .list_box .list_text span { font-size: 26px; }
    #section8 .inquiry .inquiry_contant .list_box .list_text span strong { font-size: 34px; }
    #section8 .inquiry .text_wrap_left img,
    #section8 .inquiry .text_wrap_right img { width: 68px; }
}

/* section8 */




/* store */
.store{
    padding:120px 0;
    background: url(../img/store_bg.jpg) no-repeat 50% 50%;
    background-size: cover;
    overflow: hidden;
}
.store .sec_title_main .title_wrap .txt_span {
    color: #fff;
    border: 1px solid #fff;
}

/* 타이틀/서브텍스트 컬러 */
.store .sec_title_main .title_wrap .txt { color: #fff; }
.store .title_wrap .line { background-color: #fff; }

.store .list{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap:40px;
    margin-top:60px;
}
.store .list li{width:33.333%;}
.store .list li a{display: block;}
.store .list li a .img{background-color: #000; overflow: hidden; border-radius: 10px;}
.store .list li a .img img{transition: all .3s ease-in-out;}
.store .list li a .tit p{
    font-size:18px;
    color:#fff;
    text-align: center;
    padding:10px 0;
    line-height:32px;
    transition: all .3s ease-in-out
}

.store .list li a:hover .img img{transform: scale(1.1); opacity: .8;}
.store .list li a:hover .tit p{color:#cc0000;}
/* store */




/* section9 */
#section9{
    padding:120px 0;
    background: url(../img/section9/section9_bg1.jpg) no-repeat 50% 50%;
    background-size: cover;
}

#section9 .map_contant .tit{margin-top:30px;}
#section9 .map_contant .tit p{
    font-size:32px;
    color:#333;
    text-align: left;
    font-family: 'Noto Sans KR', serif;
    font-weight: 800;
}

#section9 .location_map .map {
    position: relative;
    margin-top:30px;
}
#section9 .location_map .map .cont{display: none;}

/* 투명막: 기본적으로 스크롤/줌을 막음 */
#section9 .location_map > .map::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;        /* 필요하면 rgba(0,0,0,.0~.1)로 힌트 */
    pointer-events: auto;           /* 막기: 이벤트 가로막음 */
    /* 선택: 안내 배지도 원하면 아래 주석 해제
    box-shadow: inset 0 0 0 0 transparent;
    */
}

/* Ctrl 눌렀을 때 허용: before를 ‘없애는’ 대신 통과만 시킴 */
#section9 .location_map > .map.ctrl-zoom::before {
    pointer-events: none;           /* 통과 */
}

/* 기본 안내문구 */
#section9 .location_map > .map::after {
    content: "Ctrl + 스크롤로 확대 / 축소";
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 11;
    pointer-events: none;   /* 클릭 차단 안 되게 */
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Ctrl 누른 상태에서는 문구 숨김 */
#section9 .location_map > .map.ctrl-zoom::after {
    opacity: 0;
}
/* section9 */

/****************************************************************************** section ******************************************************************************/
/* footer */
.footer{
    padding:30px 0;
    background-color: #2f6532;
}
.footer p{
    font-size:14px;
    line-height: 28px;
    color:#ccc;
    text-align: center;
    font-weight: 400;
}
.footer span{
    display: block;
    font-size:13px;
    color:#fff;
    text-align: center;
    margin-top:10px;
    font-weight: 400;
}
/* footer */
/* ------------------------------------- section ------------------------------------- */


/* top_btn */
.topbtn{
    position: fixed;
    bottom:170px;
    right:60px;
    z-index:9999;
    width:50px;
    height:50px;
    border-radius: 40px;
    background-color:  #2f6532;
    transition: all 0.5s ease;
    opacity: 0;
}
.topbtn.on{opacity: 1;}

.topbtn img{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:30px;
}

.topbtn:hover{
    transition: all 0.5s ease;
    background-color: #151515;
}
/* top_btn */

/* form*/
.consult_btn {position: fixed; bottom: 25px; right: 25px; background: #2f6532; z-index: 999; text-align: center; border-radius: 10px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); cursor: pointer; padding: 10px;}
.consult_btn div {display: block; height: 100%; padding: 10px 20px; background: #fff; position:relative; border-radius: 10px;}
.consult_btn div h2 {font-size: 32px;}
.consult_btn div:before {position: absolute; content: ''; width: 98%; height: 93%; border-radius: 20px; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; z-index: -1;}
.consult_btn div h3 {font-size: 20px; color: #333;}
.consult_btn div h3 i {padding-left: 10px;}
.consult_btn div img {position: absolute; width: 80px; left: 50%; transform: translateX(-50%); bottom: 45px; z-index: -1;}

.consult_form {position: fixed; bottom: 25px; right: -100%; background: #fff; z-index: 99999999; border-radius: 30px; padding: 30px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); transition: .5s;}
.consult_form.on {right: 25px;}
.consult_form .close_btn {position: absolute; width: 30px; height: 30px; right: 50px; top: 50px; cursor: pointer;}
.consult_form .close_btn div {transform-origin: center;}
.consult_form .close_btn div:nth-of-type(1) {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); width: 3px; height: 100%; background: #333;}
.consult_form .close_btn div:nth-of-type(2) {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); width: 100%; height: 3px; background: #333;}

.consult_form .consult_box {padding: 20px 50px; background: rgba(255, 255, 255, 0.3); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); border-radius: 30px; text-align: center;}
.consult_form .consult_box h2 {color: #333; font-size: 36px; text-align: center; padding: 30px 0;}
.consult_form .consult_box h2 strong {color: #2f6532;}
.consult_form .consult_box li {padding: 10px 0; border-bottom: 1px solid #ddd;}
.consult_form .consult_box li:last-of-type {border-bottom: none; display: flex; align-items: center;}
.consult_form .consult_box li h3 {display: inline-block; width: 30%; color: #333; vertical-align: top;}
.consult_form .consult_box li h3 span {display: none;}
.consult_form .consult_box li div {display: inline-block; width: 68%; text-align: left;}
.consult_form .consult_box li div input,
.consult_form .consult_box li div textarea {width: 100%;}
.consult_form .consult_box li div .phone_0,
.consult_form .consult_box li div .phone_1,
.consult_form .consult_box li div .phone_2 {display: inline-block; width: 30%;}
.consult_form .consult_box li div input[type="text"] {height: 30px;}
.consult_form .consult_box li div select {height: 30px;}
.consult_form .consult_box .agree_btn {display: inline-block; padding: 20px 0;}
.consult_form .consult_box .AW-mem-btn {margin-top: 15px;}
.consult_form .consult_box .AW-mem-btn button {width: 100%; border-radius: 20px; background: #2f6532; color: #fff; text-align: center; border:#2f6532;}