/*  phone   */

body{
    margin: 0;
    padding: 0;
    background-position: center;
    background-size: 100% 100%;
    background-image: url('images/');
    background-repeat: no-repeat; 
    margin: auto;
    font-family: 微軟正黑體,Arial, Helvetica, sans-serif;
    

}

/*  最外框 */
#wrapper{
    width: 100%;
    max-width: 100%;
    position: relative;
    
    /* background-color: #1b1b1b;*/
    
    

    
}
/*  第一區塊 */
#header{
    width: 100%;
    height: 50px;
    display: block;
    /* margin-left: 5%; */
    background-position: left center;
    background-color: rgb(209, 209, 209);
    
    
}

#headerlogo{
    width: 70%;
    height: 50px;
    display: block;
    margin-left: 5%; 
    float: left;
    background-position: left center;
    background-image: url('images/yellow_page1_moble/header_logo_moble.png');
    background-repeat: no-repeat;
    
}


/* 關閉選單按鈕*/
#meunicon{
    width: 15%;
    height: 50px;
    background-position: right center;
    margin-right: 0%;
    margin-top: 0%;
    float: right;
    background-color:rgb(211, 211, 211);
    
     
    
}
#meunicon i{
    font-size: 35px;
    color: #2c2c2c;
    line-height: 40px;
    margin-left: 25%;
    margin-top: 5%;

    

}

    /* 關閉選單按鈕*/
    #meuniconpc{
        display: none;
    }

    

/*顯示nav選單*/
nav ul{
    margin: 0;
    padding: 0;
    list-style-image: none;
    list-style-type: none;
    display: none;
    /*background-color: rgb(59, 59, 59);*/
    
    
}
nav ul li{
    width: 100%;
    height: 40px;
    display: block;
    /*  影響按鈕背景顏色的位置 */
    /*background-color: rgb(59, 59, 59);*/
    background-image: url('images/yellow_page1_moble/button_img.jpg');
    background-repeat: no-repeat;
    border-bottom: 1px solid #1a1a1a;
    text-align: center;
}
nav ul li a{
    width: 100%;
    height: 40px;
    font-size: 15px;
    text-decoration: none;
    
    line-height: 40px;
    display: block;
    color: rgb(255, 255, 255);

}



/*  第一區塊header中 */
#banner{
    width: 100%;
    height: 350px;
    display: block;
    background-position: center center;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
    background-image: url('images/yellow_page1_moble/banner_moble.jpg');
    background-repeat: no-repeat;
     

}

#buttonpc{
   
    display: none;
  

}

 /*第二頁 關於我們*/
#content1{
    width: 100%;
    height: 3700px;
    display: block;
    background-position: left center;
    float: left;
    color: rgb(255, 255, 255);
    margin-left: 0%;
    margin-right: 0%;
    background-image: url('images/introduction_moble');
    background-repeat: no-repeat;
    background-color:rgb(206, 177, 13);
     

}
#contentbox1{
    width: 100%;
    height: 3700px;
    display: block;
    background-position: left center;
    float: left;
    color: rgb(255, 255, 255);
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    background-image: url('images/yellow_page1_moble/introduction_content1_moble.png');
    background-repeat: no-repeat;

}
 /*  第二頁 關於我們content1標示欄位 */

    
 #button1{
    width: 100%;
    height: 40px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    /*background-color:rgb(255, 132, 60);*/

}

.shape-ex2{
    width: 100px;
    height: 40px;
    display: block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #000;
    transition: all .3s linear;
    background-position: center center;
    /*margin-top: 480px;*/
    margin-left: 5%;
    float: left;
}
.shape-ex2:hover{
    background-color: #666;
}
 /*  .........     */

 


#box1{
    width: 100%;
    height: 1000px;
    background-position: left center;
    margin-top: 0px;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_moble');
    background-repeat: no-repeat;
    /*background-color:rgb(255, 132, 60);*/
}
/*
#box1_title1{
    width: 95%;
    height: 100px;
    background-position: center center;
    margin-top: 0%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結
    background-image: url('images/y');
    background-repeat: no-repeat;
}

#img1{
    width: 100%;
    height: 400px;
    background-position: center center;
    margin-top: 810%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 
    background-image: url('images/yellow_page1_moble/img1.jpg');
    background-repeat: no-repeat;
}
 
#box1_title2{
    width: 95%;
    height: 700px;
    background-position: center center;
    margin-top: 5%;
    margin-left: 2%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 
    background-image: url('images/yellow_page1_moble/');
    background-repeat: no-repeat;
}
*/
 /*第三頁 產品卡介紹*/

