/* 공통 */
.pc_none {
  display: none;
}
.pc_none2 {
  display: none;
}
.mo_block {
  display: none;
}

/* input checkbox 18*18 */
.check_box input[type="checkbox"] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}
.check_box label {
  position: relative;
  padding-left: 27px;
  font-size: 1rem;
  color: #1a1a1a;
  display: inline-block;
  vertical-align: middle;
  font-weight: 300;
  cursor: pointer;
}
.check_box input[type="checkbox"] + label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  background: #fff;
  box-sizing: border-box;
  vertical-align: middle;
}
.check_box input[type="checkbox"]:checked + label:before {
  color: #000;
  background: url("/resources/img/user/icon_inp_check.svg") center center no-repeat;
  background-size: 12px 8px;
}
.check_box input[type="checkbox"]:focus + label {
  outline: 1px dotted #999;
}
.check_box input[type="checkbox"]:checked + label:before {
  border: 1px solid #20bcae;
}

.check_box.check_box02 input[type="checkbox"] + label:before {
  width: 20px;
  height: 20px;
}
.check_box.check_box02 label {
  font-size: 1.25rem;
}
.check_box.check_box02 label.all_check_tit {
  color: #00a99a;
  font-weight: 400;
}

/* input radio */
.check_box input[type="radio"] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}
.check_box label {
  position: relative;
  padding-left: 27px;
  font-size: 1rem;
  color: #1a1a1a;
  display: inline-block;
  vertical-align: middle;
  font-weight: 300;
  cursor: pointer;
}
.check_box input[type="radio"]:focus + label {
  outline: 1px dotted #999;
}

.check input[type="checkbox"] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}
.check label {
  position: relative;
  padding-left: 27px;
  font-size: 1rem;
  color: #1a1a1a;
  display: inline-block;
  vertical-align: middle;
  font-weight: 300;
  cursor: pointer;
}
.check input[type="checkbox"] + label:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -9px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  background: #fff;
  box-sizing: border-box;
  vertical-align: middle;
  border-radius: 100%;
}
.check input[type="checkbox"]:checked + label:before {
  border: 1px solid #20bcae;
}
.check input[type="checkbox"]:checked + label:after {
  position: absolute;
  top: 50%;
  margin-top: -4px;
  left: 5px;
  content: "";
  width: 8px;
  height: 8px;
  background: #20bcae;
  border-radius: 100%;
}
.check input[type="checkbox"]:focus + label {
  outline: 1px dotted #999;
}

.check input[type="radio"] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}
.check label {
  position: relative;
  padding-left: 27px;
  font-size: 1rem;
  color: #1a1a1a;
  display: inline-block;
  vertical-align: middle;
  font-weight: 300;
  cursor: pointer;
}
.check input[type="radio"] + label:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -8px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  background: #fff;
  box-sizing: border-box;
  vertical-align: middle;
  border-radius: 100%;
}
.check input[type="radio"]:checked + label:before {
  border: 1px solid #20bcae;
}
.check input[type="radio"]:checked + label:after {
  position: absolute;
  top: 50%;
  margin-top: -3px;
  left: 5px;
  content: "";
  width: 8px;
  height: 8px;
  background: #20bcae;
  border-radius: 100%;
}
.check input[type="radio"]:focus + label {
  outline: 1px dotted #999;
}

.inp_la_check.check_top {
  margin-top: 20px;
}

