@charset "utf-8";

/* 너비가 320px 이상일때 */
@media all and (min-width:320px){
}

/* 너비가 600px 이상일때 */
@media all and (min-width:600px){
}

/* 너비가 1024px 이상일때 */
@media all and (min-width:1024px){
}

/* scroll no */

 html {
  touch-action: manipulation;
}

body{
	overflow: hidden;
	width: 100%;
	height: 100%;
    max-width: 100%;
    max-height: 100vh;
	-webkit-text-size-adjust:none
}

/** 베이스 스타일 시작 */
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, address, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea{margin:0; padding:0;}
h1, h2, h3, h4, h5, h6{font-size:100%;line-height:100%;}
img
{
  max-width: 100%;
  height: auto;
}
table {border-collapse:collapse;}
ul, ol, li {list-style:none;}
address, em {font-style:normal;}
input, select, textarea, form img, li img, object{vertical-align:middle;}
/* font */
body{color:#555; font-size:13px; font-family:'Noto Sans', sans-serif; }
input, select, textarea{color:#555; font-size:100%; font-family:'Noto Sans', sans-serif; }
/* anchor */
a {color:#555; text-decoration:none;}
a:hover, a:focus, a:active {color:#555;text-decoration:none;}
input[type="text"] {}

#ojs
.player_wrap {display:block;width:100%;min-width:730px;height:100%;position:relative;}
.player_top {display:block;background:#303b3f;height:65px;z-index:999;position:absolute;top:0px;left:0px;width:100%;}
.player_bottom {display:block;background:#303b3f;height:65px;z-index:999;position:absolute;bottom:0px;left:0px;width:100%;}

#fullpage
.section {position:relative;display:block;width:100%;height:100%;background-size:cover;}
.section:after {content:""; display:block; height:0; clear:both; visibility:hidden;}
.overlay {position:relative;display:none;width:100%;height:100%;z-index:100}

/* .top_bg { background: white; background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1)) no-repeat top; width:100%; height:150px; position:absolute;top:0;left:0;z-index:100;} */
/* .bottom_bg { background: linear-gradient(to bottom, transparent, black) no-repeat bottom; width:100%; height:150px; position:absolute;bottom:0;left:0;z-index:100; opacity:0%} */
.bottom_bg {
  background: #000000;
  border-radius: 5px;
  border: 0px solid black;
  border-width: 0px;
  border-color: #8D9294;
  width: calc(100% - 10px);
  height: 56px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5px;
  z-index: 100;
  opacity: 0.7;
}

.menuBackground_mobile {
  position: absolute;
  background: #000000;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 100;
  opacity: 0.4;
}

.popmovie {
  /* position: fixed !important; */
  border-radius: 10px;
  overflow: hidden;
  bottom: 66px;
  right: 5px;
  width:320px;
  height:240px;
  background:#000;
  cursor:move;
  z-index:99;
  /* min-width:160px;
  min-height:90px; */
}
.Pr {position:relative;display:block;}

.top_subject {
  display:none;
  position:absolute;
  background: #000000;
  border-radius: 5px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 30px);
  height: 34px;
  line-height: 34px;
  padding-left: 20px;
  color: #FFFFFF;
  font-size: 18px;
  z-index:200;
  user-select: none;
  opacity: 0.7;
}

.top_menu {
  display:none;
  position:absolute;
  width: 35px;
  height: 155px;
  left: 20px;
  bottom: 66px;
  z-index:200;
  user-select: none;
}

.top_menu_single {
  display:block;
  position:absolute;
  width: 35px;
  height: 35px;
  left: 20px;
  bottom: 66px;
  z-index:200;
  user-select: none;
}
/* .top_menu span {margin:0px 5px;} */

.top_menu_mobile {
  display: block;
  position: absolute;
  float: right;
  top: 16px;
  right: 20px;
  width: 247px;
  height: 27px;
  z-index: 200;
  user-select: none;
}

.lock_mobile {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 27px;
  height: 27px;
  background:url('../img/lock_mobile.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
}

.book_add_mobile {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 55px;
  width: 27px;
  height: 27px;
  background:url('../img/bookmarkadd_mobile.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
}

.book_mobile {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 110px;
  width: 27px;
  height: 27px;
  background:url('../img/bookmark_mobile.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
}

.slider_mobile {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 165px;
  width: 27px;
  height: 27px;
  background:url('../img/slider_mobile.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
}

.setting_mobile {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 220px;
  width: 27px;
  height: 27px;
  background:url('../img/setting_mobile.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
}

.top_menu_mobile_lock {
  display: none;
  position: absolute;
  float: right;
  top: 16px;
  right: 20px;
  width: 27px;
  height: 27px;
  z-index: 200;
  user-select: none;
}

.lock_mobile_single {
  display:none;
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 27px;
  height: 27px;
  background:url('../img/lock_mobile.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
}

.play_bar {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 22px);
  height: 14px;
  border: 0px solid black;
  border-width: 1px;
  border-color: #8D9294;
  bottom: 39px;
  z-index:200;
  user-select: none;
}
/* .play_stats {display:inline-block;vertical-align:middle;height:28px;text-indent:-999em;font-size:0px;}
.play_bar.on .play_stats {display:inline-block;vertical-align:middle;height:28px;cursor:pointer;} */
 /* #timeProgress { position: relative; left: 50%; transform: translateX(-50%); top: 4px; right: 4px; width: calc(100% - 10px); height: 4px;} */
/* #timeProgress .ui-progressbar-value { background-color: #ff6145; border-width: 0px;} */

.timeBar {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: 4px;
  right: 4px;
  width: calc(100% - 8px);
  height: 6px;
  cursor:pointer;
}

.bottom_menu_mobile {
  position: absolute;
  display: block;
  vertical-align: middle;
  /* border: 1px solid red; */
  bottom: 3.5px;
  left: 16px;
  right: 14px;
  height: 35px;
  width: calc(100% - 34px);
  user-select: none;
  z-index: 200
}

.ctime_mobile {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  /* border: 1px solid red; */
  height: 19px;
  left: 0px;
  top: 8px;
  line-height:19px;
  /* margin-left:5px; */
  color: #FCB7AB;
  font-size: 14px;
}

.timeBar_mobile {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  /* border: 1px solid red; */
  left: 49px;
  right: 138px;
  top: 8px;
  height: 13px;
  width: calc(100% - 187px);
  z-index: 200
}

.ttime_mobile {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  float: right;
  /* border: 1px solid red; */
  right: 84px;
  top: 8px;
  height: 19px;
  line-height:19px;
  /* margin-left:5px; */
  color: #FCB7AB;
  font-size: 14px;
}

.video_mobile {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  float: right;
  /* border: 1px solid red; */
  right: 49px;
  width: 35px;
  height: 35px;
  background:url('../img/videosh_mobile.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
}

/* .video_mobile:hover {
  background:url('../img/videosh_on_mobile.svg') no-repeat center;
} */

.fullscreen_mobile {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  float: right;
  /* border: 1px solid red; */
  right: 0px;
  width: 35px;
  height: 35px;
  background:url('../img/full_mobile.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
}

.left_navi {
  display:block;
  position:absolute;
  float: left;
  width: 50%;
  height: 32px;
  bottom:5px;
  left:5px;
  z-index:200;
  user-select: none;
}

.right_navi {
  display:block;
  position:absolute;
  float: right;
  width: 50%;
  height: 32px;
  bottom:5px;
  right:5px;
  z-index:200;
  user-select: none;
}
/* .right_navi span {margin:0px 5px;} */

.setting_pop {
  display:none;
  position:absolute;
  float: right;
  border-radius: 5px;
  bottom:66px;
  right:5px;
  width:167px;
  height:153px;
  background-color:rgba(0,0,0,0.7);
  z-index:201;
  padding: 6px;
  user-select: none;
  /* opacity: 0.7; */
}
.setting_pop:after {display:block;visibility:hidden;clear:both;content:""}
.setting_pop li {
  display:block;
  position:relative;
  /* border: 1px solid red; */
  width: calc(100%-8px);
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  color:#fff;
  padding-left: 4px;
  padding-right: 4px;
}

/* .setting_pop .p02:hover, .p03:hover { */
.p03:hover {
  background-color: rgba(255,255,255,0.3);
  border-radius: 5px;
}

.nextArrow {
  display: block;
  position: relative;
  float:right;
  width:16px;
  height:32px;
  background:url('../img/setting_back.svg') no-repeat center
}

.setting_key_pop {
  display:none;
  position:absolute;
  float: right;
  border-radius: 5px;
  bottom:66px;
  right:5px;
  width:216px;
  height:340px;
  background-color:rgba(0,0,0,0.7);
  padding: 6px;
  color: white;
  font-size: 12px;
  text-align: center;
  user-select: none;
  z-index:200;
}

.keylist_top {
  position: absolute;
  /* border: 1px solid #FF0000; */
  top: 0px;
  left: 0px;
  width: 100%;
  height: 26px;
}

.keylist_close{
  position: absolute;
  /* border: 1px solid #FF0000; */
  vertical-align: middle;
  left: 5px;
  top: 5px;
  width: 100%;
  height: 16px;
  cursor: pointer;
}

.keylist_back{
  position: absolute;
  display: inline-block;
  /* border: 1px solid #FF0000; */
  background: url('../img/menu_back.svg') no-repeat center;
  top: 0px;
  left: 0px;
  width: 16px;
  height: 16px;
}

.keylist_title{
  position: absolute;
  display: inline-block;
  /* border: 1px solid #FF0000; */
  top: 0px;
  left: 21px;
  height: 16px;
  line-height: 16px;
}

/* .keylist_seperate {
  position: absolute;
  top: 26px;
  left: 0px;
  width: 100%;
  height: 1px;
  background-color: #B2AAAA;
} */

.keylist_list {
  overflow: hidden;
  position: absolute;
  /* border: 1px solid #FF0000; */
  top: 26px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: calc(100%-26px);
  padding: 5px;
  /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  -webkit-overflow-scrolling: auto; */
  z-index: 200;
}

.key_group {
  position: relative;
  /* border: 1px solid #FF0000; */
  width: 100%;
  height: 26px;
  line-height: 26px;
}

#key_desc {
  /* display: inline-block; */
  position: absolute;
  /* border: 1px solid #FF0000; */
  left: 0px;
  width: 66%;
  height: 26px;
  line-height: 26px;
  color: white;
  font-size: 12px;
  text-align: right;
}

.key_info {
  position: absolute;
  border-radius: 2px;
  /* border: 1px solid #FF0000; */
  left: 66%;
  top: 3px;
  height: 20px;
  line-height: 20px;
  background-color: #DBDBDB;
  color: #5B5B5B;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  margin-left: 10px;
  padding-left: 5px;
  padding-right: 5px;
}
/* .setting_pop .m01 {display:block;padding:5px 10px;font-size:15px;color:#fff;text-align:center;}
.setting_pop .m01:hover, .setting_pop .m01:active, .setting_pop .m01:focus {color:#ffcc00}
.setting_pop .m02 {display:block;padding:5px 10px;font-size:15px;color:#fff;text-align:center;}
.setting_pop .m02:hover, .setting_pop .m02:active, .setting_pop .m02:focus {color:#ffcc00}
.setting_pop .m03 {display:block;padding:5px 10px;font-size:15px;color:#fff;text-align:center;}
.setting_pop .m03:hover, .setting_pop .m03:active, .setting_pop .m03:focus {color:#ffcc00}
.setting_pop .m04 {display:block;padding:5px 10px;font-size:15px;color:#fff;text-align:center;}
.setting_pop .m04:hover, .setting_pop .m04:active, .setting_pop .m04:focus {color:#ffcc00}

.setting_pop .s01 {display:none;position:absolute;top:0%;left:115px;width:150px;background-color:rgba(0,0,0,0.6);z-index:10;padding:10px 0px 18px;}
.setting_pop .s01 .s01_link {display:block;padding:2px 10px 2px 10px;font-size:15px;line-height:20px;color:#fff;text-align:left;}
.setting_pop .s01 .s01_link:hover, .setting_pop .s01 .s01_link:active, .setting_pop .s01 .s01_link:focus {color:#ffcc00}

.setting_pop .s02 {display:none;position:absolute;top:-5%;left:115px;width:150px;background-color:rgba(0,0,0,0.6);z-index:10;padding:10px 0px 18px;}
.setting_pop .s02 .s02_link {display:block;padding:2px 10px 2px 10px;font-size:15px;line-height:20px;color:#fff;text-align:left;}
.setting_pop .s02 .s02_link:hover, .setting_pop .s02 .s02_link:active, .setting_pop .s02 .s02_link:focus {color:#ffcc00}

.setting_pop .s03 {display:none;position:absolute;top:-5%;left:115px;width:150px;background-color:rgba(0,0,0,0.6);z-index:10;padding:10px 0px 18px;}
.setting_pop .s03 .s03_link {display:block;padding:2px 10px 2px 10px;font-size:15px;line-height:20px;color:#fff;text-align:left;}
.setting_pop .s03 .s03_link:hover, .setting_pop .s03 .s03_link:active, .setting_pop .s03 .s03_link:focus {color:#ffcc00}

.setting_pop .s04 {display:none;position:absolute;top:-130px;left:115px;width:150px;background-color:rgba(0,0,0,0.6);z-index:10;padding:10px 0px 18px;}
.setting_pop .s04 .s04_link {display:block;padding:2px 10px 2px 10px;font-size:15px;line-height:20px;color:#fff;text-align:left;}
.setting_pop .s04 .s04_link:hover, .setting_pop .s04 .s04_link:active, .setting_pop .s04 .s04_link:focus {color:#ffcc00} */

/** 아이콘 버튼 */
.ico_menu {
  display:inline-block;
  vertical-align:middle;
  position:relative;
  width:35px;
  height:35px;
  background:url('../img/menu.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
}

.ico_menu:hover {
  display:inline-block;
  vertical-align:middle;
  position:relative;
  width:35px;
  height:35px;
  background:url('../img/menu_on.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
}

.ico_all {display:inline-block;vertical-align:middle;position:absolute;top:0px;right:40px;width:40px;height:40px;background:url('../img/in_full01.png') no-repeat center;cursor:pointer;text-indent:-999em;}
#pop_size_lt {
  display:block;
  /* border: 1px solid #000000; */
  vertical-align:middle;
  position:absolute;
  top:0px;
  left:0px;
  width:25px;
  height:25px;
  background:url('../img/resize_lt.svg') no-repeat center;
  background-size:cover;
  /* cursor:pointer; */
}
#pop_size_rt {
  display:block;
  /* border: 1px solid #000000; */
  vertical-align:middle;
  position:absolute;
  top:0px;
  right:0px;
  width:25px;
  height:25px;
  background:url('../img/resize_rt.svg') no-repeat center;
  background-size:cover;
  /* cursor:pointer; */
}
#pop_size_lb {
  display:block;
  /* border: 1px solid #000000; */
  vertical-align:middle;
  position:absolute;
  bottom:0px;
  left:0px;
  width:25px;
  height:25px;
  background:url('../img/resize_lb.svg') no-repeat center;
  background-size:cover;
  /* cursor:pointer; */
}
#pop_size_rb {
  display:block;
  /* border: 1px solid #000000; */
  vertical-align:middle;
  position:absolute;
  bottom:0px;
  right:0px;
  width:25px;
  height:25px;
  background:url('../img/resize_rb.svg') no-repeat center;
  background-size:cover;
  /* cursor:pointer; */
}

.ico_menuclip {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:35px;
  height:35px;
  top:0px;
  background:url('../img/menupin.svg') no-repeat center;
  cursor:pointer;
  z-index:200;
}
.ico_menuclip:hover {
  background:url('../img/menupin_on.svg') no-repeat center;
}
/* .ico_menuclip.on {
  background:url('../img/menupin_active.svg') no-repeat center;
} */

/* .ico_slider {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:35px;
  height:35px;
  top:5px;
  background:url('../img/slider.svg') no-repeat center;
  cursor:pointer;
  z-index:200;
}
.ico_slider:hover {
  background:url('../img/slider_on.svg') no-repeat center;
} */
/* .ico_slider.on {
  background:url('../img/slider_active.svg') no-repeat center;
} */

.ico_list {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:35px;
  height:35px;
  top:5px;
  background:url('../img/list.svg') no-repeat center;
  cursor:pointer;
  z-index:200;
}
.ico_list:hover {
  background:url('../img/list_on.svg') no-repeat center;
}
/* .ico_list.on {
  background:url('../img/list_active.svg') no-repeat center;
} */

.ico_book {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:35px;
  height:35px;
  top:10px;
  background:url('../img/bookmark.svg') no-repeat center;
  cursor:pointer;
  z-index:200;
}
.ico_book:hover {
  background:url('../img/bookmark_on.svg') no-repeat center;
}
/* .ico_book.on {
  background:url('../img/bookmark_active.svg') no-repeat center;
} */

.ico_book_add {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:35px;
  height:35px;
  top:15px;
  background:url('../img/bookmarkadd.svg') no-repeat center;
  cursor:pointer;
  z-index:200;
}
.ico_book_add:hover {
  background:url('../img/bookmarkadd_on.svg') no-repeat center;
}

.ico_play {
  position: relative;
  display:inline-block;
  vertical-align:middle;
  width:20px;
  height:30px;
  left:20px;
  background:url('../img/play.svg') no-repeat center;
  cursor:pointer;
  /* text-indent:-999em; */
  z-index:200;
}
.ico_play:hover {
  background:url('../img/play_on.svg') no-repeat center;
}

.center_play {display:inline-block;vertical-align:middle;cursor:pointer;text-indent:-999em;}

/* .ico_pause {
  position: relative;
  display:inline-block;
  vertical-align:middle;
  width:20px;
  height:20px;
  left:20px;
  background:url('../img/pause.svg') no-repeat center;
  cursor:pointer;
  z-index:200;
}
.ico_pause:hover {
  background:url('../img/pause_on.svg') no-repeat center;
} */

.center_pause {display:inline-block;vertical-align:middle;cursor:pointer;text-indent:-999em;}

.ico_volume {
  position: relative;
  display:inline-block;
  vertical-align:middle;
  width:20px;
  height:30px;
  left:34px;
  background:url('../img/sound_2step.svg') no-repeat center;
  cursor:pointer;
  /* text-indent:-999em; */
  z-index:200;
}
.ico_volume:hover {
  background:url('../img/sound_2step_on.svg') no-repeat center;
}

/* .ico_volume.on {background:url('../img/sound.png') no-repeat center;}
.ico_volume.on:hover {background:url('../img/sound_on.png') no-repeat center;} */

/* .ico_volume.off {background:url('../img/sound_mute.svg') no-repeat center;}
.ico_volume.off:hover {background:url('../img/sound_mute_on.svg') no-repeat center;} */

.ico_back {
  position: relative;
  display:inline-block;
  vertical-align:middle;
  width:20px;
  height:30px;
  left:48px;
  background:url('../img/back.svg') no-repeat center;
  cursor:pointer;
  /* text-indent:-999em; */
  z-index:200;
}
.ico_back:hover {
  background:url('../img/back_on.svg') no-repeat center;
}

.setting_moveTime {
  border-radius: 2px;
  position: relative;
  display:inline-block;
  vertical-align:middle;
  width:45px;
  height:15px;
  left:47px;
  background-color:#FFC4B9;
  cursor:pointer;
  /* text-indent:-999em; */
  color:#5B5B5B;
  text-align: center;
  font-weight: bold;
  font-size:11px;
  line-height:15px;
  z-index:200;
}
.setting_moveTime:hover {
  background-color:#FCEBE8;
}

.ico_front {
  position: relative;
  display:inline-block;
  vertical-align:middle;
  width:20px;
  height:30px;
  left:46px;
  background:url('../img/front.svg') no-repeat center;
  cursor:pointer;
  /* text-indent:-999em; */
  z-index:200;
}
.ico_front:hover {
  background:url('../img/front_on.svg') no-repeat center;
}

.timeinfo {
  position: relative;
  display:inline-block;
  vertical-align: middle;
  height:30px;
  left:50px;
  line-height:30px;
  /* margin-left:5px; */
  color:#fff;
  font-size:15px;
}

.volume_bar {
  display: none;
  background: #000000;
  border-radius: 3px;
  position: absolute;
  /* vertical-align:middle; */
  /* margin-left:5px;
  margin-right:5px; */
  width:20px;
  height:155px;
  left: 65px;
  bottom: 66px;
  z-index:200;
  cursor:grab;
  opacity: 0.7;
}

/* .volumeProgress {
  display: none;
  background: #FF6145;
  border-radius: 2px;
  position: absolute;
  width:18px;
  height:50px;
  left: 36px;
  bottom: 67px;
  z-index:200;
  cursor:grab;
} */

.moveTimeChange {
  display: none;
  background: #000000;
  border-radius: 3px;
  position: absolute;
  width:63px;
  height:135px;
  left: 113px;
  bottom: 66px;
  z-index:200;
  opacity: 0.7;
  cursor: pointer;
  user-select: none;
}

.moveTime_item {
  list-style: none;
  text-decoration: none;
  color: white;
  /* background-color: #2d2d2d; */
  line-height: 15px;
  vertical-align: middle;
  text-align: right;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 10px;
  padding-right: 5px;
}

.moveTime_item:hover {
  background-color: #BABABA;
  border-radius: 2px;
}

.selIcon {
  position: relative;
  visibility: hidden;
  vertical-align:middle;
  float:left;
  width:15px;
  height:15px;
  background:url('../img/check.svg') no-repeat center
}

/* .moveTime_item:active{
  font-weight: bold;
} */

/* .volumeArea {
  position: absolute;
  width:30px;
  height:220px;
  left: 60px;
  bottom: 5px;
  z-index:100;
  opacity:0;
} */

/* #volume_bar
.ui-widget-header {background: #000000;}
.ui-progressbar-value {background-color: #FF6145;} */

.ico_fullsize {
  position: relative;
  display:inline-block;
  vertical-align: middle;
  float: right;
  width:20px;
  height:30px;
  right:20px;
  background:url('../img/full.svg') no-repeat center;
  /* background-size: auto; */
  cursor:pointer;
  /* text-indent:-999em; */
  z-index:200;
}
.ico_fullsize:hover {
  background:url('../img/full_on.svg') no-repeat center;
}

.tooltip_box {
  position: absolute;
  display: inline-block;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
  -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
  box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 11px;
  height: 19px;
  line-height: 19px;
  padding: 2px 6px;
  z-index: 200;
}
/* .ico_fullsize:hover .full_tooltip {
  visibility: visible;
} */

.ico_in {
  position: relative;
  display:inline-block;
  vertical-align: middle;
  float: right;
  width:20px;
  height:30px;
  right:40px;
  background:url('../img/videosh.svg') no-repeat center;
  /* background-size: auto; */
  cursor:pointer;
  /* text-indent:-999em; */
  z-index:200;
}
.ico_in:hover {
  background:url('../img/videosh_on.svg') no-repeat center;
}

.ico_setting {
  position: relative;
  display:inline-block;
  vertical-align: middle;
  float: right;
  width:20px;
  height:30px;
  right:60px;
  background:url('../img/setting.svg') no-repeat center;
  /* background-size: auto; */
  cursor:pointer;
  /* text-indent:-999em; */
  z-index:200;
}
.ico_setting:hover, .ico_setting.on {
  background:url('../img/setting_on.svg') no-repeat center;
}

/* 책갈피 */
.bookmark{
	overflow: hidden;
	position: absolute;
  /* visibility: hidden; */
  display: none;
  border-radius: 3px;
  background : rgba(0, 0, 0, 0.7);
  top: 5px;
  right: 5px;
  bottom: 66px;
	width: 185px;
  color: white;
	font-size: 11px;
	text-align: center;
	/* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	-webkit-overflow-scrolling: auto; */
  z-index: 200;
}

.bookmark_top {
  position: absolute;
  /* border: 1px solid #FF0000; */
  top: 0px;
  left: 0px;
  width: 100%;
  height: 26px;
}

.bookmark_close{
  position: absolute;
  /* border: 1px solid #FF0000; */
  vertical-align: middle;
  left: 5px;
  top: 5px;
  width: 77px;
  height: 16px;
  cursor: pointer;
  user-select: none;
}

.bookmark_back{
  position: absolute;
  display: inline-block;
  /* border: 1px solid #FF0000; */
  background: url('../img/menu_back.svg') no-repeat center;
  top: 0px;
  left: 0px;
  width: 16px;
  height: 16px;
  z-index: 200;
}

.bookmark_title{
  position: absolute;
  display: inline-block;
  /* border: 1px solid #FF0000; */
  top: 0px;
  left: 21px;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
  z-index: 200;
}

.bookmark_alldelete{
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  border-radius: 1px;
  background-color: #C7C7C7;
  color: #707070;
  font-size: 10px;
  top: 6px;
  right: 7px;
  height: 14px;
  line-height: 14px;
  padding: 0px 4px;
  cursor: pointer;
  user-select: none;
  z-index: 200;
}
.bookmark_alldelete:hover{
  background-color: #FFFFFF;
}

.bookmark_list {
  overflow: hidden;
  position: absolute;
  /* border: 1px solid #FF0000; */
  top: 26px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  color: white;
  font-size: 11px;
  text-align: center;
  /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  -webkit-overflow-scrolling: auto; */
  z-index: 200;
}

.book_thumb {
  position: relative;
  border-radius: 8px;
  background : rgba(0, 0, 0, 0.7);
  border: 2px solid #6A6A6A;
  left: 20px;
  top: 15px;
  right: 20px;
  width: 128px;
  height: 72px;
  z-index: 200;
  /* opacity: 0.7; */
}
.book_thumb:hover {
  border: 2px solid #FF0000;
}

.book_trash {
  float: left;
  position: relative;
  display: inline-block;
  vertical-align:middle;
  left: 25px;
  bottom: 13px;
  width: 23px;
  height: 23px;
  background:url('../img/trash.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
}
.book_trash:hover{
  background:url('../img/trash_on.svg') no-repeat center;
}

.book_time {
  float: right;
  border-radius: 3px;
  position: relative;
  display: inline-block;
  vertical-align:middle;
  /* width:50px; */
  height:15px;
  right:10px;
  bottom:10px;
  padding: 2px 6px;
  line-height:15px;
  background-color:rgba(0, 0, 0, 0.7);
  /* text-indent:-999em; */
  color:#FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size:11px;
  z-index:200;
  user-select: none;
}

/* .bookmark_layer {
  visibility: hidden;
  position: absolute;
  background-color: rgba(255,255,255,0.3);
  width: 100%;
  height: 100%;
  z-index:300;
} */

/* 리스트 슬라이더 */
.notelist{
	overflow: hidden;
	position: absolute;
  /* visibility: hidden; */
  display: none;
  border-radius: 3px;
  background : rgba(0, 0, 0, 0.7);
  top: 5px;
  right: 5px;
  bottom: 66px;
	width: 185px;
  color: white;
	font-size: 11px;
	text-align: center;
	/* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	-webkit-overflow-scrolling: auto; */
  z-index: 200;
}

.notelist_top {
  position: absolute;
  /* border: 1px solid #FF0000; */
  top: 0px;
  left: 0px;
  width: 100%;
  height: 26px;
}

.notelist_close{
  position: absolute;
  /* border: 1px solid #FF0000; */
  vertical-align: middle;
  left: 5px;
  top: 5px;
  width: 100%;
  height: 16px;
  cursor: pointer;
  user-select: none;
}

.notelist_back{
  position: absolute;
  display: inline-block;
  /* border: 1px solid #FF0000; */
  background: url('../img/menu_back.svg') no-repeat center;
  top: 0px;
  left: 0px;
  width: 16px;
  height: 16px;
  z-index: 200;
}

.notelist_title{
  position: absolute;
  display: inline-block;
  /* border: 1px solid #FF0000; */
  top: 0px;
  left: 21px;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
  z-index: 200;
}

.notelist_list {
  overflow: hidden;
  position: absolute;
  /* border: 1px solid #FF0000; */
  top: 26px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  color: white;
  font-size: 11px;
  text-align: center;
  /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  -webkit-overflow-scrolling: auto; */
  z-index: 200;
}

.notelist_thumb {
  position: relative;
  border-radius: 8px;
  background : rgba(0, 0, 0, 0.7);
  border: 2px solid #6A6A6A;
  left: 20px;
  top: 15px;
  right: 20px;
  width: 128px;
  height: 72px;
  z-index: 200;
  /* opacity: 0.7; */
}
.notelist_thumb:hover {
  border: 2px solid #FF0000;
}

.notelist_page {
  float: right;
  border-radius: 3px;
  position: relative;
  display: block;
  /* vertical-align:middle; */
  /* width:50px; */
  height:15px;
  right:10px;
  bottom:55px;
  padding: 2px 6px;
  line-height:15px;
  background-color:rgba(0, 0, 0, 0.7);
  /* text-indent:-999em; */
  color:#FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size:11px;
  z-index:200;
  user-select: none;
}

.notelist_time {
  float: right;
  border-radius: 3px;
  position: relative;
  display: block;
  /* vertical-align:middle; */
  /* width:50px; */
  height:15px;
  left:38px;
  bottom:10px;
  padding: 2px 6px;
  line-height:15px;
  background-color:rgba(0, 0, 0, 0.7);
  /* text-indent:-999em; */
  color:#FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size:11px;
  z-index:200;
  user-select: none;
}

.bookmark_mobile {
  /* overflow: hidden; */
  position: absolute;
  /* visibility: hidden; */
  /* border: 1px solid #FF0000; */
  display: none;
  /* border-radius: 3px;
  background : rgba(0, 0, 0, 0.7); */
  left: 0px;
  top: calc(50% - 70px);
  width: 100%;
  height: 140px;
  color: white;
  font-size: 11px;
  text-align: center;
  /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  -webkit-overflow-scrolling: auto; */
  z-index: 200;
}

.notelist_mobile {
  /* overflow: hidden; */
  position: absolute;
  /* visibility: hidden; */
  /* border: 1px solid #FF0000; */
  display: none;
  /* border-radius: 3px;
  background : rgba(0, 0, 0, 0.7); */
  left: 0px;
  top: calc(50% - 70px);
  width: 100%;
  height: 140px;
  color: white;
  font-size: 11px;
  text-align: center;
  /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  -webkit-overflow-scrolling: auto; */
  z-index: 200;
}

#notelist_list_mobile
{
  width: 100%;
  height: 100%;
  /* border: 1px solid #00FF00; */
  position: relative;
  overflow: hidden;
}
#notelist_list_mobile div.scrollableArea a
{
  position: relative;
  float: left;
  margin: 0;
  /* padding: 0 5px; */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
#bookmark_list_mobile
{
  width: 100%;
  height: 100%;
  /* border: 1px solid #00FF00; */
  position: relative;
  overflow: hidden;
}
#bookmark_list_mobile div.scrollableArea a
{
  position: relative;
  float: left;
  margin: 0;
  /* padding: 0 5px; */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.bookmark_eachlist_mobile {
  position: relative;
  display: inline-block;
  /* border-radius: 5px; */
  /* border: 1px solid #FF0000; */
  margin: 0 5px;
  width: 250px;
  height: 100%;
  /* left: 10px; */
  z-index: 200;
}

.notelist_eachlist_mobile {
  position: relative;
  display: inline-block;
  /* border-radius: 5px; */
  /* border: 1px solid #FF0000; */
  margin: 0 5px;
  width: 250px;
  height: 100%;
  /* border: 1px solid #00FF00; */
  z-index: 200;
}

.bookmark_thumb_mobile {
  position: absolute;
  border-radius: 5px;
  /* background : rgba(0, 0, 0, 0.7); */
  /* border: 2px solid #6A6A6A; */
  /* left: 5px; */
  /* top: 15px;
  right: 20px; */
  width: 100%;
  height: 100%;
  z-index: 200;
  /* opacity: 0.7; */
}

.notelist_thumb_mobile {
  position: absolute;
  border-radius: 5px;
  /* background : rgba(0, 0, 0, 0.7); */
  /* border: 2px solid #6A6A6A; */
  /* left: 5px; */
  /* top: 15px;
  right: 20px; */
  width: 100%;
  height: 100%;
  z-index: 200;
  /* opacity: 0.7; */
}

.bookmark_trash_mobile {
  float: left;
  position: absolute;
  display: block;
  left:5px;
  bottom:0px;
  width:46px;
  height:46px;
  background:url('../img/trash_mobile.svg') no-repeat center;
  cursor:pointer;
  z-index: 200;
  user-select: none;
}

.notelist_page_mobile {
  float: left;
  border-radius: 3px;
  position: absolute;
  display: block;
  /* vertical-align:middle; */
  /* width:50px; */
  height:15px;
  left:5px;
  top:5px;
  padding: 2px 5px;
  line-height:15px;
  background-color:rgba(0, 0, 0, 0.7);
  /* text-indent:-999em; */
  color:#FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size:11px;
  z-index:200;
  user-select: none;
}

.bookmark_time_mobile {
  float: right;
  border-radius: 3px;
  position: absolute;
  display: block;
  /* vertical-align:middle; */
  /* width:50px; */
  height: 15px;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  line-height:15px;
  background-color:rgba(0, 0, 0, 0.7);
  /* text-indent:-999em; */
  color:#FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size:11px;
  z-index:200;
  user-select: none;
}

.notelist_time_mobile {
  float: right;
  border-radius: 3px;
  position: absolute;
  display: block;
  /* vertical-align:middle; */
  /* width:50px; */
  height: 15px;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  line-height:15px;
  background-color:rgba(0, 0, 0, 0.7);
  /* text-indent:-999em; */
  color:#FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size:11px;
  z-index:200;
  user-select: none;
}

/* 바둑판 슬라이더 */
.content3{
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: 14px;
	text-align: center;
	margin-left:0%;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
}

/* 모바일 북마크 */
.content4{
	display:block;
	bottom:0px;
	width:100%;
	height:15%;
	z-index:100;
	text-align:left;
	white-space:nowrap;
	position:fixed;
	left:0px;
	margin: 0px 0px 0px 0px;
	background: linear-gradient(to bottom, transparent, black) no-repeat bottom;
}

/* 모바일 하단 3개 슬라이더 */
.content5{
	display:block;
	position:absolute;
	bottom:0px;
	width:100%;
	z-index:100;
	text-align: center;
	white-space:nowrap;
}

/* 모바일 노트 리스트 */
.content6{
	display:block;
	bottom:0px;
	width:100%;
	height:15%;
	z-index:100;
	text-align:left;
	white-space:nowrap;
	position:fixed;
	left:0px;
	margin: 0px 0px 0px 0px;
	background: linear-gradient(to bottom, transparent, black) no-repeat bottom;
}

.setting_menu_mobile {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 230px;
  height: 75px;
  vertical-align: middle;
  z-index: 200;
}

.contiplay_mobile {
  position: absolute;
  left: 0px;
  width: 75px;
  height: 75px;
  /* transform: translate(-50%, -50%); */
  background:url('../img/contiplay_mobile.svg') no-repeat center;
  z-index: 200;
}

.movsec_mobile {
  position: absolute;
  left: 155px;
  width: 75px;
  height: 75px;
  /* transform: translate(-50%, -50%); */
  background:url('../img/movsec_mobile.svg') no-repeat center;
  z-index: 200;
}

/* .language_mobile {
  position: absolute;
  left: 260px;
  width: 75px;
  height: 75px;
  background:url('../img/language_mobile.svg') no-repeat center;
  z-index: 200;
} */

.setting_conti_mobile {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 224px;
  height: 72px;
  vertical-align: middle;
  z-index: 200;
}

.conti_on_mobile {
  position: absolute;
  left: 0px;
  width: 72px;
  height: 72px;
  /* transform: translate(-50%, -50%); */
  background:url('../img/contiplay_on.svg') no-repeat center;
  z-index: 200;
}

.conti_off_mobile {
  position: absolute;
  left: 152px;
  width: 72px;
  height: 72px;
  /* transform: translate(-50%, -50%); */
  background:url('../img/contiplay_off.svg') no-repeat center;
  z-index: 200;
}

.setting_movsec_mobile {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 72px;
  vertical-align: middle;
  z-index: 200;
}

.movsec_5_mobile {
  position: absolute;
  left: 0px;
  width: 60px;
  height: 60px;
  /* transform: translate(-50%, -50%); */
  background:url('../img/movsec_5.svg') no-repeat center;
  z-index: 200;
}
.movsec_10_mobile {
  position: absolute;
  left: 80px;
  width: 60px;
  height: 60px;
  /* transform: translate(-50%, -50%); */
  background:url('../img/movsec_10.svg') no-repeat center;
  z-index: 200;
}
.movsec_20_mobile {
  position: absolute;
  left: 160px;
  width: 60px;
  height: 60px;
  /* transform: translate(-50%, -50%); */
  background:url('../img/movsec_20.svg') no-repeat center;
  z-index: 200;
}
.movsec_30_mobile {
  position: absolute;
  left: 240px;
  width: 60px;
  height: 60px;
  /* transform: translate(-50%, -50%); */
  background:url('../img/movsec_30.svg') no-repeat center;
  z-index: 200;
}
.movsec_60_mobile {
  position: absolute;
  left: 320px;
  width: 60px;
  height: 60px;
  /* transform: translate(-50%, -50%); */
  background:url('../img/movsec_60.svg') no-repeat center;
  z-index: 200;
}

/* .setting_lang_mobile {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 145px;
  height: 32px;
  z-index: 200;
}
.lang_ko_mobile {
  position: absolute;
  left: 0px;
  width: 72px;
  height: 32px;
  color:#FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size:24px;
  z-index:200;
  user-select: none;
}
.lang_en_mobile {
  position: absolute;
  left: 97px;
  width: 48px;
  height: 32px;
  color:#FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size:24px;
  z-index:200;
  user-select: none;
} */

/* 모바일 환경 설정 */
.content7{
	display:block;
	position:absolute;
	bottom:0px;
	width:100%;
	height:25%;
	z-index:100;
	background : rgba(0, 0, 0, 0.5);
	overflow-x:hidden;
	white-space:nowrap;
	float:left;
}

.message_box{
  position: absolute;
  display: none;
  /* border: 1px solid #FF0000; */
  border-radius: 6px;
  vertical-align: middle;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  /* width: 80%; */
  height: 39px;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 200;
  user-select: none;
}

.message_title{
  position: relative;
  display: inline-block;
  /* border: 1px solid #FF0000; */
  vertical-align: middle;
  left: 20px;
  top: 10px;
  height: 19px;
  line-height: 19px;
  color: #FFFFFF;
  font-size: 14px;
}

.message_empty{
  position: relative;
  display: inline-block;
  /* border: 1px solid #FF0000; */
  vertical-align: middle;
  top: 10px;
  left: 14px;
  width: 98px;
  height: 19px;
  line-height: 19px;
}

.message_cancel{
  float: right;
  position: relative;
  display: inline-block;
  /* border: 1px solid #FF0000; */
  vertical-align: middle;
  top: 10px;
  right: 20px;
  height: 19px;
  line-height: 19px;
  color: #FF6145;
  font-size: 14px;
}

.mylist {
    list-style-type: none;
    padding: 10px;
    margin: 10px;
	text-align: right;
    padding-left: 30px;
    padding-bottom: 4px;
	color:white;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.list {
  flex: 0 80%;
}
.list__item {
  position: relative;
}
.list__item:hover label {
  color: #BB4430;
}
.list__item:hover .label::before {
  border: 5px solid #BB4430;
}

.radio-btn {
  position: absolute;
  visibility: hidden;
}
.radio-btn:checked ~ .label {
  color: #BB4430;
}
.radio-btn:checked ~ .label::before {
  border: 5px solid #BB4430;
  background: #F8F7FF;
}

.label {
  display: flex;
  align-items: center;
  padding: 3px 0 3px 3px;
  color: #F8F7FF;
  font-size: 10px;
  font-weight: 20;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s linear;
}

.label::before {
  display: block;
  content: '';
  border: 5px solid #F8F7FF;
  border-radius: 50%;
  height: 10px;
  width: 10px;
  margin-right: 10px;
  transition: all .25s linear;
}

.label2 {
  display: flex;
  align-items: center;
  padding: 3px 0 3px 3px;
  color: #F8F7FF;
  font-size: 10px;
  font-weight: 20;
}

.label3 {
  display: flex;
  align-items: center;
  padding: 3px 0 3px 3px;
  color: #F8F7FF;
  font-size: 10px;
  font-weight: 20;
}

#load {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	display: block;
	opacity: 0.8;
	background : rgba(0, 0, 0, 0.5);
	z-index: 99;
	text-align: center;
}

#load > img {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 100;
}

body::-webkit-scrollbar {
    display: none;
}

/* 바둑판 레이어 및 효과  */
.wrapper {
    margin: 0 auto;
	max-width: 65%;
	height: auto
}

.wrapper:after {
    content: '';
    display: table;
    clear: both
}

.pic {
  max-width: 250px;
  max-height: 100%;
	bottom:0px;
	left:0px;
	padding: 0px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
	text-align: left;
}

.pic-3d {
 	margin: 0px;
	bottom:0px;
	padding: 0px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
	text-align: left;
}

.pic-caption {
    cursor: default;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    padding: 0px;
    text-align: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0
}

.pic:hover .open-left {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -moz-touch-callout: none;
    -o-touch-callout: none;
    -ms-touch-callout: none;
    touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    -o-tap-highlight-color: transparent;
    -ms-tap-highlight-color: transparent;
    tap-highlight-color: transparent
}

.open-left {
    left: 0px;
    top: 0px;
}

.pic_del {
	position:absolute;
	display:block;
	max-width: 320px;
    max-height: 240px;
	right:0px;
	padding:0 0 0 0;
}

.pic_date {
	position:absolute;
	display:block;
	max-width: 320px;
    max-height: 240px;
	bottom:0px;
	right:0px;
	padding:0 0 0 0;
	font-size:15px;
}

/* video time tooltip */
.tooltip-con{
   /* background-color:#555;
   padding:10px;
   width:70px;
   color:white;
   position: absolute;
   text-align: center;
   display:none;
   margin-top:30px; */
   position: absolute;
   display: none;
   background-color: rgba(0, 0, 0, 0.7);
   -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
   -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
   box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   color: #FFFFFF;
   font-size: 11px;
   height: 19px;
   line-height: 19px;
   padding: 2px 6px;
   z-index: 200;
}
/* .tooltip-bar{
   background-color:#fff;
   padding:10px;
   width:40px;
   color:white;
   position: absolute;
   text-align: center;
   display:none;
   margin-top:30px;
} */

.n_before_button{
  position:absolute;
  top:50%;
  left:30%;
  z-index:200;
}

.before_button{
  position:absolute;
  top:50%;
  left:40%;
  z-index:200;
}

.center_button{
  position: absolute;

  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;

  margin-top: -50px;
  margin-left: -50px;
  text-align: center;

  /* transform: translate(-50%, -50%); */

  background:url('../img/center_play.svg') no-repeat center;
  background-size : cover;
  z-index:198;

  /* -webkit-animation: zoomIn;
  animation: zoomIn;
  -moz-animation: zoomIn;
  -o-animation: zoomIn; */
}

.center_button_mobile{
  position: absolute;

  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;

  margin-top: -25px;
  margin-left: -25px;
  text-align: center;
  /* width: 75px;
  height: 75px;

  margin: 0;


  transform: translate(-50%, -50%); */

  background:url('../img/center_play_mobile.svg') no-repeat center;
  background-size:cover;
  z-index:190;

  /* -webkit-animation: zoomIn;
  animation: zoomIn;
  -moz-animation: zoomIn;
  -o-animation: zoomIn; */
}

@-webkit-keyframes zoomIn {
  0% {
      transform: scale(1.0);
      opacity: .8;

  }
  /* 25%,
  75% {
      transform: scale(1.8);
      opacity: 0;
      margin: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  } */
  50% {
      transform: scale(1.5);
      opacity: .4;
      /* margin: 0;
      top: 45%;
      left: 45%;
      transform: translate(-55%, -55%); */
  }
  100% {
      transform: scale(2.0);
      opacity: 0;
      /* margin: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); */
  }
}
@keyframes zoomIn {
  0% {
      transform: scale(1.0);
      opacity: .8
  }
  /* 25%,
  75% {
      transform: scale(1.8);
      opacity: 0;
      margin: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  } */
  50% {
      transform: scale(1.5);
      opacity: .4;
      /* margin: 0;
      top: 45%;
      left: 45%;
      transform: translate(-55%, -55%); */
  }
  100% {
      transform: scale(2.0);
      opacity: 0;
      /* margin: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); */
  }
}
@-moz-keyframes zoomIn {
  0% {
      transform: scale(1.0);
      opacity: .8
  }
  /* 25%,
  75% {
      transform: scale(1.8);
      opacity: 0;
      margin: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  } */
  50% {
      transform: scale(1.5);
      opacity: .4;
      /* margin: 0;
      top: 45%;
      left: 45%;
      transform: translate(-55%, -55%); */
  }
  100% {
      transform: scale(2.0);
      opacity: 0;
      /* margin: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); */
  }
}
@-o-keyframes zoomIn {
  0% {
      transform: scale(1.0);
      opacity: .8
  }
  /* 25%,
  75% {
      transform: scale(1.8);
      opacity: 0;
      margin: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  } */
  50% {
      transform: scale(1.5);
      opacity: .4;
      /* margin: 0;
      top: 45%;
      left: 45%;
      transform: translate(-55%, -55%); */
  }
  100% {
      transform: scale(2.0);
      opacity: 0;
      /* margin: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); */
  }
}

.next_button{
  position:absolute;
  top:50%;
  left:60%;
  z-index:200;
}

.n_next_button{
  position:absolute;
  top:50%;
  left:70%;
  z-index:200;
}

/* tooltip */
[data-tooltip-text]:hover {
	position: relative;
}

[data-tooltip-text]:hover:after {
	/* background-color: #000000; */
	background-color: rgba(0, 0, 0, 0.7);

	-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	color: #FFFFFF;
	font-size: 11px;
	content: attr(data-tooltip-text);

  /* margin-bottom: 10px; */
	/* top: 100%; */
	/* left: 35px; */
	padding: 7px 12px;
	position: absolute;
	width: auto;
	min-width: 50px;
	max-width: 300px;
	word-wrap: break-word;

	z-index: 9999;
}

#pdf-loading-bar {
	width: 150px;
	margin: 0 auto;
	border: 1px solid #cccccc;
	padding: 5px;
	height: 30px;
}

#pdf-loading-completed {
	width: 100px;
	display: inline-block;
	background-color: #FECE1A;
	height: 100%;
}

#page-loader {
	width: 200px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	display: none;
	color: #999999;
}

#pdf-main-container {
	width: 400px;
	margin: 20px auto;
}
/* .loader {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  left:50%;
  margin-left:-25px;
  top:50%;
  margin-top:-25px;
  display: block;
  position: absolute;
  vertical-align: middle;
}
.loader,
.loader:before,
.loader:after {
  animation: 1s infinite ease-in-out;
}
.loader:before,
.loader:after {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.loader-black { background-color: #ff6145; }

.loader-5 {
  animation: loader5 1s infinite linear;
}

@keyframes loader5 {
  0% {   transform: rotate(0deg); border-radius: 50%; }
  50% {  transform: rotate(90deg); border-radius: 0%; }
  100% { transform: rotate(180deg); border-radius: 50%; }
} */