/* 서브페이지 공통 */

/* 시안에 -0.04em 이 아닌것도 있음 확인 필요, 대부분 -0.04em */
._sub { letter-spacing: -0.04em; }
._contents {padding: 120px 0; }

@media screen and (max-width: 820px){
    ._contents {padding: 100px 0; }
}

@media screen and (max-width: 500px){
    ._contents {padding: 70px 0; }
}



header { color: #000; }
header .logo svg *{fill: #000;}
header .menuIco div { background-color: #000; }

._sub_visual {width: 100%; height: var(--vh100); position: relative; display: flex; align-items: center; justify-content: center;overflow: hidden; }
._sub_visual .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
._sub_visual .wrap { display: flex; margin: 0 auto; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: absolute; z-index: 2; top: 37%; }
._sub_visual .wrap span{ font-size: 30px; letter-spacing: -0.04em; color: #484747; margin-bottom: 10px; font-weight: 500; display: block; }
._sub_visual .wrap h1 { font-size: 100px; font-family: 'Mona Sans'; font-weight: 700; letter-spacing: -0.03em; color: #484848; }
._sub_visual .wrap p { font-weight: 500; line-height: calc(24/16); color: #9b9b9b; margin-top: 40px; margin-bottom: 80px; }
._sub_visual .wrap .ico { display: flex; width: 114px; height: 114px; align-items: center; justify-content: center; position: relative; cursor: pointer; }
._sub_visual .wrap .ico div { width: 100%; height: 100%; filter: brightness(0); transition: filter 0.4s; background-position: center; background-size: contain; background-repeat: no-repeat; }
._sub_visual .wrap .ico:hover div { filter: brightness(1); }
._sub_visual .wrap .ico div:nth-child(1) { animation: rotate forwards infinite 30s linear; }
._sub_visual .wrap .ico div:nth-child(2) { position: absolute; width: 13.15%; animation: floating10 forwards infinite 3s; }

/* 모션 셋팅 */
._sub_visual .wrap > * { opacity: 0; transform: translateY(60px); }
._sub_visual .bg { transform: scale(1.3); filter: blur(10px); }

@media screen and (max-width:1600px) {
	._sub_visual .wrap { position: relative; top: unset; }
}
@media screen and (max-width:1440px) {
    ._sub_visual .wrap span{ font-size: max(calc(30/1440*100vw),16px); }
	._sub_visual .wrap h1 { font-size: max(calc(100/1440*100vw),60px); }
}
@media screen and (max-width:1280px) { }
@media screen and (max-width:1024px) { }
@media screen and (max-width:820px) {
	._sub_visual .wrap p { font-size: 14px; }
    ._sub_visual .wrap span{ font-size: 14px; }
}
@media screen and (max-width:500px) {
	._sub_visual .wrap h1 { font-size: clamp(34px,calc(60/500*100vw),60px); }
	._sub_visual .wrap p { max-width: 320px; margin-top: 30px; }
	/* ._sub_visual .wrap p br { display: none; } */
	._sub_visual .wrap .ico { width: 100px; height: 100px; }
}
@media screen and (max-width:320px) { }

._tabBx { }
._tabBx .inner {display: flex; justify-content: center; flex-wrap: wrap; }
._tabBx .inner > * {min-width: 127px; font-size: 17px; font-weight: 500;color: #3a3a3a; text-align: center; cursor: pointer; border-right: 1px solid #aaaaaa; box-sizing: border-box;  padding: 0 12px;}
._tabBx .inner.width_auto > *{min-width: unset; padding: 0 20px;}
._tabBx .inner > *:last-child { border: 0; }

._tabBx .inner > *.on { color: var(--orange); }
._tabBx .inner > * > p { }

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

@media screen and (max-width: 820px){
    ._tabBx .inner > *{ font-size: 14px; min-width: 100px; }
}

@media screen and (max-width: 500px){
    ._tabBx .inner > *{ font-size: 13px; min-width: 60px; }
}



._searchArea { }
._searchArea .inner {display: flex; gap: 12px; justify-content: center;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 { }
._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; }
._searchArea .inner .bar input::placeholder {font-size: inherit; font-family: inherit; color: #b2b2b2; }
._searchArea .inner .bar button {color: #b2b2b2; font-size: 17px;width: 50px; height: 53px; }
._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; }
}



._paging { font-size: 17px; text-align: center; }
._paging .inner {display: inline-flex; align-items: center; justify-content: center; position: relative; }
._paging .arrowBx {color: rgba(0,0,0,0.4);display: flex; align-items: center; justify-content: center;position: absolute; height: 100%; }
._paging .arrowBx.prev { right: 100%; }
._paging .arrowBx.next { left: 100%; }
._paging .arrowBx a {height: 100%; width: 1.2em;display: flex; align-items: center; }
._paging .arrowBx a:hover { color: #000; }
._paging .arrowBx .double { }
._paging .arrowBx .double i:nth-child(1) { margin-right: -0.35em; }
._paging .arrowBx .double i:nth-child(2) { margin-left: -0.35em; }
._paging .arrowBx .single { }
._paging .arrowBx i { }
._paging .arrowBx i:hover { }
._paging .arrowBx .prev { }
._paging .arrowBx .next { }
._paging .num {display: flex; align-items: center; justify-content: center;padding: 0 8px; }
._paging .num a {width: 32px; height: 32px; border-radius: 3px;font-weight: 500;display: flex; align-items: center; justify-content: center; }
._paging .num a.on { background-color: var(--orange); color: #fff; }
._paging .num a p { }

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

@media screen and (max-width: 820px){
    ._paging{ font-size: 14px; }
}


/* 버튼 공통 */
.__btn { }
.__btn > * {width: 130px; height: 48px;display: flex; align-items: center; justify-content: center; color: #fff;border-radius: 6px; font-size: 17px; background-color: #000;margin: 0 auto; gap: 12px; letter-spacing: -0.04em; }
.__btn > *:hover { background-color: var(--orange); }
.__btn > * i { transform: translateY(-10%) rotateY(180deg); }
.__btn > * i { }
.__btn > * p { }

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

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