/*
    组图alt处css说明：（文字动效设置在背景组图上）


*/

/*	固定窗口不左右滑动，多出的部分不要*/
@media only screen and (max-width: 480px) {
    body{overflow-x:hidden;margin-left: calc((100% - 360px) / 2 - 60px);min-width: auto;}
    body{overflow:hidden;}
    html{overflow-y:scroll}
    html{overflow: auto; }
    
    
}
@media screen and (min-width: 1200px) {

    body{
        overflow-x: hidden;
    }
    body{overflow:hidden;}
    html{overflow-y:scroll}
    html{overflow: auto; }
}
@-webkit-keyframes twinkling{	/*透明度由0到1*/
	0%{
		opacity:0.5;				/*透明度为0*/
    }
    50%{
        opacity:1;
    }
	100%{
		opacity:0.5;				/*透明度为1*/
	}
}

#闪烁{
    -webkit-animation: twinkling 0.5s infinite ease-in-out;
}



/*BEGIN - 根据ID设置样式*/

#放大 img{transition: all 0.4s;pointer-events: auto;}
#放大:hover img{transform: scale(1.1);}
#内放大{transition: all 0.4s;pointer-events: auto;overflow: hidden;}
#内放大 img{transition: all 0.4s;pointer-events: auto;overflow: hidden;}
#内放大:hover img{transform: scale(1.1);overflow: hidden;}

#内放大清晰{transition: all 0.4s;pointer-events: auto;overflow: hidden;}
#内放大清晰 img{transition: all 0.4s;pointer-events: auto;overflow: hidden;opacity: 0.8;}
#内放大清晰:hover img{transform: scale(1.1);overflow: hidden;opacity: 1.0;}

#内放大变亮{transition: all 0.4s;pointer-events: auto;overflow: hidden;}
#内放大变亮 img{transition: all 0.4s;pointer-events: auto;overflow: hidden;filter: brightness(0.7);}
#内放大变亮:hover img{transform: scale(1.1);overflow: hidden;filter: brightness(1.0);}

#内放大变暗{transition: all 0.4s;pointer-events: auto;overflow: hidden;}
#内放大变暗 img{transition: all 0.4s;pointer-events: auto;overflow: hidden;}
#内放大变暗:hover img{transform: scale(1.1);overflow: hidden;filter: brightness(0.70);}

#上移阴影{transition: all 0.4s;pointer-events: auto;}
#上移阴影 img{transition: all 0.4s;pointer-events: auto;}
#上移阴影:hover img{transform: scale(1.1);transform: translateY(-6px);
    transition: transform 0.4s;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
}

#图标旋转{transition: all 0.4s;pointer-events: auto;}
#图标旋转 img{transition: all 0.4s;pointer-events: auto;}
#图标旋转:hover img{transform: scale(1.1);
    transition: transform 0.4s;
    transform:rotate(360deg);
    -ms-transform:rotate(360deg); 	/* IE 9 */
    -moz-transform:rotate(360deg); 	/* Firefox */
    -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
    -o-transform:rotate(360deg); 	/* Opera */
}

#图标上移 {
pointer-events: auto;
}
#图标上移 img {
    pointer-events: auto;
    transition: all 0.4s;pointer-events: auto;
}

#图标上移:hover img {
    transform: translateY(-6px);
    transition: transform 0.2s;
}

#变亮{transition: all 0.4s;filter: brightness(0.7);pointer-events: auto;}
#变亮:hover{filter: brightness(1.0);}

#变暗{transition: all 0.4s;pointer-events: auto;}
#变暗:hover{filter: brightness(0.70);}

/* 组图上移*/
#上移 {
    pointer-events: auto;
    transition: all 0.4s;pointer-events: auto;
}
#上移:hover {
    transform: translateY(-10px);
    transition: transform 0.4s;
}
/*END - 根据ID设置样式*/



/*  通用定义*/
    /*圆角*/
    .圆角{border-radius: 8px;}
    .圆角5{border-radius: 5px;}
    .圆角8{border-radius: 8px;}
    .圆角10{border-radius: 10px;}
    .圆角15{border-radius: 15px;}
    .圆角20{border-radius: 20px;}
    /*背景颜色*/
