@charset "utf-8"; 
/* CSS Document */

.tp_header { position: fixed; width:100%; top:0; z-index:99;}
.tp_me_shadow { padding:10px; background:#fff; box-shadow: 0 0 10px #aaa; position:relative; overflow:hidden; transition: all .2s;}
.tp_me_shadow#rwd_hide_header {}
.tp_me_w { max-width:1200px; margin:auto;}

.tp_header #logo { display:inline-block; vertical-align:middle; width:190px; height:90px;}

.tp_header #logo img { max-width:100%; max-height:100%;}



.me_tp_features { display:inline-block; vertical-align:middle; width:calc(100% - 210px); text-align:right;}
.me_tp_features a { position:relative; display:inline-block; vertical-align:middle; font-size:16px; color:#000; margin:0 3px;}
.me_tp_features a i { position:absolute; top:0; left:40%; display:inline-block; font-style:normal; font-size:12px; background:#c00; color:#fff; text-align:center; width:16px; height:16px; line-height:16px; border-radius:100%;}
.me_tp_features a.jw-news:before,
.me_tp_features a.jw-user:before,
.me_tp_features a.jw-shoppingcart:before { content:''; background:no-repeat center center; display:block; width:32px; height:32px;}
.me_tp_features a.jw-news:before { background-image:url(../images/icon_thepeer_news.png);}
.me_tp_features a.jw-user:before { background-image:url(../images/icon_thepeer_member.png);}
.me_tp_features a.jw-shoppingcart:before { background-image:url(../images/icon_thepeer_cart.png);}
/*Sreach*/
.box_search { position:relative; display:inline-block; vertical-align:middle; width:160px; height:30px; margin-right:10px;}
.shop_search_txt { background:#fff; color:#666; border:none; border-radius:20px; padding:6px 60px 6px 10px; position:absolute; top:0; right:0; z-index:1; font-size:13px; height:19px;}
.shop_search_btn { background:#000; color:#fff; font-size:13px; border:none; border-radius:20px; position:absolute; top:0; right:0; z-index:5; padding:8px 15px; cursor:pointer;}
.box_search input[type=text]  { 
	-webkit-appearance: textfield; 
	-webkit-box-sizing: content-box; 	
	background: url(../images/search-icon.png) no-repeat 9px center #fff; 
	border: solid 1px #ccc; 
	padding: 5px 10px 5px 32px; 
	width:110px; 
	border-radius: 10em; 
	transition: all .5s; 
	outline:none; 
}
.box_search input[type=text]:focus { color:#e63917; width:160px;}

.tp_all_banner { background:url(../images/thepeers_banner.jpg) no-repeat center top; height:320px; margin:110px auto 0;}
/* ============================ */
 

/* Responsive Mega Menu */
.header_area { background: url(../images/bcl_bg01.png) repeat; display:none;}
.prod_use_style .header_area { display:block;}
.main_header_area.sticky { }
.navigation { width:100%; position:relative;}

.navigation-portrait { max-width:1200px; margin:auto;}
.navigation-fixed { position:fixed; top:0; left:0; z-index:19998;}
.navigation-hidden { width:0!important; height:0!important; margin:0!important; padding:0!important;}
.nav-header { /*float:left; */}
.navigation-hidden .nav-header { display:none;}

.nav-brand { display:none;}
.nav-brand:hover,
.nav-brand:focus { ;}


.nav-logo>img { height:48px; margin:11px auto; padding:0 15px; float:left;}
.nav-logo:focus>img { outline:initial;}
.navigation-portrait .nav-logo>img { height:36px; margin:6px auto 6px 15px; padding:0;}

.nav-toggle { width:44px; height:44px; padding:7px; position:absolute; top:7px; right:7px; display:none; cursor:pointer;}
.nav-toggle:before { content:""; position:absolute; width:30px; height:2px; background-color:#000; border-radius:10px; box-shadow:0 10px 0 0 #000,0 20px 0 0 #000;}

.nav-menu { list-style:none; text-align:center; display:block;}

/* 原本的手機板按鈕 後來發現不適用便隱藏
.navigation-portrait .nav-toggle { display:block;}
*/
.navigation-portrait .nav-menus-wrapper { width:270px; height:100%; top:0; left:-400px; position:fixed; background-color:#fff; z-index:20000; overflow-y:auto; -webkit-overflow-scrolling:touch; transition-duration:.2s; transition-timing-function:ease;}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right { left:auto; right:-400px;}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open { left:0;}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right.nav-menus-wrapper-open { left:auto; right:0;}
.nav-menus-wrapper-close-button { width:30px; height:30px; margin:10px 7px; display:none; float:right; color:#343a40; font-size:20px; cursor:pointer;}
.navigation-portrait .nav-menus-wrapper-close-button { display:block;}
.navigation-portrait .nav-menu { width:100%;}
.navigation-landscape .nav-menu.nav-menu-centered { float:none; text-align:center;}
.navigation-landscape .nav-menu.nav-menu-centered>li { float:none;}
.nav-menu>li { display:inline-block; /*float:left; text-align:left; */ position:relative;}
.navigation-portrait .nav-menu>li { width:100%; position:relative; border-top:solid 1px #f0f0f0;}
.navigation-portrait .nav-menu>li:last-child { border-bottom:solid 1px #f0f0f0;}
.nav-menu+.nav-menu>li:first-child { border-top:none;}
.nav-menu>li.focus { background:rgba(228,28,28,0.9);}
.nav-menu>li>a { display:inline-block; padding:30px 30px; color:#000;}
.navigation-portrait .nav-menu>li>a { padding:12px 15px 12px 26px;}
.nav-menu>li:hover>a {}
.nav-menu>li.active>a {}
.nav-menu>li.focus>a { color:#fff;}

.nav-menu>li>a>i,.nav-menu>li>a>[class*=ion-] { width:18px; height:16px; line-height:16px; transform:scale(1.4);}
.nav-menu>li>a>[class*=ion-] { width:16px; display:inline-block; transform:scale(1.8);}
.navigation-portrait .nav-menu.nav-menu-social { width:100%; text-align:center;}
.nav-menu.nav-menu-social>li { text-align:center; float:none; border:none!important;}
.navigation-portrait .nav-menu.nav-menu-social>li { width:auto;}
.nav-menu.nav-menu-social>li>a>[class*=ion-] { font-size:12px;}
.nav-menu.nav-menu-social>li>a>.fa { font-size:14px;}
.navigation-portrait .nav-menu.nav-menu-social>li>a { padding:15px;}
.submenu-indicator { margin-left:8px; margin-top:4px; float:right; transition:all .2s;}
.navigation-portrait .submenu-indicator { width:54px; height:44px; margin-top:0; position:absolute; top:0; right:0; text-align:center; z-index:20000;}

.submenu-indicator-chevron { height:6px; width:6px; display:block; border-style:solid; border-width:0 1px 1px 0; border-color:transparent #000 #000 transparent; transform:rotate(45deg);}
.nav-menu>li:hover .submenu-indicator-chevron,
.nav-menu>li.active .submenu-indicator-chevron,
.nav-menu>li.focus .submenu-indicator-chevron { border-color:transparent #fff #fff transparent;}


.navigation-portrait .submenu-indicator-chevron { border-color:transparent #999 #999 transparent; position:absolute; top:18px; left:24px;}
.navigation-portrait:hover .submenu-indicator-chevron { border-color:transparent #999 #999 transparent;}
.navigation-portrait .submenu-indicator.submenu-indicator-up { transform:rotate(-180deg);}
.nav-dropdown>li .submenu-indicator-chevron { border-color:transparent #999 #999 transparent;}
.nav-overlay-panel { width:100%; height:100%; top:0; left:0; position:fixed; display:none; z-index:19999;}
.no-scroll { width:100%; height:100%; overflow:hidden;}

.nav-button { margin:18px 15px 0; padding:8px 14px; display:inline-block; color:#fff; font-size:14px; text-align:center; border-radius:4px;}
.nav-button:hover,.nav-button:focus { color:#fff; text-decoration:none;}
.navigation-portrait .nav-button { width:calc(100% - 52px); margin:17px 26px;}
.nav-text { margin:25px 15px; display:inline-block; color:#343a40; font-size:14px;}
.navigation-portrait .nav-text { width:calc(100% - 52px); margin:12px 26px 0;}
.navigation-portrait .nav-text+ul { margin-top:15px;}

.nav-dropdown { list-style:none; min-width:180px; display:none; position:absolute; z-index:98; white-space:nowrap; background:#fff;}
.nav-dropdown:after { content:''; clear:both; width:100%; display:block;}
.navigation-portrait .nav-dropdown { width:100%; position:static; background:#f0f0f0; left:0;}
.nav-dropdown .nav-dropdown { left:100%;}

.nav-menu>li>.nav-dropdown { border-top:solid 1px #f0f0f0; left:0;}
.nav-dropdown>li { width:100%; float:left; clear:both; position:relative; text-align:left; border-bottom:1px solid #ccc;}
.nav-dropdown>li>a { padding:16px 20px; display:inline-block; float:left; color:#343a40; background-color:#fdfdfd;}
.nav-dropdown>li:hover>a,.nav-dropdown>li.focus>a { color:#c00;}
.nav-dropdown.nav-dropdown-left { right:0;}
.nav-dropdown>li>.nav-dropdown-left { left:auto; right:100%;}
.navigation-landscape .nav-dropdown.nav-dropdown-left>li>a { text-align:right;}
.navigation-portrait .nav-dropdown>li>a { padding:12px 15px 12px 15px; background:none;}

.navigation-portrait .nav-dropdown>li>ul>li>a { padding-left:15px; border-left:2px #e73232  solid;}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>a { padding-left:35px;}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>ul>li>a { padding-left:55px;}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>ul>li>ul>li>a { padding-left:75px;}
.nav-dropdown .submenu-indicator { right:15px; top:10px; position:absolute;}
.navigation-portrait .nav-dropdown .submenu-indicator { right:0; top:0;}
.nav-dropdown .submenu-indicator .submenu-indicator-chevron { transform:rotate(-45deg);}
.navigation-portrait .nav-dropdown .submenu-indicator .submenu-indicator-chevron { transform:rotate(45deg);}


.nav-dropdown>li>a .submenu-indicator-chevron,
.nav-dropdown>.focus>a .submenu-indicator-chevron { border-color:transparent #999 #999 transparent !important;}

.nav-dropdown>li:hover>a .submenu-indicator-chevron,
.nav-dropdown>.focus>a .submenu-indicator-chevron { border-color:transparent #c00 #c00 transparent !important;}

.navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator { left:10px;}
.navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator .submenu-indicator-chevron { transform:rotate(135deg);}
.nav-dropdown-horizontal { width:100%; left:0; background-color:#fdfdfd; border-top:solid 1px #f0f0f0;}
.nav-dropdown-horizontal .nav-dropdown-horizontal { width:100%; top:100%; left:0;}
.navigation-portrait .nav-dropdown-horizontal .nav-dropdown-horizontal { border-top:none;}
.nav-dropdown-horizontal>li { width:auto; clear:none; position:static;}
.navigation-portrait .nav-dropdown-horizontal>li { width:100%;}
.nav-dropdown-horizontal>li>a { position:relative;}
.nav-dropdown-horizontal .submenu-indicator { height:18px; top:11px; transform:rotate(90deg);}
.navigation-portrait .nav-dropdown-horizontal .submenu-indicator { height:42px; top:0; transform:rotate(0deg);}
.navigation-portrait .nav-dropdown-horizontal .submenu-indicator.submenu-indicator-up { transform:rotate(-180deg);}


.megamenu-tabs { width:100%; float:left; display:block;}
.megamenu-tabs-nav { width:20%; margin:0; padding:0; float:left; list-style:none;}
.navigation-portrait .megamenu-tabs-nav { width:100%;}
.megamenu-tabs-nav>li>a { width:100%; padding:10px 16px; float:left; color:#343a40; border:solid 1px #eff0f2; outline:0; background-color:#fff;}
.megamenu-tabs-nav>li.active a,.megamenu-tabs-nav>li:hover a { background-color:#f5f5f5;}
.megamenu-tabs-pane { width:80%; min-height:30px; padding:20px; float:right; display:none; font-size:13px; color:#343a40; border:solid 1px #eff0f2; background-color:#fff;}
.megamenu-tabs-pane.active { display:block;}
.navigation-portrait .megamenu-tabs-pane { width:100%;}
.megamenu-lists { width:100%; display:table;}
.megamenu-list { width:100%; margin:0 0 15px; padding:0; display:inline-block; float:left; list-style:none;}
.megamenu-list:last-child { margin:0; border:none;}
.navigation-landscape .megamenu-list { margin:-15px 0; padding:20px 0; border-right:solid 1px #f0f0f0;}
.navigation-landscape .megamenu-list:last-child { border:none;}
.megamenu-list>li>a { width:100%; padding:10px 15px; display:inline-block; color:#343a40; font-size:13px;}
.megamenu-list>li>a:hover { background-color:#c00; color:#fff;}


.nav-dropdown > li > a { color:#333; padding:10px 20px;}
.nav-dropdown > li > a:hover,.nav-dropdown > li > a:focus { color:#c00;}

.transparent-menu { position:absolute; width:100%; left:0; top:0; z-index:99;}
.navigation-portrait .nav-menu > li > a { height:auto; padding:14px 10px 14px 30px; text-align:left;}
/* Responsive Mega Menu */







/* ========= 20210712 mobile =========== */
.menu { background:#fff; width:100%; text-align:left; position:fixed; top:0; left:0; z-index:10;}
.menu ul,
.menu li { margin: 0; padding: 0;}
.menu a { color:#333;}
.menu a:hover, .menu a:focus { color:#923434;}
.menu > ul { width: 100%; position: relative; display: inline-block; display:none;}
.menu > ul li { display: inline-block; padding: 10px 7px;}
.menu .fa { padding:3px 6px; width:auto; color:#af6161; margin:0 7px;}
.menu .fa a { font-size: 0; padding: 0 !important;}
.menu .fa:hover, .menu .fa:focus { cursor: pointer;}
.menu .level-two { display: none; position: absolute; top: 100%; left: auto;}
.menu .level-two > li { display: block; background: transparent; padding: 0; transition: 0.3s all ease; position: relative; white-space: nowrap; border-bottom:1px #ddd solid;}
.menu .level-two > li:last-child { border:none;}
.menu .level-two > li:hover, .menu .level-two > li:focus { background: rgba(255, 255, 255, 0.1);}
.menu .level-two > li a { width: 100%; display: block; padding: 10px 7px; box-sizing: border-box;}
.menu .level-two .sharewidth > a { display: inline-block; width: auto;}

.menu .level-three { display: none; position: absolute; left:100%; top:0;}
.menu .level-three li { display: block; background: transparent; padding: 0; transition: 0.3s all ease; position: relative; white-space: nowrap;}
.menu .level-three li:hover, .menu .level-three li:focus { background: rgba(255, 255, 255, 0.1);}
.menu .level-three > li a { font-size: 14px; border-bottom:1px #f8f8f8 solid; background:#af6161; color:#fff;}

@media screen and (min-width: 769px) {
.navtoggle { display: none;}
}
@media screen and (max-width: 768px) {
.outside { width:44px; height:44px; padding:7px; position:absolute; top:30px; right:3px; cursor:pointer;}
.outside:before { content:""; position:absolute; width:30px; height:2px; background-color:#000; border-radius:10px; box-shadow:0 10px 0 0 #000,0 20px 0 0 #000;}
.tp_all_banner { margin-top:100px;}

/*
.outside:hover, .outside:focus { color: #000; cursor: pointer;}
*/
.menu { position:fixed; height:100%; top:0; left:-320px; overflow-y: auto; overflow-x: hidden; transform: translate(0 0); max-width: 320px; transition: 0.3s all ease;}
.menu .navtoggle { position: relative; top:0; right:0; left:0; display:block; text-align:center; font-size:0; padding:5px;}
.menu .navtoggle .fa { font-size:30px; border:0 solid transparent; padding:0; margin:0; color:#bd7a8a;}
.menu .navtoggle .fa:hover, .menu .navtoggle .fa:focus { background: transparent; opacity: 0.8;}
.menu.active { transform: translateX(320px); transition:0.3s all ease; box-shadow:0 0 10px #999; padding:5px;}
.menu > ul { display:block;}
.menu > ul li { display:block; position:relative;}
.menu > ul li .fa { position:absolute; top:6px; right:0; border: 1px #ccc solid; background:#fff;}
.menu > ul > li { border-bottom:1px #e0e0e0 solid;}
.menu > ul > li { padding:10px 0;}
.menu > ul > li > ul{ background:#f8f8f8; margin-top:10px;}
.menu .level-two,
.menu .level-three { position:relative; left:0; top:0;}
}

/* 202050304 */
.tp_all_banner{
	opacity: 0;
}