@charset "UTF-8";

/* ------------------------------------------------------------------------- */
/* RESET
/* ------------------------------------------------------------------------- */
* {box-sizing:border-box}

html {font-size: 62.5%;}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, 
address, em, img, strong, i, dl, dt, dd, ul, li, 
fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td, figure, button, input, select {
	margin: 0;
	padding: 0;
	border: 0;
  word-break: break-all;
}
:lang(ko) {word-break: keep-all;}
ul, li {list-style: none;} ul,li a{display: block;}
a {text-decoration: none; color: inherit;}
em, address {font-style: normal;}
h1, h2, h3, h4, h5, h6, strong {font-weight: normal;}
article, aside, figcaption, figure, footer, header, nav, section, main {display: block;}
table {border-collapse: collapse; border-spacing:0;}
input, button, select {
  border: none;
  border-radius:0; 
  background-color: transparent;
}
select {appearance:none; -webkit-appearance:none;  -moz-appearance:none;}
button, select {cursor: pointer;}
input:focus, select:focus, option:focus, textarea:focus, button:focus {outline: none;}

img, svg, video, canvas, audio, iframe {display: block;}
img, video {max-width: 100%; height: auto;}

body {
  font: 400 16px/1 'Noto Sans KR', 'Malgun Gothic' ,'돋움', dotum, AppleGothic, sans-serif; 
  letter-spacing: -0.16px;
  background-color: #fff;
  overflow-x: hidden;
}

/* ------------------------------------------------------------------------- */
/* fonts
/* ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Noto Sans KR';
  src:url('../fonts/NotoSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Sans KR';
  src:url('../fonts/NotoSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Sans KR';
  src:url('../fonts/NotoSans-Bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

/* ------------------------------------------------------------------------- */
/* common
/* ------------------------------------------------------------------------- */
:root {
  --white:#ffffff;
  --primary:#004998;
  --point:#D80C0C;
  --bg:#E9E9E9;
  --text0:#000000;
  --text2:#222222;
  --text6:#636363;
  --text7:#7a7a7a;
}
.soundOnly {width: 0; height: 0; position: absolute; left: -9999px; top: 0; overflow: hidden;}
body.noScroll {min-height: 100dvh; overflow: hidden;}

/* ------------------------------------------------------------------------- */
/* layout
/* ------------------------------------------------------------------------- */
#wrap{
  width: 100%; max-width: 800px; 
  min-height: 100dvh; 
  margin: auto;
  font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 400; color: var(--text0);
}
main{
  width: 100%; min-height: 100dvh;
  display: flex; flex-direction: column; flex: 1;
  padding: 0 3rem; overflow: hidden;
}
main.bg{ 
  padding: 3rem 3rem 5rem 3rem; gap: 5rem;
  background-color: var(--bg);
}

/* ------------------------------------------------------------------------- */
/* Main
/* ------------------------------------------------------------------------- */
main.bg .noticetxt p {
  line-height: 2.4rem; letter-spacing: 0.32px;
  text-align: center; 
  transition: font 0.3s ease;
}
main.bg .noticetxt p + p {margin-top: 4px;}
section.listWrap {width: 100%; height: 100%; display: flex; flex-direction: column; gap: 2rem;}
.shop_link {
  width: 100%; min-height: 20rem;
  padding: 3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  background-color: var(--white); border-radius: 2rem;
  transition: 0.3s linear;
}
.shop_link .more {
  display: inline-block;
  width: 28px; height: 48px;
  background: url(../img/ico_arrow.svg) no-repeat center / contain;
}
.shop_link .inner {display: flex; align-items: flex-start; gap: 2rem;}
.shop_link .inner .s_img { 
  flex-shrink: 0; width: 18rem; height: 18rem; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: min-width 0.3s ease;
}
.shop_link .inner .s_img img {
  width: 100%; height: 100%; 
  margin: auto; 
  border-radius: 2rem; object-fit: cover;
}
.shop_link .inner .infotxt {display: flex; flex-direction: column; gap: 1.8rem; transition: font 0.3s linear; }
.shop_link .inner .infotxt .tit{font-size: 2.8rem; font-weight: 500; line-height: 3.2rem; }
.shop_link .inner .infotxt .small{font-size: 2rem; line-height: 2.4rem; color: var(--text2); }
.shop_link .inner .infotxt ul li {font-size: 1.8rem; line-height: 2.2rem; color: var(--text2); margin-bottom: 0.4rem; }
.shop_link .inner .infotxt ul li:last-child {margin-bottom: 0;}
.shop_link .inner .infotxt ul li span {font-weight: 600;}


