html{
	--blue:#2a4ff1;
	--vh:1vh;
	--vh100:calc(var(--vh) * 100);
	word-break: keep-all;
	/* letter-spacing: -0.04em; */
}
html.safariWeb { --vh100:calc((var(--vh) * 100) + 120px) !important; }
html.kakoWeb { --vh100:calc((var(--vh) * 100) + 120px) !important; }

a{display: block;}
button{border: 0; padding: 0; margin: 0; background-color: transparent; cursor: pointer;}
section{overflow: hidden;}

/* 버튼 공통 */
._basicbtn > *{ display: inline-flex; align-items: center; justify-content: center; padding: 0 calc(20/15*1em); height: calc(45/15*1em); width: auto; border-radius: 100px; overflow: hidden; color: #fff; background-color: #2d2e30; font-size: 15px; gap: 10px; font-family: 'Poppins', sans-serif; border: 0; cursor: pointer;}
._basicbtn > *:hover{
    /* background-color: var(--blue); */
    background: #000;
    color: #ffff;
}
@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) {
	._basicbtn > *{font-size: 12px; }
}
@media screen and (max-width:320px) {}



/* scroll down */
._scrolldown{
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7px;
}

._scrolldown em{ display: block; font-size: 12px; font-family: 'Poppins', sans-serif; letter-spacing: -0.04em; font-weight: 200; color: #fff; }

._scrolldown .btn-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #2a4ff1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

._scrolldown .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: white;
    position: absolute;
    left: calc(50% - 3.5px);
    top: calc(50% - 3.5px);
}

.btn-circle.down .orbit .dot:nth-child(1) { animation: orb1 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite 0s; }
.btn-circle.down .orbit .dot:nth-child(2) { animation: orb2 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite 0s; }
.btn-circle.down .orbit .dot:nth-child(3) { animation: orb3 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite 0s; }

@keyframes orb1 {
    0%   { transform: translate(-5px, -1px); }
    33%  { transform: translate( 5px, -1px); }
    66%  { transform: translate(  0px, 5px); }
    100% { transform: translate(-5px, -1px); }
}

@keyframes orb2 {
    0%   { transform: translate( 5px, -1px); }
    33%  { transform: translate(  0px, 5px); }
    66%  { transform: translate(-5px, -1px); }
    100% { transform: translate( 5px, -1px); }
}

@keyframes orb3 {
    0%   { transform: translate(  0px, 5px); }
    33%  { transform: translate(-5px, -1px); }
    66%  { transform: translate( 5px, -1px); }
    100% { transform: translate(  0px, 5px); }
}


._gradientTxt{
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent;
}


/* s_contact */
.s_contact {position: relative;padding-top: 150px; padding-bottom: 140px; }
.s_contact .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow:hidden; }
.s_contact .bg div {width: 100%; height: 100%; background-position: center center; background-size: cover; }
.s_contact .wrap {position: relative; z-index: 2;display: flex; align-items: flex-start; justify-content: space-between; }
.s_contact ._title { color: #fff; }
.s_contact .txtBx { color: #fff; }
.s_contact .txtBx h4 {font-size: 20px; font-weight: 600; line-height: 1.4; }
.s_contact .txtBx p {
    /* font-weight: 300;  */
    font-weight: 500;
    line-height: calc(31/17);margin-top: 10px; margin-bottom: 32px; }
.s_contact .txtBx ._basicbtn > * {background-color: #fff; color: #000; }
.s_contact .txtBx ._basicbtn > *:hover {
    /* background-color: var(--blue);  */
    background-color: #2d2e30;
    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) {
	.s_contact{padding: 100px 0;}
	.s_contact .wrap{flex-direction: column; gap: 40px; text-align: center; align-items: center;}
}
@media screen and (max-width:820px) {
	.s_contact .txtBx p{max-width: 400px;}
	.s_contact .txtBx p br{display: none;}
}
@media screen and (max-width:500px) {
	.s_contact{padding: 80px 0;}
	.s_contact .txtBx h4{font-size: 18px; }
	.s_contact .txtBx p{font-size: 14px; }
}
@media screen and (max-width:320px) {}







/* 키프레임 모션 모음 */
@keyframes opacity {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes opacity20 {
	0% { opacity: 1; }
	50% { opacity: 0.2; }
	100% { opacity: 1; }
}

@keyframes opacity50 {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}

@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes rotate2 {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}

@keyframes rotate3 {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(90deg); }
	50% { transform: rotate(180deg); }
	75% { transform: rotate(270deg); }
	100% { transform: rotate(360deg); }
}

@keyframes rotate4 {
	0% { transform: rotate(0deg); }
	12.5% { transform: rotate(45deg); }
	25% { transform: rotate(90deg); }
	37.5% { transform: rotate(135deg); }
	50% { transform: rotate(180deg); }
	62.5% { transform: rotate(225deg); }
	75% { transform: rotate(270deg); }
	87.5% { transform: rotate(315deg); }
	100% { transform: rotate(360deg); }
}

@keyframes scale50 {
	0% { transform: scale(1); }
	50% { transform: scale(0.5); }
	100% { transform: scale(1); }
}

@keyframes scale80 {
	0% { transform: scale(1); }
	50% { transform: scale(0.8); }
	100% { transform: scale(1); }
}

@keyframes scale90 {
	0% { transform: scale(1); }
	50% { transform: scale(0.9); }
	100% { transform: scale(1); }
}

@keyframes scale95 {
	0% { transform: scale(1); }
	50% { transform: scale(0.95); }
	100% { transform: scale(1); }
}

@keyframes scale105 {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

@keyframes scale110 {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

@keyframes scale120 {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

@keyframes scale130 {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

@keyframes scale140 {
	0% { transform: scale(1); }
	50% { transform: scale(1.4); }
	100% { transform: scale(1); }
}

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

@keyframes floating20 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
	100% { transform: translateY(0px); }
}

@keyframes floating30 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-30px); }
	100% { transform: translateY(0px); }
}

@keyframes floating40 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-40px); }
	100% { transform: translateY(0px); }
}

