@import "reset.css";

body{
    background-color: black;
}

header {
     box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 1em;
    color:#7553FF;
    font-style:normal;
    z-index: 5;
    pointer-events: none;
}

header a {
    pointer-events: auto;
}

.header-inner {
    border:0.1em solid #6425F9;
    height: 100%;
}

.yiqiwan{ 
    font-family:"Fette Gotisch D OT";
    font-size:1.8em;
    position:absolute;
    top: 1.2em;
    left: 49%;
    text-align: center;
              
}
.contact{ 
    font-family:"CaslonCPswash";
    font-size:1em;
    position:absolute;
    top:4.5em;
    left:51%;              
}
.Photography{
    font-family:"CaslonCPswash";
    font-size:1.4em;
    position: absolute;
    top:8em;
    left:2em;
    transform: rotate(-90deg);
    transform-origin: left;              
}

.UI{
    font-family:"CaslonCPswash";
    font-size:1.4em;
    position: absolute;
    top: 17em;
    left:2em;
    transform: rotate(-90deg);
    transform-origin: left;            
}

.GD{
    font-family:"CaslonCPswash";
    font-size:1.4em;
    position: absolute;
    top: 31em;
    left:2em;
    transform: rotate(-90deg);
    transform-origin: left;            
}   
.yiqiwan {
    color:#7553FF;
    font-size:1.8em;
}
.yiqiwan:hover {
    text-shadow:0.1em 0.1em 0.8em aqua ;
    color: aqua;
}
a {
    color:#7553FF; 
}
a:hover {
    text-shadow:0.1em 0.1em 0.8em aqua ;
    color: aqua;
}

img{
    display: block;
    width: 100%;
}
.font2{
    color:#7553FF;
    font-family:"Lora";
    font-style:normal;
    font-size:1.1em;
    letter-spacing: 0.02em;
    line-height: 1.2em;
  
}
main{
    z-index:3;
}
.box1{
      margin-top: -30%;
    margin-left: -38%;
    margin-right: -100%;
    margin-bottom: -10%;
    padding-right: -80%;
    width: 120%;
}
.box1 > video{
    width: 73%;
    height: 100%;
    margin-top: -30%;
    margin-left: -38%;
    margin-right: -100%;
    margin-bottom: -10%;
    padding-right: -80%;
}
.covervideo{
    position:absolute;
    top:46%;
    left:65%;
    margin-top: -30%;
    margin-left: -38%;
    margin-right: -100%;
    margin-bottom: -10%;
    padding-right: -80%;
    width: 120%;
    object-fit:none;
}
.covervideo2{
    display: none;
}
.portfolio{
   position:absolute;
   color:#7553FF;
   font-family:"CaslonCPswash";
   font-style:normal;
   font-size:1.6em;
   top:61%;
   left: 48%;
}
.roadimg{
    position: absolute;
    top: 100%;
    left: 7%;
    width:22.5%;
}
.road{
    position:absolute;
    left:7%; 
    top:158.5%;
}
.tyndallimg{
    position: absolute;
    top: 100%;
    left: 30.5%;
    width:22.5%;
}
.tyndall{
    position: absolute;
    left:30.5%;
    top:146.5%;
}
.appimg{
    position:absolute;
    left: 7%;
    top:180%;
    width: 22.5%;
}
.UIapp{
    position: absolute;
    left:7%;
    top:227%;
}
.shiimg{
    position: absolute;
    left: 7%;
    top:250%;
    width: 22.5%;
}
.gdshi{
    position: absolute;
    left:7%;
    top:316%;  
}
.niimg{
    position: absolute;
    left: 30.5%;
    top: 250%;
    width: 22.5%;
}
.gdhello{
    position: absolute;
    left:30.5%;
    top:316%; 
    margin-bottom: 10%;
}
.viimg{
    position: absolute;
    left: 54%;
    top: 250%;
    width:22.5%;
}
.gdvi{
    position: absolute;
    left:54%;
    top:296.5%;  
    margin-bottom: 30%;
}
/*contact*/
.back{
    font-family:"CaslonCPswash";
    font-size:1.2em;
    position:absolute;
    top:4.5%;
    left:5%;  
}
  
.yiqiwan { color:#7553FF;
    text-shadow:none;
    
}
yiqiwan:hover {
    text-shadow:0.1em 0.1em 0.8em aqua ;
    color: aqua;
   
}
a {
    color:#7553FF; 
}
a:hover {
    text-shadow:0.1em 0.1em 0.8em aqua ;
    color: aqua;
}
a2 {
    text-shadow:0.1em 0.1em 0.8em aqua ;
    color: aqua;
    font-size:1.3em;
}
a2:hover {
    text-shadow: none;
    color:#7553FF; 
    
}
.fontyiqi{
    font-family: "Lora";
    font-size: 1.5em;
    letter-spacing: 0.02em;
    line-height:1.2em;
    color: #7553FF;
}
.right{
    text-align: right;
    position: absolute;
    top:23%;
    left:14.5%;
}
.left{
    text-align: left;
    position: absolute;
    top:23%;
    left:54%;
}

