/*------------------------------------------------------------------- font -------------------------------------------------------------------*/ @import url('../fonts/Roboto/Roboto.css'); @import url('../fonts/Pretendard/Pretendard-subset.css'); /*------------------------------------------------------------------- reset -------------------------------------------------------------------*/ * { margin: 0; padding: 0; font: inherit; color: inherit; } *, :after, :before { box-sizing: border-box; flex-shrink: 0; } :root { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; cursor: default; line-height: 1.7; overflow-wrap: keep-all; word-break: keep-all; tab-size: 4 } html, body { height: 100%; } img, picture, video, canvas, svg { display: block; max-width: 100%; } button { background: none; border: 0; cursor: pointer; } a { text-decoration: none } table { border-collapse: collapse; border-spacing: 0 } fieldset { border: none; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } input[type=text], input[type=password], input[type=date], input[type=number], textarea { -webkit-appearance: none; -webkit-border-radius: 0; } input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=number]:focus { outline: none; border: 2px solid #0082b3; } select { -webkit-border-radius: 0; outline: none; } ol, ul, li { list-style: none; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ html, body { width: 100%; overflow-x: hidden; } } /*------------------------------------------------------------------- common -------------------------------------------------------------------*/ html, body { font-family: 'Pretendard', sans-serif; color: #0e0e0e; background: #fff; } .hidden { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .wrapper { position: fixed; z-index: 1001; width: 100%; height: 100%; overflow: auto; overflow-x: hidden; scroll-behavior: smooth; } main { border-bottom: 1px solid #e6e6e6; } main .title-wrapper { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 170px; border-bottom: 1px solid #e6e6e6; padding-bottom: 30px; } main .title-wrapper h2 { max-width: 1400px; width: 100%; margin: 50px auto 0; font-size: 60px; font-weight: 700; text-align: center; } @media (max-width: 1420px) { main .title-wrapper h2 { padding-left: 15px; padding-right: 15px; } } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ main .title-wrapper { height: 115px; padding-bottom: 5px; } main .title-wrapper h2 { margin: 35px auto 15px; font-size: 25px; } } footer { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 50px; min-height: 70px; font-size: 14px; color: #5d5d5d; letter-spacing: 0; margin-top: 30px; margin-bottom: 30px; } .footer-info { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 530px; font-size: 16px; color: #0e0e0e; margin-top: 20px; } .footer-info a[href^="tel:"] { font-weight: 700; font-family: 'Roboto', sans-serif; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ footer { min-height: 30px; font-size: 10.5px; } .footer-info { width: 285px; font-size: 12px; margin: -5px 0 -35px; } } /*------------------------------------------------------------------- 브레드크럼 -------------------------------------------------------------------*/ .breadcrumb-nav { max-width: 1400px; width: 100%; margin: 0 auto; } .breadcrumb-nav .breadcrumb { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #0e0e0e; } .breadcrumb-nav .breadcrumb .breadcrumb-item {display: flex; align-items: center; gap: 5px; } .breadcrumb-nav .breadcrumb .breadcrumb-item.active { font-weight: 700; color: #1f6894; } .breadcrumb-nav .breadcrumb .ico-home { display: inline-block; width: 15px; height: 15px; background: url(../images/ico_home.png) no-repeat center center; background-size: contain; } .breadcrumb-nav .breadcrumb .separator { margin: -2px 5px 0; transform: scale(0.8, 1); } .breadcrumb-nav .breadcrumb a { display: flex; align-items: center; color: #0e0e0e; text-decoration: none; } .breadcrumb-nav .breadcrumb a:hover { color: #1f6894; } @media (max-width: 1420px) { .breadcrumb-nav { padding-left: 15px; padding-right: 15px; } } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .breadcrumb-nav .breadcrumb { font-size: 10px; } .breadcrumb-nav .breadcrumb .ico-home { width: 12px; height: 12px; } .breadcrumb-nav .breadcrumb .separator { margin: -2px 2px 0; } } /*------------------------------------------------------------------- LNB -------------------------------------------------------------------*/ .lnb-menu { width: 200px; flex-shrink: 0; margin-top: 53px; } .lnb-menu li { margin-bottom: 8px; } .lnb-menu a { display: flex; align-items: center; justify-content: center; font-size: 18px; width: 100%; height: 44px; border: 1px solid #d9d9d9; font-weight: 700; color: #0e0e0e; text-align: center; border-radius: 22px; transition: all 0.3s ease; } .lnb-menu a:hover { border-color: #0e0e0e; } .lnb-menu a.active { border: none; background: linear-gradient(90deg, #129caf, #0385b0); color: #fff; } @media (max-width: 1000px) { .lnb-menu { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 0; } .lnb-menu li { margin: 0; } .lnb-menu a { min-width: 200px; } /* .lnb-menu a { min-width: 100px; height: 30px; padding: 0 10px; font-size: 13px; }*/ } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .lnb-menu { display: flex; gap: 5px; width: 100%; margin-top: 30px; } .lnb-menu a { min-width: 78.5px; height: 30px; padding: 0 10px; font-size: 13px; } } /*------------------------------------------------------------------- 챗붓 -------------------------------------------------------------------*/ .chatbot-floating { position: fixed; bottom: 30px; right: 30px; z-index: 1000; } .chatbot-toggle-btn { width: 60px !important; height: 60px !important; border-radius: 50% !important; background: transparent !important; border: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; cursor: pointer !important; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .chatbot-toggle-btn #closeIcon, .chatbot-toggle-btn #openIcon { width: 100%; height: 100%; background-image: url(../images/ico_chatbot.png); background-repeat: no-repeat; background-position: center center; background-size: 38px 31px; } .chatbot-toggle-btn #closeIcon { background-color: #2b3033; } .chatbot-toggle-btn #openIcon { background-color: #fff; } .chatbot-toggle-btn #closeIcon path, .chatbot-toggle-btn #openIcon path { display: none; } /*.chatbot-toggle-btn { width: 60px; height: 60px; border-radius: 50%; background: #2ba3c0 no-repeat center center !important; background-size: 38px 31px; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; position: relative; overflow: hidden; }*/ .chatbot-toggle-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } .chatbot-toggle-btn.active { transform: translateY(0); background-color: #2b3032; } .chatbot-window { position: fixed; bottom: 30px; right: 110px; width: 390px; height: 560px; background: linear-gradient(135deg, #329a7b, #007fae); border-radius: 30px; padding: 2px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); display: none; flex-direction: column; overflow: hidden; z-index: 999; animation: slideUp 0.3s ease; } .chatbot-window > .inner { display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 29px; background: white; overflow: hidden; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .chatbot-header { background: linear-gradient(135deg, #49c790 0%, #0195ce 100%); color: white; padding: 15px 20px; font-size: 18px; font-weight: 600; } .chatbot-body { flex: 1; padding: 20px; overflow-y: auto; background: #f1f2f6; } .chatbot-body .message { color: #0e0e0e; padding: 20px; word-break: break-all; max-width: 80%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px; } .chatbot-body .message.user-message { background: #c2ebf5; border-radius: 20px 20px 0px 20px; margin-left: auto; } .chatbot-body .message.bot-message { background: #fff; border-radius: 20px 20px 20px 0px; } .chatbot-footer { padding: 15px 20px; box-shadow: 0 -6px 10px rgba(0, 0, 0, 0.05); display: flex; gap: 10px; } .chatbot-input { flex: 1; height: auto !important; border: none !important; outline: none; font-size: 15px !important; } .chatbot-send-btn { background: #007fae; color: white; border: none; border-radius: 10px; width: 60px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .chatbot-send-btn:disabled { background: #b1c3bb; color: white; border: none; border-radius: 10px; width: 60px; height: 34px; cursor: wait; display: flex; align-items: center; justify-content: center; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .chatbot-window { width: calc(100vw - 30px); height: 70dvh; right: 15px; left: 15px; bottom: 90px; border-radius: 22.5px; } .chatbot-window > .inner { border-radius: 21.5px; } .chatbot-floating { bottom: 15px; right: 15px; } .chatbot-body .message { font-size: 14.5; line-height: 1.4; } .chatbot-body .message.user-message { border-radius: 15px 15px 0px 15px; } .chatbot-body .message.bot-message { border-radius: 15px 15px 15px 0px; } } /*------------------------------------------------------------------- header -------------------------------------------------------------------*/ header { width: 100%; background: #fff; box-shadow: 1px 13px 29px 0 rgba(0, 0, 0, 0.08); position: relative; z-index: 1001; } header > div.head { display: flex; align-items: center; gap: 20px; max-width: 1400px; width: 100%; height: 70px; background: #fff; margin: 0 auto; } header h1 { display: flex; align-items: center; justify-content: space-between; font-size: 20px; font-weight: 600; } header h1 a { display: flex; align-items: center; gap: 10px; } header h1 img { height: 32px; } header h1 + div { display: flex; align-items: center; flex: 1; height: 100%; } header .login-info { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-left: auto; font-size: 14px; font-weight: 400; letter-spacing: 0; position: relative; } header .login-info ul { display: flex; align-items: center; gap: 10px; } header .login-info button { display: flex; justify-content: center; align-items: center; gap: 3px; min-width: 38px; height: 38px; font-size: 15px; color: #1f6894; line-height: 1; background: #ecf1f6 url('data:image/svg+xml;utf8,') no-repeat right 10px center; border-radius: 20px; padding: 0 40px 0 20px; } header .login-info button.btn-member::before { content: ''; display: block; width: 15px; height: 16px; background: url(../images/ico_member.png) no-repeat; background-size: contain; margin-right: 3px; } header .login-info button.btn-member span { font-weight: 600; } header .login-info button.btn-login { color: #fff; background: #0082b3 url(../images/ico_login.png) no-repeat center center; background-size: 18px 18px; border: none; } header .login-info button.btn-login:hover { background-color: #2b3032; } header .login-info button.btn-logout { color: #fff; background: #0082b3 url(../images/ico_logout.png) no-repeat center center; background-size: 18px 18px; border: none; transition: background 0.3s ease; padding: 0; } header .login-info button.btn-logout:hover { background-color: #2b3032; } header .login-info .user-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } header .mobile-user-menu { display: none; } header .user-menu { position: relative; } header .user-menu:hover .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } header .user-dropdown { position: absolute; top: 100%; left: 10px; background: #fff; border-radius: 10px; border: 1px solid #0082b3; box-shadow: 0 4px 15px rgba(0,0,0,0.15); min-width: 120px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; margin-top: 5px; } header .user-dropdown ul { flex-direction: column; padding: 7px 0; gap: 0; } header .user-dropdown li { width: 100%; margin: 0; } header .user-dropdown a { display: block; padding: 5px 10px; text-decoration: none; font-size: 14px; font-weight: 600; background: transparent url(../images/ico_chevron_right.png) no-repeat right 10px center; transition: background-color 0.2s ease; } header .user-dropdown a:hover { color: #0082b3; background: #f1f2f6 url(../images/ico_chevron_right_on.png) no-repeat right 10px center; } header menu { flex: 1; height: 100%; } header menu > ul { display: flex; justify-content: center; gap: 70px; height: 100%; font-size: 20px; font-weight: 700; } header menu > ul > li > a { display: flex; align-items: center; height: 100%; padding: 0 20px; } header menu > ul > li > ul { display: none; } header menu > ul > li:hover, header menu > ul > li.active { background: linear-gradient(90deg, #5ca786, #5b8ea8); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } header .btn-menu { display: none; } header .btn-close { display: none; } .scrollDown > div.head { height: 70px; } .scrollDown > div.head > div { display: none; } @media (max-width: 1420px) { header { padding: 0 15px; } } @media (max-width: 1090px) { header .user-dropdown { display: none; } header .mobile-user-menu { display: block; } header .mobile-user-menu ul { display: flex; flex-direction: column; gap: 10px; color: #0e0e0e; font-size: 14.5px; font-weight: 500; margin: 30px 20px; } header h1 { position: relative; z-index: 2; } header h1 + div { display: none; width: 100vw; padding: 100px 0; } header h1 + div > menu { height: auto; } header h1 + div > menu ul { flex-direction: column; gap: 15px; width: fit-content; margin: 45px 0 0; font-size: 18px; } header h1 + div > menu ul > li.active::after { display: none; } header h1 + div > .login-info { justify-content: flex-start; width: 100%; padding: 0 20px; position: absolute; bottom: 50px; } header h1 + div > .login-info ul { justify-content: space-between; width: 100%; margin: 0; } header h1 + div.active { display: block; background: #fff; position: fixed; top: 0; left: 0; z-index: 1; } header h1 + div.active::before { content: ''; display: block; width: 100%; height: 70px; box-shadow: 0px 1px 8px 1px rgba(10, 7, 17, 0.08); margin-top: -100px; } header .btn-menu { display: block; position: absolute; top: 25px; right: 15px; z-index: 1; } header .btn-menu .line { width: 30px; height: 3px; background-color: #222; display: block; margin-left: auto; transition: all 0.3s ease-in-out; } header .btn-menu .line:nth-child(2) { margin-top: 4px; margin-bottom: 4px; } header .btn-menu.active .line:nth-child(1) { width: 30px; transform: translateY(7px) rotate(45deg); } header .btn-menu.active .line:nth-child(2) { width: 30px; opacity: 0; } header .btn-menu.active .line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ header { box-shadow: 0px 1px 8px 1px rgba(10, 7, 17, 0.08); } header > div.head { height: 46px; } header h1 { font-size: 13.5px; } header h1 a { gap: 5px; } header h1 img { height: 21px; } header h1 + div { padding: 45px 0; } header h1 + div.active::before { height: 46px; margin-top: -46px; } header .btn-menu { top: 16px; right: 18px; } header .btn-menu .line { width: 17px; height: 2px; } header .btn-menu .line:nth-child(2) { margin-top: 3px; margin-bottom: 3px; } header .btn-menu.active .line:nth-child(1) { width: 17px; transform: translateY(5px) rotate(45deg); } header .btn-menu.active .line:nth-child(2) { width: 17px; opacity: 0; } header .btn-menu.active .line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } } /*------------------------------------------------------------------- 서브페이지 공통 -------------------------------------------------------------------*/ .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .sub-wrapper { display: flex; gap: 50px; max-width: 1400px; width: 100%; margin: 67px auto 50px; } .sub-wrapper .btn-wrapper { margin: 10px 0; } .sub-wrapper .btn-wrapper button { min-width: 280px; height: 64px; font-size: 20px; } .sub-wrapper .sub-bar { width: calc(100% + 60px); height: 1px; background: #606060; margin: 30px -30px 10px; } @media (max-width: 1420px) { .sub-wrapper { padding-left: 15px; padding-right: 15px; } } @media (max-width: 1000px) { .sub-wrapper { flex-direction: column; } } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .sub-wrapper { gap: 20px; margin-top: 0; margin-bottom: 40px; } .sub-wrapper .btn-wrapper { gap: 14px; } .sub-wrapper .btn-wrapper button { min-width: 116px; height: 40px; font-size: 18px; } } .comm-wrapper { width: 100%; background: #fff; } .comm-inner { display: none; max-width: 1200px; width: 100%; margin: 0 auto; padding: 90px 35px 140px; overflow: hidden; } .comm-inner.active { display: block; } .comm-inner h2 { font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 60px; text-align: center; } .comm-inner h3 { font-size: 24px; font-weight: 600; } .comm-inner h3:not(:nth-of-type(1)) { margin-top: 40px; } .comm-inner h3 a { font-size: 16px; border: 1px solid #d0d0d0; border-radius: 8px; padding: 5px 13px; transition: all .3s ease-in-out; float: right; } .comm-inner h3 a:hover { background: #f4f4f4; } .comm-inner h3 img, .comm-inner h4 img { display: inline-block; height: 32px; vertical-align: middle; } .comm-inner .terms-content, .comm-inner .privacy-content { font-size: 20px; font-weight: 400; letter-spacing: 0; word-break: break-all; text-align: justify; } .comm-inner .privacy-content h4 { display: flex; align-items: center; gap: 15px; font-size: 18px; font-weight: 600; margin-top: 10px; } .comm-inner .privacy-content h4 + .scroll-container table { margin-top: 10px; } .comm-inner .terms-content ol li, .comm-inner .privacy-content ol li { list-style-type: decimal; margin-left: 30px; } .comm-inner .privacy-content .box { border: 1px solid #d0d0d0; border-radius: 30px; padding: 40px; margin-bottom: 40px; } .comm-inner .privacy-content .box strong { font-weight: 600; } .comm-inner .privacy-content .list-box { margin-top: 20px; } .comm-inner .privacy-content .list-box ol { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 50px; } .comm-inner .privacy-content .list-box a:hover { color: #0044cc; } .comm-inner .privacy-content ul { clear: both; } .comm-inner .privacy-content ul li { display: flex; gap: 5px; } .comm-inner .privacy-content ul li > div { flex: 1; margin-bottom: 10px; } .comm-inner .privacy-content ul li > div th { font-size: 16px; } .comm-inner .privacy-content ul li > div td { font-size: 16px; text-align: left; line-height: 1.5; } .comm-inner .privacy-content > ul > li:nth-of-type(1)::before { content: '①'; } .comm-inner .privacy-content > ul > li:nth-of-type(2)::before { content: '②'; } .comm-inner .privacy-content > ul > li:nth-of-type(3)::before { content: '③'; } .comm-inner .privacy-content > ul > li:nth-of-type(4)::before { content: '④'; } .comm-inner .privacy-content > ul > li:nth-of-type(5)::before { content: '⑤'; } .comm-inner .privacy-content > ul > li:nth-of-type(6)::before { content: '⑥'; } .comm-inner .privacy-content > ul > li:nth-of-type(7)::before { content: '⑦'; } .comm-inner .privacy-content > ul > li:nth-of-type(8)::before { content: '⑧'; } .comm-inner .privacy-content > ul > li:nth-of-type(9)::before { content: '⑨'; } .comm-inner .privacy-content > ul > li > div > ul > li:nth-of-type(1)::before { content: '1)'; } .comm-inner .privacy-content > ul > li > div > ul > li:nth-of-type(2)::before { content: '2)'; } .comm-inner .privacy-content > ul > li > div > ul > li:nth-of-type(3)::before { content: '3)'; } .comm-inner .privacy-content > ul > li > div > ul > li:nth-of-type(4)::before { content: '4)'; } .comm-inner .privacy-content > ul > li > div > ul > li:nth-of-type(5)::before { content: '5)'; } .comm-inner .privacy-content > ul > li > div > ul > li:nth-of-type(6)::before { content: '6)'; } .comm-inner .privacy-content > ul > li > div > ul > li:nth-of-type(7)::before { content: '7)'; } .comm-inner .privacy-content > ul > li > div > ul > li:nth-of-type(8)::before { content: '8)'; } .comm-inner .privacy-content > ul > li > div > ul > li:nth-of-type(9)::before { content: '9)'; } .comm-inner .privacy-content .box-list { border: 1px solid #d0d0d0; border-radius: 20px; padding: 20px 30px; margin: 10px; } .comm-inner .privacy-content .box-list li::before, .comm-inner .privacy-content > ul > li > div li > div li::before { content: '' !important; width: 7px; height: 7px; background-color: #0e0e0e; border-radius: 100%; margin-top: 14px; } .comm-inner .privacy-content .new-link { font-size: 16px; border: 1px solid #d0d0d0; border-radius: 10px; padding: 7px 12px; transition: all .3s ease-in-out; } .comm-inner .privacy-content .new-link:hover { background: #000; color: #fff; border-color: #000; } .comm-inner .privacy-content p + ul { margin-left: 15px; } .comm-inner .privacy-content p + p, .comm-inner .privacy-content ol + p, .comm-inner .privacy-content ul + p { margin-top: 20px; } .comm-inner .privacy-content table { width: 100%; margin: 20px auto; } .comm-inner .privacy-content caption { text-align: left; padding: 5px 0; } .comm-inner .privacy-content th { height: 60px; font-weight: 700; background: #f4f4f4; border-top: 1px solid #000 !important; border-bottom: 1px solid #ddd; text-align: center; padding: 0 10px; } .comm-inner .privacy-content td { min-height: 40px; border-bottom: 1px solid #ddd; text-align: center; padding: 10px; } .comm-inner .privacy-content th, .comm-inner .privacy-content td { border: 1px solid #ddd; } .comm-inner .privacy-content tr th:first-child, .comm-inner .privacy-content tr td:first-child { border-left: none; } .comm-inner .privacy-content tr th:last-child, .comm-inner .privacy-content tr td:last-child { border-right: none; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .comm-inner { padding: 50px 0; } .comm-inner h2 { font-size: 27px; } .comm-inner h3 { font-size: 13px; } .comm-inner .scroll-container { width: 100%; overflow-x: auto; } .comm-inner .terms-content, .comm-inner .privacy-content { font-size: 13px; } .comm-inner h3 { position: relative; } .comm-inner h3 a { font-size: 10px; border-radius: 4px; padding: 2px 8px; position: absolute; top: -25px; left: 0; } .comm-inner h3 img, .comm-inner h4 img { height: 20px; } .comm-inner .privacy-content h4 { font-size: 13px; } .comm-inner .privacy-content h4 + .scroll-container table { margin-top: 5px; } .comm-inner .privacy-content .box { padding: 22.5px; margin-bottom: 23px; } .comm-inner .privacy-content .box-list { padding: 15px; } .comm-inner .privacy-content .box-list li::before, .comm-inner .privacy-content > ul > li > div li > div li::before { width: 4px; height: 4px; margin-top: 9px; } .comm-inner .privacy-content table { min-width: 700px; margin: 5px 0; } .comm-inner .privacy-content th, .comm-inner .privacy-content td { height: 32px; padding: 5px 10px; } .comm-inner .privacy-content ul li > div { width: calc(100% - 20px); } .comm-inner .privacy-content ul li > div th { font-size: 12px; } .comm-inner .privacy-content ul li > div td { font-size: 12px; } .comm-inner .privacy-content .list-box ol { grid-template-columns: 1fr; } .comm-inner .privacy-content .new-link { font-size: 12px; border-radius: 6px; padding: 4px 8px; margin: 5px 0; } } .label-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0; } .label-card { position: relative; background: #fff; border: 1px solid #d0d0d0; border-radius: 15px; padding: 30px; min-height: 180px; cursor: pointer; transition: all 0.3s ease; overflow: hidden; } .label-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .label-card:hover .label-content { opacity: 0; visibility: hidden; } .label-card:hover .label-help { opacity: 1; visibility: visible; } .label-content { display: flex; flex-direction: column; align-items: center; gap: 15px; transition: all 0.3s ease; } .label-content i { width: 82px; height: 92px; background-size: 500px 92px; background-repeat: no-repeat; background-position: center; background-image: url(../images/privacy_icon.png); } .label-content .privacy01 { background-position: -2px 0; } .label-content .privacy02 { background-position: -84px 0; } .label-content .privacy03 { background-position: -163px 0; } .label-content .privacy04 { background-position: -243px 0; } .label-content .privacy05 { background-position: -323px 0; } .label-content .privacy06 { background-position: -403px 0; } .label-content h4 { font-size: 18px; font-weight: 600; color: #0e0e0e; text-align: center; margin: 0; } .label-help { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f4f4f4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .label-help i { width: 56.5px; height: 60px; background-size: 326px 60px; background-repeat: no-repeat; background-position: center; background-image: url(../images/privacy_icon_hover.png); margin-bottom: 20px; } .label-help .privacy01 { background-position: 0 0; } .label-help .privacy02 { background-position: -56px 0; width: 54px; } .label-help .privacy03 { background-position: -110px 0; width: 54px; } .label-help .privacy04 { background-position: -164px 0; width: 54px; } .label-help .privacy05 { background-position: -218px 0; width: 54px; } .label-help .privacy06 { background-position: -271px 0; } .label-help h4 { font-size: 17px; font-weight: 600; color: #0e0e0e; text-align: center; margin: 0; } .label-help p { font-size: 15px; line-height: 1.6; text-align: center; margin: 0; color: #0e0e0e; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .label-section { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0; } .label-card { min-height: auto; padding: 20px 10px; border-radius: 22.5px; } .label-content { gap: 10px; } .label-content i { width: 41px; height: 46px; background-size: 250px 46px; } .label-content .privacy01 { background-position: -1px 0; } .label-content .privacy02 { background-position: -42px 0; } .label-content .privacy03 { background-position: -81.5px 0; } .label-content .privacy04 { background-position: -121.5px 0; } .label-content .privacy05 { background-position: -161.5px 0; } .label-content .privacy06 { background-position: -201.5px 0; } .label-content h4 { font-size: 13px !important; margin-top: 0 !important; } .label-help { padding: 15px; border-radius: 12px; } .label-help i { width: 28.25px; height: 30px; background-size: 163px 30px; margin-bottom: 10px; } .label-help h4 { font-size: 12px !important; margin-top: 0 !important; } .label-help p { font-size: 10px !important; line-height: 1.5; } .label-help .privacy01 { background-position: 0 0; } .label-help .privacy02 { background-position: -28px 0; width: 27px; } .label-help .privacy03 { background-position: -55px 0; width: 27px; } .label-help .privacy04 { background-position: -82px 0; width: 27px; } .label-help .privacy05 { background-position: -109px 0; width: 27px; } .label-help .privacy06 { background-position: -135.5px 0; } } .sub-tab { display: flex; font-size: 24px; font-weight: 600; max-width: 1200px; width: 100%; margin: 0 auto; padding: 100px 35px 0; } .sub-tab button { display: flex; align-items: center; justify-content: center; flex: 1; height: 90px; color: #919191; background: #f4f4f4; position: relative; } .sub-tab button::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: all .1s ease-in-out; } .sub-tab button.active { color: #ecf1f6; background: #1f6894; } .sub-tab button.active::after { border: 4px solid #1f6894; opacity: 1; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .sub-tab { font-size: 16px; padding: 60px 0 0; } .sub-tab button { height: 45px; } .sub-tab button.active::after { border-width: 1px; } } .scroll { overflow: hidden; overflow-y: auto; } .scroll::-webkit-scrollbar { width: 6px; } .scroll::-webkit-scrollbar-thumb { background: #dfe3ea; border-radius: 3px; } .scroll::-webkit-scrollbar-track { background: transparent; } /* 컨텐츠 영역 */ .content-area { flex: 1; position: relative; } .list-info { display: flex; align-items: flex-end; justify-content: space-between; height: 55px; margin-bottom: 5px; padding: 11px 0; border-bottom: 2px solid #0e0e0e; } .list-info .total-count { font-size: 18px; color: #0e0e0e; font-weight: 700; } .list-info .total-count strong { color: #0082b3; } .post-list { margin-bottom: 40px; } .post-item { border-bottom: 1px solid #d6d6d6; overflow: hidden; position: relative; } .post-main { padding: 23px 42px; } .post-title { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; margin: 0 0 18px 0; line-height: 1.4; } .post-title .new-badge { background: #119baf; color: white; padding: 3px 6px; border-radius: 3px; font-size: 11px; font-weight: 500; } .post-title .fin-badge { background: #6c757d; color: white; padding: 3px 6px; border-radius: 3px; font-size: 11px; font-weight: 500; } .post-title .btn-image-view { content: ''; display: block; width: 20px; height: 22px; -webkit-mask: url(../images/ico_photo.png) no-repeat center; -webkit-mask-size: 21px 20px; mask: url(../images/ico_photo.png) no-repeat center; mask-size: 21px 20px; background-color: #0e0e0e; float: right; margin-right: 10px; } .post-title .btn-image-view:hover { background-color: #0082b3; } .qna-item-container { position: relative; } .qna-item-container .popup-wrapper .popup-container { top: 70px; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .qna-item-container .popup-wrapper .popup-container { top: 50px; } } .post-content { line-height: 1.7; font-size: 17px; margin-bottom: 19px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .post-item.active .post-content { display:block; overflow: visible; -webkit-line-clamp: unset; -webkit-box-orient: unset; } .post-footer { display: flex; justify-content: space-between; align-items: center; } .post-footer .toggle-btn { position: absolute; top: 34px; right: 30px; width: 16px; height: 11px; border: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48px' height='30px'%3E%3Cpath fill-rule='evenodd' opacity='0.702' fill='rgb(14, 14, 14)' d='M45.796,9.877 L27.609,28.457 C25.600,30.510 22.343,30.510 20.335,28.457 L2.147,9.877 C0.138,7.825 0.138,4.497 2.147,2.445 C4.156,0.393 7.413,0.393 9.422,2.445 L23.972,17.310 L38.522,2.445 C40.529,0.393 43.787,0.393 45.796,2.445 C47.804,4.497 47.804,7.825 45.796,9.877 Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; transition: all 0.2s ease; } .post-item.active .post-footer .toggle-btn { transform: rotate(180deg); } .post-meta { display: flex; align-items: center; gap: 30px; font-size: 15px; font-family: 'Roboto', sans-serif; color: #7b7b7b; } .post-meta li { display: flex; align-items: center; padding-left: 22px; } .post-meta li.date { background: url(../images/ico_time.png) no-repeat left center; background-size: 16px 16px; } .post-meta li.view { background: url(../images/ico_view.png) no-repeat left center; background-size: 15px 11px; } /* 답변 영역 */ .post-answer { display: none; margin-top: 20px; background: #f8f8f8; padding: 20px 25px; border-radius: 4px; } .post-item.active .post-answer { display: block; } .post-item.active .post-content { display: block; overflow: visible; -webkit-line-clamp: unset; -webkit-box-orient: unset; } .answer-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .answer-header strong { font-size: 16px; font-weight: 600; color: #119baf; } .answer-date { font-size: 14px; color: #7b7b7b; font-family: 'Roboto', sans-serif; } .answer-content { line-height: 1.7; font-size: 16px; color: #333; } .answer-content pre { margin: 0; white-space: pre-wrap; font-family: inherit; } /* 검색영역 */ .search-section { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } .search-section .search-item { display: flex; align-items: center; gap: 15px; } .search-section .search-item label { font-size: 18px; font-weight: 700; } .search-section .search-type { margin-left: auto; width: 100%; max-width: 340px; flex: 1; } .search-section .radio-group { display: flex; align-items: center; gap: 15px; } .search-section .radio-group label { display: flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 15px; background: #f4f4f5; color: #9c9ca2; font-weight: 400; border-radius: 24px; cursor: pointer; } .search-section .radio-group input[type=radio]:checked + label { background: #0082b3; color: #fff; } .search-section .select-box { width: 100%; } .search-section .select-box select { height: 48px; padding: 0 30px; border: 1px solid #aab4b8; border-radius: 24px; font-size: 17px; min-width: 200px; } .search-section .date-input { width: auto !important; height: 48px; padding: 0 30px 0 20px; background-position: right 20px center !important; border: 1px solid #aab4b8; border-radius: 24px; font-size: 17px; } @media (max-width: 1000px) { .search-section .search-type { margin-left: 0; } } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .search-section { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 25px; margin-bottom: 50px; } .search-section .search-item:not(:has(.radio-group)) { flex-direction: column; align-items: flex-start; gap: 5px; } .search-section .search-item label { font-size: 13.5px; } .search-section .search-type { max-width: 255px; } .search-section .radio-group { gap: 7px; } .search-section .radio-group label { min-width: 36px; height: 36px; font-size: 13px; padding: 0 10px; } .search-section .select-box select { height: 36px; font-size: 13px; padding: 0 20px; } .search-section .date-input { height: 36px; font-size: 13px; } } .post-content > p:first-child { display: none; } .post-content dt { display: inline-flex; align-items: center; height: 28px; color: #fff; font-weight: 600; background: #9ca2a4; border-radius: 14px; padding: 0 10px; margin: 15px 0 10px 0; } .post-content dd { padding-left: 10px; } .post-content h3 { font-weight: 700; color: #2b3032; } .post-content h3:not(:first-child) { margin-top: 10px; } .data-table-container .dataTables_wrapper { border-top: 2px solid #0e0e0e; } .data-table-container table { width: 100% !important; } .data-table-container table.dataTable { border: none; } .data-table-container table.dataTable thead th, .data-table-container table.dataTable thead td { padding: 20px 20px; border: none; background: #f4f4f5; color: #737379; font-size: 17px; line-height: 1.4; font-weight: 400; } .data-table-container table.dataTable tbody th, .data-table-container table.dataTable tbody td { padding: 20px 20px; font-size: 17px; line-height: 1.4; text-align: center; border-bottom: 1px solid #d6d6d6; white-space: nowrap; } .data-table-container table.dataTable tbody tr.child td { text-align: left; white-space: pre-line !important; } .data-table-container table.dataTable tbody tr.child ul.dtr-details { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 4px 0; } .data-table-container table.dataTable tbody tr.child ul.dtr-details li { display: flex; align-items: flex-start; gap: 10px; border: none; padding: 0; } .data-table-container table.dataTable tbody tr.child ul.dtr-details .dtr-title { white-space: normal; /*width: 145px;*/ font-weight: 400; color: #737379 !important; } .data-table-container table.dataTable tbody tr.child ul.dtr-details .dtr-data { color: #0e0e0e; flex: 1; } .data-table-container table.dataTable tbody tr.child ul.dtr-details li.text-primary .dtr-data { color: #0082b3; } .data-table-container table.dataTable tbody tr.select { background: #ecf1f6; } .data-table-container table.dataTable tbody tr.parent { background: #ecf1f6; } .data-table-container table.dataTable tbody tr.parent:not(.select) { background: #fff; } @media (hover: hover) and (pointer: fine) { .data-table-container table.dataTable tbody tr:hover { background: #ecf1f6; } } .data-table-container table.dataTable.dtr-column > tbody > tr > td:has(.btn-delete), .data-table-container table.dataTable.dtr-column > tbody > tr > td.dtr-control { width: 0; } .data-table-container table.dataTable.dtr-column > tbody > tr > td.dtr-control:before { content: ''; width: 8px; height: 8px; border-bottom: 2px solid #565656; border-right: 2px solid #565656; transform: rotate(45deg); margin-bottom: 6px; transition: all 0.3s ease; } .data-table-container table.dataTable.dtr-column > tbody > tr.parent > td.dtr-control:before { transform: rotate(225deg); margin-bottom: 2px; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .data-table-container table.dataTable thead th, .data-table-container table.dataTable thead td { padding: 15px 15px; font-size: 13px; line-height: 1.2; } .data-table-container table.dataTable tbody th, .data-table-container table.dataTable tbody td { padding: 15px 15px; font-size: 13px; line-height: 1.2; } /*.data-table-container table.dataTable tbody tr.child ul.dtr-details .dtr-title { width: 70px; }*/ .data-table-container table.dataTable.dtr-column > tbody > tr > td.dtr-control:before { margin-bottom: 3px; } .data-table-container table.dataTable.dtr-column > tbody > tr.parent > td.dtr-control:before { margin-bottom: 0; } } /* 상태 표시 */ .badge { display: inline-flex; justify-content: center; align-items: center; min-width: 115px; height: 30px; color: #fff; font-size: 16px; font-weight: 700; border-radius: 15px; } .badge.error { background: #ff4c6d; } .badge.warning { background: #ca5fe9; } .badge.critical { background: #ffb222; } .sending-status { background: url(../images/ico_message.png) no-repeat right center; background-size: 20px 19px; padding-right: 25px; } .sending-status.wait { color: #737379; } .sending-status.limit { color: #0e0e0e; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .badge { min-width: 75px; height: 22.5px; font-size: 12px; } .sending-status { background-size: 15px 14px; padding-right: 20px; } } .text-primary { color: #0082b3; } /* 페이징 */ .pagination { display: flex; justify-content: center; align-items: center; gap: 1px; margin-top: 40px; } .pagination button { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: none; cursor: pointer; border-radius: 100%; font-size: 15px; font-family: 'Roboto', sans-serif; font-weight: 500; color: #898989; transition: all 0.3s ease; position: relative; } .pagination button:hover { background: #f5f5f5; color: #0e0e0e; } .pagination button.active { background: #0e0e0e; color: white; } .pagination button:disabled { background: #f9f9f9; border-color: #eee; color: #ccc; cursor: not-allowed; } .pagination button.arrow { width: 30px; background: transparent; } .pagination button.arrow.left { margin: 0 10px 0 -10px; } .pagination button.arrow.right { margin: 0 -10px 0 10px; } .pagination button.arrow::before, .pagination button.arrow.double::after { content: ''; position: absolute; width: 12px; height: 12px; border-top: 1px solid #919191; border-right: 1px solid #919191; transition: border-color 0.3s ease; } .pagination button.arrow.left::before { transform: rotate(-135deg); left: calc(50% - 2px); } .pagination button.arrow.right::before { transform: rotate(45deg); left: calc(50% - 8px); } .pagination button.arrow:hover::before, .pagination button.arrow.double:hover::after { border-color: #0e0e0e; } .pagination button.arrow.double.left::before { transform: rotate(-135deg); left: calc(50% - 6px); } .pagination button.arrow.double.left::after { transform: rotate(-135deg); left: 50%; } .pagination button.arrow.double.right::before { transform: rotate(45deg); left: calc(50% - 12px); } .pagination button.arrow.double.right::after { transform: rotate(45deg); left: calc(50% - 6px); } .pagination button:disabled::before, .pagination button.arrow.double:disabled::after { border-color: #ccc !important; } /* 페이징 - 데이터 테이블 */ .dataTables_wrapper .dataTables_paginate { display: flex; justify-content: center; align-items: center; color: #898989; float: none; text-align: center; padding-top: 0; margin-top: 40px; } .dataTables_wrapper .dataTables_paginate > span { display: flex; justify-content: center; align-items: center; margin: 0 20px; } .dataTables_wrapper .dataTables_paginate .paginate_button { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 100%; padding: 0; margin: 0; text-align: center; font-size: 15px; font-family: 'Roboto', sans-serif; font-weight: 500; color: #898989 !important; border: none !important; box-shadow: none !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #f5f5f5; color: #0e0e0e !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #0e0e0e !important; color: white !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { background: #f9f9f9 !important; border-color: #eee !important; color: #ccc !important; cursor: not-allowed; } .dataTables_wrapper .dataTables_paginate .paginate_button.first, .dataTables_wrapper .dataTables_paginate .paginate_button.previous, .dataTables_wrapper .dataTables_paginate .paginate_button.next, .dataTables_wrapper .dataTables_paginate .paginate_button.last, .dataTables_wrapper .dataTables_paginate .paginate_button.first:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.last:hover { width: 30px; color: transparent !important; background: transparent !important; border: none !important; position: relative; } .dataTables_wrapper .dataTables_paginate .paginate_button.first::after, .dataTables_wrapper .dataTables_paginate .paginate_button.previous::after, .dataTables_wrapper .dataTables_paginate .paginate_button.next::after, .dataTables_wrapper .dataTables_paginate .paginate_button.last::after, .dataTables_wrapper .dataTables_paginate .paginate_button.first::before, .dataTables_wrapper .dataTables_paginate .paginate_button.last::before { content: ''; position: absolute; width: 12px; height: 12px; border-top: 1px solid #919191; border-right: 1px solid #919191; transition: border-color 0.3s ease; } .dataTables_wrapper .dataTables_paginate .paginate_button.first::after { transform: rotate(-135deg); left: calc(50% - 6px); } .dataTables_wrapper .dataTables_paginate .paginate_button.first::before { transform: rotate(-135deg); left: calc(50% + 0px); } .dataTables_wrapper .dataTables_paginate .paginate_button.previous::after { transform: rotate(-135deg); left: calc(50% - 4px); } .dataTables_wrapper .dataTables_paginate .paginate_button.next::after { transform: rotate(45deg); left: calc(50% - 8px); } .dataTables_wrapper .dataTables_paginate .paginate_button.last::after { transform: rotate(45deg); left: calc(50% - 6px); } .dataTables_wrapper .dataTables_paginate .paginate_button.last::before { transform: rotate(45deg); left: calc(50% - 12px); } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled::after, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled::before { border-color: #ccc !important; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .list-info { margin-bottom: 5px; padding: 7px 0; } .list-info .total-count { font-size: 13px; } .post-list { margin-bottom: 40px; } .post-main { padding: 23px 7px; } .post-title { gap: 6px; font-size: 17px; margin: 0 0 5px 0; line-height: 1.4; } .post-title .new-badge { padding: 2px 7px; border-radius: 3px; font-size: 11px; } .post-content { line-height: 1.6; font-size: 14px; margin-bottom: 10px; } .post-footer .toggle-btn { top: 27px; right: 7px; width: 12px; height: 7px; } .post-meta { gap: 25px; font-size: 13px; } .post-meta li.date { background-size: 16px 16px; } .post-meta li.view { padding-left: 18px; } /* 페이징 */ .pagination { margin-top: 35px; } .pagination button { width: 30px; height: 30px; font-size: 13px; } .pagination button.arrow { width: 24px; background: transparent; } .pagination button.arrow.left { margin: 0 10px 0 -10px; } .pagination button.arrow.right { margin: 0 -10px 0 10px; } .pagination button.arrow::before, .pagination button.arrow.double::after { width: 8px; height: 8px; } .pagination button.arrow.left::before { transform: rotate(-135deg); left: calc(50% - 2px); } .pagination button.arrow.right::before { transform: rotate(45deg); left: calc(50% - 8px); } .pagination button.arrow.double.left::before { transform: rotate(-135deg); left: calc(50% - 6px); } .pagination button.arrow.double.left::after { transform: rotate(-135deg); left: 50%; } .pagination button.arrow.double.right::before { transform: rotate(45deg); left: calc(50% - 12px); } .pagination button.arrow.double.right::after { transform: rotate(45deg); left: calc(50% - 6px); } .dataTables_wrapper .dataTables_paginate { margin-top: 20px; } .dataTables_wrapper .dataTables_paginate .paginate_button { width: 30px; height: 30px; font-size: 13px; } .dataTables_wrapper .dataTables_paginate .paginate_button.first, .dataTables_wrapper .dataTables_paginate .paginate_button.previous, .dataTables_wrapper .dataTables_paginate .paginate_button.next, .dataTables_wrapper .dataTables_paginate .paginate_button.last, .dataTables_wrapper .dataTables_paginate .paginate_button.first:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.last:hover { width: 20px; } .dataTables_wrapper .dataTables_paginate .paginate_button.first::after, .dataTables_wrapper .dataTables_paginate .paginate_button.previous::after, .dataTables_wrapper .dataTables_paginate .paginate_button.next::after, .dataTables_wrapper .dataTables_paginate .paginate_button.last::after, .dataTables_wrapper .dataTables_paginate .paginate_button.first::before, .dataTables_wrapper .dataTables_paginate .paginate_button.last::before { width: 8px; height: 8px; } .dataTables_wrapper .dataTables_paginate .paginate_button.first::after { transform: rotate(-135deg); left: calc(50% - 6px); } .dataTables_wrapper .dataTables_paginate .paginate_button.first::before { transform: rotate(-135deg); left: calc(50% + 0px); } .dataTables_wrapper .dataTables_paginate .paginate_button.previous::after { transform: rotate(-135deg); left: calc(50% - 4px); } .dataTables_wrapper .dataTables_paginate .paginate_button.next::after { transform: rotate(45deg); left: calc(50% - 8px); } .dataTables_wrapper .dataTables_paginate .paginate_button.last::after { transform: rotate(45deg); left: calc(50% - 6px); } .dataTables_wrapper .dataTables_paginate .paginate_button.last::before { transform: rotate(45deg); left: calc(50% - 12px); } } .form-container { display: flex; width: 100%; background: #fff; border-top: 2px solid #0e0e0e; border-bottom: 1px solid #d6d6d6; padding: 80px 40px; margin-bottom: 40px; } .form-container form { flex: 1; } .form-container .form-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .form-container .form-group + .form-group { margin-top: 50px; } .form-container .form-group label { display: block; min-width: 160px; font-size: 17px; font-weight: 700; } .form-container .form-group input[type=text], .form-container .form-group input[type=number] { max-width: 400px; flex: 1; } .form-container .form-group input[type=text] + .btn-search { margin-right: -48px; } .form-container .form-group .select-box { width: 100%; max-width: 400px; flex: 1; } .form-container .form-group .textarea-wrapper { width: 100%; max-width: 890px; flex: 1; } .form-container .form-item { display: flex; align-items: center; gap: 10px; max-width: 400px; flex: 1; } .form-container .date-range { display: flex; align-items: center; gap: 10px; } .form-container .date-range input { flex: 1; } .form-container .d-day-info { display: inline-block; min-width: 195px; } .form-container .d-day-info + .select-box { width: 195px; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .form-container { padding: 45px 10px; border-bottom-width: 1px; margin-bottom: 20px; } .form-container .form-group + .form-group { margin-top: 37px; } .form-container .date-range, .form-container .form-item:not(.row) { flex-direction: column; align-items: flex-start; } .form-container .form-item { gap: 5px; } .form-container .form-item input[type=text], .form-container .form-item input[type=number] { flex: 0 0 auto; } .form-container .form-item.row input[type=text]:not(.date-input), .form-container .form-item.row input[type=number] {max-width: 87.5px; } .form-container .form-group { align-items: flex-start; gap: 5px; font-size: 13px; line-height: 36px; } .form-container .form-group input[type=text] + .btn-search { margin-right: 0; } .form-container .form-group label { min-width: 100px; font-size: 13px !important; } .form-container .form-group input[type=text], .form-container .form-group input[type=number] .form-container .form-group input[type=text].date-input, .form-container .form-group .select-box { max-width: none; } .form-container .form-item, .form-container .date-range { flex: 1; width: 0; } .form-container .date-range input[type=text] { flex: 0 0 auto; width: 100%; } .form-container .d-day-info { min-width: 0; } .form-container .d-day-info + .select-box { width: 100%; } .form-container .form-group:has(textarea) label { width: 100%; } } .prev-prd-box { margin-top: 100px; } .prev-prd-box h2 { font-size: 18px; font-weight: 700; border-bottom: 2px solid #0e0e0e; padding-bottom: 5px; } .prev-prd-box .no-data { padding: 40px; text-align: center; } .prev-prd-box .year-group {border-bottom: 1px solid #d6d6d6; } .prev-prd-box .year-group.active .prd-list { display: flex; flex-direction: column; gap: 10px; } .prev-prd-box .year-group.active .toggle-icon { transform: rotate(180deg); } .prev-prd-box .year-toggle { display: flex; justify-content: space-between; align-items: center; padding: 35px 40px; cursor: pointer; transition: all 0.3s; position: relative; } .prev-prd-box .year-toggle h3 { margin: 0; font-size: 22px; font-weight: 700; } .prev-prd-box .toggle-icon { position: absolute; top: 50%; right: 40px; margin-top: -5px; width: 16px; height: 11px; border: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48px' height='30px'%3E%3Cpath fill-rule='evenodd' opacity='0.702' fill='rgb(14, 14, 14)' d='M45.796,9.877 L27.609,28.457 C25.600,30.510 22.343,30.510 20.335,28.457 L2.147,9.877 C0.138,7.825 0.138,4.497 2.147,2.445 C4.156,0.393 7.413,0.393 9.422,2.445 L23.972,17.310 L38.522,2.445 C40.529,0.393 43.787,0.393 45.796,2.445 C47.804,4.497 47.804,7.825 45.796,9.877 Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; transition: all 0.2s ease; } .prev-prd-box .prd-list { display: none; background: #f1f2f6; padding: 25px 30px; margin: -15px 40px 35px; } .prev-prd-box .prd-item { display: flex; align-items: center; font-size: 17px; } .prev-prd-box .prd-item > div:first-child { display: flex; align-items: center; } .prev-prd-box .prd-name { display: flex; align-items: center; gap: 10px; min-width: 190px; font-weight: 700; } .prev-prd-box .prd-name::before { content: ''; display: block; width: 5px; height: 5px; background: #0e0e0e; border-radius: 100%; } .prev-prd-box .prd-date { font-weight: 400; font-family: 'Roboto', sans-serif; } .prev-prd-box .prd-status { display: flex; align-items: center; justify-content: center; min-width: 95px; height: 30px; padding: 0 15px; color: #fff; border-radius: 15px; font-size: 16px; font-weight: 700; margin-left: auto; } .prev-prd-box .prd-status.active { background: #0082b3; } .prev-prd-box .prd-status.ended { background: #0e0e0e; } .prev-prd-box .prd-status.paused { background: #d6d9dc; color: #737379; } .prd-list .btn-delete { content: ''; display: inline-block; width: 20px; height: 22px; -webkit-mask: url(../images/ico_trash.png) no-repeat center; -webkit-mask-size: 20px 22px; mask: url(../images/ico_trash.png) no-repeat center; mask-size: 20px 22px; background-color: #babec0; margin-left:10px} .prd-list .btn-delete:hover { background-color: #0e0e0e; } .hidden-btn {visibility: hidden; pointer-events: none;} @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .prd-list .btn-delete {display: inline-block; width: 18px; height: 20px; -webkit-mask: url(../images/ico_trash.png) no-repeat center; -webkit-mask-size: 18px 20px; mask: url(../images/ico_trash.png) no-repeat center; mask-size: 18px 20px; background-color: #babec0; margin-left: 5px; margin-top: 13px;} .prd-list .btn-delete:hover {background-color: #0e0e0e;} .prev-prd-box h2 { font-size: 14px; } .prev-prd-box .year-toggle { padding: 24px 16px; } .prev-prd-box .year-toggle h3 { font-size: 18px; } .prev-prd-box .toggle-icon { right: 16px; width: 12px; height: 7px; } .prev-prd-box .prd-list { padding: 20px 15px; margin: -10px 0 24px; } .prev-prd-box .prd-item { font-size: 13px; } .prev-prd-box .prd-item > div:first-child { flex-direction: column; align-items: flex-start; } .prev-prd-box .prd-name { gap: 5px; min-width: 190px; } .prev-prd-box .prd-name::before { width: 3px; height: 3px; } .prev-prd-box .prd-date { margin-left: 8px; } .prev-prd-box .prd-status { min-width: 75px; height: 22px; font-size: 13px; margin-top: 15px; } } .analysis-cont { position: relative; overflow: hidden; } .analysis-cont::after { content: ''; display: block; width: 70px; height: 70px; background: #ecf1f6; border-radius: 100%; position: absolute; bottom: 70px; right: 0; } .analysis-cont::before { content: ''; display: block; width: 70px; height: 70px; background: #ecf1f6; border-radius: 100%; position: absolute; bottom: 0; right: 70px; } .analysis-cont .inner { background-color: #ecf1f6; border-radius: 30px 30px 0; padding: 60px 60px 60px 250px; clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 100px), calc(100% - 100px) 100%, 0 100% ); position: relative; z-index: 1; } .analysis-cont .inner::after { content: ''; display: block; width: 70px; height: 70px; border-radius: 100%; background: #fff; position: absolute; bottom: 0; right: 0; } .analysis-cont .inner { background-repeat: no-repeat; background-position: 70px 70px; background-size: 104px 104px; } .analysis-cont:nth-of-type(1) .inner { background-image: url(../images/anls_measure.png); } .analysis-cont:nth-of-type(2) .inner { background-image: url(../images/anls_growth.png); } .analysis-cont:nth-of-type(3) .inner { background-image: url(../images/anls_temp.png); } .analysis-cont:nth-of-type(4) .inner { background-image: url(../images/anls_water.png); } .analysis-cont:nth-of-type(5) .inner { background-image: url(../images/anls_night.png); } .analysis-cont:nth-of-type(6) .inner { background-image: url(../images/anls_sunset.png); } .analysis-cont .cont-title { font-size: 30px; font-weight: 700; margin-bottom: 10px; } .analysis-cont .cont-desc { font-size: 17px; } .analysis-cont .cont-box { margin: 4px 0 16px; } .analysis-cont .cont-box .box-row { display: flex; align-items: center; gap: 10px; color: #0082b3; font-weight: 600; margin: 8px 0; } .analysis-cont .cont-box p { width: fit-content; color: #0082b3; font-weight: 600; background: #fff; border: 1px solid #0082b3; border-radius: 10px; padding: 10px 20px; line-height: 1.5 } .analysis-cont .cont-box ul { margin: 10px 0; } .analysis-cont .cont-box li { margin: 5px 0; } .analysis-cont .cont-box span { color: #ff4c6d; } .analysis-cont .btn-detail { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 100%; background: #0082b3; position: absolute; bottom: 0; right: 0; z-index: 1; } .analysis-cont .btn-detail::before { content: ''; display: block; width: 19px; height: 11px; background: url(../images/ico_arrow.png) no-repeat 0 0; background-size: contain; transform: rotate(270deg); } .analysis-cont + .analysis-cont { margin-top: 30px; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .analysis-cont:first-child { margin-top: 50px; } .analysis-cont::after { width: 53px; height: 53px; bottom: 53px; } .analysis-cont::before { width: 53px; height: 53px; right: 53px; } .analysis-cont .inner { clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 80px), calc(100% - 80px) 100%, 0 100% ); } .analysis-cont .inner::after { width: 53px; height: 53px; } .analysis-cont .inner { font-size: 13px; border-radius: 22.5px 22.5px 0; padding: 80px 80px 25px 25px; line-height: 1.5; } .analysis-cont .inner { background-position: 25px 25px; background-size: 38.5px 38.5px; } .analysis-cont .cont-title { font-size: 17px; margin-bottom: 4px; } .analysis-cont .cont-desc { font-size: 13px; } .analysis-cont .cont-box p { padding: 10px 15px; } .analysis-cont .cont-box .box-row { flex-direction: column; align-items: flex-start; gap: 4px; padding-left: 15px; } .analysis-cont .cont-box .box-row p { padding: 7px 15px; margin-left: -15px; } .analysis-cont .btn-detail { width: 45px; height: 45px; } .analysis-cont .btn-detail::before { width: 14.25px; height: 8.25px; } } .analysis-title-bullet { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; margin-bottom: 10px; } .analysis-title-bullet::before { content: ''; display: block; width: 20px; height: 20px; border-radius: 100%; border: 4px solid #0082b3; } .analysis-title-bullet span { color: #0082b3; } .analysis-title { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; margin-bottom: 10px; } .analysis-title::before { content: ''; display: block; width: 20px; height: 20px; -webkit-mask: url(../images/ico_cal.png) no-repeat left center; -webkit-mask-size: 20px 20px; background-color: #0082b3; } .analysis-info { background: #ecf1f6; border-radius: 30px; padding: 30px 90px; margin-bottom: 80px; } .analysis-chart { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; aspect-ratio: 1400 / 600; background: #2b3032; border-radius: 30px; padding: 20px 45px; position: relative; } .analysis-chart p { color: #fff; } .analysis-chart + .analysis-chart { margin-top: 20px; } .analysis-chart .chart-main { width: 100%; } .analysis-chart .chart-brush { width: 100%; } .analysis-guide { position: relative; overflow: hidden; margin-top: 80px; } .analysis-guide .inner { background: #ecf1f6; border-radius: 30px; padding: 35px; position: relative; z-index: 1; } .analysis-guide .item-desc { font-size: 17px; } .analysis-guide .item-box { margin: 4px 0 16px; } .analysis-guide .item-box .box-row { display: flex; align-items: center; gap: 10px; color: #0082b3; font-weight: 600; margin: 8px 0; } .analysis-guide .item-box p { width: fit-content; color: #0082b3; font-weight: 600; background: #fff; border: 1px solid #0082b3; border-radius: 10px; padding: 10px 20px; line-height: 1.5 } .analysis-guide .item-box ul { margin: 10px 0 0; } .analysis-guide .item-box li { margin: 5px 0; } .analysis-guide .item-box span { color: #ff4c6d; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .analysis-title-bullet { gap: 5px; font-size: 17px; margin-bottom: 5px; } .analysis-title-bullet::before {width: 15px; height: 15px; } .analysis-title { gap: 5px; font-size: 17px; margin-top: 25px; } .analysis-title::before { width: 15px; height: 15px; -webkit-mask-size: 15px 15px; } .analysis-chart { aspect-ratio: 330 / 555; padding: 22.5px; border-radius: 22.5px; } .analysis-chart + .analysis-chart { margin-top: 5px; } .analysis-guide { margin-top: 30px; } .analysis-guide .inner { padding: 22.5px; border-radius: 22.5px; font-size: 13px; line-height: 1.5; } .analysis-guide .item-desc { font-size: 13px; } .analysis-guide .item-box p { padding: 10px 15px; } .analysis-guide .item-box .box-row { flex-direction: column; align-items: flex-start; gap: 4px; padding-left: 15px; } .analysis-guide .item-box .box-row p { padding: 7px 15px; margin-left: -15px; } } .cmpr-content { display: flex; flex-direction: column; } .cmpr-content > button { margin-left: auto; } .cmpr-content .farm-info-card { margin: 46px 0 20px; } .cmpr-content .farm-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px 15px; background: #ecf1f6; border-radius: 30px; padding: 35px 40px; } .cmpr-content .info-item { display: flex; align-items: center; gap: 10px; } .cmpr-content .info-label { min-width: 80px; font-weight: 400; color: #0082b3; font-size: 17px; } .cmpr-content .info-value { font-weight: 500; color: #0e0e0e; font-size: 17px; } .analysis-condition-form { margin-top: 20px; margin-bottom: 30px; } .analysis-condition-form .form-row.date { display: flex; flex-direction: column; gap: 10px; background: #ecf1f6; border-radius: 30px; padding: 30px 40px; margin-bottom: 46px; } .analysis-condition-form .form-row.date .period-input-tit { font-weight: 700; font-size: 18px; color: #0e0e0e; } .analysis-condition-form .form-row.date .period-input-tit span { font-weight: 400; color: #1f6894; } .analysis-condition-form .form-row > label { display: block; font-weight: 700; font-size: 18px; color: #0e0e0e; } .analysis-condition-form .form-row > label span { color: #ff4c6d; font-size: 17px; font-weight: 400; margin-left: 10px; } .analysis-condition-form .period-input-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; } .analysis-condition-form .period-input-group .select-box { min-width: 150px; } .analysis-condition-form .period-input-group input[type=number] { max-width: 80px; padding: 0 15px; border: 1px solid #aab4b8; border-radius: 24px; text-align: center; } .analysis-condition-form .period-input-group span { font-size: 17px; color: #0e0e0e; } .analysis-condition-form .analysis-items-container { border-top: 2px solid #0e0e0e; margin-top: 10px; } .analysis-condition-form .analysis-category-group { border-bottom: 1px solid #d6d6d6; } .analysis-condition-form .analysis-category { margin-bottom: 30px; } .analysis-condition-form .analysis-category:last-child { margin-bottom: 0; } .analysis-condition-form .category-toggle { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; cursor: pointer; transition: all 0.3s; background: #f4f4f5; } .analysis-condition-form .category-toggle:hover, .analysis-condition-form .analysis-category-group.active .category-toggle { background: #ecf1f6; } .analysis-condition-form .category-title { font-size: 17px; font-weight: 700; color: #0e0e0e; } .analysis-condition-form .toggle-icon { width: 16px; height: 11px; border: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48px' height='30px'%3E%3Cpath fill-rule='evenodd' opacity='0.702' fill='rgb(14, 14, 14)' d='M45.796,9.877 L27.609,28.457 C25.600,30.510 22.343,30.510 20.335,28.457 L2.147,9.877 C0.138,7.825 0.138,4.497 2.147,2.445 C4.156,0.393 7.413,0.393 9.422,2.445 L23.972,17.310 L38.522,2.445 C40.529,0.393 43.787,0.393 45.796,2.445 C47.804,4.497 47.804,7.825 45.796,9.877 Z'/%3E%3C/svg%3E") no-repeat center center; background-size: contain; transition: all 0.2s ease; cursor: pointer; padding: 0; flex-shrink: 0; } .analysis-condition-form .analysis-category-group.active .toggle-icon { transform: rotate(180deg); } .analysis-condition-form .analysis-items-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 15px; padding: 20px 25px; background: #fff; } .analysis-condition-form .analysis-category-group.active .analysis-items-grid { display: grid; } .analysis-condition-form .analysis-item input[type=checkbox] { display: none; } .analysis-condition-form .analysis-item label { display: flex; align-items: center; gap: 10px; cursor: pointer; height: auto; padding: 10px 15px; border-radius: 6px; transition: all 0.2s; font-size: 16px; width: 100%; } .analysis-condition-form .analysis-item label:hover { background: #e9ecef; } .analysis-result { margin-top: 30px; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .cmpr-content { margin-top: 30px; } .cmpr-content .farm-info-card { margin: 23px 0 10px; } .cmpr-content .farm-info-grid { gap: 5px 15px; border-radius: 22.5px; padding: 20px 25px; } .cmpr-content .info-item { gap: 10px; } .cmpr-content .info-label { font-size: 13px; } .cmpr-content .info-value { font-size: 13px; } .analysis-condition-form { margin-bottom: 15px; } .analysis-condition-form .form-row.date { flex-direction: column; align-items: flex-start; gap: 5px; border-radius: 22.5px; padding: 12px 12px 16px; margin-bottom: 20px; } .analysis-condition-form .form-row.date label { margin-left: 12px; margin-bottom: 4px; line-height: inherit; } .analysis-condition-form .form-row.date .period-input-tit { font-size: 13.5px; } .analysis-condition-form .form-row > label { font-size: 13.5px; } .analysis-condition-form .period-input-group { gap: 5px; } .analysis-condition-form .period-input-group .select-box { min-width: 100px; } .analysis-condition-form .period-input-group input[type=number] { max-width: 50px; padding: 0 5px; } .analysis-condition-form .period-input-group span { font-size: 13px; } .analysis-condition-form .date-range-display { font-size: 13px; } .analysis-condition-form .form-row > label span { font-size: 13px; } .analysis-condition-form .category-toggle { padding: 15px 15px; } .analysis-condition-form .category-title { font-size: 13px; } .analysis-condition-form .toggle-icon { width: 12px; height: 8px; } .analysis-condition-form .analysis-items-container { margin-top: 6px; } .analysis-condition-form .analysis-items-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0; padding: 12px 0; } .analysis-condition-form .analysis-item label { gap: 5px; font-size: 12px; letter-spacing: -0.06em; padding: 8px 13px; } .analysis-result { margin-top: 25px; } /*.analysis-chart { aspect-ratio: 132 / 170; }*/ } /*------------------------------------------------------------------- 실시간 최적 환경 -------------------------------------------------------------------*/ .optimal-env-section { display: none; } .optimal-env-section.active { display: block; } .optimal-env-section .env-status-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .optimal-env-section .env-item { position: relative; flex: 1 1 200px; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid #d9d9d9; border-radius: 30px; padding: 25px 30px; transition: all 0.3s ease; cursor: pointer; transition: all 0.3s ease; } .optimal-env-section .env-item:hover { transform: translateY(-2px); box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.11); } /* 좌측 컬러바 */ .optimal-env-section .env-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 60%; border-radius: 0 10px 10px 0; } .optimal-env-section .env-item.suitable::before { background: #0082b3; } .optimal-env-section .env-item.good::before { background: #05b479; } .optimal-env-section .env-item.lack::before { background: #ff4c6d; } .optimal-env-section .env-item dt { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 20px; font-weight: 600; color: #0e0e0e; white-space: nowrap; } .optimal-env-section .env-item dd { font-size: 18px; font-weight: 600; color: #737379; } .optimal-env-section .env-item.suitable dd span { color: #0082b3; } .optimal-env-section .env-item.good dd span { color: #05b479; } .optimal-env-section .env-item.lack dd span { color: #ff4c6d; } .optimal-env-section .env-item dd span { font-size: 24px; } /* 뱃지 */ .optimal-env-section .env-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; } .optimal-env-section .suitable .env-badge { color: #0082b3; background: #ebf4f8; border: 1px solid #b4dae9; } .optimal-env-section .good .env-badge { color: #05b479; background: #ecf5f1; border: 1px solid #9ce9cf; } .optimal-env-section .lack .env-badge { color: #ff4c6d; background: #fbf2f4; border: 1px solid #ffd1da; } .optimal-env-section .chart-title { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; margin-bottom: 20px; } .optimal-env-section .chart-title::before { content: ''; display: block; width: 20px; height: 20px; border-radius: 100%; border: 4px solid #0082b3; } /* Top 버튼 */ .optimal-env-section .chart-title button { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; height: 32px; padding: 0 16px; background: #0082b3; color: #fff; font-size: 14px; font-weight: 600; border: none; border-radius: 16px; cursor: pointer; transition: all 0.3s ease; margin-left: auto; } .optimal-env-section .chart-title button:hover { background: #006a94; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 130, 179, 0.3); } .optimal-env-section .chart-title button:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 130, 179, 0.2); } .optimal-env-section .chart-container { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1400 / 500; background: #2b3032; border-radius: 30px; padding: 20px 45px; margin-bottom: 40px; } .optimal-env-section .chart-container:last-child { margin-bottom: 0; } .optimal-env-section .chart-container .chart-main { width: 100%; } @media (max-width: 767.98px) { .optimal-env-section .env-status-grid { margin-bottom: 30px; } .optimal-env-section .env-item { flex: 1 1 160px; gap: 0; border-radius: 22.5px; padding: 18px; } .optimal-env-section .env-item dt { font-size: 12px; } .optimal-env-section .env-item dd { font-size: 14px; } .optimal-env-section .env-item dd span { font-size: 18px; } .optimal-env-section .env-badge { gap: 3px; padding: 4px 10px; font-size: 12px; } .optimal-env-section .env-badge::before { width: 5px; height: 5px; } .optimal-env-section .chart-title { gap: 5px; font-size: 17px; margin-bottom: 10px; } .optimal-env-section .chart-title::before { width: 15px; height: 15px; } .optimal-env-section .chart-title button { min-width: 50px; height: 28px; padding: 0 12px; font-size: 12px; border-radius: 14px; } .optimal-env-section .chart-container { aspect-ratio: 330 / 250; padding: 22.5px; border-radius: 22.5px; margin-bottom: 30px; } } .popup-wrapper .popup-container { width: 100%; max-width: 1400px; min-width: 300px; min-height: 180px; background: #fff; border: 2px solid #0082b3; padding: 30px; border-radius: 30px; box-shadow: 0px 0px 23.49px 3.51px rgba(10, 7, 17, 0.11); } .popup-wrapper .popup-container { position: absolute; z-index: 1; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 300ms ease-in-out, visibility 300ms, transform 300ms ease-out; } .popup-wrapper .popup-container h2 { display: flex; align-items: center; gap: 30px; font-weight: 700; font-size: 20px; line-height: 48px; } .popup-wrapper .popup-container select { font-size: 17px; font-weight: 400; } .popup-wrapper.active > .popup-container { opacity: 1; visibility: visible; transform: translateY(0); } .popup-wrapper.popup-local { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; z-index: 100; } .popup-wrapper .popup-close { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; border: none; border-radius: 50%; cursor: pointer; } .popup-wrapper .popup-close::before, .popup-wrapper .popup-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 2px; background: #222; transform: translate(-50%, -50%) rotate(45deg); } .popup-wrapper .popup-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .popup-wrapper .btn-wrapper { display: flex; gap: 10px; justify-content: flex-end; margin-top: 30px; } .popup-wrapper .btn-wrapper button { min-width: 100px; height: 48px; font-size: 17px; } .popup-wrapper .form-container { padding: 40px 0; } .popup-wrapper .form-container .form-group + .form-group { margin-top: 25px; } .popup-wrapper .form-container .work-detail { flex-direction: column; align-items: flex-start; gap: 0; } .image-viewer-local .popup-container { top: 0; left: 0; } .image-viewer-local .popup-container h2 { border-bottom: 2px solid #0e0e0e; margin-bottom: 20px; } .image-viewer-local .popup-container .diary-date-header { margin: 0; font-weight: 400; } .image-viewer-local .swiper-local { width: calc(100% - 170px); margin: 0 auto; padding-bottom: 50px; overflow: hidden; } .image-viewer-local .swiper-wrapper { position: relative; } .image-viewer-local .swiper-slide { height: 100%; max-height: 600px; aspect-ratio: 457 / 300; } .image-viewer-local .swiper-slide img { width: 100%; height: 100%; } .image-viewer-local .swiper-pagination-fraction { width: fit-content; bottom: 28px; background: #fff; padding: 10px; right: 115px; left: auto; } .image-viewer-local .swiper-button-next, .image-viewer-local .swiper-button-prev { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: #0082b3; border-radius: 100%; transition: all 0.3s ease;} .image-viewer-local .swiper-button-next::after, .image-viewer-local .swiper-button-prev::after { content: ''; width: 24px; height: 20px; background-image: url(../images/ico_control.png); background-repeat: no-repeat; background-position: center center; background-size: 24px 20px; filter: brightness(0) invert(1); } .image-viewer-local .swiper-button-next { right: 40px; } .image-viewer-local .swiper-button-next::after { transform: rotate(180deg); } .image-viewer-local .swiper-button-prev { left: 40px; } .image-viewer-local .swiper-button-next:hover, .image-viewer-local .swiper-button-prev:hover { background-color: #0e0e0e;} .image-viewer-local .image-filename { position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); padding: 8px 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; } .popup-mdl-srch { margin-top: 20px; } .popup-mdl-srch .srch-container { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; } .popup-mdl-srch .srch-container label { font-weight: 700; font-size: 20px; line-height: 48px; margin-right: 20px; } .popup-mdl-srch .srch-container input { height: 48px; padding: 0 20px; border: 1px solid #aab4b8; border-radius: 24px; font-size: 17px; } .popup-mdl-srch table.dataTable tbody tr { cursor: pointer; } .popup-mdl-srch .status-active { color: #0082b3; } .popup-mdl-srch .status-complete { color: #737379; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .popup-wrapper .popup-container { padding: 30px 10px 10px; border-radius: 22.5px; } .popup-wrapper .popup-container h2 { font-size: 13.5px; line-height: inherit; margin-bottom: 5px; } .popup-wrapper .btn-wrapper { justify-content: center; padding: 0 10px; } .popup-wrapper .btn-wrapper button { min-width: auto; width: auto; height: 45px; font-size: 15px; flex: 1; } .popup-wrapper .popup-close { top: 14px; right: 15px; width: 15px; height: 15px; } .popup-wrapper .popup-close::before, .popup-wrapper .popup-close::after { width: 20px; height: 1px; } .popup-wrapper .form-container { padding: 20px 10px; } .popup-wrapper .form-container .form-group + .form-group { margin-top: 15px; } .popup-mdl-srch .srch-container { flex-wrap: wrap; gap: 10px 5px; margin-bottom: 25px; } .popup-mdl-srch .srch-container label { width: 100%; font-size: 13.5px; line-height: 1; margin: 0 0 -2px 10px; } .popup-mdl-srch .srch-container input { height: 36px; font-size: 13px; padding: 0 10px; flex: 1; } .image-viewer-local .popup-container h2 { margin-bottom: 10px; padding-bottom: 10px; } .image-viewer-local .swiper-local { width: 100%; padding-bottom: 70px; } .image-viewer-local .image-filename { font-size: 12px; } .image-viewer-local .swiper-pagination-fraction { font-size: 12px; bottom: 10px; right: 50%; left: auto; padding: 0; transform: translateX(50%); } .image-viewer-local .swiper-button-next, .image-viewer-local .swiper-button-prev { top: auto; bottom: 20px; width: 45px; height: 45px; } .image-viewer-local .swiper-button-next { right: 10px; } .image-viewer-local .swiper-button-prev { left: 10px; } } .popup-diary-register { max-width: 1150px !important; margin-top: -10px; } .popup-mngm-register { max-width: 1150px !important; margin-top: -10px; } .popup-graph { max-width: 1150px !important; margin-top: -10px; } .popup-graph .chart-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-height: 400px; margin-top: 10px; } .popup-graph .select-box .select2-container { min-width: 150px; } #chart-container { width: 100%; height: 400px; min-height: 300px; } @media (max-width: 768px) { /* 모바일 대응 해상도 */ #chart-container { height: 300px; } } .empty-message { display: flex; align-items: center; justify-content: center; width: 100%; height: 20vh; } .diary-header-top { display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-bottom: 2px solid #0e0e0e; padding: 5px 0 10px; margin-bottom: 24px; } .btn-register::before { content: ''; display: block; width: 16px; height: 16px; background-image: linear-gradient(#0e0e0e, #0e0e0e), linear-gradient(#0e0e0e, #0e0e0e); background-size: 2px 16px, 16px 2px; background-position: center, center; background-repeat: no-repeat; } .btn-register.active::before { background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); } .btn-calendar-view { border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; margin-right: -11px; } .btn-calendar-view::before { content: ''; display: block; width: 20px; height: 20px; -webkit-mask: url(../images/ico_cal.png) no-repeat center; -webkit-mask-size: 20px 20px; mask: url(../images/ico_cal.png) no-repeat center; mask-size: 20px 20px; background-color: #0e0e0e; } .btn-calendar-view.active::before { background-color: #fff; } .btn-list-view { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; } .btn-list-view::before { content: ''; display: block; width: 16px; height: 16px; background-image: linear-gradient(#0e0e0e, #0e0e0e), linear-gradient(#0e0e0e, #0e0e0e), linear-gradient(#0e0e0e, #0e0e0e); background-size: 16px 2px; background-position: 0 0, 0 7px, 0 14px; background-repeat: no-repeat; } .btn-list-view.active::before { background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); } .btn-expand { background-image: url(../images/ico_list_expand.png); background-repeat: no-repeat; background-position: center center; background-size: 22px 19px; } .btn-collapse { background-image: url(../images/ico_list_collapse.png); background-repeat: no-repeat; background-position: center center; background-size: 22px 19px; } .btn-graph { background-image: url(../images/ico_graph.png); background-repeat: no-repeat; background-position: center center; background-size: 19px 20px; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .empty-message { font-size: 13px; } .btn-register::before { width: 12px; height: 12px; background-size: 1.5px 12px, 12px 1.5px; } .btn-calendar-view::before { width: 15px; height: 15px; -webkit-mask-size: 15px 15px; mask-size: 15px 15px; } .btn-list-view::before { content: ''; display: block; width: 12px; height: 13px; background-size: 12px 1.5px; background-position: 0 0, 0 5.25px, 0 10.5px; } .btn-expand { background-size: 16.5px 14.25px; } .btn-collapse { background-size: 16.5px 14.25px; } .btn-graph { background-size: 14.25px 15px; } } .diary-header-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .diary-header .crop-period { display: flex; align-items: center; gap: 15px; font-size: 17px; } .diary-header .crop-period span { font-family: 'Roboto', sans-serif; padding-left: 10px; } .diary-header .crop-period button { width: 24px; height: 24px; background: url(../images/ico_download.png) no-repeat left center; background-size: 100% 100%; } .diary-stats span { color: #0082b3; font-size: 22px; font-weight: 700; font-family: 'Roboto', sans-serif; } .diary-amount { font-weight: 700; font-family: 'Roboto', sans-serif; white-space: nowrap; } .calendar-container .calendar-controls { display: flex; justify-content: space-between; align-items: flex-end; height: 40px; margin-top: 25px; margin-bottom: 30px; line-height: 1; } .calendar-container .calendar-nav { display: flex; align-items: center; height: 40px; } .calendar-container .calendar-nav button { min-width: 40px; height: 100%; font-weight: 600; font-size: 17px; padding: 6px 12px; border: 1px solid #d9d9d9; background: #fff; cursor: pointer; } .calendar-container .calendar-nav button:first-child, .calendar-container .calendar-nav button:last-child { border-radius: 8px 0 0 8px; margin-right: -1px; background-image: url(../images/ico_control.png); background-repeat: no-repeat; background-position: center center; background-size: 18px 12px; } .calendar-container .calendar-nav button:last-child { margin-right: 0; margin-left: -1px; transform: rotate(180deg); } .calendar-container .calendar-nav button:disabled { opacity: 0.5; cursor: not-allowed; } .calendar-container .calendar-nav button:not(:disabled):hover { background-color: #f5f5f5; } .calendar-container .current-month { font-size: 40px; font-weight: 700; font-family: 'Roboto', sans-serif; } .calendar-container .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); /*gap: 1px; background: #d9d9d9;*/ border: 1px solid #d9d9d9; border-radius: 30px; overflow: hidden; } .calendar-container .calendar-grid > div:nth-child(7n) { margin-right: -1px; } .calendar-container .calendar-grid > div:nth-last-child(-n + 7) { margin-bottom: -1px; } .calendar-container .calendar-header-cell { background: #ecf1f6; padding: 15px; text-align: center; font-weight: 600; font-size: 17px; border: 1px solid #d9d9d9; margin: -1px 0 -1px -1px; } .calendar-container .calendar-header-cell.sunday { color: #ff4c6d; } .calendar-container .calendar-header-cell.saturday { color: #2196F3; } .calendar-container .calendar-cell { font-weight: 600; font-size: 17px; background: #fff; padding: 10px; min-height: 150px; position: relative; border: 1px solid #d9d9d9; margin: 0 0 -1px -1px; } .calendar-container .calendar-cell.has-diary { cursor: pointer; } .calendar-container .calendar-cell.has-diary:hover { background: #f0f7ff; } .calendar-container .calendar-cell.other-month { background: #fafafa; color: #ccc; } .calendar-container .calendar-cell.disabled { background: #f9f9f9; color: #9d9ca2; cursor: not-allowed; } .calendar-container .calendar-date { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 100%; margin: -5px 0 5px -5px; } .calendar-container .calendar-cell.sunday .calendar-date { color: #ff4c6d; } .calendar-container .calendar-cell.saturday .calendar-date { color: #2196F3; } .calendar-container .calendar-cell.today .calendar-date { background: linear-gradient(90deg, #129caf, #0385b0); color: #fff; } .calendar-container .calendar-header-cell .short { display: none; } .calendar-container .diary-badges { display: flex; flex-wrap: wrap; gap: 5px; } .calendar-container .diary-badges .diary-badge { display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; } .diary-badge { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 8px; font-size: 17px; font-weight: 500; } .diary-badge.income, .diary-badge.pest { color: #0082b3; background: #ebf4f8; border: 1px solid #b4dae9; } .diary-badge.fert { color: #05b479; background: #ecf5f1; border: 1px solid #9ce9cf; } .diary-badge.expense, .diary-badge.harv { color: #ff4c6d; background: #fbf2f4; border: 1px solid #ffd1da; } .diary-badge.etc { color: #ca5fe9; background: #f6eef8; border: 1px solid #e6caed; } .diary-badge.cult { color: #a4bf24; background: #f8fde1; border: 1px solid rgba(218, 244, 126, 0.73); } .diary-badge.prdctn { color: #05b479; background: #ecf5f1; border: 1px solid #9ce9cf; } .diary-badge.total { color: #0082b3; background: #ebf4f8; border: 1px solid #b4dae9; } .diary-badge span { color: #0e0e0e; } .diary-category { display: inline-block; font-weight: 500; color: #737379; margin-right: 5px; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .diary-header-bottom { flex-direction: column; align-items: flex-start; gap: 20px; padding: 5px 10px; } .diary-header-bottom .select-box, .diary-header-bottom .select-box .select2-container { width: 100% !important; } .diary-header .crop-period { justify-content: center; gap: 10px; width: 100%; font-size: 13px; } .diary-header .crop-period button { width: 22px; height: 22px; } .diary-stats { font-size: 12px; } .diary-stats span { font-size: 16.5px; } .calendar-container .calendar-controls { flex-direction: column; align-items: flex-start; gap: 10px; height: auto; margin-top: 15px; margin-bottom: 10px; position: relative; padding: 0 10px; } .calendar-container .calendar-nav { height: 30px; position: absolute; bottom: 5px; right: 10px; } .calendar-container .calendar-nav button { min-width: 25px; font-size: 13px; } .calendar-container .calendar-nav button:first-child, .calendar-container .calendar-nav button:last-child { border-radius: 6px 0 0 6px; background-size: 12px 8px; } .calendar-container .current-month { font-size: 27.5px; } .calendar-container .calendar-grid { border-radius: 22.5px; } .calendar-container .calendar-header-cell { font-size: 13px; padding: 10px 5px; } .calendar-container .calendar-cell { min-height: 50px; font-size: 13px; padding: 2px; } .calendar-container .calendar-header-cell .full { display: none; } .calendar-container .calendar-header-cell .short { display: inline; } .calendar-container .calendar-date { width: 22px; height: 22px; margin: -2px 0 2px -2px; } .calendar-container .diary-badges { gap: 2px; } .calendar-container .diary-badges .diary-badge { height: 18px; } .diary-badge { padding: 2px 8px; font-size: 13px; border-radius: 6px; } } .list-container { display: none; } .list-container.active { display: block; } .list-container .list-summary-header { display: flex; align-items: flex-end; justify-content: space-between; height: 40px; margin-top: 25px; margin-bottom: 30px; line-height: 1; } .list-container .list-summary-right { display: flex; align-items: center; gap: 10px; } .list-container .list-summary-right .diary-badge { justify-content: space-between; min-width: 120px; height: 34px; } .list-container .diary-date-group { border: 1px solid #d6d6d6; border-radius: 30px; padding: 40px 40px 15px; margin-bottom: 30px; position: relative; } .list-container .diary-date-header { font-size: 15px; font-family: 'Roboto', sans-serif; color: #7b7b7b; background: url(../images/ico_time.png) no-repeat left center; background-size: 16px 16px; padding-left: 25px; position: relative; cursor: pointer; margin-bottom: 25px; } .list-container .diary-date-header .week-cycl { color: #0082b3; margin-left: 10px; } .list-container .toggle-icon { position: absolute; top: 50%; right: 0; margin-top: -5px; width: 16px; height: 11px; border: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48px' height='30px'%3E%3Cpath fill-rule='evenodd' opacity='0.702' fill='rgb(14, 14, 14)' d='M45.796,9.877 L27.609,28.457 C25.600,30.510 22.343,30.510 20.335,28.457 L2.147,9.877 C0.138,7.825 0.138,4.497 2.147,2.445 C4.156,0.393 7.413,0.393 9.422,2.445 L23.972,17.310 L38.522,2.445 C40.529,0.393 43.787,0.393 45.796,2.445 C47.804,4.497 47.804,7.825 45.796,9.877 Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform 0.3s ease; } .list-container .diary-date-group.active .toggle-icon { transform: rotate(180deg); } /*.list-container .diary-date-content { padding: 0 15px; border-top: 1px solid #e0e0e0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease; } .list-container .diary-date-group.active .diary-date-content { max-height: 500px; padding: 15px; opacity: 1; margin-top: 15px; }*/ .list-container .diary-date-content { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 0.4s ease, opacity 0.3s ease, visibility 0s 0.4s; } .list-container .diary-date-content > * { overflow: hidden; min-height: 0; } .list-container .diary-date-content .diary-items-wrapper { display: flex; flex-direction: column; gap: 15px; } .list-container .diary-date-content table { display: none; } .list-container .diary-date-group.active .diary-date-content { grid-template-rows: 1fr; opacity: 1; visibility: visible; gap: 15px; padding-bottom: 25px; transition: grid-template-rows 0.4s ease, opacity 0.3s ease, visibility 0s 0s; } .list-container .diary-date-group.active .diary-date-content table { display: table; } .list-container .diary-item { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 17px; } .list-container .diary-item .diary-badge { min-width: 100px; height: 34px; } .list-container .diary-item-col { display: flex; align-items: center; gap: 20px; min-width: 0; } .list-container .diary-item-col:first-child { flex: 1; } .list-container .diary-item-col:last-child { margin-left: auto; flex: 0 0 auto; } .list-container .diary-memo { flex: 1; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-container .diary-info-label { font-weight: bold; color: #666; display: inline-block; min-width: 80px; } .list-container .btn-delete { content: ''; display: ilnine-block; width: 20px; height: 22px; -webkit-mask: url(../images/ico_trash.png) no-repeat center; -webkit-mask-size: 20px 22px; mask: url(../images/ico_trash.png) no-repeat center; mask-size: 20px 22px; background-color: #babec0; } .list-container .btn-delete:hover { background-color: #0e0e0e; } .list-container .weather-icon { display: flex; align-items: center; gap: 10px; font-size: 15px; } .list-container .weather-icon img { height: 20px; } .list-container .btn-image-view { content: ''; display: block; width: 20px; height: 22px; -webkit-mask: url(../images/ico_photo.png) no-repeat center; -webkit-mask-size: 21px 20px; mask: url(../images/ico_photo.png) no-repeat center; mask-size: 21px 20px; background-color: #0e0e0e; float: right; margin-right: 30px; } .list-container .btn-image-view:hover { background-color: #0082b3; } .list-container .diary-date-group.active .diary-date-content .diary-items-wrapper .diary-item .diary-item-col .btn-outline {min-height: 36px; font-size: 15px; border-radius: 18px; padding: 0 15px;} @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .list-container .list-summary-header { flex-direction: column; align-items: flex-start; gap: 10px; height: auto; margin-top: 15px; margin-bottom: 15px; padding: 0 10px; } .list-container .list-summary-right { display: grid; grid-template-columns: repeat(4 ,1fr); gap: 5px; width: 100%; } .list-container .list-summary-right .diary-badge { min-width: auto; height: 30px; } .list-container .diary-date-group { border-radius: 22.5px; padding: 20px 15px 0; margin-bottom: 15px; } .list-container .diary-date-header { font-size: 13px; margin-bottom: 20px; } .list-container .diary-item { gap: 6px; font-size: 13px; flex-direction: column; } .list-container .diary-item .diary-badge { min-width: 40px; height: 25px; } .list-container .diary-item-col { gap: 6px; } .list-container .diary-item-col:first-child { width: 100%; flex: 1 1 100%; } .list-container .diary-item-col:last-child { flex: 1 1 auto; width: 100%; justify-content: flex-end; } .list-container .diary-amount.prdctn { margin-right: auto; } .list-container .weather-icon { gap: 5px; font-size: 11px; } .list-container .btn-delete { width: 14px; height: 15px; -webkit-mask-size: 14px 15px; mask-size: 14px 15px; } .list-container .toggle-icon { width: 12px; height: 7px; } .list-container .diary-date-group.active .diary-date-content { padding-bottom: 20px; } .list-container .diary-date-content .diary-items-wrapper { gap: 10px; } .list-container .btn-image-view { width: 18px; height: 17px; -webkit-mask-size: 18px 17px; mask-size: 18px 17px; } .list-container .diary-date-group.active .diary-date-content .diary-items-wrapper .diary-item .diary-item-col .btn-outline {min-height: 27px; font-size: 11px;} } .summary-container { display: flex; align-items: flex-end; justify-content: space-between; height: 40px; margin-top: 25px; margin-bottom: 30px; line-height: 1; } .summary-container .summary-item { display: inline-flex; align-items: center; justify-content: space-between; } .summary-container .summary-item.income { color: #0082b3; background: #ebf4f8; border: 1px solid #b4dae9; } .summary-container .summary-item.expense { color: #ff4c6d; background: #fbf2f4; border: 1px solid #ffd1da; } .summary-container .summary-value { font-weight: 700; font-family: 'Roboto', sans-serif; } .summary-container .summary-details .summary-item { margin-left: 5px; min-width: 120px; height: 34px; padding: 5px 10px; border-radius: 8px; font-size: 17px; font-weight: 500; } .summary-container .summary-details .summary-label { margin-right: 30px; } .summary-container .summary-item.profit .summary-label { margin-right: 20px; } .summary-container .summary-item.profit .summary-value { font-size: 22px; color: #0082b3; } .summary-container .summary-item.profit .summary-value.income { color: #0082b3; } .summary-container .summary-item.profit .summary-value.expense { color: #ff4c6d; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .summary-container { flex-direction: column; align-items: flex-start; gap: 5px; height: auto; margin-top: 15px; margin-bottom: 20px; padding: 0 10px; } .summary-container .summary-details { display: flex; gap: 5px; width: 100%; } .summary-container .summary-details .summary-label { margin-right: 0; } .summary-container .summary-item { font-size: 12px; margin-left: 0 !important; } .summary-container .summary-item.profit .summary-value { font-size: 16.5px; } .summary-container .summary-item.income, .summary-container .summary-item.expense { width: auto; padding: 2px 8px; font-size: 13px; border-radius: 6px; margin-top: 5px; flex: 1; } } .toggle-buttons { display: inline-flex; background: #f4f4f5; border-radius: 24px; padding: 4px; position: relative; } .toggle-buttons .toggle-btn { display: flex; align-items: center; justify-content: center; min-width: 100px; height: 40px; padding: 0 20px; background: transparent; color: #737379; font-size: 17px; font-weight: 600; border: none; border-radius: 20px; cursor: pointer; transition: color 0.3s ease; position: relative; z-index: 1; } .toggle-buttons .toggle-btn.active { color: #fff; } .toggle-buttons::before { content: ''; position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: linear-gradient(90deg, #129caf, #0385b0); border-radius: 20px; transition: transform 0.3s ease; z-index: 0; } .toggle-buttons:has(.toggle-btn:last-child.active)::before { transform: translateX(100%); } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .toggle-buttons { border-radius: 18px; padding: 3px; } .toggle-buttons .toggle-btn { min-width: 75px; height: 30px; padding: 0 15px; font-size: 13px; border-radius: 15px; } .toggle-buttons::before { top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 15px; } } .average-section { display: flex; align-items: center; justify-content: space-between; gap: 70px; } .average-section .average-content { display: flex; align-items: center; justify-content: space-between; flex: 1; } .average-section .average-content dt { font-size: 15px; } .average-section .average-content dd { font-size: 20px; font-weight: 600; } .average-section .action-buttons { display: flex; align-items: center; gap: 10px; } .average-section .action-buttons .btn-outline { min-height: 36px; font-size: 15px; border-radius: 18px; padding: 0 15px; } .average-section .action-buttons .btn-outline:hover { border-color: #0e0e0e; } .samples-table { margin-top: 20px; } .samples-table thead th { font-size: 15px; color: #737379; background: #f4f4f5; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; padding: 10px; } .samples-table tbody td { text-align: center; border-bottom: 1px solid #d6d6d6; padding: 10px; } .grwh-register h2 { gap: 10px !important; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .average-section { flex-direction: column; align-items: flex-end; gap: 0; } .average-section .average-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 5px 0; width: 100%; line-height: 1.5; } .average-section .average-content dt { font-size: 11px; } .average-section .average-content dd { font-size: 15px; } .average-section .action-buttons .btn-outline { min-height: 27px; font-size: 11px; } .samples-table thead { position: absolute; left: -9999px; top: -9999px; } .samples-table tbody tr:not(.child) { background: #f4f4f5; } .samples-table tbody tr.dt-hasChild { background: #ecf1f6 !important; } .samples-table tbody tr:not(.child) td { text-align: left; padding: 10px 15px; } .samples-table tbody td:has(.btn-delete) { padding: 5px !important; } .samples-table tr.child ul.dtr-details { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; margin: 0; list-style: none; } .samples-table tr.child ul.dtr-details .dtr-title { width: 77px; } .grwh-register .form-container .form-item input[type=text], .grwh-register .form-container .form-item input[type=number] { flex: auto; } } .sample-container { border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; padding: 30px 0; margin: 50px 0 30px; } .sample-container .btn-add-sample-tab { width: 52px; height: 52px; } .sample-container .btn-add-sample-tab::before { content: ''; display: block; width: 16px; height: 16px; background-image: linear-gradient(#b1b5b7, #b1b5b7), linear-gradient(#b1b5b7, #b1b5b7); background-size: 2px 16px, 16px 2px; background-position: center, center; background-repeat: no-repeat; } .sample-inputs-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 30px; margin-top: 30px; } .sample-inputs-container .form-group { margin: 0 !important; } .sample-tabs { display: flex; gap: 10px; flex-wrap: wrap; } .sample-tabs .sample-tab { display: flex; align-items: center; justify-content: space-between; min-width: 172.6px; min-height: 52px; background: #f4f4f5; border-radius: 10px; padding: 0 20px; } .sample-tabs .sample-tab.active { background: #0e0e0e; color: #fff; } .btn-remove-sample { width: 24px; height: 24px; background: url(../images/ico_circle_x.png) no-repeat 0 0; background-size: 100%; } .btn-calculate { margin-left: auto; margin-bottom: 30px !important; } .btn-help { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #aab4b8; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; vertical-align: middle; } .btn-help::before { content: '?'; font-size: 20px; } .btn-help:hover { background-color: #0e0e0e; } .popup-help { top: -2px; left: -2px; width: calc(100% + 4px) !important; } .popup-help .help-content { display: flex; flex-direction: column; gap: 14px; margin-top: 25px; } .popup-help .help-section { display: flex; gap: 18px; } .popup-help .help-section h3 { display: inline-flex; align-items: center; justify-content: center; min-width: 115px; width: fit-content; height: 36px; font-weight: 600; background: #0082b3; color: #fff; border-radius: 18px; } .popup-help .help-section p { flex: 1; padding: 4px 0; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .sample-container { padding: 15px 0; margin: 20px 0 15px; } .sample-tabs .sample-tab { min-width: 115px; min-height: 36px; border-radius: 7.5px; padding: 0 10px; font-size: 13px; } .sample-inputs-container { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 20px; } .sample-container .btn-add-sample-tab { width: 36px; height: 36px; } .sample-container .btn-add-sample-tab::before { width: 13px; height: 13px; background-size: 2px 13px, 13px 2px; } .btn-remove-sample { width: 18px; height: 18px; } .btn-help { width: 18px; height: 18px; font-size: 12px; } .popup-help .help-content { gap: 4px; font-size: 13px; } .popup-help .help-section { flex-direction: column; gap: 0; } .popup-help .help-section h3 { min-width: 86px; height: 27px; border-radius: 13.5px; } } .image-container { display: flex; flex-wrap: wrap; gap: 10px; flex-basis: 100%; } .image-container .btn-add-image { width: 100px; height: 100px; border-radius: 15px; } .image-container .btn-add-image::before { content: ''; display: block; width: 16px; height: 16px; background-image: linear-gradient(#b1b5b7, #b1b5b7), linear-gradient(#b1b5b7, #b1b5b7); background-size: 2px 16px, 16px 2px; background-position: center, center; background-repeat: no-repeat; } .image-list { display: flex; align-items: center; flex-wrap: wrap; gap: 8.3px; width: 100%; } .image-list .image-item { width: 100px; height: 100px; border-radius: 15px; border: 1px solid #d9d9d9; overflow: hidden; position: relative; } .image-list .image-item img { width: 100%; height: 100%; } .image-list .btn-remove-image { width: 24px; height: 24px; background: url(../images/ico_circle_x.png) no-repeat 0 0; background-size: 100%; position: absolute; top: 5px; right: 5px; } .result-container { margin: 40px 0; } .result-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #2b3032; border-radius: 30px; padding: 25px 50px 20px; } .result-box .result-item { display: flex; align-items: center; flex-direction: column; } .result-box .result-item .label { font-size: 15px; color: #9dd4e8; line-height: 1.2; } .result-box .result-item .value { font-size: 20px; font-weight: 600; color: #fff; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .image-container .btn-add-image { width: 75px; height: 75px; border-radius: 11px; } .image-list .image-item { width: 75px; height: 75px; border-radius: 11px; } .result-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); gap: 10px 0; border-radius: 22.5px; padding: 27.5px 22.5px 22.5px; } .result-box .result-item { align-items: flex-start; } .result-box .result-item .label { font-size: 11px; } .result-box .result-item .value { font-size: 15px; } } .chart-data-list { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: #ecf1f6; border-radius: 15px; padding: 25px 50px 20px; margin-top: 20px; } .chart-data-list .chart-data-item { display: flex; align-items: center; flex-direction: column; flex: 1; } .chart-data-list .chart-data-item .label { color: #0082b3; line-height: 1.2; } .chart-data-list .chart-data-item .value { font-weight: 600; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .chart-data-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)); gap: 10px 0; border-radius: 10px; padding: 27.5px 22.5px 22.5px; margin-top: 10px; } .chart-data-list .chart-data-item { align-items: flex-start; } .chart-data-list .chart-data-item .label { font-size: 11px; } .chart-data-list .chart-data-item .value { font-size: 13px; } .chart-data-list .chart-data-item.header { display: none; } } /*------------------------------------------------------------------- form -------------------------------------------------------------------*/ .select-box { position: relative; } .select-box.disabled { opacity: 0.4; } .select-box::after { content: ''; display: block; width: 8px; height: 8px; border-bottom: 2px solid #565656; border-right: 2px solid #565656; position: absolute; right: 20px; top: 50%; margin-top: -5px; transform: rotate(45deg); cursor: pointer; } .select-box.disabled::after { cursor: default; } select { width: 100%; min-width: 66px; height: 52px; line-height: 1; background: #fff; border: 1px solid #aab4b8; border-radius: 26px; padding: 0 40px 0 20px; appearance: none; cursor: pointer; } select:focus { border: 2px solid #0082b3; } select:disabled { cursor: default; } .select-box.warning select { color: #ff4c6d; border: 2px solid #ff4c6d; } .select-box.warning::after { border-color: #ca3232 !important; } input[type=text], input[type=password], input[type=number], input[type=search] { transition: border-color 0.3s ease; width: 100%; height: 52px; font-weight: 300; line-height: 1; background: #fff; border: 1px solid #aab4b8; border-radius: 26px; padding: 0 20px; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=text]::placeholder, input[type=password]::placeholder, input[type=number]::placeholder, input[type=search]::placeholder { color: #bababa; } input[type=text]:disabled, input[type=password]:disabled, input[type=number]:disabled, input[type=search]:disabled { opacity: 0.4; } input[type=text].date-input { width: 195px; font-family: 'Pretendard', sans-serif; background-color: #fff; background-image: url(../images/ico_cal.png); background-repeat: no-repeat; background-size: 19px 21px; background-position: right 24px center; cursor: pointer; } input[type=text]:disabled.date-input { cursor: default; } input[type=text].date-input::after { content: ''; display: block; width: 50px; height: 50px; } input[type=text].range_date_input, input[type=text].range-date-input { width: 225px; } input[type=text].search-input { width: 100%; background: #fbfbfb url(../images/ico_search.png) no-repeat right 10px center; cursor: pointer; } input[type=text].warning, input[type=password].warning, input[type=number].warning, input[type=search].warning { color: #ff4c6d !important; border: 2px solid #ff4c6d !important; background-image: url(../images/ico_ellipse.png); background-size: 23px 23px; background-repeat: no-repeat; background-position: right 10px center; padding-right: 40px; cursor: default; } input[type=text].warning::placeholder, input[type=password].warning::placeholder, input[type=number].warning::placeholder, input[type=search].warning::placeholder { color: #ff4c6d; } /*input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #a0a0a0; -webkit-box-shadow: 0 0 0px 1000px #585858 inset; transition: background-color 5000s ease-in-out 0s; }*/ input.filled { border: 2px solid #0082b3; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ select { height: 36px; font-size: 13px !important; border-radius: 19px; padding: 0 30px 0 12px; } .select-box::after { width: 6px; height: 6px; right: 15px; margin-top: -5px; } input[type=text], input[type=password], input[type=number], input[type=search] { height: 36px; font-size: 13px; border-radius: 19px; padding: 0 15px; } input[type=text].date-input { width: 120px; background-size: 14px 15px; background-position: right 15px center; } input[type=text].warning, input[type=password].warning, input[type=number].warning, input[type=search].warning { background-size: 14px 14px; padding-right: 30px; } } input[type=radio] { display: none; } input[type=radio] + label i { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #aab4b8; } input[type=radio] + label i::after { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: #aab4b8; margin: 7px; } input[type=radio]:checked + label i::after { background: #0082b3; } .radio-wrapper { display: flex; align-items: center; gap: 15px; line-height: 1; } .radio-wrapper label { display: flex !important; align-items: center; cursor: pointer; gap: 5px; font-weight: 400 !important; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ input[type=radio] + label { gap: 7px; height: 22.5px; font-size: 12px !important; } input[type=radio] + label i { width: 22px; height: 22px; } input[type=radio] + label i:after { width: 10px; height: 10px; margin: 5px; } } input[type=checkbox] { display: none; } input[type=checkbox] + label { display: flex !important; align-items: center; gap: 10px; height: 30px; font-weight: 400 !important; font-size: 16px !important; cursor: pointer; } input[type=checkbox] + label i { width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid #aab4b8; position: relative; transition: all 0.3s ease; } input[type=checkbox] + label i:after { content: ''; display: block; width: 8px; height: 12px; border-bottom: 2px solid #aab4b8; border-right: 2px solid #aab4b8; position: absolute; top: 5px; left: 10px; transform: rotate(40deg); cursor: pointer; transition: all 0.3s ease; } input[type=checkbox]:checked + label i { border-color: #0082b3; background: #0082b3; } input[type=checkbox]:checked + label i:after { border-color: #fff; } input[type=checkbox]:disabled + label, input[type=checkbox].disabled + label { pointer-events: none; opacity: 0.2; } input[type=checkbox]:disabled + label i, input[type=checkbox].disabled + label i { background: #707070; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ input[type=checkbox] + label { gap: 7px; height: 22.5px; font-size: 12px !important; } input[type=checkbox] + label i { width: 22.5px; height: 22.5px; border-radius: 7px; } input[type=checkbox] + label i:after { width: 6px; height: 10px; top: 4px; left: 7px; } } .checkbox-wrapper { display: flex; align-items: center; gap: 15px; line-height: 1; } .checkbox-wrapper label { cursor: pointer; gap: 5px; } .checkbox-wrapper input[type=checkbox] { display: none; } .checkbox-wrapper input[type=checkbox] + label { display: flex; align-items: center; gap: 5px; height: 35px; padding: 0; cursor: pointer; } .checkbox-wrapper input[type=checkbox] + label i { width: 14px; height: 14px; border-radius: 2px; background: #fff; margin-top: -1px; border: none; position: relative; } .checkbox-wrapper input[type=checkbox]:checked + label i:after { content: ''; display: block; width: 6px; height: 10px; border-bottom: 2px solid #5bcfa8; border-right: 2px solid #5bcfa8; position: absolute; left: 4px; transform: rotate(55deg); cursor: pointer; } textarea { width: 100%; height: 135px; line-height: 1.5; background: transparent; border: none; resize: none; font-size: 16px; color: #0e0e0e; } textarea:focus { outline: none; } textarea::placeholder { color: #bababa; } textarea::-webkit-scrollbar { width: 10px; } textarea::-webkit-scrollbar-thumb { background: #3d3d3d; border-left: 1px solid rgba(255,255,255,0.3); border-top: 1px solid rgba(255,255,255,0.3); border-right: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1); } textarea::-webkit-scrollbar-track { background: transparent; } .textarea-wrapper { width: 100%; } .textarea-wrapper > div { font-size: 15px; color: #a0a0a0; background: #fff; border: 1px solid #aab4b8; border-radius: 26px; padding: 20px; transition: border 0.2s; } .textarea-wrapper > div:focus-within { border-color: #0082b3; box-shadow: 0 0 0 1px #0082b3; } .textarea-wrapper > div + p { font-size: 15px; font-weight: 300; text-align: right; margin-top: 5px; } .textarea-wrapper > div + p i { font-weight: 700; } .textarea-wrapper.warning > div { color: #ff4c6d; border: 2px solid #ff4c6d; } .textarea-wrapper.warning > div textarea::-webkit-scrollbar-thumb { background: #e4c7c7; } .textarea-wrapper.warning > div textarea::-webkit-scrollbar-track { background: #fff; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ textarea { height: 85px; font-size: 13px; } .textarea-wrapper > div { border-radius: 22.5px; padding: 15px; } } /*------------------------------------------------------------------- buttons -------------------------------------------------------------------*/ .btn-wrapper { display: flex; justify-content: center; gap: 25px; } .btn-wrapper button { display: flex; justify-content: center; align-items: center; gap: 10px; min-width: 170px; height: 64px; font-size: 20px; font-weight: 600; white-space: nowrap; border-radius: 32px; padding: 0 25px; } .btn-wrapper button.disabled { opacity: 0.4; cursor: default; } .btn-normal { color: #909090; border: 1px solid #c3c2c1; } .btn-submit { color: #fff; background: #098eb0; } .btn-cancel { color: #fff; background: #c3c2c0; } .btn-primary { position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 64px; font-size: 20px; font-weight: 700; border-radius: 32px; border: none; background: linear-gradient(90deg, #129caf, #0385b0); color: #fff; overflow: hidden; z-index: 0; } .btn-primary::after { content: ""; position: absolute; inset: 0; background: #0e0e0e; opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .btn-primary:hover::after { opacity: 1; } .btn-primary:disabled { color: #9c9ca2; background: none; cursor: default; } .btn-primary:disabled::after { background: #f4f4f5; opacity: 1; } .btn-secondary { position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 64px; font-size: 20px; font-weight: 700; border-radius: 32px; border: none; background: #0e0e0e; color: white; } .ctvt-btn-secondary { position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 64px; font-size: 20px; font-weight: 700; border-radius: 32px; border: none; background: #0e0e0e; color: white; margin-left: auto;} .btn-default { min-width: 48px; height: 48px; padding: 0 30px; background: #0082b3; color: white; border: none; border-radius: 24px; cursor: pointer; font-size: 17px; font-weight: 500; transition: background 0.3s ease; } .btn-default:hover { background-color: #2b3032; } .btn-default:disabled { color: #9c9ca2; background-color: #f4f4f5; cursor: default; } .btn-search { min-width: 48px; height: 48px; padding: 0 60px 0 30px; background: #0082b3 url(../images/ico_search.png) no-repeat right 24px center; background-size: 21px 20px; color: white; border: none; border-radius: 24px; cursor: pointer; font-size: 17px; font-weight: 500; transition: background 0.3s ease; } .btn-search:hover { background-color: #2b3032; } .btn-icon { padding: 0 !important; background-position: center center !important; } .btn-modify { position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 64px; font-size: 20px; font-weight: 700; border-radius: 32px; border: none; background: linear-gradient(90deg, #129caf, #0385b0); color: #fff; margin-left: auto; overflow: hidden; z-index: 0; } .btn-modify::after { content: ""; position: absolute; inset: 0; background: #0e0e0e; opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .btn-modify:hover::after { opacity: 1; } .ctvt-btn-modify { position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 64px; font-size: 20px; font-weight: 700; border-radius: 32px; border: none; background: linear-gradient(90deg, #129caf, #0385b0); color: #fff; overflow: hidden; z-index: 0; } .ctvt-btn-modify::after { content: ""; position: absolute; inset: 0; background: #0e0e0e; opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .ctvt-btn-modify:hover::after { opacity: 1; } .btn-outline { display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; font-weight: 600; border-radius: 8px; border: 1px solid #d9d9d9; background-color: #fff; } .btn-outline.active { background-color: #0e0e0e; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .btn-search { min-width: 36px; height: 36px; font-size: 13px; padding: 0 40px 0 15px; background-size: 15px 15px; background-position: right 14px center } .btn-primary, .btn-secondary, .ctvt-btn-secondary, .btn-modify { width: 140px; height: 45px; font-size: 16px; border-radius: 22.5px; margin: 0 auto; } .ctvt-btn-modify { width: 140px; height: 45px; font-size: 16px; border-radius: 22.5px; margin: 0 auto; } .btn-outline { min-width: 30px; min-height: 30px; border-radius: 6px; } } /*------------------------------------------------------------------- 내 정보 -------------------------------------------------------------------*/ .mypage-container { display: none; flex-direction: column; align-items: center; } .mypage-container.active { display: flex; } .mypage-container input[type=text], .mypage-container input[type=password] { max-width: 400px; height: 52px; border-radius: 26px; padding: 0 20px; } .mypage-container .myinfo-box { width: 100%; background: #fff; border-top: 2px solid #0e0e0e; border-bottom: 1px solid #d6d6d6; padding: 80px 40px; margin-bottom: 40px; } .mypage-container .myinfo-box dl { display: flex; align-items: center; letter-spacing: 0; } .mypage-container .myinfo-box dl + dl { margin-top: 50px; } .mypage-container .myinfo-box dt { min-width: 170px; font-size: 17px; font-weight: 700; text-align: left; } .mypage-container .myinfo-box dd { display: flex; align-items: center; gap: 30px; flex: 1; font-size: 17px; font-weight: 400; } .mypage-container .myinfo-box dd button:not(.eye-btn) { display: flex; align-items: center; height: 44px; background: #fff; border: 1px solid #0e0e0e; border-radius: 22px; padding: 0 20px; transition: all 0.3s ease; } .mypage-container .myinfo-box dd button:not(.eye-btn):hover { background: #111; color: #f5f5f5; } .mypage-container .myinfo-box .input-wrapper { position: relative; width: fit-content; } .mypage-container .myinfo-box .input-wrapper .eye-btn { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 22px; height: 15px; background: url(../images/ico_eye.png) no-repeat 0 0; background-size: contain; cursor: pointer; } .mypage-container .myinfo-box .input-wrapper .eye-btn.off { width: 22px; height: 21px; background: url(../images/ico_eye_off.png) no-repeat 0 0; background-size: contain; } .mypage-container .pwd-status { display: block; width: 20px; height: 20px; border-radius: 50%; background: #098eb0; } .mypage-container .pwd-status.expr { background: #f64949; font-size: 14px; color: #fff; text-align: center; } .mypage-container .pwd-status.expr::after { content: '!'; } .mypage-form { display: none; flex-direction: column; align-items: center; width: 100%; max-width: 580px; margin: 50px auto; } .mypage-form.active { display: flex; } .mypage-form h2 { font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 30px; } .mypage-form h2 + p { font-size: 20px; font-weight: 600; text-align: center; margin: 0 auto 60px; letter-spacing: 0; } .mypage-form h2 + p span { color: #098eb0; } .mypage-form input[type=text], .mypage-form input[type=password] { height: 60px; } .mypage-form input[type=text]:read-only { background: #eaeaea; } .mypage-form form { display: flex; flex-direction: column; gap: 10px; width: 100%; } .mypage-form .btn-wrapper { margin-top: 40px; } .mypage-form .btn-wrapper button { font-size: 24px; } .mypage-form .myinfo-box { width: 100%; background: #fff; padding: 20px 40px 30px 30px; margin-bottom: 0; } .mypage-form .myinfo-box dl { display: flex; align-items: center; letter-spacing: 0; min-height: 60px; } .mypage-form .myinfo-box dl + dl { margin-top: 10px; } .mypage-form .myinfo-box dt { min-width: 140px; font-size: 20px; font-weight: 700; text-align: left; } .mypage-form .myinfo-box dd { display: flex; align-items: center; flex: 1; font-size: 20px; font-weight: 400; } .mypage-form .myinfo-box input[type=text], .mypage-form .myinfo-box input[type=password] { width: calc(100% + 30px); margin: 0 -15px; } .notice-container { width: 100%; height: 54px; } .notice { display: flex; align-items: center; height: 100%; font-size: 17px; font-weight: 500; color: #ff4c6d; letter-spacing: 0; background: url(../images/ico_ellipse.png) no-repeat left center; background-size: 23px 23px; padding-left: 30px; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .mypage-container input[type=text], .mypage-container input[type=password] { max-width: 180px; height: 36px; font-size: 13px; border-radius: 19px; padding: 0 15px; } .mypage-container .myinfo-box { padding: 45px 10px; border-bottom-width: 1px; margin-bottom: 20px; } .mypage-container .myinfo-box dt { min-width: 100px; font-size: 13px; } .mypage-container .myinfo-box dd { gap: 10px; font-size: 13px; } .mypage-container .myinfo-box dl + dl { margin-top: 37px; } .mypage-container .myinfo-box dd button:not(.eye-btn) { height: 30px; padding: 0 10px; } .mypage-container .myinfo-box .input-wrapper .eye-btn { right: 10px; width: 16px; height: 11px; } .mypage-container .myinfo-box .input-wrapper .eye-btn.off { width: 16px; height: 15px; } .mypage-form h2 { font-size: 27px; margin-bottom: 20px; } .mypage-form h2 + p { font-size: 15px; margin: 0 auto 45px; } .mypage-form input[type=text], .mypage-form input[type=password] { height: 45px; font-size: 15px; } .mypage-form .btn-wrapper { width: 100%; gap: 18px; margin-top: 30px; } .mypage-form .btn-wrapper button { flex: auto; min-width: auto; height: 45px; font-size: 18px; } .mypage-form .myinfo-box { padding: 10px 20px 15px 15px; } .mypage-form .myinfo-box dl { min-height: 45px; } .mypage-form .myinfo-box dl + dl { margin-top: 7px; } .mypage-form .myinfo-box dt { min-width: 100px; font-size: 15px; } .mypage-form .myinfo-box dd { font-size: 15px; } .mypage-form .myinfo-box input[type=text], .mypage-form .myinfo-box input[type=password] { width: calc(100% + 10px); margin: 0 -5px; } .notice-container { height: auto; } .notice { line-height: 1.2; font-size: 13px; background-position: left top; background-size: 15px 15px; padding-left: 20px; margin-bottom: 10px; } } .service-agreement { width: 100%; margin-top: 100px; } .service-agreement .agreement-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .service-agreement .agreement-header h2 { font-weight: 700; font-size: 18px; } .service-agreement .agreement-container { display: flex; align-items: center; gap: 10px; font-size: 17px; background: #f1f2f6; padding: 50px; margin-bottom: 30px; } .service-agreement .agreement-container span { font-size: 15px; color: #737379; } .service-agreement .agreement-container a { font-size: 15px; color: #0082b3; text-decoration: underline; text-underline-offset: 4px; } .service-agreement .btn-withdraw { display: flex; align-items: center; height: 44px; border: 1px solid #0e0e0e; border-radius: 22px; padding: 0 20px; transition: all 0.3s ease; margin-left: auto; } .service-agreement .btn-withdraw:hover { background: #111; color: #f5f5f5; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .service-agreement { margin-top: 60px; } .service-agreement .agreement-header h2 { font-size: 14px; } .service-agreement .agreement-container { font-size: 13px; padding: 40px 10px; margin-bottom: 25px; } .service-agreement .agreement-container span { font-size: 11px; margin-left: auto; } .service-agreement .agreement-container a { font-size: 11px; } .service-agreement .btn-withdraw { font-size: 13px; height: 30px; padding: 0 10px; margin: 0 auto; } } /*------------------------------------------------------------------- 환경설정 -------------------------------------------------------------------*/ .section-title { display: flex; align-items: center; height: 54px; font-weight: 700; font-size: 18px; } .form-container + .section-title { margin-top: 100px; } .msg-stng-container .radio-wrapper label { min-width: 100px; } .grwth-stng-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px 15px; flex: 1; } .grwth-stng-container .form-group { margin: 0 !important; } .grwth-stng-container .unit::before { content: '('; } .grwth-stng-container .unit::after { content: ')'; } .abnrml-stng-container { display: flex; flex-direction: column; flex: 1; margin: -80px -40px; } .abnrml-stng-container .form-row { display: flex; flex-wrap: wrap; gap: 0 20px; border-bottom: 1px solid #d6d6d6; } .abnrml-stng-container .form-row:last-child { border: none; } .abnrml-stng-container .form-row h3 { flex: 0 0 100%; font-size: 17px; font-weight: 700; background: #ecf1f6; padding: 20px 40px; } .abnrml-stng-container .form-group { margin: 0 !important; flex: 1; padding: 20px 40px; } .abnrml-stng-container .form-group label { min-width: 50px; } .abnrml-stng-container .form-group input[type=text], .abnrml-stng-container .form-group input[type=number] { max-width: 180px; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .msg-stng-container { flex: 1; } .msg-stng-container .form-group { align-items: center; } .msg-stng-container .radio-wrapper { margin-left: auto; } .msg-stng-container .radio-wrapper label { min-width: 70px; } .grwth-stng-container { gap: 10px 5px; } .abnrml-stng-container { margin: -45px -10px; } .abnrml-stng-container .form-row { gap: 0 5px; } .abnrml-stng-container .form-row h3 { font-size: 14px; padding: 10px 20px; } .abnrml-stng-container .form-group { padding: 10px 20px; } .abnrml-stng-container .form-group label { min-width: 30px; } .abnrml-stng-container .form-group input[type=text], .abnrml-stng-container .form-group input[type=number] { max-width: 100px; } } /*------------------------------------------------------------------- 로그인 -------------------------------------------------------------------*/ .login-wrapper { display: flex; flex-direction: column; align-items: center; width: 580px; padding: 100px 0; margin: 0 auto; } .login-wrapper h2 { display: flex; flex-direction: column; align-items: center; gap: 20px; font-size: 60px; font-weight: 700; line-height: 1; margin-bottom: 80px; } .login-wrapper h2 .system-name { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 500; } .login-wrapper h2 .system-name img { width: 48px; } .login-wrapper h2 + p { width: calc(100% + 100px); font-size: 20px; font-weight: 600; text-align: center; margin: -60px -50px 30px; letter-spacing: 0; line-height: 1.5; } .login-wrapper h2 + p br:nth-of-type(1), .login-wrapper h2 + p br:nth-of-type(3) { display: none; } .login-wrapper input[type=text], .login-wrapper input[type=password] { width: 100%; height: 65px; margin: 7px 0; border-radius: 32px; padding: 0 30px; } .login-wrapper input[type=text] { margin-bottom: 20px; } .login-wrapper input[type=text]::placeholder, .login-wrapper input[type=password]::placeholder { color: #737379; } .login-wrapper .login-form { display: flex; flex-direction: column; align-items: center; justify-content: center; } .login-wrapper .login-form label { font-size: 17px; font-weight: 700; } .login-wrapper .login-form p { font-size: 17px; font-weight: 500; color: #ff4c6d; letter-spacing: 0; background: url(../images/ico_ellipse.png) no-repeat left center; background-size: 23px 23px; padding-left: 35px; } .login-wrapper .btn-login { transition: background 0.3s ease; width: 100%; height: 64px; font-size: 20px; font-weight: 700; color: #fff; background: #098eb0; border-radius: 32px; margin-top: 60px; } .login-wrapper .btn-login:disabled { background: #f4f4f5; color: #9c9ca2; cursor: default; } .login-wrapper .btn-login-kakao { width: 100%; height: 64px; font-size: 20px; font-weight: 700; color: #0e0e0e; background: #ffeb33 url(../images/ico_kakao.png) no-repeat left 50px center; background-size: 28px 26px; border-radius: 32px; margin-top: 20px; } .login-wrapper .btn-search-container { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 500; margin: 10px auto 0; } .login-wrapper .btn-search-container .bar { width: 1px; height: 16px; background: #0e0e0e; } .login-wrapper .find-pw { display: none; flex-direction: column; align-items: center; justify-content: center; } .login-wrapper .find-pw.active { display: flex; } .login-wrapper .find-pw .find-pw-form { width: 580px; } .login-wrapper .find-pw input[type=text], .login-wrapper .find-pw input[type=password] { border-radius: 32px; padding: 0 30px; } .login-wrapper .find-pw label { font-size: 17px; font-weight: 700; } .login-wrapper .find-pw .btn-wrapper { gap: 20px; margin-top: 30px; } .login-wrapper .find-pw .btn-sms-send { color: #fff; background: #098eb0; } .login-wrapper .find-pw .btn-sms-send:disabled { background: #f4f4f5; color: #9c9ca2; cursor: default; } .login-wrapper .find-pw .btn-close { color: #fff; background: #0e0e0e; } .system-inquiry { font-size: 16px; color: #616161; margin-top: 200px; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .login-wrapper { width: 100%; max-width: 285px; padding: 60px 0 5px; } .login-wrapper h2 { font-size: 25px; margin-bottom: 15px; gap: 10px; } .login-wrapper h2 .system-name { gap: 6px; font-size: 12px; } .login-wrapper h2 .system-name img { width: 21px; } .login-wrapper h2 + p { width: 100vw; font-size: 14px; margin: -10px -100px 15px; } .login-wrapper h2 + p br { display: block !important; } .login-wrapper input[type=text], .login-wrapper input[type=password] { height: 45px; font-size: 13px; margin: 0; padding: 0 13px; } .login-wrapper input[type=text] { margin-bottom: 13px; } .login-wrapper .login-form label { font-size: 13px; } .login-wrapper .btn-login { height: 45px; font-size: 16px; border-radius: 22.5px; margin-top: 47px; } .login-wrapper .btn-login-kakao { height: 45px; font-size: 16px; background-position: left 20px center; background-size: 20px 18px; border-radius: 22.5px; margin-top: 15px; } .login-wrapper .btn-search { font-size: 13px; margin-top: 43px; } .login-wrapper .login-form p { font-size: 13px; background-size: 17.5px 17.5px; padding-left: 25px; } .login-wrapper .find-pw .find-pw-form { width: 100%; } .login-wrapper .find-pw .btn-wrapper { gap: 10px; margin-top: 15px; margin-bottom: 0; } .login-wrapper .find-pw .btn-wrapper button { flex: 1; min-width: 137.5px; height: 45px; font-size: 16px; } .login-wrapper .find-pw label { font-size: 13px; } .login-wrapper .btn-search-container { font-size: 12px; } } /*------------------------------------------------------------------- 401, 404, 500 에러 페이지 -------------------------------------------------------------------*/ .error-wrap { height: calc(100vh - 300px); position: relative; } .error-inner { display: flex; flex-direction: column; align-items: center; position: absolute; top:50%; left:50%; text-align:center; transform:translate(-50%, -50%); } .error-inner strong { display:block; margin: 30px 0 0; font-size: 20px; font-weight: 400; line-height: 1; } .error-inner a { display: inline-block; width: 112px; height: 40px; background: url(../images/btn_error.png) no-repeat 0 0; text-indent: -999em; position: absolute; margin-top: 160px; } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .error-inner strong { font-size: 12px; margin-top: 15px; } .error-inner a { width: 12vw; height: 4.5vw; margin-top: 18vw; background-size: contain; } } /*------------------------------------------------------------------- sweetalert.js custom -------------------------------------------------------------------*/ .swal-modal { width: auto; min-width: 400px; background: #fff; box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.16); border-radius: 0; } .swal-text { font-size: 30px; font-weight: 600; text-align: center; line-height: 1.4; letter-spacing: 0; color: #222; } .swal-icon:first-child { margin: 50px auto 10px; } .swal-icon { width: 60px; height: 60px; background-repeat: no-repeat; background-position: center center; background-size: contain; border: none; margin: 30px auto; opacity: 0; animation: animateIcon .3s; animation-delay: .3s; animation-fill-mode: forwards; } .swal-icon--warning__body, .swal-icon--warning__dot { display: none; } .swal-icon--warning { background-image: url(../images/ico_warning.png); } .swal-icon--error__line, .swal-icon--error__line--left, .swal-icon--error__line--right { display: none; } .swal-icon--error { background-image: url(../images/ico_error.png); } .swal-icon--success:before, .swal-icon--success:after, .swal-icon--success__hide-corners, .swal-icon--success__ring, .swal-icon--success__line--long, .swal-icon--success__line--tip { display: none; } .swal-icon--success { background-image: url(../images/ico_success.png); } .swal-icon--info:after, .swal-icon--info:before { display: none; } .swal-icon--info { background-image: url(../images/ico_info.png); } .swal-button { min-width: 170px; height: 60px; background-color: #0082b3; color: #fff; border-radius: 30px; font-size: 24px; font-weight: 500; } .swal-button:active, .swal-button:not([disabled]):hover { background-color: #0082b3; } .swal-button:focus { box-shadow: none; } .swal-button--cancel { background-color: #c3c2c0; color: #fff; } .swal-button--cancel:active, .swal-button--cancel:not([disabled]):hover { background-color: #c3c2c0; } .swal-footer { text-align: center; padding: 13px 30px 40px; } .swal-overlay { background-color: rgba(0,0,0,.6); } .swal-modal.swal-progress { padding: 50px 30px 40px; } .swal-modal.swal-progress::before { content: ''; display: block; width: 60px; height: 60px; margin: 0 auto; background: url(../images/ico_loading.png) no-repeat center center; background-size: contain; animation: spin 1s linear infinite; } .swal-modal.swal-progress .swal-text:first-child { margin-top: 15px; } .swal-modal.swal-progress .swal-text:last-child { margin-bottom: 0px; } @keyframes animateIcon{ 0% { transform: rotateX(100deg); opacity: 0; } 100% { transform: rotateX(0deg); opacity: 1; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (max-width: 767.98px) { /* 모바일 대응 해상도 */ .swal-modal { width: calc(100% - 60px); min-width: auto; } .swal-icon:first-child { margin-top: 40px; } .swal-text { font-size: 24px; } .swal-footer { display: flex; justify-content: center; padding-bottom: 35px; } .swal-button-container { flex: 1; max-width: 126px; } .swal-button { width: 100%; min-width: auto; height: 45px; font-size: 18px; } .swal-modal.swal-progress { padding: 40px 30px 35px; } } /*------------------------------------------------------------------- 로딩바 - 프로그레스 스타일 -------------------------------------------------------------------*/ #progress { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,.6); } #progress .progress-icon{ display: flex; gap: 7px; margin: 0 auto; } #progress .progress-icon > div{transform-origin: 40px 40px; animation: lds-spinner 1.2s linear infinite;} #progress .progress-icon > div:after{ content: " "; display: block; width: 12px; height: 52px; background: #fff; border-radius: 7px; } #progress .progress-icon > div:nth-child(1) { animation-delay: -1.1s; } #progress .progress-icon > div:nth-child(2) { animation-delay: -1.0s; } #progress .progress-icon > div:nth-child(3) { animation-delay: -0.9s; } #progress .progress-icon > div:nth-child(4) { animation-delay: -0.8s; } #progress .progress-icon > div:nth-child(5) { animation-delay: -0.7s; } #progress .progress-icon > div:nth-child(6) { animation-delay: -0.6s; } #progress .progress-icon > div:nth-child(7) { animation-delay: -0.5s; } #progress .progress-icon > div:nth-child(8) { animation-delay: -0.4s; } #progress .progress-icon > div:nth-child(9) { animation-delay: -0.3s; } #progress .progress-icon > div:nth-child(10) { animation-delay: -0.2s; } #progress .progress-icon > div:nth-child(11) { animation-delay: -0.1s; } #progress .progress-icon > div:nth-child(12) { animation-delay: 0s; } #progress .progress-text{ margin-top: 20px; font-size: 15px; color: #fff; text-align: center; } /*------------------------------------------------------------------- chart.js -------------------------------------------------------------------*/ #div-chart { background: #3b3b3b; padding: 30px 30px 20px; } /*------------------------------------------------------------------- select2 custom styles -------------------------------------------------------------------*/ .select-box .select2-container { min-width: 140px; font-weight: 400; font-size: 17px; } .select-box .select2-container--default .select2-selection--single { height: 52px; border: 1px solid #aab4b8; border-radius: 26px; padding: 0 40px 0 20px; background: #fff; } .select-box .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 50px; padding: 0; color: #0e0e0e; } .select-box .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; right: 5px; } .select-box .select2-container--default .select2-selection--single .select2-selection__arrow b { border: none; width: 8px; height: 8px; border-bottom: 2px solid #565656; border-right: 2px solid #565656; transform: rotate(45deg); margin-top: -4px; left: 0; top: 50%; } .select-box .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(-135deg); margin-top: 0; } .select-box .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #bababa; } /* .select-box .select2-container--default.select2-container--focus .select2-selection--single { border: 2px solid #0082b3; }*/ /* Select2 에러/경고 스타일 */ .select-box .select2-selection.warning { border: 2px solid #dc3545 !important; } .select-box .select2-selection.warning .select2-selection__arrow b { border-color: #dc3545 !important; } .select-box .select2-selection.warning .select2-selection__rendered { color: #dc3545; } /* 기존 .select-box::after 화살표 숨기기 */ .select-box:has(.select2-container)::after { display: none; } /* 드롭다운 스타일 */ .select2-dropdown { border: 1px solid #aab4b8; border-radius: 26px; overflow: hidden; } .select2-container--default .select2-results__option { padding: 12px 20px; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #ecf1f6; color: #0e0e0e; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: #0082b3; color: #fff; } .select2-container--default .select2-search--dropdown .select2-search__field { height: 40px; border: 1px solid #aab4b8; border-radius: 20px; padding: 0 15px; } .select2-container--default .select2-search--dropdown { padding: 10px; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #fff !important; border-color: #aab4b8 !important; opacity:0.4; } .select2-container--default.select2-container--disabled .select2-selection__rendered { color: #cac8c8 !important; } @media (max-width: 767.98px) { .select-box .select2-container { font-size: 13px; } .select-box .select2-container--default .select2-selection--single { height: 36px; border-radius: 19px; padding: 0 30px 0 12px; } .select-box .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; font-size: 13px; } .select-box .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; right: 0; } .select-box .select2-container--default .select2-selection--single .select2-selection__arrow b { width: 6px; height: 6px; margin-top: -3px; } .select2-dropdown { border-radius: 19px; } .select2-container--default .select2-results__option { padding: 8px 15px; font-size: 13px; } .select2-container--default .select2-search--dropdown .select2-search__field { height: 30px; font-size: 13px; } }