@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;  max-width:1920px; margin:0 auto;}


.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-inner {display:inline-block; margin:-18% 0 0 0; white-space:normal; position:relative; z-index:10; word-break:keep-all;  vertical-align:middle; line-height:1.3;width:100%; }

.main__visual-copy {position:relative; padding:8% 6.67% 8% 6.67%; color:#fff; text-align:center; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);}
.main__visual-copy > h2 {font-size:50px; font-weight:500;}
.main__visual-copy > h2 em {color:#8ec54a; vertical-align: baseline;}
.main__visual-copy > p{font-size:25px; font-weight:100; line-height:1.3; padding:10px 0 0 0;}




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

}
@media only screen and (max-width: 1280px){
	.main__visual-item {min-height:700px !important; }
	.main__visual-inner {margin:-19% 0 0 0;}
}
@media only screen and (max-width: 1024px){
	.main__visual-item { min-height:600px !important;}v
	.main__visual-copy > h2 {font-size:40px;}
	.main__visual-copy > p  {font-size: 20px;}
}
@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 > h2 {font-size:32px;}
	.main__visual-copy > p  {font-size: 18px;}
}

@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 {position:absolute; top:45%; left:50%; font-size:0; transform:translate(-50%, 0); transition: all 0.3s ease-in-out; z-index:1000;}

.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:25px;}
.main__visual-dots button {display:inline-block; position:relative; width:10px; height:10px; border:0;  overflow:hidden;  background-color:rgba(255, 255, 255, 0.5); box-sizing:border-box; transition:all .2s ease-in-out;  font-size:0; border-radius:10px; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);}
.main__visual-dots li:hover button,
.main__visual-dots li.slick-active button {background-color:rgba(255,255,255,1); width:40px; }


@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 10s ease-in-out;
	transform:scale(1.1) 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; color:#222; position:relative;}
.main-title h2 {font-size:50px; font-weight:400; position:relative; font-family: 'Montserrat', 'NEXON Lv2 Gothic', sans-serif; }
.main-title h2 em{display:inline-block; vertical-align: baseline; font-weight:300;}
.main-title h2 strong{display:inline-block; vertical-align: baseline; font-weight:500;}
.main-title p {font-size:24px; font-weight:400; margin-top:10px;}

.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:5.8% 0;  background:url('../images/main/section02_bg.png') 50% 0 no-repeat; background-size:cover;}
.main__product-wrap {margin-top:5.8%;}
.main__product-wrap.inner{max-width:1200px;}
.main__product-list {font-size:0; }
.main__product-item {display:inline-block; vertical-align:top; width:29.333333%; margin:0 2%;}


.main__product-link {display:block; background-color:#fff; border:1px solid rgba(236, 236, 236, 1); transition:all 0.3s ease-in-out; }
.main__product-link:hover {border:0px; box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.3);}

.main__product-link .thumb {overflow:hidden; max-height:300px;}
@media (min-width:1441px) {
	.main__product-link .thumb {max-height:360px;}
}
.main__product-link .thumb img{transform:scale(1); transition:all 0.3s ease-in-out; width:100%;}
.main__product-link:hover .thumb img{transform:scale(1.2);}


