@charset "UTF-8";

/* Default */
* { padding:0; margin:0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; line-height:1.25; word-break:keep-all; }

html[lang="ko"] * { font-family:'NanumSquare', 'simsun'; }
html[lang="en"] * { font-family:'Lato'; }

html,
body { height:100%; }
body { color:#222; background-color:#fafafa; }

img { vertical-align:middle; }
em { font-style:normal; }
sup { vertical-align:top; font-size:.6em; }

a[data-href] { color:#080; text-decoration:none; }
*[data-anchor] { position:absolute; visibility:hidden; margin-top:-60px; }
input[readonly] { color:#555; background-color:#f0f0f0; }

label { display:inline-block; }
label div { display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; }
label div input[type='radio'] { position:absolute; visibility:hidden; }
label div input[type='radio'] + span.image { width:20px; height:20px; margin-right:10px; vertical-align:middle; display:inline-block; background:url('../../img/common/img-input-radio-off.svg') no-repeat; background-size:cover; }
label div input[type='radio']:focus + span.image,
label div input[type='radio']:hover + span.image { background:url('../../img/common/img-input-radio-off-hover.svg'); }
label div input[type='radio']:checked + span.image { background:url('../../img/common/img-input-radio-on.svg'); }
label div input[type='radio'] + span + span { color:#757575; }
label div input[type='radio']:checked + span + span { color:#222; }
label div input[type='checkbox'] { position:absolute; visibility:hidden; }
label div input[type='checkbox'] + span.image { width:20px; height:20px; margin-right:10px; vertical-align:middle; display:inline-block; background:url('../../img/common/img-input-checkbox-off.svg') no-repeat; background-size:cover; }
label div input[type='checkbox']:focus + span.image,
label div input[type='checkbox']:hover + span.image { background:url('../../img/common/img-input-checkbox-off-hover.svg'); }
label div input[type='checkbox']:checked + span.image { background:url('../../img/common/img-input-checkbox-on.svg'); }
label div input[type='checkbox'] + span + span { color:#757575; }
label div input[type='checkbox']:checked + span + span { color:#222; }

/* Mobile */
@media screen and (min-width:1px) and (max-width:799.99px) {
}

/* Mobile & Tablet */
@media screen and (min-width:1px) and (max-width:1219.99px) {
}

/* Tablet */
@media screen and (min-width:800px) and (max-width:1219.99px) {
}

/* Tablet & Desktop */
@media screen and (min-width:800px) {
}

/* Desktop */
@media screen and (min-width:1220px) {
}

#ly-Body.active-detail { overflow:hidden; }

#ly-Layout { width:100%; min-width:1000px; min-height:100%; position:relative; }

#ly-Header { width:100%; min-width:1000px; height:40px; position:fixed; top:0; left:0; z-index:255; background-color:#fff; border-bottom:1px solid #eee; display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; -ms-flex-pack:justify; justify-content:space-between; }
#ly-Header p { padding:0 20px; }

#ly-Navi { width:240px; position:absolute; padding-top:40px; }
#ly-Navi { min-height:100%; top:0; left:0; z-index:254; background-color:#fff; border-right:1px solid #eee; }
#ly-Navi div.frame { width:85%; margin:auto; }
#ly-Navi h1 { padding:25px 0; text-align:center; }
#ly-Navi h1 img { width:100px; vertical-align:top; }
#ly-Navi ul.parent { border-top:3px solid #dadada; }
#ly-Navi li.parent-li { border-bottom:1px solid #eee; }
#ly-Navi a.parent-link { padding:24px 20px 24px 40px; display:block; font-weight:700; text-decoration:none; color:#666; position:relative; transition:color ease .5s 0s; line-height:1; outline:none; }
#ly-Navi a.parent-link.focus,
#ly-Navi a.parent-link:focus,
#ly-Navi a.parent-link:hover { color:#000;  }
#ly-Navi a.parent-link.active { color:#e53c2e; }
#ly-Navi a.parent-link:after { width:100%; height:100%; content:''; position:absolute; top:0; left:0; opacity:.5; background-position:10px center; background-repeat:no-repeat; transition:opacity ease .5s 0s; }
#ly-Navi a.parent-link.product:after { background-image:url('../../img/common/img-navi-product.svg'); }
#ly-Navi a.parent-link.board:after { background-image:url('../../img/common/img-navi-board.svg'); }
#ly-Navi a.parent-link.popup:after { background-image:url('../../img/common/img-navi-popup.svg'); }
#ly-Navi a.parent-link.analytics:after { background-image:url('../../img/common/img-navi-analytics.svg'); }
#ly-Navi a.parent-link.manage:after { background-image:url('../../img/common/img-navi-manage.svg'); }
#ly-Navi a.parent-link:focus:after,
#ly-Navi a.parent-link:hover:after { opacity:.75; }
#ly-Navi a.parent-link span { line-height:1; }
#ly-Navi a.parent-link:not(.active) + ul.child { display:none; }
#ly-Navi ul.child { background-color:#fafafa; padding-top:14px; padding-bottom:14px; }
#ly-Navi a.child-link { padding:6px 20px; text-decoration:none; font-size:.9em; color:#666; display:block; border-left:1px solid transparent; outline:none; }
#ly-Navi a.child-link:focus,
#ly-Navi a.child-link:hover { color:#000; }
#ly-Navi a.child-link.active { color:#000; border-color:#e53c2e; }

#ly-Sections { min-height:100%; position:relative; padding:65px 30px 30px 270px; }

#ly-Sections h2 { font-size:1.6em; font-weight:900; margin-bottom:30px; }

#ly-Footer { width:100%; }

/* Loading */
#ly-Loading { width:100vw; height:100vh; position:fixed; top:0; left:0; background:rgba(0, 0, 0, .8); display:none; z-index:1000; }
#ly-Loading .frame { width:100%; height:100%; display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; . }
#ly-Loading .obj-loading { position:relative; }
#ly-Loading .obj-loading div { box-sizing:border-box; }
#ly-Loading .obj-loading > div { width:200px; height:200px; position:absolute; top:0px; left:0px; border-radius:50%; border:20px solid #000; border-color:#e53c2e transparent #e53c2e transparent; -webkit-animation:loading 2s linear infinite; animation:loading 2s linear infinite; }
#ly-Loading .obj-loading > div:nth-child(2),
#ly-Loading .obj-loading > div:nth-child(4) { width:156px; height:156px; top:22px; left:22px; -webkit-animation:loading-reverse 1s linear infinite; animation:loading-reverse 1s linear infinite; }
#ly-Loading .obj-loading > div:nth-child(2) { border-color:transparent #ccc transparent #ccc; }
#ly-Loading .obj-loading > div:nth-child(3) { border-color:transparent; }
#ly-Loading .obj-loading > div:nth-child(3) div { width:100%; height:100%; position:absolute; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
#ly-Loading .obj-loading > div:nth-child(3) div:before,
#ly-Loading .obj-loading > div:nth-child(3) div:after { width:20px; height:20px; content:''; display:block; position:absolute; top:-20px; left:70px; background:#e53c2e; border-radius:50%; box-shadow:0 180px 0 0 #e53c2e; }
#ly-Loading .obj-loading > div:nth-child(3) div:after { left:-20px; top:70px; box-shadow:180px 0 0 0 #e53c2e; }
#ly-Loading .obj-loading > div:nth-child(4) { border-color:transparent; }
#ly-Loading .obj-loading > div:nth-child(4) div { width:100%; height:100%; position:absolute; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
#ly-Loading .obj-loading > div:nth-child(4) div:before,
#ly-Loading .obj-loading > div:nth-child(4) div:after { width:20px; height:20px; content:''; display:block; position:absolute; top:-20px; left:48px; background:#ccc; border-radius:50%; box-shadow:0 136px 0 0 #ccc; }
#ly-Loading .obj-loading > div:nth-child(4) div:after { left:-20px; top:48px; box-shadow:136px 0 0 0 #ccc; }
#ly-Loading .obj-loading { width:120px !important; height:120px !important; -webkit-transform:translate(-60px, -60px) scale(0.6) translate(60px, 60px); transform:translate(-60px, -60px) scale(0.6) translate(60px, 60px); }

@keyframes loading {
	0% {
		-webkit-transform:rotate(0);
		transform:rotate(0);
	}
	100% {
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

@-webkit-keyframes loading {
	0% {
		-webkit-transform:rotate(0);
		transform:rotate(0);
	}
	100% {
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

@keyframes loading-reverse {
	0% {
		-webkit-transform:rotate(0);
		transform:rotate(0);
	}
	100% {
		-webkit-transform:rotate(-360deg);
		transform:rotate(-360deg);
	}
}

@-webkit-keyframes loading-reverse {
	0% {
		-webkit-transform:rotate(0);
		transform:rotate(0);
	}
	100% {
		-webkit-transform:rotate(-360deg);
		transform:rotate(-360deg);
	}
}