@charset "UTF-8";
/*
	author:		simhn1210@cj.net
	date:		2019-07;
	comment:	서프라이즈 위크
 */

/*  surprise */
html {overflow-x:hidden;}
.surpriseweek {color:#1d1d1d !important;margin: 0 auto;width: 1280px; }
.surpriseweek .blind {display:inline-block;position:absolute !important;z-index: -10 !important;height:0 !important;overflow:hidden !important;opacity: 0 !important;font-size:0;line-height:normal;word-break:break-all;}
.surpriseweek .btn-area {margin:0 auto;}
.surpriseweek .btn-area button {width:630px;height:90px;color:#fff;font-size:28px;border-radius:50px;background-color:#1f1f1f;line-height: 90px;}
.surpriseweek [class^=deco__] {
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}
.surpriseweek .emphasize {
	color: #00a05d;
}
.surpriseweek .btn__default {
	display: block;
	width: 100%;
	height: 72px;
	line-height: 70px;
	border-radius: 6px;
	background: #111;
	text-align: center;
	font-size: 23px;
	font-weight: bold;
	color: #fff;
}
.surpriseweek .btn__default.is-issued {
	background: #ccc;
	color: #fff;
	pointer-events: none;
}
.surpriseweek .info__list {
	width: 415px;
	margin: 15px auto  0 auto;
}
.surpriseweek .info__list li {
	position: relative;
	padding-left: 12px;
	font-size: 18px;
	line-height: 1.4;
	color: rgba(17, 17, 17, 0.6);
}
.surpriseweek .info__list li:before {
	position: absolute;
	top: 11px;
	left: 0;
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 100%;
	background: rgba(17, 17, 17, 0.6);
	content: '';
}

/* 상단텍스트 */
.surpriseweek .info__banner {
	width: 100%;
	height: 42px;
	padding: 12px 0 13px 0;
	box-sizing: border-box;
	background: #ededed;
	overflow: hidden;
}
.surpriseweek .info__banner .info__banner--text {
	text-align: center;
}
.surpriseweek .info__banner .info__banner--text p {
	display: inline-block;
	font-size: 17px;
	line-height: 1;
}
.surpriseweek .kivisual {
	position:relative;
	width: 100%;
	height: 520px;
	background:url(/cjom/event/thankstothe/images_2508/kivisual.jpg) no-repeat center / cover;
}
.surpriseweek .kivisual .motion {
	position: absolute;
	top: 0;
	left:50%;
	transform:translateX(-50%);
	height:520px;
}
.surpriseweek .kivisual .motion.after {
	display:none;
}
.surpriseweek.open .kivisual {
	background:url(/cjom/event/thankstothe/images_2508/kivisual_open.jpg) no-repeat center / cover;
}
.surpriseweek.open .kivisual  .motion.before {
	display:none;
}
.surpriseweek.open .kivisual  .motion.after {
	display:block;
}
/* 카운트다운 */
.surpriseweek .countdown__banner {
	position: relative;
	z-index: 1;
	padding: 16px 0;
	box-sizing: border-box;
	background: #00482e;
	text-align: center;
	font-size: 0;
}
.surpriseweek .countdown__banner h3 {
	display: inline-block;
	font-size: 18px;
	line-height: 26px;
	vertical-align: middle;
	color: #fff;
	font-weight: bold;
}
.surpriseweek .countdown__banner div,
.surpriseweek .countdown__banner span,
.surpriseweek .countdown__banner em {
	display: inline-block;
	line-height: 26px;
	height: 26px;
	vertical-align: top;
	font-size: 18px;
}
.surpriseweek .countdown__banner div {
	margin-left: 8px;
}
.surpriseweek .countdown__banner span {
	min-width: 24px;
	padding: 0 7px;
	box-sizing: border-box;
	background: #fff;
	text-align: center;
	border-radius: 4px;
	font-size: 20px;
	color: #111;
}
.surpriseweek .countdown__banner em {
	color: #fff;
	margin: 0 8px 0 3px;
	font-size: 18px;
}
/* 사전예약 초대장 */
@keyframes cloud1 {
	0%,
	100% {
		transform: translateY(-6px);
	}
	50% {
		transform: translateY(0);
	}
}
.surpriseweek .invitation {
	padding: 42px 0;
}
.surpriseweek .invitation h2 {
	margin-bottom: 23px;
	color: #333;
	font-size: 36px;
	line-height: 45px;
	font-weight: bold;
	text-align: center;
}
.surpriseweek .invitation .ticket--wrap {
	position: relative;
	padding-top: 60px;
	animation: cloud1 1.3s 0.5s infinite ease-in-out;
}
.surpriseweek.open .invitation .ticket--wrap {
	animation: none;
}
.surpriseweek .invitation .ticket--wrap .bubble {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: 45px;
	border-radius: 45px;
	background: #c5ecdc;
	z-index: 1;
}
.surpriseweek .invitation .ticket--wrap .bubble div {
	padding: 13px 16px;
	font-size: 19px;
	line-height: 1;
	color: rgba(0, 0, 0, 0.6);
	white-space: nowrap;
}
.surpriseweek .invitation .ticket--wrap .bubble div span {
	color: rgba(205, 20, 20, 0.6);
}
.surpriseweek .invitation .ticket--wrap .bubble div:after {
	position: absolute;
	bottom: -30px;
	left: 66px;
	display: block;
	width: 58px;
	height: 33px;
	background: url(/cjom/event/thankstothe/images_2508/ticket_arr.png) no-repeat 50% / cover;
	content: '';
	z-index: 2;
}
.surpriseweek .invitation .ticket--wrap .ticket {
	width: 561px;
	margin: 0 auto;
}
.surpriseweek .invitation .btn--wrap {
	position: relative;
	z-index: 1; 
	width: 390px;
	margin: -30px auto 0 auto;
}
/* 히든셀렉션 미리보기 */
.surpriseweek .preview {
	padding: 195px 0 60px 0;
	text-align: center;
	background: #009963 url(/cjom/event/thankstothe/images_2508/bg_preview.jpg) no-repeat 50% 0 / auto 534px;
}
.surpriseweek .preview h2,
.surpriseweek .preview h3 {
	font-weight: bold;
	color: #fff;
	line-height: 1.2;
	display:none;
}
.surpriseweek .preview h2 {
	padding: 6px 0 10px 0;
	font-size: 36px;
}
.surpriseweek .preview h2 span {
	color: #f3c87f;
}
.surpriseweek .preview h3 {
	opacity: 0.8;
	font-size; 24px;
}
.surpriseweek .preview h4 {
	display: inline-block;
	padding: 13px 14px;
	background: #00603e;
	border-radius: 35px;
	text-align: center;
	font-size: 0;
	white-space: nowrap;
	display:none;
}
.surpriseweek .preview h4:before {
	display: inline-block;
	width: 19px;
	height: 19px;
	background: url(/cjom/event/thankstothe/images_2508/ico_clock.png) no-repeat 50% / cover;
	margin-right: 5px;
	vertical-align: middle;
	content: '';
}
.surpriseweek .preview h4 div {
	display: inline-block;
	line-height: 19px;
	vertical-align: middle;
	font-size: 17px;
	color: rgba(255, 255, 255, 0.8);
}
.surpriseweek .preview h4 div span {
	color: #f3c87f;
}
.surpriseweek .preview .selection-swiper--wrap {
	position: relative;
	padding: 30px 0 0 0;
	margin: 0 125px;
}
.surpriseweek .preview .selection-swiper--wrap .swiper {
	padding-bottom:42px;
	margin: 0 88px;
	overflow: hidden;
}
.surpriseweek .preview .selection-swiper--wrap .swiper .swiper-slide {
 width: 195px;
}
.surpriseweek .preview .selection-swiper--wrap .swiper-scrollbar {
	position: absolute;
	width: 490px;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	bottom:0 !important;
	background: rgba(255, 255, 255, 0.2);
	height: 3px;
}
.surpriseweek .preview .selection-swiper--wrap .swiper-scrollbar .swiper-scrollbar-drag {
	background: #fff;
	height: 3px;
	border-radius: 0;
}
.surpriseweek .preview .selection-swiper--wrap .swiper-button-prev,
.surpriseweek .preview .selection-swiper--wrap .swiper-button-next {
	display: block;
	width: 42px;
	height: 102px;
	padding: 0;
	margin-top: -51px;
}
.surpriseweek .preview .selection-swiper--wrap .swiper-button-prev:after,
.surpriseweek .preview .selection-swiper--wrap .swiper-button-next:after {
	display: block;
	width: 42px;
	height: 102px;
	padding: 0;
	content: '';
}
.surpriseweek .preview .selection-swiper--wrap .swiper-button-next:after {
	left: 0;
	background: url(/cjom/event/thankstothe/images_2508/btn_next.png) no-repeat 50% / cover;
}
.surpriseweek .preview .selection-swiper--wrap .swiper-button-prev:after {
	left: 0;
	background: url(/cjom/event/thankstothe/images_2508/btn_prev.png) no-repeat 50% / cover;
}
/* 꼭알아두세요 */
.surpriseweek .notice--wrap {
  display: block;
	width: 510px;
  margin: 30px auto 0;
  text-align: center;
  border: 0;
  box-sizing: border-box;
  background: none;
}
.surpriseweek .notice--wrap .accordion__anchor {
  position: relative;
  display: inline-block;
  font-size: 17px;
  line-height: 22px;
  color: #333;
  border-bottom: 1px solid #333;
}
.surpriseweek .notice--wrap .accordion__anchor:before {
  content: '';
  position: absolute;
  top: 3px;
  left: -22px;
  width: 17px;
  height: 17px;
  background: url(/cjom/web/images/icon/ico_evt_notice_info_black.png) no-repeat 50% 50%;
  background-size: 100% auto;
}
.surpriseweek .notice--wrap .accordion__anchor .accordion__arrow {
  position: absolute;
  top: 5px;
  right: -20px;
  margin-right: 0;
  width: 14px;
  height: 14px;
  background: url(/cjom/web/images/icon/ico_evt_notice_arrow_black.png) no-repeat 50% 50%;
  background-size: 100% auto;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.surpriseweek .notice--wrap .accordion__anchor.active .accordion__arrow {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.surpriseweek .notice--wrap .accordion__notice--list {
  width: 100%;
  margin-top: 32px;
}
.surpriseweek .notice--wrap .accordion__notice--list li {
  position: relative;
  padding-left: 14px;
  font-size: 16px;
  color: #585858;
  text-align: left;
  line-height: 1.3;
}
.surpriseweek .notice--wrap .accordion__notice--list li:before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #585858;
}
.surpriseweek .notice--wrap.white .accordion__anchor {
  color: #fff;
  border-bottom: 1px solid #fff;
  opacity: 0.9;
}
.surpriseweek .notice--wrap.white .accordion__anchor:before {
  background: url(/cjom/event/cjsalefesta/25_06_images/ico_notice_alim.png) no-repeat 50% 50%;
  background-size: 100% auto;
}
.surpriseweek .notice--wrap.white .accordion__anchor .accordion__arrow {
  background: url(/cjom/event/cjsalefesta/25_07_images/ico_notice_arrow.png) no-repeat 50% 50%;
  background-size: 100% auto;
}
.surpriseweek .notice--wrap.white .accordion__notice--list li {
  color: #fff;
  opacity: 0.7;
}
.surpriseweek .notice--wrap.white .accordion__notice--list li:before {
  background-color: #fff;
}
/* 앱다운유도 */
.surpriseweek .app--wrap {
	padding: 42px 0 123px 0;
	background:#E3F5ED;
}
.surpriseweek .app--wrap h2 {
	font-size:36px;
	font-weight: bold;
	line-height: 1.2;
	color: #333;
	text-align: center;
}
.surpriseweek .app--wrap h3 {
	margin-top: 4px;
	font-size:19px;
	font-weight: bold;
	line-height: 1.3;
	color: rgba(51,51,51,0.8);
	text-align: center;
}
.surpriseweek .app--wrap ul {
	width: 884px;
	box-sizing: border-box;
	margin:0 auto;
	padding: 37px 50px 47px 50px;
	font-size: 0;
	border: 1px solid #A0D4BD;
	border-radius: 9px;
	margin-top: 26px;
}
.surpriseweek .app--wrap ul li {
	display: inline-block;
	width: 33.3333%;
	vertical-align: top;
}
.surpriseweek .app--wrap ul li dl dt {
	font-size: 22px;
	font-weight: bold;
	color: #444;
	line-height: 1.2;
	padding: 10px 0;
}
.surpriseweek .app--wrap ul li em {
	display:block;
	width: 26px;
	height: 26px;
	font-size:25px;
	line-height:1;
	color: transparent;
}
.surpriseweek .app--wrap ul li:nth-child(1) em {
	background: url(/cjom/event/thankstothe/images_2508/bg_num1.png) no-repeat 50% 50%;
	background-size: contain;
}
.surpriseweek .app--wrap ul li:nth-child(2) em {
	background: url(/cjom/event/thankstothe/images_2508/bg_num2.png) no-repeat 50% 50%;
	background-size: contain;
}
.surpriseweek .app--wrap ul li:nth-child(3) em {
	background: url(/cjom/event/thankstothe/images_2508/bg_num3.png) no-repeat 50% 50%;
	background-size: contain;
}
.surpriseweek .app--wrap ul li dl dd div {
	color: rgba(0,0,0,0.6);
	font-size: 16px;
	line-height: 1.4;
}
.surpriseweek .app--wrap ul li dl dd button {
	background: #333;
	height: 55px;
	font-size: 17px;
	width: 207px;
	margin-top: 19px;
	line-height: 55px;
}
.surpriseweek .app--wrap ul li dl dd .qr {
	display: inline-block;
	width: 69px;
	margin-top: 11px;
}
.surpriseweek .app--wrap ul li dl dd a {
	display: inline-block;
	width: 69px;
	margin: 11px 10px 0 0;
}
/* 고객감사제 접속시 레이어팝업 */
html.modal-open_01{
  overflow: hidden;
  position: relative;
  height: auto;
  min-width: 1280px;
}
html.modal-open_01 #modal-wrap_01 {
  position: fixed;
  z-index: 200000;    
  overflow: hidden;    
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 1280px;
}
html.modal-open_01 #modal-thankstothe {
  display: block;
}
#modal-thankstothe {
	width:520px;
	border-radius: 18px;
	overflow: hidden;
	text-align: center;
	border: 0;
	z-index: 200000;
	padding-bottom:0;
}
#modal-thankstothe h2 {
	padding: 40px 0 15px 0;
	font-size: 22px;
	color: #666;
	font-weight: normal;
	line-height: 1.3;
}
#modal-thankstothe h2 div {
	margin-top: 5px;
	font-size: 34px;
	color: #333;
	font-weight: bold;
	line-height: 1.3;
}
#modal-thankstothe h3 {
	display: inline-block;
	font-size: 20px;
	line-height: 20px;
	height: 48px;
	border-radius: 48px;
	padding: 14px 24px;
	box-sizing: border-box;
	border: 1px solid #ffccb2;
	background: #ffefe7;
	color: #d73939;
}
#modal-thankstothe .guide__content {
	position: relative;
	padding: 215px 0 36px 0;
}
#modal-thankstothe .guide__content:after {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 165px;
	height: 165px;
	background: url(/cjom/event/thankstothe/images_2508/ico_bell.png) no-repeat 50% / cover;
	content: '';
}
#modal-thankstothe .btn__box {
	position: relative;
	width: 340px;
	margin: 0 auto;
}
#modal-thankstothe .btn__box .btn {
	width: 100%;
	height: 62px;
	line-height: 62px;
	font-size: 21px;
	font-weight: bold;
	color: #fff;
	background: #009962;
	border-radius: 6px;
}
#modal-thankstothe .lms__info {
	padding: 30px;
	background: #f5f5f5;
	text-align: left;
}
#modal-thankstothe .lms__info p {
	text-align: center;
}
#modal-thankstothe .lms__info p:before {
	display: inline-block;
	width: 19px;
	height: 19px;
	background: url(/cjom/event/thankstothe/images_2508/ico_notice_g.png) no-repeat 50% / cover;
	vertical-align: middle;
	content: '';
}
#modal-thankstothe .lms__info p span {
	display: inline-block;
	line-height: 18px;
	height: 18px;
	vertical-align: middle;
	margin: 0 0 0 6px;
	font-size: 18px;
	color: rgba(51, 51, 51, 0.8);
	border-bottom: 1px solid rgba(51, 51, 51, 0.8);
}
#modal-thankstothe .lms__list {
	padding: 25px 0 0 0;
}
#modal-thankstothe .lms__list li {
	position: relative;
	padding-left: 10px;
	font-size: 17px;
	line-height: 1.3;
	color: #888;
}
#modal-thankstothe .lms__list li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 3px;
	height: 3px;
	background: #888;
	border-radius: 100%;
}
#modal-thankstothe .btn-modal-close {
	top: 25px;
	right: 25px;
	width: 30px;
	height: 30px;
}
#modal-thankstothe .btn-modal-close span {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	height: 30px;
	width: 30px;
	text-indent: -99999px;
	background: url(/cjom/event/thankstothe/images_2508/btn_popup_close.png) no-repeat 50%/30px;
}