@font-face{
    font-family:"NanumSquare";
    src:url("../fonts/NanumSquareOTF_acR.otf");
    font-weight:400;
}

@font-face{
    font-family:"NanumSquare";
    src:url("../fonts/NanumSquareOTF_acB.otf");
    font-weight:700;
}

@font-face{
    font-family:"NanumSquare";
    src:url("../fonts/NanumSquareOTF_acEB.otf");
    font-weight:800;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"NanumSquare", sans-serif;
}


/* 헤더 */

.header{

    box-shadow:0 2px 10px rgba(0,0,0,.05);

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:80px;

    background:#ffffff;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 80px;

    border-bottom:1px solid #e5e5e5;

    z-index:1000;
}

/* 로고 */

.logo{

   display:flex;
   align-items:center;
   
}

.logo img{

    height:36px;

    width:auto;

    display:block;
}

/* 메뉴영역 */

.menu-area{

    display:flex;
    align-items:center;
    gap:30px;
}

/* 메뉴 */

.nav{

    display:flex;
    gap:20px;
}

.nav a{

    text-decoration:none;

    color:#222;

    font-size:18px;
    font-weight:700;

    position:relative;
}

/* HOME 활성화 */

.nav a.active::after{

    content:"";

    position:absolute;

    bottom:-8px;
    left:0;

    width:100%;
    height:4px;

    background:#e53935;
}

/* 언어 */

.language{

    display:flex;

    align-items:center;

    height:32px;
}

.language select{

    border:none;

    background:transparent;

    font-size:18px;

    font-family:inherit;

    color:#222;

    cursor:pointer;

    outline:none;

    height:32px;

    line-height:32px;

    vertical-align:middle;

    padding-right:5px;
    
}

/* 마우스를 올렸을 때 글자 색상이 살짝 흐려지며 반응하는 효과 */
.language select:hover {
    color: #555;
}

/* 햄버거 버튼 */

.hamburger{

    display:none;

    background:none;

    border:none;

    font-size:32px;

    cursor:pointer;

    color:#222;
}

/* 히어로 */

.hero{

    width:100%;
    height:100vh;

    background-image:url("../images/hero-bg.png");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
}

.hero-content{

    max-width:1000px;
}

/* 제목 */

.hero-content h1{

    font-size:70px;
    font-weight:800;
    color:#5d4a42;

    margin-bottom:20px;
}

/* 영문 */

.hero-content h2{

    font-size:50px;
    font-weight:700;
    color:#5d4a42;

    margin-bottom:20px;
}

/* 한글 */

.hero-content p{

    font-size:34px;

    color:#222;

    font-weight:600;
}

/* 모바일 */

@media(max-width:1024px){

    .header{

        padding:0 20px;
    }

    .logo img{

        height:28px;
    }

    .menu-area{

        gap:6px;
    }

    .language{

        display:block;
    }

    .language select{

        font-size:12px;

        padding:0px;
    }

    .hamburger{

        display:block;

        font-size:30px;

        padding-right:0px;

    }

    .nav{

        display:none;

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        background:#ffffff;

        flex-direction:column;

        gap:0;

        border-top:1px solid #e5e5e5;

        box-shadow:0 10px 20px rgba(0,0,0,.08);
    }

    .nav.active{

        display:flex;
    }

    .nav a{

        padding:20px;

        font-size:16px;

        border-bottom:1px solid #f0f0f0;
    }

    .nav a.active::after{

        bottom:8px;
    }

    
    .hero-content h1{

        font-size:48px;
    }

    .hero-content h2{

        font-size:28px;
    }

    .hero-content p{

        font-size:20px;
    }

}


/* =========================
   COMPANY INTRO
========================= */

.intro{

    padding:180px 0;

    background:#ffffff;
}

.intro-container{

    width:90%;
    
    max-width:1000px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}

.intro-image img{

    width:100%;

    display:block;

    border-radius:12px;
}

