@charset "utf-8";

/* 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
.notosanskr * { 
 font-family: 'Noto Sans KR', sans-serif;
}

@font-face {
    font-family: 'KimjungchulScript-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulScript-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}



/* reset */
html{font-size:62.5%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif;}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:1.4rem;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none;background-color:#e9e9e9;} /* 뷰포트 변환시 폰트크기 자동확대 방지 */
input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0}
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
body,table,input,select,textarea,button {font-size:1.5rem;line-height:1.5;;font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;color:#222;letter-spacing:-0.02em;} /* color값은 디자인가이드에 맞게사용 */
a {color:#000;text-decoration:none}
/* a:active, a:hover {text-decoration:none} */
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
img {/*vertical-align:top;max-width:100%;*/}
*:focus {
    outline: 0;
}
/* 접근성 */
table caption, .screen_out{overflow:hidden;width:0;height:0;visibility:hidden;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */

/* 공통 */
.s_txt{color:#555;font-size:1.3rem !important}
.mt_4{margin-top:4px}
.mt_8{margin-top:8px}
.mt_20{margin-top:20px;}
.mt_30{margin-top:30px;}
.tbl_txt{font-size:1.4rem;color:#555}
table .big{font-size:1.6rem;font-weight:600 !important}

.col_red{color:#EB2A41 !important}
.col_blue{color:#2A6CEB !important}
.col_black{color:#222 !important}
.col_purple{color:#6C2794!important}
.col_gray{color:#888!important}



/*****login*****/
#wrapper.login{background:#f6f6f6;height:100%}
.loginBox{position:absolute;width:360px;height:560px;top:50%;left:50%;margin-top:-280px;margin-left:-180px;overflow:hidden;}
.loginBox .loginTitImg {text-align:center;overflow:hidden;margin-bottom:15px;}
.loginBox .loginTitImg h2{text-align:center}
.loginBox .loginTitImg p.ment{font-size:15px;color:#999;margin-top:15px;}
.loginBox .loginTitImg img{}

.loginBox dl.loginInfoBox {width:100%;box-shadow:6px 6px 10px #ddd, -6px 6px 10px #ddd;}
.loginBox dl.loginInfoBox {border-radius:0px;/*border:1px solid #ddd;width:31%;display:inline-block;margin:1% 0.3%;vertical-align:top*/overflow:hidden;}
.loginBox dl.loginInfoBox dt{background:#0070F5;overflow:hidden;}
.loginBox dl.loginInfoBox dt p {margin:25px 0px;text-align:center;}
.loginBox dl.loginInfoBox dt p span.tit {vertical-align:middle;}
.loginBox dl.loginInfoBox dt p span.n1 {color:#FFF;font-size:18px;} 
.loginBox dl.loginInfoBox dt p span.n2 {color:#f5d26c;font-size:18px;/* border-left:1px solid #2d3e53;margin-left:10px;*/padding-left:10px;} 
.loginBox dl.loginInfoBox dt span{padding:0px;text-align:center;font-weight:bold;} 
.loginBox dl.loginInfoBox dd {background:#fff;padding:10px 0px;margin:0}
.loginBox dl.loginInfoBox dd span{margin:0px;letter-spacing:-1px;font-size:15px}

.loginBox dl.loginInfoBox dd ul.idpw {margin:30px 50px 30px 50px }
.loginBox dl.loginInfoBox dd ul.idpw li {border-top:1px solid #868686;box-sizing:border-box;}
.loginBox dl.loginInfoBox dd ul.idpw li.noline{border-top:0px}
.loginBox dl.loginInfoBox dd ul.idpw li.save{text-align:center;line-height:36px;color:#999}
.loginBox dl.loginInfoBox dd ul.idpw li.save input[type="checkbox"] { display: inline-block;overflow:hidden;width: 22px;height: 22px; border:1px solid #333;margin-right:8px}
.loginBox dl.loginInfoBox dd ul.idpw li span{vertical-align:middle}
.loginBox dl.loginInfoBox dd ul.idpw li span.loginInp{display:inline-block;width: calc(100% - 50px);border:0px solid #ddd;/*margin-left:10px*/}
.loginBox dl.loginInfoBox dd ul.idpw li p{margin:10px 0px;}
.loginBox dl.loginInfoBox dd ul.idpw li p.btn{margin-top:18px;background:#3DB156;text-align:center !important;font-size:16px;color:#FFF;}
.loginBox dl.loginInfoBox dd ul.idpw li p.btn span {}
.loginBox dl.loginInfoBox dd ul.idpw li p.btn span.txt{color:#FFF;letter-spacing:1px;font-size:20px;display:inline-block;line-height:46px;}
.loginBox dl.loginInfoBox dd ul.idpw li span input[type="text"], .loginBox dl.loginInfoBox dd ul.idpw li span input[type="password"] {width:100%;height:36px;line-height:36px;border:0px;font-size:16px;}



span.login_ico {display:inline-block;width:40px;height:40px;font-size:0}
span.login_ico.id{background:url(https://resource.eduhansol.com/hansolhope/2021/img/login_icon_1.png) center center no-repeat;}
span.login_ico.pw{background:url(https://resource.eduhansol.com/hansolhope/2021/img/login_icon_2.png) center center no-repeat;}
span.login_ico.login{height:52px;background:url(https://resource.eduhansol.com/hansolhope/2021/img/login_icon_3.png) center center no-repeat;}
/*****login*****/


/* 레이아웃 */
.wrap{width:400px;background-color:#fff;margin:0 auto;min-height:100vh}
.content{width:calc(100% - 30px);padding:0 15px 80px 15px}
.content.main{width:100%;padding:0 0px}
.srch_box{width:calc(100% - 30px);padding:0 15px 0 15px}
/* header */

#header{position:relative;text-align:center;background-color:#03365D;}
#header .logo span{cursor: pointer;}
#header .logo span img{width:100%}
#header .logo span.pre{position:absolute;width:51px;height:51px;top:0;left:0;z-index:2}
#header .logo span.home{position:absolute;width:35px;height:51px;top:0;right:35px;z-index:2;background:url(../img/btn_home.png) center center;background-size:auto 100%;background-position:-12px center}
#header .logo span.my{position:absolute;width:35px;height:51px;top:0;right:0;z-index:2;background:url(../img/btn_my.png) center center;background-size:auto 100%;background-position:-15px center}

/*
#header .logo a img{width:100%}
#header .logo h1{font-size:1.8rem;color:#03365D;display:flex;align-items:flex-end;justify-content:center;letter-spacing:-0.08rem}
#header .logo h1 img{height:30px;margin-left:-15px}*/
#header .logo h1{position:relative;color:#fff;padding:12px 0;font-size:1.8rem;z-index:1}
#popup_open_btn{background:transparent}
#my_modal{display:none;width:300px;text-align:left;padding:30px 15px;background-color: #fff;border-radius:3px;}
#my_modal .modal_close_btn {position:absolute;top:10px;right:10px;cursor:pointer;font-size:20px;background:#eee;padding:5px;width:25px;height:25px;border-radius:50%;display: flex; align-items: center;justify-content: center;}

.content.main{}
.content.main h2{width:calc(100% - 30px);box-sizing:border-box;margin:0 auto;font-size:1.75rem;border-bottom:1px solid #ddd;padding:5px 0 5px 15px;margin-bottom:10px;}
.main .img.visual{display:block;background:url(../img/main_bg.png) center top no-repeat;background-size:100% auto;display:flex;align-items: center; justify-content: center;
width:100%;height:300px;}
.main .img.visual span{display:inline-block;color:#000;margin-left:25%;margin-bottom:22%;font-family: 'KimjungchulScript-Bold';font-size:18px}
.main .noti{margin: 30px 0 0 20px}
.main .noti p{padding-left: 8px}
.main .noti p:before{content:'·';margin-right:5px}
ul.main_link{width:calc(100% - 30px);overflow:hidden;margin:0 auto}
ul.main_link li{width:50%;float:left;padding:6px;box-sizing:border-box}
ul.main_link li span{position:relative;font-size:18px;box-sizing:border-box;display:flex;width:100%;height:70px;line-height:70px;align-items: center;
    justify-content: center;padding-left:30px;border-radius:15px;}
ul.main_link li:nth-child(4n+1) span,
ul.main_link li:nth-child(4n+4) span {border:3px solid #aaa;}
ul.main_link li:nth-child(4n+2) span,
ul.main_link li:nth-child(4n+3) span {border:3px solid #86c6cd;}
ul.main_link li span:before{position:absolute;top:11px;left:20px;content:'';display:inline-block;width:44px;height:44px;background:url(../img/icon_church.png) center center;background-size:auto 100%;display: flex; align-items: center;}

.unit dl.info-wrap{position:relative;box-sizing:border-box;overflow:hidden;display: flex; align-items: flex-start;min-height:130px}
.unit dl.info-wrap dt{float:left;}
.unit dl.info-wrap dt span {}
.unit dl.info-wrap dd p{text-align:left;}

.unit dl.info-wrap dt.photo{/*margin: 0px auto 0px auto;*/position:absolute;top:0;left:0}
.unit dl.info-wrap dt.photo span{display:inline-block;border-radius:15px;float:left}

.unit.list_pop dl.info-wrap dt.photo span{display: flex;width: 96px;height: 128px;align-items: center;}
.unit.list_pop dl.info-wrap dt.photo span img{width:100%;border-radius:8px;overflow:hidden}
.unit.list_pop dl.info-wrap dd {padding-left:110px;float:left;}
.unit.list_pop .noti{padding:15px;text-align:center}

.unit.list_cc dl.info-wrap{margin-bottom:5px;/*min-height:220px*/}
.unit.list_cc dl.info-wrap dt.photo span{width:90px;height:110px;background-size:auto 110% !important}
.unit.list_cc dl.info-wrap dd {padding-left:110px;float:left;}

.unit.list_mini dl.info-wrap{min-height:100px;}
.unit.list_mini dl.info-wrap {border-top:1px solid #EEE;border-bottom:1px solid #EEE;padding:15px 0}
.unit.list_mini dl.info-wrap::after{content:"";border: solid #ddd;border-width: 0 3px 3px 0;display: inline-block;padding: 5px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);position:absolute;top:calc(50% - 8px);right:15px;}
.unit.list_mini dl.info-wrap:nth-child(n+2){border-top:0px}
.unit.list_mini dl.info-wrap:nth-child(2n+2){background: #f6f6f6}
.unit.list_mini dl.info-wrap dt.photo {top:10px;left:10px}
.unit.list_mini dl.info-wrap dt.photo span{position:relative;width:65px; height:80px;overflow:hidden;}
.unit.list_mini dl.info-wrap dt.photo span img{position:absolute;width:110%;height:auto;left:50%;margin-left:-55%}
.unit.list_mini dl.info-wrap dd {padding-left:90px;float:left;}

dl.info-wrap dd.info{}
dl.info-wrap dd.info p{padding:3px 0;font-size:12px;display: flex;    align-items: flex-start;}
dl.info-wrap dd.info p span{margin-right:5px;white-space: nowrap;}
dl.info-wrap dd.info p.name span{font-size:16px}
dl.info-wrap dd.info p.name strong{background:#ddd;border-radius:15px;padding:3px 10px}
dl.info-wrap dd.info p.birth{}
dl.info-wrap dd.info p.hp{}
dl.info-wrap dd.info p.tel{}
dl.info-wrap dd.info p.email{}
.unit.list_cc dl.info-wrap dd.info p{padding:2px 0;}

.pop-wrap .info2{margin-top:20px}
.pop-wrap .info2 p {background:#EEE;border-radius:5px;padding:3px 0 3px 20%;margin:4px 0;font-size:13px}
.pop-wrap .info2 p span{margin-right:10px}
.pop-wrap .info2 p.build {}
.pop-wrap .info2 p.elder {}
.pop-wrap .info2 p.belong {}
.pop-wrap .btn-wrap {margin-top:40px;overflow:hidden;text-align:center}
.pop-wrap .btn-wrap.pt1 span {width:50%;margin:0 auto !important}
.pop-wrap .btn-wrap.pt2 span {width:48%;}
.pop-wrap .btn-wrap.pt2 span:first-child {float:left}
.pop-wrap .btn-wrap.pt2 span:last-child {float:right}
.pop-wrap .btn-wrap span.btn{display:inline-block;text-align:center;color:#FFF;padding:5px 0;border-radius:5px}
.pop-wrap .btn-wrap span.btn.sns{background:#3DB156}
.pop-wrap .btn-wrap span.btn.call{background:#0070F5}
.pop-wrap .btn-wrap span.btn.deauth{background:#c73069}
.pop-wrap .btn-wrap span.btn.off{background:#CCC !important;color:#FFF !important}

dl.srch_wrap {overflow:hidden;position:relative;padding:15px 0;margin-bottom:10px}
dl.srch_wrap dt{position:absolute;left:0;width:40px;display: flex; justify-content: flex-start; flex-wrap: nowrap; flex-direction: column;/**/}
dl.srch_wrap dt span:first-child{border:0}
dl.srch_wrap dt span:first-child input[type="checkbox"]{  display: none;}
dl.srch_wrap dt span:first-child input[type="checkbox"] + label{ display: inline-block;overflow:hidden;width: 30px;height: 30px; border:2px solid #333; position: relative;border-radius:10px;background:transparent}
dl.srch_wrap dt span:first-child input[id="check1"]:checked + label::after{content:'✔'; font-size: 35px;line-height:0.7;width: 30px; height: 30px;text-align: center;position: absolute;left: 0;top:0;background:#0070F5;color:#FFF}
	 
dl.srch_wrap dt span:last-child{width:34px;font-size:1.25rem;text-align:center;margin-top:2px}
dl.srch_wrap dd {padding-left:40px}
dl.srch_wrap dd span{width:100%;border:2px solid #333;border-radius:10px;display:inline-block;box-sizing:border-box	}
dl.srch_wrap dd span input{border:0;height:40px;padding-left:10px;width:calc(100% - 40px);background:transparent}
dl.srch_wrap dd a strong{position:absolute;width:51px;height:51px;right:0;top:10px}
dl.srch_wrap dd a strong img{width:100%}
.unit h2{font-size:1.5rem;border-bottom:1px solid #EEE;padding:5px 0 5px 3px;margin-bottom:10px}
.unit h2.supp{margin-top:30px}
.unit .list_wrap ul.list_sup {margin:5% 10%}
.unit .list_wrap ul.list_sup li{padding:10px;border-bottom:1px solid #ddd;}
.unit .list_wrap ul.list_sup li p strong{display:inline-block;background:#0070F5;color:#FFF;width:20px;height:20px;line-height:20px;border-radius:50%;margin-right:5px;text-align:center}
.unit .list_wrap ul.list_sup li p span{}
.unit .list_wrap{overflow:hidden;/*display: flex;justify-content: center;align-items: center;flex-wrap: wrap;*/}
.unit .list_wrap a {/*display:inline-block;*/cursor:pointer}
.unit .list_wrap .name{width:33.33%;float:left;margin:0px auto 25px auto;/*display: flex; flex-direction: column;*/}
.unit .list_wrap .name span {text-align:center;display:inline-block;}
.unit .list_wrap .name span:first-child{width:100%;padding: 0 10px; box-sizing: border-box;margin:0 auto;font-size:1.25rem;float:left;text-align:center}
.unit .list_wrap .name span:first-child img{border-radius:10px;width:100%;height:145px}
.unit .list_wrap .name span:last-child{width:100%;font-size:1.25rem;display: flex;align-items: center;justify-content: center;padding-top:10px}
.unit .list_wrap .name span:last-child strong{border-radius:5px;padding:2px 3px;background:#eee;margin-left:2px}
.unit .list_wrap .name .sup {display:inline-block;width:100%;padding: 0 10px;box-sizing:border-box;text-align:center;margin-top:10px}
.unit .list_wrap .name .sup i{display:inline-block;width:100%;box-sizing:border-box;border-radius:8px;padding:3px 5px;background:#eee;font-style:normal}
.unit .list_wrap .name .sup b{display:inline-block;width:100%;}
.unit .list_wrap .name .sup em{display:inline-block;width:100%;color:#0070F5}

.unit .list_wrap h3 {display:block;width:100%;background:#ddd;display: flex; justify-content: space-between; align-items: center;padding:3px 0}
.unit .list_wrap h3 strong {margin-left:15px}
.unit .list_wrap h3 span {font-size:11px;margin-right:15px}
.unit .list_wrap dl {width:100%;overflow:hidden;position:relative;margin-top:15px;border-bottom:1px solid #eee;padding-bottom:15px}
.unit .list_wrap dl dt {position:absolute;left:3px;top:0px}
.unit .list_wrap dl dt span{display:flex;background:#ddd;border-radius:50%;width:22px;height:22px;align-items: center;
    justify-content: center;}
.unit .list_wrap dl dd{padding-left:35px;}
.unit .list_wrap dl dd p.row{}
.unit .list_wrap dl dd p.row strong{}
.unit .list_wrap dl dd p.row.n01 span{margin-left:10px}
.unit .list_wrap dl dd p.row.n02,
.unit .list_wrap dl dd p.row.n02{}

.unit .list_wrap .para{padding:10px 10px 10px 10px;line-height:1.8;text-align: left;width: 100%;box-sizing: border-box;}
.unit .list_wrap .para p{position:relative;padding-left:0px;display:block}
.unit .list_wrap .para p strong{position:absolute;font-size:11px;font-weight:normal;top:4px;}
.unit .list_wrap .para p span{display:inline-block;}
.unit .list_wrap ul.tbl {overflow:hidden;margin-top: 0px}
.unit .list_wrap ul.tbl.pt1 li{width:100%;float:left}
.unit .list_wrap ul.tbl.pt2 li{width:50%;float:left}
.unit .list_wrap .para ul.tbl li:nth-child(-n+9) p span{padding-left:12px;}
.unit .list_wrap .para ul.tbl li:nth-child(n+10) p span{padding-left:18px;}
.unit .list_wrap .song img{width:100%}


/*footer */
#footer{position:relative;}
#footer .footer_wrap {position:fixed;text-align:center;background-color:#0070F5;border-radius:30px 30px 0 0;padding:8px 0;bottom:0;width:100%;display:flex;align-items:flex-end;justify-content:center;}
#footer .footer_wrap span.logo img{width:60px;margin-right:8px}
#footer .footer_wrap h1{font-size:1.5rem;color:#fff;letter-spacing:-0.08rem;font-weight:normal}

/* 반응형 */
@media screen and ( max-width:767px ){
.wrap{width:100%;}
#footer .footer_wrap{width:100%;margin:0 auto}
}

@media screen and ( min-width:768px ){
#footer .footer_wrap{width:400px;margin:0 auto}	
}