@charset "utf-8";
/* main_Layout */

#max-contanier {position: relative;  overflow-x: hidden;}
#max-contanier hr {border:0;}
#max-contanier section {position: relative; width: 100%;}

@media screen and (max-width: 1336px) {
	#max-contanier {overflow:hidden;}
}



/*------------------------------------
	Main-visaul
------------------------------------*/
#max-contanier section.main-visual { width: 100%; height:auto;padding-top:110px;}
#max-contanier section.main-visual .visual_title{margin:6rem 0 5rem; color:var(--main-color4); }
#max-contanier section.main-visual .visual_title > h2 {font-size: 10rem;font-weight: 900; margin-bottom:4rem; position: relative;  width: 100%; height:10rem}
#max-contanier section.main-visual .visual_title > p {font-size: 1.6rem; font-weight: 500; line-height: 150%;}
#max-contanier section.main-visual .visual_title .word {  position: absolute;  opacity: 0;}
#max-contanier section.main-visual .visual_title .letter {  display: inline-block;  position: relative;  float: left;  transform: translateZ(25px);  transform-origin: 50% 50% 25px;}
#max-contanier section.main-visual .visual_title .letter.out {  transform: rotateX(90deg);  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);}
#max-contanier section.main-visual .visual_title .letter.behind {  transform: rotateX(-90deg);}
#max-contanier section.main-visual .visual_title .letter.in {  transform: rotateX(0deg);  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
#max-contanier section.main-visual .visual_title .word.color1 { color:var(--main-color4); }
#max-contanier section.main-visual .visual_title .word.color2 { color:var(--main-color1); }

#max-contanier section.main-visual .visual_bg {position: relative; margin:0;}
#max-contanier section.main-visual .visual_bg .vis_img {height:55vh; background-size:cover; background-position:center; background-repeat:no-repeat;   }
#max-contanier section.main-visual .visual_bg .vis-bg1 {background-image:url(../images/main/visual_img1.jpg);}
#max-contanier section.main-visual .visual_bg .vis-bg2 {background-image:url(../images/main/visual_img2.png);}
#max-contanier section.main-visual .visual_bg .vis-bg3 {background-image:url(../images/main/visual_img3.png);}
#max-contanier section.main-visual .visual_bg .vis-bg4 {background-image:url(../images/main/visual_img4.png);}
#max-contanier section.main-visual .visual_bg .slick-dots {position: absolute; top: -7rem;left: 50%;width: 1400px;height: 8px;transform: translate(-50%, 0%);display: flex;justify-content: flex-end;}
#max-contanier section.main-visual .visual_bg .slick-dots li {width: 8px; height: 8px; margin:0 15px;}
#max-contanier section.main-visual .visual_bg .slick-dots li button { width: auto; height: auto; padding: 0;}
#max-contanier section.main-visual .visual_bg .slick-dots li button:before {font-family:none; font-size: 0; width:8px; height:8px;	background:var(--sub-color2); }
#max-contanier section.main-visual .visual_bg .slick-dots li.slick-active button:before {background:var(--main-color1); }
#max-contanier section.main-visual .visual_bg .vis_img.slick-active {-webkit-animation: kenburns-top 15s ease-out both;  animation: kenburns-top 15s ease-out both;}

@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}


@media screen and (max-width: 1336px) {
	#max-contanier section.main-visual .visual_bg .slick-dots {width: 100%;}
}
@media screen and (max-width: 1024px) {
	#max-contanier section.main-visual {padding-top:80px}
}
@media screen and (max-width: 768px) { 
	#max-contanier section.main-visual .visual_title {margin:7rem 0 3rem;}
	#max-contanier section.main-visual .visual_title > h2 {font-size: 7rem; height: 7rem; margin-bottom:2rem;	}
	#max-contanier section.main-visual .visual_bg .slick-dots {top:auto; bottom:2rem;}
	#max-contanier section.main-visual .visual_bg .slick-dots li button:before {opacity:.8;background:var(--sub-color1); }
	#max-contanier section.main-visual .visual_bg .slick-dots li.slick-active button:before {background:var(--main-color2); opacity:1;}
}
@media screen and (max-width: 568px) { 
	#max-contanier section.main-visual {padding-top:65px;}
	#max-contanier section.main-visual .visual_title > h2 {font-size: 4rem; height: 4rem; margin-bottom:2rem;	}
	#max-contanier section.main-visual .visual_title > p {font-size: 1.2rem; }
	#max-contanier section.main-visual .visual_title > p  br {display: none;}
}