.intro-text{

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.intro-text h2{

    font-size:48px;

    font-weight:800;

    line-height:1.1;

    color:#5d4a42;

    margin-bottom:10px;
}

.intro-text h3{

    font-size:26px;

    font-weight:800;

    color:#333;

    margin-bottom:20px;

    line-height:1.6;
}

.intro-text p{

    font-size:20px;

    line-height:1.4;

    color:#555;

    margin-bottom:20px;
}


/* 모바일 INTRO */

@media(max-width:768px){

    .intro-container{

        grid-template-columns:1fr;

        gap:40px;
    }

    .intro-text h2{

        font-size:32px;
    }

    .intro-text p{

        font-size:16px;
    }

}


/* =========================
   OUR BRAND
========================= */

.brand-section{

    padding:120px 0;

    background:#F4E6DE;
}

.brand-title{

    text-align:center;

    margin-bottom:60px;
}

.brand-title h2{

    font-size:58px;

    font-weight:800;

    color:#5d4a42;

    margin-bottom:15px;

    letter-spacing:2px;
}

.brand-title p{

    font-size:28px;
    font-weight:700;
    color:#666;
}

.brand-grid{

    width:80%;

    max-width:1000px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;
}

.brand-card{

    background:#ffffff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

    display:flex;

    flex-direction:column;

    height:100%;
    
}

.brand-card a{

    text-decoration:none;

    color:inherit;

    display:block;
}

.brand-card:hover{

    transform:translateY(-10px);
}

.brand-card img{

    width:100%;

    height:420px;

    object-fit:cover;

    display:block;
}

.brand-info{

    padding:30px;

    text-align:center;

    min-height:120px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.brand-info h3{

    font-size:34px;

    font-weight:800;

    color:#5d4a42;

    margin-bottom:10px;

    text-align:center;

    min-height:42px;
}

.brand-info span{
    display:block;

    text-align:center;

    color:#888;

    font-size:20px;
}

@media(max-width:768px){

    .brand-grid{

        grid-template-columns:1fr;
    }

    .brand-title h2{

        font-size:42px;
    }

    .brand-title p{

        font-size:22px;
    }

    .brand-info h3{

        font-size:26px;
    }

}


/* =========================
   FOOTER
========================= */

.footer{

    background:#1F2933;

    color:#ffffff;

    padding:35px 0 25px;
}

.footer-container{

    width:90%;

    max-width:1000px;

    margin:auto;

    text-align:left;
}

/* 회사명 + 회사정보 */

.footer-company{

    display:flex;

    align-items:flex-start;

    gap:40px;
}

.company-name{

    font-size:28px;

    font-weight:700;

    color:#ffffff;

    margin:0;

    line-height:1.2;

    letter-spacing:0.5px;

    white-space:nowrap;
}

.company-detail p{

    margin-bottom:4px;

    font-size:16px;

    line-height:1.3;
    
}

/* iPhone 자동 전화번호 링크 색상 통일 */
.footer-company a[href^="tel"],
.footer-company a[href^="mailto"] {
    color: inherit !important;
    text-decoration: none !important;
}

/* 카피라이트 */

.footer-copy{

    font-size:14px;

    color:rgba(255,255,255,0.7);

    border-top:1px solid rgba(255,255,255,0.2);

    padding-top:15px;

    margin-top:20px;
}


/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .footer-company{

        flex-direction:column;

        gap:10px;
    }

    .company-name{

        font-size:23px;
    }

    .company-detail p{

        font-size:13px;
    }
}


/* =========================
   ABOUT HERO
========================= */

.about-hero{

    height:800px;

    background:url("../images/about-hero-bg.png")
    center center/cover no-repeat;

    display:flex;

    justify-content:center;
    align-items:center;

    text-align:center;
}

.about-hero-content{

    width:90%;

    max-width:1000px;
}

.about-hero-content h1{

    font-size:40px;

    font-weight:800;

    color:#333;

    margin-bottom:50px;

    line-height:1.4;

    letter-spacing:-1px;

    word-break:keep-all;

    overflow-wrap:break-word;
}

.about-hero-content p{

    font-size:20px;

    line-height:1.6;

    color:#666;

    margin-bottom:20px;

    word-break:keep-all;

    overflow-wrap:break-word;

    max-width:780px;

    margin:0 auto 20px;

}

@media(max-width:768px){

    .about-hero{

        height:auto;

        min-height:100vh;

        padding:120px 20px 80px;
    }

    .about-hero-content{

        width:100%;
    }

    .about-hero-content h1{

        font-size:28px;

        line-height:1.5;

        margin-bottom:30px;
    }

    .about-hero-content p{

        font-size:16px;

        line-height:1.8;

        max-width:100%;

        margin:0 auto 15px;
    }

}

/* =========================
   PHILOSOPHY
========================= */

.philosophy{

    padding:180px 0;

    background:#ffffff;
}

.philosophy-container{

    width:90%;
    max-width:1000px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}

.philosophy-box{

    background:#F4E6DE;

    border-radius:30px;

    min-height:280px;

    display:flex;

    justify-content:center;
    align-items:center;

    text-align:center;

    padding:0 50px;

    font-size:30px;

    font-weight:700;

    line-height:1.5;

    color:#6b5b54;
}

@media(max-width:768px){

    .philosophy-box{

        padding:0 25px;
    }
}

.philosophy-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:280px;
    
}

