$point-color : #263d78;
$point-color2 : #ffc700;

.clearfix {
   *zoom : 1;

   &:after {
      display: block;
      clear: both;
      content: '';
   }//end of clearfix:after
}//end of clearfix

.sr_only {
   position: absolute;
   left: -99999px;
}//end of sr_only

.inner {
   width: 1200px;
   margin: 0 auto;
}//end of inner

@media screen and (max-width : 768px) {
    .inner {
       width: 100%;
       //margin: 0 auto;
    }//end of inner
}//end of 768px inner


#wrap {
   width: 100%;
   background-color: #f1f1f1;

}//end of #wrap

.upArrow {
   display: none;
   position: fixed;
   bottom : 50px;
   right : 50px;
   width: 40px;
   height: 40px;
   background-color: $point-color;
   border-radius: 50px;
   cursor: pointer;
   z-index: 9000;

   &:after {
      position: absolute;
      top: 7px;
      left: 50%;
      transform: translateX(-50%);
      width: 22px;
      height: 22px;
      background-image: url(../images/up_arrow.png);
      background-position: 50% 50%;
      content: '';
   }//end of :after


}//end of upArrow

body {
   overflow-x: hidden;
}//end of body

h3 {
     font-size: 30px;

}




::-webkit-scrollbar {
   width: 8px;
   height: 8px;
   border: 3px solid #fff;
}
::-webkit-scrollbar-button:start:decrement,
:-webkit-scrollbar-button:end:increment {
   display: block;
   height: 10px;
   background: url('./images/bg.png') #efefef;
}
::-webkit-scrollbar-track {background: #efefef;
   -webkit-border-radius: 10px;
   border-radius:10px;
   -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb {
   height: 50px;
   width: 50px;
   background: rgba(0,0,0,.2);
   -webkit-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1);
}


/*------- standard set -----------*/


header {
   position: fixed;
   top: 0;
   width: 100%;
   height: 70px;
   background-color: rgba(000,000,000,0.3);
   // background-color: rgba(35, 129, 227, 0.8);
   z-index: 99999;
   transition: .3s;

   >.inner {
      position: relative;
      //background-color: pink;

      >.toggle {
          display: none;
          position: absolute;
          top: 0;
          right: 0;
          width: 70px;
          height: 70px;
          cursor: pointer;
          text-indent: -99999px;
          background-image: url(../images/toggle.png);
      }//end of toogle

      >h1 {
         position: absolute;
         width: 200px;
         height: 70px;
         text-indent: -99999px;
         background-image: url(../images/logo.png);
         background-repeat: no-repeat;
         background-position: 50% 50%;
         background-size: 50%;


         >a {
            display: block;
            width: 100%;
            height: 100%;
         }

      }//end of h1

      >.gnb {
         position: absolute;
         right: 0;
         width: 500px;


         >ul {
            >li {
               float: left;
               width: 100px;
               //background-color: red;


               >a {
                  display: block;
                  height: 70px;
                  font-size: 15px;
                  font-weight: 600;
                  color: rgba(255,255,255,0.6);
                  line-height: 70px;
                  text-align: center;

                  &.on {
                      color: rgba(255,255,255,1);
                  }

                  &:hover {
                      color: rgba(255,255,255,1);
                  }





               }//end of a

               >.sub {
                   position: absolute;
                   bottom: -40px;
                   width: 100%;
                   //background-color: red;
                   z-index: 5000;
                   display: none;

                   &.sub01 {

                       position: absolute;
                       left: 0;
                       //background-color: red;

                       >.subcontainer >ul {
                           margin-left: 30px;
                            > li {
                               margin-left: 20px;
                           }//end of li
                       }//end of ul

                   }
                   &.sub02 {

                       position: absolute;
                       left: 0;
                       //background-color: orange;

                       >.subcontainer >ul > li {
                           margin-left: 20px;
                       }//end of li
                   }
                   &.sub03 {

                       position: absolute;
                       left: 0;
                       //background-color: lightblue;

                       >.subcontainer >ul > li {
                           margin-left: 70px;
                       }//end of li
                   }
                   &.sub04 {

                       position: absolute;
                       left: 0;
                       //background-color: green;

                       >.subcontainer >ul {
                           margin-left: 300px;

                           > li {
                               margin-left: 20px;
                           }//end of li
                       }//end of ul
                   }

                   >.subcontainer {
                       //background-color: rgba(0,0,0,0.5);


                       >ul >li {
                           height: 40px;
                           line-height: 40px;
                           float: left;
                           font-size: 16px;
                           margin-left: 20px;

                           >a {
                               display: block;
                               font-weight: 600;
                               color: #333;

                               &:hover {
                                  color: $point-color2;
                               }
                           }

                       }//end of ul li
                   }//end of subcontainer

               }//end of sub

            }//end of li
         }//end of ul

         .lang {
             position: absolute;
             top: 0;
             right: 5px;
             width: 80px;
             height: 70px;
             text-align: center;
             line-height: 70px;
             color: rgba(255,255,255,0.7);
             font-weight: 600;
             cursor: pointer;
            // background-color: green;

            &:hover { color: rgba(255,255,255,1)}

            >ul {
                display: none;
                width: 100%;
                background-color: rgba(000,000,000,0.5);

                >li {
                    line-height: 40px;

                    &:hover a {
                        color: $point-color2;
                    }
                    &.on a {
                        color: $point-color2;
                    }
                    >a {
                        color: #fff;
                    }
                }
            }

         }//end of lang
      }//end of gnb
   }//end of inner
   >.sub_bg {
       display: none;
       position: absolute;
       top: 70px;
       width: 100%;
       height: 40px;
       background-color: rgba(255, 255, 255, 1);
       border-bottom: 1px solid #eee;
   }
}//end of header




