@charset "utf-8";

/* CSS Document */



/* circle-hover-css */

.circle-hover1 {

	display: inline-block;

	overflow: hidden;

	cursor: pointer;

	position: relative;

}

.circle-hover1 .circle-img {

	width: 100%;

	height: 100%;

	overflow:hidden;

	position: absolute;

	z-index: 10;

	bottom: -40px;

	right: 0;

	opacity: 0;

	visibility: hidden;

	-webkit-transition-duration: 300ms;

	-o-transition-duration: 300ms;

	transition-duration: 300ms;

}

.circle-hover1:hover .circle-img, .banner-col3:hover .circle-img {

	opacity: 1;

	visibility: visible;

	bottom: 0;

	right: 0;

}



/* photobox-effect-css */

.photobox-effect1 {

	display: inline-block;

--photoboxOverlay: rgba(239, 98, 163, .1);

	cursor: pointer;

	photoboxAnimationDuration: .5s;

}

.photobox-effect1 img {

	transition: transform 0.8s ease-in-out 0s;

}

.photobox-effect1:hover img {

	transform: scale(1.08);

	transition: all 1.5s ease 0s;

}

.photobox-effect1 {

	position: relative;

	overflow: hidden;

}

.photobox-effect1 .previewbox:after {

	content: "";

	width: 0;

	height: 0;

	padding: 25%;

	background-color: var(--photoboxOverlay, rgba(239, 98, 163, .1));

	border-radius: 50%; mix-blend-mode:color;

	position: absolute;

	top: 50%;

	left: 50%;

	z-index: 2;

	transition: -webkit-transform var(--photoboxAnimationDuration, .4s) ease;

	transition: transform var(--photoboxAnimationDuration, .4s) ease;

	transition: transform var(--photoboxAnimationDuration, .4s) ease, -webkit-transform var(--photoboxAnimationDuration, .4s) ease;

	will-change: transform;

	-webkit-transform: translate(-50%, -50%) scale(0);

	transform: translate(-50%, -50%) scale(0);

}

.photobox-effect1:hover .previewbox:after {

	-webkit-transform: translate(-50%, -50%) scale(4);

	transform: translate(-50%, -50%) scale(4);

 transition-duration: calc(var(--photoboxAnimationDuration, .4s) * 2);

}


.photobox-effect2 {

	display: inline-block;

--photoboxOverlay: rgba(239, 98, 163, .1);

	cursor: pointer;

	photoboxAnimationDuration: .5s;

}

.photobox-effect2 img {

	transition: transform 0.8s ease-in-out 0s;

}

.photobox-effect2:hover img {

	transform: scale(1.08);

	transition: all 1.5s ease 0s;

}

.photobox-effect2 {

	position: relative;

	overflow: hidden;

}


.photobox-effect2 .previewbox:after {

	content: "";

	width: 0;

	height: 0;

	padding: 25%;

	border-radius: 50%; mix-blend-mode:color;

	position: absolute;

	top: 50%;

	left: 50%;

	z-index: 2;

	transition: -webkit-transform var(--photoboxAnimationDuration, .4s) ease;

	transition: transform var(--photoboxAnimationDuration, .4s) ease;

	transition: transform var(--photoboxAnimationDuration, .4s) ease, -webkit-transform var(--photoboxAnimationDuration, .4s) ease;

	will-change: transform;

	-webkit-transform: translate(-50%, -50%) scale(0);

	transform: translate(-50%, -50%) scale(0);

}

.photobox-effect2:hover .previewbox:after {

	-webkit-transform: translate(-50%, -50%) scale(4);

	transform: translate(-50%, -50%) scale(4);

 transition-duration: calc(var(--photoboxAnimationDuration, .4s) * 2);

}

/*map-color*/

.map-color {

	-webkit-filter: grayscale(100%);

	-moz-filter: grayscale(100%);

	-ms-filter: grayscale(100%);

	-o-filter: grayscale(100%);

	filter: grayscale(100%);

}



/*play-hover*/

.video-play-button {

	display: block;

	width:56px;

	height: 56px;

	border: 1px solid rgba(255,255,255,0.0);

	background:rgba(255,255,255,0.50);

	border-radius: 50%;

	margin: 0 auto 0;

}

.video-play-button:after {

	-webkit-transform: translateX(-50%) translateY(-50%);

	transform: translateX(-50%) translateY(-50%);

	display: block;

	width: 74px;

	height: 74px;

	background: rgba(255,255,255,0.60);

	border-radius: 50%;

	-webkit-animation: pulse-border 1500ms ease-out infinite;

	animation: pulse-border 1500ms ease-out infinite;

}

.video-play-button:before {

	-webkit-transform: translateX(-50%) translateY(-50%);

	transform: translateX(-50%) translateY(-50%);

	display: block;

	width: 64px;

	height: 64px;

	background: rgba(255,255,255,0.60);

	border-radius: 50%;

	-webkit-animation: pulse-border 1500ms ease-out infinite;

	animation: pulse-border 1500ms ease-out infinite;

}

.video-play-button:after, .video-play-button:before {

	content: "";

	position: absolute;

	z-index: 0;

	left: 50%;

	top: 50%;

	z-index: -9;

}

