my_tests/assets/css/photos_main.scss

$lines-to-show-sm: 1;
$lines-to-show: 2;
$line-height-sm: 1.30;
$line-height: 1.39;

$photos-main-color:#6D6D6D;
$photos-second-color:#EE7800;
$light-gray:#9D9D9D;
$photos-main-font-size:16px;
$photos-second-font-size:14px;
$photos-mob-main-font-size:16px;
$photos-mob-second-font-size:12px;

//圖庫 大裝置沒有空白底部
.empty{
    height: 0;
}

.item-card{

    .photos-item-card{

        width: 100%;
        overflow: hidden;
        &:hover{
            .item-card-img{
                transform: scale(1.05);
            }
        }
    }

    .item-card-img{
        width: 100%;
        padding-top: 100%;
        background-size: cover;
        background-position: center center;
        transition: transform 300ms ease-in-out;
    }

    .item-card-text{
        a{
            font-size:$photos-main-font-size;
            height: $photos-main-font-size * $line-height-sm * 1.2;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            -moz-box-orient:vertical;
            box-orient:vertical;
            overflow:hidden;
            text-overflow:ellipsis;
            display: -webkit-box;
            color: #212529;
            &:hover{
                cursor: pointer;
            }
        }
    }
}

// @media screen and (min-width: 992px) and (max-width: 1260px){
//     .navbar{
//         .navbar-nav{
//             .nav-link{
//                 padding-left: 10px; //避免縮小螢幕主選單有折行問題
//                 padding-right: 10px; //避免縮小螢幕主選單有折行問題
//             }
//         }
//     }
// }

@media screen and (min-width: 1200px) {

    .navbar-brand-block{
        display: inline-block;
        position: absolute;
        left: 8px;
        @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
            position: relative;
        }
    }
    
    .navbar-collapse-block{
        margin-left: auto;
        margin-right: auto;
    }
    
    .nav-user-block{
        display: flex;
        justify-content: flex-end;
        position: absolute;
        right: 8px;
        @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
            position: relative;
        }
    }

    //小裝置保持logo置中
    .navbar-brand-block-sm{
        display: none;
    }

    body{
        overflow: auto;
    }

    .nb-mobile, .nb-mobile-icon{
        display: none;
    }
    .dropdown-wrapper{
        display: flex !important;
    }
    .st-mobile, .footer-fix, .searchall{
        display: none;
    }

    .top-designer, .search-bar, .search-tab{
        display: block;
    }

    .item-card-img-wrapper{
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }

    .item-card-img{
        position: relative;
        width: 100%;
        height: 290px;
        background-size: cover;
        background-position: center center;
    }

}

