@charset "utf-8";
/**************************** 헤더 ************************************/
  /* 1. 로고 이미지와 홈페이지 제목을 가로로 나란히 배치 */
  .head_logo a {
	  display: flex !important;
	  align-items: center !important; /* 세로 중앙 정렬 (하단에 맞추려면 flex-end 로 변경) */
	  gap: 10px !important; /* 로고와 텍스트 사이의 간격 (원하는 대로 조절) */
	  text-decoration: none !important;
  }

  /* 2. 홈페이지 제목(Sogang Outbound) 폰트 스타일 및 크기 축소 */
  .head_logo a span {
	  display: block !important;
	  font-size: 18px !important; /* 텍스트 크기 축소 (공간에 맞춰 16px~20px 사이로 조절해보세요) */
	  font-weight: 700 !important; /* 글씨 굵게 */
	  white-space: nowrap !important; /* 가로 공간이 부족해도 텍스트가 밑으로 떨어지지 않게 고정 */
	  letter-spacing: -0.5px; /* 자간을 살짝 줄여서 공간 확보 */
  }

  /* 3. (선택) 가로 공간이 부족해서 메뉴가 밑으로 떨어지거나 겹칠 때: 메뉴 간격 축소 */
  #top_k2wiz_GNB > li {
	  /* 기존 CMS 설정에 따라 여백이 margin이나 padding으로 들어가 있을 수 있습니다. */
	  /* 아래 수치를 조절하여 메뉴 사이의 간격을 좁혀보세요. */
	  padding-left: 15px !important; 
	  padding-right: 15px !important;
  }

/*************************** inbound 메인 배너 (꽉 채우기 수정) ******************************/

  /* 1. 최상위 부모 컨테이너 가림 해제 및 안쪽 여백(padding) 제거 (이전과 동일) */
  #multipleContentsDiv_template_10_6 {
	  overflow: visible !important;
	  padding-top: 0 !important; 
  }

  /* 2. 위젯 컨테이너 가림 해제 및 하단 여백 확보 (이전과 동일) */
  #menu1874_obj48 {
	  overflow: visible !important;
	  margin-bottom: 60px !important; 
  }

  /* 3. 메인 배너 영역 화면 전체 확장 및 배경색 제거 (수정됨) */
  #menu1874_obj48 .dummyImageDataList {
	  width: 100vw !important;
	  max-width: 100vw !important;
	  /* 1280px 중앙에서 브라우저 양끝으로 밀어내는 계산식 */
	  margin-left: calc(-50vw + 50%) !important;
	  margin-right: calc(-50vw + 50%) !important; 
	  left: 0 !important;
	  right: 0 !important;
	  /* 이미지가 꽉 채울 것이므로 배경색은 투명하게 설정 */
	  background-color: transparent !important; 
  }

  /* 4. 혹시 모를 가로 스크롤바 방지 (CMS 상황에 맞춰 body 클래스 확인 필요) */
  body {
	  overflow-x: hidden;
  }

  /* 5. 핵심: 이미지로 컨테이너 꽉 채우기 및 아랫부분 자르기 (대폭 수정) */
  #menu1874_obj48 .imageDataList li img.imageInfo {
	  /* 🎨 데스크탑 배너 높이: 이미지가 가로로 늘어난 만큼 잘 보일 수 있도록 넉넉하게 잡는 것을 추천합니다. */
	  height: 800px !important; 
	  width: 100% !important; /* 이미지 너비 100% 고정 */

	  /* 🌟 핵심 속성: 비율을 유지하며 컨테이너 영역을 빈틈없이 꽉 채움. 
		 넘치는 부분은 잘라냅니다. (이전 contain에서 cover로 변경) */
	  object-fit: cover !important; 

	  /* 🌟 핵심 속성: "아랫부분을 자르기" 위해 이미지의 초점을 위쪽 정중앙에 맞춤. 
		 위쪽은 살아남고 아랫부분이 잘립니다. */
	  object-position: top center !important; 
  }