/* table */
.sr-only {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* .sr-only{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} */

/* main 비주얼 */
.main_vis .vis {
  height: 420px;
}
.main_vis .vis .inner {
  height: 100%;
}
.vis_01 {
  background: url("../img/sample/bg_vis_01.jpg") center/cover no-repeat;
}
.vis_02 {
  background: url("../img/sample/bg_vis_02.jpg") center/cover no-repeat;
}
.vis_03 {
  background: url("../img/sample/bg_vis_03.jpg") center/cover no-repeat;
}
.vis_04 {
  background: url("../img/sample/bg_vis_04.jpg") center/cover no-repeat;
}
.vis_05 {
  background: url("../img/sample/bg_vis_05.jpg") center/cover no-repeat;
}
.vis_txt_wrap {
  position: absolute;
  top: 50%;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 50px 40px;
  box-sizing: border-box;
  max-width: 55%;
  z-index: 99;
  border-radius: 32px 0 32px 0;
}
/* .bg {background:rgba(247,251,254,0.7);} */
.vis_txt_wrap h2 {
  color: #000;
  font-size: 1.25rem;
  font-weight: 300;
}
.vis_txt_wrap h2 span {
  position: relative;
}
.vis_txt_wrap h2 span:after {
  position: absolute;
  bottom: 4px;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: #000;
}
.vis_txt {
  margin-top: 29px;
  color: #1a1a1a;
  font-weight: 500;
  font-size: 2.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  line-height: 1.3em;
  max-height: 2.6em;
  white-space: normal;
}
.vis_txt_02 {
  margin-top: 29px;
  color: #1a1a1a;
  font-size: 1.5rem;
}

/* 메인 비주얼 퀵메뉴 */
.main_quick {
  position: absolute;
  top: 85px;
  left: calc(50% + 275.5px);
  max-width: 1050px;
  z-index: 9;
  width: 250px;
}

.main_quick > div {
  float: left;
}
.main_quick > div a {
  display: block;
  text-align: center;
  padding-top: 87px;
  box-sizing: border-box;
  color: #1a1a1a;
  font-size: 0.938rem;
  border-radius: 32px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
  width: 120px;
  height: 120px;
  overflow: hidden;
}
.main_quick > div:nth-child(1) {
  margin-right: 10px;
  margin-bottom: 10px;
}
.main_quick > div:nth-child(2) {
  margin-bottom: 10px;
}
.main_quick > div:nth-child(3) {
  margin-right: 10px;
}
.main_quick > div:nth-child(4) {
  margin-bottom: 10px;
}
.main_quick > div:nth-child(1) a {
  background: #fff url("/resources/img/user/icon_quick_01.png") center 24px no-repeat;
}
.main_quick > div:nth-child(2) a {
  background: #fff url("/resources/img/user/icon_quick_02.png") center 24px no-repeat;
}
.main_quick > div:nth-child(3) a {
  background: #fff url("/resources/img/user/icon_quick_03.png") center 24px no-repeat;
}
.main_quick > div:nth-child(4) a {
  background: #fff url("/resources/img/user/icon_quick_04.png") center 24px no-repeat;
}

.main_vis .swiper-button-prev {
  width: 36px;
  height: 57px;
  background: url("/resources/img/user/icon_prev.png") center center no-repeat;
  margin-top: -28.5px;
  left: 50%;
  margin-left: -590px;
}
.main_vis .swiper-button-next {
  width: 36px;
  height: 57px;
  background: url("/resources/img/user/icon_next.png") center center no-repeat;
  margin-top: -28.5px;
  right: 50%;
  margin-right: -590px;
}
.paging_wrap {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -485px;
  z-index: 99;
  height: 28px;
}
.main_vis .swiper-pagination {
  width: 68px;
  height: 28px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 0.875rem;
  line-height: 28px;
  border-radius: 14px;
  bottom: 0;
}
.main_vis .swiper_pause {
  width: 28px;
  height: 28px;
  position: absolute;
  bottom: 0;
  left: 72px;
  background: rgba(0, 0, 0, 0.3) url("/resources/img/user/icon_pause.png") center center no-repeat;
  border-radius: 100%;
  cursor: pointer;
  z-index: 99;
}
.main_vis .swiper_pause.play {
  background: rgba(0, 0, 0, 0.3) url("/resources/img/user/icon_play.png") 55% center no-repeat;
}

/* 공통 타이틀 */
.big_tit {
  text-align: center;
  font-size: 1.875rem;
  color: #1a1a1a;
  font-weight: 500;
}
.big_tit a {
  position: relative;
  color: #1a1a1a;
  padding-right: 20px;
  display: inline-block;
}
.big_tit a:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: 0;
  width: 8px;
  height: 14px;
  background: url("/resources/img/user/icon_tit.png") center center/cover no-repeat;
}
.big_tit_02 {
  text-align: center;
  font-size: 1.875rem;
  color: #fff;
  font-weight: 500;
}
.big_tit_02 a {
  position: relative;
  color: #fff;
  padding-right: 20px;
}
.big_tit_02 a:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: 0;
  width: 8px;
  height: 13px;
  background: url("/resources/img/user/icon_tit_02.png") center center/cover no-repeat;
}
.big_tit span {
  color: #00a99a;
}

