@charset "utf-8";

    html { font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; }

    body { background-color: white; margin: 0; padding: 0; color: black; font-size: 1em;
      font-family: "맑은 고딕", "나눔 고딕", "돋움", "굴림"; }
    
    .skip{ position: absolute; left: 0; top: -100%; z-index: 2; width: 100%; height: 50px;
      font-size: 15px; color: #fff; text-align: center; line-height: 50px; transition: all 5s; background: #000; }
    .skip:focus {top: 0;}

    a { text-decoration: none; color: black; }

    header .header {box-sizing: border-box; width: 100%; height: 90px; background-color: white;}
    header .company_name {
      display: inline; position: relative; top: 10px; left: 1%; padding: 5px 5px; border-bottom: 0px solid gray; border-radius: 100px / 100px;
      font-size: 0.9rem; box-sizing: border-box; text-transform: uppercase; text-shadow: 1px 0px grey; font-family: "Alatsi","나눔 고딕","맑은 고딕","굴림","돋움";
    }
    header .company_name:hover { background-color: orange; }
    header .WMS {
      display: inline; position: absolute; top: 50px; left: 1%; padding: 2px 2px; border-bottom: 1px solid gray; border-radius: 100px / 100px;
      font-size: 0.9rem; box-sizing: border-box; text-shadow: 1px 0px grey; font-family: "Alatsi","나눔 고딕","맑은 고딕","굴림","돋움";
    }
    header .WMS:hover { background-color: orange; }
    @media all and (min-width: 768px) {
      header .company_name { top: 20px; left: 1%; padding: 5px 8px; border: 1px solid gray; border-radius: 100px / 100px; font-size: 1rem; }
      header .WMS { position: relative; top: 20px; left: 1.3%; padding: 5px 8px; border: 1px solid gray; font-size: 1rem; }
    }
    @media all and (min-width: 960px) {
      header .company_name {Top: 20px; left: 1%; padding: 5px 8px; border: 1px solid gray; border-radius: 100px / 100px; font-size: 1rem; }
      header .WMS { position: relative; top: 20px; left: 1.3%; padding: 5px 8px; border: 1px solid gray; font-size: 1rem; }
    }

    /* Hamburger button styles. */
    .menu { cursor: pointer; }
    .hamburger-button { display: inline; position: absolute; top: 1rem; right: 1.3rem; width: 30px; transition: .3s ease-in-out; z-index: 100; }
    .hamburger-button:hover { width: 35px; }
    .hamburger-button span {
        position: absolute; top: 0; width: 100%; height: 6px; border-radius: 5px;
        background-color: black; transition: transform .2s ease-in-out, opacity .2s ease-in-out;
      }
    .hamburger-button span:nth-child(1) { top: 0px;}
    .hamburger-button span:nth-child(2), .hamburger-button span:nth-child(3) { top: 13px; }
    .hamburger-button span:nth-child(4) { top: 26px; }

    .hamburger-button.active span { background-color: #FFF; }
    .hamburger-button.active span:nth-child(1),
    .hamburger-button.active span:nth-child(4) { opacity: 0; }
    .hamburger-button.active span:nth-child(2) { transform: rotate(45deg); }
    .hamburger-button.active span:nth-child(3) { transform: rotate(-45deg); }
    .menu .hide { display: none; float: right; width: 200px; height: 100%; margin: -10px 45px 0 0; font-size: 0.8rem; }
    .menu .hide a:hover { text-decoration: underline;}
    /* Hamburger button styles. the-end*/
    
    /* media query: first page 시작*/
    .first_page { display: block; width: 100%; height: auto; position: relative;
      background-image: url("images/bnl_index_photo.jpg"); background-repeat: no-repeat; background-size: cover;
    }
    .first_page #motto { display: block; position: relative; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);
      margin: 0 0 20% 0; padding: 8% 0; color: white; text-align: center; font-weight: bold; font-size: 4rem;
    }
    .first_page #motto span { color: orange; font-weight: bold; font-family: "맑은 고딕", "나눔 고딕","굴림","돋움"; }
    @media all and (min-width: 768px) {
      .first_page #motto { font-size: 5rem; }
    }
    @media all and (min-width: 960px) {
      .first_page #motto { font-size: 6rem; }
    }
    /* media query: first page 종료 */
  
    .services {
      display: flex; flex-direction: row; width: 100%; height: 100%; background-color: #F9F8F8; background-size: cover;
      box-sizing: border-box; padding: 5% 0 10% 0; border: 0px solid red;
    }
    .services .image { order: 1; width: 50%; padding: 0 0 0 0; border: 0px solid orange; }
    .services .image img { width: 80%; height: 90%; margin: 10% 0 0 10%; border-radius: 25%; border: 1px lightgrey solid; }
    .services .text { order: 2; width: 50%; height: 100%; padding: 5% 0; font-size: 1.2rem; }
    .services .text .text_content { font-size: 1rem; }
    .services .text .text_content .text_indent {text-indent: 3%; } 
    .services .text .brochure {
      display: inline; position: relative; top: 20px; padding: 3px 3px; border: 1px solid gray; border-radius: 0;
      font-size: 0.9rem; box-sizing: border-box; font-family: "Alatsi","나눔 고딕","맑은 고딕","굴림","돋움";
    }
    .services .text .brochure:hover { background-color: orange; }
    @media all and (min-width: 768px) {
      .services .image { padding: 0; }
      .services .image img { width: 80%; height: 90%; padding: 0; }
      .services .text { padding: 5% 0; font-size: 2rem; }
      .services .text .text_content { font-size: 1.5rem; }
      .services .text .brochure { top: 50px; padding: 10px 30px; font-size: 1.2rem; }
    }
    @media all and (min-width: 960px) {
      .services .image { padding: 0; }
      .services .image img { width: 80%; height: 100%; }
      .services .text { padding: 5% 5%; font-size: 3rem; }
      .services .text .text_content { font-size: 2rem; }
      .services .text .brochure { top: 50px; padding: 10px 30px; font-size: 1.5rem; }
    }

    .services_2 {
      display: flex; flex-direction: row; width: 100%; height: 100%; background-color: #F9F8F8; background-size: cover;
      box-sizing: border-box; padding: 5% 0 5% 0; border: 0px solid red;
    }
    .services_2 .image { order: 1; width: 50%; padding: 0 0 0 0; border: 0px solid orange; }
    .services_2 .image img { width: 80%; height: 90%; margin: 10% 0 0 10%; border-radius: 25%; border: 1px lightgrey solid; }
    .services_2 .text { order: 2; width: 50%; height: 100%; padding: 5% 0; font-size: 1.2rem; }
    .services_2 .text .text_content { font-size: 1rem; }
    .services_2 .text .text_content .text_indent {text-indent: 3%; } 
    .services_2 .text .brochure {
      display: inline; position: relative; top: 20px; padding: 3px 3px; border: 1px solid gray; border-radius: 0;
      font-size: 0.9rem; box-sizing: border-box; font-family: "Alatsi","나눔 고딕","맑은 고딕","굴림","돋움";
    }
    .services_2 .text .brochure:hover { background-color: orange; }
    @media all and (min-width: 768px) {
      .services_2 .image { padding: 0; }
      .services_2 .image img { width: 80%; height: 90%; padding: 0; }
      .services_2 .text { padding: 5% 0; font-size: 2rem; }
      .services_2 .text .text_content { font-size: 1.5rem; }
      .services_2 .text .brochure { top: 50px; padding: 10px 30px; font-size: 1.2rem; }
    }
    @media all and (min-width: 960px) {
      .services_2 .image { padding: 0; }
      .services_2 .image img { width: 80%; height: 80%; }
      .services_2 .text { padding: 5% 5%; font-size: 3rem; }
      .services_2 .text .text_content { font-size: 2rem; }
      .services_2 .text .brochure { top: 50px; padding: 10px 30px; font-size: 1.5rem; }
    }

    /* media query 시작*/
      .page_grid { width: 100%; height: 50px; border: 0px solid orange; }
      .page_grid .page_title { display: inline-block; width: 80%; height: 110px; border: 0px solid blue; font-size: 2.0rem; }
      .page_grid .to_Top {
        display: inline-block; width: 18%; height: 110px; border: 0px solid purple; font-size: 0.9rem; text-align: right;
        font-family: "Bree Serif","나눔 고딕","맑은 고딕","굴림","돋움";
      }
      .page_grid .to_Top .color { color: gray; }

      @media all and (min-width: 768px) {
        .page_grid { width: 100%; height: 70px; }
        .page_grid .page_title { width: 80%; height: 110px; font-size: 2.4rem; }
        .page_grid .to_Top { width: 18%; height: 110px; font-size: 1.0rem; }
      }

      @media all and (min-width: 960px) {
        .page_grid { width: 100%; height: 85px; }
        .page_grid .page_title { width: 80%; height: 80px; font-size: 3.3rem; }
        .page_grid .to_Top { width: 18%; height: 80px; font-size: 1.1rem; }
      }
    /* media query 종료*/

    .slider #image { width: 100%; margin: auto; }
    .slider #image img { width: 80%; margin: auto; }

    .second_page {
      width: 100%; height: 90%; background-color: white; background-size: cover;
      box-sizing: border-box; margin: auto; padding: 5% 5%; border: 0px solid red;
    }
    .third_page {
      width: 100%; height: 90%; background-color: white; background-size: cover;
      box-sizing: border-box; margin: auto; padding: 5% 5%;
    }
    .fourth_page {
      width: 100%; height: 90%; background-color: white; background-size: cover;
      box-sizing: border-box; margin: auto; padding: 5% 5%;
    }
    .fifth_page {
      width: 100%; height: 90%; background-color: #F9F8F8; background-size: cover;
      box-sizing: border-box; margin: auto; padding: 5% 5%;
    }
    
    .fifth_page #to_BNL { border: 1px lightgrey solid; text-align: center; }
    .fifth_page #to_BNL #map { width: 100%; height: 100%; max-width: 800px; }
    .fifth_page #to_BNL #click_map { font-size: 1.0rem; }
    .fifth_page #fifth_page_1 { font-size: 0.6rem; }
    .fifth_page #fifth_page_1 .BNL { color: orange; }
    @media all and (min-width: 768px) {
      .fifth_page #fifth_page_1 {font-size: 0.75rem; }
    }
    @media all and (min-width: 960px) {
      .fifth_page #fifth_page_1 {font-size: 0.9rem; }
    }

    /* footer: media query 시작 */
    .footer {
      display: flex; flex-direction: column; width: 90%; height: auto; margin : 0 auto; background-color: white;
      color: lightslategray; font-size: 0.6rem; font-family: "나눔 고딕","맑은 고딕","굴림","돋움";
    }
    .footer span { font-size: 1.5em; }
    .footer #company_info { order: 2; padding: 2% 0; border-bottom: 1px solid silver; }
    .footer #contact_us { display: flex; flex-direction: row; order: 1; padding: 2% 0; border-bottom: 1px solid silver; }
    .footer #contact_info { order: 1; padding: 2% 0; color: lightslategray;}
    .footer #kakao_talk {
      order: 2; width: 100px; height: 25px; margin: 0 auto; position: relative; top: 10px; left: 10%;
      border: 1px solid lightslategray; text-align: center; }
    .footer #kakao_talk span { font-size: 0.8rem; font-weight: 500;}
    .footer #kakao_talk:hover { background-color: orange; }

    @media all and (min-width: 768px) {
      .footer { display: flex; flex-direction: row; font-size: 0.7rem; }
      .footer span { font-size: 1.7em; }
      .footer #company_info { order: 1; width: 50%; padding: 2% 0%; }
      .footer #contact_us { display: flex; flex-direction: row; order: 2; width: 50%; padding: 1% 1%; }
      .footer #contact_info {order: 1; float: left; width: 50%; }
      .footer #kakao_talk {
        order: 2; width: 110px; height: 15px; margin: 0 auto; border: 1px solid lightslategray; padding: 2% 0%; text-align: center; }
      .footer #kakao_talk span { font-size: 0.8rem; }
    }
    
    @media all and (min-width: 960px) {
      .footer { display: flex; flex-direction: row; font-size: 0.7rem; }
      .footer span { font-size: 1.7em; }
      .footer #company_info { order: 1; width: 50%; padding: 2% 0%; }
      .footer #contact_us { display: flex; flex-direction: row; order: 2; width: 50%; padding: 1% 1%; }
      .footer #contact_info {order: 1; width: 50%; }
      .footer #kakao_talk {
        order: 2; width: 110px; height: 15px; margin: 0 auto; border: 1px solid lightslategray; padding: 2% 0%; text-align: center; }
      .footer #kakao_talk span { font-size: 0.8rem; }
    }
    /* footer: media query 종료 */

    .blinking{
	     -webkit-animation:blink 3.0s ease-in-out infinite alternate;
       -moz-animation:blink 3.0s ease-in-out infinite alternate;
       animation:blink 3.0s ease-in-out infinite alternate;
     }
     @-webkit-keyframes blink{ 0% {opacity:0.1;} 100% {opacity:1;} }
     @-moz-keyframes blink{ 0% {opacity:0.1;} 100% {opacity:1;} }
     @keyframes blink{ 0% {opacity:0.1;} 100% {opacity:1;} }