@charset "utf-8";
/* responsive stylesheet */

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

@media screen and (max-width: 1244px) {
.inner {width: 90%; margin: 0 5%;}
section.index::before {opacity: 0.3;}
}

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

@media screen and (max-width: 1044px) {
section.index .intro h2 {color: var(--liquorice);}
section.home article h1 {font-size: 22px; line-height: 28px;}
section.home article h1 span {font-size: 36px; line-height: 40px;}
section.home article .progress {width: 100%; padding: 50px 0;}
section.home article .progress .enter .icon {width: 100px;}
section.home article .progress .enter .icon .icon-circle {width: 100px; height: 100px;}
section.home article .progress .enter .icon .icon-circle img {max-height: 60px;}
section.home article .progress .enter .content {float: left; width: calc(100% - 129px);}
section.home article .progress .enter .content h3 {font-size: 12px; line-height: 18px;}
section.home article .progress .enter .content h2 {font-size: 24px; line-height: 30px;}
section.home article .progress .enter.locked .icon .icon-circle {width: 70px; height: 70px;}
section.home article .progress .enter.locked .icon .icon-circle img {max-height: 40px;}
section.home aside {width: calc(40% - 100px);}
.popup .popup-inner .question-content article {width: calc(100% - 300px); margin-right: 50px;}
.popup .popup-inner .question-content aside {width: 250px;}
.popup .popup-inner .anagram-content article {width: calc(100% - 50px);}
.popup .popup-inner .anagram-content aside {display: none;}
}

@media screen and (max-width: 944px) {
.col2 {width: 100%;}
.col3 {float: left; width: 100%;}
.col3-span2 {float: left; width: 100%;}
.col4 {float: left; width: 25%;}
.col4-span3 {float: left; width: 75%;}
.col5 {float: left; width: 50%;}
.col5-span2 {float: left; width: 100%;}
.col5-span3 {float: left; width: 100%;}
.col5-span4 {float: left; width: 100%;}
.col6 {float: left; width: 50%;}
.popup .popup-inner .combination-content article .new-submissions .drop-slot img {width: 100%;}
section.scene .background-image {width: 1500px; top: 120px;}
}

@media screen and (max-width: 844px) {
section.home article {width: 100%;}
section.home aside {width: calc(100% - 50px);}
aside.progress {bottom: 12px; left: 0px; transform: none; width: 485px; height: 40px; padding: 0;}
aside.progress .time {width: 160px; height: 40px; padding: 0 10px;}
aside.progress .time div {height: 42px;}
aside.progress .time p {font-size: 12px; line-height: 18px;}
aside.progress .time p span {font-size: 18px; line-height: 22px;}
aside.progress .questions {width: calc(100% - 330px); height: 40px; padding: 0 10px;}
aside.progress .questions .q-text {display: none;}
aside.progress .questions div {height: 40px;}
aside.progress .questions div .circle {width: 26px; height: 26px; margin: 0 2.5px;}
aside.progress .questions div .circle.checked i {font-size: 16px;}
}

@media screen and (max-width: 744px) {
.col3 {float: left; width: 100%;}
.col3-span2 {float: left; width: 100%;}
.col4 {float: left; width: 100%;}
.col4-span3 {float: left; width: 100%;}
.col5 {float: left; width: 100%;}
.col5-span2 {float: left; width: 100%;}
.col5-span3 {float: left; width: 100%;}
.col5-span4 {float: left; width: 100%;}
.col6 {float: left; width: 100%;}
section.index .intro h1 {font-size: 45px; line-height: 50px;}
section.index .intro h2 {font-size: 45px; line-height: 50px;}
section.index .intro p {font-size: 20px; line-height: 28px;}
section.index .intro p .desktop-break {display: none;}
section.index article form.register .form-flex .item {width: 100%;}
.title h1 {font-size: 28px; line-height: 36px;}
.popup .popup-inner .question-content {display: block;}
.popup .popup-inner .question-content article {width: 100%; margin-right: 0px;}
.popup .popup-inner .question-content aside {float: left; margin-top: 50px; width: 350px; max-width: 100%;}
.popup .popup-inner .combination-content article .previous {float: left;}
.popup .popup-inner .combination-content article .new-submissions {float: left; width: 100%; margin-left: 0px; margin-bottom: 25px;}
}

@media screen and (max-width: 644px) {
header a.btn i {display: block;}
header a.btn {padding: 10px 15px; margin-top: 15px;}
header a.btn span {display: none;}
body.week header a.btn {padding: 10px 15px; margin-top: 7px;}
.title {top: 63px;}
}

@media screen and (max-width: 544px) {
section.index article {padding: 25px; width: calc(100% - 50px); max-width: 850px;}
footer article ul li {float: left; display: block; width: 100%; padding: 0 0 10px 0;}
.popup .popup-inner .anagram-content article .anagram-jumbled {font-size: 30px; letter-spacing: 5px;}
}

@media screen and (max-width: 444px) {
section.home article .progress .enter .icon {display: none;}
section.home article .progress .enter .content {width: 100%;}
.title h1 {font-size: 18px; line-height: 24px;}
aside.progress {width: 180px; height: 80px;}
aside.progress .time {display: block;}
aside.progress .questions {width: 160px;display: block;}
.popup .popup-inner .combination-content article .new-submissions .token,
.popup .popup-inner .combination-content article .new-submissions .drop-slot {width: 40px; height: 40px;}
.popup .popup-inner .combination-content article .new-submissions .drop-slot {border: 2px dashed #787c7f; width: 52px; height: 52px;}
.popup .popup-inner .combination-content article .new-submissions .token img, 
.popup .popup-inner .combination-content article .new-submissions .drop-slot img {width: 40px;}
}