@charset "utf-8";
body{overflow-y: auto !important;scrollbar-gutter: stable; }
html, body {scroll-behavior: smooth; }
/* [핵심] 스크롤 스냅 컨테이너 */
.scroll-container {
    width: 100%;
    height: auto;
    overflow-y: visible;
}
/* 각 섹션 공통 스타일 */
.section {
    width: 100%;
    height: 100vh; /* 화면에 꽉 차게 */
   box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
	
}

@media (max-width: 1024px) {
html{overflow-x: visible;}
body{overflow: auto; }
.containers{margin-top: -60px;}

.scroll-container {height: auto;overflow-y: visible;scroll-snap-type: none;}
.section {height: auto;min-height: 100vh;}

}
/*---------
addClass tcw
--------*/
body.fixed .header.tcw{background: none;}
body.fixed .header.tcw:not(.ov,.bgw){border-bottom-color: rgba(255,255,255,.1);}
body.fixed .header.tcw:not(.ov,.bgw) .topNavWrap .topNav li h3 a{color: #fff;} 
body.fixed .header.tcw:not(.ov,.bgw) h1.topLogo a{background-image: url(http://www.onoffsys.com/design/img/common/logo_w.png);}
body.fixed .header.tcw:not(.ov,.bgw) .topIcon #showBtn > a{color: #fff;}
body.fixed .header.tcw:not(.ov,.bgw) .topMenu span::after,
body.fixed .header.tcw:not(.ov,.bgw) .topMenu span::before{border-color: #fff;}
body.fixed .header.tcw:not(.ov,.bgw) .topIcon #showBtn > a::after{border: 4px solid #FFF;border-bottom-width: 0;border-left-color: transparent; border-right-color: transparent;}
body.fixed .header.tcw:not(.ov,.bgw) .sb_open,
.header.tcw:not(.ov,.bgw) .sb_open{background-image:url(http://www.onoffsys.com/design/img/common/topMenu_w.gif)}
/*---------
_key
--------*/
._key{background-color: #090909;color: #fff;}
._key *{margin:0;padding:0;box-sizing:border-box}
._key .swiper{width:100%;height:100vh;} 
._key .swiper-slide{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;height: 100vh;    }
._key .swiper-slide iframe, .swiper-slide video {width:100%; height:100%; display:block;}
._key .swiper-slide img {position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;object-fit: cover;object-position: center; z-index: -1;}
._key .swiper-slide img.mo{display: none;}
._key .swiper-slide span{position:absolute;z-index:1}
._key .wrapper.control{margin: 0 auto;max-width: 1720px;top: auto;;display:flex; align-items:center; position:relative; bottom:auto; left:auto; padding-top:25px;}
._key .swiper-pagination-fraction{bottom: auto;top: auto;font-size: 16px;color: #fff;font-family:'Gmarket Sans';letter-spacing: 0;line-height: 20px;width: auto;text-align: left;overflow: hidden;position: relative;float: left;width: auto;font-weight: 300;padding: 0 20px;}
._key .swiper-pagination-fraction .swiper-pagination-current{padding-right: 5px;color: #fff;font-weight: 700;}
._key .swiper-pagination-fraction .swiper-pagination-total{padding-left: 5px;font-weight:500;opacity: .2;}
._key .swiper-button-wrap{position: relative;height: 20px;width: 48px;float: left;}
._key .swiper-button-next{right: 0;}
._key .swiper-button-prev {left: 0;}
._key .swiper-button-next, ._key .swiper-button-prev {background:rgba(255,255,255,0.3);width: 20px;height: 20px;text-indent: -999em;font-size: 0;transition:background-color .25s ease-out !important;outline:none;border-radius: 50%;margin-top: 0;top: 0;}
._key .swiper-button-next::after, ._key .swiper-button-prev::after {display: none;}
._key .swiper-button-next::before, ._key .swiper-button-prev::before {content:'';display:block;position:absolute;border-style:solid;border-color:#333;border-width:2px 0 0 2px;padding:2px;transform:rotate(-45deg);top:50%;left:7px;margin-top: -3px;transition:all .25s ease-out}
._key .swiper-button-next::before{border-width:0 2px  2px 0;left: auto;right: 8px;}
.swiper ::slotted(svg),.swiper svg {display: none;  }

.swiper-slide video::-webkit-media-controls-fullscreen-button {display:none !important;}
.swiper-slide video::-webkit-media-controls-mute-button {display:none !important;}
.swiper-slide video::-webkit-media-controls-play-button, .swiper-slide video::-webkit-media-controls-current-time-display, .swiper-slide video::-webkit-media-controls-time-remaining-display {display:none !important;}
.swiper-slide video::-webkit-media-controls-overflow-button {display:none !important;}
.swiper-slide video::-webkit-media-controls-timeline {height:1px !important; display:none !important; border-radius:4px;}
.swiper-slide video::-webkit-media-controls-timeline-progress {background-color:#369 !important; display:none !important}
/* .custom-controls {position:absolute; bottom:50px; left:0; width:100%; background:rgba(255,255,255,0.2); padding:0; height:1px;}
.custom-timeline {padding:0; margin:0; position:absolute; top:-1px; -webkit-appearance:none; appearance:none; width:100%; border-radius:3px; height:3px; outline:none; border:none; cursor:pointer; background:linear-gradient(to right, #ffffff 0%, #ffffff 30%, transparent 30%, transparent 100%);}
.custom-timeline::-webkit-slider-thumb {-webkit-appearance:none; appearance:none; width:0; height:0; background:transparent;}
.custom-timeline::-moz-range-thumb {width:0; height:0; background:transparent; border:none;} */
video::-webkit-media-controls-enclosure {display:none !important;}
video::-webkit-media-controls {display:none !important;}
video::-webkit-media-controls-panel {display:none !important; background:none !important; background-image:none !important;}

.progress-bar-container {width:150px; height:4px; background:rgba(255, 255, 255, 0.3); border-radius:2px; overflow:hidden; position:relative;}
.progress-bar-fill {width:0%; height:100%; background:#fff; position:absolute; top:0; left:0;}
.swiper {position:relative;}
.swiper-slide {display:flex; justify-content:center; align-items:center; overflow:hidden;}
.swiper-slide video, .swiper-slide iframe, .youtube-player {width:100%; height:100%; object-fit:cover;}
.youtube-player {pointer-events:none;}
.custom-pagination {position:absolute; bottom:calc(150/1000 * 100%); left:0; width:100%; z-index:10;}
.progress-bar-container {width:100%; height:4px; background:rgba(255, 255, 255, 0.3); border-radius:2px; overflow:hidden; position:relative;}
.progress-bar-fill {width:0%; height:100%; background:#fff; position:absolute; top:0; left:0;}
.page-fraction {display:flex; align-items:center; gap:4px; font-size:16px; color:rgba(255, 255, 255, 0.5); font-family:'Gmarket Sans'; padding:0 20px;}
.page-fraction .current {color:#fff; font-weight:bold;}
.page-title {font-weight:700; font-family:'Gmarket Sans'; font-size:18px;}
.keySwiper:has(.swiper-slide:only-of-type) .custom-pagination{display: none;}
/* .keySwiper::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 4;background-color: rgba(0,0,0,0.64);}
._key .wrapper.control {} */
@media (max-width:600px) {
._key .swiper-slide img:not(.mo){display: none;}
._key .swiper-slide img.mo{display: block;}
.section:not(._key){padding: 70px 0;}
}
/*---------
_bz
--------*/
._bz{background-color: #090909;color: #fff;min-height: 800px;}
._bz .wrapper{max-width: 1720px;}

._bz ul{margin: 0;padding: 0;list-style-type: none;display: flex;/* padding-top: 60px; */justify-content: space-between;letter-spacing: -1px;}
._bz ul li{flex: 0 0 calc(550/1720 * 100%);margin: 0;padding: 0;list-style-type: none;position: relative;}
._bz span._ima{display: block;overflow: hidden;aspect-ratio:550/800;position: relative;}
._bz span._tx{position: absolute;top: 625px;left: 50px;top: calc(625/800 * 100%);left: calc(50/550 * 100%);z-index: 3;}
._bz img{display: block;font-size: 0;line-height: 0;width: 100%;transition: .25s ease;position: relative;}
._bz img.mo{display: none;}
._bz ul b{display: block;font-size: 48px;opacity: .8;margin-bottom: 10px;padding-top: 0;font-weight: 700;transition: .25s ease;position: relative;}
._bz ul em{font-style: normal;display: block;font-size: 18px;opacity: .5;line-height: 1.4;transition: .25s ease}
._bz ul a:hover b,
._bz ul a:hover em{opacity: 1;}
._bz ul a:hover  img{transform:scale(1.45,1.45) rotate(-12deg)}
._bz ul b::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color:#1aebf2;
  transition: width 0.3s ease;
}
._bz ul a:hover b::after {
  width: 100%; /* 마우스를 올리면 밑줄이 채워짐 */
}

@media (max-width:1200px) {
._bz ul b{font-size: 28px;}
._bz ul em{font-size: 16px;}
}
@media (max-width:800px) {

._bz ul b{font-size: 23px;}
._bz ul em{font-size: 14px;}
/* ._bz ul{padding-top: 30px;} */
}
@media (max-width:600px) {
._bz .wrapper{width: 88%;}
._bz img:not(.mo){display: none;}
._bz img.mo{display: block;}
._bz span._ima{aspect-ratio:440/250}
._bz span._ima img{position: absolute;top: 50%;transform:translateY(-50%)}
._bz ul a:hover  img{transform:scale(1,1) rotate(0) translateY(-50%)}
._bz span._tx{top: calc(180/500 * 100vw);left: calc(20/500 * 100vw)}
._bz span._tx br{display: none;}
._bz ul{flex-direction: column;gap:45px}
._bz ul li{flex: 0 0 auto}
._bz ul b{font-size: 24px;margin-bottom: 9px;}
._bz ul em{font-size: 17px;}
}
@media (max-width:400px) {
._bz ul em{font-size: calc(13px + (17 - 13) * ((100vw - 320px) / (400 - 320)));}
}
/*---------
_rnd
--------*/
._rnd{background-color: #090909;color: #fff;min-height: 640px;}
._rnd .wrapper{max-width: 1720px;}
._rnd h2{font-size: 100px;font-family:'Gmarket Sans';font-weight: 700;padding-bottom: 20px;opacity: .9;text-align: center;}
._rnd h2 + p{font-size: 20px;line-height: 1.4;opacity: .5;text-align: center;}
._rnd ul{margin: 0;padding: 0;list-style-type: none;display: flex;padding-top: 60px;justify-content: space-between;letter-spacing: -1px;}
._rnd ul li{flex: 0 0 calc(550/1720 * 100%);margin: 0;padding: 0;list-style-type: none;}
._rnd span{display: block;overflow: hidden;aspect-ratio:550/280;position: relative;}
._rnd img{display: block;font-size: 0;line-height: 0;max-width: 100%;transition: .25s ease;position: relative;}

._rnd ul b{display: block;font-size: 31px;opacity: .8;margin-bottom: 15px;padding-top: 30px;font-weight: 700;transition: .25s ease}
._rnd ul em{font-style: normal;display: block;font-size: 18px;opacity: .5;transition: .25s ease}
._rnd ul a:hover b,
._rnd ul a:hover em{opacity: 1;text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 8px;text-decoration-color:rgba(255,255,255,.2)}
._rnd ul a:hover  img{transform:scale(1.45,1.45) rotate(-12deg)}

@media (max-width:1200px) {
._rnd ul b{font-size: 28px;}
._rnd ul em{font-size: 16px;line-height: 1.4;}
}
@media (max-width:800px) {
._rnd h2{font-size: 60px;padding-bottom: 15px;}
._rnd h2 + p{font-size: 14px;}
._rnd ul b{font-size: 23px;}
._rnd ul em{font-size: 14px;}
._rnd ul{padding-top: 30px;}
}
@media (max-width:600px) {
._rnd .wrapper{width: 88%;}
._rnd h2 + p{font-size: 13px;}
._rnd span{aspect-ratio:440/140}
._rnd img{/* transform:translateY(-50%); */bottom:0;position: absolute;}
._rnd ul{flex-direction: column;gap:25px}
._rnd ul li{flex: 0 0 auto}
._rnd ul b{font-size: 24px;margin-bottom: 9px;padding-top: 20px;}
._rnd ul em{font-size: 17px;}
}
@media (max-width:400px) {
._rnd ul em{font-size: calc(13px + (17 - 13) * ((100vw - 320px) / (400 - 320)));}
}
/*---------
mainCorp
--------*/
.section.mainCorp{background-color: #f9f9f9;/* padding: 130px 0; */font-size: 0;font-family:inherit !important;font-weight: 400; scroll-snap-align: end;min-height: 650px; }
.mainCorp .wrapper{max-width: 1440px}
.corpTit .en b,
.mainCorp dl dt,
.corpTit .txt em.since{font-family:'Gmarket Sans';}
.corpTit{clear: both;position: relative;margin-bottom: 80px;overflow: hidden;}
.corpTit::after{display: block;content: '';clear: both;}
.corpTit .dots{display:block;position: absolute;top: 0;right: 0;width: 6px;height: 6px;background-color: #333;border-radius:50% ;transition: .25s ease-out}
.corpTit .dots::after,.corpTit .dots::before{display: block;position: absolute;top: 0;width: 6px;height: 6px;background-color: #333;border-radius:50%;content: '';transition: .25s ease-out}
.corpTit .dots::before{right: 20px;}
.corpTit .dots::after{right: 10px;}
.corpTit .dots a{display: block;position: absolute;top: -12px;right: 0;text-indent: -999em;height: 30px;width: 30px;}
.corpTit .dots:hover::after,.corpTit .dots:hover::before,
.corpTit .dots:hover{background-color: #da1c2a;}

.corpTit .en{font-size:105px;line-height: 1.1;letter-spacing: -3px;}
.corpTit .en b{display: block;}
.corpTit .en b:last-of-type{display: inline-block;padding-right: 0;padding-right: 40px;}
.corpTit .txt {font-size: 18px;line-height: 1.3;display: inline-block;letter-spacing: -0.5px;vertical-align: top;}
.corpTit .txt em.since{font-size: 26px;font-weight: 700;display: block;padding-bottom: 15px;padding-top: 5px;font-style: normal;}
.mainCorp dl{float: left;width: 28.75%;margin-left: 6.875%;}
.mainCorp dl:first-of-type{margin-left: 0;}
.mainCorp dl dt{border-top: 3px solid #000;padding: 45px 3px 40px;font-size: 32px;font-weight: 700;}
.mainCorp dl dd{line-height: 1.5;font-size: 18px;padding:0 3px;letter-spacing: -1px;text-align: left;word-break:keep-all;}
:lang(zh-Hans) .mainCorp dl dd{word-break: break-all;}
.mainCorp dl dd span,.mainCorp dl a{display: block;}
@media (max-width:1340px) {
.mainCorp dl dd span{display: inline;}
}
@media (max-width:1100px) {
.mainCorp dl { width: 31.333%;  margin-left: 2.9%;}
.corpTit .en{font-size: 85px;}
.corpTit .txt{font-size: 16px;}
.corpTit .txt em.since{padding-bottom: 5px;font-size: 20px;}
}
@media (max-width:1024px) {
.mainCorp{padding: 90px 0;}
}
@media (max-width:950px) {
.corpTit {margin-bottom: 50px;}
.corpTit .en{font-size: 65px;line-height: 1.2;}
.corpTit .txt{font-size: 14px;}
.corpTit .txt em.since{padding-bottom: 3px;font-size: 17px;padding-top: 2px;}
.mainCorp dl dt{padding: 32px 0;font-size: 24px;}
.mainCorp dl dd{line-height: 1.3;}
}
@media (max-width:580px) {
.corpTit .en{font-size: 35px;letter-spacing: -1px;text-align: center;}
.corpTit .en b{display: block;}
.corpTit .en b:last-of-type{padding-right: 0;}
.corpTit .txt{text-align: center;padding-right: 0;padding-top: 20px;}
.mainCorp {padding: 50px 0 30px;}
.mainCorp dl{float: none;width: auto;margin-left: 0;margin-bottom: 20px;text-align: center;}
.mainCorp dl dt{border-top: 1px solid #ccc;}
.mainCorp dl dd{text-align: center;padding: 0;}
.corpTit .dots{display: none;}

}
/*---------
quicks
--------*/
a.goTop span{background: none;border: none;}
a.goTop span::after{border-color: #aaa;border-width:0 0 3px 3px}

.quick {right:9px ;display: block;transform-origin:   0;height: auto;bottom: 70px;position: fixed;z-index: 9;}
.quick a{width: 68px;height: 68px;border-radius:50% ;font-family: inherit;transition: .25s ease-out;display: flex;align-items: center;justify-content: center;padding: 0;margin-top: 15px;box-shadow:0 5px 15px 0 rgba(0,0,0,0.25);color: #fff;}
.quick a b{float: none;text-align: center;font-weight: 500;font-size: 17px;}
.quick a.q1{background-color: #2756DA;}
.quick a.q2{background-color: #fff;color: #000;}
.quick a.q3{background-color: #1f1f11;}
.quick a:hover{opacity: .8;}
@media (max-width:1024px) {
.quick {right: 15px;}
.quick a{width: 52px;height: 52px;margin-top:10px;}
.quick a b{font-size: 15px;}

}
@media (max-width:640px) {
a.goTop{right: 10px;}
.quick {right: 7px;bottom: 50px;}
}
/*---------------------------
전체 28초 키프레임 애니메이션 
----------------------------*/

@font-face {font-family: 'Poppins';font-style: normal;font-weight: 400;src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfedw.ttf) format('truetype');} .txtAni {/* max-width: 1024px; */z-index: 1000;/* margin: 80px auto; */background-color: rgba(0,0,0,0.5);text-align: center;font-family: 'Poppins';/* font-family:'Gmarket Sans'; */line-height: 1;position: absolute;bottom: 0;top: 0;left: 0;right: 0;}

.txtAni > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;z-index: 20000;display: flex;align-items: center;justify-content: center;flex-direction: column; }
.txtAni b {font-size: 80px;display: block;font-weight: 700;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
._key .swiper-slide .txtAni span {font-weight: 500;font-size: 40px;display: block;margin-top: 10px;position: relative;text-shadow: 1px 1px 12px rgba(0,0,0,0.75)}

/* 세 그룹 모두 '동일한 29초 주기' 애니메이션 적용 (delay 사용 안 함) */
.txtAni .a1 { animation: animA1 29s ease infinite; }
.txtAni .a2 { animation: animA2 29s ease infinite; }
.txtAni .a3 { animation: animA3 29s ease infinite; }

  /* 1구간 (0초 ~ 9.3초) : a1 등장 */
  @keyframes animA1 {
    0% { opacity: 0; transform: translateY(30px); }
    3% { opacity: 1; transform: translateY(0); }     /* 약 0.8초에 완전히 보임 */
    28% { opacity: 1; transform: translateY(0); }    /* 약 7.8초까지 유지 */
    32% { opacity: 0; transform: translateY(-20px); }/* 약 9초에 퇴장 */
    100% { opacity: 0; }                             /* 남은 시간 숨김 */
  }

  /* 2구간 (9.3초 ~ 18.6초) : a2 등장 */
  @keyframes animA2 {
    0%, 33% { opacity: 0; transform: translateY(30px); }
    36% { opacity: 1; transform: translateY(0); }    /* 약 10초에 완전히 보임 */
    61% { opacity: 1; transform: translateY(0); }    /* 약 17초까지 유지 */
    65% { opacity: 0; transform: translateY(-20px); }/* 약 18.2초에 퇴장 */
    100% { opacity: 0; }                             /* 남은 시간 숨김 */
  }

  /* 3구간 (18.6초 ~ 28초) : a3 등장 */
  @keyframes animA3 {
    0%, 66% { opacity: 0; transform: translateY(30px); }
    69% { opacity: 1; transform: translateY(0); }    /* 약 19.3초에 완전히 보임 */
    94% { opacity: 1; transform: translateY(0); }    /* 약 26.3초까지 유지 */
    98%, 100% { opacity: 0; transform: translateY(-20px); } /* 28초 직전 퇴장 */
  }