@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

/****************************
00. Sub 공통
*****************************/
.subtopArea {width:100%; height:150px; padding:35px 0; text-align: center;}
.subtopArea h2 {color:#fff; letter-spacing: 2pt; font-size: 1em;}
.subtopArea h3 {font-size:35px; color:#fff; font-weight: 700; letter-spacing: -1.2pt;}
.subtop_mileage {background:url('../img/subtop_mileage.jpg') center top no-repeat; background-size:cover}
.lnb_select {display:none;} 


.subArea {padding:2rem 0 5rem 0;}
.contents-wrap {padding:2rem 0;}

.sub-tit {background:url('../img/tit_dot.png') left 12px no-repeat; font-size:24px; color:#222; font-weight: 600; padding-left:24px;}


/* Color */

.orange {color:#ff7200}
.green1 {color:#00b6b3}

/* 페이지 */

.pageArea {margin:50px auto;}
.pagination>li>a, .pagination>li>span { border-radius: 50% !important;margin: 0 5px; width:40px; height:40px; text-align: center;}
.page-link.num {border:none; color:#666;}
.page-link i {color:#666;}
.page-item.active .page-link {background-color:#00a8a5; border-color:#00a8a5}


/* 여백 */
.form-control {border:1px solid #ddd; color: #444;}
input::placeholder, textarea::placeholder {color: #444;}

/* 사이드바 */
.sidebar {margin-right:50px;}
.sidebar h2 {background:#00a8a5 url('../img/sidebar_tit_bg.png') left top; height:114px;text-align: center; font-size: 24px; color:#fff; font-weight: bold; letter-spacing: -1.2pt; border-radius: 25px 0 0 0;}
.sidebar h2 p { line-height: 110px; }
.sidebar > ul > li {border-bottom:1px solid #ddd;}
.sidebar > ul > li > a {height:60px; line-height: 60px; padding-left: 15px; display: block; box-sizing: border-box;}
.sidebar > ul > li a:hover {color:#00a8a5}
.sidebar > ul > li > a.on {line-height: 52px; border:4px solid #00a8a5; color:#00a8a5; position: relative;}
.sidebar > ul > li > ul > li > a.on {line-height: 52px; color:#00a8a5; position: relative;}
.sidebar > ul > li > a.on::after {content: ''; position:absolute; background: #00a8a5; width:15px; height: 3px; float:right; right:20px; top:25px}


#accordian ul ul {display: none;background:#f5f5f5; border-top:1px solid #ddd }
#accordian li.active>ul {display: block;}

.sidebar > ul > li > ul > li > a {height:40px; line-height: 40px; padding-left: 30px;  font-size:15px;}
.sidebar > ul > li > ul > li > a.active {color:#00a8a5;}

/* 서브 타이틀 */
.title-wrap {position: relative; overflow:hidden; width:100%; border-bottom:1px solid #eee; text-align: left; padding:20px 0 20px 0;}
.title-wrap h2.page-tit {display: block ; float: left; font-size: 30px; font-weight: bold; color:#000; letter-spacing: -1.2pt;}
.title-wrap .location-wrap {display: inline-block; float: right; position: relative; padding-top:10px;}
.title-wrap .location-wrap li {float:left; position:relative; margin-left:10px; margin-right:10px;}
.title-wrap .location-wrap li a:hover {color:#222;}
.title-wrap .location-wrap li.navi-home a {display: block; width:29px; height:29px; background:url('../img/ic_home.gif') left center no-repeat; padding-left:35px; padding-right:20px}
.title-wrap .location-wrap li::after {display: block; position: absolute; top: 12px; right:-10px; width: 6px; height: 6px; border: solid; border-width: 1px 1px 0 0; border-color: #a2a2a2; content: ''; transform: rotate(45deg);  -webkit-transform: rotate(45deg);}

.title-wrap .location-wrap li:last-child:after {display: none;}

.top-category { background:#f9fafa; position: relative;  position:relative; border-top:1px solid #ddd;  }
.top-category ul {position: relative; }
.top-category li {float:left;width:20%; border-right:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; margin-left:-0.5pt}
.top-category li a {
      display: block; text-align: center; background: #fff; height:40px; padding-top:8px; position: relative; z-index: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
}
.top-category li a.on {z-index:3; color:#fff; background:#f5f5f5}
.top-category li a.on::after {content:''; height:50px; width:102%; position: absolute; left:-2px; top:-5px; z-index: -1; border-radius:5px; background:#00a8a5; box-shadow: 0 5px 20px rgba(0, 182, 179, 0.3);}

.board-search {border-bottom:2px solid #444; padding-top:30px; position: relative; margin-top:30px; padding:20px 0; clear: both;}
.board-search .total {display: inline-block; line-height: 40px;}
.board-search .search {float:right; right:0;}
.board-search .search input { padding-left:10px}
.board-search .search input::placeholder {color:#888;}
.board-search .search input, .board-search .search .btn {border-radius: 0; border:1px solid #444;}
.board-search .row{width:100%;}

/* 모바일 게시판 검색시 select 박스가 있는 경우 스타일, add by cjh - begin */
.board-search-type2 {border-bottom:2px solid #444; padding-top:30px; position: relative; margin-top:30px; padding:20px 0; clear: both;}
.board-search-type2 .total {display: inline-block; line-height: 40px;}
.board-search-type2 .search {float:right; right:0;}
.board-search-type2 .search input { padding-left:10px}
.board-search-type2 .search input::placeholder {color:#888;}
.board-search-type2 .search input,
.board-search-type2 .search .btn {border-radius: 0; border:1px solid #444;}
.board-search-type2 .row{width:100%;}
/* 모바일 게시판 검색시 select 박스가 있는 경우 스타일, add by cjh - end */







/****************************
04. 마일리지
*****************************/

/* 게시판 */
.gallery_list {margin:30px 0; width:100%;}

.gallery_list > ul > li {border:1px solid #ddd; border-radius: 10px; padding:20px; margin-bottom:20px;}

.gallery_list dl {display:flex;}
.gallery_list dt {float:left; margin-right:20px;}
.gallery_list dd {padding-top:30px;}

/*.gallery_list .responsive-center {display: inline-block; width:300px; height:200px; background:#f5f5f5; margin-right:20px; overflow: hidden; border:1px solid #eee;} */
.gallery_list .responsive-center {display: inline-block; width:232px; height:174px; background:#f5f5f5; margin-right:20px; overflow: hidden; border:1px solid #eee;}
.gallery_list .responsive-center img { display: block; max-width: 100%; height: auto; text-align:center; margin:0 auto;}
.gallery_list .tit {font-size:20px; color:#222; padding-bottom:10px; font-weight: 600;}
.gallery_list .tit span {color:#00a8a5; border:1px solid #00a8a5; border-radius: 50px; font-size:14px; padding:5px 10px; margin-right:10px}
.gallery_list .con {width: 100%; /*white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2; max-height: 6em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;*/}

.line-list li {display: block; background:url('../img/ic-line-dot.gif') left 15px no-repeat; padding-left:15px; line-height: 190%;}


/****************************
01. 회사소개
*****************************/

/* 인사말 */
.about-greet {margin-top:5rem;}
.about-greet .about-img {position: relative;}
.about-greet .about-img .name_box {position:absolute; width:230px; height: 190px; background:url('../img/name_box.png') left top no-repeat; margin-top:-80px; margin-right:-30px; float:right; right:0; padding:65px 0 0 25px; color:#fff;}

.about-greet .about-con {margin-left:100px}
.about-greet .about-con h2 {background:url('../img/about_mark.gif') left top no-repeat; padding-top:40px;  font-size:2.3rem; letter-spacing: -1.5pt; line-height:2.3rem; padding-bottom:25px;}
.about-greet .about-con h2 span {color:#00b6b3; font-weight: bold;}

/* 비전/연혁 */

.vision-con {}
.vision-con p.info {padding-bottom:40px}
.vision-con .vision {position:relative; border:2px solid #50becb; padding:35px 0 20px 0; text-align: center; border-radius: 50px; margin-bottom: 70px;}
.vision-con .vision .tit {background-color: #50becb; color:#fff; display: block; font-size:1.375rem; width:220px; height: 65px; text-align: center; border-radius:50px; padding:10px 0; margin:-70px auto 10px auto;}
.vision-con .vision .tit span {color:#a2ecf5; display: block; font-size:14px; line-height: 14px;}

.vision-con .goal {position:relative; border:2px solid #2f92c6; padding:35px 0 20px 0; text-align: center; border-radius: 100px;  margin-bottom: 40px;}
.vision-con .goal .tit {background-color: #2f92c6; color:#fff; display: block; font-size:1.375rem; width:220px; height: 65px; text-align: center; border-radius:50px; padding:10px 0; margin:-70px auto 10px auto;}
.vision-con .goal .tit span {color:#a2ecf5; display: block; font-size:14px; line-height: 14px;}

.vision-con .direction {position:relative;   text-align: center; margin-bottom: 70px; overflow: hidden;}
.vision-con .direction .tit {background-color: #1e78a8; color:#fff; display: block; font-size:1.375rem; width:220px; height: 65px; text-align: center; border-radius:50px; padding:10px 0; margin:0 auto;}
.vision-con .direction .tit span {color:#a2ecf5; display: block; font-size:14px; line-height: 14px;}

.organigramma {text-align: center;  margin: 0 0 1em; width: 100%;}
.organigramma, .organigramma ul, .organigramma li {list-style: none; margin: 0; padding: 0; position: relative;}
.organigramma, .organigramma ul {display: table;}
.organigramma ul {width: 100%; padding-top:15px;}
.organigramma li {display: table-cell; vertical-align: top; margin-top:25px;}
.organigramma li:before {content: ""; background:#ddd; height:1px; left: 0; top: 0; right: 0; position: absolute; }
.organigramma li:first-child:before {left: 50%;}
.organigramma li:last-child:before {right: 50%;}
.organigramma div {border: 1px solid #ddd; border-radius: 0.2em; display: inline-block; width:175px; height:175px; margin:15px 0; position: relative; background: #fff; color:#222; border-radius: 50%;   padding-top:20px; text-align: center;} 
.organigramma div p.text {position: absolute;  text-align: center; width:175px; top:28%;}
.organigramma div p.text span {display: block;}
.organigramma ul:before, .organigramma div:before {background:#ddd; width:1px; content: ""; height: 15px; left: 50%; position: absolute;  } 
.organigramma ul:before {top: 0; } 
.organigramma div:before {top:-15px; } 
.organigramma > li {margin-top: 0; }
.organigramma > li:before, .organigramma > li:after {outline: none; } 
.organigramma > li > div:before {outline: none; } 


.timeline {list-style: none; margin: 25px 0 22px; padding: 0; position: relative; -moz-box-sizing: border-box;  -webkit-box-sizing: border-box; box-sizing: border-box; }
.timeline-horizontal:after { border-top-width: 6px; border-left-width: 13px; border-color: transparent transparent transparent #00637d; top: 15px; right: 0; bottom: auto; left: auto; } 
.timeline-horizontal .timeline-milestone { border-top: 1px solid #00b6b3; display: inline; float: left; margin: 20px 0 0 0; padding: 40px 0 0 0; background:#fff; }
.timeline-horizontal .timeline-milestone:before {top: -17px; left: auto; } 
.timeline-horizontal .timeline-milestone.is-completed:after {top: -17px; left: 0;}
.timeline-milestone {border-left: 1px solid #00b6b3; margin: 0 0 0 24px; padding: 0 0 5px 24px; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 
.timeline-milestone:before {border: 2px solid #00b6b3; border-radius: 50%; content: ""; display: block; position: absolute; left: -8px; width: 16px; height: 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; }
.timeline-milestone.is-completed:before {background-color: #fff; } 
.timeline-milestone.is-completed:after { display: block;   position: absolute; top: 0; left: -17px; text-align: center; width: 16px; height: 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  box-sizing: border-box; }
.timeline-milestone.is-current:before {background-color: #EEE; } 
.timeline-milestone.is-future:before {background-color: #8DACB8; border: 0; } 
.timeline-milestone .timeline-action .title {color: #00b6b3;   float:left;   margin-right: 30px; } 
.timeline-action { background-color: #FFF; padding: 12px 10px 12px 20px; position: relative; top: -15px; border:1px solid #ddd; box-shadow: 0 10px 10px rgba(61, 64, 73, 0.05); border-radius: 5px; margin-bottom:20px; }
.timeline-action.is-expandable .title {cursor: pointer; position: relative; } 
.timeline-action.is-expandable .title:focus { outline: 0; text-decoration: underline; } 
.timeline-action.is-expandable .title:after {border: 6px solid #666; border-color: transparent transparent transparent #666;  content: ""; display: block; position: absolute; top: 6px; right: 0; } 
.timeline-action.is-expandable .content {display: none; } 
.timeline-action.is-expandable.is-expanded .title:after {border-color: #666 transparent transparent transparent; top: 10px; right: 5px; } 
.timeline-action.is-expandable.is-expanded .content {display: block; } 
.timeline-action .title, .timeline-action .content { word-wrap: break-word; } 
.timeline-action .title { color: #00637d; font-size: 16px; margin: 0; } 
.timeline-action .date {display: block; font-size: 14px; margin-bottom: 15px; } 
.file-list {  line-height: 1.4; list-style: none; padding-left: 10px; } 
.timeline-last {border-left:0;}

/* 함께하는 사람들 */
.organ-img {text-align: center;}
.organ-img img {width:100%; max-width:804px; margin:30px auto;}

.organ-con {margin-top:4rem;}
.organ-con .nav-pills .nav-link {border:1px solid #ddd; margin: 0 5px; padding:15px 50px; box-shadow: 0 5px 0 rgba(0,0,0,0.05);}
.organ-con .nav-pills .nav-link.active { background-color: #00b6b3; color:#fff; box-shadow: 0 5px 30px rgba(0,182,179, 0.4); border:1px solid #00b6b3}

.organ-tbl {margin:10px 0 50px; border-collapse: collapse; border-top:1px solid #222222; width:100%;}
.organ-tbl th {border-bottom:1px solid #ddd; background:#f9f9f9; padding:15px 0; font-weight: 600; text-align: center;}
.organ-tbl td {border-bottom:1px solid #ddd; padding:15px 0; text-align: center;}
.organ-tbl td.txt-left {text-align: left; padding:15px 10px ;}
.organ-tbl td.border-right {border-right:1px solid #ddd;}

/* 사업소개 */
.business-con > div > div {padding:10px; }
.business-con > div > div .con {border:1px solid #ddd; border-radius: 5px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05); padding:30px; height:100%}
.business-con > div > div .con.overseas {background: url('../img/overseas_img.jpg') right bottom no-repeat;}
.business-con > div > div .con .green-tit {color:#00b6b3; font-size:18px;}
.business-con > div > div .con .orange-tit {color:#ff8210; font-size:18px;}


/* 찾아시는길 */
.map {margin:10px 0 50px 0;}
.map-info {background-color:#f4fafa; border:5px solid #93e3e3; padding:20px; margin-top:10px;}
.map-info li {margin-bottom:5px;}
.map-info li:first-child {background:url('../img/ic_pin.gif') left 8px no-repeat; padding-left:20px;}
.map-info li:nth-child(2) {background:url('../img/ic_call.gif') left 8px no-repeat; padding-left:20px;}
.map-info li:nth-child(3) {background:url('../img/ic_fax.gif') left 8px no-repeat; padding-left:20px;}
.map-info li:nth-child(4) {background:url('../img/ic_mail.gif') left 8px no-repeat; padding-left:20px;}



/* 마일리지 제도란 */
.certi-box {background:#f4fafa; padding:55px 0; margin:30px 0 70px 0;}
.certi-box ul {text-align: center; margin-bottom:30px;}
.certi-box ul li {display: inline-block; padding:10px 20px; }
.certi-box ul li .label {
      width:100%;
      padding:6px;
      text-align: center;
      background:#e5edf5;
      border:1px solid #d5dee7;
      display: block;
      border-radius: 0;
      margin-top: 4px;
      color: #666;
}
.btn-certi {width:240px; margin:0 auto; background-color: #00b6b3; color:#fff; box-shadow: 0 5px 30px rgba(0,182,179, 0.4); border:1px solid #00b6b3; border-radius: 5px; transition: all .5s ease;}
.btn-certi:hover {box-shadow: 0 15px 30px rgba(0,182,179, 0.4); background-color: #009391; }
.btn-certi a {color:#fff; display: block; text-align: center; padding:20px 0;}

.mileage-con .con {padding-left:20px; margin-bottom:40px;}
.mileage-con .num-tit {padding:5px; background:#f1f7f7; font-size:1.25rem; font-weight: bold; letter-spacing: -0.5pt; border-radius: 50px; margin-bottom:20px; }
.mileage-con .num-tit span {background-color:#00b6b3; color:#fff; font-weight: bold; margin-right:10px; border-radius: 50px; width:40px; height:40px; display: inline-block; line-height: 40px; text-align: center; font-size:1rem;}
.mileage-con h6 {color:#00b6b3; font-size:1.125rem;}

.benefit-box {border:5px solid #93e3e3; padding:50px 0;}
.benefit-box h4 {font-size: 1.875rem; text-align: center; padding-bottom:30px;}
.benefit-box ul {text-align: center;}
.benefit-box ul li {display: inline-block; width:30%; margin-bottom:30px;}
.benefit-box ul li dt {color:#00b6b3; font-size: 1.125rem; padding:30px; border:2px solid #eee; width:220px; height:220px; border-radius: 110px; vertical-align:middle; margin:0 auto;}
.benefit-box ul li dt img {padding-top:20px;}
.benefit-box ul li dd {margin-top:25px; font-size: 1.125rem;}
.benefit-box ul li dd span {font-weight: bold; font-size: 1.875rem; color:#000; font-family: 'Poppins', sans-serif;}
.benefit-box .btn-benefit {width:280px; margin:0 auto; background-color: #00b6b3; color:#fff; box-shadow: 0 5px 30px rgba(0,182,179, 0.4); border:1px solid #00b6b3; border-radius: 5px; transition: all .5s ease;}
.benefit-box .btn-benefit:hover {box-shadow: 0 15px 30px rgba(0,182,179, 0.4); background-color: #009391; }
.benefit-box .btn-benefit a {color:#fff; display: block; text-align: center; padding:20px 0;}

/* 자원봉사증 발급 */
.volunteer-box {border:1px solid #ddd; margin:20px 0 40px 0; background:url('../img/img_volunteer.jpg') right bottom no-repeat; font-size: 1.25rem; min-height: 300px; width:100%; background-size:contain}
.volunteer-box p {vertical-align: middle; padding-left:30px;  padding-top:90px}
.volunteer-box p span {font-size:  1.5rem; color:#00b6b3; padding-bottom:10px; display: block;}
.info-table {position: relative; overflow: hidden; width:97%; margin-top:10px;}
.info-table > li {float: left; text-align: center; height:100%; border:1px solid #eee;}
.info-table > li p {padding-top:15px;}
.info-table > li.first dt {background-color: #00b6b3; color:#fff; padding:15px 0;}
.info-table > li.first dd {padding:30px 0;}

.info-table > li.first::after {content: ''; background:url('../img/ico_m_next.png') no-repeat; width:66px; height:66px; position: absolute; z-index:11; top:40%; right:-30px;}

.info-table > li.end {border-left:1px solid #ddd; margin-left:-1px;}
.info-table > li.end dt {background-color: #008785; color:#fff; padding:15px 0;}
.info-table > li.end dd {padding:30px 0;}
.info-table > li.end dd li {display: inline-block; margin:0 10px; vertical-align: middle;}


.not-volunteer {background-color: #00b6b3; color:#fff; text-align: center; margin-bottom:30px; border-radius: 5px; padding:20px 0; font-size: 1.215rem; vertical-align: middle;}


@media screen and (max-width:1200px) {
      .volunteer-box {background-size:70%}
}


@media screen and (max-width:768px) {
      .gallery_list iframe {width: 100% !important;}
      .board_view iframe  {width: 100% !important;}
}

@media screen and (max-width:991px) {

      /* 공통 */
      .topArea  {display: none;}
      .subTit {padding:20px 0 0 0;}
      /*.board-search .search {float:left;}*/
      .board-search .search {float:left;width:100%;}
      /* .board-search .search input {width: calc( 100% - 64px );} */
      .board-search .search input {width: calc( 100% - 164px );}
      /* .board-search .search #keyword {height:44px;} */
      .board-search .search #keyword {height:43px;}

      /* 모바일 게시판 검색시 select 박스가 있는 경우 스타일, add by cjh - begin */
      .board-search-type2 .search {float:left;width:100%;}
      .board-search-type2 .search select {width: 80px;position: relative;}
      .board-search-type2 .search input {width: calc( 100% - 142px - 80px );}
      .board-search-type2 .search #keyword {height:44px;}
      /* 모바일 게시판 검색시 select 박스가 있는 경우 스타일, add by cjh - end */

      .lnb_select {display:block;}
      .lnb_menu {display:none;}
      .dropdown {width:100%;margin:0px; z-index:98;}
      .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
      .dropdown dd { position:relative; }
      .dropdown a, .dropdown a:visited { color:#3b3b3b; text-decoration:none; outline:none; text-align:left;}
      .dropdown a:hover { color:#3b3b3b;}
      .dropdown dt a:hover { color:#3b3b3b; }
      .dropdown dt a {background:#f8f8f8 url('../img/lnb_arrow.png') no-repeat scroll right center; display:inline-block; padding-right:20px; border:1px solid #eee; width:100%; height:45px; }
      .dropdown dt a span {cursor:pointer; display:block;line-height:29px;padding-left:10px;}
      .dropdown dd ul { background:#fff none repeat scroll 0 0; border:1px solid #ddd; color:#515151; display:none; left:0px; padding:5px 0px; position:absolute; top:-1px; width:auto; min-width:100%; list-style:none; text-align:left;}
      .dropdown span.value { display:none;}
      .dropdown dd ul li a { padding:5px; display:block;padding-left:11px;}
      .dropdown dd ul li a:hover { background-color:#f5f5f5; transition: .3s;}
      .dropdown img.flag { border:none; vertical-align:middle;padding:11px;}

      .volunteer-box {background-size:70%}

}


@media screen and (max-width: 767px) {

      body {font-size:14px;}

      .sub-tit {font-size:20px; background-position-y: 8px;}

      .subtopArea {height:130px}
      .subtopArea h3 {font-size:24px;}

      .title-wrap {padding-top:0;}
      .title-wrap h2.page-tit {float: inherit; width:100%; font-size: 20px;}
      .title-wrap .location-wrap {display: block; float: left}
      .title-wrap .location-wrap li:first-child {margin-left:0;}

      .title-wrap .location-wrap {display: none;}

      .top-category li a.on::after {width:105%}

      .gallery_tbl td li .responsive-center {width:120px; height:90px;} 
      .gallery_list dt  {margin-bottom:10px;}


      .sub-tit {font-size:20px; background-position-y: 8px;}

      .about-greet .about-img {text-align: center;}
      .about-greet .about-img .name_box {margin-top:-100px; height:100px; padding:20px 0 0 20px ; margin-right:0;}
      .about-greet .about-con {margin-left:0}
      .about-greet .about-con h2 { margin-top:40px; padding-top:40px;  font-size:1.8rem; letter-spacing: -1.5pt; line-height:1.8rem;}

      .vision-con .vision {border-radius: 0;}
      .vision-con .goal {border-radius: 0; padding-left:15px; padding-right:15px;}

      .organigramma ul:before, .organigramma div:before {content: none;}
      .organigramma ul {display: block; padding-top: 0;}
      .organigramma li {display:block; margin-top: 0; margin-bottom:10px;}
      .organigramma div {width:100%; display: block; border-radius: 0; height:40px; padding:15px;}
      .organigramma div p.text {transform:inherit; top:0; padding:10px; text-align: left; width:100%;}
      .organigramma div p.text span {display: inline-block;}

      .business-con > div > div .con.overseas {background: none} 

      .benefit-box {padding:20px;}
      .benefit-box h4 {font-size: 1.5rem;}
      .benefit-box ul li {display: block; width:100%;}
      .benefit-box ul li dd {margin-top:15px;}

      .volunteer-box {background-size: 80%}
      .volunteer-box p {padding-top:20px;}

      .info-table > li {height: auto;}
      .info-table > li.first {margin-bottom:50px;}
      .info-table > li.first::after {content: ''; background:url('../img/ico_m_bottom.png') no-repeat; width:66px; height:66px; position: absolute; z-index:11; left:45%; top:100%; margin-top:-10px;}
      .info-table > li.end {margin-left:0;}

      /* 220325 CJH 모바일 게시판 페이징 표시 처리 수정 */
      .pagination {
            flex-wrap: wrap;
            width: 100%;
            padding-top: 20px;
      }
      li.page-item.active {
            margin-bottom: 10px;
      }

}
@media screen and (max-width:640px) {


      .gallery_list dl {display:inherit}
      .gallery_list dt {width:100%;}
      .gallery_list .responsive-center { position: relative; width:100%; height: 160px; } 
      .gallery_list .responsive-center img {height:100%; text-align:center; margin:0 auto;}

      .info-table > li.first::after {left:40%}


}

/* 지역 검색시 스타일 */
#local_area {
      margin-right: 5px;
      margin-bottom: 0px;
      height: 44px;
}
@media screen and (max-width: 786px){
      #local_area {
            margin-right: 0px;
            width:100%;
            margin-bottom: 5px;
            height: 44px;
      }
}


/***  마일리지 사용시 상품 표시 처리 스타일  ***/
.affiliate_product_search_box_wrap h5 {
      padding: 20px 0;
      border-bottom: 1px solid;
      margin-bottom: 10px;
}
.affiliate_product_search_box_wrap .input-group {
      margin-bottom: 4px;
}
.affiliate_product_search_box_wrap #product_keyword {
      width: calc( 100% - 120px );
}
.affiliate_product_search_box_wrap button[type='button'] {
      width: 120px;
      font-size:14px;
}
.affiliate_product_search_box {
      width:100%;
      display: block;
      background-color: white;
      height:350px;
      overflow-y: scroll;
      border: 1px solid;
      padding: 8px;
      border-bottom: 2px solid;
      margin-top: 10px;
}
.affiliate_product_search_box::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background: #ffffff;
}
.affiliate_product_search_box::-webkit-scrollbar-thumb {
      border-radius: 3.5px;
      background-color: #ced4da;
}
.affiliate_product_search_box::-webkit-scrollbar-track {
      background: #ffffff;
}
.affiliate_product_search_box .product_list_wrap ul li {
      float: left;
      width: 100%;
      padding: 6px 0px;
      border-bottom: 1px solid lightgray
}
.affiliate_product_search_box .product_list_wrap ul li .title {
      float:left;
      text-align: left;
      width: calc( 100% - 100px );
      font-size:14px;
      margin-top:8px;
}
.affiliate_product_search_box .product_list_wrap ul li .select_btn {
      float:right;
      text-align: right;
      width:100px;
}
.affiliate_product_search_box .product_list_wrap ul li .select_btn  input[type='button'] {
      width:100%;
      font-size: 14px;
}

/* 결제 정보 영역 */
#payment_info h5 {
      padding: 40px 0 0;
      margin-bottom: 10px;
}

/* 할인가맹점 지도 스타일  */
.af-map-wrap {width:100%;}
.af-map-wrap .service_map {
      display: block; z-index: 100; position: relative
}
.af-map-wrap .search-overlay-box #map_searchbtn img {
      width: 18px;
      height: 18px;
}
.af-map-wrap .search-overlay-box #map_searchbtn {
      width: 62px;
      border: 1px #00a8a5 solid;
      background-color: #00a8a5;
}
.af-map-wrap .search-overlay-box #map_keyword::placeholder {
      color:lightgrey;
      font-size:14px;
}
.af-map-wrap .search-overlay-box #map_keyword {
      border: none;
      height: 42px;
      width: calc( 100% - 78px );
      margin-left: 10px;
}
.af-map-wrap .search-overlay-box {
      display: block;
      z-index: 101;
      position: absolute;
      top: 20px;
      right: 35px;
      background: white;
      border-radius: 5px;
      width: 300px;
      height: 44px;
      border: 1px solid lightgray;
      box-shadow: 0 5px 5px rgb(187 197 215 / 80%);
}
.af-map-wrap .search-switch-overlay-box:hover {
      background-color:#f7f7f7;
      cursor: pointer;
}
.af-map-wrap .search-switch-overlay-box .arrow-down img,
.af-map-wrap .search-switch-overlay-box .arrow-up img {
      width:14px;
}
.af-map-wrap .search-switch-overlay-box .arrow-down {
      width: 32px;
      text-align: center;
      margin-top: 6px;
}
.af-map-wrap .search-switch-overlay-box .arrow-up {
      width: 32px;
      text-align: center;
      margin-top: 6px;
}
.af-map-wrap .search-switch-overlay-box {
      display: block;
      z-index: 101;
      position: absolute;
      top: 20px;
      right: 342px;
      border-radius: 5px;
      width: 34px;
      height: 44px;
      border: 1px solid lightgray;
      box-shadow: 0 5px 5px rgb(187 197 215 / 80%);
      background-color: white;
      color: #545454;
}
.af-map-wrap .search-result-overlay-box {
      display: none;
      z-index: 101;
      position: absolute;
      top: 74px;
      right: 35px;
      background: white;
      border-radius: 5px;
      width: 340px;
      height: 626px;
      border: 1px solid lightgray;
      overflow-y: scroll;
      box-shadow: 0 5px 5px rgb(187 197 215 / 80%);
}
.af-map-wrap .affiliate_store_info_item:hover {
      cursor: pointer;
      background-color: #eee;
}
.af-map-wrap .affiliate_store_info_item {
      border-bottom: 1px solid lightgrey;
      display: block;
      position: relative;
      width: 100%;
      height: 102px;
}
.af-map-wrap .affiliate_store_info_item h3 {
      font-size: 16px;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
}
.af-map-wrap .affiliate_store_info_item p.store_address {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
}
.af-map-wrap .affiliate_store_info_item h3 span.badge {
      color: #00a8a5;
      border: 1px solid #00a8a5;
      border-radius: 50px;
      font-size: 12px;
      padding: 5px 10px;
      margin-right: 10px;
}
.af-map-wrap .affiliate_store_info_item h3 span {
      font-size: 16px;
      padding-right: 4px;
      color: gray;
}
.af-map-wrap .affiliate_store_info_item .store_short_info .tag{
      color: #00a8a5;
      font-size: 14px;
      margin-right: 5px;
}
.af-map-wrap .affiliate_store_info_item .store_tag {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
}
.af-map-wrap .affiliate_store_info_item .store_phone {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
}
.af-map-wrap .affiliate_store_info_item .store_short_info {
      float: left;
      display: block;
      position: relative;
      margin-top: 8px;
      width: calc( 100% - 110px );
      margin-right: 10px;
}
.af-map-wrap .affiliate_store_info_item .store_image {
      margin: 10px;
      width: 80px;
      height: 80px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      float: left;
      display: block;
      background-color: lightgray;
}
.af-map-wrap .search-result-overlay-box .no-result {
      text-align: center;
      font-size: 16px;
      padding-top: 32px;
}
.af-map-wrap .search-result-paging {
      margin: 0 auto;
      font-size: 13px;
      text-align: center;
      display: table;
      padding: 10px;
}

/* 네이버 지도 정보창 스타일 */
.af-map-wrap .affiliate_map_store_info_item {
      display: block;
      position: relative;
      width: 340px;
      height: 128px;
      margin-top: 4px;
}
.af-map-wrap .affiliate_map_store_info_item h3 {
      font-size: 16px;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
}
.af-map-wrap .affiliate_map_store_info_item p.store_address {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-top: 8px;
}
.af-map-wrap .affiliate_map_store_info_item h3 span.badge {
      color: #00a8a5;
      border: 1px solid #00a8a5;
      border-radius: 50px;
      font-size: 12px;
      padding: 5px 10px;
      margin-right: 10px;
}
.af-map-wrap .affiliate_map_store_info_item h3 span {
      font-size: 16px;
      padding-right: 4px;
      color: gray;
}
.af-map-wrap .affiliate_map_store_info_item .store_short_info .tag{
      color: #00a8a5;
      font-size: 14px;
      margin-right: 5px;
}
.af-map-wrap .affiliate_map_store_info_item .store_tag #view_detail {
      width: 100%;
      font-size: 13px;
      background-color: #00a8a5;
      border: 1px solid #00a8a5;
      padding: 4px;
}
.af-map-wrap .affiliate_map_store_info_item .store_tag {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-top: 8px;
}
.af-map-wrap .affiliate_map_store_info_item .store_phone {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-top: 4px;
}
.af-map-wrap .affiliate_map_store_info_item .store_short_info {
      float: left;
      display: block;
      position: relative;
      margin-top: 10px;
      margin-right: 10px;
      width: calc( 100% - 132px );
}
.af-map-wrap .affiliate_map_store_info_item .store_image {
      margin: 10px;
      width: 102px;
      height: 114px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      float: left;
      display: block;
      background-color: lightgray;
}


/* 모바일 검색 결과 목록 표시 영역 */
.mobile_html .search-result-overlay-box.mobile {
      display: none;
      z-index: 101;
      position: relative;
      background: white;
      border-radius: 5px;
      border: 1px solid lightgray;
      width: 100%;
}
.mobile_html .search-result-overlay-box.mobile .store_image{
      margin: 10px;
      width: 100px;
      height: 100px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      float: left;
      display: block;
      background-color: lightgray;
}

.mobile_html .search-result-overlay-box.mobile .affiliate_store_info_item {
      border-bottom: 1px solid lightgrey;
      display: block;
      position: relative;
      width: 100%;
      height: 124px;
}
.mobile_html .search-result-overlay-box.mobile .affiliate_store_info_item h3 {
      font-size: 16px;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
}
.mobile_html .search-result-overlay-box.mobile .affiliate_store_info_item p.store_address {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-top:6px;
}
.mobile_html .search-result-overlay-box.mobile .affiliate_store_info_item h3 span.badge {
      color: #00a8a5;
      border: 1px solid #00a8a5;
      border-radius: 50px;
      font-size: 12px;
      padding: 5px 10px;
      margin-right: 10px;
}
.mobile_html .search-result-overlay-box.mobile .affiliate_store_info_item h3 span {
      font-size: 16px;
      padding-right: 4px;
      color: gray;
}
.mobile_html .search-result-overlay-box.mobile .affiliate_store_info_item .store_short_info .tag{
      color: #00a8a5;
      font-size: 14px;
      margin-right: 5px;
}
.mobile_html .search-result-overlay-box.mobile .affiliate_store_info_item .store_tag {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-top:4px;
}
.mobile_html .search-result-overlay-box.mobile .affiliate_store_info_item .store_phone {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-top:4px;
}
.mobile_html .search-result-overlay-box.mobile .affiliate_store_info_item .store_short_info {
      float: left;
      display: block;
      position: relative;
      margin-top: 8px;
      width: calc( 100% - 132px );
      margin-right: 10px;
}

.mobile_html .search-result-overlay-box.mobile .no-result {
      text-align: center;
      font-size: 16px;
      padding-top: 32px;
}
.mobile_html .search-result-overlay-box.mobile .search-result-paging {
      margin: 0 auto;
      font-size: 13px;
      text-align: center;
      display: block;
      padding: 10px;
}
.mobile_html .search-result-overlay-box.mobile .search-result-paging ul {
      display: block;
      text-align: center;
}
.mobile_html .search-result-overlay-box.mobile .search-result-paging ul li {
      display: inline-block;
}

@media screen and (max-width: 479px) {
      .af-map-wrap .search-overlay-box {
            width: calc( 100% - 170px ) !important;
      }
      .af-map-wrap .search-switch-overlay-box {
            right: calc( 100% - 128px ) !important;
      }
}

@media screen and (max-width: 768px) {
      .af-map-wrap .search-result-overlay-box{
            display: none !important;
      }
      .search-result-overlay-box.mobile {
            display: block;
      }
      .af-map-wrap .search-overlay-box {
            width: calc( 100% - 244px );
      }
      .af-map-wrap .search-switch-overlay-box {
            right: calc( 100% - 202px );
      }

}
@media screen and (min-width: 769px) and (max-width: 991px) {
      .search-result-overlay-box.mobile {
            display: none !important;
      }
      .af-map-wrap .search-result-overlay-box {
            height: 240px;
      }
}
@media screen and (min-width: 992px){
      .search-result-overlay-box.mobile {
            display: none !important;
      }
}


/* 할인가맹점 오버레이 가맹점 정보 표시 영역 스타일 */

.adminRecommend .swiper-slide img {
      cursor: pointer;
}

.affiliate_detail_view_overlay {
      position: fixed;
      top:0;right:0;bottom:0;left:0;
      display: flex;
      align-items: center;
      justify-content: center;
      display: none;
      -webkit-align-item: center;
      -webkit-justify-content: center;
      z-index: 99999;
      box-shadow: 0 5px 5px rgb(187 197 215 / 80%);
}
.affiliate_detail_view_overlay .content .row {
      padding: 10px;
      border: 1px solid lightgray;
      border-radius: 15px;
      width: 100%;
      margin: 0;
      display: block;
      position: relative;
}
.affiliate_detail_view_overlay .content {
      background: white;
      width: 800px;
      min-width: 650px;
      height: 650px;
      border: 1px solid lightgray;
      padding: 10px;
      overflow-y: scroll;
      overflow-x: hidden;
}
.affiliate_detail_view_overlay .affiliate_image{
      width : 100%;
      height: 170px;
      background-position: center;
      background-size: cover;
}
.affiliate_detail_view_overlay .affiliate_info_wrap .affiliate_name .badge {
      color: #00a8a5;
      border: 1px solid #00a8a5;
      border-radius: 50px;
      font-size: 14px;
      padding: 5px 10px;
      margin-right: 10px;
}
.affiliate_detail_view_overlay .affiliate_info_wrap {
      height: 170px;
}
.affiliate_detail_view_overlay .affiliate_info_wrap p {
      line-height: 1.8;
}
.affiliate_detail_view_overlay .affiliate_info p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}
.affiliate_detail_view_overlay .affiliate_info {
      margin-top: 10px;
      font-size: 14px;
}
/*.affiliate_detail_view_overlay .affiliate_name {*/
/*      font-size: 18px;*/
/*      font-weight: bold;*/
/*}*/
.affiliate_detail_view_overlay .affiliate_name {
      font-size: 18px;
      font-weight: bold;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
}
.affiliate_detail_view_overlay .affiliate_detail_info #service_detail_map {
      height: 300px;
}
.affiliate_detail_view_overlay .affiliate_detail_info.map .content-wrap{
      min-height: 300px;
}
.affiliate_detail_view_overlay .affiliate_detail_info.precaution .content-wrap{
      min-height: 100px;
      font-size: 14px;
}
.affiliate_detail_view_overlay .affiliate_detail_info.introduce .content-wrap{
      min-height: 100px;
      font-size: 14px;
}
.affiliate_detail_view_overlay .close_layer_btn {
      text-align: center;
      width: 40px;
      height: 32px;
      background-color: black;
      opacity: 0.6;
      right: -10px;
      top: -10px;
      display: block;
      position: sticky;
      z-index: 9999;
      padding-top: 1px;
      margin-top: -11px;
      margin-right: -11px;
      float: right;
      color: white;
      font-weight: 100;
      cursor: pointer;
}
@media screen and (max-width: 769px) {
      .affiliate_detail_view_overlay .content {
            min-width: auto;
      }
}
.background_black_wrap {
      width: 100%;
      height: 100%;
      background-color: black;
      display: none;
      position: absolute;
      z-index: 9999;
      top: 0;
      left: 0;
      opacity: 0.5;
}



/* 커뮤니티 추가 */
.community-list {clear: both; position: relative; margin-top:8rem}
.community-tbl {margin-top:10px; border-top:2px solid #222; width:100%;}
.community-tbl th {background-color: #f5f5f5; padding:10px0; text-align: center;}
.community-tbl td {padding:10px; border-bottom:1px solid #eee}

.mapIn {background: #f9f9f9; padding:40px 30px; text-align: center;}
.mapIn h3 {font-weight: bold;}
.mapIn h3::after {content: ''; width:30px; height:3px; background: #444; position: absolute; left:50%; margin-left:-15px; margin-top:1.7em}
.mapIn p {color:#666; padding:20px 0 40px 0;}

.source {margin-top: 6rem; font-size: 12px; color:#ccc;}
.OUTLINE {stroke-linejoin:round; stroke: #ddd; stroke-width: 2;}
/* 지도별 색상 변경시
#CD45111 {fill: #f1c40f;}
#CD45113 {fill: #16a085;}
#CD45130 {fill: #f39c12;}
#CD45140 {fill: #2ecc71;}
#CD45180 {fill: #e67e22;}
#CD45190 {fill: #27ae60;}
#CD45210 {fill: #d35400;}
#CD45710 {fill: #3498db;}
#CD45720 {fill: #e74c3c;}
#CD45730 {fill: #2980b9;}
#CD45740 {fill: #c0392b;}
#CD45750 {fill: #9b59b6;}
#CD45770 {fill: #8e44ad;}
#CD45790 {fill: #34495e;}
#CD45800 {fill: #2c3e50;}
*/
.LINE {stroke-linejoin:round; stroke: #ffffff; stroke-width: 1; fill: none; }
.POINT {stroke: #ffffff; stroke-width: 1; fill: #ffffff; }
.map-text {fill: #666; font-size: 13px; font-weight: bold; text-anchor: middle; alignment-baseline: middle; font-weight: 400; }

/* MAP */
svg#jeonbuk {max-width: 800px;width: 100%; display: block; margin-left:-10%; overflow: visible; position: relative; padding-right:20%; }
g#jb-map {width:100%;}
g#jb-map path, g#jb-map polygon{fill: #f5f5f5; stroke: #ddd; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 1; stroke-dasharray: none; stroke-opacity: 1; cursor: pointer}
g#jb-map path:hover,  g#jb-map polygon:hover {fill: #00a8a5;  stroke: #007876;}
g#british-columbia path, g#nova-scotia path, g#quebec path {fill: #909090; stroke: #eeeeee; stroke-width: 10; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1; }
g#british-columbia:hover path, g#nova-scotia:hover path, g#quebec:hover path {fill: #2badd9; }
g#nt-nu path, g#newfoundland path, g#standalone path#prince-edward, g#standalone path#yukon {fill: #666; stroke: #eeeeee; stroke-width: 10; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1; }


/* -------------------------------------------------------------
QTIP
      -------------------------------------------------------------*/
area {cursor: pointer; }

.qtip {position: absolute; left: -28000px; top: -28000px; display: none; max-width: 180px; min-width: 50px; font-size: 14px; line-height: 17px;  direction: ltr; box-shadow: none; padding: 0; }
.qtip-content {position: relative; padding: 5px 9px; overflow: hidden; text-align: center;  word-wrap: break-word; }
.qtip-titlebar {position: relative; padding: 5px 35px 5px 10px; overflow: hidden; border-width: 0 0 1px;  font-weight: bold; }
.qtip-titlebar + .qtip-content {border-top-width: 0 !important; }
/* Default close button class */
.qtip-close {position: absolute; right: -9px; top: -9px;  cursor: pointer; outline: medium none; border-width: 0px; border-style: solid; border-color: transparent; }
.qtip-titlebar .qtip-close {right: 4px; top: 50%; margin-top: -9px; }
* html .qtip-titlebar .qtip-close {top: 16px; }
/* IE fix */
.qtip-titlebar .ui-icon,.qtip-icon .ui-icon { display: block; text-indent: -1000em; direction: ltr; }
.qtip-icon, .qtip-icon .ui-icon {-moz-border-radius: 0px; -webkit-border-radius: 0px;  border-radius: 0px; text-decoration: none; }
.qtip-icon .ui-icon {width: 18px; height: 14px; line-height: 14px;  text-align: center; text-indent: 0; font: normal bold 10px/13px Tahoma,sans-serif; color: inherit; background: transparent none no-repeat -100em -100em; }

.qtip-default {border-width: 1px; border-style: solid; border-color: #007876; background-color: #00a8a5; color: #ffffff;  -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; padding: 5px; }
/* IE9 fix - removes all filters */
.qtip:not(.ie9haxors) div.qtip-content,.qtip:not(.ie9haxors) div.qtip-titlebar { filter: none; -ms-filter: none; }
.qtip .qtip-tip { margin: 0 auto; overflow: hidden; z-index: 10; }
x:-o-prefocus, .qtip .qtip-tip { visibility: hidden; }
.qtip .qtip-tip,.qtip .qtip-tip .qtip-vml, .qtip .qtip-tip canvas { position: absolute; color: #123456;  background: transparent; border: 0 dashed transparent; }
.qtip .qtip-tip canvas {top: 0; left: 0; }

.qtip .qtip-tip .qtip-vml {behavior: url(#default#VML); display: inline-block;  visibility: visible; }
#qtip-overlay {position: fixed; left: 0; top: 0;  width: 100%; height: 100%; }
/* Applied to modals with show.modal.blur set to true */
#qtip-overlay.blurs {cursor: pointer; }
/* Change opacity of overlay here */
#qtip-overlay div {position: absolute; left: 0; top: 0;  width: 100%; height: 100%; background-color: black; opacity: 0.7; filter: alpha(opacity=70);  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
.qtipmodal-ie6fix {position: absolute !important; }


@media screen and (max-width:991px) {
      svg#jeonbuk {margin-left: -30%; width:90%; }
}


@media screen and (max-width:640px) {
      svg#jeonbuk {margin-left: -35%; height:50%; }
      .mapIn {padding:30px 10px}
}

.community-tbl thead tr { height: 46px;}
.community-tbl thead tr th:last-child { min-width: 70px;}


.btn-info.disabled, .btn-info:disabled {
      color: #fff;
      background-color: #c7c7c7;
      border-color: #c7c7c7;
}