@charset "UTF-8"; :root { --inner: 1400px; --inner_padding: 30px; --col_padding: 25px; --form_height: 56px; --form_height_xs: 31px; --form_height_sm: 40px; --form_height_md: 48px; --form_height_lg: 56px; --form_height_xl: 64px; --textarea_height: 150px; --border_radius5:0.5rem; --border_radius10:1rem; --border_radius15:1.5rem; --border_radius20:2rem; --border_radius25:2.5rem; --border_radius30:3rem; --border_radius35:3.5rem; --border_radius40:4rem; --border_radius45:4.5rem; --border_radius50:5rem; --text-primary: #891c3b; --text-basic: #000; --text-secondary: #333; --text-tertiary: #666; --text-white: #fff; --text-disabled: #666; --text-enabled: #6a6a6a; --text-point-red: #eb0510; --border-basic: #000; --border-secondary: #333; --border-tertiary: #ccc; --border-disabled: #909090; --border-readonly: #c2c2c2; --background-black: #000; --background-darkgray: #5a5657; --background-gray: #ccc; --background-white: #fff; --button-primary: #000; --button-primary-hover: #222; --button-primary-pressed: #000; --button-secondary: #ddd; --button-secondary-hover: #bbb; --button-secondary-pressed: #aaa; --button-tertairy: #fff; --button-tertairy-hover: #e8e8e8; --button-tertairy-pressed: #dbdbdb; --button-border: #000; --button-disabled: #ebebeb; --button-readonly: #ddd; --label-01:#c1186b; --label-02:#6118ba; --label-03:#3148ba; --label-04:#00819e; --label-05:#0e884b; --label-06:#7c6900; --label-07:#b51e10; --label-08:#3e8400; --element-basic: #000; --element-disabled: #909090; --element-white: #fff; --color-primary-10:#fbf8f1; --color-primary-20:#f5eedc; --color-primary-30:#f0e0bf; --color-primary-40:#e4ca95; --color-primary-50:#dabf7c; --color-primary-60:#c5a168; --color-primary-70:#a7874e; --color-primary-80:#8a6b3a; --color-primary-90:#6b5028; --color-secondary-10:#e7f5fb; --color-secondary-20:#c5e7f6; --color-secondary-30:#93d1ee; --color-secondary-40:#5ab8e2; --color-secondary-50:#249ad0; --color-secondary-60:#0272b2; --color-secondary-70:#025c8f; --color-secondary-80:#024870; --color-secondary-90:#023350; --color-point-10:#fde9ec; --color-point-20:#fac7cf; --color-point-30:#f398a5; --color-point-40:#e25b73; --color-point-50-primary: #c93255; --color-point-60:#af153d; --color-point-70:#9c0e36; --color-point-80:#760a29; --color-point-90:#50061c; --color-neutral-gray-10:#f6f5f5; --color-neutral-gray-20:#e6e4e4; --color-neutral-gray-30:#d3d0d0; --color-neutral-gray-40:#bebaba; --color-neutral-gray-50:#9e9a9a; --color-neutral-gray-60:#7b7778; --color-neutral-gray-70-primary: #5a5657; --color-neutral-gray-80:#3e3a3b; --color-neutral-gray-90:#242122; /* Text-size styles */ --display-large: 60px; --display-medium: 44px; --display-small: 36px; --heading-xlarge: 40px; --heading-large: 32px; --heading-medium: 24px; --heading-small: 19px; --heading-xsmall: 17px; --heading-xxsmall: 15px; --body-large: 19px; --body-medium: 17px; --body-small: 15px; --body-xsmall: 13px; --body-large-bold: 19px; --body-medium-bold: 17px; --body-small-bold: 15px; --body-xsmall-bold: 13px; --label-large: 19px; --label-medium: 17px; --label-small: 15px; --label-xsmall: 13px; --navigation-title-medium: 24px; --navigation-depth-large-bold: 19px; --navigation-depth-medium-bold: 17px; --navigation-depth-medium: 17px; --underline-large: 19px; --underline-medium: 17px; --underline-small: 15px; --underline-xsmall: 13px; --font_size10:clamp(10px, 0.5208333333vw, 10px); --font_size11:clamp(11px, 0.5729166667vw, 11px); --font_size12:clamp(12px, 0.625vw, 12px); --font_size13:clamp(13px, 0.6770833333vw, 13px); --font_size14:clamp(14px, 0.7291666667vw, 14px); --font_size15:clamp(14px, 0.78125vw, 15px); --font_size16:clamp(14px, 0.8333333333vw, 16px); --font_size17:clamp(14px, 0.8854166667vw, 17px); --font_size18:clamp(14px, 0.9375vw, 18px); --font_size19:clamp(14px, 0.9895833333vw, 19px); --font_size20:clamp(14px, 1.0416666667vw, 20px); --font_size21:clamp(14px, 1.09375vw, 21px); --font_size22:clamp(14px, 1.1458333333vw, 22px); --font_size23:clamp(14px, 1.1979166667vw, 23px); --font_size24:clamp(14px, 1.25vw, 24px); --font_size25:clamp(14px, 1.3020833333vw, 25px); --font_size26:clamp(14px, 1.3541666667vw, 26px); --font_size27:clamp(14px, 1.40625vw, 27px); --font_size28:clamp(14px, 1.4583333333vw, 28px); --font_size29:clamp(14px, 1.5104166667vw, 29px); --font_size30:clamp(14px, 1.5625vw, 30px); --font_size31:clamp(14px, 1.6145833333vw, 31px); --font_size32:clamp(14px, 1.6666666667vw, 32px); --font_size33:clamp(14px, 1.71875vw, 33px); --font_size34:clamp(14px, 1.7708333333vw, 34px); --font_size35:clamp(14px, 1.8229166667vw, 35px); --font_size36:clamp(14px, 1.875vw, 36px); --font_size37:clamp(14px, 1.9270833333vw, 37px); --font_size38:clamp(14px, 1.9791666667vw, 38px); --font_size39:clamp(14px, 2.03125vw, 39px); --font_size40:clamp(14px, 2.0833333333vw, 40px); --font_size41:clamp(14px, 2.1354166667vw, 41px); --font_size42:clamp(14px, 2.1875vw, 42px); --font_size43:clamp(14px, 2.2395833333vw, 43px); --font_size44:clamp(14px, 2.2916666667vw, 44px); --font_size45:clamp(14px, 2.34375vw, 45px); --font_size46:clamp(14px, 2.3958333333vw, 46px); --font_size47:clamp(14px, 2.4479166667vw, 47px); --font_size48:clamp(14px, 2.5vw, 48px); --font_size49:clamp(14px, 2.5520833333vw, 49px); --font_size50:clamp(14px, 2.6041666667vw, 50px); --font_size51:clamp(14px, 2.65625vw, 51px); --font_size52:clamp(14px, 2.7083333333vw, 52px); --font_size53:clamp(14px, 2.7604166667vw, 53px); --font_size54:clamp(14px, 2.8125vw, 54px); --font_size55:clamp(14px, 2.8645833333vw, 55px); --font_size56:clamp(14px, 2.9166666667vw, 56px); --font_size57:clamp(14px, 2.96875vw, 57px); --font_size58:clamp(14px, 3.0208333333vw, 58px); --font_size59:clamp(14px, 3.0729166667vw, 59px); --font_size60:clamp(14px, 3.125vw, 60px); --font_size61:clamp(14px, 3.1770833333vw, 61px); --font_size62:clamp(14px, 3.2291666667vw, 62px); --font_size63:clamp(14px, 3.28125vw, 63px); --font_size64:clamp(14px, 3.3333333333vw, 64px); --font_size65:clamp(14px, 3.3854166667vw, 65px); --font_size66:clamp(14px, 3.4375vw, 66px); --font_size67:clamp(14px, 3.4895833333vw, 67px); --font_size68:clamp(14px, 3.5416666667vw, 68px); --font_size69:clamp(14px, 3.59375vw, 69px); --font_size70:clamp(14px, 3.6458333333vw, 70px); --font_size71:clamp(14px, 3.6979166667vw, 71px); --font_size72:clamp(14px, 3.75vw, 72px); --font_size73:clamp(14px, 3.8020833333vw, 73px); --font_size74:clamp(14px, 3.8541666667vw, 74px); --font_size75:clamp(14px, 3.90625vw, 75px); --font_size76:clamp(14px, 3.9583333333vw, 76px); --font_size77:clamp(14px, 4.0104166667vw, 77px); --font_size78:clamp(14px, 4.0625vw, 78px); --font_size79:clamp(14px, 4.1145833333vw, 79px); --font_size80:clamp(14px, 4.1666666667vw, 80px); --font_size81:clamp(14px, 4.21875vw, 81px); --font_size82:clamp(14px, 4.2708333333vw, 82px); --font_size83:clamp(14px, 4.3229166667vw, 83px); --font_size84:clamp(14px, 4.375vw, 84px); --font_size85:clamp(14px, 4.4270833333vw, 85px); --font_size86:clamp(14px, 4.4791666667vw, 86px); --font_size87:clamp(14px, 4.53125vw, 87px); --font_size88:clamp(14px, 4.5833333333vw, 88px); --font_size89:clamp(14px, 4.6354166667vw, 89px); --font_size90:clamp(14px, 4.6875vw, 90px); --font_size91:clamp(14px, 4.7395833333vw, 91px); --font_size92:clamp(14px, 4.7916666667vw, 92px); --font_size93:clamp(14px, 4.84375vw, 93px); --font_size94:clamp(14px, 4.8958333333vw, 94px); --font_size95:clamp(14px, 4.9479166667vw, 95px); --font_size96:clamp(14px, 5vw, 96px); --font_size97:clamp(14px, 5.0520833333vw, 97px); --font_size98:clamp(14px, 5.1041666667vw, 98px); --font_size99:clamp(14px, 5.15625vw, 99px); --font_size100:clamp(14px, 5.2083333333vw, 100px); } ::selection { background: rgba(64, 81, 233, 0.1); } /* 스크롤바 */ ::-webkit-scrollbar { width: 0.8rem; height: 0.8rem; } ::-webkit-scrollbar-thumb { border-radius: var(--border_radius10); background: #ddd; } ::-webkit-scrollbar-track { background: #f4f4f4; } .dragscroll::-webkit-scrollbar { display: none !important; } /* basic */ html { font-size: 10px; } body { color: #000; font-size: var(--font_size17); font-family: "PretendardGOV"; letter-spacing: normal; } /* basic responsible */ .m_visible { display: none; visibility: none; } .m_block { display: none; } /* 공통 Badge */ .cm_badge { display: inline-flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: 0 1rem; background: lightgray; font-size: var(--font_size15); line-height: 1.5; } .cm_badge.type_primary { width: 6.7rem; border: 1px solid var(--border-basic); border-radius: 99px; } .cm_badge.type_primary.style_sub { border-radius: 0; font-weight: 700; font-size: var(--font_size17); } .cm_badge.type_primary.color1 { background: #99e1dd; } .cm_badge.type_primary.color2 { background: #8c9fff; } .cm_badge.type_primary.color3 { background: #ff8c9f; } .cm_badge.type_primary.color4 { background: #ffd78c; } .cm_badge.type_primary.color5 { background: #d4ff83; } .cm_badge.type_primary.color6 { background: #ffe942; } .cm_badge.type_secondary { padding: 0 1.2rem; border: 1px solid var(--border-basic); background: #fff; color: var(--text-basic); font-weight: 700; font-size: var(--font_size17); } .cm_badge.type_secondary.color1 { /* 기본설정과 같음 */ } .cm_badge.type_secondary.color2 { background: var(--color-primary-50); } .cm_badge.type_secondary.color3 { color: var(--label-01); } .cm_badge.type_secondary.color4 { color: var(--label-02); } .cm_badge.type_secondary.color5 { color: var(--label-03); } .cm_badge.type_secondary.color6 { color: var(--label-04); } .cm_badge.type_secondary.color7 { color: var(--label-05); } .cm_badge.type_secondary.color8 { color: var(--label-06); } .cm_badge.type_secondary.color9 { color: var(--label-07); } .cm_badge.type_secondary.color10 { color: var(--label-08); } .cm_badge.type_secondary.color11 { color: var(--color-neutral-gray-70-primary); } .cm_badge.type_tertiary { padding: 0 1.2rem; color: var(--text-basic); font-size: var(--font_size17); } .cm_badge.type_tertiary.style_sub { border: 1px solid var(--border-basic); font-weight: 700; font-size: var(--font_size15); } .cm_badge.type_tertiary.color1 { background: var(--color-neutral-gray-90); color: #fff; } .cm_badge.type_tertiary.color2 { background: var(--color-primary-50); } .cm_badge.type_tertiary.color3 { background: #fff; } .cm_badge.type_shadow { height: 3.1rem; padding: 0 1.5rem; border: 1px solid var(--border-basic); box-shadow: 4px 4px 0 #000; font-size: var(--font_size17); } .cm_badge.type_shadow.color1 { background: #fff; } .cm_badge.type_shadow.color2 { background: #99e1dd; } .cm_badge.type_shadow.color3 { background: #bcbcbc; } .cm_badge.type_shadow.color4 { background: #ff8c9f; } .cm_badge.type_paper { padding: 0 1.6rem; color: #fff; font-weight: 700; font-size: var(--font_size17); } .cm_badge.type_paper.color1 { background: var(--label-07); } .cm_badge.type_paper.color2 { background: var(--label-08); } .cm_badge.type_paper.color3 { background: var(--label-02); } .cm_badge.type_paper.color4 { background: var(--label-03); } .cm_badge.type_paper.color5 { background: var(--label-04); } .cm_badge.type_state { min-width: 7.4rem; padding: 0 1.2rem; border: 1px solid var(--border-basic); border-radius: 99px; font-weight: 300; } .cm_badge.type_state.color1 { background: var(--color-neutral-gray-20); } .cm_badge.type_state.color2 { background: var(--color-neutral-gray-40); } .cm_badge.type_state.color3 { background: var(--color-neutral-gray-70-primary); color: #fff; } .cm_badge.type_state.color4 { background: var(--color-secondary-20); } .cm_badge.type_state.color5 { background: var(--color-secondary-30); } .cm_badge.type_state.color6 { background: #99e1dd; } .cm_badge.type_state.color7 { background: var(--color-point-30); } .cm_badge.type_state.color8 { background: var(--color-primary-50); } .cm_badge.type_state.color9 { background: #aab8ff; } .cm_badge.type_state.ready { background: var(--color-secondary-20); } .cm_badge.type_state.open { background: #99e1dd; } .cm_badge.type_state.close { background: var(--color-neutral-gray-40); } .cm_badge.type_state.offline { background: var(--color-primary-50); } .cm_badge.type_state.cancel { background: var(--color-neutral-gray-70-primary); color: #fff; } .cm_badge.type_state.end { background: var(--color-point-30); } .cm_badge.type_category { min-width: 8.5rem; padding: 0 1.2rem; background: var(--background-darkgray); color: #fff; font-weight: 700; font-size: var(--font_size15); } .cm_badge.type_bus { height: 2.4rem; padding: 0 1.2rem; border-radius: 99px; color: #fff; font-weight: 300; font-size: var(--font_size17); } .cm_badge.type_bus.color1 { background: #508218; } .cm_badge.type_bus.color2 { background: #d72b13; } .cm_badge.type_bus.color3 { background: #3055be; } .cm_badge2 { display: inline-flex; align-items: center; gap: clamp(3.2px, 0.2083333333vw, 4px) clamp(6.4px, 0.4166666667vw, 8px); } .cm_badge2:before { display: block; flex-shrink: 0; aspect-ratio: 1/1; width: clamp(12.8px, 0.8333333333vw, 16px); border-radius: 1000px; content: ""; } .cm_badge2.color1:before { background-color: var(--color-point-40); } .cm_badge2.color2:before { background-color: #ffb06c; } .cm_badge2.color3:before { background-color: #8c9fff; } .cm_badge2.color4:before { background-color: #ffd78c; } .cm_badge2.color5:before { background-color: #a2e3a5; } .cm_badge2.color6:before { background-color: #e684ff; } .cm_badge2.color7:before { background-color: #99e1dd; } .cm_badge2.color8:before { background-color: #ff8c9f; } .cm_badge2.color9:before { background-color: #000; } .cm_badge2 .badge_name { flex-grow: 1; min-width: 0; } /* 공통 배경색상 */ .cm_bg01 { background-color: var(--color-point-10) !important; } .cm_bg02 { background-color: var(--color-neutral-gray-10) !important; } /* 공통 게시판 상세 */ .cm_board_detail1 .board_header { display: flex; flex-direction: column; padding: clamp(20px, 1.6666666667vw, 32px) clamp(20px, 1.7708333333vw, 34px); gap: 10px 0; border-top: 3px solid #000; border-bottom: 1px solid #000; text-align: center; } .cm_board_detail1 .board_title { font-weight: bold; font-size: clamp(18px, 1.25vw, 24px); line-height: 1.3; } .cm_board_detail1 .board_content { padding: clamp(20px, 2.0833333333vw, 40px); border-bottom: 1px solid #ddd; } .cm_board_detail1 .board_content .editor_content { min-height: 320px; } .cm_board_detail1 .board_content .cm_file_list { margin-top: clamp(20px, 2.0833333333vw, 40px); } .cm_board_detail2 .board_header { display: flex; flex-direction: column; padding: clamp(20px, 1.6666666667vw, 32px) clamp(20px, 1.7708333333vw, 34px); gap: 10px 0; border-top: 3px solid #000; border-bottom: 1px solid #000; text-align: center; } .cm_board_detail2 .board_title { font-weight: bold; font-size: clamp(18px, 1.25vw, 24px); line-height: 1.3; } .cm_board_detail2 .board_content { padding: clamp(20px, 2.0833333333vw, 40px); border-bottom: 1px solid #ddd; } .cm_board_detail2 .board_content .editor_content { min-height: 320px; } .cm_board_detail2 .board_answer { border: 1px solid #000; } .cm_board_detail2 .board_answer .answer_header { display: flex; align-items: center; justify-content: space-between; padding: clamp(16px, 1.25vw, 24px) clamp(20px, 2.0833333333vw, 40px); background-color: var(--color-neutral-gray-10); } .cm_board_detail2 .board_answer .answer_title { font-weight: bold; font-size: var(--font_size19); line-height: 1.3; } .cm_board_detail2 .board_answer .answer_content { padding: clamp(20px, 2.0833333333vw, 40px); } .cm_board_detail3 .board_header { display: flex; flex-direction: column; padding: clamp(20px, 1.6666666667vw, 32px) clamp(20px, 1.7708333333vw, 34px); gap: 10px 0; border-top: 3px solid #000; border-bottom: 1px solid #000; text-align: center; } .cm_board_detail3 .board_title { font-weight: bold; font-size: clamp(18px, 1.25vw, 24px); line-height: 1.3; } .cm_board_detail3 .board_content { padding: clamp(20px, 2.0833333333vw, 40px); border-bottom: 1px solid #ddd; } .cm_board_detail3 .board_content .editor_content { min-height: 320px; } .cm_board_detail3 .board_content .cm_file_list { margin-top: 30px; } .cm_board_detail3 .board_answer { border: 1px solid #000; } .cm_board_detail3 .board_answer .answer_header { display: flex; align-items: center; justify-content: space-between; padding: clamp(16px, 1.25vw, 24px) clamp(20px, 2.0833333333vw, 40px); background-color: var(--color-neutral-gray-10); } .cm_board_detail3 .board_answer .answer_title { font-weight: bold; font-size: var(--font_size19); line-height: 1.3; } .cm_board_detail3 .board_answer .answer_content { padding: clamp(20px, 2.0833333333vw, 40px); } .cm_board_detail3 .board_gallery_swiper { margin-bottom: 40px; } .cm_board_detail3 .board_gallery_swiper .slide_img { aspect-ratio: 4/3; } .cm_board_detail3 .board_gallery_swiper .slide_img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } /* 공통 게시판 댓글 */ .board_answer2 .answer_write { padding: 1.6rem; border: 1px solid #000; } .board_answer2 .answer_write .form_control { height: 12rem; padding: 0; border: 0; font-size: 1.7rem; } .board_answer2 .answer_write .btn_area { display: flex; align-items: center; justify-content: end; margin-top: 1.6rem; gap: 0.8rem; } .board_answer2 .answer_count { margin-top: 2.4rem; margin-bottom: 0.8rem; color: #333; } .board_answer2 .answer_count strong { color: #000; font-weight: 700; } .board_answer2 .answer_list { border-top: 1px solid #000; } .board_answer2 .answer_list .answer_list_item { padding: 2.4rem 0; border-bottom: 1px solid #000; } .board_answer2 .answer_list_item .answer_content { color: #000; font-size: 1.7rem; } .board_answer2 .answer_list_item .answer_info { display: flex; align-items: center; color: #666; font-size: 1.5rem; } .board_answer2 .answer_list_item .answer_info .writer { position: relative; margin-right: 8px; padding-right: 11px; } .board_answer2 .answer_list_item .answer_info .writer:after { position: absolute; top: calc(50% - 1.5px); right: 0; width: 3px; height: 3px; border-radius: 10px; background: #000; content: ""; } .board_answer2 .answer_list_item .answer_info .btns { display: flex; margin-top: 4px; margin-left: 1.6rem; gap: 0.8rem; } .board_answer2 .answer_list_item .answer_info .btns .cm_btn { padding-right: 8px; padding-left: 8px; color: #000; font-size: 1.5rem; } /* 공통 게시판 작성 */ .cm_board_write1 .form_section { display: table; width: 100%; padding: 20px; border-top: 2px solid #000; border-bottom: 1px solid var(--color-neutral-gray-40); } .cm_board_write1 .form_row { display: table-row; height: 96px; } .cm_board_write1 .label_box, .cm_board_write1 .input_box { display: table-cell; padding: 20px; line-height: 1.3; vertical-align: middle; } .cm_board_write1 .label_box { width: 170px; padding-top: 35px; vertical-align: top; word-break: auto-phrase; } .cm_board_write1 .input_box .form_item { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cm_board_write1 .form_label { font-weight: bold; font-size: var(--font_size19); } .cm_board_write1 .icon_info { align-items: flex-start; margin-top: 8px; font-size: var(--font_size15); line-height: 1.3; --icon-size: 20; } .cm_board_write1 .icon_info:before { margin-top: -1px; } .cm_board_write1 .form_addable { position: relative; } .cm_board_write1 .form_addable .btn_addable { position: absolute; bottom: 20px; left: 20px; padding: 0 16px; } .cm_board_write1 .form_section_title { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 10px 24px; gap: 16px; background: var(--color-neutral-gray-10); } .cm_board_write1 .form_section_title .title_text { font-weight: 700; font-size: var(--font_size19); line-height: 150%; } .cm_board_write1 .form_section_title .cm_btn.btn_xs { padding: 0 16px; } .cm_board_write1 .form_section_title + .form_section { border: 0; } .cm_board_write1.border_btm { border-bottom: 1px solid var(--color-neutral-gray-40); } .cm_board_write1.label_lg .label_box { width: 250px; } .cm_board_write1 .form_address { display: table-row-group; position: relative; width: 100%; } .cm_board_write1 .form_address::after { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: #ccc; content: ""; } .cm_board_write1 .form_address > .form_row:not(.form_addable) { width: 100%; height: 76px; } .cm_board_write1 .form_address > .form_row:not(.form_addable) > .label_box { padding-bottom: 0; } .cm_board_write1 .form_address > .form_row:not(.form_addable) > .input_box { padding-bottom: 0; } .cm_board_write1 .form_address .form_addable { position: relative; padding-bottom: 20px; } .cm_board_write1 .form_address .form_addable::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: #ccc; content: ""; } .cm_board_write1 .form_row.row_text { height: auto; } .cm_board_write1 .form_row.row_text .label_box, .cm_board_write1 .form_row.row_text .input_box { padding: 20px; } .cm_board_write1 .form_row.row_block { display: block; width: 100%; height: auto; } .cm_board_write1 .form_table { width: 100%; } .cm_board_write1 .form_table + .form_section { border-top: 0; } .cm_board_write1 .form_row .input_box .col-lg-3_5 { flex: 0 0 auto; width: 28rem; } .cm_board_write1 .form_row .input_box .date_col { flex: 0 0 auto; width: 18rem; } .cm_board_write1.view .form_row { height: auto; } /* 공통 박스 */ .cm_box.box1 { padding: clamp(20px, 1.6666666667vw, 32px) clamp(20px, 2.0833333333vw, 40px); border-top: 3px solid #000; border-bottom: 3px solid #000; } .cm_box.box2 { padding: clamp(20px, 2.0833333333vw, 40px) clamp(20px, 2.0833333333vw, 40px); border-top: 1px solid #000; border-bottom: 1px solid #000; } .cm_box.box2.full_border { border: 1px solid #000; } .cm_box.box3 { padding: clamp(20px, 1.25vw, 24px); background: var(--color-neutral-gray-10); } .cm_box.box3.type2 { padding: 3.2rem; /* background: var(--color-neutral-gray-10) url(../../images/common/symbol_gry.svg) no-repeat right bottom / 22.5rem; */ } .cm_box.box4 { padding: 3.2rem 2.4rem; border-top: 1px solid var(--border-basic); background: var(--color-neutral-gray-10); } .cm_box.box4.type2 { padding: 6.2rem 2.4rem; border-top-width: 2px; } /* 박스 커스텀 */ .cm_box.box3.custom_check_inner .box_inner { display: flex; align-items: end; gap: 1.2rem 2rem; } /* 공통 버튼 */ .cm_btn_area { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: clamp(20px, 2.0833333333vw, 40px); gap: 5px min(0.5208333333vw, 10px); } .cm_btn_area.center { justify-content: center; } .cm_btn_area.right { justify-content: flex-end; } .cm_btn_area.left { justify-content: flex-start; } .cm_btn_area .btns { display: flex; flex-wrap: wrap; gap: 5px clamp(5px, 0.5208333333vw, 10px); } .cm_btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 clamp(16px, 1.25vw, 24px); font-weight: 700; line-height: 1.5; } .cm_btn.btn_xl { height: var(--form_height_xl); font-size: var(--font_size19); } .cm_btn.btn_lg { height: var(--form_height_lg); font-size: var(--font_size19); } .cm_btn.btn_md { height: var(--form_height_md); font-size: var(--font_size17); } .cm_btn.btn_sm { height: var(--form_height_sm); padding-right: clamp(16px, 1.0416666667vw, 20px); padding-left: clamp(16px, 1.0416666667vw, 20px); font-size: var(--font_size17); } .cm_btn.btn_xs { height: var(--form_height_xs); padding-right: clamp(12px, 0.8333333333vw, 16px); padding-left: clamp(12px, 0.8333333333vw, 16px); font-size: var(--font_size15); } .cm_btn.btn_primary.btn_default { background: var(--button-primary); color: var(--text-white); } .cm_btn.btn_primary.btn_default:hover { background: var(--button-primary-hover); } .cm_btn.btn_primary.btn_gray { border: 1px solid var(--border-basic); background: var(--color-neutral-gray-70-primary); color: var(--text-white); } .cm_btn.btn_primary.btn_gray:hover { background: var(--color-neutral-gray-80); } .cm_btn.btn_primary.btn_crimson_red { background: var(--color-point-60); color: var(--text-white); } .cm_btn.btn_primary.btn_crimson_red:hover { background: var(--color-point-50-primary); } .cm_btn.btn_secondary.btn_default { border: 1px solid var(--border-basic); background: var(--button-secondary); } .cm_btn.btn_secondary.btn_default:hover { background: var(--button-secondary-hover); } .cm_btn.btn_tertiary.btn_default { border: 1px solid var(--border-basic); background: var(--button-tertairy); } .cm_btn.btn_tertiary.btn_default:hover { border: 1px solid var(--border-basic); background: var(--button-tertairy-hover); } .cm_btn.btn_none.btn_default { border-color: transparent; } .cm_btn:disabled, .cm_btn.btn_disabled { border-color: transparent !important; background: var(--button-disabled) !important; color: var(--text-disabled) !important; cursor: default !important; } .cm_btn.btn_tertiary:disabled, .cm_btn.btn_tertiary.btn_disabled { border: 2px solid var(--button-disabled) !important; background: var(--button-tertairy) !important; } .cm_btn.sns_login_btn { display: flex; align-items: center; gap: 5.6rem; font-weight: 700; font-size: var(--font_size17); } .cm_btn.sns_login_btn .icon { width: 1.8rem; height: 1.8rem; } .cm_btn.sns_login_btn .text { flex: 1; text-align: left; } .cm_btn.sns_login_btn.kakao { background: #fae100; color: #000; } .cm_btn.sns_login_btn.kakao .icon { background: url(../../images/common/icon_kakao_login.svg) no-repeat center/contain; } .cm_btn.sns_login_btn.naver { background: #00c73c; color: #fff; } .cm_btn.sns_login_btn.naver .icon { background: url(../../images/common/icon_naver_login.svg) no-repeat center/contain; } .btn_like { width: 56px; height: 56px; border: 1px solid var(--border-disabled); background: var(--background-white) url(../../images/common/icon_solid_like.svg) no-repeat center/24px; } .btn_like.active { background: var(--background-white) url(../../images/common/icon_solid_like_on.svg) no-repeat center/24px; } .btn_location { display: flex; align-items: center; gap: 0.8rem; } .btn_location:after { display: block; width: 3.2rem; height: 3.2rem; border-radius: 6px; background: #e6e4e4 url(../../images/common/icon_stroke_location2.svg) no-repeat center/2rem; content: ""; } /* 공통 캘린더 */ .cm_calendar_wrap { position: relative; } .cm_calendar { border-top: 2px solid var(--border-basic); } .cm_calendar table { table-layout: fixed; } .cm_calendar thead th, .cm_calendar tbody td { font-size: var(--font_size15); } .cm_calendar thead { border-bottom: 1px solid var(--border-basic); background-color: var(--color-neutral-gray-10); } .cm_calendar thead th { height: 58px; font-weight: 700; } .cm_calendar thead th.sun { color: var(--text-point-red); } .cm_calendar thead th.sat { color: #2530ff; } .cm_calendar tbody td { border-bottom: 1px solid #ddd; vertical-align: top; } .cm_calendar .day_box { display: flex; position: relative; flex-direction: column; aspect-ratio: 1/1; padding: 8px; gap: 8px 0; } .cm_calendar .day_box .btn_more { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; text-indent: 100%; white-space: nowrap; } .cm_calendar .day_box .btn_more.active { border: 2px solid #000; } .cm_calendar .day_num { flex-shrink: 0; } .cm_calendar tbody td.today .day_num span { display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1/1; width: 28px; border-radius: 1000px; background-color: #000; color: #fff; text-align: center; } .cm_calendar .day_content { flex: 1; } .cm_calendar tbody td:nth-child(1) .day_num { color: var(--text-point-red); } .cm_calendar tbody td:nth-child(7) .day_num { color: #2530ff; } .cm_calendar td[data-disabled=true] { background: #f8f8f8 !important; color: #666 !important; } .cm_calendar td[data-disabled=true] .day_num { color: #666 !important; } .cm_calendar td[data-disabled=true] .btn_more[tabindex="-1"] { display: none; } .cm_calendar .event_list .cm_badge2 { max-width: 100%; vertical-align: top; } .cm_calendar .event_list .cm_badge2:before { width: clamp(6px, 0.8333333333vw, 16px); } .cm_calendar .event_list .badge_name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm_calendar .event_list .cm_badge2:hover .badge_name { text-decoration: underline; } .cm_calendar .event_list2 { display: flex; flex-direction: column; gap: 6px; } .cm_calendar .event_list2 > li { padding-left: 6px; border-left: 2px solid #000; font-size: clamp(14px, 0.78125vw, 15px); } .cm_calendar .event_list2 .event_time { font-weight: bold; } .cm_calendar .event_list2 .event_desc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .cm_calendar .event_list2 .event_desc .number { display: block; padding: 0 3px; border-radius: 4px; background: var(--color-neutral-gray-20); } .cm_calendar .event_list3 { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.8rem; } .cm_calendar .event_list3 .cm_badge2:before { width: clamp(6px, 0.5208333333vw, 10px); } /* 모바일 캘린더 상세 */ .cm_calendar_wrap .mobile_calendar_detail { display: none; margin-top: 20px; font-size: 15px; } .cm_calendar_wrap .mobile_calendar_detail .detail_date { margin-bottom: 16px; padding: 12px; border-top: 1px solid #000; border-bottom: 1px solid #000; font-weight: bold; } .cm_calendar_wrap .mobile_calendar_detail .detail_events .event_list { display: flex; flex-direction: column; gap: 4px; } .cm_calendar_wrap .mobile_calendar_detail .detail_events .event_list button { text-align: left; } .cm_calendar_wrap .mobile_calendar_detail .detail_events .event_list2 { display: flex; flex-direction: column; gap: 6px; } .cm_calendar_wrap .mobile_calendar_detail .detail_events .event_list2 > li { padding-left: 6px; border-left: 2px solid #000; font-size: clamp(14px, 0.78125vw, 15px); } .cm_calendar_wrap .mobile_calendar_detail .detail_events .event_list2 .event_time { font-weight: bold; } .cm_calendar_wrap .mobile_calendar_detail .detail_events .event_list2 button { text-align: left; } .cm_calendar_wrap .mobile_calendar_detail.active { display: block; } /* 공통 캘린더 범례, 뱃지 */ .cm_legend { display: flex; flex-wrap: wrap; margin-bottom: 13px; gap: 0 16px; font-size: var(--font_size15); } /* 공통 캘린더 컨트롤 */ .cm_calendar_control { display: flex; align-items: center; justify-content: center; margin-bottom: clamp(10px, 1.71875vw, 33px); gap: 0 clamp(20px, 1.5625vw, 30px); } .cm_calendar_control .btn_prev, .cm_calendar_control .btn_next { aspect-ratio: 1/1; width: clamp(35px, 2.7083333333vw, 52px); overflow: hidden; border: 1px solid #ddd; background-position: center; background-size: 50%; background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; transition: background-color 0.3s ease, border-color 0.3s ease; } .cm_calendar_control .btn_prev { background-image: url(../../images/common/icon_stroke_arrow_left.svg); } .cm_calendar_control .btn_next { background-image: url(../../images/common/icon_stroke_arrow_right.svg); } .cm_calendar_control .date_selector { display: flex; } .cm_calendar_control .date_selector select { padding-right: clamp(30px, 2.0833333333vw, 40px); padding-left: clamp(10px, 0.8333333333vw, 16px); border: none; background-position: right clamp(10px, 0.7291666667vw, 14px) center; font-weight: bold; font-size: clamp(20px, 1.6666666667vw, 32px); transition: color 0.3s ease; } .cm_calendar_control .date_selector select option { font-size: 17px; } .cm_calendar_control .select_year { width: clamp(100px, 7.8125vw, 150px); } .cm_calendar_control .select_month { width: clamp(80px, 5.7291666667vw, 110px); } .cm_calendar_control .btn_prev:hover, .cm_calendar_control .btn_next:hover { border-color: transparent; background-color: #000; } .cm_calendar_control .btn_prev:hover { background-image: url(../../images/common/icon_stroke_arrow_left_wt.svg); } .cm_calendar_control .btn_next:hover { background-image: url(../../images/common/icon_stroke_arrow_right_wt.svg); } .cm_calendar_control .date_selector select:hover { color: #666; } .cm_calendar_control2 { display: flex; align-items: center; justify-content: center; margin-bottom: clamp(20px, 1.71875vw, 33px); gap: 0 clamp(20px, 1.5625vw, 30px); } .cm_calendar_control2 .btn_prev, .cm_calendar_control2 .btn_next { aspect-ratio: 1/1; width: clamp(35px, 2.7083333333vw, 52px); overflow: hidden; background-position: center; background-size: 90%; background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; transition: background-color 0.3s ease, border-color 0.3s ease; } .cm_calendar_control2 .btn_prev { background-image: url(../../images/common/icon_stroke_arrow3_left.svg); } .cm_calendar_control2 .btn_next { background-image: url(../../images/common/icon_stroke_arrow3_right.svg); } .cm_calendar_control2 .year { font-weight: bold; font-size: clamp(24px, 2.0833333333vw, 40px); } /* 공통 컬러 */ /* Text Color */ .text-primary { color: var(--text-primary) !important; } .text-basic { color: var(--text-basic) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-tertiary { color: var(--text-tertiary) !important; } .text-white { color: var(--text-white) !important; } .text-disabled { color: var(--text-disabled) !important; } .text-enabled { color: var(--text-enabled) !important; } .text-point-red { color: var(--text-point-red) !important; } /* Border Color */ .border-basic { border-color: var(--border-basic) !important; } .border-secondary { border-color: var(--border-secondary) !important; } .border-tertiary { border-color: var(--border-tertiary) !important; } .border-disabled { border-color: var(--border-disabled) !important; } .border-readonly { border-color: var(--border-readonly) !important; } /* Background Color - Basic */ .background-black { background-color: var(--background-black) !important; } .background-darkgray { background-color: var(--background-darkgray) !important; } .background-gray { background-color: var(--background-gray) !important; } .background-white { background-color: var(--background-white) !important; } /* Background Color - Button */ .bg-button-primary { background-color: var(--button-primary) !important; } .bg-button-primary-hover { background-color: var(--button-primary-hover) !important; } .bg-button-primary-pressed { background-color: var(--button-primary-pressed) !important; } .bg-button-secondary { background-color: var(--button-secondary) !important; } .bg-button-secondary-hover { background-color: var(--button-secondary-hover) !important; } .bg-button-secondary-pressed { background-color: var(--button-secondary-pressed) !important; } .bg-button-tertairy { background-color: var(--button-tertairy) !important; } .bg-button-tertairy-hover { background-color: var(--button-tertairy-hover) !important; } .bg-button-tertairy-pressed { background-color: var(--button-tertairy-pressed) !important; } .bg-button-disabled { background-color: var(--button-disabled) !important; } .bg-button-readonly { background-color: var(--button-readonly) !important; } /* Border Color - Button */ .border-button { border-color: var(--button-border) !important; } /* Background Color - Label */ .bg-label-01 { background-color: var(--label-01) !important; } .bg-label-02 { background-color: var(--label-02) !important; } .bg-label-03 { background-color: var(--label-03) !important; } .bg-label-04 { background-color: var(--label-04) !important; } .bg-label-05 { background-color: var(--label-05) !important; } .bg-label-06 { background-color: var(--label-06) !important; } .bg-label-07 { background-color: var(--label-07) !important; } .bg-label-08 { background-color: var(--label-08) !important; } /* Element Color */ .element-basic { color: var(--element-basic) !important; } .element-disabled { color: var(--element-disabled) !important; } .element-white { color: var(--element-white) !important; } /* Background Color - Primary Palette */ .bg-primary-10 { background-color: var(--color-primary-10) !important; } .bg-primary-20 { background-color: var(--color-primary-20) !important; } .bg-primary-30 { background-color: var(--color-primary-30) !important; } .bg-primary-40 { background-color: var(--color-primary-40) !important; } .bg-primary-50 { background-color: var(--color-primary-50) !important; } .bg-primary-60 { background-color: var(--color-primary-60) !important; } .bg-primary-70 { background-color: var(--color-primary-70) !important; } .bg-primary-80 { background-color: var(--color-primary-80) !important; } .bg-primary-90 { background-color: var(--color-primary-90) !important; } /* Background Color - Secondary Palette */ .bg-secondary-10 { background-color: var(--color-secondary-10) !important; } .bg-secondary-20 { background-color: var(--color-secondary-20) !important; } .bg-secondary-30 { background-color: var(--color-secondary-30) !important; } .bg-secondary-40 { background-color: var(--color-secondary-40) !important; } .bg-secondary-50 { background-color: var(--color-secondary-50) !important; } .bg-secondary-60 { background-color: var(--color-secondary-60) !important; } .bg-secondary-70 { background-color: var(--color-secondary-70) !important; } .bg-secondary-80 { background-color: var(--color-secondary-80) !important; } .bg-secondary-90 { background-color: var(--color-secondary-90) !important; } /* Background Color - Point Palette */ .bg-point-10 { background-color: var(--color-point-10) !important; } .bg-point-20 { background-color: var(--color-point-20) !important; } .bg-point-30 { background-color: var(--color-point-30) !important; } .bg-point-40 { background-color: var(--color-point-40) !important; } .bg-point-50 { background-color: var(--color-point-50-primary) !important; } .bg-point-60 { background-color: var(--color-point-60) !important; } .bg-point-70 { background-color: var(--color-point-70) !important; } .bg-point-80 { background-color: var(--color-point-80) !important; } .bg-point-90 { background-color: var(--color-point-90) !important; } /* Background Color - Neutral Gray Palette */ .bg-gray-10 { background-color: var(--color-neutral-gray-10) !important; } .bg-gray-20 { background-color: var(--color-neutral-gray-20) !important; } .bg-gray-30 { background-color: var(--color-neutral-gray-30) !important; } .bg-gray-40 { background-color: var(--color-neutral-gray-40) !important; } .bg-gray-50 { background-color: var(--color-neutral-gray-50) !important; } .bg-gray-60 { background-color: var(--color-neutral-gray-60) !important; } .bg-gray-70 { background-color: var(--color-neutral-gray-70-primary) !important; } .bg-gray-80 { background-color: var(--color-neutral-gray-80) !important; } .bg-gray-90 { background-color: var(--color-neutral-gray-90) !important; } /* Text Color - Primary Palette */ .text-primary-10 { color: var(--color-primary-10) !important; } .text-primary-20 { color: var(--color-primary-20) !important; } .text-primary-30 { color: var(--color-primary-30) !important; } .text-primary-40 { color: var(--color-primary-40) !important; } .text-primary-50 { color: var(--color-primary-50) !important; } .text-primary-60 { color: var(--color-primary-60) !important; } .text-primary-70 { color: var(--color-primary-70) !important; } .text-primary-80 { color: var(--color-primary-80) !important; } .text-primary-90 { color: var(--color-primary-90) !important; } /* Text Color - Secondary Palette */ .text-secondary-10 { color: var(--color-secondary-10) !important; } .text-secondary-20 { color: var(--color-secondary-20) !important; } .text-secondary-30 { color: var(--color-secondary-30) !important; } .text-secondary-40 { color: var(--color-secondary-40) !important; } .text-secondary-50 { color: var(--color-secondary-50) !important; } .text-secondary-60 { color: var(--color-secondary-60) !important; } .text-secondary-70 { color: var(--color-secondary-70) !important; } .text-secondary-80 { color: var(--color-secondary-80) !important; } .text-secondary-90 { color: var(--color-secondary-90) !important; } /* Text Color - Point Palette */ .text-point-10 { color: var(--color-point-10) !important; } .text-point-20 { color: var(--color-point-20) !important; } .text-point-30 { color: var(--color-point-30) !important; } .text-point-40 { color: var(--color-point-40) !important; } .text-point-50 { color: var(--color-point-50-primary) !important; } .text-point-60 { color: var(--color-point-60) !important; } .text-point-70 { color: var(--color-point-70) !important; } .text-point-80 { color: var(--color-point-80) !important; } .text-point-90 { color: var(--color-point-90) !important; } /* Text Color - Neutral Gray Palette */ .text-gray-10 { color: var(--color-neutral-gray-10) !important; } .text-gray-20 { color: var(--color-neutral-gray-20) !important; } .text-gray-30 { color: var(--color-neutral-gray-30) !important; } .text-gray-40 { color: var(--color-neutral-gray-40) !important; } .text-gray-50 { color: var(--color-neutral-gray-50) !important; } .text-gray-60 { color: var(--color-neutral-gray-60) !important; } .text-gray-70 { color: var(--color-neutral-gray-70-primary) !important; } .text-gray-80 { color: var(--color-neutral-gray-80) !important; } .text-gray-90 { color: var(--color-neutral-gray-90) !important; } /* Font Size - Display */ .text-display-large { font-size: var(--display-large) !important; } .text-display-medium { font-size: var(--display-medium) !important; } .text-display-small { font-size: var(--display-small) !important; } /* Font Size - Heading */ .text-heading-xlarge { font-size: var(--heading-xlarge) !important; } .text-heading-large { font-size: var(--heading-large) !important; } .text-heading-medium { font-size: var(--heading-medium) !important; } .text-heading-small { font-size: var(--heading-small) !important; } .text-heading-xsmall { font-size: var(--heading-xsmall) !important; } .text-heading-xxsmall { font-size: var(--heading-xxsmall) !important; } /* Font Size - Body */ .text-body-large { font-size: var(--body-large) !important; } .text-body-medium { font-size: var(--body-medium) !important; } .text-body-small { font-size: var(--body-small) !important; } .text-body-xsmall { font-size: var(--body-xsmall) !important; } /* Font Size - Body Bold */ .text-body-large-bold { font-weight: bold; font-size: var(--body-large-bold) !important; } .text-body-medium-bold { font-weight: bold; font-size: var(--body-medium-bold) !important; } .text-body-small-bold { font-weight: bold; font-size: var(--body-small-bold) !important; } .text-body-xsmall-bold { font-weight: bold; font-size: var(--body-xsmall-bold) !important; } /* Font Size - Label */ .text-label-large { font-size: var(--label-large) !important; } .text-label-medium { font-size: var(--label-medium) !important; } .text-label-small { font-size: var(--label-small) !important; } .text-label-xsmall { font-size: var(--label-xsmall) !important; } /* Font Size - Navigation */ .text-nav-title-medium { font-size: var(--navigation-title-medium) !important; } .text-nav-depth-large-bold { font-weight: bold; font-size: var(--navigation-depth-large-bold) !important; } .text-nav-depth-medium-bold { font-weight: bold; font-size: var(--navigation-depth-medium-bold) !important; } .text-nav-depth-medium { font-size: var(--navigation-depth-medium) !important; } /* Font Size - Underline */ .text-underline-large { font-size: var(--underline-large) !important; text-decoration: underline; } .text-underline-medium { font-size: var(--underline-medium) !important; text-decoration: underline; } .text-underline-small { font-size: var(--underline-small) !important; text-decoration: underline; } .text-underline-xsmall { font-size: var(--underline-xsmall) !important; text-decoration: underline; } /* 공통 댓글 */ /* 공통 컨텐츠 만족도 조사 */ .cm_content_satisfaction { margin-top: clamp(30px, 4.9479166667vw, 95px); padding: clamp(20px, 1.6666666667vw, 32px) clamp(20px, 2.0833333333vw, 40px); border: 1px solid #000; word-break: keep-all; } .cm_content_satisfaction .survey_title { margin-bottom: 6px; } .cm_content_satisfaction .survey_content { display: flex; align-items: center; justify-content: space-between; } .cm_content_satisfaction .survey_action .cm_btn { background-color: var(--color-neutral-gray-80); } /* 텍스트 말줄임 */ .ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .ellipsis.line2 { -webkit-line-clamp: 2; } .ellipsis.line3 { -webkit-line-clamp: 3; } .ellipsis.line4 { -webkit-line-clamp: 4; } .ellipsis.line5 { -webkit-line-clamp: 5; } /* 공통 폼 */ input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration { display: none; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } input:focus, input:focus-visible { outline: 2px dashed #000; outline-offset: 2px; } input[type=file] { display: none; } .form_control { width: 100%; height: var(--form_height); padding: 0 16px; border: 1px solid var(--border-basic); background-color: #fff; color: var(--text-basic); font-size: 16px; } .form_control.size-md { height: var(--form_height_md); } .form_control.size-sm { height: var(--form_height_sm); } .form_control::placeholder { color: var(--text-enabled); } .form_control.datepicker { padding-right: 5rem; background: #fff url(../../images/common/icon_stroke_calendar.svg) no-repeat right 1.6rem center/2.4rem; } select.form_control { padding-right: 40px; background-image: url(../../images/common/icon_stroke_arrow_down.svg); background-position: right 14px center; background-repeat: no-repeat; } select.form_control.type2 { height: auto; border: 0; } textarea.form_control { height: var(--textarea_height); padding-top: 16px; padding-bottom: 16px; } .form_control[readonly], .form_control:disabled { border-color: var(--border-disabled); background-color: var(--button-disabled); color: var(--text-disabled); cursor: default; } .form_hide_wrap { position: relative; width: max-content; } .form_hide_wrap .form_control { padding-right: 5rem; } .form_hide_wrap .toggle_hide_btn { position: absolute; top: 50%; right: 1.6rem; width: 2.4rem; height: 2.4rem; transform: translateY(-50%); background-position: center; background-size: contain; background-repeat: no-repeat; } .form_hide_wrap .toggle_hide_btn.state_hide { background-image: url(../../images/common/icon_stroke_hide_gry.svg); } .form_hide_wrap .toggle_hide_btn.state_visible { background: url(../../images/common/icon_stroke_hit_gry.svg); } .cm_date_range { display: flex; align-items: center; gap: clamp(4px, 0.4166666667vw, 8px); } .cm_date_range .form_control { width: clamp(120px, 8.8541666667vw, 170px); } /* 공통 체크박스 */ [class*=cm_chk] { display: inline-flex; position: relative; flex-wrap: wrap; cursor: pointer; } [class*=cm_chk] input[type=checkbox], [class*=cm_chk] input[type=radio] { clip: rect(0, 0, 0, 0); position: absolute; width: 1px; min-width: 1px; height: 1px; min-height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; } [class*=cm_chk] .chk_label { -webkit-user-select: none; -moz-user-select: none; cursor: pointer; user-select: none; } .cm_chk_wrap { display: flex; flex-wrap: wrap; gap: 12px clamp(10px, 2.0833333333vw, 40px); cursor: default; } .cm_chk_wrap2 { display: flex; flex-wrap: wrap; margin-top: 16px; padding: 16px 24px; gap: 8px clamp(10px, 2.0833333333vw, 40px); border-top: 1px solid var(--border-basic); background: var(--color-neutral-gray-10); } .cm_chk1 .chk_label { position: relative; padding-left: 3.2rem; color: #444; font-size: var(--font_size17); line-height: 1.2; transition: color 0.3s ease; } .cm_chk1 .chk_label:before { display: inline-block; position: absolute; top: 50%; left: 0; width: 2.4rem; height: 2.4rem; transform: translateY(-50%); border: 1px solid #000; background-position: center; background-repeat: no-repeat; background-color: #fff; content: ""; vertical-align: middle; transition: border-color 0.3s ease, background-color 0.3s ease; } .cm_chk1 input[type=checkbox]:checked + .chk_label:before { background-image: url(../../images/common/icon_check2.svg); background-color: var(--background-darkgray); } .cm_chk1.bk .chk_label { color: var(--text-basic); } .cm_chk1.bk input[type=checkbox]:checked + .chk_label:before { background-color: #000; } .cm_chk1 input[type=radio] + .chk_label:after { position: absolute; top: 50%; left: 0.6rem; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); border-radius: 50%; background-color: #000; content: ""; opacity: 0; transition: opacity 0.3s ease; } .cm_chk1 input[type=radio] + .chk_label:before { border-radius: 50%; } .cm_chk1 input:checked + .chk_label:before { border-color: #000; } .cm_chk1 input[type=radio]:checked + .chk_label:before { border-width: 2px; } .cm_chk1 input:checked + .chk_label:after { opacity: 1; } .cm_chk1 input:focus-visible + .chk_label { outline: 2px dashed #000; outline-offset: 2px; transition: none !important; } .cm_chk1 .point-70 { color: var(--color-point-70) !important; } .cm_chk1 input:disabled + .chk_label { cursor: default; } .cm_chk1 input:disabled:not(:checked) + .chk_label { color: #999; } .cm_chk1 input:disabled:not(:checked) + .chk_label:before { border-color: #b0b0b0; background-color: #e0e0e0; } .cm_chk1 input:disabled:not(:checked) + .chk_label:after { background-color: #ddd; } .cm_chk1.size_sm input[type=radio] + .chk_label:after { left: 0.5rem; width: 1rem; height: 1rem; } .cm_chk1.size_sm .chk_label:before { width: 20px; height: 20px; } .cm_chk1.alone .chk_label { padding: 0; } .cm_chk1.alone .chk_label:before { position: static; transform: none; } .cm_chk1:hover .chk_label { color: #000; } .cm_chk1:hover .chk_label:before { border-color: #666; } .cm_chk2 .chk_label { display: flex; position: relative; align-items: center; justify-content: center; min-width: 54px; height: 48px; padding: 6px 12px; border: 1px solid var(--border-basic); background: var(--background-white); font-size: var(--font_size17); line-height: 150%; transition: color 0.2s, background-color 0.2s; } .cm_chk2 input:checked + .chk_label { z-index: 1; background: var(--color-point-50-primary); color: var(--text-white); } .cm_chk2 input:checked + .chk_label:before { display: block; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border: 2px solid var(--border-basic); content: ""; } .cm_chk2 input:focus-visible + .chk_label { outline: 2px dashed #000; outline-offset: 2px; transition: none !important; } /* 공통 파일리스트 */ .cm_file_list { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px 0; } .cm_file_list > li { font-size: clamp(13px, 0.78125vw, 15px); } .cm_file_list .file_box { display: flex; align-items: center; padding: clamp(6px, 0.4166666667vw, 8px) clamp(8px, 0.625vw, 12px); gap: 0 5px; border: 1px solid #000; border-radius: 4px; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .cm_file_list .file_delete_btn { flex-shrink: 0; aspect-ratio: 1/1; width: 24px; overflow: hidden; background: url(../../images/common/icon_stroke_cross_bold.svg) no-repeat center/65%; text-indent: 100%; white-space: nowrap; } /* 공통 파일첨부 드래그 앤 드롭 */ .cm_drop_zone .drop_zone { display: block; padding: 30px min(1.5625vw, 30px); border: 1px dashed #000; border-radius: 8px; font-size: var(--font_size15); text-align: center; transition: all 0.2s; } .cm_drop_zone .drop_zone:before { display: block; aspect-ratio: 1/1; width: 28px; margin: 0 auto; margin-bottom: 10px; background: url(../../images/common/icon_stroke_uploadFile.svg) no-repeat center/contain; content: ""; } .cm_drop_zone .drop_zone.dragover { border-color: var(--color-primary-90); background-color: var(--color-primary-10); } .cm_drop_zone + .cm_file_list { margin-top: 15px; } /* ui 달력 */ .ui-datepicker.ui-datepicker { padding: 2rem 1.2rem 1rem; border: 1px solid var(--border-basic); border-radius: 0; box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.15); font-weight: 700; font-size: var(--font_size17); } .ui-datepicker.ui-datepicker * { font-family: "PretendardGOV"; } .ui-datepicker.ui-datepicker table { margin: 0; } .ui-datepicker.ui-datepicker .ui-datepicker-header { margin-bottom: 1.2rem; padding: 0; border: 0; background: none; color: var(--text-basic); } .ui-datepicker.ui-datepicker .ui-datepicker-prev { background: url(../../images/common/icon_stroke_arrow_left.svg) no-repeat center/24px; } .ui-datepicker.ui-datepicker .ui-datepicker-next { background: url(../../images/common/icon_stroke_arrow_right.svg) no-repeat center/24px; } .ui-datepicker.ui-datepicker .ui-datepicker-prev span, .ui-datepicker.ui-datepicker .ui-datepicker-next span { clip: rect(0 0 0 0); position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; } .ui-datepicker.ui-datepicker .ui-datepicker-title select { appearance: none; padding: 0 10px; padding-right: 25px; border: 0; background: #fff url(../../images/common/icon_solid_arrow_drop.svg) no-repeat right 5px center/15px; color: #333; font-weight: 500; font-size: 1.6rem; line-height: 1.5; } .ui-datepicker.ui-datepicker .ui-datepicker-calendar th { width: 28px; height: 28px; padding: 4px; color: var(--text-basic); } .ui-datepicker.ui-datepicker .ui-datepicker-calendar th.ui-datepicker-week-end:first-child, .ui-datepicker.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-week-end:first-child a { color: var(--text-point-red); } .ui-datepicker.ui-datepicker .ui-datepicker-calendar th.ui-datepicker-week-end:last-child, .ui-datepicker.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-week-end:last-child a { color: #2530ff; } .ui-datepicker.ui-datepicker .ui-datepicker-calendar tbody tr ~ tr { margin-top: 8px; } .ui-datepicker.ui-datepicker .ui-datepicker-calendar td a { display: block; width: 28px; height: 28px; padding: 4px; border: 0; background: none; color: var(--text-basic); text-align: center; } .ui-datepicker.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable { opacity: 1; } .ui-datepicker.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable span { border: 0; background: none; color: var(--text-tertiary); text-align: center; } .ui-datepicker.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a { display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; background: #000; color: #fff; } /* sns 로그인 리스트 */ .sns_login_list { display: flex; flex-direction: column; gap: 10px; } .sns_login_list > li { display: flex; align-items: center; gap: 8px; } .sns_login_list .cm_btn { min-width: 90px; } .sns_login_list .info_text { color: #333; font-size: 15px; } /* form group */ .required_mark { color: var(--text-point-red); } .cm_form_title { display: flex; align-items: center; justify-content: space-between; padding: 1.35rem 2.4rem; gap: 1rem; background: var(--color-neutral-gray-10); line-height: 1.2; } .cm_form_title .title { flex: 1; font-weight: 700; font-size: var(--font_size19); } .cm_form_title .form_required { color: #333; font-size: var(--font_size16); } .cm_form_title .form_required .required_mark { color: var(--text-point-red); font-size: var(--font_size17); } .form_group { display: flex; gap: 1.2rem 2rem; } .form_group .form_label { width: 14rem; padding-top: 1.6rem; font-weight: 700; font-size: var(--font_size19); } .form_group.static_value .form_label { padding-top: 0; } .form_group .form_content { flex: 1; } .form_group.static_value .form_content { font-size: var(--font_size19); } .form_group .form_content .form_control { width: 32rem; } .form_group .form_content .input_wrap { display: flex; gap: 8px; } .form_group .form_content .input_wrap .cm_btn { height: auto; } .form_group .form_content .input_wrap.email { display: flex; align-items: center; max-width: 68rem; } .form_group .form_content .input_wrap.email .form_control { width: 24rem; } .form_group .form_content .input_wrap.email .form_select { flex: 1; width: 100%; } .form_group .form_content .input_wrap.address { flex-direction: column; width: 59rem; gap: 1.6rem; } .form_group .form_content .input_wrap.address .search_line { display: flex; gap: 8px; } .form_group .form_content .input_wrap.address .search_line .form_control:nth-child(1) { width: 14rem; } .form_group .form_content .input_wrap.address .search_line .form_control:nth-child(2) { flex: 1; width: 100%; } .form_group .form_content .input_wrap.address .input_line .form_control { width: 100%; } .form_group.column { flex-direction: column; } .form_group.column .form_label, .form_group.column .form_content { flex: 1; width: 100%; } .form_group.column .form_label { padding-top: 0; font-size: var(--font_size17); } .form_group.type2 { flex-direction: row !important; flex-wrap: wrap; gap: 8px; } .form_group.type2 .cm_btn { height: var(--form_height); } .form_group.fixed { flex-wrap: nowrap; } .form_group.fixed-xl { flex-direction: row; flex-wrap: nowrap; } .form_group.fixed-lg { flex-direction: row; flex-wrap: nowrap; } .form_group.fixed-md { flex-direction: row; flex-wrap: nowrap; } .form_group .col-text { align-self: center; } /* 공통 라인 */ .cm_hr1 { width: 100%; height: 1px; background: var(--color-neutral-gray-40); } /* 공통 아이콘 */ .cm_icon { --icon-size: 24; --icon-gap: 8; /* px 숫자 */ display: inline-flex; position: relative; align-items: center; gap: calc(var(--icon-gap) * 1px); line-height: 1.3; vertical-align: middle; } .cm_icon::before { display: block; flex-shrink: 0; width: calc(var(--icon-size) * 1px); height: calc(var(--icon-size) * 1px); background-position: center; background-size: contain; background-repeat: no-repeat; content: ""; } .cm_icon.size_xs { --icon-size: 16; } .cm_icon.size_sm { --icon-size: 20; } .cm_icon.size_md { --icon-size: 24; } .cm_icon.size_lg { --icon-size: 32; } .cm_icon.size_xl { --icon-size: 40; } .cm_icon.icon_r { flex-direction: row-reverse; } .cm_icon.notext { gap: 0; } .cm_icon.notext, .cm_icon.notext > * { overflow: hidden; text-indent: -9999px; } .cm_icon.notext:before { margin: 0 !important; } .cm_icon.start { align-items: flex-start; } /* 아이콘 매핑 */ .cm_icon.icon_arrow_right_sm::before { background-image: url(../../images/common/icon_arrow_right_sm.svg); } .cm_icon.icon_external_link::before { background-image: url(../../images/common/icon_other_external_link.svg); } .cm_icon.icon_arrow_drop::before { background-image: url(../../images/common/icon_solid_arrow_drop.svg); } .cm_icon.icon_service_link::before { background-image: url(../../images/common/icon_solid_service_link.svg); } .cm_icon.icon_addFile::before { background-image: url(../../images/common/icon_stroke_addFile.svg); } .cm_icon.icon_appleBook::before { background-image: url(../../images/common/icon_stroke_appleBook.svg); } .cm_icon.icon_arrow_down::before { background-image: url(../../images/common/icon_stroke_arrow_down.svg); } .cm_icon.icon_arrow_left::before { background-image: url(../../images/common/icon_stroke_arrow_left.svg); } .cm_icon.icon_arrow_right::before { background-image: url(../../images/common/icon_stroke_arrow_right.svg); } .cm_icon.icon_arrow_shortcut::before { background-image: url(../../images/common/icon_stroke_arrow_shortcut.svg); } .cm_icon.icon_arrow_shortcut2::before { background-image: url(../../images/common/icon_stroke_arrow_shortcut2.svg); } .cm_icon.icon_arrow_up::before { background-image: url(../../images/common/icon_stroke_arrow_up.svg); } .cm_icon.icon_arrow2_right::before { background-image: url(../../images/common/icon_stroke_arrow2_right.svg); } .cm_icon.icon_arrow2_right2::before { background-image: url(../../images/common/icon_stroke_arrow2_right2.svg); } .cm_icon.icon_arrow2_right_wt::before { background-image: url(../../images/common/icon_stroke_arrow2_right_wt.svg); } .cm_icon.icon_arrow3_right::before { background-image: url(../../images/common/icon_stroke_arrow3_right.svg); } .cm_icon.icon_arrow4_right::before { background-image: url(../../images/common/icon_stroke_arrow4_right.svg); } .cm_icon.icon_base::before { background-image: url(../../images/common/icon_stroke_base.svg); } .cm_icon.icon_book::before { background-image: url(../../images/common/icon_stroke_book.svg); } .cm_icon.icon_calendar_check::before { background-image: url(../../images/common/icon_stroke_calendar_check.svg); } .cm_icon.icon_calendar::before { background-image: url(../../images/common/icon_stroke_calendar.svg); } .cm_icon.icon_call::before { background-image: url(../../images/common/icon_stroke_call.svg); } .cm_icon.icon_check_circle::before { background-image: url(../../images/common/icon_stroke_check_circle.svg); } .cm_icon.icon_cross_bold::before { background-image: url(../../images/common/icon_stroke_cross_bold.svg); } .cm_icon.icon_earth::before { background-image: url(../../images/common/icon_stroke_earth.svg); } .cm_icon.icon_edit::before { background-image: url(../../images/common/icon_stroke_edit.svg); } .cm_icon.icon_externalLink::before { background-image: url(../../images/common/icon_stroke_externalLink.svg); } .cm_icon.icon_externalLink2::before { background-image: url(../../images/common/icon_stroke_externalLink2.svg); } .cm_icon.icon_file::before { background-image: url(../../images/common/icon_stroke_file.svg); } .cm_icon.icon_filter::before { background-image: url(../../images/common/icon_stroke_filter.svg); } .cm_icon.icon_flag::before { background-image: url(../../images/common/icon_stroke_flag.svg); } .cm_icon.icon_hide::before { background-image: url(../../images/common/icon_stroke_hide.svg); } .cm_icon.icon_hit::before { background-image: url(../../images/common/icon_stroke_hit.svg); } .cm_icon.icon_home::before { background-image: url(../../images/common/icon_stroke_home.svg); } .cm_icon.icon_home2::before { background-image: url(../../images/common/icon_solid_home.svg); } .cm_icon.icon_home3::before { background-image: url(../../images/common/icon_solid_home2.svg); } .cm_icon.icon_info::before { background-image: url(../../images/common/icon_info.svg); } .cm_icon.icon_link::before { background-image: url(../../images/common/icon_stroke_link.svg); } .cm_icon.icon_location::before { background-image: url(../../images/common/icon_stroke_location.svg); } .cm_icon.icon_location2::before { background-image: url(../../images/common/icon_stroke_location2.svg); } .cm_icon.icon_lock::before { background-image: url(../../images/common/icon_stroke_lock.svg); } .cm_icon.icon_lock2::before { background-image: url(../../images/common/icon_solid_lock.svg); } .cm_icon.icon_mail::before { background-image: url(../../images/common/icon_stroke_mail.svg); } .cm_icon.icon_map::before { background-image: url(../../images/common/icon_stroke_map.svg); } .cm_icon.icon_menu::before { background-image: url(../../images/common/icon_stroke_menu.svg); } .cm_icon.icon_minus::before { background-image: url(../../images/common/icon_stroke_minus.svg); } .cm_icon.icon_minus2::before { background-image: url(../../images/common/icon_solid_minus.svg); } .cm_icon.icon_notice::before { background-image: url(../../images/common/icon_stroke_notice.svg); } .cm_icon.icon_pause::before { background-image: url(../../images/common/icon_stroke_pause.svg); } .cm_icon.icon_play::before { background-image: url(../../images/common/icon_stroke_play.svg); } .cm_icon.icon_plus::before { background-image: url(../../images/common/icon_stroke_plus.svg); } .cm_icon.icon_plus2::before { background-image: url(../../images/common/icon_solid_plus.svg); } .cm_icon.icon_plus3::before { background-image: url(../../images/common/icon_stroke_plus2.svg); } .cm_icon.icon_price::before { background-image: url(../../images/common/icon_stroke_price.svg); } .cm_icon.icon_print::before { background-image: url(../../images/common/icon_stroke_print.svg); } .cm_icon.icon_print_wt::before { background-image: url(../../images/common/icon_stroke_print_wt.svg); } .cm_icon.icon_reply::before { background-image: url(../../images/common/icon_stroke_reply.svg); } .cm_icon.icon_reply2::before { background-image: url(../../images/common/icon_reply.svg); } .cm_icon.icon_rotate::before { background-image: url(../../images/common/icon_stroke_rotate.svg); } .cm_icon.icon_search_detail::before { background-image: url(../../images/common/icon_stroke_search_detail.svg); } .cm_icon.icon_search_detail_wt::before { background-image: url(../../images/common/icon_stroke_search_detail_wt.svg); } .cm_icon.icon_search::before { background-image: url(../../images/common/icon_stroke_search.svg); } .cm_icon.icon_search_wt::before { background-image: url(../../images/common/icon_stroke_search_wt.svg); } .cm_icon.icon_setting::before { background-image: url(../../images/common/icon_stroke_setting.svg); } .cm_icon.icon_smile::before { background-image: url(../../images/common/icon_stroke_smile.svg); } .cm_icon.icon_star::before { background-image: url(../../images/common/icon_stroke_star.svg); } .cm_icon.icon_star2::before { background-image: url(../../images/common/icon_solid_star.svg); } .cm_icon.icon_star3::before { background-image: url(../../images/common/icon_solid_star2.svg); } .cm_icon.icon_survey::before { background-image: url(../../images/common/icon_stroke_survey.svg); } .cm_icon.icon_time::before { background-image: url(../../images/common/icon_stroke_time.svg); } .cm_icon.icon_uploadFile::before { background-image: url(../../images/common/icon_stroke_uploadFile.svg); } .cm_icon.icon_user::before { background-image: url(../../images/common/icon_stroke_user.svg); } .cm_icon.icon_view_mode::before { background-image: url(../../images/common/icon_stroke_view_mode.svg); } .cm_icon.icon_new::before { background-image: url(../../images/common/icon_solid_new.svg); } .cm_icon.icon_like::before { background-image: url(../../images/common/icon_solid_like.svg); } .cm_icon.icon_like_on::before { background-image: url(../../images/common/icon_solid_like_on.svg); } .cm_icon.icon_exit_wt::before { background-image: url(../../images/common/icon_exit_wt.svg); } .cm_icon.icon_korea::before { background-image: url(../../images/common/icon_other_korea.svg); } .cm_icon.icon_arrow_open::before { background-image: url(../../images/common/icon_arrow_open.svg); } .cm_icon.icon_arrow_close::before { background-image: url(../../images/common/icon_arrow_close.svg); } .cm_icon.icon_download::before { background-image: url(../../images/common/icon_stroke_download.svg); } .cm_icon.icon_download_wt::before { background-image: url(../../images/common/icon_stroke_download_wt.svg); } .cm_icon.icon_download2::before { background-image: url(../../images/common/icon_download2.svg); } .cm_icon.icon_download2_wt::before { background-image: url(../../images/common/icon_download_wt.svg); } /* 공통 이미지 */ .cm_img_zoom_wrap { text-align: center; } .cm_image { display: flex; flex-wrap: wrap; gap: clamp(15px, 1.25vw, 24px); } .cm_image img { width: 100%; } .cm_image.col1 > * { width: 100%; } .cm_image.col2 > * { width: calc((100% - clamp(15px, 1.25vw, 24px)) / 2); } .cm_image.col3 > * { width: calc((100% - clamp(15px, 1.25vw, 24px) * 2) / 3); } .cm_image.col4 > * { width: calc((100% - clamp(15px, 1.25vw, 24px) * 3) / 4); } /* 공통 keyframes */ @keyframes show_popup { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes hide_popup { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0; } } @keyframes swipeRight { 0% { transform: translateX(0); } 50% { transform: translateX(0.5rem); } 100% { transform: translateX(0); } } @keyframes thumbBtnsFadeIn { from { opacity: 0; } to { opacity: 1; } } /* 공통 공공누리 */ .cm_kogl_info { margin-top: clamp(30px, 4.9479166667vw, 95px); padding: clamp(20px, 1.6666666667vw, 32px) clamp(20px, 2.0833333333vw, 40px); border: clamp(4px, 0.3125vw, 6px) solid var(--color-neutral-gray-20); } .cm_kogl_info .kogl_info_title { display: flex; flex-wrap: wrap; align-items: baseline; margin-bottom: 6px; gap: 10px; } .cm_kogl_info .kogl_info_content { display: flex; align-items: baseline; gap: 10px min(0.5208333333vw, 10px); } .cm_kogl_info .kogl_info_img { flex-shrink: 0; } .cm_kogl_info .kogl_info_img img { height: 55px; } .cm_kogl_info .kogl_info_text { flex: 1; min-width: 0; } .cm_kogl_info .kogl_info_text .cm_bul_list1 > .list_item ~ .list_item { margin-top: 0; } /* 공통 line_height */ .cm_line_height1 { line-height: 1; } .cm_line_height1_1 { line-height: 1.1; } .cm_line_height1_2 { line-height: 1.2; } .cm_line_height1_3 { line-height: 1.3; } .cm_line_height1_4 { line-height: 1.4; } .cm_line_height1_5 { line-height: 1.5; } .cm_line_height1_6 { line-height: 1.6; } .cm_line_height1_7 { line-height: 1.7; } .cm_line_height1_8 { line-height: 1.8; } .cm_line_height1_9 { line-height: 1.9; } .cm_line_height2 { line-height: 2; } /* 공통 bullet list */ .cm_bul_list1 > .list_item { position: relative; padding-left: 3.2rem; } .cm_bul_list1 > .list_item:before { position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem; background: url(../../images/common/cm_bul1.svg) no-repeat center/0.6rem; content: ""; } .cm_bul_list1 > .list_item ~ .list_item { margin-top: 1.2rem; } .cm_bul_list1 .point-70 { color: var(--color-point-70) !important; font-weight: 700; } .cm_bul_list1.size_sm > .list_item { padding-left: 2.4rem; } .cm_bul_list1.size_sm > .list_item:before { background-size: 0.4rem; } .cm_bul_list1.size_xs > .list_item { padding-left: 2rem; } .cm_bul_list1.size_xs > .list_item:before { background-size: 0.35rem; } .cm_bul_list1.size_xs > .list_item ~ .list_item { margin-top: 0.4rem; } .cm_bul_list1 > .list_item.item_flex { display: flex; gap: 0.4rem; } .cm_bul_list1 > .list_item.item_flex .flex_title { flex-shrink: 0; } .cm_bul_list2 > .list_item { display: flex; gap: 1.2rem; } .cm_bul_list2 > .list_item:before { display: block; flex-shrink: 0; width: 6px; height: 1px; margin-top: 11px; background: var(--text-secondary); content: ""; } .cm_bul_list2 > .list_item ~ .list_item { margin-top: 0.8rem; } .cm_bul_list3 > .list_item { display: flex; gap: 12px; } .cm_bul_list3 > .list_item:before { content: "※"; } .cm_bul_list3 > .list_item ~ .list_item { margin-top: 0.8rem; } .cm_bul_list4 > .list_item { display: flex; align-items: flex-start; gap: 0.8rem; } .cm_bul_list4 > .list_item span { flex: 1; min-width: 0; } .cm_bul_list4 > .list_item .number { display: flex; flex: none; flex-shrink: 0; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding-top: 0.1rem; padding-left: 0.1rem; border-radius: 100%; background: var(--color-primary-80); color: #fff; font-weight: 700; font-size: 1.3rem; } .cm_bul_list4 > .list_item ~ .list_item { margin-top: 1rem; } .cm_bul_list5 > .list_item { display: flex; align-items: flex-start; gap: 0.8rem; } .cm_bul_list5 > .list_item span { flex: 1; min-width: 0; } .cm_bul_list5 > .list_item .number { flex: none; flex-shrink: 0; } .cm_bul_list5 > .list_item ~ .list_item { margin-top: 0.3rem; } /* 공통 dash list */ .cm_dash_list1 { display: flex; } .cm_dash_list1 .list_item { position: relative; margin-right: 8px; padding-right: 9px; } .cm_dash_list1 .list_item:after { position: absolute; top: calc(50% - 7px); right: 0; width: 2px; height: 13px; background: #909090; content: ""; } .cm_dash_list1 .list_item:last-child { margin-right: 0; padding-right: 0; } .cm_dash_list1 .list_item:last-child:after { display: none; } .cm_dash_list1.size_sm .list_item { margin-right: 8px; padding-right: 9px; font-size: var(--font_size15); } .cm_dash_list1.size_sm .list_item:last-child { margin-right: 0; padding-right: 0; } .cm_dash_list1.size_sm .list_item:after { top: calc(50% - 4px); height: 8px; } .cm_dash_list2 { display: flex; } .cm_dash_list2 .list_item { position: relative; margin-right: 16px; padding-right: 17px; } .cm_dash_list2 .list_item:after { position: absolute; top: calc(50% - 9px); right: 0; width: 1px; height: 17px; background: var(--border-basic); content: ""; } .cm_dash_list2 .list_item:last-child { margin-right: 0; padding-right: 0; } .cm_dash_list2 .list_item:last-child:after { display: none; } /* 공통 dl */ .cm_dl1 { display: flex; gap: 0.8rem; font-size: var(--font_size15); } .cm_dl1 dt { width: 6rem; font-weight: 700; } .cm_dl1 dd { fleX: 1; color: var(--text-secondary); } .cm_dl2 { display: flex; align-items: center; gap: clamp(4px, 0.4166666667vw, 8px) clamp(10px, 1.25vw, 24px); } .cm_dl2 dt { flex-shrink: 0; } .cm_dl2 dd { flex-grow: 1; min-width: 0; font-size: clamp(14px, 0.78125vw, 15px); } .cm_dl3 { display: flex; align-items: center; justify-content: space-between; gap: clamp(4px, 0.4166666667vw, 8px) clamp(16px, 1.25vw, 24px); } .cm_dl3 dt { flex-grow: 1; min-width: 0; } .cm_dl3 dd { flex-shrink: 0; } .cm_dl4 { display: flex; align-items: baseline; gap: clamp(4px, 0.4166666667vw, 8px) clamp(16px, 1.25vw, 24px); } .cm_dl4 dt { flex-shrink: 0; } /* 공통 step list */ .cm_step_list1 { display: flex; justify-content: space-around; } .cm_step_list1 .list_item { display: flex; position: relative; flex: 1; align-items: center; justify-content: center; padding: min(1.25vw, 24px) min(1.6666666667vw, 32px); gap: 0 0.8rem; border: 1px solid var(--border-tertiary); border-right: 0; background: #fff; color: var(--text-secondary); font-size: var(--font_size15); line-height: 1.5; } .cm_step_list1 .list_item:after { z-index: 1; position: absolute; top: calc(50% - min(0.9375vw, 18px)); left: calc(100% - min(0.9375vw, 18px)); width: min(1.875vw, 36px); height: min(1.875vw, 36px); border: 1px solid var(--button-secondary); background: #fff url(../../images/common/icon_stroke_arrow_right_dkgry.svg) no-repeat center/min(1.25vw, 24px); content: ""; } .cm_step_list1 .list_item:last-child { border-right: 1px solid var(--border-tertiary); } .cm_step_list1 .list_item:last-child:after { display: none; } .cm_step_list1 .list_item.active { border-color: var(--color-point-50-primary); background: var(--color-point-50-primary); color: #fff; } .cm_step_list1 .list_item.active:after { border-color: var(--color-point-70); background-image: url(../../images/common/icon_stroke_arrow_right_wt.svg); background-color: var(--color-point-70); } .cm_step_list1 .list_item.active + .list_item { border-left: 0; } .cm_step_list1 .list_item .cont { font-weight: 700; font-size: var(--font_size19); } .cm_step_list2 { display: flex; flex-wrap: wrap; gap: 4rem; } .cm_step_list2 .list_item { position: relative; flex: 1; } .cm_step_list2 .list_item:after { position: absolute; top: calc(50% - 1.2rem); left: calc(100% + 0.9rem); width: 2.4rem; height: 2.4rem; background: url(../../images/common/icon_stroke_arrow_right_gry.svg) no-repeat center/contain; content: ""; } .cm_step_list2 .list_item:last-child:after { display: none; } .cm_step_list2 .item_box { display: flex; flex-direction: column; height: 100%; padding: 8px; border: 1px solid var(--border-basic); } .cm_step_list2 .item_box .head { display: flex; align-items: center; justify-content: center; height: 3.9rem; background: #000; color: #fff; font-weight: 600; font-size: var(--font_size15); text-transform: uppercase; } .cm_step_list2 .item_box .body { display: flex; flex: 1; align-items: center; justify-content: center; padding: 2rem 1.6rem 2.4rem; text-align: center; } .cm_step_list3 { display: flex; flex-wrap: wrap; gap: 1.6rem 5.3rem; word-break: keep-all; } .cm_step_list3 .list_item { position: relative; width: calc((100% - 15.9rem) / 4); } .cm_step_list3 .list_item:after { position: absolute; top: 6.1rem; bottom: 0; left: 100%; width: 5.3rem; background: url(../../images/common/icon_stroke_arrow_right_gry.svg) no-repeat center/2.4rem; content: ""; } .cm_step_list3 .list_item:nth-child(4n+4):after, .cm_step_list3 .list_item:last-child:after { display: none; } .cm_step_list3 .item_box { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--border-basic); } .cm_step_list3 .item_box .head { display: flex; align-items: center; justify-content: center; height: 6.1rem; padding: 1rem 1.6rem; background: var(--color-primary-90); color: #fff; font-weight: 700; font-size: 1.9rem; line-height: 1.3; text-align: center; } .cm_step_list3 .item_box .body { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 14rem; padding: 2.4rem; font-size: 1.7rem; line-height: 1.5; text-align: center; } .cm_step_list3.row3 { gap: 1.6rem 9rem; } .cm_step_list3.row3 .list_item:after { width: 9rem; } .cm_step_list3.row3 .list_item { width: calc((100% - 18rem) / 3); } .cm_step_list3.row3 .list_item:nth-child(4n+4):after { display: block; } .cm_step_list3.row3 .list_item:nth-child(3n+3):after, .cm_step_list3.row3 .list_item:last-child:after { display: none; } .cm_step_list4 { word-break: keep-all; } .cm_step_list4 > .list_item { position: relative; padding-bottom: 3.2rem; padding-left: 4rem; } .cm_step_list4 > .list_item:before { z-index: 1; position: absolute; top: 0; bottom: 0; left: 1.2rem; width: 1px; background: #000; content: ""; } .cm_step_list4 > .list_item:last-child:before { display: none; } .cm_step_list4 > .list_item:after { z-index: 2; position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem; border-radius: 100%; background: #000 url(../../images/common/icon_check2.svg) no-repeat center/2rem; content: ""; } .cm_step_list4 .item_title { margin-top: -0.2rem; font-weight: 700; font-size: 1.9rem; line-height: 150%; } .cm_step_list4 .item_desc { margin-top: 0.8rem; padding: 2.4rem; border: 1px solid #000; background: #fff; font-size: 1.7rem; line-height: 150%; } .cm_step_list4.type2 > .list_item:after { display: none; } .cm_step_list4.type2 .item_number { display: flex; z-index: 2; position: absolute; top: 0rem; left: 0; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 100%; background: #000; color: #fff; font-weight: 700; font-size: 1.3rem; } .cm_step_list4.type2 .item_desc { display: flex; flex-direction: column; justify-content: center; min-height: 9.6rem; } .cm_step_list4.type2 .item_desc.relative { position: relative; padding-right: 20rem; } .cm_step_list4.type2 .item_desc.relative .item_btn { position: absolute; right: 1.6rem; bottom: 1.6rem; } .cm_step_list5 { display: flex; justify-content: center; } .cm_step_list5 .list_item { position: relative; flex: 1; text-align: center; } .cm_step_list5 .item_icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; width: clamp(45px, 5vw, 96px); margin: 0 auto; margin-bottom: clamp(10px, 1.0416666667vw, 20px); border-radius: 1000px; background-color: var(--color-neutral-gray-70-primary); } .cm_step_list5 .item_icon img { width: 42%; } .cm_step_list5 .item_title { font-weight: bold; word-break: keep-all; } .cm_step_list5 .list_item:before { position: absolute; top: calc(clamp(45px, 5vw, 96px) / 2); left: 100%; width: 2.4rem; height: 2.4rem; transform: translate(-50%, -50%); background: url(../../images/common/icon_arrow_right2.svg) no-repeat center/contain; content: ""; } .cm_step_list5 .list_item:last-child:before { display: none; } .cm_step_list5 .list_item.active .item_icon { background-color: var(--color-point-60); } .cm_img_list1 { display: flex; flex-wrap: wrap; gap: 2.4rem; } .cm_img_list1 .list_item > img { width: 100%; } .cm_img_list1.row2 .list_item { width: calc((100% - 2.4rem) / 2); } .cm_img_list1.row3 .list_item { width: calc((100% - 4.8rem) / 3); } .cm_img_list1.row4 .list_item { width: calc((100% - 7.2rem) / 4); } /* 공통 더보기 */ /* 공통 데이터 없음 */ .cm_nodata1 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 0; font-weight: 600; font-size: 17px; text-align: center; } .cm_nodata1 .img_nodata1 { max-width: 140px; margin-bottom: 30px; } .cm_nodata2 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7rem 0; gap: 2.4rem; border-bottom: 1px solid #000; text-align: center; } .cm_nodata2 .nodata_img { max-width: 6.8rem; } .cm_nodata2 .nodata_title { font-weight: 500; font-size: 1.9rem; line-height: 150%; } /* 공통 오더 리스트 */ .cm_order_list1 .ol_list > li { margin-bottom: -1px; } .cm_order_list1 .ol_box_wrap { position: relative; } .cm_order_list1 .ol_box { padding: 15px; border: 1px solid #ddd; background-color: #f9f9f9; } .cm_order_list1 .ol_box .row { margin-bottom: 10px; } .cm_order_list1 .ol_box .row:last-child { margin-bottom: 0; } .cm_order_list1 .ol_title { margin-bottom: 5px; color: #333; font-weight: bold; font-size: 13px; } .cm_order_list1 .ol_del { display: flex; position: absolute; top: 5px; right: 5px; align-items: center; justify-content: center; width: 35px; height: 35px; } .cm_order_list1 .ol_del .cm_icon { width: 12px; height: 12px; overflow: hidden; text-indent: 100%; white-space: nowrap; } /* 공통 오버뷰 */ .cm_overview1 .ovw1_list { display: flex; flex-wrap: wrap; gap: clamp(15px, 1.8229166667vw, 35px) clamp(15px, 2.0833333333vw, 40px); } .cm_overview1 .ovw1_list > li { width: calc((100% - clamp(15px, 2.0833333333vw, 40px) * 2) / 3); } .cm_overview1 .ovw1_box { display: flex; flex-direction: column; } .cm_overview1 .ovw1_thumb { position: relative; aspect-ratio: 4/3; width: 100%; overflow: hidden; background-color: var(--color-neutral-gray-10); } .cm_overview1 .ovw1_thumb_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; transition: transform 0.4s ease, filter 0.4s ease; } .cm_overview1 .ovw1_content { padding: 25px 0; } .cm_overview1 .ovw1_title { display: flex; position: relative; align-items: center; margin-bottom: 25px; padding-bottom: 15px; gap: 8px; font-weight: bold; font-size: clamp(18px, 1.25vw, 24px); line-height: 1.3; transition: color 0.4s ease; } .cm_overview1 .ovw1_title_text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm_overview1 .ovw1_title .cm_icon { flex-shrink: 0; } .cm_overview1 .ovw1_title:before { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #000; content: ""; } .cm_overview1 .ovw1_title:after { position: absolute; bottom: 0; left: 0; width: 0; height: 4px; background-color: var(--color-point-50-primary); content: ""; transition: width 0.4s ease; } .cm_overview1 .ovw1_info { color: var(--text-secondary); } .cm_overview1 .ovw1_box:hover .ovw1_thumb_img { transform: scale(1.05); filter: contrast(1.2) saturate(1.3) brightness(1.1) hue-rotate(5deg); } .cm_overview1 .ovw1_box:hover .ovw1_title { color: var(--color-point-50-primary); } .cm_overview1 .ovw1_box:hover .ovw1_title:after { width: 100%; } .cm_overview2 .ovw2_list { display: flex; justify-content: space-between; gap: 2.4rem; } .cm_overview2 .ovw2_item { flex: 1; padding: 4.2rem 4rem; border: 1px solid rgba(0, 0, 0, 0.1); border-top: 3px solid #000; text-align: center; } .cm_overview2 .ovw2_item .item_icon { display: inline-flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; margin-bottom: 1.6rem; border-radius: 100px; background: var(--color-neutral-gray-10); } .cm_overview2 .ovw2_item .item_icon img { width: 3.2rem; } .cm_overview2 .ovw2_item .item_title { margin-bottom: 0.8rem; font-weight: 700; font-size: var(--font_size24); line-height: 1.5; } .cm_overview2 .ovw2_item .item_desc { color: var(--text-secondary); font-size: var(--font_size15); line-height: 1.3; } .cm_overview2 .ovw2_item .cm_btn { margin-top: 1.6rem; word-break: keep-all; } .cm_overview3 { display: flex; justify-content: space-between; gap: 4rem; } .cm_overview3 .ovw3_box { flex: 1; } .cm_overview3 .ovw3_box .box_inner { display: flex; align-items: center; gap: clamp(15px, 1.6666666667vw, 32px); } .cm_overview3 .ovw3_box .ovw3_icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; aspect-ratio: 1/1; width: 10rem; border-radius: 100%; background: var(--color-neutral-gray-10); } .cm_overview3 .ovw3_box .ovw3_icon.size_xs { width: clamp(50px, 3.75vw, 72px); } .cm_overview3 .ovw3_box .ovw3_text { flex: 1; } .cm_overview3 .ovw3_box .ovw3_btn { flex-shrink: 0; } .cm_overview3 .ovw3_box .title { margin-bottom: 0.8rem; font-weight: 700; font-size: var(--font_size24); line-height: 1.5; } .cm_overview3 .ovw3_box .desc { margin-bottom: 1.6rem; } .cm_overview4 { padding: 40px; border-top: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary); background: var(--background-white); text-align: center; word-break: keep-all; } .cm_overview4 .ovw_img { width: auto; max-width: 5.6rem; margin: 0 auto; } .cm_overview4 .ovw_title { margin-top: 8px; font-weight: 700; font-size: var(--font_size24); line-height: 150%; } .cm_overview4 .ovw_title_text { margin-top: 8px; color: var(--text-secondary); font-size: var(--font_size17); line-height: 150%; } .cm_overview4 .ovw_desc { margin-top: 40px; color: var(--text-secondary); font-size: var(--font_size17); line-height: 150%; } .cm_overview4 .ovw_tip { margin-top: 4px; color: var(--text-secondary); font-weight: 700; font-size: var(--font_size17); line-height: 150%; } .cm_overview4 .point-70 { color: var(--color-point-70) !important; } .cm_overview5 { border-top: 2px solid #000; } .cm_overview5 .ovw5_list > li { border-bottom: 1px solid #000; } .cm_overview5 .ovw5_top { display: flex; position: relative; align-items: center; width: 100%; padding: 3.7rem 4.5rem; padding-right: 5.5rem; gap: 0 1.5rem; text-align: left; transition: background-color 0.2s ease; } .cm_overview5 .ovw5_top:before { display: block; flex-shrink: 0; aspect-ratio: 1/1; width: 3.4rem; margin-right: 3rem; background: url(../../images/common/icon_q.svg) no-repeat center/64%; content: ""; } .cm_overview5 .ovw5_top:after { display: block; position: absolute; top: 50%; right: 2rem; aspect-ratio: 1/1; width: 3.2rem; transform: translateY(-50%); background: url(../../images/common/icon_stroke_arrow_down.svg) no-repeat center/contain; content: ""; transition: transform 0.3s ease; } .cm_overview5 .ovw5_btm { border-top: 1px solid #ccc; } .cm_overview5 .ovw5_category { flex-shrink: 0; } .cm_overview5 .ovw5_title { font-weight: bold; font-size: var(--font_size24); line-height: 1.3; } .cm_overview5 .ovw5_desc { position: relative; padding: 2.5rem 4.5rem; } .cm_overview5 .ovw5_list > li.open .ovw5_top:after { transform: translateY(-50%) rotate(180deg); } .cm_overview6 .ovw6_box { display: flex; gap: 0 clamp(24px, 1.6666666667vw, 32px); } .cm_overview6 .ovw6_thumb_area { width: clamp(150px, 9.375vw, 180px); } .cm_overview6 .ovw6_thumb { aspect-ratio: 3/4; width: 100%; border: 1px solid #000; background-color: var(--color-neutral-gray-10); } .cm_overview6 .ovw6_thumb_img { width: 100%; height: 100%; object-fit: fill; } .cm_overview6 .ovw6_content { display: flex; flex: 1; flex-direction: column; min-width: 0; } .cm_overview6 .ovw6_top { flex: 1; } .cm_overview6 .ovw6_btm { flex-shrink: 0; } .cm_overview6 .ovw6_title { margin-bottom: clamp(20px, 1.3020833333vw, 25px); font-weight: bold; font-size: clamp(17px, 0.9895833333vw, 19px); line-height: 1.3; } .cm_overview6 .ovw6_info { display: flex; flex-direction: column; gap: clamp(8px, 0.5208333333vw, 10px) 0; font-size: 15px; } .cm_overview6 dl { display: flex; gap: 0 clamp(16px, 1.25vw, 24px); } .cm_overview6 dt { flex-shrink: 0; font-weight: bold; } .cm_overview6 .ovw6_btn { margin-top: clamp(16px, 1.0416666667vw, 20px); } .cm_overview7 .ovw7_list { display: flex; flex-wrap: wrap; gap: clamp(15px, 2.0833333333vw, 40px); } .cm_overview7 .ovw7_list > li { width: calc((100% - clamp(15px, 2.0833333333vw, 40px) * 2) / 3); } .cm_overview7 .ovw7_box_wrap { position: relative; } .cm_overview7 .ovw7_thumb { aspect-ratio: 3/4; overflow: hidden; background-color: var(--color-neutral-gray-10); } .cm_overview7 .ovw7_category { min-height: 3.4rem; margin-bottom: 10px; } .cm_overview7 .ovw7_title { position: relative; margin-bottom: 25px; padding-bottom: 15px; overflow: hidden; font-weight: bold; font-size: clamp(18px, 1.25vw, 24px); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; transition: color 0.4s ease; } .cm_overview7 .ovw7_title:before { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #000; content: ""; } .cm_overview7 .ovw7_title:after { position: absolute; bottom: 0; left: 0; width: 0; height: 4px; background-color: var(--color-point-50-primary); content: ""; transition: width 0.4s ease; } .cm_overview7 .ovw7_date { margin-bottom: 10px; color: #333; font-size: var(--font_size17); } .cm_overview7 .ovw7_venue { padding-right: clamp(35px, 2.0833333333vw, 40px); font-weight: 700; font-size: var(--font_size17); } .cm_overview7 .ovw7_venue_name { color: var(--color-primary-80); } .cm_overview7 .ovw7_thumb_img { width: 100%; height: 100%; object-fit: fill; transition: transform 0.4s ease, filter 0.4s ease; } .cm_overview7 .ovw7_content { padding-top: 25px; } .cm_overview7 .ovw7_like_btn { position: absolute; right: 0; bottom: 0; aspect-ratio: 1/1; width: clamp(35px, 2.0833333333vw, 40px); overflow: hidden; border: 1px solid #000; background: url(../../images/common/icon_solid_like.svg) no-repeat center/55%; text-indent: 100%; white-space: nowrap; transition: background-color 0.3s ease; } .cm_overview7 .ovw7_like_btn.active { background-image: url(../../images/common/icon_solid_like_on.svg); } .cm_overview7 .ovw7_box:hover .ovw7_thumb_img { transform: scale(1.05); filter: contrast(1.2) saturate(1.3) brightness(1.1) hue-rotate(5deg); } .cm_overview7 .ovw7_box:hover .ovw7_title { color: var(--color-point-50-primary); } .cm_overview7 .ovw7_box:hover .ovw7_title:after { width: 100%; } /* overview8 */ .cm_overview8 { display: flex; border-top: 2px solid var(--border-basic); } .cm_overview8 .ovw8_item { display: flex; align-items: flex-start; justify-content: center; padding: 4.8rem clamp(40px, 4.1666666667vw, 80px); } .cm_overview8 .ovw8_item:first-child { position: relative; } .cm_overview8 .ovw8_item:first-child:after { position: absolute; top: 50%; right: 0; width: 1px; height: calc(100% - 9rem); transform: translateY(-50%); background: var(--border-tertiary); content: ""; } .cm_overview8 .ovw8_item .item_box { width: 38rem; } .cm_overview8 .ovw8_item .item_box.login_form_box { width: 100%; max-width: 50.3rem; } .cm_overview8 .ovw8_item .item_box .form_hide_wrap, .cm_overview8 .ovw8_item .item_box .form_control { width: 100%; } .cm_overview8 .ovw8_item .item_box .box_head { text-align: center; } .cm_overview8 .ovw8_item .item_box .box_head .title { display: flex; align-items: center; justify-content: center; gap: 2.4rem; font-weight: 700; font-size: var(--font_size32); line-height: 1; } .cm_overview8 .ovw8_item .item_box .box_head .title .logo { height: min(2.5vw, 48px); padding-bottom: 8px; vertical-align: middle; } .cm_overview8 .ovw8_item .item_box .box_head .desc { margin-top: 1.6rem; margin-bottom: 2.4rem; color: var(--text-secondary); } .cm_overview8 .ovw8_item .item_box .cm_btn { width: 100%; } .login_form_box { width: 100%; max-width: 50.3rem; } .login_form_box .box_content { display: flex; margin-top: 4rem; gap: 8px; } .login_form_box .box_content .input_area .form_group { display: flex; align-items: center; gap: 0; } .login_form_box .box_content .input_area .form_group ~ .form_group { margin-top: 8px; } .login_form_box .box_content .input_area .form_group .form_label { width: 7.5rem; padding-top: 0; font-weight: 400; font-size: var(--font_size17); } .login_form_box .box_content .box_btn { width: 12rem; } .login_form_box .box_content .box_btn .cm_btn.btn_lg { aspect-ratio: 1/1; width: 100%; height: 100%; } .login_form_box .box_other { display: flex; align-items: center; justify-content: space-between; margin-top: 2.4rem; color: #333; } /* overview9 */ .cm_overview9 { word-break: keep-all; } .cm_overview9 .ovw9_thumb { position: relative; aspect-ratio: 3/4; width: 100%; background-color: var(--color-neutral-gray-10); } .cm_overview9 .ovw9_thumb_img { width: 100%; height: 100%; object-fit: fill; transition: transform 0.4s ease, filter 0.4s ease; } .cm_overview9 .ovw9_list { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.0833333333vw, 40px) clamp(16px, 1.25vw, 24px); } .cm_overview9 .ovw9_list > li { width: calc((100% - 72px) / 4); } .cm_overview9 .ovw9_list .ovw9_box_wrap { position: relative; } .cm_overview9 .ovw9_list .ovw9_box { display: block; width: 100%; } .cm_overview9 .ovw9_list .ovw9_thumb { margin-bottom: 2.4rem; overflow: hidden; } .cm_overview9 .ovw9_list .ovw9_category { display: flex; flex-wrap: wrap; } .cm_overview9 .ovw9_list .ovw9_category .ovw9_badge { height: 3.4rem; box-shadow: none; } .cm_overview9 .ovw9_list .ovw9_category .ovw9_date { display: flex; align-items: center; justify-content: center; padding: 0 1.2rem; border: 1px solid #000; border-left: 0; background: #fff; letter-spacing: -0.8px; } .cm_overview9 .ovw9_list .ovw9_title { display: -webkit-box; height: calc(var(--font_size24) * 1.5 * 2); margin-top: 8px; font-weight: 700; font-size: var(--font_size24); line-height: 150%; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: color 0.4s ease; } .cm_overview9 .ovw9_list .ovw9_venue { display: flex; margin-top: 16px; gap: 12px; font-weight: 700; font-size: var(--font_size17); } .cm_overview9 .ovw9_list .ovw9_venue_name { color: var(--color-primary-80); } .cm_overview9 .ovw9_detail { display: flex; align-items: flex-start; gap: min(3.3333333333vw, 64px); } .cm_overview9 .ovw9_detail .ovw9_thumb { display: flex; flex-shrink: 0; flex-direction: column; width: min(20vw, 384px); min-width: 280px; gap: 16px; background: none; } .cm_overview9 .ovw9_detail .ovw9_thumb .thumb_box { position: relative; aspect-ratio: 3/4; width: 100%; overflow: hidden; border: 1px solid var(--border-basic); } .cm_overview9 .ovw9_detail .ovw9_thumb .thumb_box > img { width: 100%; height: 100%; object-fit: cover; } .cm_overview9 .ovw9_detail .ovw9_thumb .thumb_box.contain > img { object-fit: fill; } .cm_overview9 .ovw9_detail .ovw9_thumb .thumb_btns { display: flex; gap: 8px; } .cm_overview9 .ovw9_detail .ovw9_content { flex: 1; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_title_wrap { display: flex; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_title { font-weight: 700; font-size: var(--font_size32); line-height: 150%; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_desc { margin-top: 1.6rem; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info { display: flex; flex-direction: column; width: 100%; margin-top: 24px; padding: 40px 24px; gap: 24px; border-top: 3px solid var(--border-basic); border-bottom: 1px solid var(--border-basic); } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info.border_btm_none { border-bottom: none; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item { display: flex; align-items: flex-start; gap: 16px; font-size: var(--font_size19); line-height: 150%; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item .item_label { flex-shrink: 0; min-width: 140px; font-weight: 700; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item .item_value { flex: 1; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item .item_value .cm_file_list { margin-top: -3px; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item.type2 { align-items: center; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item .item_value.type2 { display: flex; flex-wrap: wrap; gap: 8px; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item .item_value.type2 .cm_overview11 { margin-top: -5px; } .cm_overview9 .ovw9_detail.show_detail .ovw9_thumb { position: static; } .cm_overview9 .ovw9_detail.show_detail .ovw9_thumb .thumb_btns_area { display: flex; gap: 1.6rem; } .cm_overview9 .ovw9_detail.show_detail .ovw9_thumb .thumb_btns_area.fixed { z-index: 5; position: fixed; bottom: min(1.25vw, 24px); width: min(62.5vw, 1200px); } .cm_overview9 .ovw9_detail.show_detail .ovw9_thumb .thumb_btns_area.fade-in { animation: thumbBtnsFadeIn 0.5s ease forwards; } .cm_overview9 .ovw9_detail.show_detail .ovw9_thumb .thumb_btns_area .btn_like { aspect-ratio: 1/1; width: 64px; } .cm_overview9 .ovw9_detail.show_detail .ovw9_thumb .thumb_btns_area .btn_like:hover { background-color: #fff; } .cm_overview9 .ovw9_detail.show_detail .ovw9_thumb .thumb_btns_area .btn_crimson_red { flex: 1; } .cm_overview9 .ovw9_detail.show_detail .ovw9_content { padding: 2.4rem 0; } .cm_overview9 .ovw9_detail.show_detail .ovw9_content .ovw9_badges { display: flex; flex-wrap: wrap; margin-bottom: 1.6rem; gap: 10px; } .cm_overview9 .ovw9_detail.show_detail .ovw9_info_list { display: grid; grid-gap: 0 40px; grid-template-columns: repeat(2, 1fr); } .cm_overview9 .ovw9_detail.show_detail .ovw9_info_list .ovw9_info { padding: 0; padding-top: 1.6rem; border-bottom: 0; } .cm_overview9 .ovw9_detail.show_detail .ovw9_info_list .ovw9_info .info_item { flex-direction: column; gap: 8px; } .cm_overview9 .ovw9_detail.show_detail .ovw9_info_list .ovw9_info .item_value.place { color: var(--color-primary-80); } .cm_overview9 .ovw9_detail.show_detail .ovw9_info_list .ovw9_info .place_btn { width: 3.2rem; height: 3.2rem; margin-left: 8px; border-radius: 6px; background: var(--color-neutral-gray-20); } .cm_overview9 .ovw9_box:hover .ovw9_thumb_img { transform: scale(1.05); filter: contrast(1.2) saturate(1.3) brightness(1.1) hue-rotate(5deg); } .cm_overview9 .ovw9_box:hover .ovw9_title { color: var(--color-point-50-primary); } .cm_overview9.type2 .ovw9_list .ovw9_thumb { margin-bottom: 0; } .cm_overview9.type3 .ovw9_list .ovw9_thumb { border: 1px solid var(--border-basic); } .cm_overview9.type3 .ovw9_list .ovw9_title { height: auto; font-size: clamp(16px, 0.9895833333vw, 19px); } /* overview10 */ .cm_overview10 { display: flex; align-items: center; gap: 32px; word-break: keep-all; } .cm_overview10 .ovw_info { display: flex; flex: 1; flex-direction: column; width: 100%; gap: 8px; line-height: 150%; } .cm_overview10 .ovw_info .ovw_title { font-weight: 700; font-size: var(--font_size19); } .cm_overview10 .ovw_info .ovw_text { font-size: var(--font_size17); } .cm_overview10 .ovw_btn { flex-shrink: 0; } .cm_overview10 .ovw_btn .cm_btn { width: 100%; } /* overview11 */ .cm_overview11 { position: relative; } .cm_overview11 .cm_btn { padding: 0 12px; --icon-size: 20; } .cm_overview11 .ovw_calendar { display: none; position: absolute; top: calc(100% + 4px); left: 0; width: 250px; padding: 20px 12px; border: 1px solid var(--border-basic); background: var(--background-white); } .cm_overview11.active .ovw_calendar { display: block; } .cm_overview11 .ovw_calendar .cal_head { display: flex; align-items: center; justify-content: space-between; } .cm_overview11 .ovw_calendar .cal_head .btn_cal { display: block; width: 24px; height: 24px; background-position: center; background-size: contain; background-repeat: no-repeat; } .cm_overview11 .ovw_calendar .cal_head .btn_cal.btn_prev { background-image: url(../../images/common/icon_stroke_arrow_left.svg); } .cm_overview11 .ovw_calendar .cal_head .btn_cal.btn_next { background-image: url(../../images/common/icon_stroke_arrow_right.svg); } .cm_overview11 .ovw_calendar .cal_head .head_title { font-weight: 700; font-size: var(--font_size17); line-height: 150%; text-align: center; } .cm_overview11 .ovw_calendar .cal_body { margin-top: 12px; } .cm_overview11 .ovw_calendar .cal_body table { width: 100%; table-layout: fixed; } .cm_overview11 .ovw_calendar .cal_body table th, .cm_overview11 .ovw_calendar .cal_body table td { height: 28px; padding: 2px; font-size: var(--font_size15); line-height: 150%; text-align: center; } .cm_overview11 .ovw_calendar .cal_body table th { font-weight: 700; } .cm_overview11 .ovw_calendar .cal_body table td > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 28px; border-radius: 100%; } .cm_overview11 .ovw_calendar .cal_body .sat > span { color: var(--text-point-Red, #eb0510); } .cm_overview11 .ovw_calendar .cal_body .sun > span { color: #2530ff; } .cm_overview11 .ovw_calendar .cal_body .today > span { border: 1px solid var(--background-black); background-color: #fff; } .cm_overview11 .ovw_calendar .cal_body .active > span { background-color: var(--background-black); color: var(--text-white); } .cm_overview11 .ovw_calendar .cal_body .disabled > span { color: var(--text-tertiary); } /* cm_overview12 */ .cm_overview12 .ovw12_list { border-top: 3px solid #000; border-bottom: 3px solid #000; } .cm_overview12 .ovw12_list .ovw12_item { display: flex; align-items: center; padding: 4rem 2.4rem; gap: 4rem; } .cm_overview12 .ovw12_list .ovw12_item ~ .ovw12_item { border-top: 1px solid #000; } .cm_overview12 .ovw12_list .ovw12_item .ovw12_icon { display: flex; align-items: center; justify-content: center; width: 16rem; height: 16rem; border: 1px solid #000; } .cm_overview12 .ovw12_list .ovw12_item .ovw12_content { flex: 1; } .cm_overview12 .ovw12_list .ovw12_item .ovw12_content .item_title { margin-bottom: 1.6rem; font-weight: 700; font-size: var(--font_size24); } /* cm_overview13 */ .cm_overview13 .ovw13_list { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2.4rem; } .cm_overview13 .ovw13_list .ovw13_item { padding: 4rem; border: 1px solid #000; } .cm_overview13 .ovw13_list .item_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4rem; gap: 1rem; } .cm_overview13 .ovw13_list .item_head .item_title { flex: 1; font-weight: 700; font-size: var(--font_size24); } .cm_overview13 .ovw13_list .item_head .item_icon { display: flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; } .cm_overview13 .ovw13_list .item_body { letter-spacing: -0.5px; word-break: keep-all; } .cm_overview13.type2 .ovw13_list { grid-template-columns: repeat(3, 1fr); } /* overview14 */ .cm_overview14 { display: flex; position: relative; flex-direction: column; align-items: center; margin-bottom: 40px; padding: 32px 40px; gap: 16px; border-top: 2px solid var(--border-basic); background: var(--color-neutral-gray-10); } .cm_overview14 .ovw_category { display: flex; gap: 8px; } .cm_overview14 .ovw_title { font-weight: 700; font-size: 2.4rem; line-height: 150%; } /* overview15 */ .cm_overview15 { display: grid; grid-gap: 2.4rem; grid-template-columns: repeat(3, 1fr); } .cm_overview15 .ovw15_box { padding: 2.4rem; border: 1px solid #000; } .cm_overview15 .ovw15_box .ovw15_title { margin-bottom: 1.2rem; color: var(--text-primary); } .cm_overview15 .ovw15_box .number { display: block; font-weight: 700; font-size: var(--font_size32); } .cm_overview15 .ovw15_box .text_bg { display: inline-block; margin-bottom: 1.5rem; padding: 0.4rem 1.6rem; border-radius: 50px; background: var(--color-neutral-gray-20); } .cm_overview15 .ovw15_box .cm_icon { font-size: var(--font_size15); } .cm_overview15 .ovw15_box:first-child .ovw15_title { margin-bottom: 1.6rem; } .cm_overview15 .ovw15_box:first-child p ~ p { margin-top: 4px; } .cm_overview15 .ovw15_box:last-child .text_bg { margin-top: 8px; } /* overview16 */ .cm_overview16 .ovw16_list { display: flex; flex-wrap: wrap; gap: clamp(10px, 2.6041666667vw, 50px); counter-reset: overview-counter; } .cm_overview16 .ovw16_list > li { position: relative; width: calc((100% - clamp(10px, 2.6041666667vw, 50px) * 3) / 4); counter-increment: overview-counter; } .cm_overview16 .ovw16_list > li:before { position: absolute; top: 50%; left: calc(100% + clamp(9px, 0.625vw, 12px)); aspect-ratio: 1/1; width: clamp(18px, 1.25vw, 24px); transform: translateY(-50%); background: url(../../images/common/icon_stroke_arrow_right.svg) no-repeat center/contain; content: ""; } .cm_overview16 .ovw16_list > li:last-child:before { display: none; } .cm_overview16 .ovw16_box { display: flex; flex-direction: column; height: 100%; border: 1px solid #333; } .cm_overview16 .ovw16_header { padding: clamp(8px, 0.8333333333vw, 16px) clamp(10px, 1.25vw, 24px); border-bottom: 1px solid #333; background-color: var(--color-primary-90); color: #fff; text-align: center; } .cm_overview16 .ovw16_content { display: flex; flex: 1; align-items: center; justify-content: center; padding: clamp(10px, 1.25vw, 24px); text-align: center; word-break: keep-all; } .cm_overview16 .ovw16_title { font-weight: bold; font-size: clamp(15px, 0.9895833333vw, 19px); } /* overview17 */ .cm_overview17 .ovw17_list { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3.2rem 2.4rem; } .cm_overview17 .ovw17_item .thumb_area { margin-bottom: 2.4rem; } .cm_overview17 .ovw17_item .thumb_area .cm_thumb { overflow: hidden; border: 1px solid var(--border-basic); } .cm_overview17 .ovw17_item .thumb_area .cm_thumb .img { transition: transform 0.45s ease-in-out; } .cm_overview17 .ovw17_item .thumb_area.hover .cm_thumb .img { transform: scale(1.035); } .cm_overview17 .ovw17_item .item_badge_area { margin-bottom: 8px; } .cm_overview17 .ovw17_item .item_link { display: block; } .cm_overview17 .ovw17_item .item_title { position: relative; margin-bottom: 2.4rem; padding-bottom: 1.6rem; font-weight: 700; font-size: clamp(20px, 1.25vw, 24px); transition: color 0.15s; } .cm_overview17 .ovw17_item .item_title:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--border-basic); content: ""; } .cm_overview17 .ovw17_item .item_desc { color: var(--text-secondary); transition: color 0.35s; } .cm_overview17 .ovw17_item .item_link:hover .item_title { color: var(--color-point-70); } .cm_overview17 .ovw17_item .item_link:hover .item_title:after { background-color: var(--color-point-70); } .cm_overview17 .ovw17_item .item_link:hover .item_desc { color: var(--color-point-70); } /* overview18 */ .cm_overview18 { display: flex; align-items: flex-start; padding: 2.4rem; gap: 2.4rem; border: 1px solid #000; } .cm_overview18 .ovw_img { display: flex; flex-shrink: 0; align-items: center; justify-content: center; aspect-ratio: 1/1; width: 7.2rem; overflow: hidden; border-radius: 100%; background: var(--color-neutral-gray-10); } .cm_overview18 .ovw_img > img { width: 100%; max-width: 3.2rem; } .cm_overview18 .ovw_cont { flex: 1; min-width: 0; } .cm_overview18 .ovw_cont .ovw_title { margin-bottom: 1.6rem; color: var(--text-primary); font-weight: 700; font-size: 1.9rem; line-height: 1.5; } .cm_overview18 .ovw_cont .ovw_desc { line-height: 1.5; } .cm_overview18 .ovw_cont.relative { position: relative; } .cm_overview18 .ovw_cont.relative .cm_btn_area { position: absolute; right: 0; bottom: 0; } /* overview19 */ .cm_overview19 { display: flex; gap: 2.4rem; } .cm_overview19 .ovw_item { flex: 1; padding: 3.2rem 2.4rem; border: 1px solid var(--border-basic); text-align: center; } .cm_overview19 .ovw_item .ovw_title { position: relative; margin-bottom: 1.5rem; padding-bottom: 1.8rem; color: var(--text-primary); font-weight: 700; font-size: var(--font_size19); } .cm_overview19 .ovw_item .ovw_title:after { position: absolute; bottom: 0; left: calc(50% - 1.3rem); width: 2.6rem; height: 3px; background: var(--border-basic); content: ""; } .cm_overview19 .ovw_item .ovw_title.none_border { margin-bottom: 0; padding-bottom: 0; } .cm_overview19 .ovw_item .ovw_title.none_border:after { display: none; } .cm_overview19 .ovw_item .ovw_img { width: 100%; margin-bottom: 1.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid #ccc; } .cm_overview19 .ovw_item .ovw_img > img { width: 100%; } /* overview20 */ .cm_overview20 { word-break: keep-all; } .cm_overview20 .ovw20_list { display: flex; flex-wrap: wrap; gap: clamp(24px, 2.0833333333vw, 40px) clamp(16px, 1.25vw, 24px); } .cm_overview20 .ovw20_list > li { width: calc((100% - clamp(16px, 1.25vw, 24px) * 3) / 4); } .cm_overview20 .ovw20_thumb { aspect-ratio: 4/3; margin-bottom: clamp(15px, 1.0416666667vw, 20px); } .cm_overview20 .ovw20_thumb_img { width: 100%; height: 100%; object-fit: fill; } .cm_overview20 .ovw20_title { margin-bottom: 5px; font-weight: bold; font-size: clamp(16px, 0.9895833333vw, 19px); } .cm_overview20 .ovw20_desc { color: #333; } /* overview21 */ .cm_overview21 { display: flex; flex-direction: column; padding: 4rem 3.2rem; gap: 3.2rem; border-bottom: 1px solid var(--border-tertiary); background: var(--color-neutral-gray-10); } .cm_overview21 .ovw_item { display: flex; align-items: flex-start; gap: 1.6rem; line-height: 1.5; } .cm_overview21 .ovw_item dt { flex-shrink: 0; min-width: 18rem; font-weight: 700; font-size: 1.9rem; } .cm_overview21 .ovw_item dd { display: flex; flex: 1; flex-wrap: wrap; align-items: center; min-width: 0; gap: 1.6rem; font-size: 1.9rem; } /* overview22 */ .cm_overview22 .ovw22_item { display: flex; padding-bottom: 5.6rem; gap: 4rem; border-bottom: 1px solid var(--border-basic); scroll-margin-top: 80px; } .cm_overview22 .ovw22_item ~ .ovw22_item { margin-top: 8rem; } .cm_overview22 .ovw22_item:last-child { border-bottom: 0; } .cm_overview22 .ovw22_item .ovw22_thumbs { width: clamp(400px, 29.6875vw, 570px); } .cm_overview22 .ovw22_item .ovw22_thumbs .cm_slide_control.hidden { display: none; } .cm_overview22 .ovw22_item .ovw22_content { flex: 1; } .cm_overview22 .ovw22_item .ovw22_title_wrap { display: flex; align-items: center; justify-content: space-between; } .cm_overview22 .ovw22_item .ovw22_title_wrap .cm_btn.btn_md { font-weight: 500; font-size: var(--font_size19); } .cm_overview22 .ovw22_item .ovw22_title { font-weight: 700; font-size: 3.2rem; } .cm_overview22 .ovw22_item .ovw22_sub_title { color: var(--color-point-60); font-weight: 700; font-size: 2.4rem; } .cm_overview22 .ovw22_item .ovw22_desc { word-break: keep-all; } /* overview23 */ .cm_overview23 { word-break: keep-all; } .cm_overview23 .ovw23_list { display: flex; flex-wrap: wrap; gap: clamp(16px, 1.25vw, 24px); } .cm_overview23 .ovw23_list > li { width: calc((100% - clamp(16px, 1.25vw, 24px) * 2) / 3); } .cm_overview23 .ovw23_box { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; height: 100%; padding: clamp(20px, 2.0833333333vw, 40px); gap: 1.2rem; border: 1px solid #000; } .cm_overview23 .ovw23_thumb { aspect-ratio: 1/1; width: clamp(50px, 3.6458333333vw, 70px); } .cm_overview23 .ovw23_title { font-weight: 700; font-size: clamp(17px, 1.25vw, 24px); line-height: 1.5; } .cm_overview23 .ovw23_title_sub { font-size: clamp(13px, 0.78125vw, 15px); } .cm_overview23 .ovw23_thumb_img { width: 100%; height: 100%; object-fit: contain; } /* overview24 */ .cm_overview24 { word-break: keep-all; } .cm_overview24 .ovw_item { display: flex; align-items: flex-start; padding: 5.6rem 0; gap: 4rem; border-bottom: 1px solid var(--border-basic); line-height: 1.5; } .cm_overview24 .ovw_item:first-child { padding-top: 0; } .cm_overview24 .ovw_item .item_swiper { position: relative; flex-shrink: 0; width: 46rem; } .cm_overview24 .ovw_item .item_swiper .swiper { width: 100%; } .cm_overview24 .ovw_item .item_swiper .item_thumb { aspect-ratio: 12/7.383; width: 100%; overflow: hidden; } .cm_overview24 .ovw_item .item_swiper .item_thumb > img { width: 100%; height: 100%; object-fit: cover; } .cm_overview24 .ovw_item .item_swiper .item_title { display: flex; position: absolute; right: 5px; bottom: 5px; align-items: center; justify-content: center; padding: clamp(3px, 0.2604166667vw, 5px) clamp(6px, 0.5208333333vw, 10px); border: 1px solid #000; border-radius: 100px; background: #fff; color: #000; font-weight: 500; font-size: clamp(12px, 0.7291666667vw, 14px); } .cm_overview24 .ovw_item .item_swiper .swiper-btn-wrap { display: flex; align-items: center; justify-content: center; margin-top: 3rem; gap: 0.6rem; } .cm_overview24 .ovw_item .item_swiper .swiper-pagination { display: flex; position: static; align-items: center; justify-content: center; width: auto; gap: 0.6rem; } .cm_overview24 .ovw_item .item_swiper .swiper-pagination .swiper-pagination-bullet { width: 1.4rem; height: 1.4rem; margin: 0; border-radius: 0; background: #d4d4d4; opacity: 1; } .cm_overview24 .ovw_item .item_swiper .swiper-pagination .swiper-pagination-bullet-active { background: #000; } .cm_overview24 .ovw_item .item_swiper .swiper-ctrl-area .swiper-btn { display: none; width: 2.4rem; height: 2.4rem; background-position: center; background-size: contain; background-repeat: no-repeat; } .cm_overview24 .ovw_item .item_swiper .swiper-ctrl-area .swiper-btn.active { display: block; } .cm_overview24 .ovw_item .item_swiper .swiper-ctrl-area .swiper-pause { background-image: url(../../images/common/icon_stroke_pause.svg); } .cm_overview24 .ovw_item .item_swiper .swiper-ctrl-area .swiper-play { background-image: url(../../images/common/icon_stroke_play.svg); } .cm_overview24 .ovw_item .item_desc { flex: 1; min-width: 0; padding-top: 2.4rem; } .cm_overview24 .ovw_item .item_desc .item_title { font-weight: 700; font-size: 3.2rem; } .cm_overview24 .ovw_item .item_desc .item_sub { margin-top: 0.8rem; color: var(--color-point-60); font-weight: 700; font-size: 1.9rem; } .cm_overview24 .ovw_item .item_desc .item_text { margin-top: 1.6rem; padding: 2.4rem; background: var(--color-neutral-gray-10); } .cm_overview24 .ovw_item .item_desc .item_text .cm_bul_list1 .list_item + .list_item { margin-top: 2.4rem; } .cm_overview24 .ovw_item.type2:last-child { padding-bottom: 0; border-bottom: 0; } .cm_overview24 .ovw_item.type2 .item_swiper { width: 57rem; } .cm_overview24 .ovw_item.type2 .item_desc .item_title { font-size: 2.4rem; } /* overview25 */ .cm_overview25 { position: relative; word-break: keep-all; } .cm_overview25 .ovw_util { position: absolute; right: 0; bottom: calc(100% + 1.6rem); } .cm_overview25 .ovw_list { display: flex; flex-wrap: wrap; gap: 5rem 2.4rem; } .cm_overview25 .ovw_list .list_item { width: calc((100% - 9.6rem) / 5); } .cm_overview25 .ovw_list .item_thumb { aspect-ratio: 1/1; width: 100%; overflow: hidden; background: #fff; } .cm_overview25 .ovw_list .item_thumb .thumb_img { width: 100%; height: 100%; object-fit: contain; } .cm_overview25 .ovw_list .item_desc { margin-top: 1.6rem; padding-bottom: 1.6rem; border-bottom: 4px solid var(--border-secondary); line-height: 1.5; } .cm_overview25 .ovw_list .item_desc .item_title { font-weight: 700; font-size: 2.4rem; } .cm_overview25 .ovw_list .item_desc .item_name { color: var(--text-secondary); font-size: 1.5rem; } .cm_overview25 .ovw_list .item_btn { display: flex; margin-top: 1.6rem; gap: 1.2rem; } .cm_overview25 .ovw_list .item_btn .cm_btn { width: 100%; padding: 0 1rem; } .cm_overview25 .ovw_list .item_btn .cm_btn.cm_icon { --icon-size: 20; } .cm_overview25 .ovw_list .item_btn .cm_btn.cm_icon.icon_external_link { --icon-size: 16; } .cm_overview25.type2 .ovw_list .list_item { width: calc((100% - 7.2rem) / 4); } .cm_overview25.type2 .ovw_list .item_thumb { aspect-ratio: 3/4; border: 1px solid #ddd; } .cm_overview25.type2 .ovw_list .item_desc { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.2rem; } /* overview26 */ .cm_overview26 { word-break: keep-all; } .cm_overview26 + .cm_overview26 { margin-top: 4rem; } .cm_overview26 .ovw_year { margin-bottom: 2.4rem; padding-bottom: 2.4rem; border-bottom: 2px solid var(--border-secondary); color: var(--text-primary); font-weight: 700; font-size: 2.4rem; line-height: 150%; } .cm_overview26 .ovw_list { display: flex; flex-direction: column; gap: 1.6rem; } .cm_overview26 .ovw_box { border: 1px solid var(--color-neutral-gray-10); transition: border-color 0.3s; } .cm_overview26 .ovw_head { display: flex; position: relative; align-items: center; width: 100%; min-height: 8rem; padding: 2.4rem; padding-right: 6rem; border-bottom: 1px solid var(--color-neutral-gray-10); background: var(--color-neutral-gray-10); transition: border-color 0.3s, background-color 0.3s; } .cm_overview26 .ovw_head:after { position: absolute; top: 50%; right: 2.4rem; width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; background: url(../../images/common/icon_stroke_arrow_down.svg) no-repeat center/contain; content: ""; } .cm_overview26 .ovw_title { width: 100%; font-weight: 700; font-size: 1.9rem; line-height: 1.5; text-align: left; } .cm_overview26 .ovw_body { padding: 2.4rem 3.9rem; font-size: 1.7rem; } .cm_overview26 .js_ovw26_item.open .ovw_box { border-color: #000; } .cm_overview26 .js_ovw26_item.open .ovw_head { border-color: #000; background: var(--color-primary-40); } .cm_overview26 .js_ovw26_item.open .ovw_head:after { transform: rotate(180deg); } /* overview27 */ .cm_overview27 { word-break: keep-all; } .cm_overview27 .ovw27_body { display: flex; margin-top: 4rem; gap: 8rem; } .cm_overview27 .ovw27_body .ovw27_title_area { width: max-content; } .cm_overview27 .ovw27_body .ovw27_title_area .ovw27_title { font-weight: 700; font-size: 3.2rem; word-break: keep-all; } .cm_overview27 .ovw27_body .ovw27_title_area .cm_btn { margin-top: 4rem; } .cm_overview27 .ovw27_body .ovw27_content_area { flex: 1; } .cm_overview27 .ovw27_body .ovw27_content_area p ~ p { margin-top: 3rem; } .cm_overview27.type2 .ovw27_body { align-items: end; margin-top: 16px; } .cm_overview27.type2 .ovw27_body .ovw27_title_area { flex: 1; width: auto; max-width: 100%; } .cm_overview27.type2 .ovw27_body .ovw27_content_area { flex: none; width: max-content; } /* overview28 */ .cm_overview28 { display: flex; flex-wrap: wrap; gap: 2.4rem 4rem; word-break: keep-all; } .cm_overview28 .ovw_item { position: relative; width: calc((100% - 8rem) / 3); padding: 3rem 4rem 4rem; border: 1px solid #000; background: #fff; line-height: 1.5; } .cm_overview28 .ovw_item .item_title { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 700; font-size: 2.4rem; } .cm_overview28 .ovw_item .item_title:before { display: block; width: 2rem; height: 4px; background: #c93255; content: ""; } .cm_overview28 .ovw_item .item_text { margin-top: 1.6rem; padding-right: 8rem; font-size: 1.7rem; } .cm_overview28 .ovw_item .item_img { position: absolute; right: 2rem; bottom: 3rem; width: 6.9rem; } .cm_overview28 .ovw_item .item_img > img { width: 100%; } /* map */ .cm_map_area { width: 100%; } .cm_map_area .map_box { aspect-ratio: 12/5.4; width: 100%; } .cm_map_area .map_box .root_daum_roughmap { width: 100% !important; height: 100% !important; } .cm_map_area .map_box .root_daum_roughmap .wrap_map { width: 100% !important; height: 100% !important; } .cm_map_area .map_box .root_daum_roughmap .cont { display: none !important; } .cm_map_area .map_box iframe { width: 100% !important; height: 100% !important; } .cm_map_area .map_info { display: flex; align-items: flex-end; justify-content: space-between; padding: 3.2rem; background: var(--color-neutral-gray-10); } .cm_map_area .map_info .info_cont .info_adds { display: flex; align-items: center; gap: 1.6rem; font-weight: 700; font-size: 1.9rem; line-height: 150%; } .cm_map_area .map_info .info_cont .info_adds:before { display: block; flex-shrink: 0; width: 4rem; height: 4rem; border-radius: 100%; background: #fff url(../../images/common/icon_stroke_location.svg) no-repeat center/2.4rem; content: ""; } .cm_map_area .map_info .info_number { display: flex; align-items: center; margin-top: 2rem; gap: 5rem; } .cm_map_area .map_info .info_number dl { display: flex; position: relative; align-items: center; font-size: 1.7rem; --icon-size: 20; } .cm_map_area .map_info .info_number dl:after { position: absolute; top: 50%; left: -2.5rem; width: 1px; height: 16px; margin-top: -0.8rem; background: #ddd; content: ""; } .cm_map_area .map_info .info_number dl:first-child:after { display: none; } .cm_map_area .map_info .info_number dl dt { font-weight: 700; } .cm_map_area .map_info .info_number dl dd { padding-left: 0.4rem; } .cm_map_area2 { width: 100%; } .cm_map_area2 .map_box { aspect-ratio: 12/5.4; width: 100%; } .cm_map_area2 .map_box .root_daum_roughmap { width: 100% !important; height: 100% !important; } .cm_map_area2 .map_box .root_daum_roughmap .wrap_map { width: 100% !important; height: 100% !important; } .cm_map_area2 .map_box .root_daum_roughmap .cont { display: none !important; } .cm_map_area2 .map_box iframe { width: 100% !important; height: 100% !important; } .cm_map_area2 .map_info { display: flex; align-items: flex-start; justify-content: space-between; padding: 2.4rem 0; border-top: 1px solid #ddd; border-bottom: 2px solid #000; background: #fff; word-break: keep-all; } .cm_map_area2 .map_info .info_cont .info_adds { display: flex; align-items: flex-start; gap: 0.8rem; font-weight: 700; font-size: 2.4rem; line-height: 150%; } .cm_map_area2 .map_info .info_cont .info_adds:before { display: block; flex-shrink: 0; width: 3.2rem; height: 3.2rem; border-radius: 100%; background: url(../../images/common/icon_stroke_location.svg) no-repeat center/contain; content: ""; } .cm_map_area2 .map_info .info_number { display: flex; align-items: center; margin-top: 2rem; gap: 5rem; } .cm_map_area2 .map_info .info_number .cm_icon { display: flex; position: relative; align-items: flex-start; font-size: 1.9rem; --icon-size: 32; } .cm_map_area2 .map_info .info_number .cm_icon .font-weight-bold { display: block; margin-bottom: 0.8rem; font-size: 2.4rem; } /* traffic */ .cm_traffic_area { border-top: 2px solid var(--border-basic); } .cm_traffic_area .trff_box { display: flex; align-items: flex-start; padding: 4rem 0 6.4rem; gap: 2rem; border-bottom: 1px solid #ddd; } .cm_traffic_area .box_title { display: flex; align-items: center; min-width: 28rem; gap: 1.2rem; font-weight: 700; font-size: 2.4rem; } .cm_traffic_area .box_title > img { flex-shrink: 0; width: 3.2rem; } .cm_traffic_area .box_cont { flex: 1; min-width: 0; } .cm_traffic_area .box_cont .box_item + .box_item { margin-top: 6.4rem; } .cm_traffic_area .box_cont .box_item .item_title { margin-bottom: 1.6rem; font-weight: 700; font-size: 1.9rem; } .cm_traffic_area .box_cont .box_item .cm_bul_list1 > .list_item { display: flex; align-items: flex-start; gap: 2.4rem; font-size: 1.7rem; } .cm_traffic_area .box_cont .box_item .cm_bul_list1 > .list_item ~ .list_item { margin-top: 2.4rem; } .cm_traffic_area .box_cont .box_item .item_line { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 1.2rem; } .cm_traffic_area .box_cont .box_item .item_line .cm_badge { width: auto; min-width: 7rem; padding: 0 0.4rem; } .cm_traffic_area .box_cont .box_item .item_line .line_text { display: flex; align-items: flex-start; gap: 1.2rem; } .cm_traffic_area .box_cont .box_item .item_line .line_text .cm_badge { margin-top: 0.1rem; } .cm_traffic_area .box_cont .box_item .item_line.type2 { flex-direction: row; flex-wrap: wrap; } .cm_traffic_area .box_cont .box_item .item_line.type2 > .cm_validation { width: 100%; } .cm_traffic_area2 .trff_box { padding: 5.6rem 0; border-bottom: 1px solid #ddd; } .cm_traffic_area2 .box_title { display: flex; align-items: center; gap: 1.6rem; font-weight: 700; font-size: 2.4rem; } .cm_traffic_area2 .box_title > img { flex-shrink: 0; width: 6.4rem; } .cm_traffic_area2 .box_cont { width: 100%; margin-top: 2.4rem; line-height: 1.5; } .cm_traffic_area2 .box_cont .item_title { margin-bottom: 1.6rem; font-size: 1.9rem; } .cm_traffic_area2 .box_cont .item_desc { display: flex; flex-direction: column; gap: 1.6rem; } .cm_traffic_area2 .box_cont .item_desc .desc_item { display: flex; align-items: flex-start; gap: 1.6rem; } .cm_traffic_area2 .box_cont .item_desc .desc_item > .cm_badge { flex-shrink: 0; min-width: 9.5rem; } .cm_traffic_area2 .box_cont .item_desc .desc_item > .item_line { display: flex; flex-wrap: wrap; gap: 0.8rem; } .cm_traffic_area2 .box_cont .item_desc .desc_item > .item_line .cm_badge { min-width: 7rem; } .cm_traffic_area2 .box_cont .item_desc .desc_item > .item_line > li { display: flex; align-items: center; gap: 1.2rem; color: var(--text-secondary); font-size: 1.7rem; } /* 공통 페이징 */ .cm_paging1 { display: flex; align-items: center; justify-content: center; margin-top: clamp(30px, 2.0833333333vw, 40px); gap: clamp(4px, 0.4166666667vw, 8px); font-size: clamp(11px, 0.8854166667vw, 17px); } .cm_paging1 .page_control { display: block; flex: 0 0 auto; aspect-ratio: 1/1; width: clamp(23px, 2.5vw, 48px); overflow: hidden; background-position: center; background-size: auto clamp(18px, 1.1979166667vw, 23px); background-repeat: no-repeat; background-color: #fff; text-indent: 100%; white-space: nowrap; } .cm_paging1 .page_control.prev { background-image: url(../../images/common/icon_stroke_arrow_left.svg); } .cm_paging1 .page_control.next { background-image: url(../../images/common/icon_stroke_arrow_right.svg); } .cm_paging1 .page_control.disabled { opacity: 0.5; } .cm_paging1 .paging_page { display: flex; gap: clamp(2px, 0.4166666667vw, 8px); } .cm_paging1 .page_link { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; aspect-ratio: 1/1; width: clamp(24px, 2.5vw, 48px); padding: 0 5px; background-position: center; background-repeat: no-repeat; color: #444; } .cm_paging1 .page_link.link_dot { width: clamp(10px, 2.5vw, 48px); background-image: url(../../images/common/icon_ellipsis_horizontal.svg); background-size: clamp(10px, 0.8333333333vw, 16px); } .cm_paging1 .page_link.active { background-color: #000; color: #fff; font-weight: bold; } /* 공통 약관 */ .cm_policy .policy_title { margin-bottom: 1.6rem; font-weight: 700; font-size: var(--font_size19); line-height: 1.5; } .cm_policy .policy_box { padding: 0.4rem 1.1rem; border: 2px solid var(--border-basic); } .cm_policy .policy_box .box_inner { max-height: 228px; padding: 2rem 1.3rem; overflow: auto; font-size: 1.5rem; line-height: 1.5; } .cm_policy .policy_box .box_inner::-webkit-scrollbar { width: 0.7rem; height: 0.7rem; } .cm_policy .policy_box .box_inner::-webkit-scrollbar-thumb { border-radius: var(--border_radius10); background: #7f7f7f; } .cm_policy .policy_box .box_inner::-webkit-scrollbar-track { background: none; } .cm_policy .policy_box .box_inner em { font-weight: 700; } .cm_policy .policy_box .box_inner .highlight1 { color: #f00; font-weight: 700; font-size: 110%; } .cm_policy .policy_box .box_inner .highlight2 { color: #00f; font-weight: 700; font-size: 110%; text-decoration: underline; } .cm_policy .policy_box .box_inner .bold { font-weight: 700; } .cm_policy .policy_box .box_inner .underline { text-decoration: underline; } .cm_policy .policy_box .box_inner .cm_table2 th, .cm_policy .policy_box .box_inner .cm_table2 td { padding: 0.5rem 1rem; font-size: 1.4rem; } .cm_policy .policy_box + .cm_chk_wrap { margin-top: 2.4rem; } .cm_policy_form .policy_title { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 10px 24px; gap: 16px; background: var(--color-neutral-gray-10); } .cm_policy_form .policy_title .title_text { font-weight: 700; font-size: var(--font_size19); line-height: 150%; } .cm_policy_form .policy_box { padding: 40px; } .cm_policy_form .policy_box .box_inner { max-height: 180px; overflow: hidden; overflow-y: auto; line-height: 150%; word-break: keep-all; } /* 개인정보처리방침 */ .privacy_policy { color: #333; font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: -0.5px; } .privacy_policy a { color: #00f !important; text-decoration: none; } .privacy_policy a:hover { text-decoration: underline; } .privacy_policy .policy_title { margin-bottom: 15px; font-weight: bold; font-size: 22px; text-align: center; } .privacy_policy .policy_desc { margin-bottom: 30px; font-size: 14px; text-align: center; word-break: keep-all; } .privacy_policy .labeling_list_wrap { width: 100%; margin-bottom: 30px; border: 1px solid #ddd; border-collapse: collapse; line-height: 1.3; table-layout: fixed; } .privacy_policy .labeling_list_wrap th, .privacy_policy .labeling_list_wrap td { padding: 10px; border: 1px solid #ddd; font-size: 14px; vertical-align: baseline; } .privacy_policy .labeling_list_wrap th { border-top: 2px solid #333; background-color: #f1f1f1; font-weight: bold; font-size: 15px; text-align: center; } .privacy_policy .labeling_list_wrap td { position: relative; color: #666; text-align: center; word-break: keep-all; } .privacy_policy .labeling_list_wrap .labeling_img { display: inline-block; width: 55px; margin-bottom: 7px; } .privacy_policy .labeling_list_wrap .labeling_img2 { display: inline-block; width: 31px; margin-right: 5px; } .privacy_policy .labeling_min_img { width: 31px; margin-left: 5px; vertical-align: bottom; } .privacy_policy .labeling_list_wrap .labeling_item:hover, .privacy_policy .labeling_list_wrap .labeling_item:focus { text-decoration: underline; } .privacy_policy .labeling_item_title { color: #333; font-weight: bold; } .privacy_policy .privacy_policy_title { margin-bottom: 15px; font-weight: bold; font-size: 16px; } .privacy_policy .privacy_policy_list { margin: 0; margin-bottom: 20px; padding: 0; list-style: none; word-break: keep-all; } .privacy_policy .privacy_policy_list > li { position: relative; margin-bottom: 10px; padding-left: 20px; font-size: 14px; } .privacy_policy .privacy_policy_list > li:last-child { margin-bottom: 0; } .privacy_policy .privacy_policy_list .privacy_policy_list { margin-top: 7px; font-size: 13px; } .privacy_policy .privacy_policy_list .privacy_policy_list > li { padding-left: 15px; } .privacy_policy .privacy_policy_list2 { margin: 0; padding: 0; list-style: none; } .privacy_policy .privacy_policy_list2 > li { position: relative; padding-left: 10px; } .privacy_policy .privacy_policy_list2 > li:before { display: block; position: absolute; top: 10px; left: 0; width: 2px; height: 2px; background-color: #333; content: ""; } .privacy_policy .privacy_policy_num { position: absolute; top: 0; left: 0; } .privacy_policy .policy_cont { margin-bottom: 30px; } .privacy_policy .policy_table { width: 100%; margin-top: 10px; border-top: 2px solid #333; border-collapse: collapse; line-height: 1.3; } .privacy_policy .policy_table th, .privacy_policy .policy_table td { padding: 5px 10px; border: 1px solid #ddd; font-size: 13px; text-align: center; vertical-align: middle; } .privacy_policy .policy_table th { background-color: #f1f1f1; font-weight: bold; } .privacy_policy .policy_table .align_left { text-align: left !important; } .privacy_policy .policy_btn { display: inline-block; margin: 5px 0; padding: 5px 10px; background-color: #333; color: #fff !important; font-size: 13px; } .privacy_policy .toc { display: flex; align-items: center; text-align: left; } .privacy_policy .privacy_img1 { margin: 30px 0; padding: 30px; border: 1px solid #ddd; text-align: center; } .privacy_policy .privacy_img1 img { max-width: 100%; } .policy_color { color: #fc4c4e !important; font-weight: bold !important; } .privacy_policy .labeling_item_tip { box-sizing: border-box; display: none; z-index: 2; position: absolute; top: 100%; left: 50%; width: 235px; margin-left: -117.5px; overflow: hidden; border: 1px solid #333; border-radius: 10px; background: #fff; color: #333; } .privacy_policy .labeling_item_tip * { box-sizing: border-box; } .privacy_policy .labeling_item_tip dl { width: 100%; font-size: 14px; word-break: keep-all; } .privacy_policy .labeling_item_tip dt { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 4px 15px 6px; background: #333; color: #fff; font-weight: 700; line-height: 1.2; } .privacy_policy .labeling_item_tip dd { padding: 10px 15px; line-height: 1.5; text-align: left; } .privacy_policy .labeling_list_wrap td:hover .labeling_item_tip { display: block; } .privacy_policy .privacy_policy_guide { margin-top: -20px; margin-bottom: 30px; font-size: 14px; letter-spacing: -1px; } /* 공통 팝업 */ .cm_popup { display: flex; visibility: hidden; z-index: 2025; position: fixed; top: 0; left: 0; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 15px; background: rgba(0, 0, 0, 0.5); opacity: 0; table-layout: fixed; transition: opacity 0.3s ease-in-out, visibility 0ms linear 0.3s; } .cm_popup .popup_body { width: 100%; max-width: 700px; margin: auto; overflow: hidden; border: 2px solid #000; background-color: #fff; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16); animation: hide_popup 0.3s forwards; } .cm_popup .popup_header { display: flex; z-index: 2; position: relative; top: 0; left: 0; align-items: center; min-height: 60px; padding: 10px 24px; padding-right: 55px; border-bottom: 1px solid #000; } .cm_popup .popup_header .header_title { font-weight: bold; font-size: clamp(17px, 0.9895833333vw, 19px); line-height: 1.2; } .cm_popup .popup_header .popup_close { position: absolute; top: 50%; right: 15px; width: 35px; height: 35px; margin-top: -17.5px; overflow: hidden; background: url(../../images/common/icon_stroke_cross_bold.svg) no-repeat center/24px; text-indent: 100%; white-space: nowrap; } .cm_popup .popup_content { position: relative; max-height: calc(100dvh - 300px); padding: 24px; overflow: hidden; overflow-y: auto; background: #fff; color: var(--mono3); line-height: 1.6; } .cm_popup .popup_footer { padding: 24px; padding-top: 10px; } .cm_popup .popup_btn { width: 100%; min-width: auto; height: 60px; border-radius: 0; } .cm_popup.popup_open { overflow: hidden; } .cm_popup.popup_on { visibility: visible !important; opacity: 1 !important; transition: visibility 0ms; } .cm_popup.popup_on .popup_body { animation-name: show_popup; } .cm_popup.popup_md .popup_body { max-width: 600px; } .cm_popup.popup_lg .popup_body { max-width: 1000px; } .cm_popup.calendar_popup { z-index: 2024; position: absolute; top: 50%; left: 50%; width: auto; height: auto; padding: 0; transform: translate(-50%, -50%); background-color: transparent; } .cm_popup.calendar_popup .popup_wrap { width: 100%; } .cm_popup.calendar_popup.popup_md { width: 100%; max-width: 600px; } .cm_popup.calendar_popup.popup_lg { width: 100%; max-width: 1000px; } .cm_popup.sign_popup .popup_wrap { width: 100%; max-width: 500px; } .cm_popup.sign_popup .popup_header { background: var(--color-neutral-gray-90); } .cm_popup.sign_popup .popup_header .header_title { color: var(--text-white); } .cm_popup.sign_popup .popup_header .popup_close { background: url(../../images/common/icon_stroke_cross_bold_wt.svg) no-repeat center/24px; } .cm_popup.sign_popup .sign_info { display: flex; flex-direction: column; width: 100%; max-width: 230px; margin: 0 auto; margin-top: 16px; gap: 16px; } .cm_popup.sign_popup .sign_info .info_item { display: flex; align-items: center; gap: 16px; line-height: 150%; } .cm_popup.sign_popup .sign_info .info_item dt { flex-shrink: 0; min-width: 70px; font-weight: 700; } .cm_popup.sign_popup .sign_info .info_item dd { flex: 1; } .cm_popup.sign_popup .sign_info .info_item.type2 { display: block; width: 100%; margin-top: 8px; font-weight: 700; font-size: var(--font_size19); text-align: center; } .cm_popup.sign_popup .sign_box { width: 100%; height: 162px; margin-top: 24px; overflow: hidden; border: 1px solid var(--border-basic); background: var(--background-white); } .cm_popup.sign_popup .content_box { padding: 24px; background: var(--color-neutral-gray-10); } .cm_popup.sign_popup .cm_btn_area { margin: 0; margin-top: 16px; } .cm_popup.webtoon_popup .popup_wrap { max-width: 1000px; } .cm_popup.map_popup .popup_wrap { width: 560px; } .cm_popup.map_popup .popup_content { aspect-ratio: 16/9; } .cm_popup.map_popup .popup_content .root_daum_roughmap { width: 100% !important; height: 100% !important; } .cm_popup.map_popup .popup_content .root_daum_roughmap .wrap_map { width: 100% !important; height: 100% !important; } .cm_popup.map_popup .popup_content .root_daum_roughmap .cont { display: none !important; } .cm_popup.map_popup .popup_content > div { width: 100% !important; height: 100% !important; } .cm_popup.popup_notice { background-color: rgba(0, 0, 0, 0.7); } .cm_popup.popup_notice .popup_body { width: 100%; max-width: 1400px; border: 0; background: none; box-shadow: none; animation: none !important; } .cm_popup.popup_notice .popup_header { padding-bottom: 2.5rem; border: 0; } .cm_popup.popup_notice .popup_content { padding-top: 0; padding-bottom: 0; background: none; } .cm_popup.popup_notice .notice_swiper { display: flex; flex-direction: column; justify-content: center; } .cm_popup.popup_notice .swiper { width: auto; min-width: 43.7rem !important; max-width: 100%; } .cm_popup.popup_notice .swiper-slide { width: 43.7rem !important; } .cm_popup.popup_notice .header_title { display: flex; align-items: center; gap: 1.2rem; color: #fff; font-weight: 700; font-size: 2.8rem; } .cm_popup.popup_notice .header_title .number { display: flex; align-items: center; justify-content: center; padding: 0.8rem 1.5rem; gap: 0.4rem; border-radius: 100px; background: var(--color-point-50-primary); font-weight: 400; font-size: 1.8rem; } .cm_popup.popup_notice .header_title .number > span { font-weight: 700; } .cm_popup.popup_notice .item_box { display: block; aspect-ratio: 1/1; width: 100%; overflow: hidden; border: 1px solid #000; } .cm_popup.popup_notice .item_box a { display: block; width: 100%; height: 100%; } .cm_popup.popup_notice .item_box img { width: 100%; height: 100%; object-fit: fill; } .cm_popup.popup_notice .swiper-btn-wrap { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 4rem; gap: 2rem; } .cm_popup.popup_notice .swiper-btn-wrap .swiper-btn { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 7.2rem; height: 7.2rem; border: 2px solid #fff; border-radius: 100%; background-position: center; background-size: 2.2rem; background-repeat: no-repeat; background-color: transparent; font-size: 0; transition: border-color 0.2s, background-color 0.2s; } .cm_popup.popup_notice .swiper-btn-wrap .swiper-btn:hover { border-color: var(--color-point-50-primary); background-color: var(--color-point-50-primary); } .cm_popup.popup_notice .swiper-btn-wrap .swiper-btn.swiper-prev { background-image: url(../../images/common/icon_arr17_left.svg); } .cm_popup.popup_notice .swiper-btn-wrap .swiper-btn.swiper-next { background-image: url(../../images/common/icon_arr17_right.svg); } .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl { display: flex; align-items: center; justify-content: center; width: 100%; gap: 2rem; } .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl:before, .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl:after { width: 100%; height: 1px; background: #fff; content: ""; } .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl .cm_chk1 { flex-shrink: 0; } .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl .cm_chk1 .chk_label { color: #fff; } .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl .btn_close { display: flex; flex-shrink: 0; align-items: center; justify-content: center; min-height: 6rem; padding: 1rem 2.5rem; border-radius: 100px; background: #fff; font-size: 1.8rem; } .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl .btn_close:after { display: block; width: 2rem; height: 2rem; margin-left: 1rem; background: url(../../images/common/icon_stroke_cross_bold.svg) no-repeat center/contain; content: ""; } /* 공통 검색 */ .cm_search1 { margin-bottom: 40px; } .cm_search1 .search_wrap { display: flex; height: var(--form_height); gap: 8px; } .cm_search1 .search_field_group { display: flex; height: 100%; border: 1px solid #000; } .cm_search1 .search_category { width: 160px; height: 100%; border: none; } .cm_search1 .search_input_wrap { flex: 1; min-width: 0; height: 100%; } .cm_search1 .search_input { width: 263px; height: 100%; border: none; } .cm_search1 .btn_search { aspect-ratio: 1/1; overflow: hidden; background: url(../../images/common/icon_stroke_search.svg) no-repeat center/47%; text-indent: 100%; white-space: nowrap; } .cm_search1 .btn_reset { flex-shrink: 0; aspect-ratio: 1/1; height: 100%; overflow: hidden; border: 1px solid var(--border-basic); background: url(../../images/common/icon_stroke_rotate.svg) no-repeat center/47%; text-indent: 100%; white-space: nowrap; } .cm_search1 .btn_reset:hover { border: 1px solid var(--border-basic); background-color: var(--button-tertairy-hover); } .cm_search1 .btn_reset:disabled, .cm_search1 .btn_reset.btn_disabled { border: 1px solid var(--button-disabled); background-color: var(--button-tertairy); } .cm_search1.type2 .search_field_group { gap: 8px; border: none; } .cm_search1.type2 .search_category { border: 1px solid #000; } .cm_search1.type2 .btn_search { border: 1px solid #000; } /* 공통 검색 */ .cm_search2 { width: 100%; padding: 2.4rem; border: 2px solid var(--border-basic); } .cm_search2 .search_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.4rem; padding-bottom: 2.4rem; border-bottom: 1px solid #000; } .cm_search2 .search_head .point-50 { color: var(--color-point-50-primary) !important; } .cm_search2 .search_head .head_title { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 2.4rem; line-height: 1.5; } .cm_search2 .search_head .head_title:before { display: block; width: 2.4rem; height: 2.4rem; background: url(../../images/common/icon_stroke_user.svg) no-repeat center/contain; content: ""; } .cm_search2 .search_head .head_info { display: flex; align-items: center; gap: 3.3rem; } .cm_search2 .search_head .head_info .info_item { position: relative; font-size: 1.7rem; line-height: 1.5; } .cm_search2 .search_head .head_info .info_item .number { font-weight: 700; font-size: 2.4rem; } .cm_search2 .search_head .head_info .info_item:after { position: absolute; top: 50%; left: -1.7rem; width: 1px; height: 1.6rem; margin-top: -0.7rem; background: var(--border-basic); content: ""; } .cm_search2 .search_head .head_info .info_item:first-child:after { display: none; } .cm_search2 .search_filter_group { display: flex; flex-direction: column; margin-bottom: 2.4rem; padding-bottom: 2.4rem; gap: 1.6rem; border-bottom: 1px solid var(--border-basic); } .cm_search2 .search_filter_group .search_filter_item { display: flex; align-items: baseline; gap: 1.6rem; } .cm_search2 .search_filter_group .search_filter_item .filter_label { display: flex; flex-shrink: 0; align-items: center; min-width: 13rem; font-weight: 700; font-size: var(--font_size17); line-height: 150%; } .cm_search2 .search_filter_group .search_filter_item .filter_content { flex: 1; } .cm_search2 .search_field_group { display: flex; position: relative; align-items: center; justify-content: center; gap: 0.8rem; } .cm_search2 .search_category { width: 100%; max-width: 20rem; } .cm_search2 .search_input_wrap { position: relative; width: 100%; max-width: 50rem; } .cm_search2 .search_input_wrap .search_input { padding-right: calc(var(--form_height) + 1.6rem); } .cm_search2 .search_input_wrap .btn_search { position: absolute; top: 0; right: 0; width: var(--form_height); height: var(--form_height); background: url(../../images/common/icon_stroke_search.svg) no-repeat center/2.4rem; } .cm_search2 .btn_reset { flex-shrink: 0; margin-left: 2.4rem; } .cm_search2 .search_filter_group .search_filter_item .filter_content .cm_chk2 .chk_label { height: auto; padding: 3px 9px; font-size: clamp(13px, 0.8333333333vw, 16px); } .cm_search2.type2 { position: relative; } .cm_search2.type2 .search_filter_group { margin: 0; padding: 0; border-bottom: 0; } .cm_search2.type2 .search_input_wrap { position: relative; width: calc(100% - 10rem); max-width: 60rem; } .cm_search2.type2 .btn_reset { position: absolute; right: 2.4rem; bottom: 2.4rem; } .cm_search2 .search_input_wrap.type2 { display: flex; gap: 0.8rem; } .cm_search2 .search_input_wrap.type2 .btn_search { position: static; flex-shrink: 0; border: 1px solid #000; } /* 공통 검색 */ .cm_search3 { margin-bottom: clamp(48px, 3.125vw, 60px); } .cm_search3 .search_container { display: flex; gap: clamp(4px, 0.4166666667vw, 8px); } .cm_search3 .search_container .filter_group { display: flex; flex-shrink: 0; } .cm_search3 .search_container .filter_group .cm_chk_wrap { gap: 0; } .cm_search3 .search_container .filter_group .cm_chk2:not(:first-child) { margin-left: -1px; } .cm_search3 .search_container .filter_group .cm_chk2 .chk_label { height: auto; padding: clamp(4px, 0.3125vw, 6px) clamp(10px, 1.0416666667vw, 20px); text-align: center; } .cm_search3 .search_container .search_box { display: flex; position: relative; flex: 1; min-width: 0; } .cm_search3 .search_container .btn_search { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 1/1; overflow: hidden; background: url(../../images/common/icon_stroke_search.svg) no-repeat center/44%; text-indent: 100%; white-space: nowrap; } .cm_search3 .search_detail { display: none; margin: 15px 0; } .cm_search3 .search_detail .cm_chk_wrap { gap: clamp(4px, 0.4166666667vw, 8px); } .cm_search3 .search_detail th { width: clamp(90px, 6.7708333333vw, 130px); } .cm_search3 .location_group { display: flex; flex-wrap: wrap; gap: 10px; } .cm_search3 .location_item { display: flex; align-items: center; width: calc(50% - 5px); } .cm_search3 .location_name { flex-shrink: 0; width: 110px; } .cm_search3 .cm_date_range .form_control { width: clamp(120px, 7.8125vw, 150px); padding: 0 9px; background-position: right 1.3rem center; background-size: 1.9rem; font-size: clamp(14px, 0.8333333333vw, 16px); } .cm_search3 .btn_arrow.active .cm_icon.icon_arrow_open::before { background-image: url(../../images/common/icon_arrow_close.svg); } .cm_search4 { width: 100%; background: #fff; } .cm_search4 .filter_title { padding-bottom: 16px; border-bottom: 1px solid #6d7882; font-weight: 700; font-size: clamp(20px, 1.25vw, 24px); } .cm_search4 .filter_section { border-bottom: 1px solid #e5e5e5; } .cm_search4 .filter_section:last-of-type { margin-bottom: 20px; } .cm_search4 .filter_label { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; border: none; background: none; color: var(--color-primary-80); font-weight: 600; text-align: left; cursor: pointer; } .cm_search4 .toggle_icon { position: relative; flex-shrink: 0; width: 22px; height: 22px; background: url(../../images/common/icon_stroke_arrow_down.svg) no-repeat center/contain; } .cm_search4 .filter_section.open .toggle_icon { background: url(../../images/common/icon_stroke_arrow_up.svg) no-repeat center/contain; } .cm_search4 .filter_panel { overflow: hidden; } .cm_search4 .filter_options { padding-top: 8px; padding-bottom: 20px; } .cm_search4 .filter_options label { display: block; margin-bottom: 20px; } .cm_search4 .filter_options label:last-child { margin-bottom: 0; } .cm_search4 .period_options { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 15px; gap: 8px; } .cm_search4 .period_options label { margin-bottom: 0; } .cm_search4 .date_input_wrap { position: relative; } .cm_search4 .filter_actions { display: flex; flex-direction: column; margin-top: 24px; gap: 12px; } .cm_search4 .period_options .cm_chk2 .chk_label { height: 38px; padding: 0; font-size: clamp(14px, 0.78125vw, 15px); } .cm_search4 .filter_btn_close { display: none; position: absolute; top: 17px; right: 20px; width: 35px; height: 35px; overflow: hidden; background: url(../../images/common/icon_solid_close.svg) no-repeat center/70%; text-indent: 100%; white-space: nowrap; } /* 공통 swiper */ .cm_slide_control { display: flex; align-items: center; justify-content: center; margin-top: 24px; gap: 0 8px; } .cm_slide_control .swiper-pagination { display: flex; position: static; width: auto; gap: 0 6px; } .cm_slide_control .swiper-pagination-bullet { width: clamp(10px, 0.7291666667vw, 14px); height: clamp(10px, 0.7291666667vw, 14px); margin: 0 !important; border-radius: 0; background-color: #d4d4d4; opacity: 1; } .cm_slide_control .swiper-pagination-bullet-active { background-color: #000; } .cm_slide_control .slide_play_btn { aspect-ratio: 1/1; width: 24px; height: 24px; overflow: hidden; background-position: center; background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; } .cm_slide_control .slide_play_btn.is_playing { background-image: url(../../images/common/icon_stroke_pause.svg); } .cm_slide_control .slide_play_btn.is_paused { background-image: url(../../images/common/icon_stroke_play.svg); } .cm_slide_control2 { display: inline-flex; z-index: 2; align-items: center; padding: 0.8rem 1.6rem; padding-right: 1.2rem; gap: 0.8rem; border: 1px solid var(--border-basic); border-radius: 100px; background: #fff; } .cm_slide_control2 .swiper-pagination { display: flex; position: static; width: auto; gap: 0.6rem; } .cm_slide_control2 .swiper-pagination .swiper-pagination-bullet { width: 1rem; height: 1rem; margin: 0; border-radius: 0; background: #d4d4d4; opacity: 1; } .cm_slide_control2 .swiper-pagination .swiper-pagination-bullet-active { background: #000; } .cm_slide_control2 .swiper-btn { display: block; width: 2rem; height: 2rem; background-position: center; background-size: contain; background-repeat: no-repeat; } .cm_slide_control2 .swiper-ctrl-area .swiper-btn { display: none; } .cm_slide_control2 .swiper-ctrl-area .swiper-btn.active { display: block; } .cm_slide_control2 .swiper-pause { background-image: url(../../images/common/icon_stroke_pause.svg); } .cm_slide_control2 .swiper-play { background-image: url(../../images/common/icon_stroke_play.svg); } .cm_slide_control2 .swiper-prev { background-image: url(../../images/common/icon_stroke_arrow_left.svg); } .cm_slide_control2 .swiper-next { background-image: url(../../images/common/icon_stroke_arrow_right.svg); } .cm_slide_control3 { display: inline-flex; position: relative; align-items: center; justify-content: space-between; gap: 1.6rem; } .cm_slide_control3.hidden { display: none; } .cm_slide_control3 .swiper-button-next, .cm_slide_control3 .swiper-button-prev { position: static; width: 3.6rem; height: 2.2rem; margin: 0; transform: none; background-position: center; background-size: contain; background-repeat: no-repeat; } .cm_slide_control3 .swiper-button-next { background-image: url(../../images/common/icon_stroke_arrow4_right.svg); } .cm_slide_control3 .swiper-button-prev { background-image: url(../../images/common/icon_stroke_arrow4_left.svg); } .cm_slide_control3 .swiper-button-next:after, .cm_slide_control3 .swiper-button-prev:after { display: none; content: ""; } .cm_slide_control3 .swiper-pagination-custom { position: static; width: auto; } .cm_slide_control3 .pagination_wrap { font-size: 1.6rem; } .cm_slide_control3 .pagination_wrap .current { font-weight: 700; font-size: 2.4rem; } /* 공통 탭 */ .cm_tab1 { margin-bottom: clamp(15px, 2.0833333333vw, 40px); } .cm_tab1 .tab_list { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(4px, 0.4166666667vw, 8px); } .cm_tab1 .tab_list .tab_btn { display: flex; position: relative; align-items: center; justify-content: center; padding: 12px 24px; border: 1px solid var(--border-tertiary); border-radius: 1000px; background: #fff; font-size: var(--font_size19); } .cm_tab1 .tab_list .tab_btn:before { display: none; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border: 2px solid #000; border-radius: inherit; content: ""; } .cm_tab1 .tab_list > li.active .tab_btn { background-color: var(--color-point-50-primary); color: #fff; font-weight: 700; } .cm_tab1 .tab_list > li.active .tab_btn:before { display: block; } .cm_tab1.sticky_tab { z-index: 11; position: sticky; top: 9rem; } .cm_tab2 { margin-bottom: 4rem; } .cm_tab2 .tab_list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .cm_tab2 .tab_list .tab_btn { display: flex; position: relative; align-items: center; justify-content: center; height: 48px; padding: 5px 24px; border: 2px solid transparent; border-radius: 1000px; background: var(--background-white); color: var(--text-secondary); font-weight: 700; font-size: var(--font_size19); } .cm_tab2 .tab_list > li.active .tab_btn { border-color: var(--border-basic); color: var(--color-black); } .cm_tab3 { margin-bottom: 1.6rem; } .cm_tab3 .tab_list { display: flex; } .cm_tab3 .tab_list .tab_btn { display: flex; position: relative; align-items: center; justify-content: center; height: 5.6rem; padding: 0.5rem 2.4rem; border: 1px solid var(--border-basic); border-right: 0; background: var(--background-white); font-size: 1.9rem; } .cm_tab3 .tab_list > li:last-child .tab_btn { border-right: 1px solid var(--border-basic); } .cm_tab3 .tab_list > li.active .tab_btn { background: var(--color-point-50-primary); color: #fff; font-weight: 700; } .cm_tab3.type2 .tab_list > li.active .tab_btn { background: var(--border-basic); } .cm_tab4 { margin-bottom: 2.4rem; } .cm_tab4 .tab_list { display: flex; width: 100%; } .cm_tab4 .tab_list > li { width: 100%; } .cm_tab4 .tab_list .tab_btn { display: flex; position: relative; align-items: center; justify-content: center; height: 5.6rem; padding: 0.5rem 2.4rem; border: 1px solid var(--border-basic); border-right: 0; background: var(--background-white); font-size: 1.7rem; line-height: 1.3; text-align: center; } .cm_tab4 .tab_list > li:last-child .tab_btn { border-right: 1px solid var(--border-basic); } .cm_tab4 .tab_list > li.active .tab_btn { background: #e4ca95; font-weight: 700; } .tab_contents_script .tab_cont { display: none; } .tab_contents_script .tab_cont.active { display: block; } .tab_contents_script .tab_cont .tab_swiper { width: 100%; max-width: 64rem; margin: 0 auto; } .tab_contents_script .tab_cont .tab_swiper .item_thumb { display: block; position: relative; aspect-ratio: 12/6.75; width: 100%; background: #eee; } .tab_contents_script .tab_cont .tab_swiper .item_thumb > img { width: 100%; height: 100%; object-fit: fill; } .tab_contents_script .tab_cont .tab_swiper .item_thumb .item_title { display: flex; position: absolute; right: 5px; bottom: 5px; align-items: center; justify-content: center; min-width: 10rem; padding: 0.7rem 1.6rem; border: 1px solid #000; border-radius: 100px; background: #fff; color: #000; font-weight: 500; font-size: 1.6rem; } .tab_contents_script .tab_cont .tab_swiper .swiper-btn-wrap { display: flex; align-items: center; justify-content: center; margin-top: 3rem; gap: 0.6rem; } .tab_contents_script .tab_cont .tab_swiper .swiper-pagination { display: flex; position: static; align-items: center; justify-content: center; width: auto; gap: 0.6rem; } .tab_contents_script .tab_cont .tab_swiper .swiper-pagination .swiper-pagination-bullet { width: 1.4rem; height: 1.4rem; margin: 0; border-radius: 0; background: #d4d4d4; opacity: 1; } .tab_contents_script .tab_cont .tab_swiper .swiper-pagination .swiper-pagination-bullet-active { background: #000; } .tab_contents_script .tab_cont .tab_swiper .swiper-ctrl-area .swiper-btn { display: none; width: 2.4rem; height: 2.4rem; background-position: center; background-size: contain; background-repeat: no-repeat; } .tab_contents_script .tab_cont .tab_swiper .swiper-ctrl-area .swiper-btn.active { display: block; } .tab_contents_script .tab_cont .tab_swiper .swiper-ctrl-area .swiper-pause { background-image: url(../../images/common/icon_stroke_pause.svg); } .tab_contents_script .tab_cont .tab_swiper .swiper-ctrl-area .swiper-play { background-image: url(../../images/common/icon_stroke_play.svg); } /* 공통 테이블 */ /* 공통 - 반응형 테이블 (th 없어지는 형태) */ .cm_table_scroll_guide { display: flex; align-items: center; margin-bottom: 5px; padding: 10px 20px; gap: 10px; background: #333; color: #fff; font-size: var(--font_size12); } .cm_table_scroll_guide:before { display: block; flex-shrink: 0; width: 1.8rem; height: 1.8rem; background: url(../../images/common/icon_stroke_arrow_right_wt.svg) no-repeat center/contain; content: ""; animation: swipeRight 1.8s ease-in-out infinite; } .fixed table { table-layout: fixed; } /* cm_table1 */ .cm_table1 { border-top: 3px solid #000; } .cm_table1 table:not(.table1_inner) > thead > tr > th, .cm_table1 table:not(.table1_inner) > tbody > tr > td { height: clamp(50px, 3.125vw, 60px); padding: clamp(8px, 0.5208333333vw, 10px) clamp(10px, 0.78125vw, 15px); border-bottom: 1px solid #000; line-height: 1.3; text-align: center; } .cm_table1 table:not(.table1_inner) > thead > tr > th { height: clamp(53px, 3.28125vw, 63px); font-weight: 700; font-size: clamp(15px, 0.8854166667vw, 17px); } .cm_table1 table:not(.table1_inner) > tbody > tr > td.subject { text-align: left; } .cm_table1 table:not(.table1_inner) > tbody > tr > td.subject a { display: inline-block; } .cm_table1 .table1_inner td { padding: clamp(5px, 0.5208333333vw, 10px); word-break: keep-all; } .cm_table1.type2 table:not(.table1_inner) > tbody > tr > td { padding: clamp(20px, 2.0833333333vw, 40px) 0; } .cm_table1 .table1_inner .cm_btn { min-width: clamp(95px, 5.9375vw, 114px); padding: 0 12px; } .cm_table1.annual_schedule .td_subject_inner { text-align: left; } .cm_table1.annual_schedule .td_place_inner dt { text-align: left; } .cm_table1.edu_management { overflow: hidden; overflow-x: auto; } .cm_table1.edu_management table:not(.table1_inner) > thead > tr > th { word-break: keep-all; } .cm_table1.edu_management table:not(.table1_inner) .sticky { z-index: 2; position: sticky; background: #fff; } .cm_table1.edu_management table:not(.table1_inner) .sticky:nth-child(3):before { z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background-color: #000; content: ""; } .cm_table1 .refund_badge { display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: 3px; background-color: var(--label-07); color: #fff; font-weight: 500; font-size: 11px; vertical-align: middle; } /* cm_table2 */ .cm_table2 { width: 100%; } .cm_table2 th, .cm_table2 td { height: 5rem; padding: 1.2rem 1.6rem; border: 1px solid var(--border-basic); font-size: var(--font_size17); line-height: 150%; } .cm_table2 thead th { height: 3.9rem; padding: 0.8rem 1.6rem; border-bottom: 1px solid var(--border-basic); background: var(--color-primary-30); font-weight: 700; font-size: var(--font_size15); } .cm_table2 th:first-child, .cm_table2 td:first-child { border-left: 0; } .cm_table2 th:last-child, .cm_table2 td:last-child { border-right: 0; } .cm_table2 tr:first-child th { border-top: 0; } .cm_table2 tr:first-child td { border-top: 0; } .cm_table2 .point-70 { color: var(--color-point-70) !important; } .cm_table2 tfoot th { background: var(--color-neutral-gray-10); font-weight: 700; font-size: 1.7rem; text-align: left; } .cm_table2 tfoot td { font-size: 1.7rem; text-align: center; } .cm_table2.no_border th, .cm_table2.no_border td { border-right: 0; border-left: 0; border-color: #333; } .cm_table2.type2 th, .cm_table2.type2 td { border: 1px solid #000 !important; } .cm_table2.type2 thead tr:last-child th { border-bottom: 0 !important; } .cm_table2.type2 tbody th { background: var(--color-primary-30); font-weight: 700; } .cm_table2.type2 tbody th, .cm_table2.type2 tbody td { height: 6.4rem; } .cm_table2.type2.size_sm th, .cm_table2.type2.size_sm td { height: 5rem; } .cm_table2.type2.size_sm th { font-size: clamp(14px, 0.78125vw, 15px); } .cm_table2.type2.no_border table { border-right: hidden; border-left: hidden; } .cm_table2 .align-top { vertical-align: top !important; } .cm_table2 th.border_right_no, .cm_table2 td.border_right_no, .cm_table2.type2 th.border_right_no, .cm_table2.type2 td.border_right_no { border-right: 0 !important; } .cm_table2 th.border_left_no, .cm_table2 td.border_left_no, .cm_table2.type2 th.border_left_no, .cm_table2.type2 td.border_left_no { border-left: 0 !important; } .cm_table2.td_center td { text-align: center; } /* cm_table3 - 공연/전시 검색 조건 */ .cm_table3 { border: 1px solid var(--border-basic); } .cm_table3 th, .cm_table3 td { padding: clamp(8px, 0.5208333333vw, 10px); border: 1px solid var(--border-basic); font-size: clamp(13px, 0.8333333333vw, 16px); } .cm_table3 th { padding-right: clamp(8px, 0.78125vw, 15px); padding-left: clamp(8px, 0.78125vw, 15px); background-color: var(--color-neutral-gray-20); font-weight: 700; text-align: left; word-break: keep-all; } .cm_table3 .cm_chk2 .chk_label { height: auto; padding: 3px 9px; font-size: clamp(13px, 0.8333333333vw, 16px); } .cm_table3.has_scroll { overflow: hidden; overflow-x: auto; } /* cm_table4 - 마이페이지 */ .cm_table4 { border-top: 2px solid #000; } .cm_table4 tbody th, .cm_table4 tbody td { height: 56px; padding: 12px 16px; border-bottom: 1px solid #000; } .cm_table4 tbody th { background: var(--color-neutral-gray-10); font-weight: bold; font-size: clamp(14px, 0.78125vw, 15px); } /* 지원사업 */ .cm_table5 th, .cm_table5 td { padding: 1.2rem; border: 1px solid #000; text-align: center; } .cm_table5 th { height: 5.6rem; background-color: var(--color-neutral-gray-10); font-weight: bold; } .cm_table5 td { height: 8rem; } .cm_table5 .sign_img { max-height: 5rem; } .cm_table5 th.active, .cm_table5 td.active { border-width: 3px; border-color: #000; } .cm_table5 th.active { border-bottom: none; } .cm_table5 td.active { border-top-width: 1px; } /* 공통 텍스트 리스트 */ .cm_text_list1 > li { position: relative; padding-left: 15px; } .cm_text_list1 > li:last-child { margin-bottom: 0; } .cm_text_list1 .text_num { position: absolute; top: 0; left: 0; } .cm_text_list2 { display: flex; flex-wrap: wrap; align-items: center; gap: 35px; } .cm_text_list2.center { justify-content: center; } .cm_text_list2 > li { position: relative; flex-shrink: 0; } .cm_text_list2 > li:before { display: block; position: absolute; top: 50%; left: -18px; width: 1px; height: 17px; transform: translateY(-50%); background-color: #000; content: ""; } .cm_text_list2 > li:first-child:before { display: none; } .cm_text_list2 .filter_label { padding: 2px 4px; background-color: var(--color-neutral-gray-20); } /* 공통 썸네일 */ .cm_thumb .thumb { width: 100%; height: 100%; } .cm_thumb .thumb .img { width: 100%; height: 100%; object-fit: cover; } .cm_thumb.ratio1_1 .thumb { aspect-ratio: 1/1; } .cm_thumb.ratio2_3 .thumb { aspect-ratio: 2/3; } .cm_thumb.ratio3_4 .thumb { aspect-ratio: 3/4; } .cm_thumb.ratio9_16 .thumb { aspect-ratio: 9/16; } .cm_thumb.ratio16_9 .thumb { aspect-ratio: 16/9; } .cm_thumb.ratio16_10 .thumb { aspect-ratio: 16/10; } .cm_thumb.ratio4_3 .thumb { aspect-ratio: 4/3; } .cm_thumb.ratio3_2 .thumb { aspect-ratio: 3/2; } /* 공통 툴바 */ .cm_toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 5px min(0.5208333333vw, 10px); } .cm_toolbar.end { align-items: flex-end; } .cm_toolbar.border_btm { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-basic); } /* 공통 타이포그래피 */ .cm_title.title1 { font-weight: bold; font-size: clamp(20px, 1.6666666667vw, 32px); } .cm_text.text1 { font-weight: bold; font-size: clamp(22px, 1.25vw, 24px); } .cm_text.text2 { font-weight: bold; font-size: clamp(18px, 0.9895833333vw, 19px); } .cm_text.text3 { margin-bottom: 4rem; padding-left: 3.2rem; border-left: 5px solid #c93255; font-weight: 700; font-size: 3.2rem; line-height: 150%; } .cm_num1 { display: inline-block; aspect-ratio: 1/1; height: 16px; border: 1px solid #000; border-radius: 1000px; font-weight: 400; font-size: 10px; } .cm_font_size10 { font-size: var(--font_size10) !important; } .cm_font_size11 { font-size: var(--font_size11) !important; } .cm_font_size12 { font-size: var(--font_size12) !important; } .cm_font_size13 { font-size: var(--font_size13) !important; } .cm_font_size14 { font-size: var(--font_size14) !important; } .cm_font_size15 { font-size: var(--font_size15) !important; } .cm_font_size16 { font-size: var(--font_size16) !important; } .cm_font_size17 { font-size: var(--font_size17) !important; } .cm_font_size18 { font-size: var(--font_size18) !important; } .cm_font_size19 { font-size: var(--font_size19) !important; } .cm_font_size20 { font-size: var(--font_size20) !important; } .cm_font_size21 { font-size: var(--font_size21) !important; } .cm_font_size22 { font-size: var(--font_size22) !important; } .cm_font_size23 { font-size: var(--font_size23) !important; } .cm_font_size24 { font-size: var(--font_size24) !important; } .cm_font_size25 { font-size: var(--font_size25) !important; } .cm_font_size26 { font-size: var(--font_size26) !important; } .cm_font_size27 { font-size: var(--font_size27) !important; } .cm_font_size28 { font-size: var(--font_size28) !important; } .cm_font_size29 { font-size: var(--font_size29) !important; } .cm_font_size30 { font-size: var(--font_size30) !important; } .cm_font_size31 { font-size: var(--font_size31) !important; } .cm_font_size32 { font-size: var(--font_size32) !important; } .cm_font_size33 { font-size: var(--font_size33) !important; } .cm_font_size34 { font-size: var(--font_size34) !important; } .cm_font_size35 { font-size: var(--font_size35) !important; } .cm_font_size36 { font-size: var(--font_size36) !important; } .cm_font_size37 { font-size: var(--font_size37) !important; } .cm_font_size38 { font-size: var(--font_size38) !important; } .cm_font_size39 { font-size: var(--font_size39) !important; } .cm_font_size40 { font-size: var(--font_size40) !important; } .cm_font_size41 { font-size: var(--font_size41) !important; } .cm_font_size42 { font-size: var(--font_size42) !important; } .cm_font_size43 { font-size: var(--font_size43) !important; } .cm_font_size44 { font-size: var(--font_size44) !important; } .cm_font_size45 { font-size: var(--font_size45) !important; } .cm_font_size46 { font-size: var(--font_size46) !important; } .cm_font_size47 { font-size: var(--font_size47) !important; } .cm_font_size48 { font-size: var(--font_size48) !important; } .cm_font_size49 { font-size: var(--font_size49) !important; } .cm_font_size50 { font-size: var(--font_size50) !important; } .cm_font_size51 { font-size: var(--font_size51) !important; } .cm_font_size52 { font-size: var(--font_size52) !important; } .cm_font_size53 { font-size: var(--font_size53) !important; } .cm_font_size54 { font-size: var(--font_size54) !important; } .cm_font_size55 { font-size: var(--font_size55) !important; } .cm_font_size56 { font-size: var(--font_size56) !important; } .cm_font_size57 { font-size: var(--font_size57) !important; } .cm_font_size58 { font-size: var(--font_size58) !important; } .cm_font_size59 { font-size: var(--font_size59) !important; } .cm_font_size60 { font-size: var(--font_size60) !important; } .cm_font_size61 { font-size: var(--font_size61) !important; } .cm_font_size62 { font-size: var(--font_size62) !important; } .cm_font_size63 { font-size: var(--font_size63) !important; } .cm_font_size64 { font-size: var(--font_size64) !important; } .cm_font_size65 { font-size: var(--font_size65) !important; } .cm_font_size66 { font-size: var(--font_size66) !important; } .cm_font_size67 { font-size: var(--font_size67) !important; } .cm_font_size68 { font-size: var(--font_size68) !important; } .cm_font_size69 { font-size: var(--font_size69) !important; } .cm_font_size70 { font-size: var(--font_size70) !important; } .cm_font_size71 { font-size: var(--font_size71) !important; } .cm_font_size72 { font-size: var(--font_size72) !important; } .cm_font_size73 { font-size: var(--font_size73) !important; } .cm_font_size74 { font-size: var(--font_size74) !important; } .cm_font_size75 { font-size: var(--font_size75) !important; } .cm_font_size76 { font-size: var(--font_size76) !important; } .cm_font_size77 { font-size: var(--font_size77) !important; } .cm_font_size78 { font-size: var(--font_size78) !important; } .cm_font_size79 { font-size: var(--font_size79) !important; } .cm_font_size80 { font-size: var(--font_size80) !important; } .cm_font_size81 { font-size: var(--font_size81) !important; } .cm_font_size82 { font-size: var(--font_size82) !important; } .cm_font_size83 { font-size: var(--font_size83) !important; } .cm_font_size84 { font-size: var(--font_size84) !important; } .cm_font_size85 { font-size: var(--font_size85) !important; } .cm_font_size86 { font-size: var(--font_size86) !important; } .cm_font_size87 { font-size: var(--font_size87) !important; } .cm_font_size88 { font-size: var(--font_size88) !important; } .cm_font_size89 { font-size: var(--font_size89) !important; } .cm_font_size90 { font-size: var(--font_size90) !important; } .cm_font_size91 { font-size: var(--font_size91) !important; } .cm_font_size92 { font-size: var(--font_size92) !important; } .cm_font_size93 { font-size: var(--font_size93) !important; } .cm_font_size94 { font-size: var(--font_size94) !important; } .cm_font_size95 { font-size: var(--font_size95) !important; } .cm_font_size96 { font-size: var(--font_size96) !important; } .cm_font_size97 { font-size: var(--font_size97) !important; } .cm_font_size98 { font-size: var(--font_size98) !important; } .cm_font_size99 { font-size: var(--font_size99) !important; } .cm_font_size100 { font-size: var(--font_size100) !important; } /* form text - validation */ .cm_validation { display: flex; margin-top: 8px; gap: 4px; font-size: var(--font_size15); line-height: 1.3; } .cm_validation .icon { display: inline-block; width: 2.4rem; height: 2.4rem; } .cm_validation .text { flex: 1; padding-top: 4px; } .cm_validation.error { color: var(--text-point-red); } .cm_validation.error .icon { background: url(../../images/common/icon_input_system2.svg) no-repeat center/contain; } .cm_validation.success { color: #228738; } .cm_validation.success .icon { background: url(../../images/common/icon_input_system.svg) no-repeat center/contain; } .cm_validation.info { gap: 8px; color: var(--text-tertiary); } .cm_validation.info .icon { width: 20px; height: 20px; background: url(../../images/common/icon_stroke_info_gry.svg) no-repeat center/contain; } .cm_validation.info .text { padding-top: 2px; } .cm_validation.info2 { gap: 8px; color: var(--text-primary); } .cm_validation.info2 .icon { width: 20px; height: 20px; background: url(../../images/common/icon_stroke_info_point.svg) no-repeat center/contain; } .cm_validation.info2 .text { padding-top: 2px; } .cm_validation.info3 { gap: 8px; color: #000; } .cm_validation.info3 .icon { width: 20px; height: 20px; background: url(../../images/common/icon_info.svg) no-repeat center/contain; } .cm_validation.info3 .text { padding-top: 2px; } .cm_validation.type2 { padding: 4px; border-radius: 4px; background-color: rgba(244, 121, 14, 0.2); } /* 공통 video style */ .cm_video_thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cm_video_thumb:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .cm_video_thumb:after { display: block; z-index: 1; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; background: url(../../images/common/icon_thumb_play.svg) no-repeat center/contain; content: ""; } /* cm_video_wrap */ .cm_video_wrap1 { border: 3px solid var(--border-basic); } .cm_video_wrap1 .player_area { display: flex; align-items: stretch; justify-content: center; padding-right: 1.2rem; padding-left: 1.2rem; gap: 1.2rem; } .cm_video_wrap1 .player_area .line { display: inline-block; flex-shrink: 0; width: 2px; background: #000; } .cm_video_wrap1 .player_area .player { flex: 1; border-right: 2px solid #000; border-left: 2px solid #000; background: #000; } .cm_video_wrap1 .subtitles_area { padding: 0.4rem 1.1rem; border-top: 3px solid var(--border-basic); } .cm_video_wrap1 .subtitles_area .content_area { max-height: 128px; padding: 2rem 1.3rem; overflow: auto; } .cm_video_wrap1 .subtitles_area .content_area::-webkit-scrollbar { width: 0.7rem; height: 0.7rem; } .cm_video_wrap1 .subtitles_area .content_area::-webkit-scrollbar-thumb { border-radius: var(--border_radius10); background: #7f7f7f; } .cm_video_wrap1 .subtitles_area .content_area::-webkit-scrollbar-track { background: none; } /* 게시판 에디터 */ .editor_content { font-size: 16px; line-height: 1.6; word-wrap: break-word; color: #333; font-weight: 400; font-family: "PretendardGOV", "Noto Sans KR", sans-serif; letter-spacing: -0.02em; word-break: keep-all; } .editor_content h1 { display: block; margin: 0.67em 0; font-weight: 700; font-size: 2em; line-height: 1.2; } .editor_content h2 { display: block; margin: 0.83em 0; font-weight: 700; font-size: 1.5em; line-height: 1.3; } .editor_content h3 { display: block; margin: 1em 0; font-weight: 700; font-size: 1.17em; line-height: 1.4; } .editor_content h4 { display: block; margin: 1.33em 0; font-weight: 700; font-size: 1em; } .editor_content h5 { display: block; margin: 1.67em 0; font-weight: 700; font-size: 0.83em; } .editor_content h6 { display: block; margin: 2.33em 0; font-weight: 700; font-size: 0.67em; } .editor_content p { display: block; margin: 1em 0; } .editor_content b, .editor_content strong { font-weight: 700; } .editor_content i, .editor_content em { font-style: italic; } .editor_content u, .editor_content ins { text-decoration: underline; } .editor_content s, .editor_content strike, .editor_content del { color: #999; text-decoration: line-through; } .editor_content sub { font-size: 0.75em; vertical-align: sub; } .editor_content sup { font-size: 0.75em; vertical-align: super; } .editor_content hr { display: block; height: 1px; margin: 2em 0; border: 0; border-top: 1px solid #e0e0e0; } .editor_content mark { padding: 0.1em 0.2em; border-radius: 2px; background-color: #fff000; color: inherit; } .editor_content small { color: #666; font-size: 0.8em; } .editor_content code { padding: 0.2em 0.4em; border-radius: 3px; background-color: #f5f5f5; color: #c7254e; font-size: 0.9em; font-family: monospace; } .editor_content pre { display: block; margin: 1em 0; padding: 15px; border: 1px solid #ddd; border-radius: 4px; background: #f8f9fa; color: #333; font-family: monospace; white-space: pre-wrap; } .editor_content blockquote { margin: 1.5em 0; padding: 1em 1.5em; border-left: 4px solid #ddd; background-color: #f9f9f9; color: #555; } .editor_content address { margin-bottom: 1em; color: #666; font-style: normal; } .editor_content ul { display: block; margin: 1em 0; padding-left: 40px; list-style-type: disc !important; } .editor_content ol { display: block; margin: 1em 0; padding-left: 40px; list-style-type: decimal !important; } .editor_content li { display: list-item; margin-bottom: 0.3em; list-style: inherit !important; } .editor_content dl { margin: 1em 0; } .editor_content dt { margin-top: 1em; font-weight: 700; } .editor_content dd { margin-left: 20px; color: #555; } .editor_content a { color: #007bff; text-decoration: underline; word-break: break-all; cursor: pointer; } .editor_content a:hover { color: #0056b3; } .editor_content table { width: 100%; max-width: 100%; margin: 1.5em 0; border: 1px solid #ccc; border-collapse: collapse; border-spacing: 0; table-layout: fixed; } .editor_content th, .editor_content td { padding: 8px 12px; border: 1px solid #ccc; vertical-align: middle; } .editor_content th { background-color: #f2f2f2; font-weight: 700; text-align: center; } .editor_content img { max-width: 100%; height: auto !important; vertical-align: top; } .editor_content .image { display: table; margin: 1.5em auto; /* 기본 가운데 정렬 */ clear: both; text-align: center; } .editor_content .image img { display: block; margin: 0 auto; } .editor_content .image > figcaption { display: table-caption; margin-top: 5px; padding: 0.6em; background-color: #f7f7f7; color: #777; font-size: 0.85em; text-align: center; word-break: break-word; caption-side: bottom; } .editor_content .image-style-side, .editor_content .image-style-align-left { max-width: 50%; margin-right: 1.5em; margin-bottom: 1em; float: left; } .editor_content .image-style-align-right { max-width: 50%; margin-bottom: 1em; margin-left: 1.5em; float: right; } .editor_content .image-style-align-center { margin-right: auto; margin-left: auto; clear: both; } .editor_content .media { display: block; position: relative; margin: 1.5em 0; clear: both; overflow: hidden; } .editor_table { overflow-x: auto; } /* 웹접근성 */ *:not(area):focus-visible { z-index: 1; outline: 2px dashed #000; outline-offset: 2px; transition: none !important; } #skipNavi { z-index: 9999; position: absolute; top: 0; left: 0; white-space: nowrap; } #skipNavi a { display: inline-block; position: absolute; top: -9999px; } #skipNavi a:focus-visible { top: 0; padding: 5px; background-color: #000; color: #fff; font-size: 15px; } /* 공통 스크립트 */ .js_read_more .js_read_more_content { position: relative; max-height: 85px; overflow: hidden; transition: max-height 0.5s ease; } .js_read_more .js_read_more_content:before { position: absolute; bottom: 0; width: 100%; height: 85px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f0f0f3 80%, #f0f0f3 100%); content: ""; transition: opactiy 0.5s ease, visibility 0.5s ease; } .js_read_more .js_read_more_btn { transition: opactiy 0.5s ease, visibility 0.5s ease; } .js_read_more.expanded .js_read_more_content:before, .js_read_more.expanded .js_read_more_btn { visibility: hidden; opacity: 0; } /* 인쇄 */ /* 영문 */ .lang_en body { word-break: break-word; } /* header */ .lang_en .header .gnb_area .gnb_depth1_wrap .gnb_depth1 { gap: clamp(10px, 0.9375vw, 18px); } .lang_en .header .gnb_area .gnb_depth1_wrap .gnb_depth1 > li { padding: clamp(10px, 0.8333333333vw, 16px); } .lang_en .header .gnb_area .gnb_depth1_wrap .gnb_depth1 > li > a { font-size: clamp(16px, 1.0416666667vw, 20px); } .lang_en .header .gnb_area .gnb_depth2_wrap .gnb_depth2 > li { margin-bottom: 1.2rem; } .lang_en .header .gnb_area .gnb_depth2_wrap .gnb_depth2 > li:last-child { margin-bottom: 0; } .lang_en .header .gnb_area .gnb_depth2_wrap .gnb_depth2 > li > a { min-height: auto; font-size: 1.6rem; } /* container */ .lang_en #container { padding-top: 13rem; } /* footer */ .lang_en .footer { border-top: 1px solid #000; } .lang_en .footer .inner { align-items: center; } .lang_en .footer .footer_address { padding-top: 1rem; gap: 1rem; } .lang_en .footer .footer_address p.type2 { display: flex; flex-wrap: wrap; gap: 2rem; } /* sub page */ .lang_en .sub_page_head { margin-bottom: 5.5rem; } .lang_en .sub_page_head .sub_page_head_title { font-size: clamp(26px, 1.875vw, 36px); } .lang_en .cm_breadcrumb .nav_list > li { font-size: 1.3rem; } /* 성남문화재단 */ .lang_en .page_foundation .mission_area3 .misn_box .misn_title { min-width: 46rem; } /* 교통 */ .lang_en .cm_traffic_area .box_title { min-width: 29rem; } /* 공통 검색 */ .lang_en .cm_search3 .location_name { width: 220px; } .lang_en .cm_search3 .search_container .filter_group .cm_chk2 .chk_label { padding: clamp(4px, 0.3125vw, 6px) clamp(5px, 1.0416666667vw, 20px); } /* 메인 */ .lang_en .visual_section .visual_swiper .item_box .item_title { font-size: 2.8rem; } .lang_en .calendar_section .calendar_content .cont_list .item_label .cm_badge { width: 12rem; } /* overview5 */ .lang_en .cm_overview5 .ovw5_top:before { margin-right: 2rem; } .lang_en .cm_overview5 .ovw5_category .cm_badge.type_category { width: 11rem; height: auto; min-height: 3.4rem; padding: 0.5rem 1rem; font-size: 1.4rem; text-align: center; } /* overview19 */ .lang_en .cm_overview19 .ovw_item { word-break: keep-all; } /* overview27 */ .lang_en .cm_overview27 { word-break: keep-all; } .lang_en .cm_overview27 .ovw27_body .ovw27_title_area .ovw27_title { font-size: 3rem; } .lang_en .cm_overview27 .ovw27_body .ovw27_content_area { font-size: 1.8rem; } /* map, traffic */ .lang_en .cm_traffic_area2 .box_cont .item_desc .desc_item > .cm_badge { min-width: 20rem; } .header_trans_wrap { z-index: 9999; position: fixed; top: 0; right: 0; left: 0; width: 100%; border-bottom: 1px solid #c5a168; background-color: #c5a168; } .header_trans_wrap .header_trans .inner { display: flex; align-items: center; justify-content: center; height: 50px; gap: 15px; } .header_trans_wrap .trans_icon { flex-shrink: 0; } .header_trans_wrap .trans_icon img { height: 24px; vertical-align: middle; } .header_trans_wrap .trans_select { width: clamp(130px, 9.375vw, 180px); height: 30px; padding: 0 10px; padding-right: 25px; border: 1px solid #fff; border-radius: 4px; background: #fff url(../../images/common/icon_solid_arrow_drop.svg) no-repeat right 5px center/15px; background-color: #fff; color: #333; font-size: 14px; cursor: pointer; } .header_trans_wrap .trans_text { display: flex; align-items: center; margin: 0; color: #fff; font-weight: 500; font-size: clamp(13px, 0.8333333333vw, 16px); line-height: 1.1; } .header_trans_wrap .trans_text::before { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background: #fff; content: "!"; color: #c5a168; font-weight: bold; font-size: 11px; line-height: 16px; text-align: center; } .header_trans_wrap .skiptranslate { display: none !important; } .lang_en.worldwide .wrap { padding-top: 51px; } .lang_en.worldwide .header { top: 51px; } .lang_en.worldwide .header .sitemap_area .sitemap_layer { top: 51px; height: calc(100vh - 51px); } @media screen and (min-width:768px) { .m_over_br { display: block; } } @media screen and (min-width:1080px) { .tablet_over_br { display: block; } } @media screen and (min-width:1280px) { .my_mobile_only { display: none !important; } .pc_br { display: block; } } @media screen and (max-width:1440px) { .cm_overview27 .ovw27_body .ovw27_title_area { max-width: 400px; } /* overview28 */ .cm_overview28 { gap: 2.4rem; } .cm_overview28 .ovw_item { width: calc((100% - 4.8rem) / 3); padding: 3rem; } .cm_overview28 .ovw_item .item_img { right: 2rem; bottom: 2rem; width: 5.6rem; } .cm_overview28 .ovw_item .item_text { padding-right: 4rem; } /* overview27 */ .lang_en .cm_overview27 .ovw27_body .ovw27_title_area .ovw27_title br { display: none; } } @media screen and (max-width:1439px) { .cm_step_list3 { gap: 1.6rem 4.5rem; } .cm_step_list3 .list_item { width: calc((100% - 13.5rem) / 4); } .cm_step_list3 .list_item:after { width: 4.5rem; } .cm_step_list3 .item_box .head { font-size: 1.7rem; } .cm_step_list3.row3 { gap: 1.6rem 6rem; } .cm_step_list3.row3 .list_item:after { width: 6rem; } .cm_step_list3.row3 .list_item { width: calc((100% - 12rem) / 3); } .cm_overview8 .ovw8_item { width: 45%; } .cm_overview8 .ovw8_item:first-child { width: 55%; } /* overview21 */ .cm_overview24 .ovw_item .item_swiper { width: 40rem; } .cm_overview24 .ovw_item .item_desc { padding-top: 1.4rem; } .cm_overview24 .ovw_item .item_desc .item_title { font-size: 3rem; } .cm_overview24 .ovw_item.type2 .item_swiper { width: 40rem; } /* overview25 */ .cm_overview25 .ovw_list .list_item { width: calc((100% - 7.2rem) / 4); } /* traffic */ .cm_traffic_area .box_title { min-width: 22rem; font-size: 2rem; } .cm_traffic_area .box_title > img { width: 3rem; } .cm_traffic_area2 .box_title > img { width: 5rem; } .cm_text.text3 { font-size: 2.8rem; } .lang_en .page_foundation .mission_area3 .misn_box .misn_title { min-width: 27rem; } /* 교통 */ .lang_en .cm_traffic_area .box_title { min-width: 22rem; } } @media screen and (max-width:1280px) { .cm_overview27 .ovw27_body { gap: 4rem; } /* overview28 */ .cm_overview28 .ovw_item .item_img { right: 2rem; bottom: 2rem; width: 4.6rem; } } @media screen and (max-width:1279px) { .m_visible { visibility: visible; } .m_none { display: none; } .m_block { display: block; } /* 공통 게시판 작성 */ .cm_board_write1 .form_section { display: block; padding: 20px 0; } .cm_board_write1 .form_row { display: flex; flex-direction: column; height: auto; gap: 16px; } .cm_board_write1 .form_row + .form_row { margin-top: 4rem; } .cm_board_write1 .label_box, .cm_board_write1 .input_box { display: block; width: 100%; padding: 0; } .cm_board_write1 .label_box br { display: none; } .cm_board_write1 .form_addable .btn_addable { position: static; } .cm_board_write1 .form_addable .label_box { padding: 0; } .cm_board_write1.label_lg .label_box { width: 100%; } .cm_board_write1 .form_address { display: block; margin-top: 6rem; margin-bottom: 4rem; } .cm_board_write1 .form_address::after { top: -2rem; } .cm_board_write1 .form_address > .form_row:not(.form_addable) { height: auto; } .cm_board_write1 .form_address > .form_row { margin-top: 2rem; } .cm_board_write1 .form_row.row_text { flex-direction: row; height: auto; } .cm_board_write1 .form_row.row_text .label_box, .cm_board_write1 .form_row.row_text .input_box { min-width: 0; padding: 0; font-size: var(--font_size19); } .cm_board_write1 .form_row.row_text .label_box { flex-shrink: 0; width: 10rem; } .cm_chk1 .chk_label { padding-left: 26px; } .cm_chk1 .chk_label:before { width: 20px; height: 20px; } .cm_chk1 input[type=radio] + .chk_label:after { left: 5px; width: 10px; height: 10px; } .form_group { flex-direction: column; } .form_group.static_value .form_content { font-size: 16px; } .form_group.fixed { flex-direction: row; flex-wrap: nowrap; } .form_group.fixed-xl { flex-direction: column; flex-wrap: wrap; } .cm_step_list1 .list_item { flex-direction: column; padding: 1.2rem; } .cm_step_list2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem; } .cm_step_list2 .list_item:nth-child(1) { order: 1; } .cm_step_list2 .list_item:nth-child(2) { order: 2; } .cm_step_list2 .list_item:nth-child(3) { order: 4; } .cm_step_list2 .list_item:nth-child(4) { order: 3; } .cm_step_list2 .list_item:nth-child(5) { order: 5; } .cm_step_list2 .list_item:nth-child(6) { order: 6; } .cm_step_list2 .list_item:nth-child(2):after, .cm_step_list2 .list_item:nth-child(4):after { top: calc(100% + 0.9rem); left: calc(50% - 1.2rem); transform: rotate(90deg); } .cm_step_list2 .list_item:nth-child(3):after { left: -3.4rem; transform: scaleX(-1); } .cm_img_list1.row3 .list_item { width: calc((100% - 2.4rem) / 2); } .cm_img_list1.row4 .list_item { width: calc((100% - 2.4rem) / 2); } .cm_nodata1 .img_nodata1 { width: 75px; } .cm_overview3 .ovw3_box .ovw3_icon { width: 8rem; } .cm_overview3 .ovw3_box .ovw3_icon img { transform: scale(0.85); } .cm_overview8 .ovw8_item { padding-right: 3rem; padding-left: 3rem; } .cm_overview8 .ovw8_item .item_box { width: 37rem; } .cm_overview8 .ovw8_item .item_box .box_other { flex-direction: column; align-items: start; gap: 15px; } .cm_overview8 .ovw8_item .item_box .box_head .title { font-size: 20px; } .cm_overview8 .ovw8_item .form_group { flex-direction: row; } .cm_overview9 .ovw9_detail.show_detail .ovw9_thumb .thumb_btns_area.fixed { bottom: 0; left: 0; width: 100vw; transform: translateX(0); } .cm_overview13 .ovw13_list .item_head { margin-bottom: 2rem; } .cm_overview13.type2 .ovw13_list .ovw13_item { padding: 2.4rem; } .cm_overview15 { grid-template-columns: repeat(1, 1fr); } .cm_overview15 .ovw15_box .number { margin-bottom: 4px; } .cm_overview15 .ovw15_box:nth-child(2) .text_bg { margin-bottom: 1.2rem; } /* overview18 */ .cm_overview18 .ovw_cont.relative .cm_btn_area { position: static; margin-top: 20px; } .cm_overview19 .ovw_item .ovw_desc .cm_dash_list1 { flex-direction: column; } .cm_overview19 .ovw_item .ovw_desc .cm_dash_list1 .list_item:after { display: none; } .cm_overview22 .ovw22_item .ovw22_thumbs { width: 350px; } .cm_overview22 .ovw22_item .ovw22_title { font-size: 2.4rem; } .cm_overview22 .ovw22_item .cm_box.box3 .cm_bul_list1 .list_item ~ .list_item { margin-top: 0.8rem; } /* map */ .cm_map_area2 .map_info .info_cont .info_adds { font-size: 1.9rem; } .cm_map_area2 .map_info .info_cont .info_adds:before { width: 2.6rem; height: 2.6rem; } .cm_map_area2 .map_info .info_number .cm_icon { font-size: 1.9rem; --icon-size: 22; } .cm_map_area2 .map_info .info_number .cm_icon .font-weight-bold { font-size: 1.9rem; } .cm_popup.popup_notice .swiper { min-width: 35.3rem !important; } .cm_popup.popup_notice .swiper-slide { width: 35.3rem !important; } /* 공통 검색 */ .cm_search1 .search_field_group { flex: 1; } .cm_search1 .search_input { width: 100%; } .cm_search1.type2 .search_field_group { flex: none; } /* 공통 검색 */ .cm_search2 .search_filter_group .search_filter_item { flex-direction: column; gap: 8px; } .cm_search2 .search_filter_group .search_filter_item .filter_label { width: 100%; } .cm_search2 .search_filter_group .search_filter_item .filter_content { width: 100%; } .cm_search2 .search_field_group { padding-bottom: 45px; } .cm_search2 .search_field_group .search_category { max-width: 35%; } .cm_search2 .search_field_group .btn_reset { position: absolute; right: 0; bottom: 0; margin: 0; } /* 공통 탭 */ .cm_tab1 .tab_list { flex-wrap: nowrap; overflow: hidden; overflow-x: auto; } .cm_tab1 .tab_list > li { flex-shrink: 0; } .cm_tab1 .tab_list .tab_btn { padding: 8px 16px; } .cm_tab2 .tab_list { flex-wrap: nowrap; overflow: hidden; overflow-x: auto; } .cm_tab2 .tab_list > li { flex-shrink: 0; } .cm_tab2 .tab_list .tab_btn { height: 40px; padding: 5px 16px; } .cm_tab3 .tab_list { flex-wrap: nowrap; overflow: hidden; overflow-x: auto; } .cm_tab3 .tab_list > li { flex-shrink: 0; } .responsible_table { border-top: 2px solid #000; } .responsible_table tr, .responsible_table th, .responsible_table td { display: block; width: 100%; height: auto !important; } .responsible_table thead { display: none; } .responsible_table .m_visible { display: block; color: var(--text-tertiary); } .cm_table1.scroll { overflow: hidden; overflow-x: auto; } .cm_table1.scroll table { width: max-content; min-width: 100%; } .cm_table2.scroll { overflow: hidden; overflow-x: auto; } .cm_table2.scroll table { width: max-content; min-width: 100%; } .cm_table2 th, .cm_table2 td { height: 39px; padding: 8px; } .cm_table2 thead th { height: 39px; padding: 8px; } .cm_table2.responsible_table th, .cm_table2.responsible_table td { text-align: left !important; } .cm_table2.responsible_table th { border-top: 0 !important; } .cm_table2.responsible_table td { border-top: 0 !important; border-bottom: 1px dashed #ddd !important; } .cm_table2.responsible_table td:last-child { border-bottom: 0 !important; } .cm_table2.responsible_table tr { border-bottom: 1px solid #000; } /* header */ .lang_en .header .sitemap_area .sitemap_layer { top: 10rem; height: calc(100dvh - 10rem); } .lang_en .header .header_bg { top: 10rem; height: calc(100dvh - 10rem); } .lang_en .header .sitemap_area .sitemap_layer .sitemap_wrap .sitemap_depth1_wrap .sitemap_depth1 > li > a { font-size: 2rem; } .lang_en .header .sitemap_area .sitemap_layer .sitemap_wrap .sitemap_depth2_wrap .sitemap_depth2 > li > a { font-size: 1.8rem; } .lang_en .header .sitemap_area .sitemap_layer .sitemap_wrap .sitemap_depth3_wrap .sitemap_depth3 > li > a { font-size: 1.6rem; } /* container */ .lang_en #container { padding-top: calc(10rem + 1px); } .lang_en.worldwide .header .sitemap_area .sitemap_layer { top: calc(51px + 10rem); height: calc(100dvh - 10rem - 51px); } .lang_en.worldwide .header .header_bg { top: calc(51px + 10rem); } } @media screen and (max-width:1080px) { .cm_overview27 .ovw27_body { flex-direction: column; } .cm_overview27 .ovw27_body .ovw27_title_area { width: auto; } .cm_overview27 .ovw27_body .ovw27_title_area .cm_btn { margin-top: 2rem; } .cm_overview27.type2 .ovw27_body { align-items: start; gap: 2rem; } /* overview28 */ .cm_overview28 .ovw_item { width: calc((100% - 4rem) / 2); } /* overview27 */ .lang_en .cm_overview27 .ovw27_body .ovw27_title_area { width: 100%; max-width: 100%; } .lang_en .cm_overview27 .ovw27_body .ovw27_title_area .ovw27_title { font-size: 2.6rem; } } @media screen and (max-width:1079px) { :root { --inner_padding: 15px; --col_padding: 5px; --form_height: 50px; --form_height_md: 44px; --form_height_sm: 38px; --border_radius5:5px; --border_radius10:10px; --border_radius15:10px; --border_radius20:10px; --border_radius25:10px; --border_radius30:10px; --border_radius35:10px; --border_radius40:10px; --border_radius45:10px; --border_radius50:10px; } /* basic */ html { font-size: 9px; } .cm_box.box3.custom_check_inner .box_inner { flex-direction: column; align-items: start; } .cm_box.box3.custom_check_inner .box_inner .cm_chk_wrap { justify-content: end; width: 100%; } .form_group.fixed-lg { flex-direction: column; flex-wrap: wrap; } .cm_img_zoom_wrap { position: relative; } .cm_img_zoom_wrap .img_zoom_inner { overflow: auto; } .cm_img_zoom_wrap:before { display: flex; position: absolute; top: 0px; right: 0px; align-items: center; justify-content: center; padding: 5px 10px; padding-right: 30px; background: rgba(0, 0, 0, 0.8) url(../../images/common/icon_zoom.svg) no-repeat right 10px center/14px; content: "이미지 크게 보기"; color: #fff; font-size: 12px; } .cm_img_zoom_wrap.active .img_zoom { min-width: 1000px; } .cm_img_zoom_wrap.active:before { content: "이미지 작게 보기"; } .cm_image.col4 > * { width: calc((100% - clamp(15px, 1.25vw, 24px)) / 3); } /* 공통 공공누리 */ .cm_kogl_info .kogl_info_img img { height: 40px; } .cm_step_list3 { gap: 1.6rem 3.5rem; } .cm_step_list3 .list_item { width: calc((100% - 3.5rem) / 2); } .cm_step_list3 .list_item:after { width: 3.5rem; } .cm_step_list3 .item_box .body { min-height: 10rem; padding: 1.6rem; } .cm_step_list3 .list_item:nth-child(4n+4):after { display: block; } .cm_step_list3 .list_item:nth-child(2n+2):after, .cm_step_list3 .list_item:last-child:after { display: none; } .cm_step_list3.row3 { gap: 1.6rem 3.5rem; } .cm_step_list3.row3 .list_item:after { width: 3.5rem; } .cm_step_list3.row3 .list_item { width: calc((100% - 3.5rem) / 2); } .cm_step_list3.row3 .list_item:nth-child(3n+3):after { display: block; } .cm_step_list3.row3 .list_item:nth-child(2n+2):after, .cm_step_list3.row3 .list_item:last-child:after { display: none; } .cm_overview4 .ovw_title { font-size: 18px; } .cm_overview4 .ovw_desc { margin-top: 30px; } /* overview9 */ .cm_overview9 .ovw9_list > li { width: calc((100% - 48px) / 3); } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_title { font-size: 20px; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info { padding: 24px 16px; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item .item_label { min-width: 100px; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item .item_value.type2 { flex-direction: column; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item .item_value.type2 .cm_overview11 { margin-top: 0; } .cm_overview9 .ovw9_detail.show_detail { flex-direction: column; gap: 0; } .cm_overview9 .ovw9_detail.show_detail .ovw9_thumb { width: 100%; } .cm_overview16 .ovw16_list > li { width: calc((100% - clamp(10px, 2.6041666667vw, 50px)) / 2); } .cm_overview16 .ovw16_list > li:before { display: none; } .cm_overview16 .ovw16_title:before { content: counter(overview-counter) ". "; } /* overview21 */ .cm_overview21 .ovw_item dt { min-width: 10rem; } .cm_overview23 .ovw23_list > li { width: calc((100% - clamp(16px, 1.25vw, 24px)) / 2); } /* overview21 */ .cm_overview24 .ovw_item { padding: 4rem 0; gap: 3rem; } .cm_overview24 .ovw_item .item_swiper { width: 35rem; } .cm_overview24 .ovw_item .item_desc { padding-top: 1rem; } .cm_overview24 .ovw_item .item_desc .item_title { font-size: 2.8rem; } .cm_overview24 .ovw_item .item_desc .item_text .cm_bul_list1 .list_item + .list_item { margin-top: 1.5rem; } .cm_overview24 .ovw_item.type2 .item_swiper { width: 35rem; } /* overview25 */ .cm_overview25 .ovw_util { position: static; margin-bottom: 1.5rem; } .cm_overview25 .ovw_util .cm_dash_list1 { justify-content: flex-end; } .cm_overview25 .ovw_list .list_item { width: calc((100% - 4.8rem) / 3); } .cm_overview25.type2 .ovw_list .list_item { width: calc((100% - 4.8rem) / 3); } /* overview26 */ .cm_overview26 .ovw_head { min-height: 7rem; padding: 2rem; padding-right: 5rem; } .cm_overview26 .ovw_head:after { right: 2rem; width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; } .cm_overview26 .ovw_body { padding: 2rem; } /* map */ /* traffic */ .cm_traffic_area .box_title { min-width: 18rem; } .cm_traffic_area2 .trff_box { padding: 3.5rem 0; } /* 공통 게시판 작성 */ .cm_policy_form .policy_box { padding: 26px 16px; } .privacy_policy .labeling_list_wrap { position: relative; } .privacy_policy .labeling_item_tip { left: 0; width: 100%; height: auto; margin: 0; } .privacy_policy .labeling_item_tip dl { font-size: 12px; word-break: break-all; } .privacy_policy .labeling_item_tip dt { padding: 4px 10px 6px; } .privacy_policy .labeling_item_tip dd { padding: 10px; } .cm_popup.popup_notice .swiper { min-width: 29rem !important; } .cm_popup.popup_notice .swiper-slide { width: 29rem !important; } .cm_search4 { max-width: 100%; } .cm_search4 .period_options { grid-template-columns: repeat(2, 1fr); } .cm_search4 .filter_actions { flex-direction: row; margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd; } .cm_search4 .filter_actions .cm_btn { flex: 1; } .cm_search4 .filter_btn_close { display: block; } /* 공통 탭 */ .cm_tab4 .tab_list { flex-wrap: wrap; } .cm_tab4 .tab_list > li { width: 50%; } .cm_tab4 .tab_list > li .tab_btn { border-top: 0; } .cm_tab4 .tab_list > li:nth-child(2n+2) .tab_btn { border-right: 1px solid var(--border-basic); } .cm_tab4 .tab_list > li:nth-child(-n+2) .tab_btn { border-top: 1px solid var(--border-basic); } .cm_tab1.sticky_tab { position: static; } .cm_table1:not(.scroll) table { display: block; } .cm_table1:not(.scroll) colgroup { display: none; } .cm_table1:not(.scroll) table:not(.table1_inner) > thead { display: none; } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody { display: block; width: 100%; } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding: 15px; gap: 10px 15px; border-bottom: 1px solid var(--border-basic); } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td { display: block; position: relative; height: auto !important; padding: 0; border: none; font-size: 14px; text-align: left !important; } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td:before { margin-right: 5px; content: attr(data-th) ":"; color: var(--text-secondary); white-space: nowrap; } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td[data-th=번호] { display: none; } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td[data-th=제목]:before { display: none; } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td[data-th=항목명]:before { display: none; } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td[data-th=교육명]:before { display: none; } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td.subject { width: 100%; font-weight: bold; font-size: 16px; text-align: left !important; } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td.cm_nodata, .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td.cm_nodata1, .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td.cm_nodata2 { width: 100% !important; padding: 2rem 0; text-align: center !important; } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td.cm_nodata:before, .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td.cm_nodata1:before, .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td.cm_nodata2:before { display: none !important; } .cm_table1:not(.scroll) table:not(.table1_inner) > tbody > tr > td br { display: none; } .cm_table1.annual_schedule:not(.scroll) table:not(.table1_inner) > tbody > tr { padding: 0; gap: 0; } .cm_table1.annual_schedule:not(.scroll) table:not(.table1_inner) > tbody > tr > td:before { display: none; } .cm_table1.annual_schedule:not(.scroll) table:not(.table1_inner) > tbody > tr > .td_month { width: 100%; padding: 10px 20px; border-bottom: 1px solid #ddd; background: #f4f4f4; } .cm_table1.annual_schedule .table1_inner tbody { display: block; } .cm_table1.annual_schedule .table1_inner tr { display: flex; flex-direction: column; padding: 15px; gap: 8px; border-bottom: 1px solid #ddd; } .cm_table1.annual_schedule .table1_inner td { padding: 0; } .cm_table1.annual_schedule .td_content { width: 100%; } .cm_table1.annual_schedule .td_place_inner { flex-direction: column; align-items: stretch; } .cm_table1.annual_schedule .td_place_inner dt { color: #888; } .cm_table1.annual_schedule .td_place_inner dd { margin-top: 10px; } .cm_table1.annual_schedule .td_place_inner .cm_btn { width: 100%; } .cm_table1.annual_schedule .td_place_inner .cm_btn.btn_none.btn_default { background: #f4f4f4; color: #999; } .cm_table4 table { display: block; width: 100%; } .cm_table4 tbody { display: block; width: 100%; } .cm_table4 tbody tr { display: block; width: 100%; border-bottom: 1px solid #000; } .cm_table4 tbody th, .cm_table4 tbody td { display: block; width: 100%; height: auto; padding: 10px 15px; border: none; text-align: left; } .cm_table4 tbody th { color: var(--text-secondary); } .cm_table4 tbody td { padding-bottom: 12px; } .cm_text.text1 { font-size: clamp(20px, 1.25vw, 24px); } .cm_text.text2 { font-size: clamp(16px, 0.9895833333vw, 19px); } .tablet_under_br { display: block; } .editor_content { font-size: 14px; line-height: 1.5; } .editor_content h1 { font-size: 1.6em; } .editor_content h2 { font-size: 1.4em; } .editor_content h3 { font-size: 1.2em; } .editor_content ul, .editor_content ol { padding-left: 24px; } .editor_content .image-style-side, .editor_content .image-style-align-left, .editor_content .image-style-align-right { max-width: 100%; margin: 1em auto; float: none; } /* header */ .lang_en .header .sitemap_area .sitemap_layer { top: 9rem; height: calc(100dvh - 9rem); } .lang_en .header .header_bg { top: 9rem; height: calc(100dvh - 9rem); } /* footer */ .lang_en .footer .footer_address { align-items: center; text-align: center; } .lang_en .page_foundation .mission_area3 .misn_box .misn_title { min-width: 22rem; } /* 교통 */ .lang_en .cm_traffic_area .box_title { min-width: 18rem; } } @media screen and (max-width:1023px) { /* container */ .lang_en #container { padding-top: calc(9rem + 1px); } .lang_en.worldwide .header .sitemap_area .sitemap_layer { top: calc(51px + 9rem); height: calc(100dvh - 9rem - 51px); } .lang_en.worldwide .header .header_bg { top: calc(51px + 9rem); } } @media screen and (max-width:768px) { .cm_overview5 { padding: 0; } .cm_overview5 .ovw5_top { padding: 20px 0; padding-right: 30px; } .cm_overview5 .ovw5_list > li:last-child .ovw5_btm { padding-bottom: 2rem; } .cm_overview5 .ovw5_desc { padding: 25px 20px; padding-left: 50px; } .cm_overview5 .ovw5_desc:after { top: 25px; left: 20px; } .cm_overview27 .ovw27_body .ovw27_title_area .ovw27_title { font-size: 2.7rem; } .cm_overview27 .ovw27_body .ovw27_title_area .ovw27_title br { display: none; } /* overview28 */ .cm_overview28 .ovw_item { width: 100%; } .cm_popup.map_popup .popup_wrap { width: 100%; } .cm_popup.map_popup .popup_content { aspect-ratio: 4/3; } /* header */ .lang_en .header .logo { width: 100%; } .lang_en .header .logo_img { width: clamp(150px, 12.7083333333vw, 244px); } /* overview5 */ .lang_en .cm_overview5 .ovw5_top:before { margin-right: 1rem; } /* map, traffic */ .lang_en .cm_map_area2 .map_info .info_cont .info_adds br { display: none; } .lang_en .cm_traffic_area2 .box_cont .item_desc { gap: 2rem; } .lang_en .cm_traffic_area2 .box_cont .item_desc .desc_item { flex-direction: column; gap: 1rem; } } @media screen and (max-width:767px) { /* basic */ html { font-size: 8px; } .cm_board_detail1 .board_content .editor_content { min-height: auto; } .cm_board_detail2 .board_content .editor_content { min-height: auto; } .cm_board_detail3 .board_content .editor_content { min-height: auto; } /* 공통 게시판 작성 */ .cm_board_write1 .form_section_title { flex-direction: column; align-items: flex-start; min-height: 0; padding: 12px 16px; gap: 8px; } .cm_board_write1 .form_section_title .title_text { font-size: 16px; } .cm_board_write1 .form_section_title .last { display: flex; justify-content: flex-end; width: 100%; gap: 16px; } .cm_box.box4.type2 { padding: 3.2rem 2.4rem; } .cm_btn_area.mobile_type1 { flex-direction: column; align-items: stretch; gap: 10px; } .cm_btn_area.mobile_type1 .btns { display: flex; } .cm_btn_area.mobile_type1 .btns > * { flex: 1; } .cm_btn_area.mobile_type2 { flex-direction: column; align-items: stretch; gap: 10px; } .cm_btn_area.mobile_type2 .btns:last-child { justify-content: flex-end; } .cm_calendar thead th, .cm_calendar tbody td { font-size: var(--font_size12); } .cm_calendar tbody td.today .day_num span { width: 19px; } .cm_calendar .event_list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; } .cm_calendar .event_list > li { height: 6px; } .cm_calendar .event_list .badge_name { display: none; } .cm_calendar .event_list2 { flex-direction: row; flex-wrap: wrap; gap: 4px; } .cm_calendar .event_list2 > li { padding-left: 0; border: none; } .cm_calendar .event_list2 > li > *, .cm_calendar .event_list2 .event_desc { display: none; } .cm_calendar .event_list2 > li:before { display: block; width: 6px; height: 6px; border-radius: 1000px; background-color: #000; content: ""; } .cm_calendar .day_box .btn_more { display: block; } /* 공통 컨텐츠 만족도 조사 */ .cm_content_satisfaction .survey_content { flex-direction: column; align-items: flex-start; margin-top: 16px; gap: 16px; } .cm_content_satisfaction .survey_action { width: 100%; } .cm_content_satisfaction .survey_action .cm_btn { width: 100%; } .cm_form_title { flex-direction: column; align-items: start; } .cm_form_title .form_required { width: 100%; text-align: right; } .form_group .form_content .input_wrap.email { flex-wrap: wrap; max-width: 440px; } .form_group .form_content .input_wrap.email .form_control { flex: 1; } .form_group .form_content .input_wrap.address { width: 100%; max-width: 100%; } .form_group.fixed-md { flex-direction: column; flex-wrap: wrap; } .cm_image.col3 > * { width: calc((100% - clamp(15px, 1.25vw, 24px)) / 2); } .cm_image.col4 > * { width: calc((100% - clamp(15px, 1.25vw, 24px)) / 2); } /* 공통 공공누리 */ .cm_kogl_info .kogl_info_content { flex-direction: column; } .cm_dl1 { flex-direction: column; } .cm_dl1 dt { width: 100%; } .cm_step_list1 { flex-direction: column; } .cm_step_list1 .list_item { flex-direction: row; padding: 15px; border-right: 1px solid var(--border-tertiary); border-bottom: 0; } .cm_step_list1 .list_item:last-child { border-bottom: 1px solid var(--border-tertiary); } .cm_step_list1 .list_item.active + .list_item { border-top: 0; border-left: 1px solid var(--border-tertiary); } .cm_step_list1 .list_item:after { top: calc(100% - 12px); left: calc(50% - 12px); width: 24px; height: 24px; transform: rotate(90deg); background-size: 18px; } .cm_step_list4.type2 .item_desc.relative { padding-right: 1.6rem; } .cm_step_list4.type2 .item_desc.relative .item_btn { position: static; margin-top: 1.5rem; } .cm_nodata1 .img_nodata1 { width: 60px; } .cm_overview1 .ovw1_list > li { width: calc((100% - clamp(15px, 2.0833333333vw, 40px)) / 2); } .cm_overview2 .ovw2_list { flex-direction: column; } .cm_overview3 { flex-direction: column; } .cm_overview3.type2 .ovw3_box .box_inner { flex-wrap: wrap; } .cm_overview3.type2 .ovw3_box .ovw3_btn { width: 100%; text-align: right; } .cm_overview4 { padding: 40px 20px; } .cm_overview4 .ovw_desc br { display: none; } .cm_overview6 .ovw6_box { flex-direction: column; gap: 24px; } .cm_overview6 .ovw6_thumb_area { width: 100%; } .cm_overview6 .ovw6_btn { width: 100%; } .cm_overview7 .ovw7_list > li { width: calc((100% - clamp(15px, 2.0833333333vw, 40px)) / 2); } .cm_overview8 { flex-direction: column; } .cm_overview8 .ovw8_item, .cm_overview8 .ovw8_item:first-child { width: 100%; } .cm_overview8 .ovw8_item:first-child:after { top: 100%; right: auto; left: 0; width: 100%; height: 1px; } .cm_overview8 .ovw8_item .item_box { width: 100%; } .cm_overview8 .ovw8_item .item_box.login_form_box { width: 100%; max-width: 100%; } .cm_overview8 .ovw8_item .item_box.login_form_box .box_content { flex-direction: column; } .cm_overview8 .ovw8_item .item_box.login_form_box .input_area { width: 100%; } .cm_overview8 .ovw8_item .item_box.login_form_box .input_area .form_group { flex-direction: column; align-items: flex-start; } .login_form_box .box_content .input_area .form_group ~ .form_group { margin-top: 1.6rem; } .cm_overview8 .ovw8_item .item_box.login_form_box .input_area .form_group > * { width: 100%; } .cm_overview8 .ovw8_item .item_box.login_form_box .box_content .input_area .form_group .form_label { margin-bottom: 1rem; font-weight: 700; } .cm_overview8 .ovw8_item .item_box.login_form_box .box_content .box_btn { width: 100%; } .cm_overview8 .ovw8_item .item_box.login_form_box .box_content .box_btn .cm_btn.btn_lg { aspect-ratio: none; height: 7rem; } .cm_overview8 .ovw8_item .cm_btn.sns_login_btn { gap: 2rem; } .cm_overview8 .ovw8_item .cm_btn.sns_login_btn .text { flex: none; } /* overview9 */ .cm_overview9 .ovw9_list { gap: 16px; } .cm_overview9 .ovw9_list > li { width: calc((100% - 16px) / 2); } .cm_overview9 .ovw9_list .ovw9_date { font-size: 13px; letter-spacing: -0.8px; } .cm_overview9 .ovw9_detail { flex-direction: column; gap: 24px; } .cm_overview9 .ovw9_detail .ovw9_thumb { width: 100%; } .cm_overview9 .ovw9_detail .ovw9_content { width: 100%; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item .item_label { min-width: 90px; } /* cm_overview10 */ .cm_overview10 { flex-direction: column; gap: 16px; } .cm_overview10 .ovw_btn { width: 100%; } /* cm_overview12 */ .cm_overview12 .ovw12_list .ovw12_item { flex-direction: column; gap: 24px; text-align: center; } .cm_overview12 .ovw12_list .ovw12_item .ovw12_content .item_title { font-size: 16px; } .cm_overview13 .ovw13_list, .cm_overview13.type2 .ovw13_list { grid-template-columns: 1fr; } .cm_overview13 .ovw13_list .item_head .item_title { padding-top: 6px; } .cm_overview13.type2 .ovw13_list .ovw13_item { padding: 4rem; } /* cm_overview14 */ .cm_overview14 { padding: 24px; gap: 8px; } .cm_overview14 .ovw_title { font-size: 20px; text-align: center; } .cm_overview17 .ovw17_list { display: grid; grid-template-columns: repeat(1, 1fr); } .cm_overview19 { flex-direction: column; } .cm_overview20 .ovw20_list > li { width: calc((100% - clamp(16px, 1.25vw, 24px)) / 2); } .cm_overview22 .ovw22_item { flex-direction: column; align-items: center; } .cm_overview22 .ovw22_item ~ .ovw22_item { margin: 0; padding-top: 6rem; } .cm_overview22 .ovw22_item .ovw22_thumbs { width: 100%; max-width: 380px; } .cm_overview22 .ovw22_item .ovw22_content { width: 100%; } .cm_overview23 .ovw23_box { flex-direction: column; text-align: center; } /* overview21 */ .cm_overview24 .ovw_item { flex-direction: column; } .cm_overview24 .ovw_item .item_swiper { width: 100%; } .cm_overview24 .ovw_item .item_swiper .swiper-btn-wrap { margin-top: 1.5rem; } .cm_overview24 .ovw_item .item_desc { width: 100%; padding-top: 0; } .cm_overview24 .ovw_item .item_desc .item_title { font-size: 2.4rem; } .cm_overview24 .ovw_item.type2 .item_swiper { width: 100%; } /* overview25 */ .cm_overview25 .ovw_list .list_item { width: calc((100% - 2.4rem) / 2); } .cm_overview25.type2 .ovw_list .list_item { width: calc((100% - 2.4rem) / 2); } /* map */ .cm_map_area .map_info { flex-direction: column; align-items: flex-start; } .cm_map_area .map_info .info_number { margin-top: 1rem; gap: 4rem; } .cm_map_area .map_info .info_number dl:after { left: -2rem; } .cm_map_area .info_btn { width: 100%; margin-top: 2rem; } .cm_map_area .info_btn .cm_btn { width: 100%; } .cm_map_area .map_box { aspect-ratio: 4/2.5; } .cm_map_area2 .map_info { flex-direction: column; align-items: flex-start; } .cm_map_area2 .map_info .info_number { margin-top: 1rem; gap: 4rem; } .cm_map_area2 .map_info .info_number dl:after { left: -2rem; } .cm_map_area2 .info_btn { width: 100%; margin-top: 2rem; } .cm_map_area2 .info_btn .cm_btn { width: 100%; } .cm_map_area2 .map_box { aspect-ratio: 4/2.5; } /* traffic */ .cm_traffic_area .trff_box { flex-direction: column; padding-top: 0; padding-bottom: 4rem; gap: 0; } .cm_traffic_area .box_title { width: 100%; height: 8.5rem; margin-bottom: 2rem; padding: 1.6rem 2.4rem; border-bottom: 1px solid #ddd; background-color: #f5f5f5; } /* 공통 게시판 작성 */ .cm_policy_form .policy_title { flex-direction: column; align-items: flex-start; min-height: 0; padding: 12px 16px; gap: 8px; } .cm_policy_form .policy_title .title_text { font-size: 16px; } .privacy_policy .labeling_list_wrap th, .privacy_policy .labeling_list_wrap td { padding: 5px; font-size: 12px; } .privacy_policy .labeling_list_wrap .labeling_img { width: 30px; } .privacy_policy .labeling_list_wrap .labeling_img2 { width: 25px; } .privacy_policy .policy_table th, .privacy_policy .policy_table td { padding: 5px; font-size: 12px; } .cm_popup .popup_wrap { width: 100%; } .cm_popup.calendar_popup { z-index: 2025; position: fixed; top: 0; left: 0; width: 100dvw !important; max-width: none !important; height: 100dvh !important; transform: none; } .cm_popup.calendar_popup .popup_wrap { height: 100%; } .cm_popup.calendar_popup .popup_body { width: 100%; max-width: none; height: 100%; } .cm_popup.calendar_popup form { height: 100%; } .cm_popup.calendar_popup .popup_content { height: 100%; max-height: calc(100dvh - 60px); } .cm_popup.popup_notice .popup_header { padding-right: 0; padding-left: 0; } .cm_popup.popup_notice .popup_content { padding: 0; } .cm_popup.popup_notice .swiper { min-width: 27rem !important; } .cm_popup.popup_notice .swiper-slide { width: 27rem !important; } .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl { gap: 1rem; } .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl:before, .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl:after { display: none; } .cm_popup.popup_notice .swiper-btn-wrap .swiper-btn { width: 5rem; height: 5rem; background-size: 1.8rem; } .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl .btn_close { min-height: 5rem; padding: 0 2rem; } .cm_popup.popup_notice .swiper-btn-wrap .swiper_ctrl .btn_close:after { display: none; } /* 공통 검색 */ .cm_search1 .search_wrap { position: relative; flex-direction: column; height: auto; } .cm_search1 .search_field_group { flex-wrap: wrap; height: auto; gap: 5px; border: none; } .cm_search1 .search_category { width: 100%; height: var(--form_height_sm); border: 1px solid var(--border-basic); } .cm_search1 .search_input_wrap { flex: none; width: calc(100% - (var(--form_height_sm) * 2 + 10px)); height: auto; } .cm_search1 .search_input { height: var(--form_height_sm); border: 1px solid var(--border-basic); } .cm_search1 .btn_search { width: var(--form_height_sm); height: var(--form_height_sm); border: 1px solid var(--border-basic); } .cm_search1 .btn_reset { position: absolute; right: 0; bottom: 0; width: var(--form_height_sm); height: var(--form_height_sm); } .cm_search1.type2 .search_category:nth-child(2) { width: calc(100% - var(--form_height_sm) * 2 - 16px); } /* 공통 검색 */ .cm_search2 .search_head { display: block; } .cm_search2 .search_head .head_info { justify-content: flex-end; margin-top: 1rem; } .cm_search2 .search_field_group { flex-direction: column; gap: 8px; } .cm_search2 .search_field_group .search_category { max-width: 100%; } .cm_search2 .search_field_group .search_input_wrap { max-width: 100%; } /* 공통 검색 */ .cm_search3 .search_container { flex-direction: column; } .cm_search3 .search_container .filter_group { flex: 1; } .cm_search3 .search_container .filter_group .cm_chk_wrap { width: 100%; min-height: 35px; } .cm_search3 .search_container .filter_group .cm_chk2 { flex: 1; } .cm_search3 .search_container .filter_group .cm_chk2 .chk_label { width: 100%; } .cm_search3 .search_container .search_input { height: 40px; } .cm_search3 .search_detail .cm_chk_wrap .cm_chk2 .chk_label { height: auto; min-height: 35px; } .cm_search3 .location_item { flex-direction: column; align-items: stretch; width: 100%; } .cm_search3 .cm_date_range .form_control.size-md { height: 35px; } .cm_toolbar { flex-direction: column; align-items: stretch; gap: 10px; } .cm_toolbar .md_full { width: 100%; } .cm_toolbar.type2 { flex-direction: row; } .cm_text.text3 { padding-left: 2rem; font-size: 2.3rem; } .m_under_br { display: block; } .cm_video_wrap1 .player_area .line:nth-child(2), .cm_video_wrap1 .player_area .line:nth-child(3), .cm_video_wrap1 .player_area .line:nth-child(5), .cm_video_wrap1 .player_area .line:nth-child(6) { display: none; } .lang_en .page_foundation .mission_area3 .misn_box .misn_title { min-width: 0; } } @media screen and (max-width:479px) { /* 공통 게시판 작성 */ .cm_board_write1 .form_row .input_box .col-lg-3_5 { width: 100%; } .cm_board_write1 .form_row .input_box .date_col { flex: 1; width: 100%; } .form_group .form_content > .form_control, .form_group .form_content .input_wrap.contain_btn .form_control { flex: 1; width: 100%; max-width: 100%; } .form_group .form_content .input_wrap.address .search_line { flex-wrap: wrap; } .form_group .form_content .input_wrap.address .search_line .form_control:nth-child(1) { width: 100%; } .cm_image.col2 > * { width: 100%; } .cm_image.col3 > * { width: 100%; } .cm_image.col4 > * { width: 100%; } .cm_img_list1 { gap: 1.6rem; } .cm_img_list1.row2 .list_item { width: calc((100% - 1.6rem) / 2); } .cm_img_list1.row3 .list_item { width: calc((100% - 1.6rem) / 2); } .cm_img_list1.row4 .list_item { width: calc((100% - 1.6rem) / 2); } .cm_overview1 .ovw1_list > li { width: 100%; } .cm_overview3.type2 .ovw3_box .ovw3_btn .cm_btn { width: 100%; } .cm_overview7 .ovw7_list > li { width: 100%; } /* overview9 */ .cm_overview9 .ovw9_list > li { width: 100%; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_title { font-size: 17px; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info { padding: 24px 0; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item { gap: 8px; } .cm_overview9 .ovw9_detail .ovw9_content .ovw9_info .info_item .item_label { min-width: 75px; } .cm_overview9 .ovw9_detail.show_detail .ovw9_info_list { grid-template-columns: repeat(1, 1fr); } /* overview18 */ .cm_overview18 { display: block; } .cm_overview18 .ovw_img { display: none; } .cm_overview18 .ovw_cont .ovw_title { font-size: 2rem; } .cm_overview20 .ovw20_list > li { width: 100%; } /* overview21 */ .cm_overview21 { padding: 2.4rem; } .cm_overview21 .ovw_item { flex-direction: column; } .cm_overview23 .ovw23_list > li { width: 100%; } .cm_overview23 .ovw23_box { flex-direction: row-reverse; text-align: left; } /* overview25 */ .cm_overview25 .ovw_list .item_btn .cm_btn.cm_icon:before { display: none; } /* map */ .cm_map_area .map_info .info_number { flex-direction: column; align-items: flex-start; gap: 1.2rem; } .cm_map_area .map_info .info_number dl:after { display: none; } .cm_map_area2 .map_info .info_number { flex-direction: column; align-items: flex-start; gap: 1.2rem; } .cm_map_area2 .map_info .info_number dl:after { display: none; } .cm_map_area2 .map_info .info_number .cm_icon { align-items: center; } .cm_map_area2 .map_info .info_number .cm_icon .font-weight-bold { display: inline; padding-right: 1.6rem; } /* traffic */ .cm_traffic_area .box_cont .box_item + .box_item { margin-top: 4rem; } .cm_traffic_area .box_cont .box_item .cm_bul_list1 > .list_item { flex-direction: column; gap: 1rem; } .cm_traffic_area .box_cont .box_item .cm_bul_list1 > .list_item ~ .list_item { margin-top: 2rem; } .cm_traffic_area2 .box_cont .item_desc { gap: 2.4rem; } .cm_traffic_area2 .box_cont .item_desc .desc_item { flex-direction: column; gap: 1rem; } .cm_traffic_area2 .box_cont .item_desc .desc_item > .cm_badge { width: 100%; } .cm_traffic_area2 .box_cont .item_desc .desc_item > .item_line.type2 { flex-direction: column; } /* 공통 검색 */ .cm_search2.type2 { padding-bottom: 8rem; } .cm_search2.type2 .search_input_wrap { width: 100%; max-width: 100%; } /* 공통 검색 */ .cm_search3 .cm_date_range { flex-direction: column; } .cm_search3 .cm_date_range .form_control.size-md { width: 100%; } } @media print { * { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; color-adjust: exact !important; } html { font-size: 8px !important; } body { font-size: 14px !important; } .quick_menu_area { display: none !important; } .no-print { display: none !important; } .view-print { display: flex !important; } #container { padding-top: 0 !important; } .header, .footer, .sub_page_head, .cm_search1, .cm_paging1 { display: none !important; } .sidebar_nav { display: none !important; } .sub_page_content { padding-right: 30px !important; padding-left: 30px !important; } .sub_page_content > .inner { max-width: none !important; } .cm_kogl_info { display: none !important; } .cm_content_satisfaction { display: none !important; } .art_view_body .artview_board_list .board_list1 .board_item { align-items: start; } .art_view_body .artview_board_list .board_list1 .thumb_area { width: 34rem; } .art_view_body .artview_board_list .board_list2 .board_item { padding-right: 2.4rem; gap: 4rem; } .art_view_body .artview_board_list .board_list2 .board_item .thumb_area { width: 80px; box-shadow: 6px 6px 0 var(--color-point-50-primary); } .art_view_body .artview_board_list .board_list2 .board_item .item_title { margin-bottom: 2rem; } .art_view_body .artview_board_list .board_list2 .board_item .item_btn { height: 46px; } .art_view_body .content_search_area .artview_search_layer { padding-top: 4rem; padding-bottom: 4rem; } .art_view_body .content_search_area .result_total { margin-top: 0 !important; font-size: 17px !important; } }