@charset "utf-8";

/* ---------------------
  - loginContainer
  - loginContents
    - loginContents__item
  - loginLogo
  - loginForm
    - loginForm__item
  - loginFormDetail
    - loginFormDetail__title
    - loginFormDetail__body
  - loginFormBtn
  - loginFormError

  - navContainer
  - navMenu
    - navMenu__item
    - navMenu__item--cherry
    - navMenu__item--minecraft
    - navMenu__item--movie

  - mainTitle
    - mainTitle__main

  - cherryContainer
  - cherryList
    - cherryList__item
    - cherryList__item--lock
  - cherryLevel
    - cherryLevel--check
    - cherryLevel__number
    - cherryLevel__star

  - cherryFormulaContainer
  - cherryFormulaTitle
  - cherryFormulaList
    - cherryFormulaList__item
    - cherryFormulaList--flex
  - cherryFormulaText
    - cherryFormulaText--correct
    - cherryFormulaText--incorrect
  - cherryFormulaInput
  - cherryFormula
    - cherryFormula__item
    - cherryFormula__item--number
    - cherryFormula__item--symbol
    - cherryFormula--easy
    - cherryFormula--normal
    - cherryFormula--hard
  - cherryDivide
    - cherryDivide__item

  - minecraftContainer
  - minecraftList
    - minecraftList__item
    - minecraftList__item--lock
  - minecraftTask
    - minecraftTask__number
    - minecraftTask__situation
  - minecraftTask--explanation
  - minecraftTask--notSubmitted
  - minecraftTask--submitted
  - minecraftTask--checking
  - minecraftTask--resubmit
  - minecraftTask--complate
  - minecraftTask--check

  - submissionGoal

  - basicFrame
    - basicFrame__title
    - basicFrame__body
  - basicFrameText
    - basicFrameText--explanation
    - basicFrameText--submitted
    - basicFrameText--checking
  - basicFrameBtn
    - basicFrameBtn--view
    - basicFrameBtn--back
  - basicFrameForm
    - basicFrameForm__item
  - basicFrameFormUpload
    - basicFrameFormUpload__item
  - basicFrameFormFile
  - basicFrameFormName
    - basicFrameFormName__title
    - basicFrameFormName__body
  - basicFrameFormError
  - basicFrameFormSubmit

  - basicReply
  - basicReplyHeader
    - basicReplyHeader__main
  - basicReplyMain
    - basicReplyMain__item
  - basicReplyText
  - basicReplyBtn

  - basicBtn
    - basicBtn__item
    - basicBtn__item--next
  - basicBtn--answer

  - basicError
    - basicError__title
    - basicError__body
  - basicErrorCode
  - basicErrorBtn
--------------------- */



/* =====================
  loginContainer
===================== */
#loginContainer {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  min-width: 768px;
  height: 100%;
  min-height: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  /* background-color: #e6e6e6; */
}



/* =====================
  loginContents
===================== */
#loginContents {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: center;
  /*
  -ms-align-items: flex-start;
      align-items: flex-start;
  */
  -ms-align-items: center;
      align-items: center;
}


/*  loginContents__item
------------------------*/
.loginContents__item + .loginContents__item {
  margin-left: 50px;
}


/* =====================
  loginLogo
===================== */
.loginLogo img {
  width: 100%;
  max-width: 240px;
}

/*
.loginContents__item.loginLogo {
  padding-top: 10px;
}
*/



/* =====================
  loginForm
===================== */
/*  loginForm__item
------------------------*/
.loginForm__item + .loginForm__item {
  margin-top: 25px;
}



/* =====================
  loginFormDetail
===================== */
.loginFormDetail {
  font-size: 18px;
}


/*  loginFormDetail__title
------------------------*/
.loginFormDetail__title {
  margin-bottom: 5px;
}


/*  loginFormDetail__body
------------------------*/
.loginFormDetail__body {
  width: 300px;
  line-height: 1;
}

.loginFormDetail__body input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 5px 10px;
  border: 2px solid #444;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  color: #444;
  font-weight: 500;
  font-size: 16px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  outline: none;
}

.loginFormDetail__body input:focus {
  border-color: #31b9cb;
}




/* =====================
  loginFormBtn
===================== */
#loginFormBtn {
  text-align: center;
}

