@font-face {
  font-family: 'CookieRun Black';
  src: url('/fonts/cookieRun/CookieRun Black.otf') format('opentype');
}
@font-face {
  font-family: 'CookieRun Bold';
  src: url('/fonts/cookieRun/CookieRun Bold.otf') format('opentype');
}
@font-face {
  font-family: 'CookieRun Regular';
  src: url('/fonts/cookieRun/CookieRun Regular.otf') format('opentype');
}
#acs_codingParty_wrap {
  width: 100%;
  text-align: center;
  min-width: 1000px;
  background-color: #ffffff;
}
#acs_codingParty_wrap .info_div {
  position: relative;
}
#acs_codingParty_wrap .info_div .button_box {
  color: #ffffff;
}
#acs_codingParty_wrap .info_1 {
  background: url(/images/event/codingParty/background_1.png) repeat-x;
  background-size: cover;
  background-position: center;
  height: 900px;
}
#acs_codingParty_wrap .info_1 .mainImg {
  width: 900px;
  margin-top: 90px;
}
#acs_codingParty_wrap .info_1 .text_box {
  top: -408px;
  font-size: 23px;
}
#acs_codingParty_wrap .info_1 .logo {
  width: 500px;
  top: -276px;
}
#acs_codingParty_wrap .info_2 {
  background: url(/images/event/codingParty/background_2.png) repeat-x;
  background-size: cover;
  height: 666px;
  background-position: center;
}
#acs_codingParty_wrap .info_2 .text_box {
  top: 104px;
  font-size: 23px;
  color: #ffffff;
}
#acs_codingParty_wrap .codingPartyImg {
  position: relative;
}
#acs_codingParty_wrap .text_box {
  position: relative;
  line-height: 2;
}
#acs_codingParty_wrap .acs_codingParty_wrap_center {
  width: 1000px;
  height: 100%;
  display: inline-block;
}
#acs_codingParty_wrap .codingParty_contents .contents_info {
  position: relative;
  height: 300px;
}
#acs_codingParty_wrap .codingParty_contents .contents_info .text_box {
  position: relative;
  top: -124px;
  left: 100px;
  width: 750px;
  text-align: left;
  font-size: 19px;
}
#acs_codingParty_wrap .codingParty_contents .contnts_button_wrap {
  background: url(/images/event/codingParty/kronee_box.png) no-repeat;
  background-size: 100%;
  height: 300px;
  position: relative;
  margin-bottom: 100px;
}
#acs_codingParty_wrap .codingParty_contents .contnts_button_wrap .button_wrap {
  position: relative;
  text-align: right;
}
#acs_codingParty_wrap .codingParty_contents .contnts_button_wrap .button_wrap div {
  width: 90px;
  height: 90px;
  display: inline-block;
  text-align: center;
  border: 4px solid #73ca29;
  border-radius: 35px;
  font-size: 43px;
  padding-top: 10px;
  background-color: #fdfffc;
  cursor: pointer;
}
#acs_codingParty_wrap .codingParty_contents .contnts_button_wrap .button_wrap_top {
  top: 25px;
  right: 45px;
}
#acs_codingParty_wrap .codingParty_contents .contnts_button_wrap .button_wrap_top div {
  margin: 0 25px;
}
#acs_codingParty_wrap .codingParty_contents .contnts_button_wrap .button_wrap_bottom {
  top: 98px;
  right: 45px;
}
#acs_codingParty_wrap .codingParty_contents .contnts_button_wrap .button_wrap_bottom div {
  float: right;
  margin: 0 27px;
}
#classroom_popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  background-color: #fff;
  width: 500px !important;
  /*.popup_close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;

        i {
            font-size: 30px;
        }
    }*/
}
#classroom_popup .loginType_1 {
  width: 500px;
  text-align: center;
}
#classroom_popup .loginType_1 .popup_close {
  color: #000000;
}
#classroom_popup .loginType_1 p {
  font-size: 26px;
  margin: 80px 0 55px 0;
  font-weight: bold;
}
#classroom_popup .loginType_1 div {
  height: 50px;
  margin-bottom: 55px;
  font-size: 20px;
}
#classroom_popup .loginType_1 div span {
  margin-right: 20px;
  font-weight: bold;
}
#classroom_popup .loginType_1 div input,
#classroom_popup .loginType_1 div select {
  width: 200px;
  height: 45px;
  border: 1px solid #cfcfcf;
  border-radius: 12px;
  outline: none;
  padding-left: 10px;
}
#classroom_popup .loginType_1 button {
  width: 320px;
  height: 70px;
  margin-bottom: 80px;
  font-size: 26px;
  margin-left: 11px;
}
#classroom_popup .loginType_2 {
  width: 500px;
  height: 480px;
  background-color: #fff;
  border: 4px solid #4334c5;
  vertical-align: middle;
}
#classroom_popup .loginType_2 .loginType_2::after {
  content: "";
  display: block;
  clear: both;
}
#classroom_popup .loginType_2 .popup_close {
  float: right;
  cursor: pointer;
  color: #fff;
  padding: 10px;
}
#classroom_popup .loginType_2 .popup_close i {
  font-size: 35px;
}
#classroom_popup .loginType_2 p {
  color: #fff;
  font-size: 33px;
  background-color: #4334c5;
  padding: 20px;
  padding-left: 30px;
  text-align: center;
  font-family: 'CookieRun Bold';
}
#classroom_popup .loginType_2 button.cp211_submit {
  width: 310px;
  height: 70px;
  margin-bottom: 80px;
  font-size: 26px;
  margin-left: 90px;
  background-color: #4334c5;
  color: #fff;
  text-align: center;
  border-radius: 25px;
  outline: none;
  border: 1px solid transparent;
  font-family: 'CookieRun Bold';
  box-shadow: rgba(0, 0, 0, 0.3) 5px 10px 16px;
}
#classroom_popup .loginType_2 .age,
#classroom_popup .loginType_2 .name {
  font-size: 24px;
  font-weight: bold;
  width: 350px;
  margin-left: 90px;
}
#classroom_popup .loginType_2 .age span,
#classroom_popup .loginType_2 .name span {
  width: 100px;
  padding-right: 60px;
}
#classroom_popup .loginType_2 .age input,
#classroom_popup .loginType_2 .name input,
#classroom_popup .loginType_2 .age select,
#classroom_popup .loginType_2 .name select {
  width: 200px;
  height: 45px;
  border: 1px solid #cfcfcf;
  border-radius: 12px;
  outline: none;
  padding-left: 10px;
}
#classroom_popup .loginType_2 .age input,
#classroom_popup .loginType_2 .name input {
  margin-left: 8px;
}
#classroom_popup .loginType_2 .age {
  padding: 50px 0 30px 0;
}
#classroom_popup .loginType_2 .name {
  padding: 20px 0 70px 0;
}
#classroom_popup .loginType_3 {
  width: 500px;
  height: 480px;
  background-color: #fff;
  border: 4px solid #4334c5;
  vertical-align: middle;
}
#classroom_popup .loginType_3 .loginType_2::after {
  content: "";
  display: block;
  clear: both;
}
#classroom_popup .loginType_3 .popup_close {
  float: right;
  cursor: pointer;
  color: #fff;
  padding: 10px;
}
#classroom_popup .loginType_3 .popup_close i {
  font-size: 35px;
}
#classroom_popup .loginType_3 p {
  color: #fff;
  font-size: 33px;
  background-color: #4334c5;
  padding: 20px;
  padding-left: 30px;
  text-align: center;
  font-family: 'CookieRun Bold';
}
#classroom_popup .loginType_3 button.cp211_submit {
  width: 310px;
  height: 70px;
  margin-bottom: 80px;
  font-size: 26px;
  margin-left: 90px;
  background-color: #4334c5;
  color: #fff;
  text-align: center;
  border-radius: 25px;
  outline: none;
  border: 1px solid transparent;
  font-family: 'CookieRun Bold';
  box-shadow: rgba(0, 0, 0, 0.3) 5px 10px 16px;
}
#classroom_popup .loginType_3 .age,
#classroom_popup .loginType_3 .name {
  font-size: 24px;
  font-weight: bold;
  width: 350px;
  margin-left: 90px;
}
#classroom_popup .loginType_3 .age span,
#classroom_popup .loginType_3 .name span {
  width: 100px;
  padding-right: 60px;
}
#classroom_popup .loginType_3 .age input,
#classroom_popup .loginType_3 .name input,
#classroom_popup .loginType_3 .age select,
#classroom_popup .loginType_3 .name select {
  width: 200px;
  height: 45px;
  border: 1px solid #cfcfcf;
  border-radius: 12px;
  outline: none;
  padding-left: 10px;
}
#classroom_popup .loginType_3 .age input,
#classroom_popup .loginType_3 .name input {
  margin-left: 8px;
}
#classroom_popup .loginType_3 .age {
  padding: 50px 0 30px 0;
}
#classroom_popup .loginType_3 .name {
  padding: 20px 0 70px 0;
}
#classroom_popup_background {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 10;
  display: none;
  background-color: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
