@charset "utf-8";
@import url('font.css');

:root {
    --engFont: 'Lexend-VariableFont_wght', 'Noto Sans KR', sans-serif;
    --koFont: 'Pretendard', 'Noto Sans KR', sans-serif;
    /* 색상 팔레트 */
    --color-primary: #035bda;         
    --color-secondary: #FFE68C;       
    --color-text-dark: #1f2937;       
    --color-navy: #1c314a;            
    --color-white: #ffffff;           
    --color-light-gray: #e5e7eb;     
    --color-bg-light: #f9fafb;        
    --color-bg-soft: #f3f4f6;         
    --brown-dark: #301900;           
    --brown-medium: #8B5A3C;          
    --brown-light: #D4A574;           

    /* 그림자 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/* 초기화 */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
ul,li{
    list-style: none;
}
img{
    vertical-align: top;
}
a{
    color:var(--color-text-dark);
    text-decoration: none;
    transition: color 0.2s ease;

}
/* typoghraphy */
.sec-title{
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    font-family: var(--koFont);
    letter-spacing: -0.025em; 
    line-height: 1.3;
    word-break: keep-all;
    color: var(--color-navy); 
    text-align: center;
    padding-bottom: 1.2rem;
    position: relative; 
}

/* 중간 라인 */
.sec-title::after {
    content: "";
    display: block;
    width: 20px; 
    height: 5px; 
    background-color:#333;
    position: absolute;
    left: 50%; 
    transform: translateX(-50%); 

}
.sec-title p {
font-size: 2.25rem;
    font-weight: 700;
    font-family: var(--koFont);
    letter-spacing: -0.025em;
    line-height: 1.3;
    word-break: keep-all;
    color: var(--color-navy);
    text-align: center;
    position: relative;
}


h3{
    font-size: 2rem; /* 32px */
    font-weight: 700;
    font-family: var(--koFont);
    letter-spacing: -0.025em;
    line-height: 1.3;
    word-break: keep-all;
    color: var(--color-navy);
    padding-bottom: 0.75rem; 
}
h4{
    font-size: 1.125rem; /* 18px */
    font-family: var(--koFont);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.4;
    word-break: keep-all;
    color: var(--color-text-dark);
    padding-top: 0.25rem; /* 4px */
    text-align: center;
}
h5{
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    letter-spacing: -0.015em;
    word-break: keep-all;
    color: var(--color-text-dark);
}
p{
    font-size: 1rem; /* 16px */
    font-family: var(--koFont);
    padding-bottom: 0.5rem; /* 8px */
    text-align: center;
    line-height: 1.6;
    color: var(--color-text-dark);
}
.txt{
    font-size: 1rem;
    letter-spacing: -0.01em;
    line-height:1.8;
    word-break:keep-all;
    color: var(--color-text-dark);
}

html,body{
    font-size: 16px;
    color: var(--color-text-dark);
    font-family: var(--koFont);
    line-height: 1.5;
    background-color: var(--color-bg-light); 
    /* overflow: hidden;   */
    height: 100vh;
}

::-webkit-scrollbar{
    display: none;
}
/*======= 공통클래스========== */
.container{
    max-width: 1500px; 
    /* padding-left: 1.5rem; 
    padding-right: 1.5rem; */
    margin:0 auto;
    width: 100%;
}
.com-padding{ 
    padding-top: 6rem; 
    padding-bottom: 6rem; 
}

/* ======풀페이지======= */
.full-right {
    position: fixed;
    right:15px;
    top:50%;
    transform: translateY(-50%);
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 12px; 
}
.full-right li {
    position: relative;
    width: 25px; 
    height: 25px;
}
/* - 작은 점  또는 선 */
.full-right li::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
    width: 2px;
    height: 18px; 
    /* border-radius: 50%; */
    background: var(--color-light-gray);
    transition: all 0.3s ease-in-out;
}
/* 섹션 번호 */
 .full-right li a span {
    position: absolute;
    right:10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem; 
    font-weight: 500;
    color: var(--color-light-gray); 
    opacity: 0; 
    transition: all 0.3s ease;
    width:50px; 
    text-align: right;
    white-space: nowrap; 
} 
.full-right li.active::before,
.full-right li:hover::before {
    background: var(--color-primary); 
    width: 8px; 
    height: 8px;
    border-radius: 50%;

}
/* 옆에 글씨 */
.full-right li.active a span,
.full-right li:hover a span {
    color: var(--color-primary); 
    opacity: 1;
    font-weight: 700; 
    left: -45px; 
} 
.full-right li.active a span {
    opacity: 1;
    left: -45px;
}
/* ========. 퀵메뉴.  ======= */
.quick {
    position: fixed;
    right: 1.5rem; 
    bottom: 1.5rem; 
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; 
}
.quick .box{
    width: 4rem; 
    height: 4rem; 
    border-radius: 50%;
    background-color: rgba(255,255,255,0.9);
    box-shadow: var(--shadow-md); /* 중간 그림자 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.quick .box:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.quick .box a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap:2;
}
.quick .box a img{
    width: 1.2rem; 
    height: 1.2rem;
}
.quick .box a p{
    font-size: 0.75rem; /* 12px */
    color: var(--color-text-dark);
}
/* ========모바일 메뉴 영역 ===============*/ 
.mb-menu{
    position: fixed;
    width: 100%;
    height: 100%;
    right: -100%; 
    /* right: 0; */
    top:0;
    z-index: 999;
    background-color: #cfe9ff;;
    overflow-y: auto;
    transition: all .2s ease-in;
}
.mb-menu.active{
    right: 0;
}
.mb-menu .mb-menu-title{
    display: flex;
    justify-content: flex-end;
    padding-bottom: 25px;
}
 /* 닫기버튼 */