@keyframes floating60 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-60px); }
	100% { transform: translateY(0px); }
}

@keyframes floating80 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-80px); }
	100% { transform: translateY(0px); }
}

@keyframes floating80 {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-80px); }
	100% { transform: translateY(0px); }
}

@keyframes marquee {
	from{transform:translateX(0%)}
	to{transform:translateX(-100%)}
}

@keyframes marquee50 {
	from{transform:translateX(0%)}
	to{transform:translateX(-50%)}
}

._opacity { animation: opacity 5s infinite; }
._opacity20 { animation: opacity20 5s infinite; }
._opacity50 { animation: opacity50 5s infinite; }

._rotate { animation: rotate 5s infinite; }
._rotate2 { animation: rotate2 5s infinite; }
._rotate3 { animation: rotate3 5s infinite; }
._rotate4 { animation: rotate4 5s infinite; }

._scale50 { animation: scale50 5s infinite; }
._scale80 { animation: scale80 5s infinite; }
._scale110 { animation: scale110 5s infinite; }
._scale120 { animation: scale120 5s infinite; }
._scale130 { animation: scale130 5s infinite; }
._scale140 { animation: scale140 5s infinite; }

._floating10 { animation: floating10 5s infinite; }
._floating20 { animation: floating20 5s infinite; }
._floating30 { animation: floating30 5s infinite; }
._floating40 { animation: floating40 5s infinite; }
._floating60 { animation: floating60 5s infinite; }
._floating80 { animation: floating80 5s infinite; }

._marquee { animation: marquee 10s infinite; }
._marquee50 { animation: marquee50 10s infinite; }

._delay05{animation-delay: 0.5s !important;}
._delay1{animation-delay: 1s !important;}
._delay15{animation-delay: 1.5s !important;}
._delay2{animation-delay: 2s !important;}
._delay25{animation-delay: 2.5s !important;}
._delay3{animation-delay: 3s !important;}
._delay35{animation-delay: 3.5s !important;}
._delay4{animation-delay: 4s !important;}
._delay45{animation-delay: 4.5s !important;}
._delay5{animation-delay: 5s !important;}

._duration05{animation-duration: 0.5s !important;}
._duration1{animation-duration: 1s !important;}
._duration15{animation-duration: 1.5s !important;}
._duration2{animation-duration: 2s !important;}
._duration25{animation-duration: 2.5s !important;}
._duration3{animation-duration: 3s !important;}
._duration35{animation-duration: 3.5s !important;}
._duration4{animation-duration: 4s !important;}
._duration45{animation-duration: 4.5s !important;}
._duration5{animation-duration: 5s !important;}
._duration55{animation-duration: 5.5s !important;}
._duration6{animation-duration: 6s !important;}
._duration65{animation-duration: 6.5s !important;}
._duration7{animation-duration: 7s !important;}
._duration75{animation-duration: 7.5s !important;}
._duration8{animation-duration: 8s !important;}
._duration85{animation-duration: 8.5s !important;}
._duration9{animation-duration: 9s !important;}
._duration95{animation-duration: 9.5s !important;}
._duration10{animation-duration: 10s !important;}




