@charset "utf-8";

/* common */
.section {width: 100%; height: 100%; padding-block: 140px 160px; overflow: hidden;}
.container {width: min(var(--container-wide-width), calc(100% - 30px)); }
.section-title {margin-bottom: 80px;}
.section-title .mp-tag {font-size: 20px; font-weight: 700; color: var(--primary); font-family: 'SUIT', sans-serif; margin-bottom: 28px; display: block;}
.section-title .mp-title {font-size: 54px; font-weight: 700; line-height: 1.3; }
.section-title .mp-desc {font-size: 18px; font-weight: 400;  margin-top: 50px; line-height: 1.66;}

.bg-gray {background: #F8F7F6;}


.more-btn {padding: 0.5rem 1.3rem;border-radius:50px; font-weight: 700; font-size: 18px; display: inline-flex; align-items: center; gap: 1.25rem; transition: all .2s;}
.more-btn.dark {background: #000; color:#fff;}
.more-btn.white {background: #fff;}
.more-btn.secondary {background: var(--secondary); color:#fff;}
.more-btn.secondary-light {background: var(--secondary-light); color:#fff;}

@media (hover: hover) {
    .more-btn:hover {background: var(--primary) !important; color:#fff !important; border-color: var(--primary) !important;}
    .more-btn.white:hover {background: var(--primary) !important; color:#fff !important;}
}


.intro {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; pointer-events: none; }
.intro .bg {width: 100%; height: 100%; object-fit: cover;}
.intro .typo-cont {position: absolute; z-index: 100; top: 0; left: 0; height: 100%; width: 100%; }

/* .intro .typo-cont .container {position: relative; display: flex; flex-direction: column;  justify-content: center; height: 100%; align-items: flex-start; gap: 150px;} */
.intro .typo-cont .typo {position: absolute;}
.intro .typo-1 {top: 30%; left:calc(10%); max-width: 378px;}
.intro .typo-2 {top: 60%; right:calc(10%); max-width: 400px;}
/* 처음에 인트로 이미지 보여주고 2초뒤에 scaleup하면서 사라지기 */
.intro.active {opacity: 0; transform: scale(2); transition: .7s; }



/* visual */
.visual {width: 100%; height: 100vh; overflow: hidden;}
.visual .main_slide {width: 100%; height: 100%;}
.visual .main_slide .swiper-slide {position: relative;}
.visual-bg {position: absolute;top:0; left:0; width: 100%; height: 100%; object-fit: cover;}
.visual .main_slide .swiper-slide .container {height: 100%; padding-block: 200px;}
.visual .main_slide .swiper-slide .container .visual-txt {width: 100%; height: 100%; display: flex; justify-content: start; align-items: end; transform: translateY(50px); opacity: 0; transition: all .7s; transition-delay: .3s;}
/* .visual .main_slide .swiper-slide.swiper-slide-active .container .visual-txt {transform: translateY(0); opacity: 1;} */
.visual .main_slide .swiper-slide .container .visual-txt .title {font-size: 70px; font-weight: 700; line-height: 1.32; color: white; text-align: left;}
.visual .main_slide .swiper-slide .container .visual-bg {width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; padding: 0;}
.visual .main_slide .swiper-slide .container .visual-bg video {min-width: 100%; height: 100vh; position: absolute; z-index: -1; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/* .visual .main_slide .swiper-pagination {width: initial; bottom: 143px; left: calc(50% - 697px);} */
/* .visual .main_slide .swiper-pagination-bullet {width: 14px; height: 14px; margin: 0; margin-right: 17px; background-color: white; opacity: .43;} */
/* .visual .main_slide .swiper-pagination-bullet-active {background-color: #FF8800; opacity: 1;} */

.visual.init .main_slide .swiper-slide.swiper-slide-active .container .visual-txt {transform: translateY(0); opacity: 1;}

/* main-visual-2, main-visual-3 슬라이드 전환 시 scaleDown */
.main_slide .swiper-slide.swiper-slide-active img.visual-bg.visual-bg--scale {
  animation: mainVisualScaleDown 14s ease-out forwards;
}
@keyframes mainVisualScaleDown {
  from { transform: scale(1.15); }
  to { transform: scale(1); }
}

.main-visual-nav {position: absolute; z-index: 10; bottom: 120px; left: 50%; width: 100%; transform: translate(-50%, 0); max-width: 1440px;}
.main-visual-nav .container {margin: 0; display: flex; align-items: center; justify-content: center; color: #fff; gap: 15px; padding-bottom: 0;}
.main-visual-nav .pagination {display: flex; align-items: center; justify-content: flex-start; gap: 0; margin: 0; width: auto; }
.main-visual-nav .pagination-item {display: flex; align-items: center; gap: .5em; opacity: .3; transition: opacity .7s; width: auto; height: auto; background: none; margin-right: 10px;}
.main-visual-nav .pagination-item .no {font-weight: 500;  font-size: 19px; line-height: 1;}
.main-visual-nav .pagination-item .progress {position: relative; transition: width .7s; width: 0px; height: 3px; background: rgb(255,255,255,.3); flex-shrink: 0;}
.main-visual-nav .pagination-item .progress::after {position: absolute; content: ''; display: block; width: 100%; height: 100%; background: #fff; transition: transform .7s linear; transform: scaleX(0); transform-origin: left;}
.main-visual-nav .pagination-item.swiper-pagination-bullet-active {opacity: 1;}
.main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress {width: 97px;}
.main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress::after {transform: scaleX(1); transition: transform var(--main_visual_delay) linear;}
.main-visual .main-visual-nav .pagination-item .progress::after {position: absolute; content: ''; display: block; width: 100%; height: 100%; background: #fff; transition: transform .7s linear; transform: scaleX(0); transform-origin: left;}
.main-visual.init .main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress::after {transform: scaleX(1); transition: transform var(--main_visual_delay) linear;}

.swiper-pagination {display: flex; gap: 9px; align-items: center; justify-content: center; position: static; width: auto !important;}
.swiper-pagination-bullet {justify-content: center; min-width: 33px; margin: 0 !important; width: auto; height: auto; background: none; position: relative; display: inline-flex; margin: 0 5px; text-align: center; font-size: 19px; font-weight: 600; color: #fff; font-family: var(--ff-secondary); gap: 9px;}
.swiper-pagination-bullet .progress-bar {position: relative; display: block; width: 97px; height: 3px; background: rgba(255, 255, 255, 0.3); margin-top: 13px; overflow: hidden; flex-shrink: 0;}
.swiper-pagination-bullet .progress-fill {display: block; height: 100%; width: 0%; background: #fff;}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) .progress-bar {width: 0px; visibility: hidden; opacity: 0;}
.swiper-btnPlay {font-size: 0; background: none; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid white; cursor: pointer;}
.swiper-btnPlay.active {border: none; width: 20px; height: 20px; background-image: url("../images/main/main-btnStop.svg"); background-repeat: no-repeat; background-size: 9px 13px; background-position: center center;}
.progress-bar {transition: all 1s;}
.progress-bar.hide {width: 0px; visibility: hidden; opacity: 0;}

@media screen and (max-width: 1399px) {
  .intro{display: none;}
  .visual .main_slide .swiper-slide .container .visual-txt .title{font-size: 40px;}
  .main-visual-nav .container{margin: 0 auto;}
}

@media screen and (max-width: 767px) {
  .visual .main_slide .swiper-slide .container .visual-txt .title{font-size: 32px; text-align: center; width: 100%;}
}

/* about */
.about {background-color: #F8F7F6; padding-block: 161px 0;}
.about .container {gap: 73px; margin-bottom: 56px;}
.about .section-title {position: relative;}
.about .section-title .more-btn {margin-top: 140px; background-color: transparent; color: #000000; border: 1px solid #000000;}
.about .section-body {position: relative;}

.about-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; position: relative; width: 100%; transition: all .4s;}
.about-list li {width: 100%; height: 100%; color: #000000; background: #fff; transition: all .4s; border-radius: 20px; box-shadow: inset 5px 5px 5px rgba(255,255,255,.16); backdrop-filter: blur(20px) brightness(1.1); width: 331px; height: 248px; padding: 14px 15px 32px 32px;}
.about-list li:nth-child(1){margin-top: 52px;}
.about-list li:nth-child(4){margin-top: -52px;}
.about-list li div{font-size: 70px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin-top: -16px; font-family: 'SUIT', sans-serif;}
.about-list li div p{display: inline-block;}
.about-list li div span{font-size: 20px; font-weight: 700; display: block; font-family: 'Pretendard', sans-serif; color: #4F5760;}
.about-list li img{margin-left: auto;}
.about-list li .bg {width: calc((100% - 12px) / 3); height: 100%; display: block; position: absolute; top: 0; opacity: 1; background-size: cover; transition: all .4s; z-index: 1;}
.about-list li h4 {position: absolute; top: 0; font-size: 26px; font-weight: 700; transition: all .4s; padding: 30px 25px; z-index: 2; text-transform: uppercase;font-family: var(--ff-secondary);}
.about-list li .bg-active {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background-size: cover; transition: all .6s; z-index: -1;}
.about-list li .txt-box {display: none; color: white; max-width: 410px; position: absolute; top: 30px; left: 36px; z-index: 7;}
.about-list li .txt-box h5 {font-size: 50px; font-weight: 700; font-family: var(--ff-secondary); text-transform: uppercase; line-height: 1.2;}
.about-list li .txt-box p {font-size: 17px; line-height: 1.52; margin-top: 15px;}

.about-list li:nth-child(2) .txt-box {top:auto; bottom: 30px; }
.about-list li:nth-child(1) .bg {left: 0; background-image: url(../images/main/about-1.png); background-position: 10% center;}
.about-list li:nth-child(2) .bg {left: 50%; transform: translateX(-50%); background-image: url(../images/main/about-2.png); background-position: center center;}
.about-list li:nth-child(3) .bg {left: auto; right: 0; background-image: url(../images/main/about-3.png); background-position: center center;}
.about-list li:nth-child(1) .bg-active {background-image: url(../images/main/about-1-active.png);}
.about-list li:nth-child(2) .bg-active {background-image: url(../images/main/about-2-active.png);}
.about-list li:nth-child(3) .bg-active {background-image: url(../images/main/about-3-active.png);}

@media (hover: hover) {
    .about-list li:hover{background: #DD1B1A; color: #fff;}
    .about-list li:hover span{color: #fff;}
    .about-list li:nth-child(1):hover img{content: url(../images/main/about-icon1.png);}
    .about-list li:nth-child(2):hover img{content: url(../images/main/about-icon2.png);}
    .about-list li:nth-child(3):hover img{content: url(../images/main/about-icon3.png);}
    .about-list li:nth-child(4):hover img{content: url(../images/main/about-icon4.png);}
}

@media screen and (max-width: 1399px) {
  .section-title .mp-tag{text-align: center;}
  .section-title .mp-title{font-size: 41px; text-align: center;}
  .section-title .mp-desc{margin-top: 40px; text-align: center;}

  .section.about{padding: 100px 0 0;}
  .about .container{flex-direction: column; gap: 0;}
  .about-list li{width: 100%; height: auto;}
  .about-list li:nth-child(1){margin-top: 0;}
  .about-list li:nth-child(4){margin-top: 0;}
  .about .section-title .more-btn{margin: 30px auto 0; display: block; width: fit-content;}

  .about-list li div{font-size: 48px;}
}

@media screen and (max-width: 767px) {
  .section.about{padding: 70px 0 0;}
  .section-title .mp-title{font-size: 30px;}
  .section-title .mp-desc{font-size: 16px;}
  .section-title .mp-tag{font-size: 18px;}
  .more-btn{font-size: 16px;}
  .section-title{margin-bottom: 40px;}

  .about-list{grid-template-columns: 1fr;}
  /* .about-list li div{font-size: 40px;} */
}

/* product */
.product {}
.product .section-title{text-align: center;}
.prod-list {display: flex; gap: 20px;}

.prod-list li {transition: all .4s ease-in-out; width: 335px; min-width: 335px; height: 560px; display: flex; align-items: flex-end; position: relative; overflow: hidden; border-radius: 20px; padding: 40px;}
.prod-list li::before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 20px; background: #C1C1C1; z-index: 1; mix-blend-mode: multiply; transition: all 0.4s ease-in-out;}
.prod-list li img{position: absolute; left: 0; top: 0; max-width: initial; object-fit: cover;}
.prod-list li:nth-child(1) img{left: -470px; transition: all 0.4s ease-in-out;}
.prod-list li:nth-child(2) img{left: -260px; transition: all 0.4s ease-in-out;}
.prod-list li:nth-child(3) img{left: -260px; transition: all 0.4s ease-in-out;}
.prod-list li:nth-child(4) img{left: -260px; transition: all 0.4s ease-in-out;}
.prod-list .text-box{z-index: 2; color: #fff; opacity: 0; transition: opacity 0.3s ease-in-out;}
.prod-list .text-box p:first-child{font-family: 'SUIT', sans-serif; font-size: 50px; font-weight: bold;}
.prod-list .text-box p:last-child{font-size: 18px; white-space: nowrap;}
.prod-list li a{z-index: 1; margin-left: auto; background: #fff; color: var(--primary); opacity: 0; white-space: nowrap; transition: opacity 0.3s ease-in-out;}
.prod-list li .close-txt{position: absolute; left: 50%; bottom: 63px; transform: translateX(-50%); font-family: 'SUIT', sans-serif; font-size: 32px; font-weight: bold; color: #fff; z-index: 2; white-space: nowrap; transition: all 0.3s ease-in-out;}

@media screen and (min-width: 1399px) {
  @media (hover:hover){
      .prod-list li:hover{width: 812px; min-width: 812px;}
      .prod-list li:hover::before{display: none;}
      .prod-list li:hover::after{content: ''; width: 100%; position: absolute; left: 0; bottom: 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background: linear-gradient(180deg,rgba(187, 174, 155, 0) 0%, rgba(187, 174, 155, 1) 100%); height: 196px;}
      .prod-list li:nth-child(2)::after{background: linear-gradient(180deg,rgba(198, 186, 171, 0) 0%, rgba(198, 186, 171, 1) 100%);}
      .prod-list li:nth-child(3)::after{background: linear-gradient(180deg,rgba(184, 179, 168, 0) 0%, rgba(184, 179, 168, 1) 100%);}
      .prod-list li:nth-child(4)::after{background: linear-gradient(180deg,rgba(210, 177, 122, 0) 0%, rgba(210, 177, 122, 1) 100%);}
      .prod-list.hovered li:not(:hover){width: 178px; min-width: 178px;}
      .prod-list.hovered li:not(:hover) .close-txt{bottom: initial; top: 73px; writing-mode: vertical-rl;}
      .prod-list li:hover .text-box{opacity: 1;}
      .prod-list li:hover a{opacity: 1;}
      .prod-list li:hover .close-txt{opacity: 0;}

      .prod-list li:nth-child(1):hover img{left: 0px;}
      .prod-list li:nth-child(2):hover img{left: 0px;}
      .prod-list li:nth-child(3):hover img{left: 0px;}
      .prod-list li:nth-child(4):hover img{left: 0px;}

  }
}

@media screen and (max-width: 1399px) {
  .section{padding: 100px 0;}
  .prod-list{flex-direction: column; align-items: center; justify-content: center;}

    .prod-list li{width: 100%; min-width: initial; max-width: 812px; height: 461px;}
    .prod-list li::before{display: none;}
    .prod-list li::after{content: ''; width: 100%; position: absolute; left: 0; bottom: 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background: linear-gradient(180deg,rgba(187, 174, 155, 0) 0%, rgba(187, 174, 155, 1) 100%); height: 196px;}
    .prod-list li:nth-child(2)::after{background: linear-gradient(180deg,rgba(198, 186, 171, 0) 0%, rgba(198, 186, 171, 1) 100%);}
    .prod-list li:nth-child(3)::after{background: linear-gradient(180deg,rgba(184, 179, 168, 0) 0%, rgba(184, 179, 168, 1) 100%);}
    .prod-list li:nth-child(4)::after{background: linear-gradient(180deg,rgba(210, 177, 122, 0) 0%, rgba(210, 177, 122, 1) 100%);}
    .prod-list li .text-box{opacity: 1;}
    .prod-list li a{opacity: 1;}
    .prod-list li .close-txt{opacity: 0;}

    .prod-list li:nth-child(1) img{left: 0px; width: 100%; height: 100%;}
    .prod-list li:nth-child(2) img{left: 0px; width: 100%; height: 100%;}
    .prod-list li:nth-child(3) img{left: 0px; width: 100%; height: 100%;}
    .prod-list li:nth-child(4) img{left: 0px; width: 100%; height: 100%;}
}

@media screen and (max-width: 767px) {
  .section{padding: 70px 0 80px;}
  .prod-list li{flex-direction: column; align-items: center; padding: 40px 20px; height: auto;}
  .prod-list li::after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.4);}
  .prod-list li:nth-child(2):after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.4);}
  .prod-list li:nth-child(3):after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.4);}
  .prod-list li:nth-child(4):after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.4);}
  .prod-list li .text-box{width: 100%; text-align: center; word-break: keep-all;}
  .prod-list .text-box p:first-child{font-size: 30px; margin: 0 0 10px;}
  .prod-list .text-box p:last-child{white-space: initial; font-size: 18px;}
  .prod-list li a{margin: 60px 0 0;}

}

/* global */
.section.global{padding-block: 0; height: 1070px; position: relative;}
.section.global .container{height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;}
.section.global .bg-cover>img{position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 100%; height: 100%; object-fit: cover;}
.global .section-title{ z-index: 1; position: relative; margin-bottom: 160px; width: 680px;}
.global .section-title .mp-desc{margin-top: 34px;}
.global .section-title .more-btn{border: 1px solid #000; margin-top: 29px;}
.global .bg-cover{max-width: 1920px; margin: auto; height: 100%;}
.global .bg-cover .global-logo{position: absolute; left: calc(50% - 444px); top: calc(50% - 154px); transform: translate(-50%, -50%); z-index: 20;}
.global .bg-cover .global-logo.ver2{left: initial; right: calc(50% - 440px); top: calc(50% - 94px); transform: translate(50%, -50%);}
.global .bg-cover .global-logo div{position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center;}
.global .bg-cover .global-logo div img{z-index: 10;}
.global .bg-cover .global-logo div img:nth-child(1){position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%;}
.global-cover{position: relative; display: none;}
.global .global-logo-mo{width: fit-content; position: absolute; left: 22%; top: calc(30%); transform: translateY(-50%);}
.global .global-logo-mo.ver2{left: initial; right: 16.8%; top: calc(30% + 5px);}
.global .global-logo-mo img{width: 4.6vw;}
.popup{display: none; position: fixed; left: 0 !important; top: 0 !important; transform: initial !important; max-width: 100%; border-radius: 0; z-index: 99999; width: 100%; height: 100%; background: rgba(0,0,0,.6); gap: 9px; flex-direction: column; align-items: center; justify-content: center;}
.popup .close_btn{max-width: 23px; height: 23px;}

.global .bg-cover .global-logo div::before{content: ''; width: 318px; height: 318px; background: #DD1B1A; animation: radarR1 1.6s linear infinite; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);}
.global .bg-cover .global-logo div::after{content: ''; width: 286px; height: 286px; background: #DD1B1A; animation: radarR2 1.6s linear infinite; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);}
.global .bg-cover .global-logo.ver2 div::before{width: 100px; height: 100px;}
.global .bg-cover .global-logo.ver2 div::after{width: 100px; height: 100px;}
.global .bg-cover .global-logo-mo div::before{content: ''; width: 8vw; height: 8vw; background: #DD1B1A; animation: radarR1 1.6s linear infinite; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);}
.global .bg-cover .global-logo-mo div::after{content: ''; width: 8vw; height: 8vw; background: #DD1B1A; animation: radarR2 1.6s linear infinite; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);}
.global .bg-cover .global-logo-mo div img{position: relative; z-index: 10;}

@keyframes radarR1 {
  0% {transform: translate(-50%, -50%) scale(0.8); opacity: 0.2;}
  100% {transform: translate(-50%, -50%) scale(1); opacity: 0.2;}
}
@keyframes radarR2 {
  0% {transform: translate(-50%, -50%) scale(1); opacity: 0.1;}
  100% {transform: translate(-50%, -50%) scale(2); opacity: 0.1;}
}

.animate-spin-slow {
    animation: spin 30s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 1399px) {
  .section.global{padding: 100px 0; height: fit-content;}
  .section.global .container{justify-content: flex-start; align-items: center; height: fit-content;}
  .section.global .bg-cover>img{position: initial; transform: initial; object-fit: contain; height: auto;}
  .global .section-title{margin-bottom: 40px;}
  .global .bg-cover .global-logo{left: calc(50% - 13%); top: calc(50% + 14%);}
  .global .bg-cover .global-logo.ver2{right: calc(50% - 12%); top: calc(50% + 14%);}
  .global .bg-cover .global-logo div{width: 40px; height: 40px;}
  .global .bg-cover .global-logo div::before{width: 118px; height: 118px;}
  .global .bg-cover .global-logo div::after{width: 126px; height: 126px;}
  .global .section-title .more-btn{margin: 25px auto 0; display: block; width: fit-content;}
}

@media screen and (max-width: 1140px) {
  .global .bg-cover .global-logo{top: calc(50% + 15%);}
  .global .bg-cover .global-logo.ver2{top: calc(50% + 16%); right: calc(50% - 11%);}
}
@media screen and (max-width: 850px) {
  .global .bg-cover .global-logo{top: calc(50% + 18%);}
  .global .bg-cover .global-logo.ver2{top: calc(50% + 19%);}
}
@media screen and (max-width: 767px) {
  .section.global{padding: 70px 0 80px;}
  .global .bg-cover{height: fit-content; margin: 0px auto;}
  .section.global .bg-cover .global-cover>img{content: url(../images/main/global-bg-mo.png);}
  .global .bg-cover .global-logo{top: calc(50% + 24%); left: calc(50% - 22%);}
  .global .bg-cover .global-logo.ver2{top: calc(50% + 25%); right: calc(50% - 21%);}
  .global .bg-cover .global-logo div{width: 20px; height: 20px;}
  .global .bg-cover .global-logo div::before{width: 68px; height: 68px;}
  .global .bg-cover .global-logo div::after{width: 76px; height: 76px;}
  .global .bg-cover .global-logo.ver2 div::before{width: 68px; height: 68px;}
  .global .bg-cover .global-logo.ver2 div::after{width: 76px; height: 76px;}
  .global .global-cover{display: block;}
  .global .bg-cover>*:not(.global-cover){display: none;}
}
@media screen and (max-width: 627px) {
  .global .bg-cover .global-logo{top: calc(50% + 25%);}
  .global .bg-cover .global-logo.ver2{top: calc(50% + 26%);}
}
@media screen and (max-width: 545px) {
  .global .bg-cover .global-logo{top: calc(50% + 27%);}
  .global .bg-cover .global-logo.ver2{top: calc(50% + 28%);}
}
@media screen and (max-width: 415px) {
  .global .bg-cover .global-logo{top: calc(50% + 29%);}
  .global .bg-cover .global-logo.ver2{top: calc(50% + 30%);}
}

/* banner */
.banner {position: relative; overflow: hidden; width: 100%;}
.banner .bg {width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; z-index: -1;}
.banner .container {padding: 90px 0;}
.banner .section-title {margin-bottom: 40px;}


/* etc */
.etc {padding-block:140px 200px;}
.etc .imgbox {width: 100%;}
.etc .imgbox img {width: 100%;}
.etc .mp-tag{color: #DD1B1A; margin-bottom: 20px;}

.etc-top {width: 100%; display: grid; grid-template-columns: auto 928px; justify-content: space-between; margin: 0 0 167px;}
.etc-top .txt-frame {display: flex; flex-direction: column; justify-content: space-between; align-items: start; padding: 10px 0 7px;}
.etc-top .txt-frame .txt-box {width: 100%;}
.etc-top .txt-frame .txt-box h4 {font-size: 48px; line-height: 64px; font-weight: 700;}
.etc-top .txt-frame .txt-box hr {border: 1.5px solid #DFDFDF; margin: 35px 0 43px; max-width: 371px;}
.etc-top .txt-frame .txt-box p {font-size: 18px; line-height: 30px;}
.etc-top .more-btn{border: 1px solid #000;}
.etc-top img{border-radius: 20px;}
.etc-top .video-frame{width: 100%; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px;}
.etc-top .video-frame video{width: 100%; height: 100%; border-radius: 20px; display: block; object-fit: cover;}
.etc-top .video-frame .video-play-btn{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: none; cursor: pointer; z-index: 10; transition: opacity 0.3s ease;}
.etc-top .video-frame .video-play-btn:hover{opacity: 0.8;}
.etc-top .video-frame video.playing ~ .video-play-btn{opacity: 0; pointer-events: none;}

.etc-list {display: flex; justify-content: space-between; gap: 13px;}
.etc-list li.item {border-radius: 20px; overflow: hidden; border:1px solid #E1E1E1; width: 100%;}
.etc-list li.item a {display: block; position: relative; width: 100%; padding: 20px 20px 32px; background: white; transition: all .4s;}
.etc-list li.item a .ico {width: 68px; height: 68px; border-radius: 50%; background: #F6F6F6; display: flex; align-items: center; justify-content: center; margin-left: auto; margin-bottom: -5px;}


.etc-list li.item a h4 {font-size: 18px; font-weight: 700; color: var(--primary);}
.etc-list li.item a h5 {font-size: 34px; font-weight: 700; color: black; padding-bottom: 15px; border-bottom: 1px solid #ECECEC;}
.etc-list li.item a p {font-size: 16px; line-height: 1.43; color: #535353; padding-top: 20px;}
.etc-list li.item a.list--hover {background: var(--primary);}
.etc-list li.item a.list--hover::before {background: #FF9924;}
.etc-list li.item a.list--hover .ico{background: #D10F0E;}
.etc-list li.item a.list--hover .ico img.none {display: none; opacity: 0;}
.etc-list li.item a.list--hover .ico img.active {display: block; opacity: 1;}
.etc-list li.item:nth-child(1) a.list--hover .ico img{content: url(../images/main/etc-icon-1-hover.svg);}
.etc-list li.item:nth-child(2) a.list--hover .ico img{content: url(../images/main/etc-icon-2-hover.svg);}
.etc-list li.item:nth-child(3) a.list--hover .ico img{content: url(../images/main/etc-icon-3-hover.svg);}
.etc-list li.item:nth-child(4) a.list--hover .ico img{content: url(../images/main/etc-icon-4-hover.svg);}
.etc-list li.item a.list--hover h4 {color: white;}
.etc-list li.item a.list--hover h5 {color: white;}
.etc-list li.item a.list--hover p {color: white;}
.etc-list li.bar {width: 1px; height: inherit; background-color: #ECECEC;}

.partner {width: 100%; height: 100%;padding-block: 59px; background: #E1E1E1; overflow: hidden;}
.partner .ls {display: flex; gap: 28px; animation: partner-slide 50s linear infinite; transition: all .4s; width: max-content; align-items: center;}
.partner .ls img {filter: grayscale(100%); opacity: 0.4; flex-shrink: 0; height: fit-content;}
.partner .ls:hover {animation-play-state: paused;}

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

@media screen and (max-width: 1467px) {
  .etc-list li.item a h5{height: 118px;}
}

@media screen and (max-width: 1399px) {
  .main_slide .visual-bg.pc{display: block;}

  .etc{padding-block: 100px;}
  .etc-top{grid-template-columns: 1fr; margin: 0 0 100px;}
  .etc-top .txt-frame .txt-box h4{font-size: 41px; text-align: center; line-height: 1.3;}
  .etc-top .txt-frame .txt-box hr{margin: 35px auto 43px;}
  .etc-top .txt-frame .txt-box p{text-align: center;}
  .etc-top .more-btn{margin: auto;}
  .etc-top .video-frame{display: flex; align-items: center; justify-content: center; margin: 40px 0 0;}
  .etc-list{grid-template-columns: repeat(2, 1fr); display: grid;}
  .etc-list li.item a p{word-break: keep-all;}
}

@media screen and (max-width: 767px) {
  .etc{padding-block: 70px 80px;}
  .partner{padding-block: 0;}
  .etc-top{margin: 0 0 40px;}
  .etc-top .txt-frame .txt-box h4{font-size: 30px;}
  .etc-list{grid-template-columns: 1fr;}
  .etc-list li.item a{padding: 20px 10px;}
  .etc-list li.item a h5{height: auto; font-size: 24px;}
  .etc-list li.item a h4{font-size: 14px;}
  .etc-list li.item a .ico{margin-bottom: -59px;}

  .main_slide .visual-bg.pc{display: none;}
}


@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}