@charset "utf-8";

/*##############################################################################################################
 * google fonts
 *##############################################################################################################*/
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");

/*##############################################################################################################
 * custom normalize
 *##############################################################################################################*/
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}
body {
  line-height: 1.2em;
}

/*##############################################################################################################
 * custom css
 *##############################################################################################################*/
.show {
  display: block !important;
}
.hide {
  display: none !important;
}
.m-t-5 {
  margin-top: 5px !important;
}
.m-t-10 {
  margin-top: 10px !important;
}
.m-t-20 {
  margin-top: 20px !important;
}
.m-t-30 {
  margin-top: 30px !important;
}
.f12 {
  font-size: 12px;
  font-family: "Nanum Square", sans-serif;
}
.bold {
  font-weight: 700;
}
.darkgray {
  color: #666;
}

.fl {
  float: left !important;
}
.fr {
  float: right !important;
}
.fn {
  float: none !important;
}
.clb {
  clear: both;
}
.tal {
  text-align: left !important;
}
.tac {
  text-align: center !important;
}
.tar {
  text-align: right !important;
}
.pointer {
  cursor: pointer !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mt5 {
  margin-top: 5px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt15 {
  margin-top: 15px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt25 {
  margin-top: 25px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.ml0 {
  margin-left: 0 !important;
}
.ml5 {
  margin-left: 5px !important;
}
.ml10 {
  margin-left: 10px !important;
}
.mr0 {
  margin-right: 0 !important;
}
.mr5 {
  margin-right: 5px !important;
}
.mr10 {
  margin-right: 10px !important;
}
.mr20 {
  margin-right: 20px !important;
}
.mr30 {
  margin-right: 30px !important;
}
.mb5 {
  margin-bottom: 5px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.pt0 {
  padding-top: 0px !important;
}
.pt20 {
  padding-top: 20px !important;
}
.pb10 {
  padding-bottom: 10px !important;
}
.pl5 {
  padding-left: 5px !important;
}
.f11 {
  font: 11px dotum !important;
}
.nobg {
  background-image: url("") !important;
}
.bggray {
  background-color: #f5f5f5 !important;
}
.pl0 {
  padding-left: 0 !important;
}
.bold {
  font-weight: bold !important;
  letter-spacing: -1px !important;
}
.bold0 {
  font-weight: bold !important;
}
.ls0 {
  letter-spacing: 0 !important;
}
.lsm1 {
  letter-spacing: -1px !important;
}
.noborder {
  border: 0 none !important;
}
.noscrollbar {
  scrollbar-arrow-color: #fff;
  scrollbar-darkshadow-color: #fff;
  scrollbar-face-color: #fff;
  scrollbar-highlight-color: #fff;
  scrollbar-shadow-color: #fff;
  scrollbar-track-color: #fff;
  scrollbar-3dlight-color: #fff;
}

.gray {
  color: #999 !important;
}
.blue {
  color: #097dd5 !important;
}
.orange {
  color: #fe5908 !important;
}
.sky {
  color: #00baf5 !important;
}
.subf {
  color: #aaa !important;
}
.red {
  color: red !important;
}

.wordbreak {
  word-break: break-all;
  word-wrap: break-word;
}
.underline {
  text-decoration: underline !important;
}
.wrap {
  width: 936px;
  margin: 0 auto;
}

a {
  transition: all 0.3s;
}
a:hover {
  transition: all 0.3s;
}

/*##############################################################################################################
 * header
 *##############################################################################################################*/
#header {
  width: 100%;
  min-width: 936px;
}
#header .logo {
  display: block;
}
#header .logo > a {
  display: block;
  width: 180px;
  height: 52px;
  margin: 26px auto 23px;
  background: url(/img/20221024/header_logo.png) no-repeat 0 0 #fff;
  text-indent: -9999em;
}
.topmenu {
  width: 100%;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.topmenu__wrapper {
  width: 936px;
  margin: 0 auto;
}
.topmenu__wrapper > ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
}
.topmenu__wrapper > ul > li {
  position: relative;
}
.topmenu__wrapper > ul > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  font-family: "Nanum Square";
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -1px;
  color: #331;
}
.topmenu__wrapper > ul > li > a:hover {
  color: #000;
}
.topmenu__wrapper > ul > li > ul {
  position: absolute;
  top: 55px;
  left: 0;
  display: none;
  z-index: 9999;
  padding: 15px 25px;
  background-color: #fff;
  border-radius: 1.2em;
  box-shadow: 0 5px 10px #666;
}
.topmenu__wrapper > ul > li > ul a {
  display: block;
  padding: 8px 0;
  word-break: keep-all;
  color: #666;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-family: "Nanum Square";
  font-size: 15px;
  letter-spacing: -1px;
}
.topmenu__wrapper > ul > li > ul a:hover {
  color: #2286f9;
}

/*##############################################################################################################
 * container
 *##############################################################################################################*/
#default_container {
  width: 100%;
  min-width: 936px;
}
#default_container > .wrap {
  position: relative;
  overflow: hidden;
  width: 936px;
  min-height: 200px;
  margin: 0 auto;
}
#default_container .contents {
}