/*------------------------------------
	main-con
------------------------------------*/
#max-contanier section.main-product {position: relative; height: 750px;}
#max-contanier section.main-product::before { content:'';  position: absolute; top:0; left:50%; width: 50%; height:500px; background: #EDF6F2;}
#max-contanier section.main-product .title { width: 40%; padding: 170px 0;height: 400px;position: relative;display: flex; flex-direction: column;}
#max-contanier section.main-product .title > h2 {display: inline-block;margin: 0;font-size: 7.5rem;text-transform: uppercase;letter-spacing: -.4rem;font-weight: 800; color:var(--main-color4);}
#max-contanier section.main-product .title > h2 > em {display: block;font-style: normal;font-size: 2rem;font-weight: 500;letter-spacing: 0; }
#max-contanier section.main-product .title > p {margin: 6rem 0 10rem;font-size: 1.6rem; text-transform: uppercase;line-height: 150%;}
#max-contanier section.main-product .title > a.more {background: var(--sub-color1);width: max-content; min-width: 15rem;padding: 15px;border-radius: 50px;text-align: center;text-transform: uppercase;font-size: 1.5rem;font-weight: 600;border: 2px solid var(--main-color1);color: var(--main-color1);}
#max-contanier section.main-product .title > a.more:hover {background: var(--main-color1); color: var(--sub-color1); border-color: var(--main-color1);transition: all 0.2s linear;  animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

@keyframes shadow-drop-2-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}

#max-contanier section.main-product .product_slide {width: 60%;position: absolute;right: 0;top: 120px;}
#max-contanier section.main-product .product_slide ul {margin:0; padding:0;}
#max-contanier section.main-product .product_slide ul .slick-list {padding: 20px 20px 80px;}
#max-contanier section.main-product .product_slide ul li {position: relative; }
#max-contanier section.main-product .product_slide .product_img {width:90%; position: relative; max-width:300px; height:auto; box-shadow: 0 0 5px 0px rgb(55 98 83 / 17%);}
#max-contanier section.main-product .product_slide .product_img img {width: 100%;}
#max-contanier section.main-product .product_slide .product_img span {position: absolute; right:-5px; bottom:-5px; background: var(--main-color4);color:var(--sub-color1);padding: 1.3rem 2.5rem; font-weight: 600;font-size: 1.5rem; text-transform:uppercase }

#max-contanier section.main-product .product_slide .product_img:hover {animation: shadow-drop-2-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
#max-contanier section.main-product .product_slide .product_img:hover span {background: var(--main-color2);}
#max-contanier section.main-product .product_slide .slick-arrow {position: absolute; bottom:0; top:auto;transform: none;width: 50px;height: 50px;z-index: 2; background-position:center; background-repeat:no-repeat;}
#max-contanier section.main-product .product_slide .slick-arrow:before {display: none;}
#max-contanier section.main-product .product_slide .slick-prev {background-image:url(../images/main/arrow_prev.png);}
#max-contanier section.main-product .product_slide .slick-next {background-image:url(../images/main/arrow_next.png);left:50px;}
#max-contanier section.main-product .product_slide .progress {  display: inline-block;  width: 60%;  position: absolute;bottom: 25px;left: 15%;height: 2px;  border-radius: 10px;  overflow: hidden;    background-color: #f5f5f5;  background-image: linear-gradient(to right,var(--main-color2),var(--main-color2));  background-repeat: no-repeat;  background-size: 0 100%;    transition: background-size .4s ease-in-out; }
@keyframes shadow-drop-2-bottom {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px) translateY(-12px);
            transform: translateZ(50px) translateY(-12px);
    -webkit-box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
  }
}

