@font-face 
    font-family: 思源宋體SemiBold
    src: url('../素材/NotoSerifSC-SemiBold.otf')

body 
    font-family: 思源宋體SemiBold
    line-height: 1.5
    margin: 0px
    padding: 0px
    -webkit-user-select: none
    color: #fff
    overflow: hidden
    background-color: #fff
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee)
    background-size: 24px 24px
    background-position: 0px 0px, 12px 12px

div 
    margin: 0px
    padding: 0px

#總畫面 
    position: relative
    
#視頻
    position: absolute
    z-index: 999
    display: None
    
#adv畫面 
    width: 100%
    height: 100%
    position: relative
    margin: 0
    overflow: hidden
    #覆蓋
        width: 100%
        height: 100%
        position: absolute
        background-size: cover
        z-index: 99
    #選項 
        position: absolute
        width: 60%
        height: 60%
        left: 20%
        top: 20%
        font-size: 27px
        z-index: 20
        display: None
    #主畫面 
        width: 100%
        height: 100%
        #bg, #cg, #html疊加
            width: 100%
            height: 100%
            position: absolute
            background-size: cover
        #bg
            z-index: -10
        #cg 
            z-index: -1
        #立繪 
            position: absolute
            top: 0px
            left: 0px
            z-index: -2
            &>div 
                position: absolute
                transform-origin: 0% 0%
        #對話框
            width: 1000px
            height: 240px
            color: #fff
            font-size: 24px
            margin: 0 auto
            text-shadow: 0px 0px 3px #000, 0px 0px 3px #000
            position: absolute
            top: 528px
            left: 185px
            #名字框 
                opacity: 0
                transition: opacity 0.3s, width 0.3s
                position: absolute
                top: 0px
                left: 80px
            #話語框
                position: absolute
                top: 25%
                z-index: 10
                width: 100%
                height: 100%
            #話語
                white-space: pre-line
            &[對話類型=旁白] #話語
                // text-indent: 2em each-line
                --幹你娘老子就是要每行都縮進: 2
            &[對話類型=對話] #話語
                &:before
                    content: '「'
                    display: block
                    height: 100%
                    float: left
                &>span:nth-last-child(1):after
                    content: '」'
            #名字框背景 
                position: absolute
                top: 0px
                left: 0px
                z-index: -1
                width: 100%
                height: 100%
            #話語框背景 
                position: absolute
                top: 0px
                left: 0px
                z-index: -1
                width: 100%
                height: 100%

.舊淡出 
    width: 100%
    height: 100%
    position: absolute
    background-size: cover

#工具欄
    right: 0px
    bottom: 0px
    padding: 0px
    margin: 5px
    position: absolute
    z-index: 10
    #工具容器.自動收起 
        opacity: 0
        transition: opacity 4s
        &:hover 
            opacity: 1
            transition: opacity 0.5s

#墊底
    position: absolute
    top: 0px
    left: 0px
    width: 100%
    height: 100%
    background: #000
    z-index: -999

#提示 
    position: absolute
    left: 0px
    top: 0px
    padding: 20px
    background: rgba(0, 0, 0, 0.65)
    z-index: 999
    width: 200px
    display: none