@font-face {
    font-family: fontL;
    src: url('fonts/SF-UI-Display-Light.otf');
}

@font-face {
    font-family: fontR;
    src: url('fonts/SF-UI-Display-Regular.otf');
}

@font-face {
    font-family: fontM;
    src: url('fonts/SF-UI-Display-Medium.otf');
}

@font-face {
    font-family: fontB;
    src: url('fonts/SF-UI-Display-Bold.otf');
}

/*
===================================
    TAGS
===================================
*/

* {
    font-family: fontR, tahoma, sans-serif, arial;
    color: #000;
    line-height: 1.3;
    font-size: 1.1rem;
    letter-spacing: 0.05rem;
    outline: none;
}


:before,
:after {content: ''}


html {font-size: 62.5%;}


html, body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #fff;
}

a {text-decoration: none}



button.action {
    background: #000;
    color: #fff;
    border: none;
    padding: 0 5rem;
    box-sizing: border-box;
    text-transform: uppercase;
    transition: .5s ease-out;
}

button.action:hover {background: #333}



/*
===================================
    STANDARD CLASS
===================================
*/
.clear {
    clear: both !important;
    float: none !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}



[class*="cover-image"] {
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

[class*=cover-image]>img {display: none}

[class*="cover-image-1:1"] {padding-bottom: 100%}
[class*="cover-image-4:3"] {padding-bottom: 75%}
[class*="cover-image-16:9"] {padding-bottom: 56.25%}



.icon-close,
[class*=icon-arrow] {
    position: relative;
}

.icon-close:before,
.icon-close:after,
[class*=icon-arrow]:before,
[class*=icon-arrow]:after {
    width: 100%;
    height: .1rem;
    background: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.icon-close:before,
.icon-arrow-down:before {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.icon-close:after,
.icon-arrow-down:after{
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}



[class*=icon-arrow]:before,
[class*=icon-arrow]:after {width: 30%}

[class*=icon-arrow]:before {left: calc(0px - (30% * 0.7071067812))}
[class*=icon-arrow]:after {right: calc(0px - (30% * 0.7071067812))}

.icon-arrow-down:before,
.icon-arrow-down:after {
    transform-origin: bottom;
    -moz-transform-origin: bottom;
    -webkit-transform-origin: bottom;
}


.icon-arrow-up:before {
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.icon-arrow-up:after {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.icon-arrow-up:before,
.icon-arrow-up:after {
    transform-origin: top;
    -moz-transform-origin: top;
    -webkit-transform-origin: top;
}



.paragraph * {
    float: none;
    text-align: left;
}

.paragraph ul {
    margin: auto;
    padding: auto;
}


/*
===================================
    CONTENT
===================================
*/

.empty {
    width: 100%;
    height: 2rem;
    font-size: 2rem;
    color: #ccc;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}


body {
    padding: 0 4rem;
    box-sizing: border-box;
}



nav {
    width: 25rem;
    height: 100vh;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    z-index: 100;
}


nav .mobile-menu-close {display: none}


nav .logo {
    width: 100%;
    height: 10rem;
    background: url('image/logo.png') center bottom no-repeat;
    display: block;
    margin-bottom: 5rem;
}

nav ul {
    width: inherit;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav>ul {
    width: 100%;
    height: calc(100vh - 15rem);
    height: -moz-calc(100vh - 15rem);
    height: -webkit-calc(100vh - 15rem);
    padding-left: 4rem;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

nav li {
    float: left;
    width: inherit;
    margin-bottom: 1rem;
}


nav li a {
    float: left;
    width: 100%;
    text-transform: uppercase;
    padding-left: 1rem;
    box-sizing: border-box;
    position: relative;
}

nav li a:hover {text-decoration: underline}

nav li.active>a {
    color: #000;
    font-family: fontB;
}

nav li.active>a:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .3rem;
    border-color: transparent;
    border-left-color: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

nav li.active>ul {max-height: 100%}


nav>ul>li>a {
    font-size: 2rem;
    font-family: fontB;
}

nav ul ul {
    padding-left: 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: .3s ease-out;
}

nav ul ul>li:first-of-type {margin-top: 1rem}

nav ul ul a {color: #666}



article {
    width: calc(100% - 25rem);
    width: -moz-calc(100% - 25rem);
    width: -webkit-calc(100% - 25rem);
    float: right;
    padding-top: 15rem;
}

article>* {
    width: 100%;
    float: left;
    clear: both;
}



header {
    width: calc(100% - 33rem);
    width: -moz-calc(100% - 33rem);
    width: -webkit-calc(100% - 33rem);
    height: 10rem;
    background: #fff;
    padding-bottom: 5rem;
    position: fixed;
    top: 0;
    right: 4rem;
    z-index: 10;
    transition: .1s ease-out;
}

header .mobile-menu-open {display: none}

header>* {
    position: absolute;
    bottom: 5rem;
}


header .tool{right: 0}


header .tool>* {
    height: 4rem;
    float: left;
    border: none;
    border-bottom: dotted.1rem #000;
}

header .tool * {float: left}

header .tool form {width: 35rem; border: none}

header .tool input {
    width: 100%;
    height: inherit;
    border: none;
    padding: 0 1rem;
    box-sizing: border-box;
    font-size: 2.4rem;
    font-family: fontL;
    color: #999;
    transition: .5s ease-out;
    border-bottom: dotted .1rem #000;
}

header .tool input:focus {
    color: #000;
    font-family: fontM;
    border-bottom-style: solid;
}


header .tool button {
    width: 3rem;
    background-position: center 1rem;
    background-repeat: no-repeat;
    background-color: transparent;
    margin-left: 2rem;
    float: left;
    display: block;
    transition: .3s ease-out;
    position: relative;
}

header .tool button:hover {
    background-position: center 1.2rem;
    border-bottom-style: solid;
}

header .tool button.favourite {background-image: url('image/icon-favourite.png')}
header .tool button.basket {background-image: url('image/icon-basket.png')}


header .tool button>label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: .9rem;
}



header .tool button[state=true]:after,
header .tool button[state=true]:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .6rem;
    border-color: transparent;
    border-bottom-color: #ccc;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.1rem;
    margin: auto;
    z-index: 1;
}

header .tool button[state=true]:after {
    border-bottom-color: #fff;
    bottom: -1.2rem;
}


header .popup {
    width: 25rem;
    height: auto;
    background: #fff;
    border: solid .1rem #ccc;
    padding: 2rem;
    box-sizing: border-box;
    position: absolute;
    top: 5rem;
    right: 0;
    z-index: 1;
}

header .favourite .popup {right: -5rem}

header .popup * {float: left}

header .popup span:first-of-type {
    width: 20%;
}

header .popup span:last-of-type {
    width: 75%;
    float: right;
}

header .popup span:last-of-type>* {
    width: 100%;
    clear: both;
    text-align: left;
}

header .popup span:last-of-type label:first-of-type {
    text-transform: uppercase;
    font-family: fontM;
    font-size: 1.3rem;
    margin-bottom: .5rem
}

header .popup img {
    max-width: 100%;
    max-height: 100%;
}



header .lang {
    height: 1rem;
    right: 0;
    top: 1.5rem;
}

header .lang label {
    float: left;
    text-align: center;
    text-transform: uppercase;
    color: #666666;
    font-size: .9rem;
    cursor: pointer;
    letter-spacing: .1rem;
}

header .lang label:nth-of-type(2) {margin: 0 1rem}

header .lang label:hover {
    text-decoration: underline;
}

header .lang label.active {color: #000; font-family: fontM}



footer {
    border-top: dotted .1rem #999;
    padding-top: 2rem;
    padding-bottom: 4rem;
    margin-top: 6rem;
}

footer * {
    text-transform: uppercase;
    color: #666;
    font-size: 0.9rem;
    font-family: fontL;
    letter-spacing: 0.1rem;
}

footer code {
    color: #000000;
}

footer a {
    color: #ffaa33;
}

footer div:first-of-type {float: left}
footer div:last-of-type {float: right}

main {
    min-height: calc(100vh - 28.5rem);
    min-height: -moz-calc(100vh - 28.5rem);
    min-height: -webkit-calc(100vh - 28.5rem);
    position: relative;;
}

main>* {
    width: 100%;
    float: left;
    clear: both;
}


main .mod-title {
    margin-bottom: 4rem;
}


main .mod-title div,
main .mod-title div * {
    float: left;
    line-height: 5rem;
}

main .mod-title div:nth-of-type(1) code {
    font-family: fontB;
    margin-right: .5rem;
}


main .mod-title div:nth-of-type(2) {
    float: right;
    font-size: 2rem;
    font-family: fontB;
    text-transform: uppercase;
}
/*
-----------------------------------
    CLASS
-----------------------------------
*/

.product-list a {
    float: left;
    transition: .5s ease-out
}

.product-list a>* {
    float: left;
    clear: both;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}

.product-list a h1 {
    font-family: fontR;
    font-weight: normal;
    margin-top: 1.5rem;
}

.product-list a button {
    width: 100%;
    min-height: 3rem;
    margin-top: 1rem;
    background: #fff;
    border: solid .1rem #000;
}

.product-list label:nth-of-type(2) {
    color: #999;
    text-decoration: line-through;
}

.product-list a:hover h1 {text-decoration: underline}


.product-list.show-2 a{
    width: calc((100% - 8rem)/2);
    width: -moz-calc((100% - 8rem)/2);
    width: -webkit-calc((100% - 8rem)/2);
    margin: 0 4rem;
}

.product-list.show-2 a:nth-of-type(n+3) {margin-top: 12rem}

.product-list.show-2 a:nth-of-type(2n+1){margin-left: 0; clear: left}
.product-list.show-2 a:nth-of-type(2n+2){margin-right: 0}



.product-list.show-6 a {
    width: calc((100% - 10rem)/6);
    width: -moz-calc((100% - 10rem)/6);
    width: -webkit-calc((100% - 10rem)/6);
    margin: 0 1rem;
}

.product-list.show-6 a:nth-of-type(n+7) {margin-top: 5rem}
.product-list.show-6 a:nth-of-type(6n+1) {margin-left: 0; clear: left}
.product-list.show-6 a:nth-of-type(6n+6) {margin-right: 0}

.product-list.show-6 a * {font-size: 1rem}




/*
-----------------------------------
    OBJECT
-----------------------------------
*/
#home {
    width: calc(100% - 9rem);
    width: -moz-calc(100% - 9rem);
    width: -webkit-calc(100% - 9rem);
}

#home header {width: 100%}



#banner {
    width: 100%;
    height: calc(100vh - 19rem);
    height: -moz-calc(100vh - 19rem);
    height: -webkit-calc(100vh - 19rem);
    position: relative;
    margin-bottom: 5rem;
}

#banner div {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 2;
}


#banner label {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .8rem;
    border: solid .1rem #fff;
    display: inline-block;
    float: left;
    margin: 0 1rem;
    position: relative;
}

#banner label[state=active]:before {
    width: .8rem;
    height: .8rem;
    border-radius: .4rem;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

#banner a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
    transition: 1.5s ease-out;
}

#banner a:first-of-type {
    opacity: 1;
    z-index: 1;
}



#product .panel{
    height: 4rem;
    line-height: 4rem;
    margin-bottom: 5rem;
}

#product .panel code {font-family: fontB; margin-right: .5rem}

#product .total,
#product .total * {
    float: left;
    line-height: inherit;
    text-transform: uppercase;
}



#product .tool {
    height: inherit;
    float: right;
    position: relative;
}

