html, body {font-family: 'Noto Sans KR', sans-serif; height: 100%; background: #fff; }
html {overflow-x: hidden; overflow-y: scroll}
body {transition: all 0.3s; padding-bottom:50px;}
body.app {padding-top:50px;}
button:focus{outline: 0;}

/* common */
.rect {position: relative;}
.rect::before {content: ""; display:block; padding-top:100%;}
.rect > * {position: absolute; width: 100%; height: 100%; left:0; top:0;}

.center-block{display:block; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);}
.loading2{height:100%; width:100%; background: url(../img/loading2.svg) no-repeat top center/contain;}

/* 버튼 */
.kwb_btn {font-size:1rem; text-align: center; display: inline-block; padding:10px 10px; line-height: 1rem; border-radius: 40px;
    border: 5px solid #e9ecef; transition: all 0.2s; }
.kwb_btn.disable {border: 5px solid #e9ecef; color:#ced4da; background:#f8f9fa; }
/*open color blue : basic:3,6,0 -- hover:3,0,5 -- active:3,0,3 */
.kwb_btn.blue {border-color:#74c0fc; color:#228be6; background:#e7f5ff;}
.kwb_btn.blue:hover {border-color:#74c0fc; color:#e7f5ff; background:#339af0;}
.kwb_btn.blue:active {border-color:#74c0fc; color:#e7f5ff; background:#74c0fc;}
/*open color orange: basic:3,6,0 -- hover:3,0,5 -- active:3,0,3 */
.kwb_btn.orange {border-color:#ffc078; color:#fd7e14; background:#fff4e6;}
.kwb_btn.orange:hover {border-color:#ffc078; color:#fff4e6; background:#ff922b;}
.kwb_btn.orange:active {border-color:#ffc078; color:#fff4e6; background:#ffc078;}
/*open color green : basic:3,6,0 -- hover:3,0,5 -- active:3,0,3 */
.kwb_btn.green {border-color:#8ce99a; color:#40c057; background:#ebfbee;}
.kwb_btn.green:hover {border-color:#8ce99a; color:#ebfbee; background:#51cf66;}
.kwb_btn.green:active {border-color:#8ce99a; color:#ebfbee; background:#8ce99a;}
/*open color violet : basic:3,6,0 -- hover:3,0,5 -- active:3,0,3 */
.kwb_btn.violet {border-color:#b197fc; color:#7950f2; background:#f3f0ff;}
.kwb_btn.violet:hover {border-color:#b197fc; color:#f3f0ff; background:#845ef7;}
.kwb_btn.violet:active {border-color:#b197fc; color:#f3f0ff; background:#b197fc;}
/*open color pink : basic:3,6,0 -- hover:3,0,5 -- active:3,0,3 */
.kwb_btn.pink {border-color:#faa2c1; color:#e64980; background:#fff0f6;}
.kwb_btn.pink:hover {border-color:#faa2c1; color:#fff0f6; background:#f06595;}
.kwb_btn.pink:active {border-color:#faa2c1; color:#fff0f6; background:#faa2c1;}

.intro_top ,
.intro_bottom {position: fixed; width: 100%; height: 50px; line-height: 50px; background:#f1f3f5; text-align: center; }
.intro_top a {font-size: 1.25rem; color:#495057; font-weight: 500;}
.intro_bottom {bottom:0;}

.intro {height: 100%; max-width: 400px; text-align: center;  margin: 0 auto;}
.intro .row {display: table; vertical-align: middle; width: 100%; height: 100%; padding:60px 0; }
.intro .cell {display: table-cell; vertical-align: middle; height: 100%; padding: 16px;}
.intro img {width: 90%;}
.intro .cmd {margin-top:20px;}
.intro .cmd > a {width: 120px;}
.intro .cmd > a+a {margin-left: 10px}

/* 헤더 */
.header {position: fixed; width: 100%; top:0px; left:0; transform: translateY(-120%); transition: all 0.3s; z-index: 20; }
.header .timer {position: absolute; display: block; top: 0px; right: 10px; padding-left:28px; transform: matrix(1, 0, 0, 1, 200, 0);}
.header .timer .clock{content: ""; display: block; width: 26px; height:26px; background: url(../img/clock.svg) no-repeat center/contain; position: absolute; left:0px; top:12px;}
.header .timer .text {font-size: 1.1em; color:#868e96; letter-spacing: -1px;}
.header .wrap {overflow: hidden; height: 50px;}
.header .wrap > div {position: relative; letter-spacing: -1px;}
.headerView .header {transform: translateY(0%);}
.header { height: 50px; line-height: 50px; font-size: 1.15em; font-weight: 500; text-align: center; color:#555; background:#f1f3f5; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }
.header::after{content: ""; height: 3px; display: block; background:linear-gradient(to right, rgb(99, 230, 190), rgb(66, 99, 235)); }
.page .contents { padding: 1em 1em 66px; }
.header .timer {cursor: pointer; }
.header .timer.pause {animation: flash 1s infinite}
@keyframes flash {
    0%  { opacity: 1;}
    50% { opacity: 0;}
    100% {opacity: 1;}
}
.header .timer.resume .clock {animation: clock 12s linear infinite;}
@keyframes clock {
    0% {transform:rotate(0deg)}
    100% {transform:rotate(354deg)}
}




#footer {position: fixed; width: 100%; bottom:0px; left:0; transition: all 0.3s; z-index: 10; height: 50px; background:#f1f3f5; font-family: inherit;  box-shadow: 0 -1px 3px rgba(0,0,0,0.12), 0 -1px 2px rgba(0,0,0,0.24);}
#footer .bg {background:#f1f3f5;height: 50px; position: relative; z-index: 8;}
#footer .wrap {position: relative; max-width: 600px; margin: 0 auto; height: 50px; line-height: 50px; font-size: 0.92em;text-align: center; color:#555; }
#footer .wrap > div {position: absolute; top:0; left:0; height: 50px; width: 100%; display: flex; justify-content: space-around; align-items: center; opacity: 0;} 

#footer .dockbar > div{
    position: relative; box-shadow: 0 0px 6px rgba(0,0,0,0.16), 0 0px 6px rgba(0,0,0,0.23);
    width: 32px; height: 32px; border: 2px solid #4c6ef5; cursor: pointer; border-radius: 50%;
    background: #fff url(../img/arrow.svg) no-repeat center 7px/18px; transition: all 0.3s;
}

#footer div[class^="complete"] {background: #fff url(../img/checked.svg) no-repeat center/18px;}
#footer div[class^="complete"].disabled {
    background: #fff url(../img/check-disabled.svg) no-repeat center/18px;
    border-color: #e9ecef; cursor: default;}

#footer .dockbar .home {background: #fff url(../img/home.svg) no-repeat center/22px;}

#footer .dockbar > div:focus {outline: 0;}
#footer .dockbar > div:active {background-color: #91a7ff;}

#footer div[class^="progress-info"].show {transform: rotate(180deg);}
#footer div[class^="swiper-button-prev"] {transform: rotate(-90deg);}
#footer div[class^="swiper-button-next"] {transform: rotate(90deg);}

.left-hand #footer div[class^="swiper-button-prev"] {order:1}
.left-hand #footer div[class^="progress-info"] {order:2}
.left-hand #footer div[class^="swiper-button-next"]{order:3}
.left-hand #footer .home {order:4}
.left-hand #footer div[class^="complete"] {order: 5;}
#footer .info-msg{ display: none; position: absolute;  top:-102px; left: -10px; border:5px solid #fd7e14; border-radius: 10px; height: 80px; width: 170px;  background: #fff; font-size: 1.15em; line-height: 2em; padding:10px;}
.left-hand #footer .info-msg {left:auto; right:-10px;}	


/*정보*/
#info {position: fixed; z-index: 3; height: calc(100% - 100px); width: 100%; left:0px; top:50px; background: rgba(0,0,0, 0.6); padding:30px; overflow: auto; display: none; z-index: 8; font-size: 1rem;  }
#info .info {max-width: 500px;  margin: 0 auto; display: table; vertical-align: middle;}
#info .container {display: table-cell; background: #fff; text-align: center;}
#info .info .title { position: relative; margin: 10px 10px 0; font-weight: 500; height: 30px; line-height: 30px; font-size: 0.875em; }
#info .info .title .note {position: absolute; left:14px; bottom:-20px;}
#info .info .title .note::before,
#info .info .title .note::after {content:""; display:inline-block; height: 16px; line-height: 16px; font-size: 0.65em; padding:0px 9px; font-weight:300;}
#info .info .title .note::after {content: "오답";}
#info .info .title .note::before {content: "정답"; }

#info .info .src {max-width: 500px; margin: 20px auto;}
#info .info .board {display: flex; flex-wrap: wrap; padding:16px 20px 20px; }
#info .info .item {width: calc(100% / 6); display: flex; flex-direction: column; padding:3px 0; margin-right: -1px; }
#info .info .title .note::after, #info .info .item.wrong > div {background: #ffc9c9 !important; } /*오답 컬러*/
#info .info .title .note::before , #info .info .item.good > div {background: #d0ebff !important;} /* 정답 컬러*/
#info .info .title .title_score {position: absolute; right: 14px; bottom:-20px; color:#748ffc; font-weight: 300; font-size: 0.9em; cursor: pointer;}
#info .info .title .title_score b {font-weight: 500; color: #4c6ef5; font-size: 1.1em;}
#info .info .title .closeBtn {border:0; background: 0; height: 28px; width: 28px; position: absolute; right: -8px; top: -8px; background: url(../img/close.svg) no-repeat center/contain }
#info .info .item:nth-child(6n+1) {margin-left:3px;}
#info .info .item > div {height: 20px; width: 100%; border: 1px solid #f3d9fa; white-space: nowrap; font-size: 0.75em; line-height: 16px; }
#info .info .item > div+div {border-top:0;}
#info .info .item .put {background: #e9ecef;}
#info .print {width: 100%; font-size: 0.75em; margin-top:10px;}

/*점수 확인*/
#info .summary {opacity: 0; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); width: 280px; height: 270px; padding:95px 0 20px; 
background: #fff url(../img/flower.png) no-repeat center 24px; text-align: center; border-radius: 10px; box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); }
#info .summary .total_score {font-size: 3em; font-weight: 500; color:#f03e3e; line-height: 1em; }
#info .summary .msg { opacity: 0; font-size: 0.875em; color:#495057;  margin:20px 0;}
#info .summary .kwb_btn {opacity: 0; width: 80px;}

/* 메뉴 */
#menu {position: fixed; top:0; left:0; height: 100%; width: 260px; background: #f8f9fa; z-index: 50; 
    transition: all 0.3s; transform: translateX( calc(-100% - 20px)); opacity: 0; visibility: hidden;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); font-size: 1rem; font-family: inherit; }
#menu nav {overflow-y: auto; height:calc(100% - 50px);}
#menu nav .fa {color: #868e96; margin-right:8px;}
.showmenu #menu {transform: translateX(0%);}
#menuBtn { position: absolute; right: -60px; top:9px; width: 32px; padding:9px 6px; -webkit-transition: all 1s; transition: all 1s;  cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
border:2px solid #4c6ef5; background: #fff; border-radius: 50%;}
#menuBtn span {display: block; background: #4c6ef5; height: 2px; position: relative; -webkit-transition: all 1s; transition: all 1s;}
#menuBtn span + span {margin-top: 2px;}
.showmenu #menuBtn {transform: rotate(45deg); right:10px; border-color:#e03131; }
.showmenu #menuBtn span:nth-child(1) {transform: rotate(-90deg) translate(-4px, 0); background: #e03131}
.showmenu #menuBtn span:nth-child(2) {opacity: 0;}
.showmenu #menuBtn span:nth-child(3) {transform: translate(0, -4px); background: #e03131}

#menu h3 {background: #fff; font-family: inherit;}
#menu h3 > button {display:block; color: #1c7ed6; height: 50px; padding: 0 20px; font-size: 1.1em; line-height: 50px; font-weight:500; border: 0; background: 0;  }
#menu h3 > button >span {font-size: 0.7em; margin-left:4px; color:#868e96}
#menu h3 .name {font-size: 0.65em; font-weight: 300; color:#ced4da}
#menu h3::after{content: ""; height: 3px; display: block; background:linear-gradient(to right, rgb(99, 230, 190), rgb(66, 99, 235));}
#menu .navbtns {display:block; width: 100%; border:0; background: 0; text-align: left; font-weight: 400; color:#495057; text-decoration: none; font-family: inherit; cursor: pointer;
     padding: 10px 20px; font-size: 0.875em;  border-bottom:1px solid #ced4da; transition: all 0.3s;
}
#menu .navbtns ~ .navbtns { border-top:1px solid #e9ecef;}
#menu .navbtns:hover {background: #e7f5ff; text-decoration: underline;}
#menu .navbtns:focus {outline: 0; background: #1c7ed6; color: #fff; }

#userMenu li { border-bottom:1px solid #ced4da; padding-top:10px; cursor: pointer;}
#userMenu li + li {border-top:1px solid #e9ecef; }
#userMenu li .name {font-size: 0.875em; padding: 0 20px 10px 20px; color:#495057; line-height: 1em;}
#userMenu .name a {position: relative; top: 2px; float: right; font-size: 0.8em; color:#1c7ed6; letter-spacing: -1px; }
#userMenu .collect {display: flex; flex-wrap: wrap; padding:0 20px 10px 20px;}
#userMenu .collect button {display: block; width: calc(100% / 3); text-align: center; transition: all 0.3s;
    border:1px solid #868e96; background:#e9ecef; padding:5px; line-height: 1em;}
#userMenu .collect button + button {border-left:0;}
#userMenu .collect button:nth-child(3n+1) {border:1px solid #868e96;}
#userMenu li:hover {background: #e7f5ff;}
#userMenu li:hover .name {text-decoration: underline;}
#userMenu .collect button:hover {background: #a5d8ff; color:#495057;}
#userMenu .collect button:active {background: #1c7ed6; color:#fff;}
#userMenu .collect button:focus {outline: 0;}

.print {font-size: 0.875em; text-align: center; color:#228be6;}

#app {font-size: 1rem; width: 100%; height:100%; transition: all 0.3s; position: relative; z-index:5 }
/*.showmenu #app {transform: translateX(260px)}*/
#app .page {width: 100%; height: 100%; position: absolute; left:0; top:0; display: none; }
#app .page.current-view , #app .page.next-view{display:block}
#app .page.current-view {position: relative;}
#app .page.next-view {opacity:0 ;}

#main-status {display: block; width: 100%; height: 100%; }
#loader .tab,
#main-status .tab {display: table; width: 100%; height: 100%; margin: 0 auto;}
#loader .content,
#main-status .content {display: table-cell; vertical-align: middle; height: 100%; text-align: center;} 
#loader .print,
#main-status .print {display:inline-block; padding-bottom: 20px; border-bottom: 4px solid #ced4da; margin-top: 40px; min-width: 260px;}
/*#main-status.loader .print{color:#fff;}*/
#loader img,
#main-status img {width: 100px; height: auto; display: block; margin: 0 auto;}

#loader {position: fixed; width: 100%; height: 100%; background: rgba(0,0,0, 0.6); z-index: 1000; display: none; left:0; top:0px;}
#loader .print {color:#fff; font-size:1em; }

#search-wrap {margin:1em auto; display: table; width: 100%; text-align: center; max-width: 600px; }
#search-wrap > div {display: table-cell; width: 12.5%;}
#search-wrap .each4 {width: 50%;}
#search-wrap .each2 {width: 25%;}

.chk-group > div {display: flex}
.chk-group input[type="radio"] {display: none;}
.chk-group label {display:block;  flex:1; background:#f1f3f5; border:1px solid #ced4da; color:#343a40; cursor: pointer; height: 40px; line-height: 40px; }
.chk-group label ~ label {border-left:0;}
.chk-group label:first-of-type {border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
.chk-group label:last-of-type {border-top-right-radius: 20px; border-bottom-right-radius: 20px;}
.chk-group input[type="radio"]:checked + label {color: #fff;}
.chk-group input[type="radio"]:checked + .color1 {background: #fcc419; }
.chk-group input[type="radio"]:checked + .color2 {background: #51cf66; }
.chk-group input[type="radio"]:checked + .color3 {background: #339af0; }
.chk-group input[type="radio"]:checked + .color4 {background: #ff6b6b; }
.chk-group input[type="radio"]:checked + .color5 {background: #20c997; }
.chk-group input[type="radio"]:checked + .color6 {background: #845ef7; }

.subject-list {margin: 1em auto; max-width: 600px; }
.subject-list .item {display: block; position: relative;}
.subject-list .item + .item {margin-top: 0.5em;}
.subject-list .item > input {display:none;}
.subject-list .item label {display: block; border:5px solid #e9ecef; padding: 10px 16px 10px 50px; color:#adb5bd; font-size: 1.15em; border-radius: 20px; cursor: pointer;
     background: url(../img/unchecked.svg) no-repeat 10px center/30px  }
.subject-list .item input:checked + label {border-color: #ffe3e3; color: #495057; background-image: url(../img/checked.svg);}

.selected-wrap {margin:1em auto; max-width: 600px;}
.list-selected {margin: 0 -5px; display: flex; flex-wrap: wrap;}
.list-selected li {position: relative; padding:5px; margin: 5px; width: calc(50% - 10px); background: #f1f3f5; border:1px solid #dee2e6; color:#1c7ed6; font-size: 0.75em; letter-spacing: -1px;}
.list-selected li button {float: right; border:0; background: 0; color:#ffc078;}

#choice-subject .cmd {text-align: center; display: none; margin: 20px 0}
#choice-subject .cmd button {width: 100px;}
#choice-subject .next-list {opacity: 0;}

.form-el { padding: 4px 16px; line-height: 36px; height: 36px; border:1px solid #a5d8ff; border-radius: 10px; display: block; width: 100%; color:#495057 }
.form-el::placeholder {color:#d0ebff}

.local_loader {background: url(../img/bars.svg) no-repeat center/50px; height: 100px; text-align: center; color:#495057; }


.collection table {border-collapse: collapse;}
.collection table th, .collection table td { padding: 5px !important;}
.collection .explanation {margin-bottom: 20px;}

.collection .quest {position: relative; padding-top:15px;}
.collection .swiper-container {min-height: calc(100vh - 132px);}
.collection .score {position: absolute; left: 0px; top:0px; font-size: 0.75em; color:#94d82d; }
.collection .percent {margin-left: 10px; color: #e599f7;}
.collection .num {font-weight: 700}

.collection .question > div {margin-top:10px}
.collection img {max-width: 100%;}

.collection .no > input {display:none;}
.collection .no > button {display: block; width: calc(100% - 20px); text-align: left; margin:10px 10px; padding:10px 10px 10px 30px ; position: relative; cursor: pointer; background: 0; border:2px solid transparent;}
.collection .no > button::before { display: block; position: absolute; left:5px; top:10px; }
.collection .no > button:focus {outline: 0;}
.collection .no .no1::before{ content: "①";}
.collection .no .no2::before{ content: "②";}
.collection .no .no3::before{ content: "③";}
.collection .no .no4::before{ content: "④";}

.collection .no .check {border: 1px solid #a5d8ff; background: #e7f5ff;}
.collection .no .correct {border: 1px solid #ffc9c9; background: #fff5f5;}

/* 지문 에서 */
.exp_contents td[bgcolor] {white-space: nowrap;}

.explanation {position: relative; padding-top:30px;}
.explanation::before{content: ""; content:""; position: absolute; left:0; top:27px; display:block; height:3px; width:100%; background: #dbe4ff;}
.expToggle {position: absolute; border:3px solid #dbe4ff; display: block; height: 30px; line-height: 30px; width: 120px; color:#748ffc; background: #fff; right: 10px; top:0px; font-size: 0.875em;
border-top-left-radius: 10px; border-top-right-radius: 10px; }
.left-hand .expToggle {right: auto; left:10px;}
.expToggle:focus {outline: 0;}
.expToggle {border-bottom:0;}
.collection .explanation > div {border: 3px solid #dbe4ff; padding: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;} 
.collection .explanation > div {border-top: 0} 

/*main*/
#main .subject {font-size:1rem; padding:10px;  border: 1px solid #dee2e6; position: relative; }
#main .subject + div{margin-top:20px}
#main .name {color:#495057; position: relative; letter-spacing: -1px;}
#main .name a {color:#1c7ed6; font-size: 0.8em; margin-left: 10px;}
#main .collection {position: relative;}
#main .fold {cursor: pointer;}
#main .fold > button {display:block; position: absolute; height: 30px; width: 30px; right: 10px; top:5px; border-radius: 15px; 
    background: transparent url(../img/arrow.svg) no-repeat center/15px; border: 0; transition: all 0.3s;}
#main .name > button {right:0px; top:-5px; height: 40px; width: 40px; background-size: 20px;} 
#main .fold.ing > button {transform: rotate(-180deg);}
#main .year {margin-top:10px; background: #f1f3f5; padding: 8px; color:#4263eb;  position: relative;  }

#main .container {display: flex; flex-wrap: wrap; margin: 0 -5px;}
#main .container .item {width: calc(100% / 2); padding:5px; position: relative; }
#main .container .item > button {display: block; width: 100%; border:1px solid #e9ecef; background:#f8f9fa; padding:8px 0; transition: all 0.3s; }
#main .container .item > button > div > span, 
#main .container .item > button > div {transition: all 0.3s;}
#main .container .item > button:focus {outline: 0}
#main .container .item > button:hover {background: #d0ebff; border-color:#74c0fc; }
#main .container .item > button .wdate {font-size: 0.8em; color:#495057; font-weight: 500;}
#main .container .item .del { position: absolute; width: 32px;height:32px; text-align: center; right: 10px; top:5px; font-size: 1.3em; color:#fa5252;}
#main .container .item > button .total_score {font-size: 0.8em; }
#main .container .item > button .total_score span {font-size: 3em; font-weight: 700; color:#fa5252}
#main .container .item > button .prog_time {font-size: 0.75em;}
#main .container .item > button .prog_time span {color:#339af0; font-size: 1.5em; }
#main .container .item .play .total_score span {color: #228be6; }
#main .container .item > button:active {background:#1c7ed6; }
#main .container .item > button:active > div > span, 
#main .container .item > button:active > div {color:#fff !important}

/* 옵션 */
#option .contents {max-width: 600px; margin: 0 auto;}
#option .contents label {position: relative; display: block; margin-top:30px; padding-left: 110px; cursor: pointer;}
#option .contents input {display: none;}
#option .contents .title {font-size: 1.2em; color:#495057;}
#option .contents .desc {font-size: 0.9em; color: #868e96;}
#option .contents .desc > span {color:#fa5252;}
#option .contents .optView {position: absolute; left:10px; top:50%; transform: translateY(-50%); width: 80px; height: 40px;}
#option .contents .optView::before {content: ""; display: block; height: 20px; width: 50px; background: #dee2e6; border-radius:10px;   position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); transition: all 0.7s;}
#option .contents .optView .handle {position: absolute;  background: #a5d8ff; height: 28px; width: 28px; left:0px;  top:50%; transform: translateY(-50%);  border-radius: 50%; z-index: 10; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); transition: all 0.7s;}
#option .contents .optView::after {content: "OFF";  display: block; color:#495057;  top:10px;  height: 20px; line-height: 20px; width: 100%; text-align: center; z-index: 5; position: absolute;font-size: 0.75em; transition: all 0.7s;}
#option .contents input:checked + .optView::before {background: #228be6;}
#option .contents input:checked + .optView .handle {left:55px}
#option .contents input:checked + .optView::after {content:"ON"; color:#fff;}
#option .cmd {text-align: center; margin-top: 30px;}
#option .cmd button {width: 100px;}

@media screen and (min-width: 700px) {
    #main .container .item {width: calc(100% / 3);}

}


/* 메뉴 미디어 쿼리*/
@media screen and (min-width: 960px) {
	#menu {transform: translateX(0); }
	#menuBtn {display: none;}
	#menu.on ~ #footer ,
    #menu.on ~ #header,
    #menu.on ~ #info,
	#menu.on ~ #app {margin-left: 260px; width: calc(100% - 260px);}
	
	.showmenu #app {transform: translateX(0px)}
    #main .container .item {width: calc(100% / 4);}
}

@media screen and (min-width: 1200px) {
    #main .container .item {width: calc(100% / 5);}
}
@media screen and (min-width: 1500px) {
    #main .container .item {width: calc(100% / 6);}
}
@media screen and (min-width: 1800px) {
    #main .container .item {width: calc(100% / 7);}
}