@charset "utf-8";

.page-section{box-sizing: border-box; margin-bottom: 4rem;}
.border-b{border-bottom: 1px solid #ddd; padding-bottom: 4rem;}
.mb-lg-0{margin-bottom: 0 !important;}
.pb-lg-0{padding-bottom: 0 !important;}

.page-con{padding: 0 4rem; width: 100%; margin: 0 auto;}
.page-bg{background-repeat: no-repeat; background-position: center; background-size: cover; padding: 8rem 0;}

.ver-line{width: 1px; height: 200px; background-color: #111; margin: 0 auto;}
.ver-line-h{width: 1px; height: 100px; background-color: #111; margin: 0 auto;}

.brand-wrap{display: flex; align-items: center;}
.brand-box:first-child{width: 40%; text-align: center;}
.brand-box:last-child{width: 60%; padding-left: 4rem;}
.brand-img{margin-bottom: 1.5rem;}
.brand-img > img{border-radius: 50%;}
.brand-img-tit > h3{font-size: 21px; text-align: center;}
.brand-txt > h2{font-size: 34px; line-height: 1.5; margin-bottom: 3rem;}
.brand-txt > p{font-size: 17px; line-height: 1.5;}

.philo-tit > h2{font-size: 45px; margin-bottom: 1.5rem; line-height: 1.5;}
.philo-tit > h2 > span{color: #bd1622;}
.philo-tit > p{font-size: 18px; color: #666; line-height: 1.8;}
.philo-wrap-tit > h2{font-size: 34px; text-align: center; margin-bottom: 4rem; font-weight: 400;}
.philo-wrap-tit > h2 > span{color: #bd1622;}
.philo-wrap1{display: flex; align-items: center; margin-bottom: 2rem;}
.philo-wrap2{display: flex; flex-direction: row-reverse; align-items: center; margin-bottom: 2rem;}
.philo-box{width: 50%;}
.philo-txt{padding: 50px;}
.philo-txt > h5{font-size: 20px; color: #bd1622; margin-bottom: 1.5rem; font-weight: 400;}
.philo-txt > h3{font-size: 22px; margin-bottom: 1.5rem; font-weight: 400;}
.philo-txt > p{font-size: 16px; color: #666;}
.philo-wrap2 .philo-txt{text-align: right;}
.philo-img img{width: 100%; transform: translateX(100%); transition: all .8s;}
.philo-img{overflow: hidden;}
.philo-img img.ani.act{transform: translateX(0);}
.philo-wrap2 .philo-img img{transform: translateX(-100%); transition: all .8s;}

.way-tit{margin-bottom: 4rem; text-align: center;}
.way-tit > h2{font-size: 45px; margin-bottom: 1rem; font-weight: 800;}
.way-tit > h2 > span{color: #bd1622;}
.way-tit > h5{font-size: 18px;}
.way-wrap{display: flex;}
.way-box{width: 33.33333%; min-height: 400px; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1;}
.way-box-tit{position: absolute; top: 3rem; left: 3rem;}
.way-box-tit::before{content: ""; width: 100px; height: 100px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; position: absolute; top: -1.5rem; left: -2rem; z-index: -1;}
.way-box-tit > h3{font-size: 24px; color: #fff;}
.way-box-tit > h3 > span{color: #bd1622;}

.comp-wrap1{display: flex; align-items: center; margin-bottom: 3rem;}
.comp-wrap1 .comp-box:first-child{width: 35%;}
.comp-wrap1 .comp-box:last-child{width: 65%;}
.comp-img{overflow: hidden; border-radius: 10px;}
.comp-img img{transform: translateY(100%); transition: all .5s;}
.comp-img img.ani.act{transform: translateY(0);}
.comp-txt > p{font-size: 18px; margin-bottom: 1rem; color: #666;}
.comp-txt > h5{font-size: 20px;}
.comp-wrap2{display: flex; align-items: center; margin-bottom: 3rem; flex-direction: row-reverse;}
.comp-wrap2 .comp-box:first-child{width: 35%;}
.comp-wrap2 .comp-box:last-child{width: 65%;}
.comp-wrap2 .comp-txt{padding-left: 3rem;}

.menu-tit{margin-bottom: 3rem; text-align: center;}
.menu-tit > h3{font-size: 30px; position: relative; padding-bottom: 1.5rem; margin-bottom: 1.5rem; color: #fff;}
.menu-tit > h3::before{content: ""; width: 80px; height: 1px; background-color: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.menu-tit > p{font-size: 18px; color: #fff;}
.menu-wrap{display: flex; justify-content: center;}
.menu-box.bc3{width: 33.3333%; padding: 0 0.5rem;}
.menu-box.bc4{width: 25%; padding: 0 0.5rem;}
.menu-cont{overflow: hidden; border-radius: 10px; border: 1px solid #ddd;}
.menu-txt{padding: 2rem; text-align: center; background-color: #fff;}
.menu-txt > h5{font-size: 20px; margin-bottom: 1rem;}
.menu-txt > p{font-size: 18px; color: #666;}
.menu-etc{padding-top: 3rem; text-align: center;}
.menu-etc > h5{font-size: 18px; color: #fff;}

.fran-tit{text-align: center;}
.fran-tit > h2{font-size: 30px; margin-bottom: 1rem;}
.fran-tit > p{font-size: 18px;}
.fran-wrap{display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem;}
.fran-box{padding: 1rem; width: 25%; }
.fran-cont{padding: 3rem 0; text-align: center; background-color: #f8f8f8; border-radius: 0 20px 0 20px; position: relative;}
.fran-cont::before{content: ""; font-size: 24px; color: #db1f6d; position: absolute; font-weight: 800; top: 1rem; left: 1rem;}
.fran-cont.fn1::before{content: "01";}
.fran-cont.fn2::before{content: "02";}
.fran-cont.fn3::before{content: "03";}
.fran-cont.fn4::before{content: "04";}
.fran-cont.fn5::before{content: "05";}
.fran-cont.fn6::before{content: "06";}
.fran-cont.fn7::before{content: "07";}
.fran-cont.fn8::before{content: "08";}
.fran-icon{margin-bottom: 1.5rem;}
.fran-txt > h5{font-size: 18px;}
.fran-btn{text-align: center;}
.fran-btn > a{display: inline-block; padding: .8rem 2rem; background-color: #db1f6d; border-radius: 10px; text-align: center; transition: all .5s; color: #fff; font-size: 20px;}
.fran-btn > a:hover{border-radius: 0;}

/* media-query */

@media(min-width:992px){

}

@media(max-width:991px){
  .mb-0{margin-bottom: 0 !important;}
  .pb-0{padding-bottom: 0 !important;}
  .ver-line{height: 100px;}
  .ver-line-h{height: 50px;}
  .brand-wrap{flex-direction: column;}
  .brand-box:first-child{width: 100%; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #ddd;}
  .brand-box:last-child{width: 100%; padding-left: 0;}
  .brand-txt > h2{margin-bottom: 2rem;}

  .philo-wrap1{flex-direction: column;}
  .philo-wrap1:last-child{margin-bottom: 0;}
  .philo-wrap2{flex-direction: column;}
  .philo-box{width: 100%;}
  .philo-txt{padding: 30px 0;}

  .philo-tit > h2{font-size: 35px;}
  .philo-tit > p{font-size: 16px;}
  .philo-wrap-tit > h2{font-size: 28px;}
  .way-tit > h2{font-size: 35px;}
  .way-tit > h5{font-size: 16px;}
  .way-wrap{flex-direction: column;}
  .way-box{width: 100%;}
  .way-box-tit > h3{font-size: 20px;}

  .comp-wrap1{flex-direction: column-reverse; margin-bottom: 1rem;}
  .comp-wrap1 .comp-box:first-child{width: 100%;}
  .comp-wrap1 .comp-box:last-child{width: 100%;}
  .comp-wrap1 .comp-txt{padding: 20px 0;}
  .comp-txt > p{font-size: 14px; margin-bottom: .5rem;}
  .comp-txt > h5{font-size: 18px;}
  .comp-wrap2{flex-direction: column-reverse; margin-bottom: 1rem;}
  .comp-wrap2 .comp-box:first-child{width: 100%;}
  .comp-wrap2 .comp-box:last-child{width: 100%;}
  .comp-wrap2 .comp-txt{padding: 20px 0;}

  .page-bg{padding: 4rem 0;}
  .page-con{padding: 0 15px;}
  .menu-wrap{flex-direction: column;}
  .menu-box.bc3{width: 100%; padding: 0; margin-bottom: 1.5rem;}
  .menu-box.bc3:last-child{margin-bottom: 0;}
  .menu-box.bc4{width: 100%; padding: 0; margin-bottom: 1.5rem;}
  .menu-box.bc4:last-child{margin-bottom: 0;}

  .fran-wrap{flex-direction: column;}
  .fran-box{width: 100%;}

}
@media(max-width:600px){
  .brand-txt > h2{font-size: 21px;}
  .brand-txt > p{font-size: 14px;}

  .philo-tit > h2{font-size: 22px;}
  .philo-tit > p{font-size: 14px;}
  .philo-wrap-tit > h2{font-size: 20px;}
  .philo-txt > h5{font-size: 18px; margin-bottom: 1rem;}
  .philo-txt > h3{font-size: 20px; margin-bottom: 1rem;}
  .philo-txt > p{font-size: 14px;}
  .way-tit > h2{font-size: 28px;}
  .way-tit > h5{font-size: 14px;}
  .menu-tit > h3{font-size: 28px;}
  .menu-txt > h5{font-size: 18px; margin-bottom: 8px;}
  .menu-txt > p{font-size: 14px;}
  .menu-etc{padding-top: 1.5rem;}
  .menu-etc > h5{font-size: 16px;}
  .fran-btn > a{font-size: 16px;}
}