@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
 
/*뭔지 모르겟지만 애니메이션 동작 관련해서 만들어둔 것 같음 */

.view-more:hover:before { -webkit-transform: translateX(0) skewX(-17.62deg); -ms-transform: translateX(0) skewX(-17.62deg); transform: translateX(0) skewX(-17.62deg); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top }
.view-more { display: inline-block; text-decoration: none; overflow: hidden; vertical-align: middle; background: transparent; overflow: hidden; -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; z-index: 1; font-weight: 100; }
.view-more:before {z-index: -1;content: "";display: block;width: 135%;height: 105%;position: absolute;left: 0;top: 0;-webkit-transform-origin: right top;-ms-transform-origin: right top;transform-origin: right top;-webkit-transform: translateX(-101%) skewX(-17.62deg);
-ms-transform: translateX(-101%) skewX(-17.62deg);transform: translateX(-101%) skewX(-17.62deg);-webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1),  -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-backface-visibility: hidden;backface-visibility: hidden;}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}


.mainContainer{padding:4% 0 6%; width: 1370px;}

.main_title h2{font-size: 36px;  font-weight:bold;}
.main_title h4{font-size: 22px; padding-bottom: 15px;}
.main_title p {font-size: 19px;}

.flex {display:flex;     justify-content: space-between; align-items: center;}

a, a:hover{text-decoration:none;}
/*메인 슬라이드 */

#main-slider .slider .slider-wrapper .slide img{width:100vw;}

 

/*메인 1 */

.churchContainer{padding:3% 0 ;}
.ci-left{}
.ci-right{}
.ci-right ul{ }
.ci-right ul li{     text-align: center;    padding: 5% 15px;}
.ci-right ul li a  { display: flex;    text-align: center;    flex-direction: column;    align-items: center;   }
.ci-right ul li a div{ width:90px; height:90px; background:#f3f3f3; border-radius: 45px; display: flex;    justify-content: center;    align-items: center; }
.ci-right ul li:hover a div{   background:#4b7eda; transition: all .3s  linear;  }
.ci-right ul li a div img{ padding-bottom: 5px; }
.ci-right ul li a  p{ padding: 10px 0; color:black;  font-size: 18px;}
.ci-right ul li a  p span{   font-size: 15px; color: #b3b3b3;}
.ci-right ul li:hover a  p{ font-weight:bold;  }   
.ci-right ul li:hover a  p span{ font-weight:initial;  }   




/*메인2*/

#main-2 {
	background: url(../../../Layouts/gwangsung_Layout/Images/3.sermon_bg.png) no-repeat;
	/*background-position: center;*/
	background-size: cover;
    width: 100%;
    height: auto; 
    text-align: center;
}
.scContainer{padding-bottom: 7%;}
.sc-top  {    padding-bottom: 30px;} 

.sc-bottom {} 
.sc-bottom >div {} 
.sc-bl {background: url(../../../Layouts/gwangsung_Layout/Images/3.sermon_bg1.png) no-repeat;background-size: cover;   height: 410px;text-align: left;    padding: 30px 50px 50px;}
.sc-bl h3{padding-bottom: 30px;     font-weight: bold;}
.sc-bl h2{    
	overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    height: 160px;     font-size: 33px; color:black;
}
.sc-bl >div{}
.sc-bl span{    color: white;    font-size: 20px;}
.sc-br{}
.sc-br >div{}
.sc-brt{background: url(../../../Layouts/gwangsung_Layout/Images/3.sermon_bg2.png) no-repeat;background-size: cover;   height: 200px;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center; margin-bottom:10px;}
.sc-brt p{    font-size: 23px;    color: white;}
.sc-brt a{}
.sc-brb{display: flex;    align-items: center;    justify-content: space-between;}
.sc-brb >div {width:50%; display: flex;    flex-direction: column;    justify-content: center;    align-items: center; font-size: 23px;    color: white;}
.sc-brb >div p {}
.sc-brb >div a {font-size: 23px;    color: white;}
.sc-brtl{background: url(../../../Layouts/gwangsung_Layout/Images/3.sermon_bg3.png) no-repeat;background-size: cover;   height: 200px; margin-right:5px;}
.sc-brbr{background: url(../../../Layouts/gwangsung_Layout/Images/3.sermon_bg4.png) no-repeat;background-size: cover;   height: 200px; margin-left:5px;}
 
.sc-brb >div a:hover  p{ animation:bounceIn ; animation-duration: 1s; }
.sc-brt a:hover  img{ animation:headShake ; animation-duration: 2s;   animation-iteration-count: infinite; }





 /*메인3*/

#main-3 {
	background: url(../../../Layouts/gwangsung_Layout/Images/4.mission_bg.png) no-repeat;
	/*background-position: center;*/
	background-size: cover;
    width: 100%;
    height: auto; 
    text-align: center;
}
.msContainer{}

.ms-top{ padding-bottom: 60px;}
.ms-top h2{color:#060c2c;}
.ms-top h4{color:white;}
.ms-bottom {} 
.ms-bottom >div {    background: white;    height: 260px;    margin: 0 15px;    width: calc( 100% / 3 - 30px);} 
.ms-bottom > div> img {transform: translateY(-50%);}
.ms-bottom h3 {    margin: 0 0 30px;     font-weight: bold;}
.ms-bottom p {height: 52px;}
.ms-bottom a {    display: block;    position: absolute;    left: 50%;    transform: translateX(-50%);    bottom: 30px;}
.ms-bottom a:hover img{ animation:rotateIn ; animation-duration: .5s; }
 

 /*메인4*/

#main-4 {
position: relative; 
	background: white;
	/*background-position: center;*/
	background-size: cover;
    width: 100%;
    height: auto; 
    text-align: center;
}
div#main-4 >img {    position: absolute;    left: 0;    top: 280px;
}
.fsContainer{padding:5% 0;}

