@charset "UTF-8"; :root { --default_font_size: 10px; --inner: 1170px; --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:#66ff00; --cm_color2:#653ec7; --cm_color3:#cb0000; --cm_color4:#0d844e; } /* 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: "Verdana", "NotoSansKR", "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; } /* board option */ .board_option { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .board_utill { display: flex; align-items: center; gap: 1.5rem 3rem; font-size: 1.6rem; } .board_utill > li { position: relative; } .board_utill > li:before { display: block; position: absolute; top: 50%; right: -1.5rem; width: 1px; height: 1.4rem; margin-top: -0.7rem; background-color: #ddd; content: ""; } .board_utill > li:last-child:before { display: none; } /* 공통 게시판 리스트 */ .cm_board_list { position: relative; } .cm_board_list .list_body { position: relative; } .cm_board_list .list_body .list_item { position: relative; } .cm_board_list .list_body .list_item .item_box { display: flex; position: relative; } .cm_board_list .list_body .list_item .item_box .item_thumb { position: relative; width: 100%; } .cm_board_list .list_body .list_item .item_box .item_thumb .thumb_box { position: relative; width: 100%; overflow: hidden; background-color: #ccc; word-break: keep-all; } .cm_board_list .list_body .list_item .item_box .item_thumb .thumb_box:after { display: block; width: 100%; content: ""; } .cm_board_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; } .cm_board_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_board_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_board_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_board_list .list_body .list_item .item_box { align-items: center; min-height: 10rem; border-bottom: 1px solid #ddd; background-color: #fff; transition: border-color 0.2s; } .list1.cm_board_list .list_body .list_item .item_box > div { color: #222; text-align: center; } .list1.cm_board_list .list_body .list_item .item_box .item_num { flex-shrink: 0; width: 13rem; font-size: 2rem; } .list1.cm_board_list .list_body .list_item .item_box .item_num:before { margin-right: 0.5rem; content: "#"; } .list1.cm_board_list .list_body .list_item .item_box .item_title { width: 100%; font-size: 2.2rem; line-height: 1.4; text-align: left; word-break: keep-all; } .list1.cm_board_list .list_body .list_item .item_box .item_date { flex-shrink: 0; width: 15rem; color: #999; font-size: 1.8rem; } .list1.cm_board_list .list_body .list_item .item_box:hover { border-color: #000; } .list1.cm_board_list .list_body .list_item .item_box:hover .item_title > span { background: linear-gradient(to top, #6f0 35%, transparent 35%); } /* list2 */ .list2.cm_board_list .list_body { display: flex; flex-wrap: wrap; gap: 3rem; } .list2.cm_board_list .list_body .list_item { width: calc((100% - 3rem) / 2); } .list2.cm_board_list .list_body .list_item .item_box { flex-direction: column; align-items: flex-start; height: 100%; padding: 6.5rem 4rem 4rem; border: 3px solid #f6f6f6; background-color: #f6f6f6; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; } .list2.cm_board_list .list_body .list_item .item_box > div { color: #222; } .list2.cm_board_list .list_body .list_item .item_box .item_num { display: flex; position: absolute; top: -3px; left: 3rem; align-items: center; justify-content: center; width: 10rem; height: 3.5rem; padding: 0.5rem 1rem; background-color: #666; color: #fff; font-weight: 500; font-size: 1.7rem; text-align: center; } .list2.cm_board_list .list_body .list_item .item_box .item_num.notice { background-color: #000; color: var(--cm_color1); font-weight: 700; } .list2.cm_board_list .list_body .list_item .item_box .item_cate { padding-bottom: 0.2rem; border-bottom: 1px solid #818181; font-weight: 700; font-size: 1.8rem; } .list2.cm_board_list .list_body .list_item .item_box .item_title { display: -webkit-box; width: 100%; max-height: 6.72rem; margin-top: 2rem; font-size: 2.4rem; line-height: 1.4; text-align: left; word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .list2.cm_board_list .list_body .list_item .item_box .item_date { position: absolute; top: 6.5rem; right: 4rem; color: #999; font-size: 1.6rem; } .list2.cm_board_list .list_body .list_item .item_box .item_pin { position: absolute; top: 2.5rem; right: 4rem; width: 2.5rem; height: 2.5rem; overflow: hidden; background: url(../../images/common/icon_notice01.svg) no-repeat center/contain; font-size: 1px; text-indent: -9999px; } .list2.cm_board_list .list_body .list_item .item_box:hover { border-color: var(--cm_color1); background-color: #fff; box-shadow: 5px 5px 12px 0 rgba(0, 0, 0, 0.1); } /* list3 */ .list3.cm_board_list .list_body { display: flex; flex-wrap: wrap; gap: 3rem; } .list3.cm_board_list .list_body .list_item { width: calc((100% - 6rem) / 3); } .list3.cm_board_list .list_body .list_item .item_box { flex-direction: column; height: 100%; background-color: #fff; } .list3.cm_board_list .list_body .list_item .item_box > div { color: #222; } .list3.cm_board_list .list_body .list_item .item_box .item_thumb .thumb_box:after { padding-top: 100%; } .list3.cm_board_list .list_body .list_item .item_box .item_thumb .thumb_box:before { z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0 solid var(--cm_color1); content: ""; transition: border-width 0.2s; } .list3.cm_board_list .list_body .list_item .item_box .item_desc { width: 100%; margin-top: 2rem; } .list3.cm_board_list .list_body .list_item .item_box .item_label { display: flex; flex-wrap: wrap; margin-bottom: 1rem; gap: 5px; font-weight: 700; font-size: 1.6rem; } .list3.cm_board_list .list_body .list_item .item_box .item_title { width: 100%; font-size: 2.2rem; line-height: 1.4; text-align: left; word-break: keep-all; } .list3.cm_board_list .list_body .list_item .item_box .item_date { margin-top: 1rem; color: #999; font-size: 1.6rem; } .list3.cm_board_list .list_body .list_item .item_box .item_btn { margin-top: 1.5rem; } .list3.cm_board_list .list_body .list_item .item_box:hover .item_thumb .thumb_box:before { border-width: 15px; } .list3.type2.cm_board_list .list_body .list_item .item_box .item_thumb .thumb_box:after { padding-top: 56%; } .list3.type3.cm_board_list .list_body .list_item .item_box .item_thumb .thumb_box:after { padding-top: 73.6%; } .list3.type4.cm_board_list .list_body .list_item .item_box .item_thumb .thumb_box:after { padding-top: 72.8%; } /* list4 */ .list4.cm_board_list .list_body { display: flex; flex-wrap: wrap; gap: 3rem; } .list4.cm_board_list .list_body .list_item { z-index: 1; width: 100%; } .list4.cm_board_list .list_body .list_item .item_btn { display: flex; z-index: 2; position: absolute; top: 50%; right: 4rem; align-items: center; width: 10.3rem; height: 10.3rem; margin-top: -51.5px; background: url(../../images/common/btn_subscribe.png) no-repeat center/contain; font-weight: 700; font-size: 2rem; transition: background-image 0.2s; } .list4.cm_board_list .list_body .list_item .item_box { position: relative; flex-direction: column; align-items: flex-start; height: 100%; padding: 3rem 4rem 4rem 4rem; border: 3px solid #f6f6f6; background-color: #f6f6f6; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; } .list4.cm_board_list .list_body .list_item .item_btn + .item_box { padding-right: 20rem; } .list4.cm_board_list .list_body .list_item .item_box > div { color: #222; } .list4.cm_board_list .list_body .list_item .item_box .item_status { display: flex; width: 100%; gap: 1rem; } .list4.cm_board_list .list_body .list_item .item_box .item_status .item_label { display: flex; align-items: center; justify-content: center; min-width: 13rem; height: 4.5rem; padding: 0.5rem 1rem; border: 1px solid #ddd; background-color: #fff; text-align: center; } .list4.cm_board_list .list_body .list_item .item_box .item_status .item_label.label1 { border-color: var(--cm_color2); background-color: var(--cm_color2); color: #fff; } .list4.cm_board_list .list_body .list_item .item_box .item_status .item_label.label2 { border-color: #bdbdbd; background-color: #bdbdbd; color: #6c6c6c; } .list4.cm_board_list .list_body .list_item .item_box .item_status .item_label.label3 { min-width: 10rem; border-radius: 100px; border-color: var(--cm_color4); background-color: var(--cm_color4); color: #fff; } .list4.cm_board_list .list_body .list_item .item_box .item_status .label_date { position: absolute; top: 4rem; right: 3rem; color: #444; font-size: 1.6rem; } .list4.cm_board_list .list_body .list_item .item_box .item_title { width: 100%; margin-top: 2.5rem; font-size: 2.2rem; line-height: 1.4; text-align: left; word-break: keep-all; } .list4.cm_board_list .list_body .list_item .item_box .item_info { margin-top: 2rem; } .list4.cm_board_list .list_body .list_item .item_box .item_info dl { display: flex; margin-bottom: 0.7rem; font-size: 1.7rem; } .list4.cm_board_list .list_body .list_item .item_box .item_info dl:last-child { margin-bottom: 0; } .list4.cm_board_list .list_body .list_item .item_box .item_info dl dt { min-width: 12rem; padding-right: 1.5rem; font-weight: 500; } .list4.cm_board_list .list_body .list_item .item_box .item_info dl dd { color: #777; } .list4.cm_board_list .list_body .list_item .item_box:hover { border-color: var(--cm_color1); background-color: #fff; box-shadow: 5px 5px 12px 0 rgba(0, 0, 0, 0.1); } .list4.cm_board_list .list_body .list_item .item_btn:hover { background: url(../../images/common/btn_subscribe_on.png) no-repeat center/contain; } /* faq */ .cm_faq.cm_board_list .list_body .list_item { margin-bottom: 2rem; color: #333; word-break: keep-all; } .cm_faq.cm_board_list .list_body .list_item:last-child { margin-bottom: 0; } .cm_faq.cm_board_list .list_body .list_item .item_head { display: flex; width: 100%; min-height: 7rem; padding: 2rem 0; border-radius: 5px; background-color: #f0f2f3; } .cm_faq.cm_board_list .list_body .list_item .item_head .item_num { flex-shrink: 0; min-width: 10rem; color: var(--cm_color2); font-weight: 700; font-size: 1.7rem; text-align: center; } .cm_faq.cm_board_list .list_body .list_item .item_head .item_title { width: 100%; padding-top: 1px; padding-right: 3rem; font-weight: 500; font-size: 1.8rem; line-height: 1.4; text-align: left; } .cm_faq.cm_board_list .list_body .list_item .item_body { display: none; position: relative; padding: 2rem; padding-left: 10rem; background-color: #fff; } .cm_faq.cm_board_list .list_body .list_item .item_body:after { position: absolute; top: 2.4rem; left: 4rem; width: 2.76rem; height: 1.68rem; background: url(../../images/common/icon_answer.png) no-repeat center/contain; content: ""; } .cm_faq.cm_board_list .list_body .list_item .item_body .item_desc { font-weight: 300; font-size: 1.7rem; line-height: 1.6; } /* qna */ .cm_qna.cm_board_list .list_body { display: flex; flex-wrap: wrap; gap: 3rem; } .cm_qna.cm_board_list .list_body .list_item { width: calc((100% - 3rem) / 2); } .cm_qna.cm_board_list .list_body .list_item .item_box { flex-direction: column; align-items: flex-start; height: 100%; padding: 4rem; border: 3px solid #f6f6f6; background-color: #f6f6f6; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; } .cm_qna.cm_board_list .list_body .list_item .item_box > div { color: #222; } .cm_qna.cm_board_list .list_body .list_item .item_box .item_label { display: flex; flex-wrap: wrap; gap: 5px; } .cm_qna.cm_board_list .list_body .list_item .item_box .item_label .item_status { display: flex; align-items: center; justify-content: center; height: 4rem; padding: 0.5rem 2rem; border: 1px solid #ddd; border-radius: 100px; background-color: #eee; font-weight: 700; font-size: 1.4rem; } .cm_qna.cm_board_list .list_body .list_item .item_box .item_label .item_status.type1 { background-color: #fff; } .cm_qna.cm_board_list .list_body .list_item .item_box .item_label .item_status.type2 { border-color: var(--cm_color1); background-color: var(--cm_color1); } .cm_qna.cm_board_list .list_body .list_item .item_box .item_num { margin-top: 1rem; font-weight: 700; font-size: 2.4rem; } .cm_qna.cm_board_list .list_body .list_item .item_box .item_num:before { margin-right: 5px; content: "#"; } .cm_qna.cm_board_list .list_body .list_item .item_box .item_title { display: -webkit-box; width: 100%; max-height: 6.72rem; margin-top: 2rem; font-size: 2.4rem; line-height: 1.4; text-align: left; word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .cm_qna.cm_board_list .list_body .list_item .item_box .item_date { position: absolute; top: 6.5rem; right: 4rem; color: #999; font-size: 1.6rem; } .cm_qna.cm_board_list .list_body .list_item .item_box:hover { border-color: var(--cm_color1); background-color: #fff; box-shadow: 5px 5px 12px 0 rgba(0, 0, 0, 0.1); } /* board view */ .cm_board_view { border-top: 2px solid #000; background-color: #fff; word-break: keep-all; } .cm_board_view .board_view_head { position: relative; padding-top: 1.5rem; padding-bottom: 5rem; } .cm_board_view .board_view_head .view_label { display: flex; flex-shrink: 0; justify-content: center; margin-top: -1.5rem; gap: 1rem; } .cm_board_view .board_view_head .view_label .label_item { display: flex; align-items: center; justify-content: center; min-width: 10rem; height: 3.5rem; padding: 0 2rem; background-color: #000; color: var(--cm_color1); font-size: 1.6rem; } .cm_board_view .board_view_head .view_number { display: flex; justify-content: center; padding-top: 3.5rem; } .cm_board_view .board_view_head .view_number .number_item { display: flex; z-index: 1; position: relative; align-items: center; justify-content: center; padding: 0 0.5rem; font-weight: 700; font-size: 2.2rem; line-height: 1.2; text-align: center; } .cm_board_view .board_view_head .view_number .number_item:before { margin-right: 5px; content: "#"; } .cm_board_view .board_view_head .view_number .number_item:after { z-index: -1; position: absolute; right: 0; bottom: 0; left: 0; height: 0.9rem; background-color: var(--cm_color1); content: ""; } .cm_board_view .board_view_head .view_title { padding-top: 3.5rem; font-weight: 500; font-size: 3.2rem; line-height: 1.4; text-align: center; } .cm_board_view .board_view_head .view_info { display: flex; align-items: center; justify-content: center; padding-top: 2rem; gap: 2.5rem; } .cm_board_view .board_view_head .view_info .split_item { position: relative; color: #999; font-size: 1.5rem; } .cm_board_view .board_view_head .view_info .split_item:after { position: absolute; top: 50%; left: -12.5px; width: 1px; height: 1.4rem; margin-top: -0.7rem; background-color: #ddd; content: ""; } .cm_board_view .board_view_head .view_info .split_item:first-child:after { display: none; } .cm_board_view .board_view_file { padding: 2.5rem 3rem; background-color: #f3f3f3; } .cm_board_view .board_view_file .list_item + .list_item { margin-top: 0.5rem; } .cm_board_view .board_view_file .file_subj { display: inline-block; position: relative; width: 100%; padding-left: 3.5rem; font-size: 1.6rem; vertical-align: middle; } .cm_board_view .board_view_file .file_subj:after { position: absolute; top: 0.2rem; left: 0; width: 2rem; height: 1.8rem; background: url(../../images/common/icon_download01.svg) no-repeat center/contain; content: ""; } .cm_board_view .board_view_file .file_subj .file_text { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm_board_view .board_view_cont { min-height: 30rem; padding: 4rem; } .cm_board_view .board_view_cont .answer_cont { position: relative; width: calc(100% + 8rem); margin: 0 -4rem; margin-top: 4rem; padding: 3rem 4rem; padding-left: 9rem; border: 3px solid var(--cm_color1); color: #222; font-weight: 400; line-height: 1.6; } .cm_board_view .board_view_cont .answer_cont:after { position: absolute; top: 3.3rem; left: 4rem; width: 2.4rem; height: 1.4rem; background: url(../../images/common/icon_answer.png) no-repeat center/contain; content: ""; } .cm_board_view .board_view_head.type2 { padding-top: 4rem; padding-bottom: 4rem; } .cm_board_view .board_view_head.type2 .view_title_area { display: flex; align-items: center; text-align: left; } .cm_board_view .board_view_head.type2 .view_title_area .cm_label { flex-shrink: 0; } .cm_board_view .board_view_head.type2 .view_title_area .view_title { width: 100%; padding-top: 0; padding-left: 1.5rem; font-size: 3rem; text-align: left; } .cm_board_view .board_view_head.type2 .view_info { justify-content: flex-start; } /* editor */ .cm_editor { font-size: 1.6rem; line-height: normal; letter-spacing: 0; word-break: break-all; } .cm_editor * { font-size: inherit; font-family: "Verdana", "NotoSansKR", "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 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_editor iframe { max-width: 100% !important; width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important; } /* 공통 박스 */ .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: 3.5rem 4rem; background-color: #f7f7f7; } .box2.cm_box { padding: 3.5rem 4rem; border: 1px solid #ddd; background-color: #fff; } .box3.cm_box { padding: 3.5rem; border: 1px dashed #b9c5c0; border-radius: 10px; background-color: #fff; } .cm_box_shadow { box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } /* 공통 버튼 */ .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: 5rem; padding: 1rem 2rem; overflow: hidden; border: 1px solid #ddd; border-radius: 5px; background-color: #fff; font-weight: 500; 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.hover:hover { padding: 1rem calc(2rem - 1px); border: 2px solid var(--cm_color1); } .cm_btn.btn_sm { height: 4rem; padding: 0.7rem 1.5rem; font-size: 1.5rem; } .cm_btn.btn_lg { height: 6rem; padding: 1rem 3rem; font-size: 1.7rem; } .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; } .cm_btn.btn_etc1:hover { text-decoration: underline; } .cm_btn.btn_sm.hover:hover { padding: 0.7rem calc(1.5rem - 1px); } .cm_btn.btn_lg.hover:hover { padding: 1rem calc(3rem - 1px); } .cm_btn.cm_icon { justify-content: space-between; } .cm_btn.cm_icon.notext, .cm_btn.cm_icon.notext > * { text-indent: -9999px; } .cm_btn.cm_icon:before { margin-top: 0.1rem; margin-right: 1rem; } .cm_btn.cm_icon.right:before { margin-right: 0; margin-left: 1rem; } .cm_btn.btn_xs.cm_icon:before, .cm_btn.btn_sm.cm_icon:before { margin-right: 0.8rem; } .cm_btn.btn_xs.cm_icon.right:before, .cm_btn.btn_sm.cm_icon.right:before { margin-right: 0; margin-left: 0.8rem; } .cm_btn.btn_lg.cm_icon:before, .cm_btn.btn_xl.cm_icon:before { margin-right: 1.2rem; } .cm_btn.btn_lg.cm_icon.right:before, .cm_btn.btn_xl.cm_icon.right:before { margin-right: 0; margin-left: 1.2rem; } .btn1.cm_btn { border-color: var(--cm_color1); background-color: var(--cm_color1); color: #333; } .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: #fff; } .btn2.cm_btn.border { border-color: var(--cm_color2); background-color: #fff; color: var(--cm_color2); } .btn3.cm_btn { border-color: #000; background-color: #000; color: #fff; } .btn3.cm_btn.border { border-color: #000; background-color: #fff; color: #000; } .btn4.cm_btn { border-color: #ddd; background-color: #ddd; color: #333; } .btn4.cm_btn.border { border-color: #ddd; background-color: #fff; color: #999; } .btn5.cm_btn { border-color: #999; background-color: #999; color: #fff; } .btn5.cm_btn.border { border-color: #999; background-color: #fff; color: #444; } .btn_custom1.cm_btn { height: 7rem; padding: 0 3.5rem; overflow: visible; border: none; border-radius: 0; background: none; color: #333; font-weight: 400; font-size: 2rem; } .btn_custom1.cm_btn:before { z-index: -1; position: absolute; top: 0; left: 0; width: 7rem; height: 7rem; border-radius: 100%; background: #f3f3f3; content: ""; transition: left 0.2s; } .btn_custom1.cm_btn:after { display: block; width: 5.3rem; height: 0.9rem; margin-left: 3rem; background: url(../../images/common/icon_arr03.svg) no-repeat center/contain; content: ""; } .btn_custom1.cm_btn:hover:before { left: calc(100% - 7rem); } .btn_custom1.cm_btn.type2:before { background-color: var(--cm_color1); } .btn_custom1.cm_btn.type3:before { background-color: #999; } .btn_custom1.cm_btn.type4 { color: #fff; } .btn_custom1.cm_btn.type4:before { background-color: var(--cm_color2); } .btn_custom1.cm_btn.type4:after { background: url(../../images/common/icon_arr06.svg) no-repeat center/contain; } .btn_custom2.cm_btn { align-items: center; justify-content: space-between; min-width: 19rem; height: 6rem; padding: 0; padding-top: 2rem; overflow: visible; border: none; border-top: 3px solid #333; border-radius: 0; background: #fff; color: #333; font-weight: 400; font-size: 1.8rem; line-height: 1.2; text-align: left; } .btn_custom2.cm_btn:after { display: block; width: 5.3rem; height: 0.9rem; margin-left: 3rem; background: url(../../images/common/icon_arr03.svg) no-repeat center/contain; content: ""; } .btn_custom2.cm_btn.cm_icon:before { margin-top: 0; margin-bottom: 0.1rem; } .btn_custom2.cm_btn.cm_icon.icon24:before { margin-bottom: 0.2rem; } /* 공통 컬러 */ .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%; margin-bottom: 1rem; color: #333; font-size: 1.4rem; } .form_control { width: 100%; height: 6rem; padding: 0.5rem 2rem; border: 1px solid #9b9a9a; border-radius: 5px; background-color: #fff; font-size: 1.7rem; } .form_control.small { height: 4rem; padding: 0.5rem 1.5rem; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; font-size: 1.5rem; } .form_control.type2 { height: 5rem; } .form_control.type3 { height: 5rem; border-color: #f3f3f3; background-color: #f3f3f3; } .form_control::placeholder { color: #767676; } select.form_control { padding-right: 4rem; background: #fff url(../../images/common/icon_arr_select.svg) no-repeat right 1.6rem center/1.2rem; } select.form_control.small { background: #fff url(../../images/common/icon_arr_select.svg) no-repeat right 1.6rem center/1rem; } textarea.form_control { height: 15rem; padding: 1.5rem 2rem; } textarea.form_control.large { height: 30rem; } .form_control.form_datepicker { padding-right: 5.5rem; background: #fff url(../../images/common/icon_calendar01.svg) no-repeat right 2rem center/2.5rem; } .form_control.form_datepicker.small { padding-right: 5rem; background: #fff url(../../images/common/icon_calendar01.svg) no-repeat right 1.5rem center/2rem; } .form_control.form_timepicker { padding-right: 5.5rem; background: #fff url(../../images/common/icon_time.svg) no-repeat left 2rem center/1.8rem; } .form_control.form_timepicker.small { padding-right: 5rem; background: #fff url(../../images/common/icon_time.svg) no-repeat right 1.5rem center/1.5rem; } .form_control.form_id { padding-left: 8rem; background: #fff url(../../images/common/icon21.svg) no-repeat left 3rem center/2rem; } .form_control.form_pw { padding-left: 8rem; background: #fff url(../../images/common/icon22.svg) no-repeat left 3rem center/2.7rem; } .form_control.form_mail { padding-left: 8rem; background: #fff url(../../images/common/icon19.svg) no-repeat left 3rem center/2.7rem; } .form_control.form_phone { padding-left: 8rem; background: #fff url(../../images/common/icon20.svg) no-repeat left 3rem center/2rem; } .form_control.form_number { padding-left: 8rem; background: #fff url(../../images/common/icon16.svg) no-repeat left 3rem center/2.7rem; } .form_control.form_com { padding-left: 8rem; background: #fff url(../../images/common/icon17.svg) no-repeat left 3rem center/2.2rem; } .form_control.form_user { padding-left: 8rem; background: #fff url(../../images/common/icon18.svg) no-repeat left 3rem center/2.2rem; } .form_control.form_id_check { padding-right: 7rem; background: #fff url(../../images/common/icon_check05.svg) no-repeat right 2rem center/2.5rem; } .form_control.form_id_check.active { background: #fff url(../../images/common/icon_check06.svg) no-repeat right 2rem center/2.5rem; } .form_control:hover { padding: 0.5rem calc(2rem - 2px); border: 3px solid var(--cm_color1); } .form_control.form_datepicker:hover { background: #fff url(../../images/common/icon_calendar01.svg) no-repeat right calc(2rem - 2px) center/2.5rem; } select.form_control:hover { background-image: url(../../images/common/icon_arr_select.svg); background-position: right 14px center; background-repeat: no-repeat; } textarea.form_control:hover { padding: calc(1.5rem - 2px) calc(2rem - 2px); } .form_control.form_id:hover { padding-left: calc(8rem - 2px); background: #fff url(../../images/common/icon21.svg) no-repeat left calc(3rem - 2px) center/2rem; } .form_control.form_pw:hover { padding-left: calc(8rem - 2px); background: #fff url(../../images/common/icon22.svg) no-repeat left calc(3rem - 2px) center/2.7rem; } .form_control.form_mail:hover { padding-left: calc(8rem - 2px); background: #fff url(../../images/common/icon19.svg) no-repeat left calc(3rem - 2px) center/2.7rem; } .form_control.form_phone:hover { padding-left: calc(8rem - 2px); background: #fff url(../../images/common/icon20.svg) no-repeat left calc(3rem - 2px) center/2rem; } .form_control.form_number:hover { padding-left: calc(8rem - 2px); background: #fff url(../../images/common/icon16.svg) no-repeat left calc(3rem - 2px) center/2.7rem; } .form_control.form_com:hover { padding-left: calc(8rem - 2px); background: #fff url(../../images/common/icon17.svg) no-repeat left calc(3rem - 2px) center/2.2rem; } .form_control.form_user:hover { padding-left: calc(8rem - 2px); background: #fff url(../../images/common/icon18.svg) no-repeat left calc(3rem - 2px) center/2.2rem; } .form_control.form_id_check:hover { padding-right: calc(7rem - 2px); background: #fff url(../../images/common/icon_check05.svg) no-repeat right calc(2rem - 2px) center/2.5rem; } .form_control.form_id_check.active:hover { background: #fff url(../../images/common/icon_check06.svg) no-repeat right calc(2rem - 2px) center/2.5rem; } .form_control.small:hover { padding: 0.5rem 1.5rem; border: 1px solid var(--cm_color1); } select.form_control.small:hover { background: url(../../images/common/icon_arr_select.svg) no-repeat right 1.6rem center/1rem; } .form_control.form_datepicker.small:hover { padding-right: 5rem; background: #fff url(../../images/common/icon_calendar01.svg) no-repeat right 1.5rem center/2rem; } .form_control[readonly], .form_control:disabled { padding: 0.5rem 2rem; border: 1px solid #ccc !important; background-color: #fbfbfb !important; color: #666 !important; cursor: not-allowed !important; } select.form_control[readonly], select.form_control:disabled { padding-right: 4rem; background: #fbfbfb url(../../images/common/icon_arr_select.svg) no-repeat right 16px center/1.2rem !important; } .form_control.form_datepicker[readonly], .form_control.form_datepicker:disabled { padding-right: 5.5rem; background: #fbfbfb url(../../images/common/icon_calendar01.svg) no-repeat right 2rem center/2.5rem !important; } .form_control.form_timepicker[readonly], .form_control.form_timepicker:disabled { padding-right: 5.5rem; background: #fbfbfb url(../../images/common/icon_time.svg) no-repeat left 2rem center/1.8rem !important; } .form_control.form_id[readonly], .form_control.form_id:disabled { padding-left: 8rem; background: #fbfbfb url(../../images/common/icon21.svg) no-repeat left 3rem center/2rem !important; } .form_control.form_pw[readonly], .form_control.form_pw:disabled { padding-right: 8rem; background: #fbfbfb url(../../images/common/icon22.svg) no-repeat left 3rem center/2.7rem !important; } .form_control.form_mail[readonly], .form_control.form_mail:disabled { padding-left: 8rem; background: #fbfbfb url(../../images/common/icon19.svg) no-repeat left 3rem center/2.7rem !important; } .form_control.form_phone[readonly], .form_control.form_phone:disabled { padding-left: 8rem; background: #fbfbfb url(../../images/common/icon20.svg) no-repeat left 3rem center/2rem !important; } .form_control.form_number[readonly], .form_control.form_number:disabled { padding-left: 8rem; background: #fbfbfb url(../../images/common/icon16.svg) no-repeat left 3rem center/2.7rem !important; } .form_control.form_com[readonly], .form_control.form_com:disabled { padding-left: 8rem; background: #fbfbfb url(../../images/common/icon17.svg) no-repeat left 3rem center/2.2rem !important; } .form_control.form_user[readonly], .form_control.form_user:disabled { padding-left: 8rem; background: #fbfbfb url(../../images/common/icon18.svg) no-repeat left 3rem center/2.2rem !important; } .form_control.form_id_check[readonly], .form_control.form_id_check:disabled { padding-right: 7rem; background: #fbfbfb url(../../images/common/icon_check05.svg) no-repeat right 2rem center/2.5rem !important; } .form_control.form_id_check.active[readonly], .form_control.form_id_check:disabled { background: #fbfbfb url(../../images/common/icon_check06.svg) no-repeat right 2rem center/2.5rem !important; } .form_control.small[readonly], .form_control.small:disabled { padding: 0.5rem 1.5rem; } select.form_control.small[readonly], select.form_control.small:disabled { background: url(../../images/common/icon_arr_select.svg) no-repeat right 1.6rem center/1rem !important; } .form_control.form_datepicker.small[readonly], .form_control.form_datepicker.small:disabled { padding-right: 5rem !important; background: #fbfbfb url(../../images/common/icon_calendar01.svg) no-repeat right 1.5rem center/2rem !important; } .form_control.form_timepicker.small[readonly], .form_control.form_timepicker.small:disabled { padding-right: 5rem !important; background: #fbfbfb url(../../images/common/icon_calendar01.svg) no-repeat right 1.5rem center/1.5rem !important; } /* 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 > .col > .form_label, .cm_form_area > .form_group > [class^=col] > .form_label { margin-bottom: 1rem; } .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 -1.5rem; } .form_group > [class^=col] { padding-right: 1.5rem; padding-left: 1.5rem; } .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: "Verdana", "NotoSansKR", "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_color2); font-weight: 500; 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: #000; font-weight: 700; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { background-color: #fff; color: var(--cm_color2); font-weight: 700; } /* form search */ .form_search { display: flex; width: 100%; padding: 2px; background-color: #131313; } .form_search .search_item { display: flex; width: 100%; } .form_search .search_item .form_control { height: 8rem; padding: 0 3.5rem; border: 0; border-radius: 0; font-size: 1.8rem; } .form_search .search_item .search_select { display: flex; flex-shrink: 0; } .form_search .search_item .search_form_wrap { display: flex; width: 100%; } .form_search .search_item .search_form_wrap .form_control.search_form { width: 100%; padding: 0 3.5rem; } .form_search .search_item .search_form_wrap .search_btn { flex-shrink: 0; width: 8rem; height: 8rem; overflow: hidden; background: #131313 url(../../images/common/icon_search01.svg) no-repeat center/2.6rem; font-size: 1px; text-indent: -9999px; } .form_search_option { position: relative; padding: 4rem 0; } .form_search_option dl { display: flex; align-items: flex-start; } .form_search_option dl + dl { margin-top: 2rem; } .form_search_option dl dt { flex-shrink: 0; min-width: 12rem; padding-top: 0.8rem; padding-right: 2rem; font-weight: 500; font-size: 1.8rem; } .form_search_option dl dd { width: 100%; } /* form check */ .form_check_area { display: flex; align-items: flex-start; min-height: 6rem; padding: 1.6rem 2rem; border: 1px solid #9b9a9a; border-radius: 5px; background-color: #fff; } .form_check_area .check_list { display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: 2rem; } .form_check_area > .form_label { flex-shrink: 0; width: auto; margin: 0; padding-right: 2rem; color: #999; font-weight: 400; font-size: 1.7rem; } .form_check_area.type2 { flex-wrap: wrap; min-height: 0; padding: 0; border: 0; } .form_check_area.type2 .check_list { gap: 1rem; } .form_check { display: inline-flex; position: relative; overflow: hidden; 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: 2; opacity: 0; clip: auto; } .form_check input + .form_label { display: flex; z-index: 2; position: relative; align-items: center; height: auto; margin: 0; font-weight: 400; line-height: 1.4; cursor: pointer; user-select: none; } .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.7rem; } .form_check.check1 input + .form_label:before { width: 2.6rem; height: 2.6rem; margin-right: 1.5rem; 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_check02.svg) no-repeat center/contain; } .form_check.check1 input:checked + .form_label:before { background: url(../../images/common/icon_check01_on.svg) no-repeat center/contain; } .form_check.check1 input[type=radio]:checked + .form_label:before { background: url(../../images/common/icon_check02_on.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.check1.type2 input + .form_label:before { width: 2.6rem; height: 2.6rem; margin-right: 1.5rem; background: url(../../images/common/icon_check07.svg) no-repeat center/contain; } .form_check.check1.type2 input:checked + .form_label:before { background: url(../../images/common/icon_check07_on.svg) no-repeat center/contain; } .form_check.check2 input + .form_label { min-height: 4.5rem; padding: 0 2rem; border: 1px solid var(--cm_color2); border-radius: 5px; background-color: #fff; color: var(--cm_color2); font-size: 1.5rem; } .form_check.check2 input:checked + .form_label { background-color: var(--cm_color2); color: #fff; font-weight: 500; } .form_check.check2 input:disabled + .form_label, .form_check.check2 input:disabled:focus-visible + .form_label { border-color: #ddd; color: #999; cursor: default; } .form_check.check2 input:checked:disabled + .form_label, .form_check.check2 input:checked:disabled:focus-visible + .form_label { border-color: #eee; background-color: #eee; color: #999; cursor: default; } /* form file */ .form_file { display: flex; z-index: 1; position: relative; align-items: center; min-height: 6rem; padding: 0 2rem; padding-right: 8rem; overflow: hidden; border: 1px solid #9b9a9a; 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 { position: absolute; top: 0; right: 0; bottom: 0; width: 8rem; overflow: hidden; background: url(../../images/common/icon_plus01.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: 8rem; overflow: hidden; background: url(../../images/common/icon_delete01.svg) no-repeat center/2rem; font-size: 1px; text-indent: -9999px; } .form_file:hover { padding: 0 calc(2rem - 2px); padding-right: calc(8rem - 2px); border: 3px solid var(--cm_color1); } .form_file:hover .file_subj:after { background: url(../../images/common/icon_file03.svg) no-repeat center/contain; } .form_file:hover .file_add { width: calc(8rem - 2px); overflow: hidden; background: url(../../images/common/icon_plus02.svg) no-repeat center/2rem; } .form_file:hover .file_delete { width: calc(8rem - 4px); } .form_file.small { min-height: 4rem; padding: 0 1.5rem; padding-right: 5rem; } .form_file.small .file_subj { padding: 0; padding-left: 2.8rem; } .form_file.small .file_subj:after { top: 0.2rem; width: 1.6rem; } .form_file.small .file_subj .file_text { font-size: 1.4rem; } .form_file.small .file_add { width: 5rem; background: url(../../images/common/icon_plus01.svg) no-repeat center/1.6rem; } .form_file.small .file_delete { width: 5rem; background: url(../../images/common/icon_delete01.svg) no-repeat center/1.6rem; } .form_file.small:hover { padding: 0 calc(2rem - 2px); padding-right: calc(5rem - 2px); border: 3px solid var(--cm_color1); } .form_file.small:hover .file_add { width: calc(5rem - 2px); background: url(../../images/common/icon_plus02.svg) no-repeat center/1.6rem; } .form_file.small:hover .file_delete { width: calc(5rem - 4px); } .form_file.type2 { background-color: #fbfbfb; } .form_file.type2 .file_subj:after { background: url(../../images/common/icon_file01.svg) no-repeat center/contain; } .form_file.type2 .file_subj .file_text { font-weight: 400; } .form_file.type2:hover { padding: 0 2rem; padding-right: 8rem; border: 1px solid #9b9a9a; } .form_file.type2:hover .file_delete { width: 8rem; } .form_file.type2.small:hover { padding: 0 2rem; padding-right: 5rem; } .form_file.type2.small:hover .file_delete { width: 5rem; } .form_file_list .file_list .list_item { display: flex; position: relative; align-items: center; min-height: 6rem; padding: 0 2rem; padding-right: 8rem; overflow: hidden; border: 1px solid #9b9a9a; background-color: #fbfbfb; } .form_file_list .file_list .list_item + .list_item { border-top: 0; } .form_file_list .file_list .list_item input[type=file] { position: absolute; top: 100%; left: -100%; width: 1px; height: 1px; } .form_file_list .file_list .list_item .file_subj { display: flex; position: relative; align-items: center; width: 100%; padding: 1rem 0; padding-left: 4rem; } .form_file_list .file_list .list_item .file_subj:after { position: absolute; top: 1.2rem; left: 0; width: 3rem; height: 1.7rem; background: url(../../images/common/icon_file01.svg) no-repeat center/contain; content: ""; } .form_file_list .file_list .list_item .file_subj .file_text { width: 100%; overflow: hidden; color: #444; font-size: 1.6rem; text-overflow: ellipsis; white-space: nowrap; } .form_file_list .file_list .list_item .file_delete { position: absolute; top: 0; right: 0; bottom: 0; width: 8rem; overflow: hidden; background: url(../../images/common/icon_delete01.svg) no-repeat center/2rem; font-size: 1px; text-indent: -9999px; } /* 공통 아이콘 */ .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: 1rem; background-position: center; background-size: contain; background-repeat: no-repeat; content: ""; transition: background-image 0.3s; } .cm_icon.right { flex-direction: row-reverse; } .cm_icon.right:before { margin-right: 0; margin-left: 1rem; } .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; min-width: calc(10px * 0.8); height: 1.7rem; min-height: calc(17px * 0.8); 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_arr1.cm_icon.small { align-items: center; } .icon_arr1.cm_icon.small:before { width: 0.8rem; min-width: calc(8px * 0.8); height: 1.3rem; min-height: calc(13px * 0.8); margin-top: 0; } .icon_arr1.cm_icon.small.arr_left:before { background-image: url(../../images/common/icon_arr01_left.svg); } .icon_arr1.cm_icon.small.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; min-width: calc(10px * 0.8); height: 1.7rem; min-height: calc(17px * 0.8); 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: 5.3rem; min-width: calc(53px * 0.8); height: 0.9rem; min-height: calc(9px * 0.8); background-image: url(../../images/common/icon_arr03.svg); } .icon_arr4.cm_icon { align-items: center; } .icon_arr4.cm_icon:before { width: 2.8rem; min-width: calc(28px * 0.8); height: 2.3rem; min-height: calc(23px * 0.8); 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: 1.5rem; min-width: calc(15px * 0.8); height: 1.5rem; min-height: calc(15px * 0.8); background-image: url(../../images/common/icon_arr05.svg); } .icon_arr6.cm_icon { align-items: center; } .icon_arr6.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 1.4rem; min-height: calc(14px * 0.8); } .icon_arr6.cm_icon.arr_up:before { background-image: url(../../images/common/icon_arr06_up.svg); } .icon_arr6.cm_icon.arr_down:before { background-image: url(../../images/common/icon_arr06_down.svg); } .icon_arr7.cm_icon { align-items: center; } .icon_arr7.cm_icon:before { width: 1.7rem; min-width: calc(17px * 0.8); height: 1rem; min-height: calc(10px * 0.8); } .icon_arr7.cm_icon.arr_up:before { background-image: url(../../images/common/icon_arr07_up.svg); } .icon_arr7.cm_icon.arr_down:before { background-image: url(../../images/common/icon_arr07_down.svg); } .icon_arr8.cm_icon { align-items: center; } .icon_arr8.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); } .icon_arr8.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr08_left.svg); } .icon_arr8.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr08_right.svg); } .icon_arr9.cm_icon { align-items: center; } .icon_arr9.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); } .icon_arr9.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr09_left.svg); } .icon_arr9.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr09_right.svg); } .icon_arr10.cm_icon { align-items: center; } .icon_arr10.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); } .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: 1rem; min-width: calc(10px * 0.8); height: 1.7rem; min-height: calc(17px * 0.8); } .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: 1.7rem; min-width: calc(17px * 0.8); height: 1rem; min-height: calc(10px * 0.8); } .icon_arr12.cm_icon.arr_up:before { background-image: url(../../images/common/icon_arr12_up.svg); } .icon_arr12.cm_icon.arr_down:before { background-image: url(../../images/common/icon_arr12_down.svg); } .icon_arr13.cm_icon { align-items: center; } .icon_arr13.cm_icon:before { width: 3rem; min-width: calc(30px * 0.8); height: 3rem; min-height: calc(30px * 0.8); background-image: url(../../images/common/icon_arr13.svg); } .icon_arr14.cm_icon { align-items: center; } .icon_arr14.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); } .icon_arr14.cm_icon.arr_left:before { background-image: url(../../images/common/icon_arr14_left.svg); } .icon_arr14.cm_icon.arr_right:before { background-image: url(../../images/common/icon_arr14_right.svg); } .icon_arr15.cm_icon { align-items: center; } .icon_arr15.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); background-image: url(../../images/common/icon_arr15.svg); } .icon1.cm_icon:before { width: 3rem; min-width: calc(30px * 0.8); height: 2.4rem; min-height: calc(24px * 0.8); margin-top: -0.1rem; background-image: url(../../images/common/icon01.svg); } .icon2.cm_icon:before { width: 2.3rem; min-width: calc(23px * 0.8); height: 2.3rem; min-height: calc(23px * 0.8); margin-top: 0; background-image: url(../../images/common/icon02.svg); } .icon3.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0; background-image: url(../../images/common/icon03.svg); } .icon4.cm_icon:before { width: 2.4rem; min-width: calc(24px * 0.8); height: 2.6rem; min-height: calc(26px * 0.8); margin-top: 0; background-image: url(../../images/common/icon04.svg); } .icon5.cm_icon { align-items: center; } .icon5.cm_icon:before { width: 2.1rem; min-width: calc(21px * 0.8); height: 2.1rem; min-height: calc(21px * 0.8); background-image: url(../../images/common/icon05.svg); } .icon6.cm_icon:before { width: 2.4rem; min-width: calc(24px * 0.8); height: 2.4rem; min-height: calc(24px * 0.8); margin-top: -0.2rem; background-image: url(../../images/common/icon06.svg); } .icon7.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2.4rem; min-height: calc(24px * 0.8); margin-top: -0.1rem; background-image: url(../../images/common/icon07.svg); } .icon8.cm_icon { align-items: center; } .icon8.cm_icon:before { width: 1.8rem; min-width: calc(18px * 0.8); height: 2rem; min-height: calc(20px * 0.8); background-image: url(../../images/common/icon08.svg); } .icon9.cm_icon { align-items: center; } .icon9.cm_icon:before { width: 1.9rem; min-width: calc(19px * 0.8); height: 1.5rem; min-height: calc(15px * 0.8); background-image: url(../../images/common/icon09.svg); } .icon10.cm_icon:before { width: 2.5rem; min-width: calc(25px * 0.8); height: 2.5rem; min-height: calc(25px * 0.8); margin-top: -0.1rem; background-image: url(../../images/common/icon10.svg); } .icon11.cm_icon:before { width: 3.1rem; min-width: calc(31px * 0.8); height: 2.3rem; min-height: calc(23px * 0.8); margin-top: 0; background-image: url(../../images/common/icon11.svg); } .icon12.cm_icon:before { width: 3rem; min-width: calc(30px * 0.8); height: 2.5rem; min-height: calc(25px * 0.8); margin-top: -0.1rem; background-image: url(../../images/common/icon12.svg); } .icon13.cm_icon:before { width: 1.7rem; min-width: calc(17px * 0.8); height: 1.9rem; min-height: calc(19px * 0.8); margin-top: 0; background-image: url(../../images/common/icon13.svg); } .icon14.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 1.8rem; min-height: calc(18px * 0.8); margin-top: 0.4rem; background-image: url(../../images/common/icon14.svg); } .icon15.cm_icon:before { width: 1.4rem; min-width: calc(14px * 0.8); height: 1.9rem; min-height: calc(19px * 0.8); margin-top: 0.1rem; background-image: url(../../images/common/icon15.svg); } .icon16.cm_icon:before { width: 2.7rem; min-width: calc(27px * 0.8); height: 2.2rem; min-height: calc(22px * 0.8); margin-top: 0; background-image: url(../../images/common/icon16.svg); } .icon17.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2.7rem; min-height: calc(27px * 0.8); margin-top: -0.2rem; background-image: url(../../images/common/icon17.svg); } .icon18.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2.8rem; min-height: calc(28px * 0.8); margin-top: -0.2rem; background-image: url(../../images/common/icon18.svg); } .icon19.cm_icon:before { width: 2.7rem; min-width: calc(27px * 0.8); height: 1.9rem; min-height: calc(19px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon19.svg); } .icon20.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2.9rem; min-height: calc(29px * 0.8); margin-top: -0.2rem; background-image: url(../../images/common/icon20.svg); } .icon21.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2.8rem; min-height: calc(28px * 0.8); margin-top: -0.2rem; background-image: url(../../images/common/icon21.svg); } .icon22.cm_icon:before { width: 2.7rem; min-width: calc(27px * 0.8); height: 2.6rem; min-height: calc(26px * 0.8); margin-top: -0.2rem; background-image: url(../../images/common/icon22.svg); } .icon23.cm_icon:before { width: 3.1rem; min-width: calc(31px * 0.8); height: 2.5rem; min-height: calc(25px * 0.8); margin-top: 0; background-image: url(../../images/common/icon23.svg); } .icon24.cm_icon:before { width: 2.1rem; min-width: calc(21px * 0.8); height: 2.4rem; min-height: calc(24px * 0.8); margin-top: -0.1rem; background-image: url(../../images/common/icon24.svg); } .icon25.cm_icon:before { width: 2.9rem; min-width: calc(29px * 0.8); height: 2.9rem; min-height: calc(29px * 0.8); margin-top: -0.1rem; background-image: url(../../images/common/icon25.svg); } .icon26.cm_icon:before { width: 2.6rem; min-width: calc(26px * 0.8); height: 2.6rem; min-height: calc(26px * 0.8); margin-top: -0.1rem; background-image: url(../../images/common/icon26.svg); } .icon27.cm_icon:before { width: 2.6rem; min-width: calc(26px * 0.8); height: 2.6rem; min-height: calc(26px * 0.8); margin-top: -0.1rem; background-image: url(../../images/common/icon27.svg); } .icon28.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 1.9rem; min-height: calc(19px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon28.svg); } .icon29.cm_icon { align-items: center; } .icon29.cm_icon:before { width: 2.3rem; min-width: calc(23px * 0.8); height: 2.3rem; min-height: calc(23px * 0.8); margin-top: 0; background-image: url(../../images/common/icon29.svg); } .icon30.cm_icon { align-items: center; } .icon30.cm_icon:before { width: 1.9rem; min-width: calc(19px * 0.8); height: 1.9rem; min-height: calc(19px * 0.8); margin-top: 0; background-image: url(../../images/common/icon30.svg); } .icon31.cm_icon { align-items: center; } .icon31.cm_icon:before { width: 1.9rem; min-width: calc(19px * 0.8); height: 1.7rem; min-height: calc(17px * 0.8); margin-top: 0; background-image: url(../../images/common/icon31.svg); } .icon32.cm_icon { align-items: center; } .icon32.cm_icon:before { width: 2.4rem; min-width: calc(24px * 0.8); height: 1.5rem; min-height: calc(15px * 0.8); margin-top: 0; background-image: url(../../images/common/icon32.svg); } .icon33.cm_icon { align-items: center; } .icon33.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0; background-image: url(../../images/common/icon33.svg); } .icon34.cm_icon { align-items: center; } .icon34.cm_icon:before { width: 1.8rem; min-width: calc(18px * 0.8); height: 1.8rem; min-height: calc(18px * 0.8); margin-top: 0; background-image: url(../../images/common/icon34.svg); } .icon35.cm_icon:before { width: 1.7rem; min-width: calc(17px * 0.8); height: 2.5rem; min-height: calc(25px * 0.8); margin-top: -0.1rem; background-image: url(../../images/common/icon35.svg); } .icon36.cm_icon:before { width: 2.5rem; min-width: calc(25px * 0.8); height: 2.2rem; min-height: calc(22px * 0.8); margin-top: -0.1rem; background-image: url(../../images/common/icon36.svg); } .icon37.cm_icon { align-items: center; } .icon37.cm_icon:before { width: 2.9rem; min-width: calc(29px * 0.8); height: 3.4rem; min-height: calc(34px * 0.8); margin-top: 0; background-image: url(../../images/common/icon37.svg); } .icon_home1.cm_icon:before { width: 1.9rem; min-width: calc(19px * 0.8); height: 1.7rem; min-height: calc(17px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon_home01.svg); } .icon_home2.cm_icon:before { width: 1.5rem; min-width: calc(15px * 0.8); height: 1.6rem; min-height: calc(16px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon_home02.svg); } .icon_file1.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 1.7rem; min-height: calc(17px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon_file01.svg); } .icon_file2.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 1.7rem; min-height: calc(17px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon_file02.svg); } .icon_file3.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 1.7rem; min-height: calc(17px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon_file03.svg); } .icon_file4.cm_icon:before { width: 2.7rem; min-width: calc(27px * 0.8); height: 2.8rem; min-height: calc(28px * 0.8); margin-top: -0.1rem; background-image: url(../../images/common/icon_file04.svg); } .icon_like1.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon_like01.svg); } .icon_like2.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon_like02.svg); } .icon_like3.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon_like03.svg); } .icon_delete1.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon_delete01.svg); } .icon_delete2.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon_delete02.svg); } .icon_download1.cm_icon { align-items: center; } .icon_download1.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_download01.svg); } .icon_download2.cm_icon { align-items: center; } .icon_download2.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_download02.svg); } .icon_download3.cm_icon { align-items: center; } .icon_download3.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_download03.svg); } .icon_lock1.cm_icon:before { width: 1.7rem; min-width: calc(17px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_lock01.svg); } .icon_reset1.cm_icon { align-items: center; } .icon_reset1.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_reset01.svg); } .icon_time1.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2.2rem; min-height: calc(22px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_time01.svg); } .icon_time2.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2.2rem; min-height: calc(22px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_time02.svg); } .icon_date1.cm_icon:before { width: 2.5rem; min-width: calc(25px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0.1rem; background-image: url(../../images/common/icon_calendar01.svg); } .icon_date2.cm_icon { align-items: center; } .icon_date2.cm_icon:before { width: 4rem; min-width: calc(40px * 0.8); height: 3.6rem; min-height: calc(36px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_calendar02.svg); } .icon_pin.cm_icon { align-items: center; } .icon_pin.cm_icon:before { width: 2.5rem; min-width: calc(25px * 0.8); height: 2.5rem; min-height: calc(25px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_notice01.svg); } .icon_location.cm_icon:before { width: 1.3rem; min-width: calc(13px * 0.8); height: 1.8rem; min-height: calc(18px * 0.8); margin-top: 0.2rem; background-image: url(../../images/common/icon_map01.svg); } .icon_close1.cm_icon { align-items: center; } .icon_close1.cm_icon:before { width: 2.8rem; min-width: calc(28px * 0.8); height: 2.8rem; min-height: calc(28px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_close01.svg); } .icon_close2.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0.1rem; background-image: url(../../images/common/icon_close02.svg); } .icon_close3.cm_icon { align-items: center; } .icon_close3.cm_icon:before { width: 2rem; min-width: calc(20px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_close03.svg); } .icon_close4.cm_icon { align-items: center; } .icon_close4.cm_icon:before { width: 2.8rem; min-width: calc(28px * 0.8); height: 2.8rem; min-height: calc(28px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_close04.svg); } .icon_check1.cm_icon:before { width: 1.5rem; min-width: calc(15px * 0.8); height: 1rem; min-height: calc(10px * 0.8); margin-top: 0.5rem; background-image: url(../../images/common/icon_check03.svg); } .icon_check2.cm_icon { align-items: center; } .icon_check2.cm_icon:before { width: 3rem; min-width: calc(30px * 0.8); height: 2rem; min-height: calc(20px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_check04.svg); } .icon_check3.cm_icon { align-items: center; } .icon_check3.cm_icon:before { width: 2.5rem; min-width: calc(25px * 0.8); height: 1.6rem; min-height: calc(16px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_check05.svg); } .icon_check4.cm_icon { align-items: center; } .icon_check4.cm_icon:before { width: 2.5rem; min-width: calc(25px * 0.8); height: 1.6rem; min-height: calc(16px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_check06.svg); } .icon_info1.cm_icon { align-items: center; } .icon_info1.cm_icon:before { width: 2.3rem; min-width: calc(23px * 0.8); height: 2.3rem; min-height: calc(23px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_info01.svg); } .icon_info2.cm_icon { align-items: center; } .icon_info2.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2.2rem; min-height: calc(22px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_info02.svg); } .icon_info3.cm_icon { align-items: center; } .icon_info3.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2.2rem; min-height: calc(22px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_info03.svg); } .icon_info4.cm_icon { align-items: center; } .icon_info4.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2.2rem; min-height: calc(22px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_info04.svg); } .icon_link1.cm_icon { align-items: center; } .icon_link1.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2.2rem; min-height: calc(22px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_link01.svg); } .icon_link2.cm_icon { align-items: center; } .icon_link2.cm_icon:before { width: 2.2rem; min-width: calc(22px * 0.8); height: 2.2rem; min-height: calc(22px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_link02.svg); } .icon_link3.cm_icon { align-items: center; } .icon_link3.cm_icon:before { width: 1.7rem; min-width: calc(17px * 0.8); height: 1.7rem; min-height: calc(17px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_link03.svg); } .icon_link4.cm_icon { align-items: center; } .icon_link4.cm_icon:before { width: 1.7rem; min-width: calc(17px * 0.8); height: 1.7rem; min-height: calc(17px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_link04.svg); } .icon_location1.cm_icon { align-items: center; } .icon_location1.cm_icon:before { width: 1.6rem; min-width: calc(16px * 0.8); height: 1.9rem; min-height: calc(19px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_location01.svg); } .icon_location2.cm_icon { align-items: center; } .icon_location2.cm_icon:before { width: 1.6rem; min-width: calc(16px * 0.8); height: 1.9rem; min-height: calc(19px * 0.8); margin-top: 0; background-image: url(../../images/common/icon_location02.svg); } /* 공통 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 slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } @keyframes stampEffect1 { 0% { transform: scale(0.3) rotate(-15deg); filter: blur(1px); opacity: 0; } 50% { transform: scale(1.05) rotate(-5deg); filter: blur(0px); opacity: 0.8; } 70% { transform: scale(0.95) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes stampEffect2 { 0% { opacity: 0; } 30% { transform: rotate(-2deg) scale(1.5); transform-origin: 50% 50%; opacity: 0.5; transition: all 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335); } 100% { transform: scale(1); opacity: 1; } } /* 공통 라벨 */ .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: 500; font-size: 1.4rem; vertical-align: baseline; } .cm_label.status.label1 { border: 1px solid #daedff; background-color: #daedff; color: #0d6ac5; } .cm_label.status.label2 { border: 1px solid #ffe0d7; background-color: #ffe0d7; color: #DA6039; } .cm_label.status.label3 { border: 1px solid #e7e7e7; background-color: #e7e7e7; color: #666; } .cm_label.status.label1.type2 { border: 1px solid #000; background-color: #fff; color: #000; } .cm_label.status.label2.type2 { border: 1px solid var(--cm_color2); background-color: #fff; color: var(--cm_color2); } /* 공통 태그 */ .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; } .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; } .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: 3rem; } .list1.cm_list .list_body .list_item { width: calc((100% - 6rem) / 3); } .list1.cm_list .list_body .list_item .item_box { display: flex; flex-direction: column; height: 100%; border: 1px solid #ddd; background-color: #fff; transition: box-shadow 0.2s; } .list1.cm_list .list_body .list_item .item_box:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid var(--cm_color2); content: ""; opacity: 0; transition: opacity 0.2s; } .list1.cm_list .list_body .list_item .item_box > div { color: #222; } .list1.cm_list .list_body .list_item .item_box .item_thumb { flex-shrink: 0; height: 13rem; border-bottom: 1px solid #ddd; } .list1.cm_list .list_body .list_item .item_box .item_thumb .thumb_box { display: flex; align-items: center; justify-content: center; height: 100%; padding: 1rem 2rem; background-color: #fff; } .list1.cm_list .list_body .list_item .item_box .item_thumb .thumb_box:after { display: none; } .list1.cm_list .list_body .list_item .item_box .item_thumb .thumb_box > .thumb_img { position: static; width: auto; max-width: 20rem; height: auto; max-height: 6.5rem; object-fit: none; } .list1.cm_list .list_body .list_item .item_box .item_desc { padding: 4rem 4rem 3rem; } .list1.cm_list .list_body .list_item .item_box .item_title { width: 100%; font-size: 2.4rem; line-height: 1.3; text-align: left; word-break: keep-all; } .list1.cm_list .list_body .list_item .item_box .item_info { margin-top: 2rem; } .list1.cm_list .list_body .list_item .item_box .item_info dl { display: flex; margin-bottom: 0.7rem; font-size: 1.6rem; } .list1.cm_list .list_body .list_item .item_box .item_info dl:last-child { margin-bottom: 0; } .list1.cm_list .list_body .list_item .item_box .item_info dl dt { min-width: 8.5rem; padding-right: 1rem; font-weight: 500; } .list1.cm_list .list_body .list_item .item_box .item_info dl dd { color: #777; } .list1.cm_list .list_body .list_item .item_box .item_tag { max-height: 8.7rem; margin-top: 1.5rem; overflow: hidden; } .list1.cm_list .list_body .list_item .item_box:hover { box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1); } .list1.cm_list .list_body .list_item .item_box:hover:after { opacity: 1; } /* list2 */ .list2.cm_list .list_body { display: flex; flex-wrap: wrap; gap: 3rem; } .list2.cm_list .list_body .list_item { width: calc((100% - 6rem) / 3); } .list2.cm_list .list_body .list_item .item_box { display: flex; flex-direction: column; height: 100%; border: 3px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; } .list2.cm_list .list_body .list_item .item_box > div { color: #222; } .list2.cm_list .list_body .list_item .item_box .item_thumb { flex-shrink: 0; } .list2.cm_list .list_body .list_item .item_box .item_thumb .thumb_box:after { padding-top: 100%; } .list2.cm_list .list_body .list_item .item_box .item_thumb .thumb_box > .thumb_img { object-position: center top; } .list2.cm_list .list_body .list_item .item_box.end_event .item_thumb .thumb_box:before { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); content: ""; } .list2.cm_list .list_body .list_item .item_box .item_desc { height: 100%; padding: 3.5rem; background-color: #f6f6f6; } .list2.cm_list .list_body .list_item .item_box .item_label { display: flex; flex-wrap: wrap; margin-bottom: 2rem; gap: 5px; } .list2.cm_list .list_body .list_item .item_box .item_label > span { border-bottom: 2px solid #ccc; font-size: 1.4rem; } .list2.cm_list .list_body .list_item .item_box .item_dday { margin-bottom: 1rem; color: #000; font-weight: 700; font-size: 2.4rem; } .list2.cm_list .list_body .list_item .item_box .item_title { width: 100%; color: #333; font-weight: 500; font-size: 2.3rem; line-height: 1.3; text-align: left; word-break: keep-all; } .list2.cm_list .list_body .list_item .item_box .item_date { margin-top: 1rem; color: #444; font-weight: 500; font-size: 1.7rem; } .list2.cm_list .list_body .list_item .item_box .item_info { display: flex; flex-direction: column; width: 100%; margin-top: 3rem; } .list2.cm_list .list_body .list_item .item_box .item_info dl { display: flex; align-items: center; width: 100%; } .list2.cm_list .list_body .list_item .item_box .item_info dl dt { width: 100%; padding-right: 1.5rem; overflow: hidden; font-weight: 400; font-size: 1.7rem; text-overflow: ellipsis; white-space: nowrap; } .list2.cm_list .list_body .list_item .item_box .item_info dl dd { flex-shrink: 0; } .list2.cm_list .list_body .list_item .item_box .item_info dl dd .item_type { display: flex; align-items: center; justify-content: center; height: 4rem; padding: 0.5rem 1.5rem; border: 1px solid #eee; border-radius: 5px; background-color: #eee; font-weight: 700; } .list2.cm_list .list_body .list_item .item_box .item_info dl dd .item_type.type1 { background-color: #000; color: var(--cm_color1); } .list2.cm_list .list_body .list_item .item_box .item_info dl dd .item_type.type2 { border-color: #000; background-color: #f6f6f6; color: #000; } .list2.cm_list .list_body .list_item .btn_bookmark { position: absolute; top: calc((1170px - 6rem) / 3 + 3.5rem); right: 3.5rem; width: 1.8rem; height: 2.2rem; overflow: hidden; background: url(../../images/common/icon_bookmark01.svg) no-repeat center/contain; font-size: 1px; text-indent: -9999px; } .list2.cm_list .list_body .list_item .btn_bookmark.on { background: url(../../images/common/icon_bookmark01_on.svg) no-repeat center/contain; } .list2.cm_list .list_body .list_item .item_box:hover { border-color: var(--cm_color1); box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1); } .list2.cm_list .list_body .list_item .item_box:hover:after { opacity: 1; } .list2.cm_list.type2 { padding-top: 3rem; border-top: 2px solid #000; } /* list3 */ .list3.cm_list .list_body { display: flex; flex-direction: column; gap: 3rem; word-break: keep-all; } .list3.cm_list .list_body .list_item { width: 100%; } .list3.cm_list .list_body .list_item .item_box { display: flex; position: relative; min-height: 27.7rem; border: 1px solid #ddd; color: #222; transition: box-shadow 0.2s; } .list3.cm_list .list_body .list_item .item_box:after { position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border: 3px solid var(--cm_color1); content: ""; opacity: 0; transition: opacity 0.2s; } .list3.cm_list .list_body .list_item .item_box .item_thumb { flex-shrink: 0; width: 37rem; } .list3.cm_list .list_body .list_item .item_box .item_thumb .thumb_box:after { display: none; } .list3.cm_list .list_body .list_item .item_box .item_thumb .thumb_box { width: 100%; height: 100%; } .list3.cm_list .list_body .list_item .item_box .item_desc { position: relative; width: 100%; padding: 4.5rem 5rem; } .list3.cm_list .list_body .list_item .item_box .item_title { padding-right: 12rem; font-weight: 500; font-size: 2.8rem; line-height: 1.4; } .list3.cm_list .list_body .list_item .item_box .item_info { margin-top: 4rem; } .list3.cm_list .list_body .list_item .item_box .item_info dl { display: flex; align-items: flex-start; font-size: 1.7rem; } .list3.cm_list .list_body .list_item .item_box .item_info dl + dl { margin-top: 1.5rem; } .list3.cm_list .list_body .list_item .item_box .item_info dl dt { flex-shrink: 0; min-width: 12rem; padding-right: 2rem; font-weight: 500; } .list3.cm_list .list_body .list_item .item_box .item_info dl dd { width: 100%; color: #222; } .list3.cm_list .list_body .list_item .item_box .item_btn { position: absolute; top: 4rem; right: 5rem; } .list3.cm_list .list_body .list_item .item_box:hover { box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1); } .list3.cm_list .list_body .list_item .item_box:hover:after { opacity: 1; } /* list4 */ .list4.cm_list .list_body { display: flex; flex-wrap: wrap; gap: 3rem; word-break: keep-all; } .list4.cm_list .list_body .list_item { width: calc((100% - 6rem) / 3); } .list4.cm_list .list_body .list_item .item_box { display: block; position: relative; border: 1px solid #ddd; color: #222; font-size: 1.6rem; transition: box-shadow 0.2s; } .list4.cm_list .list_body .list_item .item_box .item_thumb { flex-shrink: 0; } .list4.cm_list .list_body .list_item .item_box .item_thumb .thumb_box:after { padding-top: 100%; } .list4.cm_list .list_body .list_item .item_box .item_desc { position: relative; padding: 3rem; } .list4.cm_list .list_body .list_item .item_box .item_text { display: inline-block; max-width: 100%; margin-bottom: 1.5rem; padding-bottom: 0.5rem; overflow: hidden; border-bottom: 1px solid #ddd; text-overflow: ellipsis; white-space: nowrap; } .list4.cm_list .list_body .list_item .item_box .item_title { width: 100%; margin-bottom: 2rem; overflow: hidden; font-weight: 500; font-size: 2.8rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .list4.cm_list .list_body .list_item .item_box .item_info { display: flex; width: calc(100% + 3rem + 3rem); margin-bottom: -3rem; margin-left: -3rem; padding: 1.5rem 3rem; background-color: #f8f8f8; font-size: 1.5rem; line-height: 1.5; } .list4.cm_list .list_body .list_item .item_box .item_info dt { flex-shrink: 0; color: #777; } .list4.cm_list .list_body .list_item .item_box .item_info dd { display: -webkit-box; width: 100%; height: 4.5rem; padding-left: 1rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .list4.cm_list .list_body .list_item .item_box:hover { box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1); } .list4.cm_list .list_body .list_item .item_box:hover .item_title { text-decoration: underline; } /* list view */ .cm_list_view { z-index: 1; position: relative; word-break: keep-all; } .cm_list_view .view_top { display: flex; z-index: 1; position: relative; align-items: flex-start; margin-bottom: 10rem; } .cm_list_view .view_bookmark { z-index: 3; position: absolute; top: 0; right: 0; } .cm_list_view .view_bookmark .btn_bookmark { display: block; width: 6rem; height: 6rem; border: 1px solid #ddd; background: #fff url(../../images/common/icon_bookmark01.svg) no-repeat center/1.8rem; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1); font-size: 0; } .cm_list_view .view_bookmark .btn_bookmark.active { background: #fff url(../../images/common/icon_bookmark01_on.svg) no-repeat center/1.8rem; } .cm_list_view .view_swiper { z-index: 2; position: relative; flex-shrink: 0; width: 37rem; } .cm_list_view .view_swiper .swiper-slide { position: relative; } .cm_list_view .view_swiper .swiper-slide:after { display: block; padding-top: 100%; content: ""; } .cm_list_view .view_swiper .swiper-slide .thumb_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .cm_list_view .view_swiper .swiper-btn-wrap { display: flex; z-index: 2; position: absolute; bottom: -3.5rem; left: 0; align-items: center; height: 7rem; padding: 0 1rem; background-color: var(--cm_color2); } .cm_list_view .view_swiper .swiper-btn-wrap .swiper-pagination { position: static; min-width: 7rem; padding: 0 1rem; color: #fff; font-size: 1.5rem; } .cm_list_view .view_swiper .swiper-btn-wrap .swiper-pagination .swiper-pagination-current { color: var(--cm_color1); font-weight: 600; } .cm_list_view .view_swiper .swiper-btn-wrap .swiper-btn { display: block; position: static; flex-shrink: 0; width: 6rem; height: 7rem; background-position: center; background-size: 3rem; background-repeat: no-repeat; font-size: 0; } .cm_list_view .view_swiper .swiper-btn-wrap .swiper-btn.swiper-prev { background-image: url(../../images/common/icon_arr04_left.svg); } .cm_list_view .view_swiper .swiper-btn-wrap .swiper-btn.swiper-next { background-image: url(../../images/common/icon_arr04_right.svg); } .cm_list_view .view_swiper .thumb_box { position: relative; width: 100%; } .cm_list_view .view_swiper .thumb_box:after { display: block; padding-top: 100%; content: ""; } .cm_list_view .view_swiper .thumb_box .thumb_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .cm_list_view .view_swiper .view_contact { margin-top: 2rem; padding-left: 4rem; } .cm_list_view .view_swiper .view_contact dl { display: flex; position: relative; justify-content: flex-start; gap: 3rem; font-size: 1.6rem; } .cm_list_view .view_swiper .view_contact dl + dl { margin-top: 1rem; } .cm_list_view .view_swiper .view_contact dl dt { position: relative; flex-shrink: 0; } .cm_list_view .view_swiper .view_contact dl dt:after { position: absolute; top: 50%; right: -1.5rem; width: 1px; height: 1.6rem; margin-top: -0.75rem; background-color: #ccc; content: ""; } .cm_list_view .view_swiper .view_contact dl dt:last-child:after { display: none; } .cm_list_view .view_swiper .view_contact dl dd { width: 100%; } .cm_list_view .view_swiper .view_contact .cont_sns { display: flex; align-items: center; margin-top: 3rem; gap: 1rem; } .cm_list_view .view_swiper .view_contact .cont_sns .btn_sns { display: flex; align-items: center; justify-content: center; min-width: 5rem; height: 5rem; border-radius: 5rem; font-size: 0; } .cm_list_view .view_swiper .view_contact .cont_sns .btn_sns1 { background: url(../../images/common/icon_sns01.svg) no-repeat center/contain; } .cm_list_view .view_swiper .view_contact .cont_sns .btn_sns2 { background: url(../../images/common/icon_sns02.svg) no-repeat center/contain; } .cm_list_view .view_swiper .view_contact .cont_sns .btn_sns3 { background: url(../../images/common/icon_sns03.svg) no-repeat center/contain; } .cm_list_view .view_swiper .view_contact .cont_sns .btn_sns4 { padding: 0 2rem; border: 1px solid #ddd; background-color: #fff; color: #777; font-size: 1.6rem; } .cm_list_view .view_desc { position: relative; width: 100%; padding-top: 2rem; padding-left: 9rem; } .cm_list_view .view_desc .cm_tag { padding-right: 8rem; } .cm_list_view .view_desc .view_title { font-size: 3.8rem; } .cm_list_view .view_desc .view_info { display: flex; margin-top: 3rem; gap: 4rem; } .cm_list_view .view_desc .view_info dl { display: flex; position: relative; } .cm_list_view .view_desc .view_info dl:after { position: absolute; top: 50%; left: -2rem; width: 1px; height: 1.6rem; margin-top: -0.75rem; background-color: #ccc; content: ""; } .cm_list_view .view_desc .view_info dl:first-child:after { display: none; } .cm_list_view .view_desc .view_info dl dt { flex-shrink: 0; padding-right: 1rem; font-weight: 500; } .cm_list_view .view_desc .view_info dl dd { width: 100%; } .cm_list_view .view_desc .view_overview { z-index: 1; position: relative; min-height: 40rem; margin-top: 4rem; padding-top: 6rem; padding-right: 2rem; padding-bottom: 7rem; } .cm_list_view .view_desc .view_overview:after { z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: -46rem; background-color: #f6f6f6; content: ""; } .cm_list_view .view_desc .view_overview dl { display: flex; position: relative; align-items: flex-start; font-size: 1.7rem; } .cm_list_view .view_desc .view_overview dl + dl { margin-top: 1.5rem; } .cm_list_view .view_desc .view_overview dl dt { flex-shrink: 0; min-width: 16rem; padding-right: 2rem; color: #555; } .cm_list_view .view_desc .view_overview dl dd { width: 100%; } .cm_list_view .view_detail .detail_box + .detail_box { margin-top: 5rem; } .cm_list_view .view_detail .detail_box .cm_box.box2 { color: #333; font-size: 1.4rem; line-height: 1.8; } .cm_list_view .view_detail .detail_box .cm_editor { color: #333; font-size: 1.4rem; line-height: 1.8; font-family: "Verdana", "NotoSansKR", "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif !important; } .cm_list_view .view_cont { min-height: 30rem; padding: 4rem; border-top: 1px solid #000; } /* list view2 */ .cm_list_view2 { z-index: 1; position: relative; border-top: 1px solid #ddd; word-break: keep-all; } .cm_list_view2 .view_option { display: flex; z-index: 2; position: absolute; top: 2.5rem; right: 0; gap: 1rem; } .cm_list_view2 .view_option .cm_btn { min-height: 6rem; border-radius: 0; } .cm_list_view2 .view_option .btn_bookmark { display: block; width: 6rem; height: 6rem; border: 1px solid #ddd; background: #fff url(../../images/common/icon_bookmark01.svg) no-repeat center/1.8rem; font-size: 0; } .cm_list_view2 .view_option .btn_bookmark.active { background: #fff url(../../images/common/icon_bookmark01_on.svg) no-repeat center/1.8rem; } .cm_list_view2 .view_head { padding: 3rem 0; padding-right: 22rem; } .cm_list_view2 .view_head .view_title { position: relative; font-weight: 500; font-size: 3.6rem; } .cm_list_view2 .view_head .view_title > span { z-index: 1; position: relative; } .cm_list_view2 .view_head .view_title > span:after { position: absolute; top: -3.6rem; left: 0; width: 100%; height: 1px; background-color: #000; content: ""; } .cm_list_view2 .view_head .view_title > span > em { display: inline-flex; align-items: center; min-height: 3.6rem; margin-left: 2rem; padding: 0 1rem; border: 2px solid var(--cm_color1); border-radius: 5px; background-color: #fff; font-weight: 400; font-size: 1.5rem; vertical-align: middle; } .cm_list_view2 .view_body { display: flex; align-items: flex-start; } .cm_list_view2 .view_body .view_thumb { z-index: 2; position: relative; flex-shrink: 0; width: 25rem; margin-top: 5rem; } .cm_list_view2 .view_body .view_thumb .thumb_box { display: flex; position: relative; align-items: center; justify-content: center; width: 25rem; overflow: hidden; border: 1px solid #ddd; border-radius: 5px; background-color: #fff; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1); } .cm_list_view2 .view_body .view_thumb .thumb_box:after { display: block; width: 100%; padding-top: 100%; content: ""; } .cm_list_view2 .view_body .view_thumb .thumb_box .thumb_img { position: absolute; top: 25%; right: 15%; bottom: 25%; left: 15%; width: 70%; height: 50%; object-fit: contain; } .cm_list_view2 .view_body .view_thumb .view_sns { display: flex; align-items: center; margin-top: 2rem; gap: 1rem; } .cm_list_view2 .view_body .view_thumb .view_sns .btn_sns { display: flex; align-items: center; justify-content: center; min-width: 5rem; height: 5rem; border-radius: 5rem; font-size: 0; } .cm_list_view2 .view_body .view_thumb .view_sns .btn_sns1 { background: url(../../images/common/icon_sns01.svg) no-repeat center/contain; } .cm_list_view2 .view_body .view_thumb .view_sns .btn_sns2 { background: url(../../images/common/icon_sns02.svg) no-repeat center/contain; } .cm_list_view2 .view_body .view_thumb .view_sns .btn_sns3 { background: url(../../images/common/icon_sns03.svg) no-repeat center/contain; } .cm_list_view2 .view_body .view_detail { z-index: 1; position: relative; width: 100%; padding: 5rem; padding-bottom: 7rem; padding-left: 10rem; } .cm_list_view2 .view_body .view_detail:after { z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: -8rem; background-color: #f6f6f6; content: ""; } .cm_list_view2 .view_body .view_detail .view_cate { display: flex; margin-top: 2rem; margin-bottom: 2rem; } .cm_list_view2 .view_body .view_detail .view_cate > span { padding-bottom: 0.3rem; border-bottom: 1px solid #929292; color: #555; font-size: 1.7rem; } .cm_list_view2 .view_body .view_detail .view_link { margin-bottom: 3rem; } .cm_list_view2 .view_body .view_detail .view_info { margin-bottom: 4rem; } .cm_list_view2 .view_body .view_detail .view_info dl { display: flex; align-items: flex-start; font-size: 1.7rem; line-height: 1.6; } .cm_list_view2 .view_body .view_detail .view_info dl + dl { margin-top: 1rem; } .cm_list_view2 .view_body .view_detail .view_info dl dt { flex-shrink: 0; min-width: 13rem; padding-right: 1.5rem; color: #555; } .cm_list_view2 .view_body .view_detail .view_info dl dd { width: 100%; font-size: 1.8rem; } .cm_list_view2 .view_cont { margin-top: 7rem; } .cm_list_view2 .view_cont .cont_box { display: flex; } .cm_list_view2 .view_cont .cont_box + .cont_box { margin-top: 10rem; } .cm_list_view2 .view_cont .cont_box .box_head { flex-shrink: 0; width: 25rem; padding-top: 2.5rem; font-weight: 700; font-size: 2.8rem; } .cm_list_view2 .view_cont .cont_box .box_body { width: 100%; padding-top: 3rem; border-top: 1px solid #ddd; color: #444; line-height: 2; } .cm_list_view2 .view_cont .cont_box .view_list1 { display: flex; flex-wrap: wrap; gap: 3rem; } .cm_list_view2 .view_cont .cont_box .view_list1 .list_item { width: calc((100% - 3rem) / 2); padding: 3rem 4rem; border: 1px solid #ddd; background-color: #fff; color: #222; } .cm_list_view2 .view_cont .cont_box .view_list1 .list_item .item_title { margin-bottom: 1.5rem; font-weight: 500; font-size: 2.4rem; } .cm_list_view2 .view_cont .cont_box .view_list1 .list_item .item_desc dl { display: flex; font-size: 1.7rem; } .cm_list_view2 .view_cont .cont_box .view_list1 .list_item .item_desc dl dt { flex-shrink: 0; min-width: 11rem; padding-right: 1.5rem; font-weight: 500; } .cm_list_view2 .view_cont .cont_box .view_list1 .list_item .item_desc dl dd { width: 100%; color: #333; } .cm_list_view2 .view_cont .cont_box2 { display: flex; align-items: flex-start; background-color: #f6f6f6; } .cm_list_view2 .view_cont .cont_box2 .box_thumb { position: relative; flex-shrink: 0; width: 37rem; } .cm_list_view2 .view_cont .cont_box2 .box_thumb:after { display: block; padding-top: 100%; content: ""; } .cm_list_view2 .view_cont .cont_box2 .box_thumb .thumb_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .cm_list_view2 .view_cont .cont_box2 .box_desc { width: 100%; padding: 5rem 6rem; } .cm_list_view2 .view_cont .cont_box2 .box_desc .box_title { margin-bottom: 2rem; font-weight: 500; font-size: 3rem; } .cm_list_view2 .view_cont .cont_box2 .box_desc .box_text { margin-bottom: 4rem; color: #333; font-size: 1.6rem; line-height: 1.8; } .cm_list_view2 .view_cont .cont_box2 .box_desc .box_info { display: flex; gap: 4rem; } .cm_list_view2 .view_cont .cont_box2 .box_desc .box_info > a:hover { text-decoration: underline; } .cm_list_view2 .view_cont .cont_box3 { display: flex; align-items: flex-start; padding: 4rem; border: 1px solid #ddd; background-color: #fff; } .cm_list_view2 .view_cont .cont_box3 .box_thumb { position: relative; flex-shrink: 0; width: 30rem; } .cm_list_view2 .view_cont .cont_box3 .box_thumb:after { display: block; padding-top: 100%; content: ""; } .cm_list_view2 .view_cont .cont_box3 .box_thumb .thumb_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .cm_list_view2 .view_cont .cont_box3 .box_desc { width: 100%; padding-top: 3rem; padding-left: 8rem; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_title { margin-bottom: 1rem; font-weight: 500; font-size: 3rem; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_info { display: flex; margin-bottom: 3rem; gap: 4rem; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_info dl { display: flex; position: relative; font-size: 1.7rem; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_info dl:after { position: absolute; top: 50%; right: -2rem; width: 1px; height: 1.4rem; margin-top: -0.7rem; background-color: #ddd; content: ""; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_info dl:last-child:after { display: none; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_info dl dt { font-weight: 500; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_info dl dd { padding-left: 2rem; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_text { color: #333; font-size: 1.6rem; line-height: 1.8; } .cm_list_view2 .view_cont .cont_box4 .box_head { margin-bottom: 2rem; font-weight: 700; font-size: 2.8rem; } .cm_list_view2 .view_cont .cont_box4 .box_body .media_box { position: relative; width: 100%; max-width: 75rem; margin: 0 auto; } .cm_list_view2 .view_cont .cont_box4 .box_body .media_box:after { display: block; padding-top: 60%; content: ""; } .cm_list_view2 .view_cont .cont_box4 .box_body .media_box > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cm_list_view2 .view_body.type2 { padding: 4rem; padding-right: 0; } .cm_list_view2 .view_body.type2 .view_thumb { margin: 0; } .cm_list_view2 .view_body.type2 .view_thumb .thumb_box { border-radius: 0; } .cm_list_view2 .view_body.type2 .view_detail { padding: 0; } .cm_list_view2 .view_body.type2 .view_detail:after { display: none; } .cm_list_view2 .view_body.type2 .view_detail .detail_top { position: relative; padding-bottom: 3rem; padding-left: 10rem; } .cm_list_view2 .view_body.type2 .view_detail .detail_top:after { z-index: -1; position: absolute; top: -4rem; right: 0; bottom: 0; left: -29rem; background-color: #333; content: ""; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_label { display: flex; align-items: center; color: #fff; font-size: 1.4rem; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_label .seed { display: flex; align-items: center; min-height: 3.5rem; margin-right: 1rem; padding: 0 1rem; border-radius: 5px; background-color: var(--cm_color1); color: #000; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_info { display: flex; align-items: center; margin: 0; margin-top: 2rem; gap: 10rem; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_info dl { align-items: center; color: #fff; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_info dl + dl { margin: 0; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_info dl dt { min-width: 0; margin: 0; color: #eee; font-weight: 400; font-size: 1.4rem; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_info dl dd { margin: 0; font-weight: 500; font-size: 2.5rem; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_info dl dd .large { font-weight: 700; font-size: 3.2rem; } .cm_list_view2 .view_body.type2 .view_detail .detail_btm { position: relative; min-height: 11rem; padding-top: 3rem; padding-left: 10rem; } .cm_list_view2 .view_body.type2 .view_detail .detail_btm:after { z-index: -1; position: absolute; top: 0; right: 0; bottom: -4rem; left: -29rem; background-color: #f6f6f6; content: ""; } .cm_list_view2 .view_body.type2 .view_detail .detail_btm .view_link { display: flex; gap: 4rem; } .cm_list_view2 .view_body.type2 .view_detail .detail_btm .view_link > a:hover { text-decoration: underline; } /* 공통 데이터 없음 */ .cm_nodata { text-align: center; word-break: keep-all; } .cm_nodata .no_inner { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 43rem; padding: 8rem 3rem; border: 3px solid #000; background-color: #fff; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1); } .cm_nodata .img_no { max-width: 18rem; } .cm_nodata .text1 { margin-top: 4rem; font-weight: 300; font-size: 3rem; } .cm_nodata .text1 .text-bold { font-weight: 500 !important; } .cm_nodata .text2 { margin-top: 3rem; color: #444; font-weight: 300; font-size: 2rem; } /* overview1 */ .cm_overview1 { position: relative; } .cm_overview1 .ovw_box { position: relative; padding: 4rem 5rem; padding-right: 35rem; border: 1px solid #ddd; background-color: #fff; } .cm_overview1 .ovw_box + .ovw_box { margin-top: 2rem; } .cm_overview1 .ovw_title { display: flex; align-items: center; gap: 5rem; } .cm_overview1 .ovw_title .ovw_name { font-weight: 500; font-size: 2.8rem; } .cm_overview1 .ovw_title .ovw_desc { position: relative; color: #222; font-weight: 300; font-size: 2rem; } .cm_overview1 .ovw_title .ovw_desc:after { position: absolute; top: 50%; left: -2.6rem; width: 1px; height: 2.2rem; margin-top: -1.1rem; background-color: #ddd; content: ""; } .cm_overview1 .ovw_info { margin-top: 3rem; } .cm_overview1 .ovw_info dl { display: flex; color: #222; } .cm_overview1 .ovw_info dl + dl { margin-top: 1rem; } .cm_overview1 .ovw_info dl dt { flex-shrink: 0; min-width: 15rem; padding-right: 2rem; font-weight: 500; font-size: 1.7rem; } .cm_overview1 .ovw_info dl dd { width: 100%; font-size: 1.7rem; } .cm_overview1 .ovw_info .info_text { font-size: 1.7rem; line-height: 1.6; word-break: keep-all; } .cm_overview1 .ovw_btn { position: absolute; right: 5rem; bottom: 4rem; } .cm_overview1 .ovw_label { position: absolute; top: 4rem; right: 5rem; } .cm_overview1 .ovw_box.type2 { padding-right: 5rem; border: 1px solid #f6f6f6; background-color: #f6f6f6; } .cm_overview1 .ovw_box.type2 .ovw_name { font-size: 2.2rem; } .cm_overview1 .ovw_box.type2 .ovw_desc { color: #666; font-size: 1.7rem; } .cm_overview1 .ovw_box.type2 .ovw_info { margin-top: 2rem; } .cm_overview1 .ovw_box.type3 .ovw_info { margin-top: 0; } .cm_overview1 .ovw_box.type3 .ovw_info dl + dl { margin-top: 2rem; } /* overview2 */ .cm_overview2 { padding: 4rem; background-color: #f3f3f3; } .cm_overview2 .ovw_box { display: flex; align-items: flex-start; color: #444; } .cm_overview2 .ovw_box .ovw_title { flex-shrink: 0; padding-right: 4rem; } .cm_overview2 .ovw_box .ovw_title > span { padding-bottom: 0.7rem; border-bottom: 1px solid #898989; font-size: 1.8rem; } /* overview3 */ .cm_overview3 { padding: 3rem 4rem; border: 1px solid #ddd; background-color: #fff; } .cm_overview3 .ovw_box { display: flex; flex-wrap: wrap; gap: 2rem 3rem; } .cm_overview3 .ovw_box .ovw_item { display: flex; width: calc((100% - 3rem) / 2); } .cm_overview3 .ovw_box .ovw_title { flex-shrink: 0; min-width: 15rem; padding-right: 2rem; font-weight: 500; font-size: 1.6rem; } .cm_overview3 .ovw_box .ovw_desc { width: 100%; color: #333; } /* overview4 */ .cm_overview4 { display: flex; flex-wrap: wrap; border: 1px solid #ddd; background-color: #fff; } .cm_overview4 .ovw_box { width: 50%; padding: 3.5rem 4rem 4rem; } .cm_overview4 .ovw_box.ovw_right { border-left: 1px solid #ddd; } .cm_overview4 .ovw_title { display: flex; align-items: center; margin-bottom: 4rem; color: #333; font-weight: 500; font-size: 2rem; } .cm_overview4 .ovw_title > span { display: flex; align-items: center; justify-content: center; height: 4.5rem; margin-right: 2rem; padding: 0 2.5rem; border-radius: 100px; background-color: #333; color: var(--cm_color1); font-size: 1.6rem; } .cm_overview4 .ovw_calendar { position: relative; } .cm_overview4 .ovw_calendar .ovw_year { position: relative; font-weight: 500; font-size: 1.8rem; } .cm_overview4 .ovw_calendar .ovw_year .ovw_month { margin-right: 1rem; font-weight: 700; } .cm_overview4 .ovw_calendar .ovw_ctrl { display: flex; position: absolute; top: 0; right: 0; gap: 2rem; } .cm_overview4 .ovw_calendar .ovw_ctrl .btn_ctrl { display: block; width: 2.5rem; height: 2.5rem; background-position: center; background-size: contain; background-repeat: no-repeat; font-size: 0; } .cm_overview4 .ovw_calendar .ovw_ctrl .btn_ctrl.btn_prev { background-image: url(../../images/common/icon_arr_select_on.svg); } .cm_overview4 .ovw_calendar .ovw_ctrl .btn_ctrl.btn_next { background-image: url(../../images/common/icon_arr_select.svg); } .cm_overview4 .ovw_calendar .ovw_date_table { margin-top: 2.5rem; } .cm_overview4 .ovw_calendar .ovw_date_table table { width: 100%; border: 0; border-collapse: collapse; table-layout: fixed; } .cm_overview4 .ovw_calendar .ovw_date_table table thead th { height: 5rem; border-bottom: 1px solid #ddd; color: var(--cm_color2); font-weight: 700; font-size: 1.4rem; text-align: center; } .cm_overview4 .ovw_calendar .ovw_date_table table tbody td { padding: 0.5rem; } .cm_overview4 .ovw_calendar .ovw_date_table .btn_date { display: flex; align-items: center; justify-content: center; width: 3.8rem; height: 3.8rem; margin: 0 auto; padding-bottom: 1px; border: 2px solid #d4f3bf; border-radius: 100%; background-color: #d4f3bf; font-size: 1.4rem; } .cm_overview4 .ovw_calendar .ovw_date_table .btn_date.today { border-color: var(--cm_color1) !important; } .cm_overview4 .ovw_calendar .ovw_date_table .btn_date.active { border-color: var(--cm_color1) !important; background-color: var(--cm_color1) !important; font-weight: 700; } .cm_overview4 .ovw_calendar .ovw_date_table .btn_date.disabled { border-color: transparent !important; background: transparent !important; color: #aaa !important; cursor: default; } .cm_overview4 .ovw_time { height: 34rem; overflow: auto; } .cm_overview4 .ovw_time .time_list { display: flex; flex-wrap: wrap; gap: 1rem; } .cm_overview4 .ovw_time .time_list .list_item { width: calc((100% - 1rem) / 2); } .cm_overview4 .ovw_time .time_list .item_check { position: relative; overflow: hidden; } .cm_overview4 .ovw_time .time_list .item_check input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 50%; background: transparent; -webkit-appearance: checkbox; z-index: 2; opacity: 0; clip: auto; } .cm_overview4 .ovw_time .time_list .item_check input + label { display: flex; align-items: center; justify-content: center; height: 7rem; padding: 1.5rem; border: 1px solid #ddd; color: #333; font-size: 1.7rem; text-align: center; } .cm_overview4 .ovw_time .time_list .item_check:hover input + label { border: 3px solid var(--cm_color1); } .cm_overview4 .ovw_time .time_list .item_check input:checked + label { border-color: var(--cm_color1); background-color: var(--cm_color1); color: #000; font-weight: 700; } .cm_overview4 .ovw_time .time_list .item_check input:disabled + label { border-color: #eee !important; background-color: #eee !important; color: #aaa !important; text-decoration: line-through; } .cm_overview4 .ovw_result { display: flex; align-items: center; width: 100%; min-height: 9rem; padding: 1.5rem 4rem; background-color: #333; color: #fff; font-weight: 500; } .cm_overview4 .ovw_result .result_date { display: flex; flex-shrink: 0; align-items: center; font-size: 2.2rem; } .cm_overview4 .ovw_result .result_date:before { display: block; flex-shrink: 0; width: 2.2rem; height: 2.2rem; margin-right: 1rem; background: url(../../images/common/icon_time01.svg) no-repeat center/contain; content: ""; } .cm_overview4 .ovw_result .result_time { display: flex; width: 100%; padding-left: 3em; gap: 3rem; color: var(--cm_color1); font-size: 2.2rem; } .cm_overview4 .ovw_result.type2 * ~ .result_date:before { display: none; } .cm_overview4 .ovw_result.type2 .result_time { width: auto; padding-left: 2rem; gap: 0; } /* overview5 */ .cm_overview5 { padding: 3rem; border: 3px solid #000; } .cm_overview5 .ovw_title { margin-bottom: 2rem; font-weight: 500; font-size: 3rem; } .cm_overview5 .ovw_info { display: flex; gap: 4rem; } .cm_overview5 .ovw_info dl { display: flex; position: relative; color: #333; font-size: 1.8rem; } .cm_overview5 .ovw_info dl:after { position: absolute; top: 50%; left: -2rem; width: 1px; height: 1.6rem; margin-top: -0.75rem; background-color: #ccc; content: ""; } .cm_overview5 .ovw_info dl:first-child:after { display: none; } .cm_overview5 .ovw_info dl dt { flex-shrink: 0; padding-right: 2rem; font-weight: 500; } .cm_overview5 .ovw_info dl dd { width: 100%; font-weight: 400; } /* overview6 */ .cm_overview6 { max-height: 45rem; overflow: hidden; overflow-y: auto; } .cm_overview6 .facilities_list { border-top: 1px solid #9b9a9a; } .cm_overview6 .facilities_list > .list_item { border-bottom: 1px solid #ddd; } .cm_overview6 .facilities_list > .list_item .item_radio { position: relative; overflow: hidden; } .cm_overview6 .facilities_list > .list_item .item_radio input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 50%; background: transparent; -webkit-appearance: checkbox; z-index: 2; opacity: 0; clip: auto; } .cm_overview6 .facilities_list > .list_item .item_radio input + label { display: flex; align-items: center; height: 8rem; padding: 1rem 3rem; padding-left: 15rem; gap: 5rem; color: #333; font-size: 1.8rem; text-align: center; transition: background-color 0.3s; } .cm_overview6 .facilities_list > .list_item .item_radio input + label:before { position: absolute; top: 50%; left: 3rem; width: 2.6rem; height: 2.6rem; margin-top: -1.3rem; background: url(../../images/common/icon_check02.svg) no-repeat center/contain; content: ""; } .cm_overview6 .facilities_list > .list_item .item_radio input + label > span { position: relative; } .cm_overview6 .facilities_list > .list_item .item_radio input + label > span:after { position: absolute; top: 50%; left: -2.5rem; width: 1px; height: 1.6rem; margin-top: -0.8rem; background-color: #ddd; content: ""; } .cm_overview6 .facilities_list > .list_item .item_radio input + label > span:first-child:after { display: none; } .cm_overview6 .facilities_list > .list_item .item_radio:hover input + label { background-color: #f8f8f8; } .cm_overview6 .facilities_list > .list_item .item_radio input:checked + label:before { background: url(../../images/common/icon_check02_on.svg) no-repeat center/contain; } .cm_overview6 .facilities_list > .list_item .item_radio input:disabled + label { border-color: #eee !important; background-color: #eee !important; color: #aaa !important; text-decoration: line-through; } .cm_overview6 .facilities_list > .list_item .item_radio input:disabled + label:before { opacity: 0.3; } /* overview7 */ .cm_overview7 { position: relative; } .cm_overview7 .facilities_swiper { position: relative; width: 70rem; background-color: #f5f5f5; } .cm_overview7 .facilities_swiper .swiper-slide { position: relative; } .cm_overview7 .facilities_swiper .swiper-slide:after { display: block; width: 100%; padding-top: 50.286%; content: ""; } .cm_overview7 .facilities_swiper .swiper-slide .thumb_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .cm_overview7 .facilities_swiper .swiper-btn { position: absolute; top: 50%; width: 3rem; height: 3rem; background-position: center; background-size: 1.5rem; background-repeat: no-repeat; font-size: 0; } .cm_overview7 .facilities_swiper .swiper-prev { left: -4.5rem; background-image: url(../../images/common/icon_arr01_left.svg); } .cm_overview7 .facilities_swiper .swiper-next { right: -4.5rem; background-image: url(../../images/common/icon_arr01_right.svg); } .cm_overview7 .facilities_swiper .swiper-btn.swiper-button-disabled { display: none; } /* overview8 */ .cm_overview8 { padding: 0 3rem; } .cm_overview8 .ovw_box { display: flex; flex-direction: column; gap: 2rem; } .cm_overview8 .ovw_box .ovw_item { display: flex; font-size: 1.7rem; } .cm_overview8 .ovw_box .ovw_item .highlight { color: var(--cm_color1); font-weight: 500; } .cm_overview8 .ovw_box .ovw_item .ovw_title { flex-shrink: 0; font-weight: 500; } .cm_overview8 .ovw_box .ovw_item .ovw_desc { display: flex; flex-wrap: wrap; width: 100%; padding-left: 3rem; gap: 1rem 2.5rem; } /* overview9 */ .cm_overview9 { position: relative; } .cm_overview9 .ovw_select .ovw_select_list { display: flex; flex-direction: column; gap: 1rem; } .cm_overview9 .ovw_select .ovw_select_list .list_item { display: flex; position: relative; align-items: center; min-height: 6rem; padding: 0 2rem; padding-right: 0; border: 1px solid #ccc; background-color: #f5f5f5; color: #444; } .cm_overview9 .ovw_select .ovw_select_list .list_item .item_title { width: 100%; padding-right: 2rem; font-size: 1.6rem; } .cm_overview9 .ovw_select .ovw_select_list .list_item .item_info { display: flex; flex-shrink: 0; padding-right: 2rem; gap: 4rem; } .cm_overview9 .ovw_select .ovw_select_list .list_item .item_info dd { position: relative; } .cm_overview9 .ovw_select .ovw_select_list .list_item .item_info dd:after { position: absolute; top: 50%; left: -2rem; width: 1px; height: 1.6rem; margin-top: -0.8rem; background-color: #ddd; content: ""; } .cm_overview9 .ovw_select .ovw_select_list .list_item .item_btn { flex-shrink: 0; } .cm_overview9 .ovw_select .ovw_select_list .list_item .item_btn .btn_delete { width: 6rem; height: 6rem; background: url(../../images/common/icon_delete01.svg) no-repeat center/2rem; font-size: 0; } .cm_overview9 .ovw_search { position: relative; } .cm_overview9 .ovw_select + .ovw_search { margin-top: 3rem; } .cm_overview9 .ovw_search .ovw_search_form { display: flex; gap: 1rem; } .cm_overview9 .ovw_search .ovw_search_form .form_search { width: 100%; height: 6rem; padding: 1rem 2rem; border-radius: 5px; background-color: #f5f5f5; } .cm_overview9 .ovw_search .ovw_search_list { margin-top: 1rem; } .cm_overview9 .ovw_search .ovw_search_list .list_item { display: flex; position: relative; align-items: center; justify-content: space-between; min-height: 6rem; padding: 0 2rem; border-bottom: 1px solid #ccc; color: #444; } .cm_overview9 .ovw_search .ovw_search_list .list_item .item_title { flex-shrink: 0; width: 30%; font-size: 1.6rem; } .cm_overview9 .ovw_search .ovw_search_list .list_item .item_info { display: flex; width: 100%; padding-right: 2rem; padding-left: 2rem; } .cm_overview9 .ovw_search .ovw_search_list .list_item .item_btn { flex-shrink: 0; } .cm_overview9 .ovw_search .ovw_search_list .list_item:hover .item_title { text-decoration: underline; } /* overview10 */ .cm_overview10 .ovw_list { border: 1px solid #ccc; } .cm_overview10 .ovw_list .list_item { display: flex; position: relative; align-items: center; padding: 1rem 2rem; border-bottom: 1px solid #ddd; background-color: #fff; color: #444; font-size: 1.6rem; } .cm_overview10 .ovw_list .list_item:last-child { border-bottom: 0; } .cm_overview10 .ovw_list .list_item .item_title { flex-shrink: 0; width: 35%; padding-right: 2rem; } .cm_overview10 .ovw_list .list_item .item_file { display: flex; align-items: center; width: calc(65% - 20rem); font-size: 1.5rem; } .cm_overview10 .ovw_list .list_item .item_file.icon_file1.cm_icon:before { margin-top: 0; } .cm_overview10 .ovw_list .list_item .item_file > p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm_overview10 .ovw_list .list_item .item_btn { display: flex; flex-shrink: 0; justify-content: flex-end; width: 20rem; padding-left: 2rem; gap: 0.5rem; } /* overview11 */ .cm_overview11 { display: flex; position: relative; width: 100%; min-height: 40rem; background-color: #f3f3f3; } .cm_overview11 .ovw_left { position: relative; flex-shrink: 0; width: 40rem; padding: 5rem; background-color: #333; color: #fff; } .cm_overview11 .ovw_left .ovw_cate { display: inline-block; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #fff; } .cm_overview11 .ovw_left .ovw_title { width: 100%; margin-bottom: 2.5rem; color: var(--cm_color1); font-weight: 500; font-size: 3.8rem; } .cm_overview11 .ovw_left .ovw_info { display: flex; gap: 4rem; } .cm_overview11 .ovw_left .ovw_info > span { position: relative; } .cm_overview11 .ovw_left .ovw_info > span:after { position: absolute; top: 50%; left: -2rem; width: 1px; height: 1.6rem; margin-top: -0.8rem; background-color: #fff; content: ""; } .cm_overview11 .ovw_left .ovw_info > span:first-child:after { display: none; } .cm_overview11 .ovw_right { width: 100%; padding: 5rem; } .cm_overview11 .ovw_right .ovw_overview { height: 10rem; overflow: hidden; overflow-y: auto; color: #333; font-size: 1.7rem; } .cm_overview11 .ovw_right .ovw_overview dl + dl { margin-top: 2rem; } .cm_overview11 .ovw_right .ovw_overview dt { font-weight: 500; } .cm_overview11 .ovw_right .ovw_overview dd { margin-top: 1.5rem; } .cm_overview11 .ovw_right .ovw_overview dd.flex { flex-wrap: wrap; gap: 0.7rem 3rem; } /* overview12 */ .cm_overview12 { display: flex; gap: 3rem; word-break: keep-all; } .cm_overview12 .ovw_head { width: 30%; padding: 4rem; border-radius: 20px; background-color: #66ff00; font-size: 2.2rem; text-align: center; } .cm_overview12 .ovw_head .title_step { display: flex; flex-direction: column; align-items: center; padding: 0; } .cm_overview12 .ovw_head .title_step img { max-width: 9rem; margin-bottom: 1rem; } .cm_overview12 .ovw_body { width: 70%; padding: 4rem; border: 1px solid #ddd; background-color: #fff; } .cm_overview12 .ovw_body .ovw_title { margin-bottom: 2rem; font-weight: 500; font-size: 2.8rem; } .cm_overview12 .ovw_body .ovw_info dl { display: flex; flex-direction: column; } .cm_overview12 .ovw_body .ovw_info dl dt { font-weight: 500; font-size: 1.8rem; text-decoration: underline; } .cm_overview12 .ovw_body .ovw_info dl dd { margin-top: 1rem; font-size: 1.6rem; } .cm_overview12 .ovw_body .ovw_btn { margin-top: 2rem; text-align: right; } /* overview13 */ .cm_overview13 { display: flex; justify-content: space-between; padding: 4rem; background-color: #f3f3f3; word-break: keep-all; } .cm_overview13 .ovw_head { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-start; width: 25%; padding-right: 3rem; } .cm_overview13 .ovw_head .ovw_title { padding-right: 5rem; padding-bottom: 1rem; border-bottom: 1px solid #000; font-weight: 500; font-size: 2.6rem; } .cm_overview13 .ovw_body { display: flex; justify-content: space-between; width: 100%; gap: 3rem; color: #444; } .cm_overview13 .ovw_body .ovw_box { width: 100%; } .cm_overview13 .ovw_body .ovw_title { margin-bottom: 2rem; font-weight: 500; font-size: 2rem; } .cm_overview13 .ovw_body .ovw_name { margin-bottom: 1.5rem; font-size: 1.7rem; } .cm_overview13 .ovw_body .ovw_name > span { margin-right: 1rem; font-size: 2rem; } .cm_overview13 .ovw_body .ovw_info { display: flex; flex-direction: column; margin-bottom: 2rem; gap: 1rem; } .cm_overview13 .ovw_body .ovw_etc { position: relative; padding-left: 2rem; line-height: 1.4; } .cm_overview13 .ovw_body .ovw_etc:after { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background-color: #444; content: ""; } /* overview14 */ .cm_overview14 { position: relative; word-break: keep-all; } .cm_overview14 .ovw_head { display: flex; position: relative; justify-content: center; margin-bottom: 5rem; } .cm_overview14 .ovw_head .ovw_button { display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 3.4rem; } .cm_overview14 .ovw_head .ovw_button:after { display: block; width: 4rem; height: 4rem; margin-left: 2rem; border-radius: 100%; background: var(--cm_color1) url(../../images/common/icon_arr07_up.svg) no-repeat center/1.7rem; content: ""; } .cm_overview14.close .ovw_head .ovw_button.active:after { background: var(--cm_color1) url(../../images/common/icon_arr07_down.svg) no-repeat center/1.7rem; } .cm_overview14.close .ovw_body { display: none !important; } .cm_overview14 .ovw_body .course_list { display: flex; flex-wrap: wrap; gap: 3rem; } .cm_overview14 .ovw_body .course_list .list_item { width: calc((100% - 3rem) / 2); } .cm_overview14 .ovw_body .course_list .item_thumb { width: 100%; } .cm_overview14 .ovw_body .course_list .item_thumb > img { width: 100%; } .cm_overview14 .ovw_body .course_list .item_desc { width: 100%; padding: 3rem 2rem; } .cm_overview14 .ovw_body .course_list .item_desc .item_title { margin-bottom: 2rem; font-weight: 500; font-size: 2.6rem; } .cm_overview14 .ovw_body .course_list .item_desc .item_info { color: #444; } /* overview15 */ .cm_overview15 { display: flex; position: relative; min-height: 25rem; word-break: keep-all; } .cm_overview15 .ovw_head { width: 40%; padding: 5rem; background: #333; } .cm_overview15 .ovw_head .ovw_title { color: #fff; font-weight: 500; font-size: 3.4rem; } .cm_overview15 .ovw_head .ovw_title > span { margin-left: 2rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--cm_color1); color: var(--cm_color1); font-size: 1.7rem; } .cm_overview15 .ovw_head .ovw_title > span > em { font-size: 2.2rem; } .cm_overview15 .ovw_head .ovw_info { margin-top: 2.5rem; color: #ddd; line-height: 1.8; } .cm_overview15 .ovw_body { display: flex; align-items: center; justify-content: center; width: 60%; padding: 5rem 0; border: 1px solid #ddd; border-left: 0; background: #fff; text-align: center; } .cm_overview15 .ovw_body .ovw_desc { position: relative; width: 100%; padding: 0 5rem; } .cm_overview15 .ovw_body .ovw_desc:after { position: absolute; top: 50%; right: 0; width: 1px; height: 10rem; margin-top: -5rem; background-color: #ddd; content: ""; } .cm_overview15 .ovw_body .ovw_desc:last-child:after { display: none; } .cm_overview15 .ovw_body .ovw_text { color: #444; font-size: 1.7rem; } .cm_overview15 .ovw_body .ovw_time { margin-top: 1.5rem; color: #333; font-weight: 500; font-size: 2.8rem; } /* overview16 */ .cm_overview16 { position: relative; word-break: keep-all; } .cm_overview16 .ovw_box { display: flex; } .cm_overview16 .ovw_box + .ovw_box { margin-top: 7rem; } .cm_overview16 .ovw_box .ovw_thumb { flex-shrink: 0; width: 57rem; } .cm_overview16 .ovw_box .ovw_thumb > img { width: 100%; } .cm_overview16 .ovw_box .ovw_desc { width: 100%; padding-left: 5rem; } .cm_overview16 .ovw_box .ovw_desc .ovw_title { margin-bottom: 3rem; padding: 2rem 0 2.5rem; border-bottom: 1px solid var(--cm_color1); font-weight: 500; font-size: 2.8rem; } .cm_overview16 .ovw_box .ovw_desc .ovw_text { color: #444; font-size: 2rem; line-height: 1.8; } .cm_overview16 .ovw_box .ovw_desc .ovw_text .cm_bullet.bullet1 > * { font-size: 1.8rem; } .cm_overview16 .ovw_box:nth-child(even) { flex-direction: row-reverse; } .cm_overview16 .ovw_box:nth-child(even) .ovw_desc { padding-right: 5rem; padding-left: 0; } /* overview17 */ .cm_overview17 { position: relative; overflow: hidden; word-break: keep-all; } .cm_overview17 .ovw_select { display: flex; position: relative; } .cm_overview17 .ovw_select .btn_select { display: flex; position: relative; align-items: center; width: 100%; height: 7rem; padding: 0 3rem; padding-right: 5rem; border: 1px solid #ddd; background-color: #fff; color: #333; font-size: 1.7rem; } .cm_overview17 .ovw_select .btn_select + .btn_select { border-left: 0 #ddd; } .cm_overview17 .ovw_select .btn_select:after { position: absolute; top: 50%; right: 2rem; width: 1.2rem; height: 1.2rem; margin-top: -0.6rem; background: url(../../images/common/icon_arr_select.svg) no-repeat center/contain; content: ""; } .cm_overview17 .ovw_select .btn_select:hover { text-decoration: underline; } .cm_overview17 .ovw_select .btn_select.on, .cm_overview17 .ovw_select .btn_select.active { border-color: var(--cm_color1); background-color: var(--cm_color1); color: #000; } .cm_overview17 .ovw_select .btn_select.on:after, .cm_overview17 .ovw_select .btn_select.active:after { background: url(../../images/common/icon_arr_select_on.svg) no-repeat center/contain; } .cm_overview17 .ovw_detail { display: flex; height: 20rem; border: 1px solid #000; } .cm_overview17 .ovw_detail .detail_box1 { flex-shrink: 0; width: 40rem; overflow: hidden; overflow-y: auto; border-right: 1px solid #000; } .cm_overview17 .ovw_detail .detail_box1 .btn_select { display: flex; position: relative; align-items: center; width: 100%; min-height: 5.5rem; padding: 1rem 3rem; padding-right: 5rem; background-color: #fff; color: #555; font-size: 1.6rem; } .cm_overview17 .ovw_detail .detail_box1 .btn_select:hover { text-decoration: underline; } .cm_overview17 .ovw_detail .detail_box1 .btn_select.on, .cm_overview17 .ovw_detail .detail_box1 .btn_select.active { background-color: #f1f1f1; color: #222; font-weight: 700; } .cm_overview17 .ovw_detail .detail_box1 .btn_select.on:after, .cm_overview17 .ovw_detail .detail_box1 .btn_select.active:after { position: absolute; top: 50%; right: 2rem; width: 1.2rem; height: 1.2rem; margin-top: -0.6rem; background: url(../../images/common/icon_arr01_right.svg) no-repeat center/contain; content: ""; } .cm_overview17 .ovw_detail .detail_box2 { width: 100%; padding: 2rem 3rem; overflow-y: auto; } .cm_overview17 .ovw_detail .detail_box2 .list_body { display: flex; flex-wrap: wrap; gap: 1rem; } .cm_overview17 .ovw_detail .detail_box2 .list_body .btn_select { padding: 0.5rem 1rem; background-color: #fff; color: #555; font-size: 1.6rem; } .cm_overview17 .ovw_detail .detail_box2 .list_body .btn_select:hover { text-decoration: underline; } .cm_overview17 .ovw_detail .detail_box2 .list_body .btn_select.on, .cm_overview17 .ovw_detail .detail_box2 .list_body .btn_select.active { color: #222; font-weight: 700; } .cm_overview17 .ovw_result { display: flex; flex-wrap: wrap; padding: 4rem; gap: 2rem 3rem; background-color: #f5f5f5; } .cm_overview17 .ovw_result .result_item { display: flex; align-items: center; color: #444; font-size: 1.7rem; } .cm_overview17 .ovw_result .result_item .btn_delete { width: 1.8rem; height: 1.8rem; margin-left: 1rem; border-radius: 3px; background: url(../../images/common/icon_close02.svg) no-repeat center/contain; font-size: 0; } /* overview18 */ .cm_overview18 { position: relative; font-size: 1.7rem; word-break: keep-all; } .cm_overview18 .ovw_item { display: flex; align-items: flex-start; } .cm_overview18 .ovw_item + .ovw_item { margin-top: 1.5rem; } .cm_overview18 .ovw_item .item_title { flex-shrink: 0; min-width: 10rem; margin-top: 0.4rem; padding-right: 2rem; padding-left: 1rem; border-left: 2px solid var(--cm_color4); color: #333; font-weight: 500; line-height: 1; } .cm_overview18 .ovw_item .item_desc { width: 100%; color: #555; } .cm_overview18.type2 .ovw_item { display: block; } .cm_overview18.type2 .ovw_item .item_title { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; line-height: normal; } .cm_overview18.type2 .ovw_item .item_desc { margin-top: 0.5rem; } /* overview19 */ .cm_overview19 { display: flex; align-items: center; padding: 4rem 5rem; border: 1px dashed #b9c5c0; border-radius: 10px; word-break: keep-all; } .cm_overview19 .ovw_img { flex-shrink: 0; width: 22rem; overflow: hidden; border: 8px solid var(--cm_color4); border-radius: 100%; text-align: center; } .cm_overview19 .ovw_img > img { width: 100%; } .cm_overview19 .ovw_desc { padding-left: 4rem; color: #222; font-size: 1.7rem; } .cm_overview19 .ovw_desc .cm_font_size19 { font-weight: 700; } .cm_overview19 .cm_overview18 .ovw_item .item_title { padding-left: 0; border: 0; } /* overview20 */ .cm_overview20 { display: flex; align-items: flex-start; padding: 4rem; background: #f2f5f9 url(../../images/sub/sub43_img03.svg) no-repeat right 5% bottom -20%/20rem; word-break: keep-all; } .cm_overview20 .ovw_img { flex-shrink: 0; width: 12rem; overflow: hidden; border: 1px solid #ddd; border-radius: 100%; background-color: #fff; text-align: center; } .cm_overview20 .ovw_img > img { width: 100%; } .cm_overview20 .ovw_desc { padding-left: 4rem; color: #222; font-size: 1.7rem; } .cm_overview20 .cm_overview18 .ovw_item + .ovw_item { margin-top: 2.5rem; } /* overview21 */ .cm_overview21 { display: flex; justify-content: center; padding: 3.5rem 4rem 4rem; gap: 8rem; border: 1px dashed #b9c5c0; border-radius: 10px; text-align: center; } .cm_overview21 .ovw_item { position: relative; width: 100%; max-width: 12em; } .cm_overview21 .ovw_item:after { position: absolute; top: 0; left: 100%; width: 8rem; height: 12rem; background: url(../../images/sub/sub292_img10.svg) no-repeat center/4.2rem; content: ""; } .cm_overview21 .ovw_item:last-child:after { display: none; } .cm_overview21 .ovw_item .item_img { width: 100%; max-width: 12rem; margin: 0 auto; } .cm_overview21 .ovw_item .item_desc { margin-top: 2rem; } .cm_overview21 .ovw_item .item_desc .item_title { color: #333; font-weight: 500; font-size: 1.8rem; } .cm_overview21 .ovw_item .item_desc .item_text { margin-top: 1rem; color: #555; font-size: 1.6rem; line-height: 1.5; } /* step1 */ .step1.cm_step { display: flex; align-items: flex-start; word-break: keep-all; } .step1.cm_step .item_step { display: flex; z-index: 1; position: relative; flex-direction: column; align-items: center; width: 100%; padding: 0 1rem; color: #333; font-size: 1.8rem; text-align: center; } .step1.cm_step .item_step:after { z-index: -1; position: absolute; top: 2.75rem; right: 0; left: 0; height: 2px; background-color: var(--cm_color1); content: ""; } .step1.cm_step .item_step:first-child:after { left: 50%; } .step1.cm_step .item_step:last-child:after { right: 50%; } .step1.cm_step .item_step .step_num { display: flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; border: 2px solid var(--cm_color1); border-radius: 100%; background-color: #fff; font-weight: 700; } .step1.cm_step .item_step .step_title { margin-top: 2rem; } .step1.cm_step .item_step .step_desc { margin-top: 1.5rem; color: #666; font-size: 1.6rem; line-height: 1.5; } /* step2 */ .step2.cm_step { display: flex; gap: 4rem 0; word-break: keep-all; } .step2.cm_step .item_step { display: flex; z-index: 1; position: relative; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; padding: 0 1rem; padding-bottom: 5rem; color: #333; font-size: 1.8rem; line-height: 1.4; text-align: center; } .step2.cm_step .item_step:after { z-index: -1; position: absolute; right: 0; bottom: 1.2rem; left: 0; height: 2px; background-color: var(--cm_color1); content: ""; } .step2.cm_step .item_step .step_img { width: 4.5rem; height: 5rem; margin-bottom: 3rem; } .step2.cm_step .item_step .step_img > img { width: 100%; height: 100%; object-fit: contain; } .step2.cm_step .item_step .step_circle { display: block; position: absolute; bottom: 0; left: 50%; width: 2.5rem; height: 2.5rem; margin-top: 3rem; margin-left: -1.25rem; border: 5px solid var(--cm_color1); border-radius: 100%; background-color: #fff; } .step2.cm_step.fixed { flex-wrap: nowrap !important; } .step2.cm_step.fixed .item_step { width: 100% !important; } /* 공통 페이징 */ .cm_paging1 { display: flex; align-items: center; justify-content: center; margin-top: 5rem; gap: 5px; } .cm_paging1 .page_control { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 4rem; height: 5rem; overflow: hidden; border-radius: 100%; background-position: center; background-size: auto 2.8rem; background-repeat: no-repeat; font-size: 1px; text-indent: -9999px; white-space: nowrap; } .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 3rem; gap: 5px; } .cm_paging1 .page_link { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 100%; background-color: #fff; color: #222; font-size: 1.4rem; transition: color 0.2s, background-color 0.2s; } .cm_paging1 .page_link.active { background-color: #eee; font-weight: 700; } .cm_paging1 .page_link:hover { background-color: #000; color: #fff; } /* 공통 약관 */ .cm_policy { color: #333; font-size: 1.4rem; line-height: 1.6; word-break: keep-all; } .cm_policy .plcy_box { padding: 2.5rem 3rem; border: 1px solid #ddd; background: #f5f5f5; line-height: 1.8; } .cm_policy .plcy_title1 { margin-bottom: 1.5rem; font-weight: 700; font-size: 1.7rem; } .cm_policy .plcy_title2 { margin-bottom: 0.8rem; font-weight: 500; font-size: 1.5rem; } .cm_policy .plcy_text1 { color: #555; font-size: 1.4rem; } .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; color: #555; } .cm_policy .plcy_ovw1.nobul { padding: 0; } .cm_policy .plcy_ovw1.nobul:after { display: none; } .cm_policy .plcy_ovw1.nobul dd { padding-left: 2rem; } .cm_policy .plcy_table { border: 0; } .cm_policy .plcy_table table { width: 100%; border: 0; text-align: center; table-layout: auto; } .cm_policy .plcy_table table thead th { height: 4rem; padding: 1rem 2rem; border: 0; border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #f5f5f5; font-weight: 500; font-size: 1.4rem; } .cm_policy .plcy_table table thead th:last-child { border-right: 0; } .cm_policy .plcy_table table tbody td { height: 4rem; padding: 1rem 2rem; border: 0; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fff; color: #555; font-size: 1.4rem; } .cm_policy .plcy_table table tbody td:last-child { border-right: 0; } /* 공통 팝업 */ .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%); background-color: #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; background-color: #191919; } .cm_modal .modal_title { font-weight: 500; font-size: 3.2rem; 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/contain; color: transparent; font-size: 0; } .cm_modal .modal_bg { z-index: 1; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: 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 { border: 1px solid #ddd; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); } .tab1.cm_tab .tab_list { display: flex; flex-wrap: wrap; padding: 0 4rem; gap: 0 4rem; } .tab1.cm_tab .tab_list .btn_tab > a { display: flex; position: relative; align-items: center; justify-content: center; height: 7rem; padding: 0 1rem; color: #333; font-size: 1.8rem; } .tab1.cm_tab .tab_list .btn_tab > a:after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background-color: var(--cm_color4); content: ""; opacity: 0; transition: opacity 0.2s; } .tab1.cm_tab .tab_list .btn_tab > a:hover, .tab1.cm_tab .tab_list .btn_tab.on > a, .tab1.cm_tab .tab_list .btn_tab.active > a { font-weight: 700; } .tab1.cm_tab .tab_list .btn_tab > a:hover:after, .tab1.cm_tab .tab_list .btn_tab.on > a:after, .tab1.cm_tab .tab_list .btn_tab.active > a:after { opacity: 1; } /* tab2 */ .tab2.cm_tab { border-bottom: 1px solid #ddd; } .tab2.cm_tab .tab_list { display: flex; height: 4.5rem; gap: 6.5rem; } .tab2.cm_tab .tab_list .btn_tab > a { display: block; position: relative; height: 100%; color: #444; font-size: 1.8rem; } .tab2.cm_tab .tab_list .btn_tab > a:after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background-color: #000; content: ""; opacity: 0; transition: opacity 0.2s; } .tab2.cm_tab .tab_list .btn_tab > a:hover, .tab2.cm_tab .tab_list .btn_tab.on > a, .tab2.cm_tab .tab_list .btn_tab.active > a { color: #000; font-weight: 700; } .tab2.cm_tab .tab_list .btn_tab > a:hover:after, .tab2.cm_tab .tab_list .btn_tab.on > a:after, .tab2.cm_tab .tab_list .btn_tab.active > a:after { opacity: 1; } /* tab3 */ .tab3.cm_tab .tab_list { display: flex; height: 4.5rem; padding: 0 1.5rem; gap: 3rem; } .tab3.cm_tab .tab_list .btn_tab { position: relative; } .tab3.cm_tab .tab_list .btn_tab:after { position: absolute; top: 50%; left: -1.5rem; width: 1px; height: 15px; margin-top: -7px; background-color: #ddd; content: ""; } .tab3.cm_tab .tab_list .btn_tab:first-child:after { display: none; } .tab3.cm_tab .tab_list .btn_tab > a { display: flex; position: relative; align-items: center; justify-content: center; height: 100%; padding: 0.5rem 2.5rem; color: #444; font-size: 1.7rem; } .tab3.cm_tab .tab_list .btn_tab > a:hover, .tab3.cm_tab .tab_list .btn_tab.active > a, .tab3.cm_tab .tab_list .btn_tab.on > a { background-color: #eee; color: #000; } /* tab4 */ .tab4.cm_tab .tab_list { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; } .tab4.cm_tab .tab_list .btn_tab > a { display: flex; position: relative; align-items: center; justify-content: center; min-width: 7.2rem; height: 7.2rem; padding: 1rem 2rem; border-radius: 7.2rem; background: #eee; font-size: 1.8rem; } .tab4.cm_tab .tab_list .btn_tab > a:hover, .tab4.cm_tab .tab_list .btn_tab.active > a, .tab4.cm_tab .tab_list .btn_tab.on > a { background-color: var(--cm_color1); } .tab4.cm_tab.type2 .tab_list .btn_tab > a { padding: 1rem 3rem; } /* 공통 테이블 */ .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: 0; } .table1.cm_table > table th, .table1.cm_table > table td { padding: 1rem 1.5rem; border: 0; background-color: #fff; font-size: 1.7rem; } .table1.cm_table > table thead th { background-color: #131313; color: #fff; font-weight: 500; } .table1.cm_table > table thead.border th { border-right: 1px solid #fff; border-bottom: 1px solid #fff; } .table1.cm_table > table tbody td { height: 7.5rem; border-bottom: 1px solid #ddd; } .table1.cm_table > table tbody tr:last-child td { border-bottom: 1px solid #000; } .table1.type2.cm_table > table tbody td { height: 6rem; border-right: 1px solid #ddd; } .table1.type2.cm_table > table tbody td:last-child { border-right: 0; } .table1.type2.cm_table > table tbody th { border-bottom: 1px solid #ddd; background-color: #f5f5f5; } .table1.type2.cm_table > table tbody tr:last-child th { border-bottom: 1px solid #000; } .table1.type2.cm_table > table thead th.last, .table1.type2.cm_table > table tbody td.last { border-right: 1px solid #ddd; } .table1.type3.cm_table > table thead th { height: 5rem; font-size: 1.5rem; } .table1.type3.cm_table > table tbody td { height: 5rem; border-right: 1px solid #ddd; font-size: 1.5rem; } .table1.type3.cm_table > table tbody th { height: 5rem; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #f5f5f5; font-size: 1.5rem; } .table1.type3.cm_table > table tbody td:last-child { border-right: 0; } .table1.type3.cm_table > table thead th.last, .table1.type3.cm_table > table tbody th.last, .table1.type3.cm_table > table tbody td.last { border-right: 1px solid #ddd; } .table1.type3.cm_table > table tbody tr:last-child th { border-bottom: 1px solid #000; } .table1.cm_table > table tbody tr.active { position: relative; } .table1.cm_table > table tbody tr.active:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 3px solid var(--cm_color1); content: ""; } .table1.cm_table > table tbody tr.sub_tr { background-color: #f8f8f8 !important; } .table1.cm_table > table tbody tr.sub_tr td { height: 6.5rem; border-color: #f8f8f8 !important; background-color: #f8f8f8 !important; } .table1.cm_table > table tbody tr.sub_tr + tr:not(.sub_tr) td { border-top: 1px solid #ddd !important; } /* table2 */ .table2.cm_table > table { border: 0; border-top: 1px solid #ddd; } .table2.cm_table > table th, .table2.cm_table > table td { height: 6rem; padding: 1rem 2rem; border: 0 !important; background-color: #fff; font-size: 1.7rem; } .table2.cm_table > table thead th { border-top: 0 !important; border-bottom: 1px solid #ddd !important; background-color: #f5f5f5; color: #222; font-weight: 500; } .table2.cm_table > table tbody td { height: 6rem; border-bottom: 1px solid #ddd !important; } .table2.cm_table > table tbody th { border-right: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important; background-color: #f8f8f8; } .table2.cm_table.type2 > table th, .table2.cm_table.type2 > table td { height: 4.5rem; padding: 0.5rem 1rem; border-right: 1px solid #ddd !important; font-size: 1.4rem; } .table2.cm_table.type2 > table th:last-child, .table2.cm_table.type2 > table td:last-child { border-right: 0 !important; } .table2.cm_table.type2 > table thead th { height: 4.5rem; } .table2.cm_table.type2 > table tbody td { height: 4.5rem; } .table2.cm_table.type3 > table { border-top: 1px solid #000; } .table2.cm_table.type3 > table th, .table2.cm_table.type3 > table td { height: 5.5rem; padding: 1rem 1.5rem; border-right: 1px solid #ddd !important; font-size: 1.5rem; } .table2.cm_table.type3 > table th:last-child, .table2.cm_table.type3 > table td:last-child { border-right: 0 !important; } .table2.cm_table.type3 > table thead th { height: 5.5rem; } .table2.cm_table.type3 > table tbody td { height: 5.5rem; } .table2.cm_table.type3.large > table th, .table2.cm_table.type3.large > table td { height: 6rem; padding: 2rem; font-size: 1.7rem; } .table2.cm_table.type3.large > table th { color: #111; } .table2.cm_table > table thead th.last, .table2.cm_table > table tbody td.last, .table2.cm_table.type2 > table tbody td.last, .table2.cm_table.type2 > table tbody td.last, .table2.cm_table.type3 > table tbody td.last, .table2.cm_table.type3 > table tbody td.last { border-right: 1px solid #ddd !important; } /* table3 */ .table3.cm_table > table { border-top: 2px solid #111; } .table3.cm_table > table th, .table3.cm_table > table td { height: 7rem; padding: 0.5rem 3rem; border: 0; background-color: #fff; font-size: 1.7rem; } .table3.cm_table > table thead th { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fff; font-weight: 500; } .table3.cm_table > table tbody td { height: 7rem; border-bottom: 1px solid #ddd; } /* table4 */ .table4.cm_table > table { border: 1px solid #9b9a9a; } .table4.cm_table > table th, .table4.cm_table > table td { height: 7rem; padding: 0.5rem 3rem; border: 0; background-color: #fff; font-size: 1.7rem; } .table4.cm_table > table thead th { border: 0; border-bottom: 1px solid #ddd; background-color: #fff; font-weight: 500; } .table4.cm_table > table tbody td { height: 7rem; border: 0; border-bottom: 1px solid #ddd; } .table4.cm_table > table tbody tr:last-child td { border-bottom: 0; } /* 공통 타이포그래피 */ .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: 500; word-break: keep-all; } .cm_title.bul { padding-left: 2.5rem; } .cm_title.bul:after { position: absolute; top: 0; left: 0; content: ""; } .cm_title + .cm_desc { color: #333; font-size: 1.8rem; } .cm_title.toggle a.active .icon_arr6 { transform: rotate(180deg); } .cm_title.title1 { color: #222; font-size: 3rem; } .cm_title.title2 { color: #333; font-size: 2.8rem; } .cm_title.title2.bul:after { top: 0.3rem; bottom: 1px; width: 3px; background-color: #000; } .cm_title.title3 { font-size: 2.6rem; } .cm_title.title3.bul:after { top: 1.3rem; width: 1.4rem; height: 1.4rem; border: 3px solid var(--cm_color1); border-radius: 100%; background-color: #fff; } .cm_title.title4 { font-size: 2rem; } .cm_title.title4.type2 { display: flex; align-items: center; margin-bottom: 4rem; color: #333; font-weight: 500; } .cm_title.title4.type2 > span { display: flex; align-items: center; justify-content: center; height: 4.5rem; margin-right: 2rem; padding: 0 2.5rem; border-radius: 100px; background-color: #333; color: var(--cm_color1); font-size: 1.6rem; } .cm_title.title5 { color: #333; font-size: 2.4rem; } .cm_title.title5.bul { padding-left: 3rem; } .cm_title.title5.bul:after { top: 0.8rem; left: 0; width: 1.8rem; height: 1.8rem; background: url(../../images/common/icon_bul.svg) no-repeat center/contain; } /* 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:after { 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 { color: #1e1e1e; } .cm_text_guide.type1.bul:after { background-image: url(../../images/common/icon_info01.svg); } .cm_text_guide.type2 { color: #777; } .cm_text_guide.type2.bul:after { background-image: url(../../images/common/icon_info02.svg); } .cm_text_guide.type3 { color: var(--cm_color3); } .cm_text_guide.type3.bul:after { background-image: url(../../images/common/icon_info03.svg); } .cm_text_guide.type4 { color: var(--cm_color3); } .cm_text_guide.type4.bul:after { background-image: url(../../images/common/icon_close03.svg); } .cm_text_guide.type5 { color: #27cd00; } .cm_text_guide.type5.bul:after { background-image: url(../../images/common/icon_check04.svg); } .cm_text_guide.type6 { color: #333; } .cm_text_guide.type6.bul:after { background-image: url(../../images/common/icon_info04.svg); } .cm_text_guide.type7 { padding-left: 3.5rem; color: var(--cm_color2); font-size: 1.7rem; } .cm_text_guide.type7.bul:after { width: 2.5rem; height: 2.2rem; background-image: url(../../images/common/icon36.svg); } /* 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.8rem; padding-left: 1.3rem; font-size: 1.6rem; } .cm_bullet.bullet1 > *:before { top: 0.8rem; width: 3px; height: 3px; background: #000; } .cm_bullet.bullet1.type2 > * { margin-bottom: 1.5rem; } .cm_bullet.bullet1.type2 > *:before { width: 4px; height: 4px; border-radius: 100%; background: #666; } .cm_bullet.bullet1.small > * { margin-bottom: 0.7rem; padding-left: 1.2rem; font-size: 1.5rem; } .cm_bullet.bullet2 > * { margin-bottom: 0.5rem; padding-left: 1.3rem; font-size: 1.5rem; } .cm_bullet.bullet2 > *:before { top: 0.9rem; width: 4px; height: 1px; background: #555; } .cm_bullet.bullet2.small > * { padding-left: 1.2rem; font-size: 1.4rem; } .cm_bullet.bullet3 > * { margin-bottom: 0.8rem; padding-left: 2rem; font-size: 1.5rem; } .cm_bullet.bullet3 > *:before { top: 0.2rem; left: 0; content: attr(data-bul); color: var(--cm_color1); font-weight: 700; line-height: 1; } .cm_bullet.bullet3.type2 > *:before { color: var(--cm_color4); } .cm_bullet.bullet3.small > * { margin-bottom: 0.7rem; padding-left: 1.7rem; font-size: 1.4rem; } .cm_bullet.bullet4 > * { margin-bottom: 1rem; padding-left: 2.5rem; } .cm_bullet.bullet4 > *:before { top: 0.6rem; width: 1.5rem; height: 1rem; background: url(../../images/common/icon_check03.svg) no-repeat center/contain; } .cm_bullet.bullet4.small > * { padding-left: 2rem; font-size: 1.4rem; } .cm_bullet.bullet4.small > *:before { top: 0.5rem; width: 1.2rem; } /* 웹접근성 */ *: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; } /* 공통 스크립트 */ .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:1679px) { /* list view2 */ .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_info { gap: 5rem; } } @media screen and (max-width:1610px) { /* list2 */ .list2.cm_list .list_body .list_item .btn_bookmark { top: calc((73vw - 6rem) / 3 + 3rem); } } @media screen and (max-width:1439px) { /* list2 */ .list2.cm_list .list_body .list_item .btn_bookmark { top: calc((80vw - 6rem) / 3 + 2rem); } /* list3 */ .list3.cm_list .list_body .list_item .item_box .item_thumb { width: 35rem; } /* list view */ .cm_list_view .view_swiper { width: 35rem; } .cm_list_view .view_desc { padding-left: 6rem; } .cm_list_view .view_desc .view_title { font-size: 3.4rem; } .cm_list_view .view_desc .view_info { gap: 3rem; } .cm_list_view .view_desc .view_info dl:after { left: -1.5rem; } .cm_list_view .view_desc .view_overview:after { left: -41rem; } /* overview21 */ .cm_overview21 { padding: 3.5rem 2rem 4rem; gap: 5rem; } .cm_overview21 .ovw_item:after { width: 5rem; background-size: 3.8rem; } } @media screen and (max-width:1279px) { :root { --default_font_size: 9px; --inner: 100%; --inner_padding: 30px; } /* 스크롤바 */ ::-webkit-scrollbar { width: 5px; height: 5px; } /* list1 */ .list1.cm_board_list .list_body .list_item .item_box:hover { border-color: #ddd; } .list1.cm_board_list .list_body .list_item .item_box:hover .item_title > span { background: none !important; } /* list2 */ .list2.cm_board_list .list_body .list_item .item_box:hover { border-color: #f6f6f6; background-color: #f6f6f6; box-shadow: none; } /* list3 */ .list3.cm_board_list .list_body .list_item .item_box:hover { border-color: #f6f6f6; background-color: #f6f6f6; box-shadow: none; } /* list4 */ .list4.cm_board_list .list_body .list_item .item_box:hover { border-color: #f6f6f6; background-color: #f6f6f6; box-shadow: none; } .list4.cm_board_list .list_body .list_item .item_btn:hover { background: url(../../images/common/btn_subscribe.png) no-repeat center/contain; } /* board view */ .cm_board_view .board_view_head .view_number .number_item { font-size: 2rem; } /* 공통 박스 */ .box1.cm_box { padding: 2.5rem 3rem; } .box2.cm_box { padding: 2.5rem 3rem; } /* form search */ .form_search .search_item .form_control { height: 7rem; padding: 0 3rem; font-size: 1.7rem; } .form_search .search_item .search_form_wrap .form_control.search_form { padding: 0 3rem; } .form_search .search_item .search_form_wrap .search_btn { width: 7rem; height: 7rem; background: #131313 url(../../images/common/icon_search01.svg) no-repeat center/2.5rem; } /* list1 */ .list1.cm_list .list_body .list_item .item_box:hover { box-shadow: none; } .list1.cm_list .list_body .list_item .item_box:hover:after { display: none !important; } /* list2 */ .list2.cm_list .list_body .list_item .item_box:hover { box-shadow: none; } .list2.cm_list .list_body .list_item .item_box:hover:after { display: none !important; } .list2.cm_list .list_body .list_item .btn_bookmark { top: calc((100vw - 6rem) / 3 + 1rem); } /* list3 */ .list3.cm_list .list_body .list_item .item_box { box-shadow: none !important; } .list3.cm_list .list_body .list_item .item_box:after { display: none !important; } /* list4 */ .list4.cm_list .list_body .list_item .item_box:hover { box-shadow: none; } .list4.cm_list .list_body .list_item .item_box:hover .item_title { text-decoration: none; } /* list view */ .cm_list_view .view_swiper .view_contact .cont_sns .btn_sns { min-width: 4.5rem; height: 4.5rem; } .cm_list_view .view_swiper .view_contact { padding-left: 2rem; } .cm_list_view .view_desc .view_overview:after { right: -30px; left: calc(-41rem - 30px); } /* overview10 */ .cm_overview10 .ovw_list .list_item .item_title { width: 30rem; } .cm_overview10 .ovw_list .list_item .item_file { width: calc(100% - 30rem - 20rem); } /* tab1 */ .tab1.cm_tab { overflow: hidden; overflow-x: auto; } .tab1.cm_tab .tab_list { flex-wrap: nowrap; gap: 0 2rem; } .tab1.cm_tab .tab_list .btn_tab { flex-shrink: 0; } .tab1.cm_tab .tab_list .btn_tab:last-child { padding-right: 2rem; } /* tab2 */ .tab2.cm_tab { overflow: hidden; overflow-x: auto; } .tab2.cm_tab .tab_list .btn_tab { flex-shrink: 0; } /* tab3 */ .tab3.cm_tab { overflow: hidden; overflow-x: auto; } .tab3.cm_tab .tab_list .btn_tab { flex-shrink: 0; } /* tab4 */ .tab4.cm_tab { overflow: hidden; overflow-x: auto; } .tab4.cm_tab .tab_list .btn_tab { flex-shrink: 0; } } @media screen and (max-width:1023px) { :root { --default_font_size: 8.5px; } /* list3 */ .list3.cm_board_list .list_body { gap: 2.5rem; } .list3.cm_board_list .list_body .list_item { width: calc((100% - 5rem) / 3); } /* faq */ .cm_faq.cm_board_list .list_body .list_item .item_body:after { top: 2.4rem; left: 4rem; width: 2.3rem; height: 1.4rem; } /* board view */ .cm_board_view .board_view_head { padding-bottom: 4rem; } .cm_board_view .board_view_head .view_number { padding-top: 3rem; } .cm_board_view .board_view_head .view_title { padding-top: 2.5rem; } .cm_board_view .board_view_head .view_info { padding-top: 1rem; } .cm_board_view .board_view_file { padding: 2rem 2.5rem; } .cm_board_view .board_view_cont { min-height: 20rem; padding: 3rem; } .cm_board_view .board_view_cont .answer_cont { width: calc(100% + 6rem); margin: 0 -3rem; margin-top: 3rem; padding: 2.5rem 3rem; padding-left: 7rem; } .cm_board_view .board_view_cont .answer_cont:after { top: 3rem; left: 3rem; width: 1.92rem; height: 1.12rem; } /* list1 */ .list1.cm_list .list_body { gap: 2.5rem; } .list1.cm_list .list_body .list_item { width: calc((100% - 5rem) / 3); } /* list2 */ .list2.cm_list .list_body { gap: 2.5rem; } .list2.cm_list .list_body .list_item { width: calc((100% - 5rem) / 3); } .list2.cm_list .list_body .list_item .btn_bookmark { top: calc((100vw - 5rem) / 3 + 1rem); } /* list3 */ .list3.cm_list .list_body .list_item .item_box .item_thumb { width: 25rem; } .list3.cm_list .list_body .list_item .item_box .item_desc { padding: 4rem; } .list3.cm_list .list_body .list_item .item_box .item_btn { top: 4rem; } /* list4 */ .list4.cm_list .list_body { gap: 2.5rem; } .list4.cm_list .list_body .list_item { width: calc((100% - 5rem) / 3); } /* list view */ .cm_list_view .view_top { margin-bottom: 6rem; } .cm_list_view .view_swiper { width: 30rem; } .cm_list_view .view_swiper .swiper-btn-wrap { bottom: -3rem; height: 6rem; } .cm_list_view .view_swiper .swiper-btn-wrap .swiper-btn { width: 4rem; height: 6rem; background-size: 2.4rem; } .cm_list_view .view_desc { padding-left: 5rem; } .cm_list_view .view_desc .view_title { font-size: 3rem; } .cm_list_view .view_desc .view_info { flex-direction: column; gap: 1.5rem; } .cm_list_view .view_desc .view_info dl:after { display: none !important; } .cm_list_view .view_desc .view_info dl dt { padding: 0.5rem 1.5rem; border-radius: 100px; background-color: #eee; font-weight: 400; } .cm_list_view .view_desc .view_info dl dd { margin: 0; padding: 0; padding-top: 0.5rem; padding-left: 1.5rem; } .cm_list_view .view_desc .view_overview { min-height: 0; padding-top: 4rem; padding-bottom: 5rem; } .cm_list_view .view_desc .view_overview dl dt { min-width: 14rem; padding-right: 1.5rem; } /* list view2 */ .cm_list_view2 .view_body.type2 .view_detail .detail_top { padding-left: 6rem; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_info { align-items: flex-start; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_info dl { display: block; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_info dl dt { width: 100%; padding: 0; } .cm_list_view2 .view_body.type2 .view_detail .detail_btm { padding-left: 6rem; } .cm_list_view2 .view_cont .cont_box .view_list1 { gap: 2.5rem; } .cm_list_view2 .view_cont .cont_box .view_list1 .list_item { width: 100%; padding: 2.5rem 3rem; } .cm_list_view2 .view_cont .cont_box2 .box_thumb { width: 30rem; } .cm_list_view2 .view_cont .cont_box2 .box_desc { padding: 4rem 5rem; } .cm_list_view2 .view_cont .cont_box2 .box_desc .box_text { margin-bottom: 3rem; } .cm_list_view2 .view_cont .cont_box2 .box_desc .box_info { gap: 3rem; } .cm_list_view2 .view_cont .cont_box3 { padding: 3rem; } .cm_list_view2 .view_cont .cont_box3 .box_thumb { width: 25rem; } .cm_list_view2 .view_cont .cont_box3 .box_desc { padding-top: 2rem; padding-left: 5rem; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_title { margin-bottom: 1.5rem; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_info { margin-bottom: 2.5rem; gap: 3rem; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_info dl:after { right: -1.5rem; } .cm_list_view2 .view_cont .cont_box3 .box_desc .box_info dl dd { padding-left: 1.5rem; } .cm_list_view2 .view_cont .cont_box4 .box_head { margin-bottom: 2rem; font-weight: 700; font-size: 2.8rem; } /* overview3 */ .cm_overview3 .ovw_box .ovw_title { min-width: 13rem; padding-right: 1.5rem; } /* overview7 */ .cm_overview7 .facilities_swiper { width: calc(100% - 9rem); max-width: 70rem; margin: 0 auto; } /* overview13 */ .cm_overview13 .ovw_head { width: auto; padding-right: 5rem; } /* overview15 */ .cm_overview15 { display: block; min-height: 0; } .cm_overview15 .ovw_head { width: 100%; padding: 3rem; } .cm_overview15 .ovw_head .ovw_title { font-size: 3rem; } .cm_overview15 .ovw_body { width: 100%; padding: 4rem 0; border: 1px solid #ddd; border-top: 0; } .cm_overview15 .ovw_body .ovw_desc { padding: 0 4rem; } .cm_overview15 .ovw_body .ovw_desc:after { height: 6rem; margin-top: -3rem; } .cm_overview15 .ovw_body .ovw_time { margin-top: 1rem; } /* overview16 */ .cm_overview16 .ovw_box .ovw_thumb { width: 48%; } .cm_overview16 .ovw_box .ovw_desc .ovw_title { margin-bottom: 2rem; padding: 1rem 0 2rem; font-size: 2.4rem; } .cm_overview16 .ovw_box .ovw_desc .ovw_text { font-size: 1.8rem; } .cm_overview16 .ovw_box .ovw_desc .ovw_text .cm_bullet.bullet1 > * { font-size: 1.6rem; } /* overview17 */ .cm_overview17 .ovw_detail .detail_box1 { width: 30rem; } /* overview21 */ .cm_overview21 { padding: 3.5rem 2rem 4rem; } .cm_overview21 .ovw_item { max-width: none; } .cm_overview21 .ovw_item .item_img { max-width: 10rem; } .cm_overview21 .ovw_item:after { height: 10rem; background-size: 2.5rem; } .cm_overview21 .ovw_item .item_desc .item_title { font-size: 1.6rem; } .cm_overview21 .ovw_item .item_desc .item_text { font-size: 1.4rem; } /* step2 */ .step2.cm_step { flex-wrap: wrap; gap: 3rem 0; } .step2.cm_step .item_step { width: 25%; font-size: 1.7rem; } .step2.cm_step.row5 .item_step { width: 20%; } .step2.cm_step.row6 .item_step { width: 16.6666666667%; } .step2.cm_step .item_step:after { bottom: 0.9rem; } .step2.cm_step .item_step .step_img { width: 4rem; height: 4.5rem; margin-bottom: 2rem; } .step2.cm_step .item_step .step_circle { width: 2rem; height: 2rem; margin-top: 2rem; border: 3px solid var(--cm_color1); } /* title */ .cm_title.title1 { font-size: 2.6rem; } .cm_title.title2 { font-size: 2.4rem; } .cm_title.title2.bul:after { top: 0.3rem; bottom: 1px; width: 3px; } .cm_title.title3 { font-size: 2.2rem; } .cm_title.title3.bul:after { top: 1rem; } .cm_title.title5 { font-size: 2.2rem; } .cm_title.title5.bul { padding-left: 2.5rem; } .cm_title.title5.bul:after { width: 1.5rem; height: 1.5rem; } } @media screen and (max-width:767px) { :root { --default_font_size: 8px; --inner_padding: 20px; } /* list1 */ .list1.cm_board_list .list_body .list_item .item_box { flex-direction: column; padding: 2rem 0; } .list1.cm_board_list .list_body .list_item .item_box > div { text-align: left; } .list1.cm_board_list .list_body .list_item .item_box .item_num { width: 100%; margin-bottom: 0.5rem; font-size: 1.6rem; } .list1.cm_board_list .list_body .list_item .item_box .item_title { font-size: 2rem; } .list1.cm_board_list .list_body .list_item .item_box .item_date { width: 100%; margin-top: 1rem; font-size: 1.6rem; } /* list2 */ .list2.cm_board_list .list_body { gap: 2.5rem; } .list2.cm_board_list .list_body .list_item { width: 100%; } /* list3 */ .list3.cm_board_list .list_body .list_item { width: calc((100% - 2.5rem) / 2); } /* list4 */ .list4.cm_board_list .list_body .list_item .item_btn { top: auto; right: 3rem; bottom: 3rem; left: 3rem; width: auto; height: 5rem; margin-top: 0; padding: 5px 2rem; border: 1px solid var(--cm_color1); border-radius: 5px; background: var(--cm_color1) url(../../images/common/icon_arr05.svg) no-repeat right 2rem center/1.4rem !important; font-size: 1.8rem; } .list4.cm_board_list .list_body .list_item .item_box { padding: 2rem 3rem 3rem 3rem; } .list4.cm_board_list .list_body .list_item .item_btn + .item_box { padding-right: 3rem; padding-bottom: 10rem; } .list4.cm_board_list .list_body .list_item .item_box .item_status .label_date { top: 3.3rem; } .list4.cm_board_list .list_body .list_item .item_box .item_info dl dt { min-width: 10rem; } /* qna */ .cm_qna.cm_board_list .list_body .list_item { width: 100%; } .cm_qna.cm_board_list .list_body .list_item .item_box { padding: 3rem; } .cm_qna.cm_board_list .list_body .list_item .item_box .item_label .item_status { height: 3.5rem; padding: 0.5rem 1.5rem; } .cm_qna.cm_board_list .list_body .list_item .item_box .item_num { font-size: 1.8rem; } .cm_qna.cm_board_list .list_body .list_item .item_box .item_title { max-height: 6.16rem; font-size: 2.2rem; } .cm_qna.cm_board_list .list_body .list_item .item_box .item_date { top: 8.5rem; } /* board view */ .cm_board_view .board_view_head .view_title { font-size: 2.8rem; } .cm_board_view .board_view_head.type2 { padding-top: 3rem; padding-bottom: 3rem; } .cm_board_view .board_view_head.type2 .view_title_area { flex-direction: column; align-items: flex-start; } .cm_board_view .board_view_head.type2 .view_title_area .view_title { margin-top: 1rem; padding-left: 0; font-size: 2.6rem; } /* 공통 버튼 */ .btn_custom1.cm_btn { height: 5rem; padding: 0 2rem; font-size: 1.8rem; } .btn_custom1.cm_btn:before { width: 5rem; height: 5rem; } .btn_custom1.cm_btn:after { width: 3rem; height: 0.9rem; margin-left: 1rem; } .btn_custom1.cm_btn:hover:before { left: calc(100% - 5rem); } /* 공통 폼 */ .form_label { font-size: 1.6rem; } /* form_group */ .cm_form_area > .form_group + .form_group { margin-top: 2rem; } .cm_form_area > .form_group > [class^=col] + [class^=col] > .form_group { margin-top: 2rem; } /* form search */ .form_search .search_item { flex-wrap: wrap; } .form_search .search_item .form_control { height: 6rem; padding: 0 2rem; font-size: 1.6rem; } .form_search .search_item .search_select { width: 100% !important; padding-bottom: 2px; } .form_search .search_item .search_select > .form_control { width: 100% !important; } .form_search .search_item .search_form_wrap { width: 100%; } .form_search .search_item .search_form_wrap .form_control.search_form { padding: 0 2rem; } .form_search .search_item .search_form_wrap .search_btn { width: 6rem; height: 6rem; background: #131313 url(../../images/common/icon_search01.svg) no-repeat center/2.2rem; } /* 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: 1rem; padding-right: 0; } /* 공통 태그 */ .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.5rem) / 2); } .list1.cm_list .list_body .list_item .item_box .item_title { font-size: 2.2rem; } .list1.cm_list .list_body .list_item .item_box .item_desc { padding: 3rem; } .list1.cm_list .list_body .list_item .item_box .item_tag { max-height: 3.6rem; } /* list2 */ .list2.cm_list .list_body .list_item { width: calc((100% - 2.5rem) / 2); } .list2.cm_list .list_body .list_item .item_box .item_title { font-size: 2.2rem; } .list2.cm_list .list_body .list_item .item_box .item_desc { padding: 3rem; } .list2.cm_list .list_body .list_item .item_box .item_tag { max-height: 3.6rem; } .list2.cm_list .list_body .list_item .btn_bookmark { top: calc((100vw - 2.5rem) / 2); right: 3rem; } /* list3 */ .list3.cm_list .list_body { flex-direction: row; flex-wrap: wrap; gap: 2.5rem; } .list3.cm_list .list_body .list_item { width: calc((100% - 2.5rem) / 2); } .list3.cm_list .list_body .list_item .item_box { flex-direction: column; height: 100%; min-height: 0; } .list3.cm_list .list_body .list_item .item_box .item_thumb { width: 100%; } .list3.cm_list .list_body .list_item .item_box .item_thumb .thumb_box:after { display: block; padding-top: 74.325%; } .list3.cm_list .list_body .list_item .item_box .item_thumb .thumb_box { height: auto; } .list3.cm_list .list_body .list_item .item_box .item_desc { padding: 3rem; } .list3.cm_list .list_body .list_item .item_box .item_title { padding-right: 0; font-size: 2.4rem; } .list3.cm_list .list_body .list_item .item_box .item_info { margin-top: 2rem; } .list3.cm_list .list_body .list_item .item_box .item_info dl { font-size: 1.6rem; } .list3.cm_list .list_body .list_item .item_box .item_info dl + dl { margin-top: 1rem; } .list3.cm_list .list_body .list_item .item_box .item_info dl dt { min-width: 8rem; padding-right: 1.5rem; } .list3.cm_list .list_body .list_item .item_box .item_btn { position: static; margin-top: 2rem; } .list3.cm_list .list_body .list_item .item_box .item_btn .cm_btn { width: 100%; } /* list4 */ .list4.cm_list .list_body .list_item { width: calc((100% - 2.5rem) / 2); } .list4.cm_list .list_body .list_item .item_box .item_title { font-size: 2.2rem; } /* list view */ .cm_list_view .view_top { display: block; margin-bottom: 5rem; } .cm_list_view .view_swiper { width: 100%; max-width: 50rem; margin: 0 auto; } .cm_list_view .view_swiper .view_contact dl { justify-content: center; } .cm_list_view .view_swiper .view_contact dl dd { width: auto; } .cm_list_view .view_swiper .view_contact .cont_sns { justify-content: center; } .cm_list_view .view_desc { margin-top: 6rem; padding-left: 0; } .cm_list_view .view_desc .view_title { font-size: 2.6rem; } .cm_list_view .view_desc .view_info { flex-direction: row; flex-wrap: wrap; gap: 1.5rem 2rem; } .cm_list_view .view_desc .view_overview { margin-top: 3rem; padding-top: 3rem; padding-bottom: 3rem; } .cm_list_view .view_desc .view_overview:after { right: -20px; left: -20px; } .cm_list_view .view_desc .view_overview dl dt { min-width: 12rem; } /* list view2 */ .cm_list_view2 .view_option .cm_btn { min-height: 5rem; } .cm_list_view2 .view_option .btn_bookmark { width: 5rem; height: 5rem; } .cm_list_view2 .view_head .view_title { font-size: 3.2rem; } .cm_list_view2 .view_head .view_title > span:after { top: -3.6rem; } .cm_list_view2 .view_head .view_title > span > em { min-height: 3.5rem; margin-left: 1.5rem; } .cm_list_view2 .view_body { display: block; margin-top: 2rem; } .cm_list_view2 .view_body .view_thumb { width: 100%; max-width: 50rem; margin: 0 auto; } .cm_list_view2 .view_body .view_thumb .thumb_box { width: 50rem; height: 50rem; } .cm_list_view2 .view_body .view_thumb .thumb_box .thumb_img { max-width: 70%; max-height: 70%; } .cm_list_view2 .view_body .view_thumb .view_sns { justify-content: center; } .cm_list_view2 .view_body .view_detail { padding: 3rem 0; padding-bottom: 5rem; } .cm_list_view2 .view_body .view_detail:after { top: -10rem; right: -20px; left: -20px; } .cm_list_view2 .view_cont { margin-top: 5rem; } .cm_list_view2 .view_cont .cont_box { display: block; } .cm_list_view2 .view_cont .cont_box + .cont_box { margin-top: 5rem; } .cm_list_view2 .view_cont .cont_box .box_head { width: 100%; font-size: 2.4rem; } .cm_list_view2 .view_cont .cont_box .box_body { width: 100%; margin-top: 1.8rem; padding-top: 2rem; } .cm_list_view2 .view_cont .cont_box2 { display: block; } .cm_list_view2 .view_cont .cont_box2 .box_thumb { width: 100%; max-width: 45rem; margin: 0 auto; } .cm_list_view2 .view_cont .cont_box2 .box_desc { padding: 4rem; } .cm_list_view2 .view_cont .cont_box3 { display: block; } .cm_list_view2 .view_cont .cont_box3 .box_thumb { width: 100%; max-width: 45rem; margin: 0 auto; } .cm_list_view2 .view_cont .cont_box3 .box_desc { padding: 0; padding-top: 4rem; } .cm_list_view2 .view_body.type2 { padding: 0; } .cm_list_view2 .view_body.type2 .view_thumb { margin: 0 auto; margin-bottom: 3rem; } .cm_list_view2 .view_body.type2 .view_detail .detail_top { padding-left: 0; } .cm_list_view2 .view_body.type2 .view_detail .detail_top:after { top: -10rem; right: -20px; left: -20px; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_label { justify-content: center; } .cm_list_view2 .view_body.type2 .view_detail .detail_top .view_info { justify-content: center; text-align: center; } .cm_list_view2 .view_body.type2 .view_detail .detail_btm { min-height: 0; padding-left: 0; } .cm_list_view2 .view_body.type2 .view_detail .detail_btm:after { right: -20px; left: -20px; } /* 공통 데이터 없음 */ .cm_nodata .no_inner { min-height: 40rem; padding: 5rem 3rem; } .cm_nodata .img_no { max-width: 16rem; } .cm_nodata .text1 { margin-top: 3rem; font-size: 3rem; } .cm_nodata .text2 { margin-top: 2rem; font-size: 1.8rem; } /* overview1 */ .cm_overview1 .ovw_box { padding: 3rem 4rem; padding-right: 4rem; } .cm_overview1 .ovw_title { gap: 4rem; } .cm_overview1 .ovw_title .ovw_name { font-size: 2.4rem; } .cm_overview1 .ovw_title .ovw_desc { font-size: 1.8rem; } .cm_overview1 .ovw_title .ovw_desc:after { left: -2.1rem; height: 2rem; margin-top: -1rem; } .cm_overview1 .ovw_info { margin-top: 2rem; } .cm_overview1 .ovw_info dl dt { min-width: 12rem; padding-right: 1.5rem; font-size: 1.6rem; } .cm_overview1 .ovw_info dl dd { font-size: 1.6rem; } .cm_overview1 .ovw_info .info_text { font-size: 1.6rem; } .cm_overview1 .ovw_btn { position: static; margin-top: 1.5rem; } .cm_overview1 .ovw_label { top: 2.5rem; right: 4rem; } .cm_overview1 .ovw_box.type2 { padding-right: 4rem; } .cm_overview1 .ovw_box.type2 .ovw_name { font-size: 2rem; } .cm_overview1 .ovw_box.type2 .ovw_desc { font-size: 1.6rem; } .cm_overview1 .ovw_box.type2 .ovw_info { margin-top: 1.5rem; } /* overview2 */ .cm_overview2 { padding: 2.5rem 3rem; } .cm_overview2 .ovw_box { display: block; } .cm_overview2 .ovw_box .ovw_title { width: 100%; padding-right: 0; } .cm_overview2 .ovw_box .ovw_desc { margin-top: 2rem; } /* overview3 */ .cm_overview3 { padding: 2.5rem 3rem; } .cm_overview3 .ovw_box .ovw_item { width: 100%; } .cm_overview3 .ovw_box .ovw_title { min-width: 11rem; } /* overview4 */ .cm_overview4 .ovw_box { width: 100%; padding: 3rem 3.5rem 3.5rem; } .cm_overview4 .ovw_box.ovw_right { border-top: 1px solid #ddd; border-left: 0; } .cm_overview4 .ovw_result { display: block; padding: 2rem 3rem; } .cm_overview4 .ovw_result .result_time { flex-wrap: wrap; margin-top: 1rem; padding-left: 3.2rem; gap: 1rem 3rem; } .cm_overview4 .ovw_result.type2 { display: flex; flex-wrap: wrap; } .cm_overview4 .ovw_result.type2 .result_time { width: auto; margin: 0; } /* overview5 */ .cm_overview5 .ovw_title { font-size: 2.6rem; } .cm_overview5 .ovw_info { flex-wrap: wrap; gap: 1.5rem 3rem; } .cm_overview5 .ovw_info dl:after { display: none !important; } .cm_overview5 .ovw_info dl dt { padding: 0.5rem 1.5rem; border-radius: 100px; background-color: #eee; font-weight: 400; } .cm_overview5 .ovw_info dl dd { margin: 0; padding: 0; padding-top: 0.5rem; padding-left: 1.5rem; } /* overview6 */ .cm_overview6 .facilities_list > .list_item .item_radio input + label { padding-left: 8rem; gap: 3rem; } .cm_overview6 .facilities_list > .list_item .item_radio input + label:before { left: 2.2rem; } .cm_overview6 .facilities_list > .list_item .item_radio input + label > span:nth-child(1), .cm_overview6 .facilities_list > .list_item .item_radio input + label > span:nth-child(2) { flex-shrink: 0; } .cm_overview6 .facilities_list > .list_item .item_radio input + label > span:last-child { text-align: left; } .cm_overview6 .facilities_list > .list_item .item_radio input + label > span:after { left: -1.5rem; } /* overview8 */ .cm_overview8 { padding: 0 2.5rem; } .cm_overview8 .ovw_box { gap: 2.5rem; } .cm_overview8 .ovw_box .ovw_item { flex-direction: column; } .cm_overview8 .ovw_box .ovw_item .ovw_desc { margin-top: 1.5rem; padding-left: 0; } /* overview9 */ .cm_overview9 .ovw_select .ovw_select_list .list_item { flex-direction: column; align-items: flex-start; padding: 1.5rem 2rem; padding-right: 7rem; } .cm_overview9 .ovw_select .ovw_select_list .list_item .item_info { margin-top: 1rem; padding: 0; gap: 4rem; } .cm_overview9 .ovw_select .ovw_select_list .list_item .item_btn { position: absolute; top: 0; right: 0; } .cm_overview9 .ovw_search .ovw_search_list .list_item { flex-direction: column; align-items: flex-start; width: 100%; padding: 1.7rem 2rem 1.5rem; padding-right: 9rem; } .cm_overview9 .ovw_search .ovw_search_list .list_item .item_title { width: 100%; } .cm_overview9 .ovw_search .ovw_search_list .list_item .item_info { margin-top: 0.7rem; padding: 0; } .cm_overview9 .ovw_search .ovw_search_list .list_item .item_btn { position: absolute; top: 50%; right: 2rem; margin-top: -2rem; } /* overview10 */ .cm_overview10 .ovw_list .list_item { display: flex; flex-direction: column; align-items: flex-start; padding: 2rem; padding-right: 9rem; } .cm_overview10 .ovw_list .list_item .item_title { width: 100%; font-size: 1.7rem; } .cm_overview10 .ovw_list .list_item .item_file { width: 100%; margin-top: 0.7rem; } .cm_overview10 .ovw_list .list_item .item_btn { position: absolute; top: 0; right: 1rem; bottom: 0; flex-direction: column; align-items: center; justify-content: center; width: auto; padding-left: 0; } /* overview11 */ .cm_overview11 { display: block; min-height: 0; } .cm_overview11 .ovw_left { width: 100%; padding: 3rem; } .cm_overview11 .ovw_right { width: 100%; padding: 3rem; } .cm_overview11 .ovw_right .ovw_overview { height: auto; max-height: 20rem; } /* overview12 */ .cm_overview12 { display: block; } .cm_overview12 .ovw_head { width: 100%; padding: 2rem 3rem; border-radius: 10px 10px 0 0; font-size: 2.2rem; } .cm_overview12 .ovw_head .title_step { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .cm_overview12 .ovw_head .title_step img { max-width: 5rem; margin-right: 2rem; margin-bottom: 0; } .cm_overview12 .ovw_body { width: 100%; padding: 2.5rem 3rem; border-top: 0; } .cm_overview12 .ovw_body .ovw_title { font-size: 2.2rem; } /* overview13 */ .cm_overview13 { display: block; padding: 3rem 4rem; } .cm_overview13 .ovw_head { width: 100%; margin-bottom: 3rem; } .cm_overview13 .ovw_body { width: 100%; } .cm_overview13 .ovw_body .ovw_title { margin-bottom: 1.5rem; } /* overview14 */ .cm_overview14 .ovw_head { margin-bottom: 3rem; } .cm_overview14 .ovw_head .ovw_button { font-size: 3rem; } .cm_overview14 .ovw_head .ovw_button:after { width: 4rem; height: 4rem; margin-left: 1.5rem; } .cm_overview14 .ovw_body .course_list .list_item { width: 100%; } .cm_overview14 .ovw_body .course_list .item_desc { padding: 2.5rem 2rem; } .cm_overview14 .ovw_body .course_list .item_desc .item_title { margin-bottom: 1.5rem; font-size: 2rem; } /* overview16 */ .cm_overview16 .ovw_box { display: block; } .cm_overview16 .ovw_box + .ovw_box { margin-top: 4rem; } .cm_overview16 .ovw_box .ovw_thumb { width: 100%; } .cm_overview16 .ovw_box .ovw_desc { margin-top: 2rem; padding: 0 !important; } /* overview17 */ .cm_overview17 .ovw_detail { display: block; height: auto; } .cm_overview17 .ovw_detail .detail_box1 { width: 100%; height: 20rem; border-right: 0; border-bottom: 1px solid #000; } .cm_overview17 .ovw_detail .detail_box2 { width: 100%; height: 20rem; padding: 2rem 2.5rem; } .cm_overview17 .ovw_result { padding: 3rem; } /* overview19 */ .cm_overview19 { display: block; padding: 3rem 4rem; } .cm_overview19 .ovw_img { margin: 0 auto; } .cm_overview19 .ovw_desc { margin-top: 3rem; padding-left: 0; } /* overview20 */ .cm_overview20 { display: block; padding: 3rem; background: #f2f5f9 url(../../images/sub/sub43_img03.svg) no-repeat right 5% bottom -10%/20rem; } .cm_overview20 .ovw_img { width: 18rem; margin: 0 auto; } .cm_overview20 .ovw_desc { margin-top: 3rem; padding-left: 0; } /* overview21 */ .cm_overview21 { flex-wrap: wrap; gap: 3rem 0; } .cm_overview21 .ovw_item { width: auto; padding-right: 5rem; } .cm_overview21 .ovw_item:after { right: 0; left: auto; width: 5rem; } .cm_overview21 .ovw_item:last-child { padding-right: 0; } .cm_overview21 .ovw_item .item_desc .item_title { min-width: 13rem; } /* step1 */ .step1.cm_step { flex-direction: column; } .step1.cm_step .item_step { flex-direction: row; align-items: flex-start; justify-content: flex-start; padding: 1.5rem 0; } .step1.cm_step .item_step:first-child { padding-top: 0; } .step1.cm_step .item_step:last-child { padding-bottom: 0; } .step1.cm_step .item_step:after { top: 0; right: auto; bottom: 0; left: 2.75rem; width: 2px; height: auto; } .step1.cm_step .item_step:first-child:after { left: 2.75rem; } .step1.cm_step .item_step:last-child:after { right: auto; bottom: auto; height: 4.25rem; } .step1.cm_step .item_step .step_num { width: 5.5rem; height: 5.5rem; } .step1.cm_step .item_step .step_title { margin-top: 1.2rem; margin-left: 2rem; } /* step2 */ .step2.cm_step .item_step { width: 33.3333333333%; font-size: 1.7rem; } .step2.cm_step.row5 .item_step { width: 25%; } .step2.cm_step.row6 .item_step { width: 20%; } /* 공통 페이징 */ .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 2rem; } .cm_paging1 .page_link { width: 4rem; height: 4rem; } .cm_paging1 .page_link:hover { background-color: #fff; color: #222; } /* 공통 팝업 */ .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; } /* table3 */ .table3.cm_table > table td { padding: 0.5rem 2rem; } /* table4 */ .table4.cm_table > table td { padding: 0.5rem 2rem; } /* 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; } /* list3 */ .list3.cm_board_list .list_body .list_item { width: 100%; } /* list4 */ .list4.cm_board_list .list_body .list_item .item_box .item_info dl { flex-direction: column; } .list4.cm_board_list .list_body .list_item .item_box .item_info dl dt { min-width: 100%; margin-bottom: 0.3rem; } /* faq */ .cm_faq.cm_board_list .list_body .list_item .item_head { flex-direction: column; padding: 2rem 2.5rem; } .cm_faq.cm_board_list .list_body .list_item .item_head .item_num { text-align: left; } .cm_faq.cm_board_list .list_body .list_item .item_head .item_title { margin-top: 1rem; padding: 0; } .cm_faq.cm_board_list .list_body .list_item .item_body { padding: 2rem 2.5rem; padding-left: 7rem; } .cm_faq.cm_board_list .list_body .list_item .item_body:after { top: 2.4rem; left: 2.5rem; } /* form search */ .form_search_option { padding: 3rem 0; } .form_search_option dl { display: block; } .form_search_option dl dt { min-width: 100%; padding-top: 0; padding-right: 0; } .form_search_option dl dd { margin-top: 0.7rem; } /* list1 */ .list1.cm_list .list_body .list_item { width: 100%; } /* list2 */ .list2.cm_list .list_body .list_item { width: 100%; } .list2.cm_list .list_body .list_item .btn_bookmark { top: calc(100vw - 25px); } /* list3 */ .list3.cm_list .list_body .list_item { width: 100%; } .list3.cm_list .list_body .list_item .item_box .item_title { font-size: 2.2rem; } /* list4 */ .list4.cm_list .list_body .list_item { width: 100%; } /* list view2 */ .cm_list_view2 .view_option { top: 9rem; } .cm_list_view2 .view_head { padding-right: 0; padding-bottom: 6rem; } .cm_list_view2 .view_body { display: block; margin-top: 3rem; } .cm_list_view2 .view_body .view_thumb .thumb_box { width: 100%; height: auto; } /* overview3 */ .cm_overview3 .ovw_box .ovw_item { display: block; } .cm_overview3 .ovw_box .ovw_title { width: 100%; min-width: 0; padding: 0; } .cm_overview3 .ovw_box .ovw_desc { width: 100%; margin-top: 0.5rem; } /* overview6 */ .cm_overview6 .facilities_list > .list_item .item_radio input + label { flex-wrap: wrap; height: auto; min-height: 8rem; padding: 1.5rem 3rem; padding-left: 8rem; gap: 0.5rem 3rem; } .cm_overview6 .facilities_list > .list_item .item_radio input + label > span:last-child { width: 100%; } .cm_overview6 .facilities_list > .list_item .item_radio input + label > span:last-child:after { display: none; } /* overview13 */ .cm_overview13 { padding: 2.5rem 3.5rem; } .cm_overview13 .ovw_body { display: block; } .cm_overview13 .ovw_body .ovw_box { padding-bottom: 2rem; border-bottom: 1px solid #ddd; } .cm_overview13 .ovw_body .ovw_box + .ovw_box { padding-top: 2rem; } .cm_overview13 .ovw_body .ovw_box:last-child { padding-bottom: 0; border-bottom: 0; } /* overview15 */ .cm_overview15 .ovw_head .ovw_info { margin-top: 2rem; } .cm_overview15 .ovw_body { display: block; padding: 0 3rem; } .cm_overview15 .ovw_body .ovw_desc { padding: 3rem 0; } .cm_overview15 .ovw_body .ovw_desc:after { top: auto; bottom: 0; left: 50%; width: 20rem; height: 1px; margin-top: 0; margin-left: -10rem; } /* overview17 */ .cm_overview17 .ovw_select .btn_select { padding: 0 2rem; } /* overview18 */ .cm_overview18 .ovw_item { display: block; } .cm_overview18 .ovw_item + .ovw_item { margin-top: 2rem; } .cm_overview18 .ovw_item .item_title { width: 100%; min-width: 0; margin: 0; padding-right: 0; font-size: 1.8rem; line-height: normal; } .cm_overview18 .ovw_item .item_desc { margin-top: 1rem; } /* overview21 */ .cm_overview21 { flex-direction: column; gap: 5rem; } .cm_overview21 .ovw_item { display: flex; align-items: center; width: 100%; padding: 2rem; padding-left: 1rem; border-radius: 10px; background-color: #f8f8f8; } .cm_overview21 .ovw_item:after { top: 100%; right: auto; left: 0; width: 100%; height: 5rem; background: url(../../images/common/icon_arr_select.svg) no-repeat center/2rem; } .cm_overview21 .ovw_item .item_img { flex-shrink: 0; width: 7rem; } .cm_overview21 .ovw_item .item_desc { width: 100%; margin: 0; padding-left: 1rem; text-align: left; } .cm_overview21 .ovw_item .item_desc .item_title { min-width: 0; font-size: 2rem; } .cm_overview21 .ovw_item .item_desc .item_text { margin-top: 0.5rem; } /* step2 */ .step2.cm_step.row5 .item_step { width: 33.3333333333%; } .step2.cm_step.row6 .item_step { width: 33.3333333333%; } } @media screen and (max-width:360px) { /* list2 */ .list2.cm_list .list_body .list_item .btn_bookmark { top: 340px; } }