@charset "UTF-8";

@import url("https://fonts.googleapis.com/css?family=Gothic+A1:600,700,800");

.intro_wrap {position:relative; width:100%; max-width:1920px; margin: 0 auto; height:1040px; background:url("http://news.chosun.com/interactive/seoul/img//pattern_sky.gif") repeat; }
.intro_inner {max-width:1920px;}
.title_txt { text-align:center; font-size:20px; color:#056d95; letter-spacing: normal;}
.title_txt img.title_fall{padding:88px 0 27px 0}
.title_txt h1 {font-family: 'Gothic A1', sans-serif; font-weight:700; text-align:center; font-size:20px;}
.title_txt h1 span {display: block}
.title_txt .title_guide {position: relative; font-family: 'Gothic A1', sans-serif; font-size:13px; font-weight:600; color:#4c8da2; z-index: 2;}
.title_txt .title_guid br {display:none}

.btn_find {position:relative; display:inline-block; z-index: 2; margin:30px 0 10px;  width:261px; height:97px; background:url("http://news.chosun.com/interactive/seoul/img//btn_find_on.png") no-repeat;}
.btn_find span{display:inline-block; margin:10px 0 0 20px}
.btn_find .txt { width:146px; height:49px; background:url("http://news.chosun.com/interactive/seoul/img//btn_find_on_txt.png") no-repeat;}
.btn_find:hover {background:url("http://news.chosun.com/interactive/seoul/img//btn_find_hover.png") no-repeat;}
.btn_find:hover .txt {width:146px; height:49px; background:url("http://news.chosun.com/interactive/seoul/img//btn_find_hover_txt.png") no-repeat;}
 /* .title_fall {position: absolute; animation: fall 2.1s cubic-bezier(0.645, 0.045, 0.355, 1.000);} */


/* 작은동산 */
.ic_mt_s {position:absolute; left:0; bottom:0; height:626px; width:100%; background:url("http://news.chosun.com/interactive/seoul/img//bg_mt_s.png") no-repeat; }

/* 아파트 */
.apt01 {position:absolute; display:block; bottom:234px; left:70px; width:124px; height:244px; background:url("http://news.chosun.com/interactive/seoul/img//apt1.png") no-repeat; }
.apt02 {position:absolute; display:block; top:18vh; left:0; right:0; margin:0 auto; width:275px; height:299px; background:url("http://news.chosun.com/interactive/seoul/img//apt2.png") no-repeat; }
.apt03 {position:absolute; display:block; top:31vh; left: 50%; margin-left: -300px; right:0; width:155px; height:213px; background:url("http://news.chosun.com/interactive/seoul/img//apt3.png") no-repeat; }

.apt01_motion {animation:apt_motion01 2s cubic-bezier(0.57,-0.69, 0.46, 1.65);}
.apt02_motion {animation:apt_motion02 3s cubic-bezier(0.57,-0.69, 0.46, 1.65);}
.apt03_motion {animation:apt_motion03 4s cubic-bezier(0.57,-0.69, 0.46, 1.65);}

@keyframes apt_motion01 {
  0%{bottom:40px; transform: scale(0.3);}
  50%{bottom:120px; transform: scale(0.6);}
  100%{bottom:234px; transform: scale(1);}
}

@keyframes apt_motion02 {
  0%{top:42vh; transform: scale(0.3);}
  50%{top:26vh; transform: scale(0.6);}
  100%{top:18vh;; transform: scale(1);}
}

@keyframes apt_motion03 {
  0%{top:49vh; transform: scale(0.3);}
  50%{top:37vh; transform: scale(0.6);}
  100%{top:31vh; transform: scale(1);}
}

/* 관람차 */
.ic_wheel_area {position:absolute; bottom:153px; left:375px;}
.ic_wheel_area span {display:block;}
.ic_wheel {position:relative;width:143px; height:140px; z-index: 2} 
.ic_wheel_body { position:relative;text-align:center; margin-top:-47px;}

.rotate { 
  animation:rotate 9s linear 0s infinite normal forwards running;
  -webkit-animation:rotate 9s linear 0s infinite normal forwards running;
  -moz-animation:rotate 9s linear 0s infinite normal forwards running;
  -ms-animation:rotate 9s linear 0s infinite normal forwards running;
  -o-animation:rotate 9s linear 0s infinite normal forwards running;
}
@keyframes rotate {
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}

/* 큰동산 */
.ic_mt_b {position:absolute; left:0; bottom:0; height:748px; width:100%; background:url("http://news.chosun.com/interactive/seoul/img//bg_mt_b.png") no-repeat;}

/* 구름 */
.ic_cloud_b {position:absolute; left:74px; top:133px; display:block; width:120px; height:75px; background-image: url("http://news.chosun.com/interactive/seoul/img//ic_cloud_b_all.png");}
.ic_cloud_s_l {position:absolute; left:270px; bottom:472px; z-index: 1;}
.ic_cloud_b_r {position:absolute; right:494px; top:380px;  display:block; width:110px; height:80px; background-image: url("http://news.chosun.com/interactive/seoul/img//ic_cloud_s_all.png"); z-index: 1;}
.ic_cloud_s_r {position:absolute; right:59px; top:240px; }
.cloud_moving {
  animation: cloud_moving 3s steps(2) infinite normal;
}
.cloud_moving_s {
  animation: cloud_moving_s 2s steps(2) infinite normal;
}

@keyframes cloud_moving {
  0% {background-position: 0px 0px; } 
  100% {background-position: -240px -0px; } 
}

@keyframes cloud_moving_s {
  0% {background-position: 0px 0px; } 
  100% {background-position: -220px -0px; } 
}

.ic_cloud_box {
   animation: cloud_4 5s linear 0s infinite normal forwards running;
}

/* @keyframes cloud_1 {
  0%{top:133px;}
  25%{top:138px;}
  50%{top:143px;}
  75%{top:136px;}
  100%{top:133px;}
}

@keyframes cloud_4 {
  0%{right:59px; }
  25%{right:115px;}
  50%{right:130px;}
  75%{right:115px;}
  100%{right:100px;}
} */

/* 해 */
.ic_sun {position:absolute; right:295px; top:35px; display:block; width:160px; height:160px; background-image: url("http://news.chosun.com/interactive/seoul/img//ic_sun_all.gif");}
.sun_moving { animation: sun_moving 6s steps(3) infinite normal;}

@keyframes sun_moving {
  0% {background-position: 0px 0px; } 
  100% {background-position: -480px -0px; } 
}

/* .sun { 
  animation:rotate 40s linear 0s infinite normal forwards running;
  -webkit-animation:rotate 40s linear 0s infinite normal forwards running;
  -moz-animation:rotate 40s linear 0s infinite normal forwards running;
  -ms-animation:rotate 40s linear 0s infinite normal forwards running;
  -o-animation:rotate 40s linear 0s infinite normal forwards running;
}
@keyframes sun {
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
} */

/* 애드벌룬 */
.ic_balloon {position:absolute; z-index:1;}
.balloon {animation: balloon 30s linear 0s infinite normal forwards running;
-webkit-animation: balloon 30s linear 0s infinite normal forwards running;
-moz-animation: balloon 30s linear 0s infinite normal forwards running;
-ms-animation: balloon 30s linear 0s infinite normal forwards running;
-o-animation: balloon 30s linear 0s infinite normal forwards running;
}

@keyframes balloon {
  0%{top:100px; left:50%; margin-left:-480px;}
  25%{top:320px; left:50%; margin-left:-500px; transform:rotate(20deg);}
  50%{top:540px; left:50%; margin-left:-520px;  transform:rotate(-20deg);}
  75%{top:320px; left:50%;margin-left:-500px; transform:rotate(20deg);}
  100%{top:100px; left:50%; margin-left:-480px;}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 .ic_balloon { position:absolute; z-index:1; top:250px; left:50%; margin-left:-440px;}
}
/* ms hak */

/* 자동차 */
.ic_car {display:block; width:175px; height:89px; background-image: url("http://news.chosun.com/interactive/seoul/img//ic_car_all.png");}
.car_moving {animation: car_moving 3s steps(4) infinite normal;
-webkit-animation: car_moving 3s steps(4) infinite normal;
-moz-animation: car_moving 3s steps(4) infinite normal;
-ms-animation: car_moving 3s steps(4) infinite normal;
-o-animation: car_moving 3s steps(4) infinite normal;
}
.car_race {position:absolute; 
animation: car_race 3s linear 0s normal forwards running;
-webkit-animation: car_race 3s linear 0s normal forwards running;
-moz-animation: car_race 3s linear 0s normal forwards running;
-ms-animation: car_race 3s linear 0s normal forwards running;
-o-animation: car_race 3s linear 0s normal forwards running;
}

@keyframes car_race {
  0%{left:1049px; bottom:217px;}
  50%{left:1199px; bottom:260px;}
  100%{left:1349px; bottom:295px;}
}

@keyframes car_moving {
  0% {background-position: 0px 0px; } 
  100% {background-position: -700px -0px; } 
}




/* 모바일 */
@media all and (max-width:768px) {
  .intro_wrap {height:700px;}

  .title_txt img.title_fall {width:279px; padding:25px 0 16px 0;}
  .title_txt h1 {font-size: 15px; font-family: HelveticaNeue,AppleSDGothicNeo,'Malgun Gothic','맑은 고딕', Dotum, '돋움', sans-serif; z-index: 2;
    position: relative;}
  .title_txt h1 span{display:none}
  .btn_find {width:200px; height: 77px; background-size: 100%; margin:24px 0 3px 0;}
  .btn_find .txt {background-size:100%; transform: scale(0.75); margin:3px 0 0 16px;}
  .title_txt .title_guide {font-size: 11px; font-family: HelveticaNeue,AppleSDGothicNeo,'Malgun Gothic','맑은 고딕', Dotum, '돋움', sans-serif}

  .btn_find:hover {background:url("http://news.chosun.com/interactive/seoul/img//btn_find_on.png") no-repeat; width:200px; height: 77px; background-size: 100%; margin:24px 0 3px 0;}
  .btn_find:hover .txt {background:url("http://news.chosun.com/interactive/seoul/img//btn_find_on_txt.png") no-repeat; background-size:100%; transform: scale(0.75); margin:3px 0 0 16px;}

  .ic_cloud_b_r {right:0; transform: scale(0.4); top:218px;}
  .apt01, .apt02, .apt03, .ic_cloud_s_r,  .ic_cloud_b, .ic_cloud_s_l {display: none}
  .ic_balloon {animation: balloon 5s linear 0s infinite normal forwards running; transform:scale(0.5);}

  .ic_sun {left:254px; top:31px; transform:scale(0.35);}

  .ic_mt_b, .ic_mt_s {display:none}
  .ic_mt_b.m {display: block; width:100%; height:362px; background: url(http://news.chosun.com/interactive/seoul/img//m_bg_mt.png) no-repeat; background-size:100%; background-position: 50% 0%;}

  /* .ic_car */

  .ic_car {top:0; bottom:0; margin:0 auto; left:50%; transform: scale(0.6) translateX(132%) translateY(47vh);}
  .car_race {animation: none;}

  @keyframes balloon {
    0%{left:95px; top:315px;}
    15%{left:100px; top:320px;}
    30%{left:105px; top:315px;}
    45%{left:110px; top:320px;}
    60%{left:105px; top:315px;}
    75%{left:100px; top:320px;}
    100%{left:95px; top:315px;}
  }

  
}

@media all and (max-width:360px)  {
  .intro_wrap {
    height: 686px;
  }
  .ic_mt_b.m {
    height: 348px;
  }
}