@charset "utf-8";

/************************************************
project : 연합뉴스 국문/다국어 데스크탑
commnet : 날씨 공통 ui 통합
*************************************************/
/* 오늘날씨 */
.main-weather-img{background:url(../img/sp_weather_all.png) no-repeat 0 0;float:left;width:28px;height:28px;margin-right:5px;}
.main-weather-img01{background-position:-20px -22px;}
.main-weather-img02{background-position:-62px -22px;}
.main-weather-img03{background-position:-105px -22px;}
.main-weather-img04{background-position:-147px -22px;}
.main-weather-img05{background-position:-20px -64px;}
.main-weather-img06{background-position:-62px -64px;}
.main-weather-img07{background-position:-104px -64px;}
.main-weather-img08{background-position:-148px -64px;}
.main-weather-img09{background-position:-20px -105px;}
.main-weather-img10{background-position:-62px -105px;}
.main-weather-img11{background-position:-105px -105px;}
.main-weather-img12{background-position:-147px -105px;}
.main-weather-img13{background-position:-20px -147px;}
.main-weather-img14{background-position:-62px -147px;}
.main-weather-img15{background-position:-105px -147px;}
.main-weather-img16{background-position:-150px -147px;}
.main-weather-img17{background-position:-17px -190px;}
.main-weather-img18{background-position:-60px -190px;}
.main-weather-img19{background-position:-104px -190px;}
.main-weather-img20{background-position:-148px -190px;}
.main-weather-img21{background-position:-19px -233px;}
.main-weather-img22{background-position:-61px -233px;}

/* 강수량/풍향/습도/일출 Precip/Wind/Humidity/Sunrise */
.rwhs-area li p{width:25px;height:25px;float:left;background:url(../img/icon_pub_weather.png) no-repeat 0 0;}
.rwhs-area li.precip p{background-position:-60px -7px;}
.rwhs-area li.wind p{background-position:-89px -8px;}
.rwhs-area li.humidity p{background-position:-117px -7px;}
.rwhs-area li.sunrise p{background-position:-144px -7px;}


/* 주간날씨 Weekly Weather */
.ww-img{background:url(../img/sp_weather_all.png) no-repeat 0 0;width:58px;height:58px;margin:5px auto 3px auto;}
.ww-img01{background-position:-212px -13px;}
.ww-img02{background-position:-272px -13px;}
.ww-img03{background-position:-333px -11px;}
.ww-img04{background-position:-393px -11px;}

.ww-img05{background-position:-212px -71px;}
.ww-img06{background-position:-272px -71px;}
.ww-img07{background-position:-331px -70px;}
.ww-img08{background-position:-393px -70px;}

.ww-img09{background-position:-212px -133px;}
.ww-img10{background-position:-272px -133px;}
.ww-img11{background-position:-333px -133px;}
.ww-img12{background-position:-393px -133px;}

.ww-img13{background-position:-212px -192px;}
.ww-img14{background-position:-272px -192px;}
.ww-img15{background-position:-333px -192px;}
.ww-img16{background-position:-393px -193px;}

.ww-img17{background-position:-210px -256px;}
.ww-img18{background-position:-269px -255px;}
.ww-img19{background-position:-330px -255px;}
.ww-img20{background-position:-390px -256px;}
.ww-img21{background-position:-209px -324px;}
.ww-img22{background-position:-270px -324px;}


/* 3시간날씨 3-hour forecast / 전국날씨 National / 관심지역날씨 주간 Interested Location Weather Weekly */
.fw-img{background:url(../img/sp_weather_all.png) no-repeat 0 0;width:32px;height:34px;margin:3px auto;}
.fw-img01{background-position:-18px -588px;}
.fw-img02{background-position:-59px -588px;}
.fw-img03{background-position:-103px -588px;}
.fw-img04{background-position:-145px -588px;}

.fw-img05{background-position:-18px -630px;}
.fw-img06{background-position:-61px -630px;}
.fw-img07{background-position:-102px -630px;}
.fw-img08{background-position:-146px -630px;}

.fw-img09{background-position:-18px -671px;}
.fw-img10{background-position:-60px -671px;}
.fw-img11{background-position:-103px -671px;}
.fw-img12{background-position:-145px -671px;}

.fw-img13{background-position:-18px -713px;}
.fw-img14{background-position:-60px -713px;}
.fw-img15{background-position:-102px -713px;}
.fw-img16{background-position:-148px -713px;}

.fw-img17{background-position:-15px -756px;}
.fw-img18{background-position:-58px -756px;}
.fw-img19{background-position:-102px -756px;}
.fw-img20{background-position:-146px -757px;}
.fw-img21{background-position:-17px -800px;}
.fw-img22{background-position:-59px -800px;}


/* 3시간날씨_풍향 3-hour forecast_winds */
.wd-img{width:24px;height:24px;background:url(../img/icon_pub_weather.png?v2) no-repeat 0 0;margin:0 auto;}
.wd-img-west{background-position:-4px -80px;}
.wd-img-east{background-position:-35px -80px;}
.wd-img-north{background-position:-58px -80px;}
.wd-img-south{background-position:-79px -80px;}
.wd-img-se{background-position:-106px -80px;}
.wd-img-sw{background-position:-137px -80px;}
.wd-img-ne{background-position:-168px -80px;}
.wd-img-nw{background-position:-199px -80px;}


/* 관심지역날씨 Interested Location Weather */
.aw-img{width:55px;height:55px;margin:15px auto 0 auto;background:url(../img/sp_weather_all.png) no-repeat 0 0;}
.aw-img01{background-position:-213px -405px;}
.aw-img02{background-position:-272px -405px;}
.aw-img03{background-position:-335px -405px;}
.aw-img04{background-position:-394px -402px;}

.aw-img05{background-position:-213px -462px;}
.aw-img06{background-position:-272px -462px;}
.aw-img07{background-position:-332px -462px;}
.aw-img08{background-position:-394px -462px;}

.aw-img09{background-position:-213px -522px;}
.aw-img10{background-position:-272px -523px;}
.aw-img11{background-position:-335px -523px;}
.aw-img12{background-position:-394px -522px;}

.aw-img13{background-position:-213px -582px;}
.aw-img14{background-position:-272px -582px;}
.aw-img15{background-position:-334px -582px;}
.aw-img16{background-position:-394px -582px;}

.aw-img17{background-position:-213px -646px;}
.aw-img18{background-position:-272px -646px;}
.aw-img19{background-position:-335px -646px;}
.aw-img20{background-position:-394px -646px;}
.aw-img21{background-position:-210px -715px;}
.aw-img22{background-position:-272px -715px;}


/*------- 날씨 애니메이션 -------*/
/* weather animation 서울시스템 추가 */
.weather-animation{overflow:hidden;}
.w-animation{width:150px;height:150px;float:left;position:relative;overflow:hidden;}
.w-animation-icon{background:url(/global/home/v01/img/icon_weather_animation.png) no-repeat 0 0;margin:15px 0;}

