@import "reset.css";
@font-face {
  font-family: "Quicksand-B";
  src: url(../fonts/TW-QUICKSAND-BOLD.woff) format("woff");
}
@font-face {
  font-family: "Quicksand-L";
  src: url(../fonts/TW-QUICKSAND-LIGHT.woff) format("woff");
}
@font-face {
  font-family: "Quicksand-SB";
  src: url(../fonts/TW-QUICKSAND-SEMIBOLD.woff) format("woff");
}
@font-face {
  font-family: "Quicksand-R";
  src: url(../fonts/TW-QUICKSAND-REGULAR.woff) format("woff");
}
@font-face {
  font-family: "Quicksand-M";
  src: url(../fonts/TW-QUICKSAND-MEDIUM.woff) format("woff");
}
@font-face {
  font-family: "Axiforma-Black";
  src: url(../fonts/Axiforma-Black.woff) format("woff");
}
@font-face {
  font-family: "Axiforma-Bold";
  src: url(../fonts/Axiforma-Bold.woff) format("woff");
}
@font-face {
  font-family: "Fredoka";
  src: url(../fonts/Fredoka.woff) format("woff");
}
@font-face {
  font-family: "Fredoka-Bold";
  src: url(../fonts/Fredoka-Bold.woff) format("woff");
}
@font-face {
  font-family: "Fredoka-SemiBold";
  src: url(../fonts/Fredoka-SemiBold.woff) format("woff");
}
@font-face {
  font-family: "Roboto-M";
  src: url(../fonts/Roboto-Medium.woff) format("woff");
}
@font-face {
  font-family: "NotoSansKr-Black";
  src: url(../fonts/NotoSansKR-Black.woff) format("woff");
}
@font-face {
  font-family: "NotoSansKr-Bold";
  src: url(../fonts/NotoSansKR-Bold.woff) format("woff");
}
@font-face {
  font-family: "NotoSansKr-Medium";
  src: url(../fonts/NotoSansKR-Medium.woff) format("woff");
}
@font-face {
  font-family: "NotoSansKr-Regular";
  src: url(../fonts/NotoSansKR-Regular.woff) format("woff");
}
@font-face {
  font-family: "NotoSansKr-Light";
  src: url(../fonts/NotoSansKR-Light.woff) format("woff");
}
* {
  box-sizing: border-box;
}

body {
  font-family: "Quicksand-B", sans-serif;
}

body * {
  background-repeat: no-repeat;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.viewer_wrap {
  width: 1920px;
  height: 1080px;
}
.viewer_wrap.toCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  visibility: hidden;
}

._dis_n {
  display: none !important;
}

.viewer_content {
  position: relative;
  width: 100%;
  height: 100%;
}

.viewer_header .btn_home {
  background-image: url("../image/common/btn_home.png");
  width: 128px;
  height: 140px;
  position: absolute;
  top: 20px;
  left: 32px;
}
.viewer_header .btn_back {
  background-image: url("../image/common/btn_back.png");
  width: 128px;
  height: 140px;
  position: absolute;
  top: 20px;
  left: 184px;
}

a[class^=btn_] {
  display: inline-block;
  z-index: 100;
}

.btn_sound {
  background-image: url("../image/common/btn_sound.png");
  width: 160px;
  height: 170px;
  display: inline-block;
  border-radius: 80px;
}

.btn_play {
  background-image: url("../image/common/btn_play.png");
  display: inline-block;
  width: 108px;
  height: 120px;
  border-radius: 54px;
}
.btn_play.pause {
  background-image: url("../image/common/btn_pause.png");
}

.btn_stop {
  background-image: url("../image/common/btn_stop.png");
  display: inline-block;
  width: 108px;
  height: 120px;
  border-radius: 54px;
}

.btn_replay {
  background-image: url("../image/common/btn_replay_off.png");
  display: inline-block;
  width: 108px;
  height: 120px;
  border-radius: 54px;
}
.btn_replay.on {
  background-image: url("../image/common/btn_replay_on.png");
}

.controller_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.controller_wrap .progress_wrap {
  height: 32px;
  background-color: #999;
  border-radius: 16px;
  position: relative;
}
.controller_wrap .progress_wrap .progress_bar {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.controller_wrap .progress_wrap .progress_bar .percent {
  height: 100%;
  width: 0;
  background-color: #dc435b;
}
.controller_wrap .progress_wrap .handle {
  width: 72px;
  height: 72px;
  border-radius: 36px;
  border: 10px solid #fff;
  cursor: pointer;
  position: absolute;
  top: -20px;
  left: 0;
  background-color: #dc435b;
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.2);
  transform: translateX(-36px);
}

.c_white {
  color: #fff;
}

.c_red {
  color: red;
}

.t_stroke {
  text-shadow: 2px -3px 0 #FFF, 1px -3px 0 #FFF, 0 -3px 0 #FFF, -1px -3px 0 #FFF, -2px -3px 0 #FFF, -3px -3px 0 #FFF, -3px -2px 0 #FFF, -3px -1px 0 #FFF, -3px 0 0 #FFF, -3px 1px 0 #FFF, -3px 2px 0 #FFF, -3px 3px 0 #FFF, 3px -3px 0 #FFF, 3px -2px 0 #FFF, 3px -1px 0 #FFF, 3px 0px 0 #FFF, 3px 1px 0 #FFF, 3px 2px 0 #FFF, 3px 3px 0 #FFF, 2px 3px 0 #FFF, 1px 3px 0 #FFF, 0px 3px 0 #FFF, -1px 3px 0 #FFF, -2px 3px 0 #FFF, -3px 3px 0 #FFF;
}
.t_stroke._2 {
  text-shadow: -3px -3px 0 #FFF, 3px -3px 0 #FFF, -3px 3px 0 #FFF, 3px 3px 0 #FFF;
}

@keyframes bounce_1 {
  0% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(5px);
  }
}
@keyframes bounce_2 {
  0% {
    transform: translateY(15px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(15px);
  }
}
@keyframes bounce_3 {
  0% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(-5px);
  }
}
._safari_ui {
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
}
._safari_ui .btn_play_start {
  background-image: url("../../act_common/image/common/btn_play_overlap.png");
  width: 180px;
  height: 192px;
  position: absolute;
  top: calc(50% - 97px);
  left: calc(50% - 90px);
}

img {
  border-image: url(../image/transparent.png);
  transform: translateZ(0);
}

/*# sourceMappingURL=common.css.map */