@charset 'utf-8';
@font-face {
  font-family: "Youandi_Modern";
  font-style: normal;
  font-weight: 400;
  src: local("../fonts/Youandi_Modern_TextRegular"), /* computer */ url("../../fonts/Youandi_Modern_TextRegular.eot"), /* IE9 Compat Modes */ url("../../fonts/Youandi_Modern_TextRegular.woff2") format("woff2"), /* Modern Browsers */ url("../../fonts/Youandi_Modern_TextRegular.woff") format("woff"), /* Modern Browsers */ url("../../fonts/Youandi_Modern_TextRegular.ttf") format("truetype");
  /* Safari, Android, iOS */
}
@font-face {
  font-family: "Youandi_Modern";
  font-style: normal;
  font-weight: 700;
  src: local("../fonts/Youandi_Modern_TextBold"), /* computer */ url("../../fonts/Youandi_Modern_TextBold.eot"), /* IE9 Compat Modes */ url("../../fonts/Youandi_Modern_TextBold.woff2") format("woff2"), /* Modern Browsers */ url("../../fonts/Youandi_Modern_TextBold.woff") format("woff"), /* Modern Browsers */ url("../../fonts/Youandi_Modern_TextBold.ttf") format("truetype");
  /* Safari, Android, iOS */
}
@font-face {
  font-family: "Youandi_Modern";
  font-style: normal;
  font-weight: 800;
  src: local("../fonts/Youandi_Modern_HeadExtraBold"), /* computer */ url("../../fonts/Youandi_Modern_HeadExtraBold.eot"), /* IE9 Compat Modes */ url("../../fonts/Youandi_Modern_HeadExtraBold.woff2") format("woff2"), /* Modern Browsers */ url("../../fonts/Youandi_Modern_HeadExtraBold.woff") format("woff"), /* Modern Browsers */ url("../../fonts/Youandi_Modern_HeadExtraBold.ttf") format("truetype");
  /* Safari, Android, iOS */
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Youandi_Modern';
}
ol,
ul {
  list-style: none;
}
li {
  list-style: none;
}
.wrapper {
  width: 1200px;
  margin: 0 auto;
}
#topHeader {
  background: #f1f1f1;
}
#topHeader .topHeaderWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 45px;
}
#topHeader .topHeaderWrapper .topHeaderLeft ul li {
  margin-right: 15px;
}
#topHeader .topHeaderWrapper .topHeaderLeft ul li dl {
  display: flex;
}
#topHeader .topHeaderWrapper .topHeaderLeft ul li dl dt {
  font-weight: 700;
}
#topHeader .topHeaderWrapper .topHeaderLeft ul li dl dd {
  font-weight: 100;
}
#topHeader .topHeaderWrapper .topHeaderRight .topHeaderRightNav {
  display: flex;
}
#topHeader .topHeaderWrapper .topHeaderRight .topHeaderRightNav li {
  margin-left: 20px;
  display: flex;
  align-items: center;
}
#topHeader .topHeaderWrapper .topHeaderRight .topHeaderRightNav li.user .userExpIcon {
  margin-right: 5px;
}
#topHeader .topHeaderWrapper .topHeaderRight .topHeaderRightNav li.user .userExpIcon img {
  height: 15px;
}
#header .headerWrapper {
  position: relative;
  padding: 50px 0;
}
#header .headerWrapper .sns {
  display: flex;
}
#header .headerWrapper .sns .sns-share-list {
  display: flex;
}
#header .headerWrapper .sns .sns-share-list li {
  margin-left: 15px;
}
#header .headerWrapper .sns .sns-share-list li:first-child {
  margin-left: 0;
}
#header .headerWrapper .sns .sns-share-list li a {
  font-size: 25px;
}
#header .headerWrapper .sns .sns-share-list li a.facebook {
  color: #3b5999;
}
#header .headerWrapper .sns .sns-share-list li a.twitter {
  color: #00bbf5;
}
#header .headerWrapper .sns .sns-share-list li a.kakao {
  color: #edcd21;
}
#header .headerWrapper .sns .sns-share-list li a.band {
  color: #1ac620;
}
#header .headerWrapper .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#gnb {
  width: 100%;
  height: 65px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}
