@charset "utf-8";

#wrap { position: relative; min-width: 980px; min-height: 100%; overflow: hidden; }

/* 상단(로고 및 메뉴) */
.area_header {position: relative;z-index: 20;width: 100%;background:#0080a2;max-width: 980px;margin: 0 auto;border-bottom:1px solid #0f5163;}
.area_header header {position: relative;width: 900px;height: 103px;margin: 0 auto;}
.area_header header h1 { position: absolute; left: 0; top: 30px; }
.area_header .top_menu { position: absolute; right: 170px; top: 21px; z-index: 2; }
.top_menu li { float: left; }
.top_menu li a { display: block; font-size: 11px; line-height: 11px; padding: 0 10px; color: #ddd; vertical-align: middle; }
.top_menu a:hover { text-decoration: underline; }
.top_menu li:first-child a { padding-left: 0px; background: none; }
.top_menu li.eng a { color: #fff799; }

/* 검색 - 웹버전 */
.box_search_0 { overflow: hidden; position: absolute; right: 0; top: 15px; width: 159px; height: 23px; background: #fff;z-index: 1;  }
.box_search_0 input { position: absolute; top: 0; left: 0; background: #fff; border: none; font-size: 11px; width: 146px; height: 23px; line-height: 23px; font-family: 'Dotum'; padding: 0 0 0 8px; }
.box_search_0 button { position: absolute; top: 0; right: 0; width: 23px; height: 23px; border: none; background: url("/images/sch/web/jjfirst-h/common/btn_search_w.png") no-repeat 0 0; text-indent: -10000px; }
.box_search_0 input::-webkit-input-placeholder { color:#555; font-family:'Dotum'; font-size:11px; }

/* ie8 미디어쿼리 핵 */
@media \0screen {
	
	.box_search_0 input { line-height: 28px }

}

/* 웹네비게이션 */
#webNavi { position: relative; padding-top: 40px; /* 메뉴위치 탑 */ }
#gnb { position: absolute; right: 0; top: 58px; height: 55px; }
#gnb > li { position: relative; float: left; }
#gnb li a { display: inline-block; font-family: 'NotoM'; letter-spacing: -1px; color: #fff; font-size: 16px; padding: 3px 25px 23px; line-height: 20px; vertical-align: middle; }
#gnb li:last-child a { padding-right: 0;} 
#gnb li a img { position: absolute; top: 0; left: 0;}

/* 세로메뉴 */
#gnb li ul.box { position: absolute; top: 43px; left: 50%; margin-left: -82px; background-color: #fff; width: 140px; padding: 12px 12px; border: 3px solid #266dad; }
#gnb li ul.box li { padding: 0; margin: 0; float: none }
#gnb li ul.box li a { display: block; letter-spacing: 0; font-family: 'Dotum'; font-size: 12px; color: #666; padding: 3px; margin: 0; background: none }
#gnb li ul.box li a:hover, #gnb li ul.box li a:focus { color: #0e73c3; text-decoration: underline }
#gnb li:last-child ul.box { margin-left: -70px; }

/* mobile layout */
#tablet { display: none; width: 100% }
#tabletHeader { position: fixed; width: 100%; height: 67px; top: 0; left: 0; margin: 0 auto; z-index: 20; background-color:#0080a2; }
#tabletLogo { text-align: center; padding: 13px 0 0 }
#tabletGnb #menuOpen { position: fixed; left: 10px; top: 10px; z-index: 101 }
#tabletGnb #menuOpen img { width: 52px; height: auto }

/* mobile 검색영역 */
#tabletSearch #searchOpen { position: fixed; right: 10px; top: 10px; z-index: 21 }
#tabletSearch #searchOpen img { width: 52px; height: auto }
#mSearch { position: absolute; top: -90px; left: 0; width: 100%; height: 90px; z-index: 19; background-color: #647485 }
#mSearch .con p { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; position: relative; width: 90%; margin: 0 auto; padding: 21px 200px 0 0 }
#mSearch .con .inputText { border-color: transparent; width: 100%; background: #fff; border-radius: 3px; height: 39px; line-height: 39px; padding: 0 10px 0 }
#mSearch .con .btnSearch { position: absolute; top: 21px; right: 90px; min-width: 80px; font-size: 15px }
#mSearch .btnSearch, #mSearch a.btnSearch { font-family: "NotoR"; display: inline-block; padding: 14px 15px 13px; background-color: #205e9f; font-size: 16px; color: #fff; border: none; border-radius: 3px }
#mSearch .btnSearchClose { font-size: 0; line-height: 0; text-indent: -9999em; position: absolute; top: 25px; right: 5%; width: 25px; height: 33px; background: url('/images/sch/web/jjfirst-h/common/btn_search_close.png') no-repeat 50% 0 }

/* mobile navi */
#mNavi { position: absolute; left: -250px; top: 0; width: 250px; height: 100%; z-index: 9999; background-color: #354052 }
#mNavi #mtitle { width: 100%; height: 50px; background: #354052; border-bottom: 1px solid #434d5e; }
#mNavi #mtitle a { z-index: 10000; font-size: 0; line-height: 0; text-indent: -9999em; display: inline-block; width: 26px; height: 23px; position: absolute; left: 18px; top: 14px; background: url(/images/sch/web/jjfirst-h/common/btn_close.gif) no-repeat; background-size: 100% auto; }
#mNavi #mgnb .snb { width: 100%; border-bottom: 1px solid #535c6c; padding: 5px 0; }
#mNavi #mgnb .snb, #mNavi #mgnb .snb ul li { background-color: #30394a }
#mNavi #mgnb .snb li { float: left; width: 30%; border-bottom: 0; }
#mNavi #mgnb .snb li a { display: inline-block; font-family: "NotoR"; height: 26px; line-height: 26px; text-align: left; font-size: 12px; color: #fff; vertical-align: middle }
#mNavi #mgnb ul { width: 100%; overflow: hidden }
#mNavi #mgnb ul li { border-bottom: 1px solid #535c6c; background-color: #30394a; position: relative }
#mNavi #mgnb ul li a { display: block; padding: 0 0 0 20px; height: 42px; line-height: 42px; font-size: 16px; font-family: "NotoM"; color: #fff }
#mNavi #mgnb ul li a:hover, #mNavi #mgnb ul li a:focus, #mNavi #mgnb ul li a:active { color: #2eaced }
#mNavi #mgnb ul li ul { display: none; background-color: #202631; padding: 10px 0; }
#mNavi #mgnb ul li ul li { border-bottom: 0; background-color: #202631 }
#mNavi #mgnb ul li ul li a { display: block; padding: 0 0 0 20px; height: 28px; line-height: 28px; font-size: 14px; font-family: "NotoR"; color: #fff }
#mNavi #mgnb ul li ul li a:hover, #mNavi #mgnb ul li ul li a:focus, #mNavi #mgnb ul li ul li a:active { color: #2eaced }
#mNavi #mgnb ul li ul li ul { display: none; background-color: #202631; padding: 4px 0; }
#mNavi #mgnb ul li ul li ul li { border-bottom: 0; background-color: #202631 }
#mNavi #mgnb ul li ul li ul li a { display: block; padding: 0 0 0 30px; height: 22px; line-height: 22px; font-size: 12px; font-family: "NotoR"; color: #ccc }
#mNavi #mgnb ul li ul li ul li a:hover, #mNavi #mgnb ul li ul li ul li a:focus, #mNavi #mgnb ul li ul li ul li a:active { color: #2eaced }
#mNavi #mgnb ul li ul li.row > a:before, #mNavi #mgnb ul li ul li.row > a:after { display: block; position: absolute; background-color: #a7a8aa; content: ''; }
#mNavi #mgnb ul li ul li.row > a:before { width: 9px; height: 1px; right: 18px; top: 14px; }
#mNavi #mgnb ul li ul li.row > a:after { width: 1px; height: 9px; right: 22px; top: 10px; }
#mNavi #mgnb ul li ul li.on > a:after { display: none }

/* footer */
.area_footer {position:relative; z-index:20; padding:0 0 30px; border-top:1px solid #dbd8d3; background:#fff;}
.box_footer {position:relative; width:980px; margin:0 auto;}
.footer_link {font-family:'NotoR'; font-size:14px; margin-top:15px; overflow:hidden;}
.footer_link li {float:left; line-height:40px;}
.footer_link li a {display:block; padding:0 25px 0 0; letter-spacing:-1px; color:#555;}
.footer_link li.point a { color:#4d6098; }
.box_footer .box_info{ font-size:12px; font-family:'돋움',Dotum; color:#eee;}
.box_footer .box_info address{line-height:18px; color:#666; font-style:normal; }
.box_footer .box_info span{ margin-left:10px;}
p.copyright {font-family:'돋움',Dotum; font-size:12px; color:#666; padding:3px 0 0;}
/********** media query mobile *************/
@media screen and (max-width: 800px) {
	
	#wrap { min-width: 320px; overflow: visible; height: 100% }
	.area_header { display: none }
	#wrap,  .area_footer,  .box_footer, .footer_link li { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box }
	#web { display: none; }
	#tablet, .tabletlogo { display: block; }
	.box_mot_1 { background: #fff; overflow: hidden; width: 100% }
	.box_mot_1.on { position: fixed; top: 0 }
	.box_mot_1.on2 { position: relative; top: 92px }

	/* footer */
	.box_footer {width:95%; }
	.footer_link {margin:10px 0; border-bottom:none;}
	.footer_link li { width:33.33%; line-height:30px; border:1px solid #ddd; background:none}
	.footer_link li a {background-color:#fbfbfb; text-align:center}
	.footer_link li:nth-child(4), .footer_link li:nth-child(5) {  border-top:0}
	.footer_link li:nth-child(2), .footer_link li:nth-child(3), .footer_link li:nth-child(5) { border-left:0}
	.box_footer .box_info span{display:block; margin-left:0;}

}

 @media (max-width:560px) {
	 
	/* mobile 검색영역 */
	#mSearch .con p { padding: 21px 150px 0 0 }
	#mSearch .con .btnSearch { right: 50px; min-width: 70px; font-size: 14px }

	/* footer */
	.footer_link li { width:50%}
	.footer_link li:nth-child(3), .footer_link li:nth-child(5){ border-left:1px solid #ddd !important;}
	.footer_link li:nth-child(3){  border-top:0}
	.footer_link li:nth-child(4) { border-left:0 !important}

}

 @media screen and (max-width: 480px) {

	#tabletLogo { text-align: center; padding: 14px 0 0; width: 150px; margin: 0 auto }
	#tabletLogo img { width: 100%; height: auto }
	
	/* footer */
	.footer_link li { width:100%}
	.footer_link li:nth-child(2), .footer_link li:nth-child(4), .footer_link li:nth-child(5){ border-left:1px solid #ddd !important;}
	.footer_link li:nth-child(2){  border-top:0 !important}

}