.loginForm__item + #loginFormBtn {
  margin-top: 30px;
}

#loginFormBtn button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  top: 0;
  z-index: 0;
  padding: 8px 28px;
  border: none;
  border-radius: 5px;
  background-color: #444;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  outline: none;
  -webkit-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

#loginFormBtn button:hover {
  top: -5px;
  background-color: #31b9cb;
  cursor: pointer;
}

#inquiryLink {
  margin-top: 25px;
  text-align: center;
}

#inquiryLink a {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 8px 60px;
  border: none;
  border-radius: 5px;
  background-color: #31b9cb;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  outline: none;
  display: inline-block;
  text-decoration: none;
}



/* =====================
  loginFormError
===================== */
.loginFormError {
  margin-top: 5px;
  color: #c00;
  font-size: 16px;
}



/* =====================
  navContainer
===================== */
#navContainer {
  width: 100%;
  max-width: 951px;
}



/* =====================
  navMenu
===================== */
#navMenu {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  -webkit-flex-wrap: wrap;
     -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
       -o-flex-wrap: wrap;
          flex-wrap: wrap;
  justify-content: center;
  -ms-align-items: center;
      align-items: center;
  margin: 0 0 -30px -30px;
}


/*  navMenu__item
------------------------*/
.navMenu__item {
  width: -webkit-calc( ( ( 100% - .01px ) - ( 30px * 4 ) ) / 4 );
  width:         calc( ( ( 100% - .01px ) - ( 30px * 4 ) ) / 4 );
  margin: 0 0 30px 30px;
}

.navMenu__item a {
  display: block;
  position: relative;
  top: 0;
  z-index: 0;
  padding: 30px;
  padding-bottom: 20px;
  border-radius: 10px;
  background-color: #fff;
  color: #444;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  -webkit-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

.navMenu__item a:before {
  display: block;
  margin-bottom: 15px;
  font-weight: normal;
  font-size: 90px;
  font-family: 'icomoon';
  line-height: 90px;
  text-align: center;
}

.navMenu__item a:hover {
  top: -5px;
}


/*  navMenu__item--cherry
------------------------*/
.navMenu__item--cherry a:before {
  color: #31b9cb;
  content: "\e90a";
}


/*  navMenu__item--minecraft
------------------------*/
.navMenu__item--minecraft a:before {
  color: #009f00;
  content: "\e909";
}


/*  navMenu__item--programming
------------------------*/
.navMenu__item--programming a:before {
  color: #009f00;
  content: "\e910";
}


/*  navMenu__item--movie
------------------------*/
.navMenu__item--movie a:before {
  color: #3162ee;
  content: "\e908";
  font-size: 84px;
  line-height: 84px;
}

/*  navMenu__item--qanda
------------------------*/
.navMenu__item--qanda a img {
  display: block;
  height: 72px;
  margin: 0 auto 4px;
}

/*  navMenu__item--support
------------------------*/
.navMenu__item--support a img {
  display: inline-block;
  height: 90px;
  margin-bottom: 8px;
}



/* =====================
  mainTitle
===================== */
.mainTitle {
  margin-bottom: 30px;
}


/*  mainTitle__main
------------------------*/
.mainTitle__main {
  font-size: 32px;
  letter-spacing: .04em;
  text-align: center;
  text-indent: .04em;
}



/* =====================
  cherryContainer
===================== */
#cherryContainer {
  max-width: 964px;
  min-width: 708px;
  margin: 0 auto;
}



/* =====================
  cherryList
===================== */
#cherryList {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  -webkit-flex-wrap: wrap;
     -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
       -o-flex-wrap: wrap;
          flex-wrap: wrap;
  justify-content: flex-start;
  -ms-align-items: stretch;
      align-items: stretch;
  list-style: none;
  margin: 0 0 -21px -21px;
  font-size: 30px;
}
@media screen and (max-width:1024px) {
  #cherryList {
    font-size: 2.9296875vw; /* 30/10.24 */
  }
}
@media screen and (max-width:768px) {
  #cherryList {
    font-size: 22.5px;
  }
}


