@charset "utf-8";

@font-face {
    font-family: 'NEXON Gothic';
    src: local(※),
    url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face{
    font-family:'NEXON Gothic';
    font-weight: 400;
    src: local(※),
    url('https://rs.nxfs.nexon.com/home/fonts/NEXON%20Lv1%20Gothic%20OTF.eot'),
    url('https://rs.nxfs.nexon.com/home/fonts/NEXON%20Lv1%20Gothic%20OTF.eot#iefix') format('embedded-opentype'),
    url('https://rs.nxfs.nexon.com/home/fonts/NEXON%20Lv1%20Gothic%20OTF.woff') format('woff');
}
@font-face{
    font-family:'NEXON Gothic';
    font-weight:700;
    src: local(※),
    url('https://rs.nxfs.nexon.com/home/fonts/NEXON%20Lv1%20Gothic%20OTF%20Bold.eot'),
    url('https://rs.nxfs.nexon.com/home/fonts/NEXON%20Lv1%20Gothic%20OTF%20Bold.eot#iefix') format('embedded-opentype'),
    url('https://rs.nxfs.nexon.com/home/fonts/NEXON%20Lv1%20Gothic%20OTF%20Bold.woff') format('woff');
}

/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin:0;padding:0;border:0;vertical-align:baseline;text-decoration:none}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
body {font-family:'NEXON Gothic', '맑은 고딕', 'malgun gothic', '돋움', 'dotum', 'sans-serif';font-size:100%;line-height:1;color:#000}
h1, h2, h3, h4, h5, h6 {font-family:'NEXON Gothic', '맑은 고딕', 'malgun gothic', '돋움', 'dotum', 'sans-serif';font-size:100%;font-weight:bold;color:#000}
ol, ul {list-style:none}
a, img {vertical-align:top}
a.plccnavi, a.plccnavi:link, a.plccnavi:visited {color:#fff;text-decoration:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent}
a:hover {text-decoration:none}
table {border-collapse:collapse;border-spacing:0}
input, textarea, button, select {margin:0;padding:0;font-family:inherit;font-size:inherit}
input:focus {outline:none}
label {cursor:pointer}
fieldset {min-width:0}
button {display:block;position:relative;padding:0;border:0;background-color:transparent;outline:none;cursor:pointer}
legend, caption, .blind {overflow:hidden;visibility:hidden;position:absolute;left:0;top:0;width:0;height:0;font-size:0;line-height:0}
i {font-style:normal}
hr {display:none}

/* common */
html {overflow-x:hidden;overflow-y:auto}
body.locked_scroll {overflow-x:hidden;overflow-y:hidden;height:100%}
.gnbWrapper.gnbSizeL {display:none !important}
.wrap {/* overflow-x:hidden;overflow-y:auto; */position:relative;width:100%;max-width:2560px;min-width:375px;margin:0 auto}
.wrap section {position:relative;width:100%}
.wrap .inner {position:relative;width:calc(100% - 24px);height:100%;padding:0 12px;margin:0 auto}
.wrap .p, .popup .p {display:inline-block;background:url('https://ssl.nexon.com/s2/game/plcc/site/common/bg_point.png');background-size:cover;vertical-align:-3px}
.wrap .c, .popup .c {display:inline-block;background:url('https://ssl.nexon.com/s2/game/plcc/site/common/blt_tab_check.png');background-size:cover}
.wrap .btn_border, .popup .btn_border {display:block;border:1px solid #000;box-sizing:border-box;border-radius:5px;background-color:#FFF;font-weight:700;color:#000;text-align:center}
.wrap .btn_black, .popup .btn_black {display:block;border:1px solid #000;box-sizing:border-box;border-radius:5px;background-color:#000;font-weight:700;text-align:center;color: white}
.wrap .btn_blue, .popup .btn_blue {font-weight:700;color:#FFF;background-color:#2082F0;border-radius:3px;box-sizing:border-box}
.wrap .btn_gray, .popup .btn_gray {color:#FFF;background-color:#9B9FA3;border-radius:3px;box-sizing:border-box}


/* container */
.container {width:100%;padding-top:50px}
.container h2 {padding-top:60px;font-size:28px}
.container h3 {font-size:20px}

/* tab */
.tab_nav {display:flex;width:100%}
.tab_nav li {overflow:hidden;width:50%;height:40px;box-sizing:border-box;background-color:#f2f2f2;border:1px solid #000}
.tab_nav li:nth-child(1) {border-top-left-radius:3px}
.tab_nav li:nth-child(2) {border-top-right-radius:3px}
.tab_nav li.active {background-color:#fff;border-bottom:0 none}
.tab_nav li:nth-child(1).active {border-right:0 none}
.tab_nav li:nth-child(2).active {border-left:0 none}
.tab_nav li button {display:block;width:100%;height:100%;font-size:14px}
.tab_nav li.active button {font-weight:700}
.tab_nav li.active button .c {width:17px;height:12px;margin-right:3px}
.tab_list_wrap {position:relative}
.tab_list_wrap .tab_list {display:none;position:absolute;left:0;top:0;width:100%}
.tab_list_wrap .tab_list.active {display:block}

/* main, apply caution section */
.caution .t_caution1 {padding-bottom:20px;font-size:16px}
.caution .caution1 li {margin:0 0 10px 12px;line-height:22px;text-indent:-12px;word-break:keep-all}
.caution .caution1 li:last-child {margin-bottom:0}
.caution .caution1 li:before {display:inline-block;content:'';width:3px;height:3px;margin-right:10px;background-color:#B7B7B7;border-radius:3px;vertical-align:3px}
.caution .caution1 li a {font-weight:bold;color:#333}
.caution .t_caution2 {margin:50px 0 30px;font-size:22px}
.caution .caution2 > li {margin:0 0 20px 15px;font-size:18px;color:#333;line-height:28px;text-indent:-14px;word-break:keep-all}
.caution .caution2 > li:nth-child(2),
.caution .caution2 > li:nth-child(3),
.caution .caution2 > li:nth-child(4),
.caution .caution2 > li:nth-child(5) {font-weight:bold}
.caution .caution2 > li:last-child {margin-bottom:0}
.caution .caution2 > li:before {display:inline-block;content:'';width:4px;height:4px;margin-right:10px;vertical-align:5px;background-color:#B7B7B7;border-radius:4px}
.caution .caution2 > li .p {display:none}
.caution .caution2 li li {margin:12px 0 0 18px;font-size:16px;line-height:24px;text-indent:-8px}
.caution .caution2 li li:before {display:inline-block;content:'-';color:#B7B7B7;margin-right:8px}

/* footer */
.footer .copyright {width:100%;padding:100px 0 18px;font-size:0.75rem;text-align:center}

/* button hyundaicard */
.btn_hyundaicard {z-index:50;position:fixed;left:50%;bottom:20px;width:250px;height:50px;font-size:18px;font-weight:700;text-align:center;line-height:52px;background-color:#2082F0;border-radius:29px;transform:translateX(-50%);box-shadow:0 10px 20px #0000005C}

/* medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .gnbWrapper.gnbSizeL {display:block !important;min-width:977px !important}
    .wrap .inner {/* width:calc(100% - 6.4vw);padding:0 3.2vw */width:calc(100% - 40px);padding:0 20px}
    .container h2 {padding-top:198px;font-size:38px}
    .container h3 {font-size:24px}
    .tab_nav li {height:58px}
    .tab_nav li:nth-child(1) {border-top-left-radius:5px}
    .tab_nav li:nth-child(2) {border-top-right-radius:5px}
    .tab_nav li button {font-size:18px}
    .caution .t_caution1 {padding-bottom:34px;font-size:22px}
    .caution .caution1 li {margin:0 0 15px 10px;font-size:18px}
    .caution .t_caution2 {margin-top:80px}
    .caution .caution2 > li .p {display:block}
    .footer .copyright {padding:150px 0 60px}
    .btn_hyundaicard {bottom:30px;width:300px;height:58px;font-size:20px;line-height:60px}
}

/* break 1206px */
@media (min-width: 1206px) {
    .gnbWrapper.gnbSizeL {display:block !important}
    .wrap .inner {width:1148px;padding:0 20px}
}

/* min size */
@media (max-width: 374px) {

}

/* mobile landscape */
@media only screen and (-webkit-min-device-pixel-ratio:1.3) and (orientation:landscape) {

}

/* START header */
.header {
    box-sizing: border-box;
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #000;
    display: flex;
    align-items: center;
}
.header a.logo {
    display: block;
    width: 194px;
    height: 24px;
    background: url('https://static-card.nexon.com/common/gnb/logo.png') no-repeat center;
    background-size: contain;
    text-indent:-9999px;
}
.header .menu_wrap_pc, .header .btn_menu,.header .menu_wrap {
    display: none;
}
@media (max-width: 991px) {
    .header {
        position: fixed;
        padding: 0 10px;
        justify-content: space-between;
    }
    .header .btn_menu,
    .header .menu_wrap {display: block;}
    .header .btn_menu.badge:before {
        content: '';
        position: absolute;
        top: 0;
        left: -2px;
        transform: translateX(-100%);
        width: 16px;
        height: 16px;
        display: block;
        background: url('https://static-card.nexon.com/common/gnb/badge_new.png') no-repeat center;
        background-size: contain;
    }
    .header .menu_wrap nav {
        display: flex;
        flex-direction: column;
        row-gap: 30px;
    }
    .header .menu_wrap nav span {
        display: flex;
        justify-content: flex-end;
        padding: 13px;
    }
    .header .menu_wrap nav > ul {
        display: flex;
        flex-direction: column;
        row-gap: 22px;
        padding: 0 40px;
    }
    .header .menu_wrap nav ul li a {
        display: block;
        padding: 6px 10px;
        width: max-content;
        position: relative;
    }
    .header .menu_wrap nav > ul li a {
        font-size: 28px;
    }
    .header .menu_wrap nav ul li a.badge:before {
        content: '';
        position: absolute;
        pointer-events: none;
        top: 4px;
        right: -12px;
        width: 16px;
        height: 16px;
        display: block;
        background: url('https://static-card.nexon.com/common/gnb/badge_new.png') no-repeat center;
        background-size: contain;
    }
    .header .menu_wrap nav ul li ul {
        flex-direction: column-reverse;
        padding-top: 6px;
        display: none;
    }
    .header .menu_wrap nav ul li .badge + ul {
        display: flex;
    }
    .header .menu_wrap nav ul li ul li a {
        font-size: 18px;
    }
    .header .menu_wrap {visibility:hidden;position:fixed;right:0;top:0;width:100%;height:100vh;min-width:375px}
    .header .menu_wrap nav {position:absolute;right:0;top:0;width:100%;height:100%;background-color:#000;transform:translateX(100%);transition:all 450ms ease}
    .header .menu_wrap.active {z-index:200;visibility:visible}
    .header .menu_wrap.active nav {overflow-x:hidden;overflow-y:auto;transform:translateX(0)}
    .mobile .header {transform:translate(0, 0) !important}
}
@media (min-width: 992px) {
    .header .menu_wrap_pc {
        display: block;
        flex: 1;
    }
    .header .menu_wrap_pc nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .header {
        position: absolute;
        padding: 0 20px;
        column-gap: 20px;
    }
    .header .menu_wrap_pc nav > ul {
        display:flex;
        flex-direction: row;
        column-gap: 20px;
    }
    .header .menu_wrap_pc nav ul:first-child {
        flex: 1;
    }
    .header .menu_wrap_pc nav ul li {
        position: relative;
    }
    .header .menu_wrap_pc ul li a {
        display: flex;
        align-items: center;
        height: 30px;
        padding: 0 8px;
        font-size: 16px;
    }
    .header .menu_wrap_pc ul li a + ul {
        display: none;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #000;
        flex-direction: column;
        row-gap: 12px;
        transform: translate(-12px, 100%);
        width: max-content;
        padding: 22px 14px 12px 12px;
    }
    .header .menu_wrap_pc ul li a.badge {
        column-gap: 4px;
    }
    .header .menu_wrap_pc ul li a.badge:before {
        content: '';
        position: absolute;
        top: 8px;
        left: 4px;
        transform: translateX(-100%);
        width: 8px;
        height: 8px;
        display: block;
        background: url('https://static-card.nexon.com/common/gnb/badge_dot.png') no-repeat center;
        background-size: contain;
    }
    .header .menu_wrap_pc ul li a.badge:after {
        content: '';
        width: 24px;
        height: 24px;
        display: block;
        background: url('https://static-card.nexon.com/common/gnb/nav_arrow_down.png') no-repeat center;
        background-size: contain;
    }
    .header .menu_wrap_pc ul li:hover ul {
        display: flex;
    }
    .header .menu_wrap_pc ul li:hover a.badge:after {
        transform: rotate(180deg);
    }
    .header .menu_wrap_pc ul:last-child li a span {
        padding: 0 8px;
    }
}

/* hidde NexonGNB */
@media screen and (max-width: 750px) {
    body {
        overflow: unset !important;
    }
    .gnbWrapperMobile{
        overflow: hidden;
        height: 0 !important
    }
}
/* END header */