@charset "utf-8";

*{box-sizing: border-box;}

.page-con{width: 100%; max-width: 1530px; padding: 0 15px; margin: 0 auto;}

.page-tit{margin-bottom: 3rem;}
.page-tit.rt{text-align: right;}
.page-tit > h3{font-size: 50px; font-weight: 400; line-height: 1.3;}
.page-tit > p{font-size: 16px; font-weight: 400; margin-top: 1.5rem;}

/* 회사소개 */
.bs-wrap{width: 100%; height: 100vh; background-color: #f6f2e9; display: flex; overflow: hidden;}
.bs-wrap.rv{flex-direction: row-reverse;}
.bs-box{width: 50%;}
.bs-img{width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #ddd; position: relative;}
.bs-img::before{content: ""; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); position: absolute; top: 0; left: 0; transition: 1s; transition-delay: .5s;}
.bs-img.ani.act::before{backdrop-filter: blur(0px); background-color: rgba(255, 255, 255, 0);}
.bs-box.df{display: flex; justify-content: center; align-items: center;}
.bs-caption.rt{text-align: right;}
.bs-caption.lt{text-align: left;}
.bs-caption > h5{font-size: 24px; font-weight: 700; margin-bottom: 1.5rem; color: #241d14; line-height: 1.4;}
.bs-caption > p{font-size: 16px; font-weight: 300; color: #241d14; line-height: 1.8;}

.hs-con{padding: 200px 15px; background-color: #f6f2e9;}
.hs-logo{text-align: center;}
.hs-img{width: 100%; display: flex; justify-content: center;}
.hs-img img{width: 100%; max-width: 150px;}
.ver-line{width: 1px; height: 50px; background-color: #6c5631; margin: 4rem auto;}
.hs-wrap{width: 100%; display: flex; justify-content: center;}
.hs-box{flex: 0 0 auto; padding: 0 2rem;}
.hs-cont{display: flex; color: #241d14; margin-bottom: 2rem;}
.hs-cont:last-child{margin-bottom: 0;}
.hs-cont > h3{font-size: 22px; font-weight: 700; margin-right: 1.5rem;}
.hs-cont > ul{padding-left: 0; margin-bottom: 0; padding-top: 4px;}
.hs-cont > ul > li{font-size: 16px; font-weight: 400; margin-bottom: 5px;}
.hs-cont > ul > li:last-child{margin-bottom: 0;}

/* 브랜드 스토리 */
.bi-bg{padding: 150px 0; background-color: #f6f2e9;}
.bi-bg .page-tit{color: #241d14;}
.bi-wrap{width: 100%; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 100px;}
.bi-box{width: 49%; color: #241d14;}
.bi-box > h5{font-size: 16px; font-weight: 400; margin-bottom: 3rem;}
.bi-img{display: flex;}
.bi-img img{width: 100%; }
.bil-wrap{width: 100%; display: flex; justify-content: space-between;}
.bil-box:first-child{width: 30%;}
.bil-box:last-child{width: 66%;}
.bil-img{display: flex;}
.bil-img img{width: 100%; }

/* 찾아오시는길 */
.location-wrap{padding: 150px 0; background-color: #f6f2e9;}
.map-area{margin-bottom: 2rem;}
.map-caption{width: 100%; display: flex;}
.map-box{width: 50%; color: #241d14;}
.map-box > p{font-size: 16px; font-weight: 400; text-align: right;}
.map-box > p > span{font-weight: 700;}
.map-box > ul > li{display: inline-block; margin-right: 1rem; font-size: 16px; font-weight: 400;}
.map-box > ul > li > span{font-weight: 700;}
.root_daum_roughmap{width: 100% !important;}
.root_daum_roughmap .wrap_controllers{display: none;}
.map-icon{display: inline-block; margin-right: 5px; color: #6c5631;}

/* 경쟁력 */
.cpt-bg{width: 100%; padding: 150px 0; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #f6f2e9;}
.cpt-bg:nth-child(2), .cpt-bg:nth-child(3), .cpt-bg:nth-child(4){padding-top: 0;}
.cpt-bg .page-tit{color: #241d14; position: relative; z-index: 2;}
.cpt-bg .page-tit > h3{color: #241d14;}
.cpt-bg .page-tit > p{color: #241d14;}
.cpt-con{padding: 50px 0 70px; position: relative;}
.cpt-con::before{content: ""; width: 77%; height: 100%; background-color: #ffffff; border-radius: 40px; position: absolute; top: 0; right: 0; z-index: 1;}
.cpt1-wrap{width: 100%; display: flex; position: relative; z-index: 2;}
.cpt1-img{width: 46%; position: relative;}
.cpt1-img::before{content: ""; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); position: absolute; top: 0; left: 0; transition: 1s; transition-delay: .5s;}
.cpt1-img.ani.act::before{backdrop-filter: blur(0px); background-color: rgba(255, 255, 255, 0);}
.cpt1-caption{width: 54%; padding: 0 4rem;}
.cpt1-caption > p{font-size: 16px; font-weight: 400; margin-bottom: 2rem; line-height: 1.8; word-break: keep-all; color: #241d14;}
.cpt1-caption > p:last-child{margin-bottom: 0;}
.cpt-img{display: flex;}
.cpt-img img{width: 100%;}

.cpt2-wrap{width: 100%; display: flex; justify-content: space-between;}
.cpt2-box{width: 49%;}
.cpt2-box > p{font-size: 16px; font-weight: 400; margin-top: 1.5rem; line-height: 1.8; word-break: keep-all; color: #241d14;}

.cpt3-wrap{width: 100%; display: flex; align-items: center; padding-right: calc((100% - 1500px) / 2);}
.cpt3-slide{width: 60%;}
.cpt3-caption{width: 40%; padding-left: 3rem; text-align: right; color: #241d14;}
.cpt3-caption > p{font-size: 16px; font-weight: 400; line-height: 1.8; margin-bottom: 2rem; color: #241d14;}
.cpt3-caption > p:last-child{margin-bottom: 0;}

.cpt4-wrap{width: 100%; display: flex; justify-content: space-between; margin-bottom: 2rem;}
.cpt4-box{width: 49%; color: #241d14;}
.cpt4-box > p{font-size: 16px; font-weight: 400; line-height: 1.8; word-break: keep-all; color: #241d14;}
.cpt-img.cpt4{position: relative;}
.cpt-img.cpt4::before{content: ""; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); position: absolute; top: 0; left: 0; transition: 1s; transition-delay: .5s;}
.cpt-img.cpt4.ani.act::before{backdrop-filter: blur(0px); background-color: rgba(255, 255, 255, 0);}

.fi-wrap{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.fi-box{width: 32%; margin-bottom: 3rem;}
.fi-img{display: flex; margin-bottom: 1rem;}
.fi-img img{width: 100%; }
.fi-cont {text-align: center;}
.fi-cont > h3{font-size: 20px; font-weight: 700; color: #241d14; margin-bottom: 10px;}
.fi-cont > p{font-size: 16px; font-weight: 400; color: #241d14;}
.fi-cont > h3 > span{display: inline-block; font-size: 16px; padding: 5px; background-color: #8f5d2a; width: 35px; height: 25px; line-height: 17px; text-align: center; color: #fff; margin-right: 5px;}
.fi-btn{text-align: center; padding-top: 2rem;}
.fi-btn > a{display: inline-block; font-size: 22px; font-weight: 500; color: #fff; padding: 13px 15px 14px; line-height: 1; min-width: 195px; background-color: #6c5631; transition: .4s;}
.fi-btn > a:hover{color: #F7A545;}

/* 가맹비용 */
.fc-bg{padding: 150px 0; background-color: #f6f2e9;}

.cost-table{
  width: 100%;
  margin: 1.5rem 0 2rem;
}
.cost-table > table{
  width: 100%;
  border-spacing: 0;
  border-left: 1px solid rgba(108, 86, 49, 0.2);
  border-top: 1px solid rgba(108, 86, 49, 0.2);
}
.cost-table > table thead th{
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: rgba(108, 86, 49, 0.7);
  padding: 20px 1rem;
  border-right: 1px solid rgba(108, 86, 49, 0.2);
  border-bottom: 1px solid rgba(108, 86, 49, 0.2);
  font-family: "Noto Sans KR", sans-serif !important;
}
.cost-table > table thead th.benefit{
  background-color: #6c5631;
}
.cost-table > table tbody th{
  font-size: 18px;
  font-weight: 500;
  color: #241d14;
  background-color: rgba(108, 86, 49, 0.1);
  padding: 20px 15px;
  border-right: 1px solid rgba(108, 86, 49, 0.2);
  border-bottom: 1px solid rgba(108, 86, 49, 0.2);
  font-family: "Noto Sans KR", sans-serif !important;
}
.cost-table > table tbody td{
  font-size: 17px;
  font-weight: 400;
  color: #241d14;
  background-color: #fff;
  padding: 20px 15px;
  border-right: 1px solid rgba(108, 86, 49, 0.2);
  border-bottom: 1px solid rgba(108, 86, 49, 0.2);
  font-family: "Noto Sans KR", sans-serif !important;
}
.cost-table > table tbody td span{
  font-weight: 700;
}
.cost-table > table tbody td span.point{
  color: #9d4e27;
}
.cost-table > table tbody td.center{
  text-align: center;
}
.cost-table > table tbody th span.line{
  display: inline-block;
  position: relative;
  color: #9d4e27;
}
.cost-table > table tbody th span.line::after{
  content: "";
  width: 100%;
  height: 1px;
  background-color: #9d4e27;
  position: absolute;
  top: 55%;
  left: 0;
}
.cost-table > table tbody th span.arr{
  color: #9d4e27;
  margin: 0 3px;
}
.cost-table > table tbody th span.line.r::after{
  display: none;
}
.cost-table > table tbody td ul li{
  margin-bottom: 5px;
  position: relative;
  padding-left: 10px;
  font-weight: 400;
}
.cost-table > table tbody td ul li::after{
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #ddd;
  position: absolute;
  top: 10px;
  left: 0;
}
.cost-table > table tbody td ul li:last-child{
  margin-bottom: 0;
}
.cost-table > table tbody td.total{
  padding: 1rem;
  background-color: rgba(108, 86, 49, 0.7);
  text-align: center;
  font-weight: 500;
  color: #fff;
}
.cost-table > table tbody td.totalcost{
  text-align: center;
  background-color: #8f5d2a;
  color: #fff;
  font-size: 20px;
}
.cost-table > table tbody td.totalcost > .tline{
  display: inline-block;
  position: relative;
  font-size: 16px;
}
.cost-table > table tbody td.totalcost > .tline::after{
  content: "";
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 55%;
  left: 0;
}
.cost-table > table tbody td.totalcost > span.arrow{
  margin: 0 5px;
  font-size: 16px;
}

.cost-cont{width: 100%; text-align: right;}
.cost-cont > p{font-size: 16px; color: #241d14; font-weight: 700; margin-right: 10px;}
.cost-cont > p > span{font-size: 20px;}

.fcf-btn{
  display: flex;
  width: auto;
  position: fixed;
  top: 109px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  padding: 1rem 2rem;
  background:linear-gradient(90deg, rgba(255, 255, 255, 0.81) 0%, rgba(255, 255, 255, 0.9) 51.76%, rgba(255, 255, 255, 0.81) 100%);
  transition: .5s;
}
.fcf-btn > a{
  padding: 0 2rem;
  font-size: 18px;
  font-weight: 700;
  transition: .3s;
}
.fcf-btn > a.on{
  color: #9d4e27;
}
.fcf-btn.scr{
  top: 87px;
}

/* 인테리어 */
.it-video{width: 100%; height: 100vh; overflow: hidden; position: relative;}
.it-vd{padding-bottom: 56.25% !important;}
.it-bg{width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover;}
.it-bg:nth-child(even){background-color: #f6f2e9;}
.it-bg:nth-child(odd){background-color: #333;}
.vimeo_player_wrapper{opacity: 1 !important;}

#interior{
  position: relative;
  width: 100%;
  height: 100%;
}
#sc01_scr{ position:absolute; z-index:60; top:150px; left:calc(100% - 30px); width:calc(100vh - 320px); height:3px; background-color:rgba(255,255,255,0.5); transform:rotate(90deg); transform-origin:left top; }
#sc01_scr > .swiper-scrollbar-drag{ background-color:#9d4e27; }
#sc01_pg{ position:absolute; z-index:60; bottom:115px; left:auto; right:30px; width:auto; font-family:'eg'; font-size:30px; font-weight:300; color:#fff; }
#sc01_pg > .swiper-pagination-current{ color:#9d4e27; }

.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.video-bg iframe {
    width: 177.77vh;
    height: 56.25vw;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* media-query */
@media(min-width:577px){
  .m-screen{display: none;}
}
@media(min-width:1200px){
  .d-lg-block{display: block;}
  .d-lg-none{display: none;}

  .ani.up.delay{
		transition: 1.2s opacity 0.2s, 1.2s transform 0.2s;
	}
	.ani.up.delay2{
		transition: 1.2s opacity 0.5s, 1.2s transform 0.5s;
	}
	.ani.up.delay3{
		transition: 1.2s opacity 0.8s, 1.2s transform 0.8s;
	}
	.ani.up.delay4{
		transition: 1.2s opacity 1.0s, 1.2s transform 1.0s;
	}
	.ani.up.delay5{
		transition: 1.2s opacity 1.3s, 1.2s transform 1.3s;
	}

  .ani.blur.delay{
		transition-delay: .4s;
	}
	.ani.blur.delay2{
		transition-delay: .8s;
	}
  .ani.blur.delay3{
		transition-delay: 1.2s;
	}

	/* .it-bg{background-attachment: fixed;} */
}
@media(max-width:1530px){
	.page-con{padding: 0 4rem;}
	.cpt3-wrap{padding-right: 4rem;}
}
@media(max-width:1199px){
  .d-block{display: block;}
  .d-none{display: none;}
  .page-con{padding: 0 15px;}
  
  .page-tit{margin-bottom: 2rem;}
  .page-tit > h3{font-size: 22px; }
  .page-tit > p{font-size: 14px; margin-top: 1rem;}

  .bs-wrap{height: 100%; flex-direction: column;}
  .bs-wrap.rv{flex-direction: column;}
  .bs-img{height: 300px;}
  .bs-box{width: 100%;}
  .bs-caption{padding: 0 15px;}
  .bs-box.df{display: block; padding: 80px 0;}
  .bs-caption > h5{font-size: 18px;}
  .bs-caption > p{font-size: 14px;}

  .hs-con{padding: 20px 15px calc(100px - 2rem);}
  .hs-wrap{flex-direction: column;}
  .hs-box{width: 100%; padding: 0;}
  .hs-cont:last-child{margin-bottom: 2rem;}
  .hs-cont > h3{font-size: 20px;}
  .hs-cont > ul{padding-top: 4px;}
  .hs-cont > ul > li{font-size: 14px; word-break: keep-all;}
  .hs-img img{max-width: 100px;}
  .ver-line{margin: 2rem auto;}

  .bi-bg{padding: 75px 0;}
  .bi-wrap{flex-direction: column; margin-bottom: 50px;}
  .bi-box{width: 100%; margin-bottom: 1.5rem;}
  .bi-box:last-child{margin-bottom: 0;}
  .bi-box > h5{font-size: 14px; margin-bottom: 1rem;}
  .bil-wrap{flex-direction: column;}
  .bil-box:first-child{width: 100%; margin-bottom: 1.5rem;}
  .bil-box:last-child{width: 100%;}

  .location-wrap{padding: 75px 0;}
  .root_daum_roughmap .wrap_map{height: 300px !important;}
  .map-caption{flex-direction: column;}
  .map-area{margin-bottom: 1.5rem;}
  .map-box{width: 100%;}
  .map-box > ul{text-align: left;}
  .map-box > ul > li{display: block; margin-left: 0; font-size: 14px; margin-bottom: 8px;}
  .map-box > p{margin-bottom: 8px; font-size: 14px; text-align: left;}

  .cpt-bg{padding: 75px 0;}
  .cpt-con{padding: 20px 15px;}
  .cpt1-wrap{flex-direction: column;}
  .cpt1-img{width: 100%; margin-bottom: 1.5rem;}
  .cpt1-caption{padding: 0; width: 100%;}
  .cpt-con::before{width: 100%; border-radius: 20px;}
  .cpt2-wrap{flex-direction: column;}
  .cpt2-box{width: 100%;}
  .cpt2-box:first-child{margin-bottom: 1.5rem;}
  .cpt2-box > p{margin-top: 1rem; font-size: 14px;}
  .cpt3-wrap{padding: 0 15px; flex-direction: column;}
  .cpt3-slide{width: 100%; margin-bottom: 1.5rem;}
  .cpt3-caption{width: 100%; padding-left: 0;}
  .cpt4-wrap{flex-direction: column; margin-bottom: 1.5rem;}
  .cpt4-box{width: 100%;}

  .fc-bg{padding: 75px 0;}
  .fi-box{width: 100%; margin-bottom: 1rem;}
  .fi-box:last-child{margin-bottom: 0;}
  .fi-cont > h3{font-size: 18px;}
  .fi-cont > span{top: 1rem; right: 1rem;}

  .cost-cont{flex-direction: column; width: 100%;}
  .cost-cont > p{margin-right: 0; margin-bottom: 10px; word-break: keep-all; font-size: 14px;}

  .fcf-btn{
    justify-content: space-between;
    width: 90%;
    padding: 10px;
    top: 70px;
  }
  .fcf-btn.scr{
    top: 70px;
  }
  .fcf-btn > a{
    padding: 0 10px;
    font-size: 16px;
  }

  .cpt1-caption > p{
    font-size: 14px;
  }
  .cpt3-caption > p{
    font-size: 14px;
  }
  .cpt4-box > p{
    font-size: 14px;
  }
  .cost-cont > p > span{
    font-size: 18px;
  }
  .it-vd {
    padding-bottom: 178.25% !important;
    z-index: -1;
  }
  .it-vd .vimeo_player_wrapper{
    position: absolute;
		width: 177.777vh !important;
		/* 너비 설정 */
		height: 100vh !important;
		/* 높이 설정 */
		object-fit: cover;
		/* 비디오가 영역을 채우도록 설정 */
		top: 50% !important;
		/* 수직 중앙 정렬 */
		left: 50% !important;
		/* 수평 중앙 정렬 */
		transform: translate(-50%, -50%);
		/* 중앙 정렬을 위한 변환 */
		z-index: 1;
		/* iframe을 다른 요소 아래에 표시 */
  }

  .cost-table > table tbody th span.line::after{
    top: 40%;
  }
  .cost-table > table tbody td.totalcost > .tline::after{
    top: 40%;
  }
  
}
@media(max-width:576px){
  .cost-table{overflow-x: auto; position: relative;}
  .cost-table > table{min-width: 600px;}
  .cost-table > table thead th{font-size: 14px; padding: 12px;}
  .cost-table > table tbody th{font-size: 12px; padding: 8px;}
  .cost-table > table tbody td{font-size: 12px; padding: 8px;}
  .cost-table > table tbody td.total{padding: 10px;}
  .cost-table > table tbody td.totalcost{font-size: 14px;}
  .cost-table > table tbody td.totalcost > .tline{font-size: 12px;}
  .cost-table > table tbody td.totalcost > span.arrow{font-size: 12px;}
  .m-screen {
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(60,81,82,0.4);
  }
  .m-txt {
    text-align: center;
    padding: 2rem 1rem;
    background-color: #8f5d2a;
    border-radius: 10px;
    color: #fff !important;
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    font-size: 14px;
  }

  #sc01_scr{
    left: calc(100% - 15px);
  }
  #sc01_pg{
    right: 15px;
  }
}

/* animation */

.ani.up{
	transform: translateY(100px);
	opacity: 0;
	transition: 1.2s;
}
.ani.up.act{
	transform: translateY(0);
	opacity: 1;
}
.ani.left{
	transform: translateX(100px);
	opacity: 0;
	transition: 1s;
}
.ani.left.act{
	transform: translateX(0);
	opacity: 1;
}
.ani.right{
	transform: translateX(-100px);
	opacity: 0;
	transition: 1s;
}
.ani.right.act{
	transform: translateX(0);
	opacity: 1;
}

.ani.blur{
	transition-duration: 1s; transition-property: opacity, filter, -webkit-filter, border-radius, color; transition-timing-function: cubic-bezier(.165,.84,.44,1); will-change: auto; opacity: 0; filter: blur(1rem) brightness(1.3);
}
.ani.blur.act{
	filter: blur(0) brightness(1); opacity: 1;
}