#gnb nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#gnb nav li {
  position: relative;
  display: inline-block;
  height: var(--navblock-navbar-height);
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
}
#gnb nav li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: calc((65px - 16px)/2 + 1px) 30px;
  color: #666;
  font-size: 16px;
  transition: 2s color;
}
#gnb nav li a:hover {
  color: #33BCB4;
  font-weight: 700;
}
#gnb nav li a .iconify {
  font-size: 20px;
}
#gnb nav li a span {
  position: relative;
}
#gnb nav li a span:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -1px;
  display: inline-block;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: var(--time-hover) width;
}
#gnb nav li a:hover span:after {
  width: calc(100% + 4px);
}
#gnb nav li ol {
  display: none;
  position: absolute;
  top: calc(65px - 10px);
  z-index: 1;
  width: 100%;
  background: #fff;
  border: 1px solid #eee;
}
#gnb nav li ol li {
  display: block!important;
  height: auto!important;
  padding: 10px!important;
  border-bottom: 1px solid #eee;
  text-align: center;
}
#gnb nav li ol li a {
  padding: 5px 10px;
  font-size: 12px;
}
#gnb nav li:hover ol {
  display: block;
}
#content {
  background: #fafafa;
  padding: 25px 0;
}
#footer {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 15px 0;
  border-top: 1px solid #eee;
}
#footer .copyright {
  widht: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#footer .copyright p {
  text-align: center;
  line-height: 25px;
}
#index .rank-list {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#index .rank-list .rank-row {
  flex: 1;
  position: relative;
  justify-content: space-between;
  border: 1px solid #eee;
  background: #fff;
  margin-left: 5px;
  width: 100%;
}
#index .rank-list .rank-row:first-child {
  margin-left: 0;
}
#index .rank-list .rank-row h1 {
  height: 45px;
  width: 100%;
  display: flex;
  align-items: center;
  line-height: 35px;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 400;
}
#index .rank-list .rank-row .more {
  position: absolute;
  top: 0;
  right: 0;
  height: 45px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
