/*
 * Shared legacy header/navigation/popup stylesheet.
 * 기준: legacy head.php + HOME visual baseline.
 */

#header {
    position: relative;
    width: 1164px;
    margin: 0 auto;
    background: #fff;
    z-index: 10;
}

.top_header {
    position: relative;
    width: 1164px;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
}

.top_header>img {
    display: block;
    width: 1164px;
    max-width: none;
    height: auto;
    border: 0;
}

#header .logo {
    position: absolute;
    left: 0;
    top: 0;
    width: 240px;
    height: 90px;
    z-index: 300;
    display: block;
    margin: 0;
}

/* ==============================
   Shared Legacy Navigation
   기준: legacy head.php
   header_tops.jpg: 1164x136
   joo_m_bg.jpg: header_tops 바로 아래 출력
   menu band: top 136, height 40
   ============================== */
#header {
    --nav-left: 184px;
    --nav-top: 91px;

    --nav-w1: 114px;
    --nav-w2: 114px;
    --nav-w3: 114px;
    --nav-w4: 114px;
    --nav-w5: 114px;
    --nav-w6: 114px;
    --nav-w7: 114px;

    --sub-top: calc(var(--nav-top) + 48px);

    --sub-left-1: var(--nav-left);
    --sub-left-2: calc(var(--nav-left) + var(--nav-w1));
    --sub-left-3: calc(var(--nav-left) + var(--nav-w1) + var(--nav-w2) + 10px);
    --sub-left-4: calc(var(--nav-left) + var(--nav-w1) + var(--nav-w2) + var(--nav-w3));
    --sub-left-5: calc(var(--nav-left) + var(--nav-w1) + var(--nav-w2) + var(--nav-w3) + var(--nav-w4) + 8px);
    --sub-left-6: calc(var(--nav-left) + var(--nav-w1) + var(--nav-w2) + var(--nav-w3) + var(--nav-w4) + var(--nav-w5));
    --sub-left-7: calc(var(--nav-left) + var(--nav-w1) + var(--nav-w2) + var(--nav-w3) + var(--nav-w4) + var(--nav-w5) - 10px);
}

.legacy-menu-band {
    position: absolute;
    left: 0;
    top: 136px;
    width: 1164px;
    height: 40px;
    background: url("/images/too_bt.png") 0 0 no-repeat;
    z-index: 110;
    pointer-events: none;
}

#header .menu {
    position: absolute;
    left: var(--nav-left);
    top: var(--nav-top);
    z-index: 220;
    display: block;
    width: calc(var(--nav-w1) + var(--nav-w2) + var(--nav-w3) + var(--nav-w4) + var(--nav-w5) + var(--nav-w6) + var(--nav-w7));
    height: 40px;
    margin: 0;
    padding: 0;
    font-size: 0;
    white-space: nowrap;
}

#header .menu li {
    display: inline-block;
    height: 40px;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: top;
}

#header .menu li:nth-child(1) {
    width: var(--nav-w1);
}

#header .menu li:nth-child(2) {
    width: var(--nav-w2);
}

#header .menu li:nth-child(3) {
    width: var(--nav-w3);
}

#header .menu li:nth-child(4) {
    width: var(--nav-w4);
}

#header .menu li:nth-child(5) {
    width: var(--nav-w5);
}

#header .menu li:nth-child(6) {
    width: var(--nav-w6);
}

#header .menu li:nth-child(7) {
    width: var(--nav-w7);
}

#header .menu li a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 45px;
    color: #111;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.08em;
    text-decoration: none;
}

#header .menu li a:hover {
    color: #0067b1;
    text-decoration: none;
}

#header .menu li.is-active>a {
    color: #111;
}

.susususd>div {
    display: none;
    position: absolute;
    top: var(--sub-top);
    z-index: 600;
}

.susususd>div::before {
    position: absolute;
    left: 0;
    top: -12px;
    display: block;
    width: 100%;
    height: 12px;
    content: "";
    background: transparent;
}

