/* ------------------------------------------------------
· Hwaba Temporary Page Ver 1.0
· Type : custom.css
· Author : Albatrosss Pictures Kim Han Na
· Data : 2005.08.04
· Copyright @ 2005 Innoteco Temporary Page all rights reserved
--------------------------------------------------------- */

@charset "utf-8";

/* #################################### 01.Import Font #################################### */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root {
    /**텍스트 크기**/
    --title-font: clamp(32px, 2.5vw, 60px);
    --main-sub-font: clamp(28px, 3vw, 42px);
    --title-text-font: clamp(20px, 2.5vw, 26px);
    --title-sub-text-font: clamp(16px, 2.5vw, 26px);
    --text-font: clamp(18px, 2vw, 20px);
    --sub-text: clamp(16px, 2vw, 18px);
    --sub-sub-text: 16px;
    --sub-title-font-size: clamp(30px, 3vw, 60px);
    --sm-font-size: 16px;
    --md-font-size: clamp(16px, 2vw, 20px);
    --lg-font-size: clamp(22px, 2.1vw, 32px);

    /*미디어쿼리*/
    --title-media: 50px;
    --mdtitle-media: 40px;
    --smalltitle-media: 32px;
    --sub-title-media: 22px;
    --textfont-20-media: 20px;
    --textfont-18-media: 18px;
    --textfont-16-media: 16px;
    --textfont-14-media: 14px;

    /* 반응형 */
    --shadow-text-font-size: clamp(25px, 5vw, 100px);

    /* 수정 */
    --max-width: 1920px;
    --padding-pc: 50px 30px;

    /* 폰트 종류 */
    --font-KR-base: 'Pretendard Variable', sans-serif;
    /* 텍스트 굵기 */
    --font-bold-weight: 600;
    --font-middle-weight: 500;
    --font-middle-weight: 400;
    --font-light-weight: 200;

    /**색상**/
    --main-color: #00bbbb;
    --sub-point-color: #00bbbb;
    --sub-point-bg-color: #00bbbb17;
    --sub-bg-color: #f8f8f8;
    --main-color-highlight: #00bbbb1e;
    --main-sub-color: #53c5c5;
    --main-sub-color-opacity: #53c5c51a;
    --black-color: #141414;
    --gray-color-1: #14141410;
    --gray-color-2: #14141421;
    --gray-color-3: #f9f9f9;
    --gray-color-4: #14141470;
    --gray-color-footer: #f9f9f9;
    --white: #ffffff;
    --white-opacity: #ffffff28;
    --white-opacity2: #ffffffb0;
}

/*** 배경 ***/
.bg-white {
    width: 100%;
    /* height: 100vh; */
    max-width: var(--max-width);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 auto;
}

.bg-white-partners {
    width: 100%;
    /* height: auto; */
    max-width: var(--max-width);
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 auto;
}

