:root {
    /* 边框宽度 */
    --border-width: 2px;
    /* 折角直角边长度, 小型 */
    --bevel-length: 10px;
    /* 折角直角边长度，大型 */
    --bevel-length-2: 40px;
    /* 画5边形时，折角的内圈顶点的偏移量，根据边框宽度变化 */
    /* --border-offest: 1.24px; */
    --border-offest: 0.98px;


    /* 画三角边框内圈顶点的额外便宜量 */
    /* --border-offest-2: 3.94px; */
    --border-offest-2: 2.63px;

    --border-offest-3: 4.4px;

    --font-color: #ffffffc0;
    --border-color: #cac8c8ef;
    --bg-color: #122b54a9;
    --bg-color-2: #122b54e3;
    --select_color: #7dff5d96;
    /* --select_color: #23dad0a2; */

    /* --font-color: #221f1fc0;
    --border-color: #e5f58eef;
    --bg-color: #64899ea9;
    --bg-color-2: #34A997;
    --select_color: #F2EEA7a2; */
}






/***************** 边框基本属性 - start ******************/
/* 边框 */
.ff-border-bottom {
    width: 100%;
    height: 100%;
    background-color: var(--border-color);
	z-index: 1000px;
}

/* 背景 */
.ff-border-top {
    position: relative;
    color: var(--font-color);
    background-color: var(--bg-color);
	z-index: 1000px;
}

.ff-border-top img.ff-img {
    width: 16px;
    height: 16px;
    margin-bottom: 6px;
}

/* 三角样式 */
.ff-triangle {
    position: absolute;
    width: calc(var(--bevel-length-2) - var(--border-width));
    height: calc(var(--bevel-length-2) - var(--border-width));
}

/* 三角边框 */
.ff-triangle-border {
    width: 100%;
    height: 100%;
    background-color: var(--border-color);

    position: absolute;
    -webkit-clip-path:
        polygon(0 0, 0 calc(100% - var(--border-width) - 1px), var(--border-width) calc(100% - var(--border-width) - 1px),
            var(--border-width) calc(var(--border-width) + var(--border-offest-2)), calc(100% - var(--border-width) - var(--border-offest-2)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--border-width) - 1px), 0 calc(100% - var(--border-width) - 1px),
            0 100%, 100% 100%);
    clip-path:
        polygon(0 0, 0 calc(100% - var(--border-width) - 1px), var(--border-width) calc(100% - var(--border-width) - 1px),
            var(--border-width) calc(var(--border-width) + var(--border-offest-2)), calc(100% - var(--border-width) - var(--border-offest-2)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--border-width) - 1px), 0 calc(100% - var(--border-width) - 1px),
            0 100%, 100% 100%);
    /* bottom: 0px;
  left: 0px; */

    /* border-color: #122b54 transparent; */
    /* border-width: 0px 56px 56px 0px; */
    /* border-style: solid; */
}

/* 底部空余区域 */
.ff-footer {
    position: absolute;
    color: var(--font-color);
    width: calc(100% - var(--border-width) * 2);
    min-height: calc((var(--bevel-length-2) - var(--border-width)) * 1);
    /* background-color: brown; */
}

/*****************边框基本属性 - end **************************/