#index .rank-list .rank-row .rank-item-list {
  padding: 10px 0;
}
#index .rank-list .rank-row .rank-item-list .rank-item {
  padding: 8px 15px 8px 15px;
}
#index .rank-list .rank-row .rank-item-list .rank-item .rank-top-banner {
  margin: 0 0 15px 0;
  display: block;
}
#index .rank-list .rank-row .rank-item-list .rank-item .rank-top-banner img {
  max-width: 100%;
  width: 100%;
  height: 100%;
}
#index .rank-list .rank-row .rank-item-list .rank-item .rank-anchor {
  display: flex;
  align-items: center;
  font-size: 12px;
}
#index .rank-list .rank-row .rank-item-list .rank-item .rank-anchor .iconify {
  font-size: 16px;
}
#index .rank-list .rank-row .rank-item-list .rank-item .rank-anchor .rank-num {
  font-size: 14px;
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 1px solid #eee;
  background: #f1f1f1;
  text-align: center;
  heihgt: 18px;
  line-height: 18px;
  font-size: 12px;
  margin-right: 10px;
}
#index .rank-list .rank-row .rank-item-list .rank-item .rank-anchor .rank-medal {
  margin-right: 10px;
}
#index .recent-list {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
#index .recent-list .recent-row {
  flex: 1;
  position: relative;
  justify-content: space-between;
  border: 1px solid #eee;
  background: #fff;
  margin-left: 5px;
  width: 100%;
}
#index .recent-list .recent-row:first-child {
  margin-left: 0;
}
#index .recent-list .recent-row h1 {
  height: 45px;
  width: 100%;
  align-items: center;
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 400;
}
#index .recent-list .recent-row .article-list {
  display: block;
  padding: 10px 15px 10px 15px;
}
#index .recent-list .recent-row .article-list li {
  margin-top: 5px;
}
#index .recent-list .recent-row .article-list li:first-child {
  margin-top: 0;
}
#index .recent-list .recent-row .article-list li a {
  display: flex;
}
#index .recent-list .recent-row .article-list li a img {
  width: 50px;
  height: 50px;
}
#index .recent-list .recent-row .article-list li a .meta {
  display: block;
  margin-left: 20px;
}
#index .recent-list .recent-row .article-list li a .meta .meta-row {
  display: flex;
  margin-top: 7px;
  font-size: 13px;
}
#index .recent-list .recent-row .article-list li a .meta .meta-row .cate {
  font-weight: 700;
  margin-right: 10px;
}
#index .recent-list .recent-row .article-list li a .meta .meta-row .nick {
  margin-right: 10px;
}
#index .recent-list .recent-row .article-list li a .meta .meta-row .nick:after {
  content: '';
  position: relative;
  top: 0;
  display: inline-block;
  width: 1px;
  height: 9px;
  margin-left: 7px;
  background: #aaa;
}
#index .helpdesk {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
#index .helpdesk .helpdesk-row {
  position: relative;
  overflow: hidden;
  margin-left: 5px;
  flex: 1;
  background: #fff;
  border: 1px solid #eee;
}
#index .helpdesk .helpdesk-row:first-child {
  margin-lefT: 0;
}
#index .helpdesk .helpdesk-row h1 {
  align-items: center;
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 400;
  height: 45px;
  width: 100%;
}
#index .helpdesk .helpdesk-row .article-list {
  display: block;
  padding: 10px 15px 10px 15px;
}
#index .helpdesk .helpdesk-row .article-list li {
  margin-top: 5px;
}
#index .helpdesk .helpdesk-row .article-list li:first-child {
  margin-top: 0;
}
#index .helpdesk .helpdesk-row .article-list li a {
  display: flex;
}
#index .helpdesk .helpdesk-row .article-list li a img {
  width: 50px;
  height: 50px;
}
#index .helpdesk .helpdesk-row .article-list li a .meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#index .helpdesk .helpdesk-row .article-list li a .meta .meta-col {
  display: flex;
  margin-top: 7px;
  font-size: 13px;
}
#index .helpdesk .helpdesk-row .article-list li a .meta .meta-col.icon {
  width: 30px;
  justify-content: left;
}
#index .helpdesk .helpdesk-row .article-list li a .meta .meta-col.topic {
  flex: 1;
}
#index .helpdesk .helpdesk-row .article-list li a .meta .meta-col.datetime {
  width: 120px;
  justify-content: right;
}
#index .helpdesk .helpdesk-row .earth {
  position: absolute;
  right: -50px;
  bottom: -50px;
  font-size: 180px;
  color: #efefef;
}
#index .helpdesk .helpdesk-row .statistics {
  padding: 10px 10px;
}
#index .helpdesk .helpdesk-row .statistics li {
  display: flex;
}
#index .helpdesk .helpdesk-row .statistics li .stat-col {
  padding: 5px 10px;
}
#index .helpdesk .helpdesk-row .statistics li .stat-col.icon {
  width: 30px;
  font-weight: bold;
  font-size: 18px;
}
#index .helpdesk .helpdesk-row .statistics li .stat-col.name {
  width: 100px;
  font-size: 14px;
  line-height: 18px;
}
#index .helpdesk .helpdesk-row .statistics li .stat-col.counter {
  text-align: left;
  line-height: 18px;
  flex: 1;
}
#cover {
  display: flex;
  width: 100%;
}
#cover .wrapper {
  display: flex;
}
#cover .wrapper .cover-sidebar {
  width: 300px;
  margin-right: 10px;
}
#cover .wrapper .cover-sidebar .sidebar-row {
  background: #fff;
  margin-top: 10px;
  border: 1px solid #eee;
}
#cover .wrapper .cover-sidebar .sidebar-row:first-child {
  margin-top: 0;
}
#cover .wrapper .cover-content {
  flex: 1;
}
#cover .wrapper .cover-content .cover-topic {
  font-size: 16px;
  font-weight: 400;
  height: 55px;
  line-height: 55px;
  padding: 0 15px;
  background: #fff;
  border: 1px solid #eee;
  margin-bottom: 10px;
}
#top_banner_container {
  width: 100%;
}