.shape001 {
    position: relative;
}
@media screen and (min-width:992px){
.shape001:before {
    content: '';
    background: #d2d0ce;
    width: 400px;
    height: 500px;
    position: absolute;
    left: 0;
    top: -15.9vw;
    z-index:-1!important;
    background-repeat: no-repeat;
    background-size: contain;
}}

/*-----------------------------------------------------------------------
                                1366 px
-------------------------------------------------------------------------*/
@media screen and (min-width:992px) and (max-width:1367px){
.shape001:before {
    content: '';
    background: #d2d0ce;
    width: 300px;
    height: 500px;
    position: absolute;
    left: 0;
    top: -18vw;
    z-index:-1!important;
    background-repeat: no-repeat;
    background-size: contain;
}
}

/*-----------------------------------------------------------------------
                                1920 px
-------------------------------------------------------------------------*/
@media screen and (min-width:1537px){
.shape001:before {
    content: '';
    background: #d2d0ce;
    width: 500px;
    height: 600px;
    position: absolute;
    left: 0;
    top: -17.9vw;
    z-index:-1!important;
    background-repeat: no-repeat;
    background-size: contain;
}
}




.shape002 h1{
    position: relative;
}

.shape002 h1:before {
    content: '';
    background: #a87d73;
    width: 1px;
    height: 50px;
    position: absolute;
    left: 0;
    top: -61px;
    background-repeat: no-repeat;
    background-size: contain;
    margin: auto;
    right: 0;
}


.flower-border h1{
    position: relative;
}

.flower-border h1:before {
    content: '';
    background: url(/images/000_starry/about/001.png);
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: -1;
    opacity: 0.3;
    background-repeat: no-repeat;
    background-size: contain;
    margin: auto;
    right: 0;
}

.flower-border-002 h1{
    position: relative;
}

.flower-border-002 h1:before {
    content: '';
    background: url(/images/000_starry/about/008.png);
    width: 100px;
    height: 100px;
    position: absolute;
    left: 1px;
    top: -16px;
    transform: rotate(180deg);
    z-index: -1;
    opacity: 0.3;
    background-repeat: no-repeat;
    background-size: contain;
    margin: auto;
}


#sp-left .sp-module .sp-module-title{
    color:#2d2d2d;
}

#sp-left .sp-module .sp-module-title{
    position: relative;
}

#sp-left .sp-module .sp-module-title:before {
    content: '';
    background: url(/images/000_starry/about/008.png);
    width: 100px;
    height: 100px;
    position: absolute;
    left: 61px;
    top: -58px;
    transform: rotate(180deg);
    z-index: -1;
    opacity: 0.3;
    background-repeat: no-repeat;
    background-size: contain;
    margin: auto;
}



.border-icon{
    position: relative;
}
.border-icon img{
    height:80px; position:relative;
}

.border-icon:before {
    content: '';
    background: url(/images/000_starry/course/icon004.png);
    width: 130px;
    height: 130px;
    position: absolute;
    left: 0;
    top: -23px;
    z-index: -4;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: contain;
    margin: auto;
    right: 0;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 8000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


.founder{
    position: relative;
}

.founder:before {
    content: '';
    background: url(/images/000_starry/about/004.png);
    width: 520px;
    height: 520px;
    position: absolute;
    left: 0;
    top: -9px;
    z-index: 1;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
    right: 0;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 3000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


.founder{
    position: relative;
}

.founder:after {
    content: '';
    background: url(/images/000_starry/about/005.png);
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    bottom: -85px;
    z-index: 1;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
    right: 0;
    -webkit-animation-name: float;
    -webkit-animation-duration: 3500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


/*founder mobile*/
/*-----------------------------------------------------------------------
                                992 px
-------------------------------------------------------------------------*/
@media screen and (max-width:992px){
.founder:before {
    content: '';
    background: url(/images/000_starry/about/004.png);
    width: 340px;
    height: 340px;
    position: absolute;
    left: 0;
    top: -9px;
    z-index: 1;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
    right: 0;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 3000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


.founder{
    position: relative;
}

.founder:after {
    content: '';
    background: url(/images/000_starry/about/005.png);
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    bottom: -85px;
    z-index: 1;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
    right: 0;
    -webkit-animation-name: float;
    -webkit-animation-duration: 3500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
}

/*end of founder mobile*/

.quote-icon{
    position: relative;
}

.quote-icon:after {
    content: '';
    background: url(/images/000_starry/about/006.png);
    width: 100px;
    height: 70px;
    position: absolute;
    left: 0;
    bottom: -27px;
    z-index: 1;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
    right: 0;
    -webkit-animation-name: float;
    -webkit-animation-duration: 3500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}



/*spin*/
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

/*float*/
@keyframes float {
	0% {
	
		transform: translatey(0px);
	}
	50% {

		transform: translatey(-20px);
	}
	100% {

		transform: translatey(0px);
	}
}