#product .tool>* {
    height: inherit;
    float: left;
}


#product .display label {
    height: inherit;
    background-position: center;
    background-repeat: no-repeat;
    float: left;
    display: inline-block;
    cursor: pointer;
}

#product .display .show-2 {
    width: 1rem;
    background-image: url('image/icon-show-2.png')
}

#product .display .show-2[state=true],
#product .display .show-2:hover {background-image: url('image/icon-show-2-active.png')}

#product .display .show-6 {
    width: 3.4rem;
    background-image: url('image/icon-show-6.png');
    margin-left: 2rem;
}

#product .display .show-6[state=true],
#product .display .show-6:hover {background-image: url('image/icon-show-6-active.png')}


#product span[class*=popup] {
    height: inherit;
    line-height: 4rem;
    text-transform: uppercase;
    text-align: right;
    padding-right: 2.5rem;
    background-repeat: no-repeat;
    background-position: right center;
    margin-left: 6rem;
    position: relative;
}

#product span[class*=popup]:hover {
    text-decoration: underline;
    cursor: pointer;
}

#product .popup-filter {background-image: url('image/icon-filter.png')}
#product .popup-sort {background-image: url('image/icon-sort.png')}

#product span[class*=popup][state=true]:after,
#product span[class*=popup][state=true]:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .7rem;
    border-color: transparent;
    border-bottom-color: #ccc;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