/***************** 内容区域样式 - start ******************/
/* 标题样式 */
.ff-title .ff-border-bottom {
    position: absolute;
    -webkit-clip-path:
        polygon(0 0,
            calc(100% - var(--border-width) - var(--border-offest-3)) 0%,
            calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
            calc(var(--border-width) + var(--border-offest-3)) var(--border-width),
            calc(6% + var(--border-width)) calc(100% - var(--border-width)),
            calc(8% - var(--border-width)) calc(100% - var(--border-width)),
            calc(9% - var(--border-width)) calc(84% - var(--border-width)),
            calc(91% + var(--border-width)) calc(84% - var(--border-width)),
            calc(92% + var(--border-width)) calc(100% - var(--border-width)),
            calc(94% - var(--border-width)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
            calc(100% - var(--border-width) - var(--border-offest-3)) 0,
            100% 0,
            94% 100%,
            92% 100%,
            91% 84%,
            9% 84%,
            8% 100%,
            6% 100%);
    clip-path:
        polygon(0 0,
            calc(100% - var(--border-width) - var(--border-offest-3)) 0%,
            calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
            calc(var(--border-width) + var(--border-offest-3)) var(--border-width),
            calc(6% + var(--border-width)) calc(100% - var(--border-width)),
            calc(8% - var(--border-width)) calc(100% - var(--border-width)),
            calc(9% - var(--border-width)) calc(84% - var(--border-width)),
            calc(91% + var(--border-width)) calc(84% - var(--border-width)),
            calc(92% + var(--border-width)) calc(100% - var(--border-width)),
            calc(94% - var(--border-width)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
            calc(100% - var(--border-width) - var(--border-offest-3)) 0,
            100% 0,
            94% 100%,
            92% 100%,
            91% 84%,
            9% 84%,
            8% 100%,
            6% 100%);
}

.ff-title .ff-border-top {
    padding: 8px 8px 12px 8px;
    -webkit-clip-path: polygon(calc(var(--border-offest-3) + var(--border-width)) var(--border-width),
            calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
            calc(94% - var(--border-width)) calc(100% - var(--border-width)),
            calc(92% + var(--border-width)) calc(100% - var(--border-width)),
            calc(91% + var(--border-width)) calc(84% - var(--border-width)),
            calc(9% - var(--border-width)) calc(84% - var(--border-width)),
            calc(8% - var(--border-width)) calc(100% - var(--border-width)),
            calc(6% + var(--border-width)) calc(100% - var(--border-width)));
    clip-path: polygon(calc(var(--border-offest-3) + var(--border-width)) var(--border-width),
            calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
            calc(94% - var(--border-width)) calc(100% - var(--border-width)),
            calc(92% + var(--border-width)) calc(100% - var(--border-width)),
            calc(91% + var(--border-width)) calc(84% - var(--border-width)),
            calc(9% - var(--border-width)) calc(84% - var(--border-width)),
            calc(8% - var(--border-width)) calc(100% - var(--border-width)),
            calc(6% + var(--border-width)) calc(100% - var(--border-width)));
}

/* 中等大小单侧内容 (默认右侧，左下角为折角样式)*/
.ff-content-medium .ff-border-bottom {
    position: absolute;
    -webkit-clip-path:
        polygon(0 0,
            calc(100% - 10px) 0%,
            calc(100% - 10px) var(--border-width),
            var(--border-width) var(--border-width),
            var(--border-width) calc(100% - var(--bevel-length-2) - var(--border-offest)),
            calc(var(--bevel-length-2) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - 10px) var(--border-width),
            calc(100% - 10px) 0%,
            100% 0%,
            100% 100%,
            var(--bevel-length-2) 100%,
            0 calc(100% - var(--bevel-length-2)));
    clip-path:
        polygon(0 0,
            calc(100% - 10px) 0%,
            calc(100% - 10px) var(--border-width),
            var(--border-width) var(--border-width),
            var(--border-width) calc(100% - var(--bevel-length-2) - var(--border-offest)),
            calc(var(--bevel-length-2) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - 10px) var(--border-width),
            calc(100% - 10px) 0%,
            100% 0%,
            100% 100%,
            var(--bevel-length-2) 100%,
            0 calc(100% - var(--bevel-length-2)));
}

.ff-content-medium .ff-border-top {
    padding: 8px 8px var(--bevel-length-2) 8px;
    -webkit-clip-path:
        polygon(var(--border-width) var(--border-width),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(var(--bevel-length-2) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length-2) - var(--border-offest)));
    clip-path:
        polygon(var(--border-width) var(--border-width),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(var(--bevel-length-2) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length-2) - var(--border-offest)));
}

/* 小型单侧内容 (默认右侧，左下角为折角样式)*/
.ff-content-small .ff-border-bottom {
    position: absolute;
    -webkit-clip-path:
        polygon(0 0,
            calc(100% - 10px) 0%,
            calc(100% - 10px) var(--border-width),
            var(--border-width) var(--border-width),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - 10px) var(--border-width),
            calc(100% - 10px) 0%,
            100% 0%,
            100% 100%,
            var(--bevel-length) 100%,
            0 calc(100% - var(--bevel-length)));
    clip-path:
        polygon(0 0,
            calc(100% - 10px) 0%,
            calc(100% - 10px) var(--border-width),
            var(--border-width) var(--border-width),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - 10px) var(--border-width),
            calc(100% - 10px) 0%,
            100% 0%,
            100% 100%,
            var(--bevel-length) 100%,
            0 calc(100% - var(--bevel-length)));
}