/*  cherryList__item
------------------------*/
.cherryList__item {
  position: relative;
  z-index: 0;
  width: -webkit-calc( ( ( 100% - .01px ) - ( 21px * 5 ) ) / 5 );
  width:         calc( ( ( 100% - .01px ) - ( 21px * 5 ) ) / 5 );
  margin: 0 0 21px 21px;
}
@media screen and (max-width:1024px) {
  .cherryList__item {
    width: -webkit-calc( ( ( 100% - .01px ) - ( 2.05078125vw * 5 ) ) / 5 ); /* 21/10.24 */
    width:         calc( ( ( 100% - .01px ) - ( 2.05078125vw * 5 ) ) / 5 );
    margin: 0 0 2.05078125vw 2.05078125vw;
  }
}
@media screen and (max-width:768px) {
  .cherryList__item {
    width: -webkit-calc( ( ( 100% - .01px ) - ( 15.75px * 5 ) ) / 5 ); /* 21/10.24 */
    width:         calc( ( ( 100% - .01px ) - ( 15.75px * 5 ) ) / 5 );
    margin: 0 0 15.75px 15.75px;
  }
}

.cherryList__item > a ,
.cherryList__item > span {
  display: block;
  position: relative;
  top: 0;
  z-index: 0;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  color: #444;
  text-decoration: none;
  text-align: center;
  -webkit-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

.cherryList__item > a:hover {
  top: -5px;
}


/*  cherryList__item--lock
------------------------*/
.cherryList__item--lock:before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  border-radius: 10px;
  background-color: rgba(136,136,136,.8);
  content: " ";
}

.cherryList__item--lock:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  font-weight: normal;
  font-size: 3em; /* 90px */
  font-family: 'icomoon';
  line-height: 1em;
  text-align: center;
  content: "\e906";
}



/* =====================
  cherryLevel
===================== */
.cherryLevel {
  position: relative;
  z-index: 0;
  padding: 1em .666667em; /* 30px 20px */
  padding-bottom: .5em; /* 15px */
}


/*  cherryLevel--check
------------------------*/
.cherryLevel--check:before {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  color: #009f00;
  font-size: .933334em; /* 28px */
  font-family: 'icomoon';
  line-height: 1em;
  content: "\e907";
}


/*  cherryLevel__number
------------------------*/
.cherryLevel__number {
  letter-spacing: .04em;
  text-indent: .04em;
}

.cherryLevel__number > span {
  display: block;
  margin-top: -.305556em; /* 11px */
  font-size: 1.2em; /* 36px */
}


/*  cherryLevel__star
------------------------*/
.cherryLevel__star {
  padding-top: 5px;
  border-top: 1px solid #ccc;
  color: #888;
  font-size: .8em; /* 24px */
  letter-spacing: .06em;
  text-indent: .06em;
}

.cherryLevel__star > span {
  color: #ee8831;
}



/* =====================
  cherryFormulaContainer
===================== */
#cherryFormulaContainer {
  width: 100%;
  max-width: 708px;
  margin: 0 auto;
}

.main__inner--flex #cherryFormulaContainer {
  margin: 0;
}



/* =====================
  cherryFormulaTitle
===================== */
.cherryFormulaTitle {
  margin-bottom: 45px;
  font-size: 24px;
  text-align: center;
}


/*  cherryFormulaTitle__main
------------------------*/
.cherryFormulaTitle__main:after {
  display: block;
  width: 50px;
  height: 3px;
  margin: 0 auto;
  margin-top: 10px;
  background-color: #444;
  content: " ";
}



/* =====================
  cherryFormulaList
===================== */
/*  cherryFormulaList__item
------------------------*/
.cherryFormulaList__item + .cherryFormulaList__item {
  margin-top: 45px;
}


/*  cherryFormulaList--flex
------------------------*/
.cherryFormulaList--flex {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  -webkit-flex-wrap: wrap;
     -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
       -o-flex-wrap: wrap;
          flex-wrap: wrap;
  justify-content: center;
  -ms-align-items: stretch;
      align-items: stretch;
  margin: 0 0 -30px -30px;
}

.cherryFormulaList--flex .cherryFormulaList__item {
  width: -webkit-calc( ( ( 100% - .01px ) - ( 30px * 2 ) ) / 2 );
  width:         calc( ( ( 100% - .01px ) - ( 30px * 2 ) ) / 2 );
  margin: 0 0 30px 30px;
}



