@charset "UTF-8";



/* DRAM page -------------------------------------------------------------------------------- */

.DRAM_Cate { padding: 35px 0 35px 0; margin: 0 0 0 0;}
.DRAM_Content { padding: 0px 0 50px 0; display: block; }



.DRAM_Header {
    background-color: rgba(255, 255, 255, 1);
    height: 300px !important;
}
.DRAM_Header .RWD-Structure { height: 100%;}

@media screen and ( min-width:1440px) {
    .DRAM_page h1 { font-size: 2.6em; font-weight: 400; }
}
@media screen and (max-width:1156px) {
    .DRAM_Cate { padding: 20px 0 35px 0;}
}
@media screen and (max-width:768px) {
    .DRAM_Cate { padding: 20px 0 35px 0;}
    .DRAM_Header {  height: 150px !important; }
    /* .mobileFixed_Content { height: 100vh; overflow: hidden;} */
}

.RichContent {
    width: 100%;
}
    .RichContent div {
        text-align: center;
        padding-bottom: 20px;
    }
        .RichContent .RichContentTxt {
            text-align: left;
            min-height: 180px;
        }
        .RichContent .RichContentImg{
            max-height: 100px;
            padding-bottom: 12px;
            line-height: 100px;
            vertical-align: middle;
        }
        .RichContent .RichContentImg img{
            height: 100%;
            max-width: 50%;
        }

/* DRAM page END -------------------------------------------------------------------------- */



.PD_Intro { padding: 40px 0;}


/* FT_Tech */
.FT_Tech .strCont {
    display: flex;
    flex-wrap: wrap;
    padding: 25px 0 50px 0;
}

.FT_Tech .item { width: 48%; border: solid 2px whitesmoke; text-align: center; border-radius: 8px; margin: 0 1% 1% 0 !important; }
.FT_Tech .item:hover { border: solid 2px #EEE; box-shadow: rgba(0,0,0,0.085) 0 0 10px 0; }
.FT_Tech .item .ICON { 
    width: 40px; height: 40px; line-height: 30px; 
    background-color: whitesmoke;
    text-align: center; 
    margin: 15px auto 8px auto; 
    display: inline-block; 
    color: #CCC;
    border-radius: 99em;
}
.FT_Tech .item .ICON img { max-width: 100%;}
.FT_Tech .item p { 
    text-align: center; 
    margin: 0 0 0 0; 
    padding: 0 10px 10px 10px; 
    line-height: 1.2; 
    color: #666;
}
    @media screen and (min-width:550px) {
        .FT_Tech .item { width: 31.3333%;}
    }

    @media screen and (min-width:1024px) {
        .FT_Tech .item { width: 150px; margin: 0 15px 15px 0 !important; }
        .FT_Tech .item .ICON { 
            width: 70px; height: 70px; line-height: 60px; 
            margin: 15px auto 8px auto; 
        }
    }

    @media screen and (min-width:1280px) {
        .FT_Tech .item { width: 150px; }
        .FT_Tech .item .ICON { 
            width: 100px; height: 100px; line-height: 80px; 
        }
    }


/* DRAM Header */
.DRAM_Header { overflow: hidden;}
.DRAM_Header .Content { padding: 40px 0;}
.DRAM_Header h4, .DRAM_Header h1 { margin: 0 0 0 0; padding: 0 0 0 0; font-weight: 400; }
.DRAM_Header h1 { margin: 8px 0;}
.DRAM_Header h1, .DRAM_Header h4{ color: #FFF; }

#DRAM_Catelog { 
    background-color: rgba(240, 241, 243, 0.5); 
    padding-bottom: 50px; 
    min-height: 40vh; 
}
.DRAM_Header { 
    background-position: center; 
    background-size: cover; 
}
.DRAM_Header .Content { 
    height: 100%; 
    display: inline-flex; 
    display: -webkit-inline-flex; 
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    flex-wrap: wrap; 
    align-content: center; 
    -webkit-align-content: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
}

#DRAM_Catelog .DRAM_Cate div.Content { 
    display: inline-flex; 
    display: -webkit-inline-flex;
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    flex-wrap: wrap; 
    justify-content: center; 
    justify-items: center; 
    width: 100%;
}

#DRAM_Catelog .DRAM_Cate div.Item { 
    padding: 10px; 
    position: relative; 
    width: 100%; 
}

#DRAM_Catelog .DRAM_Cate div.Item a { color: #333; text-decoration: none; }
#DRAM_Catelog .DRAM_Cate div.Item .Inner { 
    padding: 10px; 
    background-color: #FFF; 
    height: 100%; 
    cursor: pointer; 
}
#DRAM_Catelog .DRAM_Cate div.Item.active .Inner {
    box-shadow: rgba(0,0,0,0.03) 0 0 10px 0;
}

#DRAM_Catelog .DRAM_Cate div.Item:hover .Inner { 
    box-shadow: rgba(0,0,0,0.05) 0 0 10px 0; 
    transition: linear 0.2s; 
}

#DRAM_Catelog .DRAM_Cate div.Item .IMG { text-align: center; }
#DRAM_Catelog .DRAM_Cate div.Item .IMG img { max-width: 100%; max-height: 200px; }


