﻿html, body { height: 100%; }
body, h1, h2, h3, h4, h5, input, button {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
a { color: #221409; }
a:hover, a:visited { color: #EF4035; text-decoration: none; }
input, button, a { outline: 0 none !important; }

.header { background: #191713 url('../img/bg1.jpg') no-repeat right bottom; background-size: cover; height: 100%; }
.header .slogan { color: white; left: 50%; margin: auto; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -50%); width: 50%; }
.header .slogan img { margin: 0 auto; }
.header .scroll-down { bottom: 20px; position: absolute; text-align: center; width: 100%; }
.header .scroll-down .btn { border: 2px solid white; border-radius: 100% !important; color: white; font-size: 30px; height: 50px; letter-spacing: normal; line-height: 50px; padding: 0; transition: all 0.5s ease 0s; width: 50px; }

.top-fixed { height: 70px; }
.section { padding: 80px 0; }

.navbar-default.navbar-expanded, .navbar-inverse.navbar-expanded { background: transparent none repeat scroll 0 0; border: medium none; }
.navbar-default .navbar-brand, .navbar-inverse .navbar-brand { color: white; opacity: 1; padding: 0 15px; text-decoration: none; transition: all 0.5s ease 0s; }
.navbar-fixed-top { padding: 15px 0; margin-bottom: 0; transition: padding 0.5s ease 0s; }
.navbar-fixed-top.navbar-expanded { padding: 30px 0; }
.navbar-nav a.item { background-image: url('../img/nav.png'); background-repeat: no-repeat; width: 120px; text-indent: -9999px; border-radius: 10px; }
.navbar-nav a.item:hover { opacity: 0.5; }
.navbar-nav a.item.b1 { background-position: center 0; }
.navbar-nav a.item.b2 { background-position: center -50px; }
.navbar-nav a.item.b3 { background-position: center -100px; }

hr { border-bottom: 1px solid white; border-top: 1px solid white; height: 2px; max-width: 200px; margin-bottom: 30px; }
hr.red { border-color: #ef4035; }
hr.brown { border-color: #221409; }

.bg-gray { background-color: #f5f5f5; }
.thumbnail { border-color: #fff; }
a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover { border-color: #EF4035; }

.about { font-size: 18px; line-height: 1.5; text-align: justify; }
.brand { display: block; margin: 10px 0 20px 0; }
.brand .caption { display: block; text-align: center; height: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shop { background: #fff url('../img/bg2.jpg') no-repeat center center; background-size: cover; }
.shop .image { border: 2px solid #fff; cursor: pointer; position: relative; margin: 10px 0 20px 0; }
.shop .image .info { display: none; position: absolute; left: 0; bottom: 0; width: 100%; padding: 20px; background-color: #080300; color: #fff; opacity: 0.8; }
.detail .back { display: block; float: right; padding: 20px 30px; }
.detail .panel-body { padding: 40px 15%; }
.detail .panel-body .media { margin: 0 auto; padding-bottom: 30px; }
.detail .panel-body .photo { padding-bottom: 30px; }
.detail .panel-body .photo img { margin: 0 auto; }
.comments { width: 640px; margin: 0 auto; }
.comments .media-body { font-size: 16px; padding-top: 20px; }
.comments .btn { width: 200px; }
.news .list .item { margin-bottom: 30px; }
.news .media { margin-bottom: 30px; }
.news a:hover, .news a:visited { color: #666; }

.form { position: relative; }
.form-control { border-color: #dfd7ca; }
.form-control:focus { border-color: #f47c3c; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(223, 215, 202, .6); }
.form-group { position: relative; }
.form-group .help-inline { background-color: #d9534f; border-radius: 4px; color: #fff; font-size: 12px; padding: 1px 7px; position: absolute; right: 0; top: 0; z-index: 10; white-space: nowrap; }
.hidden { position: absolute; opacity: 0; filter: alpha(opacity=0); z-index: -1; width: 0; height: 0; display: block !important; }
.required { color: #ff3300; }

.footer { background-color: #222; color: #fff; padding: 30px 0 60px 0; text-align: center; }
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover { background-color: #191713; border-color: #191713; color: #fff; }
