@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

body {width: 100%; height: 100vh;}
#warp { min-width: 320px; width: 100%; height: 100vh; left: 0; font-family: "Noto Sans KR","Apple SD Gothic Neo", "Malgun Gothic", sans-serif;  position: relative;}

/*팝업영역*/
#pop_add, #pop_dt {width: 100%; height: 100vh; position: absolute; top:0; left:0; background-color: rgba(0, 0, 0, 0.5);  z-index: 300; display: none; }
#pop_add .pop_box, #pop_dt .pop_box {width: 90%; height: auto; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden; border-radius: 5px; }
#pop_add .pop_box .pop_header, #pop_dt .pop_box .pop_header { width: 100%; height: 50px; position: relative; background-color: #fc8a75; text-align: left;}
#pop_add .pop_box .pop_header h2, #pop_dt .pop_box .pop_header h2 {width:90%; height: 20px; line-height: 20px; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: left; }
#pop_add .pop_box .pop_header .btn-close, #pop_dt .pop_box .pop_header .btn-close {
    width: 20px;
    height: 20px;
    border-style: none;
    background-color: #fc8a75;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(0%,-50%);
    background-image: url(/Resources/img/iconClose@3x.png);
    background-repeat: no-repeat;
    text-indent: -9999px;
    background-size: 20px;
}
#pop_add .pop_box .pop_content, #pop_dt .pop_box .pop_content {width:90%; margin: 0 auto; padding: 5px 0 20px;}
#pop_add .pop_box .pop_content > p, #pop_dt .pop_box .pop_content > p {width: 100%; font-size: 0.9rem; line-height: 3rem; color: #666; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow: hidden}
#pop_add .pop_box .pop_content .btn-wrap, #pop_dt .pop_box .pop_content .btn-wrap {width: 100%; height: auto; background-color:#7c7d92; }
#pop_add .pop_box .pop_content .btn-wrap > button, #pop_dt .pop_box .pop_content .btn-wrap > button {width: 100%; border-style: none; background: none; line-height: 2.6rem; font-size: 0.9rem; color: #fff; font-weight: bold;}



