html,body{
    margin:0;
    padding:0;
    font-size: 62.5%;
    overflow: hidden;
}
.bodybg{
    width: 100vw;
    height: 100vh;
    background-image: url("../img/bodybgi.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
}
.headdiv{
    width: 70vw;
    height: 12vh;
    background-image: url("../img/titlebg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position:bottom center;
    /*text-align: center;*/
    overflow: hidden;
    float:left;
    margin-left:15vw;
}
.headimg{
    height:4.6vh;
    width:auto;
    float:left;
    margin-top:3vh;
    margin-left:10vw;
    cursor: pointer;
}
.headimg2{
    height:4.6vh;
    width:auto;
    float:right;
    margin-top:3vh;
    margin-right:10vw;
    cursor: pointer;
}
.titleimg{
    height:6vh;
    width:auto;
    margin-top:3vh;
}
.bodydiv{
    width:100vw;
    height:88vh;
    float:left;
}
.onecolumn{
    width:29vw;
    height:88vh;
    float:left;
    margin-left:1vw;
    /*border:1px solid #ffffff;*/
}
.twocolumn{
    width:38vw;
    height:88vh;
    float:left;
    margin-left:1vw;
    /*border:1px solid #ffffff;*/
}
.threecolumn{
    width:29vw;
    height:88vh;
    float:left;
    margin-left:1vw;
    /*border:1px solid #ffffff;*/
}
.rowcolumn{
    width:100%;
    height:29vh;
    float:left;
}
.rowcolumn2{
    width:100%;
    height:30vh;
    float:left;
}
.weatherday{
    width:100%;
    height:26vh;
    float:left;
}
.twocontent{
    width:100%;
    height:20vh;
    float:left;
    margin-top:1vh;
}
.weatherleft{
    width:2.5%;
    height:20vh;
    background-image: url("../img/left.png");
    background-repeat: no-repeat;
    background-size: 100% 20vh;
    float:left;
}
.weatherright{
    width:2.5%;
    height:20vh;
    background-image: url("../img/right.png");
    background-repeat: no-repeat;
    background-size: 100% 20vh;
    float:right;
}
.mapdiv{
    width:100%;
    height:61vh;
    float:left;
    text-align: center;
    /*border:1px solid blue;*/
}
.mpa{
    width:auto;
    height:61vh;
    /*margin-top:0.5vh;*/
    cursor: pointer;
}
.mtitle{
    width:100%;
    height:5vh;
    float:left;
    background-image: url("../img/smalltitlebg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position:left center;

}
.titlest{
    font-size:1.75rem;
    line-height: 5vh;
    color:#0efcff;
    padding-left:1.5vw;
}
.onecontent{
    width:100%;
    height:22vh;
    float:left;
    /*border:1px solid #6076ad;*/
    margin-top:1vh;
    border-right:1px solid #6076ad;
    border-left:1px solid #6076ad;
}
.leftframe{
    width:2.5%;
    height:22vh;
    background-image: url("../img/left.png");
    background-repeat: no-repeat;
    background-size: 100% 22vh;
    float:left;
}
.rightframe{
    width:2.5%;
    height:22vh;
    background-image: url("../img/right.png");
    background-repeat: no-repeat;
    background-size: 100% 22vh;
    float:right;
}
.onenr{
    width:95%;
    height:22vh;
    float:left;
    border-top:1px solid #6076ad;
    border-bottom:1px solid #6076ad;
}
.content{
    width:100%;
    height:21vh;
    float:left;
    font-size:1.4rem;
    color:#708acc;
    line-height: 3.4vh;
    margin-top:0.5vh;
}
.outer-container {
    position: relative;
    overflow: hidden;
}
.inner-container {
    width:105%;
    position: absolute; left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* for Chrome */
.inner-container::-webkit-scrollbar {
    display: none;
}
.halfcon{
    width:50%;
    height:22vh;
    float:left;
    /*border:1px solid #ffffff;*/
}

.circle {
    position: relative;
    margin: 0 auto;
    width: 22vmin;
    height: 22vmin;
    margin-top:1.5vh;
    cursor: pointer;
}
.percent-circle {
    position: absolute;
    height: 100%;
    /*background: #4a9bff;*/
    overflow: hidden;
}
.percent-circle-left {
    left: 0;
    width: 11vmin;
    border-radius: 11vmin 0 0 11vmin/11vmin 0 0 10vmin;
}
.left-content {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform-origin: right center;
    border-radius: 12vmin 0 0 12vmin/12vmin 0 0 12vmin;
    background-image: conic-gradient(from 130deg at 100% 50%,#2172af,#189dc1, #0eccd4, #0eccd5,#0eccd5);
    transform: rotate(50deg);
}
.left-content2 {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform-origin: right center;
    border-radius: 12vmin 0 0 12vmin/12vmin 0 0 12vmin;
    background-image: conic-gradient(from 130deg at 100% 50%,#fe8e19,#fe9915, #feb80b, #fecf03,#fed501,#fed501,#fed501,#fed501);
    transform: rotate(50deg);
}
.percent-circle-right {
    right: 0;
    width: 11vmin;
    /*transform-origin: right center;*/
    border-radius: 0 11vmin 11vmin 0/0 11vmin 11vmin 0;
    /*border:1px solid #0eccd5;*/
}
.right-content {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform-origin: left center;
    border-radius: 0 12vmin 12vmin 0/0 12vmin 12vmin 0;
    background: #0eccd5;
     transform: rotate(-150deg);
}
.right-content2 {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform-origin: left center;
    border-radius: 0 12vmin 12vmin 0/0 12vmin 12vmin 0;
    background: #fed501;
    transform: rotate(-120deg);
}
.c-c-inside {
    position: absolute;
    top: 4vmin;
    left: 4vmin;
    width: 14vmin;
    height: 14vmin;
    background: #091225;
    border-radius: 100%;
    /*border:1px solid #0eccd5;*/
}
.onecirclen{
    width: 14vmin;
    height: 9vmin;
    font-size:2.7rem;
    color:#ffffff;
    float:left;
    line-height: 12vmin;
    text-align: center;
}
.subt{
    width: 14vmin;
    height: 5vmin;
    text-align: center;
    line-height: 3vmin;
    font-size:1.45rem;
    color:#708acc;
    float:left;
}

.closes{
    position:absolute;
    width:3vmin;
    height:3vmin;
    top:0.5vh;
    left:94.5%;
    z-index: 3000;
    cursor:pointer;
}
.breadarea{
    position: absolute;
    width:31vw;
    height:29vh;
    left:0.5vw;
    top:42vh;
    background: rgba(15,18,45,0.99);
    display: none;
}
.breadone{
    width:100%;
    height:29vh;
    float:left;
}
.bready{
    width:50%;
    height:29vh;
    float:left;
}
.onecontent2{
    width:100%;
    height:23vh;
    float:left;
    margin-top:1vh;
    border-right:1px solid #6076ad;
    border-left:1px solid #6076ad;
}
.leftframe2{
    width:2.5%;
    height:23vh;
    background-image: url("../img/left.png");
    background-repeat: no-repeat;
    background-size: 100% 23vh;
    float:left;
}
.rightframe2{
    width:2.5%;
    height:23vh;
    background-image: url("../img/right.png");
    background-repeat: no-repeat;
    background-size: 100% 23vh;
    float:right;
}
.onenr2{
    width:95%;
    height:23vh;
    float:left;
    border-top:1px solid #6076ad;
    border-bottom:1px solid #6076ad;
}
.onenr3{
    width:95%;
    height:23vh;
    float:left;
    border-top:1px solid #6076ad;
    border-bottom:1px solid #6076ad;
    text-align: center;
}
.fzlic{
    width:96%;
    height:22vh;
    margin-top:0.5vh;
}
.weathercon{
    width:93%;
    height:18vh;
    margin-top:1vh;
    margin-left:1%;
    float:left;
    background-color: #0a152c;
    border:1px solid #6076ad;
}
.tempdiv{
    width:36%;
    height:15vh;
    float:left;
    margin-top:1.5vh;
    border-right:1px solid #6076ad;
}
.marketdiv{
    width:63%;
    height:15vh;
    float:left;
    margin-top:1.5vh;
}
.temp{
    font-size:6.5rem;
    color:#71f8fd;
    font-weight:800;
    padding-left:6%;
    font-stretch:condensed;
    line-height: 1;
}
.unit{
    font-size:3.5rem;
    color:#71f8fd;
    padding-left:1%;
    font-stretch:condensed;
}
.subtemp{
    font-size:1.3rem;
    color:#71f8fd;
    line-height: 0.9;
}
.threeone{
    width:100%;
    height:5vh;
    float:left;
}
.square{
    width:2vmin;
    height:2vmin;
    margin-top:1.5vh;
    background-color: #f2f350;
    border-radius: 10%;
    float:left;
    margin-left:8%;
}
.marketinfo{
    font-size:1.4rem;
    color:#ffffff;
    line-height: 5vh;
    padding-left:2.5%;
}
.ravideo{
    width:100%;
    height:21.8vh;
}

.comdiv{
    width:100%;
    height:auto;
    float:left;
    text-align: center;
}
.raintop{
    margin-top:0.5vh;
}
.subtitle{
    width:11vw;
    height:6vh;
    margin-top:3.7vh;
    float:right;
    margin-right:1vw;
}
.copany{
    width:100%;
    /*height:3vh;*/
    font-size:1.3rem;
    font-weight: 600;
    color:#ffffff;
    line-height: 2.5vh;
    float:left;
    text-align: right;
}