@charset "UTF-8"; @font-face { font-family: "Pretendard GOV"; font-weight: 400; font-display: swap; src: url("font/PretendardGOV-Regular.subset.woff2") format("woff2"), url("font/PretendardGOV-Regular.subset.woff") format("woff"); } @font-face { font-family: "Pretendard GOV"; font-weight: 500; font-display: swap; src: url("font/PretendardGOV-Medium.subset.woff2") format("woff2"), url("font/PretendardGOV-Medium.subset.woff") format("woff"); } @font-face { font-family: "Pretendard GOV"; font-weight: 600; font-display: swap; src: url("font/PretendardGOV-SemiBold.subset.woff2") format("woff2"), url("font/PretendardGOV-SemiBold.subset.woff") format("woff"); } @font-face { font-family: "Pretendard GOV"; font-weight: 700; font-display: swap; src: url("font/PretendardGOV-Bold.subset.woff2") format("woff2"), url("font/PretendardGOV-Bold.subset.woff") format("woff"); } :root { --color-primary: #0055e9; --color-primary-hover: #092db6; --color-skyblue: #3b88fe; --color-white: #fff; --color-disabled: #A2A2A2; --bg-disabled: #DEDEDE; --color-111: #111; --color-333: #333; --color-555: #555; --color-888: #888; --color-red: #E93636; --color-green: #129652; --color-orange: #EE8122; --btn-border: #C5C9D2; --bg-green: #ECF5F2; --bg-blue: #E8F1FE; --bg-red: #FFF2F2; --bg-orange: #FFF6E6; --bg-gray: #F6F6F6; --bg-gray2: #ececec; --bg-blue_box: #EEF3FA; --border-default: #D9D9D9; --border-disabled: #C7C7C7; } * {font-family: 'Pretendard GOV', '나눔고딕', 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic';margin: 0;padding: 0;word-break: normal !important;letter-spacing: -0.5px;box-sizing:border-box;} /* 20260528 Alpine.js x-cloak — Alpine 초기화 전 깜빡임(FOUC) 방지. x-cloak 속성을 가진 요소만 매칭 */ [x-cloak]{display: none !important;} a {text-decoration:none;color:var(--color-111);cursor:pointer} /* a:hover{color: #471293} */ button {border:none;background:none;cursor:pointer} html {font-size:10px} body {height:100%;font-family:'Pretendard GOV','NanumGothicRound', 'NotoSansKR', '맑은 고딕', 'Malgun Gothic', sans-serif;font-size:1.5rem;font-weight:400;line-height:1.5;color:var(--color-333);background: #f2f5f9;overflow-x: hidden;} table, nobr, td, h1, h2, h3, h4, h5, h6, input, input[type='button'],.w2input, ol, li, ul, dl, dt, dd,blockquote,fieldset,form,pre,textarea, p, span, div {font-weight:500} select::-ms-expand {display:none} table {border-collapse: collapse; border-spacing: 0;} a img, img {vertical-align:top} img, fieldset {border:0} ul, dl, dd {margin:0;padding:0;list-style:none} ul li img {vertical-align:top} em, address {font-style:normal} a {color:var(--color-111);text-decoration:none} button {cursor: pointer;padding: 0.3rem 0.6rem;border-radius: 0.3rem;border: none;} input {padding: 0.5rem;border: 1px solid #d1d5db;border-radius: 0.3rem;} caption{text-indent:-9999px; width:1px !important; height:0px !important; font-size:1px !important; padding:0 !important; margin:0 !important;overflow:hidden;background-color:transparent !important} input[type="button"]{font-family: 'Pretendard GOV', 'NotoSansKR', '맑은 고딕', 'Malgun Gothic', sans-serif} input[type="button"],input[type="text"],input[type="email"], textarea, button{appearance:none;-moz-appearance: none;-webkit-appearance: none;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;} input[type="text"], input[type="password"],input[type="email"], textarea, input[type="number"]{height: 40px;margin: 0;padding: 0rem 1rem;border: 1px solid var(--border-default);border-radius: .4rem;font-size: 1.5rem;box-sizing: border-box;background: var(--color-white);} input[type="text"]:disabled, input[type="password"]:disabled,input[type="email"]:disabled, textarea:disabled, select:disabled{background-color: var(--bg-disabled) !important; color: var(--color-disabled) !important;opacity: 1 !important;border-color: var(--border-disabled) !important;} input[type="text"]:read-only, input[type="password"]:read-only,input[type="email"]:read-only, textarea:read-only{background-color: var(--bg-gray);color: var(--color-555);} input[type="text"]:read-only:focus, input[type="password"]:read-only:focus,input[type="email"]:read-only:focus, textarea:read-only:focus, input[type="text"]:disabled:focus, input[type="password"]:disabled:focus,input[type="email"]:disabled:focus, textarea:disabled:focus, select:disabled:focus{border: 1px solid var(--border-default);} input[type="text"]::placeholder, input[type="password"]::placeholder,input[type="email"]::placeholder, textarea::placeholder{color: var(--color-888)} input[type="text"].red, input[type="text"].err, input[type="password"].red,input[type="password"].err, input[type="email"].red,input[type="email"].err, textarea.red,textarea.err, input[type="number"].red, input[type="number"].err{border-color: var(--color-red);background-color: var(--bg-red);} input[type="text"].warning, input[type="password"].warning, input[type="email"].warning, textarea.warning, input[type="number"].warning{border-color: var(--color-orange);background-color: var(--bg-orange);} input[type="text"].success, input[type="password"].success, input[type="email"].success, textarea.success, input[type="number"].success{border-color: var(--color-green);background-color: var(--bg-green);} select{height: 4rem;margin: 0;padding: 0rem 3rem 0rem 1rem;border: 1px solid var(--border-default);border-radius: .4rem;font-size: 1.5rem;box-sizing: border-box;background: var(--color-white);appearance:none;-moz-appearance: none;-webkit-appearance: none;background: var(--color-white) url(/images/ico_select.png) no-repeat right 1.3rem center;} select:focus, input[type="text"]:focus, input[type="password"]:focus,input[type="email"]:focus {outline: none;border-color: var( --color-primary);} @keyframes leftright { 0% {left: 35px;} 100% {left: 50px;} } @keyframes leftright2 { 0% {right: 8px;} 100% {right: 18px;} } /* 공통 margin 설정 */ .m_0 {margin: 0 !important;} .m_5 {margin: 5px !important;} .m_10 {margin: 10px !important;} .m_15 {margin: 15px !important;} .m_20 {margin: 20px !important;} .m_25 {margin: 25px !important;} .m_30 {margin: 30px !important;} .m_35 {margin: 35px !important;} .m_40 {margin: 40px !important;} .m_45 {margin: 45px !important;} .m_50 {margin: 50px !important;} .mt_0 {margin-top: 0px !important;} .mt_5 {margin-top: 5px !important;} .mt_10 {margin-top: 10px !important;} .mt_15 {margin-top: 15px !important;} .mt_20 {margin-top: 20px !important;} .mt_25 {margin-top: 25px !important;} .mt_30 {margin-top: 30px !important;} .mt_35 {margin-top: 35px !important;} .mt_40 {margin-top: 40px !important;} .mt_45 {margin-top: 45px !important;} .mt_50 {margin-top: 50px !important;} .mb_0 {margin-bottom: 0px !important;} .mb_5 {margin-bottom: 5px !important;} .mb_10 {margin-bottom: 10px !important;} .mb_15 {margin-bottom: 15px !important;} .mb_20 {margin-bottom: 20px !important;} .mb_25 {margin-bottom: 25px !important;} .mb_30 {margin-bottom: 30px !important;} .mb_35 {margin-bottom: 35px !important;} .mb_40 {margin-bottom: 40px !important;} .mb_45 {margin-bottom: 45px !important;} .mb_50 {margin-bottom: 50px !important;} .ml_0 {margin-left: 0px !important;} .ml_5 {margin-left: 5px !important;} .ml_10 {margin-left: 10px !important;} .ml_15 {margin-left: 15px !important;} .ml_20 {margin-left: 20px !important;} .ml_25 {margin-left: 25px !important;} .ml_30 {margin-left: 30px !important;} .ml_35 {margin-left: 35px !important;} .ml_40 {margin-left: 40px !important;} .ml_45 {margin-left: 45px !important;} .ml_50 {margin-left: 50px !important;} .ml_60 {margin-left: 60px !important;} .ml_70 {margin-left: 70px !important;} .ml_80 {margin-left: 80px !important;} .ml_90 {margin-left: 90px !important;} .ml_100 {margin-left: 100px !important;} .mr_0 {margin-right: 0px !important;} .mr_5 {margin-right: 5px !important;} .mr_10 {margin-right: 10px !important;} .mr_15 {margin-right: 15px !important;} .mr_20 {margin-right: 20px !important;} .mr_25 {margin-right: 25px !important;} .mr_30 {margin-right: 30px !important;} .mr_35 {margin-right: 35px !important;} .mr_40 {margin-right: 40px !important;} .mr_45 {margin-right: 45px !important;} .mr_50 {margin-right: 50px !important;} /* 공통 padding 설정 */ .p_0 {padding: 0 !important;} .p_5 {padding: 5px !important;} .p_10 {padding: 10px !important;} .p_15 {padding: 15px !important;} .p_20 {padding: 20px !important;} .p_25 {padding: 25px !important;} .p_30 {padding: 30px !important;} .p_35 {padding: 35px !important;} .p_40 {padding: 40px !important;} .p_45 {padding: 45px !important;} .p_50 {padding: 50px !important;} .pt_0 {padding-top: 0px !important;} .pt_5 {padding-top: 5px !important;} .pt_10 {padding-top: 10px !important;} .pt_15 {padding-top: 15px !important;} .pt_20 {padding-top: 20px !important;} .pt_25 {padding-top: 25px !important;} .pt_30 {padding-top: 30px !important;} .pt_35 {padding-top: 35px !important;} .pt_40 {padding-top: 40px !important;} .pt_45 {padding-top: 45px !important;} .pt_50 {padding-top: 50px !important;} .pb_0 {padding-bottom: 0px !important;} .pb_5 {padding-bottom: 5px !important;} .pb_10 {padding-bottom: 10px !important;} .pb_15 {padding-bottom: 15px !important;} .pb_20 {padding-bottom: 20px !important;} .pb_25 {padding-bottom: 25px !important;} .pb_30 {padding-bottom: 30px !important;} .pb_35 {padding-bottom: 35px !important;} .pb_40 {padding-bottom: 40px !important;} .pb_45 {padding-bottom: 45px !important;} .pb_50 {padding-bottom: 50px !important;} .pl_0 {padding-left: 0px !important;} .pl_5 {padding-left: 5px !important;} .pl_10 {padding-left: 10px !important;} .pl_15 {padding-left: 15px !important;} .pl_20 {padding-left: 20px !important;} .pl_25 {padding-left: 25px !important;} .pl_30 {padding-left: 30px !important;} .pl_35 {padding-left: 35px !important;} .pl_40 {padding-left: 40px !important;} .pl_45 {padding-left: 45px !important;} .pl_50 {padding-left: 50px !important;} .pr_0 {padding-right: 0px !important;} .pr_5 {padding-right: 5px !important;} .pr_10 {padding-right: 10px !important;} .pr_15 {padding-right: 15px !important;} .pr_20 {padding-right: 20px !important;} .pr_25 {padding-right: 25px !important;} .pr_30 {padding-right: 30px !important;} .pr_35 {padding-right: 35px !important;} .pr_40 {padding-right: 40px !important;} .pr_45 {padding-right: 45px !important;} .pr_50 {padding-right: 50px !important;} .w_0_p {width: 0% !important;} .w_10_p {width: 10% !important;} .w_20_p {width: 20% !important;} .w_30_p {width: 30% !important;} .w_40_p {width: 40% !important;} .w_50_p {width: 50% !important;} .w_60_p {width: 60% !important;} .w_70_p {width: 70% !important;} .w_80_p {width: 80% !important;} .w_90_p {width: 90% !important;} .w_100_p {width: 100% !important;} .w_min10_r {min-width: 10rem !important;} .w_min15_r {min-width: 15rem !important;} .w_min20_r {min-width: 20rem !important;} .w_min25_r {min-width: 25rem !important;} .w_min30_r {min-width: 30rem !important;} .w_min35_r {min-width: 35rem !important;} .w_min40_r {min-width: 40rem !important;} .w_min45_r {min-width: 45rem !important;} .w_min50_r {min-width: 50rem !important;} .w_min60_r {min-width: 60rem !important;} .w_min65_r {min-width: 65rem !important;} .w_min70_r {min-width: 70rem !important;} .w_min75_r {min-width: 75rem !important;} .w_min80_r {min-width: 80rem !important;} .w_min85_r {min-width: 85rem !important;} .w_min90_r {min-width: 90rem !important;} .w_min95_r {min-width: 95rem !important;} .h_0_p {height: 0% !important;} .h_10_p {height: 10% !important;} .h_20_p {height: 20% !important;} .h_30_p {height: 30% !important;} .h_40_p {height: 40% !important;} .h_50_p {height: 50% !important;} .h_60_p {height: 60% !important;} .h_70_p {height: 70% !important;} .h_80_p {height: 80% !important;} .h_90_p {height: 90% !important;} .h_100_p {height: 100% !important;} .h_195{height: 195px !important;} .h_200{height: 200px !important;} /* 공통 Width, Height : E */ .hide {clip: rect(0 0 0 0);width: 1px;height: 1px;position: absolute;overflow: hidden;margin: -1px;padding: 0;border: 0;} .display_b {display: block !important;} .display_inb {display: inline-block !important;} .vertical_top {vertical-align: top !important;} .vertical_middle {vertical-align: middle !important;} .vertical_base {vertical-align: baseline !important;} .flex {display: flex;align-items: center;} .flex_c {display: flex;align-items: center;justify-content: center;} .flex_end {display: flex;justify-content: flex-end;} .flex_between {display: flex;justify-content: space-between;align-items: center;} .flex.al_t{align-items: flex-start;} .text_l, .tal {text-align: left !important;} .text_c, .tac {text-align: center !important;} .text_r, .tar {text-align: right !important;} .text_red{color: var(--color-red) !important;} .text_blue{color: var( --color-primary) !important;} .bold{font-weight: 700;} .bg_red{background-color: var(--bg-red) !important;} .bg_blue{background-color: var(--bg-blue) !important;} .img_center{text-align: center;} .required::before{content: '*';margin-right: .3rem;color: var(--color-red);font-weight: 700;} .btn {display: inline-block;position: relative;padding: .6rem 1rem;width: auto;border: 1px solid var(--btn-border);border-radius: .4rem;color: var(--color-333);font-size: 1.4rem;font-weight: 500;background: var(--color-white);transition: 0.3s all ease;} .btn:hover{background-color: var(--bg-blue) !important;} .btn.primary{background-color: var( --color-primary) !important;color: var(--color-white) !important;border-color:var( --color-primary) !important;} .btn.primary:hover{background-color: var(--color-primary-hover) !important} .btn.primary.line{background-color: var(--color-white) !important;color: var( --color-primary) !important;border-color: var( --color-primary) !important;} .btn.primary.line:hover{background-color: var(--bg-blue) !important;} .btn:disabled, .btn.primary:disabled{background-color: var(--bg-disabled) !important;border-color: var(--border-disabled) !important;color: var(--color-disabled) !important;cursor: default;} .btn.primary:disabled:hover{background-color: var(--bg-disabled) !important;} .btn.ico{border-color: var(--btn-border);position: relative;padding-left: 2.9rem;} .btn.ico:before{content: '';position: absolute;background-size: cover;background-repeat: no-repeat;background-position: center;} .btn.btn_excel:before{top: 7px;left: 10px;width: 1.4rem;height: 1.4rem;background-image: url(/images/ico_excel.png);} .btn.btn_re:before{top: 8px;left: 10px;width: 1.3rem;height: 1.3rem;background-image: url(/images/ico_re.png);} .btn.btn_edit:before{top: 8px;left: 10px;width: 1.3rem;height: 1.3rem;background-image: url(/images/ico_edit.png);} .tit_box .btn_box .btn.btn_edit.on{background-color: rgba(47, 128, 245, .06);border-color: #97C6FF;} .btn.btn_down:before{top: 5px;left: 8px;width: 1.7rem;height: 1.7rem;background-image: url(/images/ico_down.png);} .btn.btn_up:before{top: 7px;left: 8px;width: 1.5rem;height: 1.3rem;background-image: url(/images/ico_up.png);} .btn.btn_open:before{top: 5px;left: 8px;width: 1.4rem;height: 1.8rem;background-image: url(/images/ico_open.png);} .btn.btn_min:before{top: 50%;left: 1.4rem;width: 1rem;height: .2rem;background: var(--color-555);transform: translate(-50%, -50%);} .btn.btn_add:before{top: 50%;left: 1.4rem;width: 1rem;height: .2rem;background: var(--color-555);transform: translate(-50%, -50%);} .btn.btn_add:after{content: '';position: absolute;top: 50%;left: 1.4rem;width: .2rem;height: 1rem;background: var(--color-555);transform: translate(-50%, -50%);} .btn.btn_guide{width: auto !important;} .text_ico{position: relative;padding-left: 1.2rem !important;margin-top: .5rem !important;font-family: 'Pretendard GOV', '나눔고딕', 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic' !important;font-size: 1.2rem !important;color: var(--color-333);} .text_ico:before{content: '※';position: absolute;left: 0;top: 0;} /* checkbox, radio : S */ .chrd_box{display: flex;flex-wrap: wrap;gap: 1.3rem;} .check_radio input{position:absolute;left:-10000px} .check_radio label{position:relative;display:inline-block;min-height: 2rem;font-size: 1.4rem !important;color:var(--color-333);padding-left: 2.3rem;cursor:pointer;border:1px solid transparent;vertical-align:middle;line-height: 2rem;} .check_radio label::after, .check_radio label::before{position:absolute;content:"";display:inline-block} .check_radio input[type="radio"]+label::after{top: .1rem;left: 0px;width:1.6rem;height:1.6rem;border:1px solid #838383;border-radius:2rem;background-color:var(--color-white)} .check_radio input[type="radio"]:checked+label::after{border-color:var( --color-primary)} .check_radio input[type="radio"]:checked+label::before{z-index:1;top: .6rem;left: .5rem;width:.8rem;height:.8rem;border-radius:1rem;background-color:var( --color-primary)} .check_radio input[type="radio"]:disabled+label{color:#8e8e8e} .check_radio input[type="radio"]:disabled+label::after{border-color:#e0e2e7;background-color:#f4f4f4} .check_radio input[type="radio"]:disabled:checked+label::before{z-index:1;top:.6rem;left:.5rem;width:.8rem;height:.8rem;border-radius:1rem;background-color:#717171} .check_radio input[type="checkbox"]+label::after{top: .3rem;left: 0;width: 1.5rem;height: 1.5rem;border:1px solid #D3D3D3;border-radius:.2rem;background-color:var(--color-white);box-sizing: border-box;} .check_radio input[type="checkbox"]:checked+label::after{border-color:var( --color-primary);background-color:#246beb} .check_radio input[type="checkbox"]:checked+label::before{z-index:1;top: 1rem;left: .5rem;width: .5rem;height: .8rem;border:2px solid var(--color-white);border-top:none;border-left:none;transform:translateY(-63%) rotate(44deg);box-sizing: border-box;} .check_radio input[type="checkbox"]:disabled+label{color:#8e8e8e} .check_radio input[type="checkbox"]:disabled+label::after{border-color: #D3D3D3;background-color: #E7E7E7;} .check_radio input[type="checkbox"]:disabled+label::before{border-color:#b9b9b9} /* checkbox, radio : E */ /* header : S */ .header{display: flex;align-items: center;gap: 5.6rem;height: 6rem;padding: 0 4rem 0 3rem;background: #fff;box-shadow: 0 10px 15px -10px rgba(8, 40, 120, .1);z-index: 80;position: relative;overflow-x: clip;} .header .logo{display: flex;align-items: center;justify-content: center;width: 17rem;height: 100%;flex-shrink: 0;} .header .logo a{display: flex;height: 100%;align-items: center;justify-content: center;width: 170px;} .header .logo h1{font-size: 0;font-weight: 700;color: var(--color-white);background: url(/images/logo.png) no-repeat;width: 17rem;height: 2rem;} .header .top_menu{display: flex;height: 100%;min-width: 0;overflow-x: auto;scrollbar-width: none;} .header .top_menu::-webkit-scrollbar{display: none;} .header .top_menu_wrap{display: flex;align-items: center;justify-content: space-between;width: calc(100% - 18rem);height: 100%;min-width: 0;} .header .top_menu_wrap .top_menu ul{display: flex;gap: 2.5rem;} .header .top_menu_wrap .top_menu ul li a{display: inline-flex;justify-content: center;align-items: center;height: 100%;border-radius: .6rem;font-size: 1.7rem;color: var(--color-333);transition: all 0.3s;font-weight: 600;position: relative;} .header .top_menu_wrap .top_menu ul li a::before{content: '';position: absolute;width: 100%;height: 3px;background: linear-gradient(180deg, #0B42BB 0%, #1163cf 100%);bottom: 0;left: 0;transform: scaleX(0);transform-origin: left center;transition: transform 0.3s ease;} .header .top_menu_wrap .top_menu ul li a.on::before{transform: scaleX(1);} .header .top_menu_wrap .top_menu ul li a:hover, .header .top_menu_wrap .top_menu ul li a.on{color: var(--color-primary);} .header .top_menu_wrap .logout{display: flex;justify-content: flex-end;flex: 1 0 auto;gap:1rem;align-items: center;} .header .top_menu_wrap .logout button, .header .top_menu_wrap .logout a{padding: .4rem 1.2rem;font-size: 1.4rem;display: inline-flex;align-items: center;height: 3.6rem;border-radius: 999px;background: #f1f4f9;border: 1px solid rgba(255, 255, 255, .28);color: var(--color-primary);transition: ease all .3s;} .header .top_menu_wrap .logout .btn_login{color: var(--color-primary);background-color: #f1f4f9;transition: ease all .3s;} .header .top_menu_wrap .logout .btn_login:hover{background-color: #dde8f9;} .header .top_menu_wrap .logout .all_menu{position: relative;font-size: 0;background: url(/images/ico_allmenu.png);width: 3rem;height: 3rem;border-radius:.4rem;transition: 0.3s all ease;border:none;} .header .top_menu_wrap .logout .all_menu:hover{background: #dde8f9 url(/images/ico_allmenu.png) !important;} .header .top_menu_wrap .logout .all_menu:after{content: '전체메뉴';position: absolute;top: calc(100% + .6rem);right:0;padding: .5rem 1rem;font-size: 1.3rem;font-weight: 500;line-height: 1;white-space: nowrap;color: #fff;background: #052d85;border-radius: .6rem;box-shadow: 0 .2rem .6rem rgba(0,0,0,.18);opacity: 0;pointer-events: none;transition: opacity .2s ease;z-index: 100;} .header .top_menu_wrap .logout .all_menu:hover:after{opacity: 1;} .header .top_menu_wrap .logout .btn_chatbox{border: 1px solid #97C6FF;transition: ease all .3s;color: var(--color-primary);font-weight: 600;outline: 6px solid rgba(47, 128, 245, .06);background: linear-gradient(180deg, #E8F1FE 0%, #C5DCFB 100%);font-size: 0;width: 110px;margin-right: .8rem;} .header .top_menu_wrap .logout .btn_chatbox::before{content: '';position: absolute;background: url(/images/logo_chatbot.png) no-repeat center;background-size: contain;width: 91px;height: 19px;top: 50%;left: 50%;transform: translate(-50%, -50%);} .header .top_menu_wrap .logout .btn_chatbox:hover{background: linear-gradient(180deg, #D8E5FA 0%, #AECCF6 100%) !important;} .header .top_menu_wrap .logout .user_box .user_btn{position: relative;padding: 0;font-size:0;width: 3.6rem;height: 3.6rem;transition: ease all .3s;background: linear-gradient(350deg, #0550d3 0%, #04328b 100%);border: none;} .header .top_menu_wrap .logout button:hover, .header .top_menu_wrap .logout a:hover{background: #dde8f9 !important;} .header .top_menu_wrap .logout .user_box .user_btn:hover{background: linear-gradient(350deg, #1862e3 0%, #0c43ad 100%) !important;} .header .top_menu_wrap .logout .user_box .user_btn:before{position: absolute;width:1.2rem;height: 1.3rem;background: url(/images/ico_user.png) no-repeat;content:'';top:50%;left:50%;transform: translate(-50%, -50%);} .header .top_menu_wrap .logout .user_box{position: relative;} .header .top_menu_wrap .logout .user_box .user_list{position: absolute;top: 4.7rem;right: 0;width: 20rem;max-height: 0;overflow: hidden;z-index: 100;transition: max-height 0.3s ease-out, padding 0.3s ease-out;} .header .top_menu_wrap .logout .user_box .user_list .userli_box{background: var(--color-white);border: 1px solid var( --color-primary);border-radius: 1.2rem;padding: .9rem 1.5rem 1.3rem 1.5rem;} .header .top_menu_wrap .logout .user_box .user_list .userli_box .btn.primary.line{display: flex;align-items: center;justify-content: center;gap: .2rem;height: 3rem;width: 100%;padding: 0 1rem;border-radius: .4rem;} .header .top_menu_wrap .logout .user_box .user_list .userli_box .btn.primary.line::before{content: '';position: static;width: 1.4rem;height: 1.4rem;background: url(/images/ico_logout.png) no-repeat center / contain;} .header .top_menu_wrap .logout .user_box .user_list .userli_box .btn.primary.line:hover{background-color: var(--bg-blue) !important;} .header .top_menu_wrap .logout .user_box .user_list_head{display: flex;justify-content: space-between;align-items: center;position: relative;margin-bottom: .8rem;} .header .top_menu_wrap .logout .user_box .user_list_head h4{margin: 0; margin-right: 2rem;font-size: 1.5rem;font-weight: 700;color: var(--color-111);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .header .top_menu_wrap .logout .user_box .user_list .btn_close{position: absolute;top: 0;right: 0;padding: 0;width: 2rem;height: 2rem;font-size: 0;border-radius: .4rem;transition: ease all .3s;box-sizing: border-box;background: none;} .header .top_menu_wrap .logout .user_box .user_list .btn_close:hover{background-color: #E8F1FE;} .header .top_menu_wrap .logout .user_box .user_list .btn_close::before, .header .top_menu_wrap .logout .user_box .user_list .btn_close::after{content: '';position: absolute;top: 50%;left: 50%;width: 1.4rem;height: 0.15rem;background-color: var(--color-333);} .header .top_menu_wrap .logout .user_box .user_list .btn_close::before{transform: translate(-50%, -50%) rotate(45deg);} .header .top_menu_wrap .logout .user_box .user_list .btn_close::after{transform: translate(-50%, -50%) rotate(-45deg);} .header .top_menu_wrap .logout .user_box .user_list .company{display: block;position: relative;padding: .4rem 1rem .4rem 2.3rem;margin-bottom: .5rem;border-radius: .4rem;overflow: hidden;font-size: 1.2rem;color: var(--color-333);text-overflow: ellipsis;white-space: nowrap;background: #EEF3FA;} .header .top_menu_wrap .logout .user_box .user_list .company:before{content: '';position: absolute;left: .8rem;top: 50%;transform: translateY(-50%);width: 1.1rem;height: 1.2rem;background: url(/images/ico_menu.png);background-position: -26px -112px;background-size: 62px;} .header .top_menu_wrap .logout .user_box .user_list ul{display: flex;flex-direction: column;} .header .top_menu_wrap .logout .user_box .user_list ul li a{display: block;position: relative;padding: .4rem 0 .4rem 1.2rem;font-size: 1.4rem;color: var(--color-333);transition: ease all .3s;height: auto;background: none;background: none !important;} .header .top_menu_wrap .logout .user_box .user_list ul li a::before{content: '';position: absolute;left: 0;top: 50%;width: .3rem;height: .3rem;border-radius: 50%;background: var(--color-888);transform: translateY(-50%);} .header .top_menu_wrap .logout .user_box.on .user_btn{background: linear-gradient(350grad, #3b88fe 0%, #0055e9 100%) !important;} .header .top_menu_wrap .logout .user_box.on .user_list{max-height: 30rem; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);border-radius: 1.2rem;} .header .top_menu_wrap .logout .user_box .user_list ul li a.on, .header .top_menu_wrap .logout .user_box .user_list ul li a:hover{color: var(--color-primary);} .header .top_menu_wrap .logout .user_box .user_list ul li a.on::before, .header .top_menu_wrap .logout .user_box .user_list ul li a:hover::before{background: var(--color-primary);} /* header : E */ /* footer : S */ .footer{padding:4rem;background: #202936;color: var(--color-white);} .footer .footer_inner{display: flex;align-items: center;flex-wrap: wrap;gap: 4rem;} .footer .footer_left{flex: 1;display: flex;align-items: center;flex-wrap: wrap;gap: 4rem;} .footer .footer_logo{display: flex;flex-direction: column;align-items: center;} .footer .footer_logo .tagline{font-size: 1.4rem;color: #74E1FF;} .footer .footer_logo h2{font-size: 3rem;font-weight: 700;color: #fff;letter-spacing: -0.05rem;} .footer .footer_info{font-size: 1.8rem;color: #fff;display: flex;flex-direction: column} .footer .footer_logo img{width: 17rem;height: auto;} .footer .footer_info h2{font-size: 1.9rem;font-weight: 700;color: #8fb4ff;} .footer .footer_info p{font-size: 1.5rem;color: #d3d9e2;} .footer .footer_info .copyright{font-size: 1.4rem;color: #8b93a3;font-weight: 400;} .footer .footer_policy{display: flex;flex-wrap: wrap;align-items: center;margin-top: 1.2rem;} .footer .footer_policy li{position: relative;} .footer .footer_policy li:not(:first-child){margin-left: 1.4rem;padding-left: 1.4rem;} .footer .footer_policy li:not(:first-child)::before{content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: .3rem;height: .3rem;border-radius: 50%;background: #4a5468;} .footer .footer_policy a{font-size: 1.5rem;color: #d3d9e2;transition: color .2s ease;} .footer .footer_policy a:hover{color: #fff;text-decoration: underline;} .footer .footer_qr_box{flex-shrink: 0;display: flex;gap: 2.5rem;} .footer .footer_qr_item{display: flex;flex-direction: column;align-items: center;gap: .3rem;} .footer .footer_qr_tit{font-size: 1.4rem;color: #d3d9e2;white-space: nowrap;} .footer .footer_qr{flex-shrink: 0;width: 10rem;height: 10rem;padding: .2rem;background: #fff;border-radius: 1rem;overflow: hidden;} .footer .footer_qr img{display: block;width: 100%;height: 100%;} /* footer : E */ .container{display: flex;width: 100%;height: calc(100vh - 6rem);overflow: hidden;} .left_menu{width: 22rem;min-width: 22rem;background-color: var(--color-white);position: relative;transition: 0.3s all ease;z-index: 20;} .container.on .left_menu {width: 5rem;min-width: 5rem;overflow: visible;} .container.on .menu_1depth {overflow-x: visible;overflow-y: visible;padding: 2.5rem .4rem;} .container.on .menu_1depth > li > a {width: 4.2rem;height: 4.2rem;padding: 0;overflow: visible;white-space: nowrap;line-height: 4.2rem;text-align: center;} .container.on .menu_1depth > li > a::before {left: 1.2rem;} .menu_1depth > li > a .menu_label{position: absolute;left: 3.3rem;top: 50%;transform: translateY(-50%);} .menu_2depth > li > a .menu_label{position: absolute;left: 2.3rem;top: 50%;transform: translateY(-50%);} .container.on .menu_1depth > li > a .menu_label{left: calc(100% + .8rem);padding: .8rem 1.4rem;background: #052d85;color: #fff;line-height: 1;font-size: 1.4rem;white-space: nowrap;border-radius: .6rem;box-shadow: 0 .2rem .6rem rgba(0,0,0,.18);display: none;pointer-events: none;z-index: 100;} .container.on .menu_1depth > li > a:hover .menu_label, .container.on .menu_1depth > li > a:focus-visible .menu_label{display: block;} .container.on .hav_child > a::after {display: none;} .container.on .menu_1depth > li > .menu_toggle {display: none;} .container.on .menu_2depth {max-height: 200rem !important;overflow: visible;} .container.on .menu_3depth {max-height: 50rem !important;display: none;} .container.on .menu_2depth > li{position: relative;} .container.on .menu_2depth > li > a{width: auto;height: 3rem;margin: 0;padding: 0;color: transparent;overflow: visible;white-space: nowrap;position: relative;} .container.on .menu_2depth > li > a::before{left: 1.8rem;} .container.on .menu_2depth > li > a.on::before{width: 1.2rem;height: 1.2rem;background: #fff;box-shadow: 0 0 0 .4rem rgba(255,255,255,.18), 0 0 1.6rem rgba(255,255,255,1);left: 1.4rem;} .container.on .menu_2depth > li > a::after{display: none;} .container.on .menu_2depth > li > a .menu_label{left: calc(100% + .8rem);padding: .3rem 1.2rem;background: #052d85;color: #fff;white-space: nowrap;border-radius: .6rem;box-shadow: 0 .2rem .6rem rgba(0,0,0,.18);display: none;pointer-events: none;z-index: 100;} .container.on .menu_2depth > li > a:hover .menu_label, .container.on .menu_2depth > li > a:focus-visible .menu_label{display: block;} .menu_close {position: absolute;top: 10rem;right: -2rem;transition: 0.1s all ease;z-index: 100;} .menu_close button {width: 2rem;height: 5.9rem;background:url(/images/ico_menu_o.png) no-repeat;transition: 0.3s all ease;font-size: 0;} .container.on .menu_close button {background:url(/images/ico_menu_c.png) no-repeat;} .container.on .menu_close button::after {display: none;} /* container : E */ /* menu styling */ .menu_1depth{height: 100%;overflow-x: hidden;overflow-y: auto;scrollbar-gutter: stable;box-shadow: 0 10px 30px -22px rgba(20, 80, 210, .55);background: url(/images/bg_01.png) no-repeat bottom right, linear-gradient(180deg, #0B42BB 0%, #1163cf 100%);padding: 2.5rem .3rem 2.5rem .8rem;} .menu_1depth::-webkit-scrollbar{width:1rem;} .menu_1depth::-webkit-scrollbar-thumb{border: 2px solid transparent;border-radius: 10px;background-clip: padding-box;background-color: rgba(255,255,255,.2);} .menu_1depth::-webkit-scrollbar-track{border-radius: 10px;background-color: rgba(255,255,255,.05);} .menu_1depth>li>a {display: block;position: relative;padding: 1.4rem 2.5rem 1.4rem 3.3rem;height: 5rem;font-size: 1.5rem;font-weight: 600;color: #fff;transition: 0.3s all ease;border-radius: 1rem;white-space: nowrap;overflow: hidden;} .menu_1depth>li>a:hover{background: rgba(255,255,255,.07);} .menu_1depth>li>a.on{background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.08));box-shadow: 0 .2rem .8rem rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.28);} .menu_1depth>li>a:before{content: '';position: absolute;left: 1rem;top: 50%;transform: translateY(-50%);width: 1.8rem;height: 1.8rem;background: url(/images/ico_menu2.png);} /* .menu_1depth>li:nth-child(1)>a:before{background-position: 0 -180px;} .menu_1depth>li:nth-child(2)>a:before{background-position: 0 -18px;} .menu_1depth>li:nth-child(3)>a:before{background-position: 0 -72px;} .menu_1depth>li:nth-child(4)>a:before{background-position: 0 -54px;} .menu_1depth>li:nth-child(5)>a:before{background-position: 0 -72px;} .menu_1depth>li:nth-child(6)>a:before{background-position: 0 -90px;} .menu_1depth>li:nth-child(7)>a:before{background-position: 0 -108px;} .menu_1depth>li:nth-child(8)>a:before{background-position: 0 -126px;} .menu_1depth>li:nth-child(9)>a:before{background-position: 0 -144px;} .menu_1depth>li:nth-child(10)>a:before{background-position: 0 -162px;} .menu_1depth>li:nth-child(11)>a:before{background-position: 0 -180px;} */ /* 내 업무현황 아이콘 */ .menu_1depth:nth-of-type(1)>li:nth-child(1)>a:before{background-position: 0 0;} .menu_1depth:nth-of-type(1)>li:nth-child(2)>a:before{background-position: 0 -18px;} /* 감면컨설팅 아이콘 */ .menu_1depth:nth-of-type(2)>li:nth-child(2)>a:before{background-position: -18px 0;} .menu_1depth:nth-of-type(2)>li:nth-child(3)>a:before{background-position: -18px -36px;} .menu_1depth:nth-of-type(2)>li:nth-child(4)>a:before{background-position: -18px -54px;} .menu_1depth:nth-of-type(2)>li:nth-child(5)>a:before{background-position: -18px -72px;} /* 고객센터 아이콘 */ .menu_1depth:nth-of-type(5)>li:nth-child(1)>a:before{background-position: -72px 0;} .menu_1depth:nth-of-type(5)>li:nth-child(2)>a:before{background-position: -72px -18px;} .menu_1depth:nth-of-type(5)>li:nth-child(3)>a:before{background-position: -72px -36px;} /* 재산제세모의계산 아이콘 */ .menu_1depth:nth-of-type(6)>li:nth-child(1)>a:before{background-position: -36px 0;} .menu_1depth:nth-of-type(6)>li:nth-child(2)>a:before{background-position: -18px -18px;} .menu_1depth:nth-of-type(6)>li:nth-child(3)>a:before{background-position: -36px -36px;} .menu_1depth:nth-of-type(6)>li:nth-child(4)>a:before{background-position: -36px -54px;} .menu_1depth:nth-of-type(6)>li:nth-child(5)>a:before{background-position: -36px -72px;} /* Agentgo Tax 아이콘 */ .menu_1depth:nth-of-type(7)>li:nth-child(1)>a:before{background-position: -54px 0;} /* 내정보 아이콘 */ .left_menu.userinfo .menu_1depth>li:nth-child(1)>a:before {background-position: -90px 0;} .left_menu.userinfo .menu_1depth>li:nth-child(2)>a:before {background-position: -90px -18px;} .left_menu.userinfo .menu_1depth>li:nth-child(3)>a:before {background-position: -90px -36px;} .left_menu.userinfo .menu_1depth>li:nth-child(4)>a:before {background-position: -90px -54px;} /* .menu_1depth>li:nth-child(1)>a:hover:before, .menu_1depth>li:nth-child(1)>a.on:before{background-position: -18px 0;} .menu_1depth>li:nth-child(2)>a:hover:before, .menu_1depth>li:nth-child(2)>a.on:before{background-position: -18px -18px;} .menu_1depth>li:nth-child(3)>a:hover:before, .menu_1depth>li:nth-child(3)>a.on:before{background-position: -18px -36px;} .menu_1depth>li:nth-child(4)>a:hover:before, .menu_1depth>li:nth-child(4)>a.on:before{background-position: -18px -54px;} .menu_1depth>li:nth-child(5)>a:hover:before, .menu_1depth>li:nth-child(5)>a.on:before{background-position: -18px -72px;} .menu_1depth>li:nth-child(6)>a:hover:before, .menu_1depth>li:nth-child(6)>a.on:before{background-position: -18px -90px;} .menu_1depth>li:nth-child(7)>a:hover:before, .menu_1depth>li:nth-child(7)>a.on:before{background-position: -18px -108px;} .menu_1depth>li:nth-child(8)>a:hover:before, .menu_1depth>li:nth-child(8)>a.on:before{background-position: -18px -126px;} .menu_1depth>li:nth-child(9)>a:hover:before, .menu_1depth>li:nth-child(9)>a.on:before{background-position: -18px -144px;} .menu_1depth>li:nth-child(10)>a:hover:before, .menu_1depth>li:nth-child(10)>a.on:before{background-position: -18px -162px;} .menu_1depth>li:nth-child(11)>a:hover:before, .menu_1depth>li:nth-child(11)>a.on:before{background-position: -18px -180px;} */ .hav_child > a {position: relative;} .hav_child > a::after {content: '';position: absolute;right: 1.3rem;top: 50%;width: 10px;height: 6px;transform: translateY(-50%);transition: 0.3s all ease;background: url(/images/ico_menuarrow.png) no-repeat;} .hav_child.on > a::after {transform: translateY(-50%) rotate( 180deg)} .menu_1depth > li.hav_child > a::after{display: none;} .menu_1depth > li.hav_child > a{width: calc(100% - 2.5rem);padding-right: .8rem;} .menu_1depth > li{position: relative;} .menu_1depth > li > .menu_toggle{position: absolute;top: 0;right: 0;width: 2.5rem;height: 5rem;padding: 0;background: transparent;border: none;font-size: 0;cursor: pointer;z-index: 2;} .menu_1depth > li > .menu_toggle::after{content: '';position: absolute;right: 0;top: 50%;width: 2.5rem;height: 2.5rem;border-radius: 50%;background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.05));box-shadow: 0 .2rem .8rem rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.25);backdrop-filter: blur(2px);transform: translateY(-50%) scale(0);transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .2s ease;opacity: 0;} .menu_1depth > li > .menu_toggle:hover::after{transform: translateY(-50%) scale(1);opacity: 1;} .menu_1depth > li > .menu_toggle::before{content: '';position: absolute;right: .75rem;top: 50%;width: 10px;height: 6px;transform: translateY(-50%);transition: 0.3s all ease;background: url(/images/ico_menuarrow.png) no-repeat;z-index: 1;} .menu_1depth > li > .menu_toggle:hover::before{filter: brightness(1.4) drop-shadow(0 0 .3rem rgba(255,255,255,.6));} .menu_1depth > li.hav_child.on > .menu_toggle::before{transform: translateY(-50%) rotate(180deg);} .menu_2depth {position: relative;max-height: 0;overflow: hidden;transition: 0.3s all ease;} .hav_child.on>.menu_2depth {max-height: 200rem;} .hav_child>.menu_2depth::before{content:'';position:absolute;left: 2rem;top:.6rem;bottom:.6rem;width:1px;background:rgba(255,255,255,.22);} .menu_2depth>li>a {display: block;position: relative;width: calc(100% - 3.5rem);height: 4rem;margin: 0 0 0 1rem;padding: 1rem 1rem 1rem 2.3rem;font-size: 1.4rem;font-weight: 500;color: rgba(255,255,255,.72);border-radius: .8rem;transition: 0.2s all ease;} .menu_2depth>li>a::before{content: '';position: absolute;left: .9rem;top: 50%;transform: translateY(-50%);width: .4rem;height: .4rem;border-radius: 50%;background: rgba(255,255,255,.5);z-index: 1;} .menu_2depth>li>a:hover{color: #fff;background-color: rgba(255,255,255,.07);} .menu_2depth>li>a:hover:before{background-color: #fff;} .menu_2depth>li>a.on{color: #fff;background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.08));box-shadow: 0 .2rem .8rem rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.28);} .menu_2depth>li>a.on::before{background-color: #fff;box-shadow: 0 0 .6rem rgba(255,255,255,.7);} .menu_3depth {position: relative;max-height: 0;overflow: hidden;background-color: transparent;transition: 0.3s all ease;margin: 0 2.5rem 0 1.5rem;background: rgba(7, 30, 75, .2);border-radius: .8rem;} .hav_child.on > .menu_3depth {max-height: 50rem;} .menu_3depth>li{margin: 0 1rem;} .menu_3depth>li.menu_3depth_head{padding-left: 2rem !important;font-size: 1.3rem !important;} .menu_3depth>li>a {display: block;position: relative;padding: 0.6rem 1rem 0.6rem 2.6rem !important;font-size: 1.3rem !important;font-weight: 500;color: rgba(255,255,255,.6);border-bottom: none !important;border-radius: .4rem;transition: 0.2s all ease;} .menu_3depth>li>a::before{content:'';position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:.9rem;height:1px;background:rgba(255,255,255,.45);transition:0.2s all ease;} .menu_3depth>li>a::after{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:.3rem;height:0;border-radius:0 .3rem .3rem 0;background:var(--color-skyblue);transition:height .2s ease;} .menu_3depth>li>a:hover{color:#fff;background-color:rgba(255,255,255,.06);} .menu_3depth>li>a.on{color:#fff;font-weight:600;background-color:rgba(255,255,255,.12);} .menu_3depth>li>a.on::before{background:var(--color-skyblue);} .menu_3depth>li>a.on::after{height:60%;} .left_menu.type2 .menu_1depth>li:nth-child(1)>a:before {background-position: -18px -18px;} .left_menu.type2 .menu_1depth>li:nth-child(2)>a:before {background-position: 0 -18px;} /* 우측 컨텐츠 : S */ .right_container{width: calc(100% - 22rem);padding: 3rem 3.7rem;transition: 0.3s all ease;overflow-y: auto;} .right_container::-webkit-scrollbar{width:1rem;} .right_container::-webkit-scrollbar-thumb{border: 2px solid transparent;border-radius: 10px;background-clip: padding-box;background-color: #B3B3B3;} .right_container::-webkit-scrollbar-track{border-radius: 10px;background-color: #E5E5E5;} .container.on .right_container {width: calc(100% - 5rem);} .con_top {margin-bottom: 1.5rem;} .con_top .card{padding: 1.7rem 2rem;} .con_top .con_header .breadcrumb{display: flex;gap: 2rem;margin-bottom: .3rem;} .con_top .con_header .breadcrumb li{position: relative;} .con_top .con_header .breadcrumb li:after{content: '';position: absolute;top: 50%;right: -1.2rem;width: .5rem;height: .5rem;border-top: 1px solid #888;border-right: 1px solid #BEBEBE;transform: translateY(-50%) rotate(45deg);} .con_top .con_header .breadcrumb li:last-child:after{display: none;} .con_top .con_header .breadcrumb li span{font-size: 1.3rem;color: #888;} .con_top .con_header .breadcrumb li a{font-size: 1.3rem;text-decoration: underline;text-underline-position: from-font;} .con_top .con_header .breadcrumb li a>span{color: var(--color-111);} .con_top .con_header .breadcrumb li:first-child span{position: relative;padding-left: 1.7rem;} .con_top .con_header .breadcrumb li:first-child span:before{content: '';position: absolute;top: 50%;left: 0rem;width: 1.2rem;height: 1.2rem;background: url(/images/ico_home.png) no-repeat;transform: translateY(-50%);} .search_box, .search_box>form{display: flex;flex-wrap: wrap;gap: .6rem;} .search_box .btn.line{color: var( --color-primary);background-color: var(--color-white);} .search_box select, .search_box input[type="text"]{height: 3rem;font-size: 1.4rem;} .custom_select {position: relative;width: 17rem;cursor: pointer;} .con_header .search_box .btn{height: 3rem;} .con_header .search_combo{position: relative;display: inline-flex;} .con_header .search_combo .combo_list{position: absolute;top: calc(100% + 0.2rem);left: 0;width: 100%;max-height: 15.2rem;overflow-y: auto;margin: 0;padding: 0;list-style: none;background: var(--color-white);border: 1px solid var(--border-default);border-radius: 0.4rem;box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.08);z-index: 20;} .con_header .search_combo .combo_list li{display: flex;align-items: center;height: 3rem;padding: 0 1.2rem;font-size: 1.4rem;color: var(--color-333);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;cursor: pointer;} .con_header .search_combo .combo_list li:hover{background-color: var(--bg-blue);} .con_header .search_combo .combo_list::-webkit-scrollbar{width: 0.6rem;} .con_header .search_combo .combo_list::-webkit-scrollbar-thumb{background: #C1C1C1;border-radius: 1rem;} .con_header .search_combo .combo_list::-webkit-scrollbar-track{background: #F1F1F1;} .con_header .search_combo input[type="text"]{padding-right: 2.5rem;width: 21rem;} .con_header .search_combo .btn_clear{position: absolute;top: 50%;right: 0;height: 3rem;width: 2.5rem;font-size: 1.7rem;color: var(--color-555);transform: translateY(-50%);} .card{border-radius: 1rem;padding: 2rem;background-color: var(--color-white);box-shadow: 0 1px 2px rgba(16, 45, 110, .04), 0 18px 40px -22px rgba(13, 55, 140, .28);} .card+.card{margin-top: 1.5rem;} .area_section{width: 100%;} .area_section+.area_section{margin-top: 3rem;} .con_top .card {min-height: auto !important;} .right_container .con_bottom .card{min-height: calc(100vh - 20rem);} .right_container .con_bottom .card .card {min-height: auto;box-shadow: none;} .right_container.no_card .con_bottom .card{min-height: calc(100vh - 28rem);} /* picker_wrap : S */ .picker_box{display: flex;align-items: center;gap: .6rem;} .picker_box>span{color: #666;} .picker_wrap{position: relative;display: flex;align-items: center;width: 13rem;} .picker_wrap .form-input{width: 100%;padding-right: 3.5rem !important;color: var(--color-333);} .picker_wrap .btn_cal{position: absolute;right: 0.5rem;width: 3rem;height: 3rem;border: none;cursor: pointer;font-size: 0;transition: opacity 0.3s;background: transparent url(/images/ico_cal.png) no-repeat center / 2rem;} .picker_wrap .btn_cal:after {content: '';font-size: 1.8rem;background: url(/images/ico_cal.png) no-repeat center / 2rem;} .arrowUp, .arrowDown{display: none !important;} .cur-year-select{padding: 0;padding-right: 1.5rem !important;margin: 0;margin-right: 1rem !important;border: none;outline: none;font-size: 1.4rem !important;font-family: 'Pretendard GOV', '나눔고딕', 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic' !important;font-weight: 700;color: var(--color-333);cursor: pointer;appearance: none;-webkit-appearance: none;-moz-appearance: none;background: var(--color-white) url(/images/ico_select.png) no-repeat right center !important;} .numInputWrapper:hover{background-color: var(--color-white) !important;} .flatpickr-current-month {display: flex !important;flex-direction: row-reverse;justify-content: center;align-items: center;padding-top: 0 !important;} .flatpickr-current-month .numInputWrapper {margin-right: 0.5rem;width: 6.5rem !important;} .flatpickr-current-month .numInputWrapper input.cur-year {font-weight: 700;color: var(--color-333);} /* 월 선택기 스타일 조정 */ .flatpickr-months{display: flex;align-items: center;height: 4rem;} .flatpickr-current-month .flatpickr-monthDropdown-months {padding: 0 !important;padding-right: 1.5rem !important;margin: 0 !important;appearance: none !important;-moz-appearance: none !important;-webkit-appearance: none !important;color: var(--color-333);font-family: 'Pretendard GOV', '나눔고딕', 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic' !important;font-size: 1.4rem !important;font-weight: 600 !important;background: var(--color-white) url(/images/ico_select.png) no-repeat right center !important;} .flatpickr-calendar {width: 23.5rem !important;border-radius: 1rem !important;} .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after{display: none;} .flatpickr-innerContainer{padding: 1rem;} .flatpickr-rContainer, .flatpickr-weekdays{width: 21.5rem !important;} .flatpickr-day {width: 3rem !important;max-width: 3rem !important;height: 3rem !important;max-height: 3rem !important;line-height: 3rem !important;font-size: 1.2rem !important;transition: ease all .3s;} .dayContainer {width: 21.5rem !important;min-width: 21.5rem !important;max-width: 21.5rem !important;} .flatpickr-weekday {font-weight: 600;color: #666 !important;} .flatpickr-weekday:nth-child(7n+1), .flatpickr-day:nth-child(7n+1):not(.flatpickr-disabled) {color: #D71820 !important;} .flatpickr-weekday:nth-child(7n), .flatpickr-day:nth-child(7n):not(.flatpickr-disabled) {color: #6F88BA !important;} .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay, .flatpickr-day.prevMonthDay:nth-child(7n+1), .flatpickr-day.nextMonthDay:nth-child(7n+1), .flatpickr-day.prevMonthDay:nth-child(7n), .flatpickr-day.nextMonthDay:nth-child(7n) {color: #C7C7C7 !important;} .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover{background-color: #f8fbff !important;border-color: #f8fbff !important;} .flatpickr-day.today:hover{color: #393939 !important;} .flatpickr-prev-month:hover, .flatpickr-next-month:hover, .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg {color: var(--color-333) !important;fill: var(--color-333) !important;} .flatpickr-day:hover{background-color: var(--bg-blue) !important;border-color: var(--bg-blue) !important;} .flatpickr-day.today, .flatpickr-weekday:nth-child(7n+1).today, .flatpickr-day:nth-child(7n+1):not(.flatpickr-disabled).today, .flatpickr-weekday:nth-child(7n).today, .flatpickr-day:nth-child(7n):not(.flatpickr-disabled).today{color: var( --color-primary) !important;font-size: 1.2rem;text-decoration: underline;text-underline-position: from-font;border-color: transparent !important;} .flatpickr-footer{padding: 0 0 1rem 1.5rem;text-align: left;} .flatpickr-footer .btn_today{color: var( --color-primary);font-size: 1.2rem;text-decoration: underline;text-underline-position: from-font;} .flatpickr-day.selected, .flatpickr-day.selected:nth-child(7n+1):not(.flatpickr-disabled), .flatpickr-day.selected:nth-child(7n):not(.flatpickr-disabled){color: var(--color-white) !important;text-decoration: none;opacity: 1 !important;border:1px solid var( --color-primary) !important;background: var( --color-primary) !important;} .flatpickr-months .flatpickr-current-month .numInputWrapper{margin-right: 0 !important;} .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month{border: 1px solid var(--btn-border); width: 2rem;height: 2rem !important;border-radius: .4rem;top: 1rem !important;padding: 0 !important;transition: all ease .3s;} .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg{display: none;} .flatpickr-months .flatpickr-prev-month::before, .flatpickr-months .flatpickr-next-month::before{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: .5rem;height: .8rem;background: url(/images/ico_arrow1.png) 0 0 no-repeat;} .flatpickr-months .flatpickr-next-month::before{transform: translate(-50%, -50%) rotate(180deg);} .flatpickr-months .flatpickr-prev-month{left: 1.5rem !important;} .flatpickr-months .flatpickr-next-month{right: 1.5rem !important;} .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover{background-color: var(--bg-blue) !important;} /* picker_wrap : E */ /* picker_wrap 월 : S */ .flatpickr-monthSelect-months{display: flex;justify-content: center;gap: .5rem 1rem;margin: 0 !important;} .flatpickr-monthSelect-month{width: 4rem !important;height: 4rem !important;font-size: 1.4rem !important;color: var(--color-333) !important;margin: 0 !important;padding: 0 !important;display: flex !important;align-items: center;justify-content: center !important;border-radius: 50% !important;transition: ease all .3s;} .flatpickr-monthSelect-month.today{color: var( --color-primary) !important;text-decoration: underline;text-underline-position: from-font;border-color: transparent !important;} .flatpickr-monthSelect-month:hover {background-color: var(--bg-blue) !important;border-color: var(--bg-blue) !important;} .flatpickr-monthSelect-month.selected{color: var(--color-white) !important;text-decoration: none;opacity: 1 !important;border: 1px solid var( --color-primary) !important;background: var( --color-primary) !important;} /* picker_wrap 월 : E*/ .custom_select .selected_label {display: flex;align-items: center;justify-content: space-between;height: 4rem;padding: 0 3rem 0 1.3rem;border: 1px solid var(--border-default);border-radius: 0.4rem;background: var(--color-white) url(/images/ico_select.png) no-repeat right 1rem center;font-size: 1.6rem;color: var(--color-333);} .custom_select .selected_label>span{width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 1.5rem;} .custom_select .dropdown_list {position: absolute;top: 4.5rem;left: 0;width: 100%;max-height: 15.2rem;overflow-y: auto;background: var(--color-white);border: 1px solid var(--border-default);border-radius: 0.4rem;z-index: 20;} /* title : S */ .h2 {font-size: 2.4rem;font-weight: 700;} .h3{position: relative;padding-left: 1.3rem;font-size: 1.5rem;} .h3:before{content: '';position: absolute;top: .8rem;left: 0;width: .4rem;height: .4rem;border-radius: 50%;background: #B3B3B3} .h3 span, .tit_inner .sub_txt{margin-left: .6rem;font-size: 1.4rem;color: var(--color-555); font-weight: 500;} .h3_tit{font-size: 1.6rem;} .h4_sub{font-size: 1.8rem;font-weight: 600;margin-bottom: 1rem;} .tit_box{display: flex;justify-content: space-between;flex-wrap: wrap;margin-bottom: 1.5rem;} .tit_box .tit_inner{display: flex;align-items: center;flex-wrap: wrap;} .tit_box .tit_inner .user_info_box{display: flex;align-items: center;position: relative;padding-left: 2rem;} .tit_box .tit_inner .user_info_box:before{content: '';position: absolute;top: 50%;left: 1rem;width: .1rem;height: 1.8rem;background: #C8C8C8;transform: translateY(-50%);} .tit_box .tit_inner .user_info_box .info{display: inline-flex;align-items: center;margin-left:1.5rem;padding: 0 .8rem;height: 2.8rem;border: 1px solid #BEBEBE;border: 1px solid #BEBEBE;color: var(--color-555);border-radius: .4rem;color: var(--color-555);font-size: 1.4rem;background: #F0F2F5;} .tit_box .tit_inner .user_info_box span{font-size: 2rem;line-height: 1.2;} .tit_box .search_area{display: flex;justify-content: flex-end;align-items: flex-end;flex-wrap: wrap;flex: auto;} .tit_box .btn_box{display: flex;justify-content: flex-end;flex-wrap: wrap;flex: auto;gap: .6rem;} .tit_box .btn_box input, .tit_box .btn_box select, .tit_box .btn_box .btn{height: 3rem;color: var(--color-333);background-color: var(--color-white);font-size: 1.4rem;} .tit_box .btn_box input[type="text"] {max-width: 13rem;} .tit_box .btn_box input[type="text"]+.btn.primary{position: relative;} .tit_box .btn_box input[type="text"]+.btn.primary:not(:last-child){margin-right: 1.4rem;} .tit_box .btn_box input[type="text"]+.btn.primary:not(:last-child)::after{content: '';position: absolute;top: 50%;right: -1.2rem;width: .1rem;height: 1.8rem;background: #C8C8C8;transform: translateY(-50%);} .tit_box .btn_box .btn.primary.line+*{margin-left: 0;} .tit_box .btn_box .line_group{display: flex;align-items: center;gap: .6rem;position: relative;margin-right: .4rem;padding-right: 1rem;} .tit_box .btn_box .line_group:before{content: '';position: absolute;top: 50%;right: 0;width: .1rem;height: 1.8rem;background: #C8C8C8;transform: translateY(-50%);} .tit_box .btn_box .line_group .btn.primary::after{content: none !important;} .tit_box .btn_box .line_group .count{display: inline-flex;align-items: center;gap: .3rem;} .tit_box .btn_box .line_group .count span{font-size: 1.4rem;} .tit_box .btn_box .line_group .count span b{padding-left: 4px;color: var( --color-primary);font-weight: 500;} .tit_box .btn_box .view_tab{display: inline-flex;align-items: center;gap: .2rem;position: relative;height: 3rem;margin-left: 1.1rem;padding: .3rem;border-radius: .6rem;background: #F0F2F5;} .tit_box .btn_box .view_tab::before{content: '';position: absolute;top: 50%;left: -.8rem;width: .1rem;height: 1.8rem;background: #C8C8C8;transform: translateY(-50%);} .tit_box .btn_box .view_tab label{display: flex;cursor: pointer;} .tit_box .btn_box .view_tab input{position: absolute;width: 1px;height: 1px;opacity: 0;clip: rect(0 0 0 0);clip-path: inset(50%);} .tit_box .btn_box .view_tab label span{display: inline-flex;align-items: center;position: relative;height: 2.4rem;padding: 0 1rem 0 2.9rem;border-radius: .4rem;font-size: 1.4rem;color: var(--color-888);transition: color .2s ease, background .2s ease, box-shadow .2s ease;} .tit_box .btn_box .view_tab label span::before{content: '';position: absolute;left: 1rem;top: 50%;transform: translateY(-50%);width: 1.4rem;height: 1.4rem;background: url(/images/ico_view.png);} .tit_box .btn_box .view_tab .v_card span::before{background-position: 0 0;} .tit_box .btn_box .view_tab .v_list span::before{background-position: 0 -13px;} .tit_box .btn_box .view_tab input:checked + span{color: var(--color-primary);background: var(--color-white);box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .12);} .tit_box .btn_box .view_tab .v_card input:checked + span::before{background-position: -13px 0;} .tit_box .btn_box .view_tab .v_list input:checked + span::before{background-position: -13px -13px;} .card .tit_box{margin-bottom: .6rem;min-height: 3rem;} .card .tit_box .custom_select .selected_label{height: 3rem;} .card .tit_box .custom_select .selected_label>span, .card .tit_box .custom_select .dropdown_list .check_radio label{font-size: 1.4rem;} .card .tit_box .custom_select .dropdown_list{top: 3.3rem;} .card .tit_box .pop_layer, .con_header .pop_layer{top: 3.5rem;left: auto;right: 0;transform: none;} .card .tit_box .btn_box .pop_layer input[type="text"], .con_header .pop_layer input[type="text"]{max-width: 100%;} .card .taxtype_btn{display: flex;flex-wrap: wrap;gap: 1rem;} .card .taxtype_btn .btn{min-width: 13rem;min-height: 4rem;font-size: 1.6rem;} .card .taxtype_btn .btn::before{content: '✓';margin-right: .6rem;font-weight: 700;color: #C0C6D0;} .card .taxtype_btn .btn.on{color: #4096FF;border-color: #5BA5FF;background-color: #E8F1FE;} .card .taxtype_btn .btn.on::before{color: #4096FF;} /* title : E */ /* bottom btn : S */ .bottom_btn_group{display: flex;justify-content: flex-end;gap: 1.5rem;margin-top: 4rem;} .bottom_btn_group .btn{min-width: 15rem;height: 5rem;padding: .6rem 2.5rem;border-radius: .8rem;font-size: 1.8rem;border-color: var(--color-888);color: var(--color-555);} .bottom_btn_group a.btn{display: inline-flex;align-items: center;justify-content: center;} /* bottom btn : E */ /* 스크롤바 디자인 */ .custom_select .dropdown_list::-webkit-scrollbar {width: 0.6rem;} .custom_select .dropdown_list::-webkit-scrollbar-thumb {background: #C1C1C1; border-radius: 1rem;} .custom_select .dropdown_list::-webkit-scrollbar-track {background: #F1F1F1;} .custom_select .dropdown_list .check_radio label {display: block;width: 100%;height: 3rem;padding: .3rem 1.2rem .3rem 3.2rem;transition: all ease 0.3s;font-size: 1.5rem !important;} .custom_select .dropdown_list .check_radio input[type="checkbox"]:checked+label::before{top: 1.3rem;left: 1.8rem;} .custom_select .dropdown_list .check_radio input[type="checkbox"]+label::after{top: .6rem;left: 1.3rem;} .custom_select .dropdown_list .check_radio label:hover{background-color: var(--bg-blue);} /* 제외 대상 선택: 드롭다운 + 선택 항목 표시 */ .excl_box{display: flex;align-items: center;gap: 1rem;position: relative;margin-left: 1.2rem;padding-left: 1.2rem;} .excl_box:before{content: '';position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 1px;height: 1.8rem;background-color: #C8C8C8;} .excl_box .custom_select{width: 14rem;} .excl_box .custom_select .selected_label{padding: 0 3rem 0 1rem;height: 2.8rem;font-size: 1.4rem;} .excl_box .custom_select .selected_label>span{font-size: 1.4rem;} .excl_box .custom_select .dropdown_list{top: 3.3rem;max-height: 10.8rem;opacity: 0;visibility: hidden;transform: translateY(-.6rem);transition: opacity .2s ease, transform .2s ease, visibility .2s;} .excl_box .custom_select.on .dropdown_list{opacity: 1;visibility: visible;transform: translateY(0);} .excl_box .custom_select .dropdown_list .check_radio label{padding: 0 1.2rem 0 2.9rem;height: 2.4rem;line-height: 2.4rem;border: 0;font-size: 1.4rem !important;} .excl_box .custom_select .dropdown_list .check_radio input[type="checkbox"]+label::after{left: 1rem;top: .45rem;} .excl_box .custom_select .dropdown_list .check_radio input[type="checkbox"]:checked+label::before{left: 1.5rem;top: 1.15rem;} .excl_box .excl_selected{display: flex;flex-wrap: wrap;gap: .6rem;} /* 버튼 드롭다운 (클릭 시 하위 버튼 펼침) */ .btn_dropdown{position: relative;display: inline-flex;} .btn_dropdown_menu{position: absolute;top: calc(100% + .4rem);left: 0;z-index: 30;display: flex;flex-direction: column;gap: .4rem;min-width: 100%;padding: .5rem;background: var(--color-white);border: 1px solid var(--border-default);border-radius: .6rem;box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .12);white-space: nowrap;opacity: 0;visibility: hidden;transform: translateY(-.6rem);transition: opacity .2s ease, transform .2s ease, visibility .2s;} .btn_dropdown.on .btn_dropdown_menu{opacity: 1;visibility: visible;transform: translateY(0);} .btn_dropdown_menu .btn{width: 100%;justify-content: center;} /* 분할 버튼: 텍스트 | 화살표 (select와 구분) */ .btn_dropdown > .btn{padding-right: 2.2rem;} .btn_dropdown > .btn::after{content: '';position: absolute;top: 50%;right: .9rem;width: 0;height: 0;border-left: .4rem solid transparent;border-right: .4rem solid transparent;border-top: .5rem solid currentColor;transform: translateY(-50%);transition: transform .2s ease;} .btn_dropdown.on > .btn::after{transform: translateY(-50%) rotate(180deg);} .excl_box .excl_selected span{display: inline-flex;align-items: center;height: 2.8rem;padding: 0 1.2rem;border-radius: 3rem;background: var(--bg-gray);font-size: 1.4rem;color: var(--color-555);} /* table : S */ .table_box{text-align: center;border: 1px solid var(--border-default);border-radius: 1rem;width: 100%;font-size: 1.4rem;line-height: 1.2;} .table_box table{width: 100%; border-collapse: collapse; border-style: hidden;min-height: 4rem;} .table_box table th{padding: .5rem 1rem;border: 1px solid var(--border-default);color: var(--color-111);background: var(--bg-gray); box-sizing: border-box;height: 4rem;} .table_box table thead th{border-top: none;} .table_box table thead th:first-child, .table_box table tbody tr td:first-child{border-left: none} .table_box table thead th:last-child, .table_box table tbody tr td:last-child{border-right: none;} .table_box table tbody tr:last-child td{border-bottom: none;} .table_box table thead tr:first-child th:first-child, .table_box table thead tr:first-child th:not([style*="display:none"]):not([style*="display: none"]):not(th:not([style*="display:none"]):not([style*="display: none"]) ~ *){border-top-left-radius: 1rem;} .table_box table thead tr:first-child th:last-child, .table_box table thead tr:first-child th:not([style*="display:none"]):not([style*="display: none"]):not(:has(~ th:not([style*="display:none"]):not([style*="display: none"]))){border-top-right-radius: 1rem;} .table_box table:not(:has(thead)) tbody:first-of-type tr:first-child>th:first-child, .table_box table:not(:has(thead)) tbody:first-of-type tr:first-child>td:first-child{border-top-left-radius: 1rem;} .table_box table:not(:has(thead)) tbody:first-of-type tr:first-child>th:last-child, .table_box table:not(:has(thead)) tbody:first-of-type tr:first-child>td:last-child{border-top-right-radius: 1rem;} .table_box table tbody th{padding: .8rem 1.5rem;border-left:none;height: 4rem;font-weight: 600;} .table_box table tbody tr:last-child th, .table_box table tbody tr:last-child td{border-bottom:none} .table_box table tbody tr:first-child th, .table_box table tbody tr:first-child td{border-top:none} .table_box table tbody:last-child tr:last-child>:first-child, .table_box table tbody:last-child tr:nth-last-child(2)>[rowspan="2"]:first-child, .table_box table tbody:last-child tr:nth-last-child(3)>[rowspan="3"]:first-child, .table_box table tbody:last-child tr:nth-last-child(4)>[rowspan="4"]:first-child, .table_box table tbody:last-child tr:nth-last-child(5)>[rowspan="5"]:first-child, .table_box table tbody:last-child tr:nth-last-child(6)>[rowspan="6"]:first-child, .table_box table tbody:last-child tr:nth-last-child(7)>[rowspan="7"]:first-child, .table_box table tbody:last-child tr:nth-last-child(8)>[rowspan="8"]:first-child, .table_box table tbody:last-child tr:nth-last-child(9)>[rowspan="9"]:first-child, .table_box table tbody:last-child tr:nth-last-child(10)>[rowspan="10"]:first-child, .table_box table tfoot:last-child tr:last-child>:first-child{border-bottom-left-radius: 1rem;} .table_box table tbody:last-child tr:last-child>:last-child, .table_box table tbody:last-child tr:nth-last-child(2)>[rowspan="2"]:last-child, .table_box table tbody:last-child tr:nth-last-child(3)>[rowspan="3"]:last-child, .table_box table tbody:last-child tr:nth-last-child(4)>[rowspan="4"]:last-child, .table_box table tbody:last-child tr:nth-last-child(5)>[rowspan="5"]:last-child, .table_box table tbody:last-child tr:nth-last-child(6)>[rowspan="6"]:last-child, .table_box table tbody:last-child tr:nth-last-child(7)>[rowspan="7"]:last-child, .table_box table tbody:last-child tr:nth-last-child(8)>[rowspan="8"]:last-child, .table_box table tbody:last-child tr:nth-last-child(9)>[rowspan="9"]:last-child, .table_box table tbody:last-child tr:nth-last-child(10)>[rowspan="10"]:last-child, .table_box table tfoot:last-child tr:last-child>:last-child{border-bottom-right-radius: 1rem;} .table_box table tbody th span{display: block;color: var(--color-555);font-size: 1.4rem;} .table_box table tbody td{padding: .6rem 1rem;height: 4rem;} .table_box table td{padding: 1rem .5rem;border: 1px solid var(--border-default);overflow-wrap: anywhere;word-break: break-all;} .table_box table tbody tr>*:last-child {border-right: none;} .table_box table tfoot th{border-bottom: none;border-left: none;color: var( --color-primary);background-color: var(--bg-blue);} .table_box table tfoot td{padding: 1.1rem 1.5rem;border-bottom: none;border-right: none;color: var( --color-primary);font-weight: 700;background-color: var(--bg-blue);} .table_box .sum, .table_box .sum td{color: var( --color-primary);font-weight: 600;background-color: var(--bg-blue);} .table_box .sub_total, .table_box table .sub_total th{background-color: #F2F5F9;} .table_box .bg_red, .table_box table .bg_red th{background-color: var(--bg-red);} .table_box .bg_non{color: var(--color-555);background-color: var(--bg-gray);} .table_box select{height: 2.6rem;width: 100%;padding: 0rem 2.5rem 0rem 1rem;background: var(--color-white) url(/images/ico_select.png) no-repeat right .8rem center;font-size: 1.4rem;} .table_box table .btn{padding: .2rem 1rem;height: 2.6rem;min-width: 5.6rem;background: var(--color-white);font-size: 1.4rem;line-height: 1.5;} .table_box table .btn:hover{background: #EEF1F5;} .table_box table input[type="text"], .table_box table input[type="password"], .table_box table input[type="email"]{height: 2.6rem;width: 100%;font-size: 1.4rem;} .table_box .tal{text-align: left;} .table_box .tar{text-align: right;} .table_box .tac{text-align: center;} .table_flex{display: flex;gap: 3rem;} .table_box .top_line{border-top: 2px solid var(--color-555);} .table_box .picker_wrap{width: 100%;} .table_box .check_radio label{padding-left: 2rem;font-size: 1.4rem !important;} .table_box .check_radio.only_chk label{padding-left: 1.6rem;} .table_box .picker_wrap .form-input{padding-right: 3rem !important;font-size: 1.4rem;} .table_box .picker_wrap .btn_cal{height: 2.6rem;width: 2.6rem;right: 0.3rem;background: transparent url(/images/ico_cal.png) no-repeat center / 1.6rem;} .table_box .help_box{margin-left:0;} .table_box.autotbl:has(> table) {overflow-x: auto;} .table_box.autotbl table {min-width: max-content;width: 100%;border-collapse: collapse;} .table_box.autotbl th, .table_box.autotbl td {white-space: nowrap;font-size: 1.4rem;} .table_box::-webkit-scrollbar{height: 0.6rem;} .table_box::-webkit-scrollbar { width: 0.6rem; } .table_box::-webkit-scrollbar-thumb { background: #C1C1C1; border-radius: 1rem; } .table_box::-webkit-scrollbar-track { background: #F1F1F1; } .table_box.tbl_form{text-align: left;} .table_box.tbl_form tbody tr:first-child>th:first-child{border-top-left-radius: 1rem;} .table_box.tbl_form tbody tr:last-child>th:first-child{border-bottom-left-radius: 1rem;} .table_box.tbl_form .flex{flex-wrap: wrap;gap: .4rem;} .table_box.tbl_form .flex input[type="text"], .table_box.tbl_form .flex input[type="passwordtext"], .table_box.tbl_form .flex input[type="password"], .table_box.tbl_form .flex input[type="email"]{flex: 1;} .table_box.tbl_form th .flex>span{color: var(--color-111);font-weight: 600;} .table_box .password_wrapper .password_toggle{display: flex;align-items: center;justify-content: center;width: 2.6rem;height: 2.6rem;padding: 0;} .table_box .password_wrapper .password_toggle>svg{width: 1.7rem;height: 1.7rem;} /* table : E */ /* grid : S */ .grid_box {width: 100%; margin-top: .6rem; font-size: 1.5rem;} .tui-grid-cell .tui-grid-cell-content{white-space: nowrap;text-overflow: ellipsis;} .grid-tooltip{position: absolute;padding: .3rem .8rem;background: #1F2937;color: #fff;font-size: 1.3rem;font-weight: 500;line-height: 1.5;border-radius: .6rem;box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .25);max-width: min(40rem, calc(100vw - 2rem));box-sizing: border-box;white-space: normal;word-break: break-all;overflow-wrap: anywhere;pointer-events: none;opacity: 0;visibility: hidden;transform: translateY(-4px);transition: opacity .15s ease, visibility .15s, transform .15s ease;z-index: 30;} .grid-tooltip::before{content: '';position: absolute;top: -.4rem;left: 1.4rem;width: .8rem;height: .8rem;background: #1F2937;transform: rotate(45deg);} .grid-tooltip.show{opacity: 1;visibility: visible;transform: translateY(0);} .grid_box tr.tui-grid-row-hover td {background-color: #FFFCE6 !important;} .grid_box td{padding: .4rem;border: 1px solid var(--border-default);} .grid_box td .btn{font-size: 1.4rem;color: var(--color-333);background-color: var(--color-white);padding: .4rem 1rem;} .grid_box td .btn.ico{padding-left: 2.9rem;} .grid_box .tui-grid-content-area{text-align: center;border: 1px solid var(--border-default);border-radius: 1rem;overflow: hidden;} .grid_box .check_radio label{min-height: 2.2rem;padding-left: 1.6rem;} .grid_box .tui-grid-border-line-top{border-top: none;} .grid_box .tui-grid-header-area .tui-grid-cell-row-header, .grid_box .tui-grid-header-area .tui-grid-cell-header{padding: 0 1rem;border: 1px solid var(--border-default);border-top-color: var(--bg-gray);font-size: 1.4rem;color: var(--color-111);background: var(--bg-gray);white-space: normal;line-height: 1.1;} .grid_box .tui-grid-cell{background-color: var(--color-white);} .grid_box .tui-grid-summary-area { background-color: #f8fafc !important; font-weight: bold; } .grid_box .tui-grid-cell-editable .tui-grid-cell-content {display: flex;align-items: center;padding: 0 1rem;min-height: 3.2rem;border: 1px solid var(--border-default); border-radius: .4rem;transition: all 0.2s;font-size: 1.4rem;background: var(--color-white);} .grid_box .tui-grid-cell-editable:hover .tui-grid-cell-content {border-color: var( --color-primary);} .grid_box .tui-grid-cell-content input[type='text'], .grid_box .tui-grid-cell-content input[type='password']{font-family: 'Pretendard GOV', 'NotoSansKR', '맑은 고딕', 'Malgun Gothic', sans-serif;font-size: 1.4rem;height: 3rem !important;padding: 0 1rem;} .grid_box .tui-grid-layer-editing{border: none !important; box-sizing: border-box;background: transparent;display: flex;align-items: center;height: 40px !important;} .grid_box .tui-grid-layer-focus-border{background: none !important;box-sizing: border-box;} .grid_box .tui-grid-cell-has-input .tui-grid-cell-content{padding: 0 .5rem;font-size: 1.4rem;} /* 아래 두줄은 그리드 선택 bg */ .grid_box .tui-grid-cell-row-header.tui-grid-cell-selected, .grid_box .tui-grid-layer-selection{background-color: transparent !important;border-color: var(--border-default);} .grid_box .tui-pagination .tui-page-btn{display: inline-flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;padding: 0;border-radius: .4rem;border-color: transparent;font-size: 1.4rem;transition: ease .3s;box-sizing: border-box;} .grid_box .tui-pagination .tui-page-btn .tui-ico-ellip{margin-top: 0 !important;} .grid_box .tui-pagination .tui-page-btn:hover{background-color: var(--bg-blue) !important;} .grid_box .tui-pagination .tui-page-btn.tui-is-disabled{background-color: var(--bg-disabled) !important;} .grid_box .tui-pagination .tui-page-btn.tui-is-disabled:hover{background-color: var(--bg-disabled) !important;} .grid_box .tui-pagination{display: flex;align-items: center;justify-content: center;gap: .4rem;height: auto !important;margin-top: 2.5rem !important;} .grid_box .tui-pagination .tui-page-btn.tui-is-selected{background-color: #7C8DA4 !important;color: var(--color-white);} .grid_box .tui-pagination .tui-prev{margin-right: 1.2rem !important;} .grid_box .tui-pagination .tui-next{margin-left: 1.2rem !important;} .grid_box .tui-pagination .tui-page-btn.tui-first, .grid_box .tui-pagination .tui-page-btn.tui-prev, .grid_box .tui-pagination .tui-page-btn.tui-next, .grid_box .tui-pagination .tui-page-btn.tui-last{height: 2.4rem;width: 2.4rem;border:1px solid #BEBEBE;box-sizing: border-box;} .grid_box .tui-pagination .tui-ico-first, .grid_box .tui-pagination .tui-ico-last{width: 1.3rem;height: 1.3rem;background: url(/images/ico_page1.png) 0 0 no-repeat;} .grid_box .tui-pagination .tui-ico-prev, .grid_box .tui-pagination .tui-ico-next{width: 1.3rem;height: 1.3rem;background: url(/images/ico_page2.png) 0 0 no-repeat;} .grid_box .tui-pagination .tui-is-disabled .tui-ico-first, .grid_box .tui-pagination .tui-is-disabled .tui-ico-last{width: 1.3rem;height: 1.3rem;background: url(/images/ico_page1_dis.png) 0 0 no-repeat;} .grid_box .tui-pagination .tui-is-disabled .tui-ico-prev, .grid_box .tui-pagination .tui-is-disabled .tui-ico-next{width: 1.3rem;height: 1.3rem;background: url(/images/ico_page2_dis.png) 0 0 no-repeat;} .grid_box .tui-pagination .tui-ico-next, .grid_box .tui-pagination .tui-is-disabled .tui-ico-next{transform: rotate(180deg);} .grid_box .tui-pagination .tui-ico-last, .grid_box .tui-pagination .tui-is-disabled .tui-ico-last{transform: rotate(180deg);} .tui-grid-border-line-bottom{border-color: var(--border-default) !important;} .tui-grid-no-scroll-x .tui-grid-border-line-bottom{border-bottom: 1px solid transparent !important;} .grid_box .tui-grid-header-area{border-color: var(--border-default);} .grid_box .tui-grid-table{border-bottom: 1px hidden transparent !important;} /* .grid_box .tui-grid-header-area{height: auto !important;min-height: 50px;} .grid_box .tui-grid-header-area .tui-grid-table tbody tr{height: auto !important;min-height: 50px;} */ .grid_box .tui-grid-body-area{height: auto !important;min-height: 5.8rem;} .grid_box .tui-grid-no-scroll-x .tui-grid-body-area{min-height: 4rem;} .grid_box .tui-grid-frozen-border{background-color: var(--color-333) !important;} .grid_box .tui-grid-frozen-border::after{content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 6px solid var(--color-333);} .grid_box .tui-grid-rside-area{min-height: 8rem;} .grid_box .tui-grid-layer-state{height: 4rem !important;border-top: 1px solid var(--border-default);border-left:none;background: transparent;} .grid_box .tui-grid-layer-state p{font-family: 'Pretendard GOV', '나눔고딕', 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic';font-size: 1.5rem;color: var(--color-555);transform: translateY(-50%);margin-top: 0;} .tui-grid-layer-state-content{padding-top: 30px;} .grid_box .sum, .grid_box .sum td{background-color: var(--bg-blue) !important;} .grid_box .selected td, .grid_box .selected{background-color: #FFFCE6 !important;} .grid_box .tui-grid-layer-selection{display: none !important;} .grid_box .link_text{display: inline-block;max-width: 100%;padding: 0 .5rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;box-sizing: border-box;} .always_input_renderer {width: 100%;display: flex;align-items: center;box-sizing: border-box;padding: 0 4px;} .always_input_renderer input, .always_input_renderer select {width: 100%;height: 26px;padding: 0 8px;border: 1px solid #d1d5db;border-radius: 4px;box-sizing: border-box;font: inherit;font-size: 1.4rem;outline: none;margin-bottom: 0;text-align: inherit;background-color: var(--color-white);color: var(--color-333);} .always_input_renderer select {text-align: left;cursor: pointer;appearance: none;background: var(--color-white) url(/images/ico_select.png) no-repeat right 6px center;padding-right: 2.3rem;} .always_input_renderer input:focus, .always_input_renderer select:focus{border-color: var( --color-primary) !important;} .link_text {color: var( --color-primary); text-decoration: underline; text-underline-position: from-font; cursor: pointer;font-size: 1.4rem;font-weight: 600;} .grid_box .picker_wrap{width: 100%;padding: 0 4px;box-sizing: border-box;} .grid_box .picker_wrap .form-input{height: 2.6rem;padding-right: 3rem !important;font-family: 'Pretendard GOV', '나눔고딕', 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic';font-size: 1.4rem;} .grid_box .picker_wrap .btn_cal{height: 2.6rem;width: 2.6rem;right: .7rem;background: transparent url(/images/ico_cal.png) no-repeat center / 1.6rem;box-sizing: border-box;} .grid_box .g_badge{display: inline-block;font-size: 1.3rem;padding: .3rem 1rem;border-radius: 2rem;} .grid_box .g_badge.red{color: var(--color-red);background: var(--bg-red);} .grid_box .g_badge.blue{color: var(--color-primary);background: var(--bg-blue);} /* grid : E */ /* tab_box01 : S */ .tab_box01{display: flex;align-items: center;flex-wrap: wrap;margin-bottom: 2rem;border-radius: .6rem .6rem 0 0;background-color: #F5F6F9;} .tab_box01 button{padding: 1rem 2rem;font-size: 1.5rem;color: #999EAA;min-width: 13rem;border-radius: .6rem .6rem 0 0;transition: all 0.3s;} .tab_box01 button:hover{background-color: var(--bg-blue);} .tab_box01 button.on{background-color: var(--color-skyblue);color: var(--color-white);} /* tab_box01 : E */ /* corp_info : S */ .corp_info{display: flex;flex-wrap: wrap;align-items: center;gap: .6rem 2.4rem;padding-bottom: .5rem;margin-bottom: .5rem;border-bottom: 1px solid var(--border-default);} .corp_info dl{display: inline-flex;align-items: center;gap: .8rem;position: relative;} .corp_info dl::before{content: '';width: .4rem;height: 1.3rem;border-radius: 2rem;background: #97C6FF;} .corp_info dt{font-size: 1.4rem;color: var(--color-555);font-weight: 500;} .corp_info dd{font-size: 1.6rem;color: var(--color-333);font-weight: 700;} .tab_box01+.corp_info{margin-top: -.6rem;} /* corp_info : E */ /* tab_box02 : S */ .tab_box02 {display: flex;flex-wrap: wrap;align-items: center;gap: .5rem 2rem;margin-bottom: 1rem;padding-bottom: 1rem;border-bottom: 1px solid var(--border-default);} .tab_box02 button {position: relative;padding: 0;border-color: transparent;font-size: 1.5rem;color: var(--color-888);transition: color 0.2s ease;white-space: nowrap;border-radius: 2rem;padding: .8rem 1rem;transition: ease all .3s;} .tab_box02 button:not(:last-child)::after {content: '';position: absolute;right: -12px;top: 16px;width: 3px;height: 3px;border-radius: 50%;background: var(--border-default);} .tab_box02 button:hover {color: var(--color-555);background: #fafaff;} .tab_box02 button.on {padding-left: 2.5rem;color: var(--color-primary-hover);font-weight: 600;background: #e8ebff;} .tab_box02 button.on::before {content: '';position: absolute;top: 11px;left: 13px;transform: rotate(45deg);width: .4rem;height: .7rem;border-right: 2px solid var(--color-primary-hover);border-bottom: 2px solid var(--color-primary-hover);} /* tab_box02 : E */ /* tab_box03 : S */ .tab_box03_wrap {display: inline-flex;align-items: center;gap: .6rem;margin-left: .6rem;} .tab_box03{display: inline-flex;align-items: center;border-radius: .4rem;height: 4rem;padding: .5rem;background: var(--bg-gray);} .tab_box03 button {padding: 0 1.5rem;height: 3rem;border: none;border-radius: .4rem;color: var(--color-555);font-size: 1.4rem;font-weight: 600;transition: all .3s;} .tab_box03 button:hover { background: rgba(47, 128, 245, .12); } .tab_box03 button.on{color: var(--color-skyblue);background: var(--color-white);} /* tab_box03 : E */ /* 파일찾기 : S */ .file_box{display: flex;align-items: center;gap: 1rem;background: var(--bg-blue_box);padding: 1.7rem 2rem; border-radius: 1rem;} .file_box > .file_zone{display: inline-flex;align-items: center;gap: 1rem;box-sizing: border-box;border-radius: 1rem;} .file_box > .file_zone input[type="file"]{display: none;} .file_box > .file_zone .file_name{min-width: 33rem;font-size: 1.4rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;background: #fff;border: 1px solid #D9D9D9;border-radius: .4rem;color: #555;padding: .6rem 1rem;font-size: 1.5rem;} .file_box > .file_zone .file_name.placeholder{color: #555;} .file_box > .file_zone label{height: 3.6rem;font-size: 1.5rem;border: 1px solid #888;display: inline-block;position: relative;padding: .6rem 1rem;border-radius: .4rem;background: #fff;min-width: 8rem;text-align: center; cursor: pointer;} .file_box > .btn.primary{height: 4.4rem;min-width: 8rem;padding: 0 2rem;font-size: 1.5rem;} .file_box .btn.primary{height: 3.6rem;} /* 파일찾기 : E */ /* switch_box : S */ .switch_box{display: flex;align-items: center;margin-left: 2rem;} .switch_box label{display: flex;align-items: center;gap: .4rem;cursor: pointer;font-size: 1.4rem;font-weight: 600;color: var(--color-333);} .switch_box .switch_btn{position: relative;display: inline-block;width: 3.2rem;height: 2rem;background-color: #E2E2E2;border-radius: 2.2rem;transition: all 0.3s ease;} .switch_box .switch_btn:before{content: '';position: absolute;top: 50%;left: 0.2rem;transform: translateY(-50%);width: 1.6rem;height: 1.6rem;background-color: var(--color-white);border-radius: 50%;box-shadow: 0 2px 4px rgba(0,0,0,0.1);transition: all 0.3s ease;} .switch_box input:checked + label .switch_btn{background-color: var(--color-skyblue);} .switch_box input:checked + label .switch_btn:before{left: 1.4rem;} /* switch_box : E */ /* help_box : S */ .help_box{position: relative;margin-left: .5rem;} .help_box button{width: 1.7rem;height: 1.7rem;border: 1px solid var(--color-555);border-radius: 50%;background-color: transparent;font-size: 0;font-weight: 700;color: var(--color-555);display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;padding: 0;} .help_box button::before{content: '?';position: absolute;left: 5px;top: 2px;font-size: 1.2rem;font-weight: 700;color: var(--color-555);} .help_box .help_con{display: none;position: absolute;top: 50%;left: 2.3rem;width: max-content;padding: .3rem 2.7rem .3rem 1.2rem;transform: translateY(-50%);background-color: var(--bg-blue_box);border: 1px solid #97C6FF;border-radius: .8rem;z-index: 50;font-size: 1.3rem;line-height: 1.6;color: var(--color-333);white-space: normal;word-break: keep-all;box-shadow: 0 0.5rem .5rem 0 rgba(0, 0, 0, 0.1);} .help_box .help_con:before{content: '';position: absolute;top: 50%;left: -0.6rem;transform: translateY(-50%) rotate(45deg);width: 1rem;height: 1rem;background-color: var(--color-white);border-left: 1px solid var(--border-default);border-bottom: 1px solid var(--border-default);} /* JS(style.js)가 오른쪽 공간 부족 시 부여: 버튼 왼쪽으로 펼침 + 화살표 오른쪽으로 */ .help_box .help_con.flip{left: auto;right: 2.3rem;} .help_box .help_con.flip:before{left: auto;right: -0.6rem;border-left: 0;border-bottom: 0;border-right: 1px solid var(--border-default);border-top: 1px solid var(--border-default);} .help_box.on .help_con{display: block;} .help_box.type2>button{border-color: #E93636;color: #E93636;} .help_box.type2>button::before{content: '!';left: 6px;color: #E93636;} .help_box.type2 .help_con{border-color: #FFE5E5;background-color: var(--bg-red);box-shadow: none;} .help_box .btn_close{position: absolute; top: 0.5rem; right: 0.5rem; width: 1.6rem; height: 1.6rem; border: 0;} .help_box .help_con:before{display: none;} .help_box .btn_close::before, .help_box .btn_close::after{content: ''; position: absolute; top: 50%; left: 50%; width: 1.2rem; height: 0.1rem; background-color: var(--color-555);} .help_box .btn_close::before{transform: translate(-50%, -50%) rotate(45deg);} .help_box .btn_close::after{transform: translate(-50%, -50%) rotate(-45deg);} /* 정보 리스트 팝업 (help_box + help_list) */ .help_box.help_list > button{border: none;background: var(--color-primary);} .help_box.help_list > button::before{content: 'i';left: 7px;font-style: normal;color: var(--color-white);font-weight: 600;} .help_box.help_list .help_con{overflow: visible;flex-direction: column;position: absolute;top: -1.3rem;left: 2.8rem;right: auto;bottom: auto;transform: none;width: 38rem;padding: 0;font-size: 1.3rem;background-color: var(--color-white);border: none;border-radius: .6rem;box-shadow: 0 1rem 3rem -.8rem rgba(0, 47, 130, .28);z-index: 55;} .help_box.help_list.on .help_con{display: flex;} .help_box.help_list .help_con::before{content: '';display: block;position: absolute;top: 1.4rem;left: -.6rem;width: 1.4rem;height: 1.4rem;background: var(--color-white);border: none;transform: rotate(45deg);box-shadow: -.3rem .3rem .6rem rgba(0, 47, 130, .06);} .help_box.help_list .help_con .rep{display: flex;align-items: center;gap: 1.2rem;padding: 1rem 3rem .8rem 1.5rem;border-bottom: 1px solid #EEF1F5;} .help_box.help_list .help_con .rep_ico{flex-shrink: 0;width: 3rem;height: 3rem;border-radius: 50%;background: #EAF1FD;position: relative;} .help_box.help_list .help_con .rep_ico:before{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1.6rem;height: 1.6rem;background: url(/images/ico_menu.png);background-position: -20px -37px;} .help_box.help_list .help_con .rep_txt{flex: 1;min-width: 0;display: flex;flex-direction: column;line-height: 1.25;} .help_box.help_list .help_con .rep_txt span{font-size: 1.3rem;font-weight: 600;color: var(--color-primary);} .help_box.help_list .help_con .rep_txt strong{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 1.6rem;font-weight: 700;color: var(--color-111);} .help_box.help_list .help_con dl{display: grid;grid-template-columns: 1fr 1fr;gap: .5rem 1rem;padding: 1rem 1.5rem 1rem;} .help_box.help_list .help_con dl > div{display: flex;flex-direction: row;align-items: center;gap: .8rem;min-width: 0;} .help_box.help_list .help_con dt{flex-shrink: 0;width: 6rem;font-size: 1.3rem;color: var(--color-888);} .help_box.help_list .help_con dd{flex: 1;min-width: 0;font-size: 1.4rem;font-weight: 600;color: var(--color-111);} .help_box.help_list .help_con dd .tag{display: inline-flex;align-items: center;padding: .3rem 1.2rem;border-radius: 3rem;background: var(--bg-blue);font-size: 1.3rem;font-weight: 600;color: var(--color-primary);} .help_box.help_list .btn_close{top: 1.6rem;right: 1.6rem;} /* help_box : E */ /* badge_box : S */ .badge_box {display: flex;align-items: center; flex-wrap: wrap;margin-bottom: 2rem;margin-top: -5px;border-bottom: 1px solid #eee;padding-bottom: .5rem;} .badge_box .fixed_group {display: flex; gap: 0.6rem; flex-shrink: 0;position: relative;margin: 5px 0;margin-right: 1.2rem;padding-right: 1.2rem;} .badge_box .fixed_group:before{content: '';position: absolute;top: 50%;right:0;transform: translateY(-50%);width: 1px;height: 1.8rem;background-color: #C8C8C8;} .badge_box .slider_group {position: relative;margin: 5px 0;} .badge_box .slider_wrapper {display: flex;flex-wrap: wrap;gap: 0.6rem;} .badge_box .badge_item {display: inline-flex; align-items: center; justify-content: center;height: 2.8rem; padding: 0 1.5rem; border: 1px solid var(--border-default); border-radius: 2rem;background: var(--color-white); font-size: 1.4rem; color: #666; cursor: pointer; white-space: nowrap; transition: all 0.3s;flex-shrink: 0;} .badge_box .badge_item:hover {background-color: var(--bg-blue);} .badge_box .badge_item.on {background: rgba(47,128,245,.06);border-color: #97C6FF;color: var(--color-skyblue);font-weight: 600;} .badge_box .slider_nav {display: flex; gap: 0.2rem; flex-shrink: 0; padding-left: 1rem; background: var(--color-white);display: none;} .badge_box .nav_btn {display: flex; align-items: center; justify-content: center;position: relative;width: 2.8rem; height: 2.8rem;border: none; border-radius: 0.4rem; cursor: pointer; transition: ease all 0.3s;font-size: 0;background: #EBF2FF;} .badge_box .nav_btn::before{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: .5rem;height: .8rem;background: url(/images/ico_arrow1.png) 0 0 no-repeat;} .badge_box .nav_btn:last-child::before{transform: translate(-50%,-50%) rotate(180deg);} .badge_box .nav_btn:hover {background: #DCE8FF;} .badge_box .nav_btn img {width: 1.2rem; height: 1.2rem;} .badge_box .nav_btn.disabled {cursor: default;background-color: var(--color-white);} .badge_box .nav_btn.disabled::before{background: url(/images/ico_arrow2.png) 0 0 no-repeat;} /* 제외 대상 선택 (emp_exdd) — badge_box 안 다중선택 드롭다운 */ .badge_box .emp_exdd{position: relative;} .badge_box .emp_exdd>.badge_item{display: inline-flex;align-items: center;gap: .5rem;} .badge_box .emp_exdd .emp_exdd_badge{display: inline-flex;align-items: center;justify-content: center;min-width: 1.8rem;height: 1.8rem;padding: 0 .5rem;border-radius: 2rem;background: var(--color-primary);color: var(--color-white);font-size: 1.2rem;font-weight: 600;line-height: 1;box-sizing: border-box;} .badge_box .emp_exdd .emp_exdd_caret{font-size: 1rem;color: var(--color-888);line-height: 1;} .badge_box .emp_exdd>.badge_item.on .emp_exdd_caret{color: var(--color-primary);} .badge_box .emp_exdd .emp_exdd_panel{position: absolute;top: calc(100% + .6rem);left: 0;z-index: 60;min-width: 22rem;padding: .6rem;background: var(--color-white);border: 1px solid var(--border-default);border-radius: .8rem;box-shadow: 0 1rem 3rem -.8rem rgba(0, 47, 130, .28);box-sizing: border-box;opacity: 0;visibility: hidden;transform: translateY(-.6rem);transition: opacity .2s ease, transform .2s ease, visibility .2s;} .badge_box .emp_exdd.on .emp_exdd_panel{opacity: 1;visibility: visible;transform: translateY(0);} .badge_box .emp_exdd .emp_exdd_opt{padding: .3rem .8rem;border-radius: .4rem;white-space: nowrap;} .badge_box .emp_exdd .emp_exdd_opt:hover{background: var(--bg-blue);} .badge_box .emp_exdd .emp_exdd_opt.all{margin-bottom: .3rem;border-bottom: 1px solid #EEF1F5;} /* badge_box : E */ /* infor_area :S */ .infor_area {display: flex; gap: 1.5rem;} .infor_area .info_box {flex: 1; display: flex; flex-direction: column; gap: 0.6rem; justify-content: center;background-color: var(--bg-blue_box);border-radius: 1rem;padding: 1.6rem 2.5rem;} .infor_area .info_box dl {display: flex; align-items: center;} .infor_area .info_box dt {width: 11rem; font-size: 1.5rem; color: var(--color-111);line-height: 1.2;} .infor_area .info_box dd {display: flex;align-items: center;flex: 1;width: 100%; height: 3rem; padding: 0 1.2rem; border-radius: 0.4rem; background-color: var(--color-white); } .infor_area .info_box dd span {font-size: 1.4rem; color: var(--color-333); font-weight: 500;width: 100%;} .infor_area .tax_box {flex: 2; display: flex; gap: 2rem;background-color: var(--bg-blue_box);border-radius: 1rem;padding: 2rem 2.5rem;} .infor_area .tax_box .item {flex: 1; display: flex; flex-direction: column; gap: 0.8rem;} .infor_area .tax_box .label {font-size: 1.7rem; color: var(--color-111); font-weight: 600;} .infor_area .tax_box .value {height: 5.9rem; display: flex; align-items: center; justify-content: flex-end; padding: 0 1.5rem; background-color: var(--color-white); border-radius: 0.8rem; gap: 0.5rem;} .infor_area .tax_box .num {font-size: 2.6rem; color: var( --color-primary); font-weight: 800; letter-spacing: -0.05rem;} .infor_area .tax_box .unit {font-size: 1.5rem; color: var(--color-333); font-weight: 500; margin-top: 0.5rem;} .infor_area.type2 .info_box{flex-direction: row;flex-wrap: wrap;gap: .6rem 4rem;} .infor_area.type2 .info_box dl{flex: 1;} .infor_area.type2 .info_box dt{display: inline-block;margin-right: 1rem;width: auto;white-space: nowrap;} .infor_area.type2 .info_box dd{min-width: 20rem;white-space: nowrap;} /* infor_area :E */ /* 주제별 고용현황 요약카드 :S */ .sum_list{display: flex;flex-wrap: wrap;gap: 1rem;} .sum_list .sum_item{flex: 1 1 20rem;display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 1.4rem 2rem;border: 1px solid transparent;border-radius: 1rem;background: var(--bg-gray);cursor: pointer;transition: border-color .2s ease, background .2s ease;} .sum_list .sum_item:hover{border-color: #5BA5FF;} .sum_list .sum_item.on{border-color: #5BA5FF;background: var(--color-white);} .sum_list .sum_item .label{position: relative;text-align: left;word-break: keep-all !important;font-size: 1.5rem;color: var(--color-555);line-height: 1.2;transition: ease all .2s;} .sum_list .sum_item.on .label{color: var(--color-primary);} .sum_list .sum_item .value{display: inline-flex;align-items: baseline;flex: 1;justify-content: flex-end;gap: .3rem;white-space: nowrap;font-size: 1.4rem;color: var(--color-555);} .sum_list .sum_item .value b{font-size: 2.2rem;font-weight: 700;color: var(--color-111);letter-spacing: -.05rem;} .sum_list .sum_item.on .value b{color: var(--color-primary);} .sum_list .sum_item.on .label::before {content: '';position: absolute;top: -1px;left: 0;width: 2rem;height: 2rem;border-radius: 50%;background: var(--color-primary);} .sum_list .sum_item.on .label {color: var(--color-primary);font-weight: 700;padding-left: 2.5rem;} .sum_list .sum_item.on .label::after {content: '';position: absolute;top: 4px;left: 5px;width: .8rem;height: .4rem;border-bottom: 2px solid var(--color-white);border-left: 2px solid var(--color-white);transform: rotate(315deg);} .sum_list .sum_item.on .label {color: var(--color-primary);font-weight: 700;} .sum_list+.badge_box{margin-top: 1.5rem;} /* 주제별 고용현황 요약카드 :E */ /* setup_box :S */ .setup_box ul{display: flex;gap: 1.6rem;} .setup_box ul li{display: flex;flex-direction: column;flex: 1;position: relative;min-height:25.7rem;padding: 2rem 2.5rem;border: 1px solid var(--border-default);border-radius: 1rem;transition: 0.3s all ease;background-color: var(--color-white);} .setup_box ul li:hover{box-shadow: 0 0.5rem 1.6rem 0 rgba(0, 0, 0, 0.15);border: 1px solid var(--color-skyblue);} .setup_box ul li.empty{border: 1px dashed #C7C7C7;background-color: var(--bg-gray);} .setup_box ul li.empty:hover{box-shadow: none;} .setup_box .setup_header{margin-bottom: 1rem;} .setup_box .setup_header .setup_tit{display: flex;gap: 1rem;flex-wrap: wrap;align-items: center;margin-right: 3rem;} .setup_box .setup_header .setup_tit h4{font-size: 1.8rem;font-weight: 600;color: #111;line-height: 1.2;} .setup_box .setup_header .state{font-size: 1.4rem;padding: 0.2rem .9rem;border-radius: .4rem;height: 2.8rem;display: inline-flex;align-items: center;justify-content: center;background-color: #F2F2F2;color: var(--color-disabled);} .setup_box .setup_header .state.state_done{background-color: #E7F9E7;color: #0A9060;} .setup_box .btn_del{position: absolute;right: 2.5rem;top: 2rem;width: 2.8rem;height: 2.8rem;border: 0;border-radius: .4rem;font-size: 0;transition: 0.3s all ease;background: url(/images/ico_del.png) no-repeat;} .setup_box .btn_del:hover{background-color: var(--bg-blue);} .setup_box .setup_logo{display: flex;align-items: center;justify-content: center;min-height: 5rem;margin-top: 1rem;} .setup_box .setup_logo img{max-width: 100%;max-height: 100%;} .setup_box .setup_info{display: grid;grid-template-columns: 6rem 1fr;row-gap: .8rem;column-gap: 1rem;padding-top: 1rem;border-top: 1px dashed #C8C8C8;font-size: 1.5rem;} .setup_box .setup_info dt{color: var(--color-111);} .setup_box .setup_info dd{color: var(--color-555);line-height: 1.5;overflow-wrap: anywhere;} /* setup_box :E */ /* 카드형 목록 :S */ .card_list ul{display: grid;grid-template-columns: repeat(auto-fill, minmax(max(25rem, (100% - 6.4rem) / 5), 1fr));gap: 1.6rem;} .card_list ul li{position: relative;} .card_list .card_item{display: flex;flex-direction: column;position: relative;height: 100%;padding: 2rem 2.5rem;border: 1px solid var(--border-default);border-radius: 1.2rem;background: var(--color-white);color: inherit;text-decoration: none;transition: border-color .25s ease, box-shadow .25s ease;cursor: pointer;min-height: 22.2rem;} .card_list .card_item:hover{border-color: var(--color-primary);box-shadow: 0 .6rem 1.8rem -.6rem rgba(0, 85, 233, .18);} .card_list .card_item.on, .card_list li:has(input:checked) .card_item{border-color: var(--color-primary);box-shadow: 0 0 0 1px var(--color-primary);} .card_list .card_item.no_data{justify-content: center;align-items: center;color: var(--color-888);cursor: default;background: var(--bg-gray2);pointer-events: none;} .card_list .card_item.no_data:hover{border-color: var(--border-default);box-shadow: none;} .card_list .card_top{display: flex;align-items: center;gap: .6rem;padding-left: 2.2rem;margin-right:5rem;margin-bottom: .8rem;min-height: auto !important;} .card_list .card_tag{display: flex;align-items: center;gap: .5rem;font-size: 1.4rem;color: var(--color-555);} .card_list .card_tag span:not(:last-child)::after{content: ',';margin-left: .3rem;} .card_list .state{display: inline-flex;align-items: center;justify-content: center;position: absolute;top: 1.6rem;right: 1.8rem;height: 2.6rem;padding: 0 1rem;border-radius: .5rem;font-size: 1.3rem;font-weight: 500;background: #F2F2F2;color: var(--color-888);} .card_list .state.state_done{background: #E7F9E7;color: #0A9060;} .card_list .state.state_part{background: var(--bg-blue);color: var(--color-primary);} .card_list .state.state_error{background: var(--bg-red);color: var(--color-red);} .grid_box .state, .dash_staff .state{display: inline-flex;align-items: center;justify-content: center;height: 2.4rem;padding: 0 1rem;border-radius: .5rem;font-size: 1.3rem;font-weight: 500;background: #F2F2F2;color: var(--color-888);} .grid_box .state.state_done, .dash_staff .state.state_done{background: #E7F9E7;color: #0A9060;} .grid_box .state.state_part, .dash_staff .state.state_part{background: var(--bg-blue);color: var(--color-primary);} .grid_box .state.state_error, .dash_staff .state.state_error{background: var(--bg-red);color: var(--color-red);} .card_list .card_name{display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;font-size: 1.7rem;font-weight: 700;color: var(--color-111);line-height: 1.3;} .card_list .card_num{margin: .4rem 0 1.6rem;font-size: 1.5rem;color: var(--color-555);} .card_list .card_info{display: grid;grid-template-columns: 3rem 1fr;row-gap: .8rem;column-gap: 1rem;margin-top: auto;padding-top: 1rem;border-top: 1px dashed #C8C8C8;font-size: 1.5rem;} .card_list .card_info dt{color: #111;font-weight: 500;} .card_list .card_info dd{display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;color: #555;line-height: 1.5;overflow-wrap: anywhere;} .card_list .cust_tags{margin-top: 1rem;} .card_list .check_radio.only_chk label{padding-left: 1.6rem;} .card_list li > .check_radio{position: absolute;top: 1.7rem;left: 2.5rem;z-index: 2;} .card_list .tui-pagination{display: flex;align-items: center;justify-content: center;gap: .4rem;margin-top: 2.5rem;} .card_list .tui-pagination .tui-page-btn{display: inline-flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;padding: 0;border: 1px solid transparent;border-radius: .4rem;font-size: 1.4rem;background: transparent;transition: ease .3s;box-sizing: border-box;} .card_list .tui-pagination .tui-page-btn:hover{background-color: var(--bg-blue);} .card_list .tui-pagination .tui-page-btn.tui-is-selected{background-color: #7C8DA4;color: var(--color-white);} .card_list .tui-pagination .tui-page-btn.tui-first, .card_list .tui-pagination .tui-page-btn.tui-prev, .card_list .tui-pagination .tui-page-btn.tui-next, .card_list .tui-pagination .tui-page-btn.tui-last{width: 2.4rem;height: 2.4rem;border-color: #BEBEBE;} .card_list .tui-pagination .tui-prev{margin-right: 1.2rem;} .card_list .tui-pagination .tui-next{margin-left: 1.2rem;} .area_section:has(.view_tab .v_card input:checked) #cardGrid{display: none;} .area_section:has(.view_tab .v_list input:checked) .card_list{display: none;} /* 카드형 목록 :E */ /* 자료수집 : S */ .collect_list{display: grid;grid-template-columns: repeat(auto-fill, minmax(max(20rem, (100% - 7.2rem) / 7), 1fr));gap: 1.2rem;} .collect_list .collect_card{padding: 1.6rem 1.8rem;border: 1px solid var(--border-default);border-radius: 1.2rem;background: var(--color-white);box-shadow: 0 .2rem .8rem -.4rem rgba(17, 34, 68, .08);transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;} .collect_list .collect_card:hover{box-shadow: 0 0.5rem 1.6rem 0 rgba(0, 0, 0, 0.15);border: 1px solid var(--color-skyblue);} .collect_list .collect_head{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 1rem;margin-bottom: 1.4rem;padding-bottom: 1.2rem;border-bottom: 1px dashed #dbe0ea;} .collect_list .collect_label{font-size: 1.4rem;color: var(--color-555);white-space: nowrap;} .collect_list .collect_year{font-size: 2.2rem;font-weight: 800;color: var(--color-111);letter-spacing: -.05rem;line-height: 1;} .collect_list .collect_row{display: grid;align-items: center;grid-template-columns: auto 1fr;row-gap: 1rem;column-gap: 1rem} .collect_list .collect_row dt{font-size: 1.5rem;color: var(--color-111);white-space: nowrap;} .collect_list .collect_row dd{text-align: right;color: var(--color-555);line-height: 1.5;overflow-wrap: anywhere;} .collect_list .state{display: inline-flex;align-items: center;justify-content: center;min-width: 4.2rem;height: 2.6rem;padding: 0 .5rem;border-radius: .5rem;font-size: 1.3rem;font-weight: 500;background: #F2F2F2;color: var(--color-888);} .collect_list .state.state_none{background: none;border: 1px solid var(--border-default);color: var(--color-888);} .collect_list .state.state_done{background: #E7F9E7;color: #0A9060;} .collect_list .state.state_error{background: var(--bg-red);color: var(--color-red);} .collect_list.type2{grid-template-columns: repeat(auto-fill, minmax(max(28rem, (100% - 3.6rem) / 4), 1fr));} .collect_list.type2 .collect_row{align-items: start;} .collect_list.type2 .collect_year{font-size: 1.7rem;} /* 자료수집 : E */ /* verify : S */ .verify{display: flex;align-items: center;flex-wrap: wrap;gap: 2rem;padding: 0.6rem 1.5rem;background: var(--color-white);border-radius: .6rem;border: 1px solid #D9D9D9;} .verify .txt{margin: 0;padding-right: 2rem;border-right: 1px solid #E5E7EB;font-size: 1.5rem;color: var(--color-333);max-width: 60rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .verify h5{display: inline-flex;align-items: center;gap: .3rem;margin-right: 1rem;font-size: 1.3rem;font-weight: 600;color: var(--color-333);position: relative;} .verify h5::before{content: '';display: inline-block;width: 1.3rem;height: 1.3rem;border-radius: 50%;background: #2F69FD;position: relative;margin-top: -2px;} .verify h5::after{content: '';position: absolute;width: .5rem;height: .2rem;margin-left: -1.3rem;margin-top: .4rem;border-left: 1px solid var(--color-white);border-bottom: 1px solid var(--color-white);transform: rotate(-45deg);left: 17px;top: 4px;} .verify .badge_r{display: inline-flex;align-items: center;height: 2.6rem;padding: 0 .9rem;font-size: 1.3rem;color: var(--color-111);background: #F3F4F6;border: 1px solid transparent;border-radius: .4rem;} .verify .badge_r strong{font-weight: 700;color: var(--color-333);padding: 0 .1rem 0 0.5rem;} .verify .badge_r.default{background: #F2F5F9;border-color: transparent;} .verify .badge_r.red{background: #FFF2F2;border-color: #FFBCC2;cursor: pointer;transition: all ease .3s;} .verify .badge_r.red strong{color: var(--color-red);text-decoration: underline;} .verify .badge_r.red:hover{border-color: #FF0000;background-color: #FFE5E5;} .verify .flex{gap:.6rem} /* verify : E */ /* easy_cert : S */ .easy_cert{display: flex;flex-wrap: wrap;gap: 1rem;} .easy_cert li{flex: 1;min-width: 11.6rem;} .easy_cert .cert_btn{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 1rem;width: 100%;height: 9rem;padding: 1.5rem 1rem;background: #F2F5F9;border: 1px solid transparent;border-radius: .8rem;transition: all .3s ease;position: relative;} .easy_cert .cert_btn:hover{border-color: var(--color-skyblue);} .easy_cert .cert_btn.active{border: 1px solid var(--color-skyblue);background-color: var(--bg-blue);} .easy_cert .cert_btn .txt{font-size: 1.4rem;color: var(--color-333);margin-top: 4rem;} .easy_cert .cert_btn::before{content: '';position: absolute;width: 3.6rem;height: 3.6rem;background: url(/images/ico_cert.png) no-repeat;top: 1.5rem;left: 50%;transform: translateX(-50%);} .easy_cert .cert_btn.kakaobank::before{background-position: 0 0;} .easy_cert .cert_btn.naver::before{background-position: -36px 0;} .easy_cert .cert_btn.banksalad::before{background-position: -72px 0;} .easy_cert .cert_btn.hana::before{background-position: -108px 0;} .easy_cert .cert_btn.toss::before{background-position: -144px 0;} .easy_cert .cert_btn.kakaotalk::before{background-position: 0 -36px;} .easy_cert .cert_btn.woori::before{background-position: -36px -36px;} .easy_cert .cert_btn.nh::before{background-position: -72px -36px;} .easy_cert .cert_btn.kookmin::before{background-position: -108px -36px;} .easy_cert .cert_btn.shinhan::before{background-position: -144px -36px;} .easy_cert .cert_btn.samsung::before{background-position: 0 -72px;} .easy_cert .cert_btn.pass::before{background-position: -36px -72px;} .easy_cert .cert_btn.ibkbank::before{background-position: -72px -72px;} /* easy_cert : E */ /* 우측 컨텐츠 : E */ /* 팝업 : S */ .pop_dim {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999;} .pop_wrap {position: fixed; inset: 0; margin: auto; width: 80rem; max-width: calc(100% - 4rem); height: fit-content; max-height: calc(100vh - 10rem); background-color: var(--color-white); border-radius: 1rem; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2); z-index: 1000; display: flex; flex-direction: column; overflow: hidden;} .pop_wrap .pop_header {display: flex;justify-content: space-between;align-items: center;padding: 1rem 5.5rem 1rem 2.5rem;border-bottom: 0.1rem solid #e5e5e5;height: 5rem;flex-shrink: 0;position: relative;background: #7C8DA4 url(/images/bg_02.png) no-repeat -8rem bottom;} .pop_wrap .pop_tit {font-size: 1.8rem !important;color: var(--color-white) !important;margin-bottom: 0 !important;line-height: 1.2;} .pop_wrap .btn_close {position: absolute;top: 50%;right: 2.5rem;transform: translateY(-50%);width: 3rem;height: 3rem;padding: 0;font-size: 0;border-radius: .4rem;background: transparent;transition: 0.3s all ease;} .pop_wrap .btn_close:hover{background-color: #92a3bb;} .pop_wrap .btn_close::before, .pop_wrap .btn_close::after {content: '';position: absolute;top: 50%;left: 50%;width: 2rem;height: 0.2rem;background-color: var(--color-white);} .pop_wrap .btn_close::before {transform: translate(-50%, -50%) rotate(45deg);} .pop_wrap .btn_close::after {transform: translate(-50%, -50%) rotate(-45deg);} .pop_wrap .pop_body {flex: 1;max-height: 38rem;padding: 3rem 2.5rem;overflow-y: auto;} .pop_wrap .pop_con {font-size: 1.4rem; color: var(--color-333); line-height: 1.5;padding: 2.5rem;flex: 1; overflow-y: auto;} .pop_wrap .pop_con::-webkit-scrollbar{width:1rem;} .pop_wrap .pop_con::-webkit-scrollbar-thumb{border: 2px solid transparent;border-radius: 10px;background-clip: padding-box;background-color: #B3B3B3;} .pop_wrap .pop_con::-webkit-scrollbar-track{border-radius: 10px;background-color: #E5E5E5;} .pop_wrap .pop_con section+section{margin-top: 1.5rem;} .pop_wrap .pop_con .pop_contit{margin-bottom: 1rem;font-size:1.8rem;font-weight: 600;} .pop_wrap .pop_con h3{margin-bottom: .5rem;font-size: 1.6rem;font-weight: 600;} .pop_wrap .pop_con p{font-size: 1.5rem;color: var(--color-555);} .pop_wrap .pop_con .pop_viewinfo{display: flex;margin-bottom: 1.5rem;padding-bottom: 1.5rem;border-bottom: 1px solid var(--border-default);} .pop_wrap .pop_con .pop_viewinfo li{display: flex;gap: .8rem;position: relative;margin-right: 1.3rem;padding-right: 1.3rem;} .pop_wrap .pop_con .pop_viewinfo li:last-child{margin-right: 0;padding-right: 0;} .pop_wrap .pop_con .pop_viewinfo li:before{content: '';position: absolute;top: 4px;right: 0;width: 1px;height: 14px;background: #E9E9E9;} .pop_wrap .pop_con .pop_viewinfo li:last-child:before{content: none;} .pop_wrap .pop_con .pop_viewinfo li span{color: var(--color-555);} .pop_wrap .pop_con img{display:block; max-width:100%; height:auto;} .pop_wrap .pop_footer {display: flex;justify-content: flex-end;gap: .8rem;padding:1rem 2.5rem 3rem 2.5rem;flex-shrink: 0;} .pop_wrap .pop_footer .btn{height: 4rem;min-width: 8rem;font-size: 1.5rem;border-color: var(--color-888);color: var(--color-555);background-color: var(--color-white);} .pop_wrap.pop_msg{width: 42rem} .pop_wrap.pop_msg.pop_m{width: 60rem;} .pop_wrap.pop_msg .pop_header{background: #7C8DA4 url(/images/bg_02.png) no-repeat -10rem bottom;} .pop_wrap.pop_msg .pop_con{text-align: center;} .pop_wrap.pop_msg .pop_footer .btn{flex: 1;} .pop_wrap.pop_msg h4{position: relative;padding-top: 5.5rem;margin-bottom:0;font-size: 1.8rem;} .pop_wrap.pop_msg h4:before{content: '';display: inline-block;width: 4.5rem;height: 4.5rem;position: absolute;top: 0;left: 50%;transform: translateX(-50%);background: url(/images/ico_pop.png) no-repeat;} .pop_wrap.pop_msg.red h4:before, .pop_wrap.pop_msg.err h4:before{background-position: -4.5rem 0;} .pop_wrap.pop_msg.ok h4:before{background-position: -9rem 0;} .pop_wrap.pop_msg p{word-break: keep-all !important;} .pop_wrap.pop_msg h4+p{margin-top: 1.2rem;} .pop_wrap.pop_msg .pop_con:has(.pop_check){padding-bottom: 1rem;} .pop_wrap.pop_msg .pop_check{display: flex;flex-wrap: wrap;align-items: center;justify-content: flex-end;gap: 1.2rem 2rem;margin-top: 2.4rem;padding-top: 1.2rem;border-top: 1px solid var(--border-default);} .pop_wrap.pop_msg .pop_check_opts{display: flex;align-items: center;gap: 2rem;} .terms h4{margin-bottom: .8rem;font-size: 1.6rem;font-weight: 700;color: #1f2d5e;} .terms p{font-size: 1.45rem;color: var(--color-555);} .terms_point{display: inline-block;margin-bottom: .4rem;padding: .2rem .6rem;background: var(--bg-blue);border-radius: .3rem;font-weight: 700;color: var(--color-primary);} .terms_ol{counter-reset: item;display: flex;flex-direction: column;margin: 0;padding: 0;list-style: none;} .terms_ol>li{position: relative;padding-left: 2rem;font-size: 1.45rem;color: var(--color-555);line-height: 1.7;} .terms_ol>li::before{counter-increment: item;content: counter(item) ".";position: absolute;left: 0;top: 0;} .terms_ul{margin: 0;list-style: none;} .terms_ul>li{position: relative;padding-left: 1.4rem;font-size: 1.45rem;color: var(--color-555);line-height: 1.7;} .terms_ul>li::before{content: '';position: absolute;left: .2rem;top: 1rem;width: 3px;height: 3px;border-radius: 50%;background: var(--color-888);} .terms_ul>li+li{margin-top: .5rem;} .terms .table_box th{text-align: center !important;} .terms>.table_box{margin: 1.4rem 0;} .terms>.terms_ol{margin: 1.4rem 0;} .ref_box{display: flex;align-items: center;gap: .6rem;margin-top: 1rem;padding: 1rem 1.2rem;background: var(--bg-gray);border-radius: .8rem;font-size: 1.3rem;color: var(--color-555);line-height: 1.5;} .ref_box::before{content: '§';flex: none;font-size: 1.6rem;font-weight: 700;color: var(--color-primary);} .ref_box.ico_law{position: relative;padding-left: 3.2rem;} .ref_box.ico_law::before{content: '';position: absolute;left: 1.2rem;top: 1.3rem;width: 15px;height: 15px;background: url(/images/ico_law.png) no-repeat center;background-size: contain;} .ref_box.blue{display: block;margin: 1.4rem 0;padding: 1.4rem 1.6rem;background: var(--bg-blue);border-radius: .8rem;} .ref_box.blue::before{content: none;} .ref_box.blue .tit{display: block;margin-bottom: .5rem;font-size: 1.5rem;font-weight: 700;color: #1f2d5e;} .pop_anchor{position: relative; display: inline-block;} .pop_layer{position: absolute;inset: auto;top: 3rem;left: 50%;right: auto;bottom: auto;margin: 0;transform: translateX(-50%);width: 36rem;max-width: none;max-height: none;border: 1px solid var( --color-primary);z-index: 100;} .pop_layer .pop_header{background: var(--color-white);padding: 1rem 2.5rem;border-bottom: none;} .pop_layer .pop_tit{color: var(--color-111) !important;font-weight: 600;} .pop_layer .btn_close:hover{background-color:var(--bg-blue);} .pop_layer .btn_close::before, .pop_layer .btn_close::after{background-color: var(--color-333); width: 1.6rem; height: 0.15rem;} .pop_layer .pop_body{flex: none;padding-top: 0;overflow-y: inherit;} .pop_layer .pop_form label{display: block;margin-bottom: .6rem;font-size: 1.6rem;color: var(--color-111);} .pop_layer .pop_form .flex{gap: .6rem;} .pop_layer .pop_form .flex input[type="text"]{flex: 1;height: 4rem;} .pop_layer .pop_form .flex .btn{height: 4rem;} .pop_layer .pop_form .msg_err{margin-top:.6rem} .pop_layer .pop_img h4{position: relative;padding-top: 5.5rem;font-size: 1.6rem;text-align: center;} .pop_layer .pop_img h4:before{content: '';display: inline-block;width: 4.5rem;height: 4.5rem;position: absolute;top: 0;left: 50%;transform: translateX(-50%);background: url(/images/ico_pop.png) no-repeat;background-position: -9rem 0;} .pop_layer .msg_box+.pop_form{margin-top: 2rem;} .pop_layer .pop_body .tit_box{margin-bottom: 1rem;} .pop_layer .pop_body .tit_box .tit_inner p{font-size: 1.6rem;} .msg_box{padding: 1.2rem 1.5rem;background: var(--bg-blue_box);border-radius: .6rem;font-size: 1.5rem;color: var(--color-333);line-height: 1.6;line-height: 1.3;} /* 팝업 : E */ /* 댓글 :S */ .comment_box{margin-top: 1.5rem;padding-top: 1.5rem;border-top: 1px solid var(--border-default);} .comment_box>h4{margin-bottom: .5rem;font-size: 1.6rem;color: var(--color-111);} .comment_form{position: relative;padding-right: 7rem;border-radius: .8rem;background-color: #f6f7f9;border: 1px solid var(--border-default);} .comment_form textarea{padding: 1rem;width: 100%;min-height: 7rem;border: none;font-size: 1.5rem;line-height: 1.5;color: var(--color-555);resize: none;background: transparent;} .comment_form .comment_actions_wrap{position: absolute;bottom: 1rem;right: 1rem;} .comment_list{display: flex;flex-direction: column;gap: 1rem;margin-bottom: 1.5rem;} .comment_item{border-bottom: 1px solid #f6f6f6;padding-bottom: 1rem;} .comment_item:last-child{border: none;padding-bottom:0;} .comment_head{display: flex;justify-content: space-between;align-items: center;margin-bottom: .3rem;} .comment_head strong{position: relative;font-size: 1.4rem;font-weight: 600;color: var(--color-111);} .comment_actions{font-size:0;} .comment_actions a{color: var(--color-555);text-decoration: none;font-size: 1.3rem;position: relative;padding-left: 1rem;margin-left: 1rem;} .comment_actions a::before{content: '';position: absolute;width: 1px;height: 10px;background: #E9E9E9;top: 3px;left: 0;} .comment_actions>*:first-child a:first-child::before, .comment_actions>a:first-child::before{display: none;} .comment_actions>span>a, .comment_actions>a{display: inline-block;width: 2.5rem;height: 2.5rem;padding: 0;margin-left: .4rem;font-size: 0;transition: .3s ease all;border-radius: .4rem;} .comment_actions>span>a::before, .comment_actions>a::before{display: none;} .comment_actions>span>a:first-child{background: url(/images/ico_com_edit.png) no-repeat center;background-size: 1.5rem;} .comment_actions>span:first-child>a:first-child::before{content: '수정';display: block;position: absolute;top: calc(100% + .4rem);right: 0;left: auto;bottom: auto;width: auto;height: auto;padding: .4rem .8rem;background: rgba(0, 0, 0, 0.8);color: #fff;font-size: 1.2rem;line-height: 1;white-space: nowrap;border-radius: .4rem;opacity: 0;visibility: hidden;transition: opacity .2s, visibility .2s;pointer-events: none;z-index: 10;} .comment_actions>span:first-child>a:first-child:hover::before{opacity: 1;visibility: visible;} .comment_actions>span>a:last-child{background: url(/images/ico_com_delete.png) no-repeat center;background-size: 1.5rem;} .comment_actions>span>a:last-child::before{content: '삭제';display: block;position: absolute;top: calc(100% + .4rem);right: 0;left: auto;bottom: auto;width: auto;height: auto;padding: .4rem .8rem;background: rgba(0, 0, 0, 0.8);color: #fff;font-size: 1.2rem;line-height: 1;white-space: nowrap;border-radius: .4rem;opacity: 0;visibility: hidden;transition: opacity .2s, visibility .2s;pointer-events: none;z-index: 10;} .comment_actions>span>a:last-child:hover::before{opacity: 1;visibility: visible;} .comment_actions>a{background: url(/images/ico_com_reply.png) no-repeat center;background-size: 1.5rem;} .comment_actions>a::before{content: '답글';display: block;position: absolute;top: calc(100% + .4rem);right: 0;left: auto;bottom: auto;width: auto;height: auto;padding: .4rem .8rem;background: rgba(0, 0, 0, 0.8);color: #fff;font-size: 1.2rem;line-height: 1;white-space: nowrap;border-radius: .4rem;opacity: 0;visibility: hidden;transition: opacity .2s, visibility .2s;pointer-events: none;z-index: 10;} .comment_actions>a:hover::before{opacity: 1;visibility: visible;} .comment_actions>span>a:hover, .comment_actions>a:hover{background-color: var(--bg-blue_box);} .comment_actions a:hover{text-decoration: underline;} .comment_text{margin: 0;font-size: 1.4rem;color: var(--color-333);line-height: 1.5;white-space: pre-wrap;word-break: break-all;} .comment_edit textarea, .comment_reply textarea{width: 100%;min-height: 7rem;padding: .8rem;resize: none;color: var(--color-555);border: none;background: transparent;} .comment_edit, .comment_reply{position: relative;margin-top: .8rem;padding-right: 11rem;border-radius: .8rem;background-color: #f6f7f9;border: 1px solid var(--border-default);margin-left: 1rem;} .comment_edit .comment_actions_wrap, .comment_reply .comment_actions_wrap{position: absolute;bottom: 1rem;right: 1rem;} .comment_form textarea:focus, .comment_edit textarea:focus, .comment_reply textarea:focus{outline: none;} .reply_list{margin-top: 1rem;display: flex;flex-direction: column;gap: .8rem;} .reply_item{margin-left: 1rem;border-radius: .8rem;} .reply_item .reply_item{margin-left: 1.5rem;} .reply_item .comment_head strong{padding-left: 1.3rem;} .reply_item .comment_text{margin-left: 1.5rem;} .reply_item .comment_head strong::before{content: '';position: absolute;width: .5rem;height: .5rem;border-left: 1px solid #C7C7C7;border-bottom: 1px solid #C7C7C7;top: 5px;left: 0;} .reply_item .comment_reply{margin-left: 1rem;} /* 댓글 :E */ /* form_list : S */ .form_list{display: flex;flex-direction: column;gap: 1.5rem;} .form_list li{display: flex;flex-direction: column;gap: .5rem;} .form_list li>label{font-size: 1.6rem;color: var(--color-111);} .form_list li>input[type="text"], .tit_box .btn_box .form_list input[type="text"], .form_list li>input[type="password"], .form_list li>select, .tit_box .btn_box .form_list select, .form_list li>textarea{max-width: 100%;height: 4rem;font-size: 1.5rem;} .form_list li>textarea{height: auto;min-height: 12rem;padding: 1rem;line-height: 1.5;resize: vertical;} .form_list li .flex{gap: .6rem;} .form_list li .flex>input{flex: 1;min-width: 0;} .form_list li .flex .badge_box{margin: 0;padding-bottom: 0;border: none;} .form_list li .badge_box .fixed_group{margin: 0;} .form_list li .badge_box .fixed_group .badge_item{position: relative;height: 4rem;font-size: 1.5rem;} .form_list li .flex .tab_box03_wrap{margin-left: .6rem;} /* 썸네일 */ .thumbnail_upload{display: flex;align-items: center;gap: 1rem;height: 4rem;} .thumbnail_upload .btn_thumb{display: inline-flex;align-items: center;justify-content: center;gap: .6rem;height: 4rem;padding: 0 1.5rem;border: 1px solid var(--border-default);border-radius: .4rem;background: var(--color-white);color: #666;font-size: 1.5rem;transition: all .3s;} .thumbnail_upload .btn_thumb input[type="file"]{display: none;} .thumbnail_upload .btn_thumb::before{content: '';width: 1.6rem;height: 1.6rem; background:url(/images/ico_preview.png);margin-bottom: 2px;} .thumbnail_upload .btn_thumb:hover{background-color: var(--bg-blue);} .thumbnail_upload .thumb_preview{display: inline-flex;align-items: center;gap: .8rem;flex: 1;min-width: 0;height: 4rem;padding: 0 .8rem 0 .4rem;border: 1px solid var(--border-default);border-radius: .4rem;background: var(--color-white);box-sizing: border-box;} .thumbnail_upload .thumb_preview img{width: 3rem;height: 3rem;flex-shrink: 0;object-fit: cover;border-radius: .3rem;} .thumbnail_upload .thumb_preview .thumb_filename{flex: 1;min-width: 0;font-size: 1.3rem;color: var(--color-555);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .thumbnail_upload .thumb_preview .btn_remove{width: 2rem;height: 2rem;border: none;border-radius: 50%;background: var(--bg-gray);color: var(--color-555);font-size: 1.6rem;line-height: 1;display: inline-flex;align-items: center;justify-content: center;padding: 0;transition:.3s ease all} .thumbnail_upload .thumb_preview .btn_remove:hover{background: #E8F1FE;} .form_list li .drop_box{margin-bottom: 0;cursor: pointer;font-size: 1.6rem;} .form_list li .drop_box .filepond--drop-label label{position: relative;cursor: pointer;font-size: 1.5rem;color: var(--color-555);} .form_list li .drop_box .filepond--drop-label label::before{content: '';position: absolute;top: 50%;left: -1.7rem;transform: translateY(-50%);width: 2rem;height: 2rem;background: url(/images/ico_fileadd.png) no-repeat center;background-size: contain;} .drop_box .filepond--drip{opacity: 1;background-color: #EEF3FA;} /* form_list : E */ /* guide : S */ .page_guide .container{height: 100%;} .page_guide .left_menu{display: none;} .page_guide .right_container{width: 100%;} .page_guide .area_section+.area_section{margin-top: 4rem;} .page_guide .guide_range{flex-wrap: wrap;} .page_guide .guide_range>* {margin-right: 1rem;} /* guide : E */ .area_section:has(>.corp_info)+.area_section{margin-top: 1rem;} /* main : S */ body.main{height: auto;position: relative;background: var(--color-white);} body.main, body.main *{word-break: keep-all !important;} body.main .header{position: fixed;width: 100%;background: transparent;border-bottom: 1px solid rgb(255 255 255 / 50%);box-shadow: none;transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;} body.main .header .top_menu_wrap .logout .btn_login{color: var(--color-333);border: 1px solid var(--color-white);background: rgba(255, 255, 255, .5);} body.main .header .top_menu_wrap .logout .all_menu{background: url(/images/ico_allmenu_w.png);} body.main.scrolled .header{background: var(--color-white);border-bottom-color: #eaeaea;box-shadow: 0 10px 15px -10px rgba(8, 40, 120, .1);} body.main.scrolled .header .top_menu_wrap .logout .all_menu{background: url(/images/ico_allmenu.png);} body.main.scrolled .header .top_menu_wrap .logout .btn_login{color: var(--color-primary);background-color: #f1f4f9;} body.main[style*="overflow: hidden"] .header, body.login_wrap[style*="overflow: hidden"] .header{background: var(--color-white);box-shadow: 0 10px 15px -10px rgba(8, 40, 120, .1);} body.main[style*="overflow: hidden"] .header .top_menu_wrap .logout .btn_login, body.login_wrap[style*="overflow: hidden"] .header .top_menu_wrap .logout .btn_login{color: var(--color-primary);background-color: #f1f4f9;} body.main[style*="overflow: hidden"] .header .top_menu_wrap .logout .all_menu, body.login_wrap[style*="overflow: hidden"] .header .top_menu_wrap .logout .all_menu{background: url(/images/ico_allmenu.png);} .main .btn_login_header{display: block;position: absolute;top: 2rem;right: 2rem;font-size: 0;background: url(/images/main_btn.png) no-repeat;width: 6.4rem;height: 3rem;background-position: 0px -160px;} .main .btn_login_header:hover{background-position: -64px -160px;} .main_wrap .main_inner{max-width: 144rem;margin: 0 auto;padding: 0 2rem;} .main_wrap .sec_head{text-align: center;margin-bottom: 4rem;} .main_wrap .sec_tit{font-size: 4rem;font-weight: 700;color: var(--color-111);line-height: 1.35;} .main_wrap .sec_tit b{color: var(--color-primary);font-weight: 700;} .main_wrap .sec_sub{margin-top: 1.4rem;font-size: 2.6rem;color: var(--color-555);line-height: 1.5;} .main_wrap .btn_inquiry{display: inline-flex;align-self: flex-start;align-items: center;gap: .8rem;margin-top: 6.2rem;height: 5rem;padding: 0 2.8rem;background: var(--color-white);border: 1px solid #202936;border-radius: .8rem;font-size: 1.8rem;font-weight: 500;color: #202936;box-shadow: none;transition: .2s all ease;} .main_wrap .btn_inquiry::after{content: '→';font-size: 1.6rem;position: relative;top: .1rem;line-height: 1;} .main_wrap .btn_inquiry:hover::after{animation: btn_arrow_move 1.2s ease-in-out infinite;} @keyframes btn_arrow_move { 0%, 100%{transform: translateX(0);} 50%{transform: translateX(.6rem);} } .main_wrap .main_inner .btn_inquiry{transition: opacity .8s ease, transform .8s ease, border-radius .1s ease, box-shadow .1s ease, background-color .1s ease;} .main_visual{background: url(/images/main_bg.png) no-repeat center top;background-size: cover;height: 102rem;position: relative;} .main_visual .main_inner{min-height: 86rem;display: flex;flex-direction: column;justify-content: center;position: relative;} .visual_badge{display: inline-flex;align-self: flex-start;padding: .2rem 1.6rem;border: 1px solid #3B88FE;border-radius: 3rem;font-size: 1.6rem;font-weight: 600;color: #3B88FE;background: rgba(255, 255, 255, .4);} .main_visual .visual_tit{margin-top: 2.2rem;font-size: 7.2rem;font-weight: 700;color: var(--color-111);line-height: 1.1;letter-spacing: -.1rem;} .main_visual .visual_desc{margin-top: 1rem;font-size: 2.6rem;color: var(--color-555);} .main_visual .visual_btns{display: flex;flex-wrap: wrap;align-items: center;gap: 1.2rem;margin-top: 10rem;} .main_visual .visual_btns .btn{height: 5rem;padding: 0 2.6rem;display: inline-flex;align-items: center;border-radius: .8rem;font-size: 1.8rem;font-weight: 500;} .main_visual .visual_btns .btn:first-child{background: var(--color-primary) !important;border-color: var(--color-primary) !important;color: var(--color-white) !important;} .main_visual .visual_btns .btn:nth-child(2){background: #202936;border: 1px solid #202936;color: var(--color-white)} .main_visual .visual_btns .btn_inquiry{color: #202936;border: 1px solid #202936;background-color: var(--color-white);margin-top: 0;box-shadow: none;} /* visual_btns 버튼은 hover 색상 변화 없음 (전역 .btn:hover !important 무력화) */ .main_visual .visual_btns .btn:first-child:hover{background: var(--color-primary) !important;} .main_visual .visual_btns .btn:nth-child(2):hover{background: #202936 !important;} /* 공지사항 — main_supporter 위 오버랩 영역 (margin-top/border-radius/::before 디자인 이전) */ .main_notice{position: relative;margin-top: -16rem;border-radius: 0 16rem 0 0;background: var(--color-white);padding: 12rem 0 15rem;} .main_notice::before{content: '';position: absolute;width: 16rem;height: 16rem;background: url(/images/main_bg_r.png) no-repeat;top: -16rem;left: 0;} .main_notice .sec_head{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 1rem;margin-bottom: 2rem;} .main_notice .main_inner .notice_more{position: relative;display: block;width: 3.2rem;height: 3.2rem;font-size: 0;opacity: 0;transform: translateY(4rem);transition: opacity .8s ease, transform .8s ease;will-change: opacity, transform;} .main_notice .main_inner .sec_head.is-in .notice_more{opacity: 1;transform: none;transition-delay: .12s;} .main_notice .main_inner .notice_more::before, .main_notice .main_inner .notice_more::after{content: '';position: absolute;top: 50%;left: 50%;background: var(--color-555);transition: background .2s ease;} .main_notice .main_inner .notice_more::before{width: 2.2rem;height: 2px;transform: translate(-50%, -50%);} .main_notice .main_inner .notice_more::after{width: 2px;height: 2.2rem;transform: translate(-50%, -50%);} .main_notice .main_inner .notice_more:hover::before, .main_notice .main_inner .notice_more:hover::after{background: var(--color-primary);} .main_notice .main_inner .notice_slider{position: relative;} .main_notice .main_inner .notice_viewport{overflow-x: clip;overflow-y: visible;} .main_notice .main_inner .notice_arrow{position: absolute;top: 37%;transform: translateY(calc(-50% + 4rem));opacity: 0;z-index: 5;display: flex;align-items: center;justify-content: center;width: 4.4rem;height: 4.4rem;border: 1px solid var(--border-default);border-radius: 50%;background: var(--color-white);box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .1);font-size: 0;cursor: pointer;transition: opacity .8s ease, transform .8s ease, background .2s ease, border-color .2s ease;will-change: opacity, transform;} .main_notice .main_inner .notice_slider.is-in .notice_arrow{opacity: 1;transform: translateY(-50%);} .main_notice .main_inner .notice_slider.is-in .notice_arrow:disabled{opacity: .35;} .main_notice .main_inner .notice_arrow:hover{background: var(--bg-blue);border-color: var(--color-primary);} .main_notice .main_inner .notice_arrow:disabled{opacity: .35;cursor: default;box-shadow: none;} .main_notice .main_inner .notice_arrow:disabled:hover{background: var(--color-white);border-color: var(--border-default);} .main_notice .main_inner .notice_arrow::before{content: '';width: 1rem;height: 1rem;border-top: 2px solid var(--color-555);border-right: 2px solid var(--color-555);} .main_notice .main_inner .notice_arrow:hover:not(:disabled)::before{border-color: var(--color-primary);} .main_notice .main_inner .notice_prev{left: -2.2rem;} .main_notice .main_inner .notice_prev::before{transform: rotate(-135deg);margin-left: .4rem;} .main_notice .main_inner .notice_next{right: -2.2rem;} .main_notice .main_inner .notice_next::before{transform: rotate(45deg);margin-right: .4rem;} .main_notice .main_inner .notice_list{--nl-vis: 4;--nl-gap: 2.4rem;display: flex;gap: var(--nl-gap);transition: transform .4s ease;} .main_notice .main_inner .notice_list > li{flex: 0 0 calc((100% - (var(--nl-vis) - 1) * var(--nl-gap)) / var(--nl-vis));min-width: 0;} .main_notice .main_inner .notice_list li a{display: flex;flex-direction: column;} .main_notice .main_inner .notice_thumb{display: block;width: 100%;aspect-ratio: 16 / 9;border-radius: 1rem;overflow: hidden;background: #eef3fa;} .main_notice .main_inner .notice_thumb img{width: 100%;height: 100%;object-fit: cover;transition: transform .3s ease, filter .3s ease;} .main_notice .main_inner .notice_list li a:hover .notice_thumb img{transform: scale(1.05);filter: brightness(0.7);} .main_notice .main_inner .notice_tit{margin-top: 1.4rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;font-size: 2.1rem;font-weight: 600;line-height: 1.2;color: var(--color-333);} .main_notice .main_inner .notice_list li a:hover .notice_tit{color: var(--color-primary);} .main_notice .main_inner .notice_date{font-size: 1.5rem;color: var(--color-888);} /* 공지 상세 팝업 (고객센터 게시물 상세 팝업 구성 재사용) */ .main_notice .main_inner .notice_pop_thumb{width: 100%;margin-top: 2rem;border-radius: .8rem;overflow: hidden;background: #eef3fa;} .main_notice .main_inner .notice_pop_thumb img{display: block;width: 100%;height: auto;} .main_notice .main_inner .notice_pop_desc{margin-top: 1.6rem;font-size: 1.5rem;color: var(--color-333);} .main_notice .main_inner .notice_pop_link{display: inline-block;margin-top: 1.6rem;font-size: 1.5rem;color: var(--color-primary);text-decoration: underline;word-break: break-all;} .main_supporter{position: relative;background: linear-gradient(180deg, var(--color-white) 65%, #f5f9fc 100%);padding: 9rem 0 18rem;} .main_supporter .support_tab{position: relative;display: flex;justify-content: center;flex-wrap: wrap;gap: 1rem;width: fit-content;margin: 3rem auto 2.5rem;background: #F3F3F3;padding: .5rem;border-radius: 4rem;} .main_supporter .support_tab .tab_indicator{position: absolute;z-index: 0;background: var(--color-primary);border-radius: 3rem;transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease;} .main_supporter .support_tab button{position: relative;z-index: 1;padding: 1rem 2rem;border-radius: 3rem;font-size: 1.6rem;font-weight: 500;color: var(--color-555);transition: color .2s ease;} .main_supporter .support_tab button:hover{color: var(--color-primary);} .main_supporter .support_tab button.on{color: var(--color-white);} .main_supporter .support_panel{display: flex;align-items: center;gap: 6rem;justify-content: center;} .main_supporter .panel_img{flex-shrink: 0;width: 40rem;height: 36rem;background-repeat: no-repeat;background-position: center;background-size: contain;animation: panelFloat 3.5s ease-in-out infinite;} @keyframes panelFloat{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-1.2rem); } } .main_supporter .panel_img1{background: url(/images/main_section2_01.png) 3rem 0rem no-repeat;background-size: 38rem;} .main_supporter .panel_img2{background: url(/images/main_section2_02.png) no-repeat center center;background-size: 29rem;} .main_supporter .panel_img3{background: url(/images/main_section2_03.png) no-repeat center center;background-size: 29rem;} .main_supporter .panel_img4{background: url(/images/main_section2_04.png) no-repeat center center;background-size: 40rem;} .main_supporter .panel_img5{background: url(/images/main_section2_05.png) no-repeat 10rem center;background-size: 24rem;} .main_supporter .panel_txt{flex: 0 1 66rem;min-width: 0;} .main_supporter .panel_label{display: inline-block;margin-bottom: 1.2rem;font-size: 2rem;font-weight: 600;color: var(--color-primary);} .main_supporter .panel_txt h4{font-size: 3.2rem;font-weight: 700;color: var(--color-111);line-height: 1.4;margin-bottom: 2.4rem;} .main_supporter .panel_list li{position: relative;padding-left: 3rem;font-size: 2rem;color: var(--color-555);line-height: 1.5;white-space: nowrap;} .main_supporter .panel_list li+li{margin-top: 1.4rem;} .main_supporter .panel_list li::before{content: '';position: absolute;left: 0;top: .5rem;width: 2rem;height: 2rem;border-radius: 50%;background: var(--color-primary);} .main_supporter .panel_list li::after{content: '';position: absolute;left: .72rem;top: .85rem;width: .5rem;height: .9rem;border: solid var(--color-white);border-width: 0 .2rem .2rem 0;transform: rotate(45deg);box-sizing: border-box;} .main_simulation{padding: 14rem 0 20rem 0;} .main_simulation .sim_inner{display: flex;align-items: center;justify-content: center;gap: 6rem;} .main_simulation .sim_txt{flex: 1;max-width: 66rem;} .main_simulation .sim_txt .sec_tit{text-align: left;margin-bottom: 3rem;} .main_simulation .sim_list li{display: flex;align-items: center;gap: 1.6rem;padding: 1rem 2.4rem;background: var(--color-white);border-radius: 2rem;box-shadow: 0 .6rem 2rem -.5rem rgba(0, 85, 233, .2);} .main_simulation .sim_list li+li{margin-top: 1.2rem;} .main_simulation .sim_list .num{flex-shrink: 0;font-size: 3rem;font-weight: 700;color: var(--color-primary);} .main_simulation .sim_list .txt{font-size: 2.2rem;color: var(--color-555);} .main_simulation .sim_img{flex-shrink: 0;width: 44rem;height: 30rem;background: url(/images/main_section3_01.png) no-repeat center / contain;background-size: 48rem;} .main_function{padding: 12rem 0;background: url(/images/main_bg2.png) no-repeat center top;background-size: cover;} .main_function .func_wrap{display: flex;justify-content: center;align-items: flex-start;gap: 2.5rem;} .main_function .func_col{display: flex;flex-direction: column;gap: 2.5rem;} .main_function .func_col:nth-child(1){margin-top: 9rem;} .main_function .func_col:nth-child(2){margin-top: 0;} .main_function .func_col:nth-child(3){margin-top: 7rem;} .main_function .func_col:nth-child(4){margin-top: 3rem;} .main_function .func_col:nth-child(5){margin-top: 9rem;} .main_function .func_card{position: relative;display: flex;flex-direction: column;width: 24.5rem;min-height: 25rem;padding: 2.2rem;background: var(--color-white);border-radius: 1.6rem;box-shadow: 0 1rem 3rem -1rem rgba(8, 40, 120, .14);transition: .2s all ease;} .main_function .func_card:hover{transform: translateY(-.6rem);box-shadow: 0 1.6rem 3.6rem -1rem rgba(8, 40, 120, .22);} .main_function .func_txt b{font-size: 2rem;font-weight: 700;color: var(--color-111);} .main_function .func_txt p{margin-top: .8rem;font-size: 1.6rem;color: var(--color-555);line-height: 1.5;} .main_function .func_ico{margin-top: auto;align-self: flex-end;} .main_function .func_ico img{width: 9rem;height: 9rem;} .main_expand{padding: 9rem 0;} .main_expand .expand_wrap{display: flex;justify-content: center;align-items: flex-start;} .main_expand .expand_item + .expand_item{margin-left: -2rem;} .main_expand .expand_item{position: relative;flex-shrink: 0;display: flex;flex-direction: column;align-items: center;text-align: center;width: 27rem;height: 27rem;border-radius: 50%;background: rgb(230 241 254 / 50%);border: 1px solid #D5E9FF;align-content: center;justify-content: center;} .main_expand .expand_circle{display: flex;align-items: center;justify-content: center;} .main_expand .expand_circle img{width: 8rem;height: auto;} .main_expand .expand_item b{font-size: 2.6rem;font-weight: 700;color: var(--color-111);} .main_expand .expand_sub{margin-top: .6rem;font-size: 2rem;color: var(--color-333);} .main_expand .expand_item::before{content: '';position: absolute;top: 50%;left: 1rem;transform: translate(-50%, -50%);width: 3.4rem;height: 3.4rem;background: url(/images/main_section5_plus.png) no-repeat center / contain;z-index: 1;} .main_expand .expand_item:first-child::before{content: none;} .main_cta{background: url(/images/main_bg3.png) no-repeat center;background-size: cover;padding: 15.5rem 0;} .main_cta .cta_tit{font-size: 4.5rem;font-weight: 700;color: var(--color-111);} .main_cta .cta_desc{margin-top: 1.6rem;font-size: 2.4rem;color: var(--color-111);line-height: 1.6;} .main_cta .btn_inquiry{margin-top: 3rem;} .main_supporter .support_tab, .main_supporter .support_panels, .main_expand .expand_item{opacity: 0;transform: translateY(4rem);transition: opacity .8s ease, transform .8s ease;will-change: opacity, transform;} .main_function .func_card{opacity: 0;transform: translateY(4rem);transition: opacity .8s ease, transform .8s ease;will-change: opacity, transform;} .main_function .func_wrap.is-in .func_card{opacity: 1;transform: none;} .main_function .func_wrap.is-in .func_col:nth-child(2) .func_card{transition-delay: .12s;} .main_function .func_wrap.is-in .func_col:nth-child(3) .func_card{transition-delay: .24s;} .main_function .func_wrap.is-in .func_col:nth-child(4) .func_card{transition-delay: .36s;} .main_wrap .sec_head .sec_tit, .main_wrap .sec_head .sec_sub{opacity: 0;transform: translateY(4rem);transition: opacity .8s ease, transform .8s ease;will-change: opacity, transform;} .main_wrap .sec_head.is-in .sec_tit, .main_wrap .sec_head.is-in .sec_sub{opacity: 1;transform: none;} .main_wrap .sec_head.is-in .sec_sub{transition-delay: .12s;} .main_simulation .sim_txt .sec_tit, .main_simulation .sim_list li, .main_simulation .sim_img{opacity: 0;transform: translateY(4rem);transition: opacity .8s ease, transform .8s ease;will-change: opacity, transform;} .main_simulation .sim_inner.is-in .sec_tit, .main_simulation .sim_inner.is-in .sim_list li, .main_simulation .sim_inner.is-in .sim_img{opacity: 1;transform: none;} .main_simulation .sim_inner.is-in .sim_list li:nth-child(1){transition-delay: .12s;} .main_simulation .sim_inner.is-in .sim_list li:nth-child(2){transition-delay: .24s;} .main_simulation .sim_inner.is-in .sim_list li:nth-child(3){transition-delay: .36s;} .main_simulation .sim_inner.is-in .sim_img{transition-delay: .2s;} .main_visual .main_inner > *, .main_cta .main_inner > *{opacity: 0;transform: translateY(4rem);transition: opacity .8s ease, transform .8s ease;will-change: opacity, transform;} .main_visual .main_inner.is-in > *, .main_cta .main_inner.is-in > *{opacity: 1;transform: none;} .main_visual .main_inner.is-in > *:nth-child(2), .main_cta .main_inner.is-in > *:nth-child(2){transition-delay: .12s;} .main_visual .main_inner.is-in > *:nth-child(3), .main_cta .main_inner.is-in > *:nth-child(3){transition-delay: .24s;} .main_notice .main_inner .notice_list li{opacity: 0;transform: translateY(4rem);transition: opacity .8s ease, transform .8s ease;will-change: opacity, transform;} .main_notice .main_inner .notice_slider.is-in .notice_list li{opacity: 1;transform: none;} .main_notice .main_inner .notice_slider.is-in .notice_list li:nth-child(2){transition-delay: .1s;} .main_notice .main_inner .notice_slider.is-in .notice_list li:nth-child(3){transition-delay: .2s;} .main_notice .main_inner .notice_slider.is-in .notice_list li:nth-child(4){transition-delay: .3s;} .main_visual .main_inner.is-in > *:nth-child(4), .main_cta .main_inner.is-in > *:nth-child(4){transition-delay: .36s;} .main_visual .main_inner.is-in > *:nth-child(5){transition-delay: .48s;} /* visual_btns: 블록 통짜 대신 버튼 각각 순차 등장 */ .main_visual .main_inner > .visual_btns{opacity: 1;transform: none;transition: none;} .main_visual .visual_btns > *{opacity: 0;transform: translateY(4rem);transition: opacity .8s ease, transform .8s ease, background-color .1s ease, border-color .1s ease, box-shadow .1s ease;will-change: opacity, transform;} .main_visual .main_inner.is-in .visual_btns > *{opacity: 1;transform: none;} .main_visual .main_inner.is-in .visual_btns > *:nth-child(1){transition-delay: .24s;} .main_visual .main_inner.is-in .visual_btns > *:nth-child(2){transition-delay: .34s;} .main_visual .main_inner.is-in .visual_btns > *:nth-child(3){transition-delay: .44s;} .main_supporter .support_tab{transition-delay: .1s;} .main_supporter .support_panels{transition-delay: .2s;} .main_wrap .is-in{opacity: 1;transform: none;} .main_expand .expand_item:nth-child(2){transition-delay: .1s;} .main_expand .expand_item:nth-child(3){transition-delay: .2s;} .main_expand .expand_item:nth-child(4){transition-delay: .3s;} .main_expand .expand_item:nth-child(5){transition-delay: .4s;} /* 가로스크롤 방지 안전장치 */ .main_wrap{overflow-x: hidden;} .main .btn_top{position: fixed;right: 3rem;bottom: 3rem;z-index: 10;display: flex;align-items: center;justify-content: center;width: 5rem;height: 5rem;border-radius: 50%;background: rgba(0, 0, 0, .6);color: var(--color-white);box-shadow: 0 1rem 3rem -1rem rgba(8, 40, 120, .5);opacity: 0;visibility: hidden;transform: translateY(1.5rem);transition: opacity .35s ease, transform .35s ease, visibility .35s, background .2s ease;} .main .btn_top.on{opacity: 1;visibility: visible;transform: translateY(0);} .main .btn_top.on:hover{transform: translateY(-.3rem);} .main .btn_top svg{width: 2.2rem;height: 2.2rem;} /* 시범운영 오픈 임시버튼 */ /* 비주얼 배너 슬라이더 */ .visual_btns02{position: relative;width: 49rem;max-width: 100%;margin-top: 3rem;} .visual_btns02 .vs_viewport{position: relative;} .visual_btns02 .vs_clip{overflow: hidden;border-radius: .8rem;border: 1px solid var(--color-white);} .visual_btns02 .vs_track{display: flex;transition: transform .5s ease;} .visual_btns02 .btn{flex: 0 0 100%;width: 100%;display: inline-flex;justify-content: center;flex-direction: column;aspect-ratio: 49 / 17;padding: 1.5rem 3rem;overflow: hidden;border:none;background: url(/images/bg_banner.png) center / cover no-repeat;} .visual_btns02 .btn.banner2{background-image: url(/images/bg_banner2.png);} .visual_btns02 .btn span{font-size: 0;} /* 좌우 화살표 */ .visual_btns02 .vs_arrow{position: absolute;top: 50%;transform: translateY(-50%);z-index: 5;width: 3.4rem;height: 3.4rem;border: 0;border-radius: 50%;background: rgba(0, 0, 0, .35);cursor: pointer;font-size: 0;transition: background .2s ease;} .visual_btns02 .vs_arrow:hover{background: rgba(0, 0, 0, .55);} .visual_btns02 .vs_prev{left: -1.5rem;} .visual_btns02 .vs_next{right: -1.5rem;} .visual_btns02 .vs_arrow::before{content: '';position: absolute;top: 50%;left: 50%;width: .9rem;height: .9rem;border-top: .2rem solid #fff;border-right: .2rem solid #fff;} .visual_btns02 .vs_prev::before{transform: translate(-30%, -50%) rotate(-135deg);} .visual_btns02 .vs_next::before{transform: translate(-70%, -50%) rotate(45deg);} /* 진행 인디케이터 (활성=차오르는 바 / 비활성=점 + 카운터) */ .visual_btns02 .vs_progress{display: flex;align-items: center;justify-content: flex-end;gap: .6rem;margin-top: 1.2rem;} .visual_btns02 .vs_bar{flex-shrink: 0;width: .7rem;height: .7rem;border-radius: 1rem;background: rgba(0, 0, 0, .3);overflow: hidden;transition: width .4s ease, background .4s ease;} .visual_btns02 .vs_bar.on{width: 4rem;background: rgba(0, 0, 0, .3);} .visual_btns02 .vs_bar i{display: block;height: 100%;width: 0;border-radius: 1rem;background: var(--color-primary);} .visual_btns02 .vs_count{margin-left: .4rem;font-size: 1.4rem;color: var(--color-555);} .visual_btns02 .vs_count b{color: var(--color-primary);font-weight: 700;} /* 재생/일시정지 토글 */ .visual_btns02 .vs_play{position: relative;flex-shrink: 0;width: 2rem;height: 2rem;margin-left: .2rem;padding: 0;border: 0;background: transparent;cursor: pointer;font-size: 0;} /* 일시정지 아이콘: 막대 2개 (가운데 대칭) */ .visual_btns02 .vs_play::before, .visual_btns02 .vs_play::after{content: '';position: absolute;top: 50%;width: .28rem;height: 1.1rem;border-radius: .14rem;background: var(--color-555);transition: background .2s ease;} .visual_btns02 .vs_play::before{left: 50%;transform: translate(-.36rem, -50%);} .visual_btns02 .vs_play::after{left: 50%;transform: translate(.08rem, -50%);} .visual_btns02 .vs_play:hover::before, .visual_btns02 .vs_play:hover::after{background: var(--color-primary);} /* 재생 아이콘(정지 상태): 삼각형 */ .visual_btns02 .vs_play.paused::before{left: 50%;width: 0;height: 0;border-radius: 0;background: transparent;border-left: .9rem solid var(--color-555);border-top: .55rem solid transparent;border-bottom: .55rem solid transparent;transform: translate(-35%, -50%);} .visual_btns02 .vs_play.paused:hover::before{border-left-color: var(--color-primary);} .visual_btns02 .vs_play.paused::after{display: none;} @keyframes visualBtnShine{ 0%{ transform: translateX(-200%) skewX(-18deg); } 100%{ transform: translateX(400%) skewX(-18deg); } } /* main : E */ /* 회원가입 : S */ .joinbox{display: flex;flex-direction: column;align-items: center;min-height: calc(100vh - 22rem);padding: 6rem 2rem 7.5rem 2rem;} .joinbox>div{max-width: 85rem;width: 100%;text-align: center;} .joinbox h2{font-size: 4rem;font-weight: 700;color: var(--color-111);margin-bottom: 3.5rem;letter-spacing: -0.05rem;text-align: center;} .joinbox .step_box{display: inline-flex;justify-content: center;gap: 4rem;margin-bottom: 4rem;position: relative;} .joinbox .step_box:before{content: '';position: absolute;top: 2.5rem;left: 50%;width: 100%;height: 0.1rem;background: var(--border-default);transform: translateX(-50%);} .joinbox .step_box li{display: flex;flex-direction: column;align-items: center;gap: 0.8rem;} .joinbox .step_box li .num{position: relative;width: 5rem;height: 5rem;border-radius: 50%;background: var(--color-white);color: var(--color-disabled);font-size: 2rem;display: flex;align-items: center;justify-content: center;border: 1px solid transparent;} .joinbox .step_box li .label{font-size: 1.4rem;color: var(--color-disabled);font-weight: 500;} .joinbox .step_box li.done .num{background: var(--bg-disabled);font-size: 0;border-color: #C7C7C7;} .joinbox .step_box li.done .num::before{content: '';position: absolute;top: 50%;left: 50%;width: 1.4rem;height: 0.7rem;border-left: 0.25rem solid var(--color-disabled);border-bottom: 0.25rem solid var(--color-disabled);transform: translate(-50%, -65%) rotate(-45deg);} .joinbox .step_box li.on .num{background: var(--color-skyblue);color: var(--color-white);} .joinbox .step_box li.on .label{color: var(--color-skyblue);font-weight: 600;} .joinbox .join_card{width: 100%;max-width: 85rem;padding: 4rem 5rem;background: #fff;border-radius: 2rem;text-align: left;} .joinbox .join_card h3{font-size: 2.6rem;font-weight: 700;color: var(--color-333);margin-bottom: 0.8rem;} .joinbox .join_card .desc{font-size: 1.8rem;color: var(--color-555);margin-bottom: 2rem;} .joinbox .check_radio label{font-size: 1.5rem !important;} .joinbox .agree_all{border-bottom: 1px solid #E9E9E9;padding: 1rem 0;margin-bottom: 1.5rem;} .joinbox .agree_list{display: flex;flex-direction: column;gap: 3rem;} .joinbox .agree_list li{display: flex;justify-content: space-between;align-items: center;} .joinbox .agree_list li .req{margin-right: .5rem;color: var(--color-primary);} .joinbox .agree_list li .req_select{margin-right: .5rem;color: var(--color-555);} .joinbox .agree_list .btn_view{font-size: 1.6rem;color: var(--color-primary);text-decoration: underline;text-underline-position: from-font;background: transparent;border: 0;cursor: pointer;padding: 0;} .joinbox .join_list{display: flex;gap: 3rem;} .joinbox .join_list li{width: 100%;} .joinbox .join_list li button{display: flex;flex-direction: column;align-items: center;gap: 2rem;width: 100%;padding:3.5rem 3rem;border: 1px solid var(--border-default);transition: 0.3s all ease;border-radius: 1.2rem;background-color: var(--color-white);} .joinbox .join_list li button span{font-size: 1.8rem;transition: 0.3s all ease;} .joinbox .join_list li button:hover{border-color: var(--color-skyblue);box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15);} .joinbox .join_list li button:hover span{color: var(--color-primary);} .joinbox .join_list li button:disabled{cursor: default;} .joinbox .join_list li button:disabled:hover{border: 1px solid #E9E9E9;box-shadow: none;} .joinbox .join_list li button:disabled span{color: var(--color-disabled);} .join_card .join_tit{margin-bottom: 1.5rem;padding-bottom: 1.5rem;border-bottom: 1px solid #C8C8C8;font-size: 1.8rem;font-weight: 600;} .join_card .join_wrap section+section{margin-top: 3.5rem;} .join_card .join_info{display: flex;flex-direction: column;gap: 1.5rem;} .join_card .join_info li{display: flex;flex-direction: column;gap: .5rem;} .join_card .join_info li .flex>input{flex:1;margin-right: .8rem;} .join_card .join_info li>input+.msg, .join_card .join_info li>input+.msg_err, .join_card .join_info li>input+.msg_error, .join_card .join_info li>input+.msg_warning, .join_card .join_info li>input+.msg_success{margin-top: 0;} .join_card .join_info label{font-size: 1.6rem;color: var(--color-111);} .join_card .join_info .btn{height: 4rem;font-size: 1.5rem;} .storage_sel { display: flex; gap: 1.2rem; } .storage_sel .storage_item {flex: 1; padding: 2rem 0;border: 1px solid var(--btn-border);border-radius: .8rem;} .storage_sel .storage_item::before{content: '';display: block;width: 6rem;height: 6rem;margin: 0 auto .6rem;background-repeat: no-repeat;background-position: center;background-size: 6rem;} .storage_sel .storage_item.hard::before{background-image: url(/images/ico_hard.png);} .storage_sel .storage_item.ext::before{background-image: url(/images/ico_ext.png);} .storage_sel .storage_item b {font-size: 1.5rem;font-weight: 500;} .storage_sel .storage_item.active {border: 2px solid var( --color-primary);} .storage_sel .storage_item.active b { color: var( --color-primary); } .msg, .msg_err, .msg_error, .msg_warning, .msg_success{display: block;margin-top: .5rem;font-size: 1.2rem;position: relative;padding-left: 1.5rem;} .msg_err::before, .msg_error::before, .msg_warning::before, .msg_success::before{content: '';position: absolute;left: 0;top: 2px;width: 1.2rem;height: 1.2rem;border-radius: 50%;box-sizing: border-box;} .msg_err::after, .msg_error::after, .msg_warning::after, .msg_success::after{position: absolute;font-size: 1rem;font-weight: 700;line-height: 1;} .msg_err, .msg_error{color: var(--color-red);} .msg_err::before, .msg_error::before{border: 0.1rem solid var(--color-red);} .msg_err::after, .msg_error::after{content: '!';left: 5px;top: 8px;transform: translateY(-50%);color: var(--color-red);} .msg_warning{color: var(--color-orange);} .msg_warning::before{border: 0.1rem solid var(--color-orange);} .msg_warning::after{content: '?';left: 4px;top: 8px;transform: translateY(-50%);color: var(--color-orange);} .msg_success{color: var(--color-green);} .msg_success::before{border: 0.1rem solid var(--color-green);} .msg_success::after{content: '';top: 8px;left: 5px;width: 3px;height: 6px;border: 1px solid var(--color-green);border-top: none;border-left: none;transform: translateY(-63%) rotate(44deg);box-sizing: border-box;} .msg{padding-left:0;color: var(--color-red);} .msg:empty, .msg_err:empty, .msg_warning:empty, .msg_success:empty {display: none;} .password_wrapper{position:relative;} .password_wrapper input{width:100%;height: 40px;margin: 0;padding: 0rem 1.3rem;border: 1px solid var(--border-default);border-radius: .4rem;font-size: 1.5rem;box-sizing: border-box;background: var(--color-white);padding-right: 4rem;} .password_wrapper input:focus{outline: none;border-color: var(--color-primary);} .password_wrapper .password_toggle{position: absolute;top: 50%;right: .5rem;transform: translateY(-50%);} .join_tab{display: flex;margin-bottom: 1rem;} .join_tab>button{flex: 1;font-size: 1.6rem;font-weight: 600;border: 1px solid #D9D9D9;height: 5rem;color: var(--color-555);} .join_tab>button.on{background: #4096FF;color: #fff;} .join_tab>button:disabled{border-color: #D9D9D9;background: #F4F4F5;color: var(--color-disabled);cursor: default;} .join_card .site_wrap{display: flex;border: 1px solid #D9D9D9;border-radius: 1.2rem;overflow: hidden;margin-top: 1rem;} .join_card .dropzone{display: flex;flex-direction: column;align-items: center;background: #EEF3FA;padding: 3rem;min-width: 32rem;cursor: pointer} .join_card .dropzone>strong{font-size: 2.2rem;font-weight: 500} .join_card .dropzone>b{font-size: 1.5rem;color: #555;font-weight: 500;margin: 1rem 0;} .join_card .dropzone .btn{width: 100%;text-align: center;} .type_toggle{display: flex;flex: 1;} .type_toggle>button{display: flex;flex: 1;flex-direction: column;padding: 2rem;align-items: center;} .type_toggle>button+button{border-left: 1px solid #D9D9D9;} .type_toggle>button>b{background: #7C8DA4;font-weight: 500;color: #fff;font-size: 1.5rem;padding: .6rem 1.3rem;border-radius: 2rem;} .type_toggle>button>span{position: relative;font-size: 1.5rem;color: #333;display: flex;flex-direction: column;align-items: center;} .type_toggle>button>span::before{content: '';display: block;background: url(/images/ico_chk01.png);width: 5rem;height: 5rem;margin: 1rem 0;} .type_toggle>button.active>b{background: #4096FF;} .type_toggle>button.active>span::before{background: url(/images/ico_chk02.png);} .join_data{position: relative;text-align: left;} .join_data::before{content: '';position: absolute;right: 0;top: -3rem;width:200px;height:16rem;background:url(/images/cert_start.png);z-index: -1;} .join_data>span{font-size: 2rem;color: #2F69FD;margin-bottom: .5rem;display: block;} .join_data>h2{text-align: left;line-height: 1.3;font-weight: 500;font-size: 3.2rem;} .p_notice{position: relative;padding-left: 2rem;display: inline-flex;align-items: center;min-height: 2.6rem;font-size: 1.6rem;color: #333;} .p_notice::before{content: '';position: absolute;left: 0;top: 5px;width: 1.5rem;height: 1.5rem;border: 0.1rem solid #333;border-radius: 50%;box-sizing: border-box;} .p_notice::after{content: '!';position: absolute;left: 6px;top: 50%;transform: translateY(-50%);text-align: center;font-size: 1.2rem;font-weight: 700;line-height: 1;color: #333;} .p_notice+.area_section{margin-top: 2rem;} /* 회원가입 : E */ /* 챗봇 : S */ .container_wrap{width: 100%;display: flex;overflow-x: hidden;} .container_wrap>.container{flex: 1;min-width: 0;width: auto;} .container_wrap>.chatbot_area{display: flex;flex-direction: column;flex-shrink: 0;width: 40rem;height: calc(100vh - 6rem);background: #fff;border-left: 1px solid #E5E7EB;margin-right: -40rem;transition: margin-right 0.3s ease;} .container_wrap.chatbot_on > .chatbot_area{margin-right: 0;} .chatbot_area{position: relative;z-index: 50;} .chatbot_area .chatbot_header{display: flex;align-items: center;justify-content: space-between;padding: 1.4rem 1.6rem;background: #fff;border-bottom: 1px solid #ddd;flex-shrink: 0;} .chatbot_area .chatbot_header .ch_h3{margin: 0;font-size: 0;font-weight: 700;display: flex;align-items: center;position: relative;width: 100%;height: 100%;} .chatbot_area .chatbot_header .ch_h3::before{content: '';position: absolute;top: 50%;left: 0;width: 129px;height: 28px;transform: translateY(-50%);background: url(/images/logo_chatbot.png) no-repeat;background-size: 129px;} .chatbot_area .chatbot_header .ch_actions{display: flex;gap: 1rem;} .chatbot_area .chatbot_header .ch_close, .chatbot_area .chatbot_header .ch_newchat{position: relative;width: 2.8rem;height: 2.8rem;padding: 0;font-size: 0;background-color: transparent;background-repeat: no-repeat;background-position: center;border: none;border-radius: .4rem;cursor: pointer;transition: ease all .2s;} .chatbot_area .chatbot_header .ch_close:hover, .chatbot_area .chatbot_header .ch_newchat:hover{background-color: var(--bg-blue);} .chatbot_area .chatbot_header .ch_newchat{background-image: url(/images/ico_ch_new.png);background-size: 2rem;} .chatbot_area .chatbot_header .ch_close::before{content: '';position: absolute;top: 50%;left: 50%;width: 1.2rem;height: 1.2rem;transform: translate(-50%, -50%);background: linear-gradient(45deg, transparent 42%, var(--color-555) 42%, var(--color-555) 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--color-555) 42%, var(--color-555) 58%, transparent 58%);} .chatbot_area .chatbot_header .ch_close::after, .chatbot_area .chatbot_header .ch_newchat::after{position: absolute;top: calc(100% + .4rem);right: 0;padding: .4rem .8rem;background: rgba(0, 0, 0, 0.8);color: #fff;font-size: 1.2rem;line-height: 1;white-space: nowrap;border-radius: .4rem;opacity: 0;visibility: hidden;transition: opacity .2s, visibility .2s;pointer-events: none;z-index: 10;} .chatbot_area .chatbot_header .ch_newchat::after{content: '새채팅';} .chatbot_area .chatbot_header .ch_close::after{content: '창 닫기';} .chatbot_area .chatbot_header .ch_close:hover::after, .chatbot_area .chatbot_header .ch_newchat:hover::after{opacity: 1;visibility: visible;} .chatbot_area .chatbot_body{flex: 1;overflow-y: auto;padding: 1.6rem;display: flex;flex-direction: column;gap: 1.6rem;background: #fff;} .chatbot_area .chatbot_body::-webkit-scrollbar{width: .6rem;} .chatbot_area .chatbot_body::-webkit-scrollbar-thumb{border-radius: .6rem;background-color: #D1D5DB;} .chatbot_area .chatbot_body::-webkit-scrollbar-track{background-color: transparent;} .chatbot_area .chatbot_body .ch_start_box{display: flex;flex-direction: column;justify-content: space-between;height: 100%;padding: 1rem 0;} .chatbot_area .chatbot_body .ch_start_intro{display: flex;flex-direction: column;justify-content: center;flex:1;padding-bottom: 8rem;} .chatbot_area .chatbot_body .ch_start_intro h3{margin-bottom:3rem;font-size: 3rem;font-weight: 400;color: #111;line-height: 1.3;letter-spacing: -.02em;} .chatbot_area .chatbot_body .ch_start_intro h3 strong{font-weight: 700;color: var(--color-primary)} .chatbot_area .chatbot_body .ch_start_intro p{font-size: 1.6rem;color:var(--color-333);} .chatbot_area .chatbot_body .ch_start_suggest{display: flex;flex-direction: column;gap: .8rem;} .chatbot_area .chatbot_body .ch_start_label{font-size: 1.4rem;color: var(--color-555);} .chatbot_area .chatbot_body .ch_start_suggest ul{display: flex;flex-direction: column;gap: .8rem;margin: 0;padding: 0;list-style: none;} .chatbot_area .chatbot_body .ch_start_suggest ul>li>button{width: 100%;padding: 1.2rem 3rem 1.2rem 1.5rem;background: #fff;border: 1px solid #C5DCFB;border-radius: 1.2rem;font-size: 1.5rem;color: #333;text-align: left;transition: all 0.2s;position: relative;} .chatbot_area .chatbot_body .ch_start_suggest ul>li>button::before{content: '';width: .7rem;height: .7rem;border-top: .1rem solid #C5DCFB;border-right: .1rem solid #C5DCFB;transform: rotate(45deg) translateY(-50%);position: absolute;top: 50%;right: 2rem;transition: all 0.2s;} .chatbot_area .chatbot_body .ch_start_suggest ul>li>button:hover{background: #EFF6FF;border-color: var(--color-primary);} .chatbot_area .chatbot_body .ch_start_suggest ul>li>button:hover::before{border-color: var(--color-primary);} .chatbot_area .chatbot_body .ch_msg.ch_user{display: flex;flex-direction: column;align-items: flex-end;gap: .2rem;} .chatbot_area .chatbot_body .ch_msg.ch_user .ch_usertxt{position: relative;max-width: 85%;padding: 1rem 1.5rem;border-radius: 1.5rem 1.5rem .5rem 1.5rem;box-shadow: 0 8px 18px -10px rgba(26, 100, 238, .7);background: linear-gradient(315deg, #3d8bff, #1a64ee);} .chatbot_area .chatbot_body .ch_msg.ch_user .ch_usertxt>p{color: #fff;font-size: 1.4rem;line-height: 1.6;word-break: break-all;overflow-wrap: anywhere;margin: 0;} .chatbot_area .chatbot_body .ch_msg.ch_user .ch_usertxt>p.collapsed{max-height: calc(1.6em * 4);overflow: hidden;} .chatbot_area .chatbot_body .ch_msg.ch_user .ch_usertxt .ch_user_toggle.more{bottom: 8px;} .chatbot_area .chatbot_body .ch_user_toggle{color: rgba(255, 255, 255, .85);position: absolute;bottom: 10px;right: 1rem;font-size: 0;width: 2.5rem;height: 2.5rem;border-radius: 50%;background: rgb(108 165 255);padding: 10px 9px;} .chatbot_area .chatbot_body .ch_user_toggle:hover{color: #fff;text-decoration: underline;} .chatbot_area .chatbot_body .ch_user_toggle::after{content: '';width: .5rem;height: .5rem;border-left: 1px solid #fff;border-bottom: 1px solid #fff;transform: rotate( 135deg);display: block;} .chatbot_area .chatbot_body .ch_user_toggle.more{padding: 7px 9px;} .chatbot_area .chatbot_body .ch_user_toggle.more::after{transform: rotate(315deg);} .chatbot_area .chatbot_body .ch_ai_content .ch_user_toggle{background: var(--color-white);border: 1px solid var(--bg-blue);transition: ease all .3s;z-index: 1;} .chatbot_area .chatbot_body .ch_ai_content .ch_user_toggle:after{border-left: 1px solid var(--color-888);border-bottom: 1px solid var(--color-888);} .chatbot_area .chatbot_body .ch_ai_content .ch_user_toggle:hover{border-color: var(--color-skyblue);background: #f4f8ff;} .chatbot_area .chatbot_body .ch_ai_content .ch_user_toggle:hover:after{border-color: var( --color-primary);} .chatbot_area .chatbot_body .ch_msg.ch_ai{display: flex;gap: .2rem;align-items: flex-start;flex-direction: column;} .chatbot_area .chatbot_body .ch_ai_icon{width: 2.4rem;height: 2.4rem;position: relative;margin-top: 0;} .chatbot_area .chatbot_body .ch_ai_icon::before{content: '';position: absolute;top: 50%;left: 50%;width: 20px;height: 17px;transform: translate(-50%, -50%);background: url(/images/logo_chatbot_ai.png) no-repeat;} .chatbot_area .chatbot_body .ch_ai_content{flex: 1;width: 100%;} .chatbot_area .chatbot_body .ch_ai_content ol{margin-left: 1.8rem;font-size: 1.4rem;margin-top: 1rem;} .chatbot_area .chatbot_body .ch_ai_content ol>li+li{margin-top: .5rem;} .chatbot_area .chatbot_body .ch_ai_content ol+p{margin-top: 1rem;} .chatbot_area .chatbot_body .ch_ai_content ol+ul{margin: 1rem 0 0 1rem;} .chatbot_area .chatbot_body .ch_ai_content ol+ul>li{margin-bottom: 0;} .chatbot_area .chatbot_body .ch_ai_content>p{margin: 0 0 1rem;font-size: 1.4rem;color: var(--color-333);line-height: 1.6;word-break: break-all;} .chatbot_area .chatbot_body .ch_ai_content>p:last-of-type{margin-bottom: 0;} .chatbot_area .chatbot_body .ch_ai_content>.p_flex{display: flex;gap: .5rem;} .chatbot_area .chatbot_body .ch_ai_content>.p_flex>strong{font-weight: 500} .chatbot_area .chatbot_body .ch_ai_content h4{margin: 1.6rem 0 .8rem;font-size: 1.5rem;font-weight: 700;} .chatbot_area .chatbot_body .ch_ai_content>ul{margin: 0;padding-left: 0;list-style: none;} .chatbot_area .chatbot_body .ch_ai_content>ul>li{position: relative;margin-bottom: 1rem;padding-left: 1.5rem;font-size: 1.4rem;color: #1F2937;line-height: 1.6;} .chatbot_area .chatbot_body .ch_ai_content>ul>li::after{content: '';position: absolute;left: .5rem;top: .9rem;width: .3rem;height: .3rem;border-radius: 50%;background: var(--color-disabled);} .chatbot_area .chatbot_body .ch_ai_content ul ul{margin-top: .6rem;padding-left: 1.5rem;list-style: '- ';} .chatbot_area .chatbot_body .ch_ai_content ul ul>li{margin-bottom: .4rem;} .chatbot_area .chatbot_body .ch_ai_content ul ul>li::marker{color: #888;} .chatbot_area .chatbot_body .ch_ai_content>ul+p{margin-top: 1rem;} .chatbot_area .chatbot_body .ch_ai_content li:last-child{margin-bottom: 0;} .chatbot_area .chatbot_body .ch_ai_content .ch_prov_clause strong{font-weight: 500;} .chatbot_area .chatbot_body .ch_ai_content .ch_prov_clause.ch_prov_head strong{font-weight: 700;font-size: 1.5rem;} .chatbot_area .chatbot_body .ch_pop_dim{position: absolute;inset: 0;background: rgba(0, 0, 0, 0.4);z-index: 100;} .chatbot_area .chatbot_body .ch_pop_wrap{position: absolute;inset: 0;margin: auto;width: calc(100% - 4rem);height: fit-content;max-height: calc(100% - 4rem);background: #fff;border-radius: 1rem;box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, 0.15);z-index: 101;display: flex;flex-direction: column;overflow: hidden;} .chatbot_area .chatbot_body .ch_pop_header{display: flex;align-items: center;justify-content: space-between;padding: 1.2rem 1.6rem;border-bottom: 1px solid #F0F0F0;flex-shrink: 0;} .chatbot_area .chatbot_body .ch_pop_header h4{margin: 0;font-size: 1.5rem;font-weight: 600;color: #1F2937;} .chatbot_area .chatbot_body .ch_pop_close{width: 2.4rem;height: 2.4rem;padding: 0;font-size: 0;background: transparent;border: none;border-radius: .4rem;cursor: pointer;transition: background .2s;} .chatbot_area .chatbot_body .ch_pop_close::before{content: '×';font-size: 2rem;color: #6B7280;line-height: 1;} .chatbot_area .chatbot_body .ch_pop_close:hover{background: #F3F4F6;} .chatbot_area .chatbot_body .ch_pop_body{flex: 1;overflow-y: auto;padding: 1.6rem;font-size: 1.4rem;color: #1F2937;line-height: 1.6;} .chatbot_area .chatbot_body .ch_pop_body p{margin: 0 0 .8rem;} .chatbot_area .chatbot_body .ch_pop_body p:last-child{margin-bottom: 0;} .chatbot_area .chatbot_body .ch_pop_footer{display: flex;justify-content: flex-end;gap: .6rem;padding: 1.2rem 1.6rem;border-top: 1px solid #F0F0F0;flex-shrink: 0;} .chatbot_area .chatbot_body .ch_cards {display: flex;flex-direction: column;gap: 1rem;margin-top: 2.5rem;} .chatbot_area .chatbot_body .ch_section_title {position: relative;padding-left: 2.5rem;font-size: 1.6rem;font-weight: 600;color: var(--color-111);} .chatbot_area .chatbot_body .ch_section_title::before{content: '';position: absolute;width: 2rem;height: 2rem;top: 1px;left: 0;} .chatbot_area .chatbot_body .ch_section_title.type1::before{background: url(/images/ico_ch02.png) no-repeat;} .chatbot_area .chatbot_body .ch_section_title.type2::before{background: url(/images/ico_ch03.png)no-repeat;} .chatbot_area .chatbot_body .ch_card {position: relative;padding: 1.2rem;font-size: 1.4rem;border-radius: 1rem;background: #fff;border: 1px solid var(--bg-blue);transition: ease all .3s;} .chatbot_area .chatbot_body .ch_card:hover{border-color: #c9d9ef;box-shadow: 0 10px 15px -10px rgba(8, 40, 120, .1);} .chatbot_area .chatbot_body .ch_card_lawname {display: inline-block;color: var( --color-primary);font-weight: 600;margin-bottom: .6rem;border: 1px solid var(--bg-blue);border-radius: .6rem;padding:.1rem .6rem;background: #f4f8ff;font-size: 1.3rem;} .chatbot_area .chatbot_body .ch_card_provision {max-height: 80px; overflow: hidden;transition: max-height 0.25s ease;} .chatbot_area .chatbot_body .ch_card_provision.on{max-height: 4000px;} .chatbot_area .chatbot_body .ch_card_provision.off{max-height: 6.7rem;} .chatbot_area .chatbot_body .ch_card_date {display: block;position: relative;color: var(--color-555);font-size: 1.3rem;margin-top: 1rem;border-top: 1px solid var(--bg-blue);padding-top: 1rem;padding-right: 3rem;} .chatbot_area .chatbot_body .ch_msg.ch_ai .ch_card_provision.off ~ .ch_card_date::after{content: '';position: absolute;left: 0;right: 0;bottom: calc(100% + 1rem);height: 4rem;background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);pointer-events: none;} .chatbot_area .chatbot_body .ch_card a {font-size: 1.3rem;color: var(--color-555);} .chatbot_area .chatbot_body .ch_card a::after {content: '';display: inline-block;width: 1.4rem;height: 1.8rem;margin-bottom: -.5rem;margin-left: .4rem;background: url(/images/ico_open.png);} .chatbot_area .chatbot_body .ch_card:has(>a){display: flex;justify-content: space-between;align-items: center;gap: 1rem;padding-left: 2.6rem;} .chatbot_area .chatbot_body .ch_card:has(>a)::before{content: '';position: absolute;left: 1.2rem;top: 50%;transform: translateY(-50%);width: .5rem;height: .5rem;background: var(--bg-disabled);border-radius: 50%;} .chatbot_area .chatbot_body .ch_card:has(>a)>a{flex-shrink: 0;white-space: nowrap;text-decoration: underline;} .chatbot_area .chatbot_body .ch_timeline {margin-top: 2.5rem;} .chatbot_area .chatbot_body .ch_timeline_heading {display: flex;margin-bottom: .8rem;font-size: 1.6rem;font-weight: 600;color: var(--color-111);position: relative;padding-left: 2.5rem;} .chatbot_area .chatbot_body .ch_timeline_heading:before {content: '';position: absolute;width: 2rem;height: 2rem;top: 1px;left: 0;background: url(/images/ico_ch01.png) no-repeat;} .chatbot_area .chatbot_body .ch_timeline_heading>span{font-weight: 600;} .chatbot_area .chatbot_body .ch_timeline_box{padding: 1.2rem;border-radius: 1rem;border: 1px solid var(--bg-blue);} .chatbot_area .chatbot_body .ch_timeline_item {display: flex;gap: .7rem;position: relative;padding-bottom: 2.5rem;} .chatbot_area .chatbot_body .ch_timeline_item:last-child { padding-bottom: 4px; } .chatbot_area .chatbot_body .ch_timeline_item:not(:last-child)::before {content: '';position: absolute;left: .4rem;top: 1.2rem;bottom: 0;width: .2rem;height: 100%;background: #dce6f7;} .chatbot_area .chatbot_body .ch_timeline_dot {position: relative;margin-top: .7rem;width: 1rem;height: 1rem;border-radius: 50%;border: 3px solid var(--color-skyblue);z-index: 1;background: var(--color-white);} .chatbot_area .chatbot_body .ch_timeline_content {flex: 1;border-radius: .8rem;color: var(--color-);background: var(--color-white);} .chatbot_area .chatbot_body .ch_timeline_date {display: inline-block;padding: .1rem .6rem;margin-bottom: .6rem;border: 1px solid var(--bg-blue);border-radius: .6rem;color: var(--color-primary);font-weight: 600;font-size: 1.3rem;background: #f4f8ff;} .chatbot_area .chatbot_body .ch_timeline_title {font-size: 1.5rem;color: var(--color-333);font-weight: 700;} .chatbot_area .chatbot_body .ch_timeline_desc {font-size: 1.4rem;color: var(--color-555);} .chatbot_area .chatbot_body .ch_typing {display: inline-flex; gap: 3px; padding: 8px 0;} .chatbot_area .chatbot_body .ch_progress_text+.ch_typing{margin-left: .5rem;} .chatbot_area .chatbot_body .ch_typing span {width: 6px; height: 6px; border-radius: 50%;animation: ch_bounce 1.2s infinite;background: #9ca3af;} .chatbot_area .chatbot_body .ch_typing span:nth-child(2) { animation-delay: 0.15s; } .chatbot_area .chatbot_body .ch_typing span:nth-child(3) { animation-delay: 0.3s; } .chatbot_area .chatbot_body .ch_adj_group{display: flex;flex-direction: column;border: 1px solid var(--bg-blue);border-radius: 1rem;background: #fff;margin-bottom: .8rem;transition: ease all .3s;} .chatbot_area .chatbot_body .ch_adj_group:hover{border-color: #c9d9ef;box-shadow: 0 10px 15px -10px rgba(8, 40, 120, .1);} .chatbot_area .chatbot_body .ch_adj_group_head{display: flex;align-items: center;gap: .6rem;padding: 1.2rem;cursor: pointer;font-size: 1.4rem;font-weight: 600;color: var(--color-333);user-select: none;transition: background .2s;background: #f1f4f9;position: relative;border-radius: 1rem 1rem 0 0;} .chatbot_area .chatbot_body .ch_adj_group_head:hover{background: #e9f1ff;} .chatbot_area .chatbot_body .ch_adj_group_head::after{content: '';position: absolute;right: 1.2rem;top: 50%;width: .7rem;height: .7rem;border-right: .2rem solid #6B7280;border-bottom: .2rem solid #6B7280;transform: translateY(-50%) rotate(45deg);transition: transform 0.2s ease;} .chatbot_area .chatbot_body .ch_adj_group_head.on::after{transform: translateY(-50%) rotate(-135deg);} .chatbot_area .chatbot_body .ch_adj_group:not(:has(.ch_card:nth-child(5))) .ch_adj_group_head{pointer-events: none;} .chatbot_area .chatbot_body .ch_adj_group:not(:has(.ch_card:nth-child(5))) .ch_adj_group_head::after{display: none;} .chatbot_area .chatbot_body .ch_adj_count{display: inline-flex;align-items: center;justify-content: center;min-width: 2rem;height: 2rem;padding: 0 .8rem;background: #b7b7b7;color: var(--color-white);border-radius: 999px;font-size: 1.1rem;font-weight: 600;line-height: 1;} .chatbot_area .chatbot_body .ch_adj_group .ch_card{border: none;border-radius: 0;background: transparent;box-shadow: none;} .chatbot_area .chatbot_body .ch_adj_group_head+.ch_card{border-top: 1px solid var(--bg-blue);} .chatbot_area .chatbot_body .ch_adj_group .ch_card+.ch_card{border-top: 1px solid var(--bg-blue);} .chatbot_area .chatbot_body .ch_adj_group .ch_card:hover{border-color: var(--bg-blue);box-shadow: none;background: transparent;} .chatbot_area .chatbot_body .ch_card_provision .ch_prov_clause{margin-bottom:.8rem;} .chatbot_area .chatbot_body .ch_card_provision .ch_prov_clause.ch_prov_head{margin-bottom:.4rem;} .chatbot_area .chatbot_body .ch_card_provision .ch_prov_clause:last-child{margin-bottom:0;} .chatbot_area .chatbot_body .ch_card_provision .ch_prov_clause.ch_prov_item{padding-left:1rem;} .chatbot_area .chatbot_body .ch_law_img_pop{display: inline-block;position: relative;max-width: 100%;margin: 1rem 0;padding: 1rem;border: 1px solid var(--bg-blue);border-radius:1rem;} .chatbot_area .chatbot_body .ch_law_img_pop img{display: block;max-width: 100%;height: auto;} .chatbot_area .chatbot_body .ch_law_img_pop .ch_law_img_zoom{position: absolute;bottom:.5rem;right:.5rem;border: none;border-radius: 50%;width: 3rem;height: 3rem;background: rgba(0,0,0,.7) url(/images/ico_ch_zoom.png) center no-repeat;font-size: 0;transition: .3s ease all;} .chatbot_area .chatbot_body .ch_law_img_pop .ch_law_img_zoom:hover{background: rgba(0,0,0,.9) url(/images/ico_ch_zoom.png) center no-repeat;} .chatbot_area .chatbot_body .ch_law_img_pop .ch_law_img_zoom::after{content: '크게보기';position: absolute;bottom: calc(100% + .2rem);right: 0;padding: .4rem .8rem;background: rgba(0, 0, 0, 0.8);color: #fff;font-size: 1.2rem;line-height: 1;white-space: nowrap;border-radius: .4rem;opacity: 0;visibility: hidden;transition: opacity .2s, visibility .2s;pointer-events: none;z-index: 10;} .chatbot_area .chatbot_body .ch_law_img_pop .ch_law_img_zoom:hover::after{opacity: 1;visibility: visible;} .chatbot_area .chatbot_body .pop_wrap .pop_tit .pop_label{display: inline-block;padding: .2rem .8rem;margin-right: .4rem;border-radius: 4rem;font-size: 1.4rem;background: rgba(0, 0, 0, .3);} .chatbot_area .chatbot_body .pop_wrap .pop_con{padding-bottom: 3rem;} .chatbot_area .chatbot_body .pop_wrap .pop_con img{max-width: 100%;height: auto;margin: 0 auto;} .chatbot_area .chatbot_footer{position: relative;padding: 1.2rem 1.6rem 1.6rem;flex-shrink: 0;background: #fff;} .chatbot_area .chatbot_footer .ch_input_box{display: flex;align-items: flex-end;gap: .6rem;padding: .8rem 1rem;background: #fff;border: 1px solid #D1D5DB;border-radius: 1.6rem;box-shadow: 0 .2rem .6rem rgba(0, 0, 0, 0.05);transition: box-shadow .2s, border-color .2s;} .chatbot_area .chatbot_footer .ch_input_box:focus-within{border-color: var(--color-skyblue);box-shadow: 0 0 0 .3rem rgba(37, 99, 235, 0.15), 0 .2rem .8rem rgba(0, 0, 0, 0.08);} .chatbot_area .chatbot_footer .ch_input_box textarea{flex: 1;min-width: 0;padding: .4rem;margin: 0;background: transparent;border: none;border-radius: 0;font-size: 1.4rem;line-height: 1.5;color: #1F2937;font-family: inherit;box-sizing: border-box;resize: none;overflow-y: hidden;height: calc(1.5em + .8rem);min-height: calc(1.5em + .8rem);max-height: calc(1.5em * 3 + .8rem);} .chatbot_area .chatbot_footer .ch_input_box textarea:not(:placeholder-shown){overflow-y: auto;} .chatbot_area .chatbot_footer .ch_input_box textarea:focus{outline: none;} .chatbot_area .chatbot_footer .ch_input_box textarea::placeholder{color: #9CA3AF;} .chatbot_area .chatbot_footer .ch_input_box textarea::-webkit-scrollbar{width: .6rem;} .chatbot_area .chatbot_footer .ch_input_box textarea::-webkit-scrollbar-thumb{border-radius: .6rem;background-color: #D1D5DB;} .chatbot_area .chatbot_footer .ch_input_box textarea::-webkit-scrollbar-track{background-color: transparent;} .chatbot_area .chatbot_footer .ch_send{flex-shrink: 0;width: 3rem;height: 3rem;padding: 0;font-size: 0;border: none;border-radius: 50%;cursor: pointer;transition: background .2s;background: #DBEAFE;} .chatbot_area .chatbot_footer .ch_send:hover{background: #BFDBFE;} .chatbot_area .chatbot_footer .ch_send::before{content: '➤';font-size: 1.4rem;color: #2563EB;line-height: 1;} .chatbot_area .chatbot_footer .ch_send.ing{position: relative;background: var(--bg-disabled) !important;} .chatbot_area .chatbot_footer .ch_send.ing:before{content: '';display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1rem;height: 1rem;border-radius: .2rem;background: var(--color-555);} .chatbot_area .chatbot_footer .ch_input_actions{display: flex;align-items: center;gap: .2rem;flex-shrink: 0;} .chatbot_area .chatbot_footer .ch_scroll_down{position: absolute;left: 0;right: 0;margin-left: auto;margin-right: auto;bottom: calc(100% + .6rem);width: 3.2rem;height: 3.2rem;padding: 0;font-size: 0;border: 1px solid var(--border-default);border-radius: 50%;background: var(--color-white);box-shadow: 0 .2rem .8rem rgba(0, 0, 0, 0.15);cursor: pointer;display: flex;align-items: center;justify-content: center;transition: background .2s;z-index: 5;animation: ch_scroll_bounce 1.5s ease-in-out infinite;} .chatbot_area .chatbot_footer .ch_scroll_down:hover{background: var(--bg-gray);animation-play-state: paused;} .chatbot_area .chatbot_footer .ch_scroll_down::before{content: '';position: absolute;top: 1.1rem;left: 50%;transform: translateX(-50%) rotate(45deg);width: .7rem;height: .7rem;border-right: .2rem solid var(--color-primary);border-bottom: .2rem solid var(--color-primary);} .chatbot_area .chatbot_footer .ch_scroll_down::after{content: '';position: absolute;top: 8px;left: 50%;transform: translateX(-50%);width: 2px;height: 12px;background: var(--color-primary);} .con_bottom .card .ag_chat.chatbot_area { height: calc(100vh - 24rem); min-height: 0; width: 100%; display: flex; flex-direction: column; background: #fff; z-index: 1;} .con_bottom .card .ag_startpos { justify-content: flex-start !important; height: auto !important; width: 100%; max-width: 76rem; margin: 0 auto; padding-top: 7vh; box-sizing: border-box; } .con_bottom .card .ag_startpos .ch_start_intro { flex: none !important; padding-bottom: 0 !important; margin-bottom: 2.4rem; text-align: center; } .con_bottom .card .chatbot_area .chatbot_body .ch_start_intro h3 br{display: none;} .con_bottom .card .chatbot_area .chatbot_body .ch_start_intro h3 strong{margin-left: 1rem;} .con_bottom .card .chatbot_area .chatbot_footer{padding-left: 0;padding-right: 0;} .con_bottom .card .chatbot_area .chatbot_body .ch_start_box.ag_startpos{position: relative;height: 100% !important;justify-content: center !important;padding-top: 0 !important;padding-bottom: 22rem;} .con_bottom .card .chatbot_area .chatbot_body .ch_start_box.ag_startpos .ch_start_suggest{position: absolute;left: 0;right: 0;bottom: 2rem;} @keyframes ch_bounce { 0%, 60%, 100%{transform: translateY(0); opacity: 0.4;} 30%{transform: translateY(-4px); opacity: 1;} } @keyframes ch_scroll_bounce{ 0%, 100%{transform: translateY(0);} 50%{transform: translateY(-.5rem);} } /* 챗봇 : E */ /* 검증이력목록 임시 */ .area_section .card{padding: 0;} /* allmenu : S */ .allmenu_pop{z-index: 65 !important;} .allmenu{width: 100%;max-width: 143rem;min-height: calc(100vh - 6rem);margin: 0 auto;padding: 3rem 2rem;} .allmenu .con_bottom .card{min-height: auto;padding: 0;border-radius: 0;background: none;box-shadow: none;} .allmenu .allmenu_grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 2.4rem;align-items: start;} .allmenu .allmenu_col{display: flex;flex-direction: column;gap: 2.4rem;} .allmenu .menu_group{display: flex;flex-direction: column;gap: 1.6rem;} .allmenu .menu_group.span2{grid-column: span 2;} .allmenu .group_tit{display: flex;align-items: center;gap: .9rem;font-size: 1.9rem;font-weight: 700;color: var(--color-333);} .allmenu .group_tit:before{content: '';width: .5rem;height: 1.8rem;border-radius: 1rem;background: var(--color-primary);} .allmenu .group_cards{display: grid;gap: 1.6rem;height: 100%;} .allmenu .menu_group.span2 .group_cards{grid-template-columns: repeat(2, 1fr);} .allmenu .menu_card{position: relative;display: flex;flex-direction: column;padding: 1.2rem 2.2rem 1.4rem;background: var(--color-white);border: 1px solid var(--border-default);border-radius: 1.4rem;box-shadow: 0 .4rem 1.6rem rgba(0, 47, 130, .04);transition: .25s all ease;overflow: hidden;} .allmenu .menu_card:before{content: '';position: absolute;top: 0;left: 0;right: 0;height: .3rem;background: var(--color-primary);opacity: 0;transition: .25s all ease;} .allmenu .menu_card:hover{border-color: var(--color-primary);box-shadow: 0 1rem 2.8rem rgba(0, 47, 130, .12);transform: translateY(-.3rem);} .allmenu .menu_card:hover:before{opacity: 1;} .allmenu .menu_card .card_head{display: flex;align-items: center;gap: 1.1rem;padding-bottom: 1rem;margin-bottom: 1rem;border-bottom: 1px solid #EEF1F5;} .allmenu .menu_card .card_head h4{position: relative;display: block;flex: 1;font-size: 1.7rem;font-weight: 700;} .allmenu .menu_card .card_head h4:before{content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 3.6rem;height: 3.6rem;border-radius: 1rem;background: var(--bg-blue);transition: .25s all ease;} .allmenu .menu_card .card_head h4:after{content: '';position: absolute;top: 50%;left: 1.8rem;transform: translate(-50%, -50%);width: 1.8rem;height: 1.8rem;background: url(/images/ico_menu2.png);} /* ── card_head 아이콘: 메뉴별 background-position (스프라이트 /images/ico_menu.png) ── .menu_group:nth-child 은 열(.allmenu_col)마다 겹치므로 열까지 구분해 각 메뉴를 개별 지정한다. default / :hover 쌍으로 값만 바꾸면 된다. */ /* 1열 · 감면컨설팅 */ .allmenu .allmenu_col:nth-child(1) .menu_group:nth-child(2) .group_cards .menu_card:nth-child(1) .card_head h4:after{background-position: -126px 0px} /* 사업장관리 (좌표 조정 가능) */ .allmenu .allmenu_col:nth-child(1) .menu_group:nth-child(2) .group_cards .menu_card:nth-child(2) .card_head h4:after{background-position: -144px -18px} /* 공제·감면세액관리 (좌표 조정 가능) */ /* 2열 · 재산제세모의계산 (시나리오 관리) */ .allmenu .allmenu_col:nth-child(2) .menu_group:nth-child(1) .group_cards .menu_card:nth-child(2) .card_head h4:after{background-position: -144px -36px;} /* 시나리오 관리 */ /* 3열 · 나의메뉴 / 회원가입 */ .allmenu .allmenu_col:nth-child(3) .menu_group:nth-child(1) .group_cards .menu_card:nth-child(1) .card_head h4:after{background-position: -198px 0;} /* 나의메뉴 */ .allmenu .allmenu_col:nth-child(3) .menu_group:nth-child(2) .group_cards .menu_card:nth-child(1) .card_head h4:after{background-position: -198px -18px;} /* 회원가입 (좌표 지정 필요) */ .allmenu .menu_card:hover .card_head h4:before{background: var(--color-white);} /* 시나리오 관리(2열·재산제세모의계산 2번째 카드)·나의메뉴(3열·1번째 카드)만 hover 시 아이콘 박스 배경 하늘색 */ .allmenu .allmenu_col:nth-child(2) .menu_group:nth-child(1) .group_cards .menu_card:nth-child(2):hover .card_head h4:before, .allmenu .allmenu_col:nth-child(3) .menu_group:nth-child(1) .group_cards .menu_card:nth-child(1):hover .card_head h4:before{background: var(--bg-blue);} .allmenu .menu_card .card_head h4 a{display: block;margin-left: -1rem;margin-right: -1rem;padding: 1.2rem 1.2rem 1.2rem 5.7rem;color: var(--color-333);border-radius: 1rem;transition: .2s color ease, .2s background ease;} .allmenu .menu_card:hover .card_head h4 a, .allmenu .menu_card .card_head h4 a:hover{color: var(--color-primary);background: var(--bg-blue);} /* 시나리오 관리(2열·재산제세모의계산 2번째 카드)·나의메뉴(3열·1번째 카드)만 hover 시 배경 흰색 */ .allmenu .allmenu_col:nth-child(2) .menu_group:nth-child(1) .group_cards .menu_card:nth-child(2):hover .card_head h4 a, .allmenu .allmenu_col:nth-child(3) .menu_group:nth-child(1) .group_cards .menu_card:nth-child(1):hover .card_head h4 a{background: var(--color-white);} .allmenu .card_links{position: relative;display: flex;flex-direction: column;gap: .2rem;} .allmenu .card_links:before{content: '';position: absolute;left: 1rem;top: .8rem;bottom: .8rem;width: 1px;background: #E3E7ED;z-index: 1;} .allmenu .card_links li a{position: relative;display: block;padding: .8rem 1rem .8rem 2.4rem;font-size: 1.5rem;color: var(--color-555);border-radius: .8rem;transition: .2s all ease;} .allmenu .card_links li a:before{content: '';position: absolute;left: .8rem;top: 50%;transform: translateY(-50%);width: .4rem;height: .4rem;border-radius: 50%;background: #B8C0CC;z-index: 2;transition: .2s all ease;} .allmenu .card_links li a:hover{color: var(--color-primary);background: var(--bg-blue);font-weight: 600;} .allmenu .card_links li a:hover:before{background: var(--color-primary);} .allmenu .menu_card.link_type{padding: 0;background: none;border: none;box-shadow: none;overflow: visible;} .allmenu .menu_card.link_type:before{display: none;} .allmenu .menu_card.link_type:hover{transform: none;box-shadow: none;border-color: transparent;} .allmenu .menu_card.link_type .card_links{gap: 1.2rem;} .allmenu .menu_card.link_type .card_links:before{display: none;} .allmenu .menu_card.link_type .card_links li a{display: flex;align-items: center;min-height: 6.4rem;padding: 0 2rem 0 6.9rem;font-size: 1.7rem;font-weight: 600;color: var(--color-333);background: var(--color-white);border: 1px solid var(--border-default);border-radius: 1.4rem;box-shadow: 0 .4rem 1.6rem rgba(0, 47, 130, .04);transition: .25s all ease;} .allmenu .menu_card.link_type .card_links li a:before{content: '';position: absolute;left: 2.2rem;top: 50%;transform: translateY(-50%);width: 3.6rem;height: 3.6rem;border-radius: 1rem;background: var(--bg-blue);transition: .25s all ease;} .allmenu .menu_card.link_type .card_links li a:after{content: '';position: absolute;top: 50%;left: 4rem;transform: translate(-50%, -50%);width: 1.8rem;height: 1.7rem;background: url(/images/ico_menu2.png);z-index: 2;} /* ── 전체메뉴 link_type 아이콘: 메뉴 항목별 background-position (스프라이트 /images/ico_menu2.png) ── .menu_group:nth-child(N) 은 열(.allmenu_col)마다 겹치므로, 열까지 구분해 각 메뉴를 개별 지정한다. 아래 background-position 값만 메뉴별로 바꾸면 된다. */ /* 1열 · 내업무현황 */ .allmenu .allmenu_col:nth-child(1) .menu_group:nth-child(1) .menu_card.link_type .card_links li:nth-child(1) a:after{background-position: -108px 0;} /* 업무현황 */ .allmenu .allmenu_col:nth-child(1) .menu_group:nth-child(1) .menu_card.link_type .card_links li:nth-child(2) a:after{background-position: -108px -18px;} /* 고객등록관리 */ /* 2열 · 재산제세모의계산 */ .allmenu .allmenu_col:nth-child(2) .menu_group:nth-child(1) .menu_card.link_type .card_links li:nth-child(1) a:after{background-position: -144px 0;} /* 모의계산현황 */ .allmenu .allmenu_col:nth-child(2) .menu_group:nth-child(1) .menu_card.link_type .card_links li:nth-child(2) a:after{background-position: -126px -18px;} /* 고객정보 관리 */ /* 2열 · 고객센터 */ .allmenu .allmenu_col:nth-child(2) .menu_group:nth-child(2) .menu_card.link_type .card_links li:nth-child(1) a:after{background-position: -180px 0;} /* 공지사항 */ .allmenu .allmenu_col:nth-child(2) .menu_group:nth-child(2) .menu_card.link_type .card_links li:nth-child(2) a:after{background-position: -180px -18px;} /* 문의하기 */ .allmenu .allmenu_col:nth-child(2) .menu_group:nth-child(2) .menu_card.link_type .card_links li:nth-child(3) a:after{background-position: -180px -36px;} /* 자료실 */ .allmenu .menu_card.link_type .card_links li a:hover{border-color: var(--color-primary);color: var(--color-primary);background: var(--bg-blue);transform: translateY(-.3rem);box-shadow: 0 1rem 2.8rem rgba(0, 47, 130, .12);} .allmenu .menu_card.link_type .card_links li a:hover:before{background: var(--color-white);} /* allmenu : E */ /* login : S */ .login_wrap{display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 0 auto;width: 100%;background: url(/images/bg.png) no-repeat;background-size: cover;} .login_wrap .header{width: 100%;background: transparent;border-bottom: 1px solid rgb(255 255 255 / 50%);box-shadow: none;} .login_wrap .header .top_menu_wrap .logout .all_menu{background: url(/images/ico_allmenu_w.png);} .login_wrap .login_inner{display: flex;align-items: center;justify-content: space-between;width: 100%;max-width: 125rem;height: calc(100vh - 6rem);} .login_wrap .login_inner .login_logo{margin-left: 8.5rem;margin-bottom: 4rem;} .login_wrap .login_inner .login_logo h1{display: flex;flex-direction: column;gap: 3rem;} .login_wrap .login_inner h2{font-size: 3rem;font-weight: 700;margin-bottom: 1.8rem;} .login_wrap .login_inner .login_box{width: 50rem;} .login_wrap .login_inner .login_box .login_box_inner{position: relative;padding: 4.5rem 6.5rem 4.5rem 6.5rem;border-radius: 0 3rem;box-shadow: 2px 0 2rem rgba(0, 0, 0, 0.05);background: rgba(255, 255, 255, 0.65);border: 1px solid #fff;} .login_wrap .login_inner .login_box .login_list{display: flex;flex-direction: column;gap: 2rem;} .login_wrap .login_inner .login_box .login_list li>div{display: flex;flex-direction: column;gap: .9rem;} .login_wrap .login_inner .login_box .login_list li label{font-size: 1.8rem;} .login_wrap .login_inner .login_box .login_list li>div.check_radio{margin-top: 1.5rem;} .login_wrap .login_inner .login_box .check_radio{position: relative;} .login_wrap .login_inner .login_box .check_radio input{left: 0;width: 1px;height: 1px;opacity: 0;clip: rect(0 0 0 0);clip-path: inset(50%);} .login_wrap .login_inner .login_box .login_list .password_wrapper{position: relative;} .login_wrap .login_inner .login_box .login_list .password_wrapper button{display: inline-flex;position: absolute;top: 50%;right: .5rem;transform: translateY(-50%);} .login_wrap .login_inner .login_box .login_list input[type=text], .login_wrap .login_inner .login_box .login_list input[type=password]{border-radius: .8rem;height: 6rem;padding: 2rem 1.5rem .4rem;font-size: 1.6rem;width: 100%;} .login_wrap .login_inner .login_box .login_list .password_wrapper input{padding-right: 4rem;} .login_wrap .login_inner .login_box .login_list input[type=text]:focus, .login_wrap .login_inner .login_box .login_list input[type=password]:focus{outline: 2px solid var(--c-primary);box-shadow: 5px 0 2rem rgba(0, 0, 0, 0.15);} .login_wrap .login_inner .login_box .login_list input:-webkit-autofill{font-family: 'Pretendard GOV', '나눔고딕', 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic' !important;font-size: 1.6rem !important;} .login_wrap .login_inner .login_box .login_list input:-internal-autofill-previewed, .login_wrap .login_inner .login_box .login_list input:-internal-autofill-selected{font-family: 'Pretendard GOV', '나눔고딕', 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic' !important;font-size: 1.6rem !important;} .login_wrap .login_inner .login_box .login_list .input_item{position: relative;} .login_wrap .login_inner .login_box .login_list .input_item label{position: absolute;left: 1.6rem;top: 50%;transform: translateY(-50%);font-size: 1.6rem;font-weight: 400;color: var(--color-888);pointer-events: none;transition: top .15s ease, font-size .15s ease, color .15s ease;} .login_wrap .login_inner .login_box .login_list .input_item input:focus + label, .login_wrap .login_inner .login_box .login_list .input_item input:-webkit-autofill + label, .login_wrap .login_inner .login_box .login_list .input_item input:not(:placeholder-shown) + label{top: 1.1rem;transform: none;font-size: 1.2rem;} .login_wrap .login_inner .login_box .login_list .input_item input:focus + label{color: var(--color-primary);} .login_wrap .login_inner .login_box .login_list .btn{display: block;padding: .8rem 3rem;width: 100%;height: 6rem;text-align: center;font-size: 1.8rem;font-weight: 600;line-height: 1.8;color: var(--c-primary);border-color: var(--c-primary);border-radius: .8rem;} .login_wrap .login_p{display: block;position: relative;margin-bottom: 1.5rem;font-size: 1.4rem;color: var(--color-888);text-align: center;} .login_wrap .login_p::before, .login_wrap .login_p::after{content: '';position: absolute;top: 9px;left: 0;width: 34%;height: 1px;background: var(--btn-border);} .login_wrap .login_p::after{left: auto;right: 0;} /* 로그인 박스: 헤더행(제목+회원가입) / 푸터행(아이디저장+찾기) */ .login_wrap .login_inner .login_box .login_head{display: flex;align-items: center;justify-content: space-between;margin-bottom: 1.8rem;} .login_wrap .login_inner .login_box .login_head h2{margin-bottom: 0;} .login_wrap .login_inner .login_box .btn_join{display: inline-flex;align-items: center;gap: .4rem;height: 4rem;padding: 0 3.2rem 0 1.8rem;border: 1px solid var(--btn-border);border-radius: 3rem;font-size: 1.6rem;color: var(--color-555);background: var(--color-white);position: relative;} .login_wrap .login_inner .login_box .btn_join::after{content: '';position: absolute;border-top: 1px solid var(--color-333);border-right: 1px solid var(--color-333);top: 50%;right: 19px;width: .7rem;height: .7rem;transform: translateY(-50%) rotate(45deg);} .login_wrap .login_inner .login_box .login_foot{display: flex;align-items: center;justify-content: space-between;margin-top: 0.8rem;} .login_wrap .login_inner .login_box .login_find{display: flex;align-items: center;font-size: 1.4rem;} .login_wrap .login_inner .login_box .login_find a{position: relative;padding: 0 1rem;color: var(--color-555);} .login_wrap .login_inner .login_box .login_find a:last-child{padding-right: 0;} .login_wrap .login_inner .login_box .login_find a+a::before{content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 1px;height: 1.2rem;background: var(--btn-border);} .login_wrap .header .top_menu_wrap .logout .btn_login{display: none !important;} .login_wrap .footer{width: 100%;} .login_toggle{position: absolute;top: -5.5rem;right: 0;} .login_toggle>button{display: flex;align-items: center;justify-content: center;width: 4rem;height: 4rem;border-radius: 50%;color: white;box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.4);background: #2563eb;} .login_toggle .quick_login{margin: 0 0 1rem 0;font-size: 2rem;font-weight: 600;text-align: center;} .login_toggle .quick_btn{display: flex;flex-direction: column;gap: 0.5rem;} .login_toggle .quick_btn>.btn{height: 3.5rem;color: #fff;border: 0;} .login_toggle .quick_btn>.btn:nth-child(1){background-color: #5f5fee !important;} .login_toggle .quick_btn>.btn:nth-child(2){background-color: #0eb17c !important;} .login_toggle .quick_btn>.btn:nth-child(3){background-color: #ee950a !important;} .login_toggle .quick_btn>.btn:nth-child(4){background-color: #ef3759 !important;} .login_toggle .quick_btn>.btn:nth-child(5){background-color: #0c9ee2 !important;} /* login : E */ /* 고객 기본정보 : S */ .cust_info{display: flex;gap: 2rem;align-items: stretch;} .cust_info .cust_left{display: flex;flex-direction: column;width: 28rem;flex-shrink: 0;} .cust_info .cust_right{flex: 1;min-width: 0;} .cust_rep{flex: 1;display: flex;flex-direction: column; min-height: 67rem;padding: 2rem;background: var(--color-white);border-radius: 1rem;border: 1px solid var(--border-default);} .cust_memo{margin-top: 1rem;padding-top: 1rem;border-top: 1px solid #EEF1F5;} .cust_rep .rep{display: flex;align-items: flex-start;gap: 1.2rem;margin-bottom: 1.6rem;padding-bottom: 1.6rem;border-bottom: 1px solid #EEF1F5;} .cust_rep .rep_ico{flex-shrink: 0;width: 5rem;height: 5rem;border-radius: 50%;background: #EAF1FD;position: relative;} .cust_rep .rep_ico::before{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 3rem;height: 3rem;background: url(/images/ico_ceo.png);} .cust_rep .rep_txt{flex: 1;min-width: 0;display: flex;flex-direction: column;line-height: 1.25;margin-top: .5rem;} .cust_rep .rep_txt span{font-size: 1.3rem;font-weight: 600;color: var(--color-primary);} .cust_rep .rep_txt strong{font-size: 1.9rem;font-weight: 700;color: var(--color-111);} .cust_rep .rep_detail{flex: 1;} .cust_rep .rep_info{display: grid;grid-template-columns: 5.6rem 1fr;row-gap: .6rem;column-gap: 1rem;margin-bottom: 1.4rem;font-size: 1.5rem;} .cust_rep .rep_info dt{color: var(--color-111);font-weight: 500;} .cust_rep .rep_info dd{color: var(--color-555);word-break: keep-all !important;} .cust_tags{display: flex;flex-wrap: wrap;gap: .6rem;} .cust_tags span{display: inline-flex;align-items: center;height: 2.2rem;padding: 0 .7rem;border-radius: 2rem;background: var(--bg-gray2);color: var(--color-555);font-size: 1.3rem;font-weight: 500;} .cust_memo .memo_head{display: flex;align-items: center;justify-content: space-between;margin-bottom: .8rem;} .cust_memo .memo_head h4{font-size: 1.6rem;color: var(--color-111);} .cust_memo .btn_memo_edit{width: 2.4rem;height: 2.4rem;padding: 0;font-size: 0;border-radius: .4rem;transition: .3s ease all;position: relative;} .cust_memo .btn_memo_edit:before{content: '';position: absolute;top: 4px;left: 4px;width: 1.6rem;height: 1.6rem;background-image: url(/images/ico_edit.png);background-size: cover;background-repeat: no-repeat;background-position: center;} .cust_memo .btn_memo_edit:hover{background-color: var(--bg-blue);} .cust_memo textarea{width: 100%;min-height: 14rem;padding: 1rem;border: 1px solid var(--border-default);border-radius: .4rem;font-size: 1.4rem;line-height: 1.5;color: var(--color-555);resize: none;background: var(--color-white);} .cust_memo textarea:focus{outline: none;border-color: var(--color-primary);} .cust_memo textarea::-webkit-scrollbar{width: .6rem;} .cust_memo textarea::-webkit-scrollbar-thumb{border-radius: .6rem;background-color: #D1D5DB;} .cust_memo textarea::-webkit-scrollbar-track{background-color: transparent;} .cust_box{padding: 1.5rem 2rem 2rem;border: 1px dashed #C7C7C7;border-radius: 1rem;} .cert_list{display: flex;flex-wrap: wrap;gap: 1rem;} .cert_list .cert_item{display: flex;flex-direction: column;justify-content: center;gap: .3rem;flex: 1;min-width: 18rem;min-height: 6.4rem;padding: 1.2rem 1.5rem;border: 1px solid var(--border-default);border-radius: .8rem;background: var(--bg-gray);} .cert_list .cert_item strong{font-size: 1.5rem;font-weight: 600;color: var(--color-333);} .cert_list .cert_item span{font-size: 1.3rem;color: var(--color-888);} .cert_list .cert_item.empty{border-style: dashed;background: transparent;} .card .taxtype_btn.asset{display: grid;grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));gap: 1rem;} .card .taxtype_btn.asset .btn{min-width: 0;} .logo_gallery{display: grid;grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));gap: 1rem;margin-top: 1.5rem;} .logo_item{display: flex;align-items: center;justify-content: center;height: 6.4rem;padding: 1rem 1.5rem;border: 1px solid var(--border-default);border-radius: .8rem;background: var(--color-white);transition: border-color .15s, box-shadow .15s;} .logo_item img{max-width: 100%;max-height: 3.2rem;object-fit: contain;} /* 고객 기본정보 : E */ /* 대시보드 : S */ .dash_area_tit{padding-left: 1.4rem;font-size: 1.8rem;font-weight: 700;color: var(--color-111);} .dash_area_tit:before{top: 50%;left: 0;width: .4rem;height: 1.6rem;border-radius: .2rem;background: linear-gradient(to bottom, var(--color-primary) 0 60%, #66a3ff 50% 100%);transform: translateY(-50%);} .dash{display: flex;gap: 2rem;align-items: stretch;} .dash_body{flex: 1;min-width: 0;} .dash_side{width: 24rem;flex: none;display: flex;flex-direction: column;} .dash_side_box{flex: 1;display: flex;flex-direction: column;overflow: hidden;background: var(--color-white);border: 1px solid #e8ebf0;border-radius: 1.2rem;box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .03);box-sizing: border-box;} .dash_side_sec{flex: 1;min-height: 0;display: flex;flex-direction: column;} .dash_side_sec+.dash_side_sec{border-top: 1px solid #eef0f4;} .dash_side_head{display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 1rem 2rem;background: var(--bg-gray);} .dash_side_sec > ul{flex: 1;min-height: 0;padding: 0 2rem 1rem;position: relative;} .dash_side_sec > ul:before{content: '';position: absolute;background: var(--color-white);width: 100%;height: 1px;bottom: .2rem;left: 0;} .dash_side_sec > ul.dash_staff{padding-top: 1.1rem;} .dash_side_head h4{font-size: 1.5rem;font-weight: 700;color: var(--color-111);} .dash_more{position: relative;display: inline-block;width: 1.6rem;height: 1.6rem;font-size: 0;color: var(--color-888);border-radius: .4rem;transition: color .15s, background-color .15s;} .dash_more:hover{color: var(--color-primary);background-color: var(--bg-blue);} .dash_more:before, .dash_more:after{content: '';position: absolute;top: 50%;left: 50%;background: currentColor;transform: translate(-50%, -50%);} .dash_more:before{width: 1rem;height: .2rem;} .dash_more:after{width: .2rem;height: 1rem;} .dash_cards{display: grid;gap: 2rem;} .dash_cards_3{grid-template-columns: repeat(3, minmax(0, 1fr));} .dash_card{display: flex;flex-direction: column;min-width: 0;height: 30rem;padding: 2rem;background: var(--color-white);border: 1px solid #e8ebf0;border-radius: 1.2rem;box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .03);box-sizing: border-box;} .dash_card_head{display: flex;align-items: center;gap: .6rem;margin-bottom: 1rem;} .dash_card_head h4{font-size: 1.5rem;font-weight: 600;color: var(--color-333);} .dash_card_head .help_box{margin-left:0;} .dash_chart{position: relative;flex: 1;min-height: 0;} .dash_chart canvas{max-width: 100%;} .dash_bubble_wrap{position: relative;flex: 1;min-height: 0;} .dash_bubble_legend{flex: 0 0 auto;display: flex;flex-wrap: wrap;justify-content: center;gap: .3rem 1.6rem;margin-top: .8rem;} .dash_legend{flex: 0 0 auto;display: flex;flex-wrap: wrap;justify-content: center;gap: .3rem 1.4rem;margin-top: .8rem;} .dash_gauge_legend{display: flex;flex-wrap: wrap;align-content: flex-end;justify-content: center;gap: .2rem .8rem;margin-top: .6rem;height: 4.4rem;} .leg_item{display: inline-flex;align-items: center;gap: .5rem;font-size: 1.3rem;color: var(--color-555);} .leg_item i{width: 1rem;height: 1rem;border-radius: 50%;} .dash_chart_tip{position: absolute;z-index: 100;transform: translate(-50%, -130%);pointer-events: none;display: flex;align-items: center;gap: .6rem;padding: .5rem .9rem;background: rgba(17, 17, 17, .88);border-radius: .6rem;font-size: 1.3rem;color: #fff;white-space: nowrap;transition: opacity .1s;} .dash_chart_tip .tip_dot{width: .8rem;height: .8rem;border-radius: 50%;} .dash_gauge_group{display: flex;gap: 1rem;flex: 1;min-height: 0;} .dash_gauge{display: flex;flex-direction: column;justify-content: space-between;flex: 1;min-width: 0;text-align: center;} .dash_gauge .dash_chart{flex: 0 0 auto;width: 100%;aspect-ratio: 2 / 1;} .dash_gauge h4{margin-bottom: .4rem;font-size: 1.5rem;font-weight: 600;color: var(--color-333);text-align: left;} .dash_amt{flex-wrap: wrap;} .dash_amt h4{white-space: nowrap;} .dash_amt .val{margin-left: auto;font-size: 1.7rem;font-weight: 700;color: var(--color-555);white-space: nowrap;} .dash_list{display: flex;flex-direction: column;} .dash_list li{display: flex;border-bottom: 1px solid #f1f3f6;} .dash_list li:last-child{border-bottom: 0;} .dash_list a{flex: 1;min-width: 0;display: flex;align-items: center;gap: .8rem;padding: 1.1rem 0;} .dash_list_txt{flex: 1;min-width: 0;overflow: hidden;font-size: 1.4rem;color: var(--color-555);text-overflow: ellipsis;white-space: nowrap;transition: color .15s;} .dash_list a:hover .dash_list_txt{color: var(--color-primary);text-decoration: underline;} .dash_list_date{flex: none;font-size: 1.2rem;color: var(--color-888);} .dash_inquiry{flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 2.4rem 2rem;text-align: center;} .dash_inquiry p{margin-bottom: .5rem;font-size: 1.4rem;color: var(--color-555);} .dash_staff{display: flex;flex-direction: column;gap: 1rem;} .dash_staff li{background: var(--color-white);border: 1px solid #e8ebf0;border-radius: 1rem;transition: border-color .15s;} .dash_staff li:hover{border-color: var(--color-primary);} .dash_staff a{position: relative;display: flex;align-items: center;gap: 1rem;padding: 1rem 3.2rem 1rem 1rem;font-size: 1.5rem;color: var(--color-111);transition: color .15s;overflow: hidden;} .dash_staff a > span:not(.state){flex: 1;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .dash_staff a:hover{color: var(--color-primary);} .dash_staff a:before{content: '';position: absolute;right: 1.8rem;top: 50%;width: .7rem;height: .7rem;border-top: .1rem solid #c2c9d6;border-right: .1rem solid #c2c9d6;transform: translateY(-50%) rotate(45deg);transition: border-color .15s;} .dash_staff a:hover:before{border-color: var(--color-primary);} .dash_staff .state{flex: none;font-size:1.2rem} /* 대시보드 : E */ /* 개발화면 수정 : S */ .area_section>div>iframe {height: calc(100vh - 25rem) !important;} .emp-kpi-tile .lb{position: relative;padding-left:3rem;transition: ease all .2s;} .emp-kpi-tile{flex-wrap: wrap;} .emp-kpi-tile .v{display: flex;align-items: center;justify-content: flex-end;flex-wrap: wrap;flex: auto;} .emp-kpi-tile .lb::before{content: '';position: absolute;top: -3px;left: 0;width: 2.5rem;height: 2.5rem;border-radius: 50%;background: var(--btn-border);transition: ease all .2s;} .emp-kpi-tile:hover .lb::before{background: var(--color-skyblue);} .emp-kpi-tile.active .lb::before{background: var(--color-primary);} .emp-kpi-tile .lb::after{content: '';position: absolute;top: 5px;left: 7px;width: .8rem;height: .4rem;border-bottom: 2px solid var(--color-white);border-left: 2px solid var(--color-white);transform: rotate(315deg);transition: ease all .2s;} /* 근로고용정보(URNZAA004) 주제별고용현황 KPI: 폰 너비에서 2열이면 타일이 좁아 라벨(nowrap)+숫자가 안 들어가 깨짐 → 1열로 쌓음. 화면 인라인