@media screen and (max-width : 768px) {/*header 반응형*/
    body::-webkit-scrollbar {display: none;}//추가

    header {
       position: fixed;
       top: 0;
       width: 100%;
       height: 70px;
       background-color: #444;//변경
       // background-color: rgba(35, 129, 227, 0.8);
       z-index: 99999;
       //transition: .3s; 제

       >.inner {
          position: relative;
          //background-color: pink;

          >.toggle {
              display: block;
              position: absolute;
              top: 0;
              right: 0;
              width: 70px;
              height: 70px;
              cursor: pointer;
              text-indent: -99999px;
              background-image: url(../images/toggle.png);

              &.clse {
                  background-image: url(../images/toggle_cls.png);
              }//end of clse
          }//end of toogle



          >h1 {
             position: absolute;
             width: 200px;
             height: 70px;
             text-indent: -99999px;
             background-image: url(../images/logo.png);
             background-repeat: no-repeat;
             background-position: 20% 50%;//변경
             background-size: 50%;


             >a {
                display: block;
                width: 100%;
                height: 100%;
             }

          }//end of h1

          >.gnb {
             display: none;//토글키
             position: absolute;
             top : 69px;//추가
             right: 0;
             width: 100%;//변경
             background-color: #444;


             >ul {
                >li {
                   float: inherit;//변경
                   width: 100%;//변경
                   //background-color: red;


                   >a {
                      display: block;
                      width: 100%;
                      height: 70px;
                      font-size: 15px;
                      font-weight: 600;
                      color: rgba(255,255,255,0.6);
                      line-height: 70px;
                      padding-left: 30px;//추가
                      text-align: left;//변경
                     // background-color: green;

                      &.on {
                          color: rgba(255,255,255,1);
                      }

                      &:hover {
                          color: rgba(255,255,255,1);
                      }

                   }//end of a

                   >.sub {
                       position: inherit;//변경
                       top: 0;
                       width: 100%;
                       background-color: #f1f1f1;//변경
                       z-index: 5000;
                       display: none;

                       &.sub01 {

                           position: inherit;//변경
                           left: 0;
                           //background-color: red;

                           >.subcontainer >ul {
                               margin-left: 0px;//변경
                                > li {
                                   margin-left: 0px;//변경
                                   padding-left: 35px;//추가
                               }//end of li
                           }//end of ul

                       }
                       &.sub02 {

                           position: inherit;//변경
                           left: 0;
                           //background-color: orange;

                           >.subcontainer >ul > li {
                               margin-left: 0px;//변경
                               padding-left: 35px;//추가
                           }//end of li
                       }
                       &.sub03 {

                           position: inherit;//변경
                           left: 0;
                           //background-color: lightblue;

                           >.subcontainer >ul > li {
                               margin-left: 0px;//변경
                           }//end of li
                       }
                       &.sub04 {

                           position: inherit;//변경
                           left: 0;
                           //background-color: green;

                           >.subcontainer >ul {
                               margin-left: 0px;//변경
                               padding-left: 35px;//추가

                               > li {
                                   margin-left: 0px;//변경
                               }//end of li
                           }//end of ul
                       }

                       >.subcontainer {
                           //background-color: rgba(0,0,0,0.5);


                           >ul >li {
                               height: 60px;//변경
                               line-height: 60px;//변경
                               float: inherit;
                               font-size: 16px;
                               margin-left: 0px;//변경
                               border-bottom : 1px solid #ccc;//추가

                               &:last-child {
                                   border-bottom: none;
                               }

                               >a {
                                   display: block;
                                   font-weight: 600;
                                   color: #333;

                                   &:hover {
                                      color: $point-color2;
                                   }
                               }

                           }//end of ul li
                       }//end of subcontainer

                   }//end of sub

                }//end of li
             }//end of ul

             .lang {
                 display: block;
                 position: absolute;
                 top: -60px;
                 right: 80px;//변경
                 width: 60px;
                 height: 50px;
                 text-align: center;
                 line-height: 50px;
                 color: rgba(255,255,255,0.7);
                 font-size: 13px;
                 font-weight: 600;
                 cursor: pointer;
                //background-color: #444;
                border-radius: 14px;

                &:hover { color: rgba(255,255,255,1)}

                >ul {
                    margin-top: 10px;
                    display: none;
                    width: 100%;
                    background-color: rgba(000,000,000,0.5);

                    >li {
                        line-height: 50px;

                        &:hover a {
                            color: $point-color2;
                        }
                        &.on a {
                            color: $point-color2;
                        }
                        >a {
                            color: #fff;
                        }
                    }
                }

             }//end of lang
          }//end of gnb
       }//end of inner
       >.sub_bg {
           display: none;
           position: absolute;
           top: 70px;
           width: 100%;
           height: 40px;
           background-color: rgba(255, 255, 255, 1);
           border-bottom: 1px solid #eee;
       }
    }//end of header
}//end of 768px header

#mVisual {
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 100vh;

   >.mVisual_img {
      width: 100%;
      height: 100%;
      z-index: -1;

      >ul {
         >li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-indent: -99999px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50% 50%;

            &:nth-child(1) {
               background-image: url(../images/img01.jpg);


            }//end of li:nth-child(1)

            &:nth-child(2) {
               background-image: url(../images/mVisual02.jpg);
               background-position: 50% 80%;

            }//end of li:nth-child(1)

            &:nth-child(3) {
               background-image: url(../images/mVisual08.jpg);
               //background-position: 100% 0;

            }//end of li:nth-child(1)

            &:nth-child(4) {
               background-image: url(../images/mVisual04.jpg);

            }//end of li:nth-child(1)

         }//end of li
      }//end of ul
   }//end of mVisual_img

   >.mVisual_txt {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 200px;
      background-color: rgba(0, 0, 0, 0.6);
      transition: .5s;
      z-index: 5000;

         >ul {
            //padding-top: -200px;

            >li {
               position: absolute;
               top: 50%;
               left: 50%;
               width: 100%;
               height: 100%;
               transform: translate(-50%, -30%);
               height: 100%;
               text-align: center;

               >dl {

                  >dt {
                     position: relative;
                     margin-bottom: 25px;
                     font-size: 35px;
                     font-weight: 600;
                     color: #fff;

                     &:after {
                        position: absolute;
                        bottom: -15px;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 120px;
                        height: 3px;
                        background-color: $point-color2;
                        content: '';
                     }//end of dt :after
                  }//end of dt

                  >dd {
                     letter-spacing: 2px;
                     line-height: 1.4em;
                     font-size: 16px;
                     color: #fff;
                  }//end of dd
               }//end of dl

            }//end of li
         }//end of ul
   }//end of mVisual_txt

   >.mVisual_indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 200px;
      z-index: 6000;

      &:after {
         position: absolute;
         bottom: 24px;
         right: 54px;
         width: 6px;
         height: 6px;
         background-color: $point-color2;
         border-radius: 5px;
         content: '';
      }//end of mVisual_indicator:after (dot)


      >p {
         display: block;
         position: absolute;
         bottom: 20px;
         width: 17px;
         height: 15px;
         text-indent: -99999px;
         transition: .4s;

         cursor: pointer;
         background-repeat: no-repeat;
         background-size: cover;

         &.mVisual_prev_btn {
            background-image: url(../images/prev_btn.png);
            right:80px;

            &:hover {
               background-image: url(../images/prev_btn_hover.png);
            }//end of hover
         }//end of prev

         &.mVisual_next_btn {
            background-image: url(../images/next_btn.png);
            right: 20px;

            &:hover {
               background-image: url(../images/next_btn_hover.png);
            }//end of hover

         }//end of prev
      }//end of p
   }//end of mVisual_indicator

   >.downArrow {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) rotate(90deg);
      width: 50px;
      height: 50px;
      cursor: pointer;
      background-image: url(../images/next_btn.png);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      animation: downArrow .9s  infinite ;

   }//end of downArrow
}//end of #mVisual



