@charset "utf-8";
*{margin: 0; padding: 0;}
ul{list-style: none;}
a{text-decoration: none; color: #000;}

body{background-color: rgba(0,0,0,0.05);}

/* 소개이미지 */
.main{width: 100%;}
.main-wrap img{
    width: 100%; position: relative; z-index: -4;
    margin-top: 80px;
}

.main-wrap .black{
    width: 100%; height: 290px; position: absolute;
    z-index: -3; background-color: rgba(0,0,0,0.5);
    margin-top: 80px;
}
.main-wrap h3{
    z-index: -2; left: 50%; top: 200px;
    transform: translateX(-50%);
    font-size: 32px; color: aliceblue;
    position: absolute;
}

/* 퀵메뉴 */
.quickmenu{
    width: 1100px; height: 50px; margin: 0 auto;
    background-color: rgb(30, 55, 94);
    padding: 13px 0; box-sizing: border-box;
    position: absolute;
    left: 50%; top: 345px;
    transform: translateX(-50%);
}
.quickmenu-wrap{
    width: 300px; height: 100%; margin: 0 auto;
}

.quickmenu-wrap ul{
    display: flex; justify-content: space-around;
}
.quickmenu-wrap ul li a{color: aliceblue;}
.quickmenu-wrap ul li:nth-child(1)::after{
    content: ''; display: block;
    position: absolute; width: 1px; height: 10px;
    background-color: aliceblue;
    transform: translate(95px, -13px);
}
.quickmenu-wrap ul li.on a{
    font-weight: bold;
}

/* 오시는 길 */
.map{width: 100%; margin-top: 80px;}
.map-wrap{width: 1200px; margin: 0 auto;}

.map-wrap h3{text-align: center; font-size: 32px;}
.map-wrap .map-df{display: flex; margin-top: 50px;}

.map-nav{
    position: relative; z-index: -1;
}

.map-wrap .map-txt{
    margin-left: 50px; display: flex;
    flex-wrap: wrap; height: 250px;
    position: relative;
    transform: translateY(30%);
}
.map-wrap .map-txt .line{
    width: 5px; height: 32px;
    background-color: rgb(30, 55, 94);
    margin-top: 7px;
}
.map-wrap .map-txt > p{
    font-size: 32px; margin-left: 15px;
}
.map-wrap .map-txt .txt{
    display: flex; flex-wrap: wrap;
    margin-left: 30px;
    height: 50px;
}
.map-wrap .map-txt .txt i{
    transform: translateY(3.5px);
    margin-right: 5px;
}
.map-wrap .map-txt .txt:nth-of-type(2) p:nth-of-type(2){
    margin-left: 22px; letter-spacing: -0.2px;
}
.map-wrap .map-txt .txt:nth-of-type(3){
    transform: translateY(-20px);
}

.map2-wrap{width: 300px; margin: 0 auto;}
.map2-wrap h3{text-align: center; font-size: 22px;}
.map2-wrap .map2-df .map2-txt .map2-dd{
    display: flex; margin-top: 30px;
}
.map2-wrap .map2-df .map2-txt .map2-dd .line{
    width: 5px; height: 28px;
    background-color: rgb(30, 55, 94);
    margin-top: 7px;
}
.map2-wrap .map2-df .map2-txt .map2-dd p{
    font-size: 20px; margin-left: 15px; margin-top: 7px;
}
.map2-wrap .map2-df .map2-txt .txt{
    margin-top: 30px;
    font-size: 14px; display: flex; flex-wrap: wrap;
}
.map2-wrap .map2-df .map2-txt .txt:nth-of-type(3){margin-top: 15px;}
.map2-wrap .map2-df .map2-txt .txt i{font-size: 18px; margin-left: 10px;}
.map2-wrap .map2-df .map2-txt .txt p{margin-left: 10px;}
.map2-wrap .map2-df .map2-txt .txt:nth-of-type(2) p:nth-of-type(2){margin-left: 39px;}
.map2-wrap .map2-df .map2-nav{
    margin: 30px 0; width: 280px;
    position: relative; left: 50%;
    transform: translateX(-50%);
}

@media screen and (min-width: 1001px) {
    .main-wrap img{
        width: 100%; height: 290px;
    }
    .main-wrap img:nth-of-type(2){display: none;}
    .map2-wrap{display: none;}
    .main-wrap h3:nth-of-type(1){display: block;}
    .main-wrap h3:nth-of-type(2){display: none;}
}
@media screen and (min-width: 326px) and (max-width: 1000px) {
    .main-wrap img:nth-of-type(1){display: none;}
    .main-wrap img:nth-of-type(2){
        width: 100%; height: 290px;
    }
    .quickmenu{display: none;}
    .map-wrap{display: none;}
    .main-wrap h3:nth-of-type(1){display: none;}
    .main-wrap h3:nth-of-type(2){display: block;}
}
@media screen and (max-width: 325px){
    .main-wrap img:nth-of-type(1){display: none;}
    .main-wrap .black{height: 250px;}
    .main-wrap img:nth-of-type(2){
        width: 100%; height: 250px;
    }
    .quickmenu{display: none;}
    .map-wrap{display: none;}
    .main-wrap h3:nth-of-type(1){display: none;}
    .main-wrap h3:nth-of-type(2){display: block;}
}