Difference between revisions of "Template:BIT-China/css/nav-dot-style"

(Created page with ".nav-dot-all { width: 200px; position: fixed; left: calc(92vw - 27px); top: 30vh; font-family: 'kg_second_chances_solidRg'; z-index: 1; display: -webkit-box;...")
 
Line 1: Line 1:
−
.nav-dot-all {
+
.img-com-style {
−
   width: 200px;
+
  position: relative;
−
   position: fixed;
+
  z-index: 1;
−
   left: calc(92vw - 27px);
+
   width: 400px;
−
   top: 30vh;
+
  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';
 
   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;
 +
}
 +
 +
#img-1 {
 +
  position: absolute;
 +
  left: 60vw;
 +
  top: 27vh;
 +
}
 +
 +
#text-1-name {
 +
  position: absolute;
 
   z-index: 1;
 
   z-index: 1;
 +
  left: calc(60vw - 320px);
 +
  top: calc(27vh + 20px);
 +
}
  
−
  display: -webkit-box;
+
#text-1-selfIntro {
−
   display: -moz-box;
+
   position: absolute;
−
   display: -ms-flexbox;
+
   z-index: 1;
−
   display: -webkit-flex;
+
   left: calc(60vw - 450px);
−
   display: flex;
+
   top: calc(27vh + 100px);
 +
}
  
−
  -webkit-box-align: center;
+
#img-2-1 {
−
   -webkit-align-items: center;
+
   position: absolute;
−
   -ms-flex-align: center;
+
   left: calc(60vw - 450px);
−
  align-items: center;
+
   top: 27vh;
−
   -webkit-box-pack: center;
+
−
  -webkit-justify-content: center;
+
−
  -ms-flex-pack: center;
+
−
  justify-content: center;
+
 
}
 
}
  
−
.nav-dot-all ul li {
+
#text-2-1-name {
−
   margin-top: 20px;
+
   position: absolute;
−
   display: -webkit-box;
+
   z-index: 1;
−
  display: -moz-box;
+
   left: calc(35vw + 300px);
−
   display: -ms-flexbox;
+
   top: calc(25vh + 20px);
−
   display: -webkit-flex;
+
−
  display: flex;
+
−
  cursor: pointer;
+
−
  -webkit-transition: all .2s ease-out;
+
−
  transition: all .2s ease-out;
+
−
  list-style: none;
+
−
  -moz-transition: all .2s ease-out;
+
−
  -ms-transition: all .2s ease-out;
+
−
  -o-transition: all .2s ease-out;
+
 
}
 
}
  
−
.nav-dot-box {
+
#text-2-1-selfIntro {
−
   width: 10px;
+
   position: absolute;
−
   height: 10px;
+
   z-index: 1;
−
  border: 2px solid #131313;
+
   left: calc(35vw + 350px);
−
  border-radius: 50%;
+
   top: calc(25vh + 70px);
−
   -webkit-border-radius: 50%;
+
−
   -moz-border-radius: 50%;
+
−
  -ms-border-radius: 50%;
+
−
  -o-border-radius: 50%;
+
 
}
 
}
  
−
.nav-dot-box a {
+
#img-2-2 {
−
   width: 250px;
+
   position: absolute;
−
   position: relative;
+
   left: 160vw;
−
   right: 50px;
+
   top: 25vh;
 
}
 
}
  
−
.nav-dot-box:hover {
+
#text-2-2-name {
−
   border: 2px solid #38769a;
+
   position: absolute;
−
   background: #38769a;
+
   z-index: 1;
 +
  left: calc(160vw - 240px);
 +
  top: calc(25vh + 20px);
 
}
 
}
  
−
.nav-dot-box-color {
+
#text-2-2-selfIntro {
−
   border: 2px solid #38769a;
+
   position: absolute;
−
   background: #38769a;
+
   z-index: 1;
 +
  left: calc(160vw - 450px);
 +
  top: calc(25vh + 60px);
 
}
 
}
  
