﻿/* 브랜드에서만 적용되는 메뉴 컬러 */
.celebon_nav li a.active {color: #fff;}
header.on .celebon_nav li a.active {color: #ba7ce3;}
.m_side.on .celebon_nav li a.active {color: #ba7ce3;}

.brand_wrap {text-align: center;}
.brand_wrap .brand_top {background-image: url(../img/brand/brand_main.png); background-size: cover; background-repeat: no-repeat; height: calc(100vh - 46vh); position: relative;}
.brand_wrap .brand_top p {position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); font-size: 35px; font-family: var(--font-m);}


.brand_wrap .brand_box .brand_tabmenu {display: flex; max-width: 1200px; margin: 0 auto 140px;}
.brand_wrap .brand_box .brand_tabmenu li {width: 100%; background-color: #f2f2f2; text-align: center; padding: 20px 0; font-size: 20px; cursor: pointer;}
.brand_wrap .brand_box .brand_tabmenu li.on {background-color: var(--m-color);}
.brand_wrap .brand_box .brand_content {display: none; width: 100%;}
.brand_wrap .brand_box .brand_content.on {display: inline-block;}
.brand_wrap section {margin-bottom: 100px; display: inline-block; width: 100%;}


.brand_wrap #tab_1 .brand_con1 img {margin-bottom: 30px;}
.brand_wrap #tab_1 .brand_con1 p,
.brand_wrap #tab_1 .brand_con2 p {font-size: 22px; line-height: 28px; letter-spacing: -0.5px;}
.brand_wrap #tab_1 .brand_con2 img {margin-bottom: 100px;}

.brand_wrap #tab_1 .brand_con4 {margin-bottom: 240px;}
.brand_wrap #tab_1 .brand_con4 .brand_txt {display: flex; text-align: left; justify-content: space-between; align-items: center; width: 95%; margin: 0 auto 50px;}
.brand_wrap #tab_1 .brand_con4 .brand_txt:last-of-type {margin-bottom: 0;}
.brand_wrap #tab_1 .brand_con4 .brand_txt > div {width: 100%;}
.brand_wrap #tab_1 .brand_con4 .brand_txt:nth-of-type(1) div,
.brand_wrap #tab_1 .brand_con4 .brand_txt:nth-of-type(3) div {padding-left: 30px;}
.brand_wrap #tab_1 .brand_con4 .brand_txt:nth-of-type(2) div {padding-left: 80px;}
.brand_wrap #tab_1 .brand_con4 .brand_txt .num {font-size: 60px; font-family: var(--font-al); margin-bottom: 20px; display: inline-block;}
.brand_wrap #tab_1 .brand_con4 .brand_txt .title {font-family: var(--font-al); font-size: 32px; margin-bottom: 30px;}
.brand_wrap #tab_1 .brand_con4 .brand_txt .text {font-size: 17px; letter-spacing: -0.5px; line-height: 24px;}


.brand_wrap #tab_2 .brand_con5 .brand_logo {margin-bottom: 80px;}
.brand_wrap #tab_2 .brand_con5 .inner p {font-size: 30px; margin-bottom: 80px;}
.brand_wrap #tab_2 .brand_con5 .inner p > span {font-family: var(--font-sb); font-size: 30px;}
.brand_wrap #tab_2 .brand_con5 .inner .brand_water {margin-bottom: 80px;}
.brand_wrap #tab_2 .brand_con5 .inner span {font-size: 22px; line-height: 28px; letter-spacing: -0.5px; display: inline-block;}

.brand_wrap #tab_2 .brand_con6 {background-image: url(../img/brand/tech.png); background-size: cover; background-repeat: no-repeat; width: 100%; padding: 150px 0; position: relative; margin-top: 60px;}
.brand_wrap #tab_2 .brand_con6::before {position: absolute; top: -24px; left: 50%; transform: translate(-50%, 0) rotate(45deg); background-color: #f4ecf8; width: 50px; height: 50px; display: inline-block; content: "";}

.brand_wrap #tab_2 .brand_con6 .tech_title {font-size: 40px; font-family: var(--font-b); margin-bottom: 60px;}
.brand_wrap #tab_2 .brand_con6 .tech_title span {font-size: 28px; display: inline-block; width: 100%; font-family: var(--font-b);}
.brand_wrap #tab_2 .brand_con6 .tech_txt {font-size: 20px; line-height: 30px; margin-bottom: 80px;}
.brand_wrap #tab_2 .brand_con6 .tech_txt span {font-family: var(--font-sb);}
.brand_wrap #tab_2 .brand_con6 .brand_ict {display: flex; justify-content: center; align-items: center; margin-bottom: 80px;}
.brand_wrap #tab_2 .brand_con6 .brand_ict ul {margin-left: -50px;}
.brand_wrap #tab_2 .brand_con6 .brand_ict ul li {display: flex; align-items: center; text-align: left; margin-bottom: 30px;}
.brand_wrap #tab_2 .brand_con6 .brand_ict ul li:last-of-type {margin-bottom: 0;}
.brand_wrap #tab_2 .brand_con6 .brand_ict ul li div {padding-left: 30px;}
.brand_wrap #tab_2 .brand_con6 .brand_ict ul li p {font-size: 18px; margin-bottom: 15px; font-family: var(--font-sb);}
.brand_wrap #tab_2 .brand_con6 .brand_ict ul li span {display: inline-block; width: 100%; font-size: 15px; line-height: 20px; letter-spacing: -0.5px;}
.brand_wrap #tab_2 .brand_con6 i {font-style: normal; font-size: 13px;}

.brand_wrap #tab_2 .brand_con6 .brand_ict_mo {display: none;}

.brand_wrap #tab_2 .brand_con7 img {width: 100%;}


    /* 태블릿 */
    @media screen and (max-width: 1200px) {
        .brand_wrap .brand_top {height: calc(100vh - 60vh);}
    .brand_wrap #tab_1 .brand_con1 p, 
    .brand_wrap #tab_1 .brand_con2 p {font-size: 20px; line-height: 26px; word-break: keep-all;}
    .brand_wrap #tab_1 .brand_con2 p br {display: none;}
    .brand_wrap .brand_con3 img {width: 100%;}

    .brand_wrap #tab_1 .brand_con4 .brand_txt {width: 100%; display: inline-block; text-align: center; margin: 0 auto 80px;}
    .brand_wrap #tab_1 .brand_con4 .brand_txt div {margin-bottom: 30px;}
    .brand_wrap #tab_1 .brand_con4 .brand_txt:nth-of-type(1) div, 
    .brand_wrap #tab_1 .brand_con4 .brand_txt:nth-of-type(2) div, 
    .brand_wrap #tab_1 .brand_con4 .brand_txt:nth-of-type(3) div {padding-left: 0;}
    .brand_wrap #tab_1 .brand_con4 .brand_txt:nth-of-type(2) {display: flex; flex-direction: column-reverse;}

    .brand_wrap #tab_2 .brand_con5 .inner .brand_water {width: 100%;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict .brand_box_ict_img {width: 40%;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict ul li img {width: 200px;}

    .brand_wrap #tab_2 .brand_con5 .inner p {font-size: 28px;}
    .brand_wrap #tab_2 .brand_con5 .inner p > span {font-size: 28px;}
    .brand_wrap #tab_2 .brand_con5 .inner span {font-size: 20px; line-height: 26px;}

    .brand_wrap #tab_2 .brand_con6 .tech_txt {word-break: keep-all; font-size:18px;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict ul {margin-left: -35px;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict ul li img {width: 160px;}

    .brand_wrap #tab_2 .brand_con6 .brand_ict ul li span br {display: none;}
}
/* 모바일 */
@media screen and (max-width:767px) {
    .brand_wrap section {margin: 0 0 50px;}
    .brand_wrap .brand_top p {width: 100%; font-size: 28px;}
    .brand_wrap .brand_box .brand_tabmenu {margin: 0 auto 80px;}
    .brand_wrap .brand_box .brand_tabmenu li {font-size: 16px;}

    .brand_wrap #tab_1 .brand_con1 .brand_routine_txt {width: 300px;}
    .brand_wrap #tab_1 .brand_con1 p,
    .brand_wrap #tab_1 .brand_con2 p {font-size :16px; line-height: 22px;}
    .brand_wrap #tab_1 .brand_con1 p br, 
    .brand_wrap #tab_1 .brand_con2 p br {display: none;}
    .brand_wrap #tab_1 .brand_con2 img {width: 100%; margin-bottom: 50px;}

    .brand_wrap #tab_1 .brand_con4 {margin-bottom: 120px;}
    .brand_wrap #tab_1 .brand_con4 .brand_txt {margin: 0 auto 50px;}
    .brand_wrap #tab_1 .brand_con4 .brand_txt img {width: 100%;}
    .brand_wrap #tab_1 .brand_con4 .brand_txt .num {font-size: 40px; margin-bottom: 10px;}

    .brand_wrap #tab_1 .brand_con4 .brand_txt .title {font-size: 28px;}
    .brand_wrap #tab_1 .brand_con4 .brand_txt .text {font-size: 16px; word-break: keep-all; line-height: 22px;}
    .brand_wrap #tab_1 .brand_con4 .brand_txt .text br {display: none;}

    .brand_wrap #tab_2 .brand_con5 .brand_logo {width: 160px; margin-bottom: 50px;}
    .brand_wrap #tab_2 .brand_con5 .inner p {font-size: 22px; line-height: 28px; margin-bottom: 30px;}
    .brand_wrap #tab_2 .brand_con5 .inner p > span {font-size: 22px;}
    .brand_wrap #tab_2 .brand_con5 .inner .brand_water {margin-bottom: 30px;}
    .brand_wrap #tab_2 .brand_con5 .inner span {font-size: 16px; line-height: 22px; word-break: keep-all;}
    .brand_wrap #tab_2 .brand_con5 .inner span br {display: none;}

    .brand_wrap #tab_2 .brand_con6 {padding: 80px 0;}
    .brand_wrap #tab_2 .brand_con6::before {width: 30px; height: 30px; top: -14px; background-color: #f7effa;}
    .brand_wrap #tab_2 .brand_con6 .tech_title {font-size: 26px; width: 100%; margin-bottom: 40px;}
    .brand_wrap #tab_2 .brand_con6 .tech_title span {font-size: 18px; display: inline-block;}

    .brand_wrap #tab_2 .brand_con6 .tech_txt {font-size: 16px; line-height: 22px; margin-bottom: 60px;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict {margin-bottom: 60px;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict .brand_box_ict_img {width: 200px;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict ul {margin-left: -25px;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict ul li div {display: none;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict ul li img {width: 120px;}

    .brand_wrap #tab_2 .brand_con6 .brand_ict_mo {display: block; margin-bottom: 50px;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict_mo ul li {display: flex; align-items: flex-start; margin-bottom: 20px; border-bottom: 1px solid var(--m-color); padding-bottom: 20px;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict_mo ul li:last-of-type {margin-bottom: 0; border: none;}}
    .brand_wrap #tab_2 .brand_con6 .brand_ict_mo ul li img {width: 65px;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict_mo ul li div {width: calc(100% - 60px); text-align: left; padding-left: 20px;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict_mo ul li div p {font-family: var(--font-sb); margin-bottom: 10px;}
    .brand_wrap #tab_2 .brand_con6 .brand_ict_mo ul li div span br {display: none;}
}
/* 폴드 */
@media screen and (max-width: 374px) {}