.main__product-link .line {position:relative;opacity: 1;transition:all 0.3s ease-in-out;}
.main__product-link .line span {display:block; position:absolute; width:calc(100% - 70px); height:3px; border-radius:3px; background-color:#222; top:0; left:50%; transform:translate(-50%, -2px);}
.main__product-link .line span:before,
.main__product-link .line span:after {content:''; display:block; width:4px; height:4px; border-radius: 5px; border:3px solid #222; position:absolute; top:-4px;}
.main__product-link .line span:before {left:-15px;}
.main__product-link .line span:after {right:-15px;}
.main__product-link:hover .line {opacity: 0;}
.main__product-link .desc {padding:10%; transition:all 0.3s ease-in-out; text-align:center; position:relative;}
.main__product-link .desc span {display:block;}
.main__product-link:hover .desc {background-color:#149ce3;}

.main__product-link .title {font-size:20px; font-weight:600; color:#222; line-height:1.3;}
.main__product-link .text {font-size:16px; font-weight:300; color:#666; margin-top:8%; line-height:1.3;}
.main__product-link:hover .title,
.main__product-link:hover .text {color:#fff;}


.main__product-link .zoom {width:70px; height:70px; position:absolute; left:50%; bottom:-10%;  transform:translate(-50%, 50%); background:#222 url('../images/main/ico_zoom01.png') 50% 50% no-repeat; border-radius:100%; opacity:0; transition: all 0.3s ease-in-out; background-size: cover;}
.main__product-link:hover .zoom {opacity:1;bottom:0;}

@media only screen and (max-width: 1024px) {
	.main__product {padding:10% 0;}
	.main__product-link .line span {width:calc(100% - 60px);}
	
	.main__product-link .desc {padding:8% 8% 16% 8%;}

	.main__product-link .title {font-size:20px;}
	.main__product-link .text {font-size:16px; margin-top:15px;}
	.main__product-link .zoom {width:60px; height:60px;}
}

@media only screen and (max-width: 768px) {
	.main__product {padding:14% 0;}
	.main__product-wrap {margin-top:8%;}
	.main__product-item {width:29.333333%;}




	.main__product-link .line span {width:calc(100% - 60px);}
	
	.main__product-link .desc {padding:8%;}

	.main__product-link .title {font-size:16px;}
	.main__product-link .text {font-size:15px; margin-top:15px;}
	.main__product-link .zoom {width:50px; height:50px;}
}

@media only screen and (max-width: 480px) {
	.main__product {padding:18% 0;}
	.main__product-item {width:100%;}

	.main__product-link .title {font-size:18px;}
	.main__product-link .text {font-size:15px; margin-top:10px;}
	.main__product-link .zoom {width:50px; height:50px;}
}




/* Smart System */
.main__smart {background-color:#f1f6f8; padding:7.8% 0 7.8% 0;}

.main__smart-wrap {font-size:0;}
.main__smart-box {display:inline-block; vertical-align:top;}
.main__smart-box.nth-1 {width:45%; padding:0 7% 0 0;}
.main__smart-box.nth-2 {width:55%;}

.main__smart-desc h2 {font-size:35px; color:#28b0e5; font-weight:100;  font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing:0.3em;}
.main__smart-desc h2 span { background:url('../images/main/ico_star01.png') 100% 50% no-repeat; display:inline-block; padding:0 40px 0 0;}
.main__smart-desc h3 {font-size:85px; color:#222; font-weight:700; margin:15px 0 0 0;}
.main__smart-desc h3 em {vertical-align:baseline; display:inline-block;}
.main__smart-desc .text {font-size:18px; color:#222; margin:20px 0 0 0; line-height:1.5;}



.main__smart-desc .link {display:inline-block; min-width:210px; text-align:left; background-color:#222; color:#fff; line-height:60px; border-radius:60px; margin-top:40px; position:relative; padding:0 70px 0 30px ; transition: all 0.3s ease-in-out; font-size:0;text-align:left;}
.main__smart-desc .link span { display:inline-block; font-size:18px; transition: all 0.3s ease-in-out; }
.main__smart-desc .link:hover {background-color: #149ce3; color:#fff;}

.main__smart-desc .link: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__smart-desc .link:hover:after {right:30px;}

.main__smart-feature {position:relative; padding:0 0 5% 0;}
.main__smart-feature .image2 {position:absolute; top:0px; left:0; transform:translateX(-55%); z-index:3;}

.main__smart-item {position:absolute; width:27.5%; border-radius: 50%; text-align:center; overflow:hidden; bottom:0;  animation: is-circle1 5s infinite;}
.main__smart-item:nth-child(1) {background-color:rgba(40, 177, 230, 0.9); right:69%; z-index:2; color:#fff;}
.main__smart-item:nth-child(2) {background-color:rgba(255, 255, 255, 0.8);right:46%; color:#28b0e5; animation-delay: 1s;}
.main__smart-item:nth-child(3) {background-color:rgba(40, 177, 230, 0.9); right:23%; z-index:2; color:#fff; animation-delay: 2s;}
.main__smart-item:nth-child(4) {background-color:rgba(255, 255, 255, 0.8); right:0%; color:#28b0e5; animation-delay: 3s;}
.main__smart-item p {display:inline-block; padding:0 10%; font-size:23px; font-weight:600;}
.main__smart-item p span{display:inline-block; line-height:1.3;}


@keyframes is-circle1 {
	0% {transform:scale(1);}
	50% {transform:scale(1.1);}
	100% {transform:scale(1);}
}




@media only screen and (max-width: 1280px) {
	.main__smart-item p span{ font-size:18px;}
}

@media only screen and (max-width: 1024px) {
	.main__smart {padding:10% 0;}
	.main__smart-box.nth-1 {width:100%; padding:0 0 0 0;}
	.main__smart-box.nth-2 {width:100%; margin-top:8%;}

	.main__smart-desc {text-align:center;}
	.main__smart-desc br{display:none;}
	.main__smart-desc h2 {font-size:32px;}
	.main__smart-desc h2 span {padding:0 35px 0 0;}
	.main__smart-desc h3 {font-size:80px; margin:15px 0 0 0;}
	.main__smart-desc .text {font-size:18px; margin:20px 0 0 0;}

	

	.main__smart-desc .link {max-width:250px; line-height:50px; border-radius:50px; margin-top:40px; padding:0 50px 0 30px ; }
	.main__smart-desc .link span {font-size:16px;}

	.main__smart-desc .link:after { width:10px; height:10px; right:25px;}
	.main__smart-desc .link:hover:after {right:20px;}



	
	.main__smart-feature {padding:0 0 0% 0; text-align:center;}
	.main__smart-feature .image2 { left:0; transform:translateX(-25%); width:35%;}
	.main__smart-list {position:relative; width:78%; margin:0 0 0 15%;}
}
@media only screen and (max-width: 768px) {
	.main__smart {padding:14% 0;}
	.main__smart-box.nth-2 {margin-top:10%;}

	.main__smart-desc h2 {font-size:32px;}
	.main__smart-desc h2 span {padding:0 35px 0 0;}
	.main__smart-desc h3 {font-size:64px; margin:15px 0 0 0;}
	.main__smart-desc .text {font-size:16px; margin:20px 0 0 0;}


	.main__smart-desc .link {min-width:240px; line-height:50px; margin-top:40px; }

	.main__smart-desc .link:after { width:8px; height:8px; right:25px;}
	.main__smart-desc .link:hover:after {right:20px;}


	.main__smart-feature {padding:0 0 0% 0; text-align:center;}
	.main__smart-feature .image2 { left:0; transform:translateX(-25%); width:35%;}
	.main__smart-list {width:auto; margin:0 0 0 10%;}
	.main__smart-item p span{ font-size:16px; font-weight:500;}
}
@media only screen and (max-width: 640px) {
	.main__smart-desc h2 {font-size:24px;}
	.main__smart-desc h2 span {padding:0 30px 0 0; background-size:auto 20px;}
	.main__smart-desc h3 {font-size:56px; margin:15px 0 0 0;}
	.main__smart-desc .text {font-size:16px; margin:20px 0 0 0;}


	.main__smart-list {width:auto; margin:0 0 0 0;}

	.main__smart-item {width:50%; position:static; display:inline-block; }
	.main__smart-item:nth-child(1),
	.main__smart-item:nth-child(4) {background-color:rgba(40, 177, 230, 0.8); color:#fff;}
	.main__smart-item:nth-child(2),
	.main__smart-item:nth-child(3) {background-color:rgba(142, 197, 75, 0.8); color:#fff;}
	
}
@media only screen and (max-width: 480px) {
	.main__smart {padding:18% 0;}
	.main__smart-desc br{display:block;}
	.main__smart-desc .link {min-width:280px; line-height:50px; margin-top:40px; }
	.main__smart-item p span{ font-size:14px;}
}




/* Promotion Video */
.main__vod {background-color:#f1f6f8;}
.main__vod-wrap {position:relative; z-index:2;}
.main__vod-wrap:after {content:''; display:block; background:#28b1e6; position:absolute; bottom:0; left:0; width:100%; height:calc(100% - 40px); z-index:-1;}

.main__vod-inner {font-size:0;}
.main__vod-box {display:inline-block; width:50%; padding:0 4.6% 0 0; vertical-align: bottom;}

.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__vod-desc {width:50%; display:inline-block; vertical-align: bottom; padding:8.5% 0% 5% 2%;}
.main__vod-desc h2 {font-size:35px; color:#fff;  font-family: 'Montserrat', sans-serif; font-weight:100;}
.main__vod-desc h2 strong{font-weight:400; vertical-align: baseline;}
.main__vod-desc h3 {font-size:25px; color:#222; font-weight:700; margin:15px 0 0 0;}
.main__vod-desc h3 span {display:inline-block; border-bottom:1px solid #222; line-height:1.3;}
.main__vod-desc .text {font-size:18px; color:#222; margin:15px 0 0 0; line-height:1.5;}



@media only screen and (max-width: 1024px) {
	.main__vod-box {width:100%; padding:0;}

	.main__vod-desc {width:100%; padding:8% 0% 8% 0%;text-align:center;}
	.main__vod-desc br:first-child {display:none;}
	.main__vod-desc h2 {font-size:32px;}
	.main__vod-desc h3 {font-size:24px; margin:10px 0 0 0;}
}

@media only screen and (max-width: 768px) {
	.main__vod-desc {padding:8% 0% 12% 0%;}
	.main__vod-desc .text {font-size:16px;}
}

@media only screen and (max-width: 480px) {
	.main__vod-desc {padding:10% 0% 18% 0%;}
	.main__vod-desc h2 {font-size:28px;}
	.main__vod-desc h3 {font-size:18px;}
}






/*설치시공사례*/
.main__case {padding:6.8% 0 9.4% 0; background:url('../images/main/section05_bg.png') 50% 50% no-repeat; background-size:cover;}
.main__case-wrap {margin-top:4%;}

.main__case-list {font-size:0; overflow:hidden;}
.main__case-item {display:inline-block; vertical-align:top; width:470px; position:relative; cursor: pointer;}
.main__case-link {display:block; padding:12.8%; background-color:transparent; transition:all 0.3s ease-in-out; position:relative;}
.main__case-item:after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}


.main__case-link .thumb { box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0); overflow: hidden; transition:all 0.3s ease-in-out;}
.main__case-link .thumb span {display:block; background-position:50% 50%; background-size:cover; background-repeat: no-repeat; transition:all 0.3s ease-in-out;transform:scale(1);}
.main__case-link .desc {text-align:center; margin:30px 0 0 0; color:#222; position: relative; padding-bottom:24%; transition:all 0.3s ease-in-out;}
.main__case-link .title {font-size:22px; font-family: 'Montserrat', 'NEXON Lv2 Gothic', sans-serif; line-height:1.3; font-weight:600; transition:all 0.3s ease-in-out; display:block; max-height:60px; overflow: hidden;}
.main__case-link .text {font-size:18px; line-height:1.3; transition:all 0.3s ease-in-out; display:block; max-height:46px; margin-top:10px;}

.main__case-link .zoom {width:70px; height:70px; position:absolute; left:50%; bottom:-10%; background:#222 url('../images/main/ico_zoom01.png') 50% 50% no-repeat; border-radius:100%; opacity:0; transition: all 0.3s ease-in-out; animation: heartBeat 3s infinite; margin-left:-35px;}


/*.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:after {display:none;}
.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-control {text-align:center;}
.main__case-arrow {position: relative; max-width:470px; margin:0 auto; z-index:2000;}
.main__case-prev,
.main__case-next {display:inline-block; 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-prev span,
.main__case-next span {font-size:0;}


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

.main__case-more {display:block; max-width:320px;  margin:0 auto;  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;text-align:left;}
.main__case-more span { display:inline-block; font-size:18px; transition: all 0.3s ease-in-out; }
.main__case-more:hover {background-color: #149ce3; 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;}


@media only screen and (max-width: 1024px) {
	.main__case {padding:10% 0 10% 0;}
	.main__case-wrap {margin-top:6%;}

	.main__case-item {width:400px;}
	.main__case-link {padding:10%;}

	.main__case-link .thumb { box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0);}
	.main__case-link .desc {margin:25px 0 0 0; padding-bottom:60px;}
	.main__case-link .title {font-size:20px; max-height:58px;}
	.main__case-link .text {font-size:16px; max-height:42px;}

	.main__case-link .zoom {width:60px; height:60px; background-size:cover; margin-left:-30px;}


	.slick-current .main__case-link .thumb { box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.4);}
	.slick-current .main__case-link .desc {margin-top:35px;}
	.slick-current .main__case-link .zoom {opacity:1;bottom:5%;}


	.main__case-control {text-align:center;}


	.main__case-arrow {max-width:400px;}
	.main__case-prev,
	.main__case-next {top:-70px; width:60px; height:28px;}
	.main__case-prev {left:-90px;}
	.main__case-next {right:-90px;}
	.main__case-prev:hover {left:-100px;}
	.main__case-next:hover {right:-100px;}


	.main__case-alert {font-size:15px; background-size:18px auto; margin-top:30px;}

	.main__case-more {display:block; max-width:250px; margin:0 auto; line-height:50px; border-radius:50px; margin-top:20px; padding:0 50px 0 30px ; transition: all 0.3s ease-in-out; }
	.main__case-more span {font-size:16px;}

	.main__case-more:after { width:10px; height:10px; right:25px;}
	.main__case-more:hover:after {right:20px;}
}


@media only screen and (max-width: 768px) {
	.main__case {padding:12% 0 12% 0;}
	.main__case-wrap {margin-top:8%;}

	.main__case-item {width:320px;}
	.main__case-link {padding:8%;}

	.main__case-link .thumb { box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0);}
	.main__case-link .desc {margin:20px 0 0 0; padding-bottom:50px;}
	.main__case-link .title {font-size:18px; max-height:50px;}
	.main__case-link .text {font-size:15px; max-height:40px;}

	.main__case-link .zoom {width:50px; height:50px; margin-left:-25px;}


	.slick-current .main__case-link .thumb { box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.4);}
	.slick-current .main__case-link .desc {margin-top:30px;}
	.slick-current .main__case-link .zoom {bottom:5%;}


	.main__case-control {text-align:center;}


	.main__case-arrow {max-width:320px;}
	.main__case-prev,
	.main__case-next {top:-50px; width:60px; height:20px;}
	.main__case-prev {left:-60px;}
	.main__case-next {right:-60px;}
	.main__case-prev:hover {left:-70px;}
	.main__case-next:hover {right:-70px;}


	.main__case-alert {font-size:14px; margin-top:20px; padding:5px 0 5px 24px; background-size:16px auto;  color:#666;}

	.main__case-more {max-width:240px; line-height:50px; margin-top:40px; }

	.main__case-more:after { width:8px; height:8px; right:25px;}
	.main__case-more:hover:after {right:20px;}
}

@media only screen and (max-width: 480px) {
	.main__case {padding:18% 0 18% 0;}
	.main__case-wrap {margin-top:10%;}

	.main__case-item {width:260px;}
	.main__case-link {padding:10%;}


	.main__case-arrow {max-width:100%; margin-top:20px; min-height:20px;}
	.main__case-prev,
	.main__case-next {top:0;}
	.main__case-prev {left:10px;}
	.main__case-next {right:10px;}
	.main__case-prev:hover {left:-20px;}
	.main__case-next:hover {right:-20px;}


	

	.main__case-more {max-width:260px; line-height:50px; margin-top:40px; }

}







/* News & Story*/
.main__newsstory {padding:12% 0 12.5% 0; background:url('../images/main/section06_bg.png') 50% 50% no-repeat; background-size:cover;}
.main__newsstory-wrap{font-size:0;}
.main__newsstory .main-title {color:#fff; text-align:left;}
.main__newsstory .main-title h2 {font-size:35px;}


.link-more {display:block; width:40px; height:40px; border-radius:50%; overflow: hidden; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.link-more span {display:block; background-color:rgba(34, 34, 34, 1); color:#fff; width:100%; height:100%; position: relative; transition:all 0.3s ease-in-out;}
.link-more span:before {content:''; display:block; width:16px; height:1px; position:absolute; background-color:#fff; top:50%; left:50%; margin:-1px 0 0 -8px; transition:all 0.3s ease-in-out;}
.link-more span:after {content:''; display:block; width:1px; height:16px; position:absolute; background-color:#fff; top:50%; left:50%; margin:-8px 0 0 -1px;transition:all 0.3s ease-in-out;}
.link-more span:hover {color:#fff; background-color:rgba(20, 156, 227, 1);}
.link-more span:hover::after,
.link-more span:hover::before { transform:rotate(180deg);}




.main__news {display:inline-block; vertical-align:top; padding:0 4.28% 0 0; width:50%;}

.main__news-wrap {margin:30px 0 0 0;}
.main__news-item + .main__news-item{margin:6.25% 0 0 0;}
.main__news-link {display:block; padding:0 0 4% 0; background-color:#fff; transition:all 0.3s ease-in-out;}
.main__news-link .date {display:inline-block; width:32%; text-align:center;font-family: 'Montserrat', sans-serif; color:#222; position:relative; padding:6.25% 0 0 0;  transition:all 0.3s ease-in-out;}
.main__news-link .date:after {content:''; display:block; position:absolute; right:0; top:0; width:1px; height:54px; background-color:#dcdcdc;  transition:all 0.3s ease-in-out;}
.main__news-link .yearmonth {display:inline-block; padding:0 0 5px 0; border-bottom:1px solid #222; font-size:14px;}
.main__news-link .yearmonth i,
.main__news-link .yearmonth em {display:inline-block; vertical-align: baseline;}
.main__news-link .day {font-size:60px; display: block; font-weight:700;}
.main__news-link .desc {display:inline-block; width:68%; padding:6.25% 4.5% 0 4.5%;}
.main__news-link .desc:after {content:''; display:block; clear:both;}
.main__news-link .title {display:block; font-size:18px; line-height:1.4;  transition:all 0.3s ease-in-out; overflow:hidden; max-height:50px;}
.main__news-link .more {display:block; width:36px; height:13px; background:url('../images/main/ico_arrow01.png') 100% 0 no-repeat; float:right; margin-top:10px; transition:all 0.3s ease-in-out; background-size:auto 13px;}


.main__news-link:hover {background-color:#149ce3;}
.main__news-link:hover .date {color:#fff;}
.main__news-link:hover .date:after {background-color:#fff;}
.main__news-link:hover .yearmonth {border-bottom:1px solid #fff;}
.main__news-link:hover .title {color:#fff;}
.main__news-link:hover .more {background-position:0 0;}

.main__story {display:inline-block; vertical-align:top; width:50%;}
.main__story-wrap {margin:30px 0 0 0;}

.main__story-item {display:inline-block; width:50%; vertical-align: top;}
.main__story-item:nth-child(1) {width:50%;}
.main__story-item:nth-child(2) {width:calc(50% - 1px); margin:0 0 0 1px;}
.main__story-item:nth-child(3) {width:50%; margin:1px 0 0 0;}
.main__story-item:nth-child(4) {width:calc(50% - 1px); margin:1px 0 0 1px;}

.main__story-link {display:block; padding:13.8% 11%; background-color:#fff; transition:all 0.3s ease-in-out;}
.main__story-link:hover {background-color:#7dac00;}
.main__story-link .ico {width:24.9%; background-position:50% 50%; background-repeat:no-repeat; background-size:contain; display:inline-block; transition:all 0.3s ease-in-out;}

.main__story-item:nth-child(1) .main__story-link .ico {background-image:url('../images/main/ico_story01.png');}
.main__story-item:nth-child(2) .main__story-link .ico {background-image:url('../images/main/ico_story02.png');}
.main__story-item:nth-child(3) .main__story-link .ico {background-image:url('../images/main/ico_story03.png');}
.main__story-item:nth-child(4) .main__story-link .ico {background-image:url('../images/main/ico_story04.png');}

.main__story-item:nth-child(1) .main__story-link:hover .ico {background-image:url('../images/main/ico_story01_on.png');}
.main__story-item:nth-child(2) .main__story-link:hover .ico {background-image:url('../images/main/ico_story02_on.png');}
.main__story-item:nth-child(3) .main__story-link:hover .ico {background-image:url('../images/main/ico_story03_on.png');}
.main__story-item:nth-child(4) .main__story-link:hover .ico {background-image:url('../images/main/ico_story04_on.png');}

.main__story-link .desc {display:inline-block; margin-left:15px; width:calc(100% - 24.9% - 15px);}
.main__story-link .title {font-size:20px; color:#222; display: block; transition:all 0.3s ease-in-out; line-height:1.3;}
.main__story-link .text {font-size:16px; color:#666; margin-top:5px; line-height: 1.3; display: block; transition:all 0.3s ease-in-out;}

.main__story-link:hover .title,
.main__story-link:hover .text {color:#fff;}


@media only screen and (max-width: 1024px) {
	.main__newsstory {padding:14% 0 15% 0;}
	
	.main__newsstory .main-title h2 {font-size:32px;}

	.link-more {width:30px; height:30px; right:0; top:50%; transform:translateY(-50%);}
	.link-more span:before {width:14px; height:1px;  margin:-1px 0 0 -7px;}
	.link-more span:after {width:1px; height:14px; margin:-7px 0 0 -1px;}

	.main__news {padding:0 4.28% 0 0;}

	.main__news-wrap {margin:20px 0 0 0;}
	.main__news-item + .main__news-item{margin:4% 0 0 0;}
	.main__news-link { padding:0 0 4% 0; }
	.main__news-link .date {width:25%;  padding:5% 0 0 0;}
	.main__news-link .date:after { width:1px; height:50px; }
	.main__news-link .yearmonth {padding:0 0 5px 0; font-size:12px;}
	
	.main__news-link .day {font-size:40px;}
	.main__news-link .desc {width:75%; padding:5% 5% 0 5%;}
	.main__news-link .title {font-size:16px; max-height:44px;}


	.main__story-wrap {margin:20px 0 0 0;}

	.main__story-link .title {font-size:18px;}
	.main__story-link .text {display:none;}
}

@media only screen and (max-width: 768px) {
	.main__newsstory {padding:14% 0 15% 0;}
	.main__newsstory .main-title h2 {font-size:28px;}

	.main__news {padding:0 0 0 0; width:100%;}
	.main__news-link { padding:0 0 4% 0; }

	.main__story {width:100%; margin-top:8%;}

	.main__story-link .title {font-size:18px;}
	.main__story-link .text {display:block; font-size:14px;}
}
@media only screen and (max-width: 580px) {
	.main__story-link .text {display:none;}
}

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

	.main__newsstory {padding:14% 0 15% 0;}
	.main__newsstory .main-title h2 {font-size:28px;}

	.main__news {padding:0 0 0 0; width:100%;}
	.main__news-link { padding:0 0 4% 0; }
	


	.main__story {width:100%; margin-top:8%;}

	.main__story-item:nth-child(1) {width:100%;}
	.main__story-item:nth-child(2) {width:100%; margin:1px 0 0 0;}
	.main__story-item:nth-child(3) {width:100%; margin:1px 0 0 0;}
	.main__story-item:nth-child(4) {width:100%; margin:1px 0 0 0;}
	.main__story-link {padding:5% 5%;}


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

	.main__story-link:hover::after {border-color:#fff; right:20px;}
	.main__story-link .ico {width:12%; }
	.main__story-link .desc {width:calc(100% - 12% - 15px); padding-right:50px;}
	

	.main__story-link .title {font-size:15px;}
}