@charset "utf-8";
/*------------------------------------
	common 
------------------------------------*/
.inner {margin:0 auto; max-width:154rem;}

@media (max-width: 1540px) {
	.inner{max-width:100%; width: auto; padding:0 4%; box-sizing:border-box;}
}


/*------------------------------------
	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:1540px) {
}


/*------------------------------------
	Main-visaul
------------------------------------*/
main section {position: relative;}
.mvisual_swiper {position:relative; width:100%; height:100%;}
.mvisual_swiper .swiper-slide {width:100%; height:100%; overflow:hidden;}
.mvisual_swiper .swiper-slide .txt_box {position:relative; z-index: 1; height:100%; display:flex; flex-direction: column; justify-content: center;  color:var(--white);}
.mvisual_swiper .swiper-slide .txt_box p {font-family: 'KCC-Hanbit';}
.mvisual_swiper .swiper-slide .txt_box .stit {font-size: 2.2rem; margin:0 0 1.5rem 0; opacity:.6; }
.mvisual_swiper .swiper-slide .txt_box .tit {font-size: 6.5rem; line-height:1.3;}
.mvisual_swiper .swiper-slide .bg{position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.mvisual_swiper .swiper-slide .bg img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.mvisual_swiper .swiper-slide .bg .mo {display:none;}

.mvisual_swiper .swiper-slide-active .bg  {animation: mbg 10s;  animation-fill-mode:both; }

@keyframes mbg {
	0% {transform: scale(1); } 
	100% {transform: scale(1.15); } 
} 

#mvisual .scroll_wp {position:absolute; bottom:8rem; width:100%; text-align: center; z-index:2; }
#mvisual .scroll {position:relative; display:inline-block; width:2.2rem; height:3.2rem; background:url(../images/main/ico_scroll.svg)no-repeat 50% 50% / cover; }
#mvisual .scroll:before {position:absolute; top:-5rem; left:-5.5rem; width:13rem; height:13rem;  background:url(../images/main/bg_scroll.svg)no-repeat 50% 50% / cover; content:''; 
animation: rotate 3s infinite linear; z-index: 2;}
@-webkit-keyframes rotate {
  0% {transform: rotate(0);} 100% {transform: rotate(360deg);}
}


@media screen and (max-width:1540px) {  
	.mvisual_swiper .swiper-slide .txt_box .stit {font-size: 2rem;}
	.mvisual_swiper .swiper-slide .txt_box .tit {font-size: 3.5em;}
}
@media screen and (max-width:1200px) {
	.mvisual_swiper .swiper-slide .txt_box .stit {font-size: 1.8rem;}
	.mvisual_swiper .swiper-slide .txt_box .tit {font-size: 3em;}
	.mvisual_swiper .swiper-slide .bg .pc {display:none;}
	.mvisual_swiper .swiper-slide .bg .mo {display:block;}
	
	#mvisual .scroll {width:2rem; height:3rem; }
	#mvisual .scroll:before {width:10rem; height:10rem; top:-3.4rem; left:-4.1rem;}
	
}
@media screen and (max-width:768px) {
	.mvisual_swiper .swiper-slide .txt_box .stit {font-size: 1.6rem;}
	.mvisual_swiper .swiper-slide .txt_box .tit {font-size: 2em; line-height:1.4;}
	
	#mvisual .scroll_wp {bottom:4rem;}
	#mvisual .scroll {width:1rem; height:2rem; }
	#mvisual .scroll:before {width:6rem; height:6rem; top:-2rem; left:-2.5rem;}
	
}


