:root{
	word-break: keep-all;
}
main{overflow: hidden;}
small,strong,em,a{display: block;}
.header{background-color: transparent;}


/* subVisual */
._subVisual{
	position: relative;
}
._subVisual .bg{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	background-size: cover; overflow: hidden;
}
._subVisual .bg img{
	width: 100%; height: 100%; object-fit: cover;
}
._subVisual .wrap{
	position: relative; z-index: 2;
	display: flex; align-items: center;
	padding-bottom: 100px; padding-top: 140px;
}
._subVisual .txtBx{color: #fff;}
._subVisual .top{}
._subVisual .top div{overflow: hidden;}
._subVisual .top div:nth-child(1){margin-bottom: 10px;}
._subVisual .top p{
	color: var(--point-color-1); letter-spacing: -0.025em; text-transform: uppercase; font-weight: 700;
}
._subVisual .top small{
	font-size: 20px; letter-spacing: -0.025em; line-height: 1.5;
}
._subVisual h2{
	font-size: 60px; font-weight: 700; letter-spacing: -0.025em;
	margin-top: 70px; margin-bottom: 22px; overflow: hidden;
}
._subVisual h2 p{}
._subVisual .navi{
	font-size: 18px;
	color: #a6a6a6; row-gap: 14px;
	display: flex; align-items: center; flex-wrap: wrap;
}
._subVisual .navi a{transition: color 0.2s;}
._subVisual .navi a:hover{color: #fff;}
._subVisual .navi a:nth-child(1){margin-right: 24px;}
._subVisual .navi a:last-child{color: var(--point-color-1);}
._subVisual .navi a i{}
._subVisual .navi > i{margin: 0 14px;}
._subVisual .scrollDown{
	font-size: 22px;
	color: #fff;
	position: absolute; right: -120px; bottom: 60px;
}
._subVisual .scrollDown > div{
	display: flex; align-items: center; justify-content: center; position: relative;
	position: relative; width: calc(150/22*1em); height: calc(150/22*1em); margin-left: auto;
}
._subVisual .scrollDown .circle{
	animation: rotate forwards infinite 10s linear;
	width: 100%; height: 100%; background-size: cover;
}
._subVisual .scrollDown i{
	margin-top: 10px; font-size: max(1em,14px);
	position: absolute; animation: floating10 forwards infinite 3s;
}

@keyframes rotate {
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}

@keyframes floating10 {
	0%{transform:translateY(0px)}
	50%{transform:translateY(-10px)}
	100%{transform:translateY(0px)}
}


@media screen and (max-width:1800px) {
	._subVisual .scrollDown{right: 0;}
}
@media screen and (max-width:1600px) {
	._subVisual .wrap{flex-direction: column; align-items: flex-start; gap: 60px;}
	._subVisual h2{margin-top: 40px; margin-bottom: 24px;}
	._subVisual .scrollDown{position: unset; width: 100%;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	._subVisual .top small{font-size: 18px;}
	._subVisual h2{font-size: 40px;}

	._subVisual .scrollDown{font-size: 18px;}
	._subVisual .scrollDown > div{margin: 0 auto;}
}
@media screen and (max-width:500px) {
	._subVisual .wrap{padding-top: 80px; padding-bottom: 60px; gap: 50px;}
	._subVisual h2{font-size: 34px; margin-top: 30px;}
	._subVisual .top p{font-size: 12px;}
	._subVisual .top div{font-size: 14px;}
	._subVisual .navi{font-size: 14px;}
	._subVisual .navi a:nth-child(1){margin-right: 14px;}
	._subVisual .navi > i{margin: 0 8px;}

	._subVisual .scrollDown{font-size: 12px;}
}
@media screen and (max-width:320px) {}






/* 검색바 */
._searchArea{}
._searchArea div{
	width: 100%; max-width: 340px; height: 44px;
	display: flex; align-items: center; position: relative; margin-left: auto;
}
._searchArea input{
	width: 100%; height: 100%;
	border-radius: 100px; border: 1px solid #eeeeee; box-sizing: border-box;
	padding-left: 30px; padding-right: 50px;
	font-family: 'Pretendard'; font-size: 16px; letter-spacing: -0.025em; font-weight: 500;
}
._searchArea input::placeholder{color: #b1b1b1;}
._searchArea button{
	position: absolute; right: 0;
	width: 36px; height: 36px; color: #fff; background-color: var(--point-color-1);
	display: flex; align-items: center; justify-content: center;
	right: 4px; border-radius: 50%;
	transition: background-color 0.2s;
}
._searchArea button i{}
._searchArea button:hover{
	background-color: #444;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	._searchArea div{max-width: unset; height: 36px;}
	._searchArea input{font-size: 14px; padding-left: 20px;}
	._searchArea button{width: 30px; height: 30px; right: 3px;}
}
@media screen and (max-width:320px) {}



/* 페이징 */
._pagination{}
._pagination > div{
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
}
._pagination > div > div{
	display: flex; align-items: center; justify-content: center; gap: 4px;
}
._pagination > div > div a{
	display: flex; align-items: center; justify-content: center;
	color: #7c7c7c; transition: color 0.2s;
}
._pagination > div > div a:hoveR{
	color: #000;
}
._pagination > div > div i{}
._pagination > div > div .double{}
._pagination > div > div .double i{}
._pagination > div > div .double i:nth-child(1){}

._pagination > div > div .double i:nth-child(1){margin-right: -10px;}

._pagination > div > div .single{}
._pagination > div > div .single i{}
._pagination ul{
	display: flex; align-items: center; justify-content: center;
	margin: 0 20px; gap: 4px;
}
._pagination ul li{}
._pagination ul li a{
	width: calc(28/16*1em); height: calc(28/16*1em); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
._pagination ul li a:hover{background-color: #666; color: #fff;}
._pagination ul li.on a{
	background-color: var(--point-color-2);
	color: #fff;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	._pagination ul{margin: 0 14px;}
	._pagination ul li a{font-size: 14px;}
}
@media screen and (max-width:320px) {}