* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#pano {
    top: 0;
}


@font-face {
    src:url("../fonts/210\ M고딕050.ttf");
    font-family: "210Gothic";
}

body {
    position: relative;
    width: 100%;
}

article, nav, aside {
    display: none;
}

ul {
    text-decoration: none;
}

#tutorial_modal {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.tutorial-exit {
    height: 3vw;
    margin-top: 3.5vw;
    margin-left: auto;
    padding-right: 1vw;
}

.tutorial-exit img {
    width: 1.5vw;
}

#tutorial_center_colum {
    display: flex;
    width: 30vw;
    height: 22vw;
    margin: auto;
}

.Tutorial_Icon {
    display: block;
    width: 10vw;
    margin: auto;
    padding-top: 5vw;
}

#tutorial_cookie {
    display: flex;
    margin: 0 auto;
    padding: 0 0 2vw;
}

.check_text {
    line-height: 1.6;
    padding-right: 1vw;
    font-family: "210Gothic";
}

.check_cookie {
    width: 20px;
    height: 23px;
    display: block;
    margin: 0 auto;
}

.url {
    text-decoration: none;
    font-family: "210Gothic";
    color: #2D2D2D;
    border-bottom: 1px solid rgba(239, 239, 239, 0.5);
}

#nav_poz {
    position: absolute;
    display: flex;
    z-index: 999;
}

/* #pano {
    padding-top: 3vw;
} */

#search_area {
    width: 3vw;
    height: 3vw;
    display: flex;
    z-index: 999;
}

#search_IMG {
    width: 1.5vw;
    margin: auto;
}

.search_box {
    width: 0;
    height: 2vw;
    opacity: 0;
    border-radius: 20px;
    border: none;
    margin: auto 0;
    transition: all 0.4s;
    padding-left: 1vw;
    z-index: 999;
}
.search_box:focus {
    outline: none;
}

.actInput {
    width: 20vw;
    opacity: 1;
}

.suggestion_box {
    width: 20vw;
    max-height: 30vw;
    overflow-y: scroll;
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 3.1vw;
    left: 6vw;
    transition: all 0.4s;
    text-align: center;
    border-radius: 20px;
}

.suggestion_box::-webkit-scrollbar {
    width: 5.2px;
    opacity: 0;

}

.suggestion_box::-webkit-scrollbar-thumb {
    background-color: #1C377F;
    border-radius: 10px;
}

.suggestion_box::-webkit-scrollbar-button {
    display: none;
}

.suggestion_box::-webkit-scrollbar:active {
    opacity: 1;
}

.search_result {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    padding: 0.5vw 0;
    color: #606060;
    width: 100%;
    font-family: "210Gothic";
    font-size: 1vw;
}

.search_result:hover {
    background-color: #606060;
    color: white;
}

.home_btn {
    width: 3vw;
    height: 3vw;
    display: flex;
    background-color:  #002760;
    position: absolute;
    z-index: 997;
    border: none;
}

.home_btn img {
    width: 1.5vw;
    margin: auto;
}

#nav_title {
    width: 3vw;
    height: 3vw;
    display: flex;
    z-index: 999;
    background-color: #002760;
}

.menu-trigger span {
  display: inline-block;
  position: absolute;
}

.menu-trigger {
    position: relative;
    display: block;
    width: 1.6vw;
    height: 1.4vw;
    margin: auto;
    transition: all .4s;
    border: none;
}

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  background-color: #fff;
  border-radius: 30px;
}

.menu-trigger span:nth-of-type(1) {
  top: 0;
}

.menu-trigger span:nth-of-type(2) {
  top: 50%;
}

.menu-trigger span:nth-of-type(3) {
    top: 95%;
}


.act1 {
    -webkit-transform : translateY(0.6vw) rotate(-315deg);
    transform : translateY(0.6vw) rotate(-315deg);
    transition: all .4s;
}

.act2 {
    opacity : 0;
}
.act3 {
    -webkit-transform : translateY(-0.7vw) rotate(315deg);
    transform : translateY(-0.7vw) rotate(315deg);
    transition: all .4s;
} 


