@charset "utf-8";
/*
    Common.css
*/
html {
  /* Prevent font scaling in landscape */
  -webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
  -moz-text-size-adjust: none; /*Firefox*/
  -ms-text-size-adjust: none; /*Ie*/
  -o-text-size-adjust: none; /*old versions of Opera*/
  }
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button,h1,h2,h3,h4,input,button,textarea{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
      font-family: 'Pretendard Variable';
  }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0; word-wrap:break-word;word-break:break-all;}
body,h1,h2,h3,h4,input,button,textarea{font-size:14px;color:#111111; font-weight:400; word-wrap:break-word;word-break:break-all;}
a.skip_area {position:absolute;left:0;top:-60px;display:block;width:100%;height:40px;background:#d23333;color:#fff;font-size:13px;text-align:center;line-height:40px;z-index:500;}
a.skip_area:active, a.skip_area:focus {position:absolute;top:0;}
* {margin:0;padding:0; box-sizing:border-box;}
img, fieldset, button {border:none;}
hr, button img {display:none;}
li {list-style:none;}
a {color:#000000;text-decoration:none;vertical-align:top;}
a:hover, a:active, a:focus, a:visited {text-decoration:none;}
textarea {overflow:auto;} 
table {width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;text-align:center;}
table img {vertical-align:top;}
th, td {vertical-align:middle;word-wrap:break-word;word-break:break-all;}
form  {margin:0;padding:0;}
img {vertical-align:top;}
legend  {position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0;} /* For Screen Reader */ 
caption {width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999px;overflow:hidden;visibility:hidden;}
input[type="text"], input[type="date"],input[type="number"],input[type="email"],input[type="search"],input[type="image"],input[type="button"], input[type="submit"], input[type="password"], input[type="file"], textarea, select{-webkit-appearance:none;-webkit-border-radius:0; appearance:none; outline: 0;}

em {font-style:normal;}
.blind {position:absolute;left:-9999px;top:-9999px;}
.fl {float:left;}
.fr {float:right;}
.clear {display:block;clear:both;height:0;overflow:hidden;}

body{
  background-color: #F9F9F9;
}
/*그라데이션*/
.gr_bg { background-color: #53A93A;}
.gr_bg02 { background: -webkit-linear-gradient(top, #0eee91, #2fc9ee); background: linear-gradient(top, #0eee91, #2fc9ee);	}
.gr_box { border: 1px solid #53A93A; color: #53A93A;}
.gr_text {background: -webkit-linear-gradient(left, #0eee91, #2fc9ee); background:-linear-gradient(left, #0eee91, #2fc9ee); -webkit-background-clip: text;  -webkit-text-fill-color: transparent}
.gray_bg { background:#a1a1a1; margin-top:10px;}
/*버튼*/

.btn_round {display:inline-flex; width:100%; height:42px; color:#fff; font-size:16px; font-weight:700; border-radius:30px; justify-content: center; align-items: center;}
.w_bg {background: #fff; color: #1be0b4; }
.w_box {border: 1px solid #fff; color: #fff; }
.btn_border {display:flex; width:100%; height:42px; font-size:17px; font-weight:700; border-radius:30px; justify-content: center; align-items: center;}  
.btn_box { display:block; width:100%; height:46px; font-size:16px;  font-weight:400; line-height:46px; color:#fff; text-align:center; border-radius: 24px;}
.disable { opacity:0.4; cursor:default }
.btn_white { width:100%; background:#fff; text-align:center; padding:7px 0px; border:1px #d7d7d7 solid; display:block;}
.btn_back { width:100%; height:45px; font-size:17px; font-weight:700; line-height:43px; border-radius:30px; border:2px #111 solid; display:block; }
.wd50 { width:50%; display: inline-block;}
/* html5 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display:block;}

/* 메인 */
.into_wrap { position:absolute; width:100%; height:100vh; }
.wrap { position:relative; margin:0; padding:0; 
  padding-top: env(safe-area-inset-top);
  margin-bottom: env(safe-area-inset-bottom);}
.no_padding { padding-top:0 !important;}
.content {padding-top:63px; padding-bottom: 20px;}
.cash {padding:25px 15px 20px; border-bottom:1px solid #e1e1e1; zoom:1;}
.cash a { display:block;}
.cash:after {clear:both; content:''; display:block;}
.cash dl {padding-bottom:20px;}
.cash dl dt {width:146px; padding-bottom:7px;}
.cash dl dt img {width:100%;}
.cash dl dd {font-size:13px; text-align:left;}
.cash dl dd:after { content:''; display:inline-block; width:6px; height:12px; background:url(/assets/images/main/ico_arrow.png) no-repeat; background-size:6px; position:relative; top:3px; margin-left:5px;} 
.cash p {line-height:80px; text-align:right; font-size:80px; font-weight:400; position:relative;}
.cash p .small { font-size:58px;}
.cash p span {width:31px; height:31px; display:inline-block; vertical-align:middle; position:relative; top:5px;}
.cash p span img {width:100%;}

.cash.small_cash {padding:20px 15px 15px;}
.cash.small_cash dl { padding-bottom:10px;}
.cash.small_cash dl dt {padding-bottom:5px;} 
.cash.small_cash p { font-size:48px; line-height:48px;}
.cash.small_cash p span { width:20px; height:20px; top:4px;}
.cash_icon .swipe {zoom:1;}
.cash_icon .swipe:after {clear:both; content:''; display:block;}
.cash_icon .swipe .swipe_y {height:180px; float:left; width:50%; border-bottom:1px solid #e1e1e1; border-left:1px solid #d7d7d7; box-sizing:border-box;}
.cash_icon .swipe .swipe_y:nth-child(odd) {border-left:none;}
.cash_icon .swipe .swipe_y a { width:100%; height:180px; display:block;}
.cash_icon .swipe .swipe_y a dl { vertical-align:middle; text-align:center; padding-bottom:0px;}
.cash_icon .swipe .swipe_y a dl dt {width:70px; display:inline-block; height:90px; line-height:90px;}
.cash_icon .swipe .swipe_y:last-child a dl dt{ width:63px;}
.cash_icon .swipe .swipe_y a dl dt img {width:100%; vertical-align:bottom;}
.cash_icon .swipe .swipe_y a dl dd.icon_tt {padding:20px 0 5px; font-size:17px; font-weight:700; color:#111;}
.cash_icon .swipe .swipe_y a dl dd {color:#797979;}
.banner { position: fixed; bottom: 0; left: 0; right: 0; }
.banner img { max-width: 100%; width: 100%; }

/*메인상점*/
.cash_list ul li {border-bottom:1px solid #e1e1e1;}
.cash_list ul li a {display:block; padding:20px 15px;}
.cash_list ul li a dl {display:table; width:100%;}
.cash_list ul li a dl dd {display:table-cell; vertical-align:middle; text-align:left; padding-right:10px;}
.cash_list ul li a dl dd .list_tt {font-size:17px; font-weight:700; padding-bottom:10px; line-height:16px;}
.cash_list ul li a dl dd .list_tt span {margin-left: 5px;}
.cash_list ul li a dl dd .list_st {font-size:14px; line-height:18px; color:#797979; }
.cash_list ul li a dl dt {width:54px; height:54px; float:right;}
.cash_list ul li a dl dt img {width:100%;}
.inquiry {padding:20px 15px 30px; margin-bottom:0px;}
.inquiry a {float:right;}
.inquiry img {width:17px; vertical-align:middle;}
.inquiry span {margin-right:5px; display:inline-block; padding-bottom:1px; border-bottom:1px solid #797979; color:#797979;}


/*메인이벤트*/
.event_list { padding:0px; }
.event_list ul li { border-bottom:1px solid #e1e1e1; margin-bottom:15px;}
.event_list ul li .event_img img{ width:100%}
.event_list ul li dl { padding:15px;}
.event_list ul li dl dt { font-size:17px; font-weight:700; padding-bottom:7px; line-height:17px;}
.event_list ul li dl dd { color:#797979; font-size:14px;}

/*메인 셋팅*/
.setting_top { width:100%; height:131px; padding:40px 15px; box-sizing: border-box; background:url(/assets/images/common/img_setting_top.png) no-repeat right bottom; background-size:105px; color:#fff}
.setting_top p { font-size:17px; margin-bottom:12px;}
.setting_top p span { opacity:0.8; margin-right:10px;}

footer { position: fixed; bottom:0px; width:100%; height:60px;  overflow:hidden;  text-align:center; background-size:1px 85px;  z-index:99;}
footer a { display:block;}
footer img { max-width:100%; height:60px; }

#visual {overflow:hidden;}
#visual .new {width:15px; height:15px; display:block; position:absolute; left:50%; margin-left:-20px; top:12px;  z-index:999;}
#visual .new img {width:100%;}
#visual .slider { width:100%; overflow:hidden; position:relative;}
#visual  .gnb { position:fixed; top:0px; left:0px; width:100%; height:55px; background:#fff; border-bottom:1px #d7d7d7 solid; }
#visual  .gnb span {width:25%; height:55px; float:left; text-align:center; display:block; cursor:pointer; position:relative;  }
#visual  .gnb span a { display:block; height:55px;  text-indent:-999999em; overflow: hidden; cursor:pointer;}

#visual .gnb span:nth-child(1) { background:url(/assets/images/main/ico_nav01.png) no-repeat center; background-size:90px; }
#visual .gnb span:nth-child(2) {background:url(/assets/images/main/ico_nav02.png) no-repeat center; background-size:90px; }
#visual .gnb span:nth-child(3) {background:url(/assets/images/main/ico_nav03.png) no-repeat center; background-size:90px; }
#visual .gnb span:nth-child(4) {background:url(/assets/images/main/ico_nav04.png) no-repeat center; background-size:90px; }
#visual .gnb span.on:nth-child(1) {background:url(/assets/images/main/ico_nav01on.png) no-repeat center; background-size:90px;}
#visual .gnb span.on:nth-child(2) {background:url(/assets/images/main/ico_nav02on.png) no-repeat center; background-size:90px;}
#visual .gnb span.on:nth-child(3) {background:url(/assets/images/main/ico_nav03on.png) no-repeat center; background-size:90px;}
#visual .gnb span.on:nth-child(4) {background:url(/assets/images/main/ico_nav04on.png) no-repeat center; background-size:90px;}
#visual .gnb span.on:after {  width:25px; height:2px; position:absolute; left:50%; margin-left:-12.5px; bottom:0px; content:''; background: -webkit-linear-gradient(left, #0eee91, #2fc9ee); background: linear-gradient(left, #0eee91, #2fc9ee);}

 @media screen and (max-width:340px) and (min-width:220px){
	 .cash p { font-size:67px;}
	 .cash p .small { font-size:53px;}
	 .cash p span { width:28px; height:28px;}
	 .event_top dl { padding-left:120px;}
	 .event_top { background: url(/assets/images/common/img_event_top.png) no-repeat left center; background-size:110px;   }
	 .event_top dl dt { font-size:22px;  line-height:20px;}
 }

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { /* WebKit browsers */ color:transparent; } input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:transparent; } input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ color:transparent; } input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */ color:transparent; }

/* 모바일쿠폰 상점 */
.mobilecoupon_list ul li {border-bottom:1px solid #e1e1e1;}
.mobilecoupon_list ul li a {display:block; padding:10px 1px;}
.mobilecoupon_list ul li a dl {display:table; width:100%;}
.mobilecoupon_list ul li a dl dd {display: table-cell; vertical-align: middle; text-align: left; padding-left: 15px;}
.mobilecoupon_list ul li a dl dd .list_tt {font-size: 13px; font-weight: 400; padding-bottom: 1px; color: #888;}
.mobilecoupon_list ul li a dl dd .list_tt span {margin-left: 5px;}
.mobilecoupon_list ul li a dl dd .list_st {font-size: 16px; line-height: 1.5; color: #111;}
.mobilecoupon_list ul li a dl dt {width: 90px; display: table-cell; vertical-align: middle;}
.mobilecoupon_list ul li a dl dt img {width: 100%;}
.mobilecoupon_list ul li a dl dd img {width: 18px; vertical-align: middle;}
.mobilecoupon_list ul li a dl dd em {padding: 5px;}

/* 오퍼월 리스트 */
.offerwall_list ul li {border-bottom:1px solid #e1e1e1;}
.offerwall_list ul li a {display:block; padding:10px 1px;}
.offerwall_list ul li a dl dt {font-size: 16px; font-weight: 400;}
.offerwall_list ul li a dl dd {font-size: 13px; line-height: 18px; color: #888; padding-bottom: 3px;}

/* 공통로딩 */ 
.load{
  --loading_color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 99999999;
  width: 100%;
  height: 100%;
}
.load::before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: loading-ani .8s infinite ease backwards;
          animation: loading-ani .8s infinite ease backwards;
  border-radius: 100%;
  content: '';
  position: absolute;
  height: 8px;
  width: 8px; 
}
@-webkit-keyframes loading-ani {
  0% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
  15% {
    -webkit-box-shadow: -30px -20px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -20px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
  30% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -20px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -20px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
  45% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -20px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -20px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
  60% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -20px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -20px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
  75% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -20px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -20px 0 0 var(--loading_color); }
  100% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
}
@keyframes loading-ani {
  0% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
  15% {
    -webkit-box-shadow: -30px -20px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -20px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
  30% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -20px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -20px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
  45% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -20px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -20px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
  60% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -20px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -20px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
  75% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -20px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -20px 0 0 var(--loading_color); }
  100% {
    -webkit-box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color);
            box-shadow: -30px -10px 0 0 var(--loading_color), -15px -10px 0 0 var(--loading_color), 0 -10px 0 0 var(--loading_color), 15px -10px 0 0 var(--loading_color), 30px -10px 0 0 var(--loading_color); }
}