@charset "utf-8";

@font-face 
{
	font-family:'noto';
	src:url('../font/noto_kr_r.eot');
	src:url('../font/noto_kr_r.eot?#iefix') format('embedded-opentype'), 
        url('../font/noto_kr_r.woff') format('woff'), 
		url('../font/noto_kr_r.ttf') format('truetype');
}

@font-face 
{
	font-family:'noto';
	font-weight:bold;
	src:url('../font/noto_kr_b.eot');
	src:url('../font/noto_kr_b.eot?#iefix') format('embedded-opentype'), 
        url('../font/noto_kr_b.woff') format('woff'), 
		url('../font/noto_kr_b.ttf') format('truetype');
}

@font-face 
{
	font-family:'noto';
	font-weight:200;
	src:url('../font/noto_kr_l.eot');
	src:url('../font/noto_kr_l.eot?#iefix') format('embedded-opentype'), 
        url('../font/noto_kr_l.woff') format('woff'), 
		url('../font/noto_kr_l.ttf') format('truetype');
}

html, body {margin:0; padding:0;}
body {background:url('../images/bg.gif') no-repeat center 0; background-size:auto 100%; font-family:'noto', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', '굴림', 'Gulim', AppleGothic, UnDotum, Arial, Tahoma, Verdana, sans-serif; font-size:13px; color:#666; line-height:21px;}
h1, h2, h3, h4, h5, h6 {margin:0; padding:0; color:#000; line-height:100%;}
a {color:#666;}
form {display:inline;}
caption {overflow:hidden; position:absolute; left:0; top:0; width:0; height:0; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999px;}
img {border:none;}
fieldset {margin:0; padding:0; border:none;}
select, input {font-family:'noto', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', '굴림', 'Gulim', AppleGothic, UnDotum, Arial, Tahoma, Verdana, sans-serif; font-size:13px; color:#444;}
.hidden {overflow:hidden; width:0; height:0; margin:0; padding:0; font-size:0; line-height:0;}

/* header */
#layout-header {padding:120px 0 20px; text-align:center;}
#header {position:relative; width:980px; max-width:90%; margin:0 auto; text-align:left;}
#logo {font-size:3.076em;}
#logo a {color:#333; text-decoration:none;}
#logo span {font-size:0.65em; font-weight:200; color:#5862aa; white-space:nowrap;}
#logo + .why {position:absolute; right:0; bottom:0; padding:2px 35px 2px 0; background:url('../images/why.png') no-repeat right center; font-size:1.153em; text-decoration:none;}

/* layout-container */
body > #layout-container:first-child {padding:130px 0 100px;}
body > #layout-container:first-child #container {width:1200px;}
body > #layout-container.short {padding:300px 0 250px;}
body > #layout-container.short #container {padding-top:90px; padding-bottom:90px;}
body > #layout-container.mid {padding:240px 0 210px;}
#layout-container {padding-bottom:100px; text-align:center;}
#container {width:980px; max-width:90%; margin:0 auto; padding:50px; box-sizing:border-box; box-shadow:0 2px 1px #c9c9c9; background-color:#fff; text-align:left;}

/* otp */
body.otp #layout-header #header,
body.otp #layout-container #container {width:900px;}

/* searchform */
.searchform {overflow:hidden; position:relative; height:40px; padding-right:50px; border-bottom:1px solid #808080; background-color:#fff;}
.searchform input:first-child {width:100%; height:100%; border:0 none; font-size:1.230em; font-weight:200; color:#787878;}
.searchform input:first-child + input {position:absolute; right:12px; top:0;}
.searchform + .login-ing {margin-top:40px;}

/* login-ing */
.login-ing {text-align:left;}
.login-ing input,
.login-ing img {vertical-align:middle;}
.login-ing label {margin:0 5px; font-size:1.153em; color:#2b2b2b; vertical-align:middle;}

/* icon-tip */
.icon-tip {position:relative;}
.icon-tip:hover span,
.icon-tip:focus span,
.icon-tip:active span {display:block;}
.icon-tip span {display:none; position:absolute; left:30px; top:-5px; padding:5px 10px; border:1px solid #e8e8e8; background-color:#f3f3f3; font-size:1.076em; white-space:nowrap;}
.icon-tip span:before {position:absolute; left:-5px; top:50%; width:6px; height:9px; margin-top:-4px; background:url('../images/tip_arr.gif') no-repeat; content:'';}

/* title */
.title-line {position:relative; margin:40px 0 15px; padding-top:15px; font-size:1.538em; color:#2b2b2b;}
.title-line:before {position:absolute; left:0; top:0; width:20px; height:1px; background-color:#000; content:'';}
.title-txt {margin:40px 0 15px; font-size:2.307em; color:#333;}
.title-txt:first-child {margin-top:0;}
.title-txt + p {font-size:1.230em;}

/* account-list */
.account-list {margin:0; padding:0; list-style:none;}
.account-list a {display:block; position:relative; margin-top:10px; padding:0 50px 0 25px; border-radius:5px; border:1px solid #e8e8e8; text-decoration:none;}
.account-list .subject {position:relative; padding:0 0 0 125px; font-size:1.230em; font-weight:200; color:#2b2b2b;}
.account-list .subject img {position:absolute; left:0; top:auto; margin-top:2px; max-height:20px;}
.account-list .icon {position:absolute; right:25px; top:50%; height:20px; margin-top:-10px; line-height:20px;}
.account-list .icon img {vertical-align:middle;}
.account-list .on a {border-color:#5862aa; background-color:#5862aa;}
.account-list .on .subject {color:#fff;}

/* box */
.box-kreonet {position:relative; padding-left:400px;}
.box-kreonet + .box-blue {margin-top:40px;}
.box-kreonet .img {position:absolute; left:0; top:0; width:315px; margin:0; text-align:center;}
.box-kreonet .img:after {display:block; height:20px; background:url('../images/kreonet.gif') no-repeat center bottom; content:'';}
.box-blue {position:relative; padding:20px 30px; background-color:#f3f4f9;}
.box-blue h2 {position:absolute; left:40px; top:35px; font-size:1.384em; color:#333;}
.box-blue > p:first-child {margin:0; padding:0; font-size:1.230em; font-weight:200; color:#333;}
.box-blue > p:first-child + p {font-size:1.230em; font-weight:200;}
.box-blue > p:last-child {margin-bottom:0;}
.box-blue p strong {font-size:1.125em; font-weight:bold; color:#333;}
.box-blue .content {margin:5px 0 5px 175px; padding-left:35px; border-left:1px solid #a8a8a8; font-size:1.153em; font-weight:200; color:#333; line-height:1.4;}
.box-blue .bul-dot {margin-bottom:-5px;}
.box-blue .bul-dot + p {margin-top:30px; font-size:1.230em; font-weight:200;}
.box-blue + .newuser {margin-top:45px;}
.box-blue + .icon-wrong {margin:30px 0 40px;}
.box-line {position:relative; padding:15px 25px; border:1px solid #d8d8d8;}
.box-line h2 {font-size:1.846em; color:#333;}
.box-line h2 + .control + .bul-dot {margin-top:10px;}
.box-line .control {position:absolute; right:20px; top:12px; padding-right:40px; font-size:1.230em; font-weight:200; color:#333; text-decoration:none; line-height:27px;}
.box-line .control:before {position:absolute; right:0; top:0; width:27px; height:27px; background:url('../images/icon_more.gif') no-repeat; content:'';}
.box-line .control.open:before {transform:rotate(180deg);}

/* bul-dot */
.bul-dot {margin:18px 0 0; padding:0; list-style:none;}
.bul-dot li {position:relative; margin:8px 0; padding-left:15px; font-size:1.230em; font-weight:200;}
.bul-dot li strong {font-weight:bold; color:#333;}
.bul-dot li:before {position:absolute; left:0; top:9px; width:3px; height:3px; background-color:#4b4b4b; content:'';}

/* bul-dot2 */
.bul-dot2 {margin:18px 0 0; padding:0; list-style:none;}
.bul-dot2 li {position:relative; margin:8px 0; font-size:1.230em; font-weight:200;}
.bul-dot2 li strong {font-weight:bold; color:#333;}

/* login-form */
.login-form ul {margin:0; padding:0; list-style:none;}
.login-form input {width:100%; height:60px; padding-left:12px; box-sizing:border-box; border:0 none; border-bottom:1px solid #7c7c7c; font-size:1.230em; font-weight:200; color:#2b2b2b;}
.login-form .img {top:20%;}
.login-form .btn-purple {min-width:0; width:100%; height:50px; font-weight:200; color:#fff;}

/* newuser */
.newuser {margin:0 -50px -20px; padding-top:25px; border-top:1px solid #dbdbdb; font-size:1.153em; font-weight:200; color:#2b2b2b; text-align:center;}
.newuser a {color:#ff4646;}
.newuser span {white-space:nowrap;}

/* icon */
.icon-wrong {padding-left:95px; background:url('../images/icon_wrong.gif') no-repeat 25px center; font-size:1.153em; font-weight:200; color:#333;}
.icon-error {padding-left:30px; background:url('../images/icon_error.png') no-repeat 0 center;}

/* icon-ment */
.icon-ment {position:relative; min-height:80px; margin:0; padding-left:95px; color:#333;}
.icon-ment .icon {position:absolute; left:0; top:0;}
.icon-ment strong {font-size:2.307em; line-height:1.3;}
.icon-ment p {font-size:1.230em;}
.icon-ment + .box-blue {margin-top:35px;}
#contents > .icon-ment:first-child {margin:50px 0; padding-left:0; text-align:center;}
#contents > .icon-ment:first-child .icon {display:block; margin-bottom:35px; position:relative;}

/* btn */
.btn-area {margin-top:60px; padding-top:40px; border-top:1px dashed #d2d2d2; text-align:center;}
.btn-area strong:first-child {display:block; margin-bottom:35px; font-size:1.538em; color:#333;}
.btn-purple {display:inline-block; min-width:200px; height:50px; padding:0 40px; border:0 none; background-color:#5862aa; font-size:1.384em; font-weight:bold; color:#fff; text-align:center; text-decoration:none; line-height:50px; vertical-align:top;}
.btn-gray {display:inline-block; width:auto !important; min-width:200px; height:50px; padding:0 40px; border:0 none; background-color:#5a5a5a; font-size:1.384em; font-weight:bold; color:#fff; text-align:center; text-decoration:none; line-height:50px; vertical-align:top;}
input.btn-purple,
input.btn-gray {width:280px;}

/* email-form */
.email-form {position:relative; margin-top:20px; padding-left:125px;}
.email-form label {position:absolute; left:0; top:auto; font-size:1.230em;line-height:35px;}
.email-form input {width:70%; height:35px; border:1px solid #d7d7d7;}

/* txt-center */
.txt-center {text-align:center;}
.txt-center form {display:inline;}

/* login-user */
.login-user h1 {margin-bottom:30px; text-align:center;}
.login-user h1 img {height:65px;}
.login-user .bul-dot {overflow:hidden;}
.login-user .bul-dot li {float:left; width:100%; margin:0; box-sizing:border-box; font-size:1.153em;}
.login-user .list {display:table; width:100%; margin:40px 0 0; padding:0; list-style:none; table-layout:fixed;}
.login-user .list li {display:table-cell; padding:0 2.5%; text-align:center;}
.login-user .list p {margin-top:20px; font-size:1.153em; font-weight:200;}
.login-user .login-ing {width:570px; max-width:100%; margin:35px auto 20px;}

/* table */
.table {margin-top:20px; border-top:1px solid #4e4e4e;}
.table table {border-collapse:collapse;}
.table th {padding:10px 20px; border-bottom:1px solid #e8e8e8; font-size:1.230em; font-weight:bold; color:#2b2b2b; text-align:left;}
.table td {padding:10px 20px; border-bottom:1px solid #e8e8e8; border-left:1px solid #e8e8e8; font-size:1.230em; font-weight:200; color:#2b2b2b; text-align:left;}

/* login-otp */
.login-otp {padding-left:395px; background:url('../images/login_otp.gif') no-repeat 90px center;}
.login-otp strong {display:block; font-size:2em; color:#333; line-height:1.2;}
.login-otp strong + input {margin:40px 0 15px;}
.login-otp + .box-blue {margin-top:55px; font-size:1.153em; font-weight:200; color:#333; text-align:center;}
.login-otp + .box-blue .icon-error {margin-right:5px; font-size:1.2em; font-weight:bold;}

/* */
.login-ing + .txt-center {margin-top:-10px;}
.login-ing + .txt-center input,
.login-ing + .txt-center a {margin-top:10px;}

/* footer */
#layout-footer {padding:25px 0 50px; background-color:#fff; text-align:center;}
#footer {position:relative; width:1200px; max-width:95%; margin:0 auto; text-align:left;}

/* copyright */
#copyright {margin:0; padding:0 20px; font-size:1.076em; font-weight:200; text-align:center;}
#copyright img {margin-right:15px; vertical-align:middle;}
#copyright + #fnb {position:relative; padding:0 20px; font-size:1.076em; font-weight:200; text-align:center;}

/* fnb */
#fnb {position:absolute; right:0; top:0; margin:0; padding:0; text-align:right; list-style:none;}
#fnb li {display:inline; margin-right:15px; font-size:1.076em;}
#fnb a {position:relative; z-index:0; font-weight:bold; text-decoration:none; white-space:nowrap;}
#fnb a:before {position:absolute; left:0; bottom:0; z-index:-1; width:100%; height:8px; background-color:#cdd1ec; content:'';}

.kafe {margin:0; padding:0; font-size:1.153em; color:#969696;}
.kafe img {margin-right:15px; vertical-align:middle;}

@media screen and (max-width:1024px)
{
	/* box */
	.box-kreonet {padding-left:300px;}
	.box-kreonet .img {width:250px;}

	/* login-form */
	.login-form {background-position:35px center;}

	/* icon-ment */
	.icon-ment {margin-top:20px; padding:0; text-align:center;}
	.icon-ment .icon {display:block; position:relative; margin-bottom:15px;}
	.icon-ment + .box-blue {margin-top:20px;}

	/* login-user */
	.login-user .bul-dot li {width:50%;}

	/* login-otp */
	.login-otp {padding-left:260px;}
}

@media screen and (max-width:768px)
{
	/* header */
	#layout-header {padding-top:30px;}
	#logo + .why {position:relative;}

	/* layout-container */
	body > #layout-container:first-child {padding:30px 0;}
	#layout-container {padding-bottom:30px;}
	#container {padding:20px 30px 30px;}

	/* account-list */
	.account-list a {padding-left:15px;}
	.account-list .icon {right:15px;}
	.account-list .subject {padding-left:0;}
	.account-list .subject img {display:block; position:relative; margin:0 0 5px;}

	/* box */
	.box-kreonet {padding-left:0;}
	.box-kreonet .img {display:block; position:relative; width:100%;}
	.box-kreonet + .box-blue {margin-top:30px;}
	.box-blue {padding:20px;}
	.box-blue h2 {position:relative; left:0; top:0;}
	.box-blue .content {margin:15px 0 0; padding:20px 0 0; border:0 none; border-top:1px solid #a8a8a8;}
	.box-line .control {width:40px; height:40px; font-size:0; line-height:0;}

	/* login-form */
	.login-form .btn {margin-top:20px;}

	/* newuser */
	.newuser {margin:30px -30px -5px;}

	/* icon-wrong */
	.icon-wrong {padding:60px 0 0; background-position:center 0; text-align:center;}

	/* icon-tip */
	.icon-tip span {width:150px; z-index:1; white-space:normal; word-break:keep-all;} 

	/* btn */
	.btn-area {margin-top:30px; padding-top:20px;}
	.btn-area strong {margin-bottom:20px;}
	.btn-area a {display:block; margin-top:10px;}

	/* login-user */
	.login-user .bul-dot li {width:100%;}
	.login-user .list {margin:10px 0 0;}
	.login-user .list li {float:left; width:45%; margin-top:20px;}
	.login-user .list li:nth-child(3) {clear:both;}
	.login-user .list p {margin-top:10px;}
	.login-user .txt-center a {display:block; width:100%; margin-top:10px; box-sizing:border-box;}

	/* table */
	.table {overflow-x:auto;}
	.table th,
	.table td {clear:both; float:left; width:100%; box-sizing:border-box; border-left:0 none;}

	/* login-otp */
	.login-otp {padding:180px 0 0; background-position:center 0; text-align:center;}
	.login-otp strong + input {margin:10px 0;}
	.login-otp + .box-blue {margin-top:20px;}
	.login-otp + .box-blue span {display:block;}

	/* footer */
	#layout-footer {padding:20px 0 30px;}
	#footer {text-align:center;}
	#fnb {position:relative; text-align:center;}
}

@media screen and (max-width:450px)
{
	body {font-size:11px;}

	/* layout-container */
	#container {padding:20px;}

	/* searchform */
	.searchform + .login-ing {margin-top:20px;}

	/* title */
	.title-line {margin:20px 0 10px;}

	/* newuser */
	.newuser {margin:0 -20px; padding:20px 20px 0;}

	/* box */
	.box-blue + .newuser {margin-top:20px;}
	.box-blue + .icon-wrong {margin:20px 0 30px;}
	
	/* login-user */
	.login-user .list li {width:95%; margin-top:10px;}

	/* icon-tip */
	.icon-tip span {width:95px;}
}