@charset "utf-8";
/* 
* content CSS Document
* KOWEB
*/

#header{border-bottom:1px solid #ddd;}


/* sub visual & lnb */
.sub_visual_wrap{ display: grid; grid-template-columns: [left] minmax(4vw, auto) [inner_start] clamp(1px, 44.79166667%, 860rem) [center] clamp(1px, 44.79166667%, 860rem) [inner_end] minmax(4vw, auto) [right];}
.main_scroll{ grid-column: left / inner_start; position: relative; }
.main_scroll__inr{ position: absolute; inset: 0 0 11.4% 4rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 20rem; }
.main_scroll__bar{ position: relative; width: 2px; height: 150rem; background: #000; clip-path: inset(0 -100vw); }
.main_scroll__bar::before,
.main_scroll__bar::after{ content: ''; position: absolute; inset: 56.666667% 0 0; }
.main_scroll__bar::before{ background: #ddd; }
.main_scroll__bar::after{ display: block; width: 6rem; height: 6rem; border-radius: 50%; background: #000; transform: translate(-2rem,-50%); }
.main_scroll__txt{ writing-mode: vertical-rl; font-size: 14rem; font-weight: 500; letter-spacing: .03ch; color: #bbb; transform: rotate(180deg); }
.sub_visual_wrap .visual_box{ grid-column: inner_start / inner_end; position: relative;}
.lnb_wrap{display:flex; margin:80rem auto 35rem; justify-content:space-between; align-items:flex-end; height:auto !important;}
.lnb_wrap h2{font-size:var(--fs60); color:#000;}
.lnb_wrap .lnb ul{margin:0 auto; padding-bottom:12rem; width:100%;}  
.lnb_wrap .lnb ul li{display:inline-block; padding:6rem 0;}
.lnb_wrap .lnb ul li+li{margin-left:60rem;}
.lnb_wrap .lnb ul li a{display:block; position:relative; font-weight:600; font-size:20rem; color:#aaa; transition:0.2s;}
.lnb_wrap .lnb ul li a:before{content:''; display:block; position:absolute; top:1rem; left:-9rem; width:7rem; height:7rem; border-radius:50%; background:var(--primary); opacity:0; transition:0.3s ease;}
.lnb_wrap .lnb ul li:hover a, 
.lnb_wrap .lnb ul li a.on{color:var(--secondary);}
.lnb_wrap .lnb ul li a.on{font-weight:bold;}
.lnb_wrap .lnb ul li a.on:before{opacity:1;}
.area_subVisual{ overflow: hidden; display: flex; justify-content: center; align-items: center; position:relative; height:460rem; text-align:center; color: #fff; border-radius: 60rem;}
.area_subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.area_subVisual.about::before{ background-image:url(../images/content/sub_visual01.jpg); }
.area_subVisual.business::before{ background-image:url(../images/content/sub_visual02.jpg); }
.area_subVisual.etc::before{ background-image:url(../images/content/sub_visual03.jpg); }
.area_subVisual.common::before{ background-image:url(../images/content/sub_visual01.jpg); }

@media (prefers-reduced-motion: no-preference){
	.main_scroll__bar::before,
	.main_scroll__bar::after{ animation: main_scroll_down 3s linear infinite; }
	@keyframes main_scroll_down {
		0%{ top: -30%; }
		100%{ top: 130%; }
	}
    
    @keyframes sub_visual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	@keyframes sub_visual_text {
		0%{ transform: translateY(20px); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	.area_subVisual :is(p, h2){ opacity: 0; animation: sub_visual_text .6s .2s both; }
	.area_subVisual p + h2{ animation-delay: .4s; }
}
@media(max-width:1279px){
    .lnb_wrap{margin:50rem auto 25rem;}
    .lnb_wrap .lnb ul{padding-bottom:7rem; }
    .lnb_wrap .lnb ul li+li{margin-left:40rem;}
    .area_subVisual{height:400rem; border-radius:50rem;}
}
@media(min-width:768px){
	.sub_visual_wrap .visual_box{ aspect-ratio: 1720/700; }
}
@media(max-width:767px){
    .lnb_wrap{display:block; margin:40rem auto 20rem;}
    .lnb_wrap .lnb ul{margin-top:10rem; padding-bottom:0; white-space:nowrap; overflow-x:auto;}
    .lnb_wrap .lnb ul li+li{margin-left:35rem;}
    .area_subVisual{height:250rem; border-radius:30rem;}
    .main_scroll__txt{display:none;}
    .area_subVisual.business::before{ background-image:url(../images/content/sub_visual02_mo.jpg); }
}


/* common content */
#content{ min-height:300px; padding:100rem 0; }
.area_sub *{box-sizing:border-box; word-break:keep-all;}
.sub_title{margin-bottom:80rem;}
.sub_title h2{text-align:center; font-size:var(--fs35); color:#111; font-weight:800;}

.common_table{ border-top: 2px solid #222; text-align: center; }
.common_table :is(th, td){ padding: 14rem 1em 12rem; border: 1rem solid #e5e5e5; }
.common_table col:is(:nth-of-type(1), :nth-of-type(2)){ width: 18.33333333%; }
.common_table :is(th, td):first-child{ border-left: 0; }
.common_table :is(th, td):last-child{ border-right: 0; }
.common_table :is(thead, tfoot){ background: #f6f7f9; font-size: 17rem; font-weight: 500; }
@media(max-width:1279px){
    #content{padding:80rem 0; }
    .sub_title{margin-bottom:60rem;}
}
@media(max-width:767px){
    #content{padding:65rem 0; }
    .sub_title{margin-bottom:50rem;}
}


/* 협회소개 _ 인사말 */
.area_greeting{margin:auto; max-width:1000rem; width:100%;}
.area_greeting section{position:relative;}
.area_greeting section+section{margin-top:50rem;}
.area_greeting p{font-size:18rem; color:#555;}
.area_greeting p > br{display:none;}
.area_greeting p+p{margin-top:25rem;}
.area_greeting .sec01{display:flex; justify-content:space-between;}
.area_greeting .sec01 .txt_box{display:flex; flex-direction:column; justify-content:center; width:calc(60% - 80rem);}
.area_greeting .sec01 .txt_box h2{margin-bottom:45rem; font-size:var(--fs40); font-weight:normal; color:#aaa;}
.area_greeting .sec01 .txt_box h2 em{display:inline-block; font-weight:bold; color:var(--primary);}
.area_greeting .sec01 .img_box{width:40%; border-radius:30rem;}
@media(max-width:1279px){
    .area_greeting section+section{margin-top:40rem;}
}
@media(max-width:767px){
    .area_greeting section+section{margin-top:16rem;}
    .area_greeting p+p{margin-top:16rem;}
    .area_greeting .sec01{flex-direction:column-reverse;}
    .area_greeting .sec01 .txt_box{width:100%;}
    .area_greeting .sec01 .txt_box h2{margin-bottom:20rem; font-size:var(--fs35);}
    .area_greeting .sec01 .img_box{margin:0 auto 30rem; width:80%; height:400rem;}
}


/* 협회소개 _ 설립배경 */
.area_establish section+section{margin-top:80rem;}
.area_establish .sec01 .box{padding:25rem; border-radius:10rem; background:#f5f5f5; text-align:center;}
.area_establish .sec01 .box p{font-size:18rem; color:#444;}
.area_establish .sec01 .box p b{color:var(--secondary);}
.area_establish .sec02{display:flex;}
.area_establish .sec02 .img{width:50%; height:380rem; border-radius:30rem; background:url(../images/content/img_establish01.jpg)no-repeat center/cover;}
.area_establish .sec02 .txt{display:flex; padding-left:80rem; align-items:center; flex-direction:column; justify-content:center; width:50%;}
.area_establish .sec02 .txt p{font-size:18rem; color:#444;}
.area_establish .sec02 .txt p+p{margin-top:25rem;}
@media(max-width:1279px){
    .area_establish .sec02 .txt{padding-left:50rem;}
}
@media(max-width:767px){
    .area_establish section+section{margin-top:60rem;}
    .area_establish .sec02 .txt p+p{margin-top:16rem;}
    .area_establish .sec02{display:block;}
    .area_establish .sec02 .img{margin-bottom:30rem; width:100%; height:250rem;}
    .area_establish .sec02 .txt{display:block; padding:0; width:100%;}
}


/* 협회소개 _ 연혁 */
.area_history section{display:flex; position:relative;}
.area_history section+section{margin-top:80rem;}
.area_history section .year{position:sticky; padding-right:90rem; top:100rem; left:0; height:120rem; text-align:end; width:380rem;}
.area_history section .year h2{margin-bottom:20rem; font-size:var(--fs45); color:var(--secondary); line-height:1; font-weight:900;}
.area_history section .year p{font-size:18rem; color:#aaa;}
.area_history section .history{position:relative; padding-left:90rem; width:calc(100% - 380rem);  border-left:1px solid #ccc;}
.area_history section .history:before{content:''; position:absolute; top:0; left:-11rem; width:21rem; height:21rem; border-radius:50%; border:5rem solid var(--primary); background:#fff; box-sizing:border-box;}
.area_history section .history li{display:flex; margin-bottom:20rem; font-size:18rem; color:#555;}
.area_history section .history li.mt40{margin-top:40rem; padding-top:40rem; border-top:1px dashed #ddd;}
.area_history section .history li em{display:block; color:#000; font-weight:bold; width:145rem;}
.area_history section .history li p{width:calc(100% - 145rem);}
@media(max-width:1279px){
    .area_history section{display:block;}
    .area_history section .year{position:relative; padding-right:0; top:auto; height:auto; text-align:left; width:100%;}
    .area_history section .year h2{margin-bottom:30rem; font-size:50rem;}
    .area_history section .year p{display:none;}
    .area_history section .history{padding-left:35rem; width:100%;}
    .area_history section .history:before{left:-10rem; width:19rem; height:19rem;}
}
@media(max-width:767px){
    .area_history section+section{margin-top:60rem;}
    .area_history section .year h2{margin-bottom:25rem; font-size:35rem;}
    .area_history section .history{padding-left:25rem;}
    .area_history section .history li{display:block;}
    .area_history section .history li em{margin-bottom:4rem; width:100%;}
    .area_history section .history li p{width:100%;}
    .area_history section .history li.mt40{margin-top:30rem; padding-top:30rem;}
}


/* 협회소개 _ 정관 */
.area_law section+section{margin-top:100rem;}
.area_law .tit01{padding:24rem 0; width:100%; text-align:center; font-size:var(--fs25); color:#000; line-height:1; background:#f5f5f5; border-top:2px solid var(--secondary);}
.area_law .tit02{margin-bottom:15rem; font-size:20rem; color:#000; font-weight:800;}
.area_law .cont{margin-top:50rem;}
.area_law i{display:block; width:20rem; font-size:18rem; color:#444;}
.area_law p{font-size:18rem; color:#444;}
.area_law p+ul{margin-top:15rem;}
.area_law em{}
.area_law ul li{display:flex; flex-wrap:wrap;}
.area_law ul li+li{margin-top:12rem;}
.area_law ul li p{width:calc(100% - 20rem);}
.area_law .list03 i{width:24rem;}
.area_law .list03 p{width:calc(100% - 24rem);}
.area_law ul > li > ul{margin-top:15rem; padding-left:20rem; width:100%;}
.area_law ul > li > ul > li > i,
.area_law ul > li > ul > li > p{color:#777;}
.area_law .decide{text-align:center; padding:50rem 50rem 35rem; border:1px solid #888;}
.area_law .decide ul.member{display:flex; margin-top:50rem; padding-top:35rem; border-top:1px dashed #ccc; flex-wrap:wrap;}
.area_law .decide ul.member li{display:block; margin-top:0; padding:15rem 0; width:calc(100% / 4); font-size:18rem;}
.area_law .decide ul.member li span{display:inline-block; margin-left:15rem; color:#aaa;}
.area_law .table_wrap{overflow:auto;}
.area_law table.table{border-top:0; width:100% !important;}
.area_law table.table th,
.area_law table.table td{padding:25rem 15rem;}
.area_law table.table thead + tbody tr td{text-align:left;}
.area_law table.table thead tr th{border:none;}
.area_law table.table thead tr:first-child th{background:#444;}
.area_law table.table thead tr th h1{font-size:var(--fs25); color:#fff;}
.area_law em.blue{color:#3c77e1;}
@media(max-width:1279px){
    .area_law section+section{margin-top:80rem;}
    .area_law .tit01{font-size:25rem;}
}
@media(max-width:767px){
    .area_law section+section{margin-top:60rem;}
    .area_law .tit01{padding:20rem 0;}
    .area_law .tit02{margin-bottom:12rem;}
    .area_law .cont{margin-top:35rem;}
    .area_law .decide{padding:25rem 15rem 13rem;}
    .area_law .decide ul.member{margin-top:25rem; padding-top:13rem;}
    .area_law .decide ul.member li{width:calc(100% / 3);}
    .area_law .decide ul.member li span{margin-left:10rem;}
}


/* 협회소개 _ 근육병 */
.area_bmd .sec01{display:flex; justify-content:space-between; align-items:center;}
.area_bmd .sec01 .img{display:block; width:calc(50% - 50rem); border-radius:30rem; overflow:hidden;}
.area_bmd .sec01 .img img{display:block; width:100%;}
.area_bmd .sec01 .txt{width:calc(50% - 30rem);}
.area_bmd .sec01 .txt h2{margin-bottom:20rem; font-size:30rem; color:#111; line-height:1;}
.area_bmd .sec01 .txt em{display:block; margin-bottom:50rem; font-size:20rem; color:#aaa; font-weight:600;}
.area_bmd .sec01 .txt p{font-size:18rem; color:#444;}
.area_bmd .sec01 .txt p+p{margin-top:25rem;}
.area_bmd .cont{margin-top:35rem !important;}
.area_bmd h2 em{display:block; margin-top:5rem; color:#aaa; font-weight:600; font-size:18rem;}
.area_bmd .bmd_info{display:flex; border:1px solid #ddd; border-radius:10rem; overflow:hidden;}
.area_bmd .bmd_info li{width:50%; text-align:center; font-size:18rem;}
.area_bmd .bmd_info li:first-child{border-right:1px solid #ddd;}
.area_bmd .bmd_info li span{display:block; padding:15rem 5rem; font-weight:600; color:#111; background:#f5f5f5; border-bottom:1px solid #ddd;}
.area_bmd .bmd_info li p{padding:15rem 5rem;}
.area_bmd .btn_more{display:block; width:200rem; height:50rem; line-height:50rem; color:#fff; background:var(--primary); font-size:20rem; font-weight:bold; border-radius:30rem; text-align:center; transition:0.3s ease;}
@media(hover:hover){
    .area_bmd .btn_more:hover{background:var(--secondary);}
}
@media(max-width:1279px){
    .area_bmd .sec01 .img{height:400rem;}
    .area_bmd .sec01 .img img{height:100%; object-fit:cover;}
    .area_bmd .sec01 .txt{width:50%;}
    .area_bmd .sec01 .txt h2{margin-bottom:12rem;}
    .area_bmd .sec01 .txt em{margin-bottom:30rem;}
    .area_bmd .sec01 .txt p > br{display:none;}
}
@media(max-width:767px){
    .area_bmd .sec01{display:block;}
    .area_bmd .sec01 .img{margin-bottom:30rem; width:100%; height:280rem;}
    .area_bmd .sec01 .txt{width:100%;}
    .area_bmd .sec01 .txt em{margin-bottom:20rem;}
    .area_bmd .sec01 .txt p+p{margin-top:16rem;}
}


/* 협회소개 _ 오시는 길 */
.area_location .info{display:flex; align-items:center; justify-content:space-between;}
.area_location .info .location{display:flex; align-items:center; width:calc(100% - 640rem);}
.area_location .info .location img{display:block; margin-right:12rem; width:18rem;}
.area_location .info .location p{font-size:18rem; color:#444;}
.area_location .info .num{display:flex;}
.area_location .info .num a{display:block; margin-left:40rem; font-size:18rem; color:#444; width:280rem; height:60rem; line-height:60rem; border-radius:30rem; border:1px solid #ddd; transition:0.3s ease; text-align:center;}
.area_location .info .num em{display:inline-block; margin-right:5rem; color:#aaa; font-weight:bold;}
.area_location .map_wrap{margin:30rem 0 50rem; border-radius:30rem; overflow:hidden;}
.area_location .root_daum_roughmap_landing{width:100% !important;}
.area_location .root_daum_roughmap .wrap_map{height:500rem !important;}
.area_location .root_daum_roughmap .map_border,
.area_location .root_daum_roughmap .wrap_controllers{display:none;}
.area_location .traffic > div{display:flex; padding:0 50rem; justify-content:space-between;}
.area_location .traffic > div+div{margin-top:30rem; padding-top:30rem; border-top:1px dashed #ddd;}
.area_location .traffic .icon{display:flex; align-items:center; justify-content:center; width:150rem; height:150rem; border-radius:50%; background:#444;}
.area_location .traffic .icon img{display:block; height:80rem;}
.area_location .traffic .method{padding-top:30rem; width:calc(100% - 200rem);}
.area_location .traffic .method em{display:block; margin-bottom:20rem; font-size:18rem; color:#aaa; font-weight:bold;}
.area_location .traffic .method ul li{display:flex; font-size:18rem; color:#444;}
.area_location .traffic .method ul li+li{margin-top:15rem;}
.area_location .traffic .method ul li b{display:block; width:110rem; color:#000;}
.area_location .traffic .method ul li i{display:inline-block; margin:-2rem 5rem 0; padding:3rem 8rem; border-radius:15rem; color:#fff; font-weight:500; vertical-align:middle; line-height:1;}
.area_location .traffic .bus .method ul li:first-child i+i{margin-left:-2rem;}
.area_location .traffic .subway .method ul li:first-child i,
.area_location .traffic .bus .method ul li:last-child i:nth-of-type(1){margin-left:0 !important;}
.area_location .traffic .method ul li i.c10aa18{background:#10aa18;}
.area_location .traffic .method ul li i.c228dc5{background:#228dc5;}
.area_location .traffic .method ul li i.c0d7213{background:#0d7213;}
@media(hover:hover){
    .area_location .info .num a:hover{border-color:var(--secondary); font-weight:bold; color:#000;}
}
@media(max-width:1279px){
    .area_location .info .location{width:calc(100% - 440rem);}
    .area_location .info .num a{margin-left:20rem; width:200rem; height:50rem; line-height:50rem;}
    .area_location .traffic > div{padding:0;}
    .area_location .root_daum_roughmap .wrap_map{height:400rem !important;}
}
@media(max-width:767px){
    .area_location .info{display:block;}
    .area_location .info .location{margin-bottom:20rem; align-items:normal; width:100%;}
    .area_location .info .location img{margin-top:-24rem;}
    .area_location .info .num a{width:calc(100% / 2 - 10rem);}
    .area_location .info .num a:first-child{margin-left:0;}
    .area_location .map_wrap{border-right:20rem;}
    .area_location .root_daum_roughmap .wrap_map{height:300rem !important; }
    .area_location .traffic .icon{width:80rem; height:80rem;}
    .area_location .traffic .icon img{height:40rem;}
    .area_location .traffic .method{padding-top:0rem; width:calc(100% - 100rem);}
    .area_location .traffic .method em{margin-bottom:15rem;}
    .area_location .traffic .method ul li{display:block;}
    .area_location .traffic .method ul li b{margin-bottom:5rem;}
}


/********************* 사업소개 *********************/
/* 회원지원 */
/* 자조모임 */
.area_business{}
.area_business section+section{margin-top:100rem;}
.area_business .cont{margin-top:50rem;}
.area_business .tit01{border-bottom:1px solid #ccc;}
.area_business .tit01 h2{display:inline-block; position:relative; padding-bottom:10rem; font-size:30rem; color:#000;}
.area_business .tit01 h2:before{content:''; display:block; position:absolute; left:0; bottom:-3rem; width:100%; height:5rem; background:var(--secondary); z-index:1;}
.area_business h3.tit02{position:relative; margin-bottom:20rem; padding-left:24rem; font-size:22rem; color:#000; font-weight:800;}
.area_business h3.tit02:before{content:''; display:block; position:absolute; left:0; top:9rem; width:14rem; height:14rem; border:4rem solid var(--primary); box-sizing:border-box; border-radius:50%;}
.area_business h4.tit03{font-size:20rem; padding-bottom:12rem; color:#111;}
.area_business p{font-size:18rem; color:#444;}
.area_business p+p{margin-top:20rem;}
.area_business .cont01{display:flex;}
.area_business .cont01 .swiper_business01{padding-right:80rem; width:50%;}
.area_business .cont01 .swiper_business01 .swiper{border-radius:30rem;}
.area_business .cont01 .swiper_business01 .swiper li{border-radius:30rem; overflow:hidden;}
.area_business .cont01 .swiper_business01 img{display:block; width:100%;}
.area_business .cont01 .box{width:50%;}
.area_business .txt_box01{padding:25rem; border:1px solid #ddd; border-radius:10rem;}
.area_business .txt_box01+.txt_box01{margin-top:15rem;}
.area_business .txt_box01 ul li{display:flex;}
.area_business .txt_box01 ul li+li{margin-top:15rem;}
.area_business .txt_box01 ul li b{color:#111; width:50rem; font-size:18rem;}
.area_business .txt_box01 ul li p{width:calc(100% - 50rem);}
.area_business .arrow{top:47%; width:40rem; height:40rem; border-radius:50%; background:rgba(255,255,255,0.8);}
.area_business .arrow:after{font-size:20rem; font-weight:bold; color:#000;}
.area_business .swiper-button-next:after{margin-right:-4rem;}
.area_business .swiper-button-prev:after{margin-left:-4rem;}
.area_business .pager{display:none;}
.area_business.st01 .cont01{align-items:center;}
.area_business .bullet01{position:relative; padding-left:13rem;}
.area_business .bullet01:before{content:'-'; position:absolute; display:block; top:-1rem; left:0; font-size:18rem; color:#111;}
@media(max-width:1279px){
    .area_business section+section{margin-top:80rem;}
    .area_business .cont01{display:block;}
    .area_business .cont01 .swiper_business01{margin:0 auto 50rem; padding-right:0; width:70%;}
    .area_business .cont01 .box{width:100%;}
}
@media(max-width:767px){
    .area_business section+section{margin-top:60rem;}
    .area_business .cont{margin-top:35rem;}
    .area_business .cont01 .swiper_business01{margin-bottom:35rem; width:100%;}
    .area_business .tit01 h2{font-size:25rem;}
    .area_business h3.tit02{margin-bottom:15rem;}
    .area_business p+p{margin-top:16rem;}
    .area_business .txt_box01{padding:20rem 15rem;}
}



/* 기부하기 */
.area_donation > *+*{margin-top:100rem;}
.area_donation .sec01{padding:60rem 15rem; background:url(../images/content/img_donation01.jpg)no-repeat center/cover; text-align:center; border-radius:50rem;}
.area_donation .sec01 em{display:block; font-size:20rem; color:#fff;}
.area_donation .sec01 h2{font-size:var(--fs40); color:#fff;}
.area_donation .sec01 p{font-size:18rem; opacity:0.85; color:#fff;}
.area_donation .sec01 h3{margin-top:20rem; font-size:var(--fs40); color:#fff; font-weight:normal;}
.area_donation .sec02{display:flex; justify-content:space-between; flex-wrap:wrap;}
.area_donation .sec02 .form_wrap{width:46%;}
.area_donation .sec02 h2{margin-bottom:30rem; font-size:28rem; color:#111; text-align:center;}
.area_donation .sec02 p{font-size:18rem; color:#444;}
.area_donation .sec02 span{display:block; width:140rem; font-size:18rem; font-weight:500; color:#191919; text-align:center; border-radius:8rem; height:44rem; line-height:44rem;}
.area_donation .sec02 .span_wrap{display:flex; justify-content:center; align-items:center; border-radius:8rem;}
.area_donation .sec02 .application .span_wrap,
.area_donation .sec02 .application span{background:#f1ece6;}
.area_donation .sec02 .agree .span_wrap,
.area_donation .sec02 .agree span{background:#ecebf0;}
.area_donation .sec02 input{margin:0; height:44rem; border-radius:8rem; outline:none; border:1px solid #ddd; font-size:18rem; color:#444;}
.area_donation .sec02 > div > ul > li{display:flex;}
.area_donation .sec02 > div > ul > li+li{margin-top:15rem;}
.area_donation .sec02 .check_wrap{margin-left:5rem; padding:0 10rem; width:calc(100% - 145rem); border-radius:8rem; border:1px solid #ddd;}
.area_donation .sec02 .check_wrap ul{display:flex; height:100%;}
.area_donation .sec02 .check_wrap ul li{display:flex; align-items:center;}
.area_donation .sec02 .check_wrap ul li+li{margin-left:20rem;}
.area_donation .sec02 .check_wrap input[type="radio"]{display:none;}
.area_donation .sec02 .check_wrap input[type="radio"]+label{display:flex; margin-right:0; align-items:center; cursor:pointer;}
.area_donation .sec02 .check_wrap input[type="radio"]+label i{width:14rem; height:14rem; border-radius:50%; border:1px solid #aaa;}
.area_donation .sec02 .check_wrap input[type="radio"]:checked+label i{border-color:#000; border-width:4rem;}
.area_donation .sec02 .check_wrap label p{padding-left:8rem;}
.area_donation .sec02 .application .form02 > div,
.area_donation .sec02 .application .form03 > div{display:flex; margin-left:5rem; width:calc(100% - 145rem);}
.area_donation .sec02 .application .form02 input,
.area_donation .sec02 .application .form03 input{width:65%;}
.area_donation .sec02 .application .form02 .check_wrap,
.area_donation .sec02 .application .form03 .check_wrap{margin-left:5rem; width:calc(35% - 5rem);}
.area_donation .sec02 .application .form04 input,
.area_donation .sec02 .application .form05 ul{margin-left:5rem; width:calc(100% - 145rem);}
.area_donation .sec02 .application .form05 ul li{display:flex;}
.area_donation .sec02 .application .form05 ul li+li{margin-top:5rem;}
.area_donation .sec02 .application .form05 ul li span{background:#f7f4f0; width:90rem;}
.area_donation .sec02 .application .form05 .tel,
.area_donation .sec02 .application .form05 .email{display:flex; margin-left:5rem; align-items:center; width:calc(100% - 95rem);}
.area_donation .sec02 .application .form05 .tel em{display:block; width:5%; text-align:center; font-size:18rem; color:#444;}
.area_donation .sec02 .application .form05 .tel input{width:30%;}
.area_donation .sec02 .application .form05 .email em{display:block; width:6%; text-align:center; font-size:18rem; color:#444;}
.area_donation .sec02 .application .form05 .email input{width:29%;}
.area_donation .sec02 .application .form05 .email select{margin-left:5rem; margin-top:0; margin-bottom:0; font-size:18rem; color:#444; border:1px solid #ddd; outline:none; width:calc(36% - 5rem); border-radius:8rem; height:44rem; line-height:44rem;}
.area_donation .sec02 .agree .form01 input,
.area_donation .sec02 .agree .form02 > div,
.area_donation .sec02 .agree .form03 > div{margin-left:5rem; width:calc(100% - 145rem);}
.area_donation .sec02 .agree .form02 > div{display:flex; align-items:center;}
.area_donation .sec02 .agree .form02 > div em{display:block; width:4%; text-align:center; font-size:18rem; color:#444;}
.area_donation .sec02 .agree .form02 > div input{width:48%;}
.area_donation .sec02 .agree .form03 > div{display:flex;}
.area_donation .sec02 .agree .form03 input{width:65%;}
.area_donation .sec02 .agree .form03 input::placeholder{color:#aaa;}
.area_donation .sec02 .agree .form03 select{margin-left:5rem; margin-top:0; margin-bottom:0; font-size:18rem; color:#444; border:1px solid #ddd; outline:none; width:calc(35% - 5rem); border-radius:8rem; height:44rem; line-height:44rem;}
.area_donation .sec02 .agree .form05 > ul{margin-left:5rem; width:calc(100% - 145rem);}
.area_donation .sec02 .agree .form05 > ul li{display:flex;}
.area_donation .sec02 .agree .form05 > ul > li+li{margin-top:5rem;}
.area_donation .sec02 .agree .form05 > ul li span{background:#f4f3f6; width:90rem;}
.area_donation .sec02 .agree .form05 > ul li:last-child div{display:flex; align-items:center; margin-left:5rem; width:calc(100% - 95rem);}
.area_donation .sec02 .agree .form05 > ul li:last-child p:nth-of-type(1){width:17%;}
.area_donation .sec02 .agree .form05 > ul li:last-child p:nth-of-type(2){width:7%; text-align:end;}
.area_donation .sec02 .agree .form05 > ul li:last-child input{width:76%; text-align:end;}
.area_donation .sec02 .agree .form05 .check_wrap{width:calc(100% - 95rem);}
.area_donation .submit_wrap{display:flex; align-items:center; justify-content:space-between; padding-top:50rem; margin-top:50rem; border-top:1px solid #ddd; width:100%;}
.area_donation .submit_wrap .agree_check li{font-size:0;}
.area_donation .submit_wrap .agree_check li+li{margin-top:10rem;}
.area_donation .submit_wrap .agree_check input{display:none; height:auto;}
.area_donation .submit_wrap .agree_check input[type="checkbox"]+label{width:16rem; height:16rem; background:url(../images/content/icon_check.svg)no-repeat center/contain;}
.area_donation .submit_wrap .agree_check input[type="checkbox"]:checked+label{background:url(../images/content/icon_checked.svg)no-repeat center/contain;}
.area_donation .submit_wrap .agree_check input[type="checkbox"]+label+label{display:inline-block; margin-top:-2rem; font-size:16rem; color:#555; vertical-align:middle;}
.area_donation .submit_wrap .agree_check input[type=checkbox] + label, 
.area_donation .submit_wrap .agree_check input[type=radio] + label{margin-right:10rem;}
.area_donation .submit_wrap .agree_check a{display:inline-block; margin-top:-3rem; margin-left:8rem; color:#aaa; font-size:16rem; vertical-align: middle;}
.area_donation .btn_submit{display:block; background:var(--primary); color:#fff; font-size:20rem; font-weight:600; text-align:center; width:180rem; height:60rem; line-height:60rem; border-radius:30rem; transition:0.3s ease;}
.area_donation .sec03{display:flex; justify-content:space-between;}
.area_donation .sec03 .box{width:calc(100% / 3 - 30rem);}
.area_donation .sec03 .box h2{text-align:center; padding:20rem 0; color:#fff; font-size:25rem; border-radius:10rem;}
.area_donation .sec03 .box01 h2{background:#b8b2d8;}
.area_donation .sec03 .box02 h2{background:#83aac9;}
.area_donation .sec03 .box03 h2{background:#a7b697;}
.area_donation .sec03 .box > div{margin-top:5rem; padding:25rem 20rem; border-radius:10rem; border:1px solid #ddd; height:470rem;}
.area_donation .sec03 .box p{font-size:18rem; color:#444;}
.area_donation .sec03 .box p.c1{color:#9b91cf;}
.area_donation .sec03 .box p.c2{color:#83aac9;}
.area_donation .sec03 .box p.c3{color:#a7b697;}
.area_donation .sec03 .box p+p{margin-top:20rem;}
.area_donation .sec03 .box b{color:#111;}
@media(hover:hover){
    .area_donation .btn_submit:hover{background:var(--secondary);}
}
@media(max-width:1279px){
    .area_donation > *+*{margin-top:80rem;}
    .area_donation .sec01{border-right:30rem;}
    .area_donation .sec01 h2{margin-bottom:5rem;}
    .area_donation .sec02{display:block;}
    .area_donation .sec02 .form_wrap{width:100%;}
    .area_donation .sec02 .form_wrap.agree{margin-top:50rem;}
    .area_donation .sec03{display:block;}
    .area_donation .sec03 .box{width:100%;}
    .area_donation .sec03 .box+.box{margin-top:30rem;}
    .area_donation .sec03 .box > div{height:auto;}
}
@media(max-width:767px){
    .area_donation > *+*{margin-top:60rem;}
    .area_donation .sec01{padding:40rem 15rem; border-radius:30rem;}
    .area_donation .sec02 h2{margin-bottom:20rem;}
    .area_donation .sec02 .check_wrap ul li+li{margin-left:12rem;}
    .area_donation .sec02 .application .form05,
    .area_donation .sec02 .agree .form05{display:block;}
    .area_donation .sec02 .application .form05 ul,
    .area_donation .sec02 .agree .form05 > ul{margin-left:0; margin-top:5rem; width:100%;}
    .area_donation .sec02 .application .form02 .check_wrap,
    .area_donation .sec02 .application .form03 .check_wrap{width:calc(50% - 5rem);}
    .area_donation .sec02 .application .form02 input,
    .area_donation .sec02 .application .form03 input{width:50%;}
    .area_donation .submit_wrap{display:block; padding-top:40rem; margin-top:40rem;}
    .area_donation .submit_wrap .agree_check li:first-child input[type="checkbox"]+label+label{width:calc(100% - 26rem);}
    .area_donation .sec03 .box h2{padding:15rem 0;}
    .area_donation .btn_submit{margin-top:20rem; border-radius:10rem; width:100%; background:var(--secondary);}
}