@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800;900&display=swap');

:root {
  --main_c : #204188;
 }

:root {
  --main_c2 :#6d819c;

  }

body {overflow-x:hidden; }

.header {width:100%; float:left; position:fixed; height:80px; border-bottom:1px solid rgba(255,255,255,.3); z-index:9999999999999; }
.header .navi {width:100%;   box-sizing:border-box; display:flex; padding:0 40px;  align-items:center}
.header .logo {width:15%; margin-top:-1px;  line-height:0 }
.header .logo img { }
.header .logo img.color {display:none}
.header { transition: all 0.3s ease-out; }

.header ul {width:70%; text-align:center;  display:flex; align-items:center; justify-content:center;}
.header ul li {display:inline-block; line-height:1; padding:0 2.4vw;  font-size:22px; font-weight:600; position:relative; z-index:999999999;  }
.header ul li a {color:#fff; color:#fff; text-shadow:5px 5px 10px rgba(0,0,0,.1)}

.header ul > li:after {content:''; position:absolute; top:50%; right:0; margin-top:-2px; width:4px; height:4px; background-color:#fff; display:inline-block }
.header ul > li:last-child:after {display:none }


.header.roll { background : rgba(255, 255, 255, 1); border-bottom:none}
.header.roll .logo {color:#333}
.header.roll a {color:#333;   }
.header.roll ul li a {color:#333 }
.header.roll .logo img.color {display:block}
.header.roll .logo img.w {display:none}

.header ul li.ov {position:relative;}
.header.roll li.ov a {  font-weight:800 }
.header.roll a { text-shadow:none }
.header.roll ul > li:after { background-color:#666; }

.header .top_call {text-align:right; margin-left:auto; display:flex; align-items:center; justify-content:center;  color:#fff; font-size:25px; height:65px; font-weight:700;  letter-spacing:1px; gap:10px; font-family: 'GmarketSansMedium'; margin-top:12px; white-space:nowrap }
.header .top_call i {margin-bottom:5px}.header .m_nav  {margin-left:10px}
.header.roll .top_call {   color:#111;   }


 
.header  ul > li > ul { display:none;  width:180px; background-color:#fff;  position:absolute; left:50%; transform: translate(-50%, 0); top:50px; padding:25px 0px; box-sizing:border-box; border-radius:10px;   line-height:0 }
.header  ul > li > ul > li {width:100%;  display:inline-block;  padding:3px 10px;   box-sizing:border-box;  }
.header  ul > li > ul > li > a  {display:inline-block; line-height:1;  width:100%; font-size:16px; color:#333; font-weight:400}
.header  ul > li > ul > li:hover > a  {text-decoration:underline}
.header  ul > li > ul > li:after {display:none}

.header.roll li.ov ul > li > a  {color:#333; font-weight:400 }
.header.roll ul > li > ul {border-radius:0 0 10px 10px}

.right_fixed { display:flex; align-items:flex-end; gap:10px; flex-direction:column; position:fixed; z-index:999999; right:58px; bottom:60px; }
.right_fixed div a i {font-size:23px}
.right_fixed a { line-height:63px; height:63px; color:#fff; transition: all .3s ease-out; box-sizing:border-box; }
.right_fixed div  .one {width:63px; height:63px; line-height:63px;  background-color:#6d819c; color:#fff;  border-radius:50%;  display:flex;  justify-content:center; align-items:center;  background-color:var(--main_c);  }


.right_fixed div.contact_fixed a { background-color:#6d819c; width:auto; border-radius:50px;   display:flex; align-items:center;  }
.right_fixed div.contact_fixed a span {  background-color:#6d819c;   }
.right_fixed div.contact_fixed a p { transition: all 0.3s ease-out; width:0; overflow:hidden; }
.right_fixed div.contact_fixed:hover a p { margin-left:0; padding-right:30px; width:auto}
 

.right_fixed div.top_fixed a i  {font-size:27px}
.right_fixed div.top_fixed:hover a { 
    animation: rotate-axis 1s linear forwards;
}
.right_fixed.type2 a {background-color:var(--main_c); padding:10px 0; color:#fff}
 
@keyframes rotate-axis {
    from {
        transform: perspective(800px) rotateY(0deg);
    }
    to {
        transform: perspective(800px) rotateY(360deg);
    }
}

.right_fixed.type2 {gap:0; right:15px; overflow:hidden; border-radius:10px;  bottom:220px; width:auto; text-align:center; font-size:16px; box-sizing:border-box; background-color:#f4f6f8}
.right_fixed.type2 a {width:100%; line-height:30px; height:auto}
.right_fixed.type2 .box {padding:25px 15px;  box-sizing:border-box;}



#footer { width:100%; display:inline-block; background-color:#fff; overflow-x:hidden}
#footer .in  { display:flex; }
#footer .in p {width:40%;  font-size:15.5px; color:#333; font-weight:400;  line-height:1.4em; padding:25px 20px; border:1px solid #ddd; margin-right:-1px; border-bottom:none; border-top:none }
#footer .in p b  { font-size:1.15em; font-weight:700; width:100%;  display:inline-block; color:#111; padding-bottom:7px; }
#footer .in p span.tel {font-size:1.5em; color:var(--main_c); font-weight:800; width:100%; display:inline-block; padding-bottom:10px;  padding-top:4px; }


#footer .bg1  {display:inline-block;  width:100%;  background-color:#f4f6f8; border-top:1px solid #ddd; border-bottom:1px solid #ddd }
 
#footer ul  {width:100%; padding:20px 0; display:flex;   flex-wrap:wrap;  justify-content:center; align-items:center;    }
#footer li  { font-weight:400; font-size:0.90em; color:#555;  border-right:1px solid #ddd;    text-align:center; padding:0 10px;}
#footer li:last-child  {border-right:none}
#footer li a.link_a {display:inline-block; background:#fff; border-radius:5px;padding:4px 10px; font-size:0.86em; border:1px solid #ddd; box-shadow:1px 1px 1px rgba(0,0,0,0.1) }
#footer li a.link_a i {font-size:0.85em; vertical-align:2px; margin-left:2px;}
#footer .footer_logo {width:100%; display:flex;   flex-wrap:wrap;  justify-content:center; align-items:center;  border-top:1px solid #ddd; text-align:center; padding:15px 0; gap:2%}
 
#footer .copy  {font-size:0.85em; color:#888; width:100%; display:inline-block; text-align:center; line-height:50px; letter-spacing:0px; padding-bottom:30px;}

@media all and (min-width:1200px) {
		  .header .m_nav  {display:none}
}


@media all and (max-width:1500px) {
		.header ul li {  padding:0 20px; font-size:21px;   }
 
}

@media all and (max-width:1450px) {
	 #footer  .in  { padding:0 }
 
}

@media all and (max-width:1200px) {
		 .header {  height:auto }
	     .header .logo img {height:40px}
		.header ul {display:none}
		.header .navi {padding:0 3%}
		.header .m_nav  i {color:#fff; font-size:20px}
		.header.roll .m_nav  i {color:#333}
        .header .top_call {margin-top:0; font-size:20px}

}


@media all and (max-width:900px) {
	.header {height:65px; }
	.header .top_call {font-size:19px; letter-spacing:0;  height:65px}
	.header .logo img {height:35px}

	#footer  .in  { flex-wrap:wrap}
	#footer  .in p {width:100%; font-size:15px; border:none; border-bottom:1px solid #ddd}
	#footer li  {padding:3px 10px; font-size:0.9em}
	#footer .in p span.tel  {font-size:20px}
	.right_fixed {display:none}
	.right_fixed.type2 {display:none}

}