.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; border-radius: 50%; overflow: hidden;}
/* #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; border-radius: 50%; }
#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 #6ABA50 ;}
#menu.black>li.active {background-color: #6ABA50; }

/*섹션 1 Intro*/
.section#section_01 .swiper-container {width:100%; height:100%;}
.section#section_01 .swiper-container .swiper-button-disabled {opacity: 0.3;}
.section#section_01 .swiper-container .swiper-button-disabled:hover {cursor: initial;}
.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);  backdrop-filter: blur(0); }
.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; font-weight: 400;}
/* .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:1rem; 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-down{
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  color:#fff;
  display:flex;
  flex-wrap:wrap;
  text-align:center;
  font-size:0;
  z-index: 1;
}

.scroll-down .txt-wrap,
.scroll-down .line-wrap{
  position:relative;
}
.scroll-down .txt-wrap span,
.scroll-down .line-wrap span{
  display:inline-block;
}

.scroll-down .txt-wrap{
  margin-bottom:10px;
}
.scroll-down .txt-wrap span.floating-txt{
  font-size:15px;
  font-weight:600;
  animation: floating 1.5s infinite linear;
}
.scroll-down .txt-wrap span.floating-txt a{
  text-decoration:none;
  color:#fff;
  transition:color .5s;
}
.scroll-down .txt-wrap span.floating-txt a:hover{
  /* color:yellow; */
}
@keyframes floating{
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

.scroll-down .line-wrap{
  width:100%;
}
.scroll-down .line-wrap span.line{
  width:2px;
  height:55px;
  background-color:rgba(255,255,255,.3);
  position:relative;
}
.scroll-down .line-wrap span.line::after{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  animation: progress 2.5s infinite linear;
  background-color: #fff;
  content: ''
}

@keyframes progress{
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

.empty{
  position:relative;
  width:100%; 
  height:100vh; 
  background:gray;
}
.empty span{
  position:absolute;
  top:50%; 
  left:50%;
  transform:translate(-50%,-50%);
  font-size:25px;
  font-weight:600;
  color:#fff;
}



.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: #6ABA50;}
.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; overflow: hidden;}
#section_02 .flex-2ea {height: 100%;}
#section_02 .flex-2ea .text-wrap .title {position: relative;}
#section_02 .flex-2ea .content {flex-basis: 50%; max-width: 50%; position: relative; }
#section_02 .flex-2ea .content .title h2 {text-align: left; font-weight: 400; font-size: 12rem; animation-delay: 0.3s; opacity: 0;}
#section_02 .flex-2ea .content .actionBtn24-wrap {animation-delay: 0.3s; opacity: 0;}
#section_02 .flex-2ea {position: relative; z-index: 1; justify-content: flex-start;}
#section_02 .flex-2ea .content>p {animation-delay: 0.3s; opacity: 0; }
#section_02 .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_02 .pd.active {transform: translate(-50%,-50%) scale(1.0);}
#section_02 .flex-2ea .content:first-child { overflow: visible; padding-right: 3rem; padding:15rem; display: flex; justify-content: flex-start; align-items: center;}
#section_02 .flex-2ea .content:last-child img {width: 100%; height: 100%;}
#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 .flex-2ea .content .horizontal-line {display: flex; width:100%; height: 100%;  position: absolute; top:0; left:0; flex-direction: column;}
#section_02 .flex-2ea .content .horizontal-line>div {flex-basis: 100%; width: 100%; max-width: 100%; height:33.333%; background-color: #fff; }
#section_02 .flex-2ea .content .horizontal-line>div:nth-child(1) { transition: all 1s cubic-bezier(.23,1,.32,1);}
#section_02 .flex-2ea .content .horizontal-line>div:nth-child(2) { transition: all 1.5s cubic-bezier(.23,1,.32,1);}
#section_02 .flex-2ea .content .horizontal-line>div:nth-child(3) { transition: all 2s cubic-bezier(.23,1,.32,1);}
#section_02 .flex-2ea .content .horizontal-line>div.active {width: 0%;}

#section_02 .text-wrap {position: relative;   overflow: visible; }
#section_02 .text-wrap p {margin-bottom: 2rem; opacity: 0; animation-delay: 0.8s;}
#section_02 .text-wrap h3 {opacity: 0; animation-delay: 0.6s;}
#section_02 .flex-2ea .content .ft-65 {font-weight: bold; line-height: 1.2;}
#section_02 h4 {line-height: 1.1; animation-delay: 0.5s; opacity: 0; width:100%; max-width: 40rem;}

#section_02 .flex-2ea .count-wrap {display: flex; justify-content: flex-start; margin-top:2rem;}
#section_02 .flex-2ea .count-wrap .item {flex-basis: 50%; max-width: 50%; animation-delay: 0.3s; opacity: 0;}








/*섹션3 our products*/
#section_03 .flex-2ea {height: 100%; align-items: stretch;}
#section_03 .flex-2ea .content {position: relative;  padding:10rem; justify-content: flex-start; flex-basis: 50%; max-width: 50%; background-color: #f9f9f9;}
#section_03 .flex-2ea .content h4 { font-weight: 200; position: relative;  transition: all 0.8s cubic-bezier(.23,1,.32,1); opacity: 0.3;}
#section_03 .flex-2ea .content h2 {width: 100%; transition: all 0.8s cubic-bezier(.23,1,.32,1); position: relative; color:rgba(0,0,0,0.3);}
#section_03 .flex-2ea .content h3 {color:rgba(0,0,0,0.3); transition: all 0.8s cubic-bezier(.23,1,.32,1);}
#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 {  margin-bottom: 3rem;  position: relative;   padding-top:1rem;  transition: all 0.8s cubic-bezier(.23,1,.32,1); opacity: 0; visibility: hidden; transform: translateY(100%);}
#section_03 .flex-2ea .content .actionBtn24-wrap { transition: all 0.8s cubic-bezier(.23,1,.32,1);}
#section_03 .flex-2ea .content:hover h2 {color:#000;}
#section_03 .flex-2ea .content:hover h3 {color:#000;}
#section_03 .flex-2ea .content:hover h4 {opacity: 1;}
#section_03 .flex-2ea .content .actionBtn24-wrap {visibility: hidden; opacity: 0;}
#section_03 .flex-2ea .content:hover .actionBtn24-wrap {visibility: visible; opacity: 1;}


#section_03 .flex-2ea .content:hover {background-color: #fff;}
#section_03 .flex-2ea .content:hover::before {top:-100%;}
#section_03 .flex-2ea .content:hover .actionBtn24-wrap {transform: translateY(0%);}
#section_03 .flex-2ea .content:hover .pd {opacity: 1;}
#section_03 .pd {position: absolute; top:50%; left:50%; width: 100%;  height: 100%; transform: translate(-50%,-50%); pointer-events : none; transition: all 0.8s cubic-bezier(.25, .8, .25, 1); opacity: 0.3; }
#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%; transform: translateY(-5rem); padding-right: 20rem;}
#section_03 .flex-2ea .content .text-wrap .item {position: relative; transform: translateY(5rem); transition: all 0.8s cubic-bezier(.25, .8, .25, 1);  }
#section_03 .flex-2ea .content:hover .text-wrap .item {position: relative; transform: translateY(0%);}
#section_03 .flex-2ea .content:hover p {position: relative; transform: translateY(0%); opacity: 1; visibility: visible;}
#section_03 .flex-2ea .content .mask {position: absolute;  left:0;  width:100%; height:100%; background-color: #6ABA50; z-index: 1; transition: all 1.6s 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.05);}
#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:#6ABA50;}


#section_04 .flex-2ea {height: 100%; align-items: stretch;}
#section_04 .flex-2ea .content {position: relative;  padding:10rem; justify-content: flex-start; flex-basis: 50%; max-width: 50%;}
#section_04 .flex-2ea .content:first-child {color:#fff; text-align: center;}
#section_04 .flex-2ea .content:last-child {padding:0;}
#section_04 .flex-2ea .content h4 { font-weight: 200; position: relative;  transition: all 0.8s cubic-bezier(.23,1,.32,1);}
#section_04 .flex-2ea .content h2 {  width: 100%; transition: all 0.8s cubic-bezier(.23,1,.32,1); position: relative; }
#section_04 .flex-2ea .content .line {width:100%; height:1px; background-color: rgba(255,255,255,0.1); margin-bottom: 3rem;}
#section_04 .flex-2ea .content p {margin-bottom: 3rem;  position: relative;   padding-top:1rem;  transition: all 0.8s cubic-bezier(.23,1,.32,1); opacity: 1;  }
#section_04 .flex-2ea .content .actionBtn24-wrap { transition: all 0.8s cubic-bezier(.23,1,.32,1);}
#section_04 .pd {position: absolute; top:50%; left:50%; width: 100%;  height: 100%; transform: translate(-50%,-50%); pointer-events : none; transition: all 0.8s cubic-bezier(.25, .8, .25, 1); }
#section_04 .pd.active {transform: translate(-50%,-50%) scale(1.0);}
#section_04 .flex-2ea .content .text-wrap {z-index: 1; opacity: 0; position: relative; z-index: 1; width: 100%; max-width: 60rem; margin: 0 auto; }
#section_04 .flex-2ea .content .text-wrap .item {position: relative;  transition: all 0.8s cubic-bezier(.25, .8, .25, 1);  }
#section_04 .flex-2ea .content:hover .text-wrap .item {position: relative; transform: translateY(0%);}
#section_04 .flex-2ea .content .mask {position: absolute;  left:0;  width:100%; height:100%; background-color: #6ABA50; z-index: 1; transition: all 1.6s cubic-bezier(.25, .8, .25, 1); }
#section_04 .flex-2ea .content:first-child .mask {top:0;}
#section_04 .flex-2ea .content:last-child .mask {bottom:0;}
#section_04 .flex-2ea .content .mask.active {height: 0;}
#section_04 .flex-2ea .content a:hover {cursor: pointer;}
#section_04 .flex-2ea .content.un-active {filter: grayscale(100%);transition: filter 0.3s ease; /* 부드럽게 전환 */}
#section_04 .flex-2ea .content.active .b-btn-white {background-color: #fff; color:#6ABA50;}
#section_04 .flex-2ea .content:last-child img {width: 100%; height: 100%; min-width: 100%; min-height: 100%;}
#section_04 .flex-2ea .content:first-child .actionBtn24-wrap {margin: 0 auto;}


/*섹션5 고객지원*/
#section_05 { overflow: hidden; }
#section_05 .container {height:100%; background-image: url(/HANJU/public/img/section-05.jpg); background-size: cover;  display: flex; flex-direction: column;  justify-content: space-between; align-items: center;}
#section_05 .container h4 {opacity: 0; animation-delay: 0.3s;}
#section_05 .container h2 {color:#004D35; opacity: 0; animation-delay: 0.3s; line-height: 1; margin-bottom: 2rem;}
#section_05 .container p {opacity: 0; animation-delay: 0.3s;}
#section_05 .container .line {width:100%; height: 1px; background-color: #004D35; position: relative; opacity: 0; animation-delay: 0.3s;}
#section_05 .container .line div {position: absolute; width:3rem; height: 3px; background-color:#004D35 ; bottom:1px;  animation: lineMove 4s ease-in-out infinite alternate; left:0%;}
#section_05 .actionBtn24-wrap {opacity: 0; animation-delay: 0.3s;}
#section_05 .mask{position: absolute;  top:0; left:0;  width:100%; height:100%; background-color: #6ABA50; z-index: 1; transition: all 1.6s cubic-bezier(.25, .8, .25, 1); }
#section_05 .mask.active {left:100%;}
@keyframes lineMove {
    0% {
        left: 0%;
    }
    100% {
        left: calc(100% - 3rem);
    }
}
#section_05 .container .button-wrap {display: flex; width:100%; justify-content: center; align-items: center; gap:3rem; flex-wrap: nowrap;}
#section_05 .container .flex-2ea {height: 50%; padding-top: 8rem;}
#section_05 .container .banner {width: 100%; position: relative; height: 50%; overflow: hidden;} 
#section_05 .container .banner>img {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%; height: 100%;}






.company-banner .flex-2ea {height: 100%; align-items: stretch;}
.company-banner .flex-2ea .content {position: relative;  padding:15rem; justify-content: flex-start; flex-basis: 50%; max-width: 50%;}
.company-banner .flex-2ea .content::before {content:''; position: absolute; top:0; left:0; width:100%; height: 100%;  filter: grayscale(100%); backdrop-filter: grayscale(100%);  pointer-events: none;  background: rgba(0, 0, 0, 0.3); z-index: 1; transition: all 0.4s cubic-bezier(.23,1,.32,1);}
.company-banner .flex-2ea .content h4 {color:#fff; font-weight: 200; position: relative;  transition: all 0.8s cubic-bezier(.23,1,.32,1);}
.company-banner .flex-2ea .content h2 {color:#fff;  width: 100%; transition: all 0.8s cubic-bezier(.23,1,.32,1); position: relative; }
.company-banner .flex-2ea .content .line {width:100%; height:1px; background-color: rgba(255,255,255,0.1); margin-bottom: 3rem;}
.company-banner .flex-2ea .content .text-wrap {z-index: 1;  position: relative; z-index: 1; width: 100%; }
.company-banner .flex-2ea .content .text-wrap .item {position: relative; transform: translateY(100%);transition: all 0.8s cubic-bezier(.25, .8, .25, 1); }
.company-banner .flex-2ea .content:hover .text-wrap .item {position: relative; transform: translateY(0%);}
.company-banner .flex-2ea .content p { color:#fff; margin-bottom: 3rem;  position: relative;  padding-top:1rem;  transition: all 0.8s cubic-bezier(.23,1,.32,1); opacity: 0; visibility: hidden; transform: translateY(100%); }
.company-banner .flex-2ea .content:hover p {position: relative; transform: translateY(0%); opacity: 1; visibility: visible;}
.company-banner .flex-2ea .content .actionBtn24-wrap { transition: all 0.8s cubic-bezier(.23,1,.32,1);}
.company-banner .flex-2ea .content:hover h4 {transform: translateY(0%); }
.company-banner .flex-2ea .content:hover h2 {transform: translateY(0%); }
.company-banner .flex-2ea .content:hover::before {top:-100%;}
.company-banner .flex-2ea .content:hover .actionBtn24-wrap {transform: translateY(0%);}
.company-banner .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); }
.company-banner .pd.active {transform: translate(-50%,-50%) scale(1.0);}
.company-banner .flex-2ea .content .text-wrap {z-index: 1; position: relative; z-index: 1; width: 100%; }
.company-banner .flex-2ea .content .mask {position: absolute;  left:0; width:100%; height:100%; background-color: #6ABA50; z-index: 1; transition: all 1.6s cubic-bezier(.25, .8, .25, 1); }
.company-banner .flex-2ea .content:first-child .mask {top:0;}
.company-banner .flex-2ea .content:last-child .mask {bottom:0;}
.company-banner .flex-2ea .content .mask.active {height: 0;}
.company-banner .flex-2ea .content:hover .pd {transform: translate(-50%,-50%) scale(1.1);}
.company-banner .flex-2ea .content a:hover {cursor: pointer;}
.company-banner .flex-2ea .content.un-active {filter: grayscale(100%);transition: filter 0.3s ease; /* 부드럽게 전환 */}
.company-banner .flex-2ea .content.active .b-btn-white {background-color: #fff; color:#6ABA50;}

/*섹션4 */

@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%);}
}


.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:55rem; 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:#121212;}
.popup-wraps .content .text-wraps div {flex-basis: 50%; text-align: center; transition: all 0.4s; cursor: pointer;  padding:1rem; background-color:#121212; font-size:14px; color:#fff;}
.popup-wraps .content .text-wraps div:hover {opacity: 0.7;}
.pop_none {display:none;}