/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

.wrap {
    grid-template-columns: 450px 450px 450px;
    grid-template-rows:
        108px /* header */
        45px /* nav */
        33px /* realtime keyword */
        108px /* sub header */
        159px /* position */
        90px /* premium */
        90px /* bigdata */
        90px /* bigdata */
        60px /* bigdata */
        90px /* kospi */
        90px /* kosdaq */
        90px /* lab */
        90px /* line */
        90px /* line */
        auto;

        grid-template-areas:
		"header   header         header        "
        "search   nav            nav           "
        "position keyword        keyword       "
        "position indexcontainer indexcontainer"
        "position indexcontainer indexcontainer"
        "member   indexcontainer indexcontainer"
        "bigdata  indexcontainer indexcontainer"
        "bigdata  indexcontainer indexcontainer"
        "bigdata  indexcontainer indexcontainer"
        "kospi    indexcontainer indexcontainer"
        "kosdaq   indexcontainer indexcontainer"
        "lab      indexcontainer indexcontainer"
        "line     indexcontainer indexcontainer"
        "reports      indexcontainer indexcontainer"
        ".        indexcontainer indexcontainer";
}

.indexcontainer {grid-area: indexcontainer;}
.keyword {grid-area: keyword;}

.keyword2 {grid-area: keyword2;}



/* Main Local */

@media screen and (max-width: 1200px) {
    .wrap {
        grid-template-columns: 450px 450px;
        grid-template-rows:
            108px /* header */
            45px /* nav */
            45px /* postion search */
            264px /* postion  bigdata */
            90px /* premium  bigdata */
            90px /* kospi kosdaq */
            90px /* lab line */
            33px /* realtime keyword */
            33px /* realtime keyword */
            auto;

            grid-template-areas:
            "header         header        "
            "nav            nav           "
            "position       search        "
            "position       bigdata       "
            "member         bigdata       "
            "kospi          kosdaq        "
            "lab            line          "
            "keyword        keyword       "
            "keyword2        keyword2       "
            "indexcontainer indexcontainer";
    }
}

/* List NAV */
[class^=select] div {opacity: 0;}
#stocklist-slide01:checked ~ ul .select01 div {opacity: 1;}
#stocklist-slide02:checked ~ ul .select02 div {opacity: 1;}
#stocklist-slide03:checked ~ ul .select03 div {opacity: 1;}
#stocklist-slide01:checked ~ ul .select01 {font-weight: bold; color: var(--base);}
#stocklist-slide02:checked ~ ul .select02 {font-weight: bold; color: var(--base);}
#stocklist-slide03:checked ~ ul .select03 {font-weight: bold; color: var(--base);}
#stocklist-slide01:checked ~ div ul {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
#stocklist-slide02:checked ~ div ul {-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);}
#stocklist-slide03:checked ~ div ul {-webkit-transform: translateX(-200%);-ms-transform: translateX(-200%);transform: translateX(-200%);}

		
		.up {color:#FF7272}
		.down {color:#51B9FF}