body{
	width : 100%;
	/*min-width : 1280px;
	max-width : 1920px;*/
	height : 100%;
	min-height : 844px;
	max-height : 950px;
	
}
.container{
	width : 100%;
	height : 100%;
	margin:0;
	padding:0;
	font-family : 둥근헤드라인R;
	font-size : 0.677vw;

	border-top:1px solid #ccc;
}

/* leftContent */

.leftContent{
	width : 500px;
	height : 100%;
	float : left;
}
.helper_title{
	width : 100%;
	height : 10%;
	background-color : #354657;
	text-align : center;
	font-size : 2vw;
	font-weight : bold;
	color : white;
	line-height : 250%;
}
.attrGrid{
	width : 100%;
	height : 83%;
	background-color : #999;
}
.leftHeader{
	width : 100%;
	height : 7%;
	background-color : #354657;
}
.titleText{
	font-size : 1.5vw;
	color : white;
	font-weight : bold;
	margin-left : 1.042vw;
	line-height : 180%;
}
.resetBtn{
	width : 5.208vw;
	height : 2.9vh;
	float : right;
	margin-right : 0.26vw;
	margin-top : 1.667vh;
}
#SBGridArea1{
	width : 100%;
	height : 100%;
}

/* centerContent */

.centerContent{
	background : blue;
	width : 5%;
	height : 100%;
	float : left;
}
.title1{
	width : 100%;
	height : 60%;
	background : #657f98;
	font-size : 1.5vw;
	line-height : 150%;
	display : inline-table;
	font-weight : bold;
}
.title2{
	width : 100%;
	height : 40%;
	background : #a6b8ca;
	font-size : 1.5vw;
	line-height : 150%;
	font-weight : bold;
}

.title1 div{
	-webkit-transform : rotate(270deg);
	transform : rotate(270deg);
	color : white;
}
.title2 div{
	-webkit-transform : rotate(270deg);
	transform : rotate(270deg);
	color : white;
}

/* rightConent */

.rightContent{
	width : 65%;
	height : 100%;
	background-color : blue;
	float : left;
	overflow : hidden;
}
.rightContent_1{
	width : 100%;
	height : 250px;						
	/* 2019-05-09 이소연 수정 (그리드 높이 45% -> px로 변경) */
	background-color : #eee;
	text-align: center;
}
#SBGridArea{
	width : 99.6%;
	height : 100%;
	vertical-align : middle;
}
/*.rightContent_2{
	width : 100%;
	height : 15%;
	background-color : #a6b8ca;
}*/
/*#attr_preview{
	width : 75%;
	height : 80%;
	background-color : white;
	float : left;
	margin : 1.444vh 1.042vw 0px 0.521vw;
	overflow-y : scroll;
}*/
/*.attrDiv{
	width : auto;
	height : auto;
	padding : 1.111vh 0.521vw;
	border-radius : 3px;
	color : #364883;
	float : left;
	font-size : 0.9vw;
	margin : 1.111vh 0px 0px 0.521vw;
	border : 1px solid white;
	font-family : 둥근헤드라인R;
	font-weight : bold;
}*/
.right_content_button{
	font-size : 1vw;
	width : 9%;
	height : 11.111vh;
	margin : 0.781vw 1.667vh 0px 0px;
    font-weight : bold;
}
.right_content3{
	width : 100%;
	height : 40%;
	background-color : white;
}
#col_attr_title{
	width : 100%;
	height : 100%;
	text-align : center;
	padding-top : 2vh;
}
.col{
	border : none;
	background : none;
	/*font-size : 1.042vw;*/
	font-size :20px;
	text-align : center;
	font-weight : bold;
	color : #364883;
	margin-right : 1.042vw;
	margin-bottom : 1.111vh;
	font-family : 둥근헤드라인R;
}
input:focus, select:focus, .clipboard{
	outline: none;
}
.selectInput{
	width : 2.604vw;
	height : 2.444vh;
	padding-right : 0.26vw;
	border : 1px solid #a6b8ca;
	border-radius : 5px 0px 0px 5px;
	border-right : none;
	text-align : right;
}
.inputSelect{
	width : 2.604vw;
	height : 2.444vh;
	border : 1px solid #a6b8ca;
	border-left : none;
	color : #a6b8ca;
	border-radius : 0px 5px 5px 0px;
}
.commonInput{
	width : 2.604vw;
	height : 2.444vh;
	border : 1px solid #a6b8ca;
	padding-left : 0.521vw;
	border-radius : 5px;
}
/*.commonSelect{
	width : 2.604vw;
	height : 2.889vh;
	border : 1px solid #a6b8ca;
	padding-left : 0.521vw;
	color : #a6b8ca;
	border-radius : 5px;
}*/
#field{
	width : 100%;
	/*height : 30vh;*/
