@charset "UTF-8";
/**********************************************
note : 날씨위젯
Name : 김종화
Date : 2019.03.07
**********************************************/
@font-face {
    font-family:'MeteoconsRegular';
    src: url('/css/fonts/meteocons-webfont.eot');
    src: url('/css/fonts/meteocons-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/meteocons-webfont.woff') format('woff'),
         url('/css/fonts/meteocons-webfont.ttf') format('truetype'),
         url('/css/fonts/meteocons-webfont.svg#MeteoconsRegular') format('svg');
    font-weight:normal;
    font-style:normal;
}

/* 날씨위젯-공통(색상) */
.weather-widget .good,.weather-widget .lowest {color:#1565c0}
.weather-widget .common {color:#73bb39}
.weather-widget .bad,.weather-widget .best {color:#e53935}

/* 날씨위젯-공통 */
.weather-widget {letter-spacing:-.08rem}
.weather-widget.line {padding:.75rem;border:1px solid rgba(0,0,0,.06)}
.weather-widget .meto {font-size:3.875rem;font-family:'MeteoconsRegular';font-weight:500;font-style:normal;color:rgba(0,0,0,.84);line-height:1}
.weather-widget .dust::before {content:'미세먼지';display:inline-block;padding-right:.375rem;color:rgba(0,0,0,.64)}
.weather-widget header {display:none;font-size:.813rem;font-weight:800;letter-spacing:-.05em;text-align:left}
.weather-widget ul,.weather-widget li {margin:0;padding:0;list-style:none}
.weather-widget article ul {display:table;margin:0 auto}
.weather-widget article ul > li {display:table-cell;font-size:.875rem;color:rgba(0,0,0,.64);text-align:left;vertical-align:top}

/* 날씨위젯-기본스킨 */
.weather-widget.default.line {height:125px}
.weather-widget.default header {display:block}
.weather-widget.default article ul {display:table-cell;width:50%}
.weather-widget.default article ul:nth-child(odd) {padding-right:.825rem}
.weather-widget.default article ul:nth-child(even) {padding-left:.825rem}
.weather-widget.default article ul > li {display:table-row}
.weather-widget.default article ul > li:first-child {font-size:.75rem}
.weather-widget.default article ul > li > strong {padding-right:.375rem;color:rgba(0,0,0,.84)}
.weather-widget.default article ul > li > .meto {font-size:3rem;line-height:1.5}
.weather-widget.default article ul > li > ul > li {display:table-cell;color:rgba(0,0,0,.84);vertical-align:top}
.weather-widget.default article ul > li > ul > li:last-child {padding:.75rem 0 0 .5rem;font-size:1.5rem;font-weight:800;letter-spacing:-.12rem}

/* 날씨위젯-기본스킨-롤링 */
.weather-widget.default.line {max-width:300px}

/* 날씨위젯-작은스킨 */
.weather-widget.small {height:34px}
.weather-widget.small.line {height:60px}
.weather-widget.small article ul {height:42px}
.weather-widget.small article ul > li {padding-left:.325rem}
.weather-widget.small article ul > li:nth-child(1) {padding-left:0}
.weather-widget.small article ul > li:nth-child(1),
.weather-widget.small article ul > li:nth-child(3) {font-weight:800;color:rgba(0,0,0,.84)}
.weather-widget.small article ul > li > .meto {font-size:1.75rem}
.weather-widget.small article ul > li > .meto.H,.weather-widget.small article ul > li > .meto.R,
.weather-widget.small article ul > li > .meto.W,.weather-widget.small article ul > li > .meto.X {line-height:1.2}

/* 날씨위젯-중간스킨 */
.weather-widget.medium.line {max-width:185px}
.weather-widget.medium {position:relative}
.weather-widget.medium .meto {font-size:3.5rem}
.weather-widget.medium header {display:block;position:absolute;left:0;top:0}
.weather-widget.medium.line header {left:.75rem;top:.75rem}
.weather-widget.medium article ul > li:first-child {width:110px;font-size:1.125rem;color:rgba(0,0,0,.84)}
.weather-widget.medium article ul > li > .meto {line-height:1.2}
.weather-widget.medium article ul > li > ul {float:left;padding-top:1.25rem}
.weather-widget.medium article ul > li > ul > li {display:table-row}
.weather-widget.medium article ul > li > ul > li:last-child {font-size:.75rem;line-height:1}

/* 날씨위젯-세로스킨 */
.weather-widget.vertical {max-width:90px}
.weather-widget.vertical.line {max-width:120px}
.weather-widget.vertical article ul{height:128px;}
.weather-widget.vertical article ul > li {display:block;width:100%;padding-top:.73rem;text-align:center;line-height:1;}
.weather-widget.vertical article ul > li:first-child {padding-top:0;font-weight:800;color:rgba(0,0,0,.84)}
.weather-widget.vertical article ul > li:nth-child(3) {padding-top:0;color:rgba(0,0,0,.84)}
.weather-widget.vertical article ul > li:nth-child(4) {font-size:.75rem}

/* 날씨위젯-주간스킨 */
.weather-widget.weekly header {display:table;width:100%;font-size:.938rem}
.weather-widget.weekly header:before {content:'이주의 날씨';display:table-cell;width:70%;font-weight:800;color:rgba(0,0,0,.78);text-align:left}
.weather-widget.weekly header > select {display:table-cell;color:rgba(0,0,0,.64)}
.weather-widget.weekly article ul {width:100%;padding:.5rem;border-top:1px dashed rgba(0,0,0,.08)}
.weather-widget.weekly article ul:first-child {padding-top:0;border-top:0}
.weather-widget.weekly article ul:last-child {padding-bottom:0}
.weather-widget.weekly article ul > li:nth-child(1) {width:44%}
.weather-widget.weekly article ul > li:nth-child(3) {width:22%}
.weather-widget.weekly article ul > li:nth-child(1) > span {color:rgba(0,0,0,.84)}
.weather-widget.weekly article ul > li > .meto {font-size:3.25rem}
.weather-widget.weekly.line article ul > li:nth-child(1) {width:42%}
.weather-widget.weekly.line article ul > li:nth-child(3) {width:25%}