@charset "UTF-8";

/* layout */
/* layout max-width: 1200px; */
header>div,
footer .footer_wrap,
section.contents {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* footer style settings and Bottom fixation */
html, body, .wrap {
  height: 100%;
}

.wrap {
  display: flex;
  flex-direction: column;
}

article {
  flex: auto;
  padding-bottom: 56px;
}

footer {
  /* Fix footer to bottom */
  margin-top: auto;
}

/* header */
header {
  width: 100%;
  margin: 0 auto;
  /* to show shadow under the header */
  position: relative;
  box-shadow: 0 8px 8px -8px #00000050;
}

header .h_box1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 135px;
  border-bottom: 2px solid #fbfbfb;
}

header .h_box1 .logo {
  align-self: center;
}

header .h_box1 .logo a {
  width: 158px;
  height: 77px;
}

header .h_box1 ul.unit {
  align-self: flex-end;
  display: flex;
  grid-column-gap: 16px;
  margin: 5px 0 10px;
}

header .h_box1 ul.unit li {
  font-size: 16px;
}

/* footer */
footer {
  width: 100%;
}

footer .footer_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column-gap: 60px;
  margin: 30px auto;
}

footer .footer_wrap .logo {
  width: 158px;
  height: 77px;
}

footer .footer_wrap p {
  font-size: 16px;
  font-weight: 300;
  line-height: 30px;
}

/* login */
section.login button.btn {
  margin-bottom: 10px;
}

section.login a.btn {
  border-radius: 5px;
  font-size: 18px;
  text-align: center;
  background-color: #ebf4f7;
  margin-bottom: 20px;
  color: #3abff1;
}

section.login a.btn+div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

section.login a.btn+div label,
section.login a.btn+div a {
  font-size: 16px;
  color: #818182;
  width: auto;
}

section.login a.btn+div a:hover {
  text-decoration: underline;
}

/* reset password */
section.reset_password .content_wrap p {
  margin: 50px 0 20px;
}

section.reset_password button.btn,
section.reset_password a.btn {
  margin-top: 50px;
}

/* reset password send */
section.reset_password .content_wrap i,
section.join .content_wrap>i {
  display: block;
  font-size: 100px;
  text-align: center;
  margin: 60px 0 10px;
}

section.reset_password .content_wrap i+p,
section.join .content_wrap i+p {
  margin: 0 0 70px;
  text-align: center;
}

section.reset_password .content_wrap p b,
section.join .content_wrap p b,
section.new_password .content_wrap p b {
  font-weight: 850;
}

section.new_password .content_wrap form input+ins,
section.join .content_wrap form input+ins,
section.my_page.contents input+ins {
  text-decoration: none;
  display: block;
  margin-left: 6px;
  margin-bottom: 15px;
  color: red;
  font-size: 16px;
}

section.new_password .content_wrap form input+ins *,
section.join .content_wrap form input+ins *,
section.my_page.contents input+ins * {
  color: inherit;
}

section.new_password .content_wrap form input+ins span,
section.join .content_wrap form input+ins span,
section.my_page.contents input+ins span {
  margin-right: 10px;
}

section.new_password .content_wrap form input+ins i,
section.join .content_wrap form input+ins i,
section.my_page.contents input+ins span i {
  font-size: 20px;
  vertical-align: bottom;
  margin-right: 2px;
}

section.new_password .content_wrap form input+ins i.ph-check-circle,
section.join .content_wrap form input+ins i.ph-check-circle,
section.my_page.contents input+ins span i.ph-check-circle {
  display: none;
}

section.new_password .content_wrap form input+ins span.act,
section.join .content_wrap form input+ins span.act,
section.my_page.contents input+ins span.act {
  color: limegreen;
}

section.new_password .content_wrap p,
section.join .content_wrap p,
section.my_page .content_wrap p {
  text-align: center;
  margin: 70px 0;
}

/* join us */
section.join input[type='checkbox']+label {
  font-size: 18px;
  letter-spacing: -1px;
}

section.join input[type='checkbox']+label button {
  padding: 0;
  font-weight: 700;
  color: #5e5e5e;
  text-decoration: underline;
  background-color: inherit;
  letter-spacing: -1px;
  margin-bottom: 27px;
}

section.join input[type='checkbox'].act+label button {
  margin-bottom: 0;
}