#product span[class*=popup][state=true]:after {
    border-bottom-color: #fff;
    bottom: -.1rem;
}

#product span[class*=popup] + * {
    height: auto;
    background: #fff;
    border: solid .1rem #ccc;
    position: absolute;
    top: 4rem;
    right: 0;
    z-index: 0;
    visibility: hidden;
    opacity: 0;
    transition: .5s ease-out;
}

#product span[class*=popup][state=true] + * {
    visibility: visible;
    opacity: 1;
}



#product .popup-sort-content {
    padding: 2rem;
    margin: 0;
}

#product .popup-sort-content li {
    float: left;
    height: 2rem;
    line-height: 2rem;
    clear: both;
    text-transform: none;
    display: block;
    position: relative;
    padding-left: .5rem;
    box-sizing: border-box;
}

#product .popup-sort-content li:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .3rem;
    border-color: transparent;
    border-left-color: #000;
    border-right: 0;
    position: absolute;
    left: -.4rem;
    top: 0;
    bottom: 0;
    margin: auto;
    display: none;
}

#product .popup-sort-content li:hover {
    text-decoration: underline;
    cursor: pointer;
}

#product .popup-sort-content li.active {
    font-family: fontB;
}

#product .popup-sort-content li.active:before {display: block}



#product .popup-filter-content {
    width: 40rem;
    padding: 4rem;
}