#classCertificate {
  width: 700px;
  /*.popup_close {
            color: #ffffff;
        }*/
  /*    #cp211_down_btn {
        bottom: 20px;
        left: 72%;

    }*/
}
#classCertificate img {
  position: relative;
}
#classCertificate .item {
  position: absolute;
  top: 185px;
  left: 115px;
  font-size: 22px;
  font-weight: bold;
}
#classCertificate .name {
  position: absolute;
  width: 151px;
  top: 251px;
  left: 87px;
  font-size: 22px;
  font-weight: bold;
  border: none;
  outline: none;
  text-align: center;
}
#classCertificate .date {
  position: absolute;
  top: 296px;
  right: 159px;
  font-size: 22px;
  font-weight: bold;
}
#classCertificate .date .month {
  margin-left: 50px;
}
#classCertificate .date .day {
  margin-left: 50px;
}
#classCertificate #cp211_print_btn,
#classCertificate #cp211_down_btn {
  position: absolute;
  /*        bottom: 30px;
        left: 55%;*/
  padding: 7px 10px;
  background-color: #5e9f08;
  /*background-color: #eb3750;*/
  border: 1px solid #f1f1f1;
}
#classCertificate #cp211_print_btn {
  top: -33px;
  right: -30%;
  color: #fff;
  border-radius: 13px 13px 0px 0px;
}
#classCertificate #cp211_print_btn:hover {
  background-color: #ffffff;
  color: #333;
}
#classCertificate .cp211_schoolname_input {
  top: 210px;
  left: 147px;
  width: 140px;
  border-bottom: 1px solid #cfcfcf;
  background-color: transparent;
}
#classCertificate .cp211_name_input {
  top: 210px;
  left: 374px;
  width: 140px;
  background-color: transparent;
  /*border-bottom: 2px solid #cfcfcf;*/
}
#classCertificate .date_wrap {
  width: 300px;
  height: 40px;
  margin: 0 auto;
  top: 366px;
  left: 40%;
}
#classCertificate .date_wrap .cp211_date {
  left: 87px;
  font-size: 19px;
  font-weight: bold;
}
#classCertificate .date_wrap .cp211_month {
  left: 107px;
}
#classCertificate .date_wrap .cp211_day {
  left: 141px;
}
#classCertificate #popup-close-cer {
  top: -33px;
  right: -40%;
  padding: 5px 10px 5px 9px;
  background-color: #8aab29;
  /*background-color: #fc9691;*/
  border: 1px solid #f1f1f1;
  border-radius: 13px 13px 0px 0px !important;
}
#classCertificate #popup-close-cer i {
  font-size: 25px;
  color: #fff;
}
#classCertificate #popup-close-cer:hover {
  background-color: #fff;
}
#classCertificate #popup-close-cer:hover i {
  color: #333;
}
#classCertificate span {
  position: absolute;
  top: 0;
  cursor: pointer;
}
.cp211_schoolname_input::placeholder {
  color: #cfcfcf;
}
.cp211_name_input::placeholder {
  color: #cfcfcf;
}