@charset "utf-8";
/* 전체 레이아웃 */
.wrapper {position:relative; left: 0; width:100%; height:auto; min-height:100vh; -webkit-overflow-scrolling:touch; transition:all .3s;animation: show_body .75s forwards; opacity:0;}
.wrapper.mv_right {left: var(--moving);}
.wrapper.mv_left {}

@media screen and (max-width: 600px){
	.wrapper.mv_left {left: calc(0px - var(--moving));}
}

/* header */
.wrapper header {position:fixed; top:0; left:0; width:100%; height:calc(env(safe-area-inset-top) + var(--tm_size)); padding-top:env(safe-area-inset-top);  z-index:31;  background:var(--tm-color); overflow:hidden;transform: translateY(0); transition: all .3s;}
.wrapper header.hid {transform: translateY(-100%);}
.wrapper header .hd_pos {position:absolute; top:calc(0px + env(safe-area-inset-top));left:0; right:0; margin:auto; /*max-width:var(--default_wd);*/ width:100%; height:var(--tm_size); }
.wrapper header button {position:absolute; top:0; left:0; width:var(--tm_size); border: 0; padding:0; margin: 0; cursor: pointer; background: transparent; transition:all .3s; z-index:1; }
.wrapper header button:after {content:""; display: block; padding-top:100%;}
.wrapper header button i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:var(--icon_size); color:var(--mode_default);transition:all .3s;}
.wrapper header .icon_box {position:absolute; top:50%; right:0; transform: translateY(-50%); z-index:1; height:var(--tm_icon); white-space:nowrap; font-size:0;}
.wrapper header .icon_box .kind {display:inline-block; vertical-align:top;width:var(--tm_icon);height:var(--tm_icon); position:relative; cursor:pointer;}
.wrapper header .icon_box .kind i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:var(--icon_size_sm); font-variation-settings: 'wght' 300; color:var(--mode_default);transition:all .3s;}
.wrapper header .icon_box .kind.show i {font-variation-settings: 'FILL' 1, 'wght' 250;}
.wrapper header .icon_box .kind count {position:absolute; top:5px; left:50%; transform:translateX(-50%); background:red; width:5px; height:5px; border-radius:100%; font-size:0;}

.wrapper header .icon_box .kind.hid count {opacity: 0;}
.wrapper header .icon_box .kind.show count {opacity: 1;}

.wrapper header .icon_box .kind.mode_btn i {color:var(--mode_icon);}
.wrapper header .icon_box .kind.mode_btn span {display:none;}

.wrapper header .icon_box .kind.no i {}
.wrapper header .icon_box .kind.ok i {color:#005be7 !important;font-variation-settings: 'FILL' 1, 'wght' 250;}
.wrapper header .icon_box .kind.set i {font-variation-settings: 'FILL' 1, 'wght' 250;}

.wrapper header .icon_box .kind.no:after,
.wrapper header .icon_box .kind.trk_record.on:after {content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%); line-height:1; background:red; padding:3px; font-size:8px; color:#fff; border-radius:3px;}

.wrapper header .icon_box .kind.no:after {content:"미설정";}

.wrapper header .icon_box .kind.trk_record  {}
.wrapper header .icon_box .kind.trk_record.on  {}
.wrapper header .icon_box .kind.trk_record.on:after {content:"기록중";}


.wrapper header .icon_box .kind.trk_record.on i {animation: recBlink 1.5s infinite; color:red;}
.wrapper header .icon_box .kind a {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; font-size:0;}
/* footer */
footer {position:fixed; bottom:0; left:0; width:100%; padding-bottom: env(safe-area-inset-bottom);  z-index:31;  background:var(--bm-color); overflow:hidden; border-top: 1px solid var(--btm_line);-webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform;box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.0);}
footer nav {position:relative; margin:0 auto; max-width:var(--default_wd); width:100%; height:var(--bm_size); display: flex; font-size:0; padding:0; }
footer nav > li {flex: 1; position:relative;}
footer nav > li.etc {display:none;}
footer nav > li.on {}
footer nav > li > a {position:absolute;top:0; left:0; width:100%; height:var(--bm_size); line-height:1; color:#ddd;}
footer nav > li > a > div {position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); }


footer nav > li > a > div i,
footer nav > li > a > div span {display:inline-block; width:100%; text-align:center; line-height:1;}
footer nav > li > a > div i {font-size:33px !important; color:var(--nav_off);font-variation-settings: 'wght' 200;}
footer nav > li > a > div span {font-size:11px; color:var(--nav_off); padding-top:5px;}
footer nav > li.on > a > div i {color:var(--nav_on); font-variation-settings: 'FILL' 1, 'wght' 250;}
footer nav > li.on > a > div span {color:var(--nav_on); font-weight:500;}
footer nav > li ul.sub_cate1 {display:none !important;}

@media screen and (max-width: 600px){
	.wrapper.mv_left header {left: calc(0px - var(--moving));}
	.wrapper header .icon_box {right:2px;}
	.wrapper.mv_left footer {left: calc(0px - var(--moving));}
	footer nav {padding:0 10px; }
	footer nav > li > a > div i {font-size:30px !important; }
	footer nav > li > a > div span {font-size:9px; font-weight:300;}
}


