.article-main-container{display:flex;flex-direction:column;width:100%;align-items:center;margin:5px;background-color:#000;border-left:2px solid hsla(0,0%,100%,.8)}.article-main-container section{margin:15px}.article-main-container div{margin:10px}.article-main-container .main-section{display:flex;flex-direction:column;row-gap:10px;width:calc(100% - 30px);background-color:#282828;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 1px 0 hsla(0,0%,100%,.7)}.article-main-container .main-section h1{margin:10px;font-size:3vh;color:#ffa97a}.article-main-container .main-section .note-box{box-shadow:0 0 1px 3px rgba(33,33,246,.2);background-color:#000070;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:5px;border-left:3px solid #b4b4b4}.article-main-container .main-section .note-box p{font-style:italic;font-weight:500;border-left:3px solid #b4b4b4;margin:15px;font-size:2vh}.article-main-container .main-section .illustrate-box{display:flex;flex-direction:column;row-gap:5px}.article-main-container .main-section .illustrate-box p{margin:5px;font-size:2vh}.article-main-container .main-section .illustrate-box .inner-box{display:grid;grid-template-columns:30% 70%;grid-column-gap:3px;column-gap:3px;align-items:flex-start}@media(max-width:768px){.article-main-container .main-section .illustrate-box .inner-box{display:flex;flex-direction:column}}.article-main-container .main-section .code-box{display:flex;flex-direction:column}.article-main-container .main-section .code-box .title,.article-main-container .main-section .code-box .title p{display:flex;flex-direction:row;flex-wrap:wrap;column-gap:3px}.article-main-container .main-section .code-box .title p{font-size:2vh}.article-main-container .main-section .code-box .title small{align-self:center;text-align:center;font-size:2vh}.article-main-container .main-section .code-box .code-main{box-shadow:0 0 1px 1px hsla(0,0%,100%,.2);background-color:transparent;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.article-main-container .main-section .code-box .code-main .code-title{display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-bottom:1px solid hsla(0,0%,100%,.2)}.article-main-container .main-section .code-box .code-main .code-title p{display:flex;flex-direction:row;column-gap:3px;flex-wrap:wrap;margin:5px;font-size:1.8vh}.article-main-container .main-section .code-box .code-main pre{margin:5px}.article-main-container .main-section .code-box .code-main pre code{font-size:1.5vh;display:block;width:100%;overflow:auto}.article-main-container .main-section .image-box{display:flex;width:calc(100% - 20px);align-items:center;justify-content:center}.article-main-container .main-section .image-box img{width:100%;object-fit:contain}.article-main-container .main-section .mark-text{display:flex;flex-direction:row;column-gap:3px;width:100%;height:100%;align-items:center;justify-content:center;flex-wrap:wrap;background-color:#505050}@media(max-width:992px){.article-main-container{border-left:none}}.react-article-container{display:flex;flex-direction:row;width:100%;background-color:#141414}.react-article-container .article-container{display:flex;width:70%;align-items:center;justify-content:center}@media(max-width:992px){.react-article-container{flex-direction:column}.react-article-container .article-container{width:100%}}.article-navigate-container{row-gap:10px;width:100%;background-color:#282828}.article-navigate-container,.article-navigate-container .title{display:flex;flex-direction:column;align-items:center;justify-content:center}.article-navigate-container .title{width:80%;background-color:#000070;border-radius:15px}.article-navigate-container .title p{color:#fff;font-size:2vh;font-weight:700;font-style:italic;margin:10px}.article-navigate-container .navigate-btn-box{display:flex;flex-direction:row;column-gap:20px;width:80%}.article-navigate-container .navigate-btn-box button{width:80%;height:4vh;font-size:2vh;border-radius:25px;background-color:#3232c8;border:0;box-shadow:0 0 2px 2px hsla(0,0%,100%,.2);cursor:pointer}.article-navigate-container .navigate-btn-box button:hover{background-color:#5050dc}.layout-container{display:flex;flex-direction:column;width:30%;margin:5px;background-color:#141414}.layout-container .normal-container{display:flex;flex-direction:column;row-gap:1px}.layout-container .normal-container .back-to-article{display:flex;flex-direction:row;column-gap:2px;width:100%;height:5vh;background-color:#369;box-shadow:0 0 5px #fff;align-items:center;justify-content:flex-start}.layout-container .normal-container .back-to-article button{width:4vh;height:4vh;font-size:2vh;border-radius:50%;border:0;cursor:pointer}.layout-container .normal-container .back-to-article button:hover{background-color:#699;color:#f60}.layout-container .normal-container .back-to-article label{font-size:2vh;font-weight:700;font-style:italic}.layout-container .normal-container .nav-box-container{display:flex;flex-direction:column;box-shadow:0 0 2px 1px #dcdcdc}.layout-container .normal-container .nav-box-container .main-title{display:flex;width:100%;height:5vh;align-items:center;justify-content:center;background-color:#666;border:1px solid hsla(0,0%,100%,.3);cursor:pointer}.layout-container .normal-container .nav-box-container .main-title label{font-size:3vh;font-weight:400;font-style:italic;color:#fff;cursor:pointer}.layout-container .normal-container .nav-box-container .main-title:focus{background-color:#e82929}.layout-container .normal-container .nav-box-container .main-title:hover label{color:#f60}.layout-container .normal-container .nav-box-container .child-nav-container{display:flex;flex-direction:column;row-gap:1px;width:100%;min-height:4vh;align-items:center}.layout-container .normal-container .nav-box-container .child-nav-container .nav-box{display:flex;flex-direction:row;min-height:4vh;width:calc(100% - 5px);background-color:#141414;box-shadow:0 0 5px 1px #dcdcdc;align-items:center;justify-content:flex-end;overflow:hidden}.layout-container .normal-container .nav-box-container .child-nav-container .nav-box a{margin-right:15px;font-size:2vh;font-weight:400;overflow:hidden;color:#fff}.layout-container .normal-container .nav-box-container .child-nav-container .nav-box a:hover{color:#f60}.layout-container .article-toggle-container{visibility:hidden}@media(max-width:992px){.layout-container{width:calc(100% - 10px);position:relative;height:auto}.layout-container .normal-container{height:0;visibility:hidden}.layout-container .article-toggle-container{display:flex;flex-direction:column;width:100%;height:100%;z-index:1;visibility:visible}.layout-container .toggle-btn-box{display:flex;flex-direction:column;row-gap:3px;min-width:10vw;height:100px;margin-bottom:10px;visibility:visible}.layout-container .toggle-btn-box label{display:flex;min-width:10vw;height:50px;font-size:2vh;align-items:center;justify-content:flex-start;font-weight:700;font-style:italic}.layout-container .toggle-btn-box button{display:flex;width:15vw;height:50px;align-items:center;justify-content:center;background-color:#699;box-shadow:0 0 5px #dcdcdc;border:0}.layout-container .toggle-btn-box button:hover button,.layout-container .toggle-btn-box button:hover label,.layout-container .toggle-btn-box:hover button,.layout-container .toggle-btn-box:hover label{color:#deb887}.layout-container .toggle-back-to{min-width:10vw;height:50px;visibility:visible}.layout-container .toggle-back-to button{display:flex;min-width:10vw;height:50px;background-color:#369;box-shadow:0 0 5px #fff;border:0;font-size:5vh;align-items:center;justify-content:center}.layout-container .toggle-list{display:flex;flex-direction:column;width:100%;height:100%;position:relative;visibility:visible}.layout-container .toggle-list .nav-box-container{width:100%;visibility:visible}.layout-container .toggle-list .nav-box-container .main-title{display:flex;width:100%;height:5vh;align-items:center;justify-content:center;background-color:#666;border:1px solid hsla(0,0%,100%,.3);cursor:pointer}.layout-container .toggle-list .nav-box-container .main-title label{font-size:3vh;font-weight:400;font-style:italic;color:#fff;cursor:pointer}.layout-container .toggle-list .nav-box-container .main-title:focus{background-color:#e82929}.layout-container .toggle-list .nav-box-container .main-title:hover label{color:#f60}.layout-container .toggle-list .nav-box-container .child-nav-container{display:flex;flex-direction:column;row-gap:1px;width:100%;min-height:4vh;align-items:center}.layout-container .toggle-list .nav-box-container .child-nav-container .nav-box{display:flex;flex-direction:row;min-height:4vh;width:calc(100% - 5px);background-color:#141414;box-shadow:0 0 5px 1px #dcdcdc;align-items:center;justify-content:flex-end;overflow:hidden}.layout-container .toggle-list .nav-box-container .child-nav-container .nav-box a{margin-right:15px;font-size:2vh;font-weight:400;overflow:hidden;color:#fff}.layout-container .toggle-list .nav-box-container .child-nav-container .nav-box a:hover{color:#f60}}