@charset "utf-8";

body {
	background: #e4f3f2;
}

.base {
	display: inline-block;
	position: absolute;
	width: 1920px;
	height: 1016px;
	font-family: 'NanumSquareRound';
	font-weight: 400;
}

.base.align {
	top: 50%;
	left: 50%;
	margin-top: -508px;
	margin-left: -910px;
}

#container {
	position: relative;
	height: 100%;
	background-color: transparent;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* fullscreen btn */
.btn_wrap.top {
	position: absolute;
	top: 22px;
	right: 50px;
	z-index: 100;
}

.btn_wrap.top .btn.screen.fullscreen {
	width: 74px;
	height: 74px;
	background: url(../img/btn_fullscreen.png) 0px 0px no-repeat;
	text-indent: -999px;
	overflow: hidden;
}

.btn_wrap.top .btn.screen.fullscreen.disable {
	width: 64px;
	height: 64px;
	background: url(../img/btn_fullscreen.png) 0px 0px no-repeat;
	text-indent: -999px;
	overflow: hidden;
	filter: grayscale(80%);
	opacity: 0.2;
	cursor: default;
	pointer-events: none;
}

.btn_wrap.top .btn.screen.fullscreen.on {
	background: url(../img/btn_fullscreen_on.png) 0px 0px no-repeat;
}

/* timer - common */
@media all and (max-width: 375px), all and (max-height: 350px) {
	.btn_wrap.top {
		display: none;
	}
}

/* ------------------------------------------------------------------------------------------------------------- */
/* tab */
.tab_menu {
	position: relative;
	position: absolute;
	left: 50px;
	top: -52px;
	height: 90px;
	z-index: 10;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 40px;
	width: 100%;
	max-width: 1814px;
}
.tab_menu::after {
	content: '';
	width: 100%;
	height: 2px;
	background: #6f7a7a;
	position: absolute;
	left: 5px;
	bottom: 0;
	opacity: 0.2;
}
.tab_menu li {
	position: relative;
	z-index: 2;
}

.tab_menu li a {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	position: relative;
	height: 72px;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	font-size: 37px;
	color: #babfbe;
	text-align: center;
	cursor: pointer;
}

.tab_menu li a.on {
	color: #00a0cc;
}

.tab_menu li a.on:before {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100%;
	height: 6px;
	background: #00a0cc;
	border-radius: 8px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* presentation helper - drawing + ladder */
.pt_helper {
	padding-top: 74px;
}

.pt_helper.draw {
	will-change: background-image;
	background: #dceeff url('../img/intro_number/intro_01.png') no-repeat left bottom;
	animation: changeBackground 3.72s steps(1) forwards;
	will-change: background-image;
}
@keyframes changeBackground {
	0% {
		background-image: url('../img/intro_number/intro_01.png');
	}
	2.77% {
		background-image: url('../img/intro_number/intro_02.png');
	}
	5.55% {
		background-image: url('../img/intro_number/intro_03.png');
	}
	8.33% {
		background-image: url('../img/intro_number/intro_04.png');
	}
	11.11% {
		background-image: url('../img/intro_number/intro_05.png');
	}
	13.88% {
		background-image: url('../img/intro_number/intro_06.png');
	}
	16.66% {
		background-image: url('../img/intro_number/intro_07.png');
	}
	19.44% {
		background-image: url('../img/intro_number/intro_08.png');
	}
	22.22% {
		background-image: url('../img/intro_number/intro_09.png');
	}
	25% {
		background-image: url('../img/intro_number/intro_10.png');
	}
	27.77% {
		background-image: url('../img/intro_number/intro_11.png');
	}
	30.55% {
		background-image: url('../img/intro_number/intro_12.png');
	}
	33.33% {
		background-image: url('../img/intro_number/intro_13.png');
	}
	36.11% {
		background-image: url('../img/intro_number/intro_14.png');
	}
	38.88% {
		background-image: url('../img/intro_number/intro_15.png');
	}
	41.66% {
		background-image: url('../img/intro_number/intro_16.png');
	}
	44.44% {
		background-image: url('../img/intro_number/intro_17.png');
	}
	47.22% {
		background-image: url('../img/intro_number/intro_18.png');
	}
	50% {
		background-image: url('../img/intro_number/intro_19.png');
	}
	52.77% {
		background-image: url('../img/intro_number/intro_20.png');
	}
	55.55% {
		background-image: url('../img/intro_number/intro_21.png');
	}
	58.33% {
		background-image: url('../img/intro_number/intro_22.png');
	}
	61.11% {
		background-image: url('../img/intro_number/intro_23.png');
	}
	63.88% {
		background-image: url('../img/intro_number/intro_24.png');
	}
	66.66% {
		background-image: url('../img/intro_number/intro_25.png');
	}
	69.44% {
		background-image: url('../img/intro_number/intro_26.png');
	}
	72.22% {
		background-image: url('../img/intro_number/intro_27.png');
	}
	75% {
		background-image: url('../img/intro_number/intro_28.png');
	}
	77.77% {
		background-image: url('../img/intro_number/intro_29.png');
	}
	80.55% {
		background-image: url('../img/intro_number/intro_30.png');
	}
	83.33% {
		background-image: url('../img/intro_number/intro_31.png');
	}
	86.11% {
		background-image: url('../img/intro_number/intro_32.png');
	}
	88.88% {
		background-image: url('../img/intro_number/intro_33.png');
	}
	91.66% {
		background-image: url('../img/intro_number/intro_34.png');
	}
	94.44% {
		background-image: url('../img/intro_number/intro_35.png');
	}
	97.22%,
	100% {
		background-image: url('../img/intro_number/intro_36.png');
	}
}

.pt_helper #container {
	background-color: transparent;
}

