:root {
    --var-active: #59a3ff;
    --var-bg: #f9f9f9;
    --d: 700ms;
    --e: cubic-bezier(0.19, 1, 0.22, 1);
    --font-sans: "Rubik", sans-serif;
    --font-serif: "Cardo", serif;
}
/**底线格式**/
.graphic.vline .item{background:#fff;border-bottom: 1px solid #ebebeb;}
.graphic.vline .item img{line-height: 1px;}
/**常用阴影格式**/
.graphic.shadowUp .item{background:#fff;box-shadow:0 4px 20px 5px rgba(68,93,127,0.1);border-radius:4px;transition:box-shadow .3s ease,transform .3s ease;cursor: pointer;}
.graphic.shadowUp .item img{line-height: 1px;}
/**常用阴影格式**/
.graphic.brand .item{background:#fff;box-shadow: 0 4px 20px 5px rgba(68,93,127,0.1);transition: box-shadow .3s ease,transform .3s ease;text-align: center;align-items: center;justify-content: center;display: flex;}
.graphic.brand .item .item-thumb{display: table-cell; vertical-align: middle;}
.graphic.brand .item img{line-height: 1px;max-height: 90px; max-width: 80%;}
.graphic.brand .item:hover{box-shadow:0 2px 14px 2px rgba(68,93,127,0.2);transform:translateY(-2px)}
/**round**/
.graphic.round .item{background:var(--bg-color);box-shadow:0 4px 20px 5px rgba(68,93,127,0.1);border-radius:100px;transition:box-shadow .3s ease,transform .3s ease;cursor: pointer;text-align: center;}
.graphic.round .item img{line-height: 1px;}
.graphic.round .item.on{background:var(--bg-active);color:#ffffff;}
/**常用阴影格式**/
.graphic.icon .item{background:#fff;text-align: center;}
.graphic.icon .item .item-thumb{line-height:1px;}
.graphic.icon .item .item-thumb img{width:60%;}
.graphic.icon .item .item-title{font-size:20px;margin-top:10px;}
/**常用排序格式**/
.graphic.serial .item{ position: relative; background: #fff; box-shadow: 0 2px 18px 2px rgb(217 223 231 / 60%); border-radius: 8px; transition: box-shadow .65s cubic-bezier(.19,1,.22,1); padding:20px 30px 20px 60px; }
.graphic.serial .item:hover{ box-shadow:0 4px 20px 5px rgba(217,223,231,0.8); transition:box-shadow .3s ease,transform .3s ease; transform:translateY(-5px) }
.graphic.serial .item:before { content: attr(data-index); position: absolute; top: 20px; left: 20px; width: 25px; height: 25px; line-height: 25px; font-size: 16px; color: #fff; text-align: center; background-color:var(--var-active); box-shadow: 0 6px 12px 0 rgb(43 123 255 / 30%); border-radius: 4px; }
.graphic.serial .item .item-title{ font-size:20px; }
.graphic.serial .item .item-desc{ font-size:15px; padding:10px 0; color:#aaaaaa; }

/***卡片滚动**/
.graphic.arrowUp .item{width: 100%;background-color: #fff;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);overflow: hidden;-webkit-transition: box-shadow 0.5s;transition: box-shadow 0.5s;}
.graphic.arrowUp .item:hover{box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);}
.graphic.arrowUp .item .item-thumb{height:200px;overflow: hidden;-webkit-transition: height 0.5s;transition: height 0.5s;background:#000;}
.graphic.arrowUp .item:hover .item-thumb{height: 120px;}
.graphic.arrowUp .item img{display: block;opacity: 1;-webkit-transform: scale(1);transform: scale(1);-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s, transform 0.5s;transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;width:100%;height:200px;}
.graphic.arrowUp .item:hover .item-thumb img{opacity: 0.6;-webkit-transform: scale(1.2);transform: scale(1.2);}
.graphic.arrowUp .item .item-body{position: relative;height: 80px;padding: 20px;-webkit-transition: height 0.5s;transition: height 0.5s;}
.graphic.arrowUp .item:hover .item-body{height: 150px;}
.graphic.arrowUp .item .item-body .item-tag{position: absolute;top: -25px;left: 0;height: 25px;padding: 0 15px;background-color: coral;color: #fff;text-transform: uppercase;font-size: 11px;line-height: 25px;}
.graphic.arrowUp .item .item-body .item-title{font-size: 22px;font-weight: bold;text-transform: uppercase;padding-bottom:10px;}
.graphic.arrowUp .item .item-body .item-sub{padding: 0 0 10px 0;font-size: 17px;color: coral;}
.graphic.arrowUp .item .item-desc{position: absolute;left: 20px;right: 20px;bottom: 40px;margin: 0;padding: 0;color: #666C74;line-height: 25px;opacity: 0;-webkit-transform: translateY(45px);transform: translateY(45px);-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;transition: opacity 0.3s, -webkit-transform 0.3s;transition: opacity 0.3s, transform 0.3s;transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;-webkit-transition-delay: 0s;transition-delay: 0s;}
.graphic.arrowUp .item:hover .item-desc{opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.graphic.arrowUp .item .item-footer{position: absolute;bottom: 12px;left: 20px;right: 20px;font-size: 13px;color: #A3A9A2;}
.graphic.arrowUp .item .item-footer span + span {padding-left: 10px;}
.graphic.arrowUp .item .item-footer em{margin-left:5px;}



.animate1 {position: relative;display: flex;align-items: flex-end;overflow: hidden;width: 100%;text-align: center;color: whitesmoke;background-color: whitesmoke;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);height: 250px;}
.animate1:before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 110%;background-size: cover;background-position: 0 0;transition: transform 1050ms cubic-bezier(0.19, 1, 0.22, 1);pointer-events: none;}
.animate1:after {content: "";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 200%;pointer-events: none;background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);transform: translateY(-50%);transition: transform calc(1400ms) cubic-bezier(0.19, 1, 0.22, 1);}
.animate1 .item-thumb{width:100%;position: absolute;top:0;left:0;transition: all .5s ease .1s;}
.animate1 .item-thumb{transform: scale(1.3);}
.animate1 .item-thumb img{width:100%;}
.animate1 .item-body {position: relative;display: flex;flex-direction: column;align-items: center;width: 100%;padding: 1rem;transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1);z-index: 1;}
.animate1 .item-body > * + * {margin-top: 1rem;}
.animate1 .item-title {font-size: 18px;font-weight: 600;}
.animate1 .item-desc{line-height: 25px;font-size:14px;}
.animate1 .item-btn{cursor: pointer;margin-top: 1.5rem;padding: 0.75rem 1.5rem;font-size: 0.65rem;font-weight: bold;letter-spacing: 0.025rem;text-transform: uppercase;color: white;background-color: black;border: none;}
.animate1 .item-btn:hover {background-color: #0d0d0d;}
.animate1 .item-btn:focus {outline: 1px dashed yellow;outline-offset: 3px;}
.animate1 .item-body {transform: translateY(calc(100% - 4.5rem));}
.animate1 .item-body > *:not(.item-title) {opacity: 0;transform: translateY(1rem);transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1), opacity 700ms cubic-bezier(0.19, 1, 0.22, 1);}
.animate1 .item-body, .animate4:focus-within .item-body {transform: translateY(0);}
.animate1 .item-body > *:not(.item-title), .animate4:focus-within .item-body > *:not(.item-title) {opacity: 1;transform: translateY(0);transition-delay: calc(var(--d) / 8);}
.animate1:focus-within:before, .animate4:focus-within:after, .animate4:focus-within .item-body, .animate4:focus-within .item-body > *:not(.item-title) {transition-duration: 0s;}



/***布局管理**/
.layout .item-thumb img{width:100%;}
.layout .item-title {font-size:20px;}
.layout .item-desc {margin-top:30px;font-size:15px;line-height: 25px;}
.layout .item-desc p{margin-bottom: 20px;}
.layout .item-desc p:last-child{margin-bottom:0;}

/****按钮定义***/
.button{display:inline-block;text-align:center;position:relative;overflow:hidden;transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;cursor:pointer;z-index: 1;color:#ffffff;}
.button.arrow{font-size:0;background-color:transparent;}
.button.arrow span{display:inline-block;vertical-align:top;font-size:14px;margin-right:20px;transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease}
.button.arrow:before{content:"";position:absolute;bottom:0;left:0;z-index:2;transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;}
.button.arrow:after{content:"";width:0%;height:100%;position:absolute;left:-2px;top:0;z-index:-1;transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;}
.button.arrow:hover:before{width:100%;}
.button.arrow:hover:after{width:102%;}


/***分割线**/
.divider:before {position: absolute;top: 21px;left: 0;content: ''; width: var(--theme-width);height:2px;background:var(--theme-color);}
.divider:after {position: absolute;top: 21px;right: 0;content: '';width: var(--theme-width);height:2px;background:var(--theme-color);}

/***进度条***/
.progressbar{position: relative;}
.progressval{position: absolute;z-index: 1;}


.scaleDraw{
    animation: scaleDraw 1s infinite linear;
}
@keyframes scaleDraw {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(1.1);
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.1);
    }
}
.medias{position: absolute; width: 100%; z-index: 100; height: 550px;max-width: 100%;}

.floatWin{position: fixed;right:10px;top:40%;text-align: center;padding:10px;z-index: 100;border: 1px solid #ebebeb;border-radius: 5px;line-height: 25px;background: #ffffff;}
.floatWin .item{margin-bottom: 20px;}
.floatWin .item:last-child{margin-bottom: 0;}

.tableBox{
    width:100%;
    border-spacing: 0;
    border: 1px solid #ebebeb;
}
.tableBox td {
    border: 1px solid #ebebeb;
    padding:10px;
}
.tableBox th {
    border: 1px solid #ebebeb;
    padding:15px 10px;
}