@charset "utf-8";

/* 레이아웃 */
html { font-size: 20px; }
#nav { width: 100%; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
#footer, #footer_wrap { background: #eaeaea; }

/* 가운데 영역 */
.container, .container_wrap { position: relative; width: 1280px; margin: 0 auto; }

/* 로우 영역 */
.row, .row_wrap { padding: 0 40px; }

/* 헤더 영역 */
.join { overflow: hidden; height: 20px; }
.join_left { float: left; }
.join_left ul { position: relative; overflow: hidden; }
.join_left li { float: left; line-height: 21px; }
.join_left li:first-child { margin-right: 20px; }
.join_left li:first-child:after { position: absolute; /*left: 63px; top: 7px;*/ left: 75px; top: 5px; content: ''; width: 1px; height: 12px; background: #222; visibility: hidden; }

.join_right { float: right; }
.join_right ul { position: relative; overflow: hidden; }
.join_right li { float: left; line-height: 24px; }
.join_right li:first-child { margin-right: 20px; }
.join_right li:first-child:after { position: absolute; left: 89px; top: 7px; content: ''; width: 1px; height: 12px; background: #222; }

.top_menu_right, .top_menu_right_login { display: none; }

.head { overflow: hidden; height: 93px; }
.head .w90p { width: 90px; height: 90px; }
.head .excitss { padding-top: 13px; width: 120px; }
.head_left { float: left; }
.head_center { float: left; box-sizing: border-box; width: calc(100% - 120px - 264px); padding-left: calc((100% - 120px - 264px - 0px - 186px) / 2); }
.head_title { position: relative; height: 90px; }
.head_center img { position: absolute; top: 3px; }
.head_center h1 { position: absolute; left: 80px; top: 15px; width: 186px; font-size: 1.6rem; text-align: center; }
.head_center h1 em { font-weight: bold; }
.head_right { position: relative; float: right; width: 262px; margin-top: 10px; }
.head_right i { font-size: 24px; padding: 2px 0 0 5px; color: #777; }
/*.head_right input { width: 140px; text-indent: 6px; border: 0; margin-top: -11px; }*/
.head_right input { width: 139px; height: 27px; text-indent: 6px; border: 0; margin: -57px 0 0 33px; }
.head_right a { display: block; text-align: center; width: 70px; height: 70px; line-height: 70px; background: #fafafa; border: 1px solid #e9e9e9; border-radius: 5px; }
.head_right .bt_login { display: block; text-align: center; width: 70px; height: 70px; line-height: 70px; background: #fafafa; border: 1px solid #e9e9e9; border-radius: 5px; color: #222; cursor: pointer; }
.head_right .bt_login:hover { color: #2698cb; }
.head_right .userid { position: absolute; right: 75px; top: 3px; border: 1px solid #e9e9e9; border-radius: 5px; width: 174px; height: 32px; box-sizing: border-box; }
.head_right .password { position: absolute; right: 75px; top: 35px; margin-top: 3px; border: 1px solid #e9e9e9; border-radius: 5px; width: 174px; height: 32px; box-sizing: border-box; }
.head_right .button { position: absolute; right: 0; top: 0; }
.head_right .menu_ham { display: none; }

.div_user_infor { position: relative; }
.div_user_infor .user_infor { position: absolute; right: 0; top: -66px; }
.div_user_infor .user_infor i { font-size: 24px; padding: 2px 0 0 5px; vertical-align: -4px; color: royalblue; }
.div_user_infor .user_infor strong { font-size: 17px; color: royalblue; }
.div_user_infor .user_infor.user_admin i { color: #4caf50; }
.div_user_infor .user_infor.user_admin strong { color: #4caf50; }
.div_user_infor .user_infor em { font-size: 17px; }
.div_user_infor .menu_admin { position: absolute; right: 0; top: -32px; }
.div_user_infor .menu_admin span { font-size: 17px; font-weight: bold; color: royalblue; }

#nav .container, #nav .container_wrap { z-index: 999; }
.navi { height: 50px; }
.navi_chassis > ul > li { position: relative; float: left; width: 16.666%; line-height: 50px; text-align: center; font-size: 0.900rem; font-weight: 400; background: #fafafa; border-left: 1px solid #ddd; box-sizing: border-box; }
.navi_chassis > ul > li.admin { width: 20%; }
.navi_chassis > ul > li:last-child { border-right: 1px solid #ddd; }
.navi_chassis > ul > li a { display: block; }
.navi_chassis > ul > li > ul { display: none; position: absolute; left: -1px; top: 50px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; width: calc(100%); background: #fff; }
.navi_chassis > ul > li > ul.active { display: block; }
.navi_chassis > ul > li > ul > li { border-bottom: 1px solid #ddd; }

/* 미디어쿼리 */
@media (max-width: 1280px) {
	.container, .container_wrap { width: 100%; }
}