@import url( reset.css);



<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,600&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@1,400;1,500;1,600&display=swap" rel="stylesheet">

@font-face {
    font-family: 'PalchilmmDailyItalic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201@1.0/87MMILSANG-Oblique.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cafe24Danjeonghae';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Danjunghae.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ReperepointSpecialItalic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-SpecialItalicA.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}



#wrap { width: 100%;}

/* 띠배너--------------------------------------------------------------- */
#top_banner { background: #d31010; text-align: center;}
.banner_content { font-size: 15px; padding: 12px 0; color: #fff;}
.top_close {
    position: absolute;
    top: 9px;
    right: 15px;
}
#close_button { 
    background: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

/* 헤더-------------------------------------------------------------------------------- */

header { width: 100%;}
.header { position: relative; width: 1600px;  margin:0 auto; display: flex;}       

/* 스크롤 내려도 헤더 고정---------------------------------------------------------------- */

.fixed-header {
    background: rgba(255, 255, 255, 1);
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 82px;
    animation: slids-down 0.5s;
    z-index: 9999;
    border-bottom: 1px solid #ccc;
}

@keyframes slids-down {
    0% {transform: translateY(-100%); opacity: 0.3%;}
    100% { transform: translateY(0%);}
}

/* 로고 ---------------------------------------------- */
h1 {  width: 10%; padding: 20px 0 8px 0;}
h1 img { width: 50%;} 

/* 네비----------------------------------------------- */
nav { width: 50%; }
nav > ul.gnb { padding-top: 28px; display: flex; justify-content: space-around;}
nav > ul.gnb > li { position: relative;  text-align: center; padding-bottom: 30px; width: 16.666%;}
nav > ul.gnb > li > a {  
    font-size: 17px; 
    color: black; 
    font-weight: 400; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    }
/* display: inline-block; */
nav > ul.gnb > li:hover > a { color: #777; }


nav ul.sub { 
    width: 100%;
    position: absolute; 
    top: 54px; left: 0;
    z-index: 888; 
    display: none;  
    text-align: center;
    font-size: 14px;

}
nav ul.sub li { background: #fff;}
nav ul.sub li a { padding: 14px 0; display: block;}
nav ul.sub li a:hover {  background: #000; color: #fff;}

.nav_bg { 
    /* background: rgba(0, 0, 0, 0.1); */
    background: #ffffff;
    width: 100%;
    height: 200px;
    position: absolute;
    top: 93px; 
    left: 0;
    z-index: 777;
    display: none;
}



/* 탑메뉴----------------------------------------------- */
.top_menu { width: 40%;  display: flex; justify-content: flex-end; padding-top: 28px;}
.top_menu li { padding: 0 15px;}
.top_menu li a { font-size: 12px; color: #616161;}
.top_menu li a:hover { color: #000000;}

.toggle { display: none;}


/* 480 서브-------------------------------------------------------- */

.nav_480 { 
    background: #ca1818;
    width: 0%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    padding-top: 60px;
    overflow-x: hidden;
    transition: 0.3s;
}

.nav_480 a {
    color: #fff;
    font-size: 18px;
    padding: 10px 0 10px 20px;
    display: block;
    font-size: 17px;
}

.nav_480 .closebtn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
}

.sns_480 { 
    display: flex;
    position: absolute;
    bottom: 0;
    left: 47%;
    transform: translate(-50%, -50%);
}

.sns_480 a i { font-size: 24px;}

ul.menu { width: 250px;}

/* 헤더 반응형---------------------------------------------------------------------------- */
@media (max-width:1220px){
    .header { width: 100%;}
}

@media (max-width:768px){
    #top_banner { display: none;}
    .header { flex-wrap: wrap;}
    .fixed-header { height: 112px;}
    h1 { width: 100%; padding: 20px 0 20px 15px; }
    h1 img { width: 20%;}
    nav { width: 100%; }
    nav > ul.gnb { margin-top: 0; background: #ca1818;}
    nav > ul.gnb > li { width: 20%; text-align: center;}
    nav > ul.gnb > li > a { color: #ffffff; font-size: 16px; padding: 10px 0; display: block;}
    nav > ul.gnb > li > a:hover { background: #ffcc00 ; color: #fff;}
    nav ul.sub { top: 44px;}
    nav ul.sub li a:hover {  background: #ffcc00; color: #fff;}

    .top_menu li { padding: 0 5px; font-size: 10px;}
    .top_menu li a { font-size: 10px; }
}

@media (max-width:480px){
    .fixed-header { height: 60px;}
    h1 { padding: 13px 0 10px 17px; }
    h1 img { width: 26%;}
    nav > ul.gnb {display: none;}
    .top_menu { display: none;}
    .toggle {
        display: block;
        position: absolute;
        top: 24px; right: 10px;
    }
    .toggle i { font-size: 1.5rem;}
}

/* 배너------------------------------------------------------- */

/* 1. 배너 전체 컨테이너 */
.banner {
    position: relative;
    width: 100%;
    height: 811px; /* 배너 높이를 시원하게 800px로 설정 */
    background-color: #000;
    overflow: hidden;
}

/* 2. 슬라이더 이미지 설정 */
.slider {
    width: 100%;
    height: 100%;
}

.slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* JS 작동 전까지 숨김 */
}

.slider img:first-child {
    display: block; /* 첫 번째 이미지만 노출 */
}

/* 3. 배너 컨트롤러 (우측 하단) */
.banner-controls {
    position: absolute;
    bottom: 60px;
    right: 80px;
    display: flex;
    align-items: center;
    gap: 40px; /* 숫자와 화살표 사이를 더 넓게 해서 여유 정렬 */
    z-index: 999;
}

/* 4. 숫자 박스 (Pure White & Gray) */
.num-box {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Playfair Display', serif; /* 세리프체 필수! */
    color: #fff;
}

.num-box .current {
    font-size: 32px;
    font-weight: 500;
    color: #ffffff; /* 현재 번호도 화이트로 깔끔하게 */
    letter-spacing: -1px;
}

.num-box .line {
    width: 50px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3); /* 아주 얇고 은은한 선 */
}

.num-box .total {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4); /* 전체 숫자는 흐리게 처리 */
}

/* 5. 화살표 버튼 (Black & White) */
.next-arrow {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 마우스 올렸을 때 효과: 화살표가 선명해지면서 이동 */
.next-arrow:hover {
    transform: translateX(15px);
    opacity: 0.7;
}

.next-arrow svg path {
    stroke: #ffffff; /* 화살표 선 흰색 */
    stroke-width: 1.2px; /* 선을 더 얇게 해서 세련미 강조 */
}

/* 6. (선택사항) 배너 하단에 어두운 그라데이션 깔기 */
/* 이미지가 너무 밝아서 글자가 안 보일 때를 대비한 안전장치입니다 */
.banner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    pointer-events: none; /* 클릭 방해 금지 */
}

/* 틀---------------------------------------------------------- */

main { width: 100%;}
.contents_wrap_1 { width: 100%; margin-top: 120px; }

.contents { position: relative; width: 1620px;  margin: 0 auto; }

/* 베스트--------------------------------------------------------- */

.sub_title {
    width: 100%;
    text-align: left;
    color: #000;
    font-size: 40px;
    font-weight: 200;
    padding-bottom: 20px;
    /* font-family: 'Playfair Display', serif;
    font-style: italic; */
    font-family: 'ReperepointSpecialItalic'; 
}
.sub_tag { 
    display: flex;
    font-size: 16px;
    padding-bottom: 30px;
    gap: 20px;
}
.sub_tag li { color: #aaa;}
.sub_tag li a { color: #aaa; font-size: 16px;}
.sub_tag li a:hover { color: #000;}

/* ★ 핵심: 액티브 상태 스타일 */
.sub_tag li.active a {
    color: #000;      /* 글자색을 진한 검정으로 */
}

/* 마우스 올렸을 때도 검정색으로 변하게 하고 싶다면 추가 */
.sub_tag li a:hover {
    color: #000;
}


/* --- 위치 스타일 --- */
.more { 
    position: absolute;
    top: 65px; 
    right: 0px;
    z-index: 10;
}

/* --- 1번 스타일: MORE 텍스트 + 플러스 아이콘 --- */
.more a { 
    display: flex;
    align-items: center;
    gap: 8px; /* 글자와 아이콘 사이 간격 */
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 플러스(+) 모양을 만드는 가상 요소 */
.more a::after {
    content: '+';
    font-size: 20px;
    font-weight: 300; /* 선을 얇게 해서 세련되게 표현 */
    display: inline-block;
    transition: transform 0.4s ease, color 0.3s ease;
    line-height: 1;
}

/* --- 호버 효과 --- */
.more a:hover {
    color: #c28479; /* 글자 색상 변경 */
}

.more a:hover::after {
    transform: rotate(90deg); /* 플러스 아이콘이 90도 회전 */
    color: #c28479; /* 아이콘 색상 변경 */
}




.best_box { 
    display: grid; 
    gap: 40px; 
    grid-template-columns: repeat(4, 1fr); 
    text-align: center;
}

/* .best img { border-radius: 20px;} */
.best_name { 
    text-align: left;
    font-size: 16px;
    color: #000;
    font-weight: 400;
    padding: 25px 0 10px 0;
}
.best_price { 
    font-size: 16px;
    color: #000;
    font-weight: 500;
    padding-top: 15px;
    text-align: left;
}

/* 이미지 영역 */
.best_img{
    position:relative;
    overflow:hidden;
}

.best_img img{
    width:100%;
    display:block;
}

/* 오버레이 */
.overlay{
    /* border-radius: 20px; */
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.60);

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

    opacity:0;
    transition:0.35s;
}

/* hover */
.best_img:hover .overlay{
    opacity:1;
}

/* 제품명 */
.overlay_text{
    color:#fff;
    font-size:18px;
    margin-bottom:26px;
    text-align:center;
}

/* 버튼 */
.overlay_more a{
    color:#fff;
    border:1px solid #fff;
    padding:8px 16px;
    font-size:12px;
    letter-spacing:1px;
    transition:0.3s;
}
.overlay_more a:hover{
    background:rgba(255,255,255,0.2);
    /* background: #fff;
    color: #000; */
}



/* 컬러닷---------------------------------- */
.color_dot, .color_dot_2, .color_dot_3, .color_dot_4 {
    display:flex;
    gap:10px;
}
.color_dot li, .color_dot_2 li, .color_dot_3 li, .color_dot_4 li{
    width:18px;
    height:18px;
    border-radius:50%;
}
.color_dot li:nth-child(1){
    background:#fde2cd;
}
.color_dot li:nth-child(2){
    background:#fed9bf;
}
.color_dot li:nth-child(3){
    background:#fbd5b1;
}
.color_dot li:nth-child(4){
    background:#f9c9a3;
}


.color_dot_2 li:nth-child(1){
    background:#fbead8;
}
.color_dot_2 li:nth-child(2){
    background:#f9e2d0;
}
.color_dot_2 li:nth-child(3){
    background:#f7d9bf;
}
.color_dot_2 li:nth-child(4){
    background:#f5d9c7;
}


.color_dot_3 li:nth-child(1){
    background:#f9cfc6;
}
.color_dot_3 li:nth-child(2){
    background:#f9e0cb;
}
.color_dot_3 li:nth-child(3){
    background:#f7d7be;
}
.color_dot_3 li:nth-child(4){
    background:#f2d5b9;
}


.color_dot_4 li:nth-child(1){
    background:#ffa99c;
}
.color_dot_4 li:nth-child(2){
    background:#f7cfef;
}
.color_dot_4 li:nth-child(3){
    background:#e06589;
}
.color_dot_4 li:nth-child(4){
    background:#ee8a76;
}





/* 신상------------------------------------------------ */

.new_wrap_box { padding-top: 20px; }
.new_wrap { display: flex; }
.new_2 { position: relative; }

.new_2_text { 
    position: absolute; 
    top: 80%; left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center;
    width: 100%; /* 텍스트 중앙 정렬을 위해 너비 확보 */
}

.new_text { 
    font-size: 20px;
    color: #c28479;
}
.new_name { 
    font-size: 22px;
    color: #000;
    font-weight: 500;
    padding: 20px 0 10px 0;
}
.new_price {
    font-size: 22px;
    color: #000;
    font-weight: 500;
}
.view_more { 
    padding-top: 30px;
}

/* 1. 기본 버튼 스타일 */
.view_more a { 
    background: #000;
    font-size: 14px;
    color: #fff;
    padding: 10px 25px; 
    display: inline-flex; 
    align-items: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease; /* 부드러운 전환 */
}

/* 2. 평상시 숨겨진 화살표 */
.view_more a::after {
    content: '→';
    position: absolute;
    right: -20px; /* 버튼 밖으로 밀어둠 */
    opacity: 0;
    transition: all 0.3s ease;
}

/* 3. ★ 핵심: 버튼(a태그)에 직접 호버했을 때만 작동 */
.view_more a:hover {
    background: #c28479; /* 배경색 변경 */
    padding-right: 45px; /* 화살표가 들어올 공간 확보 */
}

.view_more a:hover::after {
    right: 15px; /* 화살표 등장 */
    opacity: 1;
}

/* 세일--------------------------------------------------------- */

.sale_box { 
    display: grid; 
    gap: 45px; 
    grid-template-columns: repeat(3, 1fr); 
    text-align: center;
}
/* .sale img { border-radius: 20px;} */
.sale_name { 
    text-align: left;
    font-size: 16px;
    color: #000;
    font-weight: 400;
    padding: 25px 0 10px 0;
}
.price_box { display: flex; text-align: left; gap: 20px; padding-top: 20px;}
.sale_percent { font-size: 18px; color: #dd0000; font-weight: 500;}
.sale_price_1 { text-decoration: line-through; font-size: 16px; color: #999;}
.sale_price_2 { font-size: 18px; color: #000; font-weight: 500;}
/* .sale_price { 
    font-size: 16px;
    color: #000;
    font-weight: 500;
    padding-top: 15px;
    text-align: left;
} */


/* 제품명 */
.sale_overlay_text{
    color:#fff;
    font-size:20px;
    margin-bottom:28px;
    text-align:center;
}

/* 버튼 */
.sale_overlay_more a{
    color:#fff;
    border:1px solid #fff;
    padding:8px 16px;
    font-size:14px;
    letter-spacing:1px;
    transition:0.3s;
}
.sale_overlay_more a:hover{
    background:rgba(255,255,255,0.2);
}




/* 세일 컬러닷----------------------- */

.s_color_dot, .s_color_dot_2, .s_color_dot_3 {
    display:flex;
    gap:10px;
}
.s_color_dot li, .s_color_dot_2 li, .s_color_dot_3 li {
    width:18px;
    height:18px;
    border-radius:50%;
}
.s_color_dot li:nth-child(1){
    background:#fde2cd;
}
.s_color_dot li:nth-child(2){
    background:#fed9bf;
}
.s_color_dot li:nth-child(3){
    background:#fbd5b1;
}
.s_color_dot li:nth-child(4){
    background:#f9c9a3;
}


.s_color_dot_2 li:nth-child(1){
    background:#fc2e16;
}
.s_color_dot_2 li:nth-child(2){
    background:#c9002a;
}
.s_color_dot_2 li:nth-child(3){
    background:#c90029;
}
.s_color_dot_2 li:nth-child(4){
    background:#c5527d;
}
.s_color_dot_2 li:nth-child(5){
    background:#ee597e;
}

.s_color_dot_3 li:nth-child(1){
    background:#f3ded8;
}

/* 원터픽--------------------------------------------------- */

/* 전체 레이아웃 가로 넘침 방지 */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 섹션 자체에도 안전장치 추가 */
.winter_box_wrap {
    width: 100%;
    overflow: hidden;
}

.winter_box_wrap { 
    display: grid; 
    gap: 45px; 
    grid-template-columns: repeat(3, 1fr); 
    text-align: center;
    padding-top: 20px;
}
.winter_pick { padding-top: 30px; text-align: left;}
.winter_pick_list { display: flex; border-bottom: 1px solid #ddd; padding: 30px 0; align-items: center;}
.winter_pick_list:last-child{border-bottom:none;}
.winter_pick_info { padding-left: 45px;}
.winter_pick_name { font-size: 16px; color: #000; font-weight: 500;}
.winter_pick_price { font-size: 16px; color: #000; font-weight: 500;}



/* .winter_pick_img img{
    transition:0.4s;
}

.winter_pick_name{
    transition:0.3s;
}

.winter_pick_list:hover .winter_pick_img img{
    transform:scale(1.05);
}

.winter_pick_list:hover .winter_pick_name{
    transform: scale(1.05);
} */

.winter_shop{
    margin-top:10px;
    opacity:0;
    transform:translateY(5px);
    transition:0.3s;
}

.winter_shop a{
    font-size:12px;
    border-bottom:1px solid #000;
}

.winter_pick_list:hover .winter_shop{
    opacity:1;
    transform:translateY(0);
}

.winter_pick_img img{
    transition:0.4s;
}

.winter_pick_list:hover .winter_pick_img img{
    transform:scale(1.05);
}



/* 윈터픽 컬러닷---------------------------------- */
.w_color_dot, .w_color_dot_2, .w_color_dot_3, .w_color_dot_4, .w_color_dot_5, .w_color_dot_6 {
    display:flex;
    gap:8px;
    padding: 10px 0 15px 0;
}
.w_color_dot li, .w_color_dot_2 li, .w_color_dot_3 li, .w_color_dot_4 li, .w_color_dot_5 li, .w_color_dot_6 li {
    width:16px;
    height:16px;
    border-radius:50%;
}
.w_color_dot li:nth-child(1){
    background:#fde2cd;
}
.w_color_dot li:nth-child(2){
    background:#fed9bf;
}
.w_color_dot li:nth-child(3){
    background:#fbd5b1;
}
.w_color_dot li:nth-child(4){
    background:#f9c9a3;
}


.w_color_dot_2 li:nth-child(1){
    background:#fbead8;
}
.w_color_dot_2 li:nth-child(2){
    background:#f9e2d0;
}
.w_color_dot_2 li:nth-child(3){
    background:#f7d9bf;
}
.w_color_dot_2 li:nth-child(4){
    background:#f5d9c7;
}


.w_color_dot_3 li:nth-child(1){
    background:#f09a9b;
}
.w_color_dot_3 li:nth-child(2){
    background:#a89cca;
}


.w_color_dot_4 li:nth-child(1){
    background:#303032;
}
.w_color_dot_4 li:nth-child(2){
    background:#4e4a41;
}
.w_color_dot_4 li:nth-child(3){
    background:#74574f;
}
.w_color_dot_4 li:nth-child(4){
    background:#eeacb0;
}
.w_color_dot_4 li:nth-child(5){
    background:#efe1d4;
}


.w_color_dot_5 li:nth-child(1){
    background:#ffcfd7;
}
.w_color_dot_5 li:nth-child(2){
    background:#fd6343;
}
.w_color_dot_5 li:nth-child(3){
    background:#ec1841;
}
.w_color_dot_5 li:nth-child(4){
    background:#e9425e;
}
.w_color_dot_5 li:nth-child(5){
    background:#c7434f;
}

.w_color_dot_6 li:nth-child(1){
    background:#e9192a;
}
.w_color_dot_6 li:nth-child(2){
    background:#f60e14;
}
.w_color_dot_6 li:nth-child(3){
    background:#d70315;
}
.w_color_dot_6 li:nth-child(4){
    background:#77051e;
}

/* 이벤트--------------------------------------------------------------- */

/* --- 기존 레이아웃 스타일 --- */
.event_box_wrap { 
    padding-top: 20px;
    display: grid; 
    gap: 45px; 
    grid-template-columns: repeat(2, 1fr); 
    text-align: center;
}

.event_name { 
    font-size: 20px; 
    color: #000; 
    font-weight: 500;
    padding-top: 40px;
}

.event_text { 
    font-size: 16px;
    color: #828282;
    padding: 15px 0 30px 0;
}

/* --- 이미지 컨테이너 및 호버 애니메이션 --- */
.event {
    position: relative;
    overflow: hidden;
}

.event img {
    width: 100%;
    display: block;
    transition: 0.45s;
}

/* 이미지 박스에 마우스 올렸을 때만 확대 */
.event:hover img {
    transform: scale(1.04);
}

/* 빛 오버레이 */
.event::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    opacity: 0;
    transition: 0.35s;
    pointer-events: none; /* 클릭 간섭 방지 */
}

.event:hover::after {
    opacity: 1;
}

/* --- 버튼 기본 스타일 --- */
.event_more a { 
    display: inline-flex;  /* inline-block보다 정렬에 유리 */
    align-items: center;
    justify-content: center;
    background: #000;
    font-size: 14px;
    color: #fff;
    padding: 10px 25px;    /* 좌우 패딩 충분히 */
    text-decoration: none;
    position: relative;    /* 화살표 위치의 기준 */
    overflow: hidden;      /* 나가는 화살표 숨김 */
    transition: all 0.3s ease;
    z-index: 1;            /* 가상 요소보다 위에 있도록 */
}

/* --- 화살표 가상 요소 (평소 상태) --- */
.event_more a::after {
    content: '→';
    position: absolute;
    right: 5px;            /* 살짝 보이게 테스트하려면 10px로 바꿔보세요 */
    opacity: 0;            /* 평소엔 투명하게 */
    transform: translateX(20px); /* 오른쪽으로 밀어두기 */
    transition: all 0.3s ease;
}

/* --- 버튼 호버 시 (버튼에 직접 올렸을 때) --- */
.event_more a:hover {
    background: #c28479;
    padding-right: 45px;   /* 화살표가 들어올 공간 확보 */
}

.event_more a:hover::after {
    opacity: 1;            /* 나타나기 */
    transform: translateX(0); /* 제자리로 이동 */
    right: 15px;           /* 안쪽 위치 고정 */
}
/* 풋터------------------------------------------------------------------------ */

footer { width: 100%; background: #2f2f2f; margin-top: 200px; padding: 70px 0 100px 0;}
.footer { width: 1620px; margin:0 auto;}
.footer_top { display: flex;}

.f_logo { width: 10%;}
.call { 
    padding-top: 3px;
    width: 70%;
    color: #ddd;
    font-size: 20px;
    font-family: 500;
}
.call_number { 
    font-weight: 600;
    font-size: 30px;
    display:inline-block;
    padding: 15px 0;
}
.call_time { 
    font-size: 14px;
    font-weight: 400;
}

.sns { 
    display: flex; 
    width: 20%;
    gap: 15px;
    justify-content:flex-end;
}
.sns a{
    width:35px;
}

.footer_line{
    width:1620px;
    height:1px;
    background:#555;
    margin:40px auto;
}

.copy_1 { 
    color: #ddd;
    font-weight: 700;
    padding-bottom: 20px;
}
.footer_info { 
    color: #ddd;
    font-size: 14px;
    line-height: 26px;
}