/* -------- 인트로 -------- */
.wrap.intro {background-color: #5834E8; height: 100vh; width: 100%; position: relative; display: flex; align-items: center; justify-content: center;}
/* .wrap.intro .logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} */



/* -------- 페이지헤더 -------- */
.page_hd {width: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-bottom: 1px solid #eee; height: 56px;}
.page_hd .prev {position: absolute; top: 50%; left: 1.2em; transform: translateY(-50%); width: 30px; height: 30px; background: url(../img/page_header_prev.png) no-repeat center/contain;}
.page_hd .pg_tit {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 16px; font-weight: 500;}
.page_hd .btn_right {position: absolute; top: 50%; right: 1.2em; transform: translateY(-50%); width: 30px; height: 30px; background: url(../img/page_header_close.png) no-repeat center/contain;}

.page_hd.color {background-color: #5834E8;}
.page_hd.color .pg_tit {color: #fff;}

/* .page_hd .btn_left.prev {background: url(../img/page_header_prev.png) no-repeat center/contain;} */
/* .page_hd.color .btn_left.prev {background: url(../img/page_header_prev_wh.png) no-repeat center/contain;} */
.page_hd.color .prev {background: url(../img/page_header_prev_wh.png) no-repeat center/contain;}
/* .page_hd .btn_right.close {background: url(../img/page_header_close.png) no-repeat center/contain;} */
.page_hd.color .btn_right {background: url(../img/page_header_close_wh.png) no-repeat center/contain;}



/* -------- 바텀내비 -------- */
.bottom_nav {position: fixed; width: 100%; bottom: 0; left: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 10px 6px rgba(0, 0, 0, .04); background-color: #fff; z-index: 10;}
.bottom_nav .bd {display: flex; padding: 18px 10px 25px;}
.bottom_nav .nav_con {width: calc((100% - 78px) / 4); display: flex; flex-direction: column; align-items: center; gap: 8px;}
.bottom_nav .nav_con span {font-size: 15px; font-weight: 600; color: #666;}
.bottom_nav .nav_con .icon {display: block; width: 22px; height: 22px;}
.bottom_nav .nav_con.around .icon {background: url(../img/bottom_around.png) no-repeat center/contain;}
.bottom_nav .nav_con.around.on .icon {background: url(../img/bottom_around_on.png) no-repeat center/contain;}
.bottom_nav .nav_con.around.on span {color: #5834E8;}
.bottom_nav .nav_con.search .icon {background: url(../img/bottom_search.png) no-repeat center/contain;}
.bottom_nav .nav_con.search.on .icon {background: url(../img/bottom_search_on.png) no-repeat center/contain;}
.bottom_nav .nav_con.search.on span {color: #5834E8;}
.bottom_nav .nav_con.like .icon {background: url(../img/bottom_like.png) no-repeat center/contain;}
.bottom_nav .nav_con.like.on .icon {background: url(../img/bottom_like_on.png) no-repeat center/contain;}
.bottom_nav .nav_con.like.on span {color: #5834E8;}
.bottom_nav .nav_con.my .icon {background: url(../img/bottom_my.png) no-repeat center/contain;}
.bottom_nav .nav_con.my.on .icon {background: url(../img/bottom_my_on.png) no-repeat center/contain;}
.bottom_nav .nav_con.my.on span {color: #5834E8;}
.bottom_nav .home {width: 90px; margin-top: -45px; height: 90px;}
.bottom_nav .home img {width: 100%; height: 100%; display: block; object-fit: contain;}




/* -------- 푸터 -------- */
footer {width: 100%; padding: 30px 20px 120px; background-color: #444;}
footer .ft_logo {width: 100px; margin-bottom: 20px;}
footer .ft_logo img {width: 100%; height: 100%; object-fit: contain; display: block;}
footer .ft_info {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%;}
footer .ft_info dl {display: flex; align-items: flex-start; gap: 15px;}
.ft_info dt {font-size: 14px; color: #999;}
.ft_info dd {font-size: 14px; color: #bbb; line-height: 1.4;}
footer .copyright {font-size: 12px; margin-top: 30px; color: #ffffff40;}



@media screen and (max-width: 350px) {
    footer .ft_info {gap: 12px;}
    footer .ft_info dl {flex-direction: column; align-items: flex-start; gap: 5px;}
}