.philosophy-text p{

    font-size:21px;

    color:#666;

    line-height:1.8;

    margin-bottom:30px;
}


/* =========================
   CORE VALUE
========================= */

.core-value{

    padding:120px 0;

    background:#fafafa;
}

.core-text{

    text-align:center;

    margin-bottom:80px;
    
}

.core-text h2{

    font-size:34px;

    line-height:1.4;

    color:#5d4a42;

    margin-bottom:30px;

    font-weight:800;

    max-width:800px;

    margin:0 auto 30px;

    word-break: keep-all;

    overflow-wrap: break-word;
    
}

.core-text span{

    display:inline-block;

    background:#F4E6DE;

    padding:18px 40px;

    border-radius:10px;

    font-size:25px;

    font-weight:700;

    color:#333;
}

.value-grid{

    width:90%;

    max-width:1000px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;
}

.value-card{

    background:#ffffff;

    border:1px solid #e4ddd8;

    border-radius:16px;

    padding:40px 30px;

    min-height:260px;

    transition:.3s;

}

.value-card:hover{

    transform:translateY(-12px);

    box-shadow:0 15px 35px rgba(0,0,0,.12);

    border-color:#b79d8f;
}

.value-card h3{

    font-size:28px;

    letter-spacing:2px;

    color:#c7b9ae;
}

.value-card h4{

    font-size:28px;

    color:#5d4a42;

    margin-bottom:25px;

    border-bottom:1px solid #ddd;

    padding-bottom:15px;

    letter-spacing:-1px;
}

.value-card p{

    font-size:16px;

    color:#666;

    line-height:1.7;
}

@media(max-width:768px){

    .core-text{

        width:90%;

        margin:0 auto 50px;
    }

    .core-text h2{

        font-size:26px;
    }

    .core-text span{

        font-size:18px;
    }

}

/* =========================
   OVERVIEW
========================= */

.overview{

    padding:140px 0;

    background:#ffffff;
}

.overview-title{

    text-align:center;

    margin-bottom:80px;
}

.overview-title h2{

    font-size:58px;

    font-weight:800;

    color:#333;

    margin-bottom:15px;
}

.overview-title p{

    font-size:28px;
    
    font-weight:700;

    color:#666;
}

@media(max-width:768px){

    .philosophy-container{

        grid-template-columns:1fr;

        gap:40px;
    }

    .philosophy-box{

        font-size:28px;

        min-height:220px;
    }

    .philosophy-text p{

        font-size:18px;
    }

    .core-text h2{

        font-size:26px;
    }

    .core-text span{

        font-size:18px;
    }

    .value-grid{

        grid-template-columns:1fr;
    }

    .overview-title h2{

        font-size:42px;
    }

    .overview-title p{

        font-size:22px;
    }
}


/* =========================
   OVERVIEW FLOW
========================= */

.overview-flow{

    width:90%;

    max-width:1000px;

    margin:auto;

    display:flex;

    justify-content:center;
    align-items:center;

    gap:25px;

    flex-wrap:wrap;

    position:relative;
}

.overview-circle{

    width:245px;
    height:245px;

    border:6px solid #8e7568;

    border-radius:50%;

    background:#ffffff;

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    padding:20px;

    position:relative;

    z-index:2;
}

.overview-circle h3{

    font-size:25px;

    font-weight:800;

    letter-spacing:-0.5px;

    color:#6b5449;

    line-height:1.3;

    margin-bottom:10px;
}