.mb-menu .mb-menu-title .mb-btn-close{
    display: block;
    width: 40px;
    height:40px;
    margin: 20px 20px;  
}
.mb-menu .mb-menu-title .mb-btn-close span{
    font-size: 40px;
    color: #222;
}
/* 밑에 줄 */
.mb-menu .mb-main-menu{}
.mb-menu .mb-main-menu > li{
    border-bottom: 1px solid var(--color-text-dark);
}
.mb-menu .mb-main-menu > li .mb-menu-list{
    display: flex;
    justify-content: flex-start;
}
.mb-menu .mb-main-menu > li .mb-menu-list{
    display: block;
    padding: 15px 45px;
    font-size: 20px;
    font-weight: 700;
    color:var(--color-text-dark);
    letter-spacing: -0.4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mb-menu .mb-main-menu > li .mb-menu-list:hover{
    color:var(--color-primary);
}
/* 화살표모양 */
.mb-menu .mb-main-menu > li .mb-menu-list span{
    /* position: absolute;
    left:0;
    top: 50%;
    transform-origin: center; */
    fill:var(--color-text-dark);
    opacity: 1;
    font-size: 30px;
    transition: all .3s linear;
    padding-left: 5px;
}
.mb-menu .mb-main-menu > li.active .mb-menu-list span{
    color:var(--color-primary);
    transform: rotate(90deg);
}
/* 모바일 서브메뉴 */
.mb-menu .mb-main-menu > li .mb-submenu {
    display: none;
    padding-bottom: 20px;
}
.mb-menu .mb-main-menu > li .mb-submenu li {
    display: block;
    padding: 10px 0;
    list-style: none;
    padding-left: 50px;
}
.mb-menu .mb-main-menu > li .mb-submenu li a {
    font-size: 16px;
    letter-spacing: -0.466667px;
    line-height: 1.2;
}
.mb-menu .mb-main-menu > li.active .mb-submenu{
    display: block;
}
/* =======header영역=========== */
.header{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height: 4.5rem; /* 72px */ 
    z-index: 99; 
    background-color: transparent;
    /* background-color: rgba(255, 255, 255, 0.1); */
    /* backdrop-filter: blur(4px); */
    transition: all 0.3s ease-in-out; 
    padding: 0 30px;
}
.header.down{
    height: 18rem; 
    background-color: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(8px); 
    box-shadow: var(--shadow-sm); 
    padding: 0px 30px;
}
/* 중간 파랑 라인 */
.header::before{
    content:'';
    display:block;
    width:91%;
    height:1px;
    background-color:var(--color-primary);
    position:absolute;
    top:72px;
    left:50px;
    opacity:0;
    transition:all .4s;
    padding: 0 30px; 
}
.header.down::before{
    opacity: 1;
}

/* Header Container */
.header-container{
    display:flex;
    justify-content:space-between;
    align-items: center;
    position: relative;
    height: 4.5rem; 
    max-width: 1800px; 
    margin: 0 auto;
}

/* 회사로고 */
.header .logo a {
    width: 3.75rem; 
    display: block;
    position: relative; 
    height: 100%;
    display: flex;
    align-items: center;
}
.header .logo a img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease; 
}
.header .logo a .logo { opacity: 1; }
.header .logo a .logo-color { opacity: 0; }
.header.down .logo a .logo { opacity: 0; }
.header.down .logo a .logo-color { opacity: 1; }

