@charset "UTF-8";

html, body{height:100%}

#wrap{overflow:hidden;z-index:1}

.sub_top{overflow:hidden;position:fixed;left:0;top:100px;width:100%;box-sizing:border-box}
.scroll .sub_top{top:65px}
.sub_top6{height:calc(100% - 100px)}

.sub_top6 ~ #wrap{overflow:visible;top:100%;z-index:50}

/* sub_title_area */
.sub_title_area{left:0;top:300px;width:100%;text-align:center}
.sub_title{font-family:'NanumSquareR';font-size:55px;letter-spacing:-0.05em;line-height:118%;color:#fff}
.sub_title em{color:#fdf7bd}
.sub_text{font-family:'NanumGothic';padding-top:20px;font-size:17px;letter-spacing:-0.05em;line-height:159%;color:#ddd}
.sub_text em{font-family:'NanumGothicBold'}

.sub_visual3 .sub_title_area, .sub_visual4 .sub_title_area{left:50%;top:200px;margin-left:-590px;text-align:left}

/* brand_visual */
.brand_visual{height:700px}
.brand_visual .sub_video img{position:absolute;left:50%;top:0;margin-left:-1280px}
/* .br_title_a{top:200px;margin-left:-490px}
.br_title_b{top:270px;margin-left:-564px}
.br_title_line{display:block;top:273px;margin-left:-590px;width:3px;height:237px;background:#fff} */

/* sub_visual */
.sub_visual{overflow:hidden;height:700px}
.sub_visual3{height:450px;background:url('../img/sub/sub_visual3.jpg') no-repeat center;background-size:cover}
.sub_visual4{height:450px;background:url('../img/sub/sub_visual4.jpg') no-repeat center;background-size:cover}
.sub_visual3 .sub_video, .sub_visual4 .sub_video{display:none}
/* .sub_visual5{background:url('../img/sub/sub5_video.jpg') no-repeat center} */
/* .sub_visual5:before{content:'';position:absolute;left:50%;top:0;width:2560px;height:700px;margin-left:-1280px;background:url('../img/sub/sub_vid_overlay.png') no-repeat center} */

/* sub_visual6 */
.sub_visual6{height:100%}
.sub_visual6 .dimension-fix{position:relative;height:100%}
.sub_visual6 .sub_video{left:0;width:100%;height:100%;margin-left:0}

.sub6_link{display:block;width:180px;height:52px;margin:36px auto 0;border-radius:50px;background:#c6171f;font-family:'NanumGothicBold';font-size:16px;letter-spacing:-0.05em;line-height:52px;text-align:center;color:#fff}

/* sub_video */
.sub_video{top:0;width:2560px;margin-left:-1280px;background:#000}
.sub_video > img, .sub_video > iframe, .sub_video > video{}
.sub_video > video{width:100%;height:100%}
/* .sub_video:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:url('../img/sub/vid_overlay.png')} */
.no-video .sub_visual2 .sub_video{background:url('../img/sub/sub2_video.jpg') no-repeat center}
.no-video .sub_visual5 .sub_video{background:url('../img/sub/sub5_video.jpg') no-repeat center}
.no-video .sub_visual6 .sub_video{background:url('../img/sub/sub6_video.jpg') no-repeat center}
.sub_visual5{background:#000}
.sub_visual5 .sub_video > video{opacity:0.8}
.sub_visual5 .sub_video{width:2000px;margin-left:-1000px}
.sub_visual6 .sub_video > video{opacity:0.7}

@media screen and (min-width: 2000px) {
	.sub_visual5 .sub_video{width:2560px;margin-left:-1280px}
}

.boxes_container_block{display:none;position:absolute;left:0;top:0;z-index:20;width:100%;height:100%;background-color:rgba(34,34,34,0.6)}
.boxes_container{position:absolute;left:0;bottom:0;z-index:30;width:100%;height:90px;cursor:pointer}
.box_ul{position:absolute;left:50%;top:0;width:2220px;height:100%;margin-left:-1110px;text-align:center}
.box_ul li{display:inline-block;overflow:hidden;position:relative;top:0;width:370px;height:500px;text-align:left}
.box_ul a{display:block;position:relative;height:100%}
.box_ul a:after{content:'';position:absolute;left:10px;top:0;width:350px;height:100%;background:rgba(0,0,0,0.5)}
.box_ul .img{overflow:hidden;position:relative;width:350px;height:250px;margin:0 auto;background-repeat:no-repeat;background-position:center;background-size:cover}
.box_ul .text_wrap{position:absolute;left:10px;bottom:0;width:350px;height:250px;background-color:#fff;transition:all 0.4s}
.box_ul .box_ttl{padding:40px 0 18px 40px;font-size: 24px;font-weight: 700;}
.box_ul .text{padding-left:40px;padding-right: 20px;word-break: keep-all;}
.box_ul .play_bar{overflow:hidden;position:absolute;left:10px;bottom:0;width:350px;height:0;background-color:#c6171f;background-repeat:no-repeat;background-image:url('../img/sub/sub6_play_btn.png');background-position:298px 16px;padding-left:40px;box-sizing:border-box;font-family:'NanumGothicBold';font-size:20px;line-height:50px;color:#fff;transition:all 0.4s}
.box_ul:hover a:after{display:none}
.box_ul a:hover .text_wrap{height:280px}
.box_ul a:hover .play_bar{height:50px}

@media screen and (max-width:2000px){
	.sub_visual2 .sub_video{margin-left:-1000px;width:2000px}
}

.scroll .header_wrap{height:65px;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4}
.scroll .header_wrap .logo{top:17px;z-index:1}
.scroll .header_wrap .logo a{width:110px;height:35px;background-size:110px 35px}
.scroll .header_wrap .depth1_ul{margin-top:-100px}
.scroll .header_wrap .depth2_ul{top:0}
.scroll .header_wrap .depth2_a{color:#747474}
.scroll .header_wrap .depth2_a:after{bottom:2px}
.scroll .header_wrap .depth2_li.on .depth2_a, .scroll .header_wrap .depth2_a:hover{color:#c6171f}

.btn_pop_inq.scroll .line1{display:none}
.btn_pop_inq.scroll .scroll_line{display:block;right:40px;top:20px}
.btn_pop_inq.scroll .btn_consl{top:auto;bottom:40px;
-webkit-animation:up .5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation:up .5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
@-wekbit-keyframes up {
	from {
		-webkit-transform:translateY(300);
		-ms-transform:translateY(300);
		transform:translateY(300px);
	}
	to {
		-webkit-transform:translateY(0);
		-ms-transform:translateY(0);
		transform:translateY(0);
	}
}
@keyframes up {
	from {
		-webkit-transform:translateY(300);
		-ms-transform:translateY(300);
		transform:translateY(300px);
	}
	to {
		-webkit-transform:translateY(0);
		-ms-transform:translateY(0);
		transform:translateY(0);
	}
}

.sub_content{background-color:#fff}
.sub_content1{margin-top:800px}
.sub_content2{margin-top:800px}
.sub_content3{margin-top:550px}
.sub_content4{margin-top:550px}
.sub_content5{margin-top:800px}
.sub_content6{top:100%}

/* page_title_area */
.page_title_area{padding:167px 0 40px}
.page_title{position:relative;font-family:'NanumSquareB';font-size:22px;letter-spacing:-0.05em;color:#000}
.page_title:before{content:'';position:absolute;left:50%;top:-105px;width:88px;height:80px;margin-left:-44px;background-repeat:no-repeat;background-position:center;background-image:url('../img/sub/sub_title_ico1.png')}
.page_title5:before{background-image:url('../img/sub/sub_title_ico2.png')}
.page_text{font-family:'NanumGothic';padding-top:20px;font-size:20px;line-height:160%;color:#666}

.text{font-family:'NanumGothic';font-size:18px;letter-spacing:-0.05em;line-height:178%;color:#222}
.text em{font-family:'NanumGothicBold';color:#333}

.video_area{position:relative;height:100%;background:#000}
.video_area:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:url('../img/sub/vid_overlay.png')}
.video_area video{width:100%;opacity:0.8}

/* tabmenu */
.tabmenu{width:1000px;margin:0 auto;padding-top:50px;text-align:center;font-size:0}
.tabmenu li{display:inline-block;width:200px}
.tabmenu a{display:block;position:relative;font-family:'NanumSquareB';font-size:22px;letter-spacing:-0.05em;line-height:60px;color:#a6a6a6}
.tabmenu a:after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:#c6171f;transition:all 0.4s}
.tabmenu li.on a:after, .tabmenu a:hover:after{width:100%}
.tabmenu li.on a, .tabmenu a:hover{color:#c6171f}

.new_store{padding:70px 0 50px;background-color:#f9f9f9}
.new_store_tit{padding-bottom:40px}
.new_store .store_box{float:left;position:relative;margin-right:20px;margin-bottom:20px;width:220px;height:150px;background-color:#fff;box-sizing:border-box}
.new_store li:nth-child(5n){margin-right:0}
.new_store .store_box a{display:inline-block;width:100%;height:100%}
.new_store .store_open{position:absolute;bottom:0;left:0;width:100%;height:40px;background-color:#ceaa74;font-family:'NanumGothicBold';font-size:16px;line-height:40px;letter-spacing:-0.05em;color:#fff}
.new_store .store_open span{font-style:italic}
.new_store .store_open.cm_soon{background-color:#6ec9c0;text-transform:uppercase}
.new_store .store_box .district{padding:30px 0 7px;font-family:'NanumGothic';font-size:16px;letter-spacing:-0.05em;color:#666}
.new_store .store_box .store_name{font-family:'NanumGothicBold';font-size:20px;letter-spacing:-0.05em;color:#333}

.fr01_inq{height:350px;background:url('../img/page/fran/01/fr01_inq_bg.jpg')no-repeat center;box-sizing:border-box}
.fr01_inq_bg{top:0;margin-left:-1280px}
.fr01_inq_stit{padding:65px 0 15px;font-family:'NanumGothicBold';font-size:20px;letter-spacing:0.05em;color:#fff}
.fr01_inq_txt{padding:13px 0 30px;color:#eee}
.fr01_link{display:block;margin:0 auto;width:180px;height:52px;background-color:#c6171f;border-radius:35px;font-family:'NanumGothicBold';font-size:16px;letter-spacing:-0.05em;line-height:52px;color:#fff}

/* franchise navigation */
.navigation-buttons {
  position: relative;
  display: flex;
  width: 100%;
  padding: 20px 0;
  background-color: #fff;
  z-index: 10;
}

/* 기본적으로 양쪽 버튼이 모두 보일 때는 space-between으로 정렬 */
.navigation-buttons {
  justify-content: space-between;
}

/* 왼쪽 버튼만 보일 때는 flex-start로 정렬 */
.navigation-buttons.left-only {
  justify-content: flex-start;
}

/* 오른쪽 버튼만 보일 때는 flex-end로 정렬 */
.navigation-buttons.right-only {
  justify-content: flex-end;
}

/* 버튼이 하나만 보일 때의 처리 */
.navigation-buttons.left-only #btnRight,
.navigation-buttons.right-only #btnLeft {
  display: none;
}

.nav-button {
  display: inline-block;
  padding: 18px 35px;
  background-color: #c6171f;
  color: #fff;
  border-radius: 5px;
  font-family: 'NanumGothicBold', sans-serif;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: -0.05em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 25px;
}

.nav-button:hover {
  background-color: #d82a32;
}

.arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.prev-button:hover .arrow {
  transform: translateX(-5px);
}

.next-button:hover .arrow {
  transform: translateX(5px);
}

@media screen and (max-width: 768px) {
  .nav-button {
    padding: 15px 25px;
    font-size: 18px;
    margin: 0 15px;
  }
}