@charset "UTF-8";


/* ================ common ================ */
*{margin:0; padding:0; box-sizing: border-box;}
html{overflow:hidden; font-size:10px; font-weight: normal;}
html,body{width:100%; height:100%}
body {font-family: 'NotoSansCJKkr-R',맑은고딕,Arial !important;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, legend{margin: 0px; padding:0px; -webkit-margin:0px; -webkit-padding:0px;}
ol, ul, li {list-style : none;}
a, span, p, div{word-break:keep-all; color:inherit;}
a{text-decoration:none; cursor: pointer;}
a:hover, a:active, a:focus{text-decoration:none; -moz-outline-style: none; outline: none; outline: 0}

.btn_type{display:inline-flex;  align-items:center; justify-content: center; cursor: pointer; outline: none; border: none; }
.hidden{visibility: hidden !important; display: none !important;}
select::-ms-expand {display:none}
*,
*:focus,
*:active,
.btn_type:active,
.btn_type:focus{  -moz-outline-style: none; outline:none; outline: 0;}

input{border:none; outline: none;}
input[type="checkbox"]{width: 18rem; height: 18rem; }
.main-content.login-bg{width: 100%; height: 100%; overflow: hidden;}
.login-wrapper{position:relative; width: 100%; min-width: 280px; height: 100%; background: #e6f9ff; display: flex;  flex-direction:column; align-items: center; justify-content: center; overflow: hidden;}
.login-container{ width: 100%; padding: 1rem 0; display:inline-block; overflow: hidden;  }
.login-container .wave{display:none; position:fixed; top:0; right:0; width:1400px; height: 100%; min-height: 640px; 
-webkit-transform: scale(0.8) translate(0, 0); -moz-transform: scale(0.8) translate(0, 0); -ms-transform: scale(0.8) translate(0, 0); -o-transform: scale(0.8) translate(0, 0); transform: scale(0.8) translate(0, 0); 
-webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom;
background-image: url("../images/mobile/bg_shadow2.png"); background-position: right bottom; background-repeat:no-repeat; z-index: 1;}
.login-container .bg{display:flex; flex-direction:column; justify-content: space-between; width:50rem; height: 70rem; margin:0 auto; padding:0; border-radius: 15px; background-color:#ffffff; box-shadow:8px 8px 10px 0px rgba(0, 0, 0, .1), -3px -3px 10px 0px rgba(0, 0, 0, .1); -webkit-box-shadow:8px 8px 10px 0px rgba(0, 0, 0, .1), -3px -3px 10px 0px rgba(0, 0, 0, .1);}
.login-container .bg{min-width: 320px; background-image: url("../images/mobile/bg_shadow.png"); background-repeat:no-repeat; background-size:260%; background-position: center bottom; }
.login-container .copyright{display:inline-block; height:20px; width:100%; color:#2382cc; text-align: center; font-size: 1.2rem; z-index:3 }
.login-info{display:inline-block; width: calc(100% - 8rem); margin:3rem 4rem 0 4rem; z-index: 100}
.login-info li{width: 100%;  float:left;}
.login-info .top{margin-bottom: 4rem;}
.login-info .logo{display:inline-block; width: 100%; height: 4.4rem; margin-bottom: 1.2rem; background: url("../images/mobile/login_logo.png") no-repeat center; background-size: contain;}
.login-info .tit{width: 100%; color:#000000; font-size: 2.3rem; letter-spacing: 0; font-family: NotoSansCJKkr-B; font-weight: bold; text-align: center;}
.login-info .form > div{position: relative; display:inline-block; width: 100%; float:left; z-index: 101;}
.login-info .form > div:after{width: 1.8rem; height: 4rem; content:""; position:absolute; left:0; top:0;  background-size: contain; background-repeat: no-repeat; background-position: left center;}
.login-info .form > .id:after{top: -0.2rem; background-image: url("../images/mobile/login_form_id.png");}
.login-info .form > .pw:after{top: -0.4rem; background-image: url("../images/mobile/login_form_pw.png");}
.login-info .form input{width: 100%;  height: 4rem; padding-left:3rem; font-size: 1.6rem; font-family:arial; font-weight:bold; color:#000000; border-bottom:1px solid #d9d9d9;  margin: 0; float:left; background-color: transparent;}
.login-info .form input::placeholder{font-size: 1.4rem; letter-spacing: 0; font-family: NotoSansCJKkr-L;  font-weight:normal;  color:#cccccc;}
.login-info .form > .pw{margin:1.5rem 0 0 0}
.login-info .form .btn{margin-top: 2rem;}
.login-info .form .saveId {width: 100%; font-size: 1.2rem; margin-top: 1.2rem; color:#757575; font-family: NotoSansCJKkr-L; font-weight: bold}
.login-info .form .btn_login{width:100%; height: 4rem; font-size: 1.8rem; background-color: #00b8ec; font-family:arial; font-weight: bold; color:#ffffff; outline: none; border: none; border-radius: 3px; cursor: pointer;}
.login-info .f-btns{display: flex; justify-content: flex-end; margin:1rem 0 0 0; margin-top: -25px;}
.login-info .f-btns .btn_type{color: #666666; font-size: 1.3rem; padding: 0.5rem 0 0 0; margin:0 1rem; letter-spacing: -0.5px; /*text-decoration: underline;*/ text-underline-position: under; z-index: 101}
.login-info .f-btns .btn_type:last-child{margin:0 0 0 1rem}
.app-wrapper{position:relative; width: 100%; height: 100%; }
.app-wrapper:before{content:""; position: absolute; top:0; left:0; height: 5rem; display: inline-block; width: 100%; background-color: #ffffff; z-index: 1}
.app-head{position:relative; top:0; width: 100%; height: 5rem; max-width: 1180px; margin: 0 auto; padding:0; display: flex; flex-direction: row; justify-content: space-between; background-color: #ffffff; z-index: 2;}
.page-content{position: relative; width: 100%; height: calc(100% - 5rem); background-color:#ffffff; overflow-y:auto; z-index: 0}
.page-content:after{content:''; display:block; padding-bottom:3rem; }
.page-content.main{/*background-color:#f6f6f6;*/ padding-bottom:0;  }
.head-logo{display:inline-block; width: 8rem; height: 100%; background: url("../images/mobile/login_logo.png") no-repeat center; background-size: contain; }
.head-back{width:2rem; height:100%; }
.head-back .btn_back{width:100%; height:100%; background-size: 60%; background-image: url(../images/mobile/btn_back.png); background-position: left center; background-repeat: no-repeat;}
.head-title{width: calc(100% - 9rem); height: 100%; display:flex; justify-content:center; align-items:center; padding:0 0 0 3rem; font-size: 2.4rem; font-weight: bold; font-family:NotoSansCJKkr-B; }
.head-right .btn_notice{position: relative; display:inline-block; width:2.5rem; height:2.3rem; margin-top:1.3rem; background: url("../images/mobile/icon_notice.png") no-repeat center; background-size: contain; float:left;}
.head-right .btn_notice.new:after{content:""; display:inline-block; position:absolute; top: -4px;right: -4px; width: 1.5rem; height: 1.5rem; background: url("../images/mobile/icon_new.png") no-repeat center; background-size: contain; }
.head-right .btn_menuOpen{display:inline-block; width:2.5rem; height:100%; margin-left:2rem; background: url("../images/mobile/btn_menu_open.png") no-repeat center; background-size: 80%; float:left;}
.app-wrapper > input[type="checkbox"].btn_toggle{display: none;}
.app-wrapper > input[type="checkbox"].btn_toggle + .sidebar{position: absolute; width: 100%; height: 100%; left:0; top:0; overflow: hidden; z-index: -1;
-webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s;  -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s;  transition-delay: 0.3s; 
-webkit-transition: z-index 0.3s ease; -moz-transition: z-index 0.3s ease; -ms-transition: z-index 0.3s ease; -o-transition: z-index 0.3s ease; transition: z-index 0.3s ease;}
.app-wrapper > input[type="checkbox"].btn_toggle + .sidebar .overlay{position: absolute; left: 0; top:0; width: 100%; height: 100%; background-color:#000000; opacity:0; z-index: -1; 
-webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease;}
.app-wrapper > input[type="checkbox"].btn_toggle + .sidebar .sidebar-content{position:relative;  display:inline-flex; flex-direction:column; z-index: -1; width: 80%; height: 100%; border:1px solid #f2f2f2; border-right:none;  padding:1.5rem 0 0 0; background-color: #ffffff; border-top-left-radius: 20px; border-bottom-left-radius:20px; overflow: hidden;
-webkit-transform: translateX(100vw); -moz-transform: translateX(100vw); -ms-transform: translateX(100vw); -o-transform: translateX(100vw); transform: translateX(100vw);
-webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease;}
.app-wrapper > input[type="checkbox"].btn_toggle:checked + .sidebar{ z-index: 10; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; }
.app-wrapper > input[type="checkbox"].btn_toggle:checked + .sidebar .overlay{z-index: 2; opacity:0.4;}
.app-wrapper > input[type="checkbox"].btn_toggle:checked + .sidebar .sidebar-content{width: 80%; max-width: 400px; z-index: 3;
-webkit-transform:translateX(100vw) translateX(-400px); -moz-transform:translateX(100vw) translateX(-400px); -ms-transform:translateX(100vw) translateX(-400px); -o-transform:translateX(100vw) translateX(-400px); transform:translateX(100vw) translateX(-400px);}
/*  ****** 우측메뉴 ******  */
.sidebar-content .side-head{position:relative; display: flex; flex-direction: column; width: 100%; height:11.4rem; }
.sidebar-content .side-body{display:inline-block; width: 100%; height: calc(100% - 15.4rem); margin: 1rem 0; overflow-y:auto;}
.sidebar-content .side-bottom { width: 100%; height: 4rem; text-align: right; padding-top: 0.5rem; background-color: #f2f2f2}
.sidebar-content .side-head .btn_close{position: absolute; right:2rem; top:0; display: inline-block; width: 3rem; height: 3rem; float:right; cursor: pointer;}
.sidebar-content .side-head .btn_close:before{content:""; display: inline-block; position:absolute; top:0.75rem; left:0.75rem; width: 1.5rem; height: 1.5rem; background: url("../images/mobile/btn_close.png") no-repeat center; background-size:contain;}
.sidebar-content .side-t{width: 100%;  display:inline-flex; justify-content: space-between;   padding:0.9rem 20px 0 20px;}
.sidebar-content .userbox{width: calc(100% - 5rem); height: 7.7rem; padding:0.9rem 0 0 2rem; float:left;}
.sidebar-content .userbox > div{width: 100%; float:left;}
.sidebar-content .userName{position: relative;  padding-left:3.6rem	; }
.sidebar-content .userName:before{content:""; position:absolute; top:0; left:0; width: 2.5rem; height: 2.5rem; background: url("../images/mobile/icon_user.png") no-repeat center; background-size: contain;}
.sidebar-content .userName{height:2.5rem; line-height:2.5rem; color:#000000; font-size: 1.8rem;}
.sidebar-content .company{line-height: 1.8rem; padding-left: 3.6rem; color:#757575; font-size: 1.6rem;}
.sidebar-content .userBtns{display:flex; width: 100%; height: 3.7rem; padding: 0 2rem; background-color: #f2f2f2}
.sidebar-content .userBtns > div{position:relative; width: 100%; height: 100%; }
.sidebar-content .userBtns > div:after{content:""; position:absolute; display:inline-block; width: 1px; height: calc(100% - 2rem); top: 1rem; right: 0; background-color: #d9d9d9;}
.sidebar-content .userBtns > div:last-child:after{content:none;}
.sidebar-content .userBtns .btn_type{display:flex; width:80%; height:100%; margin:auto; text-align:center; color:#757575; font-size: 1.6rem; background-color: transparent;}
.side-body .memu_list{width:100%; display:flex; flex-direction:column; padding:3rem 0 3rem 5.6rem; float:left}
.side-body .memu_list li{display:inline-block; width:100%; min-height: 6rem; padding-top:1rem; }
.side-body .memu_list .btn_type{width:100%; height: 5rem; padding-bottom: 1.5rem; justify-content: flex-start; font-size: 2rem; color:#000000; border-bottom:2px solid #e5e5e5; font-family: 'NotoSansCJKkr-B',맑은고딕, Arial; float: left;}
.side-body .memu_list .sub-group{display:inline-flex; flex-direction:column;  width:100%; margin-top:0.7rem; float:left;}
.side-body .memu_list .sub-group li{width:100%; min-height:3.2rem; padding:0 2rem 0 0 ;  margin-top: 0.5rem;}
.side-body .memu_list .sub-group .btn_type{position:relative; height:3rem; line-height: 2rem; padding-bottom: 0rem; letter-spacing:-0.4px; font-size: 1.8rem; color:#757575; border:none; font-family: 'NotoSansCJKkr-R',맑은고딕, Arial;}
.side-body .memu_list .sub-group .btn_type:after{content:""; position:absolute; right:0; top:0.7rem; width:0.9rem; height:1.6rem; background: url("../images/mobile/icon_btnArrow.png") no-repeat center; background-size:contain;}
.side-bottom .btn_type{padding:0.5rem 2rem; color:#000000; background-color:transparent; font-size: 1.4rem; font-family: 'NotoSansCJKkr-B',맑은고딕, Arial;}
/* ****** 메인 ****** */
.main-cont{position:relative; width:100%; max-width: 1180px; margin: 0 auto; display:flex; flex-direction: column; height:47rem; padding: 0 8rem; overflow: hidden;}
.main-cont li{width:100%; /* border:1px solid red */}
.page-content .main-top{width: 100%; 
-webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); 
-webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; -ms-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; transition: transform 0.4s ease;}
.page-content .main-bg{-webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);
-webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; -ms-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; transition: transform 0.4s ease;}
.page-content .main-cont{-webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); 
-webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; -ms-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; transition: transform 0.4s ease;}
.page-content.fixtop .main-bg{position:fixed; 
-webkit-transform: translateY(-310px); -moz-transform: translateY(-310px); -ms-transform: translateY(-310px); -o-transform: translateY(-310px); transform: translateY(-310px); 
-webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; -ms-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; transition: transform 0.4s ease; z-index: 1}
.page-content.fixtop .main-cont{position:fixed; left: calc(50%); margin-left: -512px; z-index: 1;
-webkit-transform: translateY(-359px); -moz-transform: translateY(-359px); -ms-transform: translateY(-359px); -o-transform: translateY(-359px); transform: translateY(-359px); 
-webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; -ms-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; transition: transform 0.4s ease;}
.page-content.fixtop .tab-contents{margin-top: 11.5rem; z-index: 0}
.page-content .main-bg{position: absolute; top: 0; left: 0; width: 100%; /* max-width: initial; */ height: 47rem; background:url("./images/main_top_bg.jpg") no-repeat; background-size: cover; z-index: 0; }
.page-content .main-bg .water-drop-wrap{position: relative;width:1180px;margin:0 auto;height:470px;}
.page-content .main-bg .water-drop-wrap .water-drop {position: absolute;top:0;right: -200px;width: 837px;height: 470px;background: url("../images/mobile/bg_main_head.png") no-repeat;}
.main-cont .tit{display: inline-flex; flex-direction: column; margin: 2rem 0 0 0;}
.main-cont .tit .txt{height:3.6rem; line-height: 3.6rem; font-family: 'NotoSansCJKkr-B',맑은고딕, Arial; font-size: 2.4rem; color:#000000;}
.main-cont .tit .txt .dec{font-size: 1.2rem; letter-spacing:-0.3px; font-family: Arial; margin-left: 5px; color:#ff0000;}
.main-cont .tit .period{height:2.1rem; line-height: 2.1rem; margin-top: -5px; font-size:1.3rem; color:#989898}
.main-cont .tit .period .date{font-family: Arial; margin-right: 5px;}
.main-cont .slider{position:relative; width: 40%; height: 20.5rem; padding: 0 4rem; }
.main-cont .slider div[class*="cir_"]{display:inline-block; position:absolute;  width: 14rem; height: 14rem; padding:1rem 0.2rem; text-align: center; background-color: rgba(255,255,255,0.8); border-radius: 11rem; border: 1px solid #f0f0f0; z-index: 0; overflow: hidden;
 box-shadow: 6px 6px 6px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 6px 6px 6px 2px rgba(0, 0, 0, 0.2);}
.main-cont .slider div[class*="cir_"]{width:22.5rem; height:22.5rem; background-position:left top; background-repeat:no-repeat; background-size:contain; background-image: url(../images/mobile/bg_main_circle2.png); border:none; background-color: transparent; 
transition:width 0.4s ease,height 0.4s ease,left 0.4s ease,top 0.4s ease; -webkit-transition:width 0.4s ease,height 0.4s ease,left 0.4s ease,top 0.4s ease; }
.main-cont .slider div[class*="cir_"] span{display: inline-flex; align-items:center; justify-content:center; height: 50%; width: 100%; font-family: 'NotoSansCJKkr-R'; font-weight:normal; color:#666666; font-size: 1.4rem; line-height: 1.4rem;}
.main-cont .slider div[class*="cir_"] .value{flex-direction: column; height: 48%; padding:9px 0 5px 0;  }
.main-cont .slider div[class*="cir_"] .value span{color:#6b757b; font-size: 1.6rem;  letter-spacing: -0.5px; font-family:  Arial; }
.main-cont .slider div[class*="cir_"] .value span > span{width: auto; margin-left: 2px; font-family:  Arial; font-size: 1.3rem;}
.main-cont .slider div[class*="cir_"] .value span > span.won{font-family: 'NotoSansCJKkr-R';}
.main-cont .slider div[class*="cir_"] .txt.column{display: inline-flex; flex-direction: column; width:auto; }
.main-cont .slider div[class*="cir_"] .txt.column span:nth-child(1){align-items: flex-end; }
.main-cont .slider div[class*="cir_"] .txt.column .unit{align-items: flex-start;  justify-content: flex-end; font-family:  Arial; padding-top:3px; font-size: 1.2rem}
.main-cont .slider div[class*="cir_"] .txt.column .unit.won{font-family: 'NotoSansCJKkr-R';}
.main-cont .slider .active[class*="cir_"]{width: 22.5rem; height: 22.5rem; left:calc(50% - 1.5rem); top: calc(100% - 15rem); padding: 1rem; background-image: url(../images/mobile/bg_main_circle.png); z-index:2;}
.main-cont .slider .active[class*="cir_"] .t{ color: #00b8ec; font-family: 'NotoSansCJKkr-L';  font-weight:bold; font-size: 1.8rem;}
.main-cont .slider .active[class*="cir_"] .value{padding:10px 0 10px 0; }
.main-cont .slider .active[class*="cir_"] .value span{color:#ffffff; font-size: 2.4rem; letter-spacing: -0.5px; font-weight: bold; }
.main-cont .slider .active[class*="cir_"] .value span > span{ font-size:1.9rem;}
.main-cont .slider .active[class*="cir_"] .txt.column .unit{font-size: 1.4rem;}
.main-cont .slider.action_0 .cir_3{z-index:0; left:0rem; top:calc(100% - 15rem); }
.main-cont .slider.action_0 .cir_2{z-index:1; left: calc(100% - 3rem); top:5rem; }
.main-cont .slider.action_1 .cir_2{z-index:0; left:0rem; top:calc(100% - 15rem); }
.main-cont .slider.action_1 .cir_1{z-index:1; left: calc(100% - 3.3rem); top:5rem; }
.main-cont .slider.action_2 .cir_1{z-index:0; left:0rem; top:calc(100% - 15rem); }
.main-cont .slider.action_2 .cir_3{z-index:1; left: calc(100% - 3.5rem); top:5rem; }
.company-info{/*margin-top:1.8rem; padding-bottom: 0.8rem; display: inline-flex; flex-direction: column; align-items: flex-end;*/position:absolute; bottom:165px; right:144px;}
.company-info .company-info-wrap {text-align: center; background: url("../images/mobile/bg_main_head.png") no-repeat;}
.company-info .name{width:100%; height: 2.7rem; font-size: 1.6rem; color:#151f3c;}
.company-info .code{width:100%; height: 2.5rem; font-size: 2.4rem; line-height: 2.5rem; color:#feffff; font-family: Arial;}
.page-content .main-tab{padding-top:9.5rem; display: flex; flex-direction: row;}
.page-content .main-tab .tabBox{width: 25%; height: 10.5rem; min-width: 6.5rem; background:#ffffff; margin-right: 1.25rem; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.page-content .main-tab .tabBox:last-child {margin-right: 0;}
.page-content .main-tab .tabBox .btn_type{position:relative; display:flex; flex-direction:column; color: #000000; font-size: 1.7rem; width: 90%; margin: 0 auto; padding-top: 2rem;}
.page-content .main-tab .tabBox .icon{display: inline-block; width: 5rem; height: 5rem; background-repeat: no-repeat; background-size: 60%; background-position: center; }
/*.page-content .main-tab .tabBox .btn_type.active .icon{border:1px solid rgba(126,227,255,0.8);}*/
.page-content .main-tab .tabBox .btn_type.active span:last-child {color: #8bbedb;}
.icon.usage{background-image: url("../images/mobile/icon_usage.png")}
.icon.leakFreeze{background-image: url("../images/mobile/icon_leakFreeze.png")}
.icon.useInfo{background-image: url("../images/mobile/icon_useInfo.png")}
.icon.complaints{background-image: url("../images/mobile/icon_complaints.png")}
.title-icon-usage {width: 30px; height: 30px; display:inline-block; background-image: url("../images/mobile/title_icon_usage.png"); background-repeat:no-repeat; background-size: contain; margin-right: 1.25rem;vertical-align: bottom;}
.title-icon-leakFreeze {width: 30px; height: 30px; display:inline-block; background-image: url("../images/mobile/title_icon_leakFreeze.png"); background-repeat:no-repeat; background-size: contain; margin-right: 1.25rem;vertical-align: bottom;}
.title-icon-useInfo {width: 30px; height: 30px; display:inline-block; background-image: url("../images/mobile/title_icon_useInfo.png"); background-repeat:no-repeat; background-size: contain; margin-right: 1.25rem;vertical-align: bottom;}
.title-icon-complaints {width: 30px; height: 30px; display:inline-block; background-image: url("../images/mobile/title_icon_complaints.png"); background-repeat:no-repeat; background-size: contain; margin-right: 1.25rem;vertical-align: bottom;}
.title-icon-call {width: 30px; height: 30px; display:inline-block; background-image: url("../images/mobile/title_icon_call.png"); background-repeat:no-repeat; background-size: contain; margin-right: 1.25rem;vertical-align: bottom;}
.page-content.main > .tab-contents{z-index: 1}
.page-content > .tab-contents {width: 100%; max-width: 1180px; margin: 0 auto;  display: flex; flex-direction: column; /*padding:0 8rem;*/}
.page-content > .tab-contents > li{width: 100%; padding:2rem 0;}
.page-content > .tab-contents > li:first-child {padding-top:6.8rem;}
.page-content > .tab-contents > li > .tit{width:100%; margin-bottom: 1rem; font-size: 2rem; font-weight: bold;  color:#2f4680; float: left;}
.page-content > .tab-contents > li.leakFreeze-wrap .tit {width: 78%; float: left;}
.page-content > .tab-contents > li .s-tit{width:78%; margin-bottom: 1rem; font-size: 1.4rem; color:#3378dd; float: left;}
.page-content > .tab-contents > li .s-tit:before {content:''; display: inline-block; width: 4px; height: 4px; background:#31a4e9; border-radius: 3px; margin-right:7px; position: relative; top: -3px;}
.page-content > .tab-contents > li .acceptance-price {width:13%; margin-bottom: 1rem; font-size: 1.4rem; color:#000000; float: left;}
.page-content > .tab-contents > li.leakFreeze-wrap .acceptance-price {float: left;}
.page-content > .tab-contents > li .acceptance-price select {width: 10rem; height: 2rem; background: none; border: 1px solid #c1c1c1; vertical-align: top;}
.page-content > .tab-contents > li .acceptance-price label {color: #666666; margin-right: 5px;vertical-align: top;}
.check-accumulate {width: 7%; margin-bottom: 1rem; font-size: 1.4rem; text-align: right; color: #000000; float: right;}
.check-accumulate input[type="checkbox"] {width: 20px; height: 20px; vertical-align:bottom; margin-right: 5px;}
.page-content > .tab-contents > li .panel{width:100%; display:inline-block;  padding:1.5rem 2rem; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);  -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1); float:left}
.page-content > .tab-contents > li .panel .s-tit{font-size: 1.6rem;}
.page-content > .tab-contents .usage-wrap .chart-warp:not(:first-child){margin-top: 2rem}
.page-content > .tab-contents .usage-wrap .chart{position:relative; width: 100%; overflow: hidden; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);  -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1); }
.page-content > .tab-contents .usage-wrap .chart.columnChart{height:29rem; }
.page-content > .tab-contents .usage-wrap .chart.columnChart img{height: 100%;} 
.page-content > .tab-contents .usage-wrap .chart.rowChart img{width: 50rem; height: 22.5rem; }
.tab-contents .leakFreeze-wrap .panel{padding:0; background-color:transparent; box-shadow: none; -webkit-box-shadow:none;}
.tab-contents .leakFreeze-wrap .box{height: 8rem;}
.tab-contents .leakFreeze-wrap .box dl{display:flex; flex-direction:row; width:90%; height:100%; padding:1.5rem; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);  -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1); }
.tab-contents .leakFreeze-wrap dt{display:inline-block; width:40%; min-width:4rem; background-repeat:no-repeat; background-position:center; background-size:contain;  }
.tab-contents .leakFreeze-wrap dd{display:flex; width:60%; font-size: 16px; margin-top: 0;}
.tab-contents .leakFreeze-wrap dd span{display: inline-flex; align-items:center; justify-content: center; width: 50%; height: 100%; }
.tab-contents .leakFreeze-wrap .value{color:#ff9933; text-align: center;}
.tab-contents .leakFreeze-wrap .value.red{color:#ff0000;}
.tab-contents .leakFreeze-wrap .water-leak{background-image: url("../images/mobile/icon-water-leak.png");}
.tab-contents .leakFreeze-wrap .water-freeze{background-image: url("../images/mobile/icon-water-freeze.png");}
.tab-contents .leakFreeze-wrap .water-temperature{background-image: url("../images/mobile/icon-water-temperature.png");}
.tab-contents .useInfo-wrap .panel .tit{font-weight: normal;}
.tab-contents .useInfo-wrap .box{position:relative; width: calc(50% - 1.5rem); display:inline-flex; flex-direction:column; padding:1.3rem 2rem ; background-color: #e8f5ff; border-radius: 10px; float:left}
.tab-contents .useInfo-wrap .box dl{padding-left:6rem; width: 100%; height: 2.3rem;}
.tab-contents .useInfo-wrap .box:before{content:""; display:inline-block; position:absolute; top: 1.3rem; left:2rem; width: 4.6rem; height: 4.6rem; background: url("../images/mobile/icon_chart.png") no-repeat center; background-size:contain;}
.tab-contents .useInfo-wrap .box dt{width:10rem; line-height: 2.3rem; font-size: 1.5rem; color:#444444;  float:left;}
.tab-contents .useInfo-wrap .box dd{width:calc(100% - 10rem); line-height: 2.3rem; font-size:1.6rem; text-align: right; float:left;}
.tab-contents .useInfo-wrap .box dd .value{color:#00b3e1;}
.tab-contents .useInfo-wrap .box dd .unit{color:#757575; font-family: Arial}
.tab-contents .useInfo-wrap .bankInfo{width: calc(50% - 1.5rem); margin-left: 2rem; display: inline-block; margin-top: 0; padding: 1.3rem 0rem 1.3rem 2rem; float:left;}
.tab-contents .useInfo-wrap .bankInfo dl{width: 100%; display: inline-block;  float:left}
.tab-contents .useInfo-wrap .bankInfo dt{width:7rem; height:2.3rem; line-height:2.3rem; font-size: 1.2rem; padding-left:0.5rem; color:#757575; float:left}
.tab-contents .useInfo-wrap .bankInfo dd{width:calc(100% - 7rem);height:2.3rem; line-height:2.3rem;  font-size: 1.4rem;  color:#444444; float:left}
.tab-contents .progress {width: 100%; height:auto; padding-bottom: 1rem; margin:0 0 1.5rem 0; background: transparent; float:left; }
.tab-contents .progress .box{height: 11rem;}
.tab-contents .progress dl{display:flex; flex-direction:column; width:90%; height:100%; padding:1.5rem; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);  -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1); }
.tab-contents .progress dt{position:relative; display:flex; justify-content: center; align-items: center; width:100%; height:3rem; line-height: 3rem; font-size: 1.4rem; }
.tab-contents .progress dt:before{content:""; display:inline-block; margin-right: 3rem; width: 3rem; height:3rem; background-position: center; background-repeat: no-repeat; background-size: contain;}
.tab-contents .progress dd{width:100%; height:3rem; line-height: 3rem; margin-top:1rem; padding-top:1rem; border-top:1px solid #d9d9d9; font-family:arial; font-size: 15px; font-weight:bold; color:#ff9933;  text-align: center;}
.tab-contents .complaints-wrap .progress .box{position: relative;}
.tab-contents .complaints-wrap .progress .box:not(:last-child):after{content:""; display:inline-block; position:absolute; width:64px; height:56px; background-image: url("../images/mobile/icon_arrow_1.png");
    transform-origin: right top; transform: scale(0.3); top:calc(5.5rem - 8.3px); }
.tab-contents .complaints-wrap .progress .box:nth-child(2):after{background-image: url("../images/mobile/icon_arrow_2.png")}
.tab-contents .complaints-wrap .progress .box:nth-child(1):after{right: calc(0% - 4px); }
.tab-contents .complaints-wrap .progress .box:nth-child(2):after{right: calc(0% - 15px); }
.tab-contents .complaints-wrap .progress .active.box:nth-child(1) dl{border:2px solid #00b8ec;}
.tab-contents .complaints-wrap .progress .active.box:nth-child(2) dl{border:2px solid #10609d;}
.tab-contents .complaints-wrap .progress .active.box:not(:last-child) dt{font-size: 1.8rem; font-weight: bold; line-height: 22px; }
.tab-contents .complaints-wrap .progress .active.box:nth-child(1) dt{color:#00b8ec}
.tab-contents .complaints-wrap .progress .active.box:nth-child(2) dt{color:#10609d}
.tab-contents .progress .process_apply:before{background-image: url("../images/mobile/icon_process_apply.png")}
.tab-contents .progress .process_going:before{background-image: url("../images/mobile/icon_process_going.png")}
.tab-contents .progress .process_complete:before{background-image: url("../images/mobile/icon_process_complete.png")}
.tab-contents .progress-view {width: 100%; margin: 1rem 0 1.5rem 0; float: left;}
.tab-contents .progress-view .btn_type{font-size: 1.2rem; height: 2rem; font-weight: bold;}
.tab-contents .progress-view li{position:relative; display:flex; flex-direction:row; width: 100%; height: 5.5rem; padding:1rem 1rem 1rem 5.5rem; border-bottom:1px solid #d7d7d7;}
.tab-contents .progress-view li:first-child{height: 2.5rem; padding:0; justify-content: flex-end;}
.tab-contents .progress-view li:first-child .btn_type{width:6rem; justify-content: flex-end; float:right;}
.tab-contents .progress-view li:first-child,.tab-contents .progress-view li:not(.no-data):last-child{border-bottom:1px solid #757575}
.tab-contents .progress-view li:before{content:""; display:inline-block; font-size:1.2rem; text-align:center; line-height:3.5rem; position:absolute; width: 3.5rem; height: 3.5rem; left:1rem; top:1rem; border-radius: 3rem; color:#ffffff;}
.tab-contents .progress-view li.no-data{flex-direction: column;
    align-items: center; justify-content: center; height: 11rem; padding:0; margin:1rem 0; color: #cccccc; font-size: 1.6rem; overflow: hidden; background-color: #ffffff; border-radius: 10px;
    box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);}
.tab-contents .progress-view li.no-data:before{content: ""; position: relative; width: 100%; height: 2rem; left:0; top:0; margin-bottom: 0.5rem; display: inline-block;
    background-image: url(../images/mobile/icon_mark.png); background-position: center; background-repeat: no-repeat; background-size: contain;}
.tab-contents .progress-view .going:before{content:"처리중"; background-color: #ff9933;}
.tab-contents .progress-view .apply:before{content:"신청"; background-color: #00b8ec;}
.tab-contents .progress-view .complete:before{content:"완료"; background-color: #b0b0b0;}
.tab-contents .progress-view .cont{width: calc(100% - 8rem); font-size: 1.3rem;  line-height: 3.4rem; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
.tab-contents .progress-view .cont .subj{font-weight: bold; margin-right: 5px;}
.tab-contents .progress-view .date{width: 8rem; color:#a2a2a2; font-size:1.3rem; line-height: 3.4rem; text-align: right;}
.tab-contents .tel-inquire{width: 100%; margin-top:1rem; float:left;}
.tab-contents .tel-inquire .panel{position:relative; display:inline-block; width: 100%; padding:2rem; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);  -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);}
.tab-contents .tel-inquire dl{position:relative; width:100%; padding:1rem 0 1rem 5.5rem;  display: inline-flex; flex-direction: column; border-bottom:1px solid #d9d9d9; float:left}
.tab-contents .tel-inquire dl:last-child{border-bottom:none;}
.tab-contents .tel-inquire dt{ width:100%; height: 2rem; color:#757575; font-size: 1.4rem; }
.tab-contents .tel-inquire dd{width:100%; margin-top: -5px; color:#000000; font-size: 1.8rem; }
.tab-contents .tel-inquire dl:before{content:""; display:inline-block; position:absolute; top: calc(50% - 2rem); left:0; width: 4rem; height: 4rem; background-position: center; background-repeat: no-repeat; background-size:contain;}
.tab-contents .tel-inquire .que_charge:before{background-image: url("../images/mobile/icon_que_charge.png")}
.tab-contents .tel-inquire .que_outage:before{background-image: url("../images/mobile/icon_que_outage.png")}
.tab-contents .tel-inquire .que_night:before{background-image: url("../images/mobile/icon_que_night.png")}
/* 페이지 공통 */
/* TODO */
.page-content > div:not(.main-bg), .page-content > ul{max-width: 1180px; padding: 0; margin: 0 auto;}
.page-content .page-head{position:relative; width: 100%; flex-direction:column; padding-top:1.5rem !important; }
.page-content .page-head .tit{position: relative; width: 100%; max-width: 1024px; margin: 0 auto; padding:0; line-height: 2.3rem; font-size: 1.8rem; color:#000000;}
.page-content .page-head .tit + .cont{position: relative; display: block; min-height: initial; width: 100%; max-width: 1024px; margin: 0 auto; line-height: 1.8rem; padding:0.7rem 11rem 2rem 0; font-size: 1.4rem; color:#757575; }
.page-content .page-head .cont{position: relative; display:flex; align-items:center; padding: 0rem 11rem 2rem 0; min-height: 7rem; font-size: 1.8rem; line-height: 2.2rem; color:#000000;}
.page-content .page-head:before{content:""; display:inline-block; position: absolute; left:0; top:0; background-color: #fafafa; width: 100%; height: 100%; }
.page-content .page-head .cont:after{content:""; position:absolute; right:0; bottom:0.9rem; display:inline-block; background-repeat: no-repeat; background-size:contain;
-webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5);
-webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom;}
.page-content .page-head .cont.usage:after{width: 125px; height: 125px; background-image: url("../images/mobile/icon_bg_usage.png"); }
.page-content .page-head .cont.charge:after{width: 125px; height: 125px; background-image: url("../images/mobile/icon_bg_charge.png");}
.page-content .page-head .cont.feeCalculation:after{width: 200px; height: 110px; background-image: url("../images/mobile/icon_bg_feeCalculation.png"); }
.page-content .page-head .cont.introduction:after{width: 125px; height: 125px; background-image: url("../images/mobile/icon_bg_introdu.png"); right: 77px;}
.page-content .page-head .cont.introduction {padding: 0rem 11rem 2rem 11rem;}
.page-content .page-head .cont.waterScope:after{width: 130px; height: 122px; background-image: url("../images/mobile/icon_bg_waterScope.png"); }
.page-content .page-head .cont.mycomplaints:after{width: 125px; height: 125px; background-image: url("../images/mobile/icon_bg_mycomplaints.png"); }
.page-content .page-head .cont.memberInfo:after{width: 111px; height: 125px; background-image: url("../images/mobile/icon_bg_memberInfo.png"); }
.page-content .page-head .cont.notice:after{width:125px; height:125px; background-image: url("../images/mobile/icon_bg_notice.png"); }
.page-content .page-head .btn_download{width:auto; height: auto;  color:#00b0e4 !important; font-size: 1.4rem; text-decoration: underline; text-underline-position: under; margin-top: 1rem; border:none; background-color: transparent; float: none; }
.page-content .page-sub-tit{width: 100%; max-width: 1024px; margin: 1.3rem auto 1.3rem auto !important; font-size: 1.8rem; font-weight: bold; font-family: 'NotoSansCJKkr-L'; }
.page-content .search-wrap{width: 100%; margin-bottom: 2rem;}
.page-content .page-user-input{width: 100%; display: flex; flex-direction: column; }
.page-content .page-user-input dl{width: 100%; display: flex; margin-top: 1.5rem;}
.page-content .page-user-input dl:first-child{margin-top:0;}
.page-content .page-user-input dt{display:flex; align-items:center; width: 10rem; height:4.5rem; font-size: 1.8rem; font-family: 'NotoSansCJKkr-R'}
.page-content .page-user-input dd{width: calc(100% - 10rem); }
.page-content .page-user-input dd select,
.page-content .page-user-input dd input,
.page-content .page-user-input dd textarea{width:100%; height:4.5rem; padding:1rem; font-size: 14px; color:#000000; background-color:#ffffff; border:1px solid #d9d9d9; border-radius: 6px; outline: none; outline: none; float:left;}
.page-content .page-user-input dd textarea{resize: none; height: 15rem;}
.page-content .page-user-input dd select{padding-left:15px;  }
.page-content .page-user-input dd select{-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; background-image: url('../images/mobile/icon_selectArrow.png'); background-repeat: no-repeat; background-position: calc(100% - 10px) 50%; background-size: 5%;}
.page-content .page-user-input .typing-count{display:inline-flex; justify-content:flex-end; width: 100%; margin-top:0.5rem; font-size:1.3rem; float:left;}
.page-content .page-user-input .typing-count span{font-size:1.3rem;  color:#333333; margin-right: 3px;}
.page-content .page-user-input .typing-count input{height: 2rem; width:9rem; color: #333333; padding:0; border: none; text-align: right; border-radius: 0;}
.page-content .page-user-input .addFile {position:relative; padding-top:3.5rem;}
.page-content .page-user-input .addFile dd{height: auto; padding:1rem; font-size:1.4rem;  color:#757575; background-color: #f9feff; border:1px solid #d9d9d9; border-radius: 6px;}
.page-content .page-user-input .addFile dd > div{position:relative; display:flex; width:100%; height:2rem; line-height:2rem; margin-top: 5px;}
.page-content .page-user-input .addFile dd > div:first-child{margin-top: 0}
.page-content .page-user-input .addFile dd .fileName:before{content:"ㆍ"; font-size:1.6rem; color:#757575; font-weight: bold;}
.page-content .page-user-input .addFile dd .fileName{display:inline-block; width: calc(100% - 2rem); height:100%;  text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; }
.page-content .page-user-input .addFile dd .btn_fileDel{display:inline-block; width:2rem; height:100%; background-image: url('../images/mobile/icon_del.png'); background-size: 70%; background-repeat: no-repeat; background-position: center;}
.page-content .page-user-input .addFile .btn_addfile{display:none; position:absolute; right:0; top:0; width:3rem; height:3rem; background-image: url('../images/mobile/btn_add.png'); background-size: contain; background-repeat: no-repeat; background-position: center;}
.page-content .page-user-input .addFile .btn_addfile + input[type=file]{display: none;}
.page-content .page-tab{position: relative; display: block; width: 100%; margin: 1.3rem auto 2rem auto;}
.page-content .page-tab li{position:absolute; width: calc(100% - 16rem);}
.page-content .page-tab li:nth-child(2) label{left:9.3rem;}
.page-content .page-tab input{display: none;}
.page-content .page-tab input + label{position:absolute; left:0; top:0; height:3rem; font-size: 1.8rem; z-index: 1; cursor: pointer;}
.page-content .page-tab input + label + .tab-contents{display: none; width:100%; margin-top: 3rem; padding:2.2rem 0; z-index: 0}
.page-content .page-tab input:checked + label{height:3rem; color:#00b0e4; font-size: 1.8rem; border-bottom:3px solid #00b0e4;}
.page-content .page-tab input:checked + label + .tab-contents{display: flex;}
.page-content .page-tab .tab-contents{flex-direction: column;}
.page-content .page-tab .tab-contents .tit{width: 100%; font-size: 1.8rem; line-height: 2.3rem; padding-bottom: 0.5rem; }
.page-content .page-tab .tab-contents .dec{width: 100%; font-size: 1.6rem; line-height: 2.3rem; padding-bottom: 0.5rem; }
.page-content .page-tab .tab-contents .summary{width: 100%; margin-top: 0.5rem; color:#757575; font-size: 1.5rem; line-height: 2.2rem;}
.page-content .page-tab .tab-contents .mainTxt{width: 100%; margin-top: 1rem; padding: 1.5rem 0; border-top: 1px solid #000000; border-bottom: 1px solid #000000;}
.page-content .page-tab .tab-contents .mainTxt.non-bor{border:none;}
.page-content .page-tab .tab-contents .mainTxt p{margin-top: 0; margin-bottom: 1.6rem; font-size: 1.4rem; line-height: 2.2rem;}
.page-content .page-tab .tab-contents .mainTxt p:last-child{ margin-bottom: 0rem;}
.page-content .page-tab .tab-contents .img-wrap{width: 100%; margin-top: 1rem;}
.page-content .page-tab .tab-contents .dec + .img-wrap{margin-top: 0.2rem;}
.page-content .page-tab .tab-contents .img-wrap img{width: 100%;}
.page-content .page-tab .tab-contents .block{display: flex; margin:2rem 0; border-top: 1px solid #000000; border-bottom: 1px solid #000000;}
.page-content .page-tab .tab-contents .block dl{width:21%; display: inline-flex; flex-direction: column; padding:1rem; border-left:1px solid #d9d9d9;}
.page-content .page-tab .tab-contents .block dl:first-child{border-left:none}
.page-content .page-tab .tab-contents .block dl:last-child{width:37%; }
.page-content .page-tab .tab-contents .block dt{margin-bottom:0.2rem; font-size: 1.4rem; color:#a2a2a2}
.page-content .page-tab .tab-contents .block dd{font-size: 1.4rem; color:#000000}
.page-content .page-tab .tab-contents .grid-wrap{margin-top:0.5rem; margin-bottom: 2.5rem;}
.page-content .page-tab .tab-contents .grid-wrap.mb-1{margin-bottom:1rem !important;}
.page-content .page-tab .tab-contents .grid-wrap > table{margin-top: 0.5rem;}
.page-content .page-tab .tab-contents .grid-wrap table th{background-color: #f3f6f9;}
.page-content .page-tab .tab-contents .grid-wrap table thead th{border-top: 1px solid #000000; border-bottom: 1px solid #000000;}
.page-content .page-tab .tab-contents .grid-wrap table tbody tr:last-child th,
.page-content .page-tab .tab-contents .grid-wrap table tbody tr:last-child td{border-bottom: 1px solid #000000;}
.page-content .page-tab .tab-contents .case{width: 100%; display: inline-flex; flex-direction: column;}
.page-content .page-tab .tab-contents .case dt{font-size: 1.3rem; font-weight: bold;}
.page-content .page-tab .tab-contents .case dt.dot{position: relative; padding-left: 0.7rem;}
.page-content .page-tab .tab-contents .case dt.dot:before{content: "ㆍ"; color: #ff0000; font-weight: bold; font-size: 1.8rem; font-family: arial; position: absolute; left: -7px; top: -1px;}
.page-content .page-tab .tab-contents .case dt.dot + dd{padding-left: 0.7rem;}
.page-content .page-tab .tab-contents .case dd{color: #a2a2a2; font-size: 1.3rem;}
.page-content .page-tab .tab-contents .case dd span{display: inline-block;}
.page-content .page-tab .tab-contents .case dd .dot-style{width:100%; position: relative; padding-left:6px;}
.page-content .page-tab .tab-contents .case dd .dot-style:before{content: "＊"; color: inherit; font-weight: bold; font-size: 1.2rem; font-weight:bold; font-family: arial; position: absolute; left: -6px; top: 4px;}
.page-content .page-tab .tab-contents .txtFooter{position:relative; display: inline-flex; justify-content:flex-end; height:5rem; width: 100%; margin-top:0.5rem; margin-bottom: 3rem; text-align: right;}
.page-content .page-tab .tab-contents .txtFooter:before{content:""; display: inline-block; width: 8rem; height: 5rem; background: url(../images/mobile/login_logo.png) no-repeat center;  background-size: contain;}
.page-content .page-tab .tab-contents .txtFooter span{ padding-bottom: 0.5rem; align-self:flex-end;  font-size: 1.4rem; }
.page-content .fold-list {width: 100%; display: flex; flex-direction: row}
.page-content .fold-list:first-child{margin-top: 5rem;}
.page-content .fold-list li{width: calc(100%  - 1rem);}
.page-content .fold-list li:nth-child(2){margin-left: 2rem;}
.page-content .fold-list.column {flex-direction: column;}
.page-content .fold-list.column li{width: 100%;}
.page-content .fold-list.column li:nth-child(2){margin-left: 0;}
.page-content .fold-list li > input[type="checkbox"]{display: none;}
.page-content .fold-list li > input[type="checkbox"] + label{position:relative; display:flex; align-items:center; width: 100%; height:3rem; margin:1.3rem 0 1.2rem 0; padding-left:4.5rem; font-size: 1.6rem; color:#000000;}
.page-content .fold-list li > input[type="checkbox"] + label + .view-box{max-height: 1000px; overflow: hidden;}
.page-content .fold-list li > input[type="checkbox"] + label:before{content:""; display: inline-block; position:absolute; left:0; background-position: center; background-repeat: no-repeat; background-size:contain;
-webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5);
-webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; }
.page-content .fold-list li > input[type="checkbox"] + label:after{content:none; display: inline-block;  position:absolute; right:2rem; background-image: url("../images/mobile/icon_fold.png"); width: 2rem; height: 1.2rem; background-position: center; background-repeat: no-repeat; background-size:contain;}
.page-content .fold-list .flatFee:before{width:50px; height:50px; top: -22.5px; background-image: url("../images/mobile/icon_tit_flatCost.png"); }
.page-content .fold-list .useFee:before{width:50px; height:46px; top: -19.5px; background-image: url("../images/mobile/icon_tit_usageCost.png"); }
.page-content .fold-list .burdenCost:before{width:40px; height:52px; top: -24px; background-image: url("../images/mobile/icon_tit_cost.png"); }
.page-content .fold-list .manageScope:before{width:50px; height:50px; top: -22.5px; background-image: url("../images/mobile/icon_tit_admin.png"); }
.page-content .fold-list .privacyInfo:before{width:50px; height:50px; top: -22.5px; background-image: url("../images/mobile/icon_tit_userInfo.png"); }
.page-content .fold-list .useInfo:before{width:50px; height:50px; top: -22.5px; background-image: url("../images/mobile/icon_tit_code.png"); }
.view-box{position:relative; width: 100%; display: flex; flex-wrap: wrap; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; }
.view-box dl{display:inline-flex; flex-direction:column; width: calc(50% - 0.6rem); padding:1rem; margin: 2rem 0;}
.view-box dl.bg-sky{background-color: #f1faff; border-radius: 8px}
.view-box dl.bg-beige{background-color: #fffaf4; border-radius: 8px;}
.view-box dl:nth-child(2n){margin-left: 1.2rem;}
.view-box dl.bg-sky dt{color:#00b8ec;}
.view-box dl.bg-beige dt{color:#ff9933;}
.view-box .subj + .bg-sky{margin-left:0}
.view-box .subj + .bg-sky + .bg-beige{margin-left: 1.2rem;}
.view-box dl[class*="bg-"] dd{min-height: 8rem;}
.view-box dl dt{margin-bottom: 0.5rem; font-family: 'NotoSansCJKkr-L'; font-weight:bold; font-size: 1.6rem; text-align: center; height: 2.5rem; line-height: 2.5rem }
.view-box dl dd{display: flex; align-items: center; justify-content: center; flex-direction:column; width: 100%; min-height: 2.5rem; font-size: 1.6rem; }
.view-box dl dd .row{width: 100%; height:2.5rem; display: flex; justify-content: space-between; align-items: flex-end;}
.view-box dl dd .row span:nth-child(1){color:#757575; font-size: 1.4rem; font-family: arial;}
.view-box dl dd .row span:nth-child(2){color:#000000; font-size: 1.4rem; font-family: arial; letter-spacing: -0.5px}
.view-box dl dd span.won{width: auto !important; margin-left:1px; color:#000000 !important; font-size: 1.4rem; font-family: 'NotoSansCJKkr-R'}
.view-box dl dd span.desc{color:#757575; font-size: 1.3rem; line-height: 1.4rem; text-align: center;}
.view-box dl dd span.val{color:#000000; font-size: 1.8rem; font-family: arial;}
.view-box dl dd span.dot{position:relative; width: 100%; display: inline-block; font-size:1.4rem; padding-left:1rem; text-align: left;}
.view-box dl dd span.dot:first-child{margin-top:1rem; }
.view-box dl dd span.dot:before{content: "ㆍ"; color: inherit; font-weight: bold; font-size: 1.2rem; font-family: arial; position: absolute; left: 0; top: 4px;}
.view-box dl dd img{margin-top: 1.5rem}
.view-box dl dd.row{display: flex; flex-direction: row; justify-content: space-between;}
.view-box dl.row{flex-direction: row; padding:0}
.view-box dl.row dt{width: 45%; margin:0; text-align: left;}
.view-box dl.row dd{width: 55%;}
.view-box dl dd .switchBox{align-self: flex-start;}
.view-box.column{flex-direction:column; }
.view-box.column dl{width: 100%; margin: 0.5rem 0; padding:0}
.view-box.column dl:last-child{margin: 0.5rem 0 2rem 0;}
.view-box.column .subj + dl{margin: 2rem 0 0.5rem 0;}
.view-box .star{position: relative; padding-left:10px;}
.view-box .star:before{content: "＊"; color: inherit; font-weight: bold; font-size: 1.2rem; font-family: arial; position: absolute; left: -3px; top: 4px;}
.view-box .subj{position: absolute; width: 100%; margin-top:2rem; font-size: 1.4rem; color:#757575; text-align: center;}
.view-box.tc-subj > dl {margin-top:4.8rem; }
.view-box.tr-subj > .subj{font-size: 1.2rem; text-align: right;}
.view-box.tr-subj > .subj.star:before{right: 0}
.privacy-wrap{flex-direction: row;}
.privacy-wrap dl{padding:1rem 0;}
.privacy-wrap .subj{width:calc(50% - 1.6rem);}
.privacy-wrap .t-input{margin:2rem 0 0 0 !important;}
.privacy-wrap .t-input dd{min-height: auto}
.privacy-wrap .t-input dd input{width: 100%; height: 4.5rem; font-size:1.5rem; border:1px solid #d9d9d9; border-radius: 6px; padding:0 1rem;}
.privacy-wrap .sms{display: flex; flex-direction: column; justify-content: flex-end; width:calc(50% - 0.6rem); margin-left: 1.2rem; }
.privacy-wrap .sms dl{width: 100%; margin: 0 !important; padding-bottom:0.7rem;}
.privacy-wrap .sms dl:nth-child(1){margin:3rem 0 1.5rem 0;}
.privacy-wrap .sms dl:nth-child(2){margin:3rem 0 0rem 0;}
.privacy-wrap .t-agree{width: 100%; margin:0 !important}
.privacy-wrap .t-agree .btn_type{width: 7rem; height: 2.5rem; background-color: #ffffff; color:#00b0e4; font-size: 1.4rem; border:1px solid #00b0e4; letter-spacing: -0.5px; border-radius: 6px; }
.privacy-wrap .t-agree dd{justify-content: flex-end !important;}
.privacy-wrap .t-agree dd span:nth-child(1){color:#757575; font-size: 1.5rem; margin-right: 5px;}
.view-box.block dl:nth-child(1),.view-box.block dl:nth-child(2){margin-top:2rem; border-top:1px solid #eaeaea;}
.view-box.block dl:last-child{margin-bottom:2rem;}
.view-box.block dl{min-height: 3.8rem; margin:0; border-bottom:1px solid #eaeaea; padding:0.1rem 0; }
.view-box.block dl:nth-child(2n){margin-left: 1.2rem;}
.view-box.block dt{width:5rem; display:flex; align-items:center; height:100%; line-height: 1.8rem; font-family: 'NotoSansCJKkr-R'; font-weight:normal; padding:0 1rem 0 1rem; color: #757575; font-size: 1.4rem; background-color: #f3f6f9; border-right: 1px solid #eaeaea;}
.view-box.block dd{width:calc(100% - 5rem); height:100%; padding:0.2rem; font-family: 'NotoSansCJKkr-R'; font-weight:normal; font-size: 1.4rem;}
.view-box.block dd input{width: 100%; height: 100%; font-size: 1.5rem; border-radius: 4px; border: 1px solid #d9d9d9; text-align: center; font-family: 'NotoSansCJKkr-R'; font-weight:normal; font-size: 1.4rem;}
.view-box.block dd .split-wrap{display: inline-flex; flex-direction: row; width:100%; height: 3.2rem; padding: 0.1rem 0;}
.view-box.block dd .split-wrap label{display: inline-flex; justify-content:center; align-items:center; text-align:center; line-height: 1.5rem; width: 9.5rem; height: 100%; padding: 0 0.3rem; font-size: 1.2rem; color: #333333;}
.view-box.block dd .split-wrap label + input{width: calc(100% - 9.5rem); height: 100%;}
.view-box.block .bottom-btn{margin:1.5rem 0; justify-content: flex-end;}
.view-box.block .bottom-btn .btn_type{min-width: 13.7rem; max-width: 35rem}
.text-l{text-align: left !important;}
.text-r {text-align: right !important;}
.mt-1 {margin-top: 1rem !important;}
.mt-2 {margin-top: 2rem !important;}
.mt-3 {margin-top: 3rem !important;}
.mb-0{margin-bottom: 0 !important;}
.c-org{color:#ff9933 !important;}
.c-sky{color:#00b0e4 !important;}
.c-red{color:#ff0000 !important;}
.f-size-20{font-size: 2rem !important;}
.page-content select:focus{border:1px solid #0a82b9 !important; background-image: url('../images/mobile/icon_selectArrow.png');}
.page-content input:focus{border:1px solid #0a82b9 !important;}
.page-content textarea:focus{border:1px solid #0a82b9 !important;}
.search-wrap{display: flex; flex-direction: row;}
.search-wrap .btns{width: 45%;}
.search-wrap .btns + .period{position:relative; width:calc(55% - 1rem); margin-left:1rem;}
.search-wrap li{width: 100%; height: 4rem;  line-height: 4rem; display: flex; flex-direction: row;}
.search-wrap .btn_type{height: 100%; font-size:1.6rem; color:#656565; background-color: #ececec; border:1px solid #d9d9d9; border-radius: 5px;}
.search-wrap .btn_type.active{font-weight:bold; color:#ffffff; border:1px solid #00afe4; background-color: #00afe4 }
.search-wrap .datebox{position: relative; height: 100%; padding-left: 0.5rem; min-width:10rem; font-size:1.4rem; font-family:arial; color:#000000; background-color: #ffffff; outline: none; border:1px solid #d9d9d9; border-radius: 5px; 
 -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("../images/mobile/icon_calender.png");
  background-position: calc(100% - 5px) center; background-repeat:no-repeat; background-size: 6%; outline: none;}
.search-wrap input[type="date"]::-webkit-calendar-picker-indicator {background: transparent; outline: none} 
.search-wrap .btn_search{width:6rem; height: 100%; margin-left:1rem; color:#00b0e4 !important; background-color: #ffffff; border:1px solid #00b0e4;}
.search-wrap .period{position: relative;}
.search-wrap .period span.stick{display:inline-block; width:1.4rem; height:100%; font-size: 1.5rem; font-weight:bold; text-align: center;}
.search-wrap .period .datebox{width: calc(50% - 4.2rem);}
.search-wrap .btns.row3 .btn_type{width: 33.3333%; margin:0 0.5rem;}
.search-wrap .btns.row3 .btn_type:first-child{margin:0 0.5rem 0 0}
.search-wrap .btns.row3 .btn_type:last-child{margin:0 0 0 0.5rem;}
/* 나의 민원 리스트 */
.search-wrap .user-input{position:relative; width: 100%; height: 4.1rem; border-bottom:1px solid #000000}
.search-wrap .user-input input{width: 100%; height: 4rem; padding: 0 3.5rem 0 1rem; font-size: 14px; color: #000000; outline: none;  border:none; float: left;}
.search-wrap .user-input input::placeholder{color:#cccccc; font-size: 1.4rem; letter-spacing: -0.8px;}
.search-wrap .user-input .btn_find{position:absolute; width: 25px; height: inherit; right:0.5rem; border:none; background: url("../images/mobile/btn_search.png") no-repeat center;  background-size: contain;}
.complaints_list li{position:relative; display:flex; width:100%; height: 7.6rem; padding: 1rem 1rem 1rem 6rem; border-bottom:1px solid #eaeaea;}
.complaints_list li .txtWrap{display:inline-flex; width:100%; height: 4.5rem; margin-top: 0.5rem; flex-direction:column;}
.complaints_list li .cont{display: inline-flex; align-items: center; width: 100%; font-size: 1.6rem;  line-height: 3.4rem; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
.complaints_list li .cont .subj{font-weight: bold; margin-right: 5px;}
.complaints_list li .date{color:#a2a2a2; margin-top: -0.8rem; font-size: 1.4rem}
.complaints_list li:before{content:""; display:inline-block; font-size:1.4rem; text-align:center; line-height:4.5rem; position:absolute; width: 4.5rem; height: 4.5rem; left:0; top:1.55rem; border-radius: 3rem; color:#ffffff;}
.complaints_list li.going:before{content:"처리중"; background-color: #ff9933;}
.complaints_list li.apply:before{content:"신청"; background-color: #00b8ec;}
.complaints_list li.complete:before{content:"완료"; background-color: #b0b0b0;}
.complaints_list li:last-child{border-bottom:none;}
.complaints_list .no-data{display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height: 12rem; padding:0; margin-top:2rem; color:#cccccc; font-size:1.6rem; overflow: hidden; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);}
.complaints_list .no-data:before{content:""; position:initial; width: 100%; height: 2rem; margin-bottom:0.5rem; display: inline-block; background-image: url("../images/mobile/icon_mark.png"); background-position: center; background-repeat: no-repeat; background-size:contain;}
.complaints_read{ display:flex; flex-direction:column; width:100%; padding: 1rem 0; }
.complaints_read .txtWrap{display:inline-flex; width:100%; height: 4.5rem; flex-direction:column;}
.complaints_read .cont{display: inline-flex; align-items: center; width: 100%; font-size: 1.8rem;  line-height: 3.4rem; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
.complaints_read .cont .subj{font-weight: bold; margin-right: 5px;}
.complaints_read .date{padding-left:2px; margin-top: -0.5rem; color:#a2a2a2; font-size: 1.4rem}
.complaints_read li{width: 100%; position: relative;  display:flex; width:100%; height: 7.6rem; padding: 1rem 1rem 1rem 6rem;}
.complaints_read li.state{height: 7rem; border-bottom: 1px solid #eaeaea;}
.complaints_read li.state:before{ display:inline-block; font-size:1.4rem; text-align:center; line-height:4.5rem; position:absolute; width: 4.5rem; height: 4.5rem; left:0; top:1.25rem; border-radius: 3rem; color:#ffffff;}
.complaints_read .going:before{content:"처리중"; background-color: #ff9933;}
.complaints_read .apply:before{content:"신청"; background-color: #00b8ec;}
.complaints_read .complete:before{content:"완료"; background-color: #b0b0b0;}
.complaints_read .content{min-height:20rem; height:auto; padding:2rem 0; color: #080808; font-size: 1.4rem; line-height: 2.2rem;}
.complaints_read .files-wrap{display:flex;height:auto; padding:1.5rem 0; font-size:1.4rem; color:#757575; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9;  background-color: #f9feff;}
.complaints_read .files-wrap .tit{width: 6rem; padding-left:1rem;}
.complaints_read .files-wrap .files{width: calc(100% - 6rem); padding-left:1rem;}
.complaints_read .files-wrap .files .btn_type{ display: inline-block; margin-top: 0.6rem; padding:0 1rem; text-decoration: underline;  text-underline-position: under;}
.complaints_read .files-wrap .files .btn_type:first-child{ margin-top: 0rem;}
.complaints_read .comment{display:block; height:auto; padding: 0; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; background-color: #f9feff;}
.complaints_read .comment dl{display:flex; width: 50%; height:4rem; font-size: 1.4rem; color: #757575; float:left;}
.complaints_read .comment dt{width: 80px; padding-left:10px; line-height: 4rem; }
.complaints_read .comment dd{width: calc(100% - 80px); padding-left:10px; line-height: 4rem; color: #222222; background-color: #ffffff;}
.complaints_read .comment .comment_txt{width: 100%; min-height:5px; padding: 2.2rem 10px; font-size:1.4rem; color: #222222; border-top:1px solid #eaeaea; background-color: #ffffff; float:left; }
.notice_list li{position:relative; display:flex; width:100%; height: 7.6rem; padding: 1rem 1rem 1rem 0rem; border-bottom:1px solid #eaeaea;}
.notice_list li .txtWrap{display:inline-flex; width:calc(100% - 3rem); height: 4.5rem; margin-top: 0.5rem; flex-direction:column;}
.notice_list li .cont{display: inline-flex; align-items: center; width: 100%; font-size: 1.6rem;  line-height: 3.4rem; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
.notice_list li .cont .subj{font-weight: bold; margin-right: 5px;}
.notice_list li .date{color:#a2a2a2; margin-top: -0.8rem; font-size: 1.4rem}
.notice_list li .btn_attachFile{display: none; width:2rem; height:3rem; margin-top: 1rem; margin-left:1rem; padding-top: 1rem; background-image: url("../images/mobile/btn_file.png"); background-position: center; background-repeat: no-repeat; background-size:contain;}
.notice_list li:last-child{border-bottom:none;}
.notice_list .no-data{display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height: 12rem; padding:0; margin-top:2rem; color:#cccccc; font-size:1.6rem; overflow: hidden; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);}
.notice_list .no-data:before{content:""; position:initial; width: 100%; height: 2rem; margin-bottom:0.5rem; display: inline-block; background-image: url("../images/mobile/icon_mark.png"); background-position: center; background-repeat: no-repeat; background-size:contain;}
.notice_read{ display:flex; flex-direction:column; width:100%; padding: 1rem 0; }
.notice_read .txtWrap{display:inline-flex; width:100%; height: 4.5rem; flex-direction:column;}
.notice_read .cont{display: inline-flex; align-items: center; width: 100%; font-size: 1.8rem;  line-height: 3.4rem; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
.notice_read .cont .subj{font-weight: bold; margin-right: 5px;}
.notice_read .date{padding-left:2px; margin-top: -0.5rem; color:#a2a2a2; font-size: 1.4rem}
.notice_read li{width: 100%; position: relative;  display:flex; width:100%; height: 7.6rem; padding: 1rem 1rem 1rem 0rem;}
.notice_read li.title{height: 7rem; border-bottom: 1px solid #eaeaea;}
.notice_read .content{min-height:20rem; height:auto; padding:2rem 0; font-size: 1.4rem; line-height: 2.2rem;}
.notice_read .files-wrap{display:flex;height:auto; padding:1.5rem 0; font-size:1.4rem; color:#757575; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9;  background-color: #f9feff;}
.notice_read .files-wrap .tit{width: 6rem; padding-left:1rem;}
.notice_read .files-wrap .files{width: calc(100% - 6rem); padding-left:1rem;}
.notice_read .files-wrap .files .btn_type{ display: inline-block; margin-top: 0.6rem; padding:0 1rem; text-decoration: underline;  text-underline-position: under;}
.notice_read .files-wrap .files .btn_type:first-child{ margin-top: 0rem;}
.notice_read .comment{display:block; height:auto; padding: 0; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; background-color: #f9feff;}
.notice_read .comment dl{display:flex; width: 50%; height:4rem; font-size: 1.4rem; color: #757575; float:left;}
.notice_read .comment dt{width: 80px; padding-left:10px; line-height: 4rem; }
.notice_read .comment dd{width: calc(100% - 80px); padding-left:10px; line-height: 4rem; color: #222222; background-color: #ffffff;}
.notice_read .comment .comment_txt{width: 100%; min-height:5px; padding: 2rem 10px; font-size:1.4rem; color: #222222; border-top:1px solid #eaeaea; float:left; }
.search-res{width: 100%; padding:0; border-top:1px solid #d9d9d9}
.search-res .acceptance-price {float: left; font-size: 1.4rem; margin-left: 78%;}
.search-res .acceptance-price select {background: none;}
.search-res li{width: 100%; margin-top: 2rem;}
.search-res li.chart-warp .acceptance-price {float: left; margin-left: 73%;}
.search-res li.chart-warp .acceptance-price select {background: none;}
.search-res .no-data{display:flex; flex-direction:column; align-items:center; justify-content:center; height: 14rem; color:#cccccc; font-size:1.6rem; overflow: hidden; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);}
.search-res .no-data:before{content:""; width: 100%; height: 2rem; margin-bottom:0.5rem; display: inline-block; background-image: url("../images/mobile/icon_mark.png"); background-position: center; background-repeat: no-repeat; background-size:contain;}
.search-res .comment{margin-bottom: 0.3rem; text-align: right; color:#b2b2b2; font-size: 1.4rem;}
.search-res .comment + .data{margin-top: 0}
/* 공통 */
.search-res .data dl{position:relative; height: 8rem; padding: 1.2rem 1.2rem 1rem 1.2rem; border-radius: 8px; }
.search-res .data dt{display:inline-flex; align-items:center; justify-content:center; width:100%; height: 100%; color:#ffffff; font-size: 1.4rem; line-height:1.6rem; float:left;}
.search-res .data dd{display:inline-flex; align-items:center; justify-content:center; width:100%; height: 100%; color:#ffffff; font-weight: bold; font-family:arial; font-size: 2.4rem; float:left;}
.search-res .data dd .unit{margin-left: 5px;}
.search-res .data dd .unit.won{font-family:'NotoSansCJKkr-R'; font-size: 1.8rem; font-weight: normal;}
.chart-warp .chart{position:relative; width: 100%; overflow: hidden; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);}
.chart-legend1 {position: absolute;width: 26%;height: 30px; line-height: 30px; bottom: 5px; left: 50%; transform: translate(-50%, 0);}
.chart-legend1 ul {width: 100%;}
.chart-legend1 ul li {float: left; width: 50%; font-size: 1.3rem; text-align: center;}
.low-bar {background: linear-gradient(45deg, #2becfe, #327bda);}
.high-bar {background: #ff6801;}
.low-bar, .high-bar {display: inline-block; width: 60px; height: 7px; margin-right: 5px;}

/* 요금조회 */
.search-res .data .total{width: 100%; height: 6rem; background-color: #00b0e4; margin-bottom: 0.5rem; }
.search-res .data .total dt{width: 14rem; font-size: 2.4rem; justify-content:flex-start;}
.search-res .data .total.box dt{font-size: 2rem;}
.search-res .data .total dd{width: calc(100% - 14rem); font-size: 3rem; justify-content:flex-end}
.search-res .data .compare{background-color: #ff9933; }
.search-res .data .compare .value{font-size: 3rem; font-family:arial; font-weight: bold; margin-left:5px;}
.search-res .data .compare dt, .search-res .data .compare dd{width: 100%; height: 50%; justify-content: flex-start; font-size: 1.8rem; font-family:'NotoSansCJKkr-R'; font-weight: normal; }
/* 메인 */
.search-res .data .box.col1{background-color: #00deff;}
.search-res .data .box.col2{background-color: #0086e4;}
.search-res .data .box.col3{background-color: #0066ad; border-radius: 8px;}
.search-res .data .box{height:8rem; flex-direction: row; margin-bottom:0.5rem; border-right: 8px;}
.search-res .data .box dt{width: 100%; height:50%; justify-content: flex-start; font-size: 1.6rem;}
.search-res .data .box dd{width: 100%; height:50%; justify-content: flex-end;}
.chart.auto-scroll{overflow: auto !important}
.grid-wrap{position: relative;}
.grid-wrap .tit{position: relative; display:flex; align-items:flex-end; width:calc(100% - 12rem); height:3.5rem; font-size: 1.8rem; float:left}
.grid-wrap .range{/* position: absolute; right: 0; bottom: 0; */ color:#a2a2a2; font-size: 1.4rem; margin-left: 5px;}
.grid-wrap .range .unit{font-size: 1.5rem;}
.grid-wrap .grid-box{width: 100%; margin-top:1rem; margin-bottom:1rem; overflow: hidden; background-color: #ffffff; float:left}
.grid-wrap table caption{position: absolute; top: 100%; width:100%; color:#a2a2a2; line-height: 2rem; font-size: 1.2rem; text-align: right;}
.grid-wrap table {width: 100% !important; border-collapse: collapse;}
.grid-wrap table thead th{height: 4rem;border-top:1px solid #a9b8f4; border-bottom:1px solid #a9b8f4; border-right:1px solid #a9b8f4; }
.grid-wrap table th{font-family:'NotoSansCJKkr-R'; font-weight: normal; color:#1e35ac; font-size:1.4rem; text-align:center;  background-color: #cdd5f5;}
.grid-wrap table thead th:last-child{border-right: none;}
.grid-wrap table tbody th{border-right: 1px solid #eaeaea; border-bottom:1px solid #eaeaea}
.grid-wrap table tbody tr:last-child th{border-bottom:1px solid #b2b2b2}
.grid-wrap table tbody td{height: 3.5rem; text-align:center; font-family:arial; font-size:1.4rem; color:#000000; background-color: #ffffff; border:1px solid #dadada; border-top:none; border-left:none;}
.grid-wrap table tbody td:first-child{background-color: #ebecf1; color:#000000; }
.grid-wrap table tbody td:last-child{border-right: none;}
.grid-wrap table tbody tr:last-child td{border-bottom:1px solid #b2b2b2}
.grid-wrap table tbody.text-l td{text-align: left; padding:0 1rem;}
.grid-wrap table tbody.font-sans td{font-family:'NotoSansCJKkr-R';}
.grid-wrap table dl{display: inline-flex; flex-direction: column; margin-top: 0.5rem;}
.grid-wrap table dl:last-child{margin-bottom: 0.7rem;}
.grid-wrap table dt{margin-bottom:0.2rem; font-size: 1.4rem; }
.grid-wrap table dd{font-size: 1.2rem; color:#a2a2a2;}
.grid-wrap table dd span{width: 100%; display: inline-block; line-height: 1.6rem; float:left;}
.grid-wrap table dd .dot{position:relative; padding-left:0.7rem}
.grid-wrap table dd .dot:before{content:"ㆍ"; color:#ff0000; font-weight: bold; font-size:1.8rem; font-family: arial; position: absolute; left: -7px; top: 2px;}
.grid-wrap table dd .subj{position:relative; width:calc(100% - 1rem); margin-left: 0.7rem; padding-left:0.7rem}
.grid-wrap table dd .subj:before{content:"-";  font-weight: bold; font-family: inherit; position: absolute; left: 0; top: 2px;}
.grid-wrap table td > span{width: 100%; display: inline-block; margin: 0.1rem 0; float:left;}
.grid-wrap table td > span:first-child{margin: 1rem 0 0.1rem 0}
.grid-wrap table td > span:last-child{margin:  0.1rem 0 1rem 0}
.bottom-btn {display:flex; justify-content: center; align-items: center; width: 100%; margin-top: 2rem !important;}
.bottom-btn .btn_type{width: 100%; max-width: 400px; height:4rem; color:#ffffff !important; font-size: 1.6rem; border-radius: 3rem; margin-right: 1rem;}
.bottom-btn .btn_type:last-child {margin-right: 0}
.bottom-btn .btn_type.btn_cencel{ background-color: #a2a2a2; }
.bottom-btn .btn_type.btn_apply{background-color: #00b0e4; color:#ffffff;}
.bottom-btn.row2 {display: flex}
.bottom-btn.row2 .btn_type{margin-right: 0}
.bottom-btn.row2 .btn_type:nth-child(1){width: 35%;}
.bottom-btn.row2 .btn_type:nth-child(2){width: calc(65% - 1rem); margin-left: 1rem;}
.bottom-btn .btn_more{max-width: 100%; border:1px solid #d9d9d9; color:#757575 !important; font-size: 1.4rem; border-radius: 0}
.bottom-btn .btn_check{background-color:#00b0e4; font-size:1.8rem; color:#ffffff;  }
.bottom-btn .btn_edit{background-color:#0a82b9; font-size:1.8rem; color:#ffffff;  }
.bottom-btn .btn_del{background-color: #a2a2a2; font-size:1.8rem; color:#ffffff;  }
.row3{width:100%; display: flex !important; }
.row3 .box{width: 33.33333%}
.row3 .box:nth-child(1) dl{margin-right: auto; margin-left: 0}
.row3 .box:nth-child(2) dl{margin-right: auto; margin-left: auto;}
.row3 .box:nth-child(3) dl{margin-left: auto ; margin-right: 0}
/* ========== 스위치 박스 스타일 ========== */
.switchBox{display: inline-block; position: relative; }
.switchBox input{display: none;}
.switchBox input + label{display:inline-block; position:relative; width: 5rem; height: 2rem; border-radius: 20px; background-color: #d9d9d9; float:left; cursor: pointer;}
.switchBox input + label:after{content:""; position: absolute; top: 0.1rem; display: inline-block; background-color: #ffffff; border-radius: 10px; width: 1.8rem; height: 1.8rem;
 -webkit-transform: translateX(0.2rem); -moz-transform: translateX(0.2rem); -ms-transform: translateX(0.2rem); -o-transform: translateX(0.2rem); transform: translateX(0.2rem);
 -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease;}
.switchBox input:checked + label{background-color: #ff9933;}
.switchBox input:checked + label:after{-webkit-transform: translateX(100%) translateX(1.2rem); -moz-transform: translateX(100%) translateX(1.2rem); -ms-transform: translateX(100%) translateX(1.2rem); -o-transform: translateX(100%) translateX(1.2rem); transform: translateX(100%) translateX(1.2rem);
-webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease;  }
/* ========== 체크박스 스타일 ========== */
.checkBox{display: inline-block;  }
.checkBox:last-child{margin-right: 0}
.checkBox input{display: none;}
.checkBox input[type="checkbox"] + label{display:inline-flex; align-items:center; position:relative; height: 1.8rem;  padding-left:2.5rem; cursor: pointer; background-color: #ffffff; }
.checkBox input[type="checkbox"] + label:before{content:""; display:inline-block; position:absolute; width: 1.8rem; height: 1.8rem; top:0; left:0; background: url("../images/mobile/icon_checkbox2_off.png") no-repeat center; background-size:contain; /*border-radius: 10px;*/ box-sizing: border-box;}
.checkBox input[type="checkbox"] + label.save:before{background-image: url("../images/mobile/icon_checkbox_off.png"); z-index:103;}
.checkBox input[type="checkbox"]:checked + label:before{background: url("../images/mobile/icon_checkbox_on.png") no-repeat center; background-size:contain;}
/* ========== 라디오 스타일 ========== */
.radioBox{display: inline-block; margin-right: 20px; float:left}
.radioBox-child{margin-right: 0}
.radioBox input{display: none;}
.radioBox input[type="radio"] + label{display:inline-flex; align-items:center; position:relative; height:20px; padding-left:30px; font-size: 14px; cursor: pointer; background-color: #ffffff;  } 
.radioBox input[type="radio"] + label:before{content:""; display:inline-block; position:absolute; top:0; left:0;  width: 20px; height: 20px; border:1px solid #d9d9d9; border-radius: 10px; box-sizing: border-box;}
.radioBox input[type="radio"] + label:after{content:""; display:inline-block; position:absolute; top:3px; left:3px; width: 14px; height: 14px; background-color: #d9d9d9; border-radius: 10px; box-sizing: border-box}
.radioBox input[type="radio"]:checked + label:before{border:1px solid #0a82b9; }
.radioBox input[type="radio"]:checked + label:after{background-color: #0a82b9;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {margin: 0; -moz-appearance:none;  -webkit-appearance:none; -ms-appearance:none; appearance:none;}
input[type="number"]{-moz-appearance: textfield;}
.layerPopup{position: absolute; width: 100%; height: 100%; top:0; left:0;  background-color: rgba(0,0,0,0.5); z-index: 10000}
.popup-content{ width: calc(100% - 20rem); height: calc(100% - 20rem); padding:0; display:flex; flex-direction:column; margin:10rem auto; background-color: #ffffff; border-radius: 20px; }
.popup-content .popup-head{width: 100%; display:flex; align-items:center; height:5.3rem; padding:1.3rem 3rem 1rem 3rem; border-bottom:1px solid #d9d9d9;}
.popup-content .popup-head .tit{width: calc(100% - 2.5rem); font-size: 1.8rem; }
.popup-content .popup-head .btn_type{width: 2.5rem; height: 2.5rem; background: url(../images/mobile/btn_close.png) no-repeat center;  background-size: 55%;}
.popup-content .popup-body{width: 100%; height: calc(100% - 13.3rem); overflow: auto; font-family: 'NotoSansCJKkr-R'}
.popup-content .popup-footer{width: 100%; height: 8rem; padding:0 3rem 3rem 3rem;}
.popup-content .privacy-box{width: 100%; padding-bottom:2rem;}
.popup-content .privacy-box .div-box{display: flex; flex-direction: column; background-color:#fafafa; padding: 1.5rem 3rem; font-size: 1.4rem; line-height: 2.2rem; color:#727272; }
.popup-content .privacy-box h6 {margin: 1rem 0 0.5rem 0; padding: 0 3rem; font-size: 1.4rem;  font-weight: 600; color: #000000;}
.popup-content .privacy-box  dl {display:inline-flex; width:100%; padding: 0 3rem; margin-top:0.5rem;}
.popup-content .privacy-box > dl > dt {width: 1.5rem; font-size: 1.3rem; line-height: 1.8rem; color: #757575; }
.popup-content .privacy-box > dl > dd {display:inline-flex; flex-direction:column; width:calc(100% - 1.5rem); font-size: 1.3rem; line-height: 1.8rem; color: #757575; }
.popup-content .privacy-box > dl.indent-1{padding: 0 3rem 0 4.2rem;}
.popup-content .privacy-box > dl.star > dt{width: 0.8rem;}
.popup-content .privacy-box > dl.star > dd{width:calc(100% - 0.8rem);}
.popup-content .privacy-box > dl > dd > dl{padding: 0 0 0 0; margin-top: 0.3rem;}
.popup-content .privacy-box > dl > dd p{padding:0}
.popup-content .privacy-box > dl + p {margin-top:0.5rem}
.popup-content .privacy-box  dl.num > dt{width: 1.2rem;}
.popup-content .privacy-box  dl.num > dd{width:calc(100% - 1.2rem);}
.popup-content .privacy-box  dl.han > dt{width: 1.8rem;}
.popup-content .privacy-box  dl.han > dd{width:calc(100% - 1.8rem);}
.popup-content .privacy-box  dl.fin > dt{width: 1.7rem;  font-size: 1.4rem;}
.popup-content .privacy-box  dl.fin > dd{width:calc(100% - 1.7rem);}
.popup-content .privacy-box > dl > dd table{width: 100%; margin: 1rem 0 0.8rem 0;}
.popup-content .privacy-box table{width: calc(100% - 7.3rem); margin:1rem 3rem 0.8rem 4.3rem; border-collapse: collapse; font-size: 1.3rem;}
.popup-content .privacy-box table thead th{height:3.2rem; line-height: 1.8rem; padding:2px; color: #999999; background-color: #f3f6f9; text-align: center; font-family: 'NotoSansCJKkr-l'; border-right: 1px solid #eaeaea; border-top: 1px solid #505050; border-bottom: 1px solid #505050;}
.popup-content .privacy-box table thead th:last-child { border-right: none; }
.popup-content .privacy-box table td{height:3rem; color: #333333; border-bottom: 1px solid #eaeaea; border-right: 1px solid #eaeaea; padding:5px; line-height: 1.8rem; text-align: center;}
.popup-content .privacy-box table td:last-child{ border-right: none; }
.popup-content .privacy-box table tbody tr:last-child td{border-bottom: 1px solid #505050;}
.popup-content .privacy-box > ul li {padding-left: 1rem; margin:0.8rem 0 0.5rem 0;}
.popup-content .privacy-box p{font-size: 1.3rem; color:#000000; padding:0 3rem 0 3.5rem;}
.popup-content .privacy-box .b{color:#333333; padding-left:2px}
.popup-content .popup-footer .btn_type{display:flex; margin:1rem auto 0 auto; width: 100%; max-width: 28rem; height: 4rem; font-family: 'NotoSansCJKkr-R'; background-color: #a2a2a2; color:#ffffff; font-size:1.6rem; font-weight:normal; border-radius: 3rem}
.layerPopup[class*="find-"]{display: flex; align-items: center; justify-content:center;}
.layerPopup[class*="find-"] .popup-content{ height:auto; max-width:40rem;  margin:0; border-radius: 10px}
.layerPopup[class*="find-"] .popup-body{width:100%; flex-direction:column; height: auto; padding: 3rem;}
.layerPopup[class*="find-"] .popup-body .form{width: 100%; display: flex; flex-direction: column}
.layerPopup[class*="find-"] .popup-body .form li{width:100%; height: 4.7rem; padding-bottom: 1px;display: flex; flex-direction: row; border-bottom: 1px solid #d9d9d9; border-right: none; border-left: none;}
.layerPopup[class*="find-"] .popup-body .form label{width: 8rem; font-size: 1.4rem; text-align:center; line-height: 4.5rem; background-color: #f3f6f9; }
.layerPopup[class*="find-"] .popup-body .form input{width: calc(100% - 8rem); height: 100%; padding:0 1rem; color: #000000; font-size: 1.4rem; background-color: #ffffff; }
.layerPopup[class*="find-"] .popup-body .form input::placeholder{color:#727272; font-size: 1.3rem; letter-spacing: -0.5px;}
.layerPopup[class*="find-"] .popup-body .form input:focus{border:1px solid #0a82b9}
.layerPopup[class*="find-"] .popup-body .f-btns {width: 100%; display: flex; margin-top: 2rem;}
.layerPopup[class*="find-"] .popup-body .f-btns .btn_type{width: calc(50% - 0.5rem); height: 4rem; height: 4rem; background-color: #00b0e4; color: #ffffff; font-size: 1.6rem; border-radius: 3rem;}
.layerPopup[class*="find-"] .popup-body .f-btns .btn_type:last-child {margin-left:1rem; }
.layerPopup[class*="find-"] .popup-body .f-btns .btn_type.btn_cencel{background-color: #a2a2a2;}
.layerPopup[class*="find-"] .popup-body .f-btns.full .btn_type{width: 100%;}
.layerPopup.find-result .popup-body .txt{width:100%;  font-size: 1.6rem; padding-bottom:1rem; color:#666666; text-align: center;}
.layerPopup.find-result .popup-body .txt .bold{font-weight: bold; font-family: arial; margin:0 2px;}
.layerPopup.find-result .popup-body .f-btns .btn_close{background-color: #a2a2a2;}
input[id *='find-'] + .layerPopup{display: none}
input[id *='find-']:checked + .layerPopup{display: flex;}
/* ================ datepicker   ================  */
.ui-widget-header{background:#ffffff; border:none; height:3rem;}
.ui-datepicker{width:auto;  top:4rem !important; left:0}
.period input[id*="srchSt"] + .ui-datepicker{left:0 !important;}
.period input[id*="srchEd"] + .ui-datepicker{left:calc(50% - 4.2rem + 1.4rem) !important;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{top: calc(50% - 0.9rem);}
.ui-datepicker .ui-datepicker-title select{font-size:1.2rem; height:2rem; margin-top: 0.3rem;}
.ui-datepicker-year{font-size: 1.3rem; line-height:2.4rem; margin-left:5px;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{width: 2.4rem; height: 2.4rem;  line-height: 2rem; background: #f9fbfd;}
.ui-datepicker td span, .ui-datepicker td a{text-align:center; border:none;}
.ui-widget-header .ui-icon{background-image:url("../images/mobile/btn_back.png"); background-repeat: no-repeat; background-position:center; background-size: contain; background-color:transparent; border:none;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, 
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{border:none; background:transparent;}
.ui-datepicker-next .ui-icon{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.ui-datepicker-title{margin-left:0; margin-bottom:0.5rem;}
.ui-monthpicker.ui-datepicker{width:18rem; line-height: 2.4em;}
.ui-monthpicker .ui-state-default, .ui-monthpicker .ui-widget-content .ui-state-default{width:auto; height:auto;}
/* 다계량기 */
.multiMeter {width: 100%; position: relative; font-size: 1.063rem;}
.multiMeter > li {float: left;}
.multiMeter li.main {width: 35%; margin: 50px 0; margin-right:15%; }
.multiMeter li.sub {width: 50%; margin: 50px 0;}
.multiMeter li.main li {position: relative; width: 100%; height: 160px; border-radius: 10px; border:1px solid #f2671e; background: #ffffff;}
.multiMeter li.main li:after {content: ''; display: inline-block; width: 276px; height: 20px; background: #dedede; position: absolute; top: 70px; left: 265px; z-index: -1;}
.multiMeter li.sub li {float: unset;}
.multiMeter li.sub li {position: relative; display: block; width: 100%; height: 160px; border-radius: 10px; background: #eff4ff; margin-bottom: 28px; border: 1px solid #b2cefa;}
.multiMeter li.sub li:before {content: ''; display: inline-block; width: 100px; height: 20px; background: #dedede; position: absolute; top: 70px; left: -100px;}
.multiMeter li.sub li:after {content: ''; display: inline-block; width: 20px; height: 186px; background: #dedede; position: absolute; top: 80px; left: -100px;}
.multiMeter li.sub li:last-child::after {content: none;}
.multiMeter li.sub li .sub-sub {width: 31%; float: left;}
.multiMeter li.sub li .sub-sub li {width: auto; height: 158px; text-align:center; font-weight: bold; font-size: 1.5rem; background: #eff4ff url('../images/mobile/img_factory.png') no-repeat center 30%; background-size: 83px; margin-bottom: 0; border: 0;}
.multiMeter li.sub li .sub-sub li:after {content: none;}
.multiMeter li.sub li .sub-sub li:before {content: none;}
.multiMeter li.sub li .sub-sub span {position: absolute; bottom: 22%; left: 0; width: 100%; word-break: break-all;}
.multiMeter li.main p {font-size: 1.5rem; text-align: center; margin-left: 30%; line-height: 23px; padding: 5px 0;}
.multiMeter li.main p:first-child {padding-top: 10px; padding-bottom: 18px;}
.multiMeter li.main p span {display: block;}
.multiMeter .multiMeter-usage {color: #f2671e;}
.multiMeter .multiMeter-usage, .multiMeter .usage-num {font-weight: bold;}
.multiMeter .sum-num {font-size: 1.3rem;}
.multiMeter .btn-wrap {float: left; width: 40%; margin-left: 5%;}
.multiMeter .btn-round {display: block; width: auto; text-align: center; font-size: 1.5rem; padding: 10px 20px; margin: 10px 0; background: #c7ddff; border-radius: 10px; margin-right: 6px;}
.multiMeter .btn-round:hover {color: #fff; background:#2680f6;}
.multiMeter .btn-round:hover span {color: #fff;}
.multiMeter .btn-round span {display: block;}
.multiMeter .usage-num {color: #000;}
.multiMeter li.main .main-multiMeter-bg {position: relative; float: left; width: 30%; height: 100%; text-align: center; padding: 16px 10px; background: #f2671e url('../images/mobile/img_multimeter.png') no-repeat 50% 75%; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.multiMeter li.main .main-multiMeter-bg::after{content: ''; position: absolute; left: 100%; top: 41%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #f2671e; clear: both;}
.multiMeter li.main h2 {color: #fff; font-size: 26px; font-weight: normal;}
.multiMeter li.main li:before {content: ''; display: inline-block; position: absolute; top: 50%; right: 0; width: 100%; height: 1px; background: #f2671e;}
.multiMeter li.sub li .sub-multiMeter-bg {position: relative; float: left; width: 24%; height: 160px; text-align: center; padding: 16px 10px; background: #c7ddff url('../images/mobile/img_multimeter.png') no-repeat 50% 75%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.multiMeter li.sub li .sub-multiMeter-bg::after{content: ''; position: absolute; left: 100%; top: 40%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #c7ddff; clear: both;}
.multiMeter li.sub h2 {color: #2680f6; font-size: 26px;}

/* ================ 미디어 쿼리   ================  */
@media all and (max-width: 359.98px) {
	html{ font-size: 9px; }	
	.login-container .bg{width: calc(100% - 6rem);  min-width: 300px; height: calc(100% - 6rem); min-height:63rem; margin-top:1.5rem; /*background-image: none;*/}
	.login-container .wave{display: none; -webkit-transform: scale(0.56) translate(0, 0); -moz-transform: scale(0.56) translate(0, 0); -ms-transform: scale(0.56) translate(0, 0); -o-transform: scale(0.56) translate(0, 0); transform: scale(0.56) translate(0, 0);}
	.login-info{width: calc(100% - 6rem); margin:3rem 3rem 0 3rem}
	.app-head{ padding:0 2rem;}
	.head-title{padding: 0 0 0 1rem; font-size: 2.2rem; }
	.app-wrapper > input[type="checkbox"].btn_toggle+ .sidebar .sidebar-content{width:85%;}
	.app-wrapper > input[type="checkbox"].btn_toggle:checked + .sidebar .sidebar-content{width:85%; -webkit-transform: translateX(100vw) translateX(-100%); -moz-transform: translateX(100vw) translateX(-100%); -ms-transform: translateX(100vw) translateX(-100%); -o-transform: translateX(100vw) translateX(-100%); transform: translateX(100vw) translateX(-100%);}
	.page-content .main-bg{border-bottom-right-radius: 3.5rem; border-bottom-left-radius: 3.5rem; overflow: hidden; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);}
	.page-content .main-cont{padding: 0 2rem;}
	.main-cont .tit .txt{position: relative;}
	.main-cont .tit .txt .dec{ position: absolute; line-height: 12px; bottom: 7px; right: 0;}
	.main-cont .slider{width: 100%;}
	.main-cont .slider div[class*="cir_"]{width: 10rem; height: 10rem; }
	.main-cont .slider div[class*="cir_"] .value{height: 48%; padding: 0px 0 3px 0}
 	.main-cont .slider .active[class*="cir_"]{width: 16rem; height: 16rem; left: calc(50% - 8rem); top: calc(100% - 19.5rem);}
 	.main-cont .slider .active.cir_2 .t.column span:nth-child(2){ padding-right: 1.5rem;}
 	.main-cont .slider.action_0 .cir_3{left:0rem; top:calc(100% - 8rem); }
	.main-cont .slider.action_0 .cir_2{left: calc(100% - 10rem); }
	.main-cont .slider.action_1 .cir_2{left:0rem; top:calc(100% - 8rem); }
	.main-cont .slider.action_1 .cir_1{left: calc(100% - 10rem); }
	.main-cont .slider.action_2 .cir_1{left:0rem; top:calc(100% - 8rem); }
	.main-cont .slider.action_2 .cir_3{left: calc(100% - 10rem); }
	.page-content.fixtop .main-cont{left: 0; margin-left: auto; margin-right: auto }
	.page-content > .tab-contents{padding: 0 2rem;}
	.tab-contents .leakFreeze-wrap .box{height: 10rem;}
	.tab-contents .leakFreeze-wrap .box dl{flex-direction:column;  padding:1rem;}
	.tab-contents .leakFreeze-wrap .box dt{width:100%; height: 50%; }
	.tab-contents .leakFreeze-wrap .box dd{width:100%; height: 50%; margin-top: 0.5rem;}
	.tab-contents .useInfo-wrap .box{width:100%; padding:1.2rem 1rem;}
	.tab-contents .useInfo-wrap .box:before{left: 1rem;}
	.tab-contents .useInfo-wrap .bankInfo{width: 100%; margin-top: 1.5rem; margin-left:0; padding:0}
	.tab-contents .progress .box{height: 11rem;}
	.tab-contents .progress .box dl{flex-direction:column; padding:1rem;}
	.tab-contents .progress .box dt{flex-direction:column; justify-content: flex-end;width:100%; height: calc(100% - 3.5rem);}
	.tab-contents .progress .box dt:before{position:absolute; top:0; left:calc(50% - 1.25rem); height:2.5rem; width:2.5rem; height:2.5rem; margin-right: 0}
	.tab-contents .progress .box dd{width:100%; height: 3rem; line-height:2.5rem; margin-top: 0.5rem; padding-top: 0.5rem;}
	.tab-contents .complaints-wrap .progress dl{width: 88%;}
	.tab-contents .complaints-wrap .progress .box:not(:last-child):after{transform: scale(0.2); width:55px; background-image: url(../images/mobile/icon_arrow_1sm.png);}
	.tab-contents .complaints-wrap .progress .box:nth-child(2):after{background-image: url("../images/mobile/icon_arrow_2sm.png")}
	.tab-contents .complaints-wrap .progress .box:nth-child(1):after{right: calc(0% - 2.5px); top: calc(5.5rem - 5px);}
	.tab-contents .complaints-wrap .progress .box:nth-child(2):after{right: calc(0% - 9px); top: calc(5.5rem - 5px);}
	.page-content > div:not(.main-bg), .page-content > ul{padding: 0 2rem;}
	.page-content .search-wrap{display: flex; flex-direction: column;}
	.page-content .search-wrap .btns{width: 100%;}
	.page-content .search-wrap .period{width:100%; margin-left:0;}
	.page-content .search-wrap li{margin-top:1rem;}
	.page-content .search-wrap li:first-child{margin-top: 0}
	.page-content .search-wrap .datebox{background-size: 15%;}
	.page-content .search-res{ padding:0 2rem 0 2rem; }
	.search-res .acceptance-price {width: 60%; margin-left: 0 !important; margin-bottom: 15px;}
	.check-accumulate {width: 40%;}	
	.page-content .page-user-input dl{flex-direction: column;}
	.page-content .page-user-input .addFile{padding-top:5px;}
	.page-content .page-user-input dt{width: 100%; align-items:flex-start; height: 3.2rem; }
	.page-content .page-user-input dd{width: 100%;}
	.page-content .page-tab li{position:absolute; width: calc(100% - 4rem);}
	.page-content .page-tab .tab-contents .block{display: table; margin:2rem 0; border-top: 1px solid #000000; border-bottom: 1px solid #000000;}
	.page-content .page-tab .tab-contents .block dl{min-height: 8.2rem; display: inline-flex; flex-direction: column; padding:1rem; border-top:1px solid #d9d9d9; border-left:1px solid #d9d9d9; float: left; }
	.page-content .page-tab .tab-contents .block dl:nth-child(1),
	.page-content .page-tab .tab-contents .block dl:nth-child(2){border-top:none}
	.page-content .page-tab .tab-contents .block dl:nth-child(2n-1){width: 35%; border-left:none}
	.page-content .page-tab .tab-contents .block dl:nth-child(2n){width: 65%;}
	.page-content .page-tab .tab-contents .case dd span{display: inline-block; width: 100%;}
	.page-content .page-tab .tab-contents .case dd .indent{width:100%; padding-left:0.8rem;}
	.page-content .fold-list.m-col{flex-direction: column}
	.page-content .fold-list.m-col li{width:100%; }
	.page-content .fold-list.m-col li:nth-child(2){margin-left: 0}
	.page-content .fold-list li > input[type="checkbox"] + label + .view-box{max-height:0; border-bottom: none; padding:0; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease;}
	.page-content .fold-list li > input[type="checkbox"] + label:after{content:"";}
	.page-content .fold-list li > input[type="checkbox"]:checked + label + .view-box{max-height:1500rem; border-bottom: 1px solid #d9d9d9; -webkit-transition: max-height 0.3s ease; -moz-transition: max-height 0.3s ease; -ms-transition: max-height 0.3s ease; -o-transition: max-height 0.3s ease; transition: max-height 0.3s ease;}
	.page-content .fold-list li > input[type="checkbox"]:checked + label:after{content:""; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg);}
	.view-box dl dd .row.m-col{flex-direction: column; height: 5rem; padding: 0.8rem 0}
	.view-box dl dd .row.m-col span{display: inline-block; width: 100%; height: 50%; line-height: 2.3rem;}
	.view-box dl dd .row.m-col span:first-child{text-align: left}
	.view-box dl dd .row.m-col span:last-child{text-align: right;}
	.view-box dl.bg-sky dd .row.m-col{border-bottom:1px solid #dee8ec}
	.view-box dl.bg-beige dd .row.m-col{border-bottom:1px solid #f2e7d9}
	.view-box dl dd .row.m-col:last-child{border-bottom:none;}
	.view-box.m-col{flex-direction: column}
	.view-box.m-col dl{width: 100%; margin-left: 0; padding: 1.5rem;}
	.view-box.m-col dl:first-child {margin: 2rem 0 0.5rem 0; }
	.view-box.m-col dl:last-child {margin: 0.5rem 0 2rem 0; }
	.view-box.privacy-wrap dl{padding:0 !important;}
	.view-box.privacy-wrap .subj{width:100%;}
	.view-box.privacy-wrap .t-input{margin:2rem 0 0 0 !important;}
	.view-box.privacy-wrap .sms{width: 100%; margin-left: 0; margin-top: 0.5rem;}
	.view-box.privacy-wrap dl{width: 100%; margin:0.5rem 0 !important;}
	.view-box.privacy-wrap .t-agree {margin:0.5rem 0 2rem 0 !important; }
	.view-box.block dl{width:100%; padding:0; margin: 0 !important;}
	.view-box.block dl:first-child {margin:2rem 0 0 0 !important;}
	.view-box.block dl:nth-last-child(2){border-bottom:none;}
	.view-box.block dl:last-child{margin:0 0 2rem 0 !important;  border-bottom:1px solid #eaeaea;}
	.view-box.block dl dt{width: 13rem;}
	.view-box.block dl dd{width: calc(100% - 13rem);}
	.popup-content{ width: calc(100% - 3rem); height: calc(100% - 3rem); margin:1.5rem auto; padding:0; }
	.popup-content .popup-head{height:5rem; padding:1rem 1.5rem 1rem 1.5rem;}
	.popup-content .popup-body{height: calc(100% - 11rem); overflow: auto;}
	.popup-content .popup-footer{height: 6.5rem;  padding:0 1.5rem 1.5rem 1.5rem;}
	.popup-content .privacy-box .div-box{padding: 1.5rem;}
	.popup-content .privacy-box h6{padding: 0 1.5rem;}
	.popup-content .privacy-box dl{padding: 0 1.5rem;}
	.popup-content .privacy-box > dl.indent-1{padding: 0 1.5rem 0 2.7rem;}
	.popup-content .privacy-box table{width: calc(100% - 1rem); margin:1rem 0.5rem 0.8rem 0.5rem;}
	.popup-content .privacy-box table td{ padding:2px; line-height: 1.5rem;}
	.popup-content .privacy-box p{padding: 0 1.5rem 0 2rem;}
	.popup-content .privacy-box table.m-f-12{font-size: 1.2rem !important}
	.complaints_read .comment dl,.notice_read  .comment dl{width: 100%;}
	.complaints_read .comment dl:first-child,.notice_read  .comment dl:first-child{border-bottom: 1px solid #eaeaea;}
    /* 다계량기 */
	.multiMeter li.main {position: relative; width: 100%; margin: 50px 0;}
	.multiMeter li.sub {width: 100%; margin: 0;}
	.multiMeter li.sub li:after {content: ''; display: inline-block; width: 20px; height: 50px; background: #dedede; position: absolute; top:auto; bottom: -51px; left: 50%; z-index: 1;}
	.multiMeter li.sub li {margin-top: 70px;}
	.multiMeter li.main li {position: relative; width: 90%; margin: 0 auto; height: 131px; border-radius: 10px; background: #ffffff; border:1px solid #f2671e;}
	.multiMeter li.main li:after {content: none;}
	.multiMeter li.main:after {content: ''; display: inline-block; width: 20px; height: 54px; background: #dedede; position: absolute; bottom: -54px; left: 50%; z-index: -1;}
	.multiMeter li.sub li {position: relative; width: 90%; margin: 0 auto; height: 131px; border-radius: 10px; background: #eff4ff; border: 1px solid #b2cefa; margin-bottom: 50px;}
	.multiMeter li.sub li:before {content: none;}
	.multiMeter li.sub li .sub-sub li:after {content: none;}
	.multiMeter li.sub li .sub-sub li {width: auto; height: 129px; font-size: 0.9rem; text-align:center; font-weight: bold; background: #eff4ff url('../images/mobile/img_factory.png') no-repeat center 35%; background-size: 43px; margin-bottom: 0; border: 0;}
	.multiMeter .btn-round {width: auto; font-size: 1rem; padding: 10px 20px; margin: 10px 0;}
	.multiMeter li.main p {text-align: center; font-size: 1.2rem; margin-left: 20%; line-height: 18px; padding: 5px 0;}
	.multiMeter li.main p:first-child {padding-top: 10px; padding-bottom: 18px;}
	.multiMeter li.main p span {display: block;}
	.multiMeter .sum-num {font-size: 1rem;}
	.multiMeter li.main .main-multiMeter-bg {position: relative; float: left; width: 20%; height: 100%; text-align: center; background: #f2671e url('../images/mobile/img_multimeter.png') no-repeat 50% 65%; padding: 45px 0; background-size: 60%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	.multiMeter li.main .main-multiMeter-bg::after{content: ''; position: absolute; left: 99%; top: 42%; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #f2671e; clear: both;}
	.multiMeter li.main h2 {color: #fff; font-size: 1.2rem; font-weight: normal;}
	.multiMeter li.main li:before {content: ''; display: inline-block; position: absolute; top: 50%; right: 0; width: 100%; height: 1px; background: #f2671e;}
	.multiMeter li.sub li .sub-multiMeter-bg {position: relative; float: left; width: 20%; height: 100%; text-align: center; padding: 35px 10px; background: #c7ddff url('../images/mobile/img_multimeter.png') no-repeat 50% 60%; background-size: 60%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	.multiMeter li.sub li .sub-multiMeter-bg::after{content: ''; position: absolute; left: 99%; top: 42%; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #c7ddff; clear: both;}
	.multiMeter li.sub h2 {color: #2680f6; font-size: 1.2rem;}
	.multiMeter .btn-wrap {float: left; width: 50%; margin-left: 3%;}
	.multiMeter li.sub li .sub-sub {width: 27%; float: left;}
	.multiMeter li.sub li .sub-sub span {position: absolute; bottom: 32%; left: 0; width: 100%;}    	
}
@media only screen and (device-width: 280px) {
	.page-content > .tab-contents > li .s-tit{width:100%;}
	.page-content > .tab-contents > li .acceptance-price {width:55% !important;}
	.page-content > .tab-contents > li .check-accumulate {width:45% !important;}
	.chart-legend1 {position: absolute; width: 75% !important; height: 30px; line-height: 30px; bottom: 5px;  left: 50%; transform: translate(-50%, 0);}
	.low-bar, .high-bar {width: 30px;}
	.chart-legend1 ul li {font-size: 1rem;}
	.search-res .acceptance-price {width: 69%;}
	.check-accumulate {width: 31%;}		
	/* 다계량기 */
	.multiMeter li.main {position: relative; width: 100%; margin: 50px 0;}
	.multiMeter li.sub {width: 100%;}
	.multiMeter li.sub li:after {content: ''; display: inline-block; width: 20px; height: 50px; background: #dedede; position: absolute; top:auto; bottom: -51px; left: 50%; z-index: 1;}
	.multiMeter li.sub li {margin-top: 70px;}
	.multiMeter li.main li {position: relative; width: 90%; margin: 0 auto; height: 180px; border-radius: 10px; border:1px solid #f2671e;}
	.multiMeter li.main li:after {content: none;}
	.multiMeter li.main:after {content: ''; display: inline-block; width: 20px; height: 72px; background: #dedede; position: absolute; bottom: -71px; left: 50%; z-index: -1;}
	.multiMeter li.sub li {position: relative; width: 90%; margin: 0 auto; height: 163px; border-radius: 10px; background: #eff4ff; border: 1px solid #b2cefa; margin-bottom: 50px;}
	.multiMeter li.sub li:before {content: none;}
	.multiMeter li.sub li .sub-sub li:after {content: none;}
	.multiMeter li.sub li .sub-sub li {width: auto; height: 161px; font-size: 0.9rem; text-align:center; font-weight: bold; background: #eff4ff url('../images/mobile/img_factory.png') no-repeat center 35%; background-size: 58px; margin-bottom: 0; border: 0;}
	.multiMeter .btn-round {width: auto; font-size: 1.2rem !important; padding: 10px 20px; margin: 8px 0 !important;}
	.multiMeter li.main p {text-align: center; font-size: 1.2rem; margin-left: 17%; line-height: 21px; padding: 13px 0;}
	.multiMeter li.main p:first-child {padding-top: 10px; padding-bottom: 18px;}
	.multiMeter li.main p span {display: block;}
	.multiMeter .sum-num {font-size: 1rem;}
	.multiMeter li.main .main-multiMeter-bg {position: relative; float: left; width: 20%; height: 100%; text-align: center; background: #f2671e url('../images/mobile/img_multimeter.png') no-repeat 50% 65%; padding: 45px 0; background-size: 60%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	.multiMeter li.main .main-multiMeter-bg::after{content: ''; position: absolute; left: 99%; top: 42%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #f2671e; clear: both;}
	.multiMeter li.main h2 {color: #fff; font-size: 1.2rem; font-weight: normal;}
	.multiMeter li.main li:before {content: ''; display: inline-block; position: absolute; top: 50%; right: 0; width: 100%; height: 1px; background: #f2671e;}
	.multiMeter li.sub li .sub-multiMeter-bg {position: relative; float: left; width: 20%; height: 100%; text-align: center; padding: 35px 10px; background: #c7ddff url('../images/mobile/img_multimeter.png') no-repeat 50% 60%; background-size: 60%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	.multiMeter li.sub li .sub-multiMeter-bg::after{content: ''; position: absolute; left: 99%; top: 41%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #c7ddff; clear: both;}
	.multiMeter li.sub h2 {color: #2680f6; font-size: 1.2rem;}
	.multiMeter .btn-wrap {float: left; width: 50%; margin-left: 3%;}
	.multiMeter li.sub li .sub-sub {width: 27%; float: left;}	
}
@media all and (max-width:320px) {
	.page-content .main-bg{border-bottom-right-radius: 3.5rem; border-bottom-left-radius: 3.5rem; overflow: hidden; background:url("../images/mobile/mobile_main_top_bg.jpg") no-repeat; background-size: cover; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);}
	.page-content .main-bg{border-bottom-right-radius: 3.5rem; border-bottom-left-radius: 3.5rem; overflow: hidden; background:url("../images/mobile/mobile_main_top_bg.jpg") no-repeat; background-size: cover; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);} 
	.page-content .main-bg:after{content:""; display:inline-block; position:absolute; bottom:0; left:0; width: 100%; height:11rem; background-color: #005495;}
	.page-content .main-tab .tabBox{height: 7.5rem; background: transparent; margin-right: 0; border-top-left-radius: 0; border-top-right-radius: 0;}
	.page-content .main-tab .tabBox .btn_type{font-size: 1.4rem; color: #ffffff; padding-top: 0;}
	.page-content .main-tab .tabBox .icon{display: inline-block; width: 5rem; height: 5rem; margin-bottom:0.5rem; border-radius:5rem; background-color:rgba(255,255,255,0.3); border:1px solid rgba(255,255,255,0.3);  background-repeat: no-repeat; background-size: 42%; background-position: center; }
	.icon.usage{background-image: url("../images/mobile/mobile_icon_usage.png")}
	.icon.usage{background-image: url("../images/mobile/mobile_icon_usage.png")}
	.icon.leakFreeze{background-image: url("../images/mobile/mobile_icon_leakFreeze.png")}
	.icon.useInfo{background-image: url("../images/mobile/mobile_icon_useInfo.png")}
	.icon.complaints{background-image: url("../images/mobile/mobile_icon_complaints.png")}
	.company-info{position:absolute; top:70px; bottom:unset; right:22px;}
	.company-info .company-info-wrap {text-align: right;}
	.company-info .name{width:100%; height: 2.7rem; font-size: 1.6rem; color:#151f3c;}
	.company-info .code{width:100%; height: 2.5rem; font-size: 2.4rem; line-height: 2.5rem; color:#feffff; font-family: Arial;}
	.page-content .main-cont{padding: 0 2rem;}
	.page-content .main-bg .water-drop-wrap{display:none;}
	.main-cont .slider{width: 100%;}
	.main-cont .slider div[class*="cir_"]{width: 11rem; height: 11rem; }
 	.main-cont .slider div[class*="cir_"] .value{height: 48%; padding: 2px 0 3px 0}
 	.main-cont .slider .active[class*="cir_"]{width: 22rem; height: 22rem; left: calc(50% - 10.6rem); top: calc(100% - 15rem);}
 	.main-cont .slider.action_0 .cir_3{left:0rem; top:calc(100% - 8rem); }
	.main-cont .slider.action_0 .cir_2{left: calc(100% - 11rem);  }
	.main-cont .slider.action_1 .cir_2{left:0rem; top:calc(100% - 8rem);  }
	.main-cont .slider.action_1 .cir_1{left: calc(100% - 11rem); }
	.main-cont .slider.action_2 .cir_1{left:0rem; top:calc(100% - 8rem);  }
	.main-cont .slider.action_2 .cir_3{left: calc(100% - 11rem);}
	.main-cont .slider.action_1 .cir_1 {top: calc(100% - 8rem);}
	.main-cont .slider.action_0 .cir_2 {top: calc(100% - 8rem);}
	.main-cont .slider.action_2 .cir_3{top: calc(100% - 8rem);}	
	.company-info{position:absolute; top:70px; bottom:unset; right:22px;}
	.company-info .company-info-wrap {text-align: right;}
	.page-content .page-head .cont.introduction {position: relative; display: block; min-height: initial; width: 100%; max-width: 1024px; margin: 0 auto; line-height: 1.8rem; padding: 0.7rem 11rem 2rem 0; font-size: 1.4rem; color:#757575;}
	.page-content .page-head .cont.introduction:after {right: 0;}
	.page-content > .tab-contents > li .s-tit {width: 100%;}
	.page-content > .tab-contents > li .acceptance-price {width: 50%;}
	.page-content > .tab-contents > li.leakFreeze-wrap .acceptance-price {margin-left: 0;}
	.page-content > .tab-contents > li.leakFreeze-wrap .tit {width: 100%;}
	.page-content > .tab-contents > li .check-accumulate {width: 50%;}
	.tab-contents .leakFreeze-wrap dd span {font-size: 1.3rem;}
	.chart-legend1 {position: absolute; width: 90%; height: 30px; line-height: 30px; bottom: 5px;  left: 50%; transform: translate(-50%, 0);}
	/* 다계량기 */
	.multiMeter li.main {position: relative; width: 100%; margin: 50px 0;}
	.multiMeter li.sub {width: 100%; margin: 0;}
	.multiMeter li.sub li:after {content: ''; display: inline-block; width: 20px; height: 50px; background: #dedede; position: absolute; top:auto; bottom: -51px; left: 50%; z-index: 1;}
	.multiMeter li.sub li {margin-top: 70px;}
	.multiMeter li.main li {position: relative; width: 90%; margin: 0 auto; height: 131px; border-radius: 10px; background: #ffffff; border:1px solid #f2671e;}
	.multiMeter li.main li:after {content: none;}
	.multiMeter li.main:after {content: ''; display: inline-block; width: 20px; height: 54px; background: #dedede; position: absolute; bottom: -54px; left: 50%; z-index: -1;}
	.multiMeter li.sub li {position: relative; width: 90%; margin: 0 auto; height: 131px; border-radius: 10px; background: #eff4ff; border: 1px solid #b2cefa; margin-bottom: 50px;}
	.multiMeter li.sub li:before {content: none;}
	.multiMeter li.sub li .sub-sub li:after {content: none;}
	.multiMeter li.sub li .sub-sub li {width: auto; height: 129px; font-size: 0.9rem; text-align:center; font-weight: bold; background: #eff4ff url('../images/mobile/img_factory.png') no-repeat center 35%; background-size: 43px; margin-bottom: 0; border: 0;}
	.multiMeter .btn-round {width: auto; font-size: 1rem; padding: 10px 20px; margin: 10px 0;}
	.multiMeter li.main p {text-align: center; font-size: 1.2rem; margin-left: 20%; line-height: 18px; padding: 5px 0;}
	.multiMeter li.main p:first-child {padding-top: 10px; padding-bottom: 18px;}
	.multiMeter li.main p span {display: block;}
	.multiMeter .sum-num {font-size: 1rem;}
	.multiMeter li.main .main-multiMeter-bg {position: relative; float: left; width: 20%; height: 100%; text-align: center; background: #f2671e url('../images/mobile/img_multimeter.png') no-repeat 50% 65%; padding: 45px 0; background-size: 60%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	.multiMeter li.main .main-multiMeter-bg::after{content: ''; position: absolute; left: 99%; top: 42%; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #f2671e; clear: both;}
	.multiMeter li.main h2 {color: #fff; font-size: 1.2rem; font-weight: normal;}
	.multiMeter li.main li:before {content: ''; display: inline-block; position: absolute; top: 50%; right: 0; width: 100%; height: 1px; background: #f2671e;}
	.multiMeter li.sub li .sub-multiMeter-bg {position: relative; float: left; width: 20%; height: 100%; text-align: center; padding: 35px 10px; background: #c7ddff url('../images/mobile/img_multimeter.png') no-repeat 50% 60%; background-size: 60%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	.multiMeter li.sub li .sub-multiMeter-bg::after{content: ''; position: absolute; left: 99%; top: 42%; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #c7ddff; clear: both;}
	.multiMeter li.sub h2 {color: #2680f6; font-size: 1.2rem;}
	.multiMeter .btn-wrap {float: left; width: 50%; margin-left: 3%;}
	.multiMeter li.sub li .sub-sub {width: 27%; float: left;}
	.multiMeter li.sub li .sub-sub span {position: absolute; bottom: 26%; left: 0; width: 100%;}
}
@media all and (min-width:360px) and (max-width: 640px) {
	html{ font-size: 10px; }
	.login-container .bg{width: calc(100% - 6rem); max-width:40rem; /*background-image: none;*/}
	.login-container .wave{display: none; -webkit-transform: scale(0.54) translate(0, 0); -moz-transform: scale(0.54) translate(0, 0); -ms-transform: scale(0.54) translate(0, 0); -o-transform: scale(0.54) translate(0, 0); transform: scale(0.54) translate(0, 0);}
	.app-head{ padding:0 2rem;}
	.app-wrapper > input[type="checkbox"].btn_toggle+ .sidebar .sidebar-content{width:83%;}
	.app-wrapper > input[type="checkbox"].btn_toggle:checked + .sidebar .sidebar-content{width:83%; -webkit-transform: translateX(100vw) translateX(-100%); -moz-transform: translateX(100vw) translateX(-100%); -ms-transform: translateX(100vw) translateX(-100%); -o-transform: translateX(100vw) translateX(-100%); transform: translateX(100vw) translateX(-100%);}
	.page-content .main-bg{border-bottom-right-radius: 3.5rem; border-bottom-left-radius: 3.5rem; overflow: hidden; background:url("../images/mobile/mobile_main_top_bg.jpg") no-repeat; background-size: cover; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);} 
	.page-content .main-bg:after{content:""; display:inline-block; position:absolute; bottom:0; left:0; width: 100%; height:11rem; background-color: #005495;}
	.page-content .main-tab .tabBox{height: 7.5rem; background: transparent; margin-right: 0; border-top-left-radius: 0; border-top-right-radius: 0;}
	.page-content .main-tab .tabBox .btn_type{font-size: 1.4rem; color: #ffffff; padding-top: 0;}
	.page-content .main-tab .tabBox .icon{display: inline-block; width: 5rem; height: 5rem; margin-bottom:0.5rem; border-radius:5rem; background-color:rgba(255,255,255,0.3); border:1px solid rgba(255,255,255,0.3);  background-repeat: no-repeat; background-size: 42%; background-position: center; }
	.icon.usage{background-image: url("../images/mobile/mobile_icon_usage.png")}
	.icon.leakFreeze{background-image: url("../images/mobile/mobile_icon_leakFreeze.png")}
	.icon.useInfo{background-image: url("../images/mobile/mobile_icon_useInfo.png")}
	.icon.complaints{background-image: url("../images/mobile/mobile_icon_complaints.png")}
	.company-info{position:absolute; top:70px; bottom:unset; right:22px;}
	.company-info .company-info-wrap {text-align: right;}
	.company-info .name{width:100%; height: 2.7rem; font-size: 1.6rem; color:#151f3c;}
	.company-info .code{width:100%; height: 2.5rem; font-size: 2.4rem; line-height: 2.5rem; color:#feffff; font-family: Arial;}
	.page-content .main-cont{padding: 0 2rem;}
	.page-content .main-bg .water-drop-wrap{display:none;}
	.main-cont .slider{width: 100%;}
	.main-cont .slider div[class*="cir_"]{width: 11rem; height: 11rem; }
 	.main-cont .slider div[class*="cir_"] .value{height: 48%; padding: 2px 0 3px 0}
 	.main-cont .slider .active[class*="cir_"]{width: 22rem; height: 22rem; left: calc(50% - 10.6rem); top: calc(100% - 15rem);}
 	.main-cont .slider.action_0 .cir_3{left:0rem; top:calc(100% - 8rem); }
	.main-cont .slider.action_0 .cir_2{left: calc(100% - 11rem);  }
	.main-cont .slider.action_1 .cir_2{left:0rem; top:calc(100% - 8rem);  }
	.main-cont .slider.action_1 .cir_1{left: calc(100% - 11rem); }
	.main-cont .slider.action_2 .cir_1{left:0rem; top:calc(100% - 8rem);  }
	.main-cont .slider.action_2 .cir_3{left: calc(100% - 11rem);}
	.main-cont .slider.action_1 .cir_1 {top: calc(100% - 8rem);}
	.main-cont .slider.action_0 .cir_2 {top: calc(100% - 8rem);}
	.main-cont .slider.action_2 .cir_3{top: calc(100% - 8rem);}
	.page-content > .tab-contents{padding: 0 2rem;}
	.page-content > .tab-contents > li.leakFreeze-wrap .tit {width: 100%;}
	.page-content.fixtop .main-cont{left: 0; margin-left: auto; margin-right: auto }
	.tab-contents .leakFreeze-wrap .box{height: 10rem;}
	.tab-contents .leakFreeze-wrap .box dl{ flex-direction:column;  padding:1rem;}
	.tab-contents .leakFreeze-wrap .box dt{width:100%; height: 50%; }
	.tab-contents .leakFreeze-wrap .box dd{width:100%; height: 50%; margin-top: 0.5rem;}
	.tab-contents .leakFreeze-wrap dd .tit{justify-content: flex-start;}
	.tab-contents .leakFreeze-wrap dd .value{justify-content: flex-end;}
	.tab-contents .useInfo-wrap .box{width:100%; padding:1.2rem 1rem;}
	.tab-contents .useInfo-wrap .box:before{left: 1rem;}
	.tab-contents .useInfo-wrap .bankInfo{width: 100%;  margin-top: 1.5rem; margin-left:0; padding:0}
	.tab-contents .progress .box{height: 11rem;}
	.tab-contents .progress .box dl{flex-direction:column;  padding:1rem;}
	.tab-contents .progress .box dt{flex-direction:column;  justify-content: flex-end; width:100%; height: calc(100% - 3.5rem); }
	.tab-contents .progress .box dt:before{position:absolute; top:0; left:calc(50% - 1.25rem); height:2.5rem; width:2.5rem; height:2.5rem; margin-right: 0}
	.tab-contents .progress .box dd{width:100%; height: 3rem; line-height:2.5rem; margin-top: 0.5rem; padding-top: 0.5rem;}
	.tab-contents .complaints-wrap .progress dl{width: 88%;}
	.tab-contents .complaints-wrap .progress .box:not(:last-child):after{transform: scale(0.2); width:55px; background-image: url(../images/mobile/icon_arrow_1sm.png);}
	.tab-contents .complaints-wrap .progress .box:nth-child(2):after{background-image: url("../images/mobile/icon_arrow_2sm.png")}
	.tab-contents .complaints-wrap .progress .box:nth-child(1):after{right: calc(0% - 2.2px); top: calc(5.5rem - 5px);}
	.tab-contents .complaints-wrap .progress .box:nth-child(2):after{right: calc(0% - 7.4px); top: calc(5.5rem - 5px);}
	.page-content > div:not(.main-bg), .page-content > ul{padding: 0 2rem;}
	.page-content .page-head .cont.introduction {position: relative; display: block; min-height: initial; width: 100%; max-width: 1024px; margin: 0 auto; line-height: 1.8rem; padding: 0.7rem 11rem 2rem 0; font-size: 1.4rem; color:#757575;}
	.page-content .page-head .cont.introduction:after {right: 0;}
	.page-content .search-wrap{display: flex; flex-direction: column;}
	.page-content .search-wrap .btns{width: 100%;}
	.page-content .search-wrap .period{width:100%; margin-left:0;}
	.page-content .search-wrap li{margin-top:1rem;}
	.page-content .search-wrap li:first-child{margin-top: 0}
	.page-content .search-wrap .datebox{background-size: 15%;}
	.page-content .search-res{ padding:0 2rem 0 2rem; }
	.search-res .acceptance-price {width: 60%; margin-left: 0 !important; margin-bottom: 20px}
	.check-accumulate {width: 40%;}
	.page-content .page-user-input dl{flex-direction: column;}
	.page-content .page-user-input .addFile{padding-top:5px;}
	.page-content .page-user-input dt{width: 100%; align-items:flex-start; height: 3.2rem; }
	.page-content .page-user-input dd{width: 100%;}
	.page-content .page-tab li{position:absolute; width: calc(100% - 4rem);}
	.page-content .page-tab .tab-contents .block{display: table; margin:2rem 0; border-top: 1px solid #000000; border-bottom: 1px solid #000000;}
	.page-content .page-tab .tab-contents .block dl{min-height: 5.8rem; display: inline-flex; flex-direction: column; padding:1rem; border-top:1px solid #d9d9d9; border-left:1px solid #d9d9d9; float: left; }
	.page-content .page-tab .tab-contents .block dl:nth-child(1),
	.page-content .page-tab .tab-contents .block dl:nth-child(2){border-top:none}
	.page-content .page-tab .tab-contents .block dl:nth-child(2n-1){width: 35%; border-left:none}
	.page-content .page-tab .tab-contents .block dl:nth-child(2n){width: 65%;}
	.page-content .page-tab .tab-contents .case dd span{display: inline-block; width: 100%;}
	.page-content .page-tab .tab-contents .case dd .indent{width:100%; padding-left:0.8rem;}
	.page-content > .tab-contents > li .s-tit {width: 100%;}
	.page-content > .tab-contents > li .acceptance-price {width: 50%;}
	.page-content > .tab-contents > li.leakFreeze-wrap .acceptance-price {margin-left: 0;}
	.page-content > .tab-contents > li .check-accumulate {width: 50%;}	
	.page-content .fold-list.m-col{flex-direction: column}
	.page-content .fold-list.m-col li{width:100%; }
	.page-content .fold-list.m-col li:nth-child(2){margin-left: 0}
	.page-content .fold-list li > input[type="checkbox"] + label + .view-box{max-height:0; border-bottom: none; padding:0; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease;}
	.page-content .fold-list li > input[type="checkbox"] + label:after{content:"";}
	.page-content .fold-list li > input[type="checkbox"]:checked + label + .view-box{max-height:1500rem; border-bottom: 1px solid #d9d9d9; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease;}
	.page-content .fold-list li > input[type="checkbox"]:checked + label:after{content:""; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg);}
	.view-box dl dd .row.m-col{flex-direction: column; height: 5rem; padding: 0.8rem 0}
	.view-box dl dd .row.m-col span{display: inline-block; width: 100%; height: 50%; line-height: 2.3rem;}
	.view-box dl dd .row.m-col span:first-child{text-align: left; }
	.view-box dl dd .row.m-col span:last-child{text-align: right;}
	.view-box dl.bg-sky dd .row.m-col{border-bottom:1px solid #dee8ec}
	.view-box dl.bg-beige dd .row.m-col{border-bottom:1px solid #f2e7d9}
	.view-box dl dd .row.m-col:last-child{border-bottom:none;}
	.view-box dl.t-input dl{width: 100%; flex-direction: column}
	.view-box.m-col{flex-direction: column}
	.view-box.m-col dl{width: 100%; margin-left: 0; padding: 1.5rem;}
	.view-box.m-col dl:first-child {margin: 2rem 0 0.5rem 0; }
	.view-box.m-col dl:last-child {margin: 0.5rem 0 2rem 0; }
	.view-box.privacy-wrap dl{padding:0 !important;}
	.view-box.privacy-wrap .subj{width:100%;}
	.view-box.privacy-wrap .t-input{margin:2rem 0 0 0 !important;}
	.view-box.privacy-wrap .sms{width: 100%; margin-left: 0; margin-top: 0.5rem;}
	.view-box.privacy-wrap dl{width: 100%; margin:0.5rem 0 !important;}
	.view-box.privacy-wrap .t-agree {margin:0.5rem 0 2rem 0 !important; }
	.view-box.block dl{width:100%; padding:0; margin: 0 !important;}
	.view-box.block dl:first-child {margin:2rem 0 0 0 !important;}
	.view-box.block dl:last-child{margin:0 0 2rem 0 !important; border-bottom:1px solid #eaeaea;}
	.view-box.block dl dt{width: 13rem;}
	.view-box.block dl dd{width: calc(100% - 13rem);}
	.popup-content{ width: calc(100% - 4rem); height: calc(100% - 4rem); margin:2rem auto; padding:0;  }
	.popup-content .popup-head{height:5rem; padding:1rem 2rem 1rem 2rem;}
	.popup-content .popup-body{height: calc(100% - 12rem); overflow: auto;}
	.popup-content .privacy-box .div-box{padding: 2rem;}
	.popup-content .privacy-box h6{padding: 0 2rem;}
	.popup-content .privacy-box dl{padding: 0 2rem;}
	.popup-content .privacy-box > dl.indent-1{padding: 0 2rem 0 2.7rem;}
	.popup-content .privacy-box table{width: calc(100% - 1rem); margin:1rem 0.5rem 0.8rem 0.5rem;}
	.popup-content .privacy-box table td{ padding:2px; line-height: 1.5rem;}
	.popup-content .privacy-box p{padding: 0 2rem 0 2rem;}
	.popup-content .privacy-box table.m-f-12{font-size: 1.2rem !important}
	.popup-content .popup-footer{height: 7rem; padding:0 2rem 2rem 2rem;}
	.complaints_read .comment dl,.notice_read  .comment dl{width: 100%;}
	.complaints_read .comment dl:first-child,.notice_read  .comment dl:first-child{border-bottom: 1px solid #eaeaea;}
	.tab-contents .leakFreeze-wrap dd span {font-size: 1.3rem;}
	.chart-legend1 {position: absolute; width: 83%; height: 30px; line-height: 30px; bottom: 5px;  left: 50%; transform: translate(-50%, 0);}
	/* 다계량기 */
	.multiMeter li.main {position: relative; width: 100%; margin: 50px 0;}
	.multiMeter li.sub {width: 100%; margin: 0;}
	.multiMeter li.sub li:after {content: ''; display: inline-block; width: 20px; height: 50px; background: #dedede; position: absolute; top:auto; bottom: -51px; left: 50%; z-index: 1;}
	.multiMeter li.sub li {margin-top: 70px;}
	.multiMeter li.main li {position: relative; width: 90%; margin: 0 auto; height: 180px; border-radius: 10px; border:1px solid #f2671e;}
	.multiMeter li.main li:after {content: none;}
	.multiMeter li.main:after {content: ''; display: inline-block; width: 20px; height: 72px; background: #dedede; position: absolute; bottom: -71px; left: 50%; z-index: -1;}
	.multiMeter li.sub li {position: relative; width: 90%; margin: 0 auto; height: 150px; border-radius: 10px; background: #eff4ff; border: 1px solid #b2cefa; margin-bottom: 50px;}
	.multiMeter li.sub li:before {content: none;}
	.multiMeter li.sub li .sub-sub li:after {content: none;}
	.multiMeter li.sub li .sub-sub li {width: auto; height: 148px; font-size: 1rem; text-align:center; font-weight: bold; background: #eff4ff url('../images/mobile/img_factory.png') no-repeat center 35%; background-size: 50px; margin-bottom: 0; border: 0;}
	.multiMeter .btn-round {width: auto; font-size: 1.2rem; padding: 10px 20px; margin: 12px 0;}
	.multiMeter li.main p {text-align: center; font-size: 1.2rem; margin-left: 20%; line-height: 21px; padding: 13px 0;}
	.multiMeter li.main p:first-child {padding-top: 10px; padding-bottom: 18px;}
	.multiMeter li.main p span {display: block;}
	.multiMeter .sum-num {font-size: 1rem;}
	.multiMeter li.main .main-multiMeter-bg {position: relative; float: left; width: 20%; height: 100%; text-align: center; background: #f2671e url('../images/mobile/img_multimeter.png') no-repeat 50% 70%; padding: 45px 0; background-size: 60%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	.multiMeter li.main .main-multiMeter-bg::after{content: ''; position: absolute; left: 99%; top: 42%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #f2671e; clear: both;}
	.multiMeter li.main h2 {color: #fff; font-size: 1.2rem; font-weight: normal;}
	.multiMeter li.main li:before {content: ''; display: inline-block; position: absolute; top: 50%; right: 0; width: 100%; height: 1px; background: #f2671e;}
	.multiMeter li.sub li .sub-multiMeter-bg {position: relative; float: left; width: 20%; height: 100%; text-align: center; padding: 35px 10px; background: #c7ddff url('../images/mobile/img_multimeter.png') no-repeat 50% 60%; background-size: 60%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	.multiMeter li.sub li .sub-multiMeter-bg::after{content: ''; position: absolute; left: 99%; top: 40%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #c7ddff; clear: both;}
	.multiMeter li.sub h2 {color: #2680f6; font-size: 1.2rem;}
	.multiMeter .btn-wrap {float: left; width: 50%; margin-left: 3%;}
	.multiMeter li.sub li .sub-sub {width: 27%; float: left;}
	.multiMeter li.sub li .sub-sub span {position: absolute; bottom: 26%; left: 0; width: 100%;}	
}
@media all and (min-width:641px) and (max-width: 767px) {
	html{ font-size: 10px; }
	.app-head{ padding:0 5rem;}
	.page-content.fixtop .main-cont{left: 0; margin-left: auto; margin-right: auto }
	.page-content .search-wrap .datebox{background-size: 6%;}
	.page-content > div:not(.main-bg), .page-content > ul{padding: 0 5rem;}
	.tab-contents .useInfo-wrap .box{width:100%; padding:1.2rem 1rem;}
	.tab-contents .useInfo-wrap .box:before{left: 1rem;}
	.tab-contents .useInfo-wrap .bankInfo{width: 100%;  margin-top: 1.5rem; margin-left:0; padding:0}
	.page-content .main-bg .water-drop-wrap .water-drop {right: 315px;}
	/* 다계량기 */
	.multiMeter {width: 100%; position: relative; font-size: 1.063rem;}
	.multiMeter > li {float: left;}
	.multiMeter li.main {width: 50%; margin: 50px 0;}
	.multiMeter li.sub {width: 50%; margin: 50px 0;}
	.multiMeter li.main li {position: relative; width: 73%; height: 160px; border-radius: 10px; border:1px solid #f2671e;}
	.multiMeter li.main li:after {content: ''; display: inline-block; width: 90px; height: 20px; background: #dedede; position: absolute; top: 70px; left: 200px;}
	.multiMeter li.sub li {float: unset;}
	.multiMeter li.sub li {position: relative; display: block; width: 100%; height: 160px; border-radius: 10px; background: #eff4ff; margin-bottom: 28px; border: 1px solid #b2cefa;}
	.multiMeter li.sub li:before {content: ''; display: inline-block; width: 54px; height: 20px; background: #dedede; position: absolute; top: 70px; left: -48px;}
	.multiMeter li.sub li:after {content: ''; display: inline-block; width: 20px; height: 186px; background: #dedede; position: absolute; top: 80px; left: -48px;}
	.multiMeter li.sub li:last-child::after {content: none;}
	.multiMeter li.sub li .sub-sub {width: 27%; float: left;}
	.multiMeter li.sub li .sub-sub li {width: auto; height: 158px; text-align:center; font-size: 1.2rem; font-weight: bold; background: #eff4ff url('../images/mobile/img_factory.png') no-repeat center 30%; background-size: 50px; margin-bottom: 0; border: 0;}
	.multiMeter li.sub li .sub-sub li:after {content: none;}
	.multiMeter li.sub li .sub-sub li:before {content: none;}
	.multiMeter li.sub li .sub-sub span {position: absolute; bottom: 22%; left: 0; width: 100%;}
	.multiMeter li.main p {text-align: center; margin-left: 30%; line-height: 23px; padding: 5px 0;}
	.multiMeter li.main p:first-child {padding-top: 10px; padding-bottom: 18px;}
	.multiMeter li.main p span {display: block;}
	.multiMeter .multiMeter-usage {color: #f2671e;}
	.multiMeter .multiMeter-usage, .multiMeter .usage-num {font-weight: bold;}
	.multiMeter .sum-num {font-size: 1.3rem;}
	.multiMeter .btn-wrap {float: left; width: 50%; margin-left: 3%;}
	.multiMeter .btn-round {display: block; width: auto; text-align: center; font-size: 1.5rem; padding: 10px 20px; margin: 10px 0; background: #c7ddff; border-radius: 10px; margin-right: 6px;}
	.multiMeter .btn-round:hover {color: #fff; background:#2680f6;}
	.multiMeter .btn-round:hover span {color: #fff;}
	.multiMeter .btn-round span {display: block;}
	.multiMeter .usage-num {color: #000;}
	.multiMeter li.main .main-multiMeter-bg {position: relative; float: left; width: 30%; height: 100%; text-align: center; padding: 50px 10px; background: #f2671e url('../images/mobile/img_multimeter.png') no-repeat 50% 75%; background-size: 60%; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
	.multiMeter li.main .main-multiMeter-bg::after{content: ''; position: absolute; left: 100%; top: 44%; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #f2671e; clear: both;}
	.multiMeter li.main h2 {color: #fff; font-size: 1.5rem; font-weight: normal;}
	.multiMeter li.main li:before {content: ''; display: inline-block; position: absolute; top: 50%; right: 0; width: 100%; height: 1px; background: #f2671e;}
	.multiMeter li.sub li .sub-multiMeter-bg {position: relative; float: left; width: 20%; height: 100%; text-align: center; padding: 50px 10px; background: #c7ddff url('../images/mobile/img_multimeter.png') no-repeat 50% 75%; background-size: 60%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	.multiMeter li.sub li .sub-multiMeter-bg::after{content: ''; position: absolute; left: 100%; top: 44%; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #c7ddff; clear: both;}
	.multiMeter li.sub h2 {color: #2680f6; font-size: 1.5rem;}	
}
@media only screen and (device-width: 768px) {
	html{ font-size: 10px; }
	.app-head{ padding:0 5rem;}
	.page-content.fixtop .main-cont{left: 0; margin-left: auto; margin-right: auto }
	.page-content .search-wrap .datebox{background-size: 6%;}
	.page-content > div:not(.main-bg), .page-content > ul{padding: 0 5rem;}
	.page-content .main-bg .water-drop-wrap .water-drop {right: 200px;}	
	.page-content .page-head .cont.introduction {position: relative; display: block; min-height: initial; width: 100%; max-width: 1024px; margin: 0 auto; line-height: 1.8rem; padding: 0.7rem 11rem 2rem 0; font-size: 1.4rem; color:#757575;}
	.page-content .page-head .cont.introduction:after {right: 0;}
	.page-content > .tab-contents > li .s-tit{width:64%;}
	.page-content > .tab-contents > li .acceptance-price {width:23%;}
	.page-content > .tab-contents > li.leakFreeze-wrap .acceptance-price {float: left;}
	.page-content > .tab-contents > li .check-accumulate {width: 13%;}
	.chart-legend1 {position: absolute; width: 40%; height: 30px; line-height: 30px; bottom: 5px;  left: 50%; transform: translate(-50%, 0);}
	.search-res .acceptance-price {width: 26%; margin-left: 60% !important;}
	.check-accumulate {width: 12%;}
	.page-content > .tab-contents > li.leakFreeze-wrap .tit {width: 64%;}
	/* 다계량기 */
	.multiMeter {width: 100%; position: relative; font-size: 1.063rem;}
	.multiMeter > li {float: left;}
	.multiMeter li.main {width: 50%; margin: 50px 0;}
	.multiMeter li.sub {width: 50%; margin: 50px 0;}
	.multiMeter li.main li {position: relative; width: 73%; height: 160px; border-radius: 10px; border:1px solid #f2671e;}
	.multiMeter li.main li:after {content: ''; display: inline-block; width: 50px; height: 20px; background: #dedede; position: absolute; top: 70px; left: 240px;}
	.multiMeter li.sub li {float: unset;}
	.multiMeter li.sub li {position: relative; display: block; width: 100%; height: 160px; border-radius: 10px; background: #eff4ff; margin-bottom: 28px; border: 1px solid #b2cefa;}
	.multiMeter li.sub li:before {content: ''; display: inline-block; width: 54px; height: 20px; background: #dedede; position: absolute; top: 70px; left: -54px;}
	.multiMeter li.sub li:after {content: ''; display: inline-block; width: 20px; height: 186px; background: #dedede; position: absolute; top: 80px; left: -54px;}
	.multiMeter li.sub li:last-child::after {content: none;}
	.multiMeter li.sub li .sub-sub {width: 27%; float: left;}
	.multiMeter li.sub li .sub-sub li {width: auto; height: 158px; text-align:center; font-size: 1.3rem; font-weight: bold; background: #eff4ff url('../images/mobile/img_factory.png') no-repeat center 30%; background-size: 50px; margin-bottom: 0; border: 0;}
	.multiMeter li.sub li .sub-sub li:after {content: none;}
	.multiMeter li.sub li .sub-sub li:before {content: none;}
	.multiMeter li.sub li .sub-sub span {position: absolute; bottom: 31%; left: 0; width: 100%;}
	.multiMeter li.main p {text-align: center; margin-left: 30%; line-height: 23px; padding: 5px 0;}
	.multiMeter li.main p:first-child {padding-top: 10px; padding-bottom: 18px;}
	.multiMeter li.main p span {display: block;}
	.multiMeter .multiMeter-usage {color: #f2671e;}
	.multiMeter .multiMeter-usage, .multiMeter .usage-num {font-weight: bold;}
	.multiMeter .sum-num {font-size: 1.3rem;}
	.multiMeter .btn-wrap {float: left; width: 50%; margin-left: 3%;}
	.multiMeter .btn-round {display: block; width: auto; text-align: center; font-size: 1.5rem; padding: 10px 20px; margin: 10px 0; background: #c7ddff; border-radius: 10px; margin-right: 6px;}
	.multiMeter .btn-round:hover {color: #fff; background:#2680f6;}
	.multiMeter .btn-round:hover span {color: #fff;}
	.multiMeter .btn-round span {display: block;}
	.multiMeter .usage-num {color: #000;}
	.multiMeter li.main .main-multiMeter-bg {position: relative; float: left; width: 30%; height: 100%; text-align: center; padding: 16px 10px; background: #f2671e url('../images/mobile/img_multimeter.png') no-repeat 50% 75%; background-size: 60%; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
	.multiMeter li.main .main-multiMeter-bg::after{content: ''; position: absolute; left: 100%; top: 40%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #f2671e; clear: both;}
	.multiMeter li.main h2 {color: #fff; font-size: 26px; font-weight: normal;}
	.multiMeter li.main li:before {content: ''; display: inline-block; position: absolute; top: 50%; right: 0; width: 100%; height: 1px; background: #f2671e;}
	.multiMeter li.sub li .sub-multiMeter-bg {position: relative; float: left; width: 20%; height: 100%; text-align: center; padding: 35px 10px; background: #c7ddff url('../images/mobile/img_multimeter.png') no-repeat 50% 75%; background-size: 60%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	.multiMeter li.sub li .sub-multiMeter-bg::after{content: ''; position: absolute; left: 100%; top: 40%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #c7ddff; clear: both;}
	.multiMeter li.sub h2 {color: #2680f6; font-size: 26px;}		
}
@media only screen and (device-width: 1024px) {
	html{ font-size: 10px; }
	.app-head{ padding:0 5rem;}
	.page-content.fixtop .main-cont{left: 0; margin-left: auto; margin-right: auto }
	.page-content .search-wrap .datebox{background-size: 6%;}
	.page-content > div:not(.main-bg), .page-content > ul{padding: 0 5rem;}
	.page-content .main-bg .water-drop-wrap .water-drop {right: -50px;}	
	.page-content .page-head .cont.introduction {position: relative; display: block; min-height: initial; width: 100%; max-width: 1024px; margin: 0 auto; line-height: 1.8rem; padding: 0.7rem 11rem 2rem 0; font-size: 1.4rem; color:#757575;}
	.page-content .page-head .cont.introduction:after {right: 0;}
	.page-content > .tab-contents > li .s-tit{width:74%;}
	.page-content > .tab-contents > li .acceptance-price {width:16%;}
	.page-content > .tab-contents > li .check-accumulate {width: 10%;}
	.page-content > .tab-contents > li.leakFreeze-wrap .tit {width: 74%;}
	.chart-legend1 {position: absolute; width: 32%; height: 30px; line-height: 30px; bottom: 5px;  left: 50%; transform: translate(-50%, 0);}
	.search-res .acceptance-price {margin-left: 71% !important;}
	.check-accumulate {width: 9%;}
	/* 다계량기 */
	.multiMeter {width: 100%; position: relative; font-size: 1.063rem;}
	.multiMeter > li {float: left;}
	.multiMeter li.main {width: 50%; margin: 50px 0;}
	.multiMeter li.sub {width: 50%; margin: 50px 0;}
	.multiMeter li.main li {position: relative; width: 73%; height: 160px; border-radius: 10px; border:1px solid #f2671e;}
	.multiMeter li.main li:after {content: ''; display: inline-block; width: 66px; height: 20px; background: #dedede; position: absolute; top: 70px; left: 336px;}
	.multiMeter li.sub li {float: unset;}
	.multiMeter li.sub li {position: relative; display: block; width: 100%; height: 160px; border-radius: 10px; background: #eff4ff; margin-bottom: 28px; border: 1px solid #b2cefa;}
	.multiMeter li.sub li:before {content: ''; display: inline-block; width: 66px; height: 20px; background: #dedede; position: absolute; top: 70px; left: -67px;}
	.multiMeter li.sub li:after {content: ''; display: inline-block; width: 20px; height: 188px; background: #dedede; position: absolute; top: 90px; left: -70px;}
	.multiMeter li.sub li:last-child::after {content: none;}
	.multiMeter li.sub li .sub-sub {width: 32%; float: left;}
	.multiMeter li.sub li .sub-sub li {width: auto; height: 158px; text-align:center; font-size: 1.5rem; font-weight: bold; background: #eff4ff url('../images/mobile/img_factory.png') no-repeat center 30%; background-size: 64px;  margin-bottom: 0; border: 0;}
	.multiMeter li.sub li .sub-sub li:after {content: none;}
	.multiMeter li.sub li .sub-sub li:before {content: none;}
	.multiMeter li.sub li .sub-sub span {position: absolute; bottom: 20%; left: 0; width: 100%;}
	.multiMeter li.main p {text-align: center; margin-left: 30%; line-height: 23px; padding: 5px 0;}
	.multiMeter li.main p:first-child {padding-top: 10px; padding-bottom: 18px;}
	.multiMeter li.main p span {display: block;}
	.multiMeter .multiMeter-usage {color: #f2671e;}
	.multiMeter .multiMeter-usage, .multiMeter .usage-num {font-weight: bold;}
	.multiMeter .sum-num {font-size: 1.3rem;}
	.multiMeter .btn-wrap {float: left; width: 45%; margin-left: 3%;}
	.multiMeter .btn-round {display: block; width: auto; text-align: center; font-size: 1.5rem; padding: 10px 20px; margin: 10px 0; background: #c7ddff; border-radius: 10px; margin-right: 6px;}
	.multiMeter .btn-round:hover {color: #fff; background:#2680f6;}
	.multiMeter .btn-round:hover span {color: #fff;}
	.multiMeter .btn-round span {display: block;}
	.multiMeter .usage-num {color: #000;}
	.multiMeter li.main .main-multiMeter-bg {position: relative; float: left; width: 30%; height: 100%; text-align: center; padding: 16px 10px; background: #f2671e url('../images/mobile/img_multimeter.png') no-repeat 50% 75%; background-size: 60%; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
	.multiMeter li.main .main-multiMeter-bg::after{content: ''; position: absolute; left: 100%; top: 41%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #f2671e; clear: both;}
	.multiMeter li.main h2 {color: #fff; font-size: 26px; font-weight: normal;}
	.multiMeter li.main li:before {content: ''; display: inline-block; position: absolute; top: 50%; right: 0; width: 100%; height: 1px; background: #f2671e;}
	.multiMeter li.sub li .sub-multiMeter-bg {position: relative; float: left; width: 20%; height: 100%; text-align: center; padding: 24px 10px; background: #c7ddff url('../images/mobile/img_multimeter.png') no-repeat 50% 75%; background-size: 60%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	.multiMeter li.sub li .sub-multiMeter-bg::after{content: ''; position: absolute; left: 100%; top: 40%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #c7ddff; clear: both;}
	.multiMeter li.sub h2 {color: #2680f6; font-size: 26px;}	
}
/* ================ 미디어 쿼리  높이  ================  */
@media all and (max-height: 639.98px) {
	.login-wrapper{align-items: flex-start; overflow-y:auto;}
	.login-container{padding: 1rem 0 0 0;}
	.login-info .top { margin-bottom: 3rem;}
}
@media all and (min-height: 640px) and (max-height: 767.98px) {
	.login-container{height: 100%; padding:0;}
	.login-container .bg{height:calc(100% - 6rem); min-height: 58rem; margin:3rem auto; } 
}
/*@media all and (min-height: 1025px){
	.page-content.main{position: relative;}
	.page-content.main:before{content:""; position:absolute; top:360px; display:inline-block; width:100%; height:110px; background-color: #f6f6f6; z-index: 1}
	.page-content.main .tab-contents{position: relative; margin-top: -110px !important; background-color: #f6f6f6; z-index: 1}
}*/

.btn_download{
	width: 10rem;
    color: #00b0e4 !important;
    background-color: #ffffff;
    border: 1px solid #00b0e4;
    border-radius: 5px;
    height: 30px;
    float:right;
    cursor:pointer;
}
.btn_download.excel{
	display:flex; justify-content:center; align-items:center; height: 35px; font-family: NotoSansCJKkr-R; font-size: 1.5rem;
	background-color:#0a82b9; color: #ffffff !important; border: 1px solid #0a82b9;
}
.icon-excel{
	width: 18px;
    height: 18px; margin-right:5px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat; background-image: url(../images/mobile/icon_down.png);
	
}