/* 메인 메뉴 */
.header nav .mainMenu{
    display: flex;
    align-items: center;
    gap: 5rem; 
}
.header nav .mainMenu >li{
    display:inline-block;
    position:relative;
    padding-left: 0px;
}

.header nav .mainMenu >li > a{
    display:block;
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
    color: var(--color-primary);
    line-height: 4.5rem; /* 72px */
    transition:all .2s ease;
    position:relative;
}

/* 서브메뉴 */
.header nav .mainMenu >li .submenu{
   position:absolute;
   left:50%;
   top: 100%;
   width:100%;
   z-index:10;
   visibility: hidden; 
   opacity: 0;
   padding-top: 1rem; 
   transition: opacity 0.3s ease, visibility 0.3s ease; 
}
.header nav .mainMenu > li:hover > a {
    color: var(--color-primary) !important;
}
.header nav .mainMenu > li:hover > a::after {
    width: 100%;
}

/* 헤더다운 */
.header.down nav .mainMenu > li > a {
    color: var(--color-navy) !important;
}

/* 헤더다운시 중간선 */
.header.down nav .subnMenu >li > a::after {
    content: '';
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    bottom:20px;
    height: 1px;
    width: 700px;
    transition: all 0.3s ease;
}
.header.down nav .mainMenu >li>.submenu{
   visibility: visible;
   opacity: 1;
    position:absolute;
   left:0px;
   width:100%;
   z-index:10;

}
.header nav .mainMenu >li .submenu li{
    padding: 0 0  16px;
} 
.header nav .mainMenu >li .submenu li a{
    display:block;
    font-size: 0.95rem; /* 15px */ 
    color:var(--color-text-dark);
    line-height:1.4;
    transition:color .2s ease;
}
.header.down nav .mainMenu > li .submenu li:hover a{
    color:var(--color-primary);
}

/* ---------로그인, 장바구니 아이콘 */
.header .icons{
    display: flex;
    align-items: center;
    gap:1rem; /* 16px */
}
.header .icons a{
    display: block;
    width: 1.75rem; /* 28px */ 
    height: 1.75rem; /* 28px */
    position: relative;
}
.header .icons a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}
.header .icons a .icon { opacity: 1; } 
.header.down .icons a .icon{ opacity: 0; }


/* -----햄버거버튼---- */
.header .menuBtn{
    display:none;
    width: 40px;
    height: 40px;
    position: relative; 
}
.header .menuBtn span{
    position: absolute;
    width: 100%;
    height: 4px;
    background-color:var(--color-navy);
    left: 0;
}
.header .menuBtn span:nth-child(1){
    top:2px;
}
.header .menuBtn span:nth-child(2){
    top:11px;
}
.header .menuBtn span:nth-child(3){
    top: 20px;
}

/* ========1. 비쥬얼영역=========== */
/* visual영역 */
.visual{
    width:100%;
    /* height:100vh; */
    position:relative;
}

/* ----- 1-1 비쥬얼 스와이퍼----- */
.visual .sw-visual{
    width:100%;
    /* height:100vh; */
}
.visual .sw-visual .swiper-slide{
}
.visual .sw-visual .swiper-slide .visual-bg-pc{
    width:100%;
    height:100vh;
    position: relative;
}
.visual .sw-visual .swiper-slide .visual-bg-pc .bg-video{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width:100%;
    min-height:100vh;
    width: auto;
    z-index: -1;
    object-fit: cover;
    position: relative;
}
.visual .sw-visual .swiper-slide .visual-bg-pc img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* 비디오 위에 글씨. */
.visual .sw-visual .swiper-slide .visual-bg-pc .main-ment {
    font-size: 80px;
    color: var(--color-white);
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 6rem;
    z-index: 9;  
    animation : color 1s linear infinite;
}
@keyframes color {
    0% {
        color:var(--color-white);
        opacity: 0;
    }
    100%{
        color:var(--color-primary);
        opacity: 1;
    }
}
.visual .sw-visual .swiper-slide .visual-bg-mb{
    display:none;
}