#content2{
    width: 100%;
    height: 1200px;
    display: block;
    background-position: center center;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 
    background-color:rgb(255, 217, 0);

}

/*  第三頁 產品卡介紹 content2標示欄位 */

    
#button2{
    width: 100%;
    height: 40px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    /*background-color: rgb(226, 226, 226);*/

}
.shape-ex2{
    width: 100px;
    height: 40px;
    display: block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #000;
    transition: all .3s linear;
    background-position: center center;
    /*margin-top: 480px;*/
    margin-left: 5%;
    float: left;
}
.shape-ex2:hover{
    background-color: #666;
}
 /*  .........     */

#box2{
    width: 60%;
    height: 1200px;
    display: block;
    background-position: center center;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 

}

/*  產品圖片介紹 */
.box2_1_img{
    width: 170px;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 5%;
    margin-left: 7%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_pc/box2_1_img.jpg');
    background-repeat: no-repeat;
    overflow: hidden; 

}

.box2_2_img{
    width: 170px;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 5%;
    margin-left: 7%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_pc/box2_2_img.jpg');
    background-repeat: no-repeat;
    overflow: hidden; 

}

.box2_3_img{
    width: 170px;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 5%;
    margin-left: 7%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_pc/box2_3_img.jpg');
    background-repeat: no-repeat;
    overflow: hidden; 

}

.box2_4_img{
    width: 170px;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 5%;
    margin-left: 7%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_pc/box2_4_img.jpg');
    background-repeat: no-repeat;
    overflow: hidden; 

}
  /*  產品文字介紹 */
  .box2_1{
    width: 140px;
    height: 800px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 5%;
    margin-left: 0%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 

}
/*
.box2_2{
    width: 35%;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 5%;
    margin-left: 0%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 

}
.box2_3{
    width: 35%;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 5%;
    margin-left: 0%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 

}

.box2_4{
    width: 35%;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 5%;
    margin-left: 0%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 

}*/

 /*第四頁 產品推薦*/
 #content3{
    width: 100%;
    height: 1000px;
    display: block;
    background-position: left center;
    float: left;
    color: rgb(255, 255, 255);
    margin-left: 0%;
    margin-right: 0%;
    background-image: url('images/introduction_moble');
    background-repeat: no-repeat;
    background-color: rgb(255, 245, 153);
     

}

/*  第四頁 產品推薦 content3標示欄位 */

    
#button3{
    width: 100%;
    height: 40px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    /*background-color: rgb(226, 226, 226);*/

}
.shape-ex2{
    width: 100px;
    height: 40px;
    display: block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #000;
    transition: all .3s linear;
    background-position: center center;
    /*margin-top: 480px;*/
    margin-left: 5%;
    float: left;
}
.shape-ex2:hover{
    background-color: #666;
}
 /*  .........     */


.title3{
    width: 100%;
    height: 50px;
    font-size: 18px;
    background-position: left center;
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    margin-left: 0%;
    padding-left: 0%;
    /*background-color: #2b2b2b;*/
    background-image: url('images/about_moble/title1.jpg');
    background-repeat: no-repeat;
}



#box3{
    width: 100%;
    height: 600px;
    background-position: left center;
    margin-top: 0px;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_p');
    background-repeat: no-repeat;
}

#box3_title1{
    width: 95%;
    height: 100px;
    background-position: center center;
    margin-top: 0%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}

#img3{
    width: 100%;
    height: 700px;
    background-position: center center;
    margin-top: 0%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_moble/insurance.jpg');
    background-repeat: no-repeat;
}

#box3_title2{
    width: 95%;
    height: 100px;
    background-position: center center;
    margin-top: 0%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}





/*  第五頁 購物須知 */

