@import url(font-awesome.min.css);
@import url("reset.css");

@font-face {
  font-family: 'GmarketSansBold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSerifKR';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Inner */
.inner {
  margin: 0 auto;
  width: 75rem;
  max-width: calc(100% - 6rem); }

  .inner h2.tit2 { font-size: 2rem; font-family: 'GmarketSansBold'; color:#d7c9b1; }
  .ss_tit a { font-size: 1rem; background: #000; color:#d7c9b1; padding: 5px 30px 8px 30px;}
  .ss_tit a:hover { background: #8c0a28; color:#d7c9b1;}


@media screen and (max-width: 768px) {
  .inner h2.tit2 { font-size: 20px; vertical-align: middle; margin-bottom: 5px;}
  .ss_tit a{ font-size: 0.5rem; padding: 5px 30px 8px 30px; }
  }

@media screen and (max-width: 480px) {
    .inner { max-width: calc(100% - 3rem); } 
    .inner h2.tit2 { font-size: 18px; vertical-align: middle;}
  }






    header.special {
      float: left;
      width: 100%;
      text-align: center;
      margin-bottom: 3rem;
    }
    header.special p {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto; }
  
    header h2 { font-size: 2.5rem; color: #8c0a28; font-family: 'GmarketSansBold'; margin:0px 0 10px 0;}
    header p.sp_text { font-size: 20px; font-weight: 400; color: #999; line-height: 24px; font-family: 'NotoSerifKR';}
    


    header.student {
      float: left;
      width: 100%;
      text-align: center;
      margin-bottom: 3rem;
    }
    header.student p {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto; 
      font-size: 50px; font-weight: 200; color: #ccc; margin-top: 100px;
    }

    

    @media screen and (max-width: 768px) {
        header p.sp_text { font-size: 16px; line-height: 18px;}

        header.special {width: 100%; text-align: center; margin-bottom: 2rem; }
        header.special h2 {width: 100%; text-align: center; 
                margin: 1.5rem 0 0.3rem 0; font-weight: 500;
                font-size: 1.8rem;
              }
        header.special p { max-width: 90%; margin-left: auto; margin-right: auto; font-size: 15px;}
        header.student p { margin-top: 30px; font-size: 30px; line-height: 30px;}
    }

    @media screen and (max-width: 480px) {
      header.special h2 { font-size: 2rem; margin-bottom: -20px; }
      header p.sp_text { display: none;}
    }



/* Highlights */
.highlights {
      width: 100%;
      margin: 2.5rem 0;
      display: -moz-flex;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -moz-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -moz-align-items: -moz-stretch;
      -webkit-align-items: -webkit-stretch;
      -ms-align-items: -ms-stretch;
      align-items: stretch; 
}
    .highlights > * {
      -moz-flex-shrink: 1;
      -webkit-flex-shrink: 1;
      -ms-flex-shrink: 1;
      flex-shrink: 1;
      -moz-flex-grow: 0;
      -webkit-flex-grow: 0;
      -ms-flex-grow: 0;
      flex-grow: 0; 
  }
    .highlights > * { width: 25%; }
    .highlights > * { padding: 1rem; width: calc(25% + 0.5rem); }
    .highlights > :nth-child(-n + 4) { padding-top: 0; }
    .highlights > :nth-last-child(-n + 4) { padding-bottom: 0; }
    .highlights > :nth-child(4n + 1) { padding-left: 0; }
    .highlights > :nth-child(4n) { padding-right: 0; }
    .highlights > :nth-child(4n + 1),
    .highlights > :nth-child(4n) { width: calc(25% + -0.5rem); }
    .highlights .content { border-radius: 4px; height: 100%;  padding: 0.5rem; text-align: center; }
    .highlights .content img { max-width: 100%; height: auto;}
    .highlights .content h3 { font-size: 18px; font-weight: 500; margin-bottom: 5px; color: #000;}
    .highlights > div > :last-child {margin-bottom: 0; }

    .highlights .content p.hs_text { padding: 0 20px 20px 20px; color: #555; 
                      line-height: 21px; font-weight: 400; font-size: 15px;
                       text-align: justify;}
    .highlights .content p.hs_text a{ color: #777; }
    .highlights .content p.hs_text a:hover{ color: #000; }

  @media screen and (max-width: 980px) {
        .highlights > * {width: 50%; }
        .highlights > * {padding: 1rem; width: calc(25% + 0.6666666667rem); }
        .highlights > :nth-child(-n + 3) { padding-top: 1rem; }
        .highlights > :nth-last-child(-n + 3) { padding-bottom: 1rem; }
        .highlights > :nth-child(3n + 1) {padding-left: 1rem; }
        .highlights > :nth-child(3n) {padding-right: 1rem; }
        .highlights > :nth-child(3n + 1),
        .highlights > :nth-child(3n) {padding: 1rem;width: calc(50% + 1rem); }
        .highlights > * { padding: 1rem; width: calc(50% + 1rem); }
        .highlights > :nth-child(-n + 2) { padding-top: 0; }
        .highlights > :nth-last-child(-n + 2) { padding-bottom: 0; }
        .highlights > :nth-child(2n + 1) { padding-left: 0; }
        .highlights > :nth-child(2n) { padding-right: 0; }
        .highlights > :nth-child(2n + 1),
        .highlights > :nth-child(2n) { width: calc(50% + 0rem); }
        .highlights .content { padding: 0.5rem; }
   }
  @media screen and (max-width: 768px) {
        .highlights > * { width: 100%; }
        .highlights > * { padding: 1rem; width: calc(33.3333333333% + 0.6666666667rem); }
        .highlights > :nth-child(-n + 3) { padding-top: 1rem; }
        .highlights > :nth-last-child(-n + 3) { padding-bottom: 1rem; }
        .highlights > :nth-child(3n + 1) { padding-left: 1rem; }
        .highlights > :nth-child(3n) { padding-right: 1rem; }
        .highlights > :nth-child(3n + 1),
        .highlights > :nth-child(3n) { padding: 1rem; width: calc(100% + 2rem); }
        .highlights > * { padding: 1rem; width: calc(50% + 1rem); }
        .highlights > :nth-child(-n + 2) { padding-top: 1rem; }
        .highlights > :nth-last-child(-n + 2) { padding-bottom: 1rem; }
        .highlights > :nth-child(2n + 1) { padding-left: 1rem; }
        .highlights > :nth-child(2n) { padding-right: 1rem; }
        .highlights > :nth-child(2n + 1),
        .highlights > :nth-child(2n) { padding: 1rem; width: calc(100% + 2rem); }
        .highlights > * { padding: 1rem; width: calc(100% + 2rem); }
        .highlights > :nth-child(-n + 1) { padding-top: 0; }
        .highlights > :nth-last-child(-n + 1) { padding-bottom: 0; }
        .highlights > :nth-child(1n + 1) { padding-left: 0; }
        .highlights > :nth-child(1n) { padding-right: 0; }
        .highlights > :nth-child(1n + 1),
        .highlights > :nth-child(1n) { width: calc(100% + 1rem); } 
        .highlights .content p.hs_text { padding: 0 20px 20px 20px; color: #555; 
                    line-height: 20px; font-weight: 400; font-size: 14px; }
  }

.highlights .content {background: #ffffff; box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1); }


.menu_box_1 {  position: relative; float: none;  width: 100%%; height: auto; margin: 0 0 10px 0px; overflow: hidden; background: #000;}
.menu_box_1 img { display: block; max-width: 100%; height: auto;}


  .menu_box_1 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
  }
  
  .menu_box_1 a {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
  }
  
  .menu_box_1:hover img,
  .menu_box_1.hover img {
    opacity: 0.35;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
  
  
  .menu_box_1 h2 {
    position: absolute;
    font-size: 24px;
    font-weight: 300;
    top: 20%;
    left: 0%;
    width: 100%;
    opacity: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #fff;
  }
  
  
  .menu_box_1:hover h2,
  .menu_box_1.hover h2 {
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  
  
  .year {
    position: absolute;
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    top: 35%;
    left: 0;
    width: 100%;
    opacity: 0;
    -webkit-transform: translateX(-30%);
    transform: translateX(-30%);
    color: rgb(255, 178, 35);
  }
  
  
  .menu_box_1:hover .year,
  .menu_box_1.hover .year {
    opacity: 1;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }








/* Wrapper */
.wrapper { position: relative; padding: 8rem 0 6rem 0 ; z-index: 1; }
.wrapper2 { position: relative; padding: 0rem 0 6rem 0 ; z-index: 1; }

  @media screen and (max-width: 1280px) {
      .wrapper {padding: 4rem 0 2rem 0 ; } 
  }
  @media screen and (max-width: 768px) {
      .wrapper {padding: 3rem 0 1rem 0 ; } 
    }
  @media screen and (max-width: 480px) {
      .wrapper { padding: 2rem 0 0.1rem 0 ; } 
    }

/* Banner */
#banner {
      -ms-flex-align: center; -ms-flex-pack: center;
      background-color: #111111; color: rgba(255, 255, 255, 0.5);
      -moz-align-items: center;
      -webkit-align-items: center;
      -ms-align-items: center;
      align-items: center;
      display: -moz-flex;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -moz-justify-content: center;
      -webkit-justify-content: center;
      -ms-justify-content: center;
      justify-content: center;
      background-image: url("../images/banner.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      border-top: 0;
      display: -ms-flexbox;
      height: 53rem !important;
      min-height: 53rem;
      overflow: hidden;
      position: relative;
      width: 100%; 
      animation: bimg-1 30s linear 0s infinite;
  }

  @keyframes bimg-1{
    0%{
        background-size: 120%;
        background-position: top;
    }
    30%{
        background-size: 100%;
        background-position: bottom right;        
    }
    70%{
        background-size: 150%;
        background-position: left;     
    }
    100%{
        background-size: 200%;
        background-position: right;     
    }
}



 
  #banner:before {
    -moz-transition: opacity 3s ease;
    -webkit-transition: opacity 3s ease;
    -ms-transition: opacity 3s ease;
    transition: opacity 3s ease;
    -moz-transition-delay: 1.25s;
    -webkit-transition-delay: 1.25s;
    -ms-transition-delay: 1.25s;
    transition-delay: 1.25s;
    background: #111111;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.45;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1; }
  #banner:after {
    background: linear-gradient(135deg, #8c0a28 0%, #111111 74%);
    content: ' ';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    webkit-linear-gradientidth: 100%; width: 100%; z-index: 1; 
  }
  #banner.small { height: 30vh !important; min-height: 30vh; }



  .banner_title { display: block; z-index: 9999999; text-align: center;}

  #banner h1 { font-size: 3rem; margin-bottom: 0.5rem; color: #fff; font-weight: 400; z-index: 999999; font-family: 'GmarketSansBold';}
 
  #banner .banner_title { display: block; z-index: 9999; text-align: center;}
  #banner .banner_title h1.tit{ color: #fff; font-size: 2.5rem;}
  #banner .banner_title .tit2{ text-align: right; width: 100%; color: #d7c9b1; font-size: 1.2rem; margin-bottom: 15px;}
  #banner .banner_title .tit3{ width: 100%; color: #d7c9b1; font-size: 1.5rem;}


 .m_ceo_wrap {  display: none; }




  @media screen and (max-width: 1280px) {
    #banner video {
      display: none; } }
  @media screen and (max-width: 768px) {
          #banner { height: auto !important; min-height: 0; padding: 4rem 2rem 4rem 2rem; }
          #banner .inner {width: 100%; }
          #banner h1 {font-size: 1.2rem; margin-top: 0rem; padding-bottom: 0; }
          #banner p {font-size: 1.25rem; }
          #banner br {display: none; }
          #banner .button {width: 100%; } 
          #banner .banner_title { display: block; z-index: 9999; text-align: center;}
          #banner .banner_title h1.tit{ color: #fff; font-size: 1rem; margin-bottom: -1px;}
          #banner .banner_title .tit2{ width: 100%; font-size: 1rem; margin-bottom: 5px;}
          #banner .banner_title .tit3{ width: 100%; font-size: 0.8rem;}
          .b_top_01 {display: none;}

          .m_ceo_wrap { width: 100%; display: block; padding-bottom: 150px;}
          .m_ceo { float: left; width: 35%; padding-right: 20px; }
          .m_ceo img { max-width: 100%; height: auto; }

           .m_ceo_text_wrap { 
                float: left;  width: 60%; border-bottom: 1px solid #999; 
                border-top: 1px solid #999; padding: 10px 0px; }
           .m_ceo_text_1 { font-family: 'GmarketSansMedium';
                         font-size: 1.5rem; color: #ffa033 ;
                         width: 100%;
             }
             .m_ceo_text_2 { float: left; }
             .m_ceo_text_2 a{ font-size: 16px; color: #555 ; 
                       line-height: 18px; padding: 0px 0 0 0px;
                       font-weight: 400; 

                     }
             .m_ceo_text_2 a:hover { color: #ffa033 ; }
      }
  @media screen and (max-width: 480px) {
    #banner p {
      font-size: 1rem; } 
    }







  body.is-preload #banner .inner {
    -moz-transform: scale(0.99);
    -webkit-transform: scale(0.99);
    -ms-transform: scale(0.99);
    transform: scale(0.99);
    opacity: 0; }
  body.is-preload #banner:before {opacity: 1; }

    .b_top_01 {position: relative; z-index: 9;}
    .b_top_01 img { max-width: 100%; height: auto; }

    .bb_img { width: 300px; height: 180px; 
            background: url(../images/banner_img_01.jpg) no-repeat; 
            background-size: cover;
            color: #8c0a28; font-weight: 700; font-size: 1.7rem;
            font-family: 'GmarketSansBold';
            padding: 135px 0 0 20px;
            border: 1px solid #ccc;
          }
    .bb_img2 { width: 300px; height: 180px; 
            background: url(../images/banner_img_02.jpg) no-repeat; 
            background-size: cover;
            color: #8c0a28; font-weight: 700; font-size: 1.7rem;
            font-family: 'GmarketSansBold';
            padding: 25px 0 0 130px;
            z-index: 8888;
            border: 1px solid #ccc;
          }

    .ceo_wrap {   margin-top: 100px; }
    .ceo { float: left; width: 120px; height: 120px; 
            background: url(../images/banner_img_03.jpg) no-repeat; 
            background-size: cover;
            margin-right: 20px;
            border-radius: 50%;
          }
    .ceo_text_wrap { float: left;  }
    .ceo_text_1 { font-family: 'GmarketSansMedium';
                font-size: 1.2rem; color: #ffa033 ;
                padding: 20px 0 0 0px;
    }
    .ceo_text_2 { width: 160px;
      
    }
    .ceo_text_2 a{ font-size: 14px; color: #eee ; 
              line-height: 20px; padding: 0px 0 0 0px;
              font-weight: 200; line-height: 18px;
            }
  

    .ceo_text_2 a:hover { color: #ffa033 ; }

    i.ceo_arrow {  font-size: 1rem; color: #ffa033; }


    
    .topbox_left { float: left; }
    .topbox_right { float: left; margin-left: 50px; } 

    .bb_title { 
          position: absolute; top: 90px; left: 20px; 
          color: #8c0a28; font-weight: 700; font-size: 1.6rem;
          font-family: 'GmarketSansBold';
        }

    .bb_title2 { 
            position: absolute; top: 15px; left:460px; z-index: 999;
            color: #8c0a28; font-weight: 700; font-size: 1.6rem;
            font-family: 'GmarketSansBold';
          }

    ul.bb_list li {  margin: 0;}
     ul.bb_list li a { display: block; color: #eee; font-size: 17px; 
      font-weight: 300; border-bottom: 1px solid #888;  
                       padding: 30px 0px 5px 0px;}
     ul.bb_list li a:hover { color: #fff; background: #8c0a28; opacity: 0.7; transition: opacity 1s;}





/* 중간배너 */
#cta {
  background-color: #8c0a28;
  color: rgba(255, 255, 255, 0.75);
  background-attachment: fixed;
  background-image: linear-gradient(rgba(146, 15, 24, 0.5), rgba(146, 15, 24, 0.5)), url(../images/cta01.jpg);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  text-align: center;
  z-index: 1; }
 

 

 
  @media screen and (max-width: 980px) {
    #cta {background-attachment: scroll; } 
    }
  @media screen and (max-width: 480px) {
      #cta {height: 110px; } 
      }



/* Header */
body {
  padding-top: 3.25rem; }
  body:before {
    content: ' ';
    background-image: url(../images/bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.07; }

#header {
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    background: #fff;
    color: rgba(255, 255, 255, 0.5);
    cursor: default;
    height: 5rem;
    left: 0;
    line-height: 5rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10001; 
    border-bottom: 1px solid #8c0a28;
}
  #header > .logo {
    color: #000;
    font-size: 1.5rem;
    font-weight: 600;
    height: inherit;
    line-height: inherit;
    padding: 15px 0 0 50px;
    text-decoration: none;
    font-family: 'GmarketSansBold'; 
  }
  #header > nav > a {
    display: inline-block;
    padding: 0 0.75rem;
    text-decoration: none;
    font-size: 1.6rem;
   }
  #header > nav > a:hover { color: #8c0a28; }
  #header > nav > a[href="#menu"] {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
  #header > nav > a[href="#menu"]:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-transform: none !important; }
  #header > nav > a[href="#menu"]:before {
        content: '\f0c9';
        margin: 0 0.5rem 0 0; }
  #header > nav > a + a[href="#menu"]:last-child {
      border-left: solid 1px rgba(255, 255, 255, 0.25);
      margin-left: 0.5rem;
      padding-left: 1.25rem; }
  #header > nav > a:last-child {
      padding-right: 1.25rem; }

      

  @media screen and (max-width: 768px) {

      
      #header > nav > a { padding: 0 0.5rem; }
      #header > nav > a + a[href="#menu"]:last-child { margin-left: 0.25rem; padding-left: 1rem; }
      #header > nav > a:last-child { padding-right: 1rem; } 
    }

  @media screen and (max-width: 980px) {
      body { padding-top: 44px; }

      #header { height: 60px; line-height: 60px; } 
      #header > .logo  { padding: 5px 0 0 20px; }
      #header > a > img { width: 90%; }
    }

  @media screen and (max-width: 480px) {
      #header { min-width: 320px; } 
    }



/* Main */



/* Menu */
#menu {
      background-color: #fff;
      color:#777;
      -moz-transform: translateX(20rem);
      -webkit-transform: translateX(20rem);
      -ms-transform: translateX(20rem);
      transform: translateX(20rem);
      -moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
      -webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
      -ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
      transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
      -webkit-overflow-scrolling: touch;
      box-shadow: none;
      height: 100%;
      max-width: 80%;
      overflow-y: auto;
      padding: 3rem 2rem;
      position: fixed;
      right: 0;
      top: 0;
      visibility: hidden;
      width: 21rem;
      z-index: 10002; 
      border-left: 1px solid #ccc;
}


  .b_title { font-size: 16px;  color: #fff; 
             background: #8c0a28; height: 32px; line-height: 35px; padding-left: 20px;
             font-family: 'GmarketSansBold';
            }

  
  #menu > ul { margin: 0 0 1rem 0; border-bottom: 1px solid #ccc;}
  #menu > ul.line_x {  border-bottom: 0px solid #ccc;}
  #menu > ul.links { list-style: none; padding-bottom: 10px; }
  #menu > ul.links > li { padding: 0; }
  #menu > ul.links > li.s_title { font-weight: 500; color: #000; padding-bottom: 5px; font-size: 15px;}
  #menu > ul.links > li > a { color: inherit; display: block; text-decoration: none; font-size: 14px; font-weight: 400; line-height: 20px; padding-bottom: 7px;}
  #menu > ul.links > li > a:hover { color: #000; }
  #menu > ul.links > li:first-child > a { border-top: 0; }

  #menu .close {
          text-decoration: none;
          -moz-transition: color 0.2s ease-in-out;
          -webkit-transition: color 0.2s ease-in-out;
          -ms-transition: color 0.2s ease-in-out;
          transition: color 0.2s ease-in-out;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          color: #8c0a28;
          cursor: pointer;
          display: block;
          height: 3.25rem;
          line-height: 3.25rem;
          padding-right: 1.25rem;
          position: absolute;
          right: 0;
          text-align: right;
          top: 0;
          vertical-align: middle;
          width: 7rem; 
  }
  #menu .close:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-transform: none !important; 
    }
  #menu .close:before { content: '\f00d'; font-size: 1.25rem; }
  #menu .close:hover { color: #000; }


  .f_icon { width: 100%; text-align: center;  margin: 0 0px 0 0px;}
  .f_icon a { background: #df6604; color: #fff; padding: 1px 0 3px 0; font-size: 0.9rem; width: 100%; display: block;}
  .f_icon a:hover { background: #000; color: #fff;}




  @media screen and (max-width: 768px) {
      #menu .close {height: 4rem; line-height: 4rem; position: absolute; top: -10px; right: 10px;} 
    }
  @media screen and (max-width: 768px) {
    #menu {padding: 2.5rem 1.75rem; } 
  }

body.is-menu-visible #menu {
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2);
  visibility: visible; }



  /* Footer */
  #footer {
    background-color: #fff;
    color: #777;
    padding: 3rem 0 ; 
    border-top: 1px solid #ccc;
    height: 160px;
  }
  
  #footer .f_logo { float: left; padding: 6px 0 0 50px; }

  #footer .copyright { float: left; font-size: 16px; padding: 3px 0px 0 20px; line-height: 24px;}

 

    
  @media screen and (max-width: 1280px) {
    #footer { padding: 3rem 0 2rem 0 ;} 
     #footer .copyright { font-size: 16px; padding: 0 30px 0 20px;}
    }
  @media screen and (max-width: 980px) {
    }
  @media screen and (max-width: 768px) {
    #footer {padding: 2rem 0 1rem 0 ; } 
    #footer img { width: 90%; }
  
    #footer .copyright { font-size: 14px; padding: 5px 0px 20px 20px; line-height: 20px;}   
    }
  @media screen and (max-width: 480px) {
    #footer {padding: 2rem 0 10rem 0 ; } 
    #footer .f_logo {  padding: 10px 0 0 20px;}
    #footer img { width: 70%; }
    
    }