@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard.css");

@media (max-width: 480px) {

.title {
    width: 100% !important;
}

    .mention{
        max-width: unset !important;
    }

    .obj-3 {
        max-width: 40% !important;
        position: absolute !important;
        bottom: 2.5em !important;
        left: 2.5em !important;
    }

    .landing .obj-0 {
        width: 300% !important;
    }

    .landing .obj-1 {
        max-width: 40% !important;
    }

    .landing .obj-2 {
        max-width: 30% !important;
        left: 0% !important;
    }

    .landing .obj-5 {
        max-width: 90% !important;
        left: 35% !important;
    }

    .card-img-sori {
        height: 400px !important;
    }

    .mo-hidden {
        display: none !important;
    }

    .obj-4 {
        display: none !important;
    }

    .feature-img {
        width: 400px !important;
        height: 400px !important;
    }

    .feature-img .mobile {
        position: absolute;
        right: 0;
        height: 80% !important;
        bottom: 10% !important;
        border: 0.5em solid #ffffff;
    }

    .feature-img .desktop {
        position: absolute;
        left: 0;
        top: 25%;
        height: 70% !important;
        bottom: 25%;
        border: 0.5em solid #ffffff;
    }

    .right {
        transform: translate(-5% , 0) !important;
    }
    
    .left {
        transform: translate(-5% , 0) !important;
    }

}

html,
body {
    overflow-x: hidden !important;
}

.container {
    max-width: 960px;
}


h1,
h2,
h3,
h4,
h5,
h6,
a,
p {
    font-family: "Pretendard" !important;
    font-weight: 900 !important;
}

img {
    object-fit: cover !important;
}

h1 {
    font-size: 3.5em !important;
}

h2 {
    font-size: 3em !important;
}

h3 {
    font-size: 2.5em !important;
}

h4 {
    font-size: 2em !important;
}

h5 {
    font-size: 1.5em !important;
}

h6 {
    font-size: 1em !important;
}

.navbar-brand span {
    font-size: 1em;
    vertical-align: -webkit-baseline-middle;
    padding: 0em 0em 0em 0.25em;
    color: var(--primary-100);
}

.landing {
    background-image: url("/img/landing-bg.jpg");
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.loader {
 display: none;   
}

.z-1 {
    z-index: 1;
}

.title {
    width: fit-content;
    padding: 0.25em 1em;
    background: var(--white);
    color: var(--primary-100) !important;
    margin: 1em;
    border-radius: 1em 1em 0 1em;
}

.landing {
    position: relative;
  }
  
  #ai {
      position: absolute;
      top: 50%; /* 로티 애니메이션 요소의 상단을 50% 위치로 설정합니다. */
      left: 50%; /* 로티 애니메이션 요소의 좌측을 50% 위치로 설정합니다. */
      transform: translate(-50%, -50%); /* 로티 애니메이션 요소를 수평 및 수직으로 50% 이동시켜 가운데 위치로 조정합니다. */
  
  }
  
  #typing-container {
    width: 500px;
    height: 100px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: Arial;
  }
  
  #typing-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
  }
  
  #typing-container-2 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  
  .mention{
      text-align: left;
      border: solid 1px #067a6c;
      max-width: 50vw;
      padding: 2em;
      background: #067a6c80;
      border-radius: 0 3em 3em 3em;
      color: #ffffff !important;
      display: none;
  }

.landing .obj-0 {
    width: 100%;
    position: absolute;
    animation: star1 30s infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
}

@keyframes star1 {
    0% {
        width: 100%;
    }

    50% {
        width: 150%;
    }

    100% {
        width: 100%;
    }
}

.landing .obj-1 {
    max-width: 20%;
    position: absolute;
    bottom: 5%;
    right: 5%;
    animation: astronaut1 5s infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
}

@keyframes astronaut1 {
    0% {
        bottom: 10%;
        rotate: 5deg;
    }

    100% {
        bottom: 5%;
        rotate: 0deg;
    }
}

.landing .obj-2 {
    max-width: 10%;
    position: absolute;
    top: 5%;
    left: 15%;
    animation: phone1 5s infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
}

@keyframes phone1 {
    0% {
        top: 20%;
        rotate: 0deg;

    }

    100% {
        top: 15%;
        rotate: 5deg;
    }
}

.landing .obj-5 {
    max-width: 40%;
    position: absolute;
    top: 0;
    left: -10%;
    animation: laptop1 5s infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
}

@keyframes laptop1 {
    0% {
        top: -5%;
        rotate: 5deg;
    }

    100% {
        top: 0%;
        rotate: 0deg;
    }
}

.obj-3 {
    max-width: 20%;
    position: absolute !important;
    bottom: 5em;
    left: 5em;
}

