@charset "utf-8";

/* Navbar */

#navbar {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: transparent;
    transition: all var(--animation-duration) ease-in-out;
    transition: all 300ms ease-in-out;
    z-index: 10;
}

#navbar.navbar--dark {
    background: linear-gradient( 90.04deg, #223577 54.87%, #6eb8dc 130.65%, #77b4d1 130.65%);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    padding: 8px;
}

.navbar__logo {
    height: 100%;
    vertical-align: center;
    color: white;
    margin-left: 10px;
}

.navbar__logo img {
    max-width: 200px;
}

.navbar__menu {
    display: flex;
    margin: 0;
}

.navbar__menu__item {
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid transparent;
    color: var(--color-white);
    cursor: pointer;
    border-radius: var(--size-border-radius);
}

.navbar__menu__item.active {
    border: 1px solid var(--color-white);
}

.navbar__menu__item:hover {
    border-color: var(--color-white);
    background-color: var(--color-yellow);
    color: var(--color-dark-grey);
}

.navbar__toggle-btn {
    position: absolute;
    top: 52px;
    right: 32px;
    font-size: 24px;
    color: var(--color-white);
    display: none;
}


/* home */

#home {
    background: url("../../assets/img/bg_home2.jpg") center/cover no-repeat;
    padding: 40px;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
}

.home__container {
    width: 100%;
    height: 66%;
    display: flex;
    flex-direction: column;
    text-align: left;
}

#home h3 {
    color: var(--color-white);
    line-height: 120%;
}

.home__description,
.home__title {
    color: var(--color-white);
}

.home_talk1 {
    margin-left: -250px;
    opacity: 0;
    animation: show 1s ease-out forwards;
}

.home_talk2 {
    margin-left: -650px;
    opacity: 0;
    animation: show 1s 500ms ease-out forwards;
}

.home__title {
    font-size: var(--font-title);
    font-weight: 700;
    font-family: "Noto Sans KR", sans-serif;
    margin-top: -1rem;
}

.home_talk1 h4 {
    font-weight: 200;
    font-size: 22px;
}

.home__description {
    font-weight: 500;
    font-size: 40px;
}

.home_talk2 h5 {
    font-weight: 300;
    font-size: 24px;
    color: var(--color-white);
    margin-bottom: 2rem;
}

@keyframes show {
    0% {
        margin-left: -300px;
        opacity: 0;
    }
    100% {
        margin-left: 0;
        opacity: 1;
    }
}

.home__contact,
.service__contact,
.download__links a {
    border-color: var(--color-white) !important;
    color: var(--color-white) !important;
}

.home__contact.btn {
    background-color: rgba(0, 0, 0, 0.35);
}

.home__contact.btn:hover {
    border-color: var(--color-green) !important;
}

.service__contact.btn {
    background-color: rgba(243, 71, 41, 0.863);
    width: 300px;
}

.service__contact.btn:hover {
    border-color: rgba(29, 141, 247, 0.699) !important;
}

#scroll-down {
    position: absolute;
    bottom: -66px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#scroll-down h2 {
    color: #fff;
    font-weight: var(--weight-extra-light);
    font-size: 1.2rem;
    font-family: "comfortaa", cursive;
}

.scrollBox {
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    border: 1px solid #fff;
    height: 55px;
    width: 25px;
    position: relative;
}

.round {
    position: absolute;
    background-color: #fff;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    animation: move 1.5s linear infinite;
}

@keyframes move {
    0% {
        transform: translate(-50%, 5px);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, 26px);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, 36px);
        opacity: 0;
    }
}

.stick {
    width: 1px;
    height: 2.5rem;
    background: #fff;
}


/* about */

#about {
    background-color: #ffffff;
    margin: auto;
    padding: 8vmax 0 0 0;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.about__article1 {
    margin: 0 5vmax;
}

.about__article1 .section_subtitle {
    font-size: 3.4vmin;
    color: var(--color-dark-grey);
    margin-top: 30px;
}

.about_why {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 2rem 5vmin;
    max-width: 1200px;
    margin: auto;
}

.about_why li p {
    color: var(--color-dark-grey);
    font-size: var(--font-small);
}

.about_why li {
    width: 30%;
    opacity: 0;
    margin: auto;
}

.about_why li:hover {
    overflow: hidden;
    transform: translateY(-10px);
}

.about_why li:hover img {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.6);
}

.about_why li img {
    width: 100%;
}


/* Scroll Animation */

.sa {
    opacity: 0;
    transition: all 500ms ease;
    transform: translate(0, 100px);
}

.sa.show {
    opacity: 1;
    transform: none;
}

.line {
    display: inline-block;
    width: 5rem;
    height: 1px;
    background-color: #f6f6f6;
    margin: 1rem;
}

.lineB {
    display: inline-block;
    width: 5rem;
    height: 1px;
    background-color: #333;
    margin: 1rem;
}

.about__article2 {
    background: url(../../assets/img/bg_home3.jpg) center/cover no-repeat;
    padding: 1vmax;
    margin: 120px auto;
}

.about__article2 .section_subtitle {
    font-size: var(--font-large);
    color: #f6f6f6;
    font-weight: var(--weight-extra-bold);
}

