@charset "UTF-8";

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/Roboto_Medium.eot);
  src: url(../fonts/Roboto_Medium.?#iefix) format('embedded-opentype'), url(../fonts/Roboto_Medium.woff) format('woff'), url(../fonts/Roboto_Medium.ttf) format('truetype');
}

/* 반응형, 모바일에서 모든요소의 패딩,선을 크기안에 포함시킴 */
*,
:before, :after { box-sizing: border-box; }

/* body에 들어갈수있는 모든태그의 여백빼기 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, footer, header, hgroup, menu, nav, section, main, audio, video { margin: 0; padding: 0; }

/* html5추가 시멘틱엘리먼트를 익스하위버전에서 블럭으로 인식되도록함 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; }

/* button태그에 손모양 커서 */
button {
  cursor: pointer;
}

/* 익스하위버전에서 이미지 선없애기 */
fieldset, img { border: 0; vertical-align: top; }

/* 모바일, 반응형에서 이미지가 원본보다 커지지않게 함 */
img { max-width: 100%; }

/* 리스트 기호 빼기 */
ol, ul { list-style: none; }

/* 태그 기본 기울임꼴 제거 */
address, em { font-style: normal; }

strong { font-weight: normal; }

/* 벤더프리픽스: 브라우저 제조사를 의미 */
a {
  text-decoration: none;
  color: #211817;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* -webkit- 크롬, 사파리 -ms- 익스 -moz- 파이어폭스 */
/* iframe으로 외부컨텐츠를 연결했을때 외부컨텐츠안쪽내용이 우리페이지에 영향을 주지못하도록 가려줌*/
iframe {
  overflow: hidden;
  border: 0;
}

/* 칸의 선을 합치기, 칸의 간격없애기, 가로를 늘려줌 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* 굵기 빼고 헤딩태그 폰트크기를 body에 선언한 크기와 일치시킴 */
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }

/* 폼요소의 높이가 다를때 요소끼리 세로정렬시킴, ios 둥근모서리, 기본스타일 제거 */
/* border-radius:0 -> iOS에서 테두리가 둥글게 나오므로 빼줌 */
/* -webkit-appearance: none -> iOS에서 폼요소에 내부그림자가 나오므로 빼줌 */
input, select, textarea, button {
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* 폼요소 포커스시 아웃라인 안 보이게 */
/* input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
} */

/* textarea 리사이즈기능 빼기 */
textarea {
  resize: none;
}

/* 모바일 크롬, 사파리의 텍스트 자동확대 방지*/
body {
  -webkit-text-size-adjust: none;
}

/*********************** 공통스타일 *************************/
/* body에 높이가 없어도 hidden이 걸리면 스크롤바가 사라짐 */
body.on {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

body, input, button, select, textarea, table {
  font-family: 'Roboto', 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', helvetica, 'Apple SD Gothic Neo', sans-serif;
  font-size: 15px;
  color: #211817;
}

/* Skip Navgation - 접근성 건너뛰기 메뉴 */
#skip_navi {
  position: relative;
}

#skip_navi a {
  position: absolute;
  left: 0;
  top: -999px;
  width: 100%;
  padding: 10px 0;
  background: #fff;
  z-index: 99999;
  text-align: center;
}

#skip_navi a:hover, #skip_navi a:active, #skip-navi a:focus { top: 0; }

/* legend,caption,메뉴제목,섹션제목 블라인드 */
legend, caption, .blind {
  /* 주변내용에 영향을 주지 않도록 띄움(레이어) */
  position: absolute;
  /* 넘치는 부분을 가려줌 */
  border: 5px solid red;
  overflow: hidden;
  /* 포토샵의 크롭기능으로 완전히 보이지 않게 함 */
  clip: rect(0 0 0 0);
  /* 원래의 위치로 이동 */
  margin: -1px;
  /* 크기가 0이면 스크린리더에서 읽지 않으므로 최소 크기 지정 */
  width: 1px;
  height: 1px;
}

/* float해제 */
.clearfix:after { content: ''; display: block; clear: both; }

