.main_nav li:first-child a{
    border-bottom: solid 9px var(--color_greengray);
}
.top{
    max-width: 1200px;
    margin: auto;
    margin-top: 100px;
}
.itempictures{
    width: 80%;
    margin: auto;
}
.itempictures img:not(#largeImg){
    cursor: pointer;
}
.itempictures img:not(#largeImg):hover{
    box-shadow: 2px 2px 4px rgba(26, 25, 25, 0.3);
}
.itempictures .col-12 .img{
    height: 55vh;
    width: 100%;
}
.itempictures .row-cols-4{
    margin-top: 10px;
}
.itempictures .row-cols-4 .img{
    width: 100%;
    height: 100%;
}

section img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.iteminfo{
    width: 80%;
    /* margin-top: 10%; */

}
.iteminfo h1{
    font-size: 2.4rem;
    font-weight: 500;
    margin: 5% 0 ;
}
p{
    line-height: 1.6rem;
}
.free{
    margin: 5% 0;
    padding: 0 3%;
    font-weight: 500;
    border-left: solid 3px var(--color_yellow);
}
.price p:nth-child(1){
    font-size: 1.6rem;
    color: var(--color_yellow);
    font-weight: 500;
}
.price p:nth-child(2), .iteminfo>p:nth-of-type(2){
    font-size: .8rem;
    color: gray;
    margin-top: 5%;
}
.amout{
    border: solid .5px gray;
    width: 60%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;
    user-select: none;
}
.amout input{
    background-color: inherit;
    border-radius: 0;
    height: 20px;
    border: 0;
    outline: none;
    text-align: center;
}
.amout span{
    padding: 0 3%;
    height: 20px;
    vertical-align: middle;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}
.amout span:hover{
    color: var(--color_yellow);
}
.amout .num_minus:hover{
    border-right: solid .5px gray;
}
.amout .num_plus:hover{
    border-left: solid .5px gray;
}

.add{
    display: flex;
    height: 100%;
    align-items: center;
}
.add label{
    margin-right: 10px;
    display: flex;
}
.add .img{
    width: 15%;
    height: 15%;
    margin-right: 10px;
}
.add span:nth-of-type(1){
    text-decoration: line-through;
}
.add span:nth-of-type(2){
    color: var(--color_yellow);
}
.buybtn{
    margin-top: 5%;
    background-color: var(--color_yellow);
    border-radius: 5px;
    border: none;
    width: 60%;
    height: 35px;
    color: white;
    font-size: 1.2rem;
}
.buybtn:hover{
    background-color: rgba(0,0,0,0);
    border: solid 1px var(--color_yellow);
    color: var(--color_yellow);
    cursor: pointer;
}
/* .buybtn:active{
    box-shadow: inset 2px 2px 2px var(--color_yellow);
} */
.category{
    display: flex;
    /* justify-content: space-evenly; */
    width: 70%;
    margin: 5% auto;
    padding: 70px;
}
.category a{
    text-decoration: none;
    font-size: 1rem;
    color: black;
    display: block;
}
.category li{
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 2px;
    width: 100%;
    z-index: 1;
    margin: 0 2%;
    background-color: #F3F0DF;
}
.category li:hover{
    background-color: var(--color_yellow);
}
.info{
    width: 70%;
    margin: auto;
}
.info .img{
    width: 90%;
}
.info .txt{
    margin-top: 25%;
}
.info .txt span{
    font-size: 1.6rem;
    font-family: 'Noto Serif TC', serif;
    margin: auto;
    margin-top: 50%;
    line-height: 2.4rem;
}
.info p{
    margin: 2% 0;
}
.info .row{
    margin: 10% 0;
}
.payment{
    width: 70%;
    margin: auto;
    /* padding-top: 10%; */
}
.payment .title{
    margin-left: 20%;
    padding-top: 20%;
}
.payment .title div{
    background-color: var(--color_pink);
    height: 120px;
}
.title h2{
    font-size: 2.4rem;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.payment .title h2{
    transform: translate(10%,-20%);
}
.payment .title img{
    width: 40%;
    margin-top: -30%;
    margin-left: -15%;
}
.payment .txt h3{
    font-size: 1.6rem;
    margin: 3% 0;
}
.payment .txt li{
    line-height: 1.4rem;
}
.payment .txt li a{
    color: var(--color_yellow);
    font-weight: 500;
}
.comment{
    padding: 0;
    padding-top: 5%;
    margin: 5% 0;
}
.comment .title div{
    background-color: var(--color_brightyellow);
    height: 70px;
    margin-left: 40%;
    right: 0;
}
.comment .title h2{
    transform: translate(-2%,-25%);
}
.comment .title img{
    width: 10%;
    margin-top: -10%;
    margin-left: 50%;
    
}
.oneComment{
    width: 50%;
    height: 10vh;
    margin: auto;
    margin-top: 5%;
    line-height: 1.6;
    padding-left: 10%;
    background-image: url(pictures/nekofoot.png);
    background-size: contain;
    background-repeat: no-repeat;
    word-wrap: break-word;
}
.saySomething{
    width: 60%;
    margin: auto;
    margin-top: 5%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.saySomething div{
    width: 80%;
}
.saySomething textarea{
    width: 100%;
    background-color: inherit;
    border: solid 3px var(--color_brightyellow);
    outline: none;
    letter-spacing: 2px;
    transition: color, .5s;
    box-shadow: 2px 2px 2px var(--color_yellow);

}
.saySomething input{
    height: 40px;
    background-color: var(--color_yellow);
    border: solid .5px var(--color_yellow);
    border-radius: 5px;
    letter-spacing: 2px;
    font-size: 1.6rem;
    color: white;
    font-weight: 500;
    cursor: pointer;
}
.saySomething input:hover{
    color: var(--color_yellow);
    background-color: transparent;
}
.saySomething input:active{
    box-shadow: inset 2px 2px 2px var(--color_yellow);
}
@media  screen and (max-width: 1179px) {
    .main_nav li:first-child a {
        background-color: var(--color_greengray);
        color: white;
    }
}
@media screen and (max-width: 779px){
    .itempictures{
        width: 100%;
    }
    .iteminfo{
        width: 100%;
        margin: 20px 5%;
    }
    .category{
        width: 100%;
        padding: 0;
    }
    .info{
        width: 90%;
    }
    .info .txt {
        margin-top: 0;
    }
    .payment{
        width: 90%;
    }
    .payment .title {
        margin-left: 0;
    }
    
    .comment .title div {
        margin-left: 10%;
    }
    .comment .title img {
        width: 30%;
        margin-top: -45%;
        margin-left: 40%;
    }
    .oneComment{
        width: 65%;
        padding-left: 20%;
        background-size: 20%;
    }
    .saySomething{
        width: 90%;
    }
    .saySomething div{
        width: 60%;
    }
}