/* ########## section0 ########## */
#section0 {width:100%; margin:0 auto; padding:80px 0; }
  #section0 h3 {width:100%; margin:0 auto; font-size:19px; font-family:"arita_dodum-Medium"; color:#333; text-align:center; padding:50px 0 0; font-weight:400; line-height:40px;}
  #section0 .intro {width:100%; margin:0 auto;  font-size:14px; font-family:"arita_dodum-Light"; text-align:center; color:rgba(135,177,136,0); transition:color .5s ease-in-out; padding:15px 0 30px;}
  #content {width:1008px; margin:0 auto; }
  #content:after {content:""; display:block; clear:both;}

  #mapArea {width:700px; height:494px; margin:0 auto; float:left; position:relative; transition:all .5s ease-in-out;}
    #mapImg {width:100%; height:100%; overflow:hidden; margin:0 auto; text-align:center; outline:1px solid #ccc;}
      #mapImg img {width:700px; outline:1px solid #aaa;}
    #mapMarker li {width:40px; text-align:center; position:absolute; cursor:pointer; z-index:5;}
      #mapMarker img {width:30px;}
      #mapMarker .spot0 {left:255px; top:350px;}
      #mapMarker .spot1 {left:110px; top:70px;}
      #mapMarker .spot2 {left:235px; top:55px;}
      #mapMarker .spot3 {left:330px; top:45px;}
      #mapMarker .spot4 {left:380px; top:65px;}
      #mapMarker .spot5 {left:580px; top:275px;}
      #mapMarker .spot6 {left:535px; top:345px;}
      #mapMarker .spot7 {left:25px; top:175px;}
      #mapMarker .spot8 {left:480px; top:8px;}

      #mapMarker li .markerNum {position:absolute; left:17px; top:15px; font-size:12px; color:#fff; font-family:"arita_dodum-Light";}

      #mapMore li {width:50px; height:50px; position:absolute; left:0; top:0; z-index:4; animation:magani 1s infinite alternate;}
      #mapMore .spot0 {left:276px; top:350px;}
      #mapMore .spot1 {left:131px; top:70px;}
      #mapMore .spot2 {left:256px; top:55px;}
      #mapMore .spot3 {left:351px; top:45px;}
      #mapMore .spot4 {left:401px; top:65px;}
      #mapMore .spot5 {left:601px; top:275px;}
      #mapMore .spot6 {left:556px; top:345px;}
      #mapMore .spot7 {left:46px; top:175px;}
      #mapMore .spot8 {left:501px; top:8px;}
        #mapMore img {width:100%;}


      #direct {width:100%; position:absolute; left:0; top:0; animation:spotani 1.5s infinite alternate;}

      @keyframes markerani {
        0% {transform:translatey(0);}
        50% {transform:translatey(-3px);}
        100% {transform:translatey(0);}
      }
      @keyframes magani {
        0% {transform:translate(4px, 4px) rotate(20deg);}
        50% {transform:translate(0px, 0px) rotate(0deg);}
        100% {transform:translate(4px, 4px) rotate(20deg); }
      }
      @keyframes spotani {
        0% {opacity:.3;}
        50% {opacity:1;}
        100% {opacity:.3;}
      }

  #mapDesc {width:258px; height:462px; padding:30px 20px 0; margin:0 auto; margin-left:8px; float:left; border:1px solid #ccc; }
    #mapDesc ul {width:100%; height:100%;}
    #mapDesc li {width:100%;}
      #mapDesc h4 {width:100%;  font-size:23px; line-height:30px; font-weight:400; color:#333; font-family:"arita-buriM";}
      #mapDesc h4 .spotNum {padding-right:10px; }
        #mapDesc h4 .engName {display:block; width:100%; text-indent:20px; color:#999;  font-size:15px; font-family:"arita-buriL";}

      #mapDesc dl {width:100%; color:#333;  padding-top:8px;}
        #mapDesc dt {width:100%; height:100px; position:relative; overflow:hidden;}
          #mapDesc dt img {width:100%; position:absolute; left:0; top:-25%;}
        #mapDesc dd {width:100%; font-size:13px; padding-top:10px; line-height:25px; font-family:"arita_dodum-Medium";}
  #black {width:100%; height:100%; position:fixed; left:0; top:0; background-color:rgba(0,0,0,0.3); z-index:15;}
  #view {width:300px; height:504px; position:fixed; left:50%; top:50%; margin-left:-170px; margin-top:-252px; background-color:#fff; z-index:16; padding:0 20px;}
    #view .closeBtnArea {width:100%; height:40px;}
      #view .closeBtnArea .closeBtn {width:20px; height:20px; margin-top:20px;float:right; cursor:pointer;}
        #view .closeBtnArea .closeBtn img {width:100%;}
    #view ul {width:100%;}
      #view ul li {width:100%;}
        #view h4 {width:100%;  font-size:23px; line-height:30px; font-weight:400; color:#333; font-family:"arita-buriM";}
        #view h4 .spotNum {padding-right:10px; }
          #view h4 .engName {display:block; width:100%; text-indent:20px; color:#999;  font-size:15px; font-family:"arita-buriL";}

        #view dl {width:100%; color:#333;  padding-top:8px;}
          #view dt {width:100%; height:120px; position:relative; overflow:hidden;}
            #view dt img {width:100%; position:absolute; left:0; top:-25%;}
          #view dd {width:100%; font-size:13px; padding-top:10px; line-height:25px; font-family:"arita_dodum-Medium";}

