@font-face {src: url("font/open-sans.ttf");font-family: "Open sans";}
@font-face {src: url("font/open-sans-bold.ttf");font-family: "Open sans bold";}

body {background: url("../image/background.png") repeat;font-size: 15px;font-family: "Open sans";margin: auto;}
a {text-decoration: none;}
b {font-family: "Open sans bold";}
li {list-style-type: none;}
ul {margin: 0;padding: 0;}
input,textarea {outline: none;}
input {line-height: 45px;padding: 0 10px;font-size: 15px;font-family: "Open sans bold";border-radius: 10px;border: none;outline: none;}
input[type=file]{display: none!important;}
textarea {font-size: 15px;font-family: "Open sans";resize: none;}
select {background: #ebeff5;color: #5f6874;height: 45px;line-height: 45px;padding: 0 15px;margin-bottom: 15px;font-size: 15px;font-family: 'Open sans bold';border-radius: 7px;border: none;outline: none;cursor: pointer;}
form label{background: #ebeff5;color: #6c7f9b;width: 100%;line-height: 45px;margin-bottom: 15px;font-size: 15px;font-family: 'Open sans bold';text-align: center;border: 1px solid transparent;border-radius: 7px;display: inline-block;cursor: pointer;}
form .progressbar {background: #ebeff5;width: 150px;height: 4px;margin: auto auto 15px;border-radius: 4px;overflow: hidden;}
form .progressbar .width {background: #6172c7;width: 0;height: 4px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;}
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-thumb {background: #6172c7;border-radius: 6px;}
.fixed {overflow: hidden;}
.message {color: #878787;width: 100%;line-height: 45px;padding: 0 10px;text-align: center;font-family: Open sans bold;position: fixed;z-index: 2;top: -46px;left: 0;right: 0;transition: .5s;cursor: pointer;margin: auto;}
.message.red {background: #efefef;border-bottom: 1px solid #e5e5e5;}
.message.green {background: #6172c7;color: #ffffff;}
.message.active {top: 0;}
.send {line-height: 40px;font-size: 14px;font-family: Open sans bold;cursor: pointer;transition: .2s;}
.wrapper {transition: .3s;}
.wrapper.active {background: #00000073;width: 100%;height: 100vh;position: fixed;top: 0;left: 0;z-index: 1;cursor: pointer;}
.dialog {background: white;border-radius: 15px;overflow: hidden;position: fixed;top: 50%;left: 50%;z-index: 2;box-shadow: 0 0 15px #0000004d;transform: translate(-50%, -50%) scale(0.98);opacity: 0;visibility: hidden;transition: .3s;}
.dialog.active {transform: translate(-50%, -50%) scale(1);opacity: 1;visibility: visible;}
.dialog .title {background: #f9f9f9;color: #7b7b7b;line-height: 50px;font-size: 16px;font-family: 'Open sans bold';text-align: center;cursor: default;}
.dialog .title .name {}
.dialog .title .close {background-image: url("../image/icon/action/close.png");background-size: cover;width: 30px;height: 30px;position: absolute;top: 10px;right: 8px;cursor: pointer;}
.dialog .msg {color: #6b6b6b;padding: 15px;font-family: 'Open sans bold';text-align: center;cursor: default;}
.dialog .buttons {border-top: 1px solid #f9f9f9;display: flex;}
.dialog .buttons .button {color: #414141;line-height: 45px;font-family: 'Open sans bold';text-align: center;flex: 1;cursor: pointer;}
.dialog .buttons .button.cancel {}
.dialog .buttons .button.ok {}
.dialog form {padding: 15px;display: flex;flex-direction: column;}
.dialog form input {background: #ebeff5;color: #5f6874;line-height: 50px;padding: 0 15px;margin-bottom: 15px;font-family: 'Open sans bold';border-radius: 7px;}
.dialog form textarea {background: #ebeff5;color: #5f6874;height: 150px;padding: 15px;margin-bottom: 15px;font-size: 15px;font-family: 'Open sans bold';border-radius: 7px;border: none;overflow-y: scroll;outline: none;}
.dialog form .send {background: #6172c7;color: white;line-height: 52px;text-align: center;border-radius: 7px;}
.player {visibility: hidden;opacity: 0;transition: .3s;}
.player.active {visibility: visible;opacity: 1;}
.player .close {}
.player .previous,.player .next{background-size: cover;width: 50px;height: 100px;top: 50%;z-index: 1;transform: translateY(-50%);opacity: .3;cursor: pointer;}
.player .previous{background-image: url("../image/icon/previous.png");}
.player .next{background-image: url("../image/icon/next.png");}
.player .content{}
.player .content video{}
.player .content form {padding: 15px;display: flex;flex-direction: column;align-self: flex-start;flex-grow: 1;}
.player .content form input {line-height: 50px;padding: 0 15px;margin-bottom: 15px;font-family: 'Open sans bold';border-radius: 7px;}
.player .content form textarea {height: 250px;line-height: 24px;padding: 15px;margin-bottom: 15px;font-size: 15px;font-family: 'Open sans bold';border-radius: 7px;border: none;overflow-y: scroll;outline: none;}
.player .content form label{color: #888888;}
.player .content form .send {background: #6172c7;color: white;line-height: 52px;text-align: center;border-radius: 7px;}
.player .content .text{color: #c9c9c9;line-height: 23px;cursor: default;}
.player .content .delete{color: #8d8d8d;line-height: 41px;margin-top: 5px;font-size: 14px;font-family: Open sans bold;text-align: center;cursor: pointer;}

/* 404 */
.page.not-found {width: 100%;height: 100vh;font-family: 'Open sans bold';display: flex;flex-direction: column;align-items: center;justify-content: center;}
.page.not-found .code {color: #486ba1;}
.page.not-found .text {color: #486ba1;}

/* Home */
.page.home {}
.page.home form {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;justify-content: center;}
.page.home form input {}
.page.home form .send {background: #414141;color: white;width: 100px;line-height: 45px;margin-left: 10px;text-align: center;border-radius: 10px;}
.page.home .wallpaper {background-size: cover;width: 100%;height: 100vh;position: fixed;top: 0;left: 0;transition: 3s;display: none;}
.page.home .wallpaper.hidden {opacity: 0;}
.page.home .center {margin: auto;position: relative;}
.page.home .center .version {color: #4c73af;margin-bottom: 20px;font-size: 18px;font-family: 'Open sans bold';text-align: center;cursor: default;}
.page.home .center .version a {color: white;}
.page.home .center .progressbars {display: flex;position: relative;}
.page.home .center .progressbars .progressbar {background: #6b90c9;height: 40px;border-radius: 10px;position: relative;overflow: hidden;}
.page.home .center .progressbars .progressbar .width {background: linear-gradient(1deg, #3465d5, #3586ff);width: 100px;height: 40px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;transition: .2s;}
.page.home .center .progressbars .progressbar .name {color: white;text-shadow: 0 0 30px #ffffffcf;font-family: 'Open sans bold';position: absolute;top: 10px;left: 15px;cursor: default;}
.page.home .center .progressbars .progressbar .percent {color: white;text-shadow: 0 0 30px #ffffffcf;font-family: 'Open sans bold';position: absolute;top: 10px;right: 15px;cursor: default;}
.page.home .center .shadow {margin-top: 20px;box-shadow: 0 5px 15px #010a1836;border-radius: 15px;overflow: hidden;}
.page.home .center .tabs {background: #f9f9f9;border-top-left-radius: 15px;border-top-right-radius: 15px;display: flex;}
.page.home .center .tabs .tab {color: #7b7b7b;line-height: 50px;font-family: 'Open sans bold';text-align: center;cursor: pointer;}
.page.home .center .tabs .tab.active {color: #6172c7;}
.page.home .center .tab-block {background: #FFFFFF;border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;display: none;}
.page.home .center .tab-block .list .item:nth-of-type(1) {margin-top: inherit!important;}
.page.home .center .tab-block.one {display: block;}
.page.home .center .tab-block.one .title {color: #6172c7;padding-top: 15px;font-family: 'Open sans bold';text-align: center;box-sizing: border-box;cursor: default;}
.page.home .center .tab-block.one .note {padding: 15px 15px 0 15px;line-height: 22px;font-size: 14px;cursor: default;}
.page.home .center .tab-block.one .list {padding: 15px;}
.page.home .center .tab-block.one .list .item {background: #ebeff5;color: #75859d;padding: 12px;margin-top: 15px;font-size: 14px;font-family: 'Open sans bold';border-radius: 7px;cursor: default;}
.page.home .center .tab-block.one .list .item.active {background: #cadbf3;}
.page.home .center .tab-block.one .list .item.cursor {display: flex;justify-content: space-between;cursor: pointer;}
.page.home .center .tab-block.one .list .item .date {}
.page.home .center .tab-block.one .list .item .arrow {background-image: url("../image/icon/arrow.png");background-size: cover;width: 20px;height: 20px;}
.page.home .center .tab-block.one .list .item .arrow.active {transform: rotate(180deg);}
.page.home .center .tab-block.one .list .sub {margin-top: 15px;margin-left: 10px;margin-right: 10px;border-radius: 7px;overflow: hidden;display: none;}
.page.home .center .tab-block.one .list .sub .sub-item {background: #adccf9;padding: 12px;font-size: 14px;font-family: 'Open sans bold';display: flex;cursor: default;}
.page.home .center .tab-block.one .list .sub .sub-item .time {color: #5d7ba5;margin-right: 3px;}
.page.home .center .tab-block.one .list .sub .sub-item .text {color: #5d7ba5;}
.page.home .center .tab-block.two {}
.page.home .center .tab-block.two .list {padding: 15px;}
.page.home .center .tab-block.two .list .item {background: #ebeff5;padding: 15px;margin-top: 15px;font-size: 14px;font-family: 'Open sans bold';border-radius: 7px;cursor: default;}
.page.home .center .tab-block.two .list .item .year {color: #6172c7;font-size: 20px;text-align: center;}
.page.home .center .tab-block.two .list .item .text {background: #d9e0eb;color: #75859d;padding: 10px 15px;margin-top: 15px;font-size: 14px;border-radius: 7px;}
.page.home .center .tab-block.two .list .item .progressbar {background: #c7cdd7;height: 40px;margin-top: 15px;border-radius: 10px;position: relative;overflow: hidden;}
.page.home .center .tab-block.two .list .item .progressbar .width {background: linear-gradient(1deg, #618ed7, #4679cb);width: 0;height: 40px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;transition: .2s;}
.page.home .center .tab-block.two .list .item .progressbar .name {color: white;text-shadow: 0 0 30px #ffffffcf;font-family: 'Open sans bold';position: absolute;top: 10px;left: 15px;}
.page.home .center .tab-block.two .list .item .progressbar .percent {color: white;text-shadow: 0 0 30px #ffffffcf;font-family: 'Open sans bold';position: absolute;top: 10px;right: 15px;}
.page.home .center .tab-block.three {}
.page.home .center .tab-block.three .list {padding: 15px;}
.page.home .center .tab-block.three .list .item {background: #ebeff5;padding: 15px;margin-top: 15px;font-size: 14px;font-family: 'Open sans bold';border-radius: 7px;cursor: default;}
.page.home .center .tab-block.three .list .item .name {color: #6172c7;font-size: 16px;}
.page.home .center .tab-block.three .list .item .text {color: #75859d;margin-top: 3px;font-size: 14px;}
.page.home .center .tab-block.four {}
.page.home .center .tab-block.four .list {padding: 15px;}
.page.home .center .tab-block.four .list .item {background: #ebeff5;padding: 15px;margin-top: 15px;font-size: 14px;font-family: 'Open sans bold';border-radius: 7px;cursor: default;}
.page.home .center .tab-block.four .list .item .name {color: #6172c7;font-size: 16px;}
.page.home .center .tab-block.four .list .item .text {color: #75859d;margin-top: 3px;font-size: 14px;}
.page.home .center .tab-block.five {}
.page.home .center .tab-block.five .note {padding: 15px 15px 0 15px;line-height: 22px;font-size: 14px;cursor: default;}
.page.home .center .tab-block.five .list {padding-bottom: 15px;display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));}
.page.home .center .tab-block.five .list .item {background-size: cover;margin-top: 15px!important;margin-left: 10px;margin-right: 10px;border-radius: 7px;cursor: pointer;}
.page.home .center .tab-block.five .list .item .video {display: none;}
.page.home .center .tab-block.five .list .item .text {display: none;}

/* Panel */
.page.panel {background: url("../image/background.png") repeat;}
.page.panel form {display: flex;flex-direction: column;}
.page.panel form input {background: #ebeff5;color: #5f6874;line-height: 50px;padding: 0 15px;margin-bottom: 15px;font-family: 'Open sans bold';border-radius: 7px;}
.page.panel form textarea {background: #ebeff5;color: #5f6874;height: 150px;padding: 15px;margin-bottom: 15px;font-size: 15px;font-family: 'Open sans bold';border-radius: 7px;border: none;outline: none;}
.page.panel form .send {background: #6172c7;color: white;line-height: 52px;text-align: center;border-radius: 7px;}
.page.panel .center {margin: auto;position: relative;}
.page.panel .center .version {color: #4c73af;margin-bottom: 20px;font-size: 18px;font-family: 'Open sans bold';text-align: center;cursor: default;}
.page.panel .center .version a {color: white;}
.page.panel .center .progressbar.home {background: #ffffff;height: 40px;border-radius: 10px;overflow: hidden;position: relative;}
.page.panel .center .progressbar.home .width {background: linear-gradient(90deg, #696de5, #7990ff);width: 100px;height: 40px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;transition: .5s;}
.page.panel .center .progressbar.home .percent {color: #788efd;text-shadow: 0 0 30px #ffffffcf;font-family: 'Open sans bold';position: absolute;top: 10px;right: 15px;cursor: default;}
.page.panel .center .shadow {margin-top: 20px;box-shadow: 0 5px 15px #010a1836;border-radius: 15px;overflow: hidden;}
.page.panel .center .slider {background: white;padding: 15px;border-bottom: 1px solid #ebeff5;display: none;}
.page.panel .center .top {background: #f9f9f9;display: flex;align-items: center;}
.page.panel .center .top .tabs {padding-left: 5px;display: flex;flex: 1;}
.page.panel .center .top .tabs .tab {color: #7b7b7b;line-height: 50px;padding: 0 10px;font-family: 'Open sans bold';text-align: center;cursor: pointer;}
.page.panel .center .top .tabs .tab.active {color: #6172c7;}
.page.panel .center .top .icon.add {background: url("../image/icon/action/add.png");background-size: cover;width: 30px;height: 30px;margin-right: 5px;transition: .2s;cursor: pointer;}
.page.panel .center .top .icon.add.active {transform: rotate(45deg);}
.page.panel .center .tab-block {background: #ffffff;padding: 15px;display: none;}
.page.panel .center .tab-block .list .header:nth-of-type(1),.page.panel .center .tab-block .list .item:nth-of-type(1) {margin-top: inherit!important;}
.page.panel .center .tab-block .list .item .panel {color: #808997;margin-top: 10px;font-size: 13px;font-family: 'Open sans bold';display: flex;justify-content: center;}
.page.panel .center .tab-block .list .item .panel .edit {margin-right: 10px;cursor: pointer;}
.page.panel .center .tab-block .list .item .panel .delete {cursor: pointer;}
.page.panel .center .tab-block.one {display: block;}
.page.panel .center .tab-block.one .list {}
.page.panel .center .tab-block.one .list .item {background: #ebeff5;padding: 15px 15px 10px 15px;margin-top: 15px;font-family: 'Open sans bold';border-radius: 7px;cursor: default;}
.page.panel .center .tab-block.one .list .item .date {color: #6172c7;margin-right: 7px;}
.page.panel .center .tab-block.one .list .item .text {color: #75859d;margin-top: 3px;}
.page.panel .center .tab-block.two {}
.page.panel .center .tab-block.two .list {}
.page.panel .center .tab-block.two .list .item {background: #ebeff5;padding: 15px 15px 10px 15px;margin-top: 15px;font-family: 'Open sans bold';border-radius: 7px;cursor: pointer;}
.page.panel .center .tab-block.two .list .item .date {color: #6172c7;margin-bottom: 3px;}
.page.panel .center .tab-block.two .list .item .name {color: #75859d;}
.page.panel .center .tab-block.three {}
.page.panel .center .tab-block.three .list {}
.page.panel .center .tab-block.three .list .item {background: #ebeff5;padding: 15px 15px 10px 15px;margin-top: 15px;font-size: 14px;font-family: 'Open sans bold';border-radius: 7px;cursor: default;}
.page.panel .center .tab-block.three .list .item .year {color: #6172c7;font-size: 20px;text-align: center;}
.page.panel .center .tab-block.three .list .item .text {background: #d9e0eb;color: #75859d;padding: 10px 15px;margin-top: 15px;font-size: 14px;border-radius: 7px;}
.page.panel .center .tab-block.three .list .item .progressbar {background: #c7cdd7;height: 40px;margin-top: 15px;border-radius: 10px;position: relative;overflow: hidden;}
.page.panel .center .tab-block.three .list .item .progressbar .width {background: linear-gradient(1deg, #618ed7, #4679cb);width: 0;height: 40px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;transition: .2s;}
.page.panel .center .tab-block.three .list .item .progressbar .name {color: white;text-shadow: 0 0 30px #ffffffcf;font-family: 'Open sans bold';position: absolute;top: 10px;left: 15px;}
.page.panel .center .tab-block.three .list .item .progressbar .percent {color: white;text-shadow: 0 0 30px #ffffffcf;font-family: 'Open sans bold';position: absolute;top: 10px;right: 15px;}
.page.panel .center .tab-block.four {}
.page.panel .center .tab-block.four .list {}
.page.panel .center .tab-block.four .list .header {color: #6172c7;margin-top: 15px;font-size: 16px;font-family: 'Open sans bold';text-align: center;cursor: default;}
.page.panel .center .tab-block.four .list .item {background: #ebeff5;color: #75859d;padding: 15px;margin-top: 15px;font-family: 'Open sans bold';border-radius: 7px;cursor: default;}
.page.panel .center .tab-block.five {}
.page.panel .center .tab-block.five .list {}
.page.panel .center .tab-block.five .list .item {background: #ebeff5;padding: 15px 15px 10px 15px;margin-top: 15px;font-size: 14px;font-family: 'Open sans bold';border-radius: 7px;cursor: pointer;}
.page.panel .center .tab-block.five .list .item .name {color: #6172c7;font-size: 16px;}
.page.panel .center .tab-block.five .list .item .password {color: #75859d;margin-top: 3px;font-size: 14px;}
.page.panel .center .tab-block.six {}
.page.panel .center .tab-block.six .list {}
.page.panel .center .tab-block.six .list .item {background: #ebeff5;padding: 15px 15px 10px 15px;margin-top: 15px;font-size: 14px;font-family: 'Open sans bold';border-radius: 7px;cursor: pointer;}
.page.panel .center .tab-block.six .list .item .name {color: #6172c7;font-size: 16px;}
.page.panel .center .tab-block.six .list .item .text {color: #75859d;margin-top: 3px;font-size: 14px;}
.page.panel .center .tab-block.seven {}
.page.panel .center .tab-block.seven .list {}
.page.panel .center .tab-block.seven .list .item {background: #ebeff5;padding: 15px 15px 10px 15px;margin-top: 15px;font-size: 14px;font-family: 'Open sans bold';border-radius: 7px;cursor: pointer;}
.page.panel .center .tab-block.seven .list .item .name {color: #6172c7;font-size: 16px;}
.page.panel .center .tab-block.seven .list .item .text {color: #75859d;margin-top: 3px;font-size: 14px;}
.page.panel .center .tab-block.eight {}
.page.panel .center .tab-block.eight .list {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));}
.page.panel .center .tab-block.eight .list .item {background-size: cover;margin-top: 15px;margin-left: 10px;margin-right: 10px;border-radius: 7px;cursor: pointer;}
.page.panel .center .tab-block.eight .list .item:nth-of-type(2), .page.panel .center .tab-block.eight .list .item:nth-of-type(3){margin-top: inherit!important;}
.page.panel .center .tab-block.eight .list .item .video {display: none;}
.page.panel .center .tab-block.eight .list .item .text {display: none;}

/* Mobile */
@media (max-width: 768px) {
    .dialog {width: calc(100% - 40px);}
    .player {background: #000000;width: 100%;height: 100vh;overflow-y: scroll;position: fixed;left: 0;top: 0;z-index: 1;visibility: hidden;opacity: 0;transition: .3s;}
    .player::-webkit-scrollbar {display: none;}
    .player .close {background: #000000d1;color: #ffffff82;line-height: 35px;padding: 0 15px;font-size: 13px;font-family: 'Open sans bold';border-radius: 15px;position: absolute;top: 15px;right: 15px;z-index: 2;}
    .player .previous,.player .next{position: absolute;}
    .player .previous{left: 5px;}
    .player .next{right: 5px;}
    .player .content video {width: 100%;}
    .player .content form input {background: #222222;color: #cccccc;}
    .player .content form textarea {background: #222222;color: #cccccc;}
    .player .content form label{background: #222222;}
    .player .content form .progressbar{background: #222222;}
    .player .content .text{padding: 0 15px 15px 15px;}
    .container {padding: 20px;}

    .page.not-found .code {font-size: 70px;}
    .page.not-found .text {font-size: 25px;}

    .page.home .center .progressbars {flex-direction: column;}
    .page.home .center .progressbars .progressbar:first-of-type {margin-bottom: 15px;}
    .page.home .center .tabs {overflow-x: scroll;}
    .page.home .center .tabs::-webkit-scrollbar {display: none;}
    .page.home .center .tabs .tab {padding: 0 15px;}
    .page.home .center .tab-block.five .list .item {height: 100px;}

    .page.panel .center .top .tabs {overflow-x: scroll;}
    .page.panel .center .top .tabs::-webkit-scrollbar {display: none;}
    .page.panel .center .tab-block.eight .list .item {height: 100px;}
}

/* Pc */
@media (min-width: 768px) {
    .dialog {width: 400px;}
    .player .close{display: none;}
    .player .previous,.player .next{position: fixed;}
    .player .previous{left: 30px;}
    .player .next{right: 30px;}
    .player .content{background: #232323;border-radius: 10px;overflow: hidden;position: fixed;top: 50%;left: 50%;z-index: 1;transform: translate(-50%, -50%);display: flex;}
    .player .content video{height: calc(100vh - 60px);}
    .player .content form{width: 350px;}
    .player .content form input {background: #0e0e0e;color: #5f6874;}
    .player .content form textarea {background: #0e0e0e;color: #cfcfcf;}
    .player .content form label{background: #0e0e0e;}
    .player .content form .progressbar{background: #0e0e0e;}
    .player .content .text {width: 400px;padding: 15px;}
    .container {width: 560px;margin: 20px auto auto;}

    .page.not-found .code {font-size: 100px;}
    .page.not-found .text {font-size: 30px;}

    .page.home .center .progressbars {justify-content: space-between;}
    .page.home .center .progressbars .progressbar {width: 250px;}
    .page.home .center .tabs {justify-content: center;}
    .page.home .center .tabs .tab {padding: 0 10px;}
    .page.home .center .tab-block.five .list .item {height: 150px;}

    .page.panel .center .top .tabs {overflow-x: hidden;overflow-y: scroll;}
    .page.panel .center .tab-block.eight .list .item {height: 150px;}
}