/* sub top */
.subpage_top_wrap {position:relative; width:100%; height:220px; background:#9c988f; overflow:hidden;}

/* db */
#db-container {position:absolute; width:100%; height:600px; left:0px; top:-200px; overflow:hidden;}
.db-obj {position: absolute; will-change: transform; /* 애니메이션 성능 최적화 */}
#objA {width:385px; height:385px; background:url("../img/main/m_cir_1.png") no-repeat 50% 50%; background-size:cover; opacity:.6;}
#objB {width:254px; height:254px; background:url("../img/main/m_cir_2.png") no-repeat 50% 50%; background-size:cover; opacity:.8;}
#objC {width:254px; height:254px; background:url("../img/main/m_cir_3.png") no-repeat 50% 50%; background-size:cover; opacity:.8;}

.subpage_path {position:absolute; height:20px; left:50px; bottom:30px;}
.subpage_path ul li {position:relative; float:left; height:20px;}
.subpage_path ul li.path_home {width:17px; height:20px; background:url("../img/sub/home.svg") no-repeat 0% 100%; background-size:17px;}
.subpage_path ul li.path_home a {display:block; width:17px; height:20px;}
.subpage_path ul li.path_arr {width:16px; height:20px; background:url("../img/sub/path_arr.svg") no-repeat 6px 9px; background-size:5px; opacity:.7;}
.subpage_path ul li.path_txt a {display:block; font-size:16px; color:rgba(255,255,255,.9); letter-spacing:-0.8px; line-height:100%; padding-top:6px;}
.subpage_path ul li.path_txt a:hover {color:#fff;}

/* PC menu */
.subpage_menu_wrap {position:absolute; width:260px; height:400px; left:50px; top:270px; box-shadow:0px 10px 20px rgba(0,0,0,.1); z-index:500; background:url("../img/sub/sub_bg_1.png") no-repeat 0% 100%;}
.subpage_menu_tit {position:relative; width:100%; height:100px; background:url("../img/sub/sub_bg_2.png") no-repeat 0% 0%; font-size:19px; color:#fff; font-weight:600; letter-spacing:-0.5px; line-height:100px; padding-left:30px;}
.subpage_menu_txt {position:relative; width:100%; height:300px; padding:30px 0px 0px 30px; border:solid 1px rgba(0,0,0,.05); border-top:none;}
.subpage_menu_txt ul li {position:relative; width:100%; height:30px; margin-bottom:8px;}
.subpage_menu_txt ul li a {display:inline-block; height:30px; font-size:17px; color:#666; letter-spacing:-0.5px; line-height:30px; font-weight:400; transition:all 0.3s ease 0s;}
.subpage_menu_txt ul li a.menu_active {color:#000; font-weight:600;}
.subpage_menu_txt ul li a:hover {color:#000;}

.subpage_cont_wrap {position:relative; width:100%; min-height:800px; background:#fff; padding:50px 50px 100px 380px;}
.subpage_cont_tit {position:relative; width:100%; height:100px; border-bottom:solid 1px #e2e2e2; font-size:22px; color:#000; letter-spacing:-1px; line-height:100%; font-weight:600; padding-top:47px;}

/* mobile menu */
.subpage_menu_mobwrap {position:relative; background:#fff; padding-top:30px; padding-left:20px; white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling: touch; display:none;}
/* Chrome, Safari, Opera에서 스크롤바 숨기기 */
.subpage_menu_line {position:absolute; width:100%; height:1px; left:0px; bottom:0px; background:rgba(0,0,0,.1);}
.subpage_menu_mobwrap::-webkit-scrollbar {
  display: none; 
}
/* IE, Edge, Firefox에서 스크롤바 숨기기 */
.subpage_menu_mobwrap {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}
.menu-item {	
  display:inline-block;
  color: #666 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing:-0.8px !important;	
  transition: color 0.2s ease;
  margin-right:20px;
  padding-bottom:8px;
}
.menu-item.active {
  color: #000 !important;
  font-weight: 600 !important;
  position: relative;	
}

/* 활성화된 메뉴 밑줄 효과 */
.menu-item.active::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 3px;
  background-color: #000;	
}




@media screen and (max-width: 1200px) {
	.subpage_path {height:20px; left:20px;}
	.subpage_menu_wrap {left:20px;}
	.subpage_cont_wrap {padding:50px 20px 100px 350px;}
}

/* ==========================================
   2. 태블릿 스타일 (768px ~ 1024px)
   - 아이패드, 갤럭시 탭 등
   ========================================== */
@media screen and (max-width: 1024px) {
	.subpage_top_wrap {position:relative; width:100%; height:170px; background:#9c988f; overflow:hidden;}
	.subpage_path ul li.path_home {width:15px; background-size:15px;}
	.subpage_path ul li.path_home a {width:15px;}
	.subpage_path ul li.path_arr {width:16px; background:url("../img/sub/path_arr.svg") no-repeat 6px 10px; background-size:5px;}
	.subpage_path ul li.path_txt a {font-size:15px; padding-top:7px; color:#fff;}
	
	#db-container {position:absolute; width:100%; height:450px; left:0px; top:-100px; overflow:hidden;}
	.db-obj {position: absolute; will-change: transform; /* 애니메이션 성능 최적화 */}
	#objA {width:280px; height:280px; background:url("../img/main/m_cir_1.png") no-repeat 50% 50%; background-size:cover; opacity:.6;}
	#objB {width:160px; height:160px; background:url("../img/main/m_cir_2.png") no-repeat 50% 50%; background-size:cover; opacity:.8;}
	#objC {width:160px; height:160px; background:url("../img/main/m_cir_3.png") no-repeat 50% 50%; background-size:cover; opacity:.8;}
	
	.subpage_menu_mobwrap {display:block;}
    .subpage_menu_wrap {display:none;}
	
    .subpage_cont_wrap {padding:50px 20px 80px 20px; min-height:600px;}
	.subpage_cont_tit {height:auto; font-size:18px; letter-spacing:-0.5px; padding-top:10px; padding-bottom:17px;}
	
}


/* ==========================================
   3. 모바일 스타일 (767px 이하)
   - 스마트폰 세로/가로 모드
   ========================================== */
@media screen and (max-width: 767px) {
	.subpage_cont_wrap {padding:40px 20px 80px 20px; min-height:540px;}
}