/* ########## section0 ########## */
#section0 {width:100%; margin:0 auto; margin-top:80px; }
  #visual {max-width:1900px; width:100%; margin:0 auto; outline:1px solid #eee;  overflow:hidden; position:relative;}
  #visual ul {width:400%;}
  #visual ul:after {content:""; display:block; clear:both;}
    #visual ul li {width:25%; margin:0 auto; position:relative; float:left;}
      #visual ul .imgArea {width:100%; overflow:hidden; margin:0 auto;}
        #visual ul .imgArea img {width:100%; }
      #visual ul li .imgDesc { margin:0 auto; position:absolute; top:23%; left:13%;  font-family:"arita-buriM";}
        #visual ul .imgDesc h3 {font-size:30px; line-height:70px; font-weight:400; }
        #visual ul .desc {line-height:24px; color:#eee; }
        #visual ul .sliding2 .desc, #visual ul .sliding4 .desc {color:#333;}
        #visual ul .desc a {width:100px; height:40px; line-height:40px; text-align:center; font-size:15px;   margin-top:30px; display:block; border:1px solid #eee; color:#eee; transition:all .3s ease-in; font-family:"arita_dodum-Medium"; }
        #visual .sliding2 .desc a, #visual .sliding4 .desc a {border:1px solid #513c13; color:#513c13;}
        #visual .sliding3 .desc span {display:block;}
          #visual .sliding3 .desc a {width:200px; display:inline-block; margin-right:10px;}
        #visual .prev, #visual .next {width:24px; height:24px; position:absolute; top:50%; margin-top:-12px;}
        #visual .prev {left:5%;}
        #visual .next {right:5%;}
          #visual .prev a, #visual .next a {display:block; width:24px; height:24px; }
            #visual .prev a img, #visual .next a img {width:100%;}
       #visual .guideBtn {width:120px; position:absolute; left:50%; bottom:30px; margin-left:-60px; }
       #visual .guideBtn:after {content:""; display:block; clear:both;}
        #visual .guideBtn span {width:15px; height:15px; margin-right:10px; background-color:rgba(0,0,0,0.3); display:block; float:left;  cursor:pointer;}
        #visual .guideBtn span:last-child {margin-right:0;}
        #visual .guideBtn .selected {background-color:#669966;}

#section1 {width:100%; margin:0 auto;}

#menuSortArea {width:96%; padding:0 2%; margin:0 auto; }
#menuSortArea h3 {width:100%; margin:0 auto; font-size:19px; font-family:"arita_dodum-Medium"; text-align:center; padding:50px 0 0; font-weight:400; line-height:40px; color:#333; }
#menuSortArea .headDesc {width:100%; margin:0 auto; font-size:14px; font-family:"arita_dodum-Light"; text-align:center; padding:15px 0 30px; color:rgba(135,177,136,0); transition:color .5s ease-in-out;}

  #menuSortArea .menuSort {width:100%; margin:10px auto; overflow:hidden; text-align:center;}
    #menuSortArea .menuSort li {line-height:35px;  height:45px; font-size:15px; margin:0 10px; display:inline-block;}
      #menuSortArea .menuSort li .topBar {width:0px; height:2px; background-color:#fff; transition:width .5s ease-in-out;}
      #menuSortArea .menuSort li:hover .topBar {background-color:#b3ccb3;}

      #menuSortArea .menuSort li a {padding:0 10px; font-family:"arita_dodum-Medium";}
    #menuSortArea .menuSort li.selMenu {border-top:2px solid #669966;}
    #menuSortArea .menuSort li.selMenu .topBar {display:none;}
      #menuSortArea .menuSort li.selMenu a {color:#669966;}
  #menuSortArea .menuSort:after {content:""; display:block; clear:both;}


