.bg-area{background-size:cover; background-position:center; background-repeat:no-repeat}

/* -----------------------------------
page-about-association-church
----------------------------------- */
/* page-visual */
.page-about-association .page-visual{position:relative}
.page-about-association .page-visual::after{content:''; display:block; height:100%; position:absolute; left:0; right:0; top:0; bottom:0; background:linear-gradient(180deg, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.62) 82%, rgba(255, 255, 255, 0.88) 92%, rgba(255, 255, 255, 0.95) 96%, rgba(255, 255, 255, 1) 100%)}
.page-about-association .page-visual .visual-area{background-image:url('../images/about/visual_about_association.jpg')}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .page-about-association .page-visual .visual-area{background-image:url('../images/about/visual_about_association@2x.jpg')}
}
.page-about-association .page-visual .container{min-height:500px; justify-content:flex-start; padding-top:70px; padding-bottom:var(--padding-container-xl)}
.page-about-association .page-visual .desc p > br{display:block}
.page-about-association .page-visual .desc p:not(:first-child){margin-top:8px}
@media(min-width:768px){
  .page-about-association .page-visual .container{min-height:700px; padding-top:var(--padding-container-xl)}
}
@media(min-width:1070px){
  .page-about-association .page-visual{min-height:1000px}
  .page-about-association .page-visual .visual-area{background-image:url('../images/about/visual_about_association_pc.jpg')}
  .page-about-association .page-visual .container{min-height:500px; justify-content:flex-start; padding-top:var(--padding-container-2xl); padding-bottom:var(--padding-container-2xl)}
  .page-about-association .page-visual .desc p{font-size:18px; line-height:1.6; color:#515151}
  .page-about-association .page-visual .desc p .br-mo{display:none}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .page-about-association .page-visual .visual-area{background-image:url('../images/about/visual_about_association_pc@2x.jpg')}
}

.page-about-association .section-head{max-width:600px; margin-right:auto; margin-left:auto; padding-left:0; padding-right:0}
.page-about-association .section-awards .section-head,
.page-about-association .section-press .section-head{ margin-right:0; margin-left:0}
@media(min-width:1070px){
.page-about-association .section-head{max-width:860px}
}

/* church */
.page-about-association .church{padding-top:var(--padding-container-lg); padding-bottom:var(--padding-container-md)}
.page-about-association .church .section-head{text-align:left}
.page-about-association .church-list{margin-top:32px}
.page-about-association .church-list .row{margin-right:-6px; margin-left:-6px; row-gap:16px; justify-content:center}
.page-about-association .church-list .row > *{padding-right:6px; padding-left:6px}
.page-about-association .church-list .list-item a{display:block}
.page-about-association .church-list .title{font-size:16px; line-height:1.3; margin-top:8px; transition:all .3s ease}
.page-about-association .church-list .thum{width:100%; position:relative; padding-bottom:65%; border-radius:var(--radius-md); overflow:hidden; transition:all .2s ease}
.page-about-association .church-list img{position:absolute; top:0; left:0; width:100%; height:100%;  object-fit:cover}

/* hover */
.page-about-association .church-list .list-item .thum img{transition:all .4s ease}
.page-about-association .church-list .list-item a:hover .thum img{transform:scale(1.05)}
.page-about-association .church-list .list-item a:hover .title{color:var(--text-point)}
@media(min-width:768px){
  .page-about-association .church .section-head{text-align:center}
}
@media(min-width:1070px){
  .page-about-association .church-list{margin-top:48px}
  .page-about-association .church-list .row{margin-right:-12px; margin-left:-12px; row-gap:32px}
  .page-about-association .church-list .row > *{padding-right:12px; padding-left:12px}
  .page-about-association .church-list .title{font-size:20px; margin-top:12px}
}


/* change */
.page-about-association .change{padding-top:var(--padding-container-md)}
.page-about-association .change .section-head{width:90%}
.page-about-association .change .section-head > *:not(:first-child){margin-top:24px}
.page-about-association .change .blockquote{font-size:15px; color:var(--text-point)}
.page-about-association .change .cite{display:block; font-size:12px; color:var(--text-muted); margin-top:8px}
.page-about-association .change .bg-area{position:relative; padding-bottom:54.5%; max-height:800px; background-image:url('../images/about/visual_about_association2.jpg'); margin-top:-10px; z-index:-1}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .page-about-association .change .bg-area{background-image:url('../images/about/visual_about_association2@2x.jpg')}
}
.page-about-association .change .bg-area::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; display:block; height:100%; background:linear-gradient(0deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.45) 75%, rgba(255, 255, 255, 0.85) 85%, rgba(255, 255, 255, 1) 100%)}
@media(max-width:767px){
  .page-about-association .change .blockquote br{display:none}
}
@media(min-width:768px){
  .page-about-association .change .bg-area{padding-bottom:41.7%; margin-top:-30px}
}
@media(min-width:1070px){
  .page-about-association .change .section-head > *:not(:first-child){margin-top:40px}
  .page-about-association .change .blockquote{font-size:20px}
  .page-about-association .change .cite{font-size:15px; margin-top:16px}
  .page-about-association .change .bg-area{margin-top:-50px}
}
@media(min-width:1920px){
  .page-about-association .change .bg-area{padding-bottom:0; height:800px}
}