.box_area .navbox .nav_txt {
    display: block;
    height: 3vw;
    font-size: 1vw;
    color: white;
    background-color: #002760;
    text-align: center;
    transition: all .4s;
    border: 1px solid #002760;
    line-height: 3vw;
}

.box_area {
    position: absolute;
    z-index: 10;
    width: 18vw;
    min-width: 150px;
    overflow: hidden;
    -webkit-transform : translateY(-100%);
    transform: translateY(-100%);
    transition: all .4s;
}

.navbox {
    display: flex;
    flex-direction: column;
    width: 12vw;
    width: 100%;
}

.navbox_on {
    -webkit-transform : translateY(0%);
    transform: translateY(0%);
    transition: all .4s;
}

input[id*="menu"] {
    display: none;
}

input[id*="menu"] + label {
    display: flex;
    padding: 0.6em 0;
    font-family: "210Gothic";
    font-size: 1vw;
    color: #2D2D2D;
    background: #EFEFEF;
    text-align: center;
    cursor: pointer;
    position: relative;
    margin: 0;
}

input[id*="menu"] + label:hover{
    background-color: #2D4494;
    color: #fff;
}

/* label[data-value="2"] span {
    margin-left: auto;
}

label[data-value="3"] span {
    margin-left: 3.6vw;
}

label[data-value="4"] span {
    margin-left: 4vw;
} */

.menu_title {
    font-size: 1vw;
}

input[id*="menu"] + label + ul {
    max-height: 0;
    transition: all 0.75s;
    overflow: hidden;
    margin: 0;
}

input[id*="menu"] + label + ul a {
    font-size: 0.8vw;
    display: block;
    padding: 0.6em 0 0.6em 3em;
    background: #fff;
    margin-bottom: 1px;
    cursor: pointer;
}

input[id*="menu"]:checked + label {
    background-color: #2D4494;
    color: #fff;
}

input[id*="menu"]:checked + label + ul {
    max-height: 1000px;
}

.info_area a:hover {
    background-color: #E0E0E0;
    color: #000;
}

label[class="menu-btn"] span {
    display: block;
    margin: 0 auto;
}

.plusicon {
    display: block;
    width: 0.65vw;
    min-width: 6.5px;
    margin-right: 1vw;
}

.move_url span {
    font-family: "210Gothic";
    font-size: 0.75vw;
    line-height: 2;
    color: #000;
}

@media (max-width:1030px){
    /* #pano {
        padding-top: 5vw;
    } */

    .tutorial-exit {
        margin-top: 6vw;
    }

    .tutorial-exit img{
        width: 2vw;
    }

    #nav_title {
        width: 5vw;
        height: 5vw;
    }

    .menu-trigger {
        width: 3vw;
        height: 2.5vw;
    }

    .act1 {
        -webkit-transform: translateY(1.1vw) rotate(-315deg);
        transform: translateY(1.1vw) rotate(-315deg);
    }

    .act3 {
        -webkit-transform: translateY(-1.2vw) rotate(315deg);
        transform: translateY(-1.2vw) rotate(315deg);
    }

    #search_area {
        width: 5vw;
        height: 5vw;
    }

    #search_IMG {
        width: 3vw;
    }

    .search_box {
        height: 3.5vw;
    }

    .actInput {
        width: 25vw;
    }

    .suggestion_box {
        width: 25vw;
        max-height: 40vw;
        top: 5vw;
        left: 10vw;
    }

    .box_area {
        width: 30vw;
    }

    .home_btn {
        width: 5vw;
        height: 5vw;
    }

    .home_btn img {
        width: 3vw;
    }
    .box_area .navbox .nav_txt {
        height: 5vw;
        line-height: 5vw;
        font-size: 1.8vw;
    }
    input[id*="menu"] + label {
        font-size: 1.8vw;
    }
    input[id*="menu"] + label + ul a {
        font-size: 1.5vw;
    }

    /* label[data-value="3"] span {
        margin-left: 5.6vw;
    }
    
    label[data-value="4"] span {
        margin-left: 6.2vw;
    } */

}