.visual .sw-visual .swiper-slide .visual-bg-mb img{}

/* =====================2.메뉴영역 ==================*/
.menu {
    width: 100%;
    /* height: 100vh; */
    position: relative;
    background-color:#cfe9ff;
}
.menu .container{
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
}


/* ---메뉴 섹션 탭 (라인*/
.menu .menu-tab{ 
    max-width: 600px; 
    margin: 1rem auto 1rem auto; 
}     
.menu .menu-tab ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
.menu .menu-tab ul li{
    color: var(--color-text-dark);
}
.menu .menu-tab ul li a{
    display: block;
    padding: 0.75rem 0.5rem; 
    font-size: 1.125rem; 
    font-weight: 500;
    color: var(--color-text-dark);
    position: relative;
    transition: all 0.2s ease;
}
/* 탭메뉴 선 */
.menu .menu-tab ul li a::after {
    content: '';
    position: absolute;
    bottom: -1px; 
    left: 0;
    width: 0;
    height: 3px;
    background-color:var(--color-primary);
    transition: width 0.3s ease;
}
.menu .menu-tab ul li.active a{
}
.menu .menu-tab ul li a:hover { 
   color:var(--color-primary);
}
.menu .menu-tab ul li.active a::after {
    width: 100%;
}

 /*---- 메뉴 슬라이드 공통 스타일*/
.menu .sw-menu {}
/* 스와이버 기본 상태*/
.menu .sw-menu{
    width: 100%;
    backdrop-filter: blur(3px); 
    box-shadow: var(--shadow-xl);
    border-radius: 1rem; 
    position: relative;

}
/* 메뉴 스와이퍼 내비게이션*/
.menu .menu-contents{
    position: relative;
    padding: 0 1rem; /* 내비 버튼 공간 확보 */
}

.menu .sw-menu .swiper-wrapper .swiper-slide{
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    color:var(--cream-ui);
    background-color: var(--color-white); 
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    border-radius: 10px;
    border: 2px solid transparent;
}

.menu .sw-menu .swiper-wrapper .swiper-slide:hover{
}

/* 호버시 파랑 테두리 */
/* .menu .sw-menu .swiper-wrapper .swiper-slide:hover{
    border: 2px solid var(--color-primary);
} */

.menu .sw-menu .swiper-wrapper .swiper-slide .menu-img{
    aspect-ratio: 1 / 1
}

.menu .sw-menu .swiper-wrapper .swiper-slide .menu-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.menu .sw-menu .swiper-wrapper .swiper-slide .menu-img:hover{
    scale: 1.02
}    

/* 밑에 타이틀부분 */
.menu .sw-menu .swiper-wrapper .swiper-slide .menu-title {
    padding:10px;
    text-align: center;
    width: 100%;
}
.menu .sw-menu .swiper-wrapper .swiper-slide .menu-title h4{
    font-size: 1.125rem; 
    padding-bottom: 0.3rem; 
    color: var(--color-navy);
}
.menu .sw-menu .swiper-wrapper .swiper-slide .menu-title h5{
    font-size: 1rem; 
    color: var(--color-primary); 
}
 /* 내비게이션 */
.swiper-btn-prev{
    position: absolute;
    top:50%;
    left:0px;
    width: 50px;
    height: 50px;
    background: var(--color-white);
    border: 1px solid var(--color-primary); 
    border-radius: 50%;
    z-index: 9;
}
.swiper-btn-next {
    position: absolute;
    top:50%;
    width: 50px;
    height: 50px;
    right:0px;
    background: var(--color-white); 
    border: 1px solid var(--color-primary);
    border-radius: 50%; 
    z-index: 9;
}

.swiper-btn-prev:hover, .swiper-btn-next:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
/* 안에 화살표 */
.swiper-btn-prev span{
    color: var(--color-primary);
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    height: 22px;
    padding-left: 5px;
}
.swiper-btn-next span {
    color: var(--color-primary);
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    height: 22px;
}    
/* 회살표 호버 */
.swiper-btn-prev:hover span, .swiper-btn-next:hover span {
    color: var(--color-white);
}