/* photo-slide */
.page-about-association .photo-slide .section-head{width:90%}
.page-about-association .photo-slide{padding-top:var(--padding-container-lg); padding-bottom:var(--padding-container-lg); background-color:var(--bg-warm)}
:root{
  --photo-slide-gap-sm:8px;
  --photo-slide-gap-md:12px;
  --photo-slide-gap-lg:24px;
}
.infinite-marquee{width:100%; gap:var(--photo-slide-gap-sm); display:flex; overflow:hidden; margin:var(--photo-slide-gap-sm) 0}
.infinite-marquee:not(:last-child){padding-top:16px}
.infinite-marquee .content{min-width:100%; gap:var(--photo-slide-gap-sm); flex:none; justify-content:space-around; display:flex; animation:scrolling 80s linear infinite}
.infinite-marquee .content.reverse{animation-direction:reverse}
.infinite-marquee .content img{-webkit-transform:translateZ(0); object-fit:cover; height:100px; border-radius:var(--radius-md)}
  @keyframes scrolling {
    from {transform:translateX(0)}
    to   {transform:translateX(calc(-100% - 1rem))}
  }
@media(min-width:768px){
  .infinite-marquee{margin:var(--photo-slide-gap-md) 0}
  .infinite-marquee:not(:last-child){padding-top:20px}
  .infinite-marquee,
  .infinite-marquee .content{gap:var(--photo-slide-gap-md)}
  .infinite-marquee .content img{height:180px}
}
@media(min-width:1070px){
  .infinite-marquee{margin:var(--photo-slide-gap-lg) 0}
  .infinite-marquee:not(:last-child){padding-top:24px}
  .infinite-marquee,
  .infinite-marquee .content{gap:var(--photo-slide-gap-lg)}
  .infinite-marquee .content img{height:320px}
}



/* ==== about-church-of-god ==== */
.page-about-church-of-god .visual-area{background-image:url('../images/about/bg_about_visual.jpg')}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .page-about-church-of-god .visual-area{background-image:url('../images/about/bg_about_visual@2x.jpg')}
}

/* about-church :intro */
.section-intro{padding-top:var(--padding-container-lg); padding-bottom:var(--padding-container-md)}
.section-intro .section-head{padding-bottom:24px}
.section-intro .intro-photo{width:100%; padding-bottom:73%; background-size:cover; background-position:right; border-radius:var(--radius-md); background-image:url('../images/about/visual_intro_pangyo.jpg')}
@media(min-width:1070px){
  .section-intro .section-head{max-width:450px; padding-top:30px; padding-bottom:30px}
  .section-intro .intro-photo{border-radius:var(--radius-lg)}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .section-intro .intro-photo{background-image:url('../images/about/visual_intro_pangyo@2x.jpg')}
}