.susususd>div.is-open {
    display: block;
}

#header .menu li.is-submenu-open>a {
    color: #0067b1;
}

.susususd>div:nth-child(1) {
    left: var(--sub-left-1);
}

.susususd>div:nth-child(2) {
    left: var(--sub-left-2);
}

.susususd>div:nth-child(3) {
    left: var(--sub-left-3);
}

.susususd>div:nth-child(4) {
    left: var(--sub-left-4);
}

.susususd>div:nth-child(5) {
    left: var(--sub-left-5);
}

.susususd>div:nth-child(6) {
    left: var(--sub-left-6);
}

.susususd>div:nth-child(7) {
    left: var(--sub-left-7);
}

.susususd img {
    display: block;
    max-width: none;
    pointer-events: none;
}

.susususd a {
    position: absolute;
    top: 0;
    display: block;
    height: 35px;
    background: transparent;
    z-index: 5;
}

/* m_sub_1.png: 314x35, 4 items */
.m_subs_1 {
    width: 314px;
    height: 35px;
}

.m_subs_1 .cc_1 {
    left: 0;
    width: 78.5px;
}

.m_subs_1 .cc_2 {
    left: 78.5px;
    width: 78.5px;
}

.m_subs_1 .cc_3 {
    left: 157px;
    width: 78.5px;
}

.m_subs_1 .cc_4 {
    left: 235.5px;
    width: 78.5px;
}

/* m_sub_2.png: 266x35, 3 items */
.m_subs_2,
.m_subs_3 {
    width: 266px;
    height: 35px;
}

.m_subs_2 .cc_5,
.m_subs_3 .cc_8 {
    left: 0;
    width: 88.666px;
}

.m_subs_2 .cc_6,
.m_subs_3 .cc_9 {
    left: 88.666px;
    width: 88.666px;
}

.m_subs_2 .cc_7,
.m_subs_3 .cc_10 {
    left: 177.332px;
    width: 88.668px;
}

/* m_sub_4.png: 249x35, 3 items */
.m_subs_4 {
    width: 249px;
    height: 35px;
}

.m_subs_4 .cc_11 {
    left: 0;
    width: 83px;
}

.m_subs_4 .cc_12 {
    left: 83px;
    width: 83px;
}

.m_subs_4 .cc_13 {
    left: 166px;
    width: 83px;
}

/* m_sub_5.png / m_sub_77.png: 177x35, 2 items */
.m_subs_5,
.m_subs_6 {
    width: 177px;
    height: 35px;
}

.m_subs_5 .cc_14,
.m_subs_6 .cc_14 {
    left: 0;
    width: 88.5px;
}

.m_subs_5 .cc_15,
.m_subs_6 .cc_15 {
    left: 88.5px;
    width: 88.5px;
}

/* m_sub_7777.png: 474x35, 7 items */
.m_subs_7 {
    width: 474px;
    height: 35px;
}

.m_subs_7 .cc_16 {
    left: 0;
    width: 67.714px;
}

.m_subs_7 .cc_17 {
    left: 67.714px;
    width: 67.714px;
}

.m_subs_7 .cc_18 {
    left: 135.428px;
    width: 67.714px;
}

.m_subs_7 .cc_19 {
    left: 203.142px;
    width: 67.714px;
}

.m_subs_7 .cc_20 {
    left: 270.856px;
    width: 67.714px;
}

.m_subs_7 .cc_21 {
    left: 338.57px;
    width: 67.714px;
}

.m_subs_7 .cc_22 {
    left: 406.284px;
    width: 67.716px;
}

/* ==============================
   Shared Legacy Popups
   기준: legacy head.php
   #chwpop   369x631 left 220 top 136
   #chwpop01 228x317 left 590 top 136
   #chwpop02 228x314 left 590 top 453
   ============================== */

