@charset "utf-8";
/* tablet version */
@media (min-width: 601px) {
    html, body {
        height: 100%;
        margin: 0;
        font-size: 10px;
        background: var(--bg) !important;
        color: var(--font) !important;
    }
    .logo-header {
        display: none;
    }
    .tws-main {
        position: relative;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 58.1rem;
        height: 38.6rem;
        border-radius: 0.5rem;
        padding: 0.2rem;
        background: #000;
        box-shadow: rgba(0, 0, 0, 0.3) 0.4rem 0.4rem 0 0;
    }
    .tws-ads-box {
      position: absolute;
      top: -60px; right: 0;
      display: flex; align-items: flex-end;
    }
        .tws-ads-box>#ntws_link {
          width: 14rem; height: 4.5rem;
          margin-right: 1rem;
          background-image: url(../img/ads/ntwsLink_basic.svg);
          background-size: contain;
          background-repeat: no-repeat;
        }
        .tws-ads-box>#ntws_link:hover {
          background-image: url(../img/ads/ntwsLink_hover.svg);
        }
        .tws-ads-box>#bible_link {
          width: 5.1rem; height: 4.9rem;
          background-image: url(../img/ads/bible_basic.svg);
          background-size: contain;
          background-repeat: no-repeat;
        }
        .tws-ads-box>#bible_link:hover {
          background-image: url(../img/ads/bible_hover.svg);
        }
    .tws-logo-box {
        position: relative;
        display: block;
        float: left;
        width: 15.4rem;
        height: 15.2rem;
        border-radius: 0.3rem;
        background: var(--boxbg);
    }
        .tws-logo-box>h1 {
            position: absolute;
            top: 1.4rem;
            left: -1.5rem;
            width: 14.5rem;
            height: 4.3rem;
            background-image: url(../img/twsLogo.svg);
            background-size: contain;
            background-repeat: no-repeat;
            border-radius: 0.3rem;
        }
         .tws-logo-box>a {
            position: absolute;
            top: 0.6rem;
            left: -1.3rem;
            width: 14.5rem;
            height: 5.5rem;
            background-image: url(../img/new_tws.svg);
            background-size: contain;
            background-repeat: no-repeat;
         }
         .tws-logo-box>a:hover {
            cursor: pointer;
            background-image: url(../img/new_tws_hover.svg);
         }
        #helpBtn {
            position: absolute;
            bottom: 0.3rem;
            right: 0.6rem;
            width: 1.6rem;
            height: 1.6rem;
            background-image: url(../img/help/twsHelpBtn.svg);
            background-size: contain;
            background-repeat: no-repeat;
        }
        #helpBtn:hover {
            cursor: help;
        }
    .tws-info {
        float: left;
        width: 42.3rem;
    }
        .tws-info section {
            display: block;
            float: left;
            border-radius: 0.3rem;
            margin: 0 0 0.2rem 0.2rem;
        }
        .tws-info-1 {
            width: 11rem;
            height: 7.5rem;
            background-image: url(../img/info001/twsInfo1.svg);
            background-size: contain;
            background-repeat: no-repeat;
        }
        .tws-info-1:hover {
            cursor: pointer;
        }
            .tws-info-1>div {
                position: absolute;
                top: 1.5rem;
                left: 0.9rem;
                width: 4.4rem;
                height: 4.4rem;
                border-radius: 50%;
                box-shadow: 0.1rem 0.2rem 0 0 rgba(0, 0, 0, 0.3);
            }
            .tws-info-1>div>div {
                width: 4.4rem;
                height: 4.4rem;
                background-image: url(../img/info001/twslangbtn.svg);
                background-size: contain;
                background-repeat: no-repeat;
                transform: rotate(35deg);
                transition: all 0.2s;
            }
        .tws-info-2 {
            width: 19.7rem;
            height: 7.5rem;
            padding: 0.5rem;
            text-align: left;
            background: var(--boxbg);
        }
            .tws-info-2>p {
                display: block;
                width: 100%;
                height: 1.5rem;
                margin: 0 0 0.1rem 0;
            }
            .tws-info-2>p>span {
                display: inline-block;
                margin: 0 0.3rem 0 0;
            }
            .tws-info-2>p>span:nth-child(1) {
                width: 1.5rem;
            }
            .tws-info-2>p>span:nth-child(2) {
                width: 2.5rem;
                margin: 0 1rem 0 0;
                border-right: 0.1rem solid;
            }
            .tws-info-2>p>span:nth-child(3) {
                width: 2.5rem;
                margin: 0 1rem 0 0;
                border-right: 0.1rem solid;
            }
        .tws-info-3 {
            position: relative;
            width: 11rem;
            height: 7.5rem;
            background: var(--boxbg);
        }
        .tws-info-3:hover {
            cursor: pointer;
        }
            .tws-info-3>div:nth-child(2) {
                display: block;
                position: absolute;
                top: 1rem;
                left: 0.8rem;
                width: 9.4rem;
                height: 2.4rem;
                border: 0.1rem solid #000;
                border-radius: 0.3rem;
                background: var(--timebg);
                box-shadow: 0.1rem 0.2rem 0 0 rgba(0, 0, 0, 0.3);
            }
            .tws-info-3>div:nth-child(2)>p {
                position: relative;
                float: left;
                width: 50%;
                height: 2.4rem;
                font-size: 1.1rem;
                line-height: 2.1;
                transition: all 0.5s;
            }
            #twsTimeBtn {
                position: absolute;
                width: 4.7rem;
                height: 2.2rem;
                border-radius: 0.3rem;
                background: var(--timebtn);
                transition: all 0.2s;
            }
            .tws-info-3>div:nth-child(3) {
                top: 5.5rem;
                transition: all 0.5s;
            }
            .tws-info-3>div:nth-child(3)>p {
                font-size: 1.8rem !important;
                text-align: right;
                color: var(--font);
            }
            .tws-info-3>div:nth-child(3)>p:nth-child(1) {
                display: none;
            }
            .tws-info-3>div:nth-child(4) {
                position: absolute;
                top: 5.5rem;
                left: 50%;
                transform: translate(-50%, -50%);
                display: block;
                font-size: 1.8rem;
                text-align: right;
                transition: all 0.5s;
            }
            .tws-info-3>div:nth-child(4)>p {
                color: var(--font);
            }
            .tws-info-3>div:nth-child(4)>p:nth-child(1) {
                display: none;
            }
            #tbLeft {
                bottom: 0;
                left: 0;
                width: 50%;
                height: 50%;
                opacity: 1;
            }
            #tbRight {
                bottom: 0;
                right: 0;
                width: 50%;
                height: 50%;
                opacity: 1;
            }
        .tws-info-4 {
            width: 11rem;
            height: 7.5rem;
            background-image: url(../img/info004/twsInfo4.svg);
            background-size: contain;
            background-repeat: no-repeat;
        }
        .tws-info-4:hover {
            cursor: pointer;
        }
            .tws-info-4>div {
                position: absolute;
                top: 1.5rem;
                left: 0.9rem;
                width: 4.4rem;
                height: 4.4rem;
                border-radius: 50%;
                box-shadow: 0.1rem 0.2rem 0 0 rgba(0, 0, 0, 0.3);
            }
            .tws-info-4>div>div {
                width: 4.4rem;
                height: 4.4rem;
                background-image: url(../img/info004/twsshortbtn.svg);
                background-size: contain;
                background-repeat: no-repeat;
                transform: rotate(35deg);
                transition: all 0.2s;
            }
        .floatLeft {
            float: left;
            width: 8.6rem;
        }
        .tws-info-5 {
            width: 8.4rem;
            height: 2.8rem;
            background-image: url(../img/info005/twsInfo5.svg);
            background-size: contain;
            background-repeat: no-repeat;
        }
        .tws-info-5:hover {
            cursor: pointer;
        }
            .tws-info-5>div {
                position: absolute;
                top: 0.4rem;
                right: 0.8rem;
                width: 1.1rem;
                height: 2rem;
                margin-left: 0.7rem;
                border: 0.1rem solid #000000;
                border-radius: 0.5rem;
                box-shadow: inset 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.5);
                transition: all 0.5s;
            }
            .tws-info-5>div>div {
                width: 0.9rem;
                height: 0.9rem;
                border-radius: 50%;
                background: var(--pangbtn);
                transition: all 0.2s;
            }
    .tws-info-6 {
        width: 8.4rem;
        height: 4.5rem;
        padding: 1.8rem 0 0 0;
        background-image: url(../img/info006/twsInfo6.svg);
        background-size: contain;
        background-repeat: no-repeat;
    }
        #gspd {
            width: 100%;
            text-align: left;
            font-size: 1.8rem;
            padding: 0 0.7rem;
        }
    .tws-info-7 {
        width: 7.3rem;
        height: 4.5rem;
        background-image: url(../img/info007/twsInfo7.svg);
        background-size: contain;
        background-repeat: no-repeat;
    }
        .tws-info-7>h1 {
            width: 100%;
            text-align: left;
            padding: 0.3rem 0.7rem;
            margin: 0.2rem;
            background: none !important;
        }
        #spd {
            width: 100%;
            text-align: right;
            font-size: 1.8rem;
            padding: 0 0.7rem;
        }
    .tws-info-8 {
        width: 7.3rem;
        height: 4.5rem;
        background-image: url(../img/info008/twsInfo8.svg);
        background-size: contain;
        background-repeat: no-repeat;
    }
        .tws-info-8>h1 {
            width: 100%;
            text-align: left;
            padding: 0.3rem 0.7rem;
            margin: 0.2rem;
            background: none !important;
        }
        #acc {
            width: 100%;
            text-align: right;
            font-size: 1.8rem;
            padding: 0 0.7rem;
        }
    .tws-info-9 {
        width: 7.3rem;
        height: 4.5rem;
        background-image: url(../img/info009/twsInfo9.svg);
        background-size: contain;
        background-repeat: no-repeat;
    }
        .tws-info-9>h1 {
            display: inline-block;
            width: 100%;
            height: 1.1rem;
            text-align: left;
            padding: 0.3rem 0.7rem;
            margin: 0.2rem;
            background: none !important;
        }
        .tws-info-9>p:nth-child(2) {
            width: 100%;
            text-align: left;
            padding: 0 0.7rem;
            background: none !important;
        }
        #allcnt {
            width: 100%;
            text-align: right;
            font-size: 1.8rem;
            padding: 0 0.7rem;
        }
    .tws-info-10 {
        display: flex !important;
        width: 22.3rem;
        height: 2.8rem;
        align-items: center;
    }
        .tws-info-10:hover {
            cursor: pointer;
        }
        .tws-info-10>div {
            width: 100%;
            height: 100%;
            font-size: 1.1rem;
            padding: 0.5rem 0;
            border-radius: 0.3rem;
            background: var(--boxbg);
            z-index: 1;
        }
        .tws-info-10>div>p {
            width: 100%;
            height: 0%;
            overflow: hidden;
        }
        #ssInfo2 {
            display: block !important;
            height: 100%;
            line-height: 1.8;
        }
        .ssInfo {
            border-radius: 0.3rem;
            box-shadow: 0 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5);
        }
    .tws-info-btn {
        display: none;
    }
    .tws-typing-area {
        position: relative;
        height: 22.8rem;
        padding: 4.3rem 4.5rem 0 4.5rem;
        margin: 0;
        border: none;
        border-radius: 0.3rem;
        box-shadow: none;
    }
        #sing {
            display: none;
            font-family: inherit;
            font-size: 1.5rem;
            padding: 0;
            margin: 0 0 0.1rem 0;
        }
        #opt {
            height: 4.8rem;
            font-family: inherit;
            font-size: 1.5rem;
            line-height: normal;
            padding: 0;
        }
        #ipt {
            height: 20px;
            font-family: inherit;
            font-size: 1.5rem;
            line-height: normal;
            padding: 0;
            margin: 0.5rem 0 0 0;
            border: none;
        }
        .tws-goal-bar {
            margin: 0 0 2rem 0;
        }
            #goalSpdBar {
                transition: all 0.5s;
            }
        .tws-next-typing {
            display: block;
            position: relative;
            width: 100%;
        }
        .tws-next-typing>span {
            font-size: 1.3rem;
            font-weight: bold;
            color: var(--npt);
        }
        #npt {
            position: absolute;
            top: 0;
            left: 4rem;
            font-size: 1.3rem;
            color: var(--npt);
            padding: 0;
        }
        #search {
            position: absolute;
            top: 9.4rem;
            left: 0;
            width: 100%;
            padding: 0 4.5rem;
        }
        #gslbl {
            font-size: 1.5rem;
        }
        #gsipt {
            width: 37rem;
            height: 2.2rem;
            font-family: inherit;
            font-size: 1.5rem;
            line-height: normal;
            padding: 0;
            border: none;
            color: var(--input);
            background: none;
            outline: none;
        }
        #betaVer {
            position: absolute;
            bottom: -0.2rem;
            right: -0.2rem;
            width: 4.9rem;
            height: 4.9rem;
            background-image: url(../img/beta.svg);
            background-size: contain;
            background-repeat: no-repeat;
        }
    .tws-help {
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(20, 20, 20, 0.7);
        opacity: 0;
        z-index: -1;
    }
        .tws-help-main {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 58.1rem;
            height: 58rem;
        }
        #helpClose {
            position: absolute;
            right: 0;
            top: 60px;
            width: 3.2rem;
            height: 3.2rem;
            background: url(../img/help/twsHelpClose.svg);
            background-size: contain;
            background-repeat: no-repeat;
        }
        #helpImg {
            position: absolute;
            top: 0rem;
            left: 0rem;
            width: 100%;
            height: 100%;
        }
        #prevPage {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 12rem;
            height: 3.2rem;
            background: url(../img/help/twsHelpPrev.svg);
            background-size: contain;
            background-repeat: no-repeat;
        }
        #nextPage {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 9rem;
            height: 3.2rem;
            background: url(../img/help/twsHelpNext.svg);
            background-size: contain;
            background-repeat: no-repeat;
        }
    #tws-result {
        position: absolute;
        width: 320px;
        height: 493px;
        border-radius: 0.3rem;
        opacity: 0;
    }
        .tws-result-on {
            width: 320px;
            height: 493px;
            opacity: 1 !important;
        }
        .tws-result-off {
            opacity: 0 !important;
        }
    .tws-request-btnbox {
        display: block;
        position: absolute;
        right: 6rem;
        bottom: 4rem;
    }
        #reqbtn {
            width: 5.1rem;
            height: 5.2rem;
            background-image: url(../img/request/req-btn.svg);
            background-repeat: no-repeat;
        }
        #reqbtn:hover {
            background-image: url(../img/request/req-btn-hover.svg);
        }
        #reqbtn:active {
            background-image: url(../img/request/req-btn-click.svg);
        }
    .tws-request-box {
        display: none;
        position: absolute;
        right: 6rem;
        bottom: 4rem;
        width: 31rem;
        height: 54.6rem;
        border-radius: 0.5rem;
        box-shadow: 2px 3px 7px 0 rgba(0, 0, 0, 0.3);
        background-color: var(--reqbox);
    }
        .tws-request-header {
            width: 100%;
            height: 13.2rem;
            padding: 0 2rem;
        }
        .tws-request-logobox {
            position: relative;
            width: 100%;
            padding: 1.9rem 0;
        }
            #reqLogo {
                display: inline-block;
                width: 3.1rem;
                height: 2.6rem;
                background-image: url(../img/request/req-logo.svg);
                background-size: contain;
                background-repeat: no-repeat;
            }
            #reqExit {
                position: absolute;
                right: 0;
                top: 1.9rem;
                width: 2rem;
                height: 1.8rem;
                background-image: url(../img/request/req-exit.svg);
                background-size: contain;
                background-repeat: no-repeat;
            }
            .tws-request-header>h1 {
                font-size: 2.5rem;
                padding: 0 0.4rem;
                color: var(--reqfont);
            }
        .tws-request-main {
            width: 100%;
            padding: 0 2.3rem;
        }
            .tws-request-main>label {
                color: var(--reqfont);
            }
            .tws-request-main>input {
                width: 100%;
                height: 2.4rem;
                border: none;
                border-radius: 0.3rem;
                font-size: 1.2rem;
                color: var(--reqtext);
                outline: none;
                padding: 0 1rem;
                margin: 0.5rem 0 0.8rem 0;
                background-color: var(--reqipt);
            }
            .tws-request-main>input::placeholder {
                text-indent: -0.5rem;
                font-size: 1rem;
                color: var(--reqph);
            }
            .tws-request-main>select {
                width: 100%;
                height: 2.4rem;
                border: none;
                border-radius: 0.3rem;
                font-size: 1rem;
                color: var(--reqph);
                outline: none;
                padding: 0 1rem;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-color: var(--reqipt);
                background-image: url(../img/request/req-select-arrow.svg);
                background-repeat: no-repeat;
                background-position: 97%;
                margin: 0.5rem 0 0.8rem 0;
            }
            .tws-request-main>textarea {
                width: 100%;
                height: 6.8rem;
                border: none;
                border-radius: 0.3rem;
                font-size: 1.2rem;
                color: var(--reqtext);
                outline: none;
                resize: none;
                padding: 0.5rem;
                margin: 0.5rem 0 0.8rem 0;
                background-color: var(--reqipt);
            }
            .tws-request-main>textarea::placeholder {
                font-size: 1rem;
                color: var(--reqph);
            }
        .tws-request-footer {
            position: relative;
            width: 100%;
            padding: 0 0 0 2.3rem;
        }
            #captxtlbl {
                color: var(--reqfont);
            }
            #captcha>canvas {
                background-color: var(--reqcvs);
                border-radius: 0.3rem;
                margin: 0.5rem 0 2.3rem 0;
            }
            #ref {
                position: absolute;
                top: 2rem;
                left: 14.1rem;
                width: 1.8rem;
                height: 5rem;
                border: none;
                outline: none;
                background: none;
                background-image: url(../img/request/req-refresh.svg);
            }
            #captxt {
                position: absolute;
                top: 4.55rem;
                right: 2.3rem;
                width: 12rem;
                height: 2.4rem;
                color: var(--reqtext);
                border: none;
                border-radius: 0.3rem;
                outline: none;
                background-color: var(--reqipt);
            }
            #captxt::placeholder {
                font-size: 1rem;
                color: #c2c3c2;
            }
            #reqSub {
                width: 100%;
                height: 4.5rem;
                border: none;
                border-radius: 0.3rem;
                outline: none;
                background: none;
                background-image: url(../img/request/req-submit.svg);
                background-repeat: no-repeat;
            }
}
@media (min-width: 601px) and (prefers-color-scheme: dark) {
	/* tablet && pc */
	.tws-logo-box>h1 {
		background-image: url(../img/twsLogo-dark.svg);
    }
    #helpBtn {
        background-image: url(../img/help/twsHelpBtn-dark.svg);
    }
    .tws-info-1 {
        background-image: url(../img/info001/twsInfo1-dark.svg);
    }
    .tws-info-1>div>div {
        background-image: url(../img/info001/twslangbtn-dark.svg);
    }
    .tws-info-4 {
        background-image: url(../img/info004/twsInfo4-dark.svg);
    }
    .tws-info-4>div>div {
        background-image: url(../img/info004/twsshortbtn-dark.svg);
    }
    .tws-info-5 {
        background-image: url(../img/info005/twsInfo5-dark.svg);
    }
    .tws-info-6 {
        background-image: url(../img/info006/twsInfo6-dark.svg);
    }
    .tws-info-7 {
        background-image: url(../img/info007/twsInfo7-dark.svg);
    }
    .tws-info-8 {
        background-image: url(../img/info008/twsInfo8-dark.svg);
    }
    .tws-info-9 {
        background-image: url(../img/info009/twsInfo9-dark.svg);
    }
    #betaVer {
        background-image: url(../img/beta-dark.svg);
    }
    #reqLogo {
        background-image: url(../img/request/req-logo-dark.svg);
    }
    #reqExit {
        background-image: url(../img/request/req-exit-dark.svg);
    }
    #captcha>#ref {
        background-image: url(../img/request/req-refresh-dark.svg);
    }
    #reqbtn {
        background-image: url(../img/request/req-btn-dark.svg);
    }
    #reqbtn:hover {
        background-image: url(../img/request/req-btn-hover-dark.svg);
    }
    #reqbtn:active {
        background-image: url(../img/request/req-btn-click-dark.svg);
    }
}