/* common */ #main-slider{position:relative;} .nav-tabs {border-bottom:none;} .plus { position:absolute; top:0; right:0;} .plus:hover { opacity:0.8; transition:0.3s all ease;} .slider .move-btn{top:50%!important;} .slider .slider-wrapper .slide p{display: flex;} .slider .slider-wrapper .slide img{width: 100%;} .box{display:inline-block; position:relative; opacity:0; top:50px; } .time{font-size:18px; border: 2px solid #1F57A7;} .time td{padding: 8px 0 !important; background-color: #fff;} .time th{font-size:24px; } /* main1 */ #main-1{background-image: url('../images/2_sermon_bg01_2024_wide.jpg');background-repeat:no-repeat;background-size: cover;background-color: #1F57A7;background-position:center center;} #main-1 .main1R{height: 400px;width: 50%;float: right;padding:70px 60px;} #main-1 .main1R .main1RM h2{margin: 0;font-size: 30px;color: #fff;padding: 0 0 15px;display: inline-block;border-bottom:1px solid #fff;} #main-1 .main1R .main1RM h6{margin: 20px 0;font-size: 16px;color: rgba(255,255,255,.5);line-height: 1.5;} #main-1 .main1R .main1RM h5{margin: 0;font-size: 20px;color: rgba(255,255,255,.5);line-height: 1.5;} #main-1 .main1R .main1RM h5 span{margin: 0 10px;} #main-1 .main1R .main1RM .main1HREF{display: inline-flex;gap: 5px;padding: 20px 0 0;} #main-1 .main1R .main1RM .main1HREF a{text-decoration:none;} #main-1 .main1R .main1RM .main1HREF a:hover .main1BOX{border:none; background-color:#39A6DE;border-color:#39A6DE;transition: 0.3s all ease;} #main-1 .main1R .main1RM .main1HREF .main1BOX{width: 100px;height: 100px;display: inline-flex;border: 1px solid #fff; position: relative;flex-direction: row;flex-wrap: wrap;align-content: center;justify-content: center;} #main-1 .main1R .main1RM .main1HREF .main1BOX p{margin: 0;font-size: 17px;color: #fff;letter-spacing: .5px;} #main-1 .main1L{height: 400px;width: 50%;float: left;padding:70px 0;} #main-1 .main1L a{text-decoration:none;position:relative;} #main-1 .main1L a .main1LM h2{margin: 0;font-size: 30px;color: #fff;padding: 0 0 15px;display: inline-block;border-bottom:1px solid #fff;} #main-1 .main1L a .main1LM h1{font-size: 38px;color: #fff;line-height: 2.5;margin: 0;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width:100%;} #main-1 .main1L a .main1LM h5{margin: 0;font-size: 20px;color: rgba(255,255,255,1);line-height: 1.5;} #main-1 .main1L a .main1LM h5 span{margin: 0 10px;} #main-1 .main1L a .main1LPLAY{position: absolute;top: 90%;text-align: center; left: 75%;border: none;display: block;transform: translate(0,-50%);} #main-1 .main1L a .main1LPLAY div{width:96px;height:96px;position:absolute;} #main-1 .main1L a .main1LPLAY .on{opacity:0;} #main-1 .main1L a .main1LPLAY .off{opacity:1;} #main-1 .main1L:hover a .main1LPLAY .on{transition:0.3s all ease;opacity:1;} #main-1 .main1L:hover a .main1LPLAY .off{transition:0.3s all ease;opacity:0;} #main-2{background-color: #F9F9F9;} #main-2 .main2R{height: 600px;width: 50%;float:left;display: inline-flex;align-items: center;justify-content: center;} #main-2 .main2R .main2RBG{height: 450px; background-repeat: no-repeat;background-position: left;background-size: contain;width: 100%;} #main-2 .main2L{width: 50%;float: left;padding: 75px 0 75px 30px; } #main-2 .main2L h2{line-height: 1.5;color: #37A6DE;margin: 0;font-size:40px;} #main-2 .main2L h1{margin: 0;font-size: 40px;line-height: 1.5;} #main-2 .main2L h7{font-size: 15px;line-height: 1.5;color: rgba(0,0,0,.5);padding: 0 0 20px;display: inline-block;font-family: 'Noto Sans Korean';} #main-2 .main2L ul{} #main-2 .main2L ul a{text-decoration:none; color:inherit;} #main-2 .main2L ul li{display: inline-flex;width: 100%;flex-direction: row;flex-wrap: wrap;align-content: center; align-items: center;justify-content: space-between;margin: 0 0 15px;background-color: #fff;border-radius: 10px;} #main-2 .main2L ul a:hover{font-weight:bold; transition:0.3s all ease;} #main-2 .main2L ul a:last-child li{margin:0;} #main-2 .main2L ul li .m2caret{display: inline-block;margin: 18px 10px;width: 14px; height: 14px;background-repeat: no-repeat;background-position: left;background-size: contain;flex-grow: 1;float: right;} #main-2 .main2L ul li p{display: inline-block;font-size: 20px;float: left;margin: 0;flex-grow: 90;} #main-2 .main2L ul li .plusBTN{float: right;text-align: right;flex-grow: 5;position:relative;height: 28px;width:74px;} #main-2 .main2L ul li .plusBTN div{width: 100%;background-position: center;background-repeat: no-repeat;height: 28px;position: absolute;} #main-2 .main2L ul li .plusBTN .on{opacity:0;} #main-2 .main2L ul li .plusBTN .off{opacity:1;} #main-2 .main2L ul li:hover .plusBTN .on{opacity:1; transition:0.3s all ease;} #main-2 .main2L ul li:hover .plusBTN .off{opacity:0; transition:0.3s all ease;} #main-3 .main3G{position:relative;} #main-3 .main3G .main3S{overflow:hidden;margin:0 0 70px;} #main-3 .main3G .main3S .galleryIMG{display: block;position: relative;height: 200px; overflow: hidden;background-color: #000;margin: 0 auto;background-size: cover;background-position: 50% 50%; background-origin: border-box;background-repeat: no-repeat;} #main-3 .main3G .main3S .galleryT{position: absolute;height: 100%;width: 100%; background: rgba(0,0,0,0.7);z-index: 3;top: 0;left: 0;display: none;} #main-3 .main3G .main3S .galleryT h2{font-size: 20px;margin: 0;color: #fff;position: absolute; top: 40%;text-align: left;left: 5%;width: 95%;border: none;display: block;transform: translate(0,-50%);} #main-3 .main3G .main3S .galleryT h5{font-size: 17px;color: #fff;margin: 0;position: absolute; top: 55%;text-align: left;left: 5%;width: 95%;border: none;display: block;transform: translate(0,-50%);} #main-3 .main3G .galleryP{position: absolute;z-index: 2;top: 50%;text-align: center;left: 15%; border: none;display: block;transform: translate(0,-50%);} #main-3 .main3G .galleryN{position: absolute;z-index: 999;top: 50%;text-align: center;right: 15%; border: none;display: block;transform: translate(0,-50%);} #main-4{text-align:center;border-bottom:1px solid #C4C4C4;} #main-4 .main4T{text-align: center;display: inline-block;padding: 24px 8%;margin: 0;position: relative;border: 1px solid #000;margin:0 0 40px;} #main-4 .main4T p{position:absolute;font-size:27px; font-weight:bold; letter-spacing:1px;top: 50%;text-align: center;width: 100%; border: none;display: block;transform: translate(0,-50%);left:0;margin:0;} #main-4 .main4M{display: inline-flex;width: 100%;justify-content: space-between;flex-wrap: wrap;flex-direction: row;margin:0 0 50px;} #main-4 .main4M .main4-1, #main-4 .main4M .main4-2, #main-4 .main4M .main4-3{width: calc(100% / 3 - 50px);display: inline-block;float: left;} #main-4 .main4M .main4-1 > a, #main-4 .main4M .main4-2 > a{margin:0 0 15px;} #main-4 .main4M .main4-1 a, #main-4 .main4M .main4-2 a{display: inline-flex;width: 100%;flex-direction: row;flex-wrap: wrap;align-content: center;justify-content: space-between;align-items: center;text-decoration:none;color:inherit;} #main-4 .main4M .main4-1 ul a, #main-4 .main4M .main4-2 ul a{line-height: 2;border-bottom: 1px solid #000;margin: 0 0 10px;} #main-4 .main4M .main4-1 ul a:last-child{margin:0;} #main-4 .main4M .main4-1 a li, #main-4 .main4M .main4-2 a li{width: 100%;display: inline-flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;font-size: 17px;align-items: center;} #main-4 .main4M .main4-1 a li span, #main-4 .main4M .main4-2 a li span{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;} #main-4 .main4M .main4-1 a li span:nth-child(1), #main-4 .main4M .main4-2 a li span:nth-child(1){width: 65%;text-align: left;} #main-4 .main4M .main4-1 a li span:nth-child(2), #main-4 .main4M .main4-2 a li span:nth-child(2){width: 35%;text-align: right;} #main-4 .main4M .main4-3 h1{width: 100%;text-decoration: none;color: inherit;margin: 0 0 15px;font-size: 20px;text-align:left;font-weight:bold;} #main-4 .main4M .main4-1 a h1, #main-4 .main4M .main4-2 a h1{margin: 0; font-size: 20px;font-weight:bold;} #main-4 .main4M .main4-1 a h5, #main-4 .main4M .main4-2 a h5{margin: 0; font-size: 17px;font-weight:bold;} #main-4 .main4M .main4-3 .quick a{text-decoration:none;color:inherit;} #main-4 .main4M .main4-3 .quick li{display: inline-flex;width: 100%;flex-direction: row;flex-wrap: wrap;align-content: center; justify-content: space-between;align-items: center;text-decoration: none;color: inherit;color:#000; padding: 10px;font-size: 17px;border: 1px solid rgba(0,0,0,.2);} #main-4 .main4M .main4-3 .quick a:nth-child(1) li{margin:0 0 5px;} #main-5 .main5M{text-align:center;margin:0 0 50px;} #main-5 .main5M h2{margin: 40px 0 0;font-size: 17px;line-height: 1.5;color: #37A6DB;} #main-5 .main5M h1{margin: 0;line-height: 1.5;font-size: 34px;} #main-5 .main5M .bookM{display: flex; align-items: center;position:relative;margin:0 0 10px;} #main-5 .main5M .bookM::before{ content: "";flex-grow: 1;background-color:#8E8E8E; height: 1px;font-size: 0px;line-height: 0px;margin: 0 0 0 30%;} #main-5 .main5M .bookM::after{ content: "";flex-grow: 1;background-color:#8E8E8E; height: 1px;font-size: 0px;line-height: 0px;margin: 0 30% 0 0;} #main-5 .main5M .bookM .book{width:35px;height:48px;margin:10px;} #main-5 .main5M span{font-size: 15px; color: rgba(0,0,0,.3);} #main-6{background-color:#1F56A8;} #main-6 .main6M{display: inline-flex; width: 100%;} #main-6 .main6M .main6plus{width: calc(100% / 4); text-align: center;height:100px;} #main-6 .main6M .main6plus a{width: 100%;display: inline-flex;height: 100%;flex-direction: row;border-left: 1px solid rgba(255,255,255,.5); text-decoration: none;flex-wrap: wrap;align-content: center;justify-content: center;align-items: center;gap: 15px; border-bottom: 1px solid rgba(255,255,255,.5);} #main-6 .main6M .main6plus:last-child a{border-right: 1px solid rgba(255,255,255,.5);} #main-6 .main6M .main6plus a .m6icon{width: 50px;height: 50px;display: inline-block;} #main-6 .main6M .main6plus a p{margin: 0;display: inline-block;font-size: 20px;color: #fff;} @media(min-width:1500px) and (max-width:1880px) { } @media(min-width:1230px) { .container {width:1230px;} } @media (min-width:1200px) and (max-width:1499px) { } @media (min-width:992px) and (max-width:1199px) { #main-1 .main1R{padding: 70px 30px;} #main-2 .main2L{padding: 75px 15px 75px 0;} } @media (min-width:768px) and (max-width:991px) { #main-1{background-image:none;background-color: transparent;} #main-1 .container{padding: 0;margin: 0;box-sizing: content-box;width: 100%;} #main-1 .container .row{margin:0;} #main-1 .container .row .main1M{display: flex;flex-direction: column;} #main-1 .main1R{width:100%;order:1; background-color: #1F57A7;display: inline-flex; justify-content:center;} #main-1 .main1L{width:100%;padding: 70px 15px;position:relative; background-image: url('../images/2_sermon_bg01_2024.jpg');background-repeat:no-repeat;background-position: right;} #main-2 .main2R{width:100%;} #main-2 .main2R .main2RBG{background-position:center;} #main-2 .main2L{width:100%;padding: 70px;height:inherit;} #main-3 .main3G .main3S{margin: 0 0 30px;} #main-4 .main4M{margin: 0 0 30px;padding:0 20px;} #main-4 .main4M .main4-1, #main-4 .main4M .main4-2, #main-4 .main4M .main4-3{width:100%;padding: 0 0 20px;} #main-6 .main6M .main6plus{height:120px;} #main-6 .main6M .main6plus a{flex-direction: column;} } @media (max-width:767px) { .time{font-size:14px; } #main-1{background-image:none;background-color: transparent;} #main-1 .container{padding: 0;margin: 0;box-sizing: content-box;width: 100%;} #main-1 .container .row{margin:0;} #main-1 .container .row .main1M{display: flex;flex-direction: column;} #main-1 .main1R{width:100%;background-color: #1F57A7;order:1;display: inline-flex; justify-content: center; padding:40px 0px;height: inherit;} #main-1 .main1R .main1RM{text-align:center;} #main-1 .main1R .main1RM h2{font-size:20px;} #main-1 .main1R .main1RM h6{word-break:keep-all;text-align: left;font-size:15px; padding: 0 10px;} #main-1 .main1R .main1RM .main1HREF{flex-direction: row; flex-wrap: wrap;justify-content: center;width:100%;} #main-1 .main1R .main1RM .main1HREF .main1BOX{} #main-1 .main1R .main1RM .main1HREF .main1BOX p{font-size:15px;} #main-1 .main1L{width:100%;padding: 40px 20px;position:relative;height:inherit; background-image: url('../images/2_sermon_bg01_2024.jpg');background-repeat:no-repeat;background-position: right;background-size: cover; } #main-1 .main1L a{position:initial;} #main-1 .main1L a .main1LM h2{font-size:17px;} #main-1 .main1L a .main1LM h1{font-size:20px;} #main-1 .main1L a .main1LM h5{font-size:15px;} #main-1 .main1L a .main1LPLAY{top:65%;left:80%;} #main-1 .main1L a .main1LPLAY div{width:50px;height:50px;background-size:contain;} #main-2 .main2R{width:100%;height:inherit;padding: 20px;} #main-2 .main2R .main2RBG{background-size:cover;height:300px} #main-2 .main2L{width:100%;padding: 20px;height:inherit;} #main-2 .main2L h2{font-size:17px;} #main-2 .main2L h1{font-size:30px;} #main-2 .main2L h7{font-size:15px;} #main-2 .main2L ul li p{font-size:17px;} #main-3 .main3G .main3S{margin: 0 0 15px;} #main-4 .main4T{padding: 20px 20%;} #main-4 .main4T p{font-size:20px;} #main-4 .main4M{margin: 0 0 30px;padding:0 20px;} #main-4 .main4M .main4-1 a h1, #main-4 .main4M .main4-2 a h1{font-size:17px;} #main-4 .main4M .main4-1, #main-4 .main4M .main4-2, #main-4 .main4M .main4-3{width:100%;padding: 0 0 20px;} #main-4 .main4M .main4-3 h1{font-size:17px;} #main-5 .main5M h1{font-size:20px;} #main-5 .main5M span{padding:20px;} #main-6 .main6M{flex-wrap: wrap;} #main-6 .main6M .main6plus{height:120px;width: calc(100% / 2);} #main-6 .main6M .main6plus a{flex-direction: column; } #main-6 .main6M .main6plus:first-child a{border-left:none;} #main-6 .main6M .main6plus:nth-child(3) a{border-left:none;} #main-6 .main6M .main6plus:last-child a{border-right:none;} #main-6 .main6M .main6plus a p{font-size:17px;} } @media (max-width:320px) { }