/* =====================
/*  cherryFormulaText
===================== */
.cherryFormulaText {
  border: 5px solid #c00;
  border-radius: 60px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
  background-color: #e6e6e6;
  /* color: #c00; */
  text-align: center;
}

.cherryFormulaText:hover {
  cursor: default;
}


/*  cherryFormulaText--correct
------------------------*/
.cherryFormulaText--correct {
  border-color: #090;
  /* background-color: #f5d6d6; */
  background-color: #edffed;
  color: #090;
}


/*  cherryFormulaText--incorrect
------------------------*/
.cherryFormulaText--incorrect {
  /*
  border-color: #00c;
  background-color: #d6d6f5;
  color: #00c;
  */
  background-color: #f5d6d6;
}



/* =====================
/*  cherryFormulaInput
===================== */
.cherryFormulaInput {
  border: 5px solid #444;
  border-radius: 60px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
  line-height: 1;
}

.cherryFormulaInput input[type="number"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  color: #444;
  font-weight: 700;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  text-align: center;
  outline: none;
}

/* chrome/Safari */
.cherryFormulaInput input[type="number"]::-webkit-outer-spin-button ,
.cherryFormulaInput input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* firefox/IE */
.cherryFormulaInput input[type="number"] {
  -moz-appearance: textfield;
}



/* =====================
  cherryFormula
===================== */
.cherryFormula {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: center;
  -ms-align-items: flex-start;
      align-items: flex-start;
  width: 100%;
  font-size: 40px;
  letter-spacing: .04em;
  text-align: center;
  text-indent: .04em;
}

.cherryFormula .cherryFormulaText ,
.cherryFormula .cherryFormulaInput {
  letter-spacing: 0;
  text-indent: 0;
}


/*  cherryFormula__item
------------------------*/
.cherryFormula__item {
  line-height: 120px;
}

.cherryFormula__item > .cherryFormulaInput ,
.cherryFormula__item > .cherryFormulaText {
  width: 120px;
  height: 120px;
}

.cherryFormula__item > .cherryFormulaText {
  line-height: 110px;
}

.cherryFormula__item > .cherryFormulaInput input[type="number"] ,
.cherryFormula__item > .cherryFormulaText {
  font-size: 30px;
}


/*  cherryFormula__item--number
------------------------*/
.cherryFormula__item--number {
  min-width: 145px;
}


/*  cherryFormula__item--symbol
------------------------*/
.cherryFormula__item--symbol {
  min-width: 42px;
}


/*  cherryFormula--easy
------------------------*/
.cherryFormula--easy .cherryFormula__item {
  -webkit-flex: 1;
     -moz-flex: 1;
      -ms-flex: 1;
       -o-flex: 1;
          flex: 1;
  width: auto;
}


/*  cherryFormula--normal
------------------------*/
.cherryFormula--normal .cherryFormula__item--number {
  width: -webkit-calc( ( ( 100% - .01px ) / 10 ) * 2.933333 );
  width:         calc( ( ( 100% - .01px ) / 10 ) * 2.933333 );
}

.cherryFormula--normal .cherryFormula__item--symbol {
  width: -webkit-calc( ( ( 100% - .01px ) / 10 ) * .6 );
  width:         calc( ( ( 100% - .01px ) / 10 ) * .6 );
}


/*  cherryFormula--hard
------------------------*/
.cherryFormula--hard .cherryFormula__item--number {
  width: -webkit-calc( ( ( 100% - .01px ) / 10 ) * 2.05 );
  width:         calc( ( ( 100% - .01px ) / 10 ) * 2.05 );
}

.cherryFormula--hard .cherryFormula__item--symbol {
  width: -webkit-calc( ( ( 100% - .01px ) / 10 ) * .6 );
  width:         calc( ( ( 100% - .01px ) / 10 ) * .6 );
}



/* =====================
  cherryDivide
===================== */
.cherryDivide {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: center;
  -ms-align-items: center;
      align-items: center;
  position: relative;
  z-index: 0;
  width: 145px;
  margin: 0 auto;
  padding-top: 30px;
  font-size: 24px;
  letter-spacing: 0;
  text-indent: 0;
}

.cherryDivide:before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-style: solid;
  border-color: transparent transparent #090 transparent;
  border-width: 0 32px 38px;
  content: " ";
}