/**  다국어 날씨가 여기를 보고있어 추가함 */
/* 01 맑음 */
.wm-01{}
.sun-big{background-position:-23px -23px;width:120px;height:120px;position:absolute;top:13px;left:14px;-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;margin:0;}
.suncloud .sun-big{top:10px;left:20px;}
/* 02 구름조금 */
.wm-02 .cloud-small{background-position:-188px -60px;width:81px;height:54px;position:absolute;top:75px;left:12px;margin:0;}
/* 03 흐림 */
.cloud-gray-big{background-position:-323px -52px;width:120px;height:74px;position:absolute;margin:0;}
.wm-03 .cloud-gray-big{top:45px;left:10px;-webkit-animation:cloud-big01 5s linear infinite;-moz-animation:cloud-big01 5s linear infinite;animation:cloud-big01 5s linear infinite;}
.cloud-gray-small{background-position:-494px -58px;width:100px;height:61px;position:absolute;margin:0;}
.wm-03 .cloud-gray-small{top:28px;left:42px;-webkit-animation:cloud-big02 5s linear infinite;-moz-animation:cloud-big02 5s linear infinite;animation:cloud-big02 5s linear infinite;}
/* 04 비 */
.cloud-white-big{width:121px;height:100px;background-position:-641px -25px;position:absolute;margin:0;}
.rain-big{position:absolute;width:80px;height:80px;top:65px;left:28px;overflow:hidden;margin:0;}
.rain-big01{width:20px;height:41px;background-position:-756px -320px;position:absolute;left:5px;-webkit-animation:raindrop01 0.7s linear infinite;-moz-animation:raindrop01 0.7s linear infinite;animation:raindrop01 0.7s linear infinite;margin:0;}
.rain-big02{width:35px;height:56px;background-position:-788px -315px;position:absolute;top:0;left:22px;-webkit-animation:raindrop02 0.7s linear infinite;-moz-animation:raindrop02 0.7s linear infinite;animation:raindrop02 0.7s linear infinite;margin:0;animation-delay:0.2s;}
.rain-big03{width:20px;height:41px;background-position:-756px -320px;position:absolute;left:52px;-webkit-animation:raindrop03 0.7s linear infinite;-moz-animation:raindrop03 0.7s linear infinite;animation:raindrop03 0.7s linear infinite;margin:0;animation-delay:0.4s;}
.wm-04 .cloud-gray-small{top:11px;left:42px;}
.wm-04 .cloud-white-big{top:1px;left:8px;}
/* 05 눈 */
.wm-05 .cloud-gray-small{top:18px;left:42px;}
.wm-05 .cloud-white-big{top:8px;left:8px;}
.wm-05 .snow-big{width:75px;height:45px;top:92px;left:34px;overflow:hidden;position:absolute;-webkit-animation:snowbig 3s linear infinite;-moz-animation:snowbig 3s linear infinite;animation:snowbig 3s linear infinite;}
.snow-big01{background-position:-995px -228px;width:22px;height:22px;float:left;margin:1px;text-align:center;}
.snow-big01:nth-child(1){top:0;left:3px;-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
.snow-big01:nth-child(2){top:0;left:2px;float:left;-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
.snow-big01:nth-child(3){top:0;left:2px;-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
.snow-big01:nth-child(4){top:0;margin-left:13px;-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
.snow-big01:nth-child(5){top:0;left:14px;-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
/* 06 눈비 */
.wm-06 .cloud-gray-small{top:18px;left:42px;}
.wm-06 .cloud-white-big{top:8px;left:8px;}
.wm-06 .snowrain-big{top:109px;left:28px;width:80px;height:50px;margin:0 10px;position:absolute;}
.snowrain-big p{float:left;}
.snowrain01{background-position:-1114px -223px;width:16px;height:16px;position:absolute;top:-15px;left:0;-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;margin:0;}
.snowrain02{background-position:-1034px -245px;width:17px;height:18px;position:absolute;top:-15px;left:20px;-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;margin:0 0 0 5px;}
.snowrain03{background-position:-1114px -223px;width:16px;height:16px;position:absolute;top:-15px;left:40px;-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;margin:0 0 0 5px;}
.snowrain04{background-position:-1034px -245px;width:17px;height:18px;position:absolute;top:5px;left:-10px;-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;margin:0;}
.snowrain05{background-position:-1114px -223px;width:16px;height:16px;position:absolute;top:6px;left:12px;-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;margin:0;}
.snowrain06{background-position:-1034px -245px;width:17px;height:18px;position:absolute;top:5px;left:35px;-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;margin:0;}
/* 07 소나기 */
.sun-small{background-position:-804px -37px;width:105px;height:105px;}
.cloud-white-middle{background-position:-949px -57px;width:100px;height:64px;}
.wm-07 .sun-small{position:absolute;top:15px;left:35px;-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;margin:0;}
.wm-07 .cloud-white-middle{position:absolute;top:42px;left:8px;}
.shower-big{width:52px;height:36px;position:absolute;top:108px;left:30px;}
.shower01{background-position:-133px -332px;width:20px;height:30px;position:absolute;top:-5px;-webkit-animation:shower01 0.6s linear infinite;-moz-animation:shower01 0.6s linear infinite;animation:shower01 0.6s linear infinite;margin:0;}
.shower02{background-position:-158px -332px;width:18px;height:34px;position:absolute;top:-5px;left:15px;-webkit-animation:shower02 0.6s linear infinite;-moz-animation:shower02 0.6s linear infinite;animation:shower02 0.6s linear infinite;margin:0;animation-delay:0.2s;}
.shower03{background-position:-133px -332px;width:20px;height:30px;position:absolute;top:-5px;left:32px;-webkit-animation:shower03 0.6s linear infinite;-moz-animation:shower03 0.6s linear infinite;animation:shower03 0.6s linear infinite;margin:0;animation-delay:0.4s;}
/* 08 소낙눈 */
.wm-08 .sun-small{position:absolute;top:-4px;left:35px;-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;}
.wm-08 .cloud-white-middle{position:absolute;top:38px;left:8px;}
.wm-08 .snowflurry-big{width:50px;height:50px;position:absolute;top:107px;left:31px;}
.snow-small01{background-position:-224px -337px;width:15px;height:16px;float:left;text-align:center;-webkit-animation:snowbig02 3s linear infinite;-moz-animation:snowbig02 3s linear infinite;animation:snowbig02 3s linear infinite;margin:0 1px 0 0;}
.snow-small02{background-position:-224px -337px;width:16px;height:16px;float:left;text-align:center;-webkit-animation:snowbig02 3s linear infinite;-moz-animation:snowbig02 3s linear infinite;animation:snowbig02 3s linear infinite;margin:0 1px 0 0;}
.snow-small03{background-position:-224px -337px;width:16px;height:16px;float:left;text-align:center;-webkit-animation:snowbig02 3s linear infinite;-moz-animation:snowbig02 3s linear infinite;animation:snowbig02 3s linear infinite;margin:0 1px 0 0;}
.snow-small04{background-position:-224px -337px;width:16px;height:16px;float:left;text-align:center;top:0;left:8px;-webkit-animation:snowbig02 3s linear infinite;-moz-animation:snowbig02 3s linear infinite;animation:snowbig02 3s linear infinite;margin:0 1px 0 7px;}
.snow-small05{background-position:-224px -337px;width:16px;height:16px;float:left;text-align:center;top:0;left:8px;-webkit-animation:snowbig02 3s linear infinite;-moz-animation:snowbig02 3s linear infinite;animation:snowbig02 3s linear infinite;margin:0 1px 0 0;}
/* 09 안개 */
.fog01{background-position:-18px -214px;width:134px;height:50px;position:absolute;top:45px;left:8px;-webkit-animation:fog01 6s linear infinite;-moz-animation:fog01 6s linear infinite;animation:fog01 6s linear infinite;margin:0;}
.fog02{background-position:-165px -214px;width:134px;height:50px;position:absolute;top:65px;left:8px;padding-right:10px;-webkit-animation:fog02 6s linear infinite;-moz-animation:fog02 6s linear infinite;animation:fog02 6s linear infinite;margin:0;}
/* 10 뇌우 */
.wm-10 .cloud-gray-small{top:18px;left:42px;margin:0;}
.wm-10 .cloud-white-big{top:8px;left:8px;margin:0;}
.thunderstorm-big{width:80px;height:78px;position:absolute;top:68px;left:30px;overflow:hidden;margin:0;}
.rain-middle01{background-position:-19px -325px;width:25px;height:45px;position:absolute;top:20px;float:left;margin:0;-webkit-animation:rain01 2s linear infinite;-moz-animation:rain01 2s linear infinite;animation:rain01 2s linear infinite;}
.rain-middle02{background-position:-19px -325px;width:25px;height:45px;position:absolute;top:20px;left:16px;margin:0;float:left;-webkit-animation:rain02 2s linear infinite;-moz-animation:rain02 2s linear infinite;animation:rain02 2s linear infinite;}
.thunder-big{background-position:-86px -326px;width:30px;height:46px;position:absolute;top:0;left:42px;float:right;-webkit-animation:thunder-big 0.8s linear infinite;-moz-animation:thunder-big 0.8s linear infinite;animation:thunder-big 0.8s linear infinite;margin:0;/*animation:lightning 2s linear infinite;*/}
/* 11 차차 흐려짐 */
.wm-11 .cloud-gray-big{top:45px;left:10px;-webkit-animation:cloudover01 5s linear infinite;-moz-animation:cloudover01 5s linear infinite;animation:cloudover01 5s linear infinite;margin:0;}
.cloud-white-small{background-position:-636px -210px;width:100px;height:61px;}
.wm-11 .cloud-white-small{position:absolute;top:28px;left:42px;-webkit-animation:cloudover02 5s linear infinite;-moz-animation:cloudover02 5s linear infinite;animation:cloudover02 5s linear infinite;margin:0;}
/* 12 흐려져 뇌우 */
.cloud-gray-big02{width:121px;height:100px;background-position:-322px -178px;position:absolute;top:8px;left:8px;margin:0;}
.wm-12 .cloud-gray-small{top:18px;left:42px;margin:0;}
/* 13 흐려져 비 */
.wm-13 .cloud-gray-small{top:11px;left:44px;position:absolute;}
.wm-13 .cloud-gray-big02{top:1px;left:10px;margin:0;}
.wm-13 .rain-big{width:72px;height:80px;top:65px;left:31px;overflow:hidden;position:absolute;}
/* 14 흐려져 눈 */
.wm-14 .over-snow-big{width:75px;height:45px;top:92px;left:33px;overflow:hidden;position:absolute;-webkit-animation:snowbig 3s linear infinite;-moz-animation:snowbig 3s linear infinite;animation:snowbig 3s linear infinite;}
.wm-14 .cloud-gray-small{top:18px;left:42px;}
.over-snow-big .w-animation-icon{background-position:-995px -228px;width:22px;height:22px;float:left;margin:0 3px 0 0;}
.over-snow-big p{background-position:-995px -228px;width:24px;height:24px;float:left;margin:0;}
.over-snow-big p:nth-child(1){top:0;left:0;-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
.over-snow-big p:nth-child(2){top:0;left:2px;float:left;-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
.over-snow-big p:nth-child(3){top:0;left:2px;-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
.over-snow-big p:nth-child(4){top:0;margin-left:13px;-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
.over-snow-big p:nth-child(5){top:0;left:14px;-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
/* 15 흐려져 눈비 */
.wm-15 .cloud-gray-small{top:18px;left:42px;}
.wm-15 .cloud-white-big{top:8px;left:8px;}
.wm-15 .snowrain-big{top:109px;left:28px;width:80px;height:50px;margin:0 10px;position:absolute;}
.wm-15 .snowrain-big p{float:left;}
.snowrain01{background-position:-1114px -223px;width:16px;height:16px;position:absolute;top:-15px;left:0;-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;margin:0;}
.snowrain02{background-position:-1034px -245px;width:17px;height:18px;position:absolute;top:-15px;left:20px;-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;margin:0 0 0 5px;}
.snowrain03{background-position:-1114px -223px;width:16px;height:16px;position:absolute;top:-15px;left:40px;-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;margin:0 0 0 5px;}
.snowrain04{background-position:-1034px -245px;width:17px;height:18px;position:absolute;top:5px;left:-10px;-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;margin:0;}
.snowrain05{background-position:-1114px -223px;width:16px;height:16px;position:absolute;top:6px;left:12px;-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;margin:0;}
.snowrain06{background-position:-1034px -245px;width:17px;height:18px;position:absolute;top:5px;left:35px;-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;margin:0;}

/* 16 흐린 후 갬 */
.wm-16 .sun-small{position:absolute;top:21px;left:35px;-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;margin:0;}
.wm-16 .cloud-gray-small{background-position:-497px -210px;position:absolute;top:65px;left:8px;margin:0;}
/* 뇌우 후 갬, 비 후 갬, 눈 후 갬 */
.wm-17 .sun-small{position:absolute;top:15px;left:35px;-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;margin:0;}
.cloud-gray-middle{background-position:-1076px -57px;width:100px;height:64px;}
.wm-17 .cloud-gray-middle{position:absolute;top:58px;left:5px;margin:0;}
/* 17 뇌우 후 갬 */
.thunderstorm-small{width:56px;height:50px;position:absolute;top:86px;left:30px;overflow:hidden;margin:0;}
.thunderstorm-small .rain-middle01{background-position:-133px -332px;width:15px;height:30px;position:absolute;top:20px;left:0;float:left;-webkit-animation:rain01 2s linear infinite;-moz-animation:rain01 2s linear infinite;animation:rain01 2s linear infinite;margin:0;}
.thunderstorm-small .rain-middle02{background-position:-133px -332px;width:15px;height:30px;position:absolute;top:20px;left:11px;float:left;-webkit-animation:rain02 2s linear infinite;-moz-animation:rain02 2s linear infinite;animation:rain02 2s linear infinite;margin:0;}
.thunderstorm-small .thunder-small{background-position:-257px -331px;width:20px;height:30px;top:0;left:0;float:right;-webkit-animation:thunder-small 0.8s linear infinite;-moz-animation:thunder-small 0.8s linear infinite;animation:thunder-small 0.8s linear infinite;margin:0;}
/* 18 비 후 갬 */
.wm-18 .sun-small{position:absolute;top:15px;left:35px;-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;margin:0;}
.wm-18 .cloud-gray-middle{position:absolute;top:58px;left:5px;margin:0;}
/* 19 비/눈 후 갬 */
.wm-19 .sun-small{position:absolute;top:15px;left:35px;-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;margin:0;}
.wm-19 .cloud-gray-middle{position:absolute;top:58px;left:5px;margin:0;}
.wm-19 .snowflurry-big{width:50px;height:50px;position:absolute;top:110px;left:31px;}
.wm-19 .snow-small01{background-position:-224px -337px;width:16px;height:16px;float:left;-webkit-animation:snowbig02 3s linear infinite;-moz-animation:snowbig02 3s linear infinite;animation:snowbig02 3s linear infinite;margin:0;}
.wm-19 .snow-small02{background-position:-224px -337px;width:16px;height:16px;float:left;-webkit-animation:snowbig02 3s linear infinite;-moz-animation:snowbig02 3s linear infinite;animation:snowbig02 3s linear infinite;margin:0;}
.wm-19 .snow-small03{background-position:-224px -337px;width:16px;height:16px;float:left;-webkit-animation:snowbig02 3s linear infinite;-moz-animation:snowbig02 3s linear infinite;animation:snowbig02 3s linear infinite;margin:0;}
.wm-19 .snow-small04{background-position:-224px -337px;width:16px;height:16px;float:left;top:0;left:8px;-webkit-animation:snowbig02 3s linear infinite;-moz-animation:snowbig02 3s linear infinite;animation:snowbig02 3s linear infinite;margin:0 0 0 8px;}
.wm-19 .snow-small05{background-position:-224px -337px;width:16px;height:16px;float:left;top:0;left:8px;-webkit-animation:snowbig02 3s linear infinite;-moz-animation:snowbig02 3s linear infinite;animation:snowbig02 3s linear infinite;margin:0;}
/* 20 눈비 후 갬 */
.wm-20 .sun-small{position:absolute;top:15px;left:35px;-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;margin:0;}
.wm-20 .cloud-gray-middle{position:absolute;top:58px;left:5px;margin:0;}
.wm-20 .snowrain-small{position:absolute;top:108px;left:23px;width:57px;height:44px;margin:0 7px;}
.wm-20 .s-snowrain01{background-position:-369px -330px;width:13px;height:13px;position:absolute;top:2px;left:0;-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;margin:0;}
.wm-20 .s-snowrain02{background-position:-300px -345px;width:9px;height:12px;position:absolute;top:3px;left:20px;-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;margin:0;}
.wm-20 .s-snowrain03{background-position:-369px -330px;width:13px;height:13px;position:absolute;top:2px;left:35px;-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;margin:0;}
.wm-20 .s-snowrain04{background-position:-300px -345px;width:9px;height:12px;position:absolute;top:18px;left:-7px;-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;margin:0;}
.wm-20 .s-snowrain05{background-position:-369px -330px;width:13px;height:13px;position:absolute;top:18px;left:9px;-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;margin:0;}
.wm-20 .s-snowrain06{background-position:-300px -345px;width:9px;height:12px;position:absolute;top:18px;left:28px;-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;margin:0;}
/* 21 구름많음 */
.cloud02{background-position:-187px -63px;width:82px;height:53px;margin:0;position:absolute;top:35px;left:60px;-webkit-animation:cloud02 7s linear infinite;-moz-animation:cloud02 7s linear infinite;animation:cloud02 7s linear infinite;}
.cloud01{background-position:-635px -210px;width:100px;height:64px;margin:0;position:absolute;top:45px;left:8px;-webkit-animation:cloud01 7s linear infinite;-moz-animation:cloud01 7s linear infinite;animation:cloud01 7s linear infinite;}
.cloud03{background-position:-768px -223px;width:64px;height:60px;margin:0;position:absolute;top:73px;left:68px;-webkit-animation:cloud03 7s linear infinite;-moz-animation:cloud03 7s linear infinite;animation:cloud03 7s linear infinite;}
/* 22 황사 */
.wind01{background-position:-441px -293px;width:81px;height:100px;margin:0;position:absolute;top:25px;left:15px;-webkit-animation:wind01 4s linear infinite;-moz-animation:wind01 4s linear infinite;animation:wind01 4s linear infinite;}
.wind02{background-position:-533px -347px;width:98px;height:31px;margin:0;top:76px;left:23px;position:absolute;-webkit-animation:wind02 4s linear infinite;-moz-animation:wind02 4s linear infinite;animation:wind02 4s linear infinite;}
.yellow-sand{background-position:-642px -297px;width:62px;height:90px;position:absolute;top:20px;left:80px;-webkit-animation:thunder 1.5s linear infinite;-moz-animation:thunder 1.5s linear infinite;animation:thunder 1.5s linear infinite;}

/*////////////////////////////////////////////////////////// 작은 애니메이션 //////////////////////////////////////////////////////////*/
.s-animation{width:60px;height:60px;position:relative;overflow:hidden;margin:0 auto;}
.s-animation-icon{background:url(../img/icon_weather_animation.png?v5) no-repeat 0 0;margin:15px 0;}
/* 01 맑음 */
.mm-01:hover .s-sun-big{-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;}
.s-sun-big{background-position:-15px -408px;width:50px;height:50px;position:absolute;top:6px;left:6px;margin:0 auto;}
.s-suncloud .s-sun-big{top:5px;left:8px;}
/* 02 구름조금 */
.mm-02 .s-cloud-small{background-position:-77px -422px;width:31px;height:20px;position:absolute;top:33px;left:6px;margin:0;}
.mm-02:hover .s-sun-big{-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;}
/* 03 흐림 */
.mm-03:hover .s-cloud-gray-big{-webkit-animation:cloud-small01 5s linear infinite;-moz-animation:cloud-small01 5s linear infinite;animation:cloud-small01 5s linear infinite;}
.mm-03:hover .s-cloud-gray-small{-webkit-animation:cloud-small02 5s linear infinite;-moz-animation:cloud-small02 5s linear infinite;animation:cloud-small02 5s linear infinite;}
.s-cloud-gray-big{background-position:-128px -419px;width:46px;height:28px;position:absolute;margin:0;}
.mm-03 .s-cloud-gray-big{top:20px;left:2px;}
.s-cloud-gray-small{background-position:-193px -420px;width:37px;height:24px;position:absolute;margin:0;top:10px;left:18px;}
.mm-03 .s-cloud-gray-small{top:13px;left:23px;}
/* 04 비 */
.s-cloud-white-big{width:46px;height:29px;background-position:-250px -418px;position:absolute;margin:0;}
.s-rain-big{position:absolute;top:20px;width:80px;height:80px;left:8px;overflow:hidden;margin:0;}
.s-rain-big01{width:10px;height:17px;background-position:-782px -408px;position:absolute;top:16px;left:8px;margin:0;}
.s-rain-big02{width:13px;height:22px;background-position:-797px -404px;position:absolute;top:12px;left:12px;margin:0;}
.s-rain-big03{width:9px;height:15px;background-position:-818px -406px;position:absolute;top:15px;left:22px;margin:0;}
.mm-04:hover .s-rain-big01{-webkit-animation:raindropsmall01 0.7s linear infinite;-moz-animation:raindropsmall01 0.7s linear infinite;animation:raindropsmall01 0.7s linear infinite; }
.mm-04:hover .s-rain-big02{-webkit-animation:raindropsmall02 0.7s linear infinite;-moz-animation:raindropsmall02 0.7s linear infinite;animation:raindropsmall02 0.7s linear infinite;animation-delay: 0.2s;}
.mm-04:hover .s-rain-big03{-webkit-animation:raindropsmall03 0.7s linear infinite;-moz-animation:raindropsmall03 0.7s linear infinite;animation:raindropsmall03 0.7s linear infinite; animation-delay: 0.4s;}
.mm-04 .s-cloud-gray-small{top:10px;left:19px;}
.mm-04 .s-cloud-white-big{top:15px;left:5px;}
/* 05 눈 */
.mm-05 .s-cloud-gray-small{top:10px;left:19px;}
.mm-05 .s-cloud-white-big{top:15px;left:5px;}
.mm-05 .s-snow-big{width:30px;height:20px;top:37px;left:13px;overflow:hidden;position:absolute;}
.mm-05:hover .s-snow-big{-webkit-animation:snowsmall 3s linear infinite;-moz-animation:snowsmall 3s linear infinite;animation:snowsmall 3s linear infinite;}
.mm-05:hover .s-snow-big p{-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
.s-snow-big p,.s-over-snow-big p{background-position:-836px -429px;width:8px;height:8px;float:left;margin:1px;text-align:center;position:absolute;}
.s-snow-big01{top:0;left:2px;}
.s-snow-big02{top:0;left:11px;}
.s-snow-big03{top:0;left:20px;}
.s-snow-big04{top:8px;left:6px;}
.s-snow-big05{top:8px;left:16px;}
/* 06 눈비 */
.mm-06 .s-cloud-gray-small{top:10px;left:19px;}
.mm-06 .s-cloud-white-big{top:15px;left:5px;}
.mm-06:hover .s-snowrain01,.mm-06:hover .s-snowrain03,.mm-06:hover .s-snowrain05{-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;}
.s-snowyrainy:hover .s-snowrain02,.s-snowyrainy:hover .s-snowrain04,.s-snowyrainy:hover .s-snowrain06{-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;}
.mm-06 .s-snowrain-big{top:39px;left:0;width:80px;height:50px;margin:0 10px;position:absolute;}
.s-snowrain-big p{float:left;}
.s-snowrain01{background-position:-836px -429px;width:8px;height:8px;position:absolute;top:-2px;left:5px;margin:0;}
.s-snowrain02{background-position:-854px -446px;width:5px;height:7px;position:absolute;top:-1px;left:11px;margin:0 0 0 5px;}
.s-snowrain03{background-position:-836px -429px;width:8px;height:8px;position:absolute;top:-2px;left:19px;margin:0 0 0 5px;}
.s-snowrain04{background-position:-854px -446px;width:5px;height:7px;position:absolute;top:8px;left:2px;margin:0;}
.s-snowrain05{background-position:-836px -429px;width:8px;height:8px;position:absolute;top:8px;left:10px;margin:0;}
.s-snowrain06{background-position:-854px -446px;width:5px;height:7px;position:absolute;top:8px;left:21px;margin:0;}
/* 07 소나기 */
.s-sun-small{background-position:-315px -415px;width:38px;height:38px;}
.s-cloud-white-middle{background-position:-368px -423px;width:37px;height:23px;}
.mm-07 .s-sun-small{position:absolute;top:8px;left:17px;margin:0;}
.mm-07 .s-cloud-white-middle{position:absolute;top:10px;left:6px;}
.mm-07:hover .s-shower01{-webkit-animation:shower_small01 0.6s linear infinite;-moz-animation:shower_small01 0.6s linear infinite;animation:shower_small01 0.6s linear infinite;}
.mm-07:hover .s-shower02{-webkit-animation:shower_small02 0.6s linear infinite;-moz-animation:shower_small02 0.6s linear infinite;animation:shower_small02 0.6s linear infinite;animation-delay: 0.2s;}
.mm-07:hover .s-shower03{-webkit-animation:shower_small03 0.6s linear infinite;-moz-animation:shower_small03 0.6s linear infinite;animation:shower_small03 0.6s linear infinite;animation-delay: 0.4s;}
.mm-07:hover .s-sun-small{-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;}
.s-shower-big{width:52px;height:36px;position:absolute;top:46px;left:15px;}
.s-shower01{background-position:-905px -411px;width:5px;height:9px;position:absolute;top:-4px;left:0;margin:0;}
.s-shower02{background-position:-914px -411px;width:6px;height:12px;position:absolute;top:-4px;left:5px;margin:0;}
.s-shower03{background-position:-905px -411px;width:5px;height:9px;position:absolute;top:-4px;left:12px;margin:0;}
/* 08 소낙눈 */
.mm-08 .s-sun-small{position:absolute;top:8px;left:17px;margin:0;}
.mm-08 .s-cloud-white-middle{position:absolute;top:10px;left:6px;}
.mm-08 .s-snowflurry-big{width:18px;height:20px;position:absolute;top:43px;left:16px;}
.mm-08:hover .s-sun-small{-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;}
.mm-08:hover .s-snowflurry-big{-webkit-animation:snowsmall02 3s linear infinite;-moz-animation:snowsmall02 3s linear infinite;animation:snowsmall02 3s linear infinite;}
.mm-08:hover .s-snowflurry-big p{-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
.s-snow-small01{background-position:-957px -414px;width:5px;height:5px;float:left;text-align:center;margin:0 1px 0 0;}
.s-snow-small02{background-position:-957px -414px;width:5px;height:5px;float:left;text-align:center;margin:0 1px 0 0;}
.s-snow-small03{background-position:-957px -414px;width:5px;height:5px;float:left;text-align:center;margin:0 1px 0 0;}
.s-snow-small04{background-position:-957px -414px;width:5px;height:5px;float:left;text-align:center;clear:both;margin:1px 1px 0 3px;}
.s-snow-small05{background-position:-957px -414px;width:5px;height:5px;float:left;text-align:center;margin:1px 1px 0 0;}
/* 09 안개 */
.s-fog01{background-position:-426px -425px;width:49px;height:22px;position:absolute;top:15px;left:6px;margin:0;}
.s-fog02{background-position:-491px -425px;width:45px;height:22px;position:absolute;top:25px;left:6px;padding-right:10px;margin:0;}
.mm-09:hover .s-fog01{-webkit-animation:fog-small01 4s linear infinite;-moz-animation:fog-small01 4s linear infinite;animation:fog-small01 4s linear infinite;}
.mm-09:hover .s-fog02{-webkit-animation:fog-small02 4s linear infinite;-moz-animation:fog-small02 4s linear infinite;animation:fog-small02 4s linear infinite;}
/* 10 뇌우 */
.mm-10 .s-cloud-gray-small{top:10px;left:19px;}
.mm-10 .s-cloud-white-big{top:15px;left:5px;}
.s-thunderstorm-big{width:30px;height:30px;position:absolute;top:26px;left:13px;overflow:hidden;margin:0;}
.mm-10:hover .s-rain-middle01{-webkit-animation:rain01 2s linear infinite;-moz-animation:rain01 2s linear infinite;animation:rain01 2s linear infinite;}
.mm-10:hover .s-rain-middle02{-webkit-animation:rain02 2s linear infinite;-moz-animation:rain02 2s linear infinite;animation:rain02 2s linear infinite;}
.mm-10:hover .s-thunder-big{-webkit-animation:thunder-big02 0.8s linear infinite;-moz-animation:thunder-big02 0.8s linear infinite;animation:thunder-big02 0.8s linear infinite;}
.s-rain-middle01{background-position:-775px -442px;width:10px;height:16px;position:absolute;top:10px;float:left;margin:0;}
.s-rain-middle02{background-position:-775px -442px;width:10px;height:16px;position:absolute;top:10px;left:7px;margin:0;float:left;}
.s-thunder-big{background-position:-808px -442px;width:12px;height:18px;position:absolute;top:10px;left:18px;float:right;margin:0;/*animation: lightning 2s linear infinite;*/}
/* 11 차차 흐려짐 */
.mm-11 .s-cloud-gray-big{top:18px;left:2px;margin:0;}
.mm-11:hover .s-cloud-gray-big{-webkit-animation:cloud-small01 5s linear infinite;-moz-animation:cloud-small01 5s linear infinite;animation:cloud-small01 5s linear infinite;}
.mm-11:hover .s-cloud-white-small{-webkit-animation:cloud-small02 5s linear infinite;-moz-animation:cloud-small02 5s linear infinite;animation:cloud-small02 5s linear infinite;}
.s-cloud-white-small{background-position:-682px -424px;width:35px;height:22px;}
.mm-11 .s-cloud-white-small{position:absolute;top:13px;left:23px;margin:0;}
/* 12 흐려져 뇌우 */
.s-cloud-gray-big02{width:47px;height:29px;background-position:-557px -419px;position:absolute;top:15px;left:5px;margin:0;}
.mm-12 .s-cloud-gray-small{top:10px;left:19px;margin:0;}
.mm-12:hover .s-rain-middle01{-webkit-animation:rain01 2s linear infinite;-moz-animation:rain01 2s linear infinite;animation:rain01 2s linear infinite;}
.mm-12:hover .s-rain-middle02{-webkit-animation:rain02 2s linear infinite;-moz-animation:rain02 2s linear infinite;animation:rain02 2s linear infinite;}
.mm-12:hover .s-thunder-big{-webkit-animation:thunder-big02 0.8s linear infinite;-moz-animation:thunder-big02 0.8s linear infinite;animation:thunder-big02 0.8s linear infinite;}
/* 13 흐려져 비 */
.mm-13 .s-cloud-gray-small{top:4px;left:42px;position:absolute;}
.mm-13 .s-cloud-gray-big02{top:15px;left:6px;margin:0;}
.mm-13 .s-rain-big{width:72px;height:80px;top:65px;left:31px;overflow:hidden;position:absolute;}
.mm-13 .s-cloud-gray-big02{width:47px;height:29px;background-position:-557px -419px;position:absolute;top:15px;left:5px;margin:0;}
.mm-13 .s-cloud-gray-small{top:10px;left:19px;margin:0;}
.mm-13 .s-rain-big{position:absolute;top:20px;width:80px;height:80px;left:8px;overflow:hidden;margin:0;}
.mm-13 .s-rain-big01{width:10px;height:17px;background-position:-782px -408px;position:absolute;top:16px;left:8px;margin:0;}
.mm-13 .s-rain-big02{width:13px;height:22px;background-position:-797px -404px;position:absolute;top:12px;left:12px;margin:0;}
.mm-13 .s-rain-big03{width:9px;height:15px;background-position:-818px -406px;position:absolute;top:15px;left:22px;margin:0;}
.mm-13:hover .s-rain-big01{-webkit-animation:raindropsmall01 0.7s linear infinite;-moz-animation:raindropsmall01 0.7s linear infinite;animation:raindropsmall01 0.7s linear infinite; }
.mm-13:hover .s-rain-big02{-webkit-animation:raindropsmall02 0.7s linear infinite;-moz-animation:raindropsmall02 0.7s linear infinite;animation:raindropsmall02 0.7s linear infinite;animation-delay: 0.2s;}
.mm-13:hover .s-rain-big03{-webkit-animation:raindropsmall03 0.7s linear infinite;-moz-animation:raindropsmall03 0.7s linear infinite;animation:raindropsmall03 0.7s linear infinite; animation-delay: 0.4s;}
/* 14 흐려져 눈 */
.mm-14 .s-over-snow-big{width:30px;height:20px;top:37px;left:13px;overflow:hidden;position:absolute;}
.mm-14:hover .s-over-snow-big{-webkit-animation:snowsmall 3s linear infinite;-moz-animation:snowsmall 3s linear infinite;animation:snowsmall 3s linear infinite;}
.mm-14:hover .s-over-snow-big p{-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
.mm-14 .s-snow-big01{top:0;left:2px;}
.mm-14 .s-snow-big02{top:0;left:11px;}
.mm-14 .s-snow-big03{top:0;left:20px;}
.mm-14 .s-snow-big04{top:8px;left:6px;}
.mm-14 .s-snow-big05{top:8px;left:16px;}
/* 15 흐려져 눈비 */
.mm-15 .cloud-gray-big02{top:8px;left:8px;}
.mm-15 .cloud-gray-small{top:18px;left:42px;}
.mm-15 .snowrain-big{top:109px;left:28px;width:80px;height:50px;margin:0 10px;position:absolute;}
.mm-15 .s-snowrain-big{top:39px;left:0;width:80px;height:50px;margin:0 10px;position:absolute;}
.mm-15:hover .s-snowrain01,.mm-15:hover .s-snowrain03,.mm-15:hover .s-snowrain05{-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;}
.mm-15:hover .s-snowrain02,.mm-15:hover .s-snowrain04,.mm-15:hover .s-snowrain06{-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;}
.mm-15 .s-snowrain-big{top:39px;left:0;width:80px;height:50px;margin:0 10px;position:absolute;}
.mm-15 .s-snowrain-big p{float:left;}
/* 16 흐린 후 갬 */
.mm-16 .s-sun-small{position:absolute;top:10px;left:17px;margin:0;}
.mm-16 .s-cloud-gray-small{background-position:-624px -420px;position:absolute;top:26px;left:6px;margin:0;width:36px;height:23px;}
.mm-16:hover .s-sun-small{-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;}
/* 뇌우 후 갬, 비 후 갬, 눈 후 갬 */
.s-cloud-gray-middle{background-position:-624px -461px;width:36px;height:23px;}
.mm-19 .s-sun-small{top:-8px;left:17px;position:absolute;}
/* 17 뇌우 후 갬 */
.mm-17 .s-sun-small{position:absolute;top:8px;left:17px;margin:0;}
.mm-17 .s-cloud-gray-middle{position:absolute;top:10px;left:6px;}
.mm-17 .s-thunderstorm-small{width:18px;height:20px;position:absolute;top:32px;left:15px;overflow:hidden;margin:0;}
.mm-17 .s-thunderstorm-small .s-rain-middle01{background-position:-903px -444px;width:5px;height:10px;position:absolute;top:10px;left:0;float:left;margin:0;}
.mm-17 .s-thunderstorm-small .s-rain-middle02{background-position:-903px -444px;width:5px;height:10px;position:absolute;top:10px;left:4px;float:left;margin:0;}
.mm-17 .s-thunderstorm-small .s-thunder-small{background-position:-921px -444px;width:7px;height:10px;top:10px;left:10px;margin:0;position:absolute;}
.mm-17:hover .s-rain-middle01{-webkit-animation:rain01 2s linear infinite;-moz-animation:rain01 2s linear infinite;animation:rain01 2s linear infinite;}
.mm-17:hover .s-rain-middle02{-webkit-animation:rain02 2s linear infinite;-moz-animation:rain02 2s linear infinite;animation:rain02 2s linear infinite;}
.mm-17:hover .s-thunder-small{-webkit-animation:thunder-small03 1s linear infinite;-moz-animation:thunder-small03 1s linear infinite;animation:thunder-small03 1s linear infinite;}
.mm-17:hover .s-sun-small{-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;}
/* 18 비 후 갬 */
.mm-18 .s-sun-small{position:absolute;top:8px;left:17px;margin:0;}
.mm-18 .s-cloud-gray-middle{position:absolute;top:10px;left:6px;}
.mm-18 .s-shower-big{width:52px;height:36px;position:absolute;top:46px;left:15px;}
.mm-18 .s-shower01{background-position:-905px -411px;width:5px;height:9px;position:absolute;top:-4px;left:0;margin:0;}
.mm-18 .s-shower02{background-position:-914px -411px;width:6px;height:12px;position:absolute;top:-4px;left:5px;margin:0;}
.mm-18 .s-shower03{background-position:-905px -411px;width:5px;height:9px;position:absolute;top:-4px;left:12px;margin:0;}
.mm-18:hover .s-shower01{-webkit-animation:shower_small01 0.6s linear infinite;-moz-animation:shower_small01 0.6s linear infinite;animation:shower_small01 0.6s linear infinite;}
.mm-18:hover .s-shower02{-webkit-animation:shower_small02 0.6s linear infinite;-moz-animation:shower_small02 0.6s linear infinite;animation:shower_small02 0.6s linear infinite;animation-delay: 0.2s;}
.mm-18:hover .s-shower03{-webkit-animation:shower_small03 0.6s linear infinite;-moz-animation:shower_small03 0.6s linear infinite;animation:shower_small03 0.6s linear infinite;animation-delay: 0.4s;}
/* 19 눈 후 갬 */
.mm-19 .s-sun-small{position:absolute;top:8px;left:17px;margin:0;}
.mm-19 .s-cloud-gray-middle{position:absolute;top:10px;left:6px;}
.mm-19 .s-snowflurry-big{width:18px;height:20px;position:absolute;top:43px;left:16px;}
.mm-19 .s-snow-small01{background-position:-957px -414px;width:5px;height:5px;float:left;text-align:center;margin:0 1px 0 0;}
.mm-19 .s-snow-small02{background-position:-957px -414px;width:5px;height:5px;float:left;text-align:center;margin:0 1px 0 0;}
.mm-19 .s-snow-small03{background-position:-957px -414px;width:5px;height:5px;float:left;text-align:center;margin:0 1px 0 0;}
.mm-19 .s-snow-small04{background-position:-957px -414px;width:5px;height:5px;float:left;text-align:center;clear:both;margin:1px 1px 0 3px;}
.mm-19 .s-snow-small05{background-position:-957px -414px;width:5px;height:5px;float:left;text-align:center;margin:1px 1px 0 0;}
.mm-19:hover .s-sun-small{-webkit-animation:sun 25s linear infinite;-moz-animation:sun 25s linear infinite;animation:sun 25s linear infinite;}
.mm-19:hover .s-snowflurry-big{-webkit-animation:snowsmall02 3s linear infinite;-moz-animation:snowsmall02 3s linear infinite;animation:snowsmall02 3s linear infinite;}
.mm-19:hover .s-snowflurry-big p{-webkit-animation:snowbig01 3s linear infinite;-moz-animation:snowbig01 3s linear infinite;animation:snowbig01 3s linear infinite;}
/* 20 눈비 후 갬 */
.mm-20 .s-cloud-gray-middle{position:absolute;top:10px;left:6px;}
.mm-20 .s-sun-small{position:absolute;top:10px;left:17px;margin:0;}
.mm-20 .s-snowrain-small{position:absolute;top:40px;left:8px;width:18px;height:14px;margin:0 7px;}
.mm-20:hover .s-snowrain01,.mm-20:hover .s-snowrain03,.mm-20:hover .s-snowrain05{-webkit-animation:snowrainbig01 3s linear infinite;-moz-animation:snowrainbig01 3s linear infinite;animation:snowrainbig01 3s linear infinite;}
.mm-20:hover .s-snowrain02,.mm-20:hover .s-snowrain04,.mm-20:hover .s-snowrain06{-webkit-animation:snowrainbig02 3s linear infinite;-moz-animation:snowrainbig02 3s linear infinite;animation:snowrainbig02 3s linear infinite;}
.mm-20 .s-snowrain01{background-position:-957px -414px;width:5px;height:5px;position:absolute;top:2px;left:0;margin:0;}
.mm-20 .s-snowrain02{background-position:-948px -448px;width:4px;height:6px;position:absolute;top:3px;left:6px;margin:0;}
.mm-20 .s-snowrain03{background-position:-957px -414px;width:5px;height:5px;position:absolute;top:2px;left:12px;margin:0;}
.mm-20 .s-snowrain04{background-position:-948px -448px;width:4px;height:6px;position:absolute;top:8px;left:-4px;margin:0;}
.mm-20 .s-snowrain05{background-position:-957px -414px;width:5px;height:5px;position:absolute;top:9px;left:2px;margin:0;}
.mm-20 .s-snowrain06{background-position:-948px -448px;width:4px;height:6px;position:absolute;top:8px;left:9px;margin:0;}
/* 21 구름많음 */
.s-cloud02{background-position:-77px -422px;width:31px;height:20px;margin:0;position:absolute;top:16px;left:22px;}
.s-cloud01{background-position:-681px -424px;width:37px;height:23px;margin:0;position:absolute;top:19px;left:5px;}
.s-cloud03{background-position:-739px -426px;width:24px;height:15px;margin:0;position:absolute;top:30px;left:29px;}
.mm-21:hover .s-cloud02{-webkit-animation:cloudsmall02 7s linear infinite;-moz-animation:cloudsmall02 7s linear infinite;animation:cloudsmall02 7s linear infinite;}
.mm-21:hover .s-cloud01{-webkit-animation:cloudsmall01 7s linear infinite;-moz-animation:cloudsmall01 7s linear infinite;animation:cloudsmall01 7s linear infinite;}
.mm-21:hover .s-cloud03{-webkit-animation:cloudsmall03 7s linear infinite;-moz-animation:cloudsmall03 7s linear infinite;animation:cloudsmall03 7s linear infinite;}
/* 22 황사 */
.s-wind01{background-position:-1002px -414px;width:31px;height:37px;margin:0;position:absolute;top:11px;left:8px;}
.s-wind02{background-position:-1046px -433px;width:36px;height:12px;margin:0;top:31px;left:12px;position:absolute;}
.s-yellow-sand{background-position:-1105px -420px;width:24px;height:34px;position:absolute;top:2px;left:34px;}
.mm-22:hover .s-wind01{-webkit-animation:windsmall01 4s linear infinite;-moz-animation:windsmall01 4s linear infinite;animation:windsmall01 4s linear infinite;}
.mm-22:hover .s-wind02{-webkit-animation:windsmall02 4s linear infinite;-moz-animation:windsmall02 4s linear infinite;animation:windsmall02 4s linear infinite;}
.mm-22:hover .s-yellow-sand{-webkit-animation:thunder 1.5s linear infinite;-moz-animation:thunder 1.5s linear infinite;animation:thunder 1.5s linear infinite;}

/* keyframes motion */
/* 맑음 */
@keyframes sun { 100% {transform:rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);}}
/* 구름조금 */
@keyframes cloudsmall {
    0% { left:52px;}
    40%{left:32px;}
    60% { left:42px;}
    90% {left:42px;}
    100% { left:52px;}
}
/* 흐림 */
@keyframes cloud-big01 {
    0% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}
    25% {-webkit-transform: translate(2px, 0px);transform: translate(2px, 0px);}
    50% {-webkit-transform: translate(6px, 0px);transform: translate(6px, 0px);}
    75% {-webkit-transform: translate(2px, 0px);transform: translate(2px, 0px);}
    100% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}
}
@keyframes cloud-big02 {
    0% {-webkit-transform: translate(0, 0px);transform: translate(0, 0px);}
    25% {-webkit-transform: translate(-3px, 0px);transform: translate(-3px, 0px);}
    50% {-webkit-transform: translate(-6px, 0px);transform: translate(-6px, 0px);}
    75% {-webkit-transform: translate(-3px, 0px);transform: translate(-3px, 0px);}
    100% {-webkit-transform: translate(0, 0px);transform: translate(0, 0px);}
}
/* 흐림_small */
@keyframes cloud-small01{
    0% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}
    25% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
    50% {-webkit-transform: translate(2px, 0px);transform: translate(2px, 0px);}
    75% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
    100% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}
}
@keyframes cloud-small02{
    0% {-webkit-transform: translate(0, 0px);transform: translate(0, 0px);}
    25% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}
    50% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);}
    75% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}
    100% {-webkit-transform: translate(0, 0px);transform: translate(0, 0px);}
}
/* 비 */
@keyframes raindrop01 {
    0% {
        -webkit-transform:translate(10px, 0px);
        -moz-transform:translate(10px, 0px);
        -o-transform:translate(10px, 0px);
        -ms-transform:translate(10px, 0px);
        transform:translate(10px, 0px);
        opacity:1;
    } /* from */
    100% {
        -webkit-transform:translate(0px, 20px);
        -moz-transform:translate(0px, 20px);
        -o-transform:translate(0px, 20px);
        -ms-transform:translate(0px, 20px);
        transform:translate(0px, 20px);
        opacity:0.2;
    } /* to */
}
@-webkit-keyframes raindrop01 {
    0% {-webkit-transform:translate(10px, 0px);}
    100% {-webkit-transform:translate(0px, 20px);}
}
@keyframes raindrop02 {
    0% {
        -webkit-transform:translate(10px, 0px);
        -moz-transform:translate(10px, 0px);
        -o-transform:translate(10px, 0px);
        -ms-transform:translate(10px, 0px);
        transform:translate(10px, 0px);
        opacity:0.2;
    } /* from */
    100% {
        -webkit-transform:translate(0px, 20px);
        -moz-transform:translate(0px, 20px);
        -o-transform:translate(0px, 20px);
        -ms-transform:translate(0px, 20px);
        transform:translate(0px, 20px);
        opacity:1;
    } /* to */
}
@-webkit-keyframes raindrop02 {
    0% {-webkit-transform:translate(10px, 0px);}
    100% {-webkit-transform:translate(0px, 20px);}
}
@keyframes raindrop03 {
    0% {
        -webkit-transform:translate(5px, 0px);
        -moz-transform:translate(5px, 0px);
        -o-transform:translate(5px, 0px);
        -ms-transform:translate(5px, 0px);
        transform:translate(5px, 0px);
        opacity:1;
    } /* from */
    100% {
        -webkit-transform:translate(-5px, 20px);
        -moz-transform:translate(-5px, 20px);
        -o-transform:translate(-5px, 20px);
        -ms-transform:translate(-5px, 20px);
        transform:translate(-5px, 20px);
        opacity:0.2;
    } /* to */
}
@-webkit-keyframes raindrop03 {
    0% {-webkit-transform:translate(5px, 0px);}
    100% {-webkit-transform:translate(-5px, 20px);}
}
/* 비_small */
@keyframes raindropsmall01 {
    0% {
        -webkit-transform:translate(0px, 1px);
        -moz-transform:translate(0px, 1px);
        -o-transform:translate(0px, 1px);
        -ms-transform:translate(0px, 1px);
        transform:translate(0px, 1px);
        opacity:1;
    } /* from */
    100% {
        -webkit-transform:translate(-4px, 7px);
        -moz-transform:translate(-4px, 7px);
        -o-transform:translate(-4px, 7px);
        -ms-transform:translate(-4px, 7px);
        transform:translate(-4px, 7px);
        opacity:0.2;
    } /* to */
}
@-webkit-keyframes raindropsmall01 {
    0% {-webkit-transform:translate(0px, 1px);}
    100% {-webkit-transform:translate(-4px, 7px);}
}
@keyframes raindropsmall02 {
    0% {
        -webkit-transform:translate(2px, -2px);
        -moz-transform:translate(2px, -2px);
        -o-transform:translate(2px, -2px);
        -ms-transform:translate(2px, -2px);
        transform:translate(2px, -2px);
        opacity:0.2;
    } /* from */
    100% {
        -webkit-transform:translate(-3px, 8px);
        -moz-transform:translate(-3px, 8px);
        -o-transform:translate(-3px, 8px);
        -ms-transform:translate(-3px, 8px);
        transform:translate(-3px, 8px);
        opacity:1;
    } /* to */
}
@-webkit-keyframes raindropsmall02 {
    0% {-webkit-transform:translate(3px, -2px);}
    100% {-webkit-transform:translate(-3px, 8px);}
}
@keyframes raindropsmall03 {
    0% {
        -webkit-transform:translate(2px, 0px);
        -moz-transform:translate(2px, 0px);
        -o-transform:translate(2px, 0px);
        -ms-transform:translate(2px, 0px);
        transform:translate(2px, 0px);
        opacity:1;
    } /* from */
    100% {
        -webkit-transform:translate(-3px, 10px);
        -moz-transform:translate(-3px, 10px);
        -o-transform:translate(-3px, 10px);
        -ms-transform:translate(-3px, 10px);
        transform:translate(-3px, 10px);
        opacity:0.2;
    } /* to */
}
@-webkit-keyframes raindropsmall03 {
    0% {-webkit-transform:translate(2px, 0px);}
    100% {-webkit-transform:translate(-3px, 10px);}
}

/* 눈 */
@keyframes snowbig01 {100% {transform:rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);}}
@Keyframes snowbig {
    0% {
        -webkit-transform:translate(0, -12px);
        -moz-transform:translate(0, -12px);
        -o-transform:translate(0, -12px);
        -ms-transform:translate(0, -12px);
        transform:translate(0, -12px);
        opacity:0;
    } /* from */
    50% {opacity:1}
    100% {
        -webkit-transform:translate(0, 3px);
        -moz-transform:translate(0, 3px);
        -o-transform:translate(0, 3px);
        -ms-transform:translate(0, 3px);
        transform:translate(0, 3px);
        opacity:0;
    } /* to */
}
@keyframes snowsmall {
    0% {
        -webkit-transform:translate(0, -5px);
        -moz-transform:translate(0, -5px);
        -o-transform:translate(0, -5px);
        -ms-transform:translate(0, -5px);
        transform:translate(0, -5px);
        opacity:0;
    } /* from */
    50% {opacity:1}
    100% {
        -webkit-transform:translate(0, 3px);
        -moz-transform:translate(0, 3px);
        -o-transform:translate(0, 3px);
        -ms-transform:translate(0, 3px);
        transform:translate(0, 3px);
        opacity:0;
    } /* to */
}
@keyframes  snowsmall02 {
    0% {
        -webkit-transform:translate(0, -3px);
        -moz-transform:translate(0, -3px);
        -o-transform:translate(0, -3px);
        -ms-transform:translate(0, -3px);
        transform:translate(0, -3px);
        opacity:0;
    } /* from */
    50% {opacity:1}
    100% {
        -webkit-transform:translate(0, 2px);
        -moz-transform:translate(0, 2px);
        -o-transform:translate(0, 2px);
        -ms-transform:translate(0, 2px);
        transform:translate(0, 2px);
        opacity:0;
    } /* to */
}
/* 눈비 */
@keyframes snowrainbig01 {
    0%{opacity:0.2;}
    50%{opacity:1;}
    100% {transform:rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);opacity:0.2;}
}
@keyframes snowrainbig02 {
    0% {opacity:0.5;}
    50% {opacity:0.2;}
    90% {opacity:1;}
    100% {opacity:0.5;}
}
/* 소나기 */
@keyframes shower01 {0% {-webkit-transform:translate(6px, -5px);
-moz-transform:translate(6px, -5px);
-o-transform:translate(6px, -5px);
-ms-transform:translate(6px, -5px);
transform:translate(6px, -5px);
opacity:1;} /* from */
100% {-webkit-transform:translate(-5px, 15px);
-moz-transform:translate(-5px, 15px);
-o-transform:translate(-5px, 15px);
-ms-transform:translate(-5px, 15px);
transform:translate(-5px, 15px);
opacity:0.2;} /* to */}
@-webkit-keyframes shower01 {0% {-webkit-transform:translate(6px, -5px);}
100% {-webkit-transform:translate(-5px, 15px);}}

@keyframes shower02 {0% {-webkit-transform:translate(4px, -5px);
-moz-transform:translate(4px, -5px);
-o-transform:translate(4px, -5px);
-ms-transform:translate(4px, -5px);
transform:translate(4px, -5px);
opacity:0.2;} /* from */
100% {-webkit-transform:translate(-5px, 15px);
-moz-transform:translate(-5px, 15px);
-o-transform:translate(-5px, 15px);
-ms-transform:translate(-5px, 15px);
transform:translate(-5px, 15px);
opacity:1;} /* to */}
@-webkit-keyframes shower02 {0% {-webkit-transform:translate(4px, -5px);}
100% {-webkit-transform:translate(-5px, 15px);}}

@keyframes shower03 {0% {-webkit-transform:translate(6px, -5px);
-moz-transform:translate(6px, -5px);
-o-transform:translate(6px, -5px);
-ms-transform:translate(6px, -5px);
transform:translate(6px, -5px);
opacity:1;} /* from */
100% {-webkit-transform:translate(-5px, 15px);
-moz-transform:translate(-5px, 15px);
-o-transform:translate(-5px, 15px);
-ms-transform:translate(-5px, 15px);
transform:translate(-5px, 15px);
opacity:0.2;} /* to */}
@-webkit-keyframes shower03 {0% {-webkit-transform:translate(6px, -5px);}
100% {-webkit-transform:translate(-5px, 15px);}}

/* 소나기_small */
@keyframes shower_small01 {0% {-webkit-transform:translate(3px, -5px);
-moz-transform:translate(3px, -5px);
-o-transform:translate(3px, -5px);
-ms-transform:translate(3px, -5px);
transform:translate(3px, -5px);
opacity:1;} /* from */
100% {-webkit-transform:translate(-1px, 5px);
-moz-transform:translate(-1px, 5px);
-o-transform:translate(-1px, 5px);
-ms-transform:translate(-1px, 5px);
transform:translate(-1px, 5px);
opacity:0.2;} /* to */}
@-webkit-keyframes shower_small01 {0% {-webkit-transform:translate(3px, -5px);}
100% {-webkit-transform:translate(-1px, 5px);}}

@keyframes shower_small02 {0% {-webkit-transform:translate(3px, -5px);
-moz-transform:translate(3px, -5px);
-o-transform:translate(3px, -5px);
-ms-transform:translate(3px, -5px);
transform:translate(3px, -5px);
opacity:0.2;} /* from */
100% {-webkit-transform:translate(-2px, 5px);
-moz-transform:translate(-2px, 5px);
-o-transform:translate(-2px, 5px);
-ms-transform:translate(-2px, 5px);
transform:translate(-2px, 5px);
opacity:1;} /* to */}
@-webkit-keyframes shower_small02 {0% {-webkit-transform:translate(3px, -5px);}
100% {-webkit-transform:translate(-2px, 5px);}}

@keyframes shower_small03 {0% {-webkit-transform:translate(3px, -5px);
-moz-transform:translate(3px, -5px);
-o-transform:translate(3px, -5px);
-ms-transform:translate(3px, -5px);
transform:translate(3px, -5px);
opacity:1;} /* from */
100% {-webkit-transform:translate(-2px, 5px);
-moz-transform:translate(-2px, 5px);
-o-transform:translate(-2px, 5px);
-ms-transform:translate(-2px, 5px);
transform:translate(-2px, 5px);
opacity:0.2;} /* to */}
@-webkit-keyframes shower_small03 {0% {-webkit-transform:translate(3px, -5px);}
100% {-webkit-transform:translate(-2px, 5px);}}

/* 소낙눈 */
@keyframes snowbig02 { 0% {-webkit-transform: translate(-2px, -10px) rotate(0deg);transform: translate(-2px, -10px) rotate(0deg);opacity: 0;}
50% {-webkit-transform: translate(-1px, -5px) rotate(180deg);transform: translate(-1px, -5px) rotate(180deg);opacity: 1;}
100% {-webkit-transform: translate(0, 0) rotate(360deg);transform: translate(0, 0) rotate(360deg);opacity: 0;}}

/* 안개 */
@keyframes fog01 {0% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);left:10px;opacity:1;}
25% {-webkit-transform: translate(2px, 0px);transform: translate(2px, 0px);left:10px;opacity:0.75;}
50% {-webkit-transform: translate(6px, 0px);transform: translate(6px, 0px);opacity:0.5;}
75% {-webkit-transform: translate(2px, 0px);transform: translate(2px, 0px);opacity:0.75;}
100% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);left:10px;opacity:1;}}