#DRAM_Catelog .DRAM_Cate div.Item .Descp { padding: 0 15px; }
#DRAM_Catelog .DRAM_Cate div.Item .Descp h3 { border-bottom: solid 0 #EEE; padding: 0 0 15px 0; }
#DRAM_Catelog .DRAM_Cate div.Item .Descp p { color:#666; font-size: 15px; display: none; }



    @media screen and ( min-width:768px) {
        
        #DRAM_Catelog .DRAM_Cate div.dram_CateItem_X1 div.Item { width:50% }
        #DRAM_Catelog .DRAM_Cate div.dram_CateItem_X2 div.Item { width:35% }
        #DRAM_Catelog .DRAM_Cate div.dram_CateItem_X3 div.Item,
        #DRAM_Catelog .DRAM_Cate div.dram_CateItem_X6 div.Item { width:33.33333% }
        #DRAM_Catelog .DRAM_Cate div.dram_CateItem_X4 div.Item { width:25% }
        #DRAM_Catelog .DRAM_Cate div.dram_CateItem_X5 div.Item { width:33.33333% }
        #DRAM_Catelog .DRAM_Cate div.dram_CateItem_X5 div.Item:nth-child(4),
        #DRAM_Catelog .DRAM_Cate div.dram_CateItem_X5 div.Item:nth-child(5) { width: 50%; }
        #DRAM_Catelog .DRAM_Cate div.Item:first-child { padding-left: 0;}
        #DRAM_Catelog .DRAM_Cate div.Item:last-child { padding-right: 0;}
        #DRAM_Catelog .DRAM_Cate div.Item .Arrow {
            width: 100%; 
            height: 60px; 
            position: absolute; 
            left: 0;
            bottom: -40px;
        }
        #DRAM_Catelog .DRAM_Cate div.Item.active .Arrow { 
            background-size: 60px;
            background-position: top center; 
            background-repeat: no-repeat; 
            background-image: url('../images/DRAM_Page/TABArrow_W.png'); 
        }

        
        #DRAM_Catelog .DRAM_Cate div.Item.aph_Item { opacity: 0.3; transition: linear 0.1s; }
        #DRAM_Catelog .DRAM_Cate div.Item.aph_Item:hover { opacity: 0.6; }

    }

    /* iPad Screen View Port */
    @media screen and (min-width:1112px) and (max-width:1200px ) {
        #DRAM_Catelog .DRAM_Cate div.Item.active .Arrow { display: none; }
    }


    @media screen and (min-width:1024px){
        #DRAM_Catelog .DRAM_Cate div.Item .Descp h3 { border-bottom: solid 1px #EEE; }
        #DRAM_Catelog .DRAM_Cate div.Item:hover .Descp h3 { border-bottom: solid 1px #DDD; }
        #DRAM_Catelog .DRAM_Cate div.Item .Descp p { display: block; }
    }

    @media screen and ( max-width:1024px) {
        #DRAM_Catelog .DRAM_Cate div.Item .Descp h3 { font-size: 18px; text-align: center; margin: 0px 0 10px 0 !important; }
        #DRAM_Catelog .DRAM_Cate div.Item .Descp p { font-size: 13px; }
        #DRAM_Catelog .DRAM_Cate div.Item .IMG img { max-height: 130px; }
    }

    @media screen and ( max-width:1023px) {
        #CatelogList .RWD-Structure { overflow: initial; }
        #DRAM_Catelog .DRAM_Cate div.Item .Descp h3 { font-size: 16px; margin: 0px 0 10px 0 !important; }
        #DRAM_Catelog .DRAM_Cate div.Item .Descp p { font-size: 13px; }
        #DRAM_Catelog .DRAM_Cate div.Item .IMG img { max-height: 120px; }
        #DRAM_Catelog .DRAM_Cate div.Item { height: 195px; }
        #DRAM_Catelog .DRAM_Cate div.Item .Inner { padding: 0 0; }
    }

    @media screen and (max-width:768px) {
        
        #DRAM_Catelog .DRAM_Cate div.Item { height: 185px; }
        .DRAM_Header h1{ font-size: 22px; text-align: left; padding: 0 0 0 0; margin: 0 0 0 0; }
        .DRAM_Header h4 { font-size: 13px;}
        #DRAM_Catelog .DRAM_Header .Content { 
            justify-content: center; 
        }
    }

    @media screen and (max-width:550px) {

        #DRAM_Catelog .DRAM_Cate div.Item { height: 180px; }
    }




/* Main Table --------------------------------------------------------------------------------------------------------------- */


.Table_StyleA,
.Table_StyleA > div { display: table; width: 100%; }
.Table_StyleA .T_Row { display: table-row; }
.Table_StyleA .T_Cell { display: table-cell; font-size: 12px; padding: 0 12px; word-break: break-word; }


.Table_StyleA .T_Head .T_Cell,
.Table_StyleA .T_Body .T_Cell { vertical-align: middle; line-height: 1.3; text-align: left !important; position: relative; }


.Table_StyleA .T_Body .T_Cell {  padding-top: 8px; padding-bottom: 8px; }

.Table_StyleA .T_Cell.Other > div.Sub { float: left; width: 25%;}
.Table_StyleA .T_Cell.DataSheet { text-align: center !important; }
.Table_StyleA .T_Cell.DataSheet img { width: 20px; }

