/* ========================================================================================================================
	                          Product Selector Function Section (產品篩選功能區)
======================================================================================================================== */


#Product-Filter .markets-solutions-applications {
    padding: 0;
}

#Product-Filter .markets-solutions-applications h2.color_white, 
#Product-Filter .markets-top-banner.richcontent h2.color_white.RC_LTitle
#Product-Filter .markets-solutions-applications h2, 
#Product-Filter .markets-solutions-applications h4.color_white, 
#Product-Filter .markets-solutions-applications h4 {
    color: #fff;
}

#Product-Filter .markets-solutions-applications h4 {
    color: #fff;
    opacity: 0.8;
    margin: 0 auto;
    margin-bottom: 10px;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

/* 隱藏 h2::after & h3::after */
#Product-Filter .markets-solutions-applications #all_product h2::after {
    content: unset;
}



#Filter_Section {
    background-image: url('//assets.aten.com/webpage/shared/Product-Landing-Page/PDU/PG-Series/BG_for_Product-Selector-2.jpg');
}

#Filter_Section > div {
    background-color: rgba(5, 89, 139, 0.7) !important;
    backdrop-filter: unset !important;
}

.BG_HiBlue #Filter_Section > div, 
.BG_HiGray #Filter_Section > div {
    background-color: rgba(28, 44, 70, 0.7) !important;
    background-color: rgba(10, 36, 78, 0.7) !important;
}


#Filter_Section #filter-function-all {
    display: flex;
    align-items: center;
}

#Product-Filter #Filter_Section .container {
    /*height: inherit;*/
}

#Product-Filter .wording_block {
    text-align: center;
    margin: 0 auto;
    margin: 0px auto 65px;
}

#Product-Filter .markets-solutions-applications h2.color_white, 
#Product-Filter .markets-top-banner.richcontent h2.color_white.RC_LTitle
#Product-Filter .markets-solutions-applications h2, 
#Product-Filter .markets-solutions-applications h4.color_white, 
#Product-Filter .markets-solutions-applications h4 {
    color: #fff !important;
    text-align: center;
    text-shadow: 0px 0px 20px rgba(5, 50, 76, .85);
}

#Product-Filter .markets-solutions-applications h4.color_white, 
#Product-Filter .markets-solutions-applications h4 {
    opacity: 0.8 !important;
}


#Product-Filter .markets-solutions-applications h2.color_white, 
#Product-Filter .markets-solutions-applications h2 {
    margin-bottom: 10px !important;
}



#Product-Filter #filter-selector.filter {
    text-align: center;
    display: block;
    width: 100%;
    background-color: transparent;
    border-radius: 15px;
    margin: 20px auto 20px;
    -webkit-box-shadow: 0px 10px 25px 0px rgba(22, 28, 32, 0.15);
    -moz-box-shadow: 0px 10px 25px 0px rgba(22, 28, 32, 0.15);
    box-shadow: 0px 10px 25px 0px rgba(22, 28, 32, 0.15);
}



/* Selector 有底色 */
#Product-Filter.Selector_BG #filter-selector.filter,
section[class*="Selector_BG"] #filter-selector.filter {
    background-color: rgba(0, 0, 0, .65);
    -webkit-box-shadow: 0px 10px 25px 0px rgba(22, 28, 32, 0.15);
    -moz-box-shadow: 0px 10px 25px 0px rgba(22, 28, 32, 0.15);
    box-shadow: 0px 10px 25px 0px rgba(22, 28, 32, 0.15);
}

/* Selector 有底色 >> Round-Corner */
#Product-Filter.Selector_BG.Round-Corner #filter-selector.filter,
section[class*="Selector_BG"].Round-Corner #filter-selector.filter {
    border-radius: 100px !important;
}

/* Selector 有底色 >> PBottom */
#Product-Filter.Selector_BG.PBottom #filter-selector.filter, 
section[class*="Selector_BG"].PBottom #filter-selector.filter {
    position: relative;
    z-index: 1;
    background-color: rgba(28, 44, 70, 1.0);
    box-shadow: 0px 10px 25px 0px rgba(22, 28, 32, 0.15);
}

#Product-Filter.Selector_BG.BG_HiBlue.PBottom #filter-selector.filter, 
#Product-Filter.Selector_BG.BG_HiBlue.PBottom #filter-selector.filter {
    background-color: rgba(13, 86, 151, 1.0);
    filter: drop-shadow(1px -10px 13px rgba(1, 25, 71, 0.9));
}