.about__article2 p {
    font-size: var(--font-small);
    color: #f6f6f6;
    font-weight: var(--weight-regular);
}

.about__article3 {
    padding: 0 5vmax;
}

.about__article3 h2 {
    font-size: 7.8vmin;
    font-weight: var(--weight-bold);
}

.about__article3 small {
    font-size: var(--font-medium);
}

.about__txt {
    font-size: var(--font-small);
    font-weight: var(--weight-extra-light);
    margin: 2rem auto;
    color: #4b4b4b;
}

.about__txt p {
    margin: 1rem;
}

.anikit {
    justify-content: center;
    margin: 4vmax 0 0;
}

.kit {
    flex: 2;
    max-width: 87.3%;
}

.app {
    flex: 1;
    max-width: 40.3%;
}


/* work section */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 1rem;
    padding: 0.6rem 2.5rem;
    width: fit-content;
    border-radius: 5rem;
    border-top-left-radius: 0;
    border: 3px solid var(--color-green);
    cursor: pointer;
    background: none;
    color: var(--color-green);
    font-size: var(--font-regular);
    overflow: hidden;
    z-index: 0;
    position: relative;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--color-blue);
    z-index: -1;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    -webkit-clip-path: circle(0% at 0% 5%);
    clip-path: circle(0% at 0% 5%);
}

.btn:hover::before {
    -webkit-clip-path: circle(100%);
    clip-path: circle(100%);
}

.btn.active:hover::before {
    -webkit-clip-path: circle(100%);
    clip-path: circle(100%);
}

.btn.active:hover {
    color: var(--color-white) !important;
}

.btn:hover {
    color: var(--color-white) !important;
}

@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
        opacity: 0;
    }
}

#app {
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
}

.slide-title {
    font-size: 4vw;
    color: #9ed7cc;
    font-weight: var(--weight-semi-bold);
    font-weight: var(--weight-extra-bold);
    margin-top: -4rem;
}

.flex.slide {
    max-width: 900px;
}

.swiper-button-next::after,
.swiper-button-prev::after,
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-green) !important;
    font-size: calc(var(--swiper-navigation-size) - 3.3vw) !important;
    text-align: center;
}

.swiper-pagination-bullet-active {
    width: 25px !important;
    border-radius: 10px !important;
}

.swiper-button-next {
    right: -1px !important;
}

.swiper-button-prev {
    left: -1px !important;
}

.showcase {
    max-width: 60%;
    margin: auto;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: -3px !important;
}

.slide__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 1rem auto;
}

.content_title {
    font-size: 24px;
    font-weight: ver(--weight-semi-bold);
}

.content_desc {
    font-size: 14px;
    font-weight: var(--weight-regular);
    color: #444;
}

.mockup-img-wrap {
    position: relative;
    width: 350px;
    left: 0px;
    height: fit-content;
    margin-bottom: 2vmax;
}

.pc-img {
    width: 250px;
    position: inherit;
    z-index: 1;
}

.mockup-img-wrap>.screen {
    position: absolute;
    background-size: 100%;
    width: 64%;
    height: 95%;
    top: 2.3%;
    left: 18%;
    border-radius: 25px;
    box-shadow: inset 3px 2px 5px 0px rgba(0, 0, 0, 00.14em);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* border: 1px solid black; */
}

.mockup-img-wrap>.screen.health {
    /* background-image: url("/assets/img/projects/test.webp"); */
    background-image: url("../../assets/img/test.png");
}

.mockup-img-wrap>.screen.community {
    /* background-image: url("/assets/img/projects/community.webp"); */
    background-image: url("../../assets/img/post.png");
}

.mockup-img-wrap>.screen.messages {
    /* background-image: url("/assets/img/projects/message.webp"); */
    background-image: url("../../assets/img/message.png");
}

.mockup-img-wrap>.screen.shop {
    /* background-image: url("/assets/img/projects/shop.gif"); */
}


/* params section */

#prd {
    background-color: #fff;
    text-align: center;
}

.params {
    display: flex;
    justify-content: space-around;
    align-items: center;
    clear: both;
    margin-bottom: 10rem;
}

.params__txt h2 {
    margin-top: 0.5rem;
    font-size: 26px;
}

.params__txt p {
    margin: 2rem 1rem;
    font-size: var(--font-small);
}

.params img {
    width: 40%;
}

.params__txt {
    width: 45%;
}

.params__list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 2rem 1rem;
}

.params__list li {
    list-style: decimal;
    list-style-position: inside;
    border-radius: 3px;
    margin: 5px;
    font-size: var(--font-small);
}


/* certificate */

#certificate {
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 3vmax 5vmax;
    background: url(../../assets/img/camera_scan.jpg) center/cover no-repeat fixed;
}

#certificate .flex {
    flex-direction: column;
}

#certificate h2 {
    color: var(--color-orange);
    font-size: var(--font-large);
}

#certificate .lists li {
    font-size: var(--font-regular);
    width: 180px;
    height: 180px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-align: center;
    margin: 1rem;
    background-color: rgba(235, 235, 235, 0.781);
    cursor: default;
    transition: all .2s;
}

