@charset "utf-8";

/* background fixed 사용시 버그 대응용 * 한 번 스크롤로 페이지 전체 넘김을 할 때는 html스타일에서 height속성 제거하기 */
/* html {overflow: hidden; height: 100%;} */
/* body {overflow: auto; height: 100%;} */

/* 메뉴 아이콘 */
.menu {
  width: 3em;
  height: 3em;
  position: relative;
  z-index: 0;
  margin: 15% auto;
  cursor:pointer;
}
.menu .bit-1::before {
  content: '';
  left: 0.5em;
  top: 0.5em;
  position: absolute;
  width: 1em;
  transform-origin: left bottom;
  height: 0.3em;
  background: #fff;
  transition: transform 0.3s, top 0.3s;
}
.menu .bit-1::after {
  content: '';
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 1em;
  transform-origin: right bottom;
  height: 0.3em;
  background: #fff;
  transition: transform 0.3s, top 0.3s;
}
.menu .bit-2 {
  position: absolute;
  width: 2em;
  top: 50%;
  left: 50%;
  height: 0.3em;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.3s 0.3s, width 0.3s 0.6s;
}
.menu .bit-3::before {
  content: '';
  position: absolute;
  bottom: 0.5em;
  left: 0.5em;
  width: 1em;
  transform-origin: left top;
  height: 0.35em;
  background: #fff;
  transition: transform 0.3s, bottom 0.3s;
}
.menu .bit-3::after {
  content: '';
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  width: 1em;
  transform-origin: right top;
  height: 0.35em;
  background: #fff;
  transition: transform 0.3s, bottom 0.3s;
}
.menu.open .bit-1:before {
  top: 0.4em;
  width: 1.2em;
  transform: rotate(45deg);
  transform-origin: left bottom;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, top 0.3s 0.3s;
}
.menu.open .bit-1:after {
  top: 0.4em;
  width: 1.2em;
  transform: rotate(-45deg);
  transform-origin: right bottom;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, top 0.3s 0.3s;
}
.menu.open .bit-2 {
  width: 0.3em;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.3s 0.3s, width 0.3s;
}
.menu.open .bit-3:before {
  bottom: 0.4em;
  width: 1.2em;
  transform: rotate(-45deg);
  transform-origin: left top;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, bottom 0.3s 0.3s;
}
.menu.open .bit-3:after {
  bottom: 0.4em;
  width: 1.2em;
  transform: rotate(45deg);
  transform-origin: right top;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, bottom 0.3s 0.3s;
}
/* // 메뉴 아이콘 */

