/*─────────────────────────────────────────────────────────── 공통 ───────────────────────────────────────────────────────────*/ .container { width: 1200px; margin: 0 auto; } .sub-contents { padding: 60px 0 120px;} .sub-tit { margin-bottom: 50px; font-size: 30px; text-align: center;} @media (max-width: 1024px) { .container { width: 100%; } .sub-contents { padding: 20px; } } @media (max-width: 768px) { .sub-contents { padding-top: 30px; padding-bottom: 50px;} .sub-tit { margin-bottom: 25px; font-size: 25px;} } /*─────────────────────────────────────────────────────────── 헤더 ───────────────────────────────────────────────────────────*/ .header { position: sticky; z-index: 100; top: 0; padding: 20px 0; border-bottom: 1px solid var(--gray3); background: #fff; transition: box-shadow 0.3s, padding 0.3s;} .header.scrolled { padding: 15px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1);} .header-content { display: flex; align-items: center; justify-content: space-between;} .header .pcno { display: none;} .header .logo { } .header .logo a { } .header .logo a img { width: 120px;} /*─────────── 네비게이션 ───────────*/ .nav { display: flex; justify-content: flex-end; flex: 1; gap: 50px;} .nav-item { position: relative;} .nav-link { display: block; position: relative; padding: 10px 0; color: #222; font-size: 18px; font-weight: 500; transition: color 0.3s;} .nav-link:hover { color: var(--purple);} /* .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #7056f5; transition: width 0.3s ease;} */ .nav-item:hover .nav-link::after { width: 100%;} /* 드롭다운 메뉴 */ .dropdown-menu { visibility: hidden; position: absolute; z-index: 1000; top: 100%; left: 50%; transform: translateX(-50%); min-width: 180px; padding: 12px 0; margin-top: 10px; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.12); text-align: center; opacity: 0; transition: all 0.3s ease;} .nav-item:hover .dropdown-menu { visibility: visible; margin-top: 5px; opacity: 1;} .dropdown-menu a { display: block; position: relative; padding: 10px 24px; color: var(--gray1); font-size: 14px; white-space: nowrap; transition: all 0.2s;} .dropdown-menu a:hover { background: var(--gray5); color: var(--purple);} .mobile-menu-btn { display: none;} @media (max-width: 1024px) { .header { padding: 20px;} .nav { gap: 35px;} .nav-link { font-size: 15px;} } @media (max-width: 768px) { .header { padding: 10px 0;} .header .logo { display: flex; justify-content: flex-start; padding-left: 15px;} .header .logo a { width: 30%;} .header .logo a img { width: auto;} .header .pcno { display: inline-block; margin-left: 20px;} .header .pcno a { display: block; color: #fff; font-size: 13px; background: var(--purple); width: 100%; padding: 3px 12px; border-radius: 10px;} .nav { display: none;} .header-right { display: none;} } /*─────────── 모바일 메뉴 ───────────*/ .mobile-menu { overflow-y: auto; position: fixed; z-index: 1000; top: 0; right: -300px; width: 300px; height: 100vh; padding: 80px 20px 20px; background: #fff; box-shadow: -2px 0 12px rgba(0,0,0,0.15); transition: right 0.3s;} .mobile-menu.active { right: 0;} .mobile-menu-close { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 1001; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5; transition: all 0.3s; cursor: pointer;} .mobile-menu-close:hover { background: var(--gray4);} .mobile-menu-close::before, .mobile-menu-close::after { content: ''; position: absolute; width: 20px; height: 2px; background: #333;} .mobile-menu-close::before { transform: rotate(45deg);} .mobile-menu-close::after { transform: rotate(-45deg);} .mobile-menu-item { border-bottom: 1px solid var(--gray5);} .mobile-menu-title { display: flex; align-items: center; justify-content: space-between; padding: 15px 10px; color: #333; font-size: 16px; font-weight: 600; cursor: pointer;} .mobile-menu-title::after { content: '+'; font-size: 20px; transition: transform 0.3s;} .mobile-menu-item.active .mobile-menu-title::after { transform: rotate(45deg);} .mobile-menu-sub { display: none; padding-left: 20px; padding-bottom: 10px;} .mobile-menu-sub a { display: block; padding: 10px; color: var(--gray1); font-size: 14px; transition: color 0.3s;} .mobile-menu-sub a:hover { color: var(--purple2);} @media screen and (max-width: 599px) { .mobile-menu-btn { display: flex; flex-direction: column; gap: 5px; padding: 10px; z-index: 1001;} .mobile-menu-btn span { width: 24px; height: 2px; background: var(--gray2); display: block; transition: all 0.3s;} .mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px);} .mobile-menu-btn.active span:nth-child(2) { opacity: 0;} .mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px);} } /*─────────────────────────────────────────────────────────── 메인 - 슬라이드 & 로그인 ───────────────────────────────────────────────────────────*/ .main-top-section { padding: 30px 0; background: #fff;} .main-top-grid { display: grid; grid-template-columns: 1fr 320px; align-items: center; gap: 30px; margin-bottom: 0;} @media (max-width: 1024px) { .main-top-section { padding: 20px 0;} } @media (max-width: 768px) { .main-top-section { padding: 15px 0;} .main-top-grid { grid-template-columns: 1fr; gap:0; margin-top: 0;} } /*─────────── 메인 슬라이드 ───────────*/ .bn-area { overflow: hidden; position: relative; height: 360px; padding: 20px; background: #fff;} .bn-area .bn-slider { position: relative; width: 100%; height: 360px;} .bn-area .bn-slider .slide { position: absolute; top:0; left:0; width:100%; opacity:0; transition: opacity 1.2s ease-in-out;} .bn-area .bn-slider .slide.active { position: relative; opacity:1; z-index: 1;} .bn-area .bn-slider .slide a { color: inherit; text-decoration: none;} .bn-area .bn-slider .slide .bn-cont { display: flex; justify-content: space-between; width: 100%; height: 100%; text-align: center;} .bn-area .bn-slider .slide .bn-cont .txt-area { margin-top: 30px;} .bn-area .bn-slider .slide .bn-cont .txt-area .tit { font-size: 40px; font-weight: 800; line-height: 1.3; text-align: left;} .bn-area .bn-slider .slide .bn-cont .txt-area .txt { margin-top: 10px; color: var(--gray1); font-size: 20px; font-weight: 500; line-height: 1.3; text-align: left;} .bn-area .bn-slider .slide .bn-cont .img-area { } .bn-area .bn-slider .slide .bn-cont .img-area img { width: 90%;} /* 슬라이드 컨트롤 버튼 */ /* .slider-btn { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 10; top: 50%; width: 40px; height: 40px; transform: translateY(-50%); border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #333; font-size: 18px; transition: all 0.3s; cursor: pointer;} .slider-btn:hover { background: rgba(255, 255, 255, 1);} .prev-btn { left: 12px;} .next-btn { right: 12px;} */ .slider-btn { display: none;} /* 슬라이드 인디케이터 */ .slider-indicators { display: flex; gap: 8px; position: absolute; z-index: 10; bottom: 20px; left: 5%; transform: translateX(-50%);} .indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--gray2); transition: all 0.3s; cursor: pointer;} .indicator.active { width: 24px; border-radius: 4px; background: var(--gray1);} @media (max-width: 1024px) { .bn-area { min-height: 220px;} .bn-area .bn-slider { height: 220px;} .bn-area .bn-slider .slide .bn-cont .txt-area .tit { font-size: 22px;} .bn-area .bn-slider .slide .bn-cont .txt-area .txt { font-size: 13px;} .sidebar-area { max-width: 600px; margin: 0 auto; height: auto;} } @media (max-width: 768px) { .bn-area { height: 160px; min-height: auto;} .bn-area .bn-slider { height: 200px;} .bn-area .bn-slider .slide .bn-cont { padding: 0;} .bn-area .bn-slider .slide .bn-cont .txt-area { width: 100%; margin-top: 0;} .bn-area .bn-slider .slide .bn-cont .txt-area .tit { margin-bottom: 10px;} .bn-area .bn-slider .slide .bn-cont .txt-area .txt { margin-bottom: 15px;} .bn-area .bn-slider .slide .bn-cont .img-area { width: 65%;} .bn-area .bn-slider .slide .bn-cont .img-area img { width: auto; margin-top: -20px;} .slider-btn { width: 30px; height: 30px; font-size: 14px;} .prev-btn { left: 8px;} .next-btn { right: 8px;} .slider-indicators { bottom: 10px; left: 10%;} .indicator { width: 6px; height: 6px;} .indicator.active { width: 16px;} .sidebar-area { width: 100%; height: auto;} } /*─────────── 메인 로그인 ───────────*/ .login-box { height: 250px; padding: 20px; padding-top: 30px; border: 1px solid var(--gray4); border-radius: 20px; background: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);} .login-form { display: flex; flex-direction: column; gap: 10px;} .login-input { width: 100%; height: 40px; padding: 10px; border: 1px solid var(--gray4); border-radius: 8px; background: var(--gray6); font-size: 15px; transition: border-color 0.3s;} .login-input:focus { border: 1px solid var(--purple) !important; border-color: var(--purple) !important; outline: none;} .login-input::placeholder { font-size: 15px; background: var(--gray6);} .login-btn { width: 100%; height: 46px; padding: 10px; border-radius: 8px; background: var(--purple); color: #fff; font-size: 15px; font-weight: 600; transition: background 0.3s;} .login-btn:hover { background: var(--purple);} .login-links { text-align: center;} .login-links a { color: var(--gray1); font-size: 14px; transition: color 0.3s;} .login-links a:hover { color: var(--gray);} .login-links span { margin: 0 5px; color: var(--gray2)} input.login-input:-webkit-autofill, input.login-input:-webkit-autofill:hover, input.login-input:-webkit-autofill:focus, textarea.login-input:-webkit-autofill, select.login-input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px var(--gray5) inset !important; box-shadow: 0 0 0px 1000px var(--gray5) inset !important; -webkit-text-fill-color: #222 !important; } /* 로그인 후 */ .login-member { display: flex; flex-direction: column; gap: 6px; } .member-info { padding: 12px; border-radius: 8px; background: var(--gray5);} .member-name { margin-bottom: 6px; color: var(--gray1); font-size: 13px;} .member-name .name { font-size: 15px; font-weight: 600;} .member-point { color: var(--gray1); font-size: 13px;} .member-point .point { color: var(--purple); font-size: 18px; font-weight: 700;} .member-btn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; background: var(--gray5); color: var(--gray1); font-size: 13px; transition: all 0.3s;} .member-btn:hover { background: var(--gray4); color: var(--purple);} .member-btn svg { flex-shrink: 0;} /* 로그인 에러 */ .login-error { padding: 12px; margin-bottom: 15px; border: 1px solid #b31818; border-radius: 6px; background: #fff3cd; color: #b31818; font-size: 12px;} @media (max-width: 768px) { .login-box { display: none;} } /*────────────────────────────────────────────────────────────────────────────────────── 메인 - 메인 카드 섹션 - 적립금 출금신청 / 회원정보수정 / 1대1문의 / 설문참여내역 ────────────────────────────────────────────────────────────────────────────────────────*/ .main-cards-section { padding: 50px 0; background: var(--gray5);} .main-cards-section .card-area { display: flex; align-items: center; justify-content: space-around; } .main-cards-section .card { display: flex; align-items: center; flex-direction: column; text-align: center; cursor: pointer;} .main-cards-section .icon { display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; transition: transform 0.3s ease; } .main-cards-section .card:hover .icon { transform: scale(1.15); } .main-cards-section .icon.icon01 { background: url("../img/260227_icon_menu_01.png") no-repeat; background-size: contain; } .main-cards-section .icon.icon02 { background: url("../img/260227_icon_menu_02.png") no-repeat; background-size: contain; } .main-cards-section .icon.icon03 { background: url("../img/260227_icon_menu_03.png") no-repeat; background-size: contain; } .main-cards-section .icon.icon04 { background: url("../img/260227_icon_menu_04.png") no-repeat; background-size: contain; } .main-cards-section .tit { margin-top: 10px; font-size: 20px; font-weight: 600; text-align: center; line-height: 1.4;} .main-cards-section .tit.mo { display: none;} @media (max-width: 1024px) { .main-cards-section { padding: 25px 0;} .main-cards-section .card { padding: 30px 20px;} } @media (max-width: 768px) { .main-cards-section { padding: 20px 0;} .main-cards-section .card-area { justify-content: space-around; gap: 0;} .main-cards-section .card { flex-direction: column; padding: 0;} .main-cards-section .card:hover .icon { transform: none; } .main-cards-section .icon { width: 50px; height: 50px; } .main-cards-section .icon.icon01, .main-cards-section .icon.icon02, .main-cards-section .icon.icon03, .main-cards-section .icon.icon04 { background-size: 100%;} .main-cards-section .tit { padding-top: 3px; margin-left: 0; font-size: 15px;} .main-cards-section .tit.pc { display: none;} .main-cards-section .tit.mo { display: initial; margin-top: 0; line-height: 1.3;} } /*─────────────────────────────────────────────────────────── 메인 - 공지사항 & 고객센터 ───────────────────────────────────────────────────────────*/ .bottom-section { padding: 40px 0; background: #fff;} .bottom-section .cont { display: flex; align-items: stretch; gap: 20px; } .bottom-section .cont .left { display: flex; width: 780px; } .bottom-section .cont .right { display: flex; flex: 1;} .bottom-section .cont .tit { font-size: 20px; font-weight: 700;} .bottom-section .cont ul { display: flex; gap: 10px; width: 100%; padding: 30px; border: 1px solid var(--gray3); border-radius: 14px; } .bottom-section .cont ul li { width: 50%; } .bottom-section .cont ul li:first-child { padding-right: 20px; border-right: 1px solid var(--gray3);} .bottom-section .cont ul li:last-child { padding-left: 20px;} .bottom-section .cont .notice { overflow: hidden; position: relative;} .bottom-section .cont .notice .more { position: absolute; right: 0; top: 10px; color: var(--gray1); font-size: 15px; } .bottom-section .cont .notice .list { overflow: hidden; height: 70px; margin-top: 15px;} .bottom-section .cont .notice .list table { width: 100%; border-collapse: collapse;} .bottom-section .cont .notice .list table td { padding-top: 10px;} .bottom-section .cont .notice .list table td:last-child { padding-left: 20px; color: var(--gray2); font-size: 13px; text-align: right; white-space: nowrap;} .bottom-section .cont .cs p { font-size: 20px; font-weight: 600;} .bottom-section .cont .cs .number { display: block; padding-top: 15px; color: var(--purple); font-size: 20px; font-weight: 700; } .bottom-section .cont .cs span { display: block; font-size: 15px; line-height: 1.4;} .bottom-section .cont .contribution { display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding: 30px; border-radius: 14px; background: var(--gray5);} .bottom-section .cont .contribution .box { display: flex; align-items: center; justify-content: space-between; margin-top: 10px;} .bottom-section .cont .contribution .txt-area { display: flex; flex-direction: column; gap: 15px;} .bottom-section .cont .contribution .txt-area .txt { display: flex; align-items: flex-end; gap: 5px; font-size: 20px; font-weight: 700; line-height: 1;} .bottom-section .cont .contribution .txt-area .txt p { font-size: 16px; font-weight: 500;} .bottom-section .cont .contribution .txt-area .txt .unit { font-size: 14px; font-weight: 500;} .bottom-section .cont .contribution .img-area { width: 120px;} .bottom-section .cont .contribution .img-area img { display: block; width: 100%; } @media (max-width: 1024px) { .bottom-section { padding: 30px;} .bottom-section .cont { gap: 30px;} .bottom-section .cont .left { width: 65%; } } @media (max-width: 768px) { .bottom-section { padding: 20px; padding-top: 0;} .bottom-section .cont { flex-direction: column; gap: 10px; margin-top: 20px;} .bottom-section .cont .left { width: 100%; height: auto;} .bottom-section .cont .right { width: 100%; height: auto;} .bottom-section .cont .tit { font-size: 18px;} .bottom-section .cont ul { flex-direction: column; padding: 20px;} .bottom-section .cont ul li { width: 100%;} .bottom-section .cont ul li:first-child { padding-right: 0; padding-bottom: 20px; border-right: none; border-bottom: 1px solid var(--gray4); } .bottom-section .cont ul li:last-child { padding-left: 0; padding-top: 10px;} .bottom-section .cont .notice .more { right: 0; top: 0; font-size: 13px; } .bottom-section .cont .notice .list { height: 60px; padding: 0; margin-top: 0;} .bottom-section .cont .notice .list table td:first-child { max-width: 180px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bottom-section .cont .notice .list table td:last-child { padding-left: 10px; font-size: 13px; } .bottom-section .cont .cs .number { padding-top: 5px; font-size: 18px;} .bottom-section .cont .cs span { font-size: 14px; line-height: 1.3;} .bottom-section .cont .contribution { padding: 20px;} .bottom-section .cont .contribution .box { margin-top: 15px;} .bottom-section .cont .contribution .txt-area .txt { gap: 5px; font-size: 18px; } .bottom-section .cont .contribution .txt-area .txt p { font-size: 14px;} .bottom-section .cont .contribution .img-area { width: 100px;} } /*─────────────────────────────────────────────────────────── 푸터 - 공통 ───────────────────────────────────────────────────────────*/ .footer { padding: 30px 0; border-top: 1px solid var(--gray3); background: #fff; } .footer .container { position: relative;} .footer .links { display: flex; flex-wrap: wrap; position: relative; margin-bottom: 20px; } .footer .links a { position: relative; color: var(--gray2); font-size: 13px; } .footer .links a::after { content: ''; display: inline-block; width: 1px; height: 8px; margin: auto 10px; background-color: var(--gray4)} .footer .links a:last-child::after { display: none;} .footer .links .privacy { color: #222; font-weight: 700;} .footer .info { margin-bottom: 20px;} .footer .info address { margin-bottom: 10px; font-style: normal; color: var(--gray2); font-size: 13px; line-height: 1.3; } .footer .info .copyright { color: var(--gray2); font-size: 12px;} .footer .family { position: absolute; right: 0; top: 0;} .footer .family select { padding: 8px; border: 1px solid var(--gray3); border-radius: 4px; color: var(--gray2); font-size: 13px; cursor: pointer;} @media (max-width: 1024px) { .footer { padding: 20px; } } @media (max-width: 768px) { .footer { bottom: 0;} .footer .links { gap: 0; margin-bottom: 10px;} .footer .links a { font-size: 12px;} /* .footer .links a::after { right: 2px;} */ .footer .info { margin-bottom: 10px;} .footer .info address { font-size: 12px; } .footer .family { position: relative; } .footer .family select { padding: 6px; font-size: 12px; } } /*─────────────────────────────────────────────────────────── 로그인 ───────────────────────────────────────────────────────────*/ .login { width: 400px; margin: 0 auto;} .login .bn { margin-top: 30px;} .login .bn .mo { } .login-wrap { margin-top: 30px;} .LoginArea { display: flex; flex-direction: column; gap: 10px;} .LoginArea input { width: 100%; height: 50px; padding: 10px; border: 1px solid var(--gray3); border-radius: 8px; background: #fff; font-size: 16px; transition: border-color 0.3s;} .LoginArea input:focus { border: 1px solid var(--purple) !important; border-color: var(--purple) !important; } .LoginArea .btn { width: 100%; height: 60px; padding: 10px; margin-top: 10px; border: 1px solid var(--purple); border-radius: 8px; background: var(--purple); color: #fff; font-size: 16px; font-weight: 600; transition: background 0.3s;} .LoginArea .find_inp { margin-top: 10px; text-align: center;} .LoginArea .find_inp a { position: relative; color: var(--gray2); font-size: 16px; } .LoginArea .find_inp a:first-child { position: relative; padding-right: 15px; } .LoginArea .find_inp a:first-child::after { content: ""; position: absolute; top: 50%; margin-top: -6px; right: 5px; width: 1px; height: 13px; background: var(--gray4);} .LoginArea input:-webkit-autofill, .LoginArea input:-webkit-autofill:hover, .LoginArea input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px var(--purple6) inset !important; box-shadow: 0 0 0px 1000px var(--purple6) inset !important; -webkit-text-fill-color: #222 !important; } @media (max-width: 768px) { .login { width: 100%; margin-bottom: 80px;} .LoginArea input { height: 45px; } .LoginArea .btn { height: 50px;} } /*─────────────────────────────────────────────────────────── 아이디 비밀번호 찾기 ───────────────────────────────────────────────────────────*/ .findid { width: 600px; margin: auto;} .findid .tab { display: flex; justify-content: center; margin-top: 20px; border-bottom: 1px solid var(--gray4);} .findid .tab li { width: 50%; padding: 12px 16px; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; background: none; font-size: 18px; color: var(--gray2); text-align: center; cursor: pointer; } .findid .tab li.selected_tab { border-bottom-color: var(--purple); } .findid .tab li.selected_tab a { color: var(--purple); font-weight: 600;} .findid .tab li a { } .findid .wrap { overflow: hidden; margin-top: 30px; border: 1px solid var(--purple5); border-radius: 18px;} .findid .wrap dl { display: grid; grid-template-columns: 110px 1fr; align-items: center; border-bottom: 1px solid var(--purple5); } .findid .wrap dl dt { display: flex; align-items: center; height: 100%; padding: 10px 20px; background: var(--purple6);} .findid .wrap dl dt .tit { color: var(--gray);} .findid .wrap dl dd { padding: 20px;} .findid .wrap dl dd .flex { display: flex; align-items: center; gap: 10px;} .findid .wrap dl dd input[type="text"] { height: 40px; padding: 3px 10px; border: 1px solid var(--gray3); border-radius: 8px; background: #fff; font-size: 15px;} .findid .wrap dl dd input[type="text"].name { width: 140px; } .findid .wrap dl dd input[type="text"].birth { width: 100px; } .findid .wrap dl dd input[type="text"].email1 { width: 150px; } .findid .wrap dl dd input[type="text"].email2 { width: 100px; } .findid .wrap dl dd .radiobtn { display: flex; gap: 10px;} .findid .wrap dl dd .emailat { } .findid .wrap dl dd select { width: 140px; height: 40px; padding: 3px 25px 3px 10px; border: 1px solid var(--gray3); border-radius: 8px; font-size: 15px;} .findid .btn { display: flex; justify-content: center; margin: 30px auto; } .findid .btn a { display: flex; justify-content: center; align-items: center; width: 180px; padding: 15px; border-radius: 8px; background: var(--purple); color: #fff; font-size: 18px; font-weight: 600; line-height: 1;} .findid .annotate { } .findid .annotate p { font-size: 14px;} @media (max-width: 768px) { .findid {width: 100%; } .findid .wrap dl { grid-template-columns: 1fr;} .findid .wrap dl dd { padding: 10px 20px;} .findid .wrap dl dd .flex { flex-wrap: wrap; gap: 5px;} /* .findid .wrap dl dd input[type="text"] { width: 100%;} */ .findid .wrap dl dd input[type="text"].birth { width: 70px;} .findid .wrap dl dd input[type="text"].email1 { width: 120px;} .findid .wrap dl dd input[type="text"].email2 { width: 120px;} .findid .wrap dl dd select { width: 120px; } .findid .btn a { padding: 15px 0; font-size: 17px;} } /*─────────────────────────────────────────────────────────── 내 정보 수정 (로그인) ───────────────────────────────────────────────────────────*/ .myinfo { width: 400px; margin: 0 auto;} .myinfo h3 { font-size: 18px; font-weight: 500; text-align: center;} .myinfo .login { margin-top: 30px;} .myinfo .login input { width: 100%; height: 50px; padding: 10px; border: 1px solid var(--gray3); border-radius: 8px; background: #fff; font-size: 16px; transition: border-color 0.3s;} .myinfo .login input:focus { border: 1px solid var(--purple) !important; border-color: var(--purple) !important; } .myinfo .login .btn { display: flex; gap: 10px; margin-top: 20px;} .myinfo .login .btn .go { padding: 10px; border: 1px solid var(--purple); border-radius: 8px; background: var(--purple); color: #fff; font-size: 16px; font-weight: 600; transition: background 0.3s;} .myinfo .login .btn .cancel { padding: 11px 18px; border: 1px solid var(--purple); background: none; color: var(--purple); font-size: 16px; font-weight: 600; transition: background 0.3s;} .myinfo .login input:-webkit-autofill, .myinfo .login input:-webkit-autofill:hover, .myinfo .login input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px var(--purple6) inset !important; box-shadow: 0 0 0px 1000px var(--purple6) inset !important; -webkit-text-fill-color: #222 !important; } @media (max-width: 768px) { .myinfo { width: 100%; } .myinfo h3 { font-size: 16px;} .myinfo .login input { height: 45px;} .myinfo .login .btn { margin-top: 15px;} } /*─────────────────────────────────────────────────────────── 내 메뉴 > 출금 신청 ───────────────────────────────────────────────────────────*/ .mypoint { max-width: 1200px; margin: 0 auto; } .mypoint .top { display: flex; align-items: center; justify-content: space-between; gap: 60px; height: 160px; padding: 30px 40px; margin-bottom: 25px; border-radius: 14px; background: var(--purple);} .mypoint .top .left { display: flex; gap: 30px;} .mypoint .top .left .before { } .mypoint .top .left .before .txt { margin-bottom: 8px; color: #fff; font-size: 18px; font-weight: 500;} .mypoint .top .left .before .point { display: flex; align-items: baseline; gap: 5px; margin-top: 5px;} .mypoint .top .left .before .point .amount { color: var(--yellow2); font-size: 45px; font-weight: 700; line-height: 1; } .mypoint .top .left .before .point .unit { color: #fff; font-size: 20px; font-weight: 500; } .mypoint .top .left .divider { width: 3px; height: 70px; background: rgba(255,255,255,0.3); } .mypoint .top .left .ing { } .mypoint .top .left .ing .txt { margin-bottom: 8px; color: #fff; font-size: 18px; font-weight: 500;} .mypoint .top .left .ing .point { display: flex; align-items: baseline; gap: 5px; margin-top: 5px;} .mypoint .top .left .ing .point .amount { color: #fff; font-size: 45px; font-weight: 700; line-height: 1; } .mypoint .top .left .ing .point .unit { color: #fff; font-size: 20px; font-weight: 500; } .mypoint .top .right { display: flex; flex-direction: column; gap: 20px; } .mypoint .top .right .account { display: flex; justify-content: flex-end; align-items: center; gap: 10px;} .mypoint .top .right .account .default { color: #fff; font-size: 20px; font-weight: 500; line-height: 1;} .mypoint .top .right .account .num { display: flex; align-items: flex-end; gap: 10px; line-height: 1;} .mypoint .top .right .account .num p { color: #fff; font-size: 21px; font-weight: 500;} .mypoint .top .right .account .num span { color: #fff; font-size: 23px; font-weight: 600;} .mypoint .top .right .account a { padding: 5px 12px; border-radius: 8px; background: #fff; color: var(--purple); font-size: 14px; font-weight: 600; line-height: 1; } .mypoint .top .right .account a:hover { background: var(--purple5);} .mypoint .top .right .date { display: flex; align-items: center; gap: 20px; } .mypoint .top .right .date li { } .mypoint .top .right .date li .item { display: flex; gap: 10px; } .mypoint .top .right .date li .item p { position: relative; padding-left: 10px; color: #fff; font-size: 17px; font-weight: 600;} .mypoint .top .right .date li .item p::before { content: ""; display: block; position: absolute; left: 0; top: 40%; width: 4px; height: 4px; border-radius: 50%; background: #fff;} .mypoint .top .right .date li .item p span { color: var(--yellow2); } .mypoint .top .right .date li .item strong { background-image: -webkit-linear-gradient(90deg, #6040ff 14px, transparent 0%); color: #fff; font-size: 17px; font-weight: 600;} .mypoint .top .right .date li .item strong span { color: var(--yellow2); } @media (max-width: 1024px) { .mypoint .top { flex-direction: column; height: auto;} } @media (max-width: 768px) { .mypoint .top { gap: 30px; padding: 30px 20px; margin-bottom: 15px;} .mypoint .top .left { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding-bottom: 20px; border-bottom: 1px solid var(--purple4);} .mypoint .top .left .before { text-align: center;} .mypoint .top .left .before .point { gap: 2px;} .mypoint .top .left .before .point .amount { font-size: 30px; } .mypoint .top .left .before .point .unit { font-size: 18px;} .mypoint .top .left .divider { display: none;} .mypoint .top .left .ing { text-align: center;} .mypoint .top .left .ing .point .amount { font-size: 30px;} .mypoint .top .right { flex-direction: column; gap: 10px; width: 100%;} .mypoint .top .right .date { flex-direction: column; gap: 5px; margin-top: 15px;} .mypoint .top .right .account { justify-content: flex-start; position: relative; margin-top: 0;} .mypoint .top .right .account .default { font-size: 18px;} .mypoint .top .right .account .num { flex-direction: column; align-items: flex-start; gap: 5px;} .mypoint .top .right .account .num p { font-size: 20px;} .mypoint .top .right .account .num span { font-size: 20px;} .mypoint .top .right .account a { position: absolute; top: 0; right: 0; padding: 4px 10px;} } .mypoint .cont { overflow: hidden; padding: 30px; margin-bottom: 20px; border: 1px solid var(--gray3); border-radius: 14px; background: #fff;} .mypoint .cont .row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 24px;} .mypoint .group .label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 17px; font-weight: 600; } .mypoint .group .box { display: flex; justify-content: space-between; gap: 5px;} .mypoint .group .box .input-wrap { display: flex; align-items: center; flex: 1; height: 40px; border: 1px solid var(--purple5); border-radius: 8px; background: var(--purple6); transition: border-color 0.15s;} .mypoint .group .box .input-wrap:focus-within { border-color: var(--purple); background: #fff;} .mypoint .group .box .input-wrap .input { flex: 1; padding: 10px; border: none; background: transparent; font-size: 16px; text-align: right; } .mypoint .group .box .input-wrap .input::placeholder { color: var(--gray2); } .mypoint .group .box .input-wrap .input::-webkit-inner-spin-button, .mypoint .group .box .input-wrap .input::-webkit-outer-spin-button { appearance: none; } .mypoint .group .box .input-wrap .won { padding: 0 14px 0 10px; font-size: 15px; font-weight: 500; } .mypoint .group .box .btn { width: 20%;} .mypoint .group .box .btn .total { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border-radius: 8px; background: var(--purple4); color: #fff; font-size: 15px; font-weight: 500;} .mypoint .group .box .btn .total:hover { background: var(--purple); } .mypoint .group .box .btn .total.active { background: var(--purple); } .mypoint .group .note { display: block; margin-top: 5px; padding-left: 10px; color: var(--gray1); font-size: 14px; } .mypoint .group .note em { font-style: normal; color: var(--purple); font-weight: 600; } .mypoint .bn { } .mypoint .bn .mo { display: none;} @media (max-width: 1024px) { .mypoint .cont .row { grid-template-columns: auto;} } @media (max-width: 768px) { .mypoint .cont { padding: 20px;} .mypoint .group { width: 100%;} .mypoint .group .label { font-size: 18px;} .mypoint .group .box .input-wrap { overflow: unset; width: 80%;} .mypoint .group .box .input-wrap .input { width: 100%;} .mypoint .group .box .input-wrap .won { padding: 0; padding-right: 10px;} .mypoint .group .box .input-wrap .input::placeholder { font-size: 15px; } .mypoint .bn .pc { display: none;} .mypoint .bn .mo { display: block;} } .mypoint .apply-area { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--gray3);} .mypoint .apply-area .total { display: flex; align-items: baseline; gap: 5px; } .mypoint .apply-area .total .txt { font-size: 18px; font-weight: 600; color: var(--gray2); } .mypoint .apply-area .total .amount { font-size: 45px; font-weight: 800; color: var(--purple); } .mypoint .apply-area .total .won { font-size: 16px; font-weight: 600; color: var(--gray2)} .mypoint .apply-area .btn { display: flex; gap: 10px; } .mypoint .apply-area .btn a { display: flex; align-items: center; border-radius: 8px; transition: all 0.15s; } .mypoint .apply-area .btn .guide { padding: 11px 18px; border: 1px solid var(--purple4); background: none; color: var(--purple2); font-weight: 600; } .mypoint .apply-area .btn .guide:hover { border-color: var(--purple); color: var(--purple); } .mypoint .apply-area .btn .submit { padding: 20px 80px; border: none; background: var(--purple); color: #fff; font-size: 18px; font-weight: 600; } .mypoint .apply-area .btn .submit:hover { background: var(--purple1); } .mypoint .notice { display: none; padding: 20px; margin-top: 30px; border: 1px dashed var(--purple3); border-radius: 8px; background: var(--purple6);} .mypoint .notice .list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .mypoint .notice .list li { position: relative; padding-left: 10px; font-size: 15px; font-weight: 400; line-height: 1.4; transition: color 0.2s;} .mypoint .notice .list li::before { content: ""; display: block; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: var(--gray2); } .mypoint .notice .list li .stress { font-weight: 600;} .mypoint .notice .list li .appgo { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 20px; margin-left: 10px; border-radius: 8px; background: var(--gray1); color: #fff; font-size: 15px; font-weight: 500; line-height: 1;} .mypoint .notice .list li .highlight { background: linear-gradient(to top, #fff069 50%, transparent 50%); } .mypoint .notice .list li .mygo { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 8px; margin-left: 10px; border-radius: 8px; background: var(--gray7); color: #fff; font-size: 14px; font-weight: 500; line-height: 1;} @media (max-width: 768px) { .mypoint .apply-area { flex-direction: column;} .mypoint .apply-area .btn { justify-content: space-between; width: 100%; margin: 10px;} .mypoint .apply-area .btn a { justify-content: center; gap: 0; width: calc((100% - 10px) / 2); font-size: 16px; line-height: 1;} .mypoint .apply-area .btn .guide { padding: 15px 0;} .mypoint .apply-area .btn .submit { padding: 15px 0;} .mypoint .apply-area .total .amount { font-size: 40px;} .mypoint .notice { padding: 12px;} .mypoint .notice .list li { line-height: 1.6;} .mypoint .notice .list li .appgo { margin-left: 0;} } .mypoint .history { overflow: hidden; margin-top: 20px; border: 1px solid var(--purple7); border-radius: 14px; background: #fff;} .mypoint .history .tbl-wrap { overflow-x: auto; } .mypoint .history .tbl { } .mypoint .history .tbl thead tr { background: var(--purple6); } .mypoint .history .tbl th { padding: 15px 24px; font-size: 15px; font-weight: 600; text-align: center; white-space: nowrap; } .mypoint .history .tbl td { padding: 15px 24px; border-bottom: 1px solid var(--purple7); font-size: 15px; text-align: center;} .mypoint .history .tbl tbody tr:last-child td { border-bottom: none; } .mypoint .history .tbl td:first-child { width: 30%;} .mypoint .history .tbl td:nth-child(2) { width: 20%;} .mypoint .history .tbl td:nth-child(3) { width: 20%;} .mypoint .history .tbl td:nth-child(4) { width: 30%;} .mypoint .history .tbl td .flex { display: flex; align-items: center; justify-content: flex-start; gap: 9px; padding-left: 80px;} .mypoint .history .tbl td .flex .badge { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; font-size: 10px; font-weight: 800; } .mypoint .history .tbl td .flex .badge.naver { background: #03C75A; color: #fff; } .mypoint .history .tbl td .flex .badge.cash { background: #9681ff; color: #fff; } .mypoint .history .tbl td .flex .badge.donate { background: #ffcbcb; } .mypoint .history .tbl td .sort { display: inline-flex; align-items: center; gap: 5px; color: var(--purple); font-weight: 600;} .mypoint .history .tbl td .cancel { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; margin-left: 5px; border-radius: 8px; border: 1px solid var(--gray2); background: #fff; color: var(--gray1); font-size: 14px; font-weight: 600;} @media (max-width: 1024px) { .mypoint .history .tbl td .flex { padding-left: 40px;} } @media (max-width: 768px) { .mypoint .history .tbl td { vertical-align: middle;} .mypoint .history .tbl td .flex { padding-left: 0;} .mypoint .history .tbl td:nth-child(4) { padding: 15px 5px;} } /*─────────────────────────────────────────────────────────── 내 메뉴 > 내 정보 수정 ───────────────────────────────────────────────────────────*/ .mypage { width: 900px; margin: auto;} .mypage .top { display: flex; justify-content: space-between; align-items: center;} .mypage .top .toptxt { display: block; padding-left: 10px; color: var(--purple); font-size: 16px; text-align: left; } .mypage .toptxt2 { display: block; padding-left: 10px; margin-top: 30px; color: var(--purple); font-size: 16px; text-align: left; } .mypage .wrap { overflow: hidden; margin-top: 10px; border: 1px solid var(--purple5); border-radius: 18px;} .mypage .wrap dl { display: grid; grid-template-columns: 150px 1fr; align-items: center; border-bottom: 1px solid var(--purple5);} .mypage .wrap dl:last-child { border-bottom: none; } .mypage .wrap dl dt { display: flex; align-items: center; padding: 10px 20px; height: 100%; background: var(--purple6)} .mypage .wrap dl dt .tit { color: var(--gray);} .mypage .wrap dl dt .asterisk { margin-left: 5px; color: var(--purple); } .mypage .wrap dl dd { padding: 20px; } .mypage .wrap dl dd input[type="text"] { width: 140px; height: 40px; padding: 3px 10px; border: 1px solid var(--gray3); border-radius: 8px; background: #fff; font-size: 15px;} .mypage .wrap dl dd input[type="text"]:focus { border-color: var(--purple);} .mypage .wrap dl dd input[type="text"].postcod { width: 300px;} .mypage .wrap dl dd input[type="text"].account { width: 180px;} .mypage .wrap dl dd select { width: 140px; height: 40px; padding: 3px 25px 3px 10px; border: 1px solid var(--gray3); border-radius: 8px; font-size: 15px;} .mypage .wrap dl dd select:focus{ border: 1px solid var(--purple);} .mypage .wrap dl dd select.job { width: 400px;} .mypage .wrap dl dd select.family { width: 400px;} .mypage .wrap dl dd select.bank { width: 120px;} .mypage .wrap dl dd .txt { display: block; padding-left: 0; margin-top: 0; color: var(--gray1); font-size: 15px;} .mypage .wrap dl dd .txt2 { display: block; padding-left: 0; margin-top: 5px; color: var(--gray1); font-size: 15px;} .mypage .wrap dl dd .flex { display: flex; align-items: center; gap: 5px;} .mypage .wrap dl dd .flex.ver2 { gap: 20px;} .mypage .wrap dl dd .flex.ver3 { flex-direction: column; align-items: flex-start;} .mypage .wrap dl dd .flex.ver4 { gap: 8px; margin-top: 5px;} .mypage .wrap dl dd .flex.ver4 p { display: block; color: var(--purple2); font-size: 16px;} .mypage .wrap dl dd .flex.ver5 { flex-wrap: wrap; gap: 10px;} .mypage .wrap dl dd .flex.ver6 { justify-content: space-between;} .mypage .wrap dl dd .certify { display: flex; align-items: center; } .mypage .wrap dl dd .certify p { } .mypage .wrap dl dd .certify img { width: 13%; margin-left: 10px; margin-right: 3px;} .mypage .wrap dl dd .certify span { color: var(--gray1); font-size: 14px; font-weight: 500; } .mypage .wrap dl dd .identity { display: flex; justify-content: flex-end; align-items: center; gap: 10px;} .mypage .wrap dl dd .identity p { color: var(--gray1); font-size: 15px; } .mypage .wrap dl dd .identity a { display: flex; align-items: center; justify-content: center; padding: 4px 20px; border-radius: 8px; background: var(--purple); color: #fff; font-size: 14px; font-weight: 500; } .mypage .wrap dl dd .block { display: block;} .mypage .wrap dl dd .pwbtn { display: inline-flex; align-items: center; border-radius: 8px; padding: 8px 18px; border: 1px solid var(--purple); background: none; color: var(--purple); font-size: 14px;} .mypage .wrap dl dd .postcodebtn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 18px; border-radius: 8px; background: var(--purple4); color: #fff; font-size: 14px; } .toggle { display: flex; align-items: center; justify-content: flex-start; gap: 12px; } .toggle .label { font-size: 15px; font-weight: 500;} .toggle .switch { display: inline-block; flex-shrink: 0; position: relative; width: 44px; height: 24px; } .toggle .switch input { width: 0; height: 0; opacity: 0;} .toggle .switch .slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 24px; background: var(--gray3); transition: .3s; cursor: pointer;} .toggle .switch .slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: .3s;} .toggle .switch input:checked + .slider { background-color: var(--purple); } .toggle .switch input:checked + .slider:before { transform: translateX(20px);} .mypage .btn-area { margin: 30px auto; text-align: center;} .mypage .btn-area .btn { display: flex; justify-content: center; gap: 10px; } .mypage .btn-area .btn a { display: flex; justify-content: center; align-items: center; padding: 15px 60px; border-radius: 8px; font-size: 18px; font-weight: 600; line-height: 1;} .mypage .btn-area .btn .modify { background: var(--purple); color: #fff; } .mypage .btn-area .btn .cancel { border: 1px solid var(--purple4); background: none; color: var(--purple2);} .mypage .btn-area .leave { display: block; margin-top: 30px; color: var(--gray1); font-size: 16px; text-decoration: underline; } @media (max-width: 1024px) { .mypage { width: 100%;} } @media (max-width: 768px) { .mypage .top { flex-wrap: wrap;} .mypage .top .txt { padding-left: 0; margin-top: 0;} .mypage .wrap dl { grid-template-columns: 1fr;} .mypage .wrap dl dd { padding: 10px 20px;} .mypage .wrap dl dd .flex { flex-wrap: wrap;} .mypage .wrap dl dd .flex.ver2 { gap: 10px;} .mypage .wrap dl dd .flex.ver4 { gap: 0; margin-top: 5px;} .mypage .wrap dl dd .flex.ver4 p { margin-top: 10px; margin-right: 5px;} .mypage .wrap dl dd .flex.ver4 span { margin-top: 10px;} .mypage .wrap dl dd .certify img { width: 12%;} .mypage .wrap dl dd .block { width: 100%;} .mypage .wrap dl dd .txt { margin-top: 5px;} .mypage .wrap dl dd input[type="text"] { width: 100%;} .mypage .wrap dl dd input[type="text"].email { width: 120px;} .mypage .wrap dl dd input[type="text"].mobile { width: 80px;} .mypage .wrap dl dd input[type="text"].account { width: 100%;} .mypage .wrap dl dd input[type="text"].postcod { width: 100%;} .mypage .wrap dl dd select { width: 100%; } .mypage .wrap dl dd select.job { width: 100% ;} .mypage .wrap dl dd select.family { width: 100%; } .mypage .wrap dl dd select.email { width: 120px;} .mypage .wrap dl dd select.mobile { width: 80px;} .mypage .wrap dl dd select.bank { width: 100%; } .mypage .wrap dl dd .identity p { font-size: 14px;} .mypage .btn-area { margin-bottom: 0;} .mypage .btn-area .btn a { width: calc((100% - 10px) / 2); padding: 15px 0; font-size: 17px;} } /*─────────────────────────────────────────────────────────── 내 메뉴 > 1:1 문의 ───────────────────────────────────────────────────────────*/ /* ── 리스트 게시판 ── */ .myqna { position: relative;} .myqna .topimg { position: absolute; left: 0; top: -50px; width: 20%; height: 200px; background: url("../img/myqna_top.png") no-repeat; background-size: 100% auto; } .myqna .btn { display: flex; align-items: center; justify-content: flex-end;} .myqna .btn a { padding: 12px 40px; border-radius: 8px; background: var(--purple); color: #fff; font-size: 15px; font-weight: 600;} .myqna .list { margin-top: 20px; border-top: 1px solid var(--black);} .myqna .list li { padding: 20px 0; border-bottom: 1px solid var(--gray3);} .myqna .list li a { position: relative; width: 100%;} .myqna .list li .txt { display: flex; align-items: center; gap: 10px;} .myqna .list li .txt p { font-size: 20px; font-weight: 600;} .myqna .list li .txt .notice { display: flex; justify-content: center; align-items: center; padding: 4px 12px; border-radius: 8px; background: var(--purple); color: #fff; font-size: 14px; line-height: 1;} .myqna .list li .date { display: block; margin-top: 5px; color: var(--gray1); font-size: 16px;} .myqna .list li .txt .unanswer { display: inline-flex; justify-content: center; align-items: center; padding: 6px 20px; margin-left: 10px; border-radius: 50px; color: var(--gray1); background: var(--gray4); font-size: 14px;} .myqna .list li .txt .complete { display: inline-flex; justify-content: center; align-items: center; padding: 6px 20px; margin-left: 10px; border-radius: 50px; color: var(--purple); background: var(--purple5); font-size: 14px;} @media (max-width: 768px) { .myqna .topimg { top: -20px; height: 200px; width: 40%;} .myqna .btn a { padding: 8px 22px;} .myqna .list { margin-top: 10px;} .myqna .list li .txt { flex-direction: column; align-items: flex-start; gap: 5px;} .myqna .list li .txt .notice { padding: 4px 12px; font-size: 13px;} .myqna .list li .txt p { font-size: 17px;} .myqna .list li .date { font-size: 14px;} .myqna .list li .txt .unanswer, .myqna .list li .txt .complete { position: absolute; right: 0; bottom: -10px; padding: 6px 18px; margin-left: 0; font-size: 13px; line-height: 1;} } /* ── 문의하기 ── */ .myqnawrite { } .myqnawrite .top { } .myqnawrite .top .bn { display: flex; align-items: center; gap: 0; position: relative; width: 500px; margin: auto; } .myqnawrite .top .bn .img { display: flex; align-items: flex-end; justify-content: center; flex-shrink: 0; width: 110px; height: 110px; } .myqnawrite .top .bn .bubble { display: flex; align-items: center; gap: 6px; position: relative; padding: 22px 18px; margin-left: 14px; border-radius: 20px; background: #9681ff; } .myqnawrite .top .bn .bubble::before { content: ''; position: absolute; bottom: -28px; left: 10px; width: 28px; height: 28px; background: url('../img/myqna_top_img_tail.png') no-repeat; background-size: contain; } .myqnawrite .top .bn .bubble p { color: #e8ddff; font-weight: 400; } .myqnawrite .top .bn .bubble a { color: #fff; font-size: 20px; font-weight: 500; } .myqnawrite .top .bn .bubble a:hover { text-decoration: underline;} .myqnawrite .wrap { overflow: hidden; max-width: 800px; margin: 20px auto 30px; border: 1px solid var(--purple5); border-radius: 18px;} .myqnawrite .wrap dl { display: grid; grid-template-columns: 170px 1fr; align-items: center; border-bottom: 1px solid var(--purple5);} .myqnawrite .wrap dl:last-child { border-bottom: none;} .myqnawrite .wrap dl dt { display: flex; align-items: center; padding: 10px 20px; height: 100%; background: var(--purple6);} .myqnawrite .wrap dl dt .tit { } .myqnawrite .wrap dl dt .essential { margin-left: 5px; color: var(--purple); font-size: 14px;} .myqnawrite .wrap dl dd { padding: 20px;} .myqnawrite .wrap dl dd select { width: 50%; height: 40px; padding: 3px 25px 3px 10px; border: 1px solid var(--gray3); border-radius: 8px; font-size: 15px; } .myqnawrite .wrap dl dd select:focus { border-color: var(--purple);} .myqnawrite .wrap dl dd input[type="text"] { width: 100%; height: 40px; padding: 3px 10px; border: 1px solid var(--gray3); border-radius: 8px; background: #fff; font-size: 15px;} .myqnawrite .wrap dl dd input[type="text"]:focus { border-color: var(--purple);} .myqnawrite .wrap dl dd textarea { width: 100%; height: 300px; padding: 10px; border: 1px solid var(--gray3); border-radius: 8px; background: #fff; font-size: 15px;} .myqnawrite .wrap dl dd textarea:focus { border-color: var(--purple);} .myqnawrite .agree { max-width: 800px; margin: auto; margin-bottom: 30px;} .myqnawrite .agree input[type="checkbox"] + label { font-size: 18px; font-weight: 600;} .myqnawrite .agree .box { padding: 20px; margin-top: 10px; border-radius: 8px; background: var(--gray5);} .myqnawrite .agree .box .item { } .myqnawrite .agree .box .item + .item { margin-top: 20px;} .myqnawrite .agree .box .item p { font-weight: 600;} .myqnawrite .agree .box .item span { } .myqnawrite .btn { display: flex; justify-content: center; gap: 10px;} .myqnawrite .btn a { display: flex; justify-content: center; align-items: center; padding: 15px 60px; border-radius: 8px; font-size: 18px; line-height: 1;} .myqnawrite .btn .save { background: var(--purple); color: #fff;} .myqnawrite .btn .cancel { border: 1px solid var(--purple4); background: none; color: var(--purple2); } @media (max-width: 768px) { .myqnawrite .top .bn { width: 100%; justify-content: center;} .myqnawrite .top .bn img { width: 90%;} .myqnawrite .top .bn .bubble { flex-direction: column; gap: 0; padding: 15px; margin-left: 10px;} .myqnawrite .wrap dl { grid-template-columns: 1fr; } .myqnawrite .wrap dl dd { padding: 10px 20px; } .myqnawrite .btn a { width: calc((100% - 10px) / 2); padding: 15px 0; font-size: 16px;} } /* ── 문의글 보기 ── */ .myqnaview { border-top: 1px solid var(--black);} .myqnaview .top { padding: 20px 0; border-bottom: 1px solid var(--gray3);} .myqnaview .top .tit { font-size: 20px; font-weight: 600;} .myqnaview .top .date { display: block; margin-top: 5px; color: var(--gray1); font-size: 16px;} .myqnaview .cont { padding: 50px; background: var(--gray5);} .myqnaview .cont .notify { line-height: 1.6;} .chat { display: flex; flex-direction: column; width: 100%; gap: 20px; } .chat .row { display: flex; flex-direction: column; gap: 6px; } .chat .row.user { align-items: flex-end; } .chat .row .meta { display: flex; align-items: flex-end; gap: 6px; width: 100%; } .chat .row.user .meta { justify-content: flex-end; } .chat .row.admin { align-items: flex-start; } .chat .row.admin .profile { display: flex; align-items: flex-start; gap: 10px; width: 100%; } .chat .row.admin .profile .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gray2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .chat .row.admin .profile .avatar svg { width: 22px; height: 22px; fill: #fff; } .chat .row.admin .profile .info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .chat .row.admin .profile .info .meta { width: 100%; } .chat .row.admin .profile .info .name { color: var(--gray); font-weight: 500; } .chat .row .meta .date { padding-bottom: 2px; font-size: 14px; color: var(--gray2); white-space: nowrap; line-height: 1; } .chat .row .meta .bubble { padding: 20px; white-space: pre-line; } .chat .row .meta .bubble.user { width: 60%; background: #fff; color: #333; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .chat .row .meta .bubble.admin { background: var(--purple3); color: #fff; border-radius: 14px; } .myqnaview .blist { border-top: 1px solid var(--gray3); } .myqnaview .blist dl { display: flex; align-items: center; padding: 20px; border-bottom: 1px solid var(--gray3);} .myqnaview .blist dl dt { width: 10%; color: var(--gray2);} .myqnaview .blist dl dd { display: flex; justify-content: space-between; width: 90%;} .myqnaview .blist dl dd a { } .myqnaview .blist dl dd span { color: var(--gray2);} .myqnaview_btn { display: flex; justify-content: space-between; margin-top: 30px;} .myqnaview_btn a { display: inline-flex; padding: 10px 50px; border-radius: 10px; } .myqnaview_btn .write a { border: 1px solid var(--purple4); color: var(--purple2); } .myqnaview_btn .list { background: var(--purple); color: #fff; } @media (max-width: 768px) { .myqnaview .cont { padding: 20px 10px;} .chat .row .meta .bubble { padding: 10px 20px;} .chat .row .meta .bubble.user { width: 80%;} .chat .row.admin .profile { gap: 5px;} .chat .row.admin .profile .avatar { width: 22px; height: 22px;} .chat .row.admin .profile .avatar svg { width: 14px; height: 14px;} .myqnaview .blist dl dd { align-items: center; gap: 10px;} .myqnaview .blist dl dd a { padding-left: 10px;} .myqnaview .blist dl dd span { font-size: 14px;} .myqnaview_btn a { padding: 8px 30px; font-size: 15px; } } /*─────────────────────────────────────────────────────────── 내 메뉴 > 설문 참여 내역 ───────────────────────────────────────────────────────────*/ .mypointlist { } .mypointlist .top { display: flex; align-items: stretch; justify-content: space-between; gap: 24px;} .mypointlist .top .left { flex: 1 1 auto; position: relative; padding: 36px 36px 32px; border: 1px solid var(--purple); border-radius: 14px; background: var(--purple);} .mypointlist .top .left .txt { color: #fff; font-size: 24px; font-weight: 500;} .mypointlist .top .left .balance { color: var(--yellow2); font-size: 45px; font-weight: 700; line-height: 1;} .mypointlist .top .left .unit { color: #fff; font-size: 24px; font-weight: 500;} .mypointlist .top .left .explain { display: block; margin-top: 10px; color: #fff; font-size: 20px; } .mypointlist .top .left .go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 15px 60px; margin-top: 20px; border-radius: 8px; background: #fff; color: var(--purple); font-size: 18px; font-weight: 700; } .mypointlist .top .right { flex: 0 0 400px; padding: 26px 24px; border: 1px solid var(--gray3); border-radius: 14px; background: #fff;} .mypointlist .top .right ul { display: flex; flex-direction: column; position: relative;} .mypointlist .top .right ul::after { content: ""; display: block; width: 100%; height: 1px; background: var(--gray3);} .mypointlist .top .right ul li { padding-bottom: 10px;} .mypointlist .top .right ul li .group { display: flex; align-items: center; justify-content: space-between;} .mypointlist .top .right ul li .group .txt { color: var(--gray1); font-size: 18px; font-weight: 500;} .mypointlist .top .right ul li .sum { } .mypointlist .top .right ul li .sum .accrue { color: var(--purple2); } .mypointlist .top .right ul li .sum .value { font-size: 23px; font-weight: 600;} .mypointlist .top .right ul li .sum .unit { font-size: 16px; font-weight: 500;} .mypointlist .top .right .last { display: flex; justify-content: space-between; align-items: center; margin-top: 10px;} .mypointlist .top .right .last .txt { font-size: 20px; font-weight: 600;} .mypointlist .top .right .last .sum { } .mypointlist .top .right .last .sum .value { color: var(--purple); font-size: 30px; font-weight: 600;} .mypointlist .top .right .last .sum .unit { font-size: 20px; font-weight: 500;} .mypointlist .list { overflow: hidden; margin-top: 25px; border: 1px solid var(--purple7); border-radius: 14px; background: #fff;} .mypointlist .tbl-wrap { overflow-x: auto;} .mypointlist .tbl { } .mypointlist .tbl thead tr { background: var(--purple6); } .mypointlist .tbl th { padding: 15px 24px; font-size: 15px; font-weight: 600; text-align: center; white-space: nowrap; } .mypointlist .tbl td { padding: 15px 24px; border-bottom: 1px solid var(--purple7); font-size: 15px; text-align: center;} .mypointlist .tbl tbody tr:last-child td { border-bottom: none; } .mypointlist .tbl td:first-child { width: 50%;} .mypointlist .tbl td:nth-child(2) { width: 20%;} .mypointlist .tbl td:nth-child(3) { width: 30%;} @media (max-width: 768px) { .mypointlist .top { flex-direction: column;} .mypointlist .top .left { padding: 20px;} .mypointlist .top .left .txt { font-size: 18px;} .mypointlist .top .left .balance { font-size: 28px;} .mypointlist .top .left .explain { font-size: 15px;} .mypointlist .top .left .go { display: flex; padding: 13px 60px;} .mypointlist .top .right { flex: auto; padding: 20px;} .mypointlist .top .right ul li .sum .value { font-size: 17px;} .mypointlist .top .right ul li .group .txt { font-size: 16px;} .mypointlist .top .right .last .sum .value { font-size: 25px;} .mypointlist .top .right .last .txt { font-size: 18px;} .mypointlist .top .right ul li .sum .accrue { font-size: 20px;} } /*─────────────────────────────────────────────────────────── 사회 공헌 사업 > 학술연구 후원 (장학사업) ───────────────────────────────────────────────────────────*/ .sponsorship { } .sponsorship .top { display: grid; grid-template-columns: 1fr auto; align-items: start; margin-bottom: 25px; } .sponsorship .top .left { text-align: left; } .sponsorship .top .left h3 { color: var(--purple); font-size: 24px; font-weight: 600; } .sponsorship .top .left p { margin-top: 10px; font-size: 18px; } .sponsorship .top .left p span { color: var(--purple);} .sponsorship .top .right { } .sponsorship .top .right .total { display: flex; flex-direction: column; gap: 10px;} .sponsorship .top .right .total li { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-width: 300px; padding: 14px 22px; border-radius: 8px; background: var(--purple); } .sponsorship .top .right .total li .tit { color: rgba(255, 255, 255, 0.72); white-space: nowrap;} .sponsorship .top .right .total li .txt { color: #fff; font-size: 20px; font-weight: 700; white-space: nowrap;} .sponsorship .top .right .total li .txt span { margin-left: 2px; color: rgba(255, 255, 255, 0.7); font-size: 14px;} .sponsorship .society { display: flex; gap: 15px; margin-bottom: 30px;} .sponsorship .society li { position: relative; padding: 25px 30px; border: 1px solid var(--purple4); border-radius: 14px; } .sponsorship .society li img { position: absolute; right: 20px; top: 20px; width: 18%;} .sponsorship .society li .tit { font-size: 22px; font-weight: 600;} .sponsorship .society li span { display: inline-block; padding: 6px 14px; margin-top: 5px; border-radius: 16px; background: #f3f0ff; color: #6346eb; font-size: 13px; font-weight: 600;} .sponsorship .society li .txt { margin-top: 10px; color: var(--gray1);} .sponsorship .history { overflow: hidden; border: 1px solid var(--purple7); border-radius: 14px; background: #fff;} .sponsorship .history .tbl-wrap { overflow-x: auto; } .sponsorship .history .tbl { } .sponsorship .history .tbl thead tr { background: var(--purple6);} .sponsorship .history .tbl th { padding: 15px 24px; font-size: 15px; font-weight: 600; text-align: center; white-space: nowrap; } .sponsorship .history .tbl td { padding: 15px 5px; border-bottom: 1px solid var(--purple7); font-size: 15px; text-align: center;} .sponsorship .history .tbl tbody tr:last-child td { border-bottom: none; } .sponsorship .history .tbl td:first-child { width: 5%;} .sponsorship .history .tbl td:nth-child(2) { width: 15%;} .sponsorship .history .tbl td:nth-child(3) { width: 20%;} .sponsorship .history .tbl td:nth-child(4) { width: 15%;} .sponsorship .history .tbl td:nth-child(5) { width: 15%;} .sponsorship .history .tbl td:nth-child(6) { width: 30%;} @media (max-width: 768px) { .sponsorship .top { grid-template-columns: 1fr; } .sponsorship .top .left h3 { font-size: 20px;text-align: center;} .sponsorship .top .left p { font-size: 18px; text-align: center;} .sponsorship .top .left p br { display: none;} .sponsorship .top .right { margin-top: 15px;} .sponsorship .top .right .total li { border-radius: 14px;} .sponsorship .society { flex-direction: column;} .sponsorship .society li { padding: 20px;} } /*─────────────────────────────────────────────────────────── 사회 공헌 사업 > 기부(Donation) ───────────────────────────────────────────────────────────*/ .donation { } .donation .top { display: flex; align-items: center; justify-content: space-between; padding: 30px 40px; border: 1px solid var(--purple5); border-radius: 14px; background: var(--purple6);} .donation .top .txt { } .donation .top .txt p { font-size: 20px; font-weight: 500;} .donation .top .txt p + p { margin-top: 10px;} .donation .top .txt p a { font-weight: 600; } .donation .top .txt p a:hover { text-decoration: underline;} .donation .top .txt p .point { color: var(--purple); font-weight: 600;} .donation .top .img { display: block; width: 20%; padding: 20px; border-radius: 8px; background: #fff; } .donation .top .img img { } .donation .application { padding: 30px 40px; margin-top: 30px; border: 1px solid var(--purple4); border-radius: 14px; } .donation .application .tit { margin-bottom: 15px; font-size: 20px; font-weight: 600;} .donation .application ul { display: flex; flex-direction: column; gap: 20px;} .donation .application ul li { position: relative; padding-left: 10px; font-size: 17px;} .donation .application ul li::before { content: ""; display: block; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--purple4);} .donation .application ul li span { font-weight: 600; } @media (max-width: 768px) { .donation .top { padding: 20px;} .donation .top .txt p { font-size: 17px; } .donation .top .img { display: none;} .donation .application { padding: 20px;} .donation .application .tit { font-size: 18px; } .donation .application ul li { font-size: 16px;} } /*─────────────────────────────────────────────────────────── 패널 안내 > 패널 안내 ───────────────────────────────────────────────────────────*/ .panel .tab-nav-wrap { margin-bottom: 60px; border-bottom: 1px solid var(--purple4); background: #fff; } .panel .tab-nav { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .panel .tab-nav::-webkit-scrollbar { display: none; } .panel .tab-btn { flex: 1 0 auto; height: 52px; padding: 0 20px; border: none; border-bottom: 3px solid transparent; background: transparent; color: var(--gray); font-size: 18px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s; } .panel .tab-btn.active { border-bottom-color: var(--purple); color: var(--purple); } .section-anchor { display: block; visibility: hidden; } .panel section { display: flex; flex-direction: column; gap: 10px; position: relative; } .panel .side { } .panel .side h3 { font-size: 20px;} .panel .side p { margin-top: 10px; } .panel .box { padding: 40px; border: 1px solid var(--purple4); border-radius: 14px; background: var(--purple6);} .panel .box .subtxt { font-size: 17px;} .panel .define ul li { display: flex; align-items: center; gap: 10px; position: relative; font-size: 18px;} .panel .define ul li + li { margin-top: 15px;} .panel .define ul li .dot { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--purple4); } .panel .define ul li .dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;} .panel .activity { margin-top: 60px;} .panel .activity .box { padding: 0; border: none; border-radius: none; background: #fff} .panel .activity .item { display: flex; flex-direction: column; gap: 10px; margin-top: 15px;} .panel .activity dl { border: 1px solid var(--purple4); border-radius: 14px; background: var(--purple6);} .panel .activity dl dt { padding: 20px; cursor: pointer; position: relative; } .panel .activity dl dt::after { content: ''; position: absolute; right: 30px; bottom: 15px; transform: translateY(-50%); width: 8px; height: 8px; border-right: 2px solid var(--gray2); border-bottom: 2px solid var(--gray2); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s;} .panel .activity dl.open dt::after { transform: translateY(-30%) rotate(225deg);} .panel .activity dl dt .num { display: inline-block; padding: 4px 12px; border: 1px solid var(--purple5); border-radius: 50px; background: #fff; color: var(--purple); font-size: 14px; font-weight: 600;} .panel .activity dl dt .tit { color: var(--purple); font-size: 18px; font-weight: 600; text-align: center;} .panel .activity dl dt .eng { color: var(--gray2); font-size: 13px; font-weight: 500; } .panel .activity dl dt .explain { margin-top: 10px; font-size: 16px;} .panel .activity dl dd { padding: 20px; padding-top: 0;} .panel .activity dl dd ul { display: flex; justify-content: flex-start; gap: 10px; } .panel .activity dl dd ul li { width: 33.3333%; padding: 15px; border-radius: 8px; background: #fff;} .panel .activity dl dd ul li .card { } .panel .activity dl dd ul li .card span { display: block; margin-bottom: 5px; font-size: 16px; font-weight: 600;} .panel .activity dl dd ul li .card p { position: relative; padding-left: 10px; font-size: 16px;} .panel .activity dl dd ul li .card p::before { content: ""; display: block; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--purple4);} .panel .activity dl dd ul li .card p + p { margin-top: 6px;} .panel .benefit { margin-top: 60px;} .panel .benefit .item { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .panel .benefit dl { padding: 20px; border-radius: 8px; background: #fff; } .panel .benefit dl dt { padding-bottom: 10px; text-align: center;} .panel .benefit dl dt span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 20px; margin-bottom: 10px; border-radius: 20px; background: var(--purple6); color: #7056f5; font-size: 16px; font-weight: 600; line-height: 1; } .panel .benefit dl dt p { color: var(--purple); font-size: 18px; font-weight: 600;} .panel .benefit dl dd { } .panel .benefit dl dd p { position: relative; padding-left: 10px;} .panel .benefit dl dd p::before { content: ""; display: block; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: var(--purple4);} .panel .benefit dl dd p + p { margin-top: 10px;} .panel .point { margin-top: 60px;} .panel .point .cont { display: flex; gap: 10px; margin-top: 20px;} .panel .point .cont .group { width: calc((100% - 10px) / 2); padding: 20px; border-radius: 8px; background: #fff;} .panel .point .cont .group .tit { color: var(--purple); font-size: 18px; font-weight: 600;} .panel .point .cont .group .txt { display: block; margin-top: 5px;} .panel .point .cont .group p { position: relative; padding-left: 10px; margin-top: 5px;} .panel .point .cont .group p::before { content: ""; display: block; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: var(--purple4);} .panel .guide { margin-top: 60px;} .panel .guide .cont { display: flex; gap: 10px;} .panel .guide .cont .group { width: calc((100% - 10px) / 2); padding: 20px; border-radius: 8px; background: #fff;} .panel .guide .cont .group .tit { display: block; color: var(--purple); font-size: 18px; font-weight: 600;} .panel .guide .cont .group .txt { display: block; margin-top: 5px;} .panel .guide .cont .group .subtit { display: inline-block; padding: 6px 14px; margin-top: 15px; border-radius: 16px; background: var(--purple6); color: #6346eb; line-height: 1;} .panel .guide .cont .group p { position: relative; padding-left: 10px; margin-top: 5px;} .panel .guide .cont .group p::before { content: ""; display: block; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: var(--purple4);} .panel .guide .cont .group .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 12px; margin-top: 3px; border: 1px solid var(--gray2); border-radius: 8px; background: #fff; color: var(--gray1); font-size: 13px; font-weight: 600; line-height: 1;} .panel .policy { margin-top: 60px;} .panel .policy ul { display: flex; flex-direction: column; gap: 15px;} .panel .policy ul li { padding: 20px; border-radius: 8px; background: #fff;} .panel .policy ul li .tit { color: var(--purple); font-size: 18px; font-weight: 600; } .panel .policy ul li p { position: relative; padding-left: 10px; margin-top: 10px;} .panel .policy ul li p::before { content: ""; display: block; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: var(--purple4);} .panel .policy ul li .txt { display: block; padding-left: 10px; margin-top: 10px; color: var(--gray1); } @media (max-width: 1024px) { .panel .activity dl dd .email .step { height: 140px;} } @media (max-width: 768px) { .panel .tab-nav-wrap { margin-bottom: 30px; border-bottom: none; } .panel .tab-nav { overflow-x: visible; flex-wrap: wrap; } .panel .tab-btn { flex: 0 0 33.333%; padding: 0; font-size: 17px; font-weight: 500; text-align: center; white-space: normal; } .section-anchor { position: relative; top: 5px; } .panel .box { padding: 20px;} .panel .define ul li { align-items: flex-start; gap: 8px; padding-left: 0; font-size: 16px;} .panel .define ul li .dot { width: 10px; height: 10px; margin-top: 5px;} .panel .define ul li .dot::after { width: 4px; height: 4px; } .panel .activity { margin-top: 30px;} .panel .activity dl dt { height: auto; } .panel .activity dl dd { padding: 12px;} .panel .activity dl dd ul { flex-direction: column;} .panel .activity dl dd ul li { width: 100%;} .panel .activity dl dd p { padding-left: 10px; font-size: 15px;} .panel .activity dl dd .email .step { height: 130px; padding: 8px; font-size: 14px;} .panel .activity .item { grid-template-columns: 1fr;} .panel .benefit { margin-top: 30px;} .panel .benefit .item { grid-template-columns: 1fr;} .panel .point { margin-top: 30px;} .panel .point .cont { flex-direction: column;} .panel .point .cont .group { width: 100%;} .panel .guide { margin-top: 30px;} .panel .guide .cont { flex-direction: column;} .panel .guide .cont .group { width: 100%;} .panel .policy { margin-top: 30px;} } /*─────────────────────────────────────────────────────────── 패널 안내 > 공지사항 ───────────────────────────────────────────────────────────*/ /* ── 게시판 리스트 ── */ .board { position: relative; margin-top: 50px;} .board .search { display: flex; align-items: center; position: absolute; right: 0; top: -50px; border: 1px solid var(--gray3); border-radius: 30px; background: #fff;} .board .search input[type="search"] { padding: 6px 10px; border: none; border-radius: 30px; font-size: 16px; text-decoration: none;} .board .search .btn { width: 46px; height: 38px; border: none; border-radius: 30px; background: url(../img/search.svg) center center no-repeat; background-size: 20px 20px;} .board .list { border-top: 1px solid var(--black);} .board .list li { padding: 20px 0; border-bottom: 1px solid var(--gray3);} .board .list li a { position: relative; display: block; width: 100%;} .board .list li a::after { content: ""; display: block; position: absolute; top: 40%; right: 0; width: 16px; height: 16px; background: url(../img/arrow_right.svg) no-repeat; background-size: ;} .board .list li .tit { display: flex; align-items: center; gap: 10px;} .board .list li .tit p { font-size: 20px; font-weight: 600;} .board .list li .tit span { display: flex; justify-content: center; align-items: center; padding: 4px 12px; border-radius: 8px; background: var(--purple); color: #fff; font-size: 14px; line-height: 1;} .board .list li .date { display: block; margin-top: 5px; color: var(--gray1); font-size: 16px;} .page { display: flex; justify-content: center; align-items: center; margin: 40px 0;} .page a { display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; font-size: 15px; text-align: center; } .page a img { width: 20px; } .page a.open_page { border-radius: 50%; background: var(--purple); color: #fff; } @media (max-width: 768px) { .board { margin-top: 70px;} .board .search { height: 35px;} .board .list li .tit { flex-direction: column; align-items: flex-start; gap: 5px;} .board .list li .tit p { font-size: 17px; } .board .list li .tit span { font-size: 13px;} .board .list li .date { font-size: 15px;} .page { margin: 20px 0;} .page a { width: 20px; height: 20px; font-size: 14px;} .page a img { width: 15px; } } /* ── 게시판 글 보기 ── */ .board_view { border-top: 1px solid var(--black);} .board_view .top { padding: 20px 0; border-bottom: 1px solid var(--gray3);} .board_view .top .tit { font-size: 20px; font-weight: 600;} .board_view .top .date { display: block; margin-top: 5px; color: var(--gray1); font-size: 16px;} .board_view .cont { padding: 50px; background: var(--gray5);} .board_view .blist { border-top: 1px solid var(--gray3); } .board_view .blist dl { display: flex; align-items: center; padding: 20px 10px; border-bottom: 1px solid var(--gray3);} .board_view .blist dl dt { width: 10%; color: var(--gray2);} .board_view .blist dl dd { display: flex; justify-content: space-between; width: 90%;} .board_view .blist dl dd a { } .board_view .blist dl dd span { color: var(--gray2);} .board_view .btn { margin: 30px auto; text-align: center;} .board_view .btn a { display: inline-flex; padding: 10px 50px; border-radius: 10px; background: var(--purple); color: #fff; } @media (max-width: 768px) { .board_view .top .tit { font-size: 18px; } .board_view .top .date { font-size: 14px;} .board_view .cont { padding: 20px;} .board_view .blist dl dd { align-items: center; gap: 10px;} .board_view .blist dl dd a { padding-left: 10px;} .board_view .blist dl dd span { font-size: 14px;} .board_view .btn a { padding: 8px 40px; font-size: 15px;} } /*─────────────────────────────────────────────────────────── 패널 안내 > 자주 묻는 질문 ───────────────────────────────────────────────────────────*/ .faq { } .faq ul { border-top: 1px solid var(--black);} .faq ul li { border-bottom: 1px solid var(--gray3);} .faq ul li:last-child { border-bottom: 1px solid var(--black);} .faq ul li .question { display: flex; align-items: center; gap: 10px; position: relative; padding: 30px; cursor: pointer;} .faq ul li .question::after { content: ""; position: absolute; transform: rotate(180deg); right: 20px; top: 40%; width: 20px; height: 20px; background: url(../img/faq_list_arrow.svg) center no-repeat; transition: all 0.4s;} .faq ul li.active .question::after { transform: rotate(0deg); transition: transform 0.4s;} .faq ul li .question span { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; background: var(--purple); color: #fff; font-size: 15px; line-height: 1;} .faq ul li .question .membership { } .faq ul li .question .point { background: #2bb5ac;} .faq ul li .question .survey { background: #e84d6e;} .faq ul li .question .modify { background: #FFC107;} .faq ul li .question p { font-size: 20px; font-weight: 600; line-height: 2;} .faq ul li .answer { padding: 30px 40px; border-top: 1px solid var(--gray3); background: var(--purple6); line-height: 1.5;} .faq ul li .answer p { color: var(--gray);} @media (max-width: 768px) { .faq ul li .question { flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px; padding-right: 20px;} .faq ul li.active .question::after { right: 10px;} .faq ul li .question p { font-size: 16px; line-height: 1.4;} .faq ul li .question span { padding: 3px 10px; font-size: 13px;} .faq ul li .answer { padding: 20px;} .faq ul li .answer p { font-size: 15px;} } /*─────────────────────────────────────────────────────────── 모달 팝업 ───────────────────────────────────────────────────────────*/ /* ── 모달 공통 ── */ .modal-overlay { display: none; align-items: center; justify-content: center; position: fixed; z-index: 1000; inset: 0; background: rgba(0,0,0,0.45);} .modal-overlay.open { display: flex; } .modal { overflow: hidden; width: 100%; max-width: 900px; margin: 20px; border-radius: 14px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.2);} .modal-header { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 20px 24px; background: var(--gray5);} .modal-header h3 { font-size: 18px; font-weight: 700; } .modal-close { position: absolute; top: 15px; right: 20px; border: none; background: none; color: var(--gray); font-size: 30px; line-height: 1; cursor: pointer;} .modal-body { overflow-y: auto; height: auto; padding: 24px; } @media (max-width: 768px) { .modal-header { padding: 20px; } .modal-header h3 { font-size: 16px; font-weight: 600; } } /* ── 출금 신청 > 적립금 사용 안내 ── */ .modal.saveguide .modal-tabs { display: flex; padding: 0 24px; margin-top: 20px; border-bottom: 1px solid var(--gray4); } .modal.saveguide .modal-tabs .tab-btn { padding: 12px 16px; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; background: none; font-size: 16px; color: var(--gray2); cursor: pointer; } .modal.saveguide .modal-tabs .tab-btn.active { border-bottom-color: var(--purple); color: var(--purple); font-weight: 600; } .modal.saveguide .modal-tabs .tab-btn .mo { display: none;} .modal.saveguide .modal-body { height: 320px;} .modal.saveguide .modal-body .tab-content { display: none; } .modal.saveguide .modal-body .tab-content.active { display: block; } .modal.saveguide .modal-body .mtbl { width: 100%; margin-top: 5px; border-top: 1px solid var(--gray4);} .modal.saveguide .modal-body .mtbl th { width: 17%; padding: 10px; border-left: 1px solid var(--gray4); border-right: 1px solid var(--gray4); border-bottom: 1px solid var(--gray4); background: var(--gray6); font-size: 15px; font-weight: 500; vertical-align: middle;} .modal.saveguide .modal-body .mtbl td { padding: 10px; border-right: 1px solid var(--gray4); border-bottom: 1px solid var(--gray4); font-size: 15px; line-height: 1.4; vertical-align: middle} .modal.saveguide .modal-body .mtbl td ul { display: flex; flex-direction: column; gap: 10px; } .modal.saveguide .modal-body .mtbl td ul li { position: relative; padding-left: 10px; font-size: 14px; line-height: 1.6; } .modal.saveguide .modal-body .mtbl td ul li::before { content: ""; display: block; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: var(--gray2); } .modal.saveguide .modal-body .mtbl td ul li span { display: block;} .modal.saveguide .modal-body .mtbl td ul li a { text-decoration: underline;} @media (max-width: 768px) { .modal.saveguide .modal-tabs { flex-wrap: wrap;} .modal.saveguide .modal-tabs .tab-btn { padding: 0; padding-bottom: 10px; margin-bottom: 0; margin-right: 10px; font-size: 15px; } .modal.saveguide .modal-tabs .tab-btn .pc { display: none;} .modal.saveguide .modal-tabs .tab-btn .mo { display: inline-block;} .modal.saveguide .modal-body { padding-top: 0;} .modal.saveguide .modal-body .mtbl { margin-top: 20px;} .modal.saveguide .modal-body .mtbl th { display: block; width: 100%;} .modal.saveguide .modal-body .mtbl td { display: block; border-left: 1px solid var(--gray5); } .modal.saveguide .modal-body .mtbl td ul li a { display: block; word-break: break-all; } } /* ── 출금 신청 > 앱 설치하기 ── */ .modal.appgo { max-width: 500px;} .modal.appgo .modal-header { background: #fff;} /* .modal.appgo .modal-close { } */ .modal.appgo .modal-body { padding-top: 0; padding-bottom: 60px;} .modal.appgo .modal-body .mo { display: none;} .modal.appgo .modal-body ul { display: flex;} .modal.appgo .modal-body ul li { text-align: center;} .modal.appgo .modal-body ul li span { display: block; margin-bottom: 10px; font-size: 22px; font-weight: 600;} .modal.appgo .modal-body .pc ul li img { width: 70%; margin: auto; border: 1px solid var(--gray3);} @media (max-width: 768px) { .modal.appgo .modal-body { padding-top: 24px; } .modal.appgo .modal-body .pc { display: none;} .modal.appgo .modal-body .mo { display: block;} .modal.appgo .modal-body .mo ul { display: flex; gap: 10px;} } /* ── 출금 신청 > 신청하기 ── */ .applyModal { max-width: 420px;} .applyModal .modal-body {} .applyModal .modal-body p { font-size: 18px; text-align: center;} .apply-btn-area { display: flex; justify-content: center; gap: 10px; margin-top: 24px;} .apply-btn-area a { color: var(--purple); font-size: 18px; font-weight: 600; text-decoration: underline; text-align: center;} @media (max-width: 768px) { .applyModal .modal-body p { font-size: 16px; } .apply-btn-area a { font-size: 16px; } } /* ── 내 정보 수정 > 비밀번호 변경 ── */ .modal.pwchange { max-width: 440px; } .modal.pwchange .modal-body { padding: 30px;} .modal.pwchange .pw { margin-bottom: 14px; } .modal.pwchange .pw label { display: block; margin-bottom: 6px; } .modal.pwchange .pw input { width: 100%; height: 40px; padding: 8px 10px; border: 1px solid var(--gray3); border-radius: 8px; } .modal.pwchange .pw input:focus { border-color: var(--purple);} .modal.pwchange .btn { margin-top: 20px; text-align: center; } .modal.pwchange .btn button { padding: 12px 40px; border: none; border-radius: 8px; background: var(--purple); color: #fff; font-size: 16px;} /* ── 탑버튼 ── */ #topscroll { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 999; bottom: 30px; right: 30px; width: 46px; height: 46px; border: none; border-radius: 50%; background: var(--purple); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.15);} #topscroll.show { opacity: 1; visibility: visible;} #topscroll:hover { background: var(--purple1);} @media (max-width: 768px) { #topscroll { bottom: 20px; right: 20px; width: 40px; height: 40px;} } /* ── 내 정보 수정 > 탈퇴하기 ── */ .leaveModal { max-width: 480px; } .leaveModal .modal-body { padding: 28px 24px;} .leaveModal .modal-body p { font-size: 16px; text-align: center;} .leave-btn-area { display: flex; justify-content: center; gap: 10px; margin-top: 24px;} .leave-btn-area a { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 44px; border-radius: 8px; font-size: 15px; font-weight: 600;} .btn_blue { background: var(--purple); color: #fff; } .btn_dgray { background: #888; color: #fff; } @media (max-width: 480px) { .leaveModal .modal-body { padding: 20px 16px; } .leave-btn-area a { width: 100px; height: 40px; font-size: 14px; } } /* ── 아이디 찾기 ── */ .idsendModal { max-width: 420px;} .idsendModal .modal-body { font-size: 16px;} .idsendModal .modal-body p + p { margin-top: 6px;} .idsend-btn-area { display: flex; justify-content: center; margin-top: 24px;} .idsend-btn-area a { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 44px; border-radius: 8px; background: var(--purple); font-size: 15px; font-weight: 600; color: #fff;} /* ── 비밀번호 찾기 ── */ .pwdMsgModal { max-width: 460px;} .pwdMsgModal .modal-body { font-size: 16px;} .pwdMsgModal .modal-body p + p { margin-top: 6px;} .pwdmsg-btn-area { display: flex; justify-content: center; margin-top: 24px;} .pwdmsg-btn-area a { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 44px; border-radius: 8px; background: var(--purple); color: #fff; font-size: 15px; font-weight: 600; } /*─────────────────────────────────────────────────────────── 약관 ───────────────────────────────────────────────────────────*/ /* ── 회원가입 약관 ── */ .privacy { } .privacy .tit { display: block; margin-top: 60px; margin-bottom: 20px; font-size: 20px; font-weight: 700;} .privacy .tit:first-child { margin-top: 0; } .privacy dl { } .privacy dl + dl { margin-top: 30px;} .privacy dl dt { font-size: 18px; font-weight: 600; } .privacy dl dd { margin-top: 10px; color: var(--gray1); font-weight: 400;} .privacy ol { } .privacy ol li { position: relative; padding-left: 10px;} .privacy ol li + li { margin-top: 10px;} .privacy ol li::before { content: ""; display: block; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: var(--gray2);} .privacy ul { margin-top: 10px;} .privacy ul li { } .privacy ul li::before { display: none;} /* ── 위치기반서비스 이용약관 ── */ .location { } .location dl { } .location dl + dl { margin-top: 30px;} .location dl dt { font-size: 18px; font-weight: 600; } .location dl dd { margin-top: 10px; color: var(--gray1); font-weight: 400;} .location ol { } .location ol li + li { margin-top: 10px;} .location ul { margin-top: 10px;} .location ul li { } .location ul li + li { margin-top: 10px;}