@charset "utf-8";

.content~.content{margin-top: 140px;}
.content .title{margin-bottom: 70px}
.content .detail{margin-top: 70px;}
.content .feature{margin-top: 50px; padding-left:30px;}
.content .boardTop{margin-top: -30px;}
.content .board{margin-top: 40px;}
.content .title+.board{margin-top: -30px;}
.content h2{font-size: 2.8rem; font-weight: 700; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.1);}
.content h3{font-size: 1.9rem; font-weight: 700; margin-bottom: 20px;}
.content h3 button{margin-left:20px}
.content h4{font-size: 1.7rem; font-weight: 700; margin-bottom: 20px; position: relative;}
.content h4::before{content:""; position: absolute; top:5px; left:-15px; width:5px; height:5px; background: #1A308E;}
.content p{line-height: 2;}
.content .popMsg{display: none; position: absolute; z-index: 10; background: #15151A; color: #fff; padding: 20px; font-size: 1.6rem; font-weight: 400; border:1px solid #2B54FF; border-radius: 5px; box-shadow: 0 3px 10px 0 rgba(0,0,0,0.3);}
.content .bookmark{position: relative; top:-3px; display: inline-block; }
.content .bookmark .btnBmk{vertical-align: middle;}
.content .bookmark .popMsg{top: -15px; right:-160px;}

/* ico */
.icoCate{margin-right:10px; margin-top: 8px; display: inline-block; font-size: 1.3rem; font-weight: 400; padding:5px 12px 3px 12px; border-radius: 3px; background: #fff;}
.icoCate~.icoCate{margin-left: 5px;}
.icoCate.cplt{color:#001362; border: 1px solid #001362; margin-left:10px;}
.icoCate.normal{color:#fff; background: #8F96B1;}
.icoCate.bug{color:#fff; background: #E87474;}
.icoCate.java{color:#fff; background: #D9A864;}
.icoCate.api{color:#fff; background: #5277F2;}

/* a Link */
a.url{text-decoration: underline #666;}
a.url:hover{color:#2B54FF; text-decoration: underline #2B54FF;}
a.url::before{content:""; display: inline-block; width:16px; height:15px; vertical-align: middle; margin-right: 5px; background: url(../images/icon_url.png)no-repeat 0 0/15px; }
a.popLink:hover{color:#2B54FF}
a.popLink::after{content:"🔍"; margin-left: 7px;}

.tip{display: block; padding: 8px 10px; font-size:1.4rem; color:#2B54FF;}


.pageOrder i{color:#333; line-height: 1.6; word-break: break-all;}
.pageOrder i~i::before{content:""; display: inline-block; vertical-align: middle; transform: rotate(-90deg); width:10px; height:12px; margin: -3px 8px 0 8px; opacity: .5; background: url(../images/icon_arrow03.png)no-repeat 50%/100%;}


/* board */
.postInfo{margin-left: auto; display: flex; color:#666; font-size: 1.4rem; font-weight: 400;}
.postInfo span~span{margin-left:20px;}
/* boardTop */
.boardTop{display: flex;}
.boardTop form fieldset{display: flex; gap: 0 10px;}
.boardTop .btnWrap{margin-left: auto;}
/* filter */
.filter{background: rgba(225,227,235,.3); padding: 7px 20px; margin-bottom: 20px;}
.filter form{display: flex; align-items: center;}
.filter .combo{background: transparent; border-color: transparent;}
.filter .textbox-focused{border-color: transparent !important;}
.filter input{height:30px;}
.filter .order{display: flex; margin-left: 50px;}
.filter .order li~li{margin-left: 30px;}
.filter .order input[type="radio"]{display: none;}
.filter .order input[type="radio"]+label{cursor: pointer; font-weight: 600; opacity: .4;}
.filter .order input[type="radio"]:checked+label{opacity: 1;}
/* boardList */
.boardList li{border-bottom: 1px solid #dfdfdf; padding:24px 20px 21px 20px;}
.boardList li:first-child{border-top:1px solid #15151A;}
.boardList li a{display: block; font-weight: 600;}
.boardList li a:hover{color:#2B54FF; text-decoration: underline #2B54FF;}
/* boardView */
.boardView{margin-bottom: 40px;}
.boardView .contTi{display: flex; padding:24px 20px 21px 20px; border-top:1px solid #15151A; border-bottom: 1px solid #dfdfdf;}
.boardView .contTi h3{margin-bottom: 0; width:76%; line-height: 1.5;}
.boardView .cont{padding: 20px 20px 40px 20px; border-bottom: 1px solid #dfdfdf; line-height: 1.6;}
.boardView .answer{display: flex; padding:40px; background: #EDF1FF; border-bottom: 1px solid #dfdfdf;}
.boardView .answer::before{content:"답변"; background: #001362; border-radius: 5px; color:#fff; height: 30px; margin-right: 20px; font-size: 1.4rem; padding: 7px 10px 5px 10px; }
.boardView+.btnWrap{justify-content: center;}
/* paging */
.paging{display: flex; align-items: center; justify-content: center; margin-top: 30px;}
.paging a{width: 30px; height:30px; margin: 0 1px;}
/*.paging .pages{display: flex; align-items: center; margin: 0 5px;}*/
.paging .page{display: flex; align-items: center; justify-content: center; margin: 0 5px; font-size: 1.4rem; font-weight: 600; background: transparent;}
.paging .page.on,.paging .page a:hover{background: rgba(13,69,255,.2);}

/*mng_s 20211216 이진호 , paging 추가*/
.paging .pages{display: flex; align-items: center; margin: 0 5px;}
.paging .pages a{display: flex; align-items: center; justify-content: center; margin: 0 5px; font-size: 1.4rem; font-weight: 600; background: transparent;}
.paging .pages a.on,.paging .pages a:hover{background: rgba(13,69,255,.2);}
/*mng_e 20211216 이진호*/

.btnPage{font-size: 0; display: flex; align-items: center; justify-content: center;}
.btnPage::before{content:""; display: block; width:14px; height:14px; opacity: .4; background: url(../images/icon_arrow03.png); transition-duration: .2s;}
.btnPage.first::before{transform: rotate(90deg); background-repeat:repeat-y; background-position-x: 50%;}
.btnPage.prev::before{transform: rotate(90deg); background-repeat: no-repeat; background-position: 50%;}
.btnPage.next::before{transform: rotate(-90deg); background-repeat: no-repeat; background-position: 50%;}
.btnPage.last::before{transform: rotate(-90deg); background-repeat:repeat-y; background-position-x: 50%;}
.btnPage:hover::before{opacity: 1;}

/*mng_s 20211207 이진호 추가 [개발지원센터 키 리스트 페이지네이션]*/
.dataTables_paginate {display: flex; align-items: center; justify-content: center; margin-top: 30px;}
.dataTables_paginate a {display: inline-block;min-width: 27px;height: 27px; line-height: 27px;text-align: center;vertical-align: top;}
.dataTables_paginate .paginate_button {background-color: #eceae8;color: #666;}
.dataTables_paginate .previous {border-right: none;}
.dataTables_paginate .next {border-left: none;}
.dataTables_paginate span .paginate_button {border-left: none;color: #666666;font-weight: 600;background-color:#fff;}
.dataTables_paginate span .paginate_button:first-child {border-left: solid 1px #d6d6d6;}
.dataTables_paginate span .current {background-color: rgba(13,69,255,.2);}
/*mng_e 20211207 이진호*/


/* 공유게시판 */
.shareBoard .boardList ul{display: flex; flex-wrap: wrap;}
.shareBoard .boardList li{position: relative; width:calc(33.33% - 20px); padding: 30px 0 0 0; margin-right:30px; border:1px solid #dfdfdf; border-radius: 5px; border-top:2px solid #001362;}
.shareBoard .boardList li:nth-child(3n){margin-right: 0;}
.shareBoard .boardList li:nth-child(n+4){margin-top: 30px;}
/* .shareBoard .boardList li:hover{border-top-color: #0D45FF; box-shadow: 0 3px 6px 0 rgba(0,0,0,0.15);} */
.shareBoard .boardList li a{text-decoration: none; padding: 0 30px 30px;}
.shareBoard .boardList li a p{width:95%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-top: 15px; font-size: 1.8rem;}
.shareBoard .boardList li a:hover  p{color:#2B54FF; text-decoration: underline #2B54FF;}
.shareBoard .boardList li a .postInfo{margin-top: 10px;}
.shareBoard .boardList li>.postInfo{padding:12px 30px; background: #EDF1FF;}
.shareBoard .boardList li .urlLink{position: absolute; top: 20px; right:20px; display: block; width:30px; height:30px; background: #E1E3EB; border-radius: 5px;}
.shareBoard .boardList li .urlLink a{display: block; font-size: 0; width:100%; height:100%; padding: 0; background: url(../images/icon_url.png)no-repeat 50%;}
.shareBoard .boardList li .urlLink .popMsg{bottom:-70px; left:10px;}
.shareBoard .boardList li:nth-child(3n) .urlLink .popMsg{bottom:-70px; right:10px; left: initial;}
/* 공유게시판 table */
.popShareBoard .formTbl tr{border:none;}
.shareBoard .inTbl tr, .popShareBoard .inTbl tr{border-bottom:1px solid #dfdfdf; border-top:1px solid #dfdfdf;} 
/* 공유게시판 popup */
.popShareBoard .popTi{position: relative; border-bottom-color: #15151A;}
.popShareBoard .popTi .modify{position: absolute; bottom:20px; right:30px;}
.popShareBoard .postTi{padding-right: 90px; word-break: keep-all;}
.popShareBoard .postTi em{ margin-left: 10px; vertical-align: middle; line-height: 1.8;}
.popShareBoard .url{display: inline-flex; margin-left: 10px;}
.popShareBoard .postInfo{margin-top: 15px;}
.popShareBoard .popCont{overflow-y: auto; height:80vh;}
.popShareBoard .popCont figure{text-align: center; padding-bottom: 40px; border-bottom:1px solid #dfdfdf;}
.popShareBoard .popCont figure+form{margin-top: 20px;}
.popShareBoard .popCont form+.btnWrap button{height: 50px;}
/* 댓글 */
.popShareBoard .cmmtWrap{margin-top: 40px; padding:40px; background:#F2F3F7;}
.popShareBoard .cmmtWrap .count{display: block; font-weight: 600; margin-bottom: 20px;}
.popShareBoard .cmmtWrap .write{position: relative;}
.popShareBoard .cmmtWrap .write textarea{width: 100%; min-height: 80px; padding-right: 120px;}
.popShareBoard .cmmtWrap .write button{position: absolute; top:0; right:0; height:80px; padding: 0 20px; background: rgba(21,21,26,.1);}
.popShareBoard .cmmtWrap .write button:hover{background: rgba(21,21,26,.15);}
.popShareBoard .cmmtWrap .comment{margin-top: 20px;}
.popShareBoard .cmmtWrap .comment li{display: flex; align-items: center; padding: 15px 20px; border-top:1px solid #dfdfdf;}
.popShareBoard .cmmtWrap .comment li .writer{font-size: 1.4rem; width:120px;}
.popShareBoard .cmmtWrap .comment li .txt{width:calc(100% - 270px); margin: 0 20px;}
.popShareBoard .cmmtWrap .comment li .txt em{line-height: 1.8; font-size: 1.5rem; word-break:break-all !important;}
.popShareBoard .cmmtWrap .comment li .txt time{display: block; margin-top: 5px;font-size: 1.3rem; opacity: .6;}
.popShareBoard .cmmtWrap .comment li .btnWrap{margin-left: auto;}
.popShareBoard .cmmtWrap .comment li .btnWrap .btn{height:25px; line-height: 25px; font-size: 1.4rem; padding: 0 10px; background: #D0D2DD;}
.popShareBoard .cmmtWrap .comment li .btnWrap .btn:hover{background: #B7BAC7;}


/* API, 체험하기 페이지 */
.guideBold{color:#2B54FF; font-weight: bold;}
.guideLine{color:#2B54FF; font-weight: 600; text-decoration: underline dotted 1px #2B54FF;}
.guideImportant{display: inline-block; padding:3px 5px 1px 5px; border:1px solid #dfdfdf; font-weight: 600; color: #2B54FF;}
.guideResponse{display: inline-block; padding:3px 5px 1px 5px; border:1px solid #dfdfdf; font-weight: 600; color: #7c27ff;}
.guideTag{display: inline-block; font-size: 1.4rem; padding: 1px 5px 1px 5px; margin: 0 5px; border:1px solid rgba(0,0,0,0.2); line-height: 1.5;}
.guideParam{color:#008CAD}
.guideUrl{display: block; padding:10px 15px; background: #EDF1FF; font-size: 1.5rem;}
.guideImg{padding: 20px; text-align: center; border:1px solid #dfdfdf;}
.guideColorBox{display: inline-block; padding:20px 30px; background: #EDF1FF;}
.guideCodeBox{padding:20px 30px; border:1px solid #dfdfdf; margin: 20px 0; line-height: 2; font-size: 1.4rem;}
.cTag{color:#0800CB;}
.cType{color:#008CAD;}
.cContent{color:#E20046;}
.cBold{font-weight: 700;}

.stepBox{display: flex;}
.stepBox dl{background: #EDF1FF; padding: 30px;}
.stepBox dl~dl{margin-left: 30px;}
.stepBox dt{font-weight: 600; color: #2B54FF;}
.stepBox dd{margin-top: 15px;}

/*mng_s 20211221 이진호, display flex 제거*/
.stepList li{align-items: center; counter-increment: number; }
/*mng_e 20211221 이진호*/

.stepList li~li{margin-top: 15px;}

/*mng_s 20211221 이진호, display를 'block'에서 'inline-block'으로 변경*/
.stepList li::before{content:counter(number,decimal-leading-zero); display: inline-block; width: 35px; height:35px; margin-right: 10px; font-weight: 600; text-align: center; line-height: 35px; color: #fff; border-radius: 5px; background: #001362;}
/*mng_e 20211221 이진호*/

.stepList li button{margin-left: 30px;}

.titleBar{padding: 14px 30px 12px 30px; font-weight: 600; font-size: 1.7rem; color:#fff; background: #505C71;}
.codeArea, .resultArea{border:1px solid #dfdfdf; border-top:none; height: 480px; overflow: hidden; overflow-y: auto;}

/* exmpMaker */
.exmpMaker{background:#505C71; width:calc( 100% - 22px ); margin:0 10px;}
.normalBox{width:calc( 100% - 20px );height:auto;overflow:hidden; margin:20px 10px 0 10px;}
.normalBox .btnbox{float:left;height:47px;}
.normalBox .txtbox{float:left;margin-top:5px;margin-left:20px; height:auto; overflow:hidden;} 
.normalBox .txtbox .t01{width:100%; height:auto; overflow:hidden; color:#cd4b4b; font-size:1.5rem;font-weight:600;} /* 2017-09-19 [개발팀]  */
.normalBox .txtbox .t02{width:100%; height:auto; overflow:hidden; color:#191919; font-size:1.5rem;} 
div.highlight{background:#505C71; font-family:"Courier New",Courier,monospace; overflow:hidden; /* margin:0 0 1.5em; */}
div.highlight pre{width:100%; min-height:100px; max-height: 500px; overflow:auto; padding:0; margin:0; font-size:1.5rem; clear:both; border-radius:0; border:none; color:#fff; background:#282c34;}
div.highlight ul.tabs{overflow:hidden; padding:10px; margin:0;list-style:none; border-bottom:1px solid #505C71; width:100%;position:relative}
div.highlight ul.tabs li{padding:0;margin:0 10px;float:left; background:0 0;line-height:1em;color:#CCC; cursor:pointer}
div.highlight ul.tabs li.active{border-bottom:none;cursor:default; border-bottom:1px dashed #CCC;}
div.highlight pre.code ol{margin:0; padding:20px 20px 20px 45px;}
div.highlight pre.code ol li::marker{color:rgba(256,256,256,.3);}
div.highlight pre.code ul{margin:0;padding:0}
div.highlight pre.code ol li,div.highlight pre.code ul li{padding:0 0 0 5px; height:30px;line-height:30px; font-size:1.5rem;}
div.highlight pre.code ul li{border-left:none}
div.highlight pre.source{display:none; padding: 20px; color:#fff; background:#282c34;}
div.highlight pre::-webkit-scrollbar-thumb{background-color: #676e7a; border-radius: 13px; background-clip: padding-box; border:3px solid transparent;}
div.highlight pre::-webkit-scrollbar-track{background-color: rgba(256,256,256,.08); border:1px solid rgba(0,0,0,0.07); border-radius: 0;}
div.highlight pre::-webkit-scrollbar-corner{background-color: rgba(256,256,256,.08);}
pre.code .str{color:#0d0}
pre.code .var{color:#d00}
pre.code .kwd,pre.code .kwd span{color:#419941;}
pre.code .com,pre.code .com span{color:#e96f6f; font-style:italic; font-weight:400}
pre.code .typ{color:#b56ad3}
pre.code .lit{color:#008989}
pre.code .pun{color:#838320}
pre.code .pln{color:#d5d5d5}
pre.code .tag{color:#6565ff; font-weight:700}
pre.code .atn{color:#b56ad3}
pre.code .atv{color:#039b03}
pre.code .dec{color:#b56ad3}
pre.code .fnc,pre.code .fnc span{color:#7b7bff}
.css pre.code .kwd,.css pre.code .kwd span{color:#6565ff; font-weight:700}
.php pre.code .str,.php pre.code .str span{color:#0d0}
.php pre.code .var,.php pre.code .var span{color:#cb3737}
.php pre.code .com span, .php pre.code .com{color:#6565ff; font-style:italic; font-weight:400;}
pre.code ol{list-style:decimal;}


/* 인증키발급센터 */
.agreeWrap{border: 1px solid #e1e1e1; margin-bottom: 50px;}
.agreeWrap>div{overflow-y: auto; padding: 30px; height: 380px;}
.agreeWrap>div>dl{margin-bottom: 20px;}
.agreeWrap>div>dl dt{font-weight: 600; height: 28px;}
.agreeWrap>div>dl dd{font-size: 1.3rem; font-weight: 600; color: #666; line-height: 30px;}
.agreeWrap~.btnWrap{justify-content: center;}


/* 즐겨찾기관리 */
.bookmarkBoard .boardList li{position: relative; padding-left:45px; padding-right: 120px;}
.bookmarkBoard .boardList li::before{content:""; position: absolute; top:24px; left:20px; width:20px; height:20px; margin-right: 5px; background: url(../images/icon_bookmark02.png)no-repeat 50%/100%;}
.bookmarkBoard .boardList li a{text-decoration: none; font-weight: initial;}
.bookmarkBoard .boardList li a em{font-size: 1.8rem; font-weight: 600; margin-right: 20px;}
.bookmarkBoard .boardList li a:hover em{text-decoration: underline;}
.bookmarkBoard .boardList li time{display: block; width: 100%; font-size: 1.4rem; color:#777; margin-top: 10px;}
.bookmarkBoard .boardList li .btn{position: absolute; top:50%; margin-top:-20px; right:30px;}


/* 검색결과 */
.searchResult main{width:100%;}
.searchResult .title{margin-bottom: 40px;}
.searchResult h2{border:none;}
.searchResult .content{margin-top: 60px;}
.searchResult .boardList li a{text-decoration: none; font-weight: initial;}
.searchResult .pageOrder:hover i{color: #2B54FF;}