/*----------------------------------------------------
**
** WEB COMBO / comboslider.css
**
** Ver.2.1.0
**
** copyright 2020 GRANTEST Inc.
**
**----------------------------------------------------
** web font
**----------------------------------------------------*/
@font-face {
	font-family:'Number';
	font-style:normal;
	font-weight:400;
	src: url('../fonts/number.woff') format('woff'),
	url('../fonts/number.eot') format('eot');
	font-display:swap;
}
/*----------------------------------------------------
** Common settings
**----------------------------------------------------*/
.cs_wrap{
	position:relative;
	z-index:1;
	margin:0 auto;
}
.cs_inner{
	position:relative;
	z-index:1;
	margin:0 auto;
}
.comboslider > *{
	cursor:pointer;
}
.cs_wrap > .swipecover{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	z-index:200;
	display:none;
	cursor:pointer;
	z-index:2;
}
.comboslider-slide .swipe a{
	pointer-events:none;
}
.cs_inner.swipe{
	touch-action:none;
}
@keyframes loader{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.cs_wrap .csloader,
.cs_wrap .csloaderwrap{
	position:absolute;
	z-index:10;
	width:100%;
	height:100%;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
.cs_wrap .csloader{
	background-color:#000;
	opacity:0.25;
}
.cs_wrap .csloaderwrap::before{
	position:absolute;
	z-index:20;
	content:"loading...";
	font-size:9px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	color:#FFF;
}
.cs_wrap .csloader span.waiting{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.cs_wrap .csloader span.waiting span.container{
	width:60px;
	height:60px;
	display:block;
	overflow:hidden;
	border-radius:30px;
	position:relative;
	z-index:1;
	animation:loader 1s linear infinite;
	will-change:transform;
}
.cs_wrap .csloader span.waiting span.container span{
	width:30px;
	height:30px;
	display:block;
	float:left;
}
.cs_wrap .csloader span.waiting span.container span:nth-child(1){
	background:-webkit-linear-gradient(45deg,rgba(255,255,255,0.75) 0%,rgba(255,255,255,1) 100%);
	background:linear-gradient(45deg,  rgba(255,255,255,0.75) 0%,rgba(255,255,255,1) 100%);
}
.cs_wrap .csloader span.waiting span.container span:nth-child(2){
	background:-webkit-linear-gradient(-45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 100%);
	background:linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 100%);
}
.cs_wrap .csloader span.waiting span.container span:nth-child(3){
	background:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.75) 0%,rgba(255,255,255,0.5) 100%);
	background:linear-gradient(135deg,rgba(255,255,255,0.75) 0%,rgba(255,255,255,0.5) 100%);
}
.cs_wrap .csloader span.waiting span.container span:nth-child(4){
	background:-webkit-linear-gradient(45deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.25) 100%);
	background:linear-gradient(45deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.25) 100%);
}
.cs_wrap .csloader span.waiting span.container span:nth-child(5){
	width:56px;
	height:56px;
	display:block;
	border-radius:28px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background-color:#000;
}
.controlinner{
	position:relative;
	z-index:1;
}
/*----------------------------------------------------
** Settings for each slide type
**----------------------------------------------------*/
/* swipeslider-slide or comboslider-slide-vertical */
.comboslider-slide{
	overflow:hidden;
}
.comboslider-slide .cs_inner,
.comboslider-slide-vertical .cs_inner{
	overflow:hidden;
}
.comboslider-slide .cs_inner.willchange,
.comboslider-slide-vertical .cs_inner.willchange{
	will-change:scroll-position;
}
.comboslider-slide .comboslider::before,
.comboslider-slide .comboslider::after,
.comboslider-slide-vertical .comboslider::before,
.comboslider-slide-vertical .comboslider::after{
	content:'';
	display:block;
}
.comboslider-slide .comboslider{
	display:flex;
}
.comboslider-slide .comboslider .cs_item{
	flex-shrink:0;
}
/* comboslider-fade or comboslider-fade-zoom or comboslider-mask */
.comboslider-fade .comboslider,
.comboslider-fade-zoom .comboslider,
.comboslider-mask .comboslider{
	display:block;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	z-index:1;
}
.comboslider-fade .comboslider .cs_item,
.comboslider-fade-zoom .comboslider .cs_item,
.comboslider-mask .comboslider .mask_item{
	position:absolute;
	top:50%;
	left:50%;
	z-index:1;
	transform:translate(-50%,-50%);
}
.comboslider-fade .comboslider .cs_item.willchange,
.comboslider-fade-zoom .comboslider .cs_item.willchange{
	will-change:opacity;
}
.comboslider-fade .comboslider .cs_item img.slide-contents,
.comboslider-fade-zoom .comboslider .cs_item img.slide-contents,
.comboslider-mask .comboslider .cs_item img.slide-contents,
.comboslider-fade .comboslider .cs_item video,
.comboslider-fade-zoom .comboslider .cs_item video,
.comboslider-mask .comboslider .cs_item video{
	width:100% !important;
	height:100% !important;
}
.comboslider-mask .comboslider .mask_wrap{
	position:absolute;
	overflow:hidden;
	top:50%;
	left:50%;
	transform:translate3d(-50%,-50%,0);
	opacity:0;
	border-radius:0px;
  -webkit-mask-image:none;
  mask-image:none;
	-webkit-mask-size:contain;
	mask-size:contain;
}
.comboslider-mask .comboslider .after{
  -webkit-mask-image:none !important;
  mask-image:none !important;
	z-index:2;
}
.comboslider-mask .comboslider .mask_wrap.slideactive,
.comboslider-mask .comboslider .mask_wrap.active,
.comboslider-mask .comboslider .mask_wrap.removeactive{
	opacity:1;
}
.comboslider-mask .comboslider .mask_wrap.removeactive{
	z-index:3;
}
.comboslider-mask .comboslider .mask_wrap.active{
	z-index:5;
}
.comboslider-mask .comboslider .mask_wrap.active,
.comboslider-mask .comboslider .mask_wrap.removeactive{
  -webkit-mask-image:url(/img/comboslider/mask.svg);
  mask-image:url(/img/comboslider/mask.svg);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:50% 50%;
  mask-position:50% 50%;
}
.comboslider-mask .comboslider.nonemask .active,
.comboslider-mask .comboslider.nonemask .removeactive{
  -webkit-mask-image:none;
  mask-image:none;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:50% 50%;
  mask-position:50% 50%;
	border-radius:50%;
}
/*----------------------------------------------------
** Settings for each pager type
**----------------------------------------------------*/
/* pager common */
.pager_wrap{
	text-align:center;
	margin:0 auto;
}
.pager_wrap:not(.timebar){
	overflow:hidden;
}
.pager_wrap.gradation:not(.timebar):not(.dots){
	-webkit-mask-image:linear-gradient(to right, transparent, black 80px, black calc(100% - 140px), transparent calc(100% - 60px));
	mask-image:linear-gradient(to right, transparent, black 80px, black calc(100% - 140px), transparent calc(100% - 60px));
}
.pager_inner > div > span{
	cursor:pointer;
}
/* pager-dots */
.pager-dots{
	padding:12px 0;
}
.pager-dots > .pager_inner{
	display:flex;
	justify-content:center;
	margin:0 auto;
}
.pager-dots > .pager_inner > div{
	height:6px;
	flex-shrink:0;
}
.pager-dots > .pager_inner > div.slideactive,
.pager-dots > .pager_inner > div.slideactive ~ div,
.pager-dots > .pager_inner > div.prev,
.pager-dots > .pager_inner > div.prevall,
.pager-dots > .pager_inner > div:nth-last-child(-n+5) + div{
	margin:0 2px;
}
.pager-dots > .pager_inner > div > span{
	display:block;
	background-color:rgba(0,0,0,0.2);
	width:0;
	height:0;
	border-radius:50%;
	position:relative;
	z-index:1;
	top:50%;
	transform:translateY(-50%);
}
.pager-dots > .pager_inner > div.slideactive + div + div ~ div > span,
.pager-dots > .pager_inner > div.prev > span{
	width:4px;
	height:4px;
}
.pager-dots > .pager_inner > div.slideactive + div + div + div ~ div > span,
.pager-dots > .pager_inner > div.prevall > span{
	width:2px;
	height:2px;
}
.pager-dots > .pager_inner > div.slideactive + div + div + div + div ~ div{
	margin:0;
}
.pager-dots > .pager_inner > div.slideactive + div + div + div + div ~ div > span{
	width:0;
	height:0;
}
.pager-dots > .pager_inner > div:nth-last-child(-n+5) + div > span{
	width:4px;
	height:4px;
}
.pager-dots > .pager_inner > div:nth-last-child(-n+4) + div > span{
	width:6px;
	height:6px;
}
.pager-dots > .pager_inner > .slideactive + div > span{
	width:6px !important;
	height:6px !important;
}
.pager-dots > .pager_inner > .slideactive + div + div > span{
	width:6px;
	height:6px;
}
.pager-dots > .pager_inner > .slideactive > span{
	background-color:rgba(0,0,0,0.5);
	width:6px !important;
	height:6px !important;
}
/* pager-timebar */
.pager-timebar{
	margin:0 -1px;
}
.pager-timebar .pager_inner{
	display:flex;
	padding:2px 0;
	box-sizing:border-box;
}
.pager-timebar .pager_inner > *{
	width:calc( 100% - 1px );
	margin:0 1px;
	height:3px;
	position:relative;
	z-index:1;
	background-color:rgba(0,0,0,0.2);
}
.pager-timebar .pager_inner span{
	display:block;
	width:0;
	height:3px;
	background-color:rgba(0,0,0,0.5);
}
.pager-timebar .pager_inner .slideactive span{
	width:100%;
}
/* pager-number */
@keyframes numberactive{
	0%{transform:scale3d(1,1,1)}
	30%{transform:scale3d(1.25,0.75,1)}
	40%{transform:scale3d(0.75,1.25,1)}
	50%{transform:scale3d(1.15,0.85,1)}
	65%{transform:scale3d(.95,1.05,1)}
	75%{transform:scale3d(1.05,.95,1)}
	100%{transform:scale3d(1,1,1)}
}
.pager-number{
	padding:10px 0;
}
.pager-number .pager_inner{
	display:table;
	margin:0 auto;
}
.pager-number .pager_inner > *{
	display:table-cell;
	width:34px;
	padding:0 2px;
}
.pager-number .pager_inner span{
	font-family:'Bai Jamjuree', sans-serif;
	display:block;
	width:30px;
	height:30px;
	line-height:30px;
	border-radius:50%;
	background-color:rgba(0,0,0,0.2);
	font-size:14px;
	color:#333;
	animation-duration:0.6s;
	animation-fill-mode:both;
}
.pager-number .slideactive span{
	background-color:rgba(0,0,0,0.5);
	animation-name:numberactive;
	will-change:transform;
}
/* pager-thumbnail */
.pager-thumbnail{
	padding:5px 0;
}
.pager-thumbnail.willchange{
	will-change:scroll-position;
}
.pager-thumbnail .pager_inner{
	display:flex;
	margin:0 auto;
}
.pager-thumbnail .pager_inner::before,
.pager-thumbnail .pager_inner::after{
	content:'';
	display:block;
}
.pager-thumbnail .pager_inner > div{
	flex-shrink:0;
}
.pager-thumbnail .pager_inner > div span{
	display:block;
	opacity:0.5;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
.pager-thumbnail .pager_inner .slideactive span{
	opacity:1;
}
.pager-thumbnail div span img{
	object-fit:cover;
}
/* arrow setting */
.arrowwrap{
	position:absolute;
	z-index:2;
	top:0;
}
.arrowwrap.horizontally{
	width:100%;
}
.arrowwrap .comboslider-arrow{
	position:absolute;
	z-index:5;
	display:inline-block;
	opacity:0;
}
.cs_inner:hover + .controlwrap .comboslider-arrow{
	opacity:0.5;
}
.touch .comboslider-arrow,
.comboslider-arrow:hover{
	opacity:1;
}
.arrowwrap.horizontally .comboslider-arrow{
	transform:translate(0,-50%);
}
.arrowwrap.vertical .comboslider-arrow{
	transform:translate(-50%,0);
}
.arrowwrap.horizontally .comboslider-prev{
	left:5px;
}
.arrowwrap.horizontally .comboslider-next{
	right:5px;
}
.arrowwrap.vertical .comboslider-prev{
	top:5px;
}
.arrowwrap.vertical .comboslider-next{
	bottom:5px;
}
.cs_inner:hover + .controlwrap .horizontally .comboslider-prev,
.horizontally .comboslider-prev:hover{
	left:10px;
}
.cs_inner:hover + .controlwrap .horizontally .comboslider-next,
.horizontally .comboslider-next:hover{
	right:10px;
}
.cs_inner:hover + .controlwrap .vertical .comboslider-prev,
.vertical .comboslider-prev:hover{
	top:10px;
}
.cs_inner:hover + .controlwrap .vertical .comboslider-next,
.vertical .comboslider-next:hover{
	bottom:10px;
}
.arrowwrap .comboslider-arrow div{
	position:relative;
	z-index:1;
	min-width:30px;
	max-width:100px;
	padding:100% 0 0 0;
	cursor:pointer;
	border-radius:50%;
	background-color:rgba(0,0,0,0.25);
}
.arrowwrap .comboslider-arrow div::before{
	position:absolute;
	content:"";
	display:block;
	top:2px;
	right:2px;
	bottom:2px;
	left:2px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	border-radius:50%;
}
.comboslider-prev div::before{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMid"><path fill="%23FFF" d="M16 32c8.836 0.001 16-7.164 16-16s-7.164-16-16-16-16.001 7.164-16 16c-0.001 8.836 7.164 16.001 16 16zM17.729 6.572c0.313-0.313 0.722-0.468 1.132-0.468s0.818 0.156 1.132 0.469c0.624 0.624 0.624 1.636 0 2.261l-7.166 7.166 7.165 7.167c0.624 0.624 0.624 1.636 0 2.26-0.626 0.626-1.637 0.626-2.262 0.001l-9.428-9.428 9.428-9.428z" /></svg>');
}
.arrowwrap.ie .comboslider-prev div::before{
	background-image:url(/img/comboslider/prev_h.svg);
}
.comboslider-next div::before{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMid"><path fill="%23FFF" d="M16.002-0.002c-8.836-0.001-16 7.164-16 16s7.164 16 16 16 16.001-7.164 16-16c0.001-8.836-7.164-16.001-16-16zM14.273 25.426c-0.313 0.313-0.722 0.468-1.132 0.468s-0.818-0.156-1.132-0.469c-0.624-0.624-0.624-1.636 0-2.261l7.165-7.166-7.164-7.167c-0.624-0.624-0.624-1.636 0-2.26 0.626-0.626 1.637-0.626 2.262-0.001l9.428 9.428-9.428 9.428z" /></svg>');
}
.arrowwrap.ie .comboslider-next div::before{
	background-image:url(/img/comboslider/next_h.svg);
}
.vertical .comboslider-prev div::before{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMid"><path fill="%23FFF" d="M0 15.998c-0.001 8.836 7.164 16 16 16s16-7.164 16-16-7.164-16.001-16-16c-8.836-0.001-16.001 7.164-16 16zM25.428 17.727c0.313 0.313 0.468 0.722 0.468 1.132s-0.156 0.818-0.469 1.132c-0.624 0.624-1.636 0.624-2.261 0l-7.166-7.166-7.167 7.165c-0.624 0.624-1.636 0.624-2.26 0-0.626-0.626-0.626-1.637-0.001-2.262l9.428-9.428 9.428 9.428z" /></svg>');
}
.arrowwrap.ie .vertical .comboslider-prev div::before{
	background-image:url(/img/comboslider/prev_v.svg);
}
.vertical .comboslider-next div::before{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMid"><path fill="%23FFF" d="M32 16c0.001-8.836-7.164-16-16-16s-16 7.164-16 16 7.164 16.001 16 16c8.836 0.001 16.001-7.164 16-16zM6.572 14.271c-0.313-0.313-0.468-0.722-0.468-1.132s0.156-0.818 0.469-1.132c0.624-0.624 1.636-0.624 2.261 0l7.166 7.166 7.167-7.165c0.624-0.624 1.636-0.624 2.26 0 0.626 0.626 0.626 1.637 0.001 2.262l-9.428 9.428-9.428-9.428z" /></svg>');
}
.arrowwrap.ie .vertical .comboslider-next div::before{
	background-image:url(/img/comboslider/next_v.svg);
}
.arrowwrap .comboslider-arrow div span{
	display:none;
}
/* slidecountview */
.slidecountview{
	font-family:'number';
	position:absolute;
	z-index:4;
	display:inline-block;
	padding:0 10px;
	border-radius:12px;
	line-height:24px;
	height:24px;
	background-color:rgba(0,0,0,0.25);
	color:#FFF;
	font-size:12px;
	right:5px;
	top:50%;
	transform:translate(0,-50%);
}
.slidecountview span{
	color:inherit;
	display:inline-block;
	font-size:12px;
	text-align:center;
	line-height:24px;
	padding:0 0.1em;
	box-sizing:border-box;
	min-width:1.2em;
}
.slidecountview.timebartype{
	top:-20px;
}
/* slider control */
.slidercontrolwrap{
	position:absolute;
	overflow:hidden;
	width:70px;
	padding:3px 0 3px 5px;
	z-index:3;
	top:50%;
	transform:translate(0,-50%);
}
.slidercontrolwrap.timebartype{
	top:-20px;
}
.slidercontrolwrap div{
	width:24px;
	height:24px;
	cursor:pointer;
	border-radius:12px;
	background-color:rgba(0,0,0,0.25);
	float:left;
	margin:0 5px 0 0;
	position:relative;
	z-index:1;
}
.slidercontrolwrap div::before{
	position:absolute;
	content:"";
	display:block;
	top:2px;
	right:2px;
	bottom:2px;
	left:2px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	border-radius:50%;
}
.slidercontrolwrap div.comboslider-play::before{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFF" d="M12.919 21.333l9.241-5.333-9.241-5.333v10.667zM16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM16 29.867c-7.646 0-13.867-6.221-13.867-13.867s6.221-13.867 13.867-13.867 13.867 6.221 13.867 13.867-6.221 13.867-13.867 13.867z" /></svg>');
}
.slidercontrolwrap.ie  div.comboslider-play::before{
	background-image:url(/img/comboslider/play.svg);
}
.slidercontrolwrap div.comboslider-pause::before{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFF" d="M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM16 29.867c-7.646 0-13.867-6.221-13.867-13.867s6.221-13.867 13.867-13.867c7.646 0 13.867 6.221 13.867 13.867s-6.221 13.867-13.867 13.867zM11.2 21.333h3.2v-10.667h-3.2v10.667zM17.6 21.333h3.2v-10.667h-3.2v10.667z" /></svg>');
}
.slidercontrolwrap.ie div.comboslider-pause::before{
	background-image:url(/img/comboslider/pause.svg);
}
.slidercontrolwrap div span{
	display:none;
}