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


/*
 index
==============================*/

/* mv ----------*/
#mv { padding-top: 14rem; background-color: #FBFAF0; }
#mv .sec_inner { padding: 5rem 4rem; }
#mv .w { position: relative; z-index: 2; max-width: 102rem; margin: auto; }
#mv .w h2 { margin-top: -6%; position: relative; z-index: 3; }
#mv .owl-dots { display: none !important; }
#mv .ov_01, #mv .ov_02 { top: -2rem; width: 32%; }
#mv .ov_01 { right: calc(100% - 19rem); }
#mv .ov_02 { left: calc(100% - 19rem); }
#mv .ov_03, #mv .ov_04 { z-index: 3; top: 0; width: 24%; }
#mv .ov_03 { right: calc(100% - 24%); }
#mv .ov_04 { left: calc(100% - 24%); }
@media screen and (max-width:896px) { /* m */
	#mv { padding-top: 10rem; }
	#mv .sec_inner { padding: 2rem 4rem; }
}
@media screen and (max-width:480px) { /* s */
	#mv .w h2 img { transform: scale(1.4,1.4); }
	#mv .ov_01 { right: calc(100% - 20%); }
	#mv .ov_02 { left: calc(100% - 20%); }
}


/* about ----------*/
#about {}
#about .sec_inner { max-width: 113rem; padding: 6rem 4rem; }
#about .about_box { position: relative; padding: 5rem 10rem; }
#about .about_box::after { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
#about .about_box.ab1::after { background-image: url(../img/index/about_txt_bg_01.svg); }
#about .about_box.ab2::after { background-image: url(../img/index/about_txt_bg_02.svg); }
#about .about_box.ab3::after { background-image: url(../img/index/about_txt_bg_03.svg); }
#about .about_box .w { position: relative; z-index: 2; display: flex; gap: 2rem; }
#about .about_box.ab2 .w { flex-direction: row-reverse; }
#about .about_box .w .pw { width: 53%; }
#about .about_box .w .tw { width: 47%; }
#about .about_box .w .tw h3 { display: block; }
#about .about_box .w .tw h3 span { position: relative; display: inline-block; margin-bottom: 0.5em; color: #4D70AE; font-size: 2.8rem; font-weight: bold; }
#about .about_box .w .tw h3 span::before { content: ""; position: absolute; z-index: -1; bottom: -0.4em; left: -1.5rem; width: calc(100% + 6rem); height: 2.3rem; background-image: url(../img/common/h3_bg_01.svg); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
#about .about_box .w .tw .btw { margin-top: 4rem; }
#about .about_box.ab1 .ov_bg { z-index: 2; bottom: 83%; width: 27.4%; }
#about .about_box.ab1 .ov_s01 { left: 0; }
#about .about_box.ab1 .ov_s02 { right: 0; }
#about .about_box.ab2 .ov_s01 { z-index: 2; top: 0; left: -8rem; width: 15.7%; }
#about .about_box.ab3 .ov_s01 { z-index: 2; bottom: 20%; left: 0; width: 15%; }
#about .about_box.ab3 .ov_s02 { z-index: 2; top: 0; right: 0; width: 8.7%; }
#about .ov_01, #about .ov_02 { width: 26%; }
#about .ov_01 { bottom: 3%; right: calc(100% - 10%); }
#about .ov_02 { top: 15%; left: calc(100% - 10%); }
#about .ov_03, #about .ov_04, #about .ov_05, #about .ov_06 { width: 23.8%; }
#about .ov_03 { top: -5%; right: calc(100% - 15%); }
#about .ov_04 { top: 15%; left: calc(100% - 15%); }
#about .ov_05 { bottom: 5%; right: calc(85%); }
#about .ov_06 { bottom: 5%; left: calc(85%); }
@media screen and (max-width:896px) { /* m */
	#about .about_box .w { flex-direction: column !important; }
	#about .about_box .w .pw { width: 100%; }
	#about .about_box .w .tw { width: 100%; }
	#about .about_box .w .tw .btw { margin-top: 2rem; }
}
@media screen and (max-width:480px) { /* s */
	#about .sec_inner { padding: 3rem 4rem; }
	#about .about_box { padding: 3rem 4rem; }
	#about .about_box .w .tw .btw { text-align: center; }
	#about .about_box.ab3 .ov_s01 { left: -2rem; width: 15%; }
	#about .ov_01, #about .ov_02 { width: 36.4%; }
	#about .ov_01 { right: calc(100% - 20%); }
	#about .ov_02 { left: calc(100% - 20%); }
}


/* works ----------*/
#works { background-color: #FFFDF2; }
#works .sec_inner { max-width: 133.2rem; padding: 6rem 4rem; }
#works .works_list { position: relative; z-index: 2; display: flex; gap: 2.8rem; }
#works .ov_01, #works .ov_02 { z-index: 2; width: 33.6%; }
#works .ov_01 { top: 0; right: calc(100% - 12%); }
#works .ov_02 { bottom: 0; left: calc(100% - 12%); }
#works .ov_03 { top: 0; right: 0; width: 8.4%; }
@media screen and (max-width:1024px) { /* l */
	#works .works_list { flex-flow: wrap; gap: 2.8rem; justify-content: center; }
	#works .works_list li { width: calc((100% - (2.8rem * 2)) / 3); }
}
@media screen and (max-width:480px) { /* s */
	#works .sec_inner { padding: 3rem 4rem; }
	#works .works_list { gap: 2rem; }
	#works .works_list li { width: calc((100% - (2rem * 1)) / 2); }
	#works .ov_01, #works .ov_02 { width: 47.04%; }
	#works .ov_01 { top: 0; right: calc(100% - 20%); }
	#works .ov_02 { bottom: 0; left: calc(100% - 35%); }
}


