﻿/* Styles for HOffice Help*/

/* basic styles */
/*body
	{font-family:굴림,한컴돋움,Verdana;
	font-size:75%;
	color:#404957;
	line-height : 1.3em;
	margin-bottom: 20px;
	background-color:#ffffff ;
	margin-left: 0em;}*/

@media all and (max-width:500px) {
	.menu_group,
	#intro hr {display:none;}
	#intro .intro_box {padding:2em 5% !important;}
	#intro .intro_box .intro_img {text-align:left !important;}
	#intro .intro_box .intro_img ~ div {width:100% !important; display:block; clear:left; border:none !important; padding:5% 0 0 0 !important;}
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, p {margin:0; padding:0;}
body {line-height:1.4; color:#333; padding:0 3.4em; font-size:75%; font-family:"Malgun Gothic",한컴돋움,Dotum,'돋움',Helvetica,AppleSDGothicNeo,sans-serif;}
p {margin:0 0 0.3em 0em;}
img {vertical-align:text-bottom;}

a {color:inherit; text-decoration:underline;}
a:hover {color:#5575c1;}
a:visited {color:#844aa5;}
a:active {color:#335095;}


.navigation {padding:1.4em 0 0.6em 0; border-bottom:1px solid #ebebeb; color:#7f7f7f;}
.navigation span {color:#333;}
.navigation a,
.navigation a:visited {color:#7f7f7f; text-decoration:none;}
.navigation a:hover {color:#7f7f7f; text-decoration:underline;}
.navigation a:active {color:#333; text-decoration:underline;}

/* TOP 대제목  --- */
h1 {font-size:280%; font-weight:normal; margin:0.8em 0 0.6em;}
	
/* 소제목  --- 모듈별 컬러 적용*/
h2 {font-size:130%; color:#0996d9; margin:3em 0 0.8em 0;}
		
/* 본문 작은 제목  --- */
h3 {font-size:120%;	font-weight: bold; margin:2em 0 0.8em 0;}

/* .펼침 메뉴와 대화 상자 제목 ---  모듈별 컬러 적용*/
h4 {font-size:120%;	font-weight:normal; color:#0996d9; margin:1em 0 0.8em 0;}

/*메뉴 리스트*/
h4 a {display:inline-block; margin:0.1em 0;}
h4 a:last-child {margin-bottom:0.6em;}
h4 + h6 {margin-top:-1em; margin-bottom:2em;}	
/* .DropDown 제목   --- */
h5	{font-size:133%; color:#0996d9; font-weight: bold; margin:2.5em 0 0.8em 0em;}
h5 img {vertical-align:baseline;}
/* .딸린 메뉴  --- */
h6 {font-size:110%;	margin:-0.3em 0 0.5em 1em;}

h7	 /* .딸린 메뉴 depth 2 --- */
	{font-size:100%;	
	margin-left:8.5em;
	margin-right:2.5em;
	margin-top:0.5em;
	margin-bottom:0.5em;	
	font-weight: normal;
	color:#0287b1;}	

h2 + h3 {margin-top:1em;}
h4 + h3 {margin-top:1em;}

p.ui-path
	{
	font-size:100%;
	margin-right:1.5em;
	margin-top:0.5em;
	margin-bottom:0.5em;
	font-weight: bold;
	color:#0287b1;}
	
p.refer {margin:1.4em 0 1.4em 0.6em;}

.footer {text-align: right; margin:2em 0;}	
.footer a{color:#7f7f7f; text-decoration:none;}
/*.footer a:link {color:#333333; text-decoration:underline;}
.footer a:visited {color:#333333; text-decoration:underline;}*/
.footer a:hover {color:#5775c1;}
.footer a:active {color:#335095;}



.related-title
	{margin-top: 2.0em;
	margin-left: -1.7em;
	margin-right: -1.0em ;
	margin-bottom: 0.5em ;
	color:#0287b1;
	background-color:rgb(228,228,228);
	padding:3px ;
	font-weight: bold;
	text-indent: 1.8em; }

.related-link
	 {font-size:120%; font-weight:bold;}
.code
	{
	font-family:Courier New;
	margin-top: 0.7em;
	margin-bottom: 1.7em;
	margin-left:2.3em;
	margin-right:1.5em;	
	padding-top:0.5em ;
	padding-bottom:0.5em ;
	padding-left:1em ;
	padding-right:1em ;
	background-color: #E7E7E7}
	
.definition
	{
	font-family:Courier New;
	font-size: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left:4em;
	margin-right:1.5em;	
	font-style: italic;
	}
.definition-ref
	{
	font-family:굴림,한컴돋움,Verdana;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left:3em;
	margin-right:1.5em;	
	padding-top:0em ;
	padding-bottom:0.5em ;

	}
.macro-def	 /* .매크로 예제 제목(넥셀)  --- */
	{
	font-family:굴림,한컴돋움,Verdana;
	font-size:100%;	
	margin-top:0.5em;
	margin-bottom:0.5em;
	margin-left:2.3em;
	margin-right:1.5em;
	color:#0287b1;}	

ol {margin:0.8em 0 0 1em;}
ul {list-style-type: disc; margin:0.8em 0 0 1em;}
table ul {margin:0.8em 0 0.8em 2em;}
		
li {line-height:1.6;margin-top: 0.3em; margin-left: 1.2em;}
ul li {margin-top:1em;}
ul li:first-child {margin-top:0;}
li p {margin-left:0; margin-bottom:0;}
	
.link 		{color:#0287b1; text-decoration: underline; font-weight: bold; } 
.link:hover	{text-decoration: underline; }
.link:visited	{color: #800080; text-decoration: underline; }

.Menu_link 	{ font-size:75%; color:#0287b1; text-decoration: none; font-weight: bold; margin-left:0em; margin-right:0.5em;	} 
.Menu_link:hover	{ font-size:75%; text-decoration: underline; }

.menu_link_s {color:#333; text-decoration: underline; font-weight: normal;} 
.menu_link_s:hover {text-decoration: underline; }
.menu_link_s:visited {color: #800080; text-decoration: underline; }

.intro_link			{ color:#0287b1; text-decoration: underline; font-weight: bold; }
.intro_link:hover		{ text-decoration: underline; }
.intro_link:visited		{ color: #800080; text-decoration: underline; font-weight: bold; }	

.intro_link2			{ color:#0287b1; text-decoration: underline; }
.intro_link2:hover		{ color:#2376ca; text-decoration: underline; }
.intro_link2:visited	{ color: #800080;  text-decoration: underline;}	
	

.table_link			{ text-decoration: underline; font-weight: normal; color: #0287b1 }
.table_link:hover	{ text-decoration: underline; font-weight: normal; color: #0287b1 }
.table_link:visited	{ text-decoration: underline; font-weight: normal; color: #800080 }
/*
.intro 
	{color:#0287b1; text-decoration: none; font-weight: normal; margin-top:1.5em; margin-left:1.1em; margin-right:0.8em;	} 	
.intro2 
	{color:#0287b1; text-decoration: none; font-weight: normal; margin-top:0em; margin-left:1.1em; margin-right:0.8em;	} 	

.intro3 
	{color:#0287b1; text-decoration: none; font-weight: normal; margin-left:2.3em;margin-right:1.5em;	margin-top:1em;	margin-bottom:0.0em; }
*/
.intro {margin-bottom:0.5em; margin-left:0; font-size:117%;} 	
.intro2 {margin-top:0.5em; margin-bottom:4.5em; margin-left:0; font-size:117%;}	

.table-list
	{
	position:relative;
	margin-top: 0.5em;
	margin-bottom: 0em;
	margin-left:0em;
	margin-right:0em;
	list-style-type:none;
	}
.table-list:before {
	position:absolute;
	top:0;
	left:-0.8em;
	content:"\002d";
}

/*.bullet-list
	{
	font-family:굴림,한컴돋움,Verdana;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left:0em;
	margin-right:0em;	
	}*/

.factor
	{color:#0287b1;}	 


/* Figure  -------------------------------------------------------------------------- */

.img01
	{ margin-left: 0em; margin-top: 0.5em ; margin-right: 0em;  margin-bottom: 1.5em;}

.img02
	{ margin-left: 2.5em; margin-top: 0.5em ; margin-right: 0em;  margin-bottom: 1.5em;}	

.img03
	{ 
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left:0em;
	margin-right:0em;
	}

	
/* Table  -------------------------------------------------------------------------- */
table {border-collapse:collapse;}

.table01
	{ margin-left: 1em; margin-top: 0em ; margin-right: 2em;  margin-bottom: 1em;}

/*.table02
	{ margin-left: 2.3em; margin-top: 0.5em ; margin-right: 2em;  margin-bottom: 1em;}*/

.table02 {margin:1.4em 0 1.4em 0; table-layout:fixed;}
.table02 table {border:1px solid #b5c2e3; padding:0.1em;}
.table02 th {padding:0.4em 0.8em; border:1px solid #d1d7e8;}
.table02 td {padding:0.9em; color:#5a5a5a; border:1px solid #d1d7e8;}
.table02 tr:first-child th {color:#4f6bb0; background-color:#e9eefb; border-top:1px solid #b5c2e3;}

.table02 tr th:nth-of-type(1),
.table02 tr td:nth-of-type(1) {border-left:1px solid #b5c2e3;}
.table02 tr th:last-child,
.table02 tr td:last-child {border-right:1px solid #b5c2e3;}
.table02 tbody tr:last-child td {border-bottom:1px solid #b5c2e3;}
/*.table02 tr:last-child th,
.table02 tr:last-child td {border-bottom:1px solid #b5c2e3;}*/

.table_gray {margin:1.4em 0 1.4em 0.8em;}
.table_gray table {border:1px solid #ccc;}
.table_gray th {padding:0.5em 0.8em; text-align:left; color:#5a5a5a; background:#f5f5f5; border:1px solid #d8d8d8; vertical-align:top;}
.table_gray td {padding:0.5em 0.8em; color:#5a5a5a; border:1px solid #d8d8d8;}
/*
.table_gray thead th {color:#4f6bb0; background-color:#e9eefb; border-top:1px solid #b5c2e3;}
.table_gray tr th:nth-of-type(1),
.table_gray tr td:nth-of-type(1) {border-left:1px solid #b5c2e3;}
.table_gray tr th:last-child,
.table_gray tr td:last-child {border-right:1px solid #b5c2e3;}
.table_gray tr:last-child th,
.table_gray tr:last-child td {border-bottom:1px solid #b5c2e3;}
*/
.table03
	{ margin-left: 2.3em; margin-top: 0.5em ; margin-right: 0em;  margin-bottom: 1.0em;}




.Table 			{ background-color:#e1f5f2;}

.table_T 		{font-size:100%; font-weight: bold; color: #0287b1 }	
.table_T_sub	{font-size:100%; font-weight: normal; color: #0287b1; background-color:#ffffff; }
.table_T_sub02	{font-size:100%; width:0.1em; margin:0; padding:0.1em !important; background-color:#fff !important; border-left:1px solid #b5c2e3 !important; border-right:1px solid #b5c2e3 !important;}
.table_T_sub03	{font-size:1%; height:0.2em; margin:0; padding:0 !important; border-top:1px solid #b5c2e3 !important;}
	
	
/* TOP Background Color  ----------------------------------------------------------- */

.Bg01 { background-color:#e8f8f7;}
.Bg02 { background-color:#e8f8f7;}
.Bg03 { background-color:#7bc3d1;}
.Bg04 { background-color:#c0e3e8;}


/* Dropdown styles ----------------------------------------------------------------- */

/*.DropDown1	{font-size1:100%; text-decoration: none; color:#0B5292; font-weight: bold; top: 5pt; margin-left:0.5em} */


/*.DropDown:hover	{text-decoration: underline; color:#0287b1; font-weight: bold; top: 5pt; margin-left:0.5em} 
.DropDown:visited	{text-decoration: underline; color:#2376ca; font-weight: bold; top: 5pt; margin-left:0.5em} 
.DropDown:link	{text-decoration: underline; color:#0287b1; font-weight: bold; top: 5pt; margin-left:0.5em}*/

.expall a span {color:#333; font-weight:bold; text-decoration:underline;}
.expall a span:hover {color:#5775c1;}
.expall a span:active {color:#335095;}



.expall {position:relative;}
.expall span {position:absolute; top:1em; right:0;}

.expanded {margin:1.4em 1em 2em 1.6em;}	
.collapsed	{display: none;}				

/*리스트만 나열된 컨텐츠 박스에 사용*/
.list_box {margin:1.4em 0 1.4em 0.8em; padding:0.6em; border:1px solid #d1d7e8;}
.list_box p {margin:0 0 0.5em; word-break:break-all;}

/**/
.message_box {display:inline-block; margin-left:0.6em; padding:0.6em; border:1px solid #d1d7e8; background-color:#f3f6fc; color:#4f6bb0;}

/*페이지 상단의 탭메뉴*/
.tab_menu {margin:4.17em 0 0; padding:1em 0.8em 0; font-size:120%; border:1px solid #c5c5c5;-webkit-border-radius:0.3em; -moz-border-radius:0.3em; border-radius:0.3em;}
.tab_menu:after {display:block; clear:both; content:"";}
.tab_menu li {float:left; margin:0 0 1em; padding:0 1em; line-height:1; list-style:none; border-right:1px solid #ddd;}
.tab_menu li:first-child {margin-top:0;}
.tab_menu li:last-child {border-right:none;}
.tab_menu li a {color:#333; text-decoration:none;}
.tab_menu li a:hover {color:#5575c1; font-weight:bold;}
.tab_menu li.on {position:relative; font-weight:bold;}
.tab_menu li.on a {color:#335095;}
.tab_menu li.on:after {position:absolute; width:70%; left:15%; bottom:-0.5em; border-bottom:2px solid #6686d7; content:"";}

/*intro*/
#intro h1 {margin-bottom:0.8em 0 0.6em; padding-left:0.5em; font-size:260%; line-height:1; border-left:0.1em solid #0996d9;} /*모듈별 컬러 적용*/
#intro h1 span {display:block; padding-bottom:0.6em; font-size:0.5em; color:#5a5a5a;}
#intro .intro_box {margin-bottom:1em; padding:2em 0; font-size:100%; line-height:1.5; color:#5a5a5a; background-color:#fafafa;-webkit-border-radius:0.3em; -moz-border-radius:0.3em; border-radius:0.3em;}
#intro .intro_box:after {display:block; clear:both; content:"";}
#intro .intro_box .intro_img {float:left; width:23.95%; box-sizing: border-box; text-align:center;}
#intro .intro_box .intro_img ~ div {float:left; width:70%; margin:0; padding-left:5%; box-sizing: border-box; border-left:1px solid #e0e0e0;}
#intro .menu_group:after {display:block; clear:both; content:"";}
#intro .menu_group div {position:relative; float:left; width:31.95%; margin:1.4% 1.4% 0 0; font-size:130%; border:1px solid #e0e0e0; box-sizing:border-box; -webkit-border-radius:0.3em; -moz-border-radius:0.3em; border-radius:0.3em;}
#intro .menu_group div a {display:block; padding:0.8em 1em 3.2em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none;}
#intro .menu_group div a:link,
#intro .menu_group div a:visited {color:#333;}
#intro .menu_group div a:hover {color:#5575c1;}
#intro .menu_group div:after {position:absolute; bottom:0; right:0; width:20px; height:20px; background:url(./images/img_icon.png) no-repeat -2px -16px; content:"";}
#intro .menu_group div:nth-of-type(3n) {margin-right:0;}
#intro .menu_group div:hover {color:#5775c1; background-color:#e9eefb; border-color:#90a5dc;}
#intro .menu_group div:hover:after {background-position:-27px -16px;}
#intro .menu_quickLink {margin-top:1.8em; padding-top:1em; border-top:1px dotted #d8d8d8;}
#intro .menu_quickLink div {font-size:110%;}
#intro .menu_quickLink div a {padding:1.2em 1em 1.2em 48px;}
#intro .menu_quickLink div:after {left:16px; top:50%; margin-top:-10px;}
#intro .menu_quickLink .btn_shortcut:after {background-position:-2px -41px;}
#intro .menu_quickLink .btn_shortcut:hover:after {background-position:-27px -41px;}
#intro .menu_quickLink .btn_license:after {background-position:-2px -66px;}
#intro .menu_quickLink .btn_license:hover:after {background-position:-27px -66px;}
#intro .menu_quickLink .btn_cs:after {background-position:-2px -91px;}
#intro .menu_quickLink .btn_cs:hover:after {background-position:-27px -91px;}


/*버튼 스타일*/
.intro_btn {margin-top:0.7em;}
.btn_text {position:relative; height:20px; line-height:20px; font-size:95%; display:inline-block; border:1px solid #c5c5c5; background-color:#fff; -webkit-border-radius:0.2em; -moz-border-radius:0.2em; border-radius:0.2em;}
.btn_text a {display:block; padding:0 7px 0 23px; color:#333; text-decoration:none;}
.btn_text:after {position:absolute; left:9px; top:50%; margin-top:-5px; width:8px; height:10px; background-image:url(./images/img_icon.png); background-position:no-repeat; content:"";}
.btn_text:hover {background-color:#e9eefb; border-color:#90a5dc;}
.btn_text:hover a {color:#5775c1;}
.btn_function:after {background-position:-1px -1px;}
.btn_function:hover:after {background-position:-12px -1px;}
.btn_guide a {padding-left:20px}
.btn_guide:after {background-position:-23px 0;}
.btn_guide:hover:after {background-position:-33px 0;}