#Product-Filter.Selector_BG.BG_HiGray.PBottom #filter-selector.filter, 
section[class*="Selector_BG"].BG_HiGray.PBottom #filter-selector.filter {
    background-color: rgb(162, 167, 174);
    background-color: rgb(144, 149, 157);
    background-image: linear-gradient(to bottom, rgb(183, 188, 195) 0%,rgb(144, 149, 157) 70%);
    filter: drop-shadow(1px -10px 13px rgba(1, 25, 71, 0.9));
    filter: drop-shadow(1px -10px 13px rgba(1, 25, 71, 0.3));
}





#selector-shadow {
    /* filter: drop-shadow(1px -10px 13px rgba(1,25,71,0.9)); */
    box-shadow: 0px -40px 25px 10px rgba(1,25,71,0.5);
    position: relative;
    z-index: 1;
  }

/* Drop Down Menu */
.select-field {
    /* float: left; */
    padding: 0 5px !important;
    filter: drop-shadow(1px 6px 8px rgba(0, 0, 0, 0.2));
}


.select-field .dropdown, .select-model .dropdown {
    float: none;
    width: 100%;
}


#Product-Filter .dropdown .btn-default {
    color: #222;
    font-size: 1.07em;
    font-weight: 400;
    text-align: left;
    position: relative;
    border-radius: 4px;
    border: 1px solid #e3e2e2;
    background-color: #fff;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    line-height: 1.42857143;
    display: block;
    height: 48px;
    padding: 12px 15px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.02), 0 3px 1px -2px rgba(0, 0, 0, 0.1);
}


#Product-Filter .dropdown .btn-default {
    width: 100% !important;
    margin: 0 20px 20px;
    overflow: hidden;
}


#Product-Filter .dropdown .btn-default {
    margin: 0;
    text-align: left;
    position: relative;
    border-radius: 4px;
    border: 1px solid #e3e2e2;
    padding: 12px 15px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.02), 0 3px 1px -2px rgba(0, 0, 0, 0.1);
    font-size: 1.07em;
    color: #222;
    display: block;
  }

.dropdown #dropdownMenu_region_filter.btn-default, 
.dropdown #dropdownMenu_plug_type_filter.btn-default, 
.dropdown #dropdownMenu_pdu_category_filter.btn-default {
}


#Product-Filter .dropdown .btn-default:hover, 
#Product-Filter .dropdown .filter .btn-default.focus,  
#Product-Filter .dropdown .filter .btn-default.active, 
#Product-Filter .dropdown .filter .open > .dropdown-toggle.btn-default, 
.filter .btn-default:hover, 
.filter .btn-default.focus,  
.filter .btn-default.active, 
.filter .open > .dropdown-toggle.btn-default {
color: #333;
background-color: #ebf6fc;
border-color: #adadad;
}


#Product-Filter #show_all_btn {
    font-size: 1.25em;
    font-weight: 500;
    font-weight: 600;
    background-color: rgba(133, 193, 47, 0.99) !important;
    border: 2px solid rgba(133, 193, 47, 0.99) !important;
    box-shadow: 1px 6px 10px 0 rgba(0, 0, 0, .3) !important;
    transition: all 0.3s ease-in-out 0s;
    letter-spacing: -0.01em !important;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 30px 8px;
    margin: unset !important;
}

/* Selector 有底色 >> Round-Corner */
#Product-Filter.Round-Corner #show_all_btn {
    border-radius: 30px !important;
}

#Product-Filter.BG_HiGray #show_all_btn {
    background-color: rgba(144, 210, 49, 0.99) !important;
    border: 2px solid rgba(144, 210, 49, 0.99) !important;
    background-color: rgba(136, 199, 46, 0.99) !important;
    border: 2px solid rgba(136, 199, 46, 0.99) !important;

    /* border-bottom: 2px solid rgba(115, 181, 21, 0.99) !important;
    border-right: 2px solid rgba(115, 181, 21, 0.99) !important; */
    border-left: 2px solid rgba(161, 209, 28, 0.99) !important;
    border-top: 2px solid rgba(161, 209, 28, 0.99) !important;
  }


  #Product-Filter.Button_LineG #show_all_btn {
    background-color: #fff !important;
    color: rgb(104, 161, 34) !important;
    border: 2px solid rgba(104, 161, 34, 1.0) !important;
  }


  #Product-Filter #show_all_btn.button:hover {
    background-color: rgba(159, 226, 40, 1.0) !important;
    border: 2px solid rgba(159, 226, 40, 1.0) !important;
    transition: all 0.5s linear 0s;
  }


  #Product-Filter .dropdown .btn-default, 
  #Product-Filter #show_all_btn {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border-radius: 10px;
    min-width: 145px !important;
    min-width: unset !important;
  }



  /* Selector 有底色 >> Round-Corner */
  #Product-Filter.Round-Corner .dropdown .btn-default, 
  #Product-Filter.Round-Corner #show_all_btn {
    border-radius: 30px !important;
  }
  