section.join .content_wrap form+span {
  display: flex;
  justify-content: center;
  grid-column-gap: 10px;
  margin-top: 10px;
  font-size: 18px;
}

section.join .content_wrap form+span a {
  width: auto;
  font-weight: 800;
  color: #3abff1;
}

/* my page */
.my_page.contents label {
  font-size: 20px;
}

.my_page.contents input+span {
  color: red;
  font-size: 16px;
}

.my_page.contents.code_management table {
  width: 100%;
  text-align: center;
  font-size: 20px;
  border-top: 1px solid #c3e2eb;
  border-bottom: 1px solid #c3e2eb;
}

.my_page.contents.code_management table th,
.my_page.contents.code_management table td {
  padding: 10px 0;
}

.my_page.contents.code_management table th {
  background-color: #ebf4f7;
}

.my_page.contents.code_management table th:not(:last-of-type) {
  border-right: 1px solid #c3e2eb;
}

.my_page.contents.code_management table td {
  border-top: 1px solid #c3e2eb;
}

.my_page.contents.code_management table td:not(:last-of-type) {
  border-right: 1px solid #c3e2eb;
}

.my_page.contents.code_management table .btn {
  padding: 6px 0;
  width: calc(100% - 20px)
}

.my_page.contents.code_management table .btn.act {
  border: 1px solid #5e5e5e;
  background-color: #fff;
  color: #5e5e5e;
}

.my_page.contents.setting {
  display: grid;
  grid-template: repeat(11, auto) / 2fr 2fr 1fr;
  grid-column-gap: 20px;
}

.my_page.contents.setting p {
  grid-column: 3 span;
  width: 100%;
}

.my_page.contents.setting label {
  margin: 35px 0 10px 2px;
}

.my_page.contents.setting label:first-of-type {
  margin-top: 0;
}

.my_page.contents.setting label,
.my_page.contents.setting input {
  grid-column: 3 span;
}

.my_page.contents.setting input,
.my_page.contents.setting input.act {
  width: 40%;
  margin-bottom: 0;
}

.my_page.contents.setting input+span {
  display: block;
  opacity: 0;
  width: 100%;
}

.my_page.contents.setting input.act+span {
  opacity: 1;
}

.my_page.contents.setting>span:first-of-type {
  grid-column: 3 span;
}

.my_page.contents.setting label:nth-of-type(3) {
  grid-area: 7/1/8/2;
}

.my_page.contents.setting input:nth-of-type(3) {
  grid-area: 8/1/9/2;
  width: 100%;
}

.my_page.contents.setting label:nth-of-type(4) {
  grid-area: 7/2/8/4;
}

.my_page.contents.setting input:nth-of-type(4) {
  grid-area: 8/2/9/3;
  width: 100%;
}

.my_page.contents.setting button {
  grid-area: 8/3/9/4;
  padding: 0;
}

.my_page.contents.setting span, .my_page.contents.setting ins {
  margin: 5px 0;
}

.my_page.contents.setting a.btn {
  width: 135px;
  padding: 6px 0;
}

.my_page.contents.setting.delete {
  display: flex;
  flex-wrap: wrap;
}

.my_page.contents.setting.delete p {
  width: 100%;
}

.my_page.contents.setting.delete p:not(.subheading) {
  font-size: 20px;
  margin-bottom: 10px;
}

.my_page.contents.setting.delete input+span {
  margin-bottom: 35px;
}

.my_page.contents.setting.delete button {
  width: calc(25% - 10px);
}

.my_page.contents.setting.delete a.btn {
  width: calc(15% - 10px);
  padding: 6px 0;
}

/* main banner */
.banner {
  position: relative;
  height: 600px;
  background: radial-gradient(#feae00 50%, #ffa000);
  overflow: hidden;
}

.banner>img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%);
  height: 500%;
  opacity: 0.5;
}

.banner>div {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column-gap: 100px;
  height: 100%;
  box-sizing: border-box;
}

.banner>div>img {
  height: 75%;
}

.banner>div>div h1 {
  font-size: 60px;
  font-weight: 800;
  color: #fff;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
  white-space: nowrap;
}

.banner>div>div p {
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
  margin: 30px 0 60px;
  line-height: 1.5;
}

