.section {width:100%; height:100%;}
.wrap {position: relative;}
.animated {opacity: 0;}


/* 풀페이지 사이드 메뉴*/
#menu {width:1rem; position: fixed; top:50%; transform: translateY(-50%); left:4rem; z-index: 2; }
#menu>li {margin-bottom:1.3rem; position: relative; }
#menu>li>a {width:1rem; height: 1rem; border:1px solid #fff;}
/* #menu>li::before {content:''; position: absolute;  left:1rem; top:0.5rem; width:16px; height:16px; border:1px solid #fff; border-radius: 50%; opacity: 0;} */
/* #menu>li::after {content:''; position: absolute;  left:1.4rem; top:0.9rem; width:8px; height:8px; background-color:#fff; border-radius: 50%; opacity: 0.3;} */
#menu>li.active {background-color:#fff;color:#fff; }
#menu>li.active>a {opacity: 1; font-weight: bold;}
#menu>li.active::before {opacity: 1;}
#menu>li.active::after {opacity: 1;}

#menu>li:hover::before {opacity: 0.7;}
#menu>li:hover::after {opacity: 0.7;}
#menu>li:hover a {opacity: 0.7;}

#menu.black>li>a {border:1px solid #22288D ;}
#menu.black>li.active {background-color: #22288D; }

