@charset "utf-8";

#content.yna-weather .weather-cont,
.contents .weather-cont{
    opacity: 0;
    filter: alpha(opacity=0);
}

/** 임시 로더 */
.loader-box{
    display: none;
    background-color:#fff;
    opacity:0.95;
    position : fixed;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    z-index : 99999999;
}
.loader-box .logger{
    position: absolute;
    top:0; left: 0;
    padding: 50px;
    width: calc(100% - 100px); height: auto;
    font-size: 14px;
}
.loader-box .logger li{ margin-bottom: 10px; letter-spacing: 1px; border-bottom: 1px dotted #333; }
.loader-box .logger li .warn-color-red{ color: red }
.loader-box .logger li .warn-color-green{ color: green }

/* 헤더날씨 */
.link-wrap .today-weather{height:45px !important;position:absolute !important;top:63px !important;padding-left:0 !important;}
.link-wrap .today-weather .main-top-weather{height:45px !important;padding-left:0;}
.link-wrap .today-weather .date{margin-top:13px;}

/* 오늘날씨 */
.txt-type03{float:left;}
.top-weather-box{width:657px;float:left;}
.top-weather-box .con-wrap dl{text-align:left;font-size:13px;line-height:16px;}
.top-weather-box .con-wrap dl dt{padding-top:5px;color:#000;}
.top-weather-box .con-wrap dl dd{padding:5px 0 8px;color:#666;}
.weather-con-box{padding:25px 0;border-top:1px solid #000;border-bottom:1px solid #ccc;}
.top-weather-box .txt-type03{display:inline-block;}
.top-weather-box .txt-type03 span{font-family:'Open Sans';}
.top-weather-box .txt-type03 button{content:'';display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:middle;background:url(../img/sprites_global.png) -408px -30px no-repeat;float:right;margin-top:3px;}

.weather-left-area .weather-layer02{display:none;position:absolute;z-index:11;top:45px;left:160px;width:320px;}
.weather-left-area .con-wrap{position:absolute;top:1px;left:0;width:320px;padding:10px 19px;border:1px solid #ccc;box-sizing:border-box;background:#fff;}
.weather-left-area .weather-layer02 #con-wrap01{display:block;z-index:12;}
.weather-left-area .btn02 button{width:14px;height:14px;border:0;background:url(../img/sprites_btn.png) -70px -345px no-repeat;}
.weather-left-area .btn02 span{display:none;}
.weather-left-area .weather-layer02{top:133px;left:131px;}
.weather-left-area #con-wrap02{display:block;}
.weather-left-area .con-wrap .tit-wrap{text-align:right;}
.weather-left-area .btn02{height:auto;margin:5px 0 13px;}
.weather-left-area .btn02 button{width:14px;height:14px;border:0;background:url(../img/sprites_btn.png) -70px -345px no-repeat;position:absolute;right:15px;}
.weather-left-area .tit-wrap .btn02 button span{background:none;}

.main-temperature{padding-top:3px;letter-spacing:0;font-size:12px;}
.main-temperature span{color:#f84d31;}
.main-weather-air{float:left;clear:both;line-height:10px;letter-spacing:0;}
.main-weather-air span{color:#6177da;}

.weather-cont{width:100%;overflow:hidden;}
.weather-left-area{width:657px;float:left;position:relative;}
.weather-right-area{width:400px;float:right;}
.top-weather-wrap{}
.top-weather-box{height:26px;border-bottom:1px solid #000;padding-bottom:10px;}
.top-weather-box h3{float:left;font-size:13px;padding-right:10px;border-right:1px solid #ccc;margin-right:10px;height:15px;margin-top:8px;line-height:13px;font-weight:normal;color:#333;}
.top-weather-box span{font-size:12px;color:#575757;letter-spacing:0;float:left;line-height:30px;}
.location-weather-area{float:right;height:30px;line-height:30px;margin-bottom:15px;}
.location-weather-area .location-weather-area{float:right;}
.location-weather-area span{background:url(../img/icon_pub_weather.png) no-repeat -8px -7px;width:19px;height:19px;margin-right:5px;cursor:pointer;margin-top:7px;-webkit-transition:-webkit-transform 0.5s;}
.location-weather-area span:hover{-webkit-transition:all 0.5s ease-in-out;-webkit-transform:rotate(360deg);
-moz-transition:all 0.5s ease-in-out;-moz-transform:rotate(360deg);
-o-transition:all 0.5s ease-in-out;-o-transform:rotate(360deg);
-ms-transition:all 0.5s ease-in-out;-ms-transform:rotate(360deg);
transition:all 0.5s ease-in-out;transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg);}
.location-weather-area p{float:left;font-size:13px;color:#666;margin-right:12px;}

.weather-today-location{width:200px;float:left;margin-right:10px;position:relative;}
.location-select-city{width:150px;}
.yhn-select-arrow{background:#fff url(../img/icon_pub_weather.png) no-repeat -8px 0px;overflow:hidden;width:30px;height:26px;position:absolute;top:1px;right:1px;background-position:-197px -3px;z-index:2;cursor:pointer;}

.location-weather-area select{height:30px;width:100%;margin-right:5px;border:1px solid #ccc;padding-left:5px;line-height:28px;linear-gradient(45deg, transparent 50%, #000 50%),
    linear-gradient(135deg, #000 50%, transparent 50%);}
.location-weather-area button.btn-location-move{font-size:12px;padding:0 10px;background:#404b7f;height:30px;line-height:26px;color:#fff;}

.bott-weather-box{width:100%;overflow:hidden;padding:14px 0;border-bottom:1px solid #ccc;margin-bottom:8px;}
.weather-detail-info{width:285px;overflow:hidden;padding:15px 0px;float:left;}
.weather-today-info{float:right;width:135px;}
.weather-title{font-size:15px;color:#666;margin-top:10px;}
.weather-temperature{font-size:53px;color:#000;line-height:56px;margin:5px 0;}
.weather-temperature span{font-size:24px;line-height:30px;margin-top:5px;}
.weather-temperature-info p{margin-top:0px;}

.weather-temperature-info p:nth-child(1) span:nth-child(1){color:red;}
.weather-temperature-info p:nth-child(1) span:nth-child(2){color:#228cff;}
.weather-temperature-info p:nth-child(2){font-size:15px;color:#767676;}

.rwhs-area{width:100%;overflow:hidden;}
.rwhs-area li{float:left;font-size:12px;height:23px;color:#575757;padding-top:3px;letter-spacing:0;}
.rwhs-area li span{font-weight:bold;letter-spacing:0;color:#000;direction:initial;}
.rwhs-area li.precip{width:45%;}
.rwhs-area li.wind{width:55%;}
.rwhs-area li.humidity{width:45%;}

.air-info-area{float:right;width:370px;padding:10px 0;}
.air-info{border-bottom:1px solid #ddd;overflow:hidden;padding-bottom:10px;margin-bottom:20px;}
.air-info li{width:50%;float:left;padding:5px 0;}
.air-info li:nth-child(even){width:50%;float:right;}
.air-info li:first-child{width:100%;}
.air-info li:nth-child(2){display:none;}
.air-info li h4{font-size:12px;font-weight:bold;margin-bottom:5px;width:40px;;margin-right:5px;color:#575757;float:left;font-family:"나눔고딕",Nanum Gothic;}
.air-info li p.air-lv{width:20px;float:left;margin-top:8px;margin-right:5px;}
.air-info li p.air-lv1{width:10px;height:10px;border-radius:15px;background:#3399cc;}
.air-info li p.air-lv2{width:10px;height:10px;border-radius:15px;background:#33cc66;}
.air-info li p.air-lv3{width:10px;height:10px;border-radius:15px;background:#f9912f;}
.air-info li p.air-lv4{width:10px;height:10px;border-radius:15px;background:#f56767;}
.air-info li p{/*letter-spacing:-0.5px;*/}
.air-info li:nth-child(even) h4{width:40px;}
.air-lv-txt01{color:#3399cc;}
.air-lv-txt02{color:#33cc66;}
.air-lv-txt03{color:#f9912f;}
.air-lv-txt04{color:#f56767;}

/* 주간날씨 */
.weekly-area{overflow:hidden;}
.weekly-area h3{font-weight:normal;padding-bottom:8px;font-size:13px;color:#333;}
.weekly-area ul{border-bottom:1px solid #ddd;overflow:hidden;border-top:1px solid #000;clear:both;}
.weekly-area ul li{float:left;width:109px;min-height:203px;padding:17px 0;text-align:center;border-left:1px #ccc solid;box-sizing:border-box;}
.weekly-area ul li:first-child,.weekly-area ul li:last-child{border-right:0 none;width:108px;}
.weekly-area ul li:first-child{border-left:0 none;}
.weekly-area ul li p.day{font-size:13px;}
.weekly-area ul li p.day span{font-size:14px;color:#728694;}
.w-text{font-size:13px;color:#333;margin-top:2px;letter-spacing:0;height:65px;display:table-cell;vertical-align:middle;text-align:center;width:109px;line-height:18px;}
.temperature{letter-spacing:0;font-size:12px;color:#999;}
.temperature span{color:#777;}
.temperature span:first-child{color:#000;margin-right:2px;}
.temperature span:last-child{margin-left:2px;color:#999;}

/* 3시간예보 */
.forecast-life-area{overflow:hidden;}
.forecast-life-area h3{font-size:13px;color:#000;border-bottom:2px solid #666;padding-bottom:5px;font-weight:normal;}
.forecast-time-area{width:100%;position:relative;}
.forecast-time-area .space04{width:100%;margin-bottom:0;padding-bottom:15px;border-bottom:1px solid #000;}
.forecast-table{width:100%;border-left:1px solid #ddd;border-bottom:1px solid #ddd;border-top:1px solid #000;}
.forecast-table th{background:#f4f6f9;letter-spacing:0;font-weight:normal;color:#575757;height:34px;line-height:34px;border-right:1px solid #ddd;}
.forecast-table th span{color:#728694;}
.forecast-table td{text-align:center;border-right:1px solid #ddd;border-top:1px solid #ddd;font-size:11px;padding:8px 0 3px 0;color:#575757;letter-spacing:0;}
.forecast-table td.forecast-graph-area{width:293px;height:80px;padding:7px 0;}

.forecast-category{width:90px;float:left;background:#fafafa;height:293px;margin-bottom:20px;}
.forecast-category p{background:#FAFAFA;border-bottom:1px solid #ddd;font-weight:normal;width:90px;text-align:center;font-family:'Playfair Display';font-size:14px;color:#000;}
.forecast-category p:nth-child(1){height:36px;line-height:36px;}
.forecast-category p:nth-child(2){height:186px;line-height:186px;}
.forecast-category p:nth-child(3){height:36px;line-height:36px;}
.forecast-category p:nth-child(4){height:58px;line-height:58px;}
.yna-threetime-body{ width : 518px; float:left;background:#fff; height:290px;  }
.forecast-time-table{height:290px; width: auto; /*width: 259px;*/}
.forecast-time-table td{text-align:center;border-bottom:1px solid #ddd;padding:5px 0;color:#666;font-size:12px;position:relative;width:auto;border-left:1px solid #ddd;}
.forecast-time-table tr:nth-child(4) td{color:#999;}
.forecast-th{background:#fafafa;color:#000;font-family:'Playfair Display';font-size:13px;}
.forecast-time-table tr:nth-child(1){height:30px;}
.forecast-time-table tr:nth-child(2){height:20px;}
.forecast-time-table tr:nth-child(3){position: relative; height:129px;}
.forecast-time-table tr:nth-child(4) td{position: relative;height:20px;}
.forecast-time-table tr:nth-child(5){height:20px;}
#threeTimeZone{position: absolute; top:5px; left: 0; width: 567px; height: 120px;}
.forecast-tbl-left{float:left; height:320px;width:calc(100% - 90px);}
.forecast-tbl-right{width:471px;}
.time-now{width:64px;height:311px;/*background:url(../img/time_now_bg.png?v2) no-repeat 0 0;*/position:absolute;top:74px;left:162px;border:1px solid #389CD7;}

/* 오른쪽 컨텐츠 */
/* 전국날씨 */
.aside-city-area{border:1px solid #ddd;overflow:hidden;}
.day-tab{height:40px;border-bottom:1px solid #ddd;}
.day-tab li{float:left;width:33.3%;height:38px;text-align:center;line-height:38px;}
.day-tab li a{display:block;color:#728694;letter-spacing:-0.5px;}
.day-tab li a:hover{text-decoration:none;}
.day-tab li.day-tab-on{border-bottom:2px solid #379bd6;}
.country-map{width:400px;height:480px;position:relative;}
.city-tab-contents{background:#E0EEF5 url(../img/today_map.png) no-repeat 0 0;width:400px;height:480px;}
.ampm-tab{overflow:hidden;width:74px;position:absolute;right:10px;top:10px;z-index:9;}
.ampm-tab li{float:left;width:36px;height:22px;text-align:center;line-height:22px;background:#fff;font-size:13px;}
.ampm-tab li a{../img/icon_animation.png;display:block;color:#888;}
.ampm-tab li.day-tab-on{background:#389dd3;color:#fff;font-size:13px;}
.ampm-tab li.day-tab-on a{color:#fff;}
.ampm-tab li a:hover{text-decoration:none;}
html.en .day-tab li{width:32%;font-family:'Playfair Display';}
html.en .day-tab li:last-child{width:36%}

.public-city-list{width:400px;height:480px;position:relative;clear:both;}
.public-city-list ul li{border:1px solid #ddd;background:#fff;width:68px;height:auto;text-align:center;position:absolute;padding-top:3px;}
.public-city-list ul li.seoul{top:60px;left:75px;}
.public-city-list ul li.chuncheon{top:41px;left:153px;}
.public-city-list ul li.gangneung{top:61px;left:231px;}
.public-city-list ul li.daejeon{top:172px;left:82px;}
.public-city-list ul li.cheongju{top:159px;left:160px;}
.public-city-list ul li.daegu{top:196px;left:238px;}
.public-city-list ul li.gwangju{top:280px;left:82px;}
.public-city-list ul li.jeonju{top:257px;left:160px;}
.public-city-list ul li.busan{top:284px;left:249px;}
.public-city-list ul li.jeju{top:389px;left:39px;}
.public-city-list ul li.ulleungdokdo{top:62px;left:309px;}

.city-name{font-size:11px;line-height:14px;}
.city-temperature{font-size:12px;letter-spacing:0;}
.w-time-standard{float:right;margin-top:-30px;margin-right:10px;color:#666;letter-spacing:0.5px;font-size:13px;}
.w-time-standard:before{content:"";display:none;margin-right:3px;margin-top:-3px;float:left;width:18px;height:18px;background:url(../img/icon_reload.png) no-repeat 0 0;margin-top:4px;}

/* 관심지역 날씨 */
.aside-attention-city{border-bottom:1px solid #ddd;}
.aside-attention-city h5{color:#5d93d4;font-size:13px;font-weight:normal;padding-bottom:8px;border-bottom:1px solid #ddd;}
.ac-temperature{width:110px;float:left;padding-left:5px;padding-top:10px;margin-top:20px;}
.ac-detail-temperature{font-size:40px;margin-bottom:20px;color:#000;}
.ac-detail-temperature span{font-size:20px;vertical-align:top;display:inline-block;margin-top:-6px;}
.btn-location-move{background:#404b7f;color:#fff;padding:0 10px;}
.attention-coutry-area .weather-temperature-info p{font-size:13px;}
.attention-city-info .rwhs-area{width:180px;float:right;margin-bottom:8px;padding-left:5px;margin-top:20px;}
.attention-city-info .rwhs-area li{float:none;width:100% !important;}
.attention-city-info .ac-weather{width:100px;height:106px;clear:both;float:left;text-align:center;}
.attention-city-info .ac-weather span{color:#666;}
.attention-coutry-area{width:100%;overflow:hidden;border-top:1px solid #000;height:208px;}
.attention-coutry-area .location-weather-area{padding-top:10px;}
.attention-weekly-weather{padding:18px 0 15px 0;overflow:hidden;width:400px;border-top:1px dotted #ddd;}
.attention-weekly-weather li{float:left;width:25%;text-align:center;letter-spacing:0;}
.attention-weekly-weather li p.aw-day{font-size:12px;color:#666;margin-bottom:5px;letter-spacing:0;}
.attention-weekly-weather li p.aw-temperature{font-size:12px;color:#999;}
.attention-weekly-weather li p.aw-temperature span:first-child{color:#000;}

.air-info-area .air-info li:nth-child(4) h4{width:40px !important;}