.overview-circle span{

    font-size:22px;

    color:#333;

    font-weight:700;

    line-height:1.2;
}

.arrow{

    width:80px;

    height:40px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;
}

.arrow::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:66px;

    height:2px;

    background:#8e7568;

    transform:translateY(-50%);
}

.arrow::after{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    width:0;
    height:0;

    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:14px solid #8e7568;
}


/* =========================
   BRAND PAGE
========================= */

.brand-dopamy{

    width:100%;

    background:#f8f8f8;

    padding-top:80px;
}

.brand-bolyhara{

    width:100%;

    background:#f8f8f8;
}

.brand-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    height:750px;
}

.brand-image{

    width:100%;
    height:750px;

    overflow:hidden;
}

.brand-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 15%;

}

.brand-text{

    background:#F7EDE7;

    height:750px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:60px;

    position:relative;
}

/* 위 반원 */

.brand-text::before{

    content:"";

    position:absolute;

    left:-58px;

    top:90px;

    width:110px;
    height:110px;

    background:#F7EDE7;

    border-radius:50%;
}

/* 아래 반원 */

.brand-text::after{

    content:"";

    position:absolute;

    left:-58px;

    bottom:90px;

    width:110px;
    height:110px;

    border-radius:50%;
}

/* 도파미 하단 원 */

.brand-dopamy .brand-text::after{

    background:#F7EDE7;
}

/* 보리하라 하단 원 */

.brand-bolyhara .brand-text::after{

    background:#F7EDE7;
}

/* 브랜드 로고 */

.brand-logo-img{

    width:260px;

    height:120px;

    object-fit:contain;

    margin-bottom:40px;

}

/* DOPAMY 기본 */

.brand-text h2{

    font-size:48px;

    font-weight:800;

    color:#1e2e78;

    margin-bottom:30px;
}

.brand-text h3{

    font-size:32px;

    font-weight:700;

    margin-bottom:40px;

    color:#1e2e78;
}

.brand-highlight{

    font-size:24px;

    font-weight:700;

    color:#ff7a22;

    margin-bottom:30px;

    line-height:1.6;
}

.brand-desc{

    font-size:22px;

    line-height:1.8;

    color:#666;

    min-height:120px;
}


/* =========================
   BOLYHARA COLOR
========================= */

.brand-bolyhara .brand-text h2{

    color:#e60012;
}

.brand-bolyhara .brand-text h3{

    color:#e60012;
}

.brand-bolyhara .brand-highlight{

    color:#ff7a22;
}

/* =========================
   BRAND LINKS
========================= */

.brand-links{

    display:flex;

    justify-content:center;

    gap:30px;

    padding:40px 0 150px;

    background:#f8f8f8;
}

.brand-links a{

    width:280px;

    text-align:center;

    padding:18px 0;

    border:3px solid #d7bfb2;

    border-radius:999px;

    text-decoration:none;

    color:#777;

    font-size:24px;

    font-weight:700;

    transition:.3s;
}

.brand-links a:hover{

    background:#d7bfb2;

    color:#ffffff;
}

/* =========================
   MOBILE
========================= */

@media(max-width:1000px){

    .brand-container{
        grid-template-columns:1fr;

        height:auto;
    }

    .brand-image{
        height:400px;
    }

    .brand-text{
        height:auto;
        padding:60px 30px;
    }

    .brand-logo-img{
        max-width:180px;
    }

    .brand-text h2{
        font-size:32px;
    }

    .brand-text h3{
        font-size:24px;
    }

    .brand-highlight{
        font-size:18px;
    }

    .brand-desc{
        font-size:16px;
    }

    .brand-links{
        display:flex;

        flex-direction:column;

        align-items:center;

        gap:15px;

        padding:30px 0 50px;

    }

    .brand-links a{
     
        width:85%;

        min-height:60px;

        display:flex;

        justify-content:center;

        align-items:center;

        font-size:18px;
    }

    /* 모바일에서 반원 숨김 */

    .brand-text::before,
    .brand-text::after{

        display:none;
    }

}

/* =========================
   INSIDE PAGE
========================= */

.news-section{

    padding:160px 20px 120px;

    text-align:center;

    min-height:700px;
}

