@charset "utf-8";

/* 햄버거버튼 모달 */
#lean_overlay { position:absolute; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background:rgba(0,0,0,0); display: none;}
#loginmodal { width: 100%; /*팝업창의 크기조절*/
  margin-top:0;           /*팝업창 위아래 간격조절*/
  padding: 0 0 100px 0;
  background:#fff;
  /*-webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);*/
}

/* 기부출석체크 */
.donation-dayCheck { background:#468cff; padding:24px; box-shadow:inset 0px 4px 4px rgba(0,0,0,0.15);}
.donation-dayTtl { text-align:center; color:#fff; font-size:22px; font-weight:600;}
.donation-dayTtl span { color:#ffd540;}
.donation-dayTxt { text-align:center; color:rgba(255,255,255,0.8); font-weight:100;}

.donation-dayPoint { background:url(/assets/app/img/invalid_name.png) center no-repeat; background-size:123px 123px; width:123px; height:123px; margin:10px auto 15px;}
.donation-dayPoint span { display: flex; justify-content: center; align-items:center; color:#fff; font-size:22px; font-weight:800; height:100%; letter-spacing:0; text-shadow:0 1px 2px rgba(0,0,0,0.5);}

.donation-checkBtn { background:#fff; border-radius:8px; display:flow-root; padding:0 0;box-shadow:0 0 4px rgba(0,0,0,0.15); }
.donation-checkBtn li { position:relative; width:33.33%; float:left; text-align:center; padding:15px 0 16px;}
.donation-checkBtn li:after { content:''; position:absolute; right:0; top:0; height:100%; border-right:1px solid #eee;}
.donation-checkBtn li:last-child:after { content:''; border-right:none;}
.donation-checkBtn li a { color:#666;padding-top:35px; font-weight:400; width: 100%; display: inline-block}
.dayCheck-myMap { background:url(/assets/app/img/location_ic.png) center top no-repeat; width:30px; height:100%; background-size:30px 30px; }
.dayCheck-myZzim { background:url(/assets/app/img/zzimCamp_ic.png) center top no-repeat; width:30px; height:100%; background-size:30px 30px;}
.dayCheck-myFavor { background:url(/assets/app/img/favorite_ic.png) center top no-repeat; width:30px; height:100%; background-size:30px 30px;}

/* 로그인전 정보 */
.login-myinfo { clear:both;}
.login-myinfo ul { }
.login-myinfo ul li { position:relative; height:67px; line-height:67px; border-bottom:1px solid #f8f8f8;padding:0 24px;}
.login-myinfo ul li.login-myinfo-point span { float:right; display:inline-block; margin-right:20px; font-weight:800; letter-spacing:0;}
.login-myinfo ul li:after { content:''; position:absolute; right:24px; top:50%; margin-top:-6px; background:url(/assets/app/img/btn_arrow_right.png)  right center no-repeat; background-size:6px 10px; width:6px; height:10px;}
.login-myinfo ul li a { font-size:16px; color:#222; font-weight:600; display:block;}
.login-myinfo ul li.login-myinfo-ereceipt span {display:inline-block; margin-right:20px; font-weight:800; letter-spacing:0;font-size:16px; color:#222; font-weight:600;}
.login-myinfo ul li.login-myinfo-ereceipt button {width:20px;height:20px;color:#fff;font-weight:900; background-color:#b41a06;vertical-align: middle}
.login-myinfo ul li.login-myinfo-ereceipt a { display:inline-block;float:right; margin-right:20px; font-weight:800; letter-spacing:0;}

/* 컨텐츠 메뉴 */
.login-contsMenu { clear:both;}
.login-contsMenu ul { border:1px solid #eee; display:inline-block; width:100%; box-sizing:border-box;}
.login-contsMenu ul li { float:left; width:50%; height:40px; line-height:40px; text-align:center; background:#f8f8f8; border-right:1px solid #eee; border-bottom:1px solid #eee; box-sizing:border-box; }
.login-contsMenu ul li a { color:#999;font-weight:400; display:block;}
.login-contsMenu ul li:nth-child(2n+2) { border-right:none;}
.login-contsMenu ul li:nth-child(5), .login-contsMenu ul li:nth-child(6) { border-bottom:none;}

/* 카카오상담 */
.kakao-call { position:relative; border-bottom:1px solid #eee; padding-bottom:25px; }
.kakao-call ul { margin-left:48px;}
.kakao-call ul li:nth-child(1) { font-size:16px; color:#222;}
.kakao-call ul li:nth-child(2) { font-size:14px; color:#666;}
.kakao-call:before { content:''; position:absolute; left:0; top:0; background:url(/assets/app/img/ka_talt_ic.png) center no-repeat; background-size:40px 40px; width:40px; height:40px;}

.login-idpwTxt { padding-bottom:24px; overflow:hidden;}
.login-idpwTxt .fl { color:#999;}
.login-idpwTxt .fr { color:#333; font-weight:600;}

/* 로그인 sns */
.login-sns { clear:both;}
.login-sns a { width:100%; display:block; height:40px; line-height:42px; border-radius:20px; margin-bottom:16px; text-align:center; font-size:16px;}
a.login-sns-kakao { background:#ffe402; }
a.login-sns-kakao:before { content:''; display:inline-block; background:url(/assets/app/img/kakao_logo.png) center no-repeat; background-size:24px 22px; width:24px; height:22px; margin-right:7px; margin-top:-3px; vertical-align:middle;}
a.login-sns-naver { background:#06c55d; color:#fff; }
a.login-sns-naver:before { content:''; display:inline-block; background:url(/assets/app/img/naver_logo.png) center no-repeat; background-size:30px 30px; width:30px; height:30px; margin-right:7px; margin-top:-3px; vertical-align:middle;}

/* 비밀번호 재설정 */
.pwReset-tbl { padding-bottom:58px;}
.pwReset-box { padding:32px 0 16px 0; background:#fff; text-align:center; border:1px solid #eee; border-radius:8px; box-shadow:0px 4px 4px rgba(0,0,0,0.15); margin-bottom:32px;}
.pwReset-box:before { content:''; display:inline-block; background:url(/assets/app/img/phone-img.png) center no-repeat; background-size:24px 36px; width:24px; height:36px;}
.pwReset-boxTtl { font-size:22px; color:#2b2b2b; font-weight:600; padding-top:5px; padding-bottom:11px;}
.pwReset-boxTtl:after { content:''; display:inline-block; padding-right:7px; margin-bottom:2px; background:url(/assets/app/img/btn_arrow_right.png)  right center no-repeat; background-size:6px 11px; width:6px; height:11px;}
.pwReset-boxTxt { color:#999; line-height:130%;}


/* 알림설정 */
.alarm_conts { position:relative; color:#171717; padding:0; width:100%;box-sizing:border-box; }
.alarm_conts ul { overflow:hidden; border-bottom:1px solid #f8f8f8; display: flex; justify-content: space-between; align-items: center; padding:20px 24px;}
.alarm_conts li { font-size:16px; color:#222;}
.alarm_conts .alarm_txt_btn a { font-size:12px; color:#999;}
.alarm_conts .alarm_txt_btn a:after { content:''; display:inline-block; padding-right:7px; margin-bottom:-1px; background:url(/assets/app/img/btn_arrow_right.png)  right center no-repeat; background-size:6px 11px; width:6px; height:11px;}
.alarm_conts button.btn_info_ereceipt {width:20px;height:20px;color:#fff;font-weight:900; background-color:#b41a06}


.switch { position: relative; display: inline-block; width:46px; height:28px;}
.switch input { opacity: 0; width: 0; height: 0;}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right:0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;}
.slider:before {  position: absolute;  content: "";  height: 26px;  width:26px;  left:1px; bottom:1px;  background-color: white;  -webkit-transition: .4s;  transition: .4s;}
input:checked + .slider {  background-color: #468cff; left:0;}
input:focus + .slider {  box-shadow: 0 0 0 #468cff;}
input:checked + .slider:before {  -webkit-transform: translateX(17px);  -ms-transform: translateX(17px);  transform: translateX(17px);}
/* Rounded sliders */
.slider.round {  border-radius:25px;}
.slider.round:before {  border-radius:100%;}


/* 회원가입 */
.myJoin-bann { text-align:center; padding:16px 0;}
.myJoin-bann .myJoin-bannImg { padding-bottom:16px;}
.myJoin-bann .myJoin-bannImg img { width:95px; }
.myJoin-bann .myJoin-bannTxt { color:#999; line-height:130%;}
.myJoin-bannPage { margin-top:16px;}
.myJoin-bannPage a { width:6px; height:6px; border-radius:100%; background:#bdbdbd; display:inline-block;}
.myJoin-bannPage a.myJoin-pageOn { background:#646464;}

/* 탭버튼 */
.tabBtn { clear:both; width:100%; border:1px solid #e0e0e0; display:inline-block; box-sizing:border-box;}
.tabBtn li { float:left; width:50%; height:46px; line-height:46px; text-align:center; background:#fff;  box-sizing:border-box; color:#999;}
.tabBtn li a.tabBtn_on { border:1px solid #468cff; background:#eef4ff; display:block; margin-top:-1px; margin-left:-1px; color:#468cff;}

.tabBtn5col { clear:both; width:100%; border:1px solid #e0e0e0; display:inline-block;box-sizing:border-box;}
.tabBtn5col li { float:left; width:20%; height:46px; line-height:46px; text-align:center; background:#fff; border-right:1px solid #e0e0e0; box-sizing:border-box; color:#999;}
.tabBtn5col li:last-child { border-right:none;}
.tabBtn5col li a.tabBtn_on { border:1px solid #468cff; background:#eef4ff; display:block; margin-top:-1px; margin-left:-1px; color:#468cff;}

.idCheck_ic { position:relative;}
.idCheck_ic span { position:absolute; right:10px; top:0; color:#468cff; vertical-align:middle; display:inline-block;}
.idCheck_ic a:after { content:''; background:url(/assets/app/img/check_box_checkOFF.png) center 10px no-repeat; width:30px; height:30px; background-size:30px 30px; display:inline-block;}
.idCheck_ic span a { display:inline-block;}

/* 회원가입 4단계*/
.join-4step { text-align:center; font-size:24px; color:#222; font-weight:600; line-height:130%;}
.join-4step span { color:#468cff;}
.join4step_txt { font-size:16px; color:#999; line-height:130%; text-align:center;}


/* 검색 */
.search-conts { clear:both;}
.search-conts .searchInput { position:relative; height:40px; border-radius:20px; border:2px solid #468cff; background:#eef4ff url(/assets/app/img/btn_search.png) 5px center no-repeat; background-size:30px 30px; padding-left:20px; padding-top:3px; box-sizing:border-box;}
input.searchInput::-webkit-input-placeholder { color:#999; font-size:16px; font-weight:200;}
input.searchInput:-moz-placeholder { color:#999; font-size:16px; font-weight:200;}
input.searchInput::-moz-placeholder { color:#999; font-size:16px; font-weight:200;}
input.searchInput:-ms-input-placeholder { color:#999; font-size:16px; font-weight:200;}
input.searchInput::placeholder { color:#999; font-size:16px; font-weight:200;}

/* 검색 삭제 */
.delete-conts { clear:both; width:100%;}
.delete-conts li { position:relative; font-size:16px; color:#666; margin:20px 0; padding-right:40px;}
.delete-conts li span.close { position:absolute; right:0; top:50%; margin-top:-17px; display:inline-block; width:34px; height:34px; }
.delete-conts li span.close img { width:34px;}

.search-conts-keyword { margin-top:20px;}
.search-conts-keyword span { font-size:16px; color:#999; background:#eeeeee; border-radius:17px; padding:9px 16px 6px; margin-right:4px;}

/* 텍스트 타입 */
.light-txt { font-size:14px; color:#666; font-weight:200;}
.base-txt12 { font-size:12px; color:#666; font-weight:200; line-height:130%; letter-spacing:-1.09px; }
.base-txt14 { font-size:14px; color:#666; font-weight:200; line-height:130%; }
.base-txt16 { font-size:16px; color:#666; font-weight:200; line-height:130%; }

/* 탈퇴신청 ok */
.withdrawal-ok { width:100%; clear:both; position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%); }
.withdrawal-ok-txt { text-align:center; font-size:24px; color:#222; font-weight:600; line-height:130%;}
.withdrawal-ok-txt span { color:#468cff;}


/* 위치설정 */
.header-logo { text-align:center; font-size:18px; color:#222; height:inherit; display: flex; justify-content: center; align-items:center;}
.header-logo img { width:95px;}

.menu-btn { position:absolute; left:24px; top:10px;background:url(/assets/app/img/btn_menu.png) left center no-repeat; width:34px; height:34px; background-size:34px 34px;}
.menu-btn a { display:block; width:34px; height:34px;}

.main-menu-btn { position:absolute; left:24px; top:10px;background:url(/assets/app/img/btn_menu_white.png) left center no-repeat; width:34px; height:34px; background-size:34px 34px;}
.main-menu-btn a { display:block; width:34px; height:34px;}

.main-map-btn { position:absolute; right:12px; top:10px;background:url(/assets/app/img/white_ic_map.png) center no-repeat; width:40px; height:38px; background-size:16px 20px;}
.main-map-btn a { display:block;  width:34px; height:34px;}

.map-btn { position:absolute; right:12px; top:10px;background:url(/assets/app/img/tn_map.png) center no-repeat; width:40px; height:38px; background-size:16px 20px;}
.map-btn a { display:block; width:34px; height:34px;}
.map-btn-hover { position:absolute; right:-12px; top:25px; background:url(/assets/app/img/combined_shape.png) center no-repeat; width:185px; height:62px; background-size:185px 62px; display: flex; justify-content: center; align-items:center;}
.map-btn-hover span { color:rgba(255,255,255,0.5); font-size:11px; text-align:center; margin-top:5px; margin-left:5px;}

.btn-search { position:absolute; right:8px; top:50%; margin-top:-17px;}
.btn-search img { width:34px;}

.map-filter { clear:both;position:relative; margin-bottom:24px;}
.map-filter-txt { font-size:16px; color:#222; padding-right:40px; line-height:130%; }
.map-filter-txt span { display:block;}
.map-filter-ic { position:absolute; right:0; top:50%; margin-top:-16px;}
.map-filter-ic img { width:32px;}

.point-btn li { height:40px; line-height:40px; text-align:center; background:#eef4ff; border:1px solid #e3e7ed; font-size:16px; color:#8c9cb7; border-radius:4px;}
.point-btn li a {color:#8c9cb7; display:block; }
.point-btn li a.point-btn-on { background:#468cff; color:#fff; border:1px solid #468cff;border-radius:4px;}

.pay-btn li { border:1px solid #999; height:58px; color:#666;border-radius:4px; margin-bottom:9px;display: flex; justify-content: center; align-items:center;}
.pay-btn li a {color:#666; display:block; font-size:16px; text-align:center; width:100%;height: 100%; justify-content: center; display: flex; align-items: center; }
.pay-btn li a.pay-btn-on { background:#468cff; color:#fff; border:1px solid #468cff;border-radius:4px; display: flex; justify-content: center; align-items:center; width:100%; height:100%;}

/* 사용가능포인트 */
.My-pointTxt { text-align:center; color:#222; font-size:16px;}
.My-point { text-align:center; color:#222; font-size:32px; font-weight:800;}
.My-point span { text-align:center; color:#468cff; font-size:32px;}


/* calendar */
.calandar_group { float:left; padding:0 0 0 35px;}
.prevwidht { margin-left:-35px;}
input[data-type=date].ui_cal { width:74px; font-size:14px; padding:0 0 0 5px; }
input[data-type=date].ui_cal::-webkit-input-placeholder { color: #d0d0d0;}
input[data-type=date].ui_cal:-moz-placeholder { color: #d0d0d0; opacity:0.8;}
input[data-type=date].ui_cal::-moz-placeholder { color: #d0d0d0; opacity:0.8;}
input[data-type=date].ui_cal:-ms-input-placeholder { color: #d0d0d0;}
input[data-type=date].ui_cal::placeholder { color: #d0d0d0; opacity:0.8;}

/* 달력 */
.point-calcenter { position:relative; width:100%; padding-right:74px; box-sizing:border-box;}
.point-calcenter-btn { position:absolute; right:0; top:0; width:64px;}
.point-filer { float:right; color:#999;}
.point-filer span { margin-left:8px;}
.point-filer img { width:32px;}

.cal_normal { position:relative;}
.cal_normal input { height:46px; border-radius:4px; border:1px solid #e0e0e0; box-sizing:border-box;}
.cal_normal button { position:absolute; top:0; right:10px; background:url(/assets/app/img/btn_calendar_gray.png) left center no-repeat; width:20px; height:auto; min-height:35px; text-indent:-9999px; vertical-align:middle;}
.cal_normal_2 button { background:url(/assets/app/img/btn_calendar_gray.png) left center no-repeat; width:20px; height:auto; min-height:29px; text-indent:-9999px; vertical-align:middle;}
.cal_normal .Hmgt { margin-top:0 !important;}
.cal_prev button { background:url(/assets/app/img/btn_calendar.png) left center no-repeat; width:20px; height:35px; text-indetn:-9999}
.cal_next button { background:url(/assets/app/img/btn_calendar2.png) left center no-repeat; width:20px; height:35px; text-indetn:-9999}


/* select 2개 일 경우 */
.sel_2col { clear:both;}
.sel_2col:after  {content:".";clear:both;display:block;height:0;visibility:hidden;font-size:0;line-height:0;}
.sel_2col .sel_2col_L { position:relative; float:left; width:52%; padding:0 20px 0 0; box-sizing:border-box;}
.sel_2col .sel_2col_L .sel_span { position:absolute; right:0; top:4px; width:20px; text-align:center; line-height:35px; }
.sel_2col > div > selcet { width:100%;}
.sel_2col .sel_2col_R { float:right; text-align:right; width:48%; }

/* 포인트 toggld */
.accordion_do_line { border-top:1px solid #e0e0e0 !important;}
.accordion_do { margin: 0 auto; border-top: 1px solid #eeeeee;}
.accordion_do > li { border-bottom: 1px solid #eeeeee;  position: relative; }
.accordion_do > li .accordion_do_conts { display: none; padding:20px 24px 20px; border-top:1px solid #eee; box-sizing:border-box;}
.accordion_do .accordion_q { position:relative; display: block; cursor: pointer; font-weight: 600; user-select: none; padding:20px 24px 20px 24px; font-size:16px; color:#222; }
.accordion_do .accordion_q:after { content: " "; background:url(/assets/app/img/arrow_01.png) center no-repeat; background-size:30px 30px; width:30px; height:30px; position: absolute; right: 15px; top:50%; margin-top:-15px; margin-top:-15px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.accordion_do .accordion_do_conts { background:#f8f8f8; padding:24px;}
.accordion_q.active:after { transform: rotate(-180deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.active:after active { content:''; transform: rotate(-45deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}



.point-ic1 { background:url(/assets/app/img/p_icon1.png) 24px 17px no-repeat; height:24px; background-size:24px 24px; padding-left:55px !important;}
.point-ic1 span, .point-ic2 span, .point-ic3 span, .point-ic4 span { float:right; font-weight:800; margin-right:30px;}
.point-ic2 { background:url(/assets/app/img/p_icon2.png) 24px 17px no-repeat; height:24px; background-size:24px 24px; padding-left:55px !important;}
.point-ic3 { background:url(/assets/app/img/btn_close.png) 24px 20px no-repeat; height:17px; background-size:17px 17px; padding-left:55px !important;}
.point-ic4 { background:url(/assets/app/img/p_icon3.png) 24px 17px no-repeat; height:24px; background-size:26px 26px; padding-left:55px !important;}


/* 나의 기부 활동 내역 */
.MyPoint-List .My-pointTxt { text-align:center; color:#999; font-size:14px;}
.MyPoint-List li { position:relative; }
.MyPoint-List li:first-child:after { content:''; position:absolute; height:12px; width:1px; background:#e0e0e0; right:0; top:50%; margin-top:-6px;}
.MyPoint-List .My-point { text-align:center; color:#222; font-size:24px; font-weight:600;}
.MyPoint-List .My-point span { text-align:center; color:#468cff; font-size:24px;}

.donation-bar-wrap { font-size:14px; padding:0 24px 24px; overflow:hidden;}
.donation-bar { width:100%; height:4px; background:#f8f8f8; border-radius:2px;}
.donation-barIng { margin-top:10px;}
.donation-barIng .fr { font-weight:800;}
.donation-barON { position:relative; width:100%; height:4px; background:#468cff; border-radius:2px;}
.donation-barON:after { content:''; position:absolute; right:-5px; top:50%; margin-top:-5px; background:#fff; border:2px solid #468cff; width:10px; height:10px; border-radius:100%; box-sizing:border-box;}
.fund-ingIC { position:relative; background:#468cff; color:#fff; font-size:12px; padding-left:25px; padding-right:8px; padding-top:3px; padding-bottom:2px;  display:inline-block; border-radius:2px; margin-bottom:10px; }
.fund-ingIC:before { content:''; position:absolute; left:8px; top:5px; background:url(/assets/app/img/logo-white-s.png) center no-repeat; margin-right:3px; display:inline-block; background-size:13px 12px; width:13px; height:12px;}
.fund-endIC { background:#999; color:#fff; display:inline-block; padding:3px 8px 2px; font-size:12px; border-radius:2px; margin-bottom:10px;}

.fund-endIC-B { position:relative; background:#999; color:#fff; font-size:12px; padding-left:25px; padding-right:8px; padding-top:3px; padding-bottom:2px;  display:inline-block; border-radius:2px; margin-bottom:10px;}
.fund-endIC-B:before { content:''; position:absolute; left:8px; top:5px; background:url(/assets/app/img/logo-white-s.png) center no-repeat; margin-right:3px; display:inline-block; background-size:13px 12px; width:13px; height:12px;}

.fund-q { padding-bottom:0 !important;}
.fund-q ul { padding-right:20px;}

.fund-step { display: flex; justify-content: flex-end; align-items:space-between;}
.fund-step span { display:inline-block; width:25%; box-sizing:border-box; font-weight:600;}
.fund-step1 { position:relative;}
.fund-step2 { position:relative; text-align:center; }
.fund-step3 { position:relative; text-align:center;}
.fund-step4 { position:relative; text-align:right; }
.fund-onTxt { color:#468cff;}
.fund-offTxt { color:#e0e0e0;}
.fund-btn { border:1px solid #e0e0e0; background:#fff; font-size:12px; color:#999; padding:5px 8px 3px; border-radius:4px;}

/* 탭메뉴 */
.tabMenu { clear:both; }
.tabMenu ul { display:flex; flex-wrap:wrap; border:2px solid #e0e0e0; border-bottom:2px solid #222;}
.tabMenu ul li { flex:50%; height:49px; font-size:16px; color:#999; font-weight:600; display: flex; justify-content: center; align-items:center;}
.tabMenu ul li a { display: flex; justify-content: center; align-items:center; width:100%; height:100%;}
.tabMenu ul li .tabMenu-on { color:#222;border:2px solid #222; border-bottom:none; margin-top:-1px; margin-left:-2px; margin-right:-2px; padding-bottom:2px; background:#fff;}
.tabMenu ul li a.tabMenu-on {display: flex; justify-content: center; align-items:center; width:100%; height:100%;}

.tabMenu-4col ul li { flex:25%; border-right:2px solid #e0e0e0; box-sizing:border-box;}
.tabMenu-4col ul li:last-child { border-right:none; box-sizing:border-box;}
.tabMenu-4col ul li .tabMenu-on { color:#222;border:2px solid #222; border-bottom:none; margin-top:0; margin-left:-2px; margin-right:-2px; padding-bottom:2px; background:#fff;}
.tabMenu-4col ul li a.tabMenu-on {display: flex; justify-content: center; align-items:center; width:100%; height:100%;}
a.tabMenu-off { background:#f8f8f8; display:block; width:100%; height:100%;  display: flex; justify-content: center; align-items:center; color:#e0e0e0;}


.map-local { clear:both;position:relative; margin-bottom:16px;}
.map-local-txt { font-size:16px; color:#222; padding-right:40px; line-height:130%; }
.map-local-txt span { display:block; line-height:140%;}
.map-local-txt span:first-child { font-weight:800; font-size:18px; color:#4c4c4c;}
.map-local-txt .tc_blue { text-decoration:underline;}
.map-local-ic { position:absolute; right:0; top:50%; margin-top:-16px;}
.map-local-ic img { width:16px;}

.map-setTxt { color:#b6b6b6;}
.map-tag { color:#424242; margin-top:16px; }
.map-tag span { margin-right:11px;}

.map-local-on { border:2px solid #468cff;}

/* 정기 기부 */
ul.regular-list li {text-align:center;height:20px;line-height: 20px;margin-bottom:5px;}
ul.regular-list li button {width:120px;height:20px;color:#fff;font-weight:900;font-size:12px; background-color:#468cff;border-radius:4px;box-shadow: 2px 2px 1px #aaa;}
ul.regular-list li.title {text-align:left; margin-left:24px;color:#468cff; font-size:16px; font-weight:600;height:40px;line-height:40px;}
ul.regular-list li .field {text-align:center;color:#999; font-size:14px;}
ul.regular-list li .data {text-align:center;color:#468cff; font-size:14px;}
ul.regular-list li .data_end {text-align:center;color:#b41a06; font-size:14px;}

ul.regular-list-off li {text-align:center;height:20px;line-height: 20px;margin-bottom:5px;}
ul.regular-list-off li button {width:120px;height:20px;color:#fff;font-weight:900;font-size:12px; background-color:#468cff;border-radius:4px;box-shadow: 2px 2px 1px #aaa;}
ul.regular-list-off li.title {text-align:left; margin-left:24px;color:#222; font-size:16px; font-weight:600;height:40px;line-height:40px;}
ul.regular-list-off li .field {text-align:center;color:#999; font-size:14px;}
ul.regular-list-off li .data {text-align:center;color:#468cff; font-size:14px;}
ul.regular-list-off li .data_end {text-align:center;color:#b41a06; font-size:14px;}

.switch_btn {color:#999}
.switch_btn.on {color:#468cff;font-weight:600 !important}


/* 찜한 캠페인 */
.campaign-conts { text-align:center;}
.campaign-theme { background:#fff6be; color:#d4c463; padding:4px 16px 2px; border-radius:12px; display:inline-block; margin-bottom:16px;}
.campaign-theme-check { color:#666; text-decoration:underline; margin-bottom:3px;}
.campaign-theme-ttl { font-size:22px; color:#2b2b2b; font-weight:800; margin-bottom:10px; line-height:110%;}
.campaign-theme-date { clear:both; margin-bottom:15px; line-height:100%;}
.campaign-theme-date span { color:#999; letter-spacing:0; font-weight:600; padding:0 10px;}
.campaign-theme-date span.ing { padding:0 5px 0 5px;}
.campaign-theme-date span.ing:first-child { position:relative;}
.campaign-theme-date span.ing:first-child:after { content:''; position:absolute; right:0; top:4px; width:1px; height:8px; background:#e0e0e0;}

.campaign-theme-photo { position:relative;}
.campaign-theme-photo img { width:100%;  border-radius:8px; overflow:hidden;}
.campaign-theme-photo .fund-ingIC { position:absolute; top:10px; left:10px;}
.campaign-theme-photo .fund-endIC { position:absolute; top:10px; left:10px;}
.campaign-theme-photo .fund-endIC-B { position:absolute; top:10px; left:10px;}

/* 캠페인 태그 */
.campaign-tag { margin-top:17px; display:flex; flex-wrap:wrap;}
.campaign-tag .heart-sns-off { margin-right:5px;}
.campaign-tag .heart-sns-off img { width:28px; height:24px;}
.campaign-tag .heart-sns-on { background:url(/assets/app/img/heart-on.png) center no-repeat; width:28px; height:24px; background-size:28px 24px; color:#fff; font-size:11px; display: flex; justify-content: center; align-items:center; font-weight:600; margin-right:5px;}
.heart-sns-link img { width:26px;}

.campaign-bar { margin:20px 0;}
.campaign-bar-txt { margin-top:16px; font-weight:600; color:#999;}
.campaign-bar-txt span { font-weight:800; }
.campaign-bar .donation-bar { position:relative; width:calc(100% - 30px); box-sizing:border-box; }
.campaign-barON-no { position:absolute; right:-30px; top:-5px; font-size:12px; color:#262626; font-weight:800;}

.campaign-donation { color:#adadad; clear:both; overflow:hidden; margin-bottom:12px;}
.campaign-donation ul { display: flex; justify-content:space-between; align-items:space-between;}
.campaign-donation ul li { }
.campaign-donation ul li span { font-weight:800; letter-spacing:-0.8px; }
.campaign-donation ul li:last-child span { color:#373737;}

/* 공지사항 */
.notice-allTxt { font-size:16px; color:#999;}
.notice-conts .accordion_do_conts { font-size:16px;}
.notice-file { position:relative; font-size:16px; color:#222; margin-top:20px; padding-left:24px; padding-top:25px; padding-bottom:8px; border-top:1px solid #e0e0e0;}
.notice-file:before { content:''; position:absolute; left:0; top:50%; background:url(/assets/app/img/file.png) center no-repeat; width:14px; height:18px; background-size:14px 18px;}
.file-ic { margin-left:5px;}
.file-ic img { width:14px; margin-bottom:2px;}
.noticeL-ttl { font-size:16px; color:#222; font-weight:600;}
.noticeL-date { font-size:14px; color:#999; font-weight:400;}
.notice-off { background:rgba(238,238,238,1);}
.notice-body-off { background:#f8f8f8 !important;}
.accordion_do > li.notice-conts { border-bottom:1px solid #e0e0e0;}
.notice-conts .accordion_do_conts { border-top:1px solid #e0e0e0 !important;}

/* 탭메뉴 3col */
.tabMenu-3col { clear:both; padding-bottom:1px; border-bottom:1px solid #e0e0e0; }
.tabMenu-3col ul { display:flex; flex-wrap:wrap; }
.tabMenu-3col ul li { flex:33.333%; height:49px; font-size:16px; color:#999; font-weight:600; display: flex; justify-content: center; align-items:center;}
.tabMenu-3col ul li a {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.tabMenu-3col ul li .tabMenu-3col-on { color:#222; border-bottom:3px solid #222; background:#fff;}
.tabMenu-3col ul li a.tabMenu-3col-on { color:#222; display: flex; justify-content: center; align-items:center; width:100%; height:100%; font-weight:800;}

/* 이미지 width */
.imgWidth img { width:100%;}

/* 캠페인 개설수 */
.campaign-newTxt { margin-bottom:24px;}
.campaign-newTxt li { font-size:16px; color:#222; font-weight:800; }
.campaign-newTxt-p { color:#666; font-size:16px; line-height:130%; font-weight:200;}
.campaign-newB li { font-weight:800;}

.moreBtn { position:relative; text-align:center; color:#999; padding:30px 0 40px;}
.moreBtn a:after { content:''; position:absolute; left:50%; margin-left:-8px; top:47px; background:url(/assets/app/img/arrow_small_04.png) center no-repeat; width:16px; height:16px; background-size:16px 16px;}
.moreBtn a { color:#999; display:block;}

/* 사연 에디터 */
.editorConts { margin-top:5px; background:#fff; font-size:16px; padding:24px;}

/* 기부계획 */
.donation-editor-txt { text-align:center;}
.donation-editor-txt p { font-size:16px; color:#222;}
.donation-editor-txt p:nth-child(1) { font-size:20px; color:#222;}
.donation-editor-txt p span { color:#468cff;}

.donation-comp { position:relative;}
.donation-comp p { margin-top:-28px; position: absolute;  left: 50%;  top:0%;  transform: translate(-50%, 0%); background:#fff; padding:0 10px; }
.donation-comp p img { width:110px;}
.donation-compTxt { text-align:center; font-size:16px; color:#666;}
.donation-compTxt span { color:#468cff;}

.donation-compTxt-B { color:#222; font-weight:600; margin:16px 0;}
.donation-compTxt-B span { color:#5aaca8; text-decoration:underline;}

.num-li {}
.num-li li { position:relative; padding-left:15px; line-height:130%;}
.num-li li span { position:absolute; left:0; top:0;}


/* 출석체크 */
.attend-box { background:rgba(255,255,255,0.3); border-radius:8px; padding:20px 25px;}
.attend-box .attend-bullet { }
.attend-box .attend-bullet li { position:relative; padding-left:10px; padding-top:5px; padding-bottom:5px; color:#fff;}
.attend-box .attend-bullet li span { color:#ffe44f;}
.attend-box .attend-bullet li:before { content:''; position:absolute; left:0; top:12px; width:3px; height:3px; border-radius:100%; background:#fff;}
.attend-date { padding:0 15%; box-sizing:border-box;}

.attend-calendar { margin-top:40px; margin-bottom:0;}
.board_attend { display: flex; justify-content: center; align-items:center;}
.board_attend tbody td { box-sizing:border-box; position:relative;}
.board_attend tbody td span { font-size:17px; font-weight:600; width:41px; height:41px; border-radius:100%; margin:2px; display:flex; text-align:center; justify-content: center; align-items:center; padding-top:2px; box-sizing:border-box; }
.atten-cal-on { border:1px solid #e4eeff; color:#85b3ff;}
.atten-cal-off { color:#ccc; background:#eee; }
.atten-cal-onDate { position: absolute; left:4px; top:7px; width:33px !important; height:33px !important; border-radius:100%; background:rgba(70,140,255,0.8); z-index:100;}
.atten-cal-onDate img { width:30px;}
.atten-cal-R { position:absolute; right:1px; top:1px; z-index:1000;}
.atten-cal-R img { width:16px;}

.atten-box { background:#eef4ff; border:2px solid #468cff; padding:24px 24px 16px; overflow:hidden;}
.atten-boxB { background:#f8f8f8; border:2px solid #e0e0e0; border-top:none; padding:16px 24px 16px; overflow:hidden;}
.atten-point { clear:both; width:100%; display:flow-root;}
.atten-point ul { display:flow-root;}
.atten-point ul li { font-size:20px; color:#222; font-weight:600;}
.atten-point-date { color:#8c9cb7; display:block; width:100%;  display:flow-root;}
.atten-boxB .atten-point ul li { font-size:16px; color:#999; font-weight:600; line-height:150%;}


.atten-2col { margin-top:20px; margin-bottom:8px; display: flex; justify-content: flex-end; align-items:space-between;}
.atten-2col .atten-2col-L { flex:70%; margin-right:8px;}
.atten-2col .atten-2col-R { flex:30%;}
.atten-2col .atten-2col-R a.btn_gray { background:#999; color:#fff; display:block; border-radius:4px; text-align:center;}

/* 출석체크 팝업 */
.dim { position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:10000;}
.attend-popup { position:fixed; bottom:0; left:0; border-radius:30px 30px 0 0; background:#fff; width:100%; text-align:center; z-index:10000;}
.attend-popupTxt { font-size:18px;}
.attend-popupBox { position:relative;  padding:48px 0; }
.attend-popupBox .popupClose { position:absolute; right:23px; top:20px; }
.attend-popupBox .popupClose img { width:15px;}
.attend-popupCheck { position:relative; display:inline-block; margin-bottom:10px;}
.attend-popupCheck .atten-cal-on { font-size:17px; font-weight:600; width:41px; height:41px; border-radius:100%; margin:2px; display:flex; text-align:center; justify-content: center; align-items:center; padding-top:2px; box-sizing:border-box;}
.attend-popupCheck .atten-cal-onDate { position:absolute; left:6px; top:6px; }


/* 기부참여 개인 */
.withTogther .base-txt16 { color:#222; font-weight:400; padding-bottom:24px; }
.withTogther-ttl { font-size:16px; color:#2b2b2b; padding-bottom:8px;}

.withToghter-btn { border:1px solid #999; height:60px; color:#666;border-radius:4px; margin-bottom:9px; display: flex;justify-content: center;align-items: baseline;align-content: stretch;flex-direction: column;}
.withToghter-btn a {color:#666; display:block; font-size:16px; text-align:center; }
.withToghter-btn p { width:100%; font-size:16px;}
.withToghter-btn p:nth-child(2) a { font-size:14px !important; color:#b8b8b8;}
.withToghter-btn p:nth-child(2) a span { font-size:14px; color:#468cff;}


/* 기부참여 땡스 */
.thanks-txt { width:100%; text-align:center; font-size:24px; color:#222; font-weight:800; padding:30px 0 20px;}
.thanks-txt:before { content:''; display:inline-block; background:url(/assets/app/img/img.png) center no-repeat; width:80px; height:64px; background-size:80px 64px;}
.thanks-txt p { line-height:120%;}
.thanks-txt p:nth-child(1) { padding-top:10px;}
.thanks-txt p:nth-child(2) { font-weight:400;}


/* onBoarding */
.onbording-conts { position: absolute;  left: 50%;  top: 45%;  transform: translate(-50%, -45%); width:100%; }
.onbording-h1 { text-align:center;}
.onbording-h1 img { width:210px;}
.h1-txt { text-align:center; font-size:15px; color:#222;}
.h2-txt { text-align:center; font-size:15px; color:#fff; font-weight:200;}
.h4-txt { text-align:center; font-size:32px; color:#fff;}
.onbording3-back { position:absolute; bottom:0; left:0; width:100%;}
.onbording3-back img { width:100%;}
.onbording3-back p { width:100%;  position: absolute;  left: 50%;  top: 100%;  transform: translate(-50%, -100%); font-size:12px; color:#5d8cd9; text-align:center; padding-bottom:24px;}

/* onBoarding2 */
.onbording-contsBack2 { background:url(/assets/app/img/onboarding_02_img.png) center bottom no-repeat; background-size:cover; width:100%; height:100%;}


/* onBoarding1 */
.onbording-contsBack1 { background:#468cff; background-size:cover; width:100%; height:100%;}
.onbording1-copy { color:rgba(255,255,255,0.5) !important;}

/* onBoarding4 */
.onbording-contsBack4 { background:#468cff; background-size:cover; width:100%; height:100%;}
.onbording-h4 { text-align:center; margin-bottom:15px;}
.onbording-h4 img { width:180px;}


/* 0827 추가 sns */
.etc-snsWrap { clear:both; }
.etc-snsConts { margin-top:15px; display: flex; justify-content: center; align-items: flex-start;}
.etc-snsConts a { width:72px; margin:0 3px;}
.etc-snsConts a img { width:72px;}
.etc-snsConts a.etc-sns-url { width:72px; height:72px; border-radius:100%; background:#468cff; color:#fff; display: flex; justify-content: center; align-items: center; font-size:16px; line-height:120%; font-weight:400;}


/* 회사소개 0916 */
.commp-h1 { position:absolute; left:0; top:45px;}
.commp-h1 img { width:195px;}
.company-conts { position:relative; width:100%; height:536px; background:url(/assets/app/img/visual_top.png) center no-repeat; background-size:cover;}
.company-body { position:relative; clear:both; width:1040px; height:100%; margin:0 auto;}
.company-top { padding-top:50px;}
.company-top:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.comp-menu { text-align:right; padding-left:300px; margin-top:12px;}
.comp-menu li { float:left; width:20%; text-align: center;}
.comp-menu li a { font-size:18px; color:#55575b; font-weight:600;}

.company-v-txt { height:calc(100% - 80px); display: flex; justify-content: flex-start; align-items:center;}
.company-txt { color:#468cff; font-size:48px; font-weight:600;}
.company-txt span { display:block; line-height:130%;}

.comp-mobile { /*width:650px; margin:0 auto;*/ clear:both;}

.comp-title { color:#222; font-size:36px; font-weight:600; line-height:110%; margin-top:80px; margin-bottom:24px;}
.comp-txt { color:#666; font-size:20px; font-weight:100; line-height:130%; letter-spacing:-1px;}
.comp-img1 { margin:30px 0;}
.comp-img1 img { width:640px; }
.comp-img1-mobile { display:none;} /* 모바일 회사소개 버전 */

.comp-video {
  margin:50px auto 80px;
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 50%;
  max-width: 640px;
}
.comp-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.comp-news { clear:both; width:640px; margin:0 auto 50px; overflow:hidden;}
.comp-news li { font-size:20px; text-decoration:underline; color:#468cff; margin:16px 0; text-align:left;font-weight:100;}
.comp-news li a { font-weight:100;}

.comp-sns { width:640px; margin:0 auto; display: flex; justify-content: space-between; align-items:center;}
.comp-sns a { border:1px solid #c8c8c8; height:50px; line-height:50px; flex: 0 0 calc(50% - 10px); box-sizing:border-box; border-radius:4px;}
.comp-sns-google img { width:100px; height:auto;}
.comp-sns-apple { font-size:16px; color:#222;}
.comp-sns-apple img { width:18px; height:auto; margin-right:10px; vertical-align:middle;}


.comp-mobile-menu { display:none;}

.comp-mapimg img { width:390px;}
.comp-graphimg img { width:350px;}

/* 랭크 */
.ranking-wrap { clear:both; width:100%; }
.rank-visual { background:#468cff; }
.rank-visual-body { position:relative; background:url(/assets/app/img/bg_img.png) center no-repeat; max-width:560px; height:275px; background-size:cover; margin:0 auto; text-align:center;}
.rank-visual-txt1 { color:rgba(255,255,255,0.6); font-size:16px; font-weight:200; width:100%; position: absolute; left: 50%;  top:20px;  transform: translate(-50%, 20px); }
.rank-visual-txt2 { color:#fff; font-size:26px; font-weight:900; width:100%; position: absolute; left: 50%;  top:30px;  transform: translate(-50%, 30px);}
.rank-visual-txt3 { color:rgba(255,255,255,0.6); font-size:14px; width:100%; position: absolute; left: 50%;  top:120px;  transform: translate(-50%, 120px);}

.rank-icon-box { clear:both; display: flex; flex-wrap: wrap; margin-top:20px;}
.rank-icon-box ul { position:relative; flex: 0 0 calc(50% - 10px); margin-right:20px; margin-bottom:16px; border:1px solid #e3e7ed; border-radius:8px; box-sizing:border-box; padding:90px 0 20px; }
.rank-icon-box ul:nth-child(2n+2) { margin-right:0;}
.rank-icon-box ul li { text-align:center; font-size:14px; color:#999; line-height:170%;}
.rank-icon-box ul li span { text-align:center; font-size:18px; color:#222; font-weight:600;}
.rank-icon-1:after { content:''; position: absolute; left: 50%;  top:0; transform: translate(-50%, 20px); width:58px; height:58px; background-size:58px 58px; background:url(/assets/app/img/rank_ic_01.png) center no-repeat; background-size:cover;}
.rank-icon-2:after { content:''; position: absolute; left: 50%;  top:0; transform: translate(-50%, 20px); width:58px; height:58px; background-size:58px 58px; background:url(/assets/app/img/rank_ic_02.png) center no-repeat; background-size:cover;}
.rank-icon-3:after { content:''; position: absolute; left: 50%;  top:0; transform: translate(-50%, 20px); width:58px; height:58px; background-size:58px 58px; background:url(/assets/app/img/rank_ic_03.png) center no-repeat; background-size:cover;}
.rank-icon-4:after { content:''; position: absolute; left: 50%;  top:0; transform: translate(-50%, 20px); width:58px; height:58px; background-size:58px 58px; background:url(/assets/app/img/rank_ic_04.png) center no-repeat; background-size:cover;}
/* 랭킹 그래프 */
.rank-graph { clear:both; width:100%; margin-top:15px;}
.rank-graph .rank-grpah-list { position:relative; width:calc(100% - 70px); height:33px; margin-bottom:8px; }
.rank-grpah-bar { position:absolute; left:0; top:0; width:100%; box-sizing:border-box; height:100%; display:block; border-radius:0 4px 4px 0; }
.rank-graph .rank-grpah-list ul { position:relative; z-index:100; padding-left:15px; box-sizing:border-box;}
.rank-graph .rank-grpah-list ul li { line-height:33px; font-weight:600;}
.rank-graph .rank-grpah-list ul li:first-child { float:left;}
.rank-graph .rank-grpah-list ul li:last-child { float:right; position:absolute; right:-70px;}
.rank-lightblue-bar { background:#d3e4ff; }
.rank-blue-bar { background:#468cff; width:calc(100% - 90px);}
.rank-lightblue-txt { color:#4a73b7;}
.rank-blue-txt { color:#fff;}

.rank-donation { clear:both;}
.rank-donation-txt { margin-top:10px; font-size:16px; line-height:130%; color:#666; font-weight:200;}

.rank-ranking-conts { clear:both; padding-bottom:50px; margin-top:10px; }
.rank-ranking-conts ul { border-bottom:1px solid #eeee; box-sizing:border-box;}
.rank-ranking-conts ul li { border-top:1px solid #eeee; position:relative; padding-left:110px;}
.rank-ranking-conts .ranking-no1 { height:87px; line-height:87px; }
.rank-ranking-conts .ranking-no2 { height:47px; line-height:47px;}
.rank-ranking-conts .ranking-no3 { height:47px; line-height:47px;}
.rank-ranking-conts .ranking-no1:after { content:''; position:absolute; left:0; top:0; background:url(/assets/app/img/medal_icon_1.png) 25px center no-repeat; width:100%; height:67px; background-size:64px 67px; }
.rank-ranking-conts .ranking-no2:after { content:''; position:absolute; left:0; top:0; background:url(/assets/app/img/medal_icon_2.png) 40px center no-repeat; width:100%; height:32px; background-size:32px 32px;}
.rank-ranking-conts .ranking-no3:after { content:''; position:absolute; left:0; top:0; background:url(/assets/app/img/medal_icon_3.png) 40px center no-repeat; width:100%; height:32px; background-size:32px 32px;}
.ranking-name { font-size:16px; color:#222; font-weight:600; width:50%; display:inline-block; letter-spacing:1px;}
.ranking-tel { font-size:16px; color:#666; font-weight:400;}

button.btn_info_ereceipt {width:20px;height:20px;color:#fff;font-weight:900; background-color:#b41a06;line-height: 20px;vertical-align: middle}

/****************************************************************************************/
/****************************************************************************************/
/*Media Query*/
/****************************************************************************************/
/****************************************************************************************/

@media (max-width:1040px) {

  .company-body { width:100%; padding:0 24px; box-sizing:border-box;}
  .company-top { display:none;}
  .comp-mobile-menu { display:block;}
  .comp-news { width:100%;}
  .comp-sns { width:100%; }

}

@media (max-width:640px) {

  .comp-news { width:100%;}
  .comp-news li { font-size:16px; }
  .comp-bannimg img { width:100%;}

  .company-v-txt { display:block; text-align:center;}
  .company-txt { font-size:26px; padding-top:50px;}
  .comp-title { font-size:18px; text-align:left;}
  .comp-txt { font-size:16px; text-align:left;}

  /* 모바일비주얼 */
  .company-conts { position:relative; width:100%; height:476px; background:url(/assets/app/img/visual_top_m.png) center no-repeat; background-size:cover;}


  .comp-img1 img { width:640px; display:none;}/* pc 회사소개 버전 */
  .comp-img1-mobile { display:block;}


}




@media (max-width:410px) {

  .comp-mapimg img { width:100%;}
  .comp-graphimg img { width:100%;}

}