.main-content{
  height:100%;
}

.main-content.sel{
  background: linear-gradient(to bottom, #00abe6, #00abe6, #0081cc);
}



/*** location-info ***/
.location-info{
  background:#fff;
  padding:30px 30px 10px 30px;
  height:130px;
  position:relative;
}

.location-info .tit{
  font-size:38px;
  font-weight:600;
  display: inline-block;
  vertical-align:middle;
}

.location-info .tit span{
  display:block;
  font-size:24px;
  margin-top:8px
}

.location-info .time{
  font-size:16px;
  font-weight:400;
  margin-top:9px
}

.location-info .lbtn{
  position:absolute;
  right:30px;
  bottom:32px;
  text-align:right;
}

.location-info .lbtn a{
  display: inline-block;
  border:1px solid #dee6ea;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  width:40px;
  height:40px;
  border-radius:40px;
  margin:0px 4px;
  background-repeat: no-repeat;
  background-position: center;
}

.location-info .lbtn a:last-child{
  margin-right:0
}

.location-info .refresh{
  background-image: url(../images/refresh_icon_2.png);
  width:14px;
  height:14px;
  background-size:14px
}

.location-info .btn{
  background-image: url(../images/loca_icon_2.png);
  width:14px;
  height:19px;
  background-size:14px
}

/*
.location-info .refresh{
  font-size:44px;
  font-weight:600;
  display: inline-block;
  vertical-align:middle;
  margin-left:3px;
  width:20px;
  height:20px;
  background-image: url(../images/refresh_icon.png);
}

.location-info .btn{
  display: block;
  width:95px;
  text-align:left;
  line-height:31px;
  height:31px;
  border-radius:31px;
  background:#fff url(../images/loca_icon.png) no-repeat 13px center;
  border:1px solid #dee6ea;
  font-weight:400;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  font-size:14px;
  padding-left:32px;
  margin-bottom:10px
}
*/


/*** legend ***/
.legend{
  text-align:center;
  background:#fff;
  padding:10px 25px 0 25px;
}

.legend ul{
  border-top:1px solid #eef0f1;
  border-bottom:1px solid #eef0f1;
  padding:10px
}

.legend li{
  display:inline-block;
  vertical-align:middle;
  position:relative;
  padding-left:17px;
  font-size:14px;
  margin-right:10px
}

.legend li:last-child{
  margin:0
}

.legend li::after{
  content:"";
  width:13px;
  height:13px;
  border-radius:13px;
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
}

.legend li.green::after{background:#22ff72}
.legend li.yellow::after{background:#ffec6a}
.legend li.red::after{background:#ff0749}




/***  bm-view ***/
.bm-view{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  text-align:center;
  color:#fff;
  width:90%;
  padding-top:100px
}

.bm-view .text{
  line-height:22px;
  font-weight:300;
  margin-bottom:50px;
}

.bm-view .text em{
  display:block;
  margin-top:15px;
  font-size:21px;
  line-height:28px;
  font-weight:300
}

.bm-view .plus li{
  float:left;
  width:48%;
}

.bm-view .plus li:last-child{
  float:right;
}

.bm-view .plus li a{
  display:block;
  width:100%;
  line-height:20px;
  border-radius:8px;
  padding-top:95px;
  color:#fff;
  text-align:center;
  position:relative;
}

.bm-view .plus li a::after{
  content:"";
  background-image: url(../images/plus_icon.png);
  background-repeat: no-repeat;
  background-position: center;
  width:80px;
  height:80px;
  border-radius:80px;
  border:2px solid #fff;
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
}

.bm-view .plus li a strong{
  display:block;
}





/*** temperature ***/
.temperature{
  position:absolute;
  width:100%;
  top:274px;
  height:80%;
  background: linear-gradient(to bottom, #00abe6, #00abe6, #00659f, #001527);
}

.temperature.fav{
  top:auto;
  height:100%
}

.temperature.info{
  top:322px
}

.temperature-wrap{
  padding:25px 35px;
  color:#fff;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.3);
  display:flow-root;
  width:100%
}

.temperature-wrap:first-child{
  padding-top:20px
}

.temperature-wrap .tit{
  font-size:14px;
  font-weight:400;
  line-height: normal;
}

.temperature-wrap .num{
  font-size:45px;
  margin-top:5px
}

.temperature-wrap .num span{
  font-size:22px
}

.temperature-wrap .r-cont{
  margin-top:10px;
  text-align: right;
}

.temperature-wrap .unit{
  font-size:20px;
}

.temperature-wrap .today{
  display:block;
  font-weight:300;
  font-size:14px;
  margin-top:10px
}

.temperature-wrap .today span{
  font-weight:300;
  display:block;
  margin-bottom:5px
}

.temperature-wrap .today span:last-child{
  margin:0
}

.temperature-wrap.check{
  text-align:center;
  font-size:45px;
  padding:0;
}

.temperature-wrap.check .num{
  margin:0;
  line-height:120px;
}

.temperature-wrap.empty{
  padding:0
}

.temperature-wrap.empty .l-cont{
  text-align:center;
  width:100%;
  line-height:120px
}

.temperature-wrap.empty .tit{
  position:absolute;
  left:35px;
  top:50%;
  transform: translateY(-50%);
}

.temperature-wrap.empty .num{
  margin:0
}

.temperature-wrap.empty .r-cont{
  font-weight:400;
  position:absolute;
  right:35px;
  top:50%;
  transform: translateY(-50%);
}

.temperature-wrap .b-cont{
  display: inline-block;
  width:100%;
  text-align: center;
  background:rgba(255,255,255,.2);
  line-height:25px;
  border-radius:4px
}

.temperature-wrap .b-cont li{
  display: inline-block;
  padding:0px 10px;
  position: relative;
}

.temperature-wrap .b-cont li::after{
  content:"";
  width:1px;
  height:13px;
  background:rgba(255,255,255,.5);
  position:absolute;
  right:-3px;
  top:11px
}

.temperature-wrap .b-cont li:last-child::after{
  content:none
}

.temperature-wrap .b-cont .tit{
  display:inline-block;
  vertical-align:middle;
  font-size:14px;
  font-weight:400
}

.temperature-wrap .b-cont .num{
  display:inline-block;
  vertical-align:middle;
  font-size:17px;
  margin:5px 0
}

.temperature-wrap .b-cont .num span{
  font-size:12px;
  font-weight:300
}

.temperature .t-green{color:#22ff72}
.temperature .t-yellow{color:#ffec6a}
.temperature .t-red{color:#ff0749}
.temperature .t-blue{color:#004aff}





/*** inspection ***/
.inspection{
  position:absolute;
  top:25%;
  left:50%;
  transform: translate(-50%, -25%);
  width:100%;
  text-align:center;
}

.inspection .area{
  position:relative;
  padding-top:250px;
  font-size:24px;
  line-height:30px;
  color:#fff;
  font-weight: 300
}

.inspection .area::after{
  content:"";
  width:196px;
  height:238px;
  background-image: url(../images/haerang.png);
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
}

.inspection .area span{
  display:block;
  font-weight:300;
  font-size:14px;
  line-height:18px;
  margin-top:10px
}




/*** all, etc ***/
.sub-content{
  height: 70%;
  position: relative;
}

.sub-content h3{
  font-size:21px;
  font-weight:600;
  margin-bottom:15px
}

.sub-content h4{
  font-size:17px;
  font-weight:600;
  margin-bottom:15px
}

.map-wrap{
  height:126%;
  background:#a5d2f2;
  position:relative;
}

.ntc-box{
  background:#2a2f42;
  padding:15px;
  color:#fff;
  line-height:19px;
  font-size:15px
}

.fimg{
  padding:20px;
  border-bottom: 1px solid #eeeeee;
  background:#fafafa
}

.fimg img{
  width:100%;
  height:100%
}




/*** tabmenu ***/
.tabmenu{
  width:100%;
}

.tabmenu ul{
  display: table;
  table-layout: fixed;
  width:100%
}

.tabmenu li{
  display: table-cell;
}

.tabmenu li a{
  display:block;
  text-align:center;
  line-height:46px;
  border-bottom:1px solid #eee
}

.tabmenu li.on a{
  border-bottom: 2px solid #32baf7;
  color: #32baf7;
}

.tabmenu li img{
  display: inline-block;
  vertical-align:middle;
  height:28px;
  -webkit-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

.tabmenu li.on img{
  -webkit-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: grayscale(0);
}






/*** manual-info ***/
.manual-wrap{
  padding:20px 20px 100px 20px;
  position:relative;
}

.manual-info img{
  width:100%
}





/*** cont-box ***/
.cont-box{
  background:#fafafa;
  border-top:1px solid #eef0f1;
  padding:25px 20px;
  width:100%;
  position: absolute;
  bottom:0;
  left:0;
  box-shadow: 0px -10px 10px rgb(0 0 0 / 5%);
}

.cont-box .close{
  background-image: url(../images/close_sml_btn.png);
  background-repeat: no-repeat;
  background-position: center;
  background-color:#fafafa;
  background-size:11px;
  border: 1px solid #eef0f1;
  border-bottom:0;
  width:30px;
  height:30px;
  position:absolute;
  top:-30px;
  right:0
}

.cont-box .tit{
  font-size:20px;
  margin-bottom:10px;
  position:relative;
}

.cont-box .tit img{
  display:inline-block;
  vertical-align:middle;
}

.cont-box .tit .bookmark{
  display:inline-block;
  vertical-align:middle;
  line-height:0;
  margin:-3px 0 0 4px
}

.cont-box .tit .bookmark img{
  height:16px
}

.cont-box .time{
  font-size:13px;
  color:#888;
  font-weight:400;
  position:absolute;
  right:0;
  top:2px
}

.cont-box .box{
  border:1px solid #eef0f1;
  background:#fff;
  border-radius:8px;
  padding:30px 20px 20px;
  display:inline-block;
  width:100%;
  text-align:center;
}

.cont-box .box .sea{
  display:inline-block;
  width:100%;
  margin-top:20px;
  padding:15px;
  background:#fafafa;
  border:1px solid #eef0f1;
  border-radius:5px
}

.cont-box .box .sea li{
  float:left;
  width:50%;
  font-weight:300;
  position:relative;
  font-size:15px
}

.cont-box .box .sea li::after{
  content:"";
  width:1px;
  height:15px;
  background:#ddd;
  position:absolute;
  right:0;
  top:0
}

.cont-box .box .sea li:last-child::after{
  content:none
}

.cont-box .box .sea li .tt{
  display:inline-block;
  margin-right:5px
}



/*** map-legend ***/
.map-legend{
  background:rgba(31,47,87,.9);
  display: inline-block;
  padding:15px;
  border-radius:5px;
  position:absolute;
  bottom:30px;
  left:10px
}

.map-legend li{
  color:#fff;
  margin-bottom:4px;
  font-size:12px
}

.map-legend li:last-child{
  margin-bottom:0
}

.map-legend li img{
  display:inline-block;
  vertical-align:middle;
  height:14px;
  margin-right:3px
}

.iw_inner2{position:absolute; left:10px !important; border-radius: 5px; bottom:30px; background:rgba(31,47,87,.9);}
.iw_inner2 li{margin-bottom:4px; font-size:12px; color:#fff;}
.map-iw_inner2 li:last-child{  margin-bottom:0}
.iw_inner2 li img{display:inline-block; vertical-align:middle; height:14px; margin-right:3px}

#legendUl{padding:15px;}

.map_sbtn{ height:32px;  background:rgba(31,47,87,.9); border-radius: 5px 5px 0 0; position: relative;}

.sbtn_plus{    display: none;  top: 10px;  position: absolute;    right: 20px; width:12px; height:12px; background:url(../images/sbtn_img_white.png) 0 50% no-repeat ;    overflow: hidden;    text-indent: -9999px;}
.sbtn_minus{    display: block;  top: 10px;  position: absolute;    right: 20px; width:12px; height:12px; background:url(../images/sbtn_img_white.png) -105px 50% no-repeat ;    overflow: hidden;    text-indent: -9999px;}


/*** locapop ***/
.locapop{
  background:#fafafa;
  padding:15px;
  display:inline-block;
  position:absolute;
  left:50px;
  top:50px;
  border-radius:7px
}

.locapop .tit{
  font-size:16px;
  font-weight:600;
  margin-bottom:10px
}

.locapop .btn a{
  display:block;
  width:110px;
  text-align:center;
  line-height:30px;
  font-size:13px;
  border:1px solid #eef0f1;
  background:#fff;
  box-shadow: 0px 0px 2px rgb(0 0 0 / 5%);
  margin-bottom:5px
}

.locapop .btn a img{
  display:inline-block;
  vertical-align:middle;
  margin-right:2px
}

.locapop .btn a:last-child{
  margin-bottom:0
}





/*** location-list ***/
.location-list{
  padding:25px
}

.location-list .list{
  display: inline-block;
  width:100%;
  padding-bottom:10px;
  border-bottom:1px solid #eef0f1;
  margin-bottom:40px
}

.location-list .list li{
  float:left;
  margin:4px 2px
}

.location-list .list li a{
  display:inline-block;
  line-height:30px;
  padding:0px 10px;
  background:#fafafa;
  border:1px solid #dce1e3;
  border-radius:30px;
  font-size:15px
}

.location-list .bm-list{
  margin-top:15px
}

.location-list .bm-list li{
  padding:0 12px;
  line-height:50px;
  display: inline-block;
  width:100%;
  position:relative;
  border:1px solid #dce1e3;
  border-radius:5px;
  margin-bottom:10px
}

.location-list .bm-list li:last-child{
  margin:0
}

.location-list .bm-list .r-cont{
  float:none;
  position:absolute;
  right:12px;
  top:0
}

.location-list .bm-list .tit{
  display:inline-block;
  vertical-align:middle;
}

.location-list .bm-list .tag{
  display:inline-block;
  vertical-align:middle;
  line-height:24px;
  background:#00c7ca;
  color:#fff;
  font-size:13px;
  border-radius:3px;
  width:60px;
  text-align:center;
}

.location-list .bm-list .tag.pp{
  background:#003153
}

.location-list .bm-list .infobtn{
  display:inline-block;
  vertical-align:middle;
  margin-left:3px;
  line-height:24px;
  border: 1px solid #dce1e3;
  background:#fff;
  font-size:13px;
  border-radius:3px;
  padding:0px 6px;
  box-shadow: 0px 5px 10px rgb(0 0 0 / 3%);
}

.location-list .bm-list .bookmark{
  display: inline-block;
  vertical-align:middle;
  margin-left:3px;
  width:16px;
  height:16px;
  background-size:16px;
  background-image: url(../images/bookmark_icon_off.png);
}

.location-list .bm-list .bookmark.on{
  background-image: url(../images/bookmark_icon.png);
}

.location-list section h4{
  font-size:19px;
  padding-left:13px;
  position:relative;
}

.location-list section h4::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:10px;
  background:#fff;
  border:3px solid #32baf7;
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
}

.location-list .ntc-text{
  display:block;
  font-size:14px
}

.location-list .ntc-text img{
  height:14px;
  display:inline-block;
  vertical-align:middle;
}




/*** sub-temperature ***/
.sub-temperature{
  display:inline-block;
  width:100%
}

.sub-temperature .list{
  float:left;
  width:33.3%
}

.sub-temperature .list .tt{
  font-size:14px
}

.sub-temperature .list .num{
  font-size:30px;
  font-weight:600;
  margin:5px 0
}

.sub-temperature .list .num span{
  font-size:18px
}

.sub-temperature .list .unit{
  font-size:14px;
  color:#00abe6;
  font-weight:400
}

/*** bt-menu ***/
.bt-menu{
  background:#fff;
  height:70px;
  width:100%;
  border-top:1px solid #eee;
  box-shadow: 0px -15px 10px rgb(0 0 0 / 3%);
  position:fixed;
  bottom:0;
  left:0;
}

.bt-menu li{
  float:left;
  width:33.3%;
  text-align:center;
  position:relative;
}

.bt-menu li::after{
  content:"";
  width:1px;
  height:70px;
  background:#eee;
  position:absolute;
  right:0;
  top:0
}

.bt-menu li a{
  display:block;
  font-size:14px;
  line-height:18px;
  height:70px;
  padding: 15px 20px 15px 40px;
  text-align:center;
  word-break: keep-all;
  background-repeat: no-repeat;
}

.bt-menu li:first-child a{
  background-image: url(../images/menu_icon02.png);
  background-position: 10% center;
}

.bt-menu li:nth-child(2) a{
  background-image: url(../images/menu_icon03.png);
  background-position: 10% center;
}

.bt-menu li:nth-child(3) a{
  background-image: url(../images/go_icon.png);
  background-position: 10% center;
}



/*** text ***/
.scon-text{
  padding: 30px 20px 100px 20px;
  line-height: 23px;
  font-size: 15px;
}

.scon-text section{
  margin-bottom:30px
}

.scon-text section:last-child{
  margin-bottom:0
}

.scon-text .box{
  background:#fafafa;
  border:1px solid #eee;
  border-radius:6px;
  padding:15px;
}

.scon-text h5{
  font-weight:700;
  padding-left:12px;
  position:relative;
  margin-bottom:10px
}

.scon-text h5::after{
  content:"";
  width:5px;
  height:5px;
  background: linear-gradient(75deg, #26a8f2, #3cc7fb);
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
}

.about-text{
  padding:30px 20px;
  font-size:17px;
  font-weight:400;
  line-height:24px
}

.about-text .stext{
  font-size:14px;
  line-height:20px;
  display:block;
  margin-top:20px
}

.about-text strong{
  display:block;
  font-size:21px;
  line-height:27px;
  text-align:center;
  margin-bottom:20px;
}

.about-text strong em{
  color:#26a8f2;
}

.about-text img{
  width:100%
}





/*** water-group ***/
.water-group{
  position: relative;
  height:67px;
  width: 100%;
  overflow: hidden;
  /*background: linear-gradient(to bottom, #3ec4fc, #0081cc);*/
  background:#fff
}

.water-group .water{
  position: absolute;
  width: 200%;
  height:100%;
  background-size: 50% 100%;
  background-image: url('../images/wave.png')
}

.water-group .water1{
  top:20px;
  left: -100%;
  opacity: 0.2;
  animation: water-right 20s infinite linear;
}

.water-group .water2{
  top:30px;
  left: 0;
  opacity: 0.3;
  animation: water-left 30s infinite linear;
}

.water-group .water3{
  top:45px;
  left: -100%;
  animation: water-right 40s infinite linear;
}

@keyframes water-right{
  0% {
    transform: translateX(0) translateZ(0) scaleY(1)
  }
  50% {
    transform: translateX(25%) translateZ(0) scaleY(0.85)
  }
  100% {
    transform: translateX(50%) translateZ(0) scaleY(1)
  }
}

@keyframes water-left{
  from{
    transform: translate(0%,0px);
  }
  to{
    transform: translate(-50%,0px);
  }
}





/*** slide-arrow ***/
.slide-arrow{
  position:absolute;
  width:100%;
  top:50%;
  transform: translateY(-50%);
  z-index:1;
  padding:0px 7px
}

.slide-arrow a{
  display:block;
  width:17px;
  height:32px
}

.slide-arrow .prev{
  float:left;
  background-image: url(../images/slide_prev_icon.png);
}

.slide-arrow .next{
  float:right;
  background-image: url(../images/slide_next_icon.png);
}




/*** intro ***/
.intro{
  background: linear-gradient(to bottom, #00abe6, #00abe6, #0081cc);
}

.intro .i-copy{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:100%;
  text-align:center;
}

.intro .i-copy img{
  width:150px;
}

.intro .i-copy .tt{
  display:block;
  text-align:center;
  margin-top:20px;
  font-size:25px;
  font-weight:700;
  color:#fff
}

.intro .i-copy .tt span{
  display:block;
  font-size:13px;
  font-weight:200;
  margin-top:10px
}




/*** open-pop ***/
.open-pop {
  position: absolute;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  overflow-y: auto;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #e2e7eb;
  overflow: hidden;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.05);
}

.open-pop .head {
  background:#f6f6f6 url(../images/ntc_icon.png) no-repeat 15px center;
  line-height:44px;
  font-size:20px;
  border-bottom:1px solid #e1e1e1;
  padding-left:40px
}

.open-pop .close {
  background: url(../images/close_sml_btn.png) no-repeat center center;
  background-size: 16px;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 15px;
  top: 14px
}

.open-pop .cont {
  display: inline-block;
  width:100%;
  line-height:33px;
  word-break: keep-all;
  padding:25px 20px;
  text-align:center;
  font-size: 22px
}

.open-pop .cont strong{
  color:#009fe6
}

.open-pop .cont img{
  display: inline-block;
  vertical-align:middle;
}

.open-pop .bar {
  line-height:44px;
  padding-right:15px;
  text-align:right;
  font-size:18px;
  border-top:1px solid #e1e1e1
}