@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/fontawesome/css/all.min.css);
@import url(../libs/aos/aos.css);
/* @import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css); */
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
 service
==============================*/

body { overflow-y: scroll; }

/* mvp ----------*/
#mvp.bg::before { background-image: url(../img/service/mv_bg.jpg); }


/* service ----------*/
#service { padding-bottom: 6rem; }
#service .inner { max-width: 122.4rem; padding: 0 3rem; }
#service .lead { max-width: 100rem; margin: auto; }
#service .tab_wrap { margin-top: 8rem; filter: drop-shadow(6px 4px 30px rgba(0,0,0,0.1)); }
#service .tab_wrap.notab  { filter: none; }
#service .tab_nav { display: flex; }
#service .notab .tab_nav { display: flex; flex-flow: wrap; gap: 1rem; margin-bottom: 2rem; }
#service .tab_nav li { width: 25%; }
#service .notab .tab_nav li { width: auto; }
#service .tab_nav li a { display: block; font-size: 1.6rem; font-weight: bold; line-height: 1.4; height: 100%; color: #FFF; display: block; text-decoration: none; padding: 2rem; text-align: center; border-radius: 2rem 2rem 0 0; }
#service .notab .tab_nav li a { border-radius: 0; padding: 1rem 2rem; }
#service .tab_nav li a:hover { opacity: 1; }
#service .tab_nav li a.active span { background-clip: text; }
#service .tab_contents { padding: 9rem 4.5rem; border-radius: 0 0 4rem 4rem; background-color: #FFF; }
#service .notab .tab_contents { border-radius: 4rem; filter: drop-shadow(6px 4px 30px rgba(0,0,0,0.1)); }
#service .tab_contents h2 { font-size: 2.8rem; }
#service .tab_contents h4 { margin-top: 10rem; margin-bottom: 3rem; display: flex; white-space: nowrap; gap: 2.6rem; align-items: center; font-size: 2.2rem; }
#service .tab_contents h4::after { content: ""; display: block; width: 100%; border-top: solid 1px #9AA7B6; }
#service .tab_contents .service_list { margin-top: 4rem; display: flex; flex-direction: column; gap: 3rem; }
#service .tab_contents .service_list li { display: flex; align-items: center; gap: 3.6rem; padding: 3rem 4rem; border-radius: 2rem; }
#service .tab_contents .service_list li .i { width: 8.6rem; flex-shrink: 0; }
#service .tab_contents .service_list li .i img { width: 8.6rem; }
#service .tab_contents .service_list li h3 { font-size: 2rem; }
#service .tab_contents .service_list li p {}
#service .tab_contents .cause_list { display: flex; flex-direction: column; gap: 4rem; }
#service .tab_contents .cause_list li { display: flex; gap: 4rem; }
#service .tab_contents .cause_list li span {}
#service .tab_contents .cause_list li .p { width: 42%; flex-shrink: 0; }
#service .tab_contents .cause_list li .p img { border-radius: 2rem; }
#service .tab_contents .cause_list li .t {}
#service .tab_contents .cause_list li .t h5 { font-size: 2rem; margin-bottom: 2rem; }
#service .tab_contents .cause_list li .t p {}
@media screen and (max-width:480px) { /* s */
	#service .lead { font-size: 2.4rem; line-height: 1.6; }
	#service .tab_wrap { margin-top: 4rem; }
	#service .tab_nav li a { font-size: 1.4rem; padding: 2rem 0.5rem; }
	#service .tab_contents { padding: 4rem 2rem; }
	#service .tab_contents h2 { font-size: 2.2rem; }
	#service .tab_contents .service_list li { flex-direction: column; gap: 1rem; padding: 1.5rem 2rem; }
	#service .tab_contents .service_list li h3 { text-align: center; }
	#service .tab_contents h4 { margin-top: 4rem; }
	#service .tab_contents .cause_list li { flex-direction: column; gap: 2rem; }
	#service .tab_contents .cause_list li .p { width: 100%; }

}