html,body {
	padding: 0;
	margin: 0;
	height: 200%;
}

.menu {
	width: 100%;
    height: 50px;
}

.header {
	padding: 0 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    height: 3.125rem;
    max-height: 3.125rem;
    position: fixed;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    border-bottom: 0.0625rem solid rgb(233, 236, 239);
}

.topbar {
	display: flex;
	padding: 9px 0px 9px 48px;
}

.header-topbar-left {
	flex: 1;
	margin-right: 0.875rem;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: start;
}

/*.logo {*/
/*	width: 124px;*/
/*    height: 28px;*/
/*    background-repeat: no-repeat;*/
/*    background-position: 50%;*/
/*    background-size: 100% 100%;*/
/*    cursor: pointer;*/
/*	background-image: url("../img/icon-logo.e3ce24f316fb81dbde1cafc3bf956080.svg");*/
/*}*/

.logo {
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
    cursor: pointer;
    background-image: url("../img/logo.png");
}

.logo-text {
    margin-left: 10px;
}

.logo-text span {
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    color: #169a7f;
}

.header-topbar-right {
	display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: end;
}

.btn-release,.btn-login {
	padding: 0px 0.825rem;
    appearance: none;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    width: auto;
    border-radius: 0.5rem;
    font-weight: 600;
    position: relative;
    line-height: 1;
    font-size: 0.875rem;
    user-select: none;
    cursor: pointer;
    border: 0.0625rem solid transparent;
    color: rgb(51, 51, 51);
    background: rgb(241, 242, 248);
    height: 1.875rem;
    margin-left: 12px;
}

.btn-release,.btn-login span {
	white-space: nowrap;
    height: 100%;
    overflow: hidden;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 14px;
}

/**
 * 搜索&轮播
*/

.content {
    padding: 0 64px;
}

.box-show {
    display: flex;
    width: 100%;
    min-height: 200px;
}

.search {
    width: 37%;
    align-items: center;
    display: flex;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlnaHQ9IjI3MCIgdmlld0JveD0iMCAwIDQ1MCAyNzAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF80MzUzXzk2OTYzKSI+CjxtYXNrIGlkPSJtYXNrMF80MzUzXzk2OTYzIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDUwIiBoZWlnaHQ9IjQ5OCI+CjxyZWN0IHdpZHRoPSI0NTAiIGhlaWdodD0iNDk4IiBmaWxsPSJ3aGl0ZSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfNDM1M185Njk2MykiPgo8ZyBvcGFjaXR5PSIwLjUiIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfNDM1M185Njk2MykiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1NC4yNzIgMTQuNTU1M0MxNzMuNjUgMTMuNDAwNSAxOTUuNjQ2IDEyLjUwNSAyMDguMDU3IDI4LjY1MzRDMjIwLjY0MiA0NS4wMjggMjE2LjkyNSA2OC43Mjg2IDIxMS42ODggODkuMjU5OUMyMDYuODExIDEwOC4zODIgMTk3LjAxNSAxMjUuNDc5IDE4MC45MzMgMTM0Ljk5NkMxNjMuNzA5IDE0NS4xODggMTQzLjAwNyAxNDkuMzU2IDEyNS4xODYgMTQwLjQ0N0MxMDcuMDY2IDEzMS4zODkgOTUuNDYzNyAxMTEuNzQgOTEuODk3NSA5MC40ODQ5Qzg4LjUyMTUgNzAuMzYzOSA5NC44OCA0OS45MzI3IDEwNy40MzUgMzQuNjQ5N0MxMTkuMTc1IDIwLjM1OCAxMzYuNjMgMTUuNjA2NyAxNTQuMjcyIDE0LjU1NTNaIiBmaWxsPSIjMkRDQkE1Ii8+CjwvZz4KPGcgb3BhY2l0eT0iMC41IiBmaWx0ZXI9InVybCgjZmlsdGVyMV9mXzQzNTNfOTY5NjMpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNTIuMTE5IDIxLjAwMDNDMjcxLjkyNyAyMC45MTI1IDI4NC41MDUgNDEuOTkwMiAyOTYuMTk0IDU5LjM1NDhDMzA3LjAyOSA3NS40NTExIDMxNi4zODcgOTMuMDgwNyAzMTMuOTQxIDExMi44NEMzMTEuMTk5IDEzNC45OCAzMDEuNjQ4IDE1Ny43MjUgMjgyLjg4MSAxNjYuODc4QzI2NC41MDEgMTc1Ljg0MSAyNDQuMDQxIDE2Ni4wOCAyMjYuMzg1IDE1NS41NDFDMjEwLjIwNCAxNDUuODgyIDE5NS40MjEgMTMyLjEyOSAxOTEuNzUxIDExMi40OEMxODguMTcgOTMuMzA3OCAxOTcuOTk5IDc1LjY0NTEgMjA4LjQ5MiA1OS43NDMzQzIyMC4wMDQgNDIuMjk4MSAyMzIuMzU0IDIxLjA4NzggMjUyLjExOSAyMS4wMDAzWiIgZmlsbD0iIzQ5QjJGRiIvPgo8L2c+CjwvZz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9mXzQzNTNfOTY5NjMiIHg9Ii0zNyIgeT0iLTExNCIgd2lkdGg9IjM4MS41NTYiIGhlaWdodD0iMzg3LjMyNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI2NCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzQzNTNfOTY5NjMiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjFfZl80MzUzXzk2OTYzIiB4PSI2MyIgeT0iLTEwNyIgd2lkdGg9IjM3OS4zMzMiIGhlaWdodD0iNDA1LjM5OCIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI2NCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzQzNTNfOTY5NjMiLz4KPC9maWx0ZXI+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNDM1M185Njk2MyI+CjxyZWN0IHdpZHRoPSI0NTAiIGhlaWdodD0iMjcwIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
}

