@charset "utf-8";
.body-main,
section {position:relative;}


/*Main Visual*/


.main__visual { position:relative; overflow:hidden;}
.main__visual-wrap {width:auto; z-index:2; position:relative;}


.slick-slider .slick-track, .slick-slider .slick-list {z-index:1;  height:100%;}
.main__visual-item { font-size:0; white-space:nowrap; overflow:hidden; position:relative; height:100%; height:100vh; min-height:800px !important; max-height:980px !important; text-align: center; }
.main__visual-item:before {content:''; display:inline-block; vertical-align:middle; width:0; height:100%; font-size:0;}

.main__visual-copy {position:absolute; z-index: 10; top: 50%; left: 0; transform: translateY(-50%); padding-left: 350px; color:#fff; text-align:left; text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);}
.main__visual-copy > h2 {font-size:70px; font-weight:700; width: 80%;}
.main__visual-copy > h2 em {color:#07a695; vertical-align: baseline;}
.main__visual-copy > h6 { padding:10px 0 0 0; font-size: 40px; font-weight: 500;}
.main__visual-copy > p{font-size:20px; font-weight:400; line-height:1.3; padding:20px 0 0 0;}




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

	.main__visual-copy {padding: 0; left: 50%; transform: translate(-50%, -50%);}

}
@media only screen and (max-width: 1240px){
	.main__visual-item {min-height:700px !important; }
	.main__visual-inner {margin:-19% 0 0 0;}

	.main__visual-copy > h2 {font-size:50px; width: 100%;}
	.main__visual-copy > h6 {font-size:30px;}
}
@media only screen and (max-width: 1024px){
	.main__visual-item { max-height:600px !important;}
	.main__visual-copy > h2 {font-size:40px;}
	.main__visual-copy > h6  {font-size: 24px;}
	.main__visual-copy > p  {font-size: 18px;}
}
@media only screen and (max-width: 768px){
	.main__visual-item { min-height:500px !important;}
	.main__visual-inner {margin:-25% 0 0 0;}

	.main__visual-copy {width: 90%;}
	.main__visual-copy > h2 {font-size:32px;}
	.main__visual-copy > h6 {font-size:20px;}
	.main__visual-copy > p  {font-size: 16px; width: 80%;}
}

@media only screen and (max-width: 640px){
	
}

@media only screen and (max-width: 480px){
	.main__visual-item { min-height:480px !important;}
	.main__visual-copy > h2 {font-size:28px;}
	.main__visual-copy > p  {font-size: 16px;}
}




/*visaul dots*/
.main__visual-control {font-size:0; transition: all 0.3s ease-in-out; z-index:1000; margin-top: 35px; padding-left: 10px;}

.main__visual-dots {display:inline-block;}
.main__visual-dots ul {display:block; font-size:0;}
.main__visual-dots li{display:inline-block; cursor:pointer; margin:0; }
.main__visual-dots li + li {margin-left:20px;}
.main__visual-dots button {display:inline-block; position:relative; width:5px; height:5px; border-radius: 50%; border:0; background-color:rgba(255, 255, 255, 1); box-sizing:border-box; transition:all .2s ease-in-out;  font-size:0; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);}
.main__visual-dots button:after {content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; transition: 0.2s; background: rgba(255, 255, 255, 0.2); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main__visual-dots li:hover button:after,
.main__visual-dots li.slick-active button:after {width: 22px; height: 22px;}


@media only screen and (max-width: 1280px){
	.main__visual-control { top:50%;}
}
@media only screen and (max-width: 1024px){
	.main__visual-control { top:auto; bottom:150px;}
}

@media only screen and (max-width: 768px){
	.main__visual-control {bottom:120px;}
}
@media only screen and (max-width: 480px){
	.main__visual-control {bottom:80px;}
}


.main__visual-scroll {position:absolute; bottom:50px; left:50%; transform:translateX(-50%); transition: all 0.3s ease-in-out; z-index:4;}
.main__visual-scroll .scroll-btn {display:block; font-size:11px; color:#fff; position:relative; padding-top:65px; font-family: 'Montserrat', sans-serif; font-weight:500;}
.main__visual-scroll .scroll-btn:hover {color:#fff;}
.scroll-icon{animation-duration:2s; animation-iteration-count:infinite; animation-name:is-scroll; position:absolute; top:0; left:50%; margin-left:-15px;}

@keyframes is-scroll {
	0% {opacity: 1;}
	50% {opacity: 1;}
	70% {
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}
	100% {
		opacity: 0;
	}
}
@media only screen and (max-width: 768px){
	.main__visual-scroll {bottom:20px !important;}
}

@media only screen and (max-width: 640px){
	.main__visual-scroll {bottom:5px !important;}
	.main__visual-scroll .scroll-btn {height:50px; width:20px; padding:0;}
	.scroll-icon{margin-left:-10px;}
	.main__visual-scroll span {display:none;}
}



.main__visual-item > .bg {position:absolute; height:100%; width:100%; top:0; left:0; overflow:hidden; z-index:-1; }
/*.main__visual-item > .bg:before {content:''; display:block; position:absolute; height:100%; width:100%;top:50%; left:50%; transform:translate(-50%, -50%); background:rgba(0, 0 , 0, 0.4); z-index:1;}*/
.main__visual-item > .bg .main__visual-img{
	background-size:cover; background-position: 50% 5%; background-repeat: no-repeat;
	
	transition:all 10s ease-in-out;
	transform:scale(1) skew(0.001deg);
}

.slick-active > .bg .main__visual-img.is-scale{
	transition:all 5s ease-in-out;
	transform:scale(1.3) skew(0.001deg);
}
.main__visual-item.nth-1 .main__visual-img{background-image:url('../images/main/main_visual01.jpg');}
.main__visual-item.nth-2 .main__visual-img{background-image:url('../images/main/main_visual02.jpg');}
.main__visual-item.nth-3 .main__visual-img{background-image:url('../images/main/main_visual03.jpg');}
.main__visual-img,
.main__visual-img img{width:100%; height:100%;}

.is-opacity {
  -webkit-animation-name: is-opacity;
  -webkit-animation-duration: 10s;
  -ms-animation-name: is-opacity;
  -ms-animation-duration: 10s;
  animation-name: is-opacity;
  animation-duration: 10s;
}

@keyframes is-opacity {
  0% { opacity:0; }
  100% { opacity:1; }
}
@-ms-keyframes is-opacity {
  0% { opacity:0; }
  
  100% { opacity:1; }
}
@-webkit-keyframes is-opacity {
  0% { opacity:0; }
  
  100% { opacity:1; }
}


/*Quick*/
.main__visual .quick {top:50%; bottom:auto; transform:translateY(-50%);}




/* Main Title */
.main-title {text-align:center; z-index:2;}
.main-title h2 {display: inline-block; font-size:45px; font-weight:700; color: #1c2060; text-transform: uppercase; padding-bottom: 10px; border-bottom: 2px solid #07a695;}
.main-title p {font-size:16px; font-weight:300; color: #666; margin-top:25px;}

.main__product .main-title {color:#fff;}


@media only screen and (max-width: 1024px) {
	.main-title {margin-bottom:px;}
	.main-title h2 {font-size:36px;}
	.main-title p {font-size:18px;}
}


@media only screen and (max-width: 768px) {
	.main-title {margin-bottom:px;}
	.main-title h2 {font-size:32px;}
	.main-title p {font-size:16px;}
}

@media only screen and (max-width:480px){
	.main-title h2 {font-size:28px;}
}



/* Product */
.main__product {padding:130px 0 140px;}
.main__product-wrap {margin-top: 110px;}
.main__product-list {font-size:0;}
.main__product-item {display:inline-block; width: 48%;}
.main__product-item + .main__product-item {margin-left:4%;}
.main__product-link {display:block; transition:all 0.3s ease-in-out; }

.main__product-link .thumb {overflow:hidden; height: 320px; transition:all 0.3s ease-in-out;}
.main__product-item:nth-of-type(1) .main__product-link .thumb {background: url('../images/main/img_product01.png') center no-repeat; background-size: cover;}
.main__product-item:nth-of-type(2) .main__product-link .thumb {background: url('../images/main/img_product02.png') center no-repeat; background-size: cover;}
.main__product-item:nth-of-type(3) .main__product-link .thumb {background: url('../images/main/img_product03.png') center no-repeat; background-size: cover;}
.main__product-item:nth-of-type(4) .main__product-link .thumb {background: url('../images/main/img_product04.png') center no-repeat; background-size: cover;}
.main__product-link .thumb img{width: 100%; opacity: 0; transform:scale(1); transition:all 0.3s ease-in-out;}
.main__product-link:hover .thumb {background: none;}
.main__product-link:hover .thumb img{opacity: 1; transform:scale(1.2);}

.main__product-link .desc {padding:35px 0 0; transition:all 0.3s ease-in-out;}
.main__product-link .desc span {display:block;}

.main__product-link .title {font-size:30px; font-weight:500; color:#1c2060;}
.main__product-link .text {display: inline-block; font-size:16px; font-weight:300; color:#ababab; height: 105px; margin-top:10px; line-height:1.3;}
.main__product-link:hover .title {color:#08a795;}


.main__product-link .zoom {width:calc(100% - 15px); height:45px; background:#1c2060; transition: all 0.3s ease-in-out; position: relative;}
.main__product-link .zoom::before {display: block; content: ''; width: 65px; height: 11px; background: url('../images/main/product-link-arrow.png') 0 0 no-repeat; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
.main__product-link .zoom::after {display: block; content: ''; width: 15px; height: 45px; background: url('../images/main/product-link-zoom.png') 0 0 no-repeat; transition: all 0.3s ease-in-out; position: absolute; top: 0; left: 100%;}
.main__product-link:hover .zoom {background: #08a795;}
.main__product-link:hover .zoom::after {background: url('../images/main/product-link-zoom_h.png') 0 0 no-repeat;}



@media only screen and (max-width: 1240px) {
	.main__product-wrap {margin-top: 90px;}
}

@media only screen and (max-width: 1024px) {
	.main__product-wrap {margin-top: 70px;}

	.main__product-list {text-align: center;}

	.main__product-item,
	.main__product-item + .main__product-item {width: 51%; margin: 0 0 50px; text-align: left;}
	.main__product-item:nth-of-type(2n-1) {margin-left: 0;}

	.main__product-link .thumb img {width: 100%;}
	.main__product-link .title {font-size: 20px;}
}

@media only screen and (max-width: 768px) {
	.main__product-wrap {margin-top: 50px;}

	.main__product-item,
	.main__product-item + .main__product-item {width: 100%;}
	.main__product-link .title {font-size: 18px;}
}

@media only screen and (max-width: 640px) {
	.main__product-wrap {margin-top: 30px;}
}

@media only screen and (max-width: 480px) {
	.main__product-wrap {margin-top: 20px;}

	.main__product-item {width: 100%; margin: 0 0 40px;}
	.main__product-item + .main__product-item {margin-left: 0;}

}



/* solution */
.main__solution {padding:130px 0 90px; text-transform: uppercase; background: url('../images/main/main_solution.jpg') center center no-repeat; background-size: cover;}

.main__solution-title h2 {font-size: 90px; font-weight: 700; color: #fff; width: 75%; line-height: 1.2; margin-bottom: 40px;}
.main__solution-title h2 span {vertical-align: baseline; color: #07a695;}
.main__solution-title h3 {font-size: 25px; font-weight: 700; color: #fff; width: 55%; line-height: 1.4; margin-bottom: 95px;}

.main__smart-desc {position: relative;}
.main__smart-desc p {font-size: 24px; font-weight: 300; color: #fff; line-height: 2.2; position: relative;}
.main__smart-desc p::after {content: ''; display: block; width: 50%; height: 1px; background: #07a695; position: absolute; bottom: 17px; right: calc(100% - 330px);}
.main__smart-desc p:nth-of-type(3) {font-weight: 700; color: #07a695;}
.main__smart-desc p:nth-of-type(3)::after {height: 4px; bottom: 14px; right: 0; width: 200%;}
.main__smart-desc p:nth-of-type(3)::before {display: block; content: ''; width: 30px; height: 4px; background: #07a695; position: absolute; bottom: 23px; right: -1px; transform: rotate(35deg);}

.main__smart-desc .link {display: block; padding: 300px 30px 30px 300px; font-size: 35px; font-weight: 700; color: #07a695; position: absolute; bottom: 0; right: 50px;}
.main__smart-desc .link span {position: relative; z-index: 1;}
.main__smart-desc .link::after {display: block; content: ''; width: 30px; height: 30px; border-radius: 50%; background: #fff; position: absolute; bottom: 38px; right: 30px; transform: translate(30%, -25%);}
.main__smart-desc .link:hover {color: #fff;}
.main__smart-desc .link:hover::after {background: #07a695;}

@media only screen and (max-width: 1240px) {
	.main__solution-title h2 {font-size: 80px;}
}

@media only screen and (max-width: 1024px) {
	.main__solution-title h2, .main__solution-title h3 {width: 80%;}

	.main__solution-title h2 {font-size: 70px;}
}

@media only screen and (max-width: 768px) {
	.main__solution-title h2, .main__solution-title h3 {width: 100%;}

	.main__solution-title h2 {font-size: 50px; margin-bottom: 20px;}
	.main__solution-title h3 {font-size: 20px;}
	.main__smart-desc p {font-size: 18px;}

	.main__smart-desc p::after {bottom: 13px; right: calc(100% - 250px);}
	.main__smart-desc p:nth-of-type(3)::after {bottom: 10px;}
	.main__smart-desc p:nth-of-type(3)::before {bottom: 20px;}
}

@media only screen and (max-width: 640px) {
	.main__solution {padding: 100px 0;}

	.main__solution-title h2 {font-size: 30px;}
	.main__solution-title h3 {font-size: 16px;}

	.main__smart-desc p::after {bottom: 13px; width: 80%; right: calc(100% - 210px);}
}

@media only screen and (max-width: 480px) {
	.main__solution {padding: 100px 0 150px;}

	.main__smart-desc p::after {width: 100%;}
	.main__smart-desc p:nth-of-type(3)::before {display: none;}
	.main__smart-desc p:nth-of-type(3)::after {width: 100%; height: 1px; bottom: 13px; right: calc(100% - 210px);}

	.main__smart-desc .link {bottom: -80px; right: 50%; transform: translateX(50%); padding: 30px;}
}





/* Promotion Video */
.main__story {background: url('../images/main/main_vod.jpg') 0 0 no-repeat; padding: 130px 0 140px;}
.main__story-wrap {z-index:2; margin-top: 110px;}

.main__story-inner {font-size:0;}
.main__vod-box {display:inline-block; width:48.5%; margin-right: 3%; vertical-align: bottom;}
.main__vod-box + .main__vod-box {margin-right: 0; vertical-align: top;}

.main__vod-vod{position:relative; z-index:2; }
.main__vod-vod:after{content:""; display:block; padding-bottom:56.25%;}
.main__vod-vod > iframe{width:100%; position:absolute; left:0; bottom:0; width:100%; height:100%;}

.main__news {margin-bottom: 45px;}
.main__news-title {font-size: 40px; font-weight: 500; color: #27255f; padding-bottom: 30px; border-bottom: 2px solid #27255f; position: relative;}
.main__news-title .link {display: block; width: 35px; height: 35px; background: url('../images/common/plus_bg.png') 0 0 no-repeat; position: absolute; top: 0; right: 0;}
.main__news-title .link::after {display: block; content: ''; width: 18px; height: 18px; background: url('../images/common/plus.png') 0 0 no-repeat; position: absolute; top: 8px; left: 9px;}
.main__news-title .link:hover {background: url('../images/common/plus_bg_h.png') 0 0 no-repeat;}

.main__news-item {border-bottom: 1px solid #e0e0e0; position: relative;}
.main__news-item a {display: block; padding: 25px 0;}
.main__news-item h3 {position: absolute; top: 50%; left: 0; transform: translateY(-45%); font-size: 14px; font-weight: 300; color: #666; vertical-align: baseline;}
.main__news-item h3 em {font-size: 45px; font-weight: 700; color: #27255f;}
.main__news-item p {padding-left: 75px; font-size: 25px; font-weight: 400; color: #27255f; vertical-align: middle;}
.main__news-item a:hover p {color: #07a695;}


.main__customer {font-size: 0;}
.main__customer li {display: inline-block; width: calc(33.3333% - 27px); margin-right: 40px; position: relative;}
.main__customer li:last-child {margin-right: 0;}
.main__customer li::after {content: ''; display: block; width: calc(100% + 10px); height: calc(100% + 20px); background: url('../images/main/main_customer_shadow.png') 0 0 no-repeat; position: absolute; top: 0; left: 0; z-index: -1;}

.main__customer li a {display: block; height: 100%; width: 100%; font-size: 20px; font-weight: 500; color: #fff; text-align: center;}
.main__customer li.nth-1 a {background: url('../images/main/main_customer_bg01.png') 0 0 no-repeat;}
.main__customer li.nth-2 a {background: url('../images/main/main_customer_bg02.png') 0 0 no-repeat;}
.main__customer li.nth-3 a {background: url('../images/main/main_customer_bg03.png') 0 0 no-repeat;}
.main__customer li.nth-1 a:hover {background: url('../images/main/main_customer_nth01.png') 0 0 no-repeat;}
.main__customer li.nth-2 a:hover {background: url('../images/main/main_customer_nth02.png') 0 0 no-repeat;}
.main__customer li.nth-3 a:hover {background: url('../images/main/main_customer_nth03.png') 0 0 no-repeat;}

.main__customer li a span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

@media only screen and (max-width: 1400px) {
	.main__news {margin-bottom: 20px;}
	.main__news-title {padding-bottom: 10px;}
	.main__customer li::after {background-size: contain;}
	.main__customer li.nth-1 a, .main__customer li.nth-2 a, .main__customer li.nth-3 a,
	.main__customer li.nth-1 a:hover, .main__customer li.nth-2 a:hover, .main__customer li.nth-3 a:hover {background-size: contain;}
}

@media only screen and (max-width: 1240px) {
	.main__news-title {font-size: 30px;}
	.main__news-item p {font-size: 20px;}
}

@media only screen and (max-width: 1024px) {
	.main__story-wrap {margin-top: 50px;}
	.main__vod-box {width: 100%;}
	.main__vod-vod {width: 80%; margin-left: 10%; margin-bottom: 30px;}

	.main__customer li {width:  calc(25%); margin-right: 12.5%;}
	.main__customer li:last-child {margin-right: 0;}
}

@media only screen and (max-width: 768px) {
	.main__vod-vod {width: 100%; margin-left: 0;}

	.main__news-title {font-size: 24px;}
	.main__news-title .link {top: -10px;}
	.main__customer li {width:  calc(30%); margin-right: 5%;}
	.main__customer li:last-child {margin-right: 0;}
}

@media only screen and (max-width: 480px) {
	.main__customer li {width: 80%; margin: 0 10% 20px;}
}




/* 

.main__customer li:hover a {background: url('../images/main/main_customer_bg_h.png') 0 0 no-repeat;}

.main__customer li.nth-1 a {background: url('../images/main/main_customer_nth01.png') 0 0 no-repeat;}
.main__customer li.nth-2::before {content: ''; display: block; width: 100%; height: 180px; background: url('../images/main/main_customer_nth02.png') 0 0 no-repeat; position: absolute; top: 0; left: 0;}
.main__customer li.nth-3::before {content: ''; display: block; width: 100%; height: 180px; background: url('../images/main/main_customer_nth03.png') 0 0 no-repeat; position: absolute; top: 0; left: 0;} */


/*.main__case-link:hover {background-color:#f6bf00;}
.main__case-link:hover .thumb { box-shadow: 0px 25px 49px 0px rgba(0, 0, 0, 0.3);}
.main__case-link:hover .thumb span {transform:scale(1.1);}
.main__case-link:hover .desc {margin-top:40px;}
.main__case-link:hover .zoom {opacity:1;bottom:8%;}*/

.slick-current .main__case-link {background-color:#f6bf00;}
.slick-current .main__case-link .thumb { box-shadow: 0px 25px 49px 0px rgba(0, 0, 0, 0.3);}
.slick-current .main__case-link .thumb span {transform:scale(1.1);}
.slick-current .main__case-link .desc {margin-top:40px;}
.slick-current .main__case-link .zoom {opacity:1;bottom:8%;}


.main__case-arrow {position: relative; max-width:470px; margin:0 auto; z-index:2000;}
.main__case-prev,
.main__case-next {position:absolute; top:-100px; width:60px; height:28px; text-indent:-99999px; overflow:hidden; background-repeat: no-repeat;  background-size:contain; transition:all 0.3s ease-in-out;}
.main__case-prev {background-image:url('../images/main/arrow_prev.png'); left:-100px; background-position:0% 50%;}
.main__case-next {background-image:url('../images/main/arrow_next.png'); right:-100px;background-position:100% 50%;}
.main__case-prev:hover {left:-110px;}
.main__case-next:hover {right:-110px;}


.main__case-alert {font-size:16px; margin-top:10px; padding:5px 0 5px 30px; color:#222; background:url('../images/main/ico_alert.png') 0 50% no-repeat; line-height:1.3;}

.main__case-more {display:inline-block; background-color:#222; color:#fff; line-height:60px; border-radius:60px; margin-top:20px; position:relative; padding:0 70px 0 30px ; transition: all 0.3s ease-in-out; font-size:0;}
.main__case-more span {font-size:18px;}
.main__case-more:hover {background-color: #149ce3; padding:0 60px 0 40px; color:#fff;}

.main__case-more:after {content:''; display:block; width:10px; height:10px; background-color:transparent; border-width: 2px 2px 0 0; border-style: solid; border-color:#fff; position:absolute; top:50%; right:40px; transform:translateY(-50%) rotate(45deg); transition: all 0.3s ease-in-out;}
.main__case-more:hover:after {right:30px;}