/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Variables
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
:root {
    --wrap-width: calc(100% - 2*var(--padding-x));
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    User Interface
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.wrap {
    width: var(--wrap-width);
    margin: 0 auto;
}

.section {
    padding-top: 7rem;
    padding-bottom: 10rem;
}

.price {
    letter-spacing: .1em;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Class
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.g-title {
    font-size: 3em;
    font-weight: 300;
    line-height: 1.2;
}

.g-description {
    font-size: .8em;
    color: var(--color-text-sub);
    margin-top: 1.5em;
}


.g-items {
    margin-top: var(--margin-items-top);
}

/*
------------------------------
*/

.g-service-items .item {
    width: 100%;
    position: relative;
    margin: 0 1px;
}
.g-service-items .text {
    --text-whitespace: 4rem;
    max-width: calc(100% - 5rem);
    color: #fff;
    position: absolute;
    left: var(--text-whitespace);
    bottom: var(--text-whitespace);
    z-index: 2;
}
.g-service-items .text > * {
    display: block;
}
.g-service-items .text > h3 {
    font-size: 2em;
    font-weight: 300;
    line-height: 1.3;
}
.g-service-items .text > label {
    font-size: .8em;
    font-weight: 300;
    margin-top: 2rem;
}

/*
------------------------------
*/
.g-product-items {
    display: grid;
    grid-gap: 3rem 2rem;
    grid-template-columns: 1fr;
}
.g-product-items .item {
    width: 100%;
}

.g-product-items .text {
    margin-top: -.5em;
    padding: 0 2rem 3rem 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.g-product-items .text h3 {
    font-weight: 400;
    line-height: 1.2;
    margin-top: 1em;
}
.g-product-items .text div {
    font-size: .8em;
    line-height: 1.2;
    color: var(--color-text-sub);
}

.g-product-items .text .taxonomy {
    width: 65%;
    letter-spacing: .1em;
}

.g-product-items .text .price {
    width: 35%;
    color: var(--color);
    font-size: .8em;
    text-align: right;
}

.g-product-items .text .price sup {
    font-size: .6em;
    margin-left: .5rem;
}

/*
------------------------------
*/

.g-blog-items .item {
    --padding-blog-item: var(--padding-x);
    width: 100%;
    border: solid 1px transparent;
}
.g-blog-items .created {
    color: #fff;
    font-size: .7em;
    letter-spacing: .3rem;
    position: absolute;
    left: var(--padding-blog-item);
    bottom: calc(var(--padding-blog-item)/2);
    z-index: 3;
}
.g-blog-items h3 {
    font-weight: 400;
    font-size: 1em;
    margin-top: 1.5rem;
    padding: 0 var(--padding-blog-item);
}

/*
------------------------------
*/

.g-slider-menu-line {
    position: relative;
}
.g-slider-menu-line .vr-slide-frame-menu {
    margin: 2rem 0;
}
.g-slider-menu-line .vr-slide-frame-menu > * {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    position: relative;
}
.g-slider-menu-line .vr-slide-frame-menu > :nth-child(n+2) {
    margin-left: 1rem;
}
.g-slider-menu-line .vr-slide-frame-menu > :before {
    content: '';
    width: 100%;
    height: .2rem;
    background: var(--color-text);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: var(--duration-fade);
    opacity: .2;
}
.g-slider-menu-line .vr-slide-frame-menu > [data-active]:before {
    opacity: 1;
}

/*
------------------------------
*/

.g-head {
    transform: translateY(-3rem);
    z-index: 2;
    position: relative;
}

.g-head-min {
    max-width: 100%;
    margin-top: calc(2*var(--h-header));
}

.g-body {
    padding: 5rem 0;
}

/*
------------------------------
*/

.g-pages {
    margin-top: 10rem;
    text-align: center;
    display: flex;
    justify-content: center;
}
.g-pages > a {
    width: 6rem;
    height: 5rem;
    line-height: 5rem;
    font-size: 1.5em;
    color: var(--color-text-sub)
}
.g-pages > a.current {
    color: var(--color);
    position: relative;
}
.g-pages > a.current:before {
    content: '';
    width: 30%;
    height: .2rem;
    background: var(--color);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/*
------------------------------
*/
.g-gallery {
    margin-top: var(--h-header);
    position: relative;
}
/*.g-gallery img {*/
    /*object-fit: contain !important;*/
/*}*/

.g-gallery .vr-slide-frame-menu {
    width: 80%;
    position: absolute;
    left: 50%;
    bottom: 5rem;
    transform: translateX(-50%);
    z-index: 3;
}
.g-gallery .vr-slide-frame-menu > * {
    width: 2rem;
    height: 2rem;
    margin: 0 .5rem;
    position: relative;
}
.g-gallery .vr-slide-frame-menu > :before {
    content: '';
    width: 100%;
    height: .2rem;
    background: var(--color-light);
    display: block;
    opacity: .4;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -.1rem;
}
.g-gallery .vr-slide-frame-menu > [data-active]:before {
    opacity: 1;
}

/*
------------------------------
*/
.g-agent {
    background: var(--shadow-color);
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-around);
    border: var(--border-around)
}
.g-agent > p {
    color: var(--color-text-sub);
    font-size: .8em;
}
.g-agent > :nth-child(n+2) {
    margin-top: 5rem;
}

.g-agent .contact > * {
    display: block;
    font-weight: 400;
}
.g-agent .contact .avatar {
    width: 80%;
    margin: auto;
}
.g-agent .contact h3 {
    font-size: 1.3em;
    font-weight: 500;
    margin-top: 3rem;
}
.g-agent .contact a {
    margin-top: .5rem;
}

.g-agent .btn > * {
    display: block;
    width: 100%;
    text-align: center;
    padding: 2rem 1rem;
}
.g-agent .request {
    background: var(--color);
    color: var(--color-light);
    text-transform: uppercase;
    border: none;
    letter-spacing: .1em;
}


.g-agent .share {
    display: flex;
    align-items: center;
    justify-content: center;
    border: dashed thin var(--border-color);
    margin-top: 3rem;
}
.g-agent .share svg {
    max-width: 2rem;
    max-height: 2rem;
    margin-right: 1rem;
    fill: var(--color-text)
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Elements
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
body[hide] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*
------------------------------
    Header
------------------------------
*/
header {
    width: 100%;
    height: var(--h-header);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    transition: var(--duration-toggle);
}
header:not(.home),
header[data-hide="0"] {
    opacity: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,.9) 75%, transparent);
}
header[data-hide="1"] {
    opacity: 0;
    top: calc(-1*var(--h-header))
}
header[data-toggle] {
    background: rgba(var(--color-rgb),.95);
}
header .wrap {
    height: 100%;
}
header .logo {
    width: 30%;
    height: 100%;
}
header .logo img {
    max-width: 100%;
    max-height: 80%;
}


header .group {
    max-width: 80%;
    text-align: right;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-left: auto;
}

header .group .icon {
    width: 7rem;
    height: 100%;
    color: #fff;
    font-size: 1.5em;
}


/*
------------------------------
    Navigation
------------------------------
*/
#menuItems {
    --menu-padding-right: 7rem;
    width: 100%;
    height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(to bottom, rgba(var(--color-rgb),.95), rgba(var(--color-dark-rgb),.9));
    position: fixed;
    right: 0;
    top: var(--h-header);
    opacity: 0;
    transition: var(--duration-toggle);
}

#menuItems[data-show] {
    height: calc(100vh - var(--h-header));
    opacity: 1;
}