#product .popup-filter-content * {font-size: 1rem}

#product .popup-filter-content>* {
    width: 100%;
    float: left;
    clear: both;
    margin-bottom: 1.5rem;
}

#product .popup-filter-content div:last-of-type {
    margin-top: 2rem;
    margin-bottom: 0;
}

#product .popup-filter-content input[type=text] {
    border: none;
    border-bottom: dotted .1rem #999;
    margin-top: 1.4rem;
    padding-left: .5rem;
    box-sizing: border-box;
}

#product .popup-filter-content div * {float: left}


#product .popup-filter-content div>span:nth-of-type(1) {
    width: 8rem;
    height: 4rem;
    line-height: 4rem;
    text-align: right;
    text-transform: uppercase;
    margin-right: 2rem;
}


#product .popup-filter-content .sex input {display: none}

#product .popup-filter-content .sex label {
    margin-right: 4rem;
}

#product .popup-filter-content .sex label span {
    height: 4rem;
    line-height: 4rem;
    padding-left: 2.5rem;
    position: relative;
}

#product .popup-filter-content .sex label span:before,
#product .popup-filter-content .sex label span:after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#product .popup-filter-content .sex label span:before {
    width: 1.6rem;
    height: 1.6rem;
    margin: 1.2rem .5rem 1.2rem 0;
    border-radius: .8rem;
    border: solid .1rem #999;
    box-sizing: border-box;
    left: 0;
}

#product .popup-filter-content .sex label span:after {
    width: .8rem;
    height: .8rem;
    border-radius: .4rem;
    background: #000;
    left: .4rem;
    display: none;
}

#product .popup-filter-content .sex input:checked + span:after {display: block}


#product .popup-filter-content .price label {
    width: calc((100% - 10rem)/2);
    width: -moz-calc((100% - 10rem)/2);
    width: -webkit-calc((100% - 10rem)/2);
    float: left;
}

#product .popup-filter-content .price label span {
    float: left;
    line-height: 2rem;
    padding-left: 2rem;
    box-sizing: border-box;
    position: relative;
}

#product .popup-filter-content .price label span:before,
#product .popup-filter-content .price label span:after {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#product .popup-filter-content .price label span:before {
    width: 1.2rem;
    height: 1.2rem;
    border: solid .1rem #999;
    border-radius: .6rem;
    left: 0;
}

#product .popup-filter-content .price label span:after {
    width: .6rem;
    height: .6rem;
    border-radius: .3rem;
    background: #000;
    left: .3rem;
    display: none;
}

#product .popup-filter-content .price label input:checked + span:after {display: block}


#product .popup-filter-content .price input {display: none}



#product .popup-filter-content .stuff select {
    height: 3rem;
    margin-top: 0.5rem;
    border: solid .1rem #999;
    padding: 0 1rem;
    box-sizing: border-box;
}


