/* 主頁index的樣式表 */


/* 頂部導航條 */
.topbar-warpper{
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #fdd35e;
}
img{
    display: block;
}

/* 設定超連結顏色 */
.topbar a{ 
    font-size:13px;
    color: #424242;
    display: block;
}

.topbar a:hover{
    color:rgb(81, 35, 248);
}

.topbar .line{
    font-size:13px;
    color: #998888;
    margin: 0 8px;
}


/* 左側欄 */
.service, .eventbar, .topbar li{
    float:left;
}
.service li{
    margin: 0 10px;
}

/* 海外運送飛機間距 */
.overseas i{
    margin: 6px;
}
.eventbar i{
    margin: 10px;
}


/* 右側欄 */
 .bluk, .shop-cart, .user-info{
    float: right;

}

 .bluk{
     font-size: 1px;
     padding:0 8px 0 0;
 }

.shop-cart:hover a{
    background-color: cornsilk;
    color: crimson;
}

.shop-cart a{
    width: 80px;
    background-color: rgb(252, 223, 109);
    text-align: center;
}

.shop-cart i{
    margin: 6px;
}

.eventbar a{
    font-size: 16px;
    color:rgb(238, 4, 141);
}

.header-warpper{
    margin-top: 10px;
}

/* 設置中間header */
.header{
    height: 70px;
    }


.header .logo{
    float: left;
    margin: 0;
}

.header .logo a{
    display: block;
    width: 245px;
    height: 70px;
    background-image: url(https://www.9x9.tw/public/files/web-logo.jpg);
    background-repeat: no-repeat;
    background-position: center;
   
}


/* 設置中間導航條 */
.header .nav-warpper{
    float: left;
}

/* 設置導航條 */
.header .nav{
    width: 710px;
    height: 70px;
    margin-top: 8px ;
    margin-left: 20px;
}

/* 設置導航條中的li */
.nav-warpper li{
    float: left;
    display: block;
    margin: 5px 3px;
}

.nav-warpper li a{
    font-size: 13px;
    font-weight: 900;
    color: rgb(77, 76, 76);
    font-family: Century Gothic, "微軟正黑體",Helvetica;
    font:bold;
}

.nav-warpper li a:hover{
    color: rgb(245, 181, 6);
}

.linksite{
    padding: 0 auto;
}
.linee{
    width: 1000px;
    height: 10px;
    background-image: url(https://www.9x9.tw/public/files/product/bar.png);
    background-size: Contain;
    margin: 20px auto;

}

.right-box{
    width: 48px;
    height: 150px;
    position: fixed;
    top: 200px;
    right: 50%;
    margin-right: -568px;
    
}


.right-box-boxx>a>img{
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    border-radius: 50%;
    transition-duration: .2s;
    
}

.right-box-boxx>a>img:hover{
    transform: translateY(3px);
    box-shadow: 0 0 3px rgb(0, 0, 0, 0.5);
}

td>img{
    display: block;

}

.left-box{
    width: 120px;
    height: 800px;
    position: fixed;
    top: 150px;
    right: 50%;
    margin-right: 520px;
}
.left-box-boxx-1{
    width: 120px;
    height: 40px;
    margin: 3px 0;
    background-color: rgba(230, 228, 228 ,0.5);
    line-height: 40px;
    text-align: center;
    color: rgb(36, 36, 36);
    font: bold;
}

.left-box-boxx-1>a{
    display: block;
    color: rgb(36, 36, 36);
    font-weight: 800;
    font-size: 14px;
    font-family: Century Gothic, "微軟正黑體",Helvetica;
    transition-duration: .2s;
}

.left-box-boxx-1>a:hover{
    color: rgb(248, 246, 246);
    background-color: rgb(0, 101, 178);
    transform: translateX(3px);
    box-shadow: 0 0 3px rgb(0, 0, 0, 0.5);

}

.left-box-boxx-30{
    width: 50px;
    height: 50px;
    background-color: rgba(230, 228, 228, 0.5);
    margin-left: 70px;
    text-align: center;
    line-height: 50px;
    font-size: 30px;
}

.left-box-boxx-0{
    width: 120px;
    height: 120px;
    margin-bottom: 4px;

}

.left-box-boxx-0>a>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}