/*
 * style_newui.css
 * Optimized UI styles based on style.css for a modern, sci-fi, light theme.
 */

@charset "utf-8";
body {
	/* font-family deliberately not set to keep original font */
	color: #333; /* Darker text for contrast */
}
.logo {
	padding:0;
}
#myCarousel {
	margin: 30px 0; /* Adjusted margin */
}
#navbar-collapse ul {
	margin-top:0;
}
.carousel-inner img {
	margin: 0 auto;
}
/*.carousel-control {
	font-size: 100px;
}*/
.tab-h2 {
	font-size: 24px; /* Slightly larger */
	text-align: center;
	letter-spacing: 1.5px; /* Increased spacing */
	color: #007bff; /* Vibrant blue */
    margin-bottom: 15px; /* Added margin */
}
.tab-p {
	font-size: 16px; /* Slightly larger */
	text-align: center;
	letter-spacing: 1px;
	color: #666; /* Medium grey */
	margin: 15px 0 30px 0; /* Adjusted margin */
}
.tab1 {
	margin: 20px 0; /* Adjusted margin */
	color: #555; /* Dark grey */
}
.tab1 .text-muted {
	color: #999;
	text-decoration: line-through;
}
.tab1 .media-heading {
	margin: 5px 0 15px 0; /* Adjusted margin */
    font-size: 1.2em; /* Slightly larger */
    color: #007bff; /* Vibrant blue */
}
.tab1 .col {
	padding: 15px; /* Adjusted padding */
	padding-bottom: 30px; /* Adjusted padding */
    background-color: #ffffff; /* White background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.tab1 .col:hover {
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); /* More pronounced shadow */
}
.tab2 {
	background-color: #e9ecef; /* Light grey background */
	padding: 40px 20px; /* Adjusted padding */
	text-align: center;
}
.tab2 img {
	width: 35%; /* Adjusted size */
	height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.tab3 {
	padding: 40px 20px; /* Adjusted padding */
	text-align: center;
    background-color: #f8f9fa; /* Very light grey */
}
.tab3 img {
	width: 60%; /* Adjusted size */
	height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.text h3 {
	font-size: 20px;
    color: #007bff; /* Vibrant blue */
    margin-bottom: 10px; /* Added margin */
}
.text p {
	font-size: 15px;
    color: #555; /* Dark grey */
}
.jumbotron {
	background-image: url(../images/bg_light.jpg); /* Assuming a lighter background image exists */
	margin: 30px 0; /* Adjusted margin */
	color: #333; /* Dark text for contrast */
    padding: 40px 20px; /* Adjusted padding */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.jumbotron h1 {
	font-size: 30px; /* Adjusted size */
	padding: 0 0 0 10px; /* Adjusted padding */
    color: #007bff; /* Vibrant blue */
}
.jumbotron h4 {
	font-size: 17px; /* Adjusted size */
	padding: 0 0 0 10px; /* Adjusted padding */
    color: #555; /* Dark grey */
}
#information {
	background-color: #e9ecef; /* Light grey background */
	padding: 30px 0; /* Adjusted padding */
}
.info-content {
	background-color: #ffffff; /* White background */
	margin: 0 0 15px 0; /* Adjusted margin */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    border-radius: 8px; /* Rounded corners */
    padding: 15px; /* Added padding */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.info-content:hover {
    transform: translateY(-3px); /* Lift effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); /* More pronounced shadow */
}
.info-content img {
	margin: 8px 0; /* Adjusted margin */
    border-radius: 4px; /* Slightly rounded image corners */
}
.info-content h4 {
	color: #333; /* Dark text */
	padding: 0; /* Removed padding */
	font-size: 15px; /* Adjusted size */
    margin-bottom: 5px; /* Added margin */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.info-content p {
	line-height: 1.5; /* Adjusted line height */
    color: #666; /* Medium grey */
    font-size: 0.9em; /* Slightly smaller */
}
.info-right {
	background-color: #ffffff; /* White background */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    border-radius: 8px; /* Rounded corners */
    padding: 15px; /* Added padding */
}
.info-right blockquote {
	margin: 0;
	padding: 10px; /* Adjusted padding */
    border-left: 4px solid #007bff; /* Vibrant blue border */
    background-color: #e9ecef; /* Light grey background */
    border-radius: 4px; /* Rounded corners */
}
.info-right h2 {
	font-size: 20px;
	color: #007bff; /* Vibrant blue */
	padding: 0; /* Removed padding */
    margin-bottom: 10px; /* Added margin */
}
.info-right h4 {
	color: #333; /* Dark text */
	font-size: 16px;
	padding: 0; /* Removed padding */
	line-height: 1.5; /* Adjusted line height */
}
#case {
	padding: 30px 0; /* Adjusted padding */
	background-color: #f8f9fa; /* Very light grey */
	text-align: center;
}
#case h4 {
	color: #007bff; /* Vibrant blue */
    margin-bottom: 10px; /* Added margin */
    font-size: 1.2em; /* Slightly larger */
}
#case p {
	color: #555; /* Dark grey */
	line-height: 1.6;
    font-size: 1em; /* Adjusted size */
}
#about {
	background-color: #e9ecef; /* Light grey background */
	padding: 30px 15px; /* Adjusted padding */
}
#about a {
	color: #007bff; /* Vibrant blue */
    transition: color 0.3s ease-in-out;
}
#about a:hover {
    color: #0056b3; /* Darker blue on hover */
}
#about .about {
	background-color: #ffffff; /* White background */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    border-radius: 8px; /* Rounded corners */
    padding: 15px; /* Added padding */
}
#about h3 {
	color: #333; /* Dark text */
	font-size: 18px;
	border-bottom: 1px solid #eee; /* Light grey border */
	padding: 15px 0; /* Adjusted padding */
	margin: 0 0 10px 0;
}
#about p {
	line-height: 1.6; /* Adjusted line height */
	font-size: 14px; /* Adjusted size */
    color: #555; /* Dark grey */
}
#footer {
	background-color: #333; /* Dark grey background */
	border-top: 1px solid #555; /* Darker grey border */
	padding: 20px;
	text-align: center;
	color: #eee; /* Light grey text */
    font-size: 0.9em; /* Slightly smaller */
}
/*没有小于768px，是因为Bootstrap3以移动端优先设计*/