.Table_StyleA .T_Body { background-color: #FFF; }
.Table_StyleA .T_Body .T_Cell { border-bottom: solid 1px #EEE; }
.Table_StyleA .T_Body .T_Cell span { 
    margin: 0 0 0 10px; 
    border: solid 1px #CCC; 
    padding: 3px 10px; 
    border-radius: 20px; 
    background-color: #FFF;
    font-size: 12px;
    display: none;
}
.Table_StyleA .T_Body .T_Cell a span { color: #666 !important; }
.Table_StyleA .T_Body .T_Row:hover .T_Cell { background-color: rgb(245, 245, 245) !important; }
.Table_StyleA .T_Head {  color: #FFF; position: sticky; top: 0; z-index: 5;}

.Table_StyleA .T_Cell .Sort { 
    position: absolute; 
    right: 0; top: 0;
    background-image: url('../images/DRAM_Page/sort-solid.svg');
    background-position: center;
    background-size: 10px;
    background-repeat: no-repeat;
    width: 20px; height: 100%;
 }



/* Main Table END --------------------------------------------------------------------------------------------------------------- */



#Filters div.F_Title, .Table_StyleA .T_Head { background-color: #666; color: #FFF; height: 50px;}

    @media screen and (min-width:1024px) {
        .Table_StyleA .T_Body .T_Cell span { display: inline-block; }
    }
    @media screen and ( min-width:1280px) {

        .Table_StyleA .T_Cell.PN { width: 20%; }
        .Table_StyleA .T_Cell.RAM { width: 8%; }
        .Table_StyleA .T_Cell.Module { width: 20%; }
        .Table_StyleA .T_Cell.Speed { width: 8%; }
        .Table_StyleA .T_Cell.Type { width: 15%; }
        .Table_StyleA .T_Cell.Other { width: 20%; }
        /* .Table_StyleA .T_Cell.Other > div.Sub.Speed { width: 20%;} */
        .Table_StyleA .T_Cell.Other > div.Sub.Capacity { width: 25%;}
        .Table_StyleA .T_Cell.Other > div.Sub.Voltage { width: 25%; }
        .Table_StyleA .T_Cell.Other > div.Sub.Comp { width: 50%;}
        .Table_StyleA .T_Cell.DataSheet { width: 10% !important; text-align: center !important; }
    }
    @media screen and ( min-width:1440px) {

        .Table_StyleA .T_Cell.PN { width: 21%; }
        .Table_StyleA .T_Cell.RAM { width: 6%; }
        .Table_StyleA .T_Cell.Module { width: 16%; }
        .Table_StyleA .T_Cell.Speed { width: 6%; }
        .Table_StyleA .T_Cell.Type { width: 18%; }
        .Table_StyleA .T_Cell.Other { width: 25%; }
        /* .Table_StyleA .T_Cell.Other > div.Sub.Speed { width: 20%;} */
        .Table_StyleA .T_Cell.Other > div.Sub.Capacity { width: 20%;}
        .Table_StyleA .T_Cell.Other > div.Sub.Voltage { width: 20%;}
        .Table_StyleA .T_Cell.Other > div.Sub.Comp { width: 40%;}
        /* .Table_StyleA .T_Cell.DataSheet { width: 4% !important; } */
        .Table_StyleA .T_Body .T_Cell span { font-size: 13px; }
        
    }

    @media screen and ( min-width:1600px) {

        .Table_StyleA .T_Cell.PN { width: 15%; }
        .Table_StyleA .T_Cell.RAM { width: 4%; }
        .Table_StyleA .T_Cell.Module { width: 10%; }
        .Table_StyleA .T_Cell.Speed { width: 4%; }
        .Table_StyleA .T_Cell.Type { width: 10%; }
        .Table_StyleA .T_Cell.Other { width: 15%; }
        /* .Table_StyleA .T_Cell.Other > div.Sub.Speed { width: 20%; } */
        .Table_StyleA .T_Cell.Other > div.Sub.Capacity { width: 25%; }
        .Table_StyleA .T_Cell.Other > div.Sub.Voltage { width: 25%; }
        .Table_StyleA .T_Cell.Other > div.Sub.Comp { width: 50%; }
    }

    @media screen and ( min-width:1700px) {

        .Table_StyleA .T_Cell.PN { width: 12%; }
        .Table_StyleA .T_Cell.RAM { width: 5%; }
        .Table_StyleA .T_Cell.Module { width: 10%; }
        .Table_StyleA .T_Cell.Speed { width: 5%; }
        .Table_StyleA .T_Cell.Type { width: 10%; }
        .Table_StyleA .T_Cell.Other { width: 20%; }
        /* .Table_StyleA .T_Cell.Other > div.Sub.Speed { width: 20%; } */
        .Table_StyleA .T_Cell.Other > div.Sub.Capacity { width: 25%; }
        .Table_StyleA .T_Cell.Other > div.Sub.Voltage { width: 25%; }
        .Table_StyleA .T_Cell.Other > div.Sub.Comp { width: 50%; }
    }

    @media screen and ( max-width:1279px) {
        .Table_StyleA .T_Cell.PN { width: 25%; }
        .Table_StyleA .T_Cell.RAM { width: 10%; }
        .Table_StyleA .T_Cell.Module { width: 0%; display: none !important; }
        .Table_StyleA .T_Cell.Type { width: 25%; }
        .Table_StyleA .T_Cell.Other { width: 26%; }
    }

    @media screen and ( max-width:1156px) {
        .Table_StyleA .T_Cell.PN { width: 30%; }
        .Table_StyleA .T_Cell.RAM { width: 10%; }
        .Table_StyleA .T_Cell.Type { display: none !important; }
        .Table_StyleA .T_Cell.Module { display: none !important; }
        .Table_StyleA .T_Cell.Speed { width: 10%; }
        .Table_StyleA .T_Cell.Other { width: 30%; }
        /* .Table_StyleA .T_Cell.Other > div.Sub.Speed { width: 20%;} */
        .Table_StyleA .T_Cell.Other > div.Sub.Capacity { width: 25%;}
        .Table_StyleA .T_Cell.Other > div.Sub.Voltage { width: 25%;}
        .Table_StyleA .T_Cell.Other > div.Sub.Comp { width: 45%;}
        .Table_StyleA .T_Cell.PN { position: sticky; left: 0; z-index:5; }
        .Table_StyleA .T_Head .T_Cell.PN { background-color: #666; }
        .Table_StyleA .T_Body .T_Cell.PN { background-color: #FFF; }

        /* .Table_StyleA .T_Head.fixedTop { position: fixed; top:40px } */

    }

    @media screen and ( max-width:768px) {
        .Table_StyleA .T_Cell.DataSheet { display: none; }
    }

    @media screen and ( max-width:650px) {
        .Table_StyleA {width: 100%; }
        .Table_StyleA .T_Cell.PN { width: 40%; }
        .Table_StyleA .T_Cell.RAM { width: 20%; }
        .Table_StyleA .T_Cell.Speed { width: 20%; }
        .Table_StyleA .T_Cell.Other { width: 20%; }
        /* .Table_StyleA .T_Cell.Other > div.Sub.Speed { width: 50%;} */
        .Table_StyleA .T_Cell.Other > div.Sub.Capacity { width: 100%; }
        .Table_StyleA .T_Cell.Other > div.Sub.Voltage,
        .Table_StyleA .T_Cell.Other > div.Sub.Comp { display: none; }
    }













    #Filters, #MainList .D_Scroll { width: 100%; margin: auto; }
    #MainList .D_Scroll,
    #MainList .DRAM_Table { position: relative;}

    /* Data Loading Notice */
    #Data_Loading { 
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        z-index: 50;
        background-color: rgba(255, 255, 255, 0.7);
    }

    #Data_Loading .Content {
        position: relative; 
        z-index: 50;
        top: 150px; left: -100px;
        margin-left: 50%;
        width: 200px; 
        height: 70px;
        line-height: 70px;
        text-align: left;
        padding: 0 25px 0 75px;
        font-weight: 600;
        font-size: 18px;
        color: #999;
        background-color: #FFF; 
        border: solid 2px #EEE;
        border-radius: 10px;
        box-shadow: rgba(0,0,0,0.15) 0 0 35px 0;
        background-image: url('../images/DRAM_Page/loading.gif');
        background-repeat: no-repeat;
        background-position: 15px center;
        background-size: 55px;
    }


    @media screen and ( min-width:850px ) {
        
        #Filters,
        #MainList .D_Scroll { overflow: hidden; }
        #MainList .D_Scroll { overflow-y: scroll; height: 50vh; background-color: #FFF; }
        #MainList .D_Scroll::-webkit-scrollbar { -webkit-appearance: none; }
        #MainList .D_Scroll::-webkit-scrollbar:vertical { 
            width: 12px; 
            background-color: rgb(231, 231, 231);
        }
        #MainList .D_Scroll::-webkit-scrollbar:horizontal {
            height: 10px;
            background-color: #EEE;
        }
        
        #MainList .D_Scroll::-webkit-scrollbar-thumb {
            border-radius: 0;
            background-color: #CCC;
        }
        

    }
    @media screen and (min-width:1156px) {
        #Filters,
        #MainList .D_Scroll { 
            margin: auto; 
            box-shadow: rgba(0,0,0,0.045) 0 0 30px 0; 
        }
    }
    @media screen and ( max-width:1156px) {
        
        #MainList .D_Scroll { overflow-y: hidden; overflow-x: visible; width: 100%; height: auto;  }
        #MainList .D_Scroll::-webkit-scrollbar { -webkit-appearance: none; }
        #MainList .D_Scroll::-webkit-scrollbar:vertical { 
            width: 5px; 
            background-color: rgb(217, 221, 223);
        }
        #MainList .D_Scroll::-webkit-scrollbar:horizontal {
            height: 10px;
            background-color: #EEE;
        }
        #MainList .D_Scroll::-webkit-scrollbar-thumb {
            border-radius: 0px;
            background-color: rgba(155, 155, 155, 0.829)
        }

    }


    @media screen and ( max-width:850px ) {

    }

    @media screen and ( max-width:500px ) {
        #MainList .D_Scroll::-webkit-scrollbar:vertical { width: 6px; }
        #MainList .D_Scroll::-webkit-scrollbar:horizontal { height: 6px; }
        /* #MainList .D_Scroll { overflow-y: initial; overflow-x: initial; width: 100%; height: auto; } */

    }




