@charset "utf-8";
@font-face{font-family:'Spoqa Han Sans Neo';
    src:local('Spoqa Han Sans Neo Thin'),
    local('SpoqaHanSansNeo-Thin'),
    url("/css/font/SpoqaHanSansNeo-Thin.woff2") format('woff2'),
    url("/css/font/SpoqaHanSansNeo-Thin.woff") format('woff');
    font-weight:200}
@font-face{font-family:'Spoqa Han Sans Neo';
    src:local('Spoqa Han Sans Neo Light'),local('SpoqaHanSansNeo-Light'),
    url("/css/font/SpoqaHanSansNeo-Light.woff2") format('woff2'),
    url("/css/font/SpoqaHanSansNeo-Light.woff") format('woff');
    font-weight:300}
@font-face{font-family:'Spoqa Han Sans Neo';
    src:local('Spoqa Han Sans Neo Regular'),local('SpoqaHanSansNeo-Regular'),
    url("/css/font/SpoqaHanSansNeo-Regular.woff2") format('woff2'),
    url("/css/font/SpoqaHanSansNeo-Regular.woff") format('woff');
    font-weight:400}
@font-face{font-family:'Spoqa Han Sans Neo';
    src:local('Spoqa Han Sans Neo Medium'),local('SpoqaHanSansNeo-Medium'),
    url("/css/font/SpoqaHanSansNeo-Medium.woff2") format('woff2'),
    url("/css/font/SpoqaHanSansNeo-Medium.woff") format('woff');
    font-weight:500}
@font-face{font-family:'Spoqa Han Sans Neo';
    src:local('Spoqa Han Sans Neo Bold'),local('SpoqaHanSansNeo-Bold'),
    url("/css/font/SpoqaHanSansNeo-Bold.woff2") format('woff2'),
    url("/css/font/SpoqaHanSansNeo-Bold.woff") format('woff');
    font-weight:700}


@font-face { font-family: 's-core-dream'; font-weight: 200; src: url('/css/font/scdream2.woff');  src: local(※), url('/css/font/scdream2.woff2') format('woff'); }
@font-face { font-family: 's-core-dream'; font-weight: 400; src: url('/css/font/scdream4.woff');  src: local(※), url('/css/font/scdream4.woff2') format('woff'); }
@font-face { font-family: 's-core-dream'; font-weight: 500; src: url('/css/font/scdream5.woff');  src: local(※), url('/css/font/scdream5.woff2') format('woff'); }
@font-face { font-family: 's-core-dream'; font-weight: 600; src: url('/css/font/scdream7.woff');  src: local(※), url('/css/font/scdream7.woff2') format('woff'); }
@font-face { font-family: 's-core-dream'; font-weight: 700; src: url('/css/font/scdream9.woff');  src: local(※), url('/css/font/scdream9.woff2') format('woff'); }