@media screen and (max-width : 768px) {/*mVisual 반응형*/
    #mVisual {
       position: relative;
       overflow: hidden;
       width: 100%;
       height: 100vh;

       >.mVisual_img {
          width: 100%;
          height: 100%;
          z-index: -1;

          >ul {
             >li {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                text-indent: -99999px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: 50% 50%;

                &:nth-child(1) {
                   background-image: url(../images/img01.jpg);


                }//end of li:nth-child(1)

                &:nth-child(2) {
                   background-image: url(../images/mVisual02.jpg);
                   background-position: 50% 80%;

                }//end of li:nth-child(1)

                &:nth-child(3) {
                   background-image: url(../images/mVisual08.jpg);
                   //background-position: 100% 0;

                }//end of li:nth-child(1)

                &:nth-child(4) {
                   background-image: url(../images/mVisual04.jpg);

                }//end of li:nth-child(1)

             }//end of li
          }//end of ul
       }//end of mVisual_img

       >.mVisual_txt {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;//변경
          height: 200px;
          background-color: rgba(0, 0, 0, 0.6);
          transition: .5s;
          z-index: 5000;

             >ul {
                //padding-top: -200px;

                >li {
                   position: absolute;
                   top: 50%;
                   left: 50%;
                   width: 100%;
                   height: 100%;
                   transform: translate(-50%, -30%);
                   height: 100%;
                   text-align: center;

                   >dl {

                      >dt {
                         position: relative;
                         margin-bottom: 25px;
                         font-size: 35px;
                         font-weight: 600;
                         color: #fff;

                         &:after {
                            position: absolute;
                            bottom: -15px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 120px;
                            height: 3px;
                            background-color: $point-color2;
                            content: '';
                         }//end of dt :after
                      }//end of dt

                      >dd {
                         letter-spacing: 2px;
                         line-height: 1.4em;
                         font-size: 16px;
                         color: #fff;
                      }//end of dd
                   }//end of dl

                }//end of li
             }//end of ul
       }//end of mVisual_txt

       >.mVisual_indicator {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 600px;
          height: 200px;
          z-index: 6000;

          &:after {
             position: absolute;
             bottom: 28px;
             left: 50%;//변경
             transform: translateX(-50%);
             width: 6px;
             height: 6px;
             background-color: $point-color2;
             border-radius: 5px;
             content: '';
          }//end of mVisual_indicator:after (dot)


          >p {
             display: block;
             position: absolute;
             bottom: 20px;
             width: 100px;
             height: 23px;
             text-indent: -99999px;
             transition: .4s;

             cursor: pointer;
             background-repeat: no-repeat;
             background-size: contain;

             &.mVisual_prev_btn {
                background-image: url(../images/prev_btn.png);
                background-position: 100% 50%;
                left: 30%;

                &:hover {
                   background-image: url(../images/prev_btn_hover.png);
                }//end of hover
             }//end of prev

             &.mVisual_next_btn {
                background-image: url(../images/next_btn.png);
                left: 53%;

                &:hover {
                   background-image: url(../images/next_btn_hover.png);
                }//end of hover

             }//end of prev
          }//end of p
       }//end of mVisual_indicator

       >.downArrow {
          position: absolute;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%) rotate(90deg);
          width: 50px;
          height: 50px;
          cursor: pointer;
          background-image: url(../images/next_btn.png);
          background-repeat: no-repeat;
          background-position: 50% 50%;
          animation: downArrow .9s  infinite ;

       }//end of downArrow
    }//end of #mVisual
}//end of 768px #mVisual






#company {
   position: relative;
   width: 100%;


    >.inner {

       >h3 {
          position: relative;
          padding: 50px 0 0;
          font-weight: 600;
          text-align: center;
          color: #222;
          text-transform: uppercase;

          &:after {
             position: absolute;
             bottom: -20px;
             left: 50%;
             transform: translateX(-50%);
             font-size: 13px;
             font-weight: 800;
             color: $point-color;
             letter-spacing: -0.5px;
             content: "company Status";
          }//end of :after
       }//end of h3


       >.company_img {
           //float: left;
           width: 100%;
           height: 450px;
           margin: 45px 0 50px;
           background-image: url(../images/intro.png);
           background-position:  45% 50%;
           background-size: contain;
           background-repeat: no-repeat;
           //background-color: rgba(190, 116, 15, 0.76)
       }//end of company_img

       >.company_intro {

           margin : 50px 0 50px;
           text-align: left;
           font-size: 16px;
           font-weight: 500;
           line-height: 1.9em;


           >.company_l {
               position: relative;
               float: left;
               width: 600px;
               margin-top: -10px;
               text-align: right;

               &:after {
                   position: absolute;
                   top: 10px;
                   right : 0;
                   width: 2px;
                   height: 222px;
                   background-color: #e5e5e5;
                   content: '';
               }

               >ul {
                   padding-right: 30px;

                   >li {

                       >dl{
                           >dt {
                               font-size: 20px;
                               margin-bottom: 7px;
                               color: rgb(108, 108, 108);
                           }
                           >dd {
                               font-size: 30px;
                               font-weight: 900;
                               color: $point-color;

                           }
                       }

                   }//end of li
               }//end of ul

               >ol {
                   font-size: 22px;
                   margin-top: 40px;
                   padding-right: 30px;
                   font-weight: 600;

                   >li {
                       line-height: 2em;
                       >dl {
                           >dd {
                               >em {
                                   color: #eeba01;
                               }
                           }
                       }
                   }
               }//end of ol


           }//end of company_l

           >.company_r {
               float: left;
               width: 600px;
               text-align: left;

               >ul {
                   padding-left: 30px;
                   height: 260px;
                   //background-color: red;

                   >li {
                       margin-bottom: 5px;
                       width: 200px;
                       background-color: $point-color;
                       //border-radius: 6px;
                       transition: .2s;
                       height: 40px;

                       >a {
                           display: block;
                           padding-left: 15px;
                           font-weight: 500;
                           font-size: 15px;
                           letter-spacing: px;
                           line-height: 38px;
                           height: 42px;
                           color: #fff;
                           transition: .2s;
                       }//end of a

                       &:hover {
                           background-color: $point-color2;
                           //background-color: #f1f1f1;
                           //border: 1px solid $point-color;
                           //box-sizing: border-box;
                          // border-radius: 6px;

                       }

                       &:hover a {
                           color: #f1f1f1;
                           // color: $point-color;
                           //font-size: 18PX;
                           //font-weight: 600;
                       }
                   }//end of li
               }//end of ul

           }//end of company_l


       }//end of company_intro

      /* >.company_info {
          //float: left;
           width: 600px;
           height: 500px;
           margin-top: 45px;
           //background-color: red;

           >ul {
               margin : 50px 0 0 10px;
               >li {
                   margin-top : 20px;
                   font-size: 20px;
                   font-weight: 600;
                   letter-spacing: 0px;
                   color: #333;

                   >em {
                       color: #fc4040;
                   }//end of em

                   &:nth-child(5) {
                       line-height: 1.5em;
                   }//end of li:nth-child(5)

                   >dl {
                       >dt {
                           margin-top: 40px;
                           font-size: 25px;
                           color: #aaa;
                       }//end of dt
                       >dd {
                           margin-top: 10px;
                           font-size: 14px;
                           font-weight: 500;
                           color: #bbb;
                           letter-spacing: 0px;
                           line-height: 1.7em;
                       }//end of dd
                   }//end of dl
               }//end of li
           }//end of ul
       }//end of company_info

       */
   }//end of inner
}//end of #company