#content4{
    width: 100%;
    height: 1100px;
    display: block;
    background-position: center center;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/');
    background-repeat: no-repeat;
    overflow: hidden; 
    background-color:rgb(235, 235, 235);

}

/*  第五頁 購物須知 content4標示欄位 */

    
#button4{
    width: 100%;
    height: 40px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    /*background-color: rgb(226, 226, 226);*/

}
.shape-ex2{
    width: 100px;
    height: 40px;
    display: block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #000;
    transition: all .3s linear;
    background-position: center center;
    /*margin-top: 480px;*/
    margin-left: 5%;
    float: left;
}
.shape-ex2:hover{
    background-color: #666;
}
 /*  .........     */

#box4{
    width: 100%;
    height: 400px;
    background-position: left center;
    margin-top: 0px;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_p');
    background-repeat: no-repeat;
}

#box4_title1{
    width: 100%;
    height: 150px;
    background-position: center center;
    margin-top: 0%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}



#box4_title2{
    width: 500px;
    height: 200px;
    background-position: center center;
    margin-top: 15%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}

#img4{
    width: 400px;
    height: 400px;
    background-position: center center;
    margin-top: 15%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_moble/shopping.png');
    background-repeat: no-repeat;
}

#box4_title3{
    width: 500px;
    height: 200px;
    background-position: center center;
    margin-top: 120%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}


/*  第六頁 店家資訊 */

#content5{
    width: 100%;
    height: 800px;
    display: block;
    background-position: center center;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/');
    background-repeat: no-repeat;
    overflow: hidden; 
    background-color:rgb(85, 85, 85);

}
/*  第六頁 店家資訊 content5標示欄位 */

    
#button5{
    width: 100%;
    height: 40px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    /*background-color: rgb(226, 226, 226);*/

}
.shape-ex2{
    width: 100px;
    height: 40px;
    display: block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #000;
    transition: all .3s linear;
    background-position: center center;
    /*margin-top: 480px;*/
    margin-left: 5%;
    float: left;
}
.shape-ex2:hover{
    background-color: #666;
}
 /*  .........     */

#box5{
    width: 100%;
    height: 400px;
    background-position: center center;
    margin-top: 0px;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(0, 0, 0);
    background-color:rgb(85, 85, 85);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_p');
    background-repeat: no-repeat;
}

#box5_title1{
    width: 100%;
    height: 100px;
    background-position: center center;
    margin-top: 0%;
    margin-left: 2%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(255, 255, 255);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}





.map{
    width: 100%;
    height: 300px;
    background-position: left center;
    margin-top: 30%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
   
}

/* footer p{
    line-height: 40px;
    color: rgb(255, 255, 255);
} */
/*讓footer不會跑版，再到html中設定clearboth*/
.clearboth{
    clear: both;

}




/*  Tablet 平板 */

@media only screen and (min-width: 481px) {
    
    /*  將手機版內入電腦版中，做部分的容器設定display: none;不出現 */
#header{
    display: none;

}

#headerlogo{
    display: none;
    
}

/* 關閉選單按鈕*/
#meunicon{
    display: none;
 
}
#meunicon i{
    display: none;

}

    /* 關閉選單按鈕*/
    #meuniconpc{
        display: none;
    }

    

/*顯示nav選單*/
nav ul{
    display: none;
    
    
}
nav ul li{
    display: none;
}
nav ul li a{
    display: none;

}


/*  第一區塊header中 */
#banner{
  
    display: none;
 

}

    /*  將手機版內入電腦版中，做部分的容器設定display: none;不出現，以上的 */ 
    
    
    
    
    body{
        margin: 0;
        padding: 0;
        background-size: 100% 100%;
        background-position: center center;
        /*background-color: #ffffff;*/
        margin: auto;
        font-family: 微軟正黑體,Arial, Helvetica, sans-serif;
        background-image: url('images/yel');
        background-repeat: no-repeat;

    }
    /*  最外框 */
    #wrapper{
        width: 100%; 
        max-width: 100%;
        position: relative;
        
        background-position: center center;
        background-image: url('images/index_pc/indd.jpg');
        background-repeat: no-repeat;
        /*background-color: rgb(88, 88, 88);*/
        overflow: hidden;
        
        
    
        
    }