/* Filter Style -------------------------------------------------------------------------- */



#Filters div.F_Title { 
    color:#FFF; 
    padding: 0 0; 
    display: inline-flex; 
    display: -webkit-inline-flex;
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    width: 100%; 
    flex-wrap:wrap;
    flex-direction:row;
    position: relative;
    align-items: center; align-content: center;
    position: relative;
    z-index: 1;
}

/* 重新設定按鈕 */
#ResetBTN { 
    position: relative; 
    min-width: 100px; text-align: center; cursor: pointer; 
}
#ResetBTN input { 
    background-color: transparent; 
    border: 0; 
    margin: 0 0 0 0 !important; 
    padding: 0 0 0 0 !important; 
    width: 100%; 
    outline: 0 !important; 
    background-image: url('../images/DRAM_Page/close_W.svg');
    background-repeat: no-repeat;
    
}

#Filters a { display: block; text-decoration: none; color: #FFF; width: 100%; }
#Filters div.F_Title div.Text {
    background-image: url('../images/DRAM_Page/filter-solid.svg');
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 15px;
    min-width: 50px;
    padding: 0 20px 0 35px;
    height: 100%;
    align-content: center;
    align-items: center;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    display: inline-flex; 
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    flex-wrap: wrap; 
    -ms-flex-wrap: wrap;
}


