@charset "utf-8";

/*----- MAIN - COMMON -----*/
.section {overflow:hidden;}
.section.main-footer {overflow:visible;}

/*----- MAIN - VISUAL -----*/
.main-visual .visual-slider {width:100%; height:100%; font-size:62.5%;}
.main-visual .visual-slider .swiper-slide {width:100%; height:100%;}

.main-visual .visual-slider .swiper-slide .bg {position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;  background-position:center center;background-size:cover;
-webkit-transition: all 5s;
-moz-transition: all 5s;
-ms-transition: all 5s;
-o-transition: all 5s;
transition: all 5s;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.main-visual .visual-slider .maxinner {position:relative;z-index:100;height:100vh;text-align:center;}
.main-visual .visual-slider .visual-txtbox {display:flex;flex-direction:column;justify-content:flex-end;min-height:31.8em;height:53%;}
.main-visual .visual-slider .visual-txtbox span {opacity:0;position:relative;top:1.5em;font-size:2rem;color:rgba(255,255,255,0.9);font-weight:400;}
.main-visual .visual-slider h2 {opacity:0;position:relative;top:0.5em;margin-top:0.3em;font-size:4.5rem;color:#fff;letter-spacing:-0.03em;font-weight:700;
-webkit-transition: opacity 1s, top 1s;
-moz-transition: opacity 1s, top 1s;
-ms-transition: opacity 1s, top 1s;
-o-transition: opacity 1s, top 1s;
transition: opacity 1s, top 1s;
-webkit-transition-delay:1.1s;
-moz-transition-delay:1.1s;
-ms-transition-delay:1.1s;
-o-transition-delay:1.1s;
transition-delay:1.1s;
}
.main-visual .visual-slider .slider-paging {position:absolute;left:0;bottom:25%;z-index:1000;padding-top:5em;width:100%;text-align:center;}
.main-visual .visual-slider .slider-paging .swiper-pagination {opacity:1;position:relative;left:auto;bottom:auto;top:0;display:inline-block;width:auto;font-size:0;vertical-align:middle;
-webkit-transition: opacity 1s, top 1s;
-moz-transition: opacity 1s, top 1s;
-ms-transition: opacity 1s, top 1s;
-o-transition: opacity 1s, top 1s;
transition: opacity 1s, top 1s;
-webkit-transition-delay:1.2s;
-moz-transition-delay:1.2s;
-ms-transition-delay:1.2s;
-o-transition-delay:1.2s;
transition-delay:1.2s;
}
.main-visual .visual-slider .swiper-pagination-bullet {opacity:1;display:inline-block;margin:0 7px;position:relative;width:20px;height:20px;background:none;}/*border:1px solid #fff;*/
.main-visual .visual-slider .swiper-pagination-bullet:first-child {margin-left:0;}
.main-visual .visual-slider .swiper-pagination-bullet:last-child {margin-right:0;}
.main-visual .visual-slider .swiper-pagination-bullet:after {content:"";  position:absolute;  left:50%;  top:50%;  margin-left:-3px;  margin-top:-3px;  width:6px;  height:6px;  border-radius:50%; background-color:#fff;}
.main-visual .visual-slider .slider-paging .btn-slide-play {opacity:1;	display:inline-block;	position:relative;	top:0;	margin-left:15px;	width:6px;	height:10px; background-color:transparent;	background-image:url('/img/ico-slide-stop.png');	background-repeat:no-repeat;	background-position:center center;	vertical-align:middle;
-webkit-transition: opacity 1s, top 1s;
-moz-transition: opacity 1s, top 1s;
-ms-transition: opacity 1s, top 1s;
-o-transition: opacity 1s, top 1s;
transition: opacity 1s, top 1s;
-webkit-transition-delay:1.2s;
-moz-transition-delay:1.2s;
-ms-transition-delay:1.2s;
-o-transition-delay:1.2s;
transition-delay:1.2s;
}
.main-visual .visual-slider .btn-slide-play.stop {	background-image:url('/img/ico-slide-play.png');}
.main-visual.init .visual-slider .btn-slide-play {	opacity:0;	top:30px;}
.main-visual.init .visual-slider .swiper-pagination {	opacity:0;	top:30px;}
.main-visual.init .scroll-down {	opacity:0;	bottom:0;}

/* ----- ANIMATION -----*/
.main-visual .visual-slider .swiper-pagination-bullet-active {border:1px solid #fff;}
.main-visual .visual-slider .swiper-slide-active .visual-txtbox span {opacity:1;top:0;}
.main-visual .visual-slider .swiper-slide-active .visual-txtbox h2 {opacity:1;top:0;}
.main-visual .visual-slider .swiper-slide-active .bg {	-webkit-transform: scale(1);	-moz-transform: scale(1);	-ms-transform: scale(1);	-o-transform: scale(1);	transform: scale(1);}
.main-visual .visual-slider .swiper-slide-active:before {	width: 0;	opacity: 0;}
.main-visual .visual-slider .swiper-slide-active:after {	width: 0;	opacity: 0;}


.main-product, .main-scale, .main-about {padding:6em 0}
.main-scale{background-color: #e6ecf3}


.scroll-down {opacity:1; position:absolute; left:0; bottom:8%; z-index:1000; width:100%; text-align:center;
-webkit-transition: opacity 1s, bottom 1s;
-moz-transition: opacity 1s, bottom 1s;
-ms-transition: opacity 1s, bottom 1s;
-o-transition: opacity 1s, bottom 1s;
transition: opacity 1s, bottom 1s;
-webkit-transition-delay:1.3s;
-moz-transition-delay:1.3s;
-ms-transition-delay:1.3s;
-o-transition-delay:1.3s;
transition-delay:1.3s;
}
.scroll-down p {font-size:0.8rem;padding-bottom: 2.5em; cursor: pointer;}

.bounce {-webkit-animation: bounce 2s infinite; animation: bounce 2s infinite;}
@-webkit-keyframes bounce {
    0%,20%,50%,80%,100% {-webkit-transform: translateY(0);transform: translateX(0);}
    40% {-webkit-transform: translateY(-30px);transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);transform: translateY(-15px);}
}

@-moz-keyframes bounce {
0%,20%,50%,80%,100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}

@keyframes bounce {
0%,20%,50%,80%,100% {-ms-transform: translateY(0);transform: translateY(0);}
40% {-ms-transform: translateY(-30px);transform: translateY(-30px);}
60% {-ms-transform: translateY(-15px);transform: translateY(-15px);}
}

.hover-scale .hover-scale-in {overflow: hidden}
.hover-scale .hover-scale-in img {transition: ease all .35s;transform: scale(1)}
.hover-scale:hover .hover-scale-in img {transform: scale(1.05)}

.icon-box {text-align: center;padding: 80px 20px;transition: all ease-in-out 0.3s;background: #fff;width:100%; overflow: hidden}
.icon-box .icon {margin: 0 auto;width: 100px;height: 100px;display: flex;align-items: center;justify-content: center;transition: ease-in-out 0.3s;position: relative;}
.icon-box .icon i {font-size: 36px;transition: 0.5s;position: relative;}
.icon-box h4 {font-weight: 600;margin: 10px 0 15px 0;font-size: 22px;}
.icon-box h4 a {color: #111;transition: ease-in-out 0.3s;}
.icon-box p {line-height: 24px;font-size: 17px;margin-bottom: 0;}
.icon-box:hover {border-color: #fff;box-shadow: 0px 0 35px 0 rgba(0, 0, 0, 0.08);}


.icon-box1 {text-align: center; border: 1px solid #ebebeb; padding: 20px;transition: all ease-in-out 0.3s; background: #fff; width:100%;}
.icon-box1 .icon {margin: 0 auto;width: 64px;height: 64px;background: #ffc451;border-radius: 4px;display: flex; align-items: center;justify-content: center; margin-bottom: 20px; transition: 0.3s;}
.icon-box1 .icon i {color: #151515; font-size: 28px;transition: ease-in-out 0.3s;}
.icon-box1 h4 {font-weight: 700;margin-bottom: 15px;font-size: 24px;padding-top:15px;}
.icon-box1 h4 a {color: #151515;transition: ease-in-out 0.3s;}
.icon-box1 p {line-height: 24px;font-size: 17px;margin-bottom: 0;}
.icon-box1:hover {border-color: #fff;box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);transform: translateY(-10px);}

.hover-1 img{
	width: 100%;
}

.hover-1-content {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;
  transition: all 0.4s;
}

.hover-1 .hover-overlay {
  background: rgba(0, 0, 0, 0.3);
}

.hover-1-description {
  transform: translateY(0.5rem);
  transition: all 0.4s;
  padding-top: 5px;
  opacity: 0;
}

.hover-1:hover .hover-1-content {
  bottom: 1.2rem;
}

.hover-1:hover .hover-1-description {
  opacity: 1;
  transform: none;
}

.hover-1:hover img {
  width: 100%;
  filter: brightness(100%);
  transform: scale(1.3);
}

.hover-1:hover::after {
  opacity: 1;
  transform: none;
}
.hover-1:hover .hover-overlay {
  background: rgba(0, 0, 0, 0.8);

}


@media all and (max-width:1024px){
.main-visual .visual-slider .visual-txtbox span {font-size:1.8rem;}
.main-visual .visual-slider h2 {font-size:3.3rem;}

}
@media(max-width:992px){


}
@media(max-width:768px){
.main-visual .visual-slider .visual-txtbox span {font-size:1.4rem;}
.main-visual .visual-slider h2 {font-size:2rem;}


}
@media(max-width:576px){
.main-visual .visual-slider .visual-txtbox span {font-size:1.2rem;}
.main-visual .visual-slider h2 {font-size:1.6rem;}
.main-product, .main-scale, .main-about {padding:3em 0}
}