/* placeholder */
::-webkit-input-placeholder {color:#bbb;} /* Webkit,크롬,사파리 */
:-moz-placeholder {color:#bbb;} /* Firefox 4-18 */
::-moz-placeholder {color:#bbb; opacity:1;} /* Firefox 19+ */
:-ms-input-placeholder {color:#bbb !important;} /* IE10+ */

/* 텍스트 선택 컬러 */
/* ::selection { background: #ef151e;color: #ffffff; } */


/* 폼요소 공통 */
/* IE x버튼, password 눈모양 가리기 */
input::-ms-clear,
input::-ms-reveal {
  display: none;
}

/* input search x버튼 안보이게 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}

/* 체크박스 공통 */
.checkbox_wrap {
  display: inline-block;
}

input[type='checkbox']+label {
  cursor: pointer;
}

input[type='checkbox']+label:before {
  content: '';
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 2px solid #dddddd;
  border-radius: 50%;
  vertical-align: -7px;
  margin-right: 10px;
}

input[type='checkbox']:checked+label:before {
  background: url(../images/sub_images/04_service/images/check_icon.png) no-repeat 50% 50% / 16px;
}

/* 라디오 공통 */
.radio_wrap {
  display: inline-block;
}

input[type='radio']+label {
  cursor: pointer;
  position: relative;
}

input[type='radio']+label:before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #dddddd;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -5px;
}

input[type='radio']:checked+label:after {
  content: '';
  position: absolute;
  left: 6px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #009223;
}

/* select 공통 */
.select_wrap {
  display: inline-block;
  border: 2px solid #dddddd;
  width: 100%;
  position: relative;
}

.select_wrap:before {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -3px;
  width: 12px;
  height: 7px;
  background: url(../images/sub_images/04_service/images/button_icon.png) no-repeat;
}
.select_wrap select {
  width: 100%;
  border: none;
  height: 41px;
  color: #999;
  text-indent: 15px;
  cursor: pointer;
  position: relative;
  background: none;
}
.info_write_wrap .select_wrap option {
  padding-right: 10px;
}

/* 화살표제거 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 익스 화살표 제거 */
select::-ms-expand {
  display: none;
}

/* textarea 공통 */
textarea {
  width: 100%;
  border: none;
  background: #f8f8f8;
  padding: 15px;
  box-sizing: border-box;
}

/* 파일선택 공통 */
.file_wrap {
  display: inline-block;
  border: 2px solid #dddddd;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* 클래스를 안 걸고 속성선택자로 거는 게 편함 */
.file_wrap input[type='text'] {
  height: 41px;
  width: 100%;
  border: none;
  padding: 0 111px 0 13px;
  box-sizing: border-box;
  color: #000;
  font-size: 14px;
}

.file_wrap label {
  width: 98px;
  height: 41px;
  text-align: center;
  line-height: 41px;
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 500;
  cursor: pointer;
}

.file_wrap label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  width: 2px;
  height: 16px;
  background: #e8e8e8;
}

/* round 버튼 공통 */
.btn_round {
  display: inline-block;
  /* 버튼디자인 중 가장 큰 높이의 절반 값을 입력 */
  border-radius: 25px;
  font-size: 18px;
  font-weight: 500;
  vertical-align: middle;
}

/* 테두리 버튼 */
.btn_border {
  border: 2px solid #e21e2d;
  background: #fff;
  box-sizing: border-box;
}

/* 버튼 배경색 */
.bg_point01 {
  background: #e21e2d;
  color: #fff;
}

/* 등록하기 버튼 */
.btn_regist:after {
  content: '';
  display: inline-block;
}

/* 글자색 공통 */
.txt_point01 {
  color: #e21e2d;
}

/* 게시판 테이블 공통 */
.tbl_board_wrap {
  /* 테이블 상단선은 바깥쪽에서 처리, table에 줄 경우 캡션버그가 있을 수 있음 */
  border-top: 1px solid black;
  border-bottom: 1px solid #dddddd;
  background: #fff;
}

.tbl_board_wrap table {
  /* 테이블은 데이터의 길이만큼 늘어나는 성질이 있으므로 늘어나지않게함 */
  table-layout: fixed;
}

.tbl_board_wrap th {
  height: 40px;
  background: #f5f5f5;
  text-align: center;
  font-weight: 400;
}

/* 칸의 가로길이는 %로 처리하는 것이 좋음 */
.tbl_board_wrap th.col1 {
  width: 8%;
}

.tbl_board_wrap th.col3 {
  width: 13%;
}

.tbl_board_wrap td {
  height: 60px;
  border-top: 1px solid #eee;
  text-align: center;
  color: #555;
}

.tbl_board_wrap .view_link {
  color: #555;
}

.tbl_board_wrap .view_link:hover {
  text-decoration: underline;
}

.tbl_board_wrap .td_left {
  text-align: left;
}

/* 게시물 보기 링크 */
.tbl_board_wrap .view_link {
  white-space: nowrap;
  /* hidden이 되려면 크기가 있어야함 */
  overflow: hidden;
  /* 글자가 짧을 경우 오른쪽 빈공간이 클릭됨 */
  /* display: block; */
  display: inline-block;
  /* 글자길이만큼의 크기를 가지게 함 */
  max-width: 100%;
  text-overflow: ellipsis;
}

/* 다운로드 버튼 공통 */
.btn_download {
  padding: 7px 3px;
  display: inline-block;
  line-height: 1;
}

.btn_download:hover {
  border-bottom: 1px solid black;
}

.btn_download:hover [class^='icon_download'] {
  transform: translateY(-1px);
}

[class^='icon_download'] {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  background: url(../images/sprite_pc_new.png) no-repeat;
}

.icon_download_pdf {
  background-position-x: -125px;
}

.icon_download_mp4 {
  background-position-x: 0px;
}

.icon_download_txt {
  background-position-x: -25px;
}

.icon_download_ppt {
  background-position-x: -50px;
}

.icon_download_doc {
  background-position-x: -75px;
}

.icon_download_xls {
  background-position-x: -100px;
}

/* 별 아이콘 */
.star {
  display: inline-block;
  width: 7px;
  height: 6px;
  background: url(../images/sub_images/04_service/images/star_icon.png) no-repeat;
  vertical-align: 5px;
  margin: 0 4px;
}

/* 크롬, 엣지 스크롤바 css*/
/* ::-webkit-scrollbar {
  width: 10px;
  background: #eee;
}

 ::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #000;
} */

/* 작성하기 테이블 공통 */
.info_write_wrap .note {
  text-align: right;
  color: #999;
}

.info_write_wrap th {
  border-bottom: 1px solid #e8e8e8;
  padding: 12px 0;
  text-align: left;
  font-weight: 500;
}

.info_write_wrap th.th_top {
  vertical-align: top;
}

.info_write_wrap td {
  border-bottom: 1px solid #e8e8e8;
  padding: 12px 0;
}

.info_write_wrap .col01 {
  width: 15%;
  white-space: nowrap;
}

.info_write_wrap .email {
  margin: 0 10px;
}

.info_write_wrap .file_note {
  display: inline-block;
  color: #999;
  font-size: 13px;
  margin-top: 10px;
}





#wrap {
  min-width: 320px;
}

#header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  min-width: 320px;
  z-index: 9999;
  border-bottom: 1px solid #dddddd;
}
#header.fixed {
  background: #fff;
}
#header.sub_header {
  position: relative;
}
#header .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#header .logo img {
  width: 100%;
}
#header .btn_open {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url(../images/icon/gnb.png) no-repeat 50% 50% / 30px;
  border: none;
  text-indent: -9999px;
}
#header .btn_right {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
#header .btn_right a {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../images/icon/cart.png) no-repeat 50% 50% / 30px;
  text-indent: -9999px;
}
#header .btn_right .btn_mypage {
  margin-left: 10px;
  background-image: url(../images/icon/user.png);
}


