/* jssor slider arrow navigator skin 02 css */
/*
.jssora02l              (normal)
.jssora02r              (normal)
.jssora02l:hover        (normal mouseover)
.jssora02r:hover        (normal mouseover)
.jssora02ldn            (mousedown)
.jssora02rdn            (mousedown)
*/
.jssora02l, .jssora02r, .jssora02ldn, .jssora02rdn
{
    position: absolute;
    cursor: pointer;
    display: block;
    background: url(/img/a02.png) no-repeat; /*這裏會用到一個圖形a02.png要給下面的class作css splite用的*/
    overflow:hidden;
}
.jssora02l { background-position: -3px -33px; }
.jssora02r { background-position: -63px -33px; }
.jssora02l:hover { background-position: -123px -33px; }
.jssora02r:hover { background-position: -183px -33px; }
.jssora02ldn { background-position: -3px -33px; }
.jssora02rdn { background-position: -63px -33px; }

/* jssor slider thumbnail navigator skin 07 css */
/*
.jssort07 .p            (normal)
.jssort07 .p:hover      (normal mouseover)
.jssort07 .pav          (active)
.jssort07 .pav:hover    (active mouseover)
.jssort07 .pdn          (mousedown)
*/
.jssort07 .i
{
    position:absolute;
    top: 0px;
    left: 0px;
    width: 60px; /* 這裏的寬高視狀況修改,75,60 */
    height: 60px;
    filter: alpha(opacity=80);
    opacity: .8;
}
.jssort07 .p:hover .i, .jssort07 .pav .i
{
    filter: alpha(opacity=100);
    opacity: 1;
}
.jssort07 .o
{
    position: absolute;
    top:0px;
    left:0px;
    width:60px; /* 這裏的寬高視狀況修改,75,60 */
    height:60px;
                    
    border: 2px solid transparent; /* 透明 */ 
                    
    transition: border-color .6s;
    -moz-transition: border-color .6s;
    -webkit-transition: border-color .6s;
    -o-transition: border-color .6s;
}
* html .jssort07 .o
{
    /* ie quirks mode adjust */
    width /**/: 60px; /* 這裏的寬高視狀況修改,75,60 */
    height /**/: 60px;
}
.jssort07 .pav .o, .jssort07 .p:hover .o
{
    border-color: #777; /* 正在顯示的圖片用灰框 */
}
.jssort07 .pav:hover .o
{
    border-color: #0099FF;
}
.jssort07 .p:hover .o
{
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none;
}

   .navbar {
        margin-bottom: 2px;
    }
    .container {
        padding-left: 0px;
        padding-right: 0px;
    }
    /* 當滑鼠指到 .clickZoom 變成放大鏡圖示 */
    .clickZoom:hover { cursor:url(/img/zoom_in.gif), auto }
    
    /* 給手機看的放大鏡圖示,只有畫面變小才出現 */
    #zoomButton {
        font-size:120px; 
        position:absolute; 
        left:20px; 
        top:20px; 
        z-index:1; 
        cursor:pointer;
    }        
    @media screen and (min-width:768px) {
        #zoomButton {
            display: none;
        }
    }
    @media screen and (max-width:767px) {
        #zoomButton {
            display: block;
        }        
    }

    /* 將body的overflow-y設hidden會讓縱向捲軸消失,這個用jQuery視狀況執行 */
    /*body {        
        overflow-y: hidden;
    }*/

    /* width:100%; height:1024px; border:solid 4px silver; display:none; z-index:100; position:absolute; left:0px; top:0px; */
    /* 上下左右都設0會讓此區塊填滿整個畫面, 而body的overflow-y:hidden讓jQuery去作 */
    #zoomArea {
        border:solid 4px silver; 
        display:none; 
        z-index:100; 
        position:fixed; 
        left:0; 
        top:0;   
        bottom:0;
        right:0;
        background-color: #fff;      
        text-align: center;
        overflow: hidden;
    }

    #closeButton {
        z-index:101;
        position: absolute;
        top:20px;
        right:20px;
        cursor:pointer;        
    }
    @media screen and (min-width:768px) {
        #closeButton {
            display: block;
        }
    }
    @media screen and (max-width:767px) {
        #closeButton {
            display: none;
        }        
    }
 
    /* 當滑鼠進入關閉區變成放大鏡-圖案 */
    #closeArea {
        z-index:101;
        position: absolute;
        top:15%;
        left:15%;
        right:15%;
        bottom:15%;
        cursor:url(/img/zoom_out.gif), auto;         
        /* background-color: silver; */
    } 

    /* 下一張,這個是電腦用的,手機無法操作,所以不用顯示 */
    /* 畫廊2號也是電腦用的,手機不顯示 */
    /* z-index = 102 是要比畫廊2號再上一層才行,才不會被擋到 */
    #nextButton {
        z-index:102; 
        position: absolute;
        bottom:20px;
        right:20px;
        cursor:pointer;
    }
    @media screen and (min-width:768px) {
        #nextButton, #prevButton, #slider2_container {
            display: block;
        }        
    }
    @media screen and (max-width:767px) {
        #nextButton, #prevButton, #slider2_container {
            display: none;
        }        
    }
    /* 上一張,這個是電腦用的,手機無法操作,所以不用顯示 */
    #prevButton {
        z-index:102;
        position: absolute;
        bottom:20px;
        left:20px;
        cursor:pointer;        
    }
    

    /*以下是尺寸表用的css*/
    table {
        text-align:center;
    }
    table > thead > tr {
        height: 40px;
        border-bottom: solid 1px silver;
        /* font-size:24px; */
    }
    table > tbody > tr {
        height: 40px;
        border-bottom: solid 1px silver;
    }
    table > tbody > tr > td, table > thead > tr > td {
        border-right: solid 1px silver;
    }
    #size_table_area {
        display:none; 
        border: solid 8px silver; 
        width: 800px;        
        max-height: 600px;
        overflow-y: scroll;
        position: absolute;
        top: 10%;
        left: 30%;
        z-index: 1;
        background-color: #fff;        
    }

    #size_table {
        width: 100%;
        margin: 0 auto;
    }
    @media screen and (max-width:768px) {
        #size_table_area {
            width: 100%;
            left: 0%;
            top: 0%;
        }
    }