/*---------------*/
/***** 组图部分 *****/
/*---------------*/
    /* 鼠标划过组图放大 */
    .imgs_box{overflow: hidden;}
    .放大{transition: all 0.4s;pointer-events: auto;}
    .放大:hover{transform: scale(1.1);}
    /* 鼠标划过遮罩变暗 */
    .变暗{transition: all 0.4s;pointer-events: auto;}
    .变暗:hover{filter: brightness(0.70);}
    /* 鼠标划过遮罩变亮 */
    .变亮{transition: all 0.4s;filter: brightness(0.7);pointer-events: auto;}
    .变亮:hover{filter: brightness(1.0);}

    /* 鼠标划过遮罩透明变亮 */
    .清晰{transition: all 0.4s;opacity: 0.8;pointer-events: auto;}
    .清晰:hover{opacity: 1.0;}

    /* 鼠标划过文字背景变暗 */
    .变黑{transition: all 0.4s;pointer-events: auto;}
    .变黑:hover{background-color: rgba(0,0,0,.55);}
    
    #旋转{transition: all 0.4s;pointer-events: auto;}
    #旋转:hover{transform:rotate(7deg);
        -ms-transform:rotate(7deg); 	/* IE 9 */
        -moz-transform:rotate(7deg); 	/* Firefox */
        -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
        -o-transform:rotate(7deg); 	/* Opera */}
    .阴影{
        transition: all 0.1s;pointer-events: auto;
    }

    .阴影:hover{
        
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
    }
    /* 组图上移*/
    .上移 {
        pointer-events: auto;
        transition: all 0.4s;pointer-events: auto;
    }
    .上移:hover {
        transform: translateY(-6px);
        transition: transform 0.4s;
    }

/*---------------*/
/***** 组部分 *****/
/*---------------*/
/* 组图变暗*/
.组图变暗 {
    pointer-events: auto;
}
.组图变暗 img {
    transition: all 0.4s;pointer-events: auto;
}

.组图变暗:hover img {
    filter: brightness(0.70);
}
/* 组图放大*/
.组图放大 {
    pointer-events: auto;
}
.组图放大 img {
    transition: all 0.4s;pointer-events: auto;
}

.组图放大:hover img {
    transform: scale(1.1);
}
/* 组图变暗*/
.组图变暗 {
    pointer-events: auto;
}
.组图变暗 img {
    transition: all 0.4s;pointer-events: auto;
}

.组图变暗:hover img {
    filter: brightness(0.70);
}
/* 组图变亮*/
.组图变亮 {
    transition: all 0.4s;opacity: 0.8;pointer-events: auto;
}
.组图变亮 img {
    transition: all 0.4s;pointer-events: auto;
}

.组图变亮:hover img {
    opacity: 1.0;
}
/* 组图上移*/
.组图上移 {
    pointer-events: auto;
}
.组图上移 img {
    pointer-events: auto;
    transition: all 0.4s;pointer-events: auto;
}

.组图上移:hover img {
    transform: translateY(-6px);
    transition: transform 0.2s;
}

/* 组样式：向上移动6px，*/
.组向上移 {
    pointer-events: auto;}
.组向上移:hover {
    transform: translateY(-6px);
    transition: transform 0.2s;
}
/* 组样式：组字左入*/
.组字左入 {
    pointer-events: auto;
}
.组字左入 p {
    pointer-events: auto;
    transition: all 0.4s;
	transform: translate3d(-360px,0,0);
}
.组字左入 p:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}
.组字左入 p:nth-of-type(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
.组字左入 p:nth-of-type(3) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}
.组字左入:hover p:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
.组字左入:hover p:nth-of-type(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}
.组字左入:hover p:nth-of-type(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
.组字左入:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
/* 组样式：组字下入

    比较麻烦的是：文字框不能大于图片框，小1px也可以
*/
.组字下入1 {
    pointer-events: auto;
    overflow:hidden;
   
}

.组字下入1 div:first-child {
	pointer-events: auto;
    transition: all 0.4s;
    /* transform: translate3d(0,414px,0); */
    transform: var(--trans);
    
    background-color: rgba(0,0,0,.5);
    
    
}

.组字下入1:hover div:first-child {
	opacity: 1;
	-webkit-transform: translate3d(0px, -1px, 0px);
    transform: translate3d(0px, -1px, 0px);
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
    
}

.组字下入2 {
    pointer-events: auto;
    overflow:hidden;
   
}

.组字下入2 div:nth-of-type(2) {
	pointer-events: auto;
    transition: all 0.4s;
    /* transform: translate3d(0,414px,0); */
    transform: var(--trans);
    
    background-color: rgba(0,0,0,.5);
    
    
}

.组字下入2:hover div:nth-of-type(2) {
	opacity: 1;
	-webkit-transform: translate3d(0px, -1px, 0px);
    transform: translate3d(0px, -1px, 0px);
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
    
}

.组字下入3 {
    pointer-events: auto;
    overflow:hidden;
   
}

.组字下入3 div:nth-of-type(3) {
	pointer-events: auto;
    transition: all 0.4s;
    /* transform: translate3d(0,414px,0); */
    transform: var(--trans);
    
    background-color: rgba(0,0,0,.5);
    
    
}

.组字下入3:hover div:nth-of-type(3) {
	opacity: 1;
	-webkit-transform: translate3d(0px, -1px, 0px);
    transform: translate3d(0px, -1px, 0px);
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
    
}