/* BASIC css start */
/* 메인 배너 */
#main_bnr_swiper { margin-bottom:100px; width:100%; height:auto;   } 
#main_bnr_swiper .swiper-slide { position:relative; } 
#main_bnr_swiper .swiper-slide a { display:block; } 
#main_bnr_swiper .swiper-slide a img { width: 100%; object-fit: cover; object-position: center; } 
#main_bnr_swiper .swiper-slide a .txt_wrap {position: absolute;top: 50%;left: 15%; transform: translateY(-50%);} 
#main_bnr_swiper .swiper-slide a .txt_wrap p { color:#fff; } 
#main_bnr_swiper .swiper-slide a .txt_wrap .txt_01 { font-size: 20px; font-weight: 600; line-height: 29.95px; margin-bottom: 10px; text-align: left; } 
#main_bnr_swiper .swiper-slide a .txt_wrap .txt_02 { font-size: 34px; font-weight: 600; line-height: 48px; margin-bottom: 10px; text-align: left; letter-spacing:-5%; } 
#main_bnr_swiper .swiper-slide a .txt_wrap .txt_03 { font-size: 20px; font-weight: 400; line-height: 30px; text-align: left; letter-spacing:-5%; } 
#main_bnr_swiper .swiper-slide a .txt_wrap .txt_01bk { font-size: 20px; font-weight: 600; line-height: 29.95px; margin-bottom: 10px; text-align: left; color:#2d2d2d; } 
#main_bnr_swiper .swiper-slide a .txt_wrap .txt_02bk { font-size: 34px; font-weight: 600; line-height: 48px; margin-bottom: 10px; text-align: left; letter-spacing:-5%; color:#2d2d2d; } 
#main_bnr_swiper .swiper-slide a .txt_wrap .txt_03bk { font-size: 20px; font-weight: 400; line-height: 30px; text-align: left; letter-spacing:-5%; color:#2d2d2d;} 
#main_bnr_swiper .swiper-button-prev { left:30px; } 
#main_bnr_swiper .swiper-button-next { right:30px; } 
#main_bnr_swiper .swiper-pagination { position: absolute; bottom: 2%; left: 50%; transform:translateX(-50%); width: 24%; height: 4px; background: rgb(220 220 220 / 100%); z-index: 2; } 
#main_bnr_swiper .swiper-pagination .swiper-pagination-progressbar-fill { background: #fff; } 
#main_bnr_swiper .btn_wrap { position: absolute; bottom: 25%; left: 44%; z-index: 2; display:none;} /* 정지 시작 플레이어 none; 상태*/
.control_btn { position:relative; } 
.control_btn .control { position:absolute; left:0; top:0; display:none; } 
.control_btn .control.on { display:block; } 
.control_btn .control a { cursor: pointer; display: flex; transition: all .1s; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: #757575; } 
.control_btn .control a img { width:10px; } 
.control_btn .pause_btn.control a img { width:8px; } 




/* =========================================
   다운로드 쿠폰 / 로그인 섹션
========================================= */


/* 쿠폰 섹션 전체 감싸기 */
.login_wrap {
    width: 100%;
    margin: 100px 0; /* 위아래 여백 (원하시는 대로 조절하세요) */
}

/* 1. 상단 타이틀 영역 (회색 띠 배경) */
.login_top {
    width: 100%;
    background-color: #fff; /* 레퍼런스처럼 연한 회색 배경 */
    text-align: center;
    
    margin-bottom: 120px;
}
.login_top p {
    font-size: 20px;
    color: #555;
    margin-bottom: 3px;
}
.login_top h2 {
    font-size: 36px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em; /* 자간을 살짝 좁히면 훨씬 세련돼 보입니다 */
}

/* 2. 하단 쿠폰 리스트 영역 (1줄 3칸 정렬) */
.login_coupon {
    display: flex;
    justify-content: space-between;
    gap: 50px; /* 쿠폰 사이의 간격 */
    max-width: 1416px; /* 메인 콘텐츠 가로 사이즈에 맞춤 */
    margin: 50px auto 0; /* 한가운데 정렬 및 위쪽(타이틀과) 여백 */
    padding: 0 100px;
    box-sizing: border-box;
}

/* 개별 쿠폰 아이템 */
.login_coupon li {
    flex: 1; /* 3개의 아이템이 남는 공간을 1:1:1 비율로 똑같이 나눠 가집니다 */
}

/* 3. 쿠폰 이미지 영역 */
.login_coupon .coupon_img {
    width: 100%;
    overflow: hidden; /* 마우스 오버 시 이미지가 튀어나가지 않게 숨김 */
}
.login_coupon .coupon_img a {
    display: block;
}
.login_coupon .coupon_img img {
    width: 100%;
    height: auto; 
    display: block;
    transition: transform 0.3s ease; /* 부드러운 움직임을 위한 세팅 */
}

/* 🌟 포인트: 마우스를 올렸을 때 사진이 살짝 커지는 고급스러운 효과 */
.login_coupon li:hover .coupon_img img {
    transform: scale(0.96); 
}

/* 4. 쿠폰 하단 텍스트 영역 */
.login_coupon .coupon_txt {
    text-align: center; /* 텍스트 가운데 정렬 */
    padding-top: 25px; /* 이미지와 텍스트 사이 간격 */
}
.login_coupon .coupon_txt h3 {
    font-size: 20px;
    font-weight: 600;
    color: #111;
    margin-bottom: 3px;
    letter-spacing: -3%;
}
.login_coupon .coupon_txt p {
    font-size: 15px;
    color: #999; /* 설명은 조금 더 연한 색으로 처리하여 시선 분산 방지 */
    font-weight: 400;
}



/* =========================================
   신제품(NEW) 섹션
========================================= */
.new_wrap {
    max-width: 1200px; /* 카테고리와 동일한 안정적인 폭 */
    margin: 120px auto; 
    padding: 0 20px;
}

/* 1. 상단 타이틀 */
.new_top { text-align: center; margin-bottom: 60px; }
.new_top h2 { font-size: 34px; font-weight: 500; color: #222; margin-bottom: 12px; letter-spacing: 1px; }
.new_top p { font-size: 25px; color: #4d4d4d; font-weight:200; }

/* 2. 상품 3단 그리드 배치 */
.new_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 무조건 1줄에 3개씩 */
    gap: 40px; /* 상품 사이 간격 */
}

/* 3. 상품 이미지 썸네일 */
.new_list .thumb {
    width: 100%;
    margin-bottom: 15px; /* 사진과 글씨 사이 간격 */
    overflow: hidden;
}
.new_list .thumb img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.new_list .item-list:hover .thumb img {
    transform: scale(1.03); /* 마우스 올렸을 때 사진 살짝 확대 */
}

/* 4. 상품 텍스트 가운데 정렬 및 디자인 */
.new_list .array_center { text-align: center; }

.new_list .prd-name{margin-bottom:10px;}

.new_list .prd-name a { 
    font-size: 18px !important; 
    font-weight: 400; 
    color: #222; 
    margin-bottom: 12px; 
    letter-spacing:-3%; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; line-height: 24px;
    
}

/* 🌟 상세 설명 (두 줄로 떨어지게 줄바꿈 정리) */
.new_list .sub-name{padding-left:50px; padding-right:50px; margin-bottom:25px}

.new_list .sub-name a { 
    font-size: 12px; 
    color: #8d8d8d; 
    margin-bottom: 25px; 
    font-weight: 400; 
    line-height: 1.2; 
    word-break: keep-all; /* 단어 단위로 깔끔하게 끊어줌 */
}

/* 5. 🌟 가격 순서 변경 트릭 (최종가 -> 취소선 -> 할인율) */
.new_list .price {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    gap: 6px;
}
.new_list .price .normal { 
    order: 1; /* 제일 위로 */
    font-size: 20px; 
    font-weight: 700; 
    color: #111; 
}
.new_list .price .consumer { 
    order: 2; /* 두 번째 (취소선) */
    font-size: 14px; 
    color: #ccc; 
    text-decoration: line-through; 
}
.new_list .price .dc_per { 
    order: 3; /* 세 번째 (가장 아래 핑크색) */
    font-size: 13px; 
    font-weight: 600; 
    color: #ff7682; 
}






/* =========================================
   리뷰 섹션 (Review)
========================================= */
/* 전체 배경 (연한 회색) */
.review_wrap {
    width: 100%;
    background-color: #F5F5F5; 
    padding: 80px 0 100px; /* 위아래 여백 */
}

/* 상단 타이틀 */
.review_top {
    text-align: center;
    margin-bottom: 50px;
}
.review_top h2 {
    font-size: 34px;
    font-weight: 500;
    color: #222;
    margin-bottom: 5px;
    letter-spacing: 1PX;
}
.review_top p {
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #8d8d8d;
}

/* 🌟 핵심 1: 이너 영역 너비 80% 고정 */
.review_inner {
    width: 70%;
    margin: 0 auto;
}

/* 리뷰 스와이퍼 및 카드 레이아웃 */
#review_swiper {
    width: 100%;
    overflow: hidden; 
}
.review_card {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 내용물 사이의 세로 간격 */
}

/* 🌟 핵심 2: 리뷰 메인 이미지 4:5 비율 고정 */
.review_card .review_img {
    width: 100%;
    aspect-ratio: 4 / 5; /* 높이를 계산할 필요 없이 비율 강제 지정! */
    border-radius: 10px; /* 모서리 둥글게 */
    overflow: hidden;
}
.review_card .review_img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 안 깨지게 꽉 채움 */
    transition: transform 0.3s;
}
.review_card:hover .review_img img {
    transform: scale(1.03); /* 마우스 올렸을 때 사진 살짝 확대 */
}

