@charset "utf-8";
/* 네비 버튼 */
.blog-carousel { box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; }
.blog-carousel .owl-dots { display: none; }
.blog-carousel-card { width:100%; height: 405px; overflow: hidden; box-shadow: 0px 3px 12px 0px rgb(0 0 0 / 20%); text-align: center; transition:all 0.4s; background-size: 100%; }
.blog-carousel-card a { color:#fff; text-decoration:none; transition:all 0.2s }
.blog-carousel-card .date-time { position: absolute; color: #fff; width: 60px; text-align: center; margin-top: 15px; left: 15px; padding: 0.5em 0; border-radius: 4px; background-image: linear-gradient(to right, #68e4bc 0%, #4ad0d1 99%); box-shadow: rgb(38 57 77) 0px 20px 30px -10px; z-index: 99; }
.blog-carousel-card .date-time .date { font-weight: bolder; }
.blog-carousel-card .date-time .month { font-size: 0.7rem; }
.blog-carousel-card .color-overlay { background: rgba(64, 84, 94,0.5); width: 100%; height: 405px; position: absolute; z-index: 10; top: 0; left: 0; transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1); }
.blog-carousel-card .gradient-overlay { background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 80%); width: 100%; height: 405px; top: 150px; left: 0; z-index: 15; }
.blog-carousel-card:hover { box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75); }
.blog-carousel-card:hover .color-overlay { background: rgba(64, 64, 70,0.8); }
.blog-carousel-card:hover .title-content { margin-top:100px }
.title-content { text-align: center; margin: 170px 0 0 0; position: absolute; z-index: 20; width: 100%; top: 0; left: 0; transition:all 0.6s }
.blog-carousel-card h3,h1 { font-size: 1.9em; font-weight: 400; letter-spacing: 1px; font-family: 'Abril Fatface', serif; margin-bottom: 0; display:inline-block; }
.blog-carousel-card:hover h3:after { animation: changeLetter 0.3s 1 linear; width:80% }
.blog-carousel-card h3 a { font-weight: 600; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); transition:all 0.2s }
.blog-carousel-card h3 a:hover { text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.95); }
h3:after { content: " "; display: block; width: 10%; height: 2px; margin: 20px auto; border: 0; background: #4ad0d1; transition:all 0.2s }
@keyframes changeLetter {
0% { width: 10%; } 100% { width: 80%; }
}
.blog-carousel-card .title-content .intro { width: 170px; margin: 0 auto; color: #ddd; line-height: 18px; }
.blog-carousel-card .title-content .intro a { color: #ddd }
.blog-carousel-card .title-content .intro a:hover { text-decoration:underline }
.blog-carousel-card .card-info { box-sizing: border-box; padding: 0; width: 100%; position: absolute; bottom: -10px; left: 0; margin: 0 auto; padding: 0 50px; font-size: 16px; line-height: 24px; z-index: 20; opacity: 0; transition: bottom 0.64s, opacity 0.63s cubic-bezier(0.33, 0.66, 0.66, 1); }
.blog-carousel-card:hover .card-info { opacity: 1; bottom: 70px; }
.blog-carousel-card .card-info a { display:block; width:110px; margin:15px auto; background:#fff; color:#444; padding:6px 10px; border-radius:3px; font-size:0.8em; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; transition: all 0.3s ease-in-out; }
.blog-carousel-card .card-info a:hover { background: #4ad0d1; color:#fff; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; }
.blog-carousel-card .card-info a:hover span { filter: brightness(10); opacity:1 }
.blog-carousel-card .card-info .card-info-content { color:#eee; }
.utility-info { position: absolute; bottom: 0px; left: 0; z-index: 20; width:100%; text-align:left }
.utility-info a:hover { text-decoration:underline }
.utility-list { list-style-type: none; margin: 0 0 10px 20px; padding: 0; width: 100%; }
.utility-list li { color: #fff; margin: 0 5px 0 0; padding: 3px 0 15px 0px; display: inline-block; font-size:0.8em }
.utility-list li i { color: #4ad0d1; }
.licon { position:relative; width:23px; height:15px; display:inline-block; vertical-align:middle; }
@media (max-width:767px)
{
.utility-info { text-align:left; margin-left: 15px; }
.utility-info ul { width:100%; margin:0; box-sizing:border-box }
.utility-info li { display:inline-block; box-sizing:border-box; margin:0 }
}
@media (max-width:576px){
.card-info { display:none }
.blog-carousel-card .date-time { position: absolute; color: #fff; width: 60px; text-align: center; left: 15px; padding: 0.5em 0; border-radius: 4px; background-image: linear-gradient(to right, #68e4bc 0%, #4ad0d1 99%); box-shadow: rgb(38 57 77) 0px 20px 30px -10px; z-index: 99; }
.blog-carousel-card:hover .title-content,.title-content { margin-top:100px }
.blog-carousel-card { height:300px }
.blog-carousel-card h3 { font-size:1.3em }
.intro { font-size:0.8em }
}
button.Stripe { align-items: center; background: rgba(1, 1, 1, 0.2); border: none; border-radius: 6px; color: white; cursor: pointer; display: flex; font-size: small; margin-left: auto; margin-right: auto; margin-top: 10px; padding: 10px 20px; }
button.Stripe svg { fill: white; }
button.Stripe svg.Arrow-Hover { display: none; }
button.Stripe:hover { background: rgba(1, 1, 1, 0.3); transition: .4s ease-in-out; }
button.Stripe:hover svg.Arrow { display: none; }
button.Stripe:hover svg.Arrow-Hover { animation: move .2s ease-in-out forwards; display: block; }
@keyframes move {
0% { transform: translateX(0px); }
100% { transform: translateX(2px); }
}