/******* media *******/
@media (max-width : 575px) {
  main.bg {padding: 2rem 2rem 4rem 2rem; gap: 3.6rem;}
  main.bg .noticetxt p {font-size: 1.4rem; line-height: 1.8rem;}

  .shop_link {min-height:18rem; padding: 2rem; gap: 1rem;}  
  .shop_link .more {height: 36px;}
  .shop_link .inner .s_img {width: 12rem; height: 12rem;}
  .shop_link .inner .s_img img {border-radius: 1.6rem;}
  .shop_link .inner .infotxt {gap: 1rem;}
  .shop_link .inner .infotxt .tit {font-size: 2.2rem;}
  .shop_link .inner .infotxt .small {font-size: 1.8rem;}
  .shop_link .inner .infotxt ul li {font-size: 1.6rem; line-height: 2rem;}
}

@media (max-width : 430px) {
  main.bg{ padding: 1.2rem 1.2rem 4rem 1.2rem;}
  .shop_link {min-height: 14rem; padding: 1.4rem; gap: 1rem;} 
  .shop_link .more {height: 24px;}
  .shop_link .inner {gap: 1.2rem;}
  .shop_link .inner .infotxt {gap: 0.5rem;}
  .shop_link .inner .infotxt .tit {font-size: 1.8rem; line-height: 2.2rem;}
  .shop_link .inner .infotxt .small {font-size: 1.5rem;}
  .shop_link .inner .infotxt ul li {font-size: 1.4rem; line-height: 1.8rem;}
}

@media (max-width : 390px) {
  .shop_link .inner .s_img {width: 10rem; height: 10rem;}
  .shop_link .inner .infotxt .tit {font-size: 2rem;}
  .shop_link .inner .infotxt .small {font-size: 1.4rem;}
  .shop_link .inner .infotxt ul li {font-size: 1.3rem;}
}


/* ------------------------------------------------------------------------- */
/* sub1
/* ------------------------------------------------------------------------- */
.header {
  width: 100%; height: 8rem; 
  display: flex; align-items: center; justify-content: center;
  position: sticky; top: 0; left: 0; z-index: 1000;
  transition: height 0.3s ease;
  background-color: var(--white);
}
.header .inner {width: 100%; height: 100%; padding: 0 3rem; display: flex; align-items: center;}
.btn {width: 6rem; height: 6rem; transition: 0.3s ease;}
.btn.back {background: url(../img/ico_back.svg) no-repeat center / contain; }
.btn.close {background: url(../img/ico_close.svg) no-repeat center / contain; }

/* swiper */
.visual {width: 100%; position: relative;}
.visual .Swiper {padding-bottom: 3rem;}
.visual .Swiper .swiper-slide {width: 100%; border-radius: 2rem; overflow: hidden;}
.visual .Swiper .swiper-slide img{
  width: 100%; max-height: 62vw; 
  margin: auto; object-fit: contain;
}
.swiper-pagination-bullet-active {background-color: var(--primary);}
.visual span.view{
  padding: 1.2rem 1rem;
  font-size: 1.6rem; line-height: 1.8rem; color: var(--white);
  background-color: rgba(0, 0, 0, 0.4); border-radius: 1.2rem;
  position: absolute; bottom: 5rem; right: 1.5rem; z-index: 100;
}

section.shop {
  width: 100%;
  margin-top: 5rem; padding: 0 2rem;
  display: flex; flex-direction: column; gap: 3rem;
}
section.shop .s_header {display: flex; align-items: center; justify-content: space-between;}
section.shop .s_header .inner h3.s_tit {font-size: 3.4rem; font-weight: 600; line-height: 3.8rem; margin-bottom: 1rem; transition: font 0.3s ease;}
section.shop .s_header .inner span {font-size: 2.4rem; font-weight: 500; color: var(--text2); transition: font 0.3s ease;}
section.shop .s_header .ico_wrap {display: flex; align-items: center; gap: 2rem; transition: gap 0.3 ease;}
section.shop .s_header .ico_wrap .ico {width: 6rem; height: 6rem; transition: width 0.3s ease;}
section.shop .s_header .ico_wrap .ico.gps {background: url(../img/ico_gps.svg) no-repeat center / contain;}
section.shop .s_header .ico_wrap .ico.tel {background: url(../img/ico_tel.svg) no-repeat center / contain;}

section.shop .info {display: flex; flex-direction: column; gap: 3rem;}
section.shop .info ul.add li {font-size: 2rem; line-height: 3rem; color: var(--text2);}
section.shop .info ul.add li span{font-weight: 600;}
section.shop .info ul.add.disc li {padding-left: 1rem; position: relative;}
section.shop .info ul.add.disc li::before {
  content: ''; display: inline-block; 
  width: 6px; height: 6px; border-radius: 100%;
  background-color: var(--text2); 
  position: relative; top: -2px; left: -8px;
}
section.shop .info ul.add.disc li.nowrap {white-space: normal; display: flex; align-items: center; }
section.shop .info ul.add.disc li.nowrap::before{top: 1px;}

