﻿/*** 自適應
===========================================***/
/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
.row-offcanvas {
	position: relative;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}
.row-offcanvas-right .sidebar-offcanvas {
	right: -50%; /* 6 columns */
}
.row-offcanvas-left .sidebar-offcanvas {
	left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
	right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
	left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
	position: absolute;
	top: 0;
	width: 50%; /* 6 columns */
}
}

/* ===== 桌面版面: 1200px~ 
 * --------------------------------------------------
 */

@media (min-width: 1024px) and (max-width: 1200px) {
	
#MainNav .container {  margin:0 0 0 180px;  }
#SearchSet {top: 26px !important;right: -35px !important ;}	
#mainContent .container{ padding:0 ;}

/*  Home  */
.Newsletter { margin-left: 0;}
.video {margin: 0;}
.VisitUs {margin: 0 0 0 10px;}

.Newsletter .form-inline {display: inline-flex;}
.form-inline .form-control { width:90%;}
#mainContent .container .col-md-3 { padding:0 5px;}
#mainContent .container .news .col-md-3 { margin: 8px 3px;width: 25% !important;}
.btn-subscribe {margin: 0 !important;float: left;height: 34px;}

/*  分隔線*/
.line-lg {margin: 10px 0 0 0;}
.line-md {margin: 10px 0 0 0;}
}



@media (min-width: 1000px) and (max-width: 1035px) {
	
#MainNav .container {  margin:0 0 0 150px ;  }
#SearchSet {top: 26px !important;right: -35px !important ;}	
#mainContent .container{ padding:0 ;}


/*  Home  */
.Newsletter { margin-left: 0;}
.video {margin: 0;}
.VisitUs {margin: 0 0 0 10px;}

.Newsletter .form-inline {display: inline-flex;}
.form-inline .form-control { width:90%;}
#mainContent .container .col-md-3 { padding:0 5px;}
.btn-subscribe {margin:0 !important;float: left;height: 34px;}

/*  分隔線*/
.line-lg {margin: 10px 0 0 0;}
.line-md {margin: 10px 0 0 0;}


}
/* ===== 行動、桌面版面:  到 1024px 
 * --------------------------------------------------
 */