/*  ------각각 스와이퍼----*/
.menu #coffee{
    position: relative;
    /* overflow: visible; */
}
.menu .sw-menu .swiper-wrapper{}

/*  ======음료 스와이퍼 부분 전체*/
.menu #beverage{
    position: relative;
}
/*  ====== 아이스크림 스와이퍼 부분 전체*/
.menu #icecream{
   position: relative;
}
/*  ======디저트 스와이퍼 부분 전체*/
.menu #dessert{
    position: relative;
}

/* ==============3. 원두섹션================== */
.bean {
    width: 100%;
    /* height: 100vh; */
    margin: 0 auto;
    position: relative;
    background:#ffffff;
}


/* ----3-2.원두 탭메뉴-----*/
.bean .bean-tab{
    width: 200px;
    margin: 20px auto;
}
.bean .bean-tab ul{
    display: flex;
    justify-content: space-between;
}
.bean .bean-tab ul li a{
    text-decoration: none;
    padding: 0.6rem 0.25rem; 
    font-size: 1rem; 
    color: var(--color-text-dark);
    position: relative; /* ::after의 기준점 */
    font-weight: 500;
    transition: color 0.3s;
}
/* 탭 버튼 호버 */
.bean .bean-tab ul li a:hover {
    color: var(--color-primary); 
}
/* 탭 버튼 호버 시 밑줄 효과 */
.bean .bean-tab ul li a:hover::after,
.bean .bean-tab ul li.active a::after { 
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px; 
    width: 100%;
    height: 3px;
    background-color: var(--color-primary); 
    border-radius: 2px;
}
/* 탭 버튼 활성화 시 ) */
.bean .bean-tab ul li.active a{
    color: var(--color-primary); 
    font-weight: 700;
}

