@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Myeongjo&display=swap');
@import url('https://fonts.googleapis.com/css?family=El+Messiri&display=swap');
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@latest/nanumbarungothicsubset.css");
@import url("https://fonts.googleapis.com/earlyaccess/jejumyeongjo.css");
@import url('//cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css');
@import url("http://fonts.googleapis.com/earlyaccess/notosanskr.css");


/*Çѱ۰íµñ*/
@font-face {
    font-family: 'Pretendard-light';
    font-style: normal;
    font-weight: 400;
    src: url(http://test20.onionnet.co.kr/font/Pretendard-light.woff) format("woff"),  
}

/*Çѱ۸íÁ¶*/
@font-face {
    font-family: 'KoPubWorld-Batang-Light';
    font-style: normal;
    font-weight: 400;
    src: url(http://test20.onionnet.co.kr/font/KoPubWorld-Batang-Light.woff) format("woff"),  
}

/*¿µ¹®*/
@font-face {
    font-family: 'OptimusPrinceps';
    font-style: normal;
    font-weight: 400;
    src: url(http://test20.onionnet.co.kr/font/OptimusPrinceps.woff) format("woff"),  
}


.ft-f0 { font-family: 'nanumsquare'; }
.ft-f1 { font-family: 'Nanum Myeongjo'; }
.ft-f2 { font-family: 'Noto Sans KR'; }
.ft-f3 { font-family: 'nanumsquare'; }

/*Çѱ۰íµñ*/
.ft-f55 { font-family: 'Noto Sans KR'; }
/*Çѱ۰íµñ*/
.ft-f555 { font-family: 'Noto Sans KR'; }
/*Çѱ۸íÁ¶*/
.ft-f56 { font-family: 'Noto Sans KR'; }
/*¿µ¹®*/
.ft-f57 { font-family: 'Noto Sans KR'; }




* {
  box-sizing: border-box;
  /* word-break: break-all;
  word-break: keep-all; */
  }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, 
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, 
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
  {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

  ul { list-style: none; }
  a { color: inherit; text-decoration: none; }

html
  {
  font-family: 'nanumsquare', sans-serif;
  color: #7f7f7f;
  font-weight: 300;
  line-height: 1.4;
  }

html { height: 100%; }
html { scroll-behavior: smooth; }


  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder 
  { /* Chrome/Opera/Safari */
  font-family: 'nanumsquare';
  color: #7f7f7f;
  font-weight: 400;  
  }

  input::-moz-placeholder,
  textarea::-moz-placeholder 
  { /* Firefox 19+ */
  font-family: 'nanumsquare';
  font-weight: 400;
  color: #7f7f7f;
  }

  input::-ms-input-placeholder,
  textarea::-ms-input-placeholder 
  { /* Edge */
  font-family: 'nanumsquare';
  font-weight: 400;
  color: #7f7f7f;
  }

  input:-moz-placeholder,
  textarea:-moz-placeholder 
  { /* Firefox 18- */
  font-family: 'nanumsquare';
  font-weight: 400;
  color: #7f7f7f;
  }

  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder 
  { /* IE 10+ */
  font-family: 'nanumsquare';
  font-weight: 400;
  color: #7f7f7f;
  }

.ft-mi 
  { 
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: skew(-0.001deg);
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga'; 
  }

.ft-mio 
  { 
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: skew(-0.001deg);
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga'; 
  }

.ft-mit 
  { 
  font-family: 'Material Icons Two Tone';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: skew(-0.001deg);
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga'; 
  }

::selection 
  {
  background: #956044;
  color: #FFF;
  text-shadow: none;
  }

::-moz-selection 
  {
  background: #956044;
  color: #FFF;
  text-shadow: none;
  }

::-webkit-selection 
  {
  background: #956044;
  color: #FFF;
  text-shadow: none;
  }

.ft-rd { color: #ff0000; }

.ft-wh, .ft-hover-wrap:hover .ft-wh-hover, .ft-wh-hover:hover, .hover-wrap:hover .ft-wh-hover, .selected.ft-wh-sel, .ft-sel-wrap.selected .ft-wh-sel 
{ color: #fff; }

.ft-bk, .ft-hover-wrap:hover .ft-bk-hover, .ft-bk-hover:hover, .hover-wrap:hover .ft-bk-hover, .selected.ft-bk-sel, .ft-sel-wrap.selected .ft-bk-sel 
{ color: #000; }

.ft-bk0, .ft-hover-wrap:hover .ft-bk0-hover, .ft-bk0-hover:hover, .hover-wrap:hover .ft-bk0-hover, .selected.ft-bk0-sel, .ft-sel-wrap.selected .ft-bk0-sel 
{ color: #211726; }

.ft-lg, .ft-hover-wrap:hover .ft-lg-hover, .ft-lg-hover:hover, .hover-wrap:hover .ft-lg-hover, .selected.ft-lg-sel, .ft-sel-wrap.selected .ft-lg-sel 
{ color: #ebedf4; }

.ft-lg0, .ft-hover-wrap:hover .ft-lg0-hover, .ft-lg0-hover:hover, .hover-wrap:hover .ft-lg0-hover, .selected.ft-lg0-sel, .ft-sel-wrap.selected .ft-lg0-sel 
{ color: #f6f6f6; }

.ft-gr, .ft-hover-wrap:hover .ft-gr-hover, .ft-gr-hover:hover, .hover-wrap:hover .ft-gr-hover, .selected.ft-gr-sel, .ft-sel-wrap.selected .ft-gr-sel 
{ color: #ddd; }

.ft-gr0, .ft-hover-wrap:hover .ft-gr0-hover, .ft-gr0-hover:hover, .hover-wrap:hover .ft-gr0-hover, .selected.ft-gr0-sel, .ft-sel-wrap.selected .ft-gr0-sel 
{ color: #ccc; }

.ft-gr1, .ft-hover-wrap:hover .ft-gr1-hover, .ft-gr1-hover:hover, .hover-wrap:hover .ft-gr1-hover, .selected.ft-gr1-sel, .ft-sel-wrap.selected .ft-gr1-sel 
{ color: #b2b2b2; }

.bg-clr-wh, .bg-clr-wh-hover:hover, .bg-hover-wrap:hover .bg-clr-wh-hover, .bg-clr-wh-bf::before, .bg-clr-wh-af::after, .bg-clr-wh-sel.selected, .bg-clr-wrap.selected .bg-clr-wh-sel 
{ background-color: #fff; }

.bg-clr-bk, .bg-clr-bk-hover:hover, .bg-hover-wrap:hover .bg-clr-bk-hover, .bg-clr-bk-bf::before, .bg-clr-bk-af::after, .bg-clr-bk-sel.selected, .bg-clr-wrap.selected .bg-clr-bk-sel 
{ background-color: #000; }

.bg-clr-bk0, .bg-clr-bk0-hover:hover, .bg-hover-wrap:hover .bg-clr-bk0-hover, .bg-clr-bk0-bf::before, .bg-clr-bk0-af::after, .bg-clr-bk0-sel.selected, .bg-clr-wrap.selected .bg-clr-bk0-sel 
{ background-color: #211726; }

.bg-clr-lg, .bg-clr-lg-hover:hover, .bg-clr-lg-bf::before, .bg-clr-lg-af::after, .bg-clr-lg-sel.selected, .bg-clr-wrap.selected .bg-clr-lg-sel 
{ background-color: #ebedf4; }

.bg-clr-lg0, .bg-clr-lg0-hover:hover, .bg-clr-lg0-bf::before, .bg-clr-lg0-af::after, .bg-clr-lg0-sel.selected, .bg-clr-wrap.selected .bg-clr-lg0-sel 
{ background-color: #f6f6f6; }

.bg-clr-gr, .bg-clr-gr-hover:hover, .bg-clr-gr-bf::before, .bg-clr-gr-af::after, .bg-clr-gr-sel.selected, .bg-clr-wrap.selected .bg-clr-gr-sel 
{ background-color: #ddd; }

.bg-clr-gr0, .bg-clr-gr0-hover:hover, .bg-clr-gr0-bf::before, .bg-clr-gr0-af::after, .bg-clr-gr0-sel.selected, .bg-clr-wrap.selected .bg-clr-gr0-sel 
{ background-color: #ccc; }

.bg-clr-gr1, .bg-clr-gr1-hover:hover, .bg-clr-gr1-bf::before, .bg-clr-gr1-af::after, .bg-clr-gr1-sel.selected, .bg-clr-wrap.selected .bg-clr-gr1-sel 
{ background-color: #b2b2b2; }


.ft-c0, .ft-hover-wrap:hover .ft-c0-hover, .ft-c0-hover:hover, .hover-wrap:hover .ft-c0-hover, .selected.ft-c0-sel, .ft-sel-wrap.selected .ft-c0-sel 
{ color: #2e1d12; }

.ft-c1, .ft-hover-wrap:hover .ft-c1-hover, .ft-c1-hover:hover, .hover-wrap:hover .ft-c1-hover, .selected.ft-c1-sel, .ft-sel-wrap.selected .ft-c1-sel 
{ color: #956044; }

.ft-c2, .ft-hover-wrap:hover .ft-c2-hover, .ft-c2-hover:hover, .hover-wrap:hover .ft-c2-hover, .selected.ft-c2-sel, .ft-sel-wrap.selected .ft-c2-sel 
{ color: #e4976f; }

.ft-c3, .ft-hover-wrap:hover .ft-c3-hover, .ft-c3-hover:hover, .hover-wrap:hover .ft-c3-hover, .selected.ft-c3-sel, .ft-sel-wrap.selected .ft-c3-sel 
{ color: #f5dcbe; }

.ft-c4, .ft-hover-wrap:hover .ft-c4-hover, .ft-c4-hover:hover, .hover-wrap:hover .ft-c4-hover, .selected.ft-c4-sel, .ft-sel-wrap.selected .ft-c4-sel 
{ color: #fff8f0; }

.ft-c5, .ft-hover-wrap:hover .ft-c5-hover, .ft-c5-hover:hover, .hover-wrap:hover .ft-c5-hover, .selected.ft-c5-sel, .ft-sel-wrap.selected .ft-c5-sel 
{ color: #fbf7e4; }

.ft-c6, .ft-hover-wrap:hover .ft-c6-hover, .ft-c6-hover:hover, .hover-wrap:hover .ft-c6-hover, .selected.ft-c6-sel, .ft-sel-wrap.selected .ft-c6-sel 
{ color: #b99f90; }

.ft-c7, .ft-hover-wrap:hover .ft-c7-hover, .ft-c7-hover:hover, .hover-wrap:hover .ft-c7-hover, .selected.ft-c7-sel, .ft-sel-wrap.selected .ft-c7-sel 
{ color: #c6805c; }

.ft-c8, .ft-hover-wrap:hover .ft-c8-hover, .ft-c8-hover:hover, .hover-wrap:hover .ft-c8-hover, .selected.ft-c8-sel, .ft-sel-wrap.selected .ft-c8-sel 
{ color: #c1c71e; }

.ft-c9, .ft-hover-wrap:hover .ft-c9-hover, .ft-c9-hover:hover, .hover-wrap:hover .ft-c9-hover, .selected.ft-c9-sel, .ft-sel-wrap.selected .ft-c9-sel 
{ color: #8d624c; }

.ft-c10, .ft-hover-wrap:hover .ft-c10-hover, .ft-c10-hover:hover, .hover-wrap:hover .ft-c10-hover, .selected.ft-c10-sel, .ft-sel-wrap.selected .ft-c10-sel 
{ color: #000000; }

.ft-c11, .ft-hover-wrap:hover .ft-c11-hover, .ft-c11-hover:hover, .hover-wrap:hover .ft-c11-hover, .selected.ft-c11-sel, .ft-sel-wrap.selected .ft-c11-sel 
{ color: #433525; }


/*ÅÂȯ*/
.ft-c12, .ft-hover-wrap:hover .ft-c12-hover, .ft-c12-hover:hover, .hover-wrap:hover .ft-c12-hover, .selected.ft-c12-sel, .ft-sel-wrap.selected .ft-c12-sel 
{ color: #ffffff; }

.ft-c13, .ft-hover-wrap:hover .ft-c13-hover, .ft-c13-hover:hover, .hover-wrap:hover .ft-c13-hover, .selected.ft-c13-sel, .ft-sel-wrap.selected .ft-c13-sel 
{ color: #433525; }

.ft-c14, .ft-hover-wrap:hover .ft-c14-hover, .ft-c14-hover:hover, .hover-wrap:hover .ft-c14-hover, .selected.ft-c14-sel, .ft-sel-wrap.selected .ft-c14-sel 
{ color: #585858; }

.ft-c15, .ft-hover-wrap:hover .ft-c15-hover, .ft-c15-hover:hover, .hover-wrap:hover .ft-c15-hover, .selected.ft-c15-sel, .ft-sel-wrap.selected .ft-c15-sel 
{ color: #9f8663; }

.ft-c16, .ft-hover-wrap:hover .ft-c16-hover, .ft-c16-hover:hover, .hover-wrap:hover .ft-c16-hover, .selected.ft-c16-sel, .ft-sel-wrap.selected .ft-c16-sel 
{ color: #ababab; }

.ft-c17, .ft-hover-wrap:hover .ft-c17-hover, .ft-c17-hover:hover, .hover-wrap:hover .ft-c17-hover, .selected.ft-c17-sel, .ft-sel-wrap.selected .ft-c17-sel 
{ color: #1a1a1a; font-weight:500 ;}

.ft-c18, .ft-hover-wrap:hover .ft-c18-hover, .ft-c18-hover:hover, .hover-wrap:hover .ft-c18-hover, .selected.ft-c18-sel, .ft-sel-wrap.selected .ft-c18-sel 
{ color: #6f6f6f; }

.ft-c19, .ft-hover-wrap:hover .ft-c19-hover, .ft-c19-hover:hover, .hover-wrap:hover .ft-c18-hover, .selected.ft-c19-sel, .ft-sel-wrap.selected .ft-c19-sel 
{ color: #3c3939; }

.ft-c20, .ft-hover-wrap:hover .ft-c20-hover, .ft-c20-hover:hover, .hover-wrap:hover .ft-c20-hover, .selected.ft-c20-sel, .ft-sel-wrap.selected .ft-c20-sel 
{ color: #e73454; }

.ft-c21, .ft-hover-wrap:hover .ft-c21-hover, .ft-c21-hover:hover, .hover-wrap:hover .ft-c21-hover, .selected.ft-c21-sel, .ft-sel-wrap.selected .ft-c21-sel 
{ color: #2d62cc; }
.ft-c22, .ft-hover-wrap:hover .ft-c22-hover, .ft-c22-hover:hover, .hover-wrap:hover .ft-c22-hover, .selected.ft-c22-sel, .ft-sel-wrap.selected .ft-c22-sel 
{ color: #2d3247; }


.bg-clr-content, .bg-clr-content-hover:hover, .bg-hover-wrap:hover .bg-clr-content-hover, .bg-clr-content-bf::before, .bg-clr-content-af::after, .bg-clr-content-sel.selected, .bg-clr-wrap.selected .bg-clr-content-sel 
{ background-color: #ffffff; }

.bg-clr-bottom, .bg-clr-bottom-hover:hover, .bg-hover-wrap:hover .bg-clr-bottom-hover, .bg-clr-bottom-bf::before, .bg-clr-bottom-af::after, .bg-clr-bottom-sel.selected, .bg-clr-wrap.selected .bg-clr-bottom-sel 
{ background-color: #f7f7f7; }

.bg-clr-basic, .bg-clr-basic-hover:hover, .bg-hover-wrap:hover .bg-clr-basic-hover, .bg-clr-basic-bf::before, .bg-clr-basic-af::after, .bg-clr-basic-sel.selected, .bg-clr-wrap.selected .bg-clr-basic-sel 
{ background-image: url('/img/sub/basic_icon.png'); background-position: center bottom;} 

.bg-clr-click, .bg-clr-click-hover:hover, .bg-hover-wrap:hover .bg-clr-click-hover, .bg-clr-click-bf::before, .bg-clr-click-af::after, .bg-clr-click-sel.selected, .bg-clr-wrap.selected .bg-clr-click-sel 
{ background-image: url('/img/sub/click_icon.png'); background-position: center bottom;} 

/*ÅÂȯ*/


.bg-clr-0, .bg-clr-0-hover:hover, .bg-hover-wrap:hover .bg-clr-0-hover, .bg-clr-0-bf::before, .bg-clr-0-af::after, .bg-clr-0-sel.selected, .bg-clr-wrap.selected .bg-clr-0-sel 
{ background-color: #33363f; } 

.bg-clr-1, .bg-clr-1-hover:hover, .bg-hover-wrap:hover .bg-clr-1-hover, .bg-clr-1-bf::before, .bg-clr-1-af::after, .bg-clr-1-sel.selected, .bg-clr-wrap.selected .bg-clr-1-sel 
{ background-color: #956044; }

.bg-clr-2, .bg-clr-2-hover:hover, .bg-hover-wrap:hover .bg-clr-2-hover, .bg-clr-2-bf::before, .bg-clr-2-af::after, .bg-clr-2-sel.selected, .bg-clr-wrap.selected .bg-clr-2-sel 
{ background-color: #e4976f; }

.bg-clr-3, .bg-clr-3-hover:hover, .bg-hover-wrap:hover .bg-clr-3-hover, .bg-clr-3-bf::before, .bg-clr-3-af::after, .bg-clr-3-sel.selected, .bg-clr-wrap.selected .bg-clr-3-sel 
{ background-color: #f5dcbe; }

.bg-clr-4, .bg-clr-4-hover:hover, .bg-hover-wrap:hover .bg-clr-4-hover, .bg-clr-4-bf::before, .bg-clr-4-af::after, .bg-clr-4-sel.selected, .bg-clr-wrap.selected .bg-clr-4-sel 
{ background-color: #f2f0e9; }

.bg-clr-5, .bg-clr-5-hover:hover, .bg-hover-wrap:hover .bg-clr-5-hover, .bg-clr-5-bf::before, .bg-clr-5-af::after, .bg-clr-5-sel.selected, .bg-clr-wrap.selected .bg-clr-5-sel 
{ background-color: #fbf7e4; }

.bg-clr-6, .bg-clr-6-hover:hover, .bg-hover-wrap:hover .bg-clr-6-hover, .bg-clr-6-bf::before, .bg-clr-6-af::after, .bg-clr-6-sel.selected, .bg-clr-wrap.selected .bg-clr-6-sel 
{ background-color: #fff8f0; }

.bg-clr-7, .bg-clr-7-hover:hover, .bg-hover-wrap:hover .bg-clr-7-hover, .bg-clr-7-bf::before, .bg-clr-7-af::after, .bg-clr-7-sel.selected, .bg-clr-wrap.selected .bg-clr-7-sel 
{ background-color: #c6805c; }

.bg-clr-8, .bg-clr-8-hover:hover, .bg-hover-wrap:hover .bg-clr-8-hover, .bg-clr-8-bf::before, .bg-clr-8-af::after, .bg-clr-8-sel.selected, .bg-clr-wrap.selected .bg-clr-8-sel 
{ background-color: #e7e4da; }

.bg-clr-9, .bg-clr-9-hover:hover, .bg-hover-wrap:hover .bg-clr-9-hover, .bg-clr-9-bf::before, .bg-clr-9-af::after, .bg-clr-9-sel.selected, .bg-clr-wrap.selected .bg-clr-9-sel 
{ background-color: #b4a570; }

.bg-clr-10, .bg-clr-10-hover:hover, .bg-hover-wrap:hover .bg-clr-10-hover, .bg-clr-10-bf::before, .bg-clr-10-af::after, .bg-clr-10-sel.selected, .bg-clr-wrap.selected .bg-clr-10-sel 
{ background-color: rgba(0, 0, 0, .5) } 

.bg-clr-11, .bg-clr-11-hover:hover, .bg-hover-wrap:hover .bg-clr-11-hover, .bg-clr-11-bf::before, .bg-clr-11-af::after, .bg-clr-11-sel.selected, .bg-clr-wrap.selected .bg-clr-11-sel 
{ background-color: rgba(255, 255, 255, .3) }

.bg-clr-12, .bg-clr-12-hover:hover, .bg-hover-wrap:hover .bg-clr-12-hover, .bg-clr-12-bf::before, .bg-clr-12-af::after, .bg-clr-12-sel.selected, .bg-clr-wrap.selected .bg-clr-12-sel 
{ background-color: #b2b2b2; }

.bg-clr-13, .bg-clr-13-hover:hover, .bg-hover-wrap:hover .bg-clr-13-hover, .bg-clr-13-bf::before, .bg-clr-13-af::after, .bg-clr-13-sel.selected, .bg-clr-wrap.selected .bg-clr-13-sel 
{ background-color: #9f8663; }

.bg-clr-14, .bg-clr-14-hover:hover, .bg-hover-wrap:hover .bg-clr-14-hover, .bg-clr-14-bf::before, .bg-clr-14-af::after, .bg-clr-14-sel.selected, .bg-clr-wrap.selected .bg-clr-14-sel 
{ background-color: #efefef; }

.bg-clr-0-op6 { background-color: rgba(46, 29, 18, .6) }
.bg-clr-0-op8 { background-color: rgba(46, 29, 18, .8) }
.bg-clr-0-op1 { background-color: rgba(1, 1, 1, .3) }
.bg-clr-6-op6 { background-color: rgba(185, 159, 144, .6) }
.bg-clr-6-op4 { background-color: rgba(185, 159, 144, .4) }
.bd-rt-6-op6 { border-right: 1px solid rgba(185, 159, 144, .6) }
.bd-bt-6-op6 { border-bottom: 1px solid rgba(229, 229, 229, .6) }

.bg-clr-wh-op5 { background-color: rgba(255, 255, 255, .5) }
.bg-clr-bk-op6 { background-color: rgba(24, 25, 26, .6) }
.bg-clr-bk-op8 { background-color: rgba(0, 0, 0, .8) }
.bg-clr-bk-op5 { background-color: rgba(0, 0, 0, .5) }
.bg-clr-bk-op3 { background-color: rgba(218, 219, 220, .9) }
.bg-clr-bk-op4 { background-color: rgba(233, 189, 190, .9) }
.bd-c3-15 { border: 1.5px solid #dbdbdb; }
.hover-wrap:hover .bd-wh-hover { border-color: #fff; }

.svg-c0 svg, .svg-c0 { stroke: #2e1d12; }
.svg-c1 svg, .svg-c1 { stroke: #956044; }
.svg-c2 svg, .svg-c2 { stroke: #e4976f; }
.svg-c3 svg, .svg-c3 { stroke: #f5dcbe; }
.svg-c4 svg, .svg-c4 { stroke: #fff8f0; }
.svg-c5 svg, .svg-c5 { stroke: #fbf7e4; }
.svg-c6 svg, .svg-c6 { stroke: #b99f90; }
.svg-c7 svg, .svg-c7 { stroke: #c6805c; }
.svg-c8 svg, .svg-c8 { stroke: #c1c71e; }

.svg-f0 svg, .svg-f0, .hover-wrap:hover .svg-f0-hover { fill: #2e1d12; }
.svg-f1 svg, .svg-f1, .hover-wrap:hover .svg-f1-hover { fill: #956044; }
.svg-f2 svg, .svg-f2, .hover-wrap:hover .svg-f2-hover { fill: #e4976f; }
.svg-f3 svg, .svg-f3, .hover-wrap:hover .svg-f3-hover { fill: #9f8663; }
.svg-f4 svg, .svg-f4, .hover-wrap:hover .svg-f4-hover { fill: #fff8f0; }
.svg-f5 svg, .svg-f5, .hover-wrap:hover .svg-f5-hover { fill: #fbf7e4; }
.svg-f6 svg, .svg-f6, .hover-wrap:hover .svg-f6-hover { fill: #b99f90; }
.svg-f7 svg, .svg-f7, .hover-wrap:hover .svg-f7-hover { fill: #c6805c; }
.svg-f8 svg, .svg-f8, .hover-wrap:hover .svg-f8-hover { fill: #c1c71e; }

.svg-rd svg, .svg-rd, .hover-wrap:hover .svg-rd-hover { fill: #ff0000; }
.svg-wh svg, .svg-wh, .hover-wrap:hover .svg-wh-hover { fill: #fff; }

.pd-tmenu { padding-top: 0px; }
.mg-tmenu { margin-top: 0px; }



body 
	{
	font-size: 14px;
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
    word-break: keep-all;
	}

body.hidden 
	{
	overflow-y: hidden;
	}

input,textarea,select 
	{
	padding: 3.5px 5px;
	border-width:1px; 
	border-style:solid; 
	border-color:#D6D6D6; 
	height:33px;
	vertical-align:middle;
	outline: none;
	}

#head-area 
	{
	z-index: 98;
	position: fixed;
	/*position: absolute;*/
	top: 0;
	left: 0;
	width: 100%;
	}

#logo-area-head { min-width: 120px; }
.logo 
	{
	width: 100%;
	padding-top: 30%;
	background-image: url('/img/logo/logo.png');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	}


#menu-cont .sub-menu-list-wrap 
	{
	position: absolute;
	bottom: -12px;
	left: 50%;
	min-width: 100%;
	visibility: hidden;
	/*border-top: 4px solid #11ff5f;*/
	opacity: 0;
	/*transform: translate(-50%, calc(100% + 10px));*/
	transform: translate(-50%, 100%);
	transition: .3s .2s;
	}

#menu-cont .menu-item:hover .sub-menu-list-wrap 
	{
	bottom: 0px;
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 100%);
	}

#menu-cont .menu-item:hover .sub-menu-list-wrap { z-index: 1; }

#menu-cont .sub-menu-list .sub-menu-item 
	{
	/*border-bottom: 1px solid #006b38;*/
	opacity: 0;
	transition: .3s;
	}

#menu-cont .sub-menu-list .sub-menu-item:last-child { border-bottom: 1px solid transparent; }
#menu-cont .menu-item:hover .sub-menu-item,
#menu-cont .menu-item.selected .sub-menu-item
	{
	opacity: 1;
	transition: opacity .3s .35s;
	}

.menu-item::before 
	{
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 0px;
	margin-left: .5px;
	background-color: #fff;
	transition: .3s;
	}

.menu-item:hover::before { height: 20px; }
.menu-item .item { padding: 30px 1.0vw; } /*vw¼öÄ¡°¡ ¸Þ´º°£°Ý*/
#menu-icon-area 
	{
	display: none;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	}

#menu-icon-area:hover #menu-wrap { transform: translate3d(-7px ,7px ,0); }
#menu-icon-area.on #menu-wrap 
	{
	transform: translate3d(5px ,-5px ,0);
	transition-timing-function: cubic-bezier(1,-3.59,0,4.52);
	transition: .1s;
	}

#menu-icon-area.on { transition: .3s .6s; }

#menu-icon li 
	{
	width: 30px;
	height: 2px;
	margin: 4px;
	background-color: #fff;
	}

#menu-icon li.line1 { animation: aniLine1dft .6s forwards; }
#menu-icon li.line2 { transition-duration: 0s; transition-delay: .3s; }
#menu-icon li.line3 { animation: aniLine3dft .6s forwards; }

@keyframes aniLine1dft 
	{
	0% {
		transform: translate3d(0,6px,0) rotateZ(135deg);
		}
	50% {
		transform: translate3d(0,6px,0) rotateZ(0deg);
		}
	100% {
		transform: translate3d(0,0,0) rotateZ(0deg);
		}
	}

@keyframes aniLine3dft 
	{
	0% {
		transform: translate3d(0,-6px,0) rotateZ(225deg);
		}
	50% {
		transform: translate3d(0,-6px,0) rotateZ(0deg);
		}
	100% {
		transform: translate3d(0,0,0) rotateZ(0deg);
		}
	}

#menu-icon-area.on li.line1 { animation: aniLine1 .6s forwards; }
#menu-icon-area.on li.line2 { opacity: 0; transition-duration: .2s; transition-delay: 0s; }
#menu-icon-area.on li.line3 { animation: aniLine3 .6s forwards; }

@keyframes aniLine1 
	{
	50% {
		/*transform: translate3d(0,6px,0) rotateZ(0deg);*/
		}
	
	100% {
		transform: translate3d(0,6px,0) rotateZ(135deg);
		}
	}

@keyframes aniLine3
	{
	50% {
		/*transform: translate3d(0,-6px,0) rotateZ(0deg);*/
		}
	100% {
		transform: translate3d(0,-6px,0) rotateZ(225deg);
		}
	}

#menu-content 
	{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	visibility: hidden;
	transition-property: z-index, visibility;
	transition-delay: .6s;
	overflow-x: auto;
	}

#menu-content.on 
	{
	z-index: 20;
	visibility: visible;
	transition-delay: 0s;
	}

#container 
	{
	z-index: 1;
	position: relative;
	width: 100%;
	}

#wrapper 
	{
	position: relative;
	overflow: hidden;
	/*min-height: 600px;*/
	}

.list-circle 
	{
	list-style-type: disc;
	list-style-position: inside;
	}

.list-circle .list-txt { margin-left: -8px; }
.innerline-00::before 
	{
	content: '';
	z-index: 2;
	position: absolute;
	top: 7px;
	left: 7px;
	bottom: 7px;
	right: 7px;
	border: 1px solid rgba(255,255,255,.7);
	}

.innerline-01::before 
	{
	content: '';
	z-index: 2;
	position: absolute;
	top: 7px;
	left: 7px;
	bottom: 7px;
	right: 7px;
	border: 1px solid rgba(195,189,185,.3);
	}

.hover-act-00-wrap:hover .hover-act-00-item 
	{
	transform: scale(1.1, 1.1);
	opacity: .6;
	}

.rise-ani-00 
	{
	transform: translateY(40px);
	opacity: 0;
	}

.scroll-active.on .rise-ani-00,
.scroll-active.on.rise-ani-00 
	{
	transform: translateY(0);
	opacity: 1;
	transition-duration: .9s;
	}

.rise-ani-00-immd 
	{
	transform: translateY(40px);
	opacity: 0;
	animation-name: rise-ani-00;
	animation-duration: .9s;
	animation-fill-mode: forwards;
	}

.sub-tab-list 
	{
	/*display: flex;*/
	position: relative;
	z-index: 1;
	transform: translateY(0%);
	overflow-x: auto;
	}

.sub-tab-list li { display: inline-block; } 

.swiper-container.gallery-top,
.swiper-container.gallery-thumbs
	{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/*height: 300px;*/
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	}

.swiper-container.gallery-thumbs 
	{
	position: relative;
	}

.swiper-slide 
	{
	background-size: cover;
	background-position: center;
	}

.gallery-top 
	{
	/*height: 80%;*/
	width: 100%;
	}

.swiper-pagination 
	{
	bottom: 20px;
	left: 0;
	width: 100%;
	transform: translateY(50%);
	}

.swiper-pagination-bullet { margin: 0 3px; background-color: #fff;}
.swiper-pagination-bullet-active { background-color: #fff; }

.gallery-thumbs { box-sizing: border-box; }
.gallery-thumbs .swiper-slide 
	{
	/*width: auto;*/
	height: 100%;
	opacity: 0.4;
	cursor: pointer;
	}

.gallery-thumbs .swiper-slide-thumb-active 
	{
	opacity: 1;
	}

.swiper-button-next, .swiper-button-prev 
	{
	width: 36px;
	height: 36px;
	margin-top: -13px;
	background-color: rgba(0,0,0,.4);
	}

.swiper-button-next:after, .swiper-button-prev:after 
	{
	font-size: 1.2em;
	}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 0; }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 0; }

@keyframes rise-ani-00 
	{
		0% {
		transform: translateY(40px);
		opacity: 0;
			}
		100% {
		transform: translateY(0);
		opacity: 1;
			}
	}


@media screen and ( max-width: 800px ) 
	{
	.sub-tab-list {
    justify-content: flex-start;
    align-items: flex-start;
				}
	.sub-tab-list li {
    width: auto;
				}
	}



#colortable {border-collapse:collapse}
#colortable td {border:1px solid #c8c8c8; padding:20px;}


/* µ¿Ãá ÀÔ·Â ½ÃÀÛ*/
/* ??*/
.board_list2				{clear: both; border-collapse: collapse; width:100%; margin:0px;  border-top:2px solid #858585}
.board_list2 tbody td.head	{color:#555; padding:8px 4px; background:#fff; border-bottom:#ddd 1px solid; line-height:170%;  font-size: 20px; font-weight:bold ; color: #145fb3;}
.board_list2 tbody td.no	{color:#555; padding:8px 4px; background:#fff; border-bottom:#ddd 1px solid; line-height:170%;  font-size:13px;}
.board_list2 tbody td.point	{color:#555; padding:8px 0 8px 20px; background:#fff; border-bottom:#ddd 1px solid; line-height:170%;  font-weight:600; font-size: 16px; font-weight:bold ;}
.board_list2 tbody td.nodashed	{color:#555; padding:8px 0px; background:#fff; border-bottom:#ddd 1px dashed; line-height:170%;  font-size:13px;}
.board_list2 tbody td.pointdashed	{color:#555; padding:8px 0px;  background:#fff; border-bottom:#ddd 0px dashed; line-height:170%;  font-size: 20px; font-weight:bold ; color: #145fb3;}

/* ??*/
.board_list3				{clear: both; border-collapse: collapse; width:100%; min-width: 600px;margin:0px; background:#6890b0; border-right:#ddd 1px solid;  border-top:0px solid #858585}
.board_list3 tbody td.head	{color:#555; padding:8px 0px; background:#fff; border-bottom:#ddd 1px solid; border-right:#ddd 1px solid; border-left:#ddd 1px solid; line-height:170%;  font-size: 20px; font-weight:bold ; color: #145fb3;}
.board_list3 tbody td.no	{color:#555; padding:8px 10px; background:#fff; border-bottom:#ddd 1px solid; border-right:#ddd 1px solid;  line-height:170%;  font-size:13px;}
.board_list3 tbody td.point	{color:#555; padding:8px 0 8px 20px; background:#fff; border-bottom:#ddd 1px solid; line-height:170%;  font-weight:600; font-size: 16px; font-weight:bold ;}
.board_list3 tbody td.nodashed	{color:#555; padding:8px 0px; background:#fff; border-bottom:#ddd 1px dashed; line-height:170%;  font-size:13px;}
.board_list3 tbody td.pointdashed	{color:#555; padding:8px 0px;  background:#fff; border-bottom:#ddd 0px dashed; line-height:170%;  font-size: 20px; font-weight:bold ; color: #145fb3;}


.board_list4 {clear: both; border-collapse: collapse; width:100%; margin:0px;  border-top:2px solid #858585}

.board_list4 tbody td { text-align: center; }
.board_list4 tbody td.first {
	width: 20%;
}
.board_list4 tbody td.left { text-align: left; }
.board_list4 tbody td.head	{color:#555; padding:8px 0px; background:#fff; border-bottom:#ddd 1px solid; line-height:170%;  font-size: 20px; font-weight:bold ; color: #195190;}
.board_list4 tbody td.head1	{color:#555; padding:8px 0px; background:#858585; border-bottom:#858585 2px solid; line-height:170%;  font-size: 14px; font-weight:bold ; color: #145fb3;}
.board_list4 tbody td.head2	{color:#555; padding:8px 0px; background:#ffffff; border-bottom:#858585 2px solid; line-height:170%;  font-size: 20px; font-weight:bold ; color: #195190;}
.board_list4 tbody td.no	{color:#555; padding:8px 0px; background:#fff; border-bottom:#ddd 1px solid; line-height:170%;  font-size:13px;}
.board_list4 tbody td.point	{color:#555; padding:8px 0 8px 20px; background:#fff; border-bottom:#ddd 1px solid; line-height:170%;  font-weight:600; font-size: 16px; font-weight:bold ;}
.board_list4 tbody td.nodashed	{color:#555; padding:8px 0px; background:#fff; border-bottom:#ddd 1px dashed; line-height:170%;  font-size:13px;}
.board_list4 tbody td.pointdashed	{color:#555; padding:8px 0 8px 0px; background:#fff; border-bottom:#ddd 1px dashed; line-height:170%;  font-weight:600; font-size: 16px; font-weight:bold ;}
.board_list4 tbody td.key {
	width: 20%;
	text-align: left;
}
.board_list4 tbody td.value {
	width: 80%;
}
.board_list4 tbody .detail-top td.key {
	width: 10%;
}
.board_list4 tbody .detail-top td.value {
	width: 40%;
} 
/*µ¿Ãá ¶óÀιڽº*/
.board_list4 {
	width: 100%;
	border: 2px solid #858585;
	
}
.board_list4 .row {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
   	-webkit-flex-wrap: wrap;
   	padding: 5px;
   	border-bottom: 1px dashed #858585;
}
.board_list4 .row span {
	display: inline-block;
}
.board_list4 .field {
	
	border-bottom: 2px solid #858585;
}
.board_list4 .num {
	width: 6%;
}
.board_list4 .subject {
	width: 48%;
}
.board_list4 .name {
	width: 10%;
}
.board_list4 .regDate {
	width: 16%;
}
.board_list4 .file {
	width: 14%;
}
.board_list4 .ref {
	width: 6%;
}

.page-bar-row {
   	border-top: 1px dashed #c3c3c3;
   	border-bottom: 1px dashed #c3c3c3;
}
.page-bar-row td.right a {
	margin-right: 0px;
}
.page-bar {
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	
	display: flex;
	display: -webkit-flex;
	display: -ms-flexbox;
	
	flex-flow: wrap;
   	-webkit-flex-flow: wrap;
   	-ms-flex-wrap: wrap;
   	padding:0px;
}
.page-bar .searchForm {
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	
	display: flex;
	display: -webkit-flex;
	display: -ms-flexbox;
	
	align-items: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	
	flex-flow: wrap;
   	-webkit-flex-flow: wrap;
   	-ms-flex-wrap: wrap;
   	
	width: 100%;
	max-width: 480px;
	padding: 0px;
}
.page-bar .searchForm input,
.page-bar .searchForm select {
	margin: .5%;
}
.page-bar .searchForm .searchKey {
	width: 34%;
	padding: 7px 0;
}
.page-bar .searchForm .searchText {
	width: 50%;
}
.page-bar .searchForm .searchBtn {
	width: 45px;
	border:0;
}
.page-bar .page-area {
	width: 70%;
	padding: 10px 0;
	text-align: center;
}
.board_list4.news td.num {
	width: 5%;
	padding: 10px 0;
}
.board_list4.news td.subject {
	width: 50%;
	padding: 10px 0;
}
.board_list4.news td.name {
	width: 15%;
	padding: 10px 0;
}
.board_list4.news td.regDate {
	width: 15%;
	padding: 10px 0;
}
.board_list4.news td.file {
	width: 5%;
	padding: 10px 0;
}
.board_list4.news td.ref {
	width: 10%;
	padding: 10px 0;
}
.board-detail-flex.news {
	margin-bottom: 20px;
	border-bottom: 2px solid #858585;
}
.board-detail-flex.news .row.wide {
	border: none;
}
.board-detail-flex.news .row span.key {
	width: 50px;
}




/* ÅÂȯ Ãß°¡ ½ÃÀÛ*/
.board-detail-flex {
	font-size: 16px;
	margin: 20px 0;
	padding: 10px 0;
	border-top: 2px solid #333;
	border-bottom: 2px solid #333;
}
.board-detail-flex .row.wide {
	width: 100%;
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
   	-webkit-flex-wrap: wrap;
}
.board-detail-flex .row.half {
	display: flex;
	display: -webkit-flex;
	width: 50%;
}
.board-detail-flex .row .key {
	display: inline-block;
	width: 80px;
}


.opacitytt {
    opacity: .3;
}

/* ÅÂȯ Ãß°¡ ³¡*/





.dotline {  
          display: block;
          height: 10px;
          width: 100%;
          margin-top: 0px;   
          margin-bottom: 13px; 
          border-top: 0px dashed #091f5c;  
          border-bottom: 2px solid #7d7d7d; 
         }

.dotline2{  
         display: block;
         height: 5px;
         width: 100%;
         margin-top: 0px; 
         margin-bottom: 5px; 
         border-top: 0px dashed #091f5c;  
         border-bottom: 1px dashed #c3c3c3; 
         }

.button02{
		 text-indent:0px;
		 line-height:10px;
		 text-align:center;
		 vertical-align:middle;
		 display:inline-block;
		 font-size:13px;
		 color:#454545;
		 /* width:40px;
		 height:10px; */
		 padding:8px;
		 border-color:#b0b0b0;
		 BACKGROUND-COLOR: #E6E6EA;
		 border-width:1px;
		 border-style:solid;
		 }



/*sub*/
#submain {}
#subtop {width:100%; border-bottom:1px solid #dfdfdf;}
#subtop li{line-height:40px; margin-left:30px;}
#subcontents {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
   	-webkit-flex-wrap: wrap;
   	
	padding: 40px 29px;
}
#subcontents li{
	margin-top:0px;
	font-size: 15px;
	color: #72737b;
	font-weight:400;
    width: 100%;
}  /*º»¹®ÀϹÝÅؽºÆ®Å©±â*/


#subcontents li.subleft{
	font-size: 25px;
	font-weight: bold;
	color: #333333;
	width: 100%;
}              /*º»¹®Å¸ÀÌƲÅؽºÆ®Å©±â*/
.over-x {
	overflow-y: hidden;
	overflow-x: auto;
}
.over-cont {
	min-width: 600px;
}
    
@media screen and (max-width: 480px) {
	#main01right a,
	#main02left a {
		display: block;
		width: 100%;
	}
	#main03left,
	#main03right {
		padding: 40px 20px;
	}
	#subcontents {
		padding: 40px 20px;
	}
}


@media screen and (max-width:800px){
	.subbighead  {font-size: 20px;}
	.board_list4 .row.field {
		display: none;
	}
	#gallery-board .gb-list {
		width: 50%;
	}
	.board-detail-flex .row.half {
		width: 100%;
	}
	
	.board_list4 .row span {
	    line-height: 1.6em;
	}
	.board_list4 .subject,
	.board_list4 .name,
	.board_list4 .regDate {
		width: 100%;
	}
	.board_list4 .subject {
		font-size: 1.2em;
		font-weight: 600;
	}
	.board_list4 .subject a {
		margin-left: -4px;
	}
	.board_list4 .row .num,
	.board_list4 .row .file,
	.board_list4 .row .ref {
		display: none;
	}
}
@media screen and (max-width:520px) {
	#gallery-board .gb-list {
		width: 100%;
	}
}

/* µ¿Ãá ÀÔ·Â ³¡*/