@charset "utf-8";

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 549174 */
  src: url('//at.alicdn.com/t/c/font_549174_3m57pi94p06.woff2?t=1762795109141') format('woff2'),
       url('//at.alicdn.com/t/c/font_549174_3m57pi94p06.woff?t=1762795109141') format('woff'),
       url('//at.alicdn.com/t/c/font_549174_3m57pi94p06.ttf?t=1762795109141') format('truetype');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-size: 18px;
    font-family: "iconfont", "Kai", "Kaiti", "楷体";
    padding: 1em;
    background-color: white;
}

button, input, optgroup, select, textarea {
    font-family: "Kai", "Kaiti", "楷体";
}

a {
    color: black;
}

p {
    margin: 8px 0
}

#back-title {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 38vmin;
    line-height: 1;
    opacity: 0.06;
}

#page-title {
    transition-duration: .5s;
    z-index: 10;
    position: relative;
}

#page-title:hover #page-title-more {
    display: block
}

#page-title h1{
    font-weight: 100;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    line-height: 1.5;
}

#page-title-more {
    display: none;
    font-size: 12px
}

#gua-title {
    position: fixed;
    bottom: 0.5em;
    line-height: 1.5;
    transition-duration: .5s
}

#gua-title #gua-number:after {
    content: "."
}

#gua-title #gua-detail {
    display: inline-block;
    font-size: 1rem;
    transition-duration: .5s
}

#gua {
    width: 300px;
    height: 360px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#gua .yao-split {
    margin-bottom: 40px
}

#gua .yao {
    height: 40px;
    background-color: black;
    cursor: pointer;
    transition-duration: 1s;
    position: relative;
}

#gua .yao.yao-mg {
    margin: 20px 0
}

#gua .yao .yinyang {
    transition-duration: 1s;
    position: relative;
    left: 50%;
    margin-left: -6px;
    width: 20px;
    height: 40px
}

#gua .yao .yang {
    background-color: black
}

#gua .yao .yin {
    background-color: white;
}

#gua .yao-detail {
    display: none;
    position: absolute;
    width: calc(50vw - 150px);
    top: 0;
    left: 100%;
    padding: 0 1em;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#gua .yao:hover .yao-detail{
    display: block;
}

.zhujie:after {
    content: "注解 >";
    font-size: 10px;
    vertical-align: super;
    background: #666;
    color: white;
    padding: 2px 4px 2px 4px;
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    white-space: nowrap;
}

@media (max-width: 768px) {
    #gua .yao-detail {
        display: block!important;
        position: absolute;
        width: 300px;
        text-align: center;
        top: 100%;
        left: 0;
        font-size: 12px;
        line-height: 20px;
        padding: 0;
    }
    #page-title{
        text-align: center;
    }
    #page-title h1 {
        flex-direction: column;
        align-items: center;
    }
    #gua-title{
        width: 100%;
        text-align: center;
    }
}