/*** common ***/
.fl    { float:left !important; }
.fr    { float:right !important; }
.fn    { float:none !important; }
.cb    { clear:both !important; }
.pr    { position:relative !important}
.ac    { text-align:center !important; }
.al    { text-align:left !important; }
.ar    { text-align:right !important; }
.vt    { vertical-align:top !important; }
.vm    { vertical-align:middle !important; }
.vb    { vertical-align:bottom !important; }
.jf    { text-align:justify !important; }
.oh    { overflow:hidden !important; }
.oh_y  { overflow-y:hidden !important;}
.cp    { cursor:pointer !important; }
.di    { display:inline !important; }
.dib   { display:inline-block !important; }
.dn    { display:none !important; }
.db    { display:block !important; }
.vv    { visibility:visible !important; }
.vh    { visibility:hidden !important; }
.bn    { border:none !important; }
.bbn   { border-bottom:none !important; }
.brn   { border-right:none !important; }
.bgn   { background:none !important; }
.fb    { font-weight:bold !important; }
.BDB   { border-bottom:2px solid #d1d1d1 !important}
.zoom1 { *zoom:1 }

/* Margin */
.MN0 { margin:0 !important; }
.ML2 { margin-left:2px !important; }
.ML4 { margin-left:4px !important; }
.ML5 { margin-left:5px !important; }
.ML8 { margin-left:8px !important; }
.ML10 { margin-left:10px !important; }
.ML15 { margin-left:15px !important; }
.ML20 { margin-left:20px !important; }
.ML24 {margin-left:24px}
.ML30 { margin-left:30px; }
.ML50 { margin-left:50px !important; }
.ML57 { margin-left:57px; }
.ML80 { margin-left:80px; }
.ML120 { margin-left:120px; }
.ML200 { margin-left:200px; }
.ML213 { margin-left:213px; }
.ML293 { margin-left:293px; }
.MR5 {margin-right:5px}
.MR10 { margin-right:10px; }
.MR15 { margin-right:15px; }
.MR16 { margin-right:16px; }
.MR20 { margin-right:20px; }
.MR30 { margin-right:30px; }
.MR37 { margin-right:37px; }
.MR40 { margin-right:40px; }
.MR60 { margin-right:60px; }
.MR72 { margin-right:72px; }
.MT2 { margin-top:2px !important; }
.MT4 { margin-top:4px !important; }
.MT5 { margin-top:5px !important; }
.MT7 { margin-top:7px !important; }
.MT10 { margin-top:10px !important; }
.MT15 { margin-top:15px; }
.MT20 { margin-top:20px !important; }
.MT22 { margin-top:22px; }
.MT25 { margin-top:25px; }
.MT28 { margin-top:28px; }
.MT30 { margin-top:30px !important; }
.MT35 { margin-top:35px !important; }
.MT40 { margin-top:40px !important; }
.MT45 {margin-top:45px !important}
.MT50 { margin-top:50px; }
.MT55 { margin-top:55px; }
.MT60 { margin-top:60px !important; }
.MT65 { margin-top:65px !important; }
.MT70 { margin-top:70px; }
.MT80 { margin-top:80px !important; }
.MT120 { margin-top:120px; }
.MT267 {margin-top:267px !important}
.MB0 { margin-bottom:0 !important}
.MB5 { margin-bottom:5px; }
.MB10 { margin-bottom:10px !important; }
.MB12 {margin-bottom:12px !important}
.MB15 { margin-bottom:15px; }
.MB20 { margin-bottom:20px !important; ; }
.MB26 { margin-bottom:26px !important; ; }
.MB30 { margin-bottom:30px !important; }
.MB40 { margin-bottom:40px !important; }
.MB50 {margin-bottom:50px}
.MB55 { margin-bottom:55px; }
.MB60 { margin-bottom:60px; }
.MB70 {margin-bottom:70px !important}
.MB180 {margin-bottom:180px !important}
.MT10MB100 {margin:10px 0 100px 0;}
.minusT40 {margin-top:-40px}

/* padding_top */
.PN0 {padding:0 !important}
.PT0 {padding-top:0 !important}
.PT5 { padding-top:5px !important;}
.PT7 { padding-top:7px;}
.PT10 { padding-top:10px;}
.PT12 { padding-top:12px;}
.PT15 { padding-top:15px;}
.PT20 { padding-top:20px !important;}
.PT25 { padding-top:25px;}
.PT27 { padding-top:27px;}
.PT30 { padding-top:30px;}
.PT37 { padding-top:37px;}
.PT38 { padding-top:38px;}
.PT43 { padding-top:43px;}
.PT40 { padding-top:40px !important;}
.PT50 { padding-top:50px !important;}
.PT65 { padding-top:65px !important;}
.PT75 { padding-top:75px;}

/* padding_left */
.PL0 { padding-left:0px !important;}
.PL3 { padding-left:3px;}
.PL5 { padding-left:5px;}
.PL8 { padding-left:8px;}
.PL10 { padding-left:10px;}
.PL20 { padding-left:20px !important;}
.PL23 { padding-left:23px;}
.PL25 { padding-left:25px;}
.PL30 { padding-left:30px;}
.PL40{ padding-left:40px;}
.PL45{ padding-left:45px;}
.PL50{ padding-left:50px;}
.PL55{ padding-left:55px;}
.PL60 { padding-left:60px;}
.PL65 { padding-left:6px;}
.PL100 { padding-left:100px;}

/* padding_right */
.PR6 { padding-right:6px;}
.PR10 { padding-right:10px;}
.PR20 { padding-right:20px;}
.PR35 { padding-right:35px;}
.PR40 { padding-right:40px;}
.PR60 { padding-right:60px;}
.PR72 { padding-right:72px;}

/* padding_bottom */
.PB0 {padding-bottom:0 !important}
.PB10 { padding-bottom:10px;}
.PB13 { padding-bottom:13px;}
.PB15 { padding-bottom:15px !important}
.PB20 { padding-bottom:20px !important;}
.PB23 { padding-bottom:23px !important;}
.PB30 { padding-bottom:30px !important;}
.PB40 { padding-bottom:40px;}
.PB50 {padding-bottom:50px }
.PB65 { padding-bottom:65px;}
.PB70 { padding-bottom:70px;}
.PB110 { padding-bottom:110px;}

/* padding_all */
.PT10L5 { padding:10px 0 0 5px !important;}
.PTB10 {padding:10px 0 !important;}
.PTBL {padding:20px 0 20px 20px !important;}



::-webkit-scrollbar {width: 20px; height: 12px;  }
::-webkit-scrollbarno-button:start:decrement{display: block; width: 20px;height: 12px;
    background: rgba(46,136,204,0.3); border-radius: 5px;}
::-webkit-scrollbar-track {  background: rgba(46,136,204,0.3); border-radius: 3px;}
::-webkit-scrollbar-thumb {  background: rgb(108,173,222); border-radius:5px;}



/* Reset */
* {outline:0 !important;}
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0; font-family: 'Spoqa Han Sans Neo','s-core-dream', 'Malgun Gothic', '맑은 고딕','arial','sans-serif';}
html, body{width:3840px;}
body{width:3840px; background:#fff;}
body,input,select,textarea,button {border:none;font-size:12px; font-family:'Spoqa Han Sans Neo', sans-serif;color:#000;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
img,fieldset{border:0;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle; margin: 0;
    padding: 0; -webkit-text-size-adjust: none;}
.hide,caption,legend{line-height:0;font-size:0px;overflow:hidden;}
hr{display:none;}
main,header,section,nav,footer,aside,article,figure{display:block;}
a{color:#000;text-decoration:none;}

.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}

/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */


#Wrap{width: 3840px; height: 2160px; position: relative; margin:0; overflow:hidden; background: url(../images/common/bg.jpg) no-repeat; box-sizing: border-box;}
nav{float: left; width: 760px; height: 2160px; background: #12256d; background-image: -webkit-gradient(linear, left top, right top, color-stop(.34, rgba(230,237,241,.05)),
color-stop(.67, rgba(230,237,241,0))); -webkit-background-size: 10px 10px;}

.h1_organ{text-align: center; font-size: 90px; font-family: 's-core-dream'; font-weight: 600; color: #fff; padding: 72px 0 0 80px; background: url(/images/common/kcc_img.png) no-repeat 20% 80px; margin-left: 35px;}

.gnb_list {margin: 50px 30px 0; display: flex; flex-wrap: wrap;}
.gnb_list li{margin: 0 15px 35px; width: 320px;}
.gnb_list li a{color: #3A474D;
    font-family: 's-core-dream'; font-weight: 600; font-size: 35px; text-shadow: 0px 1px #fff, 0px -1px #262F33;}
.gnb_btn{width: 320px; height: 110px; border-radius: 15px;
    -webkit-box-shadow:
            0px 8px rgba(128,128,128,1), /* gradient effects */
            0px 9px rgba(118,118,118,1),
            0px 10px rgba(108,108,108,1),
            0px 11px rgba(98,98,98,1),
            0px 12px rgba(88,88,88,1),
            0px 13px rgba(78,78,78,1),
            0px 20px 6px -1px rgba(72,106,190,1); /* shadow */
    position: relative;
}
.gnb_btn::after{content: ''; position: absolute; top:50%; right: 20px; background: url(../images/common/gnb_icon.png) no-repeat; width: 19px; height: 31px; transform: translateY(-15px)}
.gnb_btn span{width: 320px; height: 110px; background-color: #E8E8E8;
    background-image:
        /* gloss gradient */
            -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(50%,rgba(255,255,255,0)),
                    color-stop(50%,rgba(255,255,255,0.3)),
                    color-stop(100%,rgba(255,255,255,0.2))),

                /* dark outside gradient */
            -webkit-gradient(
                    linear,
                    left top,
                    right top,
                    color-stop(0%,rgba(210,210,210,0.3)),
                    color-stop(20%,rgba(210,210,210,0)),
                    color-stop(80%,rgba(210,210,210,0)),
                    color-stop(100%,rgba(210,210,210,0.3))),

                /* light inner gradient */
            -webkit-gradient(
                    linear,
                    left top,
                    right top,
                    color-stop(0%,rgba(255,255,255,0)),
                    color-stop(20%,rgba(255,255,255,0.5)),
                    color-stop(80%,rgba(255,255,255,0.5)),
                    color-stop(100%,rgba(255,255,255,0))),

                /* diagonal line pattern */
            -webkit-gradient(
                    linear,
                    0% 100%,
                    100% 0%,
                    color-stop(0%,rgba(255,255,255,0)),
                    color-stop(40%,rgba(255,255,255,0)),
                    color-stop(40%,#D2D2D1),
                    color-stop(60%,#D2D2D1),
                    color-stop(60%,rgba(255,255,255,0)),
                    color-stop(100%,rgba(255,255,255,0)));

    -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */

    -webkit-background-size: 100%, 100%, 100%, 5px 5px;
    -webkit-border-radius: 15px;
    -webkit-transition: -webkit-transform .1s ease-in-out;
    box-sizing: border-box; padding: 0 20px;
    display: flex; align-items: center;
}
.gnb_btn.active {background-color: #5eb8fa;
    -webkit-box-shadow:
            0px 8px rgba(128,128,128,1),
            0px 9px rgba(118,118,118,1),
            0px 10px rgba(108,108,108,1),
            0px 11px rgba(98,98,98,1),
            0px 12px rgba(88,88,88,1),
            0px 13px rgba(78,78,78,1),
            0px 20px 6px 0px rgba(57,90,170,.6); /* shadow */}
.gnb_btn.active span{background: #5eb8fa;
    border-radius: 15px; color: #fff;
    box-shadow: 0 0 5px #6cc7fe,}


/* 내용 */
section{float: left; width: 3080px; height: 2160px; position: relative; padding: 60px 0px; box-sizing: border-box;}
section .title{height: 110px; text-align: center;}
section .title span{color: #1f3674; font-size: 100px; font-family: 's-core-dream'; font-weight: 700; position:relative;  line-height: 1;}
section .title span::before{content: ''; width: 340px; height: 4px; background: #243667; left: -400px; bottom: 20px; position: absolute;}
section .title span::after{content: ''; width: 340px; height: 4px; background: #243667; right: -400px; bottom: 20px; position: absolute;}

article{padding: 0 40px; width: 100%; height: 1960px; overflow-y: scroll; box-sizing: border-box;}

.rank_tit{font-size: 50px; font-family: 's-core-dream'; font-weight: 600; color: #1f3674; margin: 20px; text-align: left; line-height: 1;}

.card_list ul{display: flex; flex-wrap: wrap;}
.card_list .card_name{ color:white; font-size: 38px; display: flex; justify-content: center; align-items: center; font-family: 's-core-dream'; font-weight: 600; background: url(../images/common/bg_card.png) no-repeat;}
.card_list li{border-radius: 20px; background: #fff; border-width : 3px; border-style:solid; width: 350px; margin-right: 18px; margin-bottom: 30px; position: relative; height: 190px; box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.2);}
.card_list li .Senior_info{position: absolute; width: 120px; height: 40px; bottom: -25px; left: 10px; text-align: center; display: flex;}

.card_list li a{display: block; width: 100%; height: 100%;}
.card_list li:nth-child(8n){margin-right: 0;}
.card_tit { height: 42px; position: relative; width: 100%; border-radius: 17px 17px 0 0; background: #04264c; font-size: 16px; color: #fff; font-family: 's-core-dream'; font-weight: 600; }
.card_tit .rank_txt { position: absolute; width: 120px; height: 50px; top: -5px; left: -5px; display: flex; border-radius: 20px 0 20px 0; color: #fff; justify-content: center; align-items: center; }
.card_tit .belong_txt { font-size: 17px; margin-left: 130px; height: 42px; display: flex; align-items: center; line-height: 1.1; word-break: keep-all;}
.card_con{padding: 10px 12px; width: 100%; box-sizing: border-box;  overflow: hidden;}
.card_con .thumb{width: 93px; height: 104px; position: relative; background: #f1f1f1; display: inline-block; z-index: 1; margin-top: 10px; border: 2px solid #000;}
.card_con .thumb::after{content: ''; position: absolute; width: 93px; height: 104px; top:5px; left: 5px; background: url(../images/common/box_type2_pattern.png); z-index: -1;}
.card_con .thumb img{width: 100%; height: 100%}
.card_con .txtWrap{overflow: hidden; display: inline-block; width: calc(100% - 115px); margin-left: 15px; vertical-align: top;}
.card_con .txtWrap dt{display: flex; height: 35px; align-items: center; margin-bottom: 10px;}
.card_con .txtWrap dt p { display: inline-block; font-size: 21px; font-weight: 700; width: 75px; position: relative; }
.card_con .txtWrap dt p::after{content: ''; width: 2px; height: 20px; background: #c6c6c6; top:6px; right: -10px; position: absolute; }
.card_con .txtWrap dt div { display: inline-block; position: relative;    padding-left: 20px;    width: 140px;    line-height: 1.1;    color: #5e5e5e;    font-size: 13px; }

.card_con .txtWrap dd{color: #2e2e2e; font-size: 16px; font-weight: 500; margin-top: 5px;}
.card_con .txtWrap dd strong{padding: 0px 2px; border-radius: 20px; width: 90px; background: #aaa; color: #fff; display: inline-block; margin-right: 15px; text-align: center; font-weight: 500;}
.card_con .vacuum_txt{display: flex; align-items: center; text-align: center;
    height: 120px; justify-content: center;}

.card_list .card_vacuum{ font-size: 35px; display: flex; justify-content: center; align-items: center; font-family: 's-core-dream'; font-weight: 600; background: url(../images/common/bg_card2.png) no-repeat;}

/* 계급장 색 */
.Blue_bg{background-color:#0151de}            /* 치안총감 */
.Red_bg{background-color: #fe3e33 }           /* 치안정감 */
.Orange_bg{background-color:#ffa401}          /* 치안감  */
.Purple_bg{background-color: #763dfe}         /* 경무관 */
.Yellow_bg{background-color: #ffc600}         /* 총경 */
.Gray_bg {background-color: #595b5d}          /* 공석 */

/* 연속참모 또는 서장기간’에 따라 구분 */
.Blue_border{border-color: #0151de }          /*  공 란 : 파랑 */
.Yellow_border{border-color: #ffc600 }        /*  6개월 미만 : 노랑 */
.Green_border{border-color: #44b863 }         /*  6개월 이상 1년 6개월 미만 : 녹색 */
.Red_border{border-color: #fe3e33 }           /*  1년 6개월 이상 : 빨강  */

/* 폰트 */
.Blue_color{color: #0151de}
.Red_color{color: #fe3e33}

/* 총경 기호 */
.hexicon{width:36px; height: 39px; display: flex; flex-wrap: nowrap; font-family: 's-core-dream'; position: relative; margin-right: 2px;}

/* 팝업 */
.pop_contents{width: 2300px; height: 1380px; position: relative; z-index: 99999; background: url(../images/common/pop_bg.png) no-repeat; border-radius: 80px; display: flex; flex-wrap: wrap;}
.pop_contents .close{position: absolute; bottom: -40px; right: -80px; z-index: 9999;}
.box01{width: 790px; height: 1380px; color: #fff; padding: 50px; box-sizing: border-box;}
.box01 > .txt01{font-size: 60px; text-align: center; margin-top: 200px;}
.box01 > .txt02{font-size: 80px; text-align: center; font-weight: 700}
.box01 .mem_img{width: 460px; height: 578px; border: 20px solid #fff; margin: 70px auto 0; background: #ddd}
.box01 .mem_img img{width: 100%; height: 100%}

.box02{width: 1510px; height: 1380px; padding: 60px 10px 0px 90px; box-sizing: border-box; position: relative; text-align: left;}
.box02 h1{display: inline-block; font-size: 45px; color: #000; font-family: 's-core-dream'; font-weight: 600; background-image: linear-gradient(transparent 50%, #5adfea 25%); line-height: 0.9; margin-bottom: 30px; }
.box02 .w50{display: flex; flex-wrap: wrap;}
.box02 .w50 > li{width: 50%; margin-bottom: 20px;}

.box02 .w100{display: flex; flex-wrap: wrap;}
.box02 .w100 > li{width: 100%; margin-bottom: 20px;}


.pop_info dl{width: 100%; display: flex; flex-wrap: wrap; align-items: center;}
.pop_info dl dt{width: 200px; color: #000; text-align:left; line-height: 1; font-size: 30px; position: relative; font-family: 's-core-dream'; font-weight: 600; padding-left: 25px;}
.pop_info dl dt::before{content: ''; width: 10px; height: 10px; background: #000; border-radius: 50%; top:15px; left: 0;  position: absolute;}
.pop_info dl dd{width: calc(100% - 300px);; background: rgba(255, 255, 255, 0.7); border-radius: 15px; min-height: 50px; color: #3a5b8b; padding: 0 20px; line-height: 50px; text-align: left; font-size: 30px; font-weight: 500; box-sizing: border-box;}
.pop_info dl dd.btn_b{background: none; padding: 0;}
.btn_1 {font-size: 30px; color: #fff; padding: 9px 29px; background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
    border-radius: 15px; box-shadow: inset 2px 2px 2px 0px rgb(255 255 255 / 50%), 7px 7px 20px 0px rgb(0 0 0 / 10%), 4px 4px 5px 0px rgb(0 0 0 / 10%);}
.btn_box{margin:50px auto 0; display: flex; justify-content: center;}
.btn_2{display: flex; justify-content: space-between; align-items: center;
    width: 480px; height: 90px; color: #fff; background:linear-gradient(-45deg, #0036f9, #0098ce);color:#fff; border-radius: 20px; padding-left: 50px; box-sizing: border-box; font-size: 30px; font-family: 's-core-dream'; font-weight: 600; position: relative; box-shadow: inset 2px 2px 2px 0px rgb(255 255 255 / 50%), 7px 7px 20px 0px rgb(0 0 0 / 10%), 4px 4px 5px 0px rgb(0 0 0 / 10%);}
.btn_2::after{content: ''; background: url(../images/common/icon_arrow.png) no-repeat; position: absolute; top: 28px;  right: 30px; width: 33px; height: 34px;}

.btn_3{font-size: 30px; color: #fff; padding: 9px 29px; background:linear-gradient(-45deg, #0036f9, #0098ce);
    border-radius: 15px; box-shadow: inset 2px 2px 2px 0px rgb(255 255 255 / 50%), 7px 7px 20px 0px rgb(0 0 0 / 10%), 4px 4px 5px 0px rgb(0 0 0 / 10%);}


/* 세부 경력 */
.pop_more_box{position: absolute; width: 850px; height: 1200px; border-radius: 20px; background: #fff; top: 20px; right: -50px; box-shadow: 0 20px 60px 0 rgb(14 42 90 / 55%); overflow: hidden; border: 2px solid #496bf3; z-index: 99999; }
.pop_more_box h2{height: 80px; width: 100%; text-align: center; font-size: 35px; color: #fff; font-family: 's-core-dream'; font-weight: 600; background: #496bf3; line-height: 80px;}
.pop_more_box .more_list{padding: 20px 25px 0; overflow-y: scroll; height: 1050px; margin-top: 10px; overflow-x: hidden;}
.pop_more_box .close2{position: absolute; right: 10px; top:10px}

.pop_more_box .more_list li{display: flex; justify-content: space-between; margin-top: 15px; position:relative;font-size: 25px; color: #242424; line-height: 1; width:100%; }
.pop_more_box .more_list li:before {width: 9px; height: 9px; background: #555555;
    border-radius: 50%; position: absolute; left: 0px; top: 8px; content: "";}
.pop_more_box .more_list li:first-child{margin-top: 0;}
.pop_more_box .more_list .txt_1{ word-break:break-all; line-height: 1.2; display: inline-block; width: 20%; text-align: left; margin-left: 35px; vertical-align: text-top;}
.pop_more_box .more_list .txt_2{ word-break:break-all; line-height: 1.2; display: inline-block; width: 70%; text-align: left; }


/* 계급별 임용일 */
.pop_more_box_2{position: absolute; width: 450px; height: 620px; border-radius: 20px; background: #fff; bottom: 150px; left: 545px; box-shadow: 0 20px 60px 0 rgb(14 42 90 / 55%); overflow: hidden; border: 2px solid #496bf3; z-index: 999; }
.pop_more_box_2 h2{height: 80px; width: 100%; text-align: center; font-size: 35px; color: #fff; font-family: 's-core-dream'; font-weight: 600; background: #496bf3; line-height: 80px;}
.pop_more_box_2 .more_list{padding: 20px 25px 0; overflow-y: hidden; height: 480px; margin-top: 10px; overflow-x: hidden;}
.pop_more_box_2 .close2{position: absolute; right: 10px; top:10px}

.pop_more_box_2 .more_list li{ margin-top: 20px; position:relative; font-size: 25px; color: #242424; line-height: 1; width:100%; }
.pop_more_box_2 .more_list li .dot{width: 9px; height: 9px; background: #555555; border-ra_2dius: 50%; position: absolute; left: 10px; top: 8px; }
.pop_more_box_2 .more_list li:before {width: 9px; height: 9px; background: #555555; border-ra_2dius: 50%; position: absolute; left: 10px; top: 8px; content: "";}
.pop_more_box_2 .more_list li:first-child{margin-top: 0;}
.pop_more_box_2 .more_list .txt_1{ word-break:break-all; line-height: 1; display: inline-block; width: 35%; text-align: left; margin-left: 35px;}
.pop_more_box_2 .more_list .txt_2{ word-break:break-all; line-height: 1; display: inline-block; width: 50%; text-align: left; margin-left: 20px;}

/* 기호 설명 팝업 */
.pop_more_box_3{position: absolute; width: 900px; height: 700px; border-radius: 20px; background: #fff; top: -100px; right: -250px; box-shadow: 0 20px 60px 0 rgb(14 42 90 / 55%); overflow: hidden; border: 2px solid #496bf3; z-index: 999; }
.pop_more_box_3 h2{height: 80px; width: 100%; text-align: center; font-size: 35px; color: #fff; font-family: 's-core-dream'; font-weight: 600; background: #496bf3; line-height: 80px;}
.pop_more_box_3 .more_list{padding: 20px 25px 0; overflow-y: hidden; height: 480px; margin-top: 10px; overflow-x: hidden;}
.pop_more_box_3 .close2{position: absolute; right: 10px; top:10px}

.pop_more_box_3 .more_list li{ margin-top: 20px; position:relative; font-size: 25px; color: #242424; line-height: 1; width:100%; }
.pop_more_box_3 .more_list li .dot{width: 9px; height: 9px; background: #555555; border-ra_2dius: 50%; position: absolute; left: 10px; top: 8px; }
.pop_more_box_3 .more_list li:before {width: 9px; height: 9px; background: #555555; border-ra_2dius: 50%; position: absolute; left: 10px; top: 8px; content: "";}
.pop_more_box_3 .more_list li:first-child{margin-top: 0;}
.pop_more_box_3 .more_list .txt{ display: inline-block; margin-left: 40px; width: 95%; text-align: left;}


.sidebar_btn{position: absolute;right: 55px;top: 45px;}

.btn_order{width: 240px;
    height: 90px;
    padding:0 40px;
    line-height: 90px;
    font-size: 40px;
    color: #fff;
    background-color: #ffc05a/*2ac1bc*/;
    border-radius: 56px;
    -webkit-box-shadow: 5px 15px 20px 0 rgba(111, 78, 45, 0.5);
    box-shadow: 0 20px 60px 0 rgba(90, 77, 14, 0.55);
    font-family: 's-core-dream'; font-weight: 600;
    display: inline-block;
}
.btn_order::after{content: ""; position: absolute; right: 38px; top: 30px; width: 44px; height: 24px;
    background-image: url(../images/common/img-btn-arrow.png); background-repeat: no-repeat; background-size: 100% auto;}

.sidebar_btn_02{position: absolute;right: 380px;top: 45px;}

.btn_order_02{width: 240px;
    height: 90px;
    padding:0 40px;
    line-height: 90px;
    font-size: 40px;
    color: #fff;
    background-color: #ffc05a/*ffc05a*/;
    border-radius: 56px;
    -webkit-box-shadow: 5px 15px 20px 0 rgba(111, 78, 45, 0.5);
    box-shadow: 0 20px 60px 0 rgba(90, 77, 14, 0.55);
    font-family: 's-core-dream'; font-weight: 600;
    display: inline-block;
}

.btn_order_02::after{content: ""; position: absolute; right: 38px; top: 30px; width: 44px; height: 24px;
 background-image: url(../images/common/img-btn-arrow.png); background-repeat: no-repeat; background-size: 100% auto;}


span#spn_counseling_name { display: inline-block; width:655px; height: 90px; top:150px; right: 50px; position: absolute;
    line-height: 90px; font-size: 40px; color: #fff; font-weight: 600; font-family: 's-core-dream'; margin: 0;
    background-color: #2ac1bc/*904fff*/; border-radius: 56px; -webkit-box-shadow: 5px 15px 20px 0 rgb(45 111 109 / 50%); box-shadow: 5px 15px 20px 0 rgb(45 111 109 / 50%); }
input#view_counseling_name {width:365px; height:68px; line-height:68px; font-family: 's-core-dream'; font-size:35px; font-weight:normal;
    margin: 10px 0 0 10px; background: rgba(255, 255, 255, 0.84); border-radius: 10px; padding-left: 20px;
}




#symbol_info { position: absolute; right: 50px; top: 150px; width: 900px; height: 1500px;
    border-radius: 20px; background: #fff; box-shadow: 0 20px 60px 0 rgba(90, 77, 14, 0.55);
    overflow: hidden; border: 2px solid #ffc05a; z-index: 999; }
#symbol_info h2{height: 80px; width: 100%; text-align: center; font-size: 35px; color: #fff;
    font-family: 's-core-dream'; font-weight: 600; background: #ffc05a; line-height: 80px; }
#symbol_info .more_list{padding: 30px 25px 0; overflow-y: hidden; height: 1350px; margin-top: 10px; overflow-x: hidden;}
#symbol_info .close2{position: absolute; right: 10px; top:10px}
#symbol_info h1{display: inline-block; font-size: 27px; color: #000; font-family: 's-core-dream'; font-weight: 600; background-image: linear-gradient(transparent 50%, #ffd38f 25%); line-height: 0.95; margin-bottom: 30px; }

.bluetop {
    border-collapse: collapse;
    border-top: 3px solid #168;
    font-size: 20px;
    margin-bottom: 100px;
}
.bluetop th {
    color: #168;
    background: #f0f6f9;
}
.bluetop th, .bluetop td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}
.bluetop th:first-child, .bluetop td:first-child {
    border-left: 0;
}
.bluetop th:last-child, .bluetop td:last-child {
    border-right: 0;
}



/* 키보드 */
#div_bg_keyboard { position:absolute; right: 60px; top: 270px; width: 1000px; height: 450px; z-index: 999;
    background: #2e2e2e; border-radius: 30px; box-shadow: 5px 9px 18px rgba(0, 0, 0, 0.25); }
#div_keyboard { position:absolute; right: 60px; top: 270px; width: 1000px; height: 450px; z-index:999; }
.keycontainer { position:absolute; left:20px; top:75px; }

#div_close_keyboard { position:absolute; left:460px; top:400px; z-index:999; }

.keyboard_area {width: 960px; border-radius: 10px; background: #2e2e2e; }
.keyboard_area .keys {display: flex; justify-content: center; }
.keyboard_area .keys input {
    height: 80px; width: 80px;
    padding: 10px;
    border: none;
    outline: none;
    background: #2F3336;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, .7);
    margin: 10px;
    color: #71D4FE;
    text-shadow: 0px 0px 40px #71D4FE, 0px 0px 80px #71D4FE;
    font-size: 32px; font-weight:800;
    text-align: center;
    border-radius: 12px;
    cursor:pointer; }
.keyboard_area .keys input[value="←"]{font-size: 42px;}
.keyboard_area .keys input[value="Shift"]{width: 120px;}
.keyboard_area .keys input[value="완료"]{width: 120px;}

.search_tit {font-size: 60px; font-family: 's-core-dream'; font-weight: 600; color: #1f3674; margin: 100px 0 100px 0; text-align: center; line-height: 1;}