@charset "utf-8";

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

/* ******************** 공용 ******************** */
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:15px; line-height:1.6; color:#666; font-weight:400;}

/* ******************** 데스크탑 (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;}
	header .head {position:relative; margin:0;}
	header .wrap h1 {margin:0; line-height:1; font-size:0; text-align: center;}
	header .head .wrap {position:relative; max-width:1200px; margin:0 auto; padding:10px;}
	header .wrap .leftSide {position:absolute; left:0;bottom:25px; font-size:12px; line-height:1;}
	header .wrap .leftSide li {display:inline-block; font-size:16px;}
	header .wrap .leftSide li a {display:inline-block; color:#dddddd;}
	header .wrap .leftSide li a:hover span {text-decoration:underline;}
	header .wrap .leftSide li a:hover {color:#0f426d;}
	header .wrap .leftSide li.acitve a {color:#0f426d;}
	header .wrap li.div_line { padding:0 10px;}
	header .wrap li.div_line span {display:block; border-right:1px solid #dddddd; width:1px; height:10px;}
	
	header .wrap .rightSide {position:absolute; right:0; bottom:25px; font-size:12px; line-height:1;}
	header .wrap .rightSide li {display:inline-block; vertical-align:middle;}
	header .wrap .rightSide li a {display:block; padding:0; font-size:12px; font-size:16px;}

	.ico_star {display:block; position:absolute; right:-50px; top:-10px; cursor:pointer;}
	.ico_star:hover {
		-webkit-transform:rotateY(360deg); 
		-ms-transform:rotateY(360deg); 
		-moz-transform:rotateY(360deg); 
		transform:rotateY(360deg); 
		transition-duration:.3s;
		-webkit-transition-duration:.3s;
		-moz-transition-duration:.3s;
		-o-transition-duration:.3s;
	}
	/*gnb*/
	nav.mobile {visibility:hidden}
	nav.pc {z-index:99; visibility:hidden; position:absolute; display:block; width:100%; overflow:hidden; border-top:1px solid #fff; border-bottom:1px solid #fff; }
	nav.pc .wrap {position:relative; display:block; max-width:1200px; margin:0 auto;}
	nav.pc .navbg {position:absolute; left:0; top:0; width:100%; height:100%;}
	nav.pc .navbg .dep1 {height:70px; border-bottom:1px solid #fff; background:#27557b;}
	nav.pc .navbg .dep2 {height:100%; background-color:#24527a;}
	nav.pc .gnb {position:relative; display:block; max-width:1200px;}
	nav.pc .gnb a.on {color:#bd0b4a; text-decoration:underline !important;}
	nav.pc .gnb a:hover,nav .navWrap a:focus {color:#6aeaff !important; text-decoration:underline !important;}
	nav.pc .gnb>ul {margin:0 !important;}
	nav.pc .gnb>ul>li {position:relative; float:left;}
	nav.pc .gnb>ul>li>a {display:block; width:100%; height:70px; padding-top:20px; font-size:16px; color:#fff; padding-left:10px;}
	nav.pc .gnb>ul>li.on>a {color:#6aeaff; text-decoration:underline !important;}
	nav.pc .gnb>ul>li>ul {position:absolute; top:80px; left:0; width:100% !important;}
	nav.pc .gnb>ul>li>ul>li a {display:inline-block; padding:5px 0 5px 10px; color:#fff; line-height:1.3;}
	nav.pc .gnb>ul>li>ul>li a:hover {color:#6aeaff; text-decoration:underline !important;}
	nav.pc .gnb>ul>li>ul>li.on a {color:#6aeaff; text-decoration:underline !important;}

	/*footer*/
	.footer_link {}
	.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;}
	
	/*서브 상단 배경*/
	[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/bgtop_sub.jpg) no-repeat 50%; background-size:cover; margin-top:140px; height:180px; }
	.bgSub1 p {display:table-cell; vertical-align:middle; text-align:center; color:#fff; font-family:"tium"; font-size:30px; text-transform:uppercase; line-height:1.2;
		text-shadow: 0 0 3px #008cff;
		-moz-text-shadow: 0 0 3px #008cff;
		-webkit-text-shadow: 0 0 3px #008cff;
	}

	.location {text-align:center; padding:60px 0;}
	.location div {font-family:"tium"; font-size:30px; color:#000; margin-bottom:20px;}
	.location * {color:#bdbdbd; font-size:12px; vertical-align:middle;}
	.location img {padding:0 10px;}
	
	/* 컨텐츠 */
	.contents_box {}
	.contents_box .contents {padding:0px 40px 60px;}

	/* snb 메뉴 아이콘 */
	.snb_x {
		display: block;
		width: 30px;
		height: 30px;
		cursor: pointer;
		border-radius: 0px;
		margin: 0 auto;
		-webkit-transition: all .3s ease, -webkit-transform .2s ease;
		transition: all .3s ease, transform .2s ease;
		background: -webkit-linear-gradient(top, transparent 0%, transparent 20%, #fff 20%, #fff 23%, transparent 23%, transparent 48%, #fff 48%, #fff 50%, transparent 47%, transparent 76%, #fff 76%, #fff 80%, transparent 80%), -webkit-linear-gradient(transparent, transparent);
		background: linear-gradient(to bottom, transparent 0%, transparent 20%, #fff 20%, #fff 23%, transparent 23%, transparent 48%, #fff 48%, #fff 50%, transparent 47%, transparent 76%, #fff 76%, #fff 80%, transparent 80%), linear-gradient(transparent, transparent);
	}
	.snb_x:active, .snb_x:hover {
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
		transform: scale(0.9);
	}
	.snb_x.clicked {
		background: -webkit-linear-gradient(135deg, transparent 0%, transparent 48%, #fff 49%, #fff 51%, transparent 51%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 48%, #fff 49%, #fff 51%, transparent 51%, transparent 100%);
		background: linear-gradient(-45deg, transparent 0%, transparent 48%, #fff 49%, #fff 51%, transparent 51%, transparent 100%), linear-gradient(45deg, transparent 0%, transparent 48%, #fff 49%, #fff 51%, transparent 51%, transparent 100%);
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	.snb_x.clicked:active, .snb_x.clicked:hover {
		-webkit-transform: scale(0.9) rotate(180deg);
		-ms-transform: scale(0.9) rotate(180deg);
		transform: scale(0.9) rotate(180deg);
	}
	/* //snb 메뉴 아이콘 */
	
	.snbBox,
	.snbBox * {
		transition-duration:.4s;
		-webkit-transition-duration:.4s;
		-moz-transition-duration:.4s;
		-o-transition-duration:.4s;
	}
	.snbBox {position:fixed; top:0; left:0; display:table; z-index:90; height:100%; text-align:center; font-size:20px; font-weight:500;}
	.snbBox .snb {display:none; height:100%; vertical-align: middle; border-right:1px solid rgba(255,255,2555,.2); background:rgba(39,85,123,.95);}
	.snbBox .snb>div {display:table-cell; vertical-align:middle;}
	.snbBox .snb>div>a {color:#6aeaff; padding:20px 5px; display:block; cursor:default; font-size:22px;}
	.snbBox .snb a {color:#fff; width:180px; overflow:hidden; word-break:break-all;}
	.snbBox .snb ul li a {display:block; padding:10px; font-weight:400; font-size:15px; border-top:1px solid rgba(255,255,2555,.2); text-align:left}
	.snbBox .snb ul li:last-child a {border-bottom:1px solid rgba(255,255,2555,.2);}
	.snbBox .snb ul li.on a,
	.snbBox .snb ul li a:hover {background:#2E6A88;}
	.snbBox .snb_btnWrap {width:50px; vertical-align:middle; display:table-cell;}
	.snbBox .snb_btnWrap a {position:relative; top:50%;}
	.snbBox .snb_btnWrap>div {border-radius:50%; background:#27557b; width:60px; height:60px; padding:15px 0; box-shadow:2px 2px 10px rgba(0,0,0,.3) !important; border:1px solid #fff; position:relative; left:-30px;}
	.snbBox.active {border-right:1px solid #fff; box-shadow:2px 2px 10px rgba(0,0,0,.3) !important; z-index:10000;}
	.snbBox.active .snb {display:table;}
	.snbBox.active .snb_btnWrap {background:rgba(39,85,123,.9);}
	.snbBox.active .snb_btnWrap>div {background:none; box-shadow:none !important; border:none; left:0;}
}


/* ************************ 태블릿 이하(~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:20px; font-weight: 700; color:#fff; padding:20px; margin-bottom:20px; line-height:1; background:#27557b;}
	
	/*헤더*/
	header {position:relative;}
	header .head {position:relative; width:100%; height:50px; background-color:#fff;}
	header .head .gnbView {position:absolute; display:block; width:50px; height:50px; 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:50px; left:0; top:0; text-align:center; border-bottom: 2px solid #0f426d}
	header .head h1 a {display:inline-block; height:50px; padding:5px 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;}

	/*gnb*/
	nav.mobile {z-index:9999; position:fixed; visibility:hidden; top:0; width:80%; height:100%; overflow:hidden; background:#fff; box-shadow:5px 0px 10px rgba(0,0,0,.7) !important;}
	nav.mobile .closeWrap {position:relative; height:50px; background-color:#0f426d; color:#fff;}
	nav.mobile .closeWrap .gnbClose {display:block; width:50px; height:50px; background:url(../images/common/icon_gnbclose.png) 50% 50% no-repeat ; background-size:40%;}
	nav.mobile .closeWrap .home {position:absolute; display:block; right:20px; top:15px; color:#fff; font-size:12px;}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.5);}

	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb .home {display:block; width:100%; background-color:#f0f0f0; padding:12px 20px; border-bottom:1px solid #333;}
	nav.mobile .gnb {position:relative; width:100%; height:100%; overflow-y:auto;}
	nav.mobile .gnb>ul>li {clear:both; position:relative;}
	nav.mobile .gnb>ul>li>a {display:block; padding:12px 20px; color:#000; border-bottom:1px solid #ddd; font-size:16px; background:#fff;}
	nav.mobile .gnb>ul>li.on>a {color:#fff; background:#01adeb; border-bottom:1px solid #0f426d;}
	nav.mobile .gnb>ul>li>ul {display:none;}
	nav.mobile .gnb>ul>li>ul>li {position:relative;}
	nav.mobile .gnb>ul>li>ul>li a {display:block; padding:12px 20px 12px 30px; font-size:14px; color:#333; border-bottom:1px solid #eee; background:#f9f9f9;}
	nav.mobile .gnb>ul>li>ul>li a:hover {color:#0f426d; background-color:#f5f5f5;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:#01adeb;}
	
	/* footer */
	.footer_link {}
	.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;}
}