@charset "utf-8";

.mo{display: none;}
.membership .inr{max-width: 940px; margin: 0 auto; text-align: center;}
.membership img{width: 100%;}

.membership header{height: 50px; background-color: #fff;}
.membership header .inr{position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%;}

.membership header .logo{ display: flex; align-items: center; gap: 4px; padding-right: 30px; }
/* .membership header .logo{font-size: 15px; font-weight: 600; color: #303030; height: calc(100% - 4px); display: flex; align-items: center;} */
/* .membership header .logo::before{content: ''; display: inline-block; margin: -2px 6px 0 0; width: 15px; height: 19px; background: url(../images/icon_logo.png) 0 0 / 100% 100% no-repeat;} */
/* .membership header .logo::after{content: ''; display: inline-block; margin-left: 4px; width: 6px; height: 10px; background: url(../images/icon_logo_go.png) 0 0 / 100% 100% no-repeat;} */
.membership header .btn_share{width: 18px; height: 20px;}
.membership header .share_box{display: none; position: absolute; top: 50px; right: -90px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); background-color: #fff; border: 1px solid #303030; border-radius: 10px; padding: 16px 15px; z-index: 99999;}
.membership header .share_box::before{content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); display: inline-block; width: 16px; height: 10px; background: url(../images/sharepop_bg.png) 0 0 / 100% 100% no-repeat;}
.membership header .share_box strong{font-size: 16px; color: #000; font-weight: 700;}
.membership header .share_box .list_box{display: flex; flex-wrap: wrap; gap: 14px 16px; max-width: 168px; margin-top: 8px; padding: 0 8px;}
.membership header .share_box .list_box button{width: 40px; height: 40px; flex: 0 0 40px;}
.membership header .share_box .share_close{position: absolute; top: 15px; right: 16px; width: 16px; height: 16px; text-indent: -9999px; background: url(../images/btn_sharepop_close.png) 0 0 / 100% 100% no-repeat;}


.membership .title{background-image: url(../images/202606/m_bg_title.png), linear-gradient(to bottom, #53bcff 380px, #d0edff 380px); background-position: center top; background-repeat: no-repeat; background-size: cover;}

.membership .maintitle{background-image: url(../images/new/bg_01.png), linear-gradient(to bottom, #F2F5F6 380px, #F2F5F6 380px); background-position: center top; background-repeat: no-repeat; background-size: 100vw auto, auto, auto;}
.membership .maintitle .log   {height: 900px; padding: 0 30px; max-width: 900px; margin: 0 auto; text-align: center;}
.membership .maintitle .title_wrap        {height: auto; padding: 0 30px; }
.membership .maintitle .title_wrap .info1 {height: 400px; padding: 0 30px; }
.membership .maintitle .title_wrap .info2 {height: 430px; padding: 0 30px; }


.membership .content{background-color: #FFF7DB; padding: 60px 0 80px; min-height: calc(100vh - 470px);}
.membership .content h3{font-size: 32px; font-weight: 800; margin-bottom: 32px;}
.membership .content .btn_gomain{display: none;}




/* 메인페이지 */
.membership .issue{background: #F2F4F6 ; padding: 32px 0 80px;}
.membership .issue .inr{text-align: center; position: relative;}
/*
.membership .issue .inr::before{content: ''; position: absolute; left: -65px; top: 205px; display: inline-block; width: 120px; height: 103px;}
.membership .issue .inr::after{content: ''; position: absolute; right: -70px; top: 230px; display: inline-block; width: 160px; height: 115px; }
*/
.membership .issue .issue_wrap{height: 400px; padding: 0 0px; }
.membership .issue .issue_wrap img{width: auto; margin: 0 auto;}



.membership .idcade{background-image: url(../images/bg_02.png), linear-gradient(to bottom, #3373F4 380px, #3373F4 380px); background-position: center top; background-repeat: no-repeat; background-size: 100vw auto, auto, auto;}
.membership .idcade .inr{text-align: center; position: relative;}
/*
.membership .idcade .inr::before{content: ''; position: absolute; left: -65px; top: 205px; display: inline-block; width: 120px; height: 103px;}
.membership .idcade .inr::after{content: ''; position: absolute; right: -70px; top: 230px; display: inline-block; width: 160px; height: 115px; }
*/
.membership .idcade .idcade_wrap{height: 330px; padding: 0 0px; }
.membership .idcade .idcade_wrap img{width: auto; margin: 0;}


.membership .card_hint .card_hint_wrap{height: 1130px; padding: 0 0px; }
.membership .card_hint .card_hint_wrap img{width: auto; margin: 0 auto;}
.membership .card_hint{background-image: url(../images/bg_03.png), linear-gradient(to bottom, #FFFF89 380px, #FFFF89 380px); background-position: center top; background-repeat: no-repeat; background-size: 100vw auto, auto, auto;}
.membership .card_hint .inr{text-align: center; position: relative;}



.membership .coupon{background-image: url(../images/bg_03.png), linear-gradient(to bottom, #FFFF89 380px, #FFFF89 380px); background-position: center top; background-repeat: no-repeat; background-size: 100vw auto, auto, auto;}
.membership .coupon .inr{text-align: center; position: relative;}
/*
.membership .coupon .inr::before{content: ''; position: absolute; left: -65px; top: 205px; display: inline-block; width: 120px; height: 103px;}
.membership .coupon .inr::after{content: ''; position: absolute; right: -70px; top: 230px; display: inline-block; width: 160px; height: 115px; }
*/

.membership .roulette{background-image: url(../images/bg_04.png), linear-gradient(to bottom, #EBEFF1 380px, #EBEFF1 380px); background-position: center top; background-repeat: no-repeat; background-size: 100vw auto, auto, auto;}
.membership .roulette .inr{text-align: center; position: relative;}
/*
.membership .roulette .inr::before{content: ''; position: absolute; left: -65px; top: 205px; display: inline-block; width: 120px; height: 103px;}
.membership .roulette .inr::after{content: ''; position: absolute; right: -70px; top: 230px; display: inline-block; width: 160px; height: 115px; }
*/
.membership .roulette .roulette_wrap{height: 1160px; padding: 52px 0px 70px; }
.membership .roulette .roulette_wrap img{width: auto; margin: 0 auto;}
.membership .roulette .roulette_wrap .top  {height: 200px; padding: 0 30px; }
.membership .roulette .roulette_wrap .tick {height: 200px; padding: 0 30px; }
.membership .roulette .roulette_wrap .main {height: 600px; padding: 0 30px; }
.membership .roulette .roulette_wrap .main .contents3_coupon05 img{width: auto; margin: 0 auto;}

.membership .coupon_use{background:#F0F3F5;padding: 32px 0 80px;}
.membership .coupon_use .inr{text-align: center; position: relative;}
/*
.membership .coupon_use .inr::before{content: ''; position: absolute; left: -65px; top: 205px; display: inline-block; width: 120px; height: 103px;}
.membership .coupon_use .inr::after{content: ''; position: absolute; right: -70px; top: 230px; display: inline-block; width: 160px; height: 115px; }
*/
.membership .coupon_use .coupon_use_wrap{height: 440px; padding: 0 0px; }
.membership .coupon_use .coupon_use_wrap img{}



img{
  width: auto;     /* 가로는 화면 크기에 맞게 */
  height: auto;    /* 세로는 비율 유지 */
/*   display: block;  img 기본 여백 제거 */
}

.imgAuto {width: auto; margin: 0 auto;}
.info {
    position:relative;
} 
.contents1 {
    position:relative;
    width:100%;
    height : auto;
} 
.contents2, .contents3 {
    position:relative;
    width:100%;
    height : 100%;
    margin-top: 10px;
} 

.contents4 {
    position:relative;
    padding:15% 0;
    width:100%;
    background:#F0F3F5;
} 

.info_icon01{position: absolute; width:100%;top:20px}
.info_icon01_day{position: absolute;top:392px;left:52%; transform: translate(-50%, 0%);z-index:2}
.info_icon01_day span{color:#fff;font-size:24px;font-weight:800}
.info_icon02{position: absolute; width:100%;}
.info_icon03{position: absolute; width:100%;}
.info_icon04{position: absolute; width:100%;z-index:2;    max-width: 47vw;    left: 50%;    transform: translateX(-50%);}
.info_icon05{position: absolute; top:34px;width:100%;z-index:1}
.info_icon05Box{padding:40px 20px 20px; ; width:100%; 
            background-color: #fff;
            border-radius: 20px;}
.info_icon05Box_txt{
            margin-top:0px;
            padding:20px 0 20px 20px;
            width:100%; 
            background-color: #F2F5F6;
            border-radius: 20px;
            font-size:20px;
            text-align:left;
            
            }
.txt{padding:0.4% 0}
.tb{font-size:20px;font-weight:600;}

.info_icon06{position: absolute;width:100%;z-index:2}
.info_icon07{position: absolute; top:30px;width:100%;z-index:1}
.info_icon07Box{padding:60px 20px 20px; width:100%; 
            background-color: #fff;
            border-radius: 20px;}
.info_icon07Box_txt{
            padding:20px 0 0; width:100%; 
            background-color: #fff;
            border-radius: 20px;
            font-size:20px;
            text-align:center;}
.txt07{font-size:20px;font-weight:800;}




.contents1Box{position: absolute;left:60px;}
.contents2Box{position: absolute;left:670px;top:50px;}
.idcade_title{padding:40px 0px 20px;}
.idcade_btn  {padding:20px 0px; text-align:left;}
.idcade_Box_txt{padding:0.4% 0px 15px; width:100%; 
            
                border-radius: 20px;
                font-size:20px;
                text-align:left;}
.txtF{padding:0.4% 0;color:#fff}

.contents2_title   {padding-top:52px}
.contents2_coupon_frame{ margin-top:24px;}
.contents2_coupon{position: relative;  padding:20px 0;height:370;}

.contents2_coupon ul {text-align:center;width:100%}
.contents2_coupon ul li {display:inline-block; width:260px;}
    
.contents2_coupon01{position: absolute; left: 40px; width:260px;object-fit: cover;}
.contents2_coupon02{position: absolute; left:340px; width:260px;object-fit: cover;}
.contents2_coupon03{position: absolute; left:640px; width:260px;object-fit: cover;}
.contents2_coupon04{position: absolute; left:190px; width:260px;object-fit: cover;}
.contents2_coupon05{position: absolute; left:490px; width:260px;object-fit: cover;}
.contents2_bar     {position: absolute; bottom:100px;right:-250px;}


.contents2_coupon_mo{width:100%; height:100%;}

.contents2_bottom_title{position: absolute;left:50%;  bottom:70px;  transform: translate(-50%, 0%);}

.contents2_coupon_txt{position: absolute; top:40px; width:100%; z-index:2 }
.hint_txt_Box {padding:10%;width:100%;height:100%;text-align:center;font-size:20px;color:#fff;}
.hint_txt{padding-top:10%;color:#fff}
.hint_txt span{color:#FFFF89}

.contents3_title        {position: absolute; width:100%;}

.contents3_coupon       {position: absolute;  left:50%; transform: translate(-50%, 0%);}

.card_hint .next{width:100%;height:20px; line-height:20px; text-align:center;}
.coupon_wrap .next{width:100%;height:20px; line-height:20px; text-align:center;}

.contents3_coupon01     {float:left;width:175px;height:114px; margin:0 20px; background: url(../images/coupon_bg.png) 0 0 / 100% 100% no-repeat;}

.contents3_coupon01_icon{width:100%;}
.contents3_coupon01_icon img {padding-top:20px;width: auto;}
.contents3_coupon01_text{width:100%;padding-top:15px;font-size:24px;font-weight:800;}

.contents3_coupon02     {width:100%;}
.contents3_coupon02_icon{width:100%;text-align:center;}
.contents3_coupon02_icon img {display:inline-block;padding-top:20px;width: auto;}
.contents3_coupon02_text{width:100%;padding-top:15px;font-size:24px;font-weight:800;}


.contents3_coupon03{position: absolute; top:-40px;width:93px;z-index:2;left:50%; transform: translate(-50%, 0%);}
.contents3_coupon04{position: absolute; width:100%; left:50%; transform: translate(-50%, 0%);}
.contents3_coupon05{position: absolute; top:210px;left:50%; transform: translate(-50%, 0%);}

 
.contents3_coupon05{position: absolute; width:100%;}
.contents3_bar{position: absolute;width:100%;}
.contents3_bottom_title{position: absolute;  width:100%;}

.contents4_title { width:100%;}
.contents4_icon01{ width:100%;}

.footer {
    position:relative;
    padding-bottom:40%;
    width:100%;
    height:auto;
    background:#FFF;
} 

.footer1Box{position: absolute; top: 10%;  left:30%; width:40%;}
.footer2Box{position: absolute; top: 40%;  left:30%; width:40%;}
.txtB{padding:0.4% 0;color:#000}
        







.membership .issue .point_wrap{display: flex; align-items: center; text-align: center; height: 190px;}
.membership .issue .point_wrap .mypoint{flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px;}
.membership .issue .point_wrap .mypoint span{display: flex; align-items: center; justify-content: center; width: 280px; height: 44px; font-size: 18px; letter-spacing: -0.02em; color: #676767; background-color: #F9F9F9; border-radius: 10px;}
.membership .issue .point_wrap .mypoint span button{color: #00A14E; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;}
.membership .issue .point_wrap .mypoint span em{font-size: 26px; font-weight: 900; letter-spacing: -0.02em; color: #00A14E;}
.membership .issue .point_wrap a{display: flex; align-items: center; justify-content: center; flex: 1; height: 50%;}



.membership .issue .digicard{margin: 56px 0 45px;}

.membership .issue .btn_issue{position: relative; display: inline-block;}
.membership .issue .btn_issue::after{content: ''; position: absolute; top: -33px; right: -28px; display: inline-block; width: 70px; height: 70px; background: url(../images/bg_bird.png) 0 0 / 100% 100% no-repeat;}





.membership .info{padding: 80px 0; background: #FA6025 url(../images/bg_info.png) center bottom no-repeat;}
.membership .info .guide{margin-bottom: 64px; position: relative;}
.membership .info .guide #btn_pointguide{position: absolute; left: 96px; top: 356px; display: inline-block; width: 136px; height: 36px; text-indent: -9999px;}
.membership .info .guide #btn_pointguide:focus-visible{outline-color: blue;}




.membership .draw{padding: 92px 0 80px; background: #FFF7DB url(../images/bg_draw.png) center no-repeat;}
.membership .draw .inr{position: relative;}
.membership .draw .coupon-container{position: relative; z-index: 2; margin: 0 auto; }
.membership .draw .coupon-container::before{content: ''; display: inline-block; width: 361px; height: 233px; background: url(../images/bg_hojong.png) 0 0 / 100% 100% no-repeat;}
.membership .draw .coupon-container .inner{position: absolute; top: 190px; left: 50%; transform: translateX(-50%); width: 240px; height: 314px;}
.membership .draw .coupon-container .coupon-piece{position: absolute; width: 100%; height: 100%; background: url(../images/hojong_card.png) center / 100% 100% no-repeat; transform-origin: bottom center;}
.membership .draw .coupon-container .coupon-piece:nth-child(1) {animation: left 2s ease-in-out infinite;}
.membership .draw .coupon-container .coupon-piece:nth-child(2) {transform: rotate(0deg);z-index: 10;}
.membership .draw .coupon-container .coupon-piece:nth-child(3) {animation: right 2s ease-in-out infinite;}
.membership .draw .bg_coin img{position: absolute; z-index: 1; width: 150px; animation: top-bottom 2s ease-in-out infinite;}
.membership .draw .bg_coin .coin_tl{top: 20px; left: 125px; animation-delay: 1s;}
.membership .draw .bg_coin .coin_tr{top: 50px; right: 88px;}
.membership .draw .bg_coin .coin_bl{top: 240px; left: 25px;}
.membership .draw .bg_coin .coin_br{top: 315px; right: 38px; animation-delay: 1s;}
.membership .draw .btn_wrap{margin-top: 322px;}
.membership .draw button{display: block; margin: 0 auto 24px;}
.membership .draw a{display: inline-block;}






@keyframes left {
    0%, 100% {
        transform: rotate(0deg) translateX(0) translateY(0);
    }
    30%, 70% {
        transform: rotate(-10deg) translateX(-100px) translateY(-30px);
    }
}

@keyframes right {
    0%, 100% {
        transform: rotate(0deg) translateX(0) translateY(0);
    }
    30%, 70% {
        transform: rotate(10deg) translateX(100px) translateY(-30px);
    }
}

@keyframes top-bottom{
    0%{
        margin-top: 0;
    }
    50%{
        margin-top: -10px;
    }
    100%{
        margin-top: 0;
    }
}


/* 포인트 적립 및 사용 현황 */
.membership .point_top{margin-bottom: 32px; text-align: right;}
.membership .point_top #btn_pointguide{color: #676767; font-size: 15px; font-weight: 500;}
.membership .point_top div{height: 100px; background: #FA6025 url(../images/bg_point.png) center / 100% 100% no-repeat; border-radius: 8px; padding: 20px 0; margin-top: 6px; text-align: center;}
.membership .point_top p{color: #FFF7DB; font-size: 18px; font-weight: 700; margin-bottom: 4px;}
.membership .point_top span{color: #fff; font-size: 32px; font-weight: 700; line-height: 34px;}
.membership .point_sort{display: flex; align-items: center; gap: 8px; margin-bottom: 16px;}
.membership .point_sort a{width: 60px; height: 36px; line-height: 36px; text-align: center; border: 1px solid #676767; border-radius: 99px; color: #676767; font-weight: 500; font-size: 16px; letter-spacing: -0.02em;}
.membership .point_sort a:focus-visible{outline-color: red;}
.membership .point_sort a.on{background-color: #303030; color: #fff; font-weight: 700; border: 1px solid #303030;}
.membership .point_list ul li{position: relative; display: flex; flex-direction: column; justify-content: center; text-align: left; height: 114px; padding: 0 32px; margin-bottom: 16px; background-color: #fff; border-radius: 8px; }
.membership .point_list li span{color: #000; font-size: 18px; font-weight: 700; }
.membership .point_list li span em{color: #666; font-size: 14px; font-weight: 400; padding-left: 8px;}
.membership .point_list li p{color: #333; font-size: 16px; margin-top: 8px;}
.membership .point_list .point{position: absolute; right: 32px; top: 50%; transform: translateY(-50%); color: #FA6025; font-size: 24px; font-weight: 700;}
.membership .point_list .btn_more{display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 18px; font-weight: 500; width: 100%; height: 45px;}
.membership .point_list .btn_more::after{content: ''; display: inline-block; width: 10px; height: 6px; margin-left: 8px; background: url(../images/btn_more.png) 0 0 / 100% 100% no-repeat;}


/* 멤버십 쿠폰함 */
.membership .card_hint_wrap .no_coupon{padding: 40px 0; text-align: center;}
.membership .card_hint_wrap .no_coupon img{width: 90px;}
.membership .card_hint_wrap .no_coupon p{font-size: 18px; line-height: 26px; margin-top: 24px; color: #676767;}
.membership .card_hint_wrap ul{display: flex; flex-wrap: wrap;}
.membership .card_hint_wrap li{position: relative; background-color: #fff; border-radius: 10px; flex: 0 0 454px; height: 190px; padding: 0 37px;}
.membership .card_hint_wrap li::before, .membership .coupon_wrap li::after{content: ''; position: absolute; top: 46px; left: 0; display: inline-block; width: 16px; height: 32px; background: url(../images/bg_coupon_left.png) 0 0 / 100% 100% no-repeat;}
.membership .card_hint_wrap li::after{background-image: url(../images/bg_coupon_right.png); left: auto; right: 0;}
.membership .card_hint_wrap li .region{position: relative; display: block; color: #00A14E; font-size: 22px; font-weight: 700; text-align: center; padding: 20px 0 16px;}
.membership .card_hint_wrap li .region::after{content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background: url(../images/bg_line.png) 0 0 / 8px 1px repeat-x;}
.membership .card_hint_wrap li .conwrap{padding: 30px 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;}
.membership .card_hint_wrap li .conwrap div{max-width: 290px;}
.membership .card_hint_wrap li .conwrap .store{font-size: 18px; font-weight: 700; color: #333; line-height: 24px;}
.membership .card_hint_wrap li .conwrap p{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 4px; font-size: 14px; letter-spacing: -0.02em; line-height: 18px;}
.membership .card_hint_wrap li .period{font-size: 12px; color: #7B7B7B;}
.membership .card_hint_wrap li button{flex-shrink: 0; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.02em; width: 80px; height: 42px; line-height: 42px; border-radius: 8px; background-color: #FA6025;}
.membership .card_hint_wrap li button.finish{background-color: #8B8B8B;}
.membership .card_hint_wrap li button.expire{background-color: #303030;}
.membership .card_hint_wrap li button.expire:focus-visible{outline-color: red;}
.membership .card_hint_wrap li button.invalid{background-color: #8B8B8B;}
.membership .card_hint_wrap li button.stop{background-color: #303030;}

/* 멤버십 쿠폰함 */
.membership .coupon_wrap .no_coupon{padding: 40px 0; text-align: center;}
.membership .coupon_wrap .no_coupon img{width: 90px;}
.membership .coupon_wrap .no_coupon p{font-size: 18px; line-height: 26px; margin-top: 24px; color: #676767;}
.membership .coupon_wrap ul{display: flex; flex-wrap: wrap; gap: 32px;}
.membership .coupon_wrap li{position: relative; background-color: #fff; border-radius: 10px; flex: 0 0 454px; height: 190px; padding: 0 37px;}
.membership .coupon_wrap li::before, .membership .coupon_wrap li::after{content: ''; position: absolute; top: 46px; left: 0; display: inline-block; width: 16px; height: 32px; background: url(../images/bg_coupon_left.png) 0 0 / 100% 100% no-repeat;}
.membership .coupon_wrap li::after{background-image: url(../images/bg_coupon_right.png); left: auto; right: 0;}
.membership .coupon_wrap li .region{position: relative; display: block; color: #00A14E; font-size: 22px; font-weight: 700; text-align: center; padding: 20px 0 16px;}
.membership .coupon_wrap li .region::after{content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background: url(../images/bg_line.png) 0 0 / 8px 1px repeat-x;}
.membership .coupon_wrap li .conwrap{padding: 30px 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;}
.membership .coupon_wrap li .conwrap div{max-width: 290px;}
.membership .coupon_wrap li .conwrap .store{font-size: 18px; font-weight: 700; color: #333; line-height: 24px;}
.membership .coupon_wrap li .conwrap p{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 4px; font-size: 14px; letter-spacing: -0.02em; line-height: 18px;}
.membership .coupon_wrap li .period{font-size: 12px; color: #7B7B7B;}
.membership .coupon_wrap li button{flex-shrink: 0; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.02em; width: 80px; height: 42px; line-height: 42px; border-radius: 8px; background-color: #FA6025; background: linear-gradient(90deg, #0055FF 0%, #00BF9F 100%);}
.membership .coupon_wrap li button.finish{background: none; background-color: #8B8B8B;}
.membership .coupon_wrap li button.expire{background: none; background-color: #303030;}
.membership .coupon_wrap li button.expire:focus-visible{outline-color: red;}
.membership .coupon_wrap li button.invalid{background: none; background-color: #8B8B8B;}
.membership .coupon_wrap li button.stop{background: none; background-color: #303030;}


footer{padding: 32px 0;}
.membership footer .inr{text-align: left;}
footer p{margin-bottom: 32px;}
footer span{display: block; color: #0055FF; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px;}
footer p, footer li{font-size: 15px; line-height: 23px; position: relative; padding-left: 12px;}
footer p::before, footer li::before{content: ''; position: absolute; left: 5px; top: 10px; display: inline-block; width: 2px; height: 2px; background-color: #303030;}

 /* popup */
.dim { background:rgba(0, 0, 0, 0.1) !important; } 
.dim_inactivate { background: rgba(0, 0, 0, 0.6) !important; pointer-events:none; } 
.layer_wrap .dim { position:fixed; left:0; top:0; z-index:1001; width:100%; height:100%; } 
.layer_wrap .dim_inactivate { position:fixed; left:0; top:0; z-index:1001; width:100%; height:100%; } 
.layer_wrap { word-break:keep-all; line-height: 1.2; position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; } 
.layer_wrap .dim { display:block; position:fixed; left:0; top:0; z-index:1001; width:100%; height:100%; } 
.layer_wrap .pop_con {max-height: calc(100% - 60px); overflow-y: auto; position: fixed; top: 50%; left:50%; right:unset; z-index: 1002; width: 640px; border-radius: 20px; padding:40px 30px; -webkit-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } 
.layer_wrap .pop_con .con{text-align: center;}
.layer_wrap .pop_con .con .tax {text-align: left;}
.layer_wrap .btn_pop_close { width:28px; height:28px; text-indent: -9999px; position: absolute; top: 24px; right: 24px; background: url(../images/btn_popclose.png) 0 0 / 100% 100% no-repeat;} 
.layer_wrap .btn_check{display: flex; align-items: center; justify-content: center; width: fit-content; height: 50px; color: #fff; font-size: 24px; font-weight: 700; background-color: #303030; border-radius: 5px; padding: 0 32px; margin: 32px auto 0;}

#pointPop .pop_con{background: #00A14E;}

#couponPop .pop_con{background: #FFD135; padding: 48px 32px;}
#couponPop .title span{font-size: 28px; display: inline-block; margin-bottom: 10px;}
#couponPop .title span em{font-weight: 700;}
#couponPop .title span::before, #couponPop .title span::after{content: ''; display: inline-block; margin-right: 10px; width: 40px; height: 22px; background: url(../images/coupon_tit_bg_left.png) 0 0 / 100% 100% no-repeat;}
#couponPop .title span::after{background-image: url(../images/coupon_tit_bg_right.png); margin: 0 0 0 10px;}
#couponPop .coupon_wrap{display: flex; align-items: center; justify-content: center; gap: 16px; padding: 40px 0;}
#couponPop .coupon_wrap .coupon{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 280px; height: 372px; padding: 20px 33px 0; background: url(../images/coupon_bg.png) 0 0 / 100% 100% no-repeat;}
#couponPop .coupon_wrap .coupon strong{display: inline; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; box-shadow: inset 0 -9px 0 0 rgba(179, 227, 202, 1);}
#couponPop .coupon_wrap .coupon span{font-size: 16px; letter-spacing: -0.02em; display: block; margin-top: 14px; word-break: break-all;}
#couponPop .btn_check{margin-top: 0;}

#storePop .pop_con{background: #FFD135;}
#storePop h3{font-size: 38px; font-weight: 700;}
#storePop .info{background-color: #fff; margin-top: 80px; position: relative; padding: 0 32px;}
#storePop .info::before{content: ''; position: absolute; top: -47px; left: 0; display: block; width: 100%; height: 48px; background: url(../images/storebg_top.png) 0 0 / 100% 100% no-repeat;}
#storePop .info li{padding: 16px 0; display: flex; align-items: center; border-bottom: 1px solid #e2e2e2; text-align: left;}
#storePop .info li.yes_btn p{display: flex; align-items: center; justify-content: space-between;}
#storePop .info li:last-child{border-bottom: none;}
#storePop .info span{width: 108px; font-size: 14px; color: #676767; font-weight: 500;}
#storePop .info p{flex: 1; font-size: 16px; font-weight: 500;}
#storePop .info .btn_storeinfo{height: 30px; line-height: 30px; padding: 5px 12px; background-color: #00A14E; border-radius: 6px; font-size: 12px; color: #fff; font-weight: 700;}
#storePop .code{background-color: #FA6025; position: relative; padding: 24px 32px 8px; margin-bottom: 85px;}
#storePop .code::after{content: ''; position: absolute; bottom: -53px; left: 0; display: block; width: 100%; height: 54px; background: url(../images/202603/storebg_bottom.png) 0 0 / 100% 100% no-repeat;}
#storePop .code p{font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -0.01em; margin-bottom: 16px;}
#storePop .code input{width: 100%; padding: 25px 0; text-align: center; background-color: #FFF7DB; border-radius: 8px; font-size: 17px; color: #676767;}
#storePop .code input::-webkit-input-placeholder{color: #676767 !important; font-size: 17px;}

#eventPop .pop_con{width: 500px;}
#eventPop .two_btn{height: 50px; background-color: #fff; display: flex; align-items: center;}
#eventPop .two_btn button{flex: 1; height: 100%; color: #4967E4; font-size: 19px; font-weight: 500;}
#eventPop .two_btn button + button{border-left: 1px solid #4967E4;}


#pickSignguPop { position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; } 
#pickSignguPop .usr-check{display: flex;align-items: center;flex-direction: row;width: 100%;padding: 0;margin: 0;justify-content: flex-start;box-sizing: border-box;}
#pickSignguPop .usr-check input{display: none;}
#pickSignguPop .usr-check input + label{display: inline-block;width: 24px;height: 24px;position: relative;margin-right: 10px;background: #FFFFFF;border: 1px solid #C0C0C0;border-radius: 2px;box-sizing: border-box;}
#pickSignguPop .usr-check input + label + label{font-weight: 700;font-size: 16px;letter-spacing: -0.02em;color: #000000;display: flex;flex-direction: row;align-items: center;justify-content: space-around;width: 80%;white-space: nowrap;padding-right: 10%;box-sizing: border-box;}
#pickSignguPop .usr-check input + label + label img{max-width: 35px;}
#pickSignguPop .usr-check input:checked + label{border: none;}
#pickSignguPop .usr-check input:checked + label::after{content: '';display: block;background-image: url("../images/popup/regn/coupon_check.png");background-size: cover;width: 24px;height: 24px;text-align: center;position: absolute;left: 0;top: 0;}
#pickSignguPop .usr-qr-coupon {
    position: fixed;
    top: 50%;
    left: 50%;

    width: 450px;
    max-width: 90vw;
    min-width: 320px;

    transform: translate(-50%, -50%);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
}
#pickSignguPop .usr-qr-coupon > div:nth-child(1){background: #FFD135;padding: 10px 10px 0px;display: flex;flex-direction: column;align-items: center;border-radius: 18px 18px 0 0;width: 100%;margin: 0;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(1) > *:nth-child(1){margin-left: auto;margin-right: 10px;margin-top: 10px;cursor: pointer;}
#pickSignguPop .usr-qr-coupon > div:nth-child(1) > *:nth-child(2){margin-top: 0;}
#pickSignguPop .usr-qr-coupon > div:nth-child(1) > *:nth-child(3){font-size: 18px;font-weight: 400;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2){display: flex;flex-direction: column;align-items: flex-start;row-gap: 20px;width: 100%;padding: 5% 5%;height: 62vh;overflow: auto;background-color: #fff;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > div{border-bottom: 1px solid #ccc;display: table;width: 100%;padding-bottom: 15px;text-align: left;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > div .usr-check input + label + label{justify-content: flex-start;cursor: pointer;font-size: 18px;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl{display: flex;flex-direction: column;row-gap: 18px;width: 100%;margin: 0;padding: 0;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dt{font-weight: 700;font-size: 18px;line-height: 34px;letter-spacing: -0.02em;color: #000000;text-align: left;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd{width: 100%;padding: 0;margin: 0;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul{display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;list-style-type: none;column-gap: 3%;width: 100%;margin: 0;padding: 0;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li{box-shadow: 0 0 0 1px #A4A4A4 inset;border-radius: 8px;margin-bottom: 3%;flex: 0 1 30%;display: flex;flex-direction: row;column-gap: 5%;align-items: center;justify-content: space-around;padding: 8px 3px;position: relative;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li.cus-item label{cursor: pointer;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li.cus-item.sel{box-shadow: 0 0 0 3px #009640 inset;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li.cus-item.no{box-shadow: 0 0 0 1px #DDDDDD inset;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li.cus-item.no label{cursor: default;color: rgba(0,0,0,0.3);box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li.cus-item.no .usr-check input + label{background: #E5E5E5;border: 1px solid #C0C0C0;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li.cus-item.end{box-shadow: 0 0 0 1px #DDDDDD inset;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li.cus-item.end label{cursor: default;color: rgba(0,0,0,0.3);box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li.cus-item.end .usr-check input + label{background: #E5E5E5;border: 1px solid #C0C0C0;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li.cus-item.end .usr-check img{filter: grayscale(100%);opacity: 0.5;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li.cus-item.end:after{content: "마감";display: block;border-radius: 20px 0px 20px 0px;background-color: #DC6335;font-size: 12px;font-weight: 700;padding: 3px 15px;color: #fff;position: absolute;right: 0;top: -14px;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li.cus-item .usr-check{flex-direction: row-reverse;justify-content: space-between;}
#pickSignguPop .usr-qr-coupon > div:nth-child(3){background: #FFD135;padding: 20px 20px;display: flex;flex-direction: column;align-items: center;border-radius: 0 0 18px 18px;width: 100%;box-sizing: border-box;}
#pickSignguPop .usr-qr-coupon > div:nth-child(3) button{background: #303030;border-radius: 10px;font-weight: 500;font-size: 24px;line-height: 29px;color: #FFFFFF;padding: 15px 40px;box-sizing: border-box;border: none;}

#pickSignguPop p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}


#rulettePop .con img{width: 260px; height: 198px;}

#rulettePop .pop_con{background: #E1FFE5; padding: 48px 32px; max-width:90vw;}
#rulettePop .coupon_wrap{display: flex; align-items: center; justify-content: center; gap: 16px; padding: 40px 0;}
#rulettePop .coupon_wrap .coupon strong{display: inline; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; box-shadow: inset 0 -9px 0 0 rgba(179, 227, 202, 1);}
#rulettePop .coupon_wrap .coupon span{font-size: 16px; letter-spacing: -0.02em; display: block; margin-top: 14px; word-break: break-all;}
#rulettePop .btn_check{margin-top: 0; border-radius: 20px;}





#couponPopNew .pop_con{background: #FFFF99; width: 400px;}
#couponPopNew .coupon_wrap{display: flex; align-items: center; justify-content: center; gap: 16px; padding: 40px 0;}
#couponPopNew .coupon_wrap .coupon strong{display: inline; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; box-shadow: inset 0 -9px 0 0 rgba(179, 227, 202, 1);}
#couponPopNew .coupon_wrap .coupon span{padding:10px 0px;font-size: 16px; display: block; margin-top: 14px; word-break: break-all;}
#couponPopNew .btn_check{margin-top: 0; border-radius: 20px;}
#couponPopNew .couponMessageBox{position: relative;}
#couponPopNew .couponMessage1{
  position: absolute;
  top: 230px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index:4;
  font-weight:800;
  color:#001C63;
}

#couponPopNew .couponMessage2{
  position: absolute;
  top: 290px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index:3;
  font-weight:400;
}


#couponPopNew .couponMessage1 .topmag{

}


/***퀴즈1 ****************************************/

#Quiz1Pop .pop_con{background: #C4EBFF; padding: 48px 32px;}
#Quiz1Pop .coupon_wrap{display: flex; align-items: center; justify-content: center; gap: 16px; padding: 40px 0;}
#Quiz1Pop .coupon_wrap .coupon{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 450px; height: 300px; padding: 20px 33px 0; }

#Quiz1Pop .coupon_wrap .coupon strong{display: inline; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
#Quiz1Pop .coupon_wrap .coupon span{font-size: 16px; letter-spacing: -0.02em; display: block; margin-top: 14px; word-break: break-all;}
#Quiz1Pop .btn_check{margin-top: 0; border-radius: 20px;}
#Quiz1Pop .quiztop{position: relative;}
  
#Quiz1Pop .quiztopIconBox {
  position: absolute;
  top: 40px;
  left: 54%;
  transform: translate(-50%, 0%);
  z-index:33
}

#Quiz1Pop .answerInput{
    width: 300px;
    height: 40px;
    line-height:40px;
    background:#FFF;
    border:1px solid #FFF;
    border-radius:20px;
    text-align:center;
    color:#000;
    cursor:pointer;
}
#Quiz1Pop .answerInput.On {background:#FFF;border:1px solid #0055FF;}


#Quiz1Pop .quiztopIconBox .step{float:left;width:45px;padding:10px}
#Quiz1Pop .quiztopIconBox .step img{width:40px;;}

/***퀴즈2 ****************************************/

#Quiz2Pop .pop_con{background: #C4EBFF; padding: 48px 32px; max-width:90vw;}
#Quiz2Pop .coupon_wrap{display: flex; align-items: center; justify-content: center; gap: 16px; padding: 40px 0;}
#Quiz2Pop .coupon_wrap .coupon{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 450px; height: 300px; padding: 60px 33px 0; }

#Quiz2Pop .coupon_wrap .coupon strong{display: inline;padding:10px 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
#Quiz2Pop .coupon_wrap .coupon span{font-size: 16px; letter-spacing: -0.02em; display: block; margin-top: 14px; word-break: break-all;}
#Quiz2Pop .btn_check{margin-top: 0; border-radius: 20px;}
#Quiz2Pop .quiztop{position: relative;}
  
#Quiz2Pop .quiztopIconBox {
  position: absolute;
  top: 40px;
  left: 54%;
  transform: translate(-50%, 0%);
  z-index:33
}

#Quiz2Pop .answerInput{
    width: 300px;
    height: 40px;
    line-height:40px;
    background:#FFF;
    border:1px solid #FFF;
    border-radius:20px;
    text-align:center;
    color:#000;
    cursor:pointer;
}

#Quiz2Pop .answerInput.On {background:#0055FF;border:1px solid #0055FF;color:#fff}
#Quiz2Pop .answerOk {padding-top:20px; color:#0055FF}
#Quiz2Pop .answerInput.Fail {background:#FFD5DB;border:1px solid #DD4F65;color:#DD4F65}
#Quiz2Pop .answerFail {padding:20px 0; color:#DD4F65}


#Quiz2Pop .quiztopIconBox .step{float:left;width:45px;padding:10px}
#Quiz2Pop .quiztopIconBox .step img{width:40px;}    


/***퀴즈3 ****************************************/

#Quiz3Pop .pop_con{background: #C4EBFF; padding: 48px 32px;}
#Quiz3Pop .coupon_wrap{display: flex; align-items: center; justify-content: center; gap: 16px; padding: 40px 0;}
#Quiz3Pop .coupon_wrap .coupon{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 450px; height: 300px; padding: 60px 33px 0; }

#Quiz3Pop .coupon_wrap .coupon strong{display: inline; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
#Quiz3Pop .coupon_wrap .coupon span{font-size: 16px; letter-spacing: -0.02em; display: block; margin-top: 14px; word-break: break-all;}
#Quiz3Pop .btn_check{margin-top: 0; border-radius: 20px;}
#Quiz3Pop .quiztop{position: relative;}
  
#Quiz3Pop .quiztopIconBox {
  position: absolute;
  top: 40px;
  left: 54%;
  transform: translate(-50%, 0%);
  z-index:33
}

#Quiz3Pop .answerInput{
    width: 300px;
    height: 40px;
    line-height:40px;
    background:#FFF;
    border:1px solid #FFF;
    border-radius:20px;
    text-align:center;
    color:#000;
    cursor:pointer;
}

#Quiz3Pop .answerInput.On {background:#FFD5DB;border:1px solid #DD4F65;color:#DD4F65}
#Quiz3Pop .answerOk {padding:20px 0; color:#DD4F65}

#Quiz3Pop .quiztopIconBox .step{float:left;width:45px;padding:10px}
#Quiz3Pop .quiztopIconBox .step img{width:40px;;}   



.link_visitkorea{width: 128px;height: 22px;background: url(../images/logo_visitkorea.svg) no-repeat 50% 50% / 128px 22px;}
.link_digt{width:122px;height:17px;background:url(../images/logo_menu.svg) no-repeat 50% 50% / 122px 26px;}


/* 260227 */
.membership .content{
    background-color:#EFF2F4;
}

.membership .title h2 .inr {
    padding: 70px 0;
}

.membership .title .inr img{
    max-width: 522px;
     shape-rendering: crispEdges; 

}

.membership .title .inr h5{
    font-weight: 600;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 0.1em;
    color: #FFFFFF;
}

#storePop .pop_con{
    background-color: #d0ecf7;
    background-image: url(../images/store_coupon_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#storePop .code {
    background-color: #55c24e;
}

#pickSignguPop .usr-qr-coupon > div:nth-child(1){
    background-color: #55c24e;
    background-image: url(../images/area_coupon_top_1.png),url(../images/area_coupon_top_2.png);
    background-repeat: no-repeat,no-repeat;
    background-position: top left,top 220% right;
}

#pickSignguPop .usr-qr-coupon > div:nth-child(1) h3{
    font-family: 'font-2';
    font-weight: bold;
    font-size: 34px;
    line-height: 42px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

#pickSignguPop .usr-qr-coupon > div:nth-child(1) > *:nth-child(3){
    color: #fff;
}

#pickSignguPop .usr-qr-coupon > div:nth-child(3){
    background: #55c24e;
}

#storePop .info .btn_storeinfo{
    line-height: 23px;
}

@media screen and (max-width:1023px){
    .pc{display: none;}
    .mo{display: block;}
    
    img{
        width:100%;
        margin:0;
    }
    .membership{display: flex;flex-direction: column;}

    .link_visitkorea{
        width: 28px;
        height: 28px;
        background: url("../images/common/logo_gusuk.svg") center center / contain no-repeat;
    }
    
    .membership .inr{max-width: 100%; padding: 0 5.556%;}

    .membership header{height: 48px;}
    .membership header .inr{padding: 0 20px;}
    .membership header .logo{font-size: 13px;}
    .membership header .share_box{right: 12px; top: 48px;z-index: 9999; }
    .membership header .share_box::before{right: 8px; left: auto; transform: translateX(0);}

    .membership .title{background: url(../images/202606/m_bg_title.png) center top / cover no-repeat;}
    .membership .title .inr{padding: 0;}
    
    .membership .maintitle{overflow: hidden;}
    .membership .maintitle .title_wrap {height: auto; padding: 0 0px; overflow: hidden;display: flex;  flex-direction: column;  }
    .membership .maintitle .log   {height: auto; padding: 0 0px; background-image: url(../images/new/bg_01_mo.png), linear-gradient(to bottom, #F2F5F6 380px, #F2F5F6 380px); background-position: center top; background-repeat: no-repeat; background-size: 100vw auto, auto, auto; max-width: 1023px; }
    .membership .maintitle .title_wrap .info1 {height: auto; padding: 10 0 40 0px; }
    .membership .maintitle .title_wrap .info2 {height: auto; padding: 35 0 10 0px; }
    
    .info_icon01{position: static;padding: 7vw;}
    
    .info_icon01_day{position: absolute;top:51%;left:50%;width:70%; transform: translate(-50%, 0%);z-index:2;text-align: center;}
     
    .info_icon01_day span{color:#fff;font-size: 3.5vw;font-weight:800;}
    .info_icon05{position: relative; top:30px;width:100%;z-index:1}
    .info_icon05Box{padding:30px 20px 20px; ; width:100%; 
                background-color: #fff;
                border-radius: 20px;}
    .info_icon05Box_txt{
                margin-top:10px;
                padding: 20px 5px 20px 18px; 
                width:100%; 
                background-color: #F2F5F6;
                border-radius: 20px;
                font-size:20px;
                letter-spacing: -0.5px;
                text-align:left;                
                }
    .info_icon05Box_txt .txt{padding:3px 0; font-size:16px;}
    .info_icon05Box_txt .tb{font-size:16px;font-weight:600;}
    .info_icon05Box_txt .txt2{padding:1px 0 5px 20px;font-size:16px;}
    
    .info_icon06{position: relative;width:100%;z-index:2;    max-width: 47vw;   left: 50%;    transform: translateX(-50%);}
    .info_icon07{position: relative; top:-30px;width:100%;z-index:1}
    .info_icon07Box{padding:60px 20px 20px; width:100%; 
                background-color: #fff;
                border-radius: 20px;}
    .info_icon07Box_txt{
                padding:20px 0 0; width:100%; 
                background-color: #fff;
                border-radius: 20px;
                font-size:20px;
                text-align:center;}
    .txt07{font-size:20px;font-weight:800;}
    
    .membership .idcade .contents1Box{position:relative;}
    .membership .idcade .idcade_wrap{height: auto; padding: 0 0px; }
    .membership .idcade .idcade_btn{justify-items: center;padding:20px 0 40px 0;}
    
    .contents1Box{position: absolute;left:0px;}
    .contents2Box{position: absolute;left:670px;top:50px;}

    .membership .idcade_title{padding:40px 0px 30px;max-width: 60vw;}
    .membership .idcade_btn  {padding:0 0 20px 0px ;}
    .membership .idcade_Box_txt{padding:0 0 20px 0px; width:100%;  border-radius: 20px;font-size:16px;text-align:left;}
    
    .membership .card_hint .card-hint-top-img {padding-top:32px;}   
    .membership .card_hint .card_hint_wrap{height: auto; padding: 0 0px; display: flex;flex-direction: column;}
    .membership .card_hint .card_hint_wrap .contents2_bottom_title{position: relative;bottom: 0; margin:30px 0 50px;}
    .membership .card_hint_wrap .next{width:100%;height:20px; line-height:20px; text-align:center; position:relative;top:10px;}
    .membership .card_hint .card-hint-swiper-pagination{margin:10px 0 10px 0;}  
    
    .membership .coupon .coupon_wrap{height: auto; padding: 0 0px; display: flex;flex-direction: column;}
    .membership .coupon .coupon_wrap .contents2_bottom_title{position: relative;bottom: 0; margin:30px 0;}
    .coupon_wrap .next{width:100%;height:20px; line-height:20px; text-align:center;}


    .contents3_coupon  {position: absolute;  left:48%; transform: translate(-48%, 0%); 
        display: flex;justify-content: center;
    }
    .contents3_coupon01{float:left;width:145px;height:90px; margin:0 10px; background: url(../images/coupon_bg_mo.png) 0 0 / 100% 100% no-repeat;}
    .contents3_coupon05{position: absolute; top:50%;left:50%; transform: translate(-50%, -50%); width: 28%;}    
    .contents3_coupon04{position: relative;}
        
    .membership .roulette .roulette-top-img {padding-top:32px;}
    .membership .roulette .roulette_wrap{height: auto; padding: 20px 0px 40px;}
    .membership .roulette .roulette_wrap img{width: 90%; margin: 0 auto;}
/*
    .membership .roulette .roulette_wrap .top{
        background-image: url(../images/bg_04.png), linear-gradient(to bottom, #EBEFF1 380px, #EBEFF1 380px);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100vw auto, auto, auto;
    }
*/
    .membership .roulette{
        background-image: url(../images/bg_04_mo.png), linear-gradient(to bottom, #EBEFF1 380px, #EBEFF1 380px);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100vw auto, auto, auto;
    }


    .membership .roulette .roulette_wrap .top  {height: auto; padding: 0 0px 14px 0px;}
    .membership .roulette .roulette_wrap .tick {height: 130px; padding: 0 0px; }
    .membership .roulette .roulette_wrap .main {height: auto; padding: 15px 0px 10; }
        
    .membership .card_hint .inr{max-width: 100%; margin: 0 ; text-align: center;padding:0px;}   
    .membership .coupon .coupon_wrap{height: 800px; padding: 0 0px; }
    .contents2_coupon{position: relative;  padding:40px 0;height:640px;}

    .membership .contents3_title { position: relative;}
    
    .membership .contents3 .contents3_coupon01 { width:130px;}
    /*.membership .coupon_use .coupon_use_top_img {padding-top:20px;}*/
    .membership .coupon_use .coupon_use_wrap{height: auto; padding: 0 0px; }
    
    .membership .content{padding: 32px 0; min-height: calc(100vh - 57vw - 48px);}
    .membership .content h3{font-size: 24px;}
    .membership .content .inr{position: relative;}
    .membership .content .btn_gomain{display: block; font-size: 0; width: 11px; height: 18px; position: absolute; top: 5px; left: 5.556%;}
    .membership .content .btn_gomain img{width: 100%; height: 100%;}

    /* 메인페이지 */
    .membership .issue{padding: 2.222% 0 11.111%;}
    .membership .issue .inr::before{left: 0; top: 40%; width: 18.06vw; height: 18.06vw; background: url(../images/bg_coin_mo.png) 0 0 / 100% 100% no-repeat;}
    .membership .issue .inr::after{right: 0; top: 55%; width: 21.67vw; height: 22.22vw; background: url(../images/bg_card_mo.png) 0 0 / 100% 100% no-repeat;}
    .membership .issue .issue_wrap{height: auto; padding: 0; background: url(../images/bg_issue_mo.png) 0 0 / 100% auto no-repeat;}
    .membership .issue .issue_wrap img{width: 100%;}
    .membership .issue .point_wrap{flex-direction: column; padding: 0 8.75%; height: auto;}
    .membership .issue .point_wrap .mypoint{flex-direction: row; padding: 9.091% 0; gap: 2px; width: 100%;}
    .membership .issue .point_wrap .mypoint img{width: 42.43%; flex-shrink: 0;}
    .membership .issue .point_wrap .mypoint div{line-height: 1.4; text-align: left;}
    .membership .issue .point_wrap .mypoint span{flex: 1; width: auto; height: 16.67vw; font-size: 3.61vw; padding: 0 23px; box-sizing: border-box;}
    .membership .issue .point_wrap .mypoint span em{font-size: 20px;}
    .membership .issue .point_wrap .mypoint span button{text-decoration-thickness: 1px; text-underline-offset: 2px}
    .membership .issue .point_wrap a{padding: 9.091% 0 17.803%; height: auto;}
    .membership .issue .digicard{margin: 7.5% 0;}
    .membership .issue .btn_issue{width: 87.5%}
    .membership .issue .btn_issue::after{top: -40%; right: -6%; width: 17.857%; height: 89.286%;}

    .membership .info{padding: 11.111% 0; background: #FA6025;}
    .membership .info .guide{margin-bottom: 8.889%;}
    .membership .info .guide #btn_pointguide{top: 29.5%; left: 50%; width: 34.5%; height: 6.8%;}

    .membership .draw{padding: 17.778% 0 11.111%; background: #FFF7DB url(../images/bg_draw_mo.png) center 15% / 90% auto no-repeat}
    .membership .draw .inr{padding: 0; overflow: hidden;}
    .membership .draw .bg_coin img{width: 85px;}
    .membership .draw .bg_coin .coin_tl{top: 20px; left: calc(50% - 160px); transform: translateX(-50%);}
    .membership .draw .bg_coin .coin_tr{top: 50px; right: calc(50% - 160px); transform: translateX(50%);}
    .membership .draw .bg_coin .coin_bl{top: 150px; left: calc(50% - 140px); transform: translateX(-50%);}
    .membership .draw .bg_coin .coin_br{top: 200px; right: calc(50% - 140px); transform: translateX(50%);}
    .membership .draw .coupon-container::before{width: 233px; height: 149px;}
    .membership .draw .coupon-container .inner{width: 141px; height: 185px; top: 115px;}
    .membership .draw .btn_wrap{width: 77.778%; margin: 189px auto 0;}
    .membership .draw button{margin: 0 auto 2.222%;}

/*
    #pickSignguPop .usr-qr-coupon {
        position: fixed;
        top: 0;
        left: 25px;
        transform: none;
        width: 100vw;
        max-width: none;
        min-width: auto;
        height: 100vh;
        overflow-y: auto;
        padding: 16px;
        box-sizing: border-box;
        justify-content: flex-start;
    }
  */

    .membership .contents2_coupon  {height:100%;}
    .membership .card_hint_container  {width: 100%;  overflow: hidden;}
    .membership .card_hint_container ul {flex-wrap: nowrap; /* 줄 바꿈 방지 */}
    .membership .card_hint_container li {width:180px !important; padding:0 !important;}
    .membership .card_hint_container li{background-color: transparent; border-radius: 10px; flex: 0 0 454px; 
            height: 210px; }
    .membership .contents2_coupon_txt{position: absolute; top:10px; width:100%; z-index:2 } 
    .membership .card_hint .card_hint_wrap .contents2_bottom_title a img.mo{max-width:80vw;}

    @keyframes left {
        0%, 100% {
            transform: rotate(0deg) translateX(0) translateY(0);
        }
        30%, 70% {
            transform: rotate(-10deg) translateX(-50px) translateY(-10px);
        }
    }

    @keyframes right {
        0%, 100% {
            transform: rotate(0deg) translateX(0) translateY(0);
        }
        30%, 70% {
            transform: rotate(10deg) translateX(50px) translateY(-10px);
        }
    }  

    /* 포인트 적립 및 사용 현황 */
    .membership .point_top{margin-bottom: 24px;}
    .membership .point_top div{height: 90px; background-color: #FA6025; background-image: url(../images/bg_point1_mo.png), url(../images/bg_point2_mo.png); background-position: left center, center right; background-size: 71px 84px, 66px 87px;}
    .membership .point_top p{font-size: 16px;}
    .membership .point_top span{font-size: 26px; line-height: 31px;}
    .membership .point_top #btn_pointguide{font-size: 13px;}
    .membership .point_sort{gap: 6px;}
    .membership .point_sort a{width: 50px; height: 30px; line-height: 30px; font-size: 14px;}
    .membership .point_list ul li{padding: 20px 24px; margin-bottom: 8px; height: 147px; justify-content: start;}
    .membership .point_list li span{font-size: 16px;}
    .membership .point_list li span em{font-size: 13px;}
    .membership .point_list li p{font-size: 14px; margin-top: 16px;}
    .membership .point_list .point{top: auto; transform: translateY(0); bottom: 20px; right: 24px; font-size: 22px;}


    /* 멤버십 힌트 */
    .membership .card_hint_wrap .contents2_title   {padding-top:0}
    .membership .card_hint_wrap .no_coupon img{width: 70px;}
    .membership .card_hint_wrap .no_coupon p{font-size: 16px;}
    .membership .card_hint_wrap ul{ height:220px;}
    .membership .card_hint_wrap li{flex:0 0 auto; width: 100%; padding: 0 0;box-sizing: border-box;}
    .membership .card_hint_wrap li::before, .membership .card_hint_wrap li::after{top: 24px;}
    .membership .card_hint_wrap li .region{padding: 10px 0; font-size: 18px;}
    .membership .card_hint_wrap li .conwrap{padding: 16px 0 20px; align-items: baseline; flex-direction: column;}
    .membership .card_hint_wrap li .conwrap div{max-width: 100%;}
    .membership .card_hint_wrap li .conwrap .store{font-size: 16px;}
    .membership .card_hint_wrap li .conwrap p{line-height: 16px;}
    .membership .card_hint_wrap li button{width: 100%; height: 34px; line-height: 34px; font-size: 14px;}
    .membership .hint_txt_Box {padding:10%;width:100%;height:100%;text-align:center;font-size:18px;color:#fff;}
    
    /* 멤버십 쿠폰함 */
    .membership .coupon_wrap .no_coupon img{width: 70px;}
    .membership .coupon_wrap .no_coupon p{font-size: 16px;}
    .membership .coupon_wrap ul{gap: 8px;}
    .membership .coupon_wrap li{flex:0 0 auto; width: 100%; padding: 0 30px;}
    .membership .coupon_wrap li::before, .membership .coupon_wrap li::after{top: 24px;}
    .membership .coupon_wrap li .region{padding: 10px 0; font-size: 18px;}
    .membership .coupon_wrap li .conwrap{padding: 16px 0 20px; align-items: baseline; flex-direction: column;}
    .membership .coupon_wrap li .conwrap div{max-width: 100%;}
    .membership .coupon_wrap li .conwrap .store{font-size: 16px;}
    .membership .coupon_wrap li .conwrap p{line-height: 16px;}
    .membership .coupon_wrap li button{width: 100%; height: 34px; line-height: 34px; font-size: 14px;}
    

    footer span{font-size: 20px;}
    footer p, footer li{font-size: 18px; line-height: 20px;}
    footer p::before, footer li::before{top: 6px;}
    footer p{margin-bottom: 16px;}
    footer li{margin-bottom: 6px;}

     /* popup */
    .layer_wrap { position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; } 
    .layer_wrap .btn_pop_close { position:absolute; top:16px; right:16px; z-index:101; width:18px; height:18px; background:url(../images/btn_popclose_mo.png) 0 0 / 100% 100% no-repeat } 
    .layer_wrap .pop_con {left: 50%; right: auto; transform: translate(-50%, -50%); padding:32px 4.167% 24px; border-radius:16px; width: 640px; min-width: 320px; max-width: 640px; max-height: calc(100% - 20px);} 
    .layer_wrap .btn_wrap { gap:8px; } 
    .pop_con.type_border { border:1px solid #000; } 
    .layer_wrap .btn_check{height: 40px; font-size: 14px; margin-top: 8.276%; padding: 0 8.276%;}

    #couponPop .pop_con{padding: 40px 8.333% 24px;}
    #couponPop .title span{font-size: 16px; margin-bottom: 6px;}
    #couponPop .title span::before, #couponPop .title span::after{width: 26px; height: 15px;}
    #couponPop .coupon_wrap{flex-direction: column; padding: 24px 0; gap: 8px;}
    #couponPop .coupon_wrap .coupon{width: 260px; height: 198px; padding: 7px 36px 0; background: url(../images/coupon_bg_mo.png) 0 0 / 100% 100% no-repeat;}
    #couponPop .coupon_wrap .coupon strong{font-size: 16px;}
    #couponPop .coupon_wrap .coupon span{font-size: 13px; margin-top: 8px;}
    #couponPop .btn_check{margin-top: 0;}

    #storePop .pop_con{padding: 32px 4.167% 24px; max-width:90vw}
    #storePop .info{padding: 0 16px; margin-top: 13.793%;}
    #storePop .info::before{top: -23px; height: 24px; background: url(../images/storebg_top_mo.png) 0 0 / 100% 100% no-repeat;}
    #storePop .info li{padding: 16px 0;}
    #storePop .info li:first-child{padding-top: 8px;}
    #storePop .info li:last-child{padding-bottom: 24px;}
    #storePop .info span{width: 64px; font-size: 12px;}
    #storePop .info p{font-size: 14px;}
    #storePop .info li.yes_btn p{flex-direction: column; align-items: baseline;}
    #storePop .info .btn_storeinfo{border-radius: 4px; font-size: 12px; padding: 5px 8px; height: 26px; line-height: 24px; margin-top: 6px;}
    #storePop .code{padding: 16px 11px 4px; margin-bottom: 15.172%;}
    #storePop .code::after{bottom: -23px; height: 24px; background: url(../images/202603/storebg_bottom.png) 0 0 / 100% 100% no-repeat;}
    #storePop .code p{font-size: 12px; margin-bottom: 8px;}
    #storePop .code input{padding: 16px 0; font-size: 12px;}
    #storePop .code input::-webkit-input-placeholder{font-size: 12px;}

    #eventPop .pop_con{width: auto; padding: 0; border-radius: 0;}
    #eventPop .two_btn button{font-size: 12px;}
    
    #pickSignguPop .usr-qr-coupon{max-width: 90vw;}
    #pickSignguPop .usr-qr-coupon img{max-width: 100%;}
    #pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li{flex: 0 1 30%;margin-bottom: 6%;padding: 4px 3px;box-sizing: border-box;}
    #pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul{column-gap: 3%;box-sizing: border-box;}
    #pickSignguPop .usr-qr-coupon > div:nth-child(2){row-gap: 1vw;height: 50svh;font-size: 3.7vw;box-sizing: border-box;}
    #pickSignguPop .usr-check input + label + label{font-size: 16px;width: 70%;box-sizing: border-box;}
    #pickSignguPop .usr-qr-coupon > div:nth-child(1) > *:nth-child(1){max-width: 18px;box-sizing: border-box;}
    #pickSignguPop .usr-qr-coupon > div:nth-child(1) > *:nth-child(2){max-width: 100%;box-sizing: border-box;}
    #pickSignguPop .usr-qr-coupon > div:nth-child(1) > *:nth-child(3){font-size:14px;margin-top: -1vw;box-sizing: border-box;}
    #pickSignguPop .usr-qr-coupon > div:nth-child(3) button{font-size: 18px;padding: 10px 20px;box-sizing: border-box;}
    #pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl{row-gap: 2vw;box-sizing: border-box;}
    #pickSignguPop .usr-qr-coupon > div:nth-child(3){padding: 4vw 0;box-sizing: border-box;}
    #pickSignguPop .usr-check input + label + label img{max-width: 10vw; max-height: 10vw; min-width: 35px; min-height: 35px;margin-right:5px;}
    #pickSignguPop .usr-check input + label{width: 20px;height: 20px;box-sizing: border-box;}
    #pickSignguPop .usr-check input:checked + label::after{width: 20px;height: 20px;}
    #pickSignguPop .usr-qr-coupon > div:nth-child(2) > div .usr-check input + label + label{font-size: 16px;box-sizing: border-box;}
    
    
    #couponPopNew .pop_con{background: #FFFF99; padding: 32px 4.167% 24px; max-width:90vw;}
    #couponPopNew .couponMessage1{
      position: absolute;
      top: 57%;
      width:100%;
      height:20px;
      text-align: center;
      z-index:4;
    }

    #couponPopNew .couponMessage2{
      position: absolute;
      top: 74%;
      width:100%;
      height:50px;
      text-align: center;
      z-index:3
    }
    
    
    #Quiz1Pop .quiztopIconBox {
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translate(-50%, 0%);
      z-index:33
    }

    #Quiz2Pop .quiztopIconBox {
      position: absolute;
      top: 0px;
      transform: translate(-50%, 0%);
      z-index:33;
      min-width:230px;
    }
    
    #Quiz3Pop .quiztopIconBox {
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translate(-50%, 0%);
      z-index:33
    }

    .membership .title .inr img{
        max-width: 70vw;
    }

    .membership .title h2 .inr {
        padding: 10vw;
    }

    .membership .title .inr h5 {
        font-size: 4vw;
    }

    #pickSignguPop .usr-qr-coupon > div:nth-child(1){
        background-image:none;
        overflow: hidden;
        position: relative;
    }

    #pickSignguPop .usr-qr-coupon > div:nth-child(1):before{
        content:none ;
        background-image: url(../images/area_coupon_top_1.png);
        width: 4rem;
        height: 4rem;
        transform: rotate(-43deg);
        position: absolute;
        left: -0.5rem;
        background-repeat: no-repeat;
        top: 0rem;
        background-size: cover;
    }

    #pickSignguPop .usr-qr-coupon > div:nth-child(1):after{
        content:none ;
        background-image: url(../images/area_coupon_top_2.png);
        width: 3rem;
        height: 5rem;
        position: absolute;
        right: 0;
        background-repeat: no-repeat;
        bottom: 0rem;
        background-size: cover;
        pointer-events: none;
    }

    #storePop .pop_con{
        background-image: url(../images/202603/m_store_coupon_bg.png);
    }

    #storePop .info .btn_storeinfo{
        padding-top: 0;
    }

    #pickSignguPop .usr-qr-coupon .cus-list > li{
        height: 50px;
    }
} 

@media screen and (max-width: 1280px) and (min-width: 1024px) {

    #pickSignguPop .usr-qr-coupon {
        width: 380px;
        max-width: 90vw;
        min-width: 320px;

        transform: translate(-50%, -50%) scale(0.95);
    }

    #pickSignguPop .usr-qr-coupon > div {
        font-size: 14px;
    }
}


@media screen and (max-width:540px){
    #pickSignguPop .usr-qr-coupon > div:nth-child(1) > *:nth-child(2){
        font-size: 1.6rem;
    }
    #pickSignguPop .usr-qr-coupon > div:nth-child(1) > *:nth-child(3){
        font-size: 1rem !important;
    }

    #pickSignguPop .usr-qr-coupon > div:nth-child(2) > dl > dd > ul > li{
        flex: 0 1 48%;
    }
}

@media screen and (max-width:480px){
    footer p, footer li {
        font-size: 14px;
        line-height: 15px;
    }

    #storePop .info p{
        font-size: 0.8rem;
        word-break: break-all;
    }

    #storePop h3{
        font-size: 2rem;
    }
}

#pickSignguPop {
    transform: none !important;
}

.card-hint {
  perspective: 1000px;
  cursor: pointer;
}

.card-hint-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.card-hint.flipped .card-hint-inner {
  transform: rotateY(180deg);
}

.card-hint-front, .card-hint-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.card-hint-back {
  transform: rotateY(180deg);
}



.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #333; /* 색상 변경 가능 */
  opacity: 1;
  margin: 0 6px;
  transform: scale(1.4); /* 크기 강조 */
}
.swiper-pagination-bullet-active {
  background: #000 !important; /* 선택된 점 색상 */
  transform: scale(1.5); /* 크기 강조 */
}