.cherryDivide:after {
  display: block;
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-style: solid;
  border-color: transparent transparent #fef1f4 transparent;
  border-width: 0 32px 38px;
  content: " ";
}


/*  cherryDivide__item
------------------------*/
.cherryDivide__item {
  position: relative;
  z-index: 9;
}

.cherryDivide__item > .cherryFormulaText ,
.cherryDivide__item > .cherryFormulaInput {
  width: 70px;
  height: 70px;
}

.cherryDivide__item > .cherryFormulaText {
  line-height: 60px;
}

.cherryDivide__item > .cherryFormulaInput input[type="number"] {
  font-size: 24px;
}

.cherryDivide__item + .cherryDivide__item {
  margin-left: 5px;
}



/* =====================
  minecraftContainer
===================== */
#minecraftContainer {
  max-width: 964px;
  min-width: 708px;
  margin: 0 auto;
}



/* =====================
  minecraftList
===================== */
#minecraftList {
  list-style: none;
  font-size: 22.5px;
}
/*
@media screen and (max-width:1024px) {
  #minecraftList {
    font-size: 2.9296875vw;
  }
}
@media screen and (max-width:768px) {
  #minecraftList {
    font-size: 22.5px;
  }
}
*/


/*  minecraftList__item
------------------------*/
.minecraftList__item {
  width: 100%;
  z-index: 0;
}

.minecraftList__item + .minecraftList__item {
  margin-top: .25em;
}

.minecraftList__item a {
  position: relative;
  display: table;
  width: 100%;
  min-height: 3em;
  top: 0;
  z-index: 0;
  border: 4px solid #31b9cb;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  color: #444;
  text-decoration: none;
  -webkit-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

.minecraftList__item a:hover {
  top: -5px;
}

.minecraftList__item a > div {
  display: table-cell;
  vertical-align: middle;
}


/*  minecraftList__item--lock
------------------------*/
.minecraftList__item--lock:before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  border-radius: 10px;
  background-color: rgba(136,136,136,.8);
  content: " ";
}

.minecraftList__item--lock:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  font-weight: normal;
  font-size: 3em; /* 90px */
  font-family: 'icomoon';
  line-height: 1em;
  text-align: center;
  content: "\e906";
}


/* =====================
  minecraftTask
===================== */
.minecraftTaskNumber {
  width: 5em;
  text-align: center;
}

.minecraftTaskTitle {
  width: auto;
  text-align: left;
  line-height: 1.3;
  border-left: 4px solid #31b9cb;
  padding: 0 .5em;
}

.minecraftTask {
  width: 5em;
  text-align: center;
  border-left: 3px dashed #31b9cb;
  padding: .3em 0;
}


/*  minecraftTask__number
------------------------*/
.minecraftTask__number {
  font-size: .711111em;
}


/*  minecraftTask__situation
------------------------*/
.minecraftTask__situation {
  position: relative;
  z-index: 0;
  font-size: .622222em;
}

.minecraftTask__situation:before ,
.minecraftTask__situation:after {
  display: block;
  margin: auto;
  margin-bottom: 5px;
  color: #444;
  font-weight: normal;
  font-size: 2.857143em;
  line-height: 1;
  font-family: 'icomoon';
}
.minecraftTask__situation:after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}


/*  minecraftTask--explanation
------------------------*/
.minecraftTask--explanation .minecraftTask__situation:before {
  content: "\e905";
}


/*  minecraftTask--notSubmitted
------------------------*/
.minecraftTask--notSubmitted .minecraftTask__situation:before {
  content: "\e90f";
}

.minecraftTask--notSubmitted .minecraftTask__situation:after {
  content: "\e90e";
}


/*  minecraftTask--submitted
------------------------*/
.minecraftTask--submitted .minecraftTask__situation:before {
  content: "\e90d";
}

.minecraftTask--submitted .minecraftTask__situation:after {
  color: #3162ee;
  content: "\e90c";
}


/*  minecraftTask--checking
------------------------*/
.minecraftTask--checking .minecraftTask__situation:before {
  content: "\e90b";
}

.minecraftTask--checking .minecraftTask__situation:after {
  color: #7131ee;
  content: "\e904";
}