/*photography*/
a2 {
    text-shadow:0.1em 0.1em 0.8em aqua ;
    color: aqua;
    font-size:1.3em;
}
a2:hover {
    text-shadow: none;
    color:#7553FF; 
    font-size:1.2em;
    
}
.font2{
    color:#7553FF;
    font-family:"Lora";
    font-style:normal;
    font-size:1.1em;
    letter-spacing: 0.02em;
    line-height: 1.2em;
}
.roadimg2{
    position: absolute;
    top: 23%;
    left: 7%;
    width:22.1%;
}
.tyndallimg2{
    position: absolute;
    top: 23%;
    left: 30.5%;
    width:22.1%;
}
.road2{
    position:absolute;
    left:7%; 
    top:82%;
}
.tyndall2{
    position: absolute;
    left:30.5%;
    top:70.5%;
}
/*UI*/
.appimg2{
    position:absolute;
    left: 7%;
    top:23%;
    width: 22.1%;
}
.UIapp2{
    position: absolute;
    left:7%;
    top:70.5%;
}
/*GD*/
.shiimg2{
    position: absolute;
    left: 7%;
    top:18%;
    width: 22.1%;
}
.gdshi2{
    position: absolute;
    left:7%;
    top:85.5%;  
}
.niimg2{
    position: absolute;
    left: 30.5%;
    top: 18%;
    width: 22.1%;
}
.gdhello2{
    position: absolute;
    left:30.5%;
    top:85.5%;  
}
.viimg2{
    position: absolute;
    left: 54%;
    top: 18%;
    width: 22.1%;
}
.gdvi2{
    position: absolute;
    left:54%;
    top:66.5%;  
}
/*road*/
.title{
    font-family: "Fette Gotisch D OT";
    font-size: 2.3em;
    color: #7553FF;
    position:absolute;
    top: 12%;
    left: 65.5%;
}
.date{
    font-family: "Lora";
    font-size: 1.2em;
    color: #7553FF;
    position:absolute;
    top: 20.5%;
    left: 65.5%;
}
.content{
    font-family: "Lora";
    font-size: 1.5em;
    font-weight:medium;
    line-height:1.1em;
    color: #7553FF;
    position:absolute;
    top: 23.5%;
    left: 65.5%;
}

.rone{
   position:absolute;
   top:15%;
   left:5%;
   width:60%;
}
.rtwo{
    position: absolute;
    top:95%;
   left:5%;
   width:60%;
}
.rthree{
    position: absolute;
    top: 175%;
    left:5%;
    width:60%;
}
.rfour{
    position: absolute;
    top: 255%;
    left:5%;
    width:60%;
}
.rfive{
    position: absolute;
    top: 335%;
    left:5%;
    width:60%;
}
.rsix{
    position: absolute;
    top:415%;
    left:5%;
   width:60%;
}
.rseven{
    position: absolute;
    top: 495%;
    left:5%;
    width:60%;
    margin-bottom: 10%;
}
/*tyndall*/
.tone{
   position:absolute;
   top:15%;
   left:5%;
   width:60%;
}
.ttwo{
    position: absolute;
    top:85%;
   left:5%;
   width:60%;
}
.tthree{
    position: absolute;
    top: 155%;
    left:5%;
    width:60%;
}
.tfour{
    position: absolute;
    top: 225%;
    left:5%;
    width:60%;
}
.tfive{
    position: absolute;
    top: 295%;
    left:5%;
    width:60%;
}
.tsix{
    position: absolute;
    top:365%;
    left:5%;
   width:60%;
}
.tseven{
    position: absolute;
    top:365%;
    left:5%;
    width:60%;
    margin-bottom: 10%;
}
/*app*/
video {
    display: block;
    width: 100%;
}
.appvideo{
    position: absolute;
    top:10%;
    left:25%;
    width: 18%;
}
/*shihching*/
.none{
   position:absolute;
   top:12.5%;
   left:8%;
   width: 28%;
}
.ntwo{
    position: absolute;
    top: 12.5%;
    left: 36.5%;
    width: 28%;

}
.nthree{
    position: absolute;
    top: 74.5%;
    left: 36.5%;
    width: 28%;
}
.nfour{
    position: absolute;
    top:147.5%;
    left: 8%;
    width: 28%;
}
.nfive{
    position: absolute;
    top: 147.5%;
    left: 36.5%;
    width: 28%;
}
.nsix{
    position: absolute;
    top: 210.5%;
    left: 36.5%;
    width: 28%;
}
.nseven{
    position: absolute;
    top: 238%;
    left: 8%;
    width: 28%;
}
.neight{
    position: absolute;
    top:238%;
    left: 36.5%;
    width: 28%;
}
.nnine{
    position: absolute;
    top: 305.2%;
    left: 36.5%;
    width: 28%;
    padding-bottom: 15%;
}
/*nihao*/
.hone{
   position:absolute;
   top:12.5%;
   left:8%;
   width: 28%;
}
.htwo{
    position: absolute;
    top: 12.5%;
    left: 36.5%;
    width: 28%;

}
.hthree{
    position: absolute;
    top: 75.5%;
    left: 36.5%;
    width: 28%;
}