#product .popup-filter-content .color input {display: none}

#product .popup-filter-content .color label {
    width: 1.5rem;
    height: 1.5rem;
    border: solid .1rem #999;
    margin-top: 1.2rem;
    margin-left: 2rem;
    position: relative;
}

#product .popup-filter-content .color label:first-of-type {margin-left: 0}

#product .popup-filter-content .color label:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .5rem;
    border-color: transparent;
    border-top-color: #000;
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    margin: auto;
    display: none;
}

#product .popup-filter-content .color input:checked+label {border-color: #000}
#product .popup-filter-content .color input:checked+label:before {display: block}


#product .popup-filter-content .color label[for*=black] {background: black}
#product .popup-filter-content .color label[for*=red] {background: red}
#product .popup-filter-content .color label[for*=green] {background: green}
#product .popup-filter-content .color label[for*=blue] {background: blue}
#product .popup-filter-content .color label[for*=cyan] {background: cyan}
#product .popup-filter-content .color label[for*=yellow] {background: yellow}
#product .popup-filter-content .color label[for*=magenta] {background: magenta}
#product .popup-filter-content .color label[for*=white] {background: white}


#product .popup-filter-content .menu>* {
    width: auto;
    height: 3rem;
    line-height: 3rem;
    padding: 0 2rem;
    float: left;
    background: #fff;
    border: solid .1rem #999;
    text-transform: uppercase;
    margin-left: 4rem;
}

#product .popup-filter-content .menu label:first-of-type {margin-left: 0}

#product .popup-filter-content .menu input {display: none}

/*
----------------------------------------------
    PRODUCT DETAIL
----------------------------------------------
*/

#product-detail section {clear: none}

#product-detail section>* {
    float: left;
    clear: both;
    width: 100%;
}

#product-detail .L {
    float: left;
    width: calc(100% - 28rem);
    width: -moz-calc(100% - 28rem);
    width: -webkit-calc(100% - 28rem);
}

#product-detail .R {
    float: right;
    width: 25rem;
    transition: .5s ease-out;
    position: fixed;
    right: 4rem;
    top: 15rem;
}

#product-detail .R[state=move] {top: 3rem}



#product-detail .image {
    float: left;
    width: 100%;
    margin-bottom: 2rem;
    cursor: zoom-in;
}


#product-detail .images span {
    width: calc((100% - 2rem)/2);
    width: -moz-calc((100% - 2rem)/2);
    width: -webkit-calc((100% - 2rem)/2);
    overflow: hidden;
    float: left;
}

#product-detail .images span:not(:nth-child(1)):not(:nth-child(2)) {margin-top: 2rem}

#product-detail .images span:nth-child(2n+2) {float: right}

#product-detail .images span label {float: left; cursor: zoom-in}



#product-detail .other {
    margin-top: 10rem
}

#product-detail .other * {float: left}

#product-detail .other>label {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 2rem;
    font-family: fontB;
    font-weight: normal;
    margin-bottom: 3rem;
}

#product-detail .other a {
    width: calc((100% - 6rem)/4);
    width: -moz-calc((100% - 6rem)/4);
    width: -webkit-calc((100% - 6rem)/4);
    margin: 0 1rem;
}

#product-detail .other a:nth-of-type(1) {margin-left: 0}
#product-detail .other a:nth-of-type(4) {margin-right: 0}

#product-detail .other a * {font-size: 1rem}



#product-detail .R>* {
    float: left;
    clear: both;
    width: 100%;
}

#product-detail .R img {
    max-width: 100%;
    height: auto;
}

#product-detail .R h1 {
    font-weight: normal;
    font-size: 1.4rem;
    font-family: fontL;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 1rem;
}


#product-detail .R .price {margin-top: 3rem}

#product-detail .R .price span:first-of-type label {
    float: left;
    clear: both;
    font-size: 1.6rem;
    line-height: 2rem;
}

#product-detail .R .price .price-old {
    font-size: 1.2rem !important;
    color: #999;
    text-decoration: line-through;
    font-family: fontL;
}

#product-detail .R .price span:last-of-type {
    float: right;
}

#product-detail .R .price span:last-of-type button {
    float: left;
    width: 2rem;
    height: 2rem;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    border:none;
    cursor: pointer;
}

