body:has(.wrap_intro) { flex-direction: column; display: flex; height: 100vh;} 

.wrap.wrap_intro { position:relative; flex: 1; flex-direction: column; display: flex; } 
.wrap.wrap_intro .img_bg { position:absolute; z-index:-10; top:0; left:0; right:0; height:30%; background-image:url(../images/intro/bg_sky.jpg); background-size:cover; background-position:center; } 
.wrap.wrap_intro .img_bg::before { position:absolute; z-index:20; inset:0; background: linear-gradient(to bottom, rgba(255,255,255,0.6),rgba(255,255,255,1)); content:"" } 
.header_intro { flex: 1; display: flex; justify-content: center; align-items: center; padding: 15px 0 20px; } 
.header_intro .img_logo { width: auto; height: 52px; } 

.wrap_intro .main_intro { flex: none; justify-content: center; align-items: center; display: flex; padding: 0 20px; } 
.wrap_intro .list_site { flex-direction: column; display: flex; width: 100%; max-width: 460px; min-height: 400px; height: 100%; gap: 15px; } 
.wrap_intro .list_site li { overflow: hidden; height: 180px; border-radius: 18px; } 
.wrap_intro .link_site { position:relative; flex-direction:column; display: flex; overflow: hidden; width: 100%; height: 100%; border-radius: inherit; background-size: cover; background-position: center; } 
.wrap_intro .site_main { background-image: url(../images/intro/bg_main.jpg) } 
.wrap_intro .site_tour { background-image: url(../images/intro/bg_tour.jpg) } 
.wrap_intro .site_dona { background-image: url(../images/intro/bg_donation.jpg) } 
.wrap_intro .site_youth { background-image: url(../images/intro/bg_youth.jpg) } 
.wrap_intro .link_site::before { position: absolute; z-index: 0; inset: 0; content:""; } 
.wrap_intro .site_main::before { background: linear-gradient(to top,rgba(0, 128, 67, 0.7) 0%,rgba(0, 128, 67, 0) 75%); } 
.wrap_intro .site_tour::before { background: linear-gradient(to top,rgba(13, 56, 150, 0.7) 0%,rgba(13, 56, 150, 0) 75%); } 
.wrap_intro .site_dona::before { background: linear-gradient(to top,rgba(247, 124, 32, 0.7) 0%,rgba(247, 124, 32, 0) 75%); } 
.wrap_intro .site_youth::before { background: linear-gradient(to top,rgba(56, 36, 35, 0.7) 0%,rgba(56, 36, 35, 0) 75%); } 
.wrap_intro .link_site::after { flex-grow:1; transition: flex-grow .6s; content:'' } 
.wrap_intro .link_site .wrap_txt { order:1; position:relative; padding: 20px 25px; color: #fff; transition: all 0.3s } 
.wrap_intro .link_site .wrap_txt .desc_txt { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 400; line-height: 16px; word-break: keep-all; } 
.wrap_intro .link_site .wrap_txt .tit_txt { display: block; font-size: 20px; font-weight: 700; line-height: 28px; word-break: keep-all; } 
.wrap_intro .link_site .box_quick { display: inline-block; position: relative; margin-top:12px; padding: 3px 0; font-size: 12px; font-weight:500; line-height: 16px; color: #fff; z-index: 10; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.55); vertical-align: top } 
.footer_intro { flex:1; display:flex; flex-direction: column; align-items:center; gap:5px; padding: 20px 20px 15px; } 
.footer_intro .list_sns{display: flex;justify-content: center;align-items: center;gap:10px;padding-bottom:15px;}
.footer_intro .img_sns{width:35px;}
.footer_intro .txt_address{display: flex;justify-content: center;flex-wrap: wrap; gap: 5px 20px;font-style: normal;font-size: 14px; font-weight: 400; line-height: 24px; color: #444; text-align: center;}
.footer_intro .txt_copy { display:flex; justify-content: center; flex-wrap: wrap; font-size: 14px; font-weight: 400; line-height: 24px; color: #444; } 

@media (min-width: 1200px){
  .header_intro { align-items:end; padding: 40px 0 20px; } 
  .header_intro .img_logo { height: 64px; } 
  .main_intro { height:60%; padding: 20px 40px; } 
  .wrap_intro .list_site { flex-direction: row; align-items: center; width: 100%; max-width: 1400px; height: 100%; min-height: 400px; max-height:650px; gap: 10px; } 
  .wrap_intro .list_site li { flex: 1; align-items: center; display: flex; height: 100%; padding: 35px 10px; transition: padding 0.3s ease-in-out; } 
  .wrap_intro .list_site li:has(.link_site:hover, .link_site:focus) { padding: 10px; border-radius:5px 70px 5px 70px; } 
  .wrap_intro .link_site { height: 100%; border-radius:inherit; transition: border-radius 0.3s ease-in-out } 
  .wrap_intro .site_main:hover, .wrap_intro .site_main:focus { box-shadow: 10px 10px 1px rgba(0, 150, 75, 0.1); } 
  .wrap_intro .site_tour:hover, .wrap_intro .site_tour:focus { box-shadow: 10px 10px 1px rgba(3, 78, 162, 0.1); } 
  .wrap_intro .site_dona:hover, .wrap_intro .site_dona:focus { box-shadow: 10px 10px 1px rgba(255, 90, 0, 0.1); } 
  .wrap_intro .site_youth:hover, .wrap_intro .site_youth:focus { box-shadow: 10px 10px 1px rgba(78, 48, 46, 0.1); } 
  .wrap_intro .link_site .wrap_txt { padding: 90px 40px 35px; } 
  .wrap_intro .link_site::before { transition: all 0.3s } 
  .wrap_intro .link_site:hover::after, .wrap_intro .link_site:focus::after { flex-grow: 0;flex-basis: 10%;} 
  .wrap_intro .site_main:hover::before, .wrap_intro .site_main:focus::before { background: rgba(0, 128, 67, 0.6); } 
  .wrap_intro .site_tour:hover::before, .wrap_intro .site_tour:focus::before { background: rgba(13, 56, 150, 0.6); } 
  .wrap_intro .site_dona:hover::before, .wrap_intro .site_dona:focus::before { background: rgba(247, 124, 32, 0.6); } 
  .wrap_intro .site_youth:hover::before, .wrap_intro .site_youth:focus::before { background: rgba(56, 36, 35, 0.6); } 

  .wrap_intro .link_site .wrap_txt .desc_txt { margin-bottom: 12px; font-size: 20px; line-height:26px; } 
  .wrap_intro .link_site .wrap_txt .tit_txt { font-size: 38px; line-height:46px; } 
  .wrap_intro .link_site .box_quick { height: 0; margin:0; padding:0; border-width: 0; font-size:20px; line-height:26px; opacity:0; transition: all .6s } 
  .wrap_intro .link_site:hover .box_quick,
  .wrap_intro .link_site:focus .box_quick { height: auto; margin-top:25%; padding:5px 0; border-width:1px;opacity:1 } 
  .wrap_intro .link_site .box_quick i { display:inline-block; transition: transform 0.3s ease; } 
  .wrap_intro .link_site .box_quick:hover i, .wrap_intro .link_site .box_quick:focus i { transform: translateX(5px); } 
  .footer_intro { padding: 20px 0 40px; } 
  .footer_intro .list_sns{gap: 15px}
  .footer_intro .img_sns{width: 45px;}
  .footer_intro .txt_address { font-size: 16px; line-height:26px; } 
  .footer_intro .txt_copy { font-size: 16px; line-height:26px; } 
}