@media screen and(max-width : 768px) {/*company 반응형*/
    #company {
       position: relative;
       width: 100%;


        >.inner {

           >h3 {
              position: relative;
              padding: 50px 0 0;
              font-weight: 600;
              text-align: center;
              color: #222;
              text-transform: uppercase;

              &:after {
                 position: absolute;
                 bottom: -20px;
                 left: 50%;
                 transform: translateX(-50%);
                 font-size: 13px;
                 font-weight: 800;
                 color: $point-color;
                 letter-spacing: -0.5px;
                 content: "company Status";
              }//end of :after
           }//end of h3


           >.company_img {
               display: none;//추가
               //float: left;
               width: 100%;
               height: 450px;
               margin: 45px 0 50px;
               background-image: url(../images/intro.png);
               background-position:  45% 50%;
               background-size: contain;
               background-repeat: no-repeat;
               //background-color: rgba(190, 116, 15, 0.76)
           }//end of company_img

           >.company_intro {
               width: 100%;//추가
               margin : 50px 0 50px;
               text-align: center;
               font-size: 16px;
               font-weight: 500;
               line-height: 1.9em;


               >.company_l {
                   position: relative;
                   float: inherit;//변경
                   width: 100%;//변경
                   margin-top: 0px;//변경
                   padding-top: 30px;//추가
                   text-align: center;

                   &:after {
                       display: none;//막대기 제거
                       position: absolute;
                       top: 10px;
                       right : 0;
                       width: 2px;
                       height: 222px;
                       background-color: #e5e5e5;
                       content: '';
                   }

                   >ul {
                       padding-right: 0px;//변경

                       >li {

                           >dl{
                               >dt {
                                   font-size: 20px;
                                   margin-bottom: 7px;
                                   color: rgb(108, 108, 108);
                               }
                               >dd {
                                   font-size: 30px;
                                   font-weight: 900;
                                   color: $point-color;

                               }
                           }

                       }//end of li
                   }//end of ul

                   >ol {
                       font-size: 16px;
                       margin-top: 20px;//변경
                       //padding-right: 0px;//변경
                       padding: 0 5px;
                       font-weight: 500;//변경

                       >li {
                           line-height: 1.45em;//변경
                           >dl {
                               >dd {
                                   >em {
                                       color: #eeba01;
                                   }
                               }
                           }
                       }
                   }//end of ol


               }//end of company_l

               >.company_r {
                   float: inherit;//변경
                   width: 100%;
                   padding-top: 40px;
                   text-align: center;

                   >ul {
                       padding-left: 0px;//변경
                       height: auto;//변경
                       //background-color: red;

                       >li {
                           margin: 0 auto 5px;//추가
                           //margin-bottom: 5px;
                           width: 90%;//변경
                           background-color: $point-color;
                           //border-radius: 6px;
                           transition: .2s;
                           height: 50px;

                           >a {
                               display: block;
                               padding-left: 15px;
                               font-weight: 500;
                               font-size: 17px;
                               letter-spacing: 1px;
                               line-height: 50px;
                               height: 50px;
                               color: #fff;
                               transition: .2s;
                           }//end of a

                           &:hover {
                               background-color: $point-color2;
                               //background-color: #f1f1f1;
                               //border: 1px solid $point-color;
                               //box-sizing: border-box;
                              // border-radius: 6px;

                           }

                           &:hover a {
                               color: #f1f1f1;
                               // color: $point-color;
                               //font-size: 18PX;
                               //font-weight: 600;
                           }
                       }//end of li
                   }//end of ul

               }//end of company_l


           }//end of company_intro
       }//end of inner
    }//end of #company

}//company 반응형

