/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #2b2d2e;
    border-color: #1861ac;
}

.btn-blue {
    color: #fff;
    background-color: #006ab5;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}


.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    /* margin-bottom: 60px;*/
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    /*line-height: 60px;*/ /* Vertically center the text there */
}

.econtainer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.no-padding {
    padding: unset !important;
}


.centered {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.color-white {
    color: white;
}

.color-blue {
    color: blue;
}

.color-logo {
    color: #0068b8;
}

.color-logo-grey {
    color: #8091A2;
}

.color-mouse {
    color: #484343;
}

.feature-desc {
    left: 10%;
    font-size: 2rem;
}

.feature-desc-bold {
    font-weight: bold;
    font-size: 2rem;
    /*position: absolute;*/
    /*top: 38%;*/
    left: 10%;
}

.desc-bold {
    font-weight: bold;
    font-size: x-large;
    padding: unset;
}

.font-w-b {
    font-size: 1.6rem;
    font-weight: bold;
}

.desc-xx-large {
    font-weight: bold;
    font-size: xx-large;
    padding: unset;
    text-align: center;
}

.center {
    text-align: justify;
}

.selector img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.contact_image {
    background-image: url(/img/bg/logo3.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid black;
}

.imgsertoku {
    float: left;
    margin-right: 20px;
    margin-top: 20px;
    clear: both;
}

.left-box {
    background: red;
    float: left;
    width: 50%;
}

.right-box {
    background: blue;
    float: right;
    width: 50%;
}


.btn-group-lg > .btn, .btn-lg2 {
    /* padding: 0.5rem 1rem; */
    /* font-size: 1.25rem; */
    line-height: 1.5;
    border-radius: 0.3rem;
}

#map {
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/></filter></svg>#g');
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}

.no-margin {
    margin: unset;
}

.row {
    margin: unset;
}

.padding-desc-top {
    padding-top: 180px;
}

.header-sticky {
    position: sticky;
    top: 0px;
    opacity: 90%;
    z-index: 3;
    font-size: 1.6rem;
}

.side-sticky {
    position: sticky;
    top: 55.25px;
    opacity: 90%;
    z-index: 3;
}

.btn-support-open {
    display: block;
}

#btn-nav {
    /*  display:none;*/
}

.navbar {
    /* justify-content: start;*/
}

.navitem-apos {
    display: block;
}


.input-search {
    /* border: 0px;*/
}

#header-2 {
    margin: 5px;
}

input#search {
    /*background-image: url('/img/search.png');
    background-size: 7%;    
    background-repeat: no-repeat;*/
    /* text-indent: 20px;*/
    /* Extra Styling */
    padding: 5px 3px;
    /*transition: 0.5s;*/
}

input#search-hearder {
    background-image: url('/img/search.png');
    background-size: contain;
    background-repeat: no-repeat;
    text-indent: 20px;
    /* Extra Styling */
    padding: 5px 3px;
    transition: 0.3s;
}

input#search:focus {
    background-image: none;
    text-indent: 0px
}


input#search-hearder:focus {
    /* background-image: none;*/
    /* text-indent: 0px*/
}


.btnextra {
    margin-left: 10px;
}

.form-group-centered {
    width: 400px;
    margin: 0 auto;
}

.sub_title {
    margin-left: 3px;
}

.padding-1vw {
    padding: 1vw;
}

.padding-5vw {
    padding: 5vw;
}

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 4; /* Specify a stack order in case you're using a different order for other elements */
}

#overlay_search {
    position: absolute; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 80%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #fff; /* Black background with opacity */
    z-index: 5; /* Specify a stack order in case you're using a different order for other elements */
    padding: 12px;
}

.search-result {
    margin: 1vw;
    padding: 0.8vw;
    border-style: solid;
    border-color: #ddd9d7;
    border-width: thin;
    cursor: pointer;
}

html {
    scroll-behavior: smooth;
}

.small-button-text {
    font-size: small;
    color: #49b1b1;
}