/* about-church :elohim */
.section-elohim{padding-top:var(--padding-container-lg); padding-bottom:var(--padding-container-md)}
.section-elohim .banner{padding-top:50px; padding-bottom:65%; padding-left:40px; padding-right:40px; border-radius:var(--radius-md); align-items:flex-start; background-size:cover; background-position:bottom; background-repeat:no-repeat}
.section-elohim .banner .eyebrow{font-size:14px}
.section-elohim .banner .title{font-size:22px; letter-spacing:-1.3px}
.section-elohim .banner .btn{margin-top:16px}
.section-elohim .banner-christ{background-image:url('../images/about/bg_christ.jpg'); background-color:#F8F7F3}
.section-elohim .banner-mother{background-image:url('../images/about/bg_heavenlymother.jpg'); background-color:#FAF5F6}
@media(min-width:768px){
  .section-elohim .banner .title{font-size:28px}
}
@media(min-width:1070px){
  .section-elohim .banner{padding-top:80px; padding-bottom:40%; border-radius:var(--radius-lg)}
  .section-elohim .banner .title{font-size:36px; letter-spacing:-2.16px}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .section-elohim .banner-christ{background-image:url('../images/about/bg_christ@2x.jpg')}
  .section-elohim .banner-mother{background-image:url('../images/about/bg_heavenlymother@2x.jpg')}
}

/* about-church :happyhome */
.section-happyhome{max-height:900px; min-height:560px; padding-bottom:35%; padding-top:var(--padding-container-md); background:linear-gradient(180deg, #FFF 10.85%, rgba(243, 243, 243, 0.00) 46.35%); background-image:url('../images/about/bg_happyhome.jpg'); background-size:cover; background-position:bottom; background-repeat:no-repeat}
.section-happyhome .section-head{width:90%; margin-right:auto; margin-left:auto}
@media(min-width:1070px){
  .section-happyhome{max-height:1200px; min-height:1080px}
  .section-happyhome .section-head{width:100%}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .section-happyhome{background-image:url('../images/about/bg_happyhome@2x.jpg')}
}

/* about-church :truth */
.section-truth{padding-top:var(--padding-container-lg); padding-bottom:var(--padding-container-md)}
.section-truth .banner{padding:40px; border-radius:var(--radius-md)}
.section-truth .banner .title{font-size:22px; line-height:1.4; letter-spacing:-1.3px; color:var(--card-title-dark)}
.section-truth .banner .item{max-width:280px}
.section-truth .banner .item > *:not(:first-child){margin-top:8px}
.section-truth .banner .item::before{content:''; display:block; width:120px; height:120px; margin-bottom:24px; border:4px solid #fff; border-radius:var(--radius-md); background-size:cover; box-shadow:0px 15px 20px 0px rgba(0, 0, 0, 0.07), 0px 5px 5px 0px rgba(0, 0, 0, 0.05), 0px 2px 3.381px 0px rgba(0, 0, 0, 0.04), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.02)}
.section-truth .banner-truth{background-color:#FAF9F5}
.section-truth .banner-truth .item::before{background-image:url('../images/about/truth_truth.jpg')}
.section-truth .banner-sermon{background-color:#F9FAF4}
.section-truth .banner-sermon .item::before{background-image:url('../images/about/truth_sermon.jpg')}
.section-truth .banner-qua{background-color:#FBF6F6}
.section-truth .banner-qua .item::before{background-image:url('../images/about/truth_qna.jpg')}
@media(min-width:1070px){
  .section-truth .banner{padding:80px 40px; border-radius:var(--radius-lg)}
  .section-truth .banner .title{font-size:26px; line-height:1.4; letter-spacing:-.8px}
  .section-truth .banner .item > *:not(:first-child){margin-top:16px}
  .section-truth .banner .item::before{content:''; display:block; width:200px; height:200px; margin-bottom:48px; border:8px solid #fff; border-radius:var(--radius-lg)}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .section-truth .banner-truth .item::before{background-image:url('../images/about/truth_truth@2x.jpg')}
  .section-truth .banner-sermon .item::before{background-image:url('../images/about/truth_sermon@2x.jpg')}
  .section-truth .banner-qua .item::before{background-image:url('../images/about/truth_qna@2x.jpg')}
}
