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


/*
new_employee_training
==============================*/

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


/* support_list ----------*/
.support_list { margin-top: 6rem; }
.support_list li { padding: 2.5rem 2rem; background-color: #F0F4F6; box-shadow: 3px 4px 10px 0 rgba(154, 215, 250, 0.20); }
.support_list li h4 { display: grid; place-items: center; }
.support_list li h4 span { color: #73B6DA; font-size: 2.2rem; font-weight: 500; text-align: center; }
.support_list li .p { display: block; margin-top: 2rem; text-align: center; }
.support_list 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; }
}


/* supportSystem ----------*/
#supportSystem {}


/* flow ----------*/
#flow {}
#flow .p1 { margin-top: 7rem; text-align: center; }
#flow .p1 img { max-width: 77rem; width: 100%; }
#flow .flow_list { display: flex; flex-direction: column; margin-top: 7rem; gap: 4rem; }
#flow .flow_list > li { display: grid; grid-template-columns: 1fr 1fr; }
#flow .flow_list > li .event { display: flex; flex-direction: column; padding: 2rem 3rem; background-color: #FFF; gap: 2rem; }
#flow .flow_list > li .event h3 { display: flex; flex-flow: wrap; gap: 1rem; align-items: center; }
#flow .flow_list > li .event h3 .c { padding: 0.25em 0.5em; color: #FFF; background-color: #73B6DA; font-size: 2.2rem; font-weight: 500; line-height: 1; white-space: nowrap; }
#flow .flow_list > li .event h3 .h { color: #73B6DA; font-size: 2.2rem; font-weight: 500; }
#flow .flow_list > li .event p { margin: 0; line-height: 1.86; }
#flow .flow_list > li .event .cats { display: flex; flex-flow: wrap; gap: 0.5rem; }
#flow .flow_list > li .event .cats li { padding: 0.4em 0.8em; border-radius: 5rem; color: #FFF; background-color: #08599F; line-height: 1; }
#flow .flow_list > li .skill { padding: 2rem 3rem; background-color: #73B6DA; }
#flow .flow_list > li .skill h4 { color: #FFFF8B; font-size: 1.8rem; font-weight: 500; }
#flow .flow_list > li .skill h5 { color: #FFFFFF; font-size: 1.5rem; font-weight: bold; }
#flow .flow_list > li .skill .w { display: flex; flex-flow: wrap; margin-top: 2rem; column-gap: 2rem; row-gap: 1rem; }
#flow .flow_list > li .skill .w.-nowrap { flex-flow: column; }
#flow .flow_list > li .skill .w ul { margin-left: 2rem; margin-top: 1rem; }
#flow .flow_list > li .skill .w ul li { margin-top: 0.5rem; color: #FFF; font-weight: 400; line-height: 1.4; list-style: disc; list-style-position: outside; opacity: 0.9; }
#flow .flow_list > li .skill .w p { color: #FFF; font-weight: 400; line-height: 1.4; opacity: 0.9; }
#flow .flow_list > li .skill .hw { margin-top: 2rem; background-color: #F0F4F6; padding: 0.7rem 3rem; border-radius: 1rem; }
#flow .flow_list > li .skill .hw h5 { color: #08599F; font-weight: 500; }
#flow .flow_list > li .skill .hw p { margin: 0; line-height: 1.6; }
@media screen and (max-width:480px) { /* s */
	#flow .flow_list > li { grid-template-columns: 1fr; }
}


/* voice ----------*/
#voice {}
#voice .voice_list { display: grid; grid-template-columns: 1fr 1fr; gap: 5.6rem; margin-top: 6rem; }
#voice .voice_list li { padding: 2rem; background-color: #FFF; border-radius: 1rem; border: 2px dashed #73B6DA; }
#voice .voice_list li h3 { display: flex; flex-flow: wrap; align-items: center; column-gap: 3rem; row-gap: 1rem; font-size: 2rem; color: #73B6DA; font-weight: 500; }
#voice .voice_list li h3 img {}
#voice .voice_list li p { color: #506A79; line-height: 1.86; margin: 0; margin-top: 2rem; }
@media screen and (max-width:480px) { /* s */
	#voice .voice_list { grid-template-columns: 1fr; gap: 2rem; margin-top: 4rem; }
}


