@font-face {
    font-family: "ptmono-regular";
	src: url("../fonts/PTM55F.ttf");
}
@font-face{
    font-family: "ptmono-bold";
	src: url("../fonts/PTM75F.ttf");
}
@charset "UTF-8";

html{
    width: 100%;
    position: relative;
    height:100%;
    overflow-x: hidden;
}
body{
    width: 100%;
    position: relative;
    height:100%;
    margin: 0;
    overflow-x: hidden;
    font-size: 24px;
    line-height: 1.2em;
}
#apprenticeship{
    width: 60%;
}
.resume_info_type{
    display: inline-block;
    width: calc((100% - 64px) / 4);
    vertical-align: top;
    margin-right: 10px;
    height: 100%;
    
}
.resume_info_type>ul{
    height:calc(100% - 1.2em);
    overflow: auto;
}
.resume_info_type>ul::-webkit-scrollbar {
  width: 14px;
  border: 1px solid black; /* or add it to the track */
}
.resume_info_type>ul::-webkit-scrollbar-thumb {
  width: 14px;
  border: 1px solid black; /* or add it to the track */
    background: #eeeeee;
}
.underline{
    text-decoration: underline;
}
.school, .organization, .event, .title{
    font-family: "ptmono-bold";
}
#resume_quit{
    cursor: pointer;
    font-family: "ptmono-regular";
    font-size: 24px;
}
.invisible_background{
    position:fixed;
    top:0px;
    left:0px;
    margin: 0px;
    z-index: 8888;
    width: 100%;
    height:100%;
    color:red;
    display: none;
}
.resume{
    position:fixed;
    top:0px;
    left:0px;
    margin: 0px;
    z-index: 999999999998888;
    width: 100%;
    height:100%;
    display: none;
}
.resume_quit{
    position:absolute;
    background-color:white;
    top:0px;
    bottom: 0px;
    width: 100%;
    height:100%;
    z-index: -1;
}
.resumebox{
    height:calc(100% - 1.2em);
}

.resume_quit_2{
    display: inline-block;
    /*-webkit-flex:1;
    flex:1;*/
}
.contact{
    z-index: 9999999999999999999999999999999999999;
    position: fixed;
    bottom: 5em;
    left: 0px;
    text-shadow: 0px 0px 5px white;

}
.blur{
    position:absolute;
    width:100%;
    height:100%;
    z-index: -1;
    background-color: white;
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);   
    filter: blur(10px);
}

.visible{
    display: block;
}
a{
    color:black;
}
li{
    list-style: none;
}
p{
    line-height: 1.2em;
    margin:0;
}
ul{
    margin: 0;
    padding: 0;
}
p{
    font-family: "ptmono-regular";
    font-size: 24px;
    }
.copyright_info{
    z-index: 999;
    position: fixed;
    bottom: 0;
    left 0;
    }
.info_and_nav{
    position: fixed;
    top:0px;
    left: 0px;
    display: block;
    width: 13%;
    height: auto;
    min-width: 94px;
    z-index: 999999999;
    }
.info{
    display: block;
    width: auto;
    height: auto; 
    }
.nav{
    display: block;
    width: auto;
    height: auto; 
    }
.nav>ul{
    height:auto;
    z-index: 99999999;
}
.nav>ul.fold{
    height: 0px;
}
.anime{
    transition: all 1s ease 0s;
    overflow: hidden;
}
.nav>ul>li{
    font-size: 24px;
    }
.works{
    display: inline-block;
    position: absolute;
    left: 15%;
    width: 85%;
    }
.single_work{
        display: block;
        width: 100%;
    }
.work_title_and_info{
        vertical-align: top;
        display: inline-block;
        width:43%;
    }
.work_title{
        display: block;
        width:100%;
    }
.big_type{
        font-size: 48px;        
    }
.work_info{
        width:100%;
        display: block;
    }
.type{
        display: inline-block;
        width:48%;
        margin-right: 2%;
        vertical-align: top;
    }

/*从这里开始*/
.year{
        display: inline-block;
        width:48%;
        vertical-align: top;
    }
.work_img{
    vertical-align: top;
    display: inline-block;
    width:55%;
    height: 700px;
    position:relative;
    margin-bottom: 10%;
    }
