@charset "utf-8";
/*
 * setting.css
 * 
 * CSS for HEMS App
 * 
 */


/*
 * Setting Menu
 * ================================================================================
 */
#setting_wrapper {
position:absolute;
left:0;
top:0;
z-index:1000;
}

/* 020 */
.open_020 {
position:absolute;
left:0;
top:0;
width:120px;
height:88px;
}
.close_020 {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
}
#sidemenu {
position:absolute;
left:0;
top:88px;
width:400px;
height:1008px;
/*background:#595959 url(../../images/020_sidemenu.png) no-repeat;*/
background:#fff;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-webkit-transform:translate3d(-400px,0px,0px);
-ms-transition-property: -ms-transform;
-ms-transition-duration: 0.3s;
-ms-transition-timing-function: linear;
-ms-transform:translate3d(-400px,0px,0px);
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: linear;
transform:translate3d(-400px,0px,0px);
}
#sidemenu.act {
-webkit-transform:translate3d(0px,0px,0px);
-ms-transform:translate3d(0px,0px,0px);
transform:translate3d(0px,0px,0px);
}
#sidemenu_slide {
width:400px;
height:1256px;
background:url(../../images/020_sidemenu.png) no-repeat;
}

#sidemenu_slide > .hit {
position:absolute;
left:0;
width:400px;
height:74px;
background:#fff url(../../images/020_sidemenu.png) no-repeat;
}
#sidemenu_slide > .open_021 {
top:185px;
background-position: 0 -185px;
}
#sidemenu_slide > .open_026 {
top:260px;
background-position: 0 -260px;
}
#sidemenu_slide > .open_025 {
top:335px;
background-position: 0 -335px;
}
#sidemenu_slide > .open_024 {
top:496px;
background-position: 0 -496px;
}


/* 021 */
#page_wrapper_021 {

}
#main_021 {
background:#efeff4;
}
#header_021 {
background:url(../../images/021_header.png) no-repeat;
}

.close_021 {
position:absolute;
left:0;
top:0;
width:200px;
height:88px;
}
.close_021.right {
left:460px;
}



#menu_021_wrapper {
position:absolute;
left:0;
top:0;
height:auto;
background:#efeff4;
height: 2061px !important;
}
.menu_021_item {
position:relative;
width: 640px;
}
#menu_021_item1 {
height: 313px;
background:url(../../images/021_menu_item1.png) no-repeat;
}
#menu_021_item2 {
height: 1748px;
background:url(../../images/021_menu_item2.png) no-repeat;
}
#menu_021_item2 {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
-webkit-transform:translate3d(0px,-100px,0px);
-ms-transition-property: -ms-transform;
-ms-transition-duration: 0.2s;
-ms-transition-timing-function: linear;
-ms-transform:translate3d(0px,-100px,0px);
transition-property: transform;
transition-duration: 0.2s;
transition-timing-function: linear;
transform:translate3d(0px,-100px,0px);
}
#menu_021_item2.act {
-webkit-transform:translate3d(0px,0px,0px);
-ms-transform:translate3d(0px,0px,0px);
transform:translate3d(0px,0px,0px);
}

.open_022 {
position:absolute;
left:0;
top:213px;
width:640px;
height:99px;
}
.open_022b {
position:absolute;
left:0;
top:270px;
width:640px;
height:87px;
}
.open_021_1 {
position:absolute;
left:0;
top:200px;
width:640px;
height:99px;
}
.open_021_2 {
position:absolute;
left:0;
top:1488px;
width:640px;
height:99px;
}




.switch_btn {
position:absolute;
width: 102px;
height:62px;
overflow:visible;
}
.switch_btn > .switch_btn_bg {
display:block;
position:absolute;
left:0;
top:0;
width: 102px;
height:62px;
border-radius:32px;
-webkit-transition-property: box-shadow;
-webkit-transition-duration: 0.1s;
-webkit-transition-timing-function: linear;
-ms-transition-property: box-shadow;
-ms-transition-duration: 0.1s;
-ms-transition-timing-function: linear;
transition-property: box-shadow;
transition-duration: 0.1s;
transition-timing-function: linear;
background: #fff;
box-shadow: 0px 0px 1px 2px #dbdbdb inset;
}
.switch_btn > .switch_btn_fg {
display:block;
box-sizing: content-box;
background-clip:content-box;
position:absolute;
left:2px;
top:2px;
width: 56px;
height:56px;
background: #fff;
border-radius:100%;
border:#dbdbdb solid 1px;
box-shadow: 0px 4px 8px rgba(0,0,0,0.3);

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 0.1s;
-webkit-transition-timing-function: linear;
-webkit-transform:translate3d(0, 0, 0);
-ms-transition-property: -ms-transform;
-ms-transition-duration: 0.1s;
-ms-transition-timing-function: linear;
-ms-transform:translate3d(0, 0, 0);
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: linear;
transform:translate3d(0, 0, 0);
}
.switch_btn.on > .switch_btn_bg {
box-shadow: 0px 0px 20px 30px #4bd763 inset;
}
.switch_btn.on > .switch_btn_fg {
border:#3eb051 solid 1px;
-webkit-transform:translate3d(40px, 0, 0);
-ms-transform:translate3d(40px, 0, 0);
transform:translate3d(40px, 0, 0);
}
#switch_btn {
left:502px;
top:130px;
}
#switch_btn2 {
left:502px;
top:19px;
}



