@charset "utf-8";
/* CSS Document */


body{background:#fCfCfC url("/images/ui/bgA.png") no-repeat center center;background-size: cover;background-attachment: fixed;}

.lazyload{opacity: 0;}
.lazyloading{position: relative;opacity: 1; -webkit-transition: all 300ms;transition: all 300ms;}
img.lazyloading{background:#ffffff url('/images/loading_b.gif') center center no-repeat;background-size: 200px;}
/*
.lazyloading{-webkit-filter: blur(5px);filter: blur(5px);}
.lazyloaded{-webkit-filter: blur(0);filter: blur(0);}
*/

fieldset.borNo > legend{padding: 0.2rem 0.5rem;background-color:#F3F3F3;}

.numLi,.numA{counter-reset:num;}
.numLi > li,.numA > a{counter-increment:num;}
.numLi > li:nth-of-type(-n+9) > a::before,.numA > a:nth-of-type(-n+9) > div:nth-child(1)::before{content:'0'counter(num);}
.numLi > li:nth-of-type(n+10) > a::before,.numA > a:nth-of-type(n+10) > div:nth-child(1)::before{content:counter(num);}


.ls1{letter-spacing: 1px;}
.bt1{background-color:#0071BC;color:#fff !important;}
.bt2{background-color:#00A99D;color:#fff !important;}
.bt3{background-color:#F15A24;color:#fff !important;}
.btC{background-color: #ededed;color: #666;}

.bgBl{background-color:#31A2E1;}
.bgBl2{background-color:#6BB2A5;}
.bgW{background-color: #fff;}
.bgB{background-color:#272727;}
.bgG{background-color: #00B900;}
.bgG2{background-color: #669025;}
.bgG3{background-color: #8ABD46;}
.bgGy{background-color: #F7F7F7;}
.bgGy2{background-color: #CCC;}
.bgA4{background-color:rgba(0,0,0,0.4);}
.bgA7{background-color:rgba(0,0,0,0.7);}
.bgA8{background-color:rgba(0,0,0,0.8);}

.c1{color:#3898A0;}
.c2{color:#165298;}
.c3{color:#0071BC;}
.cW{color: #fff;}
.cR{color:#D50003;}
.cR2{color:#FC0004;}
.cGy{color: #999;}
.cGy1{color: #777;}
.cGy2{color: #555;}
.cGy3{color: #bbb;}
.bori{border-color: #eee !important;}
.borNo{border: none !important;}

.pF{position: fixed;width: 100vw;height: 100vh;left: 0;top:0;z-index: 100;}
.loading-rotate{display: inline-block;width: 2rem;height: 2rem;border-radius: 50%;border: 4px solid #00A99D;border-left: 4px solid #00A99D;border-right: 4px solid #00A99D;border-bottom: 4px solid transparent;}
.an-r{-webkit-animation: an-r 1.2s infinite linear;-moz-animation: an-r 1.2s infinite linear;-o-animation: an-r 1.2s infinite linear;animation: an-r 1.2s infinite linear;}

input[type=search]::-webkit-search-cancel-button{-webkit-appearance: none;}
input::placeholder{font-size: 0.9rem;font-weight: normal;}


.header{border-bottom: 5px solid rgba(0,0,0,0.8);z-index: 5;}/*#4d4d4d*/

.m,.m2{margin: auto;max-width: 100%;}

.main-item{padding-top: 1.2rem;}

.title::before{content: '\00A0';display: inline-block; line-height: 1.5rem;border-left: 7px solid #307CC3;}

/*table*/
.tbF{table-layout: fixed;display: block;overflow-x: auto;white-space: nowrap; -webkit-overflow-scrolling: touch;}
.tbF th,.tbF td:nth-child(1){position:sticky; position:-webkit-sticky;}
.tbF th{top:-1px;z-index: 3;background-color: #efefef;}
.tbF th:nth-child(1){left:-1px;z-index: 4;}
.tbF td:nth-child(1){left:-1px;z-index: 2;background-color:#fff;}

/*tb2*/
.tb2{max-width:100%;margin:auto;border-collapse:collapse !important;border-spacing: 0;}
.tb2 thead th{background-color: #3373B2;}
.tb2 thead th,.tb2 tbody td{border: 1px solid #bbb;padding: 0.5rem 0.5rem;line-height: 1.2rem;}
.tb2-td{background-color: #ededed;font-weight: bold;}

/*product*/
.product-ul > li > a{background-color: #808080;color: #fff;}
.product-ul > li.active > a{background-color: #C1272D;}

.product-class{min-height:30vh; display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.product-class > div{/*border: 1px solid #ddd;*/padding: 0.5rem;margin-bottom: 0.5rem;}
.product-class .item-img{display:block;width:100%;text-align: center;}

/*滑入*/
.product-class .item-img:hover,
.product-class a.hovImg1:hover
{border-radius: 3px; box-shadow: 0 0 2px 2px #FFF, 0 0 5px 2px #337ACF,0 0 12px 3px #68D2FF;text-shadow:none !important;}
.product-class .item-img:hover img{opacity: 0.7;}
.product-class a.hovImg1:hover .item-img{box-shadow:none;}


.product-class .item-title{display: -webkit-box;width:100%;line-height:1rem;margin-top:0.3rem;text-align: center;}
.product-class.f2 .item-img img{display: inline-block;padding: 0.8rem; border:1px solid #eee;border-radius: 3px;}

.product-more > div > div{max-width: 18rem; margin-right: 2rem !important;}
.product-more > div > div .item-img{text-align: center;}
.product-more > div > div .item-img img{max-width:14rem;max-height: 14rem;margin: auto;}
.product-more > div > div .item-img ~ div > span.ts12{overflow : hidden;-webkit-text-overflow: ellipsis;-o-text-overflow: ellipsis;text-overflow: ellipsis;display: inline-block;max-width: 100%; white-space : nowrap;}

/*movie*/
/*.movie-class a{padding: 2rem;border-radius: 10px;background-color: #f7f7f7; border: 1px solid #ddd;}*/

.breadcrumb,.breadcrumb a{color: #eee;/*color: #999;*/}
.breadcrumb a{font-size: 0.9rem;line-height: 1.2rem;}

/*search*/
.main-item[data-id="search"] .product-class.product-search > .item-project{-webkit-box-flex: 0;-ms-flex: 0 0 50%;flex: 0 0 50%;max-width:50%;margin-bottom: 0 !important;}
.main-item[data-id="search"] .product-class.product-search > .item-movie{margin-bottom: 0 !important;}
.main-item[data-id="search"] .product-class.product-search > .item-project img,.main-item[data-id="search"] .product-class.product-search > .item-movie img{object-fit:cover !important;}
.search-bar label{-webkit-animation-name: anInput;animation-name: anInput;-webkit-animation-duration: 0.6s;animation-duration: 0.6s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-direction: alternate;animation-direction: alternate;}

/*載入中&處理中-開始*/
.pF{position: fixed;width: 100vw;height: 100vh;left: 0;top:0;z-index: 100;}
.pFt::before{content: '載入中...';}
.pFt[data-title]::before{content:attr(data-title);}
.pFbt{position: absolute;display: inline-block;padding: 0.5rem;border-radius: 3px;right:1rem;top:1rem;}
.pFbt:hover{background-color: #4d4d4d;color: #fff;}
/*>>>黑色-全螢幕樣式*/
.pF1,.pF3{background-color:rgba(0,0,0,0.7);}
.pF1 .pFt{color: #fff;}
.pF1 .pFd{width:100%;height: 100%;}	
/*>>>白色-小框樣式*/
.pF2 .pFd{position:relative;width:30rem;max-width: 85%; height: 15rem;background-color:rgba(255,255,255,1);border: 1px solid #ddd;box-shadow: 1px 1px 8px 0 rgba(0,0,0,0.3);}
.pF2 .pFt{color: #4d4d4d;}
.pF3 .pFd{width:1200px;max-width: 100%; margin: auto;}

.loading-rotate{display: inline-block;width: 2rem;height: 2rem;border-radius: 50%;border: 4px solid #00A99D;border-left: 4px solid #00A99D;border-right: 4px solid #00A99D;border-bottom: 4px solid transparent;}
.an-r{-webkit-animation: an-r 1.2s infinite linear;-moz-animation: an-r 1.2s infinite linear;-o-animation: an-r 1.2s infinite linear;animation: an-r 1.2s infinite linear;}
.an-o{-webkit-animation: an-o 0.6s;-moz-animation: an-o 0.6s;-o-animation: an-o 0.6s;animation: an-o 0.6s;}


/*input動畫*/
@-webkit-keyframes anInput{
    0% {box-shadow:0 0 5px 0 #0084C6,0 0 15px 0 #0084C6;}
    100% {box-shadow:0 0 1px 0 #18AEEA,0 0 3px 0 #18AEEA;}
}
@keyframes anInput{
    0% {box-shadow:0 0 5px 0 #0084C6,0 0 15px 0 #0084C6;}
    100% {box-shadow:0 0 1px 0 #18AEEA,0 0 3px 0 #18AEEA;}
}


/*nav*/
.nav > ul ul{display: none;position: absolute;border: 1px solid #ddd;background-color: #fff; border-radius: 5px;box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.2);padding: 0.5rem;font-weight: bold;top:1.8rem;right:-0.8rem;min-width:10rem;}
.nav > ul ul a{display: block;padding: 0.3rem 1rem;text-align: left;white-space: nowrap;}
.nav > ul li{position: relative;}
.nav > ul > li ul a::before{content: '';display: inline-block;height: 1rem;margin-right: 0.5rem; line-height: 1rem;border-left: 6px solid #306EC1;}
.nav > ul > li div > a::before{content: '';height:0.8rem;margin-right: 0.3rem; line-height:0.8rem;border-left: 4px solid #DDD;}




/*navs*/
.navs ul,.navs li{text-align: left;}
.navs li{font-size: 1.1rem;font-weight: bold;padding: 0.5rem 0; margin-top: 0.3rem;margin-bottom: 0.3rem;}
.navs > ul > li > a i{padding-right: 0.4rem;}
.navs li li{font-size: 1.05rem;font-weight:normal;padding: 0.2rem 0 0.2rem 1.5rem; margin-top: 0.3rem;margin-bottom: 0.3rem;}
.navs li li:last-child{border-bottom: none;}
.navs li a{display: block;}


/*search*/
.search > .search-bar{background-color:#fafafa;z-index:1000;}
.search > .search-bar{position: fixed;top:0;left:0;width:100%; border-radius: 0;border: 0; z-index: 3px;}
.search-how-ul li.active a{background-color: #00A99D;color: #fff;}


/*slick*/
.slick-gp img{ object-fit: contain !important;}
.slick-nav > div{padding: 0.2rem;}
.slick-nav img{padding: 0.2rem;cursor: pointer;}


/*
.slick-nav .slick-track{-webkit-transform:none !important;transform:none !important;}
.slick-nav .slick-slide{padding: 0.2rem;}
.slick-nav img{display: inline-block;padding: 0.3rem;cursor:pointer;}
*/


/*society*/
.society li{margin-right: 0.3rem;}
.society img{max-width: 2rem;}

.imgActive{box-shadow: 0px 0px 5px 2px rgba(3,110,183,0.5);}

/*燈箱*/
.mfp-bg{background:rgba(0,0,0,0.5) !important;}
.mfp-close{font-size: 2.5rem;}

/*footer*/
.footer fieldset,.contact-phone fieldset{min-width: 15rem;margin-bottom: 1.5rem;}

/*購物車-已加入購物車的按鈕背景綠色*/
.main-item .item-bt-buy.style-buyOk{position: relative;background:green;}
.main-item .item-bt-buy.style-buyOk::after{content:"✓";position:absolute;right:0.1rem;bottom:0;display:inline-block;font-size:0.8rem;}

/*active*/
.hov1t:active{color:#FFF3B6 !important;}
.hov1:active,.nav > ul ul a:active{background-color: #1E2124 !important;color:#fff !important;}
.hov2:active{background-color: #F15A24 !important;color:#fff !important;text-shadow:none !important;}
.hov3:active{background-color: #669025 !important;color:#fff !important;}
.hov4:active{background-color: #0071BC !important;color:#fff !important;}
.hov5:active{box-shadow: 0px 0px 5px 2px rgba(3,110,183,0.2);}
.hov6:active{background-color: #f7f7f7;}
.hovS1:active,.hovS1i:active{box-shadow: 0 0 2px 2px #FFF, 0 0 5px 2px #337ACF,0 0 12px 3px #68D2FF;text-shadow:none !important;}
.hovS2:active{box-shadow: 0 0 2px 2px #FFF, 0 0 5px 2px #F38F00,0 0 12px 3px #FFB600;text-shadow:none !important;}
.hovS1:active,.hovS2:active{color:#fff !important;}

.hovImg1:active img{opacity: 0.7;}
.slick-nav img:active{box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2);}
footer a:active{color: #F3AD00;}
.breadcrumb a:active{color:#FFE713;}/*#0071BC*/


/*hover*/
@media (any-hover: hover){
	.hov1t:hover{color:#FFF3B6 !important;}
    .hov1:hover,.nav > ul ul a:hover{background-color: #1E2124 !important;color:#fff !important;}
    .hov2:hover{background-color: #F15A24 !important;color:#fff !important;text-shadow:none !important;}
    .hov3:hover{background-color: #669025 !important;color:#fff !important;}
    .hov4:hover{background-color: #0071BC !important;color:#fff !important;}
    .hov5:hover{box-shadow: 0px 0px 5px 2px rgba(3,110,183,0.2);}
    .hov6:hover{background-color: #f7f7f7;}
    .hovS1:hover,.hovS1i:hover{box-shadow: 0 0 2px 2px #FFF, 0 0 5px 2px #337ACF,0 0 12px 3px #68D2FF;text-shadow:none !important;}
    .hovS2:hover{box-shadow: 0 0 2px 2px #FFF, 0 0 5px 2px #F38F00,0 0 12px 3px #FFB600;text-shadow:none !important;}
    .hovS1:hover,.hovS2:hover{color:#fff !important;}
    

    .hovImg1:hover img{opacity: 0.7;}
    
    .slick-nav img:hover{box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2);}
    
    .breadcrumb a:hover{color: #FFE713;}
    
    footer a:hover{color: #F3AD00;}    
    
    .footer-bar li a:hover{ background-color:#F15A24 !important;}
}





@media screen and (max-width:479px) {
    .fx1-xxsi > *{-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width:100%;}    
    .none-s{display: none;}
    .tl-xxsi{text-align: left;}
	.product-ul > li > a{padding: 0.2rem 0.4rem;}
    .product-class{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
    .product-class > div{-webkit-box-flex: 0;-ms-flex: 0 0 49%;flex: 0 0 49%;max-width:49%;margin-bottom:2.5rem !important;}
	.product-class:not([data-project]).f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width:100%;margin-bottom: 2rem;border-bottom: 1px solid #eee;}
	
    
    .product-class .item-img img{width:calc(100% - 2rem);height:6rem;}
    .product-class:not([data-project]).f2 .item-img img{width:14rem;padding: 0; border: none;}
    
	.product-more > div > div{max-width: 17rem; margin-right: 0.5rem !important;}
	
	
    .tb2 .td-spe > div > span{display: block;}
    
    /*slick*/
    .slick-nav > div{min-width:4rem;min-height: 4rem;width:4rem;height: 4rem;}
    
}
@media screen and (min-width:480px) {
/*	.menu-mid,.menu-mid ul{display: none;}*/
    .product-class > div{-webkit-box-flex: 0;-ms-flex: 0 0 32.5%;flex: 0 0 32.5%;max-width:32.5%;}/*max-width:16.66%;*/
	
	.product-class:not([data-project]).f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 48%;flex: 0 0 48%;max-width:48%;margin-bottom: 2rem;}
	
    .product-class .item-img img{width:calc(100% - 2rem);height:6rem;}
	.product-class:not([data-project]).f2 .item-img img{width:8rem;height:8rem;}	
    
    
    
	.item-img.mo img{max-width: 20rem;}
    
    /*slick*/
    .slick-nav > div{min-width:5rem;min-height: 5rem;width:5rem;height: 5rem;}
}

@media screen and (min-width:480px) and (max-width: 767px) {
    .fx2-xs > *{-webkit-box-flex: 0;-ms-flex: 0 0 49%;flex: 0 0 49%;max-width:49%;}
}

@media screen and (max-width:768px) {
	body{padding-top:3rem;}/*3.5rem*/
    body.bodyPDT{padding-top:4.5rem;}
    :target{padding-top: 4rem;margin-top: -4rem;}
    
    
    
    .fx1-xsi > *{-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width:100%;}
    
    .fx2P-xsi > *{-webkit-box-flex: 0;-ms-flex: 0 0 48%;flex: 0 0 48%;max-width:48%;}
    .fx3P-xsi > *{-webkit-box-flex: 0;-ms-flex: 0 0 31%;flex: 0 0 31%;max-width:31%;}
    .f100-xsi{-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width:100%;}
    .f85-xsi{-webkit-box-flex: 0;-ms-flex: 0 0 85%;flex: 0 0 85%;max-width:85%;}
    .f11a-xsi{-webkit-box-flex: 1;-ms-flex: 1 1 auto;flex: 1 1 auto;}
    .fw-xsi{-ms-flex-wrap: wrap;flex-wrap: wrap;}
    .none-xsi{display: none;}
	.blockN-xsi{display: block;}
	
    .PDH8-xsi{padding-left: 0.8rem;padding-right: 0.8rem;}
    .PDH5-xsi{padding-left: 0.5rem;padding-right: 0.5rem;}
    .PDH0-xsi{padding-left: 0;padding-right: 0;}
    .MG10T-xsi{margin-top: 1rem;}
    .MG5B-xsi{margin-bottom: 0.5rem;}
    .tc-xsi{text-align: center;}
    .ts14-xsi{font-size: 1.4rem;}
    
    .header .logo{padding:0.1rem 0.5rem;}
	.header .logo > img{height: 2.8rem !important;}
    .header .logo > img:nth-child(1){display: none;}
    .header .logo > img:nth-child(2){display:inline-block;}
    
	
	/*樣式2*/
	.search > .search-bar{padding: 0.7rem 0.8rem 0.7rem 0; }
/*	.search > .search-bar > div{padding-left: 0.3rem;padding-right: 1.5rem;}*/
/*
	.search i[data-icon="search"]{left:0.6rem;top:0.6rem;}
	.search i[data-icon="clear"]{right:0.3rem;top:0.3rem;}
*/
	
	
    .main-item{min-height:calc(100vh - 22rem);}
    
    /*nav*/
    .nav{display: none;position: fixed;width: 100vw;height: 100vh;left:0;top:0;z-index: 100;background-color:rgba(0,0,0,0.7);-webkit-animation-name: anL;animation-name: anL;}
    .nav > ul{display: block;width:80%;height:100%;margin:0 0 0 auto ; padding:2rem 1rem;background:#fff url("/images/ui/bgA.png") no-repeat center center;background-size: cover;overflow-y: auto;overflow-x: hidden;}
    
    .nav > ul > li{display: block !important;width:100%;padding:0.3rem 0;border-bottom: 1px solid #ededed;}
/*    .nav > ul > li.search .search-bar,.nav > ul > li.search > a{display: none;}*/
    .nav > ul > li .borR,.nav > ul > li a i{display: none !important;}
    
    
    .nav > ul > li a{display: block;text-align: left;padding:0.6rem 1rem;font-size: 1.1rem;}
    .nav > ul > li > a::before{content: '';display: inline-block;height: 1rem;margin-right: 0.5rem; line-height: 1rem;border-left: 6px solid #306EC1;}
    .nav-close{display: inline-block;position: absolute;right:0.5rem;top:0.5rem;padding: 0.5rem 0.6rem; line-height: 1rem; border-radius: 3px;color: #C0C0C0; font-size: 1.6rem;}
    .nav > ul > li a:hover,.nav-close:hover{background-color:#3A6496;color: #fff;}    
    .nav > ul > li a:hover::before{border-left-color: #fff;}    
	.nav > ul ul{position: relative;top:0.3rem !important;width:90%;}
    
    .nav ul.oviewY{max-height:100% !important;margin-bottom: 2rem;}
    
    
	
    .product-main,.product-back{padding-left: 1rem;padding-right: 1rem;}
    .product-class > div{padding: 0;margin-bottom: 2rem;}
    .product-class:not([data-project]).f2 .item-img img{width:14rem;height:14rem;}
    
    .product-class[data-project].f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width:100%;margin-bottom: 2rem;}
    .product-class[data-project].f2 .item-img img{padding: 0;width: 100%;height: 100%;}
    .product-class[data-project].f2 .item-img > div{height: 10rem;}     
    
    .item-img.mo img{max-width:100%;max-height: 500px;}
    
    /*search*/
    .main-item[data-id="search"] .product-class.product-search > .item-project{-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width:100%;}
    .main-item[data-id="search"] .product-class.product-search > .item-project img{max-height: 10rem;}
    
    .tb2{width:100%;}
    .tb2 col[width="110"]{width:5rem;}
    
    .top{bottom:4rem;}
    
    /*slick*/
    .slick-gp img{min-height: 15rem;max-height: 20rem;}
}

@media screen and (min-width:769px) {

	body{padding-top:6rem;}/*8rem*/
    body.bodyPDT{padding-top:7rem;}/*9.5*/
    :target{padding-top: 8.5rem;margin-top: -8.5rem;}
   
    
    .fw-sm{-ms-flex-wrap: wrap;flex-wrap: wrap;}
	.fx2P-sm > *{-webkit-box-flex: 0;-ms-flex: 0 0 48%;flex: 0 0 48%;max-width:48%;}
    .fx4P-sm > *{-webkit-box-flex: 0;-ms-flex: 0 0 23%;flex: 0 0 23%;max-width:23%;}
    .fx5P-sm > *{-webkit-box-flex: 0;-ms-flex: 0 0 18%;flex: 0 0 18%;max-width:18%;}
    .fx6P-sm > *{-webkit-box-flex: 0;-ms-flex: 0 0 14.67%;flex: 0 0 14.67%;max-width:14.67%;}
    .fx7P-sm > *{-webkit-box-flex: 0;-ms-flex: 0 0 12.28%;flex: 0 0 12.28%;max-width:12.28%;}
    .fx8P-sm > *{-webkit-box-flex: 0;-ms-flex: 0 0 10.5%;flex: 0 0 10.5%;max-width:10.5%;}
    .fx6Pb-sm > *{-webkit-box-flex: 0;-ms-flex: 0 0 15.5%;flex: 0 0 15.5%;max-width:15.5%;}
    .none-sm{display: none;}
    .iblock-sm{display: inline-block;}
    .PDH10-sm{padding-left: 1rem;padding-right: 1rem;}
    
    /*logo*/    
    .header .logo > img:nth-child(1){display: inline-block;}
    .header .logo > img:nth-child(2){display:none;}
	
/*	.search > .search-bar > div{padding-left: 0.3rem;padding-right: 1.5rem;}*/
/*	.search > .search-bar{padding-top: 0.8rem;padding-bottom:0.8rem;}*/

	.search > .search-bar{padding: 0.8rem 1.2em 0.8rem 0; }
/*    .search > .search-bar{padding: 2.4rem 1.2em 2.4rem 0;}*/
    
    
	.search > .search-bar input{padding-top: 0.6rem;padding-bottom:0.6rem;font-size: 1.1rem; line-height: 1.4rem;}
/*
	.search i[data-icon="search"]{left:0.6rem;top:0.9rem;}
	.search i[data-icon="clear"]{right:0.3rem;top:0.6rem;}
*/
	
	/* nav */
    .nav{display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important;-webkit-box-align: center !important;-ms-flex-align: center;align-items: center !important;-webkit-box-pack: end !important;-ms-flex-pack: end !important;justify-content: flex-end !important;}
    
	.nav > ul > li:not(:last-of-type) ul{right:-3.5rem;}
    .nav li{font-size: 1.1rem;}
    
    .nav > ul li:hover > ul{display: block;-webkit-animation-name: an1;animation-name: an1;-webkit-animation-duration: 0.3s;animation-duration: 0.3s;z-index: 999;}
	
    .nav-close{display: none;}
    
    .main-item{min-height:calc(100vh - 22rem);}
    
    .product-class > div{-webkit-box-flex: 0;-ms-flex: 0 0 24%;flex: 0 0 24%;max-width:24%;margin-bottom: 1.4rem;}/*max-width:15%;*/
	.product-class:not([data-project]).f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 31%;flex: 0 0 31%;max-width:31%;margin-bottom: 4rem;}
	.product-class[data-buy].f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 33.33%;flex: 0 0 33.33%;max-width:33.33%;margin-bottom: 0;}
	
    .product-class .item-title{max-width: 7rem;margin: 0.4rem auto 0 auto;}
    .product-class .item-img img{width:calc(100% - 2rem);height:6rem;}
	.product-class:not([data-project]).f2 .item-img img{width:12rem;height:12rem;}
    
    
    .product-class[data-project].f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 49%;flex: 0 0 49%;max-width:49%;margin-bottom: 2rem;}
    .product-class[data-project].f2 .item-img img{padding: 0;}
    .product-class[data-project].f2 .item-img > div{height: 10rem;}    
    
	.item-img.mo img{max-width: 800px;max-height: 500px;}
    
    /*movie*/
    .product-class.movie.f2 > div{-webkit-box-flex: 0 !important;-ms-flex: 0 0 50% !important;flex: 0 0 50% !important;max-width:50% !important;}
    .product-class.movie.f2 .item-img img{height: 16rem !important;}
    
    .tb2{width:100%;}
    
    .top{bottom:2.2rem;}
    
    /*slick*/
    .slick-gp img{min-height: 20rem;max-height: 35rem;}
}

@media screen and (max-width:920px) {
/*
    body{padding-bottom: 3rem;}    
    :target{padding-top: 3.5rem;margin-top: -3.5rem;}
*/
/*
    body{padding-top:3.5rem;}
    body.bodyPDT{padding-top:4.5rem;}
    :target{padding-top: 4rem;margin-top: -4rem;}
*/
    
    
    .none-m{display: none;}
	
	/*樣式1
    .search > .search-bar{position: fixed;top:0;left:0;width:100%; border-radius: 0;border: 0; z-index: 3px;}
    .search > .search-bar > div:nth-child(1){display: none;}
    .search > .search-bar label > div{display: none;}
	.search-close{display: none;}
	*/
	
	
	
	
    .main-item[data-id="search"] a[data-clear="on"]{font-size: 1rem;padding:0.1rem 0.5rem;}
    
    .footer-bar{width:100% !important; padding: 0px !important;position: fixed;bottom:0px;left:0px;box-shadow: 0px -1px 1px 1px rgba(0,0,0,0.2);  z-index:100;}
    .footer-bar li{display: block;float: left;width:calc(100% / 3);list-style: none;}
    .footer-bar ul,.footer-bar li{margin: 0px !important; padding: 0px !important; list-style: none;}
    .footer-bar li a{ font-size: 13px; display: block; width:100%; padding: 0.5em 0.5em; margin: 0px !important;color: #fff;text-align: center;line-height: 32px !important;}	
    .footer-bar li a img{ width:30px;height:auto;}
    .footer-bar li:nth-child(1) a{background-color: #00B900;}
    .footer-bar li:nth-child(2) a{background-color: #00A99D;}
    .footer-bar li:nth-child(3) a{background-color: #3E5B99;}
    .footer-bar li a:active{ background-color:#F15A24 !important;}
    .footer-bar li a{overflow : hidden;text-overflow : ellipsis;  white-space : nowrap;}
}

@media screen and (min-width:921px) { 
	/*
	樣式1-浮動
    .search > .search-bar{position: absolute;top:3rem;left:-8rem;width:25rem;padding-top: 1rem;padding-bottom: 1rem;}
    .search .search-close{top:6.5rem;right:0.5rem;}
    .search-close2{display: none;}
	.search > .search-bar{padding-top: 1rem;padding-bottom: 1rem;}
	.search > .search-bar input{line-height: 2rem;}
	.search i[data-icon="search"]{left:0.6rem;top:1.2rem;}
	.search i[data-icon="clear"]{right:0.3rem;top:0.8rem;}
	*/	
	
    
	
    .footer-bar{display: none;}
}

@media screen and (max-width:979px) {
    /*搜尋的左側頁籤*/
    .item-search-tab{display:none;}
}

@media screen and (min-width:980px) {
    .m2{width:820px;}
    
    /*搜尋的左側頁籤*/
    .item-search-tab a::after{content:url("../web_img/clickdown.gif");display: inline-block;position: absolute;right:-2.5rem;top:-0.5rem;-webkit-transform: scale(0.42);-ms-transform: scale(0.42);transform: scale(0.42);}
    
    .item-search-tab a.active::after{content:'\e90e';font-family: 'ic';font-size: 4rem;right:-1.5rem;top:1rem;color: #FFE500;}
}

@media screen and (max-width:1024px) { 
    .nav > ul > li.MG5R{margin-right:0.2rem;}
    .nav > ul > li > a > span.PDL5{padding-left:0.2rem;}
    
    .navs li{border-bottom: 1px solid #ddd;}
	.navs li li{border-bottom: 1px solid #ddd;}
    
    
}
@media screen and (min-width:1025px) {
    .fx5P-md > *{-webkit-box-flex: 0;-ms-flex: 0 0 18%;flex: 0 0 18%;max-width:18%;}

    .product-class > div{-webkit-box-flex: 0;-ms-flex: 0 0 19%;flex: 0 0 19%;max-width:19%;margin-bottom: 2rem;}
    .product-class .item-title{max-width: 7rem;}
    .product-class .item-img img{width:calc(100% - 2rem);height:7rem;}
    
    .product-class:not([data-project]).f2 .item-img img{width:14rem;height:14rem;} 

    
    .item-img.mo img{max-width: 800px;max-height: 500px;}
    
    
    
    .product-main{width: 800px;max-width: 100%;margin-left: auto;margin-right: auto;}
    
        
    /*movie*/
    .product-class.movie.f2 > div{-webkit-box-flex: 0 !important;-ms-flex: 0 0 33.33% !important;flex: 0 0 33.33% !important;max-width:33.33% !important;}
    
    .tb2{width:800px;}
	
	/* navs */
    .navs ul ul{display: block;}
	.navs > ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
	.navs > ul > li{border-radius: 5px; background-color:rgba(255,255,255,0.6); border:1px solid #ddd;border-left:15px solid #3991CE;  padding-left: 1.5rem;padding-top: 1rem; padding-bottom: 1rem; font-size:1.3rem;}
	.navs > ul > li li{line-height: 1.4rem;}
	.navs i{display: none;}
    
    .navs > ul > li{-webkit-box-flex: 0;-ms-flex: 0 0 45%;flex: 0 0 45%;max-width:45%;margin-left: 1rem;margin-right: 1rem;margin-top: 2rem;margin-bottom: 2rem;}
    
    .search-bar label input{font-size: 1.4rem !important;}
    .search-bar label input::placeholder{font-size: 1.05rem;}
    .search-bar label::after{content: '\e912';font-family: 'ic';display: inline-block;position:absolute;left:0.7rem;bottom:-3rem;color:#FF0004;font-size: 4rem;-webkit-animation-name: an4;animation-name: an4;-webkit-animation-duration: 0.3s;animation-duration: 0.3s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-direction: alternate;animation-direction: alternate;}
    
}

@media screen and (max-width:1279px) {
    /*footer*/
    .footer fieldset,.contact-phone fieldset{width:100%;padding-top: 1.5rem;padding-bottom: 1.5rem;}
}

@media screen and (min-width:1280px) {
    .m{width:1200px;}
    .m2{width:1000px;}
	
	
    /*.product-class > div{-webkit-box-flex: 0;-ms-flex: 0 0 14%;flex: 0 0 14%;max-width:14%;margin-bottom: 2rem;}*//*max-width:14%;*/
	.product-class:not([data-project]).f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 23%;flex: 0 0 23%;max-width:23%;margin-bottom: 4rem;}
	
    .product-class .item-title{max-width: 7rem;}
    /*.product-class .item-img img{width:5.5rem;height:5.5rem;}*/
	.product-class:not([data-project]).f2 .item-img img{width:14rem;height:14rem;}	
	
 
    .product-class[data-project].f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 33%;flex: 0 0 33%;max-width:33%;margin-bottom: 2rem;}
    .product-class[data-project].f2 .item-img img{padding: 0;}
    .product-class[data-project].f2 .item-img > div{height: 10rem;}   
    
	.product-main .item-img img{max-height: 20rem;}
    
    /*slick*/
    .slick-nav > div{min-width:6rem;min-height: 6rem;width:6rem;height: 6rem;}
    
    /*footer*/
    .footer fieldset{margin-right: 1.5rem;width:calc((100% - 5rem) / 3);padding-top: 2rem;padding-bottom: 2rem;}
    .contact-phone fieldset{width:calc((100% - 2rem) / 2);padding-top: 1rem;padding-bottom: 1rem;}
    .contact-phone fieldset:nth-child(odd){margin-right: 1.5rem;}
}

@media screen and (min-width:1440px) {
    .m{width:1360px;}/*1360px*/
    .m2{width:1160px;}
	
	/*.product-class > div{-webkit-box-flex: 0;-ms-flex: 0 0 12%;flex: 0 0 12%;max-width:12%;}*/
	
	

	.product-class[data-buy].f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 25%;flex: 0 0 25%;max-width:25%;margin-bottom: 0;}
	
    /*movie*/
    .product-class.movie.f2 > div{-webkit-box-flex: 0 !important;-ms-flex: 0 0 25% !important;flex: 0 0 25% !important;max-width:25% !important;}
	
	.product-main .item-img img{max-height: 25rem;}

    .navs > ul > li{-webkit-box-flex: 0;-ms-flex: 0 0 27%;flex: 0 0 27%;max-width:27%;margin-left: 2rem;margin-right: 2rem;margin-top: 2rem;margin-bottom: 2rem;}
    
    /*search*/
    .main-item[data-id="search"] .product-class.product-search > .item-movie{-webkit-box-flex: 0;-ms-flex: 0 0 33%;flex: 0 0 33%;max-width:33%;margin-bottom: 0 !important;}
}

@media screen and (min-width:1600px) {
    .m{width:1560px;}
    .m2{width:1360px;}
	
    .product-class > div{-webkit-box-flex: 0;-ms-flex: 0 0 15%;flex: 0 0 15%;max-width:15%;margin-bottom: 4rem;}
    
    .product-class .item-title{max-width: 8rem;font-size: 1.1rem;line-height: 1.5rem;}    
    /*.product-class .item-img img{width:8rem;height:8rem;}*/
    .product-class .item-img img{width:calc(100% - 2rem);height:9rem;}
    
	.product-class:not([data-project]).f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 18%;flex: 0 0 18%;max-width:18%;margin-bottom: 4rem;}
	.product-class:not([data-project]).f2 .item-img img{width:14rem;height:14rem;}
	
	.product-class[data-buy].f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 25%;flex: 0 0 25%;max-width:25%;margin-bottom: 0;}
}

@media screen and (min-width:1920px) {
    .m{width:1920px;} 
    .m2{width:1720px;}
	
	.product-class:not([data-project]).f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 17%;flex: 0 0 17%;max-width:17%;margin-bottom: 4rem;}
	.product-class:not([data-project]).f2 .item-img img{width:15rem;height:15rem;}
    
    .product-class[data-project].f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 25%;flex: 0 0 25%;max-width:25%;margin-bottom: 2rem;}
    
    .product-class[data-buy].f2 > div{-webkit-box-flex: 0;-ms-flex: 0 0 25%;flex: 0 0 25%;max-width:25%;margin-bottom: 0;}
	.product-class[data-buy].f2 > div .item-img img{height:12rem;}
}

.product-class[data-project].f2 .item-img img{padding: 0;width:100%;height:100%;min-width: 100%; min-height:10rem;object-fit: cover !important;}

.product-class:not([data-project]).f2 .item-img img{object-fit:contain !important;}


.tra,.product-class .item-img img,.item-img.mo img{-webkit-transition: all 0.3s;transition: all 0.3s;}

.anL{-webkit-animation-name: anL;animation-name: anL;}
.anLout{-webkit-animation-name: anLout;animation-name: anLout;}
.anR{-webkit-animation-name: anR;animation-name: anR;}
.anH{-webkit-animation-name: anH;animation-name: anH;}
.originT{-webkit-transform-origin: top;transform-origin: top;}


@-webkit-keyframes an-r{
    0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    100%{-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
@keyframes an-r{
    0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    100%{-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}

/*
@-webkit-keyframes an4{
    0%{left:0;}
    to{left:100vw;}
}
@keyframes an4{
    0%{left:0;}
    to{left:100vw;}
}
*/

@-webkit-keyframes anR{
    0%{-webkit-transform:translate3d(100vw,0,0);transform:translate3d(100vw,0,0);}
    to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
}
@keyframes anR{
    0%{-webkit-transform:translate3d(100vw,0,0);transform:translate3d(100vw,0,0);}
    to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
}

@-webkit-keyframes anL{
    0%{-webkit-transform:translate3d(-100vw,0,0);transform:translate3d(-100vw,0,0);}
    to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
}
@keyframes anL{
    0%{-webkit-transform:translate3d(-100vw,0,0);transform:translate3d(-100vw,0,0);}
    to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
}


@-webkit-keyframes anLout{
    0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
    to{-webkit-transform:translate3d(-50vw, 0, 0);transform:translate3d(-50vw, 0, 0);}
}
@keyframes anLout{
    0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
    to{-webkit-transform:translate3d(-50vw, 0, 0);transform:translate3d(-50vw, 0, 0);}
}

@-webkit-keyframes anH{
    0%{-webkit-transform:scaleY(0);transform:scaleY(0);}
    to{-webkit-transform:scaleY(1);transform:scaleY(1);}
}
@keyframes anH{
    0%{-webkit-transform:scaleY(0);transform:scaleY(0);}
    to{-webkit-transform:scaleY(1);transform:scaleY(1);}
}

/*
@-webkit-keyframes anR{
    0%{left:0;}
    to{left:100vw;}
}
@keyframes anR{
    0%{left:0;}
    to{left:100vw;}
}

@-webkit-keyframes anR{
    0%{left:0;}
    to{left:100vw;}
}
@keyframes anR{
    0%{left:0;}
    to{left:100vw;}
}

*/



/*.menu-mid > ul{list-style: none;padding: 0em 0.5em 0em 0.5em;white-space: nowrap;background: #eee;  overflow-x: scroll;  overflow-y: hidden;overflow-scrolling: touch;  -webkit-overflow-scrolling: touch;box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3);}
.menu-mid > ul > li{position: relative;display: inline-block;}
.menu-mid > ul > li:after{content: "";position: absolute; top:0.6em;border-right: solid 1px rgba(155,155,155,0.3);height:18px;}
.menu-mid > ul > .menu-mid-li02:after{border-right:none !important;}
.menu-mid > ul > .menu-mid-li01{position: fixed;right: 0px;background: #eee;box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.3);}
.menu-mid > ul > .menu-mid-li02{position: absolute;right: 0px;}
.menu-mid > ul > li > a{display: inline-block;color: #666;padding: 0.4em 0.45em;font-size: 1.1em;text-decoration: none !important;}
.menu-mid > ul > li > a:hover{font-weight: bold;color: #333;}
.menu-mid-ok{margin-right: 0em !important;padding-bottom:0.3em !important; white-space:normal !important;text-align: left;animation: an4 0.2s;-moz-animation: an4 0.2s;-webkit-animation: an4 0.2s;-o-animation: an4 0.2s;}
.menu-mid-ok > li > a{padding: 0.1em 0.5em 0.3em 0.5em !important;}
.menu-mid-active{position: relative;font-weight: bold !important;color: #111 !important;}
.menu-mid-active:after{content: "";position: absolute;width:80%;bottom:3px; left:10%; border-bottom: solid 3px #237DB7;}
.menu-mid-closebt{display: inline-block;background: #666 !important;border-radius: 3px;box-shadow: none !important;margin-right: 1.2em;}
.menu-mid-closebt > a{color: #FFF !important;}

.mfp-with-zoom .mfp-container,.mfp-with-zoom.mfp-bg {opacity: 0;-webkit-backface-visibility: hidden;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.mfp-with-zoom.mfp-ready .mfp-container {opacity: 1;}
.mfp-with-zoom.mfp-ready.mfp-bg {opacity: 0.8;}
.mfp-with-zoom.mfp-removing .mfp-container,.mfp-with-zoom.mfp-removing.mfp-bg {opacity: 0;}
.mfp-close{font-size: 2.2rem;}
.mfp-figure figcaption{padding-top:0.5rem;}
.mfp-title{font-size: 0.9rem; color: #DDDDDD;}
*/