@charset "utf-8";

/*nav*/
#fp-nav{top: 50%; width: auto; left: 40px; border-left:none}
#fp-nav ul{width: auto;}
#fp-nav ul::before{content: ''; display: block; width: 1px; height: calc(100% + 20px); background-color: white; position: absolute; left: 0; top: -10px; transition: .3s;}
#fp-nav ul li a span,
.fp-slidesNav ul li a span{display: block; background-color: rgba(255, 255, 255, .3); width: 13px; height: auto; aspect-ratio: 1 / 1; border: 1px solid var(--color-m); position: relative;right: 6px; opacity: 0; transition: .3s;}
#fp-nav ul li .fp-tooltip{padding: 10px; font-family: 'Pretendard'; font-size: 1rem; font-weight: 400;  transition: .3s;}
#fp-nav ul li a.active + .fp-tooltip,
#fp-nav ul li:hover .fp-tooltip,
body.black #fp-nav ul li a.active + .fp-tooltip,
body.black #fp-nav ul li:hover .fp-tooltip{color: var(--color-m);}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{border: 1px solid var(--color-m);}

#fp-nav ul li a.active span::before{content: ''; display: block; width: 3px; height: 3px; background-color: var(--color-m); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span{display: block; opacity: 1;}

body.black #fp-nav ul::before{background-color: #ddd;}
body.black #fp-nav ul li .fp-tooltip{color: #777;}

