@charset "utf-8";
/* 공통 */
@import url(font.css);
@import url(template.css);

#wrapper{
	background:url("/images/bg_g01.jpg") repeat center 0;
}
.app_div{
	max-width:600px;
	background:linear-gradient(138deg,#f7f7f7,#ececec);
	min-height: 100vh;
    margin: auto;
	position:relative;
	overflow: hidden;
}

/*------------------------------------
  header
------------------------------------*/
header {
    width: 100%;
	max-width: 600px;
}
#logo {
}
.main_con{
	padding-top:30px;
	padding-bottom:30px;
}

/*------------------------------------
  footer
------------------------------------*/
#footer {
    padding: 4rem 0 8rem;
    color: #fff;
    background: #363636;
    font-weight: 300;
    clear: both;
}
#footer ul > li {
    display: inline-block;
}
#footer ul > li.line::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 0.6em;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 0.5rem 0.1rem 0.9rem;
}
#footer a {
    color: #fff;
}
#footer address strong {
    font-size: 1.2rem;
}
#footer address span {
    padding-right: 20px;
    display: inline-block;
	color:rgba(255,255,255,0.7);
	letter-spacing:-0.03rem;
}
#footer cite {
	letter-spacing:-0.01rem;
	color:rgba(255,255,255,0.5);
	font-family: 'Play';
    font-size: 0.9rem;
}
/*------------------------------------
  nav
------------------------------------*/
.nav_bottom{
	position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 10;
    background-color: rgba(0,0,0,0.85);
	max-width: 600px;
	border-radius:15px 15px 0 0;
}
.nav_bottom .menu_st{
	position:relative;
	color: rgba(255,255,255,0.7);
    font-weight: 500;
    font-family: 'Play';
    font-size: 1rem;
    letter-spacing: -0.01rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
	padding:1.5rem 0;
}
.nav_bottom .menu_st:after{
	display: block;
    content: '';
    background: rgb(255 255 255 / 26%);
    height: 1.3rem;
    width: 1px;
    position: absolute;
    right: -15px;
    top: 0;
}
.nav_bottom .menu_st.end:after{
	display: none;
}
.nav_bottom .menu_st.on, .nav_bottom .menu_st:hover{
	color:rgba(255,255,255,1);
}

