@charset "utf-8";

  body {
	background-color:#F9F9F9;
	overflow-x: hidden;
  }
  
  #wrap {	padding: 10px; }

  button { border: none; background: none; cursor:pointer}
  
  .wp100{width:100% !important;}

  /* 셀렉트박스 */
  select { width: 150px; height: 38px; padding: 0px 10px; border: 1px solid #ccc; z-index: 1; 
    background: #fff url("../images/ico/ico-select.png") no-repeat right 10px center; 
    -webkit-appearance: none; 
    -moz-appearance: none;  
    appearance: none;
  }

  .lds-spinner {
	display: inline-block;
	position: fixed;top: 46%; left: 46%;
	width: 80px;
	height: 80px;
	display: none;
  }
  .lds-spinner div {
	transform-origin: 40px 40px;
	animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
	content: " ";
	display: block;
	position: absolute;
	top: 3px;
	left: 37px;
	width: 6px;
	height: 18px;
	border-radius: 20%;
	background: #222;
  }
  .lds-spinner div:nth-child(1) {
	transform: rotate(0deg);
	animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
	transform: rotate(30deg);
	animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
	transform: rotate(60deg);
	animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
	transform: rotate(90deg);
	animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
	transform: rotate(120deg);
	animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
	transform: rotate(150deg);
	animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
	transform: rotate(180deg);
	animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
	transform: rotate(210deg);
	animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
	transform: rotate(240deg);
	animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
	transform: rotate(270deg);
	animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
	transform: rotate(300deg);
	animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
	transform: rotate(330deg);
	animation-delay: 0s;
  }
  @keyframes lds-spinner {
	0% {
	  opacity: 1;
	}
	100% {
	  opacity: 0;
	}
  }

  #fontList td {
    vertical-align: top;
    width: 2%;
  }
  
  table#fontList {
    border-collapse: initial;
	  border-spacing: 15px;
  }
  /*
  div.listing {
	-moz-columns: 23em;
	-webkit-columns: 23em;
	columns: 23em;
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;
	column-gap: 1em;
  }
  */
  div.listing article {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	/* Firefox is dumb */
	break-inside: avoid;
  }
  
  /* pretty it up! */
  div.listing article {
	/* -moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em; */
	border:1px solid #EDEDED;
	margin: 1em 0;
	background-color: #FFF;
	padding: 1.5em;
  }
  
  div.listing article:first-child { margin-top: 0; }

  div.listing article:hover { box-shadow: 1px 1px 20px #eee; }
  /* 
  div.listing article:nth-child(odd) {
	background-color: #ffff99;
  } */

  @font-face {font-family:AsiaSAMPLE; 
	src:url('../webfonts/AsiaSAMPLE.woff') format('woff');
  }

  @font-face {font-family:AsiaSAM1; 
    src:url('../webfonts/AsiaSAM1.woff') format('woff');
  }
  
  @font-face {font-family:AsiaSAM2; 
    src:url('../webfonts/AsiaSAM2.woff') format('woff');
  }
  
  @font-face {font-family:AsiaSAM3; 
    src:url('../webfonts/AsiaSAM3.woff') format('woff');
  }
  
  @font-face {font-family:AsiaSAM4; 
    src:url('../webfonts/AsiaSAM4.woff') format('woff');
  }

  @font-face {font-family:AsiaGD12R; 
  src:url('../webfonts/AsiaGD12R.woff') format('woff');
  }
  
  @font-face {font-family:AsiaGD15R; 
  src:url('../webfonts/AsiaGD15R.woff') format('woff');
  }

  @font-face {font-family:AsiaBRSGR; 
    src:url('../webfonts/AsiaBRSGR.woff') format('woff');
  }

  div.listing article div:nth-child(1){
    display: flex;
    justify-content: space-between;
    margin: 0 10;
  }
  
  div.listing article div:nth-child(1) > p {
    font-family:AsiaGD15R;
    font-size:20px;
    margin: 0;
  }
  
  div.listing article div:nth-child(1) > p > #mod_font { 
    width: 30px; 
    height: 30px; 
    font-size: 20px; 
    background: url("../images/ico/settings.png") no-repeat right 0px center; 
    cursor: pointer; 
  }

  div.listing article div:nth-child(1) > button {
    background: none;  
    width: 90px;
    height: 30px;
    border: none;
    cursor: pointer;
    font-size: 18px; 
  }
 
  div.listing article div:nth-child(1) > button.uninstall { color:#1473E6; }

  div.listing article div:nth-child(1) > button.noinstall { position: relative; }

  div.listing article div:nth-child(1) > button.noinstall:hover .balloon { display: inline; }

  div.listing article div:nth-child(1) > button.noinstall > div.balloon { 
    display: none;
    position: absolute;
    padding-top: 5px;
    font-family:AsiaGD15R;
    font-size:15px;
    color: #959595;
    background-color: #fff;
    width:220px; height:30px; right : 0%; top : 100%; margin-top : 9px;
    border: 1px solid #9f9f9f;
    border-radius: 6px;
    animation: float 1s linear;
  }

  div.listing article div:nth-child(1) > button.noinstall > div.balloon:after { 
    border-bottom: 6px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: -5px;  right : 40px;
    content: "";
    position: absolute;
  }

  div.listing article div:nth-child(1) > button.noinstall > div.balloon:before { 
    border-bottom: 6px solid #9f9f9f;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: -7px;  right : 40px;
    content: "";
    position: absolute;
  }
  
  @keyframes float {
    0% {
      transform: translateY(-7px);
    }
    50% {
      transform: translateY(-4px);
    }
    100% {
      transform: translateY(0);
    }
  }

  div.listing article div:nth-child(2) {
	font-family:AsiaSAMPLE;
	/* font-size:150px; */
	padding-top:12px;
	padding-bottom:12px;
	overflow:hidden;
  cursor: pointer;
  }
  
  div.listing article div:nth-child(2) pre { overflow-x: hidden; }

  div.listing article div:nth-child(3) {
	border-top:1px solid #EDEDED;
	font-family:AsiaGD12R;
	color:#959595;
	padding-top:1.3em;
	font-size:15px;
	line-height: 1.5em;
  }
  
  #fixed_mark {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 99;
	cursor: pointer;
  }
  
  * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; letter-spacing: -0.025em; }

  #head { display: flex; padding: 20px; justify-content: space-between; }

  .fontTitle { display: flex; }
  .fontTitle h1 { font-size: xx-large; margin: 0 0 0 20px;}
  .fontDown { margin-left: 15px; z-index: 98; }
  .fontDown > button { padding: 0px 20px; height: 40px; font-size: 15px; border: 1px solid #ccc; border-radius: 30px; }
  .fontDown > button i { font-size: 15px; color: #111; margin-right: 5px; }

  /* .fontSelect { display: flex; padding: 20px; justify-content: space-between;} */
  .fontSearch { margin-left: -110px; padding: 0px 5px; border: 1px solid #ccc; border-radius: 10px; width: 300px; height: 40px; background-color: #fff; }
  .fontSearch input[type="text"] { 
      width: calc(100% - 30px); border: none; height: 38px;  outline: 0; font-family:AsiaGD12R; color:#959595; font-size:15px; 
      -webkit-ime-mode:active; -moz-ime-mode:active; -ms-ime-mode:active; ime-mode:active;
  }
  .fontSearch .btnSubmit { margin-top: -10px; text-indent: -9999px; width: 20px; height: 20px; background: url("../images/ico/ico-search.png") no-repeat; background-size: 20px 20px; vertical-align: baseline; }

  .fontCategory #reg_font { width: 30px; height: 30px; font-size: 18px; background: url("../images/ico/settings.png") no-repeat right 0px center; }
  .fontCategory #free_font { width: 156px; height: 36px; font-size: 18px; background: url("../images/ico/free_btn.png") no-repeat right 10px center; }
  .fontCategory .cateSelect { width: 34px; height: 33px; font-size: 18px; background: url("../images/ico/menu.png") no-repeat right 0px center; }
  .fontCategory .cateSelect.active { background: url("../images/ico/menu.png") no-repeat right 0px center;}
  .fontCategory > ul { display: none; position: absolute; z-index: 99; width: 120px; right: 37px; margin: 0; padding: 0;background: #f3f3f3; border: 1px solid #8f8f8f;}
  .fontCategory > ul > li { list-style: none; line-height: 40px; }
  .fontCategory > ul > li.sepa { border-top: 5px solid #8f8f8f; }
  .fontCategory > ul > li > button {width: 100%; padding: 0px 20px; height: 43px; text-align: left; font-family:AsiaGD15R; font-size: 18px; }
  .fontCategory > ul > li > button:hover { color: #f3f3f3; background: #1473e6; }
  
  #mask { position:absolute;z-index:9000; background-color:#888;display:none;left:0;top:0; opacity: 0.5; filter: opacity(50);}
  .acc-pop { position: fixed; z-index: 9999; left: 50%; top: 50%; margin-top: -85px; margin-left: -190px; width: 380px; height: 170px; right: 0px; padding: 20px 10px; border: 1px solid #c9ced0; background: #f0f0f0; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; display:none;}
  .acc-pop .btn-close { position: absolute; right: 10px; top: 10px; width: 17px; height: 17px; text-indent: 100%; overflow: hidden; white-space: nowrap; background: url(../images/ico/ico-close.png) no-repeat;}
  .acc-pop .msg-bx { display: table; width: 100%; height: 80px; }
  .acc-pop .msg-txt { display: table-cell; vertical-align: middle; font-size: 16px; color: #555555; text-align: center; line-height: 1.5; padding-top: 3px; }
  .acc-pop .gauge-bx { display: table; width: 254px; height: 50px; margin-left: 53px; margin-top: -5px; }
  .acc-pop .gauge-bd { display: inline-block; width:100%; height: 21px; background-color: #E6E6E6; border-radius: 4px; border: 1px solid #BCBCBC;}
  .acc-pop .gauge { display: inline-block; width:0%; height: 19px; background-color: #3286E9; border-radius: 4px; transition: 1s linear; }

  .acc-pop2 { position: fixed; z-index: 9999; left: 50%; top: 50%; margin-top: -85px; margin-left: -190px; width: 380px; height: 170px; right: 0px; padding: 20px 10px; border: 1px solid #c9ced0; background: #f0f0f0; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; display:none;}
  .acc-pop2 .btn-close { position: absolute; right: 10px; top: 10px; width: 17px; height: 17px; text-indent: 100%; overflow: hidden; white-space: nowrap; background: url(../images/ico/ico-close.png) no-repeat;}
  .acc-pop2 .msg-bx { display: table; width: 100%; height: 100%; }
  .acc-pop2 .msg-txt { display: table-cell; vertical-align: middle; font-size: 16px; color: #555555; text-align: center; line-height: 2; }

  .pop-btn-set { margin-top: 1px; text-align: center; }
  .pop-btn-set a { display: inline-block; font-size: 15px; color: #fff !important; padding: 0px 30px; line-height: 40px; height: 40px; background: #888; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;  }
  .pop-btn-set a:hover { background: #930029; }
  .pop-btn-set a.cancel { background: #7e7f80; }
  .pop-btn-set a.cancel:hover {background: #636465;}
    
  .popup { position: fixed; z-index: 9999; left: 50%; top: 50%; background: #fff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
  .popup strong { display: block; padding-left: 20px; font-size: 18px; color: #000000; font-weight: normal; height: 60px; line-height: 60px; background: #f0f0f0; border-radius: 10px 10px 0px 0px; -moz-border-radius:  10px 10px 0px 0px; -webkit-border-radius:  10px 10px 0px 0px; }
  .popup .btn-close { display: inline-block; position: absolute; right: 10px; top: 17px; width: 35px; height: 35px; text-indent: -9999px; background: url(../images/ico/ico-close.png) no-repeat;}
  .popup01 { width:900px; height:480px; margin-left: -450px; margin-top: -250px; }	/* 사용권계약 */
  .popup02 { width:900px; height:600px; margin-left: -450px; margin-top: -300px; }	/* 로그인 도움말 */
  .popup03 { width:960px; height:640px; margin-left: -480px; margin-top: -320px; }	/* 미리보기 */
  .popup04 { width:900px; height:600px; margin-left: -450px; margin-top: -300px; }	/* 마이페이지 */
  .popup05 { width:700px; height:350px; margin-left: -350px; margin-top: -175px; }  /* 설정 */
  .popup06 { width:700px; height:380px; margin-left: -350px; margin-top: -190px; }
  .popup07 { width:700px; height:600px; margin-left: -350px; margin-top: -300px; }
  .popup08 { width:700px; height:300px; margin-left: -350px; margin-top: -150px; }
  .popup09 { width:700px; height:500px; margin-left: -350px; margin-top: -250px; }  /* 폰트리스트정보 */
  .popup10 { width:700px; height:860px; margin-left: -350px; margin-top: -395px; }  /* 폰트샘플정보 */
  .pop-bx { padding: 0 20px;}
  .pop-bx > ul > li { margin-top: 10px;}
  .pop-bx > ul > li > span { display: inline-block; padding-left: 10px; font-size: 15px; color: #000000; background: url(../images/ico/ico-dot.png) no-repeat left 9px;; }
  .p-txt { margin-top: 75px; font-size: 14px; line-height: 22px;  text-align: center; }
  .p-txt span { font-weight: bold; color: #930029; }

  .fontControl { display: inline-block; position: absolute; top: 10px; right: 100px; width: 170px; height: 24px; }
  .fontControl .sizeControl { display: flex; }
  .fontControl .sizeControl div { width: 70px; text-align: center; line-height: 40px; font-size: 18px; }
  .fontControl .sizeControl #slider { margin-top: 15px; width: 100px; }

  .pop-btn-set2 { margin-top: 20px; text-align: center; }
  .pop-btn-set2 a { display: inline-block; font-size: 15px; color: #fff !important; padding: 0px 30px; line-height: 40px; height: 40px; background: #888; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;  }
  .pop-btn-set2 a:hover { background: #930029; }
  .pop-btn-set2 a.cancel { background: #7e7f80; }
  .pop-btn-set2 a.cancel:hover {background: #636465;}

  .tbl-type01 { margin-top: 10px; border-bottom: 1px solid #ddd;}
  .tbl-type01 tbody th { padding:8px 10px; text-align: center; font-size: 18px; color: #000000;  font-weight: 400; background: #f3f3f3; border-top: 1px solid #ddd; letter-spacing: -0.04em; }
  .tbl-type01 tbody td { position: relative; padding:8px 10px; font-size: 14px; color: #555555; text-align: left; border-top: 1px solid #ddd; letter-spacing: -0.04em; }
  .tbl-type01 input[type="text"] {height: 34px; line-height: 34px}
  .tbl-type01 input[type="radio"] + label	{font-size:13px;}
  .tbl-center.tbl-type01 tbody td,.tbl-center.tbl-type01 thead th { text-align: center; padding: 0px 10px; height: 36px; }
  .tbl-center.tbl-type01 tbody td input[type="radio"] + label,.tbl-center.tbl-type01 tbody td input[type="radio"] + label span { margin-right: 0px; }

  .tbl-type02 { margin-top: 10px; border-bottom: 1px solid #ddd;}
  .tbl-type02 tbody th { padding:8px 10px; text-align: left; font-size: 14px; color: #000000;  font-weight: 400; background: #f3f3f3; border-top: 1px solid #ddd; letter-spacing: -0.04em; }
  .tbl-type02 tbody td { position: relative; padding:8px 10px; font-size: 14px; color: #555555; text-align: left; border-top: 1px solid #ddd; letter-spacing: -0.04em; }
  .tbl-type02 input[type="text"] {height: 34px; line-height: 34px}
  .tbl-type02 input[type="radio"] + label	{font-size:13px;}
  .tbl-center.tbl-type02 tbody td,.tbl-center.tbl-type02 thead th { text-align: center; padding: 0px 10px; height: 36px; }
  .tbl-center.tbl-type02 tbody td input[type="radio"] + label,.tbl-center.tbl-type02 tbody td input[type="radio"] + label span { margin-right: 0px; }

  .file-bx { position:relative; }
  input.upload_text { float:left; width: 433px; height: 34px;  }
  div.upload-btn_wrap input.input_file { width: 140px; height: 34px; line-height: 34px; position:absolute; right: 0px; cursor: pointer; opacity:0; filter:alpha(opacity=0); -ms-filter:"alpha(opacity=0)"; -moz-opacity:0;}
  div.upload-btn_wrap { overflow:hidden; position:relative;}
  div.upload-btn_wrap button { margin-left: 5px; width: 70px; line-height: 32px; font-size: 13px; color: #000; background: #f0f0f0; border: 1px solid #dddddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; }
  div.upload-btn_wrap button.active { background: #ddd; }
  .file-txt { margin-top: 5px;}
  .file-txt .btn-delete { display: inline-block; width: 17px; height: 17px; text-indent: -9999px; vertical-align: middle; background: url(../images/ico/ico-close2.png) no-repeat; }

  .fontClickView { height: 640px; overflow-y: hidden; }
  .fontClickView > ul { transition: 0.5s; }
  .fontClickView > ul > li { position: relative; padding: 30px 40px; border-top: 1px solid #eaeaea;}
  .fontClickView > ul > li:first-child { border-top: none; }
  .fontClickView > ul > li > .fontName { font-family: 'AsiaGD15R'; font-size: 18px; display: flex;color: #4B4B4B;justify-content: space-between; }
  .fontClickView > ul > li > .fontName span { font-size: 16px; margin-left: 10px; color: #B8B8B8; font-weight: 300; }
  .fontClickView > ul > li > .fontName select { font-family: 'AsiaGD15R'; font-size: 18px; color: #4B4B4B; width: 200px; }
  
  .fontName { display: inline-block; }
  .fontName .famSelect { width: 180px; height: 37px; text-align: left; font-family: 'AsiaGD15R'; font-size: 18px; padding: 7px 10px; border: 2px solid #c0c0c0; background: url("../images/ico/ico-agr-arr2.png") no-repeat right 6px center; }
  .fontName .famSelect.active { background: url("../images/ico/ico-agr-arr.png") no-repeat right 6px center;}
  .fontName > ul { display: none; position: absolute; z-index: 99; width: 180px; left: 40px; top: 66px; margin: 0; padding: 0;background: #f3f3f3; border: 1px solid #8f8f8f;}
  .fontName > ul > li { list-style: none; line-height: 40px; }
  .fontName > ul > li.sepa { border-top: 10px solid #8f8f8f; }
  .fontName > ul > li > button {width: 100%; padding: 0px 20px; height: 43px; text-align: left; font-family:AsiaGD15R; font-size: 18px; }
  .fontName > ul > li > button:hover { color: #f3f3f3; background: #1473e6; }

  .fontClickView .fontInfo {  margin-top: 12px; }
  .fontClickView .fontInfo > ul > li { margin-top: 5px; font-size: 18px; color: #777; font-weight: 300; }
  .fontClickView .fontInfo > ul > li > ul  { display: flex; }
  .fontClickView .fontInfo > ul > li > ul > li { margin-left: 20px; font-size: 18px; }
  .fontClickView .fontInfo > ul > li > ul > li:first-child { margin-left: 0px; }

  .fontClickView .fontSample > textarea { border: 2px solid #c0c0c0; width: 880px; height: 400px; overflow: scroll; resize: none; line-height: 1.29em;}
  .fontClickView .fontSample > textarea::placeholder { font-size: 60px; color: black; }
  .fontClickView .fontStyle { margin-top: 5px; word-break: break-word; }

  .dlg_top_icons { display: inline-block; position: absolute; left: 14px; top: 15px; }

  .radio_select { padding: 5px 60px; }
  .radio_select input[type=radio]{ display: none;}
  .radio_select input[type=radio]+label{
      display: inline-block;
      cursor: pointer;
      height: 40px;
      width: 150px;
      border: 1px solid #333;
      line-height: 40px;
      text-align: center;
      font-weight:bold;
      font-size:18px;
  }
  .radio_select input[type=radio]+label{
      background-color: #fff;
      color: #333;
  }
  .radio_select input[type=radio]:checked+label{
      background-color: #333;
      color: #fff;
  }
  .radio_select input[type=radio]:disabled+label{
    background-color: #dadada;
    color: #acacac;
  }