@charset "utf-8";


/* 마이페이지 */
.mypage-bg {background:#f7f9ff;}
.mypage-bg .sub-title {padding-top:clamp(40px, calc( 120 / var(--inner) * 100vw ), 120px); margin:0 auto clamp(30px, calc(70 / var(--inner) * 100vw ), 70px); text-align:left;}


.mypage-wrap {display:flex;}
.mypage-wrap .join-form {max-width:100%;}
.area-left {width:330px; padding-right:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.area-left .group {margin-bottom:10px; padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); background:#fff; border-radius:1em;}
.area-left .group h3 {margin-bottom:1.43em; font-size:0.88em; font-weight:600; line-height:1; letter-spacing:-0.04em; color:#a8a8a8;}
.area-left .my-info p {font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.area-left .my-info p.type-s {font-size:clamp(18px, calc(20/ var(--inner) * 100vw ),20px);}
.area-left .apply-info dl {display:flex; margin-bottom:5px; font-weight:500; line-height:1.4; letter-spacing:-0.04em; color:#505050;}
.area-left .apply-info dl:last-child {margin-bottom:0;}
.area-left .apply-info dt {flex:1 1 auto; min-width:0; width:1%;}
.area-left .apply-info dd {min-width:30px; font-weight:600; color:#2c2c2c; text-align:right;}
.area-left .logout {padding:0 clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); margin-top:clamp(0px, calc( 25 / var(--inner) * 100vw ), 25px); font-size:0.9em; font-weight:500; line-height:1; font-weight:500; color:#a8a8a8;}
.mypage-menu ul li {margin-bottom:0.83em;}
.mypage-menu ul li a {display:block; font-size:1.13em; font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.mypage-menu ul li:last-child {margin-bottom:0;}
.mypage-menu ul li a:hover,
.mypage-menu ul li.active a {color:var(--color-primary);}

.filebox {position:relative;}
.filebox .upload-name {display:inline-block; height:48px; padding:0 10px; vertical-align:middle; width:calc(100% - 121px); border:1px solid #ddd; border-radius:5px;}
.filebox label {position:absolute; right:0; display:inline-block; width:115px; text-align:center; padding:0 10px; color:#fff; vertical-align:middle; background-color:#242424; border:0; cursor:pointer; height:48px; line-height:48px; border-radius:5px;}
.filebox input[type="file"] {position:absolute; width:0; height:0; padding:0; overflow:hidden; border:0;}

.area-right {flex:1 1 auto; min-width:0; width:1%;}
.round-box {padding:clamp(20px, calc(50 / var(--inner) * 100vw ), 50px); margin:0 auto clamp(20px, calc(40 / var(--inner) * 100vw ), 40px); background:#fff; border-radius:var(--border-radius); box-shadow:var(--shadow); border:1px solid #2c2c2c;}
.round-box.pr {position:relative;}
.round-box.bg-blue {background:#2161f2; border-color:#2161f2;}
.round-box:last-child {margin-bottom:0 !important;}
.round-box-tit {margin-bottom:clamp(20px, calc(40 / var(--inner) * 100vw ), 40px); font-size:clamp(16px, calc(24 / var(--inner) * 100vw ), 24px); font-weight:600; line-height:1.6; letter-spacing:-0.04em; color:#2c2c2c;}
.round-box-tit2 {margin-bottom:var(--size25); font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.subscription-date {position:absolute; right:clamp(20px, calc(50 / var(--inner) * 100vw ), 50px); top:clamp(20px, calc(50 / var(--inner) * 100vw ), 50px); font-weight:500; color:#2c2c2c; letter-spacing:-0.04em; line-height:1.2; text-align:right;}
.subscription-date span {display:inline-block; margin-right:0.94em; color:#878787;}
.round-box .tit-s {margin-bottom:1em; font-size:0.88em; font-weight:500; line-height:1.2; letter-spacing:-0.04em; color:#a8a8a8;}
.round-box .price {font-size:2em; font-weight:600; font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}

.round-box.bg-blue .round-box-tit:last-child {margin-bottom:0;}

.round-box .btn a {display:inline-block;}

.round-box .fee-list li {position:relative; padding-left:0.56em; margin-bottom:0.81em; font-weight:400; line-height:1.4; letter-spacing:-0.04em; color:#505050;}
.round-box .fee-list li:last-child {margin-bottom:0;}
.round-box .fee-list li:before {content:''; position:absolute; left:0; top:0.5em; height:1px; width:0.31em; background:#707070;}
.round-box .fee-list li .small {font-size:0.88em; color:#a8a8a8;}

.mylist {}
.mylist ul {display:flex; flex-wrap:wrap; margin:-5px;}
.mylist ul li {width:50%; padding:5px;}
.mylist ul li a {display:block; padding:clamp(15px, calc(40 / var(--inner) * 100vw ), 40px); height:100%; background:#f8f8f8; border-radius:clamp(10px, calc(24/ var(--inner) * 100vw ),24px);}
.mylist ul li .tit {margin-bottom:var(--size30); color:#2c2c2c; font-size:clamp(15px, calc(22/ var(--inner) * 100vw ),22px); font-weight:600; letter-spacing:-0.04em; line-height:1.3em;}
.mylist ul li .tags {margin-bottom:var(--size20);}
.mylist ul li .tags span {display:inline-block; margin-right:4px; padding:6px 10px; font-size:11px; font-weight:600; line-height:1; letter-spacing:-0.04em; color:#2c2c2c; border:1px solid #2c2c2c; border-radius:100vh;}
.mylist ul li .tags .over {background:#f1f1f1; border-color:#f1f1f1; color:#a8a8a8;}
.mylist ul li .tags .ex {border-color:#2161f2; color:#2161f2;}
.mylist ul li .view img {display:inline-block; vertical-align:middle;}

.list-summary {padding:clamp(20px, calc(40 / var(--inner) * 100vw ), 40px) 0; margin-bottom:clamp(20px, calc(40 / var(--inner) * 100vw ), 40px); border-top:1px solid #2c2c2c; border-bottom:1px solid #dfdfdf;}
.list-summary .tit {color:#2c2c2c; font-size:1.16em; font-weight:600; letter-spacing:-0.04em; line-height:1.56em;}
.list-summary .tags {margin-bottom:14px;}
.list-summary .tags span {display:inline-block; margin-right:4px; padding:6px 10px; font-size:11px; font-weight:600; line-height:1; letter-spacing:-0.04em; color:#2c2c2c; border:1px solid #2c2c2c; border-radius:100vh;}
.list-summary .tags .over {background:#f1f1f1; border-color:#f1f1f1; color:#a8a8a8;}
.list-summary .tags .ex {border-color:#2161f2; color:#2161f2;}

.list-detail-btns .btn-pack {margin-left:10px; font-size:1em !important;}
.list-detail-btns .btn-pack:first-child {margin-left:0;}

.my-inquiry-info {display:flex; align-items:center; margin-bottom:clamp(20px, calc(70 / var(--inner) * 100vw ), 70px); padding:clamp(20px, calc(40 / var(--inner) * 100vw ), 40px); background:#f9f8f9; border-radius:var(--border-radius);}
.my-inquiry-info .txt-wrap {flex:1 1 auto; min-width:0; width:1%;}
.my-inquiry-info .tt {margin-bottom:1.33em; font-size:1.13em; font-weight:700; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.my-inquiry-info .tx {font-weight:400; letter-spacing:-0.04em; color:#505050;}
.my-inquiry-info .btn a {display:inline-block;}

.my-inquiry-form {display:flex; flex-wrap:wrap; margin:0 -5px calc(0px - var(--size30));}
.my-inquiry-form .box {width:50%; padding:0 5px; margin-bottom:var(--size30);}
.my-inquiry-form .box.wide {width:100%;}
.my-inquiry-form .box dt {margin-bottom:10px; font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.my-inquiry-form .box dd {font-size:1.13em; color:#2c2c2c; font-weight:400; letter-spacing:-0.04em;}
.my-inquiry-form .box dd a {margin-left:8px;}
.my-inquiry-form .box .btn-pack {line-height:48px; height:48px;}

.my-inquiry-form .box .item {display:inline-block; margin-top:0.8em; margin-right:var(--size30); font-weight:500; font-size:0.83em;}
.my-inquiry-form .box .small {display:block; margin-top:1em; font-size:0.8em; line-height:1.2; letter-spacing:-0.04em; color:#a8a8a8;}
.my-inquiry-form .box .input {border-radius:5px; height:48px;}


.area-right .agree {margin-top:clamp(20px, calc(40 / var(--inner) * 100vw ), 40px);}
.area-right .comment {margin-top:clamp(20px, calc(40 / var(--inner) * 100vw ), 40px);}
.area-right .comment .tit {margin-bottom:0.8em; font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2161f2;}
.area-right .comment .in {background:#f8f8f8; padding:1em; border-radius:6px; font-size:0.94em; font-weight:400; line-height:1.8em; letter-spacing:-0.04em; color:#505050;}

.pop-content {padding:clamp(20px, calc(70 / var(--inner) * 100vw ), 70px); width:95vw; max-width:600px; background:#fff; border-radius:var(--border-radius); text-align:center;}
.pop-content .tit {margin-bottom:clamp(20px, calc(65 / var(--inner) * 100vw ), 65px); font-size:clamp(18px, calc(28 / var(--inner) * 100vw ), 28px); font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.pop-content .txt {margin-top:1.6em; font-size:1.13em; font-weight:400; line-height:1.6; letter-spacing:-0.04em; color:#505050;}
.pop-content .btn-wrap {margin-top:clamp(20px, calc(70 / var(--inner) * 100vw ), 70px);}
.pop-content .btn-wrap .btn-pack {font-size:1em;}
.fee-pop-wrap .fancybox-close {display:none;}

/* 적립금 */
.point .head {margin-bottom:15px;}
.point .head dl {border:1px solid #ccc; background:#fff; text-align:center; font-weight:bold;}
.point .head dt {padding:8px 0; background:#f0f0f0; border-bottom:1px solid #ddd; color:#666;}
.point .head dd {padding:8px 0;}
.point table {width:100%; border-collapse:collapse; border-spacing:0px; font-size:15px; line-height:1.5em;}
.point table th {padding:var(--size20) 20px; font-weight:400; border-top:1px solid #505050; border-bottom:1px solid #505050; font-weight:600; letter-spacing:-0.04em; color:#2c2c2c;}
.point table td {padding:var(--size20) 20px; text-align:center; border-bottom:1px solid #dfdfdf; font-weight:500; color:#505050; letter-spacing:-0.04em;}
.point-plus {color:#2161f2 !important;}
.point-minus {color:#ec4444 !important;}

.point .title {font-weight:bold; margin:0 0 5px 0;}
.point .list dl {border:1px solid #ccc; border-radius:8px; background:#fff; margin:0 0 10px 0;}
.point .list dt {padding:8px 10px; border-bottom:1px solid #505050; color:#333;}
.point .list dd {padding:3px 10px; font-size:14px; overflow:hidden;}
.point .list dd:nth-child(2) {padding-top:10px;}
.point .list dd:last-child {padding-bottom:10px;}
.point .list dd .fl {color:#2c2c2c;}
.point .list dd .fr {color:#505050;}

/* 회원 공통 */
.member-bg {}
.member-bg .sub-title {padding-top:clamp(40px, calc( 120 / var(--inner) * 100vw ), 120px); margin:0 auto clamp(30px, calc(70 / var(--inner) * 100vw ), 70px); text-align:center;}
.required {color:var(--color-primary);}

/* 로그인 */
.login-area {max-width:470px; margin:0 auto;}
.login-area .input {border-radius:5px;}
.login-tab {text-align:center; border-bottom:4px solid var(--color-primary); margin-bottom:50px;}
.login-tab ul {display:flex; padding:0 2px;}
.login-tab ul li {flex:1; border:4px solid #dfdfdf; border-bottom:0; margin:0 -2px;}
.login-tab ul li a {display:block; color:#333; font-size:18px; line-height:60px;}
.login-tab ul li.active {position:relative; z-index:2; border-color:var(--color-primary);}
.login-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:#fff;}
.login-tab ul li.active a {color:var(--color-primary); font-weight:500;}
.login-content .group {margin-bottom:8px;}
.login-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.login-content .links {display:flex; justify-content:space-between; margin-top:14px; font-size:14px; color:#505050; font-weight:500; line-height:1.5em;}
.login-content .links a:hover {text-decoration:underline;}
.login-content .links .bar {display:inline-block; vertical-align:middle; margin:-.2em 12px 0; width:1px; height:16px; background:#ddd;}

.login-content .btn-pack {display:block; width:100%; margin-top:10px;}
.login-content .btn-pack.focus {margin-top:20px;}
.login-content .btn-pack.xlarge {font-weight:500;}

.sns-login {text-align:center; margin-top:50px;}
.sns-login .tit {position:relative; color:#333; font-size:15px; font-weight:400; line-height:1.3em; margin-bottom:35px;}
.sns-login .tit:before {content:""; position:absolute; top:50%; left:0; margin-top:-1px; width:100%; height:1px; background:#ddd;}
.sns-login .tit span {display:inline-block; position:relative; padding:0 30px; background:#fff;}
.sns-login a {margin:0 12px;}

/* 약관동의 */
.agree-wrap {max-width:680px; margin:0 auto 50px;}
.agree-wrap .group {margin-top:40px;}
.agree-wrap .group:first-child {margin-top:0;}
.agree-wrap .agree-tit {color:#333; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.agree-wrap .agree-tit .checkbox label:before {width:24px; height:24px; background:#fff url("../images/member/checkbox.png") 50% 50% no-repeat; border:2px solid #ccc; border-radius:100%;}
.agree-wrap .agree-tit .checkbox input:checked + label:before {background-color:var(--color-primary); border-color:var(--color-primary); background-image:url("/images/member/checkbox_on.png");}
.agree-wrap .agree-box {position:relative; max-height:175px; margin-top:17px; padding:22px; border-radius:var(--border-radius); background:#fff; border:1px solid #ddd; overflow:auto;}
.agree-wrap .agree-box .terms-wrap {color:#767676; font-size:14px;}
.agree-wrap .agree-box .terms-wrap .sec {margin-bottom:20px;}
.agree-wrap .agree-box .terms-wrap .sec h3 {color:#767676; font-size:14px; font-weight:300; margin-bottom:0;}
.agree-wrap .agree-box .terms-wrap .sec strong {font-weight:300;}

.terms-wrap {font-weight:300; color:#666; line-height:1.75em; letter-spacing:-.03em;}
.terms-wrap .sec {margin-bottom:40px;}
.terms-wrap .sec h3 {color:#222; font-size:1.1em; font-weight:500; margin-bottom:7px;}
.terms-wrap .sec p {margin-bottom:1em;}
.terms-wrap .sec strong {font-weight:500;}
.terms-wrap .sec ol li {padding-left:1em; text-indent:-1em;}
.terms-wrap .sec ol li ol li {padding-left:1.35em; text-indent:-1.35em;}
.terms-wrap .policy-contact {display:flex; padding:20px 0; background:#fafafa; border:1px solid #e5e5e5; margin-bottom:1em;}
.terms-wrap .policy-contact dl {flex:1; padding:0 20px; border-left:1px solid #e5e5e5;}
.terms-wrap .policy-contact dl:first-child {border-left:0;}
.terms-wrap .policy-contact dt {font-weight:500; color:#333; margin-bottom:12px;}

.agree-wrap2 {max-width:680px; margin:0 auto 50px;}
.agree-wrap2 .tit {font-size:clamp(18px, calc(24 / var(--inner) * 100vw ), 24px); font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#333;}
.agree-wrap2 .txt {margin:1.25em 0 2em 0; font-weight:400; letter-spacing:-0.04em; color:#878787;}
.agree-wrap2 .wrap {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:20px 30px; border:1px solid #2c2c2c; border-radius:100vh; background:#fff;}
.agree-wrap2 .wrap .tx {font-weight:600; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}
.agree-wrap2 .wrap span {display:inline-block; margin-right:var(--size30); font-weight:500; font-size:0.94em;}
.agree-wrap2 .wrap span:last-child {margin-right:0;}

.agree-wrap2 .radiobox input {position:absolute; top:0; left:0; width:0; height:0; border:0; opacity:0; z-index:-1;}
.agree-wrap2 .radiobox label {display:inline-block;}
.agree-wrap2 .radiobox label:before {content:""; display:inline-block; vertical-align:middle; margin:-.2em 8px 0 0; width:18px; height:18px; background-color:#f4f4f4; border:1px solid #ccc; border-radius:100%;}
.agree-wrap2 .radiobox input:checked + label:before {background:#fff url("/images/bbs/radiobox.png") 50% 50% no-repeat; border-color:var(--color-primary);}
.agree-wrap2 .radiobox input:focus + label:before {outline:2px solid highlight;}

/* 회원가입 */
.join-form {width:100%; max-width:680px; margin:0 auto; position:relative;}
.join-form .join-form-txt {color:#505050; font-weight:300; line-height:1.4em; margin-bottom:12px;}
.join-form .group {padding:clamp(20px, calc(50 / var(--inner) * 100vw ), 50px); margin-bottom:clamp(20px, calc(40 / var(--inner) * 100vw ), 40px); background:#fff; border-radius:var(--border-radius); box-shadow:var(--shadow); border:1px solid #2c2c2c;}
.join-form .group:last-child {margin-bottom:0;}
.join-form .cate {margin-bottom:clamp(10px, calc(30 / var(--inner) * 100vw ), 30px); font-size:0.88em; font-weight:500; line-height:1; letter-spacing:-0.04em; color:#a8a8a8;}
.join-form .cate.top {position:relative; padding-left:1.86em; color:#e60012;}
.join-form .cate.top:before {content:''; position:absolute; left:0; top:0; width:0.93em; height:1.07em; background:url('/images/member/icon-cate1-h.png') no-repeat 50% 50%/contain;}
.join-form .cate.top.ver2 {padding-left:3.57em;}
.join-form .cate.top.ver2:before {content:''; position:absolute; left:0; top:0; width:2.79em; height:1.07em; background:url('/images/member/icon-cate2-h.png') no-repeat 50% 50%/contain;}

.join-form table {width:100%; text-align:left; border-collapse:collapse; border-spacing:0px; line-height:1.5em; letter-spacing:-.04em; color:#2c2c2c;}
.join-form table .input {border-radius:5px; height:48px;}
.join-form table th {display:block; padding-bottom:13px;}
.join-form table tr:last-child td:last-child {padding-bottom:0;}
.join-form table td {display:block; padding-bottom:29px;}
.join-form table td a {margin-left:8px;}
.join-form table .btn-pack {line-height:48px; height:48px;}
.join-form .buttons {margin:0; margin-top:clamp(20px, calc(70 / var(--inner) * 100vw ), 70px); text-align:center;}
.join-form input[readonly] {background-color:#e8e8e8; color:#686868;}
.join-form .leave-btn {display:inline-block; margin-top:1.4em; font-size:0.88em; font-weight:500; line-height:1.4; letter-spacing:-0.04em; color:#878787; text-decoration:underline;}
.join-form .item {display:inline-block; margin:0 var(--size25) var(--size15) 0;}

.certi-number {position:relative; margin-top:10px;}
.certi-number .time {position:absolute; right:20px; top:50%; transform:translateY(-50%); font-weight:400; line-height:1.2; letter-spacing:-0.04em; color:#2c2c2c;}

/* 가입완료 */
.join-complete {text-align:center; max-widtH:470px; margin:0 auto;}
.join-complete .in {padding:clamp(20px, calc(50 / var(--inner) * 100vw ), 50px); background:#fff; border-radius:var(--border-radius); box-shadow:var(--shadow); border:1px solid #2c2c2c;}
.join-complete .img {margin-bottom:35px;}
.join-complete .tit {color:var(--color-primary); font-size:24px; font-weight:600; line-height:1.4em; letter-spacing:-.04em; margin-bottom:20px;}
.join-complete .txt {color:#505050; font-size:18px; line-height:1.6em; letter-spacing:-.04em;}
.join-complete .icon {width:180px; height:180px; background:var(--color-primary) url("../images/member/complete.png") 50% 50% no-repeat; border-radius:100%; margin:36px auto 45px;}
.join-complete .buttons {margin:0; margin-top:32px;}
.join-complete .buttons .cen {display:flex;}
.join-complete .buttons .cen .btn-pack {width:50%;}

/* 게정찾기 */
.find-area {max-width:470px; margin:0 auto;}
.find-area .input {border-radius:5px;}
.find-tab {text-align:center; margin-bottom:30px;}
.find-tab ul {display:flex; margin:0 -5px;}
.find-tab ul li {flex:1; padding:0 5px;}
.find-tab ul li a {display:block; color:#a8a8a8; font-size:18px; font-weight:500; line-height:54px; border-bottom:1px solid #dfdfdf;}
.find-tab ul li.active a {color:#2c2c2c; font-weight:500; border-color:#2c2c2c;}

.find-content .group {margin-bottom:8px;}
.find-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.find-content .btn-pack {display:block; width:100%; margin-top:var(--size20-10);}
.find-content .btn-pack.focus {margin-top:30px;}
.find-content .btn-pack.xlarge {font-weight:500;}
.find-result {text-align:center; margin-bottom:20px; padding:clamp(20px, calc(50 / var(--inner) * 100vw ), 50px); background:#fff; border-radius:var(--border-radius); box-shadow:var(--shadow); border:1px solid #2c2c2c; color:#505050; font-size:18px; font-weight:400; line-height:1.75em; letter-spacing:-.03em;}
.find-result h4 {font-size:22px; font-weight:600; color:var(--color-primary); line-height:1.4em; letter-spacing:-.04em; margin-bottom:30px;}
.find-result p:first-child {margin-bottom:10px;}
.find-result .name {color:var(--color-primary); font-size:30px; font-weight:700; line-height:1.5em;}

/* 회원탈퇴 */
.member-leave .txt {text-align:center; color:#505050; line-height:1.7em; letter-spacing:-.03em; margin-bottom:40px;}
.member-leave .txt .tit {color:#333; font-size:20px; line-height:1.5em; margin-bottom:15px;}
.member-leave .form {max-width:470px; margin:0 auto 40px; padding:50px; color:#666; font-size:16px; line-height:1.5em; background:#f9f9f9; border:1px solid #e5e5e5; border-radius:10px;}
.member-leave .form .group {display:flex; align-items:center; margin-bottom:20px;}
.member-leave .form .group:last-child {margin-bottom:0;}
.member-leave .form .group .label-tt {width:90px; color:#222; font-weight:500;}
.member-leave .form .group .text-id,
.member-leave .form .group .input {flex:1 1 auto; min-width:0; width:1%;}