/* tuto css */
.tuto_wp {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    background: rgba(0,0,0,0.7);
}

.tuto_wp .tuto_in {
    position: relative;
    width: 100%;
    height: 100%;
}

.tuto_wp .tuto_in .tuto_center {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -60%);
    z-index: 3;
    width: 100%;
    max-width: 57.5rem;
    padding: 5.5rem 6rem;
}

/* border:1px solid #E3E3E3; border-radius:2rem; background-color: rgba(0,0,0,0.1); backdrop-filter: blur(5px);*/
.tuto_wp .tuto_in .tuto_center .tt_info_txt {
    text-align: center;
    color: #fff;
    margin-bottom: 4rem;
}

.tuto_wp .tuto_in .tuto_center .tt_info_txt .if_txt1 {
    font-family: var(--entype1);
    font-size: 3rem;
    line-height: 3.4rem;
    font-weight: 600;
}

.tuto_wp .tuto_in .tuto_center .tt_info_txt .if_txt2 {
    font-family: var(--entype1);
    font-size: 3.6rem;
    line-height: 4rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.tuto_wp .tuto_in .tuto_center .tt_info_txt .if_txt3 {
    font-size: 2rem;
    line-height: 2.4rem;
    font-weight: 300;
    color: #E3E3E3;
}

.tt_set {
    display: flex;
    gap: 5rem;
    margin-bottom: 4rem;
}

.tt_set1 {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.tt_set_t {
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
}

.tt_set_s {
    font-size: 1.6rem;
    font-weight: 300;
    color: #E3E3E3;
    margin-bottom: 1.5rem;
}

.tt_set_img {
    height: 7.7rem;
}

.tt_arr_img1 {
    height: 2.85rem;
}

.tt_arr_img2 {
    height: 3.05rem;
}

.tuto_bt1 {
    font-family: var(--entype1);
    font-size: 1.7rem;
    font-weight: 600;
    width: 14.2rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3rem;
    border: 3px solid #fff;
    background: none;
    color: #fff;
    margin: 0 auto;
    cursor: pointer;
    transition: all ease 0.5s;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.9);
}

.tuto_bt1:hover {
    background: var(--point-color-1);
}

.tuto_map {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, -90%);
    z-index: 5;
}

.tuto_setting {
    position: absolute;
    right: 6rem;
    top: 55%;
    transform: translate(0, -45%);
    z-index: 5;
    text-align: right;
}

.tuto_board {
    position: absolute;
    left: 6rem;
    top: 55%;
    transform: translate(0, -45%);
    z-index: 5;
    text-align: left;
}

@media (max-width: 460px) {
    .tuto_wp .tuto_in .tuto_center {
        padding:5rem 3rem;
        top: 5%;
        transform: translate(-50%, 0);
    }

    .tt_set {
        gap: 2rem;
    }

    .tt_set_img {
        height: 5rem;
    }
}

/* main gnb */
.tnb1 {position:fixed; top:10px; left:50%; z-index:1; width:160px; transform: translate(-50%, 0);}
.tnb1 img {width:100%;}
.gnb1 {position:fixed; top:50%; left:0; z-index:1; transform: translate(0, -50%);}
.rnb1 {position:fixed; top:50%; right:0; z-index:1; transform: translate(0, -50%);}

.gnb_wrap {height:5rem; overflow:hidden; transition: all ease 0.5s;}
.gnb_wrap:hover {height:35rem;}

