Template:BIT-China/css/nav-dot-style

.img-com-style { 

 position: relative;
 z-index: 1;
 width: 400px;
 height: 300px;

}

.img-com-style img { 

 position: absolute;
 width: 100%;
 height: 100%;

}

.img-com-1-style { 

 opacity: 1;
 transition: all .4s ease-out;
 -webkit-transition: all .4s ease-out;
 -moz-transition: all .4s ease-out;
 -ms-transition: all .4s ease-out;
 -o-transition: all .4s ease-out;

}

.img-com-2-style { 

 opacity: 0;
 transition: all .4s ease-out;
 -webkit-transition: all .4s ease-out;
 -moz-transition: all .4s ease-out;
 -ms-transition: all .4s ease-out;
 -o-transition: all .4s ease-out;

}

.img-com-style:hover .img-com-1-style { 

 opacity: 0;
 transition: all .6s ease-out;
 -moz-transition: all .6s ease-out;
 -ms-transition: all .6s ease-out;
 -o-transition: all .6s ease-out;
 -webkit-transition: all .6s ease-out;

}

.img-com-style:hover .img-com-2-style { 

 opacity: 1;
 transition: all .6s ease-out;
 -webkit-transition: all .6s ease-out;
 -moz-transition: all .6s ease-out;
 -ms-transition: all .6s ease-out;
 -o-transition: all .6s ease-out;

}

.name-com-style { 

 font-family: 'kg_second_chances_solidRg';
 margin: 0;
 text-decoration: none;
 text-align: right;
 letter-spacing: 4px;

}