@keyframes fog02 { 0% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);left:10px;opacity:0.5;}
25% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);left:10px;opacity:0.75;}
50% {-webkit-transform: translate(-8px, 0px);transform: translate(-8px, 0px);opacity:1;}
75% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);opacity:0.75;}
100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);left:10px;opacity:0.5;}}

/* 안개_small */
@keyframes fog-small01 {0% {-webkit-transform: translate(-8px, 0px);transform: translate(-8px, 0px);left:10px;opacity:1;}
25% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);left:10px;opacity:0.75;}
50% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);opacity:0.5;}
75% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);opacity:0.75;}
100% {-webkit-transform: translate(-8px, 0px);transform: translate(-8px, 0px);left:10px;opacity:1;}}

@keyframes fog-small02 { 0% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);left:10px;opacity:0.5;}
25% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);left:10px;opacity:0.75;}
50% {-webkit-transform: translate(-8px, 0px);transform: translate(-8px, 0px);opacity:1;}
75% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);opacity:0.75;}
100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);left:10px;opacity:0.5;}}

/* 뇌우 */
@keyframes rain01 { 0% {opacity:0.2;}
50% {opacity:1;}
90% {opacity:0.5;}
100% {opacity:0.2;}}
@keyframes rain02 { 0% {opacity:0.5;}
50% {opacity:0.2;}
90% {opacity:1;}
100% {opacity:0.5;}}
@keyframes thunder-big {0% {-webkit-transform:translate(8px, 0px);
-moz-transform:translate(8px, 0px);
-o-transform:translate(8px, 0px);
-ms-transform:translate(8px, 0px);
transform:translate(8px, 0px);
opacity:0.2;} /* from */
60% {-webkit-transform:translate(0px, 20px);
-moz-transform:translate(0px, 20px);
-o-transform:translate(0px, 20px);
-ms-transform:translate(0px, 20px);
transform:translate(0px, 20px);
opacity:1;}
100% {-webkit-transform:translate(0px, 20px);
-moz-transform:translate(0px, 20px);
-o-transform:translate(0px, 20px);
-ms-transform:translate(0px, 20px);
transform:translate(0px, 20px);
opacity:0.5;} /* to */}
@keyframes thunder-small {0% {-webkit-transform:translate(0px, 0px);
-moz-transform:translate(0px, 0px);
-o-transform:translate(0px, 0px);
-ms-transform:translate(0px, 0px);
transform:translate(0px, 0px);
opacity:0.2;} /* from */
60% {-webkit-transform:translate(-10px, 20px);
-moz-transform:translate(-10px, 20px);
-o-transform:translate(-10px, 20px);
-ms-transform:translate(-10px, 20px);
transform:translate(-10px, 20px);
opacity:1;}
100% {-webkit-transform:translate(-10px, 20px);
-moz-transform:translate(-10px, 20px);
-o-transform:translate(-10px, 20px);
-ms-transform:translate(-10px, 20px);
transform:translate(-10px, 20px);
opacity:0.5;} /* to */}

