*{
    margin: 0; padding: 0; box-sizing: border-box;
    background-color: rgb(255, 255, 255); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%; min-width:600px;}
#backToTop{
    position: fixed; bottom: 50px; right: 30px; width: 50px; height: 50px;
    border: none; border-radius: 50%; background-color: rgba(166, 166, 166, 0.8); cursor: pointer;
    color: fff; font-size: 1rem; display: none; z-index: 999;
}#backToTop:hover{ background-color: #606060; color: white; font-weight: bold; }

._banner{
    position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100px; min-width:500px;
    background-color: rgb(255, 255, 255);
    
    display:flex; align-items: center; justify-content: center; font-size: 24px;
    font-weight: bold; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,0.1);

    transition:height 0.3s ease;
}
/** MENU **/
._menu,#butMenu{ width:60px; height: 50px;}
._banner ._menu{ position:absolute; left:2%;top:30%;}/*scrollbar-width:none;*/
._banner ._menu_span{display: block; margin-bottom: 3px; width: 60px; height: 10px; border-top:7px black solid;}
._menuP_li{background:transparent;}

#butMenu{position:absolute; display:block; border: none; cursor: pointer; }
#butMenu:hover{ background-color:rgb(255, 255, 255);font-size: 13px; outline:2px #ddd dashed; outline-offset: 2px; }
#butMenu,._menu,._menu span,._menu_span{ background-color:rgba(255, 255, 255, 0.1);}

#butMenu,._menu-ul{ box-shadow:0 1px 5px 1px rgba(0,0,0,0.1);}

._menu-ul{
    width:15rem; height:88vh; background-color: rgba(166, 166, 166, 0.8); border-radius: 1px;

    position:absolute; padding: 1rem 0;
    top:105%; left:-100%;
    font-size: 1.2rem;
    
    /* overflow-y: auto;  */
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    list-style: none;
     text-align: center; 
    opacity: 1; 
    visibility: visible; 
    transition:all 0.3s ease;
    
}._menu-ul.uuc{opacity: 0; visibility: hidden;
    transform: translateX(-15rem);}

._menu-ul li{ background:transparent;}

._menu-ul li a{ display:block; transition:transform 0.3s ease; padding:1rem; text-decoration-line:none; color: rgb(86, 86, 86);}

._menu-ul li a:hover,._active{cursor:pointer; color:white; transform: translateX(10px); background-color: rgb(144, 144, 144);}
/** CENTER **/
._center,._center p,._logo_char,.logo-a{ background:transparent;}

._center{height:80px;}
._center .logo-a{ display: flex; text-decoration-line: none; color: #606060; }

._center ._logo_img{
    width: 80px; height: 80px; background-image: url('../images/XH-logo-04.png');
    background-size: 80px 80px; background-repeat: no-repeat; border-radius: 50%;
}
._center ._logo_char{width: 110px;padding-left: 2px; align-content: center;}
._logo_char{font-size: 18px;}

/**tag-SH-LSNG**/._tag-sh-lang,._share,.btn-elemSns,.btn-elemSns img,._share span{ background:transparent;}
._tag-sh-lang{position:absolute; height:32px; display:flex; gap:30px; right:30px; align-items:center; justify-content:end; }
/** share **/
._share{ display:flex; gap:10px; height:30px; width:120px;
}/* align-items:center; justify-content:end;*/
@media screen and (max-width:700px){
    ._share{position:relative; width:30px; height:30px; gap:2px;}
    ._share:hover{ height:120px; width:30px; margin:90px 0 0 -1px;}
    .btn-elemSns,._share span{ position: absolute; }
    ._share span{ height:30px; width:30px; z-index:4; }
    .btn-elemSns.fb{ top:1px; right:1px; z-index:3; }
    .btn-elemSns.ins{ top:-1px; right:0; z-index:2; }
    .btn-elemSns.line{ top:-2px; right:-1px; z-index:1; }
    ._share:hover span:hover{z-index:0; }
    ._share:hover .btn-elemSns.fb{top:0; right:0; z-index:3; }
    ._share:hover .btn-elemSns.ins{top:40px; right:0; z-index:2; }
    ._share:hover .btn-elemSns.line{top:80px; right:0; z-index:1; }
}
.btn-elemSns{display:block; width: 28px; height:28px;}
._share .btn-elemSns img{width: 28px; height: 28px;}
.btn-elemSns,._share a:hover{ border-radius: 2px; }
._share a:hover{outline:solid 2px #ddd;}
/** language **/
._language{height: 1.5rem; width: 90px; font-size: 15px; display:block;
    padding:2px ; outline: solid 2px #ddd; }
._language span,._language a{ cursor: pointer; display: block; background: transparent; text-decoration-line: none; color: #868686;padding: 2px 5px;margin-top: -2px; }
.lang-change{position: absolute; top: 90%; right: 0; border-radius: 1px; text-align: right; width: 8rem;
    opacity: 0; visibility: hidden; transition:all 0.3s ease,visility 0s linear 0.3s;
}
._language span:hover,._language a:hover{font-size: 16px;}._language a:hover{outline: solid 2px black;}
._language:hover .lang-change{transition:all 0.3s ease; opacity: 1; visibility: visible;}
/** shrink **/
._center,._logo_img,._logo_char,._menu,._menu_span{transition:all 0.3s ease;}
._banner.shrink{ height: 70px; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 10px rgba(0,0,0,0.2);}
._banner.shrink ._menu,._banner.shrink #butMenu{ width:50px; height: 40px;}
._banner.shrink ._menu_span{ width:50px;  height: 7px; border-width: 5px;}
._banner.shrink ._center{height:60px; margin-top:0; }
._banner.shrink ._center ._logo_img{ width: 60px;height: 60px; background-size: 60px 60px; }
/** footer **/
#foot-e{ text-align: center;}
/**/
._letterhead{ background-color:#ddd; display:flex; width:100%; flex-wrap:wrap; gap:10px; justify-content:center;}
._foot-left,._foot-right{ min-width:100px; }

._foot-left{text-align: left;}._foot-right{text-align: right;}
._foot-left li,._foot-right li{list-style: none; padding: 2px;}
._foot_lititle,._foot_p_n{padding: 2px 0; line-height: 1.8; }
._foot_p_n{text-indent: 2em; font-size: 14px; font-weight: 300; }
/**/
._foot-logo{height: 70px; padding-top: 5px;}
._foot-og-img{
    width: 60px; height: 60px; background-image: url('../images/XH-logo-03.png');
    background-size: 60px 60px; background-repeat: no-repeat; border-radius: 50%; margin:0 -3px 0 1px; }

._foot-logo ._logo_char{ padding: 0; margin: 0;}
._foot-og-img,._foot-logo ._logo_char{ display: inline-block; vertical-align: middle; }
._foot-logo ._logo_char p{ text-align: left; }
._foot-left,._foot-right,._foot-left li,._foot-right li,._foot_lititle,._foot_p_n,._foot-logo,._foot-logo ._logo_char p{ background: transparent; }
/**/
._icp{color: #868686; font-size:14px; font-weight: 200; padding: 5px 0; margin-bottom: 20px; }
._sepa{height:30px; padding:2px 8%; font-size:16px; text-align: left; background-color:#555;}._sepa h3{ font-weight:400; color:white; text-align: center; background: transparent;}