@charset "utf-8";

/* Reset CSS Document */
:root {overflow-wrap:break-word;word-break:break-word; height:100%;}
blockquote, body, button, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, select, td, textarea, th, ul {margin:0;padding:0}
fieldset, img {border:0}
dl, li, menu, ol, ul {list-style:none}
blockquote, q {quotes:none}
blockquote:after, blockquote:before, q:after, q:before {content:"";content:none}
button, input, select, textarea {vertical-align:middle;font-size:100%}
button {border:0;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none}
input:checked[type=checkbox] {background-color:#666;-webkit-appearance:checkbox}
html input[type=button], input[type=email], input[type=password], input[type=reset], input[type=search], input[type=submit], input[type=tel], input[type=text] {-webkit-appearance:none;border-radius:0}
input[type=search]::-webkit-search-cancel-button {-webkit-appearance:none}
body {background:var(--baseBackground)}
body {font-size:15px;line-height:1.5;font-weight:400;color:#333; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
a {color:#333}
a, a:active, a:hover {text-decoration:none}
address, caption, cite, code, dfn, em, var {font-style:normal;font-weight:400}
input:focus {outline:none;}
select:focus{outline: none;}


/* Default CSS Document */
/* font */
/* 원하는 폰트를 선택하여 body{font-family:폰트명} 적용 */
@font-face {
	font-family: 'NanumSquare';
	src: url('/cmmn/font/framework/clety/NanumSquareR.woff') format('font-woff'); /* 나눔스퀘어 */
}
@font-face {
	font-family: 'NanumGothic';
	src: url('/cmmn/font/framework/clety/NanumGothic.woff') format('font-woff'); /* 나눔고딕 */
}
@font-face {
	font-family: 'NotoSansKR-Regular';
	src: url('/cmmn/font/framework/clety/NotoSansKR-Regular.woff') format('font-woff'); /* 본고딕(NotoSansKR) */
}
@font-face {
	font-family: 'NanumMyeongjo';
	src: url('/cmmn/font/pdf/NanumMyeongjo.woff') format('woff'); /* 폰트 파일의 경로와 형식 지정 */
}
@font-face {
	font-family: 'NanumBarunGothic';
	src: url('/cmmn/font/pdf/NanumBarunGothic.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}


@font-face {
	font-family: 'NanumBrush';
	src: url('/cmmn/font/pdf/NanumBrush.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}
@font-face {
	font-family: 'NanumPen';
	src: url('/cmmn/font/pdf/NanumPen.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}
@font-face {
	font-family: 'HakgyoansimGaeulsopung';
	src: url('/cmmn/font/pdf/HakgyoansimGaeulsopungB.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}
@font-face {
	font-family: '김대건';
	src: url('/cmmn/font/pdf/솔뫼김대건Medium.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}
@font-face {
	font-family: 'KCCGanpan';
	src: url('/cmmn/font/pdf/KCCGanpan.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}
@font-face {
	font-family: 'SuseongHyejeong';
	src: url('/cmmn/font/pdf/SuseongHyejeong.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}
@font-face {
	font-family: 'EBS훈민정음SB';
	src: url('/cmmn/font/pdf/EBS훈민정음SB.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}


@font-face {
	font-family: 'LXGWWenKaiTC';
	src: url('/cmmn/font/pdf/LXGWWenKaiTC-Bold.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}
@font-face {
	font-family: 'ChocolateClassicalSans';
	src: url('/cmmn/font/pdf/ChocolateClassicalSans-Regular.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}
@font-face {
	font-family: 'NotoSansTC';
	src: url('/cmmn/font/pdf/NotoSansTC-ExtraBold.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}


@font-face {
	font-family: 'Pretendard-Regular';
	src: url('/cmmn/font/pdf/Pretendard-Regular.woff') format('woff'); /* 폰트 파일의 경로와 형식 지정 */
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Pretendard Variable';
	src: url('/cmmn/font/framework/clety/PretendardGOVVariable.woff2') format('woff'); /* Pretendard GOV */
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'EBS훈민정음SB';
	src: url('/cmmn/font/pdf/EBS훈민정음SB.ttf') format('truetype'); /* 폰트 파일의 경로와 형식 지정 */
}

*{ box-sizing: border-box;}
body{font-family: 'Pretendard Variable'; color:#333; height:100%;}
main.pc{min-width: 1600px; height:100%;}
main form{height:100%;}

/* padding */
.pd-0{padding: 0 !important;}
.pd-1{padding: 10px !important;}
.pd-2{padding: 20px !important;}
.pd-3{padding: 30px !important;}
.pd-4{padding: 40px !important;}

.pdl-10{padding-left: 10px !important;}
.pdl-20{padding-left: 20px !important;}
.pdl-30{padding-left: 30px !important;}
.pdl-40{padding-left: 40px !important;}
.pdl-50{padding-left: 50px !important;}

.pdr-10{padding-right: 10px !important;}
.pdr-20{padding-right: 20px !important;}
.pdr-30{padding-right: 30px !important;}
.pdr-40{padding-right: 40px !important;}
.pdr-50{padding-right: 50px !important;}

.pdt-10{padding-top: 10px !important;}
.pdt-20{padding-top: 20px !important;}
.pdt-30{padding-top: 30px !important;}
.pdt-40{padding-top: 40px !important;}
.pdt-50{padding-top: 50px !important;}

.pdb-10{padding-bottom: 10px !important;}
.pdb-20{padding-bottom: 20px !important;}
.pdb-30{padding-bottom: 30px !important;}
.pdb-40{padding-bottom: 40px !important;}
.pdb-50{padding-bottom: 50px !important;}

/* margin */
.mg-0{margin: 0 !important;}
.mg-1{margin: 10px !important;}
.mg-2{margin: 20px !important;}
.mg-3{margin: 30px !important;}
.mg-4{margin: 40px !important;}

.mgl-10{margin-left: 10px !important;}
.mgl-20{margin-left: 20px !important;}
.mgl-30{margin-left: 30px !important;}
.mgl-40{margin-left: 40px !important;}
.mgl-50{margin-left: 50px !important;}

.mgr-10{margin-right: 10px !important;}
.mgr-20{margin-right: 20px !important;}
.mgr-30{margin-right: 30px !important;}
.mgr-40{margin-right: 40px !important;}
.mgr-50{margin-right: 50px !important;}

.mgt-10{margin-top: 10px !important;}
.mgt-20{margin-top: 20px !important;}
.mgt-30{margin-top: 30px !important;}
.mgt-40{margin-top: 40px !important;}
.mgt-50{margin-top: 50px !important;}
.mgt-60{margin-top: 60px !important;}
.mgt-70{margin-top: 70px !important;}
.mgt-80{margin-top: 80px !important;}
.mgt-90{margin-top: 90px !important;}

.mgb-10{margin-bottom: 10px !important;}
.mgb-20{margin-bottom: 20px !important;}
.mgb-30{margin-bottom: 30px !important;}
.mgb-40{margin-bottom: 40px !important;}
.mgb-50{margin-bottom: 50px !important;}

.m-auto{margin:auto;}

/* align */
.text-left{text-align: left !important;}
.text-center{text-align: center !important;}
.text-right{text-align: right !important;}

.fl-l{float: left !important;}
.fl-r{float: right !important;}
.clear{clear: both;}

.container-center{display: flex; align-items: center; justify-content: center;}

/* position */
.position-r{position: relative !important;}
.position-a{position: absolute !important;}

/* display */
.display-n{display: none !important;}
.display-inlineB{display: inline-block !important;}
.display-b{display: block !important;}
.display-f{display: flex !important;}

/* width */
.wp-30{width: 30% !important}
.wp-40{width: 40% !important}
.wp-50{width: 50% !important;}
.wp-60{width: 60% !important;}
.wp-70{width: 70% !important;}
.wp-80{width: 80% !important;}
.wp-90{width: 90% !important;}
.wp-100{width: 100% !important;}
.wp-20{width: 20% !important}
.wd-auto{width:auto !important}
.wd-100{width: 100px !important;max-width: none !important;}
.wd-150{width: 150px !important;max-width: none !important;}
.wd-200{width: 200px !important;max-width: none !important;}
.wd-300{width: 300px !important;max-width: none !important;}
.wd-350{width: 350px !important;max-width: none !important;}
.wd-400{width: 400px !important;max-width: none !important;}
.wd-500{width: 500px !important;max-width: none !important;}
.wd-550{width: 550px !important;max-width: none !important;}
.wd-600{width: 600px !important;max-width: none !important;}
.wd-700{width: 700px !important;max-width: none !important;}
.wd-800{width: 800px !important;max-width: none !important;}
.wd-850{width: 850px !important;max-width: none !important;}
.wd-900{width: 900px !important;max-width: none !important;}
.wd-1000{width: 1000px !important;max-width: none !important;}
.wd-1100{width: 1100px !important;max-width: none !important;}
.wd-1200{width: 1200px !important;max-width: none !important;}
.wd-1300{width: 1300px !important;max-width: none !important;}

/* height */
.vhp-100{height: 100vh !important}
.hp-100{height: 100% !important}
.hp-600{height: 600px !important}
.hp-650{height: 650px !important}
.hp-500{height: 500px !important}
.hp-200{height: 200px !important}
.hp-300{height: 300px !important}
.hp-auto{height: auto !important;}
.hp-50{height: 50px !important;}
.hp-70{height: 70px !important;}
.hp-30{height: 30px !important;}

/* font-size */
.fs-12{font-size: 12px !important;}
.fs-14{font-size: 14px !important;}
.fs-16{font-size: 16px !important;}
.fs-17{font-size: 17px !important;}
.fs-18{font-size: 18px !important;}
.fs-19{font-size: 19px !important;}
.fs-20{font-size: 20px !important;}

/* color */
.xls-green{color:#1e6c43}
.pdf-red{color:#b30b00;}
.doc-blue{color:#115aec}
.etc-black{color:#333;}

/* bg color */
.bg-black{background-color: #333; color: #fff}
.bg-red{background-color: #b30b00; color: #fff}
.bg-blue{background-color: #115aec; color: #fff}
.bg-green{background-color: #1e6c43; color: #fff}
.bg-logo{border-bottom: 1px solid #333;}

.bg-error{background-color: #da5359; color: #fff}
.bg-warning{background-color: #e07400; color: #fff}
.bg-success{background-color: #286fed; color: #fff}
.bg-confirm{background-color: #333; color: #fff}

/* font-style */
.f-bold{font-weight: bold;}

/* essential style*/
.essential::after{content: '*'; color: #f00; position: relative; top: 2px; left:5px;}
.essentialbf::before{content: '*'; color: #f00; position: relative; top: 2px; left:-3px;}

/* border */
.border-none{border: none !important;}

/* form */
input[type=text]{border: none;}
input:focus {outline:none;}
input[readonly]{background-color:#eee;}

/* form button */
.btn{padding: 8px 20px; font-size: 14px; cursor:pointer;}
.btnS{padding: 8px 10px; font-size: 14px; cursor:pointer;}
.btnM{padding: 10px 25px; font-size: 14px; cursor:pointer;}
.btnL{padding: 15px 30px; font-size: 14px; cursor:pointer;}
.y-button{background: #f7ea48;}
.yLine-button{border:1px solid #ffc107; color: #ffc107}
.b-button{background: #333; color: #fff;}
.yes{margin-right: 10px;}
.g-button{background: #aaa;}
.rLine-button{border:1px solid #ff0000; color: #ff0000;}
.line-button{border: 1px solid #333;}
.messagebtnSet button{border-radius: 3px; padding: 10px 0; width: 150px}
.error-button{background: #be0a12; border: 1px solid #eb424a;}
.success-button{background: #0d4fc5; border: 1px solid #0d4fc5; color: #fff; font-weight: bold;}
.warning-button{background: #c16400; border: 1px solid #c16400; color: #fff; font-weight: bold;}
.btn:hover{filter: contrast(150%); transition: all .3s;}
.btnS:hover{filter: contrast(150%); transition: all .3s;}
.btnM:hover{filter: contrast(150%); transition: all .3s;}
.btnL:hover{filter: contrast(150%); transition: all .3s;}
.btn:not(:hover){transition: .3s ease-out;}
.btnM:not(:hover){transition: .3s ease-out;}
.btnL:not(:hover){transition: .3s ease-out;}
.btnHoverSet button{padding:5px 10px; border-radius:3px;}
.btnHoverSet .line-button:hover{background-color: #000; color: #fff; transition: all .3s;}
.btnHoverSet .yLine-button:hover{background-color: #ffc107; color: #5b5814; transition: all .3s;}
.btnHoverSet .rLine-button:hover{background-color: #ff0000; color: #fff; transition: all .3s;}
.btnHoverSet .btn:not(:hover){transition: .3s ease-out;}
.bookmark-button{border-radius:20px; padding:8px 8px; border: 1px solid #333;}
/* form checkbox */
input[type="checkbox"]{ display: none;}
input[type="checkbox"] + label{
  display: inline-block;
  width: 17px;
  height: 17px;
  border:1px solid #ddd;
  position: relative;
}
input[type="checkbox"]:checked + label::after{
  content: "";
	font-weight: 900;
  font-size: 14px;
  width: 15px;
  height: 15px;
  text-align: center;
	color:#fff;
	background: url('../../../images/framework/chk.png') #000;
	border:1px solid #000;
  position: absolute;
  left: 0;
  top:0;
}

/* form select */
select{border: 1px solid #ddd; padding: 4px 10px;}

/* form radio */
.radioSet{position: relative; padding-left: 25px;}
.radioSet input[type="radio"] { display: none; }
.radioSet .on { width: 20px; height: 20px; background: #ddd; border-radius: 50%; position: absolute; top: 0; left: 0; }
.radioSet input[type="radio"]:checked + .on { background: #000; }
.radioSet .on:after { content: ""; position: absolute; display: none; }
.radioSet input[type="radio"]:checked + .on:after { display: block; }
.radioSet .on:after { width: 10px; height: 10px; background: #fff; border-radius: 50%; position: absolute; left: 5px; top: 5px; }

/* 크롬 자동완성 배경 제어 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #333 !important;
}
/* switch button */
.onoff-switch-container{
  display:inline-block;
  width: 140px;
  height: 25px;
  position:relative;
}
.onoff-switch-container input[type="checkbox"]{
  position: absolute;
  width: 0px;
  height: 0px;
  overflow: hidden;
}
.onoff-switch-container input[type="checkbox"]+label{
	border: none;
  padding-left: 40px;
  line-height: 30px;
  font-size: 16px;
}
.onoff-switch-container input[type="checkbox"]+label::after{
  position:absolute;
  top:3px;
  left:3px;
  content:'';
  width: 15px;
  height: 15px;
  background: #d1d1d1;
  border-radius: 100%;
  transition: all 0.3s

}
.onoff-switch-container input[type="checkbox"]+label::before{
  position:absolute;
  top:0;
  left:0;
  content:'';
  width: 45px;
  height: 22px;
  border:1px solid #d1d1d1;
  border-radius: 20px;
  background: #f1f1f1;
  box-sizing: border-box;
}
.onoff-switch-container input[type="checkbox"]:checked + label::after {
  transform: translateX(28px);
	left:-3px;
  background: #333;
	border:none;
}
.onoff-switch-container input[type="checkbox"]:checked + label::before {
  background: #fff;
}
/* form file */
.fileSet input[type="file"]{display: none;}
.fileSet label{cursor: pointer;}
/* input 애니메이션 */
/* 로그인 스타일 */
.login p { position:relative; width:50%; height:50px; } /* 기본세팅 */
.login p label { position:absolute; left:0%; bottom:0; width:100%; height:100%; border-bottom:1px solid #000; text-align:left; pointer-events:none; }
.login p label:after { content:""; position:absolute; left:0; bottom:-1px; width:0; height:100%; border-bottom:3px solid #5fa8d3; transition:all .3s ease; } /* 파란색 가로줄 */
.login p label span { position:absolute; left:0; bottom:5px; transition:all .3s ease; }
.login p input:focus + label span,
.login p input:valid + label span { transform:translateY(-150%); font-size:14px; color:#5fa8d3; }  /* input에 글을 입력하고 포커스가 지나간 상태에서 제어하려면 valid 선택자를 써야한다. */
/* 포커스 될 때 label span(name)이 위로 올라감 */
.login p input:focus + label::after,
.login p input:valid + label::after { width:100%; transform:translateX(0); }
/* 포커스 될 때 파란색 가로줄이 생김 */

/* 마우스 이펙트 */
/* Reveal */
.hvr-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-color: #2098D1;
  border-style: solid;
  border-width: 0;
  -webkit-transition-property: border-width;
  transition-property: border-width;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  border-width: 4px;
}
/* 마우스 오버시 버튼배경 채우기 효과 css3 */
.morePage {width: 100%; text-align:center;}
.morePage button{width:400px; padding:10px 0; text-align:center; border:1px solid #333; display: inline-block; margin-left:-155px;}

.morePage > a {
	display:inline-block;
	letter-spacing: -1px;
	width: 300px;
	border:1px solid #333;
	margin-left:-115px;;
	text-align: center;
	color: #ffffff;
	text-decoration:none;
	color:#333;
	font-weight:bold;
	padding: 10px 0;
	position: relative;
	z-index: 1;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.morePage > a:after {
	content: "";
    width: 0%;
    height: 100%;
    top: 0;
    position: absolute;
    left: 0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    background: #333;
}
.morePage > a:hover {
    color: #fff;
}
.morePage > a:hover:after {
    width: 100%;
    z-index: -1;
}

/* 아코디언 메뉴 */
.accordionTitle{
  position: relative;
  padding: 17px 0;
  cursor: pointer;
  border-bottom: 1px solid #333;
}
.accordionTitle.on>span{
  font-weight: bold;
  color: #000;
}
.accordionBody {
  display: none;
  overflow: hidden;
  background-color: #f4f4f2;
  padding: 10px 0;
}
.arrowIcon {
  position: absolute;
  top:50%; right: 10px;
  transform: translate(0, -50%);
}
.accordionTitle .arrowTop {
  display: none;
}
.accordionTitle .arrowBottom {
  display: block;
}
.accordionTitle.on .arrowBottom {
  display: none;
}
.accordionTitle.on .arrowTop {
  display: block;
}

/* layout Style */
.card{padding:15px 20px;}




/* CLETY CSS Document */
/* login */
.loginBody{background: #f5f5f5}
.loginBody main{position: relative;}
.loginBody .login{width: 500px; height: 650px; margin: 155px auto; text-align: center; background: #fff; border-radius:20px;}
.loginBody .login h1{padding-bottom: 20px; background-color: #333; color: #fff; padding-top: 20px; margin-bottom: 25px; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.loginBody .login .loginContent{padding:5px 35px;}
.loginBody .login .chkRemember{text-align: left; position: relative;padding-top: 25px;}
.loginBody .login .chkRemember span{position: absolute; top: -3px; display: inline-block; padding-left: 5px; font-weight: bold; padding-top: 25px;}
.loginBody .login .language{text-align: left; border-bottom: 1px solid #333; margin:20px 0;}
.loginBody .login .language select{border: none; width: 100%; font-weight: bold; padding:10px;}
.loginBody .login .notice{margin-top: 80px; cursor: pointer;}
.loginBody .login .notice span{font-weight: bold;}
.loginBody .login .notice svg{margin-right: 5px;}
.loginBody .login .loginBtn{margin-top: 20px; padding: 0 15px;}
.loginBody .login .loginBtn div{background: #333; padding: 25px 0; color: #fff; width: 100%; font-size: 18px; font-weight: bold; border-radius:20px;}
/* 로그인 클릭시 효과 수정 */
.divInput { position:relative; width:100%; height:50px; } /* 기본세팅 */
.divInput input { box-sizing:border-box; padding:20px 0 0; width:100%; height:100%; border:0 none; outline:none; font-size: 18px; font-weight: bold;}
.divInput label { position:absolute; left:0%; bottom:0; width:100%; height:100%; border-bottom:1px solid #aaa; text-align:left; pointer-events:none; }
.divInput label:after { content:""; position:absolute; left:0; bottom:-1px; width:0; height:100%; border-bottom:2px solid #333; transition:all .3s ease; } /* 파란색 가로줄 */
.divInput label span { position:absolute; left:0; bottom:5px; transition:all .3s ease; font-size:18px; font-weight: bold;}
.divInput input:focus + label span, 
.divInput input:valid + label span { transform:translateY(-150%); font-size:14px; color:#333; }  /* input에 글을 입력하고 포커스가 지나간 상태에서 제어하려면 valid 선택자를 써야한다. */
/* 포커스 될 때 label span(name)이 위로 올라감 */
.divInput input:focus + label::after,
.divInput input:valid + label::after { width:100%; transform:translateX(0); } 
/* 포커스 될 때 파란색 가로줄이 생김 */
/* main */
/* header */
header h1,header ul,header li,header nav{display: inline-block; font-size :15px;}
header .topNav h1{border-right: 1px solid #ddd; width: 231px; height: 87px; padding-top: 26px; text-align: center;}
header h1.iconHeader{width:90px; display: none;}
header h1 a{font-size: 24px; margin-right: 25px; font-weight: normal;}
/* web nav */
header .webNav{display: inline-block; padding-left:10px;}
header .webNav h2{ font-weight: normal; color:#999}
header .webNav span{display:inline-block; margin-right:10px; color:#333;}

/* 네비게이션 */
header div.topNav{border-bottom: 1px solid #ddd; background:#fff; position: relative; height: 87px;}
.topFix{position: fixed; top: 0; width: 100%; background-color: #fff; z-index: 22; padding-top: 10px !important; }

/* main leftmenu modal */
.mainContent{display: flex;}

/* icon nav */
.iconNav{border-right:1px solid #ddd; width:90px; position: relative; display: none;}
.iconNav li.openIcon{position: absolute; right:-15px; top:45%; height: 30px; width: 30px; background:#333; color:#fff; padding:4px 0 0 0; border: 1px solid #ddd; border-radius: 100px; text-align: center; cursor: pointer;}
.iconNav .btnStart button{color:#f7ea48;font-size:35px; padding:0;}
.iconNav li{padding: 8px 25px; text-align: center;}
.iconNav li a{font-size:25px; color:#999}
.iconNav li a.on{color:#333;}
.iconNav li.line{border-bottom: 1px solid #ddd;}
/* left nav */
.leftMenu{position: relative; background-color:#fff; border-right: 1px solid #ddd; width:231px; padding-bottom: 36px;}
.leftMenu .closeIcon{position: absolute; right:-15px; top:45%; height: 30px; width: 30px; background:#333; color:#fff; padding-top:4px; border: 1px solid #ddd; border-radius: 100px; text-align: center; cursor: pointer;}
.leftMenu .startBtn{padding:24px 0; text-align: center;}
.leftMenu .startBtn button{display:inline-block; padding:15px 35px;}
.leftMenu dl{margin-left: 20px; margin-bottom: 35px;}
.leftMenu dl dt{font-size:15px; color:#aaa !important; margin: 15px 0; color:#555; position: relative;}
.leftMenu dl dt hr{display: inline-block; width:170px; position: absolute; right:15px; top:3px; height:1px; border: 0; background: #e1e1e1;}
.leftMenu dl+dl dt hr{width:130px;}
.leftMenu dl+dl+dl dt hr{width:100px;}
.leftMenu dl+dl+dl+dl dt hr{width:150px;}
.leftMenu dl dd{font-size: 17px; margin-bottom:15px;}
.leftMenu dl dd span{margin-right:10px;}
.leftMenu dl dd a{ color:#666}
.leftMenu dl dd a.on{color:#333; font-weight: bold;}
/* right nav */
header ul li a{padding: 28px 10px;}
header .navRight{float: right; margin:26px 5px;}
header nav.navRight li:first-child a{font-size: 15px;}
header nav.navRight li:first-child{padding-right: 10px; border-right: 1px solid #ddd;}
header nav.navRight li:nth-child(2) a{padding: 8px 12px; border-radius: 150px; background: #dcdcdc; color: #fff; margin:0 0 0 10px; font-size: 16px;}
header nav.navRight li:nth-child(3){position: relative; padding-right: 15px;}
header nav.navRight li:nth-child(3) a{font-size: 15px;}
header nav.navRight li:nth-child(3) span{position: absolute; right: 8px;}
header nav.navRight li:last-child{margin: 0 15px;}
header nav.navRight .popLayer{display: none; position: absolute; width: 100%; background: #fff; box-sizing: content-box; border-radius: 3px; border:1px solid #333; padding: 10px 0 10px 20px; top:40px; left: -10px;}
header nav.navRight .popLayer a{display: block; padding: 5px 0;}
header nav.navRight .popLayer a:hover{font-weight: bold;}
/* sub nav */
header div.subNav{padding:15px 0 10px 55px; margin-bottom: 10px; border-bottom: 1px solid #ddd; font-size: 17px; color: #999; font-weight: bold; width:100%;}
header div.subNav li+li{font-size: 14px; padding-left:15px; margin-left: 15px; font-weight: normal;display: grid; justify-content: right; margin-top: -20px; margin-right: 50px;}
header div.subNav li+li strong{color:#333;}
header div.subNav ul svg{font-size: large;}

/* sub nav bg */
header div.topNav+div.bgBlue{background-color:#1d65d0 !important; color:#fff !important;}
header div.topNav+div.bgBlue li+li strong{color:#fff !important;}
header div.topNav+div.bgLGreen{background-color:#d5f9d8 !important; color:#666 !important;}
header div.topNav+div.bgBlue li+li strong{color:#333 !important;}
header div.topNav+div.bgOrang{background-color:#f28121 !important; color:#fff !important;}
header div.topNav+div.bgOrang li+li strong{color:#fff !important;}
header div.topNav+div.bgBlack{background-color:#000 !important; color:#fff !important;}
header div.topNav+div.bgBlack li+li strong{color:#fff !important;}

/* content */
/* article */
article.content{display: flex; padding: 20px 25px 0 25px; flex-wrap: nowrap; justify-content:center; flex-grow: 1}
article h2{font-weight: normal; font-size: 22px; margin-bottom: 15px; font-weight: bold; padding:10px; border-bottom: 1px solid #ddd;}
article .leftContent{width: 50%}
article .rightContent{width: 50%}
article .rightTitleIcon{float:right; cursor: pointer; font-size: 22px;}



/* 사용자정보 */
article .rightContent{padding:25px 15px;}
article .rightContent .mainInfo{padding:10px; background: #fff; border:1px solid #ddd; border-radius: 5px; width: 100%; height:225px; transition: .2s ease-out;}
article .rightContent .mainInfo:hover{box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); transition: .2s ease-out;}
article .rightContent .mainInfo .userInfo{display: flex; padding: 10px; box-sizing: content-box; align-items: stretch;}
article .rightContent .mainInfo .userInfo figure{background: #ececec; padding: 10px 15px; margin: 0; display: table-cell; vertical-align: middle;}
article .rightContent .mainInfo .userInfo figure img{position: relative;top: 50%;transform: translateY(-50%); width:80px;}
article .rightContent .mainInfo .userInfo dl{margin:0 15px 0 30px; width:350px;}
article .rightContent .mainInfo .userInfo dl dt{font-weight: bold; font-size: 18px; margin:0 30px 10px 0; position: relative;}
article .rightContent .mainInfo .userInfo dl dt span{font-size: 12px; background: #286fed; color: #fff; padding:1px 4px 2px 4px; border-radius: 3px; position: absolute; top: 3px; right: -25px;}
article .rightContent .mainInfo .userInfo dl dd{margin-bottom: 5px; color: #999; font-size: 14px;}
article .rightContent .mainInfo .userInfo dl dd button{text-align: center; width: 100%; margin-top:15px; font-weight: bold; background-color: #f7ea48; padding: 5px 0;}



/* 나의 문서 현황 */
article .leftContent{padding:25px 15px;}
article .leftContent div.myFile{padding:10px; background: #fff; border:1px solid #ddd; border-radius: 5px; width: 100%; height:225px; transition: .2s ease-out;}
article .leftContent div.myFile:hover{box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); transition: .2s ease-out;}
article .leftContent div.myFile .fileSituation{padding:0px 0 0px 25px; box-sizing: border-box;}
article .leftContent div.myFile dl{display: inline-block; padding:10px 0px 34px 0; width: 23%;}
article .leftContent div.myFile dt{font-size: 18px;margin-bottom: 15px;position: relative;padding-right: 10px;text-align: center;}
article .leftContent div.myFile dl+dl dt span{background-color: #0472d9}
article .leftContent div.myFile dl+dl+dl dt span{background-color: #9fd904}
article .leftContent div.myFile dl+dl+dl+dl dt span{background-color: #d604d9}
article .leftContent div.myFile dd{margin-bottom: 15px; font-size: 20px; position: relative; text-align: center; font-weight: bold;}
article .leftContent div.myFile dt+dd span{display: inline-block; position: absolute; top:10px; left: 10px; height: 7px; width: 7px; background-color: #d99604; }
article .leftContent div.myFile dt+dd span.dotBlue{background-color: #0472d9;}
article .leftContent div.myFile dt+dd span.dotGreen{background-color: #9fd904;}
article .leftContent div.myFile dt+dd span.dotPurple{background-color: #d604d9;}
article .leftContent div.myFile dd+dd{font-size: 14px; margin:20px 0 0 0; font-weight: normal; position: relative;}
article .leftContent div.myFile dd+dd span{display: inline-block; padding-left: 10px; font-weight: normal; font-size: 12px;}
/* 바로 시작하기 */
article .rightContent div.quickStrat .quickBanner{display: flex;}
article .rightContent div.quickStrat dl{flex-grow: 1; box-sizing: content-box; position: relative; background-color: #286fed; padding: 41px 134px 52px 40px; margin-right: 10px; color: #fff; border-radius: 3px;}
article .rightContent div.quickStrat dl+dl{margin-right: 0;}
article .rightContent div.quickStrat dl dt{font-size: 24px; margin-bottom: 15px; }
article .rightContent div.quickStrat dl dd{color: #ccdeff; letter-spacing: -1px;}
article .rightContent div.quickStrat dl dd+dd{position: absolute; top:40px; right: 35px; font-size: 40px; color: #fff;}

article .rightContent div.quickStrat dl+dl{background-color: #286fed; border: 1px solid #ddd; color: #fff;}
article .rightContent div.quickStrat dl+dl dd{color: #ccdeff;}
article .rightContent div.quickStrat dl+dl dd+dd{color: #fff;}
/* 바로시작 마우스 이펙트 */
article .rightContent div.quickStrat dl{
  cursor: pointer;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
article .rightContent div.quickStrat dl:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-color: rgba(0,0,0,0.5);
  border-style: solid;
  border-width: 0;
  -webkit-transition-property: border-width;
  transition-property: border-width;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
article .rightContent div.quickStrat dl:hover:before, article .leftContent div.quickStrat dl:focus:before, article .leftContent div.quickStrat dl:active:before{
  -webkit-transform: translateY(0);
  transform: translateY(0);
  border-width: 4px;
}

/* 서비스 지원 */
article .leftContent div.serviceSupport ul{padding:35px 16px; border: 1px solid #ddd; border-radius: 3px; width: 900px; box-sizing: content-box;}
article .leftContent div.serviceSupport li{display: inline-block; font-size: 18px; font-weight: bold; text-align: center; padding: 20px 42px; border-right: 1px solid #ddd;}
article .leftContent div.serviceSupport li span{display: block; margin-bottom: 20px; font-size: 30px;}
article .leftContent div.serviceSupport li:last-child{border-right: none; padding-right: 0}



/* 메뉴얼 다운로드 배너 */
article .leftContent div.manualBanner{margin-top: 20px;}
article .leftContent div.bannerPg{border:1px solid #ddd; border-radius: 3px;}
article .leftContent div.manualBanner figuer{display: block; border: 1px solid #ddd; cursor: pointer; height: 191px;}
article .leftContent div.manualBanner figuer span:first-child{display: inline-block; padding-top:15px;}
article .leftContent div.manualBanner figuer .fl-r img{width: 100%;}


/* 서비스 지원 */
article .leftContent div.serviceSupport ul{padding:35px 16px; border: 1px solid #ddd; border-radius: 3px; width: 900px; box-sizing: content-box;}
article .leftContent div.serviceSupport li{display: inline-block; font-size: 18px; font-weight: bold; text-align: center; padding: 20px 42px; border-right: 1px solid #ddd;}
article .leftContent div.serviceSupport li span{display: block; margin-bottom: 20px; font-size: 30px;}
article .leftContent div.serviceSupport li:last-child{border-right: none; padding-right: 0}

/* ul 코딩시 사용 */
article .listStyle{padding:10px; margin:35px 0; background: #fff; border:1px solid #ddd; border-radius: 5px; width: 100%; height:275px; transition: .2s ease-out;}
article .listStyle:hover{box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); transition: .2s ease-out;}

/* 메인 테이블 */
article .mainTable{width:100%;}
article .mainTable tr td{font-size: 14px; font-weight: bold; text-align: left; padding : 0px 10px 20px 10px; color: #999; cursor: pointer;}
article .mainTable tr > .title{font-size: 14px; font-weight: normal; text-align: left; padding : 0px 10px 20px 10px; cursor: pointer; color:#000000;}

article .mainTable span{border-radius: 100px; padding: 3px 10px; font-size: 12px; font-weight:normal;}
article .mainTable span.blueIcon{background-color: #deecfc; color: #003975;}
article .mainTable span.redIcon{background-color: #fff4f4; color: #ff5151}
article .mainTable span.pupIcon{background-color: #fcdeed; color: #75003b}
article .mainTable span.orangeIcon{background-color: #fff4f4; color: #d99604}
article .mainTable span.greenIcon{background-color: rgb(220, 254, 232); color: rgb(0, 128, 64)}


/* 검색 */
.bbsSearch{display: grid; width: 100%; grid-template-columns: 435px 230px auto ; column-gap: 30px; background: #fff;}
.searchFix{position: fixed; top:47px; background-color: #fff; z-index: 44; padding: 25px 0; box-sizing: border-box;}
.reset{position: absolute; top:12px; right:20px;}
/* 당력 */
.dateSearch{padding: 7px 25px; border: 1px solid #ddd; border-radius: 150px; color: #555; font-size: 17px; position: relative;}
.dateSearch input[type="text"]{text-align: center; cursor: pointer; font-size: 15px;}
/* 텍스트 검색 */
.textSearch{padding:10px 20px 10px 30px; width: 100%; box-sizing: border-box; background: #f5f5f5; border-radius: 100px;}
.textSearch input[type="text"]{width: 90%; font-size: 15px; background: #f5f5f5;}
.searchBtn{float: right; padding-top: 3px;}
/* 텍스트 검색 세트 */
.textSearchSet{ border:1px solid #ccc; display: flex;}
.textSearchSet div{flex-grow: 8;}
.textSearchSet div input{padding:10px 0 8px 10px;}
.textSearchSet div button{padding:10px 25px; font-size:15px;}
.textSearchSet div:nth-child(3){flex-shrink: 0; flex-grow: 1;}
/* 첨부파일 hover 레이어 */
.layerHover{position: relative;}
.hoverLayer{display: none; position: absolute; font-size: 12px; border: 1px solid #aaa; background-color: #fff; z-index: 9999; padding: 10px;}
.hoverLayer span{display: block;}
/* 게시판 list */
.bbsList{position: relative;}
.bbsList table{width: 100%; margin: 25px 0; }
.bbsList table tbody tr:hover{background: #eee; cursor: pointer;}
.bbsList table th{padding: 15px; border-bottom: 2px solid #333; font-weight: bold;}
.bbsList table th .chkTop{position: relative;; z-index: 33;}
.bbsList table td{text-align: center; padding: 15px; font-size: 15px; color:#777}
.bbsList .bbsSituation{font-size: 12px;}
.bbsList .bbsSituation span{border-radius: 100px; padding: 3px 10px; font-weight: bold;}
.bbsList .bbsSituation span.blueIcon{ background-color: #deecfc; color: #003975;}
.bbsList .bbsSituation span.redIcon{background-color: #fff4f4; color: #ff5151}
.bbsList .bbsSituation span.pupIcon{background-color: #fcdeed; color: #75003b}
.bbsList .bbsSituation span.orangeIcon{background-color: #fff4f4; color: #d99604}
.bbsList .bbsSituation span.greenIcon{background-color: rgb(220, 254, 232); color: rgb(0, 128, 64)}
.bookmarkIcon{color:#333}
/* 효과용 임시, 나중에 삭제 */
.listScroll{height: 1200px !important;}
/* 상태바 hover */
.tableHover{display: none; position: absolute; padding:15px 0 15px 85px; width: 100%; background-color: #fff; z-index: 1; border-radius: 3px; box-sizing: border-box;}
.tableHover li{display: inline-block; margin-right: 15px; font-size: 14px; color: #333}
.tableHover li a{color: #777}
.tableHover li a:hover{color: #333}
.tableHover li span{display: inline-block; border-radius: 100px; background: #555; color: #fff; padding: 2px 10px; font-size: 13px; margin-left: 5px;}
.tableHover li:nth-child(3){padding-right: 20px; margin-right: 15px; border-right: 1px solid #999;}
/* 페이징 */
.pageIndi div{font-size: 14px;}
.pageIndi .pageNum{display: flex; justify-content: center;}
.pageIndi .pageNum li{display: inline-block; padding: 2px 10px; cursor: pointer;}
.pageIndi .pageNum li a{color: #aaa; font-size: 12px;}
.pageIndi .pageNum li a:hover{color: #000; transition: .5s ease-out;}
.pageIndi .pageNum li a:not(:hover){transition: .5s ease-out;}
.pageIndi .pageNum li.active{background: #555; padding: 2px 10px;}
.pageIndi .pageNum li.active a{ color: #fff; font-size: 13px; transition: background-color .5s ease;}
.pageIndi .pageNum li.active:hover{background: #000; transition: .5s ease-out;}
.pageIndi .pageNum li.active:not(:hover){transition: .5s ease-out;}

/* tree */
article.content .leftTree{width: 700px; margin-right: 20px;}
article.content .leftTree .searchTree{position: relative;  flex: 0 0 auto;}
article.content .leftTree .textSearch{width: 55%; display: inline-block;}
article.content .leftTree .rightBtn{position: absolute; top:1px; right: 0; display:flex;}
article.content .leftTree .rightBtn div{margin-left:5px;}
article.content .leftTree .treeList{width:100%; height: 700px; border: 1px solid #ddd; border-radius: 3px; margin-top: 10px; overflow-y: auto;}
article.content .leftTree .tui-tree-content-wrapper{width:100%;}
article.content .leftTree .tui-tree-drop{height:auto !important;}
article.content .leftTree .tui-tree-line{width:698px;}



article.content .rightBbs{position: relative; flex-grow: 1; padding: 5px 15px;}
article.content .rightBbs .textSearch{width: 80%; display: inline-block;}
article.content .rightBbs .rightBtn{position: absolute; top:8px; right: 20px;}
article.content .rightBbs .bbsList .tableList{height: auto !important}

/* pdf page */
.viewerContainer{display: flex; flex-direction: column; position: absolute; width: 100%; height: 100%;}
.viewerContainer header{display: flex;flex-direction: row;padding:15px 20px;border-bottom: 1px solid #333;position: fixed;width: 100%;background: #fff;z-index: 99999}
.viewerContainer header h1{flex-grow: 1; font-size: 20px;}
.viewerContainer header div{flex-grow: 1;}
.viewerContainer header .zoom{text-align: center;}
.viewerContainer header .zoom button{padding: 2px 10px 4px 10px; font-size: 20px; font-weight: bold;}
.viewerContainer header .zoom button.minus{padding:  2px 13px 4px 13px;}
.viewerContainer header .formButton{text-align: right;}
.viewerContent{flex: 1; display: flex; align-content: stretch;}
/*.viewerContent h2{font-size: 18px; font-weight: bold; box-sizing: border-box; padding:0 0 20px 10px; border-bottom: 1px solid #ddd; margin: 0;}*/
.viewerContainer .viewerLeft{width: 180px; flex-shrink: 0; padding: 20px 25px; border-right: 1px solid #ddd; display: table-row;  background: #fff;}
.viewerContainer .viewerLeft .leftMenu{width:100%; border:none;}
.viewerContainer .viewerLeft li{padding: 10px 5px; border-bottom: 1px solid #ddd;}
.viewerContainer .viewerLeft li ul{border-top:1px solid #ddd; margin-top: 15px;}
.viewerContainer .viewerLeft li ul li{padding-left: 15px; font-weight: bold; font-size: 15px; border: none}
.viewerContainer .viewerDetail{flex-grow: 1; text-align: center; background-color:#f5f5f5}
.viewerContainer .vierwerTool{position: absolute; z-index: 9999999; top:70%; left:50%; background: #167fef; border-radius: 4px; padding:8px 15px; color:#fff;}
.viewerContainer .vierwerTool::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;  
  border-width: 5px;
  border-style: solid;
  border-color: #167fef transparent transparent transparent;;
}
.viewerContainer .viewerFoldRight{padding:25% 3px; background-color:#ccc; border-radius: 40px; margin-top:70px; cursor: pointer;display: none;}
.viewerContainer .viewerFoldLeft{padding:25% 3px; background-color:#ccc; border-radius: 40px; margin-top:70px; cursor: pointer;display: none;}
.viewerContainer .viewerFoldOn{display: block !important;}
.viewerContainer .viewerRight{width: 250px; flex-shrink: 0; padding: 80px 25px; border-left: 1px solid #ddd; background: #fff;}
.viewerContainer .viewerRight li{padding:5px 0 13px 15px; margin-bottom: 10px; border-bottom: 1px solid #ccc;}
.viewerContainer .viewerRight li strong{display: inline-block; margin-right: 20px;}
.viewerContainer .viewerRight li input[type="number"]{border:1px solid #aaa; padding: 5px; width: 170px;}
.viewerContainer .viewerRight li select{border:1px solid #aaa; padding: 5px; width: 170px; }
.viewerContainer .viewerRight li input[type="color"]{border: none; width: 170px;}
.viewerContainer .viewerRight li input[type="text"]{width: 170px;}
.viewerContainer .viewerRight li.boldStyle span{cursor: pointer; padding: 5px;}
.viewerContainer .viewerRight li.boldStyle span.active{background: #333; color: #fff; padding: 5px; border-radius: 4px; transition: all .5s}
.viewerContainer .viewerRight li .borderLine{border:1px solid #aaa; padding:5px;}
/* preview */
.viewerContainer .previewContent{width: 250px;}
.viewerContainer .preview{width: 250px; position: fixed; background: #fff; height: 100%; overflow: overlay; padding: 80px 25px 80px 25px;}
.viewerContainer .preview::-webkit-scrollbar{width: 0.3vw;}
.viewerContainer .preview::-webkit-scrollbar-thumb{background-color: hsla(0, 0%, 42%, 0.3); border-radius: 10px;}
.viewerContainer .preview::-webkit-scrollbar-track{background-color: rgba(0,0,0, 0.1); border-radius: 10px;}
.viewerContainer .preview h3{margin-bottom: 20px;}
.viewerContainer .preview li{padding: 0; border: none; margin-bottom: 30px;}
.viewerContainer .preview li p{width: 100%; text-align: center;}
.viewerContainer .preview li p.on{border: 3px solid #3b608d !important}
.viewerContainer .preview li p.previewImg{height: 250px; border:1px solid #dfdfdf; border-radius: 8px; padding: 10px; cursor: pointer;}/* 미리보기 화면 크기에 맞춰서 height 크기 조절해주세요 */
.viewerContainer .preview li p.previewImg:hover{border: 1px solid #999;}
.viewerContainer .preview li p.previewNum{margin: 10px 0;}
.viewerContainer .preview ul.listBox li{border: 1px solid #ccc; padding: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: 5px; background: #f5f5f5; color: #666; margin-bottom: 8px;}
.viewerContainer .preview ul.listBox li:hover{background: #fff; color: #333; border: 1px solid #666}
.viewerContainer .preview ul.listBox li.select{background: #fff; color: #333; border: 1px solid #666}
.viewerContainer .preview ul.listBox li.on{background: #b8d9fc; border: 1px solid #8bb5e2; color:#2b79cd; font-weight: bold;}
/* left dropdown */
.viewerLeft .dropDown input[type="checkbox"]{display: none;}
.viewerLeft .dropDown input[type="checkbox"]+label{
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ccc;
    display: block;
    width: 100%;
    border:none;
    background: url('../../../images/framework/down.png') right 15px top 17px no-repeat;
    background-size:14px;
    transition: .5s all
}
.viewerLeft .dropDown input[type=checkbox]:checked+label::after{
  background: none;
  border: none;
}
.viewerLeft .dropDown input[type=checkbox]:checked+label{
  border: none;
  background: url('../../../images/framework/right.png') right 15px top 17px no-repeat;
  background-size:8px;
  transition: .5s all
}
.viewerLeft .dropDown input[type=checkbox]:checked~.menuitems{
    display: none;
}
/* 모달용 div */
.modalSet {background: #f5f5f5; padding-bottom: 25px !important;}
.modalSet .modal{display: inline-block; margin:0 30px 30px 0; vertical-align: top; }
.modal{border-radius: 15px; width: 480px; background-color: #fff; padding:0px !important;}
.modal h2{font-size: 17px; font-weight: bold; padding:20px; border-bottom: 1px solid #333;position:relative}
.modal h2 a{position:absolute; right:0; padding-right:20px; margin-top:-5px; font-size:x-large;}
.modal .tableList{margin-top: 30px; overflow-y: auto; scroll-behavior: smooth;}
.modal .tableList::-webkit-scrollbar{width: 10px; background-color: #ddd; border-radius: 100px;}
.modal .tableList::-webkit-scrollbar-thumb{background-color: #666;  border-radius: 100px; background-clip: padding-box; border: 2px solid transparent;}
.modal table{width: 100%}
.modal table thead{border-bottom: 1px solid #333;}
.modal table td, .modal table th{text-align: center; padding: 15px 0;}
.modal table td input[type="text"], .modal table td input[type="tel"], .modal table td input[type="email"]{border: 1px solid #ddd; padding:5px 10px; width: 100%; box-sizing: border-box;}
.modal table td:nth-child(2):not(.tui-calendar-date){text-align: left;}
.modal .leftTable th:not(.tui-*){text-align: left; font-weight: bold; color: #000;}
.modal .leftTable th, .modal .leftTable td{border-bottom: 1px solid #ddd;}
.modal .leftTable td{vertical-align: middle;}
.modal .leftTable .tdFileSet{border: 1px dotted #999; padding: 10px; text-align: center;}
.modal .leftTable .tdFileSet li{font-size: 14px; margin: 15px 0; color: #999}
.modal .leftTable textarea{border: 1px solid #ddd; width: 100%; padding: 10px; box-sizing: border-box;}
.modal .leftTable textarea:focus{outline: none;}
.modal .leftTable textarea::placeholder{color: #999; font-size: 14px;}
.modal .fileUpload{border: 2px dashed #3498db !important; padding: 25px; text-align: center; border-radius: 10px;}
.modal .fileUpload li{margin-bottom: 15px; font-weight: bold;}
.modal .fileUpload li span{font-size: 28px;}
.modal .fileList{margin: 20px 0; font-weight: bold;}
.modal .fileList li{position: relative; padding-left: 25px;}
.modal .fileList li span{display: inline-block;position: absolute; top:3px; left: 0px;}
.modal .essentialbf{display: inline-block; font-size: 14px; font-weight: normal; color: #666; margin-left: 10px;}
.modal .display-f div.userList{width: 200px; align-self: flex-start;}
.modal .display-f div.tableList{flex-grow: 1; margin-left: 20px;}
.modal .display-f .arrowLR{width: 10px; align-self: center; margin: 0 10px; padding-top:55px;}
.modal .userList{border: 1px solid #ccc; border-radius: 10px;}
.modal .userList li{padding: 15px 20px; border-bottom: 1px solid #ccc;}
.modal .userList li:last-child{border-bottom: none;}
.modal .userList li span{display: inline-block; float: right; background: #333; color: #fff; border-radius: 100px; padding: 2px 9px;}
.modal .userList li.on{background: #f5f5f5}
.modal .tableContent{position: relative;}
.modal .tableContent .btnSet{position: absolute; top:-27px; right:0;}
.modal .tabContent{display: flex; align-items: stretch; text-align: center;}
.modal .tabCon{display: none;}
.modal .tabCon.on{display: flex;}
.modal .allDown{display: block; font-size: 14px; color: #999; cursor: pointer;}
.modal table .text-gray td{color: #999}
.selectSet select{width: 100%; border-radius: 3px; border:1px solid #ddd; font-size: 14px; color: #666; padding: 10px;}
.modal .selectSet {padding-top:20px;}
.modal .tab{margin:20px 4px 0 10px; border-bottom:1px solid #dfdfdf}
.signModal .tab{margin:20px 4px 0 0px; border-bottom:1px solid #dfdfdf}
/*.modal .tab li{cursor:pointer; background-color:#e5e5e5; border-top-left-radius:15px;border-top-right-radius: 0;border-bottom-left-radius: 15px; border-bottom-right-radius: 0; padding:25px 8px 25px 8px;}*/
.modal .tab li{cursor:pointer;padding:8px 25px; display: inline-block;}
.modal .tab li.on{border-bottom:2px solid #333; color:#333;}
.text-form-tag{display:inline-block;}
.num-form-tag input{width:50px; height:40px; vertical-align: top; margin:3px 10px 0 0;}
/* 에러창 */
.errorIcon{display: inline-block; border: 3px solid #da5359; border-radius: 150px; padding: 10px 27px; color: #da5359; }
.errorIcon span{font-size: 25px;}
.errorContent p{color: #da5359; padding-top: 20px;}
/* 성공 */
.successContent p{color: #286fed; padding-top: 20px;}
.successIcon{display: inline-block; border: 3px solid #286fed; border-radius: 150px; padding: 10px 18px; color: #286fed; }
.successIcon span{font-size: 25px;}
/* 경고 */
.warningContent p{color: #e07400; padding-top: 20px;}
.warningIcon{display: inline-block; border: 3px solid #e07400; border-radius: 150px; padding: 10px 18px; color: #e07400; }
.warningIcon span{font-size: 25px;}
/* 확인 */
.checkContent p{color: #666; padding-top: 20px;}
.checkIcon{display: inline-block; border: 3px solid #666; border-radius: 150px; padding: 10px 18px; color: #666; }
.checkIcon span{font-size: 25px;}

.messageModal h2{font-size: 17px; font-weight: bold; position:relative; border-bottom:0px; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.messageModal h2 a{position:absolute; right:0; padding-right:20px; top:unset; color : #fff;}
.messageModal button:focus {outline: none !important;  box-shadow: none !important;}

/* 아코디언 스타일 */
.accordionTitle{font-weight: bold; color: #666;}
.accordionBody table{width: 100%;}
.accordionBody table th, .accordionBody table td{padding: 10px;}
.accordionBody table th{font-weight: bold; text-align: left; width: 12%;}
.accordionBody table td input[type="text"]{width: 90%; border: 1px solid #ddd; padding: 5px;}
.accordionBody table td li input[type="checkbox"] + label{ top: 2px; margin-right: 5px; background-color: #fff;}

/* form 화면 */
.formList{text-align: center; padding-top: 5px;}
.formList .on{font-weight: bold; color:#000;}
.formList a:hover{color:#000; font-weight: bold;}
.addViewerContent{padding-top: 15px;}
.userReg table td{padding-right:15px;}
/* 미디어 쿼리 */
@media (max-width: 1885px) {
  article .leftContent div.myFile .fileSituation{padding-left: 10px;}
  article .rightContent .notice li strong{display: inline-block; width: 400px;}
}
@media (max-width: 1775px) {
  article .rightContent .notice li strong{display: inline-block; width: 200px;}
}


/* 추가 CSS */

/* tui */
.tui-datepicker {z-index:999;}
.tui-datepicker-input {border:0 !important;}

#leftToolBox li {
	cursor : pointer;
}

.zidx-999{
	z-index:99999 !important;
}

.overflow-auto{
	overflow:auto;
}

.cursorPointer{
	cursor: pointer !important;
}

.borderLine input[type="text"]
{
	border: 1px solid #ddd; padding:5px 10px; width: 100%; box-sizing: border-box;
}

/* 팝업 레이어(토글형) */
.popLayer{display: none; position: absolute; width: 100%; background: #fff; box-sizing: content-box; border-radius: 3px; border:1px solid #333; padding: 10px 0 10px 20px; top:40px; left: -10px; z-index: 99}
.popLayer a{display: block; padding: 5px 0;}
.popLayer a:hover{font-weight: bold;}
.btn+.popLayer{width: auto; right:0; left: auto; padding-right: 20px;}

.modal-footer{border-top:none; justify-content: center;}
.modal-footer button.btn-secondary{width:150px; margin: 0 auto; border-radius: 3px; background: #eb424a; padding:10px 0; border:none;}
.modal-footer button.btn-secondary:hover{background: #be0a12;}
.modal-footer button.btn-dark{width:150px; padding:10px 0;}

/* 서명 modal */
#signModal #modalContent{
	/* width:470px; height:400px; text-align: center;
	   padding:5px 0 20px 30px;*/
	 margin-top:15px;
}
#signModal #modalContent canvas{
	border:1px solid #D6D5D5;
	width:440px;
	height:326px;
	margin-bottom:15px;
}
/*
#signModal #modalContent > #canvasContainer{
	position: relative; display:none; padding-right: 0px;padding-left: 0px; width: 445px;
}
*/
#signModal #modalContent > #canvasContainer canvas{
	width:142px;
	height:150px;
}
.modal .signModal{height:500px;}




/*loading*/
#loading {
	height: 100%;
	left: 0px;
	position: fixed;
	_position:absolute;
	top: 0px;
	width: 100%;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity : 0.5;}

.loading {
	background-color: white;
	z-index: 199;
}
#loading_img{
	position: relative;
	top:50%;
	left: 50%;
	z-index: 200;
	font-size: xxx-large;
}

/* modal */
.blocker{
	background-color : rgba(0,0,0,0.2) !important;
}

/*dropzone */
.dropzone {border: 2px dashed #3498db !important;}

/*사용자정보 > 비밀번호 변경 화면의 input */
.passwordInput {border: 1px solid #ddd; padding:5px 10px;}

/* 입력용 달력 */
.dateInput{text-align:center; cursor: pointer; font-size: 15px; width:100px !important; padding:0 !important;}

/* 목록의 셀렉트박스 달력 */
.listSelect{height: 39px; width:110px;}

/* 사인/도장관리 페이지
.tableList{text-align: center;}
.signCard { 
	transition: 0.3s;
	margin: 10px;
	display: inline-block;
	border:1px solid #ccc;
	border-radius: 6px;
	vertical-align: top;
}
.signImg { 자작합판
	transition: 0.3s;
	display: inline-block;
	background-color: #ffffff;
}

.signCard-size{width:280px;height:250px;}
.signCard-content { padding: 20px; text-align : center;}
.signCard-title { font-size: 18px; font-weight: bold; margin-bottom: 10px;}
.signCard-description {display: none;}
.signCard:hover { box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);}
.signCanvas {}
 */
 /* 사인 도장관리 페이지 신규 css */
.stampCategory{font-weight: bold; font-size:17px; margin:0 0 20px 15px;}
.stampList{display:flex; text-align: center;}
.stampList div{display:inline-block; vertical-align: top; width:307px; height: 350px; border:1px solid #ccc; border-radius:5px; padding:25px; margin-left:5px;}
.stampList .stampIcon{text-align: right; font-size:18px;  }
.stampList .stampIcon button{margin-left:5px;}
.stampList .stampIcon button span{transition: 0.8s; color:#999;}
.stampList .stampIcon button span:hover{transition: 0.8s; color:#333;}
.stampList .stampImg{height: 210px; display: flex; align-items: center; justify-content: center;}
.stampList .stampImg p{width:90px; height:90px; border:3px solid #f30308; border-radius: 150px; display: inline-block; padding-top:32px; color:#f30308; font-weight: bold;}
.stampList .stampContent{border-top:1px solid #ddd; padding-top:15px; text-align: left;}
.stampList .stampContent h4{margin-bottom: 5px; font-size: 17px;}
.stampList .stampContent p{color:#999}



.signCanvas{padding-top:15px;}
.tabCon .modal-body{height: 352px;}
.signCanvas canvas{border:1px solid #ddd; transition: 0.3s;}
.signImg {border:1px solid #333; transition: 0.3s;}
.signCanvas canvas:hover {border:1px solid #333; transition: 0.3s;}

/*
#stampList{padding-top:15px;}
#stampList canvas{padding: 15px; border:1px solid #ddd; transition: 0.3s;}
#stampList canvas:hover{border:1px solid #f30308;}
*/

#stampList { padding-top: 15px; text-align: center; }
.canvas-wrapper { padding: 15px; border: 1px solid #ddd; transition: 0.3s; display: inline-block; text-align: center; width: 150px; height: 160px; }
.canvas-wrapper:hover { border: 1px solid #f30308; }
.canvas-wrapper canvas {display: inline-block; vertical-align: middle; display: inline-block;}
    
.signCanvas .stampText{width: 560px; text-align:center;}
.signCanvas .stampText p{font-weight: bold; margin-bottom:5px;}
.signCanvas .stampText p+p{font-weight: normal; color:#999}
.signCanvas .stampUpload{width: 560px;}
.signCanvas .stampUpload figure{display:flex; justify-content:center; align-items:center; position:relative; border:1px solid #ccc; border-radius: 4px; height: 255px;}
.signCanvas .stampUpload figure button{margin-top:75px; color:#999;}
.signCanvas .stampUpload figure button:hover{color:#333}
.signCanvas .stampUpload figure span{font-size: 45px;}
.signCanvas .stampUpload figure .imgTitleBtn{color:#f5f5f5; margin:0; position: absolute; bottom: 0; left:0; background-color: rgba(0,0,0,0.5); padding:10px 0; width: 100%;}
.signCanvas .stampUpload figure .imgTitleBtn:hover{background-color: #333; color:#fff;}


.mypageInput {border: 1px solid #ddd !important; padding:5px 10px; width: 100%; box-sizing: border-box;}

/*사인모달의 나의서명부분
#mySignContainer { text-align: center; }*/
.mysingDiv { padding: 15px; margin-left:5px; margin-bottom:15px; border: 1px solid #ddd; transition: 0.3s; display: inline-block; text-align: center; width:140px;height:148px; position: relative;}
.mysingDiv:hover { border: 1px solid #7a767e; }
.mysingDiv img {display: flex; vertical-align: middle;  margin: auto;max-width:100%; max-height:100%; position: absolute;top: 0; bottom: 0; left: 0; right: 0;}
 .mysignTool{position: absolute; z-index: 1;  bottom:100%;  background: #7a767e; border-radius: 4px; padding:8px 15px; color:#fff; width:150px; transform:translateX(-50%); left:50%;}
 .mysignTool::after {
  content: " ";
  position: absolute;
  top:100%;
  left: 50%;
  margin-left: -5px;  
  border-width: 5px;
  border-style: solid;
  border-color:  #7a767e transparent transparent transparent;
}

/*전자문서 정보 모달의 서명자수툴팁*/
.signerTool{position: absolute; z-index: 1;  bottom:18%;  background: #5fa8d3; border-radius: 4px; padding:8px 15px; color:#fff; width:450px; transform:translateX(-50%); left:86%; opacity:90%;}
 .signerTool::after {
  content: " ";
  position: absolute;
  top:100%;
  left: 50%;
  margin-left: -5px;  
  border-width: 5px;
  border-style: solid;
  border-color:  #5fa8d3 transparent transparent transparent;
}

/* 전자문서목록 > 전자문서 상세 모달 상태바 hover */
.modalTableHover{display: none; position: absolute; width: 550px; background-color: #fff; border-radius: 3px; box-sizing: border-box; top:128px;}
.modalTableHover li{display: inline-block; margin-right: 15px; font-size: 14px; color: #333}
.modalTableHover li a{color: #777}
.modalTableHover li a:hover{color: #333}
.modalTableHover li span{display: inline-block; border-radius: 100px; background: #555; color: #fff; padding: 2px 10px; font-size: 13px; margin-left: 5px;}
.modalTableHover li:nth-child(3){padding-right: 20px; margin-right: 15px; border-right: 1px solid #999;}

.modalTarget {background: #eee; cursor: pointer;}
.mh650 {min-height:650px;}

.treeModal{height:500px; width:45px; overflow-y: auto;}