.select-field span.caret_New {
    font-size: 1em;
    font-size: 0.95em;
    letter-spacing: -0.001em;
    font-weight: 500;
    font-weight: 400;
}

.select-field span.caret_New::before {
    /* content: "\f107"; */
    font-size: 18px;
    font-family: FontAwesome;
    display: block;
    position: absolute;
    top: 10px;
    right: 11px;

    display: inline-block;
    position: relative;
    top: 0px;
    left: 0px;
    padding-right: 10px;
    top: unset;
}

.select-field span.caret_New::after {
    content: "\f107";
    font-size: 18px;
    font-family: FontAwesome;
    display: inline-block;
    position: absolute;
    top: 0px;
    top: unset;
    right: 11px;
    right: 13px;
  }
  


section#content #filter-selector ul {
    color: #5a595e;
    list-style: none;
    border-radius: 4px;
    border-radius: 10px;
    width: 100% !important;
}

/* Selector 有底色 >> Round-Corner */
section#content .Round-Corner #filter-selector ul {
    border-radius: 15px !important;
}

#content #Product-Filter .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

#content .filter .dropdown-menu {
    font-size: 1em !important;
    font-size: 0.95em !important;
    left: 0px !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

.filter .dropdown-menu > li > a {
    opacity: 0.9;
    padding: 7px 20px 5px;
    padding-left: 21px !important;
    padding-left: 19px !important;
    display: block;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}


.filter .dropdown-menu > li > a:hover, .filter .dropdown-menu > li > a:focus {
    text-decoration: none;
    color: #0296d4;
    background-color: #ebf6fc;
  }



#all_product.filter-result {
    background: rgba(245, 248, 250, 1);
    background: rgba(238, 239, 240, 1);
    background: rgba(232, 235, 237, 1);
    background-size: cover;
    background-image: linear-gradient(to bottom, rgb(255, 255, 255) 5%,rgb(232, 235, 237) 50%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .5) 0%,rgba(232, 235, 237, 1) 50%);
}


.pop_title, 
.all_title, 
.filter #show_all_btn.button {
  font-family: 'Saira Semi Condensed', Roboto, sans-serif !important;
  letter-spacing: -0.01em !important;
}



#all_product {
    padding: 4% 0px 5%;
}


#all_product .all_title {
    margin: 15px auto 60px !important;
    color: #000 !important;
    font-size: 2.5em !important;
    font-size: 2.3em !important;
    font-size: 2.2em !important;
    font-size: 2em !important;
    font-weight: 400 !important;
    font-size: 1.7em !important;
    font-weight: 300 !important;
}

#all_product .all_title::after {
    font-family: "FontAwesome";
    content: "\f107" !important;
    color: #86c131;
    font-size: 1.2em;
    font-weight: 600;
    font-style: normal;
    font-variant: normal;
    margin: 0;
    position: relative;
    display: inline-block;
    line-height: 1.3em;
    top: 3px;
    left: 15px;
    clip-path: polygon(0 42%, 100% 42%, 100% 100%, 0% 100%);
  }


  #Product-Filter .allproducts.products {
    margin-top: 35px;
    }


.products .item {
    cursor: pointer;
    height: auto;
    margin-bottom: 60px;
    /*width: 20% !important;*/
}

.products .col-lg-2.item, 
.products .col-md-4.item {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-bottom: 40px;
}

.products .item .item_block {
    width: 100%;
    margin: 0 auto;
    border: 2px solid #e8e9ea;
    border-bottom-color: rgb(232, 233, 234);
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom: 2px solid #dfe0e1;
    border-bottom: 2px solid #d4d6d8;
    border-right: 2px solid #d4d6d8;
    border-radius: 10px;
    background-color: #fff;
    -moz-box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.08);
    box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.08);

    -moz-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.08);
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out 0s;
  }

  .products .item:hover .item_block {
    border: 2px solid rgba(1, 122, 177, 0.6);
    background-color: #fff;
    box-shadow: 0 0 9px rgba(1, 122, 177, 0.4);
    -moz-box-shadow: 0 0 9px rgba(1, 122, 177, 0.4);
    -webkit-box-shadow: 0 0 9px rgba(1, 122, 177, 0.4);
    transition: all 0.5s linear 0s;
  }


