@charset "utf-8";

body{padding-bottom:120px;}
header .container{height:110px;}
header .container .logo img{width: 95px;display: inline-block;}
header .container .afterspace{  font-size: 36px; line-height: 100px;margin-top:0}
header .container .search-box{font-size: 35px;height:110px;}
header .container .afterspace .brand-menu li{font-size:17px;margin-right:20px;}


footer .container{height:120px;}
footer .container a.move-back{height:120px}
footer .container a.move-back img{height:100%}
footer .container .menu-bar li{width: 100px;height:120px;}
footer .container .menu-bar li:last-child{margin-right:5px;}

footer .container .menu-bar a.btn-search{padding-top: 8px;width:62px;height:62px;}
footer .container .menu-bar a.btn-search:before{width:55px;background-size: 65px;}
footer .container .menu-bar a.btn-search span{font-size:20px;}

footer .container .menu-bar a.btn-cart{width:100px;padding-top: 20px;}
footer .container .menu-bar a.btn-cart:before{background-size: 52px;height:62px;}
footer .container .menu-bar a.btn-cart span{font-size:20px;}
footer .container .menu-bar li a.btn-cart .count{top: 10px; right: 20px; width: 30px; height: 30px; line-height: 30px; font-size: 20px;}
footer .container a.barcode{opacity:0}


footer .brand-menu{height:122px;}
footer .brand-menu .menu-bar .empty{width:185px;}
footer .brand-menu .menu-bar .empty a img{width:120px}
footer .brand-menu .menu-bar .choose{width:calc(100% - 186px);line-height:120px;font-size:25px}

footer .prod-menu{height:120px;}
footer .prod-menu .menu-bar li{height:120px;}
footer .prod-menu .menu-bar li a img{width:100px;height:100px;}
footer .prod-menu .menu-bar li a{font-size:24px;}

