/* LAYOUT */
.wrap {
position: fixed;
width: 100%;
height: 100%;
}
.map {
position: fixed;
width: 100%;
height: 100%;
background-size: 100%;
background-color: #eee;
}
.gnb {
position: absolute;
top: 0;
width: 100%;
padding: 3px;
box-sizing: border-box;
z-index: 150;
}
.nav {
-ms-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.nav.transform {
position: absolute;
/* top: 50px;
left: 10px;
width: 150px;
height: 200px; */
border-radius: 5px;
/* background-color: rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 1px #000; */
opacity: 0.1;
transition-duration: 700ms;
}
.hidden {
display: none;
}
.scale {
position: absolute;
right: 2px;
bottom: 2px;
}
.section {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 100;
}
.layerRight {
box-sizing: border-box;
}

/* /// GNB /// */
.gnbBtns {
position: relative;
}
.gnbBtns>div {
display: inline-block;
height: 35px;
border-radius: 17px;
background-color: rgba(0, 0, 0, 0.3);
}

/* /// NAV /// */
.navBtn {
margin-bottom: 5px;
}
.navBtn * {
vertical-align: middle;
}
.navBtn > button {
background-color: transparent;
}
button.reset {
width: 22px;
height: 22px;
text-indent: -999em;
border-radius: 10px;
background-image: url(../images/svg/reload_wh.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 18px auto;
background-color: rgba(0,0,0,0.3);
}
button.navClose {
display: inline-block;
padding: 3px 5px 4px 20px;
height: 22px;
color: #fff;
border-radius: 12px;
font-size: 11px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.3);
background-image: url(../images/svg/nav_up_wh.svg);
background-repeat: no-repeat;
background-position: left 3px center;
background-size: 15px auto;
}
button.extend {
display: inline-block;
padding: 3px 5px 4px 20px;
height: 22px;
color: #fff;
border-radius: 12px;
font-size: 11px;
background-color: rgba(0, 0, 0, 0.3);
background-image: url(../images/svg/nav_down_wh.svg);
background-repeat: no-repeat;
background-position: left 3px center;
background-size: 15px auto;
}

/* accordion */

button.menu {
width: 30px;
height: 30px;
text-indent: -999em;
background: url(../images/svg/menu_wh.svg) no-repeat center center;
}
.navSum {
position: absolute;
top: 35px;
left: 5px;
max-width: 150px;
color: #fff;
cursor: pointer;
}
.navSum > div.navSumWrap {
padding: 7px;
border-radius: 10px;
background: rgba(0,0,0,0.7);
box-shadow: 1px 1px 1px #000;
}
.navSum>ul>li {
line-height: 1.7em;
}

/* /// HELP /// */
.blockWrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 50px 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 500;
}
.blockLayer {
position: relative;
width:300px;
top: 50%;
margin: 0 auto;
border-radius: 20px;
border: 1px solid #333;
background-color: #fff;
}
.blockLayerTit {
padding: 20px 20px 10px;
font-size: 25px;
color: #000;
font-weight: 700;
border-bottom: 1px dotted #ccc;
}
.blockLayerTit > button {
position: absolute;
top: 3px;
right: 3px;
width: 35px;
height: 35px;
text-indent: -999em;
background: url(../images/svg/x_bk.svg) no-repeat center center;

}
.blockContents {
padding: 15px;
text-align: center;
}
.blockContents > button {
margin: 0 5px;
}


.share-img {
margin-top: -90px;
}

/* TAB */
.tab {
display: flex;
border: 1px solid #fff;
}
.tab li {
flex: auto;
padding: 20px;
text-align: center;
font-size: 20px;
cursor: pointer;
border-bottom: 3px solid #888;
}
.tab li.on {
color: #009ae1;
border-bottom: 3px solid #009ae1;
}

/* CHECKBOX */
input[type=checkbox] {
display: inline-block;
height: 20px;
width: 20px;
/* visibility: hidden; */
}
input.check {
height: 16px;
width: 16px;
}
label.slide {
cursor: pointer;
text-indent: -9999px;
width: 27px;
height: 15px;
margin-top: 2px;
background: grey;
display: block;
border-radius: 15px;
position: relative;
}
label.slide:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
background: #fff;
border-radius: 10px;
transition: 0.1s;
}
input:checked+label.slide {
background: #1769d6;
}
input:checked+label.slide:after {
left: calc(100% - 2px);
transform: translateX(-100%);
}
label:active:after {
width: 27px;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
position: absolute;
content: "";
height: 10px;
width: 10px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .2s;
transition: .2s;
}