/* header active */
header.active {border-bottom:1px solid #ddd;}
header.active .head {background:#fff; opacity:1; color:#000;}
header.active nav {display:block;}
header.active .rightSide > a {color:#000}

header.active .menu .bit-1::before {
  background: #000;
}
header.active .menu .bit-1::after {
  background: #000;
}
header.active .menu .bit-2 {
  background: #000;
}
header.active .menu .bit-3::before {
  background: #000;
}
header.active .menu .bit-3::after {
  background: #000;
}

/* ******************** 공용 ******************** */
a:link {color:#666;}
a:visited {color:#666;}
a:hover {color:#000;}
a:active {color:#000;}
#gotop {z-index:900; opacity:0; position:fixed; width:35px; height:35px; border-radius:3px; bottom:40px; right:20px; background:url(../images/common/arrow_up.png) no-repeat 50% #fff; box-shadow:0 0 3px rgba(0,0,0,.3) !important;}
body {font-family:'NotoSansKR' !important; font-size:0; line-height:1.6; color:#666; font-weight:400; overflow-x:hidden;}
body * {font-size:15px;}
body.sub_bg {background:url(../images/common/sub_bg2.jpg) 50% no-repeat; background-size:cover;}

.menuBox {position:relative; width:50px; height:50px;}

/* ******************** 데스크탑 (992~) ******************** */
@media (min-width: 992px){
	
	.mobile {display:none !important;}
	.con_title {margin-top:0px; margin-bottom: 50px; }
	.con_title > h3 { height:35px; line-height:35px;  font-size:40px;  font-weight: 700 !important; font-family: "Open Sans","NanumGothic", Arial, sans-serif; color:#333; text-transform: uppercase; text-align: center; margin-top:0px; margin-bottom: 20px;}
	.con_title > div {text-align: center; font-size: 11px; color:#999;}
	.contents > img {text-align: center; }

	/*헤더*/
	header {z-index:999; position:absolute; width:100%; top:0; height:80px; border-bottom:1px solid #ddd;}
	header .head {position:relative; margin:0;  background:#000; opacity:.9; border-bottom:1px solid #fff;}
	header .wrap h1 {margin:0; line-height:1; font-size:0;}
	header .head .wrap {position:relative; max-width:1200px; margin:0 auto;}

	.rightSide {position:absolute; right:0; top:10px;}
	.rightSide > * {display:inline-block; vertical-align:middle;}
	.rightSide > a {margin-right:20px; margin-top:10px; color:#fff; font-size:20px;}
	.rightSide > a:hover {color:;}
	
	/*gnb*/
	nav.mobile {visibility:hidden}
	nav { display:none; position:fixed; top:80px; left:0; width:100%; height:100%; background:#fff; overflow:auto;}
	nav .wrap {border-top:1px solid #ddd;}
	nav .gnb {max-width:1200px; margin:0 auto;}
	nav .gnb>ul {font-size:0;}
	nav .gnb>ul>li {display:inline-block; width:25%; min-height:400px; vertical-align:top;padding:50px 25px; border-right:1px solid #ddd; color:#666; text-align:center;}
	nav .gnb>ul>li:nth-child(4) {border-right:0;}
	nav .gnb>ul>li:nth-child(8) {border-right:0;}
	nav .gnb>ul>li>a {display:block; font-size:24px; color:#000; font-family:"NanumSquare"; font-weight:bold; text-align:center; border-bottom:5px solid #ddd; padding-bottom:10px;}
	nav .gnb>ul>li.on>a {color:#0040b5; border-bottom:5px solid #0040b5;}
	nav .gnb>ul>li>ul {padding-top:10px;}
	nav .gnb>ul>li ul li a {font-size:20px;}
	nav .gnb>ul>li ul li.on>a {color:#0040b5; text-decoration:underline !important;}
	nav .gnb>ul>li ul li a:hover {color:#0051df; text-decoration:underline !important;}
	
	.snbBox {max-width:1200px; margin:0 auto; position:relative;}
	.snbBox .snb {position:absolute; top:-60px; }
	.snbBox .snb >div > a {display:none;}
	.snbBox .snb ul {font-size:0;}
	.snbBox .snb ul li {display:inline-block; text-align:center;
		white-space: nowrap;
		overflow: hidden;
		 text-overflow: ellipsis; 
	}
	.snbBox .snb ul li.on a {color:#fff; background:#004bd0;}
	.snbBox .snb ul li a {display:block; font-size:18px; padding:16px 0; background:#a5a5a5; border-right:1px solid #ddd;}
	.snbBox .snb ul li:last-child a {border-right:0;}
	
	
	/*footer*/
	.footer_link {clear:both}
	.footer_link ul {text-align:center; padding:15px; background:#747474;}
	.footer_link li {display:inline-block;}
	.footer_link li a {color:#eee; padding:0 20px; font-size:13px;}
	.footer_link li a:hover {color:#fff}
	
	footer {max-width:1000px; margin:40px auto; font-size:0; padding:0 0 40px;}
	footer strong {color:#333}
	footer>* {display:inline-block;vertical-align:top;}
	.footer_logo {}
	.footer_logo a {display:block;}
	address {font-size:14px; padding-left:30px;}
	
	/*서브 상단 배경*/
	[class*="bgSub"] .slogan {position:relative; max-width:1200px; padding-top:220px; margin:0 auto;}
	[class*="bgSub"] .slogan p {text-align:center;}
	[class*="bgSub"] .slogan p:first-child {font-size:24px;color:#fff; font-weight: 700 !important; font-family: "Open Sans", Arial, sans-serif; text-transform: uppercase; }
	[class*="bgSub"] .slogan p:last-child {color:#fff;}
	[class*="bgSub"] {max-width:100% !important; height:350px; background-size:cover;}
	.bgSub1 {display:table; width:100%; max-width:100% !important; background:url(../images/common/sub_bg.jpg) no-repeat 50%; background-size:cover; margin-top:80px; height:300px; }

	.location {text-align:center; padding:75px 0;}
	.location div {font-size:30px; color:#fff; margin-bottom:20px; text-transform:uppercase;}
	.location * {color:#fff; font-size:12px; vertical-align:middle;}
	.location img {padding:0 10px;}
	
	/* 컨텐츠 */
	.contents_box {background:#fff}
	.contents_box .contents {padding:40px 40px 60px;}
}

/* ************************ 태블릿 이하(~991) ************************ */
@media (max-width: 991px) {
	
	html,body {width:100%; font-family:AppleSDGothicNeo-Light,DroidSans,HelveticaNeue,sans-serif;}
	.pc {display:none !important;}
	.con_title > h3 {display:block; margin:0 -15px;text-align:center; font-size:20px; font-weight: 700; color:#fff; padding:20px; margin-bottom:20px; line-height:1; background:#50c3af;}
	.contents >div {padding:0 10px;}
	.contents > h3.mobile {display:block; margin:0;text-align:center; font-size:16px; font-weight: 700; color:#fff; padding:20px; margin-bottom:20px; line-height:1; background:#004bd0;}
	
	/*헤더*/
	header {position:relative;}
	header .head {position:relative; width:100%; height:60px; background-color:#333;}
	header .head .gnbView {position:absolute; display:block; width:50px; height:60px; left:0; top:0; background:url(../images/common/icon_allmenu.png) 50% 50% no-repeat; background-size:35%; border-radius:0;}
	header .head h1 {margin:0 !important; position:absolute; display:block; width:100%; height:60px; left:0; top:0; border-bottom: 1px solid #ddd}
	header .head h1 a {display:inline-block; height:60px; padding:0; text-align:center;}
	header .head h1 a img {display:block; height:100%;}
	header .head .side {position:absolute; top:0; right:0; height:100%;}
	header .head .side .login a {display:block; width:50px; height:50px; background:url(../images/common/icon_login.png) 50% 50% no-repeat; background-size:40%; border-left:1px solid #ddd;}
	header .head .side .logout a {display:block; width:50px; height:50px; background:url(../images/common/icon_logout.png) 50% 50% no-repeat; background-size:40%; border-left:1px solid #ddd;}
	header .head .side .login span {display:none;}
	header .head .side .logout span {display:none;}
	header .head .side .join {display:none;}
	header .head .side .home {display:none;}
	nav .gnb>ul>li>a.on {color:#004edd; border-bottom:5px solid #004edd}
	nav .gnb>ul>li>a.on ~ ul {display:block;}

	.menuBox {position:absolute; top:-4px; right:10px;}
	.menu {margin:23% auto;}
	nav .gnb {max-width:1200px; margin:0 auto;}
	nav .gnb>ul {font-size:0;}
	nav .gnb>ul>li {display:inline-block; width:50%; vertical-align:top; padding:20px 25px; color:#666; text-align:center; min-height:200px;}
	nav .gnb>ul>li:nth-child(even) {border-right:0;}
	nav .gnb>ul>li>a {display:block; font-size:17px; color:#000; font-family:"NanumSquare"; font-weight:bold; text-align:center; border-bottom:5px solid #ddd; padding-bottom:10px;}
	nav .gnb>ul>li>ul {padding-top:10px;}
	nav .gnb>ul>li ul li a {font-size:15px;}
	nav .gnb>ul>li ul li a:hover {color:#0051df; text-decoration:underline !important;}
	
	header nav {display:none;}
	
	.rightSide a {display:inline-block; color:#fff; position:absolute; top:18px; right:90px}
	
	.gnb>ul>li>ul {display:none;}
	nav .gnb>ul>li {min-height:auto;}
	
	.snbBox {max-width:1200px; margin:0 auto; position:relative;}
	.snbBox .snb {position:absolute; top:-60px; }
	.snbBox .snb >div > a {display:none;}
	.snbBox .snb ul {font-size:0;}
	.snbBox .snb ul li {display:inline-block; text-align:center;
		white-space: nowrap;
		overflow: hidden;
		 text-overflow: ellipsis; 
	}
	.snbBox .snb ul li.on a {color:#fff; background:#004bd0;}
	.snbBox .snb ul li a {display:block; font-size:18px; padding:16px 0; background:#a5a5a5; border-right:1px solid #ddd;}
	.snbBox .snb ul li:last-child a {border-right:0;}
	
	/* footer */
	.footer_link { clear:both;}
	.footer_link ul {text-align:center; padding:25px; background:#747474;}
	.footer_link li {display:inline-block;}
	.footer_link li a {color:#eee; padding:0 20px;}
	.footer_link li a:hover {color:#fff}
	
	footer {max-width:1200px; margin:40px auto; font-size:0;}
	footer strong {color:#333}
	footer>* {display:inline-block;vertical-align:top;}
	.footer_logo {}
	.footer_logo a {display:block;}
	address {font-size:14px; padding-left:30px;}

	/* 컨텐츠 */
	.contents {padding-top:0 !important;padding-bottom:50px !important;}
		
	.mobile_language {position:absolute; top:12px; left:80px;}
	.mobile_language li {display:inline-block; font-size:12px;}
	.mobile_language li.div_line {display:inline-block; border-right:1px solid #ddd; height:10px; margin:0 5px;}
	.mobile_language li a {color:#ddd;}
	.mobile_language li.active a {color:#01adeb;}
}

/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	.footer_link ul {padding:15px;}
	.footer_link li a {padding:0 5px; font-size:12px;}
	footer {margin:10px auto; text-align:center; font-size:12px}
	address {padding:10px 20px; font-size:12px;}
	address * {font-size:12px;}
}

@media screen and (max-width: 1300px){
	/* 즐겨찾기 */
	.ico_star {display:none;}
}