/* 상품 썸네일 & 정보 */
.review_product {
    display: flex;
    align-items: center;
    gap: 10px;
}
.review_product .pd_thumb {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
}
.review_product .pd_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.review_product .pd_info .pd_name {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    margin-bottom: 2px;
}
.review_product .pd_info .pd_price {
    font-size: 12px;
    color: #888;
}

/* 리뷰 텍스트 */
.review_txt p {
    font-size: 13.5px;
    line-height: 1.5;
    color: #444;
    /* (선택) 글이 너무 길면 3줄까지만 보이고 '...' 처리 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 별점 색상 */
.review_rating {
    color: #ff5285; /* 스크린샷과 유사한 핑크색 */
    font-size: 15px;
    letter-spacing: 2px;
}

/* 작성자 정보 */
.review_user {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #aaa;
}




/* =========================================
   브랜드 슬라이드 섹션
========================================= */
.brand_wrap {
    position: relative; /* 상단 메뉴와 중앙 텍스트의 기준점 */
    width: 100%;
    aspect-ratio: 1440 / 700; /* 1440/600 or / 700 이랑 비교하면서 수정 */ 
    overflow: hidden;
}

/* 1. 상단 클릭 메뉴 (커스텀 네비게이션) */
.brand_nav {
    position: absolute;
    top: 80px; /* 위에서 50px 떨어진 곳에 위치 */
    left: 50%;
    transform: translateX(-50%); /* 정확히 가운데 정렬 */
    display: flex;
    gap: 50px; /* 메뉴 사이 간격 */
    z-index: 10; /* 슬라이드 사진보다 무조건 위에 오도록 설정 */
}
.brand_nav li a {
    color: rgba(255, 255, 255, 0.6); /* 기본은 반투명한 흰색 */
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: color 0.3s;
}
.brand_nav li.active a,
.brand_nav li:hover a {
    color: #fff; /* 활성화되거나 마우스 올리면 완전한 흰색으로 빛남 */
}

/* 2. 스와이퍼 레이아웃 */
#brand_swiper {
    width: 100%;
    height: 100%;
}
.brand_wrap .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 3. 배경 이미지 세팅 & 딤(어둡게) 처리 */
.brand_wrap .bg_img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.brand_wrap .bg_img img {
    width: 100%; height: 100%;
    object-fit: cover; /* 1440:600 비율에 맞춰 꽉 채움 */
}
.brand_wrap .bg_img::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.2); /* ✨ 사진을 살짝 눌러줘서 흰 글씨를 돋보이게 함 */
}