/*고정헤더영역*/
header { width: 100%; height: 45px; position: relative; background-color: #fc8a75;}
header nav{	position: fixed; width: 100%; height: 45px;  z-index: 100;  left: 50%; top: 0; transform: translate(-50%,0);  background-color: #fc8a75;}
header nav .nav_wrap {width: 90%; height: 100%; position: fixed; left: 50%; top: 0; transform: translate(-50%,0); }
header nav .nav_wrap .menu_left {width:100%; font-size: 1rem; line-height: 45px;  color: #fff; position: absolute; left: 0; top: 0; text-align: left; }
header nav .nav_wrap .btn-setting {
    width: 22px;
    height: 22px;
    border-style: none;
    background-color: #fc8a75;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
    background-image: url(/Resources/img/iconSetting@3x.png);
    background-repeat: no-repeat;
    background-size: 22px;
    text-indent: -9999px;
}

header nav .nav_wrap > .menu_right {width:90%; font-size: 1.1rem; line-height: 45px; color: #fff; position: absolute; right: 0; top: 0; text-align: left; }
header nav .nav_wrap .btn-back {
    width: 22px;
    height: 22px;
    border-style: none;
    background-color: #fc8a75;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
    background-image: url(/Resources/img/iconBack@3x.png);
    background-repeat: no-repeat;
    background-size: 22px;
    text-indent: -9999px;
}


/*베너영역*/
#banner {width: 100%; height: auto; text-align: center;}
#banner .bxslider1 {width: 100%; height: auto;}
#banner .bxslider1 li a > img {width: 100%; height: auto;}

/*탭메뉴*/
#map_wrap { width: 100%; height: 100vh; position: relative; background-color: #fc8a75; overflow: hidden;}
.tab_menu {width: 200px; height: auto; padding: 5px 4px; background-color: #fff; border-radius: 10px; position: absolute; left: 15px; top: 10px; z-index: 200} 
.tab_menu .menu { width: 95%; margin: 0 auto;}
.tab_menu .menu > li {display: inline; float: left; width: 25%; box-sizing: border-box; font-size: 0.4rem; text-align: center; letter-spacing: -1px;}
.tab_menu .menu > li img {width: 45%; height: auto; margin-bottom: -4px;}

.tab_menu .menu li .sub_menu { background: #fff; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:80%; z-index:200; display:none;  }
.tab_menu .menu li:hover .sub_menu { display:block;}
.tab_menu .menu li:hover .sub_menu > li {width: 100%; padding-left: 15px; font-size: 0.9rem; line-height: 2.6rem; text-align: left;}


.add_point {width: 90%; height: auto; background-color: rgba(36, 39, 66, 0.8); position: absolute; left: 50%; bottom: 20px; transform: translate(-50%,0); }
.add_point > button {width: 100%; border-style: none; background: none; line-height: 2.6rem; font-size: 0.9rem; color: #fff; font-weight: bold;}


/*세팅메뉴*/
#content {width: 100%; height: auto; background-color: #fff; border-bottom: 1px solid #e8e8e8;}
#content .setting_ul {width: 90%; margin: 0 auto;  }
#content .setting_ul > li {width: 100%; display: block; padding: 10px 0; font-size: 0.9rem; line-height: 1.8rem; border-bottom: 1px solid #e8e8e8;  background-image: url(/Resources/img/iconMore@3x.png); background-repeat: no-repeat; background-size: 20px; background-position-x: 100%; background-position-y: 50%;}
#content .setting_ul > li:last-child {border-style: none;}


/*공지사항*/
#content .info_ul, #content .infoDetail_ul {
    width: 90%;
    margin: 0 auto;
    height: calc(100vh - 45px);
}
#content .info_ul > li {width: 100%; display: block; padding: 5px 0; border-bottom: 1px solid #e8e8e8;  background-image: url(/Resources/img/iconMore@3x.png); background-repeat: no-repeat; background-size: 20px; background-position-x: 100%; background-position-y: 50%;}
#content .info_ul > li b, #content .infoDetail_ul > li b {font-size: 0.8rem; line-height: 1rem; color: #f9765d; }
#content .info_ul > li h3, #content .infoDetail_ul > li h3 {font-size: 0.9rem; line-height: 1.5rem; color: #444444;}
#content .info_ul > li p, #content .infoDetail_ul > li p {font-size: 0.6rem; color: #d0d0d0; }
#content .info_ul > li:last-child {border-style: none;}


/*공지사항 상세*/
#content .infoDetail_ul > li {width: 100%; display: block; padding: 5px 0; border-bottom: 1px solid #e8e8e8; }
#info_detail {width: 90%; margin: 0 auto; padding: 10px 0; background-color: #fff;}
#info_detail > p {width: 100%; overflow: scroll; font-size: 0.9rem; line-height: 1.2rem; }



/*알림설정*/
#content .bell_ul {width: 90%; margin: 0 auto;  }
#content .bell_ul > li {width: 100%; display: block; overflow: hidden; padding: 10px 0; font-size: 0.9rem; line-height: 1.8rem; border-bottom: 1px solid #e8e8e8; }
#content .bell_ul > li > .left {width: 80%; float: left;  box-sizing: border-box;}
#content .bell_ul > li > .left > b { font-size: 0.9rem; line-height: 1.2rem; color: #444;}
#content .bell_ul > li > .left > p { font-size: 0.8rem; line-height: 1rem; }

#content .bell_ul > li > .right {width: 20%; float: right; box-sizing: border-box;}
#content .bell_ul > li > .right .button_wrap { width: 55px; height: 30px; margin: 25% 0; clear: both; float: right;}
.button_wrap .switch {width: 100%; height: 100%; display: inline-block;}
.button_wrap .switch input {display: none;}
.button_wrap .switch small {display: inline-block; width: 55px; height: 30px; background: #e8e8e8; border-radius: 30px; position: relative; cursor: pointer;}
.button_wrap .switch small:after {content: "X"; position: absolute; color: #fff; font-size: 0.9rem; font-weight: 600; width: 100%; left: 0; text-align: right; padding: 0 10px; box-sizing: border-box; line-height: 1.8rem;}
.button_wrap .switch small:before {content: ""; position: absolute; width: 43%; height: 80%; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: .3s; box-shadow: -3px 0 3px rgba(0,0,0,0.1);}
.button_wrap .switch input:checked ~ small { background: #fc8a75; transition: .3s;}
.button_wrap .switch input:checked ~ small:before { transform: translate(25px, 0px); transition: .3s;}
.button_wrap .switch input:checked ~ small:after { content: "O"; text-align: left;}

 #content .bell_ul > li:last-child {border-style: none;}


/*도움말*/

#content .help_ul {width: 90%; height: calc(100vh - 45px); margin: 0 auto;}
#content .help_ul > li {width: 100%; display: block; padding: 10px 0; font-size: 0.9rem; line-height: 1.8rem; border-bottom: 1px solid #e8e8e8;  background-image: url(/Resources/img/iconMore@3x.png); background-repeat: no-repeat; background-size: 20px; background-position-x: 100%; background-position-y: 50%;}


/*도움말 상세*/

#content .helpDetail_ul {width: 90%; margin: 0 auto; }
#content .helpDetail_ul > li {width: 100%; display: block; padding: 10px 0; font-size: 0.9rem; font-weight: bold; line-height: 1.8rem; border-bottom: 1px solid #e8e8e8;  }
#help_detail {width: 90%; margin: 0 auto; padding: 10px 0; background-color: #fff;}
#help_detail > p {width: 100%; overflow: scroll; font-size: 0.9rem; line-height: 1.2rem; }

/* 거리 */
#content .distance_ul {
    width: 90%;
    margin: 0 auto;
}

#content .distance_ul li .left {
    width: 80%;
    float: left;
    box-sizing: border-box;
}

#content .distance_ul li .right {
    width: 20%;
    float: right;
    box-sizing: border-box;
    text-align: center;
}

#content .distance_ul > li {
    width: 100%;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #e8e8e8;
    overflow: hidden;
}

#content .distance_ul > li .left h3 {
    width: 100%;
    font-size: 1.0rem;
    line-height: 1.5rem;
    color: #444444;
    font-weight: 500;
}

#content .distance_ul > li .left p {
    width: 100%;
    font-size: 0.8rem;
    color: #bfbfbf;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
}

#content .distance_ul > li .right b {
    width: 100%;
    font-size: 1.0rem;
    line-height: 2.5rem;
    color: #f00;
    font-weight: 400;
}

#content .distance_ul > li:last-child {
    border-style: none;
}