/* /// LAYER RIGHT /// */
.layerRight {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 10px;
border-left: 1px solid #ccc;
background-color: rgba(255, 255, 255, 1.0);
box-shadow: 1px 1px 1px #000;
z-index: 200;
}
.layerRight > ul li {
margin: 20px 0;
}
.layerRight  > ul.dline {
margin-top: 7px;
padding-top: 5px;
border-top: 1px dotted #ccc;
}


/* LAYER / 공유 */
.layer.share {
top: 40px;
right: 50px;
}
.capture {
cursor: pointer;
padding-left: 30px !important;
background: url(../images/svg/photo_bk.svg) no-repeat center center;
}
.print {
cursor: pointer;
padding-left: 30px !important;
background: url(../images/svg/print_bk.svg) no-repeat center center;
}
.shareImg {
padding-left: 30px !important;
background: url(../images/svg/png_bk.svg) no-repeat center center;
}
.shareGif {
padding-left: 30px !important;
background: url(../images/svg/gif_bk.svg) no-repeat center center;
}
.share-logo > a {
display: inline-block;
width: 60px;
height: 60px;
margin: 0 5px;
text-indent: -999em;
}
.kakao {
background: url(../images/share_loges.png) no-repeat 0px 0px;
}
.facebook {
background: url(../images/share_loges.png) no-repeat -100px 0px;
}
.twitter {
background: url(../images/share_loges.png) no-repeat -200px 0px;
}

/* /// COMMON /// */
/* BUTTON */
button.ico {
width: 30px;
height: 30px;
text-indent: -999em;
border-radius: 50%;
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;
}
button.on {
background-color: rgba(0, 0, 0, 0.5);
}
button.ico:hover {
background-color: rgba(0, 0, 0, 0.5);
}
button.clicked  {
background-color: rgba(0, 0, 0, 0.5);
}
button.search {
background-image: url(../images/svg/search_wh.svg);
}
button.bookmark {
background-image: url(../images/svg/bookmark_wh.svg);
width: 25px;
}
button.location {
background-image: url(../images/svg/focus_wh.svg);
}
button.maptype {
background-image: url(../images/svg/map_wh.svg);
}
button.share {
background-image: url(../images/svg/share_wh.svg);
}
button.guide {
background-image: url(../images/svg/info_wh.svg);
background-size: 28px;
}
button.setup {
background-image: url(../images/svg/setup_wh.svg);
}
button.distance {
background-image: url(../images/svg/distance_wh.svg);
}
button.reload {
background-image: url(../images/svg/reload_wh.svg);
} 

/* ON/OFF 스위치 첵크박스 */
.switch {
position: relative;
display: inline-block;
width: 35px;
height: 18px;
margin-right: 10px;
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 3px;
bottom: 3px;
background-color: #fff;
-webkit-transition: .2s;
transition: .2s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
left: calc(100% - 2px);
transform: translateX(-100%);
}

/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}

/** range 스타일 수정 **/
input[type=range] {
-webkit-appearance: none;
/* width: 100%; */
height: 5px;
background: #d5d4d3;
cursor: pointer;
border-radius: 0;
/* iOS */
transition: background 450ms ease-in;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance: none;
width: 17px;
height: 17px;
background: dodgerblue;
border: 1px solid dodgerblue;
border-radius:50%;
cursor: pointer;
}
input[type=range]::-moz-range-thumb{
-webkit-appearance: none;
width:10px;
height:10px;
background: #fff;
border: 1px solid dodgerblue;
border-radius:50%;
cursor: pointer;
}