/********** 네비게이션 **********/
#header .gnb_area {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  transform: translateX(-100%);
  transition: all 0.5s;
  overflow: auto;
}
#header .gnb_area.on {
  transform: translateX(0);
}
#header .gnb_area .gnb_top {
  height: 60px;
  position: relative;
  background: #e21e2d;
}
#header .gnb_area .nav_logo {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
#header .gnb_area .btn_close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: url(../images/icon/close.png) no-repeat 50% 50% / 40px;
  text-indent: -9999px;
  border: none;
}
#header .gnb_quick {
  height: 56px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #f6f6f6;
  border-bottom: 1px solid #dddddd;
  text-align: center;
}
#header .gnb_quick li {
  width: 100%;
}
#header .gnb_quick a {
  padding: 10px 0;
  display: block;
  line-height: 30px;
  font-size: 16px;
  white-space: nowrap;
}


/* 아코디언 메뉴 */
#header .gnb_wrap .gnb>li {
  border-bottom: 1px solid #ddd;
  line-height: 57px;
}
#header .gnb_wrap .gnb>li>a {
  display: block;
  font-size: 22px;
  font-weight: 500;
  color: #333;
  padding: 0 20px;
  position: relative;
}
#header .gnb_wrap .gnb>li>a:after {
  content: '';
  position: absolute;
  right: 20px;
  top: 15px;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-right:2px solid #888;
  border-bottom: 2px solid #888;
  border-radius: 1px;
  transform: rotateZ(45deg);
}
#header .gnb_wrap .gnb>li>a.on:after {
  transform: rotateZ(225deg);
  margin-top: 10px;
}
#header .gnb_wrap .depth02 {
  display: none;
}
#header .gnb_wrap .depth02 li {
  width: 100%;
  border-top: 1px solid #ddd;
  background: #f6f6f6;
}
#header .gnb_wrap .depth02 a {
  display: block;
  margin: 0 20px;
  font-size: 16px;
  color: #666;
}


