@charset "utf-8";
@import url('//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css');
@import url('https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css');
@import url('/pf/pf_ud/common/css/normalize.css');
@import url('/pf/pf_ud/common/css/grid.css');
@import url('/pf/pf_ud/common/css/aos.css');
@import url('./page.css');
@import url('./popup.css');
@font-face {
    font-family:'Spoqa Han Sans',Apple SD Gothic Neo,'맑은 고딕','Malgun Gothic','돋움',Dotum,Verdana,Arial,sans-serif; font-weight:normal; font-style:normal
}

html, body {
    margin:0; padding:0; width:100%; height:auto; overflow-x:hidden;
    font-family:'Spoqa Han Sans',Apple SD Gothic Neo,'맑은 고딕','Malgun Gothic','돋움',Dotum,Verdana,Arial,sans-serif;
    font-weight:300; font-size:10px; color:#36384d; word-break:keep-all; background-color:#36384d
}
input::-ms-clear, input::-ms-reveal {display:none}
button:disabled,
button[disabled] {cursor:not-allowed}
dl, dt, dd,
p,
h1, h2, h3, h4, h5 {margin:0; padding:0; font-style:normal}
ul, menu, dir, ol, li {margin:0; padding:0; list-style:none}
table, tr, th, td {margin:0; padding:0; border-collapse:collapse}
em, address {font-style:normal}
select::-ms-expand {display:none}
::selection {background:rgba(111,116,244,.7); color:#fff}

* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
a, a:hover, a:focus, a:active, a:visited {text-decoration:none; outline:none; cursor:pointer}
button {margin:0; padding:0; border:0}

/* input */
::-webkit-input-placeholder {color:#dcdee4; font-weight:300}
::-moz-placeholder {color:#dcdee4; font-weight:300}
:-ms-input-placeholder {color:#dcdee4; font-weight:300}
:-moz-placeholder {color:#dcdee4; font-weight:300}
input, textarea {-webkit-appearance:none}
input[type="text"],
input[type="tel"],
.inp-txt {
  min-height:34px; padding:0 10px; border:1px solid #dcdee4; border-radius:3px;
  font-size:1.4rem; line-height:34px; transition:border-color .2s ease, box-shadow .2s ease
}
input[type="text"]:focus,
input[type="tel"]:focus,
.inp-txt:focus,
.inp-txt.select.focus {border-color:#6f74f4; box-shadow:0 0 0 3px rgba(111,116,244,.2); outline:none}
/* selectbox */
.inp-txt.select {position:relative; padding:0}
.inp-txt.select label {
    position:absolute; left:0; top:0; padding:0 10px;
    font-size:inherit; /*z-index:-1*/
}
.inp-txt.select select {
    width:100%; min-height:34px; padding:0 10px; 
    border:0; opacity:0; font-size:inherit; vertical-align:top;
    -webkit-appearance:none; -moz-appearance:none; appearance:none
}
.inp-txt.select:before {
    content:'\f107'; position:absolute; right:10px; top:10px;
    font:900 14px/1 'Line Awesome Free'; color:#969aaf
}

/* checkbox */
.inp-check {
    display:inline-block; position:relative; font-size:1.3rem; font-weight:400; line-height:30px; cursor:pointer; -webkit-user-select:none; user-select:none
}
.inp-check .txt {display:inline-block; position:relative; margin:0; padding-left:28px}
.inp-check input {position:absolute; width:0; height:0; opacity:0; cursor:pointer}
.inp-check .checkmark {
    position:absolute; left:0; top:6px; width:20px; height:20px; background:#fff; border:1px solid #dcdee4; border-radius:2px
}
.inp-check .checkmark:after {
    content:""; display:none; position:absolute; left:7px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0;
    -webkit-transform:rotate(45deg); transform:rotate(45deg)
}
.inp-check input:checked ~ .checkmark {background:#6f74f4; border:none}
.inp-check input:checked ~ .checkmark:after {display:block}

/* button */
.btn {
    position:relative; display:inline-block; padding:0 20px;
    font-size:1rem; font-weight:400; text-align:center; white-space:nowrap;
    vertical-align:middle; cursor:pointer; z-index:2
}
.btn:before {
    content:''; position:absolute; top:0; left:0; right:0; bottom:0; transition:all .2s
}
.btn:hover:before {top:-6px; left:-6px; right:-6px; bottom:-6px}
.btn-lg {padding:16px 40px; font-size:1.6rem; border-radius:50px}
.btn-lg:before {border:3px solid; border-radius:50px}
.btn-sm {padding:6px 15px; font-size:1.4rem; border-radius:3px}
.btn-sm:before {border:1px solid; border-radius:3px}
.btn-primary {background:#36384d; color:#fff}
.btn-primary:before {border-color:rgba(54,56,77,.5)}
.btn-point {background:#6f74f4; color:#fff}
.btn-point:before {border-color:rgba(111,116,244,.5)}
.btn-line-point {border-color:#6f74f4; color:#6f74f4}
.btn-line-point:hover {background:#6f74f4; color:#fff}
.btn-line-b {border-color:#bec0c7; color:#6E6E7A; background:linear-gradient(to bottom, #fff, #F9F9FC)}
.btn i {font-size:1.3em}

/* scroll-top 버튼 */
a.top {
    display:none; position:fixed; right:20px; bottom:90px;
    width:40px; height:40px; text-align:center;
    background:#fff; border-radius:50%; box-shadow:0 2px 10px rgba(54,56,77,.2);
    transition:bottom .2s ease, opacity .2s ease; z-index:9000; opacity:.8
}
a.top:hover {bottom:95px; opacity:1}
a.top i {color:#969aaf; font-size:20px; line-height:40px}

/* 문의하기 버튼 */
.btn-help {
  position:fixed; right:20px; bottom:20px; padding:5px;
  background:#fff; border-radius:50px; box-shadow:0 2px 10px rgba(54,56,77,.4);
  transition:background .2s ease, bottom .2s ease; z-index:10
}
.btn-help i {
    display:inline-block; width:48px; height:48px; 
    font-size:2.6rem; color:#fff; line-height:48px; text-align:center;
    background-image:linear-gradient(to bottom, #6f74f4, #b993fb); border-radius:50%; vertical-align:middle
}
.btn-help span {
    display:inline-block; padding:10px; font-size:1.4rem; font-weight:400; color:#36384d; transition:color .2s ease; vertical-align:middle
}
.btn-help:hover {bottom:25px; background:#6f74f4}
.btn-help:hover span {color:#fff}

/* text */
.hide {position:absolute; overflow:hidden; clip:rect(0 0 0 0); margin:-1px; width:1px; height:1px}
.ta-right {text-align:right}
.ta-left {text-align:left}
.ta-center {text-align:center}
.txt-bold {font-weight:700}
.txt-link {font-weight:400; text-decoration:underline; color:inherit}
.txt-link:hover {font-weight:700; text-decoration:underline}
.txt-s {font-size:1.1rem}
.txt-point {color:#6f74f4}
.txt-wt {color:#fff}

/* display */
.d-block {display:block}
.d-inline {display:inline-block}
.d-none {display:none}
.f-left {float:left}
.f-right {float:right}

/* common */
.container-body {position:relative; padding-top:60px; background:#fff}
.inner {
    position:relative; width:100%; max-width:1080px;
    margin-left:auto; margin-right:auto
}
.inner:after {content:''; display:block; clear:both}
.logo {
    display:inline-block; width:120px; height:31px;
    background:url('/pf/pf_ud/pna/common/img/logo_fill.svg') no-repeat 0 0 / 100%;
    font-size:0; text-indent:-9999px; vertical-align:middle
}
.logo-picxell {
    display:inline-block; width:118px; height:32px;
    background:url('/pf/pf_ud/pna/common/img/logo_picxell@2x.png') no-repeat 0 0 / 100%;
    font-size:0; text-indent:-9999px; vertical-align:middle
}

/* header */
.header {
    position:fixed; top:0; left:0; right:0; z-index:9000;
    width:100%; height:60px; background:#fff; border-bottom:1px solid #dcdee4
}
.header h1 {
    position:absolute; left:30px; top:50%; transform:translateY(-50%); font-size:0
}
.header .wrap-user {
    position:absolute; right:30px; top:50%; transform:translateY(-50%)
}
.header .wrap-user a {
    font-size:1.3rem; font-weight:300; color:#969aaf; text-align:right;
    transition:color .2s ease-in-out
}
.header .wrap-user a:hover {font-weight:400; color:#6f74f4}
.header .wrap-user a:last-child:before {
    content:''; display:inline-block; width:1px; height:12px;
    margin:0 10px; background:#dcdee4; vertical-align:middle
}

/* gnb */
.gnb {margin:0 200px; text-align:center}
.gnb li {display:inline-block}
.gnb li a {
    display:block; position:relative; padding:18px 20px;
    color:#6e6e7a; font-size:1.6rem; font-weight:400;
    transition:color .2s ease-in-out, font-weight .2s ease-in-out
}
.gnb li a:hover,
.gnb li.active a {color:#6f74f4; font-weight:700}
.m-gnb {display:none}
.m-gnb nav {
    position:fixed; top:0; right:-200px; bottom:0;
    width:200px; padding-top:50px;
    background-color:#36384d; z-index:9001
}
.m-gnb nav ul {border-top:1px solid rgba(255,255,255,.1)}
.m-gnb nav li {border-bottom:1px solid rgba(255,255,255,.1)}
.m-gnb nav li a {
    display:block; padding:0 15px;
    color:#fff; font-size:1.8rem; font-weight:400; line-height:50px; opacity:.7
}
.m-gnb nav li a i {
    display:inline-block; position:relative; top:1.5px;
    min-width:18px; margin-right:5px; text-align:center; font-size:21px    
}

.m-gnb nav li.active a {opacity:1}
.m-gnb .wrap-m-user {
    position:absolute; bottom:0; right:0;
    width:100%; text-align:center
}
.m-gnb .wrap-m-user a {
    display:inline-block; padding:20px 15px; 
    font-size:1.6rem; color:#bec0c7
}
.m-gnb .btn-m-gnb,
.m-gnb .btn-m-close {
    display:block; position:absolute; top:0; right:0; width:50px; height:50px;
    text-align:center; font-size:23px
}
.m-gnb .btn-m-gnb {color:#6e6e7a}
.m-gnb .btn-m-close {color:#fff}
.m-gnb .btn-m-gnb i,
.m-gnb .btn-m-close i {line-height:50px}
.m-gnb .bg-dim {transition:background-color .2s ease-in-out; opacity:0}
.m-gnb .bg-dim.on {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background-color:#000; opacity:.6; z-index:9
}

/* footer */
.footer {background:#36384d; color:#969aaf}
.footer .inner {display:table; padding:30px 0 50px}
.footer b {margin-right:4px; font-weight:400}
.footer .wrap-logo {display:table-cell; vertical-align:top; max-width:93px; opacity:.5}
.footer .foot-info {display:table-cell; vertical-align:top; padding-left:40px}
.footer .link-terms {margin-bottom:20px}
.footer .link-terms li {display:inline-block; margin-right:20px}
.footer .link-terms li a {color:#fff; font-size:1.3rem}
.footer .info-comp {font-size:1.3rem; font-weight:100; color:#969aaf}
.footer .info-comp div {margin-bottom:5px}
.footer .info-comp div span {display:inline-block; margin-right:6px}
.footer .info-comp address {display:inline-block}
.footer .cs-info {display:table-cell; vertical-align:top; text-align:right}
.footer .cs-info dt {display:inline-block; font-size:1.3rem; color:#fff}
.footer .cs-info dd {
    display:inline-block; margin-left:8px; font-size:2.4rem; font-weight:700; color:#6f74f4
}
.footer .cs-info p {font-size:1.2rem}

/* 반응형 */
body .wrap-m,
body .btn-mb,
body .view-mb {display:none}

/* tablet,mobile */
@media all and (max-width:1080px){
    html,body {font-size:9px}
    .container-body {padding-top:50px}
    .inner {padding-left:15px; padding-right:15px}
    .header {height:50px}
    .header .logo {width:80px; height:21px}
    .header h1 {left:20px}

    /* gnb */
    .gnb, .wrap-user {display:none}
    .m-gnb {display:block; position:relative}

    /* footer */
    .footer {padding:0 20px}
}
@media all and (max-width:768px) {
    html,body {font-size:8.5px; letter-spacing:-0.1em; background:#fff}

    /* button */
    .btn-lg {padding:12px 8vw}
    body .btn-pc,
    body .view-pc {display:none}
    body .btn-mb {display:inline-block}
    body .view-mb {display:block}

    /* footer */
    .footer .inner {display:block}
    .footer .wrap-logo {display:none}
    .footer .foot-info {display:block; margin-bottom:20px; padding-left:0}
    .footer .link-terms {margin-bottom:10px}
    .footer .cs-info {display:block; text-align:left}
}