/* 4. 중앙 텍스트 영역 */
.brand_txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 완벽한 정중앙 정렬 공식 */
    text-align: center;
    color: #fff;
    z-index: 5;
    width: 100%;
}
.brand_logo {
    height: 48px;
    font-weight: 400;
    margin-bottom: 40px;
    letter-spacing: 2px;
    font-family: 'Times New Roman', serif; /* 사진 속 우아한 로고 느낌 (필요시 수정) */
}


.brand_logo img {height: 50px;}

.brand_sub {
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 10px;
    letter-spacing: -2%;
}
.brand_desc {
    font-size: 18px;
    font-weight: 200;
    line-height: 1.4;
    margin-bottom: 50px;
    color: rgba(255,255,255,0.85); /* 설명은 너무 튀지 않게 살짝 연하게 */
}
.btn_more {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    padding-bottom: 3px;
    transition: 0.3s;
}
.btn_more:hover {
    border-bottom-color: #fff; /* 마우스 올리면 밑줄이 선명해짐 */
}





/* =========================================
   영상재생 (완벽한 16:9 반응형 컨테이너)
========================================= */
.yt-bg {
    position: relative;
    width: 100%; /* 부모 넓이에 꽉 맞춤 */
    /* 🌟 마법의 최신 CSS 속성: 가로 넓이에 맞춰 16:9 비율을 유지합니다 */
    aspect-ratio: 16 / 9; 
    
    /* 혹시 아주 구형 브라우저까지 지원해야 한다면, aspect-ratio 대신 아래 3줄을 쓰세요.
    height: 0;
    padding-bottom: 56.25%; /* 9 / 16 * 100 */
    /* ------------------------------------------------ */
    
    margin:0;
    
    overflow: hidden;
    background: #000; /* 영상 로딩 전 검은색 배경 */
}