#Filters div.Content { 
    display: none; 
    width: 100%;
    overflow: hidden; 
    background-color: #FFF;
    padding: 0px 20px 20px 20px;
    margin-bottom: 10px;
    position: relative;
    z-index: 0;
}

#Filters div.Content::-webkit-scrollbar {
    -webkit-appearance: none;
}
#Filters div.Content::-webkit-scrollbar:vertical { width: 12px; background-color: #EEE; }
#Filters div.Content::-webkit-scrollbar:horizontal {
    height: 7px;
    background-color: rgb(231, 231, 231);
}

#Filters div.Content::-webkit-scrollbar-thumb {
    background-color: #CCC;
}


#Filters div.F_Item { width: 18%; margin: 0 2% 0 0; }

#Filters div.F_Item h4 { 
    margin: 0 0 12px 0; 
    padding: 20px 0 0 0; 
    font-size: 16px;
    font-weight: 600;
    color: #555;
    background-color: #FFF;
    top: 0;
    z-index: 1;
}

#Filters div.F_Item > div { 
    list-style: none; 
    padding: 0 0 0 0; 
    margin: 0 0 0 0; 
    position: relative; 
    z-index: 0;  
    display: inline-flex; 
    display: -webkit-inline-flex;
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    flex-wrap: wrap; 
    -ms-flex-wrap: wrap;
}
#Filters div.F_Item input { 
    padding: 5px 10px 5px 10px;
    border-radius: 3px;; 
    margin: 3px 0;
    display: table; 
    cursor: pointer; 
    width: 100%; 
    border: solid 1px #EEE;
    color: #555;
    background-color: #FFF;
    text-align: left;
    white-space: normal;
    line-height: 1.35;
}

/* 自原判斷樣式 */

#Filters div.F_Item ul.Short_Txt > li,
#Filters div.F_Item ul.List_Half > li { 
    width: 100%; 
    margin: 3px 0 3px 0;  
    text-align: left;
}
#Filters div.F_Item ul > li > div { display: table-cell; vertical-align: top; }
#Filters div.F_Item ul > li > div.Check { 
    width: 30px; 
    display: none;
    background-position: center 4px; 
    background-repeat: no-repeat; 
    background-size: 15px;
}
#Filters .t_click { 
    color:#FFF !important; 
    border: solid 1px transparent !important; 
}

#Filters .disabled { opacity: 0.4; cursor: no-drop !important;  }
#Filters .disabled:hover { 
    background-color: #FFF !important; 
    color: #555 !important; 
    border: solid 1px #EEE !important; 
}

#Filters div.F_Item ul > li > div.Text { line-height: 1.5 }
#Filters div.F_Item input:hover { color: #FFF; border: solid 1px transparent; }


