7044 lines
141 KiB
Plaintext
7044 lines
141 KiB
Plaintext
|
/** {border:1px solid green;}*/
|
||
|
/* #################################################################
|
||
|
|
||
|
1.Theme
|
||
|
1.1 Base
|
||
|
1.2 Reset
|
||
|
1.3 Grid-layout
|
||
|
1.4 Header
|
||
|
A. Topbar
|
||
|
B. Header-content
|
||
|
1.5 Main-content
|
||
|
1.6 Footer
|
||
|
2.Element
|
||
|
2.1 Slideshow
|
||
|
2.2 Deal
|
||
|
2.3. Tabs
|
||
|
2.4. Main-content-list
|
||
|
2.5. Content-grid
|
||
|
2.6. Contact
|
||
|
2.7. Detail
|
||
|
3.Woocommerce
|
||
|
3.1 Product-img
|
||
|
3.2 Product-detail
|
||
|
A. List
|
||
|
3.3 Cart
|
||
|
3.4 Checkout
|
||
|
4.Mixins
|
||
|
4.1 Clearfix
|
||
|
4.2 Border-radius
|
||
|
4.3 Size
|
||
|
5. Home Page
|
||
|
5.1 Index_layout_01
|
||
|
5.2 Index_layout_02
|
||
|
6. Shop
|
||
|
6.1 Shop_full_width_6col
|
||
|
6.2 Shop_full_width_4col
|
||
|
6.3 Shop_grid_left Sidebar
|
||
|
6.4 Shop_grid_right Sidebar
|
||
|
6.5 Shop_list_left Sidebar
|
||
|
6.6 Shop_list_right Sidebar
|
||
|
6.7 Single Product
|
||
|
6.8 Shop Cart
|
||
|
6.9 Shop Checkout
|
||
|
|
||
|
################################################################# */
|
||
|
/* 1. theme */
|
||
|
/* 1.1 Base */
|
||
|
html, body {
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
html {
|
||
|
/* font-size: 62.5%;*/
|
||
|
}
|
||
|
|
||
|
body {
|
||
|
font-family: Lato;
|
||
|
color: #333;
|
||
|
/*font-size: 13px;*/
|
||
|
font-style: normal;
|
||
|
font-weight: 400;
|
||
|
line-height: 1.42857;
|
||
|
overflow-x: hidden;
|
||
|
}
|
||
|
|
||
|
/*---------- Tool ----------*/
|
||
|
.d-table {
|
||
|
display: table;
|
||
|
width: 100%;
|
||
|
}
|
||
|
.border *{
|
||
|
|
||
|
border:1px solid gray;
|
||
|
}
|
||
|
.d-table > div {
|
||
|
display: table-cell;
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
|
||
|
.f-left {
|
||
|
float: left !important;
|
||
|
}
|
||
|
|
||
|
.f-right {
|
||
|
float: right !important;
|
||
|
}
|
||
|
|
||
|
.f-none {
|
||
|
float: none !important;
|
||
|
}
|
||
|
|
||
|
.a-left {
|
||
|
text-align: left !important;
|
||
|
}
|
||
|
|
||
|
.a-right {
|
||
|
text-align: right !important;
|
||
|
}
|
||
|
|
||
|
.a-center {
|
||
|
text-align: center !important;
|
||
|
}
|
||
|
|
||
|
/*---------- Links ----------*/
|
||
|
.links {
|
||
|
list-style: none;
|
||
|
}
|
||
|
|
||
|
.links a {
|
||
|
text-decoration: none;
|
||
|
display: block;
|
||
|
line-height: 26px;
|
||
|
}
|
||
|
|
||
|
.links.links-inline li {
|
||
|
float: left;
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
|
||
|
.links.links-inline li:last-child {
|
||
|
margin-right: 0;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
/* color: #444;*/
|
||
|
color: #393184;
|
||
|
}
|
||
|
|
||
|
a:focus {
|
||
|
outline: none;
|
||
|
}
|
||
|
|
||
|
/* 1.2 Reset */
|
||
|
* {
|
||
|
-webkit-box-sizing: border-box;
|
||
|
-moz-box-sizing: border-box;
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
|
||
|
html, body, div, span, applet, object, iframe,
|
||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||
|
a, abbr, acronym, address, big, cite, code,
|
||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||
|
small, strike, strong, sub, sup, tt, var,
|
||
|
b, u, i, center,
|
||
|
dl, dt, dd, ol, ul, li,
|
||
|
fieldset, form, label, legend,
|
||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||
|
article, aside, canvas, details, embed,
|
||
|
figure, figcaption, footer, header, hgroup,
|
||
|
menu, nav, output, ruby, section, summary,
|
||
|
time, mark, audio, video {
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
border: 0;
|
||
|
vertical-align: baseline;
|
||
|
}
|
||
|
|
||
|
/* HTML5 display-role reset for older browsers */
|
||
|
article, aside, details, figcaption, figure,
|
||
|
footer, header, hgroup, menu, nav, section {
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
body {
|
||
|
/* line-height: 1;
|
||
|
*/
|
||
|
overflow-x: hidden;
|
||
|
}
|
||
|
|
||
|
blockquote, q {
|
||
|
quotes: none;
|
||
|
}
|
||
|
|
||
|
blockquote:before, blockquote:after,
|
||
|
q:before, q:after {
|
||
|
content: '';
|
||
|
content: none;
|
||
|
}
|
||
|
|
||
|
table {
|
||
|
border-collapse: collapse;
|
||
|
border-spacing: 0;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
img {
|
||
|
display: block;
|
||
|
max-width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
/* 1.3 Grid-layout */
|
||
|
.owl-carousel {
|
||
|
width: auto !important;
|
||
|
margin-left: -10px;
|
||
|
margin-right: -10px;
|
||
|
}
|
||
|
|
||
|
.owl-carousel .owl-wrapper-outer .owl-item {
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
|
||
|
.container {
|
||
|
margin-right: auto;
|
||
|
margin-left: auto;
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
|
||
|
.container:before, .container:after {
|
||
|
content: " ";
|
||
|
display: table;
|
||
|
}
|
||
|
|
||
|
.container:after {
|
||
|
clear: both;
|
||
|
}
|
||
|
|
||
|
@media (min-width: 768px) {
|
||
|
.container {
|
||
|
width: 740px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 992px) {
|
||
|
.container {
|
||
|
width: 960px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 1200px) {
|
||
|
.container {
|
||
|
width: 1190px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.container-fluid {
|
||
|
margin-right: auto;
|
||
|
margin-left: auto;
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
|
||
|
.container-fluid:before, .container-fluid:after {
|
||
|
content: " ";
|
||
|
display: table;
|
||
|
}
|
||
|
|
||
|
.container-fluid:after {
|
||
|
clear: both;
|
||
|
}
|
||
|
|
||
|
.row {
|
||
|
margin-left: -10px;
|
||
|
margin-right: -10px;
|
||
|
}
|
||
|
|
||
|
.row:before, .row:after {
|
||
|
content: " ";
|
||
|
display: table;
|
||
|
}
|
||
|
|
||
|
.row:after {
|
||
|
clear: both;
|
||
|
}
|
||
|
|
||
|
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
|
||
|
position: relative;
|
||
|
min-height: 1px;
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
|
||
|
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.col-xs-1 {
|
||
|
width: 8.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-2 {
|
||
|
width: 16.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-3 {
|
||
|
width: 25%;
|
||
|
}
|
||
|
|
||
|
.col-xs-4 {
|
||
|
width: 33.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-5 {
|
||
|
width: 41.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-6 {
|
||
|
width: 50%;
|
||
|
}
|
||
|
|
||
|
.col-xs-7 {
|
||
|
width: 58.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-8 {
|
||
|
width: 66.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-9 {
|
||
|
width: 75%;
|
||
|
}
|
||
|
|
||
|
.col-xs-10 {
|
||
|
width: 83.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-11 {
|
||
|
width: 91.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-12 {
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-0 {
|
||
|
right: auto;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-1 {
|
||
|
right: 8.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-2 {
|
||
|
right: 16.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-3 {
|
||
|
right: 25%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-4 {
|
||
|
right: 33.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-5 {
|
||
|
right: 41.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-6 {
|
||
|
right: 50%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-7 {
|
||
|
right: 58.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-8 {
|
||
|
right: 66.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-9 {
|
||
|
right: 75%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-10 {
|
||
|
right: 83.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-11 {
|
||
|
right: 91.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-pull-12 {
|
||
|
right: 100%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-0 {
|
||
|
left: auto;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-1 {
|
||
|
left: 8.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-2 {
|
||
|
left: 16.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-3 {
|
||
|
left: 25%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-4 {
|
||
|
left: 33.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-5 {
|
||
|
left: 41.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-6 {
|
||
|
left: 50%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-7 {
|
||
|
left: 58.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-8 {
|
||
|
left: 66.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-9 {
|
||
|
left: 75%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-10 {
|
||
|
left: 83.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-11 {
|
||
|
left: 91.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-push-12 {
|
||
|
left: 100%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-0 {
|
||
|
margin-left: 0%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-1 {
|
||
|
margin-left: 8.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-2 {
|
||
|
margin-left: 16.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-3 {
|
||
|
margin-left: 25%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-4 {
|
||
|
margin-left: 33.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-5 {
|
||
|
margin-left: 41.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-6 {
|
||
|
margin-left: 50%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-7 {
|
||
|
margin-left: 58.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-8 {
|
||
|
margin-left: 66.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-9 {
|
||
|
margin-left: 75%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-10 {
|
||
|
margin-left: 83.33333%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-11 {
|
||
|
margin-left: 91.66667%;
|
||
|
}
|
||
|
|
||
|
.col-xs-offset-12 {
|
||
|
margin-left: 100%;
|
||
|
}
|
||
|
|
||
|
@media (min-width: 768px) {
|
||
|
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
|
||
|
float: left;
|
||
|
}
|
||
|
.col-sm-1 {
|
||
|
width: 8.33333%;
|
||
|
}
|
||
|
.col-sm-2 {
|
||
|
width: 16.66667%;
|
||
|
}
|
||
|
.col-sm-3 {
|
||
|
width: 25%;
|
||
|
}
|
||
|
.col-sm-4 {
|
||
|
width: 33.33333%;
|
||
|
}
|
||
|
.col-sm-5 {
|
||
|
width: 41.66667%;
|
||
|
}
|
||
|
.col-sm-6 {
|
||
|
width: 50%;
|
||
|
}
|
||
|
.col-sm-7 {
|
||
|
width: 58.33333%;
|
||
|
}
|
||
|
.col-sm-8 {
|
||
|
width: 66.66667%;
|
||
|
}
|
||
|
.col-sm-9 {
|
||
|
width: 75%;
|
||
|
}
|
||
|
.col-sm-10 {
|
||
|
width: 83.33333%;
|
||
|
}
|
||
|
.col-sm-11 {
|
||
|
width: 91.66667%;
|
||
|
}
|
||
|
.col-sm-12 {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.col-sm-pull-0 {
|
||
|
right: auto;
|
||
|
}
|
||
|
.col-sm-pull-1 {
|
||
|
right: 8.33333%;
|
||
|
}
|
||
|
.col-sm-pull-2 {
|
||
|
right: 16.66667%;
|
||
|
}
|
||
|
.col-sm-pull-3 {
|
||
|
right: 25%;
|
||
|
}
|
||
|
.col-sm-pull-4 {
|
||
|
right: 33.33333%;
|
||
|
}
|
||
|
.col-sm-pull-5 {
|
||
|
right: 41.66667%;
|
||
|
}
|
||
|
.col-sm-pull-6 {
|
||
|
right: 50%;
|
||
|
}
|
||
|
.col-sm-pull-7 {
|
||
|
right: 58.33333%;
|
||
|
}
|
||
|
.col-sm-pull-8 {
|
||
|
right: 66.66667%;
|
||
|
}
|
||
|
.col-sm-pull-9 {
|
||
|
right: 75%;
|
||
|
}
|
||
|
.col-sm-pull-10 {
|
||
|
right: 83.33333%;
|
||
|
}
|
||
|
.col-sm-pull-11 {
|
||
|
right: 91.66667%;
|
||
|
}
|
||
|
.col-sm-pull-12 {
|
||
|
right: 100%;
|
||
|
}
|
||
|
.col-sm-push-0 {
|
||
|
left: auto;
|
||
|
}
|
||
|
.col-sm-push-1 {
|
||
|
left: 8.33333%;
|
||
|
}
|
||
|
.col-sm-push-2 {
|
||
|
left: 16.66667%;
|
||
|
}
|
||
|
.col-sm-push-3 {
|
||
|
left: 25%;
|
||
|
}
|
||
|
.col-sm-push-4 {
|
||
|
left: 33.33333%;
|
||
|
}
|
||
|
.col-sm-push-5 {
|
||
|
left: 41.66667%;
|
||
|
}
|
||
|
.col-sm-push-6 {
|
||
|
left: 50%;
|
||
|
}
|
||
|
.col-sm-push-7 {
|
||
|
left: 58.33333%;
|
||
|
}
|
||
|
.col-sm-push-8 {
|
||
|
left: 66.66667%;
|
||
|
}
|
||
|
.col-sm-push-9 {
|
||
|
left: 75%;
|
||
|
}
|
||
|
.col-sm-push-10 {
|
||
|
left: 83.33333%;
|
||
|
}
|
||
|
.col-sm-push-11 {
|
||
|
left: 91.66667%;
|
||
|
}
|
||
|
.col-sm-push-12 {
|
||
|
left: 100%;
|
||
|
}
|
||
|
.col-sm-offset-0 {
|
||
|
margin-left: 0%;
|
||
|
}
|
||
|
.col-sm-offset-1 {
|
||
|
margin-left: 8.33333%;
|
||
|
}
|
||
|
.col-sm-offset-2 {
|
||
|
margin-left: 16.66667%;
|
||
|
}
|
||
|
.col-sm-offset-3 {
|
||
|
margin-left: 25%;
|
||
|
}
|
||
|
.col-sm-offset-4 {
|
||
|
margin-left: 33.33333%;
|
||
|
}
|
||
|
.col-sm-offset-5 {
|
||
|
margin-left: 41.66667%;
|
||
|
}
|
||
|
.col-sm-offset-6 {
|
||
|
margin-left: 50%;
|
||
|
}
|
||
|
.col-sm-offset-7 {
|
||
|
margin-left: 58.33333%;
|
||
|
}
|
||
|
.col-sm-offset-8 {
|
||
|
margin-left: 66.66667%;
|
||
|
}
|
||
|
.col-sm-offset-9 {
|
||
|
margin-left: 75%;
|
||
|
}
|
||
|
.col-sm-offset-10 {
|
||
|
margin-left: 83.33333%;
|
||
|
}
|
||
|
.col-sm-offset-11 {
|
||
|
margin-left: 91.66667%;
|
||
|
}
|
||
|
.col-sm-offset-12 {
|
||
|
margin-left: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 992px) {
|
||
|
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
|
||
|
float: left;
|
||
|
}
|
||
|
.col-md-1 {
|
||
|
width: 8.33333%;
|
||
|
}
|
||
|
.col-md-2 {
|
||
|
width: 16.66667%;
|
||
|
}
|
||
|
.col-md-3 {
|
||
|
width: 25%;
|
||
|
}
|
||
|
.col-md-4 {
|
||
|
width: 33.33333%;
|
||
|
}
|
||
|
.col-md-5 {
|
||
|
width: 41.66667%;
|
||
|
}
|
||
|
.col-md-6 {
|
||
|
width: 50%;
|
||
|
}
|
||
|
.col-md-7 {
|
||
|
width: 58.33333%;
|
||
|
}
|
||
|
.col-md-8 {
|
||
|
width: 66.66667%;
|
||
|
}
|
||
|
.col-md-9 {
|
||
|
width: 75%;
|
||
|
}
|
||
|
.col-md-10 {
|
||
|
width: 83.33333%;
|
||
|
}
|
||
|
.col-md-11 {
|
||
|
width: 91.66667%;
|
||
|
}
|
||
|
.col-md-12 {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.col-md-pull-0 {
|
||
|
right: auto;
|
||
|
}
|
||
|
.col-md-pull-1 {
|
||
|
right: 8.33333%;
|
||
|
}
|
||
|
.col-md-pull-2 {
|
||
|
right: 16.66667%;
|
||
|
}
|
||
|
.col-md-pull-3 {
|
||
|
right: 25%;
|
||
|
}
|
||
|
.col-md-pull-4 {
|
||
|
right: 33.33333%;
|
||
|
}
|
||
|
.col-md-pull-5 {
|
||
|
right: 41.66667%;
|
||
|
}
|
||
|
.col-md-pull-6 {
|
||
|
right: 50%;
|
||
|
}
|
||
|
.col-md-pull-7 {
|
||
|
right: 58.33333%;
|
||
|
}
|
||
|
.col-md-pull-8 {
|
||
|
right: 66.66667%;
|
||
|
}
|
||
|
.col-md-pull-9 {
|
||
|
right: 75%;
|
||
|
}
|
||
|
.col-md-pull-10 {
|
||
|
right: 83.33333%;
|
||
|
}
|
||
|
.col-md-pull-11 {
|
||
|
right: 91.66667%;
|
||
|
}
|
||
|
.col-md-pull-12 {
|
||
|
right: 100%;
|
||
|
}
|
||
|
.col-md-push-0 {
|
||
|
left: auto;
|
||
|
}
|
||
|
.col-md-push-1 {
|
||
|
left: 8.33333%;
|
||
|
}
|
||
|
.col-md-push-2 {
|
||
|
left: 16.66667%;
|
||
|
}
|
||
|
.col-md-push-3 {
|
||
|
left: 25%;
|
||
|
}
|
||
|
.col-md-push-4 {
|
||
|
left: 33.33333%;
|
||
|
}
|
||
|
.col-md-push-5 {
|
||
|
left: 41.66667%;
|
||
|
}
|
||
|
.col-md-push-6 {
|
||
|
left: 50%;
|
||
|
}
|
||
|
.col-md-push-7 {
|
||
|
left: 58.33333%;
|
||
|
}
|
||
|
.col-md-push-8 {
|
||
|
left: 66.66667%;
|
||
|
}
|
||
|
.col-md-push-9 {
|
||
|
left: 75%;
|
||
|
}
|
||
|
.col-md-push-10 {
|
||
|
left: 83.33333%;
|
||
|
}
|
||
|
.col-md-push-11 {
|
||
|
left: 91.66667%;
|
||
|
}
|
||
|
.col-md-push-12 {
|
||
|
left: 100%;
|
||
|
}
|
||
|
.col-md-offset-0 {
|
||
|
margin-left: 0%;
|
||
|
}
|
||
|
.col-md-offset-1 {
|
||
|
margin-left: 8.33333%;
|
||
|
}
|
||
|
.col-md-offset-2 {
|
||
|
margin-left: 16.66667%;
|
||
|
}
|
||
|
.col-md-offset-3 {
|
||
|
margin-left: 25%;
|
||
|
}
|
||
|
.col-md-offset-4 {
|
||
|
margin-left: 33.33333%;
|
||
|
}
|
||
|
.col-md-offset-5 {
|
||
|
margin-left: 41.66667%;
|
||
|
}
|
||
|
.col-md-offset-6 {
|
||
|
margin-left: 50%;
|
||
|
}
|
||
|
.col-md-offset-7 {
|
||
|
margin-left: 58.33333%;
|
||
|
}
|
||
|
.col-md-offset-8 {
|
||
|
margin-left: 66.66667%;
|
||
|
}
|
||
|
.col-md-offset-9 {
|
||
|
margin-left: 75%;
|
||
|
}
|
||
|
.col-md-offset-10 {
|
||
|
margin-left: 83.33333%;
|
||
|
}
|
||
|
.col-md-offset-11 {
|
||
|
margin-left: 91.66667%;
|
||
|
}
|
||
|
.col-md-offset-12 {
|
||
|
margin-left: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 1200px) {
|
||
|
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
|
||
|
float: left;
|
||
|
}
|
||
|
.col-lg-1 {
|
||
|
width: 8.33333%;
|
||
|
}
|
||
|
.col-lg-2 {
|
||
|
width: 16.66667%;
|
||
|
}
|
||
|
.col-lg-3 {
|
||
|
width: 25%;
|
||
|
}
|
||
|
.col-lg-4 {
|
||
|
width: 33.33333%;
|
||
|
}
|
||
|
.col-lg-5 {
|
||
|
width: 41.66667%;
|
||
|
}
|
||
|
.col-lg-6 {
|
||
|
width: 50%;
|
||
|
}
|
||
|
.col-lg-7 {
|
||
|
width: 58.33333%;
|
||
|
}
|
||
|
.col-lg-8 {
|
||
|
width: 66.66667%;
|
||
|
}
|
||
|
.col-lg-9 {
|
||
|
width: 75%;
|
||
|
}
|
||
|
.col-lg-10 {
|
||
|
width: 83.33333%;
|
||
|
}
|
||
|
.col-lg-11 {
|
||
|
width: 91.66667%;
|
||
|
}
|
||
|
.col-lg-12 {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.col-lg-pull-0 {
|
||
|
right: auto;
|
||
|
}
|
||
|
.col-lg-pull-1 {
|
||
|
right: 8.33333%;
|
||
|
}
|
||
|
.col-lg-pull-2 {
|
||
|
right: 16.66667%;
|
||
|
}
|
||
|
.col-lg-pull-3 {
|
||
|
right: 25%;
|
||
|
}
|
||
|
.col-lg-pull-4 {
|
||
|
right: 33.33333%;
|
||
|
}
|
||
|
.col-lg-pull-5 {
|
||
|
right: 41.66667%;
|
||
|
}
|
||
|
.col-lg-pull-6 {
|
||
|
right: 50%;
|
||
|
}
|
||
|
.col-lg-pull-7 {
|
||
|
right: 58.33333%;
|
||
|
}
|
||
|
.col-lg-pull-8 {
|
||
|
right: 66.66667%;
|
||
|
}
|
||
|
.col-lg-pull-9 {
|
||
|
right: 75%;
|
||
|
}
|
||
|
.col-lg-pull-10 {
|
||
|
right: 83.33333%;
|
||
|
}
|
||
|
.col-lg-pull-11 {
|
||
|
right: 91.66667%;
|
||
|
}
|
||
|
.col-lg-pull-12 {
|
||
|
right: 100%;
|
||
|
}
|
||
|
.col-lg-push-0 {
|
||
|
left: auto;
|
||
|
}
|
||
|
.col-lg-push-1 {
|
||
|
left: 8.33333%;
|
||
|
}
|
||
|
.col-lg-push-2 {
|
||
|
left: 16.66667%;
|
||
|
}
|
||
|
.col-lg-push-3 {
|
||
|
left: 25%;
|
||
|
}
|
||
|
.col-lg-push-4 {
|
||
|
left: 33.33333%;
|
||
|
}
|
||
|
.col-lg-push-5 {
|
||
|
left: 41.66667%;
|
||
|
}
|
||
|
.col-lg-push-6 {
|
||
|
left: 50%;
|
||
|
}
|
||
|
.col-lg-push-7 {
|
||
|
left: 58.33333%;
|
||
|
}
|
||
|
.col-lg-push-8 {
|
||
|
left: 66.66667%;
|
||
|
}
|
||
|
.col-lg-push-9 {
|
||
|
left: 75%;
|
||
|
}
|
||
|
.col-lg-push-10 {
|
||
|
left: 83.33333%;
|
||
|
}
|
||
|
.col-lg-push-11 {
|
||
|
left: 91.66667%;
|
||
|
}
|
||
|
.col-lg-push-12 {
|
||
|
left: 100%;
|
||
|
}
|
||
|
.col-lg-offset-0 {
|
||
|
margin-left: 0%;
|
||
|
}
|
||
|
.col-lg-offset-1 {
|
||
|
margin-left: 8.33333%;
|
||
|
}
|
||
|
.col-lg-offset-2 {
|
||
|
margin-left: 16.66667%;
|
||
|
}
|
||
|
.col-lg-offset-3 {
|
||
|
margin-left: 25%;
|
||
|
}
|
||
|
.col-lg-offset-4 {
|
||
|
margin-left: 33.33333%;
|
||
|
}
|
||
|
.col-lg-offset-5 {
|
||
|
margin-left: 41.66667%;
|
||
|
}
|
||
|
.col-lg-offset-6 {
|
||
|
margin-left: 50%;
|
||
|
}
|
||
|
.col-lg-offset-7 {
|
||
|
margin-left: 58.33333%;
|
||
|
}
|
||
|
.col-lg-offset-8 {
|
||
|
margin-left: 66.66667%;
|
||
|
}
|
||
|
.col-lg-offset-9 {
|
||
|
margin-left: 75%;
|
||
|
}
|
||
|
.col-lg-offset-10 {
|
||
|
margin-left: 83.33333%;
|
||
|
}
|
||
|
.col-lg-offset-11 {
|
||
|
margin-left: 91.66667%;
|
||
|
}
|
||
|
.col-lg-offset-12 {
|
||
|
margin-left: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.clearfix:before, .clearfix:after {
|
||
|
content: " ";
|
||
|
display: table;
|
||
|
}
|
||
|
|
||
|
.clearfix:after {
|
||
|
clear: both;
|
||
|
}
|
||
|
|
||
|
.pull-right {
|
||
|
float: right !important;
|
||
|
}
|
||
|
|
||
|
.pull-left {
|
||
|
float: left !important;
|
||
|
}
|
||
|
|
||
|
.hide {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
.show {
|
||
|
display: block !important;
|
||
|
}
|
||
|
|
||
|
.invisible {
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
.hidden {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
.affix {
|
||
|
position: fixed;
|
||
|
}
|
||
|
|
||
|
@-ms-viewport {
|
||
|
width: device-width;
|
||
|
}
|
||
|
|
||
|
.visible-xs {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
.visible-sm {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
.visible-md {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
.visible-lg {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
.visible-xs-block,
|
||
|
.visible-xs-inline,
|
||
|
.visible-xs-inline-block,
|
||
|
.visible-sm-block,
|
||
|
.visible-sm-inline,
|
||
|
.visible-sm-inline-block,
|
||
|
.visible-md-block,
|
||
|
.visible-md-inline,
|
||
|
.visible-md-inline-block,
|
||
|
.visible-lg-block,
|
||
|
.visible-lg-inline,
|
||
|
.visible-lg-inline-block {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 767px) {
|
||
|
.visible-xs {
|
||
|
display: block !important;
|
||
|
}
|
||
|
table.visible-xs {
|
||
|
display: table !important;
|
||
|
}
|
||
|
tr.visible-xs {
|
||
|
display: table-row !important;
|
||
|
}
|
||
|
th.visible-xs,
|
||
|
td.visible-xs {
|
||
|
display: table-cell !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 767px) {
|
||
|
.visible-xs-block {
|
||
|
display: block !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 767px) {
|
||
|
.visible-xs-inline {
|
||
|
display: inline !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 767px) {
|
||
|
.visible-xs-inline-block {
|
||
|
display: inline-block !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||
|
.visible-sm {
|
||
|
display: block !important;
|
||
|
}
|
||
|
table.visible-sm {
|
||
|
display: table !important;
|
||
|
}
|
||
|
tr.visible-sm {
|
||
|
display: table-row !important;
|
||
|
}
|
||
|
th.visible-sm,
|
||
|
td.visible-sm {
|
||
|
display: table-cell !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||
|
.visible-sm-block {
|
||
|
display: block !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||
|
.visible-sm-inline {
|
||
|
display: inline !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||
|
.visible-sm-inline-block {
|
||
|
display: inline-block !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 992px) and (max-width: 1199px) {
|
||
|
.visible-md {
|
||
|
display: block !important;
|
||
|
}
|
||
|
table.visible-md {
|
||
|
display: table !important;
|
||
|
}
|
||
|
tr.visible-md {
|
||
|
display: table-row !important;
|
||
|
}
|
||
|
th.visible-md,
|
||
|
td.visible-md {
|
||
|
display: table-cell !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 992px) and (max-width: 1199px) {
|
||
|
.visible-md-block {
|
||
|
display: block !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 992px) and (max-width: 1199px) {
|
||
|
.visible-md-inline {
|
||
|
display: inline !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 992px) and (max-width: 1199px) {
|
||
|
.visible-md-inline-block {
|
||
|
display: inline-block !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 1200px) {
|
||
|
.visible-lg {
|
||
|
display: block !important;
|
||
|
}
|
||
|
table.visible-lg {
|
||
|
display: table !important;
|
||
|
}
|
||
|
tr.visible-lg {
|
||
|
display: table-row !important;
|
||
|
}
|
||
|
th.visible-lg,
|
||
|
td.visible-lg {
|
||
|
display: table-cell !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 1200px) {
|
||
|
.visible-lg-block {
|
||
|
display: block !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 1200px) {
|
||
|
.visible-lg-inline {
|
||
|
display: inline !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 1200px) {
|
||
|
.visible-lg-inline-block {
|
||
|
display: inline-block !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 767px) {
|
||
|
.hidden-xs {
|
||
|
display: none !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||
|
.hidden-sm {
|
||
|
display: none !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 992px) and (max-width: 1199px) {
|
||
|
.hidden-md {
|
||
|
display: none !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 1200px) {
|
||
|
.hidden-lg {
|
||
|
display: none !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.visible-print {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
@media print {
|
||
|
.visible-print {
|
||
|
display: block !important;
|
||
|
}
|
||
|
table.visible-print {
|
||
|
display: table !important;
|
||
|
}
|
||
|
tr.visible-print {
|
||
|
display: table-row !important;
|
||
|
}
|
||
|
th.visible-print,
|
||
|
td.visible-print {
|
||
|
display: table-cell !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.visible-print-block {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
@media print {
|
||
|
.visible-print-block {
|
||
|
display: block !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.visible-print-inline {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
@media print {
|
||
|
.visible-print-inline {
|
||
|
display: inline !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.visible-print-inline-block {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
@media print {
|
||
|
.visible-print-inline-block {
|
||
|
display: inline-block !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media print {
|
||
|
.hidden-print {
|
||
|
display: none !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 1.4 Header */
|
||
|
/* A. Topbar */
|
||
|
.topbar {
|
||
|
background: #f1f1f1;
|
||
|
color: #444;
|
||
|
padding-top:3px;
|
||
|
/*padding: 3px 0;
|
||
|
line-height:6px;*/
|
||
|
}
|
||
|
|
||
|
.topbar .left-topbar p {
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
|
||
|
.topbar .left-topbar p a {
|
||
|
color: #86baa5;
|
||
|
}
|
||
|
|
||
|
.topbar .left-topbar p a:hover {
|
||
|
color: #17eaed;
|
||
|
}
|
||
|
|
||
|
.topbar .right-topbar {
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
.topbar .right-topbar #pgl-language-switch {
|
||
|
font-size: 12px;
|
||
|
margin-bottom: 0px;
|
||
|
-moz-appearance: none;
|
||
|
border: 0px none;
|
||
|
width: auto;
|
||
|
color: #86baa5;
|
||
|
background: transparent none repeat scroll 0% 0%;
|
||
|
background-image: url("../images/assets/home.jpg");
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: right 50%;
|
||
|
cursor: pointer;
|
||
|
-webkit-appearance: none;
|
||
|
appearance: none;
|
||
|
}
|
||
|
|
||
|
.topbar .right-topbar #pgl-names-switch {
|
||
|
font-size: 12px;
|
||
|
margin-bottom: 0px;
|
||
|
-moz-appearance: none;
|
||
|
border: 0px none;
|
||
|
width: auto;
|
||
|
color: #86baa5;
|
||
|
background: transparent none repeat scroll 0% 0%;
|
||
|
background-image: url("../images/assets/home.jpg");
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: right 50%;
|
||
|
cursor: pointer;
|
||
|
-webkit-appearance: none;
|
||
|
appearance: none;
|
||
|
}
|
||
|
|
||
|
.topbar .right-topbar .the-switch {
|
||
|
padding-right: 5px;
|
||
|
}
|
||
|
|
||
|
.topbar .right-topbar ul {
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
.topbar .right-topbar ul li {
|
||
|
float: left;
|
||
|
list-style-type: none;
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
|
||
|
.topbar .right-topbar ul .tabs-sort-1 {
|
||
|
margin-right: 15px;
|
||
|
}
|
||
|
|
||
|
.topbar .right-topbar ul .tabs-sort-1:after {
|
||
|
content: '\f0d7';
|
||
|
font-family: 'FontAwesome';
|
||
|
display: inline-block;
|
||
|
color: #444;
|
||
|
font-size: 10px;
|
||
|
margin-left: 7px;
|
||
|
}
|
||
|
|
||
|
.topbar .right-topbar ul .tabs-sort-2 {
|
||
|
margin-right: 15px;
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 767px) {
|
||
|
.header-topbar .left-topbar p {
|
||
|
text-align: center;
|
||
|
}
|
||
|
.header-topbar .right-topbar {
|
||
|
float: none;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.header-topbar .right-topbar ul {
|
||
|
float: none;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
.topbar .right-topbar {
|
||
|
margin-top: -15px;
|
||
|
}
|
||
|
.topbar .right-topbar ul .tabs-sort-1 {
|
||
|
margin-top: 3px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 575px) {
|
||
|
.topbar .right-topbar {
|
||
|
margin-top: 0px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 480px) {
|
||
|
.topbar .left-topbar p {
|
||
|
text-align: center;
|
||
|
}
|
||
|
.topbar .right-topbar {
|
||
|
width: 100%;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.topbar .right-topbar ul {
|
||
|
float: none;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* B. Header-content */
|
||
|
.header-content {
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
.header-content .logo img {
|
||
|
max-width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
.header-content .search-footer {
|
||
|
margin-top: 21px;
|
||
|
position: relative;
|
||
|
display: inline-block;
|
||
|
float: right;
|
||
|
right: 0px;
|
||
|
/*margin-bottom: 44px;*/
|
||
|
}
|
||
|
|
||
|
.header-content .search-footer .form-control {
|
||
|
padding-left: 15px;
|
||
|
/*width: 270px;*/
|
||
|
width: 100%;
|
||
|
height: 34px;
|
||
|
right: 0px;
|
||
|
margin-top: 0px;
|
||
|
background: #f1f1f1;
|
||
|
border: 0px;
|
||
|
padding-right: 50px;
|
||
|
border-radius: 18px;
|
||
|
}
|
||
|
|
||
|
.header-content .search-footer input:focus, .header-content .search-footer input:active:focus, .header-content .search-footer input.active:focus {
|
||
|
outline: 0;
|
||
|
outline-offset: 0;
|
||
|
}
|
||
|
|
||
|
.header-content .search-footer .search-icon {
|
||
|
cursor: pointer;
|
||
|
border: 0px;
|
||
|
position: absolute;
|
||
|
/* right: 15px;
|
||
|
top: 8px;*/
|
||
|
right: 5px;
|
||
|
top: 5px;
|
||
|
background: #f1f1f1;
|
||
|
}
|
||
|
|
||
|
.header-content .search-footer .search-icon:before {
|
||
|
content: "\f002";
|
||
|
font-family: 'FontAwesome';
|
||
|
font-size: 16px;
|
||
|
color: #C7CFCE;
|
||
|
}
|
||
|
|
||
|
.header-content .search-footer .search-icon:hover:before {
|
||
|
color: #333;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul {
|
||
|
list-style: none;
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > li {
|
||
|
float: left;
|
||
|
/*margin-bottom: 25px;*/
|
||
|
position: relative;
|
||
|
padding: 0px 19px;
|
||
|
}
|
||
|
|
||
|
@media (min-width: 769px) {
|
||
|
.header-content nav ul > li:hover ul {
|
||
|
visibility: visible;
|
||
|
opacity: 1;
|
||
|
transform: translateY(0px);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 769px) {
|
||
|
.header-content nav ul > li:hover .product-menu {
|
||
|
transition: All .3s ease;
|
||
|
-webkit-transition: All .3s ease;
|
||
|
-moz-transition: All .3s ease;
|
||
|
-o-transition: All .3s ease;
|
||
|
visibility: visible;
|
||
|
opacity: 1;
|
||
|
transform: translateY(0px);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > li .nav-information {
|
||
|
width: 100%;
|
||
|
background: #272727;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > li > ul {
|
||
|
-webkit-transition: all 300ms ease-in-out;
|
||
|
-moz-transition: all 300ms ease-in-out;
|
||
|
-ms-transition: all 300ms ease-in-out;
|
||
|
-o-transition: all 300ms ease-in-out;
|
||
|
transition: all 300ms ease-in-out;
|
||
|
visibility: hidden;
|
||
|
opacity: 0;
|
||
|
transform: translateY(10px);
|
||
|
position: absolute;
|
||
|
background: rgba(51, 51, 51, 0.9) none repeat scroll 0% 0%;
|
||
|
z-index: 399;
|
||
|
margin-top: 25px;
|
||
|
margin-left: 0px;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > li > ul > li {
|
||
|
list-style-type: none;
|
||
|
font-size: 13px;
|
||
|
display: block;
|
||
|
min-width: 200px;
|
||
|
padding: 0px;
|
||
|
margin-top: 8px;
|
||
|
border-bottom: 1px solid #666;
|
||
|
margin-left: 0px;
|
||
|
margin-bottom: 0px;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > li > ul > li:before {
|
||
|
content: '\f0da';
|
||
|
font-family: 'FontAwesome';
|
||
|
margin-left: 20px;
|
||
|
display: inline-block;
|
||
|
color: #999;
|
||
|
font-size: 10px;
|
||
|
top: 50%;
|
||
|
float: left;
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > li > ul > li > a {
|
||
|
text-decoration: none;
|
||
|
font-size: 14px;
|
||
|
font-weight: 400;
|
||
|
color: #999;
|
||
|
margin-bottom: 15px;
|
||
|
line-height: 10px;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > li > ul > li > a:hover {
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > li a {
|
||
|
text-decoration: none;
|
||
|
display: block;
|
||
|
line-height: 20px;
|
||
|
color: #333;
|
||
|
font-weight: 700;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > li a.active {
|
||
|
color: #97D8BD;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav {
|
||
|
position: static;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu {
|
||
|
left: 0px;
|
||
|
visibility: hidden;
|
||
|
transform: translateY(10px);
|
||
|
position: absolute;
|
||
|
background: rgba(51, 51, 51, 0.9) none repeat scroll 0% 0%;
|
||
|
z-index: 1199;
|
||
|
margin-top: 25px;
|
||
|
-webkit-transition: all 300ms ease-in-out;
|
||
|
-moz-transition: all 300ms ease-in-out;
|
||
|
-ms-transition: all 300ms ease-in-out;
|
||
|
-o-transition: all 300ms ease-in-out;
|
||
|
transition: all 300ms ease-in-out;
|
||
|
opacity: 0;
|
||
|
margin-left: 0px;
|
||
|
width: 96%;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child {
|
||
|
display: block;
|
||
|
min-width: 800px;
|
||
|
padding: 0px;
|
||
|
margin-top: 30px;
|
||
|
margin-left: 25px;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-inner {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-inner h2 {
|
||
|
color: #fff;
|
||
|
font-size: 14px;
|
||
|
font-weight: 600;
|
||
|
position: relative;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-inner h2:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
left: 110px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
background: #666;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-inner ul {
|
||
|
margin: 20px 0px;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-inner ul li {
|
||
|
width: 100%;
|
||
|
padding: 0px;
|
||
|
list-style-type: none;
|
||
|
margin-left: 0px !important;
|
||
|
margin-bottom: 0px;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-inner ul li a {
|
||
|
text-decoration: none;
|
||
|
color: #999;
|
||
|
margin-bottom: 10px;
|
||
|
font-weight: 500;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-inner ul li a:hover {
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-inner ul li a .fa {
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-nav h2 {
|
||
|
color: #fff;
|
||
|
font-size: 14px;
|
||
|
font-weight: 600;
|
||
|
position: relative;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-nav h2:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
left: 110px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
background: #666;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-nav ul {
|
||
|
margin: 20px 0px;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-nav ul li {
|
||
|
padding: 0px;
|
||
|
list-style-type: none;
|
||
|
margin-bottom: 10px;
|
||
|
margin-left: 0px !important;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-nav ul li a {
|
||
|
text-decoration: none;
|
||
|
color: #999;
|
||
|
font-weight: 500;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-nav ul li a:hover {
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-nav ul li a .fa {
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .custom-block img {
|
||
|
width: 77%;
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .custom-block h3 {
|
||
|
position: absolute;
|
||
|
color: #FFF;
|
||
|
top: 6%;
|
||
|
left: 5%;
|
||
|
font-size: 14px;
|
||
|
letter-spacing: 0.2em;
|
||
|
display: inline-block;
|
||
|
line-height: 60%;
|
||
|
width: 68%;
|
||
|
height: 88%;
|
||
|
background: rgba(51, 51, 51, 0.3) none repeat scroll 0% 0%;
|
||
|
line-height: 7;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart {
|
||
|
padding: 0px;
|
||
|
margin-right: 9px
|
||
|
/*margin-top: 40px;*/
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart:hover .menu-shop {
|
||
|
transition: All .3s ease;
|
||
|
-webkit-transition: All .3s ease;
|
||
|
-moz-transition: All .3s ease;
|
||
|
-o-transition: All .3s ease;
|
||
|
visibility: visible;
|
||
|
opacity: 1;
|
||
|
transform: translateY(0px);
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop {
|
||
|
width: 330px;
|
||
|
height: auto;
|
||
|
display: inline-block;
|
||
|
right: 10px;
|
||
|
-webkit-transition: all 300ms ease-in-out;
|
||
|
-moz-transition: all 300ms ease-in-out;
|
||
|
-ms-transition: all 300ms ease-in-out;
|
||
|
-o-transition: all 300ms ease-in-out;
|
||
|
transition: all 300ms ease-in-out;
|
||
|
visibility: hidden;
|
||
|
opacity: 0;
|
||
|
transform: translateY(10px);
|
||
|
position: absolute;
|
||
|
background: rgba(51, 51, 51, 0.9) none repeat scroll 0% 0%;
|
||
|
z-index: 399;
|
||
|
margin-top: 106px;
|
||
|
margin-left: 0px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li {
|
||
|
width: 100%;
|
||
|
padding: 0px;
|
||
|
margin: 0px;
|
||
|
top: 10px;
|
||
|
border-bottom: 1px solid #666;
|
||
|
position: relative;
|
||
|
list-style-type: none;
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li:before {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .image-shop {
|
||
|
float: left;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .image-shop img {
|
||
|
margin: 20px;
|
||
|
float: left;
|
||
|
max-width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .next-shop .fa {
|
||
|
float: right;
|
||
|
font-size: 16px;
|
||
|
color: #fff;
|
||
|
margin-right: 20px;
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .list-names a {
|
||
|
color: #fff;
|
||
|
margin-top: 20px;
|
||
|
margin-left: 10px;
|
||
|
display: inline-block;
|
||
|
font-size: 17px;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .list-names a:hover {
|
||
|
/* color: #97D8BD;
|
||
|
*/
|
||
|
text-decoration:none;
|
||
|
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .price {
|
||
|
color: #fff;
|
||
|
margin-left: 10px;
|
||
|
margin-top: 10px;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .price .amount {
|
||
|
font-weight: 600;
|
||
|
font-size: 15px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .price .amount-3 {
|
||
|
text-decoration: line-through;
|
||
|
font-weight: 300;
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .list-qty p {
|
||
|
color: #fff;
|
||
|
margin-left: 10px;
|
||
|
font-size: 14px;
|
||
|
font-weight: 400;
|
||
|
display: inline-block;
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li p {
|
||
|
color: #fff;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .sub-total {
|
||
|
float: left;
|
||
|
padding: 20px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .shop-price {
|
||
|
float: right;
|
||
|
padding: 20px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .list-view {
|
||
|
margin-top: 30px;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .list-view .view-cart {
|
||
|
color: #fff;
|
||
|
float: left;
|
||
|
margin-left: 20px;
|
||
|
margin-top: 10px;
|
||
|
width: 130px;
|
||
|
height: 32px;
|
||
|
border: 1px solid #fff;
|
||
|
font-weight: 500;
|
||
|
font-size: 14px;
|
||
|
margin-bottom: 10px;
|
||
|
text-align: center;
|
||
|
line-height: 30px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .list-view .view-cart:hover {
|
||
|
background: #999;
|
||
|
color: #666;
|
||
|
border: 0px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .list-view .list-check {
|
||
|
color: #fff;
|
||
|
float: left;
|
||
|
margin-left: 20px;
|
||
|
margin-top: 10px;
|
||
|
width: 130px;
|
||
|
height: 32px;
|
||
|
text-align: center;
|
||
|
line-height: 30px;
|
||
|
border: 0px;
|
||
|
background: #97D8BD;
|
||
|
font-weight: 500;
|
||
|
font-size: 14px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop li .list-view .list-check:hover {
|
||
|
background: #999;
|
||
|
color: #333;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .menu-shop .shop-input {
|
||
|
border: 0px;
|
||
|
padding-bottom: 20px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .abb {
|
||
|
width: 84px;
|
||
|
/*padding: 0px 15px 10px;*/
|
||
|
/* padding: 0px 6px 0px;*/
|
||
|
padding: 8px 7px 10px 15px;
|
||
|
/*background: #333;*/
|
||
|
background: #383085;
|
||
|
display: inline-block;
|
||
|
float: right;
|
||
|
border-radius: 18px 18px 0px 18px;
|
||
|
color: #fff;
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .abb img {
|
||
|
float: left;
|
||
|
display: inline-block;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .abb:hover {
|
||
|
|
||
|
|
||
|
/* background: #97D8BD;*/
|
||
|
background: #383085;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .abb p {
|
||
|
font-weight: 700px;
|
||
|
color: #fff;
|
||
|
margin-top: 5px;
|
||
|
margin-left:5px;
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .abb p:before {
|
||
|
content: '\f291';
|
||
|
font-family: 'FontAwesome';
|
||
|
display: inline-block;
|
||
|
color: #fff;
|
||
|
font-size: 15px;
|
||
|
/* margin-right: 6px;
|
||
|
*/
|
||
|
}
|
||
|
|
||
|
.header-content .my-cart .abb p .clor-cart {
|
||
|
color: #f1f1f1;
|
||
|
margin-left: 10px;
|
||
|
}
|
||
|
|
||
|
nav,
|
||
|
nav ul,
|
||
|
nav ul li,
|
||
|
nav ul li a,
|
||
|
nav #menu-button {
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
border: 0;
|
||
|
list-style: none;
|
||
|
line-height: 1;
|
||
|
display: block;
|
||
|
-webkit-box-sizing: border-box;
|
||
|
-moz-box-sizing: border-box;
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
|
||
|
nav #menu-button {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
nav ul ul li:last-child > a,
|
||
|
nav ul ul li.last-item > a {
|
||
|
border-bottom: 0;
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 1200px) {
|
||
|
.header-content nav ul > li {
|
||
|
padding: 0px 13px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media all and (max-width: 991px) {
|
||
|
.header-content .logo img {
|
||
|
padding-bottom: 20px;
|
||
|
display: block;
|
||
|
margin: auto;
|
||
|
}
|
||
|
.header-content .search-footer {
|
||
|
display: block;
|
||
|
margin: auto;
|
||
|
padding-bottom: 20px;
|
||
|
width: 360px;
|
||
|
float: none;
|
||
|
}
|
||
|
.header-content .search-footer .form-control {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.header-content .my-cart {
|
||
|
margin-top: 0px;
|
||
|
}
|
||
|
.header-content .my-cart .menu-shop {
|
||
|
margin-top: 65px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media all and (max-width: 768px) {
|
||
|
.header-content nav ul > li > ul > li > a {
|
||
|
margin-left: 30px;
|
||
|
line-height: 0px;
|
||
|
padding: 20px 0px;
|
||
|
}
|
||
|
.header-content nav ul > li > ul > li::before {
|
||
|
margin-top: 14px;
|
||
|
}
|
||
|
nav {
|
||
|
width: 0%;
|
||
|
background: #fff;
|
||
|
margin: auto;
|
||
|
float: left;
|
||
|
}
|
||
|
#main-menu {
|
||
|
display: none !important;
|
||
|
}
|
||
|
#main-menu.open {
|
||
|
display: block !important;
|
||
|
}
|
||
|
.header-content nav ul {
|
||
|
position: absolute;
|
||
|
z-index: 399;
|
||
|
background: rgba(51, 51, 51, 0.9) none repeat scroll 0% 0%;
|
||
|
color: #fff;
|
||
|
margin-top: 78px;
|
||
|
width: 50%;
|
||
|
}
|
||
|
.header-content nav ul li a {
|
||
|
color: #fff;
|
||
|
}
|
||
|
.header-content .search-footer {
|
||
|
margin: 0px;
|
||
|
}
|
||
|
.header-content nav ul > li > ul {
|
||
|
display: none !important;
|
||
|
}
|
||
|
.header-content nav ul > li > ul.open {
|
||
|
display: block !important;
|
||
|
}
|
||
|
.header-content nav ul > li > ul > li {
|
||
|
margin-top: 0px;
|
||
|
padding: 5px 0px;
|
||
|
}
|
||
|
.header-content nav ul > li a {
|
||
|
padding: 13px 0px;
|
||
|
}
|
||
|
.header-content nav ul > li .abb {
|
||
|
margin-top: 10px;
|
||
|
display: inline-block;
|
||
|
float: none;
|
||
|
}
|
||
|
.header-content nav ul > li > ul {
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
position: relative;
|
||
|
width: 100%;
|
||
|
}
|
||
|
.header-content nav ul .my-cart .abb {
|
||
|
margin-top: 10px;
|
||
|
padding: 0px 21px 9px;
|
||
|
}
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .custom-block img {
|
||
|
display: none;
|
||
|
}
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-nav ul {
|
||
|
display: none;
|
||
|
}
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .mega-nav {
|
||
|
display: none;
|
||
|
}
|
||
|
.header-content nav ul > .mega-col-nav > .product-menu .nav-child .custom-block {
|
||
|
display: none;
|
||
|
}
|
||
|
nav ul {
|
||
|
width: 100%;
|
||
|
display: none;
|
||
|
}
|
||
|
.header-content nav ul .my-cart .menu-shop {
|
||
|
margin-top: 0px;
|
||
|
}
|
||
|
.header-content nav ul .my-cart .menu-shop li {
|
||
|
top: 0px;
|
||
|
}
|
||
|
nav.align-center > ul {
|
||
|
text-align: left;
|
||
|
}
|
||
|
nav ul li {
|
||
|
width: 100%;
|
||
|
border-top: 1px solid rgba(120, 120, 120, 0.2);
|
||
|
}
|
||
|
nav > ul > li {
|
||
|
float: none;
|
||
|
}
|
||
|
nav ul ul,
|
||
|
nav ul ul ul,
|
||
|
nav.align-right ul ul {
|
||
|
position: relative;
|
||
|
left: 0;
|
||
|
width: 100%;
|
||
|
margin: 0;
|
||
|
text-align: left;
|
||
|
}
|
||
|
nav > ul > li.has-sub > a:after,
|
||
|
nav > ul > li.has-sub > a:before,
|
||
|
nav ul ul > li.has-sub > a:after,
|
||
|
nav ul ul > li.has-sub > a:before {
|
||
|
display: none;
|
||
|
}
|
||
|
nav #menu-button {
|
||
|
display: block;
|
||
|
color: #fff;
|
||
|
cursor: pointer;
|
||
|
font-size: 12px;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
.wide_layout {
|
||
|
margin-top: 30px;
|
||
|
}
|
||
|
.header-content nav ul {
|
||
|
display: none;
|
||
|
}
|
||
|
nav #menu-button:after {
|
||
|
content: '\f0c9';
|
||
|
font-family: 'FontAwesome';
|
||
|
left: 0px;
|
||
|
display: inline-block;
|
||
|
color: #333;
|
||
|
font-size: 30px;
|
||
|
float: left;
|
||
|
font-weight: 400;
|
||
|
margin-top: 5px;
|
||
|
}
|
||
|
nav #menu-button.menu-opened:after {
|
||
|
content: '\f00d';
|
||
|
font-family: 'FontAwesome';
|
||
|
display: inline-block;
|
||
|
color: #333;
|
||
|
font-size: 30px;
|
||
|
left: 0px;
|
||
|
float: left;
|
||
|
font-weight: 300;
|
||
|
margin-top: 5px;
|
||
|
}
|
||
|
nav .submenu-button {
|
||
|
position: absolute;
|
||
|
z-index: 399;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
display: block;
|
||
|
border-left: 1px solid rgba(120, 120, 120, 0.2);
|
||
|
height: 46px;
|
||
|
width: 46px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
nav .submenu-button.submenu-opened {
|
||
|
background: #262626;
|
||
|
}
|
||
|
nav ul ul .submenu-button {
|
||
|
height: 34px;
|
||
|
width: 34px;
|
||
|
}
|
||
|
nav .submenu-button:after {
|
||
|
position: absolute;
|
||
|
top: 22px;
|
||
|
right: 19px;
|
||
|
width: 8px;
|
||
|
height: 2px;
|
||
|
display: block;
|
||
|
background: #dddddd;
|
||
|
content: '';
|
||
|
}
|
||
|
nav ul ul .submenu-button:after {
|
||
|
top: 15px;
|
||
|
right: 13px;
|
||
|
}
|
||
|
nav .submenu-button.submenu-opened:after {
|
||
|
background: #ffffff;
|
||
|
}
|
||
|
nav .submenu-button:before {
|
||
|
position: absolute;
|
||
|
top: 19px;
|
||
|
right: 22px;
|
||
|
display: block;
|
||
|
width: 2px;
|
||
|
height: 8px;
|
||
|
background: #dddddd;
|
||
|
content: '';
|
||
|
}
|
||
|
nav ul ul .submenu-button:before {
|
||
|
top: 12px;
|
||
|
right: 16px;
|
||
|
}
|
||
|
nav .submenu-button.submenu-opened:before {
|
||
|
display: none;
|
||
|
}
|
||
|
.header-content {
|
||
|
text-align: center;
|
||
|
}
|
||
|
.header-content .logo img {
|
||
|
padding-bottom: 20px;
|
||
|
display: block;
|
||
|
margin: auto;
|
||
|
}
|
||
|
.header-content .search-footer {
|
||
|
display: inline-block;
|
||
|
float: none;
|
||
|
}
|
||
|
.header-content nav ul > li {
|
||
|
padding: 0px;
|
||
|
}
|
||
|
.header-content .my-cart {
|
||
|
margin-top: -35px;
|
||
|
margin-right: 20px;
|
||
|
}
|
||
|
.header-content .my-cart .abb .shop-icon:before {
|
||
|
content: '\f291';
|
||
|
font-family: 'FontAwesome';
|
||
|
display: inline-block;
|
||
|
font-size: 15px;
|
||
|
color: #fff;
|
||
|
}
|
||
|
.header-content .my-cart .abb p {
|
||
|
display: none;
|
||
|
}
|
||
|
.header-content .my-cart .menu-shop {
|
||
|
margin-top: 59px;
|
||
|
}
|
||
|
.header-content .my-cart .abb {
|
||
|
padding: 0px;
|
||
|
background: #333;
|
||
|
padding: 8px 17px;
|
||
|
border-radius: 0px;
|
||
|
margin-top: -10px;
|
||
|
}
|
||
|
.header-content .my-cart .abb:hover {
|
||
|
background: #97D8BD;
|
||
|
}
|
||
|
.wide_layout {
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
.header-content .my-cart .menu-shop li {
|
||
|
text-align: left;
|
||
|
}
|
||
|
.bock-content .the-bolg ul {
|
||
|
margin-left: 35px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 480px) {
|
||
|
nav #menu-button::before {
|
||
|
margin-left: 20px;
|
||
|
top: 5px;
|
||
|
}
|
||
|
nav #menu-button::after {
|
||
|
margin-left: 20px;
|
||
|
top: 10px;
|
||
|
}
|
||
|
.header-content .search-footer {
|
||
|
width: 50%;
|
||
|
}
|
||
|
nav #menu-button.menu-opened::after {
|
||
|
top: 10px;
|
||
|
}
|
||
|
nav #menu-button.menu-opened::before {
|
||
|
top: 10px;
|
||
|
}
|
||
|
.header-content .my-cart .abb {
|
||
|
margin-top: -15px;
|
||
|
}
|
||
|
.header-content nav ul {
|
||
|
margin-top: 73px;
|
||
|
}
|
||
|
.header-content .my-cart .menu-shop {
|
||
|
margin-top: 54px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 360px) {
|
||
|
.header-content .search-footer .search-icon {
|
||
|
right: 10px;
|
||
|
}
|
||
|
.header-content .my-cart {
|
||
|
margin-right: 0px;
|
||
|
}
|
||
|
nav #menu-button::after {
|
||
|
margin-left: 10px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 1.5 Main-content */
|
||
|
.main-content {
|
||
|
padding: 0px;
|
||
|
margin: 0px;
|
||
|
}
|
||
|
|
||
|
.main-content a {
|
||
|
color: #444;
|
||
|
}
|
||
|
|
||
|
.main-content .policy-v1 {
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .policy-v1 .row-gutter-10 {
|
||
|
margin-left: -5px;
|
||
|
margin-right: -5px;
|
||
|
}
|
||
|
|
||
|
.main-content .policy-v1 .row-gutter-10 .col-sm-4 {
|
||
|
padding-left: 5px;
|
||
|
padding-right: 5px;
|
||
|
}
|
||
|
|
||
|
.main-content .policy-v1 .policy-item {
|
||
|
text-align: center;
|
||
|
padding-top: 10px;
|
||
|
padding-bottom: 15px;
|
||
|
background: #E9F2FF none repeat scroll 0% 0%;
|
||
|
}
|
||
|
|
||
|
.main-content .policy-v1 .policy-item h3 {
|
||
|
font-size: 19px;
|
||
|
font-weight: normal;
|
||
|
}
|
||
|
|
||
|
.main-content .policy-v1 .policy-item span {
|
||
|
font-size: 13px;
|
||
|
color: #777;
|
||
|
font-family: "lato",sans-serif;
|
||
|
}
|
||
|
|
||
|
.main-content .policy-v1 .mid {
|
||
|
background: #FFEAEB none repeat scroll 0% 0%;
|
||
|
}
|
||
|
|
||
|
.main-content .product-contact {
|
||
|
margin-top: 30px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-contact #map {
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.main-content .top-contten {
|
||
|
text-align: center;
|
||
|
margin-top: 22px;
|
||
|
margin-bottom: 30px;
|
||
|
}
|
||
|
|
||
|
.main-content .top-contten .title_nav {
|
||
|
display: inline-block;
|
||
|
text-align: center;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .top-contten .title_nav .nav {
|
||
|
text-align: center;
|
||
|
display: inline-block;
|
||
|
margin: 0px;
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.main-content .top-contten .title_nav .nav li {
|
||
|
display: inline-block;
|
||
|
list-style-type: none;
|
||
|
margin-left: 10px;
|
||
|
color: #d7d7d7;
|
||
|
}
|
||
|
|
||
|
.main-content .top-contten .title_nav .nav li a {
|
||
|
text-decoration: none;
|
||
|
color: #cccccc;
|
||
|
font-size: 18px;
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
|
||
|
.main-content .top-contten .title_nav .nav li a.active {
|
||
|
color: #333333;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
|
||
|
.main-content .top-contten .title_nav .nav .tabs-after {
|
||
|
font-size: 25px;
|
||
|
}
|
||
|
|
||
|
.main-content .top-contten .title_nav .title-icon {
|
||
|
margin: 5px 0px 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .top-contten .title_nav .title-icon img {
|
||
|
display: inline-block;
|
||
|
max-width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
.main-content #tabs-1 {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.main-content #tabs-2 {
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.main-content #tabs-3 {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.main-content .content-list {
|
||
|
margin-top: 35px !important;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content {
|
||
|
padding: 0px;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .left-banner {
|
||
|
padding: 0px;
|
||
|
position: relative;
|
||
|
margin-top: 50px;
|
||
|
overflow: hidden;
|
||
|
width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .left-banner:hover img {
|
||
|
-webkit-transform: scale(1.3);
|
||
|
transform: scale(1.3);
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .left-banner img {
|
||
|
max-width: 100%;
|
||
|
-webkit-transition: all 0.7s ease;
|
||
|
transition: all 0.7s ease;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .left-banner h3 {
|
||
|
position: absolute;
|
||
|
top: 16%;
|
||
|
right: 8%;
|
||
|
color: #fff;
|
||
|
font-size: 34px;
|
||
|
z-index: 700;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .left-banner p {
|
||
|
position: absolute;
|
||
|
color: #fff;
|
||
|
font-size: 14px;
|
||
|
right: 8%;
|
||
|
top: 26%;
|
||
|
letter-spacing: 0.4em;
|
||
|
text-transform: uppercase;
|
||
|
z-index: 700;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .left-banner p:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 10px;
|
||
|
height: 1px;
|
||
|
background: #fff;
|
||
|
margin-left: 5px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .left-banner p:before {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 10px;
|
||
|
height: 1px;
|
||
|
background: #fff;
|
||
|
margin-right: 10px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .left-banner a {
|
||
|
text-decoration: none;
|
||
|
top: 38%;
|
||
|
right: 9%;
|
||
|
color: #fff;
|
||
|
padding: 15px 30px;
|
||
|
background: #333;
|
||
|
position: absolute;
|
||
|
font-size: 14px;
|
||
|
letter-spacing: 0.2em;
|
||
|
text-transform: uppercase;
|
||
|
z-index: 700;
|
||
|
border-radius: 25px;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .left-banner a:hover {
|
||
|
background: #97D8BD;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .top-banner {
|
||
|
padding: 0px;
|
||
|
position: relative;
|
||
|
margin-top: 50px;
|
||
|
overflow: hidden;
|
||
|
width: 100%;
|
||
|
height: auto;
|
||
|
margin-bottom: 26px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .top-banner:hover img {
|
||
|
-webkit-transform: scale(1.3);
|
||
|
transform: scale(1.3);
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .top-banner img {
|
||
|
max-width: 100%;
|
||
|
-webkit-transition: all 0.7s ease;
|
||
|
transition: all 0.7s ease;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .top-banner h3 {
|
||
|
position: absolute;
|
||
|
top: 29%;
|
||
|
right: 17%;
|
||
|
color: #fff;
|
||
|
font-size: 34px;
|
||
|
letter-spacing: 0.3em;
|
||
|
text-transform: uppercase;
|
||
|
z-index: 700;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .top-banner p {
|
||
|
position: absolute;
|
||
|
top: 54%;
|
||
|
right: 25%;
|
||
|
color: #fff;
|
||
|
font-size: 14px;
|
||
|
letter-spacing: 0.4em;
|
||
|
text-transform: uppercase;
|
||
|
z-index: 700;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .top-banner p:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 10px;
|
||
|
height: 1px;
|
||
|
background: #fff;
|
||
|
margin-left: 5px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .top-banner p:before {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 10px;
|
||
|
height: 1px;
|
||
|
background: #fff;
|
||
|
margin-right: 10px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .top-banner .watches img {
|
||
|
max-width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .bottom-banner {
|
||
|
padding: 0px;
|
||
|
position: relative;
|
||
|
overflow: hidden;
|
||
|
width: 100%;
|
||
|
height: auto;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .bottom-banner:hover img {
|
||
|
-webkit-transform: scale(1.3);
|
||
|
transform: scale(1.3);
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .bottom-banner img {
|
||
|
max-width: 100%;
|
||
|
-webkit-transition: all 0.7s ease;
|
||
|
transition: all 0.7s ease;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .bottom-banner h3 {
|
||
|
position: absolute;
|
||
|
top: 30%;
|
||
|
right: 21%;
|
||
|
color: #fff;
|
||
|
font-size: 34px;
|
||
|
letter-spacing: 0.3em;
|
||
|
text-transform: uppercase;
|
||
|
z-index: 700;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .bottom-banner p {
|
||
|
position: absolute;
|
||
|
top: 54%;
|
||
|
right: 25%;
|
||
|
color: #fff;
|
||
|
font-size: 14px;
|
||
|
letter-spacing: 0.4em;
|
||
|
text-transform: uppercase;
|
||
|
z-index: 700;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .bottom-banner p:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 10px;
|
||
|
height: 1px;
|
||
|
background: #fff;
|
||
|
margin-left: 5px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
|
||
|
.main-content .banner-content .right-banner .bottom-banner p:before {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 10px;
|
||
|
height: 1px;
|
||
|
background: #fff;
|
||
|
margin-right: 10px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 1199px) {
|
||
|
.main-content .banner-content .right-banner .top-banner {
|
||
|
margin-bottom: 23px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner h3 {
|
||
|
font-size: 28px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner p {
|
||
|
font-size: 11px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner a {
|
||
|
padding: 11px 22px;
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner h3 {
|
||
|
font-size: 28px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner p {
|
||
|
font-size: 11px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner h3 {
|
||
|
font-size: 28px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner p {
|
||
|
font-size: 11px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 991px) {
|
||
|
.main-content .banner-content .left-banner h3 {
|
||
|
top: 16%;
|
||
|
right: 10%;
|
||
|
font-size: 20px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner p {
|
||
|
font-size: 7px;
|
||
|
right: 11%;
|
||
|
top: 27%;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner p::before {
|
||
|
width: 5px;
|
||
|
margin-right: 8px;
|
||
|
margin-bottom: 3px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner p::after {
|
||
|
width: 5px;
|
||
|
margin-left: 5px;
|
||
|
margin-bottom: 3px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner a {
|
||
|
top: 39%;
|
||
|
right: 13%;
|
||
|
padding: 9px 14px;
|
||
|
font-size: 7px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner h3 {
|
||
|
top: 27%;
|
||
|
right: 20%;
|
||
|
font-size: 20px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner p {
|
||
|
top: 54%;
|
||
|
right: 30%;
|
||
|
font-size: 7px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner p::before {
|
||
|
width: 5px;
|
||
|
margin-right: 5px;
|
||
|
margin-bottom: 3px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner p::after {
|
||
|
width: 5px;
|
||
|
margin-left: 3px;
|
||
|
margin-bottom: 3px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner h3 {
|
||
|
top: 30%;
|
||
|
right: 22%;
|
||
|
font-size: 20px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner p {
|
||
|
top: 54%;
|
||
|
right: 27%;
|
||
|
font-size: 7px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner p::before {
|
||
|
width: 5px;
|
||
|
margin-right: 5px;
|
||
|
margin-bottom: 3px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner p::after {
|
||
|
width: 5px;
|
||
|
margin-left: 3px;
|
||
|
margin-bottom: 3px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 767px) {
|
||
|
.main-content .banner-content .left-banner h3 {
|
||
|
top: 16%;
|
||
|
right: 7%;
|
||
|
font-size: 35px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner p {
|
||
|
font-size: 16px;
|
||
|
right: 7%;
|
||
|
top: 26%;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner a {
|
||
|
top: 39%;
|
||
|
right: 9%;
|
||
|
padding: 12px 25px;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner h3 {
|
||
|
top: 37%;
|
||
|
right: 31%;
|
||
|
font-size: 40px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner p {
|
||
|
top: 54%;
|
||
|
right: 40%;
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner h3 {
|
||
|
top: 37%;
|
||
|
right: 36%;
|
||
|
font-size: 40px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner p {
|
||
|
top: 54%;
|
||
|
right: 40%;
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner {
|
||
|
margin-top: 23px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 700px) {
|
||
|
.main-content .banner-content .left-banner h3 {
|
||
|
top: 16%;
|
||
|
right: 8%;
|
||
|
font-size: 30px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner p {
|
||
|
font-size: 12px;
|
||
|
right: 9%;
|
||
|
top: 26%;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner a {
|
||
|
top: 39%;
|
||
|
right: 10%;
|
||
|
padding: 12px 25px;
|
||
|
font-size: 11px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 480px) {
|
||
|
.main-content .banner-content .left-banner h3 {
|
||
|
font-size: 20px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner p {
|
||
|
font-size: 7px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner a {
|
||
|
padding: 8px 18px;
|
||
|
font-size: 7px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner h3 {
|
||
|
font-size: 28px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner p {
|
||
|
font-size: 11px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner h3 {
|
||
|
font-size: 28px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner p {
|
||
|
font-size: 11px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner img {
|
||
|
margin-left: 0px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner img {
|
||
|
margin-left: 0px;
|
||
|
}
|
||
|
.main-content .top-contten .nav::after {
|
||
|
width: 50px;
|
||
|
}
|
||
|
.main-content .top-contten .nav::before {
|
||
|
width: 50px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner img {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.main-content .top-contten .nav::after {
|
||
|
width: 0px;
|
||
|
}
|
||
|
.main-content .top-contten .nav::before {
|
||
|
width: 0px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner img {
|
||
|
margin-top: 0px;
|
||
|
}
|
||
|
.main-content .policy-v1 .policy-item {
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
.main-content .top-contten .title_nav {
|
||
|
margin-top: 0px;
|
||
|
}
|
||
|
.main-content .top-contten .title_nav .nav li {
|
||
|
margin-left: 8px;
|
||
|
}
|
||
|
.main-content .top-contten .title_nav .nav li a {
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
.main-content .top-contten .title_nav .title-icon {
|
||
|
margin: 5px 0px 0px;
|
||
|
}
|
||
|
.main-content .top-contten .title_nav .nav .tabs-after {
|
||
|
font-size: 19px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 360px) {
|
||
|
.main-content .banner-content .left-banner h3 {
|
||
|
top: 15%;
|
||
|
right: 8%;
|
||
|
font-size: 15px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner p {
|
||
|
font-size: 5px;
|
||
|
right: 9%;
|
||
|
top: 27%;
|
||
|
}
|
||
|
.main-content .top-contten .title_nav {
|
||
|
margin-top: 0px;
|
||
|
}
|
||
|
.main-content .top-contten .title_nav .nav li {
|
||
|
margin-left: 6px;
|
||
|
}
|
||
|
.main-content .top-contten .title_nav .nav li a {
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
.main-content .top-contten .title_nav .title-icon {
|
||
|
margin: 5px 0px 0px;
|
||
|
}
|
||
|
.main-content .top-contten .title_nav .nav .tabs-after {
|
||
|
font-size: 19px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner p::before {
|
||
|
margin-right: 6px;
|
||
|
margin-bottom: 1px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner p::after {
|
||
|
margin-left: 5px;
|
||
|
margin-bottom: 1px;
|
||
|
}
|
||
|
.main-content .banner-content .left-banner a {
|
||
|
top: 36%;
|
||
|
right: 10%;
|
||
|
padding: 7px 11px;
|
||
|
font-size: 6px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner h3 {
|
||
|
top: 30%;
|
||
|
right: 19%;
|
||
|
font-size: 30px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .top-banner p {
|
||
|
top: 54%;
|
||
|
right: 29%;
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner h3 {
|
||
|
top: 30%;
|
||
|
right: 22%;
|
||
|
font-size: 30px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner p {
|
||
|
top: 54%;
|
||
|
right: 25%;
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner p::before {
|
||
|
width: 10px;
|
||
|
margin-right: 10px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
.main-content .banner-content .right-banner .bottom-banner p::after {
|
||
|
width: 10px;
|
||
|
margin-left: 5px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.img-eff {
|
||
|
position: relative;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.img-eff img {
|
||
|
width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
.img-eff:before {
|
||
|
background: rgba(0, 0, 0, 0.5);
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
left: -120%;
|
||
|
top: 40%;
|
||
|
z-index: 400;
|
||
|
transition: all 0.35s linear;
|
||
|
-webkit-transition: all 0.35s linear;
|
||
|
-moz-transition: all 0.35s linear;
|
||
|
transform: rotate(-90deg);
|
||
|
-webkit-transform: rotate(-90deg);
|
||
|
transform: scale(0);
|
||
|
transition-property: transform;
|
||
|
transition-duration: 0.3s;
|
||
|
transition-timing-function: ease-out;
|
||
|
}
|
||
|
|
||
|
.img-eff:hover:before {
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
transform: rotate(0deg);
|
||
|
-webkit-transform: rotate(0deg);
|
||
|
transform: scale(2.3);
|
||
|
transition-property: transform;
|
||
|
transition-duration: 1s;
|
||
|
transition-timing-function: ease-out;
|
||
|
}
|
||
|
|
||
|
/* 1.6 Footer */
|
||
|
footer {
|
||
|
background: #333333;
|
||
|
margin-top: 50px;
|
||
|
clear: both;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon {
|
||
|
/* background: #97d8bd;
|
||
|
*/
|
||
|
background: #588CC7;
|
||
|
padding: 20px;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .search-footer {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .search-footer .left {
|
||
|
float: left;
|
||
|
color: #fff;
|
||
|
font-size: 20px;
|
||
|
padding-right: 30px;
|
||
|
line-height: 50px;
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .search-footer .col-input .the-sub {
|
||
|
width: 53%;
|
||
|
height: 40px;
|
||
|
border: 0px;
|
||
|
padding: 0px 20px;
|
||
|
border-bottom-left-radius: 20px;
|
||
|
border-top-left-radius: 20px;
|
||
|
margin-top: 7px;
|
||
|
color: #666;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .search-footer .col-input input:focus, footer .footer-icon .search-footer .col-input input:active:focus, footer .footer-icon .search-footer .col-input input.active:focus {
|
||
|
outline: 0;
|
||
|
outline-offset: 0;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .search-footer .col-input .btn-primary {
|
||
|
width: 110px;
|
||
|
height: 40px;
|
||
|
/* background: #86baa5;*/
|
||
|
background: #393186;
|
||
|
border: 0px;
|
||
|
color: #fff;
|
||
|
position: absolute;
|
||
|
letter-spacing: 0.1em;
|
||
|
font-weight: 700;
|
||
|
font-size: 15px;
|
||
|
font-family: 'lato', sans-serif;
|
||
|
cursor: pointer;
|
||
|
border-radius: 20px;
|
||
|
margin-left: -30px;
|
||
|
margin-top: 7px;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .search-footer .col-input .btn-primary:hover {
|
||
|
background: #333333;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .col-link {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .col-link ul {
|
||
|
margin-top: 4px;
|
||
|
margin-left: 8px;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .col-link ul li {
|
||
|
float: left;
|
||
|
list-style-type: none;
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .col-link ul li .link1 {
|
||
|
text-align: center;
|
||
|
line-height: 40px;
|
||
|
width: 40px;
|
||
|
height: 40px;
|
||
|
background: #fff;
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .col-link ul li .link1:hover {
|
||
|
background: #333333;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .col-link ul li .link1 a {
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .col-link ul li .link1 a .fa {
|
||
|
color: #86baa5;
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
|
||
|
footer .footer-icon .col-link ul li .link1 a .fa:hover {
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom {
|
||
|
padding-top: 54px;
|
||
|
padding-bottom: 38px;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-3-width .about {
|
||
|
color: #fff;
|
||
|
font-size: 16px;
|
||
|
overflow: hidden;
|
||
|
position: relative;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-3-width .about:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
left: 90px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
background: #666;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-3-width ul {
|
||
|
margin-top: 13px;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-3-width ul li {
|
||
|
list-style-type: none;
|
||
|
padding: 10px 0px;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-3-width ul li::after {
|
||
|
clear: both;
|
||
|
content: ".";
|
||
|
display: block;
|
||
|
height: 0;
|
||
|
line-height: 0;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-3-width ul li .add1 {
|
||
|
float: left;
|
||
|
width: 35px;
|
||
|
height: 35px;
|
||
|
background: #97d8bd;
|
||
|
border-radius: 50%;
|
||
|
margin-right: 15px;
|
||
|
margin-top: -5px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-3-width ul li .add1 a {
|
||
|
text-decoration: none;
|
||
|
font-size: 20px;
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-3-width ul li .add1 a i {
|
||
|
line-height: 35px;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-3-width ul li p {
|
||
|
color: #999999;
|
||
|
margin-top: -4px;
|
||
|
line-height: 16px;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-2-width .about {
|
||
|
color: #fff;
|
||
|
font-size: 16px;
|
||
|
overflow: hidden;
|
||
|
position: relative;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-2-width .about:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
left: 125px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
background: #666;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-2-width .about-right:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
left: 73px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
background: #666;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-2-width ul {
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-2-width ul li {
|
||
|
margin-top: 4px;
|
||
|
list-style-type: none;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-2-width ul li a {
|
||
|
color: #999999;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-2-width ul li a:hover {
|
||
|
color: #97d8bd;
|
||
|
}
|
||
|
|
||
|
footer .footer-bootom .col-md-2-width ul li a .fa-caret-right {
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
|
||
|
footer .free-string {
|
||
|
background: #272727;
|
||
|
width: 97%;
|
||
|
padding: 14px 0px;
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
footer .free-string a {
|
||
|
text-decoration: none;
|
||
|
text-align: center;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
footer .free-string a p {
|
||
|
display: inline-block;
|
||
|
text-align: left;
|
||
|
color: #999999;
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
|
||
|
footer .free-string a .strong {
|
||
|
font-size: 16px;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
|
||
|
footer .free-string a i {
|
||
|
font-size: 30px;
|
||
|
color: #8e8e8e;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
|
||
|
footer .col-string {
|
||
|
margin-bottom: 25px;
|
||
|
margin-top: 7px;
|
||
|
}
|
||
|
|
||
|
footer .copyright {
|
||
|
background-color: #272727;
|
||
|
color: #8e8e8e;
|
||
|
display: block;
|
||
|
padding: 7px 0px;
|
||
|
}
|
||
|
|
||
|
footer .copyright p {
|
||
|
float: left;
|
||
|
line-height: 27px;
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
|
||
|
footer .copyright p .bluer a {
|
||
|
color: #97d8bd;
|
||
|
}
|
||
|
|
||
|
footer .copyright ul {
|
||
|
float: right;
|
||
|
margin-top: 3px;
|
||
|
}
|
||
|
|
||
|
footer .copyright ul li {
|
||
|
list-style-type: none;
|
||
|
float: left;
|
||
|
margin-left: 10px;
|
||
|
}
|
||
|
|
||
|
footer .copyright ul li a {
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
footer .copyright ul li img {
|
||
|
max-width: auto;
|
||
|
cursor: pointer;
|
||
|
-moz-box-shadow: 1px 13px 20px #272727;
|
||
|
-webkit-box-shadow: 1px 13px 20px #272727;
|
||
|
box-shadow: 1px 13px 20px #272727;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 1199px) {
|
||
|
footer .footer-icon .search-footer .col-input .the-sub {
|
||
|
width: 40%;
|
||
|
}
|
||
|
footer .footer-icon .col-link {
|
||
|
float: right;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 992px) {
|
||
|
footer .footer-icon .search-footer .col-input .the-sub {
|
||
|
width: 34%;
|
||
|
}
|
||
|
footer .footer-icon .search-footer .col-input {
|
||
|
text-align: left;
|
||
|
}
|
||
|
footer .footer-icon .col-link {
|
||
|
display: inline-block;
|
||
|
text-align: center;
|
||
|
width: 100%;
|
||
|
float: none;
|
||
|
}
|
||
|
footer .footer-icon .col-link ul {
|
||
|
margin-top: 9px;
|
||
|
/* margin-left: 8px; */
|
||
|
text-align: center;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 991px) {
|
||
|
footer .footer-bootom .col-md-2-width .about {
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 768px) {
|
||
|
footer .footer-icon .col-link {
|
||
|
width: 100%;
|
||
|
display: inline-block;
|
||
|
text-align: center;
|
||
|
}
|
||
|
footer .footer-icon .search-footer .col-input .the-sub {
|
||
|
width: 30%;
|
||
|
}
|
||
|
footer .footer-icon .col-link ul {
|
||
|
display: inline-block;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
footer .footer-icon .col-link ul li {
|
||
|
text-align: center;
|
||
|
}
|
||
|
footer .footer-bootom .col-md-2-width {
|
||
|
margin-bottom: 30px;
|
||
|
}
|
||
|
footer .footer-bootom {
|
||
|
padding-top: 40px;
|
||
|
padding-bottom: 30px;
|
||
|
}
|
||
|
footer .free-string {
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 480px) {
|
||
|
footer .footer-icon .search-footer .left {
|
||
|
float: none;
|
||
|
text-align: center;
|
||
|
display: block;
|
||
|
padding: 0px;
|
||
|
}
|
||
|
footer .footer-icon .search-footer .col-input {
|
||
|
text-align: left;
|
||
|
}
|
||
|
footer .footer-icon .search-footer .col-input .the-sub {
|
||
|
width: 80%;
|
||
|
}
|
||
|
footer .copyright p {
|
||
|
float: none;
|
||
|
}
|
||
|
footer .copyright ul {
|
||
|
float: none;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
footer .copyright {
|
||
|
text-align: center;
|
||
|
}
|
||
|
footer .footer-bootom .col-md-2-width ul {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
footer .free-string {
|
||
|
margin-right: 0px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 360px) {
|
||
|
footer .footer-icon .search-footer .col-input .the-sub {
|
||
|
width: 75%;
|
||
|
}
|
||
|
footer .footer-icon .search-footer .left {
|
||
|
font-size: 18px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 2. element */
|
||
|
/* 2.1 Slideshow */
|
||
|
.owl-carousel {
|
||
|
margin-left: -15px;
|
||
|
margin-right: -15px;
|
||
|
}
|
||
|
|
||
|
#owl-demo2 .item {
|
||
|
padding-top: 30px;
|
||
|
display: inline-block;
|
||
|
color: #FFF;
|
||
|
-webkit-border-radius: 3px;
|
||
|
-moz-border-radius: 3px;
|
||
|
border-radius: 3px;
|
||
|
text-align: center;
|
||
|
margin-top: 5px;
|
||
|
}
|
||
|
|
||
|
#owl-demo2 .item img {
|
||
|
max-width: 100%;
|
||
|
}
|
||
|
|
||
|
#owl-demo-banner-icon {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
#gallery_01 .item {
|
||
|
padding-top: 30px;
|
||
|
display: inline-block;
|
||
|
color: #FFF;
|
||
|
-webkit-border-radius: 3px;
|
||
|
-moz-border-radius: 3px;
|
||
|
border-radius: 3px;
|
||
|
text-align: center;
|
||
|
margin-top: 5px;
|
||
|
}
|
||
|
|
||
|
#gallery_01 .item img {
|
||
|
max-width: 100%;
|
||
|
}
|
||
|
|
||
|
#owl-demo-post .item {
|
||
|
display: inline-block;
|
||
|
color: #FFF;
|
||
|
-webkit-border-radius: 3px;
|
||
|
-moz-border-radius: 3px;
|
||
|
border-radius: 3px;
|
||
|
text-align: center;
|
||
|
margin-top: 5px;
|
||
|
}
|
||
|
|
||
|
#owl-demo-post .item img {
|
||
|
max-width: 100%;
|
||
|
}
|
||
|
|
||
|
#owl-demo3 .item {
|
||
|
padding-top: 30px;
|
||
|
display: inline-block;
|
||
|
color: #FFF;
|
||
|
-webkit-border-radius: 3px;
|
||
|
-moz-border-radius: 3px;
|
||
|
border-radius: 3px;
|
||
|
text-align: center;
|
||
|
margin-top: 5px;
|
||
|
}
|
||
|
|
||
|
#owl-demo3 .item img {
|
||
|
max-width: 100%;
|
||
|
}
|
||
|
|
||
|
#owl-demo4 .item {
|
||
|
color: #FFF;
|
||
|
-webkit-border-radius: 3px;
|
||
|
-moz-border-radius: 3px;
|
||
|
border-radius: 3px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
#owl-demo-top .item {
|
||
|
padding-top: 30px;
|
||
|
color: #FFF;
|
||
|
-webkit-border-radius: 3px;
|
||
|
-moz-border-radius: 3px;
|
||
|
border-radius: 3px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
#owl-demo-main .item {
|
||
|
padding-top: 31px;
|
||
|
color: #FFF;
|
||
|
-webkit-border-radius: 3px;
|
||
|
-moz-border-radius: 3px;
|
||
|
border-radius: 3px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
#toTop {
|
||
|
position: fixed;
|
||
|
bottom: 10px;
|
||
|
right: 29px;
|
||
|
cursor: pointer;
|
||
|
display: none;
|
||
|
background: #86BAA5;
|
||
|
width: 35px;
|
||
|
height: 50px;
|
||
|
text-align: center;
|
||
|
font-size: 17px;
|
||
|
line-height: 50px;
|
||
|
color: #f1f1f1;
|
||
|
border-radius: 5px;
|
||
|
z-index: 300;
|
||
|
}
|
||
|
|
||
|
#toTop:hover {
|
||
|
background: #444;
|
||
|
}
|
||
|
|
||
|
/* 2.2 Deal */
|
||
|
.custom-block .top-custom .left-block-content {
|
||
|
margin-top: 53px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .left-block-content .h3-title {
|
||
|
font-size: 18px;
|
||
|
word-spacing: 1px;
|
||
|
color: #373737;
|
||
|
font-weight: normal;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .left-block-content .title-icon {
|
||
|
display: inline-block;
|
||
|
margin: 5px 0px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .left-block-content .title-icon img {
|
||
|
display: block;
|
||
|
max-width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content {
|
||
|
padding: 0px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .image {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times {
|
||
|
position: absolute !important;
|
||
|
top: 20px;
|
||
|
text-align: center;
|
||
|
z-index: 1111;
|
||
|
left: 50%;
|
||
|
transform: translateX(-50%);
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .day {
|
||
|
border: 3px solid #f1f1f1;
|
||
|
padding: 8px 6px;
|
||
|
background: #fff;
|
||
|
font-size: 7px;
|
||
|
color: #333;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .day span {
|
||
|
width: 100%;
|
||
|
display: block;
|
||
|
font-size: 10px;
|
||
|
font-weight: 600;
|
||
|
color: #333;
|
||
|
padding-bottom: 3px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times p {
|
||
|
display: inline-block;
|
||
|
padding: 0px 6px;
|
||
|
margin-top: 0px;
|
||
|
color: #333;
|
||
|
background: none !important;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .hours {
|
||
|
border: 3px solid #f1f1f1;
|
||
|
padding: 8px 8px;
|
||
|
background: #fff;
|
||
|
font-size: 7px;
|
||
|
color: #333;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .hours span {
|
||
|
width: 100%;
|
||
|
display: block;
|
||
|
font-size: 10px;
|
||
|
font-weight: 600;
|
||
|
color: #333;
|
||
|
padding-bottom: 3px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .minutes {
|
||
|
border: 3px solid #f1f1f1;
|
||
|
padding: 8px 6px;
|
||
|
background: #fff;
|
||
|
font-size: 7px;
|
||
|
color: #333;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .minutes span {
|
||
|
width: 100%;
|
||
|
display: block;
|
||
|
font-size: 10px;
|
||
|
font-weight: 600;
|
||
|
color: #333;
|
||
|
padding-bottom: 3px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .seconds {
|
||
|
border: 3px solid #f1f1f1;
|
||
|
padding: 8px 6px;
|
||
|
background: #fff;
|
||
|
font-size: 7px;
|
||
|
color: #333;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .seconds span {
|
||
|
width: 100%;
|
||
|
display: block;
|
||
|
font-size: 10px;
|
||
|
font-weight: 600;
|
||
|
color: #333;
|
||
|
padding-bottom: 3px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .names {
|
||
|
padding-top: 18px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .names a {
|
||
|
color: #686868;
|
||
|
text-decoration: none;
|
||
|
font-size: 13px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .names a:hover {
|
||
|
color: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .icon-judge:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100px;
|
||
|
height: 2px;
|
||
|
border-bottom: 1px solid #d7d7d7;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .icon-judge ul {
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .icon-judge ul li {
|
||
|
list-style-type: none;
|
||
|
margin-right: 1px;
|
||
|
float: none;
|
||
|
color: #F9CE4A;
|
||
|
text-align: center;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .cart-text {
|
||
|
text-align: center;
|
||
|
display: inherit;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .cart-text:hover .whishlist {
|
||
|
width: 35px;
|
||
|
height: 28px;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .cart-text:hover .whishlist a {
|
||
|
text-decoration: none;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .cart-text:hover .whishlist a i {
|
||
|
color: #dddddd;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .cart-text:hover .whishlist a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .cart-text:hover .whishlist:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 1px;
|
||
|
height: 15px;
|
||
|
border-right: 1px solid #d7d7d7;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .cart-text:hover .refresh {
|
||
|
transition: all 0.30s ease 0s;
|
||
|
width: 30px;
|
||
|
height: 28px;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .cart-text:hover .refresh a {
|
||
|
text-decoration: none;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .cart-text:hover .refresh a i {
|
||
|
color: #ddd;
|
||
|
padding: 8px;
|
||
|
background: #fff;
|
||
|
margin-left: 2px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .cart-text:hover .refresh a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner p {
|
||
|
margin-top: 10px;
|
||
|
display: inline-block;
|
||
|
font-size: 13px;
|
||
|
color: #444;
|
||
|
/* background: #f1f1f1;
|
||
|
*/
|
||
|
padding: 8px 13px;
|
||
|
font-family: 'Open Sans', sans-serif;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner p:hover {
|
||
|
/*background: #97d8bd;
|
||
|
*/
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .whishlist {
|
||
|
width: 0px;
|
||
|
height: 0px;
|
||
|
opacity: 0;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .whishlist a {
|
||
|
text-decoration: none;
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .whishlist a i {
|
||
|
color: #dddddd;
|
||
|
padding: 8px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .whishlist a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .whishlist:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 1px;
|
||
|
height: 15px;
|
||
|
border-right: 1px solid #d7d7d7;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .refresh {
|
||
|
width: 0px;
|
||
|
height: 0px;
|
||
|
opacity: 0;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .refresh a {
|
||
|
text-decoration: none;
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .refresh a i {
|
||
|
color: #ddd;
|
||
|
padding: 8px;
|
||
|
background: #fff;
|
||
|
margin-left: 2px;
|
||
|
}
|
||
|
|
||
|
.custom-block .top-custom .section-content .left-banner .refresh a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .image {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .image .price {
|
||
|
position: absolute;
|
||
|
display: block;
|
||
|
bottom: 0px;
|
||
|
right: 0px;
|
||
|
width: 80px;
|
||
|
height: 30px;
|
||
|
background: #5b5b5b;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .image .price .amount {
|
||
|
font-weight: 700;
|
||
|
color: #fff;
|
||
|
line-height: 30px;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .image .price .amount-3 {
|
||
|
text-decoration: line-through;
|
||
|
color: #a5a5a5;
|
||
|
line-height: 30px;
|
||
|
font-size: 10px;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .the-names {
|
||
|
font-weight: 700;
|
||
|
font-size: 15px;
|
||
|
padding: 15px 0px;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .the-names a {
|
||
|
color: #737373;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .the-names a:hover {
|
||
|
color: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .icon-content {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .icon-content:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 130px;
|
||
|
height: 2px;
|
||
|
border-bottom: 1px solid #d7d7d7;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .icon-content ul {
|
||
|
margin-left: 20px;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .icon-content ul li {
|
||
|
list-style-type: none;
|
||
|
margin-left: 5px;
|
||
|
float: left;
|
||
|
color: #f9ce4a;
|
||
|
text-align: center;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .the-cart h3 {
|
||
|
margin-top: 10px;
|
||
|
margin-left: 70px;
|
||
|
text-align: center;
|
||
|
line-height: 30px;
|
||
|
font-size: 14px;
|
||
|
color: #737373;
|
||
|
width: 120px;
|
||
|
height: 30px;
|
||
|
background: #F1F1F1 none repeat scroll 0% 0%;
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.custom-block .section-banner .left-banner .the-cart h3:hover {
|
||
|
background: #97d8bd;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 991px) {
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .day {
|
||
|
padding: 8px 3px;
|
||
|
}
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .hours {
|
||
|
padding: 8px 5px;
|
||
|
}
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .minutes {
|
||
|
padding: 8px 3px;
|
||
|
}
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .seconds {
|
||
|
padding: 8px 3px;
|
||
|
}
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times p {
|
||
|
padding: 0px 3px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 767px) {
|
||
|
#owl-demo2 .item {
|
||
|
width: 100%;
|
||
|
}
|
||
|
#owl-demo3 .item {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.custom-block .top-custom .section-content .left-banner .icon-judge::after {
|
||
|
margin: 0px;
|
||
|
}
|
||
|
.custom-block .top-custom .section-content .left-banner .cart-text h3 {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
.custom-block .top-custom .left-block-content h3::before {
|
||
|
width: 80px;
|
||
|
}
|
||
|
.custom-block .top-custom .left-block-content h3::after {
|
||
|
width: 80px;
|
||
|
}
|
||
|
#owl-demo4 .item {
|
||
|
width: 100%;
|
||
|
}
|
||
|
#owl-demo4 .item img {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.bock-content .col-sm-bock .the-item .images .the-aug {
|
||
|
margin-right: 0px !important;
|
||
|
}
|
||
|
.main-content .policy-v1 .policy-item {
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .day {
|
||
|
padding: 10px 8px;
|
||
|
}
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .hours {
|
||
|
padding: 10px 9px;
|
||
|
}
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .minutes {
|
||
|
padding: 10px 8px;
|
||
|
}
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times .seconds {
|
||
|
padding: 10px 8px;
|
||
|
}
|
||
|
.custom-block .top-custom .section-content .left-banner .image .data-times p {
|
||
|
padding: 2px 8px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 480px) {
|
||
|
#owl-demo2 .item {
|
||
|
width: 100%;
|
||
|
}
|
||
|
#owl-demo3 .item {
|
||
|
width: 100%;
|
||
|
}
|
||
|
#demo4 .item img {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.bock-content .the-bolg ul {
|
||
|
margin-left: 15px !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 360px) {
|
||
|
.custom-block .top-custom .left-block-content p::after {
|
||
|
width: 50px;
|
||
|
}
|
||
|
.custom-block .top-custom .left-block-content p::before {
|
||
|
width: 50px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 2.3. Tabs */
|
||
|
.latest-blog {
|
||
|
margin-top: 30px;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-title {
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-title .h3-title {
|
||
|
font-size: 18px;
|
||
|
word-spacing: 1px;
|
||
|
color: #373737;
|
||
|
font-weight: normal;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-title .title-icon {
|
||
|
display: inline-block;
|
||
|
margin: 5px 0px 30px;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-title .title-icon img {
|
||
|
display: block;
|
||
|
max-width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-images {
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-images img {
|
||
|
transition: all 0.5s ease 0s;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-images img:hover {
|
||
|
transform: scale(1.05);
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-content {
|
||
|
padding: 0px 15px;
|
||
|
margin: -80px 10px 0px;
|
||
|
position: relative;
|
||
|
background: #FFF none repeat scroll 0% 0%;
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-content .extra {
|
||
|
left: 10px;
|
||
|
background-color: #FFF;
|
||
|
padding: 15px 0px 20px;
|
||
|
width: calc(100% - 20px);
|
||
|
height: 80px;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-content .extra .name {
|
||
|
font-size: 16px;
|
||
|
text-transform: uppercase;
|
||
|
color: #212121;
|
||
|
padding: 5px 0px;
|
||
|
font-weight: normal;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-content .extra .name .a {
|
||
|
text-decoration: none;
|
||
|
color: #212121;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-content .extra .date {
|
||
|
display: inline-block;
|
||
|
color: #B5B5B5;
|
||
|
font: 400 12px "lato",sans-serif;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-content .extra .date:before {
|
||
|
display: inline-block;
|
||
|
font-family: 'FontAwesome';
|
||
|
font-style: normal;
|
||
|
font-weight: normal;
|
||
|
content: "\f073";
|
||
|
margin-right: 5px;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-content .extra .like {
|
||
|
display: inline-block;
|
||
|
padding-left: 30px;
|
||
|
color: #B5B5B5;
|
||
|
font: 400 12px "lato",sans-serif;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-content .extra .like:before {
|
||
|
display: inline-block;
|
||
|
font-family: 'FontAwesome';
|
||
|
font-style: normal;
|
||
|
font-weight: normal;
|
||
|
content: "\f0e6";
|
||
|
margin-right: 5px;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-content .des {
|
||
|
color: rgba(33, 33, 33, 0.6);
|
||
|
font-size: 14px;
|
||
|
line-height: 24px;
|
||
|
font-family: "lato",sans-serif;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-content .des .read-more {
|
||
|
display: block;
|
||
|
margin-top: 20px;
|
||
|
color: rgba(33, 33, 33, 0.8);
|
||
|
font-size: 13px;
|
||
|
font-family: "Lato",sans-serif;
|
||
|
text-transform: uppercase;
|
||
|
text-decoration: underline;
|
||
|
}
|
||
|
|
||
|
.latest-blog .box-content .blog-content .des .read-more:hover {
|
||
|
color: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.banner-logo {
|
||
|
margin-top: 45px;
|
||
|
}
|
||
|
|
||
|
.banner-logo h3 {
|
||
|
color: #333;
|
||
|
text-align: center;
|
||
|
font-size: 18px;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
.banner-logo h3:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
background: #D2CFCF;
|
||
|
width: 120px;
|
||
|
height: 1px;
|
||
|
margin-left: 20px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
|
||
|
.banner-logo h3:before {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
background: #D2CFCF;
|
||
|
width: 120px;
|
||
|
height: 1px;
|
||
|
margin-right: 20px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
|
||
|
.main-slider .banner-slider .images {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.main-slider .banner-slider .images h3 {
|
||
|
position: absolute;
|
||
|
color: #fff;
|
||
|
top: 0px;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 1199px) {
|
||
|
.lock-bock .the-bolg ul li {
|
||
|
padding-right: 15px;
|
||
|
}
|
||
|
.lock-bock .the-bolg ul li a img {
|
||
|
max-width: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 992px) {
|
||
|
.lock-bock .col-sm-bock .the-item .images img {
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 768px) {
|
||
|
.lock-bock .col-sm-bock .the-item .images .the-aug {
|
||
|
margin: 0px;
|
||
|
}
|
||
|
.lock-bock .the-bolg ul {
|
||
|
margin: auto;
|
||
|
padding-top: 30px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 480px) {
|
||
|
.banner-logo img {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.latest-blog .box-content .blog-images img {
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 360px) {
|
||
|
.banner-logo h3::after {
|
||
|
width: 50px;
|
||
|
}
|
||
|
.banner-logo h3::before {
|
||
|
width: 50px;
|
||
|
}
|
||
|
.lock-bock .left-block-content h3::before {
|
||
|
width: 60px;
|
||
|
}
|
||
|
.lock-bock .left-block-content h3::after {
|
||
|
width: 60px;
|
||
|
}
|
||
|
.bock-content .left-block-content h3::after {
|
||
|
width: 60px;
|
||
|
}
|
||
|
.bock-content .left-block-content h3::before {
|
||
|
width: 60px;
|
||
|
}
|
||
|
.bock-content .the-bolg ul {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.bock-content .the-bolg ul li {
|
||
|
width: 90%;
|
||
|
margin-left: 0px;
|
||
|
}
|
||
|
.bock-content .the-bolg ul li img {
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 2.4. Main-content-list */
|
||
|
.banner-content .banner-home img {
|
||
|
margin-top: 30px !important;
|
||
|
}
|
||
|
|
||
|
.main-content-list {
|
||
|
padding-top: 45px;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .col-after {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .col-after h3 {
|
||
|
color: #333;
|
||
|
font-size: 18px;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .col-after h3:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 2px;
|
||
|
border-bottom: 1px solid #d7d7d7;
|
||
|
left: 0px;
|
||
|
z-index: -1;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .col-after h3 .the-after {
|
||
|
padding-right: 20px;
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .comtent-sp .image img {
|
||
|
width: 100%;
|
||
|
height: auto;
|
||
|
margin-top: 24px;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .comtent-sp .product .name {
|
||
|
font-size: 13px;
|
||
|
color: #444;
|
||
|
margin-top: 30px;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .comtent-sp .product ul {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .comtent-sp .product ul:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
background: #f1f1f1;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .comtent-sp .product ul li {
|
||
|
float: left;
|
||
|
list-style-type: none;
|
||
|
font-size: 13px;
|
||
|
color: #f9ce4a;
|
||
|
padding-right: 2px;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .comtent-sp .supmit {
|
||
|
display: inline-block;
|
||
|
margin-top: 15px;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .comtent-sp .supmit a {
|
||
|
padding: 9px 15px;
|
||
|
background: #f1f1f1;
|
||
|
color: #333;
|
||
|
font-size: 12px;
|
||
|
font-family: 'Open Sans', sans-serif;
|
||
|
font-weight: 600;
|
||
|
border-radius: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content-list .main-content-left .comtent-sp .supmit a:hover {
|
||
|
background: #97d8bd;
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
.main-bottom {
|
||
|
padding-top: 54px;
|
||
|
}
|
||
|
|
||
|
.main-bottom .main-top-content h3 {
|
||
|
color: #333;
|
||
|
text-align: center;
|
||
|
font-size: 18px;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
.main-bottom .main-top-content h3:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
background: #D2CFCF;
|
||
|
width: 120px;
|
||
|
height: 1px;
|
||
|
margin-left: 20px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
|
||
|
.main-bottom .main-top-content h3:before {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
background: #D2CFCF;
|
||
|
width: 120px;
|
||
|
height: 1px;
|
||
|
margin-right: 20px;
|
||
|
margin-bottom: 5px;
|
||
|
}
|
||
|
|
||
|
.main-bottom .demo-main .the-item .images {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.main-bottom .demo-main .the-item .images .the-aug {
|
||
|
position: absolute;
|
||
|
color: #fff;
|
||
|
display: block;
|
||
|
bottom: 0px;
|
||
|
right: 0px;
|
||
|
width: 60px;
|
||
|
height: 30px;
|
||
|
background: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.main-bottom .demo-main .the-item .images .the-aug .aug {
|
||
|
font-weight: 600;
|
||
|
line-height: 30px;
|
||
|
}
|
||
|
|
||
|
.main-bottom .demo-main .the-item h3 {
|
||
|
color: #444444;
|
||
|
text-transform: uppercase;
|
||
|
font-size: 13px;
|
||
|
font-weight: 700;
|
||
|
text-align: left;
|
||
|
margin: 10px 0px;
|
||
|
}
|
||
|
|
||
|
.main-bottom .demo-main .the-item h3:hover {
|
||
|
color: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.main-bottom .demo-main .the-item p {
|
||
|
float: left;
|
||
|
color: #444444;
|
||
|
text-align: left;
|
||
|
font-size: 13px;
|
||
|
line-height: 1.5;
|
||
|
}
|
||
|
|
||
|
.main-bottom .demo-main .the-item p .next {
|
||
|
color: #97d8bd;
|
||
|
font-size: 12px;
|
||
|
font-style: italic;
|
||
|
}
|
||
|
|
||
|
.main-bottom .demo-main .the-item p .next:hover {
|
||
|
color: #f1f1f1;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 1199px) {
|
||
|
.main-content-list .main-content-left .comtent-sp .supmit a {
|
||
|
padding: 8px 11px;
|
||
|
font-size: 10px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 991px) {
|
||
|
.main-content-list .main-content-left .col-after h3 {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
#owl-demo-main .item img {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.main-content-list .main-content-left .comtent-sp .supmit a {
|
||
|
padding: 9px 15px;
|
||
|
font-size: 13px;
|
||
|
}
|
||
|
.main-content-list .main-content-left .comtent-sp .supmit {
|
||
|
margin-top: 30px;
|
||
|
}
|
||
|
.main-content-list .main-content-left .comtent-sp .product .name {
|
||
|
font-size: 15px;
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
.main-content-list .main-content-left .comtent-sp .product ul {
|
||
|
display: block;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 768px) {
|
||
|
.main-content-list .main-content-left .comtent-sp .product .name {
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
.main-content-list .main-content-left .comtent-sp .supmit a {
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 480px) {
|
||
|
.main-content-list .main-content-left .comtent-sp .product {
|
||
|
text-align: center;
|
||
|
}
|
||
|
.main-content-list .main-content-left .comtent-sp .product ul {
|
||
|
margin: 0px 25px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 360px) {
|
||
|
.main-bottom .main-top-content h3::after {
|
||
|
width: 50px;
|
||
|
}
|
||
|
.main-bottom .main-top-content h3::before {
|
||
|
width: 50px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 2.5. Content-grid */
|
||
|
.content-grid .banner-slider {
|
||
|
position: relative;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.content-grid .banner-slider .images-banner img {
|
||
|
max-width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main {
|
||
|
float: none;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-title h3 {
|
||
|
color: #333;
|
||
|
font-size: 18px;
|
||
|
position: relative;
|
||
|
font-weight: 400;
|
||
|
margin-top: 55px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-title h3:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 2px;
|
||
|
border-bottom: 2px solid #d7d7d7;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
z-index: -1;
|
||
|
left: 0px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-title h3 .the-after {
|
||
|
padding-right: 10px;
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content h3 {
|
||
|
color: #a2c9b9;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content ul li {
|
||
|
list-style-type: none;
|
||
|
margin-top: 13px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content ul li a {
|
||
|
color: #333;
|
||
|
text-decoration: none;
|
||
|
font-weight: 600;
|
||
|
font-size: 14px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content ul li a:hover {
|
||
|
color: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content ul li .fa {
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .list-banner .list-text-name {
|
||
|
list-style-type: none;
|
||
|
margin-top: 13px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .list-banner .list-text-name .filter-options-title {
|
||
|
display: none;
|
||
|
margin-left: 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .list-banner .list-text-name .filter-options-title li {
|
||
|
list-style-type: none;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .list-banner .list-text-name .filter-options-title li a {
|
||
|
color: #333;
|
||
|
text-decoration: none;
|
||
|
font-weight: 400;
|
||
|
font-size: 13px;
|
||
|
content: none;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .list-banner .list-text-name .filter-options-title li a:hover {
|
||
|
color: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .list-banner .list-text-name.active ul li a:after {
|
||
|
content: '';
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .list-banner .list-text-name.active .filter-options-title {
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .list-banner .list-text-name.active a:after {
|
||
|
content: '\f056';
|
||
|
font-family: 'FontAwesome';
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .list-banner .list-text-name a {
|
||
|
color: #333;
|
||
|
text-decoration: none;
|
||
|
font-weight: 600;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .list-banner .list-text-name a:hover {
|
||
|
color: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .list-banner .list-text-name a:after {
|
||
|
display: inline-block;
|
||
|
content: '\f055';
|
||
|
font-family: 'FontAwesome';
|
||
|
color: #999;
|
||
|
top: 50%;
|
||
|
font-size: 15px;
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .left-menu form {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .left-menu form .form-group {
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .left-menu form .form-group .form-control {
|
||
|
width: 65px;
|
||
|
height: 35px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .left-menu form .form-group span {
|
||
|
font-weight: 700;
|
||
|
margin-left: 15px;
|
||
|
margin-right: 15px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .left-menu form .btn-default {
|
||
|
width: 65px;
|
||
|
height: 35px;
|
||
|
background: #333;
|
||
|
color: #fff;
|
||
|
font-weight: 400;
|
||
|
font-size: 13px;
|
||
|
border: 0px;
|
||
|
margin-left: 30px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .left-menu form .btn-default:hover {
|
||
|
background: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .widget .f-price {
|
||
|
margin: 20px 0px 0px;
|
||
|
padding-bottom: 10px;
|
||
|
display: table;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .widget .f-price .ui-widget-content {
|
||
|
height: 10px;
|
||
|
background: #f1f1f1;
|
||
|
position: relative;
|
||
|
margin-top: 85px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .widget .f-price .ui-widget-content .ui-slider-range {
|
||
|
height: 10px;
|
||
|
background: #e1e1e1;
|
||
|
position: absolute;
|
||
|
margin-left: 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .widget .f-price .ui-state-default {
|
||
|
width: 20px;
|
||
|
height: 20px;
|
||
|
position: absolute;
|
||
|
top: -14px;
|
||
|
transition: none 0s ease 0s;
|
||
|
border-radius: 50%;
|
||
|
background: #fff;
|
||
|
border: 5px solid #333;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .widget .f-price span {
|
||
|
float: left;
|
||
|
display: block;
|
||
|
color: #222;
|
||
|
font: 400 14px;
|
||
|
margin-top: 8px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .widget .f-price .left-price {
|
||
|
width: 71px;
|
||
|
height: 36px;
|
||
|
border: 1px solid #f1f1f1;
|
||
|
margin-right: 15px;
|
||
|
text-align: center;
|
||
|
line-height: 36px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .widget .f-price .right-price {
|
||
|
width: 71px;
|
||
|
height: 36px;
|
||
|
border: 1px solid #f1f1f1;
|
||
|
margin-left: 15px;
|
||
|
text-align: center;
|
||
|
line-height: 36px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .widget .f-price .firts {
|
||
|
margin-top: 10px;
|
||
|
font-size: 17px;
|
||
|
font-weight: 500;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .widget .f-price .btn {
|
||
|
float: right;
|
||
|
background: #333;
|
||
|
font: 400 13px;
|
||
|
color: #FFF;
|
||
|
text-transform: uppercase;
|
||
|
padding: 2px 15px;
|
||
|
line-height: 30px;
|
||
|
transition: all 0.3s ease-in-out 0s;
|
||
|
border: 0px;
|
||
|
margin-top: 16px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .block-content .widget .f-price .btn:hover {
|
||
|
background: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .text-group .list-input {
|
||
|
margin-top: 14px;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .text-group .list-input .btn-default {
|
||
|
padding: 8px 15px;
|
||
|
background: #f1f1f1;
|
||
|
margin-right: 10px;
|
||
|
border: 0px;
|
||
|
margin-top: 10px;
|
||
|
color: #333;
|
||
|
font-weight: 400;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .text-group .list-input .btn-default:hover {
|
||
|
background: #333;
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
.main-content .sidebar-main .blocl-list-image p {
|
||
|
margin-top: 20px;
|
||
|
margin-bottom: 46px;
|
||
|
}
|
||
|
|
||
|
|
||
|
/*.main-content .toolbar-products {^M
|
||
|
background: #f1f1f1;^M
|
||
|
padding: 7px 25px;^M
|
||
|
margin-top: 60px;^M
|
||
|
}*/
|
||
|
|
||
|
|
||
|
.toolbar-products {
|
||
|
background: #f1f1f1;
|
||
|
padding: 7px 25px;
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .modes .fa-th-large {
|
||
|
font-size: 18px;
|
||
|
margin-top: 6px;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .modes .fa-list-ul {
|
||
|
font-size: 18px;
|
||
|
margin-left: 10px;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .modes a.active {
|
||
|
color: #86baa5;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .toolbar-amount ul {
|
||
|
margin-top: 3px;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .toolbar-amount ul li {
|
||
|
float: left;
|
||
|
list-style-type: none;
|
||
|
margin-right: 30px;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .toolbar-amount ul li .usa {
|
||
|
color: #86baa5;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .toolbar-amount ul li a {
|
||
|
text-decoration: none;
|
||
|
margin-left: 10px;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .pages-items {
|
||
|
margin-left: 13px;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .pages-items ul {
|
||
|
margin: 0px;
|
||
|
padding: 0px;
|
||
|
border: 0px;
|
||
|
text-align: right;
|
||
|
margin-top: 3px;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .pages-items ul li {
|
||
|
margin: 0px;
|
||
|
padding: 0px;
|
||
|
border: 0px;
|
||
|
list-style-type: none;
|
||
|
font-size: 11px;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .pages-items ul li a {
|
||
|
margin-right: 2px;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .pages-items ul li a:link {
|
||
|
color: #333;
|
||
|
display: block;
|
||
|
float: left;
|
||
|
padding: 3px 6px;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .pages-items ul li a:visited {
|
||
|
color: #333;
|
||
|
display: block;
|
||
|
float: left;
|
||
|
padding: 3px 6px;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
.toolbar-products .pages-items ul li a:active {
|
||
|
color: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.bottom-toolbar-products {
|
||
|
margin-top: 30px;
|
||
|
}
|
||
|
|
||
|
.group-content .top-item {
|
||
|
padding-top: 30px;
|
||
|
}
|
||
|
|
||
|
.group-content .top-item .product-cart h3 {
|
||
|
margin-bottom: 0px;
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 992px) {
|
||
|
.main-content .col-float-right .menu-content .group .group2 {
|
||
|
width: 66%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 768px) {
|
||
|
.content-grid {
|
||
|
margin-top: 36px;
|
||
|
}
|
||
|
.main-content .col-float-right .menu-content .group .group2 {
|
||
|
width: 55%;
|
||
|
}
|
||
|
.main-content .col-float-right .menu-content .left-menu form .form-group .form-control {
|
||
|
width: 45px;
|
||
|
}
|
||
|
.main-content .toolbar-products .toolbar-amount ul li {
|
||
|
margin-right: 14px;
|
||
|
}
|
||
|
.main-content .toolbar-products .pages-items ul li a:link {
|
||
|
padding: 3px 4px;
|
||
|
}
|
||
|
.main-content .toolbar-products .pages-items {
|
||
|
margin-left: 0px;
|
||
|
}
|
||
|
.main-content .sidebar-main .block-content .widget .f-price .left-price {
|
||
|
width: 55px;
|
||
|
}
|
||
|
.main-content .sidebar-main .block-content .widget .f-price .right-price {
|
||
|
width: 55px;
|
||
|
}
|
||
|
.main-content .col-float-right .menu-content .left-menu form .form-group .form-control {
|
||
|
width: 45px;
|
||
|
}
|
||
|
.main-content .group-menu .group-none {
|
||
|
text-align: center;
|
||
|
}
|
||
|
.main-content .group-menu .group-none ul {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
.main-content .sidebar-main .block-content .widget .f-price .btn {
|
||
|
padding: 2px 7px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 480px) {
|
||
|
.main-content .col-float-right .menu-content .group .group2 {
|
||
|
width: 78%;
|
||
|
}
|
||
|
.main-content .left-block-content {
|
||
|
clear: both;
|
||
|
}
|
||
|
.main-content .toolbar-products .toolbar-amount ul {
|
||
|
margin-top: 5px;
|
||
|
}
|
||
|
.main-content .toolbar-products .modes {
|
||
|
text-align: center;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 360px) {
|
||
|
.main-content .col-float-right .menu-content .group .group2 {
|
||
|
width: 70%;
|
||
|
}
|
||
|
.main-content .toolbar-products .toolbar-amount ul li {
|
||
|
margin-right: 7px;
|
||
|
}
|
||
|
.main-content .toolbar-products .pages-items ul li a:link {
|
||
|
padding: 3px 3px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 320px) {
|
||
|
.main-content .col-float-right .menu-content .group .group2 {
|
||
|
width: 66%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 2.6. Contact */
|
||
|
.wpb_wrapper {
|
||
|
margin-top: 30px;
|
||
|
}
|
||
|
|
||
|
.wpb_wrapper h1 {
|
||
|
color: #333;
|
||
|
font-size: 25px;
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
.contact-page {
|
||
|
margin-top: 60px;
|
||
|
}
|
||
|
|
||
|
.contact-page h3 {
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
.contact-page h3:after {
|
||
|
content: '\f041';
|
||
|
font-family: 'FontAwesome';
|
||
|
display: inline-block;
|
||
|
color: #333;
|
||
|
float: left;
|
||
|
font-size: 12px;
|
||
|
margin-right: 7px;
|
||
|
font-weight: 300;
|
||
|
}
|
||
|
|
||
|
.contact-page p {
|
||
|
font-size: 14px;
|
||
|
color: #333;
|
||
|
}
|
||
|
|
||
|
.contact-page p a {
|
||
|
color: #97D8BD;
|
||
|
}
|
||
|
|
||
|
.contact-page p a:hover {
|
||
|
color: #999;
|
||
|
}
|
||
|
|
||
|
.contact-page .form-group {
|
||
|
margin-top: 50px;
|
||
|
}
|
||
|
|
||
|
.contact-page .form-group .email {
|
||
|
color: #333;
|
||
|
font-size: 14px;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.contact-page .form-group .form-control {
|
||
|
width: 100%;
|
||
|
height: 40px;
|
||
|
margin-top: 10px;
|
||
|
border: 1px solid #999;
|
||
|
padding: 0px 15px;
|
||
|
}
|
||
|
|
||
|
.contact-page .form-group-text {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.contact-page .form-group-text .email {
|
||
|
color: #333;
|
||
|
font-size: 14px;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.contact-page .form-group-text .form-control {
|
||
|
width: 100%;
|
||
|
border: 1px solid #999;
|
||
|
padding: 0px 15px;
|
||
|
}
|
||
|
|
||
|
.contact-page .form-group-text .form-text-table {
|
||
|
padding-top: 10px;
|
||
|
}
|
||
|
|
||
|
.contact-page .form-group-text .wpcf7-submit {
|
||
|
width: 150px;
|
||
|
height: 50px;
|
||
|
background: #97D8BD;
|
||
|
color: #fff;
|
||
|
margin-top: 20px;
|
||
|
font-size: 15px;
|
||
|
letter-spacing: 0.2em;
|
||
|
text-transform: uppercase;
|
||
|
font-weight: 700;
|
||
|
border: 0px;
|
||
|
font-family: "Open Sans",sans-serif;
|
||
|
border-radius: 30px;
|
||
|
}
|
||
|
|
||
|
.contact-page .form-group-text .wpcf7-submit:hover {
|
||
|
background: #333;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 767px) {
|
||
|
.contact-page h3 {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 2.7. Detail */
|
||
|
.section-content {
|
||
|
padding-top: 55px;
|
||
|
}
|
||
|
|
||
|
.section-content .product-cart h3 {
|
||
|
margin-top: 10px;
|
||
|
margin-bottom: 0px;
|
||
|
}
|
||
|
|
||
|
.section-content .product-clear {
|
||
|
padding-bottom: 0px !important;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .slider-titel {
|
||
|
margin-left: 8px;
|
||
|
margin-top: 15px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .slider-titel .item a {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .slider-titel .item a.active {
|
||
|
/* border: 2px solid #86baa5;*/
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content {
|
||
|
float: left;
|
||
|
margin-left: 30px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content h3 {
|
||
|
font-size: 18px;
|
||
|
color: #333;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .product-icon {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .product-icon:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 130px;
|
||
|
height: 2px;
|
||
|
border-bottom: 1px solid #d7d7d7;
|
||
|
margin-top: 15px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .product-icon ul li {
|
||
|
list-style-type: none;
|
||
|
float: left;
|
||
|
color: #f9ce4a;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .text-version {
|
||
|
text-align: left;
|
||
|
margin-top: 15px;
|
||
|
font-size: 14px;
|
||
|
font-weight: 400;
|
||
|
line-height: 1.5;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .text-version:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 2px;
|
||
|
border-bottom: 1px solid #d7d7d7;
|
||
|
margin-top: 24px;
|
||
|
margin-bottom: 25px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .price {
|
||
|
background: #5b5b5b;
|
||
|
padding: 14px 9px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .price .amount {
|
||
|
color: #fff;
|
||
|
display: inline-block;
|
||
|
font-size: 20px;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .price .amount-3 {
|
||
|
color: #fff;
|
||
|
text-decoration: line-through;
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content p {
|
||
|
font-weight: 300;
|
||
|
font-size: 13px;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content p a {
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content p a .in-stock {
|
||
|
color: #86baa5;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper {
|
||
|
display: inline-block;
|
||
|
margin-top: 30px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper label {
|
||
|
font-weight: 700;
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper .quantity {
|
||
|
height: 50px;
|
||
|
width: 137px;
|
||
|
line-height: 33px;
|
||
|
position: relative;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper .quantity input {
|
||
|
width: 138px;
|
||
|
height: 50px;
|
||
|
text-align: center;
|
||
|
border: 1px solid #f1f1f1;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper .quantity .minus {
|
||
|
position: absolute;
|
||
|
display: block;
|
||
|
height: 50px;
|
||
|
color: rgba(255, 255, 255, 0.4);
|
||
|
width: 20px;
|
||
|
text-align: center;
|
||
|
top: 0px;
|
||
|
left: 0px;
|
||
|
cursor: pointer;
|
||
|
border-right: 1px solid #f1f1f1;
|
||
|
line-height: 45px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper .quantity .minus .fa {
|
||
|
color: #333;
|
||
|
font-size: 10px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper .quantity .quy {
|
||
|
width: 100px;
|
||
|
border: medium none;
|
||
|
height: 33px;
|
||
|
padding: 0px;
|
||
|
text-align: center;
|
||
|
color: #333;
|
||
|
font-size: 13px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper .quantity .plus {
|
||
|
line-height: 45px;
|
||
|
position: absolute;
|
||
|
display: block;
|
||
|
height: 50px;
|
||
|
width: 20px;
|
||
|
color: rgba(255, 255, 255, 0.4);
|
||
|
text-align: center;
|
||
|
top: 0px;
|
||
|
right: 0px;
|
||
|
cursor: pointer;
|
||
|
border-left: 1px solid #f1f1f1;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper .quantity .plus .fa {
|
||
|
color: #333;
|
||
|
font-size: 10px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper .submit {
|
||
|
display: inline-block;
|
||
|
margin-left: 20px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper .submit .sub {
|
||
|
padding: 13px 37px;
|
||
|
border: 0px;
|
||
|
/* background: #97d8bd;
|
||
|
*/
|
||
|
background: #383085;
|
||
|
font-size: 16px;
|
||
|
color: #fff;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .selector-wrapper .submit .sub:hover {
|
||
|
background: #454141;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .sharing-box .social-sharing {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .sharing-box .social-sharing ul {
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .sharing-box .social-sharing ul:after {
|
||
|
content: '';
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
display: inline-block;
|
||
|
background: #c6c6c6;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .sharing-box .social-sharing ul:before {
|
||
|
content: '';
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
display: inline-block;
|
||
|
background: #c6c6c6;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .sharing-box .social-sharing ul li {
|
||
|
list-style-type: none;
|
||
|
float: left;
|
||
|
margin-left: 10px;
|
||
|
padding: 16px 0px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .sharing-box .social-sharing ul li:nth-child(3):after {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .sharing-box .social-sharing ul li:after {
|
||
|
content: '';
|
||
|
width: 2px;
|
||
|
height: 15px;
|
||
|
display: inline-block;
|
||
|
background: #c6c6c6;
|
||
|
margin-left: 10px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .sharing-box .social-sharing ul li a {
|
||
|
text-decoration: none;
|
||
|
color: #c6c6c6;
|
||
|
font-size: 13px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .sharing-box .social-sharing ul li a:hover {
|
||
|
color: #333;
|
||
|
border-bottom: 1px solid #333;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .sharing-box .social-sharing ul li a .fa {
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
|
||
|
.section-content .section-left .text-content .image-icon img {
|
||
|
padding: 20px 0px;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.section-content .tab-reviews .tabs-container {
|
||
|
margin-top: 50px;
|
||
|
}
|
||
|
|
||
|
.section-content .tab-reviews .tabs-container .tabs {
|
||
|
border-bottom: 1px solid #f1f1f1;
|
||
|
}
|
||
|
|
||
|
.section-content .tab-reviews .tabs-container .tabs li {
|
||
|
list-style-type: none;
|
||
|
float: left;
|
||
|
margin-right: 20px;
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
|
||
|
.section-content .tab-reviews .tabs-container .tabs li a {
|
||
|
padding: 10px 20px 0px;
|
||
|
color: black;
|
||
|
text-decoration:none;
|
||
|
}
|
||
|
|
||
|
.section-content .tab-reviews .tabs-container .tabs li a.active {
|
||
|
border: 1px solid #f1f1f1;
|
||
|
border-bottom: 3px solid #fff;
|
||
|
/* color: #a2c9b9;
|
||
|
*/
|
||
|
color: black;
|
||
|
text-decoration:none;
|
||
|
}
|
||
|
|
||
|
.section-content .tab-reviews .tabs-container .tab-content {
|
||
|
padding: 30px;
|
||
|
border: 2px solid #f1f1f1;
|
||
|
border-top: 0px;
|
||
|
}
|
||
|
|
||
|
.section-content .tab-reviews .tabs-container .tab-content p {
|
||
|
color: #444;
|
||
|
font-size: 14px;
|
||
|
font-weight: 400;
|
||
|
line-height: 1.5;
|
||
|
}
|
||
|
|
||
|
.section-content .tab-reviews .tabs-container #tab-1 {
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.section-content .tab-reviews .tabs-container #tab-2 {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.section-content .tab-reviews .tabs-container #tab-3 {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.section-content .product-item .box-title {
|
||
|
width: 100%;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.section-content .product-item .box-title h3 {
|
||
|
padding-top: 30px;
|
||
|
font-size: 18px;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
.section-content .product-item .title-icon {
|
||
|
width: 100%;
|
||
|
float: left;
|
||
|
text-align: center;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.section-content .product-item .title-icon img {
|
||
|
display: inline-block;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
.section-content .product-img {
|
||
|
padding-top: 30px;
|
||
|
padding-bottom: 50px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .list-shop p {
|
||
|
color: #333;
|
||
|
font-size: 18px;
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .list-shop p:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 2px;
|
||
|
border-bottom: 1px solid #d7d7d7;
|
||
|
left: 0px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
z-index: -2;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .list-shop p .the-after {
|
||
|
background: #fff;
|
||
|
padding-right: 20px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content {
|
||
|
margin-top: 23px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .image {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .image img {
|
||
|
width: 100%;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .image .price {
|
||
|
background: #5b5b5b;
|
||
|
display: block;
|
||
|
position: absolute;
|
||
|
padding: 2px 5px;
|
||
|
bottom: 0px;
|
||
|
right: 0px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .image .price .amount {
|
||
|
color: #fff;
|
||
|
text-align: center;
|
||
|
display: inline-block;
|
||
|
text-align: center;
|
||
|
font-size: 14px;
|
||
|
font-weight: 700;
|
||
|
margin-left: 15px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .image .price .amount-3 {
|
||
|
color: #fff;
|
||
|
text-align: center;
|
||
|
line-height: 40px;
|
||
|
text-decoration: line-through;
|
||
|
font-size: 10px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .names a {
|
||
|
text-decoration: none;
|
||
|
color: #333;
|
||
|
display: inherit;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .product-icon {
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
float: none;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .product-icon:after {
|
||
|
content: "";
|
||
|
width: 100px;
|
||
|
height: 2px;
|
||
|
display: block;
|
||
|
border-bottom: 1px solid #F1F1F1;
|
||
|
margin: auto;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .product-icon ul {
|
||
|
display: inline-block;
|
||
|
float: none;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .product-icon ul li {
|
||
|
list-style-type: none;
|
||
|
float: left;
|
||
|
color: #F9CE4A;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text {
|
||
|
text-align: center;
|
||
|
display: inherit;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text:hover .whishlist {
|
||
|
width: 35px;
|
||
|
height: 28px;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text:hover .whishlist a {
|
||
|
text-decoration: none;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text:hover .whishlist a i {
|
||
|
color: #dddddd;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text:hover .whishlist a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text:hover .whishlist:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 1px;
|
||
|
height: 15px;
|
||
|
border-right: 1px solid #d7d7d7;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text:hover .refresh {
|
||
|
transition: all 0.30s ease 0s;
|
||
|
width: 30px;
|
||
|
height: 28px;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text:hover .refresh a {
|
||
|
text-decoration: none;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text:hover .refresh a i {
|
||
|
color: #ddd;
|
||
|
padding: 8px;
|
||
|
background: #fff;
|
||
|
margin-left: 2px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text:hover .refresh a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text p {
|
||
|
margin-top: 10px;
|
||
|
border-radius: 20px;
|
||
|
display: inline-block;
|
||
|
font-size: 12px;
|
||
|
color: #444;
|
||
|
background: #f1f1f1;
|
||
|
padding: 8px 13px;
|
||
|
font-family: 'Open Sans', sans-serif;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text p:hover {
|
||
|
background: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text p:hover a {
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text .whishlist {
|
||
|
width: 0px;
|
||
|
height: 0px;
|
||
|
opacity: 0;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text .whishlist a {
|
||
|
text-decoration: none;
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text .whishlist a i {
|
||
|
color: #dddddd;
|
||
|
padding: 8px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text .whishlist a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text .whishlist:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 1px;
|
||
|
height: 15px;
|
||
|
border-right: 1px solid #d7d7d7;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text .refresh {
|
||
|
width: 0px;
|
||
|
height: 0px;
|
||
|
opacity: 0;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text .refresh a {
|
||
|
text-decoration: none;
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text .refresh a i {
|
||
|
color: #ddd;
|
||
|
padding: 8px;
|
||
|
background: #fff;
|
||
|
margin-left: 2px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .image-content .cart-text .refresh a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .content-group {
|
||
|
margin: 44px 0px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .content-group h3 {
|
||
|
color: #333;
|
||
|
font-size: 18px;
|
||
|
position: relative;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .content-group h3:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 2px;
|
||
|
border-bottom: 1px solid #d7d7d7;
|
||
|
left: 0px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
z-index: -2;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .content-group h3 .the-after {
|
||
|
background: #fff;
|
||
|
padding-right: 20px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .content-group .btn-default {
|
||
|
padding: 8px 11px;
|
||
|
background: #f1f1f1;
|
||
|
margin-left: 10px;
|
||
|
border: 0px;
|
||
|
margin-top: 20px;
|
||
|
color: #333;
|
||
|
font-weight: 400;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .content-group .btn-default:hover {
|
||
|
background: #333;
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .group-image h3 {
|
||
|
color: #333;
|
||
|
font-size: 18px;
|
||
|
position: relative;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .group-image h3:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
height: 2px;
|
||
|
border-bottom: 2px solid #d7d7d7;
|
||
|
left: 0px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
z-index: -2;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .group-image h3 .the-after {
|
||
|
background: #fff;
|
||
|
padding-right: 20px;
|
||
|
}
|
||
|
|
||
|
.section-content .main-content .group-image p {
|
||
|
margin-top: 20px;
|
||
|
margin-bottom: 25px;
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 768px) {
|
||
|
.section-content .main-content .image-content .image {
|
||
|
position: relative;
|
||
|
width: 60%;
|
||
|
margin: 0px auto;
|
||
|
}
|
||
|
.section-content .section-left .content-img #gallery_01 {
|
||
|
margin-bottom: 30px;
|
||
|
}
|
||
|
.section-content .main-content .group-image img {
|
||
|
width: 60%;
|
||
|
margin: 0 auto;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 480px) {
|
||
|
.section-content .main-content .image-content .image {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.section-content .main-content .group-image img {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.product-img .item {
|
||
|
margin-bottom: 30px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 480px) {
|
||
|
.section-content .section-left .text-content .selector-wrapper .submit .sub {
|
||
|
margin-top: 40px;
|
||
|
}
|
||
|
.section-content .tab-reviews .tabs-container .tabs li {
|
||
|
margin-right: 10px;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 3. woocommerce */
|
||
|
/* 3.1 Product-img */
|
||
|
.product-image {
|
||
|
position: relative;
|
||
|
perspective: 1000;
|
||
|
}
|
||
|
|
||
|
.product-image .image {
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.product-image .image img {
|
||
|
width: 100%;
|
||
|
height: auto;
|
||
|
-webkit-transition: all 0.7s ease;
|
||
|
transition: all 0.7s ease;
|
||
|
}
|
||
|
|
||
|
.product-image .image img:hover {
|
||
|
-webkit-transform: scale(1.2);
|
||
|
transform: scale(1.2);
|
||
|
}
|
||
|
|
||
|
.product-image .image .price {
|
||
|
position: absolute;
|
||
|
bottom: 0px;
|
||
|
right: 0px;
|
||
|
display: block;
|
||
|
width: 80px;
|
||
|
height: 30px;
|
||
|
background: #5b5b5b;
|
||
|
}
|
||
|
|
||
|
.product-image .image .price .amount {
|
||
|
color: #fff;
|
||
|
text-align: center;
|
||
|
display: block;
|
||
|
line-height: 30px;
|
||
|
font-size: 14px;
|
||
|
font-weight: 700;
|
||
|
}
|
||
|
|
||
|
.product-image .image .price-content {
|
||
|
padding: 2px 5px !important;
|
||
|
}
|
||
|
|
||
|
.names {
|
||
|
text-align: center;
|
||
|
padding-top: 18px;
|
||
|
}
|
||
|
|
||
|
.names a {
|
||
|
color: #444444;
|
||
|
text-decoration: none;
|
||
|
font-size: 13px;
|
||
|
}
|
||
|
|
||
|
.names a:hover {
|
||
|
color: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.icon-judge {
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.icon-judge:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 100px;
|
||
|
height: 2px;
|
||
|
border-bottom: 1px solid #d7d7d7;
|
||
|
}
|
||
|
|
||
|
.icon-judge ul {
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
.icon-judge ul li {
|
||
|
list-style-type: none;
|
||
|
margin-left: px;
|
||
|
float: none;
|
||
|
color: #F9CE4A;
|
||
|
text-align: center;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.cart-text {
|
||
|
text-align: center;
|
||
|
display: inherit;
|
||
|
}
|
||
|
|
||
|
.cart-text:hover .whishlist {
|
||
|
width: 35px;
|
||
|
height: 28px;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.cart-text:hover .whishlist a {
|
||
|
text-decoration: none;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.cart-text:hover .whishlist a i {
|
||
|
color: #dddddd;
|
||
|
}
|
||
|
|
||
|
.cart-text:hover .whishlist a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
.cart-text:hover .whishlist:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 1px;
|
||
|
height: 15px;
|
||
|
border-right: 1px solid #d7d7d7;
|
||
|
}
|
||
|
|
||
|
.cart-text:hover .refresh {
|
||
|
transition: all 0.30s ease 0s;
|
||
|
width: 30px;
|
||
|
height: 28px;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.cart-text:hover .refresh a {
|
||
|
text-decoration: none;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.cart-text:hover .refresh a i {
|
||
|
color: #ddd;
|
||
|
padding: 8px;
|
||
|
background: #fff;
|
||
|
margin-left: 2px;
|
||
|
}
|
||
|
|
||
|
.cart-text:hover .refresh a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
.cart-text p {
|
||
|
margin-top: 10px;
|
||
|
border-radius: 20px;
|
||
|
display: inline-block;
|
||
|
font-size: 12px;
|
||
|
color: #fff;
|
||
|
/* background: #f1f1f1;
|
||
|
*/
|
||
|
background: #3A3285;
|
||
|
padding: 8px 13px;
|
||
|
font-family: 'Open Sans', sans-serif;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.cart-text p a{
|
||
|
color:#fff;
|
||
|
}
|
||
|
.cart-text p:hover {
|
||
|
/* background: #97d8bd;
|
||
|
*/
|
||
|
background: #5B5B5B;
|
||
|
}
|
||
|
|
||
|
.cart-text p:hover a {
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
.cart-text .whishlist {
|
||
|
width: 0px;
|
||
|
height: 0px;
|
||
|
opacity: 0;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
.cart-text .whishlist a {
|
||
|
text-decoration: none;
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.cart-text .whishlist a i {
|
||
|
color: #dddddd;
|
||
|
padding: 8px;
|
||
|
}
|
||
|
|
||
|
.cart-text .whishlist a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.cart-text .whishlist:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 1px;
|
||
|
height: 15px;
|
||
|
border-right: 1px solid #d7d7d7;
|
||
|
}
|
||
|
|
||
|
.cart-text .refresh {
|
||
|
width: 0px;
|
||
|
height: 0px;
|
||
|
opacity: 0;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
.cart-text .refresh a {
|
||
|
text-decoration: none;
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.cart-text .refresh a i {
|
||
|
color: #ddd;
|
||
|
padding: 8px;
|
||
|
background: #fff;
|
||
|
margin-left: 2px;
|
||
|
}
|
||
|
|
||
|
.cart-text .refresh a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
/* 3.2 Product-detail */
|
||
|
/*A. List*/
|
||
|
.products-list {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.products-list:active {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item {
|
||
|
margin-top: 30px;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-img .product-image-container {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-img .product-image-container img {
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-img .product-image-container .price {
|
||
|
position: absolute;
|
||
|
bottom: 0px;
|
||
|
right: 0px;
|
||
|
width: 120px;
|
||
|
height: 30px;
|
||
|
background: #5b5b5b;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-img .product-image-container .price .amount {
|
||
|
color: #fff;
|
||
|
line-height: 30px;
|
||
|
margin-left: 10px;
|
||
|
font-size: 13px;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-img .product-image-container .price .amount-3 {
|
||
|
color: #fff;
|
||
|
font-size: 10px;
|
||
|
text-decoration: line-through;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details h3 {
|
||
|
font-size: 13px;
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-names {
|
||
|
padding: 0px;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .icon-content {
|
||
|
display: inline-block;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .icon-content ul {
|
||
|
margin-top: 5px;
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .icon-content ul li {
|
||
|
float: left;
|
||
|
list-style-type: none;
|
||
|
color: #f9ce4a;
|
||
|
margin-right: 3px;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .icon-content:after {
|
||
|
width: 100px;
|
||
|
height: 2px;
|
||
|
content: '';
|
||
|
border-bottom: 1px solid #d7d7d7;
|
||
|
display: block;
|
||
|
margin-top: 35px;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .text-product p {
|
||
|
margin-top: 17px;
|
||
|
text-align: left;
|
||
|
font-size: 13px;
|
||
|
color: #444;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .text-product p:after {
|
||
|
width: 100px;
|
||
|
height: 2px;
|
||
|
content: '';
|
||
|
border-bottom: 1px solid #d7d7d7;
|
||
|
display: block;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart:hover .whishlist {
|
||
|
width: 35px;
|
||
|
height: 28px;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart:hover .whishlist a {
|
||
|
text-decoration: none;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart:hover .whishlist a i {
|
||
|
color: #dddddd;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart:hover .whishlist:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 1px;
|
||
|
height: 15px;
|
||
|
border-right: 1px solid #d7d7d7;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart:hover .refresh {
|
||
|
transition: all 0.30s ease 0s;
|
||
|
width: 30px;
|
||
|
height: 28px;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart:hover .refresh a {
|
||
|
text-decoration: none;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart:hover .refresh a i {
|
||
|
color: #ddd;
|
||
|
padding: 8px;
|
||
|
background: #fff;
|
||
|
margin-left: 2px;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart:hover .refresh a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart p {
|
||
|
margin-top: 20px;
|
||
|
display: inline-block;
|
||
|
font-size: 12px;
|
||
|
color: #444;
|
||
|
background: #f1f1f1;
|
||
|
padding: 8px 13px;
|
||
|
font-family: 'Open Sans', sans-serif;
|
||
|
border-radius: 20px;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart p:hover {
|
||
|
background: #97d8bd;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart .whishlist {
|
||
|
width: 0px;
|
||
|
height: 0px;
|
||
|
opacity: 0;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart .whishlist a {
|
||
|
text-decoration: none;
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart .whishlist a i {
|
||
|
color: #dddddd;
|
||
|
padding: 8px;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart .whishlist:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 1px;
|
||
|
height: 15px;
|
||
|
border-right: 1px solid #d7d7d7;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart .refresh {
|
||
|
width: 0px;
|
||
|
height: 0px;
|
||
|
opacity: 0;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart .refresh a {
|
||
|
text-decoration: none;
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart .refresh a i {
|
||
|
color: #ddd;
|
||
|
padding: 8px;
|
||
|
background: #fff;
|
||
|
margin-left: 2px;
|
||
|
}
|
||
|
|
||
|
.products-list .product-item .product-item-details .the-cart .refresh a i:hover {
|
||
|
color: #fff;
|
||
|
background: black;
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 992px) {
|
||
|
.products-list .product-item .product-item-details .text-product p {
|
||
|
margin-top: 0px;
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
.products-list .product-item .product-item-details .text-product p::after {
|
||
|
margin-top: 0px;
|
||
|
}
|
||
|
.product-img .product-image-container img {
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 768px) {
|
||
|
.product-img .product-image-container img {
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 480px) {
|
||
|
.products-list .product-item .product-img .product-image-container {
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 3.3 Cart */
|
||
|
.main-content .product-name .table-responsive {
|
||
|
width: 100%;
|
||
|
/* Zebra striping */
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .table-responsive table {
|
||
|
margin-top: 60px;
|
||
|
width: 100%;
|
||
|
border-collapse: collapse;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .table-responsive tr:nth-of-type(odd) {
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .table-responsive th {
|
||
|
background: #fff;
|
||
|
color: #333;
|
||
|
font-weight: 700;
|
||
|
font-size: 16px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .table-responsive td, .main-content .product-name .table-responsive th {
|
||
|
padding: 15px;
|
||
|
border: 1px solid #ccc;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .table-responsive td {
|
||
|
vertical-align: middle;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .table-responsive td img {
|
||
|
margin: auto;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-shop .clear-cart {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-shop .clear-cart .clear-shop a {
|
||
|
font-size: 14px;
|
||
|
display: inline-block;
|
||
|
padding: 7px 24px;
|
||
|
background: #333;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
cursor: pointer;
|
||
|
font-weight: 700;
|
||
|
border-radius: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-shop .clear-cart .clear-shop a:hover {
|
||
|
background: #A2C9B9;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-shop .the-cart {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-shop .the-cart .clear-shop-left a {
|
||
|
display: inline-block;
|
||
|
padding: 7px 24px;
|
||
|
background: #333;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
font-size: 14px;
|
||
|
cursor: pointer;
|
||
|
font-weight: 700;
|
||
|
border-radius: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-shop .the-cart .clear-shop-left a:hover {
|
||
|
background: #A2C9B9;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-shop .the-cart .clear-shop-right a {
|
||
|
display: inline-block;
|
||
|
padding: 7px 20px;
|
||
|
background: #333;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
font-size: 14px;
|
||
|
float: right;
|
||
|
cursor: pointer;
|
||
|
font-weight: 700;
|
||
|
border-radius: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-shop .the-cart .clear-shop-right a:hover {
|
||
|
background: #A2C9B9;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-related h3 {
|
||
|
font-size: 16px;
|
||
|
position: relative;
|
||
|
margin-top: 42px;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-related h3:after {
|
||
|
content: '';
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
display: inline-block;
|
||
|
background: #f1f1f1;
|
||
|
top: 50%;
|
||
|
left: 0px;
|
||
|
z-index: -1;
|
||
|
position: absolute;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-related h3 .the-after {
|
||
|
padding-right: 10px;
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-related p {
|
||
|
font-size: 13px;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-dis h3 {
|
||
|
margin-top: 42px;
|
||
|
font-size: 16px;
|
||
|
position: relative;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-dis h3:after {
|
||
|
content: '';
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
display: inline-block;
|
||
|
background: #f1f1f1;
|
||
|
top: 50%;
|
||
|
left: 0px;
|
||
|
z-index: -1;
|
||
|
position: absolute;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-dis h3 .the-after {
|
||
|
padding-right: 20px;
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-dis p {
|
||
|
font-size: 13px;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-dis .form-inline .form-group .form-control {
|
||
|
margin: 20px 0px 20px 0px;
|
||
|
width: 60%;
|
||
|
height: 40px;
|
||
|
border: 1px solid #E1D2D2;
|
||
|
padding: 0px 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-dis .form-inline .btn-default {
|
||
|
border: 0px none;
|
||
|
background: #333;
|
||
|
padding: 7px 26px;
|
||
|
color: #fff;
|
||
|
font-size: 13px;
|
||
|
margin-bottom: 55px;
|
||
|
cursor: pointer;
|
||
|
font-weight: 700;
|
||
|
border-radius: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-dis .form-inline .btn-default:hover {
|
||
|
background: #A2C9B9;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-form h3 {
|
||
|
font-size: 16px;
|
||
|
position: relative;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-form h3:after {
|
||
|
content: '';
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
display: inline-block;
|
||
|
background: #f1f1f1;
|
||
|
top: 50%;
|
||
|
left: 0px;
|
||
|
z-index: -1;
|
||
|
position: absolute;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-form h3 .the-after {
|
||
|
padding-right: 20px;
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-form p {
|
||
|
font-size: 13px;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-form .form-inline .form-group .form-control {
|
||
|
margin: 20px 0px;
|
||
|
width: 63%;
|
||
|
height: 40px;
|
||
|
border: 1px solid #E1D2D2;
|
||
|
padding: 0px 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-form .form-inline .btn-default {
|
||
|
border: 0px none;
|
||
|
background: #333;
|
||
|
padding: 7px 26px;
|
||
|
color: #fff;
|
||
|
font-size: 13px;
|
||
|
cursor: pointer;
|
||
|
font-weight: 700;
|
||
|
border-radius: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-form .form-inline .btn-default:hover {
|
||
|
background: #A2C9B9;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-form .form-inline .disabled {
|
||
|
padding-top: 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-total h3 {
|
||
|
font-size: 16px;
|
||
|
margin-top: 42px;
|
||
|
position: relative;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-total h3:after {
|
||
|
content: '';
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
display: inline-block;
|
||
|
background: #f1f1f1;
|
||
|
top: 50%;
|
||
|
left: 0px;
|
||
|
z-index: -1;
|
||
|
position: absolute;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-total h3 .the-after {
|
||
|
padding-right: 20px;
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-total .col-text-left p {
|
||
|
text-align: right;
|
||
|
font-size: 13px;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-total .col-text-left h4 {
|
||
|
text-align: right;
|
||
|
font-size: 16px;
|
||
|
margin-top: 13px;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-total .col-text-right p {
|
||
|
text-align: right;
|
||
|
font-size: 13px;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-total .col-text-right h4 {
|
||
|
text-align: right;
|
||
|
font-size: 16px;
|
||
|
margin-top: 12px;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-total .col-text-right .checkout {
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-total .col-text-right .checkout .col-checkout {
|
||
|
margin-bottom: 27px;
|
||
|
margin-top: 16px;
|
||
|
padding: 7px 20px;
|
||
|
background: #333;
|
||
|
color: #fff;
|
||
|
float: right;
|
||
|
cursor: pointer;
|
||
|
font-weight: 600;
|
||
|
font-size: 14px;
|
||
|
border-radius: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-total .col-text-right .checkout .col-checkout:hover {
|
||
|
background: #A2C9B9;
|
||
|
}
|
||
|
|
||
|
.main-content .product-name .product-code .product-total p {
|
||
|
font-size: 13px;
|
||
|
text-align: right;
|
||
|
margin-top: 27px;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 992px) {
|
||
|
.main-content .product-name .product-code .product-dis .form-inline .btn-default {
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
.main-content .product-name .product-code .product-form .form-inline .btn-default {
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 480px) {
|
||
|
table {
|
||
|
overflow-x: auto;
|
||
|
display: block;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
|
||
|
/* Force table to not be like tables anymore */
|
||
|
table, thead, tbody, th, td, tr {
|
||
|
/*display: block;
|
||
|
*/
|
||
|
}
|
||
|
/* Hide table headers (but not display: none;, for accessibility) */
|
||
|
thead tr {
|
||
|
position: absolute;
|
||
|
top: -9999px;
|
||
|
left: -9999px;
|
||
|
}
|
||
|
tr {
|
||
|
border: 1px solid #ccc;
|
||
|
}
|
||
|
td {
|
||
|
/* Behave like a "row" */
|
||
|
border: none;
|
||
|
border-bottom: 1px solid #eee;
|
||
|
position: relative;
|
||
|
padding-left: 50%;
|
||
|
}
|
||
|
/*td:before {
|
||
|
/* Now like a table header */
|
||
|
/*position: absolute;
|
||
|
/* Top/left values mimic padding */
|
||
|
/* top: 6px;
|
||
|
left: 6px;
|
||
|
width: 45%;
|
||
|
padding-right: 10px;
|
||
|
white-space: nowrap;
|
||
|
}
|
||
|
*/
|
||
|
/*
|
||
|
Label the data
|
||
|
*/
|
||
|
/* td:nth-of-type(1):before {
|
||
|
content: "First Name";
|
||
|
}
|
||
|
td:nth-of-type(2):before {
|
||
|
content: "Last Name";
|
||
|
}
|
||
|
td:nth-of-type(3):before {
|
||
|
content: "Job Title";
|
||
|
}
|
||
|
td:nth-of-type(4):before {
|
||
|
content: "Favorite Color";
|
||
|
}
|
||
|
td:nth-of-type(5):before {
|
||
|
content: "Wars of Trek?";
|
||
|
}
|
||
|
td:nth-of-type(6):before {
|
||
|
content: "Porn Name";
|
||
|
}
|
||
|
td:nth-of-type(7):before {
|
||
|
content: "Date of Birth";
|
||
|
}
|
||
|
td:nth-of-type(8):before {
|
||
|
content: "Dream Vacation City";
|
||
|
}
|
||
|
td:nth-of-type(9):before {
|
||
|
content: "GPA";
|
||
|
}
|
||
|
td:nth-of-type(10):before {
|
||
|
content: "Arbitrary Data";
|
||
|
}
|
||
|
}
|
||
|
|
||
|
*/
|
||
|
/* 3.4 Checkout */
|
||
|
.main-content .checkout-left {
|
||
|
margin-top: 54px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkout-left h3 {
|
||
|
font-size: 16px;
|
||
|
color: #444;
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.main-content .checkout-left h3:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
background: #f1f1f1;
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
z-index: -1;
|
||
|
left: 0px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkout-left h3 .the-after {
|
||
|
padding-right: 10px;
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.main-content .checkout-left ul {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkout-left ul li {
|
||
|
list-style-type: none;
|
||
|
margin-top: 15px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkout-left ul li a {
|
||
|
text-decoration: none;
|
||
|
color: #444;
|
||
|
font-size: 13px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right h3 {
|
||
|
font-size: 16px;
|
||
|
color: #444;
|
||
|
position: relative;
|
||
|
margin-top: 54px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right h3:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
background: #f1f1f1;
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
z-index: -1;
|
||
|
left: 0px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right h3 .the-after-right {
|
||
|
padding-right: 10px;
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title {
|
||
|
margin-top: 25px;
|
||
|
margin-bottom: 25px;
|
||
|
width: 100%;
|
||
|
height: 50px;
|
||
|
border: 1px solid #f1f1f1;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title .method-top {
|
||
|
line-height: 50px;
|
||
|
padding: 0px 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title .method-top .sub-method a {
|
||
|
background: #97d8bd;
|
||
|
padding: 8px 5px;
|
||
|
color: #effcf3;
|
||
|
cursor: pointer;
|
||
|
line-height: 50px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title .method-top .text-method {
|
||
|
margin-left: 10px;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .form-continue p {
|
||
|
font-size: 13px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .form-continue .checkbox {
|
||
|
padding-top: 20px;
|
||
|
padding-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .form-continue .radio input {
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .form-continue .col-text .tex-register {
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .form-continue .col-text p {
|
||
|
padding-top: 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .form-continue .col-text .the-tasb:after {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 7px;
|
||
|
height: 7px;
|
||
|
background: #333;
|
||
|
float: left;
|
||
|
margin-top: 7px;
|
||
|
border-radius: 50%;
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .form-continue .sub-continue a {
|
||
|
padding: 8px 15px;
|
||
|
background: #444;
|
||
|
color: #fff;
|
||
|
font-weight: 700;
|
||
|
font-size: 13px;
|
||
|
display: inline-block;
|
||
|
margin-top: 30px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .form-continue .sub-continue a:hover {
|
||
|
background: #A2C9B9;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title {
|
||
|
margin-top: 25px;
|
||
|
margin-bottom: 25px;
|
||
|
width: 100%;
|
||
|
height: 50px;
|
||
|
border: 1px solid #f1f1f1;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title .method-top {
|
||
|
line-height: 50px;
|
||
|
padding: 0px 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title .method-top .sub-method {
|
||
|
background: #97d8bd;
|
||
|
padding: 8px 12px;
|
||
|
color: #effcf3;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title .method-top .text-method {
|
||
|
margin-left: 10px;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block.active .text-form {
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form h3 {
|
||
|
color: #333;
|
||
|
margin-top: 20px;
|
||
|
margin-bottom: 10px;
|
||
|
font-weight: 500;
|
||
|
font-size: 15px;
|
||
|
margin-left: 55px;
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form ul {
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form ul li {
|
||
|
list-style-type: none;
|
||
|
text-align: right;
|
||
|
margin-bottom: 42px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form ul .comment-bottom {
|
||
|
margin-bottom: 99px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form .text-times {
|
||
|
margin: 0px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form .text-times li {
|
||
|
list-style-type: none;
|
||
|
margin: 0px;
|
||
|
text-align: left;
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form .text-times li .form-times {
|
||
|
width: 108px;
|
||
|
height: 40px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form .form-control {
|
||
|
width: 60%;
|
||
|
height: 40px;
|
||
|
background: none;
|
||
|
border: 1px solid #e9e9e9;
|
||
|
margin-left: 10px;
|
||
|
margin-bottom: 20px;
|
||
|
padding: 10px;
|
||
|
color: #999;
|
||
|
-moz-appearance: none;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form .form_icon {
|
||
|
-moz-appearance: none;
|
||
|
background: transparent none repeat scroll 0% 0%;
|
||
|
background-image: url("../images/assets/icon.jpg");
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: calc(100% - 10px) 50%;
|
||
|
cursor: pointer;
|
||
|
-webkit-appearance: none;
|
||
|
appearance: none;
|
||
|
padding-right: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form .form_icon:before {
|
||
|
content: '\f078';
|
||
|
display: inline-block;
|
||
|
color: #333;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form .form-comment {
|
||
|
height: 100px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form .form-bottom {
|
||
|
width: 70%;
|
||
|
height: 100px;
|
||
|
margin: auto;
|
||
|
border: 1px solid #e9e9e9;
|
||
|
background: #f9f9fa;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form .form-bottom .checkbox {
|
||
|
float: left;
|
||
|
line-height: 100px;
|
||
|
margin-left: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form .form-bottom .btn-primary {
|
||
|
float: right;
|
||
|
padding: 9px 60px;
|
||
|
background: #231f20;
|
||
|
color: #fff;
|
||
|
border: 0px;
|
||
|
margin-top: 30px;
|
||
|
margin-right: 20px;
|
||
|
font-weight: 500;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-form .form-bottom .btn-primary:hover {
|
||
|
background: #A2C9B9;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title {
|
||
|
margin-top: 25px;
|
||
|
margin-bottom: 25px;
|
||
|
width: 100%;
|
||
|
height: 50px;
|
||
|
border: 1px solid #f1f1f1;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title .method-top {
|
||
|
line-height: 50px;
|
||
|
padding: 0px 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title .method-top .sub-method {
|
||
|
background: #97d8bd;
|
||
|
padding: 8px 12px;
|
||
|
color: #effcf3;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .checkout-right .checkout-method-title .method-top .text-method {
|
||
|
margin-left: 10px;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order {
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .top-order {
|
||
|
width: 70%;
|
||
|
float: none;
|
||
|
border-bottom: 1px solid #e9e9e9;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .top-order h3 {
|
||
|
color: #333;
|
||
|
font-size: 15px;
|
||
|
font-weight: 500;
|
||
|
float: left;
|
||
|
margin-left: 30px;
|
||
|
padding-bottom: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .top-order .right-totar {
|
||
|
float: right;
|
||
|
margin-right: 30px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .top-content .top-input {
|
||
|
display: inline-block;
|
||
|
vertical-align: middle;
|
||
|
text-transform: none;
|
||
|
float: left;
|
||
|
padding: 20px 0px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .top-content .top-input input {
|
||
|
cursor: pointer;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .list-product {
|
||
|
border-bottom: 1px solid #e9e9e9;
|
||
|
width: 70%;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .list-product p {
|
||
|
font-size: 14px;
|
||
|
text-align: left;
|
||
|
padding-top: 20px;
|
||
|
padding-bottom: 30px;
|
||
|
color: #999;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .list-product .text-list-order ul {
|
||
|
margin-top: 20px;
|
||
|
margin-left: 30px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .list-product .text-list-order ul li {
|
||
|
list-style-type: none;
|
||
|
margin-bottom: 20px;
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .list-product .text-list-order ul li a {
|
||
|
text-decoration: none;
|
||
|
font-size: 14px;
|
||
|
color: #999;
|
||
|
font-weight: 500;
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .list-product .text-list-order ul li a:hover {
|
||
|
color: #A2C9B9;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .list-product .text-list-line {
|
||
|
display: inline-block;
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .list-product .text-list-line ul {
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .list-product .text-list-line ul li {
|
||
|
font-size: 16px;
|
||
|
font-weight: 700;
|
||
|
margin-right: 30px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .sub-totar {
|
||
|
padding: 15px 0px;
|
||
|
border-bottom: 1px solid #e9e9e9;
|
||
|
width: 70%;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .sub-totar img {
|
||
|
margin-top: 30px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .sub-totar .top-input {
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .sub-totar .top-input input {
|
||
|
cursor: pointer;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .sub-totar h3 {
|
||
|
color: #666;
|
||
|
text-align: left;
|
||
|
font-size: 15px;
|
||
|
float: left;
|
||
|
margin-left: 30px;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .sub-totar .sub-text {
|
||
|
float: right;
|
||
|
margin-right: 30px;
|
||
|
font-size: 16px;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .sub-totar .sub-free {
|
||
|
font-size: 14px;
|
||
|
font-weight: 500;
|
||
|
}
|
||
|
|
||
|
.main-content .checkbox-method-block .text-order .sub-bottom p {
|
||
|
color: #444;
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
.main-content .list-checkout p {
|
||
|
font-size: 13px;
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
|
||
|
.main-content .list-checkout .form-group p {
|
||
|
margin: 0px;
|
||
|
}
|
||
|
|
||
|
.main-content .list-checkout input {
|
||
|
width: 71%;
|
||
|
height: 40px;
|
||
|
margin-top: 10px;
|
||
|
margin-bottom: 11px;
|
||
|
}
|
||
|
|
||
|
.main-content .list-checkout .tex-buttom {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.main-content .list-checkout .tex-buttom .btn-primary {
|
||
|
border: 0px;
|
||
|
padding: 8px 15px;
|
||
|
background: #444;
|
||
|
color: #fff;
|
||
|
margin-top: 10px;
|
||
|
font-weight: 700;
|
||
|
float: left;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.main-content .list-checkout .tex-buttom .btn-primary:hover {
|
||
|
background: #A2C9B9;
|
||
|
}
|
||
|
|
||
|
.main-content .list-checkout .tex-buttom p {
|
||
|
margin-top: 20px;
|
||
|
float: left;
|
||
|
margin-left: 20px;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 768px) {
|
||
|
.main-content .checkout-left ul .bottom-method {
|
||
|
margin-bottom: 30px;
|
||
|
}
|
||
|
.main-content .checkbox-method .form-continue .sub-continue a {
|
||
|
margin-bottom: 40px;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 480px) {
|
||
|
.main-content .checkbox-method-block .form-continue .sub-continue a {
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
.main-content .checkbox-method-block .text-form ul li {
|
||
|
text-align: left;
|
||
|
}
|
||
|
.main-content .checkbox-method-block .text-form ul {
|
||
|
float: left;
|
||
|
}
|
||
|
.main-content .checkbox-method-block .text-form .text-times li .form-times {
|
||
|
width: 79px;
|
||
|
}
|
||
|
.main-content .checkbox-method-block .text-form .form-bottom .btn-primary {
|
||
|
padding: 8px 25px;
|
||
|
margin-right: 20px;
|
||
|
}
|
||
|
.main-content .checkbox-method-block .text-form .form-bottom {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.main-content .checkbox-method-block .text-order .list-product .text-list-order ul li a {
|
||
|
font-size: 10px;
|
||
|
}
|
||
|
.main-content .checkbox-method-block .text-order .list-product .text-list-line ul li {
|
||
|
font-size: 13px;
|
||
|
font-weight: 500;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* 4. mixins */
|
||
|
/* 4.1 Clearfix */
|
||
|
/* 4.2 Border-radius */
|
||
|
/* 4.1 Size */
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
.slide_check{
|
||
|
background-color:#393184;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
aside.left-side ul li{
|
||
|
display: inline-block
|
||
|
list-style: none;
|
||
|
}
|
||
|
|
||
|
|
||
|
.mt-10{
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
@media screen and (max-width: 480px) {
|
||
|
|
||
|
.mini-amount{
|
||
|
margin-top: 10px;
|
||
|
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.my-catalog{
|
||
|
color: white;
|
||
|
}
|