.self-intro-com-style { 

 font-family: 'helveticaregular' !important;
 font-size: 12px !important;
 margin: 0;
 color: #131313 !important;
 text-decoration: none !important;
 text-align: left;
 line-height: 24px !important;
 width: 350px;

 word-wrap: break-word;
 word-break: keep-all;
 text-align: justify;
 text-justify: inter-ideograph;

}

  1. img-1 {
 position: absolute;
 left: 60vw;
 top: 27vh;

}

  1. text-1-name {
 position: absolute;
 z-index: 1;
 left: calc(60vw - 320px);
 top: calc(27vh + 20px);

}

  1. text-1-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(60vw - 450px);
 top: calc(27vh + 100px);

}

  1. img-2-1 {
 position: absolute;
 left: calc(60vw - 450px);
 top: 27vh;

}

  1. text-2-1-name {
 position: absolute;
 z-index: 1;
 left: calc(35vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-2-1-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(35vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-2-2 {
 position: absolute;
 left: 160vw;
 top: 25vh;

}

  1. text-2-2-name {
 position: absolute;
 z-index: 1;
 left: calc(160vw - 240px);
 top: calc(25vh + 20px);

}

  1. text-2-2-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(160vw - 450px);
 top: calc(25vh + 60px);

}

  1. img-2-3 {
 position: absolute;
 left: calc(260vw - 450px);
 top: 25vh;

}

  1. text-2-3-name {
 position: absolute;
 z-index: 1;
 left: calc(235vw + 300px);
 top: 25vh;

}

  1. text-2-3-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(235vw + 350px);
 top: calc(25vh + 40px);

}

  1. img-2-4 {
 position: absolute;
 left: 360vw;
 top: 25vh;

}

  1. text-2-4-name {
 position: absolute;
 z-index: 1;
 left: calc(360vw - 240px);
 top: calc(25vh + 20px);

}

  1. text-2-4-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(360vw - 450px);
 top: calc(25vh + 60px);

}

  1. img-3-1 {
 position: absolute;
 left: 60vw;
 top: 25vh;

}

  1. text-3-1-name {
 position: absolute;
 z-index: 1;
 left: calc(60vw - 150px);
 top: calc(25vh + 20px);

}

  1. text-3-1-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(60vw - 450px);
 top: calc(25vh + 60px);

}

  1. img-3-2 {
 position: absolute;
 left: calc(160vw - 450px);
 top: 25vh;

}

  1. text-3-2-name {
 position: absolute;
 z-index: 1;
 left: calc(135vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-3-2-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(135vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-3-3 {
 position: absolute;
 left: 260vw;
 top: 25vh;

}

  1. text-3-3-name {
 position: absolute;
 z-index: 1;
 left: calc(260vw - 180px);
 top: calc(25vh + 20px);

}

  1. text-3-3-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(260vw - 450px);
 top: calc(25vh + 60px);

}

  1. img-3-4 {
 position: absolute;
 left: calc(360vw - 450px);
 top: 25vh;

}

  1. text-3-4-name {
 position: absolute;
 z-index: 1;
 left: calc(335vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-3-4-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(335vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-3-5 {
 position: absolute;
 left: 460vw;
 top: 25vh;

}

  1. text-3-5-name {
 position: absolute;
 z-index: 1;
 left: calc(460vw - 270px);
 top: calc(25vh + 20px);

}

  1. text-3-5-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(460vw - 450px);
 top: calc(25vh + 70px);

}

  1. img-3-6 {
 position: absolute;
 left: calc(560vw - 450px);
 top: 25vh;

}

  1. text-3-6-name {
 position: absolute;
 z-index: 1;
 left: calc(535vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-3-6-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(535vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-4-1 {
 position: absolute;
 left: calc(60vw - 450px);
 top: 25vh;

}

  1. text-4-1-name {
 position: absolute;
 z-index: 1;
 left: calc(35vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-4-1-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(35vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-4-2 {
 position: absolute;
 left: 160vw;
 top: 25vh;

}

  1. text-4-2-name {
 position: absolute;
 z-index: 1;
 left: calc(160vw - 270px);
 top: calc(25vh + 20px);

}

  1. text-4-2-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(160vw - 450px);
 top: calc(25vh + 70px);

}

  1. img-4-3 {
 position: absolute;
 left: calc(260vw - 450px);
 top: 25vh;

}

  1. text-4-3-name {
 position: absolute;
 z-index: 1;
 left: calc(235vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-4-3-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(235vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-4-4 {
 position: absolute;
 left: 360vw;
 top: 25vh;

}

  1. text-4-4-name {
 position: absolute;
 z-index: 1;
 left: calc(360vw - 270px);
 top: calc(25vh + 20px);

}

  1. text-4-4-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(360vw - 450px);
 top: calc(25vh + 70px);

}

  1. img-4-5 {
 position: absolute;
 left: calc(460vw - 450px);
 top: 25vh;

}

  1. text-4-5-name {
 position: absolute;
 z-index: 1;
 left: calc(435vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-4-5-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(435vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-5-1 {
 position: absolute;
 left: 60vw;
 top: 25vh;

}

  1. text-5-1-name {
 position: absolute;
 z-index: 1;
 left: calc(60vw - 150px);
 top: calc(25vh + 20px);

}

  1. text-5-1-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(60vw - 450px);
 top: calc(25vh + 60px);

}

  1. img-5-2 {
 position: absolute;
 left: calc(160vw - 450px);
 top: 25vh;

}

  1. text-5-2-name {
 position: absolute;
 z-index: 1;
 left: calc(135vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-5-2-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(135vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-5-3 {
 position: absolute;
 left: 260vw;
 top: 25vh;

}

  1. text-5-3-name {
 position: absolute;
 z-index: 1;
 left: calc(260vw - 270px);
 top: calc(25vh + 20px);

}

  1. text-5-3-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(260vw - 450px);
 top: calc(25vh + 60px);

}

  1. img-5-4 {
 position: absolute;
 left: calc(360vw - 450px);
 top: 25vh;

}

  1. text-5-4-name {
 position: absolute;
 z-index: 1;
 left: calc(335vw + 300px);
 top: calc(25vh + 10px);

}

  1. text-5-4-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(335vw + 350px);
 top: calc(25vh + 60px);

}

  1. img-6-1 {
 position: absolute;
 left: calc(60vw - 450px);
 top: 25vh;

}

  1. text-6-1-name {
 position: absolute;
 z-index: 1;
 left: calc(35vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-6-1-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(35vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-6-2 {
 position: absolute;
 left: 160vw;
 top: 25vh;

}

  1. text-6-2-name {
 position: absolute;
 z-index: 1;
 left: calc(160vw - 270px);
 top: calc(25vh + 20px);

}

  1. text-6-2-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(160vw - 450px);
 top: calc(25vh + 70px);

}

  1. img-6-3 {
 position: absolute;
 left: calc(260vw - 450px);
 top: 25vh;

}

  1. text-6-3-name {
 position: absolute;
 z-index: 1;
 left: calc(235vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-6-3-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(235vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-7-1 {
 position: absolute;
 left: 60vw;
 top: 25vh;

}

  1. text-7-1-name {
 position: absolute;
 z-index: 1;
 left: calc(60vw - 240px);
 top: calc(25vh + 20px);

}

  1. text-7-1-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(60vw - 450px);
 top: calc(25vh + 60px);

}

  1. img-7-2 {
 position: absolute;
 left: calc(160vw - 450px);
 top: 25vh;

}

  1. text-7-2-name {
 position: absolute;
 z-index: 1;
 left: calc(135vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-7-2-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(135vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-7-3 {
 position: absolute;
 left: 260vw;
 top: 25vh;

}

  1. text-7-3-name {
 position: absolute;
 z-index: 1;
 left: calc(260vw - 300px);
 top: calc(25vh + 20px);

}

  1. text-7-3-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(260vw - 450px);
 top: calc(25vh + 60px);

}

  1. img-7-4 {
 position: absolute;
 left: calc(360vw - 450px);
 top: 25vh;

}

  1. text-7-4-name {
 position: absolute;
 z-index: 1;
 left: calc(335vw + 300px);
 top: calc(25vh + 20px);

}

  1. text-7-4-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(335vw + 350px);
 top: calc(25vh + 70px);

}

  1. img-7-5 {
 position: absolute;
 left: 460vw;
 top: 25vh;

}

  1. text-7-5-name {
 position: absolute;
 z-index: 1;
 left: calc(460vw - 120px);
 top: calc(25vh + 20px);

}

  1. text-7-5-selfIntro {
 position: absolute;
 z-index: 1;
 left: calc(460vw - 450px);
 top: calc(25vh + 70px);

}