* { box-sizing: border-box; }
.hide { display: none; }
.navbar-center { text-align: center; display: inline-block; float: unset; }
.float-left { float: left; }
.float-right { float: right; }
.copyright { clear: unset!important; }
.customer-center { margin-right: 60px; }
.navbar { margin-bottom: 0; }
.main { margin: 0; }
.content-2line { -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; word-break: break-all; }

.fixed-textarea { resize: none; }

.p-0 { padding: 0!important; }

.custom-row-15px { padding: 0 15px; }
.custom-col-5px { padding: 0 5px; }

table.table-vertical td, table.table-vertical th { vertical-align: middle!important; }

.scroll-top { position: fixed; bottom: 100px; right: 50px; z-index: 105; border-radius: 30px; border: 0; box-shadow: 3px 3px 7px 0px rgb(0 0 0 / 30%); }

.header-wrap { background: rgb(255, 255, 255); border-bottom: 1px solid rgb(237, 237, 237); }
.header-wrap .container { display: flex; align-items: center; justify-content: space-between; }
.header-wrap .container .bookmall { display: flex; flex: none; align-items: center; padding: 10px 0; margin-left: -30px; text-decoration: none;}
.header-wrap .container .bookmall > p { margin: 0; padding-left: 8px; color: rgb(162, 162, 162); }
.header-wrap .container .bookmall:hover > p { color: rgb(0, 0, 0); }
.header-wrap .container .top-menu { display: flex; margin: 0; width: 100%; justify-content: right; }
.header-wrap .container .top-menu li > a { margin-left: 5px; color: rgb(162, 162, 162); text-decoration: none; padding: 0 10px; }
.header-wrap .container .top-menu li > a:hover { color: rgb(0, 0, 0); }
.header-wrap .container .top-menu li > .divider { display: inline-block; width: 1px; height: calc(100% - 6px); margin: 3px 0 3px 0; background: rgb(162, 162, 162); }
.header-wrap .container .top-menu li:last-child a{
  color:#000;
}
.header-wrap .container .top-menu li:last-child a:hover{
  color:#00a6e8;
  font-family: 'SCD4';
}


.navbar .container { display: flex; justify-content: space-between; }
.navbar .container .navbar-header { float: unset; display: flex; align-items: center; }
.navbar .container .navbar-header .navbar-brand { height: unset; }
.navbar .container .navbar-collapse.collapse { display: flex!important; align-items: center; width: 100%; justify-content: center; }

.slide-wrap { position: relative; padding-top: 28.125%; overflow: hidden; 
  border-bottom:1px solid #dddddd;
  border-top:1px solid #dddddd;
  box-sizing: border-box;
  }
.slide-wrap .slide-item { width: 100%; position: absolute; left: 0; top: 0; }
.slide-wrap .slide-item img { width: 100%; object-fit: contain; }
/*.slide-wrap .prev-btn { font-size: 30px; font-weight: bold; color: rgb(0 0 0 / 70%); position: absolute; left: 50px; top: 50%; transform: translateY(-50%); text-decoration: none; }
.slide-wrap .next-btn { font-size: 30px; font-weight: bold; color: rgb(0 0 0 / 70%); position: absolute; right: 50px; top: 50%; transform: translateY(-50%); text-decoration: none; }*/
.slide-wrap .prev-btn { width: 26px; height: 40px; position: absolute; left: 50px; top: 50%; transform: translateY(-50%); text-decoration: none; }
.slide-wrap .next-btn { width: 26px; height: 40px; position: absolute; right: 50px; top: 50%; transform: translateY(-50%); text-decoration: none; }
.slide-wrap .slide-controls { position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%); }
.slide-wrap .slide-controls .controls-wrap { display: flex; max-width: 400px; }
/*.slide-wrap .slide-controls .controls-wrap > * { float: left; }*/
.slide-wrap .slide-controls .controls-wrap .slide-number { height: 20px; text-decoration: none; margin: -3px 3px 0 3px; padding-top: 3px; color: rgb(0 0 0 / 70%); }
.slide-wrap .slide-controls .controls-wrap .slide-number:hover { border-bottom: 1px solid rgb(0, 0, 0 / 70%); color: rgb(0, 0, 0); font-weight: bolder; }
.slide-wrap .slide-controls .controls-wrap .slide-number.selected { border-bottom: 1px solid rgb(0 0 0 / 70%); color: rgb(0, 0, 0); font-weight: bolder; }
.slide-wrap .slide-controls .controls-wrap .slide-pos-wrap { width: 200px; height: 5px; background: white; overflow: hidden; margin: 7px 10px 0 10px; border-radius: 2px}
.slide-wrap .slide-controls .controls-wrap .slide-pos-wrap .slide-pos-item-wrap { height: 100%; position: relative; }
.slide-wrap .slide-controls .controls-wrap .slide-pos-wrap .slide-pos-item-wrap .slide-pos-item { position: absolute; left: 0; width: 100%; height: 100%; background: rgb(228, 0, 45); }
/*.slide-wrap .slide-controls .controls-wrap .slide-btn { border: 1px solid rgb(0 0 0 / 70%); width: 20px; height: 20px; text-align: center; line-height: 20px; color: rgb(0 0 0 / 70%); margin: 0 2px; }*/
.slide-wrap .slide-controls .controls-wrap .slide-btn { border: 1px solid rgb(0 0 0 / 70%); width: 20px; height: 20px; text-align: center; margin: 0 2px; padding-top: 3px; line-height: 10px; flex: none; }
.slide-wrap .slide-controls .controls-wrap .slide-btn img { width: 50%; }

