/* BASIC css start */
/* aside */
#aside {
    width: 200px;
}

/* lnb */
#aside .lnb-wrap h2 {
    font-size: 0;
    line-height: 0;
}

#aside h2.txt {
    padding-right: 15px;
    background: url(/images/d3/modern_simple/common/bull_h13_dw_arw.gif) no-repeat right 45%;
}

#aside h2.txt span {
    border-bottom: 1px solid #999999;
    color: #333333;
    display: block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding-bottom: 3px;
}

#aside .lnb {
    zoom: 1;
    padding-bottom: 25px;
    padding-left: 2px;
}

#aside .lnb:after {
    content: "";
    display: block;
    clear: both;
}

#aside .lnb li,
#aside .lnb a {
    float: left;
    width: 100%;
}

#aside .lnb li {
    margin-top: 10px;
    word-wrap: break-word;
}

#aside .lnb li.now a {
    font-weight: bold;
}

#aside .lnb a:hover {
    font-weight: bold;
}

#aside .lnb li a {
    color: #767676;
}


/* ÅõÇ¥ÇÏ±â */
#aside .research .txt-1 {
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
}

#aside .research .list {
    margin-top: 10px;
}

#aside .research .list li {
    margin-top: 5px;
}

#aside .research .list li.li-center {
    text-align: center;
}


/* info */
#aside .info {
    margin-bottom: 15px;
    background: url(/images/d3/modern_simple/aside_info_mdl.gif) repeat-y 0 0;
}

#aside .info .cnt,
#aside .info .cnt a {
    color: #616161;
}

#aside .info .cnt {
    zoom: 1;
    padding: 0 13px 7px;
    text-align: center;
    color: #616161;
    background: url(/images/d3/modern_simple/aside_info_btm.gif) no-repeat 0 bottom;
}

#aside .info .cnt dd {
    padding: 10px 0;
    background: url(/images/d3/modern_simple/aside_info_dot.gif) repeat-x 0 0;
}

#aside .info .cnt dd.first {
    background-image: none;
}

#aside .info .cnt dd li {
    padding: 2px 0;
}


/* cs-center */
#aside .info-cs .ph {
    font-size: 14px;
    font-weight: bold;
}

#aside .info-cs .qna {
    font-weight: bold;
}

#aside .info-cs .qna img {
    vertical-align: middle;
}


/* =========================
   FIX ICON ÀüÃ¼ À§Ä¡
========================= */

#fix_icon {
    position: fixed;
    right: 20px;
    bottom: 400px;
    z-index: 999999;
}


/* =========================
   FIX ICON ¸®½ºÆ® ±¸Á¶
========================= */

#fix_icon ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* =========================
   FIX ICON °øÅë ¹öÆ°
========================= */

#fix_icon ul li a {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 80px;
    height: 80px;

    border-radius: 16px;
    transition: all 0.2s;
}

#fix_icon ul li a img {
    object-fit: contain;
}

#fix_icon ul li:hover a {
    transform: scale(1.1);
}


/* =========================
   Ä«Ä«¿ÀÅå ¹öÆ°
========================= */

#fix_icon ul li.kakao-talk-btn a {
    background-color: #FEE500;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

#fix_icon ul li.kakao-talk-btn img {
    width: 70px;
    height: 70px;
}


/* =========================
   »ç¾÷ÀÚµî·Ï ¹öÆ°
========================= */

#fix_icon ul li.ico_license a {
    background-color: #e30025;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

#fix_icon ul li.ico_license img {
    width: 70px;
    height: 70px;
}


/* =========================
   TOP ¹öÆ°
========================= */

#fix_icon ul li.gotoTop {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
}

#fix_icon ul li.gotoTop.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#fix_icon ul li.gotoTop a {
    background-color: #999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

#fix_icon ul li.gotoTop img {
    width: 70px;
    height: 70px;
}


/* =========================
   FIX ICON ÅøÆÁ
========================= */

