/* 서브 비주얼 새로 */
._subVisual{
	width: 100%; font-size: calc(1/1920*100vw); position: relative;
	font-family:'museo-sans'; letter-spacing: -0.03em;
}
._subVisual .pinBx{
	width: 100%; height: var(--vh100);
}
html.kakaoWeb ._subVisual .pinBx{height: var(--vh100_kakao);}
html.safariWeb ._subVisual .pinBx{height: var(--vh100_safari);}
._subVisual .first{
	height: 100%; padding-top: 130px; box-sizing: border-box; position: relative; overflow: hidden;
	display: flex; justify-content: center; align-items: flex-start;
}
._subVisual .first .topTxt{
	font-size: 80em; font-weight: 700; text-align: center;
}
._subVisual .first .topTxt p{}
._subVisual .first .img{
	position: absolute;
	display: flex; align-items: center; justify-content: center;
}
._subVisual .first .img > div{
	display: flex; align-items: flex-end; justify-content: center;
	position: absolute; width: 100%; height: 100%;
	border-radius: 30em; overflow: hidden;
}
._subVisual .first .img > div > div{
	background-size: cover; background-position: center;
	position: absolute; width: 100vw; height: var(--vh100);
	background-size: cover; background-position: center center;
}
html.kakaoWeb ._subVisual .first .img > div > div{height: var(--vh100_kakao);}
html.safariWeb ._subVisual .first .img > div > div{height: var(--vh100_safari);}


/* 좌우 배경이미지 가운데 이미지랑 한개처럼 보이게 맞추기 */
._subVisual .first .img.left > div > div{left: -7vw;top: calc(var(--vh) * -15);}
._subVisual .first .img.right > div > div{left: -80.7vw;top: calc(var(--vh) * -30);}

._subVisual .first .img.left{width: 152em;}
._subVisual .first .img.left::before {
	content:''; display: block; padding-bottom: calc(213/152*100%);
}
._subVisual .first .img.left div{}
._subVisual .first .img.right{width: 254em;}
._subVisual .first .img.right::before {
	content:''; display: block; padding-bottom: calc(355/254*100%);
}
._subVisual .first .img.right div{}
._subVisual .first .img.center{
	width: 636em; height: calc(100% - (130px + 100em));
	align-items: flex-end; z-index: 2;
}
._subVisual .first .img.center > div{border-radius: 30em 30em 0 0; filter: brightness(1);}
._subVisual .first .img.center > div > div{
	width: 100vw; height: var(--vh100);
}


._subVisual .first .img.left{left: 7%;top: 15%;}
._subVisual .first .img.right{top: 30%;right: 6%;}
._subVisual .first .img.center{bottom: 0;}

._subVisual .first .bottom{
	position: absolute; bottom: -50em; left: 0;
	display: flex; align-items: center; justify-content: center; width: 100%;
}
._subVisual .first .txt{
	position: absolute; bottom: 100%;
	right: calc(50% + 360em);
}
._subVisual .first .txt p{
	font-size: max(20em,20px); font-weight: 500;  line-height: 1.4; text-align: right;
}
._subVisual .first .marquee{
	font-size: 270em; font-weight: 700; color: var(--red);
	display: flex; text-transform: uppercase; align-items: center; justify-content: center; white-space: nowrap;
}
._subVisual .first .marquee p{
	animation: marquee forwards infinite 10s linear; padding-right: 0.25em;
}

._subVisual .second{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4;
	display: flex;
	flex-direction: column; align-items: center; justify-content: center;
	color: #fff;
}
._subVisual .second small{
	display: block; font-size: 40em; line-height: 1.3;
}
._subVisual .second h1{
	font-size: 80em; font-weight: 700; line-height: 1.3;
}


/* 가로가 길경우 */
@media (orientation: landscape) and (max-height:900px){}
@media (orientation: landscape) and (max-height:800px){}
@media (orientation: landscape) and (max-height:700px){
	._subVisual .first{padding-top: 100px;}
	._subVisual .first .img.center{height: calc(100% - (100px + 100em));}
}
@media (orientation: landscape) and (max-height:600px){
	._subVisual .first .txt{display: none;}
}
@media (orientation: landscape) and (max-height:500px){}
@media (orientation: landscape) and (max-height:400px){}
@media (orientation: landscape) and (max-height:300px){}


/* 세로가 길경우 */
@media (orientation: Portrait){
	._subVisual .first{padding-top: 0; align-items: center; flex-direction: column;}
	._subVisual .first .topTxt{
		font-size: 10vw; color: #fff;
		position: absolute; z-index: 3;
	}
    ._subVisual .first .img > div{align-items: center;}
	._subVisual .first .img.center{width: calc(100% - 80px); height: calc(100% - 160px); position: relative; bottom: unset; align-items: center;}
	._subVisual .first .img.center > div{border-radius: 5vw; filter: brightness(0.8);}
	._subVisual .first .txt{display: none;}
	._subVisual .first .img.left{display: none;}
	._subVisual .first .img.right{display: none;}
	._subVisual .first .bottom{bottom: 0; z-index: 2;}
	._subVisual .first .marquee{font-size: 30vw;}

	._subVisual .second small{font-size: calc(40/1920*100vw);}
	._subVisual .second h1{font-size: calc(80/1920*100vw);}
}
@media (orientation: Portrait) and (max-width:1600px) {}
@media (orientation: Portrait) and (max-width:1440px) {}
@media (orientation: Portrait) and (max-width:1280px) {}
@media (orientation: Portrait) and (max-width:1024px) {
	._subVisual .second small{font-size: calc(40/1024*100vw);}
	._subVisual .second h1{font-size: calc(80/1024*100vw);}

	._subVisual .first .bottom{bottom: 10vw;}
	html.kakaoWeb ._subVisual .first .bottom{bottom: calc(10vw + 60px);}
	html.safariWeb ._subVisual .first .bottom{bottom: calc(10vw + 60px);}

}
@media (orientation: Portrait) and (max-width:820px) {}
@media (orientation: Portrait) and (max-width:500px) {
	._subVisual .second small{font-size: max(calc(20/500*100vw),14px);}
	._subVisual .second h1{font-size: 10vw;}
}
@media (orientation: Portrait) and (max-width:320px) {}