/* 뇌우_small */
@keyframes thunder-big02 {0% {-webkit-transform:translate(3px, -10px);
-moz-transform:translate(3px, -10px);
-o-transform:translate(3px, -10px);
-ms-transform:translate(3px, -10px);
transform:translate(3px, -10px);
opacity:0.2;} /* from */
60% {-webkit-transform:translate(-2px, 0px);
-moz-transform:translate(-2px, 0px);
-o-transform:translate(-2px, 0px);
-ms-transform:translate(-2px, 0px);
transform:translate(-2px, 0px);
opacity:1;}
100% {-webkit-transform:translate(-2px, 0px);
-moz-transform:translate(-2px, 0px);
-o-transform:translate(-2px, 0px);
-ms-transform:translate(-2px, 0px);
transform:translate(-2px, 0px);
opacity:0.5;} /* to */}
@keyframes thunder-small02 {0% {-webkit-transform:translate(0px, 0px);
-moz-transform:translate(0px, 0px);
-o-transform:translate(0px, 0px);
-ms-transform:translate(0px, 0px);
transform:translate(0px, 0px);
opacity:0.2;} /* from */
60% {-webkit-transform:translate(-10px, 20px);
-moz-transform:translate(-10px, 20px);
-o-transform:translate(-10px, 20px);
-ms-transform:translate(-10px, 20px);
transform:translate(-10px, 20px);
opacity:1;}
100% {-webkit-transform:translate(-10px, 20px);
-moz-transform:translate(-10px, 20px);
-o-transform:translate(-10px, 20px);
-ms-transform:translate(-10px, 20px);
transform:translate(-10px, 20px);
opacity:0.5;} /* to */}
@keyframes thunder-small03{0% {-webkit-transform:translate(5px, -10px);
-moz-transform:translate(5px, -10px);
-o-transform:translate(5px, -10px);
-ms-transform:translate(5px, -10px);
transform:translate(5px, -10px);
opacity:0.2;} /* from */
60% {-webkit-transform:translate(-1px, 0px);
-moz-transform:translate(-1px, 0px);
-o-transform:translate(-1px, 0px);
-ms-transform:translate(-1px, 0px);
transform:translate(-1px, 0px);
opacity:1;}
100% {-webkit-transform:translate(-1px, 0px);
-moz-transform:translate(-1px, 0px);
-o-transform:translate(-1px, 0px);
-ms-transform:translate(-1px, 0px);
transform:translate(-1px, 0px);
opacity:0.5;} /* to */}



