@charset "utf-8";
/* 마이페이지 공통 */
.mypage { display: flex; align-items: flex-start; height: 100%; }
.mypage .side { max-width: 200px; width: 100%; margin-right: 80px; position: sticky; top: 130px; }
.mypage .side h2 { display: inline-block; font-size: 56px; font-weight: 500; line-height: 1em; margin-bottom: 60px; font-family: var(--font-oswald);}
.mypage .mypage-menu li { margin-bottom: 35px; }
.mypage .mypage-menu li:last-child { margin-bottom: 0; }
.mypage .mypage-menu li .tit { font-size: 18px; font-weight: 500; line-height: 1em; color: #2c2c2c; margin-bottom: 20px; display: inline-block; position: relative; padding-right: 15px; }
.mypage .mypage-menu li .tit::after { content: ""; position: absolute; right: -10px; top: 0; bottom: 0; margin: auto; width: 4px; height: 4px; background: var(--color-primary); border-radius: 4px; transition: .3s; opacity: 0; }
.mypage .mypage-menu li.active .tit::after { opacity: 1; right: 0; }
.mypage .mypage-menu li:hover .tit::after { opacity: 1; right: 0; }
.mypage .mypage-menu li .links a { display: block; font-size: 16px; color: #676767; font-weight: 400; margin-bottom: 8px; }
.mypage .mypage-menu li .links a:last-child { margin-bottom: 0; }
.mypage .mypage-menu li .links a:hover { color: var(--color-primary);}
.mypage .side .leave-btn { display: block; margin-top: 60px; line-height: 1em; font-size: 14px; font-weight: 400; }
.mypage .contents { flex: 1 1 auto; min-width: 0; width: 1%; }
.mp-wrap { margin-bottom: 70px; }
.mp-wrap:last-child { margin-bottom: 0;}
.mp-tit { color: #ccc; font-size: 32px; font-weight: 800; line-height: 1.5em; margin-bottom: 70px; }
.mp-tit span { color: #2c2c2c;}
.mp-tit2 { font-size: 24px; font-weight: 800; line-height: 1.5em; color: #2c2c2c; margin-bottom: 35px; } 
.mp-titbox { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 35px; }
.mp-titbox .mp-tit2 { margin-bottom: 0; }
.mp-tab { display: flex; gap: 12px; }
.mp-tab li { width: auto; }
.mp-tab li a { display: inline-block; font-size: 24px; font-weight: 800; line-height: 1.5em; color: #ccc;}
.mp-tab li.active a { color: var(--color-secondary);}
.mp-tab li:hover a { color: var(--color-secondary);}
.mp-link { display: inline-block; padding: 14px 20px; line-height: 1.1em; border: 1px solid #eee; border-radius: 25px; font-size: 14px; font-weight: 500; color: #2c2c2c;}
.mp-link:hover { border-color: var(--color-secondary); color: var(--color-secondary);}

/* 인트로 */
.intro-info { display: flex; gap: 20px; flex-wrap: wrap ;}
.intro-info .col { width: calc(100%/2 - 10px);}
.intro-info .col h4 { position: relative; margin-bottom: 22px; padding-left: 16px; font-size: 18px; font-weight: 600; color: #2c2c2c; }
.intro-info .col h4::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 6px; background: var(--color-primary);}
.intro-info .col .cnt { padding: 30px 34px; border-radius: 32px; }
.intro-info .col .cnt.bg1 { background: #fef5f5; }
.intro-info .col .cnt.bg2 { background: #f8f8f8; }
.intro-info .col .profile { display: flex; align-items: center; margin-bottom: 24px; }
.intro-info .col .profile .thumb { width: 120px; margin-right: 24px; }
.intro-info .col .profile .thumb>div { position: relative; overflow: hidden; padding-bottom: 100%; display: block; }
.intro-info .col .profile .thumb img { position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:contain;}
.intro-info .col .profile .thumb img { width: 100%; height: 100%; object-fit: cover; }
.intro-info .col .profile .info { flex: 1 1 auto; min-width:0; width:1%; }
.intro-info .col .profile .info .name { font-size: 28px; line-height: 1em; color: #2c2c2c; font-weight: 700; margin-bottom: 10px; }
.intro-info .col .profile .info .belong { font-size: 15px; font-weight: 400; color: #a8a8a8; }
.intro-info .col .cnt.bg1 .info .belong { color: #dfa0a0; } 
.intro-info .col .profile-contact { display: flex; gap: 6px; flex-wrap: wrap; }
.intro-info .col .profile-contact .group { width: calc(100%/2 - 3px); background: #fff; display: flex; justify-content: space-between; gap: 7px; padding: 12px 20px; border-radius: 12px; align-items: center;}
.intro-info .col .profile-contact .group.w100 { width: 100%; }
.intro-info .col .profile-contact .group .tit { font-size: 15px; font-weight: 600; color: var(--color-primary);}
.intro-info .col .profile-contact .group .txt { font-family: var(--font-oswald); font-size: 16px; }
.intro-info .col .cnt.bg2 .profile-contact .group .tit { color: #878787; }
[data-tab-content] { display: none; }
[data-tab-content].active { display: block; }
.mp-link-wrap { position: relative; }
.intro-ctt ul { display: flex; border-top: 1px solid #eee; border-bottom: 1px solid #eee; flex-wrap: wrap; gap: 8px; }
.intro-ctt ul li { width: calc(100%/4 - 6px); text-align: center; padding: 40px 0;}
.intro-ctt ul li .tit { line-height: 1em; font-size: 15px; font-weight: 400; color: #676767; margin-bottom: 14px; }
.intro-ctt ul li .num { line-height: 1em; font-family: var(--font-oswald); font-size: 32px; font-weight: 500; color: #2c2c2c;}
.intro-ctt ul li .num.cancle { color: #ccc; }
.intro-ctt .mp-link { position: absolute; right: 0; top: -10px; }

/* 기본정보관리 */
.join-form { border-top: 2px solid #2c2c2c; padding: 30px 0 50px; border-bottom: 2px solid #eee;}
.join-form table {width:100%; border-collapse:collapse; font-size:16px; line-height:1.5em;}
.join-form table th { font-weight:600; color:#2c2c2c; text-align: left; font-size: 18px; padding: 15px 0;}
.join-form table th span { width: 8px; height: 8px; border-radius: 8px; display: inline-block; background: #ccc; margin-right: 10px; position: relative; top: -2px; }
.join-form table th span.required { background: var(--color-primary);}
.join-form table td {padding:15px 20px; color:#2c2c2c; line-height: 1.5em; height: 90px; }
.join-form .input { width: 100%; height: 60px; border-radius: 8px; border-color: #eee;}
.join-form .input::placeholder { color: #a8a8a8; font-weight: 200; }
.join-form input[readonly] {background-color:#f8f8f8; color:#505050;}

/* 장바구니 */
.cart-all-select { display: flex; justify-content: space-between; align-items: center; }
.cart-all-select a { display: inline-block; font-size: 14px; color: #2c2c2c;}
.shop-table {border-top:2px solid #2c2c2c; margin-bottom:20px;}
.shop-table ul li {display:flex; align-items:center; padding:50px 0; border-bottom:2px solid #eee ;}
.shop-table .order-check {width:50px;}
.shop-table .order-check .checkbox label:before { border-radius: 4px; background-color: #f8f8f8; border: 1px solid #dfdfdf; width: 20px; height: 20px; }
.shop-table .order-check .checkbox input:checked + label:before { background:var(--color-primary) url("/images/bbs/checkbox.png") 50% 50% no-repeat; border-color:var(--color-primary);}
.shop-table .order-image {width:130px; margin-right:25px;}
.shop-table .order-image a {position: relative; padding-bottom: 87%; display: block; overflow: hidden; border-radius: 16px; background: #f8f8f8;}
.shop-table .order-image img { position:absolute; top:50%; left:50%; transition:.4s ease-in-out; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); width:auto; height:auto !important; max-width:60%; min-height:60%; object-fit:contain;  filter: drop-shadow(-0px 8px 24px rgba(0, 0, 0, 0.3)); background-size: contain; }
.shop-table .order-fx {flex:1 1 auto; min-width:0; width:1%; display: flex; }
.shop-table .order-fx .tit2 { font-size: 14px; font-weight: 500; color: #a8a8a8; line-height: 1em; margin-bottom: 8px; }
.shop-table .order-fx .tit2 a { color: #2c2c2c; text-decoration: underline; text-underline-position: under; display: inline-block; padding-left: 8px; }
.shop-table .order-fx .tit2 a:hover { color: var(--color-primary);}
.shop-table .order-title { width: 240px; }
.shop-table .order-title.wt { flex: 1 1 auto; min-width:0; width:1%;}
.shop-table .order-title .tit {color:#2c2c2c; font-size:20px; font-weight:500; line-height:1.5em; font-family: var(--font-oswald);}
.shop-table .order-opt { flex: 1 1 auto; min-width:0; width:1%; }
.shop-table .order-opt .txt { font-size: 14px; font-weight: 400; color: #676767; line-height: 1.5em; padding-top: 5px; }
.shop-table .order-quantity {width:84px; text-align:center;}
.shop-table .order-quantity .input {width:100%; height:36px; padding:0; font-size:13px; line-height:1.5em; text-align:center; margin-bottom:4px; border-radius: 4px; }
.shop-table .order-quantity .btn-pack {display:block; width:100%; height: 36px; background: #121212; border-radius: 4px; }
.shop-table .order-serial { text-align: center; margin-right: 80px; }
.shop-table .order-serial .tit { font-size: 16px; font-weight: 400; color: #2c2c2c; margin-bottom: 0; }
.shop-table .order-serial .date { font-size: 14px; font-weight: 400; color: #a8a8a8;}
.shop-table .order-qnt {width:100px; text-align:center;}
.shop-table .order-delete {width:18px; text-align:right; margin-left:50px;}
.shop-table .order-btn {width:95px; text-align:center; margin-left:20px;}
.shop-table .order-btn p {margin:4px 0;}
.shop-table .order-btn strong {font-weight:500;}
.shop-table .order-btn .btn-pack.small {display:block; margin:4px auto; width:100%; padding:0;}
.shop-table .ico-delete {position:relative; vertical-align:middle; margin-top:-.2em; display:inline-block; overflow:hidden; text-indent:-999em; width:18px; height:18px; overflow:hidden;}
.shop-table .ico-delete:before, .shop-table .ico-delete:after {content:""; position:absolute;top:0;left:8px; height:100%;width:2px;background-color:#505050;}
.shop-table .ico-delete:before {transform:rotate(45deg);}
.shop-table .ico-delete:after {transform:rotate(-45deg);}
.shop-table .ico-delete:hover {opacity:.5;}
.cart-choice { padding: 50px; border-radius: 32px; background: #f8f8f8; display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap;}
.cart-choice h4 { font-size: 24px; font-weight: 800; color: #2c2c2c;}
.cart-choice h4 .num { color: var(--color-primary);}
.cart-choice .btns { display: inline-block; padding: 24px 40px; border-radius: 50px; line-height: 1.2em; color: #fff; background: var(--color-primary); font-size: 18px; font-weight: 700;}
.cart-choice .btns:hover { background: var(--color-secondary);}
.cart-choice .price { font-size: 24px; font-weight: 800; color: #2c2c2c;}
.mp-submit { display: flex; justify-content: space-between; align-items: center; margin-top: 70px; flex-wrap: wrap;}
.mp-submit.jt { justify-content: center;}
.mp-submit .check { font-size: 18px; font-weight: 500; }
.mp-submit .check a { color: #a8a8a8; text-decoration: underline; text-underline-position: under; margin-left: 10px; display: inline-block; }
.mp-submit .checkbox.circle label:before { background-color: #fff; border-color: #2c2c2c;}
.mp-submit .checkbox input:checked + label:before {background:var(--color-secondary) url("/images/bbs/checkbox.png") 50% 50% no-repeat; border-color:var(--color-secondary);}
.mp-submit .btns { display: flex; gap: 10px; }
.mp-submit .btns { justify-content: center; text-align: center; }
.mp-submit .btn { display: inline-block; padding: 24px 40px; line-height: 1.2em; border-radius: 50px; border: 2px solid #dfdfdf; font-size: 18px; font-weight: 700; }
.mp-submit .btn.submit { background: var(--color-primary); border-color: var(--color-primary); color: #fff; cursor: pointer;}
.mp-submit .btn.cancle { background: #f4f4f4; color: #ccc; border-color: #f4f4f4;}
.mp-submit .btn:hover { color: #fff; background: var(--color-secondary); border-color: var(--color-secondary);}

/* 견적내역 상세 */
.estimate-info { display: flex; padding-bottom: 40px; border-bottom: 1px solid #eee; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.estimate-info p { font-weight: 400; color: #2c2c2c;}
.estimate-info p strong { font-weight: 600; color: #878787; padding-right: 10px; }
.estimate-info p.status { color: var(--color-primary); font-weight: 600; }
.estimate-info p.status .date { font-size: 14px; font-weight: 400; display: inline-block; padding-left: 5px; }
.estimate-info .right { display: flex; gap: 10px 30px; flex-wrap: wrap;}

/* 회원탈퇴 */
.member-leave .txt {text-align:left; color:#505050; line-height:1.7em; margin-bottom:40px;}
.member-leave .txt .tit {color:#333; font-size:20px; line-height:1.5em; margin-bottom:15px;}
.member-leave .form {padding:50px; font-size:16px; line-height:1.5em; background:#fff; border-radius:10px; margin-bottom: 40px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);}
.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:700;}
.member-leave .form .group .text-id,
.member-leave .form .group .input {flex:1 1 auto; min-width:0; width:1%; height: 60px; border-radius: 8px; border-color: #eee; display: flex; align-items: center; }