/*서브페이지 공통*/
img {max-width: 100%}
.page_header {text-align: center; background: var(--bk); padding: 30px 0}
.page_header h2 {color: #fff; font-size: var(--font25)}

.sub-com .sub-visual{position:relative;width:100%;height:650px;}
.sub-com .sub-visual.tit_style {display: flex; align-items: center; justify-content: center;} 
.sub-com .sub-visual.tit_style h2 {font-size: 35px; font-weight: bold; color: #fff; text-transform: uppercase; letter-spacing: 1em; text-align:center; white-space:nowrap;}
.sub-com .sub-visual.tit_style h2::after{content:""; display:inline-block; width:-1em; /* 일부 브라우저에서 동작 X */ margin-left:-1em; /* 실무에선 이 방식이 안전 */}
body:has(.sub-com .sub-visual) #container_title{padding:0;}
#container:has(.sub-com){margin-top:0;}
.sub-com .sub-contents{position:relative;}
.sub-com .pd-lg{padding:var(--gap-lg) 0;}
.sub-com .pd-lg.pb_0 {padding-bottom: 0}
.sub-com .pd-lg.pt_0 {padding-top: 0}
.sub-page-tit.pt_0 {padding-top: 0}
.sub-page-tit.cs {padding:0 0 var(--gap-tit)}
.sub-com .sub-page-tit.cs p {margin-top: 20px}
.sub-page-tit {text-align: center; padding: var(--gap-sub) 0 var(--gap-sub); color: var(--bk);}
.sub-page-tit .title {font-size: var(--font45); font-weight: 700;}

.video_wrap {max-width: 1300px; margin: 0 auto}
.video_wrap img {width: 100%}
.img_wrap {max-width: 1300px; margin: 0 auto}
.img_wrap img {width: 100%}

/*서브페이지 비주얼*/
.sub-com .sub-visual.brand {background:url('../img/pages/company/bg_visual_brand.jpg') no-repeat center center / cover;}
.sub-com .sub-visual.models {background:url('../img/pages/cars/bg_visual_models.jpg') no-repeat center center / cover;}
.sub-com .sub-visual.buying {background:url('../img/pages/buying/bg_visual_buying.jpg') no-repeat center center / cover;}
.sub-com .sub-visual.style2{background:url('../img/pages/buying/guide/visual_detail.jpg') no-repeat center center / cover;} /*임시 bg*/
.sub-com .sub-visual.car_detail {background:url('../img/pages/buying/guide/visual_detail.jpg') no-repeat center center / cover;}
.sub-com .sub-visual.support {background:url('../img/pages/support/bg_visual_cs.jpg') no-repeat center center / cover;}
.sub-com .sub-visual.magazine {background:url('../img/pages/magazine/bg_visual_magazine.jpg') no-repeat center center / cover;}
.sub-com .sub-visual.bespoke {background:url('../img/pages/bespoke/bg_visual_bespoke.jpg') no-repeat center center / cover;}

/*상단 탭*/
/* .sub-com .menu-dep2-tab{position:relative;top:-25px;z-index:2;}
.sub-com .menu-dep2-tab ul{width:fit-content;margin:0 auto;justify-content: center;}
.sub-com .menu-dep2-tab li{width:205px;height:50px; margin: 0 0 0 -1px}

.sub-com .menu-dep2-tab li:last-child{border-right:none;}
.sub-com .menu-dep2-tab li a{display:flex;width:100%;height:100%;align-items: center;justify-content: center;background:#fff;font-weight:700; text-align: center; border:1px solid #aaa; box-sizing: border-box}
.sub-com .menu-dep3-tab{position:sticky;top:0;z-index:89;width:100%;height:84px;background:#fff;box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.12);}
.sub-com .menu-dep2-tab li.active a{background:var(--bk); color: #fff} */

.sub-com .menu-dep2-tab{position:relative;top:-50px;z-index:2;}
.sub-com .menu-dep2-tab ul{width:fit-content;margin:0 auto;justify-content: center;}
.sub-com .menu-dep2-tab li{position:relative;width:205px;height:50px; margin: 0 0 0 -1px;}
.sub-com .menu-dep2-tab li:last-child{border-right:none;}
.sub-com .menu-dep2-tab li a{display:flex;width:100%;height:100%;align-items: center;justify-content: center;background:transparent;font-weight:700; text-align: center; box-sizing: border-box;color:#fff;border-radius: 20px 20px 0 0;}
/* 
.sub-com .menu-dep2-tab li:hover a{background:#fff; color: #000}
.sub-com .menu-dep2-tab li.active a{background:#fff; color: #000} */

.sub-com .menu-dep2-tab li.active{background:#fff;color:#000;border-radius: 20px 20px 0 0;}
.sub-com .menu-dep2-tab li.active a{background:#fff;color:#000;}
.sub-com .menu-dep2-tab li.active::before{content: '';display: block;position: absolute;bottom: -3px;left: -20px;width: 21px;height: 50%;background:url('../img/common/tab_deco.png') no-repeat center center / contain;}

.sub-com .menu-dep2-tab li.active::after{content: '';display: block;position: absolute;bottom: -3px;right: -20px;width: 21px;height: 50%;background:url('../img/common/tab_deco.png') no-repeat center center / contain;transform: rotate(90deg);}

.sub-com .menu-dep2-tab li:hover{background:#fff;color:#000;border-radius: 20px 20px 0 0;}
.sub-com .menu-dep2-tab li:hover a{background:#fff;color:#000;}
.sub-com .menu-dep2-tab li:hover::before{content: '';display: block;position: absolute;bottom: -3px;left: -20px;width: 21px;height: 50%;background:url('../img/common/tab_deco.png') no-repeat center center / contain;}

.sub-com .menu-dep2-tab li:hover::after{content: '';display: block;position: absolute;bottom: -3px;right: -20px;width: 21px;height: 50%;background:url('../img/common/tab_deco.png') no-repeat center center / contain;transform: rotate(90deg);}


.sub-com .menu-dep3-tab{position:sticky;top:0;z-index:89;width:100%;height:84px;background:#fff;}
.sub-com .menu-dep3-tab-in{height:100%;gap:50px;}
.sub-com .menu-dep3-tab .menu-dep3-tit{font-size: var(--font25);font-weight: 600;color: var(--bk);font-weight:700; flex-shrink: 0}
.sub-com .menu-dep3-tab ul{height:100%;gap:30px;}
.sub-com .menu-dep3-tab li{display:flex;position:relative;align-items: center;height:100%;}
.sub-com .menu-dep3-tab li a{font-size: var(--font20);color: var(--gray-85);font-weight:500;}
.sub-com .menu-dep3-tab li.active a{color: var(--bk);}
.sub-com .menu-dep3-tab li.active::after{content:'';display:block;position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--bk);}

.sub-com .menu-dep4-tab{position:relative; z-index:2; width: 100%}
.sub-com .menu-dep4-tab ul{width:100%;margin:0 auto;justify-content: center; gap:10px}
.sub-com .menu-dep4-tab li{width: 100%;height:50px;}
.sub-com .menu-dep4-tab li:last-child{border-right:none;}
.sub-com .menu-dep4-tab li a{display:flex;width:100%;height:100%;align-items: center;justify-content: center;background:#fff;border:1px solid var(--bk); text-align: center; border-radius: 10px; font-weight: 600}
.sub-com .menu-dep4-tab li.active a{background:var(--gray-939); color: #fff}


/**/
body:has(.sub-page-tit) #container_title{display:none;}
.sub-com .sub-page-tit {text-align: center;}
.sub-com .sub-page-tit h2{font-family: var(--eng), var(--kor);font-size: var(--font60);color: var(--bk);font-weight:500;text-transform: uppercase;}
.sub-com .sub-page-tit h3{font-family: var(--eng), var(--kor);font-size: var(--font45);color: var(--bk);font-weight:500;text-transform: uppercase;}
.sub-com .sub-page-tit p{margin-top:5px;font-size:var(--font20);letter-spacing: -1px;font-weight:300;}
.sub-com .sub-contents{padding-top:var(--gap-sub);}
.sub-com .sub-con-tit{margin-bottom:var(--gap-md);text-align: center;}
.sub-com .sub-con-tit.Left {text-align: left}
.sub-com .sub-con-tit h3{font-family:var(--kor);font-size: var(--font45);font-weight:500;color:var(--bk);text-transform: uppercase; letter-spacing: -.03em}
.sub-com .sub-con-tit h4{font-family: var(--eng), var(--kor);font-size: var(--font32);font-weight:500;color:var(--bk);text-transform: uppercase;}
.sub-com .sub-con-tit strong {font-weight: bold; font-size: var(--font20)}
.sub-page-tit.cs h2 {letter-spacing: -.03em}

/* 탭 */
.tab_content {display: flex; align-items: center; gap: 10px; margin-bottom: var(--gap-md)}
.tab_content a {display: flex; align-items: center; justify-content: center; height: 50px; border: 1px solid var(--bk); border-radius: 10px}
.tab_content li.on a {background: #939598; color: #fff}
.tab_content.nine li {width: calc(100% / 9)}

/* 블럭 링크 */
.block_link {display: flex; gap: 20px; flex-wrap: wrap;}
.block_link .block {width: calc(100% / 3); flex: 1 1 30%; }
.block_link .block a {display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; aspect-ratio: 414 / 147; background: #F5F5F5; flex-direction: column; cursor: pointer}
.block_link .block .icon {display: block; width: 45px; height: 45px;}
.block_link .block p {display: flex; align-items: center; justify-content: center; height: 40px; font-size: var(--font16)}
.block_link .block:nth-child(1) .icon {background:url('../img/pages/bespoke/intro/icon_link01.png') no-repeat center center / contain;}
.block_link .block:nth-child(2) .icon {background:url('../img/pages/bespoke/intro/icon_link02.png') no-repeat center center / contain;}
.block_link .block:nth-child(3) .icon {background:url('../img/pages/bespoke/intro/icon_link03.png') no-repeat center center / contain;}
.block_link .block:nth-child(4) .icon {background:url('../img/pages/bespoke/intro/icon_link04.png') no-repeat center center / contain;}
.block_link .block:nth-child(5) .icon {background:url('../img/pages/bespoke/intro/icon_link05.png') no-repeat center center / contain;}
.block_link .block:nth-child(6) .icon {background:url('../img/pages/bespoke/intro/icon_link06.png') no-repeat center center / contain;}


.menu-dep3-tab .menu-dep3-dropdown { display: none; position: relative; }

.menu-dep3-tab .menu3-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  background: #fff;
  gap: 10px;
  font-weight: 800;
  cursor: pointer;
}

.menu-dep3-tab .menu3-btn .arrow {
  transform: rotate(180deg);
  line-height: 1;
  transition: transform 0.25s ease;
}
.menu-dep3-tab .menu3-btn.active .arrow { transform: rotate(0deg); }

.menu-dep3-tab .menu3-list {
  display: none;
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  overflow: hidden;
  z-index: 10;
  width: calc(100vw - 42px);
}

.menu-dep3-tab .menu3-btn .current {
  font-size: var(--font16);
  font-weight: 700;
}

.menu-dep3-tab .menu3-list.open { display: block; }

.menu-dep3-tab .menu3-list li a {
  display: block;
  padding: 10px 12px;
  color: #333;
  font-weight: 600;
  text-decoration: none;
}

.menu-dep3-tab .menu3-list li.active a {
  background: var(--bk);
  color: #fff;
}


.sub-com p.sub-page-sub-tit{font-size:var(--font25);}

/*반응형*/


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

	.sub-com .sub-visual {height: 50vw}
	.sub-com .menu-dep2-tab li {width: 180px}

}

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

  .page_header {padding: 15px 0;}
  .sub-com .menu-dep2-tab ul {width: calc(100% - 80px);}
  #magazine.sub-com .menu-dep2-tab li {width: calc(100% / 5)}
  .sub-com .menu-dep3-tab {height: 60px;}
  .block_link .block a {aspect-ratio: 16 / 7;}
  #history .menu-dep3-tab .menu3-btn {background: none; color: #fff}
  #history .menu-dep3-tab .menu3-btn .arrow img {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(152deg) brightness(103%) contrast(103%);}
  .sub-com .menu-dep3-tab .menu-dep3-tit {display: none}
  .menu-dep3-tab .menu3-list {width: calc(100vw - 100px);}
}

@media screen and (min-width:769px){
}

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

	.block_link {gap:16px;}
	.block_link .block {width: 50%; flex: 1 1 40%;}
	
	.sub-com .sub-visual {height: 60vw}
	.sub-com .sub-visual.tit_style h2 {font-size: 28px}
	.sub-com .menu-dep2-tab li {width: auto;padding:0 15px;}
	.sub-com .menu-dep2-tab ul {width: calc(100% - 32px);}
	.sub-com .menu-dep2-tab li a {font-size: 14px}
	
	.sub-com .menu-dep3-tab .menu-dep3-tit {display: none}
	.sub-com .menu-dep3-tab ul {overflow-x: auto}
	.sub-com .menu-dep3-tab li {flex-shrink: 0}
	.sub-com .menu-dep3-tab li a {font-size: 14px}
  
  .menu-dep3-tab .menu3-list {width: calc(100vw - 44px);}

  .menu-dep4-tab {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scroll-behavior: smooth;
  }
  .inner:has(>.menu-dep4-tab){padding:0;}
  .sub-com .menu-dep4-tab ul{width:max-content;gap:10px;}
  .sub-com .menu-dep4-tab li:first-child{margin-left:16px;}
  .sub-com .menu-dep4-tab li:last-child{margin-right:16px;}
  .sub-com .menu-dep4-tab li{height:30px;}
  .sub-com .menu-dep4-tab li a{padding:0 10px;font-size:12px;}
  
  /* .menu-dep4-tab ul {
    gap: 8px;
    padding: 0 10px;
    margin: 0;
  }
  
  .menu-dep4-tab li {
    list-style: none;
    flex-shrink: 0;
  }
  
  .menu-dep4-tab li a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #000;
    border-radius: 20px;
    text-decoration: none;
    color: #000;
    white-space: nowrap;
  }
  
  .menu-dep4-tab li.active a {
    background: #000;
    color: #fff;
  } */
	
}	

@media screen and (max-width:500px){
	.sub-page-tit {padding: var(--gap-sub) 0 }
	.sub-page-tit .title {font-size: 26px}
	
	#magazine.sub-com .menu-dep2-tab ul {width: 100%; justify-content: flex-start; overflow-x: auto}
	#magazine.sub-com .menu-dep2-tab li {width: 150px;padding:5px; flex-shrink: 0;}
	.sub-com .sub-visual.tit_style h2 {font-size: 4vw}
	
	.sub-com .sub-page-tit p {font-size: 14px; line-height: 1.5}
	.sub-com .menu-dep2-tab li {height: 30px}
	.sub-com .menu-dep2-tab li a {font-size: 12px}
	.sub-com .menu-dep2-tab {top:-30px}
	.sub-com .sub-con-tit {margin-bottom: 20px}
	.sub-com .sub-con-tit h3 {font-size: 22px; font-weight: 700;}
	
	.block_link .block {width: 100%; flex: 1 1 100%;}
	.block_link .block a {aspect-ratio: 16 / 5;}


  /* .sub-com .menu-dep2-tab li.active::before{bottom: -3px;left: -10px;width: 11px;}
  .sub-com .menu-dep2-tab li.active::after{bottom: -3px;right: -10px;width: 11px;}
  .sub-com .menu-dep2-tab li:hover,
  .sub-com .menu-dep2-tab li.active{border-radius: 10px 10px 0 0;}
  .sub-com .menu-dep2-tab li:hover::before{bottom: -3px;left: -10px;width: 11px;}
  .sub-com .menu-dep2-tab li:hover::after{bottom: -3px;right: -10px;width: 11px;} */
  .sub-com .menu-dep2-tab li.active::before{bottom: -1px;left:-16px;}
  .sub-com .menu-dep2-tab li.active::after{bottom: -1px;right:-16px;}
  .sub-com .menu-dep2-tab li:hover,
  .sub-com .menu-dep2-tab li.active{border-radius: 15px 15px 0 0;}
  .sub-com .menu-dep2-tab li:hover::before{bottom: -1px;left:-16px;}
  .sub-com .menu-dep2-tab li:hover::after{bottom: -1px;right:-16px;}

	
}



@media (min-width:1025px) {
  .menu-dep3-tab .menu-dep3-dropdown { display: none !important; }
}

@media screen and (max-width:1024px) {
  .menu-dep3-tab .menu-dep3-tab-in ul { display: none; }
  .menu-dep3-tab .menu-dep3-dropdown { display: block; }
  .menu-dep3-tab { height: 54px; }
  .menu-dep3-tab .menu-dep3-tab-in { display: flex; align-items: center; }
	.sub-com .menu-dep3-tab ul{height:auto;}
	.menu-dep3-tab .menu3-list li a{width:100%;}

}