@charset "utf-8";
@import url("../css/NotoKR.css");
/* CSS Document */
/*-- reset css --*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
html, body {font-family: 'Noto Sans Regular';}
body {
	width:100%;
	height:100%;
   line-height:1;
	overflow-x: hidden;
	background:#f5f5f5;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
ul, ol {list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	 text-decoration: none;
	
	 /* Link Style - change colours to suit your needs*/
	 color:#666;
	 -webkit-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
	 -moz-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
	 -ms-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
	 -o-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
	 transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
	 outline:none;
}
a:hover {
	text-decoration:none;
	color:#000;
}

/* change colours to suit your needs */
table {
    border-collapse:collapse;
    border-spacing:0;
	 vertical-align:middle;
}
th, td {vertical-align:middle;}
input, select {
    vertical-align:middle;
}

/*-- END reset css --*/

.wrap {
	margin:0 auto;
	width:640px;
}
.endline {
	clear:both;
	content:'';
}
section {
	margin-top:90px;
}

/*-- header --*/
header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:80px;
	z-index:5555;
	background:#fff;
	/*background:url('../img/headerBg.png') no-repeat left bottom;*/
	padding:5px 0;
	border-bottom:2px solid #1b8ab2;
}
div.menuBtn {
	position:absolute;
	top:26px;
	left:30px;
	width:60px;
	height:60px;
	background:url('../img/menu.png') no-repeat;
	text-indent:-9999px;
	color:transparent;
	cursor:pointer;
}
h1.logo {
	left:0; right:0; width:100%; margin:0 auto;
	text-align:center;
}
h1.logo > a {
	display:inline-block;
	width:75px;
	height:80px;
	background:url('../img/logo.png') no-repeat;
	text-indent:-9999px;
	color:transparent;
	background-size:75px 80px;
}
ul.topUtil {
	position:absolute;
	top:22px;
	right:30px;
}
ul.topUtil li {
	margin-left:30px;
	float:left;
}
ul.topUtil li a {
	display:block;
	width:32px;
	height:32px;
	text-indent:-9999px;
	color:transparent;
}
ul.topUtil li a.loginBtn {
	width:50px; height:50px; background:url('../img/ico_login.png') no-repeat;
}
ul.topUtil li a.mypageBtn {
	width:40px; height:50px; background:url('../img/ico_mypage.png') no-repeat;
}
ul.topUtil li a.logoutBtn {
	width:60px; height:50px; background:url('../img/ico_logout.png') no-repeat;
}
/*-- END header --*/



/*-- navigation --*/
nav {
	position:fixed;
	top:0;
	left:-100%;
	z-index:9000;
	width:78%;
	height:100%;
	background:#fff;
	transition-duration: .3s;
}
nav.show {
	left:0;
}
ul.loginWrap {
	position:relative;
	padding:18px 30px;
	width:100%;
	height:80px;
	background-color:#19355e;
	box-sizing:border-box;
}
ul.loginWrap li {
	float:right;
}
ul.loginWrap li:first-child {
	float:left;
}
ul.loginWrap li.closedBtn {
	position:absolute;
	margin-top:-16px;
	top:50%;
	right:-55px;
	width:32px;
	height:32px;
	background:url('../img/btn/closed.png') no-repeat 0;
	text-indent:-9999px;
	color:transparent;
}
ul.loginWrap li p {
	margin-top:8px;
	font-size:24px;
	color:#fff;
	letter-spacing:3px;
}
ul.loginWrap li p strong {
	font-size:28px;
}
ul.loginWrap li a.lgInnerBtn01 {
	display:block;
	margin-top:2px;
	padding:6px 0 0 50px;
	font-size:28px;
	color:#fff;
	background:url('../img/icon/ic00.png') no-repeat -80px 0px;
}
ul.loginWrap li a.lgInnerBtn02 {
	display:block;
	width:130px;
	height:44px;
	background:#f9c134;
	font-size:26px;
	text-align:center;
	line-height:44px;
	color:#fff;
}

