@charset "UTF-8";

/**
 * 디자인별 템플릿 css 분리
 * 팝업 관련 css
 * @date:2021-07-08
 * @name:이상아
 */

/* 레이어 */
.overlay {z-index:102; display:none; position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0, 0, 0, 0.75);}
.layer-wrap {z-index:103; display:none; position:fixed; top:50%;right:0; left:0; transform:translateY(-50%); background:#fff;} /* 17.10.31 수정 */
.layer-wrap .lhd {height:42px; border-bottom:1px solid #e4e4e4;} /* 17.10.23 수정 */
.layer-wrap .lhd h2 {font-size:18px; line-height:44px; text-align:center;} /* 2017-11-01 */
.layer-wrap .lhd .btn-h30-close {top:25px; left:90%; width:12px; height:12px; background-size:12px auto;}
.layer-wrap .lcont {padding:15px;} /* 17.10.23 수정 */
.layer-wrap .lcont .box-terms {height:60px; padding:10px; background:#f0f0f0; color:#808080; font-size:11px; line-height:1.45;}
#shareLayer {left:50%; width:248px; margin-left:-124px;}
#shareLayer .lhd {border-bottom:none;}
#shareLayer .lhd .btn-h30-close {right:15px; width:15px; height:15px; background-size:15px auto;}
#shareLayer .tit {font-size:18px; color:#333; text-align:center;} /* 2017-11-01 */
#shareLayer .lcont {padding:20px 35px 30px;}
#shareLayer .lcont .sns {overflow:hidden;}
#shareLayer .lcont .sns li {float:left; width:50px; height:50px; margin:0 14px 14px 0;}
#shareLayer .lcont .sns li:nth-child(3n) {margin-right:0;}
#shareLayer .lcont .sns li a {display:block; width:50px; height:50px; background-size:50px auto; text-indent:-99999em;}
#shareLayer .lcont .sns li.fb a {background-image:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_sns_facebook.png);}
#shareLayer .lcont .sns li.twitter a {background-image:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_mysns_twitter_blue.png);}
#shareLayer .lcont .sns li.line a {background-image:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_mysns_line.png);}
#shareLayer .lcont .sns li.kas a {background-image:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_sns_kakaostory.png);}
#shareLayer .lcont .sns li.katalk a {background-image:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_sns_kakaotalk.gif);}
#shareLayer .lcont .sns li.blog a {background-image:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_sns_blog.png);}
#shareLayer .lcont .sns li.band a {background-image:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_mysns_band.png);}
#shareLayer .lcont .sns li.google a {background-image:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_mysns_google.png);}
#shareLayer .lcont .sns li.telegram a {background-image:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_mysns_telegram.png);}
#shareLayer .lcont .sns li.sms a {background-image:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_sns_sms.png);}
#shareLayer .lcont .sns li.uc a {background-image:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_sns_urlcopy.png);}
.layer-wrap .lcont .adrs-method {overflow:hidden; margin-bottom:14px;}
.layer-wrap .lcont .adrs-method li {float:left; margin-right:16px;}/*  2017-11-01 추가 */
.layer-wrap .lcont .adrs-method li:last-child {margin-right:0;}
.layer-wrap .lcont .adrs-method label span {padding-left:25px;} /* 2017-11-01 추가 */
.layer-wrap .lcont .li-input li {margin-bottom:7px;}
.layer-wrap .lcont .li-input li p {line-height:20px;}
.layer-wrap .btn-wrap a {float:right;}
#addrSearch {left:50%; width:290px; margin-left:-145px;}

.pop-page {position:relative;}
.pop-page .tab {overflow:hidden; border-bottom:1px solid #e4e4e4;}
.pop-page .tab li {float:left; width:50%; text-align:center;}
.pop-page .tab li a {display:block; height:46px; line-height:48px; color:#999; font-size:14px; text-align:center; letter-spacing:-1px;} /* 21.03.04 수정 */
.pop-page .tab li.now a {height:46px; border-bottom:2px solid #000; color:#000; font-weight:bold;}
.pop-page .popTopWrap {position:relative; border-bottom:1px solid #e4e4e4;}
.pop-page .popTopWrap .tabWrap {margin-right:40px; border-right:1px solid #e4e4e4;}
.pop-page .popTopWrap .tabWrap .tab {overflow:visible; border-bottom:none;}
.pop-page .popTopWrap .tabWrap .tab li {width:42%;}
.pop-page .popTopWrap .btn-popTop-close {position:absolute; top:0; right:0; z-index:10; width:37px; height:48px; background:#fff url(//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h22_close_gray.png) no-repeat center / 11px auto;}
.pop-page .tbl-detail {padding:20px 20px 35px;}
.pop-page .tbl-detail th {padding:12px 10px 10px; border:1px solid #e2e1e1; background:#f0f0f0; font-size:13px; color:#333; text-align:left; font-weight:normal;} 
.pop-page .tbl-detail th.bold {font-weight:bold;} 
.pop-page .tbl-detail td {padding:12px 10px 10px; border:1px solid #e2e1e1; background:#fff; font-size:13px; color:#2d2d2d;} 
.pop-page .tbl-detail td.bold {font-weight: bold;} 
.pop-page .inner {padding:25px 20px;}
.pop-page.prd-detail .txt-detail {overflow:hidden; padding:35px 20px; text-align:center;} 
.pop-page.prd-detail .txt-detail.non p {margin-top:-webkit-calc(50% - 39px); margin-top:-moz-calc(50% - 39px); margin-top:calc(50% - 39px); padding-top:63px; background:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/bul_non.gif) no-repeat center top; background-size:41px; color:#808080;}
.pop-page.prd-detail .tbl-detail.non {padding:35px 20px;}
.pop-page.prd-detail .tbl-detail.non p {margin-top:-webkit-calc(50% - 39px); margin-top:-moz-calc(50% - 39px); margin-top:calc(50% - 39px); padding-top:63px; background:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/bul_non.gif) no-repeat center top; background-size:41px; color:#808080; text-align:center;}
.pop-page.terms .tab li {width:33.3%;}
.pop-page.terms dt {margin-bottom:25px; font-size:15px; font-weight:bold;} 
.pop-page.terms dd {margin-bottom:25px; font-size:14px; font-weight:lighter; color:#4c4c4c; line-height:21px;} 

.open-layer-addr {position:relative;}
.open-layer-addr .btn-search {top:0; border-left:none;}
.btn-home {position:absolute; top:50%; left:20px; width:17px; height:20px; margin-top:-10px;  background:url(//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h40_home.gif) no-repeat center /  17px auto; text-indent:-9999em;}

/* 장바구니 담기 성공 */
.layer-cart-ok {display:none; width:100%; height:100%; position:fixed; top:0; left:0; z-index:999;}
.layer-cart-ok .inner {display:table-cell; vertical-align:middle; text-align:center;}
.layer-cart-ok .inner .cart {display:inline-block; width:123px;}
.layer-cart-ok.on {display:table;}

/* 장바구니 아이콘 */
@-webkit-keyframes check {
	0% {height:0; width:0;}
    33.3333% {width:5px; height:0;}
}
@-moz-keyframes check {
	0% {height:0; width:0;}
    33.3333% {width:5px; height:0;}
}
@-ms-keyframes check {
	0% {height:0; width:0;}
    33.3333% {width:5px; height:0;}
}
@keyframes check {
	0% {height:0; width:0;}
    33.3333% {width:5px; height:0;}
}
.checkmark {display:block; position:absolute; top:50%; left:50%; margin:8px 0 0 -6px;}
.checkmark:after {-webkit-animation:check 0.5s; -moz-animation:check 0.5s ; -o-animation:check 0.5s; animation:check 0.5s; -moz-transform:scaleX(-1) rotate(135deg); -ms-transform:scaleX(-1) rotate(135deg);
-webkit-transform:scaleX(-1) rotate(135deg); transform:scaleX(-1) rotate(135deg); -moz-transform-origin:left top; -ms-transform-origin:left top; -webkit-transform-origin:left top; transform-origin:left top;
border-right:2px solid #fff; border-top:2px solid #fff; content:''; display:block; height:10px; left:0; position:absolute; top:0; width:5px;}

/* 18.10.10 clipboard layer */
.clipboardLayer {display:none; position:absolute; z-index:101; background:#000; color:#fff; padding:7px; border:1px solid #000; border-radius:10px; opacity:0.7;}

/* 18.11.29 수정 fade layer alert utility 에서 사용 */
.fadeLayer {display:none; position:absolute; z-index:101; background:#000; color:#fff; padding:7px; border:1px solid #000; border-radius:10px; opacity:0.7;}
.fixed-fadeLayer {position:fixed; bottom:60px; z-index:101; width:280px; left:50%; margin-left:-148px; text-align:center; word-break:keep-all; background:#000; color:#fff; padding:7px; border:1px solid #000; border-radius:10px; opacity:0.7;}

/* 19.01.11 팝업 */
#MainPopup {width:400px; background:#fff; margin:0 auto;}
.shopMainPopup {position:relative;}
.shopMainPopup ul li {float:left; }
.shopMainPopup .swiper-pagination-bullet {width:11px; height:11px; background:#d6d6d6; cursor:pointer;}
.shopMainPopup .swiper-pagination-bullet-active {background:#555;}
.shopMainPopup .img-type img {width:100%;}
.shopMainPopup .popup-cnt {display:table; width:100%; position:relative;}
.shopMainPopup .popup-txt {display:table-cell; vertical-align:middle; padding:30px; line-height:22px; font-size:17px; color:#000; text-align:center;} /* 19.03.07 수정 */
.shopMainPopup .popup-txt p {margin-bottom:10px;}
.shopMainPopup .hd-type .popup-hd {height:60px; text-align:center; box-sizing:border-box; color:#fff;} /* 19.03.07 수정 */
.shopMainPopup .hd-type .popup-hd span {display:inline-block; line-height:60px; font-weight:bold; font-size:22px;} /* 19.03.07 수정 */
.shopMainPopup .hd-type .popup-hd span i {margin-right:10px;}
.shopMainPopup .hd-type .popup-hd.bg-ffffff {background:#fff; border-bottom:1px solid #000;}
.shopMainPopup .hd-type .popup-hd.bg-ffffff span {color:#000;}
.shopMainPopup .hd-type .popup-hd.bg-e6207d {background:#e6207d;}
.shopMainPopup .hd-type .popup-hd.bg-c90800 {background:#c90800;}
.shopMainPopup .hd-type .popup-hd.bg-f74c00 {background:#f74c00;}
.shopMainPopup .hd-type .popup-hd.bg-fcb800 {background:#fcb800;}
.shopMainPopup .hd-type .popup-hd.bg-23c2ad {background:#23c2ad;}
.shopMainPopup .hd-type .popup-hd.bg-3a6dd5 {background:#3a6dd5;}
.shopMainPopup .hd-type .popup-cnt {height:340px;} /* 19.03.07 수정 */
.shopMainPopup .txt-type .popup-txt {padding:30px;}
.shopMainPopup .txt-type .popup-cnt {height:400px;}
.shopMainPopup .bot {height:47px; overflow:hidden; background:#ededed;}
.shopMainPopup .bot a {display:block; width:199px; border-left:1px solid #d5d5d5; float:left; line-height:47px; text-align:center; font-size:18px; color:#808080;}
.shopMainPopup .bot a:first-child {border-left:none;}
.shopMainPopup .swiper-pagination-bullet {opacity:0.9;}
.shopMainPopup .swiper-pagination {bottom:15px;}

@media screen and (max-width:640px) {
	#MainPopup {width:80%;}
	.shopMainPopup {width:100%; height:auto;}
	.shopMainPopup .img-type img {width:100%; height:auto;}
	.shopMainPopup .bot a {width:49%; font-size:16px;}
	.shopMainPopup .hd-type .popup-hd {height:50px;}
	.shopMainPopup .hd-type .popup-hd span {line-height:50px; font-size:18px;}
	.shopMainPopup .hd-type .popup-hd span i {margin-right:5px;}
	.shopMainPopup .hd-type .popup-cnt {height:100%;}
	.shopMainPopup .hd-type .popup-txt {padding:20px; line-height:18px; font-size:14px;}
	.shopMainPopup .txt-type .popup-cnt {height:auto;}
	.shopMainPopup .txt-type .popup-txt {padding:15px;}
	.shopMainPopup .popup-cnt {height:auto;}
	.shopMainPopup .popup-txt {line-height:18px; font-size:14px;}
	.shopMainPopup .popup-txt p {margin-bottom:5px;}
}

/* 우편번호통합 팝업 S */
#zipcode_integrated_layer {display:block; width:310px; overflow-x:hidden; background:#fff; margin:0 auto;}
#zipcode_integrated_layer #pop-header {position:relative; height:49px; background:#fcfcfc;}
#zipcode_integrated_layer #pop-header .layer-title {padding-left:15px; font-size:19px; line-height:52px;}
#zipcode_integrated_layer #pop-header .zipcode_integrated_layer_close {position:absolute; top:50%; right:15px; width:21px; height:21px; margin-top:-11px; background:url(//image.makeshop.co.kr/mysoho/assets/admin/images/btn/h42_close_black.png) no-repeat center / 21px auto; text-indent:-9999px;}
#zipcode_integrated_layer .zipcodeIntegratedPopup {position:relative;}
#zipcode_integrated_layer .zipcodeIntegratedPopup .popup-cnt {display:table; width:100%; position:relative;}
#zipcode_integrated_layer .zipcodeIntegratedPopup .popup-txt {padding:25px; font-size:16px; line-height:23px; text-align:center;}
#zipcode_integrated_layer .zipcodeIntegratedPopup .popup-strong-txt {font-weight:bold;}
#zipcode_integrated_layer .zipcodeIntegratedPopup .zipcode-ok-btn {width:140px; display:inline-block; height:46px; line-height:48px; background:#333; box-sizing:border-box; color:#fff; font-size:14px; font-weight:bold; text-align:center;}

@media screen and (max-width:640px) {
	#zipcode_integrated_layer .zipcodeIntegratedPopup {width:100%; height:auto;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .img-type img {width:100%; height:auto;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .bot a {width:49%; font-size:16px;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .hd-type .popup-hd {height:50px;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .hd-type .popup-hd span {line-height:50px; font-size:18px;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .hd-type .popup-hd span i {margin-right:5px;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .hd-type .popup-cnt {height:100%;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .hd-type .popup-txt {padding:20px; line-height:18px; font-size:14px;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .txt-type .popup-cnt {height:auto;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .txt-type .popup-txt {padding:15px;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .popup-cnt {height:auto;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .popup-txt {line-height:18px; font-size:14px;}
	#zipcode_integrated_layer .zipcodeIntegratedPopup .popup-txt p {margin-bottom:5px;}
}

.users-layer-pop{width:90%;position:fixed; left:5%;z-index:102;background:#fff;top:10%;overflow:hidden}
.users-layer-pop .users-pop-tit {position:relative;text-align:center;height:60px;border-bottom:1px solid #d0d0d0}
.users-layer-pop .users-pop-tit h2{font-size:20px;line-height:62px}
.users-layer-pop .users-pop-tit .close-btn{cursor:pointer;position:absolute;top:50%;margin-top:-10px;right:20px;width:20px;height:20px;background:url(//image.makeshop.co.kr/mysoho/assets/admin/images/btn/h25_close.png) no-repeat 50% 50%;text-indent:-9999px;}
.users-layer-pop .users-normal-txt{font-size:16px; color:#333;text-align:center;margin:0 auto 20px}
#addressSearchLayer {max-height:370px;margin:0px 10px;}
#addressSearchLayer .address-hd .address-search {margin:5px 10px !important;}

/* 에스크로 추가 */
.layer-wrap .lcont .return-application .txt {text-align:center; line-height:20px; font-size:14px; color:#333333;}
.layer-wrap .lcont .return-application .way {margin-bottom:20px; line-height:40px; background:#f5f5f5; margin-top:10px; text-align:center; font-size:14px; color:#297bcf;}
.layer-wrap .lcont .return-application .tbl-setting {padding-top:20px; border-top:1px solid #e8e8e8;}
.layer-wrap .lcont .return-application .tbl-setting .tit {margin-bottom:10px; font-weight:bold; font-size:14px; color:#333333;}
.layer-wrap .lcont .return-application .tbl-setting th {font-weight:400; line-height:42px; text-align:left; font-size:14px; color:#999999;}
.layer-wrap .lcont .return-application .tbl-setting td {padding:8px 0;}
.btn-h43-gray {display:inline-block; line-height:47px; background:#666666; text-align:center; font-size:14px; font-weight:bold; color:#fff;}
.layer-wrap .lcont .return-application .btns {overflow:hidden;}

/* 21.04.07 이상아 추가 */
.layerSohoSchBox {position:absolute; left:50%; margin-left:-320px; top:0; max-width:640px; width:100%; height:100vh; background:#fff; z-index:106; display:none;} /* 21.04.19 이상아 수정, 21.05.07 이상아 2차 수정*/
.layerSohoSchBox .btnClose {position:absolute; right:0; top:0; width:47px; height:48px; font-size:0; line-height:0; text-indent:-9999px; overflow:hidden; background:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/bg_close_h30.png) no-repeat center center; background-size:15px 15px;}
.layerSohoSchBox .sohoSch {margin:67px 18px 0; position:relative;}
.layerSohoSchBox .sohoSch h3 {font-size:20px; color:#000; font-weight:bold; padding-bottom:14px;}
.layerSohoSchBox .schDiv {position:relative; overflow:hidden; border-bottom:2px solid #000; padding-right:16px;}
.layerSohoSchBox .schDiv input {width:100%; height:44px; padding:0; border:none; font-size:13px;}
.layerSohoSchBox .schDiv input:focus {outline:none;}
.layerSohoSchBox .schDiv input::input-placeholder {color:#bfbfbf; font-size:13px;}
.layerSohoSchBox .schDiv input::-webkit-input-placeholder {color:#bfbfbf; font-size:13px;}
.layerSohoSchBox .schDiv input:-ms-input-placeholder {color:#bfbfbf; font-size:13px;}
.layerSohoSchBox .schDiv input::-ms-input-placeholder {color:#bfbfbf; font-size:13px;}
.layerSohoSchBox .schDiv .btnHsch {position:absolute; right:0; top:0; width:16px; height:44px; font-size:0; line-height:0; text-indent:-9999px; overflow:hidden; background:url(//image.makeshop.co.kr/mysoho/assets/shop/img/common/bg_sch_h34.png) no-repeat center center; background-size:16px 17px;}

/* 21.05.07 이상아 추가 */
.wrap .layerSohoSchBox {left:0; margin-left:0;}

/* 21.05.07 모바일 미디어 쿼리 이상아 추가 */
@media screen and (max-width:640px) {
	.layerSohoSchBox {left:0; margin-left:0;}
}

/* 22.07.01 이상아 추가 */
.pop-page .inner .tbl-terms {word-break:break-word;}