@CHARSET "UTF-8";

/*회비납부안내*/
.membership .membership_list ul{display:flex; flex-wrap:wrap; gap:25px; width:100%;}
.membership .membership_list ul li{display:flex; flex-direction:column; align-items:center; gap:30px; width:calc(33.333% - 17px); padding:40px 20px; text-align:center; border:1px solid #ddd; border-radius:20px; box-sizing:border-box;}
.membership .membership_list ul li::before{content:""; display:block; width:125px; height:102px; background-size:cover; background-repeat:no-repeat;}
.membership .membership_list ul li.icon01::before{background-image: url(/nanum/site/builder/dir/main/img/menu6072/membership_icon01.png);}
.membership .membership_list ul li.icon02::before{background-image: url(/nanum/site/builder/dir/main/img/menu6072/membership_icon02.png);}
.membership .membership_list ul li.icon03::before{background-image: url(/nanum/site/builder/dir/main/img/menu6072/membership_icon03.png);}
.membership .membership_list ul li .txt{font-size:2rem;}

.membership .membership_box{display:flex; align-items:center; justify-content:space-between; gap:30px; padding:30px; border-radius:20px; background:#f5f5f5; box-sizing:border-box;}
.membership .membership_box .tit{width:calc(45% - 15px); font-size:2.5rem;}
.membership .membership_box .bank{width:calc(55% - 15px); max-width:640px;}
.membership .membership_box .bank .bank_box{padding:30px; text-align:center; border:8px solid rgba(0,123,199,0.2); border-radius:20px; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); box-sizing:border-box;}
.membership .membership_box .bank .bank_box .number{display:flex; align-items:center; justify-content:center; gap:10px; font-size:2.3rem; font-weight:700;}
.membership .membership_box .bank .bank_box .number::before{content:""; display:block; width:116px; height:27px; background-image: url(/nanum/site/builder/skin/main/img/common/bank_icon01.png); background-size:100% auto; background-repeat:no-repeat;}
.membership .membership_box .bank .bank_box .txt{font-size:2rem;}


/* 발전기금 소개 */
.fund_wrap .fund_list{position: relative; display:flex; justify-content:flex-end; gap:50px; align-items:center;}
.fund_wrap .fund_list .img{position:absolute; left:0; top:0; width:100%; height:500px; transform:translateX(-58%); overflow:hidden;}
.fund_wrap .fund_list .img img{position:absolute; left:20%; top:50%; width:100%; height:100%; transform:translateY(-50%); object-fit:cover;}
.fund_wrap .fund_list .list{width:55%;}
.fund_wrap .fund_list .list ul{display:flex; flex-wrap:wrap; min-height:500px;}
.fund_wrap .fund_list .list ul li{display:flex; flex-direction:column; align-items:center; gap:15px; width:calc(50% - 1px); padding:30px 20px; text-align:center; border-left:1px dashed #ddd; box-sizing:border-box;}
.fund_wrap .fund_list .list ul li:nth-child(odd){border-left:0;}
.fund_wrap .fund_list .list ul li:nth-child(n+3){border-top:1px dashed #ddd;}
.fund_wrap .fund_list .list ul li::before{content:""; display:block; width:79px; height:79px; background-size:100% auto; background-repeat:no-repeat;}
.fund_wrap .fund_list .list ul li.icon01::before{background-image:url("/nanum/site/builder/dir/main/img/menu6072/fund_icon01.png");}
.fund_wrap .fund_list .list ul li.icon02::before{background-image:url("/nanum/site/builder/dir/main/img/menu6072/fund_icon02.png");}
.fund_wrap .fund_list .list ul li.icon03::before{background-image:url("/nanum/site/builder/dir/main/img/menu6072/fund_icon03.png");}
.fund_wrap .fund_list .list ul li.icon04::before{background-image:url("/nanum/site/builder/dir/main/img/menu6072/fund_icon04.png");}

.fund_wrap .fund_list .list ul li .tit{font-size:2rem; font-weight:700;}

.fund_wrap .link_page{margin-top:50px;}
.fund_wrap .link_page ul{display:flex; align-items:center; justify-content:space-between; gap:30px;}
/*.fund_wrap .link_page ul li{display:flex; align-items:center; justify-content:space-between; gap:30px; width:calc(50% - 15px); padding:40px 30px; border:1px solid #ddd; border-radius:20px; box-sizing:border-box;}
.fund_wrap .link_page ul li::before{content:""; display:block; width:100px; height:100px; border-radius:50%; background-color:#f9f9f9; background-position:center; background-size:50% auto; background-repeat:no-repeat;}*/

.fund_wrap .link_page ul li{display:flex; align-items:center; justify-content:space-between; gap:30px; width:100%; padding:30px 25px; border:1px solid #ddd; border-radius:20px; box-sizing:border-box;}
.fund_wrap .link_page ul li::before{content:""; display:block; width:80px; height:80px; border-radius:50%; background-color:#f9f9f9; background-position:center; background-size:50% auto; background-repeat:no-repeat;}
.fund_wrap .link_page ul li.icon01::before{background-image:url(/nanum/site/builder/dir/main/img/menu6072/link_icon01.png);}
.fund_wrap .link_page ul li.icon02::before{background-image:url(/nanum/site/builder/dir/main/img/menu6072/link_icon02.png);}

.fund_wrap .link_page ul li .txt_box{position:relative; width:calc(100% - 110px);}
.fund_wrap .link_page ul li .txt_box .title{font-size:2.5rem; font-weight:700;}
.fund_wrap .link_page ul li .txt_box .txt{font-size:1.7rem;}
.fund_wrap .link_page ul li .txt_box a{position:absolute; right:0; top:50%; display:flex; align-items:center; gap:15px; font-size:1.8rem; font-weight:700; color:#2c90ae; transform:translateY(-50%);}
.fund_wrap .link_page ul li .txt_box a::after{content:""; display:block; width:24px; height:9px; background-image:url(/nanum/site/builder/dir/main/img/menu6072/link_arrow.png); background-size:100% auto; background-repeat:no-repeat;}


/********************태블릿********************/
@media all and (max-width:1024px){

	/*회비납부안내*/
	.membership .membership_box .bank .bank_box{padding:20px;}
	.membership .membership_box .bank{min-width:380px;}
	
	/* 발전기금 소개 */
	.fund_wrap .fund_list{flex-direction:column; gap:30px;}
	.fund_wrap .fund_list .img{position: relative; height:350px; border-radius:20px; transform:none;}
	.fund_wrap .fund_list .img img{left:0;}
	.fund_wrap .fund_list .list{width:100%;}
	.fund_wrap .fund_list .list ul{min-height:auto;}
	.fund_wrap .fund_list .list ul li{width:25%; padding:0 20px;}
	.fund_wrap .fund_list .list ul li:nth-child(n+3){border-top:none; border-left:1px dashed #ddd;}
	
}

/********************모바일********************/
@media all and (max-width:767px){
	
	/*회비납부안내*/
	.membership .membership_list ul{gap:1.5vh;}
	.membership .membership_list ul li{flex-direction:row; gap:20px; width:100%; padding:2vh; text-align: left;}
	.membership .membership_list ul li::before{width:65px; height:53px;}
	.membership .membership_list ul li .txt{width:calc(100% - 85px); font-size:2rem;}
	
	.membership .membership_box{flex-wrap:wrap; gap:1.5vh; padding:2.5vh;}
	.membership .membership_box .tit{width:100%; text-align:center; font-size:2.2rem;}
	.membership .membership_box .bank{width:100%; min-width:auto; max-width:none;}
	.membership .membership_box .bank .bank_box{padding:2vh; border-block-width:5px;}
	.membership .membership_box .bank .bank_box .number::before{width:86px; height:21px;}
	.membership .membership_box .bank .bank_box .txt{margin-top:1vh;}
	
	/* 발전기금 소개 */
	.fund_wrap .fund_list{gap:2vh;}
	.fund_wrap .fund_list .img{height:250px;}
	.fund_wrap .fund_list .list ul li{gap:10px; width:50%; padding:1.5vh;}
	.fund_wrap .fund_list .list ul li::before{width:65px; height:65px;}
	.fund_wrap .fund_list .list ul li:nth-child(n+3){border-top:1px dashed #ddd;}
	.fund_wrap .fund_list .list ul li:nth-child(odd){border-left:0;}
	
	.fund_wrap .link_page{margin-top:3vh;}
	.fund_wrap .link_page ul{flex-direction:column; gap:10px;}
	.fund_wrap .link_page ul li{width:100%; gap:0; padding:2vh 1.5vh;}
	.fund_wrap .link_page ul li .txt_box{width:calc(100% - 100px);}
	.fund_wrap .link_page ul li .txt_box .title{font-size:2.3rem;}
	.fund_wrap .link_page ul li .txt_box .txt{font-size:1.8rem;}
	.fund_wrap .link_page ul li .txt_box a{position:relative; top:0; gap:10px; margin-top:1.5vh; font-size:1.7rem; transform:none;}
	.fund_wrap .link_page ul li .txt_box a::after{width:18px; height:7px;}
	
}

/********************모바일********************/
@media all and (max-width:480px){
	
	/*회비납부안내*/
	.membership .membership_box .bank .bank_box .number{flex-direction:column;}
	
	/* 발전기금 소개 */
	.fund_wrap .fund_box ul{gap:0;}
	.fund_wrap .fund_box ul li dl dt{gap:5px; width:110px; height:110px; font-size:1.7rem;}
	.fund_wrap .fund_box ul li:nth-child(n+2)::before{top:48px; width:10px; height:16px;}

}


/********************웹********************/
@media all and (min-width:1025px) {
	
	
}