/* 마진 패딩 초기화 */
* { padding: 0; margin: 0; }
/* 페이지 기본 글꼴과 크기 설정 */
body { font-family: "돋움";   font-size: 14px; }
img { border: 0;}
ul { list-style-type: none; }
/* <a> 태그 기본 설정 */
a { display: inline-block; text-decoration: none; }
a:link { text-decoration:none; color: #222222; }
a:hover { text-decoration:none; color: #222222; }
a:visited { text-decoration:none; color: #222222; }
a:active { text-decoration:none; color: #222222; }

/* For Mobile */ 

#wrap { display: flex; flex-flow: row wrap; width: 100%; margin: 0 auto; }
#wrap section { box-sizing: border-box; }

/*login status*/
.status_info {  order: 2; width: 100%; z-index: 30;  border-bottom: 0.2px solid #999999; }
.snav { display: block; text-align: right;  position: static; }
.info_list { display: none; }
.info_list li { display: inline; width: auto; }
.info_list li a {  padding: 5px 5px; padding: 0.1rem 0.5rem; }
.info_toggle_btn { display: block; width: 30px; height: 30px; position: absolute; top: 35px;  right: 10px; 
    background: url(../img/user_empty.svg) no-repeat; 
    text-indent: -9999px; curser: pointer; }

/*header at very top*/ 
.top { order: 1; display: flex; flex-flow: column; position: relative; width: 100%; }
.logo { order: 3;  width: 12.5%; padding: 5px 20px; line-height: 21px; line-height: 1.313rem; }
.nav { order:4; width: 100%; background: none; }
.menus li { display: inline; background: none; }
.menus li a { width: auto; padding: 0.2rem 0.1rem;  font-size: 0.938em; font-size: 0.9rem; text-indent: 1.10rem }

/*main menu */
.menu_bar { order: 5; width: 1%; background: #cc0045; }
/*main Contents */
.main_content { order: 6; width: 98%; height: auto;  background: white; } /*#f8de73; }*/

/*color on right */
.rightbar { order: 7; width: 1%; background: #00329c; }

/*footer at very bottom*/
.footer { order: 8; width: 100%; background: #999999; }
.footer p { padding: 20px; padding: 1.250rem; font-size: 0.813em; font-size: 0.813rem; text-align: center; color: white; }


/* For PC and tablet */
@media all and (min-width: 960px) {

#wrap { display: flex; flex-flow: row wrap; width: 100%; margin 0 auto; }

/*login status*/
.status_info { order: 0; position: absolute; top: 55px; right:210px; z-index: 30; width: auto; border-bottom: 0; }
.info_list { display: flex;}
.info_list li { width: auto; margin-left: 10px; margin-left: 0.525rem; }
.info_list li a { padding: 0; }
.info_toggle_btn { display: none; }

/*header at very top*/
.top { order:1; justify-content: flex-end; position: relative; width: 100%; background: white; } 
.logo { position: absolute; width: 12.5%; top: 12px; left: 170px; }
.nav { display: flex; align-items: center; position: static; width: 100%;  background: white; min-height: 80px; }
.nav p { padding-left: 5%; float: left; text-align: left; font-size: 0.9rem; margin: 0 auto; }
.menus { display: flex; flex-direction: row; position: static; width: 100%; }
.menus li { display: inline; margin-left: 67.5%; background: none; }
.menus li a { width: auto; padding: 0; text-indent: 0; }
.menu_toggle_btn { display: none; }

/*main menu on left*/
.menu_bar { order: 2; width: 5%; background: #cc0045; }

/*main Contents */
.main_content { order: 3;  max-width: 90%; height: auto; overflow: auto; font-size: 1.1rem;  background: white; }

/*color on right*/
.rightbar { order: 4;  width:5%; background: #00329c; }

/*footer at very bottom */
.footer { order: 5; width:100%; height: 100px; background: #999999; }
.footer p { padding-left: 10%; font-size: 1em; font-size: 1rem;  text-align: left; float: left; }

}