body {font-family: "Roboto" , sans-serif ; line-height: 1.5;}

a:hover {cursor: pointer;}

/* ######### header ############ */


.center_inner { width: 90%; max-width: 1480px; margin: auto; }

header { z-index: 100; }
header .menu_btn_box { z-index: 102; }
header nav.open { z-index: 101;}

header { opacity: 0.95; width: 100%; height: 140px; background-color: #ffffff; position: fixed; top: 0; left: 0; transition: 0.3s; display: flex; justify-content: center;}
header .center_inner { height: 140px; width: 90%; position: relative; display: flex; align-items: center; justify-content: center; }

/* logo_wrao */
header .logo_wrap {  width: 140px; position: absolute; top: 40%; left: 1%; transform: translate(0,-50%); }
header .logo_wrap > a { display: block; }
header .logo_wrap > a > img { width: 100%; }

/* nav */
header nav {  width: 100%; height: 100%; padding: 0 0 0 240px; color: #000000; display: flex; align-items: center; justify-content: flex-end; transition: 0.3s; position: relative; }
header nav .main_menu { width: 70%; display: flex; font-size: 18px; font-weight: 400; display: flex; justify-content: space-between; }
header nav .main_menu > li { position: relative; cursor: pointer; }
header nav .main_menu > li > div { padding: 0 15px; font-size: 20px; font-weight: 600;}
header nav .main_menu > li:nth-child(5) > div {padding-right: 0px;} 
header nav .main_menu > li:hover {  transition: 0.3s; }

header nav .sub_menu { width: 100%; font-size: 16px; text-align: center; position: absolute; top: 50px; left: 50%; transform: translate(-50%,0); opacity: 0; visibility: hidden; transition: 0.35s; }
header nav .sub_menu li > a { margin: 5px 0; padding: 10px 0; color: #000000; display: block; font-size: 18px;}
header nav .sub_menu li > a:hover { font-weight: 600; transition: 0.3s; }

/* top_menu_wrap */
header nav .top_menu_wrap { position: absolute; top: 12px; right: 0; display: flex; align-items: center; }
header nav .top_menu_wrap a { color: #000000; font-size: 14px; font-weight: 700; display: flex; align-items: center; border-right: 0.5px solid #000000; padding-left: 16px;}
header nav .top_menu_wrap a:nth-child(n+4) {border: none; padding: 0px;} 
header nav .top_menu_wrap a::after { content: ''; width: 2px; height: 16px; margin: 0 10px; background-color: #ffffff; display: block; }
header nav .top_menu_wrap a:last-child:after { display: none; }
header nav .top_menu_wrap a img {width: 20px;}

/* menu_btn */
header .menu_btn_box { width: 80px; height: 110px; background-color: #FFFFFF; position: absolute; top: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
header .menu_btn_box .menu_btn { width: 50px; margin: 14px 0; cursor: pointer; }
header .menu_btn_box .menu_btn > img { width: 100%; }
header .menu_btn_box .language_btn { font-size: 18px; font-weight: bold; text-align: center; }
header .menu_btn_box .language_btn > a { color: #ffffff; }

header .menu_btn_box { display: none; }


/* hover */
header:hover { height: 300px; transition: 0.3s; }
header:hover nav .sub_menu { opacity: 1; visibility: visible; transition: 0.35s; }
 
header nav .main_menu > li:nth-child(1) {display: none;}
header nav .main_menu > li:nth-child(n+7) {display: none;}




/* ############### SUB_TITLE ############### */
main .sub_title {background-image: url(../images/sub_title_background.png); background-position: center; background-size: cover; display: flex; justify-content: center; color: #ffffff; padding: 65px 0px; position: relative; margin-top: 140px;}
main .sub_title > div {width: 90%; max-width: 1480px;}
main .sub_title > div > div:nth-child(1) {font-size: 14px; font-weight: 600; margin-bottom: 20px;}
main .sub_title > div > div:nth-child(2) {font-size: 70px; font-weight: 700;}


/* ######### FOOTER ##########*/
footer {background-color: #25272f; color: #ffffff; display: flex; justify-content: center; padding-top: 40px; padding-bottom: 40px;}
footer > div {width: 90%; max-width: 1480px; display: flex; justify-content: space-between;}
footer > div .footer_left_section {width: 70%;display: flex;}

footer > div > div > div:nth-child(1) {width: 20%; }
footer > div > div > div:nth-child(2) {width: 85%;}
footer > div .footer_right_section {width: 25%; }

footer > div > .footer_left_section img {width: 100px;}
footer > div > .footer_right_section img {width: 150px; }

footer > div > .footer_left_section > div:nth-child(2) > div:nth-child(1) {color: #d2d5e4; font-size: 18px; margin-bottom: 5px;}
footer > div > .footer_left_section > div:nth-child(2) > div:nth-child(n+2) {color: #9EA1B1; font-size: 14px;}









@media all and (max-width:1020px) {

    body { font-size: 16px; }
   
  
    /*############ header ############*/
    header { height: 70px; opacity: 1;}
    header .center_inner { height: 60px;  width: 90%; margin-top: 10px;}
  
    /* logo_wrao */
    header .logo_wrap { width: 100px; }
   

  
    /* nav */
    header nav { padding: 0 80px 0 180px;}
    header nav { width: 400px; position: fixed; right: -400px; transition: right 0.3s; }
    header nav .sub_menu { transition: 0s; }
    header nav .sub_menu li > a:hover { transition: 0s; }
  
    /* top_menu_wrap */    
    header nav .top_menu_wrap { display: none;}
  
    /* menu_btn */
    header .menu_btn_box { display: flex; width: auto; height: 60px; background-color: rgba(255, 255, 255, 0); flex-direction: row-reverse; }
    header .menu_btn_box .menu_btn { width: 60px; height: 60px; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
    header .menu_btn_box .menu_btn > img { width: 30px; }
  
  
    /* hover */
    header:hover { height: 60px; }
  
    /* nav open */
    header nav.open { width: 100%; height: 100%; max-width: 100%; padding: 50px 0 0 0; overflow: scroll; background-color: #FFFFFF; display: block; position: fixed; top: 0; right: 0; left: auto; transition: right 0.5s; -ms-overflow-style: none; scrollbar-width: none; }
    header nav.open::-webkit-scrollbar { display: none; }
  
    header nav.open .main_menu { width: 100%; margin: 10% auto; padding: 0; color: #ffffff; display: block; flex-wrap: wrap; justify-content: flex-start; color: #000000;}
    header nav.open .main_menu > li { width: 100%; padding: 15px 0; margin: 0px 5%;}
    header nav.open .main_menu > li:hover { color: #000000; }
    header nav .main_menu > li:nth-child(1) { display: block; width: 90%; color: rgba(20, 32, 58, .5); border-bottom: 2px solid rgba(20, 32, 58, .5); margin: 0px 5%;}
    header nav.open .main_menu > li:nth-child(5) {width: 90%; border-bottom: 2px solid rgba(20, 32, 58, .5); } 
    header nav.open .main_menu > li:nth-child(6) {width: 90%; border-bottom: 2px solid rgba(20, 32, 58, .5); }

    header nav.open .main_menu > li:nth-child(n+6) > a > div {font-size: 16px; font-weight: 500; padding: 0px 15px;}
    header nav.open .main_menu > li:nth-child(n+6) > a {display: flex; justify-content: space-between;}
    header nav.open .main_menu > li:nth-child(n+6) img {width: 20px; height: 20px;}
    header nav.open .main_menu > li:nth-child(n+6) {width: 90%; display: block;}


    header nav.open .sub_menu { display: none; text-align: left; position: relative; top: 0; left: 0; transform: translate(0,0); opacity: 1; visibility: visible; background-color: #ffffff; }
    header nav.open .sub_menu li > a { padding: 10px 20px; color: #000000; }
    header nav.open .sub_menu li > a:hover { color: #000000; }
  
    header nav.open .main_menu > li.sub_on .sub_menu { display: block; }
  
    header nav.open .login_btn_wrap { top: 20px; right: 135px; }

	#mobHide{display:none;}
  
  
    main .sub_title {margin-top: 80px;}
  }
  
  @media all and (max-width:760px) {
    footer > div .footer_left_section {display: block;} 
  }
  
  @media all and (max-width:650px) {
    footer > div > .footer_right_section img {width: 100px; }

  }
  
  @media all and (max-width:540px) {
  
      /*############ header ############*/
      header { height: 50px; }
      header .center_inner { height: 50px; }
  
       /* hover */
       header:hover { height: 50px; }
  
      /* logo_wrao */
      header .logo_wrap  { width: 90px; }
  
      /* menu_btn */
      header .menu_btn_box { height: 50px; }
      header .menu_btn_box .menu_btn { width: 50px; height: 50px; }
      header .menu_btn_box .menu_btn > img { width: 30px; }
      header .menu_btn_box .language_btn { font-size: 13px; }
  
      /* hover */
      header:hover { height: 50px; }
  
      header nav.open .login_btn_wrap { top: 15px; right: 125px; }

      footer > div {display: block;}
      footer > div > .footer_right_section img {margin-top: 10px;}

  }