#service {
   margin-top: 20px;
   width: 100%;
   height: 600px;
   //background-image: url(../images/one.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 70%;
   //background-color: #d6b179;/*#71a8bc*//*ffb636*/

     >.inner {
          position: relative;/*indicator position*/


       >h3 {
          position: relative;
          padding: 50px 0 0;
          font-weight: 600;
          text-align: center;
          color: #333;
          text-transform: uppercase;

          &:after {
             position: absolute;
             bottom: -20px;
             left: 50%;
             transform: translateX(-50%);
             font-size: 15px;
             font-weight: 800;
             color: $point-color;
             letter-spacing: 0px;
             content: "BUSINESS AREA";
          }//end of :after
       }//end of h3

       >.service_box {
           position: relative;/*service_container position*/
           overflow: hidden;
           width: 1200px;
           height: 402px;
           margin: 50px auto 0;
           //background-color: green;

           >.service_container {
               position: absolute;
               top: 1px;
               left: 0;
               width: 5000px;

               >div {
                   float: left;
                   width: 1200px;
                   height: 100%;

                   >ul {
                       width: 1200px;
                       margin: 0 auto;
                       //background-color: lightblue;

                       >li {
                           //cursor: pointer;
                           position: relative;
                           float: left;
                           margin-left: 20px;
                           width: 275px;
                           height: 370px;
                           transition: .5s;
                           background-color: #fff;
                           border-radius: 5px;
                           //outline: 1px solid #555;
                           //background-color: pink;

                           &:after {
                               opacity: 0;
                               position: absolute;
                               top: 2.5px;
                               left: 5px;
                               width: 260px;
                               height: 360px;
                               border: 2px solid $point-color;
                               transition: .3s;
                               content: '';
                           }



                           &:hover:after {opacity: 1;}



                           >dl {
                               >dt {
                                   margin: 50px auto 0px;
                                   width: 120px;
                                   height: 120px;
                                   //background-image: url(../images/service_bg.png);
                                   background-position: 50% 50%;
                                   background-size: contain;
                                   background-repeat: no-repeat;
                                   transition: .4s;
                                   //background-color: green;

                                   >p {
                                       display: block;
                                       text-indent: -99999px;
                                       margin: 0px auto;
                                       padding-top: 40px;
                                       width: 90px;
                                       height: 90px;
                                       background-position: 50% 50%;
                                       background-size: contain;
                                       background-repeat: no-repeat;
                                       transition: .6s;
                                   }//end of p
                               }//end of dt

                               >.topic {
                                   margin: 0px 0;
                                   width: 100%;
                                   height: 33px;
                                   font-size: 18px;
                                   font-weight: 700;
                                   text-align: center;
                                   line-height: 30px;
                                   transition: .6s;
                                   color: #222;
                                   //background-color: gray;
                               }//end of topic

                               >.info {
                                   width: 100%;
                                   min-height: 100px;
                                   line-height: 1.6em;
                                   letter-spacing: -1px;
                                   font-size: 13px;
                                   font-weight: 500;
                                   text-align: center;
                                   transition: .6s;
                                   color: #aaa;
                                   //background-color: orange;
                               }//end of info

                               >.more {

                                   display: block;
                                   width: 150px;
                                   margin: 5px auto 0;
                                   text-align: center;
                                   font-weight: 600;
                                   color: $point-color2;
                                   z-index: 4000;

                                   >em {
                                       color: $point-color;
                                   }

                                   >a {
                                       position: absolute;
                                       top: 0;
                                       left: 0;
                                       display: block;
                                       width: 275px;
                                       height: 370px;
                                       color: #fff;
                                       //background-color: rgba(0,0,0,0.5);
                                       z-index: 7000;
                                   }
                               }//end of more

                           }//end of dl

                       }//end of li
                   }//end of ul
               }//end of div style

               >.service_1 {
                   //background-color: red;
                    >ul >li{
                        &:nth-child(1) p {background-image: url(../images/icon_4.png);}
                        &:nth-child(2) p {background-image: url(../images/icon_2.png);}
                        &:nth-child(3) p {background-image: url(../images/icon_1.png);}
                        &:nth-child(4) p {background-image: url(../images/icon_7.png);}
                    }//end of serivce_1 icon images
               }//end of service_1

               >.service_2 {
                   display: none;
                   //background-color: green;

                   >ul >li {
                       background-size: 20%;
                      // &:nth-child(1) p {background-image: url(../images/icon_2.png);}
                       //&:nth-child(1) p {background-image: url(../images/icon_5.png);}
                       //&:last-child {display: none;}
                   }
               }//end of service_2


           }//end of service_container


       }//end of service_box

       >.service_indicator {
          position: absolute;
          bottom: -35px;
          left: 50%;
          transform: translateX(-50%);
          width: 100px;
          height: 20px;
          //background-color: orange;

          >ul {

              >li {
                  float: left;
                  margin-left: 20px;
                  width: 20px;
                  height: 20px;
                  background-color: #333;
                  border-radius: 20px;
                  cursor: pointer;

                  &.on {
                      background-color: #fff;
                  }//end of .on
              }//end of li
          }//end of ul
       }//end of service_indicator

       >.service_RL_btn {
           display: none;
           position: absolute;
           top: 50%;
           width: 100%;

           >p {
               position: absolute;
               top: 0;
               width: 40px;
               height: 40px;
               text-indent: -99999px;
               //background-color: red;
               cursor: pointer;
           }//end of p

           >.prev {
               position: absolute;
               left: -20px;

               &:after {
                   position: absolute;
                   top: 25%;
                   left: -10px;
                   transform: rotate(-45deg);
                   width: 25px;
                   height: 2px;
                   background-color: $point-color;
                   content: '';
               }//prev
               &:before {
                   position: absolute;
                   bottom: 25%;
                   left: -10px;
                   transform: rotate(45deg);
                   width: 25px;
                   height: 2px;
                   background-color: $point-color;
                   content: '';
               }//prev
           }//end of prev

           >.next {
               position: absolute;
               right: -20px;

               &:after {
                   position: absolute;
                   top: 25%;
                   left: 25px;
                   transform: rotate(45deg);
                   width: 25px;
                   height: 2px;
                   background-color: $point-color;
                   content: '';
               }
               &:before {
                   position: absolute;
                   bottom: 25%;
                   left: 25px;
                   transform: rotate(-45deg);
                   width: 25px;
                   height: 2px;
                   background-color: $point-color;
                   content: '';
               }
           }//end of next
       }//end of service_RL_btn
   }//end of inner
}//end of service

