/**************************
font
**************************/
@charset "utf-8";

/*Google fonts*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

.enfont{font-family:'Montserrat', sans-serif;}

/*NanumSquareR*/
@font-face {
  font-family: "NanumSquareR";
  src: url("../fonts/NanumSquareR.eot"); /* IE9 Compat Modes */
  src: url("../fonts/NanumSquareR.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/NanumSquareR.svg") format("svg"), /* Legacy iOS */
    url("../fonts/NanumSquareR.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/NanumSquareR.woff") format("woff"), /* Modern Browsers */
    url("../fonts/NanumSquareR.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}


/**************************
common
**************************/
body,html{margin: 0; padding: 0; font-family: 'NanumSquareR','Noto Sans KR','Open Sans', sans-serif; font-size: 13px; color:#333; font-weight: 400;}
button{cursor: pointer; font-family: inherit;}
ul,ol,li{list-style: none; padding: 0;margin: 0;}
h1,h2,h3,h4,h5{font-weight: 400; margin: 0;}


/* custom scrollbar */
.customScrollbox::-webkit-scrollbar {
  width: 7px;
}
.customScrollbox::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 50px;
}
.customScrollbox::-webkit-scrollbar-thumb {
  background: #c2c2c2;
  border-radius: 50px;
}
.customScrollbox::-webkit-scrollbar-thumb:hover {
  background: #b9b9b9;
}


/**************************
layer 공통
**************************/
.dim{position: fixed; left: 0;top: 0; background: rgba(0,0,0,0.13); width: 100%; height: 100%;}
.fileUploader_ly{
  position: fixed;
  z-index: 9999;
  width: 560px;
  height: 470px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 38px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 52.44px 4.56px rgba(0, 0, 0, 0.09);
  }

.ly_header{height: 77px;border-bottom: 1px solid #f4f4f4;box-sizing: border-box;}
.ly_header h1.ly_logo{margin: 0;padding: 22px 40px;}
.ly_header h1.ly_logo img{}
.ly_close{width: 21px;height: 21px;border: none;background: url(../images/btn_close.png) no-repeat center / 21px;position: absolute;right: 40px;top: 30px;cursor: pointer;}

/**************************
파일업로드 레이어
**************************/
.uploadBox{
	width: 90%;
	height: 228px;
	border-radius: 5px;
	margin: 30px auto 25px;
	background: url(../images/upload_bg.png) no-repeat center / 100%;
}

.uploadBtn{background-color: rgb(69, 163, 255);
    box-shadow: 0px 1px 19.32px 1.68px rgb(0 0 0 / 3%);
    width: 209px;
    height: 58px;
    border: none;
    border-radius: 50px;
    margin: 0 auto;
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 58px;
    text-align: center;
    cursor: pointer;
   }


/**************************
파일검수중 레이어
**************************/
.fileCheck{display: none;}
.fileCheck_ly{
    position: fixed;
    z-index: 9999;
    width: 500px;
    height: 650px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 38px;
    background-color: #fbfbfb;
    box-shadow: 0px 1px 52.44px 4.56px rgb(0 0 0 / 9%);
    }
.fileCheck_ly .ly_header, .fileCheck_ly .ly_body{background: #fff;}
.fileCheck_ly .ly_header{border-radius: 38px 38px 0 0;}

.progressTop{text-align: center;padding: 36px;box-sizing: border-box;}
.progressTop img{}
.progressTop p{ font-size: 15px; font-weight: bold; margin: 16px 0 20px;}

/*검수체크리스트*/
.fileCheck_ly .ly_footer{padding: 20px 70px;box-sizing: border-box;height: 300px;overflow-y: auto;}
.checkList{padding: 0;}
.checkList li{margin: 30px 0;padding: 0;}

.checkList li span{background: url(../images/chk.png) no-repeat left / 72px;width: 36px;height: 36px;display: inline-block;float: left;margin-right: 20px;}
.checkList li.done span{ background: url(../images/chk.png) no-repeat right / 72px;}
.checkList li h5{font-size: 15px;font-weight: bold;}
.checkList li p{font-size: 13px;color: rgb(192, 196, 197);margin: 5px 0;}



/**************************
파일봇메인
**************************/
.wrapper{width: 100%; height: 100%; display: none;}
.wrapper .ly_close{padding: 38px; right: 0;top: 0;}


/**************************
header
**************************/
.wrapper header{width: 100%;height: 75px;line-height: 75px;border-bottom: 1px solid #f4f4f4;box-sizing: border-box;overflow: hidden;position: absolute;top: 0;left: 0;background: #fff;}
.wrapper header .logo{line-height: 38px;display: inline-block;float: left;padding: 17px 40px 25px 40px;}
.wrapper header .logo img{height: 32px;}
.prdName{display: inline-block;float: left;}
.productName{font-size: 15px;}
.productName:before{content:"";width: 1px;height: 16px;background: #ddd;display: inline-block;vertical-align: middle;margin: 0 40px 0 0;}
.fileName{font-size: 13px;color: rgb(194, 194, 194);}


/**************************
container
**************************/
container{width: 100%;height: calc( 100% - 75px);position: absolute;top: 75px;}


/**************************
1. aside
**************************/
aside{width: 386px;height: 100%;border-right: 1px solid #f4f4f4;box-sizing: border-box;position: absolute;left: 0;top: 0;}
.aside_inner{    display: -webkit-box;  display: flex; -webkit-box-orient: vertical; flex-direction: column;  height: 100%;}
.asideTop{ padding: 18px;}
.asideTop .dialog{padding: 20px 40px;border-radius: 5px;box-shadow: 0px 1px 19.32px 1.68px rgb(0 0 0 / 3%);box-sizing: border-box; display: none;}
.asideTop .dialog .chkIcon{  float: left; margin-right: 20px;  vertical-align: middle;}
.asideTop .dialog h5{ font-size: 14px; font-weight: bold;}
.asideTop .dialog p{ margin: 5px 0 0 0; line-height: 20px;}

.dialog.success{background: #d8f7de;}
.chkIcon{width: 38px;height: 38px;display: inline-block;}
.dialog.success .chkIcon{background: url('../images/d-success.png') no-repeat center / 38px;}
.dialog.danger .chkIcon{background: url('../images/d-danger.png') no-repeat center / 38px;}
.dialog.danger{background:#ffeaea;}

/******* detail 오류상세내용 아코디언 ********/
.detail{overflow-y: scroll;min-height: 0;-webkit-box-flex: 1;flex: 1;overflow: auto;}
.detailUl{}
.detailUl > li{}
.detailUl > li:last-child button.accordion{border-bottom: 1px solid #ededed;}
.detailUl > li:last-child .panel{border-top: none;}
.detailUl > li > button.accordion{
    display: block;
    width: 100%;
    border: 1px solid transparent;
    border-top-color: #ededed;
    background: #fff;
    padding: 0 15px 0 20px;
    text-align: left;
    box-sizing: border-box;
    font-weight: bold;
    height: 44px;
    line-height: 44px;
}
.accordion .count{
    background: #ff6161;
    margin: 0 10px;
    border-radius: 40px;
    padding: 0 7px;
    height: 20px;
    line-height: 20px;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-weight: 400;
    font-size: 13px;
    min-width: 28px;
    text-align: center;
    vertical-align: middle;
    }

.recommend .accordion .count{background:#ffd439; }
.accordion .arrow_icon{float: right;
    vertical-align: middle;
    display: inline-block;
    width: 25px;
    height: 25px;
    padding: 9px 0;}
.arrow_icon img{transition:0.3s;}
.accordion.active .arrow_icon img{transform: rotate(-180deg);}

/******* 아코디언 판넬 ********/
.panel{display: none;padding: 20px;background: #fafafb;border-top: 1px solid #ededed;border-left: 3px solid #ff6161;}
.panel span.cause{	/* font-weight: bold; */
	color: #464646;	font-size: 13px;	margin-bottom: 10px;	display: block;	line-height: 20px;}

.recommend .panel{border-left: 3px solid #ffd439;}
.recommend .panel span.cause{color: #333;}
/* 권고사항 노랑
.recommend .errorPoints > li > a:before{border-color: #ffd439 !important;}
.recommend .errorPoints > li.on > a:before{background: #ffd439 !important;}
*/

/*오류위치 리스트*/
.errorPoints > li.on > a{ font-weight: bold;}
.errorPoints > li.on > a:before{background: #717171;}
.errorPoints > li > a > span.pageNum{}
.errorPoints{}
.errorPoints > li{padding: 5px 0;}
.errorPoints > li > a{cursor: pointer; }
.errorPoints > li:not(.on) > a:hover{}
.errorPoints > li > a:before{
    content: "";
    display: inline-block;
    margin: 0 10px 0 0;
    border-radius: 50px;
    width: 3px;
    height: 3px;
    border: 1.5px solid #717171;
    vertical-align: middle;
    }

/*aside bottom

정상파일일때, .detail에 visibility:hidden 대신 display: none 으로 영역이 없어지면
flex 박스라 상단으로 올라옴 => 정상일때만 버튼 바닥에 고정해야함*/
.asideBot{padding: 20px;box-sizing: border-box;background: #fff; width: 100%;

/* 오류,권고 전혀없을때! position: absolute; bottom: 0;*/
}

.bottomBtns {text-align: center;}
.reuploadBtn ,.confirmBtn {
  width: 95%;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    box-shadow: 0px 1px 19.32px 1.68px rgb(0 0 0 / 3%);
    border: 1px solid transparent;
    border-radius: 50px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;}
.reuploadBtn{border-color: #eee;  margin-bottom: 15px;}
.reuploadBtn:hover{border-color:#e0e0e0; }
.confirmBtn{background-color: rgb(194, 194, 194);color: #fff;}
.confirmBtn.active{background-color: rgb(69, 163, 255);color: #fff;}


/**************************
2. section
**************************/

section{width: calc( 100% - 386px );height: 100%;background: #f6f6f7;position: absolute;left: 386px;display: flex;flex-direction: column;}
.sectionTop,  .sectionBot{background: #fff; position: relative;}

/*top*/
.sectionTop{border-bottom: 1px solid #ededed;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    box-sizing: border-box;}
.sectionTop ul li{display: inline-block; float:left;}
.zoomInout button{border: none;width: 40px;height: 40px;color: transparent;}
.zoomInout span{}

.zoomOut{background: url(../images/zoom.png) no-repeat left top / 200%;}
.zoomIn{background: url(../images/zoom.png) no-repeat right top / 200%;}
.zoomInout button.disable{opacity: 0.2;}

.screenFit{}
.screenFit button{border:none; background: url(../images/screenfit.png) no-repeat center; font-size: 0; width: 40px; height: 40px;}

/*canvas*/
.sectionMid{ min-height: 1;  -webkit-box-flex: 1;  flex: 1;}
.canvasArea{width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center;}
.canvasArea img{width: 45%;box-shadow: 0px 1px 19.32px 1.68px rgba(0, 0, 0, 0.03);position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

/*bottom*/
.sectionBot{width: 100%;height: 150px;border-top: 1px solid #ededed;box-sizing: border-box; display: table;}
.pagenav{text-align: center;box-sizing: border-box;display: table-cell;vertical-align: middle;}
.pagenav li{display: inline-block;margin: 0px 10px;cursor: pointer;position: relative;}
.pagenav li.on{border: 2px solid #000}
.pagenav li img{  border: 1px solid #ddd;  max-height: 59px; }

/*오류여부 아이콘*/
.pagenav li:before{content: "";display: inline-block;width: 30px;height: 30px;background: url(../images/d-notice.png) no-repeat center / 26px; position: absolute;top: -15px;left: -15px;visibility: hidden;}
.pagenav li.hasError:before{visibility: visible;}