.img-desc {
    width: 70%;
    padding: 3vw;
}

.mt-6p {
    margin-top: 6%;
}

.w-100p {
    width: 100%;
}

.h-100p {
    width: 100%;
}

.m-l-5vw {
    margin-left: 5vw;
}

.footer-logo-top {
    margin-top: 2.5vw;
}

footer {
    background: /*#0000dd;*/ #fffdfb;
    text-align: center;
    font-size: small;
}

#wrapper {
    width: 150px;
    height: 150px;
    background: green;
    box-shadow: 0 1px 15px rgba(0,0,0,.8);
    /* 추가된 부분 */
    position: absolute;
}

/* 추가된 부분 */
#line-wrapper {
    cursor: pointer;
    width: 56px;
    height: 35px;
    position: relative;
}

/* 추가된 부분 */
.line {
    background: #ffffff;
    margin-top: 6px;
    margin-bottom: 6px;
    width: 56px;
    height: 7px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    position: relative;
}

#btn-nav-support {
    display: block;
    margin: 5px;
}

#search-hearder {
    max-width: 100%;
    flex: 0 0 100%;
}

img {
    max-width: 100%;
    height: auto;
}

.img-overlay-1 {
    position: absolute;
    width: 4vw;
    top: 22vw;
    right: 37vw;
    bottom: 0;
    font-size: 1.2vw;
}

.img-overlay-2 {
    position: absolute;
    width: 17vw;
    top: 22vw;
    right: 6vw;
    bottom: 0;
    font-size: 1.2vw;
}

.img-overlay-3 {
    position: absolute;
    width: 17vw;
    top: 35vw;
    right: 24vw;
    bottom: 0;
    font-size: 1.2vw;
}

.img-overlay-4 {
    position: absolute;
    width: 17vw;
    top: 35vw;
    right: 7vw;
    bottom: 0;
    font-size: 1.2vw;
}

.img-overlay-5 {
    text-align: center;
    position: absolute;
    width: 50%;
    top: 3vw;
    left: 48%;
    bottom: 0;
    font-size: 2.3vw;
}

.img-overlay-6 {
    text-align: center;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 48%;
    bottom: 0;
    font-size: 2.3vw;
}

.img-overlay-7 {
    text-align: center;
    position: absolute;
    width: 50%;
    top: 3vw;
    left: 48%;
    bottom: 0;
    font-size: 2.3vw;
}

.img-overlay-8 {
    text-align: center;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 48%;
    bottom: 0;
    font-size: 2.3vw;
}


.img-desc-1 {
    width: 40%;
    /* margin-top: 56px; */
    margin-bottom: 25px;
}

@media (min-width: 312px) {
    
    .img-desc-1 {
        width: 0%;
    }
}

.img-desc-2 {
    width: 40%;
    margin-top: 56px;
    margin-bottom: 25px;
    margin-left: 15px;
}

.img-desc-3 {
    width: 40%;
    margin-top: 56px;
    margin-bottom: 25px;
}

.img-desc-4 {
    width: 40%;
    margin-top: 18px;
    margin-bottom: 25px;
}

.img-desc-5 {
    width: 68%;
    margin-top: 56px;
    margin-bottom: 25px;
}


.img-desc-6 {
    width: 40%;
    margin-top: 56px;
    margin-bottom: 25px;
}

.desc-index {
    font-size: 1.4rem;
    padding-top: 0vw;
    padding: 65px;
}

@media (min-width: 312px) {

    .desc-index {
        padding: 0px;
    }

    .img-desc-1 {
        width: 26%;
    }

    .img-desc-2 {
        width: 25%;
    }

    .img-desc-3 {
        width: 25%;
    }

    .img-desc-4 {
        width: 25%;
    }

    .img-desc-5 {
        width: 25%;
    }

    .img-desc-6 {
        width: 25%;
    }
}

.w-i-desc-2 {
    width: 100%;
}

.m-l-3p4vw {
    /*margin-left:3.4vw;*/
}