#menuItems > ul {
    padding: 3rem var(--menu-padding-right) 5rem 1rem;
}
#menuItems > ul > :last-child {
    margin-bottom: 5rem;
}

#menuItems a {
    display: block;
    position: relative;
}


#menuItems a label {
    display: block;
    padding: 1.5rem 0;
    color: #fff;
    font-size: 2em;
    font-weight: 200;
    line-height: 1;
    letter-spacing: .05em;
}

#menuItems a .toggle-icon {
    color: #fff;
    font-size: 2em;
    position: absolute;
    top: 50%;
    right: calc(-1*var(--menu-padding-right));
    transform: translate(-50%, -25%);
    transition: var(--duration-toggle);
}

#menuItems [data-show="1"] a .toggle-icon {
    transform: translate(-50%, -25%) rotate(180deg);
}


#menuItems .menu-toggle {
    height: 0;
    overflow: hidden;
    transition: var(--duration-toggle);
}


#menuItems .menu-toggle ul {
    padding-bottom: 2rem;
}

#menuItems .menu-toggle ul a label {
    font-size: 1em;
    padding: 1.5rem 0;
    line-height: 1.3;
}


/*
------------------------------
    Footer
------------------------------
*/
#footer {
    padding: 7rem 0 10rem 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

#footerLetter {
    width: 100%;
    margin: 0 auto 7rem auto;
    text-align: center;
}
#footerLetter > p {
    font-weight: 300;
    font-size: 1.2em;
}
#footerLetter > form {
    width: 100%;
    margin: 3rem auto 0 auto;
    border: solid thin var(--color);
    display: flex;
    justify-content: space-between;
}
#footerLetter > form > * {
    height: 5rem;
    border: none;
}
#footerLetter > form > input {
    width: 75%;
    padding: 0 2rem;
    background: none;
    color: var(--color-text-sub)
}
#footerLetter > form > button {
    width: 25%;
    background: var(--color);
    color: #fff;
    text-transform: uppercase;
}