/* growth ----------*/
#growth { position: relative; background-color: #155273; overflow: hidden; }
#growth::before,
#growth::after { content: ""; position: absolute; z-index: 1; }
#growth::before { top: 0; left: 0; width: calc(50% - 7rem); height: 100%; background-color: #F0F4F6; }
#growth::after { top: 0; left: calc(50% - 7.5rem); width: 15rem; height: 100%; background-image: url(../img/new_employee_training/bg_arrow.svg); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
#growth .inner { position: relative; z-index: 2; }
#growth .inner::before,
#growth .inner::after { content: ""; position: absolute; width: 23.4rem; aspect-ratio: 234 / 230; background-repeat: no-repeat; background-position: center; background-size: cover; }
#growth .inner::before { background-image: url(../img/new_employee_training/growth_img_01.svg); right: 100%; bottom: 0; }
#growth .inner::after { background-image: url(../img/new_employee_training/growth_img_02.svg); left: 100%; top: 0; }
#growth .growth_wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18rem; margin-top: 4rem; }
#growth .growth_wrap h3 { font-size: 2.2rem; font-weight: 500; }
#growth .growth_wrap ul { margin-top: 1.5rem; }
#growth .growth_wrap ul li { font-size: 1.7rem; display: flex; gap: 0.7rem; line-height: 1.4; margin-top: 0.5em; }
#growth .growth_wrap ul li::before { content: url(../img/new_employee_training/check_01.svg); margin-top: 0.2rem; }
#growth .growth_wrap .growth_after {}
#growth .growth_wrap .growth_after h3 { color: #FFF; }
#growth .growth_wrap .growth_after ul {}
#growth .growth_wrap .growth_after ul li { color: #FFF; }
#growth .growth_wrap .growth_after ul li::before { content: url(../img/new_employee_training/check_02.svg); }
#growth .start_box { text-align: center; margin-top: 5rem; background-color: rgba(115, 182, 218, 0.9); padding: 1rem; color: #FFF; vertical-align: baseline; line-height: 1.6; }
#growth .start_box strong { color: #FFFF8B; vertical-align: baseline; }
#growth .start_box .t1 { font-size: 2.2rem; }
#growth .start_box .t1 strong { font-size: 3rem; }
#growth .start_box .t2 { font-size: 3.3rem; }
#growth .start_box .t2 strong {}
@media screen and (max-width:1360px) {
	#growth {  padding: 0 10vw; }
	#growth .inner::before,
	#growth .inner::after { width: 17vw; }
	#growth .inner::before { right: 92%; }
	#growth .inner::after { left: 95%; }
}
@media screen and (max-width:896px) { /* m */
	#growth {  padding: 0; }
	#growth .growth_wrap { grid-template-columns: 1fr; gap: 10rem; max-width: 50rem; margin: auto; margin-top: 4rem; }
	#growth::before { top: 0; left: 0; width: 100%; height: calc(45% - 2.8rem); }
	#growth::after { left: 100%; top: calc(45% - 3rem); transform: rotate(90deg); transform-origin: left top; height: 100vw; width: 6rem; }
	#growth .inner::before,
	#growth .inner::after { width: 20vw; }
	#growth .inner::before { right: auto; left: calc(100% - 22vw); bottom: auto; top: 50%; }
	#growth .inner::after { left: calc(100% - 22vw); top: 15%; }
}


/* faq ----------*/
#faq { overflow: hidden; margin-bottom: -7.1rem; padding-bottom: 10rem !important; }
#faq .inner { position: relative; }
#faq .inner::before { content: ""; position: absolute; top: -5rem; right: 83%; width: 23.1rem; aspect-ratio: 231 / 264; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/new_employee_training/faq_img_01.svg); }
#faq .faq_list { max-width: 80rem; margin: auto; margin-top: 6rem; display: flex; flex-direction: column; gap: 2.7rem; }
#faq .faq_list li { background-color: #FFF; padding: 2rem; border-right: solid 0.2rem #7797AD; border-bottom: solid 0.2rem #7797AD; }
#faq .faq_list li span { display: block; }
#faq .faq_list li .qw .q,
#faq .faq_list li .aw .a { display: flex; gap: 1rem; position: relative; }
#faq .faq_list li .qw .q::before,
#faq .faq_list li .aw .a::before { position: relative; z-index: 2; font-size: 3.2rem; font-family: "Figtree", sans-serif; font-weight: 500; padding: 0 1.5rem; margin-top: -0.8rem; color: #FFF; }
#faq .faq_list li .qw .q::before { content: "Q"; margin-left: -0.2rem; }
#faq .faq_list li .aw .a::before { content: "A"; }
#faq .faq_list li .qw .q::after,
#faq .faq_list li .aw .a::after { content: ""; width: 3.4rem; aspect-ratio: 1; position: absolute; z-index: 1; left: 0.9rem; border-radius: 0.5rem; transform: rotate(45deg); }
#faq .faq_list li .qw .q::after { background-color: #73B6DA; top: -0.2rem; }
#faq .faq_list li .aw .a::after { background-color: #EB71B2; top: 0.6rem; }
#faq .faq_list li .qw {}
#faq .faq_list li .qw .q { color: #08599F; font-size: 2.2rem; font-weight: 500; line-height: 1.4; }
#faq .faq_list li .aw { margin-top: 2rem;}
#faq .faq_list li .aw .a { color: #506A79; line-height: 1.86; }
@media screen and (max-width:1160px) {
	#faq .inner::before { top: -4vw; right: calc(100% - 20vw); width: 20vw; }
}
@media screen and (max-width:480px) { /* s */
	#faq .faq_list {  margin-top: 4rem; gap: 2rem; }
}