@media screen and (max-width: 991px) {
    .menu ul li a{
        font: 1.5rem/60px "Verdana","Geneva","sans-serif","微軟正黑體";
        padding-left:10px;
        padding-right:10px;
    }
    .menu ul li a:before{
        width: 27px;
        height: 27px;
        background:url(../images/menu-icon.png ) no-repeat center center;
        background-size: 87%;
        margin-right: 0px; 
    }
    a.choose1:hover:after, .index1 a.choose1:after,
    a.choose2:hover:after, .index2 a.choose2:after,
    a.choose3:hover:after, .index3 a.choose3:after,
    a.choose4:hover:after, .index4 a.choose4:after,
    a.choose5:hover:after, .index5 a.choose5:after,
    a.choose6:hover:after, .index6 a.choose6:after,
    a.choose7:hover:after, .index7 a.choose7:after,
    a.choose8:hover:after, .index8 a.choose8:after,
    a.choose9:hover:after, .index9 a.choose9:after,
    a.choose10:hover:after, .index10 a.choose10:after,
    a.choose11:hover:after, .index11 a.choose11:after{
        width: 25px;
        height: 60px;
        background:url(../images/triangle-icon.png ) no-repeat center center;
        background-size: 85%;   
    }
    .list-box{
        margin: 0px 15px 30px 15px;
    }
    .list-txt p a{
        font:1.25rem/25px "Verdana","Geneva","sans-serif","微軟正黑體";
        padding: 15px;
    }
    .photos{ /*照片變雙欄*/
        width: 45%;
        margin: 5px;
    }    
}

@media screen and (max-width: 767px) {
    .for-d {
        display: none;
    }
    .for-m-768 {
        display: block;
    }
    .scroll2top:link,
    .scroll2top:visited {
         right: 0px;
    }
    .menu { 
        float: none; 
        position: fixed; 
        z-index:3; 
        top:0; 
        left: 100%; 
        padding-top: 95px; 
        padding-right:10%; 
        width: 60%;
        max-width:none; 
        height:100vh; 
    } 
    .menu.menu-scroll{padding-top: 45px;} 
    .menu ul li a{
        font: 1.3rem/50px "Verdana","Geneva","sans-serif","微軟正黑體";
        padding-left:20px;
    }
    .menu ul li a:before{
        display: none;
    }/*取消選單icon*/

    /*手機版取消當頁面的標示*/
    .index1 a.choose1,
    .index2 a.choose2,
    .index3 a.choose3,
    .index4 a.choose4,
    .index5 a.choose5,
    .index6 a.choose6,
    .index7 a.choose7,
    .index8 a.choose8,
    .index9 a.choose9,
    .index10 a.choose10,
    .index11 a.choose11{
        border-right:0px;
        box-shadow: inset 0 0 0 #dd5003;
        -moz-box-shadow: inset 0 0 0 #dd5003;
        -webkit-box-shadow: inset 0 0 0 #dd5003;
        background: rgba(0,0,0,0);
    }

    /*Hover的標示,新增.index1 a.choose1:hover因為.index1 a.choose1被取消*/
    a.choose1:hover, .index1 a.choose1:hover,
    a.choose2:hover, .index2 a.choose2:hover,
    a.choose3:hover, .index3 a.choose3:hover,
    a.choose4:hover, .index4 a.choose4:hover,
    a.choose5:hover, .index5 a.choose5:hover,
    a.choose6:hover, .index6 a.choose6:hover,
    a.choose7:hover, .index7 a.choose7:hover,
    a.choose8:hover, .index8 a.choose8:hover,
    a.choose9:hover, .index9 a.choose9:hover,
    a.choose10:hover, .index10 a.choose10:hover,
    a.choose11:hover, .index11 a.choose11:hover{
        border-right:5px solid #dd5003;
        box-shadow: inset 0 -2px 1px #dd5003;
        -moz-box-shadow:    inset 0 -2px 1px #dd5003;
        -webkit-box-shadow: inset 0 -2px 1px #dd5003;  
        background: #ff5a00;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all  0.5s ease-in-out;
        -o-transition: all  0.5s ease-in-out;
        transition: all  0.5s ease-in-out;
    }

    /*手機版取消當頁面箭頭的標示*/
    .index1 a.choose1:after,
    .index2 a.choose2:after,
    .index3 a.choose3:after,
    .index4 a.choose4:after,
    .index5 a.choose5:after,
    .index6 a.choose6:after,
    .index7 a.choose7:after,
    .index8 a.choose8:after,
    .index9 a.choose9:after,
    .index10 a.choose10:after,
    .index11 a.choose11:after{
        background-size:0%; 
    }

    /*Hover的箭頭標示*/
    a.choose1:hover:after, 
    a.choose2:hover:after, 
    a.choose3:hover:after, 
    a.choose4:hover:after, 
    a.choose5:hover:after, 
    a.choose6:hover:after, 
    a.choose7:hover:after,
    a.choose8:hover:after, 
    a.choose9:hover:after, 
    a.choose10:hover:after,
    a.choose11:hover:after{
        width: 20px;
        height: 50px;
        background:url(../images/triangle-icon.png ) no-repeat center center;
        background-size: 80%;   
    }

    .wrapper{
        background:#ffffff;
        min-height: calc(100vh - 100vw);/*頁面內容太少*/
    }    
    .content {   
        float: none;
        width: 100%;
        height: 100%;
        min-height:auto;
    }
    .product h4{
        font-size: 1.5rem
        line-height: 40px;
    }
    .product figure{
        width: 90%;    
    }
    .pre-btn{
        margin-top: 30px;  
    }  
    .photos{
        width: 80%;
        margin: 5px;
    }
}