.fs-left{text-align:left;}
.fs-left img{}

.fs-right {} 
.fs-right >div {height: 300px;    background: #dbe7fd;    margin: 0 15px;    width: calc(100% / 3 - 30px);    text-align: left;    padding: 30px;} 
.fs-right > div p {font-size:20px; text-align:right; margin-bottom: 0px;}
.fs-right > div p:nth-of-type(1) {color:#10306d; font-weight:bold; text-align:left;margin-bottom:30px;}  
.fs-right > div h4 {font-size:21px; margin-bottom:60px;overflow: hidden; line-height: 1.3; color:black;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    height: 68px;}  
.fs-right > div a {float:right;}  
.fs-right > div a img {}  

.fs-b2{background: #10306d!important; }
.fs-b2 h4, .fs-b2 p { color:white!important;}
.fs-b2 p:nth-of-type(1) {color:#a1e5fa!important;  } 


.fs-right > div a:hover img{ animation:headShake ; animation-duration: 2s;   animation-iteration-count: infinite;  }


 /*메인5*/

#main-5 {
	background: url(../../../Layouts/gwangsung_Layout/Images/6.history_bg.png) no-repeat;
	/*background-position: center;*/
	background-size: cover;
    width: 100%;
    height: auto; 
    text-align: center;
}
.chContainer{}

.ch-top{text-align:left; color:white;}
.ch-top img{padding: 0;    margin: 0;     position: absolute;    bottom: -28px;}

.ch-bottom {padding-top: 4%; display: flex;    align-items: flex-end;    justify-content: space-between;} 
.ch-bottom >div {} 
.ch-bl > div   {padding: 7px 0 12px;    background: #11316c;    margin-bottom: 15px;    border-radius: 40px;    width: 230px;}
.ch-bl > div:nth-of-type(2){ background: #fff; }
.ch-bl > div a  {display: flex;    align-items: flex-end;    justify-content: center;    flex-direction: row; color:white;}
.ch-bl > div p  {    margin: 0;} 
.ch-bl > div:nth-of-type(2) p  {    color: black;} 
.ch-bl > div a img {padding-right:7px;} 
.ch-br img {}   

.ch-bl > div:hover   {transform:scale(1.1); transition: all .2s linear;}


@media(max-width:1499px){
	.mainContainer{width:1190px;}
	.fs-right > div h4 {     line-height: 1.5;}
}

@media(max-width:1199px){
	.mainContainer{width:980px;}
	.ci-right ul li a p {     font-size: 16px;}
	.ms-bottom a {     bottom: 22px;}
	
	div#main-4 >img {     left: -140px;}
 
}


@media(max-width:992px){
	.mainContainer{width:740px;}
	.churchContainer , .fsContainer{    display: flex;    flex-direction: column;}
	.churchContainer >div, .fsContainer >div{width:100%;}
	.sc-brb >div p {    padding: 10px;}
	div#main-4 >img{display:none;}
	.fs-right {    padding: 20px 0;}
	.ch-bl > div {width:initial;}
	.ch-bottom {    padding-top: 10%;}
	.ch-bl{width:175px;}
	.ch-bl > div a img { display:none;}
	.ms-bottom h3 {     height: 35px;}

}

@media(max-width:767px) {
	.mainContainer{width:100vw;}
	.ci-right ul {    flex-wrap: wrap; justify-content: center;}
	.ci-right ul li {     width: 33%;}
	.ci-left {    text-align: center;}
	.sc-bl {    width: calc(100vw - 60px);    margin: 10px 15px ; height:auto;}
	.sc-bl h2 {height:105px; font-size:25px;}
	.sc-brb >div {height:auto;}
	.sc-brb >div p {margin: 0px; padding: 20px 0px; font-size:18px;}
	
	.ms-bottom , .fs-right {    display: flex;    flex-direction: column;}
	.ms-bottom >div {    width: calc(100vw - 60px);    margin: 10px 15px;    height: auto;}
	.ms-bottom > div> img {    transform: translateY(-12%);}
	.ms-bottom h3 {height:initial;     margin: 15px 0 10px;}
	.ms-bottom p {     margin-bottom: 50px;}
	.fs-right >div{width: calc(100vw - 60px);    margin: 10px 30px;   height: auto;}
	.fs-right > div h4 {     margin-bottom: 10px;}
	.fs-left{text-align:center;}
	
	.ch-bottom {     flex-direction: column;}
	.ch-bl  {    display: flex;    width: 100%;    justify-content: space-evenly;}
	.ch-bl >div{width: 40vw;}
}

@media(max-width:500px){
    .ci-right ul li a p {    font-size: 12px;}
	.ci-right ul li a p span {    font-size: 12px;}
	
	.ch-top img {     max-width: calc( 100vw - 30px);}
	.ch-bottom {    padding-top: 20%;}
	.ch-bl  {    justify-content: space-between;}
	
	.main_title h2 {    font-size: 28px; }
	.main_title h4 {    font-size: 16px;}
	.main_title p {    font-size: 15px;}
	
	.sc-bl h2 {    height: 60px;    font-size: 20px;}
    .sc-bl span, .fs-right > div p {    font-size: 16px;}
	
	.fs-right > div h4{    height: 30px;    font-size: 16px;}
	
	.ms-bottom h3 {    height: 25px;}
}