footer .cart-menu .cart-menu-list .title{height:25px;}
footer .cart-menu .cart-menu-list .title span{font-size: 14px; line-height: 25px;}
footer .cart-menu .cart-menu-list .price{height:55px;line-height: 55px;}
footer .cart-menu .cart-menu-list .price span{font-size: 20px; line-height: 55px; width: 100%; background: #fff;}
footer .cart-menu .cart-menu-list .button{height: 80px; line-height: 80px; font-size: 25px;}

#keyboard{height:calc(100% - 118px);top:118px;}
#keyboard .container{width:auto;margin-top:120px;}
#keyboard .container .key-row .key{width:60px;height:60px;font-size:23px;}
#keyboard .container .key-row .shift{line-height: 58px;position: relative; top: 0;}
#keyboard .container .key-row .backspace{position:relative;top:0;background:#000;}
#keyboard .container .common-key .key-row{width:710px}
#keyboard .container .common-key .key-row .key{display: inline-block; line-height: 60px; position: relative;margin-right:8px;}
#keyboard .container .key-row .space{position: relative!important;   width: 432px !important; margin: 0 auto;left:0}
#keyboard .container .key-row .enter, #keyboard .container .key-row .close{width:94px;margin-left:10px;float:right !important;}
#keyboard .container .key-row .close{margin-top:-30px;}




.main-content{width: 100%; height: calc(100% - 400px); position: relative; padding-top: 118px;}
#content .container.main{padding: 7.5%;width: calc(100% - 15%);overflow: auto;height: 100%;}
table.space-item{width:calc(100% - 7.8%)}
table.space-item:last-child{margin-bottom:200px;}
table.space-item colgroup col{width:auto !important;}
table.space-item .col.tit{    font-size: 18px; height: 68px !important;}
table.space-item .col{height: auto !important; padding: 10px 16px; font-size: 12px;}

#brand{overflow:overlay}
#brand .multi-header .brand-list{height:auto}
#brand .multi-header .brand-list ul.inner li{width:100px;height:100px;}
#brand .multi-header .information{height:150px;margin-left: 5%; margin-top: 4%;padding-left:140px;}
#brand .multi-header .information .logo{width:100px;height:100px;left:0;}
#brand .multi-header .information .name{font-size:23px;}
#brand .multi-header .information .explain{margin-top:4px;font-size:16px;}



#brand .images{margin-top:3%;height:31vh}
#brand .images a.arrow{width:70px;height:70px;}


#brand .menu{padding:0 5.2%;height: 1090px;}
#brand .menu .top-menu .box{width:36%;padding:6%;height: 9%}
#brand .menu .top-menu .box .title{font-size: 20px; }
#brand .menu .top-menu .box .sub-title{font-size:18px;}
#brand .menu .top-menu .box .icon{width:110px;height:110px;}
#brand .menu .menu-content .row .box{width: 160px;margin: -3px;height: auto;}
#brand .menu .menu-content .row .box:before{content:"";padding-top: 100%; display: block;}



#brand .menu .menu-content .row .box .title{font-size:20px;position: absolute; top: 10%;}
#brand .menu .menu-content .row .box .sub-title{font-size:15px;position:absolute;top:24%;}
#brand .menu .menu-content .row .box .icon{width:100px;position:absolute;bottom:0;}

#barcodeWrap .container{width:auto;padding:20px;}
#barcodeWrap .container .exp{font-size:23px}
#barcodeWrap .container .btn{height:70px;font-size:24px;width:210px;}
#barcodeWrap .container img{height:110px;}
/**barcode animate **/
@keyframes barcode-scan {
    0%{transform:translateY(-44px)}
    100%{transform:translateY(66px)}

}

.alert-wrap .alert-box{width: 410px;padding: 20px 30px;margin: 0 auto;position: relative;left: 0 !important;min-height: 170px;}
.alert-wrap .alert-box .alert-header{font-size: 23px;}
.alert-wrap .alert-box .alert-body{font-size:18px;min-height: 70px;}
.alert-wrap .alert-box .alert-footer button.btn-ok,
.alert-wrap .alert-box .alert-footer button.btn-cancel{font-size: 18px;height: 55px;width: 46%;margin: 0 3px;}


#category{height:50px}
#category .category-wrap .category-item{line-height: 50px;font-size:17px;min-width: 85px;}

#product{height:calc(100% - 147px);}
#product .product-wrap .prod-item{height:auto}
#product .product-wrap .prod-item .stock-wrap .warehouse{font-size:11px;}
#product .product-wrap .prod-item .stock-wrap .store{font-size:11px;}
#content .container.empty .empty-data{font-size:28px}

.prod-item .prod-information .name{font-size:15px;}
.prod-item .prod-information .price{font-size:14px;}
.prod-item .prod-picture{position:relative;padding-top:110%;height:auto;}
.prod-item .prod-picture img{position: absolute;top:0}




/** introduce **/
#brand-detail .brand-info h3{font-size:22px;}
#brand-detail .brand-info .row{margin-top:5px;}
#brand-detail .brand-info .row .open{font-size: 14px;}
#brand-detail .brand-intro{font-size:14px;}

#brand-detail .brand-picture .main-picture{width:370px;height:370px;}
#brand-detail .brand-pictures{position: relative; display: block;}
#brand-detail .brand-pictures:after{clear: both; display: block; content: "";}

/** program **/
.program-wrap .item.event{min-height: 158px;}
.program-wrap .item.survey{min-height: 158px;padding-bottom:20px;}

.program-wrap .item .background{width:200px;}
.program-wrap .item .inner{padding-top:14px;}
.program-wrap .item .title{font-size:22px;}
.program-wrap .item .content{font-size:15px;min-height: 30px;}
.program-wrap .item .date{font-size:15px;}
.program-wrap .item .button button{font-size:15px;width:47%;height:47px;}
.program-wrap .item .button button.start{margin-right: 0;}

/** survey **/
#surveyWrap{padding: 0 30px !important;margin:0!important;width: calc(100% - 60px)!important;}
#surveyWrap .progress-step{height: 4px !important;width: 80vw;margin: 0 auto;}
#surveyWrap .survey-body .survey-step{
    margin-top: 40px;
}
#surveyWrap .survey-body #userTel{margin-top:45px;margin-bottom: 130px;}

