@charset "UTF-8";


@media all and (max-width: 1600px){
	#wrap{height: calc(var(--vh, 1vh) * 100 -39px); overflow: hidden;}
	.viewport{ width: 33vw;}
	.kr-main .front-frame-top{  width: 33vw; }
	.kr-main .front-frame-bottom{ width: 33vw; }
	.glo-main .front-frame-top{ width: 33vw; }
	.glo-main .front-frame-bottom{ width: 33vw; }
}



/* ********************************************************************************* *
* 01) max-wdith: 1440px
* ********************************************************************************* */
@media all and (max-width: 1440px){
	.viewport{ width: 38vw;}
	.kr-main .front-frame-top{  width: 38vw; }
	.kr-main .front-frame-bottom{ width: 38vw; }
	.glo-main .front-frame-top{ width: 38vw; }
	.glo-main .front-frame-bottom{ width: 38vw; }
	.strip-up.swiper-button-next{ right: 21vw;}
	.strip-up.swiper-button-prev{ right: 21vw;}
	.strip-down.swiper-button-next{ left: 21vw;}
	.strip-down.swiper-button-prev{ left: 21vw;}
	#leftBtn:before{ left: 59px;  font-size: 26px;}
	#rightBtn:before{ right: 59px;  font-size: 26px;}
}

/* ********************************************************************************* *
* 02) max-wdith: 1280px
* ********************************************************************************* */
@media all and (max-width: 1280px){
	.title-main{ max-width: 45vw;}
	.title{max-width: 340px;}
	.main{  width: calc(200vw + 45vw);}
	.back-frame{ height: 500px; max-width: 92vw; border: 3.5px solid #222;}
	.viewport{ width: 39vw;}
	.kr-main .front-frame-top{ height: calc(50vh - 531px / 2); width: 39vw; right: 45px;}
	.kr-main .front-frame-bottom{ height: calc(50vh - 531px / 2); width: 39vw; right: 45px;}
	.glo-main .front-frame-top{ height: calc(50vh - 531px / 2); width: 39vw; right: 45px;}
	.glo-main .front-frame-bottom{ height: calc(50vh - 531px / 2); width: 39vw; right: 45px;}
	.strip-up.swiper-button-next{ bottom: calc(50vh - 530px / 2);}
	.strip-up.swiper-button-prev{ top: calc(50vh - 530px / 2);}
	.strip-down.swiper-button-next{ bottom: calc(50vh - 530px / 2);}
	.strip-down.swiper-button-prev{ top: calc(50vh - 530px / 2);}
	.text-box p{font-size: 16px; margin-top: 18px;}
	.text-box p i{font-size: 13px; margin-top: 5px;}
	.text-box dl dd mark{font-size: 20px;}
	.text-box dl dt{font-size: 23px;}
	.kr-main .back-frame h2{ font-size: 27px; top: 26px; left: 34px; }
	.kr-main .pop-list{ left: 34px;}
	.glo-main .back-frame h2{ font-size: 27px; top: 26px; right: 34px; }
	.glo-main .pop-list{ right: 34px;}
	.glo-main .back-frame h2{ font-size: 27px; top: 26px; right: 34px; }
	.glo-main .pop-list{ right: 34px;}
	.pop-list{ top: 82px; max-width: 42vw;}
	.viewport.left{ right: 45px; top: 0;}
	.viewport.right{ right: 45px;  top: 0;}
	.strip-up.swiper-button-next{ width: 50px; height: 50px; right: 19vw; margin-right: 15px;}
	.strip-up.swiper-button-prev{ width: 50px; height: 50px; right: 19vw; margin-right: 15px;}
	.strip-down.swiper-button-next{ width: 50px; height: 50px; left: 19vw; margin-left: 15px;}
	.strip-down.swiper-button-prev{ width: 50px; height: 50px; left: 19vw; margin-left: 15px;}
	.strip-up.swiper-button-next:hover{ width: 50px; height: 50px; right: 19vw; margin-right: 15px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_down.png); background-size: contain;}
	.strip-up.swiper-button-prev:hover{ width: 50px; height: 50px; right: 19vw; margin-right: 15px;background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_up.png); background-size: contain;}
	.strip-down.swiper-button-next:hover{ width: 50px; height: 50px; left: 19vw; margin-left: 15px;background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_down.png); background-size: contain;}
	.strip-down.swiper-button-prev:hover{ width: 50px; height: 50px; left: 19vw; margin-left: 15px;background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_up.png); background-size: contain;}


	#leftBtn{width: 50px; height: 50px; margin-top: -25px;  right: -25px;}
	#rightBtn{width: 50px; height: 50px; margin-top: -25px; left: -25px }
	.go-glo{  font-size: 19px; width: 156px; height: 53px; top: -68px; left: 0; padding: 0;}
	.go-kr{  font-size: 19px; width: 156px; height: 53px; top: -68px; right: 0; padding: 0;}
	.kr-main-inner{ max-width: 92vw;}
}