/* 공지사항 */
.noti_wrap {
  padding: 45px 0;
}
.noti_wrap .inner:after {
  content: "";
  display: block;
  clear: both;
}
.noti_tit {
  float: left;
  text-align: left;
  width: 34.286%;
}
.noti_tit h2 {
  font-weight: 500;
}
.big_txt {
  font-weight: 300;
  font-size: 1rem;
  color: #1a1a1a;
  margin-top: 20px;
}
.noti_list_wrap {
  float: left;
  width: 57.144%;
}
.noti_list {
  height: 64px;
  overflow: hidden;
}
.noti_list a {
  display: block;
  color: #1a1a1a;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 32px;
}
.noti_list a:after {
  content: "";
  display: block;
  clear: both;
}
.noti_list a span.noti_list_tit {
  float: left;
  width: 80%;
  position: relative;
  padding-left: 16px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.noti_list a span.noti_list_tit:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: #1a1a1a;
}
.noti_list a span.noti_list_date {
  float: left;
  width: 20%;
  text-align: right;
  font-size: 1rem;
}
.noti_btns {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -46px;
  height: 92px;
  width: 28px;
}
.noti_btns div {
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 100%;
  box-sizing: border-box;
}
.noti_btns .swiper-button-prev {
  position: static;
  margin-top: 0;
  background: url("/resources/img/user/icon_txt_prev.png") center center no-repeat;
}
.noti_btns .swiper-button-next {
  position: static;
  margin-top: 4px;
  background: url("/resources/img/user/icon_txt_next.png") center center no-repeat;
}
.swiper_pause_02 {
  margin-top: 4px;
  background: url("/resources/img/user/icon_noti_pause.png") center center no-repeat;
}
.swiper_pause_02.play {
  background: url("/resources/img/user/icon_play_02.png") 55% center no-repeat;
}

/* 추천콘텐츠 */
.recom_wrap {
  background: #f4f4f4;
  padding: 100px 0 81px;
  box-sizing: border-box;
}
.list {
  margin-top: 40px;
}
.list .swiper-slide {
  max-width: 330px;
}
.list a {
  display: block;
  position: relative;
  height: 0;
  padding-bottom: 59.394%;
  border-radius: 30px;
  overflow: hidden;
}
.list a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  border-radius: 30px;
}
.list a img {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  max-width: 100%;
  transition: all 0.3s ease-in-out;
}
.list a:hover img {
  transform: translate(-50%, -50%) scale(1.2);
  -webkit-transform: translate(-50%, -50%) scale(1.2);
  -moz-transform: translate(-50%, -50%) scale(1.2);
  -ms-transform: translate(-50%, -50%) scale(1.2);
  -o-transform: translate(-50%, -50%) scale(1.2);
}
.recom_tag {
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 1rem;
  font-weight: 300;
  color: #fff;
  padding: 0 15px;
  height: 32px;
  border-radius: 16px;
  background: rgba(32, 188, 174, 0.9);
  line-height: 32px;
}

/* 스팀 */
.steam_wrap {
  padding: 22px 0;
  background: url("/resources/img/user/bg_steam_wrap.gif") center center/cover no-repeat;
}
.steam_tag {
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 1rem;
  font-weight: 300;
  color: #fff;
  padding: 0 15px;
  height: 32px;
  border-radius: 16px;
  line-height: 32px;
}
.steam_tag_01 {
  background: rgba(44, 176, 214, 0.9);
}
.steam_tag_02 {
  background: rgba(0, 108, 98, 0.9);
}
.steam_tag_03 {
  background: rgba(3, 76, 129, 0.9);
}

/* 연령별 맞춤 정보 */
.custom_wrap {
  padding: 78px 0 105px;
}
.custom_list {
  margin-top: 40px;
}
.custom_list:after {
  content: "";
  display: block;
  clear: both;
}
.custom_list li {
  float: left;
  margin: 0 15px 15px 0;
}
.custom_list li a {
  display: block;
  padding: 22px 30px;
  border-radius: 32px;
  overflow: hidden;
  background: #f4f4f4;
  border: 1px solid #ebebeb;
  font-weight: 300;
  color: #1a1a1a;
  font-size: 1.125rem;
}
.custom_list li a:hover {
  background: #20bcae;
  color: #fff;
  border: 1px solid #20bcae;
}

