@charset "utf-8";
/*台灣嘉利傳動 CSS Document */
* { margin:0; padding:0;}

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

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


}



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

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


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

/*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: 992px) { 
/*.header .left .logo_block{display:none;}
.header .left .member_block	{display:none;}*/
	

	
.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;}
	
/*.m_nav .logo a{background:url(../images/menu_icon.svg)  no-repeat;height:25px;width:25px;display:inline-block;text-indent:-9999px;text-align:left;}
.m_nav .logo a.facebook{background-position:0 0;margin-right: 5px;}
.m_nav .logo a.youtube{background-position:-25px 0;}	*/
	
}	


#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:left}
.fr{float:right}

/**/
body{background-color:#ffffff}
/*.header{width:100%;position:fixed;top:0;left:0;z-index:999;height:auto;padding:5px 0;background:rgba(28,35,39,0)}*/
.header{width:100%;height:113px ;position:relative; z-index:999;/*background:#ff6600;*/}
.header .left{width:50%; padding:0;display: flex;flex-wrap: wrap;justify-content:flex-start;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:50%;float: right;margin-top: 12px;padding:0; font:12pt "微軟正黑體";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;padding:0.9375em 1em;/*line-height: 25px;*/text-align: center;}

.header .navbar_nav li a{text-decoration:none;height:100%;display:block;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;color:#000000;}
.header .navbar_nav li:hover a{color:#000000}
.header .navbar_nav li.dropdown{display:block;/*float: left;position:relative;*/}

.header .navbar_nav li.dropdown .dropdown_menu{font:12pt "微軟正黑體";font-weight:700;line-height: 25px;color:#000000;display:none;position:absolute;top:auto;background:#fff;width:auto;min-width:150px ; 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: 25px;padding:0 1em;margin:0;display: block;color:#000;}
.header .navbar_nav li.dropdown .dropdown_menu ul li div{width:100%;line-height: 20px; padding:0;margin:0;display: block;color:#fff}
.header .navbar_nav li.dropdown:hover .dropdown_menu{color:#000;display:block;font:11pt "微軟正黑體";font-weight:700;width:100%;display: block}
.header .navbar_nav li.dropdown:hover .dropdown_menu a{color:#000;display:block;width:100%;display: block;line-height: 20px;padding:0.5em 0;}
.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 li.dropdown span{content:'';height: 30px;width: 30px;background: url(../images/arrow_block.svg) no-repeat;position: absolute;right: -10px;background-size: 21px;top: 0px;	}
*/
.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 screen and (min-width: 1119px) and (max-width: 1162px) {
.header .left{width:50%;padding:0;}	

.header .left img{width:100%;max-width: 100%;margin-top: 15px;}		
.header .nav{width:50%; font:12pt "微軟正黑體";font-weight:700;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;height:auto;padding:0;display:block;}
	
}
@media screen and (min-width: 993px) and (max-width: 1118px) {
.header .left{width:25%;padding:0 0 0 0}	

.header .left img{width:100%;max-width: 100%;margin-top: 18px;}	
.header .nav{width:75%; font:12pt "微軟正黑體";font-weight:700;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;height:auto;padding:1em 0;display:block;}
.header .navbar_nav li{/*float:left;position:relative;display:block;padding:0 1em;line-height: 30px;}	
}*/

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

	
.m_nav{display:block}
.m_nav{position:fixed;top:0;/*box-shadow:0 15px 27px 0 rgba(167,165,165,.38);*/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);/*background: rgba(255,0,4,0.7);overflow:hidden;*/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{display: inline-block;font:12pt "微軟正黑體";font-weight: 700; border-radius: 30px;padding:0.3em 1.8em;margin:0 0.2em;background: linear-gradient(-90deg, #cd080a 35%, #b20406 60%);color:#ffffff;} 
.m_nav .m_naber_t_lang .btu_lang a:hover{background: #000000;color:#ffffff;} 
	
.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{/*margin-top:10px;*/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:#000000;width:100%;padding:0.7em 2em;/*border-bottom: 1px solid #ff0000;*/}
.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 span{padding-left:1.5em;line-height: 50px;}*/	
/*.m_nav .ul .nav00{ color:#ff6600;vertical-align:middle; background:url(../images/left/icon00.png) no-repeat 1em 0;}
.m_nav .ul .nav01{ color:#ff6600;vertical-align:middle; background:url(../images/left/icon01.png) no-repeat 1em 0;}
.m_nav .ul .nav02{ color:#ff6600;vertical-align:middle; background:url(../images/left/icon02.png) no-repeat 1em 0;}
.m_nav .ul .nav03{ color:#ff6600;vertical-align:middle; background:url(../images/left/icon03.png) no-repeat 1em 0;}
.m_nav .ul .nav04{ color:#ff6600;vertical-align:middle; background:url(../images/left/icon04.png) no-repeat 1em 0;}
.m_nav .ul .nav05{ color:#ff6600;vertical-align:middle; background:url(../images/left/icon05.png) no-repeat 1em 0;}
.m_nav .ul .nav06{ color:#ff6600;vertical-align:middle; background:url(../images/left/icon06.png) no-repeat 1em 0;}
.m_nav .ul .nav07{ color:#ff6600;vertical-align:middle; background:url(../images/left/icon07.png) no-repeat 1em 0;}
.m_nav .ul .nav08{ font:1.15em "微軟正黑體";font-weight: 600;vertical-align:middle; background:url(../images/left/icon08.png) no-repeat 1em 0;}
.m_nav .ul .nav08 a{color:#413030;}	*/
	

.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 8.5em 28px;}
.m_nav ul li a:visited:hover:not(:only-child){display:block;color:#000000; vertical-align:middle;/*background:url(../images/left_arrow.svg) no-repeat left calc((50px - 9px)/2);*/}

.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;}
/*.m_nav ul li ul li p{height:35px;font-size: 1em;padding-left:30px;padding-top:1em;color:#897272;vertical-align:middle;}
.m_nav ul li ul li .title{height:auto;font-size: 1em;padding-left:0px;padding-top: 1em; color:#000000;vertical-align:middle;}*/
/*.m_nav ul li ul li .sub2{padding-left:0em;height: 35px;}*/			
	}


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

.header{width:100%;position:fixed;top:0;left:0;z-index:999;height:auto;padding:0;background:rgba(255,255,255,1);box-shadow:3px 3px 3px rgba(0,0,0,0.2);}
.header .left{width:calc(100% - 70px);margin-left:5px; }
.header .left .img1{display:none;}	
.header .left .img2{display:inline-block;}
	
.header #navToggle{height:auto;padding:9px 15px; margin-right:-15px;display:inline-block;float:left;}
.header #navToggle span{position:relative;width:30px;height:3px;margin:40px 0 10px 0}
.header #navToggle span:before,.header #navToggle span:after{content:'';position:relative;width:100%;height:3px;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:#000000}
.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;}	
}