@charset "utf-8";
/*
 CSS for the main interaction artistmind 비만돌고래
*/

* {
    margin: 0;
    padding: 0;
}

/*신규쿠폰 공통*/
div{box-sizing:border-box;}
img{width:100%;max-width:100%;}

.red{color:#fc021a;}
.blue{color: #2e6ed9;}
.fw500{font-weight:500;}

.display_m{display:none;}

/*header*/
header{position:fixed;width:100%;height:60px;background:#fff;border-bottom:1px solid #dadcde;z-index:20;}
header .top{position:relative;height:60px;box-shadow: 0px 0px 6px 2px rgb(0 0 0 / 20%);}
header .top h1{position:absolute;top:11px;left:0;right:0;padding:5px 10px;margin-left:auto;margin-right:auto;width:fit-content;text-align:center;font-weight:600;font-size:21px;color:#fc021a;}
header .top h1.fs333{color:#333;}
header .top .myCupon_Top{margin-right:10px;padding:22px 15px;font-weight:600;float:right;}
header .top .back{padding:21px 15px;/*width:45px;*/display:block;float:left;}
header .top .box{padding:21px 15px;float:right;}

/*--QR header--*/
header .top.headQr h1{margin-left:10px;float:left;}
header .top.headQr .logo{margin-right:5px;float:right;}
header .top.headQr .logo img{max-width:94px;padding:15px;}

/*list*/
#middle{font-size:16px;}
#middle.view{}

/*cupun body*/
#middle:not(.mobile) .cupon{padding-top:60px;width:100%;}
#middle .cupon .list{position: relative;margin:20px auto;padding:0 25px;max-width:740px;}

.clientInfo{padding:12px 20px;background: url('../images/pic_ribon.png') no-repeat 98% 50%, url('../images/pic_ribon.png') no-repeat 2% 50% #CA2EDB;font-weight:600;color:#fff;box-shadow: 0px 0px 6px 2px rgb(0 0 0 / 20%);}
.clientInfo_b{color:#FEFA8C;font-weight:700;}
.cupon .listTop{text-align:center;line-height:1.4;}
.cupon .listTop h2{color:#2e6ed9;padding:6.5% 5%;font-size:320%;}

/*newclass 20231024*/
#cuponList .cupon_Listtab{margin-bottom:20px;width:100%;display:flex;flex-wrap: nowrap;align-items: center;font-size:18px;text-align:center;}
#cuponList .cupon_Listtab a{padding:14px 10px;background:#fff;width:50%;border:1px solid #ccc;font-weight:600;border-radius:5px;}
#cuponList .cupon_Listtab a.on{background:#1381BC;font-weight:700;color:#fff;border-color:#1489C8;border-radius:5px}

.cupom_caution{position: fixed;bottom: 0;left: 0;padding:20px;background:#ededed;width:100%;text-align:center;font-size:14px;box-shadow: 0 4px 4px 4px rgb(0 0 0 / 20%);opacity:.9; font-weight: bold; line-height: 1.4}
#cuponView div.cuponImg{position:relative;}
#cuponList.myCoupon .cuponCont{padding:0 0 35px 0;}
#cuponList .cuponCont ul{margin:0;padding:0;display:flex;gap:10px;justify-content:space-between;flex-wrap: wrap;}
#cuponList .cuponCont li{position:relative;margin-bottom:5px;width:49%;border:1px solid #ddd;}
#cuponList .cuponCont li::after{content:"";clear:both;display:table;}
#cuponList .cuponCont li .inBox{background:#fff;padding:10px 15px;font-weight:600;}

#cuponList .cuponImg{vertical-align:middle;}
#cuponView div.cuponImg > span,
#cuponList .cuponImg > span{position: absolute; right: 7px; top: 7px; font-size: 17px; display: inline-block; background-color: #f1722e; border: 2px solid #ED5F15; border-radius: 50%; color: #fff; font-weight: bold; letter-spacing: -1px; line-height: 35px; padding: 0px 7px;}
#cuponList .cuponTex{padding:15px 15px 10px 15px;width:100%;}
#cuponList .cuponTex dl{min-height:30px;}
#cuponList .cuponTex dt{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cuponList .cuponTex dd{margin: 5px 0;color:#666;font-size:.8rem;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:20px;overflow:hidden;text-overflow:ellipsis;word-break:break-all;}

#cuponList .cuponNew{position:absolute;top:7px;right:0;margin-right:-2px;padding:10px 15px;background:#fc021a;border:2px solid #fc021a;font-weight:700;border-radius:2px;color:#fff;}
#cuponList .noImg{padding:10px;width:100%;background:#eee;text-align:center;border:1px solid #ccc;}

/*box*/
#middle #cuponList.Box{}
#cuponList.Box .lastEvent .cuponNew{display:none;}
#cuponList.Box .lastEvent .endEvent_tag{position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width:200px;opacity:1;z-index:1;}
#cuponList.Box .lastEvent .endEvent_bg{position:absolute;top: 0;left: 1%;width: 98%;height: 100%;background:#fff;opacity: .7;}

#cuponList.Box .lastEvent .disNone{display:none;}

/*view*/
#cuponView{width:100%;min-height:100%;}
#cuponView .cuponImg img{margin:0 auto;}
#cuponView .cuponTex{margin: 0 auto; padding-bottom:3%;}
#cuponView .cuponTex dl{min-height:140px;}
#cuponView .cuponTex dt{margin-bottom:6%;padding:25px 0 20px 0;width:100%;font-size:1.4rem;font-weight:600;text-align:center;letter-spacing:-1px;border-bottom:1px solid #ccc;line-height:1.4;}
#cuponView .cuponTex dd{margin-bottom:12px;}

#cuponView .bottomBox{margin:0 auto;max-width:380px;}
#cuponView .qrBox{padding:10px;background:#F6F6F9;border:1px solid #E2E2E2;display:flex;gap:10px;justify-content:space-between;flex-wrap: wrap;align-items:center;}
#cuponView .qrBox .qr { width: 100%; display:flex;gap:10px;justify-content:space-between;flex-wrap: wrap;align-items:center;text-align: center;}
#cuponView .qrBox .qr img{max-width:95%;}
#cuponView .qrBox .qr p{max-width: 57%;font-size: 1rem; text-align:left; line-height: 1.7; padding-right: 17px}
#cuponView .qrBox .down{padding-left:15px;max-width:80px;border-left:1px solid #9C9A9A;font-size:11px;}
#cuponView .qrBox .down img{margin:5px auto;display:block;max-width:35px;}

#cuponView .viewBtn_bottom{padding:20px 0;text-align:center;width:100%;background:#fff;text-align:center;display:flex;gap:10px;justify-content:space-between;/*flex-wrap: wrap;*/}
#cuponView .viewBtn_bottom a{width:100%;/**/padding:12px 0;color:#fff;border-color:1px solid #16B7AC;font-weight:500;border-radius:7px;background:#13BCB1 url('../images/ico_store.png') no-repeat 23% 50%;}
#cuponView .viewBtn_bottom a:first-child{padding-left:10px;border-color:1px solid #1489C8;background:#1381BC url('../images/ico_map.png') no-repeat 32% 50%;}

/*popup*/
.cuponPop{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);padding:35px 20px 75px 20px;width: 90%;max-width: 580px;background: #fff;border: 1px solid #efefef;z-index:5;}
.cuponPop .inBox{text-align:center;font-size:16px;}
.cuponPop .cupon_popBtn{position: absolute;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;padding:15px 20px;background:#ed4157;color:#fff;font-weight:500}
.cuponPop .cupon_closeBtn{position: absolute;right: 13px;top: 13px;width:25px;}

.pop_close{width: 29px;height: 30px;position: absolute;right: 5px;top: 24px;cursor: pointer; font-weight: 400; font-size: 1.2rem}

.cupon_Dim{position: fixed; width: 100%; top: 0; left: 0;height: 100%; background: #000;z-index: 1; opacity: .75;}

#moreBtn_wrap{text-align: center; margin-top: 20px; font-size: 1rem;}

/*order Btn*/
#cuponList .MobileAppTap{display:flex;flex-direction: column;align-items: flex-end; margin: 10px 27px 25px;}
#cuponList .MobileAppTap .fr{font-size:12px;}
#cuponList .MobileAppTap .menu{margin-left:5px;padding:7px 10px;background:#fff;color:#777;}
#cuponList .MobileAppTap .menu.on{background:#0456ed;color:#fff;font-weight:600;}

div.cuponImg img {border-radius: 20px;}

.modal_bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); z-index: 999; }
.modal_wrap { position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);  z-index: 1000; }

.qr_img { min-width: 50%;}

#popup_footer { bottom: 0; left: 0; width: 100%; text-align: right; font-size: 1rem;  height: 20px; padding-top: 7px; margin-bottom: 4px; color: #FFFFFF; }
#popup_footer_close { margin-right: 0.2rem; margin-left: 1rem; font-weight: bold; text-decoration: none; color: #ffffff; }

@media screen and (max-width:760px){
    .display_m{display:block;}

    /*order Btn*/
    #cuponList .MobileAppTap{margin-top:10px;display:flex;flex-direction: column;align-items: flex-end;}
    #cuponList .MobileAppTap .fr{font-size:12px;}
    #cuponList .MobileAppTap .menu{margin-left:5px;padding:7px 10px;background:#fff;color:#777;}
    #cuponList .MobileAppTap .menu.on{background:#0456ed;color:#fff;font-weight:600;}
}

@media screen and (max-width:720px){
    #cuponList .cuponCont ul{display:block;}
    #cuponList .cuponCont li{margin-bottom:25px;width:100%;}

    .modal_wrap { width: 90% }
}

@media screen and (max-width:620px){
    .brLine_m{display:block;}

    header .top h1{max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

    .clientInfo{background-image:none;}
}

#bk {
    position: fixed;
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(0,0,0,0.2);
    left: 0;
    top: 0;
    display: none;
    z-index: 21;
}

.search_div.inCupon{font-size:13px;position: fixed;bottom: 2%;right: 10px;}
.search_div.inCupon input[type="checkbox"]#showInput{display: none;}
.search_div.inCupon .rmb_search_bx {
    border: 1px solid #dddddd;
    border-radius: 30px;
    height: 45px;
    padding: 5px;
    background: #fff;
    display:flex;
    flex-direction:row-reverse;
}

.search_div.inCupon .rmb_search_bx .input_bx input {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: none;
    height: 100%;
    padding: 0px;
    width: 0px;
    overflow:hidden;
}
.search_div.inCupon .rmb_search_bx .btn_bx {flex-basis: 33px;}
.search_div.inCupon .rmb_search_bx .btn_bx > span,
.search_div.inCupon .rmb_search_bx .btn_bx > label {
    cursor: pointer;
    border-radius: 50%;
    height: 33px;
    width: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search_div.inCupon .rmb_search_bx .btn_bx > span,
.search_div.inCupon .rmb_search_bx .btn_bx.closeDiv label:not(.close_icon) {
    background: #39a0e2;
}
.search_div.inCupon .rmb_search_bx .btn_bx label img{width: 15px;}
.search_div.inCupon .rmb_search_bx .btn_bx.closeDiv label:hover{background: #076eec;}
.search_div.inCupon .rmb_search_bx .btn_bx.openDiv{display: none;}
.search_div.inCupon input[type="checkbox"]:checked + form .rmb_search_bx .btn_bx.openDiv{display: flex;}
.search_div.inCupon input[type="checkbox"]:checked + form .rmb_search_bx .btn_bx.closeDiv{display: none;}

.search_div.inCupon .rmb_search_bx .btn_bx.openDiv > label,
.search_div.inCupon .rmb_search_bx .btn_bx.openDiv > input{width: 33px;}
.search_div.inCupon .rmb_search_bx .btn_bx.openDiv > span > input{
    cursor: pointer;
    background-image: url("https://www.tourpik.com/images/search_icon.png");
    background-position: center;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    border: none;
    background-color: unset;
}

.btnGroup > a{display: block;}
.btnGroup *:not(div){border: 1px solid #ccc; border-radius: 2px; font-weight: bold; background-color: #fff; font-size: 13px; padding: 0px 20px; line-height: 28px; cursor: pointer;}
.btnGroup *:not(div):hover{border: 1px solid #ccc; background-color: #ededed;}
.btnGroup *.ssize{padding: 0px 10px; line-height: 21px; font-size: 11px;}
.btnGroup .black{border: 1px solid #464646; background-color: #464646; color: #fff;}
.btnGroup .black:hover{border: 1px solid #000; background-color: #000;}
.btnGroup .blue{border: 1px solid #2e4ce8; background-color: #2e4ce8; color: #fff;}
.btnGroup .blue:hover{border: 1px solid #0022d2; background-color: #0022d2;}
.btnGroup .red{border: 1px solid #df3b3b; background-color: #df3b3b; color: #fff;}
.btnGroup .red:hover{border: 1px solid #d20000; background-color: #d20000;}
.btnGroup .lightred{border: 1px solid #edb4b4; background-color: #edb4b4; color: #fff;}
.btnGroup .lightred:hover{border: 1px solid #f38787; background-color: #f38787;}
.btnGroup .lightblue{border: 1px solid #b5c1ff; background-color: #b5c1ff; color: #fff;}
.btnGroup .lightblue:hover{border: 1px solid #a5b4ff; background-color: #a5b4ff;}


dd.usedInfo{display: flex; gap: 10px;}
dd.usedInfo > div.btnGroup{position: relative; min-width: 70px; margin-top: 0px;}
dd.usedInfo > div.btnGroup > a{position: absolute; top: 50%; transform: translateY(-50%);}
dd.usedInfo > div:last-child{flex: 1;}


#middle .cupon .list div.info{margin-top: 20px;}
#middle .cupon .list div.info + table{margin-bottom: 10px;}