/* red: #e70c0c */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
a,a:visited,a:active,a:focus{color:inherit;text-decoration:none;}
a:hover{color:#e70c0c;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
dd{margin:0;}
input:focus, textarea:focus, button:focus{outline:none;}
img{border:none;vertical-align:bottom;}
.clear-both{clear:both;}
.clear-both::after{
    content:'';
    display: block;
    clear:both;
}
.hide{display:none;}
.arrow{position:relative;}
.arrow::before,
.arrow::after{
    content:'';
    position:absolute;
    bottom:0;right:0;
    width: 11px;height:2px;
    box-shadow: inset 0 0 0 32px;
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -ms-transform-origin: right;
    transform-origin: right;
    z-index: 2;
    pointer-events: none;
}
.arrow::after{
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.pc-visible{display:unset;}
.mobile-visible{display:none;}
a.count-badge[data-count]{position: relative;display:inline-block;}
a.count-badge[data-count]::after{
    content:attr(data-count);
    background-color: #e70c0c;
    color:#fff;
    border-radius: 5em;
    margin-left:.25em;
    padding:0 .5em;
    position: absolute; top: -.7em; right: -.7em;
}
body{
    margin:0;
    font-size:16px;
    color:#666;
    font-weight: normal;
    font-family: sans-serif;
    background-color: #f8f8f8;
}
.main{
    width:1200px;
    margin:auto;
}
.main .kevin-header{
    position:relative;
    margin-bottom: 24px;
}
.main .kevin-header.home{
    margin-bottom: 0;
}
.main .kevin-header .top{
    line-height: 2em;
}
.main .kevin-header .top ul.account{
    font-size: .8em;
    text-align :right;
}
.main .kevin-header .top ul.account>li{
    display:inline-block;
    margin:0 .5em;
}
.main .kevin-header .top ul.account>li:last-child{
    margin-right:0;
}
.main .kevin-header .top ul.account>li>a[data-count]::after{position: static;}
.main .kevin-header .kevin-container>div{
    float:left;
    height:100%;
}
.main .kevin-header .kevin-container .logo{
    width:300px;
}
.main .kevin-header .kevin-container .logo img{
    max-width:300px;
}
.main .kevin-header .kevin-container #menu-trigger{display:none;}
.main .kevin-header .kevin-container .search{
    width:800px;
    padding:1.5em;
    position: relative;
}
.main .kevin-header .kevin-container .search .box input{
    font-size:1em;
    padding:.5em;
    width:650px; height:2em;
    border:1px solid #e4e4e4; border-right:none;
    border-radius: 5px 0 0 5px;
}
.main .kevin-header .kevin-container .search .box button{
    font-size:1em;
    width:50px; height:2em;
    border:none; border-radius: 0 5px 5px 0;
    background-color: #e70c0c; color:#fff;
    vertical-align: top;
    cursor: pointer;
}
.main .kevin-header .kevin-container .search .box button i{
    color:#fff;
    transform: scale(.7) rotate(-45deg) translate(-3px, -4px);
}
.main .kevin-header .kevin-container .search .keyword dl{
    margin:0;
    color:#db6262;
    font-size:.8em;
}
.main .kevin-header .kevin-container .search .keyword dt{
    display:inline;
    margin-right:1em;
    font-weight: bold;
}
.main .kevin-header .kevin-container .search .keyword dd{
    display:inline;
    margin-right:1em;
    font-weight: lighter;
}
.main .kevin-header .kevin-container .search .keyword dt::after{
    content:':'
}

#search-result {
    position: absolute; top:56px;
    z-index: 99999;
    background-color: #fff;
    box-shadow: 3px 3px 5px #666;
    width:650px;
    padding:.5em;
}

#search-result li {
    height:4em;
    padding:.5em;
    overflow: hidden;
    border-bottom: 1px dotted #ddd;
}
#search-result li:last-child {
    border-bottom: none;
}