#Filters.active div.Content.append {
    display: inline-flex; 
    display: -webkit-inline-flex;
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
}


    @media screen and (min-width:1023px){

        #Filters div.Content,
        #Filters div.Content.append {
            display: inline-flex; 
            display: -webkit-inline-flex;
            display: -ms-flexbox;  /* TWEENER - IE 10 */
            flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            width: 100%;
            height: auto;
            /* overflow-y: visible; */
        }
        #ResetBTN { 
            position: absolute; 
            top: 10px; right: 10px; 
            min-width: 50px; 
            background-color: #999; 
            color: #FFF; 
            border-radius: 99px; 
            overflow: hidden; 
        }
        #ResetBTN input { 
            padding: 2px 20px 2px 35px !important; 
            background-position: 12px center;
            background-size: 20px;
        }


        #Filters div.F_Item.F_Module { width: 21%; }
        #Filters div.F_Item.F_Speed { width: 22% !important; }
        #Filters div.F_Item.F_Other { width: 18%; }
        #Filters div.F_Item.F_ICG { width: 10% !important; }
        #Filters div.F_Item.F_Capacity { width: 15% !important; }
        #Filters div.F_Item.F_Speed input {  text-align: center; width: 60px; margin-right: 5px; }
        #Filters div.F_Item.F_Speed input:nth-child(3n+3) { margin-right: 0;}
        #Filters div.F_Item.F_Capacity input { text-align: center; width:  68px; margin-right: 5px; }
        #Filters div.F_Item.F_Capacity input:nth-child(2n+2) { margin-right: 0;}

        #Filters,
        #MainList .D_Scroll { width: 100%; padding: 0 0; }
        #MainList .D_Scroll div.DRAM_Table { width: 100% }

        #MainList { padding-top: 40px; }

        /* 字元判斷篩選選項欄位寬度 */
        #Filters div.F_Item.Middle_Style { width: 15% !important;}
        #Filters div.F_Item.F_Speed.Middle_Style input { width: 70px !important; }

    }

    @media screen and (min-width:1280px) {
        #Filters div.F_Item.F_Module { width: 22%; }
        #Filters div.F_Item.F_Speed { width: 19% !important; }
        #Filters div.F_Item.F_Other { width: 24%; }
        #Filters div.F_Item.F_Capacity { width: 12% !important; }
    }


    @media screen and (min-width:1360px) {
        #Filters div.F_Item.F_Module { width: 20%; }
        #Filters div.F_Item.F_Speed { width: 16% !important; }
        #Filters div.F_Item.F_Other { width: 24%; }
        #Filters div.F_Item.F_Capacity { width: 12% !important; }
        #Filters div.F_Item.F_Capacity input { width:  85px; }
    }

    @media screen and (max-width:1366px) {
        
    }

    @media screen and (min-width:1156px) and (max-width:1280px) {
        #Filters div.F_Item { width: 28%; }
    }

    @media screen and (max-width:1023px) {
        #MainList { padding-top: 25px; }
        #Filters {  background-color: #FFF; z-index: 990; width: 100%; }
        #Filters.fixedTop { position: fixed; top: 0; right: 0; }
        #Filters.active { 
            height: 100vh; 
            position: fixed; 
            top: 0; right: 0;  
            padding: 0 0 30% 0;
            background-color: rgba(121, 121, 121, 0.98);
            width: 100%; 
            box-shadow: rgba(55, 55, 55, 0.15) 0 0 30px 0; 
        }
        #Filters.active div.Content,
        #Filters.active div.Content.append { display: block; height: 100%; }
                
        #Filters div.F_Title div.append { 
            position: absolute; 
            right: 0px; top: 0; 
            width: 50px; 
            height: 100%; 
            background-color: rgba(0,0,0,0.3);
        }
        #Filters div.F_Title div.append > div.ICON {
            width: 100%;
            height: 100%; 
            background-image: url('../images/DRAM_Page/icon_collapse_appand_W.png');
            background-position: center;
            background-repeat: no-repeat;
            transition: linear 0.2s;
        }
        #Filters:hover div.F_Title div.append,
        #Filters.active div.F_Title div.append { transition: linear 0.2s; }
        #Filters:hover div.F_Title div.append { background-color: rgba(0,0,0,0.3); }
        #Filters.active div.F_Title div.append > div.ICON {
            background-image: url('../images/DRAM_Page/icon_collapse_expand_W.png');
            -moz-transform:rotate(180deg);
            -webkit-transform:rotate(180deg);
            -o-transform:rotate(180deg);
            -ms-transform:rotate(180deg);
            transform:rotate(180deg);
            transition: linear 0.2s;
        }

        #Filters div.F_Item { width: 100% !important; }


        #Filters div.F_Item.F_Speed,
        #Filters div.F_Item.F_Capacity,
        #Filters div.F_Item.F_Speed div,
        #Filters div.F_Item.F_Capacity div { width: 100% !important; display: inline-block; }

        #Filters div.F_Item.F_Speed input,
        #Filters div.F_Item.F_Capacity input { text-align: center; width: 65px !important; margin: 0 5px 5px 0; float: left; }

        
        /* 篩選子項目收合 */
        #Filters div.F_Item > div { display: none !important; }
        #Filters div.F_Item.append > div { display: block !important; }

        #Filters div.F_Item h4 { 
            border-bottom: solid 1px #EEE; 
            padding: 15px 0; 
            margin: 0 0 0 0; 
            font-size: 15px !important; 
            background-image: url('../images/DRAM_Page/Mobile_List_append.svg');
            background-repeat: no-repeat;
            background-size: 18px;
            background-position: 100% center;
        }
        #Filters div.F_Item:last-child h4,
        #Filters div.F_Item.append h4 { border-bottom: solid 0 #EEE !important; }
        #Filters div.F_Item.append h4 { background-image: url('../images/DRAM_Page/Mobile_List_expend.svg') !important; }

        /* 重新設定按鈕 */
        #ResetBTN { 
            margin: 0 auto 0 auto; 
            border-radius: 3px; 
            background-color: #999; 
            color: #FFF; 
            font-size: 13px; 
            padding: 3px 0; 
            width: 50px; 
        }
        #ResetBTN input { 
            background-position: 10px center; 
            background-size: 20px;
            padding: 2px 15px 2px 35px !important;  

        }
    }



    @media screen and (max-width:850px) {
        #Filters { box-shadow: rgba(0,0,0,0.5) 0 0 0 0; width: 100%; right: 0; }
        #Filters.active { 
            padding: 0 0 20vh 0; 
            width: 100%;
            height: 100vh; 
            right: 0;
            border-bottom: solid 1px #EEE; 
            box-shadow: rgba(55, 55, 55, 0.35) 0 0 20px 0; 
        }
        #Filters div.Content { overflow: inherit; overflow: scroll !important; height: 92% !important; }

    }

    @media screen and (max-width:768px) {
    }

    @media screen and (max-width:650px) {
        #Filters div.F_Item { width: 100% !important; margin: 0 0 0 0; }
    }




#Filters div.F_Title, .Table_StyleA .T_Head { background-color: #666; color: #FFF; height: 40px;}

    @media screen and (max-width:1156px) {
        #Filters div.F_Title { height: 35px; }
        #Filters div.F_Title div.append { width: 35px; }
        .Table_StyleA .T_Head { height: 35px !important; }
    }




 /* SW_Cate */

.SW_Cate { position: relative; margin-bottom: 15px; }
.SW_Cate ul { list-style: none; padding: 0 0 0 0; margin: 0 0 0 0; display: inline-block; }
.SW_Cate ul > li > a { display: block;}

.SW_Cate.append .Content { display: block; }
.SW_Cate .CateText {
    cursor: pointer; 
    background-color: #FFF;
    background-image: url('../images/DRAM_Page/arrow_drop_down.svg') ; 
    background-repeat: no-repeat; 
    border-radius: 5px;
    box-shadow: rgba(55, 55, 55, 0.05) 0 0 10px 0;
    border: solid 1px #EEE;
    font-weight: 600;
    color: #555;
}