/*  minecraftTask--resubmit
------------------------*/
.minecraftTask--resubmit .minecraftTask__situation:before {
  content: "\e903";
}

.minecraftTask--resubmit .minecraftTask__situation:after {
  color: #31b9cb;
  content: "\e902";
}


/*  minecraftTask--complate
------------------------*/
.minecraftTask--complate .minecraftTask__situation:before {
  content: "\e901";
}

.minecraftTask--complate .minecraftTask__situation:after {
  color: #009f00;
  content: "\e900";
}


/*  minecraftTask--check
------------------------*/
.minecraftTask--check .minecraftTask__situation:after {
  top: 1.5em; /* 24px */
  right: auto;
  left: 50%;
  -webkit-transform: translateX(25%);
      -ms-transform: translateX(25%);
       -o-transform: translateX(25%);
          transform: translateX(25%);
  margin: auto;
  padding: .2em;
  border-radius: 50px;
  background-color: #fff;
  color: #009f00;
  font-size: 1.142857em; /* 16px */
  content: "\e907";
}



/* =====================
  submissionGoal
===================== */
.submissionGoal {
  position: absolute;
  top: 0;
  right: 3px;
  left: 3px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 0.384615em 0;
  border-radius: 50px;
  background-color: #ee8831;
  color: #fff;
  font-size: .433334em; /* 13px */
  letter-spacing: .04em;
  text-align: center;
  text-indent: .04em;
}

.submissionGoal:after {
  display: block;
  position: absolute;
  top: 99%;
  right: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-style: solid;
  border-width: 8px 5px 0;
  border-color: #f90 transparent transparent transparent;
  content: " ";
}



/* =====================
  basicFrame
===================== */
.basicFrame {
  display: table;
  padding: .9375em  1.5625em; /* 30px 50px */
  border-radius: 10px;
  background-color: #fff;
  font-size: 32px;
  letter-spacing: .04em;
  text-align: center;
  text-indent: .04em;
}


/*  basicFrame__title
------------------------*/
.basicFrame__title {
  margin-bottom: 10px;
  padding: 2px 10px;
  border-radius: 50px;
  background-color: #31b9cb;
  color: #fff;
  font-size: .5625em; /* 18px */
}



/* =====================
  basicFrameText
===================== */
.basicFrameText {
  position: relative;
  z-index: 0;
}

.basicFrameText:before ,
.basicFrameText:after {
  display: block;
  color: #444;
  font-weight: normal;
  font-size: 1.875em; /* 60px */
  line-height: 1em;
  font-family: 'icomoon';
  text-align: center;
}

.basicFrameText:after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
}


/*  basicFrameText--explanation
------------------------*/
.basicFrameText--explanation:before {
  content: "\e905";
}


/*  basicFrameText--submitted
------------------------*/
.basicFrameText--submitted:before {
  content: "\e90d";
}

.basicFrameText--submitted:after {
  color: #3162ee;
  content: "\e90c";
}


/*  basicFrameText--checking
------------------------*/
.basicFrameText--checking:before {
  content: "\e90b";
  margin-bottom: 10px;
}

.basicFrameText--checking:after {
  color: #7131ee;
  content: "\e904";
}



/* =====================
  basicFrameBtn
===================== */
.basicFrameBtn {
  margin-top: 10px;
}

