@charset "utf-8";

.intro {background: url('../img/intro_bg.png') no-repeat center center;background-size: cover;width: 100%;min-height: 100vh;display: flex;justify-content: center;align-items: center;}
.intro-inner {max-width: 860px;width: 100%;padding: 0 20px;}
.intro-header {text-align: center;color: #fff;}
.intro-header .intro-logo {width: 100%;height: auto;max-height: 80px;}
.intro-header h5 {font-family: var(--gm);font-weight: 300;font-size: 40px;line-height: 1.3;margin-top: 40px;}
.intro-header p {font-family: var(--gm);font-weight: 500;font-size: 16px;line-height: 1.3;opacity: 0.5;text-transform: capitalize;margin-top: 16px;}
.intro-body {column-gap: 20px;}
.intro-body li {width: calc(50% - 10px);height: 360px;}
.intro-body li a {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;border: 1px solid #e5e5ec;border-radius: 30px;gap: 24px;}
.intro-body li a p {text-transform: capitalize;font-weight: 300;color: #ccc;letter-spacing: -0.025em;}
.intro-body li a h6 {font-family: var(--sc);font-weight: 500;font-size: 30px;line-height: 1.3;color: #fff;}
.intro-body li a .icon {background: transparent;color: #fff;width: 36px;height: 36px;border: 1px solid #fff;border-radius: 50%;line-height: 36px;transition: all .3s;}
.intro-body li a:hover .icon {background: #fff;color: var(--brand);transition: all .3s;}
@media screen and (max-width: 480px) {
    .intro-header .intro-logo {max-height: 64px;}
    .intro-header h5 {font-size: 20px;margin-top: 16px;}
    .intro-header p {font-size: 14px;margin-top: 8px;}
    .intro-body {flex-direction: column;row-gap: 8px;}
    .intro-body li {width: 100%;height: 160px;}
    .intro-body li a {gap: 16px;}
    .intro-body li a p {font-size: 14px;}
    .intro-body li a h6 {font-size: 18px;}
    .intro-body li a h6 br {display: none;}
}