$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


#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: 10px;
      left: 50%;
      width: 2px;
      height: 22px;
      background-color: #fff;
      content: '';
   }//end of :after

   &:before {
      position: absolute;
      transform: rotate(45deg);
      top: 10px;
      left: 40%;
      width: 2px;
      height: 10px;
      background-color: #fff;
      content: '';
   }//end of :before
}//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;

      >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: 30px;
             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;
                    }
                    >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

#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


#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: 500px;
           margin: 80px 0 50px;
           background-image: url(../images/intro.png);
           background-position: 50% 50%;
           background-size: cover;
           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: 25px;
               text-align: right;

               &:after {
                   position: absolute;
                   top: -23px;
                   right : 0;
                   width: 2px;
                   height: 240px;
                   background-color: #ddd;
                   content: '';
               }

               >ul {
                   padding-right: 30px;

                   >li {

                       >dl{
                           >dt {
                               font-size: 17px;

                               color: rgb(108, 108, 108);
                           }
                           >dd {
                               font-size: 27px;
                               font-weight: 900;
                               color: $point-color;

                           }
                       }

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

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

                   >li {
                       line-height: 1.7em;
                       >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: 10px;
                       width: 200px;
                       background-color: $point-color;
                       border-radius: 6px;
                       transition: .2s;
                       height: 40px;

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

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

                       }

                       &:hover a {
                           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

#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 {
                           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: 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 {
                                   position: relative;
                                   display: block;
                                   width: 30px;
                                   height: 30px;
                                   margin: 5px auto 0;
                                   line-height: 30px;
                                   text-align: center;
                                   font-weight: 600;
                                   border-radius: 15px;
                                   background-color: $point-color;
                                   z-index: 4000;

                                   >a {
                                       display: block;
                                       color: #fff;
                                   }
                               }//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 {
           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

#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

#partner {
   width: 100%;
   height: 400px;
   background-repeat: no-repeat;
   background-position: 90% 50%;

   >h3 {

      padding: 50px 0 0;
      font-weight: 600;
      text-align: center;
      color: #222;
      text-transform: uppercase;


   }//end of h3

   >.inner {

       >ul {
           margin: 60px auto 0;
           width: 500px;
           height: 100px;
           background-color: green;

           >li {
               float: left;
               width: 20%;
               height: 100%;
               background-color: pink;
           }
       }//end of ul

       >ol {
           margin: 10px auto 0;
           width: 500px;
           height: 100px;
           background-color: green;

           >li {
               float: left;
               width: 33.33%;
               height: 100%;
               background-color: pink;
           }
       }
   }//end of inner


}//end of research



#contact {
   width: 100%;
   height: 600px;
   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 40px;

      >.map>iframe {
           width : 600px;
           height : 300px;
           frameborder : 0;
           border : 0 allowfullscreen;
      }
   }//end of mapContainer

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

      &:after {
         position: absolute;
         top: 0;
         left: 30%;
         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: 30%;
         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

footer {
   width: 100%;
   height: 160px;
   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

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

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

               > li {

                   margin-left: 25px;
                   width: 300px;
                   //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: 250px;
           //background-color: blue;

           >ul {

               >li {
                   float: left;
                   margin-right: 11px;
                   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: 110px;
           background-color: #fff;
           content: '';
       }//end of inner:after

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

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