@media (min-width:1281px){
  /********************메뉴 커스텀영역************************/
  body.inbound .menuUItop{
    --mega-link-size: clamp(13px, 1.1vw, 17px);
    --mega-item-gap: clamp(8px, 0.9vw, 14px);
    --mega-line-nudge: 0px;
  }

  body.inbound header,
  body.inbound .head_navi{
    position: relative;
  }

  body.inbound .menuUItop{
    position: relative;
    overflow: visible !important;
    z-index: 300;
  }

  body.inbound .menuUItop .div_2{
    display: none !important;
  }

  /* 배경 레이어 - 흰색, 상단 경계선 #861f1c */
  body.inbound .inbound-mega-bg{
    position: fixed;
    left: 50vw;
    top: var(--inbound-mega-top, 0px);
    transform: translateX(-50%);
    width: 100vw;
    height: 0;
    background: #ffffff;
    border-top: 2px solid #861f1c;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    opacity: 0;
    visibility: hidden;
    transition: height .28s ease, opacity .2s ease, visibility .2s ease;
    z-index: 301;
    pointer-events: none;
    overflow: hidden;
  }

  /* 실제 메뉴 */
  body.inbound .inbound-mega-menu{
    position: fixed;
    left: 50vw;
    top: var(--inbound-mega-top, 0px);
    transform: translate(-50%, 16px);
    width: 100vw;
    box-sizing: border-box;

    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;

    padding-top: 32px;
    /*padding-bottom: 40px;*/
    padding-left: clamp(40px, 6vw, 120px);
    padding-right: clamp(40px, 6vw, 120px);

    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .28s ease, visibility .22s ease;
    z-index: 302;
    pointer-events: none;
  }

  /* 열렸을 때 */
  body.inbound .menuUItop.inbound-mega-open .inbound-mega-bg{
    height: var(--inbound-mega-height, 200px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.inbound .menuUItop.inbound-mega-open .inbound-mega-menu{
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }

  /* 서브 컬럼 (4개씩 세로 묶음) */
  body.inbound .inbound-sub-col{
    padding: 0 32px !important;
    margin: 0 !important;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
  }

  /* 2번째 컬럼부터 왼쪽 구분선 */
  body.inbound .inbound-sub-col + .inbound-sub-col::before{
    content: "";
    position: absolute;
    left: 0;
    top: calc(-32px);
    height: calc(var(--inbound-mega-height, 200px));
    border-left: 1px solid rgba(134, 31, 28, 0.2);
    pointer-events: none;
  }

  /* 리스트 */
  body.inbound .inbound-sub-col ul{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.inbound .inbound-sub-col li{
    margin: 0 0 var(--mega-item-gap) 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: block !important;
    float: none !important;
  }

  body.inbound .inbound-sub-col li:last-child{
    margin-bottom: 0 !important;
  }

  /* 소메뉴 링크 - 진한 회색, 호버 시 #861f1c */
  body.inbound .inbound-sub-col a{
    display: block !important;
    font-size: var(--mega-link-size) !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    color: #555 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color .15s ease !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  body.inbound .inbound-sub-col a:hover{
    color: #861f1c !important;
  }

  body.inbound header{
    z-index: auto;
  }
}

@media (max-width:1280px){
  body.inbound .inbound-mega-bg,
  body.inbound .inbound-mega-menu{
    display: none !important;
  }

  body.inbound .menuUItop{
    overflow: visible !important;
  }

  body.inbound .menuUItop.inbound-mega-open{
    overflow: visible !important;
  }
}
/***************메뉴 디자인 끝*********************/

  /* --- 모바일 해상도 (768px 이하) 전용 스타일 (수정됨) --- */
 @media screen and (max-width: 768px) {
	 /* 모바일에서는 세로 화면이 좁으므로 고정 높이(750px)를 해제하여 
		이미지가 잘리는 양을 줄여줍니다. (비율대로 축소됨) */
	 #menu1874_obj48 .imageDataList li img.imageInfo {
		 height: auto !important; 
		 /* 모바일에서도 윗부분을 기준으로 정렬 */
		 object-position: top center !important; 
	 }

	 /* 모바일용 하단 여백 축소 */
	 #menu1874_obj48 {
		 margin-bottom: 30px !important; 
	 }
 }