/*	overflow-y : scroll;*/
}
/*.minorBtn{
	width : 1.354vw;
	height : 2.889vh;
}
.colAdditional{
	height : 2.889vh;
}
.colset{
	width : 100%;
	height : 100%;
}
.colmargin{
	margin-right : 0.521vw;
	margin-bottom : 0.556vh;
}*/
/*.colmargin, .width{
	color : #a6b8ca;
	border-color : #a6b8ca;
}*/
/*input[type=button], .clipboard{
	background : white;
	color : #304dac;
	border : 1px solid #304dac;
	border-radius : 5px;
	font-weight : bold;
    font-family : 둥근헤드라인R !important;
}
input[type=button]:hover, .clipboard:hover{
	color : #7D95E3;
	border : 1px solid #7D95E3;
	border-radius : 5px;
    font-family : 둥근헤드라인R !important;
}*/
.createbtn {
    background-color : #0e4737 !important;
    color : white !important;
    border-color : white !important;
}

.codebtn {
    background: #4c7e70 !important;
    color : white !important;
    border-color : white !important;
}

.modalTable {
    text-align : center;
    width : 100%;
    height : 100%; 
    margin : 0 auto;
}

.modalTdTop {
    border : 1px solid #999; 
/*    padding : 10px; */
    border-radius : 5px 5px 0px 0px; 
    border-bottom : 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    background-color: cornsilk;
}
.modalheight {
    height : 50px;
}
.modalTdBottom {
    border : 1px solid #999; border-radius : 0px 0px 5px 5px; border-top : none;
}

.modalp {
    font-size : 10pt;
}

.modalTDMiddle {
    padding-left : 5px;
    text-align : left;
    border-left : 1px solid #999;
    border-bottom : 1px solid #ccc;
}

.modalTDMiddle2 {
    border-right : 1px solid #999;
    border-bottom : 1px solid #ccc;
}

.modalTDBottomL {
    padding-left : 5px; 
    text-align : left;
    border-left : 1px solid #999; 
    border-bottom : 1px solid #999; 
    border-radius : 0px 0px 0px 5px;
}

.modalTDBottomR {
    border-right : 1px solid #999;
    border-bottom : 1px solid #999; 
    border-radius : 0px 0px 5px 0px;
}

.modalinForm {
    width :75%;
    height : 25px;
    padding-left : 5px;
}

.modalSelForm {
    width : 78.5%;
    height : 30px;
    padding-left : 5px;
}