#footerContact {
    padding-top: 5rem;
}
#footerContact > :nth-child(n+2) {
    margin-top: 2rem;
}

#footerContact .message {
    text-align: center;
    color: rgba(var(--color-rgb), .9);
    padding: 0 2rem
}
#footerContact .hotline {
    font-size: 12vw;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .2rem;
    white-space: nowrap;
    text-align: center;
    text-transform: uppercase;

    background: linear-gradient(rgba(var(--color-rgb), .9) 40%, rgba(var(--color-dark-rgb), .4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#footerContact .info {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#footerContact .info p {
    margin: 1rem 2rem;
    font-size: .8em;
    color: var(--color-text-sub);
    letter-spacing: .05em;
    text-align: center;
}

#footerContact .social a {
    width: 6rem;
    height: 6rem;
    border: solid thin var(--color-text-sub);
    margin: 0 2rem;
    position: relative;
    transition: var(--duration-fade);
}
#footerContact .social a:before {
    content: '';
    width: 90%;
    height: 90%;
    border: dashed thin var(--color-text-sub);
    position: absolute;
    top: 5%;
    left: 5%;
    z-index: 1;
    transition: inherit;
}
#footerContact .social svg {
    max-width: 40%;
    max-height: 40%;
    fill: var(--color-text-sub);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transition: inherit;
}

#footer .powered {
    text-align: center;
    color: var(--color-text-sub);
    font-size: .6em;
    letter-spacing: .2em;
    margin-top: 10rem;
}
#footer .powered a {
    text-decoration: underline;
}


/*
------------------------------
    Popup
------------------------------
*/
#popup {
    height: 0;
    overflow: hidden;
}

#popupRequest form > * {
    width: 100%;
    border: none;
    margin-top: 3rem;
}
#popupRequest form input {
    height: 5rem;
    border: none;
    border-bottom: dashed thin #ccc;
}
#popupRequest form button {
    background: #000;
    color: #fff;
    height: 6rem;
    text-transform: uppercase;
    margin-top: 5rem !important;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Home page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#home .slogan {
    font-size: 2.5em;
    line-height: 1.4;
    text-align: right;
    margin-bottom: 7rem;
    text-shadow: .1em .1em .025em rgba(0,0,0,.5);
    -webkit-text-stroke: 1px var(--color);
    color: transparent;
    font-weight: 500;
}
#home .slogan .big {
    font-size: 2em;
    display: block;
    text-shadow: .1em .1em .025em rgba(0,0,0,.5);
    -webkit-text-stroke: 1px var(--color);
    color: transparent;
    line-height: 1;
    margin-bottom: .2em;
}

#home .s-service {
    background-color: #1a1a1a;
    padding-top: 5rem;
}

#home .s-promotion {
    background: linear-gradient(to bottom, #1a1a1a 60%, var(--bg-primary) 60%);
    padding-bottom: 0;
}

/*
------------------------------
    Banner
------------------------------
*/
#banner {
    position: relative;
}
#banner .call {
    max-width: 75%;
    text-align: center;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
}
#banner .call a {
    font-size: 1.6em;
    padding: .4em 1em;
    background: rgba(var(--color-rgb), .9);
    color: #fff;
    white-space: nowrap;
    border-radius: .3rem;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.4);
    letter-spacing: .05em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#banner .call .icon {
    width: 2.5rem;
    height: 3.5rem;
    margin-right: 1.5rem;
}
#banner .call img {
    max-width: 2.5rem;
    max-height: 2.5rem;
}
#banner .call p {
    margin-top: 1rem;
    font-size: .8em;
}

#banner .slider {
    position: relative;
}

#banner .item {
    position: relative;
}

