@media screen and (min-width:600px) and (max-width:1200px) {
    
    .col-1 {
        width: calc( 100% / 12 * 1 );
    }
    .col-2 {
        width: calc( 100% / 12 * 2 );
    }
    .col-3 {
        width: calc( 100% / 12 * 3 );
    }
    .col-4 {
        width: calc( 100% / 12 * 4 );
    }
    .col-5 {
        width: calc( 100% / 12 * 5 );
    }
    .col-6 {
        width: calc( 100% / 12 * 6 );
    }
    .col-7 {
        width: calc( 100% / 12 * 7 );
    }
    .col-8 {
        width: calc( 100% / 12 * 8 );
    }
    .col-9 {
        width: calc( 100% / 12 * 9 );
    }
    .col-10 {
        width: calc( 100% / 12 * 10 );
    }
    .col-11 {
        width: calc( 100% / 12 * 11 );
    }
    .col-12 {
        width: calc( 100% / 12 * 12 );
    }
    .fixed-width {
        width: 600px;
        margin: auto;
    }
    [class*="col"] {
        float: left;
        padding: 15px;
    }
    .btn {
        display: inline-block;
        line-height: 20px;
        padding: 5px 20px;
        border: 1px rgb(151, 121, 66) solid;
        color: rgba(151, 121, 66);
        margin: 25px  0;
    
    }
     /* gotop */
    #gotop {
        position: fixed;
        bottom: 40px;
        right: 40px;
    }
    #gotop a {
        color: rgb(150, 120, 65);
    }
    /* nav */
nav {
    background-color: rgba(197, 167, 110, 0.3);
    line-height: 60px;
}
nav .menu {
    display: block;
}
nav .toggler {
    display: none;
}
nav li {
    border: none;
}
nav .col-7 {
    padding-left:10px;
    float: right;
}
nav .col-7 li {
    float: left;
    padding-right: 7px;
}
nav .col-7 span {
    display: none;
    margin-top: -60px;
}
nav .col-7 span::first-letter {
    content: "";
    display: block;
    padding-top: 2px;
    border-top: 1px solid rgb(0, 0, 0);
}
nav .col-7 a:hover span {
    margin-top: 0px;
}    
nav .menu a {
    color: rgb(12, 5, 5);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}
nav .logo {
    width: 120px;
    font-size: 25px;
    font-weight: 700;
    float: left;
    padding-right: 20px;
    letter-spacing: 1px;
}
nav .pc_only{
    display: block;
}
nav .col-3 .network {
    display: inline;   /* 蓋手機*/
    float: right; 
}
nav .col-3 .network a {
    padding-right: 10px;
    color:  rgba(44, 30, 5, 0.4);
}
   
    /* header */
    header {
        height: 300px;
    }
    header .content {
        width: 100%;
        padding-left: 130px;
        display: block;
        text-align: left;  /* 蓋手機*/
    }
    header h2 {
        font-size: 2em;
    }
    header .content a {
        display: inline-block;
        margin-left: 5px;
        color: rgba(202, 141, 28, 0.8);
    }
    /* header .content a:hover {
        color:  rgba(44, 30, 5, 0.4);
    } */
    
    /* product */
    #product {
        height: 650px;
        background-color: rgb(255, 255, 255);
    }
     #product img {
        position: relative;
        z-index: 10;
    }
    #product .col-4 .mask {
        display: none;
        position: absolute;
        width: 360px;
        height: 360px;
        z-index: 11;
        text-align: center;
        line-height: 360px;
        opacity: 0;
        letter-spacing: 2px;
        transition: all .4s;
        font-size: 1.5em;
    }
    /* about me */
    #about {
        height: 600px;
        background-color:rgba(197, 167, 110, 0.3);
    }
    #about h2 {
        text-align: center;
        padding-top: 80px;
        padding-bottom: 20px;
        letter-spacing: 2px;
    
    }
    @media screen and (min-width:600px) and (max-width:1200px) {
        #about .col-4 {
            width:calc(100% / 12 * 5) ;
        }
    }
    #about p {
        font-size: 14px;
        color: rgb(51, 50, 50);
        text-align: left;   /* 蓋手機*/
    }
    #about i {
        letter-spacing: 5px;
        text-align: left;   /* 蓋手機*/
    }
    #about .col-4 a {
        color: rgb(151, 121, 66);
    }
    /* #about a:hover {
        color:rgba(0, 0, 0, .9);
    
    } */
    /* started */
    #start {
        height: 500px;
        background-color: rgba(151, 121, 66,.7);
    }
    #start .fixed-width {
        text-align: center;
        padding-top: 100px;
    }
    #start h2 {
        font-size: 2em;
        letter-spacing: 2px;
        padding: 20px 0;
    }
    #start .content {
        width: 500px;
        margin: auto;
        color: rgb(51, 50, 50);
    }
    #start .btn {
        color: rgb(51, 50, 50);
        border: 1px rgb(51, 50, 50) solid;
        padding: 20px 40px;
        font-size: 1.2em;
    }
    /* #start .btn:hover {
        color:rgba(44, 30, 5, 0.9);
        border: 2px rgba(44, 30, 5, 0.9) solid;
        font-size: 1.5em;
    } */
    /* footer */
    footer {
        height: 40px;
        padding-top: 10px;
        text-align: center;
    }
    footer a {
        color: rgba(202, 141, 28, 0.8);
    }
    /* footer a:hover {
        color:  rgba(44, 30, 5, 0.9);
    } */
    footer i {
        letter-spacing: 13px;
    }
    }