﻿

.bg-dark_green {
    background-color: #182c66;
}

.container.hero_container {
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 2rem;
    display: flex;
}

    /*.container.hero_container .grid {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
        display: flex;
    }*/

.grid {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    display: flex;
}

.bg-peach {
    background-color: #a37ff5;  /* #6fc5c6; */
}

.bg-white {
    background-color: #fff
}

.grid-item {
    width: 100%
}

    .grid-item._1-2-col {
        width: 50%;
        justify-content: space-between
    }

        .grid-item._1-2-col.hero_content {
            width: 30%;
            text-align: center;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 1.04em;
            padding: 1.56em 2.36em;
            display: flex;
            min-width: 16rem;
            background-color: #f3f0fa;
        }

        .grid-item._1-2-col.hero_banner {
            z-index: 2;
            width: 70%;
            justify-content: center;
            align-items: center;
            display: flex;
            position: relative;
            overflow: hidden
        }

        .grid-item._1-2-col.about_banner {
            width: 70%;
            overflow: hidden
        }

        .grid-item._1-2-col.about_content {
            width: 30%;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            margin: 1.04em;
            padding: 1.56em 2.56em;
            display: flex
        }

        .grid-item._1-2-col.doctor_content {
            width: 70%;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            padding: 3.13em 2.08em;
            display: flex
        }

        .grid-item._1-2-col.doctor_banner {
            width: 30%;
            overflow: hidden
        }

            .grid-item._1-2-col.doctor_banner.center {
                flex-wrap: wrap;
                align-items: center;
                padding-left: 20px;
                display: flex
            }

        .grid-item._1-2-col.why_content {
            width: 40%;
            padding: 2.6em 3.6em 2.08em
        }

            .grid-item._1-2-col.why_content.bg-white {
                width: 45%;
                padding: 2em
            }

        .grid-item._1-2-col.hello_banner {
            width: 100%;
            flex-direction: column;
            display: flex
        }

        .grid-item._1-2-col.faq-content_col {
            width: 100%;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            margin-top: 3.6em;
            margin-bottom: 3.6em;
            padding-left: 3.6em;
            padding-right: 3.6em;
            display: flex
        }

            .grid-item._1-2-col.faq-content_col.is--second {
                margin-top: 0
            }

            .grid-item._1-2-col.faq-content_col.is--category_2nd {
                border-left: 1px solid #182c66
            }

                .grid-item._1-2-col.faq-content_col.is--category_2nd.is-white {
                    border-left-color: #fff
                }

        .grid-item._1-2-col.visit_content {
            width: 30%;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            margin: 1.04em;
            padding: 1em;
            display: flex
        }

        .grid-item._1-2-col.visit_banner {
            width: 70%;
            overflow: hidden
        }

        .grid-item._1-2-col.team_header {
            width: 100%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 3.13em;
            margin-bottom: 3.13em;
            display: flex
        }

        .grid-item._1-2-col.team_content {
            width: 100%;
            grid-column-gap: 5%;
            grid-row-gap: 5em;
            flex-flow: wrap;
            justify-content: flex-start;
            margin-bottom: 3.13em;
            margin-left: 3.6em;
            margin-right: 3.6em;
            display: flex
        }