.w-7-vw {
    width: 7vw;
}

.m-l-41-vw-n {
    margin-left: -1vw;
}

.w-2p5-vw {
    width: 6.5vw;
}

.w-3p5-vw {
    width: 7.5vw;
}

.m-t-1vw {
    margin-top: 1vw;
}

.m-l-7vw {
    margin-left: 7vw;
}

.m-l-7vw-n {
    margin-left: -90%;
}


.overlay {
    position: absolute; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.2); /* Black background with opacity */
    z-index: 0; /* Specify a stack order in case you're using a different order for other elements */
}

.overlay-2 {
    position: absolute; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 0; /* Specify a stack order in case you're using a different order for other elements */
}

.f-s-empl {
    font-size: 1.6rem;
}

.button-for-emp {
    border-radius: 4px;
    top: 90%;
    width: 39vw;
    background: #0069d9;
    text-align: center;
    cursor: pointer;
    opacity: 90%;
    font-size: 1.5rem;
    padding:7px
}

.form-control {
    font-size: 1.5rem;
}

.mt-6p {
    margin-top: 0%;
    margin-bottom: 7%;
}

.text-justify {
    text-align: center;
}

.text-center {
    text-align: center;
}

.p-3-vw {
    padding: 3vw;
}

.desc-apos {
    text-align: center;
    margin-top: 70px;
    font-size: 1.7rem;
    font-weight: bold;
}

.desc-apos-2 {
    text-align: center;
    margin-top: 5px;
    font-size: 1.7rem;
    font-weight: bold;
}

.t-a-l {
    text-align: left;
}

.text-a-justify {
    text-align: left;
}

.img-roadmap {
    padding: 0px;
}

.m-t-4vw {
    margin-top: 4vw;
}

.apos-index-desc {
    text-align: center;
    margin-top: 30px;
    font-size: 2.2rem;
    font-weight: bold;
}

.m-b-feature {
    margin-bottom: 12px;
}

.feature-img {
    margin-top: 60px;
    width: 100%;
    padding: 60px
}

.roadmap-img-1 {
    width: 100%;
    padding: 60px
}

.feature-img-4 {
    margin-top: 30px;
    margin-left: 41px;
    width: 87%;
    padding: 48px;
}

.feature-img-5 {
    margin-top: 30px;
    margin-left: 40px;
    width: 89%;
    padding: 60px
}

.feature-img-2 {
    margin-top: 30px;
    width: 90%;
    padding: 60px;
    margin-left: 28px;
}


.feature-img-3 {
    margin-top: 60px;
    width: 95%;
    padding: 60px
}

.roadmap-img-3 {
    margin-top: 60px;
    width: 95%;
    padding: 60px
}

.r-4-2-desc {
    padding-right: 0px;
    margin-bottom: 100px;
}

.m-b-100px {
    margin-bottom: 100px;
}

.feature-row-1 {
    margin-bottom: 0px;
}

.feature-row-2 {
    margin-bottom: 0px;
}

.m-t-feature2_1 {
    margin-top: 0px
}



.f-2-2 {
    margin-top: 0px;
}

.r-2-2 {
    margin-top: 0px;
}

.padding-desc {
    padding-top: 0px;
    padding-left: 9vw;
}

.padding-desc-1 {
    padding-top: 0px;
    padding-left: 9vw;
}

.roadmap-desc-1 {
    padding-top: 0px;
    padding-left: 9vw;
}

.padding-desc-feature-4 {
    padding-top: 0px;
    padding-left: 9vw;
    padding-right: 0px;
}

.padding-desc-feature-3 {
    padding-top: 0px;
    padding-left: 9vw;
}

.padding-desc-feature-5 {
    padding-top: 0px;
    padding-left: 9vw;
}

.feature-desc-2 {
    padding-top: 0px;
    padding-left: 9vw;
}

.index-img-row {
    margin-top: 25px;
    font-size: larger;
    text-align: center;
}

.t-a-c {
    text-align: center;
}

#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

    #snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}