/* NEWS 제목 */

.news-title h1{

    font-size:72px;

    font-weight:800;

    color:#1d2736;

    line-height:1;
}


.news-title{

    font-size:42px;

    color:#1d2736;

    margin-top:10px;

    margin-bottom:100px;
}

/* 기사 영역 */

.news-slider{

    display:flex;

    justify-content:center;
}

.news-card{

    text-decoration:none;

    display:block;

    width:500px;

    max-width:90%;
}

.news-card img{

    width:100%;

    display:block;

    border-radius:4px;
}

.news-category{

    font-size:30px;

    font-weight:800;

    color:#2d3476;

    text-align:center;

    margin-bottom:12px;

    line-height:1.4;
}

.news-card h3{

    margin-top:20px;

    font-size:26px;

    font-weight:700;

    color:#2d3476;

    line-height:1.4;
}


/* hover */

.news-card:hover{

    opacity:.9;
}

/* 화살표 */

.news-slider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:100px;
}

.news-arrow{

    background:none;

    border:none;

    font-size:120px;

    color:#f4e6de;

    cursor:pointer;

    transition:.3s;
}

.news-arrow:hover{

    opacity:.6;
}

/* 모바일 */

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .news-section{

        min-height:calc(100vh - 80px);

        display:flex;

        flex-direction:column;

        justify-content:center;

        padding:100px 20px;
    }

    .news-title{

        margin-bottom:50px;
    }

    .news-category{

        font-size:18px;

        margin-bottom:15px;
    }

    .news-title h1{

        font-size:48px;
    }

    .news-title p{

        font-size:24px;

        margin-bottom:40px;
    }

    .news-slider{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:15px;
    }

    .news-arrow{

        font-size:50px;

        padding:0;

        width:auto;

        height:auto;
    }

    .news-card{

        width:100%;

        max-width:320px;
    }

    .news-card img{

        width:100%;

        height:auto;
    }

    .news-card h3{

        font-size:20px;

        line-height:1.4;

        margin-top:15px;
    }

}

/* =========================
   CONTACT PAGE
========================= */

.contact-section{

    padding:180px 20px 120px;

    background:#f8f8f8;
}

/* 카드 */

.contact-card{

    max-width:1000px;

    margin:0 auto;

    background:#ffffff;

    border-radius:30px;

    padding:80px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* 제목 */

.contact-title{

    text-align:center;

    margin-bottom:60px;
}

.contact-title h1{

    font-size:72px;

    font-weight:800;

    color:#1d2736;

    margin-bottom:15px;
}

.contact-title p{

    font-size:24px;

    color:#333;

    line-height:1.5;
}

/* 폼 */

.contact-form{

    width:100%;
}

/* 첫줄 */

.contact-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-bottom:15px;
}

/* 입력 */

.contact-form input,
.contact-form textarea{

    width:100%;

    background:#F7EDE7;

    border:none;

    border-radius:12px;

    padding:20px;

    font-size:16px;

    font-weight:700;

    color:#333;

    font-family:inherit;

    outline:none;
}

.contact-form input[type="email"]{

    margin-bottom:15px;
}

.contact-form textarea{

    height:280px;

    resize:none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{

    color:#333;

    opacity:1;
}

/* 입력창 클릭 효과 */

.contact-form input:focus,
.contact-form textarea:focus{

    box-shadow:0 0 0 3px rgba(215,191,178,.3);
}

/* 버튼 */

.contact-btn{

    display:block;

    margin:30px auto 0;

    width:220px;

    height:60px;

    border:none;

    border-radius:999px;

    background:#d7bfb2;

    color:#333;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.contact-btn:hover{

    background:#c9ac9c;

    transform:translateY(-2px);

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .contact-section{

        padding:120px 20px 80px;
    }

    .contact-card{

        padding:40px 25px;
    }

    .contact-title h1{

        font-size:48px;
    }

    .contact-title p{

        font-size:18px;
    }

    .contact-row{

        grid-template-columns:1fr;
    }

    .contact-form input,
    .contact-form textarea{

        font-size:16px;
    }

    .contact-form textarea{

        height:200px;
    }

    .contact-btn{

        width:100%;

        height:56px;
    }
}