body{
  background-color: #fff1de;
}
header {
    background-color: var(--primary-baige);
}
/* === SECTION 01 === */
.section01--brandstory{
  background-image: url("../public/images/brandstory/brand-visu.jpg");
}
.section01 {
    margin-top: 80px;
}
.section01 > img {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
    display: block;
}
.section02 .container{
    margin: 0 auto;
    width: 800px;
}
.brand_group {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-bottom: 140px;
    font-size: 22px;
    line-height: 150%;
    color: var(--primary-brown);
}
.brand_title {
    font-size: 28px;
    font-weight: bold;
    font-family: 'MalangmalangB';
    -webkit-text-stroke: 0.4px currentColor;
}
.brand_contents .focus_font {
    font-size: 40px;
    font-weight: bold;
    font-family: 'HakgyoansimB';
    color: var(--primary-orange);
}
.brand_contents p {
    font-size: 18px;
    line-height: 150%;
}
.brand_contents span {
    font-weight: 700;
    font-size: 18px;
}
.mission {
    font-family: 'HakgyoansimR';
    font-size: 50px !important;
}
.login_btn {
    color: var(--primary-brown);
    border: 1px solid var(--primary-brown);
    box-sizing: border-box;
}
.brand-cont {
    border-radius: 20px;
    height: 200px;
    overflow: hidden;
    margin: 20px 0;
}
.brand-cont img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 반응형 */
 @media (max-width: 1200px) {
    .section01 img{
        width: 50%;
    }
    .section02 .container{
        margin: 0 auto;
        width: 90%;
    }
 }
 @media (max-width: 850px) {
    .section02{
        padding: 80px 0;
    }
    .brand_group{
        margin-bottom: 50px;
        gap: 40px;
    }
    .brand_title{
        font-size: 22px;
    }
    .mission{
        font-size: 35px !important;
    }
    .brand_contents .focus_font{
        font-size: 35px;
        padding-bottom: 5px;
    }
    .brand_contents p{
        font-size: 20px;
    }
}
@media (max-width: 800px) {
  .menu_btn {
    background-color: #000 !important;
  }
  header.scrolled .menu_btn {
    background-color: #FFF !important;
  }
}
 @media (max-width: 585px) {
    .brand_group{
        margin-bottom: 10px;
        gap: 30px;
    }
    .brand_title{
        font-size: 18px;
    }
    .brand_contents .focus_font{
        font-size: 20px;
    }
    .mission{
        font-size: 24px !important;
        margin-bottom: 30px;
    }
    .brand_contents p{
        font-size: 16px;
        line-height: 140%;
    }
    .brand_contents span{
        font-size: 16px;
    }
      .brand_contents{
      display: block;
  }
}
 @media (max-width: 450px) {
    .section01{
        margin-top: 0px;
        padding-top: 107px;
    }
    .section02{
        padding: 50px 0;
    }
    .brand_group{
        margin-bottom: 10px;
        gap: 15px;
    }
    .brand_title{
        font-size: 16px;
    }
    .brand_contents .focus_font{
        font-size: 19px;
    }
    .mission{
        font-size: 19px !important;
        margin-bottom: 10px;
    }
    .brand_contents p{
        font-size: 15px;
        line-height: 125%;
    }
    .brand_contents span{
        font-size: 15px;
    }
      .brand_contents{
      display: block;
  }
}
 @media (max-width: 390px) {
    .section01{
        margin-top: 0px;
        padding-top: 0px;
    }
    .brand_group {
        margin-bottom: 40px;
        gap: 15px;
    }
    .brand_contents .focus_font,
    .mission,
    .brand_contents span,
    .brand_contents p {
        font-size: 1.6rem;
    }
    .section01 img {
        width: 50%;
        transform: translateY(50%);
    }
}