.coupon{
  display: inline-block;
  width: 100%; max-width: 74rem; height: 12rem;
  margin: 3rem auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center; 
  gap: 1rem;
  background-color: var(--primary); color: var(--white); border-radius: 2rem;
  transition: height 0.3s ease;
}
.coupon h4 {font-size: 3rem; font-weight: 600; transition: font 0.3s ease;}
.coupon span {font-size: 1.8rem;}


/******* media *******/
@media (max-width : 575px){
  .header {height: 5rem;}
  .header .inner {padding: 0 2rem;}
  .header .inner .btn {width: 4rem; height: 4rem;}
  
  main {padding: 0 2rem;}
  .visual .Swiper .swiper-slide {border-radius: 1.2rem;}
  .visual span.view{right: 1rem; border-radius: 1rem; padding: 1rem; font-size: 1.4rem;}
  section.shop, section.shop .info {gap: 2rem;}
  section.shop .s_header .inner h3.s_tit {font-size: 2.6rem; line-height: 3.4rem;}
  section.shop .s_header .inner span {font-size: 1.8rem;}
  section.shop .s_header .ico_wrap {gap: 1.2rem;}
  section.shop .s_header .ico_wrap .ico {width: 5rem; height: 5rem;}
  .coupon {height: 8rem; border-radius: 1.2rem;}
  .coupon h4 {font-size: 2.4rem;}
  .coupon span {font-size: 1.6rem;}
}

@media (max-width : 430px) {
  .header .inner {padding: 0 1.6rem;}
  .header .inner .btn {width: 2.4rem; height: 2.4rem;}
  section.shop {margin-top: 3rem; padding: 0;}
  section.shop .info ul.add li {font-size: 1.5rem; line-height: 2.4rem;}
  section.shop .info ul.add.disc li {font-size: 1.4rem;}
  section.shop .s_header .ico_wrap .ico {width: 4.5rem; height: 4.5rem;}
  .coupon {height: 7rem; gap: 0.8rem;}
  .coupon h4 {font-size: 1.8rem;}
  .coupon span {font-size: 1.3rem;}
}



/* ------------------------------------------------------------------------- */
/* layer popup
/* ------------------------------------------------------------------------- */
/******* 확대보기 *******/
.layer{
  position: fixed; inset: 0;                
  width: 100%; height: 100dvh;
  display: none;         
}
.layer.on {
  display: flex; flex-direction: column; overflow-x: hidden;
  z-index: 1100;
}

.layer_dimmed {
  position: absolute; inset: 0; z-index: 1;
  background-color: var(--white);
}
.layer_wrap {
  width: 100%; max-width: 800px;    
  height: 100%; min-height: 0;     
  margin: auto;   
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
}
.layer_head {
  padding: 0 3rem; flex: 0 0 auto;          
  background: var(--white);
  position: relative; z-index: 3;
}
.layer_head {padding: 0 3rem; position: sticky; top: 0; left: 0; flex-shrink: 0;}
.layer_head h3 {font-size: 1.8rem; font-weight: 500;}
.layer_head .btn.close { 
  width: 5rem; height: 5rem; 
  position: absolute; right: 3rem; 
  transition: width 0.3s ease;
}
.layer_cont {
  padding: 0 3rem; 
  width: 100%; min-height: 0;         
  flex: 1 1 auto;          
  overflow-y: auto;        
  -webkit-overflow-scrolling: touch;
}

.layer .Swiper .swiper-slide img {height: 70vw; margin: auto; object-fit: contain; transition: height 0.3s ease;}
.layer .swiper-pagination {top: 80vw;}

@media (max-width : 575px) {
  .layer_head {font-size: 1.4rem;}
  .layer_head > .btn.close { width: 3rem; height: 3rem; position: absolute; right: 1.6rem;}
  .layer_cont {padding: 0 2rem; }
  .layer .Swiper .swiper-slide img {height: 120vw;}
  .layer .swiper-pagination {top: 135vw;}
}

/******* 쿠폰 다운로드 *******/
.layer_dimmed.bg {background-color: var(--bg);}
.layer_dimmed.bg .layer_cont {margin: auto;}
.layer_wrap .coupon {padding: 0 3rem;}
.layer_cont .inner {padding-top: 3rem; display: flex; flex-direction: column;}
.layer_cont .inner .couponBox {margin: auto; height: 50rem;}
.layer_cont .inner .couponBox img {width: 100%; height: 100%; margin: auto; object-fit: contain;}
.layer_cont .inner .explain {margin-top: 3rem; font-size: 1.6rem; line-height: 2.1rem; text-align: center; color: var(--text6);}

@media (max-width : 575px) {
  .layer_cont .inner .couponBox {height: 43rem;}
  .layer_cont .inner .explain {font-size: 1.3rem;}
}
@media (max-width : 380px){
  .layer_cont .inner .couponBox {height: 34rem;}
}

/* 메인과 배경 자연스럽게 연결 + 가운데 정렬 */
.top-banner{
  display:flex;
  justify-content:center;
  align-items:center;


}