/* steam 체험일정 */
.steam_sche_wrap {
  height: 120px;
  background: url("/resources/img/user/bg_steam_sche_wrap.jpg") center center/cover no-repeat;
}
.steam_sche_wrap .sche_tit a {
  display: block;
  font-size: 1.5rem;
  font-weight: 300;
  text-align: left;
  padding: 48px 0;
}
.steam_sche_wrap .sche_tit a:after {
  display: none;
}
.steam_sche_wrap .sche_tit a .icon_a {
  position: relative;
  padding-right: 20px;
}
.steam_sche_wrap .sche_tit a .icon_a:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: 0;
  width: 8px;
  height: 14px;
  background: url("/resources/img/user/icon_tit_02.png") center center/cover no-repeat;
}
.steam_sche_wrap .sche_tit a span.font_w {
  font-weight: 500;
}

/* ebook */
.ebook_wrap {
  padding: 100px 0 120px;
}
.ebook_list {
  margin-top: 40px;
}
.ebook_list .swiper-slide a {
  display: block;
}
.book_area img {
  max-width: 100%;
  vertical-align: bottom;
}
.book_area {
  position: relative;
  max-width: 190px;
}
.book_area:before {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  width: 2px;
  height: 100%;
  background: url("/resources/img/user/bg_book_01.png") left top no-repeat;
}
.book_area:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 50px;
  height: 42px;
  background: url("/resources/img/user/bg_book_02.png") left bottom no-repeat;
}
.book_name {
  color: #1a1a1a;
  font-size: 1.25rem;
  max-width: 190px;
  font-weight: 300;
  margin-top: 25px;
  line-height: 1.625rem;
  word-break: keep-all;
  height: 3.25rem;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 이달의책 */
.weekly_wrap {
  padding: 100px 0 90px;
  background: #f4f4f4;
  border-top: 1px solid #ebebeb;
  box-sizing: border-box;
}
.wbook_list_wrap {
  position: relative;
  max-width: 1674px;
  margin: 0 auto;
  overflow: hidden;
}
.wbook_list {
  max-width: 1050px;
  text-align: center;
  overflow: visible !important;
  padding: 70px 0 60px 0 !important;
}
.wbook_list .swiper-slide {
  padding-top: 64px;
}
.wbook_list .swiper-slide img {
  width: 210px;
  vertical-align: bottom;
}
.wbook_list .swiper-slide .wbook_area {
  position: relative;
  max-width: 210px;
  margin: 0 auto;
  box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.2);
}
.wbook_list .swiper-slide .wbook_area:before {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  width: 2px;
  height: 100%;
  background: url("/resources/img/user/bg_book_01.png") left top repeat;
}
.wbook_list .swiper-slide.swiper-slide-active {
  padding-top: 0;
}
.wbook_list .swiper-slide.swiper-slide-active img {
  width: auto;
  margin-top: 0;
}
.wbook_list .swiper-button-prev {
  width: 36px;
  height: 57px;
  background: url("/resources/img/user/icon_prev.png") center center no-repeat;
  margin-top: -28.5px;
  left: -23px;
}
.wbook_list .swiper-button-next {
  width: 36px;
  height: 57px;
  background: url("/resources/img/user/icon_next.png") center center no-repeat;
  margin-top: -28.5px;
  left: 337px;
}
.wbook_list .swiper-slide.swiper-slide-active .wbook_area {
  max-width: 254px;
}

.info_popup_wrap {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 50%;
  z-index: 9;
  height: 430px;
  max-width: 525px;
}
.info_popup {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  background: #fff;
  border-radius: 32px;
  box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 95px 60px 30px;
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
}
.info_popup h3 {
  font-size: 2.25rem;
  font-weight: 500;
  color: #034c81;
}
.info_popup p {
  margin-top: 40px;
  font-size: 1.125rem;
  color: #1a1a1a;
  font-weight: 300;
  line-height: 2rem;
}
.info_writer {
  margin-top: 25px;
}
.info_writer:after {
  content: "";
  display: block;
  clear: both;
}
.info_writer div {
  float: left;
  font-size: 1rem;
  color: #1a1a1a;
  font-weight: 300;
}
.publ_com {
  position: relative;
  padding-left: 10px;
  margin-left: 10px;
}
.publ_com:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -5px;
  width: 1px;
  height: 12px;
  background: #aaa;
}
.btn_desc_close {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 104px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 20px;
  box-sizing: border-box;
  font-size: 1rem;
  color: #1a1a1a;
  background: #fff;
}
.btn_desc_close span {
  padding-right: 13px;
  background: url("/resources/img/user/icon_txt_next.png") right center no-repeat;
}
.btn_desc_close.on span {
  background: url("/resources/img/user/icon_txt_prev.png") right center no-repeat;
}