.bean .sw-bean #signature{
    box-shadow: var(--shadow-md); 
    border-radius: 12px; 
    padding: 20px 30px; 
    background-color:var(--color-white);
}
/* ====== 원두 전체스와이퍼 부분 (시그니처/오리지널 공통) =====*/
.sw-bean, .sw-ori-bean {
    width: 100%;
    /* height:100%; */
    position: relative;
    /* padding: 15px 0; */
    box-sizing: border-box;
}
.bean .swiper-wrapper {
}
/* 각각 1개씩 슬라이드  */
.bean .swiper-slide {
    width: 100%;
    cursor: pointer;
    box-shadow: 0 0 0 1px #e0e0e0; 
    border-radius: 10px; 
    background-color: var(--color-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bean .swiper-slide:hover {
    transform: translateY(-7px); 
    box-shadow: var(--shadow-lg), 0 0 0 1px #e0e0e0;
    z-index: 10;
}
/* 원두 이미지 각각 박스  */
.bean .swiper-slide .bean-img{
    width: 100%;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
    background-color:#ffffff;
     aspect-ratio: 1 / 1
    
}
/* 안에 이미지 */
.bean .swiper-slide .bean-img img{
    /* position: absolute;
    top: 0; 
    left: 0; */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: top;
}
/* 하단 텍스트 영역 */
.bean .swiper-slide .bean-title{
    width: 100%;
    /* height: 160px; */
    border-radius: 0; 
    text-align: center;
    padding: 15px 20px 20px 20px; 
    background-color: var(--color-white);
    position: relative;  ;   
}
.bean .swiper-slide .bean-title h4{
    font-size: 1.1rem;
    padding-bottom: 5px;
    text-align: left;
    color: var(--color-navy);
}
.bean .swiper-slide .bean-title p{
    text-align: left;
    color:#666;
    font-size: 0.9rem;
    margin-bottom: 2px;
}        
.bean .swiper-slide .bean-title .title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.bean .swiper-slide .bean-title .rate {
    color: orange;
    font-weight: bold;
    font-size: 0.9rem;
}
.bean .swiper-slide .bean-title h5{
    font-size: 1.1rem;
    text-align: left;
    font-weight: bold;
    color: var(--color-text-dark);
    margin-top: 10px;
}

/* ---오리지널 */
/* 원두 이미지 각각 박스  */
.bean .swiper-slide .bean-img{
    padding-bottom: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color:#ffffff;
}

/* =======4. 뉴스섹션=========== */
.news {
    width: 100%;
    /* height: 100vh; */
    position: relative;
    background-color: #cfe9ff;
    background-image: url('../images/whitewavebig.png');
    background-repeat: repeat-x;
    background-size: 0 bottom;
    animation: wave-slide 30s linear infinite; 
}
@keyframes wave-slide {
    from {
        background-position: 0 bottom;
    }
    to {
        background-position: 100% bottom; 
    }
}
.news .container{
    /* height: 100vh;
    margin: 0 auto; */
}

.news .title .h3{
  
}
.news .title p{
    font-size: 20px;
    color: #222;
    text-align: center;
}
.news .grid{
    display: grid;
    grid-template-columns: 500px 1fr;
    padding:30px 30px;
    gap:10px;
    display: flex;
    justify-content:center;
    align-items: center;
}
.news .grid .news-images{
    display: grid;
    gap: 74px;
}
.news .grid .news-images .news-img-box{
    width: 100%;
    height: 190px;
    /* padding-top: 30px; */
    padding-right: 50px;
}
.news .grid .news-images .news-img-box a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 뉴스 */
.news .grid .news-lists{
    width: 600px;
    display: grid;
    gap: 90px;
    padding-right: 20px;
}
.news .grid .news-lists .newspart{
    display: grid;
    gap:5px;
}
.news .grid .news-lists .news-title{
    display: flex;
    justify-content: space-between;
}
.news .grid .news-lists .label{
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 5px;
    text-align: left;
}
.news .grid .news-lists p{
    font-size: 1rem;
    color: var(--color-text-dark);
}
.news .grid .news-lists .news-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #301900;
    color: #333;
    position: relative;
    transition: all 0.2s ease-out;
}
.news .grid .news-lists .news-item:hover {
    background-color: rgba(255, 255, 255, 0.7); 
    transform: translateY(-1px); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); 
    border-color: transparent; 
}
.news .grid .news-lists .news-item:active {
    transform: translateY(0); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    background-color: rgba(3, 91, 218, 0.05);
}
/* 이벤트 */
.news .grid .news-lists .eventspart{
    display: grid;
    gap:5px;
}
.news .grid .news-lists .events-title{
    display: flex;
    justify-content: space-between;
}
/* 화살표 */
.news-item .arrow{
    padding-right: 25px;
    transition: all 0.2s ease-out;
}
/* 화살표 옆으로 이동하는  */
.news-item .arrow:hover{
    transform: translateX(15px);
}
/* ==========5. 가맹문의섹션========= */
#fran{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: url('../images/bgimg.jpg')no-repeat center center/cover;
    background-attachment: fixed;
    background-color: rgba(3,91,218,0.1);
}
.fran .fran-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 80%;
    max-width: 1300px;
    padding: 2.5rem; 
    background-color: rgba(255,255,255,0.5); 
    backdrop-filter: blur(3px); 
    box-shadow: var(--shadow-xl);
    border-radius: 1rem; 
}
/* 원형 글자  */
.fran .round{
    position: absolute;
    top:-90px;
    right:-70px;
    z-index: 99;
    animation: rotate 30s linear infinite;
}
/* 원형글자 애니메이션 */
@keyframes rotate {
    0% {
        transform: rotate(-360deg);    
    }
    100% {
        transform: rotate(0deg);
    }
}

.fran .title .sec-sub-title{
    font-size: 1rem;
    padding-bottom: 0.8rem;
    text-align: center;
}

.fran .ment{
    text-align: left;
    padding-top: 1rem;
}

