@charset "utf-8";

/* =================================
*		팝업, 모달, 레이어
*		2021-01-15 작성
================================== */


/* =======================================================
 	modal
========================================================*/
.modal-container {display:none; position: fixed; top: 0; left: 0; z-index: 500; width: 100%; height: 100%; }
.modal-container .dimlayer {position: absolute; top: 0; left: 0; z-index: 600;width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.modal-contents {position: absolute; top: 50%; left: 50%; z-index: 700; width: 500px; height: 500px; border-radius: 0; background-color: #fff; transform: translate(-50%, -50%); }

.modal-header {position: relative; height: 50px; padding: 0 15px; border-bottom: 1px solid #eee; box-sizing: border-box; }
.modal-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.modal-header .modal-title {float: left; width: calc(100% - 30px); color: #000; font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; line-height: 49px; overflow: hidden; }
.modal-header .modal-close {float: right; width: 30px; height: 49px; background-image: url("/AppData/images/button/modal_close.png"); background-repeat: no-repeat; background-size: 14px 14px; background-position: center right; }

.modal-body {height: 450px; overflow-y: scroll; padding: 20px 15px; box-sizing: border-box; }
.modal-body:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.modal-body input{width: 100%; padding: 0 15px; font-size: 14px;}
.modal-body .input-address-search{background-image: url("/AppData/images/button/btn_search.png"); background-repeat: no-repeat; background-position: right 15px center; background-size: 18px;}

.address-search-tip strong{display: block; margin-bottom: 15px; font-size: 16px; font-weight: 700;}
.address-search-tip p{font-size: 14px; color: #666;}
.address-search-tip .text-guide{margin-top: 10px; font-size: 12px; color: #888;}


/* 공유하기 modal-share
-----------------------------------------------------*/
.modal-share .modal-contents {height: auto; }
.modal-share .modal-body {height: auto; overflow-y: auto; }
.modal-share .share-wrapper {position: relative; width: 100%; }

.modal-share .share-list {}
.modal-share .share-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.modal-share .share-list ul {width: 100%; display: table-row; table-layout: fixed; }
.modal-share .share-list li {display: table-cell; width: 1%;}

.modal-share .btn-sns {width: 100%; margin: 0 auto; text-align: center; }
.modal-share .btn-sns .icon {display: block; width: 40px; height: 40px; margin: 0 auto; border-radius: 999px; background-repeat: no-repeat; background-size: contain; }
.modal-share .btn-sns span {display: inline-block; margin-top: 8px; font-size: 12px; color: #444; word-break: keep-all; }

.modal-share .input-btn-group {margin-top: 20px; }
.modal-share .input-btn-group .input-text {width: calc(100% - 85px); }
.modal-share .input-btn-group .btn {width: 80px; }



/* 언어설정 modal-share
-----------------------------------------------------*/
.modal-lang .modal-contents {height: auto; max-height: 500px; }
.modal-lang .modal-body {height: auto; max-height: 450px; }
.modal-lang .select-custom {margin-bottom: 10px; }






/* =======================================================
 	bpopup
========================================================*/
.bpopup {display: block; background-color: #fff; box-shadow: 0px 3px 12px 5px rgba(7, 7, 7, 0.2); box-sizing: border-box; }


.bpopup-banner {width: 300px; }
.bpopup-banner .bpopup-body {max-width: 100%; max-height: 356px; overflow: hidden; }
.bpopup-banner .bpopup-body img {display: block; max-width: 100%; max-height: 356px;}

.bpopup-banner .bpopup-footer {width: 100%; height: 40px; border-top: 1px solid #ddd; }
.bpopup-banner .bpopup-footer:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.bpopup-banner .bpopup-footer > button {float: left; height: 40px; box-sizing: border-box; padding: 0 10px; font-size: 13px; color: #444; text-align: center; }
.bpopup-banner .bpopup-footer .btn-banner-today {width: 70%; border-right: 1px solid #ddd; }
.bpopup-banner .bpopup-footer .btn-banner-close {width: 30%; }





/* =======================================================
 layer
========================================================*/
.layer-container {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9998; display: none; }
.layer-container.active {display: block; }
.layer-contents {position: absolute; top: 0; left:0; bottom: 0; z-index: 9999; display: block; width: 100%; overflow: hidden; overflow-y: scroll; padding: 0 0; box-sizing: border-box; background-color: #fff; }

.layer-header {position: relative; height: 50px; padding: 0 15px; border-bottom: 1px solid #eee; box-sizing: border-box; }
.layer-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.layer-header .layer-title {float: left; width: calc(100% - 30px); color: #000; font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; line-height: 49px; overflow: hidden; }
.layer-header .layer-close {float: right; width: 30px; height: 49px; background-image: url("/AppData/image/sbutton/modal_close.png"); background-repeat: no-repeat; background-size: 14px 14px; background-position: center right; }

.layer-body {box-sizing: border-box; }





/* 쿠폰설정 layer-coupon
-----------------------------------------------------*/
.layer-coupon .coupon-register {padding: 20px 15px 20px; border-bottom: 1px solid #ddd; box-sizing: border-box; }

.layer-coupon .coupon-list { box-sizing: border-box; }
.layer-coupon .coupon-list li {width: 100%; padding: 20px 15px; border-bottom: 1px solid #e3e3e3; box-sizing: border-box; }

.layer-coupon .coupon-list .nodata {width: 100%; padding: 100px 0; border-bottom: 0; }
.layer-coupon .coupon-list .nodata p {text-align: center; color: #666; font-size: 14px; }

.layer-coupon .coupon-list .coupon-item {display: table; width: 100%; table-layout: fixed; }

.layer-coupon .coupon-list .coupon-left {display: table-cell; width: 75%; vertical-align: top; }
.layer-coupon .coupon-list .coupon-left:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.layer-coupon .coupon-list .radio-group {float: left; width: 30px; }
.layer-coupon .coupon-info {float: left; width: calc(100% - 30px); }
.layer-coupon .coupon-info .title {display: block; font-size: 14px; color: #222; font-weight: 700; margin-bottom: 10px; }
.layer-coupon .coupon-info  p {font-size: 12px; color: #999; font-weight: 400; }


.layer-coupon .coupon-list .coupon-right {display: table-cell; width: 25%; font-size: 16px; text-align: right; font-weight: 700; vertical-align: middle; }

.layer-coupon .coupon-list .disable {background-color: #f5f5f5; }
.layer-coupon .coupon-list .disable p,
.layer-coupon .coupon-list .disable .title {color: #bbb; }


/*   ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) {
.modal-container {display: none; position: fixed; top: 0; left: 0; z-index: 500; width: 100%; height: 100%; }
.modal-container .dimlayer {position: absolute; top: 0; left: 0; z-index: 600;width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.modal-contents {position: absolute; top: 50%; left: 50%; z-index: 700; width: 500px; background-color: #fff; transform: translate(-50%, -50%); }

.modal-header {position: relative; height: 50px; padding: 0 20px; border-bottom: 1px solid #eee; box-sizing: border-box; }
.modal-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.modal-header .modal-title {float: left; width: calc(100% - 30px); color: #000; font-size: 18px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; line-height: 49px; overflow: hidden; }
.modal-header .modal-close {float: right; width: 30px; height: 49px; background-image: url("/AppData/images/button/modal_close.png"); background-repeat: no-repeat; background-size: 14px 14px; background-position: center right; }

.modal-body {padding: 20px 20px; box-sizing: border-box; }




.modal-share .share-list {}
.modal-share .share-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.modal-share .share-list li {float: left; width: 60px; height: 90px;}
.modal-share .share-list li:first-child {margin-right: 0; }

.modal-share .btn-sns {width: 100%; margin: 0 auto; text-align: center; }
.modal-share .btn-sns .icon {display: block; width: 50px; height: 50px; margin: 0 auto; border-radius: 999px; background-repeat: no-repeat; background-size: contain; }

.modal-share .btn-sns span {display: inline-block; margin-top: 8px; font-size: 12px; color: #444; word-break: keep-all; }
.modal-share .input-btn-group {padding-top: 16px; }





.bpopup-banner {width: 480px; }
.bpopup-banner .bpopup-body {min-height: 356px; max-width: 100%; max-height: 570px;}
.bpopup-banner .bpopup-body img {display: block; max-height: 570px;}




}