/*------------------------------------
	Msect1
------------------------------------*/
#msect1 {background:#F6F7F7 url(../images/main/bg_simbol.svg)no-repeat 95% 100%;}
#msect1 .inner {display:flex; align-items: center; height:100%;}
#msect1 .inner > div {width:50%;  }
main .stit2{position:relative; font-size: 1.6rem; font-weight: 700; color:#000; display:block; margin:0 0 1rem 0; padding-left:3rem;}
main .stit2:before {position:absolute; top:.8rem; left:0; width:1rem; height:1rem; border-radius:1.2rem; content:''; background:var(--main-color1);}
main strong.tit {display:block; font-size: 2.5em; margin:0 0 4rem 0; line-height:1.3; word-break:keep-all;}

#msect1 .inner .left_area img {max-width:100%;}
#msect1 .inner .right_area .desc {line-height:1.6; margin:0 0 6rem 0;}
#msect1 .inner .right_area .con_btn {display:inline-block; padding:2rem 2rem 2rem 2.5rem; font-size: 1.6rem; background:var(--main-color1); color:var(--white); font-weight: 600; border-radius:4rem;}
#msect1 .inner .right_area .con_btn i {display:inline-block; margin:0 0 0 4rem; border:.2rem solid var(--white); padding:.3em; border-radius:2rem; font-size:.9em;}


@media screen and (max-width:1540px) {     
	main .stit2{font-size: 1.4rem; padding-left:2.5rem;} 
	main strong.tit {font-size: 1.8em; line-height:1.3; margin:0 0 3.5rem 0;}
	#msect1 .inner .left_area  {padding-right:5%; }
	#msect1 .inner .right_area .desc {line-height:1.6; margin:0 0 5rem 0; font-size: .9em;}
	#msect1 .inner .right_area .con_btn {padding:1.8rem 1.8rem 1.8rem 2.5rem; font-size: 1.5rem; }

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

}
@media screen and (max-width:768px) {
	main .stit2{font-size: 1.3rem; padding-left:2rem;} 
	main strong.tit {font-size: 1.6em; margin:0 0 1.5rem 0;}
	
	#msect1 .inner {flex-direction: column;justify-content: center; padding:5%; } 
	#msect1 .inner > div {width:100%;}
	#msect1 .inner .left_area  {padding-right:0; text-align: center;}
	#msect1 .inner .left_area img {max-width:70%;}
	
	#msect1 .inner .right_area .desc { margin:0 0 3rem 0; font-size: 1em;}
	#msect1 .inner .right_area .con_btn {padding:1.2rem 1.2rem 1.2rem 2rem; font-size: 1.3rem; }
}


/*------------------------------------
	Msect2
------------------------------------*/
#msect2 .inner {height: 100%; display: flex; justify-content: center; align-items: flex-start; flex-direction: column;}
#msect2 ul {display:flex; margin-left:-4.4rem;}
#msect2 ul li {margin-left:4.4rem;}
#msect2 ul li .thumb {position:relative; border-radius:1rem; overflow:hidden; font-size: 0; line-height:1;}
#msect2 ul li .thumb img {width:100%; height:100%;}
#msect2 ul li .thumb span {position:absolute; top:100%; width:100%; height:100%; display:flex; flex-direction: column; justify-content: center; align-items: center;  z-index: 1; transition:.6s;
background: rgba(0,51,161,0.85); font-size: 1.6rem;  text-align: center; font-weight: 600; color:var(--white); letter-spacing:0;}
#msect2 ul li .thumb span i {width:3.5rem; height:3.5rem; display:block; background:url(../images/main/ico_search.svg)no-repeat 50% 50% / cover; margin:0 0 2rem 0;}

#msect2 ul li:hover .thumb {box-shadow:1rem 1rem 3rem rgba(0,0,0,0.2);}
#msect2 ul li:hover .thumb span{top:0;}
#msect2 ul li p {font-size: 1.3em; font-weight: 600; color:#222; margin:2rem 0 0 0;}


@media screen and (max-width:1540px) {     
	#msect2 ul li .thumb span i {width:3rem; height:3rem; } 
	#msect2 ul li p {font-size: 1.2em; }
}
@media screen and (max-width:1200px) {
	#msect2 ul {display:flex; flex-wrap:wrap; width:104%; margin-left:-4%;}
	#msect2 ul li {width:46%; margin-left:4%; margin-bottom:2rem;}  
	#msect2 ul li .thumb {position:relative; height:auto; padding-top:50%;}
	#msect2 ul li .thumb img {position:absolute; top:0; left:0; object-fit:cover;}
	
	#msect2 ul li p {margin:1rem 0 0 0;}
}
@media screen and (max-width:768px) {
	#msect2 ul li:hover .thumb span{display:none;}
}


/*------------------------------------
	Msect3
------------------------------------*/
#msect3 {background:url(../images/main/bg_tech.png)no-repeat 50% 50% / cover; color:var(--white);}
#msect3 .inner {display:flex; align-items: center; gap:5%;} 
#msect3 .inner .txt_box {width:60%;}
#msect3 .stit2,
#msect3 .tit {color:var(--white);}
#msect3 .desc {opacity:.75; line-height:1.4; font-weight: 400; word-break:keep-all;}