/* 차차흐려짐 */
@keyframes cloudover01 {0% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);}
25% {-webkit-transform: translate(1px, 0px);transform: translate(1px, 0px);}
50% {-webkit-transform: translate(6px, 0px);transform: translate(6px, 0px);}
75% {-webkit-transform: translate(1px, 0px);transform: translate(1px, 0px);}
100% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);}}
@keyframes cloudover02 {0% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);opacity:0.2;}
25% {-webkit-transform: translate(1px, 0px);transform: translate(1px, 0px);}
50% {-webkit-transform: translate(6px, 0px);transform: translate(6px, 0px);opacity:1;}
75% {-webkit-transform: translate(1px, 0px);transform: translate(1px, 0px);}
100% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);opacity:0.1;}}

/* 흐려져 눈 */
@keyframes snow01{100% {transform:rotate(-360deg);-webkit-transform: rotate(-360deg);-moz-transform: rotate(-360deg);}}
@keyframes snow02{100% {transform:rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);}}

/* 구름많음 */
@keyframes cloud01 {0% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
25% {-webkit-transform: translate(5px, 0px);transform: translate(5px, 0px);}
50% {-webkit-transform: translate(10px, 0px);transform: translate(10px, 0px);}
75% {-webkit-transform: translate(5px, 0px);transform: translate(5px, 0px);}
100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}}
@keyframes cloud02 { 0% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
25% {-webkit-transform: translate(-7px, 0px);transform: translate(-7px, 0px);}
50% {-webkit-transform: translate(-14px, 0px);transform: translate(-14px, 0px);}
75% {-webkit-transform: translate(-7px, 0px);transform: translate(-7px, 0px);}
100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}}
@keyframes cloud03 { 0% {-webkit-transform: translate(-5px, 0px);transform: translate(-5px, 0px);}
25% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
50% {-webkit-transform: translate(5px, 0px);transform: translate(5px, 0px);}
75% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
100% {-webkit-transform: translate(-5px, 0px);transform: translate(-5px, 0px);}}

