@charset "utf-8";
:root{ 
    --color01: #103758;
    --color02: #3499dd;
    --color03: #ef3990;
    --transition01: 0.2s ease;
    --radius01: 10px;
    --border01: 1px solid #ddd;
    --globalGap: 30px;
}

::-webkit-scrollbar { width: 6px; border-radius:var(--radius01);}
::-webkit-scrollbar-track { background-color:rgba(0,0,0,0.4);}
::-webkit-scrollbar-thumb { background:var(--color03);border-radius:var(--radius01);}

html {font-family:'Noto Sans KR','돋움','dotum', Arial, sans-serif;color:#333;font-size:16px;}
/* z-index */
nav {z-index:210;}
.navOpen {z-index:200;}
.search {z-index:100;}

/* color */
.red {color:var(--color03);}

/* copy */
code {font-family: inherit;font-weight:100;background:#333;color:#fff;display:block;border-radius:var(--radius01);padding:10px;max-height:500px;overflow:auto;}
code::-webkit-scrollbar { height: 10px;}
code::-webkit-scrollbar-thumb { background:var(--color02);}
pre {position:relative;margin:10px 0;}
pre .copy {position:absolute;top:8px;right:8px;background:var(--color02);color:#fff;border-radius:6px;overflow:hidden;padding:2px;}
.copyPop {position:fixed;bottom:0;left:0;width:100%;background:rgba(52, 153, 221, 0.8);color:#fff;padding:10px;text-align:center;transform:translateY(110%);transition:0.5s ease;}
.copyPop.active {transform:none;}

/* btn */
.btn {background:var(--color02);color:#fff;padding:5px 10px;border-width:2px;border-color:var(--color02);}

#wrap {display:flex;height:calc(var(--vh) * 100);transition:var(--transition01);}

/* nav */
nav {background:var(--color01);flex:0 0 0;color:#fff;transition:var(--transition01);display:flex;flex-direction:column;overflow:hidden;}
.navActive nav {flex:0 0 300px;}
.navOpen {position:absolute;top:0;left:0;height:53px;background:var(--color01);color:#fff;}
.navClose {display:none;position:absolute;top:0;left:0;height:53px;background:rgba(0,0,0,0.4);}
.navActive .navClose {display:block;}
nav.react {background:#464D5C;}
nav.docker {background:#2063A1;}
nav.flutter {background:#1D5A9D;}
nav h1 {padding:10px 0;font-size:22px;text-align:center;}
nav #installButton {float:right;margin:5px 10px 0 0;background:transparent;font-size:0.6em;border-radius:10px;border:none;}
nav ul {flex:auto;display:flex;flex-direction:column;overflow:hidden;}
nav .depth01 > li {flex:0 0 auto;}
nav .depth01 > li.open {flex:0 1 auto;overflow:hidden;}
nav .depth01 > li > button {width:100%;height:40px;background:rgba(0,0,0,0.4); border:none;margin-top:2px;padding:5px 5px 7px 5px;text-align:left;}
nav .depth01 > li > button::after {content:'expand_more';font-family:'Material Icons';vertical-align:middle;float:right;transition:var(--transition01)}
nav .depth01 > li.open > button {background:var(--color02);}
nav .depth01 > li.open > button::after {transform:rotate(180deg);}
nav .depth02 {display:none;padding:5px 5px 10px 5px;height:calc(100% - 40px);overflow:auto;}
nav .depth01 > li:first-child .depth02 {display:block;}
nav .depth02 button {background:transparent;border:none;position:relative;padding-left:15px;text-align:left;transition:var(--transition01);}
nav .depth02 button::before {content:'-';margin-right:5px;position:absolute;left:0;}
nav .depth02 button:hover {padding-left:25px;color:#fff000;}

/* table */
.conTable {position:relative;overflow:auto;width:100%;}
.conTable::-webkit-scrollbar { height: 10px;}
.conTable::-webkit-scrollbar-thumb { background:var(--color02);}
.conTable table {border-top:2px solid var(--fontColor02);width:100%;margin-top:10px;table-layout:auto;}
.conTable th {background:#fafbff;}
.conTable :is(th, td) {border:1px solid #d8dee5;padding:15px;}
/* .conTable :is(th, td) {border:1px solid #d8dee5;padding:15px;white-space:nowrap;} */
.conTable tfoot th {font-weight:500;padding:30px 20px;}
.conTable tfoot th .title {font-size:1.2em;margin-top:20px;font-weight:bold;}
.conTable .info {background:#f4fbf1;text-align:center;margin:-15px -15px 10px -15px;padding:10px;}
.conTable::before {content:'';width:250px;max-width:100%;height:30px;background:url(../images/tableScroll.png);z-index:10;position:absolute;top:20px;left:50%;transform:translateX(-50%);animation: tableScroll 2s ease 2;opacity:0;display:none;}
@keyframes tableScroll {
    0% {opacity:0.3;transform:translateX(calc(-50% - 20px));}
    25% {opacity:1;}
    50% {opacity:0.3;transform:translateX(calc(-50% + 20px));}
    75% {opacity:1;}
    100% {opacity:0.3;transform:translateX(calc(-50% - 20px));}
}

/* main */
main {flex:auto;background:#eee;position:relative;overflow:auto;}
main .search {position:sticky;top:0;left:0;padding:20px;}
main .search::before,
main .search::after {content:'';width:100%;height:20px;position:absolute;left:0;}
main .search::before {top:0;background: #eee;}
main .search::after {bottom:0;background: linear-gradient(180deg, #eee 0%, transparent);}
main .search input {width:100%;height:40px;padding:5px;text-align:center;border-radius:var(--radius01);border:var(--border01);}
main .search input::placeholder {color:#aaa;font-weight:100;}
main .link {color: var(--color03);}
main .link::after {content:'select_window';font-family:'Material Icons';vertical-align:middle;margin-left:5px;}
main .link:hover {color:var(--color02);}
main .download {color: var(--color03);}
main .download::after {content:'download';font-family:'Material Icons';vertical-align:middle;margin-left:5px;}
main .download:hover {color:var(--color02);}
main section {position:relative;margin:0 20px 20px 20px;padding:20px;background:#fff;border-radius:var(--radius01);border:var(--border01);transition:var(--transition01);}
main section:hover {border:1px solid var(--color02);}
main section.active {border:1px solid var(--color03);outline:1px solid var(--color03);}
main section.active::before {content:'chevron_right';font-family: 'Material Icons';color:var(--color03);position:absolute;top:10px;left:-20px;font-size:2em;animation: sectionAni01 0.5s infinite ease alternate;}
@keyframes sectionAni01 {
    0% {left:-32px}
    100% {left:-22px}
}
section h2 {color:var(--color02);font-size:22px;font-weight:bold;}
section h3 {color:#aaa;font-size:16px;margin-top:5px;margin-bottom:20px;}
section h4 {color:#000;font-size:18px;font-weight:bold;margin:20px 0 10px 0;}
section h4::before {content:'nearby';font-family:'Material IconsO';vertical-align:middle;margin-right:5px;font-size:0.875em;}

ul.list li {text-indent:-15px;padding-left:15px;}
ul.list li::before {content:'ㆍ';color:var(--color02);font-weight:bold;}
.noIcon {text-indent: 0;padding-left: 0;}
.noIcon::before {display:none;}




@media all and (max-width: 768px) {
    .navActive nav {flex: 0 0 200px;}
}