@charset "UTF-8";
@import "fonts.css";

html, body {background: #F8F5EE;}

.wrap {max-width: 1420px; margin: 0 auto; padding: 0 20px; width: 100%; position: relative;}

.intro {width: 100%; height: 100%; object-fit: cover;}
.intro .wrap {width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.intro .wrap > div {width: 100%; padding: 2rem 0;}
.intro .top {display: flex; flex-direction: column; text-align: center; gap: 1.875rem;}
.intro .top h2.slogan {font-size: 2.375rem; font-family: 'Godo';}

.intro .card ul {display: flex; flex-wrap: wrap; gap: 1.25rem;}
.intro .card ul li {width: calc(50% - .625rem); border-radius: 30px; overflow: hidden; transition: .3s;}
.intro .card ul li:hover {transform: translateY(-10px); box-shadow: 0 12px 24px rgba(0,0,0,.1);}
.intro .card ul li.card01 {background: url(/images/contents/card01.jpg) center no-repeat; background-size: cover;}
.intro .card ul li.card02 {background: url(/images/contents/card02.jpg) center no-repeat; background-size: cover;}
.intro .card ul li a {width: 100%; height: 328px; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; flex-direction: column; justify-content: flex-end; gap: .625rem; padding: 1.875rem; position: relative;}
.intro .card ul li.card02 a::after {color: #212121; background: #fff;}
.intro .card ul li a::after {content: "↗"; background: #212121; width: 4.0625rem; height: 4.0625rem; border-radius: 50%; font-size: 1.75rem; font-weight: 700; text-align: center; line-height: 4.375rem; color: #fff; position: absolute; right: 1.875rem; top: 1.875rem; opacity: 0; transition: .3s;}
.intro .card ul li:hover a::after {opacity: 1;}
.intro .card ul li a span {display: block; padding: .3125rem .9375rem; font-size: 15px; line-height: 1; font-weight: 500; border: 0.0625rem solid #121212; border-radius: 3.125rem;}
.intro .card ul li a h3 {font-size: 1.8125rem;}
.intro .card ul li.card01 a > * {color: #121212; border-color: #121212;}
.intro .card ul li.card02 a > * {color: #fff; border-color: #fff;}

.intro .link ul {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;}
.intro .link ul li a {display: block; padding: 10px 15px; font-size: .9375rem; line-height: 1; background: #fff; border: 1px solid #333; border-radius: 50px; position: relative; overflow: hidden; transition: .3s;}
.intro .link ul li a::before {content: "#";}
.intro .link ul li a:hover {transform: translateY(-5px);}


@media (max-width: 768px) {
    html, body {font-size: 80%;}

    .intro .top .logo img {width: 120px;}
    .intro .top h2.slogan {font-size: 2rem;}

    .intro .card ul li {width: 100%; height: 0; padding-top: 50%; position: relative; border-radius: 10px;}
    .intro .card ul li:hover {transform: initial; box-shadow: none;}
    .intro .card ul li a {height: 100%; position: absolute; left: 0; top: 0;}
    .intro .card ul li a::after {opacity: 1; width: 3rem; height: 3rem; font-size: 1.375rem; line-height: 3.25rem;}

    .intro .link ul {flex-wrap: nowrap; justify-content: flex-start; overflow-x: scroll; padding-bottom: 1rem;}
    .intro .link ul li a {white-space: nowrap; font-size: 1rem;}
    .intro .link ul li a:hover {transform: initial;}
}