body {background: url({{$template}}/img/main_bg.jpg) no-repeat top center;} 
img {border:0}
td {line-height:150%;color:333333;font-size:12;font-family:±¼¸²,µ¸¿ò}
input {font-size:12px;font-family:µ¸¿ò;color:555555}
input#border {font-size:12px;font-family:µ¸¿ò;color:666666;border:1 solid #C4C4C4}
textarea#border {font-size:12px;font-family:µ¸¿ò;color:666666;border:1 solid #C4C4C4}
select {color:333333;font-size:12;font-family:±¼¸²,µ¸¿ò}
.sub_txt {color:000000;background:f7f7f7}

a:link{line-height:150%;color:333333;font-size:12;font-family:±¼¸²,µ¸¿ò;text-decoration:none}
a:visited{line-height:150%;color:333333;font-size:12;font-family:±¼¸²,µ¸¿ò;text-decoration:none}
a:hover{line-height:150%;color:333333;font-size:12;font-family:±¼¸²,µ¸¿ò;text-decoration:underline}

.pagenum {color:FF5500;font-weight:bold;}
.pagenum a:link{color:555555;font-weight:normal;text-decoration:none}
.pagenum a:visited{color:555555;font-weight:normal;text-decoration:none}
.pagenum a:hover{color:555555;font-weight:normal;text-decoration:underline}


.img1 {border:5 solid #E7E3E7}
.img2 {border:1 solid #CECFCE;width:159;height:130;margin:6 0 6 0;text-align:center;text-valign:middle}
.moni {color:FF6F72}
.news {color:333333;font-family:µ¸¿ò,±¼¸²;font-size:12;letter-spacing:-1;text-decoration:none}
.news a:link{color:333333;font-family:µ¸¿ò,±¼¸²;font-size:12;letter-spacing:-1;text-decoration:none}
.news a:visited{color:333333;font-family:µ¸¿ò,±¼¸²;font-size:12;letter-spacing:-1;text-decoration:none}
.news a:hover{color:FF6F72;font-family:µ¸¿ò,±¼¸²;font-size:12;letter-spacing:-1;text-decoration:underline}

.btr {background:efefef;text-align:right}
.btl {background:efefef;text-align:left}
.btc {background:efefef;text-align:center}
.bcl {text-align:left}
.bbsc {padding:20;border-top:1 solid #999999}


.topmenu {color:BDBDBD;font-family:µ¸¿ò;font-size:10px}
.topmenu a:link{color:555555;text-decoration:none;font-family:µ¸¿ò;font-size:11px}
.topmenu a:visited{color:555555;text-decoration:none;font-family:µ¸¿ò;font-size:11px}
.topmenu a:hover{color:555555;text-decoration:underline;font-family:µ¸¿ò;font-size:11px}


.history {text-align:right;color:888888;font-family:µ¸¿ò;font-size:11px}

.left_main {margin:0 0 0 32}
.left_sub {margin:9 0 0 44}
.f_sub {margin:6 6 6 0 }

/*°´½Çº¸±â À̹ÌÁö div*/
#preview {position:relative; float:left;text-align:center;margin:10px}
#preview img {border:1px solid #D1D1D1;margin-bottom:5px}
#preview a:link {font-weight:bold;text-decoration:none;color:#565656}
#preview a:visited {font-weight:bold;text-decoration:none;color:#565656}
#preview a:hover {font-weight:bold;text-decoration:none;color:#565656}


/*¿¹¾à¸ðµâ Å×À̺í js»ö»ó¼öÁ¤*/
#app_td1 {text-align:center;background:#84B3E5;font-weight:bold}
#app_td1 td {color:#ffffff}
.app_td1 {background:#84B3E5;font-weight:bold;color:#ffffff}
.app_td2 {background:#F3F1EA;font-weight:bold;padding:2 0 0 10;color:#565656}
.app_td3 {text-align:center;color:#555555}
.app_td3_sum {text-align:center;color:#3DA21B;font-weight:bold}

.img_scroll {border:1px solid #D1D1D1;margin-bottom:5px}




/*static html*/
/* Slideshow container */
.slideshow-container {
  max-width: 1440px;
  position: relative;
  margin: auto;
  margin-top: 120px;
}

/* effect */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}




.footer {color:FFFFFF;font-family:µ¸¿ò;font-size:10px}
.footer a:link {color:FFFFFF;text-decoration:none;font-family:µ¸¿ò;font-size:12px}
.footer a:visited{color:FFFFFF;text-decoration:none;font-family:µ¸¿ò;font-size:12px}
.footer a:hover{color:FFFFFF;text-decoration:none;font-family:µ¸¿ò;font-size:12px}








/* À̹ÌÁö·Ñ¸µ ½ºÅ©¸³Æ®ºÎºÐ Ãß°¡ 2023*/

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}


/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Caption text */
.text {
  color: #000000;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}


.active {
  background-color: #717171;
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}


@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}