my_tests/assets/css/photos_components/_photos-desktop.scss

$photos-main-family:'Microsoft JhengHei', Helvetica,Noto Sans TC,Roboto,Arial,sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

.html-desktop,
.photos-desktop {
    position: relative;
    height: 100%;
}

.photos-desktop {
    margin: 0;
    padding: 0;
    font-family: $photos-main-family;
}

/* 照片輪播區塊 */

.swiper-container.swiper-container-desktop{
    width: calc(100% - 480px) !important;
    height: 100% !important;
    margin-left: 0;
    margin-right: 0;
    transition: width 30ms ease-in-out;
    &.active{
        width: 100% !important;
    }
}

.swiper-wrapper.swiper-wrapper-desktop{
    width: 100%;
    height: 100% !important;
}
.img-wrapper-desktop{
    background-color: #6D6D6D;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.swiper-zoom-container-desktop{
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;

    img{
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%; 
        object-fit: contain;
    }
}

.swiper-zoom-container-sm-desktop{
    width: 50%;
    height: 70%;
}

.swiper-button-next.swiper-button-next-desktop{
    right: 0px;
}

.swiper-button-prev.swiper-button-prev-desktop{
    left: 0px;
}

.swiper-button-prev.swiper-button-prev-desktop, .swiper-button-next.swiper-button-next-desktop{
    top: 50% !important;
    width: 8%;
}

.swiper-button-prev.swiper-button-prev-desktop:after{
    content:'';
    width: 50px;
    height: 180px;
    background: url("../images/section/icon/photos/LEFT-2.svg") no-repeat ;
    background-position: center;
    display: inline-block;
    color: transparent;
}

.swiper-button-next.swiper-button-next-desktop:after{
    content:'';
    width: 50px;
    height: 180px;
    background: url("../images/section/icon/photos/RIGHT-2.svg") no-repeat ;
    background-position: center;
    display: inline-block;
    color: transparent;
}

.icon-wrapper-desktop{
    width: 50px;
    position: absolute;
    bottom: 5%;
    right: 2%;
    z-index: 99;
    flex-direction: column;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.icon-share-box{
    height: 50px;
}

.icon-share-box:hover .icon-media-box{
    display: block;
}

.icon-media-wrapper-desktop{
    // width: 10.45vw;
    width: 200px;
    // height: 20vh;
    height: 50px;
    position: absolute;
    // bottom: 14%;
    bottom: 177px;
    // right: 120%;
    right: 59px;
    z-index: 99;

    .icon-media-box{
        position: relative;
        padding: .3rem .3rem;
        box-shadow: 5px 3px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        display: none;
    }
}

.icon-media-item{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-media-item-line{
    background-image: url(../../assets/images/section/icon/photos/share-LINE1.svg);
    &:hover, &:focus, &:active{
        cursor: pointer;
        background-image: url(../../assets/images/section/icon/photos/share-LINE2.svg);
    }
}
.icon-media-item-fb{
    background-image: url(../../assets/images/section/icon/photos/share-FB1.svg);
    // 解決 IE FB 圖被吃掉
    background-position-x: 62%; 
    &:hover, &:focus, &:active{
        cursor: pointer;
        background-image: url(../../assets/images/section/icon/photos/share-FB2.svg);
    }
}
.icon-media-item-wechat{
    background-image: url(../../assets/images/section/icon/photos/share-wechat1.svg);
    &:hover, &:focus, &:active{
        cursor: pointer;
        background-image: url(../../assets/images/section/icon/photos/share-wechat2.svg);
    }
}

.icon-desktop {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: cover;
    box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
    &:hover, &:focus, &:active{
        box-shadow: 5px 3px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
}

.icon-share{
    background-image: url(../../assets/images/section/icon/photos/share-1.svg);
    &:hover, &:focus, &:active{
        cursor: pointer;
        
    }
}
.icon-download{
    background-image: url(../../assets/images/section/icon/photos/download-1.svg);
    &:hover, &:focus, &:active{
        cursor: pointer;
    }
    
}
.icon-like{
    background-image: url(../../assets/images/section/icon/photos/like-1.svg);
    &:hover, &:focus, &:active{
        cursor: pointer;
        background-image: url(../../assets/images/section/icon/photos/like-2.svg);
    }
    &.icon-like-solid{
        background-image: url(../../assets/images/section/icon/photos/like-3.svg);  
    }
}
.icon-zoom{
    background-image: url(../../assets/images/section/icon/photos/zoomin-1.svg);    
    &:hover, &:focus, &:active{
        cursor: pointer;
    }
    &.active{
        background-image: url(../../assets/images/section/icon/photos/zoomout.svg);  
    }
}


/* 資訊區塊 */

.h-info-area{
    width: 480px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    overflow-y: scroll;
    &.active{
        display: none;
    }

}

.icon-close-wrapper-desktop{
    position: absolute;
    right: 4%;
    &:hover{
        cursor: pointer;
    }
}

.info-area-title-desktop{
    font-size: 18px;
    font-weight: bold;
    padding: 0.6rem 0 0.6rem 0.6rem;
    margin: 1.6rem 0 1rem 0;
    background-color: #EFEFEF;
}

.info-area-other-case-desktop, .info-area-same-case-desktop, .info-area-data-desktop, .info-area-contact-desktop{
    font-size: 16px;
    font-weight: bold;
    color: #6D6D6D;
}

.other-case-desktop-items, .same-case-desktop-items{
    width: 101%;
}

.data-table-desktop{
    width: 100%;
    font-size: 14px;
    padding: 0.55rem 0;

    .data-table-items{
        padding: .05rem 0;
    }
    .data-table-lf {
        flex-basis: 18%;
        flex-grow: 0;
        max-width: 25%;
        display: flex;
        justify-content: start;
        align-items: start;
    }
    .data-table-rt {
        flex-basis: 82%;
        flex-grow: 0;
        max-width: 75%;
        justify-content: start;
        word-break: break-all;
    }
}


.contact-section-desktop{
    a{
        &:hover, &:focus{
            text-decoration: none;
        }
    }
    .contact-section-detail-desktop{
        font-size: 14px;
    }
}

.contact-section-avatar{
    width: 75px;
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.contact-section-company{
    font-weight: bold;
    font-size: 18px;
    -webkit-box-orient: vertical;
    -moz-box-orient:vertical;
    box-orient:vertical;
    -webkit-line-clamp: 2;
    height: calc(18px * 2 *1.39);
    overflow:hidden;
    text-overflow:ellipsis;
    display: -webkit-box;
}
.contact-section-detail-lf{
    flex-basis: 7%;
    flex-grow: 0;
    display: flex;
    align-items: start;
    max-width: 7%;
}
.contact-section-detail-rt{
    flex-basis: 93%;
    flex-grow: 0;
    max-width: 93%;
}