#msect3 .left_area {width:60%;  }
#msect3 .left_area ul {display:flex; margin-left:-2%; margin-top:5rem; flex-wrap:wrap;}
#msect3 .left_area ul li {width:48%; margin-left:2%; margin-bottom:1rem; display: flex; align-items: center;}
#msect3 .left_area ul li i {display:inline-block; min-width:5rem; height:5rem; border:1px solid rgba(255,255,255,0.5); border-radius:5rem; margin:0 2rem 0 0; background-repeat:no-repeat; background-position:50% 50%;
background-size:cover;}
#msect3 .left_area ul li i.ico1 {background-image:url(../images/main/ico_tech1.svg);}
#msect3 .left_area ul li i.ico2 {background-image:url(../images/main/ico_tech2.svg);}
#msect3 .left_area ul li i.ico3 {background-image:url(../images/main/ico_tech3.svg);}
#msect3 .left_area ul li i.ico4 {background-image:url(../images/main/ico_tech4.svg);}
#msect3 .left_area ul li i.ico5 {background-image:url(../images/main/ico_tech5.svg);}
#msect3 .left_area ul li i.ico6 {background-image:url(../images/main/ico_tech6.svg);}

#msect3 .right_area  {width:40%}
#msect3 .right_area ul {display:flex; flex-wrap:wrap; margin-left:-2%;}
#msect3 .right_area ul li {width:31%; padding:2rem; margin:0 0 1rem 2%; box-sizing:border-box; border:2px solid var(--white); text-align: center; border-radius:1rem; line-height:1.3; vertical-align:middle; display: flex
; align-items: center; justify-content: center;}
#msect3 .right_area p {position:relative; width:100%; padding:2rem; background:var(--main-color2); border-radius:1rem; text-align: center; box-sizing:border-box; margin:6rem 0 0 0; line-height:1.3;}
#msect3 .right_area p:before {position:absolute; top:-4rem; left:50%; transform:translateX(-50%); content:'';  
border-left: .8rem solid transparent; border-right: .8rem solid transparent; border-top: .8rem solid var(--white);}


@media screen and (max-width:1540px) {     
}
@media screen and (max-width:1200px) {
	#msect3 .inner {flex-direction: column; gap:0;} 
	#msect3 .left_area, 
	#msect3 .right_area{width:100%;}
	
	#msect3 .right_area ul li {padding:1.5rem;  border-radius:.5rem;}
	#msect3 .right_area p {margin:3rem 0 0 0;}
	#msect3 .right_area p:before {top:-2.5rem;}

}
@media screen and (max-width:768px) {
	#msect3 .left_area {margin-bottom:4rem; }
	#msect3 .left_area ul {display:none;}
	
	#msect3 .right_area ul li  {padding:1rem; line-height:1.2;}
 
}


/*------------------------------------
	Msect4
------------------------------------*/
#msect4 .tab_wp ul li a{color:#B2B2B2; font-weight: 700;}
#msect4 .tab_wp ul li.active a {color:var(--main-color1);}

#msect4 .prod_swiper {position:relative; margin:4rem 0 0 0; overflow:hidden;}
#msect4 .prod_swiper .swiper-slide a {display:block;}
#msect4 .prod_swiper .swiper-slide a .thumb {position:relative; width:100%; height:auto; padding-top:calc(350 / 350 * 100%);  border:1px solid #D6D6D6; border-radius:2rem; overflow:hidden; box-sizing:border-box;}
#msect4 .prod_swiper .swiper-slide a .thumb img {width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; transition:all .3s;}
#msect4 .prod_swiper .swiper-slide a:hover .thumb {border-color:var(--main-color1); }
#msect4 .prod_swiper .swiper-slide a:hover .thumb img {transform:scale(1.15);}
#msect4 .prod_swiper .swiper-slide a p {font-size: 1.2em; color:#222; font-weight: 500; line-height:1.5; margin:2rem 0 0 0; text-align: center;}
#msect4 .prod_swiper .swiper-slide a:hover p {color:var(--main-color1);}

#msect4 .ctrl_btn {position:absolute; right:0; top:-7rem; display:flex;} 
#msect4 .ctrl_btn .swiper-button-prev,
#msect4 .ctrl_btn .swiper-button-next {position:relative; width: 6rem; height:6rem; border:2px solid var(--main-color2); border-radius:6rem; margin-left:1rem;}
#msect4 .ctrl_btn .swiper-button-prev {left:0;}
#msect4 .ctrl_btn .swiper-button-next {right:0;}
#msect4 .ctrl_btn .swiper-button-prev:after,
#msect4 .ctrl_btn .swiper-button-next:after{font-size: 0; width:2rem; height:1.4rem; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
#msect4 .ctrl_btn .swiper-button-prev:after {background-image: url(../images/main/arr_prev.svg);}
#msect4 .ctrl_btn .swiper-button-next:after {background-image: url(../images/main/arr_next.svg);}
#msect4 .ctrl_btn .swiper-button-prev:hover,
#msect4 .ctrl_btn .swiper-button-next:hover{background-color:var(--main-color2);}
#msect4 .ctrl_btn .swiper-button-prev:hover:after,
#msect4 .ctrl_btn .swiper-button-next:hover:after {filter:invert(1) brightness(4);}