#userTel .tel_box{width: 410px;margin:0 auto;margin-top:47px;}
#userTel .tel_box .result{height: 70px;line-height: 70px;font-size: 24px;}
#userTel .tel_box .tel-row{height:65px;}
#userTel .tel_box .tel-row li{font-size: 20px;height: 65px;line-height: 65px;}
#userTel .tel_box .tel-row li.backspace img{width:30px;}

#userTel .privacy-wrap{width: 410px;margin:0 auto;margin-top: 15px;}
#userTel .privacy-wrap .label{font-size: 13px;}
#userTel .privacy-wrap .check-box{height: 30px;line-height: 50px;padding-right: 36px;}
#userTel .privacy-wrap .check-box label{font-size: 16px;}
#userTel .privacy-wrap .check-box:after{width:30px;height:30px;top: 10px;}

.survey-body .button-wrap{margin-top:47px !important;width: 100%;display: block;left: 0;}
.survey-body .button-wrap button{width:260px;font-size:24px;height: 60px;}z

                                                                          .survey-step{margin-bottom:100px;}
.survey-step .title{font-size:30px;}
.survey-step .question{font-size:22px;}
.survey-step .answers{margin-top:42px;}
.survey-step .answers .list{width:250px;}
.survey-step .answers .list li{height:60px;line-height: 60px;font-size:18px;}
.survey-step .answers .img-list li{position: relative;width:42vw;height:auto;padding-top:42vw;}
.survey-step .answers .img-list li.active:after{position: absolute; z-index: 1;top:0}

.survey-result{margin-bottom:100px;}
.survey-result .list{width:550px;}
.survey-result .list .item.has-image{margin-left: 15px;}
.survey-result .result-image{width:130px;height:130px;margin:14px 0}
.survey-result .sub-title{font-size:20px;}
.survey-result .context-wrap .item img{width:130px;height:130px;}
.survey-result .context-wrap .item.has-image{min-height:140px;margin:20px 0;}
.survey-result .context-wrap .item.has-image img{width:130px;height:130px}
.survey-result .context-wrap .item.has-image .context{padding-left:150px;font-size: 20px; min-height: 140px;}
#userTel h3.title{font-size:20px;}


/** store **/
.program-wrap .prog-item .picture{width: 100%; padding-top: 100%;height:auto}
.program-wrap .prog-item .explain .title{font-size:18px;height:auto;}
.program-wrap .prog-item .explain .context{font-size:13px;height: 50px;overflow: overlay;}
.program-wrap .prog-item .explain .date_info{font-size:13px;height:auto;}
.program-wrap .prog-item:nth-child(2n){margin-left: 15px;}


/** instagram **/
.insta-detail-layer .inner .close-btn{width:50px;height:50px;}
.insta-detail-layer .inner{width:465px;padding-top:50px;}
.insta-detail-layer .inner .picture{position:relative;padding-top:100%;height:auto;min-height:auto}
.insta-detail-layer .inner .picture img{position: absolute; top: 0; left: 0;}
.insta-detail-layer .inner .likes{font-size:13px;}
.insta-detail-layer .inner .context{font-size:13px;}

.term-layer{width:auto;padding:7%}
.term-layer .inner{width:100%;padding-top:50px;}
.term-layer .inner .btn-close{width:60px;height:60px;}
.term-layer .inner .btn-close img{width:100%;height:100%;}
.term-layer .inner .term-context{font-size: 13px;height: calc(100% - 220px);padding: 100px 30px;padding-top: 0;}
.term-layer .inner .button-wrap .btn-term{height:60px;font-size: 16px;}





/** product detai **/
.prod-detail-wrap .prod-inform{top:110px;}
.prod-detail-wrap .prod-inform .prod-picture{padding-top: 100%; height: auto;}
.prod-detail-wrap .prod-inform .prod-picture .pic-item{top:0;}
.prod-detail-wrap .relative-prod-wrap .prod-item{height:auto;}
.prod-detail-wrap .relative-prod-wrap .prod-item .prod-picture{height:auto;}
.prod-detail-wrap .prod-inform .btn-arrow{top:25vh;width:60px;height:60px;}

