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


/*
 case
==============================*/


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


/* caseList ----------*/
#caseList { padding-bottom: 10rem; }
#caseList .inner { max-width: 123rem; padding: 0 3rem; }
#caseList .cats { display: flex; justify-content: center; gap: 10rem; }
#caseList .cats .select_wrap { position: relative; }
#caseList .cats .select_wrap svg { position: absolute; top: 0; bottom: 0; margin: auto; right: 2rem; width: 1.1rem; aspect-ratio: 11 / 6.5; }
#caseList .cats select { appearance: none; min-width: 30rem; padding: 1.4rem 1rem; border: none; border-radius: 1rem; background-color: #FFF; font-weight: 600; font-size: 2rem; box-shadow: 0 2px 0 0 #000; }
#caseList .cats select.active { box-shadow: 0 2px 0 0 #DE0728, 8px 8px 10px 0 rgba(222, 7, 40, 0.15); }
#caseList .cats select:hover { cursor: pointer; }
#caseList .cats select option { text-align: center; }
#caseList .case_list { display: grid; margin-top: 6rem; grid-template-columns: 1fr 1fr 1fr; column-gap: 3rem; row-gap: 5.6rem; }
#caseList .btw { margin-top: 10rem; text-align: center; }
@media screen and (max-width:896px) { /* m */
  #caseList .case_list { grid-template-columns: 1fr 1fr;  }
}
@media screen and (max-width:480px) { /* s */
  #caseList { padding-bottom: 1rem; }
  #caseList .cats { flex-direction: column; gap: 2rem; }
  #caseList .cats .select_wrap { width: 80%; margin: auto; }
  #caseList .cats select { width: 100%; }
  #caseList .case_list { grid-template-columns: 1fr; row-gap: 2rem; }
  #caseList .btw { margin-top: 6rem; }
}


/* caseDetail ----------*/
#caseDetail { padding-top: 1px; padding-bottom: 10rem; }
#caseDetail .inner { max-width: 108rem; padding: 0 3rem; }
#caseDetail .main_photo { margin-top: -15rem; margin-bottom: 5.6rem; }
#caseDetail .main_photo img { border-radius: 4rem; }
#caseDetail .inner h1 { margin-bottom: 10rem; font-size: 3.9rem; }
#caseDetail .inner div > h2 { margin-bottom: 3rem; color: #1F239C; font-size: 2rem; }
#caseDetail .inner div > p { line-height: 2.2; }
#caseDetail .result_flows { border-bottom: solid 1px #BEBDBD; margin-top: 3rem; }
#caseDetail .result_flows .result { padding: 3rem 0; display: grid; border-top: solid 1px #BEBDBD; grid-template-columns: 26rem 1fr; align-items: center; }
#caseDetail .result_flows .result h3 { font-size: 2.4rem; }
#caseDetail .result_flows .result ul {}
#caseDetail .result_flows .result ul li { font-size: 1.8rem; font-weight: bold; }
#caseDetail .proposal_detail { margin-top: 8rem; }
#caseDetail .proposal_detail h3 { font-size: 1.8rem; font-weight: bold; margin-bottom: 2rem; }
@media screen and (max-width:896px) { /* m */
  #caseDetail .result_flows .result { padding: 2rem 0; grid-template-columns: 14rem 1fr; }
}
@media screen and (max-width:480px) { /* s */
  #caseDetail { padding-bottom: 4rem; }
  #caseDetail .main_photo { margin-top: -10rem; margin-bottom: 3rem; }
  #caseDetail .inner h1 { margin-bottom: 6rem; font-size: 3rem; }
  #caseDetail .result_flows .result { grid-template-columns: 1fr; }
}

/* other ----------*/
#other { padding-top: 10rem; padding-bottom: 6rem; }
#other .inner { max-width:131rem; padding: 0 7rem; }
#other .h2 { margin-bottom: 5rem; }
#other .owl-nav { position: absolute; top: calc(50% - 3.1rem); left: -6.2rem; width: calc(100% + 12.4rem); display: flex; }
#other .owl-nav svg { width: 3.7rem; aspect-ratio: 1 / 1; fill: #BEBDBD; }
#other .owl-nav .owl-prev {}
#other .owl-nav .owl-prev svg { transform: rotate(180deg); }
#other .owl-nav .owl-next { margin-left: auto; }
#other .owl-nav .disabled { opacity: 0.3; }
#other .owl-dots { display: none; }
#other .btw { margin-top: 10rem; text-align: center; }
@media screen and (max-width:480px) { /* s */
  #other { padding-top: 6rem; padding-bottom: 1rem; }  
  #other .btw { margin-top: 6rem; }
}