/* ********************************************************************************* *
* 03) max-wdith: 1023px
* ********************************************************************************* */
@media all and (max-width: 1023px){
	.kr-main .pop-list{ max-width: 45vw; left: 40px}
	.glo-main .pop-list{ max-width: 45vw; right: 40px;}
	.text-box dl dd mark{  font-size: 19px;}
	.text-box dl dt{  font-size: 19px;}
	.kr-main .back-frame h2{  font-size: 19px;}
	.glo-main .back-frame h2{  font-size: 19px;}
	.pop-list{ top: 60px;}
	.go-glo{ padding: 0; margin: 0; width: 134px; height: 40px; font-size: 15px; top: -51px; left: 0;}
	.go-kr{ padding: 0; margin: 0; width: 134px; height: 40px; font-size: 15px; top: -51px;right: 0;}
	.viewport.left{ right: 40px;}
	.viewport.right{ left: 40px;}
	.kr-main .front-frame-top{ height: calc(50vh - 531px / 2); width: 39vw; right: 40px;}
	.kr-main .front-frame-bottom{ height: calc(50vh - 531px / 2); width: 39vw; right: 40px;}
	.glo-main .front-frame-top{ height: calc(50vh - 531px / 2); width: 39vw; left: 40px;}
	.glo-main .front-frame-bottom{ height: calc(50vh - 531px / 2); width: 39vw; left: 40px;}
	.kr-main-inner{ max-width: 95vw;}
	.back-frame{ max-width: 95vw;}
	.title { max-width: 265px; }
	.text-box p i{font-size: 13px;}
}

