.swal2-popup {
    font-size: 100% !important;
}

.sub-04-1-wrap{
    position: relative;
    width: 1140px;
    height: 1320px;
    margin:0 auto;
    background: url('../images/games/sub-04-01-bg.png') center no-repeat;
    background-size: contain;
    font-family: 'YanoljaYacheR';
    padding: 20px 0;
}

.sub-04-1-con{
    position: absolute;
    top:30%;
    left:50%;
    transform: translate(-50%,-30%);
    width: 900px;
}
.note-list {
    display: flex;
    justify-content: center;
}

.note-list li{
    position: relative;
    float: left;
    background: url('../images/games/note-img.png') center no-repeat;
    width: 20%;
    height: 330px;
    background-size: cover;


}

.note-list::after{
    display: block;
    content: "";
    clear: both;
}

.note-list li > span{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size: 150px;
}

.answer{
    display: block;
    width: 90%;
    height: 80px;
    padding: 30px;
    border: 1px solid #8f8e7e;
    border-radius: 50px;
    box-sizing: border-box;
    font-family: 'YanoljaYacheR';
    font-size: 50px;
    color: #333;
    text-align: center;
    margin: 30px auto;
}

.hint-wrap{
    margin-top: 50px;
}

.hint-wrap > h2{
    font-size: 50px;
    margin: 0 auto 50px auto;
    color:#cc522c;
    text-align: center;
    text-shadow: -3px 0 #ffffff, 0 3px #ffffff, 3px 0 #ffffff, 0 -3px #ffffff;
}

.hint-wrap p {
    display: inline;
    width: auto;
    height: 70px;
    padding: 15px 25px;
    border-radius: 50px;
    background: #2f3238;
    color: #ffffff;
    font-size: 25px;
    line-height: 25px;
}

.hint-wrap > ul {
    display: block;
    display: table;
    margin: 0 auto;
}
.hint-wrap > ul > li{
    width: 200px;
    height: 70px;
    padding: 0 20px;
    border-radius: 50px;
    background: #2f3238;
    float: left;
}

.hint-wrap > ul > li:nth-child(2){
    margin:0 20px;
}

.hint-wrap > ul > li > span{
    display: block;
    color: #fff;
    font-size: 50px;
    text-align: center;
    line-height: 70px;
}

.hint-wrap > ul::after{
    display: block;
    content: "";
    clear: both;
}

.scroe-wrap{
    position: relative;
    border: 10px solid #cc522c;
    background: #fff;
    width: 80%;
    height: 150px;
    border-radius: 100px;
    margin: 80px auto 0 auto;
}

.scroe-wrap > .tit {
    background: url(../images/games/score-tit.png) center no-repeat;
    width: 370px;
    height: 97px;
    background-size: contain;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
}

.scroe-wrap > .tit > p{
    font-size: 50px;
    color: #fff;
    text-align: center;
    margin-top: 20px;
}


.scroe-wrap > p{
    font-size: 80px;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
}

.stages {
    position: absolute;
    display: block;
    top: 30px;
    right: 85px;
    width: 250px;
    height: 80px;
    border: 8px solid #CC522C;
    border-radius: 60px;
    background: #ffffff;
    padding-right: 30px;
}

.stages span {
    font-size: 70px;
    line-height: 80px;
    color: #CC522C;
    font-weight: 800;
}

.stages span.current {
    color: #FF5175;
}

.timer {
    position: absolute;
    display: block;
    top: 30px;
    right: 70px;
    width: 80px;
    height: 80px;
    border: 8px solid #CC522C;
    border-radius: 100%;
    background: #ffffff;
}

.timer .seconds {
    font-size: 80px;
    line-height: 80px;
    color: #CC522C;
    font-weight: 800;
}

.commands {
    position: absolute;
    width: 600px;
    left: 50%;
    margin-left: -300px;
    bottom: 200px;
}

.commands button {
    width: 290px;
    height: 90px;
    margin-right: 20px;
    border: 8px solid #CC522C;
    border-radius: 60px;
    background: #ffffff;
    cursor: pointer;
    font-size: 35px;
    font-weight: 800;
}

.commands button:hover,
.commands button:focus {
    color: #ffffff;
    background: #CC522C;
}