/* ._subVisual .first .img > div{overflow: visible; opacity: 0.5 !important;} */






/* sub title 공통 */

._sub .cont ._tit{font-size: 50px;font-weight: 700;color: #484848;text-align: center;margin-top: 80px;font-family:"museo-sans";overflow: hidden;}
._sub .cont ._tit h2{}

@media screen and (max-width: 1680px){
    ._sub .cont ._tit{font-size: clamp(42px, 42 / 1440 * 100vw, 50px);}
}
@media screen and (max-width: 1440px){
    ._sub .cont ._tit{font-size: clamp(38px, 38 / 1280 * 100vw, 42px);}
}
@media screen and (max-width: 1280px){
    ._sub .cont ._tit{font-size: clamp(34px, 34 / 1024 * 100vw, 38px);}
}
@media screen and (max-width: 1024px){
    ._sub .cont ._tit{font-size: clamp(30px, 30 / 820 * 100vw, 34px);}
}
@media screen and (max-width: 500px){
    ._sub .cont ._tit{font-size: clamp(26px, 26 / 360 * 100vw, 30px);}

}
@media screen and (max-width: 360px){
    ._sub .cont ._tit{font-size: clamp(24px, 24 / 360 * 100vw, 26px);}
}


/* 버튼 공통 */
.__btn { }
.__btn > * {width: 130px; height: 48px;display: flex; align-items: center; justify-content: center; color: #fff;font-size: 17px; background-color: #b51f28;margin: 0 auto; gap: 12px; letter-spacing: -0.04em; transition: background-color .3s ease, color .3s ease; }
.__btn > *:hover { background-color: #444; }

@media screen and (max-width: 1280px){
    .__btn > *{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    .__btn > *{ font-size: 14px; height: 40px; }
}


/* 페이징 공통 */

.paging{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    gap: 1.2em;
    font-size: 17px;
}
/* #last, #first{display: none;} */
.paging ul{display: flex;align-items: center;gap: 2.2em;}
.paging ul li{cursor: pointer;}
.paging ul li a{
    font-weight: 600;color: #000;position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.paging ul li a.on{color: #fff;}
.paging ul li a.on:before {
    content: '';
    display: block;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    background-color: #b51f28;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.paging .prev i,.paging .next i{color: rgba(0, 0, 0, 0.41);transition: color .3s ease;cursor: pointer;}
._media .cont .paging .prev:hover i,._media .cont .paging .next:hover i{color: #565656;}

.paging .prevBx,.paging .nextBx{display: flex;align-items: center;gap: .5em}
.paging #first,.paging #last{display: flex;align-items: center;}
.paging #first i,.paging #last i{margin: 0 -6px;}


@media screen and (max-width: 820px){
    .paging{font-size: 16px;}
    .paging ul li a.on:before{width: 2.2em;height: 2.2em;}

}
@media screen and (max-width: 500px){
    .paging{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}
    .paging ul{gap: 2em;}
    .paging #first i, .paging #last i {margin: 0 -5px;}
}


/* 검색바 */
._searchArea {margin-top: 40px;}
._searchArea .inner {display: flex; gap: 12px; justify-content: flex-end;height: 53px; width: 100%; }
._searchArea .inner > * {background-color: #f3f3f3; border-radius: 7px; height: 100%;display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; }
._searchArea .inner .select {width: 130px; position: relative; color: #b2b2b2;padding: 0 18px; }
._searchArea .inner .select select {position: absolute; left: 0; top: 0; width: 100%; height: 100%;padding: 10px; opacity: 0; }
._searchArea .inner .select option { }
._searchArea .inner .select p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; padding-right: 12px; }
._searchArea .inner .select p.on { color: #000; }
._searchArea .inner .select i {position: absolute; right: 18px; color: #b2b2b2; transition: transform 0.4s; }
._searchArea .inner .bar { max-width: 100%;}
._searchArea .inner .bar input {border: 0; padding: 0; margin: 0; background-color: transparent;font-size: 17px; padding-left: 18px; box-sizing: border-box; letter-spacing: -0.04em; max-width: calc(100% - 50px);}
._searchArea .inner .bar input::placeholder {font-size: inherit; font-family: inherit; color: #b2b2b2; }
._searchArea .inner .bar button {color: #b2b2b2; font-size: 17px;width: 50px; background-color: transparent; height: 100%;}
._searchArea .inner .bar button:hover { color: #000; }
._searchArea .inner .bar button i { }


@media screen and (max-width: 1280px){
    ._searchArea .inner .bar input{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    ._searchArea .inner{ height: 42px; }
    ._searchArea .inner .bar input{ font-size: 14px; }
}

@media screen and (max-width: 500px){

    ._searchArea .inner {display: flex; gap: 12px; justify-content: center;}

}