/* 
    common.css 20151201
    License: PHPSCHOOL.COM
	Author: 설사댄스
*/

@import url('//fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('//fonts.googleapis.com/css?family=Open+Sans:400,700');

html, body, pre,
h1, h2, h3, h4, h5, h6,
dl, dt, dd, ul, li, ol,
th, td, p, blockquote,
form, fieldset, legend,
menu, nav, section, hgroup, article, header, aside, footer,
input, select, textarea, button, a {
	font-family: 'Open Sans', Nanum Gothic, Dotum, AppleGothic, Helvetica, sans-serif;
}

html, body {
    width: 100%;
}
/* 공통사용 CSS */
.purple { color: #512772; }
.clear { clear: both; }
#mask { display: none;background-color: #000000; width: 100%; height: 100%; position: fixed; opacity: 0.8; z-index: 100;}

/* 상단 CSS */
#header {
    width: 100%;
    border-top: 4px solid #512772;
    height: 106px;
}
#header .headArea {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}
#header .headArea .logo {
    left: 20px;
    top: 25px;
    position: absolute;
}
#header .headArea .logo img {
}
#header .headArea .mb-menu { display: none; }

menu {
    position: absolute;
    top: 25px;
    right: 20px;
}
menu .menuList {
    margin-right: 61px;
}
menu .menuList li {
    display: inline-block;
    padding: 0px 14px;
} 
menu .menuList li.mobile {display:none;}
menu .menuList li a {
    color: #777777;
    font-size: 14px;
}

menu .support {
padding-top: 25px;font-size: 18px;font-weight: 700;text-align: right;}
menu .support a {
    font-size: 18px;
    color: #0d0d0d;
}
menu .language {
    position: absolute;
    right: 0;
    top: 0;
}
menu .language li {
    display: inline-block;
}
menu .language li img {}

#footer {
    margin-top: 60px;
    background-color: #333437;
    height: 215px;
}
#footer .footerArea {
    max-width: 1400px;
    position: relative;
    padding: 148px 20px 0;
    margin: 0 auto;
}
#footer .footerArea .logo {
    position: absolute;
    top: 45px;
    left: 20px;
}
#footer .footerArea .logo img {}
#footer .footerArea .footerInfo {
    position: absolute;
    top: 40px;
    right: 20px;
    line-height: 24px;
}
#footer .footerArea .footerInfo a {
    font-size: 14px;
    color: #aaaaaa;
}
#footer .footerArea .footerMenu {
    border-top: 1px solid #474747;
}
#footer .footerArea .footerMenu .copyright {
    color: #ffffff;
    font-size: 14px;
    padding-top: 25px;
    float: left;
}
#footer .footerArea .footerMenu ul {
    float: right;
    padding-top: 23px;
}
#footer .footerArea .footerMenu ul li {
    float: left;
    padding-left: 15px;
}
#footer .footerArea .footerMenu ul li a {
    color: #ffffff;
    font-size: 14px;
}

/* 모바일 */
@media only screen and (max-width: 599px) {
    #header { width: 100%; border-top: 4px solid #512772; height: 70px; }
    #header .headArea .logo { left: 15px; top: 15px; position: absolute; }
    #header .headArea .logo img { width: 150px; }
    
    #header .headArea .mb-menu { display: block;position: absolute;right: 15px;top: 15px;font-size: 34px;}
    menu { position: fixed; right: -80%; top: 0; width: 80%; height: 100%; background-color: #ffffff; z-index: 101;}
    menu .menuList { margin-right: 0; }
    menu .menuList li { display: block; border-bottom: 1px solid #eeeeee; padding: 0; } 
	menu .menuList li.mobile {display:block;}
    menu .menuList li a { color: #777777; font-size: 14px; display: block; padding: 15px; }

    menu .support { padding-top: 95px; font-size: 18px; font-weight: 700; text-align: center; line-height: 25px; }
    menu .support a { display: block;color: #0d0d0d; }
    menu .language { position: absolute; left: 50%; margin-left: -23px; top: 310px; }
    menu .language li { display: inline-block; }
    menu .language li img {}

	#footer {
		margin-top: 0px;
	}
	#footer .footerArea {
		padding: 105px 10px 0;
	}
	#footer .footerArea .logo {
		top: 35px;
		left: 10px;
	}
	#footer .footerArea .logo img {
		width: 150px;
	}
	#footer .footerArea .footerInfo {
		top: 15px;
		right: 10px;
	}
	#footer .footerArea .footerMenu {
		position: relative;
		height: 100px;
	}
	#footer .footerArea .footerMenu .copyright {
		position: absolute;
		width: 100%;
		bottom: 10px;
		text-align: center;
		font-size: 12px;
	}
	#footer .footerArea .footerMenu ul {
		position: absolute;
		width: 100%;
		padding-top: 0;
		top: 15px;
	}
	#footer .footerArea .footerMenu ul li {
		width: 25%;
		padding: 0;
	}
	#footer .footerArea .footerMenu ul li a {
		display: block;
		height: 35px;
		font-size: 14px;
		text-align: center;
		line-height: 35px;
	}
}

/* 안드로이드패드 */
@media (max-width: 767px) and (min-width: 600px) {
	#footer {
    margin-top: 20px;
	}
}

/* 아이패드 */
@media (max-width: 1023px) and (min-width: 768px) {
	#footer {
    margin-top: 20px;
	}
}

/* 상단메뉴 처리 */
@media only screen and (min-width: 1400px) {
    menu {right: 50%;margin-right: -680px;}
}

/* Common Class */
.bold {font-weight:bold !important;}
.nobold {font-weight:normal !important;}