.video-play-button span {

	display: block;

	position: relative;

	z-index: 3;

	width: 0;

	height: 0;

	border-left: 18px solid #ef62a3;

	border-top: 11px solid transparent;

	border-bottom: 11px solid transparent;

	margin: 16px 20px;

}



 @-webkit-keyframes pulse-border {

 0% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 opacity: 1;

}

 100% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 opacity: 0;

}

}

 @keyframes pulse-border {

 0% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 opacity: 1;

}

 100% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 opacity: 0;

}

}



/* hover-effect-css */

.hovereffect {

  height: 100%;

  float: left;

  overflow: hidden;

  position: relative;

  text-align: center;

  cursor: pointer;

  background: #ef62a3;

}

.hovereffect .overlay1 {

  position: absolute;

  overflow: hidden;

  width: 80%;

  left: 10%;

  bottom: 1%;

  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

  transition: opacity 0.35s, transform 0.35s;

  -webkit-transform: scale(0,1);

  -ms-transform: scale(0,1);

  transform: scale(0,1);

}

.hovereffect:hover .overlay1 {

  opacity: 1;

  filter: alpha(opacity=100);

  -webkit-transform: scale(1);

  -ms-transform: scale(1);

  transform: scale(1);

}

.hovereffect img {

  display: block;

  position: relative;

  -webkit-transition: all 0.25s ease-out;

  transition: all 0.25s ease-out;

}

.hovereffect:hover img {

	mix-blend-mode: multiply;

}

.hovereffect h3 {

  text-align: center;

  position: relative;

  font-size: 20px;

  background-color: transparent;

  color: #FFF;

  padding: 1em 0;

  opacity: 0;

  filter: alpha(opacity=0);

  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

  transition: opacity 0.35s, transform 0.35s;

  -webkit-transform: translate3d(0,-100%,0);

  transform: translate3d(0,-100%,0);

}

.hovereffect a, .hovereffect p {

  color: #FFF;

  padding: 1em 0;

  opacity: 0;

  filter: alpha(opacity=0);

  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

  transition: opacity 0.35s, transform 0.35s;

  -webkit-transform: translate3d(0,100%,0);

  transform: translate3d(0,100%,0);

}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h3 {

  opacity: 1;

  filter: alpha(opacity=100);

  -webkit-transform: translate3d(0,0,0);

  transform: translate3d(0,0,0);

}



/*Smartphone css*/

@media screen and (max-width: 480px) {

/* checkbox-effect-css */

.checkbox1 {

	width: 100%;

	float: left;

	margin: 0 0 8px;

}

.checkbox2 {

	width: 100%;

	float: left;

	margin: 0 0 18px;

}

.checkbox1 span, .checkbox2 span {

	font-size: 13px;

	line-height: 25px;

	top: -4px;

}

[type="checkbox"]:checked + label, [type="checkbox"]:not(:checked) + label {

	display:inline;

	padding-left: 24px;

}

.banner-col3:hover .circle-img {

	display: none;

}

}



@media screen and (min-width:481px) and (max-width:600px) {

/* checkbox-effect-css */

.checkbox1 {

	width: 100%;

	float: left;

	margin: 0 0 8px;

}

.checkbox2 {

	width: 100%;

	float: left;

	margin: 0 0 18px;

}

.checkbox1 span, .checkbox2 span {

	font-size: 13px;

	line-height: 25px;

	top: -4px;

}

[type="checkbox"]:checked + label, [type="checkbox"]:not(:checked) + label {

	display:inline;

	padding-left: 24px;

}

.banner-col3:hover .circle-img {

	display: none;

}

}



@media screen and (min-width:601px) and (max-width:767px) {

/* checkbox-effect-css */

.checkbox1 {

	width: 100%;

	float: left;

	margin: 0 0 8px;

}

.checkbox2 {

	width: 100%;

	float: left;

	margin: 0 0 18px;

}

.checkbox1 span, .checkbox2 span {

	font-size: 13px;

	line-height: 25px;

	top: -4px;

}

[type="checkbox"]:checked + label, [type="checkbox"]:not(:checked) + label {

	display:inline;

	padding-left: 24px;

}

.banner-col3:hover .circle-img {

	display: none;

}

}



@media screen and (min-width:768px) and (max-width:900px) {

/* checkbox-effect-css */

.checkbox1 {

	margin: 0 0 4px;

}

.checkbox2 {

	margin: 0 0 16px;

}

[type="checkbox"]:checked + label, [type="checkbox"]:not(:checked) + label {

	padding-left: 24px;

}

.checkbox1 span, .checkbox2 span { 

	font-size: 12px; 

	line-height: 24px;

}

}



@media screen and (min-width:901px) and (max-width:1024px) {

/* checkbox-effect-css */

.checkbox1 {

	margin: 0 0 6px;

}

.checkbox2 {

	margin: 0 0 19px;

}

[type="checkbox"]:checked + label, [type="checkbox"]:not(:checked) + label {

	padding-left: 26px;

}

.checkbox1 span, .checkbox2 span { 

	font-size: 13px; 

	line-height: 25px;

	top: -6px;

}

}



@media screen and (min-width:1025px) and (max-width:1240px) {



}