@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: 'El Messiri'; }
.ft-f3 { font-family: 'nanumsquare'; }

/*Çѱ۰íµñ*/
.ft-f55 { font-family: 'nanumsquare'; }
/*Çѱ۰íµñ*/
.ft-f555 { font-family: 'nanumsquare'; }
/*Çѱ۸íÁ¶*/
.ft-f56 { font-family: 'KoPubWorld-Batang-Light'; }
/*¿µ¹®*/
.ft-f57 { font-family: 'OptimusPrinceps'; }



* {
  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;
  letter-spacing : ;
  word-spacing:2px;
  -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;
}
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: #cfcfcf; }
/*ÅÂȯ*/
.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: #b4a570; }
.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-c18-hover:hover, .hover-wrap:hover .ft-c19-hover, .selected.ft-c19-sel, .ft-sel-wrap.selected .ft-c19-sel 
{ color: #ffffff; }


.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: #ffffff; }
.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: #eaeaea; }
.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: #ac997d; }

.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) }
.tbg-clr-0-op6 { background-color: rgba(172, 153, 125, .9) }
.bd-rt-6-op6 { border-right: 1px solid rgba(185, 159, 144, .6) }
.bd-bt-6-op6 { border-bottom: 1px solid rgba(185, 159, 144, .6) }


.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(0, 0, 0, .3) }
.bd-c3-15 { border: 1.5px solid #f5dcbe; }
.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: #d4d4d4; }
.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; }

html { height: 100%; }
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 2.4vw; }
#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,.3);
}
.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 { background-color: #ffd9a5; margin: 0 10px; }
.swiper-pagination-bullet-active { background-color: #ffd9a5; }

.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:3px solid #cab8a3; 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-top: 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%;
	}
}

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

/*À¯ÅõºêºÒ·¯¿Ã¶§*/
.player {
		  padding-top: 56.25%;
		  position: relative;
		}
.player iframe {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		}
/*À¯ÅõºêºÒ·¯¿Ã¶§*/