/*=====================================================================================================================================================

	                                【 Sticky Module / Fixed Style & Position) 】

======================================================================================================================================================*/



/***************** Fixed Style & Position **************************/ 



/* Position Fixed > 【 Top 】 */
.fixed-top {
    top: 0px;
    text-align: center;
    vertical-align: middle;
}


/* Position Fixed > 【 Bottom 】 */
.fixed-Bottom {
    bottom: 0px;
    text-align: center;
    vertical-align: middle;
}


/* Position Fixed > 【 Left 】 */
.fixed-Left {
    Left: 0px;
    text-align: left;
}


/* Position Fixed > 【 Right 】 */
.fixed-Right {
    Right: 0px;
    text-align: left;
}








/***************** Sticky Module Style & Position **************************/ 



/* Sticky Module 【 All 】 */
.sticky-module {
    position: fixed;
    z-index: 200;
    display: block;
    position: relative;
    width: auto;
    margin: 0 auto;
    padding: 1.5% 2%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0,0,0,.15);
    box-sizing: border-box; 
    overflow: hidden;

	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}


/* Sticky Module 【 Fixed 】 */
.sticky-module.fixed {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

/* Sticky Module + Fixed  */
.sticky-module.fixed, 
.sticky-module {
}

/* 【 H2 】 >> Sticky Module */
.sticky-module h2 {
    font-size: 1.2em;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.4;
	transition: all 0.3s ease-in-out 0s;
}



/* Position > 【 Top 】>> Sticky Module */
.sticky-module.fixed-top {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}


/* Position > 【 Bottom 】>> Sticky Module */
.sticky-module.fixed-Bottom {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, .2);
}


/* Position > 【 Left 】>> Sticky Module */
.sticky-module.fixed-Left {
    border: none;
    border-right: 1px solid rgba(0, 0, 0, .2);
}


/* Position > 【 Right 】>> Sticky Module */
.sticky-module.fixed-Right {
    border: none;
    border-left: 1px solid rgba(0, 0, 0, .2);
}














/*=====================================================================================================================================================

	                                【 Region / Language Auto-Suggestion (Sticky/ Fixed Top-Bar) 】

======================================================================================================================================================*/



/* Auto Region Suggestion Top Bar 【 Regular 】 */
#region-bar {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 1.25% 0;
    padding: 25px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,.15);
}

/* Auto Region Suggestion Top Bar 【 Regular 】 */
#region-bar.sticky-module {
    z-index: 200;
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}


/* #region-bar + #region-bar .container */
#region-bar.sticky-module,
#region-bar {
    height: auto;
    background-color: #004276;
    background-color: #000722;
    /*display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;*/
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(195, 198, 203, 0.4);
	transition: all 0.3s ease-in-out 0s;
}

/* 【 H2 】 >> Auto Region Suggestion Top Bar */
#region-bar h2 {
    color: #ffffff;
    font-size: 1.2em;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.4;
	transition: all 0.3s ease-in-out 0s;
}


/* 【 All Button 】 >> Auto Region Suggestion Top Bar */
#region-bar .region-btn .btn {
    font-weight: 600;
    padding: 1.5% 2.5% 1.3%;
    border-radius: 4px;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3);

    border: 2px solid rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0);
    transition: all 0.3s ease-in-out 0s;
}

#region-bar .region-btn .btn.switch-region {
    border: 2px solid #2292d3;
    background-color: #2292d3;
    border: 2px solid rgb(34, 146, 211);
    background-color: rgb(34, 146, 211);
}

/* 【 Button Style (Hover) 】 >> Sticky Module */
#region-bar .region-btn .btn.switch-region:hover, 
#region-bar .region-btn .btn:hover {
    border: 2px solid #00b5f2;
    background-color: #00b5f2;
    border: 2px solid rgb(0, 181, 242);
    background-color: rgb(0, 181, 242);
    transition: all 0.3s ease-in-out 0s;
}



/* 768 以上 */
@media (min-width: 768px) {

    /* #region-bar >> .container (要覆蓋掉原來 #header .container ) */
    body.stretched #header.full-header #region-bar .container, 
    #region-bar .container {
    width: 750px;
    }

    /* 【 Button >> 右邊空間 (要含 Last-Child) (iPad Ver) 】 >> Auto Region Suggestion Top Bar */
    /* #region-bar .region-btn a.btn:not(:last-child), */
    #region-bar .region-btn a.btn {
    margin-right: 2%;
    }

}