/* 북트레일러, 영상cast 탭 */
.tab_wrap {
  height: 898px;
  background: url("/resources/img/user/bg_tab_wrap.gif") center center/cover no-repeat;
  padding-top: 100px;
  box-sizing: border-box;
}
.tab {
  padding-top: 120px;
  box-sizing: border-box;
}
.tab_btn {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 80px;
  width: 50%;
  text-align: center;
  background: #fff;
  border-radius: 40px 0 0 40px;
}
.tab_btn span {
  position: relative;
  color: #1a1a1a;
  font-size: 1.875rem;
  z-index: 1;
  font-weight: 300;
}
.tab_btn.on:after {
  content: "";
  width: 100%;
  height: 100%;
  background: #20bcae;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 40px;
}
.tab_btn.on span {
  color: #fff;
  font-weight: 500;
}
.tab_btn_02 {
  left: 50%;
  border-radius: 0 40px 40px 0;
}
.tab > li > ul {
  padding-top: 120px;
}

.big_video_wrap {
  float: left;
  width: 74.287%;
  margin-right: 30px;
}
.big_video {
  box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.2);
  border-radius: 32px;
}
.big_video a {
  display: block;
}
.tab_list {
  max-width: 240px;
  height: 563px;
}
.tab_list .swiper-slide a {
  display: block;
}
.tab_list .swiper-slide.on .video_area:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -20px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  background: url("/resources/img/user/icon_video_play.png") center center no-repeat;
  background-size: cover;
  z-index: 9;
}
.tab_list .swiper-slide.on .video_area:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 99;
}
.tab_list .swiper-slide .video_area:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  z-index: 99;
}
.video_area {
  position: relative;
  padding-bottom: 59.36%;
  height: 0;
  border-radius: 32px 32px 0 0;
  overflow: hidden;
}
.big_video_area:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -40px;
  left: 50%;
  margin-left: -40px;
  width: 80px;
  height: 80px;
  background: url("/resources/img/user/icon_video_play.png") center center no-repeat;
}
.video_area img {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.3s ease-in-out;
  max-width: 100%;
  height: 100%;
}
.video_wrap a:hover img {
  transform: translate(-50%, -50%) scale(1.1);
  -webkit-transform: translate(-50%, -50%) scale(1.1);
  -moz-transform: translate(-50%, -50%) scale(1.1);
  -ms-transform: translate(-50%, -50%) scale(1.1);
  -o-transform: translate(-50%, -50%) scale(1.1);
}
.video_area.video_area_02 {
  padding-bottom: 59.17%;
}
.video_info {
  background: #fff;
  border-radius: 0 0 32px 32px;
  padding: 40px 30px;
  box-sizing: border-box;
}
.video_info:after {
  content: "";
  display: block;
  clear: both;
}
.video_info h2 {
  float: left;
  font-size: 1.25rem;
  color: #1a1a1a;
  font-weight: 300;
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video_info h2 .video_tag {
  font-weight: 500;
  display: inline-block;
  margin-right: 9px;
}
.video_date {
  float: right;
  font-size: 1rem;
  color: #1a1a1a;
  font-weight: 300;
  width: 20%;
  text-align: right;
}
.video_area.video_area_02 {
  border-radius: 32px;
}
.video_info_02 h2 {
  font-size: 1rem;
  font-weight: 300;
  color: #1a1a1a;
  margin-top: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 20px;
}
.video_info_02 h2 .video_tag {
  font-weight: 500;
  display: inline-block;
  margin-right: 5px;
}
.video_wrap {
  display: none;
}
.video_wrap.on {
  display: block;
}
.video_area iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.tab_link {
  display: none;
  font-size: 1rem;
  color: #1a1a1a;
  width: 104px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 20px;
  text-align: center;
  position: absolute;
  bottom: -80px;
  right: 0;
}
.tab_link span {
  position: relative;
  padding-right: 13px;
}
.tab_link span:after {
  position: absolute;
  top: 50%;
  margin-top: -3px;
  right: 0;
  content: "";
  width: 5px;
  height: 8px;
  background: url("/resources/img/user/icon_more_btn.png") center center/cover no-repeat;
}
.tab_link.on {
  display: block;
}

/* 최근본콘텐츠 */
.recent_wrap {
  padding: 34px 0 120px;
}
.latest_list {
  margin-top: 40px;
}
.latest_list .swiper-slide {
  border-radius: 32px;
  overflow: hidden;
  max-width: 330px;
}
.latest_list .swiper-slide a {
  display: block;
}
.latest_list_img {
  position: relative;
  height: 0;
  padding-bottom: 59.398%;
  overflow: hidden;
}
.latest_list_img:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 9;
  border-radius: 32px 32px 0 0;
  box-sizing: border-box;
}
.latest_list_img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  max-width: 100%;
  transition: all 0.3s ease-in-out;
}
.latest_list .swiper-slide:hover img {
  transform: translate(-50%, -50%) scale(1.2);
  -webkit-transform: translate(-50%, -50%) scale(1.2);
  -moz-transform: translate(-50%, -50%) scale(1.2);
  -ms-transform: translate(-50%, -50%) scale(1.2);
  -o-transform: translate(-50%, -50%) scale(1.2);
}

