.titlename{
        font-size: 26px;
        text-align: center;
        color:purple;
        padding: 50px;
       }

       .main{
        display: flex;
        flex-wrap: wrap;
        max-width: 600px;
        width: 90%;
        gap: 40px 40px;
        margin: auto;
        justify-content: center;
       }

       .card{
        display: flex;
        flex-direction: column;
        width: 100px;
        max-width: 200px;
        gap: 5px;
       }

       .card-img{
        width: 100px;
        height: 125px;
        overflow: hidden;
       }

       .p1{
        text-transform:uppercase;
        padding: 3px;
        color: rgb(52, 99, 52);
       }

       .p2{
        padding: 3px;
        color: purple;
       }

       .p3{
        color: plum;
        padding: 3px;
        font-size: 14px;
        text-align: right;
        text-decoration: underline;
       }

       
        .modal{
            display: none;
            position: fixed;
            z-index: 999;
            padding-top: 60px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content{
            background-color: #fefefe;
            margin: auto;
            padding: 10px;
            border: 3px solid #888;
            width: 50%;
        }

        .modal-img{
            width: 200px;
            height:fit-content;
            overflow: hidden;
            margin: auto;
        }

        .modal-text{
            text-align: center;
            color: green;
            margin: auto;
        }

        .modal-text h2{
            text-transform: uppercase;
            color: purple;
        }

        .card:hover{
            opacity: 0.6;
            cursor: pointer;
        }

        .p3:hover{
            cursor: pointer;
            color:greenyellow;
            /* font-size: 16px; */
        }

        .close{
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus{
            color: #000;
            cursor: pointer;
        }

        #backtotop{
            /* display: none; */
            position:fixed;
            right: 20px;
            bottom:20px;
            padding:10px 15px;
            font-size: 18px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            background-color:purple;
            color:greenyellow;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        #backtotop.show{
            opacity: 1;
            pointer-events: auto;
        }

        @media(max-width:768px){

        /* 商品區 */
        .main{
            width: 100%;
            gap: 30px;
            justify-content: center;
        }

        .card{
            width: 45%;   /* 一排兩個 */
        }

        .card-img{
            width: 100%;
            height: auto;
        }

        /* Modal */
        .modal-content{
            width: 90%;
        }

        
        /* 回到頂部按鈕 */
        #backtotop{
            right: 10px;
            bottom: 10px;
        }
        
        }