@charset "UTF-8";
/****************************************/
/*  Name : 프로젝트 명
/*  PART : style
/*  Author : 최초 작성자
/*  MODIFY : 작업 참여자
/*
/*  Summary: /* 파일 내용 */
/*  01) Main
/*  02) info
/****************************************/

/* ********************************************************************************* *
* 01) Main
* ********************************************************************************* */

#nav2020-head{ z-index: 2025;}

:root{
--item-h: 31.333vh; /* 각 이미지 높이 */
--visible: 3; /* 보이는 개수 (viewport 높이 계산에 사용) */
--count: 10; /* 원본 이미지 개수 */
--gap: 20px; /* 이미지 사이 간격 */
--speed: 50s; /* CSS 애니메이션 속도 (길게하면 느려짐) */
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Escoredream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}



/* CSS 파일에 추가 */
.title-main.is-hidden {
    display: none !important; 
    /* !important를 사용하여 브라우저 캐시로 인해 생길 수 있는 style 충돌을 방지 */
}
/* viewport (보이는 영역) */
.viewport{ width:18.333vw; height:calc(var(--item-h) * var(--visible)); overflow: visible; z-index: 1; }

.viewport.left{ position: absolute; right: 60px; top: 20px; bottom: 0;}
.viewport.right{ position: absolute; left: 60px; top: 20px; bottom:0;}

.strip{ display:flex; flex-direction:column; gap:var(--gap); }


.strip .item{ height:var(--item-h); min-height:var(--item-h); overflow:hidden; display:flex;align-items:center;justify-content:center; font-weight:700;font-size:20px;color:white; background-size:cover;background-position:50% 21%; flex-shrink:0; width: 100%;}


.css-loop{ animation-name:scrollY; animation-timing-function:linear; animation-iteration-count:infinite; animation-duration:var(--speed); will-change:transform; }

.strip.scroll-down { animation-name: scrollYDown; animation-duration: var(--speed); animation-timing-function: linear; animation-iteration-count: infinite; }


@keyframes scrollY{
from{transform:translateY(0)}
to{transform:translateY(-50%)} 
}

@keyframes scrollYDown {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}


/* 작은 화면 대응 */
@media (max-width:420px){
.viewport{width:160px}
:root{--item-h:90px}
}

.kr-main-m{ display: none;}
.glo-main-m{ display: none;}

/* #resetBtn{ position: absolute; left: 50%; top: 50%;} */