.hfour{
    position: absolute;
    top: 93.5%;
    left: 36.5%;
    width: 28%;
    margin-bottom: 20%;
}
/*curep*/
.cone{
   position:absolute;
   top:15%;
   left:5%;
   width:29.5%;
}
.ctwo{
    position: absolute;
    top:15%;
   left:35.2%;
   width:29.5%;
}
.cthree{
    position: absolute;
    top:80.3%;
    left:5%;
    width:29.5%;
}
.cfour{
    position: absolute;
    top: 123.2%;
    left:5%;
    width:29.5%;
}
.cfive{
    position: absolute;
    top: 155.2%;
    left:5%;
    width:29.5%;
}
.csix{
    position: absolute;
    top: 98.2%;
    left:35.2%;
    width:29.5%;
    margin-bottom: 10%;
}

@media (max-width: 375px) {
    header {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0.7em;
    color:#7553FF;
    font-style:normal;
    z-index: 5;
    pointer-events: none;
}
    .covervideo{
       display: none;
    }
    .box2{
    width: 50%;
    height: 80%;
}
.box2 > video{
    width: 80%;
    height: 80%;
    margin-top: -20%;
}
    .covervideo2{
        display: block;
      position: absolute;
      top: 8%;
      left:15%;
      width:2%;
      overflow: hidden;
        object-fit: none;
        margin-top: -20%;
        object-position: left:10%; top:10%;
    
    }
.Photography{
    font-size:1.2em;
    left:1.5em;             
}

.UI{  font-size:1.2em;
    left:1.5em;               
}

.GD{  font-size:1.2em;
    left:1.5em;          
} 
    body{
        width: 375px;
        height: 667px;
    }
    
   .yiqiwan{ 
    position:absolute;
    top: 1em;
    left: 40%;
}
    .contact{ position:absolute;
    top:4em;
    left: 49%;
    }
    .portfolio{
         top:68%;
         left:37%;
        font-size: 1.3em;
    }
.font2{
    font-size: 0.8em;    
    }
.roadimg{
    position: absolute;
    top: 100%;
    left: 13.5%;
    width:11em;
}
.road{
    position:absolute;
    left:13.5%; 
    top:124%;
}
.tyndallimg{
    position: absolute;
    top: 100%;
    left: 54%;
    width:11em;
}
.tyndall{
    position: absolute;
    left:56%;
    top:119.5%;
}
.roadimg2{
    position: absolute;
    top: 20%;
    left: 13.5%;
    width:11em;
}
.road2{
    position:absolute;
    left:13.5%; 
    top:50%;
}
.tyndallimg2{
    position: absolute;
    top: 20%;
    left: 54%;
    width:11em;
}
.tyndall2{
    position: absolute;
    left:54%;
    top:44%;
}
.appimg{
    position:absolute;
    left: 13.5%;
    top:132%;
    width:11em;
}
.UIapp{
    position: absolute;
    left:13.5%;
    top:151%;
}
.appimg2{
    position:absolute;
    left: 13.5%;
    top:20%;
    width:11em;
}
.UIapp2{
    position: absolute;
    left:13.5%;
    top:39.5%;
}
.shiimg{
    position: absolute;
    left: 13.5%;
    top:160%;
    width: 11em;
}
.gdshi{
    position: absolute;
    left:13.5%;
    top:187.3%;  
}
.niimg{
    position: absolute;
    left: 54%;
    top: 160%;
    width:11em;
}
.gdhello{
    position: absolute;
    left:54%;
    top:187.3%; 
    margin-bottom: 100em;
}
.viimg{
    position: absolute;
    left: 13.5%;
    top: 194.5%;
    width: 11em;
    
}
.gdvi{
    position: absolute;
    left:13.5%;
    top:213.5%;  
    margin-bottom: 20%;
}
.shiimg2{
    position: absolute;
    left: 13.5%;
    top:20%;
    width: 11em;
}
.gdshi2{
    position: absolute;
    left:13.5%;
    top:47.5%;  
}
.niimg2{
    position: absolute;
    left: 54%;
    top: 20%;
    width:11em;
}
.gdhello2{
    position: absolute;
    left:54%;
    top:47.5%; 
    margin-bottom: 100em;
}
.viimg2{
    position: absolute;
    left: 13.5%;
    top: 55%;
    width: 11em;
    
}
.gdvi2{
    position: absolute;
    left:13.5%;
    top:74.5%;  
    margin-bottom: 20%;
} 
.title{
    font-family: "Fette Gotisch D OT";
    font-size: 1em;
    color: #7553FF;
    position:absolute;
    top: 14%;
    left: 65.5%;
}
.date{
    font-family: "Lora";
    font-size: 0.6em;
    color: #7553FF;
    position:absolute;
    top: 17.5%;
    left: 65.5%;
}
.content{
    font-family: "Lora";
    font-size: 0.7em;
    font-weight:medium;
    line-height:1.1em;
    color: #7553FF;
    position:absolute;
    top: 19%;
    left: 65.5%;
}
.rone{
   position:absolute;
   top:15%;
   left:14%;
   width:50%;
}
.rtwo{
    position: absolute;
    top:31.5%;
   left:14%;
   width:50%;
}
.rthree{
    position: absolute;
    top: 48%;
    left:14%;
   width:50%;
}
.rfour{
    position: absolute;
    top: 64.5%;
   left:14%;
   width:50%;
}
.rfive{
    position: absolute;
    top: 81%;
   left:14%;
   width:50%;
}
.rsix{
    position: absolute;
    top:97.2%;
  left:14%;
   width:50%;
}
.rseven{
    position: absolute;
    top: 113.5%;
   left:14%;
   width:50%;
   margin-bottom: 20%;
}
.tone{
   position:absolute;
   top:15%;
   left:14%;
   width:50%;
}
.ttwo{
    position: absolute;
    top:29%;
   left:14%;
   width:50%;
}
.tthree{
    position: absolute;
    top: 43%;
   left:14%;
   width:50%;
}
.tfour{
    position: absolute;
    top: 57%;
   left:14%;
   width:50%;
}
.tfive{
    position: absolute;
    top: 71%;
   left:14%;
   width:50%;
}
.tsix{
    position: absolute;
    top:85%;
   left:14%;
   width:50%;
}
.tseven{
    position: absolute;
    top:99%;
    left:14%;
   width:50%;
    margin-bottom: 10%;
}
.appvideo{
    position: absolute;
    top:15%;
    left:13%;
    width: 51%;
}
.none{
   position:absolute;
   top:12.5%;
   left:13%;
   width:50%;
}
.ntwo{
    position: absolute;
    top:47.5%;
    left: 13%;
    width: 50%;
}
.nthree{
    position: absolute;
    top: 74.3%;
    left: 13%;
    width: 50%;
}
.nfour{
    position: absolute;
    top:103.5%;
    left: 13%;
    width: 50%;
}
.nfive{
    position: absolute;
    top: 138.5%;
    left: 13%;
    width: 50%;
}
.nsix{
    position: absolute;
    top: 165.8%;
     left: 13%;
    width: 50%;
}
.nseven{
    position: absolute;
    top: 176%;
    left: 13%;
    width: 50%;
}
.neight{
    position: absolute;
    top:211%;
     left: 13%;
    width: 50%;
}
.nnine{
    position: absolute;
    top: 240.2%;
    left: 13%;
    width: 50%;
    padding-bottom: 15%;
}
.hone{
   position:absolute;
   top:12.5%;
   left:13%;
   width:50%;
}
.htwo{
    position: absolute;
    top:49%;
    left: 13%;
    width: 50%;
}
.hthree{
    position: absolute;
    top:77.5%;
    left: 13%;
    width: 50%;
}
.hfour{
    position: absolute;
    top:85.7%;
    left: 13%;
    width: 50%;
}
.cone{
   position:absolute;
   top:12.5%;
   left:13%;
   width:51%;
}
.ctwo{
    position: absolute;
    top:39.3%;
    left: 13%;
    width: 51%;
}
.cthree{
    position: absolute;
    top:73.5%;
    left: 13%;
    width: 51%;
}
.cfour{
    position: absolute;
    top:91%;
    left: 13%;
    width: 51%;
}
.cfive{
    position: absolute;
    top:104.1%;
    left: 13%;
    width: 51%;
}
.csix{
    position: absolute;
    top:114.8%;
    left: 13%;
    width: 51%;
    margin-bottom: 20%;
}
.fontyiqi{
    font-family: "Lora";
    font-size: 0.8em;
    line-height:1em;
    color: #7553FF;
}
.right{
    text-align: left;
    position: absolute;
    top:18%;
    left:12%;
}
.left{
    text-align: left;
    position: absolute;
    top:40%;
    left:12%;
}
}