#menuList  {width:100%;  height:1100px; margin:0 auto; position:relative; }
  #menuList ul {width:1008px; height:1100px; margin:0 auto; position:relative; }
    #menuList ul li {width:251px; height:220px; margin-left:1px; margin-bottom:1px;
         overflow:hidden; border:1px solid #fff; position:absolute; transition:left .5s ease-in-out, top .5s ease-in-out;}
    #m0 {left:0; top:0; }
    #m1 {left:252px; top:0;}
    #m2 {left:504px; top:0;}
    #m3 {left:756px; top:0;}

    #m4 {left:0; top:222px;}
    #m5 {left:252px; top:222px;}
    #m6 {left:504px; top:222px;}
    #m7 {left:756px; top:222px;}

    #m8 {left:0; top:444px;}
    #m9 {left:252px; top:444px;}
    #m10 {left:504px; top:444px;}
    #m11 {left:756px; top:444px;}

    #m12 {left:0; top:666px;}
    #m13 {left:251px; top:666px;}
    #m14 {left:504px; top:666px;}
    #m15 {left:756px; top:666px;}


  #menuList ul li a {width:100%; height:100%; overflow:hidden; display:block; position:relative; }
  #menuList ul li a img {width:100%; transform:scale(1); transition:transform .5s ease-in-out .1s;}

  #menuList a .leftTopW, #menuList a .rightTopH, #menuList a .rightBottomW, #menuList a .leftBottomH {width:2px; height:2px; display:block; position:absolute; background-color:rgba(255,255,255,0); transition:width .2s ease-in-out, height .2s ease-in-out; }
  #menuList a .leftTopW {left:0; top:0; }
  #menuList a .rightTopH {right:0; top:0; transition-delay:.2s;}
  #menuList a .rightBottomW {right:0; bottom:0; transition-delay:.3s;}
  #menuList a .leftBottomH {left:0; bottom:0; transition-delay:.4s;}

  #menuList a .desc {display:block; opacity:0; transition:all .5s ease-in-out; background-color:rgba(0,0,0,0.3); width:100%; color:#fff;
  position:absolute; left:0; top:0; font-size:13px; text-align:center; padding:83px 0 85px; transform:translate(0,220px); font-family:"arita_dodum-Light";}
    #menuList a .desc strong {display:block; width:100%; font-size:16px;
    font-family:"arita_dodum-SemiBold"; line-height:39px; font-weight:400;}


/* ############ 기능 ################ */
#section0 ul .imgDesc .desc a:hover, #section0 ul .imgDesc .desc a:focus {border:1px solid #669966; background-color:#669966; color:#fff; }
#section1:hover .headDesc {color:#999;}
#menuSortArea .menuSort li:hover .topBar {width:100%;}

#menuSortArea .menuSort li a:hover, #menuSortArea .menuSort li a:focus {color:#b3ccb3;}
#menuSortArea .menuSort li.selMenu a:hover, #menuSortArea .menuSort li.selMenu a:focus {color:#669966;}


#menuList li a:hover .leftTopW, #menuList li a:hover .rightBottomW, #menuList li a:focus .leftTopW, #menuList li a:focus .rightBottomW {width:100%; background-color:#8bdd83;}
#menuList li a:hover .rightTopH, #menuList li a:hover .leftBottomH, #menuList li a:focus .rightTopH, #menuList li a:focus .leftBottomH {height:100%; background-color:#8bdd83;}
#menuList ul li a:hover img, #menuList ul li a:focus img {transform:scale(1.1);}
#menuList a:hover .desc, #menuList a:focus .desc {transform:translate(0,0); opacity:1;}

