@charset "UTF-8";
/**********************************************
note : 날씨위젯
Name : 김종화
Date : 2018.08.30
**********************************************/
@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,.weather-widget ul,.weather-widget li,
.weather-widget dl,.weather-widget dt,.weather-widget dd {float:left;width:100%;padding:0;margin:0;text-align:left}
.weather-widget {position:relative;cursor:default}
.weather-widget.line {padding:.75rem 1.125rem;border:1px solid rgba(0,0,0,.06)}
.weather-widget i.meto {display:inline-block;font-size:3.875rem;font-family:'MeteoconsRegular';font-weight:500;font-style:normal;line-height:1}
.weather-widget u {position:relative;color:rgba(0,0,0,.64);text-decoration:none}
.weather-widget label {font-weight:800;text-align:left}
.weather-widget ul {padding:0;margin:0;list-style:none}
.weather-widget dl {letter-spacing:-.08rem}
.weather-widget::before {position:absolute;right:0;top:0;height:1rem;background-color:#000;font-size:.75rem;color:#fff;line-height:1}

/* 날씨위젯-기본스킨 */
.weather-widget.default i.meto {font-size:3rem}
.weather-widget.default ul {overflow:hidden;height:78px}
.weather-widget.default li {width:50%;font-size:.875rem}
.weather-widget.default li {padding-left:1rem;border-right:0}
.weather-widget.default li:first-child {padding-right:1rem;padding-left:0;border-right:1px dashed rgba(0,0,0,.08)}
.weather-widget.default li > span {margin-left:.25rem;font-size:.813rem;letter-spacing:-.08rem}
.weather-widget.default dl {margin:.5rem 0 0 0}
.weather-widget.default dl > dt {width:45%}
.weather-widget.default dl > dd {width:55%;font-size:1.5rem;font-weight:800;letter-spacing:-.12rem}

/* 날씨위젯-기본스킨-롤링 */
.weather-widget.default.rolling dl > dt {padding:0;margin:0}
.weather-widget.default.rolling li.slick-slide.slick-active {padding-left:1rem;border-right:0}
.weather-widget.default.rolling li.slick-slide.slick-current.slick-active {padding-right:1rem;padding-left:0;border-right:1px dashed rgba(0,0,0,.08)}

/* 날씨위젯-작은스킨 */
.weather-widget.small {width:184px}
.weather-widget.small.line {width:222px}
.weather-widget.small {font-size:.813rem;font-weight:800;line-height:2}
.weather-widget.small i.meto {font-size:1.75rem;line-height:1}
.weather-widget.small ul {height:26px}
.weather-widget.small span {float:left}
.weather-widget.small dl,.weather-widget.small dt,.weather-widget.small dd {width:auto}
.weather-widget.small dl {padding:0;margin:0}
.weather-widget.small dt,.weather-widget.small dd {margin-left:.313rem}
.weather-widget.small dd {letter-spacing:-.04rem}

/* 날씨위젯-중간스킨 */
.weather-widget.medium {width:150px}
.weather-widget.medium.line {width:190px}
.weather-widget.medium i.meto {font-size:3.5rem}
.weather-widget.medium ul {height:65px}
.weather-widget.medium li,.weather-widget.medium dl {position:relative}
.weather-widget.medium label {position:absolute;top:0;left:0;font-size:.75rem}
.weather-widget.medium.line label {position:absolute;top:1rem;left:1.125rem;font-size:.75rem}
.weather-widget.medium dt {position:absolute;top:.5rem;right:.125rem;width:auto}
.weather-widget.medium dd {font-size:1.125rem;font-weight:500}
.weather-widget.medium dd:nth-of-type(1) {margin-top:1.318rem}
.weather-widget.medium dd:nth-of-type(2) {margin-top:-.125rem;font-size:.813rem;font-weight:800}

/* 날씨위젯-세로스킨 */
.weather-widget.vertical {width:90px}
.weather-widget.vertical.line {width:120px}
.weather-widget.vertical,.weather-widget.vertical dt,.weather-widget.vertical dd {text-align:center}
.weather-widget.vertical label {display:none}
.weather-widget.vertical span {display:block;font-size:.875rem;font-weight:800;letter-spacing:-.06rem;text-align:center}
.weather-widget.vertical dt {height:70px;margin-top:.5rem}
.weather-widget.vertical dd:nth-of-type(2) {font-size:.813rem;font-weight:800}

/* 날씨위젯-주간스킨 */
.weather-widget.weekly label {font-size:.938rem;letter-spacing:-.08rem}
.weather-widget.weekly label > select {float:right;width:auto;margin:0}
.weather-widget.weekly .meto {font-size:3.25rem}
.weather-widget.weekly li {padding:.5rem;border-top:1px dashed rgba(0,0,0,.08);font-size:.875rem;text-align:center}
.weather-widget.weekly li:first-child {border-top:0}
.weather-widget.weekly dl {position:relative}
.weather-widget.weekly dt {width:35%;text-align:center}
.weather-widget.weekly dd {width:35%}
.weather-widget.weekly dd:nth-of-type(2) {position:absolute;left:0;bottom:.25rem;font-size:.813rem}
.weather-widget.weekly dd:nth-of-type(3) {width:30%;color:rgba(0,0,0,.64);text-align:right}
.weather-widget.weekly dd {letter-spacing:-.04rem}
.weather-widget.weekly dd > strong {display:block;padding-top:.438rem;line-height:1.2}
.weather-widget.weekly dd > strong > span {font-size:.75rem;font-weight:300;color:rgba(0,0,0,.64)}
.weather-widget.weekly dd > span {font-weight:600}