@charset "UTF-8"; :root { --default_font_size: 10px; --inner: 1440px; --inner_padding: 0; --font_size11:1.1rem; --font_size12:1.2rem; --font_size13:1.3rem; --font_size14:1.4rem; --font_size15:1.5rem; --font_size16:1.6rem; --font_size17:1.7rem; --font_size18:1.8rem; --font_size19:1.9rem; --font_size20:2rem; --font_size21:2.1rem; --font_size22:2.2rem; --font_size23:2.3rem; --font_size24:2.4rem; --font_size25:2.5rem; --font_size26:2.6rem; --font_size27:2.7rem; --font_size28:2.8rem; --font_size29:2.9rem; --font_size30:3rem; --font_size31:3.1rem; --font_size32:3.2rem; --font_size33:3.3rem; --font_size34:3.4rem; --font_size35:3.5rem; --font_size36:3.6rem; --font_size37:3.7rem; --font_size38:3.8rem; --font_size39:3.9rem; --font_size40:4rem; --color1:#000; --color2:#232323; --color3:#333; --color4:#454545; --color5:#666; --color6:#767676; --color7:#8e8e90; --color8:#989898; --color9:#999; --color10:#ddd; --color11:#eee; --color12:#efefef; --color13:#f5f5f5; --color14:#fefefe; --color15:#fff; --cm_color1:#EF5BA1; --cm_color2:#F5B700; --cm_color3:#119E23; --cm_color4:#A696EE; --cm_color5:#2530FF; --cm_color6:#FF3535; } /* basic */ ::selection { background: rgba(13, 132, 78, 0.2); color: #000; } .no-js { opacity: 0; } /* 스크롤바 */ ::-webkit-scrollbar { width: 8px; height: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; background: #ccc; } ::-webkit-scrollbar-track { background: #f4f4f4; } .dragscroll::-webkit-scrollbar { display: none !important; } /* basic */ html, body { min-width: 360px; line-height: 1.5; font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif; letter-spacing: -0.5px; word-wrap: break-word; word-break: break-all; } html { overflow: auto; overflow-x: hidden; font-size: var(--default_font_size); } body { color: #000; font-size: 1.6rem; } /* option layout */ .cm_option { display: flex; z-index: 2; position: relative; align-items: center; justify-content: space-between; width: 100%; } .cm_option .op_left { flex-shrink: 0; justify-content: flex-start; text-align: left; } .cm_option .op_right { flex-shrink: 0; justify-content: flex-end; text-align: right; } .cm_option .btn_area { width: auto; } .cm_option.start { align-items: flex-start; } .cm_option.end { align-items: flex-end; } /* svg animation */ .svg_point { position: absolute; top: 0; right: 0; } .svg_point .cls-1 { fill: #fff; } .svg_point .cls-2 { fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; stroke-dasharray: 173; stroke-dashoffset: 173; transition: stroke-dashoffset 0.3s linear; } .cm_btn:hover .svg_point .cls-2, .cm_tab .tab_list .btn_tab > a:hover .svg_point .cls-2, .cm_tab .tab_list .btn_tab.active > a .svg_point .cls-2, .cm_tab .tab_list .btn_tab.on > a .svg_point .cls-2 { stroke-dashoffset: 0; } /* like, bookmark */ .cm_btn.on .icon_like1:before, .cm_btn.active .icon_like1:before { background-image: url(../../images/common/icon_like02.svg) !important; } .cm_btn.on .icon_bookmark1:before, .cm_btn.active .icon_bookmark1:before { background-image: url(../../images/common/icon_bookmark02.svg) !important; } /* board search */ .board_search { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 3.3rem; gap: 1.2rem; } .board_search .search_item { display: flex; align-items: center; gap: 1.2rem; } .board_search .search_item .form_control { flex-grow: 1; height: 5rem; padding: 0 2rem; border: 1px solid #ddd; border-radius: 1rem; background-color: #fff; font-size: 1.6rem; } .board_search .search_item select.form_control { padding-right: 4rem; } .board_search .search_item .btn_search { flex-shrink: 0; width: 5rem; height: 5rem; border-radius: 1rem; background: #000 url(../../images/common/icon_search02.svg) no-repeat center/2.4rem; font-size: 0; } /* board option */ .board_option { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.4rem; } .board_option > div { display: flex; align-items: center; gap: 2.4rem; } .board_option .op_left { display: flex; align-items: center; } .board_option .op_item { position: relative; font-size: 1.6rem; } .board_option .op_item:after { position: absolute; top: 50%; right: -1.2rem; width: 1px; height: 1.2rem; margin-top: -0.6rem; background-color: #ddd; content: ""; } .board_option .op_item:last-child:after { display: none; } .board_util { display: flex; gap: 20px; } .board_util .util_item { position: relative; font-weight: 500; font-size: 1.5rem; } .board_util .util_item:after { position: absolute; top: 50%; right: -1.2rem; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem; border-radius: 100%; background: #cacaca; content: ""; } .board_util .util_item:last-child:after { display: none; } /* 공통 게시판 리스트 */ .cm_board_list { position: relative; } /* board list1 */ .board_list1.cm_board_list table { width: 100%; table-layout: fixed; } .board_list1.cm_board_list table thead th, .board_list1.cm_board_list table tbody td { padding: 1.5rem; border: 0; background: #fff; text-align: center; } .board_list1.cm_board_list table thead th { height: 7.4rem; border-top: 1px solid #000; border-bottom: 1px solid #000; font-weight: 700; font-size: 1.8rem; } .board_list1.cm_board_list table tbody td { height: 7rem; border-bottom: 1px solid #ddd; font-size: 1.7rem; } .board_list1.cm_board_list table tbody td.subject { text-align: left; } .board_list1.cm_board_list table tbody td.subject > a { display: inline-block; max-width: 100%; overflow: hidden; text-align: left; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } .board_list1.cm_board_list table tbody tr.notice td { border-bottom: 1px solid #000; background: #F4F4F4; } .board_list1.cm_board_list table tbody tr.notice td:first-child { border-left: 1px solid #000; } .board_list1.cm_board_list table tbody tr.notice td:last-child { border-right: 1px solid #000; } .board_list1.cm_board_list table tbody td.subject > a:hover { text-decoration: underline; } /* board list2 */ .board_list2.cm_board_list .list_body { display: flex; flex-wrap: wrap; gap: 6rem 2.4rem; } .board_list2.cm_board_list .list_item { width: calc((100% - 4.8rem) / 3); } .board_list2.cm_board_list .item_box { display: block; } .board_list2.cm_board_list .item_box .item_thumb { position: relative; width: 100%; } .board_list2.cm_board_list .item_box .item_thumb .thumb_box { position: relative; aspect-ratio: 12/6.75; width: 100%; overflow: hidden; border-radius: 12px; background-color: #eee; } .board_list2.cm_board_list .item_box .item_thumb .thumb_box > .img_thumb { display: block; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.5s; } .board_list2.cm_board_list .item_box .item_desc { display: block; width: 100%; margin-top: 2.4rem; } .board_list2.cm_board_list .item_box .item_desc .item_title { display: -webkit-box; height: 5.2rem; font-weight: 700; font-size: 2rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .board_list2.cm_board_list .item_box .item_desc .item_info { margin-top: 2rem; } .board_list2.cm_board_list .item_box .item_desc .item_info dl { display: flex; margin-bottom: 0.8rem; gap: 2.5rem; font-size: 1.6rem; } .board_list2.cm_board_list .item_box .item_desc .item_info dl:last-child { margin-bottom: 0; } .board_list2.cm_board_list .item_box .item_desc .item_info dl dt { position: relative; font-weight: 700; } .board_list2.cm_board_list .item_box .item_desc .item_info dl dt:after { position: absolute; top: 50%; right: -1.25rem; width: 1px; height: 1.2rem; margin-top: -0.6rem; background-color: #ddd; content: ""; } .board_list2.cm_board_list .item_box .item_desc .item_info dl dt:last-child:after { display: none; } .board_list2.cm_board_list .item_box .item_desc .item_info dl dd { color: #333; } .board_list2.cm_board_list .item_box:hover .item_thumb .thumb_box > .img_thumb { transform: scale(1.02); } .board_list2.cm_board_list .item_box:hover .item_desc .item_title { text-decoration: underline; } /* board faq */ .board_faq.cm_board_list { width: 100%; border-top: 1px solid #000; word-break: keep-all; } .board_faq.cm_board_list .list_item { border-bottom: 1px solid #ddd; } .board_faq.cm_board_list .item_head { display: flex; position: relative; align-items: center; min-height: 10rem; padding: 3.2rem; padding-right: 10rem; } .board_faq.cm_board_list .item_head:after { position: absolute; top: 50%; right: 3.2rem; width: 3.6rem; height: 3.6rem; margin-top: -1.8rem; background: url(../../images/common/icon_arr08_down.svg) no-repeat center/2rem; content: ""; transition: background-image 0.2s; } .board_faq.cm_board_list .item_head.close:after { background: url(../../images/common/icon_arr08_up.svg) no-repeat center/2rem; } .board_faq.cm_board_list .item_head .item_title { display: flex; font-weight: 700; font-size: 1.8rem; } .board_faq.cm_board_list .item_head .item_title:before { flex-shrink: 0; margin-right: 2rem; content: "Q"; color: var(--cm_color1); font-weight: 800; font-size: 2.4rem; line-height: 1.1; } .board_faq.cm_board_list .item_body { display: none; padding: 3.2rem 4rem; border-top: 1px solid #ddd; background: #F9F9F9; } .board_faq.cm_board_list .item_body .item_desc { color: #333; line-height: 1.7; } .board_faq.cm_board_list .item_head:hover .item_title > span { text-decoration: underline; } /* board view */ .cm_board_view { padding-bottom: 4.8rem; border-bottom: 1px solid #ddd; word-break: keep-all; } .cm_board_view .board_view_head { position: relative; padding-bottom: 4.8rem; border-bottom: 1px solid #DADADA; } .cm_board_view .board_view_head .view_label { display: flex; justify-content: center; margin-bottom: 2rem; gap: 1rem; } .cm_board_view .board_view_head .view_title { margin-top: 2rem; font-weight: 800; font-size: 3.6rem; line-height: 1.3; text-align: center; } .cm_board_view .board_view_head .view_label + .view_title { margin-top: 0; } .cm_board_view .board_view_head .view_info { display: flex; align-items: center; justify-content: center; margin-top: 3.2rem; gap: 4rem; } .cm_board_view .board_view_head .view_info .info_item { display: flex; position: relative; align-items: center; justify-content: center; gap: 1.2rem; } .cm_board_view .board_view_head .view_info .info_item:after { position: absolute; top: 50%; right: -2rem; width: 1px; height: 1.6rem; margin-top: -0.8rem; background-color: #ddd; content: ""; } .cm_board_view .board_view_head .view_info .info_item:last-child:after { display: none; } .cm_board_view .board_view_head .view_info .info_item dt { font-weight: 700; font-size: 1.8rem; } .cm_board_view .board_view_head .view_info .info_item dd { color: #555; } .cm_board_view .board_view_cont { min-height: 32rem; padding: 4.8rem 0; } .cm_board_view .board_view_file { display: flex; align-items: flex-start; padding: 4rem; border: 1px solid #E8E8EE; border-radius: 10px; background: #F8F8F8; } .cm_board_view .board_view_file .file_title { display: flex; flex-shrink: 0; align-items: center; width: 15rem; font-weight: 800; font-size: 1.8rem; } .cm_board_view .board_view_file .file_title:before { display: block; width: 2.4rem; height: 2.4rem; margin-right: 0.5rem; background: url(../../images/common/icon_file02.svg) no-repeat center/1.5rem; content: ""; } .cm_board_view .board_view_file .file_cont { width: calc(100% - 15rem); padding-top: 0.3rem; } /* editor */ .cm_editor { font-size: 1.6rem; line-height: normal; letter-spacing: 0; word-break: break-all; } .cm_editor * { font-size: inherit; font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif !important; } .cm_editor pre { white-space: break-spaces; word-break: break-all; } .cm_editor em, .cm_editor i { font-style: italic; } .cm_editor strong, .cm_editor b { font-weight: bold; } .cm_editor sup { font-size: smaller; vertical-align: super; } .cm_editor sub { font-size: smaller; vertical-align: sub; } .cm_editor img { max-width: 100% !important; height: auto !important; } .cm_editor iframe { aspect-ratio: 16/9 !important; width: 100% !important; max-width: 100% !important; height: auto !important; } .cm_editor table { max-width: 100%; } .cm_editor table th { padding: 5px; border: 1px solid #666; border-top: 0; border-right: 0; } .cm_editor table th:last-child { border-right: 1px solid #666; } .cm_editor table tr:first-child th { border-top: 1px solid #666; } .cm_editor table tbody td { padding: 5px; border: 1px solid #666; border-top: 0; border-right: 0; } .cm_editor table tbody td:last-child { border-right: 1px solid #666; } .cm_editor table tbody tr:first-child td { border-top: 1px solid #666; } .cm_editor .marker { background-color: Yellow; } /* 공통 박스 */ .cm_box { position: relative; word-break: keep-all; } .cm_box .link_box { display: inline-block; position: relative; width: 100%; height: 100%; } .cm_box .link_box.link1:after { position: absolute; top: 50%; right: 0; width: 9px; height: 17px; transform: translateY(-50%); background: url(../../images/common/icon_arr2_right.svg) no-repeat center/9px; content: ""; } .cm_box.acc_box { position: relative; padding-right: 40px; } .cm_box.acc_box .acc_btn { position: absolute; top: 8px; right: 15px; width: 17px; height: 9px; } .cm_box.acc_box .acc_btn .cm_icon { display: inline-block; width: 17px; } .cm_box.acc_box.acc1 { max-height: 50px; overflow: hidden; } .cm_box.acc_box.acc1.active { max-height: 100%; } .cm_box.acc_box.acc1.active .acc_btn .cm_icon { transform: rotate(180deg); } .box1.cm_box { padding: 4rem; border-radius: 10px; background-color: #F8F8F8; } .box2.cm_box { padding: 4rem; border-radius: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .cm_box_shadow { box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } /* 공통 선 */ .cm_line { width: 100%; height: 1px; margin: 0; padding: 0; border: 0; box-shadow: none; } .cm_line.line1 { background: #ddd; } /* 공통 버튼 */ .cm_btn_area { display: flex; z-index: 2; position: relative; flex-wrap: wrap; align-items: center; gap: 1rem; } .cm_btn_area.fixed { flex-wrap: nowrap; } .cm_btn_area.center { justify-content: center; } .cm_btn_area.right { justify-content: flex-end; } .cm_btn_area.between { justify-content: space-between; } .cm_btn { display: inline-flex; z-index: 1; position: relative; align-items: center; justify-content: center; height: 4.8rem; padding: 0.5rem 2.5rem; overflow: hidden; border: 1px solid #ddd; border-radius: 10px; background-color: #fff; font-weight: 700; line-height: 1.4; text-align: center; vertical-align: baseline; word-break: keep-all; cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s, filter 0.2s; } .cm_btn:hover { text-decoration: underline; } .cm_btn.btn_xs { height: 2.6rem; padding: 0rem 1rem; border-radius: 6px; font-size: 1.5rem; } .cm_btn.btn_sm { height: 3rem; padding: 0.5rem 1.3rem; border-radius: 6px; font-size: 1.5rem; } .cm_btn.btn_xl { height: 7rem; padding: 2rem 6rem; font-size: 2rem; } .cm_btn.btn_circle { width: 5rem; height: 5rem; padding: 1rem; border-radius: 100%; border-color: #fff; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1); text-indent: -9999px; } .cm_btn.btn_round { border-radius: 100px; } .cm_btn.btn_shadow { box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1); } .cm_btn.btn_etc1 { height: auto !important; padding: 0 !important; overflow: visible; border-color: transparent !important; background-color: transparent !important; color: #555 !important; font-size: 1.5rem !important; } .cm_btn.btn_etc1:hover { text-decoration: underline; } .cm_btn.btn_etc2 { width: 5rem !important; height: 5rem !important; padding: 0 !important; overflow: visible; border-radius: 4px !important; font-size: 0 !important; } .cm_btn.btn_etc2 .cm_icon:before { margin: 0 !important; } .cm_btn.btn_etc2.on, .cm_btn.btn_etc2.active { border-color: #000 !important; } .cm_btn.btn_text { width: auto; height: auto !important; padding: 0 !important; border: 0; background: transparent; color: #333; font-size: 1.4rem !important; text-decoration: underline; } .cm_btn.cm_icon { justify-content: space-between; } .cm_btn.cm_icon.notext, .cm_btn.cm_icon.notext > * { text-indent: -9999px; } .btn1.cm_btn { border-color: var(--cm_color1); background-color: var(--cm_color1); color: #fff; } .btn1.cm_btn.border { border-color: var(--cm_color1); background-color: #fff; color: var(--cm_color1); } .btn2.cm_btn { border-color: var(--cm_color2); background-color: var(--cm_color2); color: #333; } .btn2.cm_btn.border { border-color: var(--cm_color2); background-color: #fff; color: var(--cm_color2); } .btn3.cm_btn { border-color: var(--cm_color3); background-color: var(--cm_color3); color: #333; } .btn3.cm_btn.border { border-color: var(--cm_color3); background-color: #fff; color: var(--cm_color3); } .btn4.cm_btn { border-color: var(--cm_color4); background-color: var(--cm_color4); color: #333; } .btn4.cm_btn.border { border-color: var(--cm_color4); background-color: #fff; color: var(--cm_color4); } .btn5.cm_btn { border-color: #000; background-color: #000; color: #fff; } .btn5.cm_btn.border { border-color: #000; background-color: #fff; color: #000; } .btn6.cm_btn { border-color: #DDD; background-color: #ddd; color: #000; } .btn6.cm_btn.border { border-color: #DDD; background-color: #fff; color: #555; } .btn_kakao.cm_btn { border-color: #FAE100; background-color: #FAE100; color: #3B1E1E; font-size: 1.6rem; } .btn_kakao.cm_btn:before { display: block; width: 2.4rem; height: 2.4rem; margin-right: 1rem; background: url(../../images/common/icon_kakao.svg) repeat center/contain; content: ""; } .btn_naver.cm_btn { border-color: #21CB01; background-color: #21CB01; color: #fff; font-size: 1.6rem; } .btn_naver.cm_btn:before { display: block; width: 2.4rem; height: 2.4rem; margin-right: 1rem; background: url(../../images/common/icon_naver.svg) repeat center/contain; content: ""; } /* 공통 컬러 */ .cm_color.color1 { color: var(--cm_color1) !important; } .cm_bg.bg1 { background: var(--cm_color1) !important; } .cm_gradient.gradient1 { background: var(--cm_gradient1) !important; } .cm_color.color2 { color: var(--cm_color2) !important; } .cm_bg.bg2 { background: var(--cm_color2) !important; } .cm_gradient.gradient2 { background: var(--cm_gradient2) !important; } .cm_color.color3 { color: var(--cm_color3) !important; } .cm_bg.bg3 { background: var(--cm_color3) !important; } .cm_gradient.gradient3 { background: var(--cm_gradient3) !important; } .cm_color.color4 { color: var(--cm_color4) !important; } .cm_bg.bg4 { background: var(--cm_color4) !important; } .cm_gradient.gradient4 { background: var(--cm_gradient4) !important; } .cm_color.color5 { color: var(--cm_color5) !important; } .cm_bg.bg5 { background: var(--cm_color5) !important; } .cm_gradient.gradient5 { background: var(--cm_gradient5) !important; } .cm_color.color6 { color: var(--cm_color6) !important; } .cm_bg.bg6 { background: var(--cm_color6) !important; } .cm_gradient.gradient6 { background: var(--cm_gradient6) !important; } .cm_color.color7 { color: var(--cm_color7) !important; } .cm_bg.bg7 { background: var(--cm_color7) !important; } .cm_gradient.gradient7 { background: var(--cm_gradient7) !important; } .cm_color.color8 { color: var(--cm_color8) !important; } .cm_bg.bg8 { background: var(--cm_color8) !important; } .cm_gradient.gradient8 { background: var(--cm_gradient8) !important; } .cm_color.color9 { color: var(--cm_color9) !important; } .cm_bg.bg9 { background: var(--cm_color9) !important; } .cm_gradient.gradient9 { background: var(--cm_gradient9) !important; } .cm_color.color10 { color: var(--cm_color10) !important; } .cm_bg.bg10 { background: var(--cm_color10) !important; } .cm_gradient.gradient10 { background: var(--cm_gradient10) !important; } .cm_color.color11 { color: var(--cm_color11) !important; } .cm_bg.bg11 { background: var(--cm_color11) !important; } .cm_gradient.gradient11 { background: var(--cm_gradient11) !important; } .cm_color.color12 { color: var(--cm_color12) !important; } .cm_bg.bg12 { background: var(--cm_color12) !important; } .cm_gradient.gradient12 { background: var(--cm_gradient12) !important; } .cm_color.color13 { color: var(--cm_color13) !important; } .cm_bg.bg13 { background: var(--cm_color13) !important; } .cm_gradient.gradient13 { background: var(--cm_gradient13) !important; } .cm_color.color14 { color: var(--cm_color14) !important; } .cm_bg.bg14 { background: var(--cm_color14) !important; } .cm_gradient.gradient14 { background: var(--cm_gradient14) !important; } .cm_color.color15 { color: var(--cm_color15) !important; } .cm_bg.bg15 { background: var(--cm_color15) !important; } .cm_gradient.gradient15 { background: var(--cm_gradient15) !important; } .mono_color1 { color: var(--color1) !important; } .mono_bg1 { background: var(--color1) !important; } .mono_color2 { color: var(--color2) !important; } .mono_bg2 { background: var(--color2) !important; } .mono_color3 { color: var(--color3) !important; } .mono_bg3 { background: var(--color3) !important; } .mono_color4 { color: var(--color4) !important; } .mono_bg4 { background: var(--color4) !important; } .mono_color5 { color: var(--color5) !important; } .mono_bg5 { background: var(--color5) !important; } .mono_color6 { color: var(--color6) !important; } .mono_bg6 { background: var(--color6) !important; } .mono_color7 { color: var(--color7) !important; } .mono_bg7 { background: var(--color7) !important; } .mono_color8 { color: var(--color8) !important; } .mono_bg8 { background: var(--color8) !important; } .mono_color9 { color: var(--color9) !important; } .mono_bg9 { background: var(--color9) !important; } .mono_color10 { color: var(--color10) !important; } .mono_bg10 { background: var(--color10) !important; } .mono_color11 { color: var(--color11) !important; } .mono_bg11 { background: var(--color11) !important; } .mono_color12 { color: var(--color12) !important; } .mono_bg12 { background: var(--color12) !important; } .mono_color13 { color: var(--color13) !important; } .mono_bg13 { background: var(--color13) !important; } .mono_color14 { color: var(--color14) !important; } .mono_bg14 { background: var(--color14) !important; } .mono_color15 { color: var(--color15) !important; } .mono_bg15 { background: var(--color15) !important; } /* 공통 폼 */ input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration { display: none; } .form_label { display: flex; align-items: center; width: 100%; font-weight: 700; font-size: 1.6rem; } .form_control { width: 100%; height: 4.8rem; padding: 0.5rem 1.6rem; border: 1px solid #BABABA; border-radius: 8px; background-color: #fff; font-size: 1.5rem; } .form_control:focus-visible { border-color: #000; } .form_control::placeholder { color: #767676; } select.form_control { padding-right: 4rem; background: #fff url(../../images/common/icon_arr08_down.svg) no-repeat right 1.6rem center/1.2rem; } textarea.form_control { height: 15rem; padding: 1.5rem 2rem; } .form_control.form_datepicker { padding-right: 5rem; background: #fff url(../../images/common/icon_calendar02.svg) no-repeat right 1.6rem center/1.8rem; } .form_control[readonly] { border-color: #DDD !important; background-color: #F2F2F2 !important; cursor: default; } .form_mail { position: relative; } .form_mail:before { position: absolute; top: 50%; right: 1.2rem; transform: translateY(-50%); content: "@"; font-weight: 700; font-size: 1.5rem; } .form_mail .form_control { padding-right: 3.5rem; } /* form_group */ .cm_form_area > .form_group + .form_group { margin-top: 3rem; } .cm_form_area .highlight { color: var(--cm_color1) !important; font-weight: 500; } .cm_form_area > .form_group [class^=col] > .form_label { margin-bottom: 1.5rem; } .form_wrap { position: relative; } .form_wrap > .form_control { padding-right: 8rem; } .form_wrap > .form_search { padding-right: 4rem; } .form_wrap > .cm_btn { position: absolute; top: 0.7rem; right: 0.7rem; min-width: 7rem; height: 4rem; padding-right: 1rem; padding-left: 1rem; font-size: 1.3rem; letter-spacing: -1px; } .form_wrap.max > .form_control { padding-right: 11rem; } .form_wrap.max > .cm_btn { min-width: 9.1rem; } .form_wrap > .btn_search { position: absolute; top: 0; right: 0; width: 3rem; height: 5.5rem; overflow: hidden; background: url(../../images/common/icon_search01.svg) no-repeat left center/16px; text-indent: -9999px; } .form_group { display: flex; flex-wrap: wrap; margin: 0 -2rem; } .form_group > [class^=col] { padding-right: 2rem; padding-left: 2rem; } .form_group.type2 { margin: 0 -0.5rem; } .form_group.type2 > [class^=col] { padding-right: 0.5rem; padding-left: 0.5rem; } .form_group .col-text { align-self: center; text-align: center; } .form_group.between { justify-content: space-between !important; } .form_group.end { justify-content: flex-end !important; } .form_group.noCols { margin: 0 !important; } .form_group.fixed { flex-wrap: nowrap; } .form_group.fixed [class^=col] { flex-shrink: 1; } /* ui datepicker */ .ui-datepicker { z-index: 50 !important; width: 320px !important; padding: 0; overflow: hidden; border: 1px solid #ddd; border-radius: 0; background-color: #fff; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1); font-size: 16px; font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif; } .ui-datepicker .ui-datepicker-header { padding: 10px; border: 0; border-bottom: 0; border-radius: 0; background-image: none; background-color: #fff; } .ui-datepicker .ui-datepicker-title { position: relative; margin: 0; line-height: 1; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { z-index: 1; position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; background-position: center; background-repeat: no-repeat; cursor: pointer; } .ui-datepicker .ui-datepicker-prev { left: 15px; background-image: url(../../images/common/icon_arr02_left.svg); } .ui-datepicker .ui-datepicker-next { right: 15px; background-image: url(../../images/common/icon_arr02_right.svg); } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: none; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { border: 0; background-color: transparent; } .ui-datepicker .ui-datepicker-title select { width: 100px; height: 35px; margin: 0 5px; padding: 0 10px; padding-right: 30px; border: 0; background: #fff url(../../images/common/icon_arr_select.svg) no-repeat right 10px center/11px; color: #333; font-weight: 500; font-size: 16px; line-height: 1.5; transition: border-color 0.15s ease-in-out; } .ui-datepicker table { width: calc(100% - 40px); margin: 0 20px 20px; } .ui-datepicker th { height: 34px; padding: 0; border-bottom: 1px solid #ddd; background-color: #fff; color: var(--cm_color1); font-weight: 700; text-align: center; } .ui-datepicker td { height: 34px; padding: 0; border: 0; text-align: center; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { display: block; width: 34px; height: 34px; margin: 0 auto; padding: 0; border: 0; border-radius: 100%; background-image: none; background-color: #fff; line-height: 34px; text-align: center; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { background-color: var(--cm_color1); color: #fff; font-weight: 700; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { background-color: #fff; color: var(--cm_color1); font-weight: 700; } /* form search */ .form_search { display: flex; justify-content: flex-end; width: 100%; gap: 1rem; } .form_search .search_item { display: flex; gap: 1rem; } .form_search .search_item .search_select { display: flex; flex-shrink: 0; gap: 1rem; } .form_search .search_item .search_form_wrap { display: flex; width: 100%; gap: 1rem; } .form_search .search_item .search_form_wrap .form_control.search_form { width: 100%; min-width: 28rem; } .form_search .search_item .search_form_wrap .search_btn { flex-shrink: 0; width: 4.8rem; height: 4.8rem; border-radius: 10px; background: #000 url(../../images/common/icon_search02.svg) no-repeat center/2.4rem; font-size: 0; } .form_search_advanced { z-index: 1; position: relative; padding: 6rem 0; background: #F9F9F9; } .form_search_advanced:after { z-index: -1; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: #F9F9F9; content: ""; } .form_search_advanced .form_group { min-width: 100%; } .form_search_advanced .search_item { display: flex; align-items: flex-start; } .form_search_advanced .search_item + .search_item { margin-top: 3.2rem; } .form_search_advanced .search_item dt { display: flex; flex-shrink: 0; align-items: center; min-width: 16rem; min-height: 4.8rem; padding-right: 2rem; font-weight: 700; font-size: 2rem; } .form_search_advanced .search_item dd { display: flex; align-items: center; width: 100%; min-height: 4.8rem; } .form_search_advanced .search_item dd fieldset { width: 100%; } .form_search_advanced .search_item .form_check { min-height: 4.8rem; } /* form add */ .form_add { display: flex; flex-direction: column; width: 100%; gap: 1.5rem; } .form_add .add_item { display: flex; width: 100%; gap: 1rem; } .form_add .col_form { width: 100%; } .form_add .col_control { display: flex; flex-shrink: 0; gap: 1rem; } .form_add .col_control .btn_ctrl { width: 4.8rem; height: 100%; min-height: 4.8rem; border-radius: 8px; background-position: center; background-repeat: no-repeat; font-size: 0; } .form_add .col_control .btn_add { background-image: url(../../images/common/icon_plus01.svg); background-size: 1.8rem; background-color: #000; } .form_add .col_control .btn_del { background-image: url(../../images/common/icon_delete01.svg); background-size: 1.8rem; background-color: #e1e1e1; } /* form profile thumbnail */ .form_profile { display: flex; align-items: center; gap: 3rem; } .form_profile .prof_img { position: relative; flex-shrink: 0; width: 13rem; overflow: hidden; border-radius: 100%; background: #eee; } .form_profile .prof_img:after { display: block; width: 100%; padding-top: 100%; content: ""; } .form_profile .prof_img > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .form_profile .prof_btn { flex-shrink: 0; } /* form check */ .form_check_area { display: flex; align-items: flex-start; } .form_check_area .check_list { display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: 1.5rem 4rem; } .form_check_area > .form_label { flex-shrink: 0; width: auto; margin: 0; padding-right: 6rem; font-weight: 700; font-size: 1.8rem; } .form_check_area.center { align-items: center; } .form_check_area.type2 .check_list { gap: 1.5rem; } .form_check { display: inline-flex; position: relative; vertical-align: middle; cursor: pointer; user-select: none; } .form_check input[type=checkbox], .form_check input[type=radio] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; background: transparent; -webkit-appearance: checkbox; z-index: 1; opacity: 0; clip: auto; } .form_check input + .form_label { display: flex; z-index: 2; position: relative; align-items: center; height: auto; margin: 0; border-radius: 3px; font-weight: 400; line-height: 1.4; cursor: pointer; user-select: none; } .form_check input:focus-visible + .form_label { outline: 2px dashed #000; } .form_check input + .form_label:before { flex-shrink: 0; background-position: center; background-size: contain; background-repeat: no-repeat; content: ""; } .form_check.notext input + .form_label { font-size: 0 !important; } .form_check.notext input + .form_label:before { margin: 0 !important; } .form_check.check1 input + .form_label { font-size: 1.6rem; } .form_check.check1 input + .form_label:before { width: 2.4rem; height: 2.4rem; margin-right: 0.8rem; background: url(../../images/common/icon_check01.svg) no-repeat center/contain; } .form_check.check1 input[type=radio] + .form_label:before { background: url(../../images/common/icon_radio01.svg) no-repeat center/contain; } .form_check.check1 input:checked + .form_label:before { background: url(../../images/common/icon_check02.svg) no-repeat center/contain; } .form_check.check1 input[type=radio]:checked + .form_label:before { background: url(../../images/common/icon_radio02.svg) no-repeat center/contain; } .form_check.check1 input:disabled + .form_label, .form_check.check1 input:disabled:focus-visible + .form_label { color: #999; cursor: default; } .form_check.check1 input:disabled + .form_label:before, .form_check.check1 input:disabled:focus-visible + .form_label:before, .form_check.check1 input:disabled:checked + .form_label:before, .form_check.check1 input:disabled:focus-visible:checked + .form_label:before { opacity: 0.3; } .form_check.check2 input + .form_label { display: flex; align-items: center; justify-content: center; height: 4.8rem; padding: 0 2.5rem; border: 1px solid #BABABA; border-radius: 8px; background: #fff; color: #A0A0A0; font-weight: 700; font-size: 1.5rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; } .form_check.check2 input:checked + .form_label { border-color: var(--cm_color1); background: var(--cm_color1); color: #fff; } .form_check.check2 input:disabled + .form_label, .form_check.check2 input:disabled:focus-visible + .form_label, .form_check.check2 input:disabled:checked + .form_label, .form_check.check2 input:disabled:focus-visible:checked + .form_label { cursor: default; opacity: 0.5; } /* form file */ .form_file { display: flex; z-index: 1; position: relative; align-items: center; min-height: 6rem; padding: 0 2rem; padding-right: 7rem; overflow: hidden; border: 1px solid #BABABA; border-radius: 8px; background-color: #fff; } .form_file input[type=file] { position: absolute; top: 100%; left: -100%; width: 1px; height: 1px; } .form_file .file_subj { display: flex; z-index: 2; position: relative; align-items: center; width: 100%; padding: 1rem 0; padding-left: 4rem; text-align: left; } .form_file .file_subj:after { position: absolute; top: 1.2rem; left: 0; width: 3rem; height: 1.7rem; background: url(../../images/common/icon_file02.svg) no-repeat center/contain; content: ""; } .form_file .file_subj .file_text { width: 100%; overflow: hidden; color: #444; font-weight: 500; font-size: 1.6rem; text-overflow: ellipsis; white-space: nowrap; } .form_file .file_add { z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; width: 6rem; overflow: hidden; background: url(../../images/common/icon_plus02.svg) no-repeat center/2rem; font-size: 1px; text-indent: -9999px; } .form_file .file_delete { z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; width: 6rem; overflow: hidden; background: url(../../images/common/icon_close03.svg) no-repeat center/2rem; font-size: 1px; text-indent: -9999px; } .form_file_list { width: 100%; } .form_file_list .list_item { position: relative; max-width: 100%; } .form_file_list .list_item + .list_item { margin-top: 1rem; } .form_file_list .file_subj { display: inline-block; position: relative; width: auto; max-width: 100%; padding-right: 3rem; overflow: hidden; color: #666; font-size: 1.5rem; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .form_file_list .file_subj:after { position: absolute; top: 0; right: 0; width: 2.4rem; height: 2.4rem; background: url(../../images/common/icon_download01.svg) no-repeat center/1.7rem; content: ""; } .form_file_list .file_subj:hover { text-decoration: underline; } /* 공통 아이콘 */ .cm_icon { display: inline-flex; position: relative; align-items: flex-start; line-height: 1.6; vertical-align: middle; } .cm_icon:before { display: block; flex-shrink: 0; margin-right: 0.8rem; background-position: center; background-size: contain; background-repeat: no-repeat; content: ""; transition: background-image 0.2s; } .cm_icon.right { flex-direction: row-reverse; } .cm_icon.right:before { margin-right: 0; margin-left: 0.8rem; } .cm_icon.notext, .cm_icon.notext > * { overflow: hidden; text-indent: -9999px; } .cm_icon.notext:before { margin: 0 !important; } .icon_arr1.cm_icon { align-items: center; } .icon_arr1.cm_icon:before { width: 1rem; height: 1.7rem; margin-top: 0; } .icon_arr1.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr01_left.svg); } .icon_arr1.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr01_right.svg); } .icon_arr2.cm_icon { align-items: center; } .icon_arr2.cm_icon:before { width: 1rem; height: 1.7rem; margin-top: 0; } .icon_arr2.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr02_left.svg); } .icon_arr2.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr02_right.svg); } .icon_arr3.cm_icon { align-items: center; } .icon_arr3.cm_icon:before { width: 4.7rem; height: 4.7rem; margin-top: 0; } .icon_arr3.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr03_left.svg); } .icon_arr3.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr03_right.svg); } .icon_arr4.cm_icon { align-items: center; } .icon_arr4.cm_icon:before { width: 1.2rem; height: 1.2rem; margin-top: 0; } .icon_arr4.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr04_left.svg); } .icon_arr4.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr04_right.svg); } .icon_arr5.cm_icon { align-items: center; } .icon_arr5.cm_icon:before { width: 2.4rem; height: 2.4rem; margin-top: 0; } .icon_arr5.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr05_left.svg); } .icon_arr5.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr05_right.svg); } .icon_arr6.cm_icon { align-items: center; } .icon_arr6.cm_icon:before { width: 0.8rem; height: 1.1rem; margin-top: 0; } .icon_arr6.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr06_left.svg); } .icon_arr6.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr06_right.svg); } .icon_arr7.cm_icon { align-items: center; } .icon_arr7.cm_icon:before { width: 0.8rem; height: 1.1rem; margin-top: 0; } .icon_arr7.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr07_left.svg); } .icon_arr7.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr07_right.svg); } .icon_arr8.cm_icon { align-items: center; } .icon_arr8.cm_icon:before { width: 1.2rem; height: 0.9rem; margin-top: 0; } .icon_arr8.cm_icon.arr_up:before { background-image: url(../../images/common/icon_arr08_up.svg); } .icon_arr8.cm_icon.arr_down:before { background-image: url(../../images/common/icon_arr08_down.svg); } .icon_arr9.cm_icon { align-items: center; } .icon_arr9.cm_icon:before { width: 2.4rem; height: 2.4rem; margin-top: 0; } .icon_arr9.cm_icon.arr_up:before { background-image: url(../../images/common/icon_arr09_up.svg); } .icon_arr9.cm_icon.arr_down:before { background-image: url(../../images/common/icon_arr09_down.svg); } .icon_arr10.cm_icon { align-items: center; } .icon_arr10.cm_icon:before { width: 1.2rem; height: 2rem; margin-top: 0; } .icon_arr10.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr10_left.svg); } .icon_arr10.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr10_right.svg); } .icon_arr11.cm_icon { align-items: center; } .icon_arr11.cm_icon:before { width: 2.4rem; height: 2.5rem; margin-top: 0; } .icon_arr11.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr11_left.svg); } .icon_arr11.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr11_right.svg); } .icon_arr12.cm_icon { align-items: center; } .icon_arr12.cm_icon:before { width: 2.4rem; height: 2.5rem; margin-top: 0; } .icon_arr12.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr12_left.svg); } .icon_arr12.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr12_right.svg); } .icon_arr13.cm_icon { align-items: center; } .icon_arr13.cm_icon:before { width: 2.8rem; height: 2.8rem; margin-top: 0; } .icon_arr13.cm_icon.arr_up:before { background-image: url(../../images/common/icon_arr13_up.svg); } .icon_arr13.cm_icon.arr_down:before { background-image: url(../../images/common/icon_arr13_down.svg); } .icon_arr14.cm_icon { align-items: center; } .icon_arr14.cm_icon:before { width: 2.4rem; height: 2.4rem; margin-top: 0; background-image: url(../../images/common/icon_arr14.svg); } .icon_arr15.cm_icon { align-items: center; } .icon_arr15.cm_icon:before { width: 5rem; height: 2.6rem; margin-top: 0; background-image: url(../../images/common/icon_arr15.svg); } .icon_arr16.cm_icon { align-items: center; } .icon_arr16.cm_icon:before { width: 2.4rem; height: 2.4rem; margin-top: 0; } .icon_arr16.cm_icon.arr_up:before { background-image: url(../../images/common/icon_arr16_up.svg); } .icon_arr16.cm_icon.arr_down:before { background-image: url(../../images/common/icon_arr16_down.svg); } .icon_reset.cm_icon { align-items: center; } .icon_reset.cm_icon:before { width: 2.4rem; height: 2.4rem; margin-top: 0rem; background-image: url(../../images/common/icon_reset01.svg); } .icon_file1.cm_icon:before { width: 3.2rem; height: 3.2rem; margin-top: -0.1rem; background-image: url(../../images/common/icon_file01.svg); } .icon_file2.cm_icon:before { width: 1.6rem; height: 2rem; margin-top: -0.1rem; background-image: url(../../images/common/icon_file02.svg); } .icon_file3.cm_icon:before { width: 1.6rem; height: 2rem; margin-top: 0.1rem; background-image: url(../../images/common/icon_file03.svg); } .icon_calendar1.cm_icon { align-items: center; } .icon_calendar1.cm_icon:before { width: 1.8rem; height: 2rem; margin-top: 0rem; background-image: url(../../images/common/icon_calendar01.svg); } .icon_calendar1.cm_icon.icon_sm:before { width: 1.53rem; height: 1.7rem; margin-top: 0rem; background-image: url(../../images/common/icon_calendar01.svg); } .icon_calendar2.cm_icon { align-items: center; } .icon_calendar2.cm_icon:before { width: 1.8rem; height: 2rem; margin-top: 0rem; background-image: url(../../images/common/icon_calendar02.svg); } .icon_calendar2.cm_icon.icon_sm:before { width: 1.53rem; height: 1.7rem; margin-top: 0rem; background-image: url(../../images/common/icon_calendar02.svg); } .icon_calendar3.cm_icon { align-items: center; } .icon_calendar3.cm_icon:before { width: 1.8rem; height: 2rem; margin-top: 0rem; background-image: url(../../images/common/icon_calendar03.svg); } .icon_calendar3.cm_icon.icon_sm:before { width: 1.53rem; height: 1.7rem; margin-top: 0rem; background-image: url(../../images/common/icon_calendar03.svg); } .icon_download1.cm_icon { align-items: center; } .icon_download1.cm_icon:before { width: 1.8rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon_download01.svg); } .icon_download1.cm_icon.icon_sm:before { width: 1.62rem; height: 1.62rem; margin-top: 0rem; background-image: url(../../images/common/icon_download01.svg); } .icon_download2.cm_icon { align-items: center; } .icon_download2.cm_icon:before { width: 1.8rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon_download02.svg); } .icon_download2.cm_icon.icon_sm:before { width: 1.62rem; height: 1.62rem; margin-top: 0rem; background-image: url(../../images/common/icon_download02.svg); } .icon_edit1.cm_icon { align-items: center; } .icon_edit1.cm_icon:before { width: 1.6rem; height: 1.5rem; margin-top: 0rem; background-image: url(../../images/common/icon_edit01.svg); } .icon_edit1.cm_icon.icon_sm:before { width: 1.44rem; height: 1.35rem; margin-top: 0rem; background-image: url(../../images/common/icon_edit01.svg); } .icon_edit2.cm_icon { align-items: center; } .icon_edit2.cm_icon:before { width: 1.6rem; height: 1.5rem; margin-top: 0rem; background-image: url(../../images/common/icon_edit02.svg); } .icon_edit2.cm_icon.icon_sm:before { width: 1.44rem; height: 1.35rem; margin-top: 0rem; background-image: url(../../images/common/icon_edit02.svg); } .icon_bookmark1.cm_icon { align-items: center; } .icon_bookmark1.cm_icon:before { width: 1.5rem; height: 1.9rem; margin-top: 0rem; background-image: url(../../images/common/icon_bookmark01.svg); } .icon_bookmark2.cm_icon { align-items: center; } .icon_bookmark2.cm_icon:before { width: 1.5rem; height: 1.9rem; margin-top: 0rem; background-image: url(../../images/common/icon_bookmark02.svg); } .icon_like1.cm_icon { align-items: center; } .icon_like1.cm_icon:before { width: 2.1rem; height: 1.9rem; margin-top: 0rem; background-image: url(../../images/common/icon_like01.svg); } .icon_like2.cm_icon { align-items: center; } .icon_like2.cm_icon:before { width: 2.1rem; height: 1.9rem; margin-top: 0rem; background-image: url(../../images/common/icon_like02.svg); } .icon_link1.cm_icon { align-items: center; } .icon_link1.cm_icon:before { width: 1.8rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon_link01.svg); } .icon_link1.cm_icon.icon_sm:before { width: 1.53rem; height: 1.53rem; margin-top: 0rem; background-image: url(../../images/common/icon_link01.svg); } .icon_link2.cm_icon { align-items: center; } .icon_link2.cm_icon:before { width: 1.8rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon_link02.svg); } .icon_link2.cm_icon.icon_sm:before { width: 1.53rem; height: 1.53rem; margin-top: 0rem; background-image: url(../../images/common/icon_link02.svg); } .icon_link3.cm_icon { align-items: center; } .icon_link3.cm_icon:before { width: 1.8rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon_link03.svg); } .icon_link3.cm_icon.icon_sm:before { width: 1.53rem; height: 1.53rem; margin-top: 0rem; background-image: url(../../images/common/icon_link03.svg); } .icon_print1.cm_icon { align-items: center; } .icon_print1.cm_icon:before { width: 1.4rem; height: 1.4rem; margin-top: 0rem; background-image: url(../../images/common/icon_print01.svg); } .icon_print2.cm_icon { align-items: center; } .icon_print2.cm_icon:before { width: 1.8rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon_print02.svg); } .icon_plus1.cm_icon { align-items: center; } .icon_plus1.cm_icon:before { width: 1.8rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon_plus01.svg); } .icon_plus1.cm_icon.icon_sm:before { width: 1.53rem; height: 1.53rem; margin-top: 0rem; background-image: url(../../images/common/icon_plus01.svg); } .icon_search1.cm_icon { align-items: center; } .icon_search1.cm_icon:before { width: 1.4rem; height: 1.4rem; margin-top: 0rem; background-image: url(../../images/common/icon_search01.svg); } .icon_search2.cm_icon { align-items: center; } .icon_search2.cm_icon:before { width: 1.8rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon_search02.svg); } .icon_search2.cm_icon.icon_sm:before { width: 1.53rem; height: 1.53rem; margin-top: 0rem; background-image: url(../../images/common/icon_search02.svg); } .icon_time1.cm_icon { align-items: center; } .icon_time1.cm_icon:before { width: 1.6rem; height: 1.6rem; margin-top: 0rem; background-image: url(../../images/common/icon_time01.svg); } .icon_time2.cm_icon { align-items: center; } .icon_time2.cm_icon:before { width: 1.6rem; height: 1.6rem; margin-top: 0rem; background-image: url(../../images/common/icon_time02.svg); } .icon_list1.cm_icon { align-items: center; } .icon_list1.cm_icon:before { width: 2.4rem; height: 1.7rem; margin-top: 0rem; background-image: url(../../images/common/icon_list01.svg); } .icon_info1.cm_icon:before { width: 1.8rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon_info01.svg); } .icon_info2.cm_icon:before { width: 1.8rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon_info02.svg); } .icon_info3.cm_icon:before { width: 1.8rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon_info03.svg); } .icon1.cm_icon { align-items: center; } .icon1.cm_icon:before { width: 2.4rem; height: 2rem; margin-top: 0rem; background-image: url(../../images/common/icon01.svg); background-position: left center; } .icon2.cm_icon { align-items: center; } .icon2.cm_icon:before { width: 2.4rem; height: 1.9rem; margin-top: 0rem; background-image: url(../../images/common/icon02.svg); background-position: left center; } .icon3.cm_icon { align-items: center; } .icon3.cm_icon:before { width: 2.4rem; height: 1.8rem; margin-top: 0rem; background-image: url(../../images/common/icon03.svg); background-position: left center; } .icon4.cm_icon { align-items: center; } .icon4.cm_icon:before { width: 1.6rem; height: 1.6rem; margin-top: 0rem; background-image: url(../../images/common/icon04.svg); } .icon5.cm_icon { align-items: center; } .icon5.cm_icon:before { width: 1.6rem; height: 1.6rem; margin-top: 0rem; background-image: url(../../images/common/icon05.svg); } .icon6.cm_icon { align-items: center; } .icon6.cm_icon:before { width: 1.6rem; height: 1.6rem; margin-top: 0rem; background-image: url(../../images/common/icon06.svg); } .icon7.cm_icon { align-items: center; } .icon7.cm_icon:before { width: 1.6rem; height: 1.6rem; margin-top: 0rem; background-image: url(../../images/common/icon07.svg); } .icon8.cm_icon { align-items: center; } .icon8.cm_icon:before { width: 1.6rem; height: 1.6rem; margin-top: 0rem; background-image: url(../../images/common/icon08.svg); } .icon9.cm_icon { align-items: center; } .icon9.cm_icon:before { width: 1.6rem; height: 1.6rem; margin-top: 0rem; background-image: url(../../images/common/icon09.svg); } .icon10.cm_icon { align-items: center; } .icon10.cm_icon:before { width: 1.2rem; height: 0.9rem; margin-top: 0rem; background-image: url(../../images/common/icon10.svg); } .icon11.cm_icon { align-items: center; } .icon11.cm_icon:before { width: 1.1rem; height: 1rem; margin-top: 0rem; background-image: url(../../images/common/icon11.svg); } .icon12.cm_icon { align-items: center; } .icon12.cm_icon:before { width: 1rem; height: 1rem; margin-top: 0rem; background-image: url(../../images/common/icon12.svg); } .icon13.cm_icon { align-items: center; } .icon13.cm_icon:before { width: 2.4rem; height: 2.4rem; margin-top: 0rem; background-image: url(../../images/common/icon13.svg); background-position: left center; } /* 공통 keyframes */ @keyframes modalFade { 0% { transform: translate3d(0, -10%, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes moveLeft { 0% { transform: translate3d(10%, 0, 0); } 100% { transform: translate3d(-10%, 0, 0); } } @keyframes modalBtm { 0% { transform: translate3d(0, 100%, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes bounce { 0% { transform: translateY(100%); opacity: 0; } 60% { transform: translateY(-10%); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } @keyframes fade-left { 0% { transform: translateX(50px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes fade-up { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes scaleX-in { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @keyframes rotate360 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spring-obj1 { 0% { opacity: 0; } 3% { opacity: 1; } 6% { opacity: 0; } 9% { opacity: 1; } 12%, 100% { opacity: 0; } } @keyframes spring-obj2 { 0% { transform: translateY(-10%) scale(0); opacity: 0; } 20%, 50% { transform: translateY(0) scale(1); opacity: 1; } 70%, 100% { transform: translateY(0) scale(1); opacity: 0; } } @keyframes spring-obj2-1 { 0% { opacity: 0; } 20%, 50% { opacity: 1; } 70%, 100% { opacity: 0; } } @keyframes summer-obj1 { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } } @keyframes summer-obj2 { 0% { clip-path: circle(0% at 50% 50%); opacity: 0; } 10% { clip-path: circle(0% at 50% 50%); opacity: 1; } 90% { clip-path: circle(100% at 50% 50%); opacity: 1; } 100% { clip-path: circle(100% at 50% 50%); opacity: 0; } } @keyframes autumn-obj1 { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3%) rotate(3deg); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes autumn-obj2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes winter-obj1 { 0% { transform: translateY(-5%) rotate(5deg); } 100% { transform: translateY(5%) rotate(-5deg); } } @keyframes winter-obj2 { 0% { transform: translateY(-5%) rotate(-15deg); } 100% { transform: translateY(5%) rotate(5deg); } } @keyframes spring-logo1 { 0% { transform: translateY(20%) rotate(0deg); } 60% { transform: translateY(-10%) rotate(360deg); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes spring-logo2 { 0% { transform: translate(0, -100%) rotate(0deg); opacity: 0; } 20% { transform: translate(15%, -80%) rotate(-10deg); } 40% { transform: translate(-15%, -60%) rotate(20deg); opacity: 1; } 60% { transform: translate(15%, -40%) rotate(-10deg); } 80% { transform: translate(-15%, -20%) rotate(20deg); } 100% { transform: translate(0, 0) rotate(0deg); } } @keyframes summer-logo1 { 0% { transform: translateY(20%) rotate(5deg); } 60% { transform: translateY(-10%) rotate(0deg); } 100% { transform: translateY(0) rotate(-5deg); } } @keyframes autumn-logo1 { 0% { transform: translateY(5%) rotate(0deg); } 60% { transform: translateY(-5%) rotate(10deg); } 100% { transform: translateY(0) rotate(0deg); } } /* 공통 라벨 */ .cm_label { display: inline-flex; align-items: center; justify-content: center; height: 3.5rem; padding: 0 1.7rem; border: 1px solid #ddd; border-radius: 100px; background-color: #f5f5f5; font-weight: 700; font-size: 1.4rem; vertical-align: middle; } .cm_label.status1 { height: 4.2rem; padding: 0.5rem 1.4rem; border-radius: 4px; font-size: 1.6rem; } .cm_label.status1:before { display: block; margin-right: 0.7rem; background-position: center; background-size: contain; background-repeat: no-repeat; content: ""; } .cm_label.status1.label1 { border-color: #D51B78; background: #FFE8F3; color: #D51B78; } .cm_label.status1.label1:before { width: 1.2rem; height: 1.2rem; background-image: url(../../images/common/icon10.svg); } .cm_label.status1.label2 { border-color: #0065C0; background: #D2E7FA; color: #0065C0; } .cm_label.status1.label2:before { width: 1rem; height: 1rem; background-image: url(../../images/common/icon11.svg); } .cm_label.status1.label3 { border-color: #666; background: #D7D7D7; color: #666; } .cm_label.status1.label3:before { width: 1rem; height: 1rem; background-image: url(../../images/common/icon12.svg); } .cm_label.status1.label4 { border-color: #3AB54A; background: #E3FFE6; color: #3AB54A; } .cm_label.status1.label4:before { width: 0.55rem; height: 0.55rem; border-radius: 100%; background: #3AB54A; } .cm_label.status1.label_sm { height: 3rem; padding: 0 1rem; font-size: 1.4rem; } .cm_label.status1.label_sm:before { display: none; } .cm_label.category1 { height: 3.2rem; padding: 0 1rem; border-radius: 100px; font-size: 1.4rem; } .cm_label.category1.label1 { border-color: #AC6AE5; background: #AC6AE5; } .cm_label.category1.label2 { border-color: #48DEFF; background: #48DEFF; } .cm_label.category1.label3 { border-color: #FFC80B; background: #FFC80B; } .cm_label.category1.label4 { border-color: #3AB54A; background: #3AB54A; } .cm_label.category1.label_lg { height: 4.2rem; padding: 0 1.7rem; font-size: 1.6rem; } .cm_label.notice1 { height: 4.2rem; padding: 0 1.7rem; border-radius: 100px; font-size: 1.6rem; } .cm_label.notice1.label1 { border: 1px solid #A696EE; background: #A696EE; } /* 공통 태그 */ .cm_tag { display: flex; flex-wrap: wrap; gap: 0.7rem; } .cm_tag .tag_item { display: flex; align-items: center; max-width: 100%; height: 4rem; padding: 0 1.5rem; padding-bottom: 0.1rem; overflow: hidden; border: solid 1px var(--cm_color2); border-radius: 100px; color: var(--cm_color2); font-size: 1.4rem; text-overflow: ellipsis; white-space: nowrap; } .cm_tag .tag_item:before { margin-right: 2px; content: "#"; } .cm_tag.type2 .tag_item { border-radius: 5px; } .cm_tag.type2 .tag_item:before { display: none; } /* 공통 목록 */ .cm_list { position: relative; } .cm_list .list_body { position: relative; } .cm_list .list_body .list_item { position: relative; } .cm_list .list_body .list_item .item_box { display: flex; position: relative; word-break: keep-all; } .cm_list .list_body .list_item .item_box .item_thumb { position: relative; width: 100%; } .cm_list .list_body .list_item .item_box .item_thumb .thumb_box { position: relative; width: 100%; overflow: hidden; background-color: #ccc; text-align: center; word-break: keep-all; } .cm_list .list_body .list_item .item_box .item_thumb .thumb_box:after { display: block; width: 100%; content: ""; } .cm_list .list_body .list_item .item_box .item_thumb .thumb_box > .thumb_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .cm_list .list_body .list_item .item_box .item_title .item_icon { display: inline-flex; align-items: center; justify-content: center; margin-right: 0.3rem; overflow: hidden; background-position: center; background-size: contain; background-repeat: no-repeat; font-size: 1px; text-indent: -9999px; vertical-align: text-bottom; } .cm_list .list_body .list_item .item_box .item_title .item_new { width: 2.4rem; height: 2.4rem; margin-bottom: 0.1rem; border-radius: 5px; background-color: var(--cm_color1); color: #333; font-weight: 700; font-size: 1.5rem; text-indent: 0; } .cm_list .list_body .list_item .item_box .item_title .item_lock { width: 1.7rem; height: 2rem; margin-bottom: 0.3rem; background-image: url(../../images/common/icon_lock01.svg); } /* list1 */ .list1.cm_list .list_body { display: flex; flex-wrap: wrap; gap: 6rem 2.4rem; } .list1.cm_list .list_body .list_item { width: calc((100% - 7.2rem) / 4); } .list1.cm_list .list_body .list_item .item_box { display: block; } .list1.cm_list .list_body .list_item .item_box .item_thumb { overflow: hidden; border-radius: 10px; transition: box-shadow 0.2s; } .list1.cm_list .list_body .list_item .item_box .item_thumb .thumb_box { background-color: #eee; } .list1.cm_list .list_body .list_item .item_box .item_thumb .thumb_box:after { padding-top: 141.521%; } .list1.cm_list .list_body .list_item .item_box .item_thumb .thumb_label { display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; align-items: center; justify-content: center; background: linear-gradient(0deg, rgba(34, 34, 34, 0.8) 0%, rgba(34, 34, 34, 0.8) 100%); color: #fff; font-weight: 700; font-size: 1.8rem; } .list1.cm_list .list_body .list_item .item_box .item_desc { margin-top: 3.4rem; } .list1.cm_list .list_body .list_item .item_box .item_desc .item_label { display: flex; flex-wrap: wrap; margin-bottom: 2rem; gap: 0.8rem; } .list1.cm_list .list_body .list_item .item_box .item_desc .item_title { display: -webkit-box; max-height: 5.2rem; font-weight: 700; font-size: 2rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .list1.cm_list .list_body .list_item .item_box .item_desc .item_info { margin-top: 2rem; } .list1.cm_list .list_body .list_item .item_box .item_desc .item_info dl { display: flex; margin-bottom: 0.8rem; gap: 2.5rem; font-size: 1.6rem; } .list1.cm_list .list_body .list_item .item_box .item_desc .item_info dl:last-child { margin-bottom: 0; } .list1.cm_list .list_body .list_item .item_box .item_desc .item_info dl dt { position: relative; font-weight: 700; } .list1.cm_list .list_body .list_item .item_box .item_desc .item_info dl dt:after { position: absolute; top: 50%; right: -1.25rem; width: 1px; height: 1.2rem; margin-top: -0.6rem; background-color: #ddd; content: ""; } .list1.cm_list .list_body .list_item .item_box .item_desc .item_info dl dt:last-child:after { display: none; } .list1.cm_list .list_body .list_item .item_box .item_desc .item_info dl dd { color: #333; } .list1.cm_list .list_body .list_item .item_box:hover .item_thumb { box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2); } .list1.cm_list .list_body .list_item .item_box:hover .item_thumb .thumb_box img { transform: scale(1.02); } .list1.cm_list .list_body .list_item .item_box:hover .item_title { text-decoration: underline; } .list1.cm_list .list_body .list_item.end .item_box .item_thumb .thumb_label { display: flex; } .list1.cm_list .list_body .list_item.end .item_box:hover .item_thumb .thumb_label { box-shadow: none !important; } .list1.cm_list .list_body .list_item .item_btn { display: flex; margin-top: 2.5rem; gap: 1.2rem; } .list1.cm_list .list_body .list_item .item_btn .cm_btn { color: #333 !important; } /* 공통 목록 상세 */ .cm_list_detail { position: relative; word-break: keep-all; } /* list1 상세 */ .list_detail1 .detail_head { display: flex; z-index: 1; position: relative; align-items: flex-start; gap: 8rem; } .list_detail1 .detail_head .detail_thumb { z-index: 2; position: relative; flex-shrink: 0; width: 40rem; } .list_detail1 .detail_head .detail_thumb .thumb_box { position: relative; width: 100%; overflow: hidden; border-radius: 10px; background-color: #eee; box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.15); } .list_detail1 .detail_head .detail_thumb .thumb_box:after { display: block; width: 100%; padding-top: 141.521%; content: ""; } .list_detail1 .detail_head .detail_thumb .thumb_box > .thumb_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .list_detail1 .detail_head .detail_overview { position: relative; width: 100%; padding-top: 10rem; } .list_detail1 .detail_head .detail_overview .detail_title_area { display: flex; align-items: flex-start; gap: 2.4rem; } .list_detail1 .detail_head .detail_overview .detail_title_area .detail_label { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 1em; } .list_detail1 .detail_head .detail_overview .detail_title_area .detail_title { margin-top: 0.1rem; font-weight: 800; font-size: 3.2rem; line-height: 1.3; } .list_detail1 .detail_head .detail_overview .detail_desc_area { z-index: 1; position: relative; width: 100%; margin-top: 4rem; padding-bottom: 6.3rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area:after { z-index: -1; position: absolute; top: 0; bottom: 0; left: -28rem; width: 100vw; border-radius: 80px 0 0 80px; background-color: #F7F7F7; content: ""; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info { display: flex; flex-wrap: wrap; margin-bottom: 3.2rem; padding-top: 3rem; padding-bottom: 4.8rem; gap: 2.5rem 0; border-bottom: 1px solid #ddd; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info dl { display: flex; width: 50%; font-size: 1.6rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info dl dt { flex-shrink: 0; min-width: 10rem; font-weight: 800; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info dl dd { width: 100%; padding-right: 5rem; padding-left: 1rem; font-size: 1.7rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_option { display: flex; margin-bottom: 2.8rem; gap: 6rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_option .cm_btn { font-size: 1.7rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_option .cm_btn.on .icon_like1:before, .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_option .cm_btn.active .icon_like1:before { background-image: url(../../images/common/icon_like02.svg) !important; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_option .cm_btn.on .icon_bookmark1:before, .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_option .cm_btn.active .icon_bookmark1:before { background-image: url(../../images/common/icon_bookmark02.svg) !important; } .list_detail1 .detail_contents { margin-top: 10rem; padding-bottom: 6rem; border-bottom: 1px solid #ddd; } .list_detail1 .detail_contents .cm_editor { min-height: 20rem; } .cm_detail_table { position: relative; } .cm_detail_table .cm_table .cm_btn.active { border-color: #000; } .cm_detail_table .calendar_popup { display: none !important; z-index: 3; position: absolute; top: 0; left: 0; border: 1px solid #000; border-radius: 10px; background-color: #fff; box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15); } .cm_detail_table .calendar_popup.active { display: flex !important; } .cm_detail_table .calendar_popup .calendar_box { width: 27rem; height: 29rem; padding: 2rem; } .cm_detail_table .calendar_popup .calendar_box + .calendar_box { border-left: 1px solid #000; } .cm_detail_table .calendar_popup .calendar_box .box_head { display: flex; align-items: center; justify-content: space-between; } .cm_detail_table .calendar_popup .calendar_box .box_head .btn_ctrl { display: block; width: 2.4rem; height: 2.4rem; background-position: center; background-size: 0.8rem; background-repeat: no-repeat; font-size: 0; } .cm_detail_table .calendar_popup .calendar_box .box_head .btn_ctrl.btn_prev { background-image: url(../../images/common/icon_arr06_left.svg); } .cm_detail_table .calendar_popup .calendar_box .box_head .btn_ctrl.btn_next { background-image: url(../../images/common/icon_arr06_right.svg); } .cm_detail_table .calendar_popup .calendar_box .box_head .calendar_title { font-weight: 800; font-size: 1.6rem; } .cm_detail_table .calendar_popup .calendar_box .box_cont .calendar_table { width: 100%; margin-top: 1.4rem; } .cm_detail_table .calendar_popup .calendar_box .box_cont .calendar_table table { width: 100%; border-collapse: collapse; table-layout: fixed; } .cm_detail_table .calendar_popup .calendar_box .box_cont .calendar_table th { height: 3rem; padding: 0.1rem 0; font-size: 1.4rem; text-align: center; } .cm_detail_table .calendar_popup .calendar_box .box_cont .calendar_table th.sun { color: #FF3535; } .cm_detail_table .calendar_popup .calendar_box .box_cont .calendar_table th.sat { color: #2530FF; } .cm_detail_table .calendar_popup .calendar_box .box_cont .calendar_table td { padding: 0.1rem 0; font-size: 1.4rem; text-align: center; } .cm_detail_table .calendar_popup .calendar_box .box_cont .calendar_table td > span { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: 0 auto; border-radius: 100%; } .cm_detail_table .calendar_popup .calendar_box .box_cont .calendar_table td.sun > span { color: #FF3535; } .cm_detail_table .calendar_popup .calendar_box .box_cont .calendar_table td.sat > span { color: #2530FF; } .cm_detail_table .calendar_popup .calendar_box .box_cont .calendar_table td.has_schedule > span { border: 1px solid var(--cm_color3); background-color: #E9FFEC; } .cm_detail_table .calendar_popup .calendar_box .box_cont .calendar_table td.disabled > span { color: #999 !important; } .cm_detail_table .calendar_popup .calendar_box2 { display: flex; flex-direction: column; } .cm_detail_table .calendar_popup .calendar_box2 .box_head { flex-shrink: 0; } .cm_detail_table .calendar_popup .calendar_box2 .box_head .box_title { font-weight: 800; font-size: 1.6rem; } .cm_detail_table .calendar_popup .calendar_box2 .box_cont { height: 100%; margin-top: 1.5rem; overflow: hidden; overflow-y: auto; } .cm_detail_table .calendar_popup .calendar_box2 .box_cont .schedule_list { display: flex; flex-direction: column; gap: 0.1rem; } .cm_detail_table .calendar_popup .calendar_box2 .box_cont .schedule_list .schedule_item { position: relative; padding-left: 1.5rem; color: #333; font-weight: 700; font-size: 1.4rem; line-height: 1.8; } .cm_detail_table .calendar_popup .calendar_box2 .box_cont .schedule_list .schedule_item:before { position: absolute; top: 0.9rem; left: 0; width: 4px; height: 4px; border-radius: 100%; background-color: #777; content: ""; } .cm_detail_table .calendar_popup .btn_close { position: absolute; top: 0.8rem; right: 0.8rem; width: 2.4rem; height: 2.4rem; background: url(../../images/common/icon_close01.svg) no-repeat center/1.6rem; font-size: 0; } /* 공통 달력 목록 */ .cm_list_calendar { display: flex; position: relative; width: 100%; margin-top: 6rem; padding-bottom: 2rem; gap: 4rem; } .cm_list_calendar .calendar_area { position: relative; width: 100%; } .cm_list_calendar .calendar_area .cal_head { display: flex; align-items: center; justify-content: center; gap: 2rem; } .cm_list_calendar .calendar_area .cal_head .btn_ctrl { display: block; width: 5.2rem; height: 5.2rem; border: 1px solid #ddd; border-radius: 100%; background-position: center; background-size: 1.2rem; background-repeat: no-repeat; background-color: #fff; font-size: 0; } .cm_list_calendar .calendar_area .cal_head .btn_ctrl.btn_prev { background-image: url(../../images/common/icon_arr10_left.svg); } .cm_list_calendar .calendar_area .cal_head .btn_ctrl.btn_next { background-image: url(../../images/common/icon_arr10_right.svg); } .cm_list_calendar .calendar_area .cal_head .calendar_title { display: flex; align-items: center; } .cm_list_calendar .calendar_area .cal_head .calendar_title .select_ctrl { width: 14.7rem; height: 5rem; padding: 0 2rem; padding-right: 3.5rem; border: 0; background: #fff url(../../images/common/icon_arr09_down.svg) no-repeat right 0.5rem center/2.4rem; font-weight: 800; font-size: 3.2rem; } .cm_list_calendar .calendar_area .cal_head .calendar_title .select_month { width: 11.8rem; } .cm_list_calendar .calendar_area .cal_body { margin-top: 4rem; } .cm_list_calendar .calendar_area .cal_body .icon_legend { display: flex; align-items: center; } .cm_list_calendar .calendar_area .cal_body .icon_legend:before { display: block; width: 1.6rem; height: 1.6rem; margin-top: -0.1rem; background-position: center; background-size: contain; background-repeat: no-repeat; content: ""; } .cm_list_calendar .calendar_area .cal_body .icon_legend.icon1:before { background-image: url(../../images/common/icon04.svg); } .cm_list_calendar .calendar_area .cal_body .icon_legend.icon2:before { background-image: url(../../images/common/icon05.svg); } .cm_list_calendar .calendar_area .cal_body .icon_legend.icon3:before { background-image: url(../../images/common/icon06.svg); } .cm_list_calendar .calendar_area .cal_body .icon_legend.icon4:before { background-image: url(../../images/common/icon07.svg); } .cm_list_calendar .calendar_area .cal_body .icon_legend.icon5:before { background-image: url(../../images/common/icon08.svg); } .cm_list_calendar .calendar_area .cal_body .icon_legend.icon6:before { background-image: url(../../images/common/icon09.svg); } .cm_list_calendar .calendar_area .cal_body .cal_legend { display: flex; align-items: center; margin-bottom: 2rem; gap: 2rem; } .cm_list_calendar .calendar_area .cal_body .cal_legend .icon_legend { gap: 1.2rem; font-weight: 700; font-size: 1.6rem; } .cm_list_calendar .calendar_area .cal_body .cal_table table { width: 100%; border-top: 2px solid #000; table-layout: fixed; } .cm_list_calendar .calendar_area .cal_body .cal_table table thead th { height: 6rem; padding: 1.5rem; border-bottom: 1px solid #000; background: #FFF2F8; font-weight: 800; font-size: 1.5rem; } .cm_list_calendar .calendar_area .cal_body .cal_table table thead th.sun { color: #FF3535; } .cm_list_calendar .calendar_area .cal_body .cal_table table thead th.sat { color: #2530FF; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td { height: 12rem; padding: 0; border-bottom: 1px solid #ddd; background: #fff; font-weight: 700; font-size: 1.5rem; line-height: 1.6; text-align: left; vertical-align: top; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td.sun { color: #FF3535; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td.sat { color: #2530FF; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td .btn_cal { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; padding: 0.8rem; border: 2px solid transparent; border-radius: 10px; background: transparent; transition: border-color 0.2s, background-color 0.2s; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td .btn_cal .day_number { width: 100%; height: 2.4rem; border-radius: 100%; background-color: transparent; transition: color 0.2s, background-color 0.2s; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td .btn_cal .day_list { width: 100%; margin-top: 0.5rem; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td.active .btn_cal { border-color: #3AB54A; background: #E3FFE6; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td.today .btn_cal .day_number { display: flex; align-items: center; justify-content: center; width: 2.4rem; padding-right: 0.2rem; background: #000; color: #fff; letter-spacing: -1.5px; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td.disabled { background: #F8F8F8; color: #666; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td.disabled .btn_cal { border-color: transparent; background: transparent; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td.disabled .btn_cal .day_number { display: block; width: 100%; background: transparent; color: #666; } .cm_list_calendar .calendar_area .cal_body .cal_table .icon_legend { gap: 0.8rem; font-size: 1.4rem; } .cm_list_calendar .calendar_area .cal_body .cal_table .icon_legend:before { margin-top: -0.2rem; } .cm_list_calendar .list_area { position: relative; flex-shrink: 0; width: 44rem; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.13); } .cm_list_calendar .list_area .list_inner { display: flex; position: absolute; top: 0; left: 0; flex-direction: column; width: 100%; height: 100%; } .cm_list_calendar .list_area .list_head { display: flex; flex-shrink: 0; align-items: center; height: 9rem; padding: 1rem 2.8rem; border-bottom: 1px solid #ddd; } .cm_list_calendar .list_area .list_head .head_title { display: flex; align-items: center; width: 100%; gap: 2rem; font-weight: 800; font-size: 2.4rem; } .cm_list_calendar .list_area .list_head .head_title:before { display: block; width: 5rem; height: 5rem; border-radius: 100%; background: var(--cm_color1) url(../../images/common/icon_calendar03.svg) no-repeat center/1.8rem; content: ""; } .cm_list_calendar .list_area .list_body { display: flex; flex-direction: column; width: 100%; height: calc(100% - 9rem); padding: 1.8rem 1rem; } .cm_list_calendar .list_area .cal_list { width: 100%; height: 100%; padding: 0 1rem; overflow: hidden; overflow-y: auto; } .cm_list_calendar .list_area .cal_list .list_item { padding: 2rem 0; border-bottom: 1px solid #ddd; } .cm_list_calendar .list_area .cal_list .list_item:first-child { padding-top: 0; } .cm_list_calendar .list_area .cal_list .list_item:last-child { padding-bottom: 0; border-bottom: 0; } .cm_list_calendar .list_area .cal_list .list_item .item_box { display: flex; align-items: center; gap: 1.6rem; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb { z-index: 1; position: relative; flex-shrink: 0; width: 14rem; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb .cm_label { z-index: 2; position: absolute; top: 1rem; left: 1rem; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb .thumb_box { z-index: 1; position: relative; width: 100%; overflow: hidden; border-radius: 8px; background-color: #eee; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb .thumb_box:before { display: block; width: 100%; padding-top: 140.72%; content: ""; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb .thumb_box > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb .thumb_label { display: flex; z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; align-items: center; justify-content: center; border-radius: 8px; background: linear-gradient(0deg, rgba(34, 34, 34, 0.8) 0%, rgba(34, 34, 34, 0.8) 100%); color: #fff; font-weight: 700; font-size: 1.4rem; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_overview { width: 100%; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_overview .item_label { margin-bottom: 1.2rem; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_overview .item_label .cm_label { padding-top: 0.1rem; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_overview .item_title { display: -webkit-box; max-height: 4.8rem; font-weight: 800; font-size: 1.6rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_overview .item_date { display: flex; align-items: center; margin-top: 2.5rem; gap: 0.8rem; font-weight: 700; font-size: 1.5rem; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_overview .item_date:before { display: block; flex-shrink: 0; width: 1.8rem; height: 2rem; margin-top: -0.2rem; background: url(../../images/common/icon_calendar01.svg) no-repeat center/contain; content: ""; } .cm_list_calendar .list_area .cal_list .list_item.end .item_box .item_thumb .thumb_label { display: flex; } /* 공통 데이터 없음 */ .cm_nodata { padding: 7rem 4rem; text-align: center; word-break: keep-all; } .cm_nodata .nodata_img { width: 100%; max-width: 47.5rem; } .cm_nodata .nodata_title { margin-top: 1rem; font-weight: 800; font-size: 2rem; } /* 공통 완료 */ .cm_complete { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10rem 4rem; border-radius: 10px; background: #FEF8EC; line-height: 1.6; text-align: center; word-break: keep-all; } .cm_complete .comp_img { max-width: 25rem; } .cm_complete .comp_title { margin-top: 3.2rem; font-weight: 700; font-size: 3.2rem; } .cm_complete .comp_text { margin-top: 1.6rem; color: #555; font-weight: 700; font-size: 2rem; } /* overview1 */ .cm_overview1 { position: relative; word-break: keep-all; } .cm_overview1 .ovw_box { position: relative; padding: 3.2rem; padding-left: 43rem; border-radius: 10px; background: #FEF8EC; } .cm_overview1 .ovw_box .ovw_img { position: absolute; bottom: -2.1rem; left: 4%; width: 28.3rem; } .cm_overview1 .ovw_box .ovw_desc { width: 100%; } .cm_overview1 .ovw_box .ovw_desc .desc_item + .desc_item { margin-top: 2.8rem; } .cm_overview1 .ovw_box .ovw_desc .desc_item dt { font-weight: 700; font-size: 2rem; line-height: 1.3; } .cm_overview1 .ovw_box .ovw_desc .desc_item dd { display: flex; flex-wrap: wrap; margin-top: 1.6rem; gap: 1rem 4rem; color: #555; font-weight: 700; font-size: 1.6rem; line-height: 1.5; } .cm_overview1 .ovw_box .ovw_desc .desc_item dd > span { position: relative; } .cm_overview1 .ovw_box .ovw_desc .desc_item dd > span:after { position: absolute; top: 50%; right: -2rem; width: 1px; height: 1.4rem; margin-top: -0.7rem; background-color: #d6d6d6; content: ""; } .cm_overview1 .ovw_box .ovw_desc .desc_item dd > span:last-child:after { display: none; } /* overview2 */ .cm_overview2 { position: relative; word-break: keep-all; } .cm_overview2 .ovw_box { position: relative; padding: 3.2rem; border-radius: 10px; background: #F8F8F8; } .cm_overview2 .ovw_box .ovw_title { font-weight: 700; font-size: 1.6rem; line-height: 1.5; } .cm_overview2 .ovw_box .ovw_title .cm_icon:before { margin-top: 0.2rem; } .cm_overview2 .ovw_box .ovw_desc { width: 100%; margin-top: 1.5rem; } /* overview3 */ .cm_overview3 { position: relative; word-break: keep-all; } .cm_overview3 .ovw_box { overflow: hidden; border: 1px solid #ddd; border-radius: 10px; background: #fff; line-height: 1.6; } .cm_overview3 .ovw_box .ovw_title { padding: 3.2rem; border-bottom: 1px solid #ddd; background: #F7F7F7; font-weight: 700; font-size: 1.8rem; } .cm_overview3 .ovw_box .ovw_desc { padding: 3.2rem; font-size: 1.8rem; } /* overview4 */ .cm_overview4 { position: relative; word-break: keep-all; } .cm_overview4 .ovw_box { padding: 7rem 15rem; padding-left: 40rem; overflow: hidden; border-radius: 10px; background: url(../../images/common/bg_application01.svg) no-repeat left bottom/32.3rem, url(../../images/common/bg_application02.svg) no-repeat right bottom/32.2rem, #FFF2F8; line-height: 1.6; } .cm_overview4 .ovw_box .ovw_title { font-weight: 700; font-size: 2.4rem; } .cm_overview4 .ovw_box .ovw_title span { font-weight: 800; } .cm_overview4 .ovw_box .ovw_desc { margin-top: 2rem; } .cm_overview4 .icon_arr7.cm_icon.arr_right:before { margin-top: -0.1rem; } /* step1 */ .cm_step1 { display: flex; position: relative; gap: 4.5rem; word-break: keep-all; } .cm_step1 .step_item { position: relative; width: 100%; border-radius: 100%; } .cm_step1 .step_item:before { position: absolute; top: 0; bottom: 0; left: 100%; width: 4.5rem; background: url(../../images/common/icon_arr06_right.svg) no-repeat center/0.8rem; content: ""; } .cm_step1 .step_item:last-child:before { display: none; } .cm_step1 .step_item.highlight { background: var(--cm_color1); color: #fff; } .cm_step1 .step_item .item_title { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--cm_color1); border-radius: 100%; } .cm_step1 .step_item .item_title:after { display: block; width: 100%; padding-top: 100%; content: ""; } .cm_step1 .step_item .item_title > span { display: flex; position: absolute; top: 0; left: 0; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 3rem; font-weight: 700; font-size: 1.6rem; line-height: 1.5; text-align: center; } /* 공통 페이징 */ .cm_paging1 { display: flex; align-items: center; justify-content: center; margin-top: 8rem; gap: 1.2rem; } .cm_paging1 .page_control { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.4rem; height: 4.2rem; overflow: hidden; border-radius: 10px; background-position: center; background-size: contain; background-repeat: no-repeat; font-size: 0; } .cm_paging1 .page_control.first { background-image: url(../../images/common/pg_first.svg); } .cm_paging1 .page_control.prev { background-image: url(../../images/common/pg_prev.svg); } .cm_paging1 .page_control.next { background-image: url(../../images/common/pg_next.svg); } .cm_paging1 .page_control.last { background-image: url(../../images/common/pg_last.svg); } .cm_paging1 .paging_page { display: flex; margin: 0 1.2rem; gap: 0.8rem; } .cm_paging1 .page_link { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; border-radius: 10px; background: #fff; color: #444; font-size: 1.6rem; transition: color 0.2s, background-color 0.2s; } .cm_paging1 .page_link:hover { background: #F4F4F4; } .cm_paging1 .page_link.active { background: #000; color: #fff; font-weight: 700; } /* 상세 페이징 */ .cm_paging2 { display: flex; justify-content: center; margin-top: 4.8rem; gap: 4rem; } .cm_paging2 .item_paging { display: flex; position: relative; flex-direction: column; justify-content: center; width: calc((100% - 4rem) / 2); padding: 2.8rem 2rem; border: 1px solid #ddd; border-radius: 10px; background: #fff; transition: border-color 0.2s; } .cm_paging2 .item_paging:after { position: absolute; top: 50%; width: 6rem; height: 6rem; margin-top: -3rem; border-radius: 100%; background-position: center; background-size: 0.8rem; background-repeat: no-repeat; background-color: #F8F8F8; content: ""; } .cm_paging2 .item_paging.item_prev { padding-left: 12rem; } .cm_paging2 .item_paging.item_prev:after { left: 2rem; background-image: url(../../images/common/icon_arr06_left.svg); } .cm_paging2 .item_paging.item_next { padding-right: 12rem; padding-left: 2rem; text-align: right; } .cm_paging2 .item_paging.item_next:after { right: 2rem; left: auto; background-image: url(../../images/common/icon_arr06_right.svg); } .cm_paging2 .item_paging .item_text { display: block; color: #222; font-weight: 700; font-size: 1.6rem; transition: color 0.2s; } .cm_paging2 .item_paging .item_title { display: block; margin-top: 1.2rem; overflow: hidden; color: #666; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .cm_paging2 .item_paging:hover { border-color: #000; } .cm_paging2 .item_paging:hover .item_text { color: var(--cm_color1); } .cm_paging2 .item_paging.item_disabled { cursor: default; } .cm_paging2 .item_paging.item_disabled .item_text { color: #666; } .cm_paging2 .item_paging.item_disabled:hover { border-color: #ddd; } .cm_paging2 .item_paging.item_disabled:hover .item_text { color: #666; } /* 공통 약관 */ .cm_policy { font-size: 1.6rem; line-height: 1.4; word-break: keep-all; } .cm_policy .plcy_box { padding: 4rem; border-radius: 10px; background: #F8F8F8; line-height: 1.8; } .cm_policy .plcy_title1 { margin-bottom: 1.5rem; font-weight: 700; font-size: 1.8rem; } .cm_policy .plcy_title2 { margin-bottom: 1rem; font-weight: 700; font-size: 1.7rem; } .cm_policy .plcy_list1 > li { position: relative; margin-bottom: 0.4rem; padding-left: 2rem; line-height: 1.5; } .cm_policy .plcy_list1 > li:last-child { margin-bottom: 0; } .cm_policy .plcy_list1 > li > .num { position: absolute; top: -0.01rem; left: 0; } .cm_policy .plcy_list2 > li { position: relative; margin-bottom: 0.4rem; padding-left: 1.5rem; line-height: 1.5; } .cm_policy .plcy_list2 > li:last-child { margin-bottom: 0; } .cm_policy .plcy_list2 > li:after { position: absolute; top: 0.1rem; left: 0; content: "-"; font-weight: 700; } .cm_policy .plcy_list1 > li .plcy_list2 { margin-top: 0.5rem; } .cm_policy .plcy_ovw1 { position: relative; margin-bottom: 0.4rem; padding-left: 2rem; line-height: 1.5; } .cm_policy .plcy_ovw1:after { position: absolute; top: -0.2rem; left: 0; content: "*"; font-weight: 700; } .cm_policy .plcy_ovw1 dt { font-weight: 500; } .cm_policy .plcy_ovw1 dd { margin-top: 0.5rem; } .cm_policy.cm_box { font-size: 1.44rem; } .cm_policy.cm_box > .plcy_scroll { height: 22rem; overflow: hidden; overflow-y: auto; } .cm_policy.cm_box .plcy_title1 { font-size: 1.62rem; } .cm_policy.cm_box .plcy_title2 { font-size: 1.53rem; } /* 공통 팝업 */ .cm_modal { display: none; z-index: 200; position: fixed; top: 0; left: 0; align-items: center; justify-content: center; width: 100%; height: 100vh; } .cm_modal .modal_contents { display: flex; z-index: 2; position: relative; flex-direction: column; width: 94%; max-width: 1024px; max-height: 90vh; margin: auto; overflow: hidden; transform: translateY(10%); border-radius: 20px; background: #fff; animation: modalFade 0.5s ease both; animation-play-state: paused !important; } .cm_modal .modal_contents .modal_head { display: flex; position: relative; flex-shrink: 0; flex-wrap: wrap; align-items: center; padding: 3rem 4rem 2rem; padding-right: 10rem; } .cm_modal .modal_contents .modal_body { height: 100%; padding: 0 4rem 5rem; overflow: hidden; overflow-y: auto; /*scrollbar-gutter: stable; */ text-align: left; } .cm_modal .modal_contents .modal_foot { flex-shrink: 0; padding: 3rem 4rem; } .cm_modal .modal_title { font-weight: 700; font-size: 3rem; line-height: 1.3; text-align: left; } .cm_modal .modal_close { z-index: 5; position: absolute; top: 3rem; right: 4.5rem; width: 2.8rem; height: 2.8rem; background: url(../../images/common/icon_close01.svg) no-repeat center/2rem; color: transparent; font-size: 0; } .cm_modal .modal_bg { z-index: 1; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); } .cm_modal.modal_sm .modal_contents { max-width: 660px; } .cm_modal.modal_lg .modal_contents { max-width: 1170px; } .cm_modal.show { display: flex !important; } .cm_modal.show .modal_contents { animation-play-state: running !important; } .cm_modal.show .modal_contents:focus-visible { outline: 0 dashed #000; outline-offset: -5px; } .cm_modal:focus-visible { outline: none !important; } /* 공통 탭 */ .cm_tab_content { position: relative; } .cm_tab_content .tab_cont { display: none; } .cm_tab_content .tab_cont.active { display: block; } .cm_tab { z-index: 5; position: relative; word-break: keep-all; } .cm_tab .tab_list { display: flex; position: relative; width: 100%; } .cm_tab .tab_list > li { position: relative; } .cm_tab .tab_list > li > a { display: flex; z-index: 1; position: relative; align-items: center; justify-content: center; text-align: center; transition: color 0.2s, background-color 0.2s, border-color 0.2s; } /* tab1 */ .tab1.cm_tab { padding-top: 1.5rem; } .tab1.cm_tab .tab_list { display: flex; flex-wrap: wrap; gap: 1.5rem 1.2rem; } .tab1.cm_tab.fixed .tab_list { flex-wrap: nowrap; } .tab1.cm_tab.fixed .tab_list .btn_tab { width: 100%; } .tab1.cm_tab .tab_list .btn_tab > a { display: flex; position: relative; align-items: center; justify-content: center; height: 5rem; padding: 1rem 3.4rem; border: 1px solid #ddd; border-radius: 100px; background: #fff; font-weight: 700; font-size: 1.6rem; transition: border-color 0.2s, background-color 0.2s; } .tab1.cm_tab .tab_list .btn_tab > a > svg { position: absolute; top: -48%; left: 40%; width: 3.5rem; } .tab1.cm_tab .tab_list .btn_tab.on > a, .tab1.cm_tab .tab_list .btn_tab.active > a { border-color: #000; background: #FFC80B; } /* tab2 */ .tab2.cm_tab .tab_list { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; } .tab2.cm_tab.row3 .tab_list, .tab2.cm_tab.fixed .tab_list { flex-wrap: nowrap; } .tab2.cm_tab.row3 .tab_list .btn_tab, .tab2.cm_tab.fixed .tab_list .btn_tab { width: 100%; } .tab2.cm_tab .tab_list .btn_tab > a { display: flex; position: relative; align-items: center; justify-content: center; height: 5rem; padding: 1.2rem 2rem; border: 1px solid #ddd; border-radius: 10px; background: #fff; color: #333; font-weight: 700; font-size: 1.6rem; transition: color 0.2s, border-color 0.2s; } .tab2.cm_tab .tab_list .btn_tab.on > a, .tab2.cm_tab .tab_list .btn_tab.active > a { border-color: #000; color: #000; font-weight: 800; } /* tab3 */ .tab3.cm_tab .tab_list { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; } .tab3.cm_tab .tab_list .btn_tab > a { display: flex; position: relative; align-items: center; justify-content: center; height: 5rem; padding: 1.2rem 3.4rem; border: 1px solid transparent; border-radius: 100px; background: transparent; font-weight: 700; font-size: 1.8rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; } .tab3.cm_tab .tab_list .btn_tab > a:hover, .tab3.cm_tab .tab_list .btn_tab.on > a, .tab3.cm_tab .tab_list .btn_tab.active > a { border-color: #000; background: #000; color: #fff; font-weight: 800; } /* 공통 테이블 */ .cm_table { width: 100%; } .cm_table table { width: 100%; border-top: 1px solid #000; border-collapse: separate; table-layout: fixed; } .cm_table table th { height: 6rem; padding: 1rem 1.5rem; border: 1px solid #ddd; border-top: 0; background-color: #f6f6f6; color: #444; font-weight: 500; font-size: 1.3rem; line-height: 1.5; text-align: center; } .cm_table table td { height: 6rem; padding: 1rem 1.5rem; border: 1px solid #ddd; border-top: 0; background-color: #fff; color: #222; line-height: 1.5; text-align: center; } .cm_table .nodata { padding: 7rem 0 !important; color: #666; font-size: 1.6rem !important; text-align: center !important; } .hover.cm_table table tbody tr:hover td { background-color: #f8f8f8 !important; } .hover.cm_table table tbody tr:hover .nodata { background-color: #fff !important; } .cm_table.toggle { display: none !important; } .cm_table.toggle.active { display: block !important; } .border-top0 { border-right: 0 !important; } .border-right0 { border-right: 0 !important; } .border-bottom0 { border-right: 0 !important; } .border-left0 { border-right: 0 !important; } .border-top { border-right: 1px solid #ddd !important; } .border-right { border-right: 1px solid #ddd !important; } .border-bottom { border-right: 1px solid #ddd !important; } .border-left { border-right: 1px solid #ddd !important; } .cm_table.auto table { table-layout: auto; } .cm_table.auto .nowrap { white-space: nowrap !important; } .cm_table.center table th, .cm_table.center table td { text-align: center; } .cm_table.left table th, .cm_table.left table td { text-align: left; } .cm_table.table_lg { overflow: auto; } .cm_table.table_lg table { min-width: 1000px; } .cm_table.table_md { overflow: auto; } .cm_table.table_md table { min-width: 768px; } .cm_table.table_sm { overflow: auto; } .cm_table.table_sm table { min-width: 480px; } /* table1 */ .table1.cm_table > table { border-top: 2px solid #000; } .table1.cm_table > table th, .table1.cm_table > table td { position: relative; height: 7rem; padding: 0.8rem; overflow: visible; border: 0; border-bottom: 1px solid #ddd; background: #fff; color: #111; font-size: 1.6rem; } .table1.cm_table > table thead th { background: #FFF2F8; font-weight: 700; } .table1.cm_table > table tbody td { height: 6rem; } .table1.cm_table.hover table tbody tr:hover td { background-color: #F7F7F7 !important; } .table1.cm_table.hover table tbody tr:hover .nodata { background-color: #fff !important; } .table1.cm_table table tbody tr.check_row td { background-color: #F7F7F7 !important; } .table1.cm_table.type2 table tbody td { border-right: 1px solid #ddd; } .table1.cm_table.type2 table tbody td:last-child { border-right: 0; } .table1.cm_table.type2 table tbody td.last { border-right: 1px solid #ddd; } .table1.cm_table .divider_list { display: flex; flex-direction: column; justify-content: center; width: calc(100% + 1.6rem); min-height: calc(100% + 1.6rem); margin: -0.8rem; word-break: keep-all; } .table1.cm_table .divider_list > li { width: 100%; padding: 1rem 1.5rem; border-bottom: 1px solid #ddd; } .table1.cm_table .divider_list > li:last-child { border-bottom: 0; } .table1.cm_table .cm_btn_area { gap: 0.5rem; } .table1.cm_table .cm_btn_area .cm_btn { width: 100%; } /* 공통 타이포그래피 */ .cm_font_size10 { font-size: var(--default_font_size) !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_line_height1 { line-height: 1 !important; } .cm_line_height13 { line-height: 1.3 !important; } .cm_line_height15 { line-height: 1.5 !important; } .cm_line_height18 { line-height: 1.8 !important; } .cm_line_height2 { line-height: 2 !important; } /* title */ .cm_title { position: relative; font-weight: 700; word-break: keep-all; } .cm_title.bul > span { position: relative; } .cm_title.bul > span:after { position: absolute; top: 0; left: 0; background-position: center; background-size: contain; background-repeat: no-repeat; content: ""; } .cm_title + .cm_desc { color: #333; font-size: 1.8rem; } .cm_title.toggle a.active .icon_arr6 { transform: rotate(180deg); } .cm_title.title1 { margin-bottom: 2.8rem; font-size: 3.2rem; } .cm_title.title2 { font-size: 2.8rem; } .cm_title.title2.bul > span:after { top: auto; bottom: 0; left: calc(100% + 0.5rem); width: 1.4rem; height: 1.4rem; background-image: url(../../images/common/icon09.svg); } .cm_title.title3 { font-size: 2rem; } /* split text */ .cm_split { display: flex; flex-wrap: wrap; align-items: center; gap: 4rem; color: #666; } .cm_split.end { justify-content: flex-end; } .cm_split.center { justify-content: center; } .cm_split .split_item { display: inline-block; position: relative; flex-shrink: 0; font-size: 1.5rem; line-height: 1; } .cm_split .split_item:after { position: absolute; top: 50%; right: -2rem; width: 1px; height: 1.4rem; margin-top: -0.7rem; background-color: #d6d6d6; content: ""; } .cm_split .split_item:last-child:after { display: none; } .cm_split .split_item.active { color: #000; font-weight: 500; } /* text guide */ .cm_text_guide { color: #777; font-size: 1.5rem; word-break: keep-all; } .cm_text_guide.bul { position: relative; padding-left: 2.5rem; } .cm_text_guide.bul:before { position: absolute; top: 0.2rem; left: 0; width: 1.8rem; height: 1.8rem; background-position: center; background-size: contain; background-repeat: no-repeat; content: ""; } .cm_text_guide.type1 { padding-left: 2rem; color: #A0A0A0; font-size: 1.6rem; line-height: 1.5; } .cm_text_guide.type1.bul:before { top: 0; content: "※"; } /* bullet */ .cm_bullet > * { position: relative; line-height: 1.4; text-align: left; } .cm_bullet > *:last-child { margin-bottom: 0 !important; } .cm_bullet > *:before { position: absolute; left: 0; content: ""; } .cm_bullet > *.nobul { padding-left: 0 !important; } .cm_bullet > *.nobul:before { display: none !important; } .cm_bullet.nobul > * { padding-left: 0 !important; } .cm_bullet.nobul > *:before { display: none !important; } .cm_bullet .cm_bullet > * { color: #666; } .cm_bullet.bullet1 > * { margin-bottom: 0; padding-left: 1.5rem; color: #333; font-size: 1.5rem; line-height: 1.6; } .cm_bullet.bullet1 > *:before { top: -0.1rem; content: "-"; color: #333; font-weight: 700; } .cm_bullet.bullet2 > * { margin-bottom: 1.2rem; padding-left: 1.3rem; font-size: 1.6rem; line-height: 1.3; } .cm_bullet.bullet2 > *:before { top: 0.6rem; width: 0.5rem; height: 0.5rem; border-radius: 100%; background: var(--cm_color1); content: ""; } .cm_bullet.bullet3 > * { margin-bottom: 1.2rem; padding-left: 1.3rem; color: #333; font-size: 1.7rem; line-height: 1.4; } .cm_bullet.bullet3 > *:before { top: 0.7rem; width: 0.4rem; height: 0.4rem; border-radius: 100%; background: #222; content: ""; } /* 웹접근성 */ *:focus-visible { outline: 2px dashed #000; outline-offset: 2px; transition: none !important; } input:focus, select:focus, textarea:focus { outline: 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; } /* 스크린 리더용 숨김 텍스트 */ .skip { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; } /* 공통 스크립트 */ .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; } @media screen and (max-width:1439px) { :root { --default_font_size: 9px; --inner: 100%; --inner_padding: 40px; } /* form search */ .form_search_advanced:after { left: calc(var(--inner_padding) * -1); width: 100vw; margin-left: 0; } /* tab1 */ .tab1.cm_tab .tab_list .btn_tab > a > svg { top: -56%; } } @media screen and (max-width:1279px) { /* 스크롤바 */ ::-webkit-scrollbar { width: 5px; height: 5px; } /* option layout */ .cm_option.resp { flex-direction: column; } .cm_option.resp .op_left { width: 100%; } .cm_option.resp .op_right { width: 100%; } .cm_option.resp.start { flex-direction: row; justify-content: flex-start; } .cm_option.resp.start .op_left { width: auto; margin-right: 1rem; } .cm_option.resp.start .op_right { width: auto; } .cm_option.resp.end { flex-direction: row; justify-content: flex-end; } .cm_option.resp.end .op_left { width: auto; } .cm_option.resp.end .op_right { width: auto; margin-left: 1rem; } .cm_option.resp.revs { flex-direction: column-reverse; } /* svg animation */ .cm_btn:hover .svg_point .cls-2, .cm_tab .tab_list .btn_tab > a:hover .svg_point .cls-2 { stroke-dashoffset: 173; } /* board list2 */ .board_list2.cm_board_list .item_box:hover { box-shadow: none; } .board_list2.cm_board_list .item_box:hover .item_thumb .thumb_box > .img_thumb { transform: none; } .board_list2.cm_board_list .item_box:hover .item_desc .item_title { text-decoration: none; } /* board view */ .cm_board_view .board_view_head .view_title { font-size: 3rem; } /* 공통 박스 */ .box1.cm_box { padding: 2.5rem 3rem; } .box2.cm_box { padding: 2.5rem 3rem; } /* list1 */ .list1.cm_list .list_body .list_item { width: calc((100% - 4.8rem) / 3); } /* list1 상세 */ .list_detail1 .detail_head .detail_thumb { width: 35rem; } .list_detail1 .detail_head .detail_overview { padding-top: 0; } .list_detail1 .detail_head .detail_overview .detail_title_area { display: block; } .list_detail1 .detail_head .detail_overview .detail_title_area .detail_title { margin-top: 2rem; font-size: 3rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area:after { left: -23rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info { padding-bottom: 3rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info dl { display: block; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info dl dt { min-width: 100%; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info dl dd { margin-top: 0.5rem; padding: 0; } .cm_detail_table .cm_table { overflow: hidden; overflow-x: auto; } .cm_detail_table.active .cm_table { overflow: hidden !important; } .cm_detail_table .cm_table table { min-width: 1280px; } .cm_detail_table .calendar_popup { left: 50% !important; transform: translateX(-50%) !important; } /* 공통 달력 목록 */ .cm_list_calendar .list_area { width: 35rem; } .cm_list_calendar .list_area .cal_list .list_item .item_box { flex-direction: column; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb { width: 100%; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb .thumb_box { height: 25rem; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb .thumb_box:before { display: none; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb .thumb_box > img { object-fit: contain; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_overview .item_date { margin-top: 1.5rem; } /* overview1 */ .cm_overview1 .ovw_box { padding-left: 37rem; } .cm_overview1 .ovw_box .ovw_img { left: 2%; } /* step1 */ .cm_step1 { gap: 3rem; } .cm_step1 .step_item:before { width: 3rem; } .cm_step1 .step_item .item_title > span { padding: 2rem; } /* tab2 */ .tab2.cm_tab.row3 .tab_list { flex-wrap: wrap; } .tab2.cm_tab.row3 .tab_list .btn_tab { width: calc((100% - 3.6rem) / 4); } /* tab3 */ .tab3.cm_tab .tab_list .btn_tab > a { height: 4.5rem; padding: 1.2rem 3rem; font-size: 1.7rem; } } @media screen and (max-width:1023px) { :root { --default_font_size: 8.5px; --inner_padding: 30px; } /* board list2 */ .board_list2.cm_board_list .item_box { border-radius: 10px; } .board_list2.cm_board_list .item_box .item_thumb .thumb_box { border-radius: 10px; } /* board faq */ .board_faq.cm_board_list .item_head { min-height: 7rem; padding: 2.7rem; padding-right: 8rem; } .board_faq.cm_board_list .item_head:after { right: 3rem; width: 3rem; height: 3rem; margin-top: -1.5rem; background: url(../../images/common/icon_arr08_down.svg) no-repeat center/1.4rem; } .board_faq.cm_board_list .item_head.close:after { background: url(../../images/common/icon_arr08_up.svg) no-repeat center/1.4rem; } .board_faq.cm_board_list .item_body { padding: 2.7rem 3rem; } /* board view */ .cm_board_view .board_view_head .view_title { font-size: 2.8rem; } .cm_board_view .board_view_file { display: block; padding: 3rem; } .cm_board_view .board_view_file .file_title { width: 100%; margin-bottom: 2rem; } .cm_board_view .board_view_file .file_title:before { margin-top: -0.5rem; } .cm_board_view .board_view_file .file_cont { width: 100%; padding-top: 0; } /* 공통 버튼 */ .cm_btn { border-radius: 7px; } /* 공통 폼 */ .form_control { border-radius: 7px; } /* list1 상세 */ .list_detail1 .detail_head { gap: 6rem; } .list_detail1 .detail_head .detail_thumb { width: 30rem; } .list_detail1 .detail_head .detail_overview .detail_title_area .detail_title { font-size: 2.6rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area { margin-top: 3rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area:after { left: -20rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info { gap: 2rem 0; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info dl { display: flex; width: 100%; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info dl dt { min-width: 10rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_info dl dd { margin-top: 0; padding: 0; } .list_detail1 .detail_head .detail_overview .detail_desc_area .detail_option { gap: 4rem; } .cm_detail_table .cm_table { overflow: hidden; overflow-x: auto; } .cm_detail_table.active .cm_table { overflow: hidden !important; } .cm_detail_table .cm_table table { min-width: 1280px; } /* 공통 달력 목록 */ .cm_list_calendar { flex-direction: column; } .cm_list_calendar .calendar_area .cal_head { gap: 1.5rem; } .cm_list_calendar .calendar_area .cal_head .btn_ctrl { width: 4.5rem; height: 4.5rem; background-size: 1rem; } .cm_list_calendar .calendar_area .cal_head .calendar_title .select_ctrl { width: 14rem; font-size: 2.6rem; } .cm_list_calendar .calendar_area .cal_head .calendar_title .select_month { width: 11rem; } .cm_list_calendar .list_area { width: 100%; } .cm_list_calendar .list_area .list_inner { position: static; width: 100%; height: auto; } .cm_list_calendar .list_area .list_head { height: 8rem; } .cm_list_calendar .list_area .list_head .head_title { font-size: 2.2rem; } .cm_list_calendar .list_area .list_head .head_title:before { width: 4.5rem; height: 4.5rem; } .cm_list_calendar .list_area .list_body { padding: 2rem; padding-right: 1rem; } .cm_list_calendar .list_area .cal_list { display: flex; flex-wrap: wrap; height: 70vh; padding: 0; padding-right: 1rem; gap: 4rem 2.5rem; } .cm_list_calendar .list_area .cal_list .list_item { width: calc((100% - 3rem) / 2); padding: 0; border: 0; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb .thumb_box { height: 32.5rem; } /* overview4 */ .cm_overview4 .ovw_box { padding: 7rem 3rem; padding-left: 35rem; background: url(../../images/common/bg_application01.svg) no-repeat left bottom/30rem, url(../../images/common/bg_application02.svg) no-repeat right bottom/25rem, #FFF2F8; } /* step1 */ .cm_step1 { flex-wrap: wrap; } .cm_step1 .step_item { width: calc((100% - 9rem) / 4); border-radius: 10px; } .cm_step1 .step_item .item_title { height: 100%; min-height: 9rem; border-radius: 10px; } .cm_step1 .step_item .item_title:after { display: none; } .cm_step1 .step_item .item_title > span { position: static; } /* 상세 페이징 */ .cm_paging2 { gap: 3rem; } .cm_paging2 .item_paging { width: calc((100% - 3rem) / 2); } .cm_paging2 .item_paging:after { width: 5rem; height: 5rem; margin-top: -2.5rem; } .cm_paging2 .item_paging.item_prev { padding-left: 9rem; } .cm_paging2 .item_paging.item_next { padding-right: 9rem; padding-left: 2rem; } /* title */ .cm_title.title1 { margin-bottom: 2.5rem; font-size: 2.8rem; } .cm_title.title2 { font-size: 2.4rem; } .cm_title.title3 { font-size: 1.8rem; } .cm_title + .cm_desc { font-size: 1.6rem; } } @media screen and (max-width:767px) { :root { --default_font_size: 8px; --inner_padding: 25px; } /* option layout */ .cm_option.resp-md { flex-direction: column; } .cm_option.resp-md .op_left { width: 100%; } .cm_option.resp-md .op_right { width: 100%; } .cm_option.resp-md.start { flex-direction: row; justify-content: flex-start; } .cm_option.resp-md.start .op_left { width: auto; margin-right: 1rem; } .cm_option.resp-md.start .op_right { width: auto; } .cm_option.resp-md.end { flex-direction: row; justify-content: flex-end; } .cm_option.resp-md.end .op_left { width: auto; } .cm_option.resp-md.end .op_right { width: auto; margin-left: 1rem; } .cm_option.resp-md.revs { flex-direction: column-reverse; } /* board search */ .board_search .search_item select.form_control { min-width: 20vw; } .board_search .search_item:last-child { width: 100%; } /* board list1 */ .board_list1.cm_board_list table, .board_list1.cm_board_list table tbody, .board_list1.cm_board_list table tbody tr, .board_list1.cm_board_list table tbody td { display: block; width: 100%; height: auto; padding: 0; border: 0; } .board_list1.cm_board_list table colgroup, .board_list1.cm_board_list table thead { display: none; } .board_list1.cm_board_list table { border-top: 2px solid #000; } .board_list1.cm_board_list table tbody tr { display: flex; flex-wrap: wrap; align-items: center; padding: 2rem 2rem 1.5rem; gap: 1rem 1.5rem; border-bottom: 1px solid #ddd; } .board_list1.cm_board_list table tbody td { width: auto; color: #444; } .board_list1.cm_board_list table tbody td.number { display: none; } .board_list1.cm_board_list table tbody td.subject { width: 100%; color: #000; font-weight: 700; font-size: 1.8rem; } .board_list1.cm_board_list table tbody td.file { order: 4; } .board_list1.cm_board_list table tbody td.date { order: 3; } .board_list1.cm_board_list table tbody td .icon_file1:before { width: 2.56rem; height: 2.56rem; } .board_list1.cm_board_list table tbody tr.notice { background: #F4F4F4; } .board_list1.cm_board_list table tbody tr.notice td { border: 0 !important; background: #F4F4F4; } .board_list1.cm_board_list table tbody tr.notice td.number { display: block; color: #000; } .board_list1.cm_board_list table tbody tr.notice td.subject { width: calc(100% - 8rem); } /* board list2 */ .board_list2.cm_board_list .list_item { width: calc((100% - 2.4rem) / 2); } /* board faq */ .board_faq.cm_board_list .item_head { padding: 2.5rem; padding-right: 7rem; } .board_faq.cm_board_list .item_head:after { right: 2rem; } .board_faq.cm_board_list .item_head .item_title:before { margin-right: 1.5rem; font-size: 2.2rem; } .board_faq.cm_board_list .item_body { padding: 2.5rem 3rem; } /* board view */ .cm_board_view { padding-bottom: 4rem; } .cm_board_view .board_view_head { padding-bottom: 3rem; } .cm_board_view .board_view_head .view_title { font-size: 2.4rem; } .cm_board_view .board_view_head .view_info { margin-top: 2rem; } .cm_board_view .board_view_head .view_info .info_item dt { font-size: 1.4rem; } .cm_board_view .board_view_head .view_info .info_item dd { font-size: 1.4rem; } .cm_board_view .board_view_file .file_title { font-size: 1.7rem; } /* form_group */ .form_group { display: flex; flex-wrap: wrap; margin: 0 -1rem; } .form_group > [class^=col] { padding-right: 1rem; padding-left: 1rem; } .form_group.type2 { margin: 0 -0.5rem; } .form_group.type2 > [class^=col] { padding-right: 0.5rem; padding-left: 0.5rem; } /* form search */ .form_search .search_item { width: 100%; } .form_search_advanced { padding: 3rem 0 4rem; } .form_search_advanced .search_item { flex-direction: column; } .form_search_advanced .search_item + .search_item { margin-top: 2.5rem; } .form_search_advanced .search_item dt { width: 100%; min-height: 0; margin-bottom: 1.5rem; } .form_search_advanced .search_item dd { min-height: 0; } .form_search_advanced .search_item .form_check { min-height: 0; } /* form check */ .form_check_area { flex-direction: column; } .form_check_area .check_list { width: 100%; gap: 1rem 2rem; } .form_check_area > .form_label { width: 100%; margin-bottom: 1.5rem; padding-right: 0; } .form_check.check1 input + .form_label:before { width: 2.6rem; height: 2.6rem; } /* form file */ .form_file_list .list_item + .list_item { margin-top: 0.5rem; } /* 공통 라벨 */ .cm_label.status1 { height: 4rem; padding: 0.2rem 1.2rem; font-size: 1.5rem; } .cm_label.notice1 { height: 3.5rem; padding: 0 1.5rem; font-size: 1.5rem; } /* 공통 태그 */ .cm_tag .tag_item { height: 3.6rem; padding: 0 1.2rem; padding-bottom: 0; } /* list1 */ .list1.cm_list .list_body .list_item { width: calc((100% - 2.4rem) / 2); } /* list1 상세 */ .list_detail1 .detail_head { display: block; } .list_detail1 .detail_head .detail_thumb { width: 100%; max-width: 100%; } .list_detail1 .detail_head .detail_thumb .thumb_box { height: 59rem; } .list_detail1 .detail_head .detail_thumb .thumb_box:after { display: none; } .list_detail1 .detail_head .detail_thumb .thumb_box > .thumb_img { object-fit: contain; } .list_detail1 .detail_head .detail_overview { margin-top: 4rem; } .list_detail1 .detail_head .detail_overview .detail_title_area .detail_title { font-size: 2.4rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area { padding-bottom: 4rem; } .list_detail1 .detail_head .detail_overview .detail_desc_area:after { left: -25px; width: 100vw; border-radius: 0; } .cm_detail_table .calendar_popup { border-radius: 10px 0 10px 10px; } .cm_detail_table .calendar_popup.active { display: block !important; } .cm_detail_table .calendar_popup .calendar_box + .calendar_box { border: 0; border-top: 1px solid #000; } .cm_detail_table .calendar_popup .btn_close { top: -1px; right: auto; left: calc(100% + 1px); width: 4rem; height: 4rem; border: 1px solid #000; border-left: 0; background-color: #fff; } /* 공통 데이터 없음 */ .cm_nodata { padding: 5rem 4rem; } .cm_nodata .nodata_img { max-width: 35rem; } .cm_nodata .nodata_title { margin-top: 1rem; font-size: 1.8rem; } /* 공통 완료 */ .cm_complete { padding: 7rem 4rem; } .cm_complete .comp_img { max-width: 20rem; } .cm_complete .comp_title { margin-top: 2.5rem; font-size: 2.2rem; } .cm_complete .comp_text { margin-top: 1rem; font-size: 1.8rem; } /* overview1 */ .cm_overview1 { padding-top: 10.45rem; } .cm_overview1 .ovw_box { padding-left: 3.2rem; } .cm_overview1 .ovw_box .ovw_img { top: -10.45rem; bottom: auto; width: 16.98rem; } /* overview3 */ .cm_overview3 .ovw_box .ovw_title { padding: 2.5rem; font-size: 1.7rem; } .cm_overview3 .ovw_box .ovw_desc { padding: 2.5rem; font-size: 1.7rem; } /* overview4 */ .cm_overview4 .ovw_box { padding: 25rem 3rem 7rem; background: url(../../images/common/bg_application01.svg) no-repeat top 14% left 45%/23rem, url(../../images/common/bg_application02.svg) no-repeat right bottom/25rem, #FFF2F8; text-align: center; } .cm_overview4 .ovw_box .ovw_title { font-size: 2.2rem; } /* step1 */ .cm_step1 .step_item { width: calc((100% - 6rem) / 3); } .cm_step1 .step_item .item_title > span { padding: 1.5rem; } /* 공통 페이징 */ .cm_paging1 { margin-top: 5rem; } .cm_paging1 .page_control { width: 2.5rem; height: 4rem; background-size: auto 2.2rem; } .cm_paging1 .paging_page { margin: 0 1rem; } .cm_paging1 .page_link { width: 4rem; height: 4rem; } .cm_paging1 .page_link:hover { background-color: #fff; color: #222; } /* 상세 페이징 */ .cm_paging2 { flex-direction: column; margin-top: 2.5rem; gap: 2rem; } .cm_paging2 .item_paging { width: 100%; padding: 2rem; } .cm_paging2 .item_paging .item_title { margin-top: 1rem; } /* 공통 약관 */ .cm_policy .plcy_box { padding: 2rem; } .cm_policy.cm_box > .plcy_scroll { height: 18rem; } /* 공통 팝업 */ .cm_modal .modal_contents .modal_head { padding: 3rem 3rem 2.5rem; padding-right: 10rem; } .cm_modal .modal_contents .modal_body { padding: 0 3rem 4rem; } .cm_modal .modal_contents .modal_foot { padding: 3rem; } .cm_modal .modal_title { font-size: 2.8rem; } .cm_modal .modal_close { top: 3.5rem; right: 4rem; width: 2.3rem; height: 2.3rem; } /* tab1 */ .tab1.cm_tab .tab_list .btn_tab > a > svg { top: -62%; } /* tab2 */ .tab2.cm_tab .tab_list .btn_tab > a { border-radius: 7px; } .tab2.cm_tab.row3 .tab_list .btn_tab { width: calc((100% - 2.4rem) / 3); border-radius: 5px; } /* tab3 */ .tab3.cm_tab .tab_list { gap: 1rem; } .tab3.cm_tab .tab_list .btn_tab > a { padding: 1.2rem 2.5rem; font-size: 1.6rem; } /* split text */ .cm_split { gap: 3rem; } .cm_split .split_item:after { right: -1.5rem; } } @media screen and (max-width:479px) { :root { --default_font_size: 7.5px; } /* board search */ .board_search { flex-direction: column; } .board_search .search_item { width: 100%; } /* board list1 */ .board_list1.cm_board_list table tbody tr { padding: 2rem 1rem 1.5rem; } .board_list1.cm_board_list table tbody tr.notice { padding: 2rem 2rem 1.5rem; } .board_list1.cm_board_list table tbody tr.notice td.subject { width: 100%; } /* board faq */ .board_faq.cm_board_list .item_head { padding: 2rem; padding-right: 6rem; } .board_faq.cm_board_list .item_head:after { right: 1rem; } .board_faq.cm_board_list .item_body { padding: 2rem 2.5rem; } /* form search */ .form_search .search_item { flex-wrap: wrap; } .form_search .search_item .search_select { width: 100%; } .form_search .search_item .search_select select.form_control { width: 100% !important; } /* list1 */ .list1.cm_list .list_body .list_item .item_box .item_desc .item_info dl { display: block; } .list1.cm_list .list_body .list_item .item_box .item_desc .item_info dl dt:after { display: none; } .list1.cm_list .list_body .list_item .item_btn { margin-top: 2rem; } /* 공통 달력 목록 */ .cm_list_calendar .calendar_area .cal_body .cal_table .icon_legend { gap: 0; font-size: 0; } .cm_list_calendar .calendar_area .cal_body .cal_table table thead th { height: 5rem; padding: 1rem; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td { height: 8rem; } .cm_list_calendar .calendar_area .cal_body .cal_table table tbody td .btn_cal .day_list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .cm_list_calendar .list_area .cal_list .list_item { width: 100%; } .cm_list_calendar .list_area .cal_list .list_item .item_box .item_thumb .thumb_box { height: 52.5rem; } /* step1 */ .cm_step1 .step_item { width: calc((100% - 3rem) / 2); } .cm_step1 .step_item .item_title > span { padding: 1.5rem; } /* tab1 */ .tab1.cm_tab { overflow: hidden; overflow-x: auto; } .tab1.cm_tab .tab_list { flex-wrap: nowrap; } .tab1.cm_tab .tab_list > li { flex-shrink: 0; } .tab1.cm_tab .tab_list .btn_tab > a > svg { top: -67%; } /* tab2 */ .tab2.cm_tab { overflow: hidden; overflow-x: auto; } .tab2.cm_tab .tab_list { flex-wrap: nowrap; } .tab2.cm_tab .tab_list > li { flex-shrink: 0; } .tab2.cm_tab.fixed .tab_list .btn_tab { width: calc((100% - 1.2rem) / 2); } /* tab3 */ .tab3.cm_tab { overflow: hidden; overflow-x: auto; } .tab3.cm_tab .tab_list { flex-wrap: nowrap; } .tab3.cm_tab .tab_list > li { flex-shrink: 0; } }