−
.nav-dot-box .nav-dot-card {
+
#img-2-3 {
−
   float: left;
+
   position: absolute;
−
   z-index: -1;
+
   left: calc(260vw - 450px);
−
   display: block;
+
   top: 25vh;
 +
}
  
−
   position: relative;
+
#text-2-3-name {
−
   top: -12px;
+
   position: absolute;
−
   right: -100px;
+
   z-index: 1;
 +
   left: calc(235vw + 300px);
 +
  top: 25vh;
 +
}
  
−
   width: 250px;
+
#text-2-3-selfIntro {
−
   height: 30px;
+
   position: absolute;
 +
   z-index: 1;
 +
  left: calc(235vw + 350px);
 +
  top: calc(25vh + 40px);
 +
}
  
−
   background: #f6f6f6;
+
#img-2-4 {
 +
   position: absolute;
 +
  left: 360vw;
 +
  top: 25vh;
 +
}
  
−
  transition: all .3s ease-in-out .1s;
+
#text-2-4-name {
−
   -webkit-transition: all .3s ease-in-out .1s;
+
   position: absolute;
−
   -moz-transition: all .3s ease-in-out .1s;
+
   z-index: 1;
−
   -ms-transition: all .3s ease-in-out .1s;
+
   left: calc(360vw - 240px);
−
   -o-transition: all .3s ease-in-out .1s;
+
   top: calc(25vh + 20px);
 
}
 
}
  
−
.nav-dot-box:hover .nav-dot-card {
+
#text-2-4-selfIntro {
−
   display: block;
+
   position: absolute;
−
   width: 250px;
+
   z-index: 1;
−
   right: 30px;
+
   left: calc(360vw - 450px);
 +
  top: calc(25vh + 60px);
 +
}
  
−
  margin-right: 50px;
+
#img-3-1 {
 +
  position: absolute;
 +
  left: 60vw;
 +
  top: 25vh;
 +
}
  
−
  transition: all .3s ease-in-out .1s;
+
#text-3-1-name {
−
   -webkit-transition: all .3s ease-in-out .1s;
+
   position: absolute;
−
   -moz-transition: all .3s ease-in-out .1s;
+
   z-index: 1;
−
   -ms-transition: all .3s ease-in-out .1s;
+
   left: calc(60vw - 150px);
−
   -o-transition: all .3s ease-in-out .1s;
+
   top: calc(25vh + 20px);
 
}
 
}
  
−
.nav-dot-card-hover {
+
#text-3-1-selfIntro {
−
   float: left;
+
   position: absolute;
−
   z-index: -1;
+
   z-index: 1;
−
   top: -12px;
+
   left: calc(60vw - 450px);
−
   position: relative;
+
   top: calc(25vh + 60px);
−
  background: #f6f6f6;
+
}
−
  display: block;
+
−
  width: 250px;
+
−
  right: 30px;
+
−
  height: 30px;
+
−
  margin-right: 50px;
+
  
−
  transition: all .3s ease-in-out .1s;
+
#img-3-2 {
−
   -webkit-transition: all .3s ease-in-out .1s;
+
   position: absolute;
−
   -moz-transition: all .3s ease-in-out .1s;
+
   left: calc(160vw - 450px);
−
   -ms-transition: all .3s ease-in-out .1s;
+
   top: 25vh;
−
  -o-transition: all .3s ease-in-out .1s;
+
 
}
 
}
  
−
.nav-dot-card-content {
+
#text-3-2-name {
−
   position: relative;
+
   position: absolute;
−
   top: 2px;
+
   z-index: 1;
−
   margin-left: 15px;
+
   left: calc(135vw + 300px);
−
   color: #131313;
+
   top: calc(25vh + 20px);
−
  font-size: 17px;
+
 
}
 
}
  
