body, th, td, form, input, select, text, textarea, caption { font-size: 15px; font-family:굴림;}

a:link, a:active, a:visited { text-decoration: none; color : #000000; }
a:hover { text-decoration: none; color : #FF9900; }

a.menu:link, a.menu:active, a.menu:visited { text-decoration: none; color : #000000; }
a.menu:hover { text-decoration: none; color : #F26522; }

.top_menu { color:#ffffff;}

.tablebg { background-color:#D0D0D3; }

.tdsl { color:#333333; background-color:#E6E9EA; font-weight: bold; text-align: left}
.tdsc { color:#333333; background-color:#E6E9EA; font-weight: bold; text-align: center}
.tdsr { color:#0C1D38; background-color:#E3E3E7; text-align: center;}

.mout  { color:#333333; background-color:#FFFFFF; }
.mover { color:#000000; background-color:#FFFAE4; }

.point { color:#F15549; }
.amount { color:#F15549; }
.subtitle { color:#0091AF; font-weight: bold;}

.text { border-color:#C8C8C8; border-style:solid; border-width:1px; }
.text2 { border-color:#cccccc; border-style:solid; border-width:1px; }
.button { background-color: #EBEBEB;    clip:  rect(1px auto auto 1px); }

.line    { background-color:#888888; }
.line2   { background-image: url(line_w.gif); }
.poll    { background-color:#73C046; }
.board   { font-size: 11px; color:#666666}
.faq     { color:#929B3D}

 /* 제목 */
h1 {text-size-adjust: none; box-sizing: border-box; margin: 0px 0px 50px; padding: 0px; 
  font-weight: bolder; border-bottom: 1px solid rgb(221, 221, 221);
  font-size: 18px;
  color:#333333;
}
 /* 소제목 */
h1_1 {text-size-adjust: none; box-sizing: border-box; margin: 0px; padding: 0px; text-align: left !important; font-weight: bolder;
  font-size: 17px;
  color: #330000;
}


 /* 본문 */
h2 { text-size-adjust: none; box-sizing: border-box; margin: 0px; padding: 0px; text-align: left !important; 
 font-size: 15px;
  color:#444444;
}

 /* 테이블타입 1 */
table.type1 {
  border-collapse: collapse;
  text-align: left;
  line-height: 1.5;

}
table.type1 thead th {
  padding: 10px;
  font-weight: bold;
  vertical-align: top;
  color: #369;
  border-bottom: 3px solid #036;
}
table.type1 tbody th {
  width: 150px;
  padding: 10px;
  font-weight: bold;
  vertical-align: top;
  border-bottom: 1px solid #ccc;
  background: #f3f6f7;
}
table.type1 td {
  width: 350px;
  padding: 10px;
  vertical-align: top;
  border-bottom: 1px solid #ccc;
}


nav {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  background: #1E6B4B;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#main-menu > li {
  float: left;
  position: relative;
}

#main-menu > li > a {
  font-size: 1.05rem;
  color:#FFFFFF;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05em;
  display: block;
  padding: 20px 30px;
  border-right: 1px solid rgba(0,0,0,0.15);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

#main-menu > li >  a:hover {
 font-size: 1.05rem;
 color:#FF6600;
}


#main-menu > li:nth-child(1) > a {
  border-left: 1px solid rgba(0,0,0,0.15);
}

#sub-menu {
  position: absolute;
  left:0;
  background: #1E6B4B;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease-in;
}

#sub-menu > li {
  padding: 16px 28px;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

#sub-menu > li >  a {
  font-size: 0.97rem;    
  color: #FFFFFF;
  text-decoration: none;
}

#main-menu > li:hover #sub-menu {
  opacity: 1;
  visibility: visible;
}

#sub-menu > li >  a:hover {
 color:#FF6600;
}

section {
  column-width: 12em;
  background: #dadadf;
  padding: 2em 12em;
}

 /* 매인 탑 배너  */
.slide {
  /* layout */
  display: flex;
  flex-wrap: nowrap;
  
  /* 컨테이너의 내용물이 컨테이너 크기(width, height)를 넘어설 때 보이지 않도록 하기 위해 hidden을 준다. */
  overflow: hidden;

  /* position */
  /* slide_button의 position absolute가 컨테이너 안쪽에서 top, left, right offset이 적용될 수 있도록 relative를 준다. (기본값이 static인데, static인 경우 그 상위 컨테이너로 나가면서 현재 코드에선 html을 기준으로 offset을 적용시키기 때문) */
  position: relative;

  /* size */
  width: 100%;

  /* slide drag를 위해 DOM요소가 드래그로 선택되는것을 방지 */
  user-select: none;
}
.slide_item {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: center;

  /* position - 버튼 클릭시 left offset값을 적용시키기 위해 */
  position: relative;
  left: 0px;

  /* size */
  width: 100%;
  height: 300px;
  /* flex item의 flex-shrink는 기본값이 1이므로 컨테이너 크기에 맞게 줄어드는데, 슬라이드를 구현할 것이므로 줄어들지 않도록 0을 준다. */
  flex-shrink: 0;

  /* transition */
  transition: left 0.15s;
}
.slide_button {
  /* layout */
  display: flex;
  justify-content: center;
  align-items: center;

  /* position */
  position: absolute;
  /* 버튼이 중앙에 위치하게 하기위해 계산 */
  top: calc(50% - 16px);

  /* size */
  width: 32px;
  height: 32px;

  /* style */
  border-radius: 100%;
  background-color: #cccc;
  cursor: pointer;
}

.slide_prev_button {
  left: 10px;
}
.slide_next_button {
  right: 10px;
}

/* 각 슬라이드가 변경되는 것을 시각적으로 확인하기 쉽도록 각 슬라이드별 색상 적용 */
.slide_item.item1 {
  background-color: #FFFFFF;
}
.slide_item.item2 {
  background-color: #FFFFFF;
}
.slide_item.item3 {
  background-color: #FFFFFF;
}
.slide_item.item4 {
  background-color: #FFFFFF ;
}
.slide_item.item5 {
  background-color: #FFFFFF;
}

/* 페이지네이션 스타일 */
ul,
li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.slide_pagination {
  /* layout */
  display: flex;
  gap: 5px;

  /* position */
  position: absolute;
  bottom: 0;
  /* left:50%, translateX(-50%)를 하면 가로 가운데로 위치시킬 수 있다. */
  left: 50%;
  transform: translateX(-50%);
}
.slide_pagination > li {
  /* 현재 슬라이드가 아닌 것은 투명도 부여  특수문자가 나와서 투명하게함 */
  color: rgba(0, 0, 0, 0.0);
  cursor: pointer;
  font-size: 25px;
}
.slide_pagination > li.active {
  /* 현재 슬라이드 색상은 투명도 없이 */
  color:rgba(0, 0, 0, 0.0);
}

.slide_item_duplicate {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 0px;
  width: 100%;
  height: 300px;
  flex-shrink: 0;
  transition: left 0.15s;
}