.latest_list_info {
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-top: none;
  border-radius: 0 0 32px 32px;
  padding: 30px 26px 0;
  min-height: 167px;
  max-height: 167px;
}
.latest_list_tag {
  display: inline-block;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  background: #20bcae;
  border-radius: 16px;
  color: #fff;
  font-size: 1rem;
}
.latest_list_info h3 {
  margin-top: 20px;
  font-size: 1.25rem;
  font-weight: 300;
  color: #1a1a1a;
  line-height: 26px;
  white-space: normal;
  height: 52px;
  text-align: left;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}

/* 실시간 추천 */
.real_time_wrap {
  padding: 45px 0;
  border-top: 1px solid #ebebeb;
  background: #f4f4f4;
  box-sizing: border-box;
}
.real_time_wrap .inner:after {
  content: "";
  display: block;
  clear: both;
}
.real_time_tit {
  text-align: left;
  float: left;
  width: 34.286%;
}
.real_time_tit h2 {
  font-weight: 500;
}
.rtime_list_wrap {
  float: left;
  width: 57.144%;
}
.rtime_list {
  height: 74px;
  overflow: hidden;
}
.rtime_list a {
  color: #1a1a1a;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 32px;
  display: block;
  width: 90%;
  position: relative;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list_num {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: #fff;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 100%;
  vertical-align: middle;
  margin-right: 14px;
  text-align: center;
  line-height: 26px;
  color: #1a1a1a;
  font-size: 0.938rem;
  font-weight: 400;
}
.rtime_list_btns {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -46px;
  height: 92px;
  width: 28px;
}
.rtime_list_btns div {
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 100%;
  box-sizing: border-box;
}
.rtime_list_btns .swiper-button-prev {
  position: static;
  margin-top: 0;
  background: #fff url("/resources/img/user/icon_txt_prev.png") center center no-repeat;
}
.rtime_list_btns .swiper-button-next {
  position: static;
  margin-top: 4px;
  background: #fff url("/resources/img/user/icon_txt_next.png") center center no-repeat;
}
.swiper_pause_03 {
  margin-top: 4px;
  background: #fff url("/resources/img/user/icon_noti_pause.png") center center no-repeat;
}
.swiper_pause_03.play {
  background: url("/resources/img/user/icon_play_02.png") 60% center no-repeat;
}

/* 체험 on-air */
.on_air_wrap {
  height: 839px;
  background: url("/resources/img/user/bg_on_air.jpg") center center/cover no-repeat;
  padding-top: 100px;
  box-sizing: border-box;
}
.on_air_posting {
  border-radius: 32px;
  overflow: hidden;
  margin-top: 40px;
  max-height: 224px;
  background: #fff;
  box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.2);
}
.posting_img {
  float: left;
  position: relative;
  width: 50%; /* padding-bottom:21.334%; */
  padding-bottom: 32%;
  overflow: hidden;
}
.posting_img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  max-width: 100%;
  transition: all 0.3s ease-in-out;
}
.on_air_posting:hover img {
  transform: translate(-50%, -50%) scale(1.2);
  -webkit-transform: translate(-50%, -50%) scale(1.2);
  -moz-transform: translate(-50%, -50%) scale(1.2);
  -ms-transform: translate(-50%, -50%) scale(1.2);
  -o-transform: translate(-50%, -50%) scale(1.2);
}
.posting_img:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 100px;
  height: 100%;
  background: url("/resources/img/user/bg_onair.png") center center repeat;
}
.posting_info {
  float: left;
  width: 50%;
  padding: 50px 30px;
  box-sizing: border-box;
}
.posting_info h3 {
  position: relative;
  font-size: 1.25rem;
  color: #00a99a;
  font-weight: 500;
  padding-left: 30px;
}
.posting_info h3:before {
  position: absolute;
  top: 50%;
  margin-top: -9px;
  left: 0;
  content: "";
  width: 20px;
  height: 18px;
  background: url("/resources/img/user/icon_camera.png") center center no-repeat;
}
.posting_txt {
  margin-top: 20px;
  font-size: 1.25rem;
  color: #1a1a1a;
  font-weight: 300;
  line-height: 26px;
  height: 52px;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.on_air_date {
  margin-top: 20px;
  font-size: 1rem;
  color: #1a1a1a;
  font-weight: 300;
}
.social_wrap {
  margin-top: 40px;
}
.social_wrap:after {
  content: "";
  display: block;
  clear: both;
}
.review {
  float: left;
  position: relative;
  width: 31.43%;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.2);
}
.review_img {
  position: relative;
  height: 0;
  padding-bottom: 112.125%;
  background: url("../img/sample/img_review.jpg") center center/cover no-repeat;
  transition: all 0.2s;
}
.review:hover .review_img {
  transform: scale(1.2);
}
/* .review img {position:absolute; top:50%; left:50%;  -ms-transform:translate(-50%,-50%) scale(1); -webkit-transform:translate(-50%,-50%) scale(1); -o-transform:translate(-50%,-50%) scale(1); transform:translate(-50%,-50%) scale(1); max-width:100%;  transition: all 0.3s ease-in-out;} */
.review:hover img {
  transform: translate(-50%, -50%) scale(1.2);
  -webkit-transform: translate(-50%, -50%) scale(1.2);
  -moz-transform: translate(-50%, -50%) scale(1.2);
  -ms-transform: translate(-50%, -50%) scale(1.2);
  -o-transform: translate(-50%, -50%) scale(1.2);
}
.review:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: url("/resources/img/user/bg_review.png") center center/cover no-repeat;
}
.review_info_wrap {
  position: absolute;
  bottom: 30px;
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  z-index: 9;
}
.review_info_wrap .big_tit_02 {
  text-align: left;
}
.review_tit {
  margin-top: 40px;
  font-size: 1.25rem;
  color: #fff;
  font-weight: 500;
}
.review_txt {
  margin-top: 20px;
  font-size: 1.25rem;
  color: #fff;
  font-weight: 300;
  line-height: 26px;
  height: 52px;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}