@media screen and (min-width:550px) {
    .SW_Cate { 
        min-width: 250px; 
        text-align: center;
        border-radius: 8px;  
        margin-bottom: 35px;
    }
    .SW_Cate .CateText { 
        padding: 8px 45px 8px 25px; 
        background-size: 25px;
        background-position: 95% center;
        border-radius: 99em;
        display: none;
    }
    .SW_Cate .Content { 
        position: relative; 
        left: 0; 
        width: 100%; 
        z-index: 25; 
        padding: 0 10px;
    }
    .SW_Cate ul { 
        width: auto; 
        margin: 8px 0 0 0;
        padding: 0 0;
        display: inline-block;
        border-radius: 99em;
        box-shadow: rgba(46, 42, 42, 0.06) 0 0 30px 0;
    }
    .SW_Cate ul:hover { box-shadow: rgba(46, 42, 42, 0.04) 0 0 50px 0; transition: ease-in 0.2s; }
    .SW_Cate ul > li:first-child { border-left: solid 1px #EEE; border-top-left-radius: 99em; border-bottom-left-radius: 99em; }
    .SW_Cate ul > li:last-child { border-top-right-radius: 99em; border-bottom-right-radius: 99em; border-right: 0; }
    .SW_Cate ul > li { 
        width: auto;
        border-right: solid 1px #EEE;
        background-color: #FFF;
        float: left;
        margin: 0 0;
    }
    
    .SW_Cate ul > li a { color: #666; padding: 8px 30px; }
    .SW_Cate ul > li:hover { border-right: 0; border-left: 0; }
    .SW_Cate ul > li.active { border-right: 0; }
    .SW_Cate ul > li.active a { color: #FFF !important; }
    .SW_Cate ul > li:hover a { color: #FFF; }


    /* Text Setting */
    .SW_Cate .CateText, .SW_Cate ul > li a { font-size: 14px; }

}

@media screen and (min-width:1200px) {
    .SW_Cate ul > li { width: 250px; }
}

@media screen and (min-width:1450px) {
    /* Text Setting */
    .SW_Cate .CateText, .SW_Cate ul > li a { font-size: 15px; }
}

@media screen and (max-width:768px) {
    .SW_Cate .Content { display: none; }
    .SW_Cate ul > li:last-child { border-bottom: 0; }
    .SW_Cate .CateText { 
        padding: 5px 45px 5px 15px; 
        background-size: 25px; 
        opacity: 0.7; 
        background-position: 98% center; 
    }
    .SW_Cate ul {
        margin: 5px 0 0 0;
        width: 100%;
        background-color: #FFF; 
        border-radius: 5px; 
        border: solid 1px #EEE;
        padding: 5px 15px;
    }
    .SW_Cate ul > li { border-bottom: solid 1px #EEE; padding: 5px 0; }
}


















/* P_Detail_DRAM -------------------------------------------------------------------------------------------- */


@media screen and (min-width:1440px) {
    #P_Detail_DRAM .DRAM_Spec .RWD-Structure { padding: 20px 10vw; }
}


#P_Detail_DRAM div.DRAM_Header { 
    background-position: center; 
    background-size: cover; 
}

#P_Detail_DRAM .PromoText { 
    color:#333; width: 50%; 
    display: inline-flex;
    flex-wrap: wrap;
    height: 100%;
    align-content: center;
}
#P_Detail_DRAM .PromoText h1 { margin: 0 0 15px 0;}
#P_Detail_DRAM .PromoText p { line-height: 1.5; }

#P_Detail_DRAM div.P_Intro { width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-content: center; align-items: center; }
#P_Detail_DRAM div.P_Intro > div.Product_IMG img { width: 80%;  }
#P_Detail_DRAM div.P_Intro ul.F_List { padding: 0 0 0 0; margin: 0 0 15px 0; list-style: none; display: inline-block; width: 100%; }
#P_Detail_DRAM div.P_Intro ul.F_List > li { float: left; background-color: rgb(255, 255, 255); color:rgb(58, 58, 58); font-size: 13px; padding: 1px 10px; margin: 0 8px 0 0; border-radius: 3px;; }
#P_Detail_DRAM div.P_Intro > div.Text { width: 100%; padding: 0px 0 30px 0px; }
#P_Detail_DRAM div.P_Intro > div.Text h1 { margin: 0 0 15px 0; padding: 0 0 0 0;  }
#P_Detail_DRAM div.P_Intro > div.Text h4 { margin: 0 0 8px 0; padding: 0 0 0 0; }


@media screen and (min-width:768px) {
    #P_Detail_DRAM div.P_Intro { display: inline-flex;  }
    #P_Detail_DRAM div.P_Intro > div.Text { width: 60%; padding: 20px 0 10px 0; }
    #P_Detail_DRAM div.P_Intro > div.Product_IMG { width: 40%; }
}


@media screen and (max-width:768px) {
    #P_Detail_DRAM h1 { font-size: 28px; text-align: left; }
    #P_Detail_DRAM h4 { font-size: 18px;  }
    #P_Detail_DRAM p, #P_Detail_DRAM li { font-size: 13px !important;}
    #P_Detail_DRAM div.P_Intro > div.Text { padding: 0 0 0 0; }
    #P_Detail_DRAM div.P_Intro ul.F_List { margin: 0 0 0 0; }

}

@media screen and (max-width:550px) {
    #P_Detail_DRAM h1 { font-size: 24px; }
    #P_Detail_DRAM h2 { font-size: 20px;  }
    #P_Detail_DRAM h4 { font-size: 15px;  }
    #P_Detail_DRAM p, #P_Detail_DRAM li, .T_Cell { font-size: 12px !important; }
}

@media screen and (max-width:480px) {
    #P_Detail_DRAM div.P_Intro > div.Product_IMG img { width: 95%; }

}


/* DRAM_Spec */
.DRAM_Spec h3 { 
    font-weight: 600; 
    display: inline-block; 
    border-bottom: solid 2px #EEE; 
    padding: 0 0 10px 0; 
    font-size: 20px;
}

.DRAM_Spec div.Item { margin: 20px 0 50px 0; }
.DRAM_Spec div.Item div.Head { 
    position: relative; 
    padding: 5px 0 15px 0; 
}
.DRAM_Spec div.Item div.Head h4 { 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    color: #999; 
    font-weight: 300; 
    font-size: 16px;
}





.Spec_Table_DRAM { display: table; width: 100%; border-collapse: collapse; }

.Spec_Table_DRAM ul { padding: 0 0 0 0; margin: 0 0 0 0; list-style: none; display: inline-block; }
.Spec_Table_DRAM ul > li { float: left;}

/* .Spec_Table_DRAM ul > li:last-child > span { display: none; } */
.Spec_Table_DRAM div.T_Row { display: table-row; border-bottom: solid 1px #EEE;  }
.Spec_Table_DRAM div.T_Row:first-child { border-top: solid 1px #EEE;}
.Spec_Table_DRAM div.T_Cell { display: table-cell; vertical-align: top; padding: 10px 20px; }
.Spec_Table_DRAM div.T_Cell.SubText { font-weight: 600; width: 35%; background-color: rgba(238, 238, 238, 0.452); }

ul.Warranty { list-style: disc; padding: 0 0 0 20px;}
ul.Capacity span {padding: 0 5px; color:#CCC;}


@media screen and (max-width:550px) {
    .DRAM_Spec div.Item div.Head h4 { font-size: 15px; }

}


/* P_Detail_DRAM END -------------------------------------------------------------------------------------------- */





.BottomArea .Content { justify-content: flex-start; }
.BottomArea .Item { width: 100%; }
.BottomArea .Item a {  display: block; background-color: #FFF; padding: 25px; width: 100%; color: #555; }
.BottomArea .Item a .ICON { width: 100%; padding: 0 0 15px 0;}
.BottomArea .Item a h4, .BottomArea .Item a p, .BottomArea .Item a .ICON { text-align: center; }
.BottomArea .Item a h4 { font-weight: 600; }




@media screen and (min-width:840px) {
    .BottomArea .Item { width: 32%; }
    .BottomArea .Item a .ICON img { width: 60px;}
    .BottomArea .Item a p { font-size: 14px; line-height: 1.6; padding: 0 15px;}
    
}

@media screen and (min-width:1280px) {
    .BottomArea .Item a p { padding: 0 25px;}
}

@media screen and (max-width:840px) {
    .BottomArea .Item { margin: 5px 0; }
    .BottomArea .Item a {  padding: 15px; }
    .BottomArea .Item a .ICON { padding-top: 10px;}
    .BottomArea .Item a .ICON img { width: 50px;}
    .BottomArea .Item a p { font-size: 13px; line-height: 1.5; padding: 0 15px;}
}

@media screen and (max-width:550px) {
    .BottomArea .Item a p { font-size: 12px; }
}










/* 文字統一調整 -----------------------------------------------------------------------------------  */
@media screen and ( min-width:768px) {
    /* 內文文字 */
    #Filters div.F_Title div.Text,
    #Filters div.F_Item input,
    #ResetBTN input,
    #P_Detail_DRAM p,
    #P_Detail_DRAM li,
    #P_Detail_DRAM .PromoText p,
    .DRAM_page .Spec_Table_DRAM div.T_Cell,
    .SW_Cate ul > li a,
    .Table_StyleA .T_Cell { font-size: 13px !important;}
}
@media screen and ( min-width:1360px) {

    /* 內文文字 */
    #Filters div.F_Title div.Text,
    #Filters div.F_Item input,
    #ResetBTN input,
    #P_Detail_DRAM p,
    #P_Detail_DRAM li,
    #P_Detail_DRAM .PromoText p,
    .DRAM_page .Spec_Table_DRAM div.T_Cell,
    .SW_Cate ul > li a,
    .Table_StyleA .T_Cell { font-size: 14px !important;}
}
@media screen and ( min-width:1440px) {

    /* h4文字 */
    #Filters div.F_Item h4, .SW_Cate .CateText { font-size: 16px !important; }

    /* 內文文字 */
    #Filters div.F_Title div.Text,
    #Filters div.F_Item input,
    #ResetBTN input,
    #P_Detail_DRAM p,
    #P_Detail_DRAM li,
    #P_Detail_DRAM .PromoText p,
    .DRAM_page .Spec_Table_DRAM div.T_Cell,
    .SW_Cate ul > li a,
    .Table_StyleA .T_Cell { font-size: 15px !important;}
}

@media screen and ( max-width:768px) {

    /* 內文文字 */
    #Filters div.F_Title div.Text,
    #Filters div.F_Item input,
    #ResetBTN input,
    #P_Detail_DRAM p,
    #P_Detail_DRAM li,
    #P_Detail_DRAM .PromoText p,
    .DRAM_page .Spec_Table_DRAM div.T_Cell,
    .SW_Cate ul > li a,
    .Table_StyleA .T_Cell { font-size: 12px !important;}
}



/* UI 配色 */

@media screen and (min-width:768px) {

    .SW_Cate ul > li:hover,
    #Filters input:hover { background-color: #acacac !important;}
    .SW_Cate ul > li.active,
    #Filters .F_Item .t_click { background-color: #960014 !important; }
    #Filters input.t_click,
    #Filters input.t_click:hover { background-color: #7a0010 !important;}
    /* #ResetBTN:hover  */

}

@media screen and (max-width:1023px) {

    /* 紅色 */
    #Filters div.F_Title { background-color: #960014 !important;}
    #Filters input:hover { background-color: #8e9697 !important;}
    #Filters input.t_click,
    #Filters input.t_click:hover { background-color: #596769 !important; }
    
}