@charset "utf-8";

/* admin style
 * @latest 2020.06.01 OSY
*/


/********** 회비납부 **********/

.sub_notice {padding:30px 50px; margin-bottom:50px; line-height:1.6em; background:#f1f4f4; border-top:2px solid #023a75; box-sizing:border-box;}
.sub_notice p {display:inline-block; width:80%; word-break:normal; word-break:keep-all;}
.sub_notice b.circle {display:inline-block; width:80px; height:80px; border-radius:50%; background:#254bab; text-align:center; vertical-align:middle; margin-right:20px;}
.sub_notice b i {font-size:28px; font-weight:400; line-height:80px;}

.mem_dues {padding-left:0px !important;}
.mem_dues .dues_list {list-style:none; float:left; width:49%; margin-right:2%; margin-bottom:2%; border:1px solid #9ca0aa; box-sizing:border-box;}
.mem_dues .dues_list:nth-child(even) {margin-right:0;}

.mem_type {width:100%; min-height:270px; box-sizing:border-box; overflow:hidden;}
.mem_type td {text-align:center;}

.mem_type td.color01 {width:4.7619047619%; background:#023a75;}
.mem_type td.pay_bullet01 {position:relative; z-index:10;}
.mem_type td.pay_bullet01 p {position:absolute; top:20px; left:-50px; z-index:20; width:200px; padding:15px 0; text-align:center; vertical-align:middle; background:#4db848; transform:rotate(-45deg); box-shadow:3px 3px 5px 0 rgba(0,0,0,0.5);}

.mem_type td.mem_cate {padding:20px 0; background:#f3f3f3; border-bottom:1px solid #ececef; box-sizing:border-box;}

.mem_type td.mem_price {padding:50px 0;}
.mem_type td.mem_price b {font-size:58px;}
.mem_type td.mem_price p.data {color:#666; margin-top:15px;}

.mem_type td.pay {border-left:1px solid #ececef; box-sizing:border-box;}
.mem_type td.pay .txt_payment {background:#023a75; padding:15px 50px;}
.mem_type td.pay .txt_payment:active {box-shadow:3px 3px 5px 0 rgba(0,0,0,0.5) inset;}

ul.payment_list {width:60%; padding-left:0px !important; margin:0 auto 20px auto;}
ul.payment_list li.payment_item {position:relative; list-style:none; color:#121212; text-align:left; margin-bottom:10px;}
ul.payment_list li.payment_item:last-child {margin-bottom:0;}
ul.payment_list li.payment_item {line-height:18px;}
ul.payment_list li.payment_item label {margin-left:5px;}
ul.payment_list li.payment_item input[type="radio"] {opacity:0;}
ul.payment_list li.payment_item input[type="radio"] + label:before {position:absolute; left:0; top:0; content:""; width:15px; height:15px; border:2px solid #c0c0c0; border-radius:100%;}
ul.payment_list li.payment_item input[type="radio"] + label:hover:before {border-color:#8a8a8a;}
ul.payment_list li.payment_item input[type="radio"]:focus + label:before {outline:thin dotted grey;}
ul.payment_list li.payment_item input[type="radio"]:checked + label:before {border-color:#8a8a8a;}
ul.payment_list li.payment_item input[type="radio"]:checked + label:after {position:absolute; left:4px; top:4px; content:""; width:11px; height:11px; background:#0460C2; border-radius:100%;}


	@media (min-width:800px) and (max-width:1300px){
						
		.mem_type td.mem_price b {font-size:48px;}
		.mem_type td.pay .txt_payment {padding:10px 30px;}
		
		ul.payment_list {width:80%;}
		ul.payment_list li.payment_item {margin-bottom:10px;}
		
	}

	@media (max-width:799px){
		
		.sub_notice {padding:20px 30px;}
		.sub_notice b.circle {width:50px; height:50px; line-height:50px; vertical-align:top;}
		.sub_notice b.circle.vm {vertical-align:middle !important;}
		.sub_notice b i {font-size:20px; line-height:50px;}
				
		.mem_dues .dues_list {width:100%; margin-right:0%; margin-bottom:5%;}
		.mem_type td.mem_price b {font-size:48px;}
		
	}
	
	@media (max-width:499px){
		
		.sub_notice {padding:0;}
		.sub_notice p {width:74%; padding:10px 2%;}
		.sub_notice b.circle {margin-right:4%; border-radius:0 0 8px 8px; box-shadow:0px 2px 3px 0 rgba(0,0,0,0.5);}
				
		.mem_type {overflow:inherit;}
		.mem_type td.color01 {width:0%;}	
		.mem_type td.pay_bullet01 p {position:absolute; top:-3px; left:-3px; width:60px; border-radius:0 0 8px 8px; transform:rotate(0deg); box-shadow:0px 2px 3px 0 rgba(0,0,0,0.5);}
		
		.mem_type td.mem_cate {text-align:left; padding-left:75px; line-height:1.6em;}
		.mem_type td.mem_cate b {display:block;}
		.mem_type td.mem_price {display:block; width:100%; padding:30px 0 15px 0;}
		.mem_type td.mem_price b {font-size:38px;}
		
		.mem_type td.pay {display:block; width:100%; border-top:1px solid #ececef; border-left:0;}
		.mem_type td.pay .txt_payment {margin-bottom:20px;}
		
		ul.payment_list {margin-top:20px;}
		
	}



/********** 회비납부 **********/

.mem_dues_done {padding-left:0px !important;}
.mem_dues_done li {list-style:none !important; padding:30px; line-height:1.6em;}
.mem_dues_done li:first-child {padding-top:0px;}
.mem_dues_done li b {color:#254bab;}

.mem_dues_done li.pay_date {text-align:center;}

.mem_dues_done li.payment table {width:70%; margin:0 auto;}
.mem_dues_done li.payment table td {padding:20px; line-height:1.8em; vertical-align:top; border-top:1px solid #ddd;}
.mem_dues_done li.payment table tr:first-child td {border-top:1px solid #666;}
.mem_dues_done li.payment table tr:last-child td {border-bottom:1px solid #666;}
.mem_dues_done li.payment table td:first-child {background:#f9f9f9;}

.mem_dues_done li.pay_btn span {padding:15px 50px; margin:0 2px;}
.mem_dues_done li.pay_btn span:active {box-shadow:3px 3px 5px 0 rgba(0,0,0,0.5) inset;}
.mem_dues_done li.pay_btn .txt_payment {background:#023a75;}
.mem_dues_done li.pay_btn .txt_return {color:#023a75; font-weight:600; background:#fff; border:1px solid #023a75; box-sizing:border-box;}


	@media (max-width:799px){
		
		.mem_dues_done li {padding:20px;}
		.mem_dues_done li.payment table {width:100%;}
		.mem_dues_done li.payment table td {padding:10px 15px;}
		.mem_dues_done li.pay_date {text-align:left;}
		
	}