.review_info {
  margin-top: 20px;
}
.review_info:after {
  content: "";
  display: block;
  clear: both;
}
.review_info > div {
  float: left;
  font-size: 1rem;
  color: #fff;
  font-weight: 300;
}
.review_info > div.review_writer {
  position: relative;
  padding-left: 10px;
  margin-left: 10px;
}
.review_info > div.review_writer:before {
  content: "";
  width: 1px;
  height: 12px;
  background: #aaa;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  left: 0;
}

/* sns */
.sns_wrap {
  float: left;
  width: 65.715%;
  margin-left: 2.855%;
}
.sns_wrap li {
  float: left;
  width: 50%;
  padding: 0 30px;
  box-sizing: border-box;
  min-height: 185px;
}
.sns_wrap li a {
  display: block;
  position: relative;
  padding-left: 84px;
}
.sns_wrap li a:before {
  position: absolute;
  top: 50%;
  margin-top: -32px;
  left: 0;
  content: "";
  width: 64px;
  height: 64px;
  border-radius: 100%;
}
.sns_wrap li:nth-child(1) {
  border-bottom: 1px solid #a1a1a0;
  padding-top: 52px;
}
.sns_wrap li:nth-child(2) {
  position: relative;
  border-bottom: 1px solid #a1a1a0;
  padding: 52px 0 0 45px;
}
.sns_wrap li:nth-child(2):before {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -15px;
  content: "";
  width: 1px;
  height: 30px;
  background: #a2a2a2;
}
.sns_wrap li:nth-child(3) {
  padding-top: 45px;
}
.sns_wrap li:nth-child(4) {
  position: relative;
  padding: 45px 0 0 45px;
}
.sns_wrap li:nth-child(4):before {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -15px;
  content: "";
  width: 1px;
  height: 30px;
  background: #a2a2a2;
}
.sns_wrap li:nth-child(1) a:before {
  background: #fff url("/resources/img/user/icon_gg.png") center center no-repeat;
}
.sns_wrap li:nth-child(2) a:before {
  background: #fff url("/resources/img/user/icon_ap.png") center center no-repeat;
}
.sns_info h3 {
  font-size: 1.25rem;
  color: #fff;
  font-weight: 500;
}
.sns_info p {
  margin-top: 20px;
  font-size: 1rem;
  color: #fff;
  font-weight: 300;
}
.dwn {
  display: inline-block;
  width: 108px;
  height: 40px;
  line-height: 38px;
  border: 1px solid #ddd;
  font-size: 1rem;
  color: #1a1a1a;
  border-radius: 20px;
  text-align: center;
  box-sizing: border-box;
  background: #fff;
  margin-top: 20px;
}
.dwn span {
  position: relative;
  padding-right: 16px;
}
.dwn span:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -6px;
  right: 0;
  width: 12px;
  height: 12px;
  background: url("/resources/img/user/down.svg") center center/cover no-repeat;
}