#popup_022 {
width:640px;
height:1096px;
background:url(../../images/022_popup.png) no-repeat;
}
.close_022 {
position:absolute;
left:20px;
top:976px;
width:600px;
height:100px;
}

#popup_022b {
width:640px;
height:1096px;
background:url(../../images/022b_popup.png) no-repeat;
}
.close_022b {
position:absolute;
left:20px;
top:976px;
width:600px;
height:100px;
}





/* 021_1 */
#page_wrapper_021_1 {
background:url(../../images/021_1.png) no-repeat;
}
.close_021_1 {
position:absolute;
left:0;
top:0;
width:180px;
height:88px;
}

/* 021_2 */
#page_wrapper_021_2 {
background:url(../../images/021_2.png) no-repeat;
}
.close_021_2 {
position:absolute;
left:0;
top:0;
width:180px;
height:88px;
}

/* 021_3 */
#page_wrapper_021_3 {
background:url(../../images/021_3.png) no-repeat;
}
.close_021_3 {
position:absolute;
left:0;
top:0;
width:180px;
height:88px;
}


/* 024 */
#page_wrapper_024 {

}
#main_024 {
background:#efeff4;
}
#header_024 {
background:url(../../images/024_header.png) no-repeat;
}
.close_024 {
position:absolute;
left:0;
top:0;
width:100px;
height:88px;
}
#slide_024 {
height: 2000px !important;
background:url(../../images/024_main.png) no-repeat;
}


/* 024_1 */
#page_wrapper_024_1 {

}
#main_024_1 {
background:#efeff4;
}
#header_024_1 {
background:url(../../images/024_1_header.png) no-repeat;
}
.open_024_1 {
position:absolute;
left:0;
top:0;
width:640px;
height:87px;
}
.close_024_1 {
position:absolute;
left:0;
top:0;
width:200px;
height:88px;
}
#slide_024_1 {
height: 4818px !important;
background:url(../../images/024_1_main.png) no-repeat;
}


/* 025 */
#page_wrapper_025 {

}
#main_025 {
background:url(../../images/025_main.png) no-repeat;
}
#header_025 {
background:url(../../images/025_header.png) no-repeat;
}
#main_025_1 {
background:url(../../images/025_1_main.png) no-repeat;
}
/*#main_025_1.act {
background:url(../../images/025_1_main.png) no-repeat;
}*/
.close_025 {
position:absolute;
left:0;
top:0;
width:100px;
height:88px;
}
.open_025_1 {
position:absolute;
left:0;
top:334px;
width:640px;
height:86px;
}


/* 026 */
#page_wrapper_026 {

}
#main_026 {
background:url(../../images/026_main.png) no-repeat;
}
#header_026 {
background:url(../../images/026_header.png) no-repeat;
}
.close_026 {
position:absolute;
left:0;
top:0;
width:100px;
height:88px;
}


/* 027 */
#page_wrapper_027 {
background:url(../../images/027.png) no-repeat;
}
.close_027 {
position:absolute;
left:0;
top:0;
width:180px;
height:88px;
}
.open_027_1 {
position:absolute;
left:0;
top:184px;
width:640px;
height:86px;
}


/* 027_1 */
#page_wrapper_027_1 {
background:url(../../images/027_1.png) no-repeat;
}
.close_027_1 {
position:absolute;
left:0;
top:0;
width:100px;
height:88px;
}


/* 028 */
#page_wrapper_028 {
background:url(../../images/028.png) no-repeat;
}
.close_028 {
position:absolute;
left:0;
top:0;
width:180px;
height:88px;
}


/* 029 */
#page_wrapper_029 {
background:url(../../images/029.png) no-repeat;
}
.close_029 {
position:absolute;
left:0;
top:0;
width:180px;
height:88px;
}