@charset "utf-8";
.paper tr{}
.paper td{text-align: center;
    vertical-align: top;
    padding-top: 180px;
    background: url(/sites/fund/images/common/newback.jpg) no-repeat;
    width: 650px;
    height: 738px;}
.paper .text{font-size: 1.2rem; line-height: 28px; margin: 20px auto 10px; width: 50%; font-family: hufs_m;}
.paper table{width: 650px; height: 738px;}
.paper .space{margin-top: 60px}


@media (max-width:800px) {
	.paper table{width: 400px; height: 738px;}
 .paper td{text-align: center;
    vertical-align: top;
    padding-top: 110px;
    background: url(/sites/fund/images/common/newback.jpg) no-repeat;
    background-size:400px 485px;
    width:400px;
    height: 738px;}
.paper .text{font-size: 1rem;margin: 15px auto 8px; width: 60%;}
.paper .space{margin-top: 10px}
.paper .space img{width:60%}
 }


/* 오시는 길 - 지도영역, ID 번호확인필요  */
#menu6940_obj10396 {overflow:hidden;}
#menu6940_obj10396 .root_daum_roughmap {width:100%;}
.guide_link {text-align:right;}
.guide_link a {display:inline-block; margin-left:0.8rem; padding:0.7rem 1.2rem 0.75rem 1.2rem; border:solid 1px #a19186; color:#423c31; font-size:1rem; font-weight:300; line-height:1.5; background:#eee8e4;}
.guide_link a:hover {background:#a19186; border:solid 1px #a19186; color:#ffffff;}




/* greeting*/
  .greet{}
  .greet_img{float:right;margin-left:40px;width:578px;  margin-right:0px;}
.ani {
    text-align: center;
    margin-top: -22px;
}
  .greet_deco{
   z-index: 2;
    top: 0px;
    position: relative;background:radial-gradient(#2061afc9 10%, transparent 80%);}
  .greet_text {
margin: 0px auto;
    display: block;
    width: 100%;
    padding-top: 30px;
    }
  .greet_text p{width:99%; text-align:justify; margin-bottom:30px;}
  .greet_text h1{font-weight:300;}
  .greet_text h1 p {
    font-family: hufs_m;
	font-size:30px;
    line-height: 1.2;
    margin-bottom: 20px;
    margin-top: -30px;
    color: #333; text-align: left;}
  .greet_text h1 p strong {
    color: #054580;
    font-family: hufs_b;}
   .greet_text h1 span {
  font-size: 5.3rem;
    color:#c3b9b952;
    font-family: noto bold;
    letter-spacing: -3px;
    line-height: 5rem;
    font-family: hufs_m;
    text-transform: uppercase;
	}

  .greet_name {
    text-align: right;
    margin-top: 30px;}
  .greet_name span {
    border-bottom: 1px solid gray;
    padding-right: 5px;
    padding-bottom: 3px;}	
  .greet_name span strong{font-family:hufs_b; font-size:22px;padding-left:10px;}



 @media (max-width:1300px) {
 
   .greet_img{width:530px;}
   .greet_text p{width:100%; }
 }
 
 @media (max-width:1024px) {
 
 .greet{width: 100%;text-align: center;}
 .greet_img{float:none;width:50%; margin-bottom:30px;}
 .greet_text{margin-right:5px}
 .greet_name {text-align: right !important;} .ani {text-align:center;margin-top: -50px;}

 }
 
@media (max-width:860px) {
   .greet{width: 100%;text-align: center;}
   .greet_img{float:none;width:75%; margin-bottom:30px;}
   .ani {text-align:center;margin-top: -80px;}
   }





@-webkit-keyframes rotate {
0%{
    -webkit-transform: rotatey(360deg);
    transform: rotatey(360deg); width:108px;;opacity:0; margin:0 auto;
  }
10%{
    -webkit-transform: rotatey(0deg);
    transform: rotatey(180deg);width:108px; margin:0 auto;
   opacity:1;
  }
15%{
-webkit-transform: rotatey(360deg);
transform: rotatey(360deg);width:108px; margin:0 auto;
opacity:.5;
}
70%{
-webkit-transform: rotatey(0deg);
transform: rotatey(0deg);width:108px; margin:0 auto;
opacity:1;
}
90%{
-webkit-transform: rotatey(360deg);
transform: rotatey(360deg);width:108px; margin:0 auto;
opacity:1;
}
100%{
-webkit-transform: rotatey(360deg);
transform: rotatey(360deg);width:108px; margin:0 auto;
opacity:.0;
}
}
.animated.infinite {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
}

.rotate {
  -webkit-animation-name: rotate;
  animation-name: rotate;
  animation-duration:5s;  animation-timing-function:ease-in-out
}

/*로그인페이지 일반회원관련사항 감춤*/
._findInfo{display: none !important;}



/*오시는 길*/
.desc{ padding-bottom:30px;}
.desc .detail {
            margin-bottom: 16px;
            overflow: hidden;
        }

        .desc .detail:last-child {
            margin-bottom: 0;
        }

        .desc .detail span {
            display: block;
            float: left;
        }

        .desc .detail span:first-child {
            max-width: 120px;
            width: 30%;
        }

        .desc .detail span:last-child {
            width: calc(100% - 120px);
        }



           
/* 장학기금 */
.gra.style1{border: 1px solid #999; margin-bottom:50px; height:402px;background: url(/sites/hufstmp01/images/common/graback.jpg) no-repeat;
background-size:cover;width: 98%;margin: 0 auto;}
.gra.style1 .gra_menu {
    position: relative;
    width: 33.333333%;
    float: left;
    height: 400px;
    text-align: center;
    display: block;
    background: linear-gradient(120deg,rgba(256,256,256,.5), rgba(256,256,256,58));
    padding: 50px 10px;
}
.gra.style1 .gra_menu h1{letter-spacing: -0.15rem; color: #043e9d;font-size: 1.5rem; line-height:2rem;height: 70px;
    font-weight: 600;}
.gra.style1 .gra_menu h1 strong{color:#3576a3;}

.gra.style1 .gra_menu span{font-size: 0.9rem;
    text-transform: uppercase;
    display: block;
    color: #000;
    width: 85%;
    margin: 0 auto;
    margin-top: 20px;}
.gra.style1 .gra_menu2 {
    position: relative;
    width: 50%;
    float: left;
    height: 225px;
    font-size: 0px;
}
.gra.style1 .gra_menu img {
    
    display: block;
    text-align: center;
    margin: 0 auto;margin-top:65px; height:50px;
}
.gra.style1 .gra_menu .content-part {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  text-align: center;
  z-index: 1;
  transition: all 0.3s ease;
  opacity: 0;
}
.gra.style1 .gra_menu .content-part .name {
  margin-bottom: 8px;
  font-size: 22px;letter-spacing: -0.15rem;
}
.gra.style1 .gra_menu .content-part .name a {
  color: #ffffff;
}
.gra.style1 .gra_menu .content-part .name a:hover {
  color: #fff;
}
.gra.style1 .gra_menu .content-part .gra_subtitle {
  color: #02e7fb;
  margin-bottom: 16px; font-size:12px; text-transform:uppercase;
  display: block;
}
.gra.style1 .gra_menu .content-part .gra_link li {
  display: inline;
  margin-right: 35px;
}

.gra.style1 .gra_menu .gra_link {
    bottom: 50px;
    position: absolute;
    left: 50%;
    margin-left: -30px;
}

.gra.style1 .gra_menu .content-part .gra_link {
	position:static;
    margin-left: 0px;
}
.gra.style1 .gra_menu .gra_link li a {
  display: inline-block;
  color: #000;font-size: 13px;
    border: 1px dotted #000;
    padding: 5px 15px 5px 15px;
}
.gra.style1 .gra_menu .content-part .gra_link li a {
  display: inline-block;
  color: #ffffff;font-size: 13px;
    border: 1px solid #fff;
    padding: 5px 15px 5px 15px;
}
.gra.style1 .gra_menu .content-part .gra_link li a:hover { background-color:rgba(0,0,0,.5);
}
.gra.style1 .gra_menu .content-part .gra_link li:last-child {
  margin: 0;
}
.gra.style1 .gra_menu:after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, 100%) scale(0.1);
  background: #21a7d0;
  opacity: 0;
  border-radius: 3px;
  transition: all 0.3s ease;
}


.gra.style1 .gra_menu:hover .content-part {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.gra.style1 .gra_menu:hover:after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}


.gra.style1.orange-color .gra_menu::after {
    background:#002d77;
}

.gra.style1 .gra_menu .content-part .name {
    margin-bottom: 8px;
    font-size: 1.5rem; margin-top:-50px; line-height:2rem;
}
 
.gra.style1 .gra_menu .content-part {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    text-align: center;
    z-index: 1;
    transition: all 0.3s ease;
    opacity: 0;
}


.rs-degree.style1 .degree-wrap .content-part,
.gra.style1 .gra_menu:after {
    width: calc(100% - 60px);
    height: calc(100% - 60px);
}
.gra.style1 .gra_menu .content-part {
    width: calc(100% - 60px);
}
            ::selection {
  background: #21a7d0;
  text-shadow: none;
  color: #ffffff;
}
 .gra.style1 .gra_menu img{}
            img, svg {
    vertical-align: middle;
}
*, ::after, ::before {
    box-sizing: border-box;
}

@media all and (max-width:1024px) {
	.gra.style1 {height:902px;}
.gra.style1 .gra_menu{width: 100%;height: 300px;border-bottom: 1px solid #999;}
.gra.style1 .gra_menu h1 {height: 30px;}
}

#menu6945_obj3893{background: url(/sites/fund/images/common/obama.jpg) no-repeat;
background-size: cover;}



/*후보소개박스1 */
.wrap-contents .prof-box {background:url('../../images/common/pattern-menu-box.png') left top; padding:10px 10px 10px 10px; margin-top:-30px;}
.wrap-contents .prof-box .inner {background:#fff; padding:15px 35px;}
.wrap-contents .prof-box .inner dl { margin-left:30%; }
.wrap-contents .prof-box .inner dt { font-size:20px; font-weight:600; font-family:hufs_l; border-bottom:1px solid gray; line-height:30px; padding:5px; margin-top:20px; color:#8d7150; }
.wrap-contents .prof-box .inner h2{color:#152c46 !important; line-height:40px;font-size:20px; font-weight:600;}
.wrap-contents .prof-box .inner .objImg {width: 30%; text-align:center;height:500px; overflow:inherit; }
.wrap-contents .prof-box .inner .editorImg{border:1px solid #e9e9e9; width:200px; height:230px; margin-top:20px;}
.wrap-contents .prof-box .inner .objImg a{ color:#fff;background:#8d7150 url('../../images/common/back1.png') no-repeat;padding:15px 0; margin-top:0px; display:inline-block; width:200px; font-weight:600;font-size:20px; background-position:  center 10px; }
.wrap-contents .prof-box .inner .objImg a:hover{background-color:#002d56;}
.wrap-contents .prof-box .inner .objImg a span{font-family:hufs_l;}
.wrap-contents .prof-box .inner .objImg .movie a{ color:#fff;background:#444 url('../../images/common/back1.png') no-repeat;padding:15px 0; margin-top:0px; display:inline-block; width:200px; font-weight:600;font-size:20px;background-position:  center -62px; }
.wrap-contents .prof-box .inner .objImg .movie a:hover{background-color:#111; color:#fff;}



/*.view-img{ display:none}
.view-detail{ display:none !important;}
.view-util{ display:none;}
.view-file{ display:none;}
.board-search{ display:none!important;}
.writer{ display:none!important;}
.date, .count, .new{display:none!important;}
.view-more{ display:none!important;}
.board-album .info dt{ display:inline-block;}
.title strong{font-size:20px !important;font-family:hufs_m !important;color:#002d56 !important;}
.etc dd{background-image:none!important; font-size:16px !important;color:#8d7150 !important;  }*/

@media all and (max-width:1024px) {
	
.wrap-contents .prof-box .inner .objImg {}
.wrap-contents .prof-box .inner h2{ display:inline-block !important; width:50%; border:1px solid red;}
.wrap-contents .prof-box .inner .editorImg{border:0px solid #e9e9e9; width:150px; height:170px; margin-top:0px;display:inline-block;border:0px solid green; float:left;}	
.wrap-contents .prof-box .inner .objImg {border:0px solid gold;width:300px;height:190px;margin-left:30%; padding-top:25px; }


.wrap-contents .prof-box .inner .objImg a {
    border: 0px solid red; background-position:  center 19px;
    width: 150px;
    height: 84px;
}

.wrap-contents .prof-box .inner .objImg a span {
    display: block;
    width: 100%;
    margin-top: 8px;
    line-height: 12px;
}

.wrap-contents .prof-box .inner .objImg .movie {
    margin-top: 0px;
    margin-left: 0px;
    float: right;
}

.wrap-contents .prof-box .inner .objImg .movie a{border:0px solid red;width:150px; height:86px; background-position:  center -62px;}
.wrap-contents .prof-box .inner .objImg .movie a span{ display:block; width:100%; margin-top:20px;color:#fff;}

.wrap-contents .prof-box .inner dl {padding:0px 10px 0px 10px; margin:10px; }
.wrap-contents .prof-box .inner dt { font-size:20px; font-weight:600; font-family:hufs_l; border-bottom:1px solid gray; line-height:20px; padding:5px; color:#8d7150; }
.wrap-contents .prof-box .inner .objTxt{margin-top:220px;}
	.wrap-contents .prof-box .inner {padding:1px;}
}

@media all and (max-width:768px) {

.wrap-contents .prof-box .inner .objImg {margin-left:20%; }
}

@media all and (max-width:520px) {
	.wrap-contents .prof-box .inner {padding:1px;}
.wrap-contents .prof-box .inner .objImg {margin-left:10%;}
}
@media all and (max-width:400px) {
.wrap-contents .prof-box .inner {padding:1px;}
.wrap-contents .prof-box .inner .objImg {margin-left:10%}
}

._findInfo { display:none!important;}




.orga .title{font-family:"hufs_m";color: #FFF; text-align:center; font-size:20px; padding:10px;}
.orga .title2{font-family:'Noto bold';color: #222; text-align:center;}
.orga .title span{display:inline-block; }

@media all and (max-width:768px) {
.orga .title{font-size:18px; line-height:20px;}
.orga .title span{display:block; }
}





.list01 { display: flex; flex-wrap: wrap; width: 100%;}
.list01 .wide{;width: 70%;}
.list01 li { margin: 0 10px;width: 29.888%;background: url(/sites/gra/images/common/bullet_dot.png) no-repeat left center;text-align: left; padding-left: 11px;}
.list01 li a { text-decoration:none; color: #0b419b;  line-height: 2rem; }
.list01 li a:hover {color: #22cddc;  font-weight:500}
.list01 li:hover {background: url(/sites/gra/images/common/bullet_dot_on.png) no-repeat left center;} 

@media all and (max-width:1024px) {
  .list01 li { width: 45%;}
  .list01 .wide{;width: 95%;}
}

@media all and (max-width:768px) {
  .list01 li { width: 95%;}
  .list01 .wide{;width: 95%;}
  
}


.con-table .rank th, .con-table .rank td{padding:0px !important;}
@media all and (max-width:860px) {
	.wrap-contents .con-table .rank {
    width: 99% !important;}
}


/*image-hover*/
.img-hover {
  position: relative;
}

.campus-image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(0,0,0,0.5);
  overflow: hidden;
  width: 100%;
  height: 20%;
  transition: .5s ease;
}

.img-hover:hover .overlay {
  height: 50%;
}

.hover-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width:120%;
}


.img-hover:hover .hover-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width:80%;
}

/*star*/
.night {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateZ(45deg);
}

.shooting_star {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px #699bff);
  animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}
.shooting_star::before {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  animation: shining 3000ms ease-in-out infinite;
}
.shooting_star::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  animation: shining 3000ms ease-in-out infinite;
  transform: translateX(50%) rotateZ(-45deg);
}
.shooting_star:nth-child(1) {
  top: calc(50% - 142px);
  left: calc(50% - 172px);
  animation-delay: 7164ms;
}
.shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after {
  animation-delay: 7164ms;
}
.shooting_star:nth-child(2) {
  top: calc(50% - -74px);
  left: calc(50% - 89px);
  animation-delay: 1145ms;
}
.shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after {
  animation-delay: 1145ms;
}
.shooting_star:nth-child(3) {
  top: calc(50% - 143px);
  left: calc(50% - 202px);
  animation-delay: 4485ms;
}
.shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after {
  animation-delay: 4485ms;
}
.shooting_star:nth-child(4) {
  top: calc(50% - -119px);
  left: calc(50% - 191px);
  animation-delay: 8695ms;
}
.shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after {
  animation-delay: 8695ms;
}
.shooting_star:nth-child(5) {
  top: calc(50% - 109px);
  left: calc(50% - 12px);
  animation-delay: 7812ms;
}
.shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after {
  animation-delay: 7812ms;
}
.shooting_star:nth-child(6) {
  top: calc(50% - -46px);
  left: calc(50% - 178px);
  animation-delay: 4877ms;
}
.shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after {
  animation-delay: 4877ms;
}
.shooting_star:nth-child(7) {
  top: calc(50% - 1px);
  left: calc(50% - 251px);
  animation-delay: 3227ms;
}
.shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after {
  animation-delay: 3227ms;
}
.shooting_star:nth-child(8) {
  top: calc(50% - -103px);
  left: calc(50% - 234px);
  animation-delay: 4383ms;
}
.shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after {
  animation-delay: 4383ms;
}
.shooting_star:nth-child(9) {
  top: calc(50% - 130px);
  left: calc(50% - 203px);
  animation-delay: 8833ms;
}
.shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after {
  animation-delay: 8833ms;
}
.shooting_star:nth-child(10) {
  top: calc(50% - -26px);
  left: calc(50% - 152px);
  animation-delay: 976ms;
}
.shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after {
  animation-delay: 976ms;
}
.shooting_star:nth-child(11) {
  top: calc(50% - 72px);
  left: calc(50% - 38px);
  animation-delay: 2540ms;
}
.shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after {
  animation-delay: 2540ms;
}
.shooting_star:nth-child(12) {
  top: calc(50% - -190px);
  left: calc(50% - 233px);
  animation-delay: 2537ms;
}
.shooting_star:nth-child(12)::before, .shooting_star:nth-child(12)::after {
  animation-delay: 2537ms;
}
.shooting_star:nth-child(13) {
  top: calc(50% - -181px);
  left: calc(50% - 272px);
  animation-delay: 36ms;
}
.shooting_star:nth-child(13)::before, .shooting_star:nth-child(13)::after {
  animation-delay: 36ms;
}
.shooting_star:nth-child(14) {
  top: calc(50% - 198px);
  left: calc(50% - 164px);
  animation-delay: 7762ms;
}
.shooting_star:nth-child(14)::before, .shooting_star:nth-child(14)::after {
  animation-delay: 7762ms;
}
.shooting_star:nth-child(15) {
  top: calc(50% - -184px);
  left: calc(50% - 268px);
  animation-delay: 1142ms;
}
.shooting_star:nth-child(15)::before, .shooting_star:nth-child(15)::after {
  animation-delay: 1142ms;
}
.shooting_star:nth-child(16) {
  top: calc(50% - 39px);
  left: calc(50% - 185px);
  animation-delay: 2919ms;
}
.shooting_star:nth-child(16)::before, .shooting_star:nth-child(16)::after {
  animation-delay: 2919ms;
}
.shooting_star:nth-child(17) {
  top: calc(50% - -192px);
  left: calc(50% - 9px);
  animation-delay: 3068ms;
}
.shooting_star:nth-child(17)::before, .shooting_star:nth-child(17)::after {
  animation-delay: 3068ms;
}
.shooting_star:nth-child(18) {
  top: calc(50% - 117px);
  left: calc(50% - 169px);
  animation-delay: 6985ms;
}
.shooting_star:nth-child(18)::before, .shooting_star:nth-child(18)::after {
  animation-delay: 6985ms;
}
.shooting_star:nth-child(19) {
  top: calc(50% - -154px);
  left: calc(50% - 99px);
  animation-delay: 1780ms;
}
.shooting_star:nth-child(19)::before, .shooting_star:nth-child(19)::after {
  animation-delay: 1780ms;
}
.shooting_star:nth-child(20) {
  top: calc(50% - -163px);
  left: calc(50% - 247px);
  animation-delay: 352ms;
}
.shooting_star:nth-child(20)::before, .shooting_star:nth-child(20)::after {
  animation-delay: 352ms;
}

@keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}
@keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@keyframes shooting {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(300px);
  }
}
@keyframes sky {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

.shootingstar_text{
color:#fff;
position:absolute;
margin-top:-60%;
margin-left:40px;}

/**card-text**/
.card-img{
    background-image : url('/sites/fund/images/temp_1665537321984100.jpg');
	height:180px;
}
.card-text {
  text-align: center;
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
  position:absolute;
  margin-top:5.5%;
  width:100%;
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}

.card-text span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
    padding: 0 25px;
}

.card-text span:nth-child(1) {
  animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.card-text span:nth-child(2) {
  animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.card-text span:nth-child(3) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.card-text span:nth-child(4) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.card-text span:nth-child(5) {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/*infographic*/

.infographic-wrapper{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  gap: 5px;

}
.infographic-items{
  --color-main: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.infographic-items h1,
.infographic-items h2{
  text-transform: uppercase;
}
.infographic-items h1{
  color:var(--color-accent);
  background: var(--color-main);
  display: block;
  width:100%;
  text-align: center;
  font-weight: 900;
  
}
.infographic-items h2{
  background: var(--color-accent);
  display: block;
  width:100%;
  text-align: center;
  font-size:18px;
  padding-top: 30px;
}
.infographic-items p{
  background: var(--color-accent);
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  padding:20px;
  height:300px;
}

.clip-wrapper{
  width: 100%; 
  height: 100px;
  position: relative;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, var(--color-main) 0%, var(--color-main) 50%, var(--color-accent) 50%, var(--color-accent) 100%);
 
}
.clip-1,
.clip-2,
.content{
  position: absolute; 
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.clip-1{
  height: 100%;
  aspect-ratio: 1;
  background: var(--color-main);
  z-index: 1;
}
.clip-2{
  --border: 20px;
  aspect-ratio: 1;
  height: calc(100% - var(--border));
  background: var(--color-accent);
  z-index: 2;

  
}
.content{
  width: 100%; 
  height: 100%;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content i{
  font-size: 26px;
}

.infographic-items:nth-child(1)
{
  --color-accent: #8a7351;
}
.infographic-items:nth-child(2)
{
  --color-accent: #002c55;
}
.infographic-items:nth-child(3)
{
  --color-accent: #8a7351;
}
.infographic-items:nth-child(4)
{
  --color-accent: #002c55;
}

/**card**/
.cardt-main {
  padding-top: 2rem;
  padding-bottom: 6rem;
  flex-grow: 1;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 1.5rem;
  row-gap: 1.5rem;
}
@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background-color: var(--c-background-primary);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-header {
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header {
  align-items: center;
}

.card-header h1 {
  margin-left: 0.75rem;
  font-weight: 500;
}
.card-header p {
  margin-left: 0.75rem;
  font-size: 0.875rem;
  margin-top:10px;
  position:absolute;
}

.card-header img {
  width: auto;
  height: auto;
  display: inline-flex;
  float:right;
}

.card-header span {
border:none;
color:#3c86c8;
background-color: #e1ebfb;
font-size:12px;
padding: 8px 10px;
border-radius:6px;
font-weight:500;
margin-top:15px;
}

/*hero img*/
.hero-text {
  text-align: center;
  position: absolute;
  top: 20%;
  width:100%;
  color: white;
}

.hero-text  p{font-size: 0.9rem;
  padding: 0 20px;}
.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/sites/fund/images/heroimg.jpg"); 
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
@media all and (max-width:768px) {
.hero-text  h1{font-size: 1.3rem;line-height: 1.3rem;}
.hero-text p {font-size: 0.8rem;}
}

 /*donation*/
.donation-wrapper{ 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 5px;
}
.donation-items{ 
  position : relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  padding:0 12px 70px 12px;
}
.donation-icon{
width:100px;
height:100px;
margin-bottom:20px;
}
.d_icon01{
background:url('../../images/main/icon_donation02.png') no-repeat center center;  background-size:70px auto;
}
.d_icon02{
background:url('../../images/main/icon_donation03.png') no-repeat center center;  background-size:70px auto; 
}
.d_icon03{
background:url('../../images/main/icon_donation01.png') no-repeat center center;  background-size:70px auto; 
}
.donation_bg01{background:linear-gradient(185deg, #002d56, #0d4170e6);}
.donation_bg02{ background:linear-gradient(1deg, #006699, #0d4170e6);}
.donation_bg03{ background:linear-gradient(1deg, #93826f, #917452)}
.donation-items h2{  width:100%; text-align: center; font-size:20px;  padding: 30px 0 10px 0;}
.donation-items h2 span{font-size:1rem;}
.donation-items strong{color:#48baf1}
.donation-items i{ background: #ffffff2e; padding: 0 8px;border-radius: 15px;}
.donation-items p{
   text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  padding-bottom: 20px;
}
div.btn_bottom{
	position : absolute;
	bottom : 0;
    width: 100%;
	height:70px;
}
div.btn_bottom a{
	text-align:center;
	display:block;
	box-sizing:border-box;
	line-height:20px;
	font-size:16px;
	font-weight:300;
	color:#fff;
	padding:25px 0;
	background:rgba(256,256,256,.2)
}
div.btn_bottom a:hover{
 text-align: center;
    display: block;
    color: #f2f3f5;
    background: rgb(26 27 28 / 52%);
}
div.btn_bottom a.link50{
 width:49.8%;
 float:left;
}

@media all and (max-width:768px) {
	.donation-wrapper{ grid-template-columns: auto;}	
  .card-text span {font-size: 0.9rem;}
}