.prod-detail-wrap .prod-inform .prod-data .prod-name{padding:12px;}
.prod-detail-wrap .prod-inform .prod-data .prod-name h3.tit{font-size: 18px;line-height: 25px;}
.prod-detail-wrap .prod-inform .prod-data .prod-price .tit{font-size:14px;}

.prod-detail-wrap .prod-inform .prod-data{margin-bottom:20px;}
.prod-detail-wrap .prod-inform .prod-data .prod-price .prod-price-detail{height:45px;}
.prod-detail-wrap .prod-inform .prod-data .prod-price .prod-price-detail .tit{font-size:14px;}
.prod-detail-wrap .prod-inform .prod-data .prod-price .prod-price-detail .dis-price{font-size: 18px;}

.prod-detail-wrap .prod-inform .more-information{margin-bottom: 100px;font-size: 15px;height: 50px;}

#productDetail .inner{margin:3% 8%;margin: 0;}
#productDetail .inner .context{padding: 6%;font-size: 22px;height: calc(88% - 92px);}
#productDetail .inner .button-wrap{padding: 22px;height: 70px;}
#productDetail .inner .button-wrap .button{width: 46%;height:100%; margin-right: 2%;font-size:22px;}

#prodSelectLayer article.product{padding-top:70px;}
#prodSelectLayer > .inner{margin:4% 8%}
#prodSelectLayer > .inner .btn-close{width:70px;height:70px}
#prodSelectLayer > .inner .btn-close img{width:100%;height:100%;}
#prodSelectLayer article.product .information .title{font-size:22px;}
#prodSelectLayer article.product .information .price{font-size:18px;}
#prodSelectLayer article.product .option{margin-top:20px;}
#prodSelectLayer article.product .option .title{font-size:18px;}
#prodSelectLayer article.product .option .option-list li{line-height: 45px;}

#prodSelectLayer article.order{margin-top:50px;padding:5%}
#prodSelectLayer article.order .inner .count-wrap a{width: 54px; height: 54px;line-height: 54px; font-weight: bold; font-size: 44px;}
#prodSelectLayer article.order .inner .total-price{font-size:30px;}
#prodSelectLayer article.order .button{margin-top:20px;margin-bottom:0}
#prodSelectLayer article.order .button button.button{width:48%;height:80px;font-size:22px;}
#prodSelectLayer article.order .button button.put_into_cart{margin-right:2%}


#pickupType .container{width:70vw;height:auto;padding:4% 5%;margin-top:35vh;}
#pickupType .container h3.title{font-size:25px;}
#pickupType .container .btn{font-size:22px;height:74px;}


/** cart **/
#cart-list{top:115px;padding: 4% 5%;width: 90% !important;}
#cart-list .empty-data{font-size:24px;padding-top:20vh;}
#cart-list > .title{margin-bottom:21px;}
#cart-list > .title h2{font-size:20px;}
#cart-list > .title #btn-cart-close{width:22px;height:22px;}
#cart-list .cart-wrap .cart-item .picture{position:relative;width: 22%;padding-top: 21%;height:auto;}
#cart-list .cart-wrap .cart-item .picture img{position:absolute;top:0}

#cart-list .cart-wrap .cart-item .product-item-info{height: auto;width: calc(78% - 2px);}
#cart-list .cart-wrap .cart-item .product-item-info .row{height:36px;}
#cart-list .cart-wrap .cart-item .product-item-info .row .btn-item-del{width: 37px;height: 36px;line-height: 37px;border-bottom: 1px solid black;background-color: #fff;}
#cart-list .cart-wrap .cart-item .product-item-info .row .btn-item-del img{width:20px;height:20px;}
#cart-list .cart-wrap .cart-item .product-item-info .row .title{width: auto;font-size: 15px;height: 36px;line-height: 36px;}
#cart-list .cart-wrap .cart-item .product-item-info .row .opt-col{height:36px;}
#cart-list .cart-wrap .cart-item .product-item-info .row .opt-col .opt-title{font-size:14px;}
#cart-list .cart-wrap .cart-item .product-item-info .row .opt-col .opt-list .each{font-size:16px;line-height: 37px;}
#cart-list .cart-wrap .cart-item .product-item-info .row .opt-col .opt-content{font-size:17px;line-height: 37px;}




