@charset "utf-8";
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}

.flexWrap{display: flex;}
.flexItem{flex:1;}
.flexItem~.flexItem{margin-left: 30px;}

.null{color:#666; text-align: center;}

select~select{margin-left: 10px;}


/* custom radio */
.radio{display: inline-flex;}
.radio~.radio{margin-left: 20px;}
.radio input[type="radio"]{display: none;}
.radio input[type="radio"]~label{cursor: pointer; vertical-align: middle;}
.radio input[type="radio"]+label{font-size: 0; display: inline-block; width:20px; height:20px; border: 1px solid rgba(0,0,0,0.3); border-radius: 20px; }
.radio input[type="radio"]:checked+label{position: relative; background: #0D45FF; border-color: #0D45FF;}
.radio input[type="radio"]+label::before{content:""; position: absolute; top:50%; left:50%; transform: scale(0); margin-top: -4px; margin-left: -4px; width:8px; height:8px; border-radius: 20px; background: #fff; transition-duration: .2s;}
.radio input[type="radio"]:checked+label::before{transform: scale(1);}
.radio input[type="radio"]+label+label{margin-left: 5px; font-size: 1.6rem;}

/* custom checkBox */
.checkBox{display: inline-flex;}
.checkBox~.checkBox{margin-left: 20px;}
.checkBox input[type="checkbox"]{display: none;}
.checkBox input[type="checkbox"]~label{cursor: pointer; vertical-align: middle; }
.checkBox input[type="checkbox"]+label{font-size: 0;display: inline-block; width:20px; height:20px; border: 1px solid rgba(0,0,0,0.3); border-radius: 3px;}
.checkBox input[type="checkbox"]:checked+label{background: url(../images/icon_check.png)no-repeat 50%,#0D45FF; border-color: #0D45FF;}
.checkBox input[type="checkbox"]+label+label{margin-left: 5px; font-size: 1.6rem;}

.btnWrap{display: flex;}
.btnWrap .btn~.btn{margin-left: 10px;}
.btn{padding: 0 20px; font-size: 1.6rem; border-radius: 5px; height: 40px; line-height: 40px; transition-duration: .15s; vertical-align: middle;}
.btn01{background: #0D45FF; color: #fff;}
.btn01:hover{background: #101BF7;}
.btn02{background: rgba(256,256,256,.1); color:#fff;}
.btn02:hover{background: rgba(256,256,256,.18);}
.btn03{background: #1A308E; color: #fff;}
.btn03:hover{background: #001672;}
.btn04{background: #FF7835; color: #fff;}
.btn04:hover{background: #ef4f00;}
.btn05{background: #8D92AA; color:#fff;}
.btn05:hover{background: #80859F;}
.btn06{background: #fff; color:#2B54FF; border:1px solid #2B54FF;}
.btn06:hover{background: #2B54FF; color:#fff;}
.btn07{font-size: 1.4rem; color:#666; border:1px solid #aaa; height:30px; line-height: 30px; padding:0 10px;}
.btn07:hover{color:#fff; border-color: transparent; background: #aaa;}

.btnIco::before{content:""; display: inline-block; vertical-align: middle; width:26px; height:26px; margin-right: 7px; margin-top: -4px; transition-duration: .2s;}
.btnIco.menual::before{background: url(../images/icon_menual.png)no-repeat 50%/26px;}
.btnIco.key::before{background: url(../images/icon_key.png)no-repeat 50%/26px;}
.btnIco.download::before{background: url(../images/icon_down.png)no-repeat 50%/26px;}
.btnIco.reset::before{background: url(../images/icon_reset.png)no-repeat 50%/26px;}
.btnIco.zoom::before{background: url(../images/icon_zoom.png)no-repeat 50%/26px;}
/* 닫기 */
.btnClose{font-size:0; width:30px; height:30px; background: url(../images/icon_close.png)no-repeat 50%; opacity: .5; transition-duration: .2s;}
.btnClose:hover{opacity: 1;}
/* 검색 */
.btnSearch{width:30px; height:30px; opacity: .7; font-size:0; background: url(../images/icon_search.png)no-repeat 50%; transition-duration: .2s;}
.btnSearch:hover{opacity: 1;}
/* 즐겨찾기 */
.btnBmk{width:30px; height:30px; font-size: 0; background: url(../images/icon_bookmark01.png)no-repeat;}
.btnBmk.on{background: url(../images/icon_bookmark02.png)no-repeat;}
/* 삭제 */
.btnDel{width:20px; height:20px; border-radius: 3px; background: #c2c2c2; font-size: 0;}
.btnDel::before{content:""; display: block; margin: 0 auto;  width:50%; height: 2px; background: #fff;}
.btnDel:hover{background: #a1a1a1;}

/* ico */
.icoApi{display: inline-block; font-size: 1.4rem; font-weight: 600; padding:7px 12px 5px 12px; border:1px solid; border-radius: 3px; background: rgba(0,0,0,0.5);}
.icoApi.map{color:#2DE4A7; border-color: rgba(46,228,167,.6);}
.icoApi.data{color:#FFD335; border-color: rgba(255,211,53,.6);}
.icoApi.sdk{color:#C44CF8; border-color: rgba(196,76,248,.6);}
.icoApi.ios{color:#C44CF8; border-color: rgba(196,76,248,.6);}

/* icoF */
.icoApiF{display: inline-block; font-size: 1.3rem; font-weight: 400; color:#fff; padding:5px 12px 3px 12px; border-radius: 3px;}
.icoApiF~.icoApiF{margin-left: 5px;}
.icoApiF.map{background: #00AF87;}
.icoApiF.data{background: #EBB800;}
.icoApiF.sdk{background: #9251DE;}
.icoApiF.ios{background: #497ee7;}

.writer::before{content:"😃"; margin-right: 5px;}
.time::before{content:"📅"; margin-right: 5px;}
.views::before{content:"👀"; margin-right: 5px;}
.like::before{content:"👍"; margin-right: 5px;}
.cmmt::before{content:"💬"; margin-right: 5px;}

/* 보안코드 */
.vercodeImg{width:100px; height:40px; margin-right: 10px; vertical-align: middle;}

/* table */ 
.tbl .ar{text-align: right;}
.tbl .ac{text-align: center;}
.tbl tr{border-bottom:1px solid #dfdfdf; border-top:1px solid #dfdfdf;} 
.tbl th,.tbl td{text-align: left; vertical-align: middle; padding:15px 0;}
.tbl th{background: #F2F3F7; font-weight: 600;}
.tbl th:not(:first-child),.tbl td:not(:first-child){border-left: 1px solid #dfdfdf;}
.tbl td{font-size: 1.4rem;}
.tbl th>span, .tbl td>span{padding: 0 20px; display: inline-block; line-height: 1.5; white-space: normal; word-break: break-word;}
.tbl span.belong::before{content:""; display: inline-block; width:10px; height: 10px; margin-right: 7px; background: url(../images/icon_belong.png)no-repeat 0 /10px ;}

.formTbl th{background: none;}
.formTbl tr:first-child{border-top:1px solid #15151A;}
.formTbl th:not(:first-child), .formTbl td:not(:first-child){border-left: none}
.formTbl th>span,.formTbl td>span{width: 100%;}
.formTbl span.req::before{content:"*"; display: inline-block; margin-right: 5px; font-weight: 600; color:#2B54FF;}
.formTbl span input[type="text"]{width:70%;}
.formTbl span input[type="text"]+button{margin-left: 10px;}

.inTbl tr{border-bottom:1px solid #dfdfdf; border-top:1px solid #dfdfdf;} 
.inTbl tr:first-child{border-top:1px solid #dfdfdf;}
.inTbl th, .inTbl td{text-align: left; vertical-align: middle; padding:15px 0;}
.inTbl th{background: #F2F3F7; font-weight: 600;}
.inTbl th:not(:first-child), .inTbl td:not(:first-child){border-left: 1px solid #dfdfdf;}
.inTbl td{font-size: 1.4rem;}
.inTbl th>span, .inTbl td>span{padding: 0 15px; display: inline-block; line-height: 1.5; white-space: normal; word-break: break-word;}

/* 팝업 */
.popup{display: none; position: fixed; top:0; left:0; z-index: 999; justify-content: center; align-items: center; width:100vw; height:100vh; background: rgba(0,0,0,0.8);}
.popup.on{display: flex;}
.popup section{position: relative; box-shadow: 0 22px 22px -4px rgba(0,0,0,0.35); background: #fff; border-radius: 5px;}
.popTi{padding:30px 30px 20px; border-bottom: 1px solid #dfdfdf;}
.popTi em{font-size:1.8rem; font-weight: 600;}
.popCont{padding:30px;}
.popup .btnClose{position: absolute; top:20px; right:20px; background: url(../images/icon_close02.png)no-repeat 50%;}
.popup form+.btnWrap{margin-top: 40px; justify-content: center;}

.naviSlide{display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; padding: 0 46px;}
.naviSlide button{margin: 0 10px; font-size: 0; width:12px; height:12px; border-radius: 22px; background: #767676; transition-duration: .2s;}
.naviSlide li.slick-active button{width:22px;}
.naviSlide li.slick-active button,.naviSlide button:hover{background: #0D45FF;}

/* 알럿팝업 [start] */
.popupWrapper{display: none; position: absolute; top: 0; left:0; justify-content: center; align-items: center; width: 100vw; height: 100vh; z-index: 9999; background:rgba(0,0,0,0.8); }
.popupWrapper.on{display: flex;}
.alertPopupWrapper{width: 450px; height: auto; overflow: hidden; border: 1px solid #2B54FF; border-radius: 5px; background: #15151A;}
.alertPopupTitle{position: relative; padding:30px 30px 20px; border-bottom: 1px solid rgba(256,256,256,.1);}
.myTitleFont{padding-right: 40px; font-size:1.8rem; font-weight: 600; color: #fff;}
.myXbtn{position: absolute; top:22px; right:20px;}
.messageBox{width: 100%; height: auto; padding: 40px 30px; overflow: hidden; text-align: center; font-weight: 600; color:#fff;}

.submenuBox{z-index:10000; width:100%; height:0;overflow:hidden;position:fixed;left:0;top:90px;background:#F5F5F5;border-top:0px solid #b5b5b5;border-bottom:0px solid #b5b5b5;}
.submenuBox .rela{position:relative;width:970px;height:137px;margin:0 auto;background:url(/img/bg/bg_submenu.png) no-repeat left center}
.submenuBox .rela .etc{width:256px;height:130px;overflow:hidden;font-size:0;float:left;margin-top:5px;}
.submenuBox .rela ul{width:119px;height:165px;overflow:hidden;float:left;margin-top:10px;}
.submenuBox .rela ul li{font-size:11px;margin:10px auto;}
.submenuBox .rela ul li a:hover{color:#21b69a;}

.btnbox{width: 100%; display: flex; justify-content: center; margin-bottom: 40px;}
.btnbox button~button{margin-left: 10px;}

.resPopupWrapper .content .detail{margin-top: 0;}