#product-detail .R .price .share {background-image: url('image/icon-share.png')}
#product-detail .R .price .favourite {background-image: url('image/icon-favourite.png')}
#product-detail .R .price .favourite[state=active] {background-image: url('image/icon-favourite-active.png')}

#product-detail .R .price span:last-of-type button:first-of-type {
    margin-right: 1rem;
}



#product-detail .R .info {
    margin-top: 3rem;
    text-align: center;
}

#product-detail .R .info,
#product-detail .R .info span {position: relative}

#product-detail .R .info span {
    height: 4rem;
    line-height: 4rem;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
}

#product-detail .R .info span:nth-of-type(1) {float: left}
#product-detail .R .info span:nth-of-type(3) {float: right}

#product-detail .R .info span[state=true],
#product-detail .R .info span:hover {
    text-decoration: underline;
    cursor: pointer;
}


#product-detail .R .info span[state=true]:after,
#product-detail .R .info span[state=true]:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .6rem;
    border-color: transparent;
    border-bottom-color: #ccc;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

#product-detail .R .info span[state=true]:after {
    border-bottom-color: #fff;
    bottom: -.1rem;
}


#product-detail .R .info>div {
    width: 100%;
    height: auto;
    padding: 3rem;
    background: #fff;
    border: solid .1rem #ccc;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: .5s;
    position: absolute;
    top: 4rem;
    left: 0;
}

#product-detail .R .info>div>div {
    width: 100%;
    max-height: 26rem;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    padding-right: .5rem;
    box-sizing: border-box;
}

#product-detail .R .info>div>div * {float: none}

#product-detail .R .info span[state=true]+div {
    visibility: visible;
    opacity: 1;
}



#product-detail .R .buy {
    height: 5rem;
    background: #000;
    border: none;
    color: #fff;
    text-transform: uppercase;
    margin-top: 3rem;
}

#product-detail .R .buy:hover {background: #666}



#product-detail .R .contact {margin-top: 4rem}

#product-detail .R .contact>* {
    float: left;
    clear: both;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}

#product-detail .R .contact span {
    font-size: 2.5rem;
    font-family: fontB;
    margin-top: .5rem;
}


#product-detail .R .utilities {
    margin-top: 2rem;
    text-align: left;
}





#article a {
    float: left;
    clear: both;
    width: 100%;
    margin-top: 4rem;
}

#article a:first-of-type {margin-top: 0}

#article a * {float: left}

#article a div:nth-of-type(1) {
    width: 5rem;
    height: 5rem;
}

#article a div:nth-of-type(2) {
    width: calc(100% - 5rem);
    width: -moz-calc(100% - 5rem);
    width: -webkit-calc(100% - 5rem);
    padding-left: 2rem;
    box-sizing: border-box;
}

#article a div:nth-of-type(2)>span {
    float: left;
    clear: both;
    width: 100%;
}

#article a div:nth-of-type(2)>span:first-of-type {
    text-transform: uppercase;
    font-size: 1.6rem;
    margin-bottom: .5rem;
}

#article a div:nth-of-type(2)>span:last-of-type {color: #333}



#article-detail h1 {
    width: calc(100% - 4rem);
    float: left;
    font-size: 2rem;
    font-weight: normal;
    font-family: fontB;
    text-transform: uppercase;
    margin-top: 0;
    padding-top: 0;
}

#article-detail .share {
    width: 1.5rem;
    height: 1.5rem;
    float: right;
    border: none;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('image/icon-share.png');
    cursor: pointer;
}


#article-detail img {
    max-width: 100%;
	height: auto !important
}



#contact {
    width: 60rem;
    margin: 5rem;
    padding: 2rem;
    box-sizing: border-box;
}

#contact .left {
    width: 30%;
    float: left;
}

#contact .left>div,
#contact .left>div>span {
    float: left;
    clear: both;
    width: 100%;
    text-align: right;
}

#contact .left>div {margin-top: 2.3rem}

#contact .left>div:first-of-type {
    font-size: 5rem;
    font-family: fontB;
    text-transform: uppercase;
    letter-spacing: .5rem;
    margin-top: 0;
    padding-right: 0;
    border-right: none;
    line-height: 0.8;
}

#contact .left>div{
    border-right: solid .5rem #000;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

#contact .left>div>span:first-of-type {
    font-size: 2rem;
    font-family: fontM;
    text-transform: uppercase;
    margin-bottom: .3rem;
    letter-spacing: .1rem;
}

