html{max-width: 1920px; margin: 0 auto;}
.w1280{max-width: 134rem; width: 100%; margin: 0 auto; padding: 0 3rem;}
.w1460{max-width: 152rem; width: 100%; margin: 0 auto; padding: 0 3rem;}

.mmVar{display: block;}

:root{
    --color1 : #0082a1
}

.c_title{font-size: 1.8rem; line-height: 1; font-weight: 900; color: var(--color1); letter-spacing: 0.5rem !important; margin-bottom: 4rem;}
.main_title{font-size: 6rem; font-weight: 900; color: #222222; line-height: 1; margin-bottom: 3rem;}
.main_title_sub{font-size: 1.8rem; font-weight: 550; color: #666666; line-height: 1.25; text-shadow: 1px 1px 1px rgba(255,255,255,0.9);}

#product{padding: 14rem 0; text-align: center;}
.main_product_nav{display: flex; gap: 1rem; justify-content: center; margin: 4rem auto 6rem;}
.main_product_nav li{padding: 2rem 2.5rem; border-radius: 5px; background: #666666; color: #cccccc; text-align: center; font-size: 1.8rem; line-height: 1; font-weight: 550; cursor: pointer;}
.main_product_nav li.active{background: var(--color1); font-weight: bold; color: #fff;}

#product .swiper{overflow: initial;}
#product .swiper-slide{display: flex; align-items: flex-start;}
/* #product .swiper-slide *{transition: all ease 0.3s;} */
#product .swiper-slide .imgArea{width: 100%; display: flex; align-items: center; justify-content: center; }

#product .swiper-slide .textArea{padding:0 2rem 0 3rem; text-align: left;/*  display: none;  */transition: all ease 0.3s; opacity: 0;}
#product .swiper-slide .textArea > h4{font-size: 3.5rem; line-height: 1; color: #222222; font-weight: bold; margin-bottom: 2rem; }
#product .swiper-slide .textArea > p{font-size: 1.8rem; color: #666666; font-weight: 500; line-height: 2.6rem; margin-bottom: 3rem;}
#product .swiper-slide .textArea ul{margin-bottom: 5rem;}
#product .swiper-slide .textArea ul li{position: relative; padding-left: 1rem; gap: 3rem; display: flex;}
#product .swiper-slide .textArea ul li::before{width: 3px; height: 3px; background: var(--color1); position: absolute; top: 0.9rem; left: 0; margin-top: -1.5px; content: '';}
#product .swiper-slide .textArea ul li + li{margin-top: 2rem;}
#product .swiper-slide .textArea ul li p{position: relative; font-size: 1.8rem; font-weight: 550; color: #222222; line-height: 1; padding-left: 1rem;}
#product .swiper-slide .textArea ul li p.title{width: 7rem;}
#product .swiper-slide .textArea ul li p.contents{width: calc(100% - 7rem);}
#product .swiper-slide .textArea a{display: flex; align-items: center; justify-content: center; width: 20rem; height: 6rem; border-radius: 5px; border: 1px solid #666666; font-size: 1.8rem; line-height: 1; color: #666666; text-align: center;}

#product .swiper-slide.swiper-slide-active > div{width: 50%;}
/* #product .swiper-slide.swiper-slide-prev{flex-direction: row-reverse; } */
/* #product .swiper-slide.swiper-slide-active .imgArea{} */
/* #product .swiper-slide.swiper-slide-prev .imgArea{justify-content: flex-end;} */
/* #product .swiper-slide.swiper-slide-next .imgArea{justify-content: flex-start;} */
#product .swiper-slide.swiper-slide-active .textArea{padding-left: 5rem; text-align: left; display: block; opacity: 1;}

#product .swiper-button-next, #product .swiper-button-prev{width: 8rem; height: 8rem; margin-top: -4rem;}
#product .swiper-button-next{background: url('/images/main/product_slide_next.png'); background-size: cover; right: 0;}
#product .swiper-button-prev{background: url('/images/main/product_slide_prev.png'); background-size: cover; left: 0;}
#product .swiper-button-next:after, #product .swiper-button-prev::after{display: none;}

#project{padding: 15rem 0; background-image: url('/images/main/main_project_bg.jpg'); background-repeat: no-repeat; background-position: center bottom;}
#project .swiper{margin-top: 5.5rem; overflow: initial; padding-bottom: 9rem;}
#project .swiper-slide{width: 34rem; margin-right: 2rem; border: 1px solid #dddddd;}
#project .swiper-slide .imgArea{width: 100%; height: 21.5rem; display: flex; align-items: center; justify-content: center; background: #fff;}
#project .swiper-slide .imgArea img{max-width: none; max-height: none; object-fit: cover; width: 100%; height: 100%;}
#project .swiper-slide .textArea{padding: 4rem 3rem; background: #fff;}
#project .swiper-slide .textArea h4{font-size: 1.8rem; line-height: 1; color: #222222; font-weight: bold; margin-bottom: 1rem;}
#project .swiper-slide .textArea p{font-size: 1.8rem; line-height: 1; color: #666666;}

#project .swiper-horizontal>.swiper-scrollbar, 
#project .swiper-scrollbar.swiper-scrollbar-horizontal{left: 0; bottom: 0; width: 100%; height: 10px; background: #fff;}
#project .swiper-scrollbar-drag{background: var(--color1);}

#customers{padding: 15rem 0;}
#customers .w1280 > h4{font-size: 5rem; line-height: 1.25; color: #222222; font-weight: 550; text-align: center;}
#customers .w1280 > h4 span{font-weight: 900; color: var(--color1);}

#customers ul{display: flex; gap: 11.5%; justify-content: center; margin-top: 6rem;}
#customers ul li .imgArea{width: 13rem; height: 13rem; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 50%; transition: all ease 0.3s; box-shadow: 5px 9px 15px 0px rgba(0, 0, 0, 0.1); margin: 0 auto 2rem;}
#customers ul li:hover .imgArea{background: var(--color1);}
#customers ul li .textArea{text-align: center;}
#customers ul li .textArea h4{font-size: 2.5rem; line-height: 1; color: #222222; margin-bottom: 2rem; font-weight: bold;}
#customers ul li .textArea p{font-size: 1.8rem; line-height: 1; color: #666666; margin-bottom: 1.2rem; height: 3.6rem;}
#customers ul li .textArea a{width: 17rem; height: 5rem; display: flex; align-items: center; justify-content: center; border: 1px solid #707070; border-radius: 5px; font-size: 1.8rem; line-height: 1; font-weight: 500; color: #666666; margin: 0 auto;}

#about{padding: 15rem 0; background: url('/images/main/main_etc_bg.jpg') no-repeat right; background-size: cover;}
#about h4{font-size: 5rem; line-height: 1.25; color: #ffffff;  margin-bottom: 5rem; font-weight: lighter;}
#about h4 b{font-weight: 600;}
#about .links{display: flex; gap: 1rem;}
#about .links a{display: flex; align-items: center; justify-content: center; color: #fff; border: 1px solid #fff; text-align: center; border-radius: 5px; font-size: 1.8rem; line-height: 1; font-weight: 500; width: 20rem; height: 6rem;/*  transition: all 0.3s; */}
#about .links a:hover{text-shadow: 0 0 1px currentColor; background: #fff; color: var(--color1);}




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

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

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

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

}
@media only screen and (max-width : 1280px){
    #product .swiper-slide{margin-right: 6rem;}

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

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

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

}
@media only screen and (max-width : 640px){
    .main_product_nav{display: none;}
    #product .swiper{margin-top: 4rem;}
    #product .swiper-slide{flex-direction: column; align-items: flex-start; overflow: hidden;}
    #product .swiper-slide.swiper-slide-prev{flex-direction: column;}
    #product .swiper-slide.swiper-slide-active > div{width: 100%}
    #product .swiper-slide .textArea{padding: 0; display: block; opacity: 1;}
    #product .swiper-slide.swiper-slide-active .textArea{padding: 0;}
    #product .swiper-button-next, #product .swiper-button-prev{top: 25%;}

    #customers ul{display: flex; gap: 5%; justify-content: center; margin-top: 6rem;}
    #customers ul li{width: calc((100% - 10%)/3);}
    #customers ul li img{width: 6.5rem;}
    #customers ul li .textArea a{width: 13rem;}

    


}
@media only screen and (max-width : 480px){
    .mmVar{display: none !important;}
    #product .swiper-button-next, #product .swiper-button-prev{width: 6rem; height: 6rem; margin-top: -3rem;}

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

}