.breadcrumb {
  background-color: #313132;
  color: #fff;
  font-family: "Nanum Square";
  font-size: 16px;
}
.breadcrumb > .wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 66px;
}
.breadcrumb ul {
  display: flex;
  align-items: center;
  margin: 0 0 0 20px;
}
.breadcrumb li {
}
.breadcrumb li:first-child:before {
  margin: 0;
  content: "";
}
.breadcrumb li:before {
  margin: 0 6px 0 6px;
  content: ">";
  color: #fff;
}
.breadcrumb a.home {
  overflow: hidden;
  display: inline-block;
  width: 15px;
  height: 19px;
  background: url("/img/20221024/breadcrumb_icon_home.png") no-repeat 0 0
    #313132;
  text-indent: -9999em;
}
.breadcrumb li a {
  color: #fff;
}
.breadcrumb li:last-child a {
  color: #ffc649;
  font-weight: bold;
}

/*##############################################################################################################
 * footer
 *##############################################################################################################*/
#footer {
  clear: both;
  width: 100%;
  min-width: 936px;
  height: 280px;
  background-color: #313132;
  color: #fff;
  font-family: "Nanum Square", sans-serif;
}
#footer .logo {
  padding: 37px 0 33px;
}
#footer .logo > a {
  display: block;
  width: 182px;
  height: 54px;
  margin: 0 auto;
  background: url(/img/20221024/footer_logo.png) no-repeat 0 0 #313132;
  text-indent: -9999em;
}
#footer .quick {
  display: flex;
  justify-content: center;
  text-align: center;
}
#footer .quick a {
  color: #ffc649;
  font-size: 14px;
  font-weight: 600;
}
#footer .quick a:after {
  position: relative;
  top: -1px;
  margin: 0 6px;
  content: "|";
  color: #fff;
  font-weight: 600;
}
#footer .quick li:last-child a:after {
  display: none;
}
#footer .txt {
  margin: 15px 0 0 0;
  font-size: 14px;
}
#footer .txt dl {
  display: flex;
  justify-content: center;
  line-height: 1.35em;
}
#footer .txt dt {
  margin: 0 5px 0 0;
}
#footer .txt dd:after {
  position: relative;
  top: -1px;
  margin: 0 6px;
  content: "|";
  color: #fff;
  font-weight: 500;
}
#footer .txt dd:last-child:after {
  display: none;
}
#footer .txt dd > a.csn {
  margin: 0 0 0 8px;
  color: #00cdb2;
  font-weight: 600;
}
#footer .copyright {
  margin: 15px 0 0 0;
  text-align: center;
}

/*##############################################################################################################
 * main
 *##############################################################################################################*/
#main {
  position: relative;
  width: 100%;
  min-width: 936px;
}

/*##############################################################################################################
 * table
 *##############################################################################################################*/
