@charset "UTF-8";
/* ============ patinex.unionz.io n26 header / full_menu (동일 이식) ============ */

/* 전체메뉴 오버레이 */
.n26_full_menu{ position: fixed; z-index: 400; top: 0; right: -100%; bottom: 0; left: 100%; background: rgba(0,0,0,.8);}
.n26_full_menu .inner{ overflow: auto; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 10; top: 0; right: -100%; bottom: 0; left: 100%; max-width: 100%; width: 100%; background: #FFF; transition: all .3s;}
.n26_full_menu .close{ position: absolute; z-index: 20; top: 0; right: 0; width: 120px; height: 120px; background: #000; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.n26_full_menu .close svg{ width: 30px; height: 30px;}
.n26_full_menu .close svg path{ color: #FFF;}
.n26_full_menu .logo{ display: block; position: absolute; z-index: 20; top: 35px; left: 60px; height: 50px;}
.n26_full_menu .logo img{ display: block; width: auto; height: 100%;}
.n26_full_menu .menu{ width: 100%; }
.n26_full_menu .menu > ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 60px 5%; position: relative; z-index: 10; width: 100%; max-width: 1600px; padding:120px 60px 0 60px; margin:0 auto; box-sizing: border-box; list-style:none;}
.n26_full_menu .menu > ul > li{ position: relative; width: 30%; list-style:none;}
.n26_full_menu .menu > ul > li > a{ display: flex; justify-content: center; align-items: center; position: relative; max-width: 220px; margin: 0 auto; padding: 0 30px 20px 30px; border-bottom: 1px solid #DDD; background: url(/images/2026/user/sub/n26_on.png) no-repeat right 30px top; background-size: 20px auto; font-size: 24px; font-weight: 700; color: #000; transition: all .2s;}
.n26_full_menu .menu > ul > li > ul{ padding-top: 20px; padding-left:0; margin:0; list-style:none;}
.n26_full_menu .menu > ul > li > ul li a{ display: flex; justify-content: center; align-items: center; height: 40px; font-size: 16px; color: #000; transition: all .2s;}
.n26_full_menu .menu > ul > li > ul li a:hover{ color: #e30713;}
.n26_full_menu.on .inner{ right: 0; left: 0;}

/* 헤더 */
.n26_header{ display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 300; top: 0; right: 0; left: 0; height: 120px; box-shadow: none; transition: all .2s;}
.n26_header .logo{ display: block; position: relative; z-index: 10; margin-left: 60px; height: 50px;}
/* width:auto 필수 - /css/2023/user/common.css 의 전역 img{width:100%} 때문에
   비워두면 로고가 가로로 늘어난다 (2026-08-04) */
.n26_header .logo img{ display: block; width: auto; height: 100%; transition: all .2s;}
.n26_header .logo img:nth-child(1){ opacity: 1;}
.n26_header .logo img:nth-child(2){ opacity: 0; position: absolute; z-index: 10; top: 0; left: 0;}
.n26_header .menu{ position: absolute; top: 0; left: 50%; transform: translate(-50%,0);}
.n26_header .menu > ul{ display: flex; position: relative; z-index: 10; padding:0; margin:0; list-style:none;}
.n26_header .menu > ul > li{ position: relative; list-style:none;}
.n26_header .menu > ul > li > a{ display: flex; align-items: center; position: relative; padding: 0 30px; height: 120px; font-size: 20px; font-weight: 500; color: #FFF; transition: all .2s; text-decoration:none;}
.n26_header .menu > ul > li > a::before{ content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: #e30713; opacity: 0; transition: all .2s;}
.n26_header .menu > ul > li:hover > a::before{ opacity: 1;}
.n26_header .menu > ul > li > ul{ overflow: hidden; position: absolute; top: 120px; right: 0; left: 0; padding: 0; height: 0; transition: all .2s; margin:0; list-style:none;}
.n26_header .menu > ul > li > ul li a{ display: flex; justify-content: center; align-items: center; height: 40px; font-size: 16px; color: #666; transition: all .2s; text-decoration:none; white-space:nowrap;}
.n26_header .menu > ul > li > ul li a:hover{ color: #e30713;}
.n26_header .menu .bg{ overflow: hidden; position: absolute; top: 120px; right: -3000px; left: -3000px; height: 0; background: rgba(255,255,255,.8); backdrop-filter: blur(20px); transition: all .2s;}
.n26_header .menu .bg::after{ content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: rgba(0,0,0,.1);}
.n26_header .menu:hover > ul > li > ul{ padding: 20px 0; height: 200px;}
.n26_header .menu:hover .bg{ height: 200px; box-shadow: 0 1px 0 0 rgba(0,0,0,.1);}
.n26_header .fr{ display: flex; align-items: center; gap: 30px;}
.n26_header .fr .login a{ display: block; cursor: pointer;}
.n26_header .fr .login a svg{ width: 30px; height: 30px; color:#fff;}
.n26_header .fr .language{ position: relative; height: 40px;}
.n26_header .fr .language .head{ display: flex; align-items: center; gap: 5px; height: 40px; cursor: pointer;}
.n26_header .fr .language .head svg:nth-child(1){ display: block; width: 30px; height: 30px; color:#fff;}
.n26_header .fr .language .head p{ font-size: 14px; color: #FFF; margin:0;}
.n26_header .fr .language .head svg:nth-child(3){ display: block; margin-left: 5px; width: 10px; height: 10px; transition: all .2s; color:#fff;}
.n26_header .fr .language .body{ overflow: hidden; display: grid; gap: 5px; position: absolute; top: 35px; right: 0; left: 0; padding: 0 10px; height: 0; border-radius: 20px; background: rgba(0,0,0,.5); backdrop-filter: blur(20px); transition: all .2s;}
.n26_header .fr .language .body a{ overflow: hidden; display: flex; justify-content: center; align-items: center; height: 0; border-radius: 20px; font-size: 12px; color: rgba(255,255,255,.8); cursor: pointer; transition: all .2s; text-decoration:none;}
.n26_header .fr .language .body a:hover{ background: #FFF; color: #000;}
.n26_header .fr .language:hover .head svg:nth-child(3){ transform: rotate(180deg);}
.n26_header .fr .language:hover .body{ top: 40px; padding: 10px; height: auto;}
.n26_header .fr .language:hover .body a{ height: 25px;}
.n26_header .fr .full_menu_btn{ margin-left: 30px;}
.n26_header .fr .full_menu_btn a{ display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; background: #482383; cursor: pointer;}
.n26_header .fr .full_menu_btn a svg{ width: 30px; height: 30px; color:#fff;}
/* 햄버거 옆 유틸: 로그인/회원가입/마이페이지 + KOR/ENG (patinex.unionz.io 동일) */
.n26_header .fr .fr_btn{ display: flex; gap: 30px;}
.n26_header .fr .fr_btn a{ display: flex; align-items: center; gap: 5px; text-decoration: none;}
.n26_header .fr .fr_btn a svg{ width: 30px; height: 30px; color:#fff;}
.n26_header .fr .fr_btn a p{ font-size: 14px; color: #FFF; margin: 0;}
.n26_header .fr .fr_language{ display: flex; border-radius: 20px; border: 1px solid rgba(255,255,255,.2);}
.n26_header .fr .fr_language a{ display: flex; align-items: center; padding: 0 12px; height: 30px; border-radius: 20px; text-decoration: none;}
.n26_header .fr .fr_language a p{ font-size: 12px; color: rgba(255,255,255,.5); margin: 0;}
.n26_header .fr .fr_language a.open{ background: #FFF;}
.n26_header .fr .fr_language a.open p{ color: #000;}

/* main.do와 동일: gnb_view_at='N'(hide_gnb)은 숨기지 않음. use_at='N'/세션(menu_delete)만 common_site.js가 제거 */

/* 스크롤 시 흰 헤더 */
.n26_header.scroll{ background: #FFF; box-shadow: 0 1px 0 0 rgba(0,0,0,.1);}
.n26_header.scroll .logo img:nth-child(1){ opacity: 0;}
.n26_header.scroll .logo img:nth-child(2){ opacity: 1;}
.n26_header.scroll .menu > ul > li > a{ color: #000;}
.n26_header.scroll .fr .login a svg{ color: #000;}
.n26_header.scroll .fr .language .head svg:nth-child(1){ color: #000;}
.n26_header.scroll .fr .language .head p{ color: #000;}
.n26_header.scroll .fr .language .head svg:nth-child(3){ color: #000;}
.n26_header.scroll .fr .fr_btn a svg{ color: #000;}
.n26_header.scroll .fr .fr_btn a p{ color: #000;}
.n26_header.scroll .fr .fr_language{ border-color: rgba(0,0,0,.2);}
.n26_header.scroll .fr .fr_language a p{ color: rgba(0,0,0,.5);}
.n26_header.scroll .fr .fr_language a.open{ background: #000;}
.n26_header.scroll .fr .fr_language a.open p{ color: #FFF;}

@media(max-width: 1700px){
    .n26_header .menu{ display: none;}
}
@media(max-width: 1420px){
    .n26_header .logo{ margin-left: 30px;}
}
@media(max-width: 767px){
    .n26_header{ height: 60px;}
    .n26_header .logo{ margin-left: 10px; height: 24px;}
    .n26_header .fr{ gap: 10px;}
    .n26_header .fr .login a svg{ width: 20px; height: 20px;}
    .n26_header .fr .language{ height: 30px;}
    .n26_header .fr .language .head{ height: 30px;}
    .n26_header .fr .language .head svg:nth-child(1){ width: 20px; height: 20px;}
    .n26_header .fr .language .head svg:nth-child(3){ width: 6px; height: 6px;}
    .n26_header .fr .language .head p{ font-size: 11px;}
    .n26_header .fr .language .body{ top: 25px; border-radius: 15px;}
    .n26_header .fr .language:hover .body{ top: 30px;}
    .n26_header .fr .language:hover .body a{ height: 20px;}
    .n26_header .fr .fr_btn{ gap: 10px;}
    .n26_header .fr .fr_btn a{ gap: 5px;}
    .n26_header .fr .fr_btn a svg{ width: 20px; height: 20px;}
    .n26_header .fr .fr_btn a p{ font-size: 10px;}
    .n26_header .fr .fr_language a{ padding: 0 6px; height: 16px;}
    .n26_header .fr .fr_language a p{ font-size: 8px;}
    .n26_header .fr .full_menu_btn{ margin-left: 10px;}
    .n26_header .fr .full_menu_btn a{ width: 60px; height: 60px;}
    .n26_header .fr .full_menu_btn a svg{ width: 20px; height: 20px;}
    .n26_full_menu .close{ width: 60px; height: 60px;}
    .n26_full_menu .close svg{ width: 20px; height: 20px;}
    .n26_full_menu .logo{ top: 18px; left: 10px; height: 24px;}
    .n26_full_menu .menu > ul{ gap: 20px 10%; padding: 60px 10px 0 10px;}
    .n26_full_menu .menu > ul > li{ width: 45%;}
    .n26_full_menu .menu > ul > li > a{ padding: 0 0 10px 0; background-size: 10px auto; font-size: 18px;}
    .n26_full_menu .menu > ul > li > ul li a{ height: 24px; font-size: 12px;}
}
/* 데스크톱/태블릿: 화면 폭을 채우는 3컬럼 (빨간 삼각과 글자 간격 확보) */
@media(max-width: 1700px) and (min-width:768px){
    .n26_full_menu .menu > ul{ gap: 30px 5%; padding: 120px 60px 0 60px; max-width: 100%;}
    .n26_full_menu .menu > ul > li{ width: 30%;}
}
@media(max-width: 1000px) and (min-width:768px){
    .n26_full_menu .menu > ul{ gap: 30px 5%; padding: 120px 30px 0 30px; max-width: 100%;}
    .n26_full_menu .menu > ul > li{ width: 30%;}
}

/* ===== n26_sub_visual (서브 배너, 스테이징 동일) ===== */
.n26_sub_visual{ overflow:hidden; display:flex; flex-direction:column; justify-content:center; position:relative; padding-top:120px; height:400px; box-sizing:border-box; }
.n26_sub_visual .text{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; position:absolute; z-index:20; left:calc(50% - 650px); }
.n26_sub_visual .text .t1{ font-size:16px; font-weight:500; color:#FFF; }
.n26_sub_visual .text .t2 img{ display:block; width:auto; height:70px; }
.n26_sub_visual .text .t3{ font-size:16px; color:#FFF; }
.n26_sub_visual .text .t3 b{ font-size:16px; font-weight:500; color:#fbb03b; }
.n26_sub_visual .text .t4{ font-size:16px; font-weight:500; color:#FFF; }
.n26_sub_visual .text .t4 b{ font-weight:500; color:#fbb03b; }
.n26_sub_visual .logo{ display:flex; gap:30px; position:absolute; z-index:20; right:calc(50% - 650px); bottom:40px; }
.n26_sub_visual .logo img{ display:block; width:auto; height:30px; }
.n26_sub_visual .bg{ position:absolute; z-index:10; top:0; left:0; width:100%; height:400px; background:url(/images/2026/user/sub/n26_vbg.jpg) center/cover; }
.n26_sub_visual .bg img:nth-child(1){ display:block; position:absolute; z-index:2; left:50%; transform:translate(-50%,0); bottom:0; width:auto; height:260px; }
.n26_sub_visual .bg img:nth-child(2){ display:block; position:absolute; z-index:2; left:50%; transform:translate(-50%,0); bottom:0; width:auto; }
@media(max-width:1420px){
  .n26_sub_visual .text{ left:30px; }
  .n26_sub_visual .logo{ right:30px; }
}
@media(max-width:1000px){
  .n26_sub_visual .text .t1{ font-size:13px; }
  .n26_sub_visual .text .t2 img{ height:60px; }
  .n26_sub_visual .text .t3, .n26_sub_visual .text .t3 b, .n26_sub_visual .text .t4{ font-size:12px; }
  .n26_sub_visual .logo{ gap:20px; }
  .n26_sub_visual .logo img{ height:20px; }
}
@media(max-width:767px){
  .n26_sub_visual{ justify-content:flex-start; padding-top:60px; height:360px; }
  .n26_sub_visual .text{ gap:10px; top:90px; left:30px; }
  .n26_sub_visual .text .t1{ font-size:10px; }
  .n26_sub_visual .text .t2 img{ height:80px; }
  .n26_sub_visual .text .t3{ width:200px; line-height:1.5; font-size:12px; }
  .n26_sub_visual .text .t4{ width:160px; font-size:12px; }
  .n26_sub_visual .logo{ gap:15px; right:initial; bottom:30px; left:30px; }
  .n26_sub_visual .logo img{ height:20px; }
  .n26_sub_visual .bg{ height:360px; }
  .n26_sub_visual .bg img:nth-child(1){ left:56%; transform:translate(0,0); height:200px; }
  .n26_sub_visual .bg img:nth-child(2){ left:initial; right:0; transform:translate(0,0); height:100px; }
}

/* ===== n26_quick (우측/하단 플로팅 퀵바, 스테이징 동일) ===== */
.n26_quick{ display: flex; flex-direction: column; position: fixed; z-index: 310; top: 120px; right: 0; bottom: 0; width: 120px; background: rgba(0,0,0,.8); backdrop-filter: blur(20px);}
.n26_quick .dday{ display: flex; justify-content: center; align-items: center; height: 80px; background: #a00606; font-size: 24px; font-weight: 700; color: #FFF;}
.n26_quick .menu a{ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0; width: 100%; transition: all .2s; text-decoration:none;}
.n26_quick .menu a img{ display: block; width: auto; height: 30px; transition: all .2s;}
.n26_quick .menu a p{ font-size: 14px; color: #FFF; margin:0;}
.n26_quick .menu a:hover{ background: #482383;}
.n26_quick .menu a:hover img{ transform: scale(.8);}
.n26_quick .sns{ flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.15);}
.n26_quick .sns a{ display: block; transition: all .2s;}
.n26_quick .sns a img{ display: block; width: 40px; height: 40px;}
.n26_quick .sns a:hover{ transform: scale(.8);}
@media(max-width: 1700px){
    .n26_quick{ flex-direction: initial; justify-content: center; top: inherit; left: 0; width: auto; height: 80px;}
    .n26_quick .dday{ width: 100px;}
    .n26_quick .menu{ display: flex;}
    .n26_quick .menu a{ justify-content: center; padding: 0; width: 100px;}
    .n26_quick .menu a img{ height: 24px;}
    .n26_quick .menu a p{ font-size: 12px;}
    .n26_quick .sns{ flex: initial; flex-direction: initial; gap: 20px; padding-left: 30px; border-top: 0; border-left: 1px solid rgba(255,255,255,.15);}
    .n26_quick .sns a img{ width: 30px; height: 30px;}
}
@media(max-width: 767px){
    .n26_quick{ height: 3.5rem;}
    .n26_quick .dday{ width: 4rem; height: 3.5rem; font-size: 0.8rem;}
    .n26_quick .menu a{ gap: 0.4rem; width: 3.2rem;}
    .n26_quick .menu a img{ height: 1.2rem;}
    .n26_quick .menu a p{ font-size: 0.5rem;}
    .n26_quick .sns{ flex: 1; gap: 0.4rem; padding-left: 0;}
    .n26_quick .sns a img{ width: 1.2rem; height: 1.2rem;}
}

/* ===== n26_footer (서브 푸터, 스테이징 동일) ===== */
.n26_footer{ display: flex; flex-direction: column; align-items: center; padding: 100px 60px 120px 60px; background: url(/images/2026/user/sub/n26_fbg.jpg) center bottom/cover;}
.n26_footer .logo{ display: block; cursor: pointer;}
.n26_footer .logo img{ display: block; width: auto; height: 40px;}
.n26_footer .sns{ display: flex; gap: 10px; margin-top: 40px;}
.n26_footer .sns a{ display: block; transition: all .2s; cursor: pointer;}
.n26_footer .sns a img{ display: block; width: 30px; height: 30px;}
.n26_footer .sns a:hover{ transform: scale(.8);}
.n26_footer .btn2{ display: block; margin-top: 40px; font-size: 15px; color: #FFF; cursor: pointer; text-decoration:none;}
.n26_footer .info{ display: flex; flex-wrap: wrap; justify-content: center; gap: 15px 30px; margin-top: 30px; max-width: 500px;}
.n26_footer .info p{ font-size: 13px; color: rgba(255,255,255,.6); margin:0;}
.n26_footer .s_logo{ display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 30px; opacity: 0.8;}
.n26_footer .s_logo a{ display: block; height: 30px;}
.n26_footer .s_logo a img{ display: block; width: auto; height: 100%;}
.n26_footer .copy{ margin-top: 30px; font-size: 12px; color: rgba(255,255,255,.6); margin-bottom:0;}
@media(max-width: 1700px){
    .n26_footer{ padding: 100px 60px 200px 60px;}
}
@media(max-width: 767px){
    .n26_footer{ padding: 40px 10px calc(3.5rem + 40px) 10px;}
    .n26_footer .logo img{ height: 24px;}
    .n26_footer .sns{ margin-top: 20px;}
    .n26_footer .sns a img{ width: 20px; height: 20px;}
    .n26_footer .btn2{ margin-top: 20px; font-size: 13px;}
    .n26_footer .info{ gap: 10px 20px; margin-top: 20px;}
    .n26_footer .info p{ font-size: 11px;}
    .n26_footer .s_logo{ gap: 15px; margin-top: 20px;}
    .n26_footer .s_logo a{ height: 20px;}
    .n26_footer .copy{ margin-top: 20px; font-size: 10px;}
}

/* ===== 서브페이지 통합: 기존 헤더/푸터 숨김, 배너+본문 간격(스테이징 동일) ===== */
.is_sub #header{ display:none !important; }
.is_sub #footer{ display:none !important; }
.n26_sub_visual + div .contents,
.is_sub .contents{ padding-top:50px !important; }
@media(max-width:767px){
  .is_sub .contents{ padding-top:30px !important; }
}

/* ===== 인쇄(프린트) 전용: 고정 UI 숨기고 본문만 깔끔하게 ===== */
@media print {
  /* 고정/장식 요소 숨김 */
  .n26_header, .n26_full_menu, .n26_sub_visual, .n26_quick, .n26_footer,
  #header, #footer, .float_bar, .top_btn,
  .bread_box .btn_list, .sub_tab_nav_container, .sub_share_box { display: none !important; }

  /* 레이아웃 오프셋/클리핑 제거 */
  html, body { background:#fff !important; }
  #container, #fullpage, .contents, .is_sub .contents,
  .inner, .sub_cont, .bread_box { overflow: visible !important; padding-top: 0 !important; margin-top: 0 !important; }
  .is_sub .contents, .n26_sub_visual + div .contents { padding-top: 0 !important; }

  /* 배경/색상 그대로 인쇄 */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}