@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); */


/*
HCS_works
==============================*/

/* mvp ----------*/
#mvp { background-image: url(../img/HCS_works/kv.jpg); }


/* works_list ----------*/
.works_list { margin-top: 6rem; }
.works_list > div > li { padding: 2.5rem 2rem; background-color: #FFF; box-shadow: 3px 4px 10px 0 rgba(154, 215, 250, 0.20); }
.-bg_blue .works_list > div > li { background-color: #F0F4F6; box-shadow: 2px 2px 8px 0 rgba(6, 102, 158, 0.38); }
.works_list > div > li h4 { display: grid; place-items: center; }
.works_list > div > li h4 span { color: #73B6DA; font-size: 2.2rem; font-weight: 500; text-align: center; }
.works_list > div > li .p { display: block; margin-top: 2rem; text-align: center; }
.works_list > div > li p { margin-top: 2rem; line-height: 1.86; color: #506A79; }
@media screen and (max-width:896px) { /* m */
	.list_wrap { max-width: 50rem; margin-left: auto !important; margin-right: auto !important; }
	.works_list { margin-top: 4rem; }
}

/* experience ----------*/
#experience {}
#experience .works_list h3 { display: flex; color: #506A79; font-size: 2.8rem; font-weight: bold; line-height: 1.2; gap: 0.7rem; align-items: baseline; justify-content: center; }
#experience .works_list h3.c { align-items: center; }
#experience .works_list h3 strong { color: #73B6DA; font-size: 6rem; font-family: "Figtree", sans-serif; font-weight: 600; line-height: 1; white-space: nowrap; }


/* mainBusinessArea ----------*/
#mainBusinessArea {}
#mainBusinessArea .works_list > div > li h4 { margin-top: 2rem; }
#mainBusinessArea .works_list > div > li .p { margin-top: 0; }
#mainBusinessArea .works_list > div > li .sub { margin-top: 1.5rem; }
#mainBusinessArea .works_list > div > li .sub li { font-weight: 500; color: #4E88A7; }
#mainBusinessArea .works_list > div > li .sub li { font-size: 1.7rem; display: flex; gap: 0.7rem; line-height: 1.4; margin-top: 0.5em; }
#mainBusinessArea .works_list > div > li .sub li::before { content: url(../img/HCS_works/check_01.svg); margin-top: 0.2rem; }


/* technologyArea ----------*/
#technologyArea {}
#technologyArea .works_list > div > li h4 { margin-top: 2rem; }
#technologyArea .works_list > div > li .p { margin-top: 0; }


/* jobContent ----------*/
#jobContent {}
#jobContent .job_content_list { margin-top: 6rem; }
#jobContent .job_content_list li { background-color: #FFF; }
#jobContent .job_content_list li h3 { padding: 1rem; color: #FFF; color: #FFF; background-color: #5894BE; font-size: 2.2rem; font-weight: 500; text-align: center; }
#jobContent .job_content_list li .tw { padding: 2.5rem 4rem; }
#jobContent .job_content_list li .tw .box { position: relative; padding: 2rem; background-color: #F0F4F6; }
#jobContent .job_content_list li .tw .box .fix { position: absolute; top: 10%; right: -4rem; width: 28%; }
#jobContent .job_content_list li .tw .box h4 { padding-right: 22%; color: #73B6DA; font-size: 2.2rem; font-weight: 500; }
#jobContent .job_content_list li .tw .box li { background-color: transparent; }
#jobContent .job_content_list li .tw .box .list { padding-right: 22%; }
#jobContent .job_content_list li .tw .box .cats { display: flex; flex-flow: wrap; margin-top: 2rem; gap: 0.5rem; }
#jobContent .job_content_list li .tw .box .cats li { padding: 0.4em 0.8em; border-radius: 5rem; color: #FFF; background-color: #4E88A7; font-size: 1.3rem; line-height: 1; }
#jobContent .feature { max-width: 96.4rem; margin: auto; }
#jobContent .feature .h3 { color: #73B6DA; }
#jobContent .feature .box { margin-top: 4rem; padding: 3rem 4rem; background-color: #FFF; box-shadow: 2px 2px 8px 0 rgba(6, 102, 158, 0.38); }
#jobContent .feature .box ul {}
#jobContent .feature .box ul li {}
#jobContent .feature .box ul li h4 { color: #73B6DA; font-size: 2rem; font-weight: 500; text-align: center; }
#jobContent .feature .box ul li .p { display: block; margin-top: 2rem; margin-bottom: 2rem; text-align: center; }
#jobContent .feature .box ul li p {}
@media screen and (max-width:480px) { /* s */
	#jobContent .job_content_list { margin-top: 4rem; }
}