@charset "utf-8";
/*HQCP CSS Document */
* { margin:0; padding:0;}

@media only screen and (max-width: 959px) { 	
.mobile{display:block;}
.desktop{display:none;}	
	
}

@media (min-width: 960px) {
.mobile{display:none;}
.desktop{display:block;}


}



/*#nav_container{width:1200px;height:100% !important;margin:0 auto;padding:0 !important;}*/

#nav_container{width:100%;display:flex;flex-wrap: wrap;justify-content: flex-start;align-content: space-between;align-items: stretch;height: auto;}


@media only screen and (max-width: 1199px) {
	
#nav_container{width:100%;height:100% !important;margin:0 auto;padding:0;}	

	
}


/*************************************************/

/*desktop menu*/
.header .left .logo_block{width:calc(100% - 70%);}
.header .left .logo_block .info{color:#ffb9e7;font:13pt "微軟正黑體";font-weight: 700;padding-left: 0.6em;}
.header .left .member_block{width:calc(70% - 4em);padding:0.3em 2em;display: flex;flex-wrap: wrap;justify-content:flex-end;align-content:  space-between;align-items:center;  height: auto;color:#000000;}
.header .left .member_block .member_left_block{width:calc(40% - 1em);margin-right: 1em;}
.header .left .member_block .member_left_block a{font:calc(1.25em/1) "微軟正黑體";font-weight: 700;color:#000000;display: inline-block;background:#1D074B;border-radius: 7px;width:auto;height: auto;padding:0.5em 2em;}
.header .left .member_block .member_left_block a:hover{background: #000000;}

.header .left .member_block .member_right_block{width:60%;display: flex;flex-wrap: wrap;justify-content:flex-start;align-content:  space-between;align-items:center;  height: auto;}
.header .left .member_block .member_right_block .member_right_img{width:100px;}
.header .left .member_block .member_right_block .member_right_note{width:calc(100% - 100px);}

.header .left .member_block .member_right_block .member_right_note .orderbutton a{font:calc(1.125em/1) "微軟正黑體";font-weight:700;width:auto;height: auto;padding:0.2em 0.7em;background:#ffffff;color:#000000;display:inline-block;text-align:center;margin:0.2em 0;}
.header .left .member_block .member_right_block .member_right_note .orderbutton a:hover{width:auto;height: auto;padding:0.2em 0.7em;background:#000000;color:#ffffff;display: inline-block;text-align:center;margin:0.2em 0;}


#Community a{background:url(../images/menu_icon.svg)  no-repeat;height:25px;width:25px;display:inline-block;text-indent:-9999px;text-align:left;}
#Community a.facebook{background-position:0 0;margin-right: 5px;}
#Community a.youtube{background-position:-25px 0;}


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

	

	
.m_nav .logo{width:calc(100% - 0em);height:auto;  padding:1em 0.5em;/*zoom:1;*/background:#4a007d;display: flex;flex-wrap: wrap;justify-content:flex-start;align-content:  space-between;align-items:stretch;}
.m_nav .logo:after {content:''; clear:both; display:block;}
	

.m_nav .logo .fb_button{width:calc(50% - 1em);height:35px;line-height:35px; display:inline-block;margin:0 0.5em;}
.m_nav .logo .fb_button a{width:100%;height:40px;line-height:40px;padding:0 0; text-align: center; display:inline-block;border-radius:50px;background:#ffffff;color:#1e397a;}
.m_nav .logo .fb_button a:hover{background:rgba(255,255,255,0.7);color:#000000;}

.m_nav .logo .yu_button{width:calc(50% - 1em);height: 25px;line-height:35px; display:inline-block;margin:0 0.5em;}
.m_nav .logo .yu_button a{width:100%;height:40px;line-height:40px;padding:0 0; text-align: center; display:inline-block;border-radius:50px;background:#ffffff;color:#d2001a;}
.m_nav .logo .yu_button a:hover{background:rgba(255,255,255,0.7);color:#000000;}
	

	
}	


#BackTop{width:100%;height:auto;display:none;padding:0.5em 0em;background:rgba(49,30,62,1.00); position:fixed;top:0px;z-index: 9999999;box-shadow: 0 0 8px 3px rgba(0,0,0,0.4)}
.menublock{display: flex;flex-wrap: wrap;justify-content:flex-start;align-content:  space-between;align-items:center;  height: auto;padding:0;}
.menublock .logo{width:90px;}	
.menublock .I_Product_list_block{width:calc(100% - 180px);display: flex;flex-wrap: wrap;justify-content:flex-start;align-content:  space-between;align-items:stretch;   height: auto;}
	
.menublock .I_Product_list_block .nav{display: flex;flex-wrap: wrap;justify-content:flex-start;align-content:  space-between;align-items:stretch;  height: auto;padding:0;width:100%;}
.menublock .I_Product_list_block .nav-pills .nav-link01{width:calc((100%/9) - 1rem);font:calc(1.05rem/1) "微軟正黑體";font-weight:700;color:#ffffff;text-align: center; margin:0 0.5rem;padding: 0;}
.menublock .I_Product_list_block .nav-pills .nav-link01.active,.menublock .I_Product_list_block .nav-pills .show > .nav-link01{font:calc(1.05rem/1) 微軟正黑體;font-weight:700;margin:0 0.5rem ;color:#000000;padding: 0;}
	
.menublock .menusp_block{width:180px;}




/**/
.fl{float:right;}
.fr{float:left;}


/**/

/*.header{width:100%;position:fixed;top:0;left:0;z-index:999;height:auto;padding:0;background:rgba(28,35,39,0)}*/
.header{width:100%;height:0px;position:relative; z-index:999;}

.header .shopping_cart_block{width:100%;display: flex;justify-content: flex-end;}
.header .shopping_cart_block div{width:122px;}

.header .search_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-end; align-content:center;align-items:stretch;margin:2em 0 0.5em 0;}
.header .search_block .Iinput input{border:1px solid #DDDDDD;padding:0.8em 0.5em 0.8em 2.8em;border-radius: 10px;margin:0.5em 0 0 0;background:#ffffff url(../images/search.jpg) no-repeat 0.7em 0.5em;color:#000000;font:0.70125em "微軟正黑體";}
.header .search_block .Imember{height: 36px;position: relative;}

.header .search_block .Imember .dropdown_block{/*display:none;*/visibility:hidden;position: absolute;width: 200px; top:38px; left:-87px;transform: translate(0%, 0);/*opacity:0;*/transition:all .2s ease-in-out}
.header .search_block .Imember .dropdown_block .dropdown_title{width:100%;line-height: 30px; text-align: center;color:#ac8363;}
.header .search_block .Imember .dropdown_block .dropdown{font:12pt "微軟正黑體";font-weight:700;color:#ffffff;background:#ac8363;padding:1em;margin:0 0 1px 0;opacity:.9;filter:alpha (opacity=90);}
.header .search_block .Imember .dropdown_block .dropdown a{color:#ffffff}
.header .search_block .Imember .dropdown_block .dropdown a:hover{color:#ffffff}

.header .search_block .Imember:hover .dropdown_block{/*display:block;*/visibility:visible;position: absolute;width: 200px; top:40px; left:-87px;transform: translate(0, 0);/*opacity:1;*/transition:all .2s ease-in-out;}
.header .search_block .Imember:hover .dropdown_block .dropdown_title{width:100%;line-height: 30px; text-align: center;color:#ac8363;}

.header .search_block .IQuantity{width:44px;height: 50px; display: inline-block;padding:1.3em 0 0 0.1em;text-align: center;/*padding:0.3em;border-radius: 8px;background:#ffffff;*/margin:0 0.5em;background:url(../images/sreach_block_03.svg) no-repeat left top;color:#000000;}
.Mshopping_cart_block{display: none;}

@media only screen and (max-width: 959px) { 
.header .search_block{display:none;}	
	
.header .shopping_cart_block{display: none;}

.Mshopping_cart_block{display:inline-block;position: absolute;top:55px;right: 0; z-index: 90}
.Mshopping_cart_block div{width:29px;}		
}

::placeholder {
  color: #545360;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #545360;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: #545360;
}

.header .left{width:140px;margin-left: 2.6em; padding:0;display: flex;flex-wrap: wrap;justify-content:flex-end;align-content:  space-between;align-items:center;  height: auto;}
.header .left .img1{height:auto;}


.header .left .img2{display:none}


.header .naber_t_lang{display:flex;flex-wrap: wrap;justify-content: flex-end;align-content: space-between;align-items: stretch;height: auto;padding:0 1em 0.5em 0;}
.header .naber_t_lang .btu_lang a{display: inline-block;font:9pt "微軟正黑體";border:1px solid #ccc;border-radius: 30px;padding:0 1em;margin:0 0.2em;background: #ffffff;color:#ff0000;} 
.header .naber_t_lang .btu_lang a:hover{background: #ff0000;color:#ffffff;} 


.header .nav{width:600px; float: left;margin-top: 0px;padding:0; /*font:1.125em "微軟正黑體";font-weight:700;*/-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;height:auto;}


.header .navbar_nav{padding: 0;margin: 0;float:right;}
.header .navbar_nav li{float:left;position:relative;display:block;text-align: left;}

.header .navbar_nav li a{text-decoration:none;height:100%;padding:0.3em 1.3em;display:block;color:#a98c73;font:16pt "微軟正黑體";font-weight:700;}
.header .navbar_nav li:hover a{color:#a98c73;padding:0.3em 1.3em;display:inline-block; background:rgba(255,255,255,0.7);border-radius: 25px;animation-name: flipInX;animation-duration: 1s;animation-iteration-count:  1;animation-direction: alternate;}
.header .navbar_nav li.dropdown{/*margin:0em 0.5em;*/display:inline-block; }



@-webkit-keyframes flipInX {
0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}
0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}
60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}
80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}
to{-webkit-transform:perspective(400px);transform:perspective(400px)}	
	
}

.header .navbar_nav li.dropdown .dropdown_menu{font:1.125em "微軟正黑體";font-weight:700;color:#000000;display:none;position:absolute;top:auto;background:#fff;width:auto;min-width:120px ; left:50%;transform: translate(-50%, 0);padding:0.5em 0;opacity:.9;border:#eeeeee 1px solid;filter:alpha (opacity=90);border-radius:7px;}
.header .navbar_nav li.dropdown .dropdown_menu ul{padding:0;margin:0;}
.header .navbar_nav li.dropdown .dropdown_menu ul li{clear: both; width:100%;line-height: 30px;padding:0 1em;margin:0;display: block;color:#fff;}
.header .navbar_nav li.dropdown .dropdown_menu ul li div{width:100%;line-height: 30px; padding:0;margin:0;display: block;color:#fff}
.header .navbar_nav li.dropdown:hover .dropdown_menu{color:#fff;display:block;font:1.125em "微軟正黑體";font-weight:700;width:100%;display: block}
.header .navbar_nav li.dropdown:hover .dropdown_menu a{color:#000;display:block;width:100%;display: block}
.header .navbar_nav li.dropdown:hover .dropdown_menu a:hover{color:#e60608;}


/*.header .navbar_nav li.dropdown span{background:url(../images/arrow.svg)  no-repeat;height:20px;width:20px;display:inline-block;text-indent:-9999px;text-align:left;}*/


/*menu_fixed*/
.header.on{background:#fff;height: auto; padding:5px 0;box-shadow: 0 0 8px 3px rgba(0,0,0,0.4)}
.header.on .left .img1{display:none}
.header.on .left .img2{display:inline-block;}
.header.on .navbar_nav li a{color:#333}
.header.on .navbar_nav li:hover a{color:#4a007d}


.header.on .navbar_nav li.dropdown span{background:url(../images/arrow_block.svg)  no-repeat;height:20px;width:20px;display:inline-block;text-indent:-9999px;text-align:left;}

.header.on .navbar_nav #Community a.facebook{background-position:0 -25px;margin-right: 5px;}
.header.on .navbar_nav #Community a.youtube{background-position:-25px -25px;}


#navToggle{display:none}
.m_nav{display:none}





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

	
.m_nav{display:block}
.m_nav{position:fixed;top:0;width:270px;height:100%;background:#fff url(../images/m_nav_bg.jpg) no-repeat left top;transition:all ease .5s;-webkit-transition:all ease .5s;z-index:1000;opacity:1;visibility:visible;margin-top:0;overflow-y:auto;transition:all .6s cubic-bezier(.77,0,.175,1) 0;top:0;transform:translateX(-270px);z-index:10000}
.m_nav.open{transform:translateX(0)}
.m_nav .top{height:60px;padding:20px;box-sizing:border-box}

/*add*/
.m_nav_block{display:none;position:fixed;top:0;left:0;width:0;height:0;width:100%;height: 100%;background: rgba(0,0,0,0.3);z-index:0}
.m_nav_block .closecover{position:absolute;width:100vw !important;height:100vh !important;background:#0b0d19;filter:alpha(opacity=0);opacity:0;left:0;top:0;z-index:1000}
/*add*/
.m_nav .top .closed{width:30px;height:30px;vertical-align:middle;float:right;cursor:pointer}
.m_nav .dropdown span{color:#ff0000;}

	
	
.m_nav .m_naber_t_lang{width:100%;text-align: center; padding:0.8em 0.1em;margin-bottom: 0.2em;}
.m_nav .m_naber_t_lang .btu_lang a{width:calc(50% - 0.6em);display: inline-block;font:12pt "微軟正黑體";font-weight: 700; border-radius: 5px;padding:0.5em 0;margin:0.2em;background: #a88467 ;color:#ffffff;} 
.m_nav .m_naber_t_lang .btu_lang a:hover{background: #000000;color:#ffffff;} 
	
.m_nav .m_naber_t_lang .btu_lang01 a{width:calc(50% - 0.6em);display: inline-block;font:12pt "微軟正黑體";font-weight: 700; border-radius: 5px;padding:0.5em 0;margin:0.2em;background: #a88467 ;color:#ffffff;} 
.m_nav .m_naber_t_lang .btu_lang01 a:hover{background: #000000;color:#ffffff;} 
	
.m_nav .m_naber_t_lang .btu_lang02 a{width:calc(100% - 0.6em);display: inline-block;font:12pt "微軟正黑體";font-weight: 700; border-radius: 5px;padding:0.5em 0;margin:0.2em;background: #a88467 ;color:#ffffff;} 
.m_nav .m_naber_t_lang .btu_lang02 a:hover{background: #000000;color:#ffffff;} 

	
.m_nav .m_Iinput{width:100%;}	
.m_nav .m_Iinput input{border:1px solid #DDDDDD;padding:0.5em 0.5em 0.5em 2.2em;border-radius: 10px;margin:0.5em 0 0 0;background:#ffffff url(../images/search.jpg) no-repeat 0.7em 0.5em;color:#000000;font:12pt "微軟正黑體";}
	
.m_nav .m_naber_t_lang .btu01_lang a{display: inline-block;font:12pt "微軟正黑體";font-weight: 700; border-radius: 8px;padding:0.5em 5.5em;margin:1.5em 0.2em 0;background:#ffffff;color:#545454;border:1px solid #545454;} 
.m_nav .m_naber_t_lang .btu01_lang a:hover{background: #545454;color:#ffffff;} 
	
	
.m_nav .ul{color:#000000;}
.m_nav .ul li{padding:0 0px;transform:translateY(0);-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:all .6s cubic-bezier(.77,0,.175,1) 0;transition:all .6s cubic-bezier(.77,0,.175,1) 0;opacity:0}
.m_nav.open .ul li{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.m_nav .ul li:nth-child(1){-webkit-transition:all .2s cubic-bezier(.77,0,.175,1) 0;transition:all .2s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li:nth-child(2){-webkit-transition:all .4s cubic-bezier(.77,0,.175,1) 0;transition:all .4s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li:nth-child(3){-webkit-transition:all .6s cubic-bezier(.77,0,.175,1) 0;transition:all .6s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li:nth-child(4){-webkit-transition:all .8s cubic-bezier(.77,0,.175,1) 0;transition:all .8s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li:nth-child(5){-webkit-transition:all 1s cubic-bezier(.77,0,.175,1) 0;transition:all 1s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li:nth-child(6){-webkit-transition:all 1.2s cubic-bezier(.77,0,.175,1) 0;transition:all 1.2s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li a{display:block;text-decoration:none;font:16pt "微軟正黑體";font-weight: 600;color:#a88467;width:100%;padding:0.7em 2em;}
.m_nav .ul li .dropdown_menu{display:none}
.m_nav .ul li.dropdown.active .dropdown_menu{display:block}
.m_nav .ul li .dropdown_menu a{display:block;font:1em "微軟正黑體";font-weight: 600;color:rgba(0,0,0,0.8);padding:0em 1.2em 0.5em 2.5em;box-sizing:border-box;}
.m_nav .ul li .dropdown_menu a:last-child{border:none}
	
	

/*.m_nav ul li a:visited{padding:0;color:#000000;text-decoration:none;}


.m_nav ul li a:not(:only-child){font:16pt "微軟正黑體";font-weight: 600;color:rgba(0,0,0,1); vertical-align:middle;background:url(../images/left_arrow.svg) no-repeat 7em 28px;}
.m_nav ul li a:visited:hover:not(:only-child){display:block;color:#000000; vertical-align:middle;}

.m_nav ul li ul li{clear: both; font:13.5pt "微軟正黑體";font-weight: 600;height:auto;margin-left:2em;margin-top:0em;color:#ff6600;vertical-align:middle;background:url(../images/left_sub_arrow.svg) no-repeat 0.5em 0.1em;}
.m_nav ul li ul li a{height:auto;color:#897272;vertical-align:middle;}
			*/
	}


.banner{width:100%}
.banner img{width:100%}
@media screen and (max-width:959px) {

.header{width:100%;position:fixed;top:0;left:0;z-index:999;height:55px;padding:0;background:rgba(255,255,255,1);box-shadow:3px 3px 3px rgba(0,0,0,0);}
.header .left{width:calc(100% - 45px);height:auto; margin-left:5px;}
.header .left .img1{display:none;}
	
.header .left .img2{width:100%;display:inline-block;}
.header .left .img2 .M_cart_block{width:100%;display: flex;flex-wrap: wrap;justify-content:center; align-content:center;align-items:flex-start; background: rgba(255,0,255,0);}
.header .left .img2 .M_cart_block .Mlogo{width:calc(100% - 35px);padding:0.84375em calc((100% - 125px)/2) 0 calc((100% - 125px)/2); background: rgba(0,24,215,0);}	

.header .left .img2 .M_cart_block .Isearch{width:35px;height: 35px; margin-top:0.84375em;padding:0;text-align: center;}
.header .left .img2 .M_cart_block .Isearch .SQuantity{display: inline-block;background:#a88467;color:#ffffff;padding:0.2em 0.5em;border-radius: 5px;}	
	
	
.header #navToggle{height:auto;padding:9px 13px; margin-right:-13px;display:inline-block;float:left;}
.header #navToggle span{position:relative;width:23px;height:2px;margin:2.3vh 0}
.header #navToggle span:before,.header #navToggle span:after{content:'';position:relative;width:100%;height:2px;left:0}
.header #navToggle span,.header #navToggle span:before,.header #navToggle span:after{-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;display:block;background:#a88467}
.header #navToggle span:before{top:8px}
.header #navToggle span:after{bottom:10px}
.header #navToggle.open span:before{top:10px;-webkit-transform:translateY(-11px) rotate(-45deg);-moz-transform:translateY(-11px) rotate(-45deg);-ms-transform:translateY(-11px) rotate(-45deg);-o-transform:translateY(-11px) rotate(-45deg);transform:translateY(-11px) rotate(-45deg)}
.header #navToggle.open span:after{bottom:12px;-webkit-transform:translateY(10px) rotate(45deg);-moz-transform:translateY(10px) rotate(45deg);-ms-transform:translateY(10px) rotate(45deg);-o-transform:translateY(10px) rotate(45deg);transform:translateY(10px) rotate(45deg)}
.header #navToggle.open span{background:0 0}
.header #navToggle.open span:before,.header #navToggle.open span:after{background:#ffffff}
.header .nav{display:none}
.banner img{height:600px;object-fit:cover}

}
@media screen and (max-width:420px) {
	.header .left .img2{width:100%;max-width: 100%;margin-top:0;}	
}