.pt_helper .start_btn_box {
	margin-top: 270px;
	text-align: center;
}

.pt_helper .start_btn_box .btn {
	width: 343px;
	height: 125px;
	background: url('../img/toolsDrawStart.png');
	font-size: 0;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* popup */
.message_popup {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	z-index: 999;
	text-align: center;
	transform: translate(0%, -50%);
}

.message_popup .inner_box {
	display: inline-block;
	padding: 30px 80px;
	background: #2d2e34;
	border: 8px solid #676872;
	border-radius: 98px;
	box-shadow: 5px 5px 10px rgb(0 0 0 / 30%);
	box-sizing: border-box;
}

.message_popup p {
	font-family: 'NanumSquareRound';
	font-size: 44px;
	font-weight: 700;
	line-height: 1em;
	color: #fff;
	text-align: center;
	text-shadow: 0 2px 8px rgb(82 89 94 / 30%);
}

.message_popup.long p {
	font-size: 50px;
}

.message_popup button {
	display: none;
	position: absolute;
	right: 55px;
	top: 50%;
	width: 221px;
	height: 88px;
	margin-top: -44px;
	background: url('../img/toolsSetOk.png');
	font-size: 0;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* dark */
.dark_page {
	background-color: #000;
	width: 100%;
	height: 100%;
}

.dark_page button {
	position: absolute;
	right: 40px;
	top: 45px;
	width: 49px;
	height: 49px;
	background: url('../img/toolsDarkClose.png');
	font-size: 0;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* common - board + seats */
/* popup - box_round_pop */
.box_round_pop {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.box_round_pop.show {
	display: block;
}

.box_round_pop .inner {
	position: absolute;
	overflow: hidden;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: 3px solid #0681c4;
	background: #099eef;
	border-radius: 32px;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
	pointer-events: auto;
	box-sizing: border-box;
}

.box_round_pop .inner h2 {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 72px;
	background: #099eef;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	font-size: 26px;
	line-height: 72px;
	color: #fff;
	padding: 0px 30px;
	box-sizing: border-box;
}

.box_round_pop .inner h2:before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0px;
	width: 20px;
	height: 20px;
	background: url(../img/board_popup_title_bg.png) 0px 0px no-repeat;
}

.box_round_pop.bc_b .inner {
	border: 3px solid #0681c4;
	background: #099eef;
}

.box_round_pop.bc_b .inner h2 {
	background: #099eef;
}

.box_round_pop.bc_b .inner h2:before {
	background-position: 0px 0px;
}

.box_round_pop.bc_g .inner {
	border: 3px solid #039faf;
	background: #00bed2;
}

.box_round_pop.bc_g .inner h2 {
	background: #00bed2;
}

.box_round_pop.bc_g .inner h2:before {
	background-position: -20px 0px;
}

.box_round_pop .inner .close_wrap {
	position: absolute;
	right: 30px;
	top: 19px;
}

.box_round_pop .inner .close_wrap .btn.close_btn {
	width: 30px;
	height: 30px;
	background: url(../img/board_popup_close_btn.png) center center no-repeat;
	text-indent: -9999px;
}

.box_round_pop .inner > .box {
	width: 100%;
	height: calc(100% - 72px);
	padding: 40px;
	background: #fff;
	border-radius: 0px 0px 30px 30px;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	font-size: 24px;
	color: #3e4c53;
	box-sizing: border-box;
}

.box_round_pop .inner > .box .input_wrap.box {
	width: 100%;
	height: 54px;
	background: #ecedef;
	border-radius: 32px;
	box-shadow: inset 0px 3px 0px #c9cacb;
	padding: 0px 20px;
}

.box_round_pop .inner > .box .input_wrap.box .input_txt {
	width: 100%;
	height: 100%;
	margin-top: 2px;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	font-size: 26px;
	color: #828790;
	text-align: left;
}

.box_round_pop .inner > .box .rub_txt {
	margin-bottom: 20px;
	font-size: 32px;
	color: #3e4c53;
	text-align: center;
}

.box_round_pop .inner .box > .btn_wrap {
	position: relative;
	width: 100%;
	margin-top: 30px;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt {
	display: inline-block;
	height: 52px;
	border-radius: 32px;
	font-family: 'NanumSquareRound';
	font-weight: 900;
	font-size: 20px;
	line-height: 52px;
	color: #fff;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt.dull {
	background: #ecedef;
	color: #828790;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt {
	background: #099eef;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt.dull:hover {
	background: #e6e6e6;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt:hover {
	background: #008fdd;
}

.box_round_pop.bc_b .inner .rub_txt + .input_wrap {
	margin-top: 30px;
}

/* save_popup */
.box_round_pop.save_popup .inner {
	width: 520px;
	height: 350px;
}

.box_round_pop.save_popup .inner .close_wrap {
	display: none;
}

.box_round_pop.save_popup .inner .box {
	padding-left: 60px;
	padding-right: 60px;
}

.box_round_pop.save_popup .box > .btn_wrap .btn.btxt {
	float: left;
	width: calc(50% - 10px);
}

.box_round_pop.save_popup .box > .btn_wrap .btn.btxt + .btn.btxt {
	margin-left: 20px;
}

/* load_popup */
.box_round_pop.load_popup .inner {
	width: 1000px;
	height: 560px;
}

.box_round_pop.load_popup .load_table {
	width: 100%;
}

.box_round_pop.load_popup .load_table_head {
	width: 100%;
	height: 44px;
	font-size: 24px;
	color: #039faf;
	border-bottom: 3px solid #039faf;
}

.box_round_pop.load_popup .load_table_head > div,
.box_round_pop.load_popup .load_table_list li > div {
	float: left;
}

.box_round_pop.load_popup .load_table_head > div:nth-child(1),
.box_round_pop.load_popup .load_table_list li > div:nth-child(1) {
	width: calc(100% - 450px);
}

.box_round_pop.load_popup .load_table_head > div:nth-child(2),
.box_round_pop.load_popup .load_table_list li > div:nth-child(2) {
	width: 130px;
	text-align: center;
}

.box_round_pop.load_popup .load_table_head > div:nth-child(3),
.box_round_pop.load_popup .load_table_list li > div:nth-child(3) {
	width: 250px;
	margin-left: 70px;
	text-align: center;
}

.box_round_pop.load_popup .load_table_list {
	font-size: 20px;
}

.box_round_pop.load_popup .load_table_list li {
	width: 100%;
	height: 60px;
	line-height: 60px;
	border-bottom: 1px solid #e7e7e7;
}

.box_round_pop.load_popup .load_table_list li > div:nth-child(1) span {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	padding-right: 20px;
}

.box_round_pop.load_popup .load_table_list li > div:nth-child(2) {
	color: #828790;
}

.box_round_pop.load_popup .load_table_list li > div:nth-child(3) {
	padding: 10px 18px;
}

.box_round_pop.load_popup .load_table_list .btn {
	float: left;
	width: 102px;
	height: 40px;
	border-radius: 32px;
	line-height: 40px;
	font-size: 18px;
}

.box_round_pop.load_popup .load_table_list .btn + .btn {
	margin-left: 10px;
}

.box_round_pop.load_popup .load_table_list .btn.load {
	background: #00bed2;
	color: #fff;
}

.box_round_pop.load_popup .load_table_list .btn.load:hover {
	background: #009dae;
}

.box_round_pop.load_popup .load_table_list .btn.delete {
	background: #ecedef;
	color: #828790;
}

.box_round_pop.load_popup .load_table_list .btn.delete:hover {
	background: #e6e6e6;
}

.box_round_pop.load_popup .load_table_nav {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 70px;
	text-align: center;
	margin-top: 10px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_prev,
.box_round_pop.load_popup .load_table_nav > .btn.table_next {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin: 0px 4px;
	text-indent: -9999px;
	background: url(../img/board_popup_paging.png) 0px 0px no-repeat;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_prev.skip {
	background-position: 0px 0px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_prev {
	background-position: 0px -32px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_next {
	background-position: 0px -64px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_next.skip {
	background-position: 0px -96px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_prev.skip:hover {
	background-position: -32px 0px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_prev:hover {
	background-position: -32px -32px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_next:hover {
	background-position: -32px -64px;
}

.box_round_pop.load_popup .load_table_nav > .btn.table_next.skip:hover {
	background-position: -32px -96px;
}

.box_round_pop.load_popup .load_table_nav > div {
	margin: 0px 20px;
}

.box_round_pop.load_popup .load_table_nav > div span {
	display: inline-block;
	width: 32px;
	height: 32px;
	background: #ecedef;
	border-radius: 8px;
	margin: 0px 2px;
	font-size: 18px;
	line-height: 34px;
	text-align: center;
	color: #828790;
	cursor: pointer;
}

.box_round_pop.load_popup .load_table_nav > div span.is--on {
	background: #00bed2;
	color: #fff;
}

/* save_popup */
.box_round_pop.board_popup .inner {
	position: absolute;
	width: 520px;
	height: 300px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.box_round_pop.board_popup .inner {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.box_round_pop.board_popup .inner .close_wrap {
	display: none;
}

.box_round_pop.board_popup .inner .box {
	padding-left: 60px;
	padding-right: 60px;
}

.box_round_pop.board_popup .box > .btn_wrap .btn.btxt {
	float: left;
	width: calc(50% - 10px);
}

.box_round_pop.board_popup .box > .btn_wrap .btn.btxt + .btn.btxt {
	margin-left: 20px;
}

.box_round_pop .inner .box > .btn_wrap .btn.btxt.is--disabled {
	pointer-events: none;
	background: #a6e0ff;
}

/* select wrap */
.select_wrap .btn_select {
	position: relative;
	min-width: 78px;
	height: 36px;
	padding: 0px 14px;
	border: 2px solid #dedede;
	border-radius: 6px;
	line-height: 34px;
	cursor: pointer;
	box-sizing: border-box;
}

.select_wrap .btn_select:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	margin-top: -6px;
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 12.74 7.24' style='enable-background:new 0 0 12.74 7.24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23828790;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='0,0 6.48,7.24 12.74,0 '/%3E%3C/svg%3E%0A");
	background-position: center center;
	background-repeat: no-repeat;
}

.select_wrap .btn_select.is--on:after {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 12.74 7.24' style='enable-background:new 0 0 12.74 7.24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23828790;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='0,7.24 6.48,0 12.74,7.24 '/%3E%3C/svg%3E%0A");
}

.select_wrap .drop_list {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 100;
}

.select_wrap .drop_list [data-select-option] {
	font-size: 17px;
	line-height: 30px;
	color: #898989;
	padding: 0px 8px;
	cursor: pointer;
	box-sizing: border-box;
}

.select_wrap .drop_list [data-select-option]:hover,
.select_wrap .drop_list [data-select-option].is--on {
	color: #6187eb;
}

.select_wrap .drop_list.select--open {
	display: block;
	width: 100%;
	padding: 6px;
	background: #ffffff;
	border: 1px solid #dedede;
	border-radius: 6px;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	animation: baseDopListMotion ease 0.2s both;
	-webkit-animaition: baseDopListMotion ease 0.2s both;
	-ms-animation: baseDopListMotion ease 0.2s both;
}

@keyframes baseDopListMotion {
	0% {
		opacity: 0;
		margin-top: -6px;
	}

	100% {
		opacity: 1;
		margin-top: 4px;
	}
}

@-webkit-keyframes baseDopListMotion {
	0% {
		opacity: 0;
		margin-top: -5px;
	}

	100% {
		opacity: 1;
		margin-top: 4px;
	}
}

@-ms-keyframes baseDopListMotion {
	0% {
		opacity: 0;
		margin-top: -5px;
	}

	100% {
		opacity: 1;
		margin-top: 4px;
	}
}

.timer_body .timer_page {
	background: #e4f3f2 url(../img/timer_bg_1.png) left bottom no-repeat;
	background-size: contain;
}

.analog_body .timer_page {
	background: #e4f3f2 url(../img/timer_bg_2.png) left bottom no-repeat;
	background-size: contain;
}
.pie_body .timer_page {
	background: #e4f3f2 url(../img/timer_bg_3.png) left bottom no-repeat;
	background-size: contain;
}

.activity_body .activity_page {
	background: #e4f3f2 url(../img/timer_bg_4.png) no-repeat left 75px;
}