@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700&display=swap');

/* base font */
html, body 						{font-family:'Noto Sans KR', 'Sans-serif';line-height:1.4;font-weight:300}
body 							{color:#000;margin:0 auto;}
.skip-navi{position: absolute; margin: 0; left: 0; top: 0; width: 100%; height: 0px; z-index: 1001;}
.skip-navi dt{height: 0;}
.skip-navi .title{text-indent: -5000px; font-size: 0; line-height: 0;}
.skip-navi a{position: absolute; left: 0; top: -1000px; z-index: 1002; width: 100%; height: 30px; line-height: 30px; text-align: center; background-color: #666666; color: #fff; z-index: 1000;}
.skip-navi a.on{top: 0;}
.skip-navi a:focus{top: 0; height: 30px;}
/* markup guide layout */
#header1 .header-wrap,
#container,

#header1							{position:relative;}
#header1 h1 						{padding:1rem 0;color:#fff;font-size:1.4rem;line-height:2rem;font-weight:400;}
#header1 h1 span 				{font-size:1rem;font-weight:300;margin-left:.1rem;}
#header1 h1 a,
#header1 h1 span 				{color:inherit;}
#footer{padding:1.2rem 0;border-top:1px solid rgba(208,208,208,1);font-size:1rem;background-color:#000;color:#fff;}
#footer .footer-wrap{position:relative;}
#footer p{text-align:center}
#footer a{color:#4d85ff;}
#container{max-width:1200px;margin:2rem auto 2.8rem;}
#container > .section > .section-title {font-size:2.2rem;color:#000;text-align:center;font-weight:700;letter-spacing:-.1rem}
#container h3{margin: 20px 0 15px;font-size:1.35rem;color:#3636dc;font-weight:400;}
#container .section +.section {margin-top:4rem}
#container .section-title + .table-wrap,
#container .section-title + .text-wrap,
#container .text-wrap + h3,
#container .table-wrap + h3,
#container .code-wrap + h3 {margin-top:2rem;}
#container h3 + .text-wrap,
#container h3 + .table-wrap,
#container .code-wrap {margin-top:.5rem;}
.code{margin-top: 20px;padding: 10px;font-size: 12px;text-align: left;border: 1px solid #ff8b00;border-radius: 10px;-webkit-border-radius: 10px;font-family: 'Noto Sans KR', 'Sans-serif';white-space: break-spaces;}
.btn-button{margin-top: 10px;padding: 10px;font-size: 12px;border: 1px solid #944aee;border-radius: 10px;-webkit-border-radius: 10px;}
.btn-a{margin-top: 10px;padding: 10px;font-size: 12px;border: 1px solid #ff8b00;border-radius: 10px;-webkit-border-radius: 10px;}


/* table */
.table-wrap{border-top:2px solid #292929;overflow-x:auto;}
.data-table{width:100%;border-bottom:1px solid #292929;/*font-size:14px;*/}
.data-table thead th{background:#f9f9f9;}
.data-table th + th,
.data-table td + td,
.data-table th + td{border-left:1px solid #e2e2e2;}
.data-table td.complete{background:#00a87d;color:#fff;}
.data-table td.undecided{background:#f5f5f5;}
.data-table td.apply{background:#f57f00;color:#fff;}
.data-table td.validation{background:#f5f5f5;color:#292929;}
.data-table td.working{background-color:#ffcd31;}
.data-table td.del{background-color:#999;text-decoration:line-through;}
.data-table td a{color:inherit;text-decoration:underline;}
.data-table th,
.data-table td{padding:.8rem;text-align:center;border-top:1px solid #e2e2e2;}

/* contents */
.text-wrap ul li:before{content:'-';margin-right:.1rem;}
.left,
td.left{text-align:left !important;}
.small,
td.small{font-size:smaller;}

.hljs-line-numbers { text-align: right; border-right: 1px solid #ccc; color: #999; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.hljs-ln-code {
	padding-left: 10px;
}


.table-wrap{overflow-x: hidden;overflow-y: hidden;}
.data-table th,
.data-table td{vertical-align: middle;}
.data-table + h3{margin-top: 50px;}
.tabs{margin: 50px 0;border: 1px solid #000;}
.tabs:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.tabs li{float: left;}
.tabs li + li{border-left: 1px solid #000;}
.tabs li a{display: block;height: 50px;line-height: 50px;text-align: center;background-color: #fff;color: #000;}
.tabs li.active{border-left: 0 none !important;}
.tabs li.active a{background-color: #3636dc;color: #fff;font-weight: bold;}
.data-table td a{text-decoration: none;}

/* Mobile Device */
@media screen and (max-width : 767px) {
	.data-table.wsg th:first-child,
	.data-table.wsg td:first-child,
	.data-table.wsg th.path,
	.data-table.wsg td.path,
	.data-table.wsg th.pageid,
	.data-table.wsg td.pageid{display:none;}

	#container .table-wrap {margin:0 -1.4rem;}
}

/* Tablet Device */
@media screen and (min-width : 768px) and (max-width : 991px) {

}

/* Desktop Device */
@media screen and (min-width : 992px) {

}

.backlines {
	position: fixed;
	pointer-events: none;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index:-1;
}
.line-vertical {position:absolute;width:1px;height:100%;left:25%;top:0;background:rgb(255, 222, 0, .4);
	transform-origin: 50% 0%;
	animation-name: lineH;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-iteration-count:1;
	will-change: transform;
}
.line-vertical.v2{left:50%;}
.line-diagonal {position:absolute;width:1px;height:70.71vw;background:rgb(255, 222, 0, .4);
	right:0;
	transform-origin: 50% 0%;
	animation-name: lineB;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	animation-iteration-count:1;
	will-change: transform;
}
.line-diagonal.d1{top: 0;animation-delay:1.2s;}
.line-diagonal.d2{top: 25%;animation-delay:1.7s;}
.line-diagonal.d3{top: 50%;animation-delay:2.2s;}

@keyframes lineH {
	0% {transform: scaleY(0);}
	100%{transform: scaleY(1);}
}
@keyframes lineB {
	0% {transform: scale(0) rotate(45deg);}
	100%{transform: scale(1) rotate(45deg);}
}

#wrap{width: 100%}
/* header */
#header1{position: relative; height: 70px; background-color: #333;}
#header1 h1{position: static;float: none; height: 70px; text-align: center; font: normal 2em/70px verdana, dotum, sans-serif; color: #ffffff;}
#header1 h1 a{color: #ffffff; text-decoration: none;}
#footer{background: 0 none; color: #222222;}
/* skip-gnb */
#header1 .skip-lnb{position: absolute; top: 25px; left: 20px;}
#header1 .skip-lnb a{position: relative; display: block; width: 25px;height: 16px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; font-size: 0; line-height: 999em; overflow: hidden;}
#header1 .skip-lnb a:after{content: ''; display: block; position: absolute; left: 0; top: 7px; width: 100%; height: 100%;border-top: 2px solid #fff; }

/* header explorer */
.explorer.v7 #header1 .skip-lnb a,
.explorer.v8 #header1 .skip-lnb a{border: 1px solid #595959;}
.explorer.v8 #header1 .skip-lnb a:after{background: none;}

#header1 .history-back{position: absolute; right: 20px; top: 25px; line-height: 18px}
#header1 .history-back a{display: inline-block; height: 25px; font: bold 12px/25px verdana, dotum, sans-serif; text-decoration: none; padding: 0 10px; color: #ffffff; border: 1px solid #595959; border-radius: 3px; background-color: rgba(0, 0, 0, 0.05);}
#header1 .history-back a:before{content: ""; font-size: 1em;}

#container{position: static;}
#container:after{content: ""; display: block; clear: both; width: 0; height: 0; visibility: hidden;}

/* content-aside */
.content-aside{position: absolute; float: left; width: 240px; top: -100px; margin-left: -240px; background-color: #f2f2f2; box-shadow: inset -5px 0 5px 0 rgba(0,0,0,0.1);}
.content-aside .lnb{background: #ffffff url('../../../wsg/@resource/images/bg_lnb.png') repeat-y 0 0;}
.content-aside .lnb h2{display: block; position: absolute; overflow: hidden; width: 1px; height: 1px; font-size: 1px; line-height: 0; white-space: nowrap;}
.content-aside .lnb>ul{margin: 0; padding: 0; font-size: 1.25em; line-height: 40px; color: #333333;}
.content-aside .lnb>ul>li{border-bottom: 1px solid #d9d9d9; background: transparent;min-height: 40px; line-height: 40px; font-size: 14px}
.content-aside .lnb>ul>li:hover{background: transparent;}
.content-aside .lnb>ul>li>strong{padding-left: 1em; color: #ff4f19}
.content-aside .lnb>ul>li>ul{margin: 0; padding: 0; background-color: #f2f2f2; box-shadow: inset -5px 0 5px 0 rgba(0,0,0,0.1);}
.content-aside .lnb>ul>li>ul>li{border-top: 1px solid #d9d9d9; background: url('../../../wsg/@resource/images/bg_overflow.png') repeat-y 0 0;}
.content-aside .lnb>ul>li>ul>li a{display: block; padding-left: 1em; color: #333333; text-decoration: none; background: url('../../../wsg/@resource/images/bg_anchor.png') no-repeat right 50%; background-size: auto 12px; -o-background-size: auto 12px; -ms-background-size: auto 12px; -moz-background-size: auto 12px; -webkit-background-size: auto 12px;}

/* content-primary */
.content-primary{float: none; overflow: auto; padding: 4em 1em;margin-left: 0}
.content-primary h1{font-family: verdana, Malgun Gothic, Dotum, Gulim, sans-serif; line-height: 1em; letter-spacing: -0.05em;}
.content-primary > h1{font-weight: normal; font-size: 3em; color: #333333;}
.content-primary > h1 > .em{font-size: 16px; line-height: 1.2em; vertical-align: bottom;}
.content-primary > p{margin: 1em 0;}
.content-primary > section{position: relative; margin-top: 4em;}
.content-primary > section > h1{font-weight: normal; font-size: 1.5em; margin-bottom: 1em; color: #333333;}
.content-primary > section > p{margin: 1em 0;}
.content-primary > section > .aside{position: absolute; top: 0; right: 0;}
.content-primary > section > section{margin-top: 2em;}
.content-primary > section > section .preview{color: #767676;}
.content-primary > section > section > h1{clear: both; margin: 1.5em 0 .5em 0; color: #ff4f19; font-size: 1em;}
/*.content-primary > section > section p{margin: .5em 0;}*/
.content-primary > section figure{margin: 1.5em 0;}
.content-primary > section figure figcaption{margin-top: .5em;}
/* .intro{margin: .5em 0;} */

/* footer */
#footer{padding: 12px 0 30px 0; border-top: 1px solid #c7c7c7; text-align: center;}
#footer small{display: block; font-size: .95em; color: #999999;}
#footer small abbr{display: inline-block;}

/* layout */
#overflow{position: relative; min-height: 100%; overflow: hidden;}
#overflow #wrap{position: static;}
#overflow.active{background: url('../../../wsg/@resource/images/bg_overflow.png') repeat-y 0 0;}
#overflow.active #wrap{position: relative; left: 240px;}
#overflow.active #wrap .content-aside{position: relative;}

section .wrap .content{padding: 1em; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9;}
section .wrap .content h1{margin: 1em 0; font-size: 1em; line-height: 1em;}
section .wrap .content p{margin-top: 1em;}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 1.5){
body{-webkit-text-size-adjust: none;}
img{max-width: 100%;}
.content-primary{padding: 4em 1em;}
}