/* ############ 기능 ################ */
  #section0:hover .intro {color:#999;}
/* ############## 공통 ################# */
  h3 .green {font-size:25px; color:#669966;}


  @media all and (min-width:320px) and (max-width:480px) {
    #content {width:300px;}
    #mapDesc, #mapDesc li {display:none;}
    #mapArea {width:300px; height:210px;}
      #mapImg img {width:300px;}
    #mapMarker li {width:25px;}
      #mapMarker li img {width:25px;}
    #mapMarker .spot0 {left:105px; top:151px;}
    #mapMarker .spot1 {left:43px; top:16px;}
    #mapMarker .spot2 {left:98px; top:12px;}
    #mapMarker .spot3 {left:139px; top:6px;}
    #mapMarker .spot4 {left:171px; top:13px;}
    #mapMarker .spot5 {left:247px; top:108px;}
    #mapMarker .spot6 {left:228px; top:134px;}
    #mapMarker .spot7 {left:7px; top:63px;}
    #mapMarker .spot8 {left:210px; top:8px;}

    #mapMarker li .markerNum {left:9px; top:13px; font-size:10px;}

    #mapMore li {width:20px; height:20px;}
    #mapMore .spot0 {left:120px; top:151px;}
    #mapMore .spot1 {left:58px; top:16px;}
    #mapMore .spot2 {left:113px; top:12px;}
    #mapMore .spot3 {left:154px; top:6px;}
    #mapMore .spot4 {left:186px; top:13px;}
    #mapMore .spot5 {left:262px; top:108px;}
    #mapMore .spot6 {left:243px; top:134px;}
    #mapMore .spot7 {left:22px; top:63px;}
    #mapMore .spot8 {left:225px; top:8px;}
  }

  @media all and (min-width:481px) and (max-width:767px) {
    #content {width:400px;}
    #mapDesc, #mapDesc li {display:none;}
    #mapArea {width:400px; height:282px;}
      #mapImg img {width:400px;}
    #mapMarker .spot0 {left:138px; top:196px;}
    #mapMarker .spot1 {left:52px; top:23px;}
    #mapMarker .spot2 {left:128px; top:19px;}
    #mapMarker .spot3 {left:180px; top:13px;}
    #mapMarker .spot4 {left:209px; top:21px;}
    #mapMarker .spot5 {left:322px; top:143px;}
    #mapMarker .spot6 {left:299px; top:185px;}
    #mapMarker .spot7 {left:5px; top:87px;}
    #mapMarker .spot8 {left:275px; top:8px;}


    #mapMore li {width:35px; height:35px;}
    #mapMore .spot0 {left:159px; top:189px;}
    #mapMore .spot1 {left:73px; top:16px;}
    #mapMore .spot2 {left:149px; top:12px;}
    #mapMore .spot3 {left:201px; top:6px;}
    #mapMore .spot4 {left:230px; top:14px;}
    #mapMore .spot5 {left:343px; top:136px;}
    #mapMore .spot6 {left:320px; top:178px;}
    #mapMore .spot7 {left:26px; top:80px;}
    #mapMore .spot8 {left:296px; top:1px;}
  }

  @media all and (min-width:768px) and (max-width:1024px) {
    #content {width:700px;}
    #mapDesc, #mapDesc li {display:none;}
  }