/* ************************ 공용 ************************ */
html,body {font-family:"NotoSansKRLight", sans-serif; font-smoothing: antialiased;}
section {position:relative; display:block; width:100%; max-width:1200px; margin:0 auto;}
.contents {font-weight:normal; color:#666; line-height:1.6; overflow:inherit; /* 모바일 페이징 때문에 hidden에서 inherit으로 변경, 이상있을 경우 다른방법찾기 171013 */}
.contents img {max-width:100%; height:auto;}
.more {display:block; position:absolute; width:25px; height:25px; top:0; right:0; background:url(../images/common/icon_more.png) 100% 0 no-repeat !important;}
.more2 {display:block; position:absolute; width:25px; height:25px; right:0; background:url(../images/common/icon_more2.png) 50% no-repeat !important;}
#gotop {z-index:900; display:none; position:fixed; width:35px; height:35px; border-radius:3px; bottom:20px; right:20px; background:url(../images/common/arrow_up.png) no-repeat 50% #fff !important; box-shadow:0 0 3px rgba(0,0,0,.3) !important;}
input[type=radio], input[type=checkbox] {cursor:pointer; top:2px;}
hr {margin:15px 0 !important;}
.checkbox {text-align:right;}
.new {display:inline-block; margin:0 0 0 5px; padding:2px 4px; color:#ff0000  !important; font-size:12px; border:1px solid #ddd; border-radius:2px;}

/* 공용 */
*[class^="col-"] {padding-left:0 !important; padding-right:0 !important;}
p {margin:0 !important;}
div[class^="main"] {position:relative; width:100%; height:100%;}
h2 {font-size:60px; font-weight:normal; margin:0 !important; font-family:"NotoSansM",sans-serif;}
.innerWrap {position:relative; width:100%; max-width:1200px; height:100%; margin:0 auto; overflow:hidden;}
.contents_box .radius {border-radius: 24px;}

/* ************************ 데스크탑 (992~) ************************ */
@media screen and (min-width: 992px), print {

	html,body {font-family:"NotoSansKRLight", sans-serif; width:100%; position:static; font-size:14px; word-break:break-all;}
	.mobile {display:none !important;}
	h3 {font-size:24px; color:#000; padding-bottom:25px; line-height:1; margin:0; border-bottom:2px solid #0a88e9; font-family:"NotoSansKR", sans-serif;}
	p {font-size:16px;}

	/*헤더*/
	header {z-index:999; position:absolute; width:100%; top:0;}
	header .head {position:relative; margin:0; background-color:#fff;}
	header .head .wrap {display:flex; position:relative; max-width:1200px; margin:0 auto; overflow:hidden; align-items:center; justify-content:space-between;}
	header .head .side .login {font-family:"NotoSansM", sans-serif; color:#000;}
	header .head .side .login:hover img {opacity:0.8;}
	header .head .side img:hover {opacity:0.8;}
	header .head .side .login span {color:#000;}
	header .wrap h1 {margin:0; display:inline-block; float:left;}
	/* header .wrap .side {position:absolute; right:0; bottom:15px; line-height:1;} */
	header .wrap .side {width:411px; line-height:1;}
	header .wrap .side li {float:left;}
	header .wrap .side li:first-child a {padding:0 0 0 0;}
	header .wrap .side li:first-child span {vertical-align:middle; margin-left:2px;}
	header .wrap .side li:nth-child(3) {margin:15px; font-family:"NotoSansM", sans-serif;} 
	header .wrap .side li:nth-child(2) {margin:13px 0px 0 15px}
	header .wrap .side li:nth-child(2) span {color:#ddd;}
	header .wrap .side li a {display:block;}
	header .head .side .home a {font-weight:normal;}
	
	.headerSearch {display:block; width:calc(100% - 631px); text-align:center;}
	.search {position:relative; display:inline-block; width:80%; text-align:left; background:#fff;}
	.search_input {border:1px solid #eee;}	
	.search_input input[type="text"] {width:80%; margin:8px 20px; border:transparent; font-size:14px; color:#000 !important; font-family:"NotoSansM", sans-serif; }	
	.search_button {position:absolute; top:0; right:0; display:inline-block; width:50px; height:100%; background:#0a88e9 !important;}
	.search_button input {background:url(../images/common/searchBtn.png) center no-repeat !important; border:transparent; width:100%; height:100%;}


	/*gnb*/
	nav.mobile {visibility:hidden}
	nav.pc {z-index:99; visibility:hidden; position:absolute; display:block; width:100%; overflow:hidden; border-top:1px solid #eee;}
	nav.pc:hover  { box-shadow:0px 5px 5px rgba(0,0,0,.3) !important;}
	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:59px; background-color:#fff; border-bottom:1px solid #e5e5e5;}
	nav.pc .navbg .dep2 {height:100%; background-color:#fff;}
	nav.pc .gnb {position:relative; display:block; max-width:1200px;}
	nav.pc .gnb a.on {color:#0a88e9;}
	nav.pc .gnb a:hover,nav .navWrap a:focus {color:#0a88e9;}
	nav.pc .gnb>ul {margin:0 !important; display:table; width:100%;}
	nav.pc .gnb>ul>li {position:relative; display:table-cell; width:16.6666%; text-align:center; border-right:1px solid #eee;}
	nav.pc .gnb>ul>li:first-child {border-left:1px solid #e5e5e5;}
	nav.pc .gnb>ul>li>a {display:block; width:100%; height:60px; padding-top:15px; font-size:20px; color:#000; font-family:'NotoSansKR', Sans-serif;}
	nav.pc .gnb>ul>li.on>a {color:#0a88e9;}
	nav.pc .gnb>ul>li>ul { padding:20px 0; left:0; width:100% !important;}
	nav.pc .gnb>ul>li>ul>li {text-align:left; padding-left:20px; word-break:keep-all;}
	nav.pc .gnb>ul>li>ul>li a {display:inline-block; padding:4px 0; color:#333333; font-size:16px; font-family:"NotoSansKRLight", sans-serif;}
	nav.pc .gnb>ul>li>ul>li a:hover {color:#0a88e9;}
	nav.pc .gnb>ul>li>ul>li.on a {color:#0a88e9;}

	nav.pc .linkBox {position:absolute; top:400px; width:100%; background:#348dd3; padding:20px 0;}
	nav.pc .linkBox ul {display:table; color:#fff; font-size:18px; width:100%; max-width:1200px; margin:0 auto; text-align:center;}
	nav.pc .linkBox ul li {display:table-cell;}
	nav.pc .linkBox ul li a {color:#fff; }
	nav.pc .linkBox ul li a:hover {color:#c7fcc8;}
	nav.pc .linkBox ul li a span {display:inline-block; vertical-align:middle;}

	/*footer*/
	.family {position:relative; border-top:1px solid #e5e5e5; background:#fff;}
	.family ul {display:block; max-width:1200px; margin:0 auto; padding-bottom:20px; font-size:0; text-align:center;}
	.family ul li {display:inline-block; position:relative; padding:30px 0 10px; width:20%; text-align:center;}
	.family ul li a:hover {opacity:0.8;}

	footer {position:relative; top:0; max-width:100%; background-color:#fff; color:#666; border-top:1px solid #e5e5e5;}
	footer .wrap {position:relative; max-width:1200px; margin:0 auto; padding:30px 0;}
	footer .wrap>* {padding:0; margin:0;}
	footer address {display:block; }
	footer address .logo {text-align:left; margin:0; padding:0;}
	footer address .logo img {}
	footer address .address p {font-size:14px;  line-height:1.4; margin:0; padding-bottom:5px;}
	footer .familysite {position:absolute; right:0; top:50px;}
	footer .familysite button {padding:10px 12px !important; background:#ebebeb;}
	.fnb {background:#585858 !important;}
	.fnb div {max-width:1200px; margin:0 auto; padding:5px 0; font-size:0;}
	.fnb ul,
	.fnb ul li {display:inline-block; text-align:center;}
	.fnb ul li a {font-size:14px; color:#ccc !important;}
	.fnb ul li a:hover {color:#fff;}
	.fnb ul:first-child {width:80%; font-size:0; margin:0 auto; padding-top:12px;}
	.fnb ul:first-child li {padding-right:30px;}
	.fnb ul:last-child  {width:20%; text-align:right;}
	.fnb ul:last-child li a:hover {opacity:0.8;}
	
	/*22-07-21::footer 안전보건방침 추가*/
	#safetyModal .modal-dialog {width:800px !important;}
	#safetyModal .modal-dialog .modal-body img {width:100%;}

	/*서브 상단 배경*/
	[class*="bgSub"] .slogan {position:relative; max-width:1200px; padding-top:50px; margin:0 auto;}
	[class*="bgSub"] .slogan p {text-align:center; color:#fff !important;}
	[class*="bgSub"] .slogan p:first-child {font-size:3em; line-height:1;}
	[class*="bgSub"] .slogan p:last-child {font-size:1.286em; font-family:"NotoSansKRLight", Sans-serif; padding-top:20px;}
	[class*="bgSub"] {max-width:100% !important; height:350px; margin-top:130px; background-size:cover;}
	.bgSub1 {max-width:100% !important; height:230px; background:url(../images/common/sub_main.jpg) no-repeat 50% !important; background-size:cover;}
	.bgSub2 {max-width:100% !important; height:230px; background:url(../images/common/sub_main2.jpg) no-repeat 50% !important; background-size:cover;}
	.bgSub3 {max-width:100% !important; height:230px; background:url(../images/common/sub_main3.jpg) no-repeat 50% !important; background-size:cover;}
	.bgSub4 {max-width:100% !important; height:230px; background:url(../images/common/sub_main4.jpg) no-repeat 50% !important; background-size:cover;}
	.bgSub5 {max-width:100% !important; height:230px; background:url(../images/common/sub_main5.jpg) no-repeat 50% !important; background-size:cover;}
	.bgSub6 {max-width:100% !important; height:230px; background:url(../images/common/sub_main6.jpg) no-repeat 50% !important; background-size:cover;}
	.bgSub7 {max-width:100% !important; height:230px; background:url(../images/common/sub_main7.jpg) no-repeat 50% !important; background-size:cover;}

	/* 컨텐츠*/
	section.con_wrap {display:table;}
	section.con_wrap>div {display:table-cell; float:none; clear:both; padding:0; vertical-align:top; padding-bottom:50px;}

	/*서브메뉴*/
	.affix {z-index:9999; top:0;}
	.snb {width:20%; max-width:200px; margin:0; padding:0; background-color:#fff; top:-20px; border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5; word-break:keep-all;}
	.snb h2 {display:block; min-height:130px; font-size:24px; margin:0; padding:55px 10px 0 10px; line-height:1; text-align:center; color:#fff !important; background-color:#3d3d3d !important; font-family:"NotoSansKR", sans-serif; outline:#3d3d3d solid 1px;}
	.snb ul {padding:0; margin:0;}
	.snb ul li a {display:block; padding:20px; line-height:1; font-size:18px; border-bottom:1px solid #eee; background-color:#fff; color:#333; font-family:"NotoSansKR", sans-serif;}
	.snb ul li a:hover {color:#fff; background-color:#bbbbbb;}
	.snb ul li.on a {color:#fff !important; background:#bbbbbb !important;}

	/*컨텐츠*/
	.contents_box {width:80%;}
	.contents_box .contents_wrap {overflow:hidden; padding:50px 0 70px 50px;}
	.contents_box .contents_wrap .location {position:absolute; right:0; top:55px; font-size:14px; color:#999; font-family:'NotoSansKRLight', sans-serif;}
	.contents_box .contents_wrap .location span {display:inline-block; padding:5px 15px; background:url(../images/common/arrow_right.png) 50% no-repeat; opacity:0.5;}
	.contents_box .contents_wrap .contents {padding-top:40px;}
}


/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {

	html,body {width:100%; font-family:AppleSDGothicNeo-Light,DroidSans,HelveticaNeue,sans-serif;}
	.pc {display:none !important;}
	h3 {display:block; padding:15px; margin:0 0 15px; color:#fff; font-size:14px; text-align:center; line-height:1; background:#3d3d3d;}

	/*헤더*/
	/* header {position:relative;} */
	header {position:fixed; left:0; top:0; width:100%; z-index:9999; box-shadow:0 0 10px rgba(0,0,0,.2) !important;}
	.headerH {height:50px;}
	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; border-right:1px solid #ddd; 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;}
	header .head h1 a {display:inline-block; height:55px; 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; border-left:1px solid #ddd; background:url(../images/common/icon_login.png) 50% 50% no-repeat; background-size:40%;}
	header .head .side .logout a {display:block; width:50px; height:50px; border-left:1px solid #ddd; background:url(../images/common/icon_logout.png) 50% 50% no-repeat; background-size:40%;}
	header .head .side .login span {display:none;}
	header .head .side .login img {display:none;}
	header .head .side .logout span {display:none;}
	header .head .side .join {display:none;}
	header .head .side .home {display:none;}
	.headerSearch {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:#0a88e9; color:#fff;}
	nav.mobile .closeWrap .gnbClose {display:block; width:50px; height:50px; background:url(../images/common/icon_gnbclose.png) 50% 50% no-repeat #0a88e9; 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);}
	
	/* 
		검색창 때문에 100% 해제함
		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>a:hover {color:#fff;background:#333;}
	nav.mobile .gnb>ul>li.on>a {color:#fff; background:#333; border-bottom:1px solid #000;}
	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:#fff; background-color:#bbb;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:#fff; background:#bbb;}
	
	/* mobile_search */
	nav.mobile .gnb .m_search {display:block; margin:0 auto; text-align:center;}
	nav.mobile .gnb .search {position:relative; display:inline-block; margin:10px 0 0; width:95%; text-align:left; background:#fff;}
	nav.mobile .gnb .search_input {border:1px solid #eee;}	
	nav.mobile .gnb .search_input input[type="text"] {width:80%; margin:8px 10px; border:transparent; font-size:14px; color:#000 !important; font-family:"NotoSansM", sans-serif; }	
	nav.mobile .gnb .search_button {position:absolute; top:0; right:0; display:inline-block; width:50px; height:100%; background:#0a88e9;}
	nav.mobile .gnb .search_button input {background:url(../images/common/searchBtn.png) center no-repeat; border:transparent; width:100%; height:100%;}
	
	
	/*footer*/
	.family {position:relative; top:0; margin-top:50px; border-top:1px solid #e5e5e5; background:#fff;}
	.family ul {display:block; max-width:1200px; margin:0 auto; font-size:0;}
	.family ul li {display:inline-block; position:relative; padding:30px 0 10px; width:20%; text-align:center;}
	.family ul li a:hover {opacity:0.8;}

	footer {position:relative; top:0; max-width:100%; background-color:#fff; color:#666; border-top:1px solid #e5e5e5;}
	footer .wrap {position:relative; max-width:1200px; margin:0 auto; padding:30px 20px;}
	footer .wrap>* {padding:0; margin:0;}
	footer address {display:block; }
	footer address .logo {text-align:left; margin:0; padding:0;}
	footer address .logo img {}
	footer address .address p {font-size:14px;  line-height:1.4; margin:0; padding-bottom:5px;}
	footer .familysite {position:static; right:0; top:50px;}
	footer .familysite button {padding:10px 12px !important; background:#ebebeb;}
	.fnb {background:#585858;}
	.fnb div {max-width:1200px; margin:0 auto; padding:5px 0; font-size:0;}
	.fnb ul,
	.fnb ul li {display:inline-block;}
	.fnb ul li a {font-size:14px; color:#ccc;}
	.fnb ul li a:hover {color:#fff;}
	.fnb ul:first-child {width:100%; font-size:0; margin:0 auto; padding-top:12px; text-align:center;}
	.fnb ul:first-child li {padding-right:30px;}
	.fnb ul:last-child  {width:100%; text-align:center; padding:20px 0;}
	.fnb ul:last-child li a:hover {opacity:0.8;}
	
	/*22-07-21::footer 안전보건방침 추가*/
	#safetyModal .modal-dialog {width:700px !important;}
	#safetyModal .modal-dialog .modal-body img {width:100%;}
	
	/*컨텐츠*/
	.contents_box .contents_wrap.employment .contents {padding:0 15px 25px;}
	.contents_box .contents_wrap .contents
	footer .familysite {position:relative; top:0; margin-top:10px;}
	.contents {padding:40px 20px;}
}
@media screen and (max-width: 768px) {
	h3 {background:#bbb;}
	footer .wrap {padding:5px 20px 20px 20px;}
	footer address .logo {text-align:center;}
	footer address .address span {visibility:hidden; display:block; line-height:0.2;}
	footer address .address p {font-size:12px; text-align:center;}
	.fnb ul, .fnb ul li {padding-top:5px; padding-right:0 !important; display:block;}
	.fnb ul, .fnb ul:last-child li {display:inline-block;}
	.fnb ul, .fnb ul li a {font-size:12px; }
	.fnb ul:first-child {padding-top:0;}
	.fnb ul:last-child {padding:5px 0;}
	
	/*22-07-21::footer 안전보건방침 추가*/
	#safetyModal .modal-dialog {width:360px !important;}

}