@charset "utf-8";

/* web font */
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css); 
@import url(https://cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css);
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nanum+Myeongjo&family=Noto+Serif+KR:wght@200..900&family=Teko:wght@300..700&family=Tektur:wght@400..900&display=swap');

/*
  font-family: 'Nanum Gothic', sans-serif;
  font-family: 'Noto Sans KR', sans-serif;
  font-family: 'Nanum Square';
  font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif';
  font-family: "Inter", sans-serif;
*/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/*
10px  0.625rem
11px  0.6875rem
12px  0.75rem
13px  0.8125rem
14px  0.875rem
15px  0.9375rem
16px  1rem
*/

/*
  BootStrap Reset
*/

html {
  /*font-size: 0.8125rem;*/ /*13px*/
  font-size: 1rem; 
  overflow: hidden;
}
body, code, kbd {
  font-family: "Noto Sans KR", 'Noto Sans', sans-serif, "Nanum Gothic",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Nanum Square'; font-weight:600 !important; }

/* tooltip color change */
.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #FF0000;
  border-radius: 0.25rem;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #FF0000;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #FF0000;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #FF0000;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #FF0000;
}

/* Paging */
.page-link { color: #141414; background-color: #fff; border: 1px solid #dee2e6; }
.page-item.active .page-link { color: #fff;  background-color: #000; border-color: #000; }

.btn, .form-control { border-radius:0 !important;}

.ellipsis {
  position:relative; display:block; width:100%; white-space:nowrap; overflow:hidden;
  -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; text-overflow:ellipsis;
}


/***************************
  공통 상단메뉴
***************************/
html, body { position:relative; margin:0; padding:0; width: 100%; height:auto; }
#wrapper {
  position:relative; width: 100%; max-width: 600px; z-index:1; overflow: hidden;
  background-color:#fff; margin: 0 auto; border: 0px solid red;
  box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.3);font-family: "Noto Sans KR", 'Noto Sans', sans-serif;
}

.topbar { font-size:0; }
.topbar img { width:100%;}



/* 하단 퀵메뉴 */
#quick_bottom { position:fixed; bottom:0; width:100%; max-width: 600px; background-color:#D6D6D6; z-index:10; }
#quick_bottom .quick { position:relative; font-size: 0.875rem; display: flex; justify-content: center; align-items: center; letter-spacing: -1px;  }
#quick_bottom .quick div, #quick_bottom .quick a {
  position: relative; display: block; text-align: center; padding: 10px;
  font-family: "Noto Sans KR", 'Noto Sans', sans-serif, "Nanum Gothic";
}
#quick_bottom .quick .q1 { background-color:#2F2523; color:#fff; flex:1 }
#quick_bottom .quick .q2 { background-color:#7D5C4A; color:#fff; flex:1 }
#quick_bottom .quick .q3 { background-color:#452732; color:#fff; flex:1 }
#quick_bottom .quick .q4 { background-color:#828282; }
#quick_bottom .quick a { position: relative; display: block; width: 100%: height: 100%; color:#fff;  }
#quick_bottom .quick .bi { font-size:1.1rem; height: auto; padding: 0px 10px; margin: 0; line-height: 1;}


/* 오리발 */
.duck-box {
  position: relative; width:100%; padding:10px 0px;
}
ul.duck, div.duck { position: relative; display: block; list-style-type: none; padding: 0px 20px 0px; color: #7e7e7e;}
ul.duck li:before, div.duck > div:before {
  content: "※";
  margin-left: -1.1rem !important;
  margin-right: 3px;
}
ul.duck li.noduck, div.duck > div.noduck  { margin:0px -20px !important; }
ul.duck li.noduck:before, div.duck > div.noduck:before { content:''; margin-left: 0px !important;}
ul.duck li, div.duck > div { font-size: 0.875rem; color:#959595; letter-spacing:-.5px; word-break: keep-all;}
ul.duck li.blue, ul.duck li.blue, div.duck > div.blue, div.duck > div.blue { color:#005BB7;}
ul.duck li.red, ul.duck li.red, div.duck > div.red, div.duck > div.red { color:#cf0000;}
ul.duck li.b500, div.duck > div.b500 { font-weight: 500;}
ul.duck li.bold, div.duck > div.bold { font-weight: 600;}
ul.duck li.b700, div.duck > div.b700 { font-weight: 700;}


ul.duck li.dot:before, div.duck > div.dot:before {
  content: "· ";
  margin-left: -.7rem !important;
  margin-right: 3px;
}

ul.duck li.dash:before, div.duck > div.dash:before {
  content: "- ";
  margin-left: -.7rem !important;
  margin-right: 3px;
}

ul.duck li.hand:before, div.duck > div.hand:before {
  content: "☞";
  margin-left: -1.1rem !important;
  margin-right: 3px;
}

ul.duck li.square:before, div.duck > div.square:before {
  content: "■";
  margin-left: -1.1rem !important;
  margin-right: 3px;
}

ul.duck li.star:before, div.duck > div.star:before {
  content: "★";
  margin-left: -1.1rem !important;
  margin-right: 3px;
}


footer {
  position:relative; font-family: "Noto Sans KR", 'Noto Sans', sans-serif; background-color:#fff; border-top:1px solid #ccc; padding:20px 0 70px;
}
footer .btn-private { position: relative; margin-left: 10px; font-size: 0.875rem; color:#ACACAC; text-decoration: none; }

footer .copyright { position:relative; width:100%; font-size: 0.75rem; padding: 0 15px}
footer .copyright .sihang { position: relative; width: 95%;  padding: 10px 15px; }
footer .copyright .sihang img { }

footer .copyright .copy1 { padding: 15px 0; color:#fff; }
footer .copyright .copy1 { padding: 15px 0; color:#fff; }

footer .copyright .txt { position:relative; text-align:left; color:#666; letter-spacing:0px; }
footer .copyright .txt.text1 { margin-bottom: 0px}
footer .copyright .txt.text2 { letter-spacing:0px; margin:10px 0 10px }