/* mobile css*/
html { font-size: 20px;}
body { font-size: 1rem; font-family: 'Noto Sans KR',sans-serif;}



.wrap { padding-left: .6rem; padding-right: .6rem; box-sizing: border-box;}
.wrap_img > img { width: 100%;}

.color_white { color: #fff !important}
.color_beige { color: var(--beige) !important;}

.pt10 {padding-top:10px;}
.pb10 {padding-bottom:10px;}

.pl10 {padding-left:10px;}
.pr10 {padding-right:10px;}

header { position: sticky; top: 0; left: 0; right: 0; z-index: 10; height: 3.75rem; background: #fff; box-sizing: border-box; line-height: 1; font-size: 0; }
header > div > h1 { float: left;}
header > div > h1 a { width: 10rem; height: 3.75rem; line-height: 3.75rem; display: block;}
header > div > h1 a img { width: 100%}
header .btn_menu { float: right; position: relative; width: 3.75rem; height: 3.75rem; background: url(../images/ico_menu_b.png) no-repeat center right 0 / 35% auto;}

.bx_menu { position: fixed; right: -120%; top: 0; width: 100%;; height: 100vh; transition: all .2s; background: #f5f5f5; font-family: 'Noto Sans KR',sans-serif;}
.bx_menu.open { right: 0;}
.bx_menu > .top { height: 3.75rem; background: var(--gray51); line-height: 1; font-size: 0;}
.bx_menu > .top > a { display: block; float: left;  height: 3.75rem; width: 8rem; line-height: 3.75rem; }
.bx_menu > .top > .btn_close { float: right; margin:10px -15px 0 0 ; height: 2.75rem; width: 2.75rem; }
.btn_close { position: relative; background: none; transform: rotate(45deg)}
.btn_close::before { content:""; display: block; width: 40%; height: 2px; background: #fff; position: absolute;  top:50%; left: 50%; transform: translate(-50%,-50%);}
.btn_close::after { content:""; display: block; width: 2px; height: 40%; background: #fff; position: absolute; top:50%;  left: 50%; transform: translate(-50%,-50%);}

.bx_menu > .mid { height: calc(100vh - 3.75rem); overflow: scroll; padding-top: 1.5rem; box-sizing: border-box;}
.list_type1 { background: #fff; border-bottom: 1px solid #ccc; border-left: 1px solid var(--gray234); border-right: 1px solid var(--gray234)}
.list_type1 > li { border-top: 1px solid var(--gray234);}
.list_type1 > li > a {color: #000; font-size: .75rem; box-sizing: border-box; }
.list_type1 > li > ul { display: none; padding: 0.5rem 0; background: #efefef;}
.list_type1 > li > ul a { display: block; height: 2.5rem; line-height: 2.5rem; padding: 0 1rem; font-size: 0.75rem; color: #000; box-sizing: border-box; }
.nav_util { padding: 2rem 0 0}
.nav_util > ul { padding: 0 1.5rem}
.nav_util > ul > li { display: inline-block; width: 33.33%; text-align: center;}
.nav_util > ul > li > a { height: 3rem; width: 100%; line-height: 3rem; color: var(--gray102)}

.nav_gnb > ul > li > a { display: block; position: relative;; padding: 0 0 0 1rem; height: 2.75rem; line-height: 2.75rem; }
.nav_gnb > ul > li > a:after { content:""; position: absolute; width: .6rem; height: .6rem; top: 50%; right: 1rem;  background: url(../images/ico_plus.png) no-repeat center /100% auto; transform: translateY(-50%);}




/* index */
.body_idx main > section {  box-sizing: border-box;  text-align: center;}
/* 0 0 .6rem */
.bx_heading { padding: 2rem 0.5rem .5rem; text-align:center;}
.bx_heading > .heading { padding: 0 0 1rem; text-align: center; font-size: 1.2rem; letter-spacing: -1px; text-align:center;}
.bx_heading > p { padding: 0 0 .6rem; font-size: .75rem; text-align: center; line-height: 1.4}
.deco1:before { margin: 0 auto 0.2rem; width: 1rem; height: 1.35rem}

/* sec_visual */
.sec_visual ul li { height: 100vh; box-sizing: border-box; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 1;}
.slide1_m .pagination { position: absolute; bottom: 20%; left: 5%;  z-index: 1}
.slide1_m .swiper-pagination-bullet { background: #fff; opacity: .7; transition: all .5s;}
.slide1_m .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #007aff; opacity: 1; width: 1rem; border-radius: 8px; }
.sec_visual ul li > .wrap_inner { position: absolute; bottom: 50%; transform: translateY(50%); left: 0; right: 0; box-sizing: border-box; text-align: center;}
.sec_visual ul li > .wrap_inner > .wrap_img { margin: 0 auto; width: 45%}
.sec_visual .wrap_float .bx_txt { position: absolute; top:40%; text-align: center; line-height: 1.5; width: 100%; text-shadow: 1px 1px 3px black}

.slide2_m ul li > p { display: none}
.sec_intro { padding-bottom: 2rem}
.sec_intro ul li { transition: all .3s;}
.sec_intro ul li > a { position: relative; display:block; overflow: hidden; text-align:center; transition: all .3s;}
.sec_intro ul li > a > img { width: 100%; transition: all .5s;}
.sec_intro ul li > a > div { padding: 70px 0 0; position: absolute; top: 0; bottom: 0; right: 0 ; left: 0; background: rgba(20,21,29,.7); color: #fff; box-sizing: border-box; transition: all .3s; opacity: 0; z-index: 10; }
.sec_intro ul li > a > div strong { display: block; margin: 0 0 1rem; font-family: 'GmarketMedium'; font-size: 30px; font-weight: normal;}
.sec_intro ul li > a > div span { font-family: 'Montserrat',sans-serif; font-weight: 200; font-size: 16px;}
.sec_intro ul li > a > div span:after { content:""; display: block; margin: 38px auto 26px; width: 85px; height: 1px; background: #fff;}
.sec_intro ul li > a > div p { padding: 0 0 30px; font-weight: 300; line-height: 23px; font-size: .8rem; font-weight: 200}
.sec_intro ul li > a > div i { display: inline-block; width: 110px; height: 29px; border-radius: 29px; border: 2px solid #fff; box-sizing: border-box; font-weight: 300; line-height: 25px; font-size: 15px;}

.slide2_m ul .swiper-slide-active > a { border-radius: 1rem; box-shadow: 5px 5px 10px rgba(0,0,0,.6)}
.slide2_m ul .swiper-slide-active > a > div { opacity: 1; }
.slide2_m ul .swiper-slide-active > a > img { transform: scale(1.1);}


/* 블루나눔재단 홍보영상 */
.sec_intro_media { padding: 0 0.6rem 2rem}

/* 후원안내 */
.sec_intro_guide { padding: 0 0.6rem 2rem}
.sec_intro_guide ul { display: flex; justify-content: space-around; padding: 0 0 1rem}
.sec_intro_guide ul li { width: 28%}
.sec_intro_guide ul li img { width: 100%}
.sec_intro_guide .link_guide { display: block; overflow: hidden; border-radius: 0 2rem 0 2rem}

/* 재단소식 */
.sec_intro_news {padding: 0 0.6rem 0rem ; font-size: 0.8rem}
.sec_intro_news ul li { padding: 0 0 2rem;}
.sec_intro_news ul li a { display: flex; flex-direction: column;}
.sec_intro_news ul li a > .wrap_img { order: 1; }
.sec_intro_news ul li a > .wrap_txt { order: 2; }
.sec_intro_news ul li a .num { padding: 0.5rem 0 0.2rem; color: #646464;}
.sec_intro_news ul li a span { font-weight: 500;}
.sec_intro_news ul li a .txt { padding: 0.5rem 0 0; line-height: 1.3; text-align: justify;}


.wrap_iframe { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0;
	overflow: hidden;}
.wrap_iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}



footer { background: #28282e; padding: 2rem 0.6rem 4rem; color: rgba(255,255,255,.7); font-size: .7rem; line-height: 1; }
footer .bx_logo { padding: 0 0 1rem; text-align: left;}
footer .bx_logo img { width: 35%;}
footer .list_link { padding: 0 0 1rem}
footer .list_link li { float: left; padding-right: 0.5rem}
footer .list_link li a { display: block; padding: 0.4rem 0; color: #fff}
footer .list_info li { display: inline-block; padding: 0 0 .5rem; }
footer .list_info li a { color: rgba(255,255,255,.7);}
footer .copy { padding: 1rem 0 0; font-size: 0.6rem}


/* paging */
.wrap_paging { text-align: center; font-size: 0}
.wrap_paging > div { position: relative; display: table; margin: 0 auto; padding: 0 4rem}
.wrap_paging a { display: inline-block; width: 2rem; height: 2rem; line-height: 2rem; font-size: 0.8rem; box-sizing: border-box;}
.wrap_paging li { display: inline-block;}
.wrap_paging .btn { position: absolute; top:0; background-repeat: no-repeat; background-position: center;}
.wrap_paging .btn.last { right: 0; background-image:url(/common/images/pagNav_last.png) }
.wrap_paging .btn.next { right: 2rem; background-image: url(/common/images/pagNav_next.png)}
.wrap_paging .btn.prev { left: 2rem; background-image:url(/common/images/pagNav_prev.png) }
.wrap_paging .btn.first { left: 0; background-image: url(/common/images/pagNav_first.png)}
.wrap_paging li.on a { background: #009fe8; color: #fff; border-radius: 100%; }