@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap"); @font-face { font-family: "GmarketSansMedium"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff"); font-weight: normal; font-style: normal; } .scroll-None { height: 100%; overflow: hidden !important; overflow-y: auto; } .fc { display: flex; flex-direction: column; } .flow { display: flex; flex-direction: row; } .flow.gap20 { gap: 20px; } .fcolumn { display: flex; flex-direction: column; } .sb-wp { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 8px; } .row-item2 { position: relative; display: flex; flex-direction: row; align-items: center; width: 50%; min-height: 100px; border-radius: 4px; padding: 26px 38px 22px; font-size: 12px; color: #888; line-height: 1.3em; text-decoration: none; border: 1px solid #ddd; background-color: #fafafa !important; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); } .row-item2 .icon { display: block; height: 50px; font-size: 400%; text-align: center; margin-right: 30px; transition: all 0.3s; } .row-item2 .txt-box { width: 400px; } .row-item2 .txt-box .tit { font-size: 18px; font-weight: bold; color: #333; line-height: 1.2em; } .row-item2 .txt-box .txt { font-size: 12px; color: #888; line-height: 1.4em; margin: 6px 0; transition: all 0.3s; } .row-item2:hover { border-color: #888; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); } .row-item2:hover .icon { color: #353fd5; } .row-item2:hover .txt-box .tit { color: #333; } .row-item2:hover .txt-box .txt { color: #333; } .md { vertical-align: middle; } .line-through { text-decoration: line-through; } .flex1 { flex: 1; display: flex; } .txt-field { display: flex; flex-direction: column; gap: 2px; padding: 40px 30px 50px; line-height: 1.8rem; } .Noto { font-family: "Noto Sans KR", sans-serif !important; } .bold { font-weight: 600 !important; } .pad0 { padding: 0 !important; } legend { padding: 0; border: 0; } .f14 { font-size: 14px !important; } .f15 { font-size: 15px !important; } .f16 { font-size: 16px !important; } .f17 { font-size: 17px !important; } .f18 { font-size: 18px !important; } .f19 { font-size: 19px !important; } .f20 { font-size: 20px !important; } .f22 { font-size: 22px !important; } .lh160 { line-height: 160%; } .ml0 { margin-left: 0px !important; } .mt0 { margin-top: 0px !important; } .ml12 { margin-left: 12px !important; } .mr5 { margin-right: 5px !important; } .mr15 { margin-right: 15px !important; } .mtb12 { margin-top: 12px !important; margin-bottom: 12px !important; } .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt16 { margin-top: 16px !important; } .mt20 { margin-top: 20px !important; } .mt30 { margin-top: 30px !important; } .mt40 { margin-top: 40px !important; } .mt60 { margin-top: 60px !important; } .mt80 { margin-top: 80px !important; } .mtb2 { margin-bottom: 2px; margin-top: 2px; } .mb4 { margin-bottom: 4px !important; } .mb10 { margin-bottom: 10px !important; } .mb20 { margin-bottom: 20px !important; } .mb30 { margin-bottom: 30px !important; } .mb40 { margin-bottom: 40px !important; } .mb60 { margin-bottom: 60px !important; } .mb100 { margin-bottom: 100px !important; } .mw340 { max-width: 340px !important; } .f15 { font-size: 15px !important; } .p0 { padding: 0 !important; } .pl16 { padding-left: 16px; } .pr5 { padding-right: 5px !important; } .pt40 { padding-top: 40px !important; } .pt20 { padding-top: 20px !important; } .p50 { padding: 0 50px 0 50px !important; } .ptb80 { padding: 80px 0; } .b0 { border: 0 !important; } .tac { text-align: center; } .container-n { position: relative; width: 1200px; margin: 0 auto; padding: 0; vertical-align: top; } .int-1.small { height: 38px; } .taL { text-align: left !important; } label { display: inline-block; max-width: 100%; font-weight: 400; } .prv-view-box.mt80 .card-bottom.hei-auto .tit-lg { height: 56px; } .gui-txt { font-size: 13px; color: #e05555; margin-left: 4px; margin-bottom: 10px; } .full-banner { width: 100%; margin: 40px 0; } .checkbox-field .chkbox { display: none; } .checkbox-field label { cursor: pointer; } .checkbox-field .square { display: inline-block; width: 20px; height: 20px; margin: -3px 8px 0 0; font-size: 100%; line-height: 12px; text-align: center; vertical-align: middle; border: 1px solid #7d9fca; background: #f0f7fc; } .checkbox-field .square i { padding-top: 2px; opacity: 0; } .checkbox-field .chkbox:checked + label i { opacity: 1; } input[type=radio], input[type=checkbox] { margin: 4px 0 0; line-height: normal; } .checkbox-field.inline { display: inline-block; } .tr-hide { display: none; } .txt-rt { text-align: right !important; } /*----- clolr -----*/ /*----- clolr -----*/ /*----- clolr -----*/ :root { --primary-color: #19218F; --primary-dark: #121869; --primary-light: #7D83D4; --primary-bg: #E1E3F4; --accent-color: #00C298; --accent-dark: #078D70; --accent-light: #7FE0CB; --accent-bg: #CCF3EA; --red-color: #e05555; --red-dark: #b03535; --orange-color: #ff5529; --orange-dark: #b73b1c; --blue-color: #3f7ff7; --blue-dark: #295ec0; --purple-color: #6c63b2; --purple-dark: #5749a3; --gray-700: #1F1D29; --gray-600: #403F49; --gray-500: #7A7980; --gray-400: #C6C6CA; --gray-300: #E1E3E6; --gray-200: #F0F1F3; --gray-100: #F8F8F9; } /*----- -----*/ /*----- -----*/ /*----- -----*/ .hidden { display: none; } .colorW { color: #fff !important; } .clr-primary { color: #19218f !important; } .clr-primary500 { color: #353fd5 !important; } .clr-bold3 { color: #19218f !important; } .clr-orange { color: #ff5529 !important; } .clr-org2 { color: #f48831 !important; } .clr-red { color: #ff3232 !important; } .clr-red2 { color: #d70000 !important; } .clr-red3 { color: #e05555 !important; font-weight: bold; } .clr-red4 { color: rgb(196, 41, 41) !important; font-weight: bold; } .green { background-color: #3a7b4d; } .clr-green { color: #0d9240 !important; } .clr-green2 { color: #16a085 !important; } .clr-yellow { color: yellow !important; } .clr-skyblue3 { color: #00a8e7 !important; } .clr-blue { color: #295ec0; } .clr-blue2 { color: blue !important; } .clr-blueB, .clr-blue3 { color: #3f7ff7; font-weight: bold; } .clr-violet { color: #666699 !important; } .clr-purple { color: #c671e7; } .blue { background-color: #464ca2 !important; color: #fff !important; } .blue:hover { border-color: #00bd93 !important; background-color: #00bd93 !important; } .blue:active { bottom: -2px !important; } .clr-333 { color: #333 !important; } .clr-555 { color: #555 !important; } .clr-777 { color: #777 !important; } .clr-cyan { color: #00fff1; } .bg-333 { background-color: #333 !important; } .f10 { font-size: 10px !important; } .f12 { font-size: 12px !important; } .f13 { font-size: 13px !important; } .f32 { font-size: 32px !important; } .f75p { font-size: 75% !important; } .clr-aaa { color: #aaa !important; } .clr-normal { font-weight: normal !important; } .clr-yellow { color: yellow !important; } .clr-price2 { color: #ff5529; } .clr-bold, .clr-bold2 { color: #eb5e05 !important; font-weight: bold; } .clr-bold2 span { color: #ff5529; } .kind-gray2 { font-size: 14px; letter-spacing: -0.5px; color: #999; } .mt10 { margin-top: 10px; } .mrg-center { margin: 0 auto !important; } .underline { text-decoration: underline; } body.scroll-None { overflow-y: auto; } .flex { display: flex !important; display: -webkit-flex !important; align-items: center; -webkit-align-items: center; } .ygJb-text { font-size: 16px; } .GJ-ta-ic { display: inline-block; margin: 0 0 0 5px; vertical-align: middle; } .sTxt17 { font-size: 17px; line-height: 1.6em; } .mTit36 { font-size: 36px; line-height: 1.8em; margin-bottom: 4px; font-weight: bold; } .sTitle { clear: both; position: relative; margin: 0 0 14px 0; font-size: 140%; letter-spacing: -1px; line-height: 1.2em; font-weight: bold; overflow: hidden; color: rgb(40, 40, 43); font-family: "Noto Sans KR", sans-serif; } .mTitle { clear: both; position: relative; margin: 0 0 15px 0; font-size: 27px; color: rgb(40, 40, 43); letter-spacing: -0.5px; line-height: 1.2em; font-weight: bold; overflow: hidden; font-family: "Noto Sans KR", sans-serif; } .mTitle span.stxt { display: block; margin: 10px 0 0 0; font-size: 15px; color: #666; letter-spacing: 0; line-height: 150%; font-weight: normal; } .mTitle span.stxt2 { display: inline-block; position: relative; margin: 0 0 0 20px; font-size: 13px; color: #999; letter-spacing: 0; line-height: 150%; font-weight: 300; } .mTitle .more { clear: both; display: inline-block; position: absolute; bottom: -1px; right: 0; height: 20px; font-size: 14px; color: #aaa; letter-spacing: -0.5px; line-height: 15px; font-weight: normal; text-decoration: none; transition: 0.2s ease; } .mTitle .more i { color: #aaa; margin: 0 5px 0 0; font-size: 14px; vertical-align: bottom; transition: 0.2s ease; } .mTitle .more:hover { color: #ff5529; } .mTitle .more:hover i { color: #ff5529; } .mTitle.big { padding-left: 0px; font-size: 25px; color: rgb(40, 40, 43); letter-spacing: 0; line-height: 1.4em; font-weight: bold; } .mTitle.big2 { padding-left: 0px; padding-bottom: 5px; font-size: 32px; color: rgb(40, 40, 43); font-weight: 700; } .mTitle.small { margin-bottom: 10px; font-size: 23px; letter-spacing: -1px; font-weight: 700; } .mTitle.small2 { margin-bottom: 12px; font-size: 21px; letter-spacing: -0.6px; font-weight: 700; } .mTitle.line { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #333; height: 56px; background-color: transparent; } .mTitle.mt40 { margin-top: 40px; } .smTit { font-size: 15px; color: #888; } .conTitle { clear: both; position: relative; margin: 0 0 15px 0; font-size: 28px; color: #444; letter-spacing: -2px; line-height: 1.2em; font-weight: bold; overflow: hidden; } .conTitle span { font-size: 28px; } .tag-type { display: inline-block; padding: 4px 6px; border-radius: 3px; font-size: 12px; line-height: 1em; letter-spacing: -0.5px; color: #fff; margin-right: 4px; width: -moz-max-content; width: max-content; transition: all 0.2s ease; cursor: default; } .tag-type.md { font-size: 14px; padding: 8px 7px; margin: 0; } .tag-type.sm { padding: 2px 4px; font-size: 11px; } .tag-type.blk { border: 1px solid #333; background: #333; } .tag-type.red { border: 1px solid #d43c3c; background: #d43c3c; } .tag-type.red2 { border: 1px solid #e05555; background: #e05555; } .tag-type.green { border: 1px solid #299921; background: #299921; } .tag-type.blue { border: 1px solid #5064e8; background: #5064e8; } a.tag-btn { display: flex; align-items: center; justify-content: center; padding: 5px 8px; border-radius: 4px; font-size: 12px; line-height: 1em; letter-spacing: -0.5px; color: #fff; margin-right: 4px; width: -moz-max-content; width: max-content; cursor: pointer; } a.tag-btn.white { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 15px 0px 0 rgba(255, 255, 255, 0.9) inset; color: #888; border: 1px solid #d5d5d5; background-color: #f9f9f9; } a.tag-btn.white:hover { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 15px 0px 0 rgba(255, 255, 255, 0.9) inset; color: #222; border-color: #777; background-color: #f3f3f3; } a.tag-btn.grayPrimary { border: 1px solid #999; background: #999; cursor: pointer; } a.tag-btn.grayPrimary:hover { border: 1px solid #353fd5; background: #353fd5; } a.tag-btn.sm { padding: 4.5px 6px; line-height: 1em; border-radius: 3px; } .progress-tag { display: block; width: 44px; height: 24px; color: #fff; font-size: 11px; line-height: 24px; border-radius: 2px; margin: 0 auto; letter-spacing: -1px; background-color: #bbb; text-align: center; } .progress-tag.w48 { width: 48px; } .progress-tag.sm { width: 34px; height: 20px; border-radius: 4px; line-height: 20px; } .progress-tag.on { background-color: #34a02c; } .progress-tag.end { background-color: #bbb; } .progress-tag.wait { background-color: #6c63b2; } .progress-tag.semu { background-color: #32818a; } .progress-tag.act { background-color: #3A7B4D; } .new-icon { position: relative; } /* fontawesome */ .fa.fa-angle-right { color: #888; } .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; } .w100 { width: 100% !important; } .mb5 { margin-bottom: 5px !important; } .p5 { padding: 5px !important; } .int-1.bg-red { background: #fef2f2; } .clr-999 { color: #999 !important; } .bgredW { background-color: #fbf0f0 !important; } .bgW { background-color: #fff; } .txt-valign { flex: 1; font-family: "Noto Sans KR", sans-serif; font-weight: 500; font-size: 20px; } .bg-gray-wp { width: 100%; background-color: #f7f9fa; padding: 50px 0; } /*----- form -----*/ /*----- form -----*/ /*----- form -----*/ .form-control { font-size: 14px !important; display: inline-block; padding-top: 0; padding-bottom: 0; border-color: #c7c7c7; display: block; width: 100%; height: 32px; padding: 8px 10px; font-size: 15px; background-color: #fff; background-image: none; border: 1px solid #d5d5d5; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } .form-control:focus { border-color: #777; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.1); background: #fafcff; } .form-control[disabled], .form-control[readonly] { background-color: #eee !important; opacity: 1; } select:focus { border: 1px solid #777; outline: transparent; } input:focus { border: 1px solid #777; outline: transparent; } select:focus { border: 1px solid #777; outline: transparent; } input::-moz-placeholder { color: #aeaeb1; } input::placeholder { color: #aeaeb1; } .focus-None:focus { border-color: #d9d9d9; box-shadow: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; } /*----- Btn style -----*/ /*----- Btn style -----*/ /*----- Btn style -----*/ .btn { height: 26px; padding: 0 10px; font-size: 11px; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.9); line-height: 26px; font-weight: normal; text-align: center; border-radius: 3px; display: inline-block; position: relative; cursor: pointer; transition: 0.2s ease; } .btn42 { height: 42px; padding: 0 15px; font-size: 15px; line-height: 38px; border-radius: 4px; transition: 0.2s ease; } .btn30 { height: 30px; line-height: 30px; padding: 0 14px; font-size: 13px; letter-spacing: 0.5px; font-weight: normal; text-align: center; border-radius: 3px; display: inline-block; position: relative; cursor: pointer; transition: 0.2s ease; } .btn30.prev { padding: 0 6px; } .btn-wh { height: 28px; font-size: 12px; color: #666 !important; line-height: 28px; border: 1px solid #d0d0d0; background-color: #f9f9f9 !important; padding: 0 15px; border-radius: 3px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition: 0.2s ease; } .btn-bk, .btn-bk-pr { height: 28px; font-size: 12px; line-height: 28px; background-color: #333; border: 1px solid #333; transition: 0.2s ease; } .btn-bk:hover { background-color: #00bd93; border: 1px solid #00bd93; } .btn-bk-pr:hover { background-color: #353fd5; border: 1px solid #353fd5; } .btn-red { background-color: #e05555 !important; border: 1px solid #e05555 !important; transition: 0.2s ease; color: #fff; } .btn-red:hover { background-color: #c03b3b !important; border: 1px solid #c03b3b !important; } .btn-wh:hover { border: 1px solid #aaa; background-image: linear-gradient(to top, #f0f0f0 0%, #ffffff 100%); } .btn-pop { display: inline-block; height: 26px; line-height: 26px; font-size: 12px; padding: 0 15px; border-radius: 3px; transition: 0.2s ease; } .btn-blank { font-family: "맑은 고딕", "Malgun Gothic", "MalgunGothicRegular", sans-serif; display: inline-block; width: 14px; height: 14px; margin: 0 7px 0 0; text-align: center; vertical-align: text-bottom; border: 1px solid #dadada; border-radius: 3px; transition: all 0.3s; } .btn-blank span { font-size: 13px; color: #707070; } .btn-blank:hover { background-color: #ff5529; border: 1px solid #ff5529; } .btn-blank:hover span { font-size: 13px; color: #fff; } .btn-close { background: transparent; opacity: 0.5; transition: 0.2s ease; margin-top: 4px; margin: 4px 6px 0; } .btn-close:hover { opacity: 1; } .btn-lg-bk.dwn { background-color: #435366; } .btn-lg-bk.dwn:hover { background-color: #323f4d; } .btn-lg-bk { display: flex; width: -moz-max-content; width: max-content; height: 70px; padding: 0 50px 2px; font-size: 19px; font-weight: 400; justify-content: center; align-items: center; border-radius: 6px; background-color: #474747; color: #fff; transition: all 0.2s ease; } .btn-lg-bk:hover { background-color: #353fd5; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); } .btn-type { clear: both; display: inline-block; position: relative; min-width: 100px; height: 45px; padding: 0 20px 0 20px; font-size: 16px; color: #fff !important; line-height: 43px; text-decoration: none !important; font-weight: bold; text-align: center; vertical-align: middle; border: 1px solid #272727; border-radius: 3px; background-color: #333; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.2s ease; } .btn-type.h40 { height: 40px; line-height: 38px; font-size: 14px; min-width: 90px; } .btn-type.md { height: 54px; line-height: 52px; min-width: 140px; } .btn-line { clear: both; display: inline-block; position: relative; min-width: 110px; height: 45px; padding: 0 12px; font-size: 15px; line-height: 43px; text-decoration: none !important; font-weight: bold; text-align: center; vertical-align: middle; border: 1px solid #d5d5d5; border-radius: 3px; transition: all 0.2s ease; color: #888 !important; background-color: #f9f9f9 !important; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 22px 0px 0 rgba(255, 255, 255, 0.9) inset; cursor: pointer; font-weight: 400; } .btn-line:hover { color: #222 !important; border-color: #777 !important; background-color: #f3f3f3 !important; } .btn-type.w2 { width: 150px; padding: 0; } .btn-type.p10 { padding: 0 10px; } .btn-type.p15 { padding: 0 18px; } .btn-type:hover { border-color: #19218f; background-color: #19218f; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); } .btn-type:active { bottom: -1px; } .btn-type i { margin: 0 5px 2px 0; } .btn-type.radius { border-radius: 4px; } .btn-type.line { color: #888 !important; border-color: #d5d5d5 !important; background-color: #f9f9f9 !important; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 22px 0px 0 rgba(255, 255, 255, 0.9) inset; } .btn-type.line:hover { color: #222 !important; border-color: #777 !important; background-color: #f3f3f3 !important; } .btn-type.md { min-width: 110px; height: 40px; padding: 0 20px; font-size: 14px; line-height: 38px; font-weight: normal; } /* small type */ .btn-type.small { min-width: 80px; height: 30px; padding: 0 13px; font-size: 13px; line-height: 28px; font-weight: normal; letter-spacing: -1px; } .btn-type.small i { margin-bottom: 3px; font-size: 12px; vertical-align: middle; } .btn-type.small.line { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 15px 0px 0 rgba(255, 255, 255, 0.9) inset; transition: all 0.2s ease; margin: 0; } .btn-type.small2 { height: 25px; padding: 0 10px; font-size: 12px; line-height: 23px; font-weight: normal; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 12px 0px 0 rgba(255, 255, 255, 0.9) inset; } .btn-type.small3 { height: 25px; padding: 0 10px; font-size: 12px; letter-spacing: -0.5px; line-height: 23px; font-weight: normal; } .btn-type.small4 { height: 22px; padding: 0 8px; font-size: 11px; letter-spacing: -0.5px; line-height: 20px; font-weight: normal; } .btn-type.middel { height: 42px; padding: 0 12px; font-size: 15px; line-height: 40px; font-weight: normal; } /* Color type */ .btn-type.gray { border-color: #a4acb4; background-color: #acb4bc; transition: all 0.2s ease; } .btn-type.gray:hover { border-color: #676767; background-color: #777; } .btn-type.gray2 { border-color: #464ca2; background-color: #464ca2; transition: all 0.2s ease; } .btn-type.point:hover { border-color: #00c398; background-color: #00c398; } .btn-type.gray2:hover { border-color: #00bd93; background-color: #00bd93; } .btn-type.org { border-color: #f66039; background-color: #ff643c; } .btn-type.org:hover { border-color: #e98730; background-color: #f48d31; } .btn-type.red { border-color: #d35050; background-color: #e05555; } .btn-type.red:hover { border-color: #b43131; background-color: #bf3434; } .btn-type.purple { border-color: #423b80; background-color: #49418e; } .btn-type.purple:hover { border-color: #5c50c5; background-color: #6356d3; } .btn-type.etc { border-color: #3c4b5c; background-color: #435366; } .btn-type.etc:hover { border-color: #496587; background-color: #4e6c91; } .btn-type.primary { border-color: #19218f; background-color: #19218f; } .btn-type.primary:hover { border-color: #5064e8; background-color: #5064e8; } .btn-type.accent { border-color: #00bd93; background-color: #00bd93; } .btn-type.accent:hover { border-color: #00c398; background-color: #00c398; } .or { background-color: #4e55b6; border: 1px solid #4e55b6; color: #fff; } .or:hover { background-color: #19218f; border: 1px solid #19218f; } .btn.etc { border-color: #3c4b5c; background-color: #435366; } .btn.etc:hover { border-color: #496587; background-color: #4e6c91; } .or.btn { background-color: #ff5529; border: 1px solid #ff5529; color: #fff; } .btn.accent { border-color: #00bd93; background-color: #00bd93; } .btn.accent:hover { border-color: #078d70; background-color: #078d70; } .btn.or:hover { background-color: #b73b1c; border: 1px solid #b73b1c; } .btn.line { background-color: transparent; border: 1px solid #ccc; color: #909090; } .btn.line:hover { border: 1px solid #1c1c1c; color: #1c1c1c; } .tbl-btn li.line a, .tbl-btn li.line button { color: #777; border-color: #d5d5d5; background: #fff !important; } .tbl-btn li.line a:hover, .tbl-btn li.line button:hover { color: #02234e; border-color: #03295c; } .purp { background-color: #423b80; border: 1px solid #49418e; color: #fff; } .purp:hover { background-color: #5c50c5; border: 1px solid #6356d3; } .dr { background-color: #435366; border: 1px solid #435366; color: #fff; } .dr:hover { background-color: #233347; border: 1px solid #233347; } .btn-line { border: 1px solid #d5d5d5; background: #fff !important; } .btn-line.gr { color: #777; border: 1px solid #d5d5d5; } .btn-line:hover { color: #1c1c1c; border: 1px solid #1c1c1c; } .red { background-color: #d43c3c; border: 1px solid #d43c3c; color: #fff; } .rd { background-color: #d43c3c; border: 1px solid #d43c3c; color: #fff; } .rd:hover { background-color: #a52727; border: 1px solid #a52727; color: #fff; } .gr { background-color: #707070; border: 1px solid #707070; color: #fff; } .gr:hover { background-color: #333; border: 1px solid #333; } .bk { background-color: #333; border: 1px solid #333; color: #fff; } .bk:hover { background-color: #00c398; border: 1px solid #00c398; color: #fff; } .wh { background-color: #f9f9f9; color: #666; border: 1px solid #d0d0d0; } .wh:hover { border: 1px solid #aaa; background-image: linear-gradient(to top, #f0f0f0 0%, #ffffff 100%); } .org { background-color: #ff5529; border: 1px solid #ff5529; color: #fff; } .org:hover { background-color: #b73b1c; border: 1px solid #b73b1c; } .btn-type.gray { border-color: #a4acb4; background-color: #acb4bc; transition: all 0.2s ease; } .btn-type.gray:hover { border-color: #606469; background-color: #606469; } /* Btn Resize */ .btn-type.w700 { width: 700px; } .btn-type.w1 { padding: 0 25px; } .btn-type.w2 { width: 150px; padding: 0; } .btn-type.w3 { width: 110px; padding: 0; } .btn-type.w140 { width: 140px; padding: 0; } .btn-type.w250 { width: 250px; padding: 0; } .btn-type.h26 { height: 26px; line-height: 24px; } .btn-type.h30 { height: 30px; line-height: 28px; } .btn-type.h38 { height: 38px; line-height: 36px; } .btn-type.h42 { height: 42px; line-height: 43px; } .btn-type.h55 { height: 55px; line-height: 54px; } .btn-type.h60 { height: 60px; line-height: 58px; } .hg-icon { display: inline-block; width: 34px; text-align: center; line-height: 20px; border-radius: 2px; color: #fff; padding: 2px 3px; font-size: 12px; margin-right: 6px; border: none !important; } .add-btn-area { width: 100%; display: flex; flex-direction: row; gap: 6px; align-items: center; margin-bottom: 40px; } .add-btn-area.flex-end { justify-content: flex-end; } .add-btn-area.center { justify-content: center; } .add-btn-area .hide { display: none; } .btn-area-sb { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } .btn-area-sb .left-area, .btn-area-sb .right-area { display: flex; flex-direction: row; gap: 8px; } /*----- -----*/ /*----- -----*/ /*----- -----*/ .body-Contents-wp { position: relative; min-height: 700px; margin: 60px 0 120px 0; text-align: left; z-index: 1; } .body-contents-wp { position: relative; width: 1200px; min-height: 62vh; margin: 60px auto 120px; text-align: left; z-index: 1; } .body-contents-wp.mh0 { min-height: 0; } .body-contents-wp .txt-title { font-size: 18px; margin-top: 20px; } .body-contents-wp .txt-title::before { content: "【"; display: inline-block; margin: 0 3px 0 0; } .body-contents-wp .txt-title::after { content: "】"; display: inline-block; margin: 0 0 0 3px; } .body-contents-wp .txt { font-size: 15px; line-height: 26px; margin-top: 10px; margin-bottom: 10px; } .body-contents-wp .txt-bold { font-size: 16px; line-height: 26px; font-weight: 600; margin-top: 12px; } .body-contents-wp input { box-sizing: border-box; min-height: 40px; } .body-contents-wp .board-wp { position: relative; height: 40px; } .body-contents-wp .board-wp .title { font-size: 24px; font-weight: bold; line-height: 40px; } .body-contents-wp .search { position: absolute; top: 0; right: 0; display: flex; flex-direction: row; } .body-contents-wp .search .selt-1 { height: 40px; -moz-appearance: none; -webkit-appearance: none; appearance: none; padding-right: 30px !important; background: #fff url(../images/select_bg.png) no-repeat center right !important; background-size: auto 10px !important; transition: all 0.3s; border-radius: 2px; cursor: pointer; } .body-contents-wp .search .selt-1.list-align { margin-left: 6px; background-color: #aaa !important; color: #fff; border: 1px solid #999; border-radius: 2px; } .body-contents-wp .search .selt-1.list-align option { color: #fff; } .body-contents-wp .search .selt-1.list-align optgroup { color: #fff; } .body-contents-wp .search .int-1 { display: inline-block; height: 26px; margin: 0 0 0px 0; padding-left: 10px; margin-left: 6px; } .body-contents-wp .search .list-btn { display: flex; flex-direction: row; gap: 4px; margin: 0 0 0 5px; } .body-contents-wp .search .list-btn a { width: 42px; height: 39px; background-color: #fff; border: 1px solid #909090; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: -2px; transition: 0.2s ease; position: relative; } .body-contents-wp .search .list-btn a i { color: #909090; transition: 0.2s ease; } .body-contents-wp .search .list-btn a.series::after { content: "시리즈 묶음"; position: absolute; top: -8px; right: -45px; width: 64px; height: 16px; font-size: 10px; color: #fff; line-height: 16px; font-weight: normal; border-radius: 15px; background: #00a0d4; box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.06); animation: series_ani 0.8s infinite; text-align: center; } @keyframes series_ani { 50% { top: -7px; } } .body-contents-wp .search .list-btn a.active { border: 1px solid #ff5529; } .body-contents-wp .search .list-btn a.active i { color: #ff5529; } .body-contents-wp .search .list-btn a:hover { border: 1px solid #ff5529; } .body-contents-wp .search .list-btn a:hover i { color: #ff5529; } .body-contents-wp .search .btn { width: 70px; height: 40px; margin: 0; padding: 0 0 0 0; font-size: 14px; color: #fff; text-align: center; border: 1px solid #444; background: #555; transition: all 0.3s; cursor: pointer; border-radius: 2px; } .body-contents-wp .search .btn:hover { background-color: #333; } .body-contents-wp .table-wp.tb { margin-top: 0; } .body-contents-wp .table-wp { clear: both; position: relative; margin: 20px 0 40px 0; } .body-contents-wp .table-wp table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } .body-contents-wp .table-wp table.list { border-top: 1px solid #777; border-bottom: 1px solid #ccc; } .body-contents-wp .table-wp table.list tbody tr td .form-file a.hwp { background: transparent; } .body-contents-wp .table-wp table.list th { height: 45px; padding-bottom: 0px; font-size: 12px; color: #777; letter-spacing: -0.5px; line-height: 110%; text-align: center !important; vertical-align: middle; background: #f4f4f4; border-right: none; } .body-contents-wp .table-wp table.list th span { clear: both; display: block; position: relative; } .body-contents-wp .table-wp table.list th span::after { content: ""; position: absolute; top: 2px; right: 0; width: 1px; height: 11px; background: #d7d7d7; z-index: 2; } .body-contents-wp .table-wp table.list th:last-child span::after { display: none; } .body-contents-wp .table-wp table.list tr { display: table-row; } .body-contents-wp .table-wp table.list tr:last-child td { border-bottom: 1px solid #d5d5d5; } .body-contents-wp .table-wp table.list td:nth-child(2), .body-contents-wp .table-wp table.list td:nth-child(4) { font-size: 14px; } .body-contents-wp .table-wp table.list tr:hover { background-color: #fafbfc; } .body-contents-wp .table-wp table.list tr:hover td:nth-child(1) a { color: #e94e1b; transition: all 0.2s; } .body-contents-wp .table-wp table.list tr:hover td:nth-child(2), .body-contents-wp .table-wp table.list tr:hover td:nth-child(4) { font-size: 14px; color: #333; } .body-contents-wp .table-wp table.list td { padding: 4px 0 4px 0; font-size: 100%; line-height: 150%; text-align: center; vertical-align: middle; border-bottom: 1px solid #e9e9e9; background-color: transparent; } .body-contents-wp .table-wp table.list td.subj-link { text-align: left; cursor: pointer; padding: 18px 12px; line-height: 1.3em; text-align: left; } .body-contents-wp .table-wp table.list td.subj-link.first a, .body-contents-wp .table-wp table.list td.subj-link.first span.lock { padding-left: 20px; padding-right: 20px; } .body-contents-wp table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } .body-contents-wp .con-view-box { border-top: 1px solid #777; border-bottom: 1px solid #ccc; display: flex; flex-direction: column; } .body-contents-wp .con-view-box .textc { text-align: center; } .body-contents-wp .con-view-box .file-box { display: flex; flex-direction: row; gap: 8px; } .body-contents-wp .con-view-box li.textc:after { content: ""; position: absolute; top: 2px; right: 6px; width: 1px; height: 13px; background: #d1d1d5; z-index: 2; } .body-contents-wp .con-view-box ul { display: grid; align-items: center; font-family: '맑은 고딕', 'Malgun Gothic', 'MalgunGothicRegular', sans-serif, 'Noto Sans KR'; } .body-contents-wp .con-view-box ul li { padding: 0 12px; position: relative; } .body-contents-wp .con-view-box ul.title { grid-template-columns: 100px 1000px; height: 56px; background-color: #f4f4f4; border-bottom: 1px solid #e9e9e9; } .body-contents-wp .con-view-box ul.title li { font-weight: bold; } .body-contents-wp .con-view-box ul.info { grid-template-columns: 100px 500px 100px 500px; height: 42px; border-bottom: 1px solid #e9e9e9; } .body-contents-wp .con-view-box ul.info li { font-size: 13px; } .body-contents-wp .con-view-box ul.file { grid-template-columns: 100px 1000px; height: 42px; border-bottom: 1px solid #e9e9e9; } .body-contents-wp .con-view-box ul.file li { font-size: 13px; } .body-contents-wp .con-view-box .con-body { display: flex; flex-direction: row; padding: 40px 30px 50px; line-height: 1.8rem; height: auto; color: #444; } .body-contents-wp .listbtn-area { position: relative; display: flex; flex-direction: row; justify-content: flex-end; margin-top: 30px; gap: 8px; } .body-contents-wp.sm { min-height: 40vh; } .body-contents-wp.bg { background-color: #f9f9f9; border-top: 1px solid #eee; margin: 0; min-height: 70vh; width: 100%; padding: 80px 0 120px; } .body-contents-wp.bg02 { background-color: #ecf9ff; margin: 0; min-height: 200px; width: 100%; padding: 80px 0 80px; } .mCustomScrollbar { touch-action: pinch-zoom; } .mCustomScrollBox { position: relative; overflow: scroll; height: 100%; max-width: 100%; outline: none; direction: ltr; } #toTop { display: none; position: fixed; bottom: 15px; right: 36px; width: 46px; height: 46px; text-indent: 100%; text-decoration: none; border: none; background: url(/images/topBtn.png) no-repeat 0 0; transition: none !important; overflow: hidden; z-index: 99999; } #toTopHover { float: right; display: block; width: 46px; height: 46px; overflow: hidden; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); } ul.c4 li { width: 25%; } .cir-list-txt { display: flex; flex-direction: column; padding-bottom: 20px; } .cir-list-txt.smCir { font-family: "Noto Sans KR", sans-serif; padding-bottom: 0; } .cir-list-txt.smCir li { padding-left: 12px; font-size: 14.5px; } .cir-list-txt.smCir li::after { position: absolute; content: ""; width: 2px; height: 2px; border-radius: 3px; background-color: #333; top: 11px; left: 3px; } .cir-list-txt.smCir li.inr { padding-left: 27px; } .cir-list-txt.smCir li.inr::after { position: absolute; content: ""; width: 4px; height: 1px; border-radius: 3px; background-color: #333; top: 11px; left: 18px; } .cir-list-txt li { position: relative; padding-left: 16px; line-height: 1.6em; } .cir-list-txt li::after { position: absolute; content: ""; width: 4px; height: 4px; border-radius: 3px; background-color: #333; top: 10px; left: 3px; } .cir-list-txt li a { color: #353fd5; transform: all 0.2s ease; } .cir-list-txt li a:hover { text-decoration: underline; } .content-titlebox { display: flex; flex-direction: row; justify-content: space-between; width: 100%; margin-bottom: 18px; } .content-titlebox .tit { font-size: 24px; font-weight: bold; letter-spacing: -1px; } .moreBtn { font-family: "GmarketSansMedium", sans-serif; color: #292c33; opacity: 0.5; font-size: 14px; font-weight: bold; background-color: transparent; transition: all 0.2s ease; } .moreBtn:hover { opacity: 1; color: #19218f; } .moreBtn:hover i { color: #19218f; } .moreBtn i { margin-top: -2px; } /*----- footer -----*/ /*----- footer -----*/ /*----- footer -----*/ footer { background-color: #222222; min-height: 200px; } footer .logo { width: 152px; height: 33px; } footer .footer-wp { font-family: "Noto Sans KR", sans-serif; width: 1200px; margin: 0 auto; padding-top: 50px; display: flex; flex-direction: row; gap: 90px; } footer .quick { height: 26px; display: flex; flex-direction: row; align-items: center; font-size: 16px; margin-bottom: 14px; } footer .quick a { font-weight: 400; color: #fff; } footer .quick a:hover { color: #d3cdcd; } footer .quick .q-item { padding: 0 20px; border-right: 1px solid rgba(255, 255, 255, 0.08); } footer .quick .q-item:first-child { padding-left: 0; } footer .quick .q-item:last-child { border-right: 0; } footer .info, footer .copyright { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 12px; } footer .info p, footer .copyright p { font-size: 14px; font-weight: 400; line-height: 20px; margin-right: 8px; color: #5d5e5f; } footer .info span, footer .copyright span { font-size: 12px; font-weight: 400; opacity: 0.6; color: #5d5e5f; } /*----- login -----*/ /*----- login -----*/ /*----- login -----*/ .login-section { background-color: #f9f9f9; } .login-wp { position: relative; width: 1200px; min-height: 64vh; padding: 40px 10px; margin: 0 auto; text-align: left; z-index: 1; } .login-wp .checkbox-field label { line-height: 30px; } .login-wp .visual { position: relative; height: 230px; padding: 40px 0 0 30px; font-size: 14px; color: #555; line-height: 1.6em; background: url(../images/login_visual.png) no-repeat 880px 0px; font-family: "Noto Sans KR", sans-serif; overflow: hidden; } .login-wp .visual strong { display: block; margin: 0 0 6px -1px; font-size: 38px; color: #222; letter-spacing: -3px; line-height: 1.5em; font-weight: normal; font-family: "GmarketSansMedium", sans-serif; } .login-wp .visual strong u { color: var(#00c398); text-decoration: none; } .login-wp .login { float: left; width: 780px; padding: 12px 12px; background: url(../images/login_bg.gif) repeat; border-radius: 6px; } .login-wp .login .box { position: relative; height: 284px; padding: 33px 40px 0 210px; background: #fff url(../images/login_stit.gif) no-repeat 40px 39px; border-radius: 4px; } .login-wp .login input.int-1 { display: block; width: 360px; margin: 0 0 6px 0; padding-left: 15px; padding-top: 6px; font-size: 120%; border-color: #ccc; } .login-wp .login .int-big { height: 50px; background-color: #e8f0fe; } .login-wp .login .box .password-show { position: absolute !important; top: 107px; left: 538px; color: rgba(0, 0, 0, 0.2); cursor: pointer; } .login-wp .login .btn { display: block; position: absolute; top: 33px; right: 40px; width: 135px; height: 106px; padding: 0; font-size: 17px; color: #fff; font-weight: bold; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition: all 0.3s; border-radius: 3px; cursor: pointer; } .login-wp .login .checkbox-field { font-size: 14px; } .login-wp .login .checkbox-field label { color: #666; cursor: pointer; } .login-wp .login .checkbox-field .square { display: inline-block; width: 20px; height: 20px; margin: 0 8px 0 0; font-size: 100%; line-height: 12px; text-align: center; vertical-align: middle; border: 1px solid #7d9fca; background: #f0f7fc; } .login-wp .login .checkbox-field .square i { opacity: 0; margin-top: 2px; } .login-wp .login .checkbox-field .chkbox:checked + label i { opacity: 1 !important; } .login-wp .login .checkbox-field.ch label.checking i { opacity: 1 !important; } .login-wp .login .checkbox-field.ch label i { opacity: 0; } .login-wp .login .reg-join { position: absolute; top: 176px; right: 40px; z-index: 2; } .login-wp .login .etc { position: relative; margin: 10px 0 0 0; font-size: 12px; color: #888; line-height: 1.4em; } .login-wp .banner { float: right; width: 380px; height: 306px; overflow: hidden; border-radius: 6px; margin-bottom: 50px; margin-top: 1px; } .login-wp .banner img { width: 380px; height: 306px; transition: all 0.3s ease; } .login-wp .banner a:hover img { scale: 1.02; } .login-wp .sns-join { clear: both; width: 1000px; margin: 40px auto 70px auto; overflow: hidden; } .login-wp .sns-join .stit { position: relative; height: 32px; margin: 0 0 20px 0; font-size: 100%; text-align: center; font-weight: bold; } .login-wp .sns-join .stit::before { content: ""; display: block; position: absolute; top: 50%; left: 0; right: 0; width: 100%; height: 1px; background: #ddd; z-index: 1; } .login-wp .sns-join .stit span.txt { display: inline-block; position: relative; height: 32px; padding: 0 15px; line-height: 30px; background: #f9f9f9; z-index: 2; } .login-wp .sns-join .stit span.circle { display: inline-block; width: 32px; height: 32px; margin: 0 3px 2px 0; font-size: 13px; color: #fff; text-align: center; vertical-align: middle; border-radius: 100%; background: #333; } .login-wp .sns-join .mask { clear: both; margin: 0 -5px; padding: 0 0 10px 0; overflow: hidden; } .login-wp .sns-join ul { float: left; width: 100%; } .login-wp .sns-join li { float: left; width: 25%; padding: 0 6px; } .login-wp .sns-join li a.Btn { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; height: 50px; font-size: 14px; color: #fff; letter-spacing: -0.5px; line-height: 47px; text-decoration: none !important; border: 1px solid #2e4677; border-radius: 5px; cursor: pointer; transition: all 0.2s ease; } .login-wp .sns-join li a.Btn img { height: 16px; margin-right: 6px; } .login-wp .sns-join li.facebook a.Btn { background: #3b5997; } .login-wp .sns-join li.facebook a.Btn:hover { background: #1b3c7f; } .login-wp .sns-join li.google a.Btn { background: #d34836; border-color: #d34836; } .login-wp .sns-join li.google a.Btn img { height: 20px; padding-top: 2px; } .login-wp .sns-join li.google a.Btn:hover { background: #822013; border-color: #822013; } .login-wp .sns-join li.kakao a.Btn { background: #fee800; border-color: #fee800; color: #3c1b1b; } .login-wp .sns-join li.kakao a.Btn:hover { background: #e3d001; border-color: #e3d001; } .login-wp .sns-join li.naver a.Btn { background: #6bb32b; border-color: #6bb32b; } .login-wp .sns-join li.naver a.Btn:hover { background: #509a0f; border-color: #509a0f; } .login-wp span.clr-red { font-weight: bold; } .login-wp .guide-box { clear: both; padding: 25px 25px 22px 25px; font-size: 14px; text-align: center; border: 1px solid #ddd; border-radius: 4px; background: #fff; margin-bottom: 60px; } .login-wp .guide-box strong.bold { display: block; margin: 0 0 15px 0; padding: 0 0 18px 0; font-size: 16px; color: #19218f; font-weight: bold; border-bottom: 1px dotted #c5c5c5; } .login-wp .guide-box span.help { clear: both; display: inline-block; height: 20px; margin: 0 8px 0 0; padding: 0 20px 0 20px; font-size: 11px; letter-spacing: -0.5px; color: #fff; line-height: 20px; text-align: center; vertical-align: middle; border-radius: 20px; background: #19218f; } .login-wp .guide-box a { color: #333; } .btn-type.join { font-size: 14px; height: 40px; line-height: 38px; border-radius: 4px; } .copyright-lawBox { height: 660px; margin: 0 0; padding: 15px 30px 20px 30px; font-size: 13px; color: #444; line-height: 1.6em; text-align: justify; /* white-space: pre-wrap; */ border: 1px solid #ddd; overflow-x: hidden; overflow-y: auto; } .copyright-lawBox .stit { display: block; margin: 15px 0 8px 0; font-size: 17px; color: #444; font-weight: bold; text-decoration: none; cursor: default; } .copyright-lawBox .txt { font-size: 12px; color: #444; line-height: 20px; margin-top: 0; margin-bottom: 6px; } .copyright-lawBox .txt.in01 { padding-left: 12px; } .copyright-lawBox .bar { margin: 17px 0; border-top: 1px dashed var(--gray-300); } .provision-area { position: relative; width: 1020px; margin: 0 auto; } .provision-area .mTitle { color: #555; text-align: center; position: relative; } .provision-area .regist-free-flow { position: absolute; bottom: 5px; right: 0px; } .provision-area .regist-free-flow span { float: left; display: block; position: relative; width: 30px; height: 30px; margin: 0 0 0px 10px; font-size: 14px; color: #aaa; line-height: 26px; text-align: center; border: 1px solid #ccc; border-radius: 100%; background: #fff; } .provision-area .regist-free-flow span:first-child::before { width: 0; } .provision-area .regist-free-flow span::before { content: ""; display: block; position: absolute; top: 50%; left: -10px; width: 10px; height: 1px; background: #ccc; } .provision-area .regist-free-flow span.active { font-size: 15px; color: #fff; font-weight: bold; border-color: #222; background: #333; } .provision-area .regist-area { position: relative; padding: 60px 60px 80px 60px; line-height: 150%; border: 1px solid #dadada; border-radius: 10px; background: #fff; } .provision-area .join-law { width: 840px; margin: 0 auto; } .provision-area .join-law .tbl-btn ul.ctB li a { padding-left: 20px; padding-right: 20px; } .provision-area .join-law span { font-size: 15px; } .provision-area .join-law .stit { position: relative; margin: 0 0 10px 0; padding: 0 100px 0 0; font-size: 13px; color: #999; line-height: 150%; word-break: keep-all; } .provision-area .join-law .stit strong { display: block; height: 26px; padding: 0 0 0 22px; font-size: 18px; color: #333; letter-spacing: -0.5px; font-weight: bold; background: url(../images/ic_check2.png) no-repeat 0 2px; } .provision-area .join-law .stit strong span { padding-left: 4px; font-weight: bold; } .provision-area .join-law .stit .checkbox-field { position: absolute; bottom: 2px; right: 0px; } .provision-area .join-law .stit .checkbox-field label { font-size: 14px; color: #555; } .provision-area .join-law .copyright-lawBox { height: 220px !important; margin: 10px 0 48px 0; padding: 15px 20px 20px 20px !important; font-size: 12px !important; border-top-color: #c9c9c9; border-left-color: #c9c9c9; background: #fafafa; box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.05) inset; } .provision-area .join-law .all-check { margin: 24px 0 28px 0; } .provision-area .join-law .certifi-wp { width: 700px; margin: 28px auto 10px auto; display: flex; flex-direction: column; } .provision-area .join-law .certifi-wp .box { display: flex; flex-direction: row; align-items: center; border: 1px solid #ddd; border-radius: 8px; background: #f8f8f8; min-height: 200px; padding: 20px 20px 20px 40px; margin-bottom: 32px; transition: all 0.2s ease; } .provision-area .join-law .certifi-wp .box:hover { border-color: #333; } .provision-area .join-law .certifi-wp .box .img-circle { width: 140px; height: 140px; border-radius: 70px; background: #ddd; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1) inset; overflow: hidden; margin-right: 28px; } .provision-area .join-law .certifi-wp .box .txt-box { display: flex; flex-direction: column; } .provision-area .join-law .certifi-wp .box .txt-box .title { font-size: 21px; letter-spacing: -0.5px; font-weight: bold; } .provision-area .join-law .certifi-wp .box .txt-box .txt { margin: 4px 0 0 0; font-size: 14px; color: #555; line-height: 150%; } .provision-area .join-law .certifi-wp .box .txt-box .btn-type { border-radius: 4px; max-width: 180px; margin-top: 10px; } .provision-area .join-law .comp { max-width: 600px; margin: 0 auto 10px; display: flex; flex-direction: column; align-items: center; } .provision-area .join-law .comp .comp-img { width: 100%; max-width: 200px; margin-bottom: 30px; } .provision-area .join-law .comp .title { font-size: 26px; font-weight: bold; margin-bottom: 12px; } .provision-area .join-law .comp .txt { text-align: center; } .provision-area .join-law .customer-area { margin-top: 70px; display: flex; flex-direction: row; justify-content: space-between; } .provision-area .join-law .customer-area .item { width: 49%; padding: 30px 26px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #f8f8f9; } .provision-area .join-law .customer-area .item.qna { display: flex; flex-direction: row; justify-content: space-between; } .provision-area .join-law .customer-area .item.qna .qna-img { width: 140px; } .provision-area .join-law .customer-area .item.qna .btn-type { font-size: 13px; height: 38px; line-height: 36px; border-radius: 6px; margin-top: 10px; padding: 0 25px; } .provision-area .join-law .customer-area .txt-box { width: calc(100% - 150px); } .provision-area .join-law .customer-area .txt-box .title { font-size: 24px; font-weight: bold; font-family: "Noto Sans KR", sans-serif; } .provision-area .join-law .customer-area .txt-box .txt { color: #777; font-size: 14px; line-height: 20px; } .provision-area .join-law .customer-area .item.call { display: flex; flex-direction: row; justify-content: space-between; padding-bottom: 20px; } .provision-area .join-law .customer-area .item.call .txt-box { width: 150px; } .provision-area .join-law .customer-area .item.call .call-img { width: 60px; margin-top: 12px; } .provision-area .join-law .customer-area .item.call .num-box { width: 180px; display: flex; flex-direction: column; } .provision-area .join-law .customer-area .item.call .num-box span { font-size: 14px; color: #333; font-weight: bold; } .provision-area .join-law .customer-area .item.call .num-box strong { font-size: 19px; margin-bottom: 8px; letter-spacing: 0.5px; } .provision-area .join-law .customer-area .item.call .num-box strong:last-child { margin-bottom: 0; } .provision-area .join-law .join-check { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 48px 20px; margin-top: 20px; margin-bottom: 40px; border: 1px solid #e0e0e0; border-radius: 10px; background-color: #f8f8f9; } .provision-area .join-law .join-check img { margin-right: 60px; } .provision-area .join-law .join-check .txt-box .check-id { font-size: 30px; font-weight: bold; color: #ff5529; margin-bottom: 20px; } .provision-area .join-law .join-check .txt-box .date { margin-bottom: 24px; } .provision-area .join-law .join-check .txt-box .btn-type { padding: 0 54px; border-radius: 4px; } .provision-area .gift-info { display: flex; flex-direction: row; flex-wrap: nowrap; font-family: "Noto Sans KR", sans-serif; } .provision-area .gift-info .visual-icon { display: flex; align-items: center; justify-content: center; text-align: center; font-weight: bold; max-width: 110px; word-break: keep-all; border-radius: 6px; margin-right: 20px; padding: 10px; background-color: #e05555; color: #fff; } .provision-area .gift-info .gift-txt { letter-spacing: -1px; font-size: 18px; display: flex; flex-direction: column; gap: 6px; } .provision-area .kinds { margin: 30px 0 35px 0; padding: 30px 0 0px 0; border-top: 1px solid #e7e7e7; } .provision-area .kinds .mTitle { text-align: left; } .provision-area .kinds .member-type { display: flex; flex-direction: row; justify-content: space-between; font-family: "Noto Sans KR", sans-serif; width: 100%; margin-bottom: 40px; } .provision-area .kinds .member-type input { display: none; } .provision-area .kinds .member-type label { display: block; position: relative; width: 48%; height: 160px; padding-left: 158px; font-size: 27px; color: #333; letter-spacing: -2px; line-height: 146px; font-weight: bold; text-decoration: none; border: 5px solid #f0f1f3; border-radius: 12px; background-repeat: no-repeat; background-position: 45px center; box-shadow: 0 1px 1px 0 rgba(222, 222, 222, 0.2901960784); transition: all 0.2s; cursor: pointer; } .provision-area .kinds .member-type label.biz { float: left; background: url(../images/free_step01_1.png) no-repeat 26px 0; } .provision-area .kinds .member-type label.personal { float: right; background-image: url(../images/free_step01_2.png); } .provision-area .kinds .member-type #mk1:checked ~ label[for=mk1], .provision-area .kinds .member-type #mk2:checked ~ label[for=mk2] { border: 5px solid var(#7d83d4); box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2); } .provision-area .kinds .member-type #mk1:checked ~ label[for=mk1] i, .provision-area .kinds .member-type #mk2:checked ~ label[for=mk2] i { content: "\f02e"; } .provision-area .kinds .member-type #mk1:checked ~ label[for=mk1]::after, .provision-area .kinds .member-type #mk2:checked ~ label[for=mk2]::after { position: absolute; content: url(../images/bookmark-solid.svg); top: -66px; left: 11px; width: 20px; } .provision-area .kinds .guide .kind { display: block; margin: 30px 0 10px 0; font-size: 17px; color: #cf4444; } .provision-area .kinds .guide .tbl { width: 100%; table-layout: fixed; border-top: 1px solid #ccc; } .provision-area .kinds .guide .tbl th { padding: 8px 0 8px 0; font-size: 14px; color: #777; text-align: center; vertical-align: middle; border-right: 1px solid #d5d5d5; border-bottom: 1px solid #ccc; background: #f5f5f5; } .provision-area .kinds .guide .tbl th:last-child { border-right: none; } .provision-area .kinds .guide .tbl td { padding: 11px 15px 10px 15px; font-size: 14px; color: #444; line-height: 150%; text-align: justify; vertical-align: top; border-right: 1px solid #d5d5d5; border-bottom: 1px solid #ccc; } .provision-area .kinds .guide .tbl td:last-child { border-right: none; } .provision-area .kinds .guide .tbl td.mid { padding-left: 0; padding-right: 0; text-align: center; vertical-align: middle; } .provision-area .kinds .guide .regiBtn { display: block; width: 240px; height: 40px; margin: 25px auto 0; font-size: 14px; color: #fff; letter-spacing: -0.5px; line-height: 38px; text-align: center; border-radius: 3px; background: #ff643c; } .provision-area .kinds .guide .regiBtn i { display: inline-block; margin: 0 0 0px 10px; font-size: 17px; vertical-align: text-bottom; } .provision-area .kinds .guide .regiBtn:hover { text-decoration: none; background: #f47d31; } .provision-area ul.list { margin-bottom: 40px; } .provision-area ul.list li { position: relative; padding-left: 20px; font-size: 14px; } .provision-area ul.list li::after { position: absolute; content: "·"; top: -5px; left: 2px; font-size: 40px; } .provision-area label { cursor: pointer; } .regist-msg { display: none; margin: 0 0 0 0; font-size: 13px; line-height: 100%; } .regist-msg.active { display: inline-block; } .tbl-wp.signup .form-control { display: inline-block; } .tbl-wp.signup .form-info { margin-left: 10px; } .tbl-wp.signup .form-info i { margin-top: -2px; margin-right: 4px; } .tbl-wp.signup td.hp input { width: 85px; } .tbl-wp.signup td.cell .radio-field { margin-top: 10px; } .tbl-wp.signup .radio-field { font-size: 14px; color: #777; } .tbl-wp.signup .radio-field label { padding: 0 32px 0 0; cursor: pointer; } .tbl-wp.signup ul.list { margin-top: 18px; } .tbl-inBtn { display: inline-block; position: relative; height: 40px; font-size: 14px; color: rgba(255, 255, 255, 0.9); letter-spacing: -0.5px; line-height: 38px; text-decoration: none !important; font-weight: normal; text-align: center; vertical-align: middle; border-radius: 6px; cursor: pointer; z-index: 2; } .join-msg { width: 100%; height: 30px; } .join-msg .msg { font-size: 14px; letter-spacing: -1px; line-height: 24px; font-weight: 600; position: relative; padding-left: 26px; display: none; } .join-msg .msg::after { position: absolute; content: ""; width: 20px; height: 20px; background-color: pink; top: 3px; left: 0; background: url("../images/mark01-icon.png") no-repeat; background-position: center; } .join-msg .msg.txt-red { color: #d43c3c; } .join-msg .msg.active { display: block; } .anno-img-wp { clear: both; position: relative; height: 200px; margin: -25px 0 30px 0; padding: 35px 440px 15px 0; font-size: 110%; color: #444; line-height: 1.6em; background: url("../images/phone_pro_visual.png") no-repeat right bottom; font-family: "Noto Sans KR", sans-serif; overflow: hidden; } .anno-img-wp .stit { font-weight: bold; display: block; margin: 0 0 14px 0; font-size: 230%; color: #333; letter-spacing: -2.5px; line-height: 1.2em; } .anno-info-wp { display: flex; flex-direction: column; } .anno-info-wp .tit-box { display: flex; flex-direction: row; margin-bottom: 16px; } .anno-info-wp .tit-box .num { width: 34px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; color: #fff; letter-spacing: 0; text-align: center; border-radius: 3px; background: #333; margin-right: 10px; } .anno-info-wp .tit-box .tit { font-size: 23px; color: #333; letter-spacing: -1px; line-height: 1.2em; font-weight: bold; } .anno-info-wp .txt-box { display: flex; flex-direction: column; font-size: 16px; font-family: "Noto Sans KR", sans-serif; gap: 4px; line-height: 26px; } .anno-info-wp .txt-box .und-line { text-decoration: underline; } .anno-info-wp .txt-box a { transition: all 0.2s ease; } .anno-info-wp .txt-box a:hover { color: #ff5529; text-decoration: underline; } .anno-info-wp .txt-list-box p { font-family: "Noto Sans KR", sans-serif; position: relative; padding-left: 20px; line-height: 26px; margin-bottom: 4px; } .anno-info-wp .txt-list-box p::after { position: absolute; content: ""; width: 3px; height: 3px; border-radius: 2px; background-color: #333; left: 2px; top: 8px; } .anno-info-wp .phone-pro-tbl { margin: 18px 0 60px 0; border-bottom: 1px solid #ccc; } .video-area { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0 60px; } .video-area iframe { width: 969px; height: 545px; } .comment-area { display: flex; flex-direction: column; padding: 40px 50px; border: 1px solid #ddd; margin-top: 20px; } .comment-area form { width: 100%; display: flex; flex-direction: row; } .comment-area .com-box { width: 100%; padding: 20px; background: #eee; margin-bottom: 10px; border-radius: 4px; } .comment-area .com-box textarea::-moz-placeholder { color: rgb(176, 176, 176); } .comment-area .com-box textarea::placeholder { color: rgb(176, 176, 176); } .comment-area .com-box textarea { width: 87%; height: 80px; resize: none; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ margin-right: 1%; padding: 12px 10px; } .comment-area .com-box .com-btn { display: block; width: 12%; height: 80px; font-size: 100%; color: #fff; text-align: center; outline: none; border: 0; border-radius: 6px; background: #777; cursor: pointer; transition: all 0.2s ease; } .comment-area .com-box .com-btn:hover { background-color: #333; } .comment-area .comment-list { display: flex; flex-direction: column; margin-bottom: 20px; } .comment-area .comment-list button { display: flex; align-items: center; justify-content: center; height: 20px; padding: 0 5px; font-size: 11px; color: #fff; line-height: 20px; text-decoration: none !important; text-align: center; border-radius: 4px; background: #f47d31; margin-top: 2px; transition: all 0.2s ease; position: relative; } .comment-area .comment-list button:hover { background: #e57028; } .comment-area .comment-list button.cmt-btn-modi { background-color: #4151e4; } .comment-area .comment-list button.cmt-btn-modi:hover { background-color: #2b38b1; } .comment-area .comment-list button.cmt-btn-del { background-color: #ca3636; } .comment-area .comment-list button.cmt-btn-del:hover { background-color: #b12e2e; } .comment-area .comment-list button:active { top: 1px; } .comment-area .comment-list .cmt { display: flex; flex-direction: column; padding: 20px; border-bottom: 1px solid #eee; } .comment-area .comment-list .cmt:last-child { border: none; } .comment-area .comment-list .cmt .top { display: flex; flex-direction: row; align-items: center; margin-bottom: 10px; gap: 6px; } .comment-area .comment-list .cmt .top p { font-size: 14px; color: #777; } .comment-area .comment-list .cmt .top .date { margin-right: 5px; } .comment-area .comment-list .cmt .top .c-writer { margin-right: 8px; } .comment-area .comment-list .cmt-txt { line-height: 1.6em; padding-left: 6px; position: relative; } .comment-area .comment-list .cmt.re01 .cmt-txt, .comment-area .comment-list .cmt.re02 .cmt-txt, .comment-area .comment-list .cmt.re03 .cmt-txt { padding-left: 40px; } .comment-area .comment-list .cmt.re01 .cmt-txt::after, .comment-area .comment-list .cmt.re02 .cmt-txt::after, .comment-area .comment-list .cmt.re03 .cmt-txt::after { position: absolute; content: ""; width: 26px; height: 24px; background: url("../images/co-arrow-icon.svg") no-repeat; left: 2px; top: -2px; } .comment-area .comment-list .cmt.re01 .cmt-input, .comment-area .comment-list .cmt.re02 .cmt-input, .comment-area .comment-list .cmt.re03 .cmt-input { padding-left: 35px; } .comment-area .comment-list .cmt.re01 { padding-left: 45px; } .comment-area .comment-list .cmt.re02 { padding-left: 65px; } .comment-area .comment-list .cmt.re03 { padding-left: 85px; } .comment-area .cmt-input { width: 100%; display: flex; flex-direction: row; justify-content: space-between; padding: 0 4px; margin-top: 12px; } .comment-area .cmt-input textarea { width: 87%; height: 80px; resize: none; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ padding: 12px 10px; } .comment-area .cmt-input .cmt-btn-box { display: flex; flex-direction: column; width: 12%; gap: 4px; } .comment-area .cmt-input .cmt-btn-box .btn { color: #fff; height: 38px; transition: all 0.2s ease; font-size: 15px; border-radius: 6px; } .comment-area .cmt-input .cmt-btn-box .btn:first-child { background-color: #353fd5; } .comment-area .cmt-input .cmt-btn-box .btn:first-child:hover { background-color: #19218f; } .comment-area .cmt-input .cmt-btn-box .btn:last-child { background-color: #bbb; } .comment-area .cmt-input .cmt-btn-box .btn:last-child:hover { background-color: #7b7b7f; } .expert-btn { display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 12px; height: 24px; padding: 5px 10px; color: #fff; background: #f47d31; transition: all 0.2s ease; border-radius: 4px; letter-spacing: -1px; gap: 6px; } .expert-btn i { margin-top: 2px; } .expert-btn:hover { background-color: #ff5529; } .btn-list { height: 58px; padding: 0 38px 0 38px; font-size: 18px; color: #fff; line-height: 56px; text-decoration: none !important; text-align: center; border: 1px solid #272727; border-radius: 4px; background: #333; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); cursor: pointer; transition: 0.2s ease; margin-bottom: 40px; } .btn-list:hover { color: #fff; background-color: #00c398; border: 1px solid #00c398; } .btn-list.my-consult { border-color: #3c4b5c; background-color: #435366; position: absolute; left: 0; } .btn-list.my-consult:hover { border-color: #496587; background-color: #4e6c91; } .btn-list.btn-reco { display: flex; align-items: center; justify-content: center; padding: 0 30px 0 28px; } .btn-list.btn-reco i { margin-right: 4px; color: rgb(255, 51, 51); transition: all 0.2s ease; } .btn-list.btn-reco:hover { background-color: rgb(189, 16, 16); border-color: rgb(189, 16, 16); } .btn-list.btn-reco:hover i { color: #fff; } .btn-area { display: flex; justify-content: flex-end; height: 36px; margin-bottom: 10px; } .btn-area dl { display: flex; flex-direction: row; gap: 5px; } .btn-area dl i { color: #fff; font-size: 0.9rem; margin-top: -2px; } .btn-area dl .fa-arrow-left { font-size: 12px; margin-right: 4px; } .btn-area dd { position: relative; } .btn-area dd .prev { padding: 0 9px; } .btn-area dd .volume-box.show { display: block; opacity: 1; transform: translateY(0); } .btn-area dd .volume-box { display: none; opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; position: absolute; top: 30px; right: 0; padding: 18px 18px 15px 18px; text-align: left; border: 1px solid #aaa; background: #fff; box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.06); z-index: 100; } .btn-area dd .volume-box span { font-size: 12px; color: #999; } .btn-area dd .volume-box .btn-read-box { display: flex; flex-direction: row; gap: 4px; } .btn-area dd .volume-box .rate { padding: 10px 2px 0 0; } .btn-area dd .volume-box .rate input { min-height: 26px; width: 178px; } .btn-area dd .volume-box .btn-read { height: 27px; padding: 0 10px 0 15px; font-size: 12px; border-radius: 3px; color: #fff; margin-top: 8px; transition: 0.2s ease; } .btn-area dd .volume-box .btn-read i { margin: 0 5px 2px 0; font-size: 13px; line-height: 25px; } .btn-area dd .volume-box::before { content: ""; position: absolute; top: -16px; right: 12px; width: 0; height: 0; margin: 0 0 0 -8px; border: 8px solid; border-color: transparent transparent #aaa transparent; z-index: 100; } .hwp { background: url("../images/file_hwp.png") no-repeat 0 5px; background-size: 17px auto; } .pdf { background: url("../images/file_pdf.png") no-repeat 0 5px; background-size: 17px auto; } .selt-1 { height: 40px; border-radius: 3px; -moz-appearance: none; -webkit-appearance: none; appearance: none; padding-right: 30px !important; background: #fff url(../images/select_bg.png) no-repeat center right !important; background-size: auto 10px !important; transition: all 0.3s; cursor: pointer; } .page-wp { display: flex; flex-direction: column; width: 100vw; position: relative; min-width: 1200px; } .max { max-width: 1200px; margin: 0 auto; } .page-header { display: inherit; width: 100%; height: 44px; align-items: center; justify-content: center; background-color: #1e1e1e; } caption { display: none; } .tbl-wp table.List .tit-line { display: flex; flex-direction: row; margin-bottom: 8px; } .tbl-wp table.List .tit-line .tit a { font-size: 16px; margin-right: 8px; font-weight: bold; line-height: 24px; } .tbl-wp table.List td.keyword a:hover::after { display: block; } .tbl-wp table.List td.keyword a:hover::before { display: block; } .del-icon { display: flex; align-items: center; justify-content: center; padding: 1px 6px; border-radius: 3px; border: 1px solid #cc4242; background: #d94747; font-size: 11px; line-height: 1em; color: #fff; margin-right: 4px; } .expert-icon { display: flex; align-items: center; justify-content: center; padding: 1px 6px; border-radius: 3px; border: 1px solid #299921; background: #299921; font-size: 11px; line-height: 1em; color: #fff; margin-right: 4px; } .del-date { display: flex; align-items: center; justify-content: center; padding: 1px 6px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border: 1px solid #cc4242; background: #d94747; font-size: 11px; line-height: 1em; color: #fff; } .date-line { background-color: #fff; color: #cc4242; padding: 1px 9px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border: 1px solid #cc4242; font-size: 12px; font-weight: 500; } .txt3 { display: -webkit-box; max-height: 61px; font-size: 13px; color: #666; letter-spacing: -0.2px; line-height: 1.4em; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; transition: all 0.3s; overflow: hidden; cursor: help; } td.keyword a { transition: all 0.2s ease; position: relative; word-break: keep-all; padding: 0 10px; } td.keyword a:hover { color: #ff5529 !important; } td.keyword a:after { content: "동일 주제어의 예규판례 조회"; display: none; position: absolute; bottom: -30px; left: 50%; width: 150px; height: 22px; margin: 0 0 0 -75px; padding: 0px 0 0 0; font-size: 11px; color: #fff; letter-spacing: -0.5px; line-height: 21px; text-align: center; text-decoration: none !important; border-radius: 3px; background: #25272f; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); animation: keyword_tooltip 0.4s ease-out; z-index: 10; } td.keyword a:before { content: ""; display: none; position: absolute; bottom: -9px; left: 50%; width: 9px; height: 5px; margin: 0 0 0 -4.5px; background: url("../images/YgJb_ic.png") no-repeat center 0; animation: keyword_tooltip 0.4s ease-out; z-index: 10; } @keyframes keyword_tooltip { from { opacity: 0; transform: translate(0, 4px); } to { opacity: 1; transform: translate(0, 0); } } .yp-view-wp { border-bottom: 1px solid #ccc; display: flex; flex-direction: row; justify-content: space-between; width: 100%; padding-bottom: 30px; } .yp-view-wp .v-lt { width: 76%; display: flex; flex-direction: column; padding-bottom: 40px; } .yp-view-wp .v-lt .txtbox { line-height: 1.6em; } .yp-view-wp .yp-info-txtbox { padding: 24px 20px; border: 2px solid #555; border-radius: 4px; background: #f9f9f9; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.08); margin-bottom: 20px; } .yp-view-wp .yp-info-txtbox .txtarea { display: flex; flex-direction: row; } .yp-view-wp .yp-info-txtbox .dotted-line { width: 100%; border-bottom: 1px dotted #ccc; margin: 16px 0; } .yp-view-wp .yp-info-txtbox .ygJb-stit { font-size: 16px; line-height: 1.2em; font-weight: bold; min-width: 70px; padding-bottom: 0; } .yp-view-wp .yp-info-txtbox .ygJb-text { font-size: 100%; line-height: 1.4em; word-wrap: break-word; white-space: normal; } .yp-view-wp .yp-info-txtbox .ygJb-stit::before { content: "【"; /* content: "["; */ display: inline-block; margin: 0 3px 0 0; } .yp-view-wp .yp-info-txtbox .ygJb-stit::after { content: "】"; /* content: "]"; */ display: inline-block; margin: 0 0 0 3px; } .yp-view-wp .yp-info-txtbox .ygJb-text { font-size: 15px; } .yp-view-wp .v-rt { width: 22%; display: flex; flex-direction: column; } .yp-view-wp .yp-floater { clear: both; position: relative; border-radius: 6px; overflow: hidden; border: 1px solid #ddd; } .yp-view-wp .yp-floater .title { width: 100%; height: 46px; background-color: #333; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; } .yp-view-wp .yp-floater .con-box { padding: 24px 20px; background-color: #fff; height: 100%; } .yp-view-wp .yp-floater .con-box .stit { font-size: 15px; font-weight: bold; position: relative; } .yp-view-wp .yp-floater .con-box .stit i { margin-top: -4px; margin-right: 4px; } .yp-view-wp .yp-floater .con-box .list:last-child { margin-bottom: 10px; } .yp-view-wp .yp-floater .con-box .list { margin-top: 6px; margin-bottom: 26px; font-size: 13px; } .yp-view-wp .yp-floater .con-box .list li { position: relative; padding: 4px 0 4px 10px; } .yp-view-wp .yp-floater .con-box .list li a { line-height: 1.4em; transition: all 0.2s ease; } .yp-view-wp .yp-floater .con-box .list li a:hover { color: #ff5529; text-decoration: underline; } .yp-view-wp .yp-floater .con-box .list li::after { content: ""; position: absolute; top: 13px; left: 2px; width: 2px; height: 2px; border-radius: 2px; background-color: #333; } .con-tit-box { margin-bottom: 16px; } .con-tit-box .tit { display: flex; flex-direction: row; align-items: center; font-size: 27px; font-weight: bold; margin-right: 8px; } .con-tit-box .tit .tag-type { margin-left: 8px; margin-top: 2px; } .yp-keyword { display: flex; flex-direction: row; align-items: center; color: #333; font-size: 15px; margin-bottom: 12px; } .yp-keyword .stit { display: flex; padding: 6px 6px; background-color: #333; border-radius: 3px; color: #fff; font-size: 12px; width: -moz-max-content; width: max-content; margin-right: 8px; margin-top: -1px; } .ygJb-stit { margin: 0 0 0 0; padding: 0 0 10px 0; font-size: 18px; line-height: 1.2em; font-weight: bold; } .ygJb-stit::before { content: "【"; display: inline-block; margin: 0 3px 0 0; } .ygJb-stit::after { content: "】"; display: inline-block; margin: 0 0 0 3px; } .yp-del-info-box { margin: 20px 0; padding: 26px 24px; border-radius: 4px; border: 1px solid #c9c9c9; background-color: #f8f8f8; } .yp-del-info-box ul li { display: flex; flex-direction: row; min-height: 24px; margin-bottom: 12px; } .yp-del-info-box ul li:last-child { margin-bottom: 0; } .yp-del-info-box p, .yp-del-info-box a { line-height: 24px; font-size: 14px; } .yp-del-info-box .stit { display: block; top: 2px; min-width: 70px; height: 20px; font-size: 12px; color: #fff; letter-spacing: -0.5px; line-height: 18px; text-align: center; border-radius: 20px; background: #d94747; margin-right: 10px; margin-top: 2px; } .yp-comm .date { border: none; transition: all 0.2s ease; } .etc .h-info { display: flex; flex-direction: row; height: 28px; align-items: center; gap: 10px; } .etc .h-info-tag { display: flex; flex-direction: row; height: 28px; align-items: center; gap: 10px; margin-top: 12px; } .etc .value { color: #333; font-weight: 600; } .etc .value-link { color: #333; transition: all 0.2s ease; } .etc .value-link:hover { color: #ff5529; text-decoration: underline; } .txt-deco-box01 { display: flex; flex-direction: column; width: 100%; background-color: #d1e4e7; border: 1px solid rgba(255, 255, 255, 0.4); outline: 1px solid #bed9dd; padding: 8px 12px 12px; margin-top: 20px; margin-bottom: 20px; } .txt-deco-box01 .top-header { position: relative; display: flex; flex-direction: row; height: 26px; align-items: center; padding-right: 30px; margin-bottom: 8px; } .txt-deco-box01 .top-header::after { content: ""; position: absolute; width: 20px; height: 20px; background: url("../images/cnts_List_Title_ic2.png") 10px 7px; background-repeat: no-repeat; right: 4px; top: 2px; } .txt-deco-box01 .top-header .tit { position: relative; padding-left: 26px; font-weight: bold; font-size: 14px; } .txt-deco-box01 .top-header .tit::after { content: ""; position: absolute; width: 16px; height: 16px; background: url("../images/cnts_List_Title_ic.png"); background-repeat: no-repeat; left: 4px; top: 1px; } .txt-deco-box01 .body-con { width: 100%; border-radius: 4px; background-color: #fff; padding: 14px 18px; display: flex; flex-direction: column; } .txt-deco-box01 .body-con p { font-size: 13px; line-height: 1.6em; } .txt-deco-box01 .body-con p a { color: #005de4; transition: all 0.2s ease; } .txt-deco-box01 .body-con p a:hover { text-decoration: underline; } .deco-tit-box01, .deco-tit-box02 { display: flex; flex-direction: row; position: relative; min-height: 33px; padding: 8px 16px; border: 1px solid #cce4e8; border-radius: 3px; background: #ecf4f5; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04), 1px 1px 0 0 rgba(255, 255, 255, 0.5) inset; margin-top: 12px; margin-bottom: 12px; } .deco-tit-box01.bl, .deco-tit-box02.bl { border-color: #e8ebf2; background-color: #e8ebf2; } .deco-tit-box01::after, .deco-tit-box02::after { content: ""; position: absolute; width: 20px; height: 20px; background: url(../images/cnts_List_Title_ic2.png) 0px 4px; background-repeat: no-repeat; right: 2px; top: 10px; } .deco-tit-box01 .num-icon, .deco-tit-box02 .num-icon { width: 13px; height: 13px; margin-top: 3px; margin-right: 10px; } .deco-tit-box01 .tit, .deco-tit-box02 .tit { font-size: 15px; color: #444; line-height: 130%; font-weight: bold; } .deco-tit-box01 .tit .smblue, .deco-tit-box02 .tit .smblue { bottom: 1ex; color: #0000ff; font-weight: bold; position: relative; display: inline-block; height: 0; margin: 0 2px; line-height: 1; font-size: 11px; } .deco-tit-box02 { background-color: #e8ebf2; border-color: #c9d1e0; } .question-box, .answer-box { display: flex; flex-direction: row; margin-top: 20px; margin-bottom: 20px; } .question-box .icon, .answer-box .icon { width: 30px; height: 30px; font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 17px; color: #fff; line-height: 27px; font-weighT: bold; text-align: center; border-radius: 100%; margin-right: 20px; } .question-box .icon.ques, .answer-box .icon.ques { background-color: #999; } .question-box .icon.answ, .answer-box .icon.answ { background-color: #353fd5; } .question-box .answ-icon, .answer-box .answ-icon { width: 30px; height: 30px; font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 17px; color: #fff; line-height: 27px; font-weighT: bold; text-align: center; border-radius: 100%; margin-right: 20px; } .question-box .txt-area, .answer-box .txt-area { width: calc(100% - 50px); line-height: 160%; font-size: 14px; } .cont-box { width: 100%; padding: 26px; border-radius: 4px; border: 1px solid #d5d5d5; } .cont-box .box-tit { font-weight: bold; margin-bottom: 10px; } .cont-box .box-tit.cons-yg { padding-left: 22px; background: url("../images/list_ic2.png") no-repeat 0 0; background-size: 15px auto; line-height: 140%; } .cont-box .cir-list-txt { padding-bottom: 0; } .cont-box .cir-list-txt li { font-size: 14px; margin-bottom: 8px; } .cont-box .cir-list-txt li::after { position: absolute; content: ""; width: 3px; height: 3px; border-radius: 3px; background-color: #333; top: 8px; left: 5px; } .hyper { color: #162aff; } .hyper:hover { text-decoration: underline; } .yp-issuecase-wp { position: relative; min-height: 400px; padding: 0 0 0 320px; overflow: hidden; transition: 0.2s; } .yp-issuecase-wp .Lt-menu { position: absolute; top: 0; bottom: 0; left: 0; width: 290px; max-height: 900px; border: 1px solid #d6d6d6; background: #f2f2f2; transition: left 0.2s; border-radius: 3px; } .yp-issuecase-wp .Lt-menu .Btn { display: flex; align-items: center; justify-content: center; position: absolute; top: 40%; right: -22px; width: 22px; height: 60px; margin: -30px 0 0 0; padding: 0 2px 0 0; font-size: 12px; color: #555; border: 1px solid #d6d6d6; border-left-color: #f1f1f1; border-top-right-radius: 8px; border-bottom-right-radius: 8px; background: #f1f1f1; z-index: 10; cursor: pointer; } .yp-issuecase-wp .Lt-menu .Btn .fa-solid { transform: rotate(180deg); } .yp-issuecase-wp .Lt-menu ul { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 16px 10px 16px 12px; overflow-y: scroll; } .yp-issuecase-wp .Lt-menu li { margin-bottom: 10px; } .yp-issuecase-wp .Lt-menu li a { display: block; padding: 3px 0; font-size: 13px; color: #555; line-height: 120%; text-decoration: none !important; } .yp-issuecase-wp .Lt-menu li a .item-name { display: inline-block; margin: 0 3px 0 0; font-size: 14px; letter-spacing: -0.2px; transition: all 0.2s ease; line-height: 1.4em; } .yp-issuecase-wp .Lt-menu li a .semok { color: #2259a6; font-weight: bold; transition: all 0.2s ease; } .yp-issuecase-wp .Lt-menu li:hover a .item-name { color: #ff5529; } .yp-issuecase-wp .Lt-menu li:hover .semok { color: #ff5529; } .yp-issuecase-wp .Lt-menu li.active a .item-name { color: #ff5529; font-weight: bold; } .yp-issuecase-wp .Lt-menu li.active a .semok { color: #ff5529; } .yp-issuecase-wp .Rt-List .Title { margin: 0 0 20px 0; padding: 0 0 12px 0; font-size: 22px; letter-spacing: -0.5px; line-height: 130%; font-weight: 500; border-bottom: 1px solid #e7e7e7; } input[type=checkbox]#yp_issueCase_Menu { display: none; } input[type=checkbox]#yp_issueCase_Menu:checked ~ .yp-issuecase-wp { padding-left: 30px; } input[type=checkbox]#yp_issueCase_Menu:checked ~ .yp-issuecase-wp .Lt-menu { left: -289px; } input[type=checkbox]#yp_issueCase_Menu:checked ~ .yp-issuecase-wp .Lt-menu .Btn i { transform: rotate(0); } .row-area { position: relative; width: 1200px; margin: 50px auto; padding: 0 10px; display: flex; flex-direction: row; } .row-area .con-preview-box { width: calc(50% - 36px); } .row-area .con-preview-box .date { border: none; } .row-area.space-between { justify-content: space-between; } .md-banner { display: flex; align-items: center; justify-content: center; max-width: 1200px; margin: 40px auto 70px; width: 100%; height: 90px; border-radius: 12px; font-size: 20px; font-weight: bold; overflow: hidden; background-color: rgb(206, 206, 207); } .md-banner img { -o-object-position: center; object-position: center; -o-object-fit: cover; object-fit: cover; transition: all 0.3s ease; width: 100%; height: 100%; } .md-banner:hover img { scale: 1.01; } .con-feedback-wp { width: 100%; max-width: 1200px; padding: 28px; background: #fff; border: 1px solid #ddd; margin-top: 60px; } .con-feedback-wp .con-review { display: flex; flex-direction: row; justify-content: space-between; } .con-feedback-wp .con-review .tit { font-family: "Noto Sans KR", sans-serif; font-size: 16px; font-weight: 500; } .con-feedback-wp .con-review .score label { font-family: "Noto Sans KR", "Noto Sans", sans-serif; font-size: 15.5px; cursor: pointer; } .con-feedback-wp .con-review .score input { margin: -3px 0 0 25px; min-height: 20px; } .con-feedback-wp .comment { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; margin-top: 16px; } .con-feedback-wp .comment textarea { height: 100px; line-height: 24px; padding: 12px 5px 5px 12px; border: 1px solid #d5d5d5; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; resize: none; overflow: hidden; } .con-feedback-wp .comment .comment-btn { height: 100px; width: 200px; font-size: 16px; text-align: center; color: #fff !important; line-height: 48px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background: #555; border: none; cursor: pointer; text-decoration: none; transition: all 0.2s ease; } .con-feedback-wp .comment .comment-btn:hover { background-color: #353fd5; } .sch-row-wp { width: 100%; max-width: 1200px; display: flex; flex-direction: row; justify-content: space-between; } .sch-row-wp .sch-left-menu { width: 200px; min-height: 400px; height: -moz-max-content; height: max-content; } .sch-row-wp .sch-body-area { width: 730px; min-height: 800px; height: -moz-max-content; height: max-content; } .sch-row-wp .detail-sch { display: flex; flex-direction: column; background-color: #fff; border: 1px solid #dfdfdf; border-radius: 4px; padding: 20px 16px; font-size: 14px; } .sch-row-wp .detail-sch .tit { font-weight: bold; margin-bottom: 9px; font-size: 14px; } .sch-row-wp .detail-sch .input-date { margin-bottom: 16px; } .sch-row-wp .detail-sch .input-date .date-period-box { width: 140px; margin-bottom: 6px; height: 36px; min-height: 36px; border-radius: 3px; } .sch-row-wp .detail-sch .form-control { min-height: 36px; } .sch-row-wp .sch-left-menu { display: flex; flex-direction: column; } .sch-row-wp .sch-left-menu .menu-semu { border: 1px solid #333; background-color: #fff; border-radius: 4px; margin-bottom: 10px; } .sch-row-wp .sch-left-menu .menu-semu li.active .m-1dep { font-weight: bold; background: #19218f; } .sch-row-wp .sch-left-menu .menu-semu li.active .count-num { font-weight: bold; } .sch-row-wp .sch-left-menu .menu-semu .m-2dep-box { display: none; flex-direction: column; padding-top: 2px; padding-bottom: 3px; } .sch-row-wp .sch-left-menu .menu-semu .m-2dep-box .m-2dep { width: 100%; display: flex; flex-direction: row; align-items: center; height: 38px; font-size: 13px; padding: 0 12px; transition: all 0.2s ease; position: relative; padding-left: 24px; transition: all 0.2s ease; color: #444; } .sch-row-wp .sch-left-menu .menu-semu .m-2dep-box .m-2dep:hover { color: #353fd5; background-color: #eff1f8; } .sch-row-wp .sch-left-menu .menu-semu .m-2dep-box .m-2dep.active { color: #353fd5; font-weight: bold; background-color: #eff1f8; } .sch-row-wp .sch-left-menu .menu-semu .m-2dep-box .m-2dep.active .fa-l { color: #7d83d4; } .sch-row-wp .sch-left-menu .menu-semu .m-2dep-box .m-2dep .fa-l { position: absolute; font-size: 10px; width: 10px; left: 12px; top: 11px; color: #b0b0b0; } .sch-row-wp .sch-left-menu .menu-semu .m-2dep-box.show { display: flex; } .sch-row-wp .sch-left-menu .menu-semu .m-1dep { width: 100%; display: flex; flex-direction: row; align-items: center; height: 40px; font-size: 14px; background-color: #333; color: #fff; padding: 0 12px; position: relative; transition: all 0.2s ease; border-bottom: 1px solid #222; } .sch-row-wp .sch-left-menu .menu-semu .m-1dep .arrow { position: absolute; top: 16px; right: 12px; font-size: 12px; opacity: 0.6; transition: all 0.2s ease; } .sch-row-wp .sch-left-menu .menu-semu .m-1dep:hover .arrow { opacity: 1; } .sch-row-wp .sch-left-menu .menu-semu:last-child { border-bottom: 0; } .sch-row-wp .sch-left-menu .menu-semu .count-num { margin-left: 3px; font-size: 12px; } .sch-row-wp .sch-radiobox label { height: 28px; margin-right: 8px; font-size: 13px; cursor: pointer; } .sch-row-wp .sch-radiobox input[type=radio] { min-height: auto; } .sch-row-wp .sch-radiobox input[type=checkbox], .sch-row-wp .sch-radiobox input[type=radio] { margin: 0; margin-top: 0; line-height: normal; } .sch-row-wp .re-sch-btn { width: 100%; height: 42px; color: #fff; background-color: #333; border-radius: 6px; transition: all 0.2s ease; font-weight: 500; } .sch-row-wp .re-sch-btn:hover { background-color: #00bd93; } .sch-row-wp .sch-title { font-family: "Noto Sans KR", sans-serif; font-size: 24px; height: 26px; font-weight: bold; position: relative; } .sch-row-wp .sch-title .page-map { position: absolute; right: 0; font-size: 13px; color: #666; bottom: 0; } .sch-row-wp .sch-table { position: relative; } .sch-row-wp .sch-table .sch-more-btn { font-size: 12px; position: absolute; right: 0; bottom: -27px; padding: 5px 20px; background-color: #f0f0f1; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-left: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; transition: all 0.2s ease; } .sch-row-wp .sch-table .sch-more-btn .fa-solid { width: 12px; margin-top: -2px; } .sch-row-wp .sch-table .sch-more-btn:hover { background-color: #333; border-color: #333; color: #fff; } .sch-row-wp .sch-table .tbl-wp table.List th { height: 42px; border-bottom: 1px solid #e7e7e7; position: relative; font-size: 13px; } .sch-row-wp .sch-table .tbl-wp table.List th::after { content: ""; position: absolute; width: 1px; height: 12px; background-color: #d5d5db; right: 0; } .sch-row-wp .sch-table .tbl-wp table.List th:last-child::after { width: 0; } .sch-row-wp .sch-table .tbl-wp table.List td { height: 40px; font-size: 13px; border-right: 1px solid #ddd; } .sch-row-wp .sch-table .tbl-wp table.List td:last-child { border-right: 0; } .sch-row-wp .sch-table .tbl-wp table.List tbody tr { border-bottom: 1px solid #ddd; } .sch-row-wp .sch-table .tbl-wp table.List tbody tr:hover { background-color: transparent; } .sch-row-wp .sch-table .tbl-wp table.List .td-tit { background-color: #fafafa; } .sch-row-wp .sch-table .tbl-wp table.List .td-tit a { font-weight: bold; } .sch-row-wp .sch-table .tbl-wp table.List .td-value { width: 100%; padding: 2px; } .sch-row-wp .sch-table .tbl-wp table.List .td-value a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: all 0.2s ease; border-radius: 3px; } .sch-row-wp .sch-table .tbl-wp table.List .td-value a:hover { background-color: #19218f; color: #fff; font-weight: bold; } .sch-row-wp .sch-table .tbl-wp table.List .td-total td { background-color: #f4f6f9 !important; } .sch-row-wp .sch-table .tbl-wp table.List .td-hide, .sch-row-wp .sch-table .tbl-wp table.List .td-show { transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; } .sch-row-wp .sch-table .tbl-wp table.List .td-hide { max-height: 0; opacity: 0; display: none; } .sch-row-wp .sch-table .tbl-wp table.List .td-show { max-height: 500px; /* Adjust this value based on the content size */ opacity: 1; } .sch-row-wp .sch-result-con { width: 100%; display: flex; flex-direction: column; margin-top: 30px; } .sch-row-wp .sch-result-con .tit { font-size: 20px; } .sch-row-wp .sch-result-con .move-btn { clear: both; display: inline-block; height: 20px; margin: 0 2px 0 2px; padding: 8px 7px 0 7px; font-size: 12px; color: #fff !important; letter-spacing: -0.5px; line-height: 0; font-weight: normal; border-radius: 3px; border: 1px solid #325080; background-color: #395b92; transition: all 0.2s ease; } .sch-row-wp .sch-result-con .move-btn:hover { border: 1px solid #1d5fc9; background-color: #175ccb; } .sch-row-wp .sch-result-con dt { position: relative; padding: 20px 0 16px 0; } .sch-row-wp .sch-result-con dt .moreBtn { position: absolute; right: 0; } .sch-row-wp .sch-result-con dd { padding: 0 10px; margin-bottom: 16px; } .sch-row-wp .sch-result-con dd div { padding: 6px 0; } .sch-row-wp .sch-result-con .case-con { display: flex; flex-direction: column; } .sch-row-wp .sch-result-con .case-con .case { line-height: 2em; transition: all 0.2s ease; font-weight: bold; } .sch-row-wp .sch-result-con .case-con .case:hover { color: #ff5529; } .sch-row-wp .sch-result-con .sch-mTit { font-size: 16px; font-weight: bold; transform: all 0.2s ease; } .sch-row-wp .sch-result-con .sch-mTit:hover { color: #ff5529; } .sch-row-wp .sch-result-con .sch-txt { font-size: 14px; line-height: 1.2em; color: #555; } .sch-row-wp .list-checkbox { display: flex; flex-direction: row; gap: 18px; position: absolute; right: 0; bottom: 12px; } .sch-row-wp .list-checkbox .list-check-item { display: flex; flex-direction: row; align-items: center; cursor: pointer; position: relative; padding-left: 20px; } .sch-row-wp .list-checkbox .list-check-item input[type=radio] { width: 0; height: 0; opacity: 0; } .sch-row-wp .list-checkbox .list-check-item span { line-height: 30px; letter-spacing: -0.5px; } .sch-row-wp .list-checkbox .list-check-item .checkmark { position: absolute; content: ""; left: -2px; width: 18px; height: 18px; border-radius: 16px; border: 1px solid #a9c5dc; background-color: #f0f7fc; transition: all 0.2s ease; } .sch-row-wp .list-checkbox .list-check-item .checkmark::after { position: absolute; transition: all 0.2s ease; } .sch-row-wp .list-checkbox .list-check-item input:checked ~ .checkmark { background-color: #d2e0ec; border-color: #d2e0ec; } .sch-row-wp .list-checkbox .list-check-item input:checked ~ .checkmark::after { position: absolute; content: ""; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 16px; background-color: #0075FF; } .sch-row-wp .sch-right-box { width: 220px; min-height: 400px; height: -moz-max-content; height: max-content; padding: 20px 18px 22px; display: flex; flex-direction: column; border: 1px solid #ddd; border-radius: 4px; } .sch-row-wp .sch-right-box .rt-title { font-size: 14px; font-weight: bold; margin-bottom: 14px; } .sch-row-wp .sch-right-box .sch-pop-word { border-bottom: 1px solid #eee; padding-bottom: 14px; margin-bottom: 18px; } .sch-row-wp .sch-right-box .sch-pop-word li { display: flex; flex-direction: row; align-items: center; position: relative; margin-bottom: 4px; } .sch-row-wp .sch-right-box .sch-pop-word li .num-icon { width: 16px; height: 16px; -o-object-fit: cover; object-fit: cover; margin-right: 4px; } .sch-row-wp .sch-right-box .sch-pop-word li .pop-txt { font-size: 12px; transition: all 0.2s ease; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; } .sch-row-wp .sch-right-box .sch-pop-word li .pop-txt:hover { color: #ff5529; text-decoration: underline !important; } .sch-row-wp .sch-right-box .sch-pop-word li .sta-icon { position: absolute; right: 0; color: #333; font-size: 10px; } .sch-row-wp .sch-right-box .sch-pop-word li .sta-icon.up { padding: 0 0 0 10px; background: url("../images/sch_rt_ranking_up.gif") no-repeat 0 0px; } .sch-row-wp .sch-right-box .sch-pop-word li .sta-icon.down { padding: 0 0 0 10px; background: url("../images/sch_rt_ranking_down.gif") no-repeat 0 0px; } .sch-row-wp .sch-right-box .sch-pop-word li .sta-icon.new { width: 21px; background: url("../images/sch_rt_ranking_new.gif") no-repeat 0 0; } .sch-row-wp .sch-right-box .sch-top-issue { margin-bottom: 18px; } .sch-row-wp .sch-right-box .sch-top-issue .issue-item { display: flex; flex-direction: row; align-items: center; margin-bottom: 3px; } .sch-row-wp .sch-right-box .sch-top-issue .issue-item .is-tag { display: flex; align-items: center; justify-content: center; width: 52px; margin-right: 4px; height: 16px; font-size: 10px; color: #346db5; letter-spacing: -1px; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #5e8fcc; border-radius: 2px; background: #fff; overflow: hidden; } .sch-row-wp .sch-right-box .sch-top-issue .issue-item .is-txt { padding: 1px 0; max-width: 124px; font-size: 12px; letter-spacing: -0.5px; line-height: 1.4em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: all 0.2s ease; } .sch-row-wp .sch-right-box .sch-top-issue .issue-item .is-txt:hover { color: #ff5529; text-decoration: underline; } .sch-row-wp .sch-right-box .sch-silmu-haesul { border-bottom: 1px solid #eee; padding-bottom: 14px; margin-bottom: 18px; } .sch-row-wp .sch-right-box .sch-silmu-haesul .silmu-item { display: flex; flex-direction: row; align-items: center; margin-bottom: 3px; } .sch-row-wp .sch-right-box .sch-silmu-haesul .si-tag { display: flex; align-items: center; justify-content: center; width: 38px; margin-right: 4px; height: 16px; font-size: 10px; color: #346db5; letter-spacing: -1px; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #5e8fcc; border-radius: 2px; background: #fff; overflow: hidden; } .sch-row-wp .sch-right-box .sch-silmu-haesul .si-txt { padding: 1px 0; max-width: 140px; font-size: 12px; letter-spacing: -0.5px; line-height: 1.4em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: all 0.2s ease; } .sch-row-wp .sch-right-box .sch-silmu-haesul .si-txt:hover { color: #ff5529; text-decoration: underline; } .sch-row-wp .sch-right-box .sch-txt-area { border-bottom: 1px solid #eee; padding-bottom: 14px; margin-bottom: 18px; display: flex; flex-direction: column; } .sch-row-wp .sch-right-box .sch-txt-area:last-child { border: 0; padding-bottom: 0; margin-bottom: 0; } .sch-row-wp .sch-right-box .rt-move-txt { font-size: 13px; transition: all 0.2s ease; padding: 2px 0; margin-bottom: 2px; } .sch-row-wp .sch-right-box .rt-move-txt:hover { color: #ff5529; text-decoration: underline; } .swiper.latestPost { height: 480px; margin-bottom: 60px; } .swiper.latestPost .swiper-slide { width: 388px; height: 470px; position: relative; } .prv-list .latestPost .list-cards { gap: 0; overflow: visible; } .swiper-btns-area { position: absolute; right: 0px; top: 20px; display: flex; width: 100px; gap: 6px; } .swiper-btns-area .swiper-button-prev, .swiper-btns-area .swiper-button-next { left: auto; width: 42px; height: 40px; border-radius: 5px; border: 1px solid #333; transition: 0.3s ease; opacity: 0.5; cursor: pointer; } .swiper-btns-area .swiper-button-prev:hover, .swiper-btns-area .swiper-button-next:hover { opacity: 1; } .swiper-btns-area .swiper-button-prev::after, .swiper-btns-area .swiper-button-next::after { font-size: 12px; font-weight: bold; color: #333; } .swiper-btns-area .swiper-button-prev::after { content: "◀"; font-size: 12px; font-weight: bold; color: #333; } .swiper-btns-area .swiper-button-next::after { content: "▶"; font-size: 12px; font-weight: bold; color: #333; } .event-container { display: flex; flex-direction: column; border-top: 1px solid #777; border-bottom: 1px solid #ccc; padding: 28px 4px; margin-top: 20px; margin-bottom: 40px; } .event-container .event-item { width: 100%; } .event-container .event-item a { width: 100%; display: flex; flex-direction: row; border-radius: 10px; padding: 6px; border: 1px solid #e3e3e3; margin-bottom: 18px; } .event-container .event-item a:hover { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1); } .event-container .event-item a:hover .thumb img { scale: 1.01; } .event-container .event-item a:hover .event-content .tit { color: #ff5529; } .event-container .event-item a:hover .event-content .date { color: #000; } .event-container .event-item a:hover .event-content .txt-box .txt { color: #333; } .event-container .event-item .thumb { width: 490px; height: 184px; overflow: hidden; border-radius: 8px; margin-right: 20px; } .event-container .event-item .thumb img { -o-object-fit: cover; object-fit: cover; width: 100%; transition: all 0.2s ease; } .event-container .event-item .event-content { display: flex; flex-direction: column; padding: 20px 10px 10px 10px; } .event-container .event-item .event-content .tit { width: 646px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: bold; line-height: 140%; margin-bottom: 8px; transition: all 0.2s ease; } .event-container .event-item .event-content .date { color: #777; transition: all 0.2s ease; } .event-container .event-item .event-content .txt-box { width: 646px; height: 86px; margin-top: 12px; padding: 14px 15px; border-radius: 4px; background: #f7f7f7; } .event-container .event-item .event-content .txt-box .txt { line-height: 1.6em; font-size: 13px; color: #777; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; transition: all 0.2s ease; margin: 0; } .ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners { border-radius: 0; border-top-left-radius: 4px !important; border-top-right-radius: 4px !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable, .ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners { border-radius: 0; border-bottom-left-radius: 4px !important; border-bottom-right-radius: 4px !important; border-top-left-radius: 0; border-top-right-radius: 0; } .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused { border: 1px solid #ccced1 !important; } .keyword-interest-alarm-pop { height: 22px !important; margin-left: 10px !important; padding: 0 10px !important; font-size: 11px !important; letter-spacing: -0.5px !important; line-height: 18px !important; border-radius: 4px !important; font-family: '맑은 고딕', 'Malgun Gothic', 'MalgunGothicRegular', sans-serif; } .comm-sky-banner { position: fixed; left: 0.5%; bottom: 0.5%; margin: 0 0 10px 10px; animation: SkyBanner_ani 0.8s infinite; z-index: 10000000000; } @keyframes SkyBanner_ani { 50% {margin-bottom: 15px;} } .comm-sky-banner .close { position: absolute; top: 0px; right: 0px; width: 24px; height: 24px; font-size: 18px; color: #fff; line-height: 18px; text-align: center; border-radius: 100%; background: #333; cursor: pointer; } .comm-sky-banner .todayclose { position: absolute; top: -5px; left: 0px; font-size: 11px; color: #333; letter-spacing: -0.5px; line-height: 100%; font-weight: 500; cursor: pointer; }