/* filterBx */

.filterBx{
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 60px;margin-bottom: 50px;
}
.filterBx .tabBx ul{display: flex; align-items: center; gap: 10px;}
.filterBx .tabBx ul li{
    font-size: 18px;font-weight: 500;color: #888888;
    padding: calc(16/18*1em) calc(28/18*1em);
    box-sizing: border-box;
    border-radius: 25px;
    background: #e2e2e2;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.filterBx .tabBx ul li:hover{background: #000; color: #fff;}
/* .filterBx .tabBx ul li:hover{background: #2a4ff1; color: #fff;} */
.filterBx .tabBx ul li.on{background: #000; color: #fff;}
/* .filterBx .tabBx ul li.on{background: #2a4ff1; color: #fff;} */

.filterBx .searchBx{
    display: flex; align-items: center; gap: 10px;
}

.filterBx .searchBx .search{width: 100%;max-width: 390px;flex-shrink: 0;}
.filterBx .searchBx .search input{
    min-width: 390px;width: 100%;
    font-size: 16px;
    padding: calc(16/16*1em) calc(25/16*1em);
    box-sizing: border-box;
    border-radius: 25px;
    border: 1px solid #e1e1e1;background: #fff;font-weight: 500;color: #888888;
}
.filterBx .searchBx .search input::placeholder{font-size: 16px;font-weight: 500;color: #888888;}


.filterBx .searchBx .btn{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #292929;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.filterBx .searchBx .btn:hover{background: #000; color: #fff;}
.filterBx .searchBx .btn i{font-size: 20px;transition: color 0.3s ease;}

@media screen and (max-width:1680px) {}
@media screen and (max-width:1440px) {
    .filterBx .tabBx ul li{font-size: clamp(14px, 14/1280*100vw, 16px);}
    .filterBx .searchBx .search input, .filterBx .searchBx .search input::placeholder{font-size: clamp(14px, 14/1280*100vw, 16px);}
    .filterBx .searchBx .btn{width: clamp(40px, 40/1280*100vw, 50px);height: clamp(40px, 40/1280*100vw, 50px);}
    .filterBx .searchBx .btn i{font-size: clamp(18px, 18/1280*100vw, 20px);}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
    .filterBx .searchBx .search{flex-shrink: unset;}
    .filterBx .searchBx .search input{min-width: clamp(250px, 250/820*100vw, 300px);}
}
@media screen and (max-width:820px) {
    .filterBx{flex-direction: column;align-items: flex-start;gap: 20px;}
    .filterBx .searchBx{width: 100%;}
    .filterBx .searchBx .search input{min-width: unset;}
}
@media screen and (max-width:500px) {
    .filterBx{margin: 40px 0;}
    .filterBx .tabBx{width: 100%;}
    .filterBx .tabBx ul {
        width: 100%;
        flex-wrap: wrap;
    }
    .filterBx .tabBx ul li{
        width: calc(50% - 5px);
        text-align: center;
    }
}
@media screen and (max-width:360px) {}

/* pagination */
.pagingBx{
    margin-top: 70px;margin-bottom: 100px;
    display: flex; align-items: center; justify-content: center;gap: 30px;
    /* border-top: 1px solid #e2e2e2; */
    cursor: pointer;
    font-size: 16px;
}

.pagingBx .prevBx, .pagingBx .nextBx{display: flex; align-items: center;gap: 15px;}
.pagingBx .prevBx .prev, .pagingBx .nextBx .next{
    display: flex;align-items: center;justify-content: center;
}
.pagingBx .prevBx .first, .pagingBx .nextBx .last{display: flex; align-items: center;}
.pagingBx .prevBx .first i, .pagingBx .nextBx .last i{margin: 0 -5px;}

.pagingBx .paging{display: flex;align-items: center;gap: 25px;}
.pagingBx .paging li{
    font-weight: 500;color: rgba(0, 0, 0, 0.4);
    position: relative;
}
.pagingBx .paging li.on{color: #fff;}
.pagingBx .paging li.on::before{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
    z-index: -1;
}

@media screen and (max-width:360px) {
    .pagingBx{font-size: 14px;gap:20px;}
    .pagingBx .prevBx, .pagingBx .nextBx{gap: 15px;}
    .pagingBx .paging{gap: 20px;}
    .pagingBx .paging li.on::before{width: 28px;height: 28px;}
}