/* main */
.wrapper main {position:relative; }
.wrapper main .mn_pos {position:relative; left: 0; right: 0; margin: auto; max-width:var(--default_wd); width:100%; padding:calc(env(safe-area-inset-top) + var(--tm_size)) 0 calc(env(safe-area-inset-bottom) + var(--bm_size)) 0;}

/* slide용 /  ajax */
.pop_layer_wrap {position:fixed; top:0; left:0; right:0; width:100%;  height:100vh;  z-index:100; transform:translateX(100%); transition:all .3s; background:var(--slide_bg);}
.pop_layer_wrap.show {transform:translateX(0);}

html[dir="rtl"] .pop_layer_wrap {transform:translateX(-100%);}
html[dir="rtl"] .pop_layer_wrap.show {transform:translateX(0);}

.pop_layer_wrap .pl_pos {position:absolute; top:0; left:0; right:0; margin:auto; max-width:var(--default_wd); width:100%; height:100%; overscroll-behavior-y: contain; overflow: hidden;}
.pop_layer_wrap .pp_hdbx {position:absolute; top:0; left:0; z-index:1; text-align:center;width:100%; height:calc(env(safe-area-inset-top) + var(--tm_size)); }
.pop_layer_wrap .pp_hdbx .pp_box {position:absolute; bottom:0; left:0; width:100%; height:var(--tm_size); }
.pop_layer_wrap .pp_hdbx .leave {position:absolute; top:50%; right:25px; transform: translateY(-50%); line-height: 1; color:var(--default_rev);font-size: 12px; z-index: 10; cursor: pointer; }
.pop_layer_wrap .pp_hdbx h3 {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:16px; color:var(--default_rev); line-height:1; font-weight: 600;}
.pop_layer_wrap .pp_hdbx .close_btn {position:absolute; top:0; inset-inline-start:0;  font-size:25px; width:var(--tm_size);height:var(--tm_size);z-index:1; cursor:pointer;}
.pop_layer_wrap .pp_hdbx .close_btn i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:var(--icon_size_back); color:var(--default_rev); line-height:1;font-variation-settings: 'wght' 200;}
.pop_layer_wrap .pp_hdbx .close_btn i:before {content:'arrow_back_ios'; display: none;}
.pop_layer_wrap .pp_hdbx .close_btn svg {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width: 12px; stroke:var(--default_rev); stroke-width: 5;}
html[dir="rtl"] .pop_layer_wrap .pp_hdbx .close_btn { transform: scaleX(-1); }

.pop_layer_wrap .pp_con {position:absolute; top:calc(env(safe-area-inset-top) + var(--tm_size)); left:0; width:100%; height:calc(100vh - calc(env(safe-area-inset-top) + var(--tm_size))); text-align:left; overscroll-behavior-y: contain;  padding: 0 0 env(safe-area-inset-bottom) 0;}
.pop_layer_wrap .pp_con {overflow-y:overlay;}
.pop_layer_wrap .pp_con:: {-ms-overflow-style: none;}
.pop_layer_wrap .pp_con::-webkit-scrollbar {background: transparent; width:3px; height:10px; border-radius:15px;}
.pop_layer_wrap .pp_con::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); border-radius:15px;  transition:all .3s;}
.pop_layer_wrap .pp_con:hover::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); transition:all .3s;}
.pop_layer_wrap .pp_con#addr_canvas {}
.pop_layer_wrap .pp_con#addr_canvas > div {max-width: 500px !important; width:100% !important; height:100% !important; position: relative; left: 0; right: 0; margin: auto !important;}




/* 내정보수정 탭 */
.info_tab_menu { max-width: 600px; margin: -15px auto 30px auto; display: flex; justify-content: center; padding: 0; position: sticky; top: 0; left: 0; background: var(--slide_bg); z-index: 10;}
.info_tab_menu li { flex: 1; text-align: center; padding: 12px 0; font-size: 13px; color: var(--default_color); font-weight: 500; cursor: pointer; transition: all 0.2s; border-bottom: 1px solid var(--sum_line); }
.info_tab_menu li.active { color: var(--tab_on); font-weight: 600; border-color: var(--tab_on); }

.info_panels_outer { overflow: hidden; width: 100%; transition: height 0.38s cubic-bezier(0.4,0,0.2,1); }
.info_panels_inner { display: flex; align-items: flex-start; width: 300%; will-change: transform; }
.if_kind { width: 33.3333%; flex-shrink: 0; box-sizing: border-box; padding: 0 5px; }
.if_kind form { padding-bottom: 20px; }

