/*=========================================index===============================================*/
.topMenuBox{ display:none;}
.mainContentBox.indexStyle{ margin: 0em auto 0em auto;}

@media print {
/* 列印時是白紙黑字的 */
.mainContentBoxInpage{ margin:0em auto;}
}





.indexBanner{ position:relative; margin-top:115px;}
.indexBanner .slideBox{ width:100%;}
.indexBanner .slideBox .slideMask{ overflow:hidden;}
.indexBanner .slideBox .slideMask ul{ width:600vw;}
.indexBanner .slideBox .slideMask ul li{ float:left; width:calc(100% / 6); height:28.57vw; cursor:pointer; position:relative; overflow:hidden; background-color:#666;}
.indexBanner .slideBox .slideMask ul li img{ height:100%; position:absolute; left:50%; transform:translateX(-50%); }

.indexBanner .dot{ position:absolute; bottom:2em; width:100%;}
.indexBanner .dot a{ display:inline-block; width:20px; height:5px; padding:0 0.3em; background-color:#FFF; border-radius:10px; box-shadow:rgba(0,0,0,0.15) 1px 2px 3px; }
.indexBanner .dot .use{ background-color:#aace37;}
.indexBanner .whiteLine{ position:relative; background-color:#FFF; height:10px; box-shadow:rgba(0,0,0,0.1) 0 3px 5px;}


/*.rollMessage{ position:relative; background-color:#62b1b1; font-size:1em; line-height:1em; color:#FFF; margin:1em; padding:0.8em 1em; border-radius:0.8em; border-top-left-radius:0; box-shadow:rgba(0,0,0,0.15) 2px 3px 6px;}
.rollMessage .triangle{ position:absolute; top:0; left:-0.6em; width:1em; height:1em; background:url(../images/triangle.svg); 
background-size:cover;}
.rollMessage .rollMessageContentList{display:none;}*/

.rollMessageArea{ position:relative; background-color:#62b1b1; font-size:1em; line-height:1em; color:#FFF; margin:1em; padding:0.8em 1em; border-radius:0.8em; border-top-left-radius:0; box-shadow:rgba(0,0,0,0.15) 2px 3px 6px;}
.rollMessageArea .triangle{ position:absolute; top:0; left:-0.6em; width:1em; height:1em; background:url(../images/triangle.svg); background-size:cover;}
.rollMessageArea .textBox{ display: block; overflow: hidden; height: 1em;}

.mainContentBox .sortTitle{text-align:center; padding-bottom:1em; font-size:1.3em; font-weight:bold; color:#FFF; margin: 0 1rem;}
.mainContentBox .sortTitle span{ display:block; margin:auto; line-height:1em; padding:0.3em 0; border-radius:0.5em; background-color:#999;}
.mainContentBox .product{ width:23%; padding:0 1%; float:left;}
.mainContentBox .product:nth-child(2){ width:48%;}
.mainContentBox .product .pic { position:relative; width:100%; height:264px; overflow:hidden; border-radius:0.6em; box-shadow:rgba(0,0,0,0.15) 2px 3px 8px; }
.mainContentBox .product:nth-child(2) .pic { height:564px;}
.mainContentBox .product .pic img{ width:100%;; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition: all 0.3s;}
.mainContentBox .product .pic:hover img{ width:110%;}
.mainContentBox .product .pic a{ position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; text-decoration:none; transition:all 0.2s;}
.mainContentBox .product .pic a p{ display:block; position:absolute; top:20%; left:50%; font-size:0.8em; transform:translate(-50%,-50%); padding:0.5em; border:2px #FFF solid; color:#FFF; font-weight:bold; opacity:0; box-shadow:rgba(0,0,0,0.3) 0px 5px 30px; text-shadow:rgba(0,0,0,0.2) 0 2px 4px; transition:all 0.3s;}
.mainContentBox .product .pic a:hover p{ top:50%; opacity:1;}




/*-----popular------*/
.mainContentBox .popular .sortTitle span{ background-color:#a3c53d;}
.mainContentBox .popular .product .pic a p{ background-color:rgba(170,206,56,0.8);}
/*-----newListing------*/
.mainContentBox .newListing .sortTitle span{ background-color:#65b9b9;}
.mainContentBox .newListing .product .pic a p{ background-color:rgba(100,185,188,0.8);}
/*-----weekly------*/
.mainContentBox .weekly .sortTitle span{ background-color:#f9be00;}
.mainContentBox .weekly .product .pic a p{ background-color:rgba(250,190,0,0.8);}

.mainContentBox .searchPagre{ width:23% !important;}
.mainContentBox .searchPagre .pic{ height:264px !important;}

/*-----search------*/
.mainContentBox .popular .sortTitle span{ background-color:#a3c53d;}
.mainContentBox .popular .product .pic a p{ background-color:rgba(170,206,56,0.8);}

.productBox .allProductCount{background-color:rgba(170,206,56,1); position:relative; padding:0.5em 1em;}
.productBox .allProductCount .sorting{ position:absolute; top:50%; right:1em; transform:translateY(-50%);}
.productBox .allProductCount .sorting a{ padding:0.3em 0.6em;; background-color:#FFF; color:#999; font-size:0.8em; text-decoration:none;}
.productBox .allProductCount .text{ color:#FFF; font-size:0.8em;}

.rightBox .productBox .pageNumber,.productBox .pageNumber{ padding: 2em 1em 4em 1em; margin:0 1%; text-align:center;}
.rightBox .productBox .pageNumber a,.productBox .pageNumber a{ display:inline-block; font-size:0.9em; padding:0.15em 0.4em; margin:0 0.1em; border-radius:0.3em; background-color:#FFF; vertical-align:sub; color:#666; font-weight:bold;}
.rightBox .productBox .pageNumber a:hover,.productBox .pageNumber a:hover{ background-color:#CCC;}
.rightBox .productBox .pageNumber a span,.productBox .pageNumber a span{ display:block; transform:rotate(-90deg);}
.rightBox .productBox .pageNumber .use,.productBox .pageNumber .use{ background-color:#666; color:#FFF;}



.nationalGroupBg{ background-color:#FFF; border-radius:1.5rem; margin:5em auto 2em auto; box-shadow: 0 10px 21px rgba(0,0,0,0.2); width:96%;}
.nationalGroupTitle{text-align:center; font-size:3em; padding:1.5em 0 2.5em 0; font-weight:bold; color:#FFF; text-shadow: 0 3px 10px rgba(0,0,0,0.5); border-radius:1.5rem; background:url(../images/nationalGroupTitleBg.svg) no-repeat top center; background-size: auto 100%;}
.nationalGroup{ position:relative; background-color:#000; height:300px; width:100%; overflow:hidden;}
.nationalGroup ul{ position:relative; height:100%; background-color:#FFF;}
.nationalGroup ul li{ position:relative; width:33.33%; height:100%; float:left;}
.nationalGroup ul li a{ display:block; width:100%; height:100%; opacity:1; transition:all 0.3s;}
.nationalGroup ul li a:hover{ opacity:0;}
.nationalGroup ul li:nth-child(1){ background:url(../images/tw02.jpg) center center; background-size:cover;}
.nationalGroup ul li:nth-child(2){ background:url(../images/us02.jpg) center center; background-size:cover;}
.nationalGroup ul li:nth-child(3){ background:url(../images/uk02.jpg) center center; background-size:cover;}
.nationalGroup ul li:nth-child(1) a{ background:url(../images/tw01.jpg) center center; background-size:cover;}
.nationalGroup ul li:nth-child(2) a{ background:url(../images/us01.jpg) center center; background-size:cover;}
.nationalGroup ul li:nth-child(3) a{ background:url(../images/uk01.jpg) center center; background-size:cover;}
.nationalGroup ul li h3{ display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:3em; font-weight:400; color:#FFF; text-shadow:rgba(0,0,0,0.3) 0 3px 5px;}





.brand{ position:relative; padding:2em 0;}
.brand .slideBox{ max-width:990px; margin:auto; padding:0 81px;}
.brand .slideBox .slideMask{ overflow:hidden;}
.brand .slideBox .slideMask ul{ width:500%;}
.brand .slideBox .slideMask ul li{ float:left; width:159px; height:80px; padding:3px; cursor:pointer;}/*990除6*/
.brand .slideBox .slideMask ul li img{ height:100%; width:100%;}


/****************switchBtn*****************/
.indexBanner .switchBtn,.nationalGroup .switchBtn,.brand .switchBtn{ position:absolute; top:50%; transform:translateY(-50%); width:94%; padding:0 3%; background-color:#F00;}
.nationalGroup .switchBtn{ display:none;}
.indexBanner .switchBtn a,.nationalGroup .switchBtn a,.brand .switchBtn a{ display:block;  text-decoration:none; font-size:3em; font-weight:bold; color:rgba(255,255,255,0.8); }
.indexBanner .switchBtn .left,.nationalGroup .switchBtn .left,.brand .switchBtn .left{ position:absolute; left:1em; bottom:-0.1em; text-shadow:3px 3px 8px rgba(0,0,0,0.5); transform:rotate(45deg);}
.indexBanner .switchBtn .right,.nationalGroup .switchBtn .right,.brand .switchBtn .right{ position:absolute; right:1em; bottom:-0.1em; text-shadow:-3px -3px 8px rgba(0,0,0,0.5); transform:rotate(-135deg);}


/********1-5*******/
.topMenuBoxInpage5{ display:block; float:left; width:20%;}
.topMenuBoxInpage5 .topMenu .listA{ padding:0.4em; font-size:1.3em; display:block; margin-bottom:0.5em; margin-right:0.8em; text-decoration:none; text-shadow:rgba(0,0,0,0.3) 1px 2px 3px; color:#FFF;  transition:all 0.2s; border-bottom-right-radius:0.5em; font-weight:700; background-color:rgba(170,206,55,1);}
.topMenuBoxInpage5 .topMenu .listA:hover{ text-shadow:rgba(0,0,0,0.3) 3px 5px 6px; padding:0.4em 0.4em 0.4em 1em; background-color:rgba(170,206,55,1);}
.topMenuBoxInpage5 .topMenu .secondMenu a{ display:block; color:#444; font-size:1.2em; margin-bottom:0.5em; padding:0.3em 0 0.3em 1em; text-decoration:none; transition:all 0.3s;}
.topMenuBoxInpage5 .topMenu .secondMenu a:hover{padding:0.3em 0 0.3em 2em; color:rgba(170,206,55,1);}


.fullcontent{ background-color:#FFF; border-radius:1em; padding:1em; margin: 0 2%;}
.fullcontent .group{ padding:0.6em; font-size:1.6em; font-weight:bold; color:#666; text-align:center; }
.fullcontent .brandLogos{}
.fullcontent .brandLogos li{ float:left; width:18%; margin:1% 1% 4em 1%;}
.fullcontent .brandLogos li a{ display:block; width:100%; height:216px; text-decoration:none;}
.fullcontent .brandLogos li a span{ display:block; position:relative; width:100%; height:100%; overflow:hidden; border-radius:00.5em;}
.fullcontent .brandLogos li a span::after{ content:"View Products"; font-weight:700; background-color:rgba(170,206,55,0.8); text-align:center; color:#FFF; position:absolute; top:0; left:50%; transform:translate(-50%,-50%); opacity:0; padding:0.5em; font-size:0.8em; border:2px #FFF solid; transition:all 0.3s; box-shadow:rgba(0,0,0,0.2) 0 5px 15px; }
.fullcontent .brandLogos li a:hover span::after{ top:50%; opacity:1;}
.fullcontent .brandLogos li a span img{ position:absolute; top:50%; transform:translateY(-50%); width:100%; }
.fullcontent .brandLogos li a p{ display:block; text-align:center; color:#999; padding:1em 0; font-weight:bold;}
.fullcontent .brandLogos li a:hover p{ color:rgba(170,206,55,1);}

.rightBox{ float:right; width:80%;}
.rightBox .productBox .product .pic { position:relative; width:100%; height:220px; overflow:hidden; border-radius:0.6em; box-shadow:rgba(0,0,0,0.15) 2px 3px 8px; }
.rightBox .productBox .product .pic a p{ background-color:rgba(170,206,55,1);}

.rightBox .productBox .allProductCount{ position:relative; padding:0.5em 1em; margin:0 1%; border-radius:0.5em; background-color:rgba(170,206,55,1);}
.rightBox .productBox .allProductCount .sorting{ position:absolute; top:50%; right:1em; transform:translateY(-50%);}
.rightBox .productBox .allProductCount .sorting a{ padding:0.3em 0.6em;; background-color:#FFF; color:#999; font-size:0.8em; text-decoration:none;}
.rightBox .productBox .allProductCount .text{ color:#FFF; font-size:0.8em;}


.rightBox .productBox .brandBanner{ height:16em; width:98%; overflow:hidden; background-color:#666; position:relative; margin:0 1%; border-top-left-radius:1em; border-top-right-radius:1em;}
.rightBox .productBox .brandBanner img{ height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.rightBox .productBox .brandAbout{ padding:1em; background-color:#FFF; margin:0 1% 2em 1%; border-bottom-left-radius:1em; border-bottom-right-radius:1em;}
.rightBox .productBox .brandAbout b{display:block; text-align:center; font-size:1.1em; color:#999;}
.rightBox .productBox .brandAbout b span{color: rgba(170,206,55,1);}
.rightBox .productBox .brandAbout p{ display:block; font-size:0.9em; line-height:1.5em; color:#666;}
.rightBox .productBox .brandAbout .ezwox{margin:10px 0; color:rgba(170,206,55,1); font-weight:bold; border-bottom:1px #ccc dotted; padding-bottom:10px;}
.rightBox .productBox .brandAbout .ezwox strong{ display:block; text-align:center; }
@media only screen and (max-width: 1000px){
.rightBox .productBox .brandBanner{ width:96%; height:40vw; margin:0 2%;}
.rightBox .productBox .brandAbout{ margin:0 2% 2em 2%;}
}

.productBox .inpageBanner{ position:relative;}
.productBox .inpageBanner .slideBox{ max-width:100%; margin:auto; margin-bottom:1.5em;}
.productBox .inpageBanner .slideBox .slideMask{ overflow:hidden;}
.productBox .inpageBanner .slideBox .slideMask ul{ width:300%;}
.productBox .inpageBanner .slideBox .slideMask ul li{ float:left; width:33.33%; height:420px; cursor:pointer; position:relative; overflow:hidden; border-radius:0.5em; }
.productBox .inpageBanner .slideBox .slideMask ul li img{ height:100%; position:absolute; left:50%; transform:translateX(-50%); }

.productBox .inpageBanner .dot{ position:absolute; bottom:2em; width:100%; text-align:center;}
.productBox .inpageBanner .dot a{ display:inline-block; width:20px; height:5px; padding:0 0.3em; background-color:#FFF; border-radius:10px; box-shadow:rgba(0,0,0,0.15) 1px 2px 3px; }
.productBox .inpageBanner .dot .use{ background-color:#aace37;}

.productBox .inpageBanner .switchBtn{ position:absolute; top:50%; transform:translateY(-50%); width:94%; padding:0 3%;}
.productBox .inpageBanner .switchBtn a{ display:block;  text-decoration:none; font-size:2.5em; font-weight:bold; color:rgba(255,255,255,0.8); }
.productBox .inpageBanner .switchBtn .left{float:left; text-shadow:3px 3px 8px rgba(0,0,0,0.5); transform:rotate(45deg);}
.productBox .inpageBanner .switchBtn .right{ float:right;text-shadow:-3px -3px 8px rgba(0,0,0,0.5); transform:rotate(-135deg);}





@media only screen and (max-width: 1200px){/*------寬度--小於1200px----*/
.mainContentBox .product .pic {height:22vw;}
.mainContentBox .product:nth-child(2) .pic { height:47vw;}
.mainContentBox .searchPagre .pic{ height:22vw !important;}

.brand .slideBox{ width:82.5vw; padding:0 6.75vw;}
.brand .slideBox .slideMask ul li{ width:13.25vw; height:6.625vw; padding:0.25vw;}/*990除6*/

/********1-5*******/
.fullcontent .brandLogos li a{ height:17.5vw;}
.rightBox .productBox .product .pic { height:18.4vw;}

.productBox .inpageBanner .slideBox .slideMask ul li{ height:35vw;}

}

@media only screen and (max-width: 1000px){/*------寬度--小於1000px----*/

/*=========================================index===============================================*/

.indexBanner .slideBox .slideMask ul li{ height:60vw;}

.mainContentBox .product,.mainContentBox .product:nth-child(2){ width:31.33%;}
.mainContentBox .product .pic,.mainContentBox .product:nth-child(2) .pic{height:31.33vw;}

.mainContentBox .searchPagre{ width:31.33% !important;}
.mainContentBox .searchPagre .pic{ height:31.33vw !important;}

.nationalGroupTitle{ font-size:1.8em;}
.nationalGroup ul li{ position:absolute; top:0; width:90%; float:inherit;}
.nationalGroup ul li:nth-child(1){ left:-85%;}
.nationalGroup ul li:nth-child(2){ left:5%;}
.nationalGroup ul li:nth-child(3){ left:95%;}
.nationalGroup a{ display:block;}

.brand .slideBox ul li{ float:left; width:19%; padding:0.5%;}
.brand .slideBox .slideMask ul li{ width:15.5vw; height:7.75vw; padding:0.5vw;}/*5份*/

/****************switchBtn*****************/
.nationalGroup .switchBtn{ display:block;}
.indexBanner .switchBtn a,.nationalGroup .switchBtn a,.brand .switchBtn a{ font-size:2.5em;}


/********1-5*******/
.fullcontent .brandLogos li a{ height:23vw;}
.fullcontent .brandLogos li{ width:23%;}
.rightBox .productBox .product{ width:46%; padding:0 2%;}
.rightBox .productBox .product .pic { height:36.8vw;}
.rightBox .productBox .allProductCount{  margin:0 2%;}


}

@media only screen and (max-width: 800px){/*------寬度--小於800px----*/
section{ padding-top:54px;}
.mainContentBoxInpage{ margin:54px auto 3em auto;}
/*=========================================index===============================================*/

.topMenuBox{ position:fixed; left:0; top:3.4rem; width:100%; height:2.4em; z-index:1; text-align:center; overflow:scroll; transition:all 0.3s; box-shadow:rgba(0,0,0,0.1) 0 5px 15px; background-color:rgba(170,206,55,1); display:block;}
#OPsearch:target .topMenuBox{ top:5.9rem;}

/****************************************/
.topMenuBox .topMenu{ position:relative;}
.topMenuBox .topMenu .menuA{ position:absolute; top:0; width:8em; overflow:hidden;}
.topMenuBox .topMenu .menuA:nth-child(1){ left:0;}
.topMenuBox .topMenu .menuA:nth-child(2){ left:8em;}
.topMenuBox .topMenu .menuA:nth-child(3){ left:16em;}
.topMenuBox .topMenu .menuA:nth-child(4){ left:24em;}
.topMenuBox .topMenu .menuA:nth-child(5){ left:32em;}
.topMenuBox .topMenu .menuA:nth-child(6){ left:40em;}
.topMenuBox .topMenu .menuA:nth-child(7){ left:48em;}
.topMenuBox .topMenu .menuA:nth-child(8){ left:56em;}
.topMenuBox .topMenu .menuA:nth-child(9){ left:64em;}
.topMenuBox .topMenu .menuA:nth-child(10){ left:72em;}

.topMenuBox .topMenu .menuA .listA{ padding:0.4em; display:block; text-decoration:none; transition:all 0.2s; font-weight:700; font-size:1.2em; margin-bottom:0; border-bottom-right-radius:0; text-shadow:rgba(0,0,0,0.3) 1px 2px 3px; color:#FFF;}
.topMenuBox .topMenu .menuA .listA p{ padding:0; transition:all 0.3s;}

.topMenuBox .topMenu .menuA.hovered .listA p{ transform:translateX(20px); opacity:0;}
#menuOP01:target .listA p,#menuOP02:target .listA p,#menuOP03:target .listA p,#menuOP04:target .listA p,#menuOP05:target .listA p,#menuOP06:target .listA p,#menuOP07:target .listA p,#menuOP08:target .listA p{ transform:translateX(20px); opacity:0;}

.topMenuBox .topMenu .menuA .enterBtn{ display:block; position:absolute; top:0; left:-200%; width:100%; height:100%; overflow:hidden; transition:all 0.3s; opacity:0; text-decoration:none; text-shadow:rgba(0,0,0,0.3) 1px 2px 3px; color:#FFF; font-size:1.2em; font-weight:700; padding:0.4em; background-color:rgba(0,0,0,0.1);margin-bottom:0;  border-bottom-right-radius:0;}

#menuOP01:target .enterBtn,#menuOP02:target .enterBtn,#menuOP03:target .enterBtn,#menuOP04:target .enterBtn,#menuOP05:target .enterBtn,#menuOP06:target .enterBtn,#menuOP07:target .enterBtn,#menuOP08:target .enterBtn{ left:0; opacity:1;}
.topMenuBox .topMenu .menuA.hovered .enterBtn{ left:0; opacity:1;}
#menuOP01:target .secondMenu,#menuOP02:target .secondMenu,#menuOP03:target .secondMenu,#menuOP04:target .secondMenu,#menuOP05:target .secondMenu ,#menuOP06:target .secondMenu,#menuOP07:target .secondMenu,#menuOP08:target .secondMenu{ display:block;}
.topMenuBox .topMenu .menuA:hover .secondMenu{ display:block;}

.closeMenuC{ position:fixed; top:3.4rem; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0); z-index:-1; display:none;}
#menuOP01:target .closeMenuC,#menuOP02:target .closeMenuC,#menuOP03:target .closeMenuC,#menuOP04:target .closeMenuC,#menuOP05:target .closeMenuC,#menuOP06:target .closeMenuC,#menuOP07:target .closeMenuC,#menuOP08:target .closeMenuC{display:block;}


.topMenuBox .topMenu .secondMenu{ display:none; position:fixed; background-color:rgba(255,255,255,1); left:0; width:100%; padding-top:1em; box-shadow:rgba(0,0,0,0.1) 0 3px 20px;}
.topMenuBox .topMenu .secondMenu a{ display:block; color:#444; font-size:1.2em; margin-bottom:0.5em; padding:0.3em 0 0.3em 1em; text-decoration:none; transition:all 0.3s;}
.topMenuBox .topMenu .secondMenu a:hover{padding:0.3em 0 0.3em 2em;}
/******************************************/

.indexBanner{margin-top:0;}
.indexBanner .dot{ bottom:1.3em;}
.indexBanner .dot a{ width:15px; height:3px;}

.nationalGroupBg{ margin:2em auto 1.5em auto;}

.brand .slideBox .slideMask ul li{ width:19.5vw; height:9.75vw; padding:0.56vw;}/*990除4份*/


/********1-5*******/
.topMenuBoxInpage5{ display:none;}
.fullcontent .brandLogos li a{ height:31.33vw;}
.fullcontent .brandLogos li{ width:31.33%;}
.rightBox{ width:100%;}
.rightBox .productBox .product .pic { height:46vw;}

}


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

/*=========================================index===============================================*/

.topMenuBox{ font-size:0.9em; top:3.4rem; z-index:9;}

.mainContentBox .product{ padding:0 3%;}
.mainContentBox .product:nth-child(2){ width:94%;}
.mainContentBox .product:nth-child(2) .pic{height:94vw;}
.mainContentBox .product{ width:44%;}
.mainContentBox .product .pic{height:44vw;}


.mainContentBox .searchPagre{ width:44% !important;}
.mainContentBox .searchPagre .pic{ height:44vw !important;}


.nationalGroupTitle{ font-size:1.4em; padding:1em 0 2em 0; background-size: auto 90%;}
.nationalGroup .rollLeft,.nationalGroup .rollRight{ font-size:0.6em; width:3em;}


/****************switchBtn*****************/
.brand .switchBtn a{ display:none !important;}

/********1-5*******/
.fullcontent .brandLogos li a{ height:46vw;}
.fullcontent .brandLogos li{ width:46%; margin:1% 2% 4em 2%;}

.productBox .allProductCount{ margin:0 2%;}

}