/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}

/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}

q:before, q:after { content: ''; }

/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

/* common */

@font-face {
    font-family: "Assistant-Regular";
    src: url("https://haptic-video-shanghai.oss-cn-shanghai.aliyuncs.com/static/Assistant-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Assistant";
    src: url("https://haptic-video-shanghai.oss-cn-shanghai.aliyuncs.com/static/Assistant-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Assistant-Bold";
    src: url("https://haptic-video-shanghai.oss-cn-shanghai.aliyuncs.com/static/Assistant-Bold.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Righteous";
    src: url("https://haptic-video-shanghai.oss-cn-shanghai.aliyuncs.com/static/Righteous-Regular.ttf") format("truetype");
    font-weight: 400;
}

/* ban ios drag */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}


.Header {
    position: fixed;
    width: 100vw;
    height: 89px;
    background-color: white;
    display: flex;
    direction: rtl;
    z-index: 10;
}

.headerItem {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100px;
    color: black;
    margin-right: 67px;
    font-family: Righteous;
    font-size: 25px;
}

.main_content {
    height: calc(100vh - 89px);
    padding-top: 89px;
    background-color: #F5DB21;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main_texts {
    /* position: relative;
    left: -15vw; */
}

.title {
    font-family: Assistant;
    font-size: 70px;
    font-weight: 500;
    line-height: 131.52%;
    letter-spacing: 0.03em;
}

.detail {
    width: min(1096px, 70vw);
    height: 303px;
    opacity: 1;

    font-size: 46px;
    font-weight: normal;
    line-height: 131.52%;
    letter-spacing: 0.02em;
    font-weight: 900;
}

.HeaderIcon {
    top: 16px;
    left: 50px;
    position: absolute;
    width: 195px;
    height: 54px;
}

.icpBox{
    position: fixed;
    bottom: 0px;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}

.icpBox a{
    color: #000;
    unicode-bidi: embed;
    cursor: pointer;
    text-decoration: underline;
}

.btnBox{
    display: none;
}
.menuListBox{
    /* display: none； */ 
    display: flex;
    flex-direction: column; /* 使元素竖排 */
    align-items: left; /* 元素水平居中 */
    position: fixed;
    height: 40vh;
    padding: 15vh 35px;
    top: -70vh;
    background-color: #F5DB21;
    z-index: 2;
    width: 100%;
}
.menuListBoxActive a:nth-child(1) {
    animation:  0.72s ease  itemMove;
    position: relative;
}
.menuListBoxActive a:nth-child(2) { 
    animation:  0.6s ease  itemMove;
    position: relative;
}

@keyframes itemMove{
    0% {
        top: -400px;
    }
    60% {
        top: 0;
    }
}

.menuListBox.menuListBoxActive{
    animation:  0.6s ease  cardMove;
    top: 10vh;
}
@keyframes cardMove {
    0% {
        top: -100vh;
    }
    40% {
       top: 12vh;
    }
    100% {
    top: 10vh;
    }
  }
.menuListBox a{
    color: #000;
    height: 30%;
    unicode-bidi: embed;
    cursor: pointer;
    text-decoration: none;
    font-family: Righteous;
    font-size: 35px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
@media screen and (max-width: 756px) {
    .Header {
        flex-direction: column;
        height: calc(30vw * 31 / 112 + 20px) ;
    }

    .btnBox{
        height: calc(30vw * 31 / 112 + 20px) ;
        display: flex;
        align-items: center;
        justify-content: right;
        width:30vw;
    }
    .btnBox img{
        height: 50%;
        margin-right: 20px;
    }
    .Header a{
        display: none;
    } 

    .headerItem {
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .HeaderIcon {
        top: 10px;
        left: 13px;
        width:30vw;
        height: calc(30vw * 31 / 112);
    }
    .main_texts{
        position: fixed;
        top: calc(50vh - 65px);
    }

    .title {
        margin: 27px;
        font-size: 28px;
        text-align: left;
    }

    .detail {
        font-size: 30px;
    }
    
}