#Product-Filter.Item-Light .products .item .item_block {
    border: 2px solid #ebeff2;
    border-right-color: rgb(230, 232, 234);
    border-right-color: rgb(225, 227, 230);
    border-left-color: rgb(232, 234, 237);
    border-bottom-color: rgb(205, 209, 213);
}

#Product-Filter.Item-Light .products .item:hover .item_block {
    border: 2px solid rgba(1, 122, 177, 0.6);
}


.products .item .item_block .desc {
    text-align: center;
    padding: 15px 21px 20px;
    padding: 15px 15px 17px;
    width: 100%;
    margin: 0 auto;
  }


  #Product-Filter .desc span {
    color: #333;
    color: #01375b;
    font-size: 1.22em;
    font-weight: 500;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    display: block;
    transition: all 0.3s ease-in-out 0s;
  }

.products .item:hover .item_block span.featured_product, 
.products .item:hover .item_block span.featured_product::after {
    color: #01a6ea !important;
    transition: all 0.5s linear 0s;
}


.item_block .desc span::after {
    content: "\f054";
    color: #01375b;
    color: #8fa9c0;
    color: #4095b5;
    color: #4095b5;
    color: rgb(133, 193, 47);
    font-family: "Font Awesome 5 Free";
    font-size: 0.8em !important;
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    position: relative;
    left: 7px;
    top: 0px;
    left: 17px;
    top: -1px;
    display: inline-block;
    background: unset !important;
    transition: all 0.3s ease-in-out 0s;
  }


.col-lg-2 .item_block .desc span::after, 
.col-md-4 .item_block .desc span::after {
    left: 10px;
  }


.filter-item.itemx2 {
    width: 75%;
}

.filter-item.itemx3 {
    width: 100%;
}

.filter-item.itemx4 {
    width: 100%;
}

.filter-item.itemx4 .select-field.field_Region {
    margin: 0 0% !important;
    width: 20% !important;
}

#Product-Filter.Selector_BG .filter-item.itemx4 .dropdown, 
section[class*="Selector_BG"] .filter-item.itemx4 .dropdown {
    min-width: auto !important;
    width: 100%;
    padding-right: 0%;
    padding-left: 0%;
}





/* 811 iPad 以上 */
@Media (min-width: 811px) {

    .select-field .dropdown, .select-model .dropdown {
    width: 93%;
    width: 97%;
    }

    .products .item .item_block {
    width: 95%;
    }

    .products .col-lg-2.item .item_block, 
    .products .col-md-4.item .item_block {
    width: 100%;
    }

    #Product-Filter .col-lg-2.item .item_block .desc span, 
    #Product-Filter .col-lg-2.item .item_block .desc span {
    font-size: 1.05em;
    }

}




/* 1024 以上 */
@Media (min-width: 1024px) {

    #Product-Filter.PBottom + section {
    margin-top: -160px;
    }

    #Product-Filter.PBottom + section div.markets-solutions-applications {
    padding-top: 260px;
    padding-top: 240px;
    }

    /* 當 Filter 點擊 Show All >> 下方表單區的上方距離 >> 縮減高度 */
    #Product-Filter.PBottom + section div.markets-solutions-applications.Show-All {
    padding-top: 140px;
    }

    #Product-Filter.PBottom #all_product {
    margin-top: -160px;
    padding-bottom: 170px !important;
    padding-top: 13% !important;
    }

    #Product-Filter.PBottom #all_product .container {
    /* padding-top: 47px;
    padding-bottom: 100px; */
    top: -80px;
    }

    #Product-Filter.PBottom .allproducts.products {
    margin-top: 35px;
    }

    #Product-Filter #filter-selector.filter {
    width: 85%;
    }

    #Filter_Section #filter-function-all {
    height: 45vh !important;
    height: 50vh !important;
    }

    #Product-Filter #Filter_Section .container {
    margin-bottom: 20px;
    margin: 20px auto;
    }


    /* Selector 有底色 
    #Product-Filter.Selector_BG #filter-selector.filter,
    section[class*="Selector_BG"] #filter-selector.filter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border: 1px solid rgba(255,255,255,.2);
    border-top: 1px solid rgba(255,255,255,.3);
    background-color: rgba(255,255,255,.85);
    background-color: rgba(0, 0, 0, .5);
    background-color: rgba(0, 0, 0, .65);
    min-height: 130px;
    min-height: 120px;
    width: 100%;
    padding: 2% 3%;
    }
    */

    #Product-Filter.Selector_BG.PBottom #filter-selector.filter, 
    section[class*="Selector_BG"].PBottom #filter-selector.filter {
    border-bottom: 1px solid #fff;
    }

    /* Selector 有底色 >> select-field  */
    #Product-Filter.Selector_BG .select-field, 
    section[class*="Selector_BG"] .select-field {
    /* padding: 0 !important; */
    padding-left: 15px !important;
    padding-right: 15px !important;
    }

    /* Selector 有底色 >> Drop Down Menu  */
    #Product-Filter.Selector_BG .dropdown, 
    section[class*="Selector_BG"] .dropdown {
    min-width: 249px !important;
    min-width: 270px !important;
    min-width: 226px !important;
    padding-right: 12%;
    padding-right: 4%;
    padding-left: 4%;
    }

    /* Selector 有底色 >> Drop Down Menu >> UL */
    section#content #Product-Filter.Selector_BG #filter-selector ul {
    width: 233px !important;
    width: 252px !important;
    left: 9px !important;
    }

    /* Selector 有底色 >> Show All Button */
    #Product-Filter.Selector_BG .filter #show_all_btn.button {
    width: 80%;
    width: 90%;
    float: right;
    }


}