.yt-bg iframe {
    position: absolute;
    top: 0; /* 🌟 겹쳐놓았던 vw, translate 코드를 다 버리고 0,0,100%,100%로 꽉 채웁니다 */
    left: 0;
    width: 100%;
    height: 100%;
    
    pointer-events: none; /* 배경영상처럼 클릭 방지 (원하시면 제거하세요) */
}

.yt-bg .yt-link-btn {
    position: absolute;
    z-index: 10; /* 영상(iframe)보다 무조건 위에 오게 띄움 */
    
    /* 📍 위치 잡기 (빨간 동그라미 부근) */
    /* 수치를 올리거나 내려서 원하는 곳에 정확히 맞춰보세요! */
    bottom: 10%; 
    left: 45%; 
    
    /* 디자인 요소 */
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.2); /* 영상이 밝을 때 글씨가 묻히지 않게 살짝 딤 처리 */
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    border-radius: 30px; /* 둥근 캡슐 모양 */
    transition: all 0.3s;
    text-decoration: none;
}

/* 마우스 올렸을 때 효과 */
.yt-bg .yt-link-btn:hover {
    background: #fff;
    color: #000;
}



/* =========================================
   프래그런스 섹션
========================================= */
.fragrance_wrap {
    max-width: 80%;
    margin: 100px auto; 
    width: 100%;
}

.fragrance_top { text-align: center; margin-bottom: 40px; }
.fragrance_top h2 { font-size: 34px; font-weight: 500; color: #222; margin-bottom: 12px; letter-spacing: 1px; }
.fragrance_top p { font-size: 14px; color: #999; }

.fragrance_banner {
    position: relative;
    width: 100%;
    aspect-ratio: 1440 / 600;
    overflow: hidden;
}

/* 배경 스와이퍼 이미지 세팅 */
#fragrance_bg_swiper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}
#fragrance_bg_swiper .swiper-slide {
    width: 100%; 
    height: 100%;
}
#fragrance_bg_swiper .swiper-slide img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
}

.fragrance_banner .bg_dim {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 2;
    pointer-events: none;
}