/* 밑에 멘트 */
.fran .text-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 200px;
}
.fran .text-box .left-text{
    width: 30%;
    padding-left: 90px;
    text-align: left;
}  
.fran .text-box .left-text .fran-sub-title{}  
.fran .text-box .left-text h3{
    color: var(--color-navy);
    padding-bottom: 0.75rem;
    font-size: 2rem;
}
.fran .text-box .left-text .ment{
    line-height: 1.6;
    font-size: 1rem;
    color: var(--color-text-dark);
}
/* 오른쪽 */
.fran .text-box .right-text {
    width:60%;
    padding: 0;
}
.fran .text-box .right-text form .form-group {
    margin-bottom: 1rem; 
    width: 80%;
    display: flex; 
    align-items: center;
    justify-content: flex-start; 
    gap: 1rem;
}
.fran .text-box .right-text form label {
    display: block;
    width: 4rem; 
    font-weight: 500;
    text-align: left;
    color: var(--color-text-dark);
    flex-shrink: 0;
}
.fran .text-box .right-text form input,
.fran .text-box .right-text form select {
    flex-grow: 1;
    width: auto; 
    padding: 0.75rem 1rem; 
    border: 1px solid var(--color-light-gray);
    border-radius: 0.5rem; 
    font-size: 0.95rem;
    background-color: var(--color-bg-light);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fran .text-box .right-text form input:focus,
.fran .text-box .right-text form select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(3, 91, 218, 0.1);
    outline: none;
    background-color: var(--color-white);
}
/* 개인정보 */
.fran .text-box .right-text .agree{
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap:4px;
}
.agree-title {
    font-weight: 600;
    margin-right: 75px;
}
.radio-item {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.radio-item input[type="radio"] {
    cursor: pointer;
}
/* 상담신청 버튼 */
.fran .text-box .right-text .talk {
    width: 11rem; 
    height: 3rem; 
    border-radius: 0.5rem; 
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.fran .text-box .right-text .talk:hover {
    background-color: var(--color-navy);
    box-shadow: var(--shadow-md);
}
/* ==========6. 매장섹션========= */
.shop {
    position: relative;
}
.shop .container {
    background-color:var(--whiteColor);
}

.shop .contentbox {
    width: 100%;
    background-color: var(--color-text-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    display: flex;
    overflow: hidden;
    position: relative;
}
/* -----매장 탭 전체부분------- */
.shop .contentbox .shop-tab {
    width:17%;
    background-color: transparent;
    padding: 0px 12px;
    border-right: 1px solid #eee;
    position: relative;
}
.shop .contentbox .shop-tab ul {
    padding-left: 0;
    color:var(--color-text-dark);
}
.shop .contentbox .shop-tab ul li {
    margin: 40px 0;
}
.shop .contentbox .shop-tab ul li a {
    padding: 10px 15px;
    border-radius: 35px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.shop .contentbox .shop-tab ul li a.active{
    color: #ffffff;
    background-color: var(--color-primary);
    border-color:var(--color-primary) ;
}
.shop .contentbox .shop-tab ul li a:hover {
    color: var(--mainColor);
    outline: 1px solid var(--mainColor);
    box-shadow: 0 5px 15px rgba(3, 91, 218, 0.1);
    backdrop-filter: blur(30px);
    box-sizing: border-box;
    background-color: rgba(3, 91, 218, 0.05);
}
/* 오른쪽 스와이퍼 공통전체 영역 */
.shop .contentbox .sw-shop {
/* height: 410px; */
}
/* ===== 매장 탭 메뉴 활성화 스타일 ===== */
/* 탭 콘텐츠 기본 숨김 */
 .shop .shop-contents > div[id] {
    display: none;
}
/* 활성화된 탭 콘텐츠만 표시 */
.shop .shop-contents > div[id].active {
    display: block;
}
/* 활성화된 탭 메뉴 스타일 */
.shop .contentbox .shop-tab ul li.active a {
    color: #035bda;
    outline: 1px solid var(--mainColor);
    padding: 10px 15px;
    border-radius: 35px;
    background-color: rgba(3, 91, 218, 0.1);
    box-shadow: 0 0 20px rgba(210, 210, 210, 0.4);
    backdrop-filter: blur(30px);
    transition: all 0.3s ease;
}
/*  이게 적용됨. shop-contents 레이아웃 조정 */
.shop .shop-contents {
    position: relative;
    width:80%;
    padding: 20px 20px 20px 20px;
    overflow: hidden;  
}
/*-------- 매장내비----- */
.shop .contentbox .shop-navi {
    position: absolute; 
    bottom:70px;
    left:20px;
    width: 100%;
    z-index: 99; 
}
/* 내비 모양 */
.shop .contentbox .shop-navi .swiper-btn-prev2 {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8); /* 반투명 흰색 */
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    padding-left: 4px;
}
.shop .contentbox .swiper-btn-next2 {
    position: absolute;
    left:50px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}
/* 4. 호버 효과 */
.shop-contents .swiper-btn-prev2:hover,
.shop-contents .swiper-btn-next2:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}
/* 스와이퍼 기본 상태 */
.shop .sw-shop .swiper {
    overflow: visible;
}
/* 슬라이드 */
.shop .sw-shop .swiper-wrapper .swiper-slide {
    width: 100%;
    height: 452px;
    position: relative;
    overflow: hidden;
    padding-top: 10px;
    /* transition: transform 0.3s ease; */
    cursor: pointer;
    border: 2px solid transparent;
}
.shop .sw-shop .swiper-wrapper .swiper-slide:hover {
    filter: opacity(0.2);
    z-index: 9;
}
/* 매장 이미지 틀 */
.shop .sw-shop .swiper-wrapper .swiper-slide .shop-img {
    position: relative;
    height: 300px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
/* 매장 이미지 호버 */
.shop .sw-shop .swiper-wrapper .swiper-slide .shop-img:hover {
    border: 2px solid var(--color-primary);
}
.shop .sw-shop .swiper-wrapper .swiper-slide .shop-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 모든 매장 텍스트 부분  */
.shop .sw-shop .swiper-wrapper .swiper-slide .shop-title {
    font-size: 1.2rem;
    text-align: center;
    padding: 10px;
    font-weight: 600;
    transition: color 0.3s ease;
}
.shop .sw-shop .swiper-wrapper .swiper-slide .shop-title:hover {
    color: var(--color-primary);
    }
.shop .sw-shop .swiper-wrapper .swiper-slide p {
    text-align: center;
    padding-top: 5px;
    font-size: 0.9rem;
    color: #666;
}
    
/* =========8. 푸터 섹션 ========*/
.footer-text {
    width: 100%; 
    background-color: var(--color-primary);
    padding-left: 35px; 
    padding-right: 35px; 
    padding-top: 30px; 
    padding-bottom: 30px; 
    box-sizing: border-box; 
    font-size: 0.9rem;
    color: var(--color-light-gray);
}
/* 약관 */
.footer-text .footer-top {
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}
.footer-text .footer-top .info1 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; 
    gap: 20px; 
}
.footer-text .footer-top .info1 li a {
    color: var(--color-light-gray);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-text .footer-top .info1 li a:hover {
    color: var(--color-primary); 
}
.footer-text .footer-top .info1 li a .line{
    position: relative;
    padding-left: 15px;
    margin-left: 5px; 
    display: inline-block; 
}
/*  정보와 아이콘  */
.footer-text .footer-bottom {
    display: flex;
    justify-content: space-between; 
    align-items: center;
}
/* 4. 회사 정보 */
.footer-text .footer-bottom .info2 {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; 
    line-height: 1.8;
}
/* 세로 줄 */
.footer-text .footer-bottom .info2 .ceo .line {
    position: relative;
    padding-left: 15px;
    margin-left: 5px; 
    display: inline-block; 
}
/* 세로줄 가상*/
.footer-text .footer-bottom .info2 .ceo .line::before {
    content: "";
    position: absolute;
    left: 5px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 1px; 
    height: 14px; 
    background-color: #ccc; 
}
.footer-text .footer-bottom .info2 li {
    margin-bottom: 5px;
}
.footer-text .footer-bottom .info2 .tel {
    font-weight: 900;
    color:var(--color-light-gray);
    padding-bottom: 10px;
}
.footer-text .footer-bottom .info2 .copy {
    margin-top: 15px;
    font-size: 0.85rem;
    color: #999;
}
/* sns */
.footer-text .footer-bottom .sns {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; 
    gap: 24px; 
    padding-right: 50px;
}
.footer-text .footer-bottom .sns li a img {
    display: block;
    width: 40px; 
    height: 40px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-text .footer-bottom .sns li a:hover img {
    opacity: 1; 
    transform: translateY(-2px);
}
/* 웨이브글씨*/
.footer .wave-font {
    width: 100%;
    height: 60px; 
    overflow: hidden; 
    background-color:#fff;
    color: var(--color-primary); 
    position: relative;
}
.footer .slide-text {
    white-space: nowrap; 
    display: flex; 
    animation: scroll-right 60s linear infinite;

}
/* 텍스트  */
.slide-text span {
    display: inline-block;
    padding-right: 20px;
    font-size:2rem;
    line-height: 4rem;
    font-weight: bold;/
}
/* 이동 애니메이션*/
@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
    
        transform: translateX(0%);
    }
}