@media (max-width:770px){
    /* #pano {
        padding-top: 5vw;
    } */

    #nav_poz {
        height: 5vw;
    }
    #tutorial_center_colum{
        width: 40vw;
    }

    .Tutorial_Icon{
        width: 15vw;
    }

    .box_area .navbox .nav_txt {
        font-size: 2vw;
    }

    .box_area {
        width: 34vw;
    }

    input[id*="menu"] + label {
        font-size: 2vw;
    }

    input[id*="menu"] + label + ul a {
        font-size: 1.75vw;
    }

    .plusicon {
        width: 9px;
    }
}

@media (max-width:480px){
    .tutorial-exit {
        margin-top: 13vw;
    }

    .tutorial-exit img {
        width: 5vw;
    }

    #tutorial_center_colum{
        width: 50vw;
        height: 40vw;
    }

    .Tutorial_Icon{
        width: 20vw;
    }

    .check_text {
        font-size: 12px;
    }

    .check_cookie {
        width: 15px;
        height: 18px;
    }

    #nav_poz {
        height: 12vw;
    }

    .home_btn {
        width: 12vw;
        height: 12vw;
    }

    .home_btn img {
        width: 7vw;
    }

    #nav_title {
        width: 12vw;
        height: 12vw;
        top: 12vw;
    }

    .menu-trigger {
        width: 5.8vw;
        height: 5.8vw;
    }

    .menu-trigger span {
        height: 2.5px;
    }

    .act1 {
        -webkit-transform: translateY(2.8vw) rotate(-315deg);
        transform: translateY(2.8vw) rotate(-315deg);
        transition: all .4s;
    }

    .act3 {
        -webkit-transform: translateY(-2.6vw) rotate(315deg);
        transform: translateY(-2.6vw) rotate(315deg);
        transition: all .4s;
    }

    input[id*="menu"] + label {
        padding: 0.25em 0;
        font-size: 3vw;
    }

    input[id*="menu"] + label span {
        font-size: 12px;
    }

    input[id*="menu"]:checked + label + ul {
        max-height: 300px;
        overflow-y: scroll;
    }

    input[id*="menu"] + label + ul a {
        padding: 0.25rem 2rem;
        font-size: 10px;
    }

    .box_area .navbox .nav_txt {
        font-size: 12px;
        height: 12vw;
        line-height: 10vw;
    }

    #search_area {
        width: 12vw;
        height: 12vw;
    }

    #search_IMG {
        width: 7vw;
    }

    .actInput {
        width: 70%;
    }

    .search_box {
        height: 8vw;
        padding-left: 2.5vw;
    }

    .box_area {
        width: 62vw;
    }

    .suggestion_box {
        width: 100%;
        max-height: 50vh;
        top: 12vw;
        left: 0;
    }

    .search_result {
        font-size: 14px;
    }
    .plusicon {
        width: 7px;
        margin-right: 3vw;
    }
/* 
    label[data-value="3"] span {
        margin-left: 10.5vw;
    }
    
    label[data-value="4"] span {
        margin-left: 11.5vw;
    } */
}

/* @media (width:414px) {
    label[data-value="3"] span {
        margin-left: 14.3vw;
    }
    
    label[data-value="4"] span {
        margin-left: 15.5vw;
    }
}

@media (width:320px) {
    label[data-value="3"] span {
        margin-left: 9.3vw;
    }
    
    label[data-value="4"] span {
        margin-left: 10.7vw;
    }
}

@media (width:375px) {
    label[data-value="3"] span {
        margin-left: 13.5vw;
    }
    
    label[data-value="4"] span {
        margin-left: 14.5vw;
    }
} */

@media (min-width:2550px) {
    /* #pano {
        padding-top: 3vw;
    } */
    
    .check_text {
        font-size: 24px;
    }

    .check_cookie {
        width: 24px;
        height: 33px;
    }
    .nav_txt {
        font-size: 0.7vw;
    }

    input[id*="menu"] + label {
    font-size: 0.75vw;
    }

    input[id*="menu"] + label + ul a {
        font-size: 0.7vw;
    }

    .search_box {
        font-size: 0.8vw;
    }

    .search_result {
        font-size: 0.8vw;
    }
}