@charset "utf-8"; 
.txt-center{ width: 100%; display: block; text-align: center !important; width: 100%; }
/*모달버튼*/
.modal_button{ width:100%; float: left; }
.modal_button .modal_button__wrap{ width: 100%; border-top: 0.5px solid #000000; }
.modal_button .modal_button__wrap li{ width:50%; height: 50px; float: left; }
.modal_button .modal_button__wrap li button{ width:100%; height:100%; font-size: 15px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; text-align: center; }

.btn-purple{ font-family: 'Pretendard' !important; background-color: #4c2f6a; color: #f1c172; }
.btn--confirm{ background: #000; color:#fff; }
.btn--cancel{ color:#000; }
.modal_button.one-button .modal_button__wrap li{ width: 100%; }

/*모달 공통 버튼*/
.btn--close{ width:24px; height: 24px; background: url(../img/icon/icn_close_modal.svg) no-repeat; background-position: center; background-size: contain; position: absolute; top: 15px; right: 15px;}

/*모달*/
.modal{ display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; z-index: 1002; }
.modal:after{ display: inline-block; content:''; clear: both; position: absolute; z-index: -1; top:0; left:0; right:0; width:100%; height:100%; background:#000; opacity: 0.4; }
.modal.is-open{ display: block !important; }

/* 모달 | 슬라이드 */
.modal--slide .modal__container{ border-radius: 20px 20px 0 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); background:#fff; position: absolute; left: 0; right: 0; width:100%; transition: bottom 5s ease-in; bottom: -1000px; background-color: #f3eadf; }
.modal--slide.is-open .modal__container{ bottom: 0; }
.modal--slide .modal__contents{ width: 100%; box-sizing: border-box; padding:0 20px; }
.modal--slide .modal__container .list-section{ margin-bottom: 30px; }
.modal--slide .modal__container .main-title { font-size: 14px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.7px; text-align: center; color: #4c2f6a; }
.modal--slide .modal__contents .buttons-wrap{ margin-bottom: 14px; }
.modal--slide .modal__header{ padding:19px 0; text-align: center; }

/* 모달 | 가운데 모달 */
.modal--confirm .modal__container{ height: fit-content; top: 50%; position: absolute; background: #fff; left: 28px; right: 28px; transform: translateY(-50%); border-radius: 4px; overflow:hidden; }
.pc .modal--confirm .modal__container{ left: calc(50% - 250px); right: calc(50% - 250px); }
.modal--confirm .modal__contents { background-color: #f3eadf; }
.modal--confirm .modal__text-wrap{ padding-bottom: 53px; }
.pc .modal__text-wrap ul{ width:100%; box-sizing:border-box; padding: 0 20px; }

/*모달 | 타이틀있는버전*/
.modal--confirm .sub-title{ WIDTH:100%; text-align: center; padding:32px 0 24px; font-family: Pretendard; font-size: 22px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.25; letter-spacing: -0.8px; text-align: center; color: #000; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.modal--confirm .modal__header{ padding:20px 0; text-align: center; }
.modal--confirm .modal__container .list-section{ margin-bottom: 15px; }
/*모달 | 타이틀없는버전*/
.modal--confirm .modal__contents.no-header .modal__text-wrap{ padding-bottom: 58px; }
.modal--confirm .modal__contents.no-header .sub-title{ padding:0; }
.modal--confirm  .modal__contents--noHeader .modal__text-wrap{ margin-top: 44px; text-align: center; }
.modal--confirm .modal__contents .emphasized{ display: inline-block; width: 100%; margin-top: 20px; margin-bottom: 10px; font-family: Pretendard; font-size: 15px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.53; letter-spacing: -0.75px; text-align: center; color: #000; }
.modal--confirm .modal__contents .error{ display: inline-block; width: 100%; font-family: Pretendard; font-size: 12px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.75; letter-spacing: -0.6px; text-align: center; color: #f05252; }
.modal--confirm .modal__text-wrap--center{ text-align: center; }

/*toast팝업*/
.toast{ position: fixed; top: -500px; width: 100%; transition: top 0.5s ease-in-out; }
.toast .list-section--toast i{ float: left; display: inline-block; width: 24px; height: 24px; background: url(../img/common/icn_toast_check.png) no-repeat; background-position: center; background-size: contain; }
.mo .toast.is-open{ top:8px; }
.pc .toast.is-open{ top:40px }
.toast__container{ background: #000; border-radius: 4px; color: #fff; padding: 18px 15px; margin: 0 20px; }
.toast__txt{  float: left; font-size: 12px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.6px; height: 24px; float: left; line-height: 24px; text-align: left; color: #fff; display: inline-block; }
.modal .list-section--toast i { float: left; width:24px; height:24px; background: url(../img/common/icn_info.png) no-repeat; background-size:contain; display:inline-block; }
.modal .modal__text-wrap li{ font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.71; letter-spacing: -0.56px; text-align: left; color: #525357; }

@media (min-width:769px){
.toast__container { background: #000; border-radius: 4px; color: #fff; padding: 18px 15px; margin: 0 calc(50% - 307px); width: 614px; }
}

.modal .buttons ul li button{ position: relative; width: 170px; box-sizing: border-box; padding: 7px 8px; border-radius: 50px; background-color: #ecedf0; font-size: 14px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.56px; text-align: left; color: #000; display: inline-flex; align-items: center; justify-content: left; }
.modal .buttons ul li button span { font-size: 14px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.56px;  }
.modal .buttons ul li.phone-number button span {font-weight: bold;}
.modal .buttons ul li button:after{ content: ''; display: inline-block; clear: both; width: 17px; height: 17px; background: url(../img/common/icn_modal_arrow_right.png) no-repeat; background-position: center; background-size: contain; position: absolute; right: 7px; top: 7px; }
.modal .buttons ul li button i{ width:17px; height:17px; display: inline-block; margin-right: 5px; }

.modal__contents.no-header{ padding: 58px 0 0; }
.modal__contents.no-header .modal__text-wrap--center .text--info.fw--medium{ font-size: 18px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.9px; text-align: center; color: #000; }

@media (max-width:768px){
	.toast__container {
		background: #000;
		border-radius: 4px;
		color: #fff;
		padding: 18px 15px;
		margin: 0 calc(50% - 307px);
		width: 614px;
	}
	.modal__contents.no-header .modal__text-wrap--center .text--info.fw--medium{
		font-size: 15px;
		font-weight: normal;
		font-stretch: normal;
		font-style: normal;
		line-height: 1.33;
		letter-spacing: -0.6px;
		text-align: center;
		color: #000;
	}
}

/* 슬릭 모달 */
.modal--slick .modal__container .flag{ height: 38px; font-size: 16px; font-weight: 500; border-radius: 100px; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.8px; text-align: center; padding:0 22px; margin:0; }/*20220801 마진 제거*/
.modal--slick .dimm{ width:100vw; height:100vh; background:#000; opacity:0.4; position:fixed;top: 0; left: 0; right: 0;z-index: -1; }
.modal--slick .modal__container{ position:absolute; top:calc(50vh - 300px); left:calc(50% - 220px); border-radius: 4px; width:440px; height: auto; min-height: 500px; margin: 0 ; background:#fff; overflow: hidden; padding: 40px 0; text-align: center; overflow:visible; }/* 20220804 */
.modal--slick .carousel-list{ margin-top:28px; overflow: hidden; }
.modal--slick .carousel-list:not(.slick-initialized){ display:none; opacity:0; height:0; width:0; }
.modal--slick .carousel-list__item { float: left; }
.modal--slick .carousel-list__item{ padding: 0 20px; box-sizing: border-box; width: 100%; }
.modal--slick .carousel-list__item .img-wrap img{ display: inline-block; }
.modal--slick .carousel-list__item h5{ font-size: 28px; letter-spacing: -1.4px; font-weight: 600; font-stretch: normal; font-style: normal; text-align: center; margin-bottom:10px; }
.modal--slick .carousel-list__item .info { font-size: 18px; font-stretch: normal; font-style: normal; line-height: 2.14; letter-spacing: -0.9px; text-align: center; }
.modal--slick .slick-dots{ width: 100%; }
.modal--slick .slick-dots li{ font-size: 0; margin-right: 9px; width:9px; height:9px; background-color:#dadce0; border-radius: 10px; }
.modal--slick .slick-dots li:last-child{ margin-right: 0; }
.modal--slick .slick-dots li.slick-active{ background-color: #000; }
.btn-close{ width: 24px; height:24px; position: absolute; top: 18px; right: 18px; background: url(../img/common/icn_close.png) no-repeat; background-position: center; background-size: contain; } 

@media screen and (max-width:768px) {
	.modal--slick .modal__container{ min-height: 448px; width:calc(100% - 56px); margin: 0; left: 28px; right: 28px; top: 60px; }
	.modal--slick .modal__container .flag{ height:28px; width: 150px; font-size: 12px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.67; letter-spacing: -0.6px; text-align: center; }
	.modal--slick .carousel-list{ margin-top:20px; }
	.modal--slick .carousel-list__item .info { font-size: 14px; font-weight: 600; font-stretch: normal; font-style: normal; letter-spacing: -0.7px; }
	.modal--slick .carousel-list__item h5{ font-size: 20px; margin-top:20px; }
	.modal--slick .carousel-list__item .img-wrap img{ height: auto; }
	.modal--slick .carousel-list__item .img-wrap img.pc_on{ display: none; }
	.flag { font-size: 12px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.67; letter-spacing: -0.6px; text-align: center; }
	.modal--slick .slick-dots { margin-top:29px; }
	.modal--slick .slick-dots li{ width: 7px; height: 7px; }
	.img-wrap a{ position:absolute; bottom:32px; right:23px; width:206px; height:54px; }

	.modal--event .modal__container{ top: 60px; }
}
@media (min-width:769px){
	.modal--slick .carousel-list__item .img-wrap img.mo_on{ display: none; }
}


/*오늘하루보지않기 팝업*/
.modal__contents .modal__text-wrap .paragraph{ color:#666; font-size: 15px; text-align: center; padding:0 20px; box-sizing: border-box; line-height: 1.35; }
.modal__container{ position: relative; }
#todayClose .modal__container { overflow:visible; }
.today-close{ position: absolute; bottom: -30px; left: 0; width:100%; display:block; text-align:center; }
.close__button{ width: auto; display: inline-flex; align-items: center; justify-content: left; }/* 20220804 추가 */
.icn_check{ width:20px; margin-right: 7px; height:20px; display: inline-block; background: url(../img/common/icn_mypage_check.png); border:1px solid #eee; border-radius: 100px; background-position: center; background-size: contain; }
.close__button span{ color:#fff; }
@media screen and (max-width:768px){
	.today-close{ left: 0; }
}

/*모달 공통 요소*/
.modal .flag--sm{ min-width: 96px; height: 27px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 18px; object-fit: contain; border-radius: 50px; background-color: #000; color:#fff;  font-size: 14px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.59px; margin-bottom: 0; }
.modal .flag--outlined-black{ padding: 7px 16px; object-fit: contain; border-radius: 50px; border: solid 2px #000; }
.modal .icn-jam{ display: inline-block; width: 32px; height: 32px; background: url(../img/common/icn_modal_jambottle.png) no-repeat; background-size: contain; background-position: center; }

/*이벤트모달*/
.modal--event .modal__container{ text-align: center; background: url(../img/common/img_modal_event_bg.png) repeat; background-size: auto 100%; background-position: center; padding-bottom: 26px; }
.pc .modal--event .modal__container { position: absolute; top: calc(50vh - 300px); left: calc(50% - 275px); right: calc(50% - 275px); width: 550px; text-align: center; background: url(../img/common/img_modal_event_bg.png) repeat; background-size: auto 100%; background-position: center; padding-bottom: 40px; margin-top: 0; }
.modal--event .title-wrap{ border-radius: 4px; padding: 30px 0px 40px; box-sizing: border-box; background: url(../img/common/img_modal_event_honey.png) no-repeat; background-size: auto 188px; background-position: top; min-height: 188px; }
.modal--event .flag--lg{ height: 34px;  padding: 7px 16px; object-fit: contain; border-radius: 50px; border: solid 2px #000; box-sizing: border-box; font-size: 17px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.68px; text-align: center; }
.modal--event .title-wrap .ad-text{ display: inline-flex; align-items: center; justify-content: center; width: 100%; font-size: 22px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.77; letter-spacing: -1.1px; text-align: center; margin-top: 10px; }
.modal--event .icn-smile{ display: block; width: 28px; height: 28px; position: absolute; top: 175px; left: 120px;background: url(../img/common/icon_smile.png) no-repeat; background-size: contain; }
.modal--event .icn-loading{ display: block; width: 18px; height: 18.7px; position: absolute; top: 283px; left: 94px; background: url(../img/common/icn-loading.png) no-repeat; background-size: contain; }
.modal--event .icn-desktopQuestion{ display: block; width: 49px; height: 36.7px; position: absolute; top: 213px; right: 86px; background: url(../img/common/icon-desktopQuestion.png) no-repeat; background-size: contain; }
.modal--event .event-title{ font-size: 38px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.21; letter-spacing: -1.9px; text-align: center; margin-bottom: 37px; }
.modal--event .event-text{ font-size: 18px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.44; letter-spacing: -0.9px; text-align: center; }
.modal--event .period { margin-top: 40px; display: inline-flex; align-items: center; justify-content: center; width: 100%; }
.modal--event .period em { font-size: 20px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -1px; text-align: center; }
.modal--event .additional-txt { opacity: 0.6; color: #000; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.8px; text-align: center; margin-bottom: 34px; margin-top: 7px; display: inline-block; }
.modal--event .evtButton-wrap ul{ display: flex; }
.modal--event .evtButton-wrap ul button{ width: 231px; height: 58px; display: inline-flex; justify-content: center; align-items: center; margin: 0 auto; border-radius: 10px; background-color: #000; color:#fff; font-size: 17px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.51px; text-align: center; }
.modal--event .evtButton-wrap ul button i{ display: inline-block; width: 19px; height: 19px; background:url(../img/common/icn_modal_arrow_right_white.png) no-repeat; background-position: center; background-size: contain; margin-left: 5px; }

@media (max-width:768px){
	.modal--event .modal__container{ position: absolute; left: 28px; right: 28px; width: calc(100% - 56px); }/*20220808*/
	.modal--event .title-wrap{ background:unset; background-color: #fff; height: auto; min-height: unset; padding-bottom: 23px; }
	.modal--event .title-wrap .ad-text { font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.8px; text-align: center; }
	.modal--event .info-wrap{ position: relative; padding-top: 60px; }
	.modal--event .info-wrap:after{ width:100%; background: url(../img/common/img_modal_event_honey_m.png) no-repeat; background-size: 100% auto; height: 115px; background-position: top; content: ''; display: block; clear: both; position: absolute; top: 0; right: 0; }
	.modal--event .event-title { font-size: 28px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.23; letter-spacing: -1.4px; text-align: center; margin-bottom: 23px;}
	.modal--event .event-text { font-size: 15px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.49; letter-spacing: -0.75px; text-align: center; }
	.modal--event .period{ flex-direction: column; margin-top: 20px; }
	.modal--event .period em{ width: 100%; display: inline-block; margin-top: 14px; }
	.modal--event .additional-txt { font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.7px; text-align: center; margin-bottom: 25px; }
	.modal--event .evtButton-wrap ul button{ min-width: 219px; height: 51px; display: flex; justify-content: center; align-items: center; border-radius: 10px; background-color: #000; font-size: 16px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.48px; text-align: center; }
	.modal--event .icn-smile{ width: 21px; height: 21px; top: 51.6px; left: 39.5px; }
	.modal--event .icn-loading{ width: 13.5px; height: 14.1px; top: 126.7px; left: 27px; }
	.modal--event .icn-desktopQuestion{ width: 36.8px; height: 27.6px; top: 74.1px; right: 22px; }
}

.modal--slide .modal__container { top: unset; transform: none; left:0; right:0; border-radius: 20px 20px 0 0;}