* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}

body {
    margin: 0;
    line-height: 1.5;
    font-size: .16rem;
    position: relative;
    background-color: #FFF;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    color: #0C8484;
    font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "PingFang SC", "Hiragino Sans GB", "Neue Haas Grotesk Text Pro", "Microsoft YaHei", "Microsoft JhengHei", sans-serif;
}

.clearfix::before {
    display: table;
    content: "";
}

.clearfix::after {
    display: table;
    clear: both;
    content: "";
}

.float-right {
    float: right !important;
}

.float-left {
    float: left !important;
}

.float-none {
    float: none !important;
}

a {
    text-decoration: none;
    -webkit-transition: color .15s linear;
    transition: color .15s linear;
    color: #0C8484;
}

a:hover {
    color: #888;
}

ul,
li {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

header {
    padding: .1rem 0;
    display: block;
    background: rgba(255, 255, 255, 0.93);
    height: .7rem;
    width: 100%;
    z-index: 99;
}

header .container {
    padding: 0 .5rem;
}

header .logo {
    display: inline-block;
    height: 100%;
    font-size: .3rem;
    color: #0C8484;
}

header .logo i {
    font-size: .4rem;
}

header nav {
    float: right;
}

header nav .menu {
    height: .6rem;
    display: block;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

header nav .menu li {
    font-size: .14rem;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    overflow: hidden;
}

header nav .menu li.active a {
    color: #f15151;
}

header nav .menu li a {
    display: block;
    height: 100%;
    padding: 0 .25rem;
    text-align: center;
    line-height: .55rem;
}

header nav .menu li a .icon {
    font-size: .25rem;
    display: none;
}

header nav .menu li .search {
    height: 100%;
    position: relative;
    display: block;
}

header nav .menu li .search input {
    font-size: .12rem;
    border: 1px solid #dedede;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: .4rem;
    margin: .1rem 0;
    padding: 0 .1rem;
    outline: none;
    width: 1.68rem;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

header nav .menu li .search input:focus {
    margin-left: 0;
    opacity: 1;
    border: 1px solid #a7afef;
}

header nav .menu li .search input:focus+.search-btn .icon {
    color: #a7afef;
}

header nav .menu li .search .search-btn {
    border: none;
    position: absolute;
    right: .05rem;
    top: -0.04rem;
    padding: .05rem;
    background: transparent;
    outline: none;
    cursor: pointer;
}

header nav .menu li .search .search-btn .icon {
    display: block;
    color: #dedede;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

html {
    font-size: 100px;
}

@media only screen and (max-width: 768px) {
    html {
        font-size: 115px;
    }
    html .holder {
        height: .65rem;
    }
    html header {
        text-align: center;
    }
    html header .container {
        padding: 0 !important;
    }
    html nav {
        float: none;
    }
    html nav .menu {
        position: absolute;
        top: .65rem;
        left: 0;
        width: 100%;
        display: none !important;
        transition: all .5s ease;
    }
    html nav .menu {
        display: block !important;
        z-index: 2;
    }
    html nav .menu li {
        background: rgba(255, 255, 255, 0.9);
        width: 33.33%;
    }
    html nav .menu li .text {
        display: none;
    }
    html nav .menu li .icon {
        display: inline-block !important;
    }
    html nav .menu li.search-wrap {
        width: 100%;
        padding: 0 .1rem;
    }
    html nav .menu li.search-wrap input {
        width: 100%;
    }
}

@media only screen and (max-width: 640px) {
    html {
        font-size: 110px;
    }
    html .item {
        width: 100% !important;
    }
    html .item .card .mark,
    html .item .card .description,
    html .item .card .options {
        opacity: 1 !important;
    }
    html .sub {
        display: none;
    }
}

@media only screen and (max-width: 480px) {
    html {
        font-size: 100px;
    }
}

@media only screen and (max-width: 320px) {
    html {
        font-size: 85px;
    }
}