@font-face { font-family: webfont; src: url(../../font/webfont.eot), /* 1번째 */ url(../../font/webfont.woff), /* 2번째 */ url(../../font/webfont.woff2), /* 3번째 */ url(../../font/webfont.ttf); /* 4번째 */ font-display: swap; } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------- 요소(element) 여백 초기화 --------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* CSS Document */ /* reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0} body,button,input,select,table,textarea{font-family:'Pretendard-Regular', "Noto Sans KR","돋움", Dotum, "굴림", Gulim, Verdana, AppleGothic, sans-serif;font-size:1.1rem;font-weight:500;color:#000;line-height:1.6;letter-spacing:-0.04em} html{height:100%} body{background-color:#FAFAFA;height:100%;font-family:'Pretendard-Regular', "Noto Sans KR","돋움", Dotum, "굴림", Gulim, Verdana, AppleGothic, sans-serif;font-size:1rem;-webkit-text-size-adjust:none} button,fieldset,img{border:0 none} fieldset,img{border:0} img,li{vertical-align:top} li,ol,ul{list-style:none} address{font-style:normal} a{color:inherit;text-decoration:none;outline:none;} a:active,a:focus,a:hover{text-decoration:none} button{border:0;background:0 0;cursor:pointer} table{margin:0;padding:0;border:0;border-spacing:0;border-collapse:collapse;} /*input,select,textarea,button{vertical-align:middle} */ input,select,textarea{border:0;background:0;-webkit-border-radius:0;-moz-border-radius:0;-o-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none} select::-ms-expand{display:none} textarea{resize:none;box-shadow:none;-webkit-border-radius:0;-moz-border-radius:0;-o-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none} embed,iframe,img,object,video{max-width:100%} input[type=search]::-ms-clear,input[type=search]::-ms-reveal,input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;width:0;height:0} input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none} input[type='text'],input[type='password'],input[type='submit'],input[type='search']{-webkit-appearance:none;border-radius:0;} button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file']{-webkit-appearance:button;border-radius:0} .ir-text,legend,table caption{overflow:hidden;position:absolute;border:0;width:1px;height:1px;clip:rect(1px,1px,1px,1px)} *{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} header,nav{display:block;} input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { /* WebKit browsers */ color:transparent; } input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:transparent; } input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ color:transparent; } input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */ color:transparent; } main{display:block;} /*인터넷익스플로러*/ ::-moz-selection {background: #04A4CC;color: #FFF;text-shadow: none;} ::selection {background: #04A4CC;color: #FFF;text-shadow: none;} input::placeholder {color: #ccc;font-weight:400;} /* 이미지, 링크 스타일 */ a,img, input,button { selector-dummy:expression(this.hideFocus = true);outline:none; } img {vertical-align:middle;} a,img, input { outline:none;} a:link, a:visited {color:#262626;text-decoration:none;} a:active {color:#262626;text-decoration:none;} a:hover, a:focus {color:#262626;text-decoration:none;} /* --------------------------------------------------------------------------------------------------------------------------------------------------------------- base 기본 자주쓰는 스타일 --------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 기본 스타일 */ label, select, input, textarea {vertical-align:middle;} abbr, acronym { cursor: help; } legend, .search h2 {position:absolute;overflow:hidden;width:1px;height:1px;font-size:0;line-height:0;} label {white-space: pre;margin:0;} /* 이미지, 링크 스타일 a,img, input { selector-dummy:expression(this.hideFocus = true);outline:none; }*/ img {vertical-align:middle;} a,img, input { outline:none;} a:link, a:visited {color:#000;text-decoration:none ;} a:active {color:#000;text-decoration:none ;} a:hover, a:focus {color:#000;text-decoration:none ;} /*자주쓰는요소*/ .hide-off {position: absolute;top: -999em;height:0px;} .hide-text {text-indent: -999em; display: block; overflow: hidden; text-decoration: none;height:0px;} .clear {clear:both;height:0px;} /*정렬*/ .text-right{text-align:right;} .text-center{text-align:center;} .text-left{text-align:left;} /*줄바꿈*/ .m-br { display: none; } .pc-br { display: block; } @media (max-width: 1199px) { .m-br { display: block; } .pc-br { display: none; } } small {font-size:.9rem;} /*모바일 pc 보이고 숨기고 */ .mobile__itemView{ display: none;} .pc__itemView{ display: block;} @media (max-width: 1199px) { .mobile__itemView{ display: block;} .pc__itemView{ display: none;} } /*모바일 pc 보이고 숨기고 */ .mobile_in{ display: none;} .pc_in{ display: inline;} @media (max-width: 1199px) { .mobile_in{ display: inline;} .pc_in{ display: none;} } /*컬러*/ .blueText{color: #007bff;} /*여백*/ .pdr-10{padding-right:10px;} .pdl-10{padding-left:10px;} .pdl-20{padding-left:20px;} .mgr-5{margin-right:5px;} .mgt-10{margin-top:10px;}.mgt-15{margin-top:15px;}.mgt-20{margin-top:20px;}.mgt-30{margin-top:30px;}.mgt-40{margin-top:40px;}.mgt-50{margin-top:50px;}.mgt-60{margin-top:60px;}.mgt-70{margin-top:70px;}.mgt-80{margin-top:80px;}.mgt-90{margin-top:90px;}.mgt-100{margin-top:100px;} .mgb-10{margin-bottom:10px;}.mgb-15{margin-bottom:15px;}.mgb-20{margin-bottom:20px;}.mgb-30{margin-bottom:30px;}.mgb-40{margin-bottom:40px;}.mgb-50{margin-bottom:50px;}.mgb-60{margin-bottom:60px;}.mgb-70{margin-bottom:70px;}.mgb-80{margin-bottom:80px;}.mgb-90{margin-bottom:90px;}.mgb-100{margin-bottom:100px;} .pdt-10{padding-top:10px;}.pdt-15{padding-top:15px;}.pdt-20{padding-top:20px;}.pdt-30{padding-top:30px;}.pdt-40{padding-top:40px;}.pdt-50{padding-top:50px;}.pdt-60{padding-top:60px;}.pdt-70{padding-top:70px;}.pdt-80{padding-top:80px;}.pdt-90{padding-top:90px;}.pdt-100{padding-top:100px;} .pdb-10{padding-bottom:10px;}.pdb-15{padding-bottom:15px;}.pdb-20{padding-bottom:20px;}.pdb-30{padding-bottom:30px;}.pdb-40{padding-bottom:40px;}.pdb-50{padding-bottom:50px;}.pdb-60{padding-bottom:60px;}.pdb-70{padding-bottom:70px;}.pdb-80{padding-bottom:80px;}.pdb-90{padding-bottom:90px;}.pdb-100{padding-bottom:100px;} /*input select 스타일*/ .inputStyle_01{border:1px solid #ddd;font-size:1.2rem;min-width:200px;height:35px;} /*관직지명보기에사용*/ .inputStyle_02{border:1px solid #ddd;font-size:1.1rem;width:100%;}/*사진정보에사용*/ .textareaStyle{border:1px solid #ddd;font-size:1.1rem;width:100%;height:200px;} /* 가로스크롤 */ @media (max-width: 1199px) { .scroll_shadow{position:relative;overflow:hidden;} .scroll_shadow:after{box-shadow: 0 0 10px 0 #000;content: "";height: 100%;position: absolute;right:-1px;top: 0;width: 1px;} } /*박스형태*/ .guideBox {margin:0 0 30px;} .guideBox strong {display:block;margin-bottom:5px;font-size:24px;font-weight:500;letter-spacing:-1px;} .guideBox span {display:inline-block;font-size:1.2rem;font-weight:600;letter-spacing:-1px;line-height:35px;vertical-align: middle;padding-right:10px;} .guideBox .grayBox3 {margin-top:25px;margin-bottom:0;} .guideBox .grayBox3 strong {display:block;margin-bottom:5px;font-size:1.5rem;letter-spacing:-1px;color: #23408f;} .guideBox .grayBox3 p {font-size:17px;letter-spacing:-1px;} .guideBox .grayBox3 p.grayTxt {font-size:16px;color:#666} @media (max-width: 991px) { .guideBox .grayBox3 p {font-size:14px;} } @media (max-width: 480px) { } .grayBox3{width: 100%;height: auto;padding: 24px;background-color: #fff;margin-bottom: 40px;border:1px solid #ddd;border-radius:12px;} .blueBox {width: 100%;height: auto;padding: 20px 10px;color: #fff;letter-spacing: -1px;text-align: center;border-radius: 0px;background: #153657;font-size: 2rem;font-weight: 600;line-height: 1.3em;} .blueBox .btm-txt{font-size: 1.5rem;font-weight:400;} /* ul li 스타일*/ .boxList {display:inline-block;width:50%;text-align:center;margin-top:20px;} .boxList:nth-child(2n){width:calc(50% - 15px);margin-left:15px;} .boxList .inner{border:1px solid #d2d2d2;padding:25px 10px;font-size: 1.2rem;color: #000;} .boxList_100 li {display:block;width:100%;text-align:left;margin-top:20px;border:1px solid #d2d2d2;padding:25px 20px;font-size: 1.2rem;color: #000;background-color:#fff;} .boxList_100 li strong{padding-right:15px;font-size:1.5rem;} .boxList_100 li:hover {border:1px solid #000;} .checkList li{font-size: 20px;color: #000;letter-spacing: -0.045em;font-weight: 300;padding: 20px;padding-right: 10px;background: #fff;border: 1px solid #ddd;margin-bottom: 10px;display: inline-block;vertical-align: top;width: calc(50% - 10px);margin-right: 5px;} .checkList.w100 li{display: block;vertical-align: top;width:100%;margin-right: 0;} .checkList.w100 li .grayText_sm{display:inline;} .checkList li span{position: relative;padding-left: 30px;display: block;} .checkList li span:before {content: '';display: block;position: absolute;width: 20px;height: 20px;background: url(/resource/img/askeye/checkicon.png);top: 7px;left: 0;} @media (max-width: 767px) { .checkList li{width: 100%;margin-right: 0;} } .imgList{} .imgList:after{clear:both;content:'';display:block;} .imgList li{width:33%;float:left;margin-bottom:10px;} .imgList li .circleBox{width:130px;height:130px;border:1px solid #ddd;padding:15px 10px 5px;border-radius:100%;margin:0 auto;margin-bottom:20px;} .imgList li .circleBox img{border-radius:30px;} .imgList li span{display:block;} /* 기본 리스트 */ ul.basicList{margin:20px 0 ;} ul.basicList li{position:relative;padding:0 0 5px 15px;font-weight:400;} ul.basicList li strong{color:#000;} ul.basicList li:before{background-color:#222;width:5px;height:5px;display:block;position:absolute;top:10px;left:0;content:'';} ol.basicList{margin:20px 0 20px 20px;} ol.basicList li{list-style:decimal ;text-align:left;padding-bottom:5px;} /* 태그형태 리스트 */ ul.wordList{font-size:0; letter-spacing:-4px;} ul.wordList li{display:inline-block; vertical-align:top; margin:4px; border:1px solid #d2d2d2; background:#fff; border-radius:30px; padding:10px 18px; font-size:18px; color:#666666; letter-spacing:-0.05em; font-weight:300;} /*테이블 스타일*/ .tableStyle_02 { width: 100%; text-align: center; } .tableStyle_02 table { position: relative; width: 100%; } .tableStyle_02 table::before { content: ''; width: 100%; height: 1px; background: #0c385a; position: absolute; top: 0; left: 0; } .tableStyle_02 table th { text-align: center; color: #000; font-size: 1rem; font-weight: 500; background: #fcfcfc;border: 1px solid #ddd; padding: .5rem 0;background: #f9f9f9; } .tableStyle_02 table thead th { font-weight: 600; color: #222; border-bottom-color: #aaa; background: #f9f9f9; } .tableStyle_02 table td { font-size: 1rem; color: #555; } .tableStyle_02 table tbody th{ font-weight: 600;} .tableStyle_02 table td { border: 1px solid #ddd; padding: .8rem 10px; } .tableStyle_02 table tr:first-child th, .tableStyle_02 table tr:first-child td { border-top: 0; } .tableStyle_02 table th:first-child, .tableStyle_02 table td:first-child { border-left: 0; } .tableStyle_02 table th:last-child, .tableStyle_02 table td:last-child { border-right: 0; } /*테이블 - 스크롤있음*/ .tableStyle_03 { width: 100%; text-align: center; } .tableStyle_03 table { position: relative; width: 100%; word-break: break-all; } .tableStyle_03 table::before { content: ''; width: 100%; height: 1px; background: #0c385a; position: absolute; top: 0; left: 0; } .tableStyle_03 table thead th {color:#00589e; background: #f9f9f9;font-weight:600;font-size:1.1rem;} .tableStyle_03 table td {text-align: center;font-size: 1rem; color: #000;vertical-align: top;} .tableStyle_03 table th, .tableStyle_03 table td { border: 1px solid #ddd;padding:15px 5px; } .tableStyle_03 table tr:first-child th, .tableStyle_03 table tr:first-child td { border-top: 0; } .tableStyle_03 table th:first-child, .tableStyle_03 table td:first-child { border-left: 0; } .tableStyle_03 table th:last-child, .tableStyle_03 table td:last-child { border-right: 0; } .tableStyle_03::-webkit-scrollbar { height: 3px; } .tableStyle_03::-webkit-scrollbar-thumb { background-color: #333; border: 3px solid #333; border-radius: 5px; } .tableStyle_03::-webkit-scrollbar-track { background-color: #e5e5e5; } @media screen and (max-width: 767px) { .tableStyle_03 { width: 100%; overflow-x: scroll; } .tableStyle_03 table { min-width: 45rem; } } /*-----------------------------------------------------------------------------------*/ /* 기존사용하는 레이아웃 /*-----------------------------------------------------------------------------------*/ .wrap { width: 100%; } .input_txt { border-radius: 3px; ime-mode:active; color: #000000; font-weight: bold; line-height: 28px; height: 28px;background-color: #fff;border: 1px solid #ddd;border-radius: 8px;padding: 0 5px; } .input_combo { border-radius: 3px; height: 30px; border: 1px solid #BCBCBC; cursor: pointer; } .input_focus { background: #C7EEFF; border: 1px solid #03A9F4; } .v_center {vertical-align: middle; } .input_per_txt { font-family: 'webfont'; border-radius: 0px; background: #eeeeee; font-weight: bold; line-height: 28px; width:100px; height: 28px; border:1px solid #EEEEEE; padding: 0 5px; } .input_grd_txt { font-family: 'webfont'; border-radius: 3px; background: #eeeeee; font-weight: bold; line-height: 28px; width:100px; height: 28px; border:1px solid #EEEEEE; padding: 0 5px; } .input_ymd_txt { border-radius: 3px; background: #eeeeee; font-weight: bold; line-height: 28px; width:100%; height: 28px; border:1px solid #EEEEEE; padding: 0 5px; } .selct_tit_txt { font-family: 'webfont'; border-radius: 3px; background: #5A6883; color: #ffffff; font-weight: bold; line-height: 28px; width:30px; height: 28px; border:1px solid #EEEEEE; padding: 0 5px; } .selct_con_txt { border-radius: 3px; background: #eeeeee; color: #000000; font-weight: bold; line-height: 28px; width:60px; height: 28px; border:1px solid #EEEEEE; padding: 0 5px; } .padding {background: #FFFFFF; padding:10px 10px 0px 20px; } .grd_btn {font-family: 'webfont'; background: #0054FF; font-size:14px; } .grd_btn1 {font-family: 'webfont'; background: #6799FF; font-size:14px; border-radius: 3px; color: #000000; width: 100%;} .list_title { font-family: 'webfont'; text-align: center; font-size: 16px; color: #FFFFFF; } .list_data { font-family: 'webfont'; text-align: center; color: #737373; } .jick_se { display: inline-block; border-radius: 6px; background: #57636F; text-align: center; color: #FFFFFF; padding: 0px 5px; width: 100px; height: 28px; line-height: 28px; margin-bottom: 0;} .jick_data { font-family: 'webfont'; display: inline-block; border-radius: 6px; background: #778899; text-align: center; color: #FFFFFF; padding: 0px 0px; width: 140px; height: 28px; line-height: 28px; cursor: pointer; margin-bottom: auto; vertical-align: baseline;} .jick_blank{ display: inline-block; border-radius: 6px; text-align: center;padding: 0px 5px; width: 20px; height: 28px; line-height: 28px; cursor: pointer; margin-bottom: 0;} .jick_line { padding: 0px 0px; cursor: pointer; } .chonsu_data { font-family: 'webfont'; display: inline-block;text-align: center;background: #568fc0;padding: 10px 0;width: 150px;color: #fff;border-radius: 6px; cursor: pointer; margin-bottom: 0;-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);} .chonsu_data1 { font-family: 'webfont'; display: inline-block;text-align: center;background: #568fc0;padding: 10px 0;width: 150px;color: #fff;border-radius: 6px; cursor: pointer; margin-bottom: 0;-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);} .chonsu_data2 { font-family: 'webfont'; display: inline-block;text-align: center;background: #f1a558;padding: 10px 0;width: 150px;color: #fff;border-radius: 6px; cursor: pointer; margin-bottom: 0;-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);} .gebo_se {-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);border:2px solid #efefef;display: inline-block; border-radius: 6px; background: rgba(228,228,228,1); background: -moz-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(228,228,228,1)), color-stop(47%, rgba(240,240,240,1)), color-stop(100%, rgba(246,246,246,1))); background: -webkit-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%); background: -o-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%); background: -ms-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%); background: linear-gradient(to right, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%);text-align: center; color: #565e6b; padding: 0px 5px; width: 124px; font-weight:500;height: 32px; line-height: 30px; } .gebo_data {-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);border:2px solid #fff;font-size:.9rem; font-weight: 700;display: inline-block; border-radius: 6px; background: #568fc0; text-align: center; color: #FFFFFF; padding: 0px 5px; width: 124px; height: 32px; line-height: 28px; cursor: pointer; margin-bottom: 0;} .gebo_data1{-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);border:2px solid #fff;font-size:.9rem; font-weight: 700;display: inline-block; border-radius: 6px; background: #AA8899; text-align: center; color: #FFFFFF; padding: 0px 5px; width: 135px; height: 32px; line-height: 28px; cursor: pointer; margin-bottom: 0;} .gebo_blank{ display: inline-block; border-radius: 6px; background: #FFFFFF; text-align: center; color: #FFFFFF; padding: 0px 5px; width: 50px; height: 32px; line-height: 32px; cursor: pointer; } .gebo_line { padding: 0px 0px; cursor: pointer; } .gebo_bgline { background-image: url('../images/line2.png'); background-repeat:no-repeat; background-position:center; padding:0px 0px; vertical-align: baseline;} .bgF3F3F3 { background: #F3F3F3; } .bgFFFFFF { background: #FFFFFF; } .bgBEF7E6 { background: #BEC6F7; } .lh20 { line-height: 20px; } .pl05 { padding-left: 5px; } .pa05 { padding: 5px; } .fbold { font-weight: bold; } .cFF0000 { color: #ff0000; } .theme-showcase > p > .btn {margin: 5px 0;} .content_wrap{display:none} .content_wrap{width:100%} /* --------------------------------------------------------------------------------------------------------------------------------------------------------------- 기본 레이아웃 --------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /********************************************************************************** [media query examples] @media (max-width: 575px) { } @media (max-width: 768px) { } @media (max-width: 991px) { } @media (max-width: 1199px) { } --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; **********************************************************************************/ /*서브 레이아웃*/ .nav_area{border:1px solid #ddd;border-bottom:none;border-top:none;} .nav_area ul li{padding:8px 5px;border-bottom:1px solid #ddd;margin:0 !important} .nav_area ul li:hover{background-color:#fdf1c8;} .nav_area ul li button{padding:5px !important;font-size:1.1rem;width:100%;text-align:left;} .nav_area ul li button img{width:30px;display: inline-block;border-radius: 5px;margin-right:5px;} .content_area{} @media (max-width: 768px) { .nav_area{border-right:none;border-bottom:1px solid #ddd;} .nav_area ul li {padding:8px 5px 0;width:auto !important;border-bottom:none;} .nav_area ul li button{padding:5px 7px;min-width:100px; !important;} } /*메인 레이아웃*/ .m_content{padding-bottom: 2rem;width:100%;min-height:1080px;background-color: #fff;} .m_content .m_wrap{width:100%; margin:0; padding:0 0 10px;} .m_content .m_wrap .m_c_content{padding:0 0 50px;display: flex;flex-flow: row wrap;justify-content: space-between;align-content: center;background-color: #f5f5f5;} .m_content .m_wrap .m_c_content .m_c_content_inner{overflow:hidden;position:relative;width:calc(100% - 190px);background-color:#f5f5f5;padding:10px 20px;} .m_content .m_wrap .m_c_content .m_c_content_inner.menuOff{width:calc(100% - 70px);} .mainTitle{display: none;position:relative;font-size: 1.7rem;margin:0 20px;padding-bottom:20px;padding-top:30px;font-weight:700;color:#000;border-bottom:1px solid #ddd;font-family: "함초롱바탕", "한양해서", "Noto Serif KR", sans-serif;} .mainTitle .Tbtn_area{position:absolute;top:0;right:0;} .m_content .m_wrap .m_c_content .m_c_content_inner .subTitle{margin:0 0 20px 0;font-size:1.5rem;font-weight:600;} .inner_content{position:relative;padding:15px 15px 10px 15px;} .txt{text-align:justify;padding:20px 0;font-size:1.3rem} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox{position:absolute;top:10px;right:20px;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .function{display:inline-block;margin-right:20px;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .function label{padding-right:5px;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .community{display:inline-block;} @media (max-width: 1199px) { .m_content .m_wrap .m_c_content .m_c_content_inner{width:100%;} .m_content .m_wrap .m_c_content .m_c_content_inner.menuOff{width:100%} } @media (max-width: 991px) { .m_content{padding-top:0;} .m_content .m_wrap .m_c_content{padding:0 0 50px;} .m_content .m_wrap .m_c_content .m_c_content_inner{margin:0;padding-top:0;} .m_content .m_wrap .m_c_content .m_c_content_inner .content_wrap{padding:1rem;} .m_content .m_wrap .m_c_content .m_c_content_inner .inner_content{padding:2rem 12px;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox{position:static;width:100%;border-bottom:1px solid #ddd;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .function{text-align:center;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .function button{margin:5px 0;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .function label{margin-bottom:10px;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .community{display:block;position:absolute;top:10px;right:20px;} } @media (max-width: 768px) { .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .function{display:block;margin:0 ;} } @media (max-width: 480px) { .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .community{position:static;top:auto;right:auto;padding:0 10px;text-align:left;border-top:1px solid #ddd;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .community button{margin:5px 0;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .function{text-align:left;padding-left:10px;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox .community .listBack{display:block;position:absolute;top:10px;right:20px;} } #header{position:relative;display: flex;flex-flow: row wrap;justify-content: space-between;align-content: center;border-radius:15px;padding:0 0 10px;} #header .logo{display:none;width:200px;padding-top:15px;} #header .logo h1{} #header .m_serch_bar{width:calc(100% - 130px);} #header .admin_btn{width:120px;height:62px;border-radius:15px;color:#000;background-color:#fff;border:1px solid #ddd;} #header .admin_btn .text-sm{display:block;} #header .admin_btn button{color: #000;width: 100%;height: 62px;padding-left: 40px;display: block;background: url(/khRyu/images/new/icon_admin_blue.png) no-repeat 14px 20px;background-size: 20px;} @media (max-width: 1199px) { #header .logo{display:block;width:100%;padding-top:0;} #header .logo h1{width:100%;height:50px;} #header .logo h1 img{height:40px;} #header .m_serch_bar{width:calc(100% - 130px);margin:0;} #header .admin_btn{height:78px;} #header .admin_btn button{height:78px;background: url(/khRyu/images/new/icon_admin_blue.png) no-repeat 14px 25px;background-size: 20px;} } @media (max-width: 991px) { #header{padding:20px 0} #header .logo{padding-top:0;} #header .logo h1{height:50px;line-height:50px;} #header .m_serch_bar{width:100%;margin:0;padding:20px 0 0;} #header .admin_btn{position:absolute;top:20px;right:80px;} #header .admin_btn{width:120px;height:50px;padding:0;border-radius:5px;} #header .admin_btn button{width:100%;height:100%;background:none;padding:0;} } @media (max-width: 768px) { #header .admin_btn{top:15px;width:auto;padding:0 10px;} #header .admin_btn .text-sm{display:none;} #header .logo h1{width:auto;height:40px;} #header .logo h1 img{width:auto;height:40px;} } @media (max-width: 575px) { } @media (max-width: 480px) { #header .admin_btn{top:25px;height:40px;;} } body.scr{overflow:hidden;} html.scr{overflow:hidden;} /*모바일 메뉴*/ .btn-category {display:none;position:absolute; top:0; right:0; width:60px; height:60px; cursor:pointer;padding:10px 0 0;} .btn-category .bar_group{position:relative;width:40px;height:30px;display:inline-block;vertical-align:middle;} .btn-category .bar_group .bar {position: absolute; left:0; width:100%; height:2px; border:0; background:#000; transition:opacity 0.3s, top 0.3s, transform 0.5s; transition-delay:0.3s, 0.3s, 0s} .on .btn-category .bar{background:#000;} .btn-category .bar:nth-child(1) {top:0; transform:rotate(0)} .btn-category .bar:nth-child(2) {top:11px; opacity:1} .btn-category .bar:nth-child(3) {top:22px; transform:rotate(0)} .btn-category.map{ right:0;} .btn-category.map .bar {background:#000; transition:background 1s, opacity 0.3s, top 0.3s, transform 0.5s; transition-delay:0s, 0s, 0s, 0.3s; } .btn-category.map .bar:nth-child(1) {top:11px; background:#000; transform:rotate(-45deg)} .btn-category.map .bar:nth-child(2) {opacity:0} .btn-category.map .bar:nth-child(3) {top:11px; background:#000; transform:rotate(45deg)} #sitemap{width:180px; padding:0;} #sitemap{position:relative;width:180px;overflow:hidden;padding:20px 0 0;background-color: #fff;border:1px solid #ddd;box-shadow: 5px 0px 6px rgba(0, 0, 0, 0.1);} #sitemap button{position:absolute;top:0;left:0;width:30px;height:100%;background:#36A3D4;color:#fff;border-top-right-radius:15px;border-bottom-right-radius:15px;background: rgba(4,111,157,1);background: -moz-linear-gradient(left, rgba(4,111,157,1) 0%, rgba(11,132,188,1) 42%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(4,111,157,1)), color-stop(42%, rgba(11,132,188,1)));background: -webkit-linear-gradient(left, rgba(4,111,157,1) 0%, rgba(11,132,188,1) 42%);background: -o-linear-gradient(left, rgba(4,111,157,1) 0%, rgba(11,132,188,1) 42%);background: -ms-linear-gradient(left, rgba(4,111,157,1) 0%, rgba(11,132,188,1) 42%);background: linear-gradient(to right, rgba(4,111,157,1) 0%, rgba(11,132,188,1) 42%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#046f9d', endColorstr='#0b84bc', GradientType=1 );} #sitemap button .inner{display:inline-block;position:relative;width:30px;height:100%;} #sitemap button .inner .topDiv{display:inline-block;position:absolute;top:20px;left:0;padding:5px;} #sitemap.active {width:30px;border-top-left-radius:0;border-bottom-left-radius:0;} #sitemap > ul > li{width:100%; padding:10px 0;border-bottom:1px solid #ddd;} #sitemap > ul > li:hover{background-color:#fdf1c8;} #sitemap > ul > li a{font-size: 1.1rem;width: 100%;height: 100%;display: block;text-align: left;padding-left: 20px;cursor: pointer;} #sitemap > ul > li a span{width:35px;height:35px;margin-right:5px;} #sitemap > ul > li.on{background-color: #E9C974;} #sitemap > ul > li.on a{color:#000;font-weight:600;} #sitemap .mobileH h2{text-indent:-300px;overflow:hidden;width:160px;height:116px;margin:0 auto 30px;border-radius:12px;box-shadow:3px 3px 3px rgba(0,0,0,0.1);font-size:2rem;font-weight:600;background: url(/khRyu/images/new/logo.png) no-repeat 0 0;background-size: 160px;} @media screen and (max-width:1199px){ #sitemap button{display:none;} #sitemap.active button{display:none;} #sitemap{position:fixed; top:0; left:auto;right:-110%; width:100%; height:100%; background:rgba(0,0,0,0.5); padding:50px 20px; z-index:10;border-top-right-radius:0;border-bottom-right-radius:0;transition:all ease .5s; -webkit-transition:all ease .5s; -o-transition:all ease .5s; -moz-transition:all ease .5s; -ms-transition:all ease .5s; overflow: hidden; } #sitemap > ul{max-width:400px;position:absolute;top:0;right:0;height: 100%;padding:80px 0 20px; background: #fafafa; width:100%;overflow: auto;} #sitemap > ul > li{width:100%; padding:10px 20px;margin:0 0 5px;font-size:1.2rem;border-bottom:1px solid #ddd;border-radius:0;} #sitemap > ul > li a{font-size:1.3rem;text-align:left;} #sitemap > ul > li.on{border-right:none;background:none;} #sitemap > ul > li.on a{color: #F87B0F} #sitemap .mobileH{position:absolute;top:0;right:0;z-index:10;padding:20px;background-color: #fff;width: 100%;height:80px;max-width: 400px;z-index: 10;border-bottom: 1px solid #ddd;} #sitemap .mobileH h2{width:100%;color:#000;font-size:1.5rem;box-shadow:none;border-radius:none;background: url(/khRyu/images/new/logo_mobile.png) no-repeat 0 0;background-size: 70%;} #sitemap.open{right:0;} .btn-category {display:block;z-index:1000;padding:10px 0 0;} } @media screen and (max-width:991px){ .btn-category {padding:30px 0 0;} } @media screen and (max-width:768px){ .btn-category{right:0;padding:28px 0 0;} .btn-category .text{display:none;} .btn-category.map{right:0;} } @media screen and (max-width:480px){ .btn-category{padding: 30px 0 0;height:70px;} .btn-category .bar_group{width:35px;margin-left: 10px;} } /*검색영역*/ .search_web{display: flex;flex-flow: row wrap;justify-content: space-between;align-content: center;overflow:hidden;height:100%;border:2px solid #666666;padding: 0;background: #fff;border-radius: 10px;} .search_web.chonsu{border-radius:0;border-top-left-radius: 15px;border-top-right-radius: 15px;border: 1px solid #e9e9e9;} .search_web.chonsu hr{border: 0 solid #000;width: 100%;height: 1px;background-color: #ddd;margin-top: 5px;margin-bottom: 5px;} .search_web h2{position: relative;background: #666666;color: #fff;width: 55px;font-size: 1rem;text-align: center;height: 72px;padding: 15px 10px;font-weight: bold;} .search_web.chart h2{padding:35px 15px;background-color:#4e6386;} .search_web .search_field{width:calc(100% - 185px);padding:2px 0 0;position:relative;} .search_web .search_field.sub{width:calc(100% - 130px);padding:0;} .search_web.chonsu .search_field{padding: 10px 0 10px 10px;} .search_web .search_field .input_area {display: flex;flex-flow: row wrap;justify-content: space-between;align-content: center;} .search_web .search_field .input_area .items{position:relative;width:20%;padding:0 0 5px;} .search_web .search_field .input_area .items.title{width:6%;line-height:45px;background-color:#ddd;text-align:center;} .search_web .search_field .input_area .items.long{width:calc(34% - 80px);} .search_web .search_field .input_area .items.btn{width:80px;} .search_web .search_field .input_area .items.w00{width:20%;} .search_web .search_field .input_area .items.w000{width:40%;} .search_web .search_field .input_area .items.w16{width:16%;} .search_web .search_field .input_area .items.w01{width:18%;} .search_web .search_field .input_area .items.w02{width:18%;} .search_web .search_field .input_area .items.w03{width:15%;} .search_web .search_field .input_area .items.w04{width:19%;} .search_web .search_field .input_area .items.w05{width:30%;} .search_web .search_field .input_area .items .text, .search_web .search_field .input_area .items label{position:absolute;top:0;left:0;width:80px;font-size:1.1rem;text-align:right;line-height:35px;margin:0;} .search_web .search_field .input_area .items label span{font-size:1rem;} .search_web .search_field .input_area .items.w03 label{width:55px;} .search_web .search_field .input_area .items .text{font-size:1rem;font-weight:500;color: #4372c1;} .search_web .search_field .input_area .items .inner{padding-left:88px;line-height:35px;font-size:1.1rem;} .search_web .search_field .input_area .items.w03 .inner{padding-left:60px;} .search_web .search_field .input_area .items.long label{width:90px;} .search_web .search_field .input_area .items.long .inner{padding-left:85px;} .search_web .search_field .input_area .items .inner select, .search_web .search_field .input_area .items .inner input{width:100%;height:35px;padding:0 0 0 10px;;font-size:1rem;background-color: #fff;border: 1px solid #ddd;border-radius: 8px;} .search_web .search_field .input_area .items button{margin-left:10px;} .search_web .btn_area{width:110px;padding:5px;} .search_web .btn_area button{width:100%;} .search_web button{background:#666666;color:#fff;border:none;padding:10px 20px;font-size:17px;} .search_web button img{vertical-align:middle;width:12px;} .search_web .search_btn1{padding:2px 0px;background:#ffd647;color:#000;text-align:center;font-size:18px;font-weight:600;border-top-right-radius:10px;border-top-left-radius:10px;} .search_web .search_btn2{padding:5px 0px;background:#666666;color:#fff;text-align:center;font-size:14px;font-weight:500;border-bottom-right-radius:10px;border-bottom-left-radius:10px;} .search_web .search_btn3{padding:5px 0px;margin-top:10px;background:#ffd647;color:#000;text-align:center;font-size:18px;font-weight:600;border-top-right-radius:10px;border-top-left-radius:10px;} .search_web .search_btn4{padding:5px 0px;background:#3C5681;color:#fff;text-align:center;font-size:18px;font-weight:500;border-top-right-radius:10px;border-top-left-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;} .search_web .search_btn_sm{padding:9px 20px;} .search_web h2 button.search_close{display:none !important;} .search_web h2 .search_close{display:block;position:absolute;top:10px;right:10px;padding:2px 20px;color: #fff;border: none;} .search_web h2 .search_close i{font-size:1.2rem;line-height:1.5;} @media (max-width: 1199px) { .search_web h2{height:114px;padding:30px 10px;} .search_web .search_field .input_area .items.title{width:100%;} .search_web .search_field .input_area .items.long{width:width:calc(40% - 90px);} .search_web .search_field .input_area .items label{font-size:1rem;text-align: left;padding-left: 10px;} .search_web .search_field .input_area .items.w03 label{width:65px;} .search_web .search_field .input_area .items.w03 .inner{padding-left:70px;} .search_web .search_field .input_area .items.long label{width:70px;} .search_web .search_field .input_area .items.long .inner{padding-left:75px;} .search_web .search_field .input_area .items.w16{width:30%;} .search_web .search_field .input_area .items.w01{width:30%;} .search_web .search_field .input_area .items.w02{width:40%;} .search_web .search_field .input_area .items.w03{width:30%;} .search_web .search_field .input_area .items.w04{width:30%;} .search_web .search_field .input_area .items.w05{width:70%;} .search_web .search_btn1{padding:10px 20px;} .search_web .search_btn2{padding:5px 20px;} .search_web .search_btn3{padding:10px 20px;} .search_web .search_btn4{padding:10px 20px;} } @media (max-width: 991px) { .search_web {width:100%;} .search_web.chonsu{padding-top:10px;padding-bottom:10px;} .search_web h2{font-size: 1.3rem;width:100%;height:100%;text-align:center;height:auto;padding:10px 0;line-height:1.5;border-bottom-left-radius:0;} .search_web.chart h2{padding:10px 0;} .search_web .search_field{width:calc(100% - 130px);} .search_web h2 button.search_close{display:block !important;} .search_web .search_field .input_area .items.w00{width:50%;} .search_web .search_field .input_area .items.w000{width:50%;} .search_web .search_field .input_area .items .text, .search_web .search_field .input_area .items label{text-align:left;padding-left:10px;} } @media (max-width: 768px) { .search_web .search_field{width:100%;padding:2px 5px 0 0;} .search_web .search_field.sub{width:100%;padding:0 5px 0 0;} .search_web.chonsu .search_field{padding-left:0;} .search_web .btn_area{width:100%;text-align:center;padding-bottom:15px;} .search_web .search_btn1, .search_web .search_btn3, .search_web .search_btn4, .search_web .search_btn2{display:inline-block;border-radius:0;width:120px !important; padding:5px 15px; font-size: 1rem; font-weight: 600;} .search_web .search_field .input_area .items.w00{width:50%;} .search_web .search_field .input_area .items.w000{width:50%;} .search_web .search_field .input_area .items.w16{width:50%;} .search_web .search_field .input_area .items.w01{width:50%;} .search_web .search_field .input_area .items.w02{width:50%;} .search_web .search_field .input_area .items.w03{width:50%;} .search_web .search_field .input_area .items.w04{width:50%;} .search_web .search_field .input_area .items.w05{width:100%;} .search_web .search_field .input_area .items.title{width:100%;} .search_web .search_field .input_area .items.long{width:50%;} .search_web .search_field .input_area .items.btn{width:100%;} .search_web.chart .search_field .input_area .items .text{width:90px;} .search_web.chart .search_field .input_area .items .inner{padding-left:100px;} .search_web .search_field .input_area .items label{width:65px;} .search_web .search_field .input_area .items .inner{padding-left:70px;} .search_web .search_field .input_area .items.long label{width:80px;} .search_web .search_field .input_area .items.long .inner{padding-left:85px;} .search_web .search_field .input_area .items.btn .search_btn_sm{width:100%;margin-left:0;} .search_web.chart .search_field .input_area .items{width:50%;} } @media (max-width: 575px) { .search_web.chart .search_field .input_area .items{width:50%;} } @media (max-width: 380px) { .search_web .search_field .input_area .items.w00, .search_web .search_field .input_area .items.w000, .search_web .search_field .input_area .items.w16, .search_web .search_field .input_area .items.w01, .search_web .search_field .input_area .items.w02, .search_web .search_field .input_area .items.w03, .search_web .search_field .input_area .items.w04, .search_web .search_field .input_area .items.w05, .search_web .search_field .input_area .items.title, .search_web .search_field .input_area .items.long, .search_web .search_field .input_area .items.btn, .search_web.chart .search_field .input_area .items{width:100%;} } /* ------------------- 검색결과영역 ----------------- */ #search_result{position: relative;overflow: hidden;overflow-y: auto;height: 420px;border-radius:15px;} #search_result .inner{padding: 0;margin-bottom: 0;} #search_result .inner .listUp{width: 100%; height: 420px; overflow-y: scroll;} #person_list{overflow-x:scroll;width:100%;color:#000;font-size:1.1rem; } #person_list thead tr th{text-align:center;padding:5px 0;height: 40px;font-size: 1rem;font-weight:bold;color:#000;background-color: #ffd647;position: -webkit-sticky;position: sticky;top: 0px;} #person_list thead tr th.app{width:90px;} #person_list thead tr th.pa{width:200px;} #person_list thead tr th.small{width:50px;} #person_list table tbody tr:hover {background-color:#edf0f5;} #person_list tbody tr td{border-bottom:1px solid #d5d5d5;padding:5px 3px;text-align:center; font-weight: 400;} #person_list tbody tr td .table-detail{font-size:1.1rem;} #person_list tbody tr td img{width:35px;display: inline-block;border-radius: 5px;} #person_list tbody tr:nth-child(4n-1) {background-color:#f4f4f4;} #person_list tbody tr:hover {background-color:#e1e4f2;} #person_list thead tr th .mobileView, #person_list thead tr th.mobileView, #person_list tbody tr td.mobileView{display:none;} #person_list thead tr th .pcView, #person_list thead tr th.pcView, #person_list tbody tr td.pcView{display:table-cell;} @media screen and (max-width:1400px){ #person_list thead tr th.pa{width:100px;} #person_list thead tr th.app{width:60px;} } @media screen and (max-width: 991px) { #search_result .inner .listUp:after{box-shadow: 0 0 10px 0 #000;content: "";height: 100%;position: absolute;right:-1px;top: 0;width: 1px;} } @media (max-width: 768px) { #person_list thead tr th.pa{width:auto;min-width:90px;} #person_list thead tr th .mobileView, #person_list thead tr th.mobileView, #person_list tbody tr td.mobileView{display:table-cell;} #person_list thead tr th .pcView, #person_list thead tr th.pcView, #person_list tbody tr td.pcView{display:none;} #person_list tbody tr td .table-detail span{display:none;} } .iconLink{cursor:pointer;text-indent:-100px;overflow:hidden;display:block;margin:0 auto;width:40px;height:40px;background:url(/khRyu/images/new/icon_table_0101.png) no-repeat 0 0;background-size:40px auto;} .iconLink.icon01{background-image:url(/khRyu/images/new/icon_table_0101.png);} .iconLink.icon02{background-image:url(/khRyu/images/new/icon_table_0102.png);} .iconLink.icon03{background-image:url(/khRyu/images/new/icon_table_0103.png);} .iconLink.icon04{background-image:url(/khRyu/images/new/icon_table_0104.png);} .iconLink.icon05{background-image:url(/khRyu/images/new/icon_table_0105.png);} .iconLink.icon06{background-image:url(/khRyu/images/new/icon_table_0106.png);} .iconLink.icon07{background-image:url(/khRyu/images/new/icon_table_0107.png);} #search_gebo_layer{height:550px; overflow-x:auto; overflow-y:auto;position: relative; margin-top: 10px; width: 100%; padding:0 0 20px 0;border-bottom-right-radius:15px;border-bottom-left-radius:15px;background-color: #686868;} #search_gebo_se{width:100%; min-width:1000px;position: sticky;top: 0px;background-color: #545454;padding: 10px 0;} #search_gebo{width:100%; height:300px;min-width:1000px;} #search_gebo table tr td table tr td{height:43.5px;} #search_gebo table tr td table tr td img{height:100%;} @media (max-width: 768px) { #search_gebo_layer{height:400px;} } /*검색결과영역 버튼 형식일경우 추가함*/ .datetable-btn.active {background-color:#dbf1ff !important;} .datetable-view {background-color:#fff !important;} #person_list tbody tr.datetable-btn.active:hover {background-color:#dbf1ff;} #person_list tbody tr td button.list_data {font-size:.9rem;font-weight:600;margin:0 5px;} @media (max-width: 575px) { #person_list tbody tr td {font-size: .9rem;} #person_list tbody tr td button.list_data {margin:0 2px;} .iconLink{width:35px;height:35px;background:url(/khRyu/images/new/icon_table_0101.png) no-repeat 0 0;background-size:35px auto;} .iconLink.icon01{background-image:url(/khRyu/images/new/icon_table_0101.png);} .iconLink.icon02{background-image:url(/khRyu/images/new/icon_table_0102.png);} .iconLink.icon03{background-image:url(/khRyu/images/new/icon_table_0103.png);} .iconLink.icon04{background-image:url(/khRyu/images/new/icon_table_0104.png);} .iconLink.icon05{background-image:url(/khRyu/images/new/icon_table_0105.png);} .iconLink.icon06{background-image:url(/khRyu/images/new/icon_table_0106.png);} .iconLink.icon07{background-image:url(/khRyu/images/new/icon_table_0107.png);} } @media (max-width: 360px) { #person_list tbody tr td button.list_data {margin:0;} } /* ------------------- 상세보기 ----------------- */ .personBox{background: #eee;padding:20px 10px;border-radius:6px;} #person .person_photo{text-align:center;float:left;width:150px;} #person .person_info{float:right;width:calc(100% - 190px);} @media (max-width: 1480px) { #person .person_photo{text-align:center;float:none;width:100%;} #person .person_info{float:none;width:100%;margin-top:30px;} } @media (max-width: 1199px) { #person .person_info{margin-bottom:30px;} } #person #step1 table {position: relative;} #person #step1 table tr th{border:1px solid #cccccc;padding:5px 10px;background-color:#dbe2e0;color:#343434;font-weight:300;text-align:center;} #person #step1 table tr td{font-family: 'webfont';border:1px solid #cccccc;padding:5px 10px;background-color: #fff;font-weight:600;} #person #step1 table tr td select{border:1px solid #ddd;width:100%;} #person #step1 table tr td input{border:1px solid #ddd;width:100%;} #person #step2 table {position: relative;} #person #step2 table tr th{border:1px solid #cccccc;padding:5px 10px;background-color:#e3dadd;color:#343434;font-weight:300;text-align:center;} #person #step2 table tr td{font-family: 'webfont';border:1px solid #cccccc;padding:5px 10px;background-color: #fff;font-weight:600;} #person #step2 table tr td select{border:1px solid #ddd;width:100%;} #person #step2 table tr td input{border:1px solid #ddd;width:100%;} #step3 {margin-top:20px;} #step3 button{border-radius:6px;padding:5px 10px;margin-right:5px;height:35px;} #step3 textarea{font-family: 'webfont';margin-top:10px;padding:10px;border:1px solid #ddd;border-radius:6px;width:100%;height:400px;} @media (max-width: 380px) { #person #step1 table tr th, #person #step1 table tr td, #person #step2 table tr th, #person #step2 table tr td{font-size:.9rem;padding:5px 0;} } /* ------------------- 실시간 ----------------- */ .spinner{position:fixed; top:50%; left:50%; margin-left:-50px; margin-top:-50px; text-align:center; z-index:1234; overflow:auto; width:140px; height:140px; } #body-box {border: 3px solid #000;} #viewDiv{font-family: "함초롱바탕", "한양해서", "Noto Serif KR", sans-serif;overflow:auto;position:relative;} #viewDiv .viewRoot{width:calc(100% - 40px);} #viewDiv .viewSea{position:absolute;top:0;right:0;border:1px solid #ddd;height: 100%;} /* ------------------- 웹 책----------------- */ #book_guide{position:absolute;top:0;left:0;width:250px;} #book_guide .book_inner{position:relative;padding:15px;} #book_guide.viewDetail{width:0;} #book_guide.viewDetail .book_inner{padding:0;} #book_guide .book_inner .book_close{position:absolute;top:100px;right:-50px;width:50px;height:55px;background-color: #efefef;border:1px solid #ddd;font-size:2rem;padding:5px 2px 2px;border-top-right-radius:7px;border-bottom-right-radius:7px;} #book_guide .book_inner .p_info{} #book_guide .tableStyle_02 {margin-bottom:20px;} #book_guide .tableStyle_02 thead th{padding:5px 0;} #book_guide .tableStyle_02 table td {padding:5px 0;} #book_guide .choice_block{text-align:left;} #book_guide .choice_block label{display: inline-block;padding: 0 10px;font-size: 1rem;border: 1px solid #ddd;} #book_guide .choice_block input{display:none} #book_guide .choice_block input:checked + label {background-color:#efefef;font-weight:bold;} #bu_block{margin-top:10px;} #bu_block h3 {display:none;font-size:1.2rem;margin-bottom:10px;color: #4169e1;font-weight:600;} #ja_block{margin-top:10px;} #ja_block h3{display:none;font-size:1.2rem;margin-bottom:10px;color: #4169e1;font-weight:600;} #pop_title{width: 220px;display:inline-block;vertical-align:middle;} #pop_title .now_page{border-radius: 5px; border:1px solid #ddd;background-color:#fff;text-align:center;width:72px;height:38px;display:inline-block;vertical-align:top;line-height:35px;font-size:1.2rem;} #pop_title button{vertical-align:top;} #page_move{display:inline-block;font-size:1rem;margin-right:0;} #page_move select{display:inline-block;width:60px;background-color:#fff;border:1px solid #ddd;padding:3px;height:40px;border-radius: 5px;} #page_move input {display:inline-block;width:60px;background-color:#fff;border:1px solid #ddd;padding:3px;height:40px;border-radius: 5px;margin-left:10px;} @media (max-width: 991px) { #pop_title .now_page{width:50px;} #pop_title button{padding:6px;} #page_move select{width:50px; } } #pageDoc{font-size:1.1rem;margin-bottom:10px;color: #4169e1;font-weight:600;} #book_layer{padding-left:0;width:100%;height:100vh;} #book_layer.hideBook{padding-left:0 !important;} #book_layer iframe{border:1px solid #ddd;width:100%;height:100%;} /* 스크롤시 */ #header.scrollStyle_h{position:fixed;top:0;left:12px;z-index:20;background-color:#fff;padding-bottom: 80px;width:calc(100% - 24px);} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox.scrollStyle_info{position: fixed !important;top: 260px !important;left: 0 !important;z-index: 21;border-bottom: none;} .m_content .m_wrap .m_c_content .m_c_content_inner .function_btnbox.scrollStyle_info .community{display: none;} /* 확대출소 */ #zoomControlHorizontal { width: 300px;height: 40px;background: #4169e1; margin-top:17px; display: flex;align-items: center;justify-content: center; padding: 5px;border-radius: 8px;color: white;gap: 8px; } #zoomControlHorizontal button { background: none;border: none;color: white; font-size: 20px;cursor: pointer;width: 32px;height: 32px; } #zoomSlider { width: 180px;height: 6px;appearance: none; background: #fff;border-radius: 3px;outline: none; } #zoomSlider::-webkit-slider-thumb { appearance: none;width: 16px;height: 16px;background: #0e2f93; border-radius: 50%;cursor: pointer; } #zoomSlider::-moz-range-thumb { width: 16px;height: 16px;background: #0e2f93; border-radius: 50%;cursor: pointer; } .image-pair-wrapper { overflow: auto; /* 전체 영역 벗어나지 않게 */ width: 100%; } .image-pair-container { display: flex; gap: 10px; transform-origin: top center; /* 책처럼 가운데 기준으로 확대 */ transition: transform 0.2s ease; max-width: 1116px; margin: 0 auto; } .image-container { flex: 1; } .image-container img { width: 100%; height: auto; display: block; } /* ------------------- 직계 ----------------- */ #gen{} #info{} .person_direct:after{clear:both;display:block;content:'';width:0;height:0;} .person_txt{font-size:1rem;margin:10px 0 30px;} #person .person_direct #step1 table.root_wife:before, #person .person_direct #step1 table.root:before{display:none;} #person .person_direct #step1 table.root_wife{margin-top:20px;} #person .person_direct #step1 table.root_wife tr th{background-color:#eee6ce;} #person .person_direct .person_photo{width:250px;} #person .person_direct .person_photo img{max-width:150px;} #person .person_direct .person_info{width:calc(100% - 290px);} @media (max-width: 1480px) { #person .person_direct .person_photo{text-align:center;float:none;width:100%;} #person .person_direct .person_info{float:none;width:100%;margin-top:30px;} } @media (max-width: 1199px) { #person .person_direct .person_info{margin-bottom:30px;} } /*계보*/ .all_history{min-height:300px;padding:10px;background-color: #3f3f3f;border-radius: .3rem;} .all_history .fst{padding:10px 0;display:inline;width:80px; background: rgba(228,228,228,1); background: -moz-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(228,228,228,1)), color-stop(47%, rgba(240,240,240,1)), color-stop(100%, rgba(246,246,246,1))); background: -webkit-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%); background: -o-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%); background: -ms-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%); background: linear-gradient(to right, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%);color: #565e6b;-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);}/*세*/ .all_history .sp{background:#f1a558;color:#fff;-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);} /*선택된세대*/ /*.all_history .sp {position: relative;} .all_history .sp::before {content: "";position: absolute;top: 0;bottom: 0;left: 50%;width: 1px;background-color: #e5e7eb;transform: translateX(-50%);} */ .all_history td > div{font-weight: 700;font-size:15px;float:left;margin:0 0 10px 0;text-align:center;background:#568fc0;padding:10px 0;;width:150px;height: 48px;border:2px solid #fff;color:#fff;border-radius: 6px;-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);}/*기본*/ .all_history td > div a{color:#fff;}/*기본*/ .all_history .jick_line{position:relative;min-width:20px;} .all_history .jick_line .lineline{position:absolute;top:20px;left:0;width:100%;height:1px;background-color:#959595;} .all_history .jick_bgline {position: relative;} .all_history .jick_bgline::before {content: "";position: absolute;top: 0;bottom: 0;left: 50%;width: 1px;background-color: #e5e7eb;transform: translateX(-50%);} .all_history .jick_bgline .next{position:relative;} .all_history .jick_bgline .next:before{content:'';display:block;position:absolute;bottom:-13px;left:50%;width:1px;height:12px;background-color:#959595;} .gen-container {display: flex; overflow: hidden; width: 100%;min-height: calc(100vh - 90px);} .fixed-generations {width: 101px; flex-shrink: 0; padding-top: 5px; background-color: #545454;box-sizing: border-box;overflow-y: auto;} .fixed-generations .generation-item {height: 58px; display: flex;align-items: center; justify-content: center; box-sizing: border-box;} .fixed-generations .generation-item .inner {padding:10px 0;width:80px;height:48px;border-radius: 6px;text-align:center;background: rgba(228,228,228,1);background: -moz-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(228,228,228,1)), color-stop(47%, rgba(240,240,240,1)), color-stop(100%, rgba(246,246,246,1)));background: -webkit-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%);background: -o-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%);background: -ms-linear-gradient(left, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%);background: linear-gradient(to right, rgba(228,228,228,1) 0%, rgba(240,240,240,1) 47%, rgba(246,246,246,1) 100%);color: #565e6b;-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);box-shadow: 0 3px 4px 0 rgba(0,0,0,.2);}/*세*/} .fixed-generations .generation-item:last-child {border-bottom: none;} .scrollable-content {flex-grow: 1; overflow-x: auto; overflow-y: auto;-webkit-overflow-scrolling: touch;background-color: #686868;} .all_history {overflow: visible;border-radius:0;background-color: #686868;} .all_history table {width: fit-content;border-collapse: collapse; min-width: 100%; } #root_row {height: 38px;} .jick_blank {} .jick_line {width: 30px;min-width: 30px;} .jick_bgline {width: 101px;min-width: 101px;} .next {width: 101px; min-width: 101px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .next a {display: block; padding: 0 5px;color: #fff; text-decoration: none;} /*계보 - 인물이미지*/ .fixed-generations.people .generation-item .inner {height: 128px;} .fixed-generations.people .generation-item {height: 138px;} .all_history.people td > div.next {height: 128px;} .all_history.people td > div.next .profile img{width: 45%;display:inline-block;margin-top:5px;border-radius:5px;} .all_history.people td > div.next .profile img.male{margin-right:5px;} @media (max-width: 1199px) { .all_history{clear:both;overflow:auto;margin:0 ;width: 100%;} .all_history .fst{padding:10px 0;display:inline;} .all_history td > div{font-size:.9rem;} } /* ------------------- 사진 ----------------- */ .photo_viewBox{text-align:center;} .photo_detailBox{} .photo_smallList{} .photo_button {margin-top:20px;text-align:center;} #photoModDt{display:inline-block;} .photoImg_box .img-area{position:relative;border:2px solid #eee;text-align:center;height:455px;overflow:hidden;} .photoImg_box .img-area .inner{width: 100%; height: 100%; background: #fff; display: flex; justify-content: space-around; align-items: center;} .photoImg_box .img-area .inner img{max-height:100%;max-width:100%;} @media ( max-width : 991px) { .photoImg_box .img-area{height:400px;} } /*이미지 슬라이드*/ .owl-carousel .owl-nav .owl-prev{padding: 1px 8px 3px 5px;position:absolute;top:15px;left:-50px;color:#fff;} .owl-carousel .owl-nav .owl-next{padding: 1px 5px 3px 8px;position:absolute;top:15px;right:-50px;color:#fff;} .owl-carousel .owl-nav .owl-prev:before{font-family: 'themify';content: "\e64a";color:#7a7a7a;font-size:2rem;} .owl-carousel .owl-nav .owl-next:before{font-family: 'themify';content: "\e649";color:#7a7a7a;font-size:2rem;} .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative} .owl-carousel{display:none;width:100%;z-index:1} .owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden} .owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0} .owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)} .owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)} .owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none} .owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none} .no-js .owl-carousel,.owl-carousel.owl-loaded{display:block} .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit} .owl-carousel.owl-loading{opacity:0;display:block} .owl-carousel.owl-hidden{opacity:0} .owl-carousel.owl-refresh .owl-item{visibility:hidden} .owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel.owl-grab{cursor:move;cursor:grab} .owl-carousel.owl-rtl{direction:rtl} .owl-carousel.owl-rtl .owl-item{float:right} .owl-carousel .animated{animation-duration:1s;animation-fill-mode:both} .owl-carousel .owl-animated-in{z-index:0} .owl-carousel .owl-animated-out{z-index:1} .owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}} .owl-height{transition:height .5s ease-in-out} .owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease} .owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0} .owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d} .owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000} .owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease} .owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)} .owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none} .owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease} .owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} .owl-theme .item{border:1px solid #eee;margin:0 5px 10px 5px;overflow:hidden;display: block;color: #000;position: relative;height: 80px;overflow: hidden;-webkit-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;} .owl-theme .item img{width:100%;position: absolute; top: 50%; transform: translateY(-50%);-webkit-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;} .owl-theme .item.active {border:2px solid #36A3D4;} @media only screen and (max-width: 1190px) { .owl-carousel .owl-nav .owl-prev{padding: 1px 8px 3px 8px;top:10px;left:-35px;font-size:0;} .owl-carousel .owl-nav .owl-next{padding: 1px 8px 3px 8px;top:10px;right:-35px;font-size:0;} } /* ------------------- 묘 ----------------- */ .map_searchBox{padding:0 10px !important; margin:0 !important; position:absolute;top:15px; left:0; height: calc(100% - 55px)!important; border-right:1px solid #ddd;background-color:#f8f9f9;max-width:350px; box-sizing:border-box; z-index:99; } .map_searchBox .map_info{position:relative;height:100%;padding:10px 0;} .map_searchBox .map_close{position:absolute;top:50%;right:-60px;width:50px;height:55px;background-color: #f8f9f9;color: #4169e1;border:1px solid #ddd;font-size:2rem;padding:5px 2px 2px;border-top-right-radius:7px;border-bottom-right-radius:7px;} .map_searchBox .mapInner{overflow:auto;height:100%;padding:20px 0;} .map_searchBox .map_Box {width:100%;margin-bottom:30px;} .map_searchBox .map_Box h2{ font-family: 'webfont';font-size:1.2rem;font-weight:600;} .map_searchBox .map_Box h2 .member{font-size:1rem;display:block;font-weight:300;margin-top:15px;} .map_searchBox .tableStyle_02 {margin:0 0 30px;} .map_searchBox .tableStyle_02 table::before{display:none;} .map_searchBox .tableStyle_02 tbody td{ font-family: 'webfont';border:1px solid #cdc7bf;padding:5px 0;} .map_searchBox .tableStyle_02 thead th{padding:5px 0;} .map_searchBox .tableStyle_02 thead th.num{color:#fff;background-color:#64787c;border:1px solid #405755;border-top:5px solid #405755;border-left:none;} .map_searchBox .tableStyle_02 thead th.name{color:#fff;background-color:#00c8c6;border:1px solid #00aba4;border-top:5px solid #00aba4;} .map_searchBox .tableStyle_02 thead th.link{color:#fff;background-color:#ffac00;border:1px solid #ff9400;border-top:5px solid #ff9400;border-right:none;} .map_searchBox label{font-size:1.1rem;display:none;} .map_searchBox input{border-radius:7px;margin-bottom:5px;padding:5px;background-color:#fff;} .map_searchBox.close{ left:-350px; } .map_searchBox .addressSearch{margin-bottom:30px;border-top: 1px solid #cfcfcf;padding-top: 30px;} .map_searchBox .addressSearch h3{position:relative; height: 38px;line-height: 38px;} .map_searchBox .addressSearch h3 .title-function{position:absolute;top:0;right:0;text-align:right;} .map_searchBox .nameCemetry{margin-bottom:30px;border-top: 1px solid #cfcfcf;padding-top: 30px;} .map_searchBox .nameCemetry h3 {position:relative; height: 38px;line-height: 38px;} .map_searchBox .nameCemetry h3 .title-function{position:absolute;top:0;right:0;text-align:right;} #addr_list{margin-bottom:30px;} .map_position{height:1000px; padding:0 !important; margin:0 !important;} @media (max-width:768px) { .map_searchBox{width:100%;max-width:100%;height: auto !important;top:-1px;} .map_searchBox .map_Box {margin-bottom:10px;} .map_searchBox .map_Box .tableStyle_02{margin-bottom:15px;} .map_searchBox .map_info{height:480px;overflow:visible;} .map_searchBox .map_info .mapInner { height: 470px;padding:10px 0;} .map_searchBox .map_info .map_close {bottom: -45px; right: 50%;top: auto; border-radius: 0;border-bottom-left-radius:5px; border-bottom-right-radius:5px; margin-right: -25px;height: 45px;line-height: 40px;} .map_searchBox .map_info .map_close .ti-angle-left:before { content: "\e648";} .map_searchBox.close {left: 0;top: -410px;opacity:1;} .map_searchBox.close .map_info .map_close .ti-angle-right:before {content: "\e64b";} .map_position { height: 1000px;} .inner_content.mapOver{overflow:hidden;} .map_searchBox .addressSearch{margin-bottom:15px;padding-top: 15px;} .map_searchBox .nameCemetry{margin-bottom:15px;padding-top: 15px;} #addr_list{margin-bottom:15px;} } /* ------------------- 통계 ----------------- */ #chart01 , #chart02 , #chart03, #chart04, #chart05 {border-radius: 15px; border: 1px solid #E1E6E9; background: #FFFFFF; width: 100%;height: 300px; margin-top:20px;padding: 10px; } /* ------------------- 촌수계산 ----------------- */ .chonsu_View {border-radius: 5px; border: 2px solid #C9CED1; background: #FFFFFF; width: 80%; max-width: 1150px; padding: 20px;margin: 30px auto 0;} .chonsu_View table tr td{text-align:center;} .chonsu_View .gebo_se{padding: 5px 0;width: 70px;color: #565e6b;height:45px;margin-right:20px;} .chonsu_View .chonsu_data1{height:45px;color:#fff;} @media (max-width: 1199px) { .chonsu_View { width: 100%; overflow:auto;} } /* ------------------- 계촌법 ----------------- */ .diergram_box{overflow:auto;} .diergram_box .inner{width: 100%;margin: 0 auto;min-width: 700px;} @media (max-width: 1199px) { .diergram_box{border:1px solid #ddd; padding: 20px;} } /* ------------------- 연대,관작 대조표 ----------------- */ .danki{background-color:#adc9e0;} .seki{background-color:#ade0dd;} .n_tb2{margin:0;overflow: auto;display:-webkit-flex;display:flex;flex-flow: row wrap;justify-content: space-between;} .n_tb2 .inner{width:33.3%;padding:0 5px 40px;} @media (max-width: 1280px) { .n_tb2 .inner{width:50%;} } @media (max-width: 768px) { .n_tb2{display:block;} .n_tb2 .inner{width:100%;} } /* ------------------- tts 프로그램 ----------------- */ .button-group {display: flex;margin-top: 15px;flex-wrap: wrap;} .permission-box button, .button-group button {background-color: #007bff; color: white;border: none;border-radius: 8px; padding: 12px 20px; font-size: 0.95em;cursor: pointer;transition: background-color 0.25s ease, transform 0.1s ease; /* 부드러운 전환 효과 */box-shadow: 0 2px 4px rgba(0,0,0,0.1);} .button-group button.bg-gray-200 {background-color: #616161 !important;} .button-group button:hover {background-color: #0056b3; /* 호버 시 버튼 색상 */transform: translateY(-1px); /* 살짝 위로 이동 */} .button-group button:active {transform: translateY(0px); /* 클릭 시 원래 위치로 */} .permission-box button:disabled, .button-group button:disabled {background-color: #b0bec5; /* 비활성화 버튼 색상 */cursor: not-allowed;box-shadow: none;transform: none;} .status {font-size: 0.9em; /* 상태 메시지 폰트 크기 */color: #555; /* 상태 메시지 색상 */min-height: 1.5em;background-color: #e9ecef; /* 상태 메시지 배경 */padding: 8px 12px;border-radius: 6px;display: inline-block; /* 내용만큼만 너비 차지 */} .permission-box {background-color: #fff9c4; /* 권한 요청 박스 배경색 */border: 1px solid #fbc02d; /* 권한 요청 박스 테두리 */border-radius: 8px;padding: 20px;text-align: center;} .permission-request-button {background-color: #f57c00; /* 권한 요청 버튼 색상 */margin-bottom: 10px;} .permission-request-button:hover {background-color: #e65100;} .permission-status {margin: 0;font-size: 0.9em;color: #3e2723; /* 권한 상태 텍스트 색상 */} /* ------------------- 한자사전 ----------------- */ .tab_box{} .tab_box ul li{background: #afafaf;color:#fff;width: 19%;max-width: 120px;text-align:center;padding:10px;display:inline-block;line-height:1.5;} .tab_box ul li a{color:#161616;font-size:1.1rem;display:block;width:100%;height:100%;text-decoration:none;} .tab_box ul li.select{background: #ffd647;color:#000;} .tab_box ul li.select a{color:#000;font-weight:600;} .tab_content { display: none; margin-top: 15px; } .tab_content.active { display: block; } .hanja_book{background: #fff;padding:20px;} .hanja_book h3{} .hanja_book input[type='text']{width: 100%;height: 45px;padding: 0 0 0 10px;font-size: 20px;background-color: #fff;border: 1px solid #ddd;} .hanja_book select{width: 100%;height: 45px;padding: 0 0 0 10px;font-size: 20px;background-color: #fff;border: 1px solid #ddd;} .hanja_book .input_area {display: flex;flex-flow: row wrap;justify-content: space-between;align-content: center;} .hanja_book .input_area .item {position: relative;width:36%;} .hanja_book .input_area .item.btnArea {width: 25%;text-align:right;} .hanja_book .input_area .item label{width: 70px;font-size: 1.1rem;position: absolute;top: 0;left: 0;font-weight: 600;text-align: right;line-height: 45px;} .hanja_book .input_area .item .inner {padding-left:75px; line-height: 45px; font-size: 1.1rem;} .hanja_book .input_area .item button.del{background: #666666;color: #fff;text-align: center;font-size: 1.1rem;font-weight: 600;padding: 10px 25px;} .hanja_book .input_area .item button.del img{vertical-align:middle;} .hanja_book .input_area .item button.search{background: #ffd647;color: #333;text-align: center;font-size: 1.1rem;font-weight: bold;padding: 10px 25px;} #buhanja{margin:20px 0;} #bhsu-content{margin:20px 0 ;} #hanja-content{margin:20px 0 ;} #un-content{margin:20px 0 ;} /*한자표*/ .han_tb{overflow: auto;height:800px;border-top: 3px solid #828282;} .han_tb table{width:100%;border-top:1px solid #c1c1c1;border-bottom:1px solid #c1c1c1;height: 290px; min-width: 500px;overflow-x: scroll;} .han_tb th{font-size:15px;background:#f3f3f3;padding:10px 0;border-bottom:1px solid #c1c1c1;position: -webkit-sticky;position: sticky;top:0;} .han_tb td{font-weight:bold;font-size:15px;text-align:center;padding:10px 0;border-bottom:1px solid #c1c1c1} .han_tb td.sp{background:#f6f3e9;} #busuTable{} #busuTable table{width:100%;} #busuTable table tr td{font-size: 20px;font-weight:bold;border-bottom:1px solid #ddd;border-top:1px solid #ddd;border-right:1px dashed #ddd;padding:10px 20px;text-align:center;cursor:pointer;} #busuTable table tr td:hover{background-color:#efefef;} #busuTable table tr td:last-child{border-right:none;} .busuUl > div{display: inline-block;padding: 10px 20px;width: 80px;height: 90px;border: 1px solid #ddd;font-size: 20px;text-align: center;margin-right: 3px;font-weight: bold;} .busuUl > div:hover{background-color:#efefef;} .busuUl > div a{display:block;} @media (max-width: 991px) { .hanja_book .input_area .item {width:32%;} .hanja_book .input_area .item.btnArea {width: 36%;} #busuTable{overflow-x: scroll;} .han_tb{overflow-x: scroll;} .han_tb table{width:1000px;border-top:1px solid #c1c1c1;border-bottom:1px solid #c1c1c1} .han_tb th{font-size:1em;background:#f3f3f3;padding:10px 0;border-bottom:1px solid #c1c1c1} .han_tb td{font-weight:bold;font-size:1em;text-align:center;padding:10px 0;border-bottom:1px solid #c1c1c1} .han_tb td.sp{background:#f6f3e9;} } @media (max-width: 768px) { .hanja_book{padding:10px;} .hanja_book .input_area .item {width:100%;margin-bottom: 20px;} .hanja_book .input_area .item.btnArea {width: 100%;} } /* ------------------- 행적보기 ----------------- */ .all_history table.record_table{margin-bottom:20px;position:relative;min-width: auto;width: 100%;max-width:800px !important;border: 2px solid #1c1c1c;} .all_history table.record_table:after{position:absolute;width:1px;height:20px;left:50%;bottom:-20px;content:'';background-color:#fff;} .all_history table.record_table:last-child:after{display:none;} .all_history table.record_table tr th{background-color:#568fc0;color:#fff;border-bottom:1px solid #535353;border-right:1px solid #535353;padding:3px 10px;text-align:center;} .all_history table.record_table tr th:last-child{border-right:none;} .all_history table.record_table tr td{background-color:#fff;border-right:1px solid #535353;padding:5px 10px;} .all_history table.record_table tr td:last-child{border-right:none;} .all_history table.record_table tr td.center{text-align:center;} .all_history table.record_table:hover tr th{background-color:#f1a558;} .all_history table.record_table:hover tr td{background-color:#efefef;}