#fix_icon ul li a .tooltip {
    position: absolute;

    right: 90px;
    top: 50%;

    transform: translateY(-50%) translateX(10px);

    background: #333;
    color: #fff;

    font-size: 12px;

    padding: 6px 10px;
    border-radius: 8px;

    white-space: nowrap;

    opacity: 0;
    pointer-events: none;

    transition: all 0.2s;
}

#fix_icon ul li a .tooltip::after {
    content: "";

    position: absolute;

    top: 50%;
    right: -5px;

    transform: translateY(-50%);

    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
}

#fix_icon ul li:hover a .tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}


/* =====================================================
   LEFT MENU
===================================================== */

#leftmenu {
    width: 200px;
    box-sizing: border-box;
}

#leftmenu #lm {
    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ¸Þ´º ÇÑ ÁÙ */

#leftmenu #lm li {
    width: 100%;
    height: 36px;

    margin: 0 0 4px 0;
    padding: 0;

    overflow: hidden;

    list-style: none;

    border-bottom: 1px solid #e5e5e5;

    box-sizing: border-box;
}

#leftmenu #lm li:last-child {
    border-bottom: none;
}


/* ¸Þ´º ¸µÅ© */

#leftmenu #lm li a {
    display: flex;
    align-items: center;

    gap: 10px;

    width: 200px;
    height: 36px;

    padding: 0 10px;

    box-sizing: border-box;

    text-decoration: none;

    color: #333333;

    font-size: 13px;
    font-weight: 500;

    transition:
        background 0.2s ease,
        padding-left 0.2s ease,
        color 0.2s ease;
}


/* ±âÁ¸ hover À¯Áö */

#leftmenu #lm li a:hover {
    background: #f7f7f7;

    padding-left: 14px;

    color: #E30025;
}


/* =====================================================
   CATEGORY ICON
===================================================== */

#leftmenu #lm .category-icon {
    display: block;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* ¸Þ´º¸í */

#leftmenu #lm .category-name {
    display: block;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* =====================================================
   XCODEº° ±âÁ¸ ¾ÆÀÌÄÜ ¿¬°á
===================================================== */

#leftmenu #lm li[data-xcode="023"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub1.png");
}

#leftmenu #lm li[data-xcode="024"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub2.png");
}

#leftmenu #lm li[data-xcode="025"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub3.png");
}

#leftmenu #lm li[data-xcode="001"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub4.png?v=4");
}

#leftmenu #lm li[data-xcode="015"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub5.png?v=4");
}

#leftmenu #lm li[data-xcode="027"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub6_1.png?v=3");
}

#leftmenu #lm li[data-xcode="029"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub7.png");
}

#leftmenu #lm li[data-xcode="032"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub8.png");
}

#leftmenu #lm li[data-xcode="010"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub9.png");
}

#leftmenu #lm li[data-xcode="033"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub10.png");
}

#leftmenu #lm li[data-xcode="008"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub11.png");
}

#leftmenu #lm li[data-xcode="002"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub12.png");
}

#leftmenu #lm li[data-xcode="016"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub13.png");
}

#leftmenu #lm li[data-xcode="003"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub14.png");
}

#leftmenu #lm li[data-xcode="007"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub15.png");
}

#leftmenu #lm li[data-xcode="006"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub16.png");
}

#leftmenu #lm li[data-xcode="019"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub17.png");
}

#leftmenu #lm li[data-xcode="004"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub18.png");
}

#leftmenu #lm li[data-xcode="005"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub19.png");
}

#leftmenu #lm li[data-xcode="018"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub20.png");
}

#leftmenu #lm li[data-xcode="017"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub21.png");
}

#leftmenu #lm li[data-xcode="034"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub22.png");
}

#leftmenu #lm li[data-xcode="037"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub23.png");
}

#leftmenu #lm li[data-xcode="030"] .category-icon {
    background-image: url("/design/woochen/icon/sub/sub24.png");
}
/* BASIC css end */

