@charset "utf-8";

/*
 * member CSS Document
 */




/* 회원 */
.area_admin{margin:100rem auto;}
.area_admin .title{display:block;margin-bottom: 20rem; margin-top:0; font-size: 35rem;color:#222;font-weight: 600;letter-spacing:-1rem;text-align: center;}

.join_area h3{margin:30rem 0 15rem; font-size:22rem; color:#222; letter-spacing:-1rem;}
.join_area h2{font-size:30rem; color:#222; font-weight:500; text-align:center; letter-spacing:-1rem;}
.join_area > p{margin-top:20rem; text-align:center; font-size:16rem; color:#494949; font-weight:300; letter-spacing:-1rem;}
.join_area textarea{width:100%; height:250rem; box-sizing:border-box; padding:15rem; border:1rem solid #dbdbdb; resize:none;}
.join_area .check{padding-top:15rem; text-align:right;}
.join_area .box{padding-bottom:30rem; border-bottom:1rem dashed #d0d0d0;}
.join_area .box:last-child{border-bottom-width:0rem;}
.join_area .box.join{max-width:500rem; box-sizing:border-box; margin:0 auto; border-bottom-width:0rem;}
.list_login li{position:relative; box-sizing:border-box; padding-top:20rem;}
.list_login li:before{content:''; opacity:0.6; display:block; position:absolute; top:50%; right:0rem; width:16rem; height:18rem; margin-top:-9rem; transition:all 0.5s ease 0s;}
.list_login li label{display:none; position:absolute; top:50%; left:0rem; color:#666; font-weight:300; transform:translateY(-50%); transition:all 0.3s ease-in-out;}
.list_login li input{width:100%; height:70rem;padding:15rem 20rem; background-color:transparent; border:0rem; border:1rem solid #e2e2e2;}
.list_login li input:hover,
.list_login li input:focus{outline:none;}
.list_login li input::placeholder{color:#999; font-weight:500}

.join_area .box.join .btn_login{display:block;width:100%;padding:20rem 0;margin-top:40rem;background:#15519b;color:#fff;font-size: 18rem;font-weight: 500;text-align:center;transition:all 0.5s cubic-bezier(0, 0, 0.21, 0.87) 0s;}
.join_area .box.join .btn_login:hover{background:#41464e; color:#fff; box-shadow:5rem 15rem 20rem rgba(0,0,0,0.15);}
.btn_area.member{display:flex;justify-content: flex-end; margin-top:20rem;}
.btn_area.member > a{position:relative; padding-left:15rem; margin-left:15rem; color:#777}
.btn_area.member > a:after{content: ""; display: block; position: absolute; width:1rem; height: 10rem; left:0; top: 50%; background-color: #ccc; transform: translateY(-50%);}
.btn_area.member > a:first-child:after{display:none;}

.btn_area{text-align:center;}
.btn_area.sns{text-align:center;padding:40rem 0; border-bottom:1rem solid #ddd;}
.btn_area.sns p{margin-bottom:20rem; font-size:18rem}
.btn_area.sns ul{display:flex;justify-content: center;}
.btn_area.sns ul li{margin:0 10rem}
.btn_area.sns ul li img{height:55rem}

/* 아이디찾기 */
.find{max-width:500rem; box-sizing:border-box; margin:0 auto; text-align:center;}
.find > .text{padding:30rem 0; border-top:1rem solid #ddd; border-bottom:1rem solid #ddd;}
.find > .text h4{margin-bottom:15rem; font-size:22rem; font-weight:500}
.find > .text p{line-height:1.7; color:#555; font-weight:300}
.find > .text span{display:block; margin-top:15rem; text-align:left; color:#666; font-size:15rem;}
a.btn_join{display:block;width:100%;padding:20rem 0;margin-top:40rem;background:#15519b;color:#fff;font-size: 18rem;font-weight: 500;text-align:center;transition:all 0.5s cubic-bezier(0, 0, 0.21, 0.87) 0s;}
a.btn_join:hover{background:#41464e; color:#fff; box-shadow:5rem 15rem 20rem rgba(0,0,0,0.15);}


/* 회원가입 */
.add{line-height:1.7; color:#555; font-weight:300; text-align:center}
.member_wrap{width:1023rem; margin:0 auto;}
.member_wrap .box h3{font-size:22rem; font-weight:500}
.member_wrap .btn_area{margin-top:30rem; text-align:center;}
.member_wrap .bbsView{margin-top:30rem}
.bbsView{border-top:2rem solid #111; margin-top:15rem}
.bbsView > tbody > tr > td > p{position:relative; margin-top:10rem; padding-left:12rem; font-weight:500; font-size:14rem}
.bbsView > tbody > tr > td > p:before{content:''; position:absolute; left:0; top:8rem; display:block; width:4rem; height:4rem; background:#aaa}

.p_prove {display: flex; flex-direction: column; align-items: center;}
.p_prove .phone{box-sizing:border-box; width:500rem; margin-top:30rem; padding:60rem; background:#f6f6f6; text-align:center;}
.p_prove .phone img{height:220rem;}

.member_wrap input[readonly], .member_wrap input[disabled] {background: #eee;}

.member_wrap.end{width:500rem;}
.member_wrap.end .text{padding:30rem 0; border-top:1rem solid #ddd; border-bottom:1rem solid #ddd;}
.member_wrap.end .text .img{margin-bottom:30rem; text-align:center;}
.member_wrap.end .text .img img{height:140rem;}

input#birthday{width: 216rem;}

/* 마이페이지 */
.area_mypage .snb ul{display:flex;border-bottom: 1px solid #1a3759;}
.area_mypage .snb ul li {flex:1; position:relative;text-align:center;box-sizing: border-box;background: #fafafc; border-top:1rem solid #ddd; border-right:1rem solid #ddd; cursor:pointer}
.area_mypage .snb ul li:first-child{border-left:1rem solid #ddd;}
.area_mypage .snb ul li a{box-sizing: border-box; display:block; width:100%; height:100%; padding:18rem 30rem; }
.area_mypage .snb ul li.active a{box-sizing: border-box; display:block; width:100%; height:100%; background:#333; border:1rem solid #111; border-bottom:0; color:#fff;}
.area_mypage .title{margin-bottom:40rem}
.area_mypage .box{margin-top:60rem;}
.area_mypage .sns_wrap img{height:40rem}
.area_mypage .sns_wrap p{margin-top:7rem}
.area_mypage .box h3{margin-bottom:21rem; font-weight:500; font-size:25rem}

.area_mypage .mypage_list_wrap .appli > .list_appli{display:flex; justify-content: space-between;flex-wrap: wrap; padding:25rem; margin:30rem 0; background:#f6f6f6;}
.area_mypage .mypage_list_wrap .appli > .list_appli li{display:flex;align-items: center;}
.area_mypage .mypage_list_wrap .appli > .list_appli li input,
.area_mypage .mypage_list_wrap .appli > .list_appli li select{width:170rem}
.area_mypage .mypage_list_wrap .appli .list_appli li ul{display:flex}
.area_mypage .mypage_list_wrap .appli .list_appli li ul li{display:flex;align-items: center;}
.area_mypage .mypage_list_wrap .appli .list_appli li .tit{margin-right:15rem; font-weight:500}
.area_mypage .mypage_list_wrap .appli .list_appli li[data-list="01"]{width: 25%;}
.area_mypage .mypage_list_wrap .appli .list_appli li[data-list="02"]{width: 40%;}
.area_mypage .mypage_list_wrap .appli .list_appli li[data-list="03"]{width: 32%;}
.area_mypage .mypage_list_wrap .appli .list_appli li .date li input{padding-right:30rem; background:#fff url(../images/content/img_calendar.svg) no-repeat right 10rem center;}
.area_mypage .mypage_list_wrap .appli .list_appli li .date li input:before{}
.area_mypage .mypage_list_wrap .appli .list_appli li .date li i{margin:0 5rem}
.area_mypage .mypage_list_wrap .appli .list_appli li .button{width:100rem; padding:0}
.area_mypage .mypage_list_wrap .list_info{padding:25rem;border: 1rem solid #e0e5eb;}

.search_table .table .blue a{color:#15519b}

.mypage_list_wrap .list_view{display:flex;align-items: center;border-top: 3rem solid #121212;border-bottom: 1rem solid #ddd;padding: 30rem 0;}
.mypage_list_wrap .list_view .img{width: 45%;margin-right:5%;position: relative;}
.mypage_list_wrap .list_view .img img{width:100%;}
.mypage_list_wrap .list_view .text{width: 50%;}
.mypage_list_wrap .list_view .text h3{border-bottom: 1px solid #ddd;padding-bottom:25rem; font-size:22rem; font-weight:500}
.mypage_list_wrap .list_view .text .list01{margin:30rem 0}
.mypage_list_wrap .list_view .text .list01 li{margin-bottom:15rem; display:flex; font-size:17rem;}
.mypage_list_wrap .list_view .text .list01 li b{width:100rem; font-weight:500; color:#111;}
.mypage_list_wrap .list_view .text .list01 li i{width:calc(100% - 100rem); color:#555}
.mypage_list_wrap .list_table{margin-top:60rem}
.mypage_list_wrap a.btn_form {background: #373c54;color: #fff;padding: 15rem 34rem;display: inline-block; font-size: 14rem;}


@media all and (max-width:1023px){
	.member_wrap{width:auto; margin:0 20rem}
	.member_wrap.end{margin:0 auto;}

	.mypage_list_wrap .list_view{align-items: flex-start;}


	.area_mypage .mypage_list_wrap .appli > .list_appli li input, .area_mypage .mypage_list_wrap .appli > .list_appli li select{width:130rem}
	.area_mypage .mypage_list_wrap .appli .list_appli li .button{width:55rem}
}

@media all and (max-width:860px){
	.area_mypage.wrapper{margin:0 20rem;}
	.area_mypage .snb ul li a{font-size:13rem; padding:10rem 5rem}

	.area_mypage .mypage_list_wrap .appli .list_appli > li{margin-top:10rem;}
	.area_mypage .mypage_list_wrap .appli .list_appli li:first-child{margin-top:0}
	.area_mypage .mypage_list_wrap .appli .list_appli li[data-list="01"],
	.area_mypage .mypage_list_wrap .appli .list_appli li[data-list="02"],
	.area_mypage .mypage_list_wrap .appli .list_appli li[data-list="03"]{width:100%;}
	.area_mypage .mypage_list_wrap .appli .list_appli li[data-list="03"] input{width:calc(100% - 80rem);}
	.area_mypage .mypage_list_wrap .appli > .list_appli li input, .area_mypage .mypage_list_wrap .appli > .list_appli li select{width:160rem}
	.area_mypage .mypage_list_wrap .appli .list_appli li .button{width:70rem}
	.area_mypage .mypage_list_wrap .appli .list_appli li .tit{width:100rem}
	.area_mypage .mypage_list_wrap .appli .list_appli li .cont{width:calc(100% - 100rem)}

}


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

	.bbsView td[data-member-form="id"]{position:relative;}
	.bbsView td[data-member-form="id"] input{width:100%; padding-right:120px;}
	.bbsView td[data-member-form="addr"] > span{display:block; position:relative;}
	.bbsView td[data-member-form="addr"] > span input#zip{width:100%; padding-right:120px;}
	.bbsView td[data-member-form="id"] .button{position:absolute; top:26rem; right:0;}
	.bbsView td[data-member-form="addr"] > span .button{position:absolute;top: 3px;right:0rem;}
}
@media all and (max-width:540px){
	.join_area .bbsView td[data-member-form="id"] .button{top:12rem;}

	.area_admin{margin:60rem 20rem}
	.area_admin .title{margin-bottom:15rem; font-size:18rem;}
	.list_login li{padding-top:15rem}
	.list_login li input{height:50rem}
	.list_login li input::placeholder{color:#999; font-weight:500; font-size:13rem}
	.btn_area.member > a{font-size:13rem}
	a.btn_join{margin-top:25rem; padding:12rem 0; font-size:12rem}
	.btn_area.sns{padding:30rem 0}
	.btn_area.sns p{font-size:16rem}
	.btn_area.sns ul li img{height:40rem}

	.find > .text h4{font-size:16rem}
	.find > .text p{font-size:14rem;}
	.find > .text p br{display:none;}

	.member_wrap{margin:0 auto;}
	.member_wrap .box h3{font-size:18rem}
	.join_area textarea{font-size:13rem}

	.p_prove .phone{width:90%;}
	.p_prove .phone img{height:150rem}

	.member_wrap.end{width:90%;}
	.member_wrap.end .text p.add{font-size:13rem}
	.member_wrap.end .text .img img{height:120rem}

	.area_mypage.wrapper{margin:0 auto;}

	.area_mypage .box{margin-top:30rem}
	.area_mypage .box h3{margin-bottom:15rem; font-size:18rem}

	.area_mypage .button.sm{padding:8rem 10rem; font-size:11rem; width:100%}
	.area_mypage .mypage_list_wrap .list_info{padding:15rem}

	.mypage_list_wrap .list_view{flex-direction: column;}
	.mypage_list_wrap .list_view .img{width:100%; margin-bottom:25rem}
	.mypage_list_wrap .list_view .text{width:100%;}
	.mypage_list_wrap .list_view .text h3{font-size:16rem}
	.mypage_list_wrap .list_view .text .list01 li{font-size:14rem}
	.mypage_list_wrap .list_view .text .list01 li b{width:70rem;}
	.mypage_list_wrap .list_view .text .list01 li i{width: calc(100% - 100rem);}
	.mypage_list_wrap .list_table{margin-top:30rem}

	.area_mypage .mypage_list_wrap .appli > .list_appli{padding:15rem}
	.area_mypage .mypage_list_wrap .appli > .list_appli > li{flex-direction: column; align-items: flex-start;}
	.area_mypage .mypage_list_wrap .appli .list_appli li .cont{width:100%;}
	.area_mypage .mypage_list_wrap .appli .list_appli li ul.date{}
	.area_mypage .mypage_list_wrap .appli .list_appli li .tit{margin-bottom:7rem}
	.area_mypage .mypage_list_wrap .appli > .list_appli li input, .area_mypage .mypage_list_wrap .appli > .list_appli li select{width:140rem}

	.search_table table.table thead{display:none;}
	.search_table table.table colgroup{display:none;}
	.search_table table.table thead + tbody tr td{display:block;width:100%;border: 0;border-bottom: 1rem solid #ddd;}

	.search_table table.table{border-top:0}
	.search_table .table .blue a{font-size:13rem}
	.search_table table.table tr{display:block; margin-bottom:10rem; border-top: 1rem solid #868686;}
	.search_table table.table td{text-align:left;}
	.search_table table.table td:before{color:#111;}
	.search_table table.table td[data-table-pro="01"]{background:#f8f8f8; text-align:left;}
	.search_table table.table td[data-table-pro="01"]:before{content:'프로그램명 : ';}
	.search_table table.table td[data-table-pro="02"]:before{content:'신청일자 : ';}
	.search_table table.table td[data-table-pro="03"]:before{content:'이용기간 : ';}
	.search_table table.table td[data-table-pro="04"]:before{content:'신청현황 : ';}
	.search_table table.table td[data-table-pro="05"]:before{content:'접수현황 : ';}

	.search_table table.table td[data-table-rental="01"]{background:#f8f8f8; text-align:left;}
	.search_table table.table td[data-table-rental="01"]:before{content:'신청번호 : ';}
	.search_table table.table td[data-table-rental="02"]:before{content:'대관시설명 : ';}
	.search_table table.table td[data-table-rental="03"]:before{content:'위치 : ';}
	.search_table table.table td[data-table-rental="04"]:before{content:'신청일자 : ';}
	.search_table table.table td[data-table-rental="05"]:before{content:'이용기간 : ';}
	.search_table table.table td[data-table-rental="06"]:before{content:'대관현황 : ';}

	.search_table table.table td[data-table-suit="01"]{background:#f8f8f8; text-align:left;}
	.search_table table.table td[data-table-suit="01"]:before{content:'신청번호 : ';}
	.search_table table.table td[data-table-suit="02"]:before{content:'대여명 : ';}
	.search_table table.table td[data-table-suit="03"]:before{content:'신청일자 : ';}
	.search_table table.table td[data-table-suit="04"]:before{content:'이용기간 : ';}
	.search_table table.table td[data-table-suit="05"]:before{content:'반납일자 : ';}
	.search_table table.table td[data-table-suit="06"]:before{content:'대여현황 : ';}

}