/* 颜色取值 */
.color-font1 {
    color: #333;
}
.color-font2 {
    color: #fff;
}
.color-font3 {
    color: #666;
}
.color-font4 {
    color: #3399ff;
}
.color-font5 {
    color: #333;
}

/* 背景色取值 */
.color-bg1 {
    background-color: #333;
}
.color-bg2 {
    background-color: #fff;
}
.color-bg3 {
    background-color: #666;
}
.color-bg4 {
    background-color: #3399ff;
}

/* 字体大小取值 */
.font1 {
    font-size: 16px;
}
.font2 {
    font-size: 14px;
}
.font3 {
    font-size: 18px;
}
.font4 {
    font-size: 12px;
}
.font5 {
    font-size: 24px;
}
.font6 {
    font-size: 32px;
}


/* 清除浮动 */
.clearfix:after{
    content: "";
    height: 0;
    clear: both;
    overflow: hidden;
    display: block;
    font-size: 0;
}

/* 文本省略号 */
.ellipsis {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ellipsis-multi {
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

/* 倒三角 */
.triangle {
    width: 0; 
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid#777;
    display: inline-block;
    margin-left: 4px;
    text-overflow: ellipsis;
    position: relative;
    top: -2px;
}

/* 三角 */
.corner {
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 6px solid transparent;
    border-bottom: 6px solid #fff;
    position: absolute;
    top: -11px;
    left: 10%;
}
.corner::after{
    content: "∧";
    font-size: 20px;
    width: 14px;
    height: 14px;
    position: absolute;
    top: -11px;
    left: -7px;
    color: #d6d6d6;
}

/* 冒泡 */
.bubbling{
    position: absolute;
    top: 2.5em;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, .12);
    white-space: nowrap;
    padding: 8px 18px;
    color: #333;
    font-size: 14px;
    line-height: 22px;
    display: none;
}
.bubbling::before{
    position: absolute;
    border-width: 8px;
    width: 0;
    height: 0;
    content: " ";
    left: 50%;
    transform: translateX(-50%);
    border-color: transparent;
    border-style: outset outset solid;
    border-bottom-color: #dcdcdc;
    top: -16px;
}
.bubbling::after{
    position: absolute;
    border-width: 7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    left: 50%;
    content: " ";
    border-color: transparent;
    border-style: outset outset solid;
    border-bottom-color: #ffff;
    top: -14px;
}

/* 滚动条样式 */
::-webkit-scrollbar-track {
    margin: 0;
}
::-webkit-scrollbar-thumb {
    border: 2px solid #fff;
    border-radius: 6px;
    background-color: #6b708b;
}
::-webkit-scrollbar {
    width: 12px;
}


.mobile-show {
    display: none;
}
.content-in {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
@media screen and (max-width: 1200px){
    .pc-show {
        display: none;
    }
    .mobile-show {
        display: block;
    }
}
/*1700+版心*/
@media screen and (min-width: 1700px) {
    .content-in {
      max-width: 1440px;
    }
}
  
  /*1440版心*/
@media screen and (min-width: 1440px) and (max-width: 1699px) {
    .content-in {
      max-width: 1200px;
    }
}

.load-container{
	width: 50px;
	height: 50px;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.load-container span{
	width: 8px;
	height: 8px;
	background-color: #3399ff;
	position: absolute;
	border-radius: 50%;
	-webkit-animation: load 1.04s ease infinite;
}
@keyframes load {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(.3);
        opacity: 0.5;
    }
}
.load-container span:nth-child(1){
	left: 0;
	top: 50%;
	margin-top: -4px;
	-webkit-animation-delay: 0.13s;
}
.load-container span:nth-child(2){
	left: 5px;
	top:5px;
	-webkit-animation-delay: 0.26s;
}
.load-container span:nth-child(3){
	left: 50%;
	top:0;
	margin-left: -4px;
	-webkit-animation-delay: 0.39s;
}

.load-container span:nth-child(4){
	right: 5px;
	top:5px;
	-webkit-animation-delay: 0.52s;
}
.load-container span:nth-child(5){
	right: 0;
	top: 50%;
	margin-top: -4px;
	-webkit-animation-delay: 0.65s;
}
.load-container span:nth-child(6){
	right: 5px;
	bottom:5px;
	-webkit-animation-delay: 0.78s;
}
.load-container span:nth-child(7){
	left: 50%;
	bottom:0;
	margin-left: -4px;
	-webkit-animation-delay: 0.91s;
}
.load-container span:nth-child(8){
	left: 5px;
	bottom:5px;
	-webkit-animation-delay: 1.04s;
}