/* 구름많음_small */
@keyframes cloudsmall01 {0% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}
25% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
50% {-webkit-transform: translate(2px, 0px);transform: translate(2px, 0px);}
75% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
100% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}}
@keyframes cloudsmall02 { 0% {-webkit-transform: translate(4px, 0px);transform: translate(4px, 0px);}
25% {-webkit-transform: translate(2px, 0px);transform: translate(2px, 0px);}
50% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
75% {-webkit-transform: translate(2px, 0px);transform: translate(2px, 0px);}
100% {-webkit-transform: translate(4px, 0px);transform: translate(4px, 0px);}}
@keyframes cloudsmall03 { 0% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}
25% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
50% {-webkit-transform: translate(2px, 0px);transform: translate(2px, 0px);}
75% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
100% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}}
/* 황사 */
@keyframes wind01 {0% {-webkit-transform: translate(-6px, 0px);transform: translate(-6px, 0px);}
25% {-webkit-transform: translate(-3px, 0px);transform: translate(-3px, 0px);}
50% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
75% {-webkit-transform: translate(-3px, 0px);transform: translate(-3px, 0px);}
100% {-webkit-transform: translate(-6px, 0px);transform: translate(-6px, 0px);}}
@keyframes wind02 {0% {-webkit-transform: translate(3px, 0px);transform: translate(3px, 0px);}
25% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
50% {-webkit-transform: translate(-3px, 0px);transform: translate(-3px, 0px);}
75% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
100% {-webkit-transform: translate(3px, 0px);transform: translate(3px, 0px);}}

/* 황사_small */
@keyframes windsmall01 {0% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);}
25% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}
50% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
75% {-webkit-transform: translate(-2px, 0px);transform: translate(-2px, 0px);}
100% {-webkit-transform: translate(-4px, 0px);transform: translate(-4px, 0px);}}
@keyframes windsmall02 {0% {-webkit-transform: translate(3px, 0px);transform: translate(3px, 0px);}
25% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
50% {-webkit-transform: translate(-1px, 0px);transform: translate(-1px, 0px);}
75% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
100% {-webkit-transform: translate(3px, 0px);transform: translate(3px, 0px);}}
