@charset "utf-8";

/* 메인 *******************************************************************************/

/* body { background: #000;} */
.container .sub-container .child {background: #000; position: relative;}
/* .container .sub-container .child + .child { margin-left: -12px; } */
#footer { display: none;}
#btn_top { display: none;}

/* #header { display: none;} */

.main_btn_box { text-align: left;margin-top: 70px;}
.main_more_btn {  display: inline-block; height: 35px; position: relative; padding-right: 45px;}
.main_more_btn span { color:#fff; font-family: 'Inter', sans-serif; font-size: 18px; line-height:0px; letter-spacing: 0; display: inline-block;}
.main_more_btn.kr span{ font-family: 'Noto Sans KR', sans-serif;}
.main_more_btn span::after { content: ""; background:url(../img/main/ic_arrow_w.png) center no-repeat; width: 35px; height: 35px; position: absolute; top:0; right:0;}

.main_btn_box.center { text-align: center;}
.main_more_btn.black span { color:#333; }
.main_more_btn.black span::after { background-image:url(../img/main/ic_arrow.png)}



.main_logo{position:absolute;left:20px;top:25px;width:111px;height:41px; cursor: pointer; display: none;}
.main_logo a{display:block;position:relative;width:100%;height:100%}
.main_logo span{display:block;position:absolute;left:0;top:0;width:111px;height:41px;text-indent:-9999px; font-size: 0;}
.main_logo span.off{background:url("../img/common/logo.png") no-repeat center center; background-size: 100% auto;}
.main_logo span.on{background:url("../img/common/logo_on.png") no-repeat center center;opacity:0;background-size: 100% auto; display: none;}

.main_visual { width:100%; height:100%; background: url(../img/main/visual.jpg) no-repeat; background-size: cover;position: relative;}
.main_visual p { color:#fff; text-align: left;}
.main_visual .txt_box { position: absolute; top:50%; left:12%; transform: translateY(-50%); display: inline-block;}
.main_visual .title p {font-family: 'Anton', sans-serif; font-size: 130px; letter-spacing: 1px; line-height: 1em;}
.main_visual .title p span { display: inline-block; vertical-align: middle;letter-spacing: -24px;}
.main_visual .desc { margin-top: 40px;}
.main_visual .desc p {font-size: 18px;line-height: 1.3em;}

.main_visual .btn_about { cursor: pointer; position: absolute; top:280px; right:-130px; width:122px; height: 122px; border-radius: 122px; background:url(../img/main/ic_arrow2.png) center no-repeat;background-color: rgba(255,255,255,0.2);}
.main_visual .btn_about.pc { display: inline-block;}
.main_visual .btn_about.pc.hide { opacity: 0; }

.child_visual .sns_box { position: absolute; bottom:20px; left:20px;}
.child_visual .sns_box li { display: inline-block; vertical-align: middle;}
.child_visual .sns_box li + li { margin-left: 20px;}
.child_visual .sns_box li a { display: block; width:25px; height: 25px; background-size: 25px auto; background-repeat: no-repeat; background-position: center; }

.child_visual .sns_box li a.facebook { background-image: url(../img/icon/sns_facebook.png); width:12px; background-size: 12px auto;}
.child_visual .sns_box li a.instagram { background-image: url(../img/icon/sns_instagram.png); width:22px; background-size: 22px auto;}
.child_visual .sns_box li a.youtube { background-image: url(../img/icon/sns_youtube.png);}

/* .main_sns_box {position: fixed;bottom:20px;left:20px;}
.main_sns_box li { display: inline-block; vertical-align: middle;}
.main_sns_box li + li {margin-left: 10px;}
.main_sns_box li a {display: block;width:25px;height: 25px;background-size: 25px auto;background-repeat: no-repeat;background-position: center;background-color: rgba(0,0,0,0.2);padding: 30px;border-radius: 100px;}

.main_sns_box li a.facebook { background-image: url(../img/icon/sns_facebook.png); width:12px; background-size: 12px auto;}
.main_sns_box li a.instagram { background-image: url(../img/icon/sns_instagram.png); width:22px; background-size: 22px auto;}
.main_sns_box li a.youtube { background-image: url(../img/icon/sns_youtube.png);} */

.main_panel { width:100%; height:100%; background-repeat: no-repeat; background-size: cover;position: relative;}
.main_panel .txt_box { position: absolute; top:50%; left:12%; transform: translateY(-50%);}
.main_panel .entitle {font-family: 'Inter', sans-serif; font-size: 20px; letter-spacing: 0;}
.main_panel .kotitle {font-size: 20px; font-weight: 700;}
.main_panel .title {margin: 20px 0 30px;}
.main_panel .title p {font-family: 'Anton', sans-serif; font-size: 90px;  letter-spacing: 0; line-height: 1em; }
.main_panel .desc p {font-size: 18px;line-height: 1.5em;}
.main_panel .desc p b { font-weight: 700; letter-spacing: -0.5px;}

.container .sub-container .child.child_about { width:72vw}
/* 2025.04.09 수정 */
.main_panel.about_panel { background: #0162ff url(../img/main/about_bg.jpg) center left no-repeat; background-size: 80% 100%; }
.main_panel.about_panel p { color:#fff; text-align: left;}

.container .sub-container .child.child_detail {width: 30vw}
.about_detail_panel { background: #fff; position: absolute; width:30vw; top:0; right:0; height: 100%; }
.about_detail_panel .detail_box { position: absolute; width:100%; top:50%; right:0; transform: translateY(-50%);text-align: left; text-align: center; background:#fff;}
.about_detail_panel ul {/*display: inline-block;*/ text-align: left; padding:0 60px;}
.about_detail_panel ul li { padding:40px}
.about_detail_panel ul li + li { border-top:1px solid #eee}
.about_detail_panel ul li p{white-space: initial;}
.about_detail_panel ul li .tit { font-size: 30px;font-family: 'Anton', sans-serif; letter-spacing: 0; margin:5px auto 10px; color:#333; line-height: 1.3em;}
.about_detail_panel ul li .desc { font-size: 16px; color:#333; line-height: 1.3em;}

.main_panel.intro_panel { background:#000 url(../img/main/intro_bg.jpg) right center no-repeat; }
.main_panel.intro_panel::before { content: ""; width:30vw; height:100%; background: #000; display: block; position: absolute; top:0; left:0}
.main_panel.intro_panel p { color:#fff; text-align: left;}
.main_panel.intro_panel .kotitle { color:#0162ff}
.main_panel.intro_panel .desc p { opacity: 0.6;}

.main_panel.donors_panel { background:#000 url(../img/main/donors_bg.jpg) right center no-repeat }
.main_panel.donors_panel::before { content: ""; width:30vw; height:100%; background: #000; display: block; position: absolute; top:0; left:0}
.main_panel.donors_panel p { color:#fff; text-align: left;}
.main_panel.donors_panel .kotitle { color:#0162ff}
.main_panel.donors_panel .desc p { opacity: 0.6;}

.container .sub-container .child.child-visting {background:#0162ff }
.main_panel.info_panel { background:#0162ff url(../img/main/info_obj.png) right bottom no-repeat; background-size: auto 90%; }
.main_panel.info_panel p { color:#fff; text-align: left;}


.main_panel.update_panel { background:#fff }
.main_panel.update_panel .kotitle { color:#0162ff}
.main_panel.update_panel p { color:#333; text-align: left;}

.update_panel {padding: 100px 0; text-align: center; background:#fff}

.update_panel .sns_box { text-align: left; }
.update_panel .sns_box li { display: inline-block; vertical-align: middle;}
.update_panel .sns_box li + li { margin-left: 10px;}
.update_panel .sns_box li a { display: block; padding: 25px; border-radius: 50px; width:25px; height: 25px; background-color: #f5f5f5; background-size: 25px auto; background-repeat: no-repeat; background-position: center; }

.update_panel .sns_box li a.facebook { background-image: url(../img/main/sns_facebook.png); width:12px; background-size: 12px auto;}
.update_panel .sns_box li a.instagram { background-image: url(../img/main/sns_instagram.png); width:22px; background-size: 22px auto;}
.update_panel .sns_box li a.youtube { background-image: url(../img/main/sns_youtube.png);}

.update_panel .notice_box {width:56%; position: absolute; top:50%; right:8%; transform: translateY(-50%); }
.update_panel .notice_box .cell_box { display: table; table-layout: fixed; border-spacing: 20px; width: 100%;}
.update_panel .notice_box .cell {width: 50%; max-width: 450px; margin: 0 10px;}
.update_panel .notice_box .cell:first-child {margin-left:0;}
.update_panel .notice_box .cell:last-child {margin-right:0;}
.update_panel .notice_box .cell { display: table-cell;  vertical-align: top; width: 50%;}
.update_panel .notice_box .cell a { display:block; position: relative; overflow: hidden; padding:0; font-size: 0;position: relative; width:100%; height:0; padding-top:99%; border: 1px solid #d5d5d5; overflow: hidden;}
.update_panel .notice_box .cell .thumb_box { /*background:#000; */position: absolute; top:0; left:0; right:0; bottom:0}
.update_panel .notice_box .cell .thumb_box img { width:100%; min-height:100%; }
.update_panel .notice_box .cell .cover_box { background: url(../img/main/cover.png) center no-repeat; background-size: 100% 100%; position: absolute;  left:0; width:100%; top:0;height: 100%;top: -1px; height: calc(100% + 1px);}
.update_panel .notice_box .cell .cover_box p { display: block; color:#fff;}
.update_panel .notice_box .cell .cover_box .inner_text {  position: absolute; top:25px; left:25px; max-width: 70%; }
.update_panel .notice_box .cell .cover_box .subject { font-size: 20px;overflow:hidden;word-break: break-all;white-space: normal;line-height: 1.4;height: 2.8em;text-align: left;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.update_panel .notice_box .cell .cover_box .date { font-size: 14px; letter-spacing: 0; margin-top: 10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}

.visit_panel { background-image: url(../img/main/visit_bg.jpg);background-size: cover; }
.visit_panel .txt_box {left:0; width:100%; text-align: center;}
.visit_panel p { color:#fff; }
.visit_panel .kotitle { color:#0162ff}


.footer { position: fixed; bottom:0; left:0; right:0; text-align: left;}
.footer > .inner { position: relative;padding:0 40px}
.footer .family_wrap { right:40px}
.footer .copyright { right:40px}


/* footer 숨기기 */
.footer { bottom:-230px; display: none; }
.footer.on { bottom:0px; display: block;}
.main_btn_ft{font-size:0; display:none; width:60px; height: 50px; background:url("../img/icon/ft_logo_btn.png") no-repeat; background-size: 100% 100%; position: fixed; bottom:0; left:22px; cursor: pointer;}
.main_btn_ft.on { background-image:url("../img/icon/ft_logo_btn2.png");/*bottom:155px; */}
.on .main_btn_ft { display: block;}

@media screen and (min-width:1200px) {

	.update_panel .notice_box .cell:hover .thumb_box img { transform:scale(1.1); opacity: 0.8; }
    .update_panel .notice_box .cell:hover .thumb_box { background: #0162ff;}
    .main_visual .btn_about:hover { background-color: #0162ff;}

    .main_more_btn:hover span {text-decoration: underline; }


}

@media screen and (max-width:1520px) {

    /* 2025.04.08 수정 */
	/* .main_panel.update_panel .txt_box {  width:auto; position: relative; top:auto; left:auto; right:auto; transform: none; } */
    .main_panel.update_panel .main_btn_box {margin-top:20px}

    .update_panel .update_box { position: absolute; top:50%; left: 0; transform: translateY(-50%); width: 100%;}
    /* .update_panel .notice_box { width:auto; position: relative; top:auto; right:auto; transform: none; margin: 30px -20px 0;} */

    .update_panel .notice_box .cell {max-width: 250px;}

}	

@media screen and (max-height:900px) and (max-width:1520px) {

	.update_panel .sns_box { display:none}
    /* .main_panel.update_panel .main_btn_box { margin-top: 0; position: absolute; bottom:0;right:0} */

}	

@media screen and (max-width:1300px) {

	

    .main_panel.intro_panel,
    .main_panel.donors_panel { background-size: auto 70vh;background-position: 30vw center;}
    .main_panel.intro_panel::before,
    .main_panel.donors_panel::before { width:40vw; }

    .about_detail_panel ul {padding:0 20px;}
    .about_detail_panel ul li { padding:20px}


}	

@media screen and (max-height:600px) {


    .main_panel.intro_panel,
    .main_panel.donors_panel { background-size: cover;}

    .main_panel.intro_panel::before,
    .main_panel.donors_panel::before { width:40vw; }


}

@media screen and (max-width:1024px) {
	
    body { background: #fff;}
    .container .sub-container .child { background-color: #fff!important}
    .container .sub-container .child + .child { margin:0}
    .main_visual {/*height:auto;min-height: 800px; */white-space: initial; width:100vw}
    .main_panel {/* height:auto;*//* min-height: 700px; */white-space: initial;}
    

    .main_btn_box { margin-top: 20px;}

    .main_visual {background-image: url(../img/main/visual_m.jpg); background-position: center; }
    .main_visual .txt_box { text-align: left; left:40px; width:calc(100% - 80px)}
    .main_visual .btn_about.pc { display: none;}
    .main_visual .btn_about.mobile { display: inline-block; position: relative; top:auto; right:auto; margin: 30px 0 0; width:60px; height: 60px; transform: rotate(90deg);}

    .main_visual .title p { font-size: 100px;}
    .main_visual .desc p { font-size: 18px; }


    .main_panel {padding:100px 40px 100px}
    .main_panel .txt_box { position: relative; top:auto; left:auto; transform: none;}
    .main_panel .title { margin:10px auto 20px}
    .main_panel .title p { font-size: 60px;}
    .main_panel .desc p { font-size: 16px;}

    .about_detail_panel { width:auto; height:auto; position: relative; top:auto; right:auto}

    .main_logo { display: none;}

    .container .sub-container .child.child_detail,
    .container .sub-container .child.child_about {width:auto;min-height: auto;}

    .main_panel.intro_panel::before,
    .main_panel.donors_panel::before {display: none; }

    .main_panel.about_panel { background: #fff; /*min-height: auto; height:auto; padding-bottom: 20px;*/}
    .main_panel.about_panel p { color:#333}

    .main_panel.about_panel .main_more_btn span { color:#333; }
    .main_panel.about_panel .main_more_btn span::after { background-image:url(../img/main/ic_arrow.png)}

    /* .about_detail_panel { padding:20px 0 100px; min-height: auto; height:auto; }
    .about_detail_panel .detail_box { position: relative; top:auto; right:auto; transform: none;}
    .about_detail_panel ul { display: block; padding:0}
    .about_detail_panel ul li { padding:30px 20px;  background: #f8f8f8;}
    .about_detail_panel ul li + li { border:0; margin-top:10px}

    .about_detail_panel ul li .tit { font-size: 24px;}
    .about_detail_panel ul li .desc { font-size: 16px;}


    .about_detail_panel ul {display: table;}
    .about_detail_panel ul li { display: table-cell; position: relative;}
    .about_detail_panel ul li + li { margin-top:0px}
    .about_detail_panel ul li + li::before { content: ""; width:1px; height: 80%; top:10%; left:0; display: block; position: absolute;  background: #d5d5d5; opacity: 0.4;} */

    .about_detail_panel { padding:20px 0 100px; min-height: auto; height:auto; }
    .about_detail_panel .detail_box { position: relative; top:auto; right:auto; transform: none;}
    .about_detail_panel ul { display: block; padding:0}
    .about_detail_panel ul li { padding: 20px 20px;  background: #f8f8f8;}
    .about_detail_panel ul li + li { border:0; margin-top:10px}

    .about_detail_panel ul li .tit { font-size: 24px;}
    .about_detail_panel ul li .desc { font-size: 16px;}


    .about_detail_panel ul {display: table;display: block;}
    .about_detail_panel ul li { /* display: table-cell; */ /* position: relative; */width: 100%;}
    .about_detail_panel ul li + li { /* margin-top:0px; */}
    .about_detail_panel ul li + li::before { /* content: ""; */ width:1px; height: 80%; top:10%; left:0; display: block; position: absolute;  background: #d5d5d5; opacity: 0.4;}

    /* 2025.04.09 수정 */
    /* .main_panel.intro_panel {background-size: auto 100%;    background-position: left center;    background-color: #8b9fa3;} */
    .main_panel.intro_panel {background-image: url('../img/main/intro_bg_t.jpg'); background-position: center bottom; background-color: #b8c6cf;}

    .main_panel.intro_panel .title p,
    .main_panel.intro_panel .desc p { color:#333}

    .main_panel.intro_panel .main_more_btn span { color:#333; }
    .main_panel.intro_panel .main_more_btn span::after { background-image:url(../img/main/ic_arrow.png)}
    

    .main_panel.main_panel.donors_panel { background-image: url(../img/main/donors_bg_m.jpg); background-size: cover;background-position: center;}

    /* .main_panel.main_panel.main_panel.info_panel { background: #0162ff url(../img/main/info_obj_m.jpg) center 20% no-repeat; background-size: 100% auto;} */
    .main_panel.main_panel.main_panel.info_panel {background-size: 80% auto;background-position: 30vw 100%;}

    .update_panel .update_box { width:auto; position: relative; top:auto; left:auto; transform: none; /*width:auto; left:auto */}

    /* 2025.04.09 수정 */
    .update_panel .notice_box { width:auto; position: relative; top:auto; right:auto; transform: none; /*margin: 30px 0 0;*//*overflow-x: auto;*/ padding: 0 0 10px 0;}

    .main_panel.update_panel .main_btn_box { position: relative;}

    /* .update_panel .notice_box .cell_box,
    .update_panel .notice_box .cell_box .cell { display: block; width: auto;}
    .update_panel .notice_box .cell_box .cell + .cell { margin-top: 20px;}
    .update_panel .notice_box .cell_box { box-sizing: 0;} */

    /* .visit_panel { min-height: auto; padding: 100px 40px;} */
    .visit_panel .main_panel { display: table; width:100%; height:100%; padding:0 }
    .visit_panel .txt_box { position: relative; top:auto; left:auto; right:auto; width:auto; padding:0 40px; transform: none; display: table-cell; vertical-align: middle;}

    /* .footer { position: relative; top:auto; bottom:auto; left:auto; right:auto; width:auto; white-space: initial;}     */
    .footer .copyright { right:auto}
    .main_btn_ft{display:none}

}

@media screen and (max-width:900px) {
    /* 2025.04.09 */
    .main_panel.main_panel.main_panel.info_panel {background-size: 100% auto;/*background-position: 25vw 300%;*/background-position: 25vw 100%;}
}

@media screen and (max-width:767px) {
    .footer .family_wrap {right:auto}

    /* .main_panel { min-height: 800px;} */


    .main_panel.intro_panel { background-image: url(../img/main/intro_bg_m.jpg); background-position: center; background-size: cover;}

  
    .main_panel.main_panel.main_panel.info_panel { background: #0162ff url(../img/main/info_obj_m.jpg) center 40% no-repeat; background-size: 100% auto;} 
}

@media screen and (max-width:588px) {

    .footer > .inner { padding:0 20px}


    .main_more_btn { padding-right:35px}
    .main_more_btn span::after { background-image:url(../img/main/ic_arrow_w_m.png); background-size: 100% auto; width:25px; height:100%}
    .main_more_btn.black span::after { background-image:url(../img/main/ic_arrow_m.png); background-size: 100% auto;}
    .main_panel.intro_panel .main_more_btn span::after,
    .main_panel.about_panel .main_more_btn span::after { background-image:url(../img/main/ic_arrow_m.png); background-size: 100% auto;}


    .main_visual .txt_box { text-align: center; }
    .main_visual p  { text-align: center; }
    .main_visual .title p { font-size: 80px;line-height: 1.05em;}
    .main_visual .desc { margin-top: 10px;}
    .main_visual .desc p { font-size: 16px; }
    .main_visual .btn_about.mobile { margin:30px auto 0;transform: rotate(90deg);}

    /* 2025.04.08 */
    .main_panel {padding:90px 20px 10px}
    /* .main_panel {padding:90px 20px 0px} */

    .main_panel .kotitle,
    .main_panel .entitle { font-size: 16px;}
    .main_panel .title p { font-size: 45px;}
    .main_panel .desc p { font-size: 14px;}


    .main_panel.about_detail_panel { padding:10px 20px 60px; }
    .about_detail_panel ul li .tit { font-size: 16px;}
    .about_detail_panel ul li .desc { font-size: 12px;}

    .about_detail_panel ul li img.mobile {  width: 22px; position: absolute;top: 22px;left: 19px;}
    .about_detail_panel ul li .tit{ padding-left: 30px;}

    .update_panel .notice_box .cell .cover_box .subject { font-size: 18px;}

    /* .visit_panel { padding: 60px 20px;} */

    .main_panel.main_panel.main_panel.info_panel { background-position: center bottom;}

	
}

@media screen and (max-width:378px) {

    .main_visual .title p { font-size: 60px;}
    
}

@media screen and (max-height:600px) {

	.about_detail_panel ul li p.icon {display:none}

}