#banner .cover {
    padding-bottom: 75vh
}
#banner .cover:before {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.2));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#banner .text {
    width: 80%;
    color: #fff;
    padding: 0;
    position: absolute;
    left: 50%;
    bottom: 7rem;
    transform: translateX(-50%);
    z-index: 1;
}

#banner .text h1 {
    font-size: 2.5em;
    line-height: 1;
}

#banner .text p {
    font-size: .7em;
    font-weight: 300;
    margin-top: 1rem;
}


#banner .vs-menu {
    display: flex;
    flex-wrap: wrap;

    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 1;
}

#banner .vs-menu-item {
    width: 2rem;
    height: 7rem;
    margin: 0 .5rem;
    display: block;
    position: relative;
    transition: var(--duration-fade);
}

#banner .vs-menu-item:before {
    content: '';
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    position: absolute;
    top: 50%;
    right: 0;
    transition: var(--duration-fade);
    opacity: .3;
}

#banner .vs-menu-item[active]:before {
    opacity: 1;
}


/*
------------------------------
    Project
------------------------------
*/
 .s-service .slider {
    margin-top: var(--margin-items-top);
    padding-left: var(--padding-x)
}
#home .s-service .vr-slide-frame-menu {
    justify-content: flex-start !important;
}

#home .s-power {
    background: linear-gradient(to bottom, #1a1a1a 55%, var(--bg-primary) 55%);
    padding-top: 0;
    padding-bottom: 0;
}
#home .s-power .wrap {
    background: linear-gradient(to top, rgba(var(--color-dark-rgb), .4), rgba(var(--color-rgb), .4));
    padding: 5rem 2rem;
}

#home .s-power .g-items {
    display: grid;
    grid-gap: 4rem;
}
#home .s-power .g-items p::first-letter {
    font-size: 3.2em;
    font-weight: 500;
    float: left;
    height: 2em;
    display: inline-block;
    margin-right: .2em;
    margin-top: .2em;
    line-height: .5em;
}


/*
------------------------------
    Trade
------------------------------
*/
#home .s-product {
    background-image: url('../images/svg/texture-dot.svg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}
#home .s-product .more {
    margin-top: 5rem;
    text-align: center;
}


#home .s-blog .slider {
    margin-top: 10rem;
}
#home .s-blog .slider .vr-slide-frame-menu {
    margin-top: 0;
    position: absolute;
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    About page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#about .grid-item .text p {
    margin: 1em 0;
}

#about .about-vision {
    background-repeat: no-repeat;
    background-size: cover;
    /*background-attachment: fixed;*/
    padding-bottom: 7rem;
    position: relative;
    margin-top: 10rem;
}
#about .about-vision:before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
#about .about-vision > * {
    position: relative;
    z-index: 1;
}

#about .about-vision .grid-item:nth-of-type(n+2) {
    margin-top: 5rem
}
#about .about-vision .grid-item:nth-of-type(2) {
    text-align: right;
}
#about .about-vision .grid-item h2 {
    font-weight: 400;
    font-size: 2em;
    margin-bottom: 3rem;
    white-space: nowrap;
    line-height: 1;
}

#about .about-vision .sologan {
    --quote-size: 8rem;
    font-size: 2.5em;
    line-height: 1.3;
    margin-top: 7rem;
    position: relative;
}
#about .about-vision .sologan:before {
    content: '';
    width: var(--quote-size);
    height: var(--quote-size);
    background: url("../images/svg/quotes.svg") center no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transform: translate(-30%, -50%);
    opacity: .2;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Project page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#service .service-items h2 {
    font-size: 2em;
    font-weight: 300;
    line-height: 1.2;
    margin-top: 1em;
}

#service .service-item {
    display: block;
    margin: 7rem 0;
}

#service .box-R {
    display: none;
}

#service .text {
    padding-left: calc(1.5*var(--padding-x));
    padding-right: var(--padding-x);
    position: relative;
    z-index: 2;
}
#service .text .taxonomy {
    font-size: .8em;
    margin-top: 2rem;
    display: block;
    letter-spacing: .2em;
}



/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Project Single page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#productSingle > .wrap,
#serviceSingle > .wrap {
    background: url('../images/svg/texture-dot.svg') right 7rem no-repeat;
    background-size: contain;
}
#serviceSingle .navigation {
    display: none;
}

#serviceSingle .block:not(#nav-utilities) {
    border-top: solid thin var(--border-color);
    margin-top: 6rem;
}
#serviceSingle .block > h2 {
    font-weight: 400;
    font-size: 2em;
    padding-top: 3rem;
    padding-bottom: 2rem;
}


