/**************************************************
* 버전관리
* version : v=1
* Last Update : 
**************************************************/

/********************************************************
■ 서브 비주얼
********************************************************/
#wrap #sepration { clear:both; height:18.9rem; text-align:center;position:relative; z-index: 10;}
#wrap #sepration .sep_imgWrap{height:18.9rem; width:100%;position:absolute; top:0; left:0; overflow:hidden;}
#wrap #sepration .sep_imgWrap span {display: block; width: 100%;  height: 100%; background:url('/images/default/content/sub_visual01.jpg') no-repeat center top;}
#wrap #sepration .section{width:60rem; margin:0 auto;transform: translateY(0);animation-delay: 1s; height:18.9rem;display:flex;flex-direction:column;justify-content:center;}
#wrap #sepration h2{overflow: hidden;}
#wrap #sepration h2 span {display:block; font-size:2.4rem; letter-spacing: -0.02em;font-weight:500; color:#000; transform: translate3d(0, 100%, 0); animation: fadeInUp 0.4s 0.1s ease-out forwards; opacity:1;}

/*-----서브비주얼 애니메이션-----*/

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@media (max-width:1200px){
	#wrap #sepration .section {width:100%; padding:0 1rem;}
}
@media (max-width:1024px){
	#wrap #sepration .sep_imgWrap span {background-position: 70% center !important;}
}
@media (max-width:768px){
	#wrap #sepration,
	#wrap #sepration .section,
	#wrap #sepration .sep_imgWrap {height:21.25rem;}
	#wrap #sepration .sep_imgWrap span {background-position: 80% center !important;}
}

/********************************************************
■ 서브 메뉴
********************************************************/