.bg-white1 {
    width: 100%;
    /* height: 100vh; */
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.bg-white2 {
    width: 100%;
    /* height: 170vh; */
    background-color: #fff;
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    justify-content: space-between;
    margin: 0 auto;
}

.bg-white3 {
    width: 100%;
    max-width: var(--max-width);
    padding: var(--padding-pc);
    /* height: 300vh; */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 auto;
    overflow: hidden;
}

.bg-white4 {
    width: 100%;
    /* height: 100vh; */
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

.bg-white5 {
    width: 100%;
    /* height: 90vh; */
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 auto;
}

.bg-white6 {
    width: 100%;
    /* height: 150vh; */
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

.bg-white7 {
    width: 100%;
    /* height: 120vh; */
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: var(--white);
    margin: 0 auto;
}

.bg-white8 {
    width: 100%;
    /* height: 90vh; */
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

.bg-white10 {
    width: 100%;
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0 auto;
}

.bg-white11 {
    width: 100%;
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    justify-content: space-around;
}
.bg-white12 {
    width: 100%;
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    margin: 0 auto;
}

.bg-gray {
    width: 100%;
    /* height: 130vh; */
    background-color: var(--gray-color-3);
    border-radius: 200px 200px 0 0;
    position: relative;
    max-width: var(--max-width);
    padding: var(--padding-pc);
    margin: 0 auto;
}

.bg-gray2 {
    width: 100%;
    /* height: 100vh; */
    background-color: var(--gray-color-3);
    display: block;
    text-align: center;
    position: relative;
    max-width: var(--max-width);
    padding: var(--padding-pc);
    margin: 0 auto;
}

.bg-gray3 {
    width: 100%;
    /* height: 120vh; */
    background-color: var(--gray-color-3);
    display: block;
    text-align: center;
    position: relative;
    max-width: var(--max-width);
    padding: var(--padding-pc);
    margin: 0 auto;
}

/* ----------------서브 페이지 타이틀 텍스트--------------- */

.title-text {
    font-size: var(--title-font);
    /* font-family: var(--font-KR-base); */
    text-align: center;
    font-weight: var(--font-bold-weight);
    margin-bottom: 100px;
    display: flex;
    height: 20%;
    flex-direction: column;
    justify-content: flex-end;
}

.title-text > h1 {
    width: 100%;
    font-size: var(--title-font);
    color: var(--black-color);
    text-align: center;
}

.title-text > p {
    font-size: var(--md-font-size);
    font-weight: var(--font-light-weight);
    text-align: center;
    margin-top: 18px;
}

.title-text > span {
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    text-align: center;
    color: var(--main-color);
    margin-top: 30px;
}

/* ----------------서브 페이지 메인 타이틀 텍스트--------------- */
.main-title-text {
    color: white;
    text-align: center;
}

.main-title-text h1 {
    font-size: var(--title-font);
    font-weight: var(--font-bold-weight);
}

.sub-title-text p {
    font-size: var(--text-font);
    text-align: center;
    color: #fff;
    line-height: 32px;
}

/* ----------------서브 페이지 서브 타이틀 텍스트--------------- */
.sub-title-box {
    padding: 30px 0;
}

.sub-title-box p {
    font-size: var(--title-text-font);
    padding: 12px 60px;
    font-weight: var(--font-bold-weight);
    background-color: var(--main-color);
    display: inline-block;
    color: #fff;
    border-radius: 20px;
}

.left-line {
    border-left: 1px solid var(--gray-color-1);
}
.right-line {
    border-right: 1px solid var(--gray-color-1);
}
.bottom-line {
    border-bottom: 1px solid var(--gray-color-1);
}

.highlight-bg {
    width: 100%;
    height: 100%;
    background-color: var(--main-color-highlight);
}

.highlight {
    color: var(--main-color);
    font-weight: var(--font-bold-weight);
}

/* ----------------서브 페이지 서브의 서브 타이틀 텍스트--------------- */

.product-title {
    width: 100%;
    padding: 30px 0;
    font-size: var(--title-font);
    font-weight: var(--font-bold-weight);
    text-align: center;
}

.product-title-box {
    height: 60px;
    padding: 20px 60px;
    background-color: var(--main-color);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.product-title-box > p {
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    color: var(--white);
}

.product-title-box > span {
    line-height: 28px;
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
}

/* common-효희 */

.sub-inner {
    width: 100%;
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

.material-sub-title {
    font-size: var(--lg-font-size);
    margin-bottom: 70px;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 15px;
    background-color: var(--sub-point-color);
    color: #fff;
    margin-bottom: 43px;
    margin-top: 40px;
}

.material-sub-title-desc {
    font-size: var(--text-font);
    margin-bottom: 85px;
}

/****스크롤스무스 실험****/
html {
    scroll-behavior: smooth;
}

/* -------------------------민지------------------------------ */
.sub_sub_title {
    font-size: 20px;
    margin-bottom: 40px;
}

/* **************************************************************
    0) Responsive Area
************************************************************** */
@media all and (max-width: 700px) {
}