@media screen and (max-width:1540px) {
	#msect4 .tab_wp ul li a{font-size: 1.2em; padding:0 0 .5rem 0;}
 
	
	#msect4 .ctrl_btn .swiper-button-prev,
	#msect4 .ctrl_btn .swiper-button-next { width: 4rem; height:4rem }
	#msect4 .ctrl_btn .swiper-button-prev:after, 
	#msect4 .ctrl_btn .swiper-button-next:after {width:1.6rem; height:1rem;}
}
@media screen and (max-width:1200px) {
	#msect4 .tab_wp {margin:4rem 0 0 0;}
	#msect4 .prod_swiper {margin:2rem 0 0 0; }
	#msect4 .prod_swiper .swiper-slide a p {margin:1rem 0 0 0;}

	
	#msect4 .ctrl_btn {top:-3rem;}
	#msect4 .ctrl_btn .swiper-button-prev,
	#msect4 .ctrl_btn .swiper-button-next { width: 3rem; height:3rem }

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


/*------------------------------------
	Msect5
------------------------------------*/
#msect5 {background:#F5F5F5 url(../images/main/bg_simbol.svg)no-repeat 95% 100%;}
#msect5 .inner {display:flex;}
#msect5 .inner .left_area {width:32%;}

#msect5 .inner .right_area {width: 68%;}
#msect5 .inner .right_area ul {display:flex; flex-wrap:wrap; margin-left:-2%;}
#msect5 .inner .right_area ul li {width:31%;  margin-left:2%; margin-bottom:2rem;}
#msect5 .inner .right_area ul li a {position:relative; display:block; padding:4rem; background:var(--white); border-radius:1rem; box-shadow:0 .5rem .5rem rgba(0,0,0,0.15); border:2px solid var(--white);}
#msect5 .inner .right_area ul li a:before {position:absolute; right:3rem; top:3.5rem; content:'"'; font-size: 4em; font-family: 'KBIZHanmaumGothic'; color:#D8DCE5;}
#msect5 .inner .right_area ul li a .cate {font-size: 1.6rem; font-weight: 700; display:block; margin-bottom:6.5rem;}
#msect5 .inner .right_area ul li a .tit {font-size: 1.3em; min-height:2.8em; word-break:keep-all; line-height:1.4; font-weight: 600; letter-spacing:-0.025em;
  overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#msect5 .inner .right_area ul li a:hover {border-color:var(--main-color1); box-sizing:border-box;}
#msect5 .inner .right_area ul li a:hover .tit {color:var(--main-color1);}

#msect5 .inner .right_area ul li a:hover:before {color:var(--main-color1);}


@media screen and (max-width:1540px) {   
	#msect5 .inner .right_area ul li a {padding:3rem;}
	#msect5 .inner .right_area ul li a:before {top:2rem; right:2rem;}
	#msect5 .inner .right_area ul li a .cate {font-size: 1.4rem;  margin-bottom:5.5rem;}
	#msect5 .inner .right_area ul li a .tit {font-size: 1.2em;  }  
}
@media screen and (max-width:1200px) {
	#msect5 .inner  {flex-direction: column}
	#msect5 .inner .left_area {margin:0 0 4rem 0;}
	#msect5 .inner .left_area,
	#msect5 .inner .right_area {width:100%;}
	#msect5 .inner .left_area .tit br,
	#msect5 .inner .left_area .desc br{display:none;}
	
	#msect5 .inner .right_area ul li a {padding:2rem;} 
	#msect5 .inner .right_area ul li a .cate {font-size: 1.4rem;  margin-bottom:5.5rem;}
	#msect5 .inner .right_area ul li a .tit {font-size: 1.2em;  }  
}
@media screen and (max-width:768px) {
	
	#msect5 .inner .right_area ul {margin-left:0;}
	#msect5 .inner .right_area ul li {display:none; margin-bottom:1rem; padding:0 0 0;}
	#msect5 .inner .right_area ul li:nth-child(1),
	#msect5 .inner .right_area ul li:nth-child(2), 
	#msect5 .inner .right_area ul li:nth-child(3){display:block; width:100%; margin-left:0;}
	
	#msect5 .inner .right_area ul li a:before {top:1rem; right:1rem;}
	#msect5 .inner .right_area ul li a .cate {font-size: 1.3rem; margin:0 0 1rem;}
	#msect5 .inner .right_area ul li a .tit {min-height:auto; white-space: nowrap; font-size: 1.1em;
  overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; display:block;}
	 
}