@charset "utf-8"; /* ** 사이트 ì „ë°˜ì— 영향을 주는 css */ /* 속성 ì„ ì–¸ 순서 순서 의미 대표되는 속성 1 ë ˆì´ì•„ì›ƒ display, visibility, overflow, float, clear, position, top, right, bottom, left, zindex, 2 BOX width, height, margin, padding, border 3 ë°°ê²½ background 4 폰트 font,color, letter-spacing, text-align, text-decoration, text-indent, verticalalign, white-space 5 기타 위에 언급되지 않은 나머지 속성들로 폰트의 ê´€ë ¨ 속성 이후에 ì„ ì–¸í•˜ë©°, 기타 속성 내의 ì„ ì–¸ 순서는 무관함 * [속성 ì„ ì–¸ 순서 기준: 1: ë ˆì´ì•„ì›ƒ, 2: BOX, 3: ë°°ê²½, 4: 폰트, 5: 기타] 밴더속성과 핵속성은 해당 속성 뒤에 ì„ ì–¸í•œë‹¤. .btn{border:0.1rem solid #f60;*border:0.2rem solid #f60;border-radius:0.2rem;-webkit-boderradius:0.2rem} */ /* [속성 ì„ ì–¸ 순서 기준: 1: ë ˆì´ì•„ì›ƒ, 2: BOX, 3: ë°°ê²½, 4: 폰트, 5: 기타]*/ /*=============================================== /* 기본 ì„¤ì • **---------------------------------------------*/ html,body {width: 100%;/*height:auto;*/height:100%;margin:0;padding:0;} html {font-size:10px;overflow-y:scroll;} /* 스크롤바를 넣어줌으로 ìƒˆë¡œê³ ì¹¨ì‹œ 스크롤바가 없다가 생기는 넓이 차이로 생기는 꿈뻑거림을 막는다*/ body {background:#fff;font-size:1rem;font-family:AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 ê³ ë”•',dotum,'돋움',sans-serif;-webkit-font-smoothing: antialiased;} html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0} h1, h2, h3, h4, h5, h6 {font-size:1rem} article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, progress{display:block} ul, dl,dt,dd {margin:0;padding:0;list-style:none} legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-999rem;overflow:hidden} label, input, button, select, img {vertical-align:middle;font-size:1.4rem} input, button {margin:0;padding:0;font-size:1.4rem} input[type="submit"]{cursor:pointer} input[type='radio']{cursor:pointer;} input:disabled,select:disabled{background:#f7f7f7;opacity:0.8;cursor:default;} button {cursor:pointer;} hr{ display : none; } /*
*/ hr.line{display:block;margin:1rem 0rem;padding:0rem;height:0.1rem;width:100%;background: #ccc;border:none;} /* *, :after, :before { -webkit-box-sizing:border-box; box-sizing:border-box; border: 0 solid; margin: 0; padding: 0; }*/ /* ì „ì²´ 기본 ì ìš© */ *, *::after, *::before { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } .left {float:left;margin:0;padding:0;} .right{float:right;margin:0;padding:0;} .clear{clear:both;} .blind {display: none;overflow: hidden;position: absolute;top:0;left:0;width:0;height:0;border:0;background:0 0;font-size:0;line-height:0;} .hidden_div{display: block;overflow: hidden;position: absolute;top:0;left:0;width:0;height:0;border:0;background:0 0;font-size:0;line-height:0;} /*=============================================== /* placeholder **---------------------------------------------*/ input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {color:transparent;} /* WebKit browsers */ input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {color:transparent;} /* Mozilla Firefox 4 to 18 */ input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {color:transparent;} /* Mozilla Firefox 19+ */ input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {color:transparent;} /* Internet Explorer 10+ */ /*=============================================== /* 인풋 보더 **---------------------------------------------*/ textarea, input, button, select, input[type]{border-color:#adadad;} textarea:focus, input:focus, button:focus, select:focus, input[type]:focus{border-color: rgba(229, 103, 23, 0.8);box-shadow: 0 0.1rem 0.1rem rgba(229, 103, 23, 0.075) inset, 0 0 0.3rem rgba(229, 103, 23, 0.6);outline: 0 none;} /*=============================================== /* 인풋 체크박스 커스텀 ( ê¸°ë³¸ì ì¸ 기능에 영향이 생기면 ì‚­ì œí• ê²ƒ ) **---------------------------------------------*/ input[type="checkbox"] {-webkit-appearance: none;-moz-appearance: none;appearance: none; height:17px;outline: 0;width:17px; background:#fff;border:1px solid #adadad;border-radius:2px;cursor: pointer;} input[type="checkbox"]::after { position: relative; top: 20%; left: 35%; display: none; content: ''; height: 50%; width: 25%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } input[type="checkbox"]:disabled {border:1px solid #c3c3c3;background:#f2f2f2;opacity: 0.8;cursor:default;} input[type="checkbox"]:checked::after {display: block;} input[type="checkbox"]:checked:disabled {border:1px solid #c3c3c3;background:#cdcdcd;opacity: 0.8;cursor:default;} input[type="checkbox"]:checked{background:#3c8aff;} /*=============================================== /* 필수 ìž…ë ¥ê°’ 인풋 태그란에 표시하기 : 좌측 라인 보더 ** ë°°ê²½ 보더 변경시 페이드 인 아웃을 만들기 위해서 트랜지션 추가 **---------------------------------------------*/ input:required, textarea:required, select:required{ box-shadow: inset 1px 0px 1px 0px #ffcdb5, inset 2px 0px 0px 0px #ff9b6a !important; transition-property:all; transition-duration:0.5s; transition-timing-function: ease; transition-delay: 0s; } input:required:focus,textarea:required:focus{ box-shadow:none !important;} /* 필수 ìž…ë ¥ì‚¬í•­ 포커스시 ë°°ê²½ 보더 변경시 페이드 인 아웃을 만들기 위해서 트랜지션 추가 */ .required_bg{ background: #c1e0ff !important; border:1px solid #0069d2 !important; transition-property:all; transition-duration:1s; transition-timing-function: ease; transition-delay: 0s; } /*=============================================== /* 체크박스 라디오 버튼일 ë•Œ 스타일 **---------------------------------------------*/ /* [type="radio"] { vertical-align: middle; appearance: none; border: max(2px, 0.1em) solid #ccc; border-radius: 50%; width: 1.25em; height: 1.25em; transition: border 0.1s ease-in-out; } [type="radio"]:checked { border: 0.5em solid tomato; } [type="radio"]:focus-visible { outline-offset: max(2px, 0.1em); outline: max(2px, 0.1em) dotted tomato; } [type="radio"]:hover { box-shadow: 0 0 0 max(4px, 0.2em) #ccc; cursor: pointer; } [type="radio"]:disabled { background-color: #ccc; box-shadow: none; opacity: 0.7; cursor: not-allowed; } */ /*=============================================== /* 드래그 ì„ íƒì‹œ 배경색 /* íŠ¹ì • ì…€ë ‰í„°ë§Œ ì„ íƒë˜ê²Œ selector::selection { } **---------------------------------------------*/ /* ::selection { background: #888; color: #fff; }*/ /*=============================================== /* 드래그 ì„ íƒ 안되게 클래스로 ì§€ì •ì‹œ **---------------------------------------------*/ .select_none{ -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } /*=============================================== /* 드래그 ì„ íƒ 안되게 **---------------------------------------------*/ label, select, img{ -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } /*=============================================== /* 보이지 않게 처리 **---------------------------------------------*/ .sound_only { position: absolute; margin: 0 !important; padding: 0 !important; font-size: 0; text-indent: -10000rem; line-height: 0; overflow: hidden; } /*================================================================================================= * 에디터와 관리자용 에코문등에 사용 *------------------------------------------------------------------------------------------------*/ /* echo2, print_r2 대응 css */ .div_etc_css1{word-break:break-all;white-space: break-spaces;width:100%;min-height:5rem;font-size:1.7rem;} .div_etc_css2{padding:1rem;word-break:break-all;white-space: break-spaces; width:calc(100% - 2rem);min-height:5rem;font-size:1.7rem;background:#fff;text-align:left;} .admin_deberg_btn{ margin:10px 0px 30px 10px;padding:5px; display:block; border: solid 1px #c3c3c3; background: #fdfdfd; background-image: linear-gradient(to bottom, #fdfdfd 5%, #ebebeb 90%);} .admin_deberg_div{display:none;background:#d0e1fd;} .admin_deberg_div .div_etc_css2{background:#d0e1fd;} /*에디트 버튼 보이기 감추기 버튼*/ .view_edit_bt{height:1.5rem;min-width:4rem;margin:0.3rem 0 0 0;padding:0 0.5rem;display: inline-block;user-select: none;border: solid 0.1rem #ffd490;background-image: linear-gradient(to bottom, #f9ff86 3%, #ff9800 130%) !important;box-shadow: 0 0.3rem 1rem -0.5rem #2f2f2f;font-size:0.9rem;line-height:1rem;letter-spacing:0.15rem;color:#8c5050;font-family:AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 ê³ ë”•',dotum,'돋움',sans-serif;text-align:center} /* 모듈 에디트 영역 */ .editTable{display:table;text-align:center;width:100%;height:100%;font-size:1.3rem} .editTablecell{display:table-cell;vertical-align:middle;color:#3950f9;} .editTablecell p{margin:0; padding:0;line-height:150%;} .editTable2{display:table;text-align:center;width:100%;height:50rem;font-size:1.3rem} /* 모듈에디터 버튼 */ .module_make{margin:0 0 0 1rem;cursor:pointer;} .module_edit{margin:0 0 0 1rem;cursor:pointer;} .module_edit img{display:none;vertical-align:middle;margin-top: -0.1rem;} /* 메인 팝업 판넬 */ .mainPopup{display:none;} .blurPannel{position:fixed;top:0;left:0;z-index:10000;width:100%;height:100%;background:#000;opacity:0.3;} .popup{display:none;position:fixed;margin:0;top:50%;left:50%;transform:translate(-50%,-60%);z-index:10001;} /* 에디터 창을 ì—´ë•Œ 바탕을 블러 처리 */ .blurFilter10{/*position:absolute;*/-webkit-filter: blur(10);-moz-filter:blur(10);-o-filter:blur(10);-ms-filter:blur(10);filter:blur(10);transition:filter 0.3s;} .blurFilter5 {/*position:absolute;*/-webkit-filter: blur(0.5rem);-moz-filter: blur(0.5rem);-o-filter:blur(0.5rem);-ms-filter: blur(0.5rem);filter:blur(0.5rem);transition:filter 0.3s;} .blurFilter3 {/*position:absolute;*/-webkit-filter: blur(0.3rem);-moz-filter: blur(0.3rem);-o-filter:blur(0.3rem);-ms-filter: blur(0.3rem);filter:blur(0.3rem);transition:filter 0.3s;} .blurFilter0 {/*position:absolute;*/-webkit-filter: blur(0);-moz-filter: blur(0);-o-filter:blur(0);-ms-filter: blur(0);filter:blur(0);transition:filter 0.3s;} /*=============================================== /* 로딩중 표시하기 ( 로딩중 이미지, 로딩 프로그래스 ë°” ) **---------------------------------------------*/ /* 로딩중 이미지 */ #page_loading{position: fixed;top: 0px;left: 0px;z-index:10000;width: 100%;height: 100%;} #page_loading.off{animation-name: main_loading_bg;animation-duration:0.3s; animation-timing-function: ease-in-out;animation-delay:0s; animation-iteration-count:1;animation-direction: alternate; animation-fill-mode:forwards;animation-play-state:running;} /*에니메이션에서 display:none이 안됨*/ @keyframes main_loading_bg { 0% {opacity: 1;visibility:visible; } 50% {opacity: 0.5; } 100% {opacity: 0; visibility: hidden;} } #loading_backpannel{position:absolute;top: 0px;left: 0px;z-index: 1;} #loading_backpannel{width: 100%;height: 100%;opacity:1;background:#fff;} .main_loading {position:absolute;top:calc(40% - 50px);left:calc(50% - 50px);z-index:2;} .main_loading {margin:0px;padding:30px 0;width: 100px;height:40px;text-align:center;} .main_loading span {display:inline-block;width: 10px;height: 10px;background-color: gray;border-radius: 50%;} .main_loading span {animation: main_loading 1s linear infinite;} .main_loading span:nth-child(1) {background-color: #202020;animation-delay: 0s;} .main_loading span:nth-child(2) {background-color: #202020;animation-delay: 0.2s;margin: 0px 10px} .main_loading span:nth-child(3) {background-color: #202020;animation-delay: 0.4s;} .main_loading p{margin:10px 0 0 0;font-weight:bold;font-size:12px;color:#555;} @keyframes main_loading { 0%, 100% {opacity: 0;transform: scale(0.5);} 50% {opacity: 1;transform: scale(1.2);}} /*로딩 프로그래스 ë°”*/ #loading_progress_bar{position:fixed;top:0px;left:0px;z-index:1002;margin:0px;padding:0px;width:100%;height:2px;opacity:1;} #loading_progress_bar.off{ animation-name: main_loading_bar;animation-duration:0.3s; animation-timing-function: ease-in-out;animation-delay:0s; animation-iteration-count:1;animation-direction: alternate; animation-fill-mode:forwards;animation-play-state:running;} @keyframes main_loading_bar{ 0% {opacity: 1;visibility:visible; } 50% {opacity: 0.5; } 100% {opacity: 0; visibility: hidden;} } #loading_progress{width:100%;height:100%;border:0px solid #ccc;background:#fff;} progress { -webkit-appearance: none; } ::-webkit-progress-bar { background-color:#f2f2f2; } ::-webkit-progress-value { background-color:#e87400; box-shadow: 0 0 3px #e87400, 0 0 3px #e87400;} #code_percent_div{position:absolute;top:10px;left:10px;z-index:1;margin:0px; padding:5px;width:38px;height:15px;background:#fff;color:#333; text-align:center;font-size:10px;border:1px solid #ccc;border-radius:5px;} #live_percent_arrow{position: relative;top:3px;left:29px;z-index:2;content:" "; display: inline-block;width:10px;height:10px;border-width: 1px 0 0 1px;border-style: solid; border-color: #ccc;background: #fff;transform: rotate(45deg);border-radius:2px;} /*----------------------------------------------- /* 로딩중 표시하기 ( 이미지, 프로그래스 ë°” ) **===============================================*/ /*=============================================== /* 카피 라이터 **---------------------------------------------*/ .Copyright{margin:0;padding: 1rem 1rem 1rem 1rem; background: url("/common/images/copyBg.gif");background-repeat: no-repeat; background-position: 100% 60%; font-family:AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 ê³ ë”•',dotum,'돋움',sans-serif; color:#333;font-size:0.8rem;text-align: right;vertical-align:middle; } .maker_url {font-family:AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 ê³ ë”•',dotum,'돋움',sans-serif;color:#333;font-size:1.0rem} a.maker_url:link { color: #333333; } a.maker_url:visited { color: #333333;} a.maker_url:active { text-decoration: none;} a.maker_url:hover { color: #F77F08 ; text-decoration: none;} /*================================================================================================= * 게시판 페이징 : 시작 *------------------------------------------------------------------------------------------------*/ /* 기본 스킨 : 바둑판과 같은 1줄 띄 모양 */ .pagination{ font-size:1.4rem;font-family:sans-serif,"Apple SD Gothic Neo", "Malgun Gothic", "맑은 ê³ ë”•";text-align:center;user-select: none;height:100%;} .pagination .paging{min-width:3.1rem;min-height:2.3rem;height:2.8rem;padding:0;display:inline-block; border:0.1rem solid #ccc;border-right:none;/*background: #fff;*/} .pagination .paging:last-child{min-width:3rem;border:0.1rem solid #ccc;} .pagination a{display:inline-block;width:100%;height:100%; padding:0rem;text-decoration:none;line-height:2.8rem;} .pagination .first, .pagination .pre, .pagination .nxt, .pagination .end{/*display:inline-block;*/display:inline-table;overflow:hidden;position: relative;/*top:1rem;*/z-index:1;height:2.8rem;text-indent:-10rem;line-height:2.8rem} .pagination .now {position: relative;z-index: 1;min-width:2.0rem !important;padding:0.2rem 0.8rem;font-weight: normal;text-shadow:0.1rem 0.1rem 0.3rem #9e9e9e;background:#e7e7e7;color: #ff0000;height:2.4rem;line-height:2.4rem;display: inline-block;} .pagination .first::after, .pagination .pre::after, .pagination .nxt::after, .pagination .end::after{position:absolute;top:0;left:0; z-index:2;height: 100%;width: 100%;min-height:2.3rem; content:" ";} .pagination .paging.first.not-allowed,.pagination .paging.pre.not-allowed,.pagination .paging.nxt.not-allowed,.pagination .paging.end.not-allowed { cursor:not-allowed;} .pagination.skin3 .paging.first.not-allowed, .pagination.skin3 .paging.pre.not-allowed, .pagination.skin3 .paging.nxt.not-allowed, .pagination.skin3 .paging.end.not-allowed { cursor: not-allowed; background-image: linear-gradient(to bottom, #f2f2f2 3%, #c3c3c3 130%) !important; box-shadow: 0.1rem 0.3rem 1rem -0.5rem #929292; } .pagination .first::after{background:url('/common/images/pagenation/pg_first_off.gif') center no-repeat;} .pagination .pre::after{background:url('/common/images/pagenation/pre_pg_off.gif') center no-repeat;} .pagination .nxt::after{background:url('/common/images/pagenation/next_pg_off.gif') center no-repeat;} .pagination .end::after{background:url('/common/images/pagenation/pg_end_off.gif') center no-repeat;} .pagination .first a, .pagination .pre a, .pagination .now a, .pagination .nxt a, .pagination .end a{position: relative;top:0;left:5rem;z-index:3;padding:0;} .pagination .first a:hover{cursor:pointer;background:#eee url('/common/images/pagenation/pg_first_on.gif') center no-repeat;} .pagination .pre a:hover{cursor:pointer;background:#eee url('/common/images/pagenation/pre_pg_on.gif') center no-repeat;} .pagination .nxt a:hover{cursor:pointer;background:#eee url('/common/images/pagenation/next_pg_on.gif') center no-repeat;} .pagination .end a:hover{cursor:pointer;background:#eee url('/common/images/pagenation/pg_end_on.gif') center no-repeat;} .pagination a:hover{cursor:pointer;background:#eee } /* 스킨1 : 좌우측 버튼만 버튼형 나머지는 일반 숫자형 형태*/ .skin1 .paging{margin:0rem 0.3rem;border:none;min-width:2.5rem;min-height:2.5rem;height:2.5rem;font-size:1.5rem;} .skin1 .paging:last-child{min-width:2.3rem;border:none;} .skin1 .first, .skin1 .pre, .skin1 .nxt, .skin1 .end{line-height:2.3rem;height:2.3rem;width:2.3rem;min-width: 2.3rem;min-height:1.3rem;border: solid 0.1rem #a99afc !important; position: relative; top:0rem;} .skin1 a{padding:0rem 0.2rem;line-height: 2.5rem;} .skin1 .now{min-width:2.1rem !important;background:none;padding:0rem 0.201rem;line-height:2.5rem;/*background: #fff;*/} .skin1 .first a, .skin1 .pre a, .skin1 .nxt a, .skin1 .end a{line-height:2.3rem;} .skin1 .first::after, .skin1 .pre::after, .skin1 .nxt::after, .skin1 .end::after{position: absolute;top:0rem;left:0rem;z-index:2;height:100%;min-height:2.3rem;width:100%;line-height:2.3rem;} /* 스킨2 : 메뉴사이 바로 구분된 */ .skin2 .paging{border: none;min-width:3.5rem !important;min-height:2.5rem;background:none;} .skin2 .paging:last-child{min-width:2.3rem;border: none;/*overflow:hidden;*/} .skin2 .now{background:none;min-width:1.9rem !important;} .skin2 .now::before{width:0.2rem; height:100%;content: "|";text-indent:-0.1rem;position: absolute;right:0rem;line-height:3rem;font-size:1rem;color:#333;text-shadow:none;} .skin2 a{position:relative;} .skin2 .first::after {content: "|";text-indent:3.3rem; line-height: 3rem;font-size: 1rem;color: #333;background: url(/common/images/pagenation/pg_first_off.gif) center no-repeat;} .skin2 .pre::after{content:"|";text-indent:3.3rem;line-height: 3rem;font-size: 1rem;color: #333;background: url('/common/images/pagenation/pre_pg_off.gif') center no-repeat;} .skin2 .paging a::before{width:0.2rem; height:100%;content: "|";text-indent:0rem;position: absolute;right:-0.1rem;line-height:3rem;font-size:1rem;color:#333;} .skin2 .paging:last-child a::before{ width:0.2rem;height:100%;content: " ";text-indent: -0.1rem;position: absolute;right:2rem;line-height:2.3rem;font-size:1rem;color: #333;text-shadow: none;display:none;} .skin2 .now::after {position: absolute;z-index:3;width: calc(100% - 0.2rem);text-align:center;height:1.5rem;font-size:1rem;content: "∨";color: #ff0000;text-shadow:none;top:-0.8rem;left:0.2rem;line-height:1.5rem;} /* 스킨3 : 라운드 버튼 형태*/ .pagination.skin3{min-height:5rem;line-height:5rem;} .skin3 .paging{font-size:1.2rem;margin:0 0.2rem;border:0.1rem solid #ccc;border-radius:50%/*50rem*/;min-width:3.0rem;min-height:2.8rem;height:3.0rem;line-height: 2.7rem;text-indent:0rem} .skin3 .paging:last-child{min-width:2.7rem} .skin3 span{display: inline-block;border: solid 0.1rem #c3c3c3;background-image: linear-gradient(to bottom, #f2f2f2 3%, #c3c3c3 130%) !important;box-shadow: 0.1rem 0.3rem 1rem -0.5rem #929292;} .skin3 .now {min-width:3.0rem !important;min-height: 3.0rem;padding:0rem 0.4rem;display: inline-block;border: solid 0.1rem #ffd490;background-image: linear-gradient(to bottom, #f9ff86 3%, #ff9800 130%) !important;box-shadow: 0rem 0.3rem 1rem -0.5rem #2f2f2f;line-height:2.7rem;} .skin3 a{padding:0rem;width:100% ; height:100%;line-height:2.8rem;} .skin3 .first, .skin3 .pre,.skin3 .nxt,.skin3 .end{border: solid 0.1rem #a99afc !important;background-image: linear-gradient(to bottom, #f1f1f1 3%, #8f8ff7 130%) !important;box-shadow: 0rem 0.3rem 1rem -0.5rem #2f2f2f; text-indent: -10rem;} .skin3 a:hover {display: inline-block;border-radius:50%;background-image: linear-gradient(to bottom, #f9ff86 3%, #ff9800 130%);box-shadow: 0rem 0.3rem 1rem -0.5rem #2f2f2f;} .skin3 .first a:hover{background-image:url('/common/images/pagenation/pg_first_on.gif'), linear-gradient(to bottom, #f9ff86 3%, #ff9800 130%);} .skin3 .pre a:hover{background-image:url('/common/images/pagenation/pre_pg_on.gif'), linear-gradient(to bottom, #f9ff86 3%, #ff9800 130%);} .skin3 .nxt a:hover{background-image:url('/common/images/pagenation/next_pg_on.gif'), linear-gradient(to bottom, #f9ff86 3%, #ff9800 130%);} .skin3 .end a:hover{background-image:url('/common/images/pagenation/pg_end_on.gif'), linear-gradient(to bottom, #f9ff86 3%, #ff9800 130%);} /* 스킨4 : 라운드 버튼 형태 디펄트 형태와 같음 추후에 만들어 넣을 것*/ .skin4 .first::after{background:none;content:"처음";text-indent:0;} .skin4 .pre::after{background:none;content:"ì´ì „";text-indent:0;} .skin4 .nxt::after{background:none;content:"다음";text-indent:0;} .skin4 .end::after{background:none;content:"맨끝";text-indent:0;} .skin4 .first a, .skin4 .pre a, .skin4 .nxt a, .skin4 .end a{position: relative;top: 0;left: 5rem;z-index: 3;padding:0;} .skin4 .first a:hover::after{position:relative;top:-2.2rem;z-index:2;display:flex;width:3.1rem;height:3.1rem;background:#ffcc00 !important;content:"처음";text-indent:0;color:#ff3300} .skin4 .pre a:hover::after{position:relative;top:-2.2rem;z-index:2;display:flex;z-index:2;width:3.1rem;height:3.1rem;background:#ffcc00 !important;content:"ì´ì „";text-indent:0;color:#ff3300} .skin4 .nxt a:hover::after{position:relative;top:-2.2rem;z-index:2;display:flex;z-index:2;width:3.1rem;height:3.1rem;background:#ffcc00 !important;content:"다음";text-indent:0;color:#ff3300} .skin4 .end a:hover::after{position:relative;top:-2.2rem;z-index:2;display:flex;z-index:2;width:3.1rem;height:3.1rem;background:#ffcc00 !important;content:"맨끝";text-indent:0;color:#ff3300} /* 스킨4 : 라운드 버튼 형태 디펄트 형태와 같음 추후에 만들어 넣을 것*/ /* 링크 글자색 */ .pagination a:link{color: #7c869e;} .pagination a:active{color:#0066ff !important;} .pagination a:visited{color:#7c869e;} .pagination a:hover{color:#ff0000;user-select: none;} /* ** 게시판 페이징 : 끝 */ /*================================================================================================= * 이름 ë ˆì´ì–´ : 2022.02.13 ( 게시판, 메인 곳곳의 이름을 클릭하면 생성되는 이름 ë ˆì´ì–´ ) *------------------------------------------------------------------------------------------------*/ .name_layer {position:absolute;top:-15rem;left:-15rem;z-index:100; display:none;} .name_layer UL {width:13rem;height: auto;border:0.1rem solid #ccc;background: #fff;box-shadow:0.1rem 0.2rem 1.5rem -0.5rem #656565;line-height:2.5rem;border-radius:0.5rem;overflow:hidden;} /*좌측 끝에 화살표*/ .nmLyrArwTopL{position: relative;top:0.8rem;left: 2.0rem;display:inline-block;width:1rem;height:1rem;border-width: 0.1rem 0 0 0.1rem;border-style: solid;border-color: #ccc;background: #fff;transform: rotate(45deg);border-radius:0.2rem} .nmLyrArwBtmL{position: relative;top:-0.6rem;left:2.0rem;display:inline-block;width:1rem;height:1rem;border-width:0 0.1rem 0.1rem 0;border-style: solid;border-color: #ccc;background: #fff;transform: rotate(45deg);border-radius:0.2rem;box-shadow: 0.3rem 0.3rem 0.7rem -0.2rem #656565;} /*우측 끝에 화살표*/ .nmLyrArwTopR{position: relative;top:0.6rem;left: 10.5rem;display: block;width:1rem;height:1rem;border-width: 0.1rem 0 0 0.1rem;border-style: solid;border-color: #ccc;background: #fff;transform: rotate(45deg);border-radius:0.2rem;} .nmLyrArwBtmR{position: relative;top:-0.6rem;left:10.5rem;display: block;width:1rem;height:1rem;border-width:0 0.1rem 0.1rem 0;border-style: solid;border-color: #ccc;background: #fff;transform: rotate(45deg);border-radius:0.2rem;box-shadow: 0.3rem 0.3rem 0.7rem -0.2rem #656565;} .name_layer UL > li {position: relative;top:0rem;left:0rem;width: 100%;height:2.5rem;border-bottom:0.1rem solid #ccc;font-size:1.2rem;font-weight: bold;font-family:AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 ê³ ë”•',dotum,'돋움',sans-serif;} .name_layer UL > li:last-child{border-bottom:0rem;} .name_layer UL > li a {position: relative;top: 0rem;left: 0rem;z-index: 1;display: inline-block;width: 100%;height: 100%;font-weight: bold;text-align: left;text-indent:3rem;font-family:AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 ê³ ë”•',dotum,'돋움',sans-serif;text-decoration: none;} .name_layer UL > li a.nL_icon1:hover{background: #e7e7e7 url('/common/images/name_layer/n_information.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon1{background:#fff url('/common/images/name_layer/n_information.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon2:hover{background: #e7e7e7 url('/common/images/name_layer/n_memo.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon2{background:#fff url('/common/images/name_layer/n_memo.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon3:hover{background: #e7e7e7 url('/common/images/name_layer/n_homepage.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon3{background:#fff url('/common/images/name_layer/n_homepage.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon4:hover{background: #e7e7e7 url('/common/images/name_layer/n_hompy.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon4{background:#fff url('/common/images/name_layer/n_hompy.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon5:hover{background: #e7e7e7 url('/common/images/name_layer/n_search_id.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon5{background:#fff url('/common/images/name_layer/n_search_id.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon6:hover{background: #e7e7e7 url('/common/images/name_layer/n_search_name.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon6{background:#fff url('/common/images/name_layer/n_search_name.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon7:hover{background: #e7e7e7 url('/common/images/name_layer/n_friend.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon7{background:#fff url('/common/images/name_layer/n_friend.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon8:hover{background: #e7e7e7 url('/common/images/name_layer/n_friend.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon8{background:#fff url('/common/images/name_layer/n_friend.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon9:hover{background: #e7e7e7 url('/common/images/name_layer/n_modify.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a.nL_icon9{background:#fff url('/common/images/name_layer/n_modify.gif') no-repeat 1rem 0.6rem;} .name_layer UL > li a:link {color: #555;} .name_layer UL > li a:hover {color: #e19300;} .name_info{cursor:pointer} .image_name{width:auto;min-height:1.6rem;vertical-align:baseline;} .name_icon{min-width:1.6rem;min-height:1.6rem;max-height:1.6rem;margin:0 0.3rem 0 0;vertical-align:text-top;} .level_img{min-width:1rem;height:auto;margin:0 0.3rem 0 0;vertical-align:baseline;} /*================================================================================================= * 툴팁 ë ˆì´ì–´ : 2022.12.19 ( 게시판 인풋에서 필수 ìž…ë ¥ì‚¬í•­ì¸ 경우 ìž…ë ¥ì´ 안되었다면 띄워주는 사용자 안내 툴팁 ) *------------------------------------------------------------------------------------------------*/ #tooltip_layer{display:none;position: absolute;top:-15rem;left:-15rem;z-index:100;margin: 0;padding:0rem;height:auto;width: auto;/*white-space: nowrap;*/} #tooltip_layer UL {margin:-5px 0 0 0;width:auto;height: auto;border:0.1rem solid #ccc;background: #fff;box-shadow:0.1rem 0.2rem 1.5rem -0.5rem #656565;line-height:2.5rem;border-radius:0.5rem;overflow:hidden;} #tooltip_layer UL > li {position: relative;top:0rem;left:0rem;margin:0;padding:0.5rem 1rem;width:calc(100% - 0px);min-height:2.5rem;border-bottom:0.1rem solid #ccc;font-size:1.3rem;line-height:2.3rem;font-weight: bold;font-family:AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 ê³ ë”•',dotum,'돋움',sans-serif;} /*좌측 상단 화살표*/ .tpLyrArwTopL{position: relative;top:0.2rem;left: 2.0rem;display:inline-block;width:1rem;height:1rem;border-width: 0.1rem 0 0 0.1rem;border-style: solid;border-color: #ccc;background: #fff;transform: rotate(45deg);border-radius:0.2rem} /*============================================================ ** 스위치 형태의 체크 박스 : 2022.02.13 **----------------------------------------------------------*/ /* 기존 사용 안함 .switch_btn{position:relative;top:5px;display:inline-block;margin:0;padding:0;width:4.3rem;height:1.8rem;border-radius:2.5rem;border:0.1rem solid #cfcfcf;overflow:hidden;font-size:1.3rem;font-weight:normal;letter-spacing:0.2rem;cursor:pointer;} .switch_btn:before,.switch_btn:after{position:absolute;top:0rem;display:inline-block;margin:0;padding:0 0rem;height:100%;width:100%;line-height:1.65rem;} .switch_btn:before{left:0rem;content:attr(data-on);background:#3fa2ff;color:#fff;text-align:left;text-indent:0.5rem;letter-spacing: 0.1rem;transition: all .3s ease;} .switch_btn:after{right:0rem;content:attr(data-off);background:#dbdbdb;color:#fff;text-align:center;text-indent:1.6rem;letter-spacing: 0.1rem;transition: all .3s ease;} .switch_btn_checkbox{display:none;} / * 체크동작 => ì²´í¬ì „ : Off * / .switch_btn_checkbox + label .switch_btn:before{opacity:1;} / * 체크동작 => 체크 후 : On * / .switch_btn_checkbox:checked + label .switch_btn:after{opacity:0;} / * 스위치 체크 ë³¼ * / .switch_btn .switch_boll{position:absolute;top:0.05rem;left:0.1rem;z-index:2;margin:0;padding:0;width:1.8rem;height:1.8rem;border-radius:50%;} .switch_btn_checkbox:checked + label span span{left:calc(100% - 1.7rem);} .switch_btn_checkbox + label span span{left:0%;transition: all .3s ease;} .switch_btn .switch_boll:before{content:"";position:absolute;top:calc(50% - 0.95rem);left:calc(50% - 1rem);z-index:3;margin:0;padding:0;width:1.8rem;height:1.8rem;border-radius:50%;background:#dbdbdb;box-shadow: 0 2px 5px 0 #999,inset 0 3px 3px 2px rgba(241, 241, 241, 0.6),inset 0 0 0 2px #f1f1f1;} */ /*=============================================== ** 스위치 버튼 : 시작 ** 2022.12.15 ** 예 : 보기 감추기 버튼 **------------------------------------------------------------------------------------*/ label.switch_bt{position:relative;top:0;display:inline-block;margin:0 5px 0 5px;padding:0;line-height:14px;text-indent:0px;} label.switch_bt .switch_zone{position:relative;display:inline-block;} label.switch_bt input[type='checkbox']{ -webkit-appearance: none;-moz-appearance: none;-o-appearance: none;appearance: none; position: relative;margin:0;padding:0;/*height:20px;*/height:18px;width:45px;border-radius:25px;border:none; font-size:10px;/*line-height:18px;*/line-height:15px;font-weight:bold;letter-spacing:2px;cursor:pointer; font-family:sans-serif;vertical-align: middle;} label.switch_bt input[type='checkbox']:focus{border:none;outline: 0 none;box-shadow:none;} /* 스위치 ë³¼ : */ label.switch_bt .switch_boll{ position:absolute;/*top:2px;*/top:1px;z-index:3;display:inline-block; margin:0;padding:0;width:16px;/*height:calc(100% - 4px);*/height:calc(100% - 2px);border:1px solid #ccc;border-radius:50%;background:#fff;cursor:pointer; box-shadow: 1px 0px 2px 0px #ababab, inset 0px 0px 0px 2px rgb(241 241 241 / 60%), inset 0px 0px 0px 3px #cbcbcb;} /* off */ label.switch_bt input[type='checkbox']:before {content:attr(data-off); position:absolute;top:0px;left:0px;z-index:1;display:inline-block;margin:0;padding:0px 5px 0px 0px; height:calc(100% - 0px);width:calc(100% - 0px);background:#dbdbdb;color:#fff; text-align:right;text-indent:15px;font-weight:bold;letter-spacing:0.1px; border-radius:10px;border:1px solid #b9b9b9;opacity:1;transition: all .3s ease;word-spacing:0;text-shadow:1px 1px 1px #787878;} /* on */ label.switch_bt input[type='checkbox']:after { content:attr(data-on); position:absolute;top:0px;left:0px;z-index:2; display:inline-block;margin:0;padding:0px 0px 0px 5px; height:calc(100% - 0px);width:calc(100% - 0px); background: #3fa2ff;color: #fff; text-align: left;text-indent:0px;font-weight:bold;letter-spacing:0.1px; border-radius:10px;border:1px solid #0282fb;opacity:0;transition: all .3s ease;word-spacing:0; text-shadow:1px 1px 1px #262626;transform: rotate(0deg);} /* onì‹œ 동작 변경 */ label.switch_bt input[type='checkbox']:checked:before{opacity:0;transition: all .3s ease;} label.switch_bt input[type='checkbox']:checked:after{opacity:1;transition: all .3s ease;} /*off 체크 안되어 있을 ë•Œ ë³¼ 무빙 */ label.switch_bt:has(input[type='checkbox']:not(:checked)) .switch_boll{ /*left:2px;*/left:1px;transition: all .3s ease;transform: rotate(0deg);} /*on 체크 되어 있을 ë•Œ ë³¼ 무빙 */ label.switch_bt:has(input[type='checkbox']:checked) .switch_boll{ left:calc(100% - 17px);transition: all .3s ease;transform: rotate(540deg);} /* 라벨 대행 */ .switch_label{position: relative;display:inline-block;color:#303030; font-weight: bold;margin: 0px 5px 0px 0px; -ms-user-select: none;-moz-user-select: -moz-none; -khtml-user-select: none;-webkit-user-select: none;user-select: none; vertical-align: middle;font-size: 14px;cursor:pointer;} /*----------------------------------------------- ** 스위치 버튼 : 끝 **=============================================*/ /* ** ON, OFFê°€ ì•„ë‹Œ 다른 text를 ì‚¬ìš©í•˜ê³ í¬ê¸°ê°€ 더 넓어야 í• ê²½ìš° 아래 처럼 넓이, 높이, 폰트사이즈, 라인높이와 볼의 크기, 볼의 ìœ„ì¹˜ì  등을 맞추어서 ** class를 하나 더 만들것 ** ** 아래는 두번째 스위치 버튼인 **