@charset "utf-8";
/* CSS Document */


/* structure */
.slider{
	position: relative;
	width: 100%;
	margin:0;
	padding: 0;	
	height: 100%
	}

.myslide{
	height:auto;
	display: none;
	overflow: hidden;
}

.prev, .next{
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	font-size:30px;
	padding:20px;
	cursor: pointer;
	color: #fff;
	transition: 0.1s;
	user-select: none;
}

.prev:hover, .next:hover{
	color:rgba(255,255,255,0.50);
}
.next{
	right: 0;
}
.dotsbox{
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 20%;
	cursor: pointer;
}
.dot{
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 3px solid #fff;
	border-radius: 50%;
	margin: 0 10px;
	cursor: pointer;
}
/* structure end */

/* /javascript */

/* muslide add fade */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: 0.5}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0.5}
  to {opacity: 1}
}
/* /muslide add fade */

/* 3 */
.txt{
	width:80%;
	position: absolute;
	color: #fff;
	top: 40%;
	left: 50%;
	margin:0;
	transform: translate(-50%);
	-webkit-animation-name: posi2;
	-webkit-animation-duration: 2s;
	animation-name: posi2;
	animation-duration: 2s;
	z-index: 1;
}

@-webkit-keyframes posi2 {
  from {left: 25%;}
  to {left: 40%;}
}


@keyframes posi2 {
  from {top: 25%;}
  to {top: 40%;}
}

.txt h1{
	color:#FFFFFF; /* blue */
	font-size: 8vw;
	font-family: 'Cormorant Infant', serif;
	font-weight: 500;
	text-align:center;
	}
.txt p{
	font-size: 1.7vw;	
	font-family: 'Barlow', sans-serif;
	text-align: center;
}
/* /3 */

/* 
img{
	transform: scale(1.2, 1.2);
	-webkit-animation-name: zoomin;
  	-webkit-animation-duration: 40s;
  	animation-name: zoomin;
  	animation-duration: 40s;
}
@-webkit-keyframes zoomin {
  from {transform: scale(1, 1);}
  to {transform: scale(1.2, 1.2);}
}


@keyframes zoomin {
  from {transform: scale(1, 1);}
  to {transform: scale(1.2, 1.2);}
}
 */

@media screen and (max-width: 1480px){
	.txt h1{
		margin-bottom: 2vh;
	}
	.txt p{
		line-height:150%;
	}

}

@media screen and (max-width: 1024px){
	
	.dotsbox{
	bottom: 100px;
	
	}

}


@media screen and (max-width: 768px){
	.slider{
	margin-top:79px;
	padding: 0;	
	}
	
	.myslide{
		height: auto;
	}
	
	
	.txt{
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-animation-name: posi2;
		-webkit-animation-duration: 2s;
		animation-name: posi2;
		animation-duration: 2s;
	}
	
@keyframes posi2{
	  from {top: 35%;}
	  to {top: 50%;}
	}

	.txt h1{
		margin-bottom:.5vh;
	}
	.txt p{
		line-height:150%;
	}
	.prev, .next{
	font-size:20px;
	font-weight: 700;
}
	.dotsbox{	
	bottom: 60px;
	}
	
	.dot{
	width: 6px;
	height: 6px;
	border: 2px solid #fff;
	margin: 0 10px;
	}

@media (min-width: 320px) and (max-width: 479px){
	
	
	.sign{
		margin-right: 20px;
	}
	.sign a{
		font-size: 12px;
	}
	.prev, .next{
	font-size:20px;
	font-weight: 700;
}
	.dotsbox{	
	bottom: 40px;
	}
	
	.dot{
	width: 6px;
	height: 6px;
	border: 1px solid #fff;
	margin: 0 10px;
	}
}