#nav-utilities ul {
    list-style: disc;
    padding-left: 1em;
}
#nav-utilities li {
    margin: 1.5rem 0;
}


#nav-procedure ul {
    list-style: decimal-leading-zero;
    padding-left: 2em;
}
#nav-procedure li {
    margin: 1.5rem 0;
}

#nav-content {
    padding-top: 3em;
}
#nav-content blockquote {
    padding-left: 2em;
    border-left: double 3px var(--color);
    color: var(--color);
    margin-top: 2em;
    margin-bottom: 3em;
}


#serviceSingle .g-agent {
    margin-top: 7rem;
}

#serviceSingle .other {
    margin-top: 10rem;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Product page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#product .filter {
    border-top: solid thin var(--border-color);
    padding-top: 3rem;
    margin-top: 3rem;
    margin-bottom: 5rem;
}
#product .filter .count {
    margin-right: auto;
    font-size: .8em;
}
#product .filter .count span {
    margin: 0 .2em;
    font-weight:400;
}
#product .filter .sort {
    padding: .5rem 1rem;
    border-color: var(--color-text)
}



/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Product Single page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#productSingle .slider img {
    object-fit: contain;
}
#productSingle .g-head .address {
    margin-top: 3rem;
    color: var(--color-text-sub)
}

#productSingle .block:not(.sales) {
    border-top: solid thin var(--border-color);
    margin-top: 7rem;
    padding-top: 4rem;
}

#productSingle .sales > * {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 1rem 0;
}
#productSingle .sales label {
    font-size: .8em;
    color: var(--color-text-sub)
}
#productSingle .sales strong {
    font-weight: 400;
}

#productSingle .props {
    list-style-type: disc;
    padding-left: 1em;
}
#productSingle .props > * {
    margin: 1rem 0;
    font-weight: 400;
}

#productSingle aside {
    margin-top: 7rem;
}
#productSingle aside .price {
    border: dashed .15rem var(--color);
    padding: 2rem;
}
#productSingle aside .price > * {
    display: block;
    text-align: right;
}
#productSingle aside .price > strong {
    font-size: 1.3em;
    font-weight: 500;
    margin-top: .5rem;
}

#productSingle .g-agent {
    margin-top: 5rem;
}

#productSingle .other {
    display: block;
    margin-top: 10rem;
}
#productSingle .other .frame {
    display: grid;
    grid-template-columns: 1fr;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Blog page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#blog .g-body > * {
    width: 100%;
}
#blog .contain .item:nth-child(n+2) {
    margin-top: 5em;
    display: block;
}
#blog .contain .item:hover .vr-tag-cover-3-2 {
    transition: var(--duration-fade);
}

#blog .contain .item .info {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: -3.5em;
}
#blog .contain .item .info:before {
    content: '';
    width: 100%;
    height: 3rem;
    position: absolute;
    left: 0;
    top: 2em;
    z-index: 1;
    box-shadow: 0 1rem 1.5rem rgba(0,0,0,.3);
}
#blog .contain .item .info > * {
    position: relative;
    z-index: 2;
}
#blog .contain .item .info .head {
    display: flex;
    justify-content: space-between;
    background: rgba(var(--color-rgb), .9);
    padding: 1em 1.5rem;
    color: var(--color-light);
    font-size: .8em;
    letter-spacing: .1em;
}
#blog .contain .item .info .body {
    background: var(--shadow-color);
    padding: 4rem 3rem;
    position: relative;
}
#blog .contain .item .info .body h2 {
    font-size: 1.3em;
    font-weight: 400;
    margin-bottom: 1em;
}
#blog .contain .item .info .body p {
    color: var(--color-text-sub)
}


#blog .sidebar {
    margin-top: 5em;
}
#blog .sidebar .box:nth-child(n+2) {
    margin-top: 4em
}
#blog .sidebar .box h2 {
    text-transform: uppercase;
    font-weight: normal;
    margin-bottom: 1em;
}
#blog .sidebar .box a {
    color: var(--color-text-sub);
    display: block;
}
#blog .sidebar .box.submenu a {
    margin: .7em 0;
    display: block;
}
#blog .sidebar .box.post a:nth-child(n+2) {
    margin: 1em 0;
    border-top: solid thin var(--color-text-sub);
    display: block;
    padding-top: 1em;
}



/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Blog Single page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#blogSingle .head {
    min-height: 60vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