.swiper-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.title{ height: auto; display: inline-block; width: 100%; max-width: 445px; margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.title img{height: auto; width: 100%;}
.view { width: 100vw; height: calc(100vh - 39px); overflow: hidden; position: relative; }
#container{  background: url(https://designlab.chosun.com/2025/2025top10/user/images/pattern.png) repeat; height: 100%; width: 100vw;  overflow: hidden; } 
body{height: calc(100vh - 39px); overflow: hidden; width: 100vw;}
.main{height: calc(100vh - 39px); overflow: hidden; width: calc(200vw + 445px);display: flex; display: flex; align-items: center; justify-content: center;}

.title-main{width: 100%; max-width: 445px; height: calc(100vh - 39px); z-index: 2; display: block; position: relative; z-index: 1;}
.kr-main{width: 100vw; height: calc(100vh - 39px); z-index: 2; display: block; position: relative;}
.glo-main{width: 100vw; height: calc(100vh - 39px); z-index: 2; display: block; position: relative; }
.kr-main-inner{position: relative; width: 100vw; max-width: 1240px; height: 100%; margin: 0 auto;}


.back-frame{border-radius: 20px; background: #F7F7F7; height: 700px; max-width: 1240px; width: 100%; margin: 0 auto; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; border: 4px solid #222;}
.back-bg{  position: absolute; left: 0; top: 0; right: 0; bottom: 0;  background: rgba(247, 247, 247, 0.80); width: 100%; height: 120%; }
.kr-main .front-frame-top{ position: absolute; width: 19.333vw; height: calc(50vh - 731px / 2); right: 60px; background: rgba(247, 247, 247, 0.80); border-bottom: 4px solid #222; z-index: 1111; top: 0; }
.kr-main .front-frame-bottom{ position: absolute; width: 19.333vw; height: calc(50vh - 731px / 2); right: 60px; background: rgba(247, 247, 247, 0.80); border-top: 4px solid #222; z-index: 1; bottom: 0; }

.glo-main .front-frame-top{ position: absolute; width: 19.333vw; height: calc(50vh - 731px / 2); left: 60px; background: rgba(247, 247, 247, 0.80); border-bottom: 4px solid #222; z-index: 1; top: 0; }
.glo-main .front-frame-bottom{ position: absolute; width: 19.333vw; height: calc(50vh - 731px / 2); left: 60px; background: rgba(247, 247, 247, 0.80); border-top: 4px solid #222; z-index: 1; bottom: 0; }

#leftBtn{right: -30px; top: 50%; margin-top: -30px; position: absolute; width: 60px; height: 60px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_left.png); border: none; background-size: contain;z-index: 2;}
#leftBtn:hover{background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_left_hover.png); border: none; background-size: contain;}
#rightBtn{ position: absolute; left: -30px; top: 50%; margin-top: -30px;width: 60px; height: 60px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_right.png); border: none; background-size: contain;z-index: 2;}
#rightBtn:hover{background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_right_hover.png); border: none; background-size: contain;}
#strip-up-btn{position: absolute; top: 25%; z-index: 555;}
#strip-up-btn-down{position: absolute; bottom: 25%; z-index: 555;}

#leftBtn.delete{ display: none;}
#rightBtn.delete{ display: none;}

#leftBtn:before{ content:"국내"; position: absolute; color: #222; font-family: "Escoredream"; font-size: 42px; font-weight: 500; line-height: 190%; white-space: nowrap; left: 80px; top: 50%; transform: translateY(-50%); } 
#rightBtn:before{ content:"해외";  position: absolute; color: #222; font-family: "Escoredream"; font-size: 42px; font-weight: 500; line-height: 190%; white-space: nowrap; right: 80px; top: 50%; transform: translateY(-50%); } 

.swiper-slide{height:30.3333vh; overflow: hidden; position: relative;}
.swiper-slide .img-box{ height:var(--item-h); min-height:var(--item-h); overflow:hidden; display:flex;align-items:center;justify-content:center; font-weight:700;font-size:20px;color:white; background-size:cover;background-position:50% 21%; flex-shrink:0;position: absolute; left: 50%; top: 0; width: 100%; height: 100%; transform: translateX(-50%); }

.strip-up.swiper-button-next{opacity:0; visibility: hidden;  width: 60px; height: 60px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_down.png); border: none; background-size: contain; bottom: calc(50vh - 732px / 2); top: auto; right: 22vh; z-index: 55555; margin-bottom: -32px; }
.strip-up.swiper-button-prev{opacity:0; visibility: hidden;  width: 60px; height: 60px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_up.png); border: none; background-size: contain; top: calc(50vh - 732px / 2); right: 22vh; z-index: 55555; margin-top: -32px; left: auto; } 



.strip-up.swiper-button-next:hover{  width: 60px; height: 60px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_down_hover.png); border: none; background-size: contain;  }
.strip-up.swiper-button-prev:hover{ width: 60px; height: 60px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_up_hover.png); border: none; background-size: contain;} 

.strip-up.swiper-button-next.active{opacity: 1; visibility: visible;}
.strip-up.swiper-button-prev.active{ opacity: 1; visibility: visible;}

.strip-down.swiper-button-next{ opacity:0; visibility: hidden;  width: 60px; height: 60px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_down.png); border: none; background-size: contain; bottom: calc(50vh - 732px / 2); left: 22vh; margin-left: -19px; z-index: 55555; margin-bottom: -30px;     top: auto;}
.strip-down.swiper-button-prev{ opacity:0; visibility: hidden;  width: 60px; height: 60px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_up.png); border: none; background-size: contain; top: calc(50vh - 732px / 2); left: 22vh; margin-left: -19px; z-index: 55555; margin-top: -30px; right: auto; bottom: auto;} 

