@import url("reset.css");
    @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
    @import url('https://fonts.googleapis.com/css?family=Raleway:500,600,700,900,bold,black');
    body {
        font-family: 'Raleway', Arial, Helvetica, "微軟正黑體", sans-serif;
        background-color: #fff;
    }
    
    .headerWrap {
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 1.9px 4.1px rgba(0, 0, 0, 0.045), 0 15px 33px rgba(0, 0, 0, 0.09);
        position: sticky;
        top: 0;
        z-index: 99999;
    }
    
    .header {
        background-color: #fff;
        padding-left: 25px;
        padding-right: 25px;
        z-index: 88888;
    }
    
    .logoWrap img {
        float: left;
        margin-top: 17px;
        margin-bottom: 17px;
    }
    
    .logo {
        display: none;
    }
    
    .header ul.open {
        display: inline-block;
        height: calc(100vh - 70px);
    }
    
    .header ul {
        /* ul closed */
        clear: both;
        display: hidden;
        height: 0px;
        transition: .35s linear;
        z-index: 77777;
    }
    
    .header li {
        width: calc(100vw - 50px);
        text-align: center;
        padding-top: 5%;
    }
    
    .header li a {
        text-decoration: none;
        line-height: 70px;
        color: #838383;
        font-size: 40px;
        font-weight: 700;
    }
    
    .header li :hover {
        color: #00E386;
    }
    
    .more {
        display: flex;
        height: 36px;
        width: 40px;
        transform: translate(50%, 50%);
        background-color: #fff;
        float: right;
        margin-right: 25px;
        cursor: pointer;
    }
    
    .hamburger {
        width: 40px;
        height: 4px;
        background-color: #838383;
        transform: translate(0%, 0%);
        position: absolute;
        top: 50%;
        transition: .35s;
    }
    
    .hamburgerTop {
        top: 10%;
    }
    
    .hamburgerBottom {
        top: 90%;
    }
    
    .close.hamburgerTop {
        transform: rotate(45deg);
        top: 50%;
    }
    
    .close.hamburgerBottom {
        transform: rotate(-45deg);
        top: 50%;
    }
    
    .close.hamburgerMid {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity .35s linear;
    }
    /* mobile font size  font size font size font size */
    
    h1 {
        font-size: 40px;
        font-weight: bold;
        color: #212121;
    }
    
    h2 {
        font-size: 36px;
        font-weight: bolder;
        color: #212121;
    }
    
    h3 {
        font-size: 32px;
        font-weight: bold;
        color: #212121;
    }
    
    h4 {
        font-size: 24px;
        font-weight: bolder;
        color: #212121;
    }
    
    h6 {
        font-size: 14px;
        font-weight: 400;
        color: #212121;
    }
    
    a {
        font-size: 18px;
        font-weight: 600;
        line-height: 1.5;
        color: #212121;
    }
    
    a:hover {
        color: #00E386;
    }
    
    p {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.5;
        color: #838383;
    }
    /*  banner   banner   banner   banner   banner   banner   banner */
    
    .banner {
        background-color: #fff;
        padding: 50px 45px;
    }
    
    .banner h1 {
        padding-bottom: 56px;
    }
    
    .banner .decorLine {
        width: 230px;
        height: 3px;
        background-color: #00FF97;
        position: relative;
        top: -35px;
        left: -25px;
    }
    
    .banner p {
        padding-bottom: 30px;
    }
    
    .banner span {
        color: #00E386;
        border-bottom: 1px solid #00E386;
    }
    /* work link   work link   work link   work link */
    
    .workLink ul {
        display: flex;
        list-style: none;
    }
    
    .workLink li {
        padding: 15px 10px;
    }
    
    .workLink li a.linkedin {
        display: flex;
        width: 24px;
        height: 24px;
        background-image: url(/img/icn_linkedin_default.svg);
    }
    
    .workLink li a.behance {
        display: flex;
        width: 24px;
        height: 24px;
        background-image: url(/img/icn_behance_default.svg);
    }
    
    .workLink li a.cakeresume {
        display: flex;
        width: 24px;
        height: 24px;
        background-image: url(/img/icn_cakeresume_dafault.svg);
    }
    
    .workLink li a.linkedin:hover {
        background-image: url(/img/icn_linkedin_hover.svg);
    }
    
    .workLink li a.behance:hover {
        background-image: url(/img/icn_behance_hover.svg);
    }
    
    .workLink li a.cakeresume:hover {
        background-image: url(/img/icn_cakeresume_hover.svg);
    }
    /* projects    projects  projects  projects  projects  projects  */
    
    .caseWrap {
        background-color: #fff;
        padding: 50px 25px;
    }
    
    .caseWrap h2 {
        padding-bottom: 60px;
        padding-left: 20px;
    }
    
    .caseWrap .decorLine {
        width: 130px;
        height: 3px;
        background-color: #00FF97;
        position: relative;
        top: -45px;
        left: -5px;
    }
    
    .caseWrap .info {
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0 1.9px 4.1px rgba(0, 0, 0, 0.045), 0 15px 33px rgba(0, 0, 0, 0.09);
        margin-bottom: 10%;
        position: relative;
        top: -30px;
    }
    
    .caseWrap img {
        border-radius: 20px;
        box-shadow: 0 1.9px 4.1px rgba(0, 0, 0, 0.045), 0 15px 33px rgba(0, 0, 0, 0.09);
    }
    
    .caseWrap .info {
        padding: 50px 25px;
    }
    
    .caseWrap .info h3 {
        padding-bottom: 30px;
    }
    
    .caseWrap .info p {
        padding-bottom: 30px;
    }
    
    .caseWrap .info a {
        text-decoration: none;
        display: block;
    }
    
    .caseWrap .button img {
        box-shadow: none;
    }
    /* more   more   more   more   more   more   more    */
    
    .brief {
        background-color: #fff;
        padding: 50px 45px;
    }
    
    .brief h2 {
        padding-bottom: 50px;
    }
    
    .brief p {
        padding-bottom: 50px;
    }
    
    .brief a {
        font-size: 400;
        color: #00E386;
        padding-bottom: 50px;
    }
    
    .brief .decorLine {
        width: 90px;
        height: 3px;
        background-color: #00FF97;
        position: relative;
        top: -35px;
        left: -25px;
    }
    /* footer    footer    footer    footer    footer    footer     */
    
    footer {
        background-color: #fff;
        padding: 30px 0px;
        box-shadow: 0 -1.9px 4.1px rgba(0, 0, 0, 0.045), 0 -15px 33px rgba(0, 0, 0, 0.09);
    }
    
    footer .workLink h6 {
        text-align: center;
    }
    
    footer ul {
        text-align: center;
        width: 132px;
        margin-left: auto;
        margin-right: auto;
    }
    /* ipad    ipad    ipad    ipad    ipad    ipad    ipad     */
    
    @media only screen and (min-width:768px) {
        .logo {
            display: flex;
            float: left;
        }
        .logoMobile {
            display: none;
            float: none;
        }
        /*  menu menu menu menu menu menu menu  */
        .header ul {
            height: 70px;
            clear: none;
            display: flex;
            float: right;
        }
        .header li {
            width: auto;
            display: flex;
            float: left;
            text-align: none;
            padding-top: 40px;
            padding-left: 30px;
            line-height: 70px;
        }
        .header li a {
            text-decoration: none;
            line-height: 0px;
            color: #838383;
            font-size: 18px;
            font-weight: 400;
        }
        .header li :hover {
            color: #00E386;
        }
        .more {
            display: none;
        }
        /* ipadprojects    ipadprojects    ipadprojects    ipadprojects    */
        .caseWrap {
            width: 100%;
            overflow: hidden;
        }
        .app {
            display: block;
            width: 100%;
            height: auto;
        }
        .appPic {
            width: 60%;
            display: block;
            float: left;
            position: relative;
            left: 30px;
            margin-bottom: 10%;
        }
        .app .info {
            width: 32%;
            display: block;
            float: right;
            margin-bottom: 0px;
            top: 10vh;
            left: -30px;
        }
        .premium {
            display: block;
            width: 100%;
            height: 80%;
        }
        .premiumPic {
            width: 60%;
            display: block;
            float: right;
            position: relative;
            left: -30px;
            margin-bottom: 10%;
        }
        .premium .info {
            width: 32%;
            display: block;
            float: left;
            margin-bottom: 0px;
            top: 10vh;
            left: 30px;
        }
        .web {
            display: block;
            width: 100%;
            height: 80%;
        }
        .webPic {
            width: 60%;
            display: block;
            float: left;
            position: relative;
            left: 30px;
            margin-bottom: 10%;
        }
        .web .info {
            width: 32%;
            display: block;
            float: right;
            margin-bottom: 0px;
            top: 10vh;
            left: -30px;
        }
    }
    
    @media only screen and (min-width:1000px) {
        .header,
        .banner,
        .caseWrap,
        .passion,
        .brief {
            width: 960px;
            margin: 0 auto;
        }
    }
    /* this is about
    this is about
    this is about
    this is about      */
    
    .banner h2 {
        padding-bottom: 50px;
    }
    
    .passion {
        background-color: #fff;
        padding: 50px 45px;
    }
    
    .passion h2 {
        padding-bottom: 50px;
    }
    
    .passion p {
        padding-bottom: 50px;
    }
    
    .passion .decorLine {
        width: 120px;
        height: 3px;
        background-color: #00FF97;
        position: relative;
        top: -35px;
        left: -25px;
    }
    
    .gallery {
        column-count: 1;
        column-gap: 0;
    }
    
    .gallery img {
        width: 100%;
        box-sizing: border-box;
        box-sizing: border-box;
        break-inside: avoid;
        padding: 10px;
        counter-increment: item-counter;
    }
    
    @media screen and (min-width: 460px) {
        .gallery {
            column-count: 2;
        }
    }
    
    @media screen and (min-width: 768px) {
        .gallery {
            column-count: 3;
        }
    }
    /* resume resume resume resume resume resume */
    
    .resWrap {
        padding: 50px 45px;
        overflow: hidden;
        box-shadow: 0 -1.9px 4.1px rgba(0, 0, 0, 0.045), 0 -15px 33px rgba(0, 0, 0, 0.09);
    }
    
    .resWrap h1,
    .resWrap h4 {
        padding-bottom: 20px;
    }
    
    .resWrap h3 {
        padding-bottom: 10px;
    }
    
    .resWrap h3.titile {
        padding-bottom: 10px;
        color: #00E386;
    }
    
    .resWrap .resRight h3.titile {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .resWrap h4 {
        line-height: 1.5;
    }
    
    .skills h4 {
        font-size: 20px;
        padding-bottom: 5px;
    }
    
    .resWrap h5 {
        padding-bottom: 5px;
        padding-top: 20px;
        color: #838383;
    }
    
    .resWrap p {
        padding-bottom: 30px;
    }
    
    .resRight p {
        padding-bottom: 10px;
    }
    
    .resWrap li {
        margin-left: 15px;
        padding-bottom: 10px;
        line-height: 1.5;
        color: #838383;
    }
    
    .resWrap ul li::before {
        content: "\2022";
        /* Add content: \2022 is the CSS Code/unicode for a bullet */
        color: #00E386;
        /* Change the color */
        font-weight: 900;
        /* If you want it to be bold */
        display: inline-block;
        /* Needed to add space between the bullet and the text */
        width: 1em;
        /* Also needed for space (tweak if needed) */
        margin-left: -1em;
        /* Also needed for space (tweak if needed) */
    }
    /* resume ipad resume ipad resume ipad resume ipad */
    
    @media screen and (min-width: 768px) {
        .resTop {
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
            padding-bottom: 50px;
        }
        .name {
            width: 60%;
            float: left;
        }
        .resContact {
            width: 40%;
            float: left;
            padding-top: 45px;
        }
        .resBottom {
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
        }
        .resLeft {
            width: 55%;
            float: left;
            margin-right: 30px;
        }
        .resRight {
            width: 40%;
            float: right;
        }
        footer {
            clear: both;
        }
        .skills {
            width: 100%;
            height: auto;
        }
        .skillsLeft {
            width: 55%;
            float: left;
            margin-right: 20px;
        }
        .other {
            clear: both;
        }
    }
    /* resume dsktop */
    
    @media screen and (min-width: 1000px) {
        .resWrap_box {
            width: 960px;
            margin: 0 auto;
        }
    }