.commands button:last-child {
    margin: 0;
}
.cross-check h1{ 
    font-size: 5rem; 
    font-family: 'YanoljaYacheR';
    margin-bottom: 2rem;
}
.cross-check__timer h1{font-size: 3rem; color: #ed1548;}
.cross-check-stage-image{width: 800px;margin: 3rem auto; text-align: center;}
.cross-check-stage-image img{
    width: 100%;
}
.cross-check-stage .grid{position: relative; margin-bottom: 3rem; }
.cross-check-stage .grid__col {
    text-align: left;
    background: #fafafa;
    border-radius: 1.5rem;
    padding: 5rem;
    width: calc(50% - 11rem);
    float: left;
}
.cross-check-stage .grid__col:first-child{
    margin-right: 2rem;
}
.cross-check-stage .grid__col ul li{margin-bottom: 2rem;border-bottom: 0;}
.cross-check-stage .grid__col ul li p{ display: inline-block;}
.cross-check-stage .grid__col ul li p:first-child{
    font-family: 'YanoljaYacheR';
    font-size: 2.5rem;width: 4rem;
}
.cross-check-stage .grid__col input[type=text]{
    width: 100%;
    height: 5rem;
    border: 1px solid #dbdbdb;
    border-radius: .5rem;
    display: block;
    margin-top: 1rem;
}
.cross-check-stage .grid::after{
    display: block;
    content: '';
    clear: both;
}
.cross-check__commands button{
    padding: 1rem 4rem;
    border-radius: 10rem;
    font-family: 'YanoljaYacheR';
    font-size: 3.5rem;
    color: #fff;
    border: none;
}

.cross-check__commands button:first-child{background: #77d4ff;margin-right: 2rem;}
.cross-check__commands button:last-child{background: #fbc534;}


@media screen and (max-width:1024px) {
    .sub-04-1-wrap{
        background: url('../images/games/sub-04-01-bg-1024.png') center no-repeat;
        width: 100%;
        height: 1000px;
        background-size: cover;
    }

    .note-list li{
        height: 300px;
    }

    .sub-04-1-con{
        width: 100%;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        height: auto;

    }

    .stages {
        top: -20px;
        right: -15px;
        width: 200px;
        height: 60px
    }

    .stages span {
        font-size: 50px;
        line-height: 60px;
    }

    .timer {
        top: -20px;
        right: -25px;
        width: 60px;
        height: 60px;
    }

    .timer .seconds {
        font-size: 60px;
        line-height: 60px;
    }

    .hint-wrap{
        margin:80px auto;
    }

    .note-list {

    }

    .answer{
        font-size: 30px;
    }

    .commands {
        bottom: 0px;
    }

}/*E:1024px*/



@media screen and (max-width:640px) {
    .sub-04-1-wrap{
        background: url('../images/games/sub-04-01-bg-640.png') center no-repeat;
        width: 100%;
        height: 800px;
        background-size: cover;
    }

    .note-list li{
        height: 140px;
    }

    .note-list li > span{
        font-size: 100px;
    }

    .sub-04-1-con{
        width: 100%;
    }

    .hint-wrap{
        margin: 30px auto; 
    }

    .hint-wrap h2 {
        margin-bottom: 20px;
    }

    .hint-wrap p {
        display: block;
        width: 80%;
        padding: 10px 15px;
        margin: 10px auto;
        font-size: 16px;
        height: auto;
    }

    .hint-wrap > ul {
        display: table;
        margin:0 auto;
    }

    .hint-wrap > ul > li {
        width: 250px;
        height: 60px;
        float: none;
        box-sizing: border-box;
    }

    .hint-wrap > ul > li > span{
        line-height: 60px;
    }

    
    .hint-wrap > ul > li:nth-child(2) {
        margin: 10px 0px;
    }

    .hint-wrap > ul > li > span{
        font-size: 30px;
    }

    
    .stages {
        top: -20px;
        right: 0px;
        width: 100px;
        height: 40px
    }

    .stages span {
        font-size: 30px;
        line-height: 40px;
    }

    .timer {
        top: -20px;
        right: -10px;
        width: 40px;
        height: 40px;
    }

    .timer .seconds {
        font-size: 40px;
        line-height: 40px;
    }

    .scroe-wrap{
        height: 140px;
    }

    .scroe-wrap > .tit{
        width: 300px;
    }

    .scroe-wrap > .tit > p {
        font-size: 40px;
        margin-top: 25px;
    }

    .commands {
        width: 300px;
        margin-left: -150px;
        bottom: 15px;
    }

    .commands button {
        width: 140px;
        height: 50px;
        margin-right: 10px;
        border: 8px solid #CC522C;
        border-radius: 60px;
        background: #ffffff;
        cursor: pointer;
        font-size: 18px;
        font-weight: 800;
    }
    .cross-check h1 {
        font-size: 4rem; word-break: keep-all; line-height: 4.5rem;}
    .cross-check__timer h1{
        font-size: 2.5rem;
        margin: 2rem 0;
        position: fixed;
        top: 2rem;
        background: #fff;
        display: block;
        width: 90%;
        z-index: 9999;
    }
    .cross-check-stage-image{width: 100%;}
    
    .cross-check-stage .grid{margin-bottom: 2rem;}
    .cross-check-stage .grid__col {
        padding: 2.5rem;
        width: auto;
        float: none;
    }
    .cross-check-stage .grid__col:first-child{
        margin-right: 0;
        margin-bottom: 2rem;
    }
    
    .cross-check-stage .grid__col ul li{margin-bottom: 1.2rem;}
    .cross-check-stage .grid__col ul li p{ display: inline-block;}
    .cross-check-stage .grid__col ul li p:first-child{
        font-size: 2rem;
    }
    .cross-check-stage .grid__col input[type=text]{
        height: 3.6rem;
    }
    .cross-check__commands button{
        font-size: 2.5rem;
    }

    .cross-check__commands button:first-child{background: #77d4ff;margin-right: 0;margin-bottom: 2rem;}
    

}/*E:640px*/