@import url("https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap");
    .containerIndex {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity:0;
    }
    .containerIndex .boxIndex {
        width: 80%;
        height: 350px;
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .containerIndex .boxIndex .titleIndex {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        height: 80px;
    }
    .containerIndex .boxIndex .titleIndex .blockIndex {
        width: 0%;
        height: 50;
        background: #ffb510;
        position: absolute;
        animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
        display: flex;
    }
    .containerIndex .boxIndex .titleIndex .h1Index {
        font-family: "Poppins";
        color: #fff;
        -webkit-animation: mainFadeIn 2s forwards;
        -o-animation: mainFadeIn 2s forwards;
        animation: mainFadeIn 2s forwards;
        animation-delay: 1.6s;
        display: flex;
        
        
      
        font-size: 40px;
        text-shadow:3px 3px 3px #000000;
		height:60px;
    }
    .containerIndex .boxIndex .titleIndex .h1Index .spanIndex {
        width: 0px;
        height: inherit;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: #ffb510;
        -webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
        margin-left: 5px;
        margin-top: -10px;
        position: absolute;
        bottom: 13px;
        right: -12px;
    }
    .containerIndex .boxIndex .roleIndex {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        height: 30px;
        margin-top: -5px;
    }
    .containerIndex .boxIndex .roleIndex .blockIndex {
        width: 0%;
        height: inherit;
        //background: #e91e63;
        position: absolute;
        animation: secBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
        animation-delay: 2s;
        display: flex;
    }
    .containerIndex .boxIndex .roleIndex .pIndex {
        animation: secFadeIn 2s forwards;
        animation-delay: 3.2s;
        font-weight: 400;
        font-family: "Lato";
        letter-spacing: 5px;
        color: #ffffff;
        font-size: 16px;
        text-shadow:3px 3px 3px #000000;
        opacity:1;
    }


    @keyframes mainBlock {
        0% {
            width: 0%;
            left: 0;
        }
        50% {
            width: 100%;
            left: 0;
        }
        100% {
            width: 0;
            left: 100%;
        }
    }
    @keyframes secBlock {
        0% {
            width: 0%;
            left: 0;
        }
        50% {
            width: 100%;
            left: 0;
        }
        100% {
            width: 0;
            left: 100%;
        }
    }
    @keyframes mainFadeIn {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 1;
            background:rgba(0,0,0,0.6);
        }
    }
    @keyframes popIn {
        0% {
            width: 0px;
            height: 0px;
            background: #e9d856;
            border: 0px solid #ddd;
            opacity: 1;
        }
        50% {
            width: 10px;
            height: 10px;
            background: #e9d856;
            opacity: 1;
            bottom: 45px;
        }
        65% {
            width: 7px;
            height: 7px;
            bottom: 0px;
            width: 15px;
        }
        80% {
            width: 10px;
            height: 10px;
            bottom: 20px;
        }
        100% {
            width: 7px;
            height: 7px;
            background: #e9d856;
            border: 0px solid #222;
            bottom: 13px;
        }
    }
    @keyframes secFadeIn {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 1;
            background:rgba(0,0,0,0.6);
        }
    }

    .hideme{
        margin-left: -15px;
        margin-right: -15px;
        opacity:0;
    }
    
    .hideme:after {
        content: "";
        display: table;
        clear: both;
    }


    .div1 {
        height: 420px;
        width: 850px;
        margin: 0 auto;
        background-color: #f6f3e1;
    }

    .a-img11 {
        background-image: url('../images/pens_01.jpg');
        margin-left:80px;
        min-height: 420px;
        width:80%;
        background-repeat:no-repeat;
        background-size:cover;
        height: 500px;
    }
    
    .a-img21 {
        background-image: url('../images/pens_02.jpg');
        margin-right:50px;
        float:right;
    }
    
    .a-img31 {
        background-image: url('../images/pens_03.jpg');
        margin-left:50px;
        width:80%;
        background-repeat:no-repeat;
        background-size:cover;
        height: 500px;
    }
    
    .a-img41 {
        background-image: url('../images/pens_04.jpg');
        margin-right:50px;
        float:right;
        background-repeat:no-repeat;
        background-size:cover;
        
    }
    
    .a-img51 {
        background-image: url('../images/pens_08.jpg');
        margin-left:50px;
        background-repeat:no-repeat;
        background-size:cover;

    }
    
    .a-img61 {
        background-image: url('../images/pens_09.jpg');
        margin-right:50px;
        float:right;
    }
    

	
	.topDiv{
		width:100%;
		height:750px;
		background: url('../images/index013.jpg'),url('../images/index02.jpg'),url('../images/index03.jpg'),url('../images/index04.jpg'),url('../images/index05.jpg'),url('../images/index06.jpg'),url('../images/index07.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		animation: framstopDiv 30s infinite;
		-moz-animation: framstopDiv 30s infinite; /* Firefox */
		-webkit-animation: framstopDiv 30s infinite; /* Safari 和 Chrome */
		-o-animation: framstopDiv 30s infinite; /* Opera */
	}

	@keyframes framstopDiv {
        12%{
			background-image: url("../images/index013.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        24%{
			background-image: url("../images/index02.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        36%{
			background-image: url("../images/index03.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        48%{
			background-image: url("../images/index04.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		60%{
			background-image: url("../images/index05.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		72%{
			background-image: url("../images/index06.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		84%{
			background-image: url("../images/index07.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		100%{
			background-image: url("../images/index013.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
    }
	
	@-moz-keyframes framstopDiv {
        12%{
			background-image: url("../images/index013.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        24%{
			background-image: url("../images/index02.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        36%{
			background-image: url("../images/index03.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        48%{
			background-image: url("../images/index04.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		60%{
			background-image: url("../images/index05.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		72%{
			background-image: url("../images/index06.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		84%{
			background-image: url("../images/index07.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		100%{
			background-image: url("../images/index013.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
    }
	
	@-webkit-keyframes framstopDiv {
        12%{
			background-image: url("../images/index013.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        24%{
			background-image: url("../images/index02.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        36%{
			background-image: url("../images/index03.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        48%{
			background-image: url("../images/index04.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		60%{
			background-image: url("../images/index05.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		72%{
			background-image: url("../images/index06.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		84%{
			background-image: url("../images/index07.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		100%{
			background-image: url("../images/index013.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
    }
	
	@-o-keyframes framstopDiv {
        12%{
			background-image: url("../images/index013.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        24%{
			background-image: url("../images/index02.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        36%{
			background-image: url("../images/index03.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
        48%{
			background-image: url("../images/index04.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		60%{
			background-image: url("../images/index05.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		72%{
			background-image: url("../images/index06.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		84%{
			background-image: url("../images/index07.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
		100%{
			background-image: url("../images/index013.jpg");
			background-repeat: no-repeat;
			background-size: cover;
        }
    }