−
.nav-dot-selected {
+
#text-3-2-selfIntro {
−
   position: relative;
+
   position: absolute;
−
   top: 2px;
+
  z-index: 1;
−
   margin-left: 15px;
+
  left: calc(135vw + 350px);
−
   font-size: 17px;
+
   top: calc(25vh + 70px);
−
   color: #38769a;
+
}
 +
 
 +
#img-3-3 {
 +
   position: absolute;
 +
  left: 260vw;
 +
  top: 25vh;
 +
}
 +
 
 +
#text-3-3-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(260vw - 180px);
 +
   top: calc(25vh + 20px);
 +
}
 +
 
 +
#text-3-3-selfIntro {
 +
  position: absolute;
 +
   z-index: 1;
 +
  left: calc(260vw - 450px);
 +
  top: calc(25vh + 60px);
 +
}
 +
 
 +
#img-3-4 {
 +
  position: absolute;
 +
  left: calc(360vw - 450px);
 +
  top: 25vh;
 +
}
 +
 
 +
#text-3-4-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(335vw + 300px);
 +
  top: calc(25vh + 20px);
 +
 
 +
}
 +
 
 +
#text-3-4-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(335vw + 350px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-3-5 {
 +
  position: absolute;
 +
  left: 460vw;
 +
  top: 25vh;
 +
}
 +
 
 +
#text-3-5-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(460vw - 270px);
 +
  top: calc(25vh + 20px);
 +
 
 +
}
 +
 
 +
#text-3-5-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(460vw - 450px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-3-6 {
 +
  position: absolute;
 +
  left: calc(560vw - 450px);
 +
  top: 25vh;
 +
}
 +
 
 +
#text-3-6-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(535vw + 300px);
 +
  top: calc(25vh + 20px);
 +
 
 +
}
 +
 
 +
#text-3-6-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(535vw + 350px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-4-1 {
 +
  position: absolute;
 +
  left: calc(60vw - 450px);
 +
  top: 25vh;
 +
}
 +
 
 +
#text-4-1-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(35vw + 300px);
 +
  top: calc(25vh + 20px);
 +
 
 +
}
 +
 
 +
#text-4-1-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(35vw + 350px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-4-2 {
 +
  position: absolute;
 +
  left: 160vw;
 +
  top: 25vh;
 +
}
 +
 
 +
#text-4-2-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(160vw - 270px);
 +
  top: calc(25vh + 20px);
 +
}
 +
 
 +
#text-4-2-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(160vw - 450px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-4-3 {
 +
  position: absolute;
 +
  left: calc(260vw - 450px);
 +
  top: 25vh;
 +
}
 +
 
 +
#text-4-3-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(235vw + 300px);
 +
  top: calc(25vh + 20px);
 +
 
 +
}
 +
 
 +
#text-4-3-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(235vw + 350px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-4-4 {
 +
  position: absolute;
 +
  left: 360vw;
 +
  top: 25vh;
 +
}
 +
 
 +
#text-4-4-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(360vw - 270px);
 +
  top: calc(25vh + 20px);
 +
}
 +
 
 +
#text-4-4-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(360vw - 450px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-4-5 {
 +
  position: absolute;
 +
  left: calc(460vw - 450px);
 +
  top: 25vh;
 +
}
 +
 
 +
#text-4-5-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(435vw + 300px);
 +
  top: calc(25vh + 20px);
 +
 
 +
}
 +
 
 +
#text-4-5-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(435vw + 350px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-5-1 {
 +
  position: absolute;
 +
  left: 60vw;
 +
  top: 25vh;
 +
}
 +
 
 +
#text-5-1-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(60vw - 150px);
 +
  top: calc(25vh + 20px);
 +
 
 +
}
 +
 
 +
#text-5-1-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(60vw - 450px);
 +
  top: calc(25vh + 60px);
 +
}
 +
 
 +
#img-5-2 {
 +
  position: absolute;
 +
  left: calc(160vw - 450px);
 +
  top: 25vh;
 +
}
 +
 
 +