.banner>div>div a, .btn_player {
  display: inline;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  padding: 10px 30px;
  background-color: #e50012;
  border-radius: 29px;
}

.btn_player {
  position: fixed;
  top: 170px;
  right: 30px;
  width: auto;
  height: auto;
  background-color: #0075ff;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
  z-index: 100;
}

/* variety Contents */
.varietyContents .title, .heroFriend .title {
  flex-direction: column;
  height: 150px;
}

.varietyContents .title h2 b, .heroFriend .title h2 b {
  color: #ffbe28;
}

.varietyContents>div:nth-child(2) {
  height: 620px;
  background: #fff5be url(/public/resource/images/varietyContents.png) center 52px no-repeat;
  background-repeat: no-repeat;
  background-position: center 52px;
  display: flex;
  justify-content: center;
}

.varietyContents>div:nth-child(2) p {
  width: 720px;
  height: 100px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 487px;
}

.varietyContents .about_book {
  width: 100%;
  height: 355px;
  background-color: #fff5be;
}

.varietyContents .about_book>div {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  padding: 36px 0;
  box-sizing: border-box;
}

.varietyContents .about_book h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
}

.varietyContents .about_book ul.data_list {
  display: flex;
  justify-content: space-between;
}

.varietyContents .about_book ul.data .img {
  width: 181px;
  height: 181px;
  border-radius: 20px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px #00000010;
}

.varietyContents .about_book ul.data .img1 {
  background-image: url(/public/resource/images/about_book1.png);
}

.varietyContents .about_book ul.data .img2 {
  background-image: url(/public/resource/images/about_book2.png);
}

.varietyContents .about_book ul.data .img3 {
  background-image: url(/public/resource/images/about_book3.png);
}

.varietyContents .about_book ul.data .img4 {
  background-image: url(/public/resource/images/about_book4.png);
}

.varietyContents .about_book ul.data .img5 {
  background-image: url(/public/resource/images/about_book5.png);
}