#blogSingle .head h1 {
    text-align: center;
    color: #fff;
    font-weight: 400;
    line-height: 1.3;
    padding-top: 30vh;
    padding-bottom: 15rem;
    position: relative;
    z-index: 2;
}

#blogSingle .body {
    width: 100%;
    padding: var(--padding-x);
    background: linear-gradient(to bottom, var(--shadow-color), var(--bg-primary));
    position: relative;
    margin-top: -7rem;
    z-index: 3;
}
#blogSingle .fb-share {
    width: 100%;
    padding: 1.5rem 4rem;
    background: var(--color);
    letter-spacing: .1em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--duration-fade);
}
#blogSingle .fb-share svg {
    height: 2rem;
    margin-right: 1.5rem;
    transition: inherit;
    fill: var(--color-text)
}
#blogSingle .fb-share label {
    white-space: nowrap;
}
#blogSingle .vr-paragraph {
    max-width: 100%;
    margin: auto;
    padding-top: 2rem;
}
#blogSingle .vr-paragraph img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#blogSingle .other {
    border-top: solid thin var(--border-color);
    margin-top: 10rem;
}
#blogSingle .other h2 {
    font-weight: 400;
    font-size: 2em;
}
#blogSingle .other .items {
    margin-top: 3rem;
}
#blogSingle .other a {
    width: 100%;
    display: block;
    margin: 1.5rem 0;
    position: relative;
    padding-left: 1rem;
    color: var(--color-text-sub)
}
#blogSingle .other a:before {
    content: '';
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-dark);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}


#blogSingle.promotion {
    margin-top: var(--h-header)
}
#blogSingle.promotion .cover {
    width: 100%;
}
#blogSingle.promotion .body {
    margin-top: 0;
}

#blogSingle.promotion .g-title {
    text-align: center;
    color: #fff;
    font-size: 2em;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 7rem;
}
#blogSingle.promotion .fb-share {
    transform: translate(-50%, 0);
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Contact
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#contact .info li {
    display: flex;
    align-items: center;
    margin: 2rem 0;
    padding-left: 5rem;
    position: relative;
}
#contact .info svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: var(--color);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
#contact .info label {
    font-weight: 400;
    font-size: 1.2em;
    color: var(--color)
}

#contact .feedback {
    position: relative;
    margin-top: 7rem;
    margin-bottom: -7rem;
    z-index: 1;
}

#contact .feedback form {
    width: var(--wrap-width);
    margin: auto;
    background: var(--shadow-color);
    padding: 3rem 2rem;
    position: relative;
    z-index: 1;
}
#contact .feedback form > p {
    font-size: .8em;
    text-align: center;
    margin-bottom: 2rem;
}

#contact .feedback form input,
#contact .feedback form textarea {
    width: 100%;
    font-size: 1em;
    border: none;
    border-bottom: dashed thin var(--color-text-sub);
    padding: 2rem 0 1rem 0;
    margin-top: 2rem;
    background: none;
    color: inherit;
    font-weight: inherit;
}
#contact .feedback form input:focus,
#contact .feedback form textarea:focus {
    color: var(--color)
}
#contact .feedback form textarea {
    min-height: 12rem;
    resize: vertical;
}
#contact .feedback form button {
    width: 100%;
    height: 6rem;
    margin-top: 5rem;
    border: none;
    background: var(--color);
    color: #fff;
    letter-spacing: .1em;
    text-transform: uppercase;
}


#contact .map {
    filter: grayscale(100%);
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Search
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#searchForm {
    width: 80%;
    margin: auto;
    border-bottom: dashed thin var(--color-text);
}
#searchForm > * {
    background: none;
    border: none;
    height: 5rem;
    color: var(--color-light);
}
#searchForm > input {
    width: calc(100% - 5rem);
    padding: 0 2rem;
    font-size: 1.3em;
}
#searchForm > input::placeholder {
    color: var(--color-text)
}
#searchForm > button {
    width: 5rem;
    font-size: 1.5em;
    line-height: 1;
}


#searchResult .g-head-min {
    font-size: 1.5em;
}
#searchResult .g-head-min strong {
    font-weight: 500;
    margin: 0 1rem;
}