#text-5-2-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(135vw + 300px);
 +
  top: calc(25vh + 20px);
 +
}
 +
 
 +
#text-5-2-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(135vw + 350px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-5-3 {
 +
  position: absolute;
 +
  left: 260vw;
 +
  top: 25vh;
 +
}
 +
 
 +
#text-5-3-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(260vw - 270px);
 +
  top: calc(25vh + 20px);
 +
 
 +
}
 +
 
 +
#text-5-3-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(260vw - 450px);
 +
  top: calc(25vh + 60px);
 +
}
 +
 
 +
#img-5-4 {
 +
  position: absolute;
 +
  left: calc(360vw - 450px);
 +
  top: 25vh;
 +
}
 +
 
 +
#text-5-4-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(335vw + 300px);
 +
  top: calc(25vh + 10px);
 +
}
 +
 
 +
#text-5-4-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(335vw + 350px);
 +
  top: calc(25vh + 60px);
 +
}
 +
 
 +
#img-6-1 {
 +
  position: absolute;
 +
  left: calc(60vw - 450px);
 +
  top: 25vh;
 +
}
 +
 
 +
#text-6-1-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(35vw + 300px);
 +
  top: calc(25vh + 20px);
 +
}
 +
 
 +
#text-6-1-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(35vw + 350px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-6-2 {
 +
  position: absolute;
 +
  left: 160vw;
 +
  top: 25vh;
 +
}
 +
 
 +
#text-6-2-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(160vw - 270px);
 +
  top: calc(25vh + 20px);
 +
}
 +
 
 +
#text-6-2-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(160vw - 450px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-6-3 {
 +
  position: absolute;
 +
  left: calc(260vw - 450px);
 +
  top: 25vh;
 +
}
 +
 
 +
#text-6-3-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(235vw + 300px);
 +
  top: calc(25vh + 20px);
 +
 
 +
}
 +
 
 +
#text-6-3-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(235vw + 350px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-7-1 {
 +
  position: absolute;
 +
  left: 60vw;
 +
  top: 25vh;
 +
}
 +
 
 +
#text-7-1-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(60vw - 240px);
 +
  top: calc(25vh + 20px);
 +
}
 +
 
 +
#text-7-1-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(60vw - 450px);
 +
  top: calc(25vh + 60px);
 +
}
 +
 
 +
#img-7-2 {
 +
  position: absolute;
 +
  left: calc(160vw - 450px);
 +
  top: 25vh;
 +
}
 +
 
 +
#text-7-2-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(135vw + 300px);
 +
  top: calc(25vh + 20px);
 +
}
 +
 
 +
#text-7-2-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(135vw + 350px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-7-3 {
 +
  position: absolute;
 +
  left: 260vw;
 +
  top: 25vh;
 +
}
 +
 
 +
#text-7-3-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(260vw - 300px);
 +
  top: calc(25vh + 20px);
 +
}
 +
 
 +
#text-7-3-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(260vw - 450px);
 +
  top: calc(25vh + 60px);
 +
}
 +
 
 +
#img-7-4 {
 +
  position: absolute;
 +
  left: calc(360vw - 450px);
 +
  top: 25vh;
 +
}
 +
 
 +
#text-7-4-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(335vw + 300px);
 +
  top: calc(25vh + 20px);
 +
 
 +
}
 +
 
 +
#text-7-4-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(335vw + 350px);
 +
  top: calc(25vh + 70px);
 +
}
 +
 
 +
#img-7-5 {
 +
  position: absolute;
 +
  left: 460vw;
 +
  top: 25vh;
 +
}
 +
 
 +
#text-7-5-name {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(460vw - 120px);
 +
  top: calc(25vh + 20px);
 +
 
 +
}
 +
 
 +
#text-7-5-selfIntro {
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: calc(460vw - 450px);
 +
  top: calc(25vh + 70px);
 
}
 
}

Revision as of 12:55, 15 October 2018

.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);

}