/* 992 以上 */
@media (min-width: 992px) {

    /* #region-bar >> .container (要覆蓋掉原來 #header .container ) */
    body.stretched #header.full-header #region-bar .container, 
    #region-bar .container {
    width: 970px;
    }

}


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

    #region-bar.sticky-module .container,
    #region-bar .container {
    min-height: 75px;
    }

    /* 【 Button >> 右邊空間 (不含 Last-Child) (接近 Desktop) 】 >> Auto Region Suggestion Top Bar */
    #region-bar .region-btn a.btn:not(:last-child) {
    margin-right: 2%;
    }

}


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

    #region-bar.sticky-module, 
    #region-bar {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;

    height: 72px;
    height: 90px;

    height: auto;
    min-height: 75px;
    }

    #region-bar {
    padding: 0;
    }

    #region-bar .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    /*display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    */
    }

    /* #region-bar >> .container (要覆蓋掉原來 #header .container ) */
    body.stretched #header.full-header #region-bar .container, 
    body #header.full-header #region-bar .container, 
    #region-bar .container {
    width: 1170px;
    
    padding: unset;
    padding-left: 15px;
    padding-right: 15px;
    }


    /* 【 H2 】 >> Align Left (Auto Region Suggestion Top Bar) */
    #region-bar h2 {
    /*float: left;
    width: 50%;*/
    text-align: left;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 24px;

    margin: 0;
    flex: 1;
    }

    /* 【 All Button 】 Align Right >> (Auto Region Suggestion Top Bar) */
    #region-bar .region-btn {
    /*float: right;
    width: 50%;*/

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2%;

    flex: 1;
    justify-content: flex-end;
    }

    /* 【 All Button 】 >> Auto Region Suggestion Top Bar */
    #region-bar .region-btn a.btn {
    width: auto;
    min-width: unset;
    }

}


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

    /* 針對較大的 .container (ex:Showroom/ Feature Products/ Dynamic Template) >> 會偵測有無 #parallax_banner + .larger_container > 若有會將 .larger_container 複製到 body */
    /* #region-bar >> .container (要覆蓋掉原來 #header .container ) */
    body.stretched.larger_container #header.full-header #region-bar .container, 
    body.larger_container #header.full-header #region-bar .container, 
    .larger_container #region-bar .container {
    width: 1300px;
    }

}


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


    /* 針對較大的 .container (ex:Showroom/ Feature Products/ Dynamic Template) >> 會偵測有無 #parallax_banner + .larger_container > 若有會將 .larger_container 複製到 body */
    /* #region-bar >> .container (要覆蓋掉原來 #header .container ) */
    body.stretched.larger_container #header.full-header #region-bar .container, 
    body.larger_container #header.full-header #region-bar .container, 
    .larger_container #region-bar .container {
    width: 1400px;
    }


}



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

    /* #region-bar >> .container (要覆蓋掉原來 #header .container ) */
    body.stretched #header.full-header #region-bar .container, 
    #region-bar .container {
    width: 90%;
    }

    /* 【 H2 + All Button(.region-btn) 】 >> Auto Region Suggestion Top Bar */
    #region-bar h2, 
    #region-bar .region-btn {
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;
    }

    /* 【 H2 】 >> Align Left (Auto Region Suggestion Top Bar) */
    #region-bar h2 {
    margin-bottom: 2%;
    }

}




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


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


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

    /* 【 All Button 】 >> Auto Region Suggestion Top Bar */
    #region-bar .region-btn a.btn {
    width: 100%;
    width: 90%;
    margin: 0 auto;
    }

    /* 【 H2 + All Button 】 >> 下面間隔空間 */
    #region-bar .region-btn a.btn:not(:last-child)/*【 Button 下面空間 (不含 Last-Child) 】 */, 
    #region-bar h2 {
    margin-bottom: 3%;
    }

}


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














/* =======================================================================================
	                                  多國調整
======================================================================================= */



/* 【 H2 】 >> Sticky Module */
body.locale_tr-tr #region-bar h2, 
body.locale_pl-pl #region-bar h2,
body[class*="locale_la-"] #region-bar h2,
body.locale_la-es #region-bar h2, 
body.locale_la-pt #region-bar h2, 
body.locale_de-de #region-bar h2, 
body.locale_es-es #region-bar h2, 
body.locale_fr-fr #region-bar h2, 
body.locale_pt-pt #region-bar h2, 
body.locale_se-sv #region-bar h2, 
body.locale_ru-ru #region-bar h2 {
    font-size: .85em;
}