/* 지점 / 동네예보 팝업  */
.popup.dsfp {
display: block;
position: absolute;
top: 25%;
left: calc(50% - 64px);
min-width: 150px;
padding: 5px;
text-align: center;
border-radius: 5px;
box-shadow: 2px 2px 2px #999;
background: rgba(255, 255, 255, 0.9);
/* z-index: 800; */
z-index: 148;
}
.dsfp-name {
/* max-width: 90px; */
text-align: center;

}
.dsfp-name span {
display: block;
font-size: 11px;
}
p.dsfp-name span:nth-child(2) {
/* padding-right: 20px; */
}
.dsfp-name-wrap {
display: flex;
padding: 5px 0 5px 5px;
margin-bottom: 5px;
color: #fff;
/* padding-left: 20px; */
background-color: rgba(68,65,65,0.84);
}
.dsfp-name-wrap > p {
flex: 1 1 auto;
}
.dsfp-name-wrap > button {
   flex: 0 0 20px;
}
.dsfp-info {
display: block;
margin: 5px;
text-align: center;
font-size: 15px;
font-weight: 700;
}
.dsfp-info-small {
display: block;
text-align: center;
font-size: 11px;
font-weight: 700;
line-height: 1.5em;
}
.dsfp-coord {
padding: 5px 0;
font-size: 11px;
color: #555;
}
.dsfp-coord > span:first-child {
display: inline-block;
margin-right: 10px;
}
button.time-view {
padding: 2px 2px 3px 30px;
font-size: 11px;
border: 1px solid #999;
border-radius: 2px;
background: url(../images/svg/time_view_bk.svg) no-repeat left;
}
button.time-view.air {
display: list-item;
margin-left: 27%;
}
button.dsfp-close {
float: right;
width: 20px;
height: 20px;
text-indent: -999em;
background: url(../images/svg/x_wh.svg) no-repeat center center;
}

/* 시계열 표 */
.container {
position: absolute;
z-index: 100;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
bottom: 0px;
background-color: #fff;
}
.elementWrap > div.basic {
height: 20px;
/* margin: 4px 0px; */
}
.item-title.item-title-land >  p.nbsp {
margin: 0px;
}
.item-title.item-title-land >  p.nbsp {
 margin: 7px;
}
 .item-title.item-title-sea >  p.WAVtitle {
 /*margin-top: 13px;*/
 }

.item.land p.pop {
margin-left: -15px;
}
.item.land p.pcp {
background-color: rgb(221, 220, 220);
text-align: center;
font-size: 0.8em;
}
.item.land p.sno {
background-color: rgb(221, 220, 220);
text-align: center;
font-size: 0.8em;
}
.item.land p.reh {
margin-top: 5px;
}
.item.land p.wsd {
margin-top: -5px;
}
.item.sea p.wsd {
/*margin-top: -5px;*/
}
p.vec {
height: 17px;
margin-top: 8px;
}
p.vec img {
margin: -12px 0px 0px 0px;
}
p.sky {
height: 22px;
}
p.sky img {
position: absolute;
left: 8px;
margin: -9px 3px;
}
p.sky.section1hr img {
position: absolute;
left: 8px;
margin: -9px -2px;
}
.item.land p.section1hr {
margin-right: 10px;
margin-left: -5px;
}
p.element.pcp.vsrt {
margin-right: 10px;
margin-left: -5px;
}
p.element.sno.vsrt-empty,
p.element.pop.vsrt-empty {
width: 50px;
position: absolute;
left: -5px;
background-color: #fff;
color: #fff;
}
.vsrt-hidden {
visibility: hidden;
}
.time-line {
width: 30px;
padding: 0 0 0 30px;
}
.vsrt.hide {
background-color: #fff;
}
.shrt.six {
background-color: rgb(221, 220, 220);
}
.shrt.six.half {
position: absolute;
left: -5px;
width: 50px;
}
.shrt.six.all {
position: absolute;
width: 105px;
left: -60px;
}

/* 타임 시리즈의 날짜 */
.timeseries-date {
/* z-index: 800; */
z-index: 149;
}
.dateWrap {
padding: 0px 0px;
margin: 7px 0px;
display: block;
position: relative;
}
.dateWrap > .dayLine {
background-color: #009AE1;
border-radius: 3px;
color: #fff;
display: inline-block;
padding: 0px 5px;
width: 60px !important;
}
.dateWrap > div {
position: absolute;
left: 70px ;
top: 0;
width: 120px;
}
.dateWrap > .both {
width: 200px;
}
.timeWrap {
margin: 5px;
}
.land .day-line{
background: url(../images/dayline.png) no-repeat 45px -71px;
}
.sea .day-line {
background: url(../images/dayline.png) no-repeat 50% -45px;
}
.rww .day-line{
background: url(../images/dayline.png) no-repeat 54px 0px;
}
button.info {
width: 15px;
height: 20px;
text-indent: -999em;
border: none;
background: url(../images/svg/info_bk.svg) no-repeat center center;
background-size: cover;
margin-left: 2px;
}
button.info:focus {
background:url(../images/svg/info_bk.svg) no-repeat center center;
background-size: cover;
}
button.info-wh {
width: 15px;
height: 20px;
text-indent: -999em;
border: none;
background: url(../images/svg/info_wh.svg) no-repeat center center;
}
button.info-wh:focus {
background:url(../images/svg/info_wh.svg) no-repeat center center;
}
a.info {
width: 15px;
height: 20px;
text-indent: -999em;
border: none;
background: url(../images/svg/info_bk.svg) no-repeat center center;
}
.green {
color: green;
}
.blue {
color: blue;
}