@media screen and (min-width: 992px) and (max-width: 1199px){

    //列表 gotop btn
    .gotop-btn-wrapper{
        right: 2%;
        bottom: 10%;
        z-index: 999;
    }

    //圖庫第一層箭頭寬度
    .owl-nav{
        width: calc(100% + 70px);
        z-index: 10;
    }

    .photos-owl-wrapper{
        background-image: url(../images/section/icon/photos/owl-bg-m.svg);
        background-repeat:no-repeat;
        background-position: center;
        height: 300px;
    }

    .nb-mobile-icon{
        display: block;
        .bars{
            display: block;
            &.active{
                display: none;
            }
        }
        .arrow{
            display: none;
            &.active{
                display: block;
            }
        }
        
    }

    .navbar-brand-block, .navbar-collapse-block, .nav-user-block{
        display: none;
    }

    .navbar-brand-block-sm{
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

}

@media screen and (min-width: 768px) and (max-width: 992px){

    //列表 gotop btn
    .gotop-btn-wrapper{
        right: 2%;
        bottom: 10%;
        z-index: 999;
    }

    //##### 圖庫第三層平板樣式-start #####

    .icon{
        width: 74px;
        height: 70px;
    }

    .info-area-other-case img, .info-area-same-case img{
        // width:170px;
        width: 100%;
        height:170px;
    }

    .info-area-title{
        font-size: 22px;
    }

    .data-table{
        font-size: 18px;
        .data-table-lf {
            flex-basis: 14%;
            flex-grow: 0;
            max-width: 14%;
        }
        .data-table-rt {
            flex-basis: 86%;
            flex-grow: 0;
            max-width: 86%;
            word-break: break-all;
        }
    }

    .contact-section{
        span{
            font-size: 22px;
        }
        .contact-section-detail{
            font-size: 18px;
        }
    }

    .info-area-other-case, .info-area-same-case, .info-area-data, .info-area-contact{
        font-size: 20px;
    }

    //##### 圖庫第三層平板樣式-end #####

    //圖庫第一層箭頭寬度
    .owl-nav{
        width: calc(100% + 70px);
        z-index: 10;
    }

    .photos-owl-wrapper{
        background-image: url(../images/section/icon/photos/owl-bg-s.svg);
        background-repeat:no-repeat;
        background-position: center;
        height: 300px;
    }

    .member{
        padding-top: 5.5rem;
    }


    .navbar-brand-block, .navbar-collapse-block, .nav-user-block{
        display: none;
    }

    .navbar-brand-block-sm{
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    .nb-mobile-icon{
        display: block;
        .bars{
            display: block;
            &.active{
                display: none;
            }
        }
        .arrow{
            display: none;
            &.active{
                display: block;
            }
        }
        
    }

    .search-tab-itemBtn{
        .dropdown-wrapper{
            display: -webkit-box !important;
        }
    }

    .footer .footer-media{
        color: #3b5998;
    }

}

@media screen and (min-width: 576px) and (max-width: 768px){

    //圖庫第一層箭頭寬度
    .owl-nav{
        width: calc(100% + 40px);
        height: 0%;
        z-index: 10;
    }

    .photos-owl-wrapper{
        background-image: url(../images/section/icon/photos/owl-bg-s.svg);
        background-repeat:no-repeat;
        background-position: center;
        height: 300px;
    }

    .member{
        padding-top: 5.5rem;

        .item-card-member{
            .item-card-img-member{
                width: 100%;
                height: 360px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
    }


    .navbar-brand-block, .navbar-collapse-block, .nav-user-block{
        display: none;
    }

    .navbar-brand-block-sm{
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    .nb-mobile-icon{
        display: block;
        .bars{
            display: block;
            &.active{
                display: none;
            }
        }
        .arrow{
            display: none;
            &.active{
                display: block;
            }
        }
    }

    .nb-mobile{
        &.active{
            position: fixed;
            bottom: 0;
        }
    }

    #navbarSupportedContent{
        display: none;
    }

    .search-tab-itemBtn{
        .dropdown-wrapper{
            display: -webkit-box !important;
        }
    }
}

@media screen and (max-width: 576px){

    //列表 gotop btn
    .gotop-btn-wrapper{
        right: 3%;
        bottom: 10%;
        z-index: 999;
    }

    //圖庫 有空白底部
    .empty{
        display: inline-block;
        height: 35px;
    }

    //圖庫第一、二層x軸捲動
    .photos-overflow{
        overflow-x: hidden;
    }

    //圖庫第一層箭頭寬度
    .owl-nav{
        width: calc(100% + 40px);
        height: 0%;
        z-index: 10;
    }

    .photos-owl-wrapper{
        background-image: url(../images/section/icon/photos/owl-bg-s.svg);
        background-repeat:no-repeat;
        background-position: center;
        height: 300px;
    }

    .member{
        padding-top: 5.5rem;

        .item-card-member{
            .item-card-img-member{
                width: 100%;
                height: 360px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
    }

    .navbar-brand-block, .navbar-collapse-block, .nav-user-block{
        display: none;
    }

    .navbar-brand-block-sm{
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    .nb-mobile-icon{
        display: block;
        .bars{
            display: block;
            &.active{
                display: none;
            }
        }
        .arrow{
            display: none;
            &.active{
                display: block;
            }
        }
    }

    .search-tab-itemBtn{
        .dropdown-wrapper{
            display: -webkit-box !important;
        }
    }

}