/**/
.page_hdbx {position:relative; z-index:10; padding:30px 15px 15px 15px;border-bottom:0px solid var(--chl_line);}
.page_hdbx.bd_none {border:0;}
.page_hdbx h2 {color: var(--default_rev); font-weight: 600; font-size:16px; letter-spacing:-0.05em;}
.page_hdbx h2 i {color: var(--default_rev); font-variation-settings:'FILL' 1,'wght' 300;  font-size:22px; display:inline-block; vertical-align:middle; margin-right:7px;}
.page_hdbx h2 span {color: var(--default_rev); font-size:10px; display:inline-block; vertical-align:middle; margin-left:7px; font-weight:500; opacity:0.7; letter-spacing:0;}
.page_hdbx p { font-size:11px; line-height:160%; color:var(--default_tdown); padding:5px 0 0 0; opacity: 0.6;}


/*.record_str_btn {display: none; position: fixed; bottom:calc(env(safe-area-inset-bottom) + var(--bm_size) + 10px); left: 50%; transform: translateX(-50%); width: calc(100% - 20px); max-width: 700px; background: rgba(0,0,0,0.85); border-radius: 10px; padding: 15px; z-index: 45; box-shadow: 0 4px 15px rgba(0,0,0,0.3);}*/

:root[user-theme="light"] {
	--rcm_bg: #f4f9ff;
}

:root[user-theme="dark"] {
	--rcm_bg: #00294d;


}
.record_str_btn {display: none; position: fixed; bottom:calc(env(safe-area-inset-bottom) + var(--bm_size) + 10px); left: 50%; transform: translateX(-50%); width: calc(100% - 20px); max-width: 700px;  text-align:center; z-index: 45;}

.record_str_btn .rsb_pos {position: absolute; bottom:0; right: 0; width: 100%;padding: 7px; z-index: 45;  font-size:0;background:var(--rcm_bg); border-radius:30px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.record_str_btn .in_info {font-size:0; position:relative; display:inline-block; vertical-align:middle; width:calc(100% - var(--rmc_bx_wd)); height:var(--rcm_ht);}
.record_str_btn .in_info .ii_pos {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; padding: 0 5px;}
.record_str_btn .in_info i,
.record_str_btn .in_info .st_cnt {display:inline-block; vertical-align:middle; line-height:1;}
.record_str_btn .in_info i {color: red; font-size: 25px; animation: recBlink 1.5s infinite;  width:40px;}
.record_str_btn .in_info i:before {content:'radio_button_checked';}

.record_str_btn .in_info .st_cnt {padding:0px 0 0px 5px; width:calc(100% - 40px); text-align:left;}
.record_str_btn .in_info .st_cnt .tt {display:inline-block; width:100%; font-size:10px; color:var(--default_rev); opacity:0.7; padding:0 0 5px 0;}
.record_str_btn .in_info .st_cnt .num {display:inline-block; width:100%; font-size:8px; color:var(--default_rev); }
.record_str_btn input {background: var(--rcd_btn) !important; color: var(--default_rev); border: none; padding: 5px 0px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;}
.record_str_btn.pause .in_info i {color: red; animation:none; }
.record_str_btn.pause .in_info i:before {content:'pause_circle';}
.rsb_pos .act_btn { vertical-align:middle; width:var(--rmc_bx_wd); height:var(--rcm_ht); position:relative; display:inline-block; }
.rsb_pos .float_btn_box { position:absolute; top:50%; left:0; transform:translateY(-50%);text-align:right;  width:100%; padding:0 10px;}
.rsb_pos .float_btn_box input { border-radius: 30px; padding: 5px 0; font-size: 10px; display:inline-block; vertical-align:middle; width:65px; height:30px; margin-left:3px; color:#fff;}
.rsb_pos .float_btn_box .pause_btn { background: #4d4d4d !important;}
.rsb_pos .float_btn_box .resume_btn { background: var(--df_frm_btn) !important;  font-size: 8px; letter-spacing: -0.05em;}
.rsb_pos .float_btn_box .stop_btn { background: #ff3b30 !important; }

/*
.record_str_btn .rsb_pos {position: absolute; bottom:0; right: 0; width: 60px;background: rgba(0,0,0,0.85); border-radius: 7px; padding: 7px; z-index: 45; box-shadow: 0 4px 15px rgba(0,0,0,0.3);}
.record_str_btn .in_info {font-size:0; position:relative; width:100%; padding-bottom:10px;}
.record_str_btn .in_info i,
.record_str_btn .in_info .st_cnt {display:inline-block; vertical-align:middle; width:100%; line-height:1;}
.record_str_btn .in_info i {color: red; font-size: 20px; animation: recBlink 1.5s infinite; }
.record_str_btn .in_info i:before {content:'radio_button_checked';}

.record_str_btn .in_info .st_cnt {padding:10px 0 0px 0;}
.record_str_btn .in_info .st_cnt .tt {display:inline-block; width:100%; font-size:10px; color:#fff; opacity:0.7; padding:0 0 5px 0;}
.record_str_btn .in_info .st_cnt .num {display:inline-block; width:100%; font-size:8px; color:#fff; }
.record_str_btn input {background: var(--rcd_btn) !important; color: #fff; border: none; padding: 5px 0px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;}
.record_str_btn.pause .in_info i {color: red; animation:none; }
.record_str_btn.pause .in_info i:before {content:'pause_circle';}
*/