@import url('http://fonts.googleapis.com/earlyaccess/notosanstc.css');

html {
    width: 100%;
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
}

body.bookContainer {
    width: 100%;
    height: 100%;
}

body.bookContainer iframe {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
}

.index .container {
}

.index .container .main-bg {
    background-image: url('../images/2024/index-bg.png');
    width: 100%;
    height: 100%;
    top: 0%;
}

body.index {
    background-color: #ffffff;
}

body.inner {
    background-color: #fbf7ed;
}

.container {
    position: relative;
    box-sizing: content-box;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    overflow: hidden;
}

.inner .container {
    position: unset;
}

.logo {
    position: absolute;
    background-image: url('../images/2023/w_book_logo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.main-bg {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.enter {
    position: absolute;
    background-image: url('../images/2024/btn/w_enter.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
}

.menuBg {
    position: absolute;
    background-image: url('../images/2024/w_bg2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* folding menu css */
nav {
    width: 19%;
    height: 100%;
    float: left;
    margin-right: 1em;
}

nav input {
    display: none;
}

.menuItemGroup {
    position: absolute;
    z-index: 10;
    width: 45%;
    height: 7%;
    left: 5%;
    top: 10%;
}

.menuItemGroup.grid4 {
    width: 60%;
}

div #curator {
    background-image: url('../images/2024/btn/05.png');
}

div #curator.selected {
    background-image: url('../images/2024/btn/05-2.png');
}

div #judge {
    background-image: url('../images/2024/btn/06.png');
}

div #judge.selected {
    background-image: url('../images/2024/btn/06-2.png');
}

div #comment {
    background-image: url('../images/2024/btn/07.png');
}

div #comment.selected {
    background-image: url('../images/2024/btn/07-2.png');
}

div #back {
    background-image: url('../images/2024/btn/08.png');
}

div .subitems {
    position: absolute;
    width: 38%;
    height: 410%;
    left: 64%;
    top: 104%;
    display: none;
    background-image: url('../images/2024/web_btn_list1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.grid4 .subitems {
    width: 30%;
    left: 48%;
}

div #comment.opened {
}

div #comment1 {
    background-image: url('../images/2024/btn/age1.png');
    top: 13%;
}

div #comment2 {
    background-image: url('../images/2024/btn/age2.png');
    top: 29%;
}

div #comment3 {
    background-image: url('../images/2024/btn/age3.png');
    top: 45%;
}

div #comment4 {
    background-image: url('../images/2024/btn/age4.png');
    top: 61%;
}

div #comment5 {
    background-image: url('../images/2024/btn/age5.png');
    top: 75%;
}

.menuItem {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    width: 33%;
    height: 100%;
    float: left;
    background-size: 87% 100%;
    box-sizing: border-box;
}

.grid4 .menuItem {
    width: 25%;
}

.menuSubItem {
    width: 80%;
    height: 14%;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 88% 30%;
    background-size: 95% 80%;
    position: absolute;
    left: 10%;
}

.menu .menuSubItem {
    width: 80%;
    height: 25%;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 16% 30%;
    background-size: 59% 80%;
    position: absolute;
    left: 10%;
}

.highlight {
    display: none;
    background: rgb(255, 245, 215);
    background: linear-gradient(180deg, rgba(255, 245, 215, 0) 0%, rgba(255, 245, 215, 0) 67%, rgba(255, 149, 0, 0.5) 68%, rgba(255, 149, 0, 0.5) 100%);
    position: absolute;
    width: 84%;
    height: 100%;
    top: 0%;
    left: 8%;
}

.menuSubItem:hover .highlight {
    display: block;
}