/*  第一區塊 */
#headerpc{
    width: 1366px;
    height: 0px;
    display: none;/* none關掉電腦版的header，手機版也會正常出現 */
    float: left;
    /* margin-left: 5%; */
    background-position: center center;
    overflow: hidden;
    
}
#headerlogopc{
    width: 30%;
    height: 100px;
    display: block;
    margin-left: 0%; 
    margin-top: 0%; 
    background-position: left center;
    background-image: url('images/yellow_page1_pc/header_logo_company_yellowpage1.png');
    background-repeat: no-repeat;
    float: left;
    overflow: hidden;
    
}


  

    /* 關閉選單按鈕*/
    #meuniconpc{
        display: none;
    }
#meunicon i{
    display: none;

    

}

 
 

    nav ul{
        
        width: 60%;
        margin: 0;
        padding: 0;
        display: block;
        overflow: hidden;
        float: right;
        background-position: right right;
       /* background-color: rgb(255, 255, 255);*/
        background-image: url('images/button/button_img1.png');
        background-repeat: no-repeat;
    }
    nav ul li{
        height: 50px;
        width: 14%;
        /*  影響按鈕背景顏色的位置 */
        background-color: none;
        border-bottom: none;
        float: left;
        background-image: none;
        background-repeat: no-repeat;
        
        
    }
    nav ul li a{
        width: 100%;
        height: 40px;
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;
        color: rgb(44, 44, 44);
        line-height: 40px;
        

    }



    
      /*  第一區塊 */
#bannerpc{
    width: 100%;
    height: 600px;
    display: block;
    background-position: center center;
    
    float: left;
    margin-left: 0%;
    margin-right: 0%;
    background-image: url('images/yellow_page1_pc/banner.jpg');
    background-repeat: no-repeat;
    overflow: hidden;     

    }
   /*  連回上一頁按鈕 */
   #button{
  
    display: none;


}

.shape-ex2{
    width: 100px;
    height: 40px;
    display: block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #000;
    transition: all .3s linear;
    background-position: center center;
    /*margin-top: 480px;*/
    margin-left: 5%;
    float: left;
}
.shape-ex2:hover{
    background-color: #666;
}



/*  第二頁 關於我們 */

#content1{
    width: 100%;
    height: 3050px;
    display: block;
    background-position: center center;
     /*  容器縮小放大會置中的方法 */
     display: flex;
     justify-content: center; 
     align-items: center; 
     /*  容器縮小放大會置中的方法，以上 */
    float: center;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_p');
    background-repeat: no-repeat;
    background-color:rgb(255, 132, 60);
    overflow: hidden; 

}

#contentbox1{
    width: 1366px;
    height: 3050px;
    display: block;
    background-position: center center;
    float: center;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_pc/about_contentbox1.png');
    background-repeat: no-repeat;
    overflow: hidden; 

}
   /*  第二頁 關於我們content1標示欄位 */

    
  #button1{
    width: 100%;
    height: 40px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    background-color:rgb(255, 132, 60);

}
.shape-ex2{
    width: 100px;
    height: 40px;
    display: block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #000;
    transition: all .3s linear;
    background-position: center center;
    /*margin-top: 480px;*/
    margin-left: 5%;
    float: left;
}
.shape-ex2:hover{
    background-color: #666;
}
 /*  .........     */


.title1{
    width: 40%;
    height: 50px;
    font-size: 20px;
    background-position: left center;
    color: #19479C;
    margin-left: 5%;
    padding-left: 0%;
    background-image: url('images/about_pc/title1.png');
    background-repeat: no-repeat;
}






#box1{
    width: 45%;
    height: 800px;
    background-position: left center;
    margin-top: 0px;
    margin-left: 2%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_p');
    background-repeat: no-repeat;
}

#box1_title1{
    width: 500px;
    height: 50px;
    background-position: center center;
    margin-top: 10%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}
/*
#img1{
    width: 500px;
    height: 500px;
    background-position: center center;
    margin-top: 300%;
    margin-left: 0%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 
    background-image: url('images/yellow_page1_pc/img1.jpg');
    background-repeat: no-repeat;
}*/

