@charset "utf-8";

/* 로고색상 */
/*
.navArea .logo a {color: #505050;}
*/

/* 비주얼영역 */
.visualArea {position: relative; width: 100%; height:40vh; overflow: hidden; display: flex; align-items: center;}

.visualArea .overlayBox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 23, 38, 0.1); border-radius: 0 0 120px 0; z-index: 2; }
.visualArea .visual-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 120px 0; z-index: 1; }

.visualArea .contentBox {position: relative; margin-left: 20px; max-width: calc(100vw - 30vw); display: flex; flex-direction: column; gap: 18px; z-index: 3;}
.visualArea .contentBox h1 {font-size: 1.3rem;}
.visualArea .contentBox p {font-size: 0.9rem; line-height: 1.7; color: #5c5c5c;}
.visualArea .contentBox .btn {margin-top:20px; padding: 8px 20px; background: #2563eb; color: #fff; border-radius: 8px; font-size: 0.9rem; transition: background 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.12); display: inline-block;}
.visualArea .contentBox .btn:hover { background: #1d4ed8; }
.visualArea .contentBox .btn i {margin-left:10px;}

/* 섹션1 */
.content1 .contentArea {gap:20px;}
.content1 .contentBox {text-align: center;}
.content1 .contentBox .textBox {margin:40px 0;}
.content1 .contentBox .textBox .text {font-size: 1.4rem; line-height: 1.8;}
.content1 .imageBox {text-align: center;}
.content1 .imageBox img {width: 80%; max-width: 350px; height: auto; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); animation: fadeIn 0.8s ease-out 0.8s both;}



/* 반응형 스타일 */
@media (max-width: 500px) {


}

@media (min-width: 501px) and (max-width: 1349px) {

    .visualArea {height:100vh;}
    .visualArea .contentBox {margin-left:15vw; width:600px;}
    .visualArea .contentBox h1 {font-size: 2.5rem; font-weight: normal;}
    .visualArea .contentBox p {font-size: 1.5rem;}
    .visualArea .contentBox .btn {padding: 14px 36px; font-size: 1.5rem;}
    
}

@media (min-width: 1350px) {

    .visualArea {height:100vh;}
    .visualArea .contentBox {margin-left:15vw; width:600px;}
    .visualArea .contentBox h1 {font-size: 2.5rem; font-weight: normal;}
    .visualArea .contentBox p {font-size: 1.5rem;}
    .visualArea .contentBox .btn {padding: 14px 36px; font-size: 1.5rem;}   
}

/*
@media (max-width: 1200px) {
    .visualArea {height:100vh;}
    .visualArea .contentBox { margin-left: 200px; max-width: 500px; }
    .visualArea .contentBox h1 { font-size: 2.4rem; }
}

@media (max-width: 950px) {
    .visualArea {height:80vh;}
    .visualArea .contentBox { margin-left: 40px; max-width: 90vw; gap: 18px; }
    .visualArea .contentBox h1 { font-size: 2.1rem; }
    .visualArea .contentBox p { font-size: 1rem; }
    .visualArea .contentBox .btn { padding: 12px 28px; font-size: 1rem; }
}

@media (max-width: 700px) {
    .visualArea {height:60vh;}
    .visualArea .contentBox { margin-left: 20px; max-width: calc(100vw - 40px); gap: 16px; }
    .visualArea .contentBox h1 { font-size: 1.8rem; line-height: 1.3; }
    .visualArea .contentBox p { font-size: 0.95rem; }
    .visualArea .contentBox .btn { padding: 10px 24px; font-size: 0.95rem; }
}

@media (max-width: 480px) {
    .visualArea {height:40vh;}
    .visualArea .contentBox { margin-left: 16px; max-width: calc(100vw - 32px); gap: 14px; }
    .visualArea .contentBox h1 { font-size: 1.5rem; line-height: 1.4; }
    .visualArea .contentBox p { font-size: 0.9rem; }
    .visualArea .contentBox .btn { padding: 8px 20px; font-size: 0.9rem; }
}
    */