@charset "utf-8";

.login-area {max-width:1000px; margin:40px auto; padding:50px 75px 94px; background:#f8f8f8; border:1px solid #e5e5e5; border-top:2px solid #d2cdcd; text-align:center;}
.login-area .inner {max-width:600px; margin:0 auto;}
.login-area .tit {margin-bottom:34px;}
.login-area .tit h3 {font-size:37px; line-height:1.25em;}
.login-area .tit h3 strong {font-weight:700;}
.login-area .tit p {color:#333; font-size:16px; font-weight:300; line-height:1.6em; margin-top:12px;}
.login-area .form {position:relative; padding-right:210px;}
.login-area .form .input {display:block; margin-bottom:10px; width:100%; height:60px; font-weight:300; letter-spacing:-.03em; padding:9px 19px;}
.login-area .form .submit {position:absolute; top:0; right:0; display:block; width:200px; height:130px; background:#666; border:0; color:#fff; font-size:24px; line-height:1.3em; cursor:pointer;}
.login-area .keep-login {text-align:left; margin-left:12px;}
.login-area .keep-login .checkbox label:before {width:18px; height:18px;}
.login-area .find .tab {text-align:center;}
.login-area .find .tab ul {display:flex; border:1px solid #e5e5e5; background:#fff;}
.login-area .find .tab ul li {flex:1; padding:4px; border-left:1px solid #e5e5e5;}
.login-area .find .tab ul li:first-child {border-left:0;}
.login-area .find .tab ul li a {display:block; color:#000; font-size:18px; font-weight:300; line-height:50px; text-decoration:none !important;}
.login-area .find .tab ul li.active a {background:#eb6867; color:#fff;}
.login-area .find .tab + table {border-top:0;}
.login-area .find table {width:100%; border-collapse:collapse; border-spacing:0px; background:#fff; border:1px solid #e5e5e5; line-height:1.5em;}
.login-area .find table th {width:190px; padding:11px; font-weight:400; border-bottom:1px solid #e5e5e5; background:#f8f8f8;}
.login-area .find table th.tt {background:#fff; height:88px; font-size:22px; font-weight:700;}
.login-area .find table td {padding:11px; font-weight:300; text-align:left; border-bottom:1px solid #e5e5e5;}
.login-area .find table td.txt {padding:20px 11px;}
.login-area .find table td.txt-help {padding:30px 11px; text-align:center;}
.login-area .find.mg {margin-bottom:78px;}
.login-area .flex-btn {display:flex;justify-content:space-between;align-items:center;word-break:break-all;}
.login-area .flex-btn .btn-pack.medium {width:140px; padding:0; letter-spacing:-.03em;}
.login-area .or {position:relative; margin:34px 0 44px; color:#666; font-weight:500; line-height:1.3em;}
.login-area .or:before,
.login-area .or:after {content:""; position:absolute; top:50%; margin-top:-1px; width:calc(50% - 22px); border-bottom:1px solid #ccc;}
.login-area .or:before {left:0;}
.login-area .or:after {right:0;}
.login-area h4 {text-align:left; margin-bottom:15px; font-size:20px; line-height:1.3em; letter-spacing:-.03em; font-weight:400;}
.login-area .help-txt {font-size:14px; font-weight:300; text-align:left; line-height:1.5em; margin:10px 0 0 7px;}
.login-area .help-txt img {vertical-align:middle; margin:-.2em 2px 0 0;}
.login-area .input-group {margin-bottom:10px;}
.login-area .input-group .input {display:block; width:100%; height:60px; padding:9px 19px; font-weight:300; letter-spacing:-.03em; position:relative; -ms-flex:1 1 auto; flex:1 1 auto; width:1%; min-width:0;}
.login-area .buttons {margin-top:46px;}

.sns-login .row {display:flex; margin:0 -7px; margin-top:33px;}
.sns-login .col {flex:1; padding-left:7px; padding-right:7px;}
.sns-login .bt {display:block; color:#fff !important; line-height:60px; text-align:center; font-size:16px;}
.sns-login .bt img {vertical-align:middle; margin:-.25em 1px 0 0;}
.sns-login .login-naver {background:#2db400;}
.sns-login .login-google {background:#4285f4;}
.sns-login .login-kakao {background:#fbbc05;}
.sns-login .login-apple {background:#000000;}

.btn-join {display:block; margin-top:10px; color:#fff !important; font-size:24px; line-height:80px; text-align:center; background:#303030;}

.btn-find {display:block; margin-top:10px; color:#333 !important; font-size:16px; font-weight:300; line-height:48px; text-align:center; background:#fff; border:1px solid #e5e5e5}
.btn-find2 {display:block; width:400px; margin:0 auto; color:#fff !important; font-size:24px; line-height:80px; text-align:center; background:#303030;}

.find-password {max-width:500px; margin:0 auto; padding:10px 0 30px; text-align:center;}
.find-password .txt {color:#333; font-weight:300; margin-bottom:35px;}
.find-password .input-group {margin-bottom:10px;}
.find-password .input {display:block; width:100%; height:60px; padding:9px 19px; font-weight:300; letter-spacing:-.03em; position:relative; -ms-flex:1 1 auto; flex:1 1 auto; width:1%; min-width:0;}
.find-password .submit {display:block; margin-top:20px; width:100%; height:80px; background:#666; border:0; color:#fff; font-size:24px; line-height:1.3em;}

.join-head {text-align:center; margin-bottom:50px;}
.join-head h2 {font-size:45px; line-height:1.25em;}
.join-head p {font-size:20px; font-weight:500; line-height:1.5em; margin-top:5px;}
.join-head .sns-login {margin-bottom:-10px;}
.join-head .sns-login .row {display:inline-flex; margin-top:17px;}
.join-head .sns-login .col {width:204px;}

.join-type {display:flex; text-align:center; border:1px solid #e5e5e5; font-size:24px; font-weight:700; line-height:1.3em;}
.join-type .col {flex:1; border-left:1px solid #e5e5e5; padding:59px 0 53px}
.join-type .col:first-child {border-left:0;}
.join-type .col a {display:block;}
.join-type .col img {display:block; margin:0 auto 28px;}

.agree {padding:0 5px; color:#333; font-weight:300; letter-spacing:-.03em; line-height:1.625em;}

.agree-wrap .group {margin-bottom:60px;}
.agree-wrap h3 {font-size:22px; line-height:1.3em; margin-bottom:10px;}
.agree-wrap .agree.box {position:relative; max-height:400px; color:#333; font-weight:300; overflow:auto; padding:20px; line-height:1.5em; border:1px solid #e5e5e5;}
.agree-wrap .check {text-align:right; margin-top:12px; font-weight:300;}
.agree-wrap .req {color:#ff586b}

.join-complete {max-width:1000px; margin:64px auto 0; padding:50px 50px 100px; background:#f8f8f8; border:1px solid #e5e5e5; border-top:2px solid #d2cdcd; text-align:center;}
.join-complete .inner {max-width:600px; margin:0 auto;}
.join-complete h3 {font-size:37px; line-height:1.3em; letter-spacing:-.04em; margin-bottom:10px;}
.join-complete p {color:#333; font-weight:300;}
.join-complete .line {border-bottom:1px solid #ccc; margin:45px 0;}
.join-complete .btn-pack {margin:0 2px;}

.my-info-top {border:1px solid #e5e5e5; padding:17px 29px; font-weight:300; line-height:1.625em; margin-bottom:30px;}
.my-info-top ul li {padding-left:.6em; text-indent:-.6em;}
.my-info-top ol li {padding-left:1.1em; text-indent:-1.1em;}

/* 마이페이지 메인 */
.mypage-top {display:table; width:100%; height:120px; border:3px solid #e5e5e5; background:#f7f9f8;}
.mypage-top .grade {display:table-cell; width:32%; padding:0 29px; vertical-align:middle; background:#f8f8f8;}
.mypage-top .grade .level {display:inline-block; vertical-align:middle; margin-right:22px;}
.mypage-top .grade p {display:inline-block; color:#000; font-size:16px; font-weight:300; line-height:1.5em; vertical-align:middle; margin-right:15px;}
.mypage-top .btn-pack {width:130px; font-size:14px;}
.mypage-top .layer-wrap {position:relative; display:inline-block; vertical-align:middle;}
.mypage-top .layer-area {position:absolute; width:305px; border:1px solid #999; background:#fff; text-align:left;}
.mypage-top .layer-area .ly-tit {padding:5px 15px; background:#f4f4f4;}
.mypage-top .layer-area .ly-tit strong{font-size:14px; font-weight:500; line-height:1.5em;}
.mypage-top .layer-area .ly-cont {padding:0 15px;}
.mypage-top .layer-area dl{overflow:hidden; padding:10px 5px 10px 5px; font-size:12px; line-height:1.5em; border-top:1px solid #e8e8e8;}
.mypage-top .layer-area dl:first-child{border-top:none 0;}
.mypage-top .layer-area dt{float:left; width:80px;}
.mypage-top .layer-area dd{float:left; width:180px;}
.mypage-top .layer-area .ly-close {position:absolute; top:8px; right:10px; width:20px; height:20px; overflow:hidden; text-indent:-999em;}
.mypage-top .layer-area .ly-close:before,
.mypage-top .layer-area .ly-close:after {content:""; position:absolute; top:0; left:50%; width:1px; height:100%; background:#999;}
.mypage-top .layer-area .ly-close:before {transform:rotate(45deg)}
.mypage-top .layer-area .ly-close:after {transform:rotate(-45deg)}
.mypage-top .layer-area.active {display:block !important;}
.mypage-top .wallet {display:table-cell; width:68%; vertical-align:middle; background:#ffffff;}
.mypage-top .wallet ul{display:table; table-layout:fixed; width:100%; height:100%;}
.mypage-top .wallet ul li{display:table-cell; vertical-align:middle; padding:13px 0; font-size:16px; color:#ff586b; font-weight:700; border-left:1px solid #e5e5e5; text-align:center;}
.mypage-top .wallet ul li:first-child{border-left:none 0; width:29%}
.mypage-top .wallet ul li img {vertical-align:middle; margin-top:-.2em;}
.mypage-top .wallet ul li span {margin-right:15px; margin-left:20px; font-weight:700; color:#000; font-size:20px; line-height:1.2em;}
.mypage-top .wallet ul li strong {color:#ff586b; font-size:22px; line-height:1.2em;}

.mypage-order-info {display:table; table-layout:fixed; width:100%; box-sizing:border-box; padding:0 40px 0 0; margin:0 0 50px 0; color:#000; border:1px solid #e5e5e5; border-top:2px solid #ccc; text-align:center;}
.mypage-order-info .step {display:table-cell; vertical-align:middle; padding:0 10px;}
.mypage-order-info .step ol li{float:left; position:relative; width:16.66666666%; font-size:13px; text-align:center;}
.mypage-order-info .step ol li:after {content:""; position:absolute; top:50%; right:-14px; margin-top:0; width:28px; height:28px; background:url('../images/mypage_step_arr.png') no-repeat 50% 50%;}
.mypage-order-info .step ol li:last-child::after {display:none;}
.mypage-order-info .step ol li b{display:block; font-size:18px; line-height:1.3em; font-weight:400; margin-bottom:11px;}
.mypage-order-info .step ol li strong{display:block; width:80px; height:80px; margin:0 auto; color:#ffffff; font-family:"Roboto",sans-serif; font-size:30px; line-height:80px; background:#ccc; text-align:center;vertical-align:middle; border-radius:100%;}
.mypage-order-info .step .active strong{background:#666;}
.mypage-order-info .list {display:table-cell; width:210px; text-align:center; vertical-align:middle;}
.mypage-order-info .list ul li{display:flex; height:97px; padding:0 7px; align-items:center; justify-content:space-between; font-size:16px; font-weight:300; line-height:1.625em; border-top:1px solid #e5e5e5; text-align:left;}
.mypage-order-info .list ul li:first-child{border-top:none 0;}
.mypage-order-info .list ul li b {font-weight:300;}
.mypage-order-info .list ul li span{text-align:right;}

.my-order-list table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #ccc;}
.my-order-list table thead th {height:60px; border-bottom:1px solid #e5e5e5; color:#000; text-align:center; line-height:1.5em; font-weight:400; background:#f7f7f7;}
.my-order-list table tbody td {height:60px; padding:5px 14px; text-align:center; font-weight:300; line-height:1.625em; color:#333; border-bottom:1px solid #e5e5e5; border-left:1px solid #e5e5e5;}
.my-order-list table tbody td:first-child {border-left:0;}
.my-order-list table tbody td.subject {text-align:left; padding-left:40px;}
.my-order-list table tr.active td {background:#f8f8f8;}
.my-order-list table tr.td-view {display:none;}
.my-order-list table tr.td-view td {text-align:left; padding:20px; background:#fff; line-height:1.8em;}
.my-order-list table tr.td-view.active {display:table-row;}
.my-order-list table .question.active td {background:#f8f8f8}
.my-order-list table .answer {display:none;}
.my-order-list table .answer.active {display:table-row}
.my-order-list table .answer .cont {padding:24px 0; background:#fff;}
.my-order-list .order-num {word-break:break-all; color:#ff586b; font-size:20px; line-height:1.4em; font-weight:700;}
.my-order-list .txt .num {color:#3333cc;}
.my-order-list .btn-pack.small {min-width:120px; height:34px; line-height:32px; font-size:14.5px; margin:1px 0;}
.my-order-list .btn-pack.medium {min-width:120px; font-size:14.5px; margin:1px 0;}
.my-order-list .bt-link {font-weight:500; display:inline-block;}
.my-order-list .bt-link img {vertical-align:middle; margin:-.1em 0 0 0;}
.my-order-list .step {display:inline-block;color:#fff;background:#666;padding:0 14px;min-width:100px;line-height:36px;}
.my-order-list .step.s1 {background:#999;}
.my-order-list .step.s2 {background:#339933;}
.my-order-list + .paginate {margin-top:65px;}

.my-point-top {text-align:center; margin:43px 0; font-size:22px; font-weight:700; line-height:1.4em;}
.my-point-top .point {color:#eb6867;}

.my-review-list {margin-bottom:55px;}
.my-review-list > ul {border-top:2px solid #ccc;}
.my-review-list > ul > li {padding:29px 15px 29px 24px; display:flex; border-bottom:1px solid #e5e5e5;}
.my-review-list .prd-wrap {width:220px; margin-right:40px;}
.my-review-list .prd-wrap .prd-thumb {position:relative; padding-bottom:100%; border-radius:10px; overflow:hidden;}
.my-review-list .prd-wrap .prd-thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.my-review-list .prd-wrap .prd-tit {margin:14px 0 0 4px; font-size:20px; font-weight:500; line-height:1.5em;}
.my-review-list .cnt-wrap {flex:1 1 auto; min-width:0; width:1%;}
.my-review-list .user-info {position:relative; padding:8px 0; margin-bottom:8px; display:flex; align-items:center; font-size:16px; line-height:1.4em; font-weight:300;}
.my-review-list .user-info .star {line-height:0; display:flex; margin-right:9px; margin-top:-2px;}
.my-review-list .user-info .star img {margin-right:3px;}
.my-review-list .user-info .star img:last-child {margin-right:0;}
.my-review-list .user-info .rating {font-family:"Roboto",sans-serif; font-size:20px; font-weight:400; line-height:1.4em; margin-right:18px;}
.my-review-list .user-info .bar {display:inline-block; width:1px; height:16px; background:#ccc; margin:0 20px;}
.my-review-list .user-info .ctr {position:absolute; top:4px; right:0; display:flex;}
.my-review-list .user-info .btn-edit {display:inline-block; width:80px; height:29px; text-align:center; line-height:27px; background:#fff; border:1px solid #e5e5e5;}
.my-review-list .user-info .btn-delete {display:inline-block; width:29px; height:29px; margin-left:8px; background:#fff url("../images/file_del.png") 50% 50% no-repeat; border:1px solid #e5e5e5;}
.my-review-list .text-area {margin-bottom:11px; font-weight:300; line-height:26px; max-height:52px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.my-review-list .bt .btn-pack {min-width:140px;}
.my-review-list .imgs {margin-top:27px; display:none;}
.my-review-list .imgs ul {display:flex; margin:0 -6px;}
.my-review-list .imgs ul li {width:25%; padding:0 6px;}
.my-review-list .imgs ul li .img {position:relative; padding-bottom:100%; overflow:hidden;}
.my-review-list .imgs ul li .img img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.my-review-list .active .text-area {max-height:inherit; overflow:inherit; -webkit-line-clamp:inherit;}
.my-review-list .active .imgs {display:block;}