/* ############## 공통 ################# */
  h3 .green {font-size:25px; color:#669966;}



@media all and (min-width:320px) and (max-width:480px) {

  #visual ul li .imgDesc {top:25%; left:5%;}
  #visual ul .imgArea img {width:150%; margin-left:-30%;}

  #visual ul .imgDesc h3 {font-size:20px; line-height:30px;}
  #visual ul .desc {font-size:11px; line-height:20px; }
  #visual ul .desc a {width:50px; height:20px; font-size:10px; line-height:20px; margin-top:5px;}
  #visual .sliding3 .desc a {width:130px; font-size:9px;}

  #visual .guideBtn {width:80px; position:absolute; left:50%; bottom:15px; margin-left:-40px; }
   #visual .guideBtn span {width:8px; height:8px;}

   #menuSortArea .headDesc {font-size:12px;}
   #menuSortArea .menuSort li {height:23px; line-height:30px; margin-top:8px;}
   #menuSortArea .menuSort li a {font-size:12px; padding:0; }

   #menuList {height:700px;}
    #menuList ul {width:302px; }
      #menuList ul li {width:100px; height:85px; }
      #m0 {left:0; top:0; }
      #m1 {left:101px; top:0;}
      #m2 {left:202px; top:0;}

      #m3 {left:0; top:86px;}
      #m4 {left:101px; top:86px;}
      #m5 {left:202px; top:86px;}

      #m6 {left:0; top:172px;}
      #m7 {left:101px; top:172px;}
      #m8 {left:202px; top:172px;}

      #m9 {left:0; top:258px;}
      #m10 {left:101px; top:258px;}
      #m11 {left:202px; top:258px;}

      #m12 {left:0; top:344px;}
      #m13 {left:101px; top:344px;}
      #m14 {left:202px; top:344px;}

      #m15 {left:0; top:430px;}
}

@media all and (min-width:481px) and (max-width:767px) {
    #visual ul li .imgDesc {top:25%; left:5%;}
    #visual ul .imgArea img {width:150%; margin-left:-30%;}

    #visual ul .imgDesc h3 {font-size:20px; line-height:30px;}
    #visual ul .desc {font-size:11px; line-height:20px; }
    #visual ul .desc a {width:50px; height:20px; font-size:10px; line-height:20px; margin-top:5px;}
    #visual .sliding3 .desc a {width:130px; font-size:9px;}

    #visual .guideBtn {width:80px; position:absolute; left:50%; bottom:15px; margin-left:-40px; }
     #visual .guideBtn span {width:8px; height:8px;}

     #menuSortArea .menuSort li a {font-size:12px; padding:0;}

    #menuList {height:900px;}
    #menuList ul {width:452px;}
      #menuList ul li {width:150px; height:130px;}
      #m0 {left:0; top:0; }
      #m1 {left:151px; top:0;}
      #m2 {left:302px; top:0;}

      #m3 {left:0; top:131px;}
      #m4 {left:151px; top:131px;}
      #m5 {left:302px; top:131px;}

      #m6 {left:0; top:262px;}
      #m7 {left:151px; top:262px;}
      #m8 {left:302px; top:262px;}

      #m9 {left:0; top:393px;}
      #m10 {left:151px; top:393px;}
      #m11 {left:302px; top:393px;}

      #m12 {left:0; top:524px;}
      #m13 {left:151px; top:524px;}
      #m14 {left:302px; top:524px;}

      #m15 {left:0; top:655px;}

}

@media all and (min-width:768px) and (max-width:1024px) {

    #visual ul li .imgDesc {top:11%;}
    #visual ul .imgDesc h3 {font-size:20px; line-height:50px;}
    #visual ul .desc {font-size:13px;}

    #visual ul .desc a {width:80px; height:30px; font-size:13px; line-height:30px; margin-top:15px;}

    #menuList {height:900px;}
    #menuList ul {width:700px;}
      #menuList ul li {width:171px; height:150px;}
      #m0 {left:1px; top:0; }
      #m1 {left:173px; top:0;}
      #m2 {left:345px; top:0;}
      #m3 {left:517px; top:0;}

      #m4 {left:1px; top:152px;}
      #m5 {left:173px; top:152px;}
      #m6 {left:345px; top:152px;}
      #m7 {left:517px; top:152px;}

      #m8 {left:1px; top:304px;}
      #m9 {left:173px; top:304px;}
      #m10 {left:345px; top:304px;}
      #m11 {left:517px; top:304px;}

      #m12 {left:1px; top:456px;}
      #m13 {left:173px; top:456px;}
      #m14 {left:345px; top:456px;}
      #m15 {left:517px; top:456px;}

      #menuList a .desc {padding-top:50px;}
}