@charset "UTF-8";
/* 페이지 레이아웃 */
/*CSS 초기화*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-style: normal;
  vertical-align: baseline;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

article,
aside,
details,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

table {
  border-collapse: collapse;
  width: 100%;
}

button {
  cursor: pointer;
  border: none;
}

input[type=radio] {
  position: relative;
  top: 2px;
}

input[type=checkbox] {
  position: relative;
  top: 2px;
  margin: 0;
}

.full_width_input {
  /*서식폼에서 폭을 전체 차지 하는 인풋요소를 위한 공통 클래스*/
  width: 97%;
}

.check_label {
  margin: 0 10px 0 3px;
}

/*checkbox ,radio 용 라벨 설정*/
.required_label span {
  display: none;
}

/*필수 입력 요소 표시*/
blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

img {
  border: 0;
  vertical-align: top;
}

ul,
ol {
  padding-left: 40px;
}

/* 접근성 관련 숨김요소 */
a.accesibility {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

a.accesibility:focus {
  /*키보드 포커스시*/
  position: static;
  display: block;
  width: 100%;
  height: 25px;
  background: #000000;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}

/*숨김요소*/
.hidden {
  visibility: hidden;
  height: 0px !important;
  padding: 0px !important;
  margin: 0px !important;
  border: 0px !important;
  overflow: hidden;
}

/*coForward 이름 단어 설정*/
.coforward {
  color: #0099D8;
  font-style: normal;
  font-weight: bold;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.coforward span {
  color: #0850A0;
  font-variant: small-caps;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.coforward_w {
  color: #FFFFFF;
  font-style: normal;
  font-weight: bold;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.coforward_w span {
  color: #FFFFFF;
  font-variant: small-caps;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

html, body {
  height: 100%;
  margin: 0;
}

#Page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

#Page_body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#Content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#viewfinder {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.counter {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.counter svg circle {
  stroke-dasharray: 753.6;
  stroke-dashoffset: 753.6;
  transform: rotate(-90deg);
  transform-origin: center;
}
.counter .count-number {
  position: absolute;
  font-size: 10rem;
  font-weight: bold;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.counter.run {
  display: flex;
}
.counter.run svg circle {
  animation: drawCircle 1s 5 linear;
}

@keyframes drawCircle {
  0% {
    stroke-dashoffset: 753.6;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.canvas-viewport {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#frameCanvas,
.canvas-viewport .upper-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#guestBookVideo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  transition: filter 0.2s;
}

.filter-list {
  display: flex;
}
.filter-list button {
  width: 80px;
}

.frame-list {
  display: flex;
}
.frame-list button {
  width: 100px;
}
.frame-list button img {
  width: 100%;
}/*# sourceMappingURL=style.css.map */