/* 중앙 텍스트 */
.fragrance_txt_overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    color: #fff;
    width: 100%;
}
.fragrance_txt_overlay h3 { font-size: 40px; font-weight: 700; margin-bottom: 40px; letter-spacing: 1px; color:#fff; }
.fragrance_txt_overlay h4 { font-size: 40px; font-weight: 500; margin-bottom: 10px; color:#fff;}
.fragrance_txt_overlay .desc { font-size: 22px; font-weight: 300; line-height: 1.6; margin-bottom: 25px; }
.fragrance_txt_overlay .scent_list { font-size: 16px; font-weight: 300; margin-bottom: 40px; color: rgba(255, 255, 255, 0.8); }

.fragrance_txt_overlay .btn_outline {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    background: transparent;
    transition: all 0.3s;
}
.fragrance_txt_overlay .btn_outline:hover {
    background: #fff;
    color: #000;
}

#fragrance_bg_swiper .swiper-slide {
    transition-property: opacity !important; 
}



/* =========================================
   카테고리 탭 섹션
========================================= */
.category_wrap {
    max-width: 1400px; /* 🌟 4개가 들어가야 하므로 신제품(1200px)보다 폭을 넓혔습니다 */
    margin: 120px auto; 
    padding: 0 20px;
}

/* 1. 상단 타이틀 */
.cate_top { text-align: center; margin-bottom: 60px; }
.cate_top h2 { font-size: 34px; font-weight: 500; color: #222; margin-bottom: 15px; letter-spacing: 1px; }
.cate_top p { font-size: 25px; color: #4d4d4d; font-weight:200; }

/* 2. 둥근 캡슐형 탭 버튼 */
.cate_tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 60px;
}
.cate_tabs a {
    display: block;
    padding: 10px 30px;
    border: 1px solid #ddd;
    border-radius: 30px; /* 둥근 캡슐 모양 */
    color: #777;
    font-size: 15px;
    transition: all 0.3s;
}
/* 클릭된(활성화된) 탭 스타일 */
.cate_tabs li.active a,
.cate_tabs a:hover {
    border-color: #111;
    color: #111;
    font-weight: 600;
}

/* 3. 패널 전환 (기본은 숨기고 active만 보임) */
.cate_panel { display: none; }
.cate_panel.active { display: block; }

/* 4. 상품 4단 그리드 (🌟 3 -> 4로 변경) */
.cate_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 1줄에 4개씩 꽉 채움 */
    gap: 10px; 
}




/* 5. 상품 이미지 & 텍스트 (신제품과 동일한 속성) */
.cate_list .thumb { width: 100%; margin-bottom: 15px; overflow: hidden; }
.cate_list .thumb img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }

.cate_list .item-list:hover .thumb img { transform: scale(1.03); }