/* ********************************************************************************* *
* 04) max-wdith: 768px
* ********************************************************************************* */
@media all and (max-width: 768px){
	#container .inner{  height: calc(var(--vh, 1vh) * 100 -39px); overflow: hidden; width: 100vw; }
	.view {  height: calc(var(--vh, 1vh) * 100 - 39px); overflow: hidden; width: 100vw; }
	.main {  height: calc(var(--vh, 1vh) * 100 - 39px); overflow: hidden; width: 100vw; }
	.back-bg{ height: 120%;}
	.kr-main{ display: none;}
	.glo-main{ display: none;}
	.kr-main-m{ display: block;  width: 100vw;height:calc(var(--vh, 1vh) * 13); margin-top: -5vh;  transition: 0.5s; z-index: 2; position: relative; }
	.glo-main-m{ display: block;  width: 100vw; height:calc(var(--vh, 1vh) * 13); margin-bottom: -5vh;transition: 0.5s; z-index: 2; position: relative;  }
	.title-main{   width: 100vw; height: calc(var(--vh, 1vh) * 80); max-width: 100%;    z-index: 1;}
	.main { width: 100vw; display: flex; align-items: center; justify-content: center; flex-direction: column; }
	 .back-frame { max-width: 91vw; height: 100%; position: relative; top: auto; left: auto; bottom: auto; transform: none; }
	.btn-kr-m{ position: absolute; left: 50%; bottom: 0;  margin-left: -20px; bottom: 0; margin-bottom: -20px;}
	.btn-kr-m:before{ content:"국내";color: #222; text-align: center;  font-size: 32px; font-style: normal; font-weight: 500; line-height: 150%; /* 48px */ letter-spacing: -0.96px; position: absolute; left: 50%; bottom: 0; margin-bottom: -50px; font-family: 'Escoredream'; transform: translateX(-50%);word-break: keep-all;}
	.btn-glo-m{ position: absolute; left: 50%; top: 0;    margin-left: -20px;   top: 0; margin-top: -20px;}
	.btn-glo-m:before{ content:"해외";color: #222; text-align: center;font-family: 'Escoredream';  font-size: 32px; font-style: normal; font-weight: 500; line-height: 110%; /* 35.2px */ letter-spacing: -0.96px; position: absolute; left: 50%; top: 0; margin-top: -50px; transform: translateX(-50%);word-break: keep-all;}
	.kr-main-m.active { height: calc(var(--vh, 1vh) * 80); margin-bottom: 2vh; margin-top: 2vh;}
	.glo-main-m.active { height: calc(var(--vh, 1vh) * 80); margin-top: 2vh; margin-bottom: 3vh;}
	.swiper.glo-m { width: 100%; max-width: 100%; height: auto; margin: 0 auto; position: absolute; top: 8vh; width: 100%; left: 0; right: 0; }
	.swiper.kr-m { width: 100%; max-width: 100%; height: auto; margin: 0 auto; position: absolute; top: 8vh; width: 100%; left: 0; right: 0; }
	.swiper-slide{ display: none; height: 30vh; overflow: hidden; position: relative; width: 79vw;}
	.kr-main-m.active .swiper-slide{ display: block;}
	.glo-main-m.active .swiper-slide{ display: block;}
	.kr-main-m.active .pop-list{ display: block;}
	.glo-main-m.active .pop-list{ display: block;}
	.swiper-slide .img-box { width: 100%; padding-bottom: 72%; height: 0; background-repeat: no-repeat; background-position: center; background-size: cover; }
	.swiper-button-prev,
	.swiper-button-next { display: none; color: #000; top: 27vh; transform: translateY(-50%); z-index: 5555; }
	.active .swiper-button-prev,
	.active .swiper-button-next{ display: block; }
	.swiper-button-prev {width: 40px; height: 40px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_prev.png)no-repeat; background-size: contain; }
	.swiper-button-next { width: 40px; height: 40px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_next.png)no-repeat; background-size: contain; }
	.swiper-wrapper{ flex-direction: row;} 
    .pop-list { display: none;  top: 39vh; width: 100vw;  max-width: 81vw; left: 50%; transform: translateX(-50%); height: calc(var(--vh, 1vh) * 33); overflow: hidden;}
    .text-box { max-width: 81vw; height: 39vh; padding-bottom: 13vh; overflow: auto; }
	.glo-main-m .pop-list { height: calc(var(--vh, 1vh) * 33); overflow: hidden;}
	.glo-main-m .text-box{ height: 39vh; left: 0;}
	.kr-main-m .text-box{right: 0;left: 0;}
	.pop-list::before{ content:""; position: absolute; bottom: 0; left: -8px; right: -8px; background: linear-gradient(180deg, rgba(247, 247, 247, 0.00) 0%, #F7F7F7 99.04%); height: 27px; z-index: 3;}
	.text-box dl dt{ display: none;}
	.btn02-kr-m{ display: none; color: #222; background: transparent; border: none; position: absolute; bottom: 18px; left: 8vw; width: 100%; text-align: left;}
	.btn02-glo-m{ display: none; background: transparent; border: none; position: absolute; top: 18px; left: 8vw; width: 100%; text-align: left;}
	.btn02-kr-m.active { top: 20px; bottom: auto;}
	.btn02-glo-m.active { top: 20px;}
	.btn02-kr-m.active b{ display: block;}
	.btn02-glo-m.active b{ display: block;}
	.btn02-kr-m.active p{ display: none;}
	.btn02-glo-m.active p{ display: none;}
	.btn02-glo-m p{color: #222;  font-size: 18px; font-style: normal; font-weight: 500; line-height: 100%; /* 18px */ letter-spacing: -0.54px; text-align: left; }
	.btn02-kr-m p{color: #222;  font-size: 18px; font-style: normal; font-weight: 500; line-height: 100%; /* 18px */ letter-spacing: -0.54px; text-align: left; }
	.btn02-glo-m b{ display: none; color: #222;  font-size: 23px; font-style: normal; font-weight: 500; line-height: 100%; /* 18px */ letter-spacing: -0.54px; text-align: left; }
	.btn02-kr-m b{ display: none; color: #222;  font-size: 23px; font-style: normal; font-weight: 500; line-height: 100%; /* 18px */ letter-spacing: -0.54px; text-align: left; }
	.text-box::-webkit-scrollbar{ display: none; width: 0;  height: 0; }
	.btn-glo-m{ border: none; width: 40px; height: 40px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_down_m.png)no-repeat; background-size: contain;}
	.btn-kr-m{border: none;width: 40px; height: 40px; background: url(https://designlab.chosun.com/2025/2025top10/user/images/btn_up_m.png)no-repeat; background-size: contain;}
	.kr-main-m.active .back-frame:before{ content: ""; position: absolute; left: -6vw; top: 6vh; height: 32vh; background: rgba(247, 247, 247, 0.80); width: 6vw; z-index: 55; border-right: 3.5px solid #222;}
	.kr-main-m.active .back-frame:after{  content: ""; position: absolute; right: -6vw; top: 6vh; height: 32vh; background: rgba(247, 247, 247, 0.80); width: 6vw; z-index: 55; border-left: 3.5px solid #222;}
	.glo-main-m.active .back-frame:before{ content: ""; position: absolute; left: -6vw; top: 6vh; height: 32vh; background: rgba(247, 247, 247, 0.80); width: 6vw; z-index: 55; border-right: 3.5px solid #222;}
	.glo-main-m.active .back-frame:after{  content: ""; position: absolute; right: -6vw; top: 6vh; height: 32vh; background: rgba(247, 247, 247, 0.80); width: 6vw; z-index: 55; border-left: 3.5px solid #222;}
}

/* ********************************************************************************* *
* 05) max-wdith: 480px
* ********************************************************************************* */
@media all and (max-width: 480px){

}

/* ********************************************************************************* *
* 06) max-wdith: 360px
* ********************************************************************************* */
@media all and (max-width: 360px){

}