/*---------------------------
    total
----------------------------*/
html,
body { margin-top: 0; width: 100%; }
body { text-align: center; font-family: none; background-color: #fff; }
#mw5 { width: 100%; height: 100%; /*width:1050px;*/
margin: 0 auto 0 auto; text-align: left; }
#mw5 .wrapper {width: 1000px; margin: 0 auto 0 auto; text-align: left; position: relative; }
#mw5 .top { border-bottom: 1px solid #ccc; background-color: #fafafa; padding: 5px 5px 0 5px; height: 22px; margin: 0 0 0 0; }
#mw5 .head { background-color: #fff; text-align: center; border: 1px solid #fff; box-sizing: border-box; }
#mw5 .menu_title { position: absolute; width: 768px; width: -webkit-calc(100% - 310px); /* for Chrome, Safari */ width: -moz-calc(100% - 310px); /* for Firefox */ width: calc(100% - 310px); /* for IE */ overflow: hidden; font-weight: normal; font-size: 1.3em; font-family: inherit; background-color: #fff; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */  margin-top:30px;font-weight:500;}
#mw5 .top-ad { width: 768px; width: -webkit-calc(100% - 310px); /* for Chrome, Safari */ width: -moz-calc(100% - 310px); /* for Firefox */ width: calc(100% - 310px); /* for IE */ overflow: hidden; font-weight: normal; font-size: 1.1em; font-family: inherit; padding: 15px 0 15px 20px; margin: 0 0 10px 0; box-shadow: 0 1px #EBEBEB; border-radius: 3px; border: 1px solid; border-color: #E5E5E5 #D3D3D3 #B9C1C6; background-color: #fff; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ }
#mw5 .container { margin:0; }
#mw5 .sidebar { width: 300px; float: right; margin-top:30px; }
#mw5 .main {width: -webkit-calc(100% - 310px); /* for Chrome, Safari */ width: -moz-calc(100% - 310px); /* for Firefox */ width: calc(100% - 310px); /* for IE */ /*overflow:hidden;*/  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */}
#mw5 .main nav.pg_wrap { border: 0; }
#mw5 .main .menu_title { font-size: 1.3em; line-height: 30px; height: 30px; border-bottom: 1px solid #eee; background-color: #efefef; }
#mw5 .main .menu_title h2 { position: absolute; line-height: 30px; height: 30px; /*border-bottom:2px solid #e74c3c;*/
min-width: 120px; padding: 0; padding-left: 5px; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/*---------------------------
    top
----------------------------*/
#mw5 .top {position:relative; overflow:hidden; border-bottom: 1px solid #f3f3f3; background-color: #fff; height:26px; line-height:26px; padding:0; margin: 0;}
#mw5 .top a { font-size:11px; color: #bbb; }
#mw5 .top ul { margin: 0; padding: 0; list-style: none; display: table; }
#mw5 .top li { display: table-cell; }
#mw5 .top li:after { content: '|'; padding: 0 5px; color: #e3e3e3; }
#mw5 .top li:last-child:after { content: ''; padding: 0; }
#mw5 .top .left { float: left; }
#mw5 .top .right { float: right; }
/*---------------------------
    head
----------------------------*/
#mw5 .head .wrapper {  margin: 15px auto 15px auto; display: table; letter-spacing: -1px; }
#mw5 .head div { vertical-align: top; }

/* hbanner */
#mw5 .head .hbanner { display:none; width:30%; text-align:left;float:right}

/* logo */
#mw5 .head .logo { display: table-cell; width:40%; text-align:left; display: absolute; font-size: 3em; font-weight: bold; padding-right: 10px;   }
#mw5 .head .logo a { text-decoration: none; }