/* 시계열 - 즐겨찾기 */
div.title button.bookmark {
margin-top: -5px;
}

/* 영향예보 */
.ifsCode {
position: absolute;
margin-top: 3px;
width: 55px;
height: 12px;
font-size: 8px;
line-height: 1.5em;
background-color: rgb(221, 220, 220);
}
.ifsCode.a {
background-color: rgba(52,212,244,0.8);
}
.ifsCode.b {
background-color: rgba(253,220,30,0.8);
}
.ifsCode.c {
background-color: rgba(230,104,37,0.8);
}
.ifsCode.d {
background-color: rgba(184,25,31,0.8);
}

/* 가까운 관측소 */
.closestAws.mobile {
display: none;
}
.closestAws {
border-left: 1px solid #e2e2e2;
padding: 7px;
flex: 0 0 120px;
min-width: 130px;
}
.closestAws.sea-aws {
min-width: 150px;
}
.closestAws > .awsData > p {
padding: 6px 0;
}
.closestAws > p * {
vertical-align: middle;
}
.closestAws > .awsData {
margin-top: 10px;
}
.closestAws > .awsTit {
padding: 6px 0;
font-size: 11px;
text-align: center;
color: #555;
border-radius: 25px;
background-color: #eef2f7;
}
.closestAws > .awsName {
font-size: 1.2em;
text-align: center;
font-weight: bold;
margin: 10px;
}
.closestAws > .awsCoo {
font-size: 0.8em;
text-align: center;
margin-top: -5px;
border-bottom: 1px dotted #555;
}
.closestAws > .awsSubtit {
display: inline-block;
margin-right: 5px;
font-size: 0.9em;
color: #555;
}
p.awsTm {
font-size: 0.9em;
text-align: center;
margin-top: -10px;
}
.itemWrap.sea p.awsTm {
margin: 5px;
}
.sea-aws .awsData > p {
padding: 0px 0;
}
.sea-aws  .awsTit {
padding: 2px 0;
}
.sea-aws .awsName {
font-size: 1.2em;
text-align: center;
font-weight: bold;
margin: 5px;
}

span.awsSubtit {
/* margin-right: 5px; */
color: #333;
/* border-bottom: 1px solid #5b5c5d; */
padding: 5px;
}
span.awsSubtit::after {
content: " :";
}
.awsData > p * {
vertical-align: middle;
}
.awsData > p > img {
width: 18px;
}
.title > div {
display: inline-block;
margin-right: 30px;
}
.title > div > span {
display: inline-block;
margin-right: 10px;
}
.title > div > span.tit {
margin-right: 5px;
font-weight: 800;
color: #000;
}
.title > div > span.tit.wrn {
background-color: red;
border-radius: 3px;
color: #fff;
display: inline-block;
padding: 0px 5px;
}
button.time {
text-indent: -999em;
}
span.issue {
display: inline-block;
border-bottom: 4px solid tomato;
}
button.bookmark.on {
text-indent: -999em;
background: url(../images/svg/bookmark_on.svg) no-repeat center center;
}
button.bookmark {
text-indent: -999em;
background: url(../images/svg/bookmark_wh.svg) no-repeat center center;
}
.title > button.close {
position: absolute;
right: 3px;
top: 3px;
width: 25px;
height: 25px;
text-indent: -999em;
border-radius: 50%;
background-image: url(../images/svg/x_bk.svg);
background-repeat: no-repeat;
background-position: center  center;
background-color: transparent;
}
.tools_top, .tools_bottom {
z-index: 50;
position: absolute;
right: 30px;
}
.tools_bottom {
bottom: 30px;
margin-bottom: 30px;
}
.ol-scale-bar {
position: absolute;
bottom: 8px;
left: auto;
right: 25px;
}


.type1 {
color: #fff;
background: #000;
border: 1px solid #000;
}
.type2 {
color: #000;
background: #fff;
border: 1px solid #000;
}
.type3 {
color: #888;
background: #fff;
border: 1px solid #ccc;
}

