@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(bootstrap.min.css) ;
@import url(bootstrap-theme.min.css) ;
@import url(theme-elements.css) ;

@import url(in-bootsnav.css) ;/*---------------nav 樣式--------- */
@import url(in-bootsnav-style.css) ;/*-------  nav 樣式--------- */
@import url(in-LinkHover.css) ;/*---------hover 樣式--------- */
@import url(in-languag.css) ;/*---------------語言papa 樣式--------- */
@import url(in-goTOP.css) ;/* goTOP */

@import url('https://fonts.googleapis.com/css?family=Secular+One');/*---------------西語字型 樣式--------- */

@import url(http://www.google.com/cse/api/overlay.css) ;
html, body{
	background-color: #000000;
	overflow-x: hidden;
}
body, a{
	color: #ffffff;
	font-family:'Noto Sans TC', sans-serif;
}
a:focus,
a:active,
a:hover{
	color: #D90404;
	text-decoration:none;
  outline: 0;
}
i{
	margin-right: 10px;}
ul{
	list-style: none;
	padding: 0;
}
p{
	font-size: 13px;
	line-height: 1.8;
	text-align: justify;
}
#carousel-id{
	padding-top: 75px;
}
/*---------------------------------------header--------------------------------------- */
header{
	position: fixed;
	z-index: 5;
	width: 100%;
	border-bottom:3px solid #D90404; 
}
header .navbar-inverse{
	margin-bottom: 0;
}
.navbar-brand {
	padding: 23px 0;
	width: 275px;
}
.navbar-brand  img{
	width:100%;
}
.navbar-nav>li>a{
	text-shadow: none;
}
@media (min-width: 1024px){

	nav.navbar.bootsnav ul.nav > li{
		padding: 4px 0 22px 0;
	}
	nav.navbar.bootsnav ul.nav > li a{
		padding-bottom: 4px;
	}
}
#banner{
	background-image: url('../img/product/bg.jpg');
	height: 400px;
	width: 100%;
	background-size: cover;
	padding-top: 85px;
	overflow: hidden;
	position: relative;
}
@media screen and (min-width: 0px) and (max-width: 992px){
	.navbar-brand{
		/* height: 50px; */
		padding: 15px 20px;
	}	
	header img.logo {
		margin: 2px 0 0 10px;
		height: 90%;
		width: auto;
	}
	nav.navbar.bootsnav .navbar-collapse.collapse.in{
		background-color: rgba(0, 0, 0, 0.74);
	}
	#carousel-id{
		padding-top: 55px;
	}

     nav.navbar.bootsnav .navbar-nav{
     	padding-bottom: 30px;
     }
     #banner{
     	padding-top: 47px;
     	height: 260px;
     }
     #banner img:nth-child(2){
     	width: 180px;
     }
     #banner img:nth-child(2){
     	left: 28%;
     	bottom:20% ;	
     }

}

@media screen and (min-width: 0px) and (max-width: 400px){
	.navbar-brand{
		padding: 12px 50px;
	}	
	header img.logo {
		margin: 2px 0 0 -10px;
		height: 90%;
		width: auto;
	}
}
ul.list_number{
	list-style-type:decimal-leading-zero; 
}
ul.list_number li{
	position: relative;
	margin-bottom: 30px;
}
ul.list_number li::after{
	content: "ˇ";
	position: absolute;
	bottom: -23px;
	left: 7%;
}
ul.list_number li:last-child::after{
	content: "";
}
input{
	outline:none;
} 
/* -------- 手機板 -------- */
@media screen and (min-width: 1px) and (max-width: 767px){
	ul.list_number li::after{
		left: 30%;
	}
}
@media screen and (min-width: 1101px) and (max-width: 3000px){
	.mobailshow h6{
	  display: none;
	  opacity: 0;
	}
}
@media screen and (min-width: 451px) and (max-width: 1100px){
	  .mobailshow h6{
	    display: block;
	    opacity: 0;
	  }
}

@media screen and (min-width: 0px) and (max-width: 450px){
   .mobailshow h6{
	  display: none;
	  opacity: 0;
	}
}
/*---------------------------------------body--------------------------------------- */
article .container-fluid > .row{
	background-color: #000000;
	background-image: url('../img/bg.png');
	background-position: top center;
	background-repeat: no-repeat;
	/* background-size: cover; */
}
.breadcrumbBox, .breadcrumb{
	background-color: #000;
	border-radius: 0;
	margin-bottom: 0;
}
.breadcrumb>li+li:before{
	content: ">";
}
.breadcrumb>.active{
	color: #ca0010;
}
/*頁碼 a */
.pagination>li>a, 
.pagination>li>span{
	background-color: rgba(255, 255, 255, 0);
	border: none;
}
.pagination>li>a.active,
.pagination>li>a:focus, 
.pagination>li>a:hover,
.pagination>li>span:focus, 
.pagination>li>span:hover{
	background-color:#d90404 ;
}
/* pdf檔案 */
.pdf_a a{
	margin-bottom: 20px;
	font-weight: 200;
}
/* 字 */
.color_red{
	color: #D90404;
}
.color_red:hover{
	color: #888;
}
h2{
	font-weight: bold;
	letter-spacing: 0.2em;
	color: #fff;
	font-size:1.9em ;
}
h6{
	color: #fff;	
}
/* 內文標題前的裝飾 */
h4::before{
  content: ">";
  margin: 0 5px 0 -20px;
}
.carousel-indicators{
	z-index: 4;
}