/*섹션 1 Intro*/
.section#section_01 .swiper-container {width:100%; height:100%;}
.section#section_01 .swiper-container .swiper-button-disabled {visibility: hidden;}
.section#section_01 .swiper-container .swiper-wrapper {width:100%; height:100%;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide {width:100%; height:100%; position: relative; overflow: hidden;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active {opacity: 1 !important;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .banner-image {position: absolute;  top:50%; left:50%; transform: translate(-50%,-50%) scale(1.1); width: 100%; height: 100%; transition: all 5s;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .banner-image.scale-down {transform: translate(-50%,-50%) scale(1); }
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .cont-1600 {width: 100%;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .cont-1600>.product-wrap {margin-right:2rem; }
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .cont-1600>.title-wrap {color:#fff; position: relative; z-index: 1; width: 100%; max-width: 75rem;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .cont-1600>.title-wrap>h2 {width:100%; font-size:6.5rem; max-width:75rem; line-height: 1.1; margin-bottom:2rem; position: relative; opacity: 0; word-break: keep-all;  white-space: normal;  word-break: keep-all;   overflow-wrap: break-word; }
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .cont-1600>.title-wrap>h1 {width:100%; font-size:6.5rem; max-width:75rem; line-height: 1.1; margin-bottom:2rem; position: relative; opacity: 0; word-break: keep-all;  white-space: normal;  word-break: keep-all;   overflow-wrap: break-word; }
/* .section#section_01 .swiper-container .swiper-wrapper .swiper-slide .cont-1600>.title-wrap>h2>span {word-break: keep-all;} */
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .cont-1600>.title-wrap>p {font-size:1.8rem; margin-bottom:5rem; opacity: 0; } 
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .cont-1600>.title-wrap>a {color:#fff; font-size:1.6rem; padding:1rem 3rem; border-bottom:1px solid #fff; font-weight: bold; display: inline-block; margin-top:2rem; transition: all 0.4s; opacity: 0;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .cont-1600>.title-wrap>a:hover {background-color:#C81D09; color:#fff; border-bottom:1px solid #C81D09; opacity: 0;}
.scroll-container {position: absolute;  bottom: 3rem; left:50%; transform: translate(-50%,-50%); color:#fff; z-index: 1;}


.scroll-container a {
  padding-top: 6rem;
  color:#fff;
  cursor: default;
  font-size: 1.4rem;
}


.scroll-container h2 {
  position: relative;
  bottom:-6rem;
  font-weight: 300;
}
.scroll-container a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
.scroll-container a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  animation: sdb9 2s infinite;
  box-sizing: border-box;
}
@keyframes sdb9 {
  0% {transform: translate(0, 0); opacity: 0;}
  40% {opacity: 1;}
  80% {transform: translate(0, 20px); opacity: 0;}
  100% {opacity: 0;}
}



.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .cont-1600 {flex-wrap: nowrap;}
/* .section#section_01 .swiper-container .swiper-wrapper .swiper-slide .item-box::before {content:''; position: absolute; top:0; left:0; width:0%; height:100%; transition: all 0.4s; background-color:rgba(240,131,0,0.7);} */
/* .section#section_01 .swiper-container .swiper-wrapper .swiper-slide .item-box:hover::before {width:100%;} */
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .item-box:hover {opacity: 0.8;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .item-box>ul {padding:2rem;  position: relative; opacity: 0;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .item-box>ul>.img-wrap {max-width: 30%; flex-basis: 30%;  position: relative;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .item-box .text-wrap {color:#fff; max-width: 70%; flex-basis: 70%; position: relative; padding:1rem;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .item-box .text-wrap .line-gauge {width:100%; height:3px; background-color:rgba(0,0,0,0.4); position: relative;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide .item-box .text-wrap .line-gauge::before {content:''; position: absolute; top:0; left:0; width:0%; height:3px; background-color:#fff;}
.section#section_01 .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .item-box .text-wrap .line-gauge::before {content:''; position: absolute; top:0; left:0; width:0%; height:3px; background-color:#fff; animation: line-animation 8s linear forwards;}

/* .swiper-pagination-wrapper  */
.swiper-pagination-wrapper {flex-wrap: nowrap;}
.swiper-pagination-wrapper>div {width: auto; cursor: pointer;}
.swiper-pagination-wrapper>div.btn:hover {opacity: 0.4;}
.swiper-pagination-wrapper .swiper-pagination {position: relative; display: flex; justify-content: center; align-items: center;}
.swiper-pagination-wrapper .swiper-pagination span {margin-right: 0.5rem; margin-left:0.5rem; opacity: 1; background-color: transparent;}
.swiper-pagination-wrapper .swiper-pagination .swiper-pagination-bullet-active{background-color: #22288D;}
.swiper-pagination-wrapper .swiper-pagination .swiper-pagination-bullet {font-size: 1.8rem; width: 4rem; height: 4rem; color:#fff; display: flex; justify-content: center; align-items: center; font-weight: bold;}


@-webkit-keyframes line-animation {
  from {
     width:0;
  }
  to {
    width:100%;
  }
}


/*섹션2 About*/
#section_02 {position: relative;}
#section_02 .flex-2ea {position: relative; z-index: 1;}
#section_02 .flex-2ea .content {flex-basis: 50%; max-width: 50%;}
#section_02 .flex-2ea .content>p {animation-delay: 0.3s; opacity: 0; }
#section_02 .flex-2ea .content:first-child {padding-bottom: 17rem; overflow: visible; }
#section_02 .flex-2ea .content .year-wrap {display: flex; justify-content: flex-start; align-items: stretch; opacity: 0; animation-delay: 1s;}
#section_02 .flex-2ea .content .year-wrap + p {margin-top: 3rem; margin-bottom: 5rem; opacity: 0; animation-delay: 1s;}
#section_02 .flex-2ea .content .year-wrap .item {flex-basis: 50%; max-width: 50%;}
#section_02 .flex-2ea .content .year-wrap .item:first-child {border-right:1px solid rgba(255,255,255,0.1)}
#section_02 .flex-2ea .content .year-wrap .item:last-child {padding-left:4rem;}
#section_02 .flex-2ea .content .b-btn-white {animation-delay: 1.2s; opacity: 0;}
#section_02 .text-wrap {position: relative; color:#fff; padding-left:33rem; overflow: visible;}
#section_02 .flex-2ea .content .ft-65 {font-weight: bold; line-height: 1.2;}
#section_02 h2 {line-height: 1.1; margin-bottom: 4rem; font-weight: 900; position: relative; opacity: 0; animation-delay: 0.3s;}
#section_02 h4 {line-height: 1.1; animation-delay: 0.5s; opacity: 0; width:100%; max-width: 40rem;}
#section_02 .section-02-bg {position: absolute; top:0%; right:0%;  width:100%; height:100%; z-index: 0; transition: all 0.8s cubic-bezier(.25, .8, .25, 1);   background: linear-gradient(45deg, #2F3BAC, #5A5AAC);}

#section_02 .section-02-bg.active {width:50%;}
#section_02 .company-image-wrap {
    position: relative;
    width: 100%;           /* 이미지 크기 맞춤 */
    max-width: 57rem;      /* 필요시 */
    margin: 0 auto;
    border-radius: 3rem;
    position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); border-radius: 3rem; overflow: hidden;
}

#section_02 .company-image img {
    width: 100%;
    display: block;
}





/*섹션3 our products*/
#section_03 .flex-2ea {height: 100%; align-items: stretch;}
#section_03 .flex-2ea .content {position: relative; height: 100%; padding:15rem; justify-content: flex-start; flex-basis: 50%; max-width: 50%;}
#section_03 .flex-2ea .content h4 {margin-bottom: 1rem;}
#section_03 .flex-2ea .content h2 {color:#fff; margin-bottom: 2rem; width: 100%;}
#section_03 .flex-2ea .content .line {width:100%; height:1px; background-color: rgba(255,255,255,0.1); margin-bottom: 3rem;}
#section_03 .flex-2ea .content p {color:#fff; margin-bottom: 3rem;}
#section_03 .pd {position: absolute; top:50%; left:50%; width: 100%; height: 100%; transform: translate(-50%,-50%) scale(1.2); pointer-events : none; transition: all 0.8s cubic-bezier(.25, .8, .25, 1); }
#section_03 .pd.active {transform: translate(-50%,-50%) scale(1.0);}
#section_03 .flex-2ea .content .text-wrap {z-index: 1; opacity: 0; position: relative; z-index: 1; width: 100%; animation-delay: 0.3s;}
#section_03 .flex-2ea .content .mask {position: absolute;  left:0; width:100%; height:100%; background-color: #22288D; z-index: 1; transition: all 0.8s cubic-bezier(.25, .8, .25, 1); }
#section_03 .flex-2ea .content:first-child .mask {top:0;}
#section_03 .flex-2ea .content:last-child .mask {bottom:0;}
#section_03 .flex-2ea .content .mask.active {height: 0;}
#section_03 .flex-2ea .content:hover .pd {transform: translate(-50%,-50%) scale(1.2);}

#section_03 .flex-2ea .content a:hover {cursor: pointer;}
#section_03 .flex-2ea .content.un-active {filter: grayscale(100%);transition: filter 0.3s ease; /* 부드럽게 전환 */}
#section_03 .flex-2ea .content.active .b-btn-white {background-color: #fff; color:#22288D;}

/*섹션4 */
#section_04 {background-color: #fff; overflow: hidden;}
#section_04 .btn-wrap {opacity: 0; flex-wrap: nowrap; overflow: visible;  gap:1rem;}
#section_04 .btn-wrap a {background-color: #22288D; color:#fff; border:1px solid #22288D; text-align: center;}
#section_04 .btn-wrap a:last-child {border:1px solid #fff; color:#fff; background-color: rgba(255,255,255,0.1);}
#section_04 .pd {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale(1.2); width: 100%; height: auto; min-width: 100%; min-height: 100%; transition: all 5s cubic-bezier(.23,1,.32,1);}
#section_04 .pd.active {transform: translate(-50%,-50%) scale(1.0);}
#section_04 .cont-1600 {align-items: center;}
#section_04 .cont-1600 .content {margin-left:50%; flex-basis: 50%; max-width: 50%;}
#section_04 .cont-1600 .content .icon {margin: 0 auto; width:8rem; height: 8rem; border-radius: 1rem; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(15px); margin-bottom: 3rem; opacity: 0;}
#section_04 .cont-1600 .content .icon {margin: 0 auto; width:8rem; height: 8rem; border-radius: 1rem; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(15px); margin-bottom: 3rem; opacity: 0;}
#section_04 .cont-1600 .content .text-wrap {color:#fff; text-align: center;}
#section_04 .cont-1600 .content .text-wrap h2 {line-height: 1.2; font-weight: 600; margin-bottom: 3rem; opacity: 0; animation-delay: 0.3s;}
#section_04 .cont-1600 .content .text-wrap p {width: 100%; max-width: 100%;  opacity: 0; animation-delay: 0.2s; margin: 0 auto; margin-bottom: 3rem;}


/*섹션5 PR Video*/
#section_05 {background-color: #22288D; }
#section_05 .cont-1600 {width:100%; text-align: center; text-align: left; align-items: center;}
#section_05 .cont-1600  h2 {line-height: 1.1;  color:#fff; font-weight: 600;}
#section_05 .cont-1600 .icon-wrap {display: flex; justify-content: center; align-items: center; gap:2rem;}
#section_05 .cont-1600 .icon-wrap .item {flex-basis: calc(33.333% - 2rem); max-width: calc(33.333% - 2rem); overflow: hidden; position: relative; border:1px solid #fff; border-radius: 2rem; height: 25rem;}
#section_05 .cont-1600 .icon-wrap .item div {flex-direction: column; color:#fff; font-size:1.6rem; text-align: center; position: relative; z-index: 1;}
#section_05 .cont-1600 .icon-wrap .item div img:nth-of-type(2) {display: none;}
#section_05 .cont-1600 .icon-wrap .item div p {margin-top: 2rem;}
#section_05 .cont-1600 .icon-wrap .item:hover div img:nth-of-type(1) {display: none;}
#section_05 .cont-1600 .icon-wrap .item:hover div img:nth-of-type(2) {display: block;}
#section_05 .cont-1600 .icon-wrap .item:hover div p { color:#22288D;}
#section_05 .cont-1600 .icon-wrap .item::before {content:''; pointer-events : none; opacity: 0; position: absolute; top:0; right:0; transform: translate(50%,-50%); width:5rem; height: 5rem; border-radius: 50%; background-color: #fff; transition: all 1.2s cubic-bezier(.23,1,.32,1); }
#section_05 .cont-1600 .icon-wrap .item:hover::before {transform: translate(50%,-50%); width:100rem; height: 100rem; opacity: 1;}
#section_05 .pd {position: absolute; top:50%; left:50%; width: 100%; height: 100%; transform: translate(-50%,-50%) scale(1.2); pointer-events : none; transition: all 0.8s cubic-bezier(.25, .8, .25, 1); }


@keyframes animate1
{
    0%{ transform:  translateX(-100%);}
    100%{transform:  translateX(100%);}
}

@keyframes animate2
{
    0%{ transform:  translateY(-100%);}
    100%{transform:  translateY(100%);}
} 


@keyframes animate3
{
    0%{ transform:  translateX(100%);}
    100%{transform:  translateX(-100%);}
}

@keyframes animate4
{
    0%{ transform:  translateY(100%);}
    100%{transform:  translateY(-100%);}
}



#section_05 .cont-1600>.content .video-wrap::before {content:''; position: absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(200,29,9,0.3); transition: all 0.4s; opacity: 0;}
#section_05 .cont-1600>.content .video-wrap:hover::before {opacity: 1;}
#section_05 .cont-1600>.content .video-wrap .youtube-logo {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
#section_05 .cont-1600>.content .video-wrap .youtube-logo.img {width:100%;}
#section_05 .cont-1600>.content .video-wrap>img {vertical-align: middle;}



.family-banner-wrap {border-top:1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fff;}
#family-banner {margin: 0 auto;  max-width: 1600px; overflow: hidden;   background-color: #fff; height: 8rem; padding-left:5rem; padding-right: 5rem; position: relative;}
#family-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15rem;
    height: 100%;
    pointer-events: none;
    background-color: white; /* 흰색에서 시작 */
    
    -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 2;
}

#family-banner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0; /* 왼쪽 대신 오른쪽으로 위치 변경 */
    width: 15rem;
    height: 100%;
    pointer-events: none;
    background-color: white;

    -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 2;
}

#family-banner .swiper-button { z-index: 3; cursor: pointer; background-color: #fff;  width:5rem; height: 5rem; border-radius: 50%; border:1px solid #ddd; position: absolute; top:50%; transform: translate(0%,-50%);}
#family-banner .swiper-button.prev {left:2rem;}
#family-banner .swiper-button.next {right:2rem;}
#family-banner .swiper-wrapper {width: calc(100% - 20rem); }
#family-banner .swiper-wrapper .swiper-slide {display: flex; justify-content: center; align-items: center;}
#family-banner .swiper-wrapper .swiper-slide img {width: 100%; padding:1rem;}
#section_05 .flex-2ea {height: calc(70% - 8rem);}
#section_05 footer {height: 30%;}


.popup-wraps {width:100%; height:100%; position: fixed; top:0; left:0; max-width:100%; display: flex; justify-content: center; align-items:center; background-color:rgba(0,0,0,0.6); z-index: 999; flex-wrap: wrap;}
.popup-wraps .content {width:100%;  max-width:50rem; margin:1%; transition: all 0.4s;}
.popup-wraps .content .img-wraps img {width:100%; background-color:#fff;}
.popup-wraps .content .text-wraps {display:flex; justify-content: flex-start; align-items: center; color:#333333;  background-color:#fafafa;}
.popup-wraps .content .text-wraps div {flex-basis: 50%; text-align: center; transition: all 0.4s; cursor: pointer;  border:1px solid #ddd; padding:10px; background-color:#fafafa; font-size:14px;}
.popup-wraps .content .text-wraps div:hover {opacity: 0.7;}
.pop_none {display:none;}