@media screen and (max-width : 768px) {/*service 768px 반응형*/
    #service {
       margin-top: 20px;
       width: 100%;
       height: auto;//추가
       //background-image: url(../images/one.jpg);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: 50% 70%;
       //background-color: #d6b179;/*#71a8bc*//*ffb636*/

         >.inner {
              position: relative;/*indicator position*/


           >h3 {
              position: relative;
              padding: 50px 0 0;
              font-weight: 600;
              text-align: center;
              color: #333;
              text-transform: uppercase;

              &:after {
                 position: absolute;
                 bottom: -20px;
                 left: 50%;
                 transform: translateX(-50%);
                 font-size: 15px;
                 font-weight: 800;
                 color: $point-color;
                 letter-spacing: 0px;
                 content: "BUSINESS AREA";
              }//end of :after
           }//end of h3

           >.service_box {
               position: relative;/*service_container position*/
               overflow: hidden;
               width: 350px;//변경
               height: 402px;
               margin: 50px auto;//변경
               //background-color: green;

               >.service_container {
                   position: absolute;
                   top: 1px;
                   left: 0;
                   width: 1400px;

                   >div {
                       float: left;
                       width: 1400px;
                       height: 100%;

                       >ul {
                           width: 1400px;
                           margin: 0 auto;
                           //background-color: lightblue;

                           >li {
                               //cursor: pointer;
                               position: relative;
                               float: left;
                               margin-left: 0px;
                               width: 350px;//변경
                               height: 370px;
                               transition: .5s;
                               background-color: #fff;
                               border-radius: 5px;
                               //outline: 1px solid #555;
                               //background-color: pink;

                               &:after {
                                   opacity: 0;
                                   position: absolute;
                                   top: 10px;
                                   left: 10px;
                                   width: 325px;
                                   height: 345px;
                                   border: 2px solid $point-color;
                                   transition: .3s;
                                   content: '';
                               }



                               &:hover:after {opacity: 1;}



                               >dl {
                                   >dt {
                                       margin: 50px auto 0px;
                                       width: 120px;
                                       height: 120px;
                                       //background-image: url(../images/service_bg.png);
                                       background-position: 50% 50%;
                                       background-size: contain;
                                       background-repeat: no-repeat;
                                       transition: .4s;
                                       //background-color: green;

                                       >p {
                                           display: block;
                                           text-indent: -99999px;
                                           margin: 0px auto;
                                           padding-top: 40px;
                                           width: 90px;
                                           height: 90px;
                                           background-position: 50% 50%;
                                           background-size: contain;
                                           background-repeat: no-repeat;
                                           transition: .6s;
                                       }//end of p
                                   }//end of dt

                                   >.topic {
                                       margin: 0px 0;
                                       width: 100%;
                                       height: 33px;
                                       font-size: 23px;
                                       font-weight: 700;
                                       text-align: center;
                                       line-height: 30px;
                                       transition: .6s;
                                       color: #222;
                                       //background-color: gray;
                                   }//end of topic

                                   >.info {
                                       width: 100%;
                                       min-height: 100px;
                                       line-height: 1.6em;
                                       letter-spacing: -1px;
                                       font-size: 15px;
                                       font-weight: 500;
                                       text-align: center;
                                       transition: .6s;
                                       color: #aaa;
                                       //background-color: orange;
                                   }//end of info

                                   >.more {

                                       display: block;
                                       width: 150px;
                                       margin: 5px auto 0;
                                       text-align: center;
                                       font-weight: 600;
                                       color: $point-color2;
                                       z-index: 4000;

                                       >em {
                                           color: $point-color;
                                       }

                                       >a {
                                           position: absolute;
                                           top: 0;
                                           left: 0;
                                           display: block;
                                           width: 100%;
                                           height: 370px;
                                           color: #fff;
                                           //background-color: rgba(0,0,0,0.5);
                                           z-index: 7000;
                                       }
                                   }//end of more

                               }//end of dl

                           }//end of li
                       }//end of ul
                   }//end of div style

                   >.service_1 {
                       //background-color: red;
                        >ul >li{
                            &:nth-child(1) p {background-image: url(../images/icon_4.png);}
                            &:nth-child(2) p {background-image: url(../images/icon_2.png);}
                            &:nth-child(3) p {background-image: url(../images/icon_1.png);}
                            &:nth-child(4) p {background-image: url(../images/icon_7.png);}
                        }//end of serivce_1 icon images
                   }//end of service_1

                   >.service_2 {
                       display: none;
                       //background-color: green;

                       >ul >li {
                           background-size: 20%;
                          // &:nth-child(1) p {background-image: url(../images/icon_2.png);}
                           //&:nth-child(1) p {background-image: url(../images/icon_5.png);}
                           //&:last-child {display: none;}
                       }
                   }//end of service_2


               }//end of service_container


           }//end of service_box



           >.service_RL_btn {
               display: block;//추가
               position: absolute;
               top: 50%;
               width: 100%;

               >p {
                   position: absolute;
                   top: -35px;
                   width: 60px;
                   height: 60px;
                   text-indent: -99999px;
                   z-index: 7000;//추가
                   //background-color: red;
                   cursor: pointer;
               }//end of p

               >.prev {
                   position: absolute;
                   left: 60px;//변경

                   &:after {
                       position: absolute;
                       top: 35%;
                       left: 20px;//변경
                       transform: rotate(-45deg);
                       width: 25px;
                       height: 2px;
                       background-color: $point-color;
                       content: '';
                   }//prev
                   &:before {
                       position: absolute;
                       bottom: 35%;
                       left: 20px;//변경
                       transform: rotate(45deg);
                       width: 25px;
                       height: 2px;
                       background-color: $point-color;
                       content: '';
                   }//prev
               }//end of prev
               >.next {
                   position: absolute;
                   right: 60px;

                   &:after {
                       position: absolute;
                       top: 35%;
                       left: 15px;//변경
                       transform: rotate(45deg);
                       width: 25px;
                       height: 2px;
                       background-color: $point-color;
                       content: '';
                   }
                   &:before {
                       position: absolute;
                       bottom: 35%;
                       left: 15px;//변경
                       transform: rotate(-45deg);
                       width: 25px;
                       height: 2px;
                       background-color: $point-color;
                       content: '';
                   }
               }//end of next
           }//end of service_RL_btn
       }//end of inner
    }//end of service
}//service 768px 반응형

#company_m_info {
    width: 100%;
    height: 240px;
    background-image: url(../images/bg_1.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 90% 50%;
    background-size: cover;

    >.inner {
        padding-top: 90px;

        >ul {
            width: 100%;
            height: 100px;
            //background-color: pink;

            >li {
                width: 300px;
                float: left;
                text-align: center;
                color: #fff;
                font-size: 20px;
                //font-weight: 600;

                &:nth-child(1) {
                    margin-left: 150px;
                }

                &:nth-child(2) {
                    position: relative;

                    &:after {
                        position: absolute;
                        top: 50%;
                        left: 0;
                        width: 1px;
                        height: 15px;
                        background-color: #888;
                        content: '';
                    }

                    &:before {
                        position: absolute;
                        top: 50%;
                        right: 0;
                        width: 1px;
                        height: 15px;
                        background-color: #888;
                        content: '';
                    }

                    >dl>dt {
                        letter-spacing: -3px;
                    }
                }


                >dl {

                    >dt {
                        font-size: 40px;
                        font-weight: 500;
                        color: $point-color2;
                        margin-bottom: 10px;

                        >span {
                            font-size: 17px;
                        }

                    }//end of dt
                    >dd {
                        font-size: 17px;
                    }//end of dd
                }
            }//end of li
        }//end of ul
    }//end of inner
}//end of company_m_info

@media screen and(max-width : 768px) {/*company m info 768px 반응형*/
    #company_m_info {
        display: none;
        width: 100%;
        height: 240px;
        background-image: url(../images/bg_1.jpg);
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: 90% 50%;
        background-size: cover;

        >.inner {
            padding-top: 90px;

            >ul {
                width: 100%;
                height: 100px;
                //background-color: pink;

                >li {
                    width: 300px;
                    float: left;
                    text-align: center;
                    color: #fff;
                    font-size: 20px;
                    //font-weight: 600;

                    &:nth-child(1) {
                        margin-left: 150px;
                    }

                    &:nth-child(2) {
                        position: relative;

                        &:after {
                            position: absolute;
                            top: 50%;
                            left: 0;
                            width: 1px;
                            height: 15px;
                            background-color: #888;
                            content: '';
                        }

                        &:before {
                            position: absolute;
                            top: 50%;
                            right: 0;
                            width: 1px;
                            height: 15px;
                            background-color: #888;
                            content: '';
                        }

                        >dl>dt {
                            letter-spacing: -3px;
                        }
                    }


                    >dl {

                        >dt {
                            font-size: 40px;
                            font-weight: 500;
                            color: $point-color2;
                            margin-bottom: 10px;

                            >span {
                                font-size: 17px;
                            }

                        }//end of dt
                        >dd {
                            font-size: 17px;
                        }//end of dd
                    }
                }//end of li
            }//end of ul
        }//end of inner
    }//end of company_m_info
}//company m info 768px 반응형