div.myLink {
	padding: 30px 0 30px 0;
	text-align:center;
}
p.myInnerTxt{
	display:inline-block;
	padding:5px 0 10px 40px;
	font-size:17px;
	color:#f16c21;
	background:url('../img/ic00.png') no-repeat 0 -46px;
}
ul.linkBtn li {
	margin-top:0px;
	padding-bottom:15px;
	float:left;
	width:33.3333%;
}
ul.linkBtn li a {
	font-size:20px;
	color:#555;
}
span.myInnerIcon {
	margin:10px auto;
	display:block;
	width:104px;
	height:85px;
	background:url('../img/quickIc.png') no-repeat;
	background-position:0 0;
}
span.myIc01 {
	background-position:-100px 0px;
}
span.myIc02 {
	background-position:-204px 0px;
}

ul.menu > li > p {
	position:relative;
	padding:20px 30px;
	background-color:#e1e1e1;
	font-size:28px;
	color:#333;
	border-top:2px solid #fff;
}
ul.menu > li > p > span {
	position:absolute;
	top:50%;
	right:30px;
	margin-top:-8px;
	display:block;
	width:26px;
	height:16px;
	background:url('../img/btn/arrow03.png') no-repeat;
}
ul.menu > li > p.active {
	background-color:#208bb0;
	color:#fff;
}
ul.menu > li > p.active > span {
	background:url('../img/btn/arrow04.png') no-repeat;
}
ol.subMenu {
	padding:0 30px;
	display:none;
}
ol.subMenu > li {
	border-top:1px solid #e1e1e1;
}
ol.subMenu > li:first-child {
	border-top:none;
}
ol.subMenu > li > a {
    display:block;
	height:64px; line-height:64px;
	box-sizing:border-box;
    width:100%;
	font-size:24px;
	color:#6a6a6a;
}
div.blind {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
	z-index:8000; 
}
/*-- END navigation --*/



/*-- loginpage --*/
div.loginPage {
	position:fixed;
	top:0;
	right:-1920px;
	z-index:9999;
	width:100%;
	height:100%;
	background:#19355e;
	/*background:url('../img/loginBg.jpg') top left;*/
	transition:.5s; 
	animation-timing-function: ease-in-out;
}
div.loginPage.slide {
	right:0;
}
div.loginClose {
	position:absolute;
	top:30px;
	left:30px;
	width:16px;
	height:26px;
	background:url('../img/btn/loginClose.png') no-repeat;
}
h1.loginLogo {
	margin:50px auto;
	width:160px;
	height:160px;
	background:url('../img/loginlogo.png') no-repeat;
}
ul.loginInner {
	margin:0 auto;
	padding:50px 30px;
	width:520px;
	background:#fff;
}
ul.loginInner li {
	margin-bottom:20px;
}
ul.loginInner li > input {
	padding:20px;
	width:100%;
	height:60px;
	box-sizing:border-box;
	border:2px solid #ddd;
	font-size:24px;
	color:#555;
}
ul.loginInner li > input::-webkit-input-placeholder {
	color:#c5c5c5;
}
ul.loginInner li > input::-moz-input-placeholder {
	color:#c5c5c5;
}
ul.loginInner li a.loginInBtn {
	text-align:center;
	display:block;
	width:100%;
	height:70px;
	font-size:30px;
	line-height:70px;
	color:#fff;
	background:#26ac52;
	/*background:url('../img/loginBg.png') no-repeat;*/
}
li span {font-size:18px;}
li span > input[type="checkbox"] {
	margin-top:1px;
	width:18px;
	height:18px;
}
li span label {
	color:#555;
}
li span a {
	float:right;
	color:#666;
}
li.newMamber {
	display:table;
	margin:50px auto;
	padding:20px 15px;
	width:100%;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	box-sizing:border-box;
}
li.newMamber p {
	display: table-cell;
	padding-left:110px;
	font-size:17px;
	line-height:26px;
	color:#666666;
	background:url('../img/login_logo.png') no-repeat 0;
}
li.newMamber a {
	display:table-cell;
	width:95px;
	text-align:center;
	vertical-align:middle;
	background-color:#f9c134;
	font-size:17px;
	color:#fff;
}
/*-- END loginpage --*/



/*-- footer --*/
footer {
	padding:30px;
	border-top:2px solid #e1e1e1;
	background:#fff;
}
div.footRemote > a {
	display:inline-block;
	margin-right:5px;
	padding:0 15px;
	height:50px;
	line-height:50px;
	background:#b7b7b7;
	font-size:22px;
	color:#fff;
}
p.footTxt {
	margin-top:20px;
	font-size:18px;
	line-height:30px;
	color:#8d8d8d;
}
/*-- END footer --*/