#searchResult .item {
    margin: 5rem 0;
}
#searchResult .item > * {
    width: 100%
}
#searchResult .item h3 {
    font-weight: 400;
    margin-top: 2rem;
    line-height: 1.2;
}
#searchResult .item em {
    font-size: .8em;
    margin-top: 1rem;
    color: var(--color-text-sub);
    display: block;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Promotion
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#promotion .g-body .item {
    width: 100%;
    display: block;
    margin-top: 7rem;
}
#promotion .g-body .item h2 {
    font-size: 1.5em;
    font-weight: 300;
    margin-top: 1rem;
    padding-right: 5rem;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Popup
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#pluginPopup {
    --form-height: 7rem;
    --max-width: 90vw;
    --close-size: 8vmin;
}
#pluginPopup [class^=mes-close] {
    width: var(--close-size);
    height: var(--close-size);
    background: rgba(255,255,255, 1);
    border-radius: 50%;
    top: calc(-.5*var(--close-size));
    right: calc(-.5*var(--close-size));
}
#pluginPopup .container {
    max-width: var(--max-width);
    max-height: calc(90vh - var(--form-height));
    background: #fff;
    color: #000;
    overflow: auto;
}
#pluginPopup .body {
    padding: 2rem;
    text-align: left;
}
#pluginPopup form {
    width: 100%;
    height: var(--form-height);
    background: var(--color);
    display: flex;
    justify-content: center;
    align-items: center;
}
#pluginPopup form > * {
    height: 60%;
    border: none;
}
#pluginPopup form > input {
    width: 60%;
    padding: 0 1rem;
    border-radius: 0;
    border-top-left-radius: .3rem;
    border-bottom-left-radius:  .3rem;;
}
#pluginPopup form > button {
    width: 35%;
    background: var(--bg-primary);
    color: var(--color);
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
}

#pluginPopupThank {
    max-width: 64rem;
    color: #000;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Gallery
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.ui-gallery-items {
    display: grid;
    grid-gap: 2px;
}
.ui-gallery-items .item {
    position: relative;
}
.ui-gallery-items .item h2 {
    width: 100%;
    min-height: 25%;
    padding: 2rem 1rem;
    display: flex;
    align-items: center;
    background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
    font-size: 1em;
    font-weight: normal;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Gallery Single
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#gallerySingle .head {
    min-height: 60vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}
#gallerySingle .head h1 {
    font-weight: normal;
}
#gallerySingle .head .wrap {
    text-align: center;
    padding: 15rem 0 5rem 0;
    position: relative;
    z-index: 2;
}

#gallerySingle .fb-share {
    padding: 1.5rem 4rem;
    background: var(--color);
    letter-spacing: .1em;
    margin-top: 4rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--duration-fade);
}
#gallerySingle .fb-share svg {
    height: 2rem;
    margin-right: 1.5rem;
    transition: inherit;
    fill: var(--color-text)
}
#gallerySingle .fb-share label {
    white-space: nowrap;
}


#gallerySingle .images {
    column-count: 1;
    column-gap: 1px;
    column-fill: balance;
}
#gallerySingle .images .item {
    margin-bottom: 1px;
}
#gallerySingle .images img {
    display: table;
}

#gallerySingle .content,
#gallerySingle .other {
    margin-top: 7rem;
}
#gallerySingle .content {
    margin-bottom: 7rem;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Video
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#video .ui-gallery-items .item {
    cursor: pointer;
}
#video .ui-gallery-items .item:before {
    content: '';
    width: 5rem;
    height: 5rem;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2979 2979" fill="hsl(0,0%,100%)"><path transform="scale(1,-1) translate(0,-2209)" d="M1489 -539c-691 0 -1258 567 -1258 1258c0 692 567 1259 1258 1259c692 0 1259 -567 1259 -1259c0 -691 -567 -1258 -1259 -1258zM1489 -457c650 0 1177 527 1177 1176c0 650 -528 1177 -1177 1177s-1176 -527 -1176 -1177c0 -649 527 -1176 1176 -1176zM1235 218c-42 -25 -93 -3 -93 41v923c0 45 51 66 93 41l736 -450c44 -26 44 -83 0 -109z"/></svg>') center no-repeat transparent;
    background-size: contain;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: .3s ease-out;
}