#contact {
   width: 100%;
   height: 750px;
   background-color: $point-color;

   >h3 {
      position: relative;
      padding: 50px 0 0;
      font-weight: 600;
      text-align: center;
      color: #fff;
      text-transform: uppercase;

      &:after {
         position: absolute;
         bottom: -20px;
         left: 50.2%;
         transform: translateX(-50%);
         font-size: 15px;
         font-weight: 800;
         color: #111;
         letter-spacing: 4px;
         content: "How to come";
      }//end of :after
   }//end of h3

   >.mapContainer {
      width: 600px;
      height: 300px;
      margin: 60px auto 200px;

      >.map {
           width : 600px;
           height : 450px;

           background-image: url(../images/map_18.08.06.jpg);
           background-position: 50% 50%;
           background-size: cover;
           border : 0;

           >a {
             display: block;
             width: 100%;
             height: 100%;
             text-indent: -99999px;
           }
      }//end of map
   }//end of mapContainer

   >.mapInfo {
      position: relative;
      width: 100%;
      text-align: center;

      &:after {
         position: absolute;
         top: 0;
         left: 20%;
         width: 35px;
         height: 30px;
         background-image: url(../images/bg_quote.png);
         background-position: 0 50%;
         content: '';
      }//end of :after

      &:before {
         position: absolute;
         bottom: 0;
         right: 20%;
         width: 35px;
         height: 30px;
         background-image: url(../images/bg_quote.png);
         background-position: -35px 50%;
         content: '';
      }//end of :after


      >.inner {
         >ul {
            >li {
               font-size: 18px;
               font-weight: 600;
               color: #fff;
               line-height: 1.8em;

               >span {
                  color: #111;
                  font-weight: 900;
               }//end of span
            }//end of li
         }//end of ul
      }//end of inner
   }//end of mapInfo

}//end of #contact


@media screen and(max-width : 768px) {/*contact 768px 반응형*/

    #contact {
       width: 100%;//변경
       height: auto;//변경
       background-color: $point-color;

       >h3 {
          position: relative;
          padding: 50px 0 0;
          font-weight: 600;
          text-align: center;
          color: #fff;
          text-transform: uppercase;

          &:after {
             position: absolute;
             bottom: -20px;
             left: 50.2%;
             transform: translateX(-50%);
             font-size: 15px;
             font-weight: 800;
             color: #111;
             letter-spacing: 4px;
             content: "How to come";
          }//end of :after
       }//end of h3

       >.mapContainer {
          width: 90%;//변경
          height: 480px;
          margin: 60px auto 40px;

          >.map {
               width : 100%;
               height : 450px;

               background-image: url(../images/map_18.08.06.jpg);
               background-position: 10% 50%;
               background-size: cover;
               border : 0;

               >a {
                 display: block;
                 width: 100%;
                 height: 100%;
                 text-indent: -99999px;
               }
          }//end of map
       }//end of mapContainer

       >.mapInfo {
          position: relative;
          width: 100%;
          text-align: center;
          padding-bottom: 50px;//추가

          &:after {
             display: none;//추가
             position: absolute;
             top: 0;
             left: 20%;
             width: 35px;
             height: 30px;
             background-image: url(../images/bg_quote.png);
             background-position: 0 50%;
             content: '';
          }//end of :after

          &:before {
             display: none;//추가
             position: absolute;
             bottom: 0;
             right: 20%;
             width: 35px;
             height: 30px;
             background-image: url(../images/bg_quote.png);
             background-position: -35px 50%;
             content: '';
          }//end of :after


          >.inner {
             >ul {
                >li {
                   font-size: 18px;
                   font-weight: 600;
                   color: #fff;
                   line-height: 1.8em;

                   >span {
                      display: block;
                      color: #111;
                      font-weight: 900;
                   }//end of span
                }//end of li
             }//end of ul
          }//end of inner
       }//end of mapInfo

    }//end of #contact

}//contact 768px 반응형

footer {
   width: 100%;
   height: 170px;
   background-color: #333;

   >.inner {
       //background-color: pink;
       position: relative;
       padding-top: 20px;

       >h1 {
           float: left;
           margin-left: 40px;
           width: 120px;
           height: 40px;
           text-indent: -99999px;
           background-image: url(../images/logo.png);
           background-repeat: no-repeat;
           background-size: contain;
           background-position: 50% 50%;
       }//end of h1

       >.f_left {
           float: left;
           margin-left: 50px;
           //background-color: pink;

           >ul {
               width: 280px;
              // background-color: red;

               > li {

                   width: 320px;
                   //background-color: pink;
                   text-align: center;

                   &:nth-child(1) dl dt {
                       background-image: url(../images/f_icon_mail.png);
                   }

                   &:nth-child(2) dl dt {
                       background-image: url(../images/f_icon_tel.png);
                   }

                   &:nth-child(3) dl dt {
                       background-image: url(../images/f_icon_location.png);
                   }

                   >dl {
                       >dt {
                           margin: 0 auto;
                           width: 50px;
                           height: 50px;
                           text-indent: -99999px;
                           background-size: cover;
                           background-repeat: no-repeat;
                           background-position: 50% 50%;

                       }//end of dt
                       >dd {
                           text-align: left;
                           margin-top: 8px;
                           font-size: 15px;
                           font-weight: 500;
                           line-height: 1.2em;
                           color: #fff;

                           >em {
                               color: #909090;
                           }


                           &:nth-child(2) {
                               font-weight: 700;
                           }

                           &:nth-child(3) {
                               color: #909090;
                           }
                           >a {
                               font-size: 13px;
                               color: #909090;

                               &:hover {
                                   text-decoration: underline;
                               }



                           }


                       }//end of dd
                   }//end of dl
               }//end of li
           }//end of ul
       }//end of f_left

       >address {
           float: left;
           margin-top: 0px;
           margin-left: 30px;
           width: 340px;
           //background-color: green;

           >ul {
               width: 350px;
              // background-color: red;

               > li {

                   width: 320px;
                   //background-color: pink;
                   text-align: center;

                   &:nth-child(1) dl dt {
                       background-image: url(../images/f_icon_mail.png);
                   }

                   &:nth-child(2) dl dt {
                       background-image: url(../images/f_icon_tel.png);
                   }

                   &:nth-child(3) dl dt {
                       background-image: url(../images/f_icon_location.png);
                   }

                   >dl {
                       >dt {
                           margin: 0 auto;
                           width: 50px;
                           height: 50px;
                           text-indent: -99999px;
                           background-size: cover;
                           background-repeat: no-repeat;
                           background-position: 50% 50%;

                       }//end of dt
                       >dd {
                           text-align: left;
                           margin-top: 8px;
                           font-size: 15px;
                           font-weight: 500;
                           line-height: 1.2em;
                           color: #fff;

                           &:nth-child(2) {
                               font-weight: 700;
                           }

                           &:nth-child(3) {
                               color: #909090;
                           }
                           >a {
                               font-size: 13px;
                               color: #909090;

                               &:hover {
                                   text-decoration: underline;
                               }


                           }


                       }//end of dd
                   }//end of dl
               }//end of li
           }//end of ul
       }//end of address

       >.f_nav {
           float: right;
           margin-top: 0px;
           width: 180px;
           //background-color: blue;

           >ul {

               >li {
                   float: left;
                   margin-right: 9px;
                   padding-right: 11px;
                   background-image: url(../images/f_right.png);
                   background-repeat: no-repeat;
                   background-position: 100% 73%;



                   &:last-child {
                       margin-right: none;
                       background-image: none;
                   }

                   >a {

                       font-size: 13px;
                       color: #fff;


                   }
               }
           }

       }

       >.copyright {
           position: absolute;
           top: 120px;
           right: -140px;
           transform: translateX(-50%);
           width: 315px;
           font-size: 13px;
           letter-spacing: 1px;
           color: #fff;

       }//end of copyright

       &:after {
           position: absolute;
           top: 30px;
           left: 200px;
           transform: translateX(-50%);
           width: 1px;
           height: 120px;
           background-color: #808080;
           content: '';
       }//end of inner:after 하단 1자 선(상호)


   }//end of inner
}//end of footer