/* cs 콘텐츠 */
.cs_wrap {
  padding: 83px 0 120px;
}
.cs_wrap:after {
  content: "";
  display: block;
  clear: both;
}
.edu_cs {
  float: left;
  width: 65.715%;
  max-height: 338px;
  min-height: 338px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 32px;
  padding: 48px 74px 48px 390px;
  background: url("/resources/img/user/bg_edu_cs.png") 19% center no-repeat;
}
.kyobo_cs {
  float: left;
  width: 31.43%;
  margin-left: 2.855%;
  max-height: 338px;
  min-height: 338px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 32px;
  padding: 66px 30px 50px;
}
.cs_box h2 {
  font-weight: 500;
  color: #1a1a1a;
  font-size: 1.25rem;
}
.link_wrap {
  margin-top: 20px;
}
.link_wrap:after {
  content: "";
  display: block;
  clear: both;
}
.link_wrap a {
  float: left;
  display: block;
  padding: 0 15px;
  height: 40px;
  line-height: 38px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 32px;
  color: #1a1a1a;
  font-size: 1rem;
}
.link_wrap a span {
  position: relative;
  padding-right: 11px;
}
.link_wrap a span:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -3px;
  right: 0;
  width: 5px;
  height: 8px;
  background: url("/resources/img/user/icon_cs.png") 90% center/cover no-repeat;
}
.link_wrap a:first-child {
  margin-right: 8px;
}
.cs_box_02 {
  margin-top: 40px;
}
.cs_info {
  margin-top: 23px;
}
.cs_info li {
  padding-left: 25px;
  font-size: 1rem;
  color: #1a1a1a;
  font-weight: 300;
  margin-top: 15px;
}
.cs_info li:nth-child(1) {
  background: url("/resources/img/user/icon_call.png") left center no-repeat;
  margin-top: 0;
  background-size: 20px 20px;
}
.cs_info li:nth-child(2) {
  background: url("/resources/img/user/icon_time.png") left center no-repeat;
  background-size: 20px 20px;
}
.cs_info li:nth-child(3) {
  background: url("/resources/img/user/icon_off.png") left center no-repeat;
  background-size: 20px 20px;
}
.kyobo_logo {
  text-align: center;
  margin-bottom: 66px;
}
.cs_box_03 {
  margin-top: 66px;
}
.mo_bot_quick {
  display: none;
}