#header {
    --popup-main-left: 220px;
    --popup-main-top: 136px;

    --popup-award-left: 590px;
    --popup-award-top-1: 136px;
    --popup-award-top-2: 453px;
}

.legacy-popup {
    position: absolute;
    z-index: 4444;
    background: #000;
    box-sizing: content-box;
    overflow: visible;
}

.legacy-popup-main {
    left: var(--popup-main-left);
    top: var(--popup-main-top);
    width: 369px;
    height: 631px;
}

.legacy-popup-award {
    left: var(--popup-award-left);
    width: 228px;
}

.legacy-popup-award-2023 {
    top: var(--popup-award-top-1);
    height: 317px;
}

.legacy-popup-award-2024 {
    top: var(--popup-award-top-2);
    height: 314px;
}

.legacy-popup img {
    max-width: none;
    border: 0;
    vertical-align: top;
}

#chwpop form {
    position: relative;
    width: 360px !important;
    height: 621px;
    margin: 5px auto 0 !important;
    padding: 0;
}

#chwpop #momove {
    display: block;
    width: 360px;
    max-width: none;
    cursor: move;
}

#chwpop01 #momove01 {
    display: block;
    width: 234px;
    height: 289px;
    max-width: none;
    cursor: move;
}

#chwpop02 #momove02 {
    display: block;
    width: 228px;
    height: 286px;
    max-width: none;
    cursor: move;
}

#chwpop input,
#chwpop textarea {
    box-sizing: border-box;
    border: 0;
    background: #fff;
    color: #222;
    font-size: 12px;
    line-height: 1.2;
    outline: none;
}

#chwpop input {
    padding: 0 2px;
}

#chwpop textarea {
    padding: 5px;
}

.legacy-popup .js-fake-submit,
.legacy-popup .js-popup-close {
    z-index: 50;
    cursor: pointer;
}

.legacy-popup .js-popup-close {
    text-decoration: none !important;
}

.legacy-popup .js-popup-close:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* ==============================
   Shared Legacy Popup Main Form Fine Tune
   ============================== */

#chwpop form p {
    margin: 0;
    padding: 0;
    position: absolute;
    line-height: 0;
}

#chwpop .popup-main-name {
    left: 65px;
    top: 470px;
    width: 65px;
    height: 18px;
    z-index: 20;
}

#chwpop .popup-main-phone-1 {
    left: 185px;
    top: 470px;
    width: 36px;
    height: 18px;
    z-index: 20;
}

#chwpop .popup-main-phone-2 {
    left: 234px;
    top: 470px;
    width: 35px;
    height: 18px;
    z-index: 20;
}

#chwpop .popup-main-phone-3 {
    left: 283px;
    top: 470px;
    width: 36px;
    height: 18px;
    z-index: 20;
}

#chwpop .popup-main-message {
    position: absolute;
    left: 65px;
    top: 500px;
    width: 252px;
    height: 55px;
    padding: 4px 5px;
    resize: none;
    z-index: 20;
}

#chwpop .popup-main-name input,
#chwpop .popup-main-phone input {
    display: block;
    width: 100%;
    height: 17px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    background: #fff;
    font-size: 12px;
    line-height: 20px;
    box-sizing: border-box;
}

#chwpop .popup-main-message {
    border: 0;
    background: #fff;
    color: #222;
    font-size: 12px;
    line-height: 1.2;
    box-sizing: border-box;
}

#chwpop .popup-main-name input:focus,
#chwpop .popup-main-phone input:focus,
#chwpop .popup-main-message:focus {
    outline: none;
}

.tt_t1,
.tt_t2 {
    position: absolute;
    left: 930px;
    width: 199px;
    margin: 0;
    padding: 0;
    z-index: 3500;
}

.tt_t1 {
    top: 26px;
}

.tt_t2 {
    top: 60px;
}

.tt_t1 img,
.tt_t2 img {
    display: block;
    max-width: none;
}

.site-sub-body {
    min-width: 1200px;
}