@charset "utf-8";
#container_title{display:none;}

.sub_vizual_head {width: 100%;  height: 420px;  position: relative;  text-align: center;  display: flex;    flex-direction: column;    align-items: center;    justify-content: flex-end;    padding-bottom: 65px; background-color: #222; background-size: cover; background-position: center;}
.sub_vizual_head h1 {font-size: 60px;   color: #fff;   font-weight: 700;   line-height: 1.3em;   margin-bottom: 0.67em;}
.sub_vizual_head .overlay {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%; background: linear-gradient(to bottom, transparent 70%, #020C14);}

.sub_vizual_head.gallery {background-image: url(../img/sub/sub_viz_gallery.jpg);}
.sub_vizual_head.product {background-image: url(../img/sub/sub_viz_product.jpg);}
.sub_vizual_head.inquiry {background-image: url(../img/sub/sub_viz_inquiry.jpg);}
.sub_vizual_head.location {background-image: url(../img/sub/sub_viz_location.jpg);}
.sub_vizual_head.about {background-image: url(../img/sub/sub_viz_about.jpg);}



/* 서브 헤더 비쥬얼 메뉴 */
#subnavi {position: relative; z-index: 10;  height: 60px;  padding: 0 25px; text-align: center;  background-color: rgba(0, 0, 0, 0.2);  display: inline-flex;  align-items: center;  justify-content: center;  border-radius: 50px;  backdrop-filter: blur(5px);}
#subnavi .home {width: 20px; height: 20px; text-indent:-99999px; background-image:url('../img/sub/home_icon.png'); background-size: cover; display: block; margin: 0 30px;}
#subnavi .inbox {display: flex;align-items: center; width: 100%;}
#subnavi .inbox > div { position:relative;}
#subnavi .inbox > div::before {position: absolute; top: 50%;  left: 0;  width: 1px;  height: 20px;  margin-top: -10px;  background: #fff;  content: ''; opacity: 0.1;}
#subnavi .inbox > div > a {display: flex; position: relative;  height: 60px;  padding: 0 76px 0 30px;  font-size: 16px;  color: #fff;   line-height: 1.3em; align-items: center;}
#subnavi .inbox > div > a::after {position:absolute; top:50%; right:30px; width:12px; height:8px; margin-top:-4px; background:url('../img/sub/arr_down.png') no-repeat center; background-size:contain; content:''; transition:all 0.4s;}
#subnavi .inbox > div.on > a::after {transform:rotate(180deg);}
#subnavi ul {display: none; position: absolute; top: 60px;  left: 0;  width: 100%; background: rgba(0, 0, 0, 0.8); padding: 20px 25px; padding-right: 10px;}
#subnavi ul li {margin-bottom: 12px;}
#subnavi ul li:last-child {margin-bottom: 0;}
#subnavi ul a {display:block; position:relative; padding-left:0.8em; font-size:15px; line-height:1.3em ;color:#fff; text-align:left; transition:all 0.3s;}
#subnavi ul a::before {content: "·"; position: absolute; left:0; top:0;}
#subnavi ul .on a, #subnavi ul a:hover {color:#4E88D0;}






.sub_visual{background:url('/img/main/mainBanner03.jpg') no-repeat;padding:250px 0; background-position:center;background-size:cover;margin-top:-90px;}

.sub_visual .inner_visual{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; display: flex; flex-direction: column; align-items: center; width:100%;}
.sub_visual .inner_visual h2{font-size: 80px; font-family: 'Pretendard';}
.sub_visual ul.clear li{float:left;}
.sub_visual ul.clear li:after{content:"-"; display:inline-block; color:#fff; margin:0 5px;}
.sub_visual ul.clear li:last-child:after{display:none;}
.sub_visual ul.clear li a{color:#fff; font-size:15px;font-style: normal; font-weight: 400; letter-spacing:-0.5px;}


/* 서브페이지 메뉴 */
.mobile_sub_menu{display:none;}
.sub_page_menu.app_menu .inner_container ul.col3 li{width:16.6%;margin:0; padding: 0; border: 0;}
.sub_page_menu .inner_container ul.col3{display:flex;gap:2px;}
.sub_page_menu .inner_container ul.col3 li a{display:block;width:100%;height:100%; background:#fff; font-size:20px; letter-spacing:-0.5px;text-align:center; padding:30px 0; line-height:1; font-style: normal; font-weight: 700;}
.sub_page_menu .inner_container ul.col3 li a.active{background:#ef3f3e; color:#fff;position:relative;}
.sub_page_menu .inner_container ul.col3 li a.active::after{content:'';width:13px;height:13px;background:#ef3f3e;display:block;transform: rotate(45deg);position:absolute;bottom: -7px;
    left: 50%; transform: translateX(-50%) rotate(45deg);}
.sub_page_menu{margin-top:-80px;}



@media (max-width: 1600px){

	.sub_vizual_head h1 { font-size: 50px;}

}


@media (max-width: 1200px){
	.sub_vizual_head h1 { font-size: 40px;}

}


@media screen and (max-width: 980px){

	.sub_vizual_head {  height: 340px;}

	/* 서브 헤더 비쥬얼 메뉴 */
	#subnavi .home {width: 10px;  height: 10px; margin: 0 20px;}
	#subnavi {    height: 40px; padding: 0 15px;}
	#subnavi .inbox > div::before {height: 10px; margin-top: -5px;}
	#subnavi .inbox > div > a {height: 40px;   padding: 0 40px 0 10px;  font-size: 12px;}
	#subnavi .inbox > div > a::after {right: 10px;  width: 10px;   height: 6px;   margin-top: -2px;}
	#subnavi ul {top: 40px; padding: 15px 15px;}
	#subnavi ul a {font-size: 13px;}


	.sub_visual{padding:46.5918vw 0;background-position: center; background-size: inherit;}
	.sub_visual .inner_visual{transform: translate(-50%,20%);}
	.sub_visual .inner_visual h2{font-size: 8.1633vw;}
	.sub_page_menu{margin-top:-8.2653vw}
	.sub_page_menu .inner_container{display:none;}
	.mobile_sub_menu{display:block;}
	.mobile_sub_menu select.mobile_sub_menu_sel{width:100%; height:10vw; background:#ef3f3e; color:#fff; font-size:3.8vw; padding-left:2vw;background: #ef3f3e url('/img/icon_arr.png') no-repeat 98% center;}
}


@media screen and (max-width: 767px){


}


@media screen and (max-width: 480px){
	.sub_vizual_head { height: 260px; padding-bottom: 45px;}
	.sub_vizual_head h1 { font-size: 32px;}
	/* 서브 헤더 비쥬얼 메뉴 */
	#subnavi {padding: 0 10px;}
	#subnavi .inbox > div > a::after { right: 5px;}
	#subnavi .inbox > div > a {font-size: 10px; padding: 0 20px 0 5px; overflow: hidden;   text-overflow: ellipsis;  white-space: nowrap;   max-width: 120px; min-width: 90px; display: block;  line-height: 40px;}
	#subnavi .inbox > div > a::after {right: 10px;  width: 8px;  height: 4px;  margin-top: -3px;}
	#subnavi ul a {font-size: 12px;}
	#subnavi .home {    margin: 0 3px;}

}