/* Responsive adjustments */
@media (min-width: 768px) {
	.tab-h2 {
		font-size: 28px;
	}
	.tab-p {
		font-size: 17px;
	}
	.text h3 {
		font-size: 24px;
	}
	.text p {
		font-size: 16px;
	}
	.tab2-text {
		float: left;
	}
	.tab2-img {
		float: right;
	}
	.jumbotron h1 {
		font-size: 32px;
	}
	.jumbotron h4 {
		font-size: 18px;
	}
	.info-content h4 {
		font-size: 18px;
	}
	#about h3 {
		font-size: 20px;
	}
	#about p {
		font-size: 15px;
	}
}

@media (min-width: 992px) {
	.tab-h2 {
		font-size: 30px;
	}
	.tab-p {
		font-size: 18px;
	}
	.text h3 {
		font-size: 26px;
	}
	.text p {
		font-size: 17px;
	}
	.jumbotron h1 {
		font-size: 36px;
	}
	.jumbotron h4 {
		font-size: 19px;
	}
	.info-content h4 {
		font-size: 20px;
	}
	#about h3 {
		font-size: 22px;
	}
	#about p {
		font-size: 16px;
	}
}

@media (min-width: 1200px) {
	.tab-h2 {
		font-size: 32px;
	}
	.tab-p {
		font-size: 19px;
	}
	.text h3 {
		font-size: 28px;
	}
	.text p {
		font-size: 18px;
	}
	.jumbotron h1 {
		font-size: 40px;
	}
	.jumbotron h4 {
		font-size: 20px;
	}
	.info-content h4 {
		font-size: 22px;
	}
	#about h3 {
		font-size: 24px;
	}
	#about p {
		font-size: 17px;
	}
}