/* search-box */
#mw5 .head .search-box { display: table-cell; width:30%; text-align:right;float:right}
#mw5 .head .search-box form { margin: 0; padding: 0;padding-top:16px; }
#mw5 .head .search-text { border: 3px solid #5997D3; /*  total color */ height: 29px; float: right; margin: 0; width: 200px; }
#mw5 .head .search-text input { border: 0; font-size: 1.5em; font-weight: bold; line-height: 25px; width: 98%; margin: 0; outline: none; background-color: transparent; }
#mw5 .head .search-button { width: 50px; height: 35px; border: 0 solid #5997D3; /*  total color */ background-color: #5997D3; /*  total color */ color: #fff; font-weight: bold; cursor: pointer; float: right; margin:0; }

/*---------------------------
    quick-link 
----------------------------*/
#mw5 .head .quick-link { clear: both; }
#mw5 .head .quick-link ul { margin: 0; padding: 7px 0 0 0; list-style: none; display: table; }
#mw5 .head .quick-link li { display: table-cell; }
#mw5 .head .quick-link li:after { content: '|'; padding: 0 5px 0 5px; color: #ddd; }
#mw5 .head .quick-link li:last-child:after { content: ''; }

/*---------------------------
    navbar
----------------------------*/
#mw5 nav { /*border-bottom: 3px solid #2573be;*/text-align:center }
#mw5 .navbar {clear: both; width:1130px;  margin:0 auto; height: 50px; padding: 0; list-style: none; font-family: '나눔고딕', 'Nanum Gothic'; }
#mw5 .navbar a:hover,
#mw5 .navbar a:link,
#mw5 .navbar a:active,
#mw5 .navbar a:visited { color: #333; text-decoration: none; font-size: 14px; height: 50px; line-height: 50px; }
#mw5 .navbar li.item { float: left; font-weight: bold; float: left; padding: 0; height: 50px; }
#mw5 .navbar li.item a { display: block; padding: 0px 21px 0 21px; font-weight: bold; }
#mw5 .navbar ul:first-child li .new-count { margin: 0 0 0 5px; color: #e74c3c; font-weight: bold; position: absolute; margin: -2px 0 0 -5px; background-color: #e74c3c; color: #333; padding: 2px 7px 2px 7px; border-radius: 10px; opacity: 0.8; font-size: .7em; line-height: 1.4em; }
#mw5 .navbar ul:first-child li span.new-check:after { font-family: FontAwesome; font-weight: normal; font-style: normal; content: '\f111'; color: #e74c3c; margin-left: 5px; font-size: 10px; }
#mw5 .navbar ul:first-child li span.new-check { font-size: 0; }
#mw5 .navbar ul:first-child li span.new-no { display: none; }
#mw5 .navbar li.select { float: left; display: block; padding: 0; background-color: #3784cf; height: 50px; }
#mw5 .navbar li.select a { display: block; padding: 0px 21px 0 21px;  font-weight: bold;}
#mw5 .navbar li.underline { height: 50px; border-bottom: 3px solid #2573be; }
#mw5 .navbar li .caret { font-size: .5em; padding-left: 5px; }
#mw5 .navbar ul.dropdown { display: none; position: absolute; background-color: #fff; z-index: 9999; border: 1px solid #bbb; min-width: 150px; padding: 0; margin: 50px 0 0 0; box-shadow: 5px 5px 10px #777; list-style: none; }
#mw5 .navbar ul.dropdown li { height: 35px; color: #000; padding: 0; border-bottom: 1px solid #efefef; }
#mw5 .navbar ul.dropdown li:hover { background-color: #efefef; cursor: pointer; }
#mw5 .navbar ul.dropdown a:link,
#mw5 .navbar ul.dropdown a:visited,
#mw5 .navbar ul.dropdown a:hover,
#mw5 .navbar ul.dropdown a:active { color: #000; text-decoration: none; font-size: 1em; line-height: 35px; width: 100%; height: 100%; padding-left: 12px; padding-right: 12px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ display: block; }
#mw5 .navbar ul.dropdown:before { content: ''; position: absolute; border-style: solid; border-width: 0 5px 6px; border-color: #fff transparent; display: block; width: 0; z-index: 1; top: -6px; left: 20%; }
#mw5 .navbar ul.dropdown li .new-count { margin: 0 0px 0 5px; color: #e74c3c; font-weight: bold; position: static; background-color: #e74c3c; color: #fff; padding: 2px 7px 2px 7px; border-radius: 10px; opacity: 0.8; font-size: .7em; }
#mw5 .navbar ul.dropdown li .new-check:after { font-family: FontAwesome; font-weight: normal; font-style: normal; content: '\f111'; color: #e74c3c; margin-left: 5px; margin-right: 5px; font-size: 10px; }
#mw5 .navbar ul.dropdown li .new-check { font-size: 0; }
#mw5 .navbar ul.dropdown li .new-no { display: none; }
#mw5 .navbar li.nothing { color: #fff; float: left; padding: 0; height: 50px; line-height: 50px; }
#mw5 .navbar li.nothing a { text-decoration: underline; font-size: 1em; }