/* 相關資訊按鈕 */
.informationBox span{
	color:#D90404;
	border: 2px solid #D90404;
	padding: 5px 10px;
	display: block;
	margin: 10px auto;
	border-radius: 4px;
	width: 100px;
}
.informationBox a:active span,
.informationBox a:hover span{
	background-color:#D90404;
	color: #fff; 
}
/* SEARCH */
.SEARCH_title{
	padding-top: 135px;
}
#banner.SEARCH_title{
	height: 197px;
}
.SEARCH_title h2{
	margin: 35px 0;
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 5px;
}
.SEARCH_title span,
.SEARCH_in span{
	color:#D90404 ;
}
.SEARCH_title h5 span::before,
.SEARCH_title h5 span::after{
	content: " ' ";
	color:#fff ;
}
.SEARCH_in{
	margin-top: 50px;
}
.SEARCH_in li{
	border-bottom: 1px solid rgba(255, 255, 255, 0.32);
	/* padding-bottom: 20px; */
	margin-bottom: 20px;
}
.SEARCH_in li p{
	white-space:nowrap;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	overflow: hidden;
}
/* 黑背景 */
.Square{
	position: relative;
	padding:25px 0;
}
.Square:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.64);
	opacity: 0.3;
}
/* s內頁頂部內間距 */
.pt115{
	padding-top: 85px;
}

@media screen and (min-width: 768px) and (max-width: 992px){
		.pt115{padding-top: 50px;}
}
@media screen and (min-width: 0px) and (max-width: 767px){
		.pt115{padding-top: 30px;}
}
/*下邊線 白色*/
.bbf,.bb5{
	margin-bottom: 20px;
	padding-bottom: 20px;
}
.bbf{
	border-bottom: 1px solid #fff;
}
/*下邊線 灰色*/
.bb5{
	border-bottom: 1px solid #555;
}
.bg{
	background-color: rgba(17, 17, 17, 0.7);
	margin: 50px 0;
	padding: 20px 30px;
}
#story .bg,
#SAFETY .bg{
	padding: 20px 20px 20px 40px;
}


#TyreLabeling,
#SAFETY,      /*安全使用須知 */
#TONE,        /*調胎 */
#aboutContact,/*關於南港輪胎*/
#History,      /*南港輪胎歷史沿革 */ 
#story{       /*品牌故事 */ 
	position: relative;
}
#SAFETY::before,      /*安全使用須知 */
#TONE::before,        /*調胎 */
#TyreLabeling::before,/*TyreLabeling */
#aboutContact::before,/*關於南港輪胎*/
#History::before,     /*南港輪胎歷史沿革 */ 
#story::before{       /*品牌故事 */ 
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.6;
	width: 100%;
	height: 100%;
	content: "";
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/*搜尋*/
.top-search{
	padding: 0;
}
#gsc-i-id1{
	background-color: rgba(0, 0, 0, 0)!important;
	border: none!important;
	border-bottom: 1px solid #777!important;

}
.gsc-webResult.gsc-result, 
.gsc-results .gsc-imageResult,
.gsc-control-cse{
	background-color: rgba(0, 0, 0, 0)!important;
}

.goog-te-gadget-simple{
	background-color: rgba(0, 0, 0, 0)!important;
	border: none!important;
	width: 100%!important;
}
.goog-te-gadget-simple > img{
	display: none!important;
}
.goog-te-gadget-simple > span{
	display: block!important;
	width: 100%!important;
}
.goog-te-gadget-simple .goog-te-menu-value{
	color: #ffffff!important;
	margin: 0!important;
	background-color: rgba(0, 0, 0, 0)!important;
	text-align: center;
}
.goog-te-gadget-simple .goog-te-menu-value span,
.gsc-control-cse{
	border: none!important;
}

.goog-te-menu2{
	background-color: #000!important;
}
table.gsc-search-box td div.gsc-clear-button{
	display: none!important;
}
/*google翻譯往下推*/
.translated-ltr .navbar-fixed,
.translated-ltr .side{
	top: 40px;
}


/*---------------------------------------footer--------------------------------------- */

footer{
	padding-top: 30px;
	border-top: 3px solid #D90404;
	background-color:#000000;
	color: #ffffff; 
}
footer .col-xs-12.col-sm-6>p{
	margin-top: 15px;
}
footer h3{
	padding-left: 15px;
}
footer img.logo {
	width: 100%;
	margin: -10px 0 0 0;
}
@media screen and (min-width: 0px) and (max-width: 768px){
	footer .contentUs{
		margin-top: 20px;
	}
}

footer>.row>p{
	background-color: #4C4C4C;
	margin:10px 0 0 0;
	line-height: 2;
}
footer .socialMedia h3{
	color: rgba(255, 255, 255, 0);
}

footer .chines{
	width: 80%;
	margin: 10px 0 0 0 ;
}
footer h3.mobailShow{
	display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px){
	.socialMedia h3{
		display: none;
	}
	.socialMedia i{
		margin: 10px 0 0 10px;
	}
	footer h3.mobailShow{
		display: block;
	}
	footer h3.mobailShow img{
		width: 50%;
		margin: 10px 0 0 -10px;
	}
	footer h3.row{
		display: none;
	}
}