* {
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch; 
}
html,body {
    -webkit-text-size-adjust: none;
}
html,body {
    touch-action: manipulation;
}
html,
body,
.wrapper {
    position: relative;
    height: 100%;
}

body {
    background: #fff;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
/*     -webkit-perspective: 0px !important;
    backface-visibility: visible !important;
    transform: translate3d(0,0,0); */
}
.large-image {
    position: absolute;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
}
.shadow {
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.35);
}

.navigation,
.modal-header {
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 13px;
    padding-bottom: 13px;
    padding-left: .5rem;
    padding-right: .5rem;
    height: 58px;
    color: #FFF;
    background-color: #383838;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.navigation button,
.navigation .button,
.modal button,
.modal .button {
    display: inline-block;
    margin: 0 6px;
    padding: 0;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}
.navigation button > i,
.navigation .button > i,
.modal button > i,
.modal .button > i {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
}
@media (max-width: 374px) {
    .navigation button,
    .navigation .button,
    .modal button,
    .modal .button {
        margin: 0;
    }
}
@media (min-width: 500px) {
    .navigation .left-align,
    .navigation .right-align {
        width: 190px;
    }
}
.logo-std {
    display: inline-block;
    width: 87px;
    height: 32px;
    background-image: url('../images/logo-std.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 87px 32px;
    text-indent: -9999px;
}
.progressbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-color: rgb(193, 225, 251);
}
.progressbar > div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: #2196f3;
    transform-origin: left bottom;
    transition: transform .3s;
}
.btn-date {
    position: relative;
}
.date-picker {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.btn-date .value {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #e85047;
    line-height: 1;
}
.btn-date .value .m,
.btn-date .value .d {
    display: block;
    font-style: normal;
}
.btn-date .value .m {
    color: #383838;
    font-size: 9px;
    font-weight: bold;
}
body.modal-open {
    background-color: #252424;
}
.modal {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background-color: #252424;
    padding-top: 58px;
}
.modal-header h6 {
    margin: 6px 0;
    padding: 0 12px;
    font-size: 18px;
    
}
.modal-body {
    height: 100%;
}
.modal-body > .flexbox {
    padding: .75rem;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.item {
    padding: .5rem;
    height: 100%;
    text-align: center;
}
.item .thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 168.3333%;
    overflow: hidden;
}
.item img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
    background-color: #fff;
}
.item span {
    display: inline-block;
    padding: .75rem .5rem;
    color: #fff;
    font-size: 16px;
    text-align: center;
}
.item.acitve span {

}

.navbars-container {
    position: absolute;
}



.navbars-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    padding: .75rem;
    transform: translateY(-50%);
}
.navbars-item {
    padding: .5rem;
    width: 33.3333%;
}
.navbars-item img {
    width: 100%;
    background-color: #fff;
}
.navbars-item span {
    display: block;
    padding: .75rem .5rem;
    color: #fff;
    text-align: center;

}

/* .navbars-open .navigation > .left-align,
.navbars-open .navigation > .center {
    visibility: hidden;
}
.navbars-open .navbars-container {
    display: block;
} */





/* .swiper-button-next, 
.swiper-button-prev,
.swiper-button-beginning,
.swiper-button-end {
    position: inherit;
    background: none;
    cursor: pointer;
} */
.swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23383838'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23383838'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-beginning.swiper-button-disabled,
.swiper-button-end.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none;
}

.swiper-pagination {
    position: inherit;
    min-width: 65px;
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    height: 32px;
    line-height: 32px;
}




/* Icon */
.icon-bars { background-image: url(../icon/bars.png) }
button[data-opened="true"] .icon-bars { background-image: url(../icon/bars-close.png) }
.icon-calendar { background-image: url(../icon/calendar.png) }
.icon-calendar-alt { background-image: url(../icon/calendar-alt.png) }
.icon-caret-down { background-image: url(../icon/caret-down.png) }
.icon-chevron-left { background-image: url(../icon/chevron-left.png) }
.icon-chevron-right { background-image: url(../icon/chevron-right.png) }
.icon-minus-square { background-image: url(../icon/minus-square.png) }
.icon-plus-square { background-image: url(../icon/plus-square.png) }
.icon-the-end { background-image: url(../icon/the-end.png) }
.icon-the-start { background-image: url(../icon/the-start.png) }
.icon-text { background-image: url(../icon/text.png) }
.icon-close { background-image: url(../icon/bars-close.png) }
.icon-former { background-image: url(../icon/former.png) }

@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {

    .logo-std { background-image: url('../images/logo-std@2x.png'); }
    .icon-bars { background-image: url(../icon/bars@2x.png) }
    button[data-opened="true"] .icon-bars { background-image: url(../icon/bars-close@2x.png) }
    .icon-calendar { background-image: url(../icon/calendar@2x.png) }
    .icon-calendar-alt { background-image: url(../icon/calendar-alt@2x.png) }
    .icon-caret-down { background-image: url(../icon/caret-down@2x.png) }
    .icon-chevron-left { background-image: url(../icon/chevron-left@2x.png) }
    .icon-chevron-right { background-image: url(../icon/chevron-right@2x.png) }
    .icon-minus-square { background-image: url(../icon/minus-square@2x.png) }
    .icon-plus-square { background-image: url(../icon/plus-square@2x.png) }
    .icon-the-end { background-image: url(../icon/the-end@2x.png) }
    .icon-the-start { background-image: url(../icon/the-start@2x.png) }
    .icon-text { background-image: url(../icon/text@2x.png) }
    .icon-close { background-image: url(../icon/bars-close@2x.png) }
    .icon-former { background-image: url(../icon/former@2x.png) }
}




.swiper-container {
    width: 100%;
    position: absolute;
    top: 58px;
    bottom: 0;
}

.swiper-slide {
    overflow: hidden;
}
.swiper-zoom-container > img {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
}
.swiper-zoom-container > canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    
  }