.search-input {
    width: 95%;
    position: relative;
}

.search-input input {
    width: 100%;
    height: 44px;
    border: 3px solid #169a7f;
    border-radius: 0.375rem;
    padding: 0 12px;
    outline: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgba(0,0,0,.8);
}

.search-btn {
    position: absolute;
    right: 7px;
    top: 7px;
    cursor: pointer;
}

.search-btn button {
    background: #169a7f;
    padding: 5px 20px;
    outline: none;
    border: 0px solid #000;
    border-radius: 3px;
}

.search-btn span {
    font-size: .875rem;
    line-height: 1.25rem;
    color: #ffffff;
}


.banner {
    flex: 1 1 0%;
    display: flex;
    overflow: hidden;
}

.banner img {
    width: 100%;
    border-radius: 10px;
}


/**
 * 列表
*/

.box-list {
    width: 100%;
    margin-top: 40px;
}

.box-list-title span {
    font-size: 22px;
}

.box-type {
    width: 100%;
    margin-top: 20px;
}

.box-type-btn {
    border: 0;
    background: #FFF;
    border-radius: 15px;
    color: #000;
    padding: 0.25rem 0.75rem; 
    font-size: .875rem;
    line-height: 1.25rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.box-type-btn:hover {
    background: #ecedf5;
}

.box-type-btn-active {
    border: 0;
    background: #000;
    border-radius: 15px;
    color: #FFF;
    padding: 0.25rem 0.75rem; 
    font-size: .875rem;
    line-height: 1.25rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer; 
}

.box-type-btn-active:hover {
    background: #000;
}

.box-list-content {
    width: 100%;
    margin-top: 1.5rem;
    font-size: 0;
}

.box-list-item {
    width: 25%;
    font-size: 16px;
    cursor: pointer;
}

.item-box {
    position: relative;
    margin-right: 15px;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 10px;
}

.item-img {
    width: 100%;
    border-radius: 10px;
    transition-duration: .5s;
    background: #f0f0f0;
}

.item-img:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1.1) scaleY(1.1);
    transition-duration: .5s;
}

.item-text {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #000);
    padding: 15px;
}

.item-title {
    display: inline-block;
}

.item-title span {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px #00000080;
}

.item-content {
    display: flex;
    margin-top: 10px;
}

.item-head {
    display: inline-block;
}

.item-head img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.item-name {
    margin-left: 5px;
}

.item-name span {
    font-size: .75rem;
    line-height: 1.2rem;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px #00000080;
}