#mw5 .navbar .logo {display:none;}
#mw5 .navbar-fixed {width:100%; margin:0; background-color:rgba(155,89,182,0.9) !important; border-bottom:none !important;}
#mw5 .navbar-fixed .logo {display:block; float:left; margin-right:40px; margin-top:-4px;}
#mw5 .navbar-fixed .logo img {height:26px;}
 
/*---------------------------
    sidebar
----------------------------*/

#mw5 .sidebar .social-login { text-align: center; }
#mw5 .sidebar .social-login img { cursor: pointer; }
#mw5 .sidebar-nav { margin: 0; border: 0px solid #ccc; background-color: #8a42a8; box-shadow: 0 1px #EBEBEB; border-radius: 3px; border-color: #E5E5E5 #D3D3D3 #B9C1C6; background-color: #fff; }
#mw5 .sidebar-nav ul { padding: 0; margin: 0; list-style: none; }
#mw5 .sidebar-nav ul li { padding: 0; margin: 0; height: 36px; background-color: #ecf0f1; border-bottom: 1px solid #fff; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; position: relative; }
#mw5 .sidebar-nav ul li:hover {   background-color:#bdc3c7;}
#mw5 .sidebar-nav ul li.selected { /*background-color:#bdc3c7;*/
font-weight: bold; }
#mw5 .sidebar-nav ul li.selected a { font-weight: bold; color: #e74c3c; /*text-decoration:underline;*/
}
#mw5 .sidebar-nav ul li a { display: block; width: 100%; height: 100%; line-height: 36px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 0; padding: 0 0 0 25px; text-decoration: none; }
#mw5 .sidebar-nav ul li a:hover { color: #e74c3c; text-decoration: underline; }
#mw5 .sidebar-nav ul li.sidebar-brand { background-color: #8a42a8; text-align:center;height:90px !important}
#mw5 .sidebar-nav ul li.sidebar-brand a { color: #fff; text-decoration: none;font-size:14px !important;font-weight:800;line-height:90px !important;padding:0 !important}
#mw5 .sidebar-nav ul li.sidebar-brand a:hover { text-decoration: none; }
#mw5 .sidebar-nav ul li .new-count { margin: 0 0 0 5px; color: #e74c3c; font-weight: bold; background-color: #e74c3c; color: #fff; padding: 2px 7px 2px 7px; border-radius: 10px; opacity: 0.8; font-size: .7em; }
#mw5 .sidebar-nav ul li .new-check:after { font-family: FontAwesome; font-weight: normal; font-style: normal; content: '\f111'; color: #e74c3c; margin-left: 5px; font-size: 10px; }
#mw5 .sidebar-nav ul li .new-check { font-size: 0; }
#mw5 .sidebar-nav ul li .new-no { display: none; }
#mw5 .sidebar-nav ul li .count { position: absolute; right: 10px; line-height: 30px; color: #7f8c8d; }