.basicFrameBtn a {
  display: block;
  position: relative;
  top: 0;
  z-index: 0;
  width: 100%;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #31b9cb;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}


/*  basicFrameBtn--view
------------------------*/
.basicFrameBtn--view {
  min-width: 350px;
  font-size: .625em; /* 20px */
}

.basicFrameBtn--view a {
  padding: .75em; /* 15px */
}

.basicFrameBtn--view a:hover {
  top: -5px;
}


/*  basicFrameBtn--back
------------------------*/
.basicFrameBtn--back {
  min-width: 300px;
  font-size: .5em; /* 16px */
}

.basicFrameBtn--back a {
  padding: 8px 2.75em; /* 44px */
}

.basicFrameBtn--back a:after {
  display: block;
  position: absolute;
  top: 0;
  right: 1.25em; /* 20px */
  bottom: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 8px;
  height: 8px;
  margin: auto 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  content: " ";
}

.basicFrameBtn--back a:hover {
  top: -5px;
}



/* =====================
  basicFrameForm
===================== */
.basicFrameForm {
  margin-top: 10px;
}



/* =====================
  basicFrameFormUpload
===================== */
/*  basicFrameFormUpload__item
------------------------*/
.basicFrameFormUpload__item + .basicFrameFormUpload__item {
  margin-top: 5px;
}



/* =====================
  basicFrameFormFile
===================== */
.basicFrameFormFile label {
  display: block;
  position: relative;
  top: 0;
  z-index: 0;
  width: 100%;
  min-width: 300px;
  padding: .6666667em; /* 12px */
  border: 2px solid #31b9cb;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  color: #31b9cb;
  font-size: .5625em; /* 18px */
  -webkit-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

.basicFrameFormFile label:hover {
  top: -5px;
  cursor: pointer;
}

.basicFrameFormFile label + input {
  display: none;
}



/* =====================
  basicFrameFormName
===================== */
.basicFrameFormName {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: center;
  -ms-align-items: flex-end;
      align-items: flex-end;
  width: 100%;
  min-width: 300px;
  /* max-width: 300px; */
  margin: 0 auto;
  font-size: .5em; /* 16px */
}

.basicFrameForm__name.basicFrameFormName {
  margin-top: 10px;
}


/*  basicFrameFormName__title
------------------------*/
.basicFrameFormName__title {
  -webkit-flex: none;
     -moz-flex: none;
      -ms-flex: none;
       -o-flex: none;
          flex: none;
  white-space: nowrap;
}


/*  basicFrameFormName__body
------------------------*/
.basicFrameFormName__body {
  text-align: left;
}


/* =====================
  basicFrameFormError
===================== */
.basicFrameFormError {
  padding: 10px 15px;
  background-color: #c00;
  color: #fff;
  font-size: 16px;
}


/* =====================
  basicFrameFormComment
===================== */
.basicFrameFormComment textarea {
  width: 480px;
  height: 8em;
  font-size: 16px;
  padding: 0.5em;
  border: 2px solid #31b9cb;
  border-radius: 8px;
  line-height: 1.3;
  margin-top: 8px;
}

.basicFrameFormComment p {
  font-size: .5em;
}

.basicFrameForm__item + .basicFrameFormComment {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px dashed #444;
}


/* =====================
  basicFrameFormSubmit
===================== */
.basicFrameFormSubmit button ,
.basicFrameFormSubmit input[type="submit"] ,
.basicFrameFormSubmit input[type="button"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-block;
  position: relative;
  top: 0;
  margin: 0;
  padding: 8px 1.3333333em; /* 24px */
  border: none;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #31b9cb;
  color: #fff;
  font-size: .5625em; /* 18px */
  font-weight: 700;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  -webkit-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

.basicFrameFormSubmit button:hover ,
.basicFrameFormSubmit input[type="submit"]:hover ,
.basicFrameFormSubmit input[type="button"]:hover {
  top: -5px;
  cursor: pointer;
}

.basicFrameForm__item + .basicFrameFormSubmit {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px dashed #444;
}


/* =====================
  basicReply
===================== */
.basicReply {
  max-width: 708px;
  margin: 0 auto;
  font-size: 18px;
  letter-spacing: .04em;
}



/* =====================
  basicReplyHeader
===================== */
.basicReplyHeader {
  margin-bottom: 1.666667em; /* 30px */
}



/*  basicReplyHeader__main
------------------------*/
.basicReplyHeader__main {
  position: relative;
  z-index: 0;
  border-bottom: 1px solid #444;
  font-size: 1.333333em; /* 24px */
}

.basicReplyHeader__main:after {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
       -o-transform: translateY(50%);
          transform: translateY(50%);
  width: 4.16667em; /* 100px */
  height: 3px;
  background-color: #444;
  content: " ";
}



/* =====================
  basicReplyMain
===================== */
.basicReplyMain .basicFrame {
  margin: 0 auto;
}


/*  basicReplyMain__item
------------------------*/
.basicReplyMain__item + .basicReplyMain__item {
  margin-top: 3.333333em; /* 60px */
}

.basicReplyImage {
  border-top: 1px dashed #aaa;
}

.basicReplyImage + .basicReplyImage {
  margin-top: 16px;
}

.basicReplyImage__title {
  margin: 12px 0;
}

.basicReplyImage__image img {
  max-width: 100%;
}


/* =====================
  basicReplyText
===================== */



/* =====================
  basicReplyBtn
===================== */
.basicReplyBtn {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

.basicReplyBtn a {
  display: block;
  position: relative;
  top: 0;
  z-index: 0;
  padding: .75em; /* 15px */
  border-radius: 5px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #31b9cb;
  color: #fff;
  font-size: 1.1111em; /* 20px */
  letter-spacing: .04em;
  text-decoration: none;
  text-align: center;
  text-indent: .04em;
  -webkit-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

.basicReplyBtn a:hover {
  top: -5px;
}



/* =====================
  basicBtn
===================== */
.basicBtn {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: center;
  -ms-align-items: center;
      align-items: center;
  font-size: 18px;
}

.cherryFormula + .basicBtn {
  margin-top: 30px;
}

.cherryFormulaList + .basicBtn {
  margin: 60px 0;
}


/*  basicBtn__item
------------------------*/
.basicBtn__item {
  width: 100%;
  /* max-width: 13.3333333em; 240px */
  max-width: 15em;
}

.basicBtn__item + .basicBtn__item {
  margin-left: 1.6666667em; /* 30px */
}

.basicBtn__item a ,
.basicBtn__item button ,
.basicBtn__item input[type="submit"] ,
.basicBtn__item input[type="button"] ,
.basicBtn__item span {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  position: relative;
  top: 0;
  z-index: 0;
  width: 100%;
  margin: 0;
  padding: .666667em 1.11111em; /* 12px 20px */
  border: none;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  font-weight: 700;
  font-size: 1em;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  text-align: center;
  text-indent: .04em;
  -webkit-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

.basicBtn__item a ,
.basicBtn__item button ,
.basicBtn__item input[type="submit"] ,
.basicBtn__item input[type="button"] {
  background-color: #31b9cb;
}

.basicBtn__item span {
  background-color: #999;
}

.basicBtn__item a:hover ,
.basicBtn__item button:hover ,
.basicBtn__item input[type="submit"]:hover ,
.basicBtn__item input[type="button"]:hover {
  top: -5px;
  cursor: pointer;
}

.basicBtn__item span:hover {
  cursor: default;
}


/*  basicBtn__item--next
------------------------*/
.basicBtn__item--next a ,
.basicBtn__item--next button ,
.basicBtn__item--next span {
  padding: .666667em 2.444444em; /* 12px 44px */
}

.basicBtn__item--next a:after ,
.basicBtn__item--next button:after ,
.basicBtn__item--next span:after {
  display: block;
  position: absolute;
  top: 0;
  right: 1.11111em; /* 20px */
  bottom: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 9px;
  height: 9px;
  margin: auto 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  content: " ";
}


/*  basicBtn--answer
------------------------*/
.basicBtn--answer .basicBtn__item {
  /*
  max-width: 16.6666666em; 300px
  */
  max-width: 18em;
}



/* =====================
  basicError
===================== */
.basicError {
  padding: 30px 50px;
  border-radius: 10px;
  background-color: #fff;
  font-size: 16px;
  letter-spacing: .04em;
  text-align: center;
  text-indent: .04em;
}


/*  basicError__title
------------------------*/
.basicError__title {
  color: #c00;
  font-size: 32px;
}


/*  basicError__body
------------------------*/



/* =====================
  basicErrorCode
===================== */
.basicErrorCode {
  max-width: 500px;
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #c00;
  color: #fff;
  text-align: left;
}



/* =====================
  basicErrorBtn
===================== */
.basicErrorBtn {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #444;
}

.basicErrorBtn a {
  display: inline-block;
  position: relative;
  top: 0;
  z-index: 0;
  padding-right: 20px;
  color: #444;
  font-size: 1em;
  text-decoration: none;
  -webkit-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

.basicErrorBtn a:after {
  display: block;
  position: absolute;
  top: 0;
  right: 2px;
  bottom: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 6px;
  height: 6px;
  border-top: 2px solid #444;
  border-right: 2px solid #444;
  margin: auto 0;
  content: " ";
}

.basicErrorBtn a:hover {
  top: -5px;
}