@media (max-width: 1024px) {
#SearchSet { position: relative;top: 50px; right: 50px; margin:0  }	
#MainNav .container { width:80%;  margin:0 0 0 120px; right:0 }
.navbar-toggle .icon-bar { background-color: #ffffff;}


/*  MainNav - 共用  */
#MainNav .container .navbar-nav li ul.sub { width: 550px; height: auto;}
#MainNav .container .navbar-nav li ul.dropdown-menu .row .caption {min-height: 100px;}
#MainNav .container .navbar-nav li ul.dropdown-menu .row li.sub {max-width: 23%;}

/* MainPage -   */
#mainContent {margin: 20px 0 50px 0;}
.news h2{ float:none}

.VisitUs { margin-left:10px; display: inline-block; }
.bx-viewport { width: 360px; margin: 0 0 0 10px;}
.bx-viewport .bx-prev { top: 12%;}
.bx-viewport .bx-next { bottom: -12%;}

.solutions {margin: 0 5px;}
.solutions h3, .solutions h3 a {height: 38px !important;}
.solutions img { max-width:100%;}

#mainContent .container .solutions .col-md-3 { padding:0 5px;}
#mainContent .container .news .col-md-3 {width: 35% !important;}

#mainContent .container .xml .col-xs-12, #mainContent .container .xml .col-md-12, #mainContent .container .xml .col-lg-12  { padding:0 8px }
#mainContent .container .products { /*width:100%;*/ margin:0}
#mainContent .container .products .col-sm-4, #mainContent .container .products .col-md-4, #mainContent .container .products .col-lg-4{ width:33%; float:left}


#mainContent .container .xs12{ width:30%;/*   width:100%;*/}
#mainContent .container .col-md-9 {width: 70%;}
#mainContent .container .xs12 .line-md{ display:none}

.Newsletter {margin:0/*40 0 0 0*/}
.Newsletter .form-inline { margin-top: 0; width: 100%; }
.Newsletter .navbar {margin: 0 10px;float: left; width: 70%; }
.Newsletter .form-inline {margin-top: 0px;width: 100%; display: inline-flex;}
.Newsletter .navbar {margin: 0 5px;}
.btn-subscribe {margin: 0 !important;}
.form-inline .form-control {width: 95%;}

.video { margin: 0px 0 0 20px; display: inline-block; vertical-align: top;}
.video .thumbnail img {max-width: 100%;}
.video img {margin: 0!important;}

#mainContent .container .news{ margin:0}
#mainContent .container .news .col-md-6 {width: 36%;}
.line-lg,.line-md  { display:none}

/*  CNTpage -    */
.breadcrumb { padding: 8px 5%;}
.faq-cat-content .panel-group .panel img, .content img { margin:0; max-width:100%; height:auto !important}

/*  Footer   */

.footLink ul li {margin: 0 14px !important;}

}



/* ===== 行動版面: 945px 到 1200px 
 * --------------------------------------------------
 */

@media (min-width: 945px) and (max-width: 1200px) {
#SearchSet {position: relative;top: 5px; right: 0; margin:0  }

/*  MainNav - 共用  */	
#MainNav .container { /*margin: 0 0 0 380px;  */}

/*  Home  */
#mainContent {margin: 20px 0 50px 0;}
.Newsletter .form-inline { display: inline-flex;}
.btn-subscribe {margin: 0;height: 34px;padding: 0 5px;}
#mainContent .container .xs12 {width: 30%; padding:0 5px}
#mainContent .container .xml .col-md-9 {width: 70%;}
.line-lg {width: 690px;}
.video img{margin: 0 0 0 10px;}

/*  主視覺 */
.carousel-caption p a { display:none}

/*  CNTpage - breadcrumb   */
.breadcrumb {padding: 8px 5%;}
}


/* ===== 行動版面: 868px 到 945px 
 * --------------------------------------------------
 */

@media (min-width: 868px) and (max-width: 945px) {
#SearchSet {position: relative;top: 5px; right: -20px; margin:0  }	

/*  MainNav - 共用  */
#MainNav .container { position: absolute; width: 70%; background-color: #ffffff; top:0; margin: 0; z-index: 9999; }
#MainNav .container .navbar-nav { background:none }
#MainNav .container .navbar-nav li a { font-size: 13px;}



/*  Home  */
#mainContent {margin: 20px 0 50px 0;}
.btn-subscribe {margin:0}

#mainContent .container .xs12{ width:30%;/* width:100%;*/}
#mainContent .container .col-md-9 {width: 70%;}

/*  Footer  */
.footLink ul li {margin: 0 10px;}
}


/* ===== 行動版面: 830px 到 868px 
 * --------------------------------------------------
 */

@media (min-width: 831px) and (max-width: 868px) {

#mainContent .container .xs12{ width:30%;/*   width:100%;*/}
#mainContent .container .col-md-9 {width: 70%;}


/*  Mainpage - Newsletter  */
.Newsletter .form-inline {margin-top: 0px;width: 100%; display: inline-flex;}
.Newsletter .navbar {margin: 0 0 0 10px;width: 80%;}
.btn-subscribe {margin: 0 0 0 5px; height: 35px;}
	
/*  MainNav - 共用  */
#MainNav .container { position: absolute; width: 70%; background-color: #ffffff; top:0; margin: 0; z-index: 9999;}	
#MainNav .container .navbar-nav {float: left !important; background:none  }
#MainNav .container .navbar-lan {background:none;padding: 0;}

/*  產品次選單  */
#MainNav .container .navbar-nav li ul.sub {width: 400px ;height: 400px; overflow-y: scroll}
#MainNav .container .navbar-nav li a {font-size: 13px;}

#SearchSet {position: absolute;top: 5px; right: 0; }

/*  主視覺 */
.carousel-caption p a { display:none}
}



/* ===== 行動版面: 到 830px ---768px 
 * --------------------------------------------------
 */

@media (max-width: 830px) {

#SearchSet {position: absolute;top: 48px; right: 100px; /* for 手機、平板 */display:none  }	
.navbar-toggle {/* For 手機、行動選單按鈕 */ position: relative; float: right; padding: 9px 10px; margin-top: 15px; margin-right: 15px; margin-bottom: 8px; background-color: #8ebeca; background-image: none; border: 1px solid transparent; border-radius: 4px;}
.navbar-toggle .icon-bar {background-color: #ffffff;}

/*  Home  */
#mainContent {margin: 20px 0 50px 0;}

.news h2{ float:none}
.VisitUs { margin-left: 20px; display: inline-block;}
.bx-viewport {width: 360px; margin: 0 0 0 10px;}
.bx-viewport .bx-prev {top: 12%;}
.bx-viewport .bx-next { bottom: -12%;}

.video {margin: 0 0 0 20px;}
.video .thumbnail img{ max-width:320px;}

.solutions {margin: 0 5px;}
.solutions h3, .solutions h3 a {height: 38px !important;  }
.solutions img { max-width:100%;}
#mainContent .container .solutions .col-md-3 { padding:0 5px;}
#mainContent .container .xml .col-xs-12, #mainContent .container .xml .col-md-12, #mainContent .container .xml .col-lg-12  { padding:0 8px }
#mainContent .container  .products { width:100%; margin:0}
#mainContent .container .products .col-sm-4, #mainContent .container .products .col-md-4, #mainContent .container .products .col-lg-4{ width:33.333333%; float:left}

/*.dl-horizontal dd {margin-left:0;}*/

.Newsletter {margin: 40px 0 0 10px}
#mainContent .container .xs12{ /*  */ width:100%;}
#mainContent .container .xs12 .line-md{ display:none}
.Newsletter .form-inline { margin-top: 0; width: 95%; }
.Newsletter .form-inline .form-control {}
.Newsletter .navbar { margin: 0 5px;float: left; width:90%; }
.btn-subscribe { margin:0}
.video { margin: 50px 0 0 20px; display: inline-block; vertical-align: top;}
.video .thumbnail img {max-width: 100%;}

/*  主視覺 */
.carousel-caption p a { display:none}

/*  MainNav - 共用  */
#MainNav .container .navbar-nav {float: right; background:none !important}
#MainNav .container .navbar-nav li a {font-size: 13px;}
.navbar-nav>li>.dropdown-menu { margin-top: 0;}
#MainNav .container { position: absolute; width: 60%; background-color: #ffffff; right: 10px; margin: 0; z-index: 9999;}
#MainNav .container .nav li { display: inherit !important;}

#MainNav .container .navbar-lan { /* 語系 */padding: 0 ;}
.caret{ /* 語系 */display:none }

#MainNav .container .navbar-nav {background: none; float: none;}
#MainNav .container .navbar-nav li a {color: #ffffff; font-size: 14px; font-weight: 600; padding: 10px; border-top: none; background:#8ebeca;}
#MainNav .container .navbar-nav li a:hover { background-color:#4e8594; color: #ffffff; border-top:none;}
#MainNav .container .navbar-nav li ul.dropdown-menu { padding:0}
#MainNav .container .navbar-nav li ul.dropdown-menu li a { background: none !important; font-size: 13px; color: #8ebeca; padding:5px 10px}
#MainNav .container .navbar-nav li ul.dropdown-menu li a:hover { background-color: #C2E5EE !important; color: #4e8594;}

/*  產品次選單  */

#MainNav .container .navbar-nav li ul.dropdown-menu .row li.sub {width:85%/* 45%*/;height: auto;float: left; max-width:none; }
#MainNav .container .navbar-nav li ul.dropdown-menu .row .caption {min-height: 80px;}
#MainNav .container .navbar-nav li ul.dropdown-menu .row .caption p a { line-height:10px;}
.media-carousel .col-md-6 { width:100%; margin:0 0 25px 0}
.media .active{ height:140px}
/*  CNTpage - 左方子選單   */
#Content .container .well ul.nav li ul  { display:none}

/* 表單 - ording   */
.faq-cat-content .panel-group .panel table td .form-control { min-width:80px}
.faq-cat-tabs li a {padding: 12px 10px; }

/*  CNTpage   */
#Content a.share { display:none}

/*  Footer  */
#Footer { height:200px;position: relative;bottom: 0; margin-top:55px; }
#Footer .footLink { display:none}
#Footer .footInfo {}
}

@media (max-width: 800px) {
	
#MainNav .container .navbar-nav li ul.sub {width: 450px;}
#mainContent .container .col-md-9 {width: 100%;}
.btn-subscribe {height: 34px;}

#mainContent .container .news .col-xs-6, #mainContent .container .news .col-xs-6 .col-md-6{ width:48%}
#mainContent .container .news .col-md-3 {width: 47% !important;float: left;}
}

/* ===== 行動版面: 768px 到 830px 
 * --------------------------------------------------
 */

@media (min-width: 481px) and (max-width: 830px) {

#MainNav .container { position: fixed; float: right; width: 76%; right: -20px;}
#MainNav .container .navbar-nav { margin: 0; background:none;}
#MainNav .container .nav-justified>li>a { color: #97999a;}
#MainNav .container .navbar-nav li { padding:0 3px }

#MainNav .container .navbar-nav li a { display: block; background: #ffffff; color: #97999a; font-size: 13px; font-weight: 700; padding: 25px 5px 0 5px; border-top: #ffffff 5px solid; }
#MainNav .container .navbar-lan { color:#1c60b2 !important;padding: 0; }
.caret {display: inline-block;}
#MainNav .container .navbar-nav li a:hover { background-color: #ffffff; color: #5bc6e1; border-top: #5bc6e1 5px solid;}
#MainNav .container .navbar-nav {float: left;}
#MainNav .container .navbar-nav li ul.sub {width:400px ;height: 400px; overflow-y: scroll}


/* 左方子選單 */
#Content .container .well ul.nav li ul { display:none}
#Content a.share { display:none}
}


/* ===== 手機版面: 480px  
 * --------------------------------------------------
 */

@media (max-width: 480px) {	

#SearchSet { display:none; }
.navbar-toggle {/* For手機選單按鈕 */ position: relative; float: right; padding: 9px 10px; margin-top: 15px; margin-right: 15px; margin-bottom: 8px; background-color: #8ebeca; background-image: none; border: 1px solid transparent; border-radius: 4px;}
.navbar-toggle .icon-bar {background-color: #ffffff;}


/*  Home  */
#mainContent {margin: 20px 0 50px 0;}

.Newsletter {margin-left:5px; margin-bottom: 20px;}
.news h2{ float:none}
.VisitUs { margin-left: 20px;}
.bx-viewport {width: 360px; margin: 0 0 0 10px;}
.bx-viewport .bx-prev {top: 12%;}
.bx-viewport .bx-next { bottom: -12%;}
.video {margin: 0 0 0 20px;}
.video .thumbnail img{ max-width:320px;}
.btn-subscribe {margin:0}
#mainContent .container .news .col-md-3 {width: 45% !important;float: left;}
.solutions ul li {line-height: 9px;}

/*  主視覺  */
.carousel-caption { display: none }
.carousel-caption p a { display:none}

/*  MainNav - 共用  */

.navbar-nav>li>.dropdown-menu { margin-top: 0;}
#MainNav .container { position: absolute; width: 90%; background-color: #ffffff; right: 10px; margin: 0; z-index: 9999;}
#MainNav .container .nav li { display: inherit !important;}

#MainNav .container .navbar-lan { /* 語系 */padding: 0 ;}
.caret{ /* 語系 */display:none }

#MainNav .container .navbar-nav {background: none; float: none;}
#MainNav .container .navbar-nav li a {color: #ffffff; font-size: 14px; font-weight: 600; padding: 10px; border-top: none; background:#8ebeca;}
#MainNav .container .navbar-nav li a:hover { background-color:#4e8594; color: #ffffff; border-top:none;}
#MainNav .container .navbar-nav li ul.dropdown-menu { padding:0}
#MainNav .container .navbar-nav li ul.dropdown-menu li a { background: none !important; font-size: 13px; color: #8ebeca; padding:5px 10px}
#MainNav .container .navbar-nav li ul.dropdown-menu li a:hover { background-color: #C2E5EE !important; color: #4e8594;}

/*  產品次選單  */
#MainNav .container .navbar-nav li ul.sub {width:100% ;height: 300px; overflow-y: scroll}
#MainNav .container .navbar-nav li ul.dropdown-menu .row li.sub {width: 40%; height: auto;float: left; max-width:none; }
#MainNav .container .navbar-nav li ul.dropdown-menu .row .caption {min-height: 80px;}
#MainNav .container .navbar-nav li ul.dropdown-menu .row .caption p a { line-height:10px;}


/* CNTpage - 左方子選單 */
#Content .container .well ul.nav li ul  { display:none}

/*  CNTpage  */
.content p img { max-width:100%; height:auto !important}
.content table.cotus td {display: inline-block; border-bottom:none;}
.content table.cotus td img{ margin:0}
#Content a.share { display:none}

/*  CNTpage - NEWS  */

ul.ListMsg li { display: inline-flex;}
ul.ListMsg li .Item {width: 40px;}
ul.ListMsg li .Title { width:230px !important}

/* CNTpage - Newsletter  */
.Newsletter .form-inline {margin-top: 0px;width: 90%;}
.Newsletter .navbar {margin: 0 0 0 10px;width:75%;}
.btn-subscribe {margin: 0 0 0 5px; height: 35px;}
.Newsletter .form-inline .form-control { width:95%;}

/*  CNTpage - Exhibition  */
ul.ListImgMsg li .Pic { width:190px;height: 100px;}
ul.ListImgMsg li .Note { height: 80px; line-height: 20px;}

/* 聯絡我們表格 */
.content table.cotus {}
.content table.cotus td{ vertical-align:top}

/*  Footer   */
#Footer { height:100px;}
#Footer .container p.pull-right {padding: 50px 0 20px 0;}

}


/* For 手機 */
@media (min-width: 320px) {
	


/* CNTpage - Newsletter  */
.Newsletter .form-inline {margin-top: 0px; width: 90%; display: inline-flex; }
.Newsletter .navbar {margin: 0 0 0 10px;width:65%;}
.btn-subscribe {margin: 0 0 0 5px; height: 35px;}
.Newsletter .form-inline .form-control { width:95%;}
.solutions ul li {line-height: 9px;}

/* 聯絡我們表格 */
.content table.cotus {}
.content table.cotus td{ vertical-align:top}

/*  Footer   */
#Footer {  }
/*#Footer .container p.pull-right {padding: 50px 0 20px 0;}*/
	
}