#max-contanier section.main-slogan {width: 100%; height: 680px;position: relative;}
#max-contanier section.main-slogan .slogan_box {display: flex; z-index:2;width: 100%;height: 680px;color: var(--sub-color1);flex-direction: column;justify-content: space-around;}
#max-contanier section.main-slogan .slogan_box .title {display: flex;flex-direction: column;}
#max-contanier section.main-slogan .slogan_box .title > h3 {font-size: 5rem;margin: 0 0 2rem;text-transform: uppercase;display: inline-block;line-height: 100%;letter-spacing: -0.3rem;}
#max-contanier section.main-slogan .slogan_box .title > p {width: 50%;display: inline-block;line-height: 150%; font-size: 1.7rem;}
#max-contanier section.main-slogan .slogan_box ul {display: flex;width: 50%;}
#max-contanier section.main-slogan .slogan_box ul li {margin: 0 1rem ; width: 25%;text-align: center;}
#max-contanier section.main-slogan .slogan_box .green_icon {width: 120px; height: 120px;background-repeat:no-repeat; background-position:center; background-color:rgba(255,255,255,.5);border:1px solid var(--sub-color1); display: inline-block;border-radius:50%;}
#max-contanier section.main-slogan .slogan_box .gr_ico1 {background-image:url(../images/main/icon-green1.png);}
#max-contanier section.main-slogan .slogan_box .gr_ico2 {background-image:url(../images/main/icon-green2.png);}
#max-contanier section.main-slogan .slogan_box .gr_ico3 {background-image:url(../images/main/icon-green3.png);}
#max-contanier section.main-slogan .slogan_box .gr_ico4 {background-image:url(../images/main/icon-green4.png);}
#max-contanier section.main-slogan .slogan_box span {margin-top:10px;text-align: center;display: inline-block;font-size: 1.3rem;text-transform: uppercase;letter-spacing: -0.1rem;}
#max-contanier section.main-slogan .slogan-bg {width: 100%;max-width:1500px; height:100%; background:url(../images/main/bg_green.jpg) no-repeat center / cover;display: block; position: absolute; left:0; top:0; z-index:-1;}

#max-contanier section.main-slogan .main-circle {right: -10%;bottom: 60%;z-index: -2;}

#max-contanier section.main-weare {position: relative; margin: 120px 0; }
#max-contanier section.main-weare .title {display: block;margin-bottom: 3rem; color:var(--main-color4); }
#max-contanier section.main-weare .title > span {font-size: 5rem;font-weight: 300;}
#max-contanier section.main-weare .title > h2 {font-size: 9rem;font-weight: 900;line-height: 100%;margin: 0;}
#max-contanier section.main-weare ul {display: flex;  height:300px; align-items: center; }
#max-contanier section.main-weare ul li {flex-basis: 25%;  }
#max-contanier section.main-weare ul li a{display: inline-block;width: 100%;}
#max-contanier section.main-weare ul li a.weare_1 {background-color: #8dc7a9;}
#max-contanier section.main-weare ul li a.weare_2 {background-color: #81af99;}
#max-contanier section.main-weare ul li a.weare_3 {background-color: #3d7462;}
#max-contanier section.main-weare ul li a.weare_4 {background-color: #3a4852;}
#max-contanier section.main-weare .weare_box {  transition:all .4s; height: 220px;padding:5rem;color:var(--sub-color1);display:flex;flex-direction: column;justify-content: space-between;}
#max-contanier section.main-weare .weare_box:hover{height:230px; animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; background:var(--sub-color1); border:5px solid var(--main-color2); color:var(--main-color2);} 
#max-contanier section.main-weare .weare_box svg {width: 30px;height: 30px;}
#max-contanier section.main-weare .weare_box .min-title {}
#max-contanier section.main-weare .weare_box .min-title > h3 {font-size: 2.2rem; margin-bottom: 1rem;}
#max-contanier section.main-weare .weare_box .min-title > span {font-size: 1.4rem;}

#max-contanier section.main-banner {background: #eee;padding: 1rem 0;}
#max-contanier section.main-banner ul  {display: flex;mix-blend-mode: multiply;}
#max-contanier section.main-banner ul li {padding:0 1rem;}
#max-contanier section.main-banner img {width: 100%}