/** pay **/
#telBody{top:0;width: 410px;margin: 15% auto;height:auto;padding:5%;}
#telBody #userTel{width: 410px; margin: 0 auto;margin-top:22px;}
#telBody #userTel .button-wrap{width:410px;}
#telBody #userTel .button-wrap button{height: 50px;font-size: 16px;}
#telBody #userTel .button-wrap button.cancel{margin-right: 1%;}

#processWrap{top:0;padding: 100px 40px; height: auto;}
#processWrap .title{font-size:20px}
#processWrap .sub-title{font-size:18px;}
#processWrap .afterspace{margin-top:40px;height:130px;background-size: 100px;}
#processWrap .motion .arrow{width:50px;}
#processWrap .motion .card{width: 120px; margin: 0 auto;}
#processWrap .button{height: 55px; font-size: 20px; line-height: 55px; padding: 0; width: 230px;margin-top:100px;}
#processWrap.done:after{font-size:24px;}
/** scanner **/
#scanWrap{top:0;padding:30px;}
#scanWrap .title{font-size:18px}
#scanWrap .content{font-size:14px;}
#scanWrap .barcode-wrap{margin-top:30px}
#scanWrap .barcode-wrap img{width:140px;height:100px}

#scanWrap .context-wrap{margin-top:30px;}
#scanWrap .context-wrap .row{margin-bottom: 10px;}
#scanWrap .context-wrap .row .title{font-size:18px;}
#scanWrap .context-wrap .row .value{font-size:20px;}

#scanWrap .button-wrap{margin-top:30px;}
#scanWrap .button-wrap button{font-size:18px;height:55px;}
/**barcode animate **/
@keyframes barcode-scan2 {
    0%{transform:translateY(0px)}
    100%{transform:translateY(110px)}

}
#mainAdvertWrap{position: fixed; width: 100%;}
#mainAdvertWrap .advertise-wrap .ad-wrap .videos_wrap{height: calc(100vh - 36vh - 30px);}
#mainAdvertWrap .advertise-wrap .ad-wrap .desc-wrap{width: 100%; height: 30px; font-size: 16px; font-weight: bold; background: black; color: #fff; line-height: 30px; letter-spacing: -0.32px; text-align: center;}
#mainAdvertWrap .advertise-wrap .ad-wrap .inner{height: 36vh; width: 100%; background: #fff;}

#mainAdvertWrap .advertise-wrap .ad-wrap .inner .time{height:50px;padding:10px 20px;}
#mainAdvertWrap .advertise-wrap .ad-wrap .inner .time .logo{width:50px;height:50px;line-height:50px;}
#mainAdvertWrap .advertise-wrap .ad-wrap .inner .time .remain-time{top:18px;left:90px;font-size:13px;}
#mainAdvertWrap .advertise-wrap .ad-wrap .inner .time .remain-time .count-text li{font-size: 16px;font-weight: 900;text-align: center;}
#mainAdvertWrap .advertise-wrap .ad-wrap .inner .time .remain-time .count-text li:after{font-family: YoonGothic;font-size: 12px;}

#mainAdvertWrap .advertise-wrap .ad-wrap .inner .prod .prod-list .prod-item{width: 200px; margin-right: 18px;}
#mainAdvertWrap .advertise-wrap .ad-wrap .inner .prod .prod-list .prod-item .picture{width:100%;height:220px;line-height: 220px;}
#mainAdvertWrap .advertise-wrap .ad-wrap .inner .prod .prod-list .prod-item .picture img{width:100%;height:100%;}
#mainAdvertWrap .advertise-wrap .ad-wrap .inner .prod .prod-list .prod-item .title{margin-top: 8px; font-size: 15px;}
#mainAdvertWrap .advertise-wrap .ad-wrap .inner .prod .prod-list .prod-item .price{margin-top: 4px; font-size: 11px; font-weight: 500; letter-spacing: -0.18px;}


