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


/*
 project_story
==============================*/

/* pepleProjectStory ----------*/
#pepleProjectStory {}
#pepleProjectStory #mvp { margin-bottom: 2rem; }
#pepleProjectStory #mvp h1 .j { font-size: 4rem; }
#pepleProjectStory #mvp h1 .cursive { top: -19rem; left: 55%; width: 10em; }
#pepleProjectStory #mvp .pw { height: 65rem; }
#pepleProjectStory #main .sub_text { max-width: 108.4rem; }
#pepleProjectStory .pj { padding-top: 15rem; padding-bottom: 15rem; }
#pepleProjectStory .pj .tw { position: relative; }
#pepleProjectStory .pj .tw h2 { margin-bottom: 5rem; font-size: 2.5rem; font-weight: 700; }
#pepleProjectStory .pj .tw h2::before, #pepleProjectStory .pj .tw h2::after { position: absolute; left: 0; content: ""; height: 0; border-top: solid 1px #BCA317; }
#pepleProjectStory .pj .tw h2::before { width: 6rem; top: -3rem; }
#pepleProjectStory .pj .tw h2::after { width: 4rem; top: -2.6rem; }
#pepleProjectStory .pj .tw p {}
#pepleProjectStory .pj.-bg { position: relative; color: #FFF; }
#pepleProjectStory .pj.-bg::before { position: absolute; z-index: 1; top: 0; left: calc((100vw - 100rem) / 2); content: ""; width: 100%; height: 100%; background-color: #01175F; }
#pepleProjectStory .pj.-bg.-r::before { left: auto; right: calc((100vw - 100rem) / 2); }
#pepleProjectStory .pj.-bg .inner { position: relative; z-index: 2; }
#pepleProjectStory .pj.-p .w { display: flex; gap: 6rem; }
#pepleProjectStory .pj.-p.-r .w { flex-direction: row-reverse; }
#pepleProjectStory .pj.-p .w .pw { width: 46%; }
#pepleProjectStory .pj.-p .w .pw img { width: calc(100% + 24rem); max-width: none; margin-left: -24rem; }
#pepleProjectStory .pj.-p.-r .w .pw img { margin-left: 0; }
#pepleProjectStory .pj.-p .w .tw { width: 54%; }
#pepleProjectStory .pj.-t .tw { max-width: 122rem; }
#pepleProjectStory .pj.-t.-r .tw { margin-left: auto; }
#Project1 .cursive { bottom: calc(100% + 1.5rem); left: -5rem; }
#Project2 .cursive { bottom: calc(100%); left: 6rem; }
#Project3 .cursive { bottom: calc(100% + 1.5rem); left: -10rem; }
#Project4 .cursive { bottom: calc(100% + 1.5rem); left: -8rem; }
#Project5 .cursive { bottom: calc(100%); left: 6rem; }
@media screen and (max-width:1500px) {
	#pepleProjectStory .pj.-bg::before { left: 20vw; }
	#pepleProjectStory .pj.-bg.-r::before { left: auto; right: 20vw; }
	#pepleProjectStory .pj.-p .w { gap: 3rem; }
	#pepleProjectStory .pj.-p .w .pw img { width: calc(100% + 2rem);  margin-left: -2rem; }
	#pepleProjectStory .pj.-p.-r .w .pw img { margin-left: 0; }
	#pepleProjectStory .pj .cursive { transform: scale(0.7,0.7); }
}
@media screen and (max-width:1400px) {
	#pepleProjectStory #mvp h1 .cursive { left: auto; right: 0; }
}
@media screen and (max-width:1100px) {
	#pepleProjectStory #mvp h1 .cursive { top: -14rem; transform: scale(0.7,0.7); }
	#pepleProjectStory.story1 #mvp .pw { height: 57vw; }
	#pepleProjectStory.story2 #mvp .pw { height: 57vw; }
}
@media screen and (max-width:896px) { /* m */
	#pepleProjectStory .pj.-bg::before { left: 5vw; }
	#pepleProjectStory .pj.-bg.-r::before { left: auto; right: 5vw; }
	#pepleProjectStory .pj { padding-top: 6rem; padding-bottom: 6rem; }
	#pepleProjectStory .pj.-p .w { display: block;}
	#pepleProjectStory .pj.-p .w .pw { width: 100%; margin-bottom: 12rem; }
	#pepleProjectStory .pj.-p .w .tw { width: 90%; margin-left: 10%; }
	#pepleProjectStory .pj.-p.-r .w .tw { margin-left: 0; }
	#pepleProjectStory .pj.-t { padding-top: 12rem; }
}
@media screen and (max-width:480px) { /* s */
	#pepleProjectStory #mvp h1 .j { font-size: 2.4rem; }
	#pepleProjectStory #mvp h1 .cursive { top: -10rem; }
	#pepleProjectStory.story1 #mvp .pw { height: 65vw; }
	#pepleProjectStory.story2 #mvp .pw { height: 65vw; }
}

