@charset "utf-8";

@import "font.css";

html	{}
html, body	{width:100%; font:normal 400 16px/1.5 "noto-regular","Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", Dotum, "돋움"; color:#666; letter-spacing: -1px}
body	 {font-size:16px;}
body, ol, ul, li, dl, dt, dd, blockquote, fieldset, h1, h2, h3, h4, h4, h5, h6, pre, form, p, div	{margin:0; padding:0;}
th, td	{padding:0;}
address, caption, cite, code, dfn, em, strong, textarea, var	{font-style:normal; font-weight:400;}
b, strong	{font-weight:bold;}
a	{color:#555; border:0; text-decoration:none;}
a:hover	 {text-decoration:none;}
ol, ul	 {list-style-type:none;}
hr	{display:none;}
caption	{position:absolute; left:-9999px; height:0; overflow:hidden; font-size:0;}
li	{vertical-align:middle; line-height:1.2;list-style:none;}
img	{border:0; vertical-align:middle;}
fieldset	{border:0; display:block;}
legend	{margin-left:-7px; position:absolute; left:-9999px; height:0; overflow:hidden; font-size:0;}
table	 {width:100%; table-layout:fixed; border-collapse:collapse;}
input	 {font:normal 400 14px/1.2 "noto-regular", dotum,"돋움"; color:#555; vertical-align:middle;}
.container	 {display:inline-block; width:100%;}
.container:after	 {content:""; clear:both; display:block; height:0; visibility:hidden;}
textarea	{font:normal 400 14px/22px "noto-regular", dotum,"돋움"; color:#555; resize:none;}
.hr	{display:none}
.none	{position:absolute; top:0; left:-9999px; width:0; height:0; font-size:0; line-height:0; overflow:hidden;}
body .v_top	{vertical-align:top;}
body .v_mid	{vertical-align:middle;}
body .v_btm	{vertical-align:bottom;}
.a_left	{text-align:left;}
.a_center	{text-align:center;}
.a_right	{text-align:right;}
.btn_abs	{position:relative; height:0;}
.btn_abs .abs	 {position:absolute;}
.f_left	{float:left;}
.f_right	{float:right;}
/******************************************************** default end *************************************************************************/
.skipnav	{position:absolute; top:0; left:0; z-index:100; width:100%; background:#000; color:#fff; text-align:center;}
.skipnav a	{display:block; color:#fff; font-weight:600; width:0; height:0; line-height:0; font-size:0;}
.skipnav a:focus, .skip a:active	{display:block; padding:5px 0; width:auto; height:auto; line-height:1.5; font-size:14px;}

/*
*html ������	{}
*+html ������	{}
@media screen {������{};}
@-moz-document url-prefix(){������	{};}
@media screen and (-webkit-min-device-pixel-ratio:0){������{};}
*/

button	{display:inline-block; margin:0; padding:0; background:none; border:none; text-align:center; vertical-align:middle; white-space:nowrap; cursor:pointer; font-weight:600; font-family:"Nanum Gothic", dotum, "����";}
*+html button	{margin:0 2px; overflow:visible;}
button > span, .btn > span, button > span > span, .btn > span > span {display:block; position:relative;}
button::-moz-focus-inner {padding:0; border:0;} /* ���̾����� ��ư ���� ���� ���� */
button.disabled, .btn.disabled {cursor:default;}
.tts{text-indent:-9999px;width:0;height:0;font-size:0;overflow:hidden;}
.btn_section	{text-align:center; padding:3px 0 0;}
.btn_section2	{text-align:center; padding:12px 0 0;}

.is-tablet, .is-mobile {display:none;}
.dim {display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1; background: url("/sites/ipsi/images/sub/bg/dim_bg.png") repeat 0 0;}

/**********************************************************************************
    										컨텐츠 영역(가이드)
**********************************************************************************/
.bookmark, .bookmark li {list-style:decimal;}
.bookmark {margin: 20px 0; padding: 10px; background: #f9f9f9;}
.box {margin: 20px; padding: 20px; border: 1px solid #eee; word-break: break-all; word-wrap: break-word;}
.type {font-size:25px; color:red;}
.guide_textarea{box-sizing: border-box; width: 100%; padding: 10px; margin-bottom: 10px; font-size: 15px; line-height: 17px; color: #333; border: 0; background-color: #ececec;}
#section01, #section02, #section03,#section04,#section05{padding-bottom:30px; margin-bottom:30px; border-bottom:1px dotted #d5d5d5;}

/* 탭메뉴 가이드 */
.tab_section {width:100%;}
.tab_section ul li {overflow:hidden;}
.tab_section > ul {overflow:hidden; margin-bottom:25px; border-bottom: 1px solid #e2e2e2;}
.tab_section > ul > li {float:left; width:33.3%; margin-bottom:-1px;}
.tab_section > ul > li > span {display: block; border: 1px solid #e2e2e2; border-left: 0; padding-right: 20px;}
.tab_section > ul > li:nth-child(3n+1) > span > a {border-left: 1px solid #e2e2e2;}
.tab_section > ul > li > span a {display: block; padding: 15px 0 17px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tab_section > ul > li.on > span {border-color:#155a86; background-color:#155a86;}
.tab_section > ul > li.on > span a {color:#fff;}
.tab_section__tab-contents {display:none;}
.tab_section__tab-contents.on {display:block;}

/* 폰트 가이드 */
.yjc_tit01 {font-size:34px; line-height:36px; font-family:'noto-medium';}
.yjc_tit02 {font-size:30px; line-height:32px; font-family:'noto-regular'; color:#155a86;}
.yjc_tit03 {font-size:18px; line-height:20px; font-family:'noto-medium'; color:#178ba9;}

/* bullet 가이드*/
.bullet01 {padding-left:18px; background:url("../images/dot/bullet_01.png") no-repeat left center;}
.bullet02 {padding-left:11px; background:url("../images/dot/bullet_02.png") no-repeat left center;}
.bullet03 {padding-left:13px; background:url("../images/dot/bullet_03.png") no-repeat left 8px;}

/* Table 가이드 01 */
.table01 tbody {border-top:2px solid #000; border-bottom:1px solid #000;}
.table01 tbody tr td {padding:15px 20px; border:1px solid #ddd;}
.table01 tbody tr th {background-color:#f5f5f5; text-align:center; border-bottom:1px solid #ddd; border-right:1px solid #ddd; border-left:0; font-family:'noto-medium';}
.table01 tbody tr td:last-child {border-right:0;}
.table01 tbody tr:last-child th{border-bottom:0;}
.table01 tbody tr:last-child td{border-bottom:0;}

/* Table 가이드 02 */
table th {background-color:#f5f5f5 !important;}
.table02 thead {border-top:2px solid #000;}
.table02 thead tr th {padding:15px 0; border-left:1px solid #ddd;}
.table02 thead tr th:first-child {border-left:0;}
.table02 tbody {border-bottom:1px solid #000;}
.table02 tbody tr td {padding:15px 20px; border:1px solid #ddd; text-align:center;}
.table02 tbody tr td:first-child {border-left:0;}
.table02 tbody tr td:last-child {border-right:0;}
.table02 tbody tr:last-child td {border-bottom:0;}

/* Paging*/
.paging{position:relative; text-align:center;}
.paging a {display:inline-block; width:45px; height:45px; vertical-align: middle; text-align:center; border:1px solid #d4d4d4; box-sizing: border-box;}
.paging > a > span {display:block; width:0; overflow:hidden;}
.paging > a.first {background:#f3f3f3 url("../images/btn/paging_first.gif") no-repeat center center;}
.paging > a.prev {background:#f3f3f3 url("../images/btn/paging_prev.gif") no-repeat center center;}
.paging > a.next {background:#f3f3f3 url("../images/btn/paging_next.gif") no-repeat center center;}
.paging > a.last {background:#f3f3f3 url("../images/btn/paging_last.gif") no-repeat center center;}
.paging .numbering {display:inline-block; padding:0 16px; vertical-align: middle;}
.paging .numbering strong {display:inline-block; padding:15px 0 14px; min-width:45px; vertical-align: middle; font-size:14px; line-height:16px; font-family:'noto-medium'; color:#fff; background:#155a86; text-align:center;}
.paging .numbering a {display:inline-block; min-width:43px; vertical-align: middle; font-size:14px; line-height:16px; color:#727272; border:1px solid #ccc; text-align:center;}
.paging .numbering a span {display:block; padding:14px;}
/* //Paging*/

/* radio, checkbox 버튼 가이드 */
input[type="radio"] {display:none;}
input[type="radio"] + label {padding-left:26px; background:url("../images/btn/radio_btn_off.png") no-repeat 0 center; background-size:contain;}
input[type="radio"]:checked + label {padding-left:26px; background:url("../images/btn/radio_btn_on.png") no-repeat 0 center; background-size:contain;}
input[type="checkbox"] {display:none;}
input[type="checkbox"] + label {padding-left:26px; background:url("../images/btn/checkbox_off.png") no-repeat 0 center; background-size:contain;}
input[type="checkbox"]:checked + label {padding-left:26px; background:url("../images/btn/checkbox_on.png") no-repeat 0 center; background-size:contain;}

/* select 가이드 */
#section07 > .box {min-height:42px;}
select + .nice-select{border:1px solid #d0d0d0; background:url("../images/bg/select_bg.png") no-repeat right center;}

/* Btn 가이드 */
.guide_table input{display:inline-block;}
.guide_table td {padding:10px;}
.btn {display: inline-block; text-align: center; color:#fff; box-sizing:border-box;}
.btn-s {padding:12px 11px; width:54px; height:40px; font-size:14px; line-height:16px;}
.btn-m {padding:12px 11px; width:106px; height:40px; font-size:14px; line-height:16px;}
.btn-l {padding:18px 35px; height:50px; font-size:14px; line-height:16px;}
.btn-xl {padding:36px 50px; height:89px; font-size:14px; line-height:16px;}
.btn-color-type01 {background-color:#304a5a;}
.btn-color-type02 {background-color:#898d9c;}
.btn-color-type03 {background-color:#a28948;}
.btn-color-type04 {background-color:#3b415a;}

/* 다운로드버튼 가이드 */
.down_btn {width:222px; height:57px; display:inline-block; padding:17px 0 17px 57px; border:1px solid #b8b8b8; background:url("../images/btn/down_btn.png") no-repeat left center; text-align:center; box-sizing:border-box;}
/**********************************************************************************
    										컨텐츠 영역(가이드)
**********************************************************************************/

@media all and (max-width:1024px){
	.is-pc{display:none;}
	.is-mobile{display:block;}
/**********************************************************************************
    										컨텐츠 영역(가이드)
**********************************************************************************/
	.tab_section > ul > li > a {padding: 12px 0 11px; font-size: 14px; line-height: 16px;}

	.down_btn {padding: 10px 0; padding-left: 37px; width:49%; height:39px; font-size:12px; background:url("../images/btn/m_down_btn.png") no-repeat left center; background-size:auto 100%;}
}

@media all and (max-width:768px){
}

@media all and (max-width:640px){
	body {font-size:16px; line-height:18px;}

	/* 탭메뉴 가이드 */
	.tab_section > ul > li {float:none; width:auto;}
	.tab_section > ul > li > span {display: block; border: 1px solid #e2e2e2; border-left: 0; padding-right: 20px;}
	.tab_section > ul > li:nth-child(3n+1) > span > a {border-left: 1px solid #e2e2e2;}
	.tab_section > ul > li > span a {display: block; padding: 15px 0 17px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left:1px solid #e2e2e2;}
	.tab_section > ul > li.on > span {border-color:#155a86; background-color:#155a86;}
	.tab_section > ul > li.on > span a {color:#fff;}
	.tab_section__tab-contents {display:none;}
	.tab_section__tab-contents.on {display:block;}

	/* 폰트 가이드 */
	.yjc_tit01 {font-size:25px; line-height:27px; font-family:'noto-medium';}
	.yjc_tit02 {font-size:19px; line-height:21px; font-family:'noto-regular'; color:#155a86;}
	.yjc_tit03 {font-size:15px; line-height:17px; font-family:'noto-medium'; color:#178ba9;}

	/* 페이징 가이드 */
	.paging a {width: 30px; height: 30px;}
	.paging .numbering {padding: 0 3%;}
	.paging .numbering strong {padding: 7px 0; min-width: 30px;}
	.paging .numbering a {min-width: 30px;}
	.paging .numbering a span {padding: 6px 10px;}
}