@charset="utf-8";
 
.logo { background-image: url('../../images/logo_bl.png'); padding:40px 100px; background-size: contain; transition: all .5s; position:absolute; left:1%; }
.logo_bl {  background-image: url('../../images/logo_bl.png'); transition: all .5s;}

#header_wrap { position: fixed; top:0; z-index: 999; width:100%;   transition: all .1s;  cursor: pointer; overflow: hidden; }
header { position: fixed; top:0; z-index: 999; width:100%;   transition: all .1s;  cursor: pointer; overflow: hidden; border-bottom:1px solid #eee;  }
header section { margin:0 auto; overflow: hidden; position: relative; }
header:hover { background-color: #fff;}
header:hover .logo {  background-image: url('../../images/logo_bl.png'); transition: all .5s; }
header:hover .ham span { background-color: #222;}
header:hover .lnb a { color:#222; } 
header:hover .subnavbtn { color:#222; }
.navbar {overflow: hidden; z-index: -1; padding-right:0%; float:right; }
.navbar a {float: left; font-size: 16px; text-align: center; padding: 14px 16px; text-decoration: none; }

.subnav { float:left; overflow: hidden;  }
.subnav .subnavbtn {  font-size: .9em;    border: none;  outline: none;  padding: 35px;  margin: 0;  color:#111;   font-weight:500; } 

.subnavbtn span { transition: all .5s; width:0%; }

.subnav:hover .subnavbtn { color: #073190 !important; position: relative;}
.subnav:hover .subnavbtn span { background-color: #073190; display:block; width:73%; height:3px; position:absolute; left:15%; bottom:0;}

.navbar:hover  {    color:#222;   background-color: #fff;  transition: .3s;}
.navbar:hover button { color:#222;  transition: all .5s; }
.subnav-content {  display: none;  position: absolute;  top:111px;  left: 0;  background-color:rgba(255, 255, 255, .9);  width: 100%;  z-index: 1;  transition: all .3s;  padding:10px 0;}
.subnav-content div {    margin:0 auto;  max-width:500px;  display: flex;  align-items: center;  justify-content: center;}
.subnav-content a {   flex:1; font-size: .9em;}
.subnav-content a:hover { color: black;}

.subnav:hover .subnav-content {display: block;}



.ham_bl { background-color: #222!important; }
.bgc_wh { background-color:#fff;  border-bottom:1px solid #eee; transition: all .5s;}  
.c_bl { color: #222 !important;}
.c_or { color: #caa992 !important;}
 
.lnb { position:absolute; right:4%; top:38%; font-size:.75rem; width:170px; }
.lnb a { display: block; float:left; margin:0 1% 0 0; width: 23%; text-align: center; color:#fff;}
.lnb a:first-child { margin-right:8px;}
.lnb a span { width:5px; height:5px; background-color: #caa992; display:block; margin:0 auto;  border-radius: 50%; opacity: 0; transition: all .2s; }

.lnb a:hover span { opacity: 1; transition: all .2s; }
.closebtn {   display: none; }

@media only screen  and (max-width:680px){     
  header { height:60px; overflow: visible; }  
  #header_wrap {   overflow: visible; } 
  header section { overflow: visible;  }
  
  header .logo { margin-left:3%; padding:30px 90px; }
  .navbar { height:100vh; width:300px; float:right; position:absolute; right:-300px; top:0; font-size:1.1em; background-color: #fff; color:#222; padding:110px 0 0; 
    transition: 0.5s; overflow-x: hidden;  z-index: 9998;}
  .subnav { float:none; overflow: visible;   }
  .navbar > a { 
    position: absolute;
  top: 0;
  right: 5px;
  padding:5px;
  font-size: 32px; font-weight:100;
  margin-left: 50px;
  }
  .subnav .subnavbtn {  font-size: .9em;    border: none;  outline: none;  padding: 20px;  margin: 0;  color:#222; width:100%;  font-weight:500; border-bottom:1px solid #eee;  } 

  .subnavbtn span { transition: all .5s; width:0%; }

  .subnav:hover .subnavbtn { color: #073190 !important; position: relative;}
  .subnav:hover .subnavbtn span { background-color: #073190; display:block; width:100%; height:3px; position:absolute; left:0%; bottom:0;}

  .navbar:hover  {    color:#222;   background-color: #fff;  transition: .3s;}
  .navbar:hover button { color:#222;  transition: all .5s; }
  .subnav-content {  display: none;  position: relative; top:0; left:0;  background-color:rgba(255, 255, 255, .9);  width: 100%;  z-index: 1;  transition: all .3s;  padding:10px 0;}
  .subnav-content div {    display: flex; flex-direction: column; align-items: center;  justify-content: flex-start;}
  .subnav-content a { color:#222;  flex:1; text-align: center;}
  .subnav-content a:hover { color: #073190;}

  .subnav:hover .subnav-content {display: block;}

  .ham { position:absolute; right:2%; top:10px; display: block;}
  .ham  span { display: block; margin:8px; width:30px; height:1px; background-color: #111; } 
  .ham  span:nth-child(2) { width:20px;}
  
  
   
  .lnb { position:absolute; right:-300px; top:80px; font-size:.75rem; width:300px; display: block;  z-index:9999; transition: 0.5s; }
  .lnb a { display: block; float:left; margin:0; width: 24%; text-align: center; color:#222;}
  .lnb a:first-child { margin-right:8px;}
  .lnb a span { width:5px; height:5px; background-color: #caa992; display:block; margin:0 auto;  border-radius: 50%; opacity: 0; transition: all .2s; }

  .lnb a:hover span { opacity: 1; transition: all .2s; }

  .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    display: block;
  }
}



 
#main footer { }
.main_visual { height:100%; overflow: hidden;}
.main_visual .visual { height:680px; padding:18% 2% 35%; background-size: cover; overflow: hidden;}
.main_visual .visual .txt_box { max-width:1200px; margin:0 auto; }
.main_visual .visual p { font-size:2.7em; font-weight:700;  letter-spacing: -1px; }
.main_visual .visual span { }
.main_visual .visual_a { background-image: url('../../images/main-b.jpg'); }

@media only screen  and (max-width:1280px){   
  .main_visual .visual {  padding:35% 4% 30%; }
}

@media only screen  and (max-width:680px){   
  
  .main_visual .visual { padding:60% 4% 30%;  }

}



 
footer { width:100%;  font-size:.8em;  background-color: #111; padding:2% ; color:#fff; overflow: hidden; }
footer section { margin:0 auto; display: flex; flex-wrap:wrap; max-width:1400px;  }  
footer section ul li { font-weight:100; color:rgb(196, 196, 196);  margin:3px;   }
footer section ul li span { margin-right:10px; font-weight:400; color:#eee; }
footer section .logo { background-image: url('../../images/logo.png');  background-size: 90%;  position: relative;  position:relative; left:0; }  
footer section .add { padding-top:25px; }
 
@media only screen  and (max-width:680px){      
  footer section .logo {background-position: left; background-size: 130px; } 
  footer section .add { padding-top:0px; }

}