.clickme {
    position: absolute;
    height: 10%;
    width: 4%;
    background-image: url('../images/2023/btn/w_point.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.innerBg {
    position: absolute;
    background-image: url('../images/2024/bg_web_author.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bookname {
    color: #fff;
    letter-spacing: 2px;
    font-size: 80%;
    background-color: rgba(155, 155, 155, 0.8);
    border-radius: 10px;
    position: absolute;
    margin-top: -120%;
    text-align: center;
    padding: 30%;
    box-sizing: border-box;
    line-height: 20px;
}

.coverBox {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.coverBox.book1, .coverBox2.book1 {
    background-image: url('../images/2023/cover1.png');
}

.coverBox.book2, .coverBox2.book2 {
    background-image: url('../images/2023/cover2.png');
}

.coverBox.book3, .coverBox2.book3 {
    background-image: url('../images/2023/cover3.png');
}

.coverBox.book4, .coverBox2.book4 {
    background-image: url('../images/2023/cover4.png');
}

.coverBox.book5, .coverBox2.book5 {
    background-image: url('../images/2023/cover5.png');
}

.commentBox {
    position: absolute;
}

.commentBoxHeader {
    position: absolute;
    width: 10%;
    height: 5%;
    top: 35%;
    left: 44%;
    background-image: url('../images/2024/web_text_title.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.commentTitle {
    font-family: 'Noto Sans TC';
    font-weight: bold;
    font-size: 28px;
    letter-spacing: 5px;
    width: 180px;
    height: 50px;
    float: left;
    overflow: hidden;
}

.commentTitleUnderline {
    float: none;
    width: auto;
    height: 44px;
    border-bottom: solid #000 2px;
    overflow: hidden;
}

.commentBoxBody {
    font-family: 'Noto Sans TC';
    font-size: 20px;
    text-align: justify;
}

.ideaBox {
    position: absolute;
}

.ideaBoxHeader {
    width: 100%;
}

.group-rank {
    float: left;
    font-family: 'Noto Sans TC';
    color: rgb(0, 0, 0);
    font-size: 28px;
    line-height: 66px;
}

.ideaBox .coverBox2 {
    position: relative;
    width: 100%;
    height: 33%;
    left: 0%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    clear: both;
}

.ideaBox .bookname2 {
    float: left;
    font-family: 'Noto Sans TC';
    color: rgb(0, 0, 0);
    font-size: 38px;
    margin-left: 10px;
}

.ideaBox .ideaTitle {
    font-family: 'Noto Sans TC';
    font-weight: bold;
    font-size: 38px;
    margin-top: 4%;
    letter-spacing: 5px;
}

.ideaBox .ideaText {
    font-family: 'Noto Sans TC';
    font-size: 20px;
    margin-top: 2%;
    line-height: 35px;
    text-align: justify;
}

.bookNameBox {
    position: absolute;
}

.bookNameBox .group {
    color: #333333;
    position: absolute;
    text-align: center;
    font-weight: bold;
}

.bookNameBox .rank {
    position: absolute;
    text-align: center;
    font-weight: bold;
}

.bookNameBox .bookname2 {
    position: absolute;
    text-align: center;
    font-weight: bold;
    color: #0a90ac;
}

.authorPhoto {
    position: absolute;
    object-fit: contain;
}

.authorBox {
    position: absolute;
    overflow-y: auto;
}

.authorBox .photo {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}

.authorTitle {
    position: absolute;
    font-family: 'Noto Sans TC';
    font-weight: bold;
}

.authorBox .authorText {
    position: absolute;
    font-family: 'Noto Sans TC';
    font-size: 20px;
    letter-spacing: 1px;
    text-align: justify;
}

.commentTitle2 {
    font-family: 'Noto Sans TC';
    margin-top: 2%;
    font-weight: bold;
    letter-spacing: 5px;
}

.commentText2Box {
    width: 100%;
    height: 47%;
    position: relative;
    overflow-y: auto;
}

.commentText2-title {
    font-family: 'Noto Sans TC';
    margin-top: 2%;
    text-align: justify;
    font-weight: bold;
}

.commentText2 {
    font-family: 'Noto Sans TC';
    margin-top: 2%;
    text-align: justify;
}

.commentText2:first-child {
    margin-top: 0%;
}

.phone-year-selector-btn, .phone-year-selector {
    display: none;
}

/* mobile */
@media (max-width:768px) {
    .index .container {
    }

    .index .container .main-bg {
        background-image: url(../images/2024/bg1.png);
        background-size: cover;
        width: 100%;
        height: 100%;
        top: 0%;
        z-index: -1;
    }

    .inner .container {

        /*overflow-y: auto;*/
    }

    .logo {
        width: 38%;
        height: 13%;
        top: 0%;
        left: 2%;
        z-index: 1;
    }

    .logo.home {
        top: -1%;
        left: 4%;
        width: 40%;
    }

    .phone-year-selector-btn {
        display: block;
        background-image: url('../images/2024/btn/btn_phone_year.png');
        width: 31%;
        height: 17%;
        top: 5%;
        left: 7%;
        position: absolute;
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
    }

    .phone-year-selector {
        width: 73%;
        height: 17%;
        top: 12%;
        left: 3%;
        position: absolute;
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
    }

    .enter {
        background-image: url('../images/2024/btn/enter.png');
        width: 45%;
        height: 12%;
        top: 50%;
        left: 9%;
    }

    .yearItemGroup {
        display: none;
    }

    .yearItem {
        margin-left: 0%;
        margin-top: 4%;
        width: 30%;
        height: 20%;
        float: left;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 65% 70%;
        border-right: white 2px solid;
    }

    .yearItem:nth-child(3), .yearItem:nth-child(6), .yearItem:nth-child(9) {
        border-right: none;
    }

    .select-style {
        display: none;
    }

    .y2015 {
        background-image: url('../images/2024/btn/2015.png');
    }

    .y2016 {
        background-image: url('../images/2024/btn/2016.png');
    }

    .y2017 {
        background-image: url('../images/2024/btn/2017.png');
    }

    .y2018 {
        background-image: url('../images/2024/btn/2018.png');
    }

    .y2019 {
        background-image: url('../images/2024/btn/2019.png');
    }

    .y2020 {
        background-image: url('../images/2024/btn/2020.png');
    }

    .y2021 {
        background-image: url('../images/2024/btn/2021.png');
    }

    .y2022 {
        background-image: url('../images/2024/btn/2022.png');
    }

    .y2023 {
        background-image: url('../images/2024/btn/2023.png');
    }

    .y---- {
        background-image: url('../images/2024/btn/----.png');
    }

    .menuItemGroup {
        display: none;
    }

    .select-style {
        position: absolute;
        top: 2%;
        left: 70%;
        width: 25%;
        height: 6%;
        padding: 0;
        margin: 0;
        border: none;
        overflow: hidden;
        background-image: url('../images/2023/btn/year_ch.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .menu .select-style, .inner .select-style {
        display: block;
        background-image: url('../images/2024/btn/line.png');
        width: 10%;
        height: 40px;
        top: 3%;
        left: 6%;
    }

    .inner .select-style {
        background-image: url('../images/2023/btn/line.png');
        width: 10%;
        height: 40px;
        top: 10px;
        left: 87%;
    }

    .curator .select-style, .judge .select-style, .comment .select-style {
        background-image: url('../images/2024/btn/line2.png');
    }

    .inner .logo {
        height: 55px;
        top: 5px;
        left: 2%;
    }

    .select-style select {
        padding: 5px 8px;
        width: 130%;
        height: 100%;
        border: none;
        box-shadow: none;
        background-color: transparent;
        background-image: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        color: rgba(0, 0, 0, 0);
    }

    option {
        color: rgba(0, 0, 0, 255);
    }

    .select-style select:focus {
        outline: none;
    }

    .menuBg {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        background-image: url('../images/2024/bg2.png');
    }

    #book1 {
        width: 37%;
        height: 17%;
        left: 52%;
        top: 9%;
        background-image: url('../images/2024/btn_A1.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    #book2 {
        width: 37%;
        height: 17%;
        left: 8%;
        top: 20%;
        background-image: url('../images/2024/btn_A3.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    #book3 {
        width: 37%;
        height: 17%;
        left: 52%;
        top: 33%;
        background-image: url('../images/2024/btn_B.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    #book4 {
        width: 37%;
        height: 17%;
        left: 8%;
        top: 42%;
        background-image: url('../images/2024/btn_C.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    #book5 {
        width: 37%;
        height: 17%;
        left: 52%;
        top: 54%;
        background-image: url('../images/2024/btn_D.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    .innerMenu {
        position: absolute;
        left: 12%;
        top: 16%;
        width: 75%;
        height: 4%;
        z-index: 10;
    }

    .innerBg {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        background-image: url('../images/2024/bg_autho-2.png');
    }

    .book-comment .authorTitle {
        display: none;
    }

    .container .innerBg {
    }

    .coverBox {
        width: 80%;
        height: 33%;
        left: 10%;
        top: 14%;
    }

    .commentBox {
        top: 44%;
        width: 65%;
        left: 18%;
        height: 35%;
        overflow-y: auto;
    }

    .commentBoxHeader {
        height: 45px;
    }

    .commentTitle {
        font-size: 25px;
        letter-spacing: 5px;
        width: 130px;
        height: 30px;
        float: left;
        overflow: hidden;
    }

    .commentTitleUnderline {
        float: none;
        width: auto;
        height: 27px;
        border-bottom: solid #000 2px;
        overflow: hidden;
    }

    .commentBoxBody {
        font-family: 'Noto Sans TC';
        font-size: 15px;
        text-align: justify;
        position: absolute;
        background: white;
    }

    .ideaBox {
        position: relative;
        width: 80%;
        left: 10%;
        margin-top: 25%;
    }

    .authorBox {
        position: relative;
        width: 80%;
        height: 17%;
        left: 10%;
        top: 61%;
    }

    .book-comment .authorBox {
        display: none
    }

    .authorBox .photo {
        height: 20%;
    }

    .authorBox .authorName {
        left: 28%;
    }

    .ideaBox .coverBox2 {
        height: 220px;
        left: 10%;
        width: 80%;
    }

    .ideaBox .ideaBoxHeader {
        height: 85px;
    }

    .ideaBox .group-rank {
        font-size: 15px;
        line-height: 34px;
    }

    .ideaBox .bookname2 {
        font-size: 25px;
        margin-left: 0;
        width: 100%;
    }

    .ideaBox .ideaTitle {
        font-size: 22px;
        letter-spacing: 2px;
    }

    .ideaBox .ideaText {
        font-size: 18px;
        line-height: 26px;
    }

    .authorBox .photo {
        height: 220px;
    }

    .authorTitle {
        position: absolute;
        font-size: 18px;
        letter-spacing: 2px;
        left: 19%;
        top: 60%;
        transform: scale(0.8);
        text-decoration: underline dotted;
        text-underline-offset: 10px;
    }

    .authorBox .authorText {
        font-size: 15px;
        letter-spacing: 2px;
        left: 15%;
        top: 26%;
        position: absolute;
        width: 75%;
        text-align: justify;
        overflow-y: auto;
        height: 73%;
    }

    .bookNameBox {
        position: absolute;
        left: 10%;
        top: 20%;
        width: 80%;
        height: 13%;
    }

    .bookNameBox .group {
        position: absolute;
        left: 12%;
        top: 26%;
        width: 80%;
    }

    .bookNameBox .group {
        position: absolute;
        left: 3%;
        top: 22%;
        width: 50%;
        transform: rotate(-9deg) scale(0.8);
    }

    .bookNameBox .rank {
        position: absolute;
        left: 78%;
        top: 74%;
        background-color: #efcf3f;
        border-radius: 100px;
        height: 40%;
        width: 17%;
        border: 2px solid;
    }

    .bookNameBox .bookNameBox-label {
        position: absolute;
        left: 10%;
        top: 10%;
        width: 80%;
        height: 100%;
    }

    .bookNameBox .bookname2 {
        position: absolute;
        left: 12%;
        top: 51%;
        width: 80%;
    }

    .innerMenuItem.outline {
        background-image: url('../images/2024/btn/btn_author.png');
        width: 33%;
        height: 80%;
        position: absolute;
        left: 0%;
        top: 0;
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
        border-right: 1px solid black;
        box-sizing: border-box;
    }

    .innerMenuItem.outline.selected {
        background-color: #ede47b;
    }

    .innerMenuItem.comment {
        background-image: url('../images/2024/btn/btn_award.png');
        width: 33%;
        height: 80%;
        position: absolute;
        left: 33%;
        top: 0;
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
        border-right: 1px solid black;
    }

    .innerMenuItem.comment.selected {
        background-color: #ede47b;
    }

    .innerMenuItem.play {
        background-image: url('../images/2024/btn/btn_book.png');
        width: 33%;
        height: 80%;
        position: absolute;
        left: 67%;
        top: 0;
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .innerMenuItem.play:after {
        content: url('../images/2023/btn/phone_btn_arrow.png');
        display: inline-block;
        width: 5%;
        height: 50%;
        right: 3%;
        position: absolute;
        text-align: center;
        bottom: 45%;
    }

    .commentTitle2 {
        position: relative;
        width: 80%;
        left: 10%;
        margin-top: 100px;
        font-size: 25px;
    }

    .commentText2 {
        position: relative;
        width: 90%;
        left: 5%;
        margin-top: 10px;
        font-size: 15px;
    }

    .commentText2:last-child {
        margin-bottom: 40px;
    }

    #closeBtn {
        position: absolute;
        left: 82%;
        top: 10%;
        width: 14%;
        height: 5%;
        padding: 0;
        margin: 0;
        border: none;
        overflow: hidden;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../images/2024/btn/w_close2.png');
        z-index: 20;
    }

    .curator #closeBtn, .judge #closeBtn, .comment #closeBtn {
        background-image: url('../images/2024/btn/w_close.png');
    }

    #inner-label {
        position: absolute;
        left: 19%;
        top: 16%;
        width: 35%;
        height: 7%;
        padding: 0;
        margin: 0;
        border: none;
        overflow: hidden;
        background-image: url('../images/2023/phone_title2.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 20;
    }

    #inner-label .label-text {
        position: absolute;
        left: 0%;
        top: 26%;
        width: 100%;
        height: 40%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .header {
        display: none;
    }

    .commentText2Box {
        width: 70%;
        height: 48%;
        margin-left: 15%;
        margin-top: 50%;
    }

    .commentText2Box-bg {
        position: absolute;
        width: 100%;
        height: 72%;
        left: 0%;
        top: 12%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../images/2023/phone_popup.png');
    }

    .commentText2-title {
        position: relative;
        margin-top: 0%;
        width: 90%;
        left: 5%;
    }

    .authorPhoto {
        width: 52%;
        left: 24%;
        top: 33%;
    }

    .menu .menuSubItem {
        width: 80%;
        height: 25%;
        position: absolute;
        background-repeat: no-repeat;
        background-position: 33% 30%;
        background-size: 74% 65%;
        position: absolute;
        left: 10%;
    }

    .commentBoxHeader {
        width: 30%;
        left: 35%;
        top: 35%;
    }

    .curator .innerBg {
        background-image: url('../images/2024/bg_curator.png');
    }

    .judge .innerBg {
        background-image: url('../images/2024/bg_review.png');
    }

    .comment .innerBg {
        background-image: url('../images/2024/bg_other_review.png');
    }

}

/* desktop */
@media (min-width:769px) {
    .index .container {
    }

    .logo {
        width: 12%;
        height: 13%;
        top: 2%;
        left: 2%;
        z-index: 10;
    }

    .logo.outer {
        top: 1%;
        left: 2%;
    }

    .logo.home {
        top: 2%;
        left: 1%;
    }

    .enter {
        width: 15%;
        height: 20%;
        top: 41.5%;
        left: 71%;
    }

    .yearItemGroup {
        position: absolute;
        width: 24%;
        height: 22%;
        left: 7%;
        top: 45.5%;
        z-index: 2;
    }

    .yearItem {
        margin-left: 0%;
        margin-top: 2%;
        width: 32%;
        height: 21%;
        float: left;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 55% 55%;
    }

    .select-style {
        display: none;
    }

    .y2015 {
        background-image: url('../images/2024/btn/2015.png');
    }

    .y2016 {
        background-image: url('../images/2024/btn/2016.png');
    }

    .y2017 {
        background-image: url('../images/2024/btn/2017.png');
    }

    .y2018 {
        background-image: url('../images/2024/btn/2018.png');
    }

    .y2019 {
        background-image: url('../images/2024/btn/2019.png');
    }

    .y2020 {
        background-image: url('../images/2024/btn/2020.png');
    }

    .y2021 {
        background-image: url('../images/2024/btn/2021.png');
    }

    .y2022 {
        background-image: url('../images/2024/btn/2022.png');
    }

    .y2023 {
        background-image: url('../images/2024/btn/2023.png');
    }

    .y---- {
        background-image: url('../images/2024/btn/----.png');
    }

    .menuBg {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
    }

    #book1 {
        width: 20%;
        height: 19%;
        left: 8%;
        top: 32%;
        background-image: url('../images/2024/btn_click_A1.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    #book2 {
        width: 20%;
        height: 19%;
        left: 24%;
        top: 51%;
        background-image: url('../images/2024/btn_click_A2.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    #book3 {
        width: 20%;
        height: 19%;
        left: 36%;
        top: 32%;
        background-image: url('../images/2024/btn_click_B.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    #book4 {
        width: 20%;
        height: 19%;
        left: 53%;
        top: 51%;
        background-image: url('../images/2024/btn_click_C.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    #book5 {
        width: 20%;
        height: 19%;
        left: 64%;
        top: 32%;
        background-image: url('../images/2024/btn_click_D.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    .innerMenu {
        position: absolute;
        width: 60%;
        height: 7%;
        left: 5%;
        top: 10%;
    }

    .innerMenu2 {
        position: absolute;
        left: 88%;
        top: 3%;
        width: 11%;
        height: 15%;
    }

    .innerMenuItem {
        background-repeat: no-repeat;
        background-size: 87% 100%;
        background-position: center;
        float: left;
        width: 25%;
        height: 100%;
        margin-left: 0%;
    }

    .innerMenu2 .back {
        width: 100%;
    }

    .innerMenuItem.back {
        background-image: url('../images/2024/btn/01.png');
    }

    .innerMenuItem.outline {
        background-image: url('../images/2024/btn/02.png');
    }

    .innerMenuItem.outline.selected {
        background-image: url('../images/2024/btn/02-2.png');
    }

    .innerMenuItem.comment {
        background-image: url('../images/2024/btn/03.png');
    }

    .innerMenuItem.comment.selected {
        background-image: url('../images/2024/btn/03-2.png');
    }

    .innerMenuItem.play {
        background-image: url('../images/2024/btn/04.png');
    }

    .innerBg {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        background-size: cover;
    }

    .coverBox {
        width: 32%;
        height: 44%;
        left: 9%;
        top: 28%;
    }

    .commentBox {
        width: 27%;
        height: 50%;
        left: 44%;
        top: 34%;
    }

    .commentBoxBody {
        font-size: 18px;
        height: 50%;
        position: absolute;
        overflow: auto;
        top: 17%;
        padding-right: 5%;
    }

    .ideaBox {
        width: 40%;
        height: 70%;
        left: 10%;
        top: 18%;
    }

    .authorBox {
        width: 38%;
        height: 33%;
        left: 27%;
        top: 34%;
    }

    .authorBox .photo {
        width: 70%;
        height: 70%;
        background-position: center;
        left: 14%;
    }

    .commentTitle2 {
        position: relative;
        width: 70%;
        left: 15%;
        margin-top: 12%;
        font-size: 35px;
    }

    .commentText2Box {
        width: 42%;
        height: 25%;
        margin-left: 32%;
        margin-top: 21%;
    }

    .commentText2 {
        position: relative;
        width: 99%;
        left: 0%;
        margin-top: 20px;
        font-size: 18px;
    }

    .commentText2:last-child {
        margin-bottom: 40px;
    }

    #closeBtn {
        display: none;
    }

    #inner-label {
        display: none;
    }

    .ideaBoxHeader {
        width: 100%;
        min-height: 80px;
        float: left;
    }

    div #judge {
    }

    div #comment {
    }

    .grid4 #comment:after {
        width: 3%;
        right: 25%;
    }

    .curator .innerBg {
        background-image: url('../images/2024/bg_web_curator.png');
    }

    .judge .innerBg {
        background-image: url('../images/2024/bg_web_review.png');
    }

    .comment .innerBg {
        background-image: url('../images/2024/bg_web_other_review.png');
    }

    .book .innerBg {
    }

    .authorTitle {
        font-size: 18px;
        bottom: 44%;
        left: 27%;
        text-decoration: underline dotted;
        text-underline-offset: 10px;
    }

    .authorBox .authorText {
        font-size: 18px;
        top: 26%;
        left: 35%;
        width: 62%;
    }

    .bookNameBox {
        width: 40%;
        height: 20%;
        top: 27%;
        left: 13%;
    }

    .bookNameBox .group {
        width: 34%;
        height: 20%;
        top: 34%;
        left: 13%;
        transform: rotate(-12deg);
    }

    .bookNameBox .rank {
        width: 34%;
        height: 20%;
        top: 16%;
        left: 63%;
    }

    .bookNameBox .bookname2 {
        width: 61%;
        height: 20%;
        top: 65%;
        left: 12%;
    }

    .authorPhoto {
        width: 17%;
        height: 28%;
        top: 30%;
        left: 66%;
    }

    .innerMenu #back {
        border: none;
        background-size: 87% 100%;
    }

    .innerMenu .subitems {
        position: absolute;
        width: 27%;
        height: 280%;
        left: 42%;
        top: 91%;
        display: none;
        background-image: url('../images/2023/web_btn_list2.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 100;
    }

    .menu .menuSubItem {
        width: 80%;
        height: 13%;
        position: absolute;
        background-repeat: no-repeat;
        background-position: 50% 30%;
        background-size: 80% 72%;
        position: absolute;
        left: 10%;
    }

    .innerMenu .menuSubItem {
        width: 80%;
        height: 21%;
        background-size: 60% 100%;
    }

}

.snow {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}