/* environment ----------*/
#environment {}
#environment .sec_inner { max-width: 100rem; padding: 6rem 4rem; }
#environment .w { position: relative; z-index: 5; }
#environment .pw { text-align: center;  }
#environment .btw { margin-top: 5rem; text-align: center; }
#environment .ov_01, #environment .ov_02 { z-index: 2; width: 32%; }
#environment .ov_01 { bottom: 20%; right: calc(100% - 15%); }
#environment .ov_02 { top: 4%; left: calc(100% - 15%); }
#environment .ov_03 { top: 15rem; left: 25%; width: 5%; }
#environment .ov_04 { z-index: 2; bottom: 10%; left: 0; width: 6.8%; }
#environment .ov_05 { bottom: 15%; right: 0; width: 12.7%; }
@media screen and (max-width:896px) { /* m */
	#environment .ov_03 { top: 10rem; left: 15%; width: 10%; }
}
@media screen and (max-width:480px) { /* s */
	#environment .sec_inner { padding: 3rem 4rem; }
	#environment .ov_03 { left: 5%; }
	#environment .btw { margin-top: 3rem; }
	#environment .ov_01, #environment .ov_02 { width: 44.8%; }
	#environment .ov_01 { bottom: 10%; right: calc(100% - 25%); }
	#environment .ov_02 { left: calc(100% - 25%); }
}



/* interview ----------*/
#interview { background-color: #FFF9DB; }
#interview .sec_inner { max-width: 127rem; padding: 6rem 4rem; }
#interview .interview_list { position: relative; z-index: 3; }
#interview .owl-carousel .owl-stage-outer { overflow: visible; }
#interview .btw { margin-top: 5rem; text-align: center; }
#interview .ov_01, #interview .ov_02 { z-index: 2; width: 33%; }
#interview .ov_01 { top: 4%; right: calc(100% - 15%); }
#interview .ov_02 { bottom: 0; left: calc(100% - 15%); }
#interview .ov_03 { bottom: 12%; left: 0; width: 7.2%; }
#interview .ov_04 { bottom: 0; right: 0; width: 10.2%; }
@media screen and (max-width:480px) { /* s */
	#interview .sec_inner { padding: 3rem 6rem; }
	#interview .btw { margin-top: 3rem; }
	#interview .ov_01, #interview .ov_02 { width: 46.2%; }
	#interview .ov_01 { right: calc(100% - 25%); }
	#interview .ov_02 { left: calc(100% - 25%); }
}


/* blog ----------*/
#blog {}
#blog .sec_inner { max-width: 93.4rem; padding: 6rem 4rem; }
#blog .blog_list { position: relative; z-index: 5; margin-top: 6rem; }
#blog .btw { margin-top: 5rem; text-align: center; }
#blog .ov_01, #blog .ov_02 { z-index: 2; width: 35.4%; }
#blog .ov_01 { bottom: 18%; right: calc(100% - 15%); }
#blog .ov_02 { top: 7%; left: calc(100% - 15%); }
#blog .ov_03 { z-index: 2; bottom: 0; right: 0; width: 10%; }
@media screen and (max-width:480px) { /* s */
	#blog .sec_inner { padding: 3rem 4rem; }
	#blog .blog_list { margin-top: 3rem; }
	#blog .btw { margin-top: 2rem; }
	#blog .ov_01, #blog .ov_02 { width: 49.56%; }
	#blog .ov_01 { right: calc(100% - 25%); }
	#blog .ov_02 { left: calc(100% - 25%); }
}


/* recruit ----------*/
#recruit { background-color: #F9ECEC; }
#recruit .sec_inner { max-width: 77.2rem; padding: 6rem 4rem 16rem; }
#recruit .recruit_list { position: relative; z-index: 5; display: flex; gap: 22rem; justify-content: center; }
#recruit .recruit_list li { text-align: center; }
#recruit .recruit_list li h3 { position: relative; display: block; margin-bottom: 6rem; }
#recruit .recruit_list li h3::before { content: ""; position: absolute; z-index: 1; bottom: -0.2em; left: 0; right: 0; width: 83%; height: 3.1rem; margin: auto; background-image: url(../img/common/h3_bg_02.svg); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
#recruit .recruit_list li h3 span { position: relative; z-index: 2; display: inline-block; margin-bottom: 0.5em; color: #4D70AE; font-size: 2.8rem; font-weight: bold; }
#recruit .ov_01, #recruit .ov_02 { z-index: 2; width: 38.2%; }
#recruit .ov_01 { top: 0; right: calc(100% - 15%); }
#recruit .ov_02 { bottom: 0; left: calc(100% - 15%); }
#recruit .ov_03 { z-index: 2; bottom: 20%; left: 0; width: 12.2%; }
#recruit .ov_04 { z-index: 2; bottom: 5%; right: 0; width: 15.5%; }
#recruit .ov_05 { z-index: 2; bottom: 0; left: 0; right: 0; width: 60.2%; margin: auto; }
@media screen and (max-width:896px) { /* m */
	#recruit .recruit_list { gap: 6rem; }
}
@media screen and (max-width:480px) { /* s */
	#recruit .sec_inner { padding: 3rem 4rem 8rem; }
	#recruit .recruit_list { flex-direction: column; gap: 3rem; }
	#recruit .recruit_list li h3 { margin-bottom: 2rem; }
	#recruit .recruit_list li h3::before { width: 50%; }
	#recruit .ov_05 { width: 90%; }
	#recruit .ov_01, #recruit .ov_02 { width: 53.4%; }
	#recruit .ov_01 { right: calc(100% - 25%); }
	#recruit .ov_02 { left: calc(100% - 25%); }
}