/*scroll*/
.scroll-wrap{font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, .6); text-align: center; position: fixed; bottom: 28px; left: 50px; z-index: 100; opacity: 1; transition: .3s;}
.scroll-wrap.none{opacity: 0;}
.scroll-wrap .ico-sroll{margin: 0 auto 5px; width: 20px; height: 36px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50px; transition: .3s; position: relative;}
.scroll-wrap .scroll-dot{display: inline-block; width: 8px; aspect-ratio: 1 / 1; background-color: rgba(255, 255, 255, .6); border-radius: 50%; animation: scroll 1s ease-out infinite; position: absolute; left: 50%; transition: .3s;}
body.black .scroll-wrap{color: #777;}
body.black .scroll-wrap .ico-sroll{border-color: #aaa;}
body.black .scroll-wrap .scroll-dot{background-color: #aaa;}
@keyframes scroll{
	0%{transform: translate(-50%, 5px); opacity: 1;}
	100%{transform: translate(-50%, 20px); opacity: 0;}
}

/*공용*/
.sec-inner{max-width: 1400px; width: calc(100% - 40px); margin: 100px auto;}
.btn-control{width: 50px; aspect-ratio: 1 / 1; border: 1px solid white; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: .3s;}
.btn-control:hover{background-color: rgba(255, 255, 255, .2);}
.btn-link{height: 50px; padding: 0 20px; font-size: 1.125rem; color: #555; border: 1px solid #999; border-radius: 50px; display: inline-flex; justify-content: flex-start; align-items: center; gap: 20px; transition: .3s;}
.btn-link:hover{gap: 40px; background-color: rgba(255, 255, 255, .6);}
.sub-title .archive{color: var(--color-m); font-size: 1.25rem; font-weight: 300;}
.sub-title .title{font-family: 'SBAggro'; font-size: 3.25rem;}
.mCon-box{margin-top: 30px;}

/*sec-visual*/
.sec-visual{overflow: hidden;}
.sec-visual .visual-slide{width: 100%; height: 100vh; overflow: hidden;}
.sec-visual .content-wrap{position: absolute; left: 260px; top:50%; transform: translateY(-50%); z-index: 200;}
.sec-visual .content-wrap .main-text{font-family: 'SBAggro'; font-size: 3.25rem; color: white; margin-bottom: 10px;}
.sec-visual .content-wrap .search-box{position: relative; font-size: 1.25rem; margin-bottom: 20px;}
.sec-visual .content-wrap .search-bar{width: 800px; height: 60px; border: 3px solid var(--color-m); padding: 0 65px 0 20px;}
.sec-visual .content-wrap .search-bar:focus + .text-guide{display: none;}
.sec-visual .content-wrap .text-guide{position: absolute; top: 50%; left: 20px; transform: translateY(-50%); pointer-events: none;}
.sec-visual .content-wrap .search-button{position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
.sec-visual .content-wrap .btn-wrap{display: flex; gap: 20px;}
.sec-visual .content-wrap .btn-wrap .btn-control.stop .stop{display: block;}
.sec-visual .content-wrap .btn-wrap .btn-control.stop .play{display: none;}
.sec-visual .content-wrap .btn-wrap .btn-control.play .stop{display: none;}
.sec-visual .content-wrap .btn-wrap .btn-control.play .play{display: block;}
.sec-visual .content-wrap .btn-wrap .btn-link{height: 50px; padding: 0 20px; font-size: 1.125rem; color: white; border: 1px solid white; border-radius: 50px; display: flex; align-items: center; gap: 20px; transition: .3s;}
.sec-visual .content-wrap .btn-wrap .btn-control:hover,
.sec-visual .content-wrap .btn-wrap .btn-link:hover{background-color: rgba(255, 255, 255, .2);}


/*sec-intro*/
.sec-intro{position: relative; background: url('../img/main/bg-intro.png') 100% / cover no-repeat;}
.sec-intro .img-wrap img{position: absolute; background-color: #ddd; z-index: -1;}
.sec-intro .img-wrap img:first-of-type{left: 170px; top: 80px; box-shadow: -4px 4px 4px rgba(0, 0, 0, .1); width: 20%;}
.sec-intro .img-wrap img:nth-of-type(2){left: 40px; top: 560px; box-shadow: -4px 4px 4px rgba(0, 0, 0, .1); width: 15%;}
.sec-intro .img-wrap img:nth-of-type(3){left: 15%; bottom: 10px; box-shadow: -4px 4px 4px rgba(0, 0, 0, .1); width: 17%;}
.sec-intro .img-wrap img:nth-of-type(4){right: 270px; top: 140px; box-shadow: 4px 4px 4px rgba(0, 0, 0, .1); width: 20%;}
.sec-intro .img-wrap img:nth-of-type(5){right: 0; bottom: 60px; box-shadow: 4px 4px 4px rgba(0, 0, 0, .1); width: 30%;}
.sec-intro .content-wrap{max-width: 560px; width: 100%; margin: auto; text-align: center;}
.sec-intro .content-wrap .top-text{font-family: 'SBAggro'; font-size: 1.25rem; font-weight: 200; display: flex; flex-direction: column; gap: 10px;}
.sec-intro .content-wrap .top-text .number{font-size: 2.5rem; font-weight: 400;}
.sec-intro .content-wrap .bottom-text{padding-top: 140px; position: relative; margin-bottom: 50px;}
.sec-intro .content-wrap .bottom-text::before{content: ''; display: block; width: 1px; height: 0; background-color: #ccc; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); transition: 1s;}
.sec-intro .content-wrap .bottom-text.line::before{height: 120px;}

/*sec-popular*/
.sec-popular{position: relative;}
.sec-popular .tab-list{display: flex; gap: 10px; margin-bottom: 20px; max-width: 1050px; width: 100%;}
.sec-popular .tab-list > li{flex: 1;}
.sec-popular .tab-list .item{width: 100%; height: 64px; padding: 0 20px 0 60px; background: rgba(255, 255, 255, .6) 20px 50% no-repeat; border: 1px solid #ccc; font-size: 1.25rem; text-align: left; word-break: keep-all; transition: .3s;}
.sec-popular .tab-list > li:first-of-type .item{background-image: url('../img/main/ico-popular01.png');}
.sec-popular .tab-list > li:nth-of-type(2) .item{background-image: url('../img/main/ico-popular02.png');}
.sec-popular .tab-list > li:nth-of-type(3) .item{background-image: url('../img/main/ico-popular03.png');}
.sec-popular .tab-list .item:hover,
.sec-popular .tab-list .item.on{background-color: var(--color-m); color: white; border-color: var(--color-m);}
.sec-popular .tab-list > li:first-of-type:hover .item,
.sec-popular .tab-list > li:first-of-type .item.on{background-image: url('../img/main/ico-popular01On.png');}
.sec-popular .tab-list > li:nth-of-type(2):hover .item,
.sec-popular .tab-list > li:nth-of-type(2) .item.on{background-image: url('../img/main/ico-popular02On.png');}
.sec-popular .tab-list > li:nth-of-type(3):hover .item,
.sec-popular .tab-list > li:nth-of-type(3) .item.on{background-image: url('../img/main/ico-popular03On.png');}

.sec-popular .slide-box{max-width: 1000px; width: 100%; height: 525px;}
.sec-popular .slide-box .swiper{position: relative; display: none; width: 100%; height: 100%;}
.sec-popular .slide-box .swiper.on{display: block;}
.sec-popular .swiper .btn-control{position: absolute; top: 50%; transform: translateY(-50%); z-index: 200;}
.sec-popular .swiper .btn-control.btn-prev{left: 10px;}
.sec-popular .swiper .btn-control.btn-next{right: 10px;}
.sec-popular .swiper .btn-control:hover{border-color: var(--color-m); background-color: var(--color-m);}
.sec-popular .slide-item .slide-item{position: relative;}
.sec-popular .slide-item .img-info{width: 100%; height: 20%; background: linear-gradient(transparent, #000); position: absolute; bottom: 0;}
.sec-popular .slide-item .img-name{padding-right: 40px; font-size: 1.25rem; font-weight: 600; color: white; position: absolute; bottom: 20px; left: 20px; -webkit-line-clamp: 1;}
.sec-popular .slide-item .view-more{display: none;justify-content: center;align-items: center;width: 20px;aspect-ratio: 1 / 1;position: absolute;bottom: 20px;right: 20px;}
.sec-popular .slide-item .view-more .line{display: inline-block; width: 100%; height: 2px; background-color: white; position: relative; transition: .3s;}
.sec-popular .slide-item .view-more .line::before{content: ''; display: inline-block; width: 2px; height: 20px; background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .3s;}
.sec-popular .slide-item .view-more:hover .line{transform: rotate(90deg);}
.sec-popular .swiper .banner-page{display: none; position: absolute; top: 10px; left: auto; right: 10px; background-color: rgba(0, 0, 0, .5); color: white; z-index: 1; width: 60px; height: fit-content; text-align: center; padding: 7px; border-radius: 20px;}

.sec-popular .bg-img{width: 33%; height: 100%; position: absolute; top: 0; right: 0; z-index: -1; background: white url('../img/main/bg-popular.png') 100% / cover no-repeat;}

/*sec-qhick*/
.sec-qhick{background: url('../img/main/bg-qhick.png') 100% / cover no-repeat;}
.sec-qhick .quick-list{display: flex; gap: 4px;}
.sec-qhick .quick-list .item{width: 200px; height: 600px; background: left no-repeat; position: relative; transition: .3s; cursor: pointer;}
.sec-qhick .quick-list .item::before{content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3); position: absolute; top: 0; left: 0; transition: .3s;}
.sec-qhick .quick-list .item:nth-of-type(1){background-image: url('../img/main/img-quick01.png');}
.sec-qhick .quick-list .item:nth-of-type(2){background-image: url('../img/main/img-quick02.png');}
.sec-qhick .quick-list .item:nth-of-type(3){background-image: url('../img/main/img-quick03.png');}
.sec-qhick .quick-list .item:nth-of-type(4){background-image: url('../img/main/img-quick04.png');}
.sec-qhick .quick-list .item:nth-of-type(5){background-image: url('../img/main/img-quick05.png');}
.sec-qhick .quick-list .quick-title{font-size: 1.75rem; font-weight: 800; color: white; position: absolute; bottom: 20px; left: 20px; opacity: 1;}
.sec-qhick .more-wrap{height: 100%; opacity: 0; pointer-events: none; transform: translateY(20px); transition: .3s;}
.sec-qhick .more-wrap .inner{height: 100%; display: flex; align-items: flex-end; gap: 10px; position: relative; z-index: 1; padding: 20px;}
.sec-qhick .more-wrap .more-title{font-size: 1.75rem; font-weight: 800; color: white;}
.sec-qhick .more-wrap .sub-wrap{margin-bottom: 40px; display: flex; flex: 1; position: relative;}
.sec-qhick .more-wrap .sub-wrap::before{content: ''; display: block; width: 0; height: 1px; background-color: white; position: absolute; left: 0; bottom: -20px; transition: .3s;}
.sec-qhick .more-wrap .sub-wrap > div{flex: 1; display: flex; flex-direction: column;}
.sec-qhick .more-wrap .sub-title{font-size: 1.5rem; font-weight: 700; color: white;}
.sec-qhick .more-wrap .sub-item{display: flex; align-items: center; gap: 10px;}
.sec-qhick .more-wrap .sub-item:not(.sub-title){font-size: 1.125rem; color: white;}
.sec-qhick .more-wrap .sub-item:hover{gap: 15px;}
.sec-qhick .more-wrap .small .sub-list{margin-top: 5px;}
.sec-qhick .more-wrap .small .sub-list > li{margin-bottom: 5px;}
.sec-qhick .more-wrap .large .sub-item:not(:last-of-type){margin-bottom: 10px;}

.sec-qhick .quick-list .item.on{flex: 1;}
.sec-qhick .quick-list .item.on::before{background-color: rgba(0, 0, 0, .6);}
.sec-qhick .quick-list .item.on .quick-title{opacity: 0;}
.sec-qhick .quick-list .item.on .sub-wrap::before{width: 100%;}
.sec-qhick .quick-list .item.on .more-wrap.on{opacity: 1; pointer-events: auto; transform: translateY(0);}




@media (max-width:1600px){
	.section:not(.sec-intro, .sec-footer) .sec-inner{width: calc(100% - 150px); margin: 100px 20px 100px 130px;}

}

@media (max-width:1400px){
	.sec-qhick .quick-list .item{width: 140px;}
	.sec-qhick .more-wrap .sub-wrap{flex-direction: column; gap: 10px;}
	.sec-qhick .quick-list .item{background-size: cover;}
}

@media (max-width:1200px){


	#fp-nav ul li .fp-tooltip{display: none;}
	#fp-nav ul li a span,
	.fp-slidesNav ul li a span{display: block; opacity: 1; background-color: rgba(255, 255, 255, .3); width: 13px; height: auto; aspect-ratio: 1 / 1; border: 1px solid rgba(0, 0, 0, .3); right: 6px;}

	.section:not(.sec-intro, .sec-footer) .sec-inner{width: calc(100% - 75px); margin: 100px 20px 100px 55px;}

	.sec-visual .content-wrap{left: 120px;}

	.scroll-wrap{left: 12px;}
}

@media (max-width:1024px){
	.fp-section, .fp-tableCell{height: auto !important;}
	.scroll-wrap{position: absolute; left: 50%; transform: translateX(-50%);}
	.section:not(.sec-intro, .sec-footer) .sec-inner{margin: 50px auto; width: calc(100% - 40px);}
	.sec-visual .content-wrap{left: 20px; width: calc(100% - 40px);}
	.sec-visual .content-wrap .search-bar{width: 100%;}
	.sec-intro .sec-inner{margin: 100px auto;}
	.sec-intro .img-wrap img:first-of-type{left: 20px; top: 30px; width: 27%;}
	.sec-intro .img-wrap img:nth-of-type(2){top: auto; bottom: 100px; width: 20%;}
	.sec-intro .img-wrap img:nth-of-type(4){right: 50px; top: 130px; width: 25%;}
	.sec-intro .content-wrap .bottom-text{padding-top: 80px;}
	.sec-intro .content-wrap .bottom-text.line::before{height: 60px;}
	.sec-popular .slide-box{height: auto; aspect-ratio: 2 / 1;}
	.sec-qhick .quick-list{flex-direction: column;}
	.sec-qhick .quick-list .item{width: 100%; height: 120px;}
	.sec-qhick .quick-list .item.on{height: 280px; flex: none;}
}
@media (max-width:720px){

	.sub-title .title{font-size: 3rem;}

	.sec-visual .content-wrap .main-text{font-size: 3rem;}
	.sec-visual .content-wrap .btn-wrap{gap: 10px;}
	.sec-intro .img-wrap img:nth-of-type(3){display: none;}
	.sec-intro .img-wrap img:nth-of-type(4){right: 30px; top: 220px;}
	.sec-popular .bg-img{width: 100%; height: 170px;}
	.sec-popular .sub-title .archive{color: white;}
	.sec-popular .sub-title .title{color: white;}
	.sec-popular .swiper .btn-wrap{display: none;}
	.sec-popular .slide-item .img-name{bottom: 10px; left: 10px;}
	.sec-popular .slide-item .view-more{bottom: 10px; right: 10px;}
	.sec-popular .swiper .banner-page{display: block;}
}


@media (max-width:480px){

	.sub-title .title{font-size: 2.5rem;}

	.sec-visual .content-wrap .main-text{font-size: 2.5rem;}
	.sec-visual .content-wrap .btn-wrap{flex-wrap: wrap;}
	.sec-intro .img-wrap img:nth-of-type(2){display: none;}
	.sec-intro .img-wrap img:nth-of-type(5){bottom: 20px; width: 40%;}
	.sec-popular .tab-list{flex-direction: column;}
	.sec-popular .slide-box{aspect-ratio: 1 / 1;}
	.sec-qhick .more-wrap .inner{flex-direction: column-reverse; align-items: flex-start}
	.sec-qhick .more-wrap .sub-wrap{flex: none; width: 100%; margin-bottom: 24px;}
	.sec-qhick .more-wrap .sub-title{font-size: 1.25rem;}

}