@charset "UTF-8";

/* btn class active add */
.btn:active,
.btn-default:active { box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !important; }

.ripple:active,
.btn.ripple:active,
.btn-default.ripple:active,
.btn.btn-modal:active { box-shadow: none !important; }

/* html 내의 가이드안내 - 이미지버튼 css에도 동일한 내용이 존재함. 추후 css 통합일 경우 수정해야함 */
h1 { font-size: 4.4444445vw; border-bottom: 1px solid #eee; padding: 10px;}
.info-txt { padding: 10px; }
.info-txt li { color: #000; font-weight: bold; font-size: 3.888889vw; padding: 10px; position: relative; }
.info-txt li:before { position: absolute; content: '-'; top: 9px; left: 0px;}

/* notice-component.js start */
.notice-area { font-size: 3.611111vmin; color: #979797; background-color: #f0f0f0; }
.notice-area .title { margin: 0 0 1.944444vmin; font-size: 3.88888vmin; font-weight: bold; color: #505050; }
.notice-area .content { padding: 5.833334vmin 6.66667vmin 5.55556vmin; }
.notice-area .content .tnc-link-area { margin: 1.9444445vw 0 0 0; padding:0;}
.notice-area .content > ul > li { position: relative; padding-left: 6px; margin-top: .833333vmin; }
.notice-area .content > ul > li:first-child { margin-top: 0; }
.notice-area .content > ul > li::before { content: '·'; position: absolute; top: 0; left: 0; }
.notice-area .content > ul.bullet > li {padding-left:10px;}
.notice-area .content > ul.bullet > li::before { content: "\2022"; position: absolute; top: -1px; left: 0; }
.tnc-link-area { margin: 0; padding:1.9444445vw 6.66667vmin 5.55556vmin; display: flex; }
.tnc-link-area li { float: left !important; margin: 0 !important; padding: 0 1.9444445vw 0 0; font-weight: bold; line-height: 5.8333334vw; }
.tnc-link-area li a { color: #3957ac; font-size:3.6111112vw; text-align: left; letter-spacing: -.2777778vw; text-decoration: underline; }
/* //notice-component.js end */

/* intro-component.js start */
/* intro btn 인트로 버튼 영역 */
.introbtn-area { width:100%; text-align: center; padding: 5vw 0 4.5vw; }
.introbtn-area .title { font-size: 4.722223vw; color: #2d466c; line-height: 1.4; font-weight: bold; }
.introbtn-area .btn-inside { width: 69.44445vw; margin: 0 auto; }
.introbtn-area .btn-inside .mt {margin-top: 4.166667vw;}
.introbtn-area .introbtn { position: relative; padding: 7.5vw 0 5vw; }
.introbtn-area .introbtn .ad-title { top: 1.388889vw; width: 100%; background: none; box-shadow: none; color: #000; text-align: center; }
/* sns share */
.share-area { display: flex; align-items: center; justify-content: center; padding: 3.611112vw 4.44445vw 6.11112vw; }
.share-area .title { color: rgba(0,0,0,.8); font-size: 3.88889vw; flex: 1; }
.share-area .icons { margin-left: auto; }
.share-area .fa { display: inline-block; width: 7.22223vw; height: 7.22223vw; margin-right: .55556vw; border-radius: 100%; background: url("../img/sns-icon.png") no-repeat 0 0; background-size: 25vw auto;
text-indent: 100%; overflow: hidden; white-space: nowrap; }
.share-area .email { background-color: #fff; }
.share-area .message { background-color: #fff; background-position: -7.22223vw 0; }
.share-area .twitter { background-color: #28aae1; background-position: 0 -7.22223vw; }
.share-area .facebook { background-color: #3a549f; background-position: -7.22223vw -7.22223vw; }
.share-area .kakao-talk { background-color: #fee500; background-position: -14.44445vw 0; }
.share-area .naver-band { background-color: #5c5b65; background-position: 0 -14.44445vw; }
.share-area .naver-line { background-color: #3ace01; background-position: -14.44445vw -7.22223vw; }
.share-area .sharevia { background-color: #fff; border: 1px solid #dcdcdc; background-position: -7.222223vw -14.44445vw; }
/* //intro-component.js end */

/* term.component.js start */
/* 약관동의영역 */
.policy-area { padding: 5vw 4.44445vw 6.944445vw; }
.policy-area .title { margin: 0 0 3.33334vw; color: rgba(0,0,0, .66); font-weight: bold; font-size: 3.88889vw; }
.policy-area .img-btn-area { background-size: contain; }
.policy-area .check-area { padding:0 1.388888vw 0 1.388888vw; font-size: 3.88889vmin;}
.policy-area .check-area .details { flex: 0 0 13vw; font-size: 85.71429%; color: #5A6E91; text-align: right; white-space: nowrap; }
.check-line label { display: block; font-weight: bold; color: #000; }
.check-line input[type="checkbox"] { 
	float: left; position: relative; 
	vertical-align: top; border: 1px solid rgba(115,115,115,1); border-radius: .694444vw; width: 5.556vw; height: 5.556vw;
    background-color: #fff; margin: 0 3.5vw 0 0;
    -webkit-appearance: none; -moz-appearance: none;
}
.check-line input[type="checkbox"]:checked { border: 1px solid #5A6E91; background-color: #5A6E91; }
.check-line input[type="checkbox"]:checked:before {
    content: '';
    position: absolute;
    left: .5vw;
    top: .8vw;
    display: block;
    width: 3.88888888888889vw;
    height: 1.94444444444444vw;
    border-width: 0 0 3px 3px;
    border-style: solid;
    border-color: #fff;
    -webkit-transform: rotate(-45deg);
}
.check-line input + span { display: block; margin-left: 8.88888vw; color: #565656; }
.check-area .each { display: flex; padding: 1.666667vw 0;}
.check-area .each .check-line { flex-grow: 2;}
.policy-area .btn-area { margin-top: 10vw; padding: 11.11112vw 0 4.166667vw; border-top: .1388889vw solid rgba(0,0,0, .1); }
.policy-wrap { position: absolute; top: 0; left: 0; width:100%; height: 100%; background: #fafafa; }
.policy-details { padding: 6.1111vw 4.44444vw; }
.policy-details .text { color: rgba(0,0,0, .8); font-size: 3.88888vw; }
/* //term.component.js end */

/* reward.component.js start */
.reward-area { position: relative; }
.reward-area .reward-info {
	position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 6.66667vmin;
    text-align: center;
}
.reward-info .image-area { width: 45.55556vmin; margin: 6.66667vw auto 3.33334vw; }
/* 2018-02-27 add */
.reward-area .reward-info .image-area img { height: 45.555556vw; }
.item-model { margin: 0; font-size: 3.88889vw; color: rgba(0,0,0,.37); line-height: 1.2; }
.item-name {
	margin: 0;
    font-size: 3.88889vw;
    color: rgba(0,0,0,.66);
    line-height: 1.2;
}
.barcode-info {
	position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 6.66667vmin;
    text-align: center;
}
.barcode-info .image-area {
	height: 12.5vw;
    margin: 6.66667vw auto 3.33334vw;
    display: inline-table;
}
.barcode-number {
	margin: 0;
    font-size: 3.88889vw;
    color: rgba(0,0,0,.66);
    line-height: 1.2;
    font-weight: bold;
}
.qrcode-info .image-area { width: 31.111111vw; margin: 9.444444vw auto 10.8333333vw; }
.coupon-part { padding: 7.77778vmin 4.44445vmin 0; position: relative;}
.coupon-part .coupon-line { display: flex; }
.coupon-part .coupon-line .coupon-num-bg {
	flex-grow: 1;
    height: 7.22223vmin;
    margin: 0 2.22223vmin 0 0;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.05);
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.coupon-part .coupon-line .coupon-num {
	height: 7.22223vmin;
    color: #5A6E91;
    border: none;
    background: transparent;
    font-weight: bold;
    width: 100%;
    text-align: center;
    font-size: 133.33334%;
    opacity: 0.66;
    font-size: 4.444444vw;
}
.coupon-part .coupon-line .btn-couponnum {
	flex: 0 0 20.55556vw;
	flex-grow: 2;
	background-color: #3967B9;
	border: 1px solid #3967B9;
	color: #FFF;
	padding: 0 1.38889vw;
	line-height: 1.42857143;
	border-radius: 4px;
	text-align: center;
	vertical-align: middle;
	font-size: 3.6111111vw;
	font-weight: bold;
}
.coupon-part .info { margin-top: 1vw; font-size: 3.33334vw; color: #717171; text-align: center; }
.reward-disabled { opacity: 0.1; }
/* 2018-03-08 추가 */ /* 쿠폰상품 안내 리스트 및 텍스트 영역 시작 */
.coupon-list {} /* 리워드영역의 전체클래스 */
.coupon-list .btn-area {}
.coupon-list .btn-default { margin-top: 4.1666666vw; }
.coupon-list .type-completed { margin:0; }
.coupon-list-area {
	display: flex;
	-webkit-display: flex;
	flex-grow: 1;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	height: 38.888889vw;
}  
.coupon-list-area .coupon-txt {   
	-webkit-flex-grow: 1;
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    -webkit-justify-content: center;
    justify-content: center;
}    
.coupon-list-area .coupon-txt .name { margin: 0; font-size: 3.88889vw; color: #252525; line-height: 1.3; }
.coupon-list-area .coupon-txt .help-txt { margin: 2.222223vw 0 0 0; font-size: 3.6111112vw; color: #8f8f8f; line-height: 1.2; }
.coupon-list-area .coupon-txt .counting { margin: 2.222223vw 0 0 0; font-size: 3.88889vw; color: #505050; line-height: 1.2; }
/* 2018-03-08 추가 */ /* 쿠폰상품 안내 텍스트 영역 끝 */
/* //reward.component.js end */

/* shipping.component.js start */
/* form-input */
/* 입력영역 파트 */
.info-input-area{ padding: 5vw 4.44445vw 6.944445vw;}
.info-input-area .title { 
	padding: 4.44444vw 0;
    border-bottom: .1388889vw solid rgba(0,0,0,.1);
    color: rgba(0,0,0,.66);
    font-size: 4.166666vw;
    font-weight: bold;
}

.info-input-area .info-set{ 
	border-bottom: .1388889vw solid rgba(0,0,0,.1);
    margin-bottom: 5.833333vw;
    padding: 3.055555vw 0 9.722222vw;
	
}
.info-line { margin-top: 7.5vw;}
.info-line label {
    display: block;
    margin-bottom: 1.944444vw;
    font-size: 3.88888vw;
    font-weight: bold;
    color: #252525;
    line-height: 1.2;
}
.info-line label .extra {
    display: inline-block;
    margin-left: 1.388888vw;
    font-weight: 400;
    font-size: 87.5%;
    color: #FF5722;
    vertical-align: top;
}
.info-line input {
    width: 100%;
    padding: 2.5vw 2.222222vw;
    border: .55556vw solid #f2f4f5;
    border-radius: 1.666667vw;
    background: #f4f4f7;
    font-weight: normal;
    color: #4897e1;
    font-size: 5vw;
}
.info-line input::placeholder {
	color: #8f8f8f;
}

.info-line input+ input { margin-top: 1.11111vw; }
.info-line input.ative { border-color: #B00020; color: #252525; }	
.info-line input .name{ font-size: 4.7222223vw; }
.number-line{ display: flex;}
.number-line .dial { flex: 0 0 18.055555vw; }
.cdf-number-line{ display: flex; }
 .info-line .hyphen {
    flex: 0 0 8.53%;
    font-size: 6.11111vw;
    color: #9c9c9c;
    text-align: center;
    line-height: 2;
}
 .info-line .dot {
    flex: 0 0 8.53%;
    font-size: 6.11111vw;
    color: #9c9c9c;
    text-align: center;
}
.info-error-message {
	margin: 1.111112vw 0 -6.111112vw;
    color: #B00020;
    font-size: 3.6111112vw;
    line-height: 5vw;
}
/* address part */
.address .info-txt{
    padding: 5vw 0 3.88888vw;
    border-bottom: 1px solid #e6e6e6;
    font-size: 3.888889vw;
    color: #747474;
    text-align: center;
}
.address .zipcode{ color: #4897e1; font-size: 4.7222222vw; }
/* //address part */
/* delivery details-area */
.delivery-area { padding: 5vw 4.44445vw 6.944445vw; }
.delivery-area .info-txt {
    padding: 5vw 0 3.88888vw;
    border-bottom: 1px solid #e6e6e6;
    font-size: 3.888889vw;
    color: #747474;
    text-align: center;  
}
.delivery-area .delivery-set {
    border-bottom: .1388889vw solid rgba(0,0,0,.1);
    margin-bottom: 5.833333vw;
    padding: 7.5vw 0 9.722222vw;
}
.delivery-set .info-line { margin: 0; padding: 3.5vw 0 0 0; display: table; width: 100%; }
.delivery-set .tit-txt {
	font-size: 3.88888vw;
    font-weight: bold;
    color: #252525;
    display: table-cell;
    width: 35%;
    
}
.delivery-set .con-txt {
	font-size: 3.88888vw;
    color: #8f8f8f;
    display: table-cell;
    width: auto;
}
.delivery-set .zipcode { color: #4897e1; }

/* add : 2018.02.06 : shipping information case - address */
.delivery-set .ship-info-address { display: block; } 
.delivery-set .ship-info-address .info-line:nth-child(2), 
.delivery-set .ship-info-address .info-line:nth-child(3),
.delivery-set .ship-info-address .info-line:nth-child(4),
.delivery-set .ship-info-address .info-line:nth-child(5)
{ padding: 3.5vw 0 0 35%; }

/* delivery details-area **/
/* //shipping.component.js end */

/* eventType3 */
/* complete-participation.component.js start */
.result-area { padding: 5.55555vw 6.66667vw; text-align: center; }
.result-area .status { position: relative; padding: 31.88889vw 0 11.11111vw; border: .20834vw solid #C8C8C8; border-radius: .55556vw; font-size: 4.16666vw; font-weight: bold; color: #4897E1;}
.result-area .participation { background: url(../img/pay_event_type_check.png) no-repeat 50% 5.277778vw; background-size: 21.6667vw 21.6667vw ; }
.result-area .help { margin-top: 3.33333vw; font-size: 3.6111vw; color: #8b8b8b; }
/* count.component.js */
.result-area .count-area { }
.result-area .count { margin-bottom: 3.33334vw; font-size: 5.55556vw; font-weight: bold; color: #4897E1; }
.result-area .count-top { position: relative; margin: -3.33334vw 0 0 0; padding: 0 0 3.88889vw; font-size: 3.611112vw; color: #5a6e91; }
.result-area .count-top:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 5vw; height: 0; margin-left: -2.5vw; border-top: .20833334vw solid rgba(0,0,0, .5); }
/* //count.component.js */
/* complete-participation.component.js end */
/* //eventType3 */

/* eventType9 */
/* code-info.component.js start */
.recommend-area { padding: 5vw 4.44445vw 0; }
.recommend-area .input-line label { display: block; margin: 0 0 3.33334vw; font-weight: bold; font-size: 3.88889vw; line-height: 1.214286; }
.recommend-area .input-line input { width: 100%; padding: 1.944445vw; border: .55556vw solid #F2F2F2; border-radius: 1.66666vw; background: #f2f4f5; font-weight: bold; text-align: center; }
.recommend-area .help {margin: 2.77778vw 0 0; padding-bottom: 6.111112vw; border-bottom: .1388889vw solid rgba(82,86,86, .2); font-size: 3.611111vw; color: rgba(0,0,0, .45);}
/* //code-info.component.js end */

/* recommend-list.component.js start */
.recommend-list-area { padding: 5vw 5vw 2.5vw; }
.recommend-list-area .title { margin: 0 1.66667vw 3.33334vw; font-size: 3.88889vw;font-weight: bold; }
.recommend-list-area .title .text {}
.recommend-list-area .title .badge { 
	display: inline-block; width: 6.67vw; height: 9.1666666vw; margin-left: 1.66667vw; padding: 4.44444vw 1.111111vw 0; 
	background: url('../img/bg-recommend-num.png') no-repeat 0 0; background-size: cover;
    font-size: 3.055555vw; color: #FFF; text-align: center; letter-spacing: -0.277778vw; white-space: nowrap; line-height: 2.22223vw; 
   }
.recommend-list-area .list li {
	display: flex; justify-content: space-between;
    position: relative; padding: 3.895vw 0 4.166666vw; border-top: 1px dashed rgba(180,180,180,.2); 
    font-size: 4.444444vw; color: #00BBD3; line-height: 1.2;
 }
.recommend-list-area .btn-area { display: block; margin-top: 1.66667vw; padding: 0; text-align: center; line-height: 4.44445vw; }
.recommend-list-area .btn-area .btn-more { 
	display: inline-block; 
	width: 100%; height: 11.11112vw; padding: 1.66667vw 0; 
	border: solid rgba(82,86,86,.22); border-width: 0.277778vw 0; background-color: transparent;
}
.recommend-list-area .btn-area .btn-more.disabled .text { opacity: .5; }
.recommend-list-area .btn-area .btn-more .text {
    position: relative;
    display: inline-block;
    border: 0;
    padding: 0 5.55555vw 0 0;
    font-size: 4.44444vw;
    color: rgba(77,77,77,.5);
}
.recommend-list-area .btn-area .btn-more .text:after { content: ''; position: absolute; right: 0; top: 50%; width: 4.444445vw; height: 4.444445vw; margin-top: -2.222225vw; background: url("../img/bul-arr-dw.png") no-repeat 0 0; background-size: 100% 100%; }
.recommend-list-area .btn-area .btn-text { display: block; margin-left: auto; padding: 3.611112vw 1.66667vw 3.88889vw; background-color: transparent; border: 0; box-shadow: none; color: #00bbd3; line-height: 1.4; text-decoration: underline; }
/* //recommend-list.component.js end */
/* //eventType9 */

/* ranking.component.js start */
.ranking-result-area { text-align: center; }
.ranking-result-area .status { padding: 13.88889vw 0; margin: 0 4.44445vw; border-bottom: .1388889vw solid rgba(82,86,86, .2); font-size: 5vw; font-weight: bold; }
.ranking-result-area .success { color: #5A6E91; }
.ranking-result-area .fail { color: #ACACAC; }
.ranking-result-area .gift-info { margin: 0 4.44445vw; padding: 9.44445vw 0 9.166667vw; border-bottom: .1388889vw solid rgba(82,86,86, .2); font-size: 3.6111112vw; }
.ranking-result-area .gift-info img { display: block; width: 32.22223vw; height: 32.22223vw; margin: 0 auto; }
.ranking-result-area .gift-info .pro-name { margin: 6.111112vw 0 .833334vw; font-weight: bold; color: #5A6E91; line-height: 5vw; }
/* ranking-area */
.ranking-area { padding: 5vw 4.44445vw 6.944445vw; }
.ranking-area .info-txt {
	padding: 5vw 0 3.88888vw;
    font-size: 4.16666vw;
    color: rgba(0,0,0,.66);
    text-align: left;	
}
.ranking-area .info-txt.center {
	text-align: center;
	font-size: 5.55556vw;
	font-weight: bold;
}
.ranking-area .ranking-set {
	position: relative;
    padding: 15.277778vw 0;
    background-color: #FAFAFA;
}
/* 바의 순위권 안 밖 영역 분리 */
.pg-bar { display: flex; padding: 0 3.88889vw;}
.pg-bar .inside { flex-grow: 1; margin:0; padding:0;}
.pg-bar .outside { flex-grow: 2; flex: 0 0 18.055556vw; margin:0; padding:0;}
/* 프레그레스바 */
.progressbar-full {
	height: .55556vw;
    background: #EFEFEF;
    border-radius: 5px;
}
.progressbar-full .progressbar_value {
	background: #3967B9;
    border-right: 0;
    border-left: 0;
    height: 100%;
    width:100%; /* 추후 바를 움직이려면 이 값을 삭제 후 기능해서 제어가능. */
    border-radius: 5px;
}
/* 순위포인터 */
.pointer-area { margin-bottom: 1.111111vw; position: relative; height:6.666666vw;}
.pointer-area .ranking-pointer {
	width: 12.11388889vw;
    padding: 0 1.111112vw 1.66667vw;
    color: #FFF;
    font-weight: bold;
    text-align: center;
    background: url('../img/ranking-pointer-bg.png') no-repeat 50% -25vw;
    background-size: 20vw 35vw;
    position: absolute;
}
.ranking-pointer.out {
	width: 15vw;
	background-position: 50% -15vw !important;
}
.ranking-pointer.zero {
	background-position: 50% -5vw !important;
}
.pointer-area .ranking-pointer .r-txt { font-size: 3.6111111vw; display: block; }
.pointer-area .ranking-pointer.move-first { position: absolute; left: -1.9vw; }
.pointer-area .ranking-pointer.move-safe { position: absolute; left: 20.277778vw; }
.pointer-area .ranking-pointer.move-middle { position: absolute; left: 32.36111112vw; }
.pointer-area .ranking-pointer.move-last { position: absolute; right: 16vw; }
.pointer-area .ranking-pointer.move-out { position: absolute; right: 5.6vw; }
.ranking-area .ranking-set .footer-info { position: relative; margin: 0 3.333333vw; }
.ranking-area .ranking-set .marker-txt {
	position: absolute;
    top: 2.5vw;
    color: #A8A8A8;
    font-size: 3.055556vw;
    text-align: left;
}
.ranking-area .ranking-set .marker-txt.first { left: 0; }
.ranking-area .ranking-set .marker-txt.seconde { right: 14.1666666vw; }
.ranking-area .ranking-set .marker-txt.out { right:0;}

/* 추가 */
.ranking-area { padding: 5vw 5vw 6.111111vw; }
.ranking-area .title { font-size: 3.888889vw; color: #505050; padding: 0 0 5.555556vw 1.666667vw;; }
.ranking-area .ranking-pack { position: relative; padding: 13.611111vw 0 0; margin: 0 6.111111vw; }
.ranking-area .ranking-pack .bar { position: relative; height: 1.666667vw; }
.ranking-area .ranking-pack .bar::after { content: ''; position: absolute; left: 0; bottom: 0; right: 0; background: #e6e6e6; height: 0.555556vw; }
.ranking-area .ranking-pack .bar .rating-bar { position: absolute; left: 0; bottom: 0; height: 0.555556vw; background: #4897e1; z-index: 10; }
.ranking-area .ranking-pack .bar .ruler { position: relative; bottom: 0; left: 0; right: 0; height: 1.666667vw; display: flex; justify-content: space-between; z-index: 20; }
.ranking-area .ranking-pack .bar .ruler div { position: absolute; width: 0.277778vw; height: 1.666667vw; background: #e6e6e6; display: flex; justify-content: center; white-space: nowrap; }
.ranking-area .ranking-pack .bar .ruler div:first-child { justify-content: flex-start; }
.ranking-area .ranking-pack .bar .ruler div:last-child { justify-content: flex-end; }
.ranking-area .ranking-pack .bar .ruler div.active { background: #4897e1; }
.ranking-area .ranking-pack .bar .ruler div > span { font-size: 3.055556vw; color: #8f8f8f; padding-top: 2.222222vw; }

.ranking-area .ranking-pack .bar .rating-point { position: absolute; bottom: 2.222222vw; left: 0; right: 0; height: 6.666667vw; }
.ranking-area .ranking-pack .bar .rating-point .balloon { position: absolute; background: #d4d4d4; font-size: 3.611111vw; padding: 1.111111vw 1.388889vw; height: 5vw; color: #fff; white-space: nowrap; text-align: center; display: flex; align-items: center; transform: translateX(-50%); }
.ranking-area .ranking-pack .bar .rating-point .balloon:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: #d4d4d4; border-width: 1.666667vw; margin-left: -1.666667vw; }
.ranking-area .ranking-pack .bar .rating-point .balloon.active { background: #4897e1; }
.ranking-area .ranking-pack .bar .rating-point .balloon.active:after { border-top-color: #4897e1; }

.ranking-area .ranking-cnt { text-align: center; padding-top: 18.888889vw; }
.ranking-area .ranking-cnt .my-cnt { font-size: 5.555556vw; color: #4897e1; font-weight: bold; line-height: 8.888889vw; }
.ranking-area .ranking-cnt .first-place { font-size: 3.611111vw; color: #4897e1; }
.ranking-area .ranking-cnt .cheering { position: relative; font-size: 3.611111vw; color: #747474; margin-top: 3.888889vw; padding-top: 6.111111vw; line-height: 4.166667vw; }
.ranking-area .ranking-cnt .cheering:before { content: ''; position: absolute; top: 0; left: 50%; width: 5vw; height: 0.277778vw; background: #e6e6e6; margin-left: -2.5vw; }
/* //추가 */

/* ranking.count.component.js start */
.ranking-area .ranking-count { margin: 5.833334vw 0; font-size: 3.6111112vw; color: #5A6E91; text-align: center;}
.ranking-area .ranking-count .my { font-size: 5.55556vw; font-weight: bold; line-height: 7.5vw; }
.ranking-area .ranking-count .first { line-height: 5vw; }
.ranking-area .help { position: relative; padding-top: 3.88889vw; font-size: 3.6111112vw; text-align: center; }
.ranking-area .help:before { content: ''; position: absolute; top: 0; left: 50%; width: 5vw; height: 0; margin-left: -2.5vw; border-top: .20833334vw solid rgba(0,0,0, .5); }
/* ranking.count.component.js end */
/* //ranking.component.js end */


/* exceptions start */
.exception-area { padding: 0 5vw 6.11112vw; background-color: #fafafa; text-align: center; }
.exception-area .msg-area { padding: 11.94445vw 1.66667vw 6.66667vw; border-bottom: 0.13889vw solid rgba(0,0,0,.1); }

.exception-area .msg-area .first { position: relative; padding-bottom: 39.44445vw; font-size: 4.44445vw; color: #5a6e91; min-height: 39.44445vw; }
.exception-area .msg-area .first strong { display: block; margin-bottom: 8.33334vw; }
.exception-area .msg-area .first:after {
	content: ''; position: absolute; left: 50%; bottom: 0; width: 39.44445vw; height: 39.44445vw; margin-left: -19.722223vw; 
	background: url("../img/icon_clode.png") no-repeat 50% 0; background-size: 39.44445vw 39.44445vw; 
}
.exception-area .msg-area .second { margin-top: 8.33334vw; font-size: 3.88889vw; color: #8b8b8b; }
/* 2018.03.16 add - txt layout */
.exception-area .msg-area .needpoint { font-size: 4.44445vw; color: #4897e1; }

.exception-area .help-area { position: relative; padding: 6.66667vw 1.66667vw 8.88888vw; font-size: 3.611111vw; color: #717171; }
.exception-area .help-area .line { position: relative; margin-bottom: 5.9vw; color: rgba(0,0,0,.66); }
.exception-area .help-area .line:after { content: ""; position: absolute; left: 50%; top: 0; width: 5.4vw; height: 0; margin-top: -3.055555vw; margin-left: -2.7vw; border-top: .2vw solid rgba(0,0,0,.1);}  
.exception-area .help-area .line:first-of-type:after { content: none; }
.exception-area .help-area .line strong { color: rgba(0,0,0,.66); }
.exception-area .point-area { padding: 3.88889vw 1.66667vw 0; }
.exception-area .point-area .line { position: relative; -webkit-display: flex; display: flex; -webkit-align-items: center; align-items: center; padding: 3.611112vw 0 0 0; font-size: 4.44445vw; }
.exception-area .point-area .line:before { 
	-webkit-flex: 5 0 auto; flex: 5 0 auto; 
	position: relative; display: block; height: 0.277778vw; margin-left: 1.44445vw; margin-right: 0.88889vw; border-bottom: 1px dotted #8f8f8f;
    content: ' '; opacity: .8;}
.exception-area .point-area .line strong { order: -1; font-size: 4.166667vw; color: rgba(0,0,0, .66); }
.exception-area .point-area .line .require { color: #4897e1; font-weight: bold; }
.exception-area .point-area .line .rest  { color: #4897e1; }
/* exceptions end */

/* layer popup start */
.layer-popup-area { 
	display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.layer-popup-area.open { display: block; }
.layer-popup { display: flex; align-items: center; flex: 0 0 83.33334vw; height: 100%; }
.layer-popup .pop-cont { 
	flex: 83.33334vw;
	margin: 0 8.33334vw; padding: 6.66667vw 0 5.55556vw; border: .277778vw solid #dbdbdb; border-radius: .55556vw; background: #fff; 
	-webkit-box-shadow: 0.27778vw 0.27778vw 1.11111vw rgba(0, 0, 0, .5);
    box-shadow: 0.27778vw 0.27778vw 1.11111vw rgba(0, 0, 0, .5); 
}
.layer-popup .msg { padding: 0 4.44445vw; font-weight: bold; }
.layer-popup .pop-btn-area { margin-top: 5.55556vw; text-align: right; }
.layer-popup .btn { padding: 1.1112vw 4.44445vw; border: none; background: none; font-weight: bold; color: #5a6e91; }
/* layer popup end */

/* dim-message start */
.dim-message { position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; font-weight: bold; text-align: center; color: #000; font-size: 3.888889vw; }
.qr-dim-message { position: absolute; top: 31%; left: 0; width: 100%; margin: 0; font-weight: bold; text-align: center; color: #000; font-size: 3.888889vw; }
.coupon-dim-message { position: absolute; top: 40%; left: 0; width: 80%; margin: 0; font-weight: bold; text-align: center; color: #000; font-size: 3.888889vw; }
/* dim-message end */

/* toast-message start */
.toast-area { position: absolute; bottom: 0; width:100%; left:0; text-align: center; }
.toast{ display: inline-block; border: 0; /*height: 11.11112vw;*/ padding: 2.77778vw 2.5vw; border-radius: 50vh; box-shadow: 0 4px 3px rgba(0,0,0, .1); font-weight: bold; font-size: 3.88889vw; line-height: 5.55556vw; background-color: #000; color: #fff; min-width: 55.55556vw; opacity: .5; }
/* toast-message end */

/* bixby - easter egg promotion */
.easterEgg-promo { }
.easterEgg-promo .btn { display: inline-block; }
.easterEgg-promo .btn-cls { position: absolute; right: 6.11112vw; top: 5.277778vw; width: 3.88889vw; height: 3.88889vw; border: 0; background: url('../img/hints/btn-cls.png') no-repeat 0 0; background-size: 100% 100%; overflow: hidden; text-indent: 100%; white-space: nowrap; }
.hints-area .tx { margin: 6.388889vw 6.11112vw .277778vw; font-size: 3.33334vw; color: #595959; text-align: center; }
.hint-grp { display: flex; flex-flow: wrap; justify-content: center; padding-bottom: 3.88889vw; }
.hint-grp li { position: relative; flex: 0 0 22.22223vw; height: 22.22223vw; margin: 3.88889vw 0 0 8.055556vw; }
.hint-grp li:nth-child(3n+1) { margin-left: 0; }
.hint-grp li:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../img/hints/hint-icons.png') no-repeat 0 0; background-size: 75vw auto; }
.hint-grp li.active:after { background-position: -25vw 0; }
.hint-grp li.googlemap:after { background-position: 0 -25vw; }
.hint-grp li.googlemusic:after { background-position: -25vw -25vw; }
.hint-grp li.setting:after { background-position: -50vw -25vw; }	
.hint-grp li.apps:after { background-position: 0 -50vw; }
.hint-grp li.health:after { background-position: -25vw -50vw; }
.hint-grp li.message:after { background-position: -50vw -50vw; }
.hint-grp li.phone:after { background-position: 0 -75vw; }
.hint-grp li.quickcommand:after { background-position: -25vw -75vw; }
.hint-grp li.recipe:after { background-position: -50vw -75vw; }
.hint-grp li.reminder:after { background-position: 0 -100vw; }
.hint-grp li.screenshot:after { background-position: -25vw -100vw; }
.hint-grp li.selfie:after { background-position: -50vw -100vw; }

.ly-open { overflow: hidden; }
.ly-open .layer-popup-area { display: flex; align-items: center; background: rgba(255,255,255,1);}

.pop-task-area { position: relative; margin: 0 12.0833334vw; text-align: center; background: #fff; }
.pop-task-area .task { margin-bottom: 7.5vw; }
.pop-task-area .hint-guide { font-size: 3.33334vw; }
.pop-task-area .hint-guide strong { display: block; margin-bottom: 4.166667vw; font-size: 5vw; color: #3d3a3a; }
.pop-task-area .hint-guide .tx { margin: 0 5.8vw 8.33334vw; }
.pop-task-area .status { position: relative; width: 22.22223vw; height: 22.22223vw; margin: 0 auto 6.388889vw; }
.pop-task-area .status:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../img/hints/hint-icons.png') no-repeat 0 0; background-size: 75vw auto; }
.pop-task-area .status.active:after { background-position: -25vw 0; }
.pop-task-area .status.googlemap:after { background-position: 0 -25vw; }
.pop-task-area .status.googlemusic:after { background-position: -25vw -25vw; }
.pop-task-area .status.setting:after { background-position: -50vw -25vw; }	
.pop-task-area .status.apps:after { background-position: 0 -50vw; }
.pop-task-area .status.health:after { background-position: -25vw -50vw; }
.pop-task-area .status.message:after { background-position: -50vw -50vw; }
.pop-task-area .status.phone:after { background-position: 0 -75vw; }
.pop-task-area .status.quickcommand:after { background-position: -25vw -75vw; }
.pop-task-area .status.recipe:after { background-position: -50vw -75vw; }
.pop-task-area .status.reminder:after { background-position: 0 -100vw; }
.pop-task-area .status.screenshot:after { background-position: -25vw -100vw; }
.pop-task-area .status.selfie:after { background-position: -50vw -100vw; }
.pop-task-area .btn-gra { 
	height: 8.88889vw; padding: 0 6.944445vw; border: 0; border-radius: 1.66667vw; font-weight: bold; font-size: 3.33334vw; color: #fff; line-height: 8.88889vw;
	background: -webkit-gradient(linear,left top,right top,color-stop(0%,#4CC1AF),color-stop(100%,#6D90CB));
	background: linear-gradient(to right,  #4CC1AF 0%, #6D90CB 100%);
}
.pop-task-area .btn-ok { width: 54.722223vw; height: 11.388889vw; padding: 0; border: 1px solid #000; border-radius: 13.88889vw; background: #fff; font-size: 3.88889vw; font-weight: bold; color: #000; line-height: 11.388889vw; }
/* bixby - easter egg promotion */

/* template_7 text */
.onlytxt-area { padding: 5.55555vw 6.66667vw; text-align: center; }
.onlytxt-area .help { margin-top: 3.33333vw; font-size: 3.6111vw; color: rgba(0,0,0,.5); }
/* // template_7 text */

/* template_7 images and text mix button */
.img-btn-area { 
width: 100%; display: block; 
background-repeat: no-repeat; background-position: 0 0;
background-size: 100vw 17.777778vw; 
height: 17.777778vw; padding: 0 2.777778vw 0 2.777778vw;
}
.img-btn-area .btn-txt-area { width: 100%; text-align: center; height: 17.777778vw; 
display: flex; display: -webkit-flex;
justify-content: center; -webkit-justify-content: center;
align-items: center; -webkit-align-items: center; 
}
.img-btn-area .btn-txt-area .btn-txt { color: #fff; font-weight: bold; width: 100%; font-size: 4.4444445vw; padding: 0 2.777778vw 0 2.777778vw; text-shadow: 0 0 3px #333; }
/* // template_7 images and text mix button */

/* component loading */
.spinning .pull-spinner {
	margin: 2vw auto; width: 6.6666666vw; height: 6.6666666vw;
	-webkit-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-left:2px solid rgba(50,73,173,.15);
	border-right:2px solid rgba(50,73,173,.15);
	border-bottom:2px solid rgba(50,73,173,.15);
	border-top:2px solid rgba(50,73,173,.9);
	border-radius:100%;
}
@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
	to {-webkit-transform: rotate(359deg); transform: rotate(359deg);}
}
.paper-loading {
	position: fixed; left: 0; top: 0; z-index: 999999;
	display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;
	background: #fafafa;
}
.paper-loading .paper-align { color: #b9b9b9; text-align: center; line-height: 1.2; }
.paper-loading .container,
.paper-loading .paper-help { margin: 0; }
.paper-loading .paper-spinner { width: 6.38889vw; height: 6.38889vw; margin: 0 auto; animation: rotation .6s infinite linear; -webkit-animation: rotation .6s infinite linear; border-radius: 100%; border-left: 2px solid rgba(50,73,173,.15); border-right: 2px solid rgba(50,73,173,.15); border-bottom: 2px solid rgba(50,73,173,.15); border-top: 2px solid rgba(50,73,173,.9);}
.paper-loading .paper-lead { margin: 1.944445vw 0 1.11112vw; font-size: 3.88889vw; }
.paper-loading .par-lead { margin: 0; font-size: 3.88889vw; }
/* // component loading */


/* adding id-popup-confirmation component start */

/******** popup ********/
/* Modal */
.modal-open { overflow: hidden; }
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; }
.modal.fade .modal-dialog { -webkit-transition: -webkit-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: translate3d(0, -25%, 0); -o-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); }
.modal.in .modal-dialog { -webkit-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }
.modal-dialog { position: relative; width: auto; margin: 10px; }
.modal-content { position: relative; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5); }
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; opacity: .65; }
.modal-backdrop.dark { opacity: .8; }
.modal-backdrop.fade,
.modal-backdrop.dark.fade { filter: alpha(opacity=0); opacity: 0; }
.modal-backdrop.in,
.modal-backdrop.dark.in { filter: alpha(opacity=50); opacity: .5; }
.modal-header { min-height: 16.42857143px; padding: 15px; border-bottom: 1px solid #e5e5e5; }
.modal-header .close { margin-top: -2px; }
.modal-title { margin: 0; line-height: 1.42857143; }
.modal-body { position: relative; padding: 15px; }
.modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; }
.modal-footer .btn + .btn { margin-bottom: 0; /*margin-left: 5px; */}
.modal-footer .btn-group .btn + .btn { margin-left: -1px; }
.modal-footer .btn-block + .btn-block { margin-left: 0; }
.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }

/*  Overriding - Bootstrap.modal */
.modal.fade {opacity: 1;}
.modal.fade .modal-dialog, .modal.in .modal-dialog {-webkit-transform: none; transform: none; -webkit-transition: none; transition: none;}
.modal-content{ margin-left: 30px; margin-right: 30px; }
.vertical-align-center { display: table-cell; vertical-align: middle; }
.vertical-alignment-helper { display: table; height: 100%; width: 100%; }
.modal .modal-header { padding: 24px 24px 0; border-bottom: 0; }
.modal .modal-title { color: #323232; font-weight: 700; font-size: 5vw; line-height: 24px; opacity: .8; }
.modal .modal-content { margin: 0 27px; border-radius: 14px; background: #FAFAFA; }
.modal .modal-body { padding: 24px 24px 0; font-size: 16px; line-height: 1.4375; }
.modal .modal-body p { margin: 0; }
.modal .modal-footer { padding: 24px 9px 15px; border: none; }
.modal .btn { border: none; background: transparent; font-weight: bold; color: #8ea6e4; }
.modal .btn-sm { padding: 9px 18px; font-size: 16px; line-height: 1.125; text-transform: uppercase; }
.modal-footer[data-type='btn-list'] { position: relative; padding-top: 20px; }
.modal-footer[data-type='btn-list']:before { position: absolute; top: 0; left: 20px; right: 20px; height: 0; content: ' '; }
.modal-footer[data-type='btn-list'] .btn { display: inline-block; margin-left: 0; font-size: 15px; text-align: right; line-height: 1.2; }
.modal-footer[data-type='btn-list'] .btn:first-child { margin-top: -10px; }

.pkg-promo-instant .modal-title { font-size: 19px; line-height: 21px; word-spacing: -2px; letter-spacing: -1px; }
.pkg-promo-instant .modal-body { padding: 0 24px 20px 24px; }
.pkg-promo-instant .paper-content { position: relative; }
.pkg-promo-instant .result { color: #8b8b8b; text-align: center; }
.pkg-promo-instant .result .val { position: static; width: auto; height: auto; margin: 0; /* background: url('../img/my_bixby_stamp_popup_bg.png') no-repeat center top; */ background-size: contain; }
.pkg-promo-instant .result .val img { display: block; width: 116px; height: 116px; margin: 0 auto; }
.pkg-promo-instant .result .greeting { color: #506496; font-size: 18px; line-height: 1.375; }
.pkg-promo-instant .result .help { font-weight: bold; font-size: 13px; color: #80828a; }
.pkg-promo-instant .win .caption { min-height: 24px; color: #3957ac; font-weight: bold; font-size: 15px; line-height: 1.6; }
.pkg-promo-instant .lose { margin-bottom: -22px; padding-bottom: 22px; }
.pkg-promo-instant .lose .greeting { color: #8B8B8B; letter-spacing: -2px; }
.pkg-promo-instant .lose .help { position: relative; z-index: 1; color: inherit; }
.pkg-promo-instant .lose .boom { display: block; width: 100%; height: 116px; margin-bottom: 116px; /* background: url('../img/promotion/instant/result_bg_lose.png') no-repeat 50% 0; */  background-size: contain; font-size: 235.71429%; line-height: 116px; text-align: center; }
.pkg-promo-instant .lose .boom i { position: relative; z-index: -1; color: #FAFAFA; font-style: normal; }
/* result-win popup end */

/* // adding id-popup-confirmation component end */

/* event type 16 mission - circle type */
/* 기존 mission css 삭제*/
.mission-set-w { padding: 8.055556vmin 6.66667vmin 0; font-size: 3.611112vmin; line-height: 1.3; }
.mission-set-w.pt0 { padding-top: 0; }
.mission-set-w .title { margin-bottom: 2.77778vmin; font-size: 3.611112vmin; color: #252525; line-height: 1.2; }
.mission-set-w .help { font-size: 3.611112vmin; color: #9c9c9c; }
.mission-set-w .status { text-align: center; }
.mission-set-w .status.none { text-align: left; }
.mission-set-w .status.ongoing { margin: 13.88889vmin 0; }
.mission-set-w .status.complete { margin: 4.166667vmin 0 6.944445vmin; }
.mission-set-w .status.finish { margin: 16.66667vmin 0 28.88889vmin; }
.mission-set-w .status dt { margin-bottom: 1.388889vmin; font-size: 6.66667vmin; font-weight: bold; color: #4897e1; line-height: 1.2;}
.mission-set-w .status .num { margin-bottom: 5.55556vmin; font-size: 11.66667vmin; font-weight: bold; color: #4897e1; line-height: 1.15; }
.mission-set-w .status-w { margin-bottom: 8.33334vmin; }
.mission-set-w .status-w .msg { font-size: 5vmin; font-weight: bold; color: #4897e1; line-height: 1.2; }
.mission-set-w .status-w .gift { /*height: 34.166667vmin;*/ margin: 4.166667vmin 0 6.666667vmin; background: url(../img/pay_event_type_lucky_bg.png) no-repeat 50% 50%; background-size: contain; text-align: center; }
.mission-set-w .status-w .gift img { width: 32.222222vmin; height: 32.222222vmin; } /* SMCS-5967 - 190724 변경 */
.mission-set-w .status-w .prod { font-size: 4.166667vmin; font-weight: bold; color: #4897e1; line-height: 1.25; }
.m-circle-wrap { display: flex; flex-wrap: wrap; justify-content: center; padding: 0 0 16.66667vmin; }
.m-circle-wrap .cbox { position: relative; margin: 1.388889vmin 0 0 1.388889vmin; width: 42.5vmin; height: 42.5vmin; border: .1388889vmin solid #E3E3E3; border-radius: 2.77778vmin; background: #fff; text-align: center; }
/* .m-circle-wrap .cbox:nth-child(2n) { margin-left: 0; } */
.m-circle-wrap .cbox.odd { margin-left: 0; }
.m-circle-wrap .btn-default {
	position: absolute; bottom: 1.11112vmin; left: 50%; transform: translateX(-50%); 
	min-width: 0; height: 10.55556vmin; padding: 0 4.44445vmin; 
	border: .277778vmin solid #d7d7d7; border-radius: 5.277778vmin; background: #fff; box-shadow: none; 
	font-size: 3.88889vmin; color: #8b8b8b; line-height: 10vmin; 
	max-width: 95%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 
}

.c100 { position: relative; width: 34.722223vmin; height: 34.722223vmin; margin: 3.88889vmin auto; font-size: 34.722223vmin; border-radius: 50%; background-color: #eef1f2; }
.c100 *, .c100 *:before, .c100 *:after { -webkit-box-sizing: content-box; box-sizing: content-box; }
.c100:after { content: " "; display: block; position: absolute; top: 2.0833334vmin; left: 2.0833334vmin; width: 30.55556vmin; height: 30.55556vmin; border-radius: 50%; background: #fff; }
.c100 .slice { position: absolute; width: 1em; height: 1em; clip: rect(0em, 1em, 1em, 0.5em); }
.c100 .value { position: absolute; top: 50%; left: 50%; z-index: 1; width: 100%; transform: translate(-50%,-50%); }
.c100 .value > span { display: block; text-align: center; }
.c100 .value .count { font-size: 7.22223vmin; font-weight: bold; color: #252525; }
.c100 .value .txt { font-size: 3.611112vmin; color: #3957ac; }
.c100 .badge { 
	position: absolute; left: 50%; z-index: 1; transform: translate(-50%,-1.11114vmin); min-width: 17.777778vmin; height: 6.66667vmin; padding: 0 1.388889vmin; border-radius: 3.33334vmin; font-size: 3.88889vmin; color: #fff; line-height: 6.66667vmin;
	max-width: 95%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 
}
.c100.p0 { background: #fff; }
/* .c100.p0 { height: 24.166667vmin; margin-bottom: 2.22223vmin; background: #fff; }
.c100.p0:after { content: none; }
.c100.p0 .value { transform: translate(-50%,-1.388889vmin); } */

/* box status */
/* .m-circle-wrap .cbox.ready .btn-default { position: absolute; bottom: 1.11112vmin; left: 1.11112vmin; } */
.m-circle-wrap .cbox.closed .badge { background: #4a4a4a; }
.m-circle-wrap .cbox.closed .value,
.m-circle-wrap .cbox.closed .slice { opacity: .4; }
.m-circle-wrap .cbox.complete .badge { background: #ec6c65; }

@media (orientation: landscape) {
	.m-circle-wrap { justify-content: flex-start; }
	.m-circle-wrap .cbox:nth-child(2n) { margin-left: 1.388889vmin; }
}
/* // end event type 16 mission - circle type */

/* apps download */
.apps-download .list { display: flex; padding: 4.166667vw; }
.apps-download .list .app-box { flex: 1; padding: 1.388889vw; margin-left: .8%; border: .1388889vw solid #d4d4d4; border-radius: .277778vw; }
.apps-download .list .app-box:first-child { margin-left: 0; }
.app-box .thumb { display: flex; height: 18.090277778vmin; margin-bottom: 1.388889vw; border-radius: .833334vw; }
.app-box .thumb img { width: 100%; height: auto; object-fit: contain; }
.app-box .details { line-height: 1.3; }
.app-box .details .name { display: flex; align-items: center; height: 8.33334vmin; color: #252525; text-align: center; }
.app-box .details .name span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 auto; font-size: 3.055556vmin; font-weight: bold; }
.app-box .details .desc,
.app-box .details .purchases,
.app-box .details .age { display: none; }
.app-box .details .download { width: 13.88889vw; height: 6.388889vw; margin: 1.388889vw auto 0; }
.app-box .details .download img { width: 100%; vertical-align: top; }
.app-box .details .download.dimmed { opacity: .35; pointer-events: none; }

.apps-download .list .app-box:only-child { width: 100%; display: flex; padding: 2.0833334vw; }
.app-box:only-child .thumb { flex: 0 0 22.22223vw; width: 22.22223vw; height: 22.22223vw; margin-bottom: 0; }
.app-box:only-child .details { display: flex; flex-flow: column; justify-content: space-between; flex: 1; position: relative; margin: 1.388889vw 0 1.388889vmin 2.0833334vw; }
.app-box:only-child .details .name { height: auto; }
.app-box:only-child .details .name span,
.new .app-box:only-child .details .name span { margin: 0 15.277778vmin 0 0; text-align: left; font-size: 4.166667vmin; }
.app-box:only-child .details .desc { display: block; margin-right: 15.277778vw; font-size: 3.055556vw; color: #656565; }
.app-box:only-child .details .purchases,
.app-box:only-child .details .age { display: block; }

.app-box:only-child .download { position: absolute; right: 0; top: 50%; margin-top: -3.1944445vw; }

.apps-download .apps-title { margin: 0 4.166667vmin; padding-top: 4.166667vmin; font-size: 3.611112vmin; color: #979797; }
.apps-download .apps-title .tit { margin-bottom: 1.388889vw; font-size: 3.611112vmin; color: #252525; line-height: 1.2; }
/* .apps-download .apps-title + .list { margin-top: 2.77778vmin; } */

/* [SMCS-14879] 앱다운로드 RTL 모드 UI 개선 */
[dir=rtl] .app-box:only-child .download { left: 0; right: auto; }
[dir=rtl] .pre-order .new .app-box .name span,
[dir=rtl] .apps-download .new .app-box .name span,
[dir=rtl] .pre-order .new .app-box .desc,
[dir=rtl] .apps-download .new .app-box .desc,
[dir=rtl] .apps-download .new .app-box .purchases, 
[dir=rtl] .apps-download .new .app-box .age { margin: 0; }
[dir=rtl] .app-box:only-child .details { margin: 1.388889vw 2.0833334vw 1.388889vmin 0; }
[dir=rtl] .apps-download .list .app-box:first-child { margin-left: .8%; }
[dir=rtl] .apps-download .list .app-box:liast-child { margin-left: 0; }
[dir=rtl] .progress .progress-bar .progress-per { left: auto; right: 0; }
[dir=rtl] .apps-download .list .app-box:only-child .progress.this .btn-progress,
[dir=rtl] .progress.thin .btn-progress { margin-left: 0; margin-right: 1.944444vmin; }

/* // end apps download */

/* pre order */
.apps-download.pre-order { }
.pre-order .app-box .details { margin-top: 2.77778vmin; margin-bottom: 2.77778vmin; }
.pre-order .app-box .name span { font-size: 3.33334vmin; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pre-order .app-box:only-child .name span,
.pre-order .new .app-box:only-child .name span { margin-right: 21.388889vmin; font-size: 4.166667vmin; }
.pre-order .app-box .desc { margin-right: 21.388889vmin !important; }
.pre-order .app-box .download { width: 20vmin; height: 6.388889vmin; }
.pre-order .app-box .download button { border: 0; background: none; }
/* // end pre order */

/* 190508 추가 */
.pre-order .new .app-box .thumb,
.apps-download .new .app-box .thumb { margin: auto; }
.pre-order .new .app-box .name span,
.apps-download .new .app-box .name span { font-size: 3.055556vmin; color: #3a3a3a; }
.pre-order .new .app-box .desc,
.apps-download .new .app-box .desc { font-size: 2.777778vmin; color: #3a3a3a; padding-top: .833333vmin; }
.pre-order .new .app-box .purchases,
.apps-download .new .app-box .purchases { font-size: 2.222222vmin; color: #7d7d7d; margin-right: 21.388889vmin; padding-top: .277778vmin; }
.pre-order .new .app-box .age,
.apps-download .new .app-box .age { font-size: 2.777778vmin; color: #3a3a3a; margin-right: 21.388889vmin; padding-top: 1.944444vmin; }
.apps-download .new .app-box .purchases,
.apps-download .new .app-box .age { margin-right: 15.277778vmin; }
/* //190508 추가 */

/* LBS */
.lbs-set-w { padding: 11.11112vmin 6.66667vmin 1.944445vmin; font-size: 3.611112vmin; line-height: 1.3; }
.lbs-set-w .title { margin-bottom: 2.77778vmin; font-size: 3.611112vmin; color: #252525; line-height: 1.2; }
.lbs-set-w .help { font-size: 3.611112vmin; color: #8b8b8b; margin-top: 1.388889vmin; }
.lbs-set-w .status { text-align: center; }
.lbs-set-w .status-w .msg { font-size: 5vmin; font-weight: bold; color: #4897e1; line-height: 1.2; }
.lbs-set-w .status-w .gift { height: 34.166667vmin; padding-top: 4.166667vmin; background: url(../img/pay_event_type_lucky_bg.png) no-repeat 50% 50%; background-size: 100% auto; text-align: center; }
.lbs-set-w .status-w .gift img { width: 23.33334vmin; height: 23.33334vmin; }
.lbs-set-w .status-w .prod { font-size: 4.166667vmin; font-weight: bold; color: #4897e1; line-height: 1.25; }
.lbs-set-w .btn-area{ padding: 4.16667vmin 0 4.16667vmin; }
.lbs-set-w .btn-view { color: #252525; background-color: #ebebeb; box-shadow: none; height: 10vmin; padding: 0; }

.lbs-reward-w { position: relative; }
.lbs-reward-inner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; background: rgba(255, 255, 255, .9); display: flex; justify-content: center; align-items: center; }
.lbs-reward-w .lbs-reward-logo { background: url("../img/logo_rewards.png") no-repeat 50% 0; background-size: 55vmin auto; font-size: 0;	 width: 55vmin; height: 8.33333vmin; display: inline-block; margin-bottom: 1.388889vmin; }
.lbs-reward-w .lbs-reward-txt { font-size: 4.166667vmin; color: #252525; line-height: 5.55556vmin; }
.lbs-reward-w .btn-default { box-shadow: none; background: #4897e1; height: 10vmin; padding: 0; }

.lbs-visit-txt { text-align: center; padding: 7.77778vmin 0 8.33334vmin; font-size: 5.55556vmin; color: #4897e1; line-height: 6.66667vmin; }

.lbs-header-default { padding: 0 6.66667vmin 1.38889vmin; }
.lbs-header-default .lbs-header-tit { font-size: 3.61112vmin; color: #252525; }

.lbs-map-default { padding: 1.94444vmin 6.66667vmin 8.33333vmin 6.66667vmin; }
.lbs-map-default .lbs-header-tit { font-size: 3.611111vmin; color: #252525; line-height: 4.166667vmin; padding-bottom: 3.333333vmin; }
.lbs-map-default .lbs-map-inner { background: #fff; border: 0.138889vmin solid #d8d8d8; border-radius: 2.22223vmin; padding: 5vmin 5.55556vmin 5.555556vmin 5.55557vmin; }
.lbs-map-default .lbs-map-inner .btn-map-open { width: 6.11111vmin; height: 6.11111vmin; background: url("../img/bg_map_place_gray.png") no-repeat 0 0; background-size: cover; font-size: 0; border: 0; position: absolute; top: -1vmin; right: 0; }
.lbs-map-default .lbs-map-name { margin-bottom: 2.77778vmin; display: flex; justify-content: space-between; align-items: baseline; line-height: 4.16667vmin; }
.lbs-map-default .lbs-map-name strong { color: #252525; font-size: 4.722222vmin; text-overflow: ellipsis; overflow: hidden; line-height: 5.55556vmin; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }  
.lbs-map-default .lbs-map-name small { color: #8f8f8f; font-size: 3.611111vmin; min-width: 15.277778vmin; text-align: right; letter-spacing: -.277778vmin;}

.lbs-map-default .lbs-map-addr { font-size: 3.611111vmin; color: #252525; margin-bottom: 1.388889vmin; line-height: 4.166667vmin; }
.lbs-map-default .lbs-map-area { position: relative; margin: 2.777778vmin 0 0; padding-bottom:calc(100% - 2px); width:100%; border: 1px solid #c0c0c0;}
.lbs-map-default .lbs-map-area .map-place { width: 8.333333vmin; height: 8.333333vmin; background: url("../img/bg_map_place.png") no-repeat 0 0; background-size: cover; position: absolute; font-size: 0; top: 0; left: 0; }
.lbs-map-default .lbs-map-area .map-area {position:absolute; width:100%; height:100%;}
.lbs-map-default .lbs-map-area .map-area .map-dim {position:absolute; top: -1px; left:-1px; right: -1px; bottom: -1px; background:#f2f4f7; z-index:100; border: .1388889vmin dashed #c0c0c0; }
.lbs-map-default .lbs-map-area .map-area img { width: 100%; }
.lbs-map-default .lbs-map-num { position:relative; font-size: 3.611111vmin; color: #3857ac; line-height: 4.16667vmin; }
.lbs-map-default .lbs-map-desc { font-size: 3.611111vmin; color: #8f8f8f; line-height: 4.166667vmin; padding-top: 2.777778vmin; }
.lbs-map-default .lbs-map-desc strong { color: #4897e1; }
.lbs-map-default .lbs-btn-area { text-align: center; padding: 2.777778vmin 0 1.388889vmin; }
.lbs-map-default button { box-shadow: none; height: 10vmin; padding: 0; transition: all .2s ease; position: relative; overflow: hidden; }
.lbs-map-default button.checkin { background: #4897e1; }
.lbs-map-default button.disabled { background: rgba(0,0,0,.05); position: relative; overflow: hidden; }
.lbs-map-default button.disabled > span { color: #252525; opacity: .4; }
.lbs-map-default button.visited { background: none; color: #4897e1; }
.lbs-map-default button.none { display: none; }
.lbs-map-default .btn-showmap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; border: 0; align-items: center; justify-content: center; background: transparent; }
.lbs-map-default .btn-showmap > span { font-size: 3.611111vmin; color: #979797; }
.lbs-map-default .btn-showmap > span::before { content: ''; width: 8.333333vmin; height: 8.333333vmin; background: url("../img/bg_map_place.png") no-repeat 0 0; background-size: 8.333333vmin; display: block; margin: 0 auto; }

.lbs-message { font-size: 3.055556vmin; padding-top: 4.166667vmin; color: #8f8f8f; }
.lbs-map-default button.dim,
.lbs-message.dim { opacity: .2; cursor: default; pointer-events: none; }

.lbs-map-default button.loading { padding: 0 6.944444vmin 0 0; }
.lbs-map-default button.loading .lbs-spinner { right: 6.111111vmin; }
.lbs-spinner { display: inline-block; position: absolute; width: 6.666667vmin; height: 6.666667vmin; top: 50%; right: -6.666667vmin; /*margin-top: -3.333333vmin;*/ transition: all .2s ease; }
.lbs-spinner div { /*transform-origin: 3.333333vm 3.333333vm;*/ animation: lbs-spinner 1.2s linear infinite; }
.lbs-spinner div:before { content: ''; display: block; position: absolute; top: 1.111111vmin; left: 3.055556vmin; width: .555556vmin; height: 1.666667vmin; border-radius: 20%; background: #aaa; }
.lbs-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; }
.lbs-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; }
.lbs-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; }
.lbs-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; }
.lbs-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; }
.lbs-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; }
.lbs-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; }
.lbs-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; }
.lbs-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; }
.lbs-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; }
.lbs-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; }
.lbs-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }
@keyframes lbs-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.lbs-store-w { padding: 0 6.66667vmin; }
.lbs-store-list li { padding: 4.16667vmin 0 4.44444vmin; border-bottom: 1px solid #e6e6e6; position: relative; }
.lbs-store-list .lbs-store-name { margin-bottom: 2.22222vmin; display: flex; justify-content: space-between; align-items: baseline; }
.lbs-store-list .lbs-store-name strong { color: #252525; font-size: 4.16667vmin; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.lbs-store-list .lbs-store-name small { color: #8f8f8f; font-size: 3.611111vmin; min-width: 29.44444vmin; text-align: right; letter-spacing: -.277778vmin;}
.lbs-store-list .lbs-store-addr { font-size: 3.611111vmin; color: #8f8f8f; margin-bottom: 1.38889vmin; line-height: 4.166667vmin; padding-right: 8.333333vmin; }
.lbs-store-list .lbs-store-num { font-size: 3.611111vmin; color: #3857ac; }
.lbs-store-list .btn-map-open { width: 6.11111vmin; height: 6.11111vmin; background: url("../img/bg_map_place_gray.png") no-repeat 0 0; background-size: cover; font-size: 0; border: 0; position: absolute; bottom: 6.944444vmin; right: 1.388889vmin; }
.lbs-store-w .lbs-btn-more { padding: 3.33333vmin 0 3.61111vmin; text-align: center; font-size: 3.61111vmin; color: #8f8f8f; width: 100%; background: none; border: 0; }
.lbs-store-w .lbs-btn-more span{ position: relative; display: inline-block; padding: 0 5.55555vmin 0 0; }
.lbs-store-w .lbs-btn-more span:after { content: ''; position: absolute; right: 0; top: 50%; width: 4.444445vmin; height: 4.444445vmin; margin-top: -2.222225vmin; background: url("../img/bul-arr-dw.png") no-repeat 0 0; background-size: 100% 100%; }

.lbs-image-area img { width: 100%; }
.lbs-txt-area { padding: 2.777778vmin 5.555556vmin 4.166667vmin; }
.lbs-txt-area > h3 { font-size: 4.444444vmin; color: #252525; line-height: 6.388889vmin; }
.lbs-txt-area > p { font-size: 4.444444vmin; color: #8f8f8f; line-height: 6.666667vmin; }

/* [SMCS-10876] map load failed case add */
.lbs-map-failed { background: #e6e6e6; border: .138889vmin solid #dedede; margin: 2.777778vmin -.555556vmin 0 -.555556vmin; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 75.555556vmin; border-radius: .277778vmin; }
.lbs-map-failed .txt { font-size: 3.611111vmin; color: #999; text-align: center; }
.lbs-map-failed .btn-retry { background: rgba(0,0,0,.06); color: #000; font-weight: bold; min-width: 23.888889vmin; margin-top: 4.166667vmin; border-radius: 5.833333vmin; font-size: 4.166667vmin; line-height: 5.55556vmin; }

/* //LBS */

/* Guerilla result */
.guerilla-result-w {}
.guerilla-announce { display: flex; flex-direction: column; justify-content: center; height: 59.1666667vmin; background: #fafafa; font-size: 5vmin; font-weight: bold; color: rgba(57,87,172, .8); text-align: center; }
.guerilla-announce .lead { line-height: 6.666667vmin; }
.guerilla-announce .help { margin-top: 4.722223vmin; font-size: 3.33334vmin; line-height: 4.44445vmin; }
.guerilla-list { padding: 3.6111112vmin 3.88889vmin; }
.guerilla-list .item { display: flex; height: 28.33334vmin; margin-top: 2.222223vmin; border: .20833334vmin solid rgba(0,0,0, .1); border-radius: .55556vmin; background-color: #fdfdfd; overflow: hidden; }
.guerilla-list .item:first-child { margin-top: 0; }
.guerilla-list .thumb { position: relative; flex: 0 0 27.77778vmin; width: 27.77778vmin; height: 27.77778vmin; border-radius: .55556vmin 0 0 .55556vmin; background: #f6f7f7; }
.guerilla-list .thumb img { position: absolute; left: 0; top: 0; padding: 2.77778vmin; width: 100%; }
.guerilla-list .badge { position: relative; z-index: 2; display: inline-block; width: 100%; height: 100%; /* height: 4.44445vmin; */border-radius: .55556vmin 0 .55556vmin; font-size: 3.055556vmin; color: #fafafa; line-height: 4.44445vmin; }
.guerilla-list .badge .day { display: inline-block; float: left; height: 4.44445vmin; min-width: 14.44445vmin; background: #5879cd; text-align: center; }
.guerilla-list .badge .status { display: inline-block; float: left; height: 4.44445vmin; padding: 0 2.222223vmin; border-radius: 0 0 .55556vmin; background: #ff786e; font-size: 3.055556vmin; color: #fafafa; line-height: 4.44445vmin; }
.guerilla-list .badge :only-child { border-radius: .55556vmin 0; }
.guerilla-list .details { display: flex; flex: 1; flex-flow: column; justify-content: center; padding: 0 4.1666667vmin; font-size: 3.88889vmin; color: rgba(0,0,0, .37); }
.guerilla-list .details > p { word-spacing: -0.277778vw; letter-spacing: -0.277778vw; }
.guerilla-list .details .status-txt { font-weight: 600; }
.guerilla-list .details .help { margin-top: 1.66667vmin; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 2; text-overflow:ellipsis; overflow:hidden; }
.guerilla-list .details .use-info { margin-top: 1.66667vmin; }
.guerilla-list .details .use-info dt { float: left; }
.guerilla-list .details :only-child { margin-top: 0; }
.guerilla-list .ongoing .status-txt { color: #ff786e; }
.guerilla-list .win .status-txt { color: #252525; }
.guerilla-list .lose .status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 2.22223vmin; background: rgba(0,0,0,.2); }
.guerilla-list .expired .badge .day, .guerilla-list .lose .badge .day { background: #d8d8d8; }
.guerilla-list .expired .thumb img, .guerilla-list .lose .thumb img { opacity: .5; }
.guerilla-list .expired .status-txt, .guerilla-list .lose .status-txt { opacity: .5; }
/* //Guerilla result */

/* Lottery win, lose */
.instant-lottery { padding: 11.666667vmin 9.1666667vmin; }
.instant-lottery .result { position:relative; padding: 6.944444vmin 0; color: #8B8B8B; text-align: center; display: flex; width: 100%; height: 100%; justify-content: center; flex-direction: column; align-items: center; }
.instant-lottery .result.win { background: url('../img/apps/scratch_result_bg_win.png') no-repeat center center; background-size: 83.333333vmin; }
.instant-lottery .result.win .caption { font-weight: bold; font-size: 4.166666vmin; color: #5A6E91; line-height: 1.65; }
.instant-lottery .result.win:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('../img/apps/scratch_result_bg.png') no-repeat center center; background-size: 45.833333vmin auto; z-index: -1; }
.instant-lottery .result.lose .greeting { color: #9d9d9d; }
.instant-lottery .result.lose .result-img-area { background: none; position: relative; }
.instant-lottery .result.lose .result-img-area .result-img-losetxt { font-size: 9.7222223vmin; color: #fafafa; font-weight: bold; width: 100%; height: 32.222223vmin; position: absolute; top: 0; left: 0; -webkit-display: flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.instant-lottery .result.lose .item-img-area img { display: block; width: 32.222223vmin; height: auto; margin: 0 auto; }
.instant-lottery .result.lose .result-txt-area .result-txt { color: rgba(157, 157, 157, .67); }
.instant-lottery .result .greeting { color: #3957ac; font-size: 5vmin; line-height: 1.3; font-weight: bold; }
.instant-lottery .result-img-area { margin: 4.444445vmin 0 3.888889vmin; }
.instant-lottery .result-img-area img { display: block; width: 32.22223vmin; height: auto; margin: 0 auto; }
.instant-lottery .result-txt { font-size: 4.1666667vmin; color: #3957ac; font-weight: bold; }
.instant-lottery .btn-area { padding: 5.833334vmin 0 0; }
.instant-lottery .btn-area .btn-lottery { border: .277778vmin solid rgba(0,0,0, .1); color: inherit; background-color: #fff; }

/* Instant Result, Event List */
.instant-result { padding: 0 0 5.833334vmin; }
.instant-result .btn-area { padding: 5.833334vmin 0; }
.instant-result .btn-area .btn-lottery { border: .277778vmin solid rgba(0,0,0, .1); color: inherit; background-color: #fff; }
.instant-result-txt { text-align: center; margin: 3.6111112vmin 0; color: #80828a; font-size: 3.6111112vmin; }
.instant-result-list { padding: 3.6111112vmin 6.666667vmin 0; }
.instant-result-list .list-item { margin: 0 0 1.9444445vmin 0; }
.instant-result-list .list-item {text-decoration: none; }
.instant-result-list .list-item .list-item-area { display: flex; -webkit-display: flex; height: 23.888889vmin; border: .20833334vmin solid rgba(0,0,0, .15); border-radius: .555556vmin; background-color: #fff; }
.instant-result-list .list-item .list-item-area .img-area { flex: 0 0 23.888889vmin; -webkit-flex: 0 0 23.888889vmin; display: flex; -webkit-display: flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; }
.instant-result-list .list-item .list-item-area .img-area img { height: 23.333333vmin; }
.instant-result-list .list-item .list-item-area .img-area.bgconfirm { background-color: #f6f5f5; }
.instant-result-list .list-item .list-item-area .img-area.bgresult { background-color: #dcedfd; }
.instant-result-list .list-item .list-item-area .txt-area { flex: 0 0 auto; -webkit-flex: 0 0 auto; display: flex; -webkit-display: flex; flex-grow: 1; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; }
.instant-result-list .list-item .list-item-area .txt-area > div { -webkit-flex-grow: 1; flex-grow: 1; display: flex; flex-flow: column nowrap; -webkit-justify-content: center; justify-content: center; padding: 0 3.333334vmin; }
.instant-result-list .list-item .list-item-area .txt-area .tit { font-size: 4.1666667vmin; color: rgba(0, 0, 0, .8); text-align: left; font-weight: bold; line-height: 1.3; }
.instant-result-list .list-item .list-item-area .txt-area .time { margin: .8333334vmin 0 0 0; font-size: 3.6111112vmin; color: rgba(0, 0, 0, .5); text-align: left; line-height: 1; }


/* Recommend */
.recommend .btn-wrap { text-align: center; }
.recommend .btn-wrap .btn { box-shadow: none; height: 11.666667vmin; border-radius: 5.833333vmin; }
.recommend .btn-wrap .btn-light { background-color: #fff; font-size: 3.888889vmin; color: #8e8e8e; border: .277778vmin solid #d7d7d7; }
.recommend .btn-wrap .btn-mint { background-color: #00bbd3; font-size: 3.888889vmin; color: #fafafa; border: .277778vmin solid #d7d7d7; }

.recommend-code { padding: 5vmin 6.666667vmin 6.944444vmin 6.666667vmin; }
.recommend-code .title { margin: 0 0 5.555556vmin; color: rgba(0,0,0, .66); font-weight: bold; font-size: 3.88889vmin; line-height: 1.214286; } 
.recommend-code .code-input { margin-bottom: 6.11111vmin; padding: 1.111111vmin 4.44444vmin; border: .277778vmin solid #a6a6a6; border-radius: 1.666667vmin; background-color: #fafafa; }
.recommend-code .code-input .val { width: 100%; border: 0; background-color: transparent; font-size: 4.44444vmin; font-weight: 700; color: rgba(0,0,0,.66); text-align: center; line-height: 1; }
.recommend-code .btn-code-copy { padding: 2.777778vmin 8.611111vmin; height: 11.666667vmin; }

.recommend-share { display: block; margin: 0 5vmin; padding: 5.555556vmin 0; border-top: .555556vmin solid rgba(0,0,0, .1); border-bottom: .555556vmin solid rgba(0,0,0, .1); }
.recommend-share .title { color: rgba(0,0,0, .66); font-size: 4.44444vmin; }
.recommend-share .icons { height: 7.222223vmin; }
.recommend-share .fa { width: 7.22223vmin; height: 7.22223vmin; margin-right: 1.388889vmin; background-size: 25vmin auto; }
.recommend-share .fa:last-child { margin-right: 0; }
.recommend-share .message { background-position: -7.22223vmin 0; }
.recommend-share .twitter { background-position: 0 -7.22223vmin; }
.recommend-share .facebook { background-position: -7.22223vmin -7.22223vmin; }
.recommend-share .kakao-talk { background-position: -14.44445vmin 0; }
.recommend-share .naver-band { background-position: 0 -14.44445vmin; }
.recommend-share .naver-line { background-position: -14.44445vmin -7.22223vmin; }
.recommend-share .sharevia { background-position: -7.222223vmin -14.44445vmin; }
.recommend-share-inner { display: flex; align-items: center; justify-content: center; padding: 0 1.666667vmin; }

.recommend-list-wrap { padding: 8.888889vmin 6.666667vmin 0 6.666667vmin; }
.recommend-list-wrap .title { margin: 0 0 6.666667vmin; color: rgba(0,0,0, .66); font-weight: bold; font-size: 3.88889vmin; line-height: 1.214286; }
.recommend-list-wrap .title .badge { display: inline-block; width: 6.666667vmin; height: 9.1666666vmin; padding: 4.44444vmin 0 0; background: url('../img/bg-recommend-num.png') no-repeat 0 0; background-size: cover; font-size: 3.055555vmin; color: #fafafa; text-align: center; }
.recommend-list-wrap .title .badge .val { position: relative; top: -0.55556vmin; font-style: normal; }

.recommend-list-wrap .recommend-list { margin: 0 -1.666667vmin; padding-bottom: 6.666667vmin; }
.recommend-list-wrap .recommend-list li { display: flex; justify-content: space-between; position: relative; padding: 4.166667vmin 1.666667vmin 4.166667vmin; border-top: 1px dashed rgba(180,180,180,.2); font-size: 4.444444vmin; color: #00BBD3; line-height: 1.2; font-weight: bold; }
.recommend-list-wrap .recommend-list li .contact { flex-grow: 1; margin-right: 4.44444vmin; }
.recommend-list-wrap .recommend-list li .num { color: #5C5C5C; }
.recommend-list-wrap .recommend-list li:first-child { padding-top: 0; border-top-color: transparent; }
.recommend-list-wrap .recommend-list li:last-child { padding-bottom: 0; }
.recommend-list-wrap .recommend-list + .recommend-list-bot { border-top: 0; }
.recommend-list-wrap .recommend-list-empty { padding: 9.444444vmin 0 16.111111vmin; text-align: center; font-size: 3.611111vmin; color: #8f8f8f; }
.recommend-list-wrap .recommend-list-bot { padding: 8.333333vmin 0; border-top: 1px solid rgba(180,180,180,.2); }
.recommend-list-wrap .recommend-list-bot .txt { text-align: center; font-size: 3.611111vmin; color: rgba(0,0,0,.5); line-height: 5vmin; }
.recommend-list-wrap .recommend-list-bot .btn-wrap .btn + .btn { margin-top: 4.166667vmin; }

.recommend-list-wrap .btn-wrap { margin: 6.666667vmin -1.666667vmin 0 -1.666667vmin; padding: 0; text-align: center; }
.recommend-list-wrap .btn-wrap .btn-more { display: block; width: 100%; height: 9.444444vmin; border: solid rgba(0,0,0,.1); border-width: 0.555556vmin 0; background-color: #fafafa;; }
.recommend-list-wrap .btn-wrap .btn-more .text { position: relative; display: inline-block; border: 0; padding: 0 5.55555vmin 0 0; font-size: 4.44444vmin; line-height: 4.44444vmin; color: rgba(77,77,77,.5); }
.recommend-list-wrap .btn-wrap .btn-more .text:after { content: ''; position: absolute; right: 0; top: 50%; width: 4.444445vmin; height: 4.444445vmin; margin-top: -2.222225vmin; background: url("../img/bul-arr-dw.png") no-repeat 0 0; background-size: 100% 100%; }

.recommend-closer { padding: 8.333333vmin 6.666667vmin 8.333333vmin 6.666667vmin; }
.recommend-closer .recommend-closer-txt { text-align: center; font-size: 3.611111vmin; color: rgba(0,0,0,.5); line-height: 5vmin; }
.recommend-closer .btn-wrap { margin-top: 5.277778vmin; }
.recommend-closer .btn-wrap .btn + .btn { margin-top: 4.166667vmin; }

.recommend-go-come { padding: 13.333333vmin 8.333333vmin 11.666667vmin 8.333333vmin; }
.recommend-go-come .go { padding-bottom: 6.666667vmin; }
.recommend-go-come .come { padding-top: 5.555556vmin; }
.recommend-go-come .title { text-align: center; color: #2d466c; font-size: 4.722222vmin; margin-bottom: 2.5vmin; }
.recommend-go-come .btn-wrap .btn { min-width: 69.444444vmin; }
.recommend-go-come .btn-wrap .btn + .btn { margin-top: 4.166667vmin; }

.recommend-input { padding: 5vmin 4.444444vmin 6.666667vmin 4.444444vmin; }
.recommend-input .title { margin: 0 2.222222vmin 4.166667vmin 2.222222vmin; color: rgba(0,0,0, .66); font-weight: bold; font-size: 3.88889vmin; line-height: 1.214286; }
.recommend-input .recommend-val { margin-bottom: 2.77778vmin; padding: 2.222222vmin 4.44444vmin; border: .277778vmin solid transparent; border-radius: 1.66666vmin; background-color: #e6e6e6;; }
.recommend-input .recommend-val .val { width: 100%; border: 0; background-color: transparent; font-size: 4.722223vmin; font-weight: 700; color: #4897e1; text-align: center; line-height: 1; }
.recommend-input .recommend-help { margin: 2.77778vmin 2.222222vmin 7.222222vmin 2.222222vmin; font-size: 3.611111vmin; color: #8f8f8f; line-height: 4.444444vmin; }
.recommend-input .recommend-btn { border-top: 0.277778vmin solid #e6e6e6; padding-top: 6.666667vmin; margin: 0 0.555556vmin; }
.recommend-input .recommend-btn .btn-default { background: #4897e1; height: 10vmin; padding: 2.222222vmin 2.5vmin; }

/* Lucky - 190318~190322 */
.lucky .title { font-size: 3.611111vmin; line-height: 1; padding-bottom: 5.555556vmin; color: #252525; text-align: left; }
.lucky .status .msg { font-size: 5vmin; font-weight: 700; color: #4897e1; text-align: center; line-height: 1; }
.lucky .status .val { /*height: 34.166667vmin;*/ margin: 4.166667vmin 0 6.666667vmin; background: url(../img/pay_event_type_lucky_bg.png) no-repeat 50% 50%; background-size: contain; }
.lucky .status .val img { width: 32.222222vmin; height: 32.222222vmin; } /* SMCS-5967 - 190724 변경 */
.lucky .status .name { padding-bottom: 1.388889vmin; font-size: 4.166667vmin; font-weight: 700; color: #4897e1; line-height: 1; }
.lucky .status .desc { padding-bottom: 4.166667vmin; font-size: 3.611111vmin; color: #8b8b8b; line-height: 4.166667vmin; }
.lucky .btn-wrap .btn-gray { box-shadow: none; background: rgba(0,0,0, .05); color: #000; height: 10vmin; padding: 0; }
.lucky-status,
.lucky-word { padding: 5.555556vmin 6.666667vmin 15vmin 6.666667vmin; text-align: center; }
.lucky-status.empty,
.lucky-word.empty { padding: 5.555556vmin 6.666667vmin; } 

.lucky-word .status .word { width: 22.777778vmin; height: 21.666667vmin; padding: .555556vmin; margin: 0 auto; border: .277778vmin solid #16b8ff; border-radius: 1.388889vmin; vertical-align: top; }
.lucky-word .status .word input { width: 21.111111vmin; height: 20vmin; border: .277778vmin solid #e5e5e5; border-radius: .833334vmin; font-size: 13.88889vmin; font-weight: 700; color: #16b8ff; text-align: center; }
.lucky-word .status .val { padding: 6.666667vmin 0 5.555556vmin; }
.lucky-word .status .desc { padding-bottom: 0; }
.lucky-word .status .letter { width: 21.666667vmin; height: 21.666667vmin; margin: 0 auto; background: url("../img/bg-lucky-get.png") no-repeat; line-height: 19.444444vmin; font-size: 0; background-size: 168.0555556vmin; }
/*.lucky-word .status .letter.got { background: url("../img/bg-lucky-got.png") no-repeat; }
.lucky-word .status .letter.complete { background: url("../img/bg-lucky-complete.png") no-repeat; }
.lucky-word .status .letter.get { background: url("../img/bg-lucky-get.png") no-repeat; }*/
.lucky-word .btn-wrap { padding-top: 5.555556vmin; } 
.lucky-word-get { padding: 6.944444vmin 6.666667vmin; background: #eef1f2; overflow: hidden; }
.lucky-word-get .title { padding-bottom: 8.611111vmin; }
.lucky-word-get .rank { display: flex; }
.lucky-word-get .rank dt { width: 11.111111vmin; font-size: 3.611112vmin; color: #000; align-self: center; text-align: center; font-weight: bold; }
.lucky-word-get .rank dd,
.lucky-word-get .rank dd > span { display: flex; position: relative; }
.lucky-word-get .rank { margin-top: 0; }
.lucky-word-get .rank ~ .rank { margin-top: 6.666667vmin; }
.lucky-word-get .rank .w-bx { display: inline-block; width: 9.722223vmin; height: 9.722223vmin; margin-left: 1.388889vmin; border: .277778vmin solid #cacaca; border-radius: 1.388889vmin; vertical-align: top; padding: .222222vmin .1388889vmin; }
.lucky-word-get .rank .w-bx:first-child { margin-left: 0; }
.lucky-word-get .rank .w-bx input { width: 8.75vmin; height: 8.75vmin; margin: 0 auto; border: .277778vmin solid #e5e5e5; border-radius: .833334vmin; font-size: 5.55556vmin; text-align: center; font-weight: bold; color: #cacaca; }
.lucky-word-get .rank .w-bx.got { border-color: #3957ac; }
.lucky-word-get .rank .w-bx.got input { color: #3957ac; }
.lucky-word-get .rank .w-bx.get { border-color: #16b8ff; }
.lucky-word-get .rank .w-bx.get input { color: #16b8ff; }
.lucky-word-get .rank .complete .w-bx { border-color: #ec6c65; }
.lucky-word-get .rank .complete .w-bx input { color: #ec6c65; }
.lucky-word-get .rank .complete .win { position: absolute; right: -5.416667vmin; top: -5.416667vmin; width: 10.833334vmin; height: 10.833334vmin; border-radius: 50%; background: #ec6c65; color: #fff; text-align: center; line-height: 10.833334vmin; justify-content: center; align-items: center; }
.lucky-word-get .desc { padding-top: 6.944444vmin; font-size: 3.611111vmin; color: #7c7c7c; line-height: 4.722222vmin; }

/* Image */
.lucky-word-get .ranked { display: flex; }
.lucky-word-get .ranked dt { width: 10.277778vmin; min-width: 10.277778vmin; font-size: 3.611112vmin; color: #000; align-self: center; text-align: center; font-weight: bold; text-indent: -1.111111vmin; }
.lucky-word-get .ranked dd { display: flex; position: relative; width: 100%; height: 9.722223vmin; }
.lucky-word-get .ranked { margin-top: 0; }
.lucky-word-get .ranked ~ .ranked { margin-top: 6.666667vmin; }
.lucky-word-get .ranked dd > span { margin-left: 1.388889vmin; flex: 0 0 9.722223vmin; position: relative; }
.lucky-word-get .ranked dd > span:first-child { margin-left: 0; }
/* 78x78 605px 430px */
.lucky-word-get .ranked .letter { display: inline-block; width: 9.722223vmin; height: 9.722223vmin; margin-left: 1.388889vmin; vertical-align: top; text-align: center; line-height: 9.722223vmin; font-size: 0; background: url("../img/bg-lucky-default.png") no-repeat; background-size: 76.388888vmin ; }
.lucky-word-get .ranked .letter.got { background: url("../img/bg-lucky-got.png") no-repeat; background-size: 76.388889vmin; }
.lucky-word-get .ranked .letter.complete { background: url("../img/bg-lucky-complete.png") no-repeat; background-size: 76.388889vmin; }
.lucky-word-get .ranked .letter.get { background: url("../img/bg-lucky-get.png") no-repeat; background-size: 76.388889vmin; }
.lucky-word-get .ranked .letter:first-child { margin-left: 0; }
.lucky-word-get .ranked span:nth-child(1) .letter { background-position: 0 0; }
.lucky-word-get .ranked span:nth-child(2) .letter { background-position: -11.111111vmin 0; }
.lucky-word-get .ranked span:nth-child(3) .letter { background-position: -22.222222vmin 0; }
.lucky-word-get .ranked span:nth-child(4) .letter { background-position: -33.333333vmin 0; }
.lucky-word-get .ranked span:nth-child(5) .letter { background-position: -44.444444vmin 0; }
.lucky-word-get .ranked span:nth-child(6) .letter { background-position: -55.555555vmin 0; }
.lucky-word-get .ranked span:nth-child(7) .letter { background-position: -66.666666vmin 0; }
.lucky-word-get .ranked:nth-of-type(2) span:nth-child(1) .letter { background-position: 0 -11.111111vmin; }
.lucky-word-get .ranked:nth-of-type(2) span:nth-child(2) .letter { background-position: -11.111111vmin -11.111111vmin; }
.lucky-word-get .ranked:nth-of-type(2) span:nth-child(3) .letter { background-position: -22.222222vmin -11.111111vmin; }
.lucky-word-get .ranked:nth-of-type(2) span:nth-child(4) .letter { background-position: -33.333333vmin -11.111111vmin; }
.lucky-word-get .ranked:nth-of-type(2) span:nth-child(5) .letter { background-position: -44.444444vmin -11.111111vmin; }
.lucky-word-get .ranked:nth-of-type(2) span:nth-child(6) .letter { background-position: -55.555555vmin -11.111111vmin; }
.lucky-word-get .ranked:nth-of-type(2) span:nth-child(7) .letter { background-position: -66.666666vmin -11.111111vmin; }
.lucky-word-get .ranked:nth-of-type(3) span:nth-child(1) .letter { background-position: 0 -22.222222vmin; }
.lucky-word-get .ranked:nth-of-type(3) span:nth-child(2) .letter { background-position: -11.111111vmin -22.222222vmin; }
.lucky-word-get .ranked:nth-of-type(3) span:nth-child(3) .letter { background-position: -22.222222vmin -22.222222vmin; }
.lucky-word-get .ranked:nth-of-type(3) span:nth-child(4) .letter { background-position: -33.333333vmin -22.222222vmin; }
.lucky-word-get .ranked:nth-of-type(3) span:nth-child(5) .letter { background-position: -44.444444vmin -22.222222vmin; }
.lucky-word-get .ranked:nth-of-type(3) span:nth-child(6) .letter { background-position: -55.555555vmin -22.222222vmin; }
.lucky-word-get .ranked:nth-of-type(3) span:nth-child(7) .letter { background-position: -66.666666vmin -22.222222vmin; }
.lucky-word-get .ranked:nth-of-type(4) span:nth-child(1) .letter { background-position: 0 -33.333333vmin; }
.lucky-word-get .ranked:nth-of-type(4) span:nth-child(2) .letter { background-position: -11.111111vmin -33.333333vmin; }
.lucky-word-get .ranked:nth-of-type(4) span:nth-child(3) .letter { background-position: -22.222222vmin -33.333333vmin; }
.lucky-word-get .ranked:nth-of-type(4) span:nth-child(4) .letter { background-position: -33.333333vmin -33.333333vmin; }
.lucky-word-get .ranked:nth-of-type(4) span:nth-child(5) .letter { background-position: -44.444444vmin -33.333333vmin; }
.lucky-word-get .ranked:nth-of-type(4) span:nth-child(6) .letter { background-position: -55.555555vmin -33.333333vmin; }
.lucky-word-get .ranked:nth-of-type(4) span:nth-child(7) .letter { background-position: -66.666666vmin -33.333333vmin; }
.lucky-word-get .ranked:nth-of-type(5) span:nth-child(1) .letter { background-position: 0 -44.444444vmin; }
.lucky-word-get .ranked:nth-of-type(5) span:nth-child(2) .letter { background-position: -11.111111vmin -44.444444vmin; }
.lucky-word-get .ranked:nth-of-type(5) span:nth-child(3) .letter { background-position: -22.222222vmin -44.444444vmin; }
.lucky-word-get .ranked:nth-of-type(5) span:nth-child(4) .letter { background-position: -33.333333vmin -44.444444vmin; }
.lucky-word-get .ranked:nth-of-type(5) span:nth-child(5) .letter { background-position: -44.444444vmin -44.444444vmin; }
.lucky-word-get .ranked:nth-of-type(5) span:nth-child(6) .letter { background-position: -55.555555vmin -44.444444vmin; }
.lucky-word-get .ranked:nth-of-type(5) span:nth-child(7) .letter { background-position: -66.666666vmin -44.444444vmin; }
.lucky-word-get .ranked .win { position: absolute; right: -6.111111vmin; top: -6.944444vmin; width: 10.833334vmin; height: 10.833334vmin; border-radius: 50%; background: #ec6c65; color: #fff; text-align: center; line-height: 10.833334vmin; font-size: 3.888889vmin; justify-content: center; align-items: center; }

/* Bottom Dialog */
.modal.modal-dialog-bottom { display: table; height: 100%; width: 100%; }
.modal.modal-dialog-bottom .modal-dialog { display: table-cell; vertical-align: bottom; }
.modal.modal-dialog-bottom .modal-content { overflow: hidden; margin: 16px auto; border-radius: 26px; background: #fafafa; border: 0; -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .5); box-shadow: 1px 1px 4px rgba(0, 0, 0, .5); }
.modal.modal-dialog-bottom .modal-body { padding: 24px 24px 0; font-size: 16px; line-height: 1.4375; }
.modal.modal-dialog-bottom .modal-footer { display: flex; padding: 24px 24px 20px; }
.modal.modal-dialog-bottom .modal-footer .btn-modal { flex: 1; height: 36px; color: #4897E1; font-size: 16px; font-weight: bold; text-align: center; padding: 0; position: relative; }
.modal.modal-dialog-bottom .modal-footer.flex-auto .btn-modal { flex: 1 auto; }
.modal.modal-dialog-bottom .modal-footer .btn-modal:after { content: ''; width: 1px; height: 16px; background: #e3e3e3; position: absolute; top: 50%; right: 0; margin: -8px 0 0; }
.modal.modal-dialog-bottom .modal-footer .btn-modal:last-child:after { display: none; }
.modal.modal-dialog-bottom .modal-footer .btn-modal:focus,
.modal.modal-dialog-bottom .modal-footer .btn-modal:hover,
.modal.modal-dialog-bottom .modal-footer .btn-modal:active { box-shadow: none; }

.modal .lucky-status { padding: 0; }
.modal .lucky .status .msg { font-size: 20px; line-height: 24px; }
.modal .lucky .status .val { margin: 20px 0 17px; }
.modal .lucky .status .val img { width: 116px; height: 116px; }
.modal .lucky .status .name { padding-bottom: 5px; font-size: 15px; }
.modal .lucky .status .desc { padding-bottom: 0; font-size:13px; line-height:15px; }

@media ( min-width : 480px ) {
	.modal.modal-dialog-bottom .modal-content { width: 68.36%; }
}	

@media ( min-width : 600px ) {
	.modal.modal-dialog-bottom .modal-content { width: 60%; }
}	

@media ( min-width : 960px ) {
	.modal.modal-dialog-bottom .modal-content { width: 37.5%; }
}	

@media ( min-width : 1920px ) {
	.modal.modal-dialog-bottom .modal-content { width: 25%; }
}

/* 0403 추가 */
.no-complete { color: #3957ac; font-size: 3.611111vmin; margin: -6.944444vmin 0 5.555556vmin; }

/* Coupons Component */
.coupon-wrap { padding-bottom: 62px; }
.coupon-img { position: relative; width: 150px; margin: 12px auto 32px auto; }
.coupon-img .img { width: 100%; border-radius: 10px; border: 1px solid rgba(0,0,0,.05); }
.coupon-img .skeleton-item { height: 150px; border-radius: 10px; }
.coupon-img .coupon-dc { position: absolute; top: 0; left: 0; border-radius: 10px 0 10px 0; font-size: .813rem; color: #fafafa; min-width: 41px; padding: 0 7px; background-color: #3970F3; z-index: 5; font-weight: 500; }
.disabled .coupon-img .img { opacity: .2; border-color: rgba(0,0,0,.3); }
.disabled .coupon-img .coupon-dc { background-color: rgba(163,163,163,.3); }

.coupon-detail-txt { padding: 0 24px 32px 24px; }
.coupon-detail-txt .coupon-logo { padding: 0 0 2.5vmin; display: flex; justify-content: center; }
.coupon-detail-txt .coupon-logo > span { display: inline-flex; border: .277778vmin solid #4897e1; border-radius: .555556vmin; padding: .833333vmin 1.944444vmin; }
.coupon-detail-txt .coupon-logo > span .img-logo { height: 2.5vmin; }
.coupon-detail-txt .coupon-name { padding: 0; font-size: 1.375rem; font-weight: 500; color: #010101; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; line-height: 2rem; }
.coupon-detail-txt .coupon-bname { padding: 0 14px 0 0; font-size: .875rem; color: #505050; line-height: 1.188rem; display: inline-block; background: url('../img/coupons_layer_next_light_bg.png') no-repeat 100% 5px; background-size: 12px; }
.coupon-detail-txt .coupon-bname.large { font-size: 4.166667vmin; }
.coupon-detail-txt .coupon-bname-link { font-weight: bold; position: relative; padding-right: 3.333333vmin; }
.coupon-detail-txt .coupon-bname-link:after { position: absolute; top: 50%; right: 0; border-bottom-style: solid; border-bottom-width: .555556vmin; border-right-style: solid; border-right-width: .555556vmin; border-color: #979797; content: ''; display: inline-block; height: 1.944444vmin; width: 1.944444vmin; transform: rotate(-45deg); margin-top: -1.111111vmin; border-bottom-right-radius: .555556vmin; }
.coupon-detail-txt .coupon-purchase-date { font-size: 3.888889vmin; text-align: center; color: #979797; padding-top: 5vmin; line-height: 5.277778vmin; }
.coupon-detail-txt .coupon-order-num { font-size: 3.888889vmin; text-align: center; color: #979797; padding-top: 1.111111vmin; line-height: 5.277778vmin; }
.coupon-detail-txt .coupon-price { padding: 16px 0 6px; }
.coupon-detail-txt .coupon-price > span { font-size: 1.438rem; color: #3970F3; font-weight: 700; line-height: 1.813rem; }
.coupon-detail-txt .coupon-price > del { font-size: .938rem; color: #979797; margin: 0; }

.coupon-detail-txt .coupon-price-benefit { padding: 16px 0 0; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; }
.coupon-detail-txt .coupon-price-benefit .price { font-size: 1.438rem; color: #3970F3; font-weight: 700; line-height: 1.813rem; display: flex; align-items: center; }
.coupon-detail-txt .coupon-price-benefit .price > del { font-size: .938rem; color: #979797; margin: 0; }
.coupon-detail-txt .coupon-price-benefit .price-benefit { color: #8c8c8c; font-size: .813rem; padding-top: 6px; display: flex; align-items: center; }
.coupon-detail-txt .coupon-price-benefit .reward { color: #8c8c8c; font-size: .813rem; padding-top: 4px; }
.coupon-detail-txt .coupon-price-benefit .btn-benefit { border: 0; background: none; vertical-align: top; margin-left: 3px; }
.coupon-detail-txt .coupon-price-benefit .btn-benefit:before { content: '\003F'; color: #fff; border: 1px solid #d1d1d1; background-color: #d1d1d1; border-radius: 50%; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; line-height: 1.1; font-size: .75rem; box-sizing: border-box; }
.coupon-detail-txt .coupon-save { font-size: .875rem; color: #FF7d6c; text-align: center; padding-top: 3px; line-height: 1.2; }

.coupon-detail-txt.disabled .coupon-txt,
.disabled .coupon-txt { opacity: .1; }

.coupon-description { padding: 32px 24px 24px; background: #f6f6f6; }
.coupon-description .title { font-size: .875rem; color: #505050; padding-bottom: 8px; font-weight: 500; }
.coupon-description .coupon-notice-define { font-size: .813rem; color: #979797; line-height: 1rem; }
.coupon-description .coupon-notice-define dd { padding-bottom: 15px; }

.coupon-description-list { padding: 0 24px; background: #f6f6f6; }
.coupon-description-list .coupon-desc-list > li { border-top: 1px solid rgba(0,0,0,.08); }
.coupon-description-list .coupon-desc-list > li > a { display: block; position: relative; font-size: .875rem; color: #505050; line-height: 3rem; font-weight: 700; margin: 0 -24px; padding: 0 24px; }
.coupon-description-list .coupon-desc-list > li > a:after { content: ''; display: block; width: 8px; height: 8px; border: solid #797979; border-width: 0 2px 2px 0; position: absolute; right: 24px; top: 50%; margin-top: -4px; transform: rotate(45deg); border-radius: 0 0 1px 0; }
.coupon-description-list .coupon-desc-list > li.active > a:after,
.coupon-description-list .coupon-desc-list > li > a.active:after { border-width: 2px 0 0 2px; margin-top: -4px; border-radius: 1px 0 0; }
.coupon-description-list .coupon-desc { font-size: .813rem; color: #8c8c8c; line-height: 1.063rem; padding-bottom: 16px; margin-top: 0; display: none; }
.coupon-description-list .coupon-desc-list > li.active .coupon-desc { display: block; }
.coupon-description-list .coupon-desc > ul  > li > strong { color: #8c8c8c; white-space: nowrap; font-weight: 400; }
.coupon-description-list .coupon-desc > ul  > li > strong:before { content: '\00B7'; margin-right: 4px; }
.coupon-description-list .coupon-desc > ul  > li.indent { display: flex; }
.coupon-description-list .coupon-desc > ul  > li.indent > strong { margin-right: 5px; } 
.coupon-description-list .coupon-desc > ul  > li > ul > li { position: relative; margin-left: 14px; padding-left: 8px; }
.coupon-description-list .coupon-desc > ul  > li > ul > li:before { content: '\2010'; position: absolute; top: 0; left: 0; }

.coupon-info { padding: 26px 16px 24px; background: #f6f6f6; }
.coupon-info address { font-size: .625rem; color: #979797; }
.coupon-info address a { color: #505050; font-weight: bold; }
.coupon-info .link { line-height: 10px; padding-top: 20px; }
.coupon-info .link a { font-size: .625rem; color: #505050; font-weight: bold; }
.coupon-info .copyright { font-size: .625rem; color: #979797; }

.coupon-btn { position: fixed; bottom: 0; left: 0; right: 0; background: #f6f6f6; display: flex; z-index: 20; }
.coupon-btn .btn { padding: 15px 24px 16px; font-size: 1.125rem; font-weight: 500; color: #010101; text-align: center; line-height: 1.5rem; border: 0; background: none; outline: 0; width: 100%; display: block; cursor: pointer; }

.coupon-date-info { margin: 16px 0 0; padding: 20px 24px; background: #fcfcfc; border-radius: 26px; }
.coupon-date-info ul { margin-bottom: 12px; }
.coupon-date-info li { margin-top: 4px; }
.coupon-date-info li:first-child { margin-top: 0; }
.coupon-date-info .data { display: flex; justify-content: space-between; margin-bottom: 0; }
.coupon-date-info .data dt { flex: 1 0 auto; font-size: .875rem; color: #8c8c8c; font-weight: 400; display: flex; position: relative; }
.coupon-date-info .data dd { font-size: .875rem; color: #8c8c8c; text-align: right; }
.coupon-date-info .data.warning dd { color: #F56A0D; }
.coupon-date-info .msg { font-size: .8125rem; color: #F56A0D; text-align: right; line-height: 21px; }
.coupon-date-info .btn-tooltip { width: 22px; height: 22px; margin-left: 5px; padding: 0; border: 0; background: url('../img/coupons_detail_info.png') no-repeat 0 0; background-size: 22px 22px; vertical-align: top; font-size: 0; position: relative; }
.coupon-date-info .btn-tooltip:active { box-shadow: none; }
.coupon-date-info .sender { padding-bottom: 20px; }
.coupon-date-info .sender dt { font-size: 1.063rem; color: #010101; font-weight: 500; margin-bottom: 12px; }
.coupon-date-info .sender dd { padding: 14px 18px; font-size: .875rem; color: #505050; line-height: 1.313rem; font-weight: 400; background: #f6f6f6; border-radius: 12px; text-align: center; }

.coupon-date-info .btn-tooltip:after { content: ''; position: absolute; left: 50%; bottom: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid rgba(52,56,68,0.80); font-size: 0; line-height: 0; margin-left: -4px; width: 0; display: none; }
.coupon-date-info .tooltip .tooltip-msg { position: absolute; top: 26px; left: 0; width: 100%; background: rgba(52,56,68,0.80); border-radius: 15px; color: #fafafa; padding: 8px 31px 8px 12px; font-size: .8125rem; line-height: 1.2; font-weight: normal; z-index: 10; word-break: break-word; display: none; }
.coupon-date-info .tooltip .btn-tooltip-close { position: absolute; top: 6px; right: 6px; width: 19px; height: 19px; border: 0; background: rgba(52,56,68,0.90); color: #fff; vertical-align: top; border-radius: 19px; }
.coupon-date-info .tooltip .btn-tooltip-close i { font-style: normal; line-height: 17px; position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: .875rem; }

.coupon-date-info .tooltip.active .btn-tooltip:after,
.coupon-date-info .tooltip.active .tooltip-msg { display: block; }

.coupon-code { padding: 0; position: relative; }
.coupon-code.disabled .barcode svg,
.disabled .coupon-code .barcode svg,
.coupon-code.disabled .qrcode .qrcode-area,
.disabled .coupon-code .qrcode .qrcode-area,
.coupon-code.disabled .code-num,
.disabled .coupon-code .code-num,
.coupon-code.disabled .code-copy,
.disabled .coupon-code .code-copy,
.coupon-code.disabled .code-copy-msg,
.disabled .coupon-code .code-copy-msg,
.coupon-code.disabled .barcode-num,
.disabled .coupon-code .barcode-num,
.coupon-code.disabled .qrcode-num,
.disabled .coupon-code .qrcode-num  { opacity: .1; }
.coupon-code .disabled-txt {  font-size: 1.063rem; line-height: 1.25rem; color: #252525; position: absolute; top: 50%; left: 0; right: 0; text-align: center; font-weight: 500; z-index: 10; margin-top: -10px; }
.coupon-code .barcode { min-width: 200px; margin: 0 auto; text-align: center; line-height: 1.1; background: #fcfcfc; border-radius: 26px; padding: 32px 0 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 126px; }
.coupon-code.type2 .barcode { padding: 24px 0 17px; }
.coupon-code .barcode .detail { margin-top: -1.11112vmin; text-align: center; }
.coupon-code .barcode .detail p { font-size: 3.61112vmin; color: #505050; margin-top: 1.11112vmin; }
.coupon-code .barcode .detail .btn { position: relative; margin-bottom: -1.11112vmin; margin-left: 2.722223vmin; font-size: 2.77778vmin; color: #505050; line-height: 1.5; background: none; border: 0; outline: 0; }
.coupon-code .barcode .detail .btn:before { content: ''; position: absolute; left: -4.722223vmin; top: 0; width: 4.722223vmin; height: 4.722223vmin; background: url('../img/coupons_detail_expand.png') no-repeat 0 0; background-size: 4.722223vmin 4.722223vmin; }
.coupon-code .barcode .detail .btn:active,
.coupon-code .code-num { color: #979797; text-align: center; }
.coupon-code .code-num label { display: block; font-size: 3.611111vmin; margin-bottom: 1.388889vmin; font-weight: 400; }
.coupon-code .code-num .num { border: 0; font-size: 5.55556vmin; font-weight: bold; color: #505050; text-align: center; line-height: 1.45; background: none; }

.coupon-code .code-copy { padding: 12px 0; background: #fcfcfc; border-radius: 26px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 126px; }
.coupon-code .code-copy .num { font-size: 1.188rem; color: #252525; font-weight: 700; }
.coupon-code .code-copy .txt { font-size: 0.625rem; color: #979797; font-weight: 400; }
.coupon-code .code-copy .code-copy-btn { margin-top: 10px; display: flex; justify-content: center; }
.coupon-code .code-copy .btn-copy { width: 96px; height: 34px; margin: 0; font-size: .875rem; color: #252525; font-weight: 500; line-height: 2rem; background: #e9e9e9; border-radius: 18px; word-break: break-word; border: 0; }
.coupon-code .code-copy .btn-copy + .btn-copy { margin-left: 16px; }
.coupon-code .code-copy .btn-copy:active { box-shadow: inset 0 3px 5px rgba(0,0,0,.125); }
.coupon-code .code-copy .not-support { display: none; }
.coupon-code .code-copy-msg { font-size: 2.777778vmin; color: #979797; text-align: center; padding-top: 2.777778vmin; }
.coupon-code .code-copy .url {font-size: 1.188rem; color: #252525; font-weight: 700; padding: 0 10px; }

.coupon-code .barcode-num { font-size: .813rem; color: #000; display: flex; align-items: flex-start; justify-content: center; margin: 6px 0 0; }
.coupon-code .barcode-num span { margin-right: 5px; }
.coupon-code .barcode-num::after { content: ''; display: inline-block; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' id='footer-sample-full' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16' class='iconify iconify--bi'%3E%3Cg fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M6.5 12a5.5 5.5 0 1 0 0-11a5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0a6.5 6.5 0 0 1 13 0z'%3E%3C/path%3E%3Cpath d='M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1a6.538 6.538 0 0 1-1.398 1.4z'%3E%3C/path%3E%3Cpath fill-rule='evenodd' d='M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-size: cover; position: relative; top: 1px; }
.coupon-code .barcode-num.no-zoom::after { content: none; }

.coupon-code .qrcode { padding: 20px 0; background: #fcfcfc; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; max-height: 151px; }
.coupon-code .qrcode .detail { margin-top: 1.11112vmin; text-align: center; }
.coupon-code .qrcode .detail p { font-size: 3.61112vmin; color: #505050; }
.coupon-code .qrcode .detail .btn { position: relative; margin-bottom: -1.11112vmin; margin-left: 2.722223vmin; font-size: 2.77778vmin; color: #505050; line-height: 1.5; background: none; border: 0; outline: 0; }
.coupon-code .qrcode .detail .btn:before { content: ''; position: absolute; left: -4.722223vmin; top: 0; width: 4.722223vmin; height: 4.722223vmin; background: url('../img/coupons_detail_expand.png') no-repeat 0 0; background-size: 4.722223vmin 4.722223vmin; }
.coupon-code .qrcode .qrcode-area { width: 89px; height: 89px; border: 0; outline:0; margin: 0 auto; padding: 6px; }
.coupon-code .qrcode .qrcode-area img { width: 100%; height: auto; }
.coupon-code .qrcode-num { font-size: .813rem; color: #000; display: flex; justify-content: center; margin: 5px 0 0; line-height: 1.125rem; }
.coupon-code .qrcode-num span { margin-right: 5px; }
.coupon-code .qrcode-num::after { content: ''; display: inline-block; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' id='footer-sample-full' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16' class='iconify iconify--bi'%3E%3Cg fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M6.5 12a5.5 5.5 0 1 0 0-11a5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0a6.5 6.5 0 0 1 13 0z'%3E%3C/path%3E%3Cpath d='M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1a6.538 6.538 0 0 1-1.398 1.4z'%3E%3C/path%3E%3Cpath fill-rule='evenodd' d='M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-size: cover; position: relative; top: 1px; }
.coupon-code .qrcode-num.no-zoom::after { content: none; }
.coupon-code .qrcode-num.only-zoom { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% - -55px), calc(-50% - -35px)); }

.coupon-code .serial-num { padding: 20px 0; background: #fcfcfc; border-radius: 26px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 126px; }
.coupon-code .serial-num span { display: block; padding: 22px 0; font-size: 1.188rem; font-weight: 500; color: #000; }

.coupon-code-btn { text-align: center; padding: 0 0 14px; }
.coupon-code-btn .btn { box-shadow: none; background: #3970F3; height: 40px; font-size: 1.0625rem; color: #fafafa; padding: 8px 9px; border-radius: 21px; line-height: 20px;min-width: 200px;}
.coupon-code-btn .btn:active { box-shadow: inset 0 3px 5px rgba(0,0,0,.125); }
.coupon-code-btn .btn.unused { background: rgba(0, 0, 0, .06); color: #252525; }
.coupon-code-btn .btn + .btn { margin-top: 13px; }
.coupon-code-btn.disabled .btn,
.disabled .coupon-code-btn .btn { opacity: .1; }

.coupon-action-btn { text-align: center; padding: 13px 0}
.coupon-action-btn .btn { box-shadow: none; background: rgba(0, 0, 0, .06); color: #252525; height: 40px; font-size: 1.0625rem; padding: 8px 9px; border-radius: 21px; line-height: 20px;min-width: 200px}
.coupon-action-btn .btn:active { box-shadow: inset 0 3px 5px rgba(0,0,0,.125); }
.coupon-action-btn .btn + .btn { margin-top: 13px; }
.coupon-action-btn.disabled .btn,
.disabled .coupon-action-btn .btn { opacity: .1; }

/* [SMCS-8580] 0331~ */
.coupon-sender-info { padding: 22px 24px; background-color: #fcfcfc; border-radius: 26px; } 
.coupon-sender-info .sender { font-size: 1.063rem; color: #010101; font-weight: 500; }
.coupon-sender-info .message { font-size: .875rem; padding-top: 9px; color: #8c8c8c; line-height: 1.188rem; }

.coupon-purchase-list { margin: 0; padding: 22px 24px 26px; background: #fcfcfc; border-radius: 26px; }
.coupon-purchase-list .count { position: relative; font-size: 1.063rem; line-height: 1.438rem; color: #010101; font-weight: 500; padding: 0 0 22px; margin: 0 0 26px; border-bottom: 1px solid #e4e4e4; }
.coupon-purchase-list .cancel-list { position: absolute; top: 0; right: 0; font-size: .813rem; color: #4d4d4d; font-weight: 500; }
.coupon-purchase-list .btn-all-cancel { border-radius: 17px; box-shadow: none; background: rgba(0, 0, 0, .06); color: #252525; line-height: inherit; font-weight: 500; height: 34px; font-size: .875rem; padding: 0; min-width: 96px; border: 0; position: absolute; top: -5px; right: 0; }
.coupon-purchase-list .listbox { padding-bottom: 0; }
.coupon-purchase-list .listbox ul > li:first-child { margin-top: 0; }
.coupon-purchase-list .listbox ul > li { margin-top: 24px; display: flex; align-items: center; }
.coupon-purchase-list .listbox .listbox-info { flex: 1; }
.coupon-purchase-list .listbox .listbox-info .items { color: #8c8c8c; font-size: .875rem; line-height: 1.188rem; }
.coupon-purchase-list .listbox .listbox-info .items + .items { margin-top: 4px; }
.coupon-purchase-list .btnbox { text-align: center; padding: 0; }
.coupon-purchase-list .btnbox .btn { border-radius: 17px; box-shadow: none; background: #e9e9e9; color: #252525; line-height: inherit; font-weight: 500; height: 34px; font-size: .875rem; padding: 0; min-width: 96px; }
.coupon-purchase-list .lead { padding: 30px 0 0; }
.coupon-purchase-list .lead .tit { font-size: .75rem; color: #505050; font-weight: 500; line-height: 1.125rem; }
.coupon-purchase-list .lead .txt { font-size: .75rem; color: #979797; font-weight: 400; line-height: 1rem; }

.coupon-sendgift-list { margin-top: 16px; padding: 22px 24px 26px; background-color: #fcfcfc; border-radius: 26px; }
.coupon-sendgift-list .count { position: relative; font-size: 1.063rem; color: #010101; font-weight: 500; padding: 0; display: flex; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(0,0,0,.08); align-items: center; }
.coupon-sendgift-list .count .total { display: block; font-weight: 400; font-size: .813rem; line-height: 1.125rem; margin-top: 3px; }
.coupon-sendgift-list .count .btn { border-radius: 17px; box-shadow: none; background: #e9e9e9; color: #252525; line-height: inherit; font-weight: 500; height: 34px; font-size: .875rem; padding: 0; min-width: 96px; margin-left: auto; }
.coupon-sendgift-list .count .cancel-list { position: absolute; top: 5px; right: 0; font-size: .813rem; color: #4d4d4d; font-weight: 500; }
.coupon-sendgift-list .listbox .count { margin: 0; padding: 0 0 20px; border: 0; }
.coupon-sendgift-list .listbox + .listbox { padding-top: 22px; margin-top: 22px; border-top: 1px solid rgba(0,0,0,.08); }
.coupon-sendgift-list .listbox li { margin-top: 24px; display: flex; align-items: center; }
.coupon-sendgift-list .listbox li:first-child { margin-top: 0; }
.coupon-sendgift-list .listbox .listbox-info { flex: 1; }
.coupon-sendgift-list .listbox .listbox-info .items { color: #8c8c8c; font-size: .875rem; line-height: 1.188rem; }
.coupon-sendgift-list .listbox .listbox-info .items + .items { margin-top: 4px; }
.coupon-sendgift-list .btnbox { text-align: center; padding: 0; }
.coupon-sendgift-list .btnbox .btn { border-radius: 17px; box-shadow: none; background: rgba(0, 0, 0, .06); color: #252525; line-height: inherit; font-weight: 500; height: 34px; font-size: .875rem; padding: 0; min-width: 96px; }
.coupon-sendgift-list .lead { padding: 30px 0 0; }
.coupon-sendgift-list .lead .tit { font-size: .75rem; color: #505050; font-weight: 500; line-height: 1.125rem; }
.coupon-sendgift-list .lead .txt { font-size: .75rem; color: #979797; font-weight: 400; line-height: 1rem; }

.coupon-purchase { padding: 22px 24px 24px; background: #fcfcfc; border-radius: 26px; }
.coupon-purchase .tit { margin-bottom: 20px; font-size: 1.063rem; line-height: 1.438rem; color: #010101; font-weight: 500; display: flex; align-items: center; white-space: nowrap; }
.coupon-purchase .listbox { padding-bottom: 0; }
.coupon-purchase .listbox li { margin-top: 5px; }
.coupon-purchase .listbox li:first-child { margin-top: 0; }
.coupon-purchase .listbox dl { display: flex; justify-content: space-between; margin-bottom: 0; line-height: 1.438rem; position: relative; }
.coupon-purchase .listbox dt { font-size: .875rem; color: #252525; font-weight: 400; position: absolute; }
.coupon-purchase .listbox dd { font-size: .875rem; color: #252525; font-weight: 400; text-align: right; display: flex; flex-direction: column; flex: 1; white-space: nowrap; }
.coupon-purchase .save-point { font-size: .813rem; color: #3970F3; font-weight: 300; display: flex; align-items: center; justify-content: flex-start; position: relative; margin-top: 10px; }
.coupon-purchase .listbox li.total { margin: 20px 0 0; background-color: #f8f8f8; border-radius: 12px; padding: 16px 20px; }
.coupon-purchase .listbox li.total dl { line-height: 1.625rem; } 
.coupon-purchase .listbox li.total dt { color: #252525; }
.coupon-purchase .listbox li.total dd { color: #252525; font-size: 1.063rem; font-weight: 500; }
.coupon-purchase .tooltip { height: 14px; white-space: normal; text-align: left; }
.coupon-purchase .btn-tooltip { width: 14px; height: 14px; margin-left: 4px; padding: 0; border: 0; background: url('../img/coupons_ic_point_info.png') no-repeat 0 0; background-size: 14px; vertical-align: top; font-size: 0; position: relative; }
.coupon-purchase .btn-tooltip:active { box-shadow: none; }
.coupon-purchase .btn-tooltip:after { content: ''; position: absolute; left: 50%; bottom: -6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid rgba(52,56,68,0.80); font-size: 0; line-height: 0; margin-left: -4px; width: 0; display: none; }
.coupon-purchase .tooltip .tooltip-msg { position: absolute; top: 27px; right:-16px; width: 100%; background: rgba(52,56,68,.8); border-radius: 15px; color: #fafafa; padding: 8px 31px 8px 12px; font-size: .813rem; line-height: 1.2; font-weight: normal; z-index: 10; word-break: break-word; display: none; }
.coupon-purchase .tooltip .btn-tooltip-close { position: absolute; top: 6px; right: 6px; width: 19px; height: 19px; border: 0; background: rgba(52,56,68,0.90); color: #fff; vertical-align: top; border-radius: 50%; }
.coupon-purchase .tooltip .btn-tooltip-close i { font-style: normal; line-height: 1.063rem; position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: .875rem; }
.coupon-purchase .tooltip.active .btn-tooltip:after,
.coupon-purchase .tooltip.active .tooltip-msg { display: block; }

.coupon-payment-cancel { padding: 20px 24px; } 
.coupon-payment-cancel .payment-img { width: 120px; margin: 0 auto 18px; }
.coupon-payment-cancel .payment-img .img { width: 100%; border-radius: 10px; border: 1px solid #e3e3e3; }
.coupon-payment-cancel .payment-detail { text-align: center; padding-bottom: 22px; }

.coupon-payment-cancel .payment-detail .cname { padding: 0; text-align: center; font-size: .875rem; font-weight: bold; color: #323232; line-height: 1.3; }
.coupon-payment-cancel .payment-detail .bname { padding: 5px 0 0; text-align: center; font-size: .875rem; color: #979797; line-height: 19px; font-weight: 300; }
.coupon-payment-cancel .payment-detail .date { font-size: .875rem; color: #979797; font-weight: 300; padding-top: 18px; }

.coupon-payment-cancel .purchase-info { padding-bottom: 7px; }
.coupon-payment-cancel .purchase-info li { margin-top: 10px; }
.coupon-payment-cancel .purchase-info li:first-child { margin-top: 0; }
.coupon-payment-cancel .purchase-info li.total { margin-top: 15px; padding-top: 15px; border-top: 1px dotted #979797; }
.coupon-payment-cancel .purchase-info dl { display: flex; justify-content: space-between; margin-bottom: 0; line-height: 1.4; }
.coupon-payment-cancel .purchase-info dt { font-size: .875rem; color: #505050; font-weight: bold; }
.coupon-payment-cancel .purchase-info dd { font-size: .875rem; color: #5e7399; font-weight: bold; text-align: right; }
.coupon-payment-cancel .purchase-info .tit { margin-bottom: 14px; font-size: .875rem; color: #909090; font-weight: 700; display: flex; align-items: center; white-space: nowrap; }
.coupon-payment-cancel .purchase-info .tit::after { content: ''; border-top: 1px dotted #979797; flex: 1; margin-left: 20px; }

/* [SMCS-8821] 0416~ */
.coupon-scroll-banner { padding: 23px 0; background: #fcfcfc; border-radius: 26px; }
.coupon-scroll-banner .swipe-banner { display: flex; overflow: hidden; }
.coupon-scroll-banner .swipe-banner .item { flex: 0 0 100%; }
.coupon-scroll-banner .tit { font-size: 1rem; color: #252525; padding: 0 24px 17px 24px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: bold; }
.coupon-scroll-banner .list-banner { padding: 0 24px; overflow: hidden; }
.coupon-scroll-banner .list-banner .list { display: flex; margin: 0 -6px; justify-content: center; }
.coupon-scroll-banner .list-banner .list li { flex: 1; margin: 0 6px; max-width: 130px; }
.coupon-scroll-banner .list-banner .list .ban { width: 100%; border-radius: 10px; } 
.coupon-scroll-banner .list-banner .list .ban-name { font-size: .875rem; color: #252525; font-weight: bold; line-height: 1.063rem; padding-top: 5px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.coupon-scroll-banner .list-banner .list .ban-brand { font-size: .688rem; color: #252525; opacity: .5; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.coupon-scroll-banner .swipe-paging { display: flex; align-items: center; justify-content: center; margin-top: 33px }
.coupon-scroll-banner .swipe-paging .bullet { width: .313rem; height: .313rem; background: #e4e4e4; border-radius: 50%; margin: 0 5px; }
.coupon-scroll-banner .swipe-paging .bullet.active { background: #252525; }

.coupon-scroll-category { margin-top: 20px; padding: 12px 0 22px; background: #fcfcfc; border-radius: 26px 26px 0 0; }
.coupon-scroll-category .tabs-wrap { overflow: hidden; }
.coupon-scroll-category .tabs { padding: 0; }
.coupon-scroll-category .tabs .tabs-category { display: flex; border-bottom: .5px solid rgba(0,0,0,.07); min-width: fit-content; }
.coupon-scroll-category .tabs .tabs-category li { flex: 1; }
.coupon-scroll-category .tabs .tabs-category li a { display: flex; align-items: center; justify-content: center; white-space: nowrap; padding: 13px 17px 12px 17px; font-size: .8125rem; color: #747474; }
.coupon-scroll-category .tabs .tabs-category li.active a { font-size: .8125rem; font-weight: bold; color: #252525; border-bottom: 2px solid #252525; position: relative; bottom: -.5px; padding: 12px 17px 11px 17px; }

.coupon-scroll-category .swipe-category { padding: 29px 0 0; overflow: hidden; display: flex; }
.coupon-scroll-category .swipe-category .item { display: flex; flex: 0 0 100%; padding: 0 18px; position: relative; }
.coupon-scroll-category .swipe-category .list-category { display: flex; flex-wrap: wrap; flex: 0 0 100%; }
.coupon-scroll-category .swipe-category .list-category li { flex: 0 0 25%; display: flex; flex-direction: column; align-items: center; padding: 0 13px 18px; }
.coupon-scroll-category .swipe-category .list-category li.active { position: relative; }
.coupon-scroll-category .swipe-category .list-category li.active .logo:before { content: ''; background-image: url(../../res/img/coupons_eua_img_logo_selected.png); background-repeat: no-repeat; background-size: 100% auto; border: 0; width: 100%; height: 100%; position: absolute; top: 0; left: auto; }
.coupon-scroll-category .swipe-category .list-category .logo { width: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: relative; max-width: 70px; }
.coupon-scroll-category .swipe-category .list-category li.all .logo { border: .5px solid rgba(0,0,0,.07); background-color: #fff; }
.coupon-scroll-category .swipe-category .list-category .logo img { width: 100%; }
.coupon-scroll-category .swipe-category .list-category li.active .logo { background-color: #fff; }
.coupon-scroll-category .swipe-category .list-category .list-name { font-size: .6875rem; color: #505050; text-align: center; padding-top: 6px; min-height: 28px; }
.coupon-scroll-category .swipe-category .list-category li.active .list-name { color: #252525; }

.coupon-scroll-category .swipe-paging { display: flex; align-items: center; justify-content: center; margin-top: 6px; }
.coupon-scroll-category .swipe-paging .bullet { width: .313rem; height: .313rem; background: #e4e4e4; border-radius: 50%; margin: 0 5px; }
.coupon-scroll-category .swipe-paging .bullet.active { background: #252525; }

/* [SMCS-9120] 0512~ */
.coupon-lists { padding: 0 24px; background: #fcfcfc; border-radius: 26px; }
.coupon-lists .util { display: flex; font-size: .8125rem; color: #505050; align-items: center; padding: 12px 18px; margin: 0 -18px; position: relative; z-index: 2; }
.coupon-lists .util .cnt { position: absolute; left: 24px; top: auto; font-size: .8125rem; color: #505050; }
.coupon-lists .util .sort { flex: 1; display: flex; justify-content: flex-end; }
.coupon-lists .util .btn-sort { border: 0; background: none; font-size: .875rem; color: #505050; padding: 2px 5px; display: inline-flex; align-items: center; outline: 0; }
.coupon-lists .util .btn-sort:after { content: ''; width: 10px; height: 7px; background: url('../img/coupon-list-arr.png') no-repeat 0 0; background-size: 10px 15px; margin-left: 12px; position: relative; top: 2px; }
.coupon-lists .util .list-sort { position: absolute; top: 6px; right: 0; background: #fcfcfc; border-radius: 26px; border: 0; box-shadow: 0 4px 10px 1px rgba(0,0,0, .2); overflow-x: hidden; overflow-y: auto; padding: 4px 0; min-width: 168px; max-height: 400px; }
.coupon-lists .util .list-sort .btn-opt { width: 100%; padding: 12px 24px; background: transparent; border: 0; outline: 0; font-size: 1.063rem; text-align: left; position: relative; color: #000; }
.coupon-lists .util .list-sort .btn-opt span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.coupon-lists .util .list-sort .active .btn-opt,
.coupon-lists .util .list-sort .btn-opt.active { color: #3970F3; font-weight: bold; padding: 12px 64px 12px 24px }
.coupon-lists .util .list-sort .active .btn-opt:after,
.coupon-lists .util .list-sort .btn-opt.active:after { content: ''; display: block; width: 10px; height: 15px; border: solid #3970F3; border-width: 0 2px 2px 0; position: absolute; right: 24px; top: 50%; margin-top: -11px; transform: rotate(45deg); border-radius: 0 0 3px 0; }
.coupon-lists .from { font-size: .875rem; line-height: 1.188rem; font-weight: 400; color: #000; padding-bottom: 10px; }

.coupon-lists .list-inner { padding: 16px 0 0; }
.coupon-lists .list li { display: flex; align-items: center; padding: 16px 24px; position: relative; overflow: hidden;}
.coupon-lists .list li:first-child { padding-top: 0; }
.coupon-lists .list li:after { content: ''; position: absolute; bottom: 0; right: 24px;width: calc(100% - 134px); height: 1px; background: #e4e4e4; }
.coupon-lists .list li:last-child:after { content: none; }
.coupon-lists .list .thumb { position: relative; margin-right: 16px; flex: 0 0 70px; border-radius: 8px; background: #fff; }
.coupon-lists .list .thumb .badge { min-width: 41px; position: absolute; left: 0; top: 0; z-index: 1; padding: 0 4px; border-radius: 8px 0 8px; background-color: #3970f3; font-size: .75rem; font-weight: 500; color: #fafafa; text-align: center; }
.coupon-lists .list .thumb .img { display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,.05); border-radius: 8px; overflow: hidden; width: 70px; height: 70px; }
.coupon-lists .list .thumb .img > img { width: 100%; height: 100%; object-fit: contain; }
.coupon-lists .list .info { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; }
.coupon-lists .list .info .cname { font-size: .9375rem; color: #010101; line-height: 1.25rem; word-break: break-all;}
.coupon-lists .list .info .cbrand,
.coupon-lists .list .info .expired-date { font-size: .75rem; color: #8c8c8c; line-height: 1rem; }
.coupon-lists .list .info .expired-date { margin-top: 4px; }
.coupon-lists .list .info .cprice { font-size: .9375rem; color: #3970F3; font-weight: bold; }
.coupon-lists .list .info .cprice del { color: #979797; font-weight: normal; padding-left: .2667em; }
.coupon-lists .list .info .options { display: flex; margin-bottom: 4px; }
.coupon-lists .list .info .options span { display: inline-flex; border-radius: 7px; padding: .5px 5px; align-items: center; justify-content: center; color: #3970F3; background-color: #F0F4FC; margin-right: 2px; border: 1px solid transparent; }
.coupon-lists .list .info .options span img { height: 1.091em; }
.coupon-lists .list .info .options span i { font-size: .5rem; font-weight: 500; font-style: normal; position: relative; top: -1px; }
.coupon-lists .list .expired .img,
.coupon-lists .list .expired .info { opacity: .3; }
.coupon-lists .list .expired .thumb .badge { background-color: rgba(163,163,163,.3); }

/* [SMCS-12354] */
.modal-backdrop.coupon { opacity: .35; }
.modal-dialog.modal-coupon-benefit .modal-content { background: #fcfcfc; box-shadow: none; }
.modal-dialog.modal-coupon-benefit .modal-title { color: #252525; font-size: 20px; }
.modal-dialog.modal-coupon-benefit .thumb { padding: 10px 0; text-align: center; }
.modal-dialog.modal-coupon-benefit .thumb > img { width: 100%; max-width: 106px; }
.modal-dialog.modal-coupon-benefit .subject { color: #252525; text-align: center; }
.modal-dialog.modal-coupon-benefit .details { color: #8f8f8f; text-align: center; padding: 22px 0 5px; font-size: 14px; line-height: 19px; }
.modal-dialog.modal-coupon-benefit .modal-footer .btn-modal:after { background: #e6e6e6; }
.modal-dialog.modal-coupon-benefit .modal-footer .btn-modal { color: #3970F3; }

/* [SMCS-11566] 쿠폰샵 GUI 업데이트 */
.coupon-tab-description { background: #fcfcfc; border-radius: 26px; padding: 24px; margin: 0; }
.coupon-tab-description .tabs { display: flex; margin-bottom: 32px; }
.coupon-tab-description .tabs .btn-tab { flex: 1; border: 0; background: none; outline: 0; font-size: .938rem; color: #8c8c8c; padding: 0; line-height: 2.25rem; letter-spacing: -.3px; font-weight: 400; }
.coupon-tab-description .tabs .btn-tab.active { color: #252525; font-weight: 500; background: rgba(0,0,0,.05); border-radius: 18px; }
.coupon-tab-description .tit { font-size: .875rem; color: #505050; padding-bottom: 7px; }
.coupon-tab-description .btn-more { font-size: .813rem; border: 0; background: transparent; display: flex; width: 100%; justify-content: center; align-items: center; padding: 22px 0 0; outline: 0; color: #4d4d4d; font-weight: 500; line-height: 1; }
.coupon-tab-description .explain .inner { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-height: 48px; }
.coupon-tab-description .explain.active .inner { height: auto; max-height: none; overflow: visible; -webkit-line-clamp: inherit; }
.coupon-tab-description .explain.active dd:last-child { padding-bottom: 12px; }
.coupon-tab-description .explain .inner dl { font-size: .813rem; color: #8c8c8c; line-height: 1rem; }
.coupon-tab-description .explain .inner dd { padding-bottom: 20px; }
.coupon-tab-description .info { margin-top: -12px; }
.coupon-tab-description .info .desc-list > li { border-top: 1px solid rgba(0,0,0,.08); }
.coupon-tab-description .info .desc-list > li:first-child { border-top: 0; }
.coupon-tab-description .info .desc-list > li > a { display: block; position: relative; font-size: .875rem; color: #505050; font-weight: 700; margin: 0 -24px; padding: 14px 24px 16px; -webkit-tap-highlight-color: transparent; }
.coupon-tab-description .info .desc-list > li > a:after { content: ''; display: block; width: 7px; height: 7px; border: solid #797979; border-width: 0 2px 2px 0; position: absolute; right: 30px; top: 50%; margin-top: -7px; transform: rotate(45deg); border-radius: 0 0 3px 0; }
.coupon-tab-description .info .desc-list > li.active > a:after,
.coupon-tab-description .info .desc-list > li > a.active:after { border-width: 2px 0 0 2px; margin-top: -3px; border-radius: 3px 0 0; }
.coupon-tab-description .info .desc-cont { font-size: .813rem; color: #8c8c8c; line-height: 1.063rem; padding-bottom: 20px; display: none; }
.coupon-tab-description .info .desc-list > li.active .desc-cont { display: block; }
.coupon-tab-description .info .desc-cont > ul  > li > strong { font-weight: normal; white-space: nowrap; }
.coupon-tab-description .info .desc-cont > ul  > li > strong:before { content: '\00B7'; margin-right: 4px; }
.coupon-tab-description .info .desc-cont > ul  > li.indent { display: flex; word-break: keep-all; }
.coupon-tab-description .info .desc-cont > ul  > li.indent > strong { margin-right: 5px; } 
.coupon-tab-description .info .desc-cont > ul  > li > ul > li { position: relative; margin-left: 14px; padding-left: 8px; }
.coupon-tab-description .info .desc-cont > ul  > li > ul > li:before { content: '\2010'; position: absolute; top: 0; left: 0; }

.coupon-recommend { margin: 16px 0 0; padding: 22px 24px; background: #fcfcfc; border-radius: 26px; }
.coupon-recommend .inner + .inner { margin-top: 32px; }
.coupon-recommend .tit { font-size: 1.063rem; color: #010101; font-weight: 500; padding-bottom: 20px; }
.coupon-recommend .recommend-list { display: flex; margin: 0 -11px 0 -10px; flex-wrap: wrap; }
.coupon-recommend .recommend-list li { display: flex; padding: 0 11px 0 10px; flex-direction: column; max-width: 33.3333%; flex: 0 0 33.3333%; }
.coupon-recommend .recommend-list .thumb { width: 100%; max-height: 100%; border-radius: 8px; } 
.coupon-recommend .recommend-list .name { font-size: .875rem; color: #252525; line-height: 1rem; padding-top: 7px; }
.coupon-recommend .recommend-list .brand { font-size: .688rem; color: #8c8c8c; line-height: .813rem; padding-top: 3px; }
.coupon-recommend .recommend-list .price { font-size: .938rem; color: #3970f3; line-height: 1.375rem; padding-top: 1px; font-weight: 700; }


/* SNS Sharing */
.sns-sharing .txt { padding: 5vmin 0; text-align: center; font-size: 3.611111vmin; color: #747474; }
.sns-sharing .txt .emphasis { font-size: 3.888889vmin; color: #252525; margin-bottom: 1.388889vmin; font-weight: bold; }
.sns-sharing .txt p { line-height: 1.2; }
.sns-sharing .input-area { border-top: .277778vmin solid #e6e6e6; border-bottom: .277778vmin solid #e6e6e6; margin: 0 6.666667vmin; padding: 10.555556vmin 0 14.444444vmin; }

.sns-sharing .input-area .item { padding-top: 7.5vmin; }
.sns-sharing .input-area .item:first-child { padding: 0; }
.sns-sharing .input-area .item label { display: block; margin-bottom: 1.944444vmin; font-size: 3.88888vmin; font-weight: bold; color: #252525; line-height: 1.2; }     
.sns-sharing .input-area .item input { width: 100%; padding: 1.944445vmin 2.222222vmin; border: 0; border-radius: 1.666667vmin; background: #f4f4f4; color: #4897E1; height: 11.388889vmin; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 5vmin; }
.sns-sharing .input-area .item input::placeholder { color: #8f8f8f; }

.sns-sharing .btn-area .btn-default { background: rgba(0,0,0, .05); color: #252525; font-size: 4.166667vmin; height: 10vmin; padding: 2.222222vmin 2.5vmin; box-shadow: none; border-radius: 5.833333vmin; }
.sns-sharing .btn-area .btn-default.active { background: #4897e1; color: #fff; }

/* Wallet Ticket */
/* Iframe vmin->vw */
.notice-ticket { position: relative; }
.notice-ticket .notice-ticket-wrap { display: flex; overflow-x: auto; padding: 2.5vw 0; margin: 0 2.5vw; } 
.notice-ticket .notice-ticket-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.notice-ticket .notice-ticket-count { display: flex; width: 100%; padding: 0; align-items: center; justify-content: space-around; position: relative; z-index: 10; white-space: nowrap; min-width: fit-content; overflow-x: auto; overflow-y: hidden; }
.notice-ticket .notice-ticket-count > li { width: 23.62222vw;; text-align: center; display: flex; flex-direction: column; }
.notice-ticket .notice-ticket-count > li .tit { display: block; color: rgba(255, 255, 255, .5); font-size: 3.333333vw; }
.notice-ticket .notice-ticket-count > li .cnt { display: block; color: #fff; font-size: 6.944444vw; }
.notice-ticket .notice-ticket-define { padding: 4.166667vw 5.555556vw; position: relative; z-index: 10; }
.notice-ticket .notice-ticket-define dl { display: flex; width: 100%; flex-wrap: wrap; padding-top: 1.944444vw; }
.notice-ticket .notice-ticket-define dl:first-child { padding-top: 0; }
.notice-ticket .notice-ticket-define dt { width: 25%; color: rgba(255, 255, 255, .5); font-size: 3.888889vw; }
.notice-ticket .notice-ticket-define dd { margin-left: auto; width: 75%; color: #fff; font-size: 3.888889vw; }
.notice-ticket .notice-ticket-define dt:first-child,
.notice-ticket .notice-ticket-define dt:first-child + dd { padding-top: 0; }
.notice-ticket .ticket-img { width: 100%; padding: 0 1.944444vw; }
.notice-ticket .ticket-txt { color: #fff; font-weight: normal; font-size: 3.888889vw; line-height: 4.722222vw; padding-top: 1.388889vw; word-break: keep-all; white-space: normal; }
.notice-ticket .notice-ticket-count > li > .ticket-txt:only-child { padding: 2.777778vw 0; font-size: 4.166667vw; font-weight: bold; }

.keep-ticket { padding: 5.555556vmin 0; background: #e1f6ff; }
.keep-ticket .txt { text-align: center; padding-bottom: 3.611111vmin; font-size: 4.444444vmin; font-weight: bold; color: #2a7ece; }
.keep-ticket .btn-area { display: flex; justify-content: center; padding: 0; }
.keep-ticket .btn-area .btn-default { min-width: 27.777778vmin; height: 10vmin; padding: 1.388889vmin 4.166667vmin; box-shadow: none; margin: 0 0.833333vmin; background: #4897e1; border-radius: 5.55556vmin; font-size: 3.88889vmin; line-height: 5.55556vmin; }
.keep-ticket .btn-area .btn-default.outline { background: #fff; border: 1px solid  #4897e1; color: #4897e1; } 

.memo-ticket { padding: 5.555556vmin 0; } 
.memo-ticket .txt { text-align: center; padding-bottom: 3.611111vmin; font-size: 4.444444vmin; font-weight: bold; }
.memo-ticket .memo-input { margin: 0 5.555556vmin; padding: 2.222222vmin 4.44444vmin; border: .277778vmin solid transparent; border-radius: 1.66666vmin; border: 1px solid #e6e6e6; position: relative; }
.memo-ticket .memo-input .val { width: 100%; border: 0; background-color: transparent; font-size: 3.888889vmin; font-weight: 500; color: #666; line-height: 1; padding-right: 11.111111vmin; }
.memo-ticket .memo-input .count { position: absolute; width: 12.5vmin; text-align: right; top: 50%; transform: translateY(-50%); right: 2.777778vmin; font-size: 3.611111vmin; }
 
.push-ticket { padding: 0 0 5.555556vmin; } 
.push-ticket .txt { display: flex; justify-content: center; align-items: center; font-size: 4.444444vmin; font-weight: bold; }
.push-ticket .txt .btn-push { background: none; border: 0; cursor: pointer; margin-left: 2.222222vmin; } 
.push-ticket .txt .btn-push .img-calendar { width: 7.777778vmin; }
.push-ticket .date { text-align: center; font-size: 4.166667vmin; padding-top: 1.388889vmin; font-weight: bold; }

.button-ticket { display: flex; padding: 1.388889vmin 0; }
.button-ticket .btn { border: none; background: transparent; flex: 1; height: 10vmin; color: #4897e1; font-size: 4.444444vmin; font-weight: bold; text-align: center; padding: 0; position: relative; }
.button-ticket .btn:first-child:after { content: ''; width: .277778vmin; height: 4.444444vmin; background: #e3e3e3; position: absolute; top: 50%; right: 0; margin: -2.222222vmin 0 0; }

/* Iframe vmin->vw */
.type-ticket { position: relative; }
.type-ticket-inner { position: relative; z-index: 10; }
.type-ticket .img-ticket { width: 100%; }
.type-ticket .type-ticket-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.type-ticket .tit { display: block; color: #fff; padding: 2.5vw 0; margin: 0 5.555556vw; border-bottom: 0.277778vw solid rgba(255, 255, 255, .15); font-size: 4.166667vw; }
.type-ticket .txt { color: #fff; padding: 2.5vw 5.555556vw 4.166667vw; font-size: 3.888889vw; } 
.iframe-area {width:100%; height:100%;}

.picker-ticket { padding: 2.5vmin; }
.picker-ticket .info label { display: block; margin-bottom: 1.388888vmin; font-size: 3.88888vmin; font-weight: bold; color: rgba(0,0,0,.66); }
.picker-ticket .info input { width: 100%; font-size: 3.888889vmin; padding: 1.944445vmin; border: 1px solid #ccc; border-radius: .555556vmin; font-weight: bold; color: #5A6E91; position: relative; }
.picker-ticket .info input::after { content: ''; width: 6.666667vmin; height: 6.666667vmin; background: url(../../res/img/icon_push_calendar.png) no-repeat 0 0; background-size: 6.666667vmin; opacity: .6; position: absolute; right: 1.388889vmin; top: 50%; margin-top: -3.333333vmin; } 
.picker-ticket .info input[type="date"]::-webkit-inner-spin-button,
.picker-ticket .info input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }

/* Type23 Attendance */
.attendance-res { padding: 9.722223vmin 5vmin 0; background-color: #f2f4f5; text-align: center; }
.attendance-res .res .tit { display: block; font-size: 5vmin; color: #4897e1; line-height: 1.8; }
.attendance-res .res .cnt { display: flex; align-items: center; justify-content: center; width: 32.222222vmin; height: 32.222222vmin; margin: 0 auto; background: url('../img/bg-attendance-cnt.png') no-repeat 0 0; background-size: 32.222222vmin auto; font-size: 9.44444vmin; color: #fafafa; }
.attendance-res .res .cnt span { display: inline-block; width: 18.611112vmin; height: 18.611112vmin; margin: -.277778vmin 0 0 -.277778vmin; line-height: 18.611112vmin; background: transparent; border-radius: 50%; position: relative; }
.attendance-res .res .cnt em { position: absolute; top: 0; right: .555556vmin; font-size: 2.777778vmin; width: 5.833333vmin; height: 5.555556vmin; line-height: 5.555556vmin; }
.attendance-res .res .lead { margin-top: 3.33334vmin; font-size: 3.611112vmin; color: #747474; }
.attendance-res .calendar { display: flex; flex-flow: wrap; justify-content: space-between; margin: 9.722223vmin -.972222vmin 0 -.972222vmin; padding-bottom: 8.611112vmin; }
.attendance-res .calendar li { flex-basis: 16.6666667%; max-width: 16.6666667%; height: 13.0555555vmin; margin-bottom: 2.5vmin; }
.attendance-res .calendar li .turn { display: flex; flex-direction: column; justify-content: center; width: 13.0555555vmin; height: 100%; margin: 0 auto; background: url('../img/bg-attendance-spot.png') no-repeat -24.722222vmin -24.722222vmin; background-size: 60vmin 50vmin; font-size: 3.055555vmin; }
.attendance-res .calendar li .turn .status { font-weight: bold; color: #fafafa; line-height: 1.2; }
.attendance-res .calendar li .turn .date { color: rgba(0,0,0,.66); line-height: 1.2; }
.attendance-res .calendar li.win .turn { background-position: 0 0; }
.attendance-res .calendar li.lose .turn { background-position: -24.722222vmin .277778vmin; }
.attendance-res .calendar li.absent .turn { background-position: 0 -24.722222vmin; }
.attendance-res .calendar li.attend .turn { background-position: -44.722222vmin .277778vmin; }
.attendance-res .calendar li.absent .turn .status { color: #606060; opacity: .66; }
.attendance-res .calendar li.attend .turn .status { color: #456bcb; }
.attendance-res .calendar li.win .turn .date,
.attendance-res .calendar li.lose .turn .date { color: #fafafa; }

.roulette-res { text-align: center; padding: 5.55556vmin 6.666667vmin 6.111111vmin 6.666667vmin; }
.roulette-res .tit { font-size: 3.611111vmin; color: #252525; text-align: left; padding-bottom: 5.555556vmin; }
.roulette-res .msg strong { display: block; font-size: 5vmin; color: #4897e1; line-height: 1.8; }
.roulette-res .msg figure img,
.roulette-res .msg .thumb img { display: block; width: 32.22223vmin; height: 32.22223vmin; margin: 0 auto; }
.roulette-res .msg p { margin-top: 3.33334vmin; font-size: 3.611112vmin; color: #747474; }

.modal .attendance-status { padding: 0; text-align: center; }
.modal .attendance-status .msg { display: block; font-size: 16px; color: #4897e1; line-height: 1.8; }
.modal .attendance-status figure img,
.modal .attendance-status .thumb img { display: block; width: 94px; height: 94px; margin: 0 auto; }
.modal .attendance-status .name { padding-bottom: 5px; font-size: 13px; color: #4897e1; font-weight: bold; }
.modal .attendance-status .desc { padding-bottom: 0; font-size: 13px; line-height: 15px; color: #8b8b8b; }

/* Giftcard [SMCS-7360]-Wallet 관련 */
.giftcard-details { position: fixed; bottom: 0; left: 0; right: 0; }

.giftcard-tab { position: relative; height: 9.444444vmin; top: 0; right: 0; z-index: 1; display: flex; padding-top: 2.5vmin; flex: auto; justify-content: flex-end; }
.giftcard-tab .btn-tel { width: 5.277778vmin; height: 5.277778vmin; background: url('../img/icon_giftcard.png') no-repeat -.1388889vmin 0; background-size: 11.111111vmin auto; margin: 0 4.444444vmin 0 1.111111vmin; }
.giftcard-tab .btn-info { width: 5.277778vmin; height: 5.277778vmin; background: url('../img/icon_giftcard.png') no-repeat -5.833333vmin 0; background-size: 11.111111vmin auto; }
.giftcard-tab .giftcard-tab-info { display: flex; z-index: 1; margin-right: 6.666667vmin; }
.giftcard-tab::before { content: ''; position: absolute; top: 9.444444vmin; left: 0; right: 0; height: .555556vmin; background: #f9f9f9; box-shadow: -.277778vmin -.277778vmin .555556vmin rgba(0, 0, 0, .2); }
.giftcard-tab::after{ content: ''; position: absolute; top: 0; right: calc(-100% + 29.444444vmin); height: 9.444444vmin; width: 100%; background: #f9f9f9; transform: skew(-50deg, 0deg); border-radius: 2.222222vmin 0 0 0; box-shadow: -.277778vmin -.277778vmin .277778vmin rgba(0, 0, 0, .2); }

.giftcard-tit { color: #505050; font-size:1.12rem; font-weight: 500; }
.giftcard-tit-sub { font-size: 1.071em; color: #505050; font-weight: 500; }
.giftcard-defined { display: flex; width: 100%; flex-wrap: wrap; font-weight: 400; }
.giftcard-defined dt { width: 50%; color: #737373; font-size: 1rem; padding-top: 0.0667em; }
.giftcard-defined dd { width: 50%; margin-left: auto; text-align: right; font-size: 1rem; color: #737373; display: flex; justify-content: flex-end; align-items: center; padding-top: .277778vmin; }

.giftcard-cardinfo { padding: 0 1.7286em; position: relative; top: 0; background: #f9f9f9; z-index: 1; }
.giftcard-cardinfo .inner { padding: 1.0714em 0.2857em; border-bottom: 1px solid #e6e6e6; }
.giftcard-cardinfo .giftcard-defined { margin-top: 0.35712em; }

.giftcard-cardinfo .guide { font-size: 0.95rem; color: #8f8f8f; text-align: center; margin-top: 1.25em; }
.giftcard-cardinfo .hide-num { display: flex; margin-right: 2.5vmin; }
.giftcard-cardinfo .hide-num:only-child { margin-right: 0; }
.giftcard-cardinfo .hide-num span { width: .833333vmin; height: .833333vmin; background: #575757; margin-left: .833333vmin; border-radius: .833333vmin; }

.giftcard-operation { position: relative; padding: 1.0714em 1.4286em 0; }
.giftcard-operation .inner { padding: 0 1.111111vmin 2.777778vmin; border-bottom: .277778vmin solid #e6e6e6; position: relative; }
.giftcard-operation .btn-wrap { padding: 2.777778vmin 0; text-align: center; }
.giftcard-operation .btn-wrap .btn-default { color: #252525; font-size: 1.071em; font-weight: 500; background: #e3e3e3; width: 100%; padding: 0.666em 0; box-shadow: none; line-height: 1; }
.giftcard-operation .guide { font-size:1em; line-height: 1.2; padding: 0.5em 0 0.35712em; color: #9c9c9c; font-weight: 400; word-break: break-word; word-spacing: -1px; }
.giftcard-operation .btn-more { position: absolute; top: 0; right: 0.2668em; font-size: 1.071em; color: #898989; display: flex; align-items: center; }
.giftcard-operation .btn-more::after { content: ''; width: 2.222222vmin; height: 2.777778vmin; background: url('../img/icon_giftcard.png') no-repeat .277778vmin -11.111111vmin; background-size: 11.111111vmin; margin-left: .833333vmin; }

.giftcard-info { padding: 1.0714em 1.4286em 2.2857em; }
.giftcard-info .inner { padding: 0 0.2857em; }
.giftcard-info .giftcard-defined { margin-top: 0.2857em; }
.giftcard-info .guide { font-size: 0.8rem; line-height: 1.2; padding:  0.5em 0 0.35712em; color: #9c9c9c; font-weight: 400; word-break: break-word; word-spacing: -1px; }

.giftcard-redeem { padding: 4.166667vmin 6.666667vmin; background: #fafafa; }
.giftcard-redeem .tit { position: relative; color: #858585; font-size: 3.888889vmin; margin-bottom: 3.888889vmin; font-weight: 500; }
.giftcard-redeem .tit::after { z-index: 0; content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: .416667vmin; background-image: linear-gradient(to right, #979797 0%, #979797 16%, transparent 16%); background-position: 0 0; background-size: 1.388889vmin .416667vmin; background-repeat: repeat-x; }
.giftcard-redeem .tit span { background: #fafafa; position: relative; z-index: 1; padding-right: 3.333333vmin; }
.giftcard-redeem .desc { color: #555; font-size: 4.166667vmin; line-height: 5vmin; margin-bottom: 4.166667vmin; font-weight: 400; word-break: break-word; }

.giftcard-cs { padding: 5.555556vmin 6.666667vmin; background: #fafafa; }
.giftcard-cs .cs .defined { display: flex; width: 100%; flex-wrap: wrap; font-weight: 400; }
.giftcard-cs .cs .defined dt { width: 21.666667vmin; color: #8f8f8f; font-size: 3.888889vmin; padding-top: .277778vmin; }
.giftcard-cs .cs .defined dd { width: calc(100% - 21.666667vmin); font-size: 3.888889vmin; color: #8f8f8f; display: flex; align-items: center; padding-top: .277778vmin; text-decoration: underline; }

.giftcard-btn { position: fixed; bottom: 0; left: 0; right: 0; background: #f9f9f9; display: flex; z-index: 20; }
.giftcard-btn .btn { padding: 4.30556vmin 6.66667vmin; font-size: 5vmin; font-weight: bold; color: #4897E1; text-align: center; line-height: 6.94445vmin; border: 0; background: none; outline: 0; width: 100%; display: block; cursor: pointer; }

.giftcard-card { position: relative; padding-top: 25.833333vmin; }
.giftcard-card .card-img { display: flex; flex-direction: column; align-items: center; }
.giftcard-card .card-img .card-thumb { width: 100%; max-width: 59.166667vmin; border-radius: 2.222222vmin; }
.giftcard-card .card-img .card-name { font-size: 4.722222vmin; color: #252525; margin-top: 3.333333vmin; text-align: center; font-weight: 500; }
.giftcard-card .card-img .card-info { text-align: center; font-size: 3.888889vmin; color: #747474; font-weight: 400; margin-top: .833333vmin; }
.giftcard-card .card-img .card-info span { color: #3957ac; }
.giftcard-card .card-loading { position: absolute; top: 6.388889vmin; left: 50%; width: 12.222222vmin; height: 12.222222vmin; animation: rotation .8s infinite linear; -webkit-animation: rotation .8s infinite linear; border-radius: 100%; border-left: 0.555556vmin solid transparent; border-right: 0.555556vmin solid transparent; border-bottom: 0.555556vmin solid rgba(6,180,133,1); border-top: 0.555556vmin solid rgba(0,140,255,1); margin-left: -6.111111vmin; }
.giftcard-card .check-box {position: absolute; top:0; left: 50%; margin-left: -12.9166667vmin; width: 25.8333333vmin; height: 25.8333333vmin; background: url(../img/pay_complete_check.png) no-repeat 50% 50%; background-size: 25.8333333vw 25.8333333vw;}

/* webview cont-height [s] */
#state .giftcard-cardinfo {min-height:100vh;}
/* webview cont-height [e] */

.actionbar { display: flex; height: 15.555556vmin; align-items: center; padding: 0 6.666667vmin; }
.actionbar .tit { font-size: 5.277778vmin; color: #252525; font-weight: 300; margin-right: auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.actionbar .gift-store { font-size: 5.277778vmin; color: #252525; font-weight: 500; margin-left: auto; white-space: nowrap; }
.actionbar .btn-back { width: 10vmin; height: 10vmin; min-width: 10vmin; background: transparent; border: 0; font-size: 0; display: flex; align-items: center; justify-content: center; margin: .277778vmin 1.666667vmin 0 -2.777778vmin; }
.actionbar .btn-back::before { content: ''; width: 6.666667vmin; height: 6.666667vmin; background: url(../img/ic-back.png) no-repeat 50% -4.444444vmin; background-size: 2.777778vmin 10vmin; }
.actionbar .btn-more { width: 10vmin; height: 10vmin; min-width: 10vmin; background: transparent; border: 0; font-size: 0; display: flex; align-items: center; justify-content: center; margin-right: -2.777778vmin; }
.actionbar .btn-more::before { content: '\2807'; font-size: 6.666667vmin; width: 3.333333vmin; height: 9.444444vmin; color: #252525; }

/* SMCS-7429, Progress bar */
.progress { display: flex; height: 7.777778vmin; margin-top: 1.388889vmin; align-items: center; }
.progress .progress-bar { display: flex; flex: 1; position: relative; background: #f0f0f0; border-radius: 3.888889vmin; height: 7.777778vmin; overflow: hidden; margin-right: 1.111111vmin; }
.progress .progress-bar .progress-per { position: absolute; top: 0; left:0; bottom: 0; background: #0091f5; overflow: hidden; }
.progress .btn-progress { width: 7.777778vmin; height: 7.777778vmin; background-color: #f0f0f0; background-size: 5.555556vmin; background-repeat: no-repeat; background-position: 50% 50%; border: 0; border-radius: 3.888889vmin; display: flex; align-items: center; justify-content: center; font-size: 0; overflow: hidden; white-space: nowrap; text-indent: -10em; }
.progress .btn-progress.cancel { background-image: url("../img/bg-download-cancel.png"); }
.progress .btn-progress.continue { background-image: url("../img/bg-download-continue.png"); }
.progress .btn-progress.pause { background-image: url("../img/bg-download-pause.png"); }
.progress .btn-progress.dimmed { opacity: .35; pointer-events: none; }

.apps-download .list .app-box:only-child .progress-bar,
.progress.thin .progress-bar { height: 0.833333vmin; }

.apps-download .list .app-box:only-child .progress-bar .progress-per,
.progress.thin .progress-bar .progress-per { height: 0.833333vmin; border-top-right-radius: 3.888889vmin; border-bottom-right-radius: 3.888889vmin; } 

.apps-download .list .app-box:only-child .progress.this .btn-progress,
.progress.thin .btn-progress { margin-left: 1.944444vmin; }
.progress.thin .progress-bar.installing .progress-per::before { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 100%; background-image: repeating-linear-gradient(90deg, #e6e6e6, #e6e6e6 1.5%, #0091f5 1.5%, #0091f5 17%); background-position: right; background-size: 200% 100%; animation: installing 1s linear infinite; }

/* [SMCS-8411] Toggle Switch add */
.toggle-switch { padding: 4.444444vmin 6.666667vmin; display: flex; align-items: center; justify-content: space-between; }
.toggle-switch-label input[type="checkbox"] { display: none; visibility: hidden; }
.toggle-switch-label { -webkit-tap-highlight-color: transparent; }
.toggle-switch .toggle-switch-txt { color: #252525; font-size: 4.444444vmin; padding-right: 4.166667vmin; }
.toggle-switch-label .switch { display: inline-block; border-radius: 2.777778vmin; width: 10.277778vmin; height: 5.555556vmin; background-color: #d8d8d8; position: relative; box-sizing: border-box; vertical-align: top; cursor: pointer; }
.toggle-switch-label .switch:before { content: ""; display: block; width: 6.666667vmin; height: 6.666667vmin; background-color: #fff; border: .277778vmin solid rgba(0,0,0,.3); border-radius: 50%; margin-top: -3.333333vmin; position: absolute;top: 50%; left: -.555556vmin; box-sizing: border-box; margin-right: 0; transition: all .3s; }
.toggle-switch-label .switch:active:before { box-shadow: 0 .277778vmin .833333vmin rgba(0, 0, 0, .1), 0 0 0 1.111111vmin rgba(0, 145, 245, .2); transition: all, .1s; }
.toggle-switch-label input[type="checkbox"]:checked + .switch { background-color: #0091f5; }
.toggle-switch-label input[type="checkbox"]:checked + .switch:before { left: 100%; margin-left: -6.388889vmin; background-color: #fff; border: .277778vmin solid rgba(3, 129, 254, 1); }

/* SMCS-8999, Quiz */
.quiz { padding: 5.555556vmin 6.666667vmin; }
.quiz .title { text-align: center; font-family: SamsungSharpSans; font-weight: bold; color: #252525; font-size: 5.277778vmin; padding: 5.555556vmin 0; }
.quiz .step-progress { display: flex; margin: 0 -4.444444vmin 5.555556vmin -4.444444vmin; position: relative; overflow: hidden; }
.quiz .step-progress li { display: flex; flex: 1; justify-content: center; position: relative; }
.quiz .step-progress li span { text-align: center; width: 7.777778vmin; height: 7.777778vmin; border: .416667vmin solid #e3e3e3; font-size: 3.888889vmin; color: #e3e3e3; border-radius: 50%; background: #fff; line-height: 6.111111vmin; font-weight: bold; display: block; }
.quiz .step-progress li:after { content: ''; position: absolute; width: calc( 100% - 8.888889vmin ); height: .277778vmin; background: #e3e3e3; top: 50%; left: calc( -50% + 4.444444vmin ); z-index: -1; margin-top: -.138889vmin; box-shadow: 0 .083333vmin 0 .083333vmin #e3e3e3; }
.quiz .step-progress li:first-child:after { content: none; }
.quiz .step-progress li.active span{ border-color: #505050; color: #555; }
.quiz .step-progress li.active:after{ background: #505050; box-shadow: 0 .083333vmin 0 .083333vmin #505050; }
.quiz .step-progress li.active.success span { background: url(../img/quiz_step.png) no-repeat 0 0; background-size: 16.388889vmin 16.666667vmin; border: 0; font-size: 0; color: transparent; }
.quiz .step-progress li.active.wrong span { background: url(../img/quiz_step.png) no-repeat 0 -8.888889vmin; background-size: 16.388889vmin 16.666667vmin; border: 0; font-size: 0; color: transparent; }
.quiz .question { font-size: 6.111111vmin; line-height: 6.944444vmin; font-weight: bold; color: #252525; text-align: center; word-break: keep-all; padding-bottom: 8.333333vmin; }
.quiz .guide { font-size: 3.888889vmin; color: #747474; text-align: center; white-space: nowrap; display: flex; justify-content: center; font-weight: normal; padding-top: 1.388889vmin; }
.quiz .choice .choice-list li { margin-top: 2.777778vmin; display: flex; position: relative; }
.quiz .choice .choice-list li:first-child { margin-top: 0; }
.quiz .choice .choice-list label { flex: 1; text-align: left; padding: 3.611111vmin 6.666667vmin; background: #fff; border-radius: 6.666667vmax; border: .277778vmin solid transparent; font-size: 4.166667vmin; box-sizing: border-box; outline: 0; }
.quiz .choice .choice-list input[type="radio"] { position: absolute; width: 100%; height: 100%; opacity: 0; }
.quiz .choice .choice-list input[type="radio"]:checked + label { border-color: #3970f3; color: #3970f3; transition: border-color .5s ease, color .5s ease; text-shadow: .0694444vmin 0 .0277778vmin, -.0694444vmin 0 .0277778vmin; }
.quiz .hint { display: flex; align-items: center; justify-content: center; padding-top: 5vmin; font-size: 3.888889vmin; color: #505050; word-break: keep-all; }
.quiz .hint .hint-label { text-align: center; color: #252525; font-size: 3.888889vmin; padding-right: 2.222222vmin; margin-right: 2.222222vmin; position: relative; font-weight: bold; }
.quiz .hint .hint-label:before { content: ''; width: .277778vmin; height: 3.333333vmin; background: #e6e6e6; position: absolute; top: 50%; right: 0; margin-top: -1.666667vmin; }
.quiz .btn-wrap { padding-top: 8.333333vmin; text-align: center; }
.quiz .btn-wrap .btn-default,
.quiz .btn-wrap .btn-default:disabled { font-weight: 500; background: rgba(0,0,0,.06); color: #252525; margin-top: 2.222222vmin; transition: background .5s ease, color .5s ease; box-shadow: none; }
.quiz .btn-wrap .btn-default.active { background: #3970f3; color: #fafafa; }
.quiz .btn-wrap .btn-default:first-child,
.quiz .btn-wrap .btn-default:only-child { margin-top: 0; }
.quiz .summary { margin: 11.111111vmin 0 3.333333vmin; padding-top: 2.222222vmin; border-top: .277778vmin solid #e6e6e6; }
.quiz .summary dl { display: grid; grid-template-columns: max-content auto; }
.quiz .summary dt { grid-column-start: 1; font-weight: bold; font-size: 3.888889vmin; padding: 4.444444vmin 4.444444vmin 0 0; color: #505050; min-width: 23.888889vmin; }
.quiz .summary dd { grid-column-start: 2; font-size: 3.888889vmin; padding-top: 4.444444vmin; color: #505050; }
.quiz .ox .ox-list { display: flex; justify-content: center; }
.quiz .ox .ox-list li { position: relative; margin: 0 2.222222vmin; }
.quiz .ox .ox-list li input[type="radio"] { position: absolute; width: 100%; height: 100%; opacity: 0; }
.quiz .ox .ox-list li label { width: 40.833333vmin; height: 41.666667vmin; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 6.111111vmin; border: 1px solid transparent; transition: border .2s ease; }
.quiz .ox .ox-list li label:before { content: ''; background: url(../img/quiz_ox.png) no-repeat 0 0; background-size: 35.555556vmin 40vmin; }
.quiz .ox .ox-list li label.o-label:before { width: 19.444444vmin; height: 19.722222vmin; }
.quiz .ox .ox-list li label.x-label:before { width: 15.277778vmin; height: 15.277778vmin; background-position: -20.277778vmin 0; }
.quiz .ox .ox-list li input[type="radio"]:checked + label.o-label:before { background-position: 0 -20.277778vmin; }
.quiz .ox .ox-list li input[type="radio"]:checked + label.x-label:before { background-position: -20.277778vmin -16.111111vmin; }
.quiz .hint-txt .stit { font-size: 3.333333vmin; color: #000; padding-bottom: 3.333333vmin; }
.quiz .hint-txt .hint-ipt { background: #f4f4f7; border-radius: 1.666667vmin; border: 0; width: 100%; padding: 2.222222vmin; font-size: 5vmin; color: #4897e1; }
.quiz .hint-txt .hint-ipt::-webkit-input-placeholder,
.quiz .hint-txt .hint-ipt::placeholder { font-size: 5vmin; color: #8f8f8f; }
.quiz .result { padding: 11.111111vmin 0 0; }
.quiz .result .tit { text-align: center; color: #4897e1; font-size: 5vmin; padding-bottom: 1.388889vmin; }
.quiz .result .reward { text-align: center; }
.quiz .result .reward .gift { height: 29.166667vmin; padding-top: 4.166667vmin; background: url(../img/bg_quiz_win.png) no-repeat 50% 50%; background-size: 70vmin auto; }
.quiz .result .reward .gift img { width: 32.222222vmin; height: 23.333333vmin; }
.quiz .result .reward .prod { font-size: 4.166667vmin; color: #4897e1; font-weight: bold; padding-top: 3.888889vmin; }
.quiz .result .reward .help { font-size: 3.611111vmin; line-height: 4.166667vmin; color: #8b8b8b; padding-top: 1.388889vmin; }
.quiz .result .reward .date { font-size: 3.611111vmin; color: #505050; padding-top: 1.388889vmin; }
.quiz .result .reward .btn-wrap { padding-top: 4.166667vmin; } 
.quiz-popup { padding-top: 16px; }
.quiz-popup .gift { text-align: center; }
.quiz-popup .gift img { width: 90px; }
.quiz-popup .txt { text-align: center; padding-top: 12px; font-size: 20px; color: #252525; font-weight: bold; }
.quiz-popup .stxt { text-align: center; padding-top: 5px; font-size: 13px; color: #8b8b8b; }

/* SMCS-7429, Progress bar */
.progress { display: flex; height: 7.777778vmin; margin-top: 1.388889vmin; align-items: center; }
.progress .progress-bar { display: flex; flex: 1; position: relative; background: #f0f0f0; border-radius: 3.888889vmin; height: 7.777778vmin; overflow: hidden; margin-right: 1.111111vmin; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); }
.progress .progress-bar .progress-per { position: absolute; top: 0; left:0; bottom: 0; background: #0091f5; overflow: hidden; }
.progress .btn-progress { width: 7.777778vmin; height: 7.777778vmin; background-color: #f0f0f0; background-size: 5.555556vmin; background-repeat: no-repeat; background-position: 50% 50%; border: 0; border-radius: 3.888889vmin; display: flex; align-items: center; justify-content: center; font-size: 0; overflow: hidden; white-space: nowrap; text-indent: -10em; }
.progress .btn-progress.cancel { background-image: url("../img/bg-download-cancel.png"); }
.progress .btn-progress.continue { background-image: url("../img/bg-download-continue.png"); }
.progress .btn-progress.pause { background-image: url("../img/bg-download-pause.png"); }
.progress .btn-progress.dimmed { opacity: .35; pointer-events: none; }

.apps-download .list .app-box:only-child .progress-bar,
.progress.thin .progress-bar { height: 0.833333vmin; }

.apps-download .list .app-box:only-child .progress-bar .progress-per,
.progress.thin .progress-bar .progress-per { height: 0.833333vmin; border-top-right-radius: 3.888889vmin; border-bottom-right-radius: 3.888889vmin; } 

.apps-download .list .app-box:only-child .progress.this .btn-progress,
.progress.thin .btn-progress { margin-left: 1.944444vmin; }
.progress.thin .progress-bar.installing .progress-per::before { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 100%; background-image: repeating-linear-gradient(90deg, #e6e6e6, #e6e6e6 1.5%, #0091f5 1.5%, #0091f5 17%); background-position: right; background-size: 200% 100%; animation: installing 1s linear infinite; border-radius: 3.888889vmin; }

@keyframes installing {
    0% {
        background-position: right;
        transform: translateX(0) scaleX(1);
    }
    50% {
        transform: translateX(0) scaleX(.6);
    }
    75% {
        transform: translateX(0) scaleX(1);
    }
    99.99% {
        background-position: left;
        transform: translateX(0) scaleX(1);
    }
    100% {
        background-position: right;
        transform: translateX(0) scaleX(.7);
    }
}

/* [SMCS-11055] 리워드 선택 팝업 */
.multi-winning-txt { margin: -24px 0 18px; color: #252525; font-size: 1.25rem; line-height: 1.3; letter-spacing: -1px; }
.multi-winning-reward .list .chk { display: flex; align-items: center; -webkit-tap-highlight-color: transparent; position: relative; height: 56px; }
.multi-winning-reward .list .chk input[type="checkbox"] { display: none; visibility: hidden; }
.multi-winning-reward .list .chk .switch { content: ''; width: 20px; height: 20px; background-color: #fff; border: 1px solid rgba(0,0,0,.3); border-radius: 50%; box-sizing: border-box; margin-right: 0; display: flex; align-items: center; justify-content: center; margin-right: 18px; }
.multi-winning-reward .list .chk .switch:before { content: ''; width: 12px; height: 12px; background: #4897e1; border-radius: 50%; transition: all .2s cubic-bezier(0.42, 0, 0, 1.43); transform: scale(0); }
.multi-winning-reward .list .chk input[type="radio"]:checked + .switch { border-color: #4897e1; transition: all .2s linear; }
.multi-winning-reward .list .chk input[type="radio"]:checked + .switch:before { transform: scale(1); }
.multi-winning-reward .list .chk .img { width: 46px; height: 46px; margin-right: 12px; }
.multi-winning-reward .list .chk .img img { width: 100%; height: 100%; }
.multi-winning-reward .list .chk .txt { font-size: 1.125rem; color: #252525; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.multi-winning-reward:only-child { margin-top: -10px; }
.multi-winning-reward .list .chk[disabled] { opacity: .3; }

/* [SMCS-11019] 수신 거부 프로세스 수립 */
.email-footer { background-color: #f4f4f4; padding: 26px 10px; position: relative; }
.email-footer .email-footer-inner { border-bottom: 1px solid #d8d8d8; padding: 0 8px 10px 8px; }
.email-footer .email-footer-inner > p { font-size: .875rem; color: #666; padding-bottom: 25px; }
.email-footer .link { color: #666; text-decoration: underline; font-weight: bold; }
.email-footer .email-footer-copyright { padding: 33px 0 18px; text-align: center; }
.email-footer .email-footer-copyright > p { font-size: .75rem; color: #666; padding-bottom: 2px; }

/* [SMCS-13434] Health Pass Demo Component */
.health .health-dimmed { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; opacity: .35; }
.health .health-inner { overflow: hidden; position: absolute; z-index: 1050; top: 0; left: 0; right: 0; }
.health .health-content { padding: 60px 30px 35px; background: #0063ec; }
.health .health-head { display: flex; align-items: center; padding: 15px 0; }
.health .health-head .logo > img { height: 38px; }
.health .health-head .expires { margin-left: auto; font-size: 1.25rem; color: #fff; position: relative; }
.health .health-head .expires > span { position: absolute; top: -18px; left: 0; right: 0; text-align: right; color: #bed6fa; font-size: .75rem; }
.health .health-check { padding: 24px 0; }
.health .health-check .round { background: #094acb; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; }
.health .health-check .txt { color: #feffff; font-weight: bold; font-size: 1.625rem; margin-top: -2px; white-space: nowrap; width: calc(100% - 100px); overflow: hidden; text-overflow: ellipsis; text-align: center; }
.health .health-check .chk { position: relative; margin-left: 20px; }
.health .health-check .chk input[type="checkbox"] { position: absolute; }
.health .health-check .chk label { width: 30px; height: 30px; display: block; background: #fff; border-radius: 50%; position: relative; }
.health .health-check .chk input[type="checkbox"]:checked + label:before { position: absolute; top: 50%; left: 50%; border-bottom-style: solid; border-bottom-width: 3px; border-right-style: solid; border-right-width: 3px; border-color: #094acb; content: ''; display: inline-block; height: 11px; width: 6px; transform: rotate(45deg); margin: -8px 0 0 -4px; }
.health .health-info .info-list { display: flex; flex-wrap: wrap; padding-top: 22px; margin-right: -25px; }
.health .health-info .info-list > li { flex: 0 0 33.333333%; margin-bottom: 40px; }
.health .health-info .info-list h4 { color: #bed6fa; font-size: .75rem; font-weight: normal; padding-bottom: 12px; }
.health .health-info .info-list .txt { color: #fff; font-size: .938rem; font-weight: 500; }
.health .health-qrcode { border-top: 1px solid #005ad8; margin: -10px -30px -5px; padding-top: 30px; display: flex; align-items: center; justify-content: center; }
.health .health-qrcode .box { width: 210px; height: 210px; background: #fff; box-sizing: border-box; padding: 15px; border-radius: 10px; }
.health .health-qrcode .box > img { max-width: 100%; }
.health .health-btn { border-top: 1px solid #005dde; background: #005ad8; height: 80px; overflow: hidden; display: flex; border-bottom-right-radius: 35px; border-bottom-left-radius: 35px; }
.health .health-btn > button { flex: 1; height: 100%; border: 0; background: transparent; color: #fff; font-weight: bold; font-size: 1.125rem; }
.health .health-btn > button:active { box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !important; }

/* [SMCS-12856] 프로모션 리스트 퍼블리싱 */
.promotion-list-header { display: flex; height: 56px; align-items: center; padding: 0 20px; position: relative; }
.promotion-list-header .tit { color: #252525; font-size: 1.188rem; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-left: 12px; border: 0; padding: 0; }
.promotion-list-header .btn-back { cursor: pointer; outline: none; border: 0; background-color: transparent; position: relative; min-width: 24px; height: 24px; padding: 0; }
.promotion-list-header .btn-back:before { position: absolute; top: 50%; left: 50%; border-bottom-style: solid; border-bottom-width: 2px; border-right-style: solid; border-right-width: 2px; border-color: #323232; content: ''; display: inline-block; height: 11px; width: 11px; transform: rotate(135deg); margin: -6px 0 0 -4px; border-radius: 2px; }
.promotion-list-header .mypage { margin-left: auto; white-space: nowrap; color: #252525; font-size: 18px; font-weight: 500; padding-right: 4px; }
.promotion-list-tabs { padding-top: 20px; }
.promotion-list-tabs .tabs { margin: 0 24px; display: flex; position: relative; }
.promotion-list-tabs .tabs:after { content: ''; position: absolute; left: 0; bottom: 0; width: 50%; height: 2px; background: #252525; transition: all .2s ease; }
.promotion-list-tabs .tabs.active:after { left: 50%; }
.promotion-list-tabs .tabs .item { flex: 1; max-width: 50%; }
.promotion-list-tabs .tabs .link { position: relative; display: block; text-align: center; font-size: .938rem; font-weight: 400; color: rgba(118,118,118,.8); padding: 11px 0 8px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: color .2s ease; }
.promotion-list-tabs .tabs .active .link { color: #252525; font-weight: 500; }
.promotion-list-tabs .tabs .link:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1px; background: rgba(0,0,0,.08); }
.promotion-list-thumb { overflow: hidden; }
.promotion-list-thumb .thumb-list-wrap { display: flex; transition: transform .2s ease; }
.promotion-list-thumb.active .thumb-list-wrap { transform: translateX(-100%); }
.promotion-list-thumb .thumb-list { min-width: 100%; padding: 0 10px 20px 10px; }
.promotion-list-thumb .thumb-list > li { margin-top: 16px; }
.promotion-list-thumb .thumb-list > li:first-child { margin-top: 12px; }
.promotion-list-thumb .thumb-img { overflow: hidden; border-top-left-radius: 22px; border-top-right-radius: 22px; min-height: 47.222222vmin; background: #edf2f8; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.promotion-list-thumb .thumb-img > img { max-width: 100%; flex-grow: 1; }
.promotion-list-thumb .thumb-img > img.nocontent { display: block; width: 120px; margin-top: 20px; flex-grow: 0; }
.promotion-list-thumb .thumb-inner { overflow: hidden; }
.promotion-list-thumb .thumb-info { background: #fff; min-height: 58px; box-sizing: border-box; border: 1px solid rgba(219,219,219,.3); border-top: 0; padding: 12px 14px; border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }
.promotion-list-thumb .thumb-info .name { margin-bottom: 4px; font-size: .875rem; line-height: 1rem; color: #252525; font-weight: 600; display: flex; }
.promotion-list-thumb .thumb-info .subject { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.promotion-list-thumb .thumb-info .date { font-size: .75rem; color: #8f8f8f; font-weight: 300; line-height: .875rem; }
.promotion-list-thumb .thumb-info .badge { font-size: .625rem; color: #fff; padding: 1px 6px; background: #f56a0d; border-radius: 8px; display: flex; align-items: center; height: 15px; justify-content: center; margin-right: 5px; white-space: nowrap; min-width: 38px; }
.promotion-list-thumb .thumb-info .badge.close { background: #9198a2; }
.promotion-list-thumb .thumb-info .point { font-size: .875rem; color: #3970f3; padding: 2px 3px 0; background: #f0f0f0; display: flex; align-items: center; justify-content: center; margin: -2px 0 0 auto; height: 18px; white-space: nowrap; }
.promotion-list-redeem { margin-top: 8px; background: #e6e6e6; display: flex; align-items: center; padding: 0 24px; height: 45px; }
.promotion-list-redeem .tit { font-size: .875rem; color: #252525; font-weight: 400; }
.promotion-list-redeem .point { font-size: .875rem; color: #3970F3; font-weight: 400; margin-left: auto; } 
@keyframes content-placeholder-animation { 0% { transform: translateX(-50%); } 100% { transform: translateX(300%); } }
.content-placeholder:before { content: ''; animation: content-placeholder-animation 1s linear infinite; background: -webkit-linear-gradient(left, rgba(15, 15, 15, 0) 0%, rgba(219, 219, 219, 0.4) 50%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, rgba(15, 15, 15, 0) 0%, rgba(219, 219, 219, 0.4) 50%, rgba(255, 255, 255, 0) 100%); display: block; height: inherit; left: 0; position: absolute; top: 0; width: 70%; will-change: transform; }
.content-placeholder { background-color: #ebebeb; display: block; height: .938rem; overflow: hidden; position: relative; border-radius: 6px; width: 100%; }
.content-placeholder.small { width: 60%; }

/* [SMCS-12010] 동영상 팝업 콤포넌트 추가 */
.video { position: relative; }

.video .video-bg { width: 100%; }
.video-inner { display: flex; padding: 0 10px; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
.video .item { width: 50%; text-align: center; padding: 0 15px; }
.video .thumb { position: relative; overflow: hidden; }
.video .thumb-img { width: 100%; }

.video.bg { background-size: 100%; background-repeat: repeat-y; background-position: 0 0; padding-top: 20px; } 
.video.bg .video-inner { flex-wrap: wrap; position: static; transform: none; }
.video.bg .item { padding: 0 15px 20px 15px; }

.video-popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; height: 100%; }
.video-dimmed { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); }
.video-dialog { width: 100%; position: relative; z-index: 10; max-width: 1080px; }
.video-cont { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-cont .video-ifrm { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-popup .close { position: absolute; top: -22px; right: 10px; width: 15px; height: 15px; border: 0; background: 0; }
.video-popup .close-img { width: 100%; height: 100%; vertical-align: top; }

.body-overflow { overflow: hidden; }

/* [SMCS-12886] MPI */ 
.mpi-dimmed { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; opacity: .35; }
.mpi-bottom-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; padding: 20px 24px 15px; z-index: 1050; flex-direction: column; display: flex; justify-content: center; min-height: 300px; }
.mpi-bottom-sheet .mpi-column { display: flex; flex-direction: column; align-items: center; }
.mpi-bottom-sheet .btn-primary { display: inline-block; border: 0; height: 40px; padding: 8px 9px; border-radius: 20px; font-size: .938rem; line-height: 1.25rem; background-color: #3970F3; color: #fafafa; min-width: 208px; font-weight: 500; }
.mpi-bottom-sheet .install { text-align: center; }
.mpi-bottom-sheet.failed .install { padding-top: 15px; }
.mpi-bottom-sheet .lead { padding-top: 21px; font-size: .813rem; line-height: .938rem; color: #7f7f7f; word-break: break-word; }
.mpi-bottom-sheet .link { display: inline-block; font-size: .813rem; line-height: .938rem; color: #3b3b3b; font-weight: 500; text-decoration: underline; margin-top: 8px; }
.mpi-bottom-sheet .return { text-align: center; padding-top: 40px; }
.mpi-bottom-sheet .btn-return { display: block; border: 1px solid rgba(207,207,207,.75); height: 40px; padding: 8px 9px; border-radius: 20px; font-size: .938rem; line-height: 1.25rem; background-color: #fafafa; color: #7c7c7c; min-width: 208px; font-weight: 500; }
.mpi-bottom-sheet .change { text-align: center; padding: 20px 0 2px; }
.mpi-bottom-sheet .change-region { color: #7f7f7f; font-size: .813rem; }
.mpi-bottom-sheet .change-region:after { content: ''; border-bottom-style: solid; border-bottom-width: 2px; border-right-style: solid; border-right-width: 2px; border-color: #858585; display: inline-block; height: 6px; width: 6px; margin-left: 3px; transform: rotate(-45deg); border-radius: 2px; }
.mpi-logo { position: fixed; top: 31px; left: 23px; z-index: 1050; }
.mpi-logo .logo { width: 118px; height: 20px; display: block; margin-bottom: 8px; background: url(../img/img_pay_logo_white.png) no-repeat 0 50%; background-size: contain; font-size: 0; color: transparent; }
.mpi-logo .txt { color: #fff; font-size: .875rem; line-height: 1rem; font-weight: 500; }
.mpi-bottom-sheet .cancel { padding-top: 55px; }
.mpi-bottom-sheet .btn-cancel { display: inline-block; border: 0; height: 40px; padding: 8px 9px; border-radius: 20px; font-size: .938rem; line-height: 1.25rem; background-color: rgba(0,0,0,.06); color: #252525; min-width: 208px; font-weight: 500; }

/* [SMCS-12886] MPI - landscape */
@media (orientation: landscape) {
	.mpi-bottom-sheet { padding: 20px 28px 15px; max-width: 360px; left: 50%; margin-left: -180px; height: 100%; }
	.mpi-bottom-sheet.failed { padding: 20px 28px 40px; }
	.mpi-bottom-sheet.failed .install { padding-top: 26px; }
	.mpi-logo { position: static; padding-bottom: 24px; }
	.mpi-logo .logo { background: url(../img/img_pay_logo_black.png) no-repeat 0 50%; background-size: contain; margin-bottom: 4px; }
	.mpi-logo .txt { color: #323232; font-size: .875rem; line-height: 1rem; font-weight: 500; }
	.mpi-logo .txt br { display: none; }
}

/* [SMCS-12886] MPI - breakpoint(bottom sheet width) */
@media (min-width: 480px) {  
	.mpi-bottom-sheet { width: 63%; left: 50%; margin-left: -31.5%; }
	@media (orientation: landscape) {
		.mpi-bottom-sheet { max-width: none; }	
	}
}
@media (min-width: 673px) {  
	.mpi-bottom-sheet { width: 55%; left: 50%; margin-left: -27.5%; }
	@media (orientation: landscape) {
		.mpi-bottom-sheet { max-width: none; }	
	}
}

/* [SMCS-13531] Tips Template Detail */
.tips-actionbar { display: flex; height: 56px; align-items: center; padding: 0 20px; position: relative; }
.tips-actionbar .tit { color: #252525; font-size: 1.188rem; line-height: 1.438rem; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: -1px 0 0 10px; border: 0; padding: 0; }
.tips-actionbar .btn-back { cursor: pointer; outline: none; border: 0; background-color: transparent; position: relative; min-width: 24px; height: 24px; padding: 0; }
.tips-actionbar .btn-back:before { position: absolute; top: 50%; left: 50%; border-bottom-style: solid; border-bottom-width: 2px; border-right-style: solid; border-right-width: 2px; border-color: #404040; content: ''; display: inline-block; height: 12px; width: 12px; transform: rotate(135deg); margin: -7px 0 0 -4px; border-radius: 2px; }

.tips-actionbar .btn-menu { cursor: pointer; outline: none; border: 0; background-color: transparent; position: relative; min-width: 24px; height: 24px; padding: 0; margin-left: auto; }
.tips-actionbar .btn-menu svg { vertical-align: top; }
.tips-actionbar .btn-menu svg > circle { fill: #404040; }

.tips-detail { padding-top: 8px; }
.tips-resource { display: flex; align-items: center; justify-content: center; height: 360px; background: #d8d8d8; border-radius: 26px; overflow: hidden; position: relative; }
.tips-resource .resource { font-size: 25px; color: #9b9b9b; background: #d8d8d8; display: flex; align-items: center; justify-content: center; flex: 1; height: 100%; max-width: 360px; }
.tips-content { padding: 14px 24px; }
.tips-content .tit { font-size: 1.188rem; line-height: 1.438rem; color: #252525; padding-bottom: 12px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.tips-content .txt { font-size: 1rem; color: #505050; }
.tips-content .refer { font-size: .813rem; line-height: .938rem; padding-top: 10px; color: #909090; }
.tips-content .btn-setting { padding-top: 23px; text-align: right; }
.tips-content .btn-setting > button { width: 140px; height: 44px; background: rgba(0,0,0,.06); border: 0; border-radius: 22px; font-size: 1.063rem; font-weight: 500; }
.tips-content .btn-setting > button:active { box-shadow: inset 0 3px 5px rgba(0,0,0,.125); }
.tips-dimmed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0 0 0 / 20%); display: flex; align-items: center; justify-content: center; transition: opacity .5s ease; }
.tips-dimmed .tips-play { width: 52px; height: 52px; }

.tips-paging { display: flex; align-items: center; justify-content: center; height: 40px; padding: 4px 0 8px; }
.tips-paging button { cursor: pointer; outline: none; border: 0; background-color: transparent; position: relative; min-width: 22px; height: 22px; padding: 0; color: transparent; font-size: 0; }
.tips-paging button:before { position: absolute; top: 50%; left: 50%; border-bottom-style: solid; border-bottom-width: 2px; border-right-style: solid; border-right-width: 2px; border-color: #909090; content: ''; display: inline-block; height: 11px; width: 11px; transform: rotate(135deg); margin: -6px 0 0 -3px; border-radius: 2px; box-sizing: border-box; }
.tips-paging button.btn-next:before { transform: rotate(-45deg); margin: -6px 0 0 -8px; } 
.tips-paging .num { font-size: 1rem; color: #909090; padding: 0 2px; }

/* Default landscape */
@media (min-width: 360px) and (orientation: landscape) {
	.tips-detail-inner { display: flex; padding: 0 25px; }
	.tips-resource { width: 232px; height: 232px; }
	.tips-resource .resource { max-width: 232px; }
	.tips-content { width: calc(100% - 232px); }
}
/* Fold */
@media (min-width: 535px) and (max-width: 767px) and (max-device-aspect-ratio: 4/3) {
	.tips-content { padding: 20px 24px 0 24px; }
	.tips-content .tit { padding-bottom: 25px; }
	.tips-content .btn-setting { padding-top: 15px; }
	.tips-resource { height: 321px; background: #fbfbfb; }
	.tips-resource .resource { background: rgba(245,166,35,.3); max-width: 321px; }
	.tips-paging { padding: 0 0 16px; margin-top: 60px; }
}
/* Fold landscape */
@media (min-width: 535px) and (max-width: 767px) and (max-device-aspect-ratio: 4/3) and (orientation: landscape) {
	.tips-detail-inner { display: flex; padding: 0 28px; }
	.tips-resource { flex: 0 0 355px; height: 355px; width: auto; background: transparent; }
	.tips-resource .resource { max-width: 355px; background: rgba(245,166,35,.3); }
	.tips-content { padding: 27px 0 0 24px; width: calc(100% - 355px); }
	.tips-content .tit { padding-bottom: 25px; }
	.tips-content .txt { max-height: 115px; overflow-y: auto; }
	.tips-content .btn-setting { padding-top: 40px; display: flex; justify-content: center; }
	.tips-content .btn-setting > button { width: 226px; }
	.tips-paging { padding: 0 0 14px; margin-top: 49px; }
}
/* Tablet, Desktop */
@media (min-width: 768px) and (orientation: portrait) {
	.tips-detail { padding-top: 47px; }
	.tips-content { padding: 61px 64px 0 64px; }
	.tips-content .tit { padding-bottom: 20px; }
	.tips-content .refer { padding-top: 12px; }
	.tips-content .btn-setting { padding-top: 49px; display: flex; justify-content: center; }
	.tips-content .btn-setting > button { width: 350px; }
	.tips-resource { height: 572px; background: #fbfbfb; }
	.tips-resource .resource { background: rgba(245,166,35,.3); max-width: 572px; }
	.tips-paging { padding: 0 0 61px; margin-top: 170px; }
}
/* Tablet, Desktop landscape */
@media (min-width: 768px) and (min-height: 429px) and (orientation: landscape) {
	.tips-detail { padding-top: 8px; }
	.tips-detail-inner { display: flex; padding: 0 46px; }
	.tips-resource { flex: 0 0 572px; height: 572px; background: transparent; }
	.tips-resource .resource { background: rgba(245,166,35,.3); max-width: 572px; }
	.tips-content { padding: 29px 0 0 46px; width: calc(100% - 572px); }
	.tips-content .tit { padding-bottom: 20px; }
	.tips-content .refer { padding-top: 12px; }
	.tips-content .btn-setting { padding-top: 49px; display: flex; justify-content: center; }
	.tips-content .txt { max-height: 375px; overflow-y: auto; }
	.tips-paging { padding: 0 0 14px; margin-top: 49px; }
}

/* [SMCS-13488] Promotion-Loading-spinner */
@keyframes rotation {
    from { transform: rotate(-45deg); }
    to { transform: rotate(675deg); }
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60% { content: '...'; }
    90%, 100% { content: ''; }
}

@keyframes animate-stroke {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        stroke: #3970F3;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -45;
        stroke: #3970F3;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -145;
        stroke: #3970F3;
    }
}

.loading { position: absolute; top: 50%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; margin-top: -26px; z-index: 10; }
.loading .spinner { display: inline-block; width: 50px; height: 50px; animation: rotation 1s infinite cubic-bezier(0.62, 0.42, 0.4, 0.58); border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 3px solid #06B485; border-top: 3px solid #0381FE; border-radius: 100%; }
.loading .txt {font-size: .938rem; line-height: 1.313rem; padding-top: 20px; display: flex; color: #252525; }
.loading .txt:after{ content: ''; min-width: 15px; animation: dots 1.5s linear infinite; margin-left: 1px; }
.loading-dimmed { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); }
.loading .spinner-determinate { margin: 0px auto -5px; width: 55px; height: 55px; }
.loading .spinner-svg { animation: rotation 2s linear infinite; }
.loading .spinner-circle { fill: none; stroke-width: 3px; animation: animate-stroke 1.5s ease-in-out infinite; stroke-linecap: round; }


.loading-promo { position: fixed; top: 0; left: 0; right: 0; display: flex; width:100%; height:100%; flex-direction: column; justify-content: center; align-items: center; margin-top: -26px; z-index: 10; }
.loading-promo .spinner { display: inline-block; width: 50px; height: 50px; animation: rotation 1s infinite cubic-bezier(0.62, 0.42, 0.4, 0.58); border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 3px solid #06B485; border-top: 3px solid #0381FE; border-radius: 100%; }
.loading-promo .txt {font-size: .938rem; line-height: 1.313rem; padding-top: 20px; display: flex; color: #252525; }
.loading-promo .txt:after{ content: ''; min-width: 15px; animation: dots 1.5s linear infinite; margin-left: 1px; }

/* [SMCS-14655] UX 4.0 스피너 변경건 */
.spinner-dots { width: 27px; height: 27px; position: relative; transform: rotate(-43deg); animation: rotation 1s infinite; animation-timing-function: linear; }
.spinner-dots .shape { position: absolute; width: 9px; height: 9px; border-radius: 50%; }
.spinner-dots .shape.shape1 { left: 0; background-color: #00D694; }
.spinner-dots .shape.shape2 { right: 0; background-color: #0381FE; }
.spinner-dots .shape.shape3 { bottom: 0; background-color: #0381FE; }
.spinner-dots .shape.shape4 { bottom: 0; right: 0; background-color: #0381FE; }
.spinner-dots .shape1 {animation: animation2shape1 0.5s linear  0s infinite alternate; }
.spinner-dots .shape2 { animation: animation2shape2 0.5s linear  0s infinite alternate; }
.spinner-dots .shape3 { animation: animation2shape3 0.5s linear  0s infinite alternate; }
.spinner-dots .shape4 { animation: animation2shape4 0.5s linear  0s infinite alternate; }

.spinner-container { height: 27px; display: inline-block; }
.spinner-container.xsmall { height: 10px; transform: scale(.34); }
.spinner-container.small { height: 20px; transform: scale(.7); }
.spinner-container.large { height: 34px; transform: scale(1.25); }
.spinner-container.xlarge { height: 50px; transform: scale(1.88); }

@keyframes rotation {
  from { transform: rotate(-43deg); }
  to { transform: rotate(315deg); }
}		
@keyframes animation2shape1 {
  from { transform: translate(4px, 4px); }
  to { transform: translate(-5px, -5px); }
}
@keyframes animation2shape2 {
  from { transform: translate(-4px, 4px); }
  to { transform: translate(5px, -5px); }
}
@keyframes animation2shape3 {
  from { transform: translate(4px, -4px); }
  to { transform: translate(-5px, 5px); }
}
@keyframes animation2shape4 {
  from { transform: translate(-4px, -4px); }
  to { transform: translate(5px, 5px); }
}

/* skeleton ui */
@-webkit-keyframes shine {
	to {
		background-position: right -40px top 0;
	}
}

@keyframes shine {
	to {
		background-position: right -40px top 0;
	}
}
.skeleton-item {
    background-color: #e2e5e7;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
	background-size: 40px 100%;
	background-repeat: no-repeat;
	background-position: left -40px top 0;
	-webkit-animation: shine 1.3s ease infinite;
    animation: shine 1.3s ease infinite;
}

/* float animation */
.animation-wrap {position:relative;}
.animation-wrap .move-cont {position:absolute; width: 100%; z-index:1;}
.animation-wrap .move-cont img {width:auto;}
.ani-cont {
	width: 200px;
	height: 230px;
	margin: 2% auto;
	background: url('../img/_sample/sample_ani.png') left center;
	animation: play .8s steps(6) infinite;
  }
  
  @keyframes play {
	  100% { background-position: -1200px; }
  }

/* [SMCS-14504]  */
.m_expired {}
.expired-box {position:absolute; z-index:1; opacity:0.7; border-style:solid; border-width:1px;}
.expired-box.txt {width:100%;}
.expired-box.img {opacity: 1;}
.expired-txt {padding:1rem 0.5rem; text-align:center;}

/* [SMCS-14316] Promo wait progress */
.coupon-progressbar { text-align: center; }
.coupon-progressbar .progressbar { position: relative; display: inline-block; border: 0; padding: 0; font-weight: bold; font-size: 4.166667vmin; line-height: 5.55556vmin; color: #fff; min-width: 55.55556vmin; height: auto; border-radius: 5.833333vmin; }
.coupon-progressbar .progressbar span { position: relative; z-index: 5; }
.coupon-progressbar .progressbar .progressbar-line { position: absolute; top: 0; left: 0; bottom: 0; background: #4897e1; z-index: 1; width: var(--per, 50%); }
.coupon-progressbar .progressbar .txt { display: block; padding: 2.222222vmin 2.5vmin; background-color: #999; border-radius: 5.833333vmin; overflow: hidden; height: 100%; }
.coupon-progressbar .progressbar .img { min-width: 55.55556vmin; height: 10vmin; display: block; }
.image-area .coupon-progressbar .progressbar { display: block; }
.image-area .img-btn-area { border: 0; padding: 0; height: auto; }
.image-area .coupon-progressbar .progressbar .img { height: auto; overflow: hidden; position: relative; }
.image-area .coupon-progressbar .progressbar .img .item { clip-path: inset(0 calc( 100% - var(--per,50%) + 1 ) 0 0); }
.image-area .coupon-progressbar .progressbar .img .item.grayscale { filter: grayscale(1); clip-path: inset(0 0 0 var(--per,50%)); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* [SMCS-14588] Wallet app menu */
.wallet-menu .nav { display: flex; height: 56px; align-items: center; padding: 0 20px; position: relative; }
.wallet-menu .nav .tit { color: #252525; font-size: 1.313rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border: 0; padding: 0; }
.wallet-menu .nav .util { position: absolute; top: 15px; right: 15px; display: inline-flex; }
.wallet-menu .nav .util .btn {  width: 24px; height: 24px; text-align: center; display: inline-flex; align-items: center; justify-content: center; margin-left: 5px; padding: 4px; position: relative; }
.wallet-menu .nav .util .btn img { width: 100%; }
.wallet-menu .nav .util .new { position: absolute; top: 1px; right: 3px; width: 12px; height: 12px; background: url(../img/wallet_ic_card_new_badge.png) no-repeat 0 0; background-size: 12px 12px; }
.wallet-menu .nav .btn-add { cursor: pointer; outline: none; border: 0; background-color: transparent; position: relative; min-width: 24px; height: 24px; padding: 0; margin-left: 5px; }
.wallet-menu .nav .btn-add::before { content: ''; position: absolute; top: 50%; left: 5px; background: #333; width: 14px; height: 2px; margin-top: -1px; }
.wallet-menu .nav .btn-add::after { content: ''; position: absolute; top: 50%; left: 5px; background: #333; width: 14px; height: 2px; transform: rotate(90deg); margin-top: -1px; }
.wallet-menu .nav .btn-back { cursor: pointer; outline: none; border: 0; background-color: transparent; position: relative; min-width: 24px; height: 24px; padding: 0; margin-right: 12px; }
.wallet-menu .nav .btn-back:before { position: absolute; top: 50%; left: 50%; border-bottom-style: solid; border-bottom-width: 2px; border-right-style: solid; border-right-width: 2px; border-color: #323232; content: ''; display: inline-block; height: 11px; width: 11px; transform: rotate(135deg); margin: -7px 0 0 -4px; border-radius: 2px; }
.wallet-menu .tab-bottom { display: flex; height: 50px; align-items: center; padding: 0 20px; }
.wallet-menu .tab-bottom .item { flex: 1; color: #888; text-align: center; line-height: 50px; font-size: .813rem; transition: all .3s ease; }
.wallet-menu .tab-bottom .item.active { color: #252525; font-weight: 600; }
.wallet-menu .tab-bottom .item > span { position: relative; }
.wallet-menu .tab-bottom .item > span::before { content: ''; background: #252525; width: 0; height: 1px; position: absolute; left: 50%; bottom: -4px; transition: all .5s ease; transform: translateX(-50%); }
.wallet-menu .tab-bottom .item.active > span::before { width: 100%; }
.wallet-menu .card { height: calc( 100vh - 106px ); display: flex; flex-direction: column; justify-content: center; position: relative; }
.wallet-menu .card .card-type { display: flex; justify-content: end; width: 296px; margin: 0 auto; padding-right: 22px; }
.wallet-menu .card .card-type li { font-size: .75rem; color: #505050; font-weight: 500; padding-left: 30px; position: relative; margin-left: 21px; }
.wallet-menu .card .card-type li.c { background: url(../img/wallet_ic_coupon.png) no-repeat 0 1px; background-size: 22px 14px; }
.wallet-menu .card .card-type li.m { background: url(../img/wallet_ic_membership.png) no-repeat 0 1px; background-size: 22px 14px; }
.wallet-menu .card .card-type li::before { content: ''; position: absolute; top: 50%; left: -10px; width: 1px; height: 7px; background: #c4c4c4; margin-top: -4px; }
.wallet-menu .card .card-type li:first-child::before { content: none; }
.wallet-menu .card .card-list { position: relative; width: 296px; min-height: 185px; margin: 12px auto 0; z-index: 10; }
.wallet-menu .card .card-list .item { position: absolute; left: 0; right: 0; transition: transform .5s ease; }
.wallet-menu .card .card-list .item > img { width: 100%; }
.wallet-menu .card .card-inner { margin-top: -100px; }
.wallet-menu .card .card-pin { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
.wallet-menu .card .card-pin .fingerprint { width: 66px; height: 66px; background: url(../img/wallet_ic_fingerprint.png) no-repeat 0 0; background-size: 100%; }
.wallet-menu .card .card-pin .btn-pin { font-size: .75rem; color: #808080; margin-top: 9px; border-radius: 14px; border: 1px solid rgba(128,128,128,.4); padding: 3px 18px 1px 18px; }
.wallet-menu .menu { padding: 0 10px; margin-bottom: 20px; }
.wallet-menu .menu .my-wallet { background: #fcfcfc; padding: 20px; border-radius: 22px; margin-top: 10px; }
.wallet-menu .menu .my-wallet h3 { font-size: 1.25rem; color: #252525; line-height: 1.625rem; padding-top: 10px; }
.wallet-menu .menu .my-wallet .tit,
.wallet-menu .menu .my-wallet .stit { display: block; }
.wallet-menu .menu .my-wallet h3.small { font-size: 1rem; color: #252525; line-height: 1.5rem; padding: 10px 0; }
.wallet-menu .menu .my-wallet h3 > small { display: block; color: #999; font-size: .813rem; font-weight: 400; padding-top: 3px; }
.wallet-menu .menu .my-wallet-list { display: flex; flex-wrap: wrap; margin: 15px -10px 0; }
.wallet-menu .menu .my-wallet-list li { flex: 0 0 33.33333%; text-align: center; position: relative; padding: 15px 0 0; }
.wallet-menu .menu .my-wallet-list li::before { content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 20px; background: #e6e6e6; margin-top: -10px; }
.wallet-menu .menu .my-wallet-list li:first-child::before,
.wallet-menu .menu .my-wallet-list li:nth-child(3n+4)::before { content: none; }
.wallet-menu .menu .my-wallet-list .tit { display: block; color: #252525; font-size: .813rem; }
.wallet-menu .menu .my-wallet-list .cnt { font-size: 2rem; font-weight: 300; }
.wallet-menu .menu .my-wallet-item a { display: block; position: relative; padding: 10px 0 10px 50px; font-size: .938rem; line-height: 1.375rem; }
.wallet-menu .menu .my-wallet-item .ico { width: 20px; height: 20px; position: absolute; top: 50%; left: 5px; margin-top: -10px; display: flex; align-items: center; justify-content: center; }
.wallet-menu .menu .my-wallet-item .ico img { height: 19px; vertical-align: top; }
.wallet-menu .menu .ad { background: #fcfcfc; padding: 55px 20px 30px; border-radius: 22px; margin-top: 10px; position: relative; }
.wallet-menu .menu .ad .tit { color: #252525; font-size: .938rem; padding-bottom: 5px; }
.wallet-menu .menu .ad .desc { color: #505050; font-size: .875rem; }
.wallet-menu .menu .ad .paging { font-size: .688rem; background-color: #f2f2f2; padding: 2px 10px 1px 10px; border-radius: 10px; position: absolute; top: 20px; left: 20px; }
.wallet-menu .menu .ad .btn-close { cursor: pointer; outline: none; border: 0; background-color: transparent; position: absolute; min-width: 24px; height: 24px; padding: 0; top: 15px; right: 15px; }
.wallet-menu .menu .ad .btn-close::before { content: ''; position: absolute; top: 50%; left: 5px; background: #333; width: 14px; height: 1px; transform: rotate(-45deg); margin-top: -1px; }
.wallet-menu .menu .ad .btn-close::after { content: ''; position: absolute; top: 50%; left: 5px; background: #333; width: 14px; height: 1px; transform: rotate(45deg); margin-top: -1px; }
.wallet-menu .menu .ad .ad-img { position: absolute; right: 15px; top: 50px; width: 80px; height: 40px; }
.wallet-menu .menu .ad .ad-img img { width: 100%; }
.wallet-menu .edit-bottom { display: flex; height: 50px; align-items: center; padding: 0 30px 0 20px; }
.wallet-menu .edit-bottom a { color: #252525; text-align: center; line-height: 50px; font-size: .875rem; padding: 0 20px; margin-left: auto; position: relative; }
.wallet-menu .edit-bottom a::after { position: absolute; top: 50%; right: 10px; border-bottom-style: solid; border-bottom-width: 2px; border-right-style: solid; border-right-width: 2px; border-color: #323232; content: ''; display: inline-block; height: 5px; width: 5px; transform: rotate(-45deg); margin: -4px 0 0 0; }
.wallet-menu .add-list { padding: 0 10px 10px; }
.wallet-menu .add-list > ul { display: flex; flex-wrap: wrap; margin: -10px 0 0 -10px; }
.wallet-menu .add-list > ul > li { flex: 0 0 50%; }
.wallet-menu .add-list > ul > li > a { display: block; background-color: #fcfcfc; margin: 10px 0 0 10px; border-radius: 22px; padding: 24px 20px; min-height: 130px; position: relative; background-repeat: no-repeat; background-position: 20px 24px; background-size: 34px 27px; }
.wallet-menu .add-list > ul > li > a .txt { position: absolute; bottom: 14px; left: 20px; right: 20px; font-size: .875rem; line-height: 1.125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #252525; }
.wallet-menu .add-list > ul > li > a .ico { position: absolute; top: 24px; left: 20px; width: 34px; height: 27px; }
.wallet-menu .add-list > ul > li > a .ico img { width: 100%; }
.wallet-menu .add-list > ul > li > a .desc { color: #909090; font-size: .813rem; }
.wallet-menu .add-list.list > ul > li { flex: 0 0 100%; }
.wallet-menu .add-list.list > ul > li > a { min-height: 112px; padding: 24px 84px 24px 20px; }
.wallet-menu .add-list.list > ul > li > a .txt { position: static; font-size: .938rem; font-weight: 500; padding-bottom: 5px; }
.wallet-menu .add-list.list > ul > li > a .ico { left: auto; right: 20px; top: 50%; margin-top: -13px; }
.wallet-menu .edit-list { background-color: #fcfcfc; border-radius: 22px; padding: 24px 22px; }
.wallet-menu .edit-list h3 { font-size: 1rem; color: #252525; padding-bottom: 30px; }
.wallet-menu .edit-list li { display: flex; align-items: center; position: relative; margin-top: 35px; }
.wallet-menu .edit-list li:first-child { margin-top: 0; }
.wallet-menu .edit-list .thumb { min-width: 85px; width: 85px; }
.wallet-menu .edit-list .thumb img { width: 100%; }
.wallet-menu .edit-list .txt { margin: 0 10px 0 15px; flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.wallet-menu .edit-list .txt > strong { font-size: .938rem; color: #252525; white-space: nowrap; }
.wallet-menu .edit-list .txt > span { font-size: .813rem; color: #909090; display: block; }
.wallet-menu .edit-list .btn-add { cursor: pointer; outline: none; border: 0; background-color: transparent; position: relative; min-width: 24px; height: 24px; padding: 0; margin: 0 -5px 0 auto; }
.wallet-menu .edit-list .btn-add::before { content: ''; position: absolute; top: 50%; left: 5px; background: #252525; width: 14px; height: 2px; margin-top: -1px; }
.wallet-menu .edit-list .btn-add::after { content: ''; position: absolute; top: 50%; left: 5px; background: #252525; width: 14px; height: 2px; transform: rotate(90deg); margin-top: -1px; }
.wallet-menu .edit-list .btn-remove { cursor: pointer; outline: none; border: 0; background-color: transparent; position: relative; min-width: 24px; height: 24px; padding: 0; margin: 0 -5px 0 auto; }
.wallet-menu .edit-list .btn-remove::before { content: ''; position: absolute; top: 50%; left: 5px; background: #252525; width: 14px; height: 2px; margin-top: -1px; }
.wallet-menu .edit-list .other-list { margin-top: 30px; padding-top: 30px; border-top: 2px dotted #ddd; }

/* [SMCS-15277] Wallet OneUI4.0 기반 컴포넌트 추가/변경 */
.wallet-add { display: flex; flex-direction: column; align-items: center; min-height: 100%; padding: 95px 0 56px; position: relative; background-color: #fcfcfc; }
.wallet-add .wallet-add-head { text-align: center; }
.wallet-add .wallet-add-head .tit { font-size: 1.5rem; line-height: 2rem; color: #252525; font-weight: 500; }
.wallet-add .wallet-add-card { margin: 38px auto 0; width: 220px; }
.wallet-add .wallet-add-card .thumb-card { width: 100%; }
.wallet-add .wallet-add-card .content-placeholder { height: 138px; border: 1px solid rgba(229,229,229, .25); border-radius: 12px; }
.wallet-add .wallet-add-stit { width: 100%; margin: 20px auto 0; text-align: center; }
.wallet-add .wallet-add-stit .stit { font-size: 1.063rem; line-height: 1.375rem; font-weight: 500; color: #010101; }
.wallet-add .wallet-add-stit .stit.loading-txt span:after{ content: ''; animation: dots 1.5s linear infinite; margin-left: 1px; }
.wallet-add .wallet-add-stit .content-placeholder { height: 22px; width: 220px; margin: 0 auto; }
.wallet-add .wallet-add-status { margin: 32px 0 0; padding: 0 40px; width: 100%; text-align: center; font-size: .875rem; color: #8c8c8c; }
.wallet-add .wallet-add-status.large { margin: 14px 0 0; font-size: 1.063rem; color: #000; }
.wallet-add .wallet-add-status .loading-txt span:after{ content: ''; animation: dots 1.5s linear infinite; margin-left: 1px; }
.wallet-add .wallet-add-status .info { display: flex; flex-wrap: wrap; border-top: 1px solid #cecece; }
.wallet-add .wallet-add-status .info dt,
.wallet-add .wallet-add-status .info dd { padding-top: 14px; font-size: .938rem; line-height: 1.188rem; color: #8c8c8c; }
.wallet-add .wallet-add-status .info dt { width: 105px; text-align: left; }
.wallet-add .wallet-add-status .info dd { width: calc( 100% - 105px ); text-align: right; }
.wallet-add .wallet-add-status .info .content-placeholder { height: 19px; display: inline-block; }
.wallet-add .wallet-add-status .info dt .content-placeholder { width: 100%; }
.wallet-add .wallet-add-status .info dd .content-placeholder { width: 120px; }
.wallet-add .wallet-add-btn { position: fixed; bottom: 0; left: 0; right: 0; background: #fcfcfc; display: flex; z-index: 20; }
.wallet-add .wallet-add-btn .btn { padding: 0 24px; font-size: 1.125rem; line-height: 1.313rem; font-weight: 500; color: #010101; text-align: center; border: 0; background: none; outline: 0; width: 100%; cursor: pointer; height: 56px; word-break: break-word; display: inline-flex; align-items: center; justify-content: center; }
.wallet-add .content-placeholder { background-color: #e5e5e5; }
.wallet-add .content-placeholder:before { background: -webkit-linear-gradient(left, rgba(15, 15, 15, 0) 0%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, rgba(15, 15, 15, 0) 0%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%); animation: content-placeholder-animation 1.5s linear infinite; }
.wallet-add .spinner-dots .shape { width: 6.75px; height: 6.75px; } 
.wallet-add .spinner-dots .shape1 {animation: animation3shape1 0.5s linear 0s infinite alternate; }
.wallet-add .spinner-dots .shape2 { animation: animation3shape2 0.5s linear 0s infinite alternate; }
.wallet-add .spinner-dots .shape3 { animation: animation3shape3 0.5s linear 0s infinite alternate; }
.wallet-add .spinner-dots .shape4 { animation: animation3shape4 0.5s linear 0s infinite alternate; }
@keyframes animation3shape1 {
  from { transform: translate(6px, 6px); }
  to { transform: translate(-3px, -3px); }
}
@keyframes animation3shape2 {
  from { transform: translate(-6px, 6px); }
  to { transform: translate(3px, -3px); }
}
@keyframes animation3shape3 {
  from { transform: translate(6px, -6px); }
  to { transform: translate(-3px, 3px); }
}
@keyframes animation3shape4 {
  from { transform: translate(-6px, -6px); }
  to { transform: translate(3px, 3px); }
}
.wallet-ticket-container .inner { width: 220px; height: 138.75px; background: url(../../res/img/wallet/bg_megabox.png) no-repeat 0 0; background-size: 220px 138.75px; margin: 0 auto; overflow: hidden; position: relative;border-radius: 8px;}
.wallet-ticket-container .inner:before{content:'';width: 12px;height: 11px;background-color: #fff;border-radius: 100%;position: absolute;top:53px;left:-6px}
.wallet-ticket-container .inner:after{content:'';width: 12px;height: 11px;background-color: #fff;border-radius: 100%;position: absolute;top:53px;right:-6px}
.wallet-ticket-container .ticket-header::before { content: ''; width: 93%; height: 1px; border-top: .7px dashed rgba(255,255,255,.3); position: absolute; top: 58px; left: 7.5px; right: 7.5px;}
.wallet-ticket-container .ticket-header { margin: 10px 12px 0; display: flex; height: 13.5px; align-items: center; }
/* .wallet-ticket-container .ticket-header .logo {width:60px } */
.wallet-ticket-container .ticket-header .logo > img,
.wallet-boardingpass-container .bp-header .logo > img{ vertical-align: middle;height:13px }
.wallet-ticket-container .ticket-header .logo.long-typ,
.wallet-boardingpass-container .bp-header .logo.long-typ{width:100px}
.wallet-ticket-container .ticket-header .logo.long-typ > img,
.wallet-boardingpass-container .bp-header .logo.long-typ > img{vertical-align: middle;width:100%;height:auto}
.wallet-ticket-container .ticket-header .multi { margin-left: auto; height: 9px; }
.wallet-ticket-container .ticket-header .multi > button { border: 0; background: none; vertical-align: top; color: #fff; font-size: .556rem; letter-spacing: -.1px; display: inline-flex; align-items: center; }
.wallet-ticket-container .ticket-header .multi > button::after { content: ''; display: inline-block; background: url(../../res/img/wallet/ico_multi.png) no-repeat 0 0; width: 13.5px; height: 13.5px; background-size: 13.5px; margin: -2px 0 0 3px; backface-visibility: hidden; }
.wallet-ticket-container .ticket-title{display:flex;align-items:center;height: 36.92px;font-size: .836rem; line-height: 1.1; padding:0 12px 0; color: #fff}
.wallet-ticket-container .ticket-title .clip{display:inline-block;width:196px;text-overflow:ellipsis;overflow: hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;vertical-align:middle}
.wallet-ticket-container .ticket-info { position: absolute; left: 12px; bottom: 10.5px; line-height: 1.25; }
.wallet-ticket-container .ticket-info .place { font-size: .651rem; color: #fff; margin-bottom: 2px; }
.wallet-ticket-container .ticket-info .date { font-size: .651rem; color: rgba(255,255,255,.6); }
.wallet-ticket-container .ticket-info .dday { display: inline-block; font-size: .372rem; letter-spacing: -.06px; color: #fff; margin-bottom: 9px; background-color: rgba(0,0,0,.3); border-radius: 6px; padding: 1.5px 5.5px; }
.wallet-ticket-container .ticket-poster { position: absolute; bottom: 12px; right: 12px; width: 42px; height: 60px; }
.wallet-ticket-container .ticket-poster img { width: 100%; vertical-align: top; }
.wallet-boardingpass-container { margin-top: 40px; }
.wallet-boardingpass-container .inner {position: relative;width: 220px; height: 138px; background: url(../../res/img/wallet/bg_koreanair.png) no-repeat 0 0; background-size: 220px 138.75px; margin: 0 auto; overflow: hidden; border-radius: 8px;}
.wallet-boardingpass-container .inner:before{content:'';width: 12px;height: 11px;background-color: #fff;border-radius: 100%;position: absolute;top:53px;left:-6px}
.wallet-boardingpass-container .inner:after{content:'';width: 12px;height: 11px;background-color: #fff;border-radius: 100%;position: absolute;top:53px;right:-6px}
/* .wallet-boardingpass-container .bp-header {position: absolute;top: 7.5px; left: 12px; right: 12px;display: flex; height: 14px; } */
.wallet-boardingpass-container .bp-header {display: flex;align-items: center;height: 14px;margin: 7.5px 12px 0}
.wallet-boardingpass-container .bp-header .logo > img { vertical-align: middle; }
.wallet-boardingpass-container .bp-header .multi {margin-left: auto; height: 9px}
.wallet-boardingpass-container .bp-header .multi > button { border: 0; background: none; vertical-align: top; color: #fff; font-size: .556rem; letter-spacing: -.1px; display: inline-flex; align-items: center; }
.wallet-boardingpass-container .bp-header .multi > button::after { content: ''; display: inline-block; background: url(../../res/img/wallet/ico_multi.png) no-repeat 0 0; width: 13.5px; height: 13.5px; background-size: 13.5px; margin: -2px 0 0 3px; backface-visibility: hidden; }
.wallet-boardingpass-container .bp-schedule {position: absolute; top: 32px; left: 12px; right: 12px; display: flex; justify-content: space-between; }
.wallet-boardingpass-container .bp-schedule .items { display: inline-flex; flex-direction: column; line-height: 1.2; white-space: nowrap; height: 40px; position: relative; }
.wallet-boardingpass-container .bp-schedule .items.to { align-items: flex-end; }
.wallet-boardingpass-container .bp-schedule .items.plane { flex: 1 0 auto; align-items: center; margin: 0 6px; }
.wallet-boardingpass-container .bp-schedule .items.plane::before { content: ''; width: 17.25px; height: 15.5px; background: url(../../res/img/wallet/ico_airplane.png) no-repeat 0 0; background-size: 17.25px 15.5px; position: absolute; top: 12px; z-index: 5; }
.wallet-boardingpass-container .bp-schedule .items.plane::after { content: ''; position: absolute; top: 19px;display: inline-block; width: 100%; height: 3px; background: url('../../res/img/wallet/Boardingpass_complete_line_image.png') repeat-x;background-size: 156px 3px}
.wallet-boardingpass-container .dark .bp-schedule .items.plane::after,
.wallet-boardingpass-container .bp-schedule.dark .items.plane::after,
.wallet-boardingpass-container .bp-schedule .items.plane.dark::after { background: url('../../res/img/wallet/Boardingpass_complete_line_image_black.png') repeat-x; background-size: 156px 3px; }
.wallet-boardingpass-container .dark .bp-schedule .items.plane::before,
.wallet-boardingpass-container .bp-schedule.dark .items.plane::before,
.wallet-boardingpass-container .bp-schedule .items.plane.dark::before { background: url(../../res/img/wallet/ico_airplane_black.png) no-repeat 0 0; background-size: 17.25px 15.5px; }
.wallet-boardingpass-container .bp-schedule .city { font-size: .419rem; color:#fff; position: absolute; }
.wallet-boardingpass-container .bp-schedule .code { font-size: 1.206rem; color: #fff; font-weight: 700;font-family: Roboto-Bold; margin: 8px 0 0; }
.wallet-boardingpass-container .bp-schedule .date { font-size: .463rem; color: #fff; position: absolute; bottom: 0; }
.wallet-boardingpass-container .bp-passenger {position: relative;display:flex;align-items: center;margin: 52.61px 12px 39.94px;height: 27px; font-size: .65rem; color: rgba(255,255,255,.9); line-height: 1.1}
.wallet-boardingpass-container .bp-passenger .clip,
.wallet-ticket-container .ticket-info .place .clip{display:inline-block;width:143px;text-overflow:ellipsis;overflow: hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;vertical-align:middle}
.wallet-boardingpass-container .bp-passenger .first {position: absolute;top:50%;right:0;font-size: .372rem; color: #fff; border-radius: 5.2px; background: rgba(0,0,0,.3); padding: 1.5px 3.5px; vertical-align: middle;transform: translateY(-50%); }
.wallet-boardingpass-container .bp-info {position: absolute; left: 12px; bottom: 6.85px; width: calc(100% - 24px)}
.wallet-boardingpass-container .bp-info-list { display: flex; }
.wallet-boardingpass-container .bp-info-list > li { width:25% }
.wallet-boardingpass-container .bp-info-list .label { font-size: .464rem; color:#fff; }
.wallet-boardingpass-container .bp-info-list .txt { font-size: .651rem; color: #fff; }
.wallet-add-grouped { padding-top: 20px; text-align: center; color: #010101; font-size: .813rem; line-height: 1rem; }
.wallet-add-notify { position: absolute; left: 24px; right: 24px; bottom: 88px; font-size: .813rem; line-height: 1rem; color: #8c8c8c; word-break: break-word; }
.global-add { padding-top: 40px; }
.global-add .alert { margin-bottom: 107px; }
.global-add .ico-notice { background: url(../img/wallet_ic_globaladd_webview_notice.png) no-repeat 0 0; background-size: 38px auto; width: 38px; height: 38px; display: block; margin: 0 auto; }
.global-add .message { min-height: 69px; margin: 10px 24px 0; font-size: 1.75rem; line-height: 2.125rem; color: #252525; text-align: center; display: flex; align-items: center; justify-content: center; }
.global-add .guide { text-align: center; }
.global-add .guide + .guide,
.global-add .guide:last-of-type  { margin-top: 50px; }
.global-add .txt { color: #252525; font-size: .875rem; line-height: 1.188rem; padding-bottom: 8px; margin: 0 24px 0;}
.global-add .btn { font-size: .938rem; font-weight: 500; color: #252525; text-align: center; border: 0; background: #ebebeb; border-radius: 22px; outline: 0; cursor: pointer; width: 180px; height: 44px; line-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* [SMCS-15456] Countdown component */  
.countdown { display: flex; align-items: center; justify-content: center; line-height: 1; }
.countdown .colon { position: relative; }
.countdown .colon::before { content: '\003A'; display: inline-block; vertical-align: text-top; }

/* [SMCS-15844] Coupon OneUI 4.0 기반 컴포넌트 추가/변경 (2차) */ 
.add-wallet { display: flex; flex-direction: column; align-items: center; min-height: 100%; padding: 95px 0 56px; position: relative; background-color: #fcfcfc; }
.add-wallet .wallet-add-head { text-align: center; }
.add-wallet .wallet-add-head .tit { font-size: 1.5rem; line-height: 2rem; color: #252525; font-weight: 400; }
.add-wallet .wallet-add-card { margin: 38px auto 0; width: 150px; }
.add-wallet .wallet-add-card .thumb-card { width: 100%; }
.add-wallet .wallet-add-card .placeholder { height: 150px; border: 1px solid #3970F3; border-radius: 10px; background-color: #3970F3; }
.add-wallet .wallet-add-btn { position: fixed; bottom: 0; left: 0; right: 0; background: #fcfcfc; display: flex; z-index: 20; }
.add-wallet .wallet-add-btn .btn { padding: 0 24px; font-size: 1.125rem; line-height: 1.313rem; font-weight: 500; color: #010101; text-align: center; border: 0; background: none; outline: 0; width: 100%; cursor: pointer; height: 56px; word-break: break-word; display: inline-flex; align-items: center; justify-content: center; }
.add-wallet .wallet-add-txt { width: 100%; text-align: center; line-height: 1; }
.add-wallet .wallet-add-txt .c-name { padding: 20px 0 0; font-size: 1.063rem; color: #010101; font-weight: 500; }
.add-wallet .wallet-add-txt .b-name { padding: 24px 0 0; font-size: .938rem; color: #000; font-weight: 400; }
.add-wallet .loading-txt { padding: 0 24px; font-size: .938rem; line-height: 1.188rem; font-weight: 400; color: #000; text-align: center; border: 0; background: none; outline: 0; width: 100%; height: 56px; word-break: break-word; display: inline-flex; align-items: center; justify-content: center; }
.add-wallet .loading-txt span:after{ content: ''; animation: dots 1.5s linear infinite; margin-left: 1px; }

.coupon-default-btn { text-align: center; padding: 24px 34px; }
.coupon-default-btn .btn { background: #e9e9e9; color: #010101; font-weight: 500; display: inline-block; border: 0; height: 36px; padding: 8px 24px; border-radius: 18px; font-size: .875rem; min-width: 160px; display: block; margin: 0 auto; }
.coupon-default-btn .btn.full { width: 100%; }
.coupon-default-btn .txt { font-size: .75rem; color: #8c8c8c; padding-top: 10px; }
.coupon-detail-txt + .coupon-default-btn{ padding-top: 0;}
.coupon-default-btn .btn + .btn { margin-top: 16px; }
.coupon-default-btn .btn.disabled { opacity: .3; }

.coupon-balance { padding: 20px 24px; background: #fcfcfc; border-radius: 26px; display: flex; align-items: center; min-height: 84px; }
.coupon-balance dl dt { font-size: 1.063rem; color: #010101; font-weight: 500; }
.coupon-balance dl dd { font-size: .813rem; color: #010101; font-weight: 400; }
.coupon-balance .btn-refresh { width: 34px; height: 34px; color: transparent; margin-left: auto; border: 0; background: url(../img/coupons_btn_refresh.png) no-repeat 0 0; background-size: 34px; background-color: #f2f2f2; border-radius: 50%; }
.coupon-balance .btn-refresh > span { display: block; height: 34px; }

.coupon-app { margin: 16px 0 16px; padding: 20px 24px; background: #fcfcfc; border-radius: 26px; display: flex; align-items: center; position: relative; min-height: 86px; }
.coupon-app .ico { min-width: 36px; min-height: 36px; margin-right: 12px; }
.coupon-app dl dt { font-size: 1.063rem; color: #010101; font-weight: 500; }
.coupon-app dl dd { font-size: .813rem; color: #8c8c8c; font-weight: 400; }
.coupon-app .btn-open-app { color: #4d4d4d; font-size: .813rem; font-weight: 500; margin-left: auto; border: 0; background: none; position: absolute; top: 20px; right: 24px; line-height: 1.625rem; }

.coupon-purchase-history .dataset .bar-title { display: block; position: relative; font-weight: 700; color: #979797; margin: 9px 24px }
.coupon-purchase-history .dataset .bar-title:before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; border-top: 2px dotted rgba(198,198,198,.5); }
.coupon-purchase-history .dataset .bar-title:first-of-type { margin-top: 9px; }
.coupon-purchase-history .dataset .bar-title > span { font-size: .813rem; font-weight: 500; background-color: #f6f6f6; padding-right: 16px; position: relative; color: #8c8c8c; }
.coupon-purchase-history .btn-action.link { margin: 0 auto 0 0; padding: 0; border: 0; font-size: 3.33334vmin; color: #505050; font-weight: bold; background: none; text-align: left; text-decoration: underline; }
.coupon-purchase-history .sort { position: relative; padding: 0 24px; z-index: 10; height: 48px; display: flex; align-items: center; margin: 4px 0; }
.coupon-purchase-history .sort .btn-sort { border: 0; background: none; font-size: 1.063rem; color: #010101; padding: 0; display: inline-flex; align-items: center; outline: 0; }
.coupon-purchase-history .sort .btn-sort:after { content: ''; width: 9px; height: 6px; background: url('../img/coupon-list-arr.png') no-repeat 0 0; background-size: 9px 15px; margin-left: 10px; position: relative; top: 50%; margin-top: 0; }
.coupon-purchase-history .sort .list-sort { position: absolute; top: 6px; left: 10px; background: #fcfcfc; border-radius: 26px; box-shadow: 0 4px 10px 1px rgba(0,0,0, .2); overflow-x: hidden; overflow-y: auto; padding: 0; min-width: 168px; max-height: 400px; margin-right: 10px; }
.coupon-purchase-history .sort .list-sort .btn-opt { width: 100%; padding: 13px 24px; background: transparent; border: 0; outline: 0; font-size: 1.063rem; text-align: left; position: relative; color: #010101; line-height: 25px; }
.coupon-purchase-history .sort .list-sort .btn-opt span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.coupon-purchase-history .sort .list-sort .active .btn-opt,
.coupon-purchase-history .sort .list-sort .btn-opt.active { color: #3970F3; font-weight: 500; padding: 13px 64px 13px 24px }
.coupon-purchase-history .sort .list-sort .active .btn-opt:after,
.coupon-purchase-history .sort .list-sort .btn-opt.active:after { content: ''; display: block; width: 8px; height: 13px; border: solid #3970F3; border-width: 0 2px 2px 0; position: absolute; right: 24px; top: 50%; margin-top: -11px; transform: rotate(45deg); border-radius: 0 0 3px 0; }
.coupon-purchase-history .coupon-list li { position: relative; margin: 0 24px 16px; }
.coupon-purchase-history .coupon-list li:last-child { margin-bottom: 0; }
.coupon-purchase-history .coupon-list li:last-child .info { border-bottom: 0; }
.coupon-purchase-history .coupon-list .thumb { position: absolute; left: 0; top: 50%; margin-top: -35px; width: 70px; height: 70px; }
.coupon-purchase-history .coupon-list .thumb .img { width: 100%; height: 100%; outline: 1px solid rgba(0,0,0,.05); border-radius: 10px; background: #fff; overflow: hidden; }
.coupon-purchase-history .coupon-list .thumb .img img { width: 100%; height: 100%; object-fit: contain; }
.coupon-purchase-history .coupon-list .actions { display: flex; margin: 4px 0 0 0; font-size: .813rem; line-height: .938rem; color: #db332a; font-weight: 400; }
.coupon-purchase-history .coupon-list .info { display: flex; align-items: center; margin: 0 0 0 86px; border-bottom: 1px solid #e4e4e4; padding: 8px 0; min-height: 96px; }
.coupon-purchase-history .coupon-list .info .options { overflow: visible; height: auto; }
.coupon-purchase-history .coupon-list .info .options span { margin-bottom: 4px; padding: 0 5px; display: inline-flex; background-color: #f0f4fc; border: 0; }
.coupon-purchase-history .coupon-list .info .options span i { font-size: .615rem; line-height: inherit; font-weight: 500; }
.coupon-purchase-history .coupon-list .info .align { width: 100%; }
.coupon-purchase-history .coupon-list .c-name { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; line-height: 1.188rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; color: #010101; font-weight: 500; }
.coupon-purchase-history .coupon-list .p-info li { margin: 0; font-size: .875rem; line-height: .938rem; color: #252525; }
.coupon-purchase-history .coupon-list .p-info li.total { color: #3970f3; font-size: .875rem; line-height: 1.188rem; margin-top: 1px; font-weight: 500; }
.coupon-purchase-history .coupon-list .p-info li.purchased { margin-top: 5px; font-size: .75rem; line-height: 1rem; color: #8c8c8c; font-weight: 400; }
.coupon-purchase-history .coupon-list .to { font-size: .813rem; line-height: .938rem; color: #252525; font-weight: 500; margin-bottom: 4px; }
.coupon-purchase-history .coupon-list .from { font-size: .875rem; line-height: 1.188rem; font-weight: 400; color: #000; margin-bottom: -4px; }
.coupon-purchase-history .coupon-list .given { font-size: .875rem; line-height: 1.188rem; font-weight: 400; color: #000; display: flex; }
.coupon-purchase-history .coupon-list .given .cancel { margin-left: auto; font-size: .875rem; color: #DB332A; font-weight: 500; }
.coupon-purchase-history .coupon-purchase-data { position: relative; min-height: 70px; }

.coupon-purchase-history .coupon-list .reveiced .c-name { font-weight: 400; font-size: .938rem; line-height: 1.25rem; }
.coupon-purchase-history .coupon-list .reveiced .b-name { font-size: .75rem; line-height: 1rem; color: #8c8c8c; font-weight: 400; }
.coupon-purchase-history .coupon-list .reveiced .expired-date { font-size: .75rem; color: #8c8c8c; line-height: 1rem; margin-top: 4px; }
.coupon-purchase-history .coupon-list .price-benefit .price { font-size: .938rem; line-height: 1.375rem; color: #010101; font-weight: 400; }
.coupon-purchase-history .coupon-list .price-benefit .price-benefit,
.coupon-purchase-history .coupon-list .price-benefit .reward { font-size: .625rem; line-height: .875rem; color: #8C8C8C; font-weight: 400; }

.coupon-nodata { display: flex; align-items: center; justify-content: center; height: 100%; }
.coupon-nodata .nodata { display: block; width: 100%; text-align: center; }
.coupon-nodata .nodata .msg { font-size: .813rem; line-height: 1.063rem; color: #8c8c8c; padding: 0 24px; font-weight: 400; word-break: break-word; }
.coupon-nodata .nodata .msg em { display: block; font-size: 1.063rem; line-height: 1.438rem; color: #4d4d4d; font-weight: 500; margin-bottom: 10px; }
.coupon-nodata .nodata .msg em.single { margin: 0; font-weight: 400; }
.coupon-nodata .nodata .msg + .msg { margin-top: 6px; }
.coupon-nodata .btn-nodata { background: #e9e9e9; color: #010101; font-weight: 500; display: inline-block; border: 0; height: 36px; padding: 8px 16px; border-radius: 18px; font-size: .938rem; min-width: 216px; margin: 20px 0 0; }
.coupon-nodata .btn-nodata.btn-primary { background-color: #3970F3; color: #fafafa; }

.coupon-purchase-date { margin: 0 24px 28px 24px; }
.coupon-detail-txt + .coupon-purchase-date { margin-top: -16px; } 
.coupon-purchase-date dl { display: flex; justify-content: space-between; margin-bottom: 0; padding: 0 4px; line-height: 1.5; flex-wrap: wrap; }
.coupon-purchase-date dl dt { flex: 1 0 50%; font-size: .875rem; color: #8c8c8c; font-weight: 400; display: flex; position: relative; margin-bottom: 4px; }
.coupon-purchase-date dl dd { font-size: .875rem; color: #8c8c8c; text-align: right; margin-bottom: 4px; }

.coupon-information { margin: 16px 0 0; padding: 22px 24px 24px; background: #fcfcfc; border-radius: 26px; }
.coupon-information .tit { font-size: 1.063rem; line-height: 1.438rem; color: #010101; font-weight: 500; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid rgba(0,0,0,.08); display: flex; }
.coupon-information .tit span { margin-left: auto; }
.coupon-information .define dl { display: flex; flex-wrap: wrap; margin-top: -5px; }
.coupon-information .define dl dt { flex: 1 0 50%; margin-top: 5px; font-size: .875rem; line-height: 1.188rem; color: #8c8c8c; }
.coupon-information .define dl dd { flex: 1 0 auto; text-align: right; margin-top: 5px; font-size: .875rem; line-height: 1.188rem; color: #8c8c8c; }
.coupon-information .define strong { color: #252525; font-size: .875rem; line-height: 1.188rem; font-weight: 500; display: block; padding-bottom: 5px; }
.coupon-information .define + .define { margin-top: 24px; }

hr.division { display: block !important; margin: 15px 0; border-top: 1px dashed #bbb; }

/* [SMCS-16101]Wallet OneUI4.0 기반 컴포넌트 추가변경 */
.wallet-add.coupon .wallet-add-card{width:150px}
.wallet-add.coupon .wallet-add-card .content-placeholder{height:150px}
.wallet-add.coupon .wallet-add-stit{position:absolute;bottom:18px}
.wallet-add.coupon .wallet-add-status.large{font-size:1.063rem;color:#010101;font-weight:500;margin:20px 0 0}
.wallet-add.coupon .wallet-add-status{width:100%;text-align:center;font-size:.938rem;color:#000;font-weight:400;margin:16px 0 0;padding:0 40px}

/* [SMCS-15464] 수집형 프로모션 프레임워크 */
.pf-main-concept.txt { padding: 60px 10px 70px; background: url(../img/promotionFramework/img_concept_obj.png) no-repeat 100% 0; background-color: #002551; }
.pf-main-concept.txt h3 > small { display: block; font-size: 1.375rem; line-height: 1.5rem; font-weight: 400; color: #d8eaff; padding-bottom: 6px; }
.pf-main-concept.txt h3 > strong { display: block; font-size: 1.875rem; line-height: 2.063rem; color: #fff; position: relative; }
.pf-main-concept.txt .discount { position: absolute; width: 112px; height: 42px; bottom: -30px; background: url(../img/promotionFramework/img_concept_discount.png) no-repeat 0 0; }
.pf-main-concept.txt .discount > i { font-size: 14px; font-style: normal; display: block; transform: rotate(6deg); display: block; padding: 2px 10px 5px 26px; white-space: nowrap; }
.pf-main-concept .thumb { width: 100%; }
.pf-event-point { padding: 65px 0 55px; min-height: 456px; position: relative; background-color: #f5f5f5; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.pf-event-point .event-point-box { width: 196px; height: 100px; margin: 0 auto; position: relative; overflow: hidden; }
.pf-event-point .event-point-box + .event-point-box { margin-top: 15px; }
.pf-event-point .event-point-box::before { content: ''; width: 20px; height: 20px; border: 3px solid #002551; border-radius: 50%; position: absolute; top: 50%; left: -10px; margin-top: -10px; background-color: #f5f5f5; z-index: 5; box-sizing: border-box; }
.pf-event-point .event-point-box::after { content: ''; width: 20px; height: 20px; border: 3px solid #002551; border-radius: 50%; position: absolute; top: 50%; right: -10px; margin-top: -10px; background-color: #f5f5f5; z-index: 5; box-sizing: border-box; }
.pf-event-point .box-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 3px solid #002551; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex-direction: column; letter-spacing: -.3px; background-color: #f5f5f5; }
.pf-event-point .earned { font-size: 1rem; color: #002551; line-height: 1; padding-bottom: 13px; }
.pf-event-point .count { font-size: 1.25rem; color: #000; line-height: 1; font-weight: 700; }
.pf-obj-wrap .obj { position: absolute; }
.pf-random-coupon { padding: 42px 10px 0; min-height: 456px; position: relative; background-color: #f5f5f5; overflow: hidden; }
.pf-random-coupon .txt { text-align: center; }
.pf-random-coupon .earned { font-size: 1rem; color: #002551; line-height: 1; padding-bottom: 8px; }
.pf-random-coupon .count { font-size: 1.25rem; color: #000; line-height: 1; font-weight: 700; }
.pf-random-coupon .btn-trigger { display: block; margin: 42px auto 0; border: 0; background: transparent; padding: 0 20px; }
.pf-random-coupon .btn-trigger > img { display: block; margin-right: -85px; }
.pf-random-coupon .lead { margin-top: 60px; background-color: rgba(30, 46, 76, .8); padding: 25px 15px; position: relative; z-index: 1; }
.pf-random-coupon .lead ul > li { color: #fff; font-size: .875rem; position: relative; padding-left: 15px; word-break: break-word; }
.pf-random-coupon .lead ul > li::before { content: '\00B7'; position: absolute; top: 0; left: 0; line-height: 18px; font-weight: 700; }

.pf-exchange-coupon { padding: 42px 10px 0; min-height: 456px; position: relative; background-color: #f5f5f5; overflow: hidden; }
.pf-exchange-coupon .txt { text-align: center; }
.pf-exchange-coupon .earned { font-size: 1rem; color: #002551; line-height: 1; padding-bottom: 8px; }
.pf-exchange-coupon .count { font-size: 1.25rem; color: #000; line-height: 1; font-weight: 700; }
.pf-exchange-coupon .exchange-box-wrap { position: relative; max-width: 266px; margin: 40px auto 0; }
.pf-exchange-coupon .exchange-box-wrap ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 20px; }
.pf-exchange-coupon .exchange-box-wrap ul > li { width: 123px; height: 89px; border-radius: 9px; overflow: hidden; }
.pf-exchange-coupon .exchange-box-wrap .box { height: 89px; background: linear-gradient(#fff 0 40px, transparent 40px 50px, #fff 50px 89px); display: flex; flex-direction: column; }
.pf-exchange-coupon .exchange-box-wrap .box .per { height: 32px; margin: 8px 0 0; text-align: center; font-size: 1.25rem; font-weight: 700; color: #002551; line-height: 1; display: flex; align-items: center; justify-content: center; }
.pf-exchange-coupon .exchange-box-wrap .box .remained { height: 10px; text-align: center; font-size: .625rem; font-weight: 400; color: #acacac; line-height: 1; position: relative; margin: 0 10px; background-color: #fff; }
.pf-exchange-coupon .exchange-box-wrap .box .remained::before { content: ''; position: absolute; width: 10px; height: 10px; top: 5px; left: -9px; transform: translate(-50%, -50%) rotate(45deg); border: 6px solid transparent; border-top-color: #fff; border-right-color: #fff; border-radius: 100%; }
.pf-exchange-coupon .exchange-box-wrap .box .remained::after { content: ''; position: absolute; width: 10px; height: 10px; top: 5px; right: -32px; transform: translate(-50%, -50%) rotate(225deg); border: 6px solid transparent; border-top-color: #fff; border-right-color: #fff; border-radius: 100%; }
.pf-exchange-coupon .exchange-box-wrap .box .remained small { display: block; transform: scale(.8); transform-origin: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-exchange-coupon .exchange-box-wrap .box .cnt { padding: 6px 12px 0; }
.pf-exchange-coupon .exchange-box-wrap .box .cnt button { font-size: .625rem; color: #fff; font-weight: 600; display: block; border: 0; background-color: #002551; text-align: center; width: 100%; padding: 4px 0; border-radius: 5px; cursor: pointer; }

.pf-bottom-button { padding: 44px 0 60px; background-color: #f5f5f5; }
.pf-bottom-button .pf-button { font-size: 18px; color: #fff; background-color: #002551; display: block; border: 0; width: 100%; padding: 7px 0; height: 40px; border-radius: 5px; font-weight: 600; max-width: 260px; margin: 0 auto; }
.pf-bottom-button .pf-button + .pf-button { margin: 23px auto 0; }

/* [SMCS-16717] 약관 상세 화면 추가 요청 */
.wallet-terms { padding: 50px 24px 24px; background-color: #fcfcfc; border-radius: 26px; min-height: 100%; }
.wallet-terms .tit { color: #252525; font-size: 1.875rem; line-height: 2.188rem; font-weight: 300; text-align: center; }
.wallet-terms .dates { color: #505050; padding: 24px 0 0; font-size: .813rem; line-height: .938rem; text-align: center; font-weight: 300; }
.wallet-terms .txt { color: #505050; padding: 48px 0 0; font-size: .813rem; line-height: 1.25rem; font-weight: 400; word-break: break-word; }
.wallet-terms .version { padding: 16px 0 0; text-align: center; }
.wallet-terms .version .btn-previous { font-size: .813rem; line-height: 1.188rem; color: #505050; text-align: center; font-weight: 400; padding: 6px 25px; border: 1px solid rgba(119,119,119,.5); border-radius: 17px; background-color: #fcfcfc; }

/* [SMCS-17624] Wallet 쿠폰 GUI 적용요청 */
.coupon-noitem { display: flex; align-items: center; justify-content: center; height: 100%; }
.coupon-noitem .noitem { display: block; width: 100%; text-align: center; padding: 0 45px; margin-top: -28px; word-break: break-word; }
.coupon-noitem .txt1 { font-size: 1.063rem; line-height: 1.25rem; color: #4d4d4d; text-align: center; font-weight: 400; }
.coupon-noitem .txt2 { font-size: .813rem; line-height: .938rem; color: #8c8c8c; text-align: center; font-weight: 400; padding-top: 12px; }
.coupon-noitem .btn-noitem { background: rgba(0,0,0,.08); color: #010101; font-weight: 500; display: inline-block; border: 0; height: 36px; padding: 8px 16px; border-radius: 18px; font-size: .938rem; min-width: 216px; margin: 16px 0 0; }

/* [SMCS-19457] 버스탑승권 Boardingpass 화면 추가 */
.wallet-boardingpass-bus-container .inner { position: relative; width: 296px; height: 185px; background: url(../../res/img/wallet/bg_bus.png) no-repeat 0 0; background-size: 296px 185px; margin: 0 auto; overflow: hidden; border-radius: 12px; }
.wallet-boardingpass-bus-container.non-bg-type .inner:before{ content:''; width: 16px; height: 16px; background-color: #fff; border-radius: 100%; position: absolute; top: 70px; left: -8px; }
.wallet-boardingpass-bus-container.non-bg-type .inner:after{ content:''; width: 16px; height: 16px; background-color: #fff; border-radius: 100%; position: absolute; top: 70px; right: -8px; }
.wallet-boardingpass-bus-container .bp-header { display: flex; align-items: center; margin: 12px 0 0 16px; }
.wallet-boardingpass-bus-container .bp-header .logo { height: 15px; }
.wallet-boardingpass-bus-container .bp-header .logo > img { vertical-align: top; max-height: 15px }
.wallet-boardingpass-bus-container .bp-route { padding: 16px 16px 0 24px; }
.wallet-boardingpass-bus-container .bp-route dl { padding: 0 0 0 14px; }
.wallet-boardingpass-bus-container .bp-route dl > dt { color: rgba(255,255,255,.6); font-weight: 500; font-size: .563rem; line-height: .625rem; margin-bottom: 2px; position: relative; }
.wallet-boardingpass-bus-container .bp-route dl > dt::before { content: ''; position: absolute; top: 50%; left: -14px; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; margin-top: -3px; box-sizing: border-box; }
.wallet-boardingpass-bus-container .bp-route .arrival  dl > dt::before { background: #fff; }
.wallet-boardingpass-bus-container .bp-route dl > dd { color: #fff; font-weight: 700; font-size: 1.125rem; line-height: 1.313rem; }
.wallet-boardingpass-bus-container .bp-route .departure { padding: 0 0 10px; position: relative; }
.wallet-boardingpass-bus-container .bp-route .departure::before { content: ''; width: 1px; height: calc(100% - 8px); position: absolute; top: 9px; left: 0; background: rgba(255,255,255,.5); transform: translateX(2.5px); }
.wallet-boardingpass-bus-container .bp-date { position: absolute; bottom: 16px; left: 18px; color: #fff; font-size: .875rem; font-weight: 400; line-height: 1.125rem; }
.wallet-boardingpass-bus-container .bp-date::before { content: ''; width: 20px; height: 18px; background: url(../../res/img/wallet/ico_bus.png) no-repeat 0 0; display: inline-block; background-size: 100%; vertical-align: top; margin: -1px 4px 0 0; }

/* [SMCS-19504] 쿠폰함 내 리워즈 링크 추가 */
.coupon-reward-link { background: rgba(3,129,254,0.06); border-radius: 26px; padding: 20px 24px; margin-top: 20px; }
.coupon-reward-link .tit { font-size: 1.125rem; line-height: 1.313rem; font-weight: 400; color: #252525; padding-bottom: 17px; }
.coupon-reward-link .link { font-size: 1.063rem; line-height: 1.25rem; font-weight: 500; color: #0072de; }
.couponbox.none + .coupon-reward-link { position: fixed; bottom: 0; left: 0; right: 0; }
.couponbox.list { min-height: calc(100% - 119px); }

/* [SMCS-19614] 기프트카드 Wallet 화면 추가 */
.wallet-add.center { justify-content: center; padding: 0; }

/* [SMCS-20050] OneUI 5.0 GUI 잔여 사항 적용 */
.coupon-code .code-image { padding: 12px 0; background: #fcfcfc; border-radius: 26px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 131px; }
.coupon-code .code-image .thumb-area { position: relative; }
.coupon-code .code-image .thumb { width: 68px; height: 68px; }
.coupon-code .code-image .thumb > img { width: 100%; }
.coupon-code .code-image .zoom { display: flex; justify-content: center; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% - -47px), calc(-50% - -27px)); }
.coupon-code .code-image .zoom::after { content: ''; display: inline-block; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' id='footer-sample-full' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16' class='iconify iconify--bi'%3E%3Cg fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M6.5 12a5.5 5.5 0 1 0 0-11a5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0a6.5 6.5 0 0 1 13 0z'%3E%3C/path%3E%3Cpath d='M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1a6.538 6.538 0 0 1-1.398 1.4z'%3E%3C/path%3E%3Cpath fill-rule='evenodd' d='M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-size: cover; position: relative; }
.coupon-code .code-image .txt { font-size: .813rem; color: #979797; text-align: center; font-weight: 400; line-height: .938rem; margin-top: 8px; }

/* [SMCS-20256] Membership(Loyalty) type 월렛 추가 */
.wallet-add .wallet-add-stit .guide { margin-top: 4px; padding: 0 24px; font-size: .75rem; line-height: .938rem; word-break: break-word; color: #8c8c8c; font-weight: 400; }
.wallet-add .wallet-add-stit .guide.type2 { margin-top: 9px; line-height: 1rem; }
.wallet-add .wallet-add-points { display: flex; align-items: center; margin: 24px auto 0; font-size: 1.063rem; line-height: 1.063rem; color: #000; font-weight: 400; }
.wallet-add .wallet-add-points strong,
.wallet-add .wallet-add-points .point { color: #3970f3; margin-left: 8px; font-weight: 400; }
.wallet-add .wallet-add-config { margin-top: auto; padding: 0 24px; width: 100%; }
.wallet-add .wallet-add-config .config-auto { height: 48px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding: 0 9px 0 6px; }
.wallet-add .wallet-add-config .config-auto dt { font-size: 1rem; color: #000; font-weight: 400; }
.wallet-add .wallet-add-config .config-switch { position: relative; display: inline-block; width: 35px; height: 18px; border-radius: 9.25px; background: #999; vertical-align: middle; margin: 0; }
.wallet-add .wallet-add-config .config-switch > input { appearance: none; opacity: 0; width: 100%; height: 100%; position: absolute; }
.wallet-add .wallet-add-config .config-switch > label { display: block; width: 100%; height: 100%; border-radius: 9.25px; transition: background .125s; }
.wallet-add .wallet-add-config .config-switch > label::before,
.wallet-add .wallet-add-config .config-switch > label::after { position: absolute; content: ''; top: 0; left: -1px; height: 20px; border-radius: inherit; transition: all .2s; box-sizing: border-box; }
.wallet-add .wallet-add-config .config-switch > label::before { width: 100%; background: #999; height: 18px; }
.wallet-add .wallet-add-config .config-switch > label::after { background: #fff; right: 16px; border: 1px solid #999; transform: scale(1.1); transform-origin: bottom; }
.wallet-add .wallet-add-config .config-switch > input:checked + label { background: #3970f3; }
.wallet-add .wallet-add-config .config-switch > input:checked + label::before { width: 60%; left: 20%; top: 30%; height: 40%; opacity: 0; }
.wallet-add .wallet-add-config .config-switch > input:checked + label::after { right: -1px; left: 16px; border-color: #3970f3; }
.wallet-add .ico-help { display: inline-block; position: relative; width: 20px; height: 20px; background: url(../img/wallet/detail_help.png) no-repeat 0 0; background-size: cover; vertical-align: middle; }
.wallet-add .wallet-add-config .config-check { display: flex; align-items:center; justify-content: center; height: 32px; margin-bottom: 52px; }
.wallet-add .wallet-add-config .config-check > label { font-size: 1rem; line-height: 2rem; color: #252525; font-weight: 400; position: relative; padding: 0 0 0 38px; }
.wallet-add .wallet-add-config .config-check > label::before { content: ''; background: #fff; border: 1px solid rgba(140,140,140,.8); width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 5px; left: 8px; box-sizing: border-box; transition: background .1s ease; }
.wallet-add .wallet-add-config .config-check > label::after { content: ''; width: 10px; height: 7px; border-color: transparent; border-style: solid; border-width: 2px 2px 0 0; position: absolute; top: 10px; left: 13px; transform: rotate(135deg); box-sizing: border-box; transition: border-color .1s ease; }
.wallet-add .wallet-add-config .config-check > input:checked + label::before { background: #3970f3; border-color: #3970f3; }
.wallet-add .wallet-add-config .config-check > input:checked + label::after { border-color: #fff; }
.wallet-add .wallet-add-config .config-check .ico-help { margin-left: 2px; }

/* [SMCS-20280] 2Q 쿠폰함 개선 GUI 업데이트 */
.coupon-card { width: 252px; height: 158px; margin: 8px auto 32px; }
.coupon-card .card-inner { height: 158px; border-radius: 10px; overflow: hidden; position: relative; }
.coupon-card .card-inner::before { content: ''; width: 14px; height: 14px; border: 1px solid #e7e8e8; position: absolute; top: 60px; left: -10px; border-radius: 50%; background: #f6f6f6; z-index: 5; }
.coupon-card .card-inner::after { content: ''; width: 14px; height: 14px; border: 1px solid #e7e8e8; position: absolute; top: 60px; right: -10px; border-radius: 50%; background: #f6f6f6; z-index: 5; }
.coupon-card .card-head { height: 68px; padding: 14px; position: relative; border-radius: 8px; }
.coupon-card .card-head .card-info { display: flex; justify-content: space-between; }
.coupon-card .card-head .card-brand { color: #fff; font-size: .813rem; display: flex; align-items: center; }
.coupon-card .card-head .card-brand .card-logo { width: 14px; height: 14px; margin-right: 6px; }
.coupon-card .card-head .card-dday { min-width: 34px; height: 17px; background: #fff; font-size: .625rem; border-radius: 10px; padding: 0 6px; line-height: 17px; display: inline-block; }
.coupon-card .card-body { height: 90px; border-radius: 10px; position: relative; border-bottom: 1px solid #e7e8e8; background: #f6f6f6; }
.coupon-card .card-tit { display: block; font-weight: 500; font-size: .938rem; color: #fff; line-height: 17px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coupon-card .card-expires { color: #252525; font-size: .813rem; position: absolute; bottom: 17px; left: 12px; line-height: 1; }
.coupon-card .card-image { width: 60px; height: 60px; border-radius: 12px; position: absolute; bottom: 17px; right: 15px; }
.coupon-card .card-image img { width: 100%; border-radius: 8px; }
.coupon-card.disabled { opacity: .3; }

.coupon-gift-information { padding: 24px; background: #fcfcfc; border-radius: 26px; }
.coupon-gift-information .tit { font-size: 1.063rem; line-height: 1.688rem; color: #010101; font-weight: 500; padding-bottom: 16px; }
.coupon-gift-information .gift-wrap { display: flex; padding-bottom: 10px; }
.coupon-gift-information .gift-wrap .gift-thumb { max-width: 80px; max-height: 80px; border: 1px solid rgba(0,0,0,.06); border-radius: 10px; overflow: hidden; margin-right: 10px; }
.coupon-gift-information .gift-wrap .gift-thumb img { width: 100%; }
.coupon-gift-information .gift-wrap .gift-name { font-size: 1.063rem; line-height: 1.188rem; color: #010101; font-weight: 500; margin-bottom: 6px; }
.coupon-gift-information .gift-wrap .gift-brand { font-size: .875rem; line-height: 1rem; color: #8C8C8C; font-weight: 400; display: inline-block; background: url('../img/coupons_layer_next_light_bg.png') no-repeat 100% 4px; background-size: 12px; padding-right: 14px; }
.coupon-gift-information .define dl { display: flex; flex-wrap: wrap; }
.coupon-gift-information .define dl dt { flex: 1 0 50%; margin-top: 6px; font-size: .875rem; line-height: 1.188rem; color: #252525; font-weight: 400;  }
.coupon-gift-information .define dl dd { flex: 1 0 auto; text-align: right; margin-top: 5px; font-size: .875rem; line-height: 1.188rem; color: #252525; font-weight: 400; }
.coupon-gift-information .define strong { color: #252525; font-size: .875rem; line-height: 1.188rem; font-weight: 500; display: block; padding-bottom: 5px; }
.coupon-gift-information .define + .define { margin-top: 24px; }

.coupon-gift-information .save-point { font-size: .813rem; color: #8c8c8c; font-weight: 400; display: flex; align-items: center; justify-content: flex-start; position: relative; margin-top: 10px; }
.coupon-gift-information .save-point .ico-help { display: inline-block; position: relative; width: 20px; height: 20px; background: url(../img/wallet/detail_help.png) no-repeat 0 0; background-size: cover; vertical-align: middle; border: 0; }
.coupon-gift-information .define .total { margin: 16px 0 0; background-color: #f8f8f8; border-radius: 12px; padding: 16px 20px; }
.coupon-gift-information .define .total dl { line-height: 1.625rem; } 
.coupon-gift-information .define .total dt { color: #252525; margin: 0; }
.coupon-gift-information .define .total dd { color: #252525; margin: 0; font-size: 1.063rem; font-weight: 500; }

/* [SMCS-26287] 직접추가 쿠폰, 발급일자/유효기한 날짜 정렬 맞지 않음 : NewSEC 폰트 기준으로 정렬하는 내용 */
.coupon-gift-information .split-date {
    display: flex;
    justify-content: end;
}
.coupon-gift-information .split-date > span {
    width: 8.58px;
    display: inline-flex;
    justify-content: center;
}
.coupon-gift-information .split-date > span.dot {
    width: 3.52px;
}

.coupon-notice-box { margin: 16px 0 16px; padding: 20px 24px; background: #fcfcfc; border-radius: 26px; min-height: 86px; }
.coupon-notice-box .tit { font-size: 1.063rem; line-height: 1.625rem; color: #010101; font-weight: 500; }
.coupon-notice-box .txt { font-size: .813rem; line-height: 1.25rem; color: #8c8c8c; font-weight: 400; }

.add-wallet .wallet-add-config { margin-top: auto; padding: 0 24px; width: 100%; }
.add-wallet .wallet-add-config .config-check { display: flex; align-items:center; justify-content: center; height: 32px; margin-bottom: 52px; }
.add-wallet .wallet-add-config .config-check > label { font-size: 1rem; line-height: 2rem; color: #252525; font-weight: 400; position: relative; padding: 0 0 0 38px; }
.add-wallet .wallet-add-config .config-check > label::before { content: ''; background: #fff; border: 1px solid rgba(140,140,140,.8); width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 5px; left: 8px; box-sizing: border-box; transition: background .1s ease; }
.add-wallet .wallet-add-config .config-check > label::after { content: ''; width: 10px; height: 7px; border-color: transparent; border-style: solid; border-width: 2px 2px 0 0; position: absolute; top: 10px; left: 13px; transform: rotate(135deg); box-sizing: border-box; transition: border-color .1s ease; }
.add-wallet .wallet-add-config .config-check > input:checked + label::before { background: #3970f3; border-color: #3970f3; }
.add-wallet .wallet-add-config .config-check > input:checked + label::after { border-color: #fff; }
.add-wallet .wallet-add-config .config-check .ico-help { margin-left: 2px; }

.coupon-bottom-btn { position: fixed; bottom: 0; left: 0; right: 0; height: 62px; padding: 14px 0 12px; background: #f6f6f6; z-index: 20; }
.coupon-bottom-btn.nofixed { position: static; }
.coupon-bottom-btn .btn { background: #3970F3; color: #f9f9f9; font-weight: 400; display: block; border: 0;  height: 36px; padding: 8px 16px; border-radius: 18px; font-size: .938rem; min-width: 192px; margin: 0 auto; }

.coupon-giftbox-tab { height: 56px; display: flex; align-items: center; justify-content: center; padding: 10px 24px; }
.coupon-giftbox-tab button { font-size: .938rem; line-height: 2.25rem; color: #8C8C8C; letter-spacing: -.3px; text-align: center; font-weight: 400; border: 0; background: transparent; padding: 0 12px; flex: 1; border-radius: 18px; }
.coupon-giftbox-tab button.active { color: #252525; font-weight: 500; background: #e9e9e9; }

.coupon-purchase-history .dataset.boxtype { background: #fcfcfc; border-radius: 26px; padding: 16px 0; }
.coupon-purchase-history .dataset.boxtype.sent { padding: 20px 0; }
.coupon-purchase-history .dataset.boxtype.sent .coupon-list { padding: 8px 0; }
.coupon-purchase-history .dataset.boxtype .bar-title > span { background: #fcfcfc; }
.coupon-purchase-history .dc { position: absolute; top: 0; left: 0; border-radius: 8px 0 8px 0; font-size: .75rem; color: #fafafa; min-width: 41px; padding: 0 4px; background-color: #3970F3; z-index: 5; font-weight: 400; text-align: center; }
.coupon-purchase-history .no-history { background: #fcfcfc; border-radius: 26px; line-height: 1.063rem; font-size: .813rem; color: #8c8c8c; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: calc(100vh - 174px); padding: 0 24px; word-break: break-word; }
.coupon-purchase-history .no-history em { font-size: 1.063rem; line-height: 1.438rem; margin-bottom: 8px; color: #4D4D4D; text-align: center; font-weight: 400; }

.coupon-sent-message .message { font-size: 1.25rem; line-height: 2rem; text-align: center; color: #010101; font-weight: 500; padding: 0 24px; }
.coupon-sent-message .given { font-size: .75rem; line-height: 1.25rem; text-align: center; color: #3970F3; padding-top: 6px; display: flex; justify-content: center; }
.coupon-sent-message .given strong { color: #010101; font-size: .875rem; font-weight: 500; margin-left: 4px; }
.coupon-sent-btn { display: flex; align-items: center; justify-content: center; margin: 12px 24px; padding-bottom: 20px; gap: 12px; }
.coupon-sent-btn button { font-size: .875rem; line-height: 2.25rem; color: #252525; text-align: center; font-weight: 400; border: 0; background: #e9e9e9; padding: 0 12px; flex: 1; border-radius: 18px; max-width: 150px; }

.coupon-sort { position: relative; padding: 0 24px; z-index: 10; height: 48px; display: flex; align-items: center; margin: 4px 0; }
.coupon-sort .btn-sort { border: 0; background: none; font-size: 1.063rem; color: #010101; padding: 0; display: inline-flex; align-items: center; outline: 0; }
.coupon-sort .btn-sort:after { content: ''; width: 9px; height: 6px; background: url('../img/coupon-list-arr.png') no-repeat 0 0; background-size: 9px 15px; margin-left: 10px; position: relative; top: 50%; margin-top: 0; }
.coupon-sort .list-sort { position: absolute; top: 6px; left: 10px; background: #fcfcfc; border-radius: 26px; box-shadow: 0 4px 10px 1px rgba(0,0,0, .2); overflow-x: hidden; overflow-y: auto; padding: 0; min-width: 168px; max-height: 400px; margin-right: 10px; }
.coupon-sort .list-sort .btn-opt { width: 100%; padding: 13px 24px; background: transparent; border: 0; outline: 0; font-size: 1.063rem; text-align: left; position: relative; color: #010101; line-height: 25px; }
.coupon-sort .list-sort .btn-opt span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.coupon-sort .list-sort .active .btn-opt,
.coupon-sort .list-sort .btn-opt.active { color: #3970F3; font-weight: 500; padding: 13px 64px 13px 24px }
.coupon-sort .list-sort .active .btn-opt:after,
.coupon-sort .list-sort .btn-opt.active:after { content: ''; display: block; width: 8px; height: 13px; border: solid #3970F3; border-width: 0 2px 2px 0; position: absolute; right: 24px; top: 50%; margin-top: -11px; transform: rotate(45deg); border-radius: 0 0 3px 0; }

/* [SMCS-20086] PersonalID 모바일사원증 Added GUI */
.wallet-employee { display: flex; flex-direction: column; align-items: center; min-height: 100%; padding: 95px 0 56px; position: relative; background-color: #fcfcfc; }
.wallet-employee .wallet-employee-head { text-align: center; }
.wallet-employee .wallet-employee-head .tit { font-size: 1.5rem; line-height: 2rem; color: #252525; font-weight: 500; }
.wallet-employee .wallet-employee-btn { position: fixed; bottom: 0; left: 0; right: 0; background: #fcfcfc; display: flex; z-index: 20; }
.wallet-employee .wallet-employee-btn .btn { padding: 0 24px; font-size: 1.125rem; line-height: 1.313rem; font-weight: 500; color: #010101; text-align: center; border: 0; background: none; outline: 0; width: 100%; cursor: pointer; height: 56px; word-break: break-word; display: inline-flex; align-items: center; justify-content: center; }
.wallet-employee-card { width: 220px; height: 138px; margin: 38px auto 0; background: url(../img/card_employee_front.png) no-repeat 0 0; background-size: cover; position: relative; padding: 9px 12px 12px 8px; display: flex; }
.wallet-employee-card .photo { min-width: 85px; height: 115px; }
.wallet-employee-card .photo img { width: 100%; height: 100%; object-fit: cover; vertical-align: top; }
.wallet-employee-card .info { margin-left: 14px; padding-top: 35px; }
.wallet-employee-card .info .name { color: #000; font-weight: 500; font-size: 1.146rem; line-height: 1.313rem; margin-bottom: 2px; }
.wallet-employee-card .info .name-en { color: #000; font-weight: 400; font-size: .764rem; line-height: .875rem; margin-bottom: 10px; }
.wallet-employee-card .info .group { color: #000; font-weight: 400; font-size: .546rem; line-height: .625rem; }
.wallet-employee-card .ci { position: absolute; top: 9px; right: 8px;height: 11px; }

/* pc break point  */

@media ( min-width : 1080px ) {
	#stateWrap {
		margin:0 auto;
		width:100%;
		max-width:800px;
	}
	#stateWrap .notice-area .content {
		padding:70px 40px;
		font-size:1.3rem;
		line-height:1.3;
	}
	
	#stateWrap .notice-area .title {margin:0; font-size:1.9rem;}
	#stateWrap .notice-area li {margin-top:1rem;}
	#stateWrap .tnc-link-area {}
	#stateWrap .tnc-link-area li a {font-size:1.4rem; line-height:1.2;}

	#stateWrap .policy-area>div {padding-bottom:0;}
	#stateWrap .policy-area>div>div:first-child {padding:70px 40px;}
	#stateWrap .policy-area .title {margin-bottom:1rem; font-size:1.9rem;}
	#stateWrap .policy-area .check-area {font-size:1.4rem;}
	#stateWrap .policy-area .check-area .each {padding:7px 0;}
	#stateWrap .policy-area .check-area .details {flex: 0 0 11%;}
	#stateWrap .policy-area .btn-area {margin-top:1em; padding:5em 0 5.9em;}
	#stateWrap .check-line input+span {margin-left:2em;}
	#stateWrap .check-line input[type=checkbox] {margin:0.4em 1.4em 0 0; width:1.4rem; height:1.4rem; border-radius:0.24em;}
	#stateWrap .check-line input[type=checkbox]:checked:before {left:2px; top:2px; width:1rem; height:0.6rem;}
	#stateWrap .simple-terms {margin-top:0; margin-left:6rem;}

	#stateWrap .btn-area.visible>div {padding:70px 0;}
	#stateWrap .btn-default {padding:14px 36px; min-width:450px; height:90px; line-height:1.4; border-radius:2.5em; font-size:1.5rem;}

	#stateWrap .xtext-area .content {padding:50px 40px; font-size:1.5rem;}
	#stateWrap .xtext-area .title {margin:0; font-size:2rem;}
	#stateWrap .xtext-area li {margin-top:1rem;}

	#stateWrap .share-area {padding:52px 65px;}
	#stateWrap .share-area .title {font-size:1.8rem;}
	#stateWrap .share-area .fa {width:59px; height:59px; background-size: 220px 220px;}
	#stateWrap .share-area .kakao-talk {background-position: -129px 0px;}
	#stateWrap .share-area .sharevia {background-position: -67px -130px;}
	#stateWrap .share-area .email {background-position: 0px 0px;}
	#stateWrap .share-area .message {background-position: -66px -2px;}
	#stateWrap .share-area .twitter {background-position: 0px -65px;}
	#stateWrap .share-area .facebook{background-position: -66px -66px;}
	#stateWrap .share-area .naver-band {background-position: -2px -128px;}
	#stateWrap .share-area .naver-line {background-position: -129px -66px;}

	/* app downdload */
	#stateWrap .apps-download .list {padding:32px 0;}
	#stateWrap .apps-download .list .app-box:only-child {padding:12px;}
	#stateWrap .app-box:only-child .thumb {flex:0 0 22%; width:130px; height:130px;}
	#stateWrap .app-box:only-child .details {margin:8px 0 8px 12px;}
	#stateWrap .app-box:only-child .details .name span, #stateWrap .new .app-box:only-child .details .name span {margin:0 130px 0 0; font-size:2rem;}
	#stateWrap .app-box:only-child .details .desc {margin-right:130px;}
	#stateWrap .apps-download .new .app-box .desc, #stateWrap .pre-order .new .app-box .desc {padding-top:6px; font-size:1.4rem;}
	#stateWrap .apps-download .new .app-box .purchases, #stateWrap .pre-order .new .app-box .purchases {padding-top:2px; font-size:1.4rem;}
	#stateWrap .apps-download .new .app-box .age, #stateWrap .apps-download .new .app-box .purchases {margin-right:130px; padding-top:14px; font-size:1.4rem;}
	#stateWrap .app-box .details .download {width:100px; height:46px;}

	/* attend check */
	.tabs-component .tab {padding:12px 30px 0;}
	.tabs-component .tab li .tablinks {font-size:23px;}
	.tabs-component .tab li:before {height:2px;}
	.tabs-component .tab li.active:before {height:3px;}

	/* stamp */
	.stamp-area .attendance-res {padding:57px 30px 0; margin-bottom:22px;}
	.stamp-area .attendance-res .res .tit {font-size:30px;}
	.stamp-area .attendance-res .res .cnt {width:188px; height:188px; background-size:188px auto; font-size:55px;}
	.stamp-area .attendance-res .res .cnt span {margin:-2px 0 0 -2px; width:109px; height:109px; line-height:109px;}
	.stamp-area .attendance-res .res .cnt span em {width:41px; height:41px; font-size:18px; line-height:30px;}
	.stamp-area .attendance-res .res .lead {margin-top:19.5px; font-size:21px;}
	.stamp-area .stamp-attendance div.stamps {padding:30px 0 47px 30px;}
	.stamp-area .stamp-attendance div.stamps>div {width:88px; height:88px;}
	.stamp-area .stamp-attendance div.stamps>div .date, .stamp-attendance div.stamps>div .text {font-size:18px;}
	.stamp-area .stamp-attendance div.stamps>div .text {bottom:42px;}
	.stamp-area .stamp-attendance div.stamps>div .date {bottom:23px;}

	/* ranking */
	.ranking-area {padding:29px 29px 35px;}
	.ranking-area .center {font-size:33px;}
	.ranking-area .ranking-pack {margin:0 36px; padding:80px 0 0;}
	.ranking-area .ranking-pack .bar {height:10px;}
	.ranking-area .ranking-pack .bar .rating-bar {height:3px;}
	.ranking-area .ranking-pack .bar .rating-point {bottom:13px; height:39px;}
	.ranking-area .ranking-pack .bar .rating-point .balloon {font-size:21px; padding:7px 8px; height:30px;}
	.ranking-area .ranking-pack .bar .rating-point .balloon:after {border-width:10px; margin-left:-10px;}
	.ranking-area .ranking-pack .bar .ruler {height:10px;}
	.ranking-area .ranking-pack .bar .ruler div {width:1.6px; height:10px;}
	.ranking-area .ranking-pack .bar .ruler div>span {font-size:18px;}
	.ranking-area .ranking-pack .bar:after {height:3px;}

	.ranking-area .ranking-cnt {margin-top:110px;}
	.ranking-area .ranking-cnt .my-cnt {font-size:35.5px; line-height:1.5;}
	.ranking-area .ranking-cnt .first-place {font-size:21px;}

	.ranking-area .ranking-cnt .cheering {font-size:21px; margin-top:21px; padding-top:36px; line-height:1.14;}
	.ranking-area .ranking-cnt .cheering:before {width:30px; height:1.5px; margin-left:-15px;}

	/* reward */
	#stateWrap .reward-area {}
	#stateWrap .reward-area .reward-info {padding-bottom:45px;}
	#stateWrap .coupon-list-area .coupon-txt .name {font-size:2rem;}
	#stateWrap .coupon-list-area .coupon-txt .help-txt {margin:20px 0 0; font-size:1.8rem;}
	#stateWrap .coupon-list-area .coupon-txt .counting {margin-top:20px; font-size:2rem;}

	#stateWrap .guerilla-announce {height:347px; font-size:30px;}
	.guerilla-announce .help {margin-top: 20px; font-size: 20px; line-height: 20px;}
	.instant-result-txt {margin:20px 0; font-size:21px;}
	.instant-lottery {}
	.instant-lottery .result {padding:30px 0;}
	.instant-lottery .result .greeting {font-size:30px;}
	.instant-lottery .result-img-area {margin:26px 0 20px;}
	.instant-lottery .result-txt {font-size:25px;}

	/* delivery */
	#stateWrap .delivery-area {padding:45px;}
	#stateWrap .delivery-area .info-txt {padding:0 0 40px;}
	#stateWrap .delivery-area .delivery-set {border-bottom: 1px solid rgba(0,0,0,.1); margin-bottom: 50px; padding: 50px 0;}
	#stateWrap .delivery-set .info-line {padding:10px 0 0;}
	#stateWrap .delivery-set .con-txt, #stateWrap .delivery-set .tit-txt {font-size:1.9rem;}

	/* shipping */
	#stateWrap .info-input-area {padding:50px 45px;}
	#stateWrap .info-input-area .title {padding:20px 0; border-bottom:1px solid rgba(0,0,0,.1); font-size:2rem;}
	#stateWrap .address .info-txt {padding:20px 0; font-size:1.9rem;}
	#stateWrap .info-input-area .info-set {margin-bottom:45px; padding:30px 0 35px; border-bottom:1px solid rgba(0,0,0,.1);}
	#stateWrap .info-input-area .info-line {margin-top:20px;}
	#stateWrap .info-line label {margin-bottom:10px; font-size:1.5rem;}
	#stateWrap .info-line label .extra {font-size:1.8rem;}
	#stateWrap .info-line input {margin-bottom:10px; padding:10px; border:1px solid #f2f4f5; border-radius: 0.5rem;}

	/* error page */
	#stateWrap #stateWrap .exception-area {
		background-color: #fcfcfc;
		padding: 0 2.5rem 3rem;
		text-align: center
	}
	#stateWrap .exception-area .msg-area {
		border-bottom: 1px solid rgba(0,0,0,.1);
		padding: 5.972rem 0.833rem 3.333rem
	}
	#stateWrap .exception-area .msg-area .first {
		color: #5a6e91;
		font-size: 2.25rem;
		min-height: 19.722rem;;
		padding-bottom: 19.722rem;;
		position: relative
	}
	#stateWrap .exception-area .msg-area .first strong {
		display: block;
		margin-bottom: 4.167rem;
	}
	
	#stateWrap .exception-area .msg-area .first:after {
		background: url(/mcp25/dist/prd_kr/21.13.01-ssy0001/res/img/icon_clode.ba15429..png) no-repeat 50% 0;
		background-size: 19.722rem 19.722rem;
		bottom: 0;
		content: "";
		height: 19.722rem;;
		left: 50%;
		margin-left: -9.861rem;
		position: absolute;
		width: 19.722rem;
	}
	#stateWrap .exception-area .msg-area .first_pay {
		color: #5a6e91;
		font-size: 2.222rem;
		min-height: 19.722rem;;
		padding-bottom: 19.722rem;;
		position: relative
	}
	#stateWrap .exception-area .msg-area .first_pay strong {
		display: block;
		margin-bottom: 4.167rem;
	}
	#stateWrap .exception-area .msg-area .first_pay:after {
		background-size: 19.722rem 19.722rem;
		bottom: 0;
		content: "";
		height: 19.722rem;;
		left: 50%;
		margin-left: -9.861rem;
		position: absolute;
		width: 19.722rem;
	}
	#stateWrap .exception-area .msg-area .first_themes {
		color: #595fb3;
		font-size: 2.222rem;
		min-height: 19.722rem;;
		padding-bottom: 19.722rem;;
		position: relative
	}
	
	#stateWrap .exception-area .msg-area .first_themes strong {
		display: block;
		margin-bottom: 4.167rem;
	}
	#stateWrap .exception-area .msg-area .first_themes:after {
		background-size: 19.722rem 19.722rem;
		bottom: 0;
		content: "";
		height: 19.722rem;;
		left: 50%;
		margin-left: -9.861rem;
		position: absolute;
		width: 19.722rem;
	}
	#stateWrap .exception-area .msg-area .first_apps {
		color: #595fb3;
		font-size: 2.222rem;
		min-height: 19.722rem;;
		padding-bottom: 19.722rem;;
		position: relative
	}
	#stateWrap .exception-area .msg-area .first_apps strong {
		display: block;
		margin-bottom: 4.167rem;
	}
	#stateWrap .exception-area .msg-area .first_apps:after {
		background-size: 19.722rem 19.722rem;
		bottom: 0;
		content: "";
		height: 19.722rem;;
		left: 50%;
		margin-left: -9.861rem;
		position: absolute;
		width: 19.722rem;
	}
	
	#stateWrap .exception-area .msg-area .second {
		color: #8b8b8b;
		font-size: 1.944rem;
		margin-top: 4.167rem;
	}
	
	#stateWrap .exception-area .msg-area .second_apps {
		color: #989898;
		font-size: 1.944rem;
		margin-top: 4.167rem;
	}
	
	#stateWrap .exception-area .hidden-area {
		padding: 5.972rem 0.833rem 3.333rem
	}
	
	#stateWrap .exception-area .msg-area .needpoint {
		color: #5a6e91;
		font-size: 2.222rem
	}
	
	#stateWrap .exception-area .help-area {
		color: #717171;
		font-size: 1.806rem;
		padding: 3.333rem 0.833rem 4.444rem;
		position: relative
	}
	
	#stateWrap .exception-area .help-area .line {
		color: rgba(0,0,0,.66);
		margin-bottom: 2.95rem;
		position: relative
	}
	
	#stateWrap .exception-area .help-area .line:after {
		border-top: 1px solid rgba(0,0,0,.1);
		content: "";
		height: 0;
		left: 50%;
		margin-left: -1.35rem;
		margin-top: -1.528rem;
		position: absolute;
		top: 0;
		width: 2.699rem
	}
	
	#stateWrap .exception-area .help-area .line:first-of-type:after {
		content: none
	}
	
	#stateWrap .exception-area .help-area .line strong {
		color: rgba(0,0,0,.66)
	}
	
	#stateWrap .exception-area .point-area {
		padding: 1.944rem 0.833rem 0
	}
	
	#stateWrap .exception-area .point-area .line {
		-webkit-align-items: center;
		align-items: center;
		-webkit-display: flex;
		display: flex;
		font-size: 2.222rem;
		padding: 1.806rem 0 0;
		position: relative
	}
	
	#stateWrap .exception-area .point-area .line:before {
		border-bottom: 1px dashed #565656;
		content: " ";
		display: block;
		-webkit-flex: 5 0 auto;
		flex: 5 0 auto;
		height: 1px;
		margin-left: 0.722rem;
		margin-right: 0.125rem;
		opacity: .8;
		position: relative
	}
	
	#stateWrap .exception-area .point-area .line strong {
		color: rgba(0,0,0,.66);
		font-size: 2.083rem;
		order: -1
	}
	
	#stateWrap .exception-area .point-area .line .require {
		color: #3957ac
	}
	
	#stateWrap .exception-area .point-area .line .rest {
		color: #5a6e91
	}

}

@media (prefers-color-scheme: dark) {
	/* Body */
	body { background-color: #010101; }
	
	/* Button */
	.btn-area { margin: 0; padding: 5.833334vmin 0; text-align: center; }
	.btn-default { background-color: #4897e1; color: #fff; }
	.btn-default.disabled,
	.btn-default.gray { border-color: #494949; background-color: #494949; color: #fafafa; }
	
	/* btn class active add */
	.btn:active,
	.btn-default:active { box-shadow: inset 0 3px 5px rgba(255,255,255,.2) !important; }
	
	/* Notice */
	.notice-area { background-color: #252525; color: #9c9c9c; }
	.notice-area .title { color: #fafafa; }
	.tnc-link-area li a { color: #3957ac; }
	
	/* Modal */
	.modal.modal-dialog-bottom .modal-content { background: #252525; }
	.modal.modal-dialog-bottom .modal-footer .btn-modal:after { background: #3f3f3f; }
	.pkg-promo-instant .result { color: #e5e5e5; }
	
	/* Rewards point */
	.lbs-set-w .btn-view { background-color: #494949; color: #fafafa; }
	
	/* Shipping */
	.info-input-area .title { color: #fafafa; border-bottom-color: #3f3f3f; }
	.info-line label { color: #fafafa; }
	.info-line input { border-color: #252525; background: #252525; color: #4897E1; }
	.info-line input::placeholder { color: #9c9c9c; }
	.address .info-txt { color: #9c9c9c; border-bottom-color: #3f3f3f; }
	
	/* Text */
	.lbs-header-tit { color: #fafafa; }
	.result-area .help { color: #fafafa; }
	
	/* Voucers issued */
	.coupon-list-area .coupon-txt .name { color: #fafafa; }
	.coupon-list-area .coupon-txt .help-txt { color: #9c9c9c; }
	.coupon-list-area .coupon-txt .counting { color: #e5e5e5; }
	
	/* Mission */
	.m-circle-wrap .cbox { border-color: #4b4b4b; background :#252525; }
	.c100:after{ background: #252525; }
	.c100 .value .count { color: #fafafa; }
	.c100 .value .txt { color: #4897E1; }
	.c100 .bar,
	.c100.p100 .fill { border: 0.08em solid #4897E1 !important; }
	.m-circle-wrap .btn-default { background: #252525; border-color: #fafafa; color: #fafafa; }
	
	/* Rewards Join */
	.lbs-reward-inner { background: rgba(0,0,0, .8); }
	.lbs-reward-w .lbs-reward-txt { color: #fafafa; }
	
	/* Shipping - delivery */
	.delivery-area .info-txt { color: #9c9c9c; border-bottom-color: #3f3f3f; }
	.delivery-set .tit-txt { color: #fafafa; }
	
	/* Sns sharing */
	.share-area .title { color: #fafafa; }
	
	/* Vouchers Counting */
	.mission-set-w .title { color: #fafafa; }	
	
	/* Exception */
	.exception-area { background: #080808; }
	.exception-area .msg-area { border-bottom-color: #3f3f3f; }
	.exception-area .point-area .line strong { color: #e5e5e5; }
	.exception-area .point-area .line:before { border-bottom: 1px dotted #9c9c9c; }
	
	/* Loading */
	.paper-loading { background: #080808; }
	.paper-loading .paper-spinner { border-left-color: rgba(255, 255, 255, .4); border-right-color: rgba(255, 255, 255, .4); border-bottom-color: rgba(255, 255, 255, .4); border-top-color: #4897e1; }
	
	/* Giftcard Dark */
	.giftcard-tab::before { background: #252525; box-shadow: -.277778vmin -.277778vmin .555556vmin rgba(0, 0, 0, .5); }
	.giftcard-tab::after { background: #252525; box-shadow: -.277778vmin -.277778vmin .277778vmin rgba(0, 0, 0, .5); }
	.giftcard-tab .btn-tel { background-position:-.1388889vmin -5.833333vmin; }
	.giftcard-tab .btn-info { background-position: -5.833333vmin -5.833333vmin; }
	.giftcard-cardinfo,
	.giftcard-operation,
	.giftcard-info { background: #252525; }	
	.giftcard-cardinfo .inner { border-bottom: .277778vmin solid #3f3f3f; }
	.giftcard-cardinfo .guide { color: #9c9c9c; }
	.giftcard-cardinfo .hide-num span { background: #e5e5e5; }
	.giftcard-tit { color: #fafafa; }
	.giftcard-tit-sub { color: #e5e5e5; }
	.giftcard-defined dt,
	.giftcard-defined dd { color: #e5e5e5;}
	.giftcard-operation .inner { border-bottom: .277778vmin solid #3f3f3f; }
	.giftcard-operation .btn-wrap .btn-default { color: #fafafa; background: #494949; }
	.giftcard-operation .guide { color: #9c9c9c; }
	.giftcard-operation .btn-more { color: #898989; }
	
	.giftcard-redeem { background: #080808; }
	.giftcard-redeem .tit span { background: #080808; }
	.giftcard-redeem .desc { color: #9c9c9c; }
	.giftcard-cs { background: #080808; }
	.giftcard-cs .cs .defined dt { color: #9c9c9c; }
	.giftcard-cs .cs .defined dd { color: #9c9c9c; }
	
	.giftcard-btn { background: #080808; }

	.giftcard-card .card-img .card-name { color: #fafafa; }
	.giftcard-card .card-img .card-info { color: #9c9c9c; }
	.giftcard-card .card-img .card-info span { color: #3957ac; } 
	
	/* Giftcard Actionbar */
	.actionbar .tit,
	.actionbar .gift-store,
	.actionbar .btn-more::before { color: #fafafa; }
	.actionbar .btn-back::before { background-position: 50% 1.388889vmin; }
	
	/* LBS Dark mode css */
	.lbs-txt-area > h3 { color: #fafafa; }
	.lbs-txt-area > p { color: #999; }
	.lbs-map-default .lbs-header-tit { color: #fafafa; }
	.lbs-map-default .lbs-map-inner { background: #252525; border-color: #252525; }
	.lbs-map-default .lbs-map-name strong { color: #fafafa; }
	.lbs-map-default .lbs-map-name small { color: #9c9c9c; }
	.lbs-map-default .lbs-map-addr { color: #e5e5e5; }
	
	/* [SMCS-10876] map load failed case add dark */
	.lbs-map-failed { background: transparent; border-color: rgba(192,192,192, .5); }
	.lbs-map-failed .btn-retry { background: #494949; color: #f0f0f0; }
	
	/* Toggle Switch dark */
	.toggle-switch .toggle-switch-txt { color: #fafafa; }
	
	/* Coupon darkmode css */
	.coupon-action-btn .btn { background: rgba(255,255,255,.17); color: #fafafa; }
	.coupon-btn { background: #010101; }
	.coupon-code-btn .btn { color: #fafafa; }
	.coupon-code-btn .btn.unused { background: rgba(255,255,255,.17); color: #fafafa; }
	
	.coupon-code { background: #171717; border-radius: 26px; padding: 10px 0; }
	.coupon-code .barcode { background: #fafafa; margin: 0 48px; border-radius: 8px; padding: 12px 0; min-height: 106px; }
	.coupon-code .barcode .detail { padding-bottom: 1.944444vmin; }
	.coupon-code .qrcode { background: transparent; margin: 0 48px; border-radius: 8px; padding: 12px 0; min-height: 106px; }
	.coupon-code .qrcode .qrcode-area { background-color: #fff; }
	.coupon-code .qrcode-num { color: #fafafa; }
	.coupon-code .qrcode-num::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16' class='iconify iconify--bi'%3E%3Cg fill='currentColor'%3E%3Cpath fill-rule='evenodd' stroke='white' d='M6.5 12a5.5 5.5 0 1 0 0-11a5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0a6.5 6.5 0 0 1 13 0z'%3E%3C/path%3E%3Cpath fill='white' d='M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1a6.538 6.538 0 0 1-1.398 1.4z'%3E%3C/path%3E%3Cpath fill-rule='evenodd' fill='white' d='M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); }
	.coupon-code .qrcode-num.only-zoom { transform: translate(calc(-50% - -57px), calc(-50% - -35px)); }
	.coupon-code .qrcode .detail p { color: #e5e5e5; }
	.coupon-code .code-num label,
	.coupon-code .qrcode .detail .btn { color: #9c9c9c; }
	.coupon-code .qrcode .detail .btn:before { background: url(../img/coupons_detail_expand_dark.png) no-repeat 0 0; background-size: 4.722223vmin; }
	.coupon-code .code-num .num { color: #fafafa; }
	.coupon-code .code-copy-msg { color: #9c9c9c; }
	
	.coupon-code .serial-num { background: transparent; padding: 10px 0; margin: 0 48px; border-radius: 8px; min-height: 106px; }
	.coupon-code .serial-num span { color: #fafafa; }
	.coupon-code .code-copy { background: transparent; padding: 10px 0; margin: 0 28px; border-radius: 8px; min-height: 106px; }
	.coupon-code .code-copy .num { color: #fafafa; }
	.coupon-code .code-copy .txt { color: #999; }
	.coupon-code .code-copy .btn-copy { background: #2d2d2d; color: #fafafa; }
	.coupon-code .code-copy .url { color: #fafafa; }
	
	/* [SMCS-20050] OneUI 5.0 GUI 잔여 사항 적용 */
	.coupon-code .code-image { background-color: #171717; }
	.coupon-code .code-image .zoom::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16' class='iconify iconify--bi'%3E%3Cg fill='currentColor'%3E%3Cpath fill-rule='evenodd' stroke='white' d='M6.5 12a5.5 5.5 0 1 0 0-11a5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0a6.5 6.5 0 0 1 13 0z'%3E%3C/path%3E%3Cpath fill='white' d='M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1a6.538 6.538 0 0 1-1.398 1.4z'%3E%3C/path%3E%3Cpath fill-rule='evenodd' fill='white' d='M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); }
	.coupon-code .code-image .txt { color: #999; }
	
	.coupon-date-info { background-color: #171717; }
	.coupon-date-info .sender dt { color: #fafafa; }
	.coupon-date-info .sender dd { background-color: #252525; color: #e5e5e5; }
	.coupon-date-info .data dt { color: #999; }
	.coupon-date-info .data dd { color: #999; }	
	.coupon-date-info .btn-tooltip:after { border-bottom-color: rgba(52,56,68,1); }
	.coupon-date-info .tooltip .tooltip-msg { background: rgba(52,56,68,1); }
	.coupon-date-info .tooltip .btn-tooltip-close { background: rgba(100, 106, 125, .65); }
	
	.coupon-description-list { background: transparent; }
	.coupon-description-list .coupon-desc-list > li { border-top-color: #3f3f3f; }
	.coupon-description-list .coupon-desc-list > li > a { color: #e5e5e5; }
	.coupon-description-list .coupon-desc-list > li > a:after { border-color: #fafafa; }
	.coupon-description-list .coupon-desc > ul > li,
	.coupon-description-list .coupon-desc > ul > li > strong { color: #999; }
	
	.coupon-description { background: transparent; }
	.coupon-description .title { color: #e5e5e5; }
	.coupon-description .coupon-notice-define { color: #999; }
	
	.coupon-detail-txt .coupon-name { color: #fafafa; }
	.coupon-detail-txt .coupon-bname,
	.coupon-detail-txt .coupon-purchase-date,
	.coupon-detail-txt .coupon-order-num { color: #e5e5e5; background: url(../img/coupons_layer_next_dark_bg.png) no-repeat 100% 5px; background-size: 12px; }
	
	.coupon-detail-txt .coupon-bname-link:after { border-color: #9c9c9c; }
	.coupon-detail-txt .coupon-price-benefit .price-benefit,
	.coupon-detail-txt .coupon-price-benefit .reward { color: #999; }
	.coupon-detail-txt .coupon-price-benefit .btn-benefit:before { color: #171717; border-color: #999; background-color: #999; }
	
	.coupon-payment-cancel .payment-detail .cname { color: #fafafa; }
	.coupon-payment-cancel .payment-detail .date { color: #9c9c9c; }
	.coupon-payment-cancel .purchase-info .tit { color: #999; }
	.coupon-payment-cancel .purchase-info .tit::after { border-top-color: #fafafa; opacity: .26; }
	.coupon-payment-cancel .purchase-info dt { color: #e5e5e5; }
	.coupon-payment-cancel .purchase-info dd { color: #6A8AC2; }
	
	.coupon-info { background: #010101; }
	.coupon-info address,
	.coupon-info .copyright { color: #9c9c9c; }
	.coupon-info address a,
	.coupon-info .link a { color: #e5e5e5; }
	
    .coupon-purchase { background-color: #171717; }
	.coupon-purchase .tit { color: #fafafa; }
	.coupon-purchase .tit::after { border-top-color: #fafafa; opacity: .26; }
	.coupon-purchase .listbox dt { color: #999; }
	.coupon-purchase .listbox dd { color: #999; }
	.coupon-purchase .listbox li.total { background: #252525; }
	.coupon-purchase .listbox li.total dt, 
	.coupon-purchase .listbox li.total dd { color: #e5e5e5; }
	.coupon-purchase .tooltip .tooltip-msg { background: rgba(52,56,68,1); }
	.coupon-purchase .btn-tooltip:after { border-bottom-color: rgba(52,56,68,1); }
	.coupon-purchase .tooltip .btn-tooltip-close { background: rgba(100, 106, 125, .65); }
	
	.coupon-purchase-list { background-color: #171717; }
	.coupon-purchase-list .count { color: #fafafa; border-bottom: 1px solid rgba(255,255,255,.15); }
	.coupon-purchase-list .listbox .listbox-info .items { color: #999; }
	.coupon-purchase-list .btnbox .btn, 
	.coupon-purchase-list .btn-all-cancel { background-color: #2d2d2d; color: #fafafa; }
	.coupon-purchase-list .cancel-list { color: #fafafa; }
	.coupon-purchase-list .lead .tit { color: #fafafa; }
	.coupon-purchase-list .lead .txt { color: #999; }
	
	.coupon-sendgift-list { background-color: #171717; }
	.coupon-sendgift-list .count { color: #fafafa; }
	.coupon-sendgift-list .listbox .listbox-info .items { color: #999; }
	.coupon-sendgift-list .btnbox .btn,
	.coupon-sendgift-list .count .btn { background-color: #2d2d2d; color: #fafafa; }
	.coupon-sendgift-list .count .cancel-list { color: #fafafa; }
	.coupon-sendgift-list .lead .tit { color: #fafafa; }
	.coupon-sendgift-list .lead .txt { color: #999; }
	
	.coupon-sender-info { background-color: #171717; }
	.coupon-sender-info .sender { color: #fafafa; }
	.coupon-sender-info .message { color: #999; }
	
	/* [SMCS-8821] 0416~ (darkmode) */
	.coupon-scroll-banner { background-color: #252525; }
	.coupon-scroll-banner .tit { color: #fafafa; }
	.coupon-scroll-banner .list-banner .list .ban-name { color: #fafafa; }
	.coupon-scroll-banner .list-banner .list .ban-brand { color: #e5e5e5; }
	.coupon-scroll-banner .swipe-paging .bullet { background-color: #fff; opacity: .5; }
	.coupon-scroll-banner .swipe-paging .bullet.active { background-color: #fff; opacity: 1; }
	
	.coupon-scroll-category .tabs .tabs-category { border-bottom-color: #a8a9a9; }
	.coupon-scroll-category .tabs .tabs-category li a { color: #a8a9a9; }
	.coupon-scroll-category .tabs .tabs-category li.active a { color: #fafafa; border-bottom-color: #fafafa; }
	.coupon-scroll-category .swipe-category .list-category .list-name { color: #e5e5e5; }
	.coupon-scroll-category .swipe-category .list-category li.active .list-name { color: #3970F3; }
	.coupon-scroll-category .swipe-paging .bullet { background-color: #fff; opacity: .5; }
	.coupon-scroll-category .swipe-paging .bullet.active { background-color: #fff; opacity: 1; }
	.coupon-scroll-category { background: #171717; }
	.coupon-scroll-category .swipe-category .list-category li.active .logo:before { background-image: url(../../res/img/coupons_eua_img_logo_selected_dark.png); }
	
	/* [SMCS-9120] 0512~ (darkmode) */
	.coupon-lists .util .cnt,
	.coupon-lists .util .btn-sort { color: #9c9c9c; }
	.coupon-lists .util .btn-sort:after { background-position: 0 -8px; }
	.coupon-lists .list .info .cname { color: #fafafa; }
	.coupon-lists .list .info .cbrand,
	.coupon-lists .list .info .expired-date { color: #999; }
	.coupon-lists .list li:after { background: #3f3f3f; }
	.coupon-lists .util .list-sort { background: #3d3d3d; border-color: #525252; }
	.coupon-lists .util .list-sort .btn-opt { color: #fafafa; }
	.coupon-lists .list .info .options span { background: rgba(57,112,243,.18); }
	.coupon-lists .list .expired .thumb .badge { background-color: #a3a3a3; }
	

	/* [SMCS-12354] Darkmode */
	.modal-backdrop.coupon { opacity: .65;}
	.modal-dialog.modal-coupon-benefit .modal-title,
	.modal-dialog.modal-coupon-benefit .subject { color: #fafafa; }
	.modal-dialog.modal-coupon-benefit .details { color: #999; }

	/* [SMCS-11566] 쿠폰샵 GUI 업데이트 */
	.coupon-recommend { background-color: #171717; }
	.coupon-recommend .tit { color: #fafafa; }
	.coupon-recommend .recommend-list .name { color: #fff; }
	.coupon-recommend .recommend-list .brand { color: #999; }
	
	.coupon-tab-description { background: #171717; }
	.coupon-tab-description .tabs .btn-tab { color: #999; }
	.coupon-tab-description .tabs .btn-tab.active { color: #e5e5e5; background-color: #2d2d2d; }
	.coupon-tab-description .tit { color: #e5e5e5; }
	.coupon-tab-description .explain .inner { border-color: #3f3f3f; }
	.coupon-tab-description .explain .inner dl { color: #999; }
	.coupon-tab-description .btn-more { color: #ccc; }
	.coupon-tab-description .info .desc-list > li { border-color: rgba(255,255,255,.15); }
	.coupon-tab-description .info .desc-list > li > a { color: #e5e5e5; }
	.coupon-tab-description .info .desc-list > li > a:after { border-color: #fafafa; }
	.coupon-tab-description .info .desc-cont { color: #999; }
	
	/* SMCS-8999, Quiz (Darkmode)*/
	.quiz .title,
	.quiz .question { color: #fafafa; }
	.quiz .choice .choice-list label { background: rgba(250,250,250,.15); color: #fafafa; }
	.quiz .hint { color: #747474; }
	.quiz .hint .hint-label { color: #e5e5e5; }
	.quiz .hint .hint-label:before { background: #3f3f3f; }
	.quiz .btn-wrap .btn-default,
	.quiz .btn-wrap .btn-default:disabled { background: rgba(250,250,250,.17); color: #fafafa; }
	
	.quiz .step-progress li span { border: .416667vmin solid rgba(255,255,255,.15); color: rgba(255,255,255,.15); background: rgba(255,255,255,.2); }
	.quiz .step-progress li.active span { border-color: #fafafa; color: #fafafa; }
	.quiz .step-progress li:after { background: #3f3f3f; box-shadow: 0 .083333vmin 0 .083333vmin #3f3f3f; }
	.quiz .step-progress li.active:after { background: #e3e3e3; box-shadow: 0 .083333vmin 0 .083333vmin #e3e3e3 }
	
	.quiz .step-progress li.active.success span { background-position: -8.611111vmin -.277778vmin; }
	.quiz .step-progress li.active.wrong span { background-position:  -8.611111vmin -8.888889vmin; }
	
	.quiz .summary { border-top-color: #3f3f3f; }
	.quiz .summary dt { color: #e5e5e5; }
	.quiz .summary dd { color: #8f8f8f; }
	
	.quiz .ox .ox-list li label { background: rgba(255,255,255,0.15); }
	
	.quiz .hint-txt .stit { color: #fafafa; }
	.quiz .hint-txt .hint-ipt { background: #252525; }
	.quiz .hint-txt .hint-ipt::-webkit-input-placeholder,
    .quiz .hint-txt .hint-ipt::placeholder { color: #999; }
	
	.quiz .result .reward .btn-wrap .btn-default,
	.quiz .result .reward .btn-wrap .btn-default:disabled { background: #494949; }
	.quiz .result .reward .gift { background-image: url(../img/bg_quiz_win_dark.png); }
	
	.quiz-popup .txt { color: #fafafa; }
	
	/* [SMCS-12856] 프로모션 리스트 퍼블리싱 */
	.promotion-list-header .tit,
	.promotion-list-header .mypage { color: #fafafa; }
	.promotion-list-header .btn-back:before { border-color: #fafafa; }
	
	.promotion-list-tabs .tabs .link { color: #a8a9a9; }
	.promotion-list-tabs .tabs .link:after { background: #a8a9a9; }
	.promotion-list-tabs .tabs .active .link { color: #fafafa; }
	.promotion-list-tabs .tabs:after { background: #fafafa; }
	
	.promotion-list-thumb .thumb-img { background: #252525; }
	.promotion-list-thumb .thumb-info { background: #171717; border-color: rgba(63,63,63,.5); }
	.promotion-list-thumb .thumb-info .name { color: #fafafa; }
	.promotion-list-thumb .thumb-info .date { color: #9c9c9c; }
	.promotion-list-thumb .thumb-info .point { background: #404040; color: #3970F3; }
	
	.content-placeholder { background-color: #3f3f3f; }
	.content-placeholder:before { background: -webkit-linear-gradient(left, rgba(15, 15, 15, 0) 0%, rgba(100, 100, 100, .3) 50%, rgba(15, 15, 15, 0) 100%); background: linear-gradient(to right, rgba(15, 15, 15, 0) 0%, rgba(100, 100, 100, .3) 50%, rgba(15, 15, 15, 0) 100%); }
	.promotion-list-redeem { background: #171717; }
	.promotion-list-redeem .tit { color: #fafafa; }
	.promotion-list-redeem .point { color: #3970F3; }
  
	/* [SMCS-12886] MPI - darkmode */
	.mpi-dimmed { opacity: .65; }
	.mpi-bottom-sheet { background: #010101; }
	.mpi-bottom-sheet .lead { color: #9c9c9c; }
	.mpi-bottom-sheet .link { color: #fafafa; }
	.mpi-bottom-sheet .btn-return { border: 1px solid rgba(250,250,250,.75); background: transparent; color: #fafafa; }
	.mpi-bottom-sheet .change-region { color: #9c9c9c; }
	.mpi-bottom-sheet .change-region:after { border-color: #9c9c9c; }
	.mpi-logo .txt { color: #fafafa; }
	.mpi-bottom-sheet .btn-cancel { color: #fafafa; background: rgba(250,250,250,.17); }
	
	@media (orientation: landscape) {
		.mpi-logo .logo { background: url(../img/img_pay_logo_white.png) no-repeat 0 50%; background-size: contain; margin-bottom: 4px; }
	}
	
	/* [SMCS-13531] Tips Template Detail - darkmode */
	.tips-actionbar .btn-back:before { border-color: #fafafa; }
	.tips-actionbar .tit { color: #fafafa; }
	.tips-actionbar .btn-menu svg > circle { fill: #fafafa; }
	.tips-content .tit { color: #fafafa; }
	.tips-content .txt { color: #e5e5e5; }
	.tips-content .refer { color: #909090; }
	.tips-content .btn-setting > button { color: #fafafa; background: rgba(250,250,250,.17); }

	/* [SMCS-13488] Promotion-Loading-spinner */
	.loading .txt { color: #fafafa; }
	
	/* [SMCS-15277] Wallet OneUI4.0 Dark */
	.wallet-add { background-color: #010101; }
	.wallet-add .wallet-add-head .tit,
	.wallet-add .wallet-add-stit .stit { color: #fafafa; }
	.wallet-add .wallet-add-status { color: #999; }
	.wallet-add .wallet-add-status .info { border-top: 1px solid rgba(255,255,255, .15) }
	.wallet-add .wallet-add-status .info dt,
	.wallet-add .wallet-add-status .info dd { color: #999; }
	.wallet-add .wallet-add-btn { background-color: #010101; }
	.wallet-add .wallet-add-btn .btn { color: #fafafa; }
	.wallet-add .content-placeholder { background-color: #3f3f3f; }
	.wallet-add .wallet-add-status.large { color: #fafafa; }
	.wallet-add .content-placeholder:before { background: -webkit-linear-gradient(left, rgba(15, 15, 15, 0) 0%, rgba(100, 100, 100, .3) 50%, rgba(15, 15, 15, 0) 100%);background: linear-gradient(to right, rgba(15, 15, 15, 0) 0%, rgba(100, 100, 100, .3) 50%, rgba(15, 15, 15, 0) 100%); }
	
	.global-add .ico-notice { filter: invert(1); }
	.global-add .message,
	.global-add .txt { color: #fafafa; }
	
	/* [SMCS-15844] Coupon OneUI 4.0 기반 컴포넌트 추가/변경 (2차) */
	.coupon-purchase-history .sort .btn-sort { color: #fafafa; }
	.coupon-purchase-history .sort .btn-sort:after { filter: invert(1); }
	.coupon-purchase-history .dataset .bar-title > span { background-color: #010101; color: #999; }
	.coupon-purchase-history .dataset .bar-title:before { border-top-color: rgba(88,88,88,.5); }
	.coupon-purchase-history .sort .list-sort { background: #252525; }
	.coupon-purchase-history .sort .list-sort .btn-opt { color: #999; }
	.coupon-purchase-history .sort .list-sort .active .btn-opt, 
	.coupon-purchase-history .sort .list-sort .btn-opt.active { color: #fafafa; }
	.coupon-purchase-history .sort .list-sort .active .btn-opt:after, 
	.coupon-purchase-history .sort .list-sort .btn-opt.active:after { border-color: #fafafa; }
	.coupon-purchase-history .coupon-list .c-name { color: #fafafa; }
	.coupon-purchase-history .coupon-list .actions { color: #f76f68; }
	.coupon-purchase-history .coupon-list .p-info li,
	.coupon-purchase-history .coupon-list .to { color: #e5e5e5; }
	.coupon-purchase-history .coupon-list .p-info li.purchased { color: #999; }
	.coupon-purchase-history .coupon-list .info { border-bottom: 1px solid #3a3a3a; }
	.coupon-purchase-date dl dt,
	.coupon-purchase-date dl dd { color: #999; }
	
	.coupon-nodata .btn-nodata { background-color: #2d2d2d; color: #fafafa; }
	.coupon-nodata .nodata .msg em { color: #fafafa; }
	.coupon-nodata .nodata .msg { color: #ccc; }
	
	.add-wallet { background-color: #010101; }
	.add-wallet .wallet-add-head .tit { color: #e5e5e5; }
	.add-wallet .wallet-add-txt .c-name,
	.add-wallet .wallet-add-txt .b-name { color: #fafafa; }
	.add-wallet .wallet-add-btn .btn, 
	.add-wallet .loading-txt { background-color: #010101; color: #fafafa; }
	.coupon-default-btn .btn { background-color: #2d2d2d; color: #fafafa; }
	.coupon-default-btn .txt { color: #8c8c8c; }
	
	.coupon-balance { background-color: #171717; }
	.coupon-balance dl dt,
	.coupon-balance dl dd { color: #fafafa; } 
	.coupon-balance .btn-refresh { background: url(../img/coupons_btn_refresh_white.png) no-repeat 0 0; background-size: 34px; background-color: transparent; }
	
	.coupon-app { background-color: #171717; }
	.coupon-app dl dt { color: #fafafa; }
	.coupon-app dl dd { color: #999; }
	.coupon-app .btn-open-app { color: #ccc; }
	
	.coupon-btn .btn { color: #fafafa; }
	
	.coupon-information { background-color: #171717; }
	.coupon-information .tit { color: #fafafa; border-bottom: 1px solid rgba(255,255,255,.08); }
	.coupon-information .define dl dt,
	.coupon-information .define dl dd { color: #999; }
	.coupon-information .define strong { color: #e5e5e5; }
	
	/* [SMCS-16717] 약관 상세 화면 추가 요청 : Darkmode */
	.wallet-terms { background-color: #171717; }
	.wallet-terms .tit { color: #fafafa; }
	.wallet-terms .dates, 
	.wallet-terms .txt { color: #e5e5e5; }
	.wallet-terms .version .btn-previous { border-color: rgba(166,166,166,.5); background-color: #252525; color: #e5e5e5; }
	
	/* [SMCS-17624] Wallet 쿠폰 GUI 적용요청 : Darkmode */
	.coupon-noitem .txt1 { color: #fafafa; }
	.coupon-noitem .txt2 { color: #999; }
    .coupon-noitem .btn-noitem { background-color: #2d2d2d; color: #fafafa; }
    .disabled .coupon-img::before { content: ''; position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; background: #fff; z-index: -1; border-radius: 10px; }
    
    /* [SMCS-19504] 쿠폰함 내 리워즈 링크 추가 : Darkmode */
	.coupon-reward-link { background: rgba(3,129,254,0.25); }
	.coupon-reward-link .tit { color: #fafafa; }
	.coupon-reward-link .link { color: #3e91ff; }
	
	/* [SMCS-20256] Membership(Loyalty) type 월렛 추가 : Darkmode */
	.wallet-add .wallet-add-points { color: #fafafa; }
	.wallet-add .wallet-add-stit .guide { color: #999; }
	.wallet-add .wallet-add-config .config-auto dt { color: #fafafa; }
	.wallet-add .wallet-add-config .config-check > label { color: #e5e5e5; }
	.wallet-add .wallet-add-config .config-check > label::before { background: transparent; }
	.wallet-add .wallet-add-config .config-check > input:checked + label::before { border-color: #010101; }
	
	/* [SMCS-20280] 2Q 쿠폰함 개선 GUI 업데이트 : Darkmode */
	.add-wallet .wallet-add-config .config-check > label { color: #e5e5e5; }
	
	.coupon-notice-box { background: #171717; }
	.coupon-notice-box .tit { color: #fafafa; }
	
	.coupon-gift-information { background: #171717; }
	.coupon-gift-information .tit { color: #fafafa; }
	.coupon-gift-information .gift-wrap .gift-name { color: #fafafa; }
	.coupon-gift-information .gift-wrap .gift-brand { color: #ccc; }
	.coupon-gift-information .gift-wrap .gift-brand { background: url('../img/coupons_layer_next_dark_bg.png') no-repeat 100% 4px; background-size: 12px; }
	.coupon-gift-information .define dl dt,
	.coupon-gift-information .define dl dd { color: #ccc; }
	
	.coupon-card .card-inner::after,
	.coupon-card .card-inner::before { background: #171717; border-color: #171717; }
	.coupon-card .card-expires { color: #999; }
	
	.coupon-lists { background: #171717; }
	.coupon-bottom-btn { background: #010101; }
	
	.coupon-giftbox-tab button { color: #999; }
	.coupon-giftbox-tab button.active { color: #e5e5e5; background-color: #2d2d2d; }
	.coupon-purchase-history .dataset.boxtype { background: #171717; }
	.coupon-purchase-history .coupon-list .reveiced .b-name { color: #999; }
	.coupon-purchase-history .coupon-list .price-benefit .price { color: #3970f3; }
	.coupon-purchase-history .coupon-list .price-benefit .price-benefit, 
	.coupon-purchase-history .coupon-list .price-benefit .reward { color: #999; }
	.coupon-purchase-history .dataset.boxtype .bar-title > span { background: #171717; }
	.coupon-purchase-history .no-history { background: #171717; color: #999; }
	.coupon-purchase-history .no-history em { color: #fafafa; }
	
	.coupon-sent-message .message { color: #fafafa; }
	.coupon-sent-message .given strong { color: #fafafa; }
	
	.coupon-sent-btn button { color: #e5e5e5; background-color: #2d2d2d; }
	 .coupon-gift-information .define .total{ background-color: #252525; }
	 .coupon-gift-information .define .total dt,
	 .coupon-gift-information .define .total dd { color: #e5e5e5; }
	 
	.coupon-sort .btn-sort { color: #fafafa; }
	.coupon-sort .btn-sort:after { filter: invert(1); }
	.coupon-lists .from { color: #fafafa; }
	.coupon-purchase-history .coupon-list .from { color: #fafafa; }
	.coupon-purchase-history .coupon-list .reveiced .expired-date { color: #999; }
	.coupon-purchase-history .coupon-list .given { color: #fafafa; }
  
	 /* [SMCS-20086] PersonalID 모바일사원증 Added GUI : Darkmode */
	.wallet-employee { background-color: #010101; }
	.wallet-employee .wallet-employee-head .tit { color: #fafafa; }
	.wallet-employee .wallet-employee-btn { background-color: #010101; }
	.wallet-employee .wallet-employee-btn .btn { color: #fafafa; }

}

/* [SMCS-9974] Winner(fold) */
@media only screen and (min-device-width: 535px) and (max-device-width: 683px) and (max-device-aspect-ratio: 4/3) {
	/* Button */
	.btn-default { height: 6.153846vmin; font-size: 2.564103vmin; line-height: 3.418803vmin; padding: 1.367521vmin 1.538462vmin; border-radius: 3.589744vmin; color: #252525; }
	
	/* Code */
	.coupon-code .barcode .detail .btn { margin-bottom: -.683761vmin; margin-left: 1.709402vmin; font-size: 1.709402vmin; }
	.coupon-code .barcode .detail .btn:before { left: -2.905983vmin; width: 2.905983vmin; height: 2.905983vmin; background-size: 2.905983vmin 2.905983vmin; }
	.coupon-code .code-num label { font-size: 2.222222vmin; margin-bottom: .854701vmin; }
	.coupon-code .code-num .num { font-size: 3.418803vmin; }
	.coupon-code .code-copy-msg { font-size: 1.709402vmin; padding-top: 1.709402vmin; }
	.coupon-code .qrcode .detail p { font-size: 2.222222vmin; }
	.coupon-code .qrcode .detail .btn { margin-bottom: -.683761vmin; margin-left: 1.709402vmin; font-size: 1.709402vmin; }
	.coupon-code .qrcode .detail .btn:before { left: -2.905983vmin; width: 2.905983vmin; height: 2.905983vmin; background-size: 2.905983vmin 2.905983vmin; }
	
	/* Detail-text */
	.coupon-detail-txt .coupon-purchase-date { font-size: 2.393162vmin; padding-top: 3.076923vmin; line-height: 3.247863vmin; }
	.coupon-detail-txt .coupon-order-num { font-size: 2.393162vmin; padding-top: .683761vmin; line-height: 3.247863vmin; }
	.coupon-detail-txt .coupon-save { font-size: 2.393162vmin; padding-top: .512821vmin; }
	.coupon-detail-txt .coupon-logo { padding: 0 0 1.538462vmin; }
	.coupon-detail-txt .coupon-logo > span { border-width: .170940vmin; border-radius: .341880vmin; padding: .512821vmin 1.196581vmin; }
	.coupon-detail-txt .coupon-logo > span .img-logo { height: 1.538462vmin; }
	.coupon-detail-txt .coupon-price { padding: .683761vmin 0 0; }
	.coupon-detail-txt .coupon-price > span { font-size: 3.931624vmin; }
	.coupon-detail-txt .coupon-price > del { font-size: 2.564103vmin; margin: 0 0 -1.367521vmin 0.76923vmin; }
	
	/* [SMCS-12856] 프로모션 리스트 퍼블리싱 */
	.promotion-list-thumb .thumb-list { padding: 0 15.5px; margin-top: -2px; }
	.promotion-list-thumb .thumb-list > li { width: 50%; float: left; }
	.promotion-list-thumb .thumb-list > li:first-child { margin-top: 16px; }
	.promotion-list-thumb .thumb-inner { padding: 0 8.5px; }
	.promotion-list-thumb .thumb-img { min-height: 22.222222vmin; }
}

/* Fold 2 */
@media only screen and (min-device-width: 674px) and (max-device-width: 884px) {
	/* [SMCS-12856] 프로모션 리스트 퍼블리싱 */
	.promotion-list-redeem { padding: 0 32px 0 24px; }
	.promotion-list-thumb .thumb-list { padding: 0 27px; }
	.promotion-list-thumb .thumb-inner { padding: 0 7px; }
	.promotion-list-thumb .thumb-list > li { width: 50%; float: left; }
	.promotion-list-thumb .thumb-img { min-height: 21.958457vmin; }

	/* [SMCS-11566] 쿠폰샵 GUI 업데이트 */
	.coupon-recommend .tit { padding-bottom: 17px; }
	.coupon-recommend .recommend-list { margin: 0 -7px; }
	.coupon-recommend .recommend-list li { padding: 0 7px; }
}