/* .tabs { */
/*     display: flex; */
/*     margin : 10px; */
/*     padding-bottom: 8px; */
/*     color: gray; */
/* } */
/* .tabs div { */
/*     flex: 1 1 auto; */
/*     text-align: center; */
/*     border-bottom: 2px solid transparent; */
/* } */
/* .tabs div:hover { */
/*     border-bottom: 2px solid black; */
/*     color: black; */
/* } */
/* .tabs .active { */
/*     border-bottom: 2px solid black; */
/*     color: black; */
/* } */
/* .tabs div label{ */
/* display: inline-block; */
/* width: 100%; */
/* cursor: pointer; */
/* } */


/***** 1시간 단기 HTML 변경을 위해 추가 ****/

.dfs-contain {
    background-position: top 35px right 1px;
    background-repeat: no-repeat;
}
.dfs-contain.winter {
}
.dfsWrap {
    margin-top: 8px;
    display: inline-block;
    overflow: hidden;
    position: relative;
}
div.dfs span {
    display: inline-block;
    width: 30px;
    height: 15px;
    text-align: center;
    vertical-align: middle;
    padding: 2px 10px;
    margin: 3px 4px 3px 0px;
}
.dfs-zone {
    position: relative;
    display: inline-block;
    z-index: 200;
}
.dfs-zone span.week {
    width: 60px !important;
    background-color: #009AE1;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    text-align: center;
    padding: 3px 5px;
    margin-right: 3px;
}
.dfs-zone span.tmnx {
    width: auto;
    margin: 0px;
    padding: 0px;
}
.dfsWrap.day-line {
    background: url(../images/dayline.png) no-repeat 52px -45px;
    position: relative;
}
.pilot-grey {
    position: absolute;
    top: 125px;
    right: 12px;
    width: 1284px;
    height: 23px;
    text-align: center;
    background-color: #eff3f8;
}
.pilot-grey.winter {
    height: 41px;
}
.pilot-msg {
    position: absolute;
    top: 87px;
    width: 1294px;
    height: 20px;
    text-align: center;
    z-index: 100;
    background-color: #eff3f8;
}
.pilot-msg.winter {
    top: 87px;
    height: 41px;
}
.info-tag-pilot {
    display: inline-block;
    top: 0;
    left: 205px;
}
.info-tag-pilot > span {
    margin: 0px 0px 0px 3px;
    padding: 2px 1px;
    font-size: 12px;
    border-radius: 5px;
    background-color: #ccc;
}
.dfs-element {
    display: inline-block;
}
div.dfs span.box {
    background-color: #eff3f8;
}
div.dfs span.box.empty {
    background-color: #fff;
    color: #fff;
}
span.empty {
    color: #fff;
}
span.week.empty {
    display: none;
}
/* div.dfs {
    margin-top: -4px;
}
.dfs.time {
    margin-top: -3px;
}
.dfs.tmp {
    margin-top: -15px;
}
.dfs.pcp {
    margin-top: -1px;
}
.dfs.wsd {
    margin-top: -8px;
    margin-bottom: 4px;
} */
.dfs.wsdWord {
    /*font-size: 10px;*/
}
div.dfs span img.sky {
    width: 32px;
    height: 24px;
    margin-top: -4px;
    margin-left: -1px;
    object-fit: contain;
}
div.dfs span img.vec {
    width: 30px;
    margin-top: -4px;
    margin-left: -1px;
}
div.dfs span img.no-vec {
    height:20px;
    width: 30px;
    /*margin-top: -4px;*/
    margin-left: 0px;
}
/* div.ifs span  {
    display: inline-block;
    width: 20px;
    height: 8px;
    text-align: center;
    vertical-align: middle;
    padding: 2px 17px;
} */
.ifsc {
    background-color: rgb(221, 220, 220);
}
.ifsc.a {
    background-color: rgba(52,212,244,0.8);
}
.ifsc.b {
    background-color: rgba(253,220,30,0.8);
}
.ifsc.c {
    background-color: rgba(230,104,37,0.8);
}
.ifsc.d {
    background-color: rgba(184,25,31,0.8);
}
.dfs.time.sea {
    margin-top: 3px;
}
.dfs.wav.sea {
    margin: 4px 0px;
}
.dfs.vec.sea {
    margin: 4px 0px;
}
.dfs.wsd.sea {
    margin-top: -12px;
    /*margin-bottom: 28px;*/
}
.max-w-none {
    max-width: none;
}