@media screen and(max-width : 768px) {/*footer 768px 반응형*/
    footer {
       width: 100%;
       height: auto;
       background-color: #333;

       >.inner {
           //background-color: pink;
           position: relative;
           padding-top: 20px;

           >h1 {
               float: inherit;
               //margin-left: 0px;제거
               margin: 0 auto 180px;//추가
               width: 120px;
               height: 40px;
               text-indent: -99999px;
               background-image: url(../images/logo.png);
               background-repeat: no-repeat;
               background-size: contain;
               background-position: 50% 50%;
           }//end of h1

           >.f_left {
               float: inherit;
               // margin-left: 50px;
               margin: 0 auto;
               width: 100%;//추가
               //background-color: pink;

               >ul {
                   width: 100%;//변경
                  //background-color: red;

                   > li {

                       width: 100%;//변경
                       //background-color: pink;
                       //text-align: center;

                       &:nth-child(1) dl dt {
                          // background-image: url(../images/f_icon_mail.png);
                       }

                       &:nth-child(2) dl dt {
                           //background-image: url(../images/f_icon_tel.png);
                       }

                       &:nth-child(3) dl dt {
                           //background-image: url(../images/f_icon_location.png);
                       }

                       >dl {
                           >dt {
                               display: none;
                               margin: 0 auto;
                               width: 100%;
                               height: 50px;
                               text-indent: -99999px;
                               background-size: cover;
                               background-repeat: no-repeat;
                               background-position: 50% 50%;

                           }//end of dt
                           >dd {
                               padding-left: 20px;//추가
                               text-align: left;//변경
                               margin-top: 8px;
                               font-size: 16px;//변경
                               font-weight: 500;
                               line-height: 1.2em;
                               color: #fff;

                               >em {
                                   color: #909090;
                               }


                               &:nth-child(2) {
                                   font-weight: 700;
                               }

                               &:nth-child(3) {
                                   color: #909090;
                               }
                               >a {
                                   font-size: 13px;
                                   color: #909090;

                                   &:hover {
                                       text-decoration: none;//변경
                                   }



                               }


                           }//end of dd
                       }//end of dl
                   }//end of li
               }//end of ul
           }//end of f_left

           >address {
               border-top: 1px solid #666;
               float: inherit;//변경
               // margin-top: 0px;
               // margin-left: 30px;
               margin: 10px auto;
               width: 100%;//변경
               //background-color: green;

               >ul {
                   width: 100%;
                  // background-color: red;

                   > li {

                       width: 100%;
                       //background-color: pink;
                       text-align: center;

                       &:nth-child(1) dl dt {
                           background-image: url(../images/f_icon_mail.png);
                       }

                       &:nth-child(2) dl dt {
                           background-image: url(../images/f_icon_tel.png);
                       }

                       &:nth-child(3) dl dt {
                           background-image: url(../images/f_icon_location.png);
                       }

                       >dl {
                           >dt {
                               display: none;


                           }//end of dt
                           >dd {
                               padding-left: 20px;
                               text-align: left;//변경
                               margin-top: 6px;//변경
                               font-size: 15px;
                               font-weight: 500;
                               line-height: 1.2em;
                               color: #fff;

                               &:nth-child(2) {
                                   font-weight: 700;
                               }

                               &:nth-child(3) {
                                   color: #909090;
                               }
                               >a {
                                   font-size: 13px;
                                   color: #909090;

                                   &:hover {
                                       text-decoration: underline;
                                   }


                               }


                           }//end of dd
                       }//end of dl
                   }//end of li
               }//end of ul
           }//end of address

           >.f_nav {
               position: absolute;
               top: 75px;
               float: inherit;//변경
               margin-top: 0px;
               width: 100%;//변경
               //background-color: blue;

               >ul {

                   >li {
                       width: 100%;//추가
                       text-align: center;//추가
                       float: inherit;//변경
                       margin-right: 0px;//변경
                       padding-right: 0px;//변경
                       background-image: none;//변경
                       background-repeat: no-repeat;
                       background-position: 100% 73%;
                       border-top: 1px solid #666;



                       &:last-child {
                           margin-right: none;
                           background-image: none;
                           border-bottom: 1px solid #666;
                       }

                       >a {
                           display: block;
                           height: 50px;
                           line-height: 50px;
                           font-size: 16px;
                           color: #fff;
                           //background-color: orange;


                       }
                   }
               }

           }

           >.copyright {
               border-top: 1px solid #666 ;//추가
               position: static;
               padding: 20px 0;
               top: 10px;//변경
               right: 50%;//변경
               transform: translateX(0);
               width: 100%;
               font-size: 13px;
               letter-spacing: 1px;
               text-align: center;
               color: #fff;
               //background-color: green;

           }//end of copyright

           &:after {
               display: none;

           }//end of inner:after 하단 1자 선(상호)


       }//end of inner
    }//end of footer


}//footer 768px 반응형


@keyframes downArrow {
   0% {
      bottom : 40px;
   }
   100% {
      bottom : 20px;
   }
}