@charset "utf-8";

/* 헤더 스타일 */
.header {
    width: 100%;
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    background-color: #fff;
    height: 60px;
}

.container {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* 메인로고 - 모바일 대응 */
.mainLogo {display:block;  position: relative; /* fixed에서 relative로 변경 */ left:10px; padding:8px; z-index:999999; background:#fff;}
.mainLogo img{display:block; max-height:24px; width:auto; /* 고정 높이에서 최대 높이로 변경 */}
.mainLogo a {
    color: #222;
    text-decoration: none;
    letter-spacing: -0.5px;
    font-family: 'Arial', sans-serif;
}

.header-util {
    display: flex;
    align-items: center;
    margin-left: auto; /* 오른쪽 정렬을 위한 설정 */
    margin-right: 40px;
    gap:12px;
}

.header-util a {
    color: #666;
    font-size: 12px;
    text-decoration: none;
}

.header-util a:hover {
    text-decoration: underline;
}

.text-uppercase {
    text-transform: uppercase;
}

.p-l-5 {
    padding-left: 5px;
}

/* 인덱스 페이지 레이아웃 */
.topTitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 70%;
    padding-top: 20px;
    margin : 0 auto;
}


.topTitle > div:first-child {
    flex: 1;
    width: 65%;
    text-align: left;
    
    font-family: 'GmarketSans', 'Noto Sans Korean';
    
}

.topTitle > div:first-child .line1 {
    font-size: 24px;
    color: #d87f00;
    font-weight: normal;
    display: block;
    line-height: 1.8;
    padding-left:54px;
}

.topTitle > div:first-child .line2 {
    font-size: 34px;
    color: #5f4a31;
    font-weight: 300;
    display: block;
    line-height: 1.2;
    padding-left:54px;
}

.topTitle > div:first-child .line3 {
    font-size: 40px;
    color: #5f4a31;
    font-weight: bold;
    display: block;
    line-height: 1.2;
    padding-left:54px;
}

.topTitle > div:last-child {
    flex: 1;
    text-align: left;
    margin-top :10px;
}

.topTitle > div:last-child img{
    width: auto;
    height: 270px;
   
}

.topButton{
    padding-left: 64px;
    margin-top: 20px;
}

.topButton > div {
    background-color:#c2b09a;
    border-radius: 10px; /* 모서리를 둥글게 */
    padding: 10px 20px;
    margin: 5px;
    display: inline-block;
    cursor: pointer;
    color: #fff; /* 글자색은 흰색으로 */
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    transition: all 0.3s ease; /* 부드러운 효과 */
}

.topButton > div a{
    color: #fff; /* 글자색은 흰색으로 */
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    font-family: 'GmarketSans', 'Noto Sans Korean';
}

.topButton > div:hover {
    background-color: #90795d; /* 마우스 오버시 살짝 어두운 색상 */
    /* transform: translateY(-2px); /* 살짝 위로 올라가는 효과 */
}

.topContent {
    justify-content: flex-start; /* space-between에서 flex-start로 변경하여 왼쪽 정렬 */
    margin-left: 10%; /* 원하는 만큼 왼쪽 여백 추가 */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    width:66%;
    margin: 0 auto; /* 상 우 하 좌 마진 - 왼쪽에 10% 마진 추가 */
    box-sizing: border-box;
    font-family: 'GmarketSans', 'Noto Sans Korean';
}

.topContent ul {
    width: 250px; /* 고정 너비 */
    height: auto; /* 고정 높이 - 비율에 맞게 조정 */
    flex: 0 0 auto; /* flex로 크기 고정 */
    background-color: #d2c0aa;
    border-radius: 15px;
    padding: 10px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.topContent .topContentMenu {
    background-color: #FFFFFF;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    box-sizing: border-box;
    min-height: auto;
    width: 100%;       /* 250px에서 100%로 변경 */
    padding: 15px;     /* 패딩 추가 */
    border-radius: 10px;
}

.topContent ul li a {
    color: #000;
    font-family: 'GmarketSans', 'Noto Sans Korean';
    text-decoration: none; /* 링크 밑줄 제거 */
}

.topContent ul li a:hover {
    transform: translateY(-5px);
}

.topContent ul li:first-child {
    background-color: white;
    border-radius: 10px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.topContent ul li:first-child img {
    max-width: 220px;
    height: 180px;     /* 원하는 고정 높이 값 */
    display: block;
    object-fit: contain; /* 비율 유지하면서 컨테이너에 맞춤 */
}

.topContent ul li:nth-child(2) {
    font-size: 22px;
    font-weight:500;
    color: #000;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 6px;
    align-self: flex-start;  /* 왼쪽 정렬을 위해 추가 */
    width: 100%;             /* 너비 100%로 설정 */
    text-align: left;        /* 텍스트 왼쪽 정렬 */
}

.topContent ul li:nth-child(3) {
    font-size: 18px;
    font-weight:300;
    color: #000;
    margin-top: 3px;
    padding-left: 6px;
    align-self: flex-start;  /* 왼쪽 정렬을 위해 추가 */
    width: 100%;             /* 너비 100%로 설정 */
    text-align: left;        /* 텍스트 왼쪽 정렬 */
}

/* 인덱스 하단 레이아웃 */

.footContent {
    text-align: center;
    width: 100%;
    margin: 40px auto;
    padding: 10px;
    font-family: 'GmarketSans', 'Noto Sans Korean';
    color: #5f4a31;
    line-height: 1.8;
    display: block;
}

.footContent .footline1 {
    font-size: 25px;
    font-weight: bold;
}

.footContent .footline2 {
    font-size: 19px;
    font-weight: 300; 
}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 하단 레이아웃 */
#footer {clear:both;  padding:12px 10px; text-align:center; border-top:1px solid #efefef;}
#footer > dl{width:100%; text-align:center; }
#footer > dl > a:hover{color:#000; }
#footer p{color:#999; font-size:12px; font-family:verdana; padding-top:2px; }

#top_btn ,
#top_btn:hover{position:fixed; bottom:-53px; right:0px; width:50px; height:50px; line-height:50px; border:0; text-align:center; font-size:30px; z-index:999999; color:#fff; background:#000;filter:Alpha(opacity=70); opacity:0.7; -moz-opacity:0.7;-webkit-transition-duration: 0.4s;-webkit-transition-timing-function: ease;transition-duration: 0.4s;transition-timing-function: ease;}

.scDown #top_btn{bottom:0px !important;}

#topID{display:block; position:absolute; left:0px; top:2px; }