.mobile-slide-wrap { position: relative; padding-top: 100%; width: 100%; overflow: hidden; 
  border-bottom:1px solid #dddddd;
  border-top:1px solid #dddddd;
  box-sizing: border-box;
  }
.mobile-slide-wrap .slide-item { width: 100%; position: absolute; left: 0; top: 0; }
.mobile-slide-wrap .slide-item img { width: 100%; object-fit: contain; }
/*.slide-wrap .prev-btn { font-size: 30px; font-weight: bold; color: rgb(0 0 0 / 70%); position: absolute; left: 50px; top: 50%; transform: translateY(-50%); text-decoration: none; }
.slide-wrap .next-btn { font-size: 30px; font-weight: bold; color: rgb(0 0 0 / 70%); position: absolute; right: 50px; top: 50%; transform: translateY(-50%); text-decoration: none; }*/
.mobile-slide-wrap .prev-btn { width: 26px; height: 40px; position: absolute; left: 50px; top: 50%; transform: translateY(-50%); text-decoration: none; }
.mobile-slide-wrap .next-btn { width: 26px; height: 40px; position: absolute; right: 50px; top: 50%; transform: translateY(-50%); text-decoration: none; }
.mobile-slide-wrap .slide-controls { position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%); }
.mobile-slide-wrap .slide-controls .controls-wrap { display: flex; max-width: 300px; }
/*.mobile-slide-wrap .slide-controls .controls-wrap > * { float: left; }*/
.mobile-slide-wrap .slide-controls .controls-wrap .slide-number { height: 20px; text-decoration: none; margin: -3px 3px 0 3px; padding-top: 3px; color: rgb(0 0 0 / 70%); }
.mobile-slide-wrap .slide-controls .controls-wrap .slide-number:hover { border-bottom: 1px solid rgb(0, 0, 0 / 70%); color: rgb(0, 0, 0); font-weight: bolder; }
.mobile-slide-wrap .slide-controls .controls-wrap .slide-number.selected { border-bottom: 1px solid rgb(0 0 0 / 70%); color: rgb(0, 0, 0); font-weight: bolder; }
.mobile-slide-wrap .slide-controls .controls-wrap .slide-pos-wrap { width: 200px; height: 5px; background: white; overflow: hidden; margin: 7px 10px 0 10px; border-radius: 2px}
.mobile-slide-wrap .slide-controls .controls-wrap .slide-pos-wrap .slide-pos-item-wrap { height: 100%; position: relative; }
.mobile-slide-wrap .slide-controls .controls-wrap .slide-pos-wrap .slide-pos-item-wrap .slide-pos-item { position: absolute; left: 0; width: 100%; height: 100%; background: rgb(228, 0, 45); }
/*.slide-wrap .slide-controls .controls-wrap .slide-btn { border: 1px solid rgb(0 0 0 / 70%); width: 20px; height: 20px; text-align: center; line-height: 20px; color: rgb(0 0 0 / 70%); margin: 0 2px; }*/
.mobile-slide-wrap .slide-controls .controls-wrap .slide-btn { border: 1px solid rgb(0 0 0 / 70%); width: 20px; height: 20px; text-align: center; margin: 0 2px; padding-top: 3px; line-height: 10px; flex: none; }
.mobile-slide-wrap .slide-controls .controls-wrap .slide-btn img { width: 50%; }

.thumbnail-menu-wrap { text-align: center; display: flex; justify-content: center; border-bottom: 2px solid rgb(234, 234, 234); }
.thumbnail-menu-wrap .thumbnail-menu { width: calc(20% - 2px); display: block; }
.thumbnail-menu-wrap .thumbnail-menu img { width: 100%; }
.thumbnail-menu-wrap .divider { display: inline-block; width: 2px; margin: 30px 0 20px 0; background: rgb(244, 244, 244); }

.gallery-wrap .revenge-wrap{
  border-bottom:1px solid #dddddd;
  box-sizing:border-box;
  }
.gallery-wrap .revenge-wrap .revenge-title { display: flex; justify-content: space-between; align-items: center; }
.gallery-wrap .revenge-wrap .revenge-title > * { margin: 0; padding: 0; border-top: 2px solid rgb(61, 187, 238); border-bottom: 2px solid rgb(194, 194, 194); height: 34px; 
 /* line-height: 34px; */
 line-height: 32px;
 }
.gallery-wrap .revenge-wrap .revenge-title > .title { width: calc(100% - 30px); font-size: 14px; 
  font-family: 'SCD4';
}

.gallery-wrap .revenge-wrap .revenge-title > .more { background: rgb(186, 186, 186); color: rgb(255, 255, 255); font-size: 20px; width: 30px; text-align: center; font-weight: bolder; text-decoration: none; }
.gallery-wrap .revenge-wrap .revenge-title > .more:hover { background: rgb(61, 187, 238); }

.gallery-wrap .revenge-wrap .revenge-body{
  padding:12.5px 0px;
  }
.gallery-wrap .revenge-wrap .revenge-body .item { display: flex; 
  /* padding: 10px; */
  padding:0;
  margin:10px 0;
  align-items: center; cursor: pointer; text-decoration: none; }
