/*Footer細部CSS*/

/*限制Footer盒子最大寬度*/
.footerBox {
    background: #232851;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/*Footer盒子有兩個元素,Logo和Info*/
.footerBox .footerLogoBox {
    box-shadow: 1px 0 0 0 #ffffff;
    /* padding: 8px 20px 8px 8px; */
}

/* .footerBox .footerInfoBox {
    border-left: 1px #cccccc solid;
} */

/*控制logo圖片大小,以及最小寬度*/
.footerBox .footerLogo {
    width: 50%;
    min-width: 120px;
}

/*讓Info裡面的資訊用 ul li水平排列,過長可換行*/
.footerBox .footerInfoBox ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

/*每隔li控制一定間隔*/
.footerBox .footerInfoBox ul li {
    margin: 1% 2%
}

/*給予一些互動效果*/
.footerBox .footerInfoBox ul li a {
    transition: 0.4s;
    color: #fff;
}

/*碰到a標籤時字體放大*/
.footerBox .footerInfoBox ul li a:hover {
    font-size: 13px;
}

/*控制Info裡面note位置*/
.footerBox .footerInfoBox .note {
    text-align: center;
    margin-top: 1%;
    color: #666;
}

/*對iPad端坐兼容 在纵向模式下应用的样式*/
@media screen and (min-width: 768px) and (max-device-width: 1024px) {}

/*對手機端做兼容*/
@media screen and (max-width: 415px) {

    /*將FooterBox改為直式*/
    .footerBox {
        display: block;
    }

    /*將FooterBox內的ul改為直式*/
    .footerBox .footerInfoBox ul {
        flex-direction: column;
    }

    /*控制logo圖片大小*/
    .footerBox .footerLogo {
        width: 42%;
    }

}