@charset "utf-8";
/*
 * Name     : layout.css
 * Version  : 1.10
 * Author   : onepixel studio
---------------------------------------------------
*/
:root {

/* Colors: */
--main: #26231f;
--white-100: #FFFFFF;
--white-200: #ede8e2;
--primary: #a07445;
--gray-50: #f7f6f5;
--gray-100: #e8e6e3;
--gray-200: #a49a90;
--gray-300: #615b54;
--gray-400: #4f463d;

--stroke: #DBDBDB;
--white-f2f2f2: #F2F2F2;

/* Animation */
--expoOut: cubic-bezier(0.16, 1, 0.3, 1);
--expoInOut: cubic-bezier(0.87, 0, 0.13, 1);
--ease-out: cubic-bezier(0.050, 0.760, 0.380, 1.015);
--ease-in-out: cubic-bezier(0.895, 0.000, 0.180, 1.000);


/* Font system */
--font-family-eng: Poppins;
--font-family-kor: Pretendard;
--font-style-normal: normal;
--font-weight-300: 300;
--font-weight-400: 400;
--font-weight-600: 600;
--font-weight-700: 700;
--font-weight-800: 800;
--font-weight-900: 900;
--font-weight-m: m;
--font-weight-normal: normal;
--font-weight-bold: bold;

--font-size-s-1: 14px;
--font-size-s-2: 15px;
--font-size-s-3: 16px;
--font-size-m-1: 18px;
--font-size-m-2: 22px;
--font-size-l-1: 28px;
--font-size-l-2: 30px;
--font-size-xl-1: 40px;
--font-size-xl-2: 44px;
--font-size-xl-3: 52px;

--line-height-0: 0;
--line-height-1-34: 1.34;
--line-height-1-56: 1.56;

--letter-spacing-0-6: -0.6px;
--letter-spacing-0-8: -0.8px;
--letter-spacing-1-2: -1.2px;
--letter-spacing-1-6: -1.6px;
--letter-spacing-1-8: -1.8px;
--letter-spacing-2: -2px;

/* margin */
--margin-top-10: 10px;
--margin-top-20: 20px;
--margin-top-30: 30px;
--margin-top-40: 40px;
--margin-top-50: 50px;
--margin-top-100: 100px;
--margin-top-120: 120px;
--margin-space: 150px;

/* etc style */
--radius-8: 8px;
}