#box1_title2{
    width: 500px;
    height: 100px;
    background-position: center center;
    margin-top: 0%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結*/
    
    background-repeat: no-repeat;
    background-image: none;
}

 /*第三頁 產品卡介紹*/

 #content2{
    width: 100%;
    height: 600px;
    display: block;
    background-position: center center;
    margin:auto auto;
    float: left;
    /*  容器縮小放大會置中的方法 */
    display: flex;
    justify-content: center; 
    align-items: center; 
    /*  容器縮小放大會置中的方法，以上 */
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 
    background-color:rgb(255, 217, 0);

}

#contentbox2{
    width: 1366px;
    height: 600px;
    display: block;
    background-position: center center;
    
    margin:auto auto;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 
    background-color:rgb(255, 217, 0);
 

}



   /*  第三頁 產品卡介紹 content2標示欄位 */

    
  #button2{
    width: 100%;
    height: 40px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    /*background-color: rgb(226, 226, 226);*/

}
.shape-ex2{
    width: 100px;
    height: 40px;
    display: block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #000;
    transition: all .3s linear;
    background-position: center center;
    /*margin-top: 480px;*/
    margin-left: 5%;
    float: left;
}
.shape-ex2:hover{
    background-color: #666;
}
 /*  .........     */


#box2{
    width: 100%;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 2%;
    margin-left: 15%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 

}
  /*  產品圖片介紹 */
  .box2_1_img{
    width: 170px;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_pc/box2_1_img.jpg');
    background-repeat: no-repeat;
    overflow: hidden; 

}

.box2_2_img{
    width: 170px;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 5%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_pc/box2_2_img.jpg');
    background-repeat: no-repeat;
    overflow: hidden; 

}

.box2_3_img{
    width: 170px;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 5%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_pc/box2_3_img.jpg');
    background-repeat: no-repeat;
    overflow: hidden; 

}

.box2_4_img{
    width: 170px;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 5%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_pc/box2_4_img.jpg');
    background-repeat: no-repeat;
    overflow: hidden; 

}

  /*  產品文字介紹 */
.box2_1{
    width: 70%;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 17%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 

}

/*
.box2_2{
    width: 16%;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 2%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 

}
.box2_3{
    width: 16%;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 2%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 

}

.box2_4{
    width: 16%;
    height: 250px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 2%;
    margin-right: 0%;
    /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 
    background-image: url('images/introduction_pc/int');
    background-repeat: no-repeat;
    overflow: hidden; 

}
*/
/*  第四頁 產品推薦 */

#content3{
    width: 100%;
    height: 1600px;
    display: block;
    background-position: center center;
      /*  容器縮小放大會置中的方法 */
      display: flex;
      justify-content: center; 
      align-items: center; 
      /*  容器縮小放大會置中的方法，以上 */
    float: left;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow');
    background-repeat: no-repeat;
    overflow: hidden; 
    background-color: rgb(255, 245, 153);
/*  圖片透明度 
    opacity: .5;*/
}
#contentbox3{
    width: 1366px;
    height: 1600px;
    display: block;
    background-position: center center;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1');
    background-repeat: no-repeat;
    overflow: hidden; 
/*  圖片透明度 
    opacity: .5;*/
}



/*  第四頁 產品推薦 content3標示欄位 */

    
#button3{
    width: 100%;
    height: 40px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    /*background-color: rgb(226, 226, 226);*/

}
.shape-ex2{
    width: 100px;
    height: 40px;
    display: block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #000;
    transition: all .3s linear;
    background-position: center center;
    /*margin-top: 480px;*/
    margin-left: 5%;
    float: left;
}
.shape-ex2:hover{
    background-color: #666;
}
 /*  .........     */

#box3{
    width: 100%;
    height: 300px;
    background-position: left center;
    margin-top: 0px;
    margin-left: 0%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_p');
    background-repeat: no-repeat;
}

#box3_title1{
    width: 300px;
    height: 10px;
    background-position: center center;
    margin-top: 2%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}

#img3{
    width: 90%;
    height: 1500px;
    background-position: center center;
     
    margin-top: 0%;
    margin-left: 0%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_pc/insurance.jpg');
    background-repeat: no-repeat;
}

#box3_title2{
    width: 500px;
    height: 100px;
    background-position: center center;
    margin-top: 0%;
    margin-left: 50%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}

