@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato:100,400,900); /* font */
@import url(https://fonts.googleapis.com/css?family=Oswald:400,500);

/* CSS Document */
body, html { height:100%; }
body {
	font-family: 'Lato', '微軟正黑體', sans-serif; /*自行增減使用 */
	font-size: 16px;
	line-height:1.5;
	color: #333;
	background:#f2f2f2;
}
a { color:#000; text-decoration: none; }
a:hover { color:#777; 
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition:  all .3s linear; /*連結淡入淡出*/
}
a:visited, a:active, a:link, a:focus{ text-decoration:none; border:none; outline:none;}
/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/

/* CSS3 style  陰影圓角範例，可自行增減使用 */
.css-radius {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
} 
.css-shadow {
	-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .4);
	box-shadow: 0px 0px 6px rgba(0, 0, 0, .4);
}
.imgholder img{
	transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	
	transition:transform 0.5s ease-in-out, opacity 0.5s;
	-moz-transition:-moz-transform 0.5s ease-in-out, opacity 0.5s;
	-webkit-transition:-webkit-transform 0.5s ease-in-out, opacity 0.5s;
}
.imgholder:hover img{
	transform:scale(1.05, 1.05);
	-ms-transform:scale(1.05, 1.05);
	-moz-transform:scale(1.05, 1.05);
	-webkit-transform:scale(1.05, 1.05);
	-o-transform:scale(1.05, 1.05);
}
.rotation360 {
	transition:All 0.4s ease-in-out;
	-webkit-transition:All 0.4s ease-in-out;
	-moz-transition:All 0.4s ease-in-out;
	-o-transition:All 0.4s ease-in-out;
}
.rotation360:hover {
	transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
}
.fadeout img {  filter:alpha(opacity=100); -moz-opacity:1; opacity: 1;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;    
    transition: opacity .5s ease-in-out; }
.fadeout:hover img { filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; }


/*元件(共用)*/
.input1, .textarea, .select { background: #FFF; border: 1px solid #CCC; font-family: 'Lato', '微軟正黑體', sans-serif; font-size:15px; line-height:1.1; color:#555; }
.input1:focus, .textarea:focus, .select:focus { border:1px solid #000; }

/*線(共用)*/
hr { height:1px; background:#CCC; }

/*文字樣式(共用)*/
.white { color: #FFF; }
.gray { color:#999; }
.black { color:#000; }
.blue { color: #0097de; }
.red { color: #be0000; }
.green { color: #19a568; }
.orange { color: #FF6600; }
.yellow { color: #FFFF00; }
.purple { color:#6633CC; }
.brown { color:#6e453c; }

/* 回頂端 */
#goTop {color:#FFF;	position:fixed;	bottom:0px;	right:0px;	line-height:40px;	display:none;	z-index:9;    padding-top:65px;	     width: 160px;    height: 140px;    text-align: center;    cursor: pointer;    overflow: hidden;}
#goTop:after{ 	display: block;    content: '';    position: absolute;    z-index: 0;    bottom: 0;    right: 0;    width: 0;    height: 0;    border-color: transparent transparent #1377c4 transparent;    border-style: solid solid solid solid;    border-width: 0 0 140px 160px;}	
#goTop span{ display: block;    position: relative;    margin: 0 auto 5px;    width: 2px;    height: 38px;    background-color: #FFF;}
#goTop div{    position: relative;    z-index: 1;    margin-left: 65px;    width: 100px;    font-weight: 700;}
#goTop span:before, #goTop span:after{    display: block;    content: '';    position: absolute;    width: 2px;    background-color: #FFF;}
#goTop span:before{    top: 4px;    left: -9px;    height: 13px;    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);}
#goTop span:after{    top: -2px;    right: -7px;    height: 20px;    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    transform: rotate(-45deg);}
#goTop small{display: block; font-size:16px; line-height:1.2;}

/*RWD編輯器表格(X捲軸)*/
.table-container table td {
  padding: 5px;
  border: 1px solid #ccc;
}
@media screen and (max-width: 768px) {
  .table-container { 
    width: 100%;
    overflow-y: auto;
    _overflow: auto;
    margin: 0 0 1em;
     }
	 .table-container table td {
  min-width: 100px;}
}

/*---------------------- 頁面開始 ----------------------*/
/*全頁佈局*/
.wrapper { padding:3em 0; }
.nav_root{ background:#e4e4e4; color:#000; padding:6px 0;}
.main{ padding:0 0 0 60px;}
.productName{ padding:0; color:#1377c4; font-size:20px;}
.back{ text-align:center; margin-top:60px;}
.back a{ display:inline-block; padding:10px 20px; background:#333; color:#FFF; border-radius: 0;}
.title_box{ color:#FFF; font-weight:bold; font-size:18px; background:#328cd7; border-left:8px solid #1377c4; padding:8px 12px; margin:0 0 20px 0;}

/*主選單*/
.navbar-collapse { padding-top:30px; }
.navbar-custom { margin-bottom: 0; border-bottom: none; padding:0; border-bottom: 0;  }
.navbar-brand { height:auto; padding:0 15px; margin:0; }
.navbar-brand:focus { outline: 0; }
.navbar-custom .navbar-toggle { margin:-5px 5px 0 0; padding:0 5px; font-size:30px; color:#666; }
.navbar-custom .navbar-toggle:focus,
.navbar-custom .navbar-toggle:active { outline: 0; }
.navbar-custom .navbar-nav { margin-left:-20px; margin-right:-20px; }
.navbar-custom .navbar-nav > li > a {	font-size:18px; padding:20px; color:#FFF; }
.navbar-custom .nav > li > a:hover { outline: 0; color:#FFF; background-color: transparent; }
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active { outline: 0; background-color: transparent; }
.navbar-custom .nav li.active > a { color:#1377c4;}
.navbar-custom .nav li.active > a:hover { color: #108ccc; }
.navbar-custom .nav > li.mobile { display:none; }

.nav .open > a, 
.nav .open > a:hover,
.nav .open > a:focus { background:none; }
.navbar-right .dropdown-menu { right:auto; left:0; top:59px; }
.dropdown-menu { background-color:#0071bd; }
.dropdown-menu > li > a { padding:10px 20px; color:#fff; }
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover { background-color:#09598f; color:#fff; }

/*次選單*/
.navbar{ position:absolute; width:100%; z-index:99; border:none;   border-radius: 0px;border-top: 5px solid #0a77af; padding-top:8px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */}
.navbar-custom .container { position:relative;  /*background:rgba(255,255,255,.8); padding:15px; -webkit-border-bottom-right-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-bottomright: 8px;-moz-border-radius-bottomleft: 8px;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;*/ }
.lang { font-size:13px; position:absolute; right:15px; top:5px; }
.lang * {vertical-align:middle; }
.lang a { color:#999; text-decoration:none;  }
.lang #google_translate_element { float:right; }
.lang .fa { margin-left:15px; margin-right:2px; font-size:16px; }

/*側選單*/
.page_right{ float:left; width:72%; overflow:hidden;}
.page_right .title{ font-size:30px; position:relative; padding:16px 0 0 40px; font-weight:bold; margin-bottom:30px; }
.page_right .title:after{ position:absolute; left:0; top:0; display:block; content:''; z-index:-1; width: 0;height: 0;border-style: solid;border-width: 60px 120px 0 0;border-color: #1377c4 transparent transparent transparent; -webkit-animation: animate-border-width .5s linear;    animation: animate-border-width .5s linear;    -webkit-animation-fill-mode: forwards;    animation-fill-mode: forwards;    transform: scaleX(0);    -webkit-transform: scaleX(0);    -webkit-transform-origin: left;    -ms-transform-origin: left;    transform-origin: left;}

@-webkit-keyframes animate-border-width {
  0% {
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
  }
}
@keyframes animate-border-width {
  0% {
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
  }
}
.sidebar{  float:left;width:25%; margin:0 3% 20px 0; background:#FFF;  padding-bottom:10px; border:1px solid #1077c3; }
.sidebar h3{ margin:0 0 20px 0; padding:30px; color:#FFF; font-weight:bold; background:#1377c4;}
.sidebar ul{clear:both;list-style-type:none; margin:0;padding:.2em .3em; box-sizing:border-box; }
.sidebar a{color:#6d6d6d;font-weight:bold;font-size:1.4rem;}
.sidebar a:hover{color:#fff;background:#333 }
.sidebar .choice_item>li{ box-shadow:none; background:none; }
.sidebar .choice_item>li>a{ display:block; padding:.3em .5em; text-decoration:none;}
.sidebar .choice_item>li>a.collapsed .creat:before{ content:"\f105"; font-family:'FontAwesome'; float:right;}
.sidebar .choice_item>li>a .creat:before{ content:"\f107"; font-family:'FontAwesome'; float:right;}
.sidebar .choice_item>li.panel{ margin-bottom:0;}
.sidebar .choice_item>li>ul{padding:0;padding-left:0em;}
.sidebar .choice_item>li>ul>li{ padding:5px 0 5px 1.3em;}
.sidebar .choice_item>li>ul>li:last-child {margin-bottom:.5em;padding-bottom:.5em;border-bottom:1px solid #e1e1e1;}
.sidebar .choice_item>li>ul>li:hover{background:#b6b6b6 ;color:#fff}
.sidebar .choice_item>li>ul>li:before {  content:'-'; margin-right:6px; }
.sidebar .choice_item>li>ul>li.on a,.sidebar .choice_item>li>ul>li:hover a{ color:#fff; background:#b6b6b6; }
.sidebar .choice_item>li>a:hover, .sidebar .choice_item>li.on>a{ text-decoration:none;color:#fff;background:#1077c3;}
.sidebar .choice_item>li.open>a{  color:#004ea2; text-decoration:none;}
.sidebar .choice_item>li>.dropdown-menu{ position:inherit; width:100%; border:inherit; border-radius:0px; box-shadow:inherit; margin:0 0 12px 0; padding:0 0 12px 0;}
.sidebar .choice_item>li>.dropdown-menu>li{ padding:6px 20px;}
.sidebar .choice_item>li>.dropdown-menu>li>a{  display:block; color:#373737; padding:0; white-space:inherit;}
.sidebar .choice_item>li>.dropdown-menu>li>a:hover{ color:#1a4197; background:inherit;}
.sidebar .choice_item>li.dropdown{ position:inherit;}

.sidebar .choice_item>li.dropdown>a>i.fa-caret-down{ display:none; float:right; line-height:24px;} 
.sidebar .choice_item>li.dropdown>a>i.fa-caret-up{ display:block; float:right; line-height:24px;}
.sidebar .choice_item>li.open>a>i.fa-caret-down{display:block;}
.sidebar .choice_item>li.open>a>i.fa-caret-up{display:none;}
.sidebar .choice_item>li>.dropdown-menu>li.on>a{ color:#004ea2;}
.sidebar .choice_item>li.panel>a {padding:5px 10px 5px 40px; font-size:16px; margin-bottom:12px; position:relative;}
.sidebar .choice_item>li.panel>a:before{ position:absolute; display:block; content:'\f013'; font-family:'FontAwesome'; left:12px; top:4px;  }
.sidebar .choice_item>li.panel>a img{width:30px;}
.sidebar .panel .collapse a.on{ color:#1077c3;}

/*頁尾*/
.footer { background:#0a77af; padding: 3.5em 0 0; }
.footer .container { position:relative; }
.footer .info { padding:2em 0; color:#FFF; }
.footer .info h2, .footer .info p { margin:0; }
.footer .info .pull-left { padding-right:2em; width:90%; }
.footer .info .pull-left .icon1 { float:left; width:40%; position:relative; padding:0 20px 0 50px;  border-right:2px solid #5394cb;}
.footer .info .pull-left .icon2{ float:left; width:28%; position:relative; padding:0 20px 0 50px; margin:0 2%;border-right:2px solid #5394cb;}
.footer .info .pull-left .icon3{ float:left; width:28%; position:relative; padding-left:42px;}
.footer .info .pull-left .icon1:after{ position:absolute; left:0; top:0; display:block; content:''; width:36px; height:36px; background:url(../images/all/icon1.png) left top no-repeat;}
.footer .info .pull-left .icon2:after{ position:absolute; left:0; top:0; display:block; content:''; width:36px; height:36px; background:url(../images/all/icon2.png) left top no-repeat;}
.footer .info .pull-left .icon3:after{ position:absolute; left:0; top:0; display:block; content:''; width:36px; height:36px; background:url(../images/all/icon3.png) left top no-repeat;}
.footer .copyright { background:#1d1d1d; text-align:center; color:#626262; padding:15px; font-size:14px; }
.footer .copyright a { color:#626262; }
.iconbar { position:absolute; right:15px; top:2em; }
.iconbar a { display:inline-block; vertical-align:top; margin:0 5px 5px 5px; width:36px; height:36px; line-height:1; background:#000; color:#fff; text-align:center; border-radius:100%; }
.iconbar a:hover { background:#b1b1b1; }
.iconbar .fa { margin:0; }
.iconbar .fa:before { display:block; height:36px; line-height:36px; }
.iconbar .fa-facebook { font-size:18px; }
.iconbar .fa-facebook:before { line-height:38px; }
.iconbar .fa-home { font-size:20px; }
.iconbar .fa-home:before { line-height:36px; }

/*首頁*/
.banner_wrap{ background:#f2f2f2;}
.index_bg{padding:0 0 3em 0;  /*background:url(../images/all/index_bg.jpg) right bottom no-repeat;*/}
.index_title_all{ position:relative; margin-top:1.5em; margin-bottom:35px;}
.index_title_all:before{ display:block; content:''; width: 0;height: 0;border-style: solid;border-width: 100px 220px 0 0;border-color: #0a78af transparent transparent transparent;}
.index_title_all .index_title{ position:absolute; top:15px; left:100px;}
.index_title{ font-size:19px; letter-spacing:2px; color:#000; font-weight:bold; padding:0; border-bottom:6px solid #d9eefd; margin-bottom:20px;}
.index_title h2{ font-weight:bold; font-size:40px; color:#7dd6fa; font-family: 'Oswald', sans-serif; margin:0;}
.index_title .tc{ padding-left:120px; font-size:28px;}
#owl-demo .item{ border:1px solid #5cabd4;     box-shadow: 0 0 10px rgba(51,51,51,0.4);
    -webkit-box-shadow: 0 0 10px rgba(51,51,51,0.4);}
#owl-demo .item .pro_name{ background:#454545; color:#FFF; text-align:center; padding:6px 0;}
#owl-demo .owl-prev{ position:absolute; left:-40px; top:50%; margin-top:-26px; width:60px; height:60px; background:url(../images/all/prev.png) center top no-repeat;}
#owl-demo .owl-next{ position:absolute; right:-40px; top:50%; margin-top:-26px; width:60px; height:60px; background:url(../images/all/next.png) center top no-repeat;}
.index_pro .owl-theme .item .picbox{ overflow:hidden; position:relative;}
.index_pro .owl-theme .item .picbox:before{ position:absolute;    content: '';     opacity: 0;    display: block;    width: 206px;    height: 131px;    position: absolute;	 background:url(../images/all/blue_item.png);    bottom: 0;    right: 0;    z-index: 1;    transform: translate(100%,100%);    -webkit-transform: translate(100%,100%);    transition: all .3s .15s ease-in-out;
    -webkit-transition: all .3s .15s ease-in-out;}
.index_pro .owl-theme .item .picbox:after{ font-size:40px; color:#FFF; content: '\f00e'; font-family:'FontAwesome';    opacity: 0;    display: block;    width: 34px;    height: 34px;    position: absolute;    bottom: 0px;    right: 0px;   z-index: 1;    transform: translate(100%,100%) scale(0.5,0.5);    -webkit-transform: translate(100%,100%) scale(0.5,0.5);    transition: all .3s 0s ease-in-out;    -webkit-transition: all .3s 0s ease-in-out;}
.index_pro .owl-theme .item a:hover .picbox:before{    opacity: 1;    bottom: 0;    right: 0;    transform: translate(0,0);    -webkit-transform: translate(0,0);    transition: all .3s 0s ease-in-out;    -webkit-transition: all .3s 0s ease-in-out;}
.index_pro .owl-theme .item a:hover .picbox:after	{    opacity: 1;    bottom: 40px;    right: 35px;    transform: translate(0,0) scale(1,1);    -webkit-transform: translate(0,0) scale(1,1);    transition: all .4s .2s cubic-bezier(.49,.59,.68,1.44);    -webkit-transition: all .4s .2s cubic-bezier(.49,.59,.68,1.44);}
	
	
/*內頁產品*/
.productList{ list-style-type:none; margin:0; padding:0;}
.productList li{ float:left; width:31.333%; margin:0 2% 20px 0;}
.productList li:nth-child(3n){ margin-right:0;}
.productList li a{ display:block;  border:1px solid #5cabd4;     box-shadow: 0 0 10px rgba(51,51,51,0.4);
    -webkit-box-shadow: 0 0 10px rgba(51,51,51,0.4);}
.productList li .pro_name{ background:#454545; color:#FFF; text-align:center; padding:6px 0;}
.productList li .item{ overflow:hidden; position:relative; text-align:center; background:#FFF;}
.productList li .item img{ margin:24px auto;}
.productList li .item:before{ position:absolute;    content: '';     opacity: 0;    display: block;    width: 206px;    height: 131px;    position: absolute;	 background:url(../images/all/blue_item.png);    bottom: 0;    right: 0;    z-index: 1;    transform: translate(100%,100%);    -webkit-transform: translate(100%,100%);    transition: all .3s .15s ease-in-out;
    -webkit-transition: all .3s .15s ease-in-out;}
.productList li .item:after{ font-size:40px; color:#FFF; content: '\f00e'; font-family:'FontAwesome';    opacity: 0;    display: block;    width: 34px;    height: 34px;    position: absolute;    bottom: 0px;    right: 0px;   z-index: 1;    transform: translate(100%,100%) scale(0.5,0.5);    -webkit-transform: translate(100%,100%) scale(0.5,0.5);    transition: all .3s 0s ease-in-out;    -webkit-transition: all .3s 0s ease-in-out;}
.productList li a:hover .item:before{    opacity: 1;    bottom: 0;    right: 0;    transform: translate(0,0);    -webkit-transform: translate(0,0);    transition: all .3s 0s ease-in-out;    -webkit-transition: all .3s 0s ease-in-out;}
.productList li  a:hover .item:after	{    opacity: 1;    bottom: 40px;    right: 35px;    transform: translate(0,0) scale(1,1);    -webkit-transform: translate(0,0) scale(1,1);    transition: all .4s .2s cubic-bezier(.49,.59,.68,1.44);    -webkit-transition: all .4s .2s cubic-bezier(.49,.59,.68,1.44);}
.pro_top{ overflow:hidden; width:100%; margin-bottom:30px;}
.store_img{float: left;  width: 42%;}
.store_img img{border-top: 4px #328cd7 solid; }
.pro_right{float: left; width:58%; padding: 5px 10px;}

/*聯絡我們*/
.company-form .m_t { margin-top: 2em; }
.company-form .contact_area h4{ background: #c82732; display: table; padding: 10px 20px; color: #fff; border-radius: 15px; margin-top: 20px;}
.company-form .page_title {background: url(../images/demo/i3/line.jpg) center 1em repeat-x;  text-align: center; }
.company-form .page_title span{display: inline-block; background: #FFF; font-size: 36px;font-weight: 400; line-height: 1.4;  padding: 0 .5em 0.2em;}

.company-form .contact_area .fa{ margin-right:10px; color:#787878;}
.company-form .title { text-align:center; }
.company-form .name{ padding: 0 0 0 15px; line-height: 36px; color:#555;}
.company-form .text{ margin: 0 0 10px 0;}
.company-form .input1,.company-form select.form-control{ border: 1px solid #fff; color: #555; border-radius: 4px; height: 36px; width: 100%; padding: 0 0 0 8px; box-shadow: 0 0 5px #ccc; margin: 0 5px; background-color: #f8f8f8;}
.company-form .input2,.company-form .input3{ border-radius: 4px; background: #FFF; border: 1px solid #fff; color: #555; margin: 0 5px; background: #f8f8f8; box-shadow: 0 0 5px #ccc;}
.company-form .input2{ width:100%; }
.company-form .en_txt { color: #aaa; font-size: 14px; margin-left: 5px;}
.company-form .fa{ margin-right:8px; color:#1377c4;}
.map_box{ width:100%; height:450px; margin-top: 4em; border: 6px #0a77af solid;}



	
@media (max-width: 1280px) { 
/*主選單*/
.navbar-custom .container{ background:none; padding:10px 15px 10px 15px; }
.navbar{ background:#FFF;margin-bottom:0; position:inherit; }
.lang{ top:20px; }
.navbar-custom .navbar-nav > li > a { color:#000; }
.navbar-custom .nav > li > a:hover {  color:#108ccc;}
.store_img{float: left;  width: 45%;}
.pro_right{float: left; width:55%;}

/*首頁banner*/
.carousel{ /*margin-top:97px;*/}
}
@media (max-width: 1024px) {
.store_img, .pro_right{ width:50%;}
}
@media (max-width: 996px) { 
/* 回頂端 */
#goTop { padding-top: 30px;    width: 80px;    height: 60px;  }
#goTop:after {  border-width: 0 0 60px 80px;/*高寬*/  }
#goTop div { margin-left: 35px;    width: 40px;  }
#goTop small { display: none;  }
#goTop span {  margin-bottom: 0;  height: 24px;  }
#goTop span:before {    left: -7px;  height: 10px;  }
#goTop span:after { right: -5px;  height: 15px;  }
  
/*首頁產品*/
#owl-demo .owl-prev{  left:0px;}
#owl-demo .owl-next{ right:0px;}
/*主選單*/
.iconbar{ position:inherit; display:block; right:inherit; top:inherit; text-align:center; margin-bottom:1.5em;}
.navbar{ background:none; }
.navbar-custom .navbar-toggle{ margin:20px 5px 0 0;}
/*頁尾*/
.footer .container{ width:100%;}
.footer .info .pull-left{ float:none; width:100%; padding-right:0;}
.footer .info{ padding:2em 0 14px 0;}

/*側選單*/
.page_right{ float:none; width:100%;}
.sidebar { clear:both; float:inherit; width:auto; min-height: auto; border-radius:6px; border:1px solid #ddd;  padding: 0; margin: 0em 0 2em 0; }
.sidebar .navbar-toggle { float:none; width:100%; display:block;  padding: 8px; margin:0;}
.sidebar .navbar > li { margin:0; border:none; }
.sidebar .navbar > li > a { padding:10px 20px; }
.sidebar header.mtitle { display:none; }
.sidebar h3{ display:none;}
}

@media (max-width: 768px) { 
/*主選單*/
.navbar{  background:#FFF;}
.navbar-brand img{ max-width:80px;}
.lang #google_translate_element { margin-right:30px; }
.navbar-collapse{ margin-top:inherit; padding:0;}
.navbar-custom .navbar-nav{ margin:0;}
.navbar-custom .navbar-nav > li > a{ padding:10px; background:#108ccc; color:#FFF; border-bottom:1px solid #43aadf;}
.navbar-custom .navbar-nav > li > a:hover{ background:#333; color:#FFF;}
.index_pro{ margin:1.5em auto 0 auto; width:90%;}
.lang{ top:34px; right:40px; }
.sidebar h3{ margin-bottom:0;}
.store_img{ width:55%;}
.pro_right{ width:45%;}
}

@media (max-width: 640px) { 
/*頁尾*/
.footer .info .pull-left .icon1 { float:none; width:100%;   border-right:0px solid #5394cb;  padding: 0 20px 0 60px;}
.footer .info .pull-left .icon2{  float:none; width:100%;   border-right:0px solid #5394cb; margin:14px 0; padding: 0 20px 0 60px;}
.footer .info .pull-left .icon3{  float:none; width:100%;   padding: 0 20px 0 60px;}
/*內頁產品*/
.productList li{ width:48%; margin:0 2% 20px 0;}
.productList li:nth-child(3n){ margin-right:2%;}
.productList li:nth-child(2n){ margin-right:0;}
.store_img, .pro_right{ width:100%; float:inherit;}
}
@media (max-width: 480px) { 
/*內頁產品*/
.productList li{ float:none; width:100%; margin:0 0 20px 0;}
.productList li:nth-child(3n){ margin-right:0;}
.productList li:nth-child(2n){ margin-right:0;}

}

@media (max-width: 380px) { 

}