@charset "utf-8";

html {overflow:auto; overflow-x: hidden; background-color:#000000;}
html::-webkit-scrollbar {width:7px; height:7px;}
html::-webkit-scrollbar-thumb {background:rgba(255,255,255,0.5); border-radius:50px;}
html::-webkit-scrollbar-track {background:rgba(255,255,255,.1);}
body {margin:0; padding:0; font-size:1em; font-weight:400; font-family:'SUIT-Regular', 'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif; background:#000;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0; padding:0; border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em; font-family:'SUIT-Regular', 'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0; padding:0; list-style:none}
legend {position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden}
label, input, button, select, img {vertical-align:middle; font-size:1em}
input, button {margin:0; padding:0; font-family:'SUIT-Regular', 'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif; font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'SUIT-Regular', 'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif; font-size:1em}
select {margin:0}
p {margin:0; padding:0; word-break:break-all}
hr {display:none}
pre {overflow-x:scroll; font-size:1.1em}
a {color:#000; text-decoration:none;
-moz-transition:all 0.3s;
-webkit-transition:all 0.3s;
-o-transition:all 0.3s;
-ms-transition:all 0.3s;
transition:all 0.3s;}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

.placeholdersjs {color:#aaa !important}


/* 상단 페이지 메뉴 */
.hdtop_menu {width:100%; background:#fff; padding:10px;}
.hdtop_menu a {font-size:0.75em;}
.hdtop_menu span {padding:0 10px;}

/* head */
.header {width:100vw; background:#18180f; position:fixed; top:0; left:0; z-index:10000;}
.header article {width:100%; border-bottom:1px solid #323232; margin:0 auto;}
.header_top {width:100%; max-width:1200px; height:90px; margin:0 auto; position:relative;}
.header_top .header_logo {position:absolute; top:34px; left:10px;}
.header_top .header_logo img {max-width:254px; height:auto;}
.header_top .header_ranking {width:calc(100% - 790px); position:relative; margin-left:300px; padding:35px 0 0 100px;}
.header_top .header_ranking p {position:absolute; top:35px; left:0; color:#ff6666; display:block; border-right:1px solid #ff6666; padding-right:13px;}
.header_top .header_ranking ul {width:100%; height:20px; overflow:hidden;}
.header_top .header_ranking ul li {color:#fff; width:100%; height:20px; line-height:20px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; cursor:pointer;}
.header_top .header_ranking > div.rankingPop {position:absolute; top:56px; left:-15px; width:500px; color:#ffffff; background-color:#000000; border:1px solid #ffffff; border-radius:5px; padding:15px; z-index:1000; display:none; line-height:1.5;}
.header_top .header_ranking > div.rankingPop > div {cursor:pointer; border-bottom:1px solid #606060; padding:5px 0;}
.header_top .header_ranking > div.rankingPop > div:last-child {border-bottom:0;}
.header_top .header_ranking > div.rankingPop > div:hover {color:#fcaf16; transition:all 0.4s;}
.header_top .header_ranking > div.rankingPop > div > span {color:#fcaf16;}
.header_top .header_name {position:absolute; top:25px; right:270px; height:40px; width:220px; text-align:right; color:#ffffff; line-height:40px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.header_top .header_name_newLc { right:10px!important;}
.header_top .header_search {position:absolute; top:25px; right:95px; color:#ffffff; display:block;}
.header_top .header_search input {width:160px; height:40px; border-radius:5px; background:#2d2d2f; border:0; padding:0 10px; color:#fff;}
.header_top .header_search button {position:absolute; top:9px; right:15px; border:0; padding:0; margin:0; background-color:transparent; font-size:1.25em; color:#6b6b6b;}
.header_top .header_search_detail {position:absolute; top:25px; right:10px; font-size:14px; height:40px; display:block; width:80px;}
.header_top .header_search_detail button {background:#fcaf16; color:#ffffff; border-radius:5px; display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.header_top .header_btn_m {display:none; align-items:center; justify-content:center; position:absolute; top:5px; right:5px; height:40px; line-height:40px; width:25px; text-align:center; font-size:22px; cursor:pointer; color:#ffffff;}

.header_menu_back {width:100%; background:#18180f; border-top:1px solid #323232; position:sticky; top:90px;}
.header_menu {max-width:1200px; margin:0 auto; position:relative;}
.header_menu > ul {width:100%; padding:0 10px;}
.header_menu > ul > li {display:inline-block; margin-right:28px;}
.header_menu > ul > li:last-child {margin:0;}
.header_menu > ul > li a {display:block;color:#fff; font-weight:500; line-height:51px; font-size:1em; position:relative;}
.header_menu > ul > li a:hover {color:#fcaf16; transition:all 0.4s; font-weight:500;}
.header_menu > ul > li a:after {content:""; width:0; height:2px; background:#fcaf16; display:block; position:absolute; left:0; top:49px; margin-left:0;
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
-ms-transition:all 0.4s;
}
.header_menu > ul > li:hover > a:after {width:100%;}
.header_menu > ul > li > ul {display:none; background-color:#18180f; padding:10px; border-radius:0 0 5px 5px;}
.header_menu > ul > li > ul > li {display:block; height:40px;}

.header_menu_on {position:absolute; z-index:1000; left:0; top:51px; width:100%; padding:0 10px; background:#18181b; border-top:1px solid #323232; border-bottom:1px solid #323232; display:none;}
.header_menu_on > div {display:none;}
.header_menu_on > div > ul {display:inline-block; width:160px; margin-right:29px; vertical-align:top;}
.header_menu_on > div > ul > li {display:block; padding:11px 0; font-size:16px;}
.header_menu_on > div > ul > li strong {color:#868686; font-weight:500;}
.header_menu_on > div > ul > li a {color:#fff}

.header_menu .header_btn {position:absolute; top:0; right:10px; display:flex; align-items:center; justify-content:flex-end; height:51px;}
.header_btn > div {position:relative; height:100%; display:flex; align-items:center; justify-content:center; margin:0 0 0 5px; text-align:center;}
.header_btn > div > ul {display:none; background-color:#18180f; padding:10px; border-radius:0 0 5px 5px; width:150px;}
.header_btn > div > ul > li {height:40px; display:flex; align-items:center; text-align:left;}
.header_btn > div > ul > li a {color:#fff}

.header_btn a {display:inline-block; min-width:100px;}
.header_btn_help {padding:10px 5px; color:#ff6666; width:110px;}
.header_btn_help:hover {color:#fcaf16;}
.header_btn_my {padding:10px 5px; background:#ff6666; color:#fff; border-radius:5px;}
.header_btn_my:hover {background:#fcaf16;}
.header_btn_out {padding:10px 5px; background:#444444; color:#fff; border-radius:5px;}
.header_btn_out:hover {background:#fcaf16;}

.ft {width:100%; background:#18180f; padding:50px 30px; border-top:1px solid #353535;}
.ft article {text-align:center; font-size:0.875em;}
.ft article span {display:block; margin-bottom:20px; color:#ffcccc;}
.ft article p {color:#999;}
.ft article .helpDesk {color:#999; padding:0 0 20px 0; font-size:16px;}
.ft article .helpDesk * {font-size:16px;}

.footer_menu {position:fixed; bottom:0; left:0; width:100%; height:60px; padding:0; border-top:1px solid #606060; background-color:#000000; display:none; align-items:center; justify-content:space-around;}
.footer_menu > div {display:flex; flex-direction:column; align-items:center; justify-content:center; color:#ffffff; width:20%; padding:10px 0; cursor:pointer; font-size:11px;}
.footer_menu > div > i {font-size:15px;}

.header_menu_m_back {position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.7); overflow-y:hidden; display:none; z-index:10005;}
.header_menu_m_back .closeMenu {position:absolute; top:15px; right:12px; width:20px; height:20px; padding:0; margin:0; cursor:pointer;}
.header_menu_m {position:fixed; top:0; left:-350px; width:300px; height:100vh; background-color:#18181b; color:#ffffff; overflow-y:hidden; z-index:10006;}
.header_menu_m * {color:#ffffff;}
.hmmc {overflow-y:auto;}
.hmmc::-webkit-scrollbar {width:7px; height:7px;}
.hmmc::-webkit-scrollbar-thumb {background:rgba(255,255,255,0.5); border-radius:50px;}
.hmmc::-webkit-scrollbar-track {background:rgba(255,255,255,.1);}

.hmmh {position:absolute; top:0; left:0; width:100%; padding:15px; line-height:25px; border-bottom:1px solid #323232; background-color:#18181b; z-index:1; text-align:right;}
.hmmh a {border: 1px solid #6e6e70; padding:5px 0; width:30%; height:30px; margin:5px 2px; display:inline-flex; font-size:12px; text-align:center; line-height:20px; align-items:center; justify-content:center;}
.hmmh p {line-height:40px; text-align:left; padding:0 0 0 5px; position:relative; display:flex; align-items:center; justify-content:flex-start;}
.hmmh p a {position:absolute; top:0; right:0;}
.hmmc {padding:15px; z-index:0;}

.hmmv {padding:15px;}

.hmmc > li > a {font-size:18px; padding:0 0 10px 0; line-height:30px;}
.hmmc > li > ul {padding:5px 0 20px 20px;}
.hmmc > li > ul > li {line-height:25px;}
.hmmc > li > ul > li > a > strong {font-size:16px; color:#aaaaaa;}

/* 강의 리스츠 출력 */
.class_list_box {width:100%; background:#222; border-radius:0 0 10px 10px; position:relative;}
.class_list_box .class_list_num01 {position:absolute; top:5px; left:5px; width:40px; height:40px; line-height:40px; border-radius:50%; background:#cc0000; color:#fff; text-align:center; font-size:1.5em; font-weight:900; display:flex; align-items:center; justify-content:center;}
.class_list_box_img img {width:100%; height:auto; border-radius:10px 10px 0 0;}
.class_list_box_con {padding:15px;}
.class_list_box_title {padding-bottom:15px; border-bottom:1px solid #333;}
.class_list_box_title span {display:block; color:#ff9999; font-size:0.875em; margin-bottom:5px; height:17px; width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.class_list_box_title a {display:block; color:#fff; font-weight:500; font-size:1.1em; height:22px; width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.class_list_box_title a:hover {color:#fab116;}
.class_list_box_txt01 {padding:15px 0; position:relative;}
.class_list_box_state {display:inline-block; color:#fff; height:30px; line-height:28px; padding:0 10px; border-radius:5px; font-size:0.875em;}
.class_list_box_txt01 .class_list_box_btn {position:absolute; top:15px; right:0;}
.class_list_box_btn a {display:inline-block; height:30px; line-height:30px; background:#000; color:#fff; padding:0 15px; font-size:0.875em; border-radius:5px; margin-left:1px;}
.class_list_box_btn a:hover {background:#fff; color:#000;}
.class_list_box_btn span {display:inline-block; height:30px; line-height:30px; background:#000; color:#fff; padding:0 15px; font-size:0.875em; border-radius:5px; margin-left:1px; cursor:pointer;}
.class_list_box_btn span:hover {background:#fff; color:#000;}
.class_list_box_txt02 {padding-top:15px; color:#999; font-size:0.81em;}
.class_list_box_txt02 span {padding:0 5px;}

.list_state01 {border:1px solid #682eff; background:#682eff;}
.list_state02 {border:1px solid #fff;}
.list_state03 {border:1px solid #cc0000; background:#cc0000;}

.pagingx {width:100%;text-align:center;vertical-align:middle;margin:0 auto;padding:20px 0; margin-top:30px; font-size:0.875em;}
.pagingx font {padding:4px 8px; margin-right: 6px; background-color:transparent; border:0 solid #A4A4A4; color:#333333!important; vertical-align:middle;text-align:center;cursor:pointer;border-radius:5px;}
.pagingx a.paging:link, a.paging:visited, a.paging:hover, a.paging:active {padding:3px 5px; color:#333 ;text-decoration:none;}
.pagingx font i {color:#333!important;}

@media screen and (max-width:1000px) {
  .header_top {height:90px;}
  .header_top .header_btn {display:none;}
  .header_top .header_btn_on {display:none;}
  .header_top .header_btn_m {display:flex;}
  .header .header_menu_back {display:none;}
  .header_top .header_logo {top:13px;}
  .header_top .header_ranking {width:50%; position:absolute; top:55px; left:0; margin:0; padding:0}
  .header_top .header_ranking p {top:0; left:10px;}
  .header_top .header_ranking ul {height:20px; padding:0 10px 0 105px;}
  .header_top .header_name {display:none;}
  .header_top .header_search {top:45px; left:50%; width:calc(50% - 95px); height:35px;}
  .header_top .header_search input {width:calc(100% - 20px); height:35px; padding:0 5px; margin:0 0 0 10px;}
  .header_top .header_search button {top:9px; right:20px;}
  .header_top .header_search_detail {position:absolute; top:45px; right:10px; font-size:14px; height:35px; display:block; width:80px;}

  .header_btn a {display:inline-block; min-width:100px;}
  .header_btn_help {padding:10px 5px; color:#ff6666; width:110px;}
  .header_btn_help i {color:#ff6666;}
  .header_btn_help:hover {color:#ff6666;}
  .header_btn_my {padding:10px 5px; background:transparent; color:#fcaf16; border-radius:5px;}
  .header_btn_my:hover {color:#fcaf16;}
  .header_btn_out {padding:10px 5px; background:#000; color:#fff; border-radius:5px;}
  .header_btn_out:hover {background:#fcaf16;}

  #main_popup article {width:100vw; max-width:1120px; margin:0 auto; text-align:center; position:relative; padding:0;}
  #main_popup article > div {width:100%; position:relative; padding:0;}
  #main_popup article button {position:absolute; top:0; right:5px; border:0; padding:0; margin:0; background-color: transparent; opacity:0.4; font-size:12px;}

  .ft {width:100%; background:#18180f; padding:15px 20px 70px 20px; border-top:1px solid #353535;}
  .ft article {text-align:center; font-size:0.875em;}
  .ft article span {display:block; margin-bottom:10px; color:#ffcccc;}
  .ft article p {color:#999;}

  .footer_menu {display:flex; z-index:13;}

  #ft article .fta p {font-size:11px;}

  #ft article .ftb {float:left; font-size:0.86em; padding:20px 0 0 10px; width:100%;}
  #ft article .ftb p {text-align:left;}
  #ft article .ftb .ftbc {margin-top:28px; color:rgba(255,255,255,0.2); text-align:center; font-size:1.05em;}

  .header_top .header_ranking > div.rankingPop {position:absolute; top:20px; left:10px; width:calc(200% - 22px); color:#ffffff; background-color:#000000; border:1px solid #ffffff; border-radius:5px; padding:15px; z-index:1000; display:none; line-height:1.5;}
}

@media screen and (max-width:500px) {
  html::-webkit-scrollbar {width:0; height:0;}
  html::-webkit-scrollbar-thumb {background:rgba(255,255,255,0.5); border-radius:50px;}
  html::-webkit-scrollbar-track {background:rgba(255,255,255,.1);}

  .header_top {height:130px;}
  .header_top .header_btn {display:none;}
  .header_top .header_btn_on {display:none;}
  .header_top .header_btn_m {display:flex;}
  .header .header_menu_back {display:none;}
  .header_top .header_logo {top:13px;}
  .header_top .header_ranking {width:100%; position:absolute; top:55px; left:0; margin:0; padding:0}
  .header_top .header_ranking p {top:0; left:10px;}
  .header_top .header_ranking ul {height:20px; padding:0 10px 0 105px;}
  .header_top .header_name {display:none;}
  .header_top .header_search {top:85px; left:0; width:calc(100% - 95px); height:35px;}
  .header_top .header_search input {width:calc(100% - 20px); height:35px; padding:0 5px; margin:0 0 0 10px;}
  .header_top .header_search button {top:9px; right:20px;}
  .header_top .header_search_detail {position:absolute; top:85px; right:10px; font-size:14px; height:35px; display:block; width:80px;}

  .header_top .header_ranking > div.rankingPop {position:absolute; top:20px; left:10px; width:calc(100% - 22px); color:#ffffff; background-color:#000000; border:1px solid #ffffff; border-radius:5px; padding:15px; z-index:1000; display:none; line-height:1.5;}

  .ft article .helpDesk {color:#999; padding:0 0 10px 0;font-size:16px;}
  .ft article .helpDesk * {font-size:16px;}
}