@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;500;700&family=Roboto:wght@300;400;500;700&display=swap');

* {padding: 0; margin: 0; list-style-type: none; box-sizing: border-box;}
a {text-decoration: none; color: #333;}
html {font-size: 0.625em; font-family: 'Roboto', 'Noto Sans KR', sans-serif; overflow-x: hidden;}
body {position: relative; width: 100%; height: 100%; background: #fff; color: #363636; font-size: 1.6rem; letter-spacing: -0.1rem; background: #316cf4;}
i {font-style: normal;}
.btn {display: inline-block; padding: 0.375rem 0.75rem; line-height: 1.5; font-weight: 400; text-align: center; vertical-align: 4%; border: 1px solid transparent; font-size: 1.6rem; cursor: pointer; transition: 0.3s;}
.blind {position: absolute; top: -9999px; left: -9999px;}

.inner {width: 90%; margin: 0 auto;}
.pr-header {position: fixed; top: 0; left: 0; width: 100%; background: transparent; z-index: 5;}
.pr-topbar {display: flex; justify-content: space-between; align-items: center; padding: 20px 0;}

.pr-nav {display: none; position: fixed; top: 70px; left: 0; width: 100%; padding-bottom: 20px; background: #316cf4; z-index: 1;}
.pr-nav .nav-ul {display: flex; justify-content: space-between; padding-top: 20px;}
.pr-nav .nav-li {flex: 0 0 31.5%; max-width: 31.5%;}
.pr-nav .nav-link {display: block; padding: 70px 0 10px; background: #1b4fc8 url(../img/icon_bible.png) no-repeat 50% 35%/40px; border-radius: 5px; text-align: center; color: #fff;}
.pr-nav .nav-li:nth-of-type(1) .nav-link {background-image: url(../img/icon_bible.png);}
.pr-nav .nav-li:nth-of-type(2) .nav-link {background-image: url(../img/icon_pray.png); background-position: 50% 28%;}
.pr-nav .nav-li:nth-of-type(3) .nav-link {background-image: url(../img/icon_home2.png);}

.pr-user {padding: 20px 0 0; text-align: center;}
.pr-user .name {color: #fff;}
.pr-user .user-dd {display: none; margin: 15px 0 20px; background: #fff; border-radius: 3px; text-align: left;}
.pr-user .user-ul {padding: 15px;}
.pr-user .user-link {display: block; line-height: 1.7;}
.pr-user .btn-user.active .icon-arrow-w {transform: rotate(180deg);}

.icon {display: inline-block; width: 10px; height: 10px; margin-left: 10px; margin-top: -0.15rem; vertical-align: middle;}
.icon-arrow-w {background: url(../img/icon-arrow.png) no-repeat center/contain; transition: 0.4s;}

/* btn */
.btn-home {width: 30px; height: 30px; background: url(../img/icon_home.png) no-repeat center/25px;}
.btn-nav {position: relative; width: 24px; height: 21px; background: transparent;}
.btn-nav span {position: absolute; left: 0; width: 100%; height: 3px; background: #fff; border-radius: 20px; transition: 0.4s;}
.btn-nav span:nth-child(1) {top: 0;}
.btn-nav span:nth-child(2) {top: 50%; transform: translateY(-50%);}
.btn-nav span:nth-child(3) {bottom: 0;}
.btn-nav.active span:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}
.btn-nav.active span:nth-child(2) {top: 50%; transform: translateY(-50%); opacity: 0;}
.btn-nav.active span:nth-child(3) {bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg);}
.btn-add {position: relative; width: 40px; height: 40px; border-radius: 50%; background: #326cf4;}
.btn-add:before, .btn-add:after {content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 3px; background: #fff;}
.btn-add:before {transform: translate(-50%, -50%) rotate(90deg);}
.btn-add:after {transform: translate(-50%, -50%);}
.pr-title .btn-add {position: fixed; bottom: 70px; right: 7%;}
.btn-user {background: transparent;}
.btn-history {width: 35px; height: 35px; background: url(../img/icon-list.png) no-repeat center/28px;}
.btn-pray {width: 50px; height: 50px; border-radius: 50%; background: #fff url(../img/icon_hand.png) no-repeat 102% 97%/40px;}
.btn-pray.disabled, .btn-pray:disabled {background-color: #818181; background-image: url(../img/icon_hand_w.png);}
.btn-search {position: relative; width: 30px; height: 30px; background: url(../img/icon-search.png) no-repeat 50% 50%/18px;}
.btn-top {position: fixed; bottom: 22px; right: 7%; width: 40px; height: 40px; border-radius: 50%; background: #e68b20; border: 1px solid #e68b20; z-index: 10;}
.btn-top:before, .btn-top:after {content: ""; position:absolute; width: 13px; height: 3px; background: #fff;}
.btn-top:before {top: 17px; left: 16px; transform: rotate(45deg);}
.btn-top:after {top: 17px; left: 9px; transform: rotate(-45deg);}

/* main */
.pr-main {margin-top: 70px;}
.main-visual {height: calc(100vh - 70px); background: #fff;}
.main-visual img {display: block; max-width: 100%; margin: 0 auto;}
/* footer */
.pr-footer {position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 15px; background: #fff; border-top: 1px solid #ddd; text-align: center; font-size: 1.2rem;}
/* pr-container */
.pr-v2 {background: #343434;}
.pr-v3 {background: #191818;}
.pr-v4 .pr-container {background: #fff;}
.pr-container {margin-top: 0; padding-bottom: 50px;}
.pr-title {position: fixed; width: 100%; height: 70px; background: #316cf4; border-top: 1px solid #235ada; font-weight: 500; text-align: center;z-index: 2;}
.pr-title .tx {position: absolute; width: 100%; top: 50%; color: #fff; font-size: 2.9rem; font-weight: 400; transform: translateY(-50%);}

.pr-lnb {position: fixed; top: 70px; width: 100%; z-index: 2;}
.pr-lnb a {display: block; text-align: center;}
.pr-lnb .dep01 {display: flex; border-radius: 0 0 30px 30px; box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.2); overflow: hidden;}
.pr-lnb .dep01-li {flex: 0 0 25%; max-width: 25%;}
.pr-lnb .colum03 .dep01-li {flex: 0 0 33.333%; max-width: 33.333%;}
.pr-lnb .dep01-link {display: block; width:100%; padding: 15px 0; border: none; background: #1743a6; color: #fff; line-height: 30px; font-size: 1.6rem;}
.pr-lnb .dep01-link.active {background: #0e2864;}
.pr-lnb .dep01-link.active .icon-arrow-w {transform: rotate(180deg);}
.pr-lnb .dep02 {display: none; position: fixed; top: 130px; width: 24.9%; padding: 10px 0; border-radius: 0 0 3px 3px; background: #fff;}
.pr-lnb .dep02-link {line-height: 2.0;}
/* .pr-v3 */
.pr-v3 .pr-lnb .dep02 {width: 33.2%;}
.pr-v3 .pr-list {padding-bottom: 30px;}
.pr-v3 .pr-card {padding: 25px 20px; background: #363636;}
.pr-v3 .pr-card .card-cont {padding: 15px 10px 0 10px;}
.pr-v2 .pr-footer {background-color: transparent; color: #666; border-color: #666;}
.pr-v3 .pr-footer {background-color: transparent; color: #666; border-color: #666;}

.pr-cont {padding: 160px 0 50px;}
.pr-list {padding-bottom: 20px;}
.pr-card {position: relative; padding: 25px; margin-bottom: 15px; background: #585858; border-radius: 30px; color: #fff; box-shadow: 1px 1px 10px rgba(0,0,0,0.3);}
.pr-card .title {font-size: 2.6rem; font-weight: 500;}
.pr-card .sub-title {font-size: 1.8rem; font-weight: 500;}
.pr-card .btn-history {position: absolute; top: 25px; right: 25px;}
.pr-card .card-cont {padding-top: 20px;}
.pr-card .card-cont .date {font-size: 1.9rem;}
.pr-card .card-cont .tx {padding-bottom: 15px; line-height: 1.4;}
.pr-card .card-footer {display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
.pr-card .progress { flex: 0 0 80%; max-width: 80%; height: 10px; border-radius: 20px; background: rgba(0,0,0,0.2); box-shadow: inset 4px 2px 4px rgba(0,0,0,0.4); overflow: hidden;}
.pr-card .progress-per {width: 20%; height: 100%; background: yellow; border-radius: 30px; box-shadow: 1px 5px 10px 5px rgba(0,0,0,0.4); transition: 0.4s;}
.pr-card .pray-text {color:#e2f13c;}
.pr-card .pray-text .pray-num {padding: 0 5px; font-size: 3.5rem;}
.pr-list .pr-btn {display: flex; width: 98%; margin: 10px auto; align-items: center; justify-content: space-between;}
.pr-list .pr-btn .btn {flex: 0 0 11.111%; max-width: 11.111%; position: relative; padding: 25px 0 0 0; background-color: transparent; color: #fff; line-height: 1.1; font-size: 1.2rem;}
.pr-list .pr-btn .btn:before {content: ""; position: absolute; top: 0; left: 50%; width: 20px; height: 20px; border-radius: 50%; background: #fff; transform: translate(-50%);}
.pr-list .pr-btn .btn:after {content: ""; position: absolute; top: 1px; left: 50%; width: 20px; height: 20px;background: url(../img/icon_check_w.png) no-repeat center/12px; transform: translate(-50%); opacity: 0; transition: 0.4s;}
.pr-list .pr-btn .btn.active:after {opacity: 1;}
.pr-list .pr-btn .btn-color01:before {background: #8edb3e;}
.pr-list .pr-btn .btn-color02:before {background: #66cbb6;}
.pr-list .pr-btn .btn-color03:before {background: #4dabef;}
.pr-list .pr-btn .btn-color04:before {background: #7660e8;}
.pr-list .pr-btn .btn-color05:before {background: #9850c9;}
.pr-list .pr-btn .btn-color06:before {background: #f65aab;}
.pr-list .pr-btn .btn-color07:before {background: #e68336;}
.pr-list .pr-btn .btn-color08:before {background: #edc83b;}
.pr-list .pr-btn .btn-color09:before {background: #d6d2d2;}
.pr-list .pr-btn .btn-color09:after {background-image: url(../img/icon_check_red.png);}

@media screen and (min-width: 1024px){
	.pr-cont .inner {display: flex; flex-wrap: wrap; justify-content: flex-start;}
	.pr-cont .pr-list {flex: 0 0 31.333%; max-width: 31.333%; margin-right: 3%;}
	.pr-cont .pr-list:nth-child(3n) {margin-right: 0;}
}

/* address */
.pr-infotop {display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px;}
.pr-infotop .page-num {display: flex; align-items: center; color: #fff;}
.pr-infotop .page-num .num {display: inline-block; width: 45px; height: 45px; margin-left: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); line-height: 43px;}
.pr-infotop .page-num select.num {appearance: none; color: #fff; font-size: 1.6rem; text-indent: 10px;}

.pr-infotop .search {position: relative;}
.pr-infotop .search .form-control {height: 40px; background: #282727 url(../img/icon-search.png) no-repeat 93% 50%/18px;}
.pr-infotop .search .btn {position: absolute; top: 50%; right: 8px; width: 28px; height: 20px; transform: translateY(-50%);}

@media screen and (min-width: 1024px){
	.pr-infotop {flex: 0 0 100%; max-width: 100%;}
}

.pr-list .pr-card.thumb:after {position: absolute; top: -14px; right: 0; 
	display: inline-block; width: 105px; height: 50px; border-radius: 30px 30px 0 30px;
	color: #363636; font-size: 2.0rem; font-weight: 800; line-height: 49px; text-align: center;}

.pr-list .pr-card.thumb.youth:after {content:"청년회";background-color:springgreen;}
.pr-list .pr-card.thumb.mother:after {content:"어머니회"; background-color: #fd4c87; color: #fff;}
.pr-list .pr-card.thumb.father:after {content:"봉사회";background-color:#4379e9; color: #fff;}
.pr-list .pr-card.thumb.student:after {content:"학생회";background-color:#9a3ff5; color: #fff;}
.pr-list .pr-card.thumb.sliver:after {content:"은장회";background-color:#e2f13c;}
.pr-list .pr-card.thumb.child:after {content:"유초등부";background-color:#ff932a; color: #fff;}

.card-user {display: flex; align-items: center; padding: 0 5px 20px 5px; border-bottom: 1px solid rgba(255,255,255,0.2);}
.card-user .user-img {position: relative; width:100px; height: 100px; border: 1px solid #fff; border-radius: 50%; overflow: hidden;}
.card-user .user-img img {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
.card-user .user-info {margin-left: 15px;}
.card-user .user-info .area {color: #9b9b9b;}
.card-user .user-info .area .num {padding-right: 3px; font-size: 3.0rem; font-weight: 500;}
.card-user .user-info .name {margin: -6px 0 -1px; font-size: 3.0rem; font-weight: 500;}
.card-user .user-info .phone {font-size: 2.3rem; color: #6ca3ff!important; font-weight: 500;}
.card-user .user-info a.phone, .card-user .user-info a {font-size: 2.3rem; color: #6ca3ff; font-weight: 500;}

.card-cont ul {margin-bottom: 10px;}
.card-cont ul li {display: inline-block;}
.card-cont ul li:after {content: "/"; padding: 0 5px;}
.card-cont ul li:last-child:after {content: none;}
.card-cont .p1 {font-size: 1.9rem;}
.card-cont .p2 {margin-bottom: 10px; opacity: 0.8; line-height: 1.3;}
.card-cont .p3 {color: #9dff8d; opacity: 0.6;}

/* bible */
.bible-cont {position: relative; padding: 30px 0; border-bottom: 1px solid #ddd; z-index: 1;}
.bible-cont:last-child {border-bottom: none;}
.bible-title {margin-bottom: 20px; text-align: center;}
.bible-title .tx {font-weight: 400;}
.bible-detail .inner {display: flex; flex-wrap: wrap; justify-content: space-between;}
.bible-num {position: relative; flex: 0 0 33px; max-width: 33px; height: 33px; margin: 5px; border-radius: 50%; color: #333;}
.bible-num:after {content: ""; position: absolute; top: -3px; left: -3px; width: 38px; height: 38px; border-radius: 100% 100% 8px 100%; background: #0464cc; z-index: -1; opacity: 0;}
.bible-num.active:after {opacity: 1;}

/* form */
.form-control {
	display: block; width: 100%;height: calc(1.5em + 0.75rem + 2px);padding: 0.375rem 0.75rem;
	font-size: 1.6rem;font-weight: 400;line-height: 1.5;color: #6e707e; text-indent: 8px;
	background-color: rgba(255,255,255,0.1); background-clip: padding-box; border-radius: 30px; border: 2px solid rgba(255,255,255,0.4);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media screen and (prefers-reduced-motion: reduce) {
	.form-control {transition: none;}
}
.form-control::-ms-expand { background-color: transparent;border: 0;}
.form-control:focus {color: #6e707e; box-shadow: 0 0 0 0.1rem rgb(13, 142, 205, 0.7);}
.form-control::-webkit-input-placeholder {color: rgba(255,255,255,0.4);opacity: 1;font-size: 1.6rem;}
.form-control::-moz-placeholder {color: rgba(255,255,255,0.4);opacity: 1;font-size: 1.6rem;}
.form-control:-ms-input-placeholder {color: rgba(255,255,255,0.4);opacity: 1;font-size: 1.6rem;}
.form-control::-ms-input-placeholder {color: rgba(255,255,255,0.4);opacity: 1;font-size: 1.6rem;}
.form-control::placeholder {color: rgba(255,255,255,0.4);opacity: 1; font-size: 1.6rem;}
.form-control:disabled, .form-control[readonly] {background-color: #eaecf4; opacity: 1;font-size: 1.6rem;}
select.form-control:focus::-ms-value {color: #6e707e; background-color: #fff;font-size: 1.6rem;}
.form-control-file, .form-control-range {display: block; width: 100%;font-size: 1.6rem;}

@media screen and (max-width: 767.98px) {
	.form-control {font-size: 1.6rem;}
	.form-control::-webkit-input-placeholder {font-size: 1.6rem;}
	.form-control::-moz-placeholder {font-size: 1.6rem;}
	.form-control:-ms-input-placeholder {font-size: 1.6rem;}
	.form-control::-ms-input-placeholder {font-size: 1.6rem;}
	.form-control::placeholder {font-size: 1.6rem;}
	.form-control:disabled, .form-control[readonly] {font-size: 1.6rem;}
	select.form-control:focus::-ms-value {font-size: 1.6rem;}
}
@media screen and (max-width: 575.98px) {
	.form-control {font-size: 1.6rem;}
	.form-control::-webkit-input-placeholder {font-size: 1.6rem;}
	.form-control::-moz-placeholder {font-size: 1.6rem;}
	.form-control:-ms-input-placeholder {font-size: 1.6rem;}
	.form-control::-ms-input-placeholder {font-size: 1.6rem;}
	.form-control::placeholder {font-size: 1.6rem;}
	.form-control:disabled, .form-control[readonly] {font-size: 1.6rem;}
	select.form-control:focus::-ms-value {font-size: 1.6rem;}
}