@charset "UTF-8";

/* 프리텐다드 */
@font-face {
  font-family: 'Pretendard-Regular';
  src: url('../font/Pretendard/Pretendard-Regular.subset.woff2') format('woff2'),
    url('../font/Pretendard/Pretendard-Regular.woff2') format('woff2'),
    url('../font/Pretendard/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Medium';
  src: url('../font/Pretendard/Pretendard-Medium.subset.woff2') format('woff2'),
    url('../font/Pretendard/Pretendard-Medium.woff2') format('woff2'),
    url('../font/Pretendard/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Bold';
  src: url('../font/Pretendard/Pretendard-Bold.subset.woff2') format('woff2'),
    url('../font/Pretendard/Pretendard-Bold.woff2') format('woff2'),
    url('../font/Pretendard/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
    font-family: 'Ria';
    src: url('../font/Ria/RiaSans-ExtraBold.ttf') format('woff2');
    font-weight: normal;
    font-display: swap;
}

/*reset*/
* { font-family: 'Pretendard', "AppleSDGothicNeo", 'sans-serif'; padding: 0; margin: 0; font-style: normal; font-weight: 700; line-height: 140%; color-scheme: light only; }
html { font-family: 'Pretendard', "AppleSDGothicNeo", 'sans-serif' !important; }
body { font-family: 'Pretendard', "AppleSDGothicNeo", 'sans-serif' !important; top: 0; left: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #fff; }
a { text-decoration: none; }
li { list-style: none; }
em { font-style: normal; }
ul, li, ol { list-style: none; }
img { display: block; }

.swiper-wrapper{height: auto !important;}



.up-btn,
.up-btn-mo {
    opacity: 0;             /* 화면에는 안 보이게 */
    pointer-events: none;   /* 클릭 등 이벤트 무시 */
    position: absolute;     /* offset 계산 가능 */
}


:root {
  /* color */
  /* 스케일 */
  --main-001: #E4002B;
  --main-002: #C8052A;
  --main-003: #F8D8DB;
  --main-004: #FF5E13;
  --main-005: #000000;
  --main-006: #6B6B6B;
  --gray-000: #FFFFFF;
  --gray-001: #FCFAF8;
  --gray-002: #F3F0ED;
  --gray-003: #E4E1DE;
  --gray-004: #D1CDC9;
  --gray-005: #AFA8A5;
  --gray-006: #6E6864;
  --gray-007: #504A46;
  --gray-008: #262320;
  --gray-009: #110F0D;
  --system-error: #FF3750;
  --system-link: #38A82D;
  --system-success: #2974B9;

  /* 시멘틱 */

  /* text */
  --text-primary: var(--gray-009);
  --text-secondary: var(--gray-007);
  --text-unselected: var(--gray-005);
  --text-disabled: var(--gray-004);
  --text-reverse: var(--gray-001);
  --text-accent1: var(--main-001);
  --text-accent2: var(--main-004);
  --text-error: var(--system-error);
  --text-seccess: var(--system-link);
  --text-link: var(--system-success);

  /* Surface */
  /* background */
  --bg-base: var(--gray-001);
  --bg-pure: var(--gray-000);
  --bg-accent1: var(--main-004);
  --bg-accent2: var(--main-002);

  /* button */
  --btn-default: var(--main-002);
  --btn-secondary: var(--main-004);
  --btn-pressed: var(--main-003);
  --btn-disabled: var(--gray-002);
  --btn-unselected: var(--gray-001);

  /* icon */
  --icon-default: var(--gray-006);
  --icon-unselected: var(--gray-004);
  --icon-disabled: var(--gray-003);
  --icon-reverse: var(--gray-000);
  --icon-error: var(--system-error);
  --icon-seccess: var(--system-link);
  --icon-link: var(--system-success);
  --icon-accent: var(--main-001);

  /* border */
  --border-default: var(--gray-002);
  --border-disabled: var(--gray-003);
  --border-accent: var(--main-001);
  --border-accent2: var(--main-002);

  /* 그림자 */
  /* Shadow */
  --shadow-color: rgba(0, 0, 0, 0.14);
  --shadow-Levle-1: 0 1px 1px 0 var(--shadow-color);
  --shadow-Levle-2: 0 3px 4px 0 var(--shadow-color);
  --shadow-Levle-3: 0 6px 10px 0 var(--shadow-color);

}

/* PC */
@media (min-width: 1200px) {
  :root {
    /* PC (기본값) */
    /* font */
    --Font-Size-Display: 48px;
    --Font-Size-Headline: 28px;
    --Font-Size-Title: 20px;
    --Font-Size-Body_Short: 18px;
    --Font-Size-Body_Long: 16px;
    --Font-Size-Font-Size-Assist_L: 14px;
    --Font-Size-Label: 12px;
    --Font-Size-Label-L: 14px;

    /* 레이아웃 */
    /* Radius */
    --Radius-full: 1000px;
    --Radius-L: 24px;
    --Radius-M: 16px;
    --Radius-S: 12px;
    --Radius-XS: 8px;

    /* Spacing (Padding, Margin, Gap) */
    --Spacing-XXL: 120px;
    --Spacing-XL: 64px;
    --Spacing-L: 32px;
    --Spacing-M: 24px;
    --Spacing-S: 16px;
    --Spacing-XS: 8px;

    /* goodStuff font_size */
    --Good-Stuff-Title: 48px;

    /* Ria font_size */
    --Ria-Number:24px;
    --Ria-Title:28px;
  }



  /* header */
  .main-header { width: 100%; height: 160px;}

  .up-btn {position: fixed; bottom: 96; right: 44; z-index: 10;}
  .up-btn-mo { opacity: 0 !important; pointer-events: none !important; }
}

/* 태블릿 */
@media (max-width: 1199px) and (min-width: 768px) {
  :root {
    /* font */
    --Font-Size-Display: 24px;
    --Font-Size-Headline: 24px;
    --Font-Size-Title: 20px;
    --Font-Size-Body_Short: 14px;
    --Font-Size-Body_Long: 12px;
    --Font-Size-Font-Size-Assist_L: 9px;
    --Font-Size-Label: 9px;
    --Font-Size-Label-L: 12px;


    /* 레이아웃 */
    /* Radius */
    --Radius-full: 1000px;
    --Radius-L: 20px;
    --Radius-M: 14px;
    --Radius-S: 10px;
    --Radius-XS: 6px;

    /* Spacing (Padding, Margin, Gap) 모바일 따라감 */
    --Spacing-XXL: 40px;
    --Spacing-XL: 40px;
    --Spacing-L: 20px;
    --Spacing-M: 16px;
    --Spacing-S: 8px;
    --Spacing-XS: 4px;

    /* goodStuff font_size */
    --Good-Stuff-Title: 36px;

    /* Ria font_size */
    --Ria-Number:24px;
    --Ria-Title:24px;
  }

    .main-header ul{padding-left: 148px !important; padding-top: 50px !important; padding-bottom: 22px !important;}
    .main-header .jimmyjohns-header-icon{ top: 50px !important; left: 52px !important; width: 80px !important; height: 80px !important;}
    .main-footer {height: 450px !important;}
    .main-footer .left .top{height: 208px !important;}
    .main-footer .left .top > img{height: 100px !important; width: 100px !important;}
    .main-footer .right {    display: flex; justify-content: end; flex-direction: column;}

    .main-footer .right .top a{ width: 144px !important; height: 50px !important; }
    .main-footer .right .bottom a{ width: 26px !important; height: 26px !important; }

    .up-btn {position: fixed; bottom: 96; right: 44; z-index: 10;}
    .up-btn-mo { opacity: 0 !important; pointer-events: none !important; }
}

/* 모바일 */
@media (max-width: 767px) {
    :root {
        /* font */
        --Font-Size-Display: 22px;
        --Font-Size-Headline: 20px;
        --Font-Size-Title: 16px;
        --Font-Size-Body_Short: 14px;
        --Font-Size-Body_Long: 12px;
        --Font-Size-Font-Size-Assist_L: 12px;
        --Font-Size-Label: 9px;
        --Font-Size-Label-L: 9px;


        /* 레이아웃 */
        /* Radius */
        --Radius-full: 1000px;
        --Radius-L: 16px;
        --Radius-M: 12px;
        --Radius-S: 8px;
        --Radius-XS: 4px;

        /* Spacing (Padding, Margin, Gap) */
        --Spacing-XXL: 40px;
        --Spacing-XL: 40px;
        --Spacing-L: 20px;
        --Spacing-M: 16px;
        --Spacing-S: 8px;
        --Spacing-XS: 4px;

        /* goodStuff font_size */
        --Good-Stuff-Title: 24px;

        /* Ria font_size */
        --Ria-Number:24px;
        --Ria-Title:20px;
    }

    .main-header-mo { background-color: var(--main-005); position: relative; width: 100%; height: 72px; display: flex; padding: 0 5%; align-items: center; justify-content: space-between; box-sizing: border-box;}  
    .main-header-mo .jimmyjohns-header-icon-mo{background: url('../images/jimmyjohns_header_icon_mo.svg?v=1'); background-size: cover; width: 200px; height: 36px; display: block;}
    .main-header-mo .more-btn{background: url('../images/header-more-btn.svg'); background-size: cover; width: 24px; height: 24px; display: block;}
    .main-header-mo .more-btn.on{background: url('../images/header-close-btn.svg') !important; background-size: cover; width: 24px; height: 24px; display: block;}

    .main-header-mo .header-menu-list{ position: absolute; width: 100%; top: 72px; padding: 0 var(--Spacing-L); background-color: var(--main-005); z-index: 10000;left: 0; box-sizing: border-box; height: 100vh;}
    .main-header-mo .header-menu-list ul{ border-top: 1px solid var(--border-default); padding: var(--Spacing-XL) var(--Spacing-L); }
    .main-header-mo .header-menu-list ul li{margin-bottom: var(--Spacing-XL); display: flex; align-items: center;}
    .main-header-mo .header-menu-list ul li img{width: 12px; height: 11px; margin-left: 8px;}
    .main-header-mo .header-menu-list ul li:last-child{margin-bottom: unset;}
    .main-header-mo .header-menu-list ul li a{font-size: var(--Font-Size-Body_Short); color: var(--text-reverse); font-weight: 700; line-height: 20px; }


    .main-footer-mo {width: 100%;  background-color: var(--main-005); box-sizing: border-box; padding: var(--Spacing-XL) var(--Spacing-L); }
    .main-footer-mo > .top{ margin-bottom: var(--Spacing-L); }
    .main-footer-mo > .top > img{ height: 72px; width: 72px; margin-bottom: var(--Spacing-XL);}
    .main-footer-mo > .top .info-list > li{ margin-bottom: var(--Font-Size-Body_Short);}
    .main-footer-mo > .top .info-list > li:last-child{ margin-bottom: unset !important;}
    .main-footer-mo > .top .info-list > li a{color: var(--text-reverse); font-size: var(--Font-Size-Body_Short); font-weight: 400;}
    .main-footer-mo > .top .info-list .menu-info-title{display: flex; }
    .main-footer-mo > .top .info-list .menu-info-title img{width: 16px; height: 16px; margin-left: var(--Spacing-XS); margin-top: 2px;}
    .main-footer-mo > .top .info-list .menu-list > li{margin-top: var(--Spacing-S);}
    .main-footer-mo > .top .info-list .menu-list > li a{color: var(--text-unselected); font-size: var(--Font-Size-Body_Short); font-weight: 400;}
    
    .main-footer-mo .middle {margin-bottom: var(--Spacing-L);}
    .main-footer-mo .middle .top{display: flex ; flex-wrap: wrap; gap: var(--Spacing-M); margin-bottom: var(--Spacing-L); flex-direction: column; align-content: flex-end;}
    .main-footer-mo .middle .bottom{display: flex; flex-wrap: nowrap; gap: var(--Spacing-M); justify-content: end;}
    .main-footer-mo .middle .top a{ width: 112px !important; height: 39px !important;}
    .main-footer-mo .middle .bottom a{ width: 24px !important ; height: 24px !important; }
    .main-footer-mo .middle .downlaod-apple{ background: url("../images/download-apple.svg") no-repeat; background-size: contain;}
    .main-footer-mo .middle .downlaod-playstore{ background: url("../images/download-playstore.svg") no-repeat; background-size: contain;}
    .main-footer-mo .middle .instagram-icon{ background: url("../images/instagram-icon.svg") no-repeat; background-size: contain;}
    .main-footer-mo .middle .youtube-icon{ background: url("../images/youtube-icon.svg") no-repeat; background-size: contain;}
    
    .main-footer-mo > .bottom{width: fit-content; border-top: 1px solid var(--border-default);}
    .main-footer-mo > .bottom .policy{margin: var(--Spacing-L) 0; display: flex;}
    .main-footer-mo > .bottom .policy a{color: var(--text-reverse); font-weight: 400; font-size: var(--Font-Size-Body_Long);}
    .main-footer-mo > .bottom .policy .line-divider{ border-left: 1px solid var(--border-default); margin: 0 var(--Spacing-L);}
    .main-footer-mo > .bottom .store-name{font-size: var(--Font-Size-Body_Long); font-weight: 400; color: var(--text-reverse); margin-bottom: var(--Spacing-M);}
    .main-footer-mo > .bottom .copyright-info{font-size: var(--Font-Size-Body_Long); font-weight: 400; color: var(--text-reverse); }

    .up-btn-mo { position: fixed; bottom: 96; right: 44; z-index: 10;}
    .up-btn {    opacity: 0 !important; pointer-events: none !important; }
}



.main-header { background-color: var(--main-005); position: relative;}  
.main-header ul{ display: flex; align-items: center; padding-left: 256px; padding-top: 74px; box-sizing: border-box; padding-bottom: 23px;}
.main-header ul li{padding: var(--Spacing-S) var(--Spacing-M) var(--Spacing-S) var(--Spacing-M); font-size: var(--Font-Size-Body_Short);}
.main-header ul li a{color: var(--text-reverse);}
.main-header .jimmyjohns-header-icon{background: url('../images/jimmyjohns_header_icon.svg'); background-size: cover;  position: absolute; top: 80px; left: 100px; z-index: 10; width: 120px; height: 120px;}



.main-footer {width: 100%; height: 647px; background-color: var(--main-005); box-sizing: border-box; padding: var(--Spacing-XL) var(--Spacing-L); display: flex; justify-content: space-between;}
.main-footer .left {width: 100%;}
.main-footer .left .top{ display: flex; height: 330px;}
.main-footer .left .top > img{margin-right: var(--Spacing-XL);     height: 160px; width: 160px;}
.main-footer .left .top .info-list{padding: var(--Spacing-S) 0; display: flex; gap: var(--Spacing-L);}
.main-footer .left .top .info-list > li a{color: var(--text-reverse); font-size: var(--Font-Size-Body_Short); font-weight: 400;}
.main-footer .left .top .info-list .menu-info-title{display: flex; }
.main-footer .left .top .info-list .menu-info-title img{width: 16px; height: 16px; margin-left: var(--Spacing-XS); margin-top: 2px;}
.main-footer .left .top .info-list .menu-list > li{margin-top: var(--Spacing-S);}
.main-footer .left .top .info-list .menu-list > li a{color: var(--text-unselected); font-size: var(--Font-Size-Body_Short); font-weight: 400;}
.main-footer .left .bottom{width: fit-content; border-top: 1px solid var(--border-default);}
.main-footer .left .bottom .policy{margin: var(--Spacing-L) 0; display: flex;}
.main-footer .left .bottom .policy a{color: var(--text-reverse); font-weight: 400; font-size: var(--Font-Size-Body_Long);}
.main-footer .left .bottom .policy .line-divider{ border-left: 1px solid var(--border-default); margin: 0 var(--Spacing-L);}
.main-footer .left .bottom .store-name{font-size: var(--Font-Size-Body_Long); font-weight: 400; color: var(--text-reverse); margin-bottom: var(--Spacing-M); -webkit-touch-callout: none;}
.main-footer .left .bottom .copyright-info{font-size: var(--Font-Size-Body_Long); font-weight: 400; color: var(--text-reverse); }

.main-footer .right .top{display: flex; flex-wrap: wrap; gap: var(--Spacing-M); justify-content: end; margin-bottom: var(--Spacing-L);}
.main-footer .right .bottom{display: flex; flex-wrap: nowrap; gap: var(--Spacing-M); justify-content: end;}
.main-footer .right .top a{ width: 221px; height: 77px;}
.main-footer .right .bottom a{ width: 40px ; height: 40px; }
.main-footer .right .downlaod-apple{ background: url("../images/download-apple.svg") no-repeat; background-size: contain;}
.main-footer .right .downlaod-playstore{ background: url("../images/download-playstore.svg") no-repeat; background-size: contain;}
.main-footer .right .instagram-icon{ background: url("../images/instagram-icon.svg") no-repeat; background-size: contain;}
.main-footer .right .youtube-icon{ background: url("../images/youtube-icon.svg") no-repeat; background-size: contain;}