@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
  
body {height:100%; }
html {height:100%}
 

#wrap {height:100%; position:relative; width:100%;  display:inline-block; }
#wrap * { transition: all 0.2s ease-out; }

#container {  width:100%; display:inline-block;  }

header {height:90px; position:fixed; z-index:99999;width:100%;  display:flex; align-items:center; transition: all 0.3s ease-out;}
header:hover {background-color:#fff}
header * { transition: all 0.3s ease-out; }
header .flex.in {align-items:center;  box-sizing:border-box;  max-width:1200px; justify-content:space-between;  }
header.over {background-color:#fff}
header img.color {display:none}
header img.w {display:block}


.topnav { position: relative; z-index: 1000; }
.topnav__list { width:700px; display:flex; align-items:center; justify-content:flex-end; gap:80px; margin:0; margin-right:70px; padding:0; list-style:none; }
.topnav__list > li { position: relative; }
.topnav__list > li > a { display:flex; align-items:center; justify-content:center; height:70px;  text-decoration:none; color:#fff;   white-space:nowrap; font-size:20px;   font-weight:600;  text-align:center; position:relative;  }

header:hover .topnav__list > li > a{color:#000}
header.over .topnav__list > li > a{color:#000}
header:hover img.color {display:block}
header:hover img.w {display:none}
header.over img.color {display:block}
header.over img.w {display:none}

header .sub { position:absolute; left:50%; top:60px; transform:translateX(-50%); margin:0; padding:20px 0; list-style:none; background:#fff;  box-shadow: 0 10px 25px rgba(0,0,0,.08); border-radius:12px; display:block; width:180px; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
header .sub li  {width:100%; padding:0; text-align:center}
header .sub li a { display:block; width:100%;  padding:3px 14px; box-sizing:border-box; font-size:15.5px; text-align:center;  text-decoration:none; color:#333; font-weight:300; }

header .has-sub:hover > .sub {opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(6px); }

 .ham {width:33px; height:33px; border:1px solid #ddd;  border-radius:3px; display:flex; align-items:center; justify-content:center  }


@media all and (min-width:1000px) {
  .ham {display:none}

}

@media all and (max-width:1000px) {
	header {height:70px; background-color:#fff}
	header .topnav {display:none}
    header .sub  {display:none}
    header img.color {display:block; width:120px}
    header img.w {display:none;}

}
 


.in {width:100%; margin:0 auto; max-width:1200px; }


@media all and (max-width:1200px) {
  .in {padding:0 4%; box-sizing:border-box}


}
 
.fixed_q.over { opacity:1; right:1%}   
.fixed_q { position:fixed; right:-200px;  bottom:170px;     opacity:0; transition: all 0.6s ease-out; }
.fixed_q a div {font-size:17px; letter-spacing:-1px;  line-height:1.2; font-weight:400  }
.fixed_q a {  z-index:9999; margin:10px 0; background-color:var(--main_c);  color:#fff; width:90px; height:90px;  display:flex; flex-direction:column;  justify-content: center;   align-items: center; border-radius:10px; text-align:center;  transition: all 0.1s ease-out; }
 

@media all and (max-width:800px) {
  .fixed_q {display:none}
 
}
 

footer {width:100%; display:inline-block; position:relative; z-index:99; font-size:16px;  font-weight:300;  padding:2px 0 50px 0; box-sizing:border-box; line-height:1.5; border-top:1px solid #ddd}
footer h2 {margin-bottom:10px; font-size:1.2em;  }
footer div {  padding:0 ; box-sizing:border-box; width:100%; display:inline-block  }
footer b {font-weight:500;  }
footer a {color:#333}
footer a:hover {text-decoration:underline}
footer .copy {font-size:15px}
footer .r {margin-left:auto}
footer .w {display:none}

@media all and (max-width:800px) {
 footer .r {width:100%; display:flex; justify-content:flex-end; gap:10px}
 footer {font-size:14px; line-height:1.4}
 
}