#certificate .lists li:hover {
    transform: scale(1.1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
    background-color: rgba(255, 255, 255, 0.86);
    font-weight: var(--weight-bold);
}


/* guides */

#guides {
    background-color: #ffffff;
    margin: 0 auto;
}

.usage__box {
    margin: 0 auto;
    max-width: 800px;
}

.usage__box img {
    width: 100%;
}


/* download app */

.download__wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    padding: 60px 0;
    /*
    background: var(--color-green);
    */
    background-color: #223577;
}

.download__wrap>.flex {
    flex-direction: column;
    width: 80%;
    justify-content: center;
}

.download___rights,
.download___title,
.download__links a {
    color: var(--color-white);
    text-align: center;
}

.download___rights {
    font-size: 1.4rem;
    margin: 1vmin 0;
}

.download___title {
    margin: 3vmin 0 0;
    font-size: var(--font-large);
}

.download__links.flex {
    flex-direction: row;
    margin: 1.5vmin 0;
    width: 100%;
    justify-content: center;
}

.download__links a {
    background-color: rgba(94, 94, 94, 0.15);
    color: var(--color-white) !important;
    margin: 1rem;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
}

.download__links a i {
    transition: all var(--animation-duration) ease;
    margin-right: 5px;
}

.download__links a:hover i {
    color: var(--color-white);
}

.download__links a:hover {
    color: #fff !important;
}


/* footer */

footer {
    font-size: 15px;
    background-color: #222;
    padding: 3.5vmax;
}

.company__address {
    color: #818181;
    font-size: 13px;
    font-weight: var(--weight-regular);
}

.company__name {
    display: inline-block;
    color: var(--color-white);
    font-size: 20px;
    font-weight: var(--weight-semi-bold);
    margin-right: 10px;
}

.company__go {
    color: #fff;
    font-weight: var(--weight-extra-light);
    font-size: var(--font-regular);
}

.company__cs {
    margin-top: 20px;
    font-size: 14px;
    color: #818181;
    font-weight: var(--weight-regular);
}

.company__cs small {
    color: var(--color-white);
    font-size: var(--font-small);
}

.company__cs p {
    display: inline-block;
    margin: 0px 8px 8px 0;
    font-weight: 400;
    color: #818181;
    font-size: var(--font-small);
}

.company__cs p span {
    font-weight: bold;
}

.company__cs div {
    margin: 10px 0;
}

.company__cs div a {
    display: inline-block;
    font-size: var(--font-regular);
    color: var(--color-dark-white);
    padding-left: 5px;
}

footer hr {
    margin: 10px 0;
    border-color: var(--color-dark-grey);
}

.footer__sns {
    width: 100%;
    margin: 2vmin auto;
}

.footer__sns li {
    margin-right: 10px;
}

.footer__sns span,
.company__cs span {
    display: inline-block;
    margin-left: 6px;
}

.contact___rights {
    color: #555;
}


/* 검사항목 설명 팝업 */

body.hidden {
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    touch-action: none;
}

.params-pop-container {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.6);
    transition: all .3s;
}

.params-pop-container.show {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.params-pop {
    position: absolute;
    width: 80%;
    max-width: 520px;
    height: 45%;
    min-height: 350px;
    max-height: fit-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../../assets/img/params.jpg) center/cover no-repeat;
    box-shadow: 10px 20px 30px 0px rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    padding: 10px;
    transition: all 300ms;
}

.wrap-slide-box {
    position: relative;
    width: 100%;
    height: 88%;
    margin: 0 auto;
}

.params-container {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.params-container .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}

.xi-close-thin,
.swiper-pagination,
.params-container .swiper-slide h2,
.params-container .swiper-slide p,
.params-container .swiper-slide li {
    color: #fff;
}

.params-container .swiper-slide small {
    color: #d3d3d3;
    margin-top: 10px;
}

.params-container .swiper-slide h2 {
    width: 100%;
    text-align: center;
    font-size: 22px;
}

.params-container .swiper-slide ol {
    width: auto;
    margin: 10px auto;
}

.wrap-autoplay-control {
    position: absolute;
    z-index: 10;
    bottom: -3px;
    left: calc(50% + 60px);
    transform: translateX(-50%);
}

.wrap-autoplay-control button {
    display: block;
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.wrap-autoplay-control button:before {
    display: block;
    content: "";
    position: absolute;
}

.wrap-autoplay-control button[aria-pressed="false"]:before {
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-left: 3px solid #63c3a9;
    border-right: 3px solid #63c3a9;
    box-sizing: border-box;
}

.wrap-autoplay-control button[aria-pressed="true"]:before {
    top: 2px;
    left: 2px;
    border-top: 8px solid transparent;
    border-left: 16px solid #63c3a9;
    border-bottom: 8px solid transparent;
}

.close-pop {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 5px;
}

.swiper-button-next::after,
.swiper-button-prev::after,
.swiper-button-next,
.swiper-button-prev {
    font-size: 40px !important;
}

.swiper-button-next,
.swiper-button-prev {
    width: 20px !important;
}