.hero_socials {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text_color-light_green {
    color: #26386d
}

.hero_socials-sub {
    margin-bottom: 0;
    display: flex;
    margin-bottom: 1rem;
}

.w-inline-block {
    max-width: 100%;
    display: inline-block
}

.hero_social-link {
    justify-content: center;
    align-items: center;
    font-size: 1em;
    transition: transform .4s;
    display: flex
}

.social-icon {
    justify-content: center;
    align-items: center;
    margin-left: .5em;
    margin-right: .5em;
    font-size: 1.3rem;
    display: flex
}

    .social-icon.medium {
        margin-top: 0;
        position: relative;
        top: .2em
    }

.w-embed:before, .w-embed:after {
    content: " ";
    grid-area: 1/1/2/2;
    display: table
}

svg:not(:root) {
    overflow: hidden
}

.w-embed:after {
    clear: both
}

.hero_social-link.hidden {
    display: none
}

.margin-top {
    margin-top: 0
}

    .margin-top.auto {
        margin-top: auto
    }


    .margin-top.auto h1 {
        /*text-transform: uppercase;*/
        font-weight: 500;
        line-height: 1.2;
        margin-top: 0;
        margin-bottom: 0;
        font-family: Nanummyeongjo webfont,sans-serif;
        font-size: 3.13em;
        color: #6e73f7; /* #8497b0; */
    }

    .margin-top.medium {
        margin-top: 2em
    }

.margin-midle {
    margin-top: 4vw;
    line-height: normal;
}

.margin-bottom {
    margin-top: 6vw;
}


.first-last-name {
    font-size: 2.2rem;
    color: #6e73f7;
}

/*.dash {
    width: 2.34em;
    height: 1px;
    opacity: .5
}*/


.custom-btn {
    min-width: 7.81em;
    color: #fff;
    text-align: center;
    background-color: #182c66;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    padding: .6em .64em;
    font-family: Nanummyeongjo webfont,sans-serif;
    font-size: 1.5em;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    transition: color .4s;
    display: inline-block
}

    .custom-btn:hover {
        background-color: #000
    }

    .custom-btn.text-btn {
        min-width: 0;
        color: #e92222; /*#182c66;*/
        background-color: transparent;
        border: 0 transparent;
        border-bottom: 1px solid #e92222; /*#182c66;*/
        border-radius: 0;
        padding: 0 .15em 0 0;
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        overflow: hidden
    }

        .custom-btn.text-btn:hover {
            color: #6fc5c6;
            border-bottom-color: transparent
        }

        .custom-btn.text-btn.is--light_green {
            color: #26386d;
            border-bottom-color: #26386d
        }

            .custom-btn.text-btn.is--light_green:hover {
                color: #fff;
                border-bottom-color: transparent
            }

        .custom-btn.text-btn.is--peach {
            color: #6fc5c6;
            border-bottom-color: #6fc5c6
        }

            .custom-btn.text-btn.is--peach:hover {
                color: #fff
            }

            .custom-btn.text-btn.is--peach.animate-line.hidden {
                display: none
            }

        .custom-btn.text-btn.is--smoke {
            color: #fff;
            border-bottom-color: #fff
        }

            .custom-btn.text-btn.is--smoke:hover {
                color: #6fc5c6;
                border-bottom-color: transparent
            }

    .custom-btn.link-btn {
        width: auto;
        display: flex
    }

.para-medium {
    font-size: 1.3em
}

.btn-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: center;
    align-items: center;
    margin-right: 2em;
    display: flex
}

/* Animate Line */
/*:root {
    --animate-line-color: currentColor;
    --animate-line-speed: 0.3s;
    --animate-line-ease: cubic-bezier(0.12, 0, 0.39, 0);
}


.animate-line {
    display: inline-block;
    position: relative;
    overflow-x: hidden;
}

    .animate-line::after {
        pointer-events: none;
        background-color: var(--animate-line-color);
        content: "";
        height: 1px;
        position: absolute;
        left: auto;
        top: auto;
        right: 0%;
        bottom: 0%;
        width: 0%;
        transition: width var(--animate-line-ease) var(--animate-line-speed);
    }*/

/* Animate Line */
:root {
    --animate-line-color: currentColor;
    --animate-line-speed: 0.3s;
    --animate-line-ease: cubic-bezier(0.12, 0, 0.39, 0);
}

.animate-line {
    display: inline-block;
    position: relative;
    overflow-x: hidden;
}

    .animate-line::after {
        pointer-events: none;
        background-color: var(--animate-line-color);
        content: "";
        height: 1px;
        position: absolute;
        left: auto;
        top: auto;
        right: 0%;
        bottom: 0%;
        width: 0%;
        transition: width var(--animate-line-ease) var(--animate-line-speed);
    }

    .animate-line:hover::after {
        width: 100%;
        right: auto;
        left: 0%;
    }


.hero_video-wrapper {
    width: 100%;
    height: 100%;
    display: flex
}

.hidden {
    display: none
}

.hero-img {
    height: 43em
}

    .hero-img.video_banner {
        width: 100%
    }

.hero_video-wrapper img {
    overflow-clip-margin: content-box;
    overflow: clip;
    border: 0;
    vertical-align: middle;
    max-width: 100%;
    object-fit: cover;
}

audio, canvas, progress, video {
    vertical-align: baseline;
    display: inline-block
}

.w-background-video > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -100;
    background-position: 50%;
    background-size: cover;
    margin: auto;
    position: absolute;
    top: -100%;
    bottom: -100%;
    left: -100%;
    right: -100%
}
/* -------------------------------------------------------------------------- */


@media only screen and (max-width: 768px) {
    .container {
        max-width: 100%;
        padding-left: 6vw;
        padding-right: 6vw
    }

    .grid, .grid.footer_grid {
        flex-wrap: wrap
    }

    .grid-item._1-2-col, .grid-item._1-2-col.hero_content {
        width: 100%
    }

    .hero_socials {
        margin-bottom: 0
    }

    .hero_socials-sub {
        margin-bottom: 4em
    }

    .grid-item._1-2-col.hero_banner, .grid-item._1-2-col.about_banner {
        width: 100%;
        order: -1
    }
}