.lnb_m {position:relative;width:5rem;height:5rem; display:flex; flex-wrap:wrap; align-items: center; justify-content: flex-start;}
.lnb_m:before {content:'';display:block;width:0;height:100%;position:absolute;left:0;top:0;transition: all ease 0.3s;z-index:1}
.lnb_m span {background-color:rgba(0, 0, 0, 0.3);position:relative;z-index:5;width:5rem;height:5rem;display:flex;align-items: center;justify-content: center;text-align:center;font-size:2rem; transition: all ease 0.5s; color:#fff;}
.lnb_m i {display:none;position:relative;z-index:5;white-space:nowrap;font-size:1.6rem; color:#fff;padding-left:1.5rem; text-shadow:1px 1px 1px #333;}

.rnb_m {position:relative;width:5rem;height:5rem; display:flex; flex-wrap:wrap; align-items: center; justify-content: flex-end;}
.rnb_m:before {content:'';display:block;width:0;height:100%;position:absolute;right:1px;top:0;transition: all ease 0.3s;z-index:1}
.rnb_m span {background-color:rgba(0, 0, 0, 0.3);position:relative;z-index:5;width:5rem;height:5rem;display:flex;align-items: center;justify-content: center;text-align:center;font-size:2rem; transition: all ease 0.5s; color:#fff;}
.rnb_m i {display:none;position:relative;z-index:5;white-space:nowrap;font-size:1.6rem; color:#fff;padding-right:1.5rem; text-shadow:1px 1px 1px #333;}

nav {height:5rem; overflow:hidden;}
.rnb1 li {display:flex;justify-content:flex-end}
nav:hover {height:35rem;transition: all ease 0.3s;}
.gnb1 nav:hover ul {transition: all ease 0.3s;}
.rnb1 nav:hover ul {transition: all ease 0.3s;}
nav:hover .lnb_m {width:20rem}
nav:hover .lnb_m:hover:before {width:100%}
nav:hover .lnb_m i {display:block}
nav:hover .rnb_m {width:20rem; text-align:right;}
nav:hover .rnb_m:hover:before {width:100%}
nav:hover .rnb_m i {display:block}

.gn_bt {width:5rem; height:5rem; background-color:rgba(0, 0, 0, 0.3); display:flex; align-items: center; justify-content: center; cursor:pointer; transition: all ease 0.5s;}
.gn_bt span {font-size:2rem; transition: all ease 0.5s; color:#fff;}
nav:hover .gn_bt span {transform: rotate( 180deg );}

.bnb1 {position:fixed; bottom:2.5rem; left:50%; z-index:1; transform: translate(-50%, 0);}
.bnb1 .minimap {position:relative; width:248px; height:147px;}
.bnb1 .minimap .map_left {position:absolute; left:-4.0rem; top:50%; transform: translate(0, -50%);}
.bnb1 .minimap .map_right {position:absolute; right:-4.0rem; top:50%; transform: translate(0, -50%);}
.bnb1 .minimap .map_info {position:absolute; left:50%; bottom:0; max-width:200px; color:#fff; font-size:1.4rem; text-align:center; background-color: rgba(0, 0, 0, 0.3); border-radius:2.5rem; transform: translate(-50%, 0); padding:0.4rem 1.2rem; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.bnb1 .minimap .map_p {position:absolute; width:2.3rem; height:2.3rem; color:#000; opacity:0.5; transition: all ease 0.2s; transform: rotate( 180deg ); background:#fff;border-radius:2.5rem; display:flex; align-items: center; justify-content: center;}
.bnb1 .minimap .map_p:hover {opacity:1;}
.bnb1 .minimap .map_p span {font-size:2.8rem;}
.bnb1 .minimap .map_p:hover span {font-size:3.0rem;}
.bnb1 .minimap .map_p2 {position:absolute; width:2.2rem; height:2.5rem; color:#000; opacity:0.5; transition: all ease 0.2s; transform: rotate( 0 ); display:flex; align-items: center; justify-content: center;}
.bnb1 .minimap .map_p2 svg {width:100%;}
.bnb1 .minimap .map_p2:hover {opacity:1;}
.bnb_bt {color:#fff; width:5.0rem; height:5.0rem; background-color: rgba(0, 0, 0, 0.3); display:block; border-radius:2.5rem; display:flex; align-items: center; justify-content: center; transition: all ease 0.2s;}
.bnb_bt:hover {color:#fff; width:5.0rem; height:5.0rem; display:block; border-radius:2.5rem; display:flex; align-items: center; justify-content: center;}
.bnb_bt span {font-size:2.4rem;}

.map_copy {position:fixed; left:0; bottom:3px; color:#fff; font-size:1.2rem; text-align:center; width:100%;}

@media (max-width: 420px) {

}