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

@charset "utf-8";
*,
*::before,
*::after {
    box-sizing: border-box;
}
nav-icon-line {
    width: 8px;
    height: 8px;
    border-bottom: 1px solid var(--black-color);
}

/* 스크롤다운 효과 */
.w-box {
    position: relative;
}

.scroll-down-animation {
    width: 144px;
    height: 150px;
    position: absolute;
    right: 10%;
    top: 0;
}

.section__wrapper-scroll-down {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    text-align: center;
    z-index: 50;
}

.scroll-down {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 100px;
}

.scroll-down__circle--small {
    display: block;
    width: 12px;
    height: 12px;
    background-color: var(--main-color);
    border-radius: 100%;
}

.scroll-down__line {
    width: 2px;
    height: 45px;
    background-color: var(--main-color);
    margin-top: 16px;
    margin-bottom: 16px;
}

.scroll-down__circle--large {
    width: 32px;
    height: 32px;
    border: 1px solid var(--main-color);
    border-radius: 100%;
    position: relative;
}

/*** 스크롤다운 끝 ***/

.smooth-wrapper {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.smooth-content {
    min-height: 100%;
    will-change: transform;
}

.banner-wrap {
    width: 100%;
    height: 100vh;
    position: relative;
}

.bgimg-wrap {
    width: 100%;
    height: 100vh;
    background-image: url(../img/sub-banner01.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.introduce {
    width: 100%;
    height: 56%;
    padding-top: var(--main-img-title-padding);
}

.main-title-text {
    font-size: var(--title-font);
    color: white;
    text-align: center;
}

.line {
    width: 50px;
    height: 30px;
    margin: 0 auto;
    border: none;
    border-bottom: 1px solid #fff;
    margin-bottom: 3%;
}

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

.w-box {
    width: 100%;
    height: 178px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;

    border-radius: 100px 100px 0 0;
}

.shadow-text > p {
    font-size: var(--shadow-text-font-size);
    font-weight: 800;
    padding: 30px 0;
    text-align: center;
    color: var(--gray-color-1);
}

/****** 2랩 ******/
.title-text {
    width: 100%;
    height: 10%;
    position: relative;
    display: flex;
    justify-content: center;
}

.main-cont-wrap {
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
}

.right-cont {
    width: 50%;
    height: 75%;
    overflow: hidden;
}

.left-cont {
    width: 50%;
    height: 75%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.left-cont > img {
    width: 60%;
    max-width: 571px;
    object-fit: cover;
}

.right-cont > h1 {
    font-size: var(--title-text-font);
}

.right-cont > p {
    font-size: var(--md-font-size);
    font-weight: var(--font-light-weight);
    line-height: 29px;
}

.line-gray {
    width: 100px;
    height: 30px;
    border: none;
    border-bottom: 1px solid var(--gray-color-4);
    margin-bottom: 50px;
}

/* ceo 인사 텍스트 끝*/
.ceo-sign {
    font-size: var(--text-font);
    font-weight: var(--font-bold-weight);
}

/* 1랩 끝 */
/* 2랩 시작 */
.main-cont-wrap2 {
    width: 100%;
    /* border: 1px solid red; */
    margin-bottom: 100px;
}

.connection-img {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.circle-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dot-line {
    position: absolute;
    width: 100%;
    height: 2px;
    border-top: 1px dotted var(--main-color);
}

.circle-color {
    width: 230px;
    height: 230px;
    background-color: var(--main-sub-color);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 500px;
    position: relative;
    z-index: 3;
}

.circles {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.circle {
    width: 224px;
    height: 224px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--main-sub-color);
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.circle-text {
    display: flex;
    height: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-text > p:nth-child(1) {
    font-size: var(--title-sub-text-font);
    font-weight: var(--font-bold-weight);
    text-align: center;
    color: var(--white);
}

.circle-text > p:nth-child(2) {
    font-size: var(--title-sub-text-font);
    font-weight: var(--font-bold-weight);
    text-align: center;
    color: var(--white);
}

.circle-color-line {
    width: 250px;
    height: 250px;
    aspect-ratio: 1 / 1;
    border-radius: 500px;
    border: 1px solid var(--main-sub-color);
    background-color: var(--white);
}

.circle-color-line2 {
    width: 250px;
    height: 250px;
    border-radius: 500px;
    border: 1px solid var(--main-sub-color);
    background-color: var(--white);
}

/* 라인 원형 css*/
.circle-color-line,
.circle-color-line2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 224px;
    height: 224px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.circle-color-line > p:nth-child(1),
.circle-color-line2 > p:nth-child(1) {
    font-size: var(--title-sub-text-font);
    font-weight: var(--font-bold-weight);
}

.circle-color-line > p:nth-child(2),
.circle-color-line2 > p:nth-child(2) {
    font-size: var(--title-sub-text-font);

    font-weight: var(--font-bold-weight);
}

.connection-cont {
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 200px;
}

.txt-box {
    width: 100%;
    height: 100%;
    padding: 100px;
    background-color: var(--gray-color-3);
    border-radius: 34px;
}

.txt-cont {
    width: 100%;
    height: 100%;
}

.txt-cont > h3 {
    font-size: var(--title-text-font);
    display: flex;
    width: 100%;
    height: 46%;
    text-align: center;
    justify-content: center;
    align-items: flex-end;
    line-height: 36px;
    font-weight: var(--font-bold-weight);
    margin-bottom: 50px;
}

.txt-cont > p {
    font-size: var(--sub-sub-text);
    display: flex;
    width: 100%;
    height: 43%;
    text-align: center;
    justify-content: center;
    align-items: center;
    line-height: 30px;
    font-weight: var(--font-light-weight);
}

/* 3랩 시작 */

.profile {
    width: 100%;
    height: 13%;
    display: flex;
    justify-content: flex-start;
}

/* company profile 표 이미지 시작*/
.cont-wrap {
    width: 100%;
    height: 45%;
    object-fit: cover;
    display: flex;
    align-items: center;
}

/***** hq-south-korea-wrap  표 시작 *****/
.hq-south-korea-wrap {
    width: 100%;
    height: 65%;
    display: flex;
    object-fit: contain;
}

/* 회사 이름 아래 선 */
.location-line-wrap {
    width: 100%;
    position: absolute;
}

.location-line-wrap {
    width: 100%;
    height: 22%;
    border-bottom: 2px solid var(--main-color);
    display: flex;
    align-items: flex-end;
}

/* 회사 이름 아래 선 끝 */
.company-img1 {
    width: 40%;
    display: flex;
    align-items: center;
}

.company-img1 > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1000;
}

.company-table1 {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    border: none;
    flex-direction: column;
}

.company-table1 > div {
    width: 100%;
    height: 40%;
    border-bottom: 2px solid var(--main-color);
}

.hq {
    width: 50%;
    height: 85%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: var(--main-color);
    font-size: var(--smalltitle-media);
}

.company-table1 > tbody {
    height: 60%;
}

.company-table1-1 {
    width: 80%;
    height: 70%;
    border-collapse: collapse;
    border: none;
}

.company-table1-1 th,
.company-table1-1 td .company-table1-1 tr {
    height: 14.2%;
}

.company-table1-1 th,
.company-table1-1 td {
    border: 0;
}

.company-table1-1 tr {
    border: 1px solid var(--gray-color-1);
    border-left: none;
    border-right: none;
}

.company-table1-1 > tbody > tr > td > img {
    width: 10%;
    padding-right: 1%;
}
.company-img2 {
    width: 100%;
    height: 300px;
}

.company-table1-1 tr:nth-child(1) {
    width: 100%;
}

.company-table1-1 td:nth-child(1),
.company-table1-1 td:nth-child(3),
.company-table1-1 td:nth-child(5),
.company-table1-1 td:nth-child(7),
.company-table1-1 td:nth-child(9),
.company-table1-1 td:nth-child(11) {
    font-size: var(--sub-text);
    color: var(--black-color);
    font-weight: var(--font-middle-weight);
}

.company-table1-1 td:nth-child(2),
.company-table1-1 td:nth-child(4),
.company-table1-1 td:nth-child(6),
.company-table1-1 td:nth-child(8),
.company-table1-1 td:nth-child(10),
.company-table1-1 td:nth-child(12) {
    font-size: var(--sub-sub-text);
    color: var(--black-color);
    font-weight: var(--font-light-weight);
}

/***** hq-south-korea-wrap  표 끝 *****/

/* company profile 표 이미지 끝*/
/****** MTV-South Korea-wrap 표 시작 ******/
.cont-wrap2 {
    width: 100%;
    height: 45%;
    object-fit: cover;
}

.MTV-SouthKorea-wrap {
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 30px;
}

.company-img2 {
    width: 40%;
}

.company-img2 > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1000;
}

.sec {
    display: flex;
    align-items: flex-start;
}

.mtv {
    width: 50%;
    height: 85%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    color: var(--main-color);
    font-size: var(--smalltitle-media);
}

/***** 4랩 시작*****/

.history-active-wrap {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}

.history-line-animation {
    width: 10%;
    position: relative; /* absolute → relative 권장 (흐름 내 배치) */
    left: auto;
}

/* 연혁 스크롤 시 따라가는 선 효과 시작 */
.sct1 {
    position: relative;
    width: 100%;
}

.sct1.short1 {
    height: 0px;
}

.line-guide1 {
    position: absolute;
    width: 2px;
    height: 1752px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-color-1);
}

.line-guide1 .progress1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--main-sub-color);
}

/* 연혁 스크롤 시 따라가는 선 효과 끝 */

/*** 연혁 애니메이션 숫자 ***/
.active {
    color: var(--main-color);
}

.history-animation {
    width: 45%;
    height: 100%;
    color: var(--black-color);
    font-size: var(--main-sub-font);
}

.history-animation > ul > li {
    margin-bottom: 10%;
}

.history-animation > ul > li > h1 {
    margin-bottom: 10px;
}

.history-animation > ul > li > p {
    color: var(--black-color);
    font-size: var(--md-font-size);
    line-height: 36px;
}

.history-imgs {
    width: 45%;
    height: 1970px;
    position: relative;
}

.history-caracter-imgs {
    position: absolute;
    width: 30%;
    left: 8%;
    bottom: -7%;
    z-index: 50;
}

.history-caracter-imgs > img {
    width: 100%;
}
.stickyplease {
    transform: none !important;
    contain: none !important;
    overflow: visible !important;
}
.imgs-wrap {
    display: flex;
    justify-content: center;
}
.sticky-box {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    height: auto; /* ← 100% 지우기 */
    width: 100%;
}
.imgs-wrap > ul {
    position: relative;
    width: 70%;
    height: 420px; /* ← 여기만 고정, 취향대로 */
    overflow: hidden;
    border-radius: 50px;
}

.imgs-wrap > ul > li {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.imgs-wrap > ul > li > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*** 연혁 애니메이션 바 끝***/

/*********** 토글 네비게이션 바 시작************/
.toggle-navi-wrap {
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.toggle-navi {
    backdrop-filter: blur(30px) brightness(120%);
    border-radius: 50px;
    width: 55%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-navi > ul {
    width: 95%;
    height: 70%;
    display: flex;
    justify-content: space-between;
}

.toggle-navi > ul > li {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-navi > ul > li > a {
    font-size: var(--text-font);
    padding: 13px;
}

/* 활성화 시 */
.active-2 {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: var(--main-color);
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    color: var(--white);
    transition: 0.2s;
}

.active-2 > a {
    color: var(--white);
}

.toggle-navi2 {
    backdrop-filter: blur(30px) brightness(120%);
    border-radius: 50px;
    width: 55%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-navi2 > ul {
    width: 95%;
    height: 65%;
    display: flex;
    justify-content: space-between;
}

.toggle-navi2 > ul > li {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-navi2 > ul > li > a {
    font-size: var(--sub-text);
}

.toggle-navi3 {
    backdrop-filter: blur(30px) brightness(120%);
    border-radius: 50px;
    width: 40%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-navi3 > ul {
    width: 95%;
    height: 65%;
    display: flex;
    justify-content: space-between;
}

.toggle-navi3 > ul > li {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-navi3 > ul > li > a {
    font-size: var(--sub-text);
}

/**************문의하기 토글***************/
/*********** 토글 네비게이션 바 시작************/
.toggle-navi-wrap4 {
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.toggle-navi4 {
    backdrop-filter: blur(30px) brightness(120%);
    border-radius: 50px;
    width: 30%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-navi4 > ul {
    width: 95%;
    height: 65%;
    display: flex;
    justify-content: space-between;
}

.toggle-navi4 > ul > li {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-navi4 > ul > li > a {
    font-size: var(--sub-text);
}

/* 활성화 시 */
.active-3 {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: var(--main-color);
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    color: var(--white);
    transition: 0.2s;
}

.active-3 > a {
    color: var(--white);
}

/*** sub 1_1_2 시작 ***/

.partners_bgimg-wrap {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/partners_bg.svg);
}

/** sub 1_1_2끝 **/
/*** sub 1_1_3 시작 ***/
.global-bgimg-wrap {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url(../img/global_bg.png);
}

.viet-title-wrap {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 타이틀 텍스트 끝 */
.total-title-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.viet-title-wrap p {
    width: 100%;
    font-size: var(--title-font);
    font-weight: var(--font-bold-weight);
}

.viet-title-wrap span {
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
}

.viet-text-wrap {
    width: 100%;
    text-align: center;
    padding: 30px 0;
}

.viet-text-wrap > p {
    width: 100%;
    font-size: var(--text-font);
    margin-bottom: 30px;
}

.viet-icon-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 50px 0;
}

.viet-text-wrap > p {
    width: 100%;
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    color: var(--main-color);
}

.viet-text-wrap > span {
    width: 100%;
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
    line-height: 28px;
}

.icon-cont-wrap {
    width: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}
.icon-wrap img {
    width: 100%;
}
.icon-cont-wrap p {
    font-size: var(--sub-text);
    font-weight: var(--font-light-weight);
}

/* 2랩 시작 */

.title-box-wrap {
    width: 100%;
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    justify-content: space-around;
}

/* 공장 및 실험 이미지 시작 */
.manufacturing-cont-wrap {
    width: 100%;
    display: flex;
    justify-content: space-around;
    max-width: 1560px;
    text-align: center;
    font-size: var(--md-font-size);
    margin: 0 auto;
    padding: 50px;
}

.manufacturing-cont-wrap table {
    width: 100%;
}

.manufacturing-cont-pc {
    width: 100%;
}

.manufacturing-cont-wrap table tr {
    width: 100%;
    height: 80px;
}

.manufacturing-cont-wrap table td img {
    height: 20%;
    width: 100%;
}

.manufacturing-cont-mob {
    display: none;
}

/** 3 랩 시작 **/
.bg-white11 {
    width: 100%;
    max-width: var(--max-width);
    padding: var(--padding-pc);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.title-system-wrap {
    width: 100%;
    padding: 30px 0;
    display: flex;
    justify-content: center;
}

.title-system-wrap {
    width: 100%;
}

.title-system-wrap p {
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--main-color);
    padding-top: 50px;
}

.icon-system-wrap {
    width: 100%;
    padding: 50px 0;
    display: flex;
    justify-content: space-around;
}

.icon-text-wrap2 {
    width: 25%;
    max-width: 1520px;
    text-align: center;
}
.icon-text-wrap2 img {
    width: 20%;
}

.icon-text-wrap2 > p {
    width: 100%;
    padding: 20px 0;
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
    display: flex;
    justify-content: center;
    align-items: center;
}

/*** 4랩 시작 ***/

.collaboration-title-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.collaboration-title-wrap > p {
    width: 100%;
    font-size: var(--title-text-font);
    text-align: center;
    font-weight: var(--font-bold-weight);
    color: var(--main-color);
}

.collaboration-title-wrap > span {
    font-size: var(--text-font);
    text-align: center;
    line-height: 28px;
    font-weight: var(--font-light-weight);
    padding-top: 49px;
}

.collaboration-cont-wrap {
    width: 100%;
    display: flex;
    align-items: flex-end;
    padding: 100px 0;
}

.collaboration-cont-wrap > div:nth-child(1) {
    width: 100%;
    height: 430px;
    background-image: url(../img/collaboration_bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.company-intro {
    max-width: 500px;
    background-color: var(--white);
    border: 1px solid var(--gray-color-1);
    position: relative;
    top: -170px;
    left: 177px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 40px;
    font-size: var(--md-font-size);
    padding: 50px 30px;
}

/*** 5랩 시작 ***/

.export-title-wrap {
    width: 100%;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.global-map-img {
    width: 100%;
    display: flex;
    justify-content: center;
    width: 100%;
}

.global-map-img > img {
    object-fit: contain;
    width: 80%;
}

/*** 6랩 시작 ***/
.factory-info-total-wrap {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding: 50px 0;
}

.factory-info-wrap {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 50px 0;
}

.factory-img > img {
    object-fit: contain;
    width: 100%;
}
.factory-img {
    width: 50%;
    text-align: right;
}

.factory-text-wrap {
    width: 50%;
    height: 100%;
    font-size: var(--text-font);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    line-height: 40px;
    padding-left: 30px;
}
.sep-line {
    width: 30%;
    margin: 15px;
    border-top: 1px solid var(--gray-color-1);
}
/** sub 1_1_3끝 **/
/*** sub 1_1_4 시작 ***/

/** sub 1_1_4끝 **/
/**서브2-1-1 시작**/
.bgimg-wrap-pcb {
    width: 100%;
    height: 100%;
    background-image: url(../img/PCBProcess-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

/* 1랩 시작 */
.etching-title-wrap {
    width: 100%;
    height: 20%;
    text-align: center;
    font-size: var(--text-font);
    line-height: 28px;
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

.product-subtext {
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
}

.product-title {
    width: 100%;
    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;
}

.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);
}

/*현상액 설명 이미지 시작 */
.product-cont-wrap {
    width: 80%;
    margin: auto;
    height: 60%;
    justify-content: center;
    display: flex;
    align-items: center;
}
.product-cont-wrap img {
    width: 100%;
}

/*현상액 설명 이미지 끝*/

.product-graph-wrap {
    width: 100%;
    height: 30%;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding-top: 100px;
}

/* dc-50-table 표 시작*/

.product-graph-wrap div {
    width: 50%;
    text-align: center;
}

.dc-50-table {
    width: 100%;
    height: 213px;
    font-size: var(--text-font);
    border-top: 2px solid var(--black-color);
}

.product-table-title {
    width: 100%;
    color: var(--main-color);
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    text-align: center;
    margin-bottom: 20px;
}
.stripper-table01 {
    width: 50%;
}
.stripper-table02 {
    width: 50%;
}
.stripper-table01 p {
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    text-align: center;
    margin-bottom: 20px;
    color: var(--main-color);
}
.dc-50-table td {
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
    width: 40%;
    text-align: start;
    padding-left: 40px;
    border-bottom: 1px solid var(--gray-color-2);
}

.dc-50-table th {
    width: 20%;
    padding-left: 40px;
    text-align: start;
    border-bottom: 1px solid var(--gray-color-2);
}

.product-table-title-2 {
    width: 100%;
}

.table-tail {
    height: 60px;
    text-align: start;
    font-size: var(--sub-sub-text);
    display: flex;
    align-items: center;
    font-weight: var(--font-light-weight);
}

/** Mechanism 표 시작 **/

.Mechanism-table {
    width: 100%;
    height: 213px;
    font-size: var(--text-font);
    border-top: 2px solid var(--black-color);
}

.Mechanism-table td {
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
    width: 40%;
    text-align: start;
    padding-left: 40px;
    border-bottom: 1px solid var(--gray-color-2);
}

.Mechanism-table th {
    width: 20%;
    padding-left: 40px;
    text-align: start;
    border-bottom: 1px solid var(--gray-color-2);
}

/** Mechanism 표 끝 **/
/* 1랩 끝 */
/* 2랩 시작 */

.product-Performance-character {
    position: absolute;
    max-width: 400px;
    top: -171px;
    right: 4%;
}

/* 현상액평가결과*/
.result-wrap {
    width: 100%;
    height: 100%;
}

.result-title-wrap {
    width: 100%;
    height: 21%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
}

.result-txt-wrap {
    width: 100%;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 20px;
}

.result-txt-wrap > p {
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
}

.result-txt-wrap > p:nth-child(1) {
    height: 40px;
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    color: var(--black-color);
    line-height: 20px;
}

/**/
.dfr-foot-graph {
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
}

.dfr-foot-graph > table {
    width: 100%;
    height: 30%;
    border-top: 2px solid var(--black-color);
}

.dfr-foot-graph table th {
    font-size: var(--text-font);
    font-weight: var(--font-bold-weight);
    border-bottom: 1px solid var(--gray-color-2);
    padding: 20px 0;
}

.dfr-foot-graph table th p {
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
    text-align: center;
}

.dfr-foot-graph table td {
    width: 40%;
}

.dfr-foot-graph table td img {
    width: 100%;
    height: 350px;
    padding: 10px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--gray-color-2);
}

/* 2랩 끝 */
/* 3랩 시작*/
.k2co3-title-wrap {
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    color: var(--main-color);
    padding: 50px 0;
}

.k2co3-subtitle-wrap {
    width: 100%;
    height: 50%;
    flex-direction: column;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.num-round {
    width: 30px;
    height: 30px;
    background-color: var(--main-color);
    border-radius: 50px;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--text-font);
}

.k2co3-cont1 {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.k2co3-cont2 {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.num-title {
    width: 70%;
    font-size: var(--text-font);
    font-weight: var(--font-bold-weight);
    color: var(--black-color);
    line-height: 32px;
    position: relative;
    z-index: 1000;
    margin-top: 50px;
}
.num-title img {
    width: 100%;
}

.num-sub {
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
    line-height: 32px;
    margin-bottom: 5%;
}

.k2co3-main-cont {
    width: 100%;
    height: 70%;
}

/* 3랩 끝*/

/**4랩 시작**/

.dfr-title-text {
    width: 100%;
    height: 30%;
    font-size: var(--text-font);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dfr-graph-change {
    width: 100%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dfr-graph-change img {
    width: 100%;
}

.mini-character {
    width: 20%;
    max-width: 400px;
    top: -12%;
    right: 7%;
    position: absolute;
}

/**4랩 끝**/
/**서브2-1-1 끝**/
/** 서브2-1-2 시작 **/

.maincolor-title {
    width: 100%;
    color: var(--main-color);
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    text-align: center;
    margin-bottom: 20px;
}

.maincolor-title-sub {
    font-size: var(--text-font);
}

.product-table-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 100px;
}

.product-table-wrap > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    text-align: end;
    line-height: 28px;
    font-size: var(--sub-sub-text);
    margin-bottom: 10px;
}

/************서브2-1-2 시작************/

/*** 2랩 시작 ***/
.table-title-wrap {
    width: 100%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    margin-bottom: 30px;
}

.table-title-wrap > p {
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    color: var(--main-color);
}

.table-title-wrap > span {
    font-size: var(--text-font);
    color: var(--black-color);
    font-weight: var(--font-light-weight);
}
.stable-wrap {
    width: 100%;
}
.stable-wrap > table {
    border-top: 2px solid var(--black-color);
    width: 100%;
    font-size: var(--textfont-20-media);
    font-weight: var(--font-light-weight);
    text-align: center;
}

.stable-wrap th,
.stable-wrap td {
    border-bottom: 1px solid var(--gray-color-1);
}

/*** hole 속 박리력 표 시작 ***/
.hole-wrap > table {
    border-top: 2px solid var(--black-color);
    width: 100%;
    height: 70%;
    font-size: var(--textfont-20-media);
    font-weight: var(--font-light-weight);
    text-align: center;
    border-bottom: 1px solid var(--gray-color-1);
}

.hole-wrap td img {
    margin: 20px;
}

.hole-wrap-font {
    font-size: var(--sub-sub-text);
}

/*** hole 속 박리력 표 끝 ***/
/**서브2-1-2 끝**/
/***서브2-1-3 시작 ***/
.Chlorate-oxidizer-wrap {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.Chlorate-oxidizer-wrap > div {
    width: 48%;
    height: 70%;
    background-color: var(--gray-color-3);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
}

.Chlorate-oxidizer-wrap > div > img {
    width: 80%;
    height: 100%;
    object-fit: contain;
}

.product-title-wrap {
    height: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.product-title-wrap > p {
    font-size: var(--title-text-font);
    text-align: center;
}

.product-title-wrap > span {
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
    text-align: center;
}

/***염소산 표 시작 ***/
.chlorate-oxidizer-table-wrap {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
}

.chlorate-oxidizer-table-wrap > table {
    width: 48%;
    height: 70%;
    border-top: 2px solid var(--black-color);
    margin-right: 20px;
}

.chlorate-oxidizer-table-wrap th,
.chlorate-oxidizer-table-wrap td {
    border-bottom: 1px solid var(--gray-color-2);
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
    text-align: center;
    padding: 20px 0;
}

/* 염소산 메커니즘 표 높이조절*/
.chlorate-oxidizer-table-wrap > table:nth-child(2) {
    height: 70%;
}

/*2랩 시작*/
.product-Performance-character-3 {
    position: absolute;
    top: 3%;
    right: 8%;
}

.product-Performance-character-3 > img {
    width: 70%;
}

/* 그래프 이미지 */
.graph-wrap {
    width: 60%;
    height: 700px;
    object-fit: contain;
}

.graph-wrap > img {
    width: 100%;
    height: 80%;
    object-fit: contain;
}

.graph-wrap > div {
    display: block;
    width: 100%;
    height: 20%;
    background-color: #ffffff;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.product-etching-condition-wrap {
    width: 100%;
    height: 70%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.graph-wrap > div > p {
    height: 50px;
    font-size: var(--text-font);
    font-weight: var(--font-bold-weight);
}

.graph-wrap > div > table {
    width: 100%;
    font-size: var(--sub-sub-text);
    font-weight: var(--font-light-weight);
    text-align: center;
}

/*etching-table-wrap 시작 */
.etching-table-wrap {
    width: 38%;
}

.etching-table-wrap > table {
    width: 100%;
    border-top: 2px solid var(--black-color);
    text-align: center;
    font-size: var(--sub-sub-text);
}

.etching-table-wrap > table th,
.etching-table-wrap > table td {
    border-bottom: 1px solid var(--gray-color-1);
    padding: 35px 0;
}

/*etching-table-wrap 시작 */

/* 그래프 이미지 끝 */
/*2랩 끝*/
/*3랩 시작*/
.Etching-Speed-title {
    width: 100%;
    height: 100px;
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    color: var(--main-color);
    text-align: center;
}

/*테이블 시작*/
.Etching-Speed-table {
    width: 100%;
    font-size: var(--text-font);
    color: var(--black-color);
    text-align: center;
}

.Etching-Speed-table > table {
    width: 100%;
    height: 30px;
    text-align: center;
    background-color: #fff;
    border-top: 2px solid var(--black-color);
}

.Etching-Speed-table > table th,
.Etching-Speed-table > table td {
    font-size: var(--text-font);
    border-left: 1px solid var(--gray-color-1);
    padding: 20px 0;
    border-bottom: 1px solid var(--gray-color-1);
}

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

/*3랩 끝*/

/***서브2-1-3 끝 ***/
/***서브2-1-4 시작 ***/
/*1랩 시작*/
.glass-stripper-img {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.glass-stripper-img img {
    width: 100%;
}

/*** 글래스박리액 테이블 1 시작 ***/
.glass-stripper-table-wrap {
    width: 100%;
    height: 25%;
    display: flex;
    align-items: center;
}

.glass-stripper-table {
    width: 50%;
    height: 100%;
}

.glass-stripper-table > p {
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    color: var(--main-color);
}

.glass-stripper-table > table {
    width: 100%;
    height: 100%;
    border-top: 2px solid var(--black-color);
    font-size: var(--text-font);
    text-align: center;
}

.glass-stripper-table > table td {
    font-weight: var(--font-light-weight);
}

.glass-stripper-table > table td,
.glass-stripper-table > table th {
    border-bottom: 1px solid var(--gray-color-1);
}

/*1랩 끝*/
/*2랩 시작*/
.Lifting-point-title {
    width: 100%;
    height: 150px;
    font-size: var(--title-text-font);
    color: var(--main-color);
    font-weight: var(--font-bold-weight);
    text-align: center;
}

.Lifting-point-title > p {
    height: 50px;
}

.Lifting-point-title > span {
    font-size: var(--text-font);
    color: var(--black-color);
    font-weight: var(--font-light-weight);
}

/*lifting point table wrap 시작*/
.lifting-point-table-wrap {
    width: 100%;
    height: 60%;
    display: flex;
}

.lifting-point-table-wrap > table {
    width: 100%;
    height: 60%;

    font-size: var(--text-font);
    text-align: center;
    border-top: 2px solid var(--black-color);
}

.lifting-point-table-wrap > table td,
.lifting-point-table-wrap > table th {
    border-bottom: 1px solid var(--gray-color-1);
    line-height: 50px;

    height: 100%;
}

.lifting-point-table-wrap > table th {
}

.lifting-point-table-wrap > table td {
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
    padding: 20px 0;
}

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

/*lifting point table wrap 끝/
/*2랩 끝*/
/* 3랩 시작 */
.DFR-title {
    width: 100%;
    height: 20%;
    text-align: center;
}

.DFR-title > p {
    height: 50px;
    font-size: var(--title-text-font);
    color: var(--main-color);
    font-weight: var(--font-bold-weight);
}

.DFR-title > span {
    font-size: var(--text-font);
    color: var(--black-color);
    font-weight: var(--font-light-weight);
}

/* 3랩 시작 */
.dfr-table-wrap {
    width: 100%;
    height: 65%;
    display: flex;
}

.dfr-table-wrap > table {
    width: 100%;
    height: 70%;
    text-align: center;
    border-top: 2px solid var(--black-color);
    font-size: var(--text-font);
}

.dfr-table-wrap > table td {
    border-bottom: 1px solid var(--gray-color-1);
}

.dfr-table-wrap > table th {
    border-bottom: 1px solid var(--gray-color-1);
    height: 50px;
}

.dfr-table-wrap > table img {
    padding: 10px;
}

.table-box-wrap {
    width: 100%;
    display: flex;
}

.table-box {
    width: 50%;
    display: flex;
    justify-content: center;
}

.box {
    width: 30%;
    height: 60px;
    background-color: var(--gray-color-3);
    margin-bottom: 10px;
    display: block;
    align-items: center;
    text-align: center;
    line-height: 60px;
    border-radius: 13px;
    font-size: var(--text-font);
}

.main-color-box {
    width: 30%;
    height: 60px;
    background-color: var(--main-color);
    margin-bottom: 10px;
    display: block;
    align-items: center;
    text-align: center;
    line-height: 60px;
    border-radius: 13px;
    font-size: var(--text-font);
    color: var(--white);
}

/***서브2-1-4 끝 ***/
/** sub2-1-5 시작 **/
.etching-additive-title-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.etching-additive-title-wrap > p {
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    color: var(--main-color);
}

.etching-additive-title-wrap > span {
    font-size: var(--text-font);
    font-weight: var(--font-light-weight);
}

.etching-additive-title {
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--title-font);
    font-weight: var(--font-bold-weight);
}

.etching-additive-title-box {
    width: 15%;
    background-color: var(--main-color);
    border-radius: 20px;
}

.etching-additive-title-box {
    line-height: 60px;
    text-align: center;
    font-size: var(--title-text-font);
    font-weight: var(--font-bold-weight);
    color: var(--white);
}

/*에칭 테이블 시작*/
.etching-additive-table-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.etching-additive-table-wrap > table {
    width: 48%;
    border-top: 2px solid var(--black-color);
    text-align: center;
    font-size: var(--text-font);
    color: var(--black-color);
}

.etching-additive-table-wrap > table td {
    font-weight: var(--font-light-weight);
    border-bottom: 1px solid var(--gray-color-1);
    padding: 20px;
}

/*2랩 시작*/
.EF-MAX-MECHANISM-title {
    width: 100%;
    font-size: var(--title-text-font);
    color: var(--main-color);
    font-weight: var(--font-bold-weight);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.img-subtext {
    width: 100%;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
    font-size: var(--sub-sub-text);
    align-items: center;
}

.EF-MAX-MECHANISM-title > p {
    height: 50px;
}

.EF-MAX-MECHANISM-title > span {
    font-size: var(--text-font);
    color: var(--black-color);
    font-weight: var(--font-light-weight);
}

/** ef-mecanism 순서 이미지 시작 **/
.EF-MAX-MECHANISM-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.EF-MAX-MECHANISM-cont-title {
    width: 100%;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.EF-MAX-MECHANISM-cont-title > p {
    padding: 20px;
    font-size: var(--title-text-font);
    color: var(--main-color);
    font-weight: var(--font-bold-weight);
}
.EF-MAX-MECHANISM-cont > img {
    width: 30%;
}

.EF-MAX-MECHANISM-cont-title > span {
    font-size: var(--text-font);
    color: var(--black-color);
    font-weight: var(--font-light-weight);
}

.EF-MAX-MECHANISM-cont-wrap {
    width: 100%;
    padding: 30px;
    background-color: var(--gray-color-1);
    border-radius: 70px;
}
.EF-MAX-MECHANISM-cont-img {
    display: flex;
}
.EF-MAX-MECHANISM-cont {
    width: 100%;
    justify-content: flex-start;
    text-align: center;
    /* padding: 30px 100px; */
    align-items: center;
}

.EF-MAX-MECHANISM-cont > table {
    padding: 30px;
    font-size: var(--text-font);
    text-align: center;
    display: flex;
    justify-content: center;
    text-align: center;
}

.mecanism {
    font-size: var(--sub-text);
    font-weight: var(--font-bold-weight);
    display: flex;
    width: 90%;
    text-align: center;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
}

.mecanism-underline {
    width: 70%;
    font-size: var(--title-text-font);
    color: var(--black-color);
}

.EF-MAX-MECHANISM-cont td {
    font-weight: var(--font-light-weight);
}

/** ef-mecanism 순서 이미지 끝 **/
/*3랩 시작*/
.MAX-EVALUATION-title {
    font-size: var(--title-text-font);
    color: var(--main-color);
    font-weight: var(--font-bold-weight);
    text-align: center;
}

/* 테이블 시작 */
.tail-text {
    width: 100%;
    height: 5%;
    display: flex;
    justify-content: space-between;
    font-size: var(--sub-sub-text);
    margin-bottom: 20px;
}

.MAX-EVALUATION-title > p {
    margin-bottom: 20px;
}

.table-cont-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.table-cont-wrap > table {
    width: 100%;
    border-top: 2px solid var(--black-color);
    text-align: center;
}

.table-cont-wrap > table td,
.table-cont-wrap > table th {
    border-bottom: 1px solid var(--gray-color-1);
    padding: 20px 0;
}

/* 테이블 끝 */

/*호버 시 확대되는 버튼 시작*/
.hover-button {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-around;
}

.cat-btn-img {
    width: 32%;
    height: 100%;
    background-image: url(../img/ef-max-product.svg);
    border-radius: 50px;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
}

.data-btn-img {
    width: 32%;
    height: 100%;
    background-image: url(../img/ef-max-product.svg);
    border-radius: 50px;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
}

.data-btn-img {
    width: 32%;
    height: 100%;
    background-image: url(../img/ef-max-product01.svg);
    border-radius: 50px;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
}

.request-btn-img {
    width: 32%;
    height: 100%;
    background-image: url(../img/ef-max-product02.svg);
    border-radius: 50px;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
}

.black-color {
    width: 100%;
    position: relative;
    height: 100%;
    background-color: #1b1b1b42;
    opacity: 0;
    border-radius: 50px;
    z-index: 1000;
}

.black-color:hover {
    opacity: 1;
}

.cat-btn-img p,
.data-btn-img p,
.request-btn-img p {
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: var(--text-font);
    font-weight: var(--font-bold-weight);
}

.cat-btn-img span,
.data-btn-img span,
.request-btn-img span {
    width: 100%;
    position: absolute;
    bottom: 10%;
    left: 10%;
    font-size: var(--sub-sub-text);
}

.cat-btn-img span img,
.data-btn-img span img,
.request-btn-img span img {
    padding-left: 2%;
    filter: invert(0%) sepia(12%) saturate(78%) hue-rotate(332deg) brightness(111%) contrast(84%);
}

/***이미지 호버 시 변하는 애니메이션 효과들***/
.cat-btn-img:hover {
    background-repeat: no-repeat;
    background-image: url(../img/ef-max-product-hover.svg);
    transition: 0.5s;
}

.data-btn-img:hover {
    background-repeat: no-repeat;
    background-image: url(../img/ef-max-product01-hover.svg);
    transition: 0.5s;
}

.request-btn-img:hover {
    background-repeat: no-repeat;
    background-image: url(../img/ef-max-product02-hover.svg);
    transition: 0.5s;
}

.black-color:hover {
    opacity: 1;
    transition: 0.5s;
}

/*호버 시 확대되는 버튼 끝*/
.qna-btn {
    width: 100%;
    height: 502px;
    margin-top: 20px;
    border-radius: 50px;
    background-image: url(../img/qna-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.qna-text-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.qna-title {
    width: 100%;
    height: 20%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.qna-title > p {
    font-size: var(--smalltitle-media);
    font-weight: var(--font-bold-weight);
    text-align: center;
    color: var(--white);
}

.qna-title > span {
    font-size: var(--text-font);
    color: var(--white);
}

.qna-text {
    width: 30%;
    max-width: 468px;
    height: 22%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: var(--title-text-font);
    color: var(--white);
}

.line-small {
    width: 7%;
    border-bottom: 0.5px solid var(--white);
    padding: 20px 0;
}

/** sub2-1-5 끝 **/

/* **************************************************************
************************************************************** */