.strip-down.swiper-button-next:hover{ width: 60px; height: 60px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_down_glo.png); border: none; background-size: contain;  }
.strip-down.swiper-button-prev:hover{ width: 60px; height: 60px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_up_glo.png); border: none; background-size: contain;} 
.strip-down.swiper-button-next.active{opacity: 1; visibility: visible;}
.strip-down.swiper-button-prev.active{ opacity: 1; visibility: visible;}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{ display: none;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{ display: none;}

.text-box{ opacity: 0; visibility: hidden; left: 35px; right: 0; top: 0; position: absolute;}
.kr-main .text-box{ left: 0; right: 35px;}
.text-box.active{opacity: 1; visibility: visible; }

.back-frame h2{ position: absolute;color: #222;  font-size: 42px; font-weight: 500; letter-spacing: -1.68px; top: 66px; left: 60px;}
.kr-main .back-frame h2{top: 66px; left: 60px;}
.glo-main .back-frame h2{ top: 66px; right: 60px; left: auto;}
.pop-list{ position: absolute; top: 169px;  width: 100%; max-width: 550px;}
.kr-main .pop-list{left: 60px;}
.glo-main .pop-list{ right: 60px; }
.text-box dl dt{color: #222;  font-size: 26px; font-style: normal; font-weight: 500; line-height: 110%; /* 28.6px */}
.text-box dl dd {margin-top: 9px;}
.text-box dl dd mark{color: #222;  font-size: 26px; font-style: normal; font-weight: 500; line-height: 170%; /* 44.2px */ letter-spacing: -1.04px;}
.text-box p{color: #222;  font-size: 18px; font-style: normal; font-weight: 400; line-height: 170%; /* 30.6px */ letter-spacing: -0.72px; margin-top: 20px; word-break: keep-all;}
.text-box p i{color: #888;  font-size: 14px; font-style: normal; font-weight: 300; line-height: 160%; /* 22.4px */ letter-spacing: -0.42px;margin-top: 10px;     display: block;}
.text-box.active mark { animation: 5s highlight 0.5s 1 normal forwards; background-color: none; background: linear-gradient(90deg, #CDE7FF 50%, rgba(255, 255, 255, 0) 50%); background-size: 200% 100%; background-position: 100% 0; }
.glo-main .text-box.active mark {animation: 5s highlight 0.5s 1 normal forwards; background-color: none; background: linear-gradient(90deg, #E4DEFF 50%, rgba(255, 255, 255, 0) 50%);    background-size: 200% 100%; background-position: 100% 0; }
.glo-main-m.active .text-box.active mark { animation: 5s highlight 0.5s 1 normal forwards; background-color: none;background: linear-gradient(90deg, #E4DEFF 50%, rgba(255, 255, 255, 0) 50%);     background-size: 200% 100%;background-position: 100% 0; }

@keyframes highlight {
	0% {
		background-position: 100% 0;
	}
	30%, 70% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 0;
	}
}
.go-glo{border-radius: 38.028px; border: 3.803px solid #222; background: #F7F7F7; color: #222; text-align: center; font-size: 24px; font-weight: 500; line-height: 100%; letter-spacing: -0.96px; display: flex; width: 196px; height: 60px; padding: 7.606px 20.282px; align-items: center; gap: 3.803px; position: absolute; top: -76px; left: 0; justify-content: center;     font-family: 'Escoredream';}
.go-glo:hover{background: #CDE7FF;}

.go-kr{border-radius: 38.028px; border: 3.803px solid #222; background: #F7F7F7; color: #222; text-align: center; font-size: 24px; font-weight: 500; line-height: 100%; letter-spacing: -0.96px; display: flex; width: 196px; height: 60px; padding: 7.606px 20.282px; align-items: center; gap: 3.803px; position: absolute; top: -76px; right: 0; justify-content: center;    font-family: 'Escoredream'; }
.go-kr:hover{background: #E4DEFF;}
.mo-title{ display: none;}
.go-glo.mo{ display: none;}
.go-kr.mo{ display: none;}
.kr-main-m{ display: none;}
.glo-main-m{ display: none;}