.obj-4 {
    max-width: 30%;
    position: absolute !important;
    bottom: 0;
    right: 0;
}
  
.text-hash {
    font-weight: 900 !important;
    background: var(--white);
    color: var(--primary-100);
    font-size: 1em;
    margin: .3em;
}

.text-hash:hover {
    font-weight: 900 !important;
    background: var(--primary-100);
    color: var(--white);
    font-size: 1em;
    transition: 0.5s;
}

.text-sori {
    color: var(--primary-100);
}

.card-img-sori {
    border-radius: 1em;
    height: inherit;
}

.bg-sori {
    background-color: var(--primary-20) !important;
}

.bg-sori img {
max-width: 75px;
}

.bg-sori:hover {
    background-color: var(--primary-40) !important;
    transition: 1s;
}

.bg-sori .card {
    min-height: 300px;
    border: 0;
    height: inherit;
}

.bg-sori .card p {
    margin: 3em;
    padding: 3em;
    backdrop-filter: blur(5px) brightness(0.5);
    border-radius: 1em;
    font-weight: 900;
    color: var(--white);
}

.sub-title {
    text-align: center;
    margin: 0 0 2em 0;
}

.blur {
    backdrop-filter: blur(10px);
}

.feature-img {
    position: relative;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--primary-100), var(--primary-20));
    text-align: center;
}

.feature-img img {
    border-radius: 1em;
    box-shadow: rgba(53, 131, 118, 0.5) 0px 0.5em 1em !important;
    height: -webkit-fill-available;
}

.feature-img .mobile{
    position: absolute;
    right: 0;
    height: 60%;
    bottom: 30%;
    border: 0.5em solid #ffffff;
}

.feature-img .desktop{
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    bottom: 25%;
    border: 0.5em solid #ffffff;
}

.right {
    transform: translate(20% , 0);
}

.left {
    transform: translate(-20% , 0);
}

.shadow-sori {
    box-shadow: rgba(53, 131, 118, 0.2) 0px 0.25em 0.5em !important;
}

.nav-link {
    font-size: 1em;
    vertical-align: -webkit-baseline-middle;
    padding: .5em;
    color: var(--primary-100)
}

.btn-sori {
    background-color: var(--primary-100);
    color: var(--white);
    font-size: 1em;
    font-weight: 900;
    padding: 1em 1.5em;
    border-radius: 1em;
}

.btn-sori:hover {
    background-color: var(--primary-100);
    color: var(--white);
    font-size: 1em;
    font-weight: 900;
    padding: 1em 1.5em;
    border-radius: 2em;
    transition: .5s;
}

.btn-start {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 10;
}

.btn-sori i {
    font-size: 1.25em;
    vertical-align: middle;
    margin: 0.1em;
}

.text-bg-sori {
    white-space: initial;
    color: var(--primary-100) !important;
    background-color: var(--dark-10) !important;
}

.text-bg-sori .card-text {
    color: var(--primary-100) !important;
}

.card-body-sori {
    flex: 1 1 auto;
    padding: 2em !important;
    color: var(--bs-card-color);
}

.card {
    border-radius: 1em !important;
    border: 0;
}

.card-img,
.card-img-top {
    border-top-left-radius: 1em !important;
    border-top-right-radius: 1em !important;
}

.nowrap-scroll {
    flex-wrap: nowrap;
    overflow: scroll;
    column-gap: 1em;
}

.row::-webkit-scrollbar {
    display: none;
}

shadow {
    box-shadow: rgb(0 0 0 / 5%) 0px 0.25em 0.5em !important;
}

.card-footer {
    color: var(--primary-100);
    background-color: var(--white);
    border-top: 1px dashed var(--primary-100);
}

.card-footer:last-child {
    border-radius: 0 0 1em 1em;
}

.store-badge {
    max-height: 40px;
    z-index: 1;
}

/* .benefit .img-fluid {
    max-width: 75px;
    margin: -1.5em 0 1em -1em;
} */

.title-a:hover {
    color: #ffffff;
border-bottom: 2px solid #ffffff;
}

.title-a {

border-bottom: 2px solid #ffffff;
}

.feed-item-title{
margin-top: 1.5em;
font-size: 1.5em !important;
}

a[href="https://rss.bloople.net/"] {
 display: none !important;
}

.accordion {
    --bs-accordion-active-color: var(--primary-100) !important;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    font-size: 900 !important;
    color: var(--primary-100);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}

.accordion-button:not(.collapsed) {
    color: var(--primary-100);
    background-color: var(--primary-20);
}

  .accordion-body img {
    width: 50%;
  }

  .carousel-item {
    height: 40vh;
  }

  .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .carousel-caption p {
    color: white !important;
  }

  .carousel-caption {
    text-align: left;
}

.carousel-indicators {
    justify-content: left;
}