/* 텍스트 스타일 */
.font-event-s {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-s-2);
line-height: var(--line-height-1-56);
letter-spacing: var(--letter-spacing-0-6);
color: var(--white-f2f2f2);
max-width: 560px;
}
.font-event-l {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-600);
font-size: var(--font-size-l-1);
letter-spacing: var(--letter-spacing-1-2);
color: var(--white-f2f2f2);
margin-bottom: 15px;
}
.font-en-footer-s-2 {
font-family: var(--font-family-eng), var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-s-2);
letter-spacing: var(--letter-spacing-0-6);
color: var(--gray-400);
}
.font-footer-s-2 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-m);
font-size: var(--font-size-s-2);
letter-spacing: var(--letter-spacing-0-6);
color: var(--gray-400);
margin-bottom: 25px;
}
.font-footer-s-1 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-s-1);
letter-spacing: var(--letter-spacing-0-6);
color: var(--gray-300);
margin-bottom: 20px;
line-height: 1;
}
.font-gnb-s-1 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-300);
font-size: var(--font-size-s-1);
letter-spacing: var(--letter-spacing-0-6);
color: var(--gray-300);
}
.font-gnb-s-2 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-s-2);
letter-spacing: var(--letter-spacing-0-6);
color: var(--main);
}
.font-gnb-s-3 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-s-3);
letter-spacing: var(--letter-spacing-0-6);
color: var(--main);
}
.font-slide-s-2 {
font-family: var(--font-family-eng);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-m);
font-size: var(--font-size-s-2);
letter-spacing: var(--letter-spacing-0-6);
color: var(--main);
}
.font-main-slide .swiper-pagination-current {
font-family: var(--font-family-eng);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-600);
font-size: var(--font-size-xl-1);
letter-spacing: var(--letter-spacing-1-6);
color: var(--main);
}
.font-main-slide .swiper-pagination-total {
font-family: var(--font-family-eng);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-m);
font-size: var(--font-size-s-2);
line-height: var(--line-height-0);
letter-spacing: var(--letter-spacing-0-8);
color: var(--gray-300);
}
.font-slide-subtxt {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-s-3);
line-height: var(--line-height-1-56);
letter-spacing: var(--letter-spacing-0-6);
color: var(--main);
padding-top: 20px;
}
.font-slide-titleB {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-xl-3);
letter-spacing: var(--letter-spacing-2);
color: var(--main);
}
.font-slide-title {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-300);
font-size: var(--font-size-xl-3);
letter-spacing: var(--letter-spacing-2);
color: var(--main);
}
.font-contact-m-1 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-m-1);
letter-spacing: var(--letter-spacing-0-6);
color: var(--white-100);
margin-bottom: 20px;
}
.font-title-xl-2w {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-600);
font-size: var(--font-size-xl-2);
letter-spacing: var(--letter-spacing-1-8);
color: var(--white-f2f2f2);
margin: 0;
}
.font-title-xl-2 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-600);
font-size: var(--font-size-xl-2);
letter-spacing: var(--letter-spacing-1-8);
color: var(--main);
margin: 0;
}
.font-title-m-2 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-m);
font-size: var(--font-size-m-2);
line-height: var(--line-height-1-56);
letter-spacing: var(--letter-spacing-0-8);
color: var(--main);
margin: 0;
margin-top: var(--margin-top-30);
}
.font-title-l-2 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-m);
font-size: var(--font-size-l-2);
letter-spacing: var(--letter-spacing-1-2);
color: var(--main);
margin: 0;
}
.font-product-s-2-SB {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-600);
font-size: var(--font-size-s-2);
line-height: var(--line-height-14);
letter-spacing: var(--letter-spacing-0-6);
color: var(--main);
margin: 0;
margin-top: 20px;
}
.font-product-m-1-SB {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-600);
font-size: var(--font-size-m-1);
line-height: var(--line-height-18);
letter-spacing: var(--letter-spacing-0-8);
color: var(--main);
margin: 0;
margin-top: 15px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.font-product-s-2 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-s-2);
line-height: var(--line-height-1-56);
letter-spacing: var(--letter-spacing-0-6);
color: var(--main);
margin: 0;
margin-top: 15px;
width: 100%;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: normal;
}
.font-black-s-2 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-s-2);
line-height: var(--line-height-1-56);
letter-spacing: var(--letter-spacing-0-6);
color: var(--main);
}
.font-gray-s-2 {
font-family: var(--font-family-kor);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-s-2);
line-height: var(--line-height-1-56);
letter-spacing: var(--letter-spacing-0-6);
color: var(--gray-300);
margin: 0;
margin-top: var(--margin-top-20);
}

.mt-10 {margin-top: 10px !important;}
.mt-20 {margin-top: 20px !important;}
.mt-30 {margin-top: 30px !important;}
.mt-40 {margin-top: 40px !important;}
.mt-50 {margin-top: 50px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-40 {margin-bottom: 40px !important;}
.mb-50 {margin-bottom: 50px !important;}


/* 메인페이지 구분선 */
.line-gray {background: var(--gray-200);height: 1px; margin-top: var(--margin-top-100);}


 @media (max-width: 1330px) {
    .container-xl {padding-left:1.5rem;padding-right: 1.5rem;}   
    .line-gray {width: calc(100% - 3rem);}
 }

 @media (max-width: 1280px) {
    :root {
    --font-size-l-1: 26px;
    --font-size-l-2: 28px;
    --font-size-xl-1: 38px;
    --font-size-xl-2: 40px;
    --font-size-xl-3: 48px;
    }
 }

 @media (max-width: 1200px) {
   
 }

 @media (max-width: 991px) {
    :root {
    --font-size-s-1: 14px;
    --font-size-s-2: 15px;
    --font-size-s-3: 16px;
    --font-size-m-1: 16px;
    --font-size-m-2: 20px;
    --font-size-l-1: 22px;
    --font-size-l-2: 24px;
    --font-size-xl-1: 30px;
    --font-size-xl-2: 32px;
    --font-size-xl-3: 38px;
    --margin-space: 120px;
    }
    
 }

 @media (max-width: 767px) {
    :root {
        --margin-space: 80px;
    }  
 }

 @media (max-width: 576px) {
    :root {
        --font-size-s-1: 15px;
        --font-size-s-2: 16px;
        --font-size-s-3: 20px;
        --font-size-m-1: 17px;
        --font-size-m-2: 24px;
        --font-size-l-2: 26px;
        --font-size-xl-1: 32px;
        --font-size-xl-3: 36px;
        --margin-space: 70px;
    } 
 }