/*---------------------------
    etc
----------------------------*/

#mw5 .popular { position: absolute; right: 10px; }
#mw5 .blank { border: 0; margin: 0; padding: 0; clear: both; font-size: 0; line-height: 0; height: 0; }
#mw5 .block { background-color: #fff; padding: 10px; margin: 0 0 10px 0; box-shadow: 0 1px #EBEBEB; border-radius: 3px; border: 1px solid; border-color: #E5E5E5 #D3D3D3 #B9C1C6; background-color: #fff; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ }
/*---------------------------
    latest
----------------------------*/
#mw5 .latest { width: 100%; display: table; table-layout: fixed; }
#mw5 .latest div.item { display: table-cell; padding-bottom: 10px; vertical-align: top; }
#mw5 .latest div.item:first-child {  }
#mw5 .latest div.item:nth-child(2n) {  }
#mw5 .latest div.item:last-child { padding-right: 0; }
#mw5 .theme { border-bottom: 1px dotted #dde4e9 }
#mw5 .theme div { margin: 0 auto; width: 970px; zoom: 1 }
#mw5 .theme div:after { display: block; visibility: hidden; clear: both; content: "" }
#mw5 .theme h2 { float: left; padding: 10px 45px 10px 0 }
#mw5 .theme ul { float: left; margin: 0; padding: 0; list-style: none }
#mw5 .theme li { float: left }
#mw5 .theme a { display: inline-block; padding: 10px; text-decoration: none }
#mw5 .theme a:focus,
#theme a:hover { }
#mw5 .footer { background-color: #fff; text-align: left; margin: 10px 0 0 0; padding: 0; }
#mw5 .footer .wrapper { padding-left: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#mw5 .footer .tail_link { margin: 0; padding: 0; line-height: 30px; background-color: #efefef; border-top: 1px solid #ccc; line-height: 40px; }
#mw5 .footer ul { margin: 0; padding: 0; text-align: left; list-style: none; display: table; }
#mw5 .footer li { margin: 0; padding: 0 10px 0 0; display: table-cell; }
#mw5 .footer li:last-child { padding: 0; }
#mw5 .footer .banners { padding: 10px 0 0 0; }
#mw5 .footer .banners img { border: 1px solid #ccc; }
#mw5 .footer .menu { margin: 0; padding: 0; }
#mw5 .footer .menu li { margin: 0; padding: 0; }
#mw5 .footer .menu li:after { content: "|"; padding: 0 10px 0 10px; color: #ccc; }
#mw5 .footer .menu li:last-child:after { content: ''; }
#mw5 .footer .menu li a { font-size: 12px; font-weight: normal; font-family: inherit; color: #000; }
#mw5 .footer .copyright { padding: 10px 0 10px 0; }
#mw5 #device_change { margin: 0; padding: 10px 0 10px 0; border: 0; border-radius: 0; }
#top-button { font-size: 2em; }
#mw5 .my_cash { cursor: pointer; line-height: 20px; height: 90px; }
#mw5 .my_cash label { font-weight: bold; }
#mw5 .my_cash .graph { margin-top: 7px; background-color: #efefef; height: 20px; font-weight: bold; font-size: 11px; }
#mw5 .my_cash .graph div { float: left; height: 20px; }
#mw5 .my_cash .graph .grade { background-color: #f1899a; color: #fff; text-align: right; padding-right: 5px; padding-left: 5px; }
#mw5 .clear { clear: both; height: 0; font-size: 0; line-height: 0; }
#top-button { font-family: FontAwesome; font-weight: normal; font-style: normal; content: "\f077"; opacity: 0.8; font-size: 10px; line-height: 30px; background-color: #ccc; display: block; width: 30px; height: 30px; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 5px;margin-left:-40px}
#mw5 .memo_count { color: red; font-weight: bold; }
