@font-face {
  font-family: "Roboto"; 
  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
  font-family: "Roboto-Bold"; 
  src: url('../fonts/Roboto-Bold.ttf') format('truetype');
}
@font-face {
  font-family: "Roboto-Light"; 
  src: url('../fonts/Roboto-Light.ttf') format('truetype');
}
@font-face {
  font-family: "Roboto-Medium"; 
  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
}
html, body{width:100%;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    outline: none;    transition: all .1s;  font-family: "Roboto"; font-weight: normal;}
p,span,b,a{font-family: inherit;font-weight: inherit;}
ol, ul {    list-style: none;}
img{max-width: 100%;    vertical-align: top;}
a {      display: block;  text-decoration: unset;    color: inherit;    transition: color .1s, border-color .1s, opacity .1s, text-decoration-color .1s;}
@media only screen and (max-width: 768px) {
    .pc{display: none !important;}
}
@media only screen and (min-width: 769px) {
    .h5{display: none !important;}
    .inner{ width:8.333333333333334rem;display: flex;margin: 0 auto;}
}
.font-bold{font-family: "Roboto-Bold";font-weight: bold;}
.font-medium{font-weight: 500;    font-family: "Roboto-Medium";}
.font-light{    font-weight: 300;    font-family: "Roboto-Light";}
/*header*/
.header {    background-color: rgb(0, 0, 0, 0.702);    position: fixed;    left: 0;    top: 0;    width: 100%;    z-index: 199;}
.header_wrap {    height: 0.3125rem;    align-items: center;    justify-content: space-between;}
.logo {    height: 0.13541666666666666rem;    width: auto;    max-width: 100%;}
.navs {    font-size: 0.08333333333333333rem;    color: #ffffff;    display: flex;    margin-right: 0.15104166666666666rem;}
.header_right {    display: flex;}
.navs>li {      position: relative;  margin-right: 0.20833333333333334rem;    }
.navs>li:last-child {    margin-right: 0;}
.menuA1{ font-weight: 500;    font-family: "Roboto-Medium";  line-height: 0.3125rem;    position: relative;display: block;}
.menuA1:after {    position: absolute;    left: 0%;    margin-left: 0;    bottom: 0.0625rem;    content: "";    width: 100%;    height: 0.015625rem;    background: #00968f;    transform: scaleX(0);    transform-origin: right bottom;    transition: transform 0s;}
.navs>li:hover > .menuA1:after, .navs>li.active > .menuA1:after {    transform-origin: left bottom;    transform: scaleX(1);    transition: transform 0.5s;}
ul.menu { display:none;    transition: none;   position: absolute;    color: #fff;    background-color: rgb(0, 0, 0, 0.702);        width: 240%;    left: -70%;    text-align: center;    padding-bottom: 0.026041666666666668rem;}
.menu>li {    }
.menuA2 {    display: block;    font-size: 0.07291666666666667rem;    padding: 0.026041666666666668rem 0;}
.menuA2:hover,.menuA2.active{color:#00968f;}
.head_search {    display: flex;    align-items: center;}
.head_search_icon{width: 0.06770833333333333rem;height: auto;    cursor: pointer;}
.header-searchbox {
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    display: none;
}
.header-searchbox.show{display: flex;}
.searchbox-l {
    margin-right: 0.20833333333333334rem;
    border-radius: 0.078125rem;
    border: 1px solid #9b9b9b;
    display: flex;
    align-items: center;
    width: 2.2083333333333335rem;
    justify-content: space-between;
}
.search-input {
    background: transparent;
    border: 0;
    line-height: 0.15625rem;
    flex: 1;
    padding: 0 0.0625rem;
    font-size: 0.07291666666666667rem;
    color: #ffffff;
    outline: 0;
}
.search-button {
    width: 0.13020833333333334rem;
    height: 0.13020833333333334rem;
    flex-shrink: 0;
    margin-right: 0.0625rem;
    cursor: pointer;
    margin-top: 1px;
}
.search-searchimg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-closeimg {
    margin-right: 0.010416666666666666rem;
    width: 0.07291666666666667rem;
    height: auto;
    cursor: pointer;
}
@media only screen and (max-width: 768px) {
.header_wrap{
    height: 32px;
    padding: 0 11px;
    display: flex;
}
.logo{
    height: 14px;
}
.h5navs_icon{
    height: 14px;
}
.h5-navsboxback {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 200;
}
.h5-navsbox {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 50%;
    background: rgba(0, 0, 0, 0.5);
    padding-top: 1.325rem;
    padding-bottom: 1.325rem;
    backdrop-filter: blur(6px);
    overflow-y: auto;
    box-sizing: border-box;
    transition: background-color 0s,transform .1s;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 201;
}
.h5-navsbox.show{
    -webkit-transform: translateX(0);
    transform: translateX(0);   
}
.h5-navs-li {
    font-size: 0.525rem;
    line-height: 0.525rem;
    color: #ffffff;
    padding: 0.55rem 0.65rem;
    border-bottom: 2px solid #e1e1e1;
}
.h5-navs-li.active{
    background-color: #00958f;
}
.h5-navs-li>a{
    font-weight: 500;
    font-family: "Roboto-Medium";
}
.h5-searchbox {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.375rem 0 0.3rem;
    position: relative;
    margin-top: 1.625rem;
}
.h5-search-input {
    width: 100%;
    font-size: 0.325rem;
    color: #666666;
    padding: 0 1rem 0 0.25rem;
    border: 1px solid #9b9b9b;
    border-radius: 0.4rem;
    line-height: 0.8rem;
    outline: 0;
}
.h5-search-button {
    position: absolute;
    right: 0.575rem;
    top: 0.1rem;
    width: 0.65rem;
    height: 0.65rem;
}
.h5-search-searchimg{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
}
/*end_header*/
/*banner*/
.banner{max-width:100%;height: auto;    overflow: hidden;position: relative;}

/*end_banner*/
/*footer*/
.footer {
    width: 100%;
    overflow: hidden;
    background-color: #333333;
    padding: 0.3802083333333333rem 0 0 0;
}
.footer-box {
    width: 83.33333333333334%;
    margin: 0 auto;
}
.footer-navs {
    display: flex;
    flex-wrap: wrap;
}
.footer-navli {
    width: 1.1875rem;
}
.footer-navli:nth-child(1) {
    margin-right: 0.6822916666666666rem;
}
.footer-navli:nth-child(2) {
    margin-right: 0.5208333333333334rem;
}
.footer-navli:nth-child(3) {
    margin-right: 0.16666666666666666rem;
}
.footer-navli:nth-child(4) {
    margin-right: 0.3333333333333333rem;
}
.footer-nav-a1{
    font-size: 0.10416666666666667rem;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 0.10416666666666667rem;
    font-family: "Roboto-Medium";
    font-weight: 500;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    -moz-binding: url('ellipsis.xml#ellipsis');
    white-space: nowrap;
}
.footer-nav-a1:hover{
    color: #00968f;
}
.footer-nav-ul {
    display: flex;
    flex-direction: column;
    margin-top: 0.13541666666666666rem;
}
.footer-nav-a2 {
    font-size: 0.07291666666666667rem;
    line-height: 0.07291666666666667rem;
    color: #999999;
    margin-bottom: 0.10416666666666667rem;
    font-weight: 300;
    font-family: "Roboto-Light";
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    -moz-binding: url('ellipsis.xml#ellipsis');
    white-space: nowrap;
}
.footer-nav-a2:hover{
    color: #00968f;
}
.footer-nav-a2:last-child{
    margin-bottom: 0px;
}
.footer-contact {
    margin-top: 0.17708333333333334rem;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.footer-sharebox {
    width: 40%;
}
.footer-sharebox ul{
    display: flex;
    float: right;
    max-width: 100%;
    gap: 0.13541666666666666rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.footer-sharebox ul li{
    width:0.19791666666666666rem;
    height:0.19791666666666666rem;
}
.footer-sharebox ul li img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.footer-contactbox{
    width: 55%;
}
.footer-contact-title {
    font-size: 0.10416666666666667rem;
    color: #ffffff;
    line-height: 0.10416666666666667rem;
    font-family: "Roboto-Medium";
    font-weight: 500;
}
.footer-contact-con {
    font-size: 0.08333333333333333rem;
    line-height: 0.08333333333333333rem;
    color: #999999;
    margin-top: 0.13541666666666666rem;
    font-weight: 300;
    font-family: "Roboto-Light";
}
.footer-contact-con>p{
  margin-bottom: 0.10416666666666667rem;
}
.footer-contact-con>p:last-child{
  margin-bottom: 0;
}
.footer-outer {
    background: url(../img/footer.png) no-repeat;
    background-size: 100% 0.020833333333333332rem;
    background-position: top;
    font-size: 0.07291666666666667rem;
    color: #999999;
    width: 7.291666666666667rem;
    margin: 0 auto;
    text-align: center;
    padding: 0.11979166666666667rem 0;
    margin-top: 0.22395833333333334rem;
    font-weight: 300;
    font-family: "Roboto-Light";
}
@media only screen and (max-width: 768px) {
.footer{
    padding: 0.75rem 0 0 0;
}
.footer-box{
    width: 100%;
    padding: 0 2.5%;
    box-sizing: border-box;
}
.footer-navs{
    display: none;
}
.footer-contact{
    flex-direction: column;
    margin-top: 0rem;
}
.footer-sharebox{
    width: 100%;
}
.footer-sharebox ul{
    float: left;
    gap: 0.75rem;
}
.footer-sharebox ul li {
    width: 0.75rem;
    height: 0.75rem;
}
.footer-contactbox{
    width: 100%;
    margin-top: 0.75rem;
}
.footer-contact-title {
    font-size: 0.475rem;
    line-height: 0.475rem;
}
.footer-contact-con {
    font-size: 0.375rem;
    line-height: 0.675rem;
    margin-top: 0.3rem;
}
.footer-contact-con>p {
    margin-bottom: 0;
}
.footer-outer{
    padding: 0.35rem 0;
    margin-top: 0.35rem;
    font-size: 0.375rem;
    text-align: left;
    line-height: 0.675rem;
    width: 100%;
    background-size: 100% 0.05rem;
}
}
/*end-footer*/
/*fy*/
.fy {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: hidden;
}
.fy-page {
    padding: 0.015625rem 0.0625rem;
    font-size: 0.07291666666666667rem;
    line-height: 0.20833333333333334rem;
    border: 1px solid #dddddd;
    float: left;
    box-sizing: border-box;
    margin-right: 0.026041666666666668rem;
    border-radius: 0.010416666666666666rem;
    color: #666;
    font-weight: 300;
    font-family: "Roboto-Light";
}
a.fy-page:hover,a.fy-page.active{
    background:#20aec6;
    color:#fff;
}
@media only screen and (max-width: 768px) {
.fymorebuttom {
    margin-top: 0.425rem;
    width: 100%;
    text-align: center;
    border-radius: 0.125rem;
    background-color: #00958f;
    color: #ffffff;
    font-size: 0.375rem;
    line-height: 0.825rem;
}
}
/*end-fy*/