.ff-content-small .ff-border-top {
    padding: 6px 8px 6px 8px;
    -webkit-clip-path:
        polygon(var(--border-width) var(--border-width),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
    clip-path:
        polygon(var(--border-width) var(--border-width),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
}

/* 小型单侧内容 (右侧无边框)*/
.ff-content-small-borderless-r .ff-border-bottom {
    position: absolute;
    -webkit-clip-path:
        polygon(0 0,
            calc(100%) 0%,
            calc(100%) var(--border-width),
            var(--border-width) var(--border-width),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100%) calc(100% - var(--border-width)),
            100% 100%,
            var(--bevel-length) 100%,
            0 calc(100% - var(--bevel-length)));
    clip-path:
        polygon(0 0,
            calc(100%) 0%,
            calc(100%) var(--border-width),
            var(--border-width) var(--border-width),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100%) calc(100% - var(--border-width)),
            100% 100%,
            var(--bevel-length) 100%,
            0 calc(100% - var(--bevel-length)));
}

.ff-content-small-borderless-r .ff-border-top {
    padding: 6px 8px 6px 8px;
    -webkit-clip-path:
        polygon(var(--border-width) var(--border-width),
            calc(100%) var(--border-width),
            calc(100%) calc(100% - var(--border-width)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
    clip-path:
        polygon(var(--border-width) var(--border-width),
            calc(100%) var(--border-width),
            calc(100%) calc(100% - var(--border-width)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
}

/* 小型单侧内容 (顶部无边框)*/
.ff-content-small-borderless-t .ff-border-bottom {
    position: absolute;
    -webkit-clip-path:
        polygon(0 0,
            var(--border-width) 0,
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) 0,
            100% 0,
            100% 100%,
            var(--bevel-length) 100%,
            0 calc(100% - var(--bevel-length)));
    clip-path:
        polygon(0 0,
            var(--border-width) 0,
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) 0,
            100% 0,
            100% 100%,
            var(--bevel-length) 100%,
            0 calc(100% - var(--bevel-length)));
}

.ff-content-small-borderless-t .ff-border-top {
    padding: 6px 8px 6px 8px;
    -webkit-clip-path:
        polygon(var(--border-width) 0,
            calc(100% - var(--border-width)) 0,
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
    clip-path:
        polygon(var(--border-width) 0,
            calc(100% - var(--border-width)) 0,
            calc(100% - var(--border-width)) calc(100% - var(--border-width)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
}

/* 内容 */
.ff-content {
    position: relative;
}

/* .ff-content .ff-border-top {
  padding: 8px 8px var(--bevel-length-2) 8px;
} */

/********************* 居中内容 - start *******************/
.ff-content-middle-s .ff-border-bottom {
    position: absolute;
    -webkit-clip-path:
        polygon(0 0,
            calc(100% - 10px) 0%,
            calc(100% - 10px) var(--border-width),
            var(--border-width) var(--border-width),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100% - var(--bevel-length) - var(--border-offest)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - 10px) var(--border-width),
            calc(100% - 10px) 0%,
            100% 0%,
            100% calc(100% - var(--bevel-length)),
            calc(100% - var(--bevel-length)) calc(100%),
            var(--bevel-length) 100%,
            0 calc(100% - var(--bevel-length)));
    clip-path:
        polygon(0 0,
            calc(100% - 10px) 0%,
            calc(100% - 10px) var(--border-width),
            var(--border-width) var(--border-width),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100% - var(--bevel-length) - var(--border-offest)) calc(100% - var(--border-width)),
            calc(100% - var(--border-width)) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - 10px) var(--border-width),
            calc(100% - 10px) 0%,
            100% 0%,
            100% calc(100% - var(--bevel-length)),
            calc(100% - var(--bevel-length)) calc(100%),
            var(--bevel-length) 100%,
            0 calc(100% - var(--bevel-length)));
}

.ff-content-middle-s .ff-border-top {
    padding: 2px 6px;
    -webkit-clip-path:
        polygon(var(--border-width) var(--border-width),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - var(--border-width)) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(100% - var(--bevel-length) - var(--border-offest)) calc(100% - var(--border-width)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
    clip-path:
        polygon(var(--border-width) var(--border-width),
            calc(100% - var(--border-width)) var(--border-width),
            calc(100% - var(--border-width)) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(100% - var(--bevel-length) - var(--border-offest)) calc(100% - var(--border-width)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
}

/* 居中内容 - 上 */
.ff-content-up .ff-border-bottom {
    transform: none;
}

.ff-content-up .ff-border-top {
    transform: none;
}

/* 居中内容 - 下 */
.ff-content-down .ff-border-bottom {
    transform: rotateX(180deg);
}

.ff-content-down .ff-border-top {
    transform: rotateX(180deg);
}

.ff-content-down .ff-border-top .ff-border-content {
    transform: rotateX(180deg);
}

/********************* 居中内容 - end *******************/

/* 右侧内容 */
.ff-content-right .ff-border-bottom {
    transform: none;
}

.ff-content-right .ff-border-top {
    transform: none;
}

.ff-content-right .ff-triangle {
    bottom: 0px;
    left: 0px;
}

.ff-content-right .ff-triangle-border {
    transform: none;
}

.ff-content-right .ff-footer {
    bottom: var(--border-width);
    right: var(--border-width);
    padding-left: var(--bevel-length-2);
    padding-right: 4px;
}

/* 左侧内容 */
.ff-content-left .ff-border-bottom {
    transform: rotateY(180deg);
}

.ff-content-left .ff-border-top {
    transform: rotateY(180deg);
}

.ff-content-left .ff-border-top .ff-border-content {
    transform: rotateY(180deg);
}

.ff-content-left .ff-triangle {
    bottom: 0px;
    right: 0px;
}

.ff-content-left .ff-triangle-border {
    transform: rotateY(180deg);
}

.ff-content-left .ff-footer {
    bottom: var(--border-width);
    left: var(--border-width);
    padding-right: var(--bevel-length-2);
    padding-left: 4px;
}

/* 左上侧内容 */
.ff-content-top-left .ff-border-bottom {
    transform: rotateX(180deg);
}

.ff-content-top-left .ff-border-top {
    transform: rotateX(180deg);
}

.ff-content-top-left .ff-border-top .ff-border-content {
    transform: rotateX(180deg);
}

.ff-content-top-left .ff-triangle {
    top: 0px;
    left: 0px;
}

.ff-content-top-left .ff-triangle-border {
    transform: rotateY(180deg);
    transform: rotateX(180deg);
}

/* 右上侧内容 */
.ff-content-top-right .ff-border-bottom {
    transform: rotateZ(180deg);
}

.ff-content-top-right .ff-border-top {
    transform: rotateZ(180deg);
}

.ff-content-top-right .ff-border-top .ff-border-content {
    transform: rotateZ(180deg);
}

.ff-content-top-right .ff-triangle {
    top: 0px;
    right: 0px;
}

.ff-content-top-left .ff-triangle-border {
    transform: rotateZ(180deg);
}

/******************内容区域样式 - end *************************/






/***************** 按钮区域样式 - start ******************/
/* 按钮 */
.ff-toggle-btn {
    position: relative;
}

.ff-toggle-btn .ff-border-top {
    padding: 6px 6px 16px 6px;
    font-size: 16px;
    line-height: 16px;
    cursor: pointer;
}

.ff-toggle-btn .ff-border-top:hover {
    /* color: antiquewhite; */
    background-color: #115e5a5d;
}

/* 中等大小按钮(左侧按钮)  */
.ff-btn-medium .ff-border-bottom {
    position: absolute;
    -webkit-clip-path:
        polygon(0 0,
            calc(100%) 0%,
            calc(100%) var(--border-width),
            var(--border-width) var(--border-width),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100%) calc(100% - var(--border-width)),
            calc(100%) 100%,
            100% 100%,
            var(--bevel-length) 100%,
            0 calc(100% - var(--bevel-length)));
    clip-path:
        polygon(0 0,
            calc(100%) 0%,
            calc(100%) var(--border-width),
            var(--border-width) var(--border-width),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            calc(100%) calc(100% - var(--border-width)),
            calc(100%) 100%,
            100% 100%,
            var(--bevel-length) 100%,
            0 calc(100% - var(--bevel-length)));
}

.ff-btn-medium .ff-border-top {
    -webkit-clip-path:
        polygon(var(--border-width) var(--border-width),
            calc(100%) var(--border-width),
            calc(100%) calc(100% - var(--border-width)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
    clip-path:
        polygon(var(--border-width) var(--border-width),
            calc(100%) var(--border-width),
            calc(100%) calc(100% - var(--border-width)),
            calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
            var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
}

/* 左侧按钮 */
.ff-toggle-btn-left .ff-border-bottom {
    transform: none;
}

.ff-toggle-btn-left .ff-border-top {
    transform: none;
}

/* 右侧按钮 */
.ff-toggle-btn-right .ff-border-bottom {
    transform: rotateY(180deg);
}

.ff-toggle-btn-right .ff-border-top {
    transform: rotateY(180deg);
}

.ff-toggle-btn-right .ff-border-top .ff-border-content {
    transform: rotateY(180deg);
}

/* 下方按钮 */
.ff-toggle-btn-down .ff-border-bottom {
    transform: rotateZ(-90deg);
}

.ff-toggle-btn-down .ff-border-top {
    transform: rotateZ(-90deg);
}

.ff-toggle-btn-down .ff-border-top .ff-border-content {
    transform: rotateZ(90deg);
}
/*****************按钮区域样式 - end *************************/