.cate_list .array_center { text-align: center; }
.cate_list .prd-name  {padding: 0px 30px;}
.cate_list .prd-name a { font-size: 18px; font-weight: 400; color: #222; margin-bottom: 12px; letter-spacing:-3%; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; line-height: 24px; width: 100%; display: block; }

.cate_list .sub-name { font-size: 13px; color: #999; margin-bottom: 25px; line-height: 1.5; word-break: keep-all; }
.cate_list .sub-name a {font-size: 12px; color: #8d8d8d; margin-bottom: 25px; font-weight: 400; line-height: 1.2; word-break: keep-all;}

/* 6. 가격 순서 변경 트릭 (신제품과 완벽히 동일) */
.cate_list .price { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cate_list .price .normal { order: 1; font-size: 20px; font-weight: 700; color: #111; }
.cate_list .price .consumer { order: 2; font-size: 14px; color: #ccc; text-decoration: line-through; }
.cate_list .price .dc_per { order: 3; font-size: 13px; font-weight: 600; color: #ff7682; }
.cate_list .price .dc_per::after { content: ''; } /* 가격 태그 안에 이미 SALE 글씨를 넣었으므로 가립니다 */



/* 🌟 메이크샵 기본 가로정렬(Float/Flex) 완벽 파괴 & 강제 세로 정렬 */
.cate_list .item-list {
    display: flex !important;
    flex-direction: column !important; /* 무조건 위(사진)에서 아래(글씨)로 쌓이게 강제! */
    width: 100% !important;
    height: auto !important;
    float: none !important; /* 범인 1: 플롯 강제 해제 */
    width: calc(25% - 20px);
    min-width: 0 !important;
    flex: 0 0 calc(25% - 20px);
}

.cate_list .item-list .thumb {
    display: flex !important;
    width: 100% !important;
    float: none !important; /* 범인 2: 플롯 강제 해제 */
    margin-bottom: 20px !important;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    width: 100% !important;
    aspect-ratio: 1 / 1.1; /* 👈 마법의 비율 코드! (원하는 비율로 숫자 조절 가능. 예: 1/1, 3/4 등) */
    margin-bottom: 20px !important;
    overflow: hidden;
}

.cate_list .item-list .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 👈 contain: 사진이 잘리지 않고 박스 안에 예쁘게 들어감 / cover: 꽉 채움 */
}

.cate_list .item-list .prd-info {
    display: block !important;
    width: 100% !important;
    float: none !important; /* 범인 3: 플롯 강제 해제 */
    padding: 0 !important;
    clear: both !important; /* 꼬여있는 정렬 찌꺼기 완벽 청소 */
}

.cate_list .prd-info,
.cate_list .prd-info ul {
    width: 100%;
    min-width: 0; /* 안쪽 뼈대도 글씨 따라 늘어나지 않게 철벽 방어 */
}







/* =========================================
   NOTICE (공지사항) 섹션
========================================= */
.notice_wrap {
    width: 100%;
    margin: 20px 0; /* 전체 섹션 위아래 여백 */
}

/* 1. 상단 타이틀 */
.notice_top { text-align: center; margin-bottom: 50px; }
.notice_top h2 { font-size: 34px; font-weight: 500; color: #222; margin-bottom: 12px; letter-spacing: 1px; }
.notice_top p { font-size: 14px; color: #999; }

/* 2. 배너 전체 영역 */
.notice_banner {
    position: relative;
    width: 100%;
    padding: 80px 0; /* 내부 위아래 패딩으로 공간 확보 */
    overflow: hidden;
}

/* 3. 배경 레이어 (미리 블러 처리된 이미지 사용) */
.notice_bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; 
    z-index: 1;
}
.notice_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 사진을 살짝 어둡게 눌러서 흰 글씨 돋보이게 하는 딤(Dim) 처리 */
.notice_bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.1); /* 투명도 65%의 검은 장막 */
}

/* 4. 중앙 콘텐츠 정렬 (가로로 나란히 배치) */
.notice_inner {
    position: relative;
    z-index: 10; /* 배경 위로 띄움 */
    max-width: 1000px; /* 콘텐츠 전체 가로 폭 */
    margin: 0 auto;
    display: flex; /* 사진과 텍스트를 나란히 배치 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center;
    gap: 40px; /* 사진과 텍스트 사이 간격 */
    padding: 0 20px;
}

/* 5. 좌측 썸네일 포스터 */
.notice_thumb {
    width: 240px; /* 포스터 크기 (필요시 조절) */
    flex-shrink: 0; /* 화면이 줄어도 사진이 찌그러지지 않음 */
    box-shadow: 10px 10px 30px rgba(0,0,0,0.4); /* 입체감을 주는 그림자 효과 */
}
.notice_thumb img { 
    width: 100%; 
    display: block; 
}

/* 6. 우측 텍스트 스타일링 */
.notice_txt { color: #fff; }
.notice_txt h3 { font-size: 42px; font-weight: 500; line-height: 1.2; margin-bottom: 30px; letter-spacing: -1px; color: #fff; }
.notice_txt .address { font-size: 18px; font-weight: 500; margin-bottom: 10px; color: #fff; }
.notice_txt .desc { font-size: 20px; font-weight: 300; line-height: 1.6; margin-bottom: 40px; color: rgba(255, 255, 255, 0.8); letter-spacing:-3%;}

/* 7. 더보기 버튼 (테두리 투명 버튼) */
.notice_txt .btn_outline {
    display: inline-block;
    padding: 10px 35px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    background: transparent;
    transition: all 0.3s;
}
.notice_txt .btn_outline:hover {
    background: #fff;
    color: #000;
}

/* =========================================
   MAGAZINE 리스트 섹션 (가로 와이드 정렬)
========================================= */
.mag_list_wrap {
    width: 80%; /* 🌟 전체 화면의 80%를 넓게 사용! */
    max-width: 1600px; /* 모니터가 너무 커도 레이아웃이 안 깨지게 방어 */
    margin: 60px auto 100px; 
    
    /* 🌟 큰 틀을 2칸으로 나눕니다 ([사진+글] 세트가 1칸) */
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px; /* 양쪽 매거진 세트 사이의 간격 */
}

/* 1. 개별 매거진 아이템 (내부에서 다시 가로 정렬) */
.mag_item {
    display: flex;
    align-items: flex-start; /* 상단 정렬 */
    gap: 20px; /* 내부의 사진과 글씨 사이 간격 */
    margin-bottom: 0; /* 한 줄로 서니까 밑단 여백 제거 */
}

/* 2. 좌측 썸네일 영역 */
.mag_thumb {
    width: 45%; /* 한 칸 안에서 사진이 차지하는 비율 */
    flex-shrink: 0;
    overflow: hidden;
    margin-bottom: 0; 
}
.mag_thumb img {
    width: 100%;
    display: block;
    aspect-ratio: 5 / 3; /* 와이드 비율 */
    object-fit: cover;
    transition: transform 0.4s ease;
}
.mag_thumb:hover img {
    transform: scale(1.05); /* 마우스 오버 시 살짝 확대 */
}

/* 3. 우측 텍스트 영역 */
.mag_info {
    width: 55%; /* 한 칸 안에서 글씨가 차지하는 비율 */
    text-align: left;
    padding-top: 10px;
}
.mag_info a { text-decoration: none; display: block; }
.mag_info h3 {
    font-size: 22px; /* 폰트 크기를 한 줄 배열에 맞게 최적화 */
    font-weight: 600;
    color: #222;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}
.mag_info .desc {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 25px;
    word-break: keep-all;
}

/* VIEW MORE 버튼 */
.mag_info .view_more {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    background-color : #ddd;
    padding : 8px;
    border-radius: 5px;
}
.mag_info .view_more:hover {
    color: #000;
    text-decoration: underline;
}







/* =========================================
   인스타그램 섹션
========================================= */
.insta_wrap {
    width: 100%;
    max-width: 1400px; /* 카테고리와 동일한 안정적인 폭 */
    margin: 120px auto;
    padding: 0 20px;
}

/* 1. 상단 타이틀 영역 */
.insta_top { text-align: center; margin-bottom: 50px; }
.insta_top h2 { font-size: 34px; font-weight: 500; color: #222; margin-bottom: 12px; letter-spacing: 1px; }
.insta_top p { font-size: 14px; color: #999; margin-bottom: 25px; }

/* 검은색 둥근 아이디 버튼 */
.insta_id_btn {
    display: inline-block;
    padding: 10px 35px;
    background: #000;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.3s;
}
.insta_id_btn:hover { background: #333; } /* 마우스 올리면 살짝 옅어짐 */

/* 2. 인스타 사진 5단 그리드 */
.insta_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 🌟 무조건 1줄에 5개씩 꽉 채움 */
    gap: 4px; /* 사진 사이의 얇은 여백 (딱 붙이고 싶으면 0으로 변경하세요!) */
}

/* 3. 썸네일 비율 및 디자인 (정사각형 고정 마법) */
.insta_item {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5; /* 🌟 가로세로 어떤 사진이 와도 1:1 정사각형으로 강제 규격화! */
    overflow: hidden; /* 박스 밖으로 튀어나가는 사진 자르기 */
    position: relative;
}

.insta_item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 찌그러지지 않게 꽉 채움 */
    transition: transform 0.4s ease;
}

/* 마우스를 올렸을 때 사진이 살짝 확대되는 고급스러운 디테일 */
.insta_item:hover img {
    transform: scale(1.05);
}




/* 인스타 그리드 섹션 */
.igbox{ max-width: 1416px; margin: 0 auto; }

.igbox-head{
  display:flex; align-items:center; gap:20px;
  margin: 0 0 25px;
}

.igbox-profile{
  width:100px; height:100px; border-radius:50%;
  border:1px solid #e6e6e6;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-decoration:none;
  background:#fff;
}
.igbox-profile img{ width:100%; height:100%; object-fit:cover; display:block; }

.igbox-meta{ display:flex; flex-direction:column; gap:6px; }

.igbox-id{
  display:inline-block;
  padding: 5px 10px;
  border:1px solid #dcdcdc;
  border-radius: 999px;
  font-size: 13px;
  color:#111;
  text-decoration:none;
}
.igbox-id:hover{ background:#111; color:#fff; border-color:#111; }

.igbox-desc{
  font-size: 16px;
  color:#111;
  letter-spacing:-0.02em;
}

/* 5x2 그리드 */
.igbox-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px; /* 스샷처럼 얇게 */
}

.igbox-item{
  display:block;
  background:#3b3b3b; /* placeholder 회색 */
  aspect-ratio: 4 / 5;
  position:relative;
  overflow:hidden;
  background-size: cover;
  background-position: center;
}
.igbox-item:hover{ filter: brightness(1.08); }

/* 반응형: 태블릿 4열 / 모바일 3열 */
@media (max-width: 1024px){
  .igbox-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px){
  .igbox-grid{ grid-template-columns: repeat(3, 1fr); }
  .igbox-desc{ font-size: 14px; }
}



/* BASIC css end */