@charset "big5";
/* CSS Document */
body {min-width: 1200px; color: #000; font: 13px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a {display: block; text-decoration: none; transition: .3s ease-in-out;}
:focus {outline: none;}
i {font-style: normal;}
.footer { width: 100%; margin: auto}
.tag_wfe {display: none;}

/**main_wrapper**/
.main_wrapper { }

/**group**/
.group {position: relative; margin: 20px 0 100px 0;}
.group:before {content:''; position: absolute; top: 125px; bottom: 0; left: -105px; right: 0; z-index: -1; margin: auto; width: 1294px; height: 517px; 
    background: url(../images/special_bg.png) no-repeat center top;}
.group .tit a {color: #fff;}
/**title***/
.tit {margin: auto; text-align: center;}
.group .tit{text-align: center; width: 624px; height: 98px; margin: auto; font-size: 48px; line-height: 105px; font-weight: bold; color: #fff; margin-bottom: 10px; text-shadow: 2px 2px 5px rgb(109 0 46 / 100%); background: url(../images/title_01.png) no-repeat center top;}
.group .tit a span{display: inline-block; background: url(../images/title_more.png) no-repeat center bottom; width: 100px; height: 55px;}
.group .tit a:hover span{transform: scale(0.95); filter: brightness(120%);}
.group .tit a {color: #fff; display: flex; align-items: center; justify-content: center;}
/**prod**/
.pro_temp {display: none;}
.prod_wrapper {position: relative;}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 1090px;}
.ProductList:after {clear: both; display: table; content: '';}
.ProductList .item {position: relative; float: left; width: 260px; margin: 5px; text-align: center;}
.ProductList .item > a {position: relative; display: block; overflow: hidden; background: #fff; border-radius: 10px;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;}
.ProductList .item > a:hover, .ProductList .item > a:focus, .ProductList .item > a:active {transform: translateY(-5px);}
.ProductList .ProductImg {position: relative; overflow: hidden; margin: 0 auto; width: 260x; height: 260px; border: 10px solid #fff;}
.ProductList .ProductImg img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%;}
.ProductList .ProductDesc {overflow: hidden; padding: 0 5px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px; background-image: linear-gradient(90deg, #30c2b5 0%, #306eb7 100%); width: 90%; margin: 2px auto; border-radius: 50px;}
.item .ProductName {overflow: hidden; padding: 2px 5px; height: 37px; color: #000; text-align: center; font-size: 15px; line-height: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;}
.item .ProducPrice, .item .Event_Condition {position: relative; padding: 5px; color: #f00; line-height: 1.2em;}
.item .ProducPrice label {cursor: pointer;}
.item .ProducPrice i em span {font-size: 13px;}
.item .ProducPrice i {display: flex; flex-direction: column-reverse;}
.item .ProducPrice span, .item .Event_Condition i span {margin: 0 2px; font-weight: 500; font-size: 33px;}
.item .ProducPrice i em {color: #747474; font-style: normal; font-size: 13px;}


@media screen and (max-width:1024px) {
body {width: 100vw; min-width: inherit;}
* {box-sizing: border-box;}

.main_wrapper { }

/**group**/
.group {margin: 20px 0 50px 0;}
.group .tit {width: 60vw; margin: auto; overflow: initial; left: 0; height: auto; padding-bottom: 15px;}	
.group .tit img {width: 100%;}
.group:before {height: -webkit-fill-available; top: 5vw; left: 0;
width: 96vw;
        border-radius: 15px;
        box-shadow: inset 0 0 0 2px #af30e6;
        background: #601b6d;
    background-size: 100%;}
    
/**prod_m**/
.prod_wrapper{ }  
.ProductList {width: 100vw; right: 0;}
.ProductList .item {width: 22vw; margin: 0.5vw; margin-bottom: 10px; left: 4vw;}  
.ProductList .ProductImg {width: 23vw; height: 23vw; border: 0;}
.ProductList .ProductDesc {height: 36px; overflow: hidden; line-height: 36px; font-size: 14px; padding: 0 3px;}
.item .ProductName {font-size: 14px; height: 40px;}	
}
	
@media screen and (max-width:768px) {
.group {padding: 2%;}
.group .tit {}
.ProductList .item {width: 48.8%;padding-left: 0.2em;padding-right: 0.2em;margin-bottom: 0.2em;margin-top: 0.2em; left: 0;}
.ProductList .ProductImg {width: 47vw; height: 47vw;}
.item .ProducPrice, .item .Event_Condition {margin-top: 0;}
.item .ProducPrice span, .item .Event_Condition i span {font-size: 30px;}
.group .tit {width: 96vw;background-size: contain; font-size: 6vw;line-height: 16vw;}
.group:before{background: none; background-color: #4c1662;	content: ''; width: 100%; height: auto; margin: auto; border-radius: 22px; position: absolute; top: 80px; bottom: 0; right: 0; left: 0; z-index: -2; box-shadow: inset 0 0 0 2px #af3afb;}
.group .tit a span{background-size: 100%; width: 17vw; height: 8.5vw; margin-left: 5px;}	
}

@media screen and (max-width:576px) {
	
}
	
@media screen and (max-width:375px) {
	
}
	
@media screen and (max-width:320px) {
.item .ProducPrice i em span { font-size: 11px;}
.item .ProducPrice .price_txt { font-size: 13px;}
.item .ProducPrice span, .item .Event_Condition i span {font-size: 27px;}

}