/* MOBILE - 뷰포트 CSS */

#viewport {position:relative; width:100%;}
#viewport #header {position:fixed; left:0; top:0; width:100%; transition:all 300ms ease;}
#viewport #container {position:relative; z-index:100; padding:60px 0 0;}
#viewport #main_view,
#viewport #sub_view {position:relative;left:0;top:0;transition:all 300ms ease}
#viewport.app_view #container {padding-top:0}

.user_wrap {}
.user_wrap .name {display:block; float:none; background:#0099cc; border-bottom:1px solid rgba(0, 0, 0, 0.1); box-sizing:border-box; padding:8px 0;}
.user_wrap .name p {position:relative; color:#fff; font-weight:600; font-size:15px; line-height:30px; letter-spacing:1px; padding:0 20px; margin:0;}
.user_wrap .name p:before {content:'\f007'; font-size:15px; font-family:'FontAwesome'; margin-right:8px; color:#fff;}

.user_wrap ul {margin:0; padding:0;}
.user_wrap ul li {width:50%; float:left; text-align:center; line-height:38px;}
.user_wrap ul li a {color:#fff; font-size:14px; font-weight:500;}
.user_wrap ul li a:before {font-size:15px; font-family:'FontAwesome'; margin-right:5px; color:#fff;}
.user_wrap ul li a:hover {text-decoration:none;}
.user_wrap ul li.modify {background:#ef511a;}
.user_wrap ul li.logout {background:#212121;}
.user_wrap ul li.modify a:before {content:'\f013'; }
.user_wrap ul li.logout a:before {content:'\f023'; }

.side_menu ul {margin:0; padding:0; list-style:none}
.side_menu [role=toggle] > a:before {content:''; position:absolute; top:50%; right:12px; width:0; height:0; margin-top:-2px; border:6px solid transparent; border-top-color:#666;}
.side_menu [role=toggle].active > a:before {margin-top:-8px; border-top-color:transparent; border-bottom-color:#666;}
.side_menu .dep1 > li > a {
	display:block; position:relative; height:43px; line-height:43px; padding:0 35px 0 15px; box-sizing:border-box;
	border-bottom:1px solid #e6e6e6; background:#fafafa; font-size:15px; font-weight:500; color:#444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.side_menu .dep1 > li.on > a {color:#121212; background:#f1f1f1; }

.side_menu .dep2 {display:none}
.side_menu .dep2 > li > a {
	display:block; position:relative; height:40px; line-height:40px; padding:0 15px 0 24px; border-bottom:1px solid #e6e6e6; background:#fff;
	font-size:14px; font-weight:bold; color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.side_menu .active .dep2 {display:block}

.admin_menu {}
.admin_menu ul {margin:0; padding:0; list-style:none}
.admin_menu ul > li > a {
	display:block; position:relative; height:40px; line-height:40px; padding:0 35px 0 15px; box-sizing:border-box;
	border-bottom:1px solid rgba(0, 0, 0, 0.1); background:#3ea1bb; font-size:14px; font-weight:500; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.admin_menu ul > li.on > a {background:#2a88a1; }




.side_search {border-bottom:1px solid #e6e6e6;background:#fafafa}
.side_search fieldset {position:relative;margin:0;padding:8px;border:none}
.side_search legend {display:none}
.side_search span {display:block;padding:4px 8px;border:1px solid #ccc;background:#fff}
.side_search span input {width:100%;margin:0;padding:4px 0;border:none;background:transparent;color:#666}
.side_search button {position:absolute;border:none;padding:0;top:10px;right:10px;bottom:10px;margin:auto;padding:5px;background:transparent;font-size:0}
.side_search button:before {content:'\e901';font-family:'icomoon';font-size:24px;color:#666}

.side_wrap {padding:0;}
.side_title {display:block; margin:0 0 15px; padding:20px 13px; background:#dc3d3d;}
.side_title h1 {font-size:17px; font-weight:600; margin:0 0 7px; padding:0; color:#fff;}
.side_title p {font-size:14px; line-height:1.3em; padding:0; margin:0; color:rgba(255, 255, 255, 0.9); letter-spacing:-0.03em;}
.side_title p span {display:inline-block;}

.side_contact {padding:0 13px;}
.side_contact p {position:relative; display:block; line-height:1.3em; margin:0; padding:10px 0 0; font-size:14px; color:#666; padding-left:23px; word-break:keep-all;}
.side_contact p strong {display:block; font-size:16px; font-weight:600; color:#000;}
.side_contact p.mobile_hide {display:none;}
.side_contact a {color:#000;}

.side_contact p:before {content: ''; font-family:"FontAwesome"; color: #000; opacity: .8; position:absolute; left:0;}
.side_contact p.fa {display:block; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

.side_contact p.fa-home:before {content:"\f015"}
.side_contact p.fa-phone:before {content:"\f095"}
.side_contact p.fa-kakao:before {content: "\f075";}
.side_contact p.fa-exclamation:before {content: "\f061";}
.side_contact p.fa-check:before {content: "\f046";}


#viewport .viewport_side {visibility:hidden; overflow-y:auto; position:fixed; top:0; width:220px; height:100%; padding:60px 0 0;box-sizing:border-box;background:#ffffff;z-index:1190;transition:all 300ms ease}
#viewport #left_side {left:-220px}
#viewport #right_side {right:-220px}

#viewport #close_side {visibility:hidden;position:absolute;top:0;left:0;bottom:0;left:0;z-index:1180;width:100%;height:100%;box-sizing:border-box;border:none;text-align:left;text-indent:-9999px;background:rgba(0,0,0,0.6);opacity:0;transition:visibility 0s 0.3s, opacity 0s 0.3s}
#viewport.on.toggle_left #left_side {visibility:visible;left:0}
#viewport.on.toggle_right #right_side {visibility:visible;right:0}
#viewport.on #close_side {visibility:visible;opacity:1;transition:visibiliy 0s 0s, opacity 0s 0s}

.quick_wrap {display:none!important;}