@charset "utf-8";


/* common */
.mp-head {margin-bottom: 60px;}
.mp-tag {font-size: 20px; font-weight: 700; color: var(--primary); padding-bottom: 22px; display: block;}
.mp-tit {font-size: 54px; font-weight: 500; line-height: 1.25;}
.mp-tit strong {font-weight: 700;}

@media screen and (hover:hover) {}
@media screen and (max-width: 1399px) {
  .section, .section.fp-section, #mainpage .section, #mainpage .section.fp-section {height: auto !important; min-height: auto !important; max-height: none !important;}
  .fp-tableCell, #mainpage .fp-tableCell {height: auto !important; min-height: auto !important; max-height: none !important;}
  .section {padding-block: 160px;}
  .mp-tag {font-size: 18px;}
  .mp-tit {font-size: 48px;}
}
@media screen and (max-width: 767px) {
  .mp-tag {font-size: 16px;}
  .mp-tit {font-size: 32px;}
}
@media screen and (max-width: 499px) {}


.visual {padding-top: 0; width: 100%; height: 100vh; position: relative; overflow: hidden;}
.visual .container {padding: 105px 0; height: 100%; display: flex; align-items: center;}
.visual .container .content {width: 100%; height: 200px; position: relative;}
.visual .container .content .title {font-size: 70px; font-weight: 700; line-height: 1.5; color:#fff;}
.visual .container .content .desc {font-size: 48px; font-weight: 500; color:#fff; line-height: 1.25; margin-top: 24px; display: block;}

.visual .bg img {animation: visual_ani 5s ease-in-out forwards;}

@keyframes visual_ani {
  0% {transform: scale(1);}
  100% {transform: scale(1.1);}
}

.scroll-box {position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 10px;}
.scroll-box .scroll-ani {width: 20px; animation: scroll_ani 1s ease-in-out infinite alternate;}
.scroll-box .scroll-text {font-size: 16px; font-weight: 400; font-family: var(--ff-secondary); color: #fff;}

@keyframes scroll_ani {
  0% {transform: translateY(5px);}
  100% {transform: translateY(-5px);}
}

@media screen and (hover:hover) {}
@media screen and (max-width:1399px) {
  .visual .container {height: 100vh;}
  .visual .container .content .title {font-size: 50px;}
  .visual .container .content .desc {font-size: 30px;}
}
@media screen and (max-width:767px) {
  .visual .container {align-items: end;}
  .visual .container .content  {justify-content: center; text-align: center;}
  .visual .container .content .title  {font-size: 40px;}
  .visual .container .content .desc {font-size: 20px;}
}

/* Business */
.biz-section {position: relative; overflow: hidden;}
.biz-section .container {padding: 0; height: 100vh; display: flex; flex-direction: column; justify-content: space-evenly; padding-top: 88px; padding-bottom: 20px;}

.biz-section .biz-top {position: relative; display: flex; gap: 120px; margin-top: 0;}
.biz-section .mp-head {margin-bottom: 0;}
.biz-section .biz-top .mp-tit {padding-block: 10px; color: #fff;}

.biz-section .mp-body {width: 100%; height: auto; display: grid; grid-template-columns: repeat(4, 1fr);}
.biz-section .mp-body .item {position: relative; height: min(330px, calc((100vh - 200px) / 2));}
.biz-section .mp-body .item .img-box{width: 100%; height: 100%; position: relative; z-index: 8;}
/* .biz-section .mp-body .item .img-box::after{content:'';position:absolute;inset:0;background-color:#000;opacity:.4;transition:opacity .3s ease;pointer-events:none;} */
.biz-section .mp-body .item .img-box img{object-fit: cover; width: 100%; height:100%;}
.biz-section .mp-body .item .img-box .hover-img-box {position: absolute; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease; pointer-events: none;}
.biz-section .mp-body .item .img-box .hover-img-box img {width: 100%; height: 100%; object-fit: cover;}
.biz-section .mp-body .item .content-box {position: absolute; left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 350/204; padding-inline: 30px; padding-bottom: 50px; display: flex; flex-direction: column; justify-content: end; z-index: 10;}
.biz-section .mp-body .item .content-box .view-more{top: 30px; left: 30px; width: 42px; height: 42px; background: rgba(255, 255, 255, 0.2); display: flex; justify-content: center; align-items: center; border-radius: 50%; z-index: 3; transition: all .4s ease; margin-bottom: 14px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.08); }
.biz-section .mp-body .item .content-box .view-more svg path {stroke: #fff; transition: all .4s ease;}
.biz-section .mp-body .item .content-box h3{font-size: 24px; font-weight: 500; color: #BEBEBE;}
.biz-section .mp-body .item .content-box h3 span{font-size: 20px;}

@media (hover: hover) {
  .biz-section .mp-body .item:hover {z-index: 10;}

  .biz-section .mp-body .item:nth-child(1):hover .img-box,
  .biz-section .mp-body .item:nth-child(2):hover .img-box,
  .biz-section .mp-body .item:nth-child(5):hover .img-box,
  .biz-section .mp-body .item:nth-child(6):hover .img-box {width: 200%; z-index: 10;}

  .biz-section .mp-body .item:nth-child(3):hover .img-box,
  .biz-section .mp-body .item:nth-child(4):hover .img-box,
  .biz-section .mp-body .item:nth-child(7):hover .img-box,
  .biz-section .mp-body .item:nth-child(8):hover .img-box {width: 200%; transform: translateX(-50%); z-index: 10;}
  .biz-section .mp-body .item:nth-child(3):hover .content-box,
  .biz-section .mp-body .item:nth-child(4):hover .content-box,
  .biz-section .mp-body .item:nth-child(7):hover .content-box,
  .biz-section .mp-body .item:nth-child(8):hover .content-box {width: 200%; aspect-ratio: 700/204; transform: translateX(-50%);}

  .biz-section .mp-body .item:hover .img-box > img {opacity: 0;}
  .biz-section .mp-body .item:hover .img-box .hover-img-box {opacity: 1; z-index: 10;}
  .biz-section .mp-body .item:hover .img-box .hover-img-box img {position: relative; z-index: 10;}
  .biz-section .mp-body .item:hover .content-box {z-index: 11;}

  .biz-section .mp-body .item:hover .content-box .view-more{background: #fff;}
  .biz-section .mp-body .item:hover .content-box .view-more svg path {stroke: var(--primary);}
  .biz-section .mp-body .item:hover .content-box h3{font-weight: 700; color: #fff;}
}
@media screen and (max-width: 1399px) {
  .biz-section .biz-top {display: block;}
  .biz-section .biz-top .mp-tit {padding-top: 0;}
  .biz-section .container {height: fit-content;}
  .biz-section .mp-body {grid-template-columns: 1fr 1fr; height: auto;}
  .biz-section .mp-body .item:nth-child(odd):hover .img-box {width: 200%; transform: translateX(0); z-index: 10;}
  .biz-section .mp-body .item:nth-child(even):hover .img-box {width: 200%; transform: translateX(-50%); z-index: 10;}
  .biz-section .mp-body .item:nth-child(odd):hover .content-box {width: 200%; aspect-ratio: 700/204; transform: translateX(0);}
  .biz-section .mp-body .item:nth-child(even):hover .content-box {width: 200%; aspect-ratio: 700/204; transform: translateX(-50%);}
}
@media screen and (max-width: 767px) {
  .biz-section .mp-body {grid-template-columns: 1fr;}
  .biz-section .mp-body .item {height: 240px;}
  .biz-section .mp-body .item .img-box img{aspect-ratio: none; width: 100%; height: 240px;}
  .biz-section .mp-body .item:nth-child(odd):hover .img-box {width: 100%; aspect-ratio: none; height: 240px; transform: translateX(0); z-index: 10;}
  .biz-section .mp-body .item:nth-child(even):hover .img-box {width: 100%; aspect-ratio: none; height: 240px; transform: translateX(0); z-index: 10;}
  .biz-section .mp-body .item:nth-child(odd):hover .content-box {width: 100%; aspect-ratio: 350/204; transform: translateX(0); padding-bottom: 20px;}
  .biz-section .mp-body .item:nth-child(even):hover .content-box {width: 100%; aspect-ratio: 350/204; transform: translateX(0); padding-bottom: 20px;}
  .biz-section .mp-body .item .content-box {padding-bottom: 20px;}
  .biz-section .mp-body .item .content-box h3 {font-size: 22px; font-weight: 700;}
}

/* service */
.service .container {height: 100vh;}
.service .mp-head {position: relative; display: flex; padding-top: 192px; margin-bottom: 80px;}
.service .mp-head .mp-tit {color: #fff;}

.service .mp-body {display: grid; grid-template-columns: repeat(4,1fr); gap: 13px;}
.service .mp-body .item {width: 100%; position: relative;}
.service .mp-body .item .content-box {height: 300px; padding-bottom: 48px; padding-inline: 29px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; background-color: rgba(255, 255, 255, 0.1); opacity: 0.93; backdrop-filter: blur(30px) brightness(1.08); box-shadow: inset 2px 2px 2px rgba(255,255,255, 0.16);}
.service .mp-body .item .content-box .icon-box {flex: 1; display: flex; align-items: center;}
.service .mp-body .item .content-box h3 {font-size: 24px; font-weight: 700; color: #fff;}
.service .mp-body .item .rope-box {width: 100%; position: relative; z-index: 5;}
.service .mp-body .item .rope-box svg {margin-inline: auto;}
.service .mp-body .item .text-box {background-color: #EBE6E2; width: 100%; height: 211px; padding: 60px 48px; position: relative; top: -23px; z-index: 4;}
.service .mp-body .item .text-box p {font-size: 16px; font-weight: 300; text-align: center;}

.service .bg{height: 100vh;}

@media screen and (hover:hover) {

}
@media screen and (max-height: 980px) and (min-width:1400px) {
  .service .mp-head {margin-bottom: 50px; padding-top: 130px;}
  .service .mp-body {margin-bottom: 200px;}
  .service .mp-body .item .text-box {padding-block: 40px; height: 171px;}
  .service .bg{height: 120%; padding-bottom: 50px;}
}

@media screen and (max-width:1399px){
  .service .container {height: 100%;}
  .service .mp-head {padding-top: 0;}
  .service .mp-body {grid-template-columns: 1fr;}
  .service .mp-body .item {display: flex; align-items: center;}
  .service .mp-body .item .content-box {width: 300px; height: auto; min-height: 230px; padding-block: 20px;}
  .service .mp-body .item .content-box h3 {font-size: 22px;}
  .service .mp-body .item .rope-box {width: auto; min-width: 100px;}
  .service .mp-body .item .rope-box svg {transform: rotate(-90deg);}
  .service .mp-body .item .text-box {height: 100%;padding-block: auto; top: 0; left: -5px; display: flex; align-items: center; justify-content: center;}
  .service .mp-body .item .rope-box.fadedown {transform: none;}
  .service .bg{height: 100%; padding-bottom: 0;}
}
@media screen and (max-width:767px){
  .service .mp-head {gap: 20px;}
  .service .mp-body .item {flex-direction: column;}
  .service .mp-body .item .content-box {width: 100%; height: 240px;}
  .service .mp-body .item .text-box {left: 0; padding: 10px; margin-top: 10px;}
  .service .mp-body .item .text-box p {font-size: 14px; font-weight: 300; text-align: center;}
}


/* product */
.product {position: relative; overflow: hidden;}
.product .mp-head .mp-tit {color: #fff;}
.product .container {position: absolute; left: calc((100% - 1400px) / 2);}

.product .container.top {top: 16%;}
.product .container.bottom {bottom: 13%; display: flex; justify-content: flex-end}
.product .mp-body {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 890px;}
.product .mp-body .item {position: relative; width: 100%; height: 275px; background-color: rgba(255,255,255,0.1); padding-block: 60px 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; backdrop-filter: blur(10px); transition: all .4s ease; overflow: hidden;}
.product .mp-body .item::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, #F17C39, var(--primary)); opacity: 0; transition: opacity .4s ease; z-index: 0;}
.product .mp-body .item > * {position: relative; z-index: 1;}
.product .mp-body .item .arrow-box {position: absolute; top: 30px; right: 24px; width: 42px; height: 42px; background: rgba(255, 255, 255, .4); display: flex; justify-content: center; align-items: center; border-radius: 50%; z-index: 3; transition: all .4s ease;}
.product .mp-body .item .arrow-box svg path {stroke: #fff; transition: all .4s ease;}
.product .mp-body .item img {width: 100px; height: 100px; opacity: .4; margin-bottom: 10px; transition: all .4s ease;}
.product .mp-body .item h4 {font-size: 24px; font-weight: 500; line-height: 1.5; color: #fff; text-align: center; opacity: .4; transition: all .4s ease;}

@media screen and (hover:hover) {
  .product .mp-body .item:hover {background-color: transparent;}
  .product .mp-body .item:hover::before {opacity: 1;}
  .product .mp-body .item:hover .arrow-box {background: #fff;}
  .product .mp-body .item:hover .arrow-box svg path {stroke: var(--primary);}
  .product .mp-body .item:hover img {opacity: 1;}
  .product .mp-body .item:hover h4 {opacity: 1;}
}
@media screen and (max-width:1399px){
  .product .container {position: static;}
  .product .mp-body .item .arrow-box {width: 36px; height: 36px;}
  .product .mp-body .item h4 {font-size: 22px; font-weight: 700;}
}
@media screen and (max-width:767px){
  .product .mp-body {display: block;}
  .product .mp-body .item {margin-bottom: 13px; height: 240px;}
}

/* project */

.viewmore-btn {position: absolute; top: -30px; right: 0; width: 170px; height: 170px; display: inline-flex; align-items: center; justify-content: center;}
.viewmore-inner {position: absolute; width: 100px; height: 100px; border-radius: 50%; background: #3A3A3A; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: .3s ease;}
.circle-text-svg {width: 170px; height: 170px; transform-origin: center; animation: rotateText 12s linear infinite;}
.circle-text {font-size: 11px; letter-spacing: 2px; fill: #B3B3B3; text-transform: uppercase;}

@keyframes rotateText {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (hover: hover) {
  .viewmore-btn:hover .viewmore-inner {background: var(--primary);}
}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}

.project-wrap {width: 100%; height: calc(100vh - 100px); display: flex; align-items: start; background-color: #F5F5F5; overflow: hidden; padding-top: 194px;}
.project-wrap .mp-head {margin-bottom: 90px; position: relative; width: 100%;}

.project-swiper {width: 1970px; max-height: 517px;}
.project-swiper .swiper-slide {width: 600px;}
.project-swiper .swiper-wrapper {height: auto;}

.project-swiper .item {transition: .3s ease; display: flex;}
.project-swiper .item .inner {width: 100%; display: flex; flex-direction: column; position: relative;}
.project-swiper .item .inner .img-box {clip-path: inset(0 0 170px 0); width: 100%; max-height: 517px; height: 517px; position: relative;}
.project-swiper .item .inner .img-box::before {content: ''; width: 100%; height: 233px; background: transparent; position: absolute; left: 0; top: 0; mix-blend-mode: saturation; z-index: 1;}
.project-swiper .item .inner .img-box img {width: 100%; height: auto; object-fit: cover;}

.project-swiper .item .inner .text-box {margin: -180px 0 0; padding: 30px;}
.project-swiper .item .inner .tag {color: #919191; font-size: 18px; font-weight: 700; font-family: var(--ff-secondary); margin-bottom: 5px;}
.project-swiper .item .inner .sbj {font-size: 30px; font-weight: 700; margin-bottom: 10px;}
.project-swiper .item .inner .floating {position: absolute; right: 10px; top: 30px; width: 150px; height: auto; display: none;}
.project-swiper .item .inner .desc {font-size: 0; font-weight: 500; font-family: var(--ff-secondary); color: #E2E2E2; padding: 0 0 0 0; max-width: 500px; text-overflow: ellipsis;}
.project-swiper .item .inner .desc .bar {margin: 0 18px; width: 1px; height: 11px; background-color: #888888; display: inline-block;}

.project-swiper .swiper-slide-active .item .inner .img-box {clip-path: inset(0 0 0 0);}
.project-swiper .swiper-slide-active .item .inner .img-box img {width: 100%; height: 100%; object-fit: cover;}
.project-swiper .swiper-slide-active .text-box {position: absolute; margin: 0; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,.74);}
.project-swiper .swiper-slide-active .text-box .tag {color: #F17C39;}
.project-swiper .swiper-slide-active .text-box .sbj {color: #fff;}
.project-swiper .swiper-slide-active .text-box .floating {display: block;}
.project-swiper .swiper-slide-active .text-box .desc {font-size: 16px; color: #fff;}

.project-swiper .swiper-slide-active .desc {color: #fff;}
.project-swiper .swiper-slide-active .item .inner .img-box::before {opacity: 0;}

.project-swiper .controller {position: relative; height: 51px; z-index: 111; display: flex; gap: 21.5px; align-items: center; margin: -51px 0 0;}
.project-swiper .pagination {width: 587px; position: relative; display: block;}
.project-swiper .navigation {height: 51px; right: 0; display: flex; align-items: center; justify-content: center; margin: 0 72.5px 0 740px; position: relative;}

.project-swiper .swiper-pagination-progressbar {background: rgba(201,198,198,.27);}
.project-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #878787;}

.project-swiper .navigation .swiper-button-next {right: -72.5px; transform: translateY(-50%); margin-top: 0;}
.project-swiper .navigation .swiper-button-prev {left: -72.5px; margin-top: 0; transform: translateY(-50%);}
.project-swiper .navigation .swiper-button-prev, .project-swiper .navigation .swiper-button-next {width: 51px; height: 51px;}
.project-swiper .navigation .swiper-button-next:after, .project-swiper .navigation .swiper-button-prev:after {display: none;}

/* Marquee */
.section.project {position: relative; background-color: #F5F5F5;}
.marquee-wrap {overflow: hidden; width: 100%; padding-block: 20px; background-color: #F0F0F0;}
/* .marquee-wrap {overflow: hidden; width: 100%; position: relative; padding-block: 20px; background-color: #F0F0F0; bottom: 100px;} */
/* .marquee-wrap {overflow: hidden; width: 100%; position: relative; padding-block: 60px;} */
/* .marquee-wrap {overflow: hidden; width: 100%; position: absolute; padding-block: 20px; bottom: 0; background-color: #F0F0F0;} */
.marquee-container {display: flex; width: fit-content; animation: marquee 30s linear infinite; justify-content: center;  mix-blend-mode: multiply;}
.marquee-content {display: flex; list-style: none; margin: 0; padding: 0; gap: 20px; flex-shrink: 0;}
.marquee-content li {flex-shrink: 0;}
.marquee-content img {display: block; width: 160px; height: auto;}

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

@media screen and (hover:hover) {}
@media screen and (min-height: 1081px) and (min-width:1400px) {
  .project-wrap .mp-head {margin-bottom: calc(90px + ((100vh - 1080px)/2));}
  /* .project-wrap {padding-top: 100px;}
  .project-wrap .mp-head {margin-bottom: 30px; }
  .viewmore-btn {top: -70px}
  .project-swiper .item .inner .img-box {clip-path: inset(0 0 70px 0);}
  .project-swiper .item .inner .img-box {max-height: 350px; height: auto;} */
}
@media screen and (max-height: 980px) and (min-width:1400px) {
  .project-wrap {padding-top: 100px; align-items: center;}
  .project-wrap .mp-head {margin-bottom: 50px; }
  .viewmore-btn {top: -70px}
  .project-swiper .item .inner .img-box {clip-path: inset(0 0 70px 0);}
  .project-swiper .item .inner .img-box {max-height: 433px; height: auto;}
}
@media screen and (max-width:1399px){
  .project {padding-block: 160px 0; overflow-x: hidden;}
  /* 가로 스크롤바 방지(전환 시 일시 확장 차단), 세로는 컨트롤러 노출 위해 visible */
  .project-wrap {height: auto; padding-block: 20px; overflow-x: hidden; overflow-y: visible;}
  .viewmore-btn {top: -30px; right: 0; width: 140px; height: 140px;}
  .viewmore-inner {position: absolute; width: 80px; height: 80px;}
  .circle-text-svg {width: 140px; height: 140px;}
  /* 반응형: 옆 슬라이드는 가리고, 아래 컨트롤러만 보이게 */
  .project-swiper {width: 100%; max-height: none; overflow-x: hidden; overflow-y: visible;}
  .project-swiper .swiper-slide {width: 100%;}

  .project-swiper .controller{margin: 20px 0 0;}
  .project-swiper .navigation{width: 100%; margin: 0;}
  .project-swiper .navigation .swiper-button-prev, .project-swiper .navigation .swiper-button-next{width: 30px; height: 30px;}
  .project-swiper .navigation .swiper-button-next{right: 0;}
  .project-swiper .navigation .swiper-button-prev{left: 0;}
  .project-swiper .pagination{width: calc(100% - 100px);}
  .marquee-wrap {margin-top: 100px;}
}
@media screen and (max-width:767px){
  .viewmore-btn {top: -20px; right: 0; width: 100px; height: 100px;}
  .viewmore-inner {position: absolute; width: 60px; height: 60px;}
  .viewmore-inner img {width: 17px; height: 17px;}
  .circle-text-svg {width: 100px; height: 100px;}

  .project-swiper .item .inner .text-box {padding: 30px 15px;}
  .project-swiper .item .inner .sbj {font-size: 22px;}
}

/* ETC */
.etc {width: 100%; height: 100%; padding-block: 0; display: flex; flex-direction: column;}

.etc .support-wrap {width: 100%; height: calc(100vh - 50px); min-height: 690px; display: grid; grid-template-columns: calc(550px + ((100vw - var(--container-width)) / 2)) 1fr 1fr; padding-top: 88px; background-color: #F0F0F0; flex: 1;}
/* .etc .support-wrap {width: 100%; height: calc(100vh - 400px); min-height: 690px; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 88px; background-color: #F0F0F0; flex: 1;} */

.etc .support-wrap .item {position: relative; width: 100%; height: 100%; color: #fff; padding-bottom: 100px; padding-left: 50px; display: flex; flex-direction: column; justify-content: end; overflow: hidden;}
.etc .support-wrap .item .bg {z-index: 1;}
.etc .support-wrap .item .bg img {transition: all .4s ease;}
.etc .support-wrap .item .txt-box {z-index: 2; height: 250px; display: flex; flex-direction: column; justify-content: space-between;}
.etc .support-wrap .item h4 {font-size: 40px; font-weight: 700; line-height: 1; margin-bottom: 20px;}
.etc .support-wrap .item h4 strong {font-size: 48px;}
.etc .support-wrap .item p {font-size: 18px; line-height: 1.5; margin-top: 31px;}
.etc .support-wrap .item .view-more {display: block; width: 180px; font-size: 16px; font-weight: 400; color: #fff; text-align: center; padding: 15px 50px; border-radius: 50px; border: 1px solid #fff; z-index: 2; margin-top: 70px;}

.etc .support-wrap .item:nth-child(1) {grid-row: span 2; padding-block: 125px 100px; padding-left: max(calc((100% - 550px) / 2), 50px);}
/* .etc .support-wrap .item:nth-child(1) {grid-column: span 2; grid-row: span 2; padding-left: calc((100% - 800px) / 2); padding-block: 125px 50px;} */
.etc .support-wrap .item:nth-child(2) {color: #000; background-color: #fff;}
.etc .support-wrap .item:nth-child(2) .view-more {color: #888; border-color: #E2E2E2;}
.etc .support-wrap .item:nth-child(3) {background-image: linear-gradient(to right, #F17C39, var(--primary));}
.etc .support-wrap .item:nth-child(4) {grid-column: span 2;}



@media (hover:hover) {
  .etc .support-wrap .item:hover .bg img {transform: scale(1.05);}
}
@media screen and (max-height: 980px) and (min-width:1400px){
  .etc .support-wrap {}
  .etc .support-wrap .item {padding: 30px 50px 50px;}
  .etc .support-wrap .item p {margin-top: 21px;}
  .etc .support-wrap .item .view-more {margin-top: 50px;}

  .etc .support-wrap .item:nth-child(1) {padding-block: 125px 50px;}
  .etc .support-wrap .item:nth-child(2) h4 {font-size: 30px;}
  .etc .support-wrap .item:nth-child(3) h4 {font-size: 30px;}
  .etc .support-wrap .item:nth-child(4) h4 {font-size: 30px;}
}
/* @media screen and (max-width: 1780px) {
  .etc .support-wrap .item:nth-child(1) {padding-left: 50px;}
} */
@media screen and (max-width: 1399px) {
  .etc .support-wrap {padding-top: 0;}
  .etc {overflow: hidden;}
  .etc .support-wrap .item h4 strong,
  .etc .support-wrap .item h4 {font-size: 36px;}
  .etc .support-wrap {grid-template-columns: 1fr; height: auto;}
  .etc .support-wrap .item:nth-child(1) {grid-column: span 1; grid-row: span 1; padding-block: 50px; padding-left: 50px;}
  .etc .support-wrap .item:nth-child(2) {grid-column: span 1; grid-row: span 1; padding-block: 50px;}
  .etc .support-wrap .item:nth-child(3) {grid-column: span 1; grid-row: span 1; padding-block: 50px;}
  .etc .support-wrap .item:nth-child(4) {grid-column: span 1; grid-row: span 1; padding-block: 50px; gap: 0;}
}
@media screen and (max-width: 767px) {
  .etc .support-wrap {grid-template-columns: 1fr; height: auto;}
  .etc .support-wrap .item {padding: 30px 15px !important; height: 240px;}
  .etc .support-wrap .item:nth-child(1) {grid-column: span 1; grid-row: span 1;}
  .etc .support-wrap .item:nth-child(2) {grid-column: span 1; grid-row: span 1;}
  .etc .support-wrap .item:nth-child(3) {grid-column: span 1; grid-row: span 1;}
  .etc .support-wrap .item:nth-child(4) {grid-column: span 1; grid-row: span 1; gap: 0;}
  .etc .support-wrap .item h4 strong,
  .etc .support-wrap .item h4 {font-size: 28px; margin-bottom: 15px;}
  .etc .support-wrap .item p {font-size: 14px; margin-top: auto;}
  .etc .support-wrap .item .view-more {font-size: 14px; width: 140px; padding: 10px 30px; margin-top: 30px;}

  .marquee-wrap {padding-block: 30px;}
  .marquee-container {animation-duration: 20s;}
  .marquee-content img {width: 120px;}
}








/* Base */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}