#contact .left div:last-of-type a {
    width: 3rem;
    height: 3rem;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
}

#contact .left div:last-of-type .fanpage {background-image: url('image/contact-facebook.png')}
#contact .left div:last-of-type .youtube {background-image: url('image/contact-youtube.png')}

#contact .left div:last-of-type a:last-of-type {margin-left: 2rem}




#contact .right {
    width: 70%;
    float: right;
}

#contact form {
    width: 85%;
    float: right;
}

#contact form>* {
    float: left;
    clear: both;
    width: 100%;
}

#contact form div>* {
    float: left;
    clear: none;
}

#contact form div>input:nth-of-type(1) {width: 60%}
#contact form div>input:nth-of-type(2) {width: 38%; float: right}

#contact form input,
#contact form textarea {
    border: solid .1rem #ccc;
    box-sizing: border-box;
    transition: .5s ease-out;
}

#contact form input:focus,
#contact form textarea:focus {
    color: #000;
    font-size: 1.4rem;
    border-color: #000;
}

#contact form input {
    height: 4rem;
    margin-bottom: 2rem;
    padding: 0 1.5rem;
}

#contact form textarea {
    height: 10rem;
    padding: 2rem;
}

#contact form button {
    height: 6rem;
    margin-top: 3rem;
}



#contact.about .right {
    width: 60%;
    height: 32rem;
    float: right;
    text-align: left;
    overflow-y: auto;
}

#contact.about .right img {
    max-width: 100%;
    height: auto !important;
}




#basket .divTable {
    display: table;
    width: 100%;
}

#basket .divTable>div {display: table-row}
#basket .divTable>div>span {
    display: table-cell;
    padding: 1.5rem 1rem;
    vertical-align: middle;
}

#basket .divTable .head span {
    text-transform: uppercase;
    font-family: fontM;
    border-top: dotted .1rem #999;
    border-bottom: dotted .1rem #999;
    height: 3rem;
}


#basket .divTable span {text-align: right}
#basket .divTable span:nth-child(1) {width: 5rem; text-align: center}
#basket .divTable span:nth-child(2) {text-align: left}
#basket .divTable span:nth-child(3) {width: 8rem}
#basket .divTable span:nth-child(4) {width: 8rem}
#basket .divTable span:nth-child(5) {width: 10rem}
#basket .divTable span:nth-child(6) {width: 5rem}

#basket .divTable img {
    max-width: 100%;
    max-height: 100%;
}

#basket .divTable a:hover span:first-of-type {text-decoration: underline}

#basket .divTable input {
    width: 4rem;
    border: none;
    border-bottom: dotted .1rem #000;
}

#basket .divTable span:nth-child(2) * {float: left}

#basket .divTable span:nth-child(2) span {
    float: left;
    clear: both;
    width: 100%;
    text-align: left;
}

#basket .divTable span:nth-child(2) span:first-of-type {
    text-transform: uppercase;
    margin-bottom: .5rem;
}

#basket .divTable span:nth-child(2) span:last-of-type {
    color: #666;
    font-size: 1rem;
}


#basket .divTable span:nth-child(6) label {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    cursor: pointer;
}

#basket .sum {
    padding: 4rem 0;
    border-top: dotted .1rem #999;
}

#basket .sum button {
    height: 5rem;
    float: right;
}

#basket .sum div {float: left}

#basket .sum div>span {
    height: 5rem;
    line-height: 5rem;
    text-transform: uppercase;
    float: left;
}

#basket .sum div>span:nth-of-type(2) {
    font-size: 2rem;
    font-family: fontM;
    margin-left: 2rem;
}

#basket-complete {
    padding: 6rem;
    box-sizing: border-box;
}

#basket-complete>span {
    width: 100%;
    float: left;
    clear: both;
    text-align: center;
    font-size: 1.4rem;
}

#basket-complete>span:first-of-type {
    text-transform: uppercase;
    font-family: fontB;
    margin-bottom: 1rem;
}




#payment {
    width: 65rem;
    padding: 6rem;
    box-sizing: border-box;
}

#payment>section>* {
    float: left;
    clear: both;
    width: 100%;
}

#payment>section>label {
    font-size: 2rem;
    text-transform: uppercase;
    font-family: fontB;
    margin-bottom: 3rem;
}


