img{max-width:100%;}
.sb-container {
	position: relative;
	width: 255px;
	height: 390px;
	margin: 30px auto 0 auto;
}

.sb-container div {
    position: absolute;
    top: 0px;
    left: 0;
    width: 202px;
    height: 360px;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    -webkit-transform-origin: 6% 97%;
    -moz-transform-origin: 6% 97%;
    -o-transform-origin: 6% 97%;
    -ms-transform-origin: 6% 97%;
    transform-origin: 6% 97%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.sb-container div:nth-child(1){
	/* background-color: #ea2a29; */
	/* box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1); */
	z-index: 3;
}

.sb-container div:nth-child(2){
	/* background-color: #f16729; */
	/* box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1); */
	z-index: 2;
}

.sb-container div:nth-child(3){
	/* background-color: #f89322; */
	/* box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2); */
	z-index: 1;
}

.sb-container div:nth-child(4){
	background-color: #ffcf14;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2);
}

.sb-container div:nth-child(5){
	background-color: #ffea0d;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);
}

.sb-container div:nth-child(6){
	background-color: #87b11d;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);
}

.sb-container div:nth-child(7){
	background-color: #008253;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);
}

.sb-container div:nth-child(8){
	background-color: #3277b5;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);
}

.sb-container div:nth-child(9){
	background-color: #4c549f;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4);
}

.sb-container div:nth-child(10){
	background-color: #764394;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);
}

.sb-container div:nth-child(11){
	background-color: #ca0d86;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4);
}


/* CSS FOR SLIDER 1 */
.wrapper {
  width: 227px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.wrapper .sample_slider {
  overflow: hidden;
  position: relative;
  padding-bottom: 0;
}
.wrapper .sample_slider .swiper-slide {
  width: calc(52% / 0.9);
  aspect-ratio: 1/2;
}
.wrapper .sample_slider .swiper-slide img {
  width: 100%;
}

/* CSS FOR SLIDER 2 */
.daily-capsuls .flex-left2 {
	justify-content: flex-end;
}
.numberTheory {
	background: url(../images/panel5-img-bg.png) 0 0 no-repeat;
	background-size: 100%;
	width: 227px;
  	height: 487px;
}
.numberTheory .wrapper {
  width: 340px;
  height: 244px;
  margin: 105px 0 0 -231px;
  overflow: visible;
  /* border: 1px solid red; */
}
.numberTheory .wrapper .sample_slider02 {
  overflow: hidden;
  position: relative;
  padding-bottom: 0;
}
.numberTheory .wrapper .sample_slider02 .swiper-slide {
  width: calc(52% / 0.9);
  aspect-ratio: 1/2;
}
.numberTheory .wrapper .sample_slider02 .swiper-slide img {
  width: 100%;
  max-width: 100%;
}

/* Swiper for Vertical */
.wknd {
	width: 451px;
  	height: 463px;
}
.swiper-container {
    width: 100%;
    max-width: 940px;
    height: 400px;
    margin: 0 auto;
}
.swiper-container .swiper-slide {
    width: calc(72% / 0.9);
    /* height: 240px !important; */
    filter: blur(5px);
    -webkit-filter: blur(5px);
}
.swiper-slide.swiper-slide-active {
  filter: unset;
  -webkit-filter: unset;
}
.swiper-container .swiper-slide img {
  width: 100%;
  max-width: 100%;
}
.swiper-container .swiper-slide.wknd1st img {
  width: 100%;
  max-width: 260px;
}

span.sb-icon{
	display: block;
	height: 70px;
	width: 70px;
	margin: 20px auto;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

span.sb-icon:before {
	font-family: 'icons';
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: block;
	text-decoration: inherit;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 
	line-height: 64px;
	width: 100%;
	font-size: 60px;
	color: #000;
	text-shadow: 0 0 1px #000;
}

@media (max-width: 768px) {
	.sb-container {width: 100%;}
    .sb-container div {width: 156px; height:278px}
    .wrapper {margin: 0;}
	.numberTheory {background-position: 90px 0;}
	.numberTheory .wrapper {margin: 105px 0 0 -141px;}
	.swiper-container .swiper-slide {width: 100%;}
}