/* gnb 하단 sns */
#header .gnb_sns {
  padding: 90px 20px;
  text-align: center;
}
#header .gnb_sns img {
  margin: 0 15px;
}


/* container 공통 */
#container .main_tit {
  display: inline-block;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 25px;
}
#container .btn_more {
  font-size: 14px;
  font-weight: 500;
  color: #e21e2d;
}

/************** footer ***************/
#footer {
  background: #6d6d6d;
}
#footer .link_wrap {
  border-bottom: 1px solid #888;
}
#footer .link_wrap .link {
  padding: 0 20px;
  height: 40px;
  display: flex;
  justify-content: center;
  gap: 15px;
  align-items: center;
}
#footer .link_wrap .link li {
  position: relative;
}
#footer .link_wrap .link li + li:before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  width: 1px;
  height: 11px;
  margin-top: -4px;
  background: #888;
}
#footer .link_wrap .link a {
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}
#footer .link_wrap .link span {
  color: #F3C91F;
  font-weight: 500;
}
#footer .address_wrap {
  text-align: center;
  padding: 15px 20px 25px;
}
#footer .address_wrap p {
  color: #fff;
  font-size: 12px;
}
#footer .address_wrap .address {
  padding-bottom: 5px;
}
#footer .address_wrap .number {
  padding-bottom: 10px;
}


/* 서브 페이지 공통 */
.sub_container {
  position: relative;
  padding: 120px 20px 70px;
}

/* lnb 공통 */
.lnb_area {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #e21e2d;
  z-index: 1000;
}
.lnb_area.fixed {
  position: fixed;
}
.lnb_area .lnb_top {
  text-align: center;
  position: relative;
  border-bottom: 1px solid #ddd;
}
.lnb_area .btn_lnb {
  height: 50px;
  border: none;
  background: none;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}
.lnb_area .btn_lnb:after {
  content: '';
  display: inline-block;
  border: 5px solid transparent;
  border-top-color: #fff;
  margin-left: 10px;
  transition: all 0.3s;
}
.lnb_area .btn_lnb.on:after {
  transform: rotateZ(180deg) translate(0,5px);
}

.lnb_area .depth02 {
  position: absolute;
  left: 0;
  top: 50px;
  background: #fff;
  width: 100%;
  z-index: 500;
}
.lnb_area .depth02 li {
  width: 100%;
  border-bottom: 1px solid #ddd;
}
.lnb_area .depth02 li a {
  display: block;
  line-height: 49px;
}

.lnb_area .btn_back {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  background: url(../images/icon/sub_header_arrow.png) no-repeat 50% 50% / 25px;
}

.lnb_area .lnb_bottom {
  position: relative;
  background: #f3f3f3;
  border-bottom: 1px solid #ddd;
}
.lnb_area .lnb_bottom .lnb {
  height: 44px;
  text-align: center;
  overflow: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 0 20px;
}
.lnb_area .lnb_bottom .lnb a {
  line-height: 44px;
  flex-shrink: 0;
  font-weight: 500;  
}
.lnb_area .lnb_bottom .lnb a + a {
  margin-left: 30px;
}
.lnb_area .lnb_bottom .lnb a.active {
  color: #e21e2d;
}