#payment .left {
    width: 40%;
    float: left;
}


#payment .left *:not(br) {
    float: left;
    text-align: left
}


#payment .left>div:not(:nth-of-type(1)) {margin-top: 2rem}

#payment .left>div>* {
    clear: both;
    width: 100%;
}

#payment .left>div>label {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    text-transform: uppercase;
    font-family: fontB;
    position: relative;
    box-sizing: border-box;
    margin-bottom: .5rem;
}


#payment .left .bank select {
    width: 100%;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
}

#payment .left .bank>div {
    clear: both;
    width: 100%;
    display: none;
}

#payment .left .bank>div[state=true] {display: block}

#payment .left .bank span {margin-bottom: .3rem}

#payment .left .bank span:first-of-type {color: #666}

#payment .left .bank span:first-of-type:after {
    content: ':';
    margin: 0 .5rem 0 .2rem;
}


#payment .right {
    width: 50%;
    float: right;
}

#payment .right label,
#payment .right>div:first-of-type {margin-top: 0}

#payment .right>* {
    float: left;
    clear: both;
    width: 100%;
    margin-top: 1rem;
}

#payment .right input {
    border: solid .1rem #999;
    padding: 1rem;
    box-sizing: border-box;
    transition: .5s ease-out;
}

#payment .right input:focus {
    border-color: #000;
    color: #000;
}


#payment .right div input {float: left; clear: none}
#payment .right div input:first-of-type {width: 60%}
#payment .right div input:last-of-type {width: 35%; float: right}

#payment .right button {
    height: 5rem;
    margin-top: 4rem;
}



#payment .sex * {float: left}

#payment .sex>span {
    width: 6rem;
    line-height: 3rem;
    text-align: left;
}

#payment .sex input {display: none}

#payment .sex label {margin-right: 1.8rem}
#payment .sex label:last-of-type {margin-right: 0}

#payment .sex label span {
    height: 3rem;
    line-height: 3rem;
    padding-left: 2.5rem;
    position: relative;
}

#payment .sex label span:before,
#payment .sex label span:after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#payment .sex label span:before {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .8rem;
    border: solid .1rem #999;
    box-sizing: border-box;
    left: 0;
}

#payment .sex label span:after {
    width: .8rem;
    height: .8rem;
    border-radius: .4rem;
    background: #000;
    left: .4rem;
    display: none;
}

#payment .sex input:checked + span:after {display: block}





#request {
    width: 70rem;
    margin: 5rem;
    padding: 2rem;
    box-sizing: border-box;
}

#request>label {
    float: left;
    clear: both;
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    font-family: fontB;
    margin-bottom: 4rem;
    line-height: 1.5;
}

#request section {width: 45%}

#request section>* {
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 2rem;
}


#request input,
#request textarea {
    border: solid .1rem #ccc;
    box-sizing: border-box;
    transition: .5s ease-out;
}

#request input {
    height: 4rem;
    padding: 0 1.5rem;
}

#request textarea {
    height: 10rem;
    padding: 1rem 2rem;
    resize: none;
}


#request input:focus,
#request textarea:focus {
    color: #000;
    font-size: 1.4rem;
    border-color: #000;
}


#request .images>label {
    float: left;
    width: calc((100%/14) - .5rem);
    width: -moz-calc((100%/14) - .5rem);
    width: -webkit-calc((100%/14) - .5rem);
    height: 4rem;
    background-color: #ccc;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 .25rem .5rem .25rem;
    position: relative;
}

#request .images>label:first-of-type {
    background-color: #000;
    background-image: url('image/icon-image.png');
    background-size: auto 40%;
    cursor: pointer;
}

#request .images>label>span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    opacity: 0;
    transition: .5s ease-out;
}

#request .images>label>span:before,
#request .images>label>span:after {
    width: 1.6rem;
    height: .2rem;
    background: #fff;
}

#request .images>label:hover span {opacity: 1}


#request .images>label input {display: none}


#request button {
    width: 100%;
    height: 6rem;
    font-size: 1.4rem;
    font-family: fontL;
    margin-top: 4rem;
}

#request .left {float: left}

#request .right {float: right}

#request .right .name input {
    float: left;
    clear: none;
}

#request .right .name input:nth-of-type(1) {width: 57%}
#request .right .name input:nth-of-type(2) {width: 40%; float: right}