@import "style.css";

.rightSide {
    width: 80%;
    display: flex;
    padding: 3%;
    padding-top: 100px;
}

.BookInfoTable{
    width: 100%;
    height: auto;
    display:flex;
    flex-wrap:wrap;
    margin: auto;
}

.BookInfoContainer1{
    width: 100%;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
    align-items:baseline;
    align-content: center;
    flex-direction:column;
    /*margin-left: 10%;*/
}

.TopicAndBackpageButton_div{
    width: 100%;
    display: flex;
    align-items:baseline;


}

.TopicText{
    font-size: 2.1875em;
    color: #808E8F;
    margin-bottom: 10%;
}

.Backbutton{
    font-size: 1.875em;
    color:#FFFFFF;;
    margin-left: auto;
    box-sizing: border-box;
    width: 155px;
    height: 45px;
    background: #6B7C7D;
    border: 2px solid #6B7C7D;
    border-radius: 50px;
    text-align: center;
}

.BookInfoContainer2{
    width: 100%;
    display:flex;
    flex-wrap:wrap;
    /*justify-content: center;*/
    align-items:baseline;
    
}

.NameAndClassificationContainer{
    display:flex;
    flex-wrap:wrap;  
    align-items:baseline;
    align-content: center;
    justify-content: center; 
    width: 100%;

}

#topic{
    white-space:pre-line;
}

.BookName{
    /* 書名 */
    /*width: 240px;*/
    /*argin-right: 20px;*/
    margin-bottom: 20px;
    display:flex;
    font-family: 'Microsoft JhengHei UI';
    font-style: normal;
    font-size: 3.4375em;
    color: #5a6364;
}

.book_age_classification{
    /* 書籍年齡分類 */
    width: 75.12px;
    height: 32.08px;
    
    font-family: 'Microsoft JhengHei UI';
    font-style: normal;
    font-weight: 400;
    font-size: 1.5625em;
    line-height: 32px;
    
    color: #808E8F;
}

.AlmostFont{
    font-family: 'Microsoft JhengHei UI';
    font-style: normal;
    font-weight: 400;
    font-size: 1.5625em;
    line-height: 60px;
    color: #474453;
    
}

.LittleTopicContainer{
    display: flex;
    width: 260px;
    justify-content: flex-start;
    font-size: 2.1875em;
    margin-left:10%;
    color: #5a6364;

}

.LittleTopicIntroduce{
    display: flex;
    justify-content: flex-start;
    font-size: 2.1875em;
    margin-right: 10%;
    margin-left: 10%;
    color: #5a6364;
}

#content{
    white-space:pre-line;
}


.RightSideContainer1{
    display: flex;
    align-items:center;
    width:100%;
    /* justify-content: center; */

}

.RightSideContainer2{
    display: flex;
    flex-wrap: wrap;
    width: 55%;
    justify-content: flex-start;
}

.RightSideContainer2-1{
    display: flex;
    flex-wrap: wrap;
    width: 65%;
    justify-content: flex-start;
}

.info_container_2{
    display: flex;
    justify-content: flex-end;
    
}

.SeparationLine_1{
    /* 分隔線 */
    width: 100%;
    height: 0px;
    margin-top: 5%;
    margin-bottom: 20px;

    border: 1px dashed #7B8081;
}

.separationLine_2{
    /* 分隔線 */
    width: 100%;
    height: 0px;
    top: 977px;

    margin-top: 20px;
    margin-bottom: 20px;
    
    border: 1px dashed #7B8081;
}

.reason_choosing{
    /* 編選向度 */
     
    width: 140.86px;
    height: 36px;

    font-family: 'Microsoft JhengHei UI';
    font-style: normal;
    font-weight: 400;
    font-size: 1.5625em;
    line-height: 32px;

    color: #808E8F;
}

.reason_choosing_text{
    /* 編選向度內容 */
     
    width: 281.72px;
    height: 215.98px;

    font-family: 'Microsoft JhengHei UI';
    font-style: normal;
    font-weight: 400;
    font-size: 1.5625em;
    line-height: 32px;

    color: #808E8F;
}

.book_introduce{
    /* 內容簡介 */
     
    width: 140.86px;
    height: 36px;

    font-family: 'Microsoft JhengHei UI';
    font-style: normal;
    font-weight: 400;
    font-size: 1.5625em;
    line-height: 32px;

    color: #808E8F;
}

.book_introduce_text{
    /* 內容簡介 */
     
    width: 612.73px;
    height: 71.99px;
    
    font-family: 'Microsoft JhengHei UI';
    font-style: normal;
    font-weight: 400;
    font-size: 1.5625em;
    line-height: 32px;
    
    color: #808E8F;
}

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

    .NameAndClassificationContainer{

        justify-content: center;
        width:100%;
    }
    .TopicText{
        font-size: 1.5625em;
        color: #808E8F;
    }
    
    .Backbutton{
        font-size: 1.25em;
        width: 100px;
        height: 30px;
        text-align:center;
    }

    .rightSide {
        width: 100%;
    }

    .RightSideContainer1{
        /*justify-content: center;*/
        width: 100%;
    }
    .AlmostFont{
        line-height:50px;
        font-size: 1.25em;
    }
    .LittleTopicContainer{
        justify-content: space-around;
        width: auto;
        margin-left: 0%;
        font-size: 1.5625em;
    }
    .LittleTopicIntroduce{
        font-size: 1.5625em;
    }
    .RightSideContainer2{
        width: 100%;
        justify-content: space-around;
    }

    .RightSideContainer2-1{
        width: 100%;
    }

    .BookInfoContainer2{
        justify-content: center;
    }


}

@media screen and (min-width:951px) and (max-width:1389px){
    .BookInfoContainer2{
        justify-content: center;
    }
    .RightSideContainer2{
        width: 70%;
    }
}