/* 1100 以上 */
@Media (min-width: 1100px) {

    /* Selector 有底色 >> Drop Down Menu  */
    #Product-Filter.Selector_BG .dropdown, 
    section[class*="Selector_BG"] .dropdown {
    min-width: 270px !important;
    }

}


/* 1500 以上 */
@Media (min-width: 1500px) {

    #Product-Filter.PBottom #all_product {
    padding-top: 13% !important;
    }

    /* Selector 有底色 >> Drop Down Menu  */
    .Selector_BG .dropdown, 
    section[class*="Selector_BG"] .dropdown {
    min-width: 285px !important;
    }

    .Selector_BG .filter #show_all_btn.button {
    width: 85%;
    }

    /* Selector 有底色 >> Drop Down Menu >> UL */
    section#content .Selector_BG #filter-selector ul {
    width: 249px !important;
    left: 8px !important;
    }

}



/* 2000 以上 */
@Media (min-width: 2000px) {

    #Product-Filter.PBottom #all_product {
    padding-top: 10% !important;
    }

}


/* Bowei 筆電寬螢幕 */
@Media (min-width: 1281px) and (max-width: 1366px) {

    #Filter_Section #filter-function-all {
    height: 60vh !important;
    }

}



/* 810 以上 */
@Media (min-width: 810px) {

    /* Selector 有底色 */
    #Product-Filter.Selector_BG #filter-selector.filter,
    section[class*="Selector_BG"] #filter-selector.filter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border: 1px solid rgba(255,255,255,.2);
    border-top: 1px solid rgba(255,255,255,.3);
    background-color: rgba(255,255,255,.85);
    background-color: rgba(0, 0, 0, .5);
    background-color: rgba(0, 0, 0, .65);
    min-height: 130px;
    min-height: 120px;
    width: 100%;
    padding: 2% 3%;
    }

}

/* 1023 以下 */
@Media (max-width: 1023px) {

    /* 會引響手機時, 下拉選單層次無法在最上方 >> Drop Down Menu */
    .select-field {
    filter: none !important;
    }

    #Product-Filter .dropdown .btn-default {
    width: 80% !important;
    }

    #Product-Filter.Selector_BG.BG_HiGray.PBottom #filter-selector.filter > div.filter-item {
    width: 100%;
    }

}


/* 810 以下 */
@Media (max-width: 810px) {

    .filter-item.itemx2, 
    .filter-item.itemx3, 
    .filter-item.itemx4 {
        width: 100%;
    }
    

    #Product-Filter .dropdown .btn-default {
    width: 100% !important;
    }

    #Filter_Section #filter-function-all {
    height: 380px !important;
    }

}


/* 809 以下 */
@Media (max-width: 809px) {

    /* Selector 有底色 */
    #Product-Filter.Selector_BG #filter-selector.filter,
    section[class*="Selector_BG"] #filter-selector.filter {
    display: flex;
    display: block;
    }


}


/* 480 以下 */
@Media (max-width: 480px) {

    #Filter_Section #filter-function-all {
    height: auto !important;
    padding: 10% 0;
    }

    #Product-Filter .dropdown .btn-default, 
    #Product-Filter #show_all_btn {
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 0px 20px;
    }

    section#content #filter-selector ul {
    width: 90% !important;
    }

    .ss-all {
    padding: 0 5px !important;
    }

    /* Show All Button >> Hidden */
    #Product-Filter #show_all_btn {
    /* display: none !important; */
    max-width: 90% !important;
    left: -5%;
    }

}