.gallery-wrap .revenge-wrap .revenge-body .item > * {  }
.gallery-wrap .revenge-wrap .revenge-body .item > .thumbnail { width: 140px; height: 90px; margin: 0; padding: 0; border: 1px solid rgb(171, 169, 167);  }
.gallery-wrap .revenge-wrap .revenge-body .item > .thumbnail > img { width: 100%; height: 100%; object-fit: cover; }
.gallery-wrap .revenge-wrap .revenge-body .item > .info { width: calc(100% - 140px); 
  /*padding-left: 20px; */
  padding-left: 15px;
  font-size: 12px; line-height: unset;
  }
.gallery-wrap .revenge-wrap .revenge-body .item > .info > p { margin: 0 0 5px 0; }
.gallery-wrap .revenge-wrap .revenge-body .item > .info > .gallery-title { display: flex; }
.gallery-wrap .revenge-wrap .revenge-body .item > .info > .gallery-title .title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-wrap .revenge-wrap .revenge-body .item > .info > .gallery-title .comment-wrap { color: rgb(56, 182, 236); padding-left: 5px; }
.gallery-wrap .revenge-wrap .revenge-body .item > .info > .gallery-info { display: flex; 
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.gallery-wrap .revenge-wrap .revenge-body .item > .info > .gallery-info > span { color: rgb(56, 182, 236); display: inline-block; }
.gallery-wrap .revenge-wrap .revenge-body .item > .info > .gallery-info > span:first-child { width: 100%; }
.gallery-wrap .revenge-wrap .revenge-body .item > .info > .gallery-info > span:not(:first-child) { margin-left: 10px; flex: none; }
.gallery-wrap .revenge-wrap .revenge-body .item > .info > .gallery-info > span:last-child { margin-right: 10px; }
/*.gallery-wrap .revenge-wrap .revenge-body .item:hover { box-shadow: 3px 3px 6px 0px rgb(0 0 0 / 20%); }*/
.gallery-wrap .revenge-wrap .revenge-body .item:hover > .thumbnail { border: 1px solid rgb(113, 115, 115);  }
.gallery-wrap .revenge-wrap .revenge-body .item:hover > .info > p:not(.gallery-title) { text-decoration: none; }
.gallery-wrap .revenge-wrap .revenge-body .item:hover > .info > .gallery-title .title-text  { text-decoration: underline; font-weight: bold; }
.gallery-wrap .revenge-wrap .revenge-body .empty { padding: 7.23px 0; }



.gallery-wrap .notice-wrap .notice-body {
  border-bottom:1px solid #c2c2c2;
  /* margin:28px 0 34px 0; */
  padding:36px 0 37px 0;
  }
.gallery-wrap .notice-wrap .notice-body .noict-slide { 
  /*margin: 0 30px 0 30px;*/
  /* margin: 20px 10px 25px 0px; */
  }
.gallery-wrap .notice-wrap .notice-body .notice-slide-wrap { position: relative; overflow: hidden; padding-top: 50%; border-radius: 10px; }
.gallery-wrap .notice-wrap .notice-body .notice-slide-wrap .notice-slide-item { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.gallery-wrap .notice-wrap .notice-body .notice-slide-wrap .notice-slide-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-wrap .notice-wrap .notice-body .notice-slide-wrap .notice-slide-controls { position: absolute; left: 25px; top: 15px; z-index: 102; }
.gallery-wrap .notice-wrap .notice-body .notice-slide-wrap .notice-slide-controls .notice-slide-pos { float: left; margin-right: 3px; width: 12px; height: 12px; background: rgba(255, 255, 255, 0.3); border-radius: 6px; }
.gallery-wrap .notice-wrap .notice-body .notice-slide-wrap .notice-slide-controls .notice-slide-pos.selected { width: 12px; height: 12px; background: rgb(255, 255, 255); border-radius: 6px; }
.gallery-wrap .notice-wrap .notice-body .notice-slide-wrap .more { position: absolute; right: 25px; top: 10px; z-index: 102; text-decoration: none; color: white; font-size: 20px; font-weight: bold; padding: 0 5px; }
.gallery-wrap .notice-wrap .notice-body .notice-slide-wrap .more:hover { transform: scale(1.3); transition-duration: 0.5s; }
.gallery-wrap .notice-wrap .notice-body .mall-slide {
  /*margin: 0 40px 0 -25px;*/
 margin: 0px 0px 0px -15px;
  }
.gallery-wrap .notice-wrap .notice-body .mall-slide-wrap { position: relative; overflow: hidden; padding-top: 100%; border-radius: 10px; }
.gallery-wrap .notice-wrap .notice-body .mall-slide-wrap .mall-slide-item { height: 100%; position: absolute; left: 0; top: 0; }
.gallery-wrap .notice-wrap .notice-body .mall-slide-wrap .mall-slide-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-wrap .notice-wrap .notice-body .mall-slide-wrap .mall-slide-controls { position: absolute; right: 25px; top: 15px; z-index: 102; }
.gallery-wrap .notice-wrap .notice-body .mall-slide-wrap .mall-slide-controls .mall-slide-pos { float: left; margin-right: 3px; width: 12px; height: 12px; background: rgba(255, 255, 255, 0.3); border-radius: 6px; }
.gallery-wrap .notice-wrap .notice-body .mall-slide-wrap .mall-slide-controls .mall-slide-pos.selected { width: 12px; height: 12px; background: rgb(255, 255, 255); border-radius: 6px; }





.gallery-wrap .community-wrap .community-title { display: flex; justify-content: space-between; align-items: center; }
.gallery-wrap .community-wrap .community-title > * { margin: 0; padding: 0; }
.gallery-wrap .community-wrap .community-title .community-title-wrap { width: calc(100% - 30px); overflow: hidden; }
.gallery-wrap .community-wrap .community-title .community-title-wrap > div { width: 100%; border-top: 2px solid rgb(61, 187, 238); border-bottom: 2px solid rgb(194, 194, 194); height: 34px; }
.gallery-wrap .community-wrap .community-title .community-title-wrap ul { width: max-content; margin: 0; overflow: hidden; height: 34px; 
  font-family: 'SCD4';
}
.gallery-wrap .community-wrap .community-title .community-title-wrap ul li { height: 34px; line-height: 34px; 
/* font-size: 11px; 
margin: -2px 0 -2px 20px; */
font-size: 12.5px; 
margin: -2px 12px -2px 0px; 
float: left; padding: 0 5px; cursor: pointer; user-select: none; }
.gallery-wrap .community-wrap .community-title .community-title-wrap ul li.active { border-bottom: 2px solid rgb(240, 93, 60); color: rgb(240, 93, 60); }
.gallery-wrap .community-wrap .community-title > .more { height: 34px; line-height: 34px; border-top: 2px solid rgb(61, 187, 238); border-bottom: 2px solid rgb(194, 194, 194); background: rgb(186, 186, 186); color: rgb(255, 255, 255); font-size: 20px; width: 30px; text-align: center; font-weight: bolder; text-decoration: none; user-select: none; }
.gallery-wrap .community-wrap .community-title > .more:hover { background: rgb(61, 187, 238); }
.gallery-wrap .community-wrap .tab-content .tab-pane { /*max-height: 555px;*/ }
.gallery-wrap .community-wrap .tab-content .tab-pane table { 
  width: 100%; border-collapse: collapse; table-layout: fixed; 
  font-size:13px;
  }
.gallery-wrap .community-wrap .tab-content .tab-pane table.table { display: table; 
  border-bottom:1px solid #c2c2c2;
}
.gallery-wrap .community-wrap .tab-content .tab-pane table.mobile-table { display: none; }
.gallery-wrap .community-wrap .tab-content .tab-pane table tr { height: 3px; border-top: 1px dashed rgb(211, 211, 211); }
.gallery-wrap .community-wrap .tab-content .tab-pane table tr:first-child { border-top: unset; }
.gallery-wrap .community-wrap .tab-content .tab-pane table tr td { }


.gallery-wrap .community-wrap .tab-content .tab-pane table tr td .gallery-title-wrap { display: flex; 
  /* padding: 0 20px; */   
  padding: 0 12.5px; 
  margin: 0; text-decoration: none; }
.gallery-wrap .community-wrap .tab-content .tab-pane table tr td .gallery-title-wrap > * { line-height: unset; }
.gallery-wrap .community-wrap .tab-content .tab-pane table tr td .gallery-title-wrap .gallery-list-category { flex: none; color: rgb(83, 183, 236); }
.gallery-wrap .community-wrap .tab-content .tab-pane table tr td .gallery-title-wrap .comment-count { flex: none; color: rgb(0, 106, 192); }
.gallery-wrap .community-wrap .tab-content .tab-pane table tr td .gallery-title-wrap .gallery-title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0 5px;}
.text-center{
  text-overflow: ellipsis; 
  white-space: nowrap; 
  overflow: hidden;
  padding:8px 0;
  }


.gallery-wrap .community-wrap .tab-content .tab-pane table tr td .gallery-title-wrap.notice .gallery-list-category { flex: none; color: rgb(240, 93, 60); }
.gallery-wrap .community-wrap .tab-content .tab-pane table tr td .gallery-title-wrap.notice .gallery-title { font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.gallery-wrap .community-wrap .tab-content .tab-pane table tr.cursor-default:hover { cursor: default; }
.gallery-wrap .community-wrap .tab-content .tab-pane table tr:not(.cursor-default):hover { cursor: pointer; }
.gallery-wrap .community-wrap .tab-content .tab-pane table tr:not(.cursor-default):hover td .gallery-title-wrap .gallery-title { font-weight: bold; text-decoration: underline; }




.ad-wrap { padding: 0 10px 10px 10px; }
.ad-wrap img { width: 100%; }





.student-menu .menu-wrap { 
  text-decoration: none; color: black; display: block; border-radius: 15px; 
  /*padding: 5px 5px 10px 5px;*/
  padding: 10px 10px 20px 10px;
  /*background:#f9f9f9;*/
  }
.student-menu .menu-wrap .thumbnail-wrap { margin-bottom: 10px; }
.student-menu .menu-wrap .thumbnail-wrap img { border-radius: 15px; width: 100%; object-fit: cover; }
.student-menu .menu-wrap .tag-wrap { 
  display: flex; 
  /*margin: 0 0 15px 0;*/
  margin: 10px 0 15px 0;
  }
.student-menu .menu-wrap .tag-wrap li { 
  display: block; float: left;
  margin-left: 5px;
  font-family: 'SCD4';
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
.student-menu .menu-wrap .tag-wrap li > b { display: block; background: rgb(242, 242, 242); height: 30px; line-height: 30px; padding: 0 8px; border-radius: 4px; color: rgb(150, 148, 152); margin: 0; }
.student-menu .menu-wrap .text { 
  line-height: normal; font-size: 15.5px; margin: 0 5px; 
  font-family: 'SCD3';
  color:#4b4a4a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
.student-menu .menu-wrap:hover { background: rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 6px 0px rgb(0 0 0 / 20%); }
.student-menu .menu-wrap:hover .text{
  color:#231815;
  }



.progress-wrap {
  background: rgb(244, 244, 244);
  /*padding: 60px 10px;*/
  padding:55px 10px;
  text-align: center;
  }
.progress-wrap .progress-info {
  font-family: 'SCD2';
  font-size: 25px;
  padding: 0 10px;
  }
.progress-wrap .progress-info .effect { 
  font-family: 'SCD5';
  color: rgb(0, 172, 233);
  }
.progress-wrap .select-wrap { 
  font-family: 'SCD3';
  overflow: hidden; text-align: center; display: inline-block; padding: 0 20px;
  }
.progress-wrap .select-wrap > * { margin: 0px 10px 20px 10px; display: inline-block; }
.progress-wrap .select-wrap .grade-select { border: 1px solid rgb(223, 223, 223); background: rgb(255, 255, 255); padding: 0px 10px; border-radius: 4px; font-size: 15px; outline:none; cursor: pointer; height: 35px; line-height: 35px; }

.progress-wrap .select-wrap .subject-group { display: inline-flex }
.progress-wrap .select-wrap .subject-group > * { float: left; }
.progress-wrap .select-wrap .subject-group .subject {
  display: block;
  border: 1px solid rgb(223, 223, 223);
  background: rgb(255, 255, 255);
  padding: 0 8px;
  border-radius: 4px;
  font-size: 15px;
  text-decoration: none;
  margin: 0 2px;
  height: 35px;
  line-height: 33px; }
.progress-wrap .select-wrap .subject-group .subject:hover { background: rgb(0, 166, 232); color: rgb(255, 255, 255); }

.progress-wrap .select-wrap .book-select { 
  border: 1px solid rgb(223, 223, 223);
  background: rgb(255, 255, 255);
  padding: 0px 8px;
  width: 130px;
  border-radius: 4px;
  font-size: 15px;
  outline:none;
  cursor: pointer;
  height: 35px;
  line-height: 35px; }

.progress-wrap .select-wrap .semester-group { display: inline-flex }
.progress-wrap .select-wrap .semester-group > * { float: left; }
.progress-wrap .select-wrap .semester-group .semester { 
  display: block; 
  border: 1px solid rgb(223, 223, 223); 
  background: rgb(255, 255, 255); 
  padding: 0 8px;
  border-radius: 4px; 
  font-size: 15px; 
  text-decoration: none;
  margin: 0 2px; 
  height: 35px;
  line-height: 33px; }
.progress-wrap .select-wrap .semester-group .semester:hover { background: rgb(0, 166, 232); color: rgb(255, 255, 255); }

.progress-wrap .select-wrap .unit-select { 
  border: 1px solid rgb(223, 223, 223); 
  background: rgb(255, 255, 255); 
  padding: 0px 8px; 
  width: 260px;
  border-radius: 4px;
  font-size: 15px; 
  outline:none; 
  cursor: pointer; 
  height: 35px; 
  line-height: 35px; }
.progress-wrap .select-wrap .load-learning { background: rgb(0, 166, 232); color: rgb(255, 255, 255); padding: 0 8px; border-radius: 4px; font-size: 15px; text-decoration: none; height: 35px; line-height: 35px; }


.progress-wrap .progress-list { display: flex; flex-flow: column; align-items: center; }
.progress-wrap .progress-list .progress-list-wrap { display: flex; justify-content: center; width: 100%; height: 200px; }
.progress-wrap .progress-list .progress-list-wrap .progress-slide { transition: all .3s ease; overflow: hidden; position: relative; }
.progress-wrap .progress-list .progress-list-wrap .progress-slide:before { content: " "; position: absolute; z-index: 9; width: 220px; height: 100%; top: 0; left: 0; background: linear-gradient(to right, rgba(244, 244, 244, 1) 0%, rgba(244, 244, 244, 0) 100%); }
.progress-wrap .progress-list .progress-list-wrap .progress-slide:after { content: " "; position: absolute; z-index: 9; width: 220px; height: 100%; top: 0; right: 0; background: linear-gradient(to left, rgba(244, 244, 244, 1) 0%, rgba(244, 244, 244, 0) 100%); }
.progress-wrap .progress-list .progress-list-wrap .progress-slide .progress-slide-wrap { display: flex; height: 200px; /*width: calc(220px * 24);*/ }
.progress-wrap .progress-list .progress-list-wrap .progress-slide .progress-slide-wrap .progress-slide-item { flex: 1; padding: 0 10px; width: 220px; display: flex; justify-content: center; align-items: center; color: #343434; width: 220px; animation-duration: 25s; animation-timing-function: linear; animation-iteration-count: infinite; }
.progress-wrap .progress-list .progress-list-wrap .progress-slide .progress-slide-wrap .progress-slide-item > img { border: 1px solid rgb(217, 217, 217); }

.progress-wrap .progress-info2 {
  color: rgb(134, 134, 134);
  font-family: 'SCD3';
  font-size:14px;
  line-height:20px;
  }

.progress-wrap .move-progress { 
  border: 1px solid rgb(223, 223, 223); 
  background: rgb(255, 255, 255);
  /*padding: 8px 40px; */
  padding:8px 40px 11px 40px;
  border-radius: 4px; 
  font-size: 15px; 
  text-decoration: none;
  font-family: 'SCD4';
  }
.progress-wrap .move-progress:hover { background: rgb(0, 166, 232); color: rgb(255, 255, 255); }

.rankup-wrap { padding: 40px 0; }
.rankup-wrap .rank-table { width: 100%; table-layout: fixed; }
.rankup-wrap .rank-table th { 
  padding: 10px 0; font-size: 14px; text-align: center; font-weight: bold; border: 1px solid rgb(221, 221, 221); background: rgb(221, 221, 221);
  font-family: 'SCD3';
  } 
.rankup-wrap .rank-table td { font-size: 14px; text-align: center; font-weight: bold; border: 1px solid rgb(221, 221, 221); padding: 10px;
  font-family: 'SCD3';
  }
.rankup-wrap .rank-table td img { width: 100%; object-fit: contain; padding: 20px; max-width: 200px; }
.rankup-wrap .rank-table td p {
  font-family: 'SCD2'; 
  }
.rankup-wrap .rank-table td p .effect { color: rgb(0, 172, 233); 
  font-family: 'SCD3';
  }

.rankup-wrap .mobile-rank-table { width: 100%; table-layout: fixed; display: none;}
.rankup-wrap .mobile-rank-table th { padding: 10px 0; font-size: 14px; text-align: center; font-weight: bold; border: 1px solid rgb(221, 221, 221); background: rgb(221, 221, 221);
  font-family: 'SCD3';  } 
.rankup-wrap .mobile-rank-table td { font-size: 14px; text-align: center; font-weight: bold; border: 1px solid rgb(221, 221, 221); padding: 10px;
  font-family: 'SCD3';
  }
.rankup-wrap .mobile-rank-table td img { width: 100%; object-fit: contain; padding: 20px; max-width: 200px; }
.rankup-wrap .mobile-rank-table td p{
  font-family: 'SCD2';
  }
.rankup-wrap .mobile-rank-table td p .effect { color: rgb(0, 172, 233);
  font-family: 'SCD3';
  }

.side-wrap { position: fixed; transform: translateX(100%); width: 400px; max-width: 100%; height: 100vh; top: 0; right: 0; /*background: rgb(44, 44, 45);*/ background: rgb(255, 255, 255); z-index: 106; box-shadow: -10px 0px 20px 3px rgb(0 0 0 / 15%); overscroll-behavior: none; }
.side-wrap.slide-in { transform: translateX(100%); animation-name: slideIn; animation-duration: 0.7s; }
.side-wrap.slide-out { transform: translateX(0%); animation-name: slideOut; animation-duration: 0.7s; overflow-y: auto; overflow-x: hidden; }
/*.side-wrap > div { height: 50vh; }*/
.side-wrap .top { padding: 80px 30px 40px 30px; background: rgb(44, 44, 45); }
.side-wrap .top .close-btn { position: absolute; right: 20px; top: 30px; color: rgb(255, 255, 255); width: 50px; font-size: 50px; height: 50px; line-height: 50px; text-align: center; transform: rotate(45deg); text-decoration: none; }
.side-wrap .top .move-cpanel { position: absolute; left: 40px; top: 50px; color: rgb(255, 255, 255); text-decoration: none; }
.side-wrap .top .move-cpanel > a { color: rgb(255, 255, 255); text-decoration: none; margin-left: 10px; }
.side-wrap .top .badge-wrap { width: 40%; margin: 0 auto 20px auto; }
.side-wrap .top .badge-wrap img { width: 100%; }
.side-wrap .top .nickname { color: rgb(255, 255, 255); font-size: 20px; font-weight: bold; }
.side-wrap .top .user-info { width: calc(100% - 20px); margin: 0 10px 20px 10px; }
.side-wrap .top .user-info tr > td { color: rgb(255, 255, 255); }
.side-wrap .top .license-info { width: calc(100% - 20px); margin: 0 10px 40px 10px; }
.side-wrap .top .license-info .remain { text-align: right; color: rgb(255, 255, 255); }
.side-wrap .top .license-info .progress { height: 15px; }
.side-wrap .top .license-info .progress .progress-bar { background: rgb(255, 218, 0); }
.side-wrap .top .apply-study { width: 80%; display: block; text-align: center; background: rgb(120, 187, 230); padding: 12px; border-radius: 10px; color: rgb(255, 255, 255); text-decoration: none; margin: 0 auto 20px auto; }
.side-wrap .top .big-data { width: 80%; display: block; text-align: center; background: rgb(120, 187, 230); padding: 12px; border-radius: 10px; color: rgb(255, 255, 255); text-decoration: none; margin: 0 auto 20px auto; }
.side-wrap .top h5 { font-size: 16px; color: #fff; margin-bottom: 15px; font-weight: normal; letter-spacing: 2px; text-align: center; }
.side-wrap .top .text-wrap { position: relative; }
.side-wrap .top .text-wrap .id { margin-bottom: 5px; width: 100%; height: 40px; font-size: 16px; background: rgb(255, 255, 255); border-radius: 6px; padding: 6px 40px 6px 15px; border: 2px solid rgb(255, 255, 255); outline: none; }
.side-wrap .top .text-wrap .id + i { position: absolute; top: 10px; right: 15px; font-size: 20px; color: rgb(180 180 180); }
.side-wrap .top .text-wrap .id:focus { border: 2px solid rgb(72 129 236); }
.side-wrap .top .text-wrap .id:focus + i { color: rgb(72 129 236); }
.side-wrap .top .text-wrap .pw { margin-bottom: 5px; width: 100%; height: 40px; font-size: 16px; background: rgb(255, 255, 255); border-radius: 6px; padding: 6px 40px 6px 15px; border: 2px solid rgb(255, 255, 255); outline: none; }
.side-wrap .top .text-wrap .pw + i { position: absolute; top: 10px; right: 15px; font-size: 20px; color: rgb(180 180 180); }
.side-wrap .top .text-wrap .pw:focus { border: 2px solid rgb(72 129 236); }
.side-wrap .top .text-wrap .pw:focus + i { color: rgb(72 129 236); }
.side-wrap .top .login { background: #4881ec; display: inline-block; margin-bottom: 20px; text-align: center; width: 100%; font-size: 16px; height: 50px; line-height: 50px; color: #fff; text-decoration: none; border: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; cursor: pointer; }
.side-wrap .top .social-login li { margin-bottom: 15px; height: 40px; line-height: 40px; text-align: center; width: 100%; }
.side-wrap .top .social-login li a { width: 100%; height: 100%; display: block; border-radius: 6px; color: rgb(0, 0, 0); text-decoration: none; }
.side-wrap .top .social-login li a.kakao-login { background: rgb(253, 221, 0); }
.side-wrap .top .social-login li a.facebook-login { background: rgb(63, 103, 175); color: rgb(255, 255, 255); }
.side-wrap .top .social-login li a.naver-login { background: rgb(1, 199, 60); color: rgb(255, 255, 255); }
.side-wrap .top .register-wrap { display: flex; justify-content: space-between; }
.side-wrap .top .register-wrap > a { color: rgb(255, 255, 255); text-decoration: none; }
.side-wrap .top .social-register { display: flex; margin-bottom: 20px; }
.side-wrap .top .social-register li { width: 40px; height: 40px; margin-right: 10px; }
.side-wrap .top .social-register li a { display: block; width: 100%; height: 100%; margin-right: 10px; background: rgb(255, 255, 255); border-radius: 6px; }
.side-wrap .top .social-register li a.social-kakao { background: rgb(253, 221, 0); }
.side-wrap .top .social-register li a.naver-kakao { background: rgb(1, 199, 60); }
.side-wrap .top .social-register li a.facebook-kakao { background: rgb(63, 103, 175); }
.side-wrap .top .social-register li a.email-kakao { background: rgb(125, 132, 152); }
/*.side-wrap .top .id-wrap > input { border: none; outline: none; height: 100%; font-size: 16px; }*/
.side-wrap .bottom { background: rgb(255, 255, 255); width: 100%; /*height: 100vh;*/ border-radius: 40px 40px 0 0; padding: 40px 20px 0 20px; margin-top: -40px; margin-bottom: -40px; }
.side-wrap .bottom .sBtn {margin: 0 15px 10px;}
.side-wrap .bottom .sBtn ul {overflow: hidden;}
.side-wrap .bottom .sBtn ul li {float: left; width: 25%; padding: 5px 10px;}
.side-wrap .bottom .sBtn ul li a {text-align: center; display: block; color: rgb(0, 0, 0); text-decoration: none; }
.side-wrap .bottom .sBtn ul li span {display: inline-block; text-align: center; line-height: 62px; display: inline-block; width: 100%; height: 62.5px; background: #fbb59f; border-radius: 50%;}
.side-wrap .bottom .sBtn ul li span.sbtn1 {background-image: url('/assets/images/sBtn6.png'), linear-gradient(to right bottom, rgba(254,221,90), rgba(251,198,97)); background-position: 50%; background-repeat: no-repeat;}
.side-wrap .bottom .sBtn ul li span.sbtn3 {background-image: url('/assets/images/sBtn3.png'), linear-gradient(to right bottom, rgba(254,221,90), rgba(251,198,97)); background-position: 50%; background-repeat: no-repeat;}
.side-wrap .bottom .sBtn ul li span.sbtn4 {background-image: url('/assets/images/sBtn4.png'), linear-gradient(to right bottom, rgba(254,221,90), rgba(251,198,97)); background-position: 50%; background-repeat: no-repeat;}
.side-wrap .bottom .btnPage ul {overflow: hidden;}
.side-wrap .bottom .btnPage ul li {float: left; width: 50%; padding: 5px;}
.side-wrap .bottom .btnPage ul li a {display: block; background: #eeeeef; width: 100%; height: 90px; color: #666; text-decoration: none; text-align: left; font-size: 14px; border-radius: 15px; transition: all .3s; padding: 15px;}
.side-wrap .bottom .btnPage ul li:nth-child(1) a {background: url(/assets/images/link1_off.png) no-repeat 85% 85% #eeeeef;}
.side-wrap .bottom .btnPage ul li:nth-child(1) a:hover {background: url(/assets/images/link1_on.png) no-repeat 85% 85% #9c9d9f;}
.side-wrap .bottom .btnPage ul li:nth-child(2) a {background: url(/assets/images/link2_off.png) no-repeat 85% 85% #eeeeef;}
.side-wrap .bottom .btnPage ul li:nth-child(2) a:hover {background: url(/assets/images/link2_on.png) no-repeat 85% 85% #9c9d9f;}
.side-wrap .bottom .btnPage ul li a:hover {background: #9c9d9f; color: #fff;}
.side-wrap .bottom .side-btn { width: 100%; display: block; text-align: center; background: rgb(179, 179, 184); margin-bottom: 10px; padding: 10px; border-radius: 10px; color: rgb(255, 255, 255); text-decoration: none; }
.side-wrap .bottom .side-btn:hover { background: rgb(133, 133, 135); }
.side-wrap .bottom .side-btn:last-child { margin-bottom: 0px; }
.side-wrap .bottom .partnership-wrap { display: flex; justify-content: space-between; }
.side-wrap .bottom .partnership-wrap > a { color: rgb(0, 0, 0); text-decoration: none; }

footer { padding: 0; 
  font-family: 'SCD3';
  }
footer .menu-wrap { background: rgb(238, 238, 238); padding: 15px 0; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%); }
footer .menu-wrap .container { display: flex; align-items: center; justify-content: space-between; }
footer .menu-wrap .container .company { margin: 0; float: unset; width: 100%; display: flex; align-items: center; flex-wrap: wrap; }
footer .menu-wrap .container .company li { float: unset; }
footer .menu-wrap .container .company li a { color: rgb(162, 162, 162); text-decoration: none; line-height: unset; display: inline-block; }
footer .menu-wrap .container .company li a:hover { color: rgb(85, 85 , 85); }
footer .menu-wrap .container .company li a.partnership { display: inline-block; background: rgb(251, 223, 80); color: rgb(0, 0, 0); padding: 10px 15px; border-radius: 20px; }
footer .menu-wrap .container .company li a.inquery { display: inline-block; background: rgb(90 92 101); color: rgb(255, 255, 255); padding: 10px 15px; border-radius: 20px; }




footer .menu-wrap .container .social { margin: 0; display: flex; }
footer .menu-wrap .container .social li a { margin-left: 10px; }
footer .company-info { background: rgb(229, 229, 229); padding: 30px 0; }
footer .company-info .container { display: flex; align-items: center; }
footer .company-info .container .copyright { color: rgb(85, 85 , 85); width: 100%; }
footer .company-info .container .copyright .copy-title { font-size: 20px; margin: 0; }
footer .company-info .container .copyright .number { 
  font-size: 35px; margin: 0; margin: 5px 0;
  font-family: 'SCD5';
  }
footer .company-info .container .copyright .time { font-size: 15px; margin: 0; }
footer .company-info .container .copyright .holiday { font-size: 15px; margin: 0; }
footer .company-info .container .copyright .info { font-size: 15px; margin: 0 0 3px 0; }
footer .company-info .container .copyright .info:first-child { margin-top: 35px; }
footer .company-info .container .copyright .info:last-child { margin: 0; }
footer .company-info .container .copyright:first-child { flex: none; width: unset; }
footer .company-info .container .copyright:last-child { flex: none; width: unset; }

@keyframes slideIn {
	0% { transform: translateX(0%); }
	100% { transform: translateX(100%); }
}

@keyframes slideOut {
	0% { transform: translateX(100%); }
	100% { transform: translateX(0%); }
}

@keyframes translateinfinite {
	100% { transform: translateX(calc(-220px * 12));  }
}

@media (max-width: 1560px) {
	.header-wrap .container { padding: 0px; }
	.header-wrap .container .bookmall { margin-left: 0px; }
}

@media (max-width: 850px) {
	.customer-center { margin-right: 0px; }

	
	.navbar-default .navbar-nav > li > a { font-size: 15px; padding: 15px 20px; }

	.gallery-wrap .community-wrap .tab-content .tab-pane table.table { display: none; }
	.gallery-wrap .community-wrap .tab-content .tab-pane table.mobile-table { display: table; }
	.gallery-wrap .community-wrap .tab-content .tab-pane table.mobile-table td { padding: 8px; }

	.rankup-wrap .rank-table { display: none; }
	.rankup-wrap .mobile-rank-table { display: table; }

	footer .menu-wrap .container { display: block; }
	footer .menu-wrap .container .social { justify-content: end; margin-top: 20px; }
	footer .company-info .container { display: block; }
	footer .company-info .container .copyright { text-align: center; }
	footer .company-info .container .copyright:last-child { margin-top: 20px; }
}

@media (max-width: 767px) {
	.navbar-default .container .navbar-header:first-child { width: 100%; margin: 0; }
	.navbar-default .container .navbar-header:last-child { display: flex; flex: unset; margin: 0; }
	.navbar-default .container .navbar-header #btn_side { margin-right: 0; }
	.navbar-default .container .navbar-header .navbar-brand { margin: 0 auto; }

	#topmenu-navbar-collapse { display: none!important; }
}

@media (max-width: 455px) {
	.header-wrap .container { font-size: 12px; }
}

@media (max-width: 405px) {
	.header-wrap .container { font-size: 10px; }
}