/*-----LNB 웹-----*/
.left_menu {position: absolute; bottom: 0;  left: 0;  width: 100%; height:3.3rem;}
.left_menu ul {display:flex;height: 100%;}
.left_menu ul > li {width:calc(100% / 4); border: 1px solid #c1c1c1; transition: all 0.3s;}
.left_menu ul > li:not(:last-child) {border-right:none;}
.left_menu ul > li.on,
.left_menu ul > li:hover { border-color:var(--main);}
.left_menu ul > li > a {display:flex; justify-content: center; align-items: center; width:100%; height:100%; background:#fff; transition: all 0.3s; font-size:1rem; color:#555;}
.left_menu ul > li.on > a,
.left_menu ul > li:hover > a {background:var(--main); color:#fff;}
.left_menu ul > li > a strong {font-weight:400;}


/*-----LNB 모바일-----*/
.section_lnb {display:none;  width: 100%; justify-content: center; position: relative; z-index:1;}

#lnb{display:block; position:relative;}
#lnb:after{content:''; display:block; clear:both;}
#lnb>li{width:13.2rem;position:relative;float:left;text-align: left;  z-index:1; box-sizing:border-box;font-weight:600; border-bottom:1px solid #000;}

#lnb>li.depth0{display:none;}
#lnb>li.open{z-index:2;}
#lnb>li.depth1{}
#lnb>li.depth2{box-sizing:border-box; padding-right:1rem; }

#lnb>li img{position:absolute; top:50%; left:0; transform:translateY(-50%); }
#lnb>li a{display:block; padding-left: 0.75rem; padding-right: 0.3rem; width:100%; height:40px; letter-spacing:-0.03em; color:#000;line-height:40px;  box-sizing:border-box;font-size:1rem;}
#lnb>li .sub_menu > li > a{color:#fff; font-size:1rem; font-weight: 300;}
#lnb>li .sub_menu > li > a:has( strong){background:#ff6f6f; font-weight: 500; color: #fff;}

#lnb>li>a .unfd{position:absolute; top:50%; right:0.35rem; width:0.5rem; height:0.35rem; background:url('/images/default/content/arr.png') no-repeat 0 0; text-indent:-999em; transition:all 0.1s; transform-origin:50% 50%; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; transform:rotate(0deg) translate(0, -50%); -webkit-background-size: contain;
background-size: contain;}
#lnb>li>a .unfd.on{transform:scaleY(-1) translate(0, 100%);}

#lnb>li>div{z-index:10000; position:absolute;top:calc(2.35rem + 1px);  width:100%; background:var(--main); border-top:none; display:none;  border-top:none; box-sizing:border-box;}
#lnb>li.depth1 > div{width:calc(100% + 1px);}

#lnb>li>div>ul>li{height:auto;}
#lnb>li>div>ul>li:first-child{margin-top:0}
#lnb>li>div>ul>li>a{position:relative; display:inline-block; padding-left:0.75rem; color:#fff; height:2.3rem;  line-height:2.3rem; font-weight:300;font-size:0.85rem;}
#lnb>li>div>ul>li>a:hover{background:#454A50}
#lnb>li>div>ul>li>a.on{color:#54b1ff;  font-weight:500;}
#lnb>li>div>ul>li>a.on span{position:relative;}

#lnb>li>div>li>ul{background: #ededed; padding: 0.25rem 1.3rem;}
#lnb>li>div>li>ul>li:first-child{margin-top:0}
#lnb>li>div>li>ul>li>a{position:relative; display: inline-flex; align-items: center; color:#000; padding:0.5rem 0; line-height:1; font-weight:300;font-size:1rem;}
#lnb>li>div>li>ul>li>a:hover{color:var(--main);}
#lnb>li>div>li>ul>li>a.on{color:var(--main);  font-weight:600;}
#lnb>li>div>li>ul>li>a.on span{position:relative;}
#lnb>li>div>li>a.on{color:var(--main);font-weight:600;}

#lnb > .depth1 > div.sub_menu > li > a > span.unfd2 {float: right;padding-right: 0.2rem;}



/*-----3차 탭메뉴-----*/
.tab_menu{position:relative; z-index:0; position:relative; background:#ededed;}
.tab_menu ul{width:60rem; height:3.1rem; margin:0 auto; display:flex; text-align:center;}
.tab_menu ul li {width:auto;}
.tab_menu ul li a{display:flex; justify-content: center; align-items: center; width:100%; height:100%; box-sizing:border-box; padding:0 3rem; text-align:center; font-size:1rem; color:#000;}
.tab_menu ul li.on a{color:#c92830;}

/* 제품 탭메뉴 */
.tab_menu.prod_tab {margin: 3.5rem auto 0; width: 60rem;  height: 3.1rem;  display: flex; text-align: center; background:transparent;}
.tab_menu.prod_tab ul {width:100%;  background:#ededed;}
.tab_menu.prod_tab ul > li {width:100%;}
.tab_menu.prod_tab ul > li.on a {background:#ff6f6f; color:#fff;}


/*-----서브 타이틀-----*/
#container .page_main_title{width:1300px;margin:0 auto;text-align:center; font-size:1.3rem;   margin-bottom: 2rem;color:#000;margin-top:1rem;}


/*-----본문 컨텐츠-----*/
#container {padding:9.95rem 0 9.5rem}
#container:has(.frameZone) {padding:9.95rem 0 7rem}

/* 긴 본문용 sticky 타이틀 */
.fl_tit.forLongcon h3 {position: sticky; top: 8.2rem;  left: 0; bottom: 0; right: 0;}


@media (max-width:1200px){
	.tab_menu ul {width:100%;}
	.tab_menu.prod_tab  {width:100%; padding:0 1rem;}
}
@media (max-width:1024px){
	#wrap #sepration{height:21.5rem;}
	#wrap #sepration .section{padding:4rem 1rem 0;}
	#wrap #sepration .sep_imgWrap{height:21.5rem;}
	#wrap #sepration h2{margin-bottom:2.5rem;}
	.left_menu {display:none;}
	
	.section_lnb {display:flex;}
	#lnb>li .sub_menu > li > a {font-size:1.0rem; line-height:2.5rem; height:2.5rem;}
	#lnb>li>div>li>ul>li>a {font-size:0.9rem;}
	.tab_menu.prod_tab,
	.tab_menu {display:none;}

	#container {padding:5rem 0 6rem}
	#container:has(.frameZone) {padding:5rem 0 3.5rem}
}

@media (max-width:768px){
	#wrap #sepration .section{ align-items: flex-start;}
	#wrap #sepration h2 {font-size:2.35rem;}
	#lnb{width:100%;}
	#lnb>li{width:100%;}
	#lnb>li a {font-size:1.11rem;}
	#lnb>li .sub_menu > li > a {font-size:1rem;}
	
	.tab_menu ul li {width:100%;}
	.tab_menu ul li a {padding: 0;}

	/* 긴 본문용 sticky 타이틀 */
	.fl_tit.forLongcon h3 {position: relative; top:0; left:0;}
}