.nav_bottom .menu_st .material-symbols-outlined{
    font-size: 1.6rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0;
	padding-right:0.2rem;
}
/* 메뉴리스트 공통 */
.me_border_top{
	border-top:1px solid rgba(0,0,0,0.06);
	padding-top:1.5rem;
}
.me_border{
	border-bottom:1px solid rgba(0,0,0,0.06);
	margin-bottom:1.5rem;
	padding-bottom:1.5rem;
}
.me_list_st01 .me_title span{
	font-size:1.05rem;
	border-bottom:1px solid #000;
}
.me_list_con dl{
	position:relative;
	margin:1rem 0;
}
.me_list_con dt{
	font-size:1.1rem;
	font-weight:600;
}
.me_list_con dd.icon{
	
}
.me_list_con dl:hover dd.icon .material-symbols-outlined{
	color:rgba(255,255,255,1);
	background:rgba(0,0,0,0.7);
}
.me_list_con dd.icon .material-symbols-outlined {
	color:rgba(0,0,0,0.6);
	background:rgba(0,0,0,0.05);
	border-radius:50%;
	width:2.4rem;
	height:2.4rem;
	display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
	align-items:center;
    font-weight: 600;
	margin-bottom: 0rem;
    font-size: 1.5rem;
    font-variation-settings:'FILL' 0, 'wght' 700, 'GRAD' 200;
}
.me_list_con dd.font_s .material-symbols-outlined {
    font-size: 1.2rem !important;
}
/* 라인공통 */
.line_border_top{
	border-top:1px solid rgba(0,0,0,0.06);
	padding-top:2rem;
}
.line_border{
	border-bottom:1px solid rgba(0,0,0,0.06);
	margin-bottom:2.2rem;
	padding-bottom:2.2rem;
}
/* MAIN -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.mheader_div{
	background:url("/images/top_bg.jpg") no-repeat center 0%;
	background-size: cover;
	border-radius:0 0 40px 40px;
}
.mheader_div .txt01{
	color:rgba(0,0,0,0.4);
	font-weight:500;
	font-size:1.1rem;
}
.m_search_01 .txt01 span{
	color:#000;
	border-bottom:1px solid #000;
	font-size: 1.2rem;
    font-weight: 600;
}
.m_search_01 .txt02{
	color:#757575;
	font-size: 1.05rem;
}

/* 기기리스트 */
.bl_list_all .list_t{
	border-radius:20px;
	background:#fff;
	padding:1rem;
	box-shadow: 10px 10px 15px rgb(0 0 0 / 3%);
	position:relative;
	margin:1rem 0;
}
.bl_list_all .list_t .left{
	width: calc( 100% - 3rem );
}
.bl_list_all .list_t .left .txt01{
	letter-spacing:-0.02rem;
	font-size:1.1rem;
	font-weight:500;
	width:78%;
}
.bl_list_all .list_t .pic{
	border-radius:20px;
	overflow:hidden;
	width:28%;
	max-width:82px;
}
.list_t .right .material-symbols-outlined {
    color: rgba(0,0,0,0.6);
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    margin-bottom: 0rem;
    font-size: 1.5rem;
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 200;
}
.bl_bt{
	position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 10;
    background-color: rgba(0,0,0,0.8);
    max-width: 600px;
    border-radius: 40px 40px 0 0;
}
.bl_bt .bl_co{
	color:#fff;
	padding:0.5rem 0;
}
.bt_st_gray .button_b {
	background: linear-gradient(138deg,#07b5b0,#3c7fbb);
    color: #fff;
    border-radius:  40px 40px 0 0;
    padding: 1.5rem 2.8rem;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    width: 100%;
    font-size: 1.3rem;
}
.button_b .material-symbols-outlined {
    font-size: 1.6rem;
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0;
    vertical-align: middle;
}
.button_a .material-symbols-outlined {
    font-size: 1.6rem;
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0;
    vertical-align: middle;
}

/* 기기상세페이지 ---------------------------------------------------------------------------------------------------------------------------------------------------------*/
.t_name .sp02 {
    font-size: 1.25rem;
    color: #000;
    font-weight: 700;
	letter-spacing:-0.04rem;
}
.header_div .back .material-symbols-outlined {
    font-size: 1.5rem;
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 200;
}
.header_div .name_e {
	background:#fff;
	border-radius:30px;
	padding:0.5rem 0.5rem 0.5rem 0;
	font-size:15px;
	min-width:94px;
	text-align:center;
}
.header_div .name_e .material-symbols-outlined {
	font-size:19px;
}
.c_detail_middle{
	background:#494949;
	padding:2rem 1.2rem;
}
.de_st01{
	max-width:420px;
	margin:0 auto;
	text-align:center;
}
.de_bt_st01 .bt_hand_01{
	background:linear-gradient(138deg,#547be3,#3261dc);
    border-radius: 20px;
	min-height:2rem;
	padding:0.2rem;
	max-width:5rem;
	margin:0 auto;
	min-width: 4rem;
}
.de_bt_st01 .bt_hand_02{
	background:#6d6d6d;
    border-radius: 20px;
	min-height:2rem;
	padding:0.2rem;
	max-width:5rem;
	margin:0 auto;
	min-width: 4rem;
}
.de_bt_st01 .one_w{
	background:#eee;
    border-radius:  20px;
	height:1.8rem;
	width:1.8rem;
}
.de_bt_st01 .txt01{
	color:#fff;
	font-weight:500;
}
.de_st02{
	max-width:420px;
	margin:0 auto;
	text-align:center;
	color:#fff;
	font-weight:700;
	font-size:1.2rem;
	letter-spacing:0;
	position:relative;
}
.de_st02 .material-symbols-outlined {
    font-size: 1.6rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 200;
}
.de_st02 .bt_hand_01 {
	width:100%;
	position:relative;
}
.de_st02 .bt_hand_01 .inner{
	position:relative;
	background:#6d6d6d;
    border-radius: 20px;
	width:100%;
	overflow:hidden;
	height:1.4rem;
}
.de_st02 .bar{
	position:absolute;
	background:linear-gradient(138deg,#547be3,#3261dc);
	height:100%;
	z-index:0;
	left:0;
}
.de_st02 .one_w{
	position:absolute;
	background:#eee;
    border-radius: 20px;
	height:1.8rem;
	width:1.8rem;
	z-index:1;
	top:-0.2rem;
	margin-left:-0.9rem;
}
.ui-slider .ui-slider-handle{
    position:absolute;
	background:#eee;
    border-radius: 20px;
	height:1.8rem;
	width:1.8rem;
	z-index:1;
	top:-0.2rem;
	margin-left:-0.9rem;
}
.light_list_all .list_t {
    border-radius: 20px;
    background: #fff;
    padding: 1rem;
    box-shadow: 10px 10px 15px rgb(0 0 0 / 3%);
    position: relative;
    margin: 1rem 0;
}
.light_list_all .list_t .txt04 {
    color: #c1c1c1;
	font-weight:500;
	letter-spacing:0.15rem;
}
.light_list_all .list_t .txt04 .on {
    color: #658cf3;
}
.light_list_all .left .txt01 .sp02{
    color: rgba(0,0,0,0.9);
    font-weight: 500;
    font-size: 1.6rem;
}
.light_list_all .left .material-symbols-outlined {
    color: rgba(0,0,0,0.9);
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    margin-bottom: 0rem;
    font-size: 1.3rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 100;
}
.list_t.inactive .left, .list_t.inactive .right{
	opacity: 0.4;
}
@media (max-width: 400px) {
	.light_list_all .list_t .ala_t {
		display: block !important;
	}
}

/* 딤팝업 --------------------------------------------------------------------------------------*/
.modal-content {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.8rem;
}
.modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #eee;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}
.modal-header .txt01 {
    font-weight: 500;
    font-size: 1.2rem;
}
.modal-header .close .material-symbols-outlined {
    font-size: 1.6rem;
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 200;
    color: #000;
}
#sec_modal .name_e {
    background-color: #eee;
    border-color: #eee;
	display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    padding: 0.875rem 0.75rem;
    font-size: 1.2rem;
    line-height: 1.5;
    border-radius: 0.85rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100%;
}
.btn {
    padding: 0.875rem 0.75rem;
    font-size: 1.2rem;
    border-radius: 0.85rem;
}
.name_e .c_search_in {
    border: none;
    background-color: transparent;
    width: 100%;
}
input:focus {outline:0px solid #d50000;}




/* 설정------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.header_div .material-symbols-outlined {
    font-size: 1.8rem;
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0;
}
.setting_top{
	font-weight:600;
	color:#000;
	
	overflow-y:hidden;
}
.setting_top .time01{
    font-size: 1.5rem;
}
.setting_top .time02{
    font-size: 2.3rem;
}
.setting_middle{
	border-radius: 40px 40px 0 0;
	background:#fff;
}
.week_st .txt01{
	color:#e50909;
}
.week_st .txt03{
	color:#000fd9;
}
.week_st div span{
	align-items: center !important;
	display: flex !important;
	justify-content: center !important;
}
.week_st div span.on{
	width:36px;
	height:36px;
	border-radius: 40px;
	border:1px solid #5079e2;
	display:block;
	color:#5079e2;
	font-weight:600;
	padding-right:2px;
}
.se_title{
	font-weight:600;
    font-size: 1.2rem;
}
.li_time div span.on{
	width:60px;
	height:36px;
	border-radius: 20px;
	border:1px solid #5079e2;
	display:block;
	color:#5079e2;
	font-weight:600;
	padding-right:2px;
	align-items: center !important;
	display: flex !important;
	justify-content: center !important;
}
.border-to01{
	border-top:1px solid #e9e9e9;
}
.border-bo01{
	border-bottom:1px solid #e9e9e9;
}
.li_main div span.on{
	height:36px;
	border-radius: 20px;
	border:1px solid #5079e2;
	display:block;
	color:#5079e2;
	font-weight:600;
	padding:0 10px;
	align-items: center !important;
	display: flex !important;
	justify-content: center !important;
}
.set_bt {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 10;
    max-width: 600px;
    border-radius: 40px 40px 0 0;
}
.bt_st_gray .button_a {
	background:#eee;
    color: #000;
    padding: 1.5rem 2.8rem;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    width: 100%;
    font-size: 1.3rem;
}
.setting_middle .de_bt_st01 .bt_hand_02 {
    background: #cbcbcb;
}
.setting_middle .de_bt_st01 .one_w{
	background:#fff;
}
.setting_middle .de_st02 {
    max-width: 100%;
    color: #537ae1;
}