@charset "utf-8";
@import url(//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap);

html,body {font-family:'Noto Sans KR',"Apple SD Gothic Neo", 'Malgun Gothic', 'FontAwesome';}

#doc {position:relative;min-width:1600px;overflow:hidden;}
#doc.show{ transition-delay:0.1s; opacity:1;}
body {background:#fff}
#doc .pageContainer{position: relative;background-color: #26344b;}
#doc .pageContainer:after{content:'';display:block;clear:both}
/*=======================================================
    #header-wrap
=========================================================*/
#header-wrap{width: 100%;background-color:#fff;}
#header-wrap #header .pageName .accountContain #platformSelect{float: left; margin: 18px 20px 0 0;}
#header .page-logo{float:left;width:158px;height:68px;line-height:68px;background:no-repeat left top url("/resources/_Img/Main/pageBack.png") #5190f0;background-size:50px;}
#header .page-logo a{display:inline-block;width:100%;color:#fff;text-align:right;padding:10px 15px;}
#header .page-logo a h2{height:30px;line-height:30px;font-size:16px;}
#header .page-logo a p{height:18px;line-height:18px;font-size:14px;opacity:0.5;}
#header .page-logo .navbarToggle{display:inline-block;width:17px;height:17px;cursor:pointer;margin-left:24px;background-image:url('/resources/_Img/Layout/sidebar-toggler.png');background-position:right;background-repeat:no-repeat;}
#header .pageName{height:68px;line-height:68px;}
#header .pageName .accountContain{float:right;}
#header .pageName .accountContain .userNm{float:left;margin-right:20px;}
#header .pageName .accountContain .logout{float:left;margin-right:30px;text-decoration:underline;}
#header .pageName h3{float:left;margin-left: 30px;font-size: 1.3em;}

#doc.hide #header:after{border:none; background:none;}
#doc.hide #header *{display:none;}
#logo{min-width:90px;min-height:30px;width:18vw;height:6vw;left:50%;top:50%;position:absolute;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
#logo a{display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:url(../_Img/logo.png) no-repeat center center;background-size:99% auto;}

/*=======================================================
    #nav-wrap
=========================================================*/
#nav-wrap{width:158px;height:100%;min-height:1158px;float: left;background-color:#26344b;}
#nav-wrap > ul > li{height: 78px;font-size:1.1em;}
#nav-wrap > ul > li.select{background-color:#1f2b3d;}
#nav-wrap > ul > li > a{display:block;position: relative;height:78px;line-height:48px;padding:17px 30px;border-top:1px solid #2b3b55;color:#aab0ba;font-weight:400;}
#nav-wrap > ul > li > a > span.selected{float:right;position:absolute;right:-1px;top:26px;width:0;height: 0;border-style: solid;border-top:12px double transparent;border-bottom:12px double transparent;border-left:0;}
#nav-wrap > ul > li.select > a > span.selected{border-right:8px solid #eef1f5;}
#nav-wrap > ul > li:hover > a > span.selected{top:15px;border-right:8px solid #5190f0;}
#nav-wrap > ul > li:first-of-type > a{border-top:0;}
#nav-wrap > ul > li .sub{position:absolute;display:none;background-color:#5190f0;z-index:3;}
#nav-wrap > ul > li .sub li{height:50px;line-height:50px;border-bottom:1px solid #67a3ff;}
#nav-wrap > ul > li .sub li a{display:block;width:100%;padding:0 10px;font-size:13px;color:#fff;}
#nav-wrap > ul > li:hover .sub{display:inline-block;position:relative;width:145px;margin-left:158px;top:-78px;}
#nav-wrap > ul > li:hover .sub li:hover{background-color:#5d9dff;}

/* ======================================================
   #content
=========================================================*/
.contents{width:calc(100% - 158px);min-height:1335px;float:left;background-color:#eef1f5;padding:10px 20px 20px 10px;}
.contents .breadcrumb ul{display:inline-block;padding:10px 6px;list-style: none;}
.contents .breadcrumb ul li{display: inline-block}
.contents .breadcrumb ul li span{color:#888;}
.contents .breadcrumb ul li span.angle{color:#333;}
.contents .breadcrumb ul li .angle:before{content:'\003E';}
/*basic frame*/
.frameHead,
.frameFoot{height:55px;line-height:55px;background-color:#f9f9f9;}
.frameHead{padding:0 30px;border-radius:10px 10px 0 0;}
.frameHead h4{font-size:1.4em;font-weight:400;}
.frameHead h4.scrollBtn{cursor:pointer;}
.frameHead h4 span.fa,
section.baseFrame.result h3 .fa{width:19px;text-align:center;font-size: 1.4em;margin-right:10px;}
ul.frameBody{padding:0 30px;background-color:#fff;}
ul.frameBody > li:not(:last-of-type){border-bottom:1px solid #eeeeee;}
ul.frameBody > li:after{content:'';display:block;clear:both}
ul.frameBody > li > div.frameName{font-weight:700;}
ul.frameBody > li > div.frameName,
ul.frameBody > li > section.frameValue{line-height:50px;float:left;text-align:right;}
ul.frameBody > li > div.frameName{width:100px;}
ul.frameBody > li > div.nameWd{width:105px;}
ul.frameBody.long > li > div.frameName{width:100px;}
ul.frameBody.manList > li > div.frameName,
ul.frameBody.detail > li > div.frameName{width:130px;}
ul.frameBody > li > section.frameValue{width:calc(100% - 100px);}
ul.frameBody > li > section.valueWd{width:calc(100% - 105px);}
ul.frameBody.long > li > section.frameValue{width:calc(100% - 100px);}
ul.frameBody.manList > li > section.frameValue,
ul.frameBody.detail > li > section.frameValue{width:calc(100% - 130px);}
ul.frameBody > li > section.frameValue > div{height:50px;float:left;}
ul.frameBody > li > section.frameValue > div.data{width:100%;text-align:left;margin-left: 20px;}
ul.frameBody > li > section.frameValue > div.longData,
ul.frameBody > li > section.frameValue > div.edit{width:100%;height:auto;line-height:normal;margin:15px 0 15px 20px;text-align:left;float:none;}
ul.frameBody > li > section.frameValue > div.edit.menu{position:relative;width:150px;margin-bottom:0;}
ul.frameBody > li > section.frameValue > div.edit.menu + p{text-align:left;margin-left:20px;}
ul.frameBody > li > section.frameValue > div.edit.image{position:relative;width:244px;}
ul.frameBody > li > section.frameValue > div.longData.editable{width:calc(100% - 120px);}
ul.frameBody > li > section.frameValue > div.longData.editable + .btnWrap{width:100px;}
ul.frameBody > li > section.frameValue > div.longData .platform{margin-bottom:20px;}
ul.frameBody > li > section.frameValue > div.longData .platform h3{width:50%;height:30px;line-height:30px;padding:0 30px;border-radius:10px 10px 0 0;cursor:pointer;margin-bottom:10px;background-color:#f9f9f9;}
ul.frameBody > li > section.frameValue > div.longData .platform ul li{width:calc(50% - 20px);height:30px;line-height:30px;margin:0 10px;border-bottom:1px solid #eeeeee;}
ul.frameBody > li > section.frameValue > div.longData .platform ul li > div{float:left;}
ul.frameBody > li > section.frameValue > div.longData .platform ul li > div:first-of-type{width:15%;text-align:right;padding-right:10px;}
ul.frameBody > li > section.frameValue > div.longData .platform.lv1 ul li{height:auto;}
ul.frameBody > li > section.frameValue > div.longData .platform.lv1 .lv2 tr{height:30px;line-height:30px;}
ul.frameBody > li > section.frameValue > div.longData .platform .miniListHead{margin-left:10px;}
ul.frameBody > li > section.frameValue > div.longData > img{max-width:600px;}
ul.frameBody > li > section.frameValue > div.edit input[name=title]{width:600px;}
ul.frameBody > li > section.frameValue > div.edit textarea{width:600px;height:500px;padding:10px;}
ul.frameBody > li > section.frameValue > div.edit.image .preview{width:100%;height:170px;}
ul.frameBody > li > section.frameValue > div.edit img.preview{min-width:150px;max-width:600px;min-height:150px;border:1px solid #000;}
ul.frameBody > li > section.frameValue > div.edit img.preview.fixedSize{width:150px;height:150px;}
ul.frameBody > li > section.frameValue > div.edit label.uploadBtn{position:absolute;width:62px;height:27px;line-height:27px;bottom:0;right:0;margin-right:0;background-color:#000;opacity:0.5;}
ul.frameBody > li > section.frameValue > div > ul:after{display:block;clear:both;content:'';}
ul.frameBody > li > section.frameValue > div.edit > ul li{float:left;}
ul.frameBody > li > section.frameValue > div.edit > ul li > label{width:auto;}
ul.frameBody > li > section.frameValue > div label{display:inline-block;width:106px;margin-right:10px; cursor: pointer}
ul.frameBody > li > section.frameValue > div input.inputDate + span{margin: 5px;}
ul.frameBody > li > section.frameValue > div input[type=checkbox]{margin-left:81px;}
ul.frameBody > li > section.frameValue > div.longData input[type=checkbox]{margin-left:0;}
ul.frameBody > li > section.frameValue > div input[type=checkbox] + label{width:auto; padding-left:10px;}
ul.frameBody > li > section.frameValue > div input[type=text],
ul.frameBody > li > section.frameValue > div.addr select{width:181px;padding-left:10px;}
ul.frameBody > li > section.frameValue > a.edit{border:0;color:#fff;background-color:#5190f0;display:inline-block;width:100px;height:40px;line-height:40px;border-radius:5px;vertical-align:middle;font-size:13px;text-align:center;float: left;margin: 17px;}
ul.frameBody > li > section.frameValue select.middleSize{min-width:100px;}
ul.frameBody > li > section.frameValue select.largeSize{min-width:150px;}
section.baseFrame form > :last-child,
section.baseFrame > :not(form):last-child,
.frameFoot{border-radius:0 0 10px 10px;}
ul.frameBody > li > section.frameValue .validateBtn{width:50px;height:32px;}
input[type=radio] {cursor: pointer}

/*result frame*/
section.baseFrame:not(:first-of-type){margin-top:20px;border-radius:10px;}
section.baseFrame.result{width:fit-content;margin-top:20px;background-color:#f9f9f9;border-radius:10px;}
section.baseFrame.result h3{height:60px;line-height:60px;padding:0 30px;font-size:1.4em;font-weight:500;}
section.baseFrame.result h3 .resultCnt{margin-left:5px;font-size:1.4em;color:#5190f0;}
section.baseFrame.result .tableTop li{height:55px;line-height:55px;background-color:#f5f5f6;text-align:center;float:left;font-weight:bold;width:50%;}
section.baseFrame.result table{table-layout:fixed;}
section.baseFrame.result table a{text-decoration:underline;}
section.baseFrame.result table input[type=checkbox]{margin-left:4px;}
section.baseFrame.result table thead th{height:55px;background-color:#f5f5f6;text-align:center;}
section.baseFrame.result table thead th.select{text-align:left;}
section.baseFrame.result table thead th:first-of-type{padding-left:30px;border-radius:10px 0 0 0;}
section.baseFrame.result table thead th:last-of-type{padding-right:30px;border-radius:0 10px 0 0;}
section.baseFrame.result table tbody tr.blind{opacity:0.7;}
section.baseFrame.result table tbody td{background-color:#fff;}
section.result table tbody tr:nth-of-type(2n) td{background-color:#fafafa;}
section.baseFrame.result table tbody tr.blind td{background-color:#9e9e9e;}
section.baseFrame.result table tbody td > div:not(:first-of-type){padding:5px 10px;border-bottom:1px solid #eeeeee;}
section.baseFrame.result table tbody td > div.title{text-align:left;}
section.baseFrame.result table tbody td > div.numbers{text-align:right;}
section.baseFrame.result table tbody td > div.numbers > p{padding:0 20px;}
section.baseFrame.result table tbody td > div.simple{text-align:center;}
section.baseFrame.result table tbody td > div.middleSet{width:fit-content;margin:0 auto;}
section.baseFrame.result table tbody td div.flex{display:flex;flex:1;}
section.baseFrame.result table tbody td div.overflowText{flex:1;width:1px;}
section.baseFrame.result table tbody td div p{height:50px;line-height:50px;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;}
section.baseFrame.result table tbody td div p.top{height:30px;line-height:40px;}
section.baseFrame.result table tbody td div p.bottom{height:20px;line-height:20px;}
section.baseFrame.result table tbody td div p.bottom.code{color:#afafaf;}
section.baseFrame.result table tbody td:first-of-type div{margin-left:30px;}
section.baseFrame.result table tbody td:last-of-type div{margin-right:30px;}
section.baseFrame.result table tfoot td{height:55px;background-color:#f9f9f9;border-radius:0 0 10px 10px;text-align:center;}
section.baseFrame.result table tfoot td ul.page{display:inline-block;}
section.baseFrame.result table tfoot td ul.page:after{display:block;clear:both;content:'';}
section.baseFrame.result table tfoot td ul.page li{float:left;min-width:15px;margin:0 3px;}
section.baseFrame.result table tfoot td ul.page li.active{font-weight:bold;}
table thead .flexibleCol{width:fit-content;}
table thead .littleCol{width:90px;}
table thead .littleColLast{width:120px;}
table thead .smallCol{width:130px;}
table thead .mediumCol{width:200px;}
table thead .bigCol{width:250px;}
table thead .largeCol{width:300px;}
table thead .largestCol{width:450px;}
table tbody .flexibleCol{width:fit-content;}
table tbody .littleCol{width:90px;}
table tbody .littleColLast{width:120px;}
table tbody .smallCol{width:130px;}
table tbody .mediumCol{width:200px;}
table tbody .bigCol{width:250px;}
table tbody .largeCol{width:300px;}
table tbody .largestCol{width:450px;}

ul.imgSet:after{content:'';display:block;clear:both;}
ul.imgSet li.imgList{float:left;cursor:pointer;}
ul.imgSet li.imgList img{max-width:150px;}

.btnWrap{width:220px;margin:0 auto;}
.baseFrame + .btnWrap{width:fit-content;margin-top:30px;margin-bottom:30px;}
h3 .btnWrap{width:auto;float: right;}
.btnWrap button{width:100px;height:40px;border-radius:5px;}
.btnWrap a{
    display:inline-block;width:100px;height:40px;line-height:40px;
    border-radius:5px;vertical-align:middle;font-weight:400;font-size:13px;text-align:center;
}
.btnContain button.excel,
.btnWrap button.excel{color:#fff;background-color:#1d6b41;}
.btnWrap a.write,
.btnWrap a.edit,
.btnWrap button.regist,
.btnWrap button.submit,
.btnWrap button.edit{border:0;color:#fff;background-color:#5190f0;}
.btnWrap button.disable{background-color:#e1e1e1;}
.btnWrap a.reset,
.btnWrap a.back,
.btnWrap button.reset,
.btnWrap button.back{border:1px solid #bdbdbd;color:#666666;background-color:#fff;}
button.uploadBtn{width:50px;color: #fff;background-color: #5190f0;vertical-align:bottom;}

/*Message Target*/
[name=excludeMonth] + span{display:inline-block;height:32px;line-height:32px;}
#allMember:checked ~ #targetSelect #allMemberVisit,
#newMember:checked ~ #targetSelect #newMemberVisit,
#goodMember:checked ~ #targetSelect #goodMemberVisit,
#breakMember:checked ~ #targetSelect #breakMemberVisit{display:block;}
#targetUpload{display:none;}
#targetUpload button{width:90px;line-height:32px;color:#fff;background-color:#5190f0;}
#targetSelect > li:not(:last-of-type){float:none; display:none;}
#targetSelect > li:last-of-type div{float:left;height:32px;line-height:32px;}
#targetSelect > li:last-of-type div.spad{padding-top:3px;}
#targetSelect > li:last-of-type:after{display:block;clear:both;content:'';}
#targetSelect button{height:32px;line-height:32px;color:#fff;background-color:#5190f0;}
#targetSelect button#targetingMember{width:50px;line-height:32px;color:#fff;background-color:#5190f0;}
#targetSelect button.memberExcel{padding:0 8px;}
#couponN:checked ~ #couponSelect{display: none;}
ul.frameBody > li > section.frameValue > div.edit textarea.msgBlk{height:100px;}
div.msg{position:relative;width:600px}
div.msg #byte{-ms-user-select: none;-moz-user-select:none;-webkit-user-select:none;-khtml-user-select:none;user-select:none;position:absolute;bottom:0;right:5px;}
/* ======================================================
    #footer-wrap
=========================================================*/
#doc.sub #footer-wrap{display:none;}
#doc.hide #footer-wrap{display:none;}

#footer-wrap {display:block; position:relative;}
#footer{ position:relative;text-align:left; padding:4vw 3vw;}