#search-result li a{
    line-height: 3em;
}
#search-result li img {
    max-height:100%; margin-right:1em;
}

.main .kevin-header .kevin-container .qr-code{
    float:right;
    font-size: .8em;
    text-align: center;
    height:auto;
    margin-top:1em;
}
.main .kevin-header .kevin-container .qr-code img{
    max-height: 80px;
}
.main .kevin-header .nav{
    width:100%;
    border-bottom: 3px solid #e70c0c;
    box-shadow: 1000px 0 0 #eee, -1000px 0 0 #eee;
    background-color: #eee;
    position:relative;
}
.main .kevin-header .nav::after{
    content:''; display:block;
    position: absolute;
    bottom:-3px; left:0;
    width:100%; height:3px;
    box-shadow: 1000px 0 0 #e70c0c, -1000px 0 0 #e70c0c;
}
.main .kevin-header .nav a:link, .main .kevin-header .nav a:visited {color:#000;}
.main .kevin-header .nav ul{
    display: table;
    width:100%;
}
.main .kevin-header .nav ul li{
    float:left;
    text-align: center;
    width:calc((100% - 300px) / 3);
    line-height: 36px;
}
.main .kevin-header .nav ul li:first-child{
    width:300px;
    background-color: #e70c0c;
    color:#fff;
    cursor:s-resize;
}

.main .kevin-header.home .nav ul li:first-child{
    cursor:auto;
}
.main .kevin-header dl.menu{
    background-color: #fff;
    color:#444444;
    width:300px;
    margin: 0;
    padding:1em 1em 1em 5.5em;
    font-size:.9em;
    line-height: 2em;
    display:inline-block;

    position: absolute;
    z-index: 888;
    box-shadow: 3px 3px 15px;
}
.main .kevin-header.home dl.menu{
    position: relative;
    box-shadow: none;
}

.main .kevin-header dl.menu dt{
    margin-left:-4.5em;
    font-weight: bolder;
    color:#666;
    position: relative;
    top:0;
    line-height: 1em;
    height:0;
    font-size: 1.1em;
}
.main .kevin-header dl.menu dt:first-child{
    margin-top:-.5em;
}

.main .kevin-header dl.menu dd{
    display: inline-block;
    padding-left:.25em;
}

.main .kevin-header div.slider{width:calc(100% - 300px);float:right;position:relative;}
.main .kevin-header div.slider>ul{list-style:none; padding: 0; margin:0; text-align: center;}
.main .kevin-header div.slider li{display:inline-block;margin:50% 1.5em 0;}
.main .kevin-header div.slider li::after{position: absolute;bottom:5%;z-index:3;content:'';display:block;border:1px solid #666;box-shadow:inset 0 0 1px 1px white; border-radius:50%; width:1em;height:1em;}
.main .kevin-header div.slider li>*{display:block;position:absolute;top:0;left:0;opacity:0;z-index:1;transition:opacity 1s ease-in;overflow:hidden;}
.main .kevin-header div.slider li+li>*{z-index:0;}
.main .kevin-header div.slider li img{max-width: 100%;}
.main .kevin-header div.slider li:hover::after, .main .kevin-header div.slider li.active::after{background-color: #666;}
.main .kevin-header div.slider li.active>*{opacity:1;z-index:2;}

.main .body .new-list{
    position: relative;
    padding: 2em 0;
    background-color: #fff;
    box-shadow: 1000px 0 0 #fff, -1000px 0 0 #fff;
}
.main .body .new-list>.title{
    position: relative;
    text-align: center;
}
.main .body .new-list>.title::before{
    content:'';
    position: absolute;
    top:50%;left:0;
    width:100%;
    height:1px;
    background-color: #e70c0c;
}
.main .body .new-list>.title::after{
    content:'';
    position: absolute;
    top:50%;left:0;
    width:100%;
    height:10px;margin-top: -4px;
    border-color: #e70c0c;
    border-style: none solid;
    border-width: 1px;
}
.main .body .new-list>.title h2{
    display:inline-block;
    font-size: 24px;
    font-weight: lighter;
    background-color: #fff;
    padding: 0 24px;
    margin: 1em;
    position: relative;
}
.main .body .new-list>.title h2::before{
    content: '';
    position: absolute;
    top:50%;left:0;margin-top: -4px;
    background-color: #e70c0c;
    width:10px;height:10px;
    border-radius: 5px;
}
.main .body .new-list>.title h2::after{
    content: '';
    position: absolute;
    top:50%;right:0;margin-top: -4px;
    background-color: #e70c0c;
    width:10px;height:10px;
    border-radius: 5px;
}


/** product list Style: New in **/
ul.kevin-product-list{
    width:100%;
    font-size:.9em;
}
ul.kevin-product-list li{
    float:left;
    margin: -1px -1px 0 0;
    position: relative;
    width:25%;
}
ul.kevin-product-list li.new::before{
    content:"新品";
    position: absolute;
    top:1em;left:1em;
    color:#e70c0c;
    padding-bottom: .5em;
    border-bottom: 1px solid;
    z-index: 3;
}
ul.kevin-product-list li::after{
    content:"";
    position: absolute;
    bottom:21px;right:25px;
    font-size:1.5em;
    border: 2px solid #ddd;
    width:1.5em; height:1.5em;
    border-radius: 50%;
    z-index: 1;
}
ul.kevin-product-list li:hover::after{
    border: none;
    border-radius: 50%;
    background-color: #81A8D7;
    pointer-events: none;
}
ul.kevin-product-list li .product-item{
    display:block;
    width:100%;height:100%;
    padding:20px;
    border: 1px solid #f4f4f4;
}
ul.kevin-product-list li .product-item:hover{
    padding:19px;
    border: 2px solid #81A8D7;
    z-index:2;
}
ul.kevin-product-list li .product-item img{
    display: block;
    margin:auto;
}
ul.kevin-product-list li .product-item .title{
    margin-top:1em;
    padding:1em 0;
    border-top: 2px dotted #f4f4f4;
    height:5em;
}
ul.kevin-product-list li .product-item div.price{
    height:5em;
    position: relative;
}
ul.kevin-product-list li .product-item .arrow::before,
ul.kevin-product-list li .product-item .arrow::after{
    color:#ccc;
    bottom:15px;right:15px;
}
ul.kevin-product-list li:hover .product-item div.price::before,
ul.kevin-product-list li:hover .product-item div.price::after{
    color:#fff;
}
ul.kevin-product-list li .product-item div.price span{
    display: block;
    font-size: 1.5em;
    height:1em;
    color:#e70c0c;
    position: relative;
}
ul.kevin-product-list li .product-item div.price span.old{
    color: #bbb;
    font-size: 1em;
    height:1em;
    text-decoration-line: line-through;
}
/** End of product list **/

ul.kevin-product-list li>button, div.floor ul.list li>button {
    position: absolute;
    bottom: 13px;
    right: 80px;
    font-size: 2em;
    background-color: transparent;
    border: none;
    color: #ccc;
}
div.floor ul.list li>button { right:20px;}
ul.kevin-product-list li>button:hover, div.floor ul.list li>button:hover {
    color:#81A8D7;
}

.main .body .banner{
    box-shadow: 1000px 0 0 #7fa9d3, -1000px 0 0 #7fa9d3;
    position: relative;
}
.main .body .banner span{
    position: absolute;
    top: calc(50% - .5em);
    left: 8em;
    font-size:2em;
    color:rgba(255,255,255,.7);
}
.home-show-RMB[data-rmb]::after{
    content:attr(data-rmb);
    display: inline-block;
    font-size:.5em;
    color:#999;
    padding:2px 4px;
    border:1px solid;
    border-radius: 2px;
    position: absolute;
    top:100%;left:0;
    margin-top:.5em;
}
.home-show-RMB[data-rmb]:hover::after{
    content:'以付款为准';
}

.main .body .floor{
    margin-top:2em;
}
.main .body .floor>.nav{
    padding-bottom:.5em;
}
.main .body .floor>.nav>.title{
    display:inline-block;
    color:#333;
    font-size: 2em;
    margin-right:1.2em;
}
.main .body .floor>.nav>ul{
    display:inline-block;
}
.main .body .floor>.nav>ul::before{
    float:left;
    content:'HOT!';
    color:#e70c0c;
    font-weight: bold;
}
.main .body .floor>.nav>ul>li{
    display: inline-block;
    border-right: 1px solid;
    padding:0 1em;
}
.main .body .floor>.nav>ul>li:last-child{
    border:none;
}
.main .body .floor>.nav>.more{
    float:right;
    padding:.5em 1.5em .5em .5em;
    margin-top:.5em;
    border-radius: .5em;
}
.main .body .floor>.nav>.more:hover{
    background-color:#81A8D7;
    color:#fff;
}
.main .body .floor>.nav>.arrow::before,
.main .body .floor>.nav>.arrow::after{
    bottom:1.1em;
    right:.5em;
}
.main .body .floor>ul.list{
    width:100%;
    border: 1px solid #e6e6e6;
    border-top:4px solid #81A8D7;
    background-color: #fff;
    font-size:.8em;
}
.main .body .floor>ul.list li{
    float:left;
    width:25%;
    border-top:1px solid #e6e6e6;
    position: relative;
}
.main .body .floor>ul.list li>a{
    display:block;
    margin: 2em 2em 2em 0;
    border-left:1px dotted #e6e6e6;
    overflow: hidden;
}
.main .body .floor>ul.list li:nth-child(4n+1)>a{
    border: none;
}
.main .body .floor>ul.list li>a .title{
    height:4em; /* 1.4 * 3row - (1.4 - 1) / 2 */
    line-height: 1.4em;
    overflow: hidden;
    position: relative;
}
.main .body .floor>ul.list li>a .title::after{
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 1.4em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 70%);
}
.main .body .floor>ul.list li>a img{
    max-width: 100px; max-height: 100px;
    min-width: 100px; min-height: 100px;
    margin:1em;
    float:left;
}
.main .body .floor>ul.list li>a div.price{
    float:left;
    margin-top:1em;
}
.main .body .floor>ul.list li>a div.price span{
    display: block;
    font-size: 1.5em;
    height:1em;
    color:#e70c0c;
    position: relative;
    width:100px;
}
.main .body .floor>ul.list li>a div.price span.old{
    color: #bbb;
    font-size: 1em;
    height:1em;
    text-decoration: line-through;
}
.main .body .floor>ul.list li>a div.price span.old::before,
.main .body .floor>ul.list li>a div.price span.old::after{
    content:"\00a0";
}
.main .kevin-footer {
    margin-top:2em;
    padding:2em 0;
    color:#999;
    background-color: #222;
    box-shadow: 1000px 0 0 #222, -1000px 0 0 #222;
}
.main .kevin-footer ul.info {
    display:flex;
    justify-content: space-around;
    padding: 1em 0 3em;
    font-size: 1.2em;
    flex-wrap:wrap;
}
/*
.main .kevin-footer .menu dl{
    text-align: center;
    float:left;
    width:25%;
}
.main .kevin-footer .menu dl dt{
    color:#bbb;
    margin: .5em;
}
.main .kevin-footer .menu dl dd{
    font-size: .8em;
}
*/
.main .kevin-footer .kevin-copyright{
    font-size: .7em;
}

#env-prompt {
    width: 100%;
    height: 100%;
    z-index: 100000;
    position: fixed; top:0; left:0;
    pointer-events: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="350" height="280"><text x="0" y="20" font-size="30" fill="#f80" transform="translate(100) rotate(-30 175 140)">TEST ENV</text></svg>') repeat 1em 1em;
    opacity: .2;
}