@media screen and (max-width: 1336px) {
	#max-contanier section.main-slogan {width: 90%;}
}
@media screen and (max-width: 1024px) {
	
	#max-contanier section.main-product .title > h2 {font-size:6rem}
	#max-contanier section.main-product .product_slide .progress {left:auto; right:0;}

	#max-contanier section.main-slogan .slogan_box ul {width: 100%;}

	#max-contanier section.main-weare .title > span {font-size: 4rem;}
	#max-contanier section.main-weare .title > h2 {font-size: 7rem;}
	#max-contanier section.main-weare .weare_box {padding:3rem;}

}
@media screen and (max-width: 768px) { 
	#max-contanier section.main-product {height: auto;padding:5rem 0; }
	#max-contanier section.main-product .title {width: auto; padding:0 5% 2rem; height: auto;align-items: center; }
	#max-contanier section.main-product .title > h2 {font-size: 5rem;}
	#max-contanier section.main-product .title > h2 > em {text-align: center;}
	#max-contanier section.main-product .title > p {margin:2rem 0; font-size: 1.4rem; text-align: center;}
	#max-contanier section.main-product .title > a.more {width: auto; padding:1rem 2rem; font-size: 1.2rem;}
	#max-contanier section.main-product .product_slide {position: relative;width: 100%;top:0;}
	#max-contanier section.main-product .product_slide .product_img {margin:0 auto; max-width:200px;}
	#max-contanier section.main-product .product_slide .product_img span {font-size:1.2rem;padding: 1rem 2rem;}
	#max-contanier section.main-product .product_slide .slick-next {left:auto; right:0;}
	#max-contanier section.main-product .product_slide .progress {width: 60%; left:50%; transform:translate(-50%, 0%);}

	#max-contanier section.main-slogan {width: 100%; height: 500px;} 
	#max-contanier section.main-slogan .slogan_box {width: auto; height: 500px;}
	#max-contanier section.main-slogan .slogan_box .title > h3 {font-size:4rem;}
	#max-contanier section.main-slogan .slogan_box .title > p {width: 80%;font-size: 1.4rem;}
	#max-contanier section.main-slogan .slogan_box .green_icon {width: 90px; height: 90px; background-size:50%;	}


	#max-contanier section.main-weare .title > span {font-size: 3rem;}
	#max-contanier section.main-weare .title > h2 {font-size: 4.5rem;}
	#max-contanier section.main-weare {width: auto; padding:0; margin:60px 0;}
	#max-contanier section.main-weare ul {flex-direction: row; flex-wrap: wrap;height: auto;}
	#max-contanier section.main-weare ul li {flex-basis:50%;}

	#max-contanier section.main-weare .weare_box:hover {animation:none;	border: 0; height: 220px; background: #eee;}

}
@media screen and (max-width: 568px) { 
	#max-contanier section.main-product .title > h2 {font-size: 4rem;}
	#max-contanier section.main-product .title > h2 > em {font-size: 1.8rem; text-align:center;}

	#max-contanier section.main-slogan {height: 600px;}
	#max-contanier section.main-slogan .slogan_box  {height: 600px;justify-content: space-evenly;}
	#max-contanier section.main-slogan .slogan_box .title {text-align: center;}
	#max-contanier section.main-slogan .slogan_box .title > h3 {font-size:2.5rem;} 
	#max-contanier section.main-slogan .slogan_box .title > p {width: 100%; font-size:1.3rem	}

	#max-contanier section.main-slogan .slogan_box ul {flex-wrap: wrap;}
	#max-contanier section.main-slogan .slogan_box ul li {margin:1rem 0; flex-basis:50%;display: flex; flex-direction: column; align-items: center;}
	#max-contanier section.main-slogan .slogan_box span {font-size:1rem;}

	#max-contanier section.main-weare .weare_box {height: 80px; flex-direction: row; justify-content: space-between; align-items: center;}	
	#max-contanier section.main-weare .weare_box .min-title {width: 70%; text-align:right;}
	#max-contanier section.main-weare .weare_box .min-title > h3 {font-size: 1.6rem;}
	#max-contanier section.main-weare .weare_box .min-title > span {font-size: 1.2rem;}
	#max-contanier section.main-weare .weare_box svg {width: 40px; height: 40px;}
	#max-contanier section.main-weare .weare_box:hover {height:85px;}
	#max-contanier section.main-weare ul li {flex-basis:100%;}


}