/*190425 design*/
.code-wrap {display:table; width:100%;height:100%;min-height:700px;}
.code-wrap .code-left-wrap {display:table-cell;  vertical-align:top;  width:400px; height:100%;}
.code-wrap .code-left-wrap h3 {height:70px; line-height:70px; background:#212121; color:#fff; padding-left:20px;     letter-spacing: 1px; font-size: 18px;font-family: arial;}
.code-wrap .code-subtitle-wrap { display:table; width:100%; padding:10px; background:#263c58; }
.code-wrap .code-subtitle-wrap h4 {display:inline-block; color:#fff;  font-size: 15px;text-shadow: 0.5px 0; padding-top:3px;}
.code-wrap .code-subtitle-wrap h4 span {display:inline-block; width: 18px; height: 18px;line-height: 15px;background: #3769ad; text-align: center;padding: 2px; font-size: 12px; margin-right: 10px;}
.code-wrap .code-subtitle-wrap #btns {display:inline-block; float:right;}
.code-wrap .code-subtitle-wrap .code-btn {margin-left:5px; font-size: 14px; text-shadow: 0.5px 0; display:inline-block; float:right; background: #263c58;padding: 3px 15px;border-radius: 3px;cursor: pointer;color: #fff;   border:1px solid #526d8e;}
.code-wrap .code-subtitle-wrap .code-btn:hover {background:#222;}
.code-subcon-wrap {height: calc(100% - 46px); background:#f5f5f5; padding:10px; }
.code-wrap .code-right-wrap .code-subcon-wrap {height: calc(100% - 41px);}

.code-subcon-wrap > div {background:#fff;    height: 100%;}
.code-wrap .code-right-wrap {display:table-cell;  vertical-align:top; width:800px;height:100%;}
.code-wrap .code-right-wrap>div {height:50%; }

.code-wrap .code-left-wrap .code-subcon-wrap {height:100%;}

#col_attr_title {text-align: left;  padding-top: 0;}
.col { border: none;background: none;text-align: center;font-weight: bold;color: #364883;margin-right:0;margin-bottom:0; font-family:'Noto Sans KR', sans-serif; font-size:14px; }
.rightContent_2 {}
.rightContent_2  #attr_preview {background:#f5f5f5;padding:15px 0;}
.rightContent_1 {background:#f5f5f5;    height: calc(100% - 70px);}
.code-right-wrap .code-subcon-wrap > div {overflow-y: auto; background:#f5f5f5;}
.attrDiv2 {display:block; color:#64748a; font-size: 14px;}
.attrDiv {display:block; color:#64748a;padding:10px 0;}
#attr_preview .attrDiv { display: inline-block;font-size: 14px;background: #fff;border: 1px solid #92baef;
    margin-right: 5px;padding: 3px 10px;box-shadow: 1px 1px 2px #999;border-radius: 5px;color: #245aa5;letter-spacing: 1px; text-shadow: 1px 0;}


#col_attr_title {text-align: center;}
.code-title-wrap > input{float: left;
    width: 126px;
    border: none;
    text-align: center;
    padding: 4px;
    margin-top: 15px;
    margin: 15px 5px 0 1px;
    font-size: 15px;
    box-sizing: border-box;
    background: #e1eaf2;
    color: #13456d;
    font-weight: bold;
    border: 1px solid #b2bad2;
    text-align: center; }
.code-title-wrap .colbt { padding: 5px 0;
    margin: 15px 0 10px 0;
    width: 210px;
    font-size: 14px;
    background: #e1eaf2;
    border: 1px solid #b2bad2;
    color: #13456d;
    font-weight: bold;}

#field {padding:10px 10px; text-align: left; background:#fff; }
#field input {width:150px; border:1px solid #ccc; }
#field select {width:150px; margin-right:10px; border:1px solid #ccc; }
#field .colwidth.width{width:85px;border-right:none;}
#field .widthtype.width{width:35px; margin-right:10px;border-left:none;}
#field .colcptn {width:120px; margin-right:10px; padding-left:5px;}
#field .colref {width:120px; margin-right:10px; padding-left:5px;}
#field .coltypeClass{width:120px;}
#field .minorBtn {width:30px;}
#field .colAdditional {width:80px; margin-right:10px;}

#colarea_1,#colarea_2,#colarea_3,#colarea_4,#colarea_5,#colarea_6,#colarea_7,#colarea_8,#colarea_9,#colarea_10 {margin-bottom: 10px;}

#view2 > button { padding: 4px 13px;  background: #fff;border: 1px solid #8fa8dc;border-radius: 5px; color: #3161c6;font-weight: bold; font-size: 14px; margin: 5px 0 15px 0;}
#view2 > button:hover {background:#3161c6; color:#fff;}