@charset "utf-8";

/* 폰트 */
@font-face{ 
    font-family:'SpoqaHanSansNeo'; 
    src:url('fonts/SpoqaHanSansNeo-Regular.woff') format('woff');  
    font-weight: 400; 
    font-style: normal; 
}
@font-face{ 
    font-family:'SpoqaHanSansNeo'; 
    src:url('fonts/SpoqaHanSansNeo-Medium.woff') format('woff');  
    font-weight: 500; 
    font-style: normal; 
}
@font-face{ 
    font-family:'SpoqaHanSansNeo'; 
    src:url('fonts/SpoqaHanSansNeo-Bold.woff') format('woff');  
    font-weight:700; 
    font-style: normal; 
}

/* reset */
* {margin: 0; padding: 0; box-sizing:border-box;}
ul, ol {list-style-type: none;}
h1 {margin: 0;}
i {font-style:normal;}
a {text-decoration:none; color:inherit;}
a.block {display:block; width:100%; height:100%;}
button {outline:none; border:none; background:none; cursor:pointer;}
img {border: none; image-rendering:-webkit-optimize-contrast; backface-visibility: hidden;}
html {font-size: 0.625em; color:#333;}
body {font-family: 'SpoqaHanSansNeo', sans-serif; line-height: 1; overflow-x:hidden;}
.clear:after {content: ""; display: block; clear: both;}
.pc {display:none;}
body.hidden {overflow:hidden;}
section > h2 {display:none;}
#wrap {overflow:hidden; position:relative;}

.main-inner.one {min-height:calc(100vh - 414px);}

/* header */
header {
    background:#fff;
}
.header-inner {
    display:flex;
    align-items: center;
    justify-content: space-between;
    height:54px;
    padding:0 20px;
    box-shadow: 0px 4px 10px rgba(88, 81, 119, 0.03);
    position:relative;
}
.header-inner .nav {
    display:none;
}
.header-inner h1 {
    width:82px; height:23px;
    background:url(../img/common/logo.svg) no-repeat;
    background-size:contain;
}
.header-inner h1 span {
    text-indent:-9999px;
    position:absolute; top:-9999px; left:-9999px;
}
.header-inner .menu {
    display:block;
    width:20px; height:14px;
}
.header-inner .menu span {
    display:block;
    width:100%; height:2px;
    border-radius:100px;
    background:#444;
}
.header-inner .menu span:nth-of-type(2) {
    margin:4px 0;
}
.m-nav {
    position:fixed; bottom:0; left:0;
    width:100%; height:56px;
    background:#fff;
    font-size:11px;
    color:#666;
    font-weight:500;
    letter-spacing: -1px;
    z-index:10;
    border-top:1px solid #EAEAEA;
}
.m-nav li {
    float:left;
    width:20%;
}
.m-nav li a {
    display:block; 
    width:100%;
    height:55px;
    text-align:center;
    padding-top:32px;
    line-height:160%;
    background-repeat:no-repeat;
    background-size:20px;
    background-position:50% 10px;
}
.m-nav li a:hover {color:#040404;}
.m-nav li:nth-of-type(1) a {background-image:url(../img/common/m_menu_icon01.png);}
.m-nav li:nth-of-type(2) a {background-image:url(../img/common/m_menu_icon02.png);}
.m-nav li:nth-of-type(3) a {background-image:url(../img/common/m_menu_icon03.png);}
.m-nav li:nth-of-type(4) a {background-image:url(../img/common/m_menu_icon04.png);}
.m-nav li:nth-of-type(5) a {background-image:url(../img/common/m_menu_icon05.png);}
.m-nav li:nth-of-type(1):hover a {background-image:url(../img/common/m_menu_icon01_hover.png);}
.m-nav li:nth-of-type(2):hover a {background-image:url(../img/common/m_menu_icon02_hover.png);}
.m-nav li:nth-of-type(3):hover a {background-image:url(../img/common/m_menu_icon03_hover.png);}
.m-nav li:nth-of-type(4):hover a {background-image:url(../img/common/m_menu_icon04_hover.png);}
.m-nav li:nth-of-type(5):hover a {background-image:url(../img/common/m_menu_icon05_hover.png);}

/* footer */
footer {
    background:#FAFAFA;
}
.footer-inner {
    width:88.8%; max-width:400px;
    margin:0 auto;
    position:relative;
    padding-top:44px;
    height:360px;
}
.footer-inner .logo {
    display:block;
    width:68px;
}
.footer-inner .top {
    display:block;
    width:44px; height:44px;
    background:url(../img/common/top_b.svg) no-repeat;
    background-size:contain;
    text-indent:-9999px;
    position:absolute; top:20px; right:0;
}
.footer-inner .contact {
    margin:28px 0 26px;
}
.footer-inner .contact a {
    display:block;
    font-size:18px;
    font-weight:700;
    color:#222;
}
.footer-inner .contact p {
    font-size:12px;
    letter-spacing: -1px;
    color:#666;
    margin-top:10px;
}
.footer-inner .text {
    letter-spacing:-0.56px;
}
.footer-inner .text h2 {
    font-size:14px;
    color:#333;
}
.footer-inner .text ul {
    margin:16px 0 14px;
    font-size:12px; font-weight:500;
    opacity:.9;
}
.footer-inner .text ul li {
    float:left;
}
.footer-inner .text ul li + li {
    margin-left:34px;
}
.footer-inner .text p {
    line-height:150%;
    font-size:11px;
    color:#666;
}
.footer-inner .text a:hover {
    text-decoration:underline;
}

/* 팝업 */
.popup-inner {
    position:fixed; top:0; left:0;
    width:100%; height:100vh;
    z-index:100;
    background:rgba(38,42,53,.6);
}
.popup-inner .p-box {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:88.8%; max-width:420px;
    padding:40px 20px 30px;
    border-radius:20px;
    background:#fff;
}
.popup-inner .p-box .close {
    position:absolute; top:20px; right:20px;
    width:20px; height:20px;
    text-indent:-9999px;
    background:url(../img/common/close_icon.svg) no-repeat;
    background-size:contain;
}
.popup-inner .p-box .notice-text {
    font-size:16px; line-height:150%;
    letter-spacing:-1px;
    color:#202020;
    margin-bottom:38px;
    text-align:center;
}
.popup-inner .p-box .notice-text.one {
    line-height:48px;
}
.popup-inner .p-box .p-button button {
    background:#623CE2;
    border-radius:4px;
    font-size:16px; letter-spacing:-1px;
    color:#fff;
    display:block;
    width:100%; height:52px;
}
.popup-inner .p-box .p-button button {
    background:#623CE2;
    border-radius:4px;
    font-size:16px; letter-spacing:-1px;
    color:#fff;
    display:block;
    width:100%; height:52px;
}
.popup-inner .p-box .p-button.two {
    height:52px;
}
.popup-inner .p-box .p-button.two button.small {
    border:1px solid #623CE2;
    color:#623CE2;
    background:#fff;
    float:left;
    width:100px;
}
.popup-inner .p-box .p-button.two button.small + button {
    float:right;
    width:calc(100% - 110px);
}
.popup-inner .p-box .p-button.two button.small2  {
    float:left;
    width:calc(100% - 110px);
}
.popup-inner .p-box .p-button.two button.small2 + button {
    border:1px solid #623CE2;
    color:#623CE2;
    background:#fff;
    float:right;
    width:100px;
}

/* 약관 팝업 */
.popup-inner.terms {display:none;}
.popup-inner.terms .p-box {
    padding:40px 0;
    width:94%;
    max-width:680px;
    padding-right:8px;
}
.popup-inner.terms .p-box .terms-title {
    font-size:20px;
    letter-spacing:-1px;
    color:#222;
    text-align:center;
    margin-bottom:20px;
    line-height:150%;
}
.popup-inner.terms .p-box .terms-text {
    height:450px;
    overflow-y:auto;
    font-size:14px;
    letter-spacing:-1px;
    color:#444;
    line-height:150%;
    padding-left:20px;
    padding-right:6px;
}
.popup-inner.terms .p-box .terms-text::-webkit-scrollbar { width:6px;}
.popup-inner.terms .p-box .terms-text::-webkit-scrollbar-track {background:transparent; -webkit-border-radius: 20px;}
.popup-inner.terms .p-box .terms-text::-webkit-scrollbar-thumb {-webkit-border-radius: 100px; background:#E2E2E2; }
.popup-inner.terms .p-box .terms-text > strong {
    display:block;
    font-size:18px;
}


/* 가로 해상도 768 이상 */
@media screen and (min-width:768px){
    .main-inner.one {min-height:calc(100vh - 202px);}
    /* header */
    .header-inner {
        height:44px;
        width:668px;
        padding:0;
        margin:0 auto;
        box-shadow: 0px 2.2582px 5.6455px rgba(88, 81, 119, 0.02);
    }
    .header-inner .nav {
        display:block;
    }
    .header-inner .nav li {
        line-height:20px;
        height:20px;
        float:left;
        font-size:10px;
        color:#222;
        font-weight:500;
    }
    .header-inner .nav li a {
        position:relative;
    }
    .header-inner .nav li:not(.login-b) a:hover::after {
        content:""; display:block;
        background:#42A5F5;
        width:3px; height:3px;
        border-radius:100px;
        position:absolute; bottom:1px; right:-5px;
    }
    .header-inner .nav li + li {
        margin-left:43px;
    }
    .header-inner .nav li.login-b {
        margin-left:49px;
        width:54px; height:20px;
        border-radius:100px;
        border:1px solid #623CE2;
        color:#623CE2;
        text-align:center;
    }
    .header-inner .nav li.login-b:hover {
        border-color:#623CE2;
        color:#fff;
        background:#623CE2;
    }
    .header-inner h1 {
        width:70px; height:20px;
    }
    .header-inner .menu {
        display:none;
    }
    .header-inner.login .nav li.login-b {
        display:none;
    }
    .header-inner.login .nav .mypage {
        display:block;
    }
    .header-inner .nav .mypage {
        display:none;
        margin-left:65px;
    }
    .header-inner .nav .mypage a {
        display:block;
        text-indent:-9999px;
        width:22px; height:22px;
        background:url(../img/common/mypage_icon.svg) no-repeat;
        background-size:contain;
    }
    .header-inner .nav .mypage a:hover::after {display:none !important;}
    .header-inner .nav .mypage a:hover {
        background-image:url(../img/common/mypage_icon_hover.svg);
    }
    .m-nav {display:none;}

    /* footer */
    .footer-inner {
        width:668px; max-width:none;
        padding-top:25px;
        height:158px;
    }
    .footer-inner .logo {
        width:68px;
    }
    .footer-inner .top {
        width:30px; height:30px;
        top:16px; right:-38px;
    }
    .footer-inner .contact {
        margin:0;
        position:absolute; top:53px; right:0;
    }
    .footer-inner .contact a {
        font-size:16px;
        text-align:right;
    }
    .footer-inner .contact p {
        font-size:12px;
        margin-top:5px;
    }
    .footer-inner .text {
        margin-top:20px;
    }
    .footer-inner .text h2 {
        font-size:10px;
    }
    .footer-inner .text ul {
        margin:10px 0 8px;
        font-size:10px; 
    }
    .footer-inner .text ul li {
        float:left;
    }
    .footer-inner .text ul li + li {
        margin-left:34px;
    }
    .footer-inner .text > div {
        width:500px;
    }
    .footer-inner .text p {
        font-size:11px;
        float:left;
        width:50%;
    }
    
    /* 팝업 */
    .popup-inner .p-box {
        padding:40px 40px 30px;
    }
    .popup-inner .p-box .p-button.two button.small {
        width:110px;
    }
    .popup-inner .p-box .p-button.two button.small + button {
        width:calc(100% - 120px);
    }
    .popup-inner .p-box .p-button.two button.small2 {
        width:calc(100% - 120px);
    }
    .popup-inner .p-box .p-button.two button.small2 + button {
        width:110px;
    }
    
    /* 약관 팝업 */
    .popup-inner.terms .p-box .terms-title {
        font-size:28px;
        margin-bottom:30px;
    }
    .popup-inner.terms .p-box .terms-text {
        height:608px;
        padding-left:30px;
        padding-right:16px;
    }
}


/* 가로 해상도 1280 이상 */
@media screen and (min-width:1280px){
    .main-inner.one {min-height:calc(100vh - 360px);}
    /* header */
    .header-inner {
        height:80px;
        width:90.625%;
        box-shadow: 0px 4px 10px rgba(88, 81, 119, 0.02);
    }
    .header-inner .nav li {
        line-height:34px;
        height:34px;
        font-size:16px;
    }
    .header-inner .nav li:not(.login-b) a:hover::after {
        width:6px; height:6px;
        position:absolute; bottom:3px; right:-10px;
    }
    .header-inner .nav li + li {
        margin-left:83px;
    }
    .header-inner .nav li.login-b {
        margin-left:96px;
        width:95px; height:34px;
        font-size:14px;
    }
    .header-inner h1 {
        width:122px; height:34px;
    }
    .header-inner .nav .mypage {
        margin-left:125px;
    }
    .header-inner .nav .mypage a {
        width:36px; height:36px;
    }

    /* footer */
    .footer-inner {
        width:1180px; 
        padding-top:45px;
        height:280px;
    }
    .footer-inner .logo {
        width:120px;
    }
    .footer-inner .top {
        width:55px; height:55px;
        top:54px; right:-289px;
    }
    .footer-inner .contact {
        position:absolute; top:95px;
    }
    .footer-inner .contact a {
        font-size:26px;
        text-align:center;
    }
    .footer-inner .contact p {
        text-align:center;
        margin-top:7px;
        letter-spacing:-0.6px;
    }
    .footer-inner .text {
        margin-top:35px;
    }
    .footer-inner .text h2 {
        font-size:16px;
    }
    .footer-inner .text ul {
        margin:21px 0 14px;
        font-size:14px; 
    }
    .footer-inner .text ul li + li {
        margin-left:40px;
    }
    .footer-inner .text > div {
        width:600px;
    }
    .footer-inner .text p {
        font-size:13px;
        line-height:160%;
    }
}