@import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Noto+Sans+KR:300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Hepta+Slab:100,200,300,400,500&display=swap');

@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding&display=swap');

@font-face {
    font-family: '111';
    src: url('../font/111.eot');
    src: url('../font/111.eot?#iefix') format('embedded-opentype'),
        url('../font/111.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MBatang';
    src: url('../font/MBatang.svg#MBatang') format('svg'),
        url('../font/MBatang.ttf') format('truetype'),
        url('../font/MBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#bg_sunny_day0 {
    background: #d5defb;

}

#bg_sunny_day1 {
    background: #00c667;

}

#bg_sunny_day2 {
    background: #5cdeff;

}

#bg_sunny_day3 {
    background: #ff9176;

}

#bg_sunny_day4 {
    background: #ffcb21;

}

#bg_sunny_night0 {
    background: #372aeb;


}

#bg_sunny_night1 {
    background: #ffa6d7;


}

#bg_sunny_night2 {
    background: #6d2fe3;

}

#bg_sunny_night3 {
    background: #2458ff;

}

#bg_sunny_night4 {
    background: #e7677e;

}

#bg_cloud_day0 {
    background: #eeeeee;

}

#bg_cloud_day1 {
    background: #9fb9bc;
}

#bg_cloud_day2 {
    background: #a59884;
}

#bg_cloud_day3 {
    background: #ba9495;
}

#bg_cloud_day4 {
    background: #b45252;
}

#bg_cloud_night0 {
    background: #373a7d;
}

#bg_cloud_night1 {

    background: #496ad1 !important;
}

#bg_cloud_night2 {
    background: #605681;
}

#bg_cloud_night3 {
    background: #5a8f81;
}

#bg_cloud_night4 {
    background: #ba3b4d;
}

#bg_rain_day0 {
    background: #44c747;

}

#bg_rain_day1 {
    background: #0074ff;
}

#bg_rain_day2 {
    background: #ea5f00;
}

#bg_rain_day3 {
    background:#a5a3a3;
}

#bg_rain_night0 {
    background: #6d2fe3;
}

#bg_rain_night1 {
    background: #496ad1;
}

#bg_rain_night2 {
    background: #6d410e;
}

#bg_rain_night3 {
    background: #5c5c5d;
}

#bg_snow_day {
    background: #d5defb !important;
}

#bg_snow_night {
    background: #5d02c6 !important;
    /*background: #d5defb !important;*/
}




html {

    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

p {
    font-family: 'NeueMachina-Regular';
}

a {
    text-decoration: none;
}

#server_time {
    position: fixed;
    width: 60%;

    left: 20%;
    bottom: 5px;
    text-align: center;

    font-family: 'Hepta Slab' !important;
    font-style: normal;
    font-weight: 300;
    font-size: 56px;
    z-index: 999;
    /* identical to box height */


    color: #000000;

}

.W {
    position: fixed;
    width: 40%;
    height: ;
    left: 30%;
    top: -5px;
    text-align: center;

    font-style: normal;
    font-weight: 200;
    font-size: 56px;
    /*line-height: 26px;*/
    color: #000000 !important;
    z-index: 999;
}

.temp {
    position: fixed;
    width: 30%;

    left: 10px;
    bottom: 5px;
    text-align: left;
    font-family: 'Hepta Slab' !important;
    font-style: normal;
    font-weight: 300;
    font-size: 56px;
    /*line-height: 26px;*/
    color: #000000 !important;
    z-index: 999;
}

.rainmm {
    position: fixed;
    width: 30%;
    font-family: 'Hepta Slab' !important;
    right: 10px;
    bottom: 5px;
    text-align: right;

    font-style: normal;
    font-weight: 300;
    font-size: 56px;
    /*line-height: 26px;*/
    color: #000000 !important;
    z-index: 999;
}

#f_weather {
    font-family: 'Noto Sans KR' !important;
}

.list_name {
    font-family: 'Hepta Slab' !important;
}

#list_name_main1 {
    position: absolute;
    width: 409px;
    top: 11px;
    font-style: normal;
    font-weight: 300;
    font-size: 56px;
    line-height: 53px;
    color: #000000;
    z-index: 999;

}

#list_name_main2 {
    position: absolute;
    width: 359px;
    right: 0px;
    height: 66px;
    top: 25px;
    font-style: normal;
    text-align: right;
    right: 13px;
    font-weight: 300;
    font-size: 56px;
    line-height: 23px;
    color: #000000;
}

#main_content {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    height: 100%;
    z-index: 990;
    text-align: center;
}

#content_comment {
    position: absolute;
    top: 48.3%;
    width: 100%;
    left: 0%;
    line-height: 27px;
    font-weight: normal !important;

    z-inex: 990;
    font-family: 'NeueMachina-Regular' !important;
    letter-spacing: 0.5px;
}

#list_name_sub1 {
    position: absolute;
    width: 299px;
    top: 11px;
    font-style: normal;
    font-size: 56px;
    line-height: 53px;
    color: #000000;
    z-index: 998;
}

#list_name_sub2 {
    position: absolute;
    width: 359px;
    right: 0px;
    height: 66px;
    top: 25px;
    text-align: right;
    right: 13px;
    font-size: 56px;
    line-height: 23px;
    color: #000000;
    z-index: 998;
}

#right_side_about {
    width: 49.5%;
    position: absolute;
    left: 50.5%;
}

#right_side_iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #000000;
    top: 49px;
}

#left_side {
    width: 49.5%;
    position: absolute;
    left: 0;
}

#left_side_list {
    position: absolute;
    width: 99%;
    height: 100%;
    left: 0%;
    line-height: 35px;
    top: 4px;
    color: #000000;
    font-weight: 500;
    font-size: 20px !important;
}

#top_border {
    border-bottom: 1px solid #000000;
    padding-top: 10px;
}

#top_border span {
    position: absolute;
    right: 0px;
    width: 125px;
    text-align: right;
    margin-top: -1px;
}

/*
.list_top_border
{
  border-bottom:1px solid #000000;
  padding-top:6px;
  padding-left:5px;
  padding-bottom:6px;
  font-family:'penbatang1' !important;
}
.list_top_border span
{
position: absolute;
right:0px;
width:125px;
text-align:right;
margin-top:2px;
}

 */

.content_row {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 100%;
    z-index: 989;
}

.cspan,
.cat_b {
    cursor: pointer !important;
}

@media screen (min-width:700px)and (max-width:1030px) {

    .rainmm,
    .W,
    .temp,
    .list_name,
    #server_time {
        font-size: 44px !important;
    }

    .W {
        top: 5px;
    }

    #a_list2 {
        position: absolute;
        top: 41px;
    }

}

@media screen (max-width:700px) {

    .rainmm,
    .W,
    .temp,
    .list_name,
    #server_time {
        font-size: 44px !important;
    }

    .W {
        top: 5px;
    }

    #a_list2 {
        position: absolute;
        top: 41px;
    }

}