.qrcode-layer .inner{position: relative; width: 60vw; margin: 0 auto; margin-top: 10px; padding-top: 97px;}
.qrcode-layer .inner .picture{height:480px;}
.qrcode-layer .inner .picture canvas{width:245px !important;}

footer .container .menu-bar a.btn-mobile{display: block; width: 104px; height: 158px; text-align: center; padding-top: 23px;}
footer .container .menu-bar a.btn-mobile span{font-family: YoonGothic; font-size: 19px; font-weight: 500; letter-spacing: -0.24px; color: white; margin-top: 4px;}
footer .container .menu-bar a.btn-mobile:before{background-position: -27px -22px; background-repeat: no-repeat; width: 158px; height: 62px; background-size: 142px;}

#brand .menu.type02{padding:0;}
#brand .menu.type02 .menu-content{position:fixed;bottom: 3vh;width: 100vw;}
#brand .menu.type02 .menu-content .row .box{
    width: calc((100vw / 4) - 80px);
    height: calc((100vw / 4) - 80px);
}

/** 설문조사 **/
#surveyPopup .header{height:120px}
#surveyPopup .header .btn-back{top:30px}
#surveyPopup .header .btn-close{top: 45px;}
#surveyPopup .header .logo{line-height: 120px;}
#surveyPopup .header .logo img{height:120px;width:auto;}
#surveyPopup .body{padding-top:5vh}
#surveyPopup .body .inner{height:370px;}
#surveyPopup .body .inner .related-by li.item{width: 40vw; height: 40vw; border-radius: 30px;}
#surveyPopup .body .content{}
#surveyPopup .body .content .title{font-size: 32px; margin-bottom: 16px;}
#surveyPopup .body .content .explain{margin-bottom: 30px; font-size: 25px;}
#surveyPopup .body .btn{width: 300px;font-size: 28px;height: 80px;}
#surveyPopup .body .line-text{margin-top: 20px;}
#surveyPopup .body .line-text span{font-size:18px}
#surveyPopup .body .coupon-wrap{margin-top:20px}
#surveyPopup .body .coupon-wrap .coupon{
    height: 155px;
    width: 360px;
}
#surveyPopup .body .coupon-wrap .coupon .detail{width: calc(100% - 70px);}
#surveyPopup .body .coupon-wrap .coupon .detail:before{    background: #efefef;}
#surveyPopup .body .coupon-wrap .coupon .detail .title{font-size: 13px; margin-top: 10px;}
#surveyPopup .body .coupon-wrap .coupon .images{width:70px}
#surveyPopup .body .coupon-wrap .coupon .detail .explain{font-size:20px;}

.survey-step{margin-top:5vh}
.survey-step .title{font-size: 29px;}
.survey-step .question{font-size: 25px;}
.survey-step .answers{margin-top: 20px;height: 52vh;}
.survey-step .answers .list li{height: 60px;line-height: 60px;font-size: 22px;width: 330px;margin: 18px auto;}

.survey-body .button-wrap button{height: 70px;line-height: 70px;font-size: 24px;width: 230px;}
.survey-body .button-wrap button.next{}

#surveyPopup .survey-result > .inner{height: calc(100vh - 120px); margin-top: 120px;}
#surveyPopup .survey-result > .inner > .title{font-size:26px;}
#surveyPopup .survey-result .recomm{height:calc(100vh - 750px) !important;padding:20px 28px}

#surveyPopup .survey-result .recomm .title{font-size:28px;margin-bottom:10px;}
#surveyPopup .survey-result .recomm .item{width:180px;}
#surveyPopup .survey-result .recomm .item .item-image{width:180px;height:180px;}
#surveyPopup .survey-result .recomm .item .sub-title{font-size:17px;margin-top:10px;}
#surveyPopup .survey-result .recomm .item a{font-size:16px;line-height: 16px;}