/*  第五頁 購物須知 */

#content4{
    width: 100%;
    height: 700px;
    display: block;
    background-position: center center;
     /*  容器縮小放大會置中的方法 */
     display: flex;
     justify-content: center; 
     align-items: center; 
     /*  容器縮小放大會置中的方法，以上 */
    float: left;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/');
    background-repeat: no-repeat;
    overflow: hidden; 
    background-color:rgb(235, 235, 235);

}

#contentbox4{
    width: 1366px;
    height: 700px;
    display: block;
    background-position: center center;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/');
    background-repeat: no-repeat;
    overflow: hidden; 
    background-color:rgb(235, 235, 235);

}
/*  第五頁 購物須知 content4標示欄位 */

    
#button4{
    width: 100%;
    height: 40px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    /*background-color: rgb(226, 226, 226);*/

}
.shape-ex2{
    width: 100px;
    height: 40px;
    display: block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #000;
    transition: all .3s linear;
    background-position: center center;
    /*margin-top: 480px;*/
    margin-left: 5%;
    float: left;
}
.shape-ex2:hover{
    background-color: #666;
}
 /*  .........     */

#box4{
    width: 50%;
    height: 700px;
    background-position: left center;
    margin-top: 0px;
    margin-left: 2%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_p');
    background-repeat: no-repeat;
}

#box4_title1{
    width: 100%;
    height: 100px;
    background-position: center center;
    margin-top: 0%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}



#box4_title2{
    width: 100%;
    height: 200px;
    background-position: center center;
    margin-top: 25%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}

#img4{
    width: 70%;
    height: 400px;
    background-position: left center;
    margin-top: 0%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_pc/shopping.png');
    background-repeat: no-repeat;
}

#box4_title3{
    width: 100%;
    height: 200px;
    background-position: center center;
    margin-top: 10%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}



/*  第六頁 店家資訊 */

#content5{
    width: 100%;
    height: 800px;
    display: block;
    background-position: center center;
     /*  容器縮小放大會置中的方法 */
     display: flex;
     justify-content: center; 
     align-items: center; 
     /*  容器縮小放大會置中的方法，以上 */
    float: left;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/');
    background-repeat: no-repeat;
    overflow: hidden; 
    background-color:rgb(85, 85, 85);

}
#contentbox5{
    width: 1366px;
    height: 800px;
    display: block;
    background-position: center center;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
      /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/introduction_pc/');
    background-repeat: no-repeat;
    overflow: hidden; 
    background-color:rgb(85, 85, 85);

}
/*  第六頁 店家資訊 content5標示欄位 */

    
#button5{
    width: 100%;
    height: 40px;
    display: block;
    background-position: center center;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    /*background-color: rgb(226, 226, 226);*/

}
.shape-ex2{
    width: 100px;
    height: 40px;
    display: block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #000;
    transition: all .3s linear;
    background-position: center center;
    /*margin-top: 480px;*/
    margin-left: 5%;
    float: left;
}
.shape-ex2:hover{
    background-color: #666;
}
 /*  .........     */

#box5{
    width: 50%;
    height: 700px;
    background-position: center center;
    margin-top: 0px;
    margin-left: 22.5%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/yellow_page1_p');
    background-repeat: no-repeat;
}

#box5_title1{
    width: 100%;
    height: 100px;
    background-position: center center;
    margin-top: 0%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    color: rgb(34, 34, 34);
     /*  讓手機版出現背景圖,電腦版不會出現的方法,給background-image但不用給檔案連結 */
    background-image: url('images/y');
    background-repeat: no-repeat;
}





.map{
    width: 100%;
    height: 450px;
    background-position: left center;
    margin-top: 15%;
    margin-left: 0%;
    padding-left: 0%;
    padding-right: 0%;
    float: left;
   
}

/* footer p{
    line-height: 40px;
} */
  /*讓footer不會跑版，再到html中設定clearboth*/

.clearboth{
    clear: both;

}
}


/*  pc   */

@media only screen and (min-width: 769px) {
#wrapper{
    margin: auto;
}
#header{
    width: 100%;
    height: 100px;
    overflow: hidden;
  
    
    
}


}