/* info ----------*/
#info { margin-top: 16rem; padding-top: 40%; padding-bottom: 12rem; background-image: url(../img/peple/project_story/1_info_bg.jpg); background-repeat: no-repeat; background-position: center top; background-size: contain; }
.story2 #info { background-image: url(../img/peple/project_story/2_info_bg.jpg); }
#info ul { display: grid; padding: 4rem; background-color: #F2F5F8; grid-template-columns: 1fr 5% 1fr 5% 1fr; gap: 6rem; }
#info ul li {}
#info ul li h3 { margin-bottom: 3rem; padding-top: 2rem; text-align: center; font-size: 2.4rem; font-weight: 500; }
#info ul li p {}
@media screen and (max-width:896px) { /* m */
	#info { margin-top: 8rem; padding-bottom: 6rem; }
	#info ul { padding: 3rem; gap: 3rem; }
	#info ul li h3 { padding-top: 1rem;}
}
@media screen and (max-width:480px) { /* s */
	#info ul { grid-template-columns: 1fr; }
	#info ul li.times { text-align: center; }
	#info ul li.times img { width: 5rem; }
}

/* professional ----------*/
#professional { padding-top: 18rem !important; }
#professional .w { max-width: 111rem; margin: auto; position: relative; background-color: #01175F; }
#professional .w .cursive { left: calc(50% - 13.5rem); top: -8rem; }
#professional .w::before, #professional .w::after { content: ""; position: absolute; }
#professional .w::before { width: 18%; height: 0; border-top: solid 1px #BCA317; top: 0; left: 0; }
#professional .w::after { height: 20%; width: 0; border-left: solid 1px #BCA317; top: 0; left: 0; }
#professional .w p { font-size: 2.2rem; font-weight: 600; color: #FFF; margin: 0; border: solid 2rem #F2F5F8; padding: 6rem; }
#professional .sw { position: absolute; width: 100%; height: 100%; }
#professional .sw1::before, #professional .sw1::after { content: ""; position: absolute; }
#professional .sw1::before { width: 74%; height: 0; border-top: solid 1px #BCA317; top: 0; right: 0; }
#professional .sw1::after { height: 60%; width: 0; border-left: solid 1px #BCA317; bottom: 0; left: 0; }
#professional .w2 { top: 0; left: 0; border-bottom: solid 1px #BCA317; border-right: solid 1px #BCA317; }
#professional .w3 { top: 6px; left: 6px; border-bottom: solid 1px #BCA317; border-right: solid 1px #BCA317;}
#professional .w4 { top: 0; left: 0; }
#professional .w4::before { position: absolute; top: 0; left: calc(18% - 1.2rem); content: ""; width: 2.4rem; height: 0; border-top: solid 1px #BCA317; transform: rotate(-45deg); transform-origin: center center; }
@media screen and (max-width:480px) { /* s */
	#professional { padding-top: 8rem !important; }
	#professional .w .cursive { left: calc(50% - 16rem); top: -9rem; transform: scale(0.7,0.7); }
	#professional .w p { font-size: 2rem; padding: 3rem; }
}

/* other ----------*/
#other { max-width: 165rem; margin: auto; padding: 0 2rem; }