.table01 {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
.table01 th {
  padding: 7px 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
}
.table01 td {
  padding: 7px 10px;
  border: 1px solid #ccc;
}

.table02 {
  border-top: 3px solid #ff6700;
  border-bottom: 3px solid #ff6700;
  border-collapse: collapse;
}
.table02 th {
  padding: 10px;
  border: 1px solid #ccc;
  border-left: 0;
  border-right: 1px solid #d1d1d1;
  color: #363636;
}
.table02 td {
  padding: 10px;
  border: 1px solid #ccc;
  border-right: 0;
  border-left: 1px solid #ff6700;
}
.table02 td input[type="text"] {
  padding: 5px;
  border: 1px solid #e2e2e2;
  background-color: #f6f6f6;
}
.table02 td input[type="password"] {
  padding: 5px;
  border: 1px solid #e2e2e2;
  background-color: #f6f6f6;
}
.table02 td select {
  padding: 5px 0;
}

.table03 {
  width: 100%;
  border-collapse: collapse;
  border-top: 3px solid #30566c;
}
.table03 th {
  padding: 10px 0;
  background-color: #ebeeef;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  text-align: center;
  font-weight: bold;
}
.table03 th:last-child {
  border-right: 0;
}
.table03 td {
  padding: 10px;
  background-color: #ffffff;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}
.table03 td:last-child {
  border-right: 0;
}

/* th 배경이 어두운 회색 */
.table04 {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
.table04 th {
  padding: 10px 10px 10px 25px;
  border: 1px solid #ccc;
  border-bottom: 1px solid #939393;
  background-color: #828282;
  color: #fff;
  text-align: left;
}
.table04 td {
  padding: 10px 10px;
  border: 1px solid #ccc;
}

.thcenter th {
  padding: 10px 0 !important;
  text-align: center !important;
}
.tdcenter td {
  padding: 10px 0 !important;
  text-align: center !important;
}

/*##############################################################################################################
 * floating banner
 *##############################################################################################################*/
#floating-banner {
  display: none;
  overflow: hidden;
  width: 100px;
  height: 460px;
  background-color: #fff;
  position: fixed;
  right: 30px;
  border: 0;
  border-radius: 5em;
  box-shadow: 0 10px 20px #ccc;
}
#floating-banner.mainpage {
  top: 190px;
}
#floating-banner.subpage {
  top: 260px;
}
#floating-banner ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 25px 0 0 0;
}
#floating-banner ul li a {
  display: block;
  overflow: hidden;
  width: 65px;
  height: 65px;
  line-height: 9.2em;
  font-family: "Nanum Square";
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
#floating-banner ul li.join a {
  margin: 0 0 10px 0;
  background: url(/img/20221024/float_banner_join.png) no-repeat 50% 0 #fff;
}
#floating-banner ul li.mypage a {
  margin: 0 0 10px 0;
  background: url(/img/20221024/float_banner_mypage.png) no-repeat 50% 0 #fff;
}
#floating-banner ul li.download a {
  margin: 0 0 15px 0;
  background: url(/img/20221024/float_banner_download.png) no-repeat 50% 0 #fff;
}
#floating-banner ul li.payment a {
  background: url(/img/20221024/float_banner_payment.png) no-repeat 50% 0 #fff;
  height: 58px;
  margin: 0 0 15px 0;
  line-height: 8.2em;
}
#floating-banner ul li.freetest a {
  margin: 0 0 15px 0;
  background: url(/img/20221024/float_banner_freetest.png) no-repeat 50% 0 #fff;
}
#floating-banner ul li.login a {
  background: url(/img/20221024/float_banner_login.png) no-repeat 50% 0 #fff;
  margin: 0 0 10px 0;
}
#floating-banner ul li.logout a {
  background: url(/img/20221024/float_banner_logout.png) no-repeat 50% 0 #fff;
  margin: 0 0 10px 0;
}
#floating-banner .movetop a {
  display: block;
  width: 65px;
  height: 37px;
  margin: 0px auto 0;
  background: url(/img/20221024/float_banner_movetop.png) no-repeat 50% 0 #fff;
  text-indent: -9999em;
}

.payment_wrapper {
  display: flex;
  justify-content: space-between;
  width: 936px;
  margin: 0 auto;
  padding: 40px 0 70px 0;
}
#default_container .aside {
  width: 183px;
  padding-bottom: 100px;
}
.payment_wrapper .myinfo {
  width: 714px;
}
#default_container .aside .topimage {
  width: 183px;
  height: 132px;
  margin-bottom: 23px;
  text-indent: -9999em;
}
#default_container .aside .topimage.payment {
  background: url("/img/201610/aside_topimage_payment.jpg");
}
#default_container .aside .topimage.bbs {
  background: url("/img/201610/aside_topimage_cs.jpg");
}
#default_container .aside .submenu a {
  display: block;
  height: 36px;
  text-indent: -9999em;
}
#default_container .aside .submenu a.product.dynamic {
  background-position: 0 0;
}
#default_container .aside .submenu a.product.proxy_static {
  background-position: 0 -36px;
}
#default_container .aside .submenu a.product.proxy_dynamic {
  background-position: 0 -72px;
}

#default_container .aside .paylink_submenu a {
  display: block;
  border-bottom: 1px solid #b2b2b2;
  height: 22px;
  padding: 10px 0 0 0;
  vertical-align: middle;
  color: #828282;
  font-weight: bold;
  font-size: 14px;
  font-family: "Nanum Gothic", sans-serif;
  text-decoration: none !important;
}

#default_container .aside .paylink_submenu a > p {
  margin: 0 0 0 30px;
  color: #828282;
  font-weight: bold;
  font-size: 14px;
  font-family: "Nanum Gothic", sans-serif;
  text-decoration: none !important;
}

#default_container .aside .paylink_submenu a > p:after {
  float: right;
  font-size: 10px;
  content: ">";
}

#default_container .aside .paylink_submenu a:hover {
  border-left: 6px solid #fd6500;
  text-decoration: none !important;
}

#default_container .aside .paylink_submenu a:hover p {
  margin: 0 0 0 24px;
  color: #fd6500;
  text-decoration: none !important;
}