/* ***********************************************************
 Author			: www.drimhitech.com pkm
 Create Date	: 2023. 08. 03
 Subject		: 결제 페이지
 Comment		: CSS
------------------------------------------------------------
 Modify Date 	:
 Comment     	:
*********************************************************** */
/* 전체 영역 */
#dvFormMain{
   width:100%;height:100%;display:table;
}
/* 컨텐츠 영역 */
#dvFormMain > div{
    background-color:#FFFFFF;display:table-cell;width:100%;padding:20px 25px 20px 25px;text-align:center;
}

/* 스토리카드 이미지 영역 */
.stoCrdSlide{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.8s ease;
  transition-delay: 0.5s
  z-index: 0;
}

/* 스토리카드 이미지 영역 활성화 */
.stoCrdSlide.stoCrdSlideActive {
  display: block;
  opacity: 1;
  z-index: 1;
}

/*
button.prev, button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  cursor: pointer;
  z-index: 10;
}

button.prev {
  left: 10px;
}

button.next {
  right: 10px;
}
*/

/* 스토리카드 아이콘 */
#dvStoryCardAll{
	position: absolute; 
	z-index:2;
}

/* 스토리카드 페이지 영역 */
.stoCrdPageClass{
	display:flex; 
	justify-content: center; 
	align-items: center; 
	bottom:20px;  right:10px; border-radius: 25px;
	position: absolute; 	 
	z-index:2; 
	background-color:#000000;
	opacity: 0.5;
}

/* 스토리카드 페이지 텍스트 */
.stoCrdPageTextClass{
	color:#FFFFFF; text-align: center;
}

/* 아이콘 컨텐츠 영역 */
.dvIconClass{
	/*display:inline-flex; align-items: center; justify-content: center; background-color:#F5F5F5; border-radius: 40px;*/
}

/* 아이콘 이미지 */
.dvIconImgClass{
	/*width:100%;*/
	display:flex; align-items: center; justify-content: center; background-color:#F5F5F5; border-radius: 80px;
}

/* 아이콘 텍스트 */
.dvIconTextClass{
	/*width:100%;*/color:#222222;
	word-wrap: break-word; /* 단어 단위로 줄바꿈 */
  	overflow-wrap: break-word; /* 최신 표준 */ 
	text-overflow: ellipsis;
}

/* 스크롤 영역 */
#dvListIconWrapper::-webkit-scrollbar {
    width: 0px;          /* 수평 스크롤 바 숨기기 */
    height: 0px;         /* 수직 스크롤 바 숨기기 */
}

/* 매거진 이미지 영역 */
.todayMenuSlide{
	position: absolute; 		
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	opacity: 0;
  	transition: opacity 0.8s ease;
  	transition-delay: 0.5s
  	z-index: 0;
}

/* 매거진 이미지 영역 활성화 */
.todayMenuSlide.todayMenuSlideActive {
  	display: block;
 	opacity: 1;
  	z-index: 1;
}

/* 매거진 이미지 슬라이드 도트 활성화 */
.todayMenuSlideDotActive{
	width:40px; height:12px; background-color:#77BC23; border-radius: 6px;
}

/* 매거진 이미지 슬라이드 도트 비활성화 */
.todayMenuSlideDotNoActive{
	width:12px; height:12px; background-color:#DDDDDD; border-radius: 6px;
}






/* 매거진 이미지 영역 */
.megaZineSlide{
	position: absolute; 		
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	opacity: 0;
  	transition: opacity 0.8s ease;
  	transition-delay: 0.5s
  	z-index: 0;
}

/* 매거진 이미지 영역 활성화 */
.megaZineSlide.megaZineSlideActive {
  	display: block;
 	opacity: 1;
  	z-index: 1;
}

/* 매거진 이미지 슬라이드 도트 활성화 */
.megaZineSlideDotActive{
	width:40px; height:12px; background-color:#77BC23; border-radius: 6px;
}

/* 매거진 이미지 슬라이드 도트 비활성화 */
.megaZineSlideDotNoActive{
	width:12px; height:12px; background-color:#DDDDDD; border-radius: 6px;
}

/* 스페셜 이미지 영역 */
.specialSlide{
	position: absolute; 		
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	opacity: 0;
  	transition: opacity 0.8s ease;
  	transition-delay: 0.5s
  	z-index: 0;
}

/* 스페셜 리스트 이미지 영역 활성화 */
.specialSlide.specialSlideActive {
  	display: block;
 	opacity: 1;
  	z-index: 1;
}

/* 스페셜 리스트 이미지 슬라이드 도트 활성화 */
.specialSlideDotActive{
	width:40px; height:12px; background-color:#77BC23; border-radius: 6px;
}

/* 스페셜 리스트 이미지 슬라이드 도트 비활성화 */
.specialSlideDotNoActive{
	width:12px; height:12px; background-color:#DDDDDD; border-radius: 6px;
}

/* 배너 강조 */
.banImgBackAcc{
	width:100%; 
	height:100%; 
	border:2px solid #77BC23; 
	border-radius: 20px; 
	box-shadow: 0px 5px 10px #00000029;
}

/* 배너 일반 */
.banImgBack{
	width:100%; 
	height:100%; 
	border:1px solid #F5F5F5; 
	border-radius: 20px;
}

/* 배너 이미지 영역 */
.banImgClass{
	width:100%; 
	height:100%; 
	border-radius: 20px;
}

/* 팝업 영역 */
#dvHomePopupWrapper{
	position:absolute;
	display:none;
	top:0;
	background-color:transparent;
	width: 100%;
	height: 100%; 
}

/* 팝업 배경 영역 */
#dvHomePopupMainBack{
	width:100%;
	height:100%;
	background-color:rgb(0,0,0,0.4);
}

/* 팝업 이미지 영역 */
#dvHomePopupContents{
	position: absolute;
	background-color:white;
	border-radius: 20px;
	top: 100%;
	/*bottom:100%*/
}

/* 팝업 텍스트 영역 */
#dvHomePopBtnWrapper{
	display:flex; 
	align-items: center; 
	justify-content: center;
	border: 1px solid #B2B2B2; 
}

/* 팝업 텍스트 */
.popupTextClass{
	width:50%;
	display:flex; 
	align-items: center; 
	justify-content: center;
	color:#222222;
}

/* 매거진 이미지 영역 */
.homePopSlide{
	position: absolute; 		
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	opacity: 0;
  	transition: opacity 0.8s ease;
  	transition-delay: 0.5s
  	z-index: 0;
}

/* 매거진 이미지 영역 활성화 */
.homePopSlide.homePopSlideActive {
  	display: block;
 	opacity: 1;
  	z-index: 1;
}

/* 스토리카드 페이지 영역 */
.homePopPageClass{
	display:flex; 
	justify-content: center; 
	align-items: center; 
	bottom:20px;  right:10px; border-radius: 25px;
	position: absolute; 	 
	z-index:2; 
	background-color:#000000;
	opacity: 0.5;
}

.dvCrowedClass {
    position: absolute;
    top:0px;
    right:0px;
    background-repeat : no-repeat;
}

.crowedText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    color: #ffffff;
    z-index:1;
}