.page_top_img{
    padding-top:0.5em;
}
.video{
    position: absolute;
    top:0.4em;
    width: 100%;
    height:auto;
}
.img-1{
    width: 120%;
    height: 100%;
    background-image: url(../data/duck.png);
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    left:-3.5%;
    }
.img0{
    width: 120%;
    height: 100%;
    background-image: url(../data/infinite.png);
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    left:-3.5%;
    }
.img1{
    width: 120%;
    height: 100%;
    background-image: url(../data/IMG_0939.png);
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    left:-10%;
    }
.img2{
    width: 120%;
    height: 100%;
    background-image: url(../data/Poster_1_compressed.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    left:0%;
    }
.img3{
    width: 120%;
    height: 100%;
    background-image: url(../data/Poster_2_compressed.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    left:0%;
    }
/*到这里结束*/
.img13{
    width: 120%;
    height: 100%;
    background-image: url(../data/type_specimen-01_compressed.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    left:0;
    }

@keyframes postershowcase {
  0%   {background-image: url(../data/Now_Playing-01_compressed.jpg)}
  20%  {background-image: url(../data/Now_Playing-02_compressed.jpg)}
  40%  {background-image: url(../data/Now_Playing-03_compressed.jpg)}
  80% {background-image: url(../data/Now_Playing-04_compressed.jpg)}
}
@keyframes steve {
  0% {background-image: url(../data/ladder_png/ladder_1.png)}
  7.14% {background-image: url(../data/ladder_png/ladder_2.png)}
  14.28%  {background-image: url(../data/ladder_png/ladder_3.png)}
  21.42% {background-image: url(../data/ladder_png/ladder_4.png)}
  28.56% {background-image: url(../data/ladder_png/ladder_5.png)}
  35.70% {background-image: url(../data/ladder_png/ladder_6.png)}
  42.84% {background-image: url(../data/ladder_png/ladder_7.png)}
  49.98% {background-image: url(../data/ladder_png/ladder_8.png)}
  57.12% {background-image: url(../data/ladder_png/ladder_9.png)}
  64.26% {background-image: url(../data/ladder_png/ladder_10.png)}
  71.4% {background-image: url(../data/ladder_png/ladder_111.png)}
  78.54% {background-image: url(../data/ladder_png/ladder_112.png)}
  85.68% {background-image: url(../data/ladder_png/ladder_13.png)}
  92.82% {background-image: url(../data/ladder_png/ladder_14.png)}
}
@keyframes gdhistory {
  0% {background-image: url(../data/gd_history/20220111153531396_0001psed.jpg)}
  16.66667% {background-image: url(../data/gd_history/20220111153531396_0002psed.jpg)}
  33.33333% {background-image: url(../data/gd_history/20220111153531396_0003psed.jpg)}
  50% {background-image: url(../data/gd_history/20220111153531396_0004psed.jpg)}
  66.66667% {background-image: url(../data/gd_history/20220111153531396_0005psed.jpg)} 
  83.33333% {background-image: url(../data/gd_history/20220111153531396_0006psed.jpg)}
  
}
@keyframes younevercantell{
  0% {background-image: url(../data/you_never_can_tell/20220111230337234_0001.jpg)}
  5% {background-image: url(../data/you_never_can_tell/20220111230337234_0003.jpg)}
  10% {background-image: url(../data/you_never_can_tell/20220111230337234_0004.jpg)}
  15% {background-image: url(../data/you_never_can_tell/20220111230337234_0005.jpg)}
  20% {background-image: url(../data/you_never_can_tell/20220111230337234_0006.jpg)}
  25% {background-image: url(../data/you_never_can_tell/20220111230337234_0007.jpg)}
  30% {background-image: url(../data/you_never_can_tell/20220111230337234_0008.jpg)}
  35% {background-image: url(../data/you_never_can_tell/20220111230337234_0009.jpg)}
  40% {background-image: url(../data/you_never_can_tell/20220111230337234_0010.jpg)}
  45% {background-image: url(../data/you_never_can_tell/20220111230337234_0011.jpg)}
  50% {background-image: url(../data/you_never_can_tell/20220111230337234_0012.jpg)}
  55% {background-image: url(../data/you_never_can_tell/20220111230337234_0013.jpg)}
  60% {background-image: url(../data/you_never_can_tell/20220111230337234_0014.jpg)}
  65% {background-image: url(../data/you_never_can_tell/20220111230337234_0015.jpg)}
  70% {background-image: url(../data/you_never_can_tell/20220111230337234_0016.jpg)}
  75% {background-image: url(../data/you_never_can_tell/20220111230337234_0017.jpg)}
  80% {background-image: url(../data/you_never_can_tell/20220111230337234_0018.jpg)}
  85% {background-image: url(../data/you_never_can_tell/20220111230337234_0019.jpg)}
  90% {background-image: url(../data/you_never_can_tell/20220111230337234_0020.jpg)}
  95% {background-image: url(../data/you_never_can_tell/20220111230337234_0021.jpg)}
    
  
}
@keyframes gunsgermssteel {
  0% {background-image: url(../data/guns_germs_and_steel/IMG_6160.png)}
  14.2857% {background-image: url(../data/guns_germs_and_steel/IMG_6189.png)}
  28.5714% {background-image: url(../data/guns_germs_and_steel/IMG_6273.png)}
  42.8571% {background-image: url(../data/guns_germs_and_steel/IMG_6399.png)}
  57.1428% {background-image: url(../data/guns_germs_and_steel/IMG_6422.png)} 
  71.4285% {background-image: url(../data/guns_germs_and_steel/IMG_6509.png)}
  85.7142% {background-image: url(../data/guns_germs_and_steel/IMG_6529.png)}
  
}
@keyframes polishing {
  0% {background-image: url(../data/What_graphic_designers_do/1.jpg)}
  7.69%  {background-image: url(../data/What_graphic_designers_do/2.jpg)}
  15.38% {background-image: url(../data/What_graphic_designers_do/3.jpg)}
  23.08% {background-image: url(../data/What_graphic_designers_do/4.jpg)}
  30.76% {background-image: url(../data/What_graphic_designers_do/5.jpg)}
  38.46% {background-image: url(../data/What_graphic_designers_do/6.jpg)}
  46.15% {background-image: url(../data/What_graphic_designers_do/7.jpg)}
  53.84% {background-image: url(../data/What_graphic_designers_do/8.jpg)}
  61.54% {background-image: url(../data/What_graphic_designers_do/9.jpg)}
  69.23% {background-image: url(../data/What_graphic_designers_do/10.jpg)}
  76.92% {background-image: url(../data/What_graphic_designers_do/11.jpg)}
  84.61% {background-image: url(../data/What_graphic_designers_do/12.jpg)}
  92.30% {background-image: url(../data/What_graphic_designers_do/13.jpg)}
}
@keyframes history{
  0% {background-image: url(../data/history_png/the_history_of_the_world_compressed_2-1.png)}
  12.5%  {background-image: url(../data/history_png/the_history_of_the_world_compressed_2-4.png)}
  25% {background-image: url(../data/history_png/the_history_of_the_world_compressed_2-8.png)}
  37.5% {background-image: url(../data/history_png/the_history_of_the_world_compressed_2-9.png)}
  50% {background-image: url(../data/history_png/the_history_of_the_world_compressed_2-16.png)}
  62.6% {background-image: url(../data/history_png/the_history_of_the_world_compressed_2-22.png)}
  75% {background-image: url(../data/history_png/the_history_of_the_world_compressed_2-25.png)}
    87.5% {background-image: url(../data/history_png/the_history_of_the_world_compressed_2-27.png)}
}
@keyframes sharp{
  0% {background-image: url(../data/sharp_png/sharpness_1.png)}
  20%  {background-image: url(../data/sharp_png/sharpness_2.png)}
  40% {background-image: url(../data/sharp_png/sharpness_6.png)}
  60% {background-image: url(../data/sharp_png/sharpness_11.png)}
  80% {background-image: url(../data/sharp_png/sharpness_20.png)}
}

.img14{
        width: 80%;
        height: 100%;
        background-image: url(../data/Now_Playing-01_compressed.jpg);
        animation-name: postershowcase;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0;
    }
.img15{
        width: 80%;
        height: 100%;
        background-image: url(../data/ladder_png/ladder_1.png);
        animation-name: steve;
        animation-duration: 14s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-6%;
        top:-4%;
        /*left:10%;*/
    }
.img16{
        width: 80%;
        height: 100%;
        background-image: url(../data/What_graphic_designers_do/1.jpg);
        animation-name: polishing;
        animation-duration: 13s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
.img17{
        width: 80%;
        height: 100%;
        background-image: url(../data/print-to-screen.gif);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0;
    }
.img18{
        width: 80%;
        height: 100%;
        background-image: url(../data/history_png/the_history_of_the_world_compressed_2-1.png);
        animation-name: history;
        animation-duration: 8s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-5%;
        top:-5%;
    }
.img19{
        width: 80%;
        height: 100%;
        background-image: url(../data/sharp_png/sharpness_1.png);
        animation-name: sharp;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-4%;
    }
.img20{
        width: 80%;
        height: 100%;
        background-image: url(../data/gd_history/20220111153531396_0001psed.jpg);
        animation-name: gdhistory;
        animation-duration: 6s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-3%;
    }
.img21{
        width: 136%;
        height: 136%;
        left:-24%;
        top: -18%;
        background-image: url(../data/guns_germs_and_steel/IMG_6160.png);
        animation-name: gunsgermssteel;
        animation-duration: 7s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        /*left:10%;*/
    }
.img22{ top:-5%;
        left: -3%;
        width: 100%;
        height: 110%;
        background-image: url(../data/you_never_can_tell/20220111230337234_0001.jpg);
        animation-name: younevercantell;
        animation-duration: 60s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        
    }
/*.img23{ top:-5%;
        left: -3%;
        width: 100%;
        height: 110%;
        background-image: url(../data/a_hopeful_story.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        box-shadow: 5px 5px 20px #888888;
        
    }*/
.work_img>img{
    width: 80%;
    height:auto;
    box-shadow: 5px 5px 20px #888888;
}
.work_img>img.noshadow{
    width: 100%;
    height:100%;
    object-fit: contain;
    box-shadow: none;
}
.img4{
    width: 120%;
    height: 100%;
    background-image: url(../data/IMG_6537_compressed.png);
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    left:10%;
    }
.img5{
    width: 120%;
    height: 100%;
    background-image: url(../data/IMG_6568_compressed.png);
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    left:10%;
    }
.img6{
    width: 120%;
    height: 100%;
    background-image: url(../data/website_screen-_shot_00105.gif);
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    left:-3.5%;
    }
.img7{
        width: 55%;
        height: 100%;
        background-image: url(../data/kim_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
        z-index: -1;
    }
.img8{
        width: 55%;
        height: 100%;
        background-image: url(../data/little_mao_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:45%;
        z-index: -1;
    }
.img9{
        width: 55%;
        height: 100%;
        background-image: url(../data/Poster_3_cmpressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
        z-index: -1;
    }
.img10{
        width: 55%;
        height: 100%;
        background-image: url(../data/logo_1.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        top:20%;
        left:45%;
        z-index: -1;
    }
.img11{
        width: 120%;
        height: 145%;
        background-image: url(../data/IMG_6687_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
        top:-5%;
    }
.img12{
        width: 140%;
        height: 120%;
        background-image: url(../data/IMG_6454_2.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }

@media screen and (min-width:1435px){
    /*.a{
        background-color: red;
    }*/
    p{
        font-family: "ptmono-regular";
        font-size: 24px;
    }
    .copyright_info{
        z-index: 999;
    position: fixed;
    bottom: 0;
    left 0;
    }
    .info_and_nav{
        position: fixed;
        top:0px;
        left: 0px;
        display: block;
        width: 13%;
        height: auto;    
    }
    .info{
        display: block;
        width: auto;
        height: auto; 
    }
    .nav{
        display: block;
        width: auto;
        height: auto; 
    }
    .nav>ul>li{
        font-size: 24px;
    }
    .works{
        display: inline-block;
        position: absolute;
        left: 15%;
        width: 85%;
    }
    .single_work{
        display: block;
        width: 100%;
    }
    .work_title_and_info{
        vertical-align: top;
        display: inline-block;
        width:43%;
    }
    .work_title{
        display: block;
        width:100%;
    }
    .big_type{
        font-size: 48px;        
    }
    .work_info{
        width:100%;
        display: block;
    }
    .type{
        display: inline-block;
        width:48%;
        margin-right: 2%;
        vertical-align: top;
    }
     .year{
        display: inline-block;
        width:48%;
        vertical-align: top;
    }
    .work_img{
        vertical-align: top;
        display: inline-block;
        width:55%;
        height: 500px;
        position:relative;
        margin-bottom: 10%;
    }
    .img1{
        width: 120%;
        height: 110%;
        background-image: url(../data/IMG_0939.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }
    .img2{
        width: 120%;
        height: 100%;
        background-image: url(../data/Poster_1_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img3{
        width: 120%;
        height: 100%;
        background-image: url(../data/Poster_2_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img13{
        width: 120%;
        height: 100%;
        background-image: url(../data/type_specimen-01_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img14{
        width: 120%;
        height: 100%;
        background-image: url(../data/Now_Playing-01_compressed.jpg);
        animation-name: postershowcase;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0;
    }
    .img15{
        width: 120%;
        height: 100%;
        background-image: url(../data/ladder_png/ladder_1.png);
        animation-name: steve;
        animation-duration: 14s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-6%; 
        top:-4%;
    }
.img16{
        width: 80%;
        height: 100%;
        background-image: url(../data/What_graphic_designers_do/1.jpg);
        animation-name: polishing;
        animation-duration: 13s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img17{
        width: 80%;
        height: 100%;
        background-image: url(../data/print-to-screen.gif);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0;
    }
    .img18{
        width: 80%;
        height: 100%;
        background-image: url(../data/history_png/the_history_of_the_world_compressed_2-1.png);
        animation-name: history;
        animation-duration: 8s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-5%;
        top:-5%;
    }.img19{
        width: 80%;
        height: 100%;
        background-image: url(../data/sharp_png/sharpness_1.png);
        animation-name: sharp;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-4%;
    }
    .img4{
        width: 55%;
        height: 100%;
        background-image: url(../data/IMG_6537_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }
    .img5{
        width: 55%;
        height: 100%;
        background-image: url(../data/IMG_6568_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:45%;
    }
    .img6{
        width: 120%;
        height: 100%;
        background-image: url(../data/website_screen _shot.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-3.5%;
    }
    .img7{
        width: 55%;
        height: 100%;
        background-image: url(../data/kim_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
        z-index: -1;
    }
    .img8{
        width: 55%;
        height: 100%;
        background-image: url(../data/little_mao_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:45%;
        z-index: -1;
    }
    .img9{
        width: 55%;
        height: 100%;
        background-image: url(../data/Poster_3_cmpressed.jpg)
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
        z-index: -1;
    }
    .img10{
        width: 35%;
        height: 100%;
        background-image: url(../data/logo_1.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        top:20%;
        left:55%;
        z-index: -1;
    }
    .img11{
        width: 120%;
        height: 145%;
        background-image: url(../data/IMG_6687_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
        top:-5%;
    }
    .img12{
        width: 140%;
        height: 120%;
        background-image: url(../data/IMG_6454_2.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }

}

@media screen and (min-width:1080px) and (max-width:1435px){
    /*.a{
        background-color: red;
    }*/
    p{
        font-family: "ptmono-regular";
        font-size: 18px;
    }
    .copyright_info{
        z-index: 999;
    position: fixed;
    bottom: 0;
    left 0;
    }
    .info_and_nav{
        position: fixed;
        top:0px;
        left: 0px;
        display: block;
        width: 13%;
        height: auto;    
    }
    .info{
        display: block;
        width: auto;
        height: auto; 
    }
    .nav{
        display: block;
        width: auto;
        height: auto; 
    }
    .nav>ul>li{
        font-size: 18px;
    }
    .works{
        display: inline-block;
        position: absolute;
        left: 15%;
        width: 85%;
    }
    .single_work{
        display: block;
        width: 100%;
    }
    .work_title_and_info{
        vertical-align: top;
        display: inline-block;
        width:43%;
    }
    .work_title{
        display: block;
        width:100%;
    }
    .big_type{
        font-size: 36px;        
    }
    .work_info{
        width:100%;
        display: block;
    }
    .type{
        display: inline-block;
        width:48%;
        margin-right: 2%;
        vertical-align: top;
    }
     .year{
        display: inline-block;
        width:48%;
        vertical-align: top;
    }
    .work_img{
        vertical-align: top;
        display: inline-block;
        width:55%;
        height: 500px;
        position:relative;
        margin-bottom: 10%;
    }
    .img1{
        width: 120%;
        height: 110%;
        background-image: url(../data/IMG_0939.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }
    .img2{
        width: 120%;
        height: 100%;
        background-image: url(../data/Poster_1_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img3{
        width: 120%;
        height: 100%;
        background-image: url(../data/Poster_2_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img13{
        width: 120%;
        height: 100%;
        background-image: url(../data/type_specimen-01_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0;
    }
    .img14{
        width: 120%;
        height: 100%;
        background-image: url(../data/Now_Playing-01_compressed.jpg);
        animation-name: postershowcase;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0;
    }.img15{
        width: 100%;
        height: 100%;
        background-image: url(../data/ladder_png/ladder_1.png);
        animation-name: steve;
        animation-duration: 14s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-6%;
        top:-4%;
        
        /*left:10%;*/
    }
.img16{
        width: 80%;
        height: 100%;
        background-image: url(../data/What_graphic_designers_do/1.jpg);
        animation-name: polishing;
        animation-duration: 13s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img17{
        width: 80%;
        height: 100%;
        background-image: url(../data/print-to-screen.gif);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0;
    }
    .img18{
        width: 80%;
        height: 100%;
        background-image: url(../data/history_png/the_history_of_the_world_compressed_2-1.png);
        animation-name: history;
        animation-duration: 8s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-5%;
        top:-5%;
    }.img19{
        width: 80%;
        height: 100%;
        background-image: url(../data/sharp_png/sharpness_1.png);
        animation-name: sharp;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-4%;
    }
    .img4{
        width: 55%;
        height: 100%;
        background-image: url(../data/IMG_6537_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }
    .img5{
        width: 55%;
        height: 100%;
        background-image: url(../data/IMG_6568_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:45%;
    }
    .img6{
        width: 120%;
        height: 100%;
        background-image: url(../data/website_screen _shot.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-3.5%;
    }
    .img7{
        width: 55%;
        height: 100%;
        background-image: url(../data/kim_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
        z-index: -1;
    }
    .img8{
        width: 55%;
        height: 100%;
        background-image: url(../data/little_mao_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:45%;
        z-index: -1;
    }
    .img9{
        width: 55%;
        height: 100%;
        background-image: url(../data/Poster_3_cmpressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
        z-index: -1;
    }
    .img10{
        width: 35%;
        height: 100%;
        background-image: url(../data/logo_1.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        top:20%;
        left:55%;
        z-index: -1;
    }
    .img11{
        width: 120%;
        height: 145%;
        background-image: url(../data/IMG_6687_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
        top:-5%;
    }
    .img12{
        width: 140%;
        height: 120%;
        background-image: url(../data/IMG_6454_2.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }

}
@media screen and (min-width:1080px) and (max-width:1258px){
    .img1{
        width: 135%;
        height: 110%;
        background-image: url(../data/IMG_0939.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-20%;
    }
}

@media screen and (min-width:720px) and (max-width:1080px){
    /*.a{
        background-color: red;
    }*/
    p{
        font-family: "ptmono-regular";
        font-size: 12px;
    }
    .copyright_info{
        z-index: 999;
    position: fixed;
    bottom: 0;
    left 0;
    }
    .info_and_nav{
        position: fixed;
        top:0px;
        left: 0px;
        display: block;
        width: 13%;
        height: auto;    
    }
    .info{
        display: block;
        width: auto;
        height: auto; 
    }
    .nav{
        display: block;
        width: auto;
        height: auto; 
    }
    .nav>ul>li{
        font-size: 12px;
    }
    .works{
        display: inline-block;
        position: absolute;
        left: 15%;
        width: 85%;
    }
    .single_work{
        display: block;
        width: 100%;
    }
    .work_title_and_info{
        vertical-align: top;
        display: inline-block;
        width:43%;
    }
    .work_title{
        display: block;
        width:100%;
    }
    .big_type{
        font-size: 24px;        
    }
    .work_info{
        width:100%;
        display: block;
    }
    .type{
        display: inline-block;
        width:48%;
        margin-right: 2%;
        vertical-align: top;
    }
     .year{
        display: inline-block;
        width:48%;
        vertical-align: top;
    }
    .work_img{
        vertical-align: top;
        display: inline-block;
        width:55%;
        height: 500px;
        position:relative;
        margin-bottom: 10%;
    }
    .img1{
        width: 140%;
        height: 110%;
        background-image: url(../data/IMG_0939.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-25%;
    }
    .img2{
        width: 120%;
        height: 100%;
        background-image: url(../data/Poster_1_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img3{
        width: 120%;
        height: 100%;
        background-image: url(../data/Poster_2_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img13{
        width: 120%;
        height: 100%;
        background-image: url(../data/type_specimen-01_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img14{
        width: 120%;
        height: 100%;
        background-image: url(../data/Now_Playing-01_compressed.jpg);
        animation-name: postershowcase;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0;
    }
    .img15{
        width: 100%;
        height: 100%;
        background-image: url(../data/ladder_png/ladder_1.png);
        animation-name: steve;
        animation-duration: 14s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-6%;
        top:-4%;
    }
.img16{
        width: 80%;
        height: 100%;
        background-image: url(../data/What_graphic_designers_do/1.jpg);
        animation-name: polishing;
        animation-duration: 13s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img17{
        width: 80%;
        height: 100%;
        background-image: url(../data/print-to-screen.gif);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0;
    }.img18{
        width: 80%;
        height: 100%;
        background-image: url(../data/history_png/the_history_of_the_world_compressed_2-1.png);
        animation-name: history;
        animation-duration: 8s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-5%;
        top:-5%;
    }.img19{
        width: 80%;
        height: 100%;
        background-image: url(../data/sharp_png/sharpness_1.png);
        animation-name: sharp;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-4%;
    }
    .img4{
        width: 55%;
        height: 100%;
        background-image: url(../data/IMG_6537_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }
    .img5{
        width: 55%;
        height: 100%;
        background-image: url(../data/IMG_6568_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:45%;
    }
    .img6{
        width: 110%;
        height: 100%;
        background-image: url(../data/website_screen _shot.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-3.5%;
    }
    .img7{
        width: 55%;
        height: 100%;
        background-image: url(../data/kim_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
        z-index: -1;
    }
    .img8{
        width: 55%;
        height: 100%;
        background-image: url(../data/little_mao_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:45%;
        z-index: -1;
    }
    .img9{
        width: 55%;
        height: 100%;
        background-image: url(../data/Poster_3_cmpressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
        z-index: -1;
    }
    .img10{
        width: 35%;
        height: 100%;
        background-image: url(../data/logo_1.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        top:20%;
        left:55%;
        z-index: -1;
    }
    .img11{
        width: 120%;
        height: 145%;
        background-image: url(../data/IMG_6687_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
        top:-5%;
    }
    .img12{
        width: 140%;
        height: 120%;
        background-image: url(../data/IMG_6454_2.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }

}
@media screen and (min-width:720px) and (max-width:1080px){
    .sloped{
        height:375px;
    }
    .shorted{
        height:275px;
    }
}

@media screen and (min-width:0px) and (max-width:720px){
    /*.a{
        background-color: red;
    }*/
    p{
        font-family: "ptmono-regular";
        font-size: 12px;
    }
    .copyright_info{
        z-index: 999;
    position: fixed;
    bottom: 0;
    left 0;
    }
    .info_and_nav{
        position: fixed;
        top:0px;
        left: 0px;
        display: block;
        width: 85%;
        height: auto;    
    }
    .info{
        vertical-align: top;
        display: inline-block;
        width: 49%;
        height: auto; 
    }
    .nav{
        vertical-align: top;
        display: inline-block;
        width: 49%;
        height: auto; 
    }
    .nav>ul{
    height:100px;
    z-index: 99999999;
    }
    .nav>ul>li{
        font-size: 12px;
    }
    .works{
        margin-top: 84px;
        display: inline-block;
        position: absolute;
        left: 0%;
        width: 100%;
    }
    .single_work{
        display: block;
        width: 100%;
    }
    .work_title_and_info{
        vertical-align: top;
        display: inline-block;
        width:43%;
    }
    .work_title{
        display: block;
        width:100%;
    }
    .big_type{
        font-size: 24px;        
    }
    .work_info{
        width:100%;
        display: block;
    }
    .type{
        display: inline-block;
        width:48%;
        margin-right: 2%;
        vertical-align: top;
    }
     .year{
        display: inline-block;
        width:48%;
        vertical-align: top;
    }
    .work_img{
        vertical-align: top;
        display: inline-block;
        width:55%;
        height: 500px;
        position:relative;
        margin-bottom: 10%;
    }
    .img1{
        width: 120%;
        height: 110%;
        background-image: url(../data/IMG_0939.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }
    .img2{
        width: 80%;
        height: 100%;
        background-image: url(../data/Poster_1_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img3{
        width: 80%;
        height: 100%;
        background-image: url(../data/Poster_2_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
    .img13{
        width: 80%;
        height: 100%;
        background-image: url(../data/type_specimen-01_compressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }   
    .img14{
        width: 120%;
        height: 100%;
        background-image: url(../data/Now_Playing-01_compressed.jpg);
        animation-name: postershowcase;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0;
    }
.img15{
        width: 100%;
        height: 100%;
        background-image: url(../data/ladder_png/ladder_1.png);
        animation-name: steve;
        animation-duration: 14s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-6%;
        top:-4%;
    }
.img20{
        width: 100%;
        height: 100%;
        background-image: url(../data/gd_history/20220111153531396_0001psed.jpg);
        animation-name: gdhistory;
        animation-duration: 14s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-3%;
    }
.img16{
        width: 80%;
        height: 100%;
        background-image: url(../data/What_graphic_designers_do/1.jpg);
        animation-name: polishing;
        animation-duration: 13s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
    }
.img17{
        width: 80%;
        height: 100%;
        background-image: url(../data/print-to-screen.gif);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0;
    }
    .img18{
        width: 80%;
        height: 100%;
        background-image: url(../data/history_png/the_history_of_the_world_compressed_2-1.png);
        animation-name: history;
        animation-duration: 8s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-5%;
        top:-5%;
}
    .img19{
        width: 80%;
        height: 100%;
        background-image: url(../data/sharp_png/sharpness_1.png);
        animation-name: sharp;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-4%;
    }

    .img4{
        width: 55%;
        height: 100%;
        background-image: url(../data/IMG_6537_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }
    .img5{
        width: 55%;
        height: 100%;
        background-image: url(../data/IMG_6568_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:45%;
    }
    .img6{
        width: 120%;
        height: 100%;
        background-image: url(../data/website_screen _shot.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-3.5%;
    }
    .img7{
        width: 55%;
        height: 100%;
        background-image: url(../data/kim_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
        z-index: -1;
    }
    .img8{
        width: 55%;
        height: 100%;
        background-image: url(../data/little_mao_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:45%;
        z-index: -1;
    }
    .img9{
        width: 55%;
        height: 100%;
        background-image: url(../data/Poster_3_cmpressed.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:0%;
        z-index: -1;
    }
    .img10{
        width: 35%;
        height: 100%;
        background-image: url(../data/logo_1.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        top:20%;
        left:55%;
        z-index: -1;
    }
    .img11{
        width: 120%;
        height: 145%;
        background-image: url(../data/IMG_6687_compressed.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
        top:0%;
    }
    .img12{
        width: 140%;
        height: 120%;
        background-image: url(../data/IMG_6454_2.png);
        background-size: contain;
        background-repeat: no-repeat;
        position:absolute;
        left:-10%;
    }
    .sloped{
        height:335px;
    }
        .shorted{
        height:245px;
    }
}

@media screen and (min-width:0px) and (max-width:390px){
    .resume_info_type{
        width: 100%;
        height: auto;
    }
    .resumebox{
        overflow: scroll;
    }
    
}