.varietyContents .about_book ul.data li:nth-child(2) {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* textbook preview */
.preview .title, .curriculum_info .title {
  height: 100px;
}

.book_preview .title {
  background-color: #fa776d;
}

.book_preview .title+div {
  position: relative;
  height: 706px;
  background-color: #f86157;
}

.book_preview .title+div ul.tab {
  display: flex;
  justify-content: center;
  grid-column-gap: 4px;
}

.book_preview .title+div ul.tab li {
  width: 132px;
  height: 38px;
  border-radius: 0 0 20px 20px;
  background-color: #fff;
  box-shadow: 0 5px 5px 2px #00000020;
  font-size: 18px;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
}

.book_preview .title+div ul.tab li.act {
  background-color: #3ac0f2;
  font-weight: 600;
  color: #fff;
  transition: background-color, color 0.8s;
}

/* preview slide */
.book_preview .slide_wrap2 {
  height: 607px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 99px;
  opacity: 0;
  transition: 0.5s;
  display: flex;
  justify-content: center;
  grid-column-gap: 65px;
}

.book_preview .slide_wrap2.act {
  z-index: 100;
  opacity: 1
}

.book_preview .slide_wrap2 ul {
  width: 778px;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.book_preview .slide_wrap2 ul li {
  position: absolute;
  width: 778px;
  left: 100%;
}

.book_preview .slide_wrap2 ul li:nth-child(1) {
  left: 0;
}

.book_preview .slide_wrap2 ul span {
  display: block;
  width: 100%;
  height: 516px;
  background-size: cover;
}

.book_preview .slide_wrap2 ul p {
  margin-top: 17px;
  display: flex;
  justify-content: space-between;
}

.book_preview .slide_wrap2 ul .white {
  font-size: 16px;
  font-weight: 400;
}

/* preview slide image */
.book_preview .slide_student_book ul span.img1 {
  background-image: url(/public/resource/images/ph1_sb1.png);
}

.book_preview .slide_student_book ul span.img2 {
  background-image: url(/public/resource/images/ph1_sb2.png);
}

.book_preview .slide_student_book ul span.img3 {
  background-image: url(/public/resource/images/ph1_sb3.png);
}

.book_preview .slide_workbook ul span.img1 {
  background-image: url(/public/resource/images/ph1_wb1.png);
}

.book_preview .slide_workbook ul span.img2 {
  background-image: url(/public/resource/images/ph1_wb2.png);
}

.book_preview .slide_readers ul span.img1 {
  background-image: url(/public/resource/images/ph13_rd.png);
}

.book_preview .slide_readers ul span.img2 {
  background-image: url(/public/resource/images/ph14_rd.png);
}

.book_preview .slide_readers ul span.img3 {
  background-image: url(/public/resource/images/ph17_rd.png);
}

/* preview slide btn */
.book_preview .slide_wrap2>div {
  display: flex;
  align-items: center;
  height: 516px;
}

.book_preview .slide_wrap2>div button {
  display: flex;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background-color: #3ac0f2;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 5px 2px #00000020;
}

.book_preview .slide_wrap2>div button:active {
  box-shadow: 0 3px 2px 2px #00000020;
}

/* multimedia preview */
.multi_preview .title {
  background-color: #3ac0f2;
}

.multi_preview .title+div {
  position: relative;
  background-color: #28aded;
  padding: 60px 0;
  text-align: center;
}

.multi_preview .title+div h2 {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -1px;
}

.multi_preview .title+div>p {
  font-size: 40px;
  line-height: 1.5;
  margin: 60px 0 30px;
}

.multi_preview .title+div>p b {
  color: #fee600;
  font-weight: inherit;
}

.multi_preview .title+div>p small {
  font-size: 22px;
}

.multi_preview .img_wrap {
  text-align: center;
}

.multi_preview img {
  vertical-align: middle;
}

.multi_preview .img_wrap img:first-child {
  max-width: 933px;
  width: 54.882353vw;
}

.multi_preview .img_wrap img:nth-child(2) {
  max-width: 676px;
  width: 39.764706vw;
}

.multi_preview .title+div>img {
  max-width: 778px;
  width: 45.764706vw;
}

.multi_preview .step_wrap {
  margin: 30px 0 50px;
}

.multi_preview .step_wrap .step1, .multi_preview .step_wrap .step2 {
  position: relative;
  width: 480px;
  height: 218px;
  box-sizing: border-box;
  padding: 75px 28px 0;
}

.multi_preview .title+div .spr_sub.ribbon {
  position: absolute;
  top: 18px;
  left: -13px;
}

.multi_preview .title+div .spr_sub.ribbon h2 {
  width: 100%;
  height: 38px;
  font-weight: 900;
  font-size: 25px;
  text-shadow: 0 0 6px #ff860080;
}

.multi_preview .step_wrap .step1 {
  border-radius: 20px 0 0 20px;
  box-shadow: -20px 0 8px -8px #00000010 inset;
}

.multi_preview .step_wrap .step2 {
  border-radius: 0 20px 20px 0;
}

.multi_preview .step_wrap .step1 p, .multi_preview .step_wrap .step2 p {
  font-size: 22px;
}

.multi_preview .step_wrap .step1 p b, .multi_preview .step_wrap .step2 p b {
  color: #ffa000;
}

.multi_preview .step_wrap .step1 div {
  background-image: url(/public/resource/images/step1_img.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 339px;
  height: 61px;
  margin: 6px auto 0;
}

.multi_preview .step_wrap .step2 div {
  background-image: url(/public/resource/images/step2_img.png);
  width: 327px;
  height: 55px;
  margin: 1px auto 0;
}

.multi_preview .step_wrap .step1 em, .multi_preview .step_wrap .step2 em {
  position: absolute;
  left: 0;
  bottom: 25px;
  width: 100%;
  font-size: 14px;
  font-style: normal;
  text-align: center;
}

/* curriculum info */
.curriculum_info .title {
  background-color: #eee;
}

.curriculum_info .title+div {
  background-color: #f5f5f5;
  padding: 42px 0;
}

.curriculum_info ul {
  width: 801px;
  height: 497px;
  margin: 0 auto;
  position: relative;
}

.curriculum_info ul .book {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  padding-top: 40px;
}

.curriculum_info ul .book1 {
  z-index: 10;
}

/* table tap */
.curriculum_info ul>a {
  box-sizing: border-box;
  padding: 10px 60px 0;
  font-weight: 800;
  font-size: 17px;
  position: absolute;
  z-index: 100;
}

.curriculum_info ul .table_tap1 {
  top: 0;
  left: 135px;
}

.curriculum_info ul .table_tap2 {
  top: 0;
  left: 313px;
}

.curriculum_info .table_tap3 {
  top: 0;
  left: 490px;
}

/* table */
.curriculum_info .book div {
  width: 100%;
  height: 456px;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px 0;
  box-shadow: 0 0 8px #00000010;
}

.curriculum_info .book table {
  width: 100%;
  text-align: center;
}

/* thead */
.curriculum_info .book thead tr {
  height: 31px;
  font-size: 14px;
}

.curriculum_info .book thead th {
  font-weight: 900;
}

.curriculum_info .book thead th:nth-child(1), .curriculum_info .book thead th:nth-child(4) {
  width: 241px;
}

.curriculum_info .book thead th:nth-child(2), .curriculum_info .book thead th:nth-child(3) {
  width: 161px;
}

/* tbody */
.curriculum_info .book tbody td {
  border-left: 1px solid #e5e5e5;
  height: 31px;
  font-size: 14px;
  border-bottom: 1px solid #e5e5e5;
}

.curriculum_info .book tbody tr:nth-child(1) td:nth-child(1) {
  border-left: none;
  height: 361px;
}

.curriculum_info .book tbody tr:nth-child(1) span.bg_blue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 26px;
  font-size: 38px;
  margin: 0 auto;
}

.curriculum_info .book tbody tr:nth-child(1) td:nth-child(1) p {
  font-weight: 900;
  margin-top: 22px;
  font-size: 17px;
}

.curriculum_info .book tbody .readers {
  font-style: 14px;
  font-weight: 400;
  line-height: 22px;
}

.curriculum_info .book tbody .readers span {
  font-size: 17px;
  font-weight: 900;
}

/* hero friends */
.heroFriend .title+div {
  height: 676px;
  background-image: url(/public/resource/images/bg_heroFriend.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

.heroFriend .title+div ul {
  width: 65%;
  margin: 0 auto;
  height: 88.5%;
  position: relative;
  max-width: 1000px;
}

.heroFriend .title+div ul li p {
  font-size: 22px;
  line-height: 33px;
  padding: 23px 25px;
  border-radius: 15px;
  position: absolute;
  top: 150px;
  display: none;
}

.heroFriend .title+div ul li p b {
  font-weight: 900;
}

.heroFriend .juppy p b {
  color: #fa776d;
}

.heroFriend .willy p b {
  color: #2caa6f;
}

.heroFriend .brony p b {
  color: #2d9fd1;
}

.spr_sub.balloonTip {
  position: absolute;
  bottom: -21px;
  left: 50%;
  margin-left: -11px;
}

.heroFriend .juppy p {
  left: -5%;
}

.heroFriend .willy p {
  left: 25%;
}

.heroFriend .brony p {
  right: -12%;
}

.heroFriend .title+div ul li a {
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  transition: 0.5s ease;
}

.heroFriend .title+div ul li a:hover {
  transform: scale(1.15);
}

.heroFriend .title+div ul li svg {
  position: absolute;
  bottom: -1.3%;
  width: 130px;
  height: 20px;
}

.heroFriend .juppy a {
  background-image: url(/public/resource/images/juppy_gray.png);
  width: 193px;
  height: 275px;
  left: 0%;
}

.heroFriend .willy a {
  background-image: url(/public/resource/images/willy_gray.png);
  width: 179px;
  height: 249px;
  left: 50%;
  margin-left: -89px;
}

.heroFriend .brony a {
  background-image: url(/public/resource/images/brony_gray.png);
  width: 213px;
  height: 229px;
  right: 0;
}

.heroFriend .juppy svg {
  left: 0%;
  margin-left: 35px;
}

.heroFriend .willy svg {
  left: 50%;
  margin-left: -79px;
}

.heroFriend .brony svg {
  right: 0%;
  margin-right: 48px;
}

/* 히어로 캐릭터 버튼 활성화 */
.heroFriend .juppy.act a {
  background-image: url(/public/resource/images/juppy.png);
}

.heroFriend .willy.act a {
  background-image: url(/public/resource/images/willy.png);
}

.heroFriend .brony.act a {
  background-image: url(/public/resource/images/brony.png);
}

.heroFriend .juppy.act p {
  display: block;
}

.heroFriend .willy.act p {
  display: block;
}

.heroFriend .brony.act p {
  display: block;
}