#video-player [class*="mes-close-"] {
    border: solid 1px #fff;
    border-radius: 50%;
    left: 50%;
    bottom: 6rem;
    top: auto;
    transform: translateX(-50%);
    transform-origin: center bottom;
    transition: .5s ease-out;
}
#video-player .video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Mobile contact
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#tpl-mobile {
    --mBackground: rgba(var(--color-dark-rgb), .95);
    --mBackgroundPrimary: rgba(var(--color-rgb), .75);
    --mBackgroundSecondary: rgba(var(--color-rgb), .4);
    --mIconSize: 20px;
    --mButtonSize: 40px;
    --mSpacing: 10px;
    --mColor: #fff;
    --mRadius: 10px;
    --mWidth: 320px;

    display: block;
}
#tpl-mobile ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#tpl-mobile .m-contact-more .social,
#tpl-mobile .m-contact > *,
#tpl-mobile .m-contact {
    display: inline-flex;
    align-items: center;
}
#tpl-mobile .m-contact {
    width: 100%;
    max-width: var(--mWidth);
    justify-content: space-between;
    box-sizing: border-box;

    padding: var(--mSpacing);
    border-top-left-radius: var(--mRadius);
    border-top-right-radius: var(--mRadius);

    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;

    transition: .3s ease-out;
    transform: translateY(100%);
}
#tpl-mobile .m-contact svg {
    fill: var(--mColor);
}
#tpl-mobile .m-contact[show] {
    transform: translateY(0);
}
#tpl-mobile .m-contact > * {
    justify-content: center;
    border-radius: 5px;
}
#tpl-mobile .m-contact .icon {
    width: var(--mIconSize);
    height: var(--mIconSize);
    display: inline-block;
}
#tpl-mobile .m-contact .m-button {
    width: var(--mButtonSize);
    height: var(--mButtonSize);
    background: var(--mBackgroundSecondary)
}

#tpl-mobile .m-contact .call {
    width: calc(100% - 2*var(--mButtonSize) - 4*var(--mSpacing));
    height: var(--mButtonSize);
    background: var(--mBackgroundPrimary);
}
#tpl-mobile .m-contact .call .icon {
    margin-right: var(--mSpacing);
    fill: var(--mColor)
}
#tpl-mobile .m-contact .call .phone {
    font-size: 1.1em;
    font-weight: 400;
    color: var(--mColor);
    letter-spacing: .1em;
}


#tpl-mobile .m-contact-more {
    width: 100%;
    max-width: var(--mWidth);
    max-height: calc(95% - 3*var(--mSpacing) - var(--mButtonSize));
    overflow-x: hidden;
    overflow-y: auto;
    border-top-left-radius: var(--mRadius);
    border-top-right-radius: var(--mRadius);
    box-sizing: border-box;
    padding: calc(2*var(--mSpacing));
    background: var(--mBackground);
    /*border: solid thin #e5e5e5;*/
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 98;
    transition: .3s ease-out;
    transform: translateY(100%);
}
#tpl-mobile .m-contact-more[show] {
    transform: translateY(0);
    bottom: calc(3*var(--mSpacing) + var(--mButtonSize) - var(--mRadius));
    box-shadow: 1rem -1rem 2rem -.2rem rgba(0,0,0,.2)
}
#tpl-mobile .m-contact-more > :nth-child(n+2) {
    margin-top: calc(3*var(--mSpacing));
}

#tpl-mobile .m-contact-more .block > h2 {
    font-size: 1.3em;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    margin: 3rem 0 2rem 0;
}
#tpl-mobile .m-contact-more .block .wrapper {
    padding-left: 10px;
}

#tpl-mobile .m-contact-more .social {
    width: 100%;
    justify-content: center;
    margin-top: 2rem;
}
#tpl-mobile .m-contact-more .social > a {
    width: 40px;
    height: 40px;
    margin: 0 10px;
    border-radius: 5px;
    background: var(--mBackgroundSecondary);
    position: relative;
}
#tpl-mobile .m-contact-more .social > a svg {
    max-width: 50%;
    max-height: 50%;
    fill: var(--mColor);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#tpl-mobile .m-contact-more .social > a.in svg {
    max-height: 42%;
}

#tpl-mobile .m-contact-more .support li, #tpl-mobile .m-contact-more .info li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: dashed 1px rgba(255,255,255,.3);
}

#tpl-mobile .m-contact-more .info li span:first-child {
    max-width: 25%;
    color: hsl(0, 0%, 50%);
    font-size: .8em;
}
#tpl-mobile .m-contact-more .info li span:last-child {
    max-width: 70%;
    text-align: right;
}


#tpl-mobile .m-contact-more .support li .name {
    max-width: 50%;
    color: hsl(0, 0%, 50%)
}
#tpl-mobile .m-contact-more .support li .phone {
    font-size: 1em;
    letter-spacing: .1em;
    padding: 10px 15px;
    background: var(--mBackgroundPrimary);
    color: var(--mColor);
    border-radius: 3px;
}