@charset "utf-8";

#inc01{padding:78px 0 97px}
#inc01 .inner{width:1565px;margin:0 auto}
#inc01 .img_icon{margin-bottom:20px}
#inc01 .all_text_wrap01{margin-bottom:77px}
#inc01 .story_list{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
#inc01 .story_list > li{overflow:hidden;border-radius:13px;width:calc((100% - 40px) / 3);height:327px}
#inc01 .story_list > li:nth-child(n+4){margin-top:25px}
#inc01 .story_list > li > a > img{height:100%;transition:all .5s;object-fit:cover}
#inc01 .story_list .gradient{position:relative}
#inc01 .story_list .gradient:after{opacity:0;content:"";position:absolute;top:0;left:0;pointer-events:none;width:100%;height:100%;background:linear-gradient(to bottom,rgba(12, 29, 71, 0) 0%, rgba(12, 29, 71, 0.5) 60%, rgba(12, 29, 71, 0.9) 80%);transition:all .5s}
#inc01 .story_list .txt_box{position:absolute;left:47px;bottom:55px;z-index:1;opacity:0;width:100%;transition:all 1s} 
#inc01 .story_list .txt_box > span{display:flex;align-items:center;justify-content:center;margin-bottom:10px;width:104px;height:31px;border-radius:50pt 50pt 50pt 0;background:#fff;color:var(--primary);font-weight:600;font-size:18px} 
#inc01 .story_list .txt_box > .txt{color:#fff;font-weight:700;font-size:29px} 
#inc01 .more_btn{display:flex;align-items:center;justify-content:center;margin:50px auto 0;width:225px;height:66px;border:1px solid #e0e0e2;border-radius:50pt;color:var(--dark);font-weight:700;font-size:15px;transition:all .3s}

/* 공통 */
.popup{display:none;position:fixed;width:100%;height:100%;left:0;top:0;z-index:9}
.popup .pop_bg{width:100%;height:100%;background:rgba(0,0,0,0.4)}
.popup .pop_bg .pop_img_wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.popup .pop_close{position:absolute;top:23px;right:25px}
.popup .pop_bg .img_box{padding:57px 20px 24px;width:570px;border-radius:18px;background:#fff}
.popup .txt_wrap{text-align:center;color:var(--dark)}
.popup .txt_wrap .tit{display:inline-block;margin-bottom:30px;font-size:23px;font-family:var(--c-font);font-weight:550;word-break:keep-all}
.popup .txt_wrap .tit > span{font-family:initial !important;font-size:15px;color:var(--dark)}
.popup1.active,.popup3.active,.popup4.active{display:flex}

/* 저작권 보호 팝업 */
.popup1 .pop_bg .img_box .pop_img{width:100%;max-width:100%}
#popup1 .pop_img_wrap{transform-origin:center center;transition:transform 0.2s ease;cursor:grab}
/* 목회자주관 연합세미나 팝업 */
.popup3 .txt_wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px 20px 58px;background:url("./img/popup03_bg.jpg") no-repeat center/100%}
.popup3 .txt_wrap .txt{line-height:1.4;color:var(--dark);font-weight:600;text-align:left;font-size:16px}
.popup3 .txt_wrap .dot_txt{margin:22px 0}
.popup3 .txt_wrap .dot_txt > li{position:relative;margin-bottom:10px;padding-left:20px;text-align:left;font-size:16px}
.popup3 .txt_wrap .dot_txt > li:last-child{margin-bottom:0}
.popup3 .txt_wrap .dot_txt > li:after{position:absolute;top:0;left:0;content:"◆";display:block;color:var(--dark);font-size:15px}
.popup3 .txt_wrap .dot_txt > .dot_none{text-align:center;font-weight:600}
.popup3 .txt_wrap .dot_txt > .dot_none:after{content:""}
.popup3 .txt_wrap > b{display:block;margin-top:20px}
.popup3 .txt_wrap .font_blue{text-align:center;color:#0000ff}
.popup3 .txt_wrap .font_pink{color:#ff0000}
/* 사이버 공개세미나 신청 팝업 */
.popup4 .number_dot{text-align:left;font-size:17px}
.popup4 .number_dot > li{display:flex;margin-bottom:10px}
.popup4 .number_dot > li:last-child{margin-bottom:0}
.popup4 .number_dot .left_txt{white-space:nowrap;margin-right:15px;font-weight:550}
.popup4 .number_dot .right_txt > li{margin-bottom:5px}
.popup4 .number_dot .right_txt > li:last-child{margin-bottom:0}
.popup4 .number_dot .num{color:var(--primary);font-weight:550}

/* 반응형 [s] */
@media (hover:hover){
#inc01 .story_list > li:hover a > img{transform:scale(1.01)}
#inc01 .story_list .gradient:hover:after{opacity:1} 
#inc01 .story_list .gradient:hover .txt_box{opacity:1}
#inc01 .more_btn:hover{border-color:var(--primary);color:var(--primary)}
}
@media (max-width:1800px){
#inc01 .inner{width:95%}
#inc01 .story_list > li{height:auto}
#inc01 .story_list > li > a > img{width:100%}
}
@media (max-width:1200px){
#inc01{padding:70px 0}
#inc01 .all_text_wrap01{margin-bottom:50px}
}
@media (max-width:1024px){
#inc01 .img_icon > img{width:80px}
#inc01 .story_list > li{width:calc((100% - 20px) / 2)}
#inc01 .story_list > li:nth-child(n+3){margin-top:20px}    
}
@media (max-width:768px){
#inc01{padding:50px 0}
#inc01 .img_icon > img{width:70px}
#inc01 .all_text_wrap01{margin-bottom:40px}
#inc01 .inner{width:100%;padding:0 15px}
#inc01 .story_list{gap:0 15px}
#inc01 .story_list > li{width:calc((100% - 15px) / 2);border-radius:10px}
#inc01 .story_list > li:nth-child(n+3){margin-top:15px}
#inc01 .story_list .txt_box{left:30px;bottom:40px}
#inc01 .story_list .txt_box > .txt{font-size:23px}
#inc01 .story_list .txt_box > span{width:90px;height:28px;font-size:15px}
#inc01 .more_btn{width:190px;height:60px;font-size:14px}
}
@media (max-width:700px){
.popup .pop_bg .pop_img_wrap{padding:0 15px;width:100%}
.popup .pop_bg .img_box{width:100%;border-radius:10px}
.popup .pop_close{right:40px}
#popup1 .pop_bg .img_box{padding:57px 10px 10px}
.popup3 .txt_wrap{background-size:cover}
#popup3 .pop_bg .pop_center{position:relative;overflow-y:auto;height:450px;border-radius:10px}
#popup3 .pop_bg .img_box{border-radius:0}
#popup3 .pop_close{right:20px}
}
@media (max-width:580px){
#inc01 .story_list .txt_box{left:25px;bottom:30px}
#inc01 .story_list .txt_box > .txt{font-size:20px}
#inc01 .story_list .txt_box > span{width:80px;height:25px;font-size:13px}
#inc01 .more_btn{width:170px;height:55px;font-size:13px}
.popup .txt_wrap .tit{font-size:20px;line-height:1.3;word-break:keep-all}
.popup3 .txt_wrap .dot_txt > li{line-height:1.4}
.popup3 .txt_wrap .txt br{display:none;word-break:keep-all}
}
@media (max-width:480px){
#inc01 .img_icon{margin-bottom:15px}
#inc01 .img_icon > img{width:60px}
#inc01 .all_text_wrap01{margin-bottom:30px}
#inc01 .story_list{gap:0 10px}
#inc01 .story_list > li{width:calc((100% - 10px) / 2)}
#inc01 .story_list > li:nth-child(n+3){margin-top:10px}
#inc01 .story_list .txt_box{left:20px;bottom:25px}
#inc01 .story_list .txt_box > .txt{font-size:17px}
#inc01 .story_list .txt_box > span{width:70px;height:23px;font-size:11px}
#inc01 .more_btn{margin:40px auto 0;width:160px;height:50px}
#popup1 .pop_bg .img_box{padding:40px 10px 10px}
.popup .pop_close{top:15px}
.popup .txt_wrap .tit{margin-bottom:20px;font-size:18px}
.popup .txt_wrap .tit > span{font-size:13px}
.popup3 .txt_wrap{padding:25px 10px 58px}
.popup3 .txt_wrap .dot_txt > li{padding-left:15px;font-size:15px}
.popup3 .txt_wrap .dot_txt > li:after{font-size:13px}
.popup3 .txt_wrap > b{font-size:15px;line-height:1.3}
.popup4 .number_dot > li{font-size:15px;line-height:1.3}
}
@media (max-width:390px){
#inc01 .img_icon > img{width:55px}
#inc01 .all_text_wrap01{margin-bottom:25px